/* ============================================= */
/* HEADER ÜRÜN İNCELEME BUTONU - ÖZEL STİL     */
/* ============================================= */

.review-nav-item {
    margin-left: 8px;
    display: flex;
    align-items: center;
    list-style: none !important;
}

/* ★★★ BUTONA ÖZEL STİL - MENÜDEN ETKİLENMEZ ★★★ */
.header-review-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    background: #1d378a !important; /* ★ ANA RENK ★ */
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(29, 55, 138, 0.25) !important;
    transform: none !important;
}

/* ★★★ HOVER - MENÜDEN ETKİLENMEZ ★★★ */
.header-review-btn:hover {
    background: #3153c3 !important; /* ★ HOVER RENK ★ */
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(29, 55, 138, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ★★★ AKTİF / TIKLANINCA ★★★ */
.header-review-btn:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(29, 55, 138, 0.2) !important;
}

.header-review-btn i {
    font-size: 13px !important;
    color: #ffd700 !important;
}

/* ★★★ MENÜ STİLLERİNİ EZ - BUTONA ETKİ ETMESİN ★★★ */
.header-nav .nav-menu > li.review-nav-item > a {
    background: #1d378a !important;
    color: #ffffff !important;
    padding: 9px 20px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 8px rgba(29, 55, 138, 0.25) !important;
}

.header-nav .nav-menu > li.review-nav-item > a:hover {
    background: #3153c3 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(29, 55, 138, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================= */
/* RESPONSIVE - TABLET                          */
/* ============================================= */

@media (max-width: 992px) {
    .header-review-btn span {
        display: none !important;
    }
    
    .header-review-btn {
        padding: 8px 12px !important;
        gap: 0 !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        justify-content: center !important;
        background: #1d378a !important;
        box-shadow: 0 2px 8px rgba(29, 55, 138, 0.3) !important;
    }
    
    .header-review-btn:hover {
        background: #3153c3 !important;
        box-shadow: 0 4px 16px rgba(29, 55, 138, 0.4) !important;
    }
    
    .header-review-btn i {
        font-size: 15px !important;
        margin: 0 !important;
    }
    
    .header-nav .nav-menu > li.review-nav-item > a {
        padding: 8px 12px !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBİL                           */
/* ============================================= */

@media (max-width: 768px) {
    .header-review-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 6px 10px !important;
        background: #1d378a !important;
    }
    
    .header-review-btn:hover {
        background: #3153c3 !important;
    }
    
    .header-review-btn i {
        font-size: 13px !important;
    }
    
    .header-nav .nav-menu > li.review-nav-item > a {
        width: 32px !important;
        height: 32px !important;
        padding: 6px 10px !important;
    }
}

/* ============================================= */
/* ★★★ DARK MODE - GECE MODU ★★★              */
/* ============================================= */

body.dark-mode .header-review-btn,
body.dark-mode .header-nav .nav-menu > li.review-nav-item > a {
    background: #0d1f5a !important; /* Gece modu ana renk - daha koyu */
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 8px rgba(13, 31, 90, 0.4) !important;
}

body.dark-mode .header-review-btn:hover,
body.dark-mode .header-nav .nav-menu > li.review-nav-item > a:hover {
    background: #1d378a !important; /* Gece modu hover - gündüz ana renk */
    box-shadow: 0 6px 20px rgba(13, 31, 90, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .header-review-btn i {
    color: #ffd700 !important;
}

/* ============================================= */
/* MOBİL MENÜ - ZATEN VAR OLAN STİL            */
/* ============================================= */

.mobile-review-btn-wrapper {
    padding: 12px 20px;
    margin: 4px 0 8px 0;
}

.mobile-review-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(145deg, #1d378a, #2645a8);
    color: #ffffff !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 25px rgba(29, 55, 138, 0.4);
    transition: all 0.3s ease;
    width: 100%;
}

.mobile-review-btn:active {
    transform: scale(0.97);
}

.mobile-review-btn i:first-child {
    color: #ffd700;
    font-size: 18px;
}

.mobile-review-btn i:last-child {
    font-size: 14px;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.mobile-review-btn:active i:last-child {
    transform: translateX(4px);
}

/* ★★★ MOBİL MENÜ - GECE MODU ★★★ */
body.dark-mode .mobile-review-btn {
    background: linear-gradient(145deg, #0d1f5a, #1d378a);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 25px rgba(13, 31, 90, 0.5);
}

body.dark-mode .mobile-review-btn i:first-child {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.2));
}

/* =============================================
   1. MERKEZI RENK DEGISKENLERI
   ============================================= */
:root {
    --dm-bg-primary: #f8fafc;
    --dm-bg-card: #ffffff;
    --dm-bg-soft: #f1f5f9;
    --dm-text: #0f172a;
    --dm-text-muted: #64748b;
    --dm-border: #e5e7eb;
    --dm-accent: #1d4ed8;
    --dm-accent-hover: #1e3a8a;
}

body.dark-mode {
    --dm-bg-primary: #0a0f1e;
    --dm-bg-card: #111827;
    --dm-bg-soft: #1e293b;
    --dm-text: #e2e8f0;
    --dm-text-muted: #94a3b8;
    --dm-border: #334155;
    --dm-accent: #3b82f6;
    --dm-accent-hover: #60a5fa;
}

/* =============================================
   2. SAYFA ARKA PLANI (Beyaz alanı kapatır)
   ============================================= */
body.dark-mode,
body.dark-mode html,
body.dark-mode .site-main,
body.dark-mode main {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text) !important;
}

/* Container'ları şeffaf yap - arkadaki body rengi görünsün */
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .row,
body.dark-mode .grid,
body.dark-mode .wrapper,
body.dark-mode .page-wrapper {
    background-color: transparent !important;
}

/* =============================================
   3. KARTLAR (Ürün, haber, makale vb.)
   ============================================= */
body.dark-mode .card,
body.dark-mode [class*="card"],
body.dark-mode [class*="product-item"],
body.dark-mode [class*="product-card"],
body.dark-mode [class*="phone-card"],
body.dark-mode [class*="haber-item"],
body.dark-mode [class*="news-item"],
body.dark-mode [class*="article-item"],
body.dark-mode [class*="post-item"] {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* =============================================
   4. BAŞLIKLAR VE METİNLER
   ============================================= */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dm-text) !important;
}

body.dark-mode p,
body.dark-mode span:not(.badge):not(.dot),
body.dark-mode a:not(.btn):not(.header-review-btn):not(.mobile-review-btn) {
    color: var(--dm-text);
}

body.dark-mode small,
body.dark-mode .muted,
body.dark-mode .text-muted,
body.dark-mode [class*="meta"] {
    color: var(--dm-text-muted) !important;
}

/* =============================================
   5. FİYAT KUTULARI (En düşük fiyat vb.)
   ============================================= */
body.dark-mode [class*="en-dusuk"],
body.dark-mode [class*="en-ucuz"],
body.dark-mode [class*="price-box"],
body.dark-mode [class*="fiyat-box"],
body.dark-mode [class*="price-wrapper"] {
    background-color: var(--dm-bg-soft) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode [class*="price"]:not([class*="price-box"]):not([class*="wrapper"]),
body.dark-mode [class*="fiyat"]:not([class*="fiyat-box"]) {
    color: var(--dm-accent) !important;
}

/* =============================================
   6. SIDEBAR & FİLTRELER
   ============================================= */
body.dark-mode aside,
body.dark-mode [class*="sidebar"],
body.dark-mode [class*="filter"] {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.dark-mode aside a,
body.dark-mode [class*="sidebar"] a,
body.dark-mode [class*="filter"] a,
body.dark-mode [class*="filter"] label {
    color: var(--dm-text) !important;
}

/* =============================================
   7. FORM ELEMANLARI (Arama, sıralama vb.)
   ============================================= */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--dm-bg-soft) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    accent-color: var(--dm-accent);
}

/* =============================================
   8. BUTONLAR
   ============================================= */
body.dark-mode .btn-primary,
body.dark-mode [class*="fiyatlari-gor"],
body.dark-mode button[type="submit"] {
    background: linear-gradient(135deg, var(--dm-accent), var(--dm-accent-hover)) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
}

/* =============================================
   9. SIDEBAR SCROLLBAR (İnce + Lacivert)
   ============================================= */
body.dark-mode aside,
body.dark-mode [class*="sidebar"],
body.dark-mode [class*="filter"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(96,165,250,.4) transparent;
}

body.dark-mode aside::-webkit-scrollbar,
body.dark-mode [class*="sidebar"]::-webkit-scrollbar,
body.dark-mode [class*="filter"]::-webkit-scrollbar {
    width: 6px;
}
body.dark-mode aside::-webkit-scrollbar-track,
body.dark-mode [class*="sidebar"]::-webkit-scrollbar-track,
body.dark-mode [class*="filter"]::-webkit-scrollbar-track {
    background: transparent;
}
body.dark-mode aside::-webkit-scrollbar-thumb,
body.dark-mode [class*="sidebar"]::-webkit-scrollbar-thumb,
body.dark-mode [class*="filter"]::-webkit-scrollbar-thumb {
    background: rgba(96,165,250,.4);
    border-radius: 999px;
}
body.dark-mode aside::-webkit-scrollbar-thumb:hover,
body.dark-mode [class*="sidebar"]::-webkit-scrollbar-thumb:hover,
body.dark-mode [class*="filter"]::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}

/* =============================================
   10. YUMUŞAK GEÇİŞ
   ============================================= */
body.dark-mode,
body.dark-mode *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid) {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}