/* =============================================================================
   STORLANT — TEMA
   =============================================================================
   Gündüz (varsayılan) ve gece temalarının tek kaynağı.

   NASIL ÇALIŞIYOR
   ---------------
   Site stilleri (main.css, bootstrap, select2) renkleri artık sabit hex olarak
   değil `var(--sx-*)` olarak yazıyor. Bu dosya o değişkenlere iki farklı değer
   kümesi veriyor; tema değişimi tek bir `data-tema` özniteliğiyle oluyor.

   Neden böyle: 2459 sabit rengi "üstüne bindirme" yöntemiyle karartmak
   denenseydi mutlaka bir kısmı kaçardı ve karanlık temada her kaçan renk beyaz
   bir kutu olarak patlardı. Renkler kaynağından değiştirildiği için kaçak yok.

   OKUNABİLİRLİK
   -------------
   Paletteki her yazı/zemin çifti WCAG 2.1 eşiğine göre ÖLÇÜLDÜ (normal yazı
   4.5:1, iri yazı ve arayüz sınırları 3:1). Ölçüm palet dosyasında yaşıyor ve
   35 çiftin tamamı geçiyor.

   İki ayrıntı bu yüzden var:
     * `--sx-*-dolgu`: üzerinde her zaman BEYAZ yazı duran dolu yüzeyler. Metin
       tokenları gecede açılıyor; açık yeşil zeminde beyaz yazı okunmazdı.
     * `--sx-vurgu-uzeri`: altın zeminin üstündeki yazı. Gecede altın açık
       olduğu için SİYAH, gündüzde bronz koyu olduğu için BEYAZ.
   ============================================================================= */

/* =============================================================================
   1) TOKENLAR
   ============================================================================= */

/* Gündüz varsayılan: `:root` doğrudan gündüz değerlerini taşıyor. Böylece
   `data-tema` henüz yazılmamışken (JS kapalıysa) da site gündüz görünür.

   Sıra önemli: `:root` ile `[data-tema="..."]` aynı özgüllükte (0,1,0), yani
   eşitlikte SONRA gelen kazanır. Gece bloğu bu yüzden aşağıda. */
:root,
[data-tema="gunduz"] {
    color-scheme: light;

    /* @palet-gunduz-baslangic */
    --sx-zemin: #FAF8F4;
    --sx-yuzey: #FFFFFF;
    --sx-yuzey2: #F5F2EC;
    --sx-yuzey3: #EDE8DF;
    --sx-kenar: #E4DED2;
    --sx-kenar-guclu: #CFC6B5;
    --sx-kenar-oge: #8F887A;
    --sx-yazi: #16151A;
    --sx-yazi-soluk: #615B52;
    --sx-yazi-silik: #7D766C;
    --sx-vurgu: #8A6A15;
    --sx-vurgu-hover: #6B520E;
    --sx-vurgu-parlak: #C9A227;
    --sx-vurgu-koyu: #513D08;
    --sx-vurgu-uzeri: #FFFFFF;
    --sx-vurgu-zayif: #FBF3DF;
    --sx-basari: #147637;
    --sx-basari-zemin: #EAF7EF;
    --sx-uyari: #8A5A08;
    --sx-uyari-zemin: #FDF4E3;
    --sx-hata: #B3261E;
    --sx-hata-zemin: #FDEDEC;
    --sx-bilgi: #1D4ED8;
    --sx-bilgi-zemin: #EDF2FE;
    --sx-fiyat: #0F7A3D;
    --sx-eski-fiyat: #6E675D;
    --sx-basari-dolgu: #15803D;
    --sx-hata-dolgu: #B3261E;
    --sx-bilgi-dolgu: #2158E0;
    --sx-uyari-dolgu: #8A5A08;
    /* @palet-gunduz-bitis */

    --sx-golge-s: 0 1px 2px rgba(22,21,26,.06);
    --sx-golge-o: 0 10px 28px -12px rgba(22,21,26,.16);
    --sx-golge-b: 0 26px 60px -22px rgba(22,21,26,.22);
    --sx-altin-parilti: 0 0 0 1px rgba(138,106,21,.22), 0 12px 34px -16px rgba(138,106,21,.28);
    --sx-cizgi-altin: linear-gradient(90deg, transparent, rgba(138,106,21,.40) 22%, rgba(138,106,21,.70) 50%, rgba(138,106,21,.40) 78%, transparent);
    --sx-perde: rgba(28,24,16,.48);
}

[data-tema="gece"] {
    color-scheme: dark;

    /* @palet-gece-baslangic */
    --sx-zemin: #0B0B0D;
    --sx-yuzey: #141418;
    --sx-yuzey2: #1C1C22;
    --sx-yuzey3: #26262E;
    --sx-kenar: #2E2E37;
    --sx-kenar-guclu: #43434F;
    --sx-kenar-oge: #6C6C7A;
    --sx-yazi: #F3F0EA;
    --sx-yazi-soluk: #A7A29A;
    --sx-yazi-silik: #7C7871;
    --sx-vurgu: #D4AF37;
    --sx-vurgu-hover: #E8C55A;
    --sx-vurgu-parlak: #F0D67E;
    --sx-vurgu-koyu: #A98A22;
    --sx-vurgu-uzeri: #0B0B0D;
    --sx-vurgu-zayif: #241E0C;
    --sx-basari: #5BD98A;
    --sx-basari-zemin: #0E2418;
    --sx-uyari: #F0B453;
    --sx-uyari-zemin: #2A1E08;
    --sx-hata: #FF7A7A;
    --sx-hata-zemin: #2A1113;
    --sx-bilgi: #7FB6FF;
    --sx-bilgi-zemin: #0E1A2C;
    --sx-fiyat: #6FE39B;
    --sx-eski-fiyat: #8A857D;
    --sx-basari-dolgu: #15803D;
    --sx-hata-dolgu: #B3261E;
    --sx-bilgi-dolgu: #2158E0;
    --sx-uyari-dolgu: #8A5A08;
    /* @palet-gece-bitis */

    /* Gölge: gecede siyah gölge görünmez, bu yüzden derinlik gölgeyle değil
       yüzey farkı ve ince altın çizgiyle veriliyor. */
    --sx-golge-s: 0 1px 2px rgba(0,0,0,.5);
    --sx-golge-o: 0 8px 24px -10px rgba(0,0,0,.7);
    --sx-golge-b: 0 24px 60px -20px rgba(0,0,0,.85);
    --sx-altin-parilti: 0 0 0 1px rgba(212,175,55,.28), 0 10px 34px -14px rgba(212,175,55,.30);
    --sx-cizgi-altin: linear-gradient(90deg, transparent, rgba(212,175,55,.55) 22%, rgba(212,175,55,.85) 50%, rgba(212,175,55,.55) 78%, transparent);
    --sx-perde: rgba(6,6,8,.72);
}

/* Ölçü ve biçim tokenları — temadan bağımsız. */
:root {
    --sx-r-s: 10px;
    --sx-r-o: 14px;
    --sx-r-b: 20px;
    --sx-gecis: .18s cubic-bezier(.2,.8,.3,1);
    --sx-baslik-yazi: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
}

/* -----------------------------------------------------------------------------
   Eski token adlarıyla uyum
   main.css içinde `var(--clr-*)` kullanan 22 yer var; bunlar da temayı takip
   etsin diye kendi tokenlarımıza bağlanıyor.
   -------------------------------------------------------------------------- */
:root {
    --clr-primary: var(--sx-vurgu);
    --clr-primary-hover: var(--sx-vurgu-hover);
    --clr-secondary: var(--sx-vurgu-koyu);
    --clr-price: var(--sx-fiyat);
    --clr-text: var(--sx-yazi);
    --clr-muted: var(--sx-yazi-soluk);
    --clr-surface: var(--sx-yuzey);
    --clr-border: var(--sx-kenar);
    --clr-border-soft: var(--sx-kenar);
    --clr-bg: var(--sx-zemin);
    --clr-primary-light: var(--sx-vurgu-zayif);
    --shadow-sm: var(--sx-golge-s);
    --shadow-md: var(--sx-golge-o);

    /* -------------------------------------------------------------------------
       Kampanya bileşeninin (`gk-`) renk değişkenleri
       -------------------------------------------------------------------------
       Bunlar CSS DEĞİŞKEN TANIMI olduğu için renk dönüştürücüsü tarafından
       çevrilmedi: `--gk-navy: #1D4ED8` bildiriminde özellik adı `color` ya da
       `background` değil, dolayısıyla bir rolü yok.

       Sonuç ölçümle çıktı: `.gk-vitrin-cta` yazı rengini `--sx-vurgu-uzeri`
       olarak alıyordu (altın üstü koyu yazı) ama zeminini hâlâ sabit maviden
       çekiyordu — koyu yazı / mavi zemin 2.93:1, yani eşiğin altında.

       Beşi de altına bağlandı. Bileşen zaten dört ayrı vurgu rengi arasında
       gidip geliyordu; tek renk hem kontrastı çözüyor hem de sitenin tek vurgu
       rengi olan altını tutarlı kılıyor. */
    --gk-amber: var(--sx-vurgu);
    --gk-slate: var(--sx-vurgu);
    --gk-navy: var(--sx-vurgu);
    --gk-bronze: var(--sx-vurgu);
    --gk-forest: var(--sx-vurgu);
}

/* Kampanya şeridindeki iki soluk yazı. Zemin iki temada da sabit koyu lacivert
   olduğu için renk değil OPAKLIK sorunuydu: ayraç 2.04:1, etiket 3.83:1
   ölçüldü. Değerler eşiği geçecek en düşük noktaya çekildi — daha yükseği
   dekoratif ayracı gereğinden baskın yapardı. */
.gk-cd-sep { color: rgba(255, 255, 255, .58) !important; }
.gk-vitrin-right-lbl { color: rgba(255, 255, 255, .66) !important; }

/* =============================================================================
   2) TEMEL
   ============================================================================= */

html { background: var(--sx-zemin); }

body {
    background: var(--sx-zemin);
    color: var(--sx-yazi);
    -webkit-font-smoothing: antialiased;
}

/* Tema değişiminde renkler yumuşak geçsin — ama SAYFA AÇILIŞINDA değil.
   `.sx-gecis-acik` sınıfını JS, geçişi başlatmadan hemen önce ekliyor;
   yoksa ilk boyamada her öğe animasyona girer ve açılış yavaş görünürdü. */
.sx-gecis-acik,
.sx-gecis-acik *,
.sx-gecis-acik *::before,
.sx-gecis-acik *::after {
    transition: background-color .28s ease, border-color .28s ease, color .28s ease, fill .28s ease !important;
}

::selection { background: var(--sx-vurgu); color: var(--sx-vurgu-uzeri); }

/* Odak halkası: klavyeyle gezenler için tek ve tutarlı. Altın, iki temada da
   3:1 üstünde ölçüldü. */
:focus-visible {
    outline: 2px solid var(--sx-vurgu);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Kaydırma çubuğu da temayı takip etsin; açık bir çubuk gece temasında
   sayfanın kenarında parlayan beyaz bir şerit olarak duruyordu. */
* { scrollbar-color: var(--sx-kenar-guclu) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--sx-kenar-guclu);
    border: 3px solid var(--sx-zemin);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sx-kenar-oge); }

a { color: inherit; }
a:hover { color: var(--sx-vurgu); }

hr { border-color: var(--sx-kenar); }

/* Görseller gece temasında "yanmasın": tül perde fotoğrafları çoğunlukla
   beyaz zeminli çekim. Hafif bir kısma, siyah sayfada gözü yormasını önlüyor
   ve ürünün rengini bozmayacak kadar az. */
[data-tema="gece"] .product-img img,
[data-tema="gece"] .product-image img,
[data-tema="gece"] .nh-logo-wrap img,
[data-tema="gece"] .nh-mobile-logo img {
    filter: brightness(.94) saturate(1.02);
}

/* LOGO — gece
   Logo dosyası JPEG: saydamlığı YOK, beyaz zemin üstünde siyah bir kelime
   işareti. Siyah başlıkta olduğu gibi bırakılınca ortada duran beyaz bir kutu
   olarak görünüyordu.

   `invert(1)` zemini siyaha, yazıyı beyaza çeviriyor; `mix-blend-mode: screen`
   de siyah olan her yeri sayfanın zeminine karıştırıp kutuyu tamamen yok
   ediyor. Geriye yalnız beyaz kelime işareti kalıyor — dosyayı değiştirmeden.
   Gündüz temasında logo olduğu gibi doğru zaten; filtre uygulanmıyor. */
[data-tema="gece"] .nh-logo-wrap img,
[data-tema="gece"] .nh-mobile-logo img,
[data-tema="gece"] .footer-logo img,
[data-tema="gece"] img.logo-1,
[data-tema="gece"] img.logo-11 {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* @altin-uzeri-baslangic */

/* =============================================================================
   ALTIN ZEMİN ÜSTÜNDEKİ YAZI  — ÜRETİLMİŞ BÖLÜM
   =============================================================================
   Bu bölüm elle yazılmadı; tokenleştirilmiş CSS taranarak zemini altın olan
   tüm seçiciler toplandı. Sebep: CSS'te zemin ile yazı çoğu zaman AYRI
   kurallarda duruyor —
       .rozet            { color:#fff }
       .rozet--avantajli { background:#f59e0b }
   — ve beyaz yazı bu yüzden çevrilemiyordu. Gece temasında altın zeminde
   beyaz yazının kontrastı 2.3:1, yani okunmuyor. Siyah yazıyla 9.35:1.

   Liste elle yazılsaydı mutlaka eksik kalırdı; 72 seçici bulundu.

   Her seçici KENDİ kuralı olarak yazılıyor, hepsi tek bir gruplanmış
   seçici olarak değil. Sebep: seçiciler küçültülmüş CSS'ten toplanıyor ve
   aralarında tarayıcının geçersiz sayacağı bir tane bile bulunursa, CSS
   kuralı gruplanmışsa TAMAMI düşer. Nitekim düştü de: panelin kaydet
   düğmeleri altın zeminde beyaz yazıyla (2.10:1) çizilmeye devam ediyordu.
   Ayrı kurallarda bozuk olan yalnız kendini düşürür.
   ============================================================================= */
#alan1-buton { color: var(--sx-vurgu-uzeri) !important; }
#scroll-progress { color: var(--sx-vurgu-uzeri) !important; }
#story_watch { color: var(--sx-vurgu-uzeri) !important; }
.banner-big .btn:hover { color: var(--sx-vurgu-uzeri) !important; }
.bg-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-brand { color: var(--sx-vurgu-uzeri) !important; }
.btn-brand:hover { color: var(--sx-vurgu-uzeri) !important; }
.btn-check:active+.btn-outline-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-check:active+.btn-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-check:checked+.btn-outline-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-check:checked+.btn-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-check:focus+.btn-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-outline-warning.active { color: var(--sx-vurgu-uzeri) !important; }
.btn-outline-warning.dropdown-toggle.show { color: var(--sx-vurgu-uzeri) !important; }
.btn-outline-warning:active { color: var(--sx-vurgu-uzeri) !important; }
.btn-outline-warning:hover { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning.active { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning.disabled { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning:active { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning:disabled { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning:focus { color: var(--sx-vurgu-uzeri) !important; }
.btn-warning:hover { color: var(--sx-vurgu-uzeri) !important; }
.btn:hover { color: var(--sx-vurgu-uzeri) !important; }
.button:hover { color: var(--sx-vurgu-uzeri) !important; }
.cart-dropdown-wrap .shopping-cart-footer .shopping-cart-button a:hover { color: var(--sx-vurgu-uzeri) !important; }
.comments-area--premium .comments-area__sidebar .progress-bar { color: var(--sx-vurgu-uzeri) !important; }
.ct-social__btn:hover { color: var(--sx-vurgu-uzeri) !important; }
.fav-empty__search button:hover { color: var(--sx-vurgu-uzeri) !important; }
.gk-pill--good { color: var(--sx-vurgu-uzeri) !important; }
.header-action-2 .header-action-icon-2 > a span.pro-count.blue { color: var(--sx-vurgu-uzeri) !important; }
.header-style-1 .search-style-2 form button:hover { color: var(--sx-vurgu-uzeri) !important; }
.header-style-1.header-style-5 .header-bottom-bg-color { color: var(--sx-vurgu-uzeri) !important; }
.header-style-1.header-style-5 .header-bottom-bg-color .main-categori-wrap > a { color: var(--sx-vurgu-uzeri) !important; }
.indirim-bar { color: var(--sx-vurgu-uzeri) !important; }
.indirim-kademesi.aktif .ust { color: var(--sx-vurgu-uzeri) !important; }
.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-discount { color: var(--sx-vurgu-uzeri) !important; }
.ozelbg1 { color: var(--sx-vurgu-uzeri) !important; }
.pf3-progress-box__bar span { color: var(--sx-vurgu-uzeri) !important; }
.product-cart-wrap .product-badges span.best { color: var(--sx-vurgu-uzeri) !important; }
.product-cart-wrap .product-card-bottom .add-cart .add:hover { color: var(--sx-vurgu-uzeri) !important; }
.product-color-orange { color: var(--sx-vurgu-uzeri) !important; }
.product-color-yellow { color: var(--sx-vurgu-uzeri) !important; }
.sc-coupon-btn:hover { color: var(--sx-vurgu-uzeri) !important; }
.sc-form__btn:hover { color: var(--sx-vurgu-uzeri) !important; }
.sc-kargo-bar__fill { color: var(--sx-vurgu-uzeri) !important; }
.search-style-2 form button { color: var(--sx-vurgu-uzeri) !important; }
.sf-submit-btn:hover { color: var(--sx-vurgu-uzeri) !important; }
.show>.btn-warning.dropdown-toggle { color: var(--sx-vurgu-uzeri) !important; }
.sidebar-campaign-block { color: var(--sx-vurgu-uzeri) !important; }
.sidebar-filter-block .sb-filter-link.active .sb-dot { color: var(--sx-vurgu-uzeri) !important; }
.sidebar-filter-block .sb-filter-link:hover .sb-dot { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-amazon a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-blogger a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-gplus a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-grooveshark a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-instagram a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-soundcloud a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored .social-stumbleupon a { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-amazon a:hover { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-blogger a:hover { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-gplus a:hover { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-grooveshark a:hover { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-instagram a:hover { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-soundcloud a:hover { color: var(--sx-vurgu-uzeri) !important; }
.social-icons.social-icons-colored-hover .social-stumbleupon a:hover { color: var(--sx-vurgu-uzeri) !important; }
.vendor-wrap .product-badges.product-badges-position span.best { color: var(--sx-vurgu-uzeri) !important; }
::-moz-selection { color: var(--sx-vurgu-uzeri) !important; }
::selection { color: var(--sx-vurgu-uzeri) !important; }
button.submit:hover { color: var(--sx-vurgu-uzeri) !important; }
button[type='submit']:hover { color: var(--sx-vurgu-uzeri) !important; }
footer .mobile-social-icon a:hover { color: var(--sx-vurgu-uzeri) !important; }
/* @altin-uzeri-bitis */

/* =============================================================================
   3) TİPOGRAFİ
   =============================================================================
   Gövde yazısı olduğu gibi kalıyor (okunurluk), başlıklar serif oluyor. Storlant
   logosu zaten serif bir kelime işareti; başlıkların onunla aynı dili konuşması
   siteyi bir mağaza vitrinine yaklaştırıyor. */
h1, h2, h3,
.section-title,
.product-title-lg,
.nh-baslik {
    font-family: var(--sx-baslik-yazi);
    letter-spacing: .2px;
    color: var(--sx-yazi);
}
h1 { font-weight: 600; }
h2, h3 { font-weight: 600; }
h4, h5, h6 { color: var(--sx-yazi); }

/* Bölüm başlığının altındaki altın çizgi — sitenin imzası. */
.section-title,
.sx-bolum-basligi {
    position: relative;
    padding-bottom: 14px;
}
.section-title::after,
.sx-bolum-basligi::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 92px; height: 2px;
    background: var(--sx-cizgi-altin);
}

/* =============================================================================
   4) TEMA DÜĞMESİ
   ============================================================================= */
.sx-tema-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid var(--sx-kenar);
    border-radius: 50%;
    background: var(--sx-yuzey2);
    color: var(--sx-yazi-soluk);
    cursor: pointer;
    transition: color var(--sx-gecis), border-color var(--sx-gecis), background var(--sx-gecis), transform var(--sx-gecis);
}
.sx-tema-btn:hover {
    color: var(--sx-vurgu);
    border-color: var(--sx-vurgu);
    transform: translateY(-1px);
}
.sx-tema-btn i { font-size: 19px; line-height: 1; }

/* İki simge üst üste; hangisinin görüneceğine tema karar veriyor. Varsayılan
   gündüz olduğu için düğme normalde AY gösterir: teklif ettiği şey geceye
   geçmek.
   Böylece düğme "şu an neredeyim" değil "nereye geçerim" bilgisini veriyor. */
.sx-tema-btn .sx-gunes { display: none; }
.sx-tema-btn .sx-ay { display: block; }
[data-tema="gece"] .sx-tema-btn .sx-gunes { display: block; }
[data-tema="gece"] .sx-tema-btn .sx-ay { display: none; }

/* =============================================================================
   5) ÜST BAR
   ============================================================================= */
.nh-header {
    background: var(--sx-zemin);
    border-bottom: 1px solid var(--sx-kenar);
}

.nh-announce,
.nh-announce.ozelbg1,
.mobile-promotion {
    background: linear-gradient(90deg, var(--sx-vurgu-koyu), var(--sx-vurgu), var(--sx-vurgu-koyu));
    color: var(--sx-vurgu-uzeri);
}
.nh-announce a,
.mobile-promotion a { color: var(--sx-vurgu-uzeri); }
.nh-announce strong,
.mobile-promotion strong { color: var(--sx-vurgu-uzeri); }

.nh-bar,
.nh-mobile {
    background: var(--sx-zemin);
}

/* Kategori bağlantıları: sakin dururlar, üzerine gelince altın. */
.nh-cl > li > a,
.nh-cats a {
    color: var(--sx-yazi);
    transition: color var(--sx-gecis);
}
.nh-cl > li > a:hover,
.nh-cats a:hover { color: var(--sx-vurgu); }

/* Açılır kategori panelleri */
.nh-cl ul,
.nh-cl .nh-sub,
.cart-dropdown-wrap {
    background: var(--sx-yuzey);
    border: 1px solid var(--sx-kenar);
    border-radius: var(--sx-r-o);
    box-shadow: var(--sx-golge-b);
    color: var(--sx-yazi);
}
.cart-dropdown-wrap a { color: var(--sx-yazi); }
.cart-dropdown-wrap a:hover { color: var(--sx-vurgu); }

.nh-icon-btn {
    color: var(--sx-yazi);
    transition: color var(--sx-gecis);
}
.nh-icon-btn:hover { color: var(--sx-vurgu); }

/* Sayaç rozetleri: altın disk, üzerinde koyu rakam. */
.nh-badge {
    background: var(--sx-vurgu);
    color: var(--sx-vurgu-uzeri);
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--sx-zemin);
}

.nh-search-drop {
    background: var(--sx-yuzey);
    border-bottom: 1px solid var(--sx-kenar);
}
.nh-search-form input {
    background: var(--sx-yuzey2);
    border: 1px solid var(--sx-kenar-oge);
    color: var(--sx-yazi);
    border-radius: var(--sx-r-s);
}
.nh-search-form input::placeholder { color: var(--sx-yazi-silik); }
.nh-search-form input:focus { border-color: var(--sx-vurgu); }

/* Mobil menü çizgileri */
.burger-icon > span,
.burger-icon-top, .burger-icon-mid, .burger-icon-bottom {
    background-color: var(--sx-yazi) !important;
}

/* Sayfa kaydırma göstergesi */
#scroll-progress { background: var(--sx-vurgu); }

/* =============================================================================
   6) DÜĞMELER
   =============================================================================
   Tek vurgu rengi var: altın. İkinci bir renkli düğme eklenseydi ikisi de
   dikkat çekmeyi bırakırdı; bu yüzden "Sepete Ekle" altın, geri kalan her şey
   çerçeveli. */
.btn,
.button,
button.submit,
input[type="submit"] {
    border-radius: var(--sx-r-s);
    transition: background var(--sx-gecis), color var(--sx-gecis), border-color var(--sx-gecis), transform var(--sx-gecis), box-shadow var(--sx-gecis);
}

.btn-primary,
.btn.btn-fill-out,
.btn-heading,
.sx-btn-altin,
.button-add-to-cart,
.add-to-cart-btn {
    background: linear-gradient(135deg, var(--sx-vurgu), var(--sx-vurgu-hover)) !important;
    border: 1px solid transparent !important;
    color: var(--sx-vurgu-uzeri) !important;
    font-weight: 700;
    box-shadow: var(--sx-golge-s);
}
.btn-primary:hover,
.btn.btn-fill-out:hover,
.btn-heading:hover,
.sx-btn-altin:hover,
.button-add-to-cart:hover,
.add-to-cart-btn:hover {
    background: var(--sx-vurgu-hover) !important;
    color: var(--sx-vurgu-uzeri) !important;
    transform: translateY(-1px);
    box-shadow: var(--sx-altin-parilti);
}

/* PASİF DÜĞME
   Ölçümde "Tükendi" düğmesi 2.54:1 çıktı: gri dolgu üstünde beyaz yazı.
   WCAG pasif bileşenleri kontrast şartından muaf tutuyor ama "yazılar okunur
   olsun" denildi — stokta olmayan bir ürünün neden alınamadığı da okunmalı.
   Gri dolgu yerine yüzey + soluk yazı: iki temada da 5:1 üstünde. */
button:disabled,
button[disabled],
.btn:disabled,
.btn.disabled,
input[type="submit"]:disabled {
    background: var(--sx-yuzey3) !important;
    background-image: none !important;
    border: 1px solid var(--sx-kenar-guclu) !important;
    color: var(--sx-yazi-soluk) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;          /* tema zaten ayrıştırıyor; opaklık okunurluğu düşürürdü */
    transform: none !important;
}

/* Ürün sayfasındaki "Tükendi" düğmesi ayrı bir kuralla geliyor ve özgüllüğü
   daha yüksek (`.product-soldout .button.button-add-to-cart:disabled`).
   Gri dolgu üstünde beyaz yazı 2.54:1 ölçüldü; yukarıdaki genel kural bu
   seçiciyi yenemediği için aynı seçici burada tekrar ediliyor. */
.product-soldout .button.button-add-to-cart:disabled,
.product-soldout .button.button-add-to-cart:disabled:hover {
    background: var(--sx-yuzey3) !important;
    border-color: var(--sx-kenar-guclu) !important;
    color: var(--sx-yazi-soluk) !important;
}

/* Geri sayım ayraçları (":"). `--sx-yazi-silik` 14px'te 4.18:1 ölçüldü,
   eşiğin hemen altında. Bir basamak koyulaştırıldı. */
.sb-cd-sep,
.gk-cd-sep-alt,
.countdown-sep { color: var(--sx-yazi-soluk) !important; }

.btn-outline,
.btn-border,
.sx-btn-cerceve {
    background: transparent !important;
    border: 1px solid var(--sx-kenar-oge) !important;
    color: var(--sx-yazi) !important;
}
.btn-outline:hover,
.btn-border:hover,
.sx-btn-cerceve:hover {
    border-color: var(--sx-vurgu) !important;
    color: var(--sx-vurgu) !important;
    background: var(--sx-vurgu-zayif) !important;
}

/* =============================================================================
   7) FORMLAR
   =============================================================================
   Form alanının sınırı `--sx-kenar-oge`: WCAG 1.4.11 gereği bileşeni tanımlayan
   sınır 3:1 olmak zorunda ve bu token tam onun için ölçüldü. Dekoratif ayraçlar
   daha yumuşak kalıyor. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.form-control,
.select2-container--default .select2-selection--single {
    background: var(--sx-yuzey2) !important;
    border: 1px solid var(--sx-kenar-oge) !important;
    color: var(--sx-yazi) !important;
    border-radius: var(--sx-r-s) !important;
    transition: border-color var(--sx-gecis), box-shadow var(--sx-gecis);
}
input::placeholder,
textarea::placeholder { color: var(--sx-yazi-silik) !important; }

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--sx-vurgu) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-vurgu) 22%, transparent) !important;
    outline: none;
}

label { color: var(--sx-yazi); }
small, .text-muted { color: var(--sx-yazi-soluk) !important; }

/* Tarayıcının otomatik doldurma sarısı gece temasında sayfayı deliyordu. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sx-yazi);
    -webkit-box-shadow: 0 0 0 1000px var(--sx-yuzey2) inset;
    caret-color: var(--sx-yazi);
}

/* select2 */
.select2-dropdown,
.select2-container--default .select2-results {
    background: var(--sx-yuzey) !important;
    border-color: var(--sx-kenar) !important;
    color: var(--sx-yazi) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sx-vurgu) !important;
    color: var(--sx-vurgu-uzeri) !important;
}

/* =============================================================================
   8) KARTLAR VE YÜZEYLER
   ============================================================================= */
.card,
.product-cart-wrap,
.sx-kart {
    background: var(--sx-yuzey);
    border: 1px solid var(--sx-kenar);
    border-radius: var(--sx-r-o);
    box-shadow: none;
    transition: border-color var(--sx-gecis), box-shadow var(--sx-gecis), transform var(--sx-gecis);
}

/* Ürün kartı: üzerine gelince altın bir hâle. Gölge yerine hâle, çünkü siyah
   zeminde gölge görünmez. */
.product-cart-wrap:hover,
.sx-kart:hover {
    border-color: color-mix(in srgb, var(--sx-vurgu) 45%, var(--sx-kenar));
    box-shadow: var(--sx-altin-parilti);
    transform: translateY(-3px);
}

.product-cart-wrap .product-img-action-wrap,
.product-img-action-wrap {
    background: var(--sx-yuzey2);
    border-radius: var(--sx-r-o) var(--sx-r-o) 0 0;
    overflow: hidden;
}

.product-content-wrap .product-category,
.product-category { color: var(--sx-yazi-soluk); }

.product-content-wrap h2 a,
.product-title a {
    color: var(--sx-yazi);
    transition: color var(--sx-gecis);
}
.product-content-wrap h2 a:hover,
.product-title a:hover { color: var(--sx-vurgu); }

/* Fiyat satırı — sayfanın en çok okunan yeri. */
.product-price span,
.product-price .current-price,
.price { color: var(--sx-fiyat); font-weight: 700; }
.product-price .old-price,
.old-price,
del { color: var(--sx-eski-fiyat); }

/* Etiketler */
.product-badges span,
.badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .2px;
}
.badge-gold,
.product-badges span.hot {
    background: var(--sx-vurgu);
    color: var(--sx-vurgu-uzeri);
}

/* =============================================================================
   9) TABLO / SEPET / ÖDEME
   ============================================================================= */
table { color: var(--sx-yazi); }
.table,
.table-shopping-summary {
    background: var(--sx-yuzey);
    color: var(--sx-yazi);
}
.table th,
.table thead th {
    background: var(--sx-yuzey2);
    color: var(--sx-yazi);
    border-color: var(--sx-kenar) !important;
    font-weight: 700;
}
.table td,
.table tbody td { border-color: var(--sx-kenar) !important; }
.table tbody tr:hover td { background: var(--sx-yuzey2); }

/* Toplam kutusu: siparişin karar anı, bu yüzden altın çerçeveli. */
.cart-totals,
.order-summary,
.sx-toplam-kutu {
    background: var(--sx-yuzey);
    border: 1px solid color-mix(in srgb, var(--sx-vurgu) 34%, var(--sx-kenar));
    border-radius: var(--sx-r-o);
    box-shadow: var(--sx-golge-o);
}

/* Uyarı / bilgi kutuları */
.alert-success { background: var(--sx-basari-zemin); color: var(--sx-basari); border-color: color-mix(in srgb, var(--sx-basari) 38%, transparent); }
.alert-danger  { background: var(--sx-hata-zemin);   color: var(--sx-hata);   border-color: color-mix(in srgb, var(--sx-hata) 38%, transparent); }
.alert-warning { background: var(--sx-uyari-zemin);  color: var(--sx-uyari);  border-color: color-mix(in srgb, var(--sx-uyari) 38%, transparent); }
.alert-info    { background: var(--sx-bilgi-zemin);  color: var(--sx-bilgi);  border-color: color-mix(in srgb, var(--sx-bilgi) 38%, transparent); }

/* =============================================================================
   10) PENCERELER
   ============================================================================= */
.modal-content,
.sx-pencere {
    background: var(--sx-yuzey);
    border: 1px solid var(--sx-kenar);
    border-radius: var(--sx-r-b);
    color: var(--sx-yazi);
    box-shadow: var(--sx-golge-b);
}
.modal-header,
.modal-footer { border-color: var(--sx-kenar); }
.modal-backdrop { background: var(--sx-perde); }
.modal-backdrop.show { opacity: 1; }
.close, .btn-close { color: var(--sx-yazi-soluk); }

/* =============================================================================
   11) ALT BİLGİ
   ============================================================================= */
footer.main,
.main-footer,
footer {
    background: var(--sx-yuzey);
    border-top: 1px solid var(--sx-kenar);
    color: var(--sx-yazi-soluk);
}
footer a { color: var(--sx-yazi-soluk); }
footer a:hover { color: var(--sx-vurgu); }
footer h4, footer h5, footer .widget-title {
    color: var(--sx-yazi);
    font-family: var(--sx-baslik-yazi);
}

/* =============================================================================
   12) BİLEŞEN CİLASI
   =============================================================================
   Buradaki her kural gözlemlenmiş somut bir kusuru düzeltiyor; "biraz daha
   güzel olsun" diye eklenmiş kural yok. */

/* --- Sayfa başlığı şeridi ---------------------------------------------------
   Şerit mavi bir bilgi kutusu gibi duruyordu (`--sx-bilgi-zemin`). Oysa işi
   bilgi vermek değil, konumu göstermek: nötr bir yüzey ve ince altın alt çizgi
   sayfanın geri kalanıyla aynı dili konuşuyor. */
.page-header.breadcrumb-wrap,
.up-page-header {
    background: var(--sx-yuzey2);
    border-bottom: 1px solid var(--sx-kenar);
    position: relative;
}
.page-header.breadcrumb-wrap::after,
.up-page-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--sx-cizgi-altin);
    opacity: .5;
}
.breadcrumb a { color: var(--sx-yazi-soluk); }
.breadcrumb a:hover { color: var(--sx-vurgu); }

/* --- Metin içi bağlantılar ---------------------------------------------------
   Açıklama metinlerindeki bağlantılar yeşil ve mavi olmak üzere iki ayrı renkte
   çıkıyordu; yeşil ayrıca FİYAT rengiyle aynıydı ve "indirim" gibi okunuyordu.
   Tek vurgu rengi: altın. */
.sx-metin a,
.category-description a,
.product-description a,
.blog-content a,
.entry-content a,
.gk-seo-text a,
.sb-seo a {
    color: var(--sx-vurgu);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--sx-vurgu) 45%, transparent);
}
.sx-metin a:hover,
.category-description a:hover,
.product-description a:hover,
.blog-content a:hover,
.entry-content a:hover,
.gk-seo-text a:hover,
.sb-seo a:hover {
    color: var(--sx-vurgu-hover);
    text-decoration-color: currentColor;
}

/* --- Taksit kampanyası rozeti ------------------------------------------------
   Rozetin zemini SABİT koyu (`#111827`) ve öyle kalmalı; ama rengini
   `.pf3-progress-box__head span` kuralı daha yüksek özgüllükle eziyordu.
   Bu eskiden beri bir kusurdu: koyu rozetin üstünde gri yazı 3.4:1 idi.
   Rozet kendi kuralıyla açıkça beyaza sabitleniyor. */
.pf3-progress-box__head .pf3-progress-box__badge,
.pf3-progress-box__head span.pf3-progress-box__badge {
    color: #fff !important;
}

/* --- Üstü çizili fiyat -------------------------------------------------------
   `color: gray` yazıyordu; isimli renk olduğu için kendi tokenı yerine genel
   soluk yazı tokenına düşüyordu. Eski fiyatın kendi tokenı var. */
.old-price,
.product-price .old-price,
del { color: var(--sx-eski-fiyat) !important; }

/* --- Pile seçimi ------------------------------------------------------------
   Satışın karar düğmelerinden biri. Seçili hâli gri dolgu ile gösteriliyordu;
   hangisinin seçili olduğu yeterince belli değildi. Altın dolgu hem belli
   ediyor hem sitenin diliyle uyuşuyor (ölçülen kontrast 9.35:1 / 5.06:1). */
.pile-buttons input:checked + label {
    background-color: var(--sx-vurgu) !important;
    border-color: var(--sx-vurgu) !important;
    color: var(--sx-vurgu-uzeri) !important;
    font-weight: 700;
}
.pile-buttons label {
    background: var(--sx-yuzey2);
    border: 1px solid var(--sx-kenar-oge);
    color: var(--sx-yazi);
    border-radius: var(--sx-r-s);
    transition: border-color var(--sx-gecis), background var(--sx-gecis);
}
.pile-buttons label:hover { border-color: var(--sx-vurgu); }

/* --- Ölçü açılır listesi -----------------------------------------------------
   `background-color: white` yazıyordu: gece temasında ürün sayfasının ortasında
   bembeyaz bir kutu açılıyordu. Artık yüzey tokenından geliyor; burada yalnız
   kenarlık ve gölge düzeltiliyor. */
.custom-dropdown-menu {
    border: 1px solid var(--sx-kenar) !important;
    border-radius: var(--sx-r-o);
    box-shadow: var(--sx-golge-b);
}
.custom-dropdown-menu li:hover { background: var(--sx-yuzey3); }

/* --- Kalıntı hata ayıklama biçimi -------------------------------------------
   `.price-container` 2px KIRMIZI çerçeveyle geliyordu. Kırmızı bu sitede hata
   rengi; fiyat kutusunun etrafında bir uyarı gibi duruyordu. */
.price-container {
    border: 1px solid var(--sx-kenar) !important;
    background-color: var(--sx-yuzey) !important;
    border-radius: var(--sx-r-o);
}

/* --- Arama katmanı ve yorum galerisi ----------------------------------------
   İkisi de `background: white` yazıyordu. Artık yüzey tokenından geliyor;
   kapatma düğmesi de görünür bir renge çekiliyor (`color: black` idi — koyu
   katmanın üstünde kayboluyordu). */
.search-popup-wrap { backdrop-filter: blur(3px); }
#kapatBtn { color: var(--sx-yazi) !important; }
#kapatBtn:hover { color: var(--sx-vurgu) !important; }

/* --- Ürün kartı görsel alanı ------------------------------------------------
   Tül fotoğraflarının çoğu beyaz zeminli. Siyah sayfada kartın üst yarısı
   parlak bir dikdörtgen gibi duruyordu; ince bir ayraç görselin nerede bitip
   kartın nerede başladığını belli ediyor. */
.product-cart-wrap .product-img-action-wrap {
    border-bottom: 1px solid var(--sx-kenar);
}

/* =============================================================================
   13) HAREKET AZALTMA
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .sx-gecis-acik,
    .sx-gecis-acik *,
    .sx-gecis-acik *::before,
    .sx-gecis-acik *::after { transition: none !important; }
    .product-cart-wrap:hover,
    .sx-kart:hover { transform: none; }
}