/* =========================================================
   KİMLİK KATMANI — siteyi farklı bir marka gibi gösterir
   Yalnızca görsel: renk paleti, yüzey tonları, tipografi
   hiyerarşisi, kart iç hizası ve buton dokusu.
   Yerleşim / içerik / işlev değişmez.
   Geri almak için includes/header.php içindeki kimlik.css
   satırını silmek yeterli.
   ========================================================= */

/* ---------------------------------------------------------
   1. Palet
   Neon camgöbeği yerine kurumsal çivit (indigo) vurgu,
   koyu modda nötr grafit yüzeyler.
   --------------------------------------------------------- */
html:root,
html[data-theme]:root {
    --primary-blue: #5b6cf9;
    --primary-blue-rgb: 91, 108, 249;
    --primary-text: #ffffff;
}
html[data-theme="dark"]:root {
    --bg-color: #0d0e12;
    --card-bg: #15171c;
    --border-color: #23262e;
    --text-color: #eceef3;
    --text-muted: #8b90a0;
    --header-bg: #0d0e12;
    --custom-header-bg: #0d0e12;
    --input-bg: #15171c;
}

/* Sayfa zemini: üstte çok hafif vurgu ışığı */
html[data-theme] body {
    background-color: var(--bg-color) !important;
    background-image:
        radial-gradient(1200px 420px at 50% -120px, rgba(var(--primary-blue-rgb), .10), transparent 70%) !important;
    background-repeat: no-repeat !important;
}

/* ---------------------------------------------------------
   2. Buton dokusu: birincil butonlarda ince üst ışık
   --------------------------------------------------------- */
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,
html[data-theme] body .kb-search .search-btn,
html[data-theme] body .auth-modal-submit,
html[data-theme] body .modern-checkout-btn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 88%, #fff), var(--primary-blue)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(var(--primary-blue-rgb), .25) !important;
    color: #fff !important;
    border: 0 !important;
}

/* ---------------------------------------------------------
   3. Duyuru şeridi: vurgu tonlu ince şerit
   --------------------------------------------------------- */
html[data-theme] body .top-announcement {
    background: rgba(var(--primary-blue-rgb), .10) !important;
    color: color-mix(in srgb, var(--primary-blue) 55%, var(--text-color)) !important;
    border-bottom: 1px solid rgba(var(--primary-blue-rgb), .18) !important;
}
html[data-theme] body .top-utility-bar { background: transparent !important; }

/* ---------------------------------------------------------
   4. Header: saydam, sayfa ışığıyla bütünleşik
   --------------------------------------------------------- */
@media (min-width: 992px) {
    html body .main-header {
        background: transparent !important;
        backdrop-filter: none !important;
    }
    html body .main-header .header-nav .nav-item-modern:hover .nav-text-modern,
    html body .main-header .header-nav .nav-item-wrap.is-open > .nav-item-modern .nav-text-modern {
        color: var(--text-color) !important;
    }
    html body .main-header .header-nav .nav-item-wrap.is-open > .nav-item-modern {
        background: rgba(var(--primary-blue-rgb), .10) !important;
    }
}

/* ---------------------------------------------------------
   5. Bölüm başlıkları: kartsız, büyük başlık + üst etiket
   --------------------------------------------------------- */
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: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--yt-line) !important;
    border-radius: 0 !important;
    padding: 0 0 16px !important;
    margin-bottom: 20px !important;
}
html[data-theme] body .showcase-section.showcase-section.showcase-section .showcase-title,
html[data-theme] body .sc2-title {
    font-size: 23px !important; font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
html[data-theme] body .sc2-ust {
    display: inline-block !important;
    padding: 3px 8px !important; margin-bottom: 6px !important;
    border-radius: 6px !important;
    background: rgba(var(--primary-blue-rgb), .12) !important;
    color: color-mix(in srgb, var(--primary-blue) 60%, var(--text-color)) !important;
    font-size: 10.5px !important; letter-spacing: .6px !important;
}
html[data-theme] body .showcase-section.showcase-section.showcase-section .showcase-title-icon,
html[data-theme] body .sc2-ikon {
    background: var(--card-bg) !important;
}

/* ---------------------------------------------------------
   6. Ürün kartları: sola hizalı bilgi, fiyat vurgulu
   --------------------------------------------------------- */
html[data-theme] body .product-card-modern,
html[data-theme] body .listing-product-card {
    background: var(--card-bg) !important;
    border-radius: 16px !important;
}
html[data-theme] body .product-card-modern:hover,
html[data-theme] body .listing-product-card:hover {
    background: var(--card-bg) !important;
    border-color: rgba(var(--primary-blue-rgb), .45) !important;
    transform: translateY(-2px) !important;
    transition: transform .2s ease, border-color .2s ease !important;
}
html[data-theme] body .product-card-modern .product-image-area,
html[data-theme] body .listing-product-card .listing-card-image-wrap {
    border-radius: 12px !important;
}
html[data-theme] body .product-card-modern .product-info-area,
html[data-theme] body .listing-product-card .listing-card-info {
    text-align: left !important;
    align-items: stretch !important;
}
html[data-theme] body .product-card-modern .product-name-small,
html[data-theme] body .listing-product-card .product-name-small {
    text-align: left !important;
    font-size: 13.5px !important;
    color: color-mix(in srgb, var(--text-color) 85%, transparent) !important;
}
html[data-theme] body .product-card-modern .product-info-row-v2,
html[data-theme] body .listing-product-card .product-info-row-v2 {
    justify-content: flex-start !important;
}
html[data-theme] body .product-card-modern .price-side-v2,
html[data-theme] body .listing-product-card .price-side-v2 {
    align-items: flex-start !important; text-align: left !important;
}
html[data-theme] body .product-card-modern .current-price-row-v2,
html[data-theme] body .listing-product-card .current-price-row-v2 {
    justify-content: flex-start !important;
}
html[data-theme] body .current-price-v2 {
    color: var(--text-color) !important;
    font-size: 19px !important; font-weight: 800 !important;
}
html[data-theme] body .discount-badge-v2 {
    background: rgba(16, 185, 129, .14) !important;
    color: #34d399 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}
html[data-theme] body .btn-buy-modern,
html[data-theme] body .listing-buy-btn {
    border-radius: 10px !important;
    height: 38px !important;
}
html[data-theme] body .btn-buy-modern:hover,
html[data-theme] body .listing-buy-btn:hover {
    background: var(--primary-blue) !important;
    color: #fff !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) {
    background: rgba(var(--primary-blue-rgb), .85) !important;
}

/* ---------------------------------------------------------
   7. Slider
   --------------------------------------------------------- */
html[data-theme] body .hero-card,
html[data-theme] body .side-banner-wrap { border-radius: 20px !important; }

/* ---------------------------------------------------------
   8. Ürün detay: fiyat vurgusu
   --------------------------------------------------------- */
html[data-theme] body .action-price-box,
html[data-theme] body .action-price-box * { color: var(--text-color) !important; }
html[data-theme] body .action-price-box i { color: var(--primary-blue) !important; }
html[data-theme] body .similar-item [class*=price] { color: var(--text-color) !important; }

/* ---------------------------------------------------------
   9. Footer: hafif yüzey
   --------------------------------------------------------- */
html[data-theme] body .main-footer { background: var(--card-bg) !important; }
html[data-theme] body .main-footer .footer-title { color: var(--text-color) !important; }

/* Header: dar masaustunde arama ikonlarin ustune binmesin */
@media (min-width: 992px) {
    html body .main-header .desktop-header .header-top { grid-template-columns: auto minmax(0, 1fr) auto !important; }
    html body .main-header .desktop-header .search-container.kb-search { max-width: 560px !important; justify-self: center !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    html body .main-header .desktop-header .header-top { gap: 16px !important; }
    html body .main-header .desktop-header .actions .btn { padding: 0 12px !important; }
}