/* ===================================
   THEME STYLES (PREMIUM & SOFT DARK)
   =================================== */

/* --- 1. LIGHT THEME (Varsayılan) - KOYU YEŞİL-GRİ TONLAR --- */
:root {
    /* Dark mode ile AYNI KOYULUK ama farklı renk tonu (Yeşil-Gri) */
    --bg-primary: #15211e;       	/* Ana Arka Plan (Koyu Yeşil-Gri  %80) */
    --bg-secondary: #1f2e2acc;     /* Kartlar (Biraz Açık Yeşil-Gri  %80) */
    --bg-tertiary: #1f2e2acc;      /* Footer (En Koyu Yeşil-Gri) */
    
    --text-primary: #f8fafc;     	/* Ana Metin (Beyaz) */
    --text-secondary: #cbd5e1;   	/* İkincil Metin (Açık Gri) */
    --text-muted: #64748b;       	/* Silik Metin (Orta) */
    
    --primary: #00d4ff;          	/* Ana Renk */
    --primary-dark: #00a8cc;
    
    --border-color: rgba(255, 255, 255, 0.08);  /* Açık kenarlıklar */
    --shadow: rgba(0, 0, 0, 0.3);               /* Koyu gölgeler */
}

/* --- 2. DARK THEME (Yumuşatılmış Tatlı Ton) --- */
body.dark-theme {
    /* Zifiri siyah yerine "Slate" tonları (Göz yormayan tatlı koyuluk) */
    --bg-primary: #0f172a;       	/* Ana Arka Plan (Tatlı Lacivert-Siyah) */
    --bg-secondary: #1e293bcc;		/* Kartlar (Bir tık açık %80) */
    --bg-tertiary: #020617cc;      	/* Footer (En koyu %80) */
    
    --text-primary: #f8fafc;     	/* Beyaz metin */
    --text-secondary: #cbd5e1;   	/* Hafif gri metin */
    --text-muted: #64748b;       	/* Silik metin */
    
    --primary: #00d4ff;
    --primary-dark: #00a3cc;
    
    --border-color: rgba(255, 255, 255, 0.08); /* Çok ince çizgiler */
    --shadow: rgba(0, 0, 0, 0.3);
}

/* --- 3. GENEL AYARLAR & ARKA PLAN IŞIĞI (GLOW) --- */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    
    /* GLOBAL IŞIK EFEKTİ - Light Mode (Yeşil Tonlar) */
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(123, 192, 67, 0.15), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(67, 192, 150, 0.10), transparent 50%);
    background-attachment: fixed; /* Sayfayla birlikte kaymaz */
    background-size: cover;
}

/* Dark Mode'da Işıklar (Mavi Tonlar) */
body.dark-theme {
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.15), transparent 50%), /* Sol Üst Mavi */
        radial-gradient(circle at 100% 100%, rgba(123, 192, 67, 0.08), transparent 50%); /* Sağ Alt Yeşil */
}

/* --- 4. KARTLAR & KUTULAR --- */
.card,
.product-card-modern,
.stats-section,
.sms-onay-section,
.auth-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px var(--shadow);
}

/* Metin Renkleri */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
p, span, a { color: var(--text-secondary); }

/* Kenarlıklar */
.navbar, .footer, .mobile-menu, .dropdown-menu { border-color: var(--border-color); }

/* Butonlar */
.btn-primary, .action-btn, .search-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; /* Buton yazısı hep beyaz */
}

/* Hover Durumları */
.nav-link:hover, .dropdown-item:hover {
    background: rgba(0, 212, 255, 0.1);
}

/* ===================================
   HEADER & FOOTER PREMIUM FIXES
   =================================== */

/* HEADER (Buzlu Cam) */
.site-header-new, 
.header-top-new, 
.header-nav-new {
    /* Arka plan rengini al, %85 opak yap (Saydamlık) */
    background: color-mix(in srgb, var(--bg-secondary), transparent 15%) !important;
    
    /* Bulanıklık */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.3s ease;
}

/* Sticky Header (Daha Koyu) */
.site-header-new.sticky {
    background: color-mix(in srgb, var(--bg-secondary), white 5%) !important;
    box-shadow: 0 10px 30px var(--shadow);
}

body.dark-theme .site-header-new.sticky {
    background: color-mix(in srgb, var(--bg-secondary), white 5%) !important;
}

/* Arama Çubuğu */
.search-input {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
}
.search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15) !important;
}

/* FOOTER (Glow Efektli) */
.footer {
    background: var(--bg-tertiary) !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-color) !important;
}

/* Footer Işığı - Light Mode (Yeşil Tonlar) */
body:not(.dark-theme) .footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background: radial-gradient(circle at 50% 100%, rgba(123, 192, 67, 0.12), transparent 60%);
    pointer-events: none; z-index: 0;
}

/* Footer Işığı - Dark Mode (Mavi Tonlar) */
body.dark-theme .footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background: radial-gradient(circle at 50% 100%, rgba(0, 212, 255, 0.1), transparent 70%);
    pointer-events: none; z-index: 0;
}

/* Footer Linkleri */
.footer h5 { color: var(--text-primary) !important; }
.footer p { color: var(--text-muted) !important; }

.social-links a {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.social-links a:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    transform: translateY(-3px);
}

/* Smooth Transitions (Tüm geçişler yumuşak olsun) */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Performans için bazılarını hariç tut */
.swiper-slide, .swiper-wrapper, img { transition: none !important; }

/* ==================== HEADER Z-INDEX FIX (MENÜ ÖNCELİĞİ) ==================== */

/* 1.Ana Header Kapsayıcısı */
.site-header-new {
    position: relative !important;
    z-index: 1000 !important; /* Alt menüden ve sliderdan kesinlikle yüksek olmalı */
}

/* 2. Üst Bar (Profilin olduğu yer) - EN ÜSTTE OLACAK */
.header-top-new {
    position: relative !important;
    z-index: 2000 !important; /* Alt menüden kesinlikle yüksek olmalı */
}

/* 3. Alt Menü (Kategorilerin olduğu yer) - BİR TIK ALTTA */
.header-nav-new {
    position: relative !important;
    z-index: 1000 !important; /* Üst bardan düşük olmalı */
}