/**
 * Site geneli üst şerit — top-nav + header + category-menu
 * Tüm sayfalarda aynı; geç yüklenen sayfa CSS üzerine yazar.
 */

html body.dark-mode .top-nav,
html body.dark-mode > header,
html body.dark-mode .category-menu,
html body.light-mode .top-nav,
html body.light-mode > header,
html body.light-mode .category-menu,
html body .top-nav,
html body > header,
html body .category-menu {
    background-color: var(--header-strip-bg, #14151a) !important;
    background: var(--header-strip-bg, #14151a) !important;
}

html body.light-mode .top-nav,
html body.light-mode > header,
html body.light-mode .category-menu {
    background-color: var(--header-strip-bg, #ffffff) !important;
    background: var(--header-strip-bg, #ffffff) !important;
}

/* ─── Masaüstü (≥1025px) ─── */
@media (min-width: 1025px) {
    html body > header {
        position: relative !important;
    }

    /* Logo satırı: üst + alt tek çizgi (yalnızca site header, çekmeceler hariç) */
    html body > header::before,
    html body > header::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        margin-left: -50vw !important;
        width: 100vw !important;
        height: 0 !important;
        border: none !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 40 !important;
        box-sizing: content-box !important;
    }

    html body > header::before {
        top: var(--header-pad-y, 4px) !important;
        border-top: 1px solid var(--header-strip-border, #2d3139) !important;
    }

    html body > header::after {
        bottom: var(--header-pad-y, 4px) !important;
        border-bottom: 1px solid var(--header-strip-border, #2d3139) !important;
    }

    html body.light-mode > header::before {
        border-top-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
    }

    html body.light-mode > header::after {
        border-bottom-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
    }

    html body.dark-mode .top-nav,
    html body.light-mode .top-nav,
    html body.dark-mode > header,
    html body.light-mode > header,
    html body .top-nav,
    html body > header {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    html body header .header-container > .mobile-logo-cluster > .logo-container .site-logo-wrap {
        border-top: none !important;
        border-bottom: none !important;
    }

    /* Tek ayırıcı: kategori şeridinin altı (breadcrumb yoksa) */
    html body.dark-mode .category-menu,
    html body.light-mode .category-menu,
    html body .category-menu {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--header-strip-border, #404040) !important;
        box-shadow: none !important;
    }

    html body.light-mode .category-menu {
        border-bottom-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
    }

    html body:has(.breadcrumb).dark-mode .category-menu,
    html body:has(.breadcrumb).light-mode .category-menu,
    html body:has(.breadcrumb) .category-menu {
        border-bottom: none !important;
    }

    /* Çekmece başlıkları (<header>) site şerit çizgilerini almasın */
    html body .notification-drawer-root header::before,
    html body .notification-drawer-root header::after,
    html body .message-drawer-root header::before,
    html body .message-drawer-root header::after,
    html body #userMenuContainer .user-menu-topbar::before,
    html body #userMenuContainer .user-menu-topbar::after {
        content: none !important;
        display: none !important;
        border: none !important;
    }
}

/* ─── Mobil / tablet (≤1024px) ─── */
@media (max-width: 1024px) {
    html body > header::before,
    html body > header::after,
    html body .notification-drawer-root header::before,
    html body .notification-drawer-root header::after,
    html body .message-drawer-root header::before,
    html body .message-drawer-root header::after,
    html body #userMenuContainer .user-menu-topbar::before,
    html body #userMenuContainer .user-menu-topbar::after {
        content: none !important;
        display: none !important;
        border: none !important;
    }

    html body.dark-mode > header,
    html body.light-mode > header,
    html body > header {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    html body.dark-mode .top-nav,
    html body.light-mode .top-nav,
    html body .top-nav {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--header-strip-border, #404040) !important;
    }

    html body.light-mode .top-nav {
        border-bottom-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
    }

    html body.dark-mode .category-menu,
    html body.light-mode .category-menu,
    html body .category-menu {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--header-strip-border, #404040) !important;
        box-shadow: none !important;
    }

    html body.light-mode .category-menu {
        border-bottom-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
    }

    html body:has(.breadcrumb).dark-mode .category-menu,
    html body:has(.breadcrumb).light-mode .category-menu,
    html body:has(.breadcrumb) .category-menu {
        border-bottom: none !important;
    }
}

/* Alt menü yazıları — en son yükleme, kalınlık garantisi */
@media (max-width: 1024px) {
    html body #mobileBottomNav.mobile-bottom-nav .mobile-bottom-nav__label,
    html body #mobileBottomNav.mobile-bottom-nav .mobile-bottom-nav__item > span {
        display: block !important;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Semibold", "Segoe UI", Roboto, sans-serif !important;
        font-weight: 600 !important;
        font-size: 11.5px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
        -webkit-font-smoothing: auto !important;
        -moz-osx-font-smoothing: auto !important;
        text-rendering: geometricPrecision !important;
    }
}

/* ─── Beyaz mod — mobil / tablet / PC (sayfa beyaza yakın, üst şerit + footer beyaz) ─── */
html body.light-mode {
    --header-strip-bg: #ffffff;
    --site-page-bg: #f3f4f6;
    background-color: var(--site-page-bg) !important;
    background-image: none !important;
}

html body.light-mode .top-nav,
html body.light-mode > header,
html body.light-mode .category-menu,
html body.light-mode .breadcrumb {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

html body.light-mode .site-footer {
    --f-mobile-footer-bg: #ffffff;
    background-color: #ffffff !important;
    background: #ffffff !important;
}

html body.light-mode .site-footer .f-header,
html body.light-mode .site-footer .f-body,
html body.light-mode .site-footer .f-bottom,
html body.light-mode .site-footer .f-logo-section,
html body.light-mode .site-footer .f-sidebar,
html body.light-mode .site-footer .f-header-right,
html body.light-mode .site-footer .f-content,
html body.light-mode .site-footer .copyright-container,
html body.light-mode .site-footer .trust-container,
html body.light-mode .site-footer .legal-links,
html body.light-mode .site-footer .f-header-inner,
html body.light-mode .site-footer .f-body-inner,
html body.light-mode .site-footer .f-bottom-inner {
    background-color: #ffffff !important;
    background: #ffffff !important;
}