/* =========================================================
   YENİ TEMA — soft / kurumsal / sade yüzey katmanı
   Yerleşim, içerik ve işlevler değişmez; yalnızca yazı tipi,
   yüzeyler, kenarlıklar, köşeler ve buton biçimleri.
   Renkler aktif temadan gelir (--primary-blue, --text-color ...).
   Geri almak için includes/header.php içindeki "yeni-tema" ve
   "Fustat" satırlarını silmek yeterli.
   ========================================================= */

:root {
    --yt-font: "Fustat", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Yüzeyler: metin renginden türetilir → açık/koyu temada kendiliğinden doğru */
    --yt-surface:   color-mix(in srgb, var(--text-color) 3.5%, var(--bg-color));
    --yt-surface-2: color-mix(in srgb, var(--text-color) 6%,   var(--bg-color));
    --yt-ghost:     color-mix(in srgb, var(--text-color) 4%,   transparent);
    --yt-ghost-h:   color-mix(in srgb, var(--text-color) 8%,   transparent);
    --yt-line:      color-mix(in srgb, var(--text-color) 9%,   transparent);
    --yt-line-2:    color-mix(in srgb, var(--text-color) 15%,  transparent);
    --yt-muted:     color-mix(in srgb, var(--text-color) 58%,  transparent);
    --yt-soft:      color-mix(in srgb, var(--text-color) 80%,  transparent);
    --yt-accent:    var(--primary-blue);
    --yt-accent-s:  rgba(var(--primary-blue-rgb), .12);
    --yt-on-accent: var(--primary-text, #fff);
    --yt-r-lg: 18px;
    --yt-r:    14px;
    --yt-r-sm: 12px;
    --yt-r-xs: 10px;
}

/* ---------------------------------------------------------
   1. Yazı tipi
   --------------------------------------------------------- */
html[data-theme] body,
html[data-theme] body button,
html[data-theme] body input,
html[data-theme] body select,
html[data-theme] body textarea {
    font-family: var(--yt-font) !important;
}
html[data-theme] body { letter-spacing: 0 !important; }
html[data-theme] body h1, html[data-theme] body h2, html[data-theme] body h3,
html[data-theme] body h4, html[data-theme] body h5 {
    letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------
   2. Ortak buton dili
   Hayalet (ikincil) = hafif zemin + ince çerçeve, Birincil = dolu tema rengi
   --------------------------------------------------------- */
html[data-theme] body .btn-login,
html[data-theme] body .mobile-action-btn.btn-login-mobile,
html[data-theme] body .mobile-action-btn.btn-account,
html[data-theme] body .sc2-all,
html[data-theme] body .showcase-section.showcase-section.showcase-section .view-all-link {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    color: var(--text-color) !important;
    border-radius: var(--yt-r-sm) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: background .15s ease, border-color .15s ease !important;
}
html[data-theme] body .btn-login:hover,
html[data-theme] body .sc2-all:hover,
html[data-theme] body .showcase-section.showcase-section.showcase-section .view-all-link:hover {
    background: var(--yt-ghost-h) !important;
    border-color: var(--yt-line-2) !important;
    text-decoration: none !important;
    filter: none !important;
}
html[data-theme] body .btn-register-desktop,
html[data-theme] body .mobile-action-btn.btn-register,
html[data-theme] body .mobile-action-btn.btn-balance,
html[data-theme] body .action-buy-btn {
    background: var(--yt-accent) !important;
    border: 1px solid transparent !important;
    color: var(--yt-on-accent) !important;
    border-radius: var(--yt-r-sm) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
html[data-theme] body .btn-register-desktop:hover,
html[data-theme] body .action-buy-btn:hover { filter: brightness(1.07) !important; }

/* ---------------------------------------------------------
   3. Üst çubuk + duyuru
   --------------------------------------------------------- */
html[data-theme] body .top-utility-bar {
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--yt-line) !important;
}
html[data-theme] body .top-announcement {
    background: var(--yt-surface) !important;
    color: var(--yt-soft) !important;
    border-bottom: 1px solid var(--yt-line) !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------
   4. Header (masaüstü)
   --------------------------------------------------------- */
@media (min-width: 992px) {
    html body .main-header {
        background: var(--bg-color) !important;
        border-bottom: 1px solid var(--yt-line) !important;
    }
    html body .main-header .desktop-header .header-top { min-height: 78px !important; }

    /* Arama */
    html body .main-header .desktop-header .search-container.kb-search {
        height: 48px !important;
        background: var(--yt-ghost) !important;
        border: 1px solid var(--yt-line) !important;
        border-radius: var(--yt-r) !important;
        padding: 5px 5px 5px 44px !important;
    }
    html body .main-header .desktop-header .search-container.kb-search:focus-within {
        border-color: rgba(var(--primary-blue-rgb), .5) !important;
        box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), .10) !important;
    }
    html body .main-header .desktop-header .kb-search .search-btn {
        border-radius: var(--yt-r-xs) !important;
        padding: 0 18px !important; font-weight: 700 !important;
    }

    /* Sağ aksiyonlar: eşit, yuvarlak köşeli hayalet kareler */
    html body .main-header .desktop-header .actions { gap: 8px !important; }
    html body .main-header .desktop-header .actions .icon-btn,
    html body .main-header .desktop-header .actions > .lang-switcher .lang-trigger {
        width: 44px !important; height: 44px !important;
        background: var(--yt-ghost) !important;
        border: 1px solid var(--yt-line) !important;
        border-radius: var(--yt-r-sm) !important;
        color: var(--yt-soft) !important;
    }
    html body .main-header .desktop-header .actions > .lang-switcher .lang-trigger { width: auto !important; padding: 0 12px !important; }
    html body .main-header .desktop-header .actions .icon-btn:hover,
    html body .main-header .desktop-header .actions > .lang-switcher .lang-trigger:hover {
        background: var(--yt-ghost-h) !important; color: var(--text-color) !important;
    }
    html body .main-header .desktop-header .actions .btn {
        height: 44px !important; padding: 0 18px !important; margin-left: 0 !important;
        font-size: 13.5px !important;
    }
    html body .main-header .desktop-header .actions .btn-login { padding: 0 16px 0 8px !important; }
    html body .main-header .desktop-header .kb-cart { margin-left: 0 !important; }
    html body .main-header .desktop-header .kb-cart .cart-badge { border-color: var(--bg-color) !important; }

    /* Menü satırı */
    html body .main-header .header-nav { border-top: 1px solid var(--yt-line) !important; }
    html body .main-header .header-nav .nav-links { height: 58px !important; gap: 4px !important; }
    html body .main-header .header-nav .btn-categories,
    html body .main-header .header-nav .nav-item-modern {
        height: 40px !important; border-radius: var(--yt-r-sm) !important;
    }
    html body .main-header .header-nav .btn-categories {
        background: var(--yt-accent-s) !important;
        border: 1px solid rgba(var(--primary-blue-rgb), .22) !important;
    }
    html body .main-header .header-nav .btn-categories::after { display: none !important; }
    html body .main-header .header-nav .btn-categories svg { border-radius: 7px !important; }
    html body .main-header .header-nav .nav-item-modern:hover,
    html body .main-header .header-nav .nav-item-wrap.is-open > .nav-item-modern {
        background: var(--yt-ghost) !important;
    }
    html body .main-header .header-nav .nav-icon-modern {
        background: var(--yt-ghost) !important; border-radius: 8px !important;
    }
    html body .main-header .header-nav .btn-categories,
    html body .main-header .header-nav .nav-text-modern {
        font-size: 14px !important; font-weight: 600 !important;
    }
    html body .main-header .header-nav .nav-extra-item {
        background: var(--yt-ghost) !important;
        border: 1px solid var(--yt-line) !important;
    }

    /* Açılır kategori menüsü */
    html body .nav-dd-panel.kb-dd {
        background: var(--yt-surface) !important;
        border: 1px solid var(--yt-line) !important;
        border-radius: var(--yt-r) !important;
        box-shadow: 0 20px 48px rgba(0,0,0,.28) !important;
    }
    html body .kb-dd .kb-dd-head { background: var(--yt-ghost) !important; border-radius: var(--yt-r-sm) !important; }
}

/* ---------------------------------------------------------
   5. Header (mobil)
   --------------------------------------------------------- */
@media (max-width: 991px) {
    html[data-theme] body .main-header,
    html[data-theme] body .mobile-header {
        background: var(--bg-color) !important;
        border-bottom: 1px solid var(--yt-line) !important;
    }
    html[data-theme] body .mobile-noti-btn,
    html[data-theme] body .mobile-cart-btn,
    html[data-theme] body .mobile-menu-btn,
    html[data-theme] body .mobile-header .right-icons .lang-trigger {
        background: var(--yt-ghost) !important;
        border: 1px solid var(--yt-line) !important;
        border-radius: var(--yt-r-sm) !important;
        width: 42px !important; height: 42px !important;
    }
    html[data-theme] body .mobile-header .right-icons .lang-trigger { width: auto !important; }
    html[data-theme] body .mobile-action-btn {
        height: 44px !important; border-radius: var(--yt-r-sm) !important;
        font-weight: 600 !important;
    }
    html[data-theme] body .mobile-bottom-nav {
        background: var(--bg-color) !important;
        border-top: 1px solid var(--yt-line) !important;
    }
}

/* ---------------------------------------------------------
   6. Slider
   --------------------------------------------------------- */
html[data-theme] body .hero-card,
html[data-theme] body .side-banner-wrap {
    border-radius: var(--yt-r-lg) !important;
    border: 1px solid var(--yt-line) !important;
}

/* ---------------------------------------------------------
   7. Bölüm başlıkları — hafif yüzey kartı + küçük tema rengi nokta
   --------------------------------------------------------- */
html[data-theme] body .sc2-card,
html[data-theme] body .showcase-section.showcase-section.showcase-section .showcase-header,
html[data-theme] body .showcase-section.showcase-section .showcase-header.sc2-skin.sc2-skin {
    background: var(--yt-surface) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r) !important;
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
}
html[data-theme] body .showcase-section.showcase-section.showcase-section .showcase-title,
html[data-theme] body .sc2-title {
    font-size: 19px !important; font-weight: 700 !important;
}
html[data-theme] body .showcase-section.showcase-section.showcase-section .showcase-title-icon,
html[data-theme] body .sc2-ikon {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r-sm) !important;
}
html[data-theme] body .sc2-ust { color: var(--yt-accent) !important; }
html[data-theme] body .sc2-desc { color: var(--yt-muted) !important; }
html[data-theme] body .showcase-section.showcase-section.showcase-section .view-all-link,
html[data-theme] body .sc2-all {
    height: 38px !important; padding: 0 14px !important; font-size: 13px !important;
}
html[data-theme] body .showcase-section.showcase-section.showcase-section .view-all-link i,
html[data-theme] body .sc2-all i { color: var(--yt-accent) !important; }

/* Sekmeler: hayalet hap, seçili olan tema tonlu */
html[data-theme] body .sc2-tab {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r-sm) !important;
    box-shadow: none !important;
    padding: 6px 12px 6px 6px !important;
}
html[data-theme] body .sc2-tab:hover { background: var(--yt-ghost-h) !important; box-shadow: none !important; }
html[data-theme] body .sc2-tab.active {
    background: var(--yt-accent-s) !important;
    border-color: rgba(var(--primary-blue-rgb), .35) !important;
    box-shadow: none !important;
}
html[data-theme] body .sc2-tab-ikon { border-radius: 8px !important; }

/* ---------------------------------------------------------
   8. Ürün kartları — iç boşluklu görsel, yumuşak yüzey
   --------------------------------------------------------- */
html[data-theme] body .product-card-modern,
html[data-theme] body .listing-product-card {
    background: var(--yt-surface) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease !important;
}
html[data-theme] body .product-card-modern:hover,
html[data-theme] body .listing-product-card:hover {
    background: var(--yt-surface-2) !important;
    border-color: var(--yt-line-2) !important;
}
html[data-theme] body .product-card-modern .product-image-area,
html[data-theme] body .listing-product-card [class*=image-area],
html[data-theme] body .listing-product-card [class*=img-area],
html[data-theme] body .listing-product-card .listing-card-image-wrap {
    margin: 6px 6px 0 !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
    border-radius: var(--yt-r-xs) !important;
    overflow: hidden !important;
}
html[data-theme] body .product-card-modern .product-badge:has(.badge-sade),
html[data-theme] body .listing-product-card .product-badge:has(.badge-sade) {
    top: 12px !important; left: 12px !important;
    background: rgba(0,0,0,.55) !important; border-radius: 8px !important;
    backdrop-filter: blur(4px);
}
html[data-theme] body .product-name-small { font-weight: 600 !important; }
html[data-theme] body .btn-buy-modern,
html[data-theme] body .listing-buy-btn {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    color: var(--text-color) !important;
    border-radius: var(--yt-r-xs) !important;
    font-weight: 600 !important;
}
html[data-theme] body .btn-buy-modern:hover,
html[data-theme] body .listing-buy-btn:hover {
    background: var(--yt-accent) !important;
    border-color: transparent !important;
    color: var(--yt-on-accent) !important;
}
html[data-theme] body [data-stok-yok],
html[data-theme] body [data-stok-yok]:hover {
    background: transparent !important;
    border: 1px dashed var(--yt-line-2) !important;
    color: var(--yt-muted) !important;
}

/* ---------------------------------------------------------
   9. Alt kategori sayfası
   --------------------------------------------------------- */
html[data-theme] body .cat-hero {
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--yt-line) !important;
}
html[data-theme] body .cat-serit-item {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r-sm) !important;
}
html[data-theme] body .cat-serit-item.is-active {
    background: var(--yt-accent-s) !important;
    border-color: rgba(var(--primary-blue-rgb), .35) !important;
}

/* ---------------------------------------------------------
   10. Ürün detay sayfası (yerleşim aynı, yalnız yüzey)
   --------------------------------------------------------- */
html[data-theme] body .product-main-view,
html[data-theme] body .product-detail-tabs,
html[data-theme] body .product-sidebar .sidebar-box {
    background: var(--yt-surface) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r-lg) !important;
}
html[data-theme] body .view-img-box img { border-radius: var(--yt-r) !important; }
html[data-theme] body .m-service-item,
html[data-theme] body .horizontal-action-bar {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r) !important;
}
html[data-theme] body .feedback-field {
    background: var(--yt-ghost) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r-sm) !important;
    color: var(--text-color) !important;
}
html[data-theme] body .action-qty-selector {
    background: transparent !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: var(--yt-r-sm) !important;
}
html[data-theme] body .tab-btn.active { box-shadow: inset 0 -2px 0 var(--yt-accent) !important; }
html[data-theme] body .tabs-header { border-bottom: 1px solid var(--yt-line) !important; }
html[data-theme] body .similar-item { border-radius: var(--yt-r-sm) !important; }

/* ---------------------------------------------------------
   11. Formlar ve modallar
   --------------------------------------------------------- */
html[data-theme] body input[type=text],
html[data-theme] body input[type=email],
html[data-theme] body input[type=password],
html[data-theme] body input[type=tel],
html[data-theme] body input[type=number],
html[data-theme] body select,
html[data-theme] body textarea { border-radius: var(--yt-r-sm); }
html[data-theme] body .auth-modal-container,
html[data-theme] body .p-modal-content,
html[data-theme] body .cart-drawer {
    border-radius: var(--yt-r-lg) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.35) !important;
}
html[data-theme] body .auth-modal-submit,
html[data-theme] body .modern-checkout-btn,
html[data-theme] body .p-btn { border-radius: var(--yt-r-sm) !important; box-shadow: none !important; }

/* ---------------------------------------------------------
   12. Footer
   --------------------------------------------------------- */
html[data-theme] body .main-footer {
    background: var(--bg-color) !important;
    border-top: 1px solid var(--yt-line) !important;
}
html[data-theme] body .main-footer .footer-social-minimal a {
    border-radius: var(--yt-r-sm) !important;
    background: var(--yt-ghost) !important; border: 1px solid var(--yt-line) !important;
}
html[data-theme] body .main-footer .footer-copyright { border-top-color: var(--yt-line) !important; }

/* Destek butonu: sade hap */
html[data-theme] body .support-fab { border-radius: 999px !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; }