/* --- DEĞİŞKENLER VE KURULUM --- */
:root {
    --primary: #3B82F6; /* Modern Canlı Mavi */
    --primary-dark: #2563EB;
    --accent: #06B6D4; /* Cyan Vurgular */
    --dark-bg: #0F172A; /* Slate 900 */
    --card-bg: #1E293B; /* Slate 800 */
    --text-light: #F8FAFC;
    --text-gray: #94A3B8;
    --glass: rgba(30, 41, 59, 0.7);
    --border: rgba(255, 255, 255, 0.1);
    --radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { width: 100%; display: block; }

/* --- LOADER --- */
#loader {
    position: fixed;
    inset: 0;
    background: var(--dark-bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- HEADER --- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 5%;
    transition: var(--transition);
    background: transparent;
}

header.scrolled {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 10px 5%;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}



/* --- HEADER LOGO (JUMBO BOY) --- */
.logo img {
    height: 100px; /* Masaüstü için: Bayağı büyük (Önceki 75px idi) */
    width: auto;
    filter: brightness(0) invert(1); /* Siyah logoyu beyaz yapma filtresi */
    transition: all 0.3s ease;
    display: block; /* Kaymaları önlemek için */
}

/* Mouse ile üzerine gelince */
.logo:hover img {
    transform: scale(1.05); /* Hafifçe daha da büyüsün */
}

/* --- MOBİL AYARI --- */
@media (max-width: 768px) {
    .logo img {
        height: 75px; /* Mobilde de büyük: Neredeyse header'ı doldurur (Önceki 60px idi) */
    }
    
    /* Logo çok büyüdüğü için header'ın kenar boşluklarını biraz kısalım ki çok yer kaplamasın */
    header {
        padding: 10px 5%; 
    }
}

/* --- SCROLL KÜÇÜLME EFEKTİ (İSTEĞE BAĞLI) --- */
/* Sayfa aşağı kayınca logo yine büyük kalsın ama bir tık toplasın */
header.scrolled .logo img {
    height: 80px; /* Scroll yapınca 100'den 80'e insin (Yine de büyük) */
}
/* Sayfa aşağı kaydırıldığında logo biraz küçülsün (Zariflik katar) */
header.scrolled .logo img {
    height: 60px; /* Aşağı inince 75'ten 60'a düşer */
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 25px;
    transition: var(--transition);
}

.nav-menu ul {
    display: flex;
    gap: 25px;
}

.nav-menu a {
    font-weight: 400;
    font-size: 0.95rem;
    position: relative;
    color: var(--text-light);
}

.nav-menu a:hover, .nav-menu a.active {
    color: var(--primary);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--primary);
    transition: var(--transition);
}

.nav-menu a:hover::after { width: 100%; }

.cta-group {
    display: flex;
    gap: 10px;
}

.btn-whatsapp {
    background: #25D366;
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
}
.btn-whatsapp:hover { box-shadow: 0 0 15px rgba(37, 211, 102, 0.4); }

.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.btn-icon:hover { background: var(--primary); color: white; }

/* Hamburger Menu (Mobile) */
.hamburger { display: none; cursor: pointer; }
.hamburger span {
    display: block; width: 25px; height: 3px; background: white;
    margin: 5px; transition: var(--transition);
}

/* --- HERO SECTION --- */
#hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('assets/images/hero-BuyukGorsel.jpg') center/cover no-repeat;
    background-attachment: fixed; /* Parallax etkisi */
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), var(--dark-bg));
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 20px;
}

.text-gradient {
    background: linear-gradient(45deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#hero p {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-primary {
    background: var(--primary);
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 10px 20px -10px var(--primary);
}
.btn-primary:hover { transform: translateY(-3px); background: var(--primary-dark); }

.btn-glass {
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
}
.btn-glass:hover { background: rgba(255,255,255,0.2); }

/* Scroll Animasyonu */
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.mouse {
    width: 26px; height: 40px; border: 2px solid rgba(255,255,255,0.5);
    border-radius: 20px; position: relative;
}
.wheel {
    width: 4px; height: 8px; background: white; border-radius: 2px;
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    animation: scroll 1.5s infinite;
}
@keyframes scroll {
    0% { opacity: 1; top: 6px; }
    100% { opacity: 0; top: 20px; }
}

/* --- YENİ MODERN STATS BAR (Outline Style) --- */

.stats-bar {
    /* Cam Efekti ve Arka Plan */
    background: rgba(15, 23, 42, 0.6); /* Çok koyu lacivert, %60 opaklık */
    backdrop-filter: blur(10px); /* Arkadaki resim bulanıklaşsın */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    
    display: flex;
    justify-content: center;
    gap: 80px; /* Öğeler arası boşluk */
    padding: 50px 0;
    
    /* Hero'nun üzerine bindirmek yerine hemen altına modern bir geçişle koyalım */
    margin-top: 0; 
    position: relative;
    z-index: 5;
    
    /* Kenarları yumuşatalım ama tam kutu olmasın, şerit gibi dursun */
    border-radius: 0; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.stat-item {
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
    cursor: default;
}

/* Mouse ile üzerine gelince hafif yukarı çıksın */
.stat-item:hover {
    transform: translateY(-5px);
}

/* SAYILARIN TASARIMI (Referans Görselindeki Gibi) */
.stat-item h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 4.5rem; /* Çok büyük puntolar */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    
    /* Outline (İçi Boş) Efekti */
    color: transparent; /* İç rengi yok */
    -webkit-text-stroke: 1px var(--primary); /* Kenar çizgisi MAVİ */
    
    /* Geçiş efektleri */
    transition: all 0.4s ease;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.2); /* Hafif neon parlaması */
}

/* Hover olunca içi dolsun */
.stat-item:hover h3 {
    color: var(--primary); /* İçini mavi yap */
    text-shadow: 0 0 30px var(--primary); /* Parlamayı artır */
    -webkit-text-stroke: 0px; /* Çizgiyi kaldır */
}

/* Altındaki Yazı (Tecrübe, Müşteri vb.) */
.stat-item p {
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px; /* Harf aralarını aç */
    opacity: 0.8;
}

/* Öğelerin arasına çizgi koyalım (Sadece masaüstünde) */
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
}

/* MOBİL UYUMU */
@media (max-width: 992px) {
    .stats-bar {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
        text-align: center;
    }
    
    .stat-item::after { display: none; } /* Mobilde çizgileri kaldır */
    
    .stat-item h3 {
        font-size: 3.5rem; /* Mobilde biraz küçült */
    }
}

/* --- SERVICES --- */
#services { padding: 100px 5%; }
.container { max-width: 1200px; margin: 0 auto; }

.section-title {
    text-align: center;
    margin-bottom: 60px;
}
.section-title h2 { font-size: 2.5rem; margin-bottom: 10px; }
.section-title p { color: var(--text-gray); }

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- KARTLARI GÜÇLENDİRME --- */
.service-card {
    /* Kartların arka planını biraz daha belirgin yapalım */
    background: linear-gradient(145deg, #1e293b, #0f172a); 
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.service-card:hover {
    /* Hover olunca neon efekti */
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); /* Mavi parlama */
    transform: translateY(-10px) scale(1.02); /* Hafif büyüme */
}

/* İkon kutusunu parlatalım */
.icon-box {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    z-index: 2;
}

.card-image {
    position: relative;
    height: 200px;
}
.card-image img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.service-card:hover .card-image img { transform: scale(1.1); }

.icon-box {
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 50px; height: 50px;
    background: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.card-content { padding: 30px 20px 25px; }
.card-content h3 { font-size: 1.4rem; margin-bottom: 10px; }
.card-content p { color: var(--text-gray); font-size: 0.95rem; margin-bottom: 20px; }
.link-arrow {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.link-arrow i { transition: transform 0.3s; }
.link-arrow:hover i { transform: translateX(5px); }

/* --- WHY US --- */
#why-us {
    padding: 100px 5%;
    background: #0B1120; /* Biraz daha koyu */
}
.why-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.feature-list { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.feature-list li {
    display: flex;
    gap: 15px;
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
}
.feature-list i { font-size: 1.5rem; color: var(--primary); margin-top: 5px; }
.feature-list strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.feature-list span { font-size: 0.9rem; color: var(--text-gray); }

.visual-box { position: relative; }
.visual-box img { border-radius: 20px; opacity: 0.8; }
.floating-badge {
    position: absolute;
    bottom: 20px; right: -20px;
    background: var(--card-bg);
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border: 1px solid var(--primary);
    display: flex; gap: 10px; align-items: center; font-weight: bold;
}
.floating-badge i { color: #F59E0B; }

/* --- CONTACT --- */
#contact {
    padding: 100px 0 0 0;
    
    /* SİHİRLİ GEÇİŞ BURADA: */
    /* Yukarıdan (Body rengi #0F172A) başla, aşağıda Zifiri Siyaha (#000) dön */
    background: linear-gradient(to bottom, var(--dark-bg) 0%, #000000 100%);
    
    /* Footer ile arada 1 piksellik boşluk kalmasın diye eksi marj */
    margin-bottom: -1px; 
    position: relative;
    z-index: 2; /* Footer'ın hemen üzerinde dursun */
}
.contact-box {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    margin-bottom: 50px;
}

.form-side { padding: 50px; }
.info-side {
    background: var(--primary);
    padding: 50px;
    color: white;
    display: flex;
    align-items: center;
}
.info-content { width: 100%; }
.info-content h3 { font-size: 1.8rem; margin-bottom: 20px; }
.info-content p { margin-bottom: 15px; display: flex; gap: 10px; align-items: center; }

/* Modern Inputlar */
/* --- MODERN INPUTLAR VE PREMIUM SELECT (GÜNCELLENMİŞ HALİ) --- */

.input-group { position: relative; margin-bottom: 25px; }

/* 1. SADECE YAZI KUTULARI (Ad, Telefon vb. - Eski hali korundu) */
.input-group input {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
}

/* 2. PREMIUM SELECT LİSTESİ (YENİ EKLENEN KISIM) */
.input-group select {
    width: 100%;
    padding: 15px 20px;
    padding-right: 45px; /* Ok için sağdan boşluk */
    
    /* Standart oku gizle */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Koyu Zemin ve Tasarım */
    background-color: rgba(30, 41, 59, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Mavi Özel Ok İkonu */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233B82F6%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 20px top 50%;
    background-size: 14px auto;
}

/* Select Hover Efekti */
.input-group select:hover, .input-group select:focus {
    border-color: var(--primary);
    background-color: rgba(30, 41, 59, 0.9);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* Açılan Liste Renkleri (Chrome/Windows'da koyu görünür) */
.input-group select option {
    background-color: #1E293B;
    color: white;
    padding: 15px;
}

/* 3. ETİKETLER (LABEL) - Sadece Yazı Kutuları İçin */
.input-group label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    pointer-events: none;
    transition: var(--transition);
    background: var(--card-bg);
    padding: 0 5px;
}

/* Floating Label Logic (Yazı yazınca yukarı kayan yazı) */
.input-group input:focus, .input-group input:not(:placeholder-shown) {
    border-color: var(--primary);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.8rem;
    color: var(--primary);
}

/* Floating Label Logic */
.input-group input:focus, .input-group input:not(:placeholder-shown) {
    border-color: var(--primary);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.8rem;
    color: var(--primary);
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    display: flex; justify-content: center; gap: 10px; align-items: center;
}
.btn-submit:hover { background: var(--primary-dark); }

/* --- FOOTER --- */
.main-footer {
    border-top: 1px solid var(--border);
    padding: 30px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-gray);
}
.socials a {
    color: var(--text-light);
    margin-left: 15px;
    font-size: 1.2rem;
}

/* --- ANIMASYON JS İÇİN CLASS --- */
.hidden-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.show-element {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    #hero h1 { font-size: 3rem; }
    .why-wrapper, .contact-box { grid-template-columns: 1fr; }
    .stats-bar { flex-direction: column; gap: 20px; padding: 30px; }
}

@media (max-width: 768px) {
    .hamburger { display: block; z-index: 1001; }
    .nav-menu {
        position: fixed;
        top: 0; right: -100%;
        height: 100vh;
        width: 70%;
        background: var(--card-bg);
        flex-direction: column;
        padding-top: 100px;
        transition: 0.4s;
        box-shadow: -10px 0 20px rgba(0,0,0,0.5);
    }
    .nav-menu.active {
        right: 0;
    }
    .nav-menu ul { flex-direction: column; text-align: center; }
    
    #hero h1 { font-size: 2.2rem; }
    .floating-badge { right: 0; bottom: -15px; }
}

/* style.css EN ALTINA EKLE */

/* --- 1. WHATSAPP BUTONU (SAĞ ALT - TEK BAŞINA) --- */
.floating-whatsapp {
    position: fixed; /* Artık bir kutu içinde değil, ekrana sabitliyoruz */
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: transform 0.3s ease;
    text-decoration: none;
    margin: 0 !important;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
}

/* Nabız Efekti */
.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #25D366;
    animation: pulse-animation 2s infinite;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Mobilde WhatsApp Konumu */
@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        font-size: 28px;
    }
}

/* --- 2. HEADER İÇİN YENİ INSTAGRAM BUTONU --- */
/* Bu class'ı index.html'de header'a eklediğin butona verdik */
.btn-instagram-header {
    /* Instagram'ın orijinal renk geçişi */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: white !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-instagram-header:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(214, 36, 159, 0.4);
}



/* --- ALT SAYFA ÖZEL STİLLERİ --- */

/* Hizmet Detayları - Zikzak Yapı */
.service-detail-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 20px;
}

/* Telefondan girince alt alta olsun */
@media (max-width: 768px) {
    .service-detail-row {
        flex-direction: column !important; /* Yönü zorla dikey yap */
        text-align: center;
    }
}

.detail-img { flex: 1; }
.detail-text { flex: 1; }

.detail-text h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 768px) {
    .detail-text h3 { justify-content: center; } /* Mobilde başlığı ortala */
}

.detail-text ul li {
    margin-bottom: 8px;
    font-size: 1.05rem;
}

/* --- DİNAMİK DURUM GÖSTERGESİ --- */
.status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1); /* Hafif transparan */
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Açık Durumu (Yeşil) */
.status-open .status-dot {
    background-color: #10B981;
    box-shadow: 0 0 10px #10B981;
    animation: pulse-green 2s infinite;
}
.status-open { color: #10B981; border-color: rgba(16, 185, 129, 0.3); }

/* Kapalı Durumu (Kırmızı) */
.status-closed .status-dot {
    background-color: #EF4444;
}
.status-closed { color: #EF4444; border-color: rgba(239, 68, 68, 0.3); }

@keyframes pulse-green {
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { opacity: 1; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Mobilde yer kaplamasın, sadece ikona dönüşebilir veya gizlenebilir */
@media (max-width: 480px) {
    .status-text { display: none; } /* Yazıyı gizle */
    .status-badge { padding: 8px; margin-right: 5px; } /* Sadece nokta kalsın */
}

/* --- YENİ ACCORDION (NEDEN BİZ) TASARIMI --- */

.why-accordion-section {
    padding: 100px 5%;
    background: linear-gradient(to right, #0F172A, #162032); /* Hafif degrade */
}

.why-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* İkiye böl */
    gap: 60px;
    align-items: start;
}

.why-text-content h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin: 20px 0;
}

.why-text-content p {
    color: var(--text-gray);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Accordion Kutusu */
.accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item {
    background: rgba(30, 41, 59, 0.5); /* Hafif transparan koyu */
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Aktif olduğunda kenarlık parlasın */
.accordion-item.active {
    border-color: var(--primary);
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Başlık Butonu */
.accordion-header {
    width: 100%;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s;
}

.accordion-header:hover {
    color: var(--primary);
}

.accordion-header i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    color: var(--text-gray);
}

/* Aktif olunca ok dönsün */
.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
    color: var(--primary);
}

/* İçerik Kısmı (Açılır Kapanır) */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0,0,0,0.1);
}

.body-content {
    padding: 0 25px 25px;
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Mobil Uyum */
@media (max-width: 992px) {
    .why-grid-layout {
        grid-template-columns: 1fr; /* Mobilde alt alta */
        gap: 40px;
    }
    .why-text-content h2 { font-size: 2.2rem; }
}
/* --- MOBİL MENÜ AYARLARI (992px ve altı) --- */
@media (max-width: 992px) {
    .hamburger { display: block; z-index: 1001; }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Kapalıyken sağda gizli */
        width: 280px;
        height: 100dvh;
        background: var(--dark -bg);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        padding: 100px 30px 40px; /* Üst, yan ve alt boşluklar */
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* KAYDIRILABİLİRLİK VE ERİŞİLEBİLİRLİK */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    .nav-menu.active {
        right: 0; /* Menü açıldığında yerine gelir */
    }

    .nav-menu ul {
        flex-direction: column;
        text-align: left;
        gap: 15px;
        width: 100%;
    }

    .nav-menu ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .nav-menu ul li a {
        display: block;
        padding: 15px 0;
        font-size: 1.1rem;
    }

    /* Admin Giriş Butonu Mobilde Menü İçinde Dursun */
    .admin-access-area {
        margin-top: 30px;
        padding: 0;
        border-top: none;
    }
}

/* --- SİNEMATİK HERO: KAOSTAN DÜZENE (Scatter Effect) --- */

/* Hero Alanı */
#hero {
    background: none !important; 
    position: relative;
    overflow: hidden; 
}

/* INDEX BG IMAGE*/
.hero-bg {
    position: absolute;
    inset: 0;
    /* ÖNEMLİ DEĞİŞİKLİK BURADA: */
    /* Resmin üzerine koyu bir degrade (gradient) ekledik. Bu, o eski "koyu tonu" geri getirecek. */
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.9)), 
                url('assets/logo/hero-background.jpeg') center/cover no-repeat;
    
    background-attachment: fixed;
    z-index: 1;
    
    /* Başlangıç durumu */
    filter: blur(20px);
    transform: scale(1.1);
    opacity: 0;
}

#hero.start-animation .hero-bg {
    /* Süreyi biraz uzattık (2.5s) daha dramatik olsun */
    animation: unblurImage 2.5s ease-out forwards;
}

/* YENİLENMİŞ NETLEŞME ANİMASYONU */
@keyframes unblurImage {
    0% { 
        opacity: 0; 
        filter: blur(20px); /* Çok bulanık başla */
        transform: scale(1.1); 
    }
    10% { opacity: 1; } /* Hemen görünür ol */
    100% { 
        opacity: 1; 
        /* ÖNEMLİ DEĞİŞİKLİK BURADA: */
        filter: blur(2px); /* Tamamen netleşme, hafif yumuşak kal (Jilet gibi olmasın) */
        transform: scale(1); /* Yerine otur */
    }
}

/* --- HARF ANİMASYONU (BURASI AYNI KALIYOR - DOKUNMA) --- */
.letter {
    display: inline-block;
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(2);
    filter: blur(10px);
}

#hero.start-animation .letter {
    animation: assembleText 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes assembleText {
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
        filter: blur(0);
    }
}

/* Diğer öğeler */
.anim-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}
#hero.start-animation .anim-fade {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}

/* --- MOBİL İÇİN BAŞLIK DÜZELTMESİ (Style.css En Altına Ekle) --- */

@media (max-width: 768px) {
    /* Hero başlığını küçültelim ki kelimeler parçalanmasın */
    #hero h1 {
        font-size: 1.8rem !important; /* 2.2rem'den 1.8rem'e düşürdük */
        line-height: 1.2;
        padding: 0 10px; /* Kenarlardan biraz boşluk bırakalım */
        word-wrap: normal; /* Kelimeyi zorla bölmeyi kapat */
    }
    
    /* "Aracınızın Performansını" kelimesi çok uzun olduğu için */
    /* Mobilde biraz daha geniş alan kullansın */
    .hero-content {
        width: 100%;
        padding: 0 15px;
    }
}

/* Eğer çok küçük ekranlı (iPhone SE gibi) telefonlarda hala sorun olursa: */
@media (max-width: 380px) {
    #hero h1 {
        font-size: 1.5rem !important;
    }
}

/* --- HİZMETLER SAYFASI ÖZEL ANİMASYONLARI (Style.css En Alta) --- */

/* Satırın kendisi için etkileşim */
.service-detail-row {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yumuşak yaylanma efekti */
    padding: 20px; /* Hover olduğunda kenarlardan taşmaması için iç boşluk */
    border-radius: 20px;
    border: 1px solid transparent; /* Sınır çizgisini rezerve et */
}

/* Mouse üzerine gelince */
.service-detail-row:hover {
    background: rgba(255, 255, 255, 0.03); /* Çok hafif bir aydınlanma */
    transform: translateY(-7px); /* Yukarı kalkış */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Derinlik gölgesi */
    border-color: rgba(59, 130, 246, 0.2); /* Hafif mavi çerçeve */
}

/* Resim Alanı Düzenlemesi */
.detail-img {
    overflow: hidden; /* Resim büyüdüğünde dışarı taşmasın */
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease;
}

/* Resmin kendisi için zoom efekti */
.detail-img img {
    transition: transform 0.6s ease;
    width: 100%;
    display: block;
}

/* Hover olunca resim büyüsün */
.service-detail-row:hover .detail-img img {
    transform: scale(1.1);
}

.service-detail-row:hover .detail-img {
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); /* Resim gölgesi mavileşsin */
}

/* İkon Animasyonu */
.detail-text h3 i {
    transition: all 0.4s ease;
    display: inline-block; /* Dönme efekti için gerekli */
}

/* Hover olunca ikon hareketlensin */
.service-detail-row:hover .detail-text h3 i {
    transform: scale(1.2) rotate(15deg); /* Büyü ve hafif dön */
    color: var(--accent); /* Rengi turkuaza (cyan) dönsün */
    text-shadow: 0 0 10px var(--accent); /* Neon parlama */
}

/* --- İLETİŞİM GİRİŞ ŞERİDİ (Contact Intro) --- */

.contact-header-strip {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px; /* Form ile arasına boşluk koyduk */
    padding: 0 20px;
}

.contact-header-strip h2 {
    font-size: 3rem; /* Görseldeki gibi büyük başlık */
    line-height: 1.2;
    margin-bottom: 30px;
}

/* Mail ve Saat Bilgisi Şeridi */
.contact-info-bar {
    display: flex;
    justify-content: center;
    gap: 40px; /* Öğeler arası boşluk */
    margin-bottom: 30px;
    flex-wrap: wrap; /* Mobilde alt alta geçsin */
    font-family: 'Outfit', sans-serif;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 500;
}

/* İkon Tasarımı */
.info-item i {
    color: var(--primary); /* Mavi ikon */
    font-size: 1.4rem;
    
    /* İstersen ikonların arkasına hafif bir parlama ekleyebilirsin */
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.4));
}

/* Açıklama Yazısı */
.contact-desc {
    color: var(--text-gray);
    font-size: 1.1rem;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .contact-header-strip h2 { font-size: 2rem; }
    .contact-info-bar { gap: 20px; flex-direction: column; } /* Mobilde alt alta */
    .contact-header-strip { margin-bottom: 40px; }
}


/* --- MODERN FOOTER (DÜZELTİLMİŞ GEÇİŞ) --- */
.mega-footer {
    /* 1. Siyah başla (Üstteki bölümle çizgisiz birleş) */
    /* 2. Ortada Maviye dön (İçerik alanı parlasın) */
    /* 3. En altta Siyah bitir (Sonsuzluk hissi) */
    background: linear-gradient(to bottom, 
        #000000 0%, 
        #1E293B 20%, 
        #0F172A 80%, 
        #000000 100%
    );

    /* Diğer ayarlar aynı */
    border-top: none; 
    padding: 80px 0 20px;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

/* Footer'ın kendisi yerine içindeki CONTAINER'ı kutu yapıyoruz */
.mega-footer .container {
    /* Burası boş kalacak, sadece düzeni sağlıyor */
}
/* İç Kutu Artık Sadece Hizalama Yapacak (Rengi Yok) */
.footer-inner-box {
    background: transparent; /* Şeffaf */
    padding: 0; 
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* --- İçerik kısımları aynı kalıyor (Değişmedi) --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.4);
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .mega-footer { 
        margin-top: 40px; 
        padding-bottom: 30px;
    }
    .footer-inner-box { 
        padding: 40px 20px; 
        border-radius: 15px; 
    }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}


.footer-logo img {
    height: 90px; /* Boyutu ciddi oranda büyüttük (Eskisi 60px idi) */
    width: auto;  /* En-boy oranını koru, sünmesin */
    margin-bottom: 25px;
    
    display: inline-block; /* Hizalamayı düzeltir */
    object-fit: contain; /* Resmi kutuya sığdırırken bozulmayı önler */
    
    /* DİKKAT: */
    /* Eğer logonun orijinal renkleriyle görünmesini istiyorsan aşağıdaki satırı SİL. */
    /* Eğer logon siyahsa ve beyaz görünmesi gerekiyorsa bu satır KALSIN. */
    filter: brightness(0) invert(1); 
    
    opacity: 0.9; /* Çok hafif bir matlık, göze hoş gelir */
    transition: all 0.3s ease;
}
/* Mouse ile üzerine gelince */
.footer-logo:hover img {
    transform: scale(1.05); /* Hafifçe büyüsün */
    opacity: 1; /* Tam parlak olsun */
}

/* MOBİLDE LOGO AYARI */
@media (max-width: 768px) {
    .footer-logo img {
        height: 70px; /* Mobilde de biraz büyük olsun ama ekranı kaplamasın */
        margin: 0 auto 20px auto; /* Mobilde ortala */
        display: block;
    }
}


.fc-item {
    margin-bottom: 25px;
}

.fc-item span {
    display: block;
    font-size: 0.75rem;
    color: var(--primary); /* Mavi başlıklar */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.fc-item p, .fc-item a {
    color: white;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s;
}

.direction-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem !important;
    text-decoration: underline !important;
    color: var(--text-gray) !important;
}
.direction-link:hover { color: var(--primary) !important; }

/* Sosyal Medya İkonları */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}
.footer-socials a {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 1.1rem;
    transition: all 0.3s;
}
.footer-socials a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

/* 2. Sütun: Başlıklar ve Linkler */
.footer-col h3 {
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

/* Başlığın altına ufak çizgi (Görseldeki gibi) */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: -8px;
    width: 30px; height: 2px;
    background: var(--primary);
}

.footer-links li { margin-bottom: 12px; }
.footer-links a {
    color: var(--text-gray);
    transition: var(--transition);
}
.footer-links a:hover {
    color: var(--primary);
    padding-left: 5px; /* Hover olunca sağa kaysın */
}

/* 3. Sütun: Çalışma Saatleri (Tablo Görünümü) */
.working-hours {
    background: rgba(255,255,255,0.03); /* Hafif kutu efekti */
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.wh-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wh-row:last-child { border-bottom: none; }

.wh-time { color: white; font-weight: 600; }
.wh-row.closed .wh-time { color: #EF4444; } /* Kapalı yazısı kırmızı */

.footer-note {
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-gray);
    font-style: italic;
}

/* Alt Çizgi */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.4);
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .mega-footer { padding: 50px 0 30px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    
    /* Mobilde içerikleri ortala */
    .brand-col .footer-contact-info { text-align: center; }
    .brand-col .direction-link { justify-content: center; }
    .brand-col .footer-socials { justify-content: center; }
}

/* --- HİBRİT FOOTER TASARIMI (LOGO ORTADA, YAZILAR SOLDA) --- */

/* 1. Logoyu içine alan kutuyu ortalıyoruz */
.logo-center-wrapper {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 30px;
}

/* 2. Logonun Kendisi (BÜYÜK BOY) */
.logo-center-wrapper img {
    /* BURAYI GÜNCELLEDİK: 110px yerine 150px yaptık */
    height: 150px; 
    
    width: auto;
    display: inline-block;
    filter: brightness(0) invert(1);
    opacity: 1;
    transition: transform 0.3s ease;
}

.logo-center-wrapper img:hover {
    transform: scale(1.05);
}

/* 3. Sütun Ayarları */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 60px;
    margin-bottom: 40px;
}
/* İletişim Bilgileri (Sola Yaslı) */
.brand-col .footer-contact-info { text-align: left; }
.brand-col .direction-link { justify-content: flex-start; }
.brand-col .footer-socials { justify-content: flex-start; }

/* --- MOBİL FOOTER TAŞMA DÜZELTMESİ (EN ALTA EKLE) --- */

@media (max-width: 992px) {
    /* Masaüstündeki 3'lü sütun yapısını ZORLA iptal et ve tek sütuna indir */
    .footer-grid {
        grid-template-columns: 1fr !important; 
        gap: 50px;
        text-align: center; /* Mobilde her şey ortalı dursun, daha şık */
    }

    /* Kapsayıcı genişlikleri serbest bırak */
    .footer-col, .brand-col {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Mobilde sola yaslı olan iletişim bilgilerini ortaya çekelim (Daha düzenli durur) */
    .brand-col .footer-contact-info {
        text-align: center !important;
    }
    
    .brand-col .direction-link {
        justify-content: center !important;
    }
    
    .brand-col .footer-socials {
        justify-content: center !important;
    }
    
    /* Logoyu da garanti ortalayalım */
    .logo-center-wrapper img {
        height: 110px !important;
    }
}

/* 
/* --- HARİTA YÜKLENİYOR EFEKTİ --- */
.map-frame {
    background-color: #1E293B;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.map-frame::before {
    content: 'Harita Yükleniyor...'; /* İŞTE SUÇLU BU SATIR :) */
    color: var(--text-gray);
    font-size: 0.9rem;
    position: absolute;
    z-index: 0;
}

.lazy-map {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lazy-map.loaded {
    opacity: 1;
}

/* --- HARİTA YAZISINI ZORLA GİZLE --- */
.map-frame::before {
    content: none !important; /* İçeriği boşalt */
    display: none !important; /* Görünmez yap */
}

/* --- FOOTER ALTI DOLGU (GÜVEN & YUKARI ÇIK) --- */

.footer-mobile-extras {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

/* Güven İkonları */
.trust-badges {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-gray);
    font-size: 1.5rem;
}

.trust-badges i {
    transition: color 0.3s;
}

.trust-badges i:hover {
    color: white;
}

.trust-badges .divider {
    color: rgba(255,255,255,0.1);
    font-size: 1.2rem;
}

.trust-text {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Yukarı Çık Butonu */
.back-to-top-btn {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.back-to-top-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* MOBİL İÇİN ÖZEL DÜZEN (ALT ALTA DİZ) */
@media (max-width: 768px) {
    .footer-mobile-extras {
        flex-direction: column; /* Alt alta gelsinler */
        gap: 20px;
        padding-bottom: 10px;
    }
    
    .back-to-top-btn {
        width: 100%; /* Buton boydan boya olsun, parmakla basması kolaylaşsın */
        justify-content: center;
    }
}

/* --- ULTRA PREMIUM MOBİL MENÜ TASARIMI --- */

/* Başlangıçta gizli olanlar */
.mobile-menu-head, .mobile-menu-footer { display: none; }

@media (max-width: 768px) {
    
    /* 1. MENÜNÜN KENDİSİ (BUZLU CAM EFEKTİ) */
    .nav-menu {
        padding-top: 40px; /* Üst boşluk */
        justify-content: flex-start;
        gap: 15px;
        
        /* DÜZ RENK YERİNE CAM EFEKTİ */
        background: rgba(15, 23, 42, 0.95) !important; /* %95 opak koyu lacivert */
        backdrop-filter: blur(15px); /* Arkadaki siteyi buzla */
        -webkit-backdrop-filter: blur(15px); /* Safari desteği */
        
        box-shadow: -10px 0 40px rgba(0,0,0,0.8); /* Derin gölge */
        border-left: 1px solid rgba(255,255,255,0.05); /* Sol kenara ince ışıltı */
    }

    /* 2. MENÜ LOGOSU (PARLAYAN EFEKT) */
    .mobile-menu-head {
        display: block;
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
        position: relative;
    }
    
    .mobile-menu-head img {
        height: 120px; 
        width: auto;
        margin: 0 auto;
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)) brightness(0) invert(1); /* Logonun arkasına mavi ışık (Glow) */
    }

    /* 3. LİNKLER (DAHA FERAH VE ANİMASYONLU) */
    .nav-menu ul {
        width: 100%;
        padding: 0 30px; /* Kenarlardan boşluk */
    }

    .nav-menu ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.03); /* Çok ince çizgi */
        
        /* Animasyon için hazırlık */
        opacity: 0; 
        transform: translateX(20px); 
        transition: all 0.4s ease;
    }

    .nav-menu ul li a {
        display: block;
        padding: 18px 0;
        font-size: 1.2rem;
        color: var(--text-gray);
        font-weight: 500;
        text-align: left; /* Sola yaslı daha modern durur */
    }

   .nav-menu ul li a {
        display: block;
        
        /* GÜNCELLEME BURADA: */
        padding: 14px 0; /* Eskisi 18px idi (Biraz daralttık) */
        font-size: 1rem; /* Eskisi 1.2rem idi (Daha kibar oldu) */
        
        color: var(--text-gray);
        font-weight: 500;
        text-align: left;
    }
    
    /* Aktif linkin yanına mavi nokta koyalım */
    .nav-menu ul li a.active::before {
        content: '●';
        color: var(--primary);
        margin-right: 10px;
        font-size: 0.8rem;
    }

    /* 4. SIRALI GİRİŞ ANİMASYONU (Linkler teker teker gelsin) */
    /* Menüye 'active' sınıfı eklendiğinde (JS bunu yapıyor) */
    .nav-menu.active ul li {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Her linke gecikme verelim ki sırayla aksınlar */
    .nav-menu.active ul li:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu.active ul li:nth-child(2) { transition-delay: 0.2s; }
    .nav-menu.active ul li:nth-child(3) { transition-delay: 0.3s; }
    .nav-menu.active ul li:nth-child(4) { transition-delay: 0.4s; }

    /* 5. SLOGAN (KART GÖRÜNÜMÜ) */
    .mobile-menu-footer {
        display: block;
        margin-top: auto; /* En alta it */
        margin-bottom: 40px;
        text-align: center;
        width: 85%;
        
        background: rgba(255,255,255,0.03); /* Hafif kutu */
        padding: 20px;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,0.05);
        
        font-size: 0.9rem;
        color: rgba(255,255,255,0.6);
    }

    /* İkonları da ortalayalım */
    .cta-group {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

/* --- ŞEHİR İSMİ DÜZELTMESİ (GÜNCELLENMİŞ) --- */

/* 1. Sadece ANA BAŞLIKTAKİ şehir ismine boşluk ver */
#heroTitle .dynamic-city {
    margin-right: 15px; 
    display: inline-block;
}

/* 2. Rozetteki (Badge) şehir isminin boşluğunu SIFIRLA */
.badge .dynamic-city {
    margin-right: 0 !important;
    display: inline;
}



/* ÜRÜNLER KISMI CSS KODLARI BU KISIMDAN BAŞLIYOR*/
/* --- PREMIUM ÜRÜN KARTLARI --- */

/* Grid Düzeni: Mobilde 1, Tablette 2, PC'de 3-4 yan yana */
#productsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

/* Kartın Kendisi */
.product-card {
    background: #1e293b; /* Koyu Gri Zemin */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Hover Efekti: Kart havaya kalkar */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--primary); /* Varsa tema rengin, yoksa #f59e0b yap */
}

/* Resim Alanı */
.card-image-box {
    width: 100%;
    height: 220px;
    background: #ffffff; /* Ürünler genelde beyaz fonludur, temiz durur */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    position: relative;
}

.card-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Resmi kesmeden sığdırır */
    transition: transform 0.5s ease;
}

.product-card:hover .card-image-box img {
    transform: scale(1.05); /* Resim hafif zoom yapar */
}

/* Yazı Alanı */
.card-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 10px;
    line-height: 1.4;
    
    /* 2 satırdan sonrasını ... koyarak kes (Uzun isimler tasarımı bozmasın) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fbbf24; /* Altın Sarısı Fiyat */
    margin-bottom: 15px;
}

/* WhatsApp Butonu */
.btn-whatsapp-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366; /* Orijinal WP Yeşili */
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-whatsapp-card:hover {
    background: #1ebc57;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
}

/* admin.html içindeki style tagine ekle */
.product-item {
    background: #1e293b;
    border: 1px solid #334155;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}
.product-item:hover { background: #334155; }
.product-item img {
    width: 60px; height: 60px; 
    border-radius: 8px; 
    background: white; 
    object-fit: contain; 
    padding: 2px;
}

/* --- TÜV ONAYLI ETİKET (MODERN & MOBİL UYUMLU) --- */
.featured-tuv-tag {
    text-align: center;
    margin: -35px 0 60px; /* Page Header ile içerik arası mesafe */
    position: relative;
    z-index: 100;
    padding: 0 15px;
}

.tuv-badge {
    background: linear-gradient(45deg, var(--primary), var(--accent));
    color: white;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1rem;
    animation: tuvPulse 2s infinite;
    cursor: default;
}

@keyframes tuvPulse {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
    50% { transform: scale(1.03); box-shadow: 0 15px 40px rgba(6, 182, 212, 0.7); }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
}

/* Telefon Uyumluluğu */
@media (max-width: 768px) {
    .featured-tuv-tag {
        margin: -25px 0 40px;
    }
    .tuv-badge {
        font-size: 0.8rem;
        padding: 10px 20px;
        letter-spacing: 0.5px;
    }
    .tuv-badge i {
        font-size: 1.1rem;
    }
}

/* --- TÜV ONAYLI ETİKET (MODERN & MOBİL UYUMLU) --- */
.featured-tuv-tag {
    text-align: center;
    margin: -35px 0 60px; /* Page Header ile içerik arası mesafe */
    position: relative;
    z-index: 100;
    padding: 0 15px;
}

.tuv-badge {
    background: linear-gradient(45deg, var(--primary), var(--accent));
    color: white;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1rem;
    animation: tuvPulse 2s infinite;
    cursor: default;
}

@keyframes tuvPulse {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
    50% { transform: scale(1.03); box-shadow: 0 15px 40px rgba(6, 182, 212, 0.7); }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
}

/* Telefon Uyumluluğu (Responsive) */
@media (max-width: 768px) {
    .featured-tuv-tag {
        margin: -25px 0 40px;
    }
    .tuv-badge {
        font-size: 0.8rem;
        padding: 10px 20px;
        letter-spacing: 0.5px;
    }
    .tuv-badge i {
        font-size: 1.1rem;
    }
}

/* --- TÜV ONAYLI ETİKET VE MOBİL UYUM --- */
.featured-tuv-tag {
    text-align: center;
    margin: -35px 0 60px; /* Header ile içerik arası mesafe */
    position: relative;
    z-index: 100;
    padding: 0 15px;
}

.tuv-badge {
    background: linear-gradient(45deg, var(--primary), var(--accent));
    color: white;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1rem;
    animation: tuvPulse 2s infinite;
    cursor: default;
}

@keyframes tuvPulse {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
    50% { transform: scale(1.03); box-shadow: 0 15px 40px rgba(6, 182, 212, 0.7); }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
}

@media (max-width: 768px) {
    .featured-tuv-tag { margin: -25px 0 40px; }
    .tuv-badge {
        font-size: 0.8rem;
        padding: 10px 20px;
        letter-spacing: 0.5px;
    }
    .tuv-badge i { font-size: 1.1rem; }
}
/* --- TÜV ONAYLI ETİKET VE MOBİL UYUM --- */
.featured-tuv-tag {
    text-align: center;
    margin: -35px 0 60px;
    position: relative;
    z-index: 100;
    padding: 0 15px;
}
.tuv-badge {
    background: linear-gradient(45deg, var(--primary), var(--accent));
    color: white;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1rem;
    animation: tuvPulse 2s infinite;
}
@keyframes tuvPulse {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
    50% { transform: scale(1.03); box-shadow: 0 15px 40px rgba(6, 182, 212, 0.7); }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5); }
}
@media (max-width: 768px) {
    .featured-tuv-tag { margin: -25px 0 40px; }
    .tuv-badge { font-size: 0.8rem; padding: 10px 20px; }
}

/* --- ÜRÜN FİLTRELEME BUTONLARI --- */
.filter-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap; /* Mobilde sığmazsa alt alta geçer */
    padding: 0 15px;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-gray);
    border: 1px solid var(--border);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.filter-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: white;
    border-color: var(--primary);
}

.filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 10px 20px -10px var(--primary);
}

/* Telefonlar İçin Küçük Ayar */
@media (max-width: 768px) {
    .filter-container {
        gap: 10px;
        justify-content: flex-start;
        overflow-x: auto; /* Yan yana kaydırılabilir yap */
        white-space: nowrap;
        padding-bottom: 10px;
    }
    .filter-btn {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
}
/* --- GALERİ PROJE ADI KATMANI (Yeni Eklenen Kısım) --- */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85); /* Koyu, şık bir arka plan */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Başlangıçta gizli */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Yumuşak geçiş */
    z-index: 5; /* İkonun ve resmin üstünde */
    backdrop-filter: blur(2px); /* Hafif bir bulanıklık efekti */
}

.project-title {
    color: var(--text-light);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    padding: 0 25px;
    transform: translateY(30px); /* Efekt için aşağıdan gelsin */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kartın üzerine gelindiğinde (Hover) */
.service-card:hover .project-overlay {
    opacity: 1; /* Görünür yap */
}

.service-card:hover .project-title {
    transform: translateY(0); /* Yerine oturt */
}

/* Mevcut icon-box'ı bu tasarımda gizliyoruz */
.service-card .icon-box {
    display: none; 
}

/* Yönetici girişi linkini biraz daha belirgin veya ayrı tutmak için */
/* Yönetici girişi bağlantısını diğer sekmelerle eşitler */
.admin-link {
    border-top: none !important; /* Üstteki çizgiyi kaldırır */
    margin-top: 0 !important;    /* Üst boşluğu sıfırlar */
    padding-top: 0 !important;   /* İç boşluğu sıfırlar */
    display: flex;
    align-items: center;
}

.admin-link a {
    color: var(--primary) !important; /* Vurgu için mavi kalabilir */
    font-weight: 600;
    font-size: 0.95rem !important; /* Diğer sekmelerle aynı boyuta getirir */
}

/* İkonun hizalamasını hassas ayarlar */
.admin-link i {
    margin-top: 1px;
}
/* Mobil Menü İçin Özel Yönetim Butonu */
.admin-access-area {
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-portal-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-portal-btn .icon-circle {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
}

.admin-portal-btn span {
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

/* Tıklama Hissi (Hareketlendirme) */
.admin-portal-btn:active {
    transform: scale(0.95);
    background: rgba(251, 191, 36, 0.2);
}