/*
 * MindAeon Vitrin — TABAN STİL (B2B/B2C Faz D)
 * ---------------------------------------------------------------------------
 * Sözleşme: burada YALNIZ yapı ve davranış vardır; RENK/TİPOGRAFİ/YUVARLAKLIK
 * daima --sf-* değişkenlerinden okunur. Bir tema dosyası (b2b-*.css / b2c-*.css)
 * yalnız bu değişkenleri ve kendi iskelet kurallarını yeniden tanımlar.
 *
 * Neden böyle: 20 tema var. Ortak bileşen stilini her temaya kopyalasaydık,
 * ileride eklenen her vitrin özelliği 20 dosyada tekrar yazılmak zorunda kalırdı
 * ve biri unutulduğunda o tema sessizce bozulurdu.
 */

:root {
    /* renk */
    --sf-bg: #f4f7f8;
    --sf-surface: #ffffff;
    --sf-surface-2: #f8fafc;
    --sf-ink: #16262f;
    /* V1: #64748b idi ve sayfa zemininde (#f4f7f8) 4,42:1 veriyordu — WCAG AA eşiğinin (4,5)
       hemen ALTINDA. Bu bir varsayılan olduğu için, token'ı ezmeyen HER tema bu ihlali miras
       alıyordu. Aynı tonda en az koyulaştırmayla üç zeminde de (beyaz / #f8fafc / #f4f7f8) geçer. */
    --sf-muted: #627288;
    --sf-line: #e2e8f0;
    /* V1: #0891b2 idi; üstündeki beyaz mürekkeple 3,68:1 → birincil düğme yazısı okunmuyordu.
       Ton korunarak eşiğe çekildi (4,52:1). --sf-accent-2 (#0e7490) ayrı ve daha koyu kalır. */
    --sf-accent: #07819e;
    --sf-accent-2: #0e7490;
    --sf-accent-ink: #ffffff;
    --sf-ok: #15803d;
    --sf-warn: #b45309;
    --sf-danger: #b91c1c;

    /* ÜSTÜNE YAZILAN RENK (V1).
       Neden var: durum renkleri (ok/warn/danger) rozet ZEMİNİ olarak kullanılıyor ve metin rengi
       base.css'te `#fff` SABİT yazılmıştı. Bir tema `--sf-ok`'u açık bir yeşile çekince rozet
       "beyaz üstüne beyaz" oluyordu ve hiçbir test bunu yakalamıyordu. Artık her zemin renginin
       üstüne yazılacak rengi kendi token'ı taşır; koyu/açık teması olan bir tema bunları EZER. */
    /* İKİNCİL VURGU ZEMİNİNİN KENDİ MÜREKKEBİ.
       Yapısal hata buydu: `--sf-accent-ink` TEK token olmasına rağmen İKİ ayrı zeminde kullanılıyordu
       (`--sf-accent` düğmede, `--sf-accent-2` üst menüde). İki zemin birbirinden uzak parlaklıkta
       olduğunda tek mürekkep ikisini birden okunur yapamaz; colorblock temasında üst menü metni
       1.43:1 ile pratikte GÖRÜNMEZ hâle gelmişti. Varsayılan geriye-uyumludur (accent-ink);
       ihtiyacı olan tema kendi değerini verir. */
    --sf-on-accent-2: var(--sf-accent-ink);

    --sf-on-ok: #ffffff;
    --sf-on-warn: #ffffff;
    --sf-on-danger: #ffffff;
    /* Koyu gradyan katmanının (banner örtüsü) üstündeki metin — zemin daima koyulaştırıldığı için
       tema değişse de beyaz kalır, ama yine de ezilebilir olsun diye token'dır. */
    --sf-on-overlay: #ffffff;

    /* biçim */
    --sf-radius: 14px;
    --sf-radius-sm: 9px;
    --sf-gap: 1rem;
    --sf-pad: 1rem;
    --sf-shadow: 0 12px 28px -18px rgba(15, 23, 42, .45);
    --sf-shadow-hover: 0 16px 34px -16px rgba(8, 145, 178, .45);

    /* tipografi */
    --sf-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --sf-font-display: var(--sf-font);
    --sf-title-weight: 650;
    --sf-tracking: -0.01em;

    /* ölçü */
    --sf-container: 1200px;
    --sf-media-h: 150px;
    --sf-nav-h: 60px;

    /* FAZ S — additive token'lar (Enterprise++ programı). Mevcut adlar DEĞİŞMEDİ; bunlar YALNIZ eklenti.
       Tema dosyaları isterse ezer; ezmeyen tema geriye-uyumlu makul varsayılanı alır. */
    /* skeleton (yükleniyor iskeleti — shimmer) */
    --sf-skeleton-base: #e8edf1;
    --sf-skeleton-shine: #f4f7f9;
    --sf-skeleton-speed: 1.25s;
    /* sepet çekmecesi / yan-panel */
    --sf-drawer-w: 400px;
    --sf-drawer-bg: var(--sf-surface);
    --sf-drawer-shadow: -18px 0 40px -20px rgba(15, 23, 42, .5);
    --sf-scrim: rgba(15, 23, 42, .45);
    /* kart rozetleri (kargo/hız) */
    --sf-badge-ship-bg: #ecfdf5;
    --sf-badge-ship-ink: #15803d;
    --sf-badge-fast-bg: #eff6ff;
    --sf-badge-fast-ink: #1d4ed8;
    /* mobil sticky CTA çubuğu */
    --sf-sticky-bg: var(--sf-surface);
    --sf-sticky-shadow: 0 -10px 26px -18px rgba(15, 23, 42, .4);
    /* geri-sayım (flaş) */
    --sf-flash-bg: #fef2f2;
    --sf-flash-ink: #b91c1c;
    /* toast / bildirim */
    --sf-toast-bg: #16262f;
    --sf-toast-ink: #ffffff;
    --sf-z-drawer: 1050;
    --sf-z-toast: 1080;

    /* ═══ v2 REDESIGN — EKSİK ÖLÇEKLER (ADDITIVE; mevcut token/kurallar değişmedi, yalnız yeni ölçekler eklendi).
       Amaç: sabit rem/px yerine sistematik ritim. Değerler mevcut yaygın literallere yakın → görsel no-op,
       sonra base.css kuralları kademeli olarak bu ölçeklere taşınır. Temalar bu ölçekleri de ezebilir. */
    /* boşluk ölçeği (4px taban) — --sf-gap/--sf-pad bunun semantik takma adı */
    --sf-space-0: 0;
    --sf-space-1: .25rem;
    --sf-space-2: .5rem;
    --sf-space-3: .75rem;
    --sf-space-4: 1rem;
    --sf-space-5: 1.5rem;
    --sf-space-6: 2rem;
    --sf-space-7: 3rem;
    --sf-space-8: 4rem;
    /* tipografi ölçeği + satır yüksekliği */
    --sf-text-xs: .75rem;
    --sf-text-sm: .8125rem;
    --sf-text-base: .9375rem;
    --sf-text-lg: 1.0625rem;
    --sf-text-xl: 1.25rem;
    --sf-text-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
    --sf-text-3xl: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --sf-leading-tight: 1.2;
    --sf-leading: 1.5;
    --sf-leading-loose: 1.7;
    /* elevation ölçeği (dinlenme→örtü). Mevcut --sf-shadow/-hover korunur; bunlar ek katman derinliği verir */
    --sf-sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --sf-sh-2: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .05);
    --sf-sh-3: 0 16px 40px rgba(15, 23, 42, .16), 0 4px 12px rgba(15, 23, 42, .08);
    /* radius ölçeği (pill artık token; eskiden 999px sabit ~20 yerde) */
    --sf-radius-xs: 4px;
    --sf-radius-lg: 20px;
    --sf-radius-pill: 999px;
    /* z-index ölçeği (sticky yığını için isimli katmanlar; drawer/toast yukarıda) */
    --sf-z-base: 1;
    --sf-z-nav: 100;
    --sf-z-dropdown: 200;
    --sf-z-sticky: 300;
    --sf-z-lightbox: 1100;
    /* hareket token'ları */
    --sf-dur-fast: .12s;
    --sf-dur: .18s;
    --sf-dur-slow: .28s;
    --sf-ease: cubic-bezier(.2, .8, .2, 1);
    /* ürün-grid CSS-grid izi (Bootstrap col-* yerine tokenlı grid) */
    --sf-card-min: 200px;

    /* TANIMSIZ TOKEN DÜZELTMELERİ (audit D8): kullanılıyordu ama tanımlı değildi → geriye-uyumlu varsayılan */
    --sf-ink-soft: var(--sf-muted);              /* base.css .sf-swatch-dot */
    --sf-on-accent-hover: var(--sf-accent-ink);  /* b2b-tabbed birincil-düğme hover metni */
}

/* ---------- KÜRESEL SIFIRLAMA (Bootstrap kaldırıldı) ----------
   Bootstrap `*{box-sizing:border-box}` sağlıyordu; kaldırınca eleman içerik-kutusuna döner ve padding'li +
   genişlikli her kutu (input/kart/kap) TAŞAR. Bu yüzden kritik sıfırlamalar burada tekrarlanır. Vitrin
   kendi bileşen stiline sahiptir; yalnız Bootstrap'ın TABAN normalleştirmesinin karşılığı gerekir. */
*, *::before, *::after { box-sizing: border-box; }
img, svg { vertical-align: middle; }
button { font-family: inherit; }

/* ---------- iskelet ---------- */
body.sf-body {
    margin: 0;
    background: var(--sf-bg);
    color: var(--sf-ink);
    font-family: var(--sf-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sf-container { width: 100%; max-width: var(--sf-container); margin-inline: auto; padding-inline: 1rem; }
.sf-main { flex: 1 0 auto; padding-block: 1.5rem 3rem; }
.sf-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- ÜRÜN IZGARASI (Bootstrap row/col yerine gerçek CSS grid) ----------
   Eskiden ızgara Bootstrap `row g-3` + `col-6/md-4/lg-3` ile kuruluyordu (bootstrap.min.css'e BAĞIMLI).
   Artık kendi responsive CSS grid'i: auto-fill + kart-min-genişliği → geniş ekranda çok, dar ekranda az
   sütun; `min(100%, …)` çok dar ekranda tek sütun (kart kaptan taşmaz). Yoğunluk düzen-başına --sf-grid-min
   ile ayarlanır; temalar `.sf-t-X .sf-grid { grid-template-columns: … }` ile yine ezebilir. */
.sf-grid {
    display: grid;
    gap: var(--sf-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sf-grid-min, 15.5rem)), 1fr));
}
.sf-grid-densegrid { --sf-grid-min: 12.5rem; }   /* B2B yoğun → daha çok sütun */
.sf-grid-showcase  { --sf-grid-min: 19rem; }      /* büyük görsel → daha az sütun */

/* Tanım listesi (Bootstrap dl.row + dt.col-sm-4/dd.col-sm-8 yerine) — özet key/value blokları. */
.sf-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .3rem .85rem; margin: 0; }
.sf-dl dt { font-weight: 600; color: var(--sf-muted); margin: 0; }
.sf-dl dd { margin: 0; }
@media (max-width: 480px) { .sf-dl { grid-template-columns: 1fr; gap: .05rem .85rem; } .sf-dl dd { margin-bottom: .4rem; } }

/* Buton/eylem satırı (Bootstrap d-flex gap-2 flex-wrap yerine). */
.sf-row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Bootstrap utility karşılıkları (kaldırılan sınıfların yerine). */
.sf-text-muted { color: var(--sf-muted); }
.sf-text-center { text-align: center; }
.sf-inline { display: inline-block; }
.sf-mb-0 { margin-bottom: 0; }
.sf-mb-3 { margin-bottom: 1rem; }
.sf-mt-3 { margin-top: 1rem; }

/* sol-raylı temalar */
.sf-split { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.sf-aside { position: sticky; top: 1rem; }
@media (max-width: 900px) { .sf-split { grid-template-columns: 1fr; } .sf-aside { position: static; } }

/* ---------- üst menü ---------- */
/* position:relative — V2 mega menü paneli `top:100%` ile ÜST ÇUBUĞA göre konumlanır.
   Konumlanmış bir ata olmadan panel, en yakın konumlanmış öğeye (pratikte sayfanın kendisine)
   göre yerleşir ve menünün altında değil sayfanın tepesinde açılırdı. */
.sf-nav { background: var(--sf-accent-2); color: var(--sf-on-accent-2); position: relative; }
.sf-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--sf-nav-h); }
.sf-nav a { color: inherit; text-decoration: none; }

.sf-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; letter-spacing: var(--sf-tracking); font-family: var(--sf-font-display); }
.sf-logo { height: 30px; width: auto; display: block; }

.sf-actions { display: flex; align-items: center; gap: .85rem; }
.sf-act { display: inline-flex; align-items: center; gap: .35rem; font-size: 1.05rem; opacity: .92; }
.sf-act:hover { opacity: 1; }
.sf-act-text { font-size: .9rem; font-weight: 600; }
.sf-act-btn { background: none; border: 0; color: inherit; padding: 0; cursor: pointer; }
.sf-cart { position: relative; font-size: 1.15rem; }
.sf-cart-badge { position: absolute; top: -8px; right: -11px; background: var(--sf-warn); color: var(--sf-on-warn); border-radius: 999px; font-size: .68rem; font-weight: 700; padding: .05rem .35rem; }

/* ---------- filtre / arama ---------- */
.sf-facets { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sf-facets-rail { flex-direction: column; align-items: stretch; }
.sf-search { display: flex; align-items: stretch; gap: .35rem; flex: 1 1 220px; }
.sf-input { border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-ink); border-radius: var(--sf-radius-sm); padding: .45rem .7rem; font: inherit; font-size: .9rem; min-width: 0; width: 100%; }
.sf-select { max-width: 240px; }
.sf-facets-rail .sf-select { max-width: none; }
.sf-search-btn { border: 1px solid var(--sf-line); background: var(--sf-surface-2); color: var(--sf-ink); border-radius: var(--sf-radius-sm); padding: .3rem .7rem; cursor: pointer; }

.sf-catlist { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.sf-catlist a { display: block; padding: .4rem .6rem; border-radius: var(--sf-radius-sm); color: var(--sf-ink); text-decoration: none; font-size: .9rem; }
.sf-catlist a:hover { background: var(--sf-surface-2); }
.sf-catlist a.active { background: var(--sf-accent); color: var(--sf-accent-ink); font-weight: 600; }

/* çekmece yerleşimi (Drawer): filtre varsayılan kapalı, düğmeyle açılır */
.sf-drawer > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; padding: .4rem .8rem; border: 1px solid var(--sf-line); border-radius: 999px; background: var(--sf-surface); }
.sf-drawer > summary::-webkit-details-marker { display: none; }
.sf-drawer[open] > summary { margin-bottom: .75rem; }

/* ---------- ürün kartı ---------- */
/* v2 redesign: kartlar artık DİNLENMEDE de hafif derinlik taşır (--sf-card-shadow, varsayılan --sf-sh-1).
   Audit: düz/admin gölge (0 1px 0) premium hissi kırıyordu. Kimlik-gereği düz kalmak isteyen tema
   --sf-card-shadow:none set edebilir. Renk değişmez → kontrast testleri etkilenmez. */
.sf-card { background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: var(--sf-card-shadow, var(--sf-sh-1)); transition: box-shadow var(--sf-dur, .18s) var(--sf-ease, ease), transform var(--sf-dur-fast, .12s) var(--sf-ease, ease); }
.sf-card:hover { box-shadow: var(--sf-shadow-hover); transform: translateY(-3px); }
/* v2: media yüksekliği tema-kontrollü kalır (--sf-media-h → proporsiyon değişmez); yalnız boş/yükleme zemini
   düz gri yerine yumuşak markalı gradient (fallback daha az "kırık görsel" hisseder). */
.sf-card-media { position: relative; display: grid; place-items: center; height: var(--sf-media-h); background: linear-gradient(160deg, var(--sf-surface-2), color-mix(in srgb, var(--sf-surface-2) 88%, var(--sf-line))); overflow: hidden; }
/* markalı boş/yükleme fallback: bare faint icon yerine yumuşak çerçeveli tile */
.sf-card-ph { font-size: 2.4rem; color: var(--sf-accent); opacity: .28; }
.sf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-card-body { padding: var(--sf-pad); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.sf-card-title {
    font-size: .98rem; font-weight: var(--sf-title-weight); margin: 0; line-height: 1.3;
    font-family: var(--sf-font-display);
    /* İKİ SATIRA KIRP (V1): başlık uzunluğu karttan karta değiştiğinde ızgara satırları
       birbirine göre kayıyor ve liste "bozuk" görünüyordu. Sabit yükseklik yerine kırpma
       kullanılır — kısa başlıkta boşluk bırakmaz. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.6em;
}
.sf-card-title a { color: inherit; text-decoration: none; }
.sf-card-meta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--sf-muted); flex-wrap: wrap; }
.sf-card-meta code { color: inherit; }
.sf-card-desc { font-size: .82rem; color: var(--sf-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: .55rem; }

/* ---------- ürün kartı: V1 eklentileri ---------- */

/* İKİNCİ GÖRSEL (fare üzerinde). Ürünün ikinci görseli yoksa img onerror ile DOM'dan kaldırılır,
   dolayısıyla bu kural hiçbir şeyi etkilemez — "boş kutu" görünmez. */
.sf-img-2 { opacity: 0; transition: opacity .18s ease; }
.sf-card:hover .sf-img-2, .sf-card:focus-within .sf-img-2 { opacity: 1; }

/* İNDİRİM ROZETİ. Zemin `--sf-danger`, mürekkep kendi token'ından gelir; sabit beyaz YAZILMAZ —
   koyu temalarda beyaz mürekkep parlak kırmızı üzerinde okunmuyordu. */
.sf-card-off {
    position: absolute; top: .5rem; left: .5rem; z-index: 2;
    background: var(--sf-danger); color: var(--sf-on-danger);
    font-size: .75rem; font-weight: 800; letter-spacing: .01em;
    padding: .1rem .4rem; border-radius: var(--sf-radius-sm);
}

/* SİPARİŞ KURALI ÇİPLERİ (asgari adet / kat / koli) — B2B kartında görünür. */
.sf-card-rules { display: flex; flex-wrap: wrap; gap: .3rem; }
.sf-card-rules .sf-chip { font-size: .72rem; }

/* ---------- kırıntı + kategori vitrini (V2) ---------- */
.sf-crumb { margin: .2rem 0 .7rem; font-size: .84rem; color: var(--sf-muted); }
.sf-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.sf-crumb li + li::before { content: "/"; opacity: .5; margin-right: .3rem; }
.sf-crumb a { color: inherit; text-decoration: none; }
.sf-crumb a:hover { color: var(--sf-accent); text-decoration: underline; }
.sf-crumb [aria-current="page"] { color: var(--sf-ink); font-weight: 600; }

.sf-cathead {
    display: flex; gap: var(--sf-gap); align-items: center;
    background: var(--sf-surface); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius); padding: var(--sf-pad); margin-bottom: var(--sf-gap);
}
.sf-cathead-img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--sf-radius-sm); flex: none; }
.sf-cathead-body { min-width: 0; }
.sf-cathead-title { margin: 0; font-family: var(--sf-font-display); font-size: 1.5rem; font-weight: var(--sf-title-weight); letter-spacing: var(--sf-tracking); text-wrap: balance; }
.sf-cathead-count { font-size: .82rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-cathead-desc { margin: .4rem 0 0; font-size: .9rem; color: var(--sf-muted); max-width: 70ch; }

.sf-subcats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sf-gap); }
.sf-subcat {
    display: inline-flex; align-items: baseline; gap: .3rem;
    border: 1px solid var(--sf-line); border-radius: 999px; padding: .25rem .7rem;
    background: var(--sf-surface); color: var(--sf-ink); text-decoration: none; font-size: .85rem;
}
.sf-subcat:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.sf-subcat-n { font-size: .72rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .sf-cathead { flex-direction: column; align-items: flex-start; }
    .sf-cathead-img { width: 100%; height: 140px; }

    /* V2 FIX: üst-şerit filtresi mobilde yan-yana taşıyordu (MARKA dropdown + SIRALAMA sağdan kesiliyordu).
       Tüm süzgeç kontrolleri tam-genişlik dikey yığılır. */
    .sf-facets-top { gap: .5rem; }
    .sf-facets-top > .sf-search,
    .sf-facets-top > .sf-select,
    .sf-facets-top > .sf-facet-group { flex: 1 1 100%; min-width: 0; max-width: none; }
    /* Mobilde sıralama seçici de daralabilsin (taşmayı kesin önle). */
    .sf-sort { flex-wrap: wrap; }
    .sf-sort .sf-select { min-width: 0; flex: 1 1 8rem; }

    /* V1 FIX: üst-menüde "Üye Ol"/"Giriş" metinleri 390px'e sığmayıp sağdan kesiliyordu. Mobilde
       ikon-only (metin sr-only kalır → erişilebilir ad korunur; title zaten ipucu verir). */
    .sf-nav-inner .sf-act-text span {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .sf-actions { gap: .6rem; }
}

/* V5 FIX: üst gezinme şeridindeki kategori SAYAÇLARI (², 98…) minik üst-simge gibi görünüp gürültü
   yaratıyordu. Sayaç zaten mega-panelde ve fasetlerde var; üst şeritte gizlenir (panel başlığı etkilenmez). */
.sf-mega-list > .sf-mega-item > .sf-mega-link .sf-mega-count { display: none; }

/* ---------- mega menü (V2) ----------
   Kategori gezinmesi. Panel CSS ile (hover + :focus-within) açılır; JavaScript yalnız MOBİL
   açıcı ve Esc içindir — betik yüklenmese bile menü klavye ve fare ile çalışır.
   Renkler tamamen token'dan gelir; sabit renk yoktur (kontrast testi zaten yasaklar). */
.sf-mega { position: relative; display: flex; align-items: center; }
.sf-mega-toggle {
    display: none; align-items: center; gap: .35rem;
    background: transparent; border: 1px solid var(--sf-line); color: inherit;
    border-radius: var(--sf-radius-sm); padding: .3rem .6rem; font: inherit; cursor: pointer;
}
.sf-mega-list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.sf-mega-item { position: static; }
.sf-mega-link {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .45rem .6rem; border-radius: var(--sf-radius-sm);
    /* ÜST ÇUBUĞUN MÜREKKEBİ AÇIKÇA ALINIR. `color: inherit` yazılıydı ve temalar `.sf-nav`ın
       rengini kendi kurallarıyla ezdiğinde (darkops/magazine/bigimage) menü bağlantısı zeminle
       neredeyse aynı renge düşüyordu (1,0–1,1:1). Kontrast testleri bunu göremez: `inherit`
       ölçülebilir bir token değildir. Token'a bağlanınca çift ölçülebilir hâle gelir. */
    color: var(--sf-on-accent-2);
    text-decoration: none; font-size: .92rem; white-space: nowrap;
}
.sf-mega-link:hover, .sf-mega-item:focus-within > .sf-mega-link {
    background: color-mix(in srgb, var(--sf-on-accent-2) 14%, transparent);
}
.sf-mega-count { font-size: .7rem; opacity: .65; font-variant-numeric: tabular-nums; }
.sf-mega-caret { font-size: .7rem; opacity: .7; }

/* Panel: üst çubuğun tam altında, konteyner genişliğinde. */
.sf-mega-panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    display: none;
    background: var(--sf-surface); color: var(--sf-ink);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow); padding: var(--sf-pad);
}
.sf-mega-item.has-kids:hover > .sf-mega-panel,
.sf-mega-item.has-kids:focus-within > .sf-mega-panel { display: block; }

.sf-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem 1.2rem; }
.sf-mega-col-head {
    display: flex; align-items: baseline; gap: .3rem;
    font-weight: 700; font-size: .9rem; color: inherit; text-decoration: none;
}
.sf-mega-col-head:hover { color: var(--sf-accent); }
.sf-mega-sub { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; }
.sf-mega-sub a { font-size: .84rem; color: var(--sf-muted); text-decoration: none; }
.sf-mega-sub a:hover { color: var(--sf-accent); }

/* Mobil: yatay şerit yerine açılır liste. */
@media (max-width: 900px) {
    .sf-mega-toggle { display: inline-flex; }
    .sf-mega-list {
        display: none; position: absolute; top: 100%; left: 0; z-index: 40;
        flex-direction: column; align-items: stretch; min-width: 240px; max-height: 70vh; overflow: auto;
        background: var(--sf-surface); border: 1px solid var(--sf-line);
        border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); padding: .4rem;
    }
    .sf-mega.is-open .sf-mega-list { display: flex; }
    /* Mobilde liste ÜST ÇUBUKTAN çıkıp yüzeye oturur; mürekkep de yüzeyin mürekkebi olmalı. */
    .sf-mega-list .sf-mega-link { color: var(--sf-ink); }
    .sf-mega-panel { position: static; display: block; border: 0; box-shadow: none; padding: .2rem 0 .4rem .7rem; }
    .sf-mega-cols { grid-template-columns: 1fr; gap: .4rem; }
    .sf-mega-sub { display: none; }   /* mobilde üçüncü seviye gizlenir; kategori sayfasında görünür */
}

/* ---------- soru-cevap + yorum fotoğrafı + teslimat (V3) ---------- */
.sf-qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.sf-qa-item { border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: .8rem; background: var(--sf-surface); }
.sf-qa-q, .sf-qa-a { display: flex; gap: .55rem; align-items: flex-start; }
.sf-qa-a { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--sf-line); }
.sf-qa-q > i, .sf-qa-a > i { flex: none; opacity: .7; line-height: 1.5; }
.sf-qa-body { margin: 0; font-size: .9rem; line-height: 1.55; }
.sf-qa-meta { font-size: .75rem; color: var(--sf-muted); }
.sf-qa-form { display: grid; gap: .5rem; margin-top: .8rem; max-width: 46rem; }

.sf-rv-photos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.sf-rv-photo { display: block; width: 72px; height: 72px; border-radius: var(--sf-radius-sm); overflow: hidden; border: 1px solid var(--sf-line); }
.sf-rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-rv-foot { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.sf-rv-helpful { font-size: .78rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-btn-sm { padding: .2rem .55rem; font-size: .8rem; }
.sf-btn.is-on { border-color: var(--sf-accent); color: var(--sf-accent); }

.sf-delivery { border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: .7rem .85rem; background: var(--sf-surface-2); display: grid; gap: .3rem; }
.sf-delivery-head { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.sf-delivery-date { font-size: 1rem; font-weight: 700; color: var(--sf-ink); }
.sf-delivery-note { font-size: .74rem; color: var(--sf-muted); }
.sf-hint { font-size: .75rem; color: var(--sf-muted); }

/* ---------- kampanya rozeti + ücretsiz kargo çubuğu (V4) ---------- */
.sf-card-campaign {
    position: absolute; left: .5rem; bottom: .5rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .25rem;
    max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: var(--sf-accent); color: var(--sf-accent-ink);
    font-size: .7rem; font-weight: 700; padding: .12rem .4rem; border-radius: var(--sf-radius-sm);
}

/* SEPET/ÖZET SATIRI KAMPANYA NOTU (V4).
   `.sf-card-campaign` yeniden KULLANILAMADI: o kural `position:absolute` ile kart görselinin üzerine
   oturur; tablo hücresinde konumlandırma bağlamı yoktur ve rozet satırın dışına taşardı. Renk yine
   AYNI token'lardan (--sf-accent / --sf-accent-ink) gelir, yani yeni bir renk TANIMLANMADI ve
   kontrast kapısı (StorefrontThemeContrastTests) aynı çifti doğrulamaya devam eder. */
.sf-line-campaigns { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.sf-line-campaign {
    display: inline-flex; align-items: center; gap: .25rem;
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: var(--sf-accent); color: var(--sf-accent-ink);
    font-size: .68rem; font-weight: 700; padding: .1rem .38rem; border-radius: var(--sf-radius-sm);
}
/* Üstü çizili liste fiyatı — indirim varken birim fiyatın ÜSTÜNDE ayrı satırda durur. */
.sf-line-list { display: block; font-size: .74rem; color: var(--sf-muted); text-decoration: line-through; }

/* GÜNÜN FIRSATLARI geri sayımı (V4) — şerit başlığının yanında. Saat/dakika YOKTUR: kampanya
   verisi GÜN bazlıdır (bkz. CampaignCountdown_Rules). "Son gün" vurgusu uyarı rengine geçer. */
.sf-strip-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.sf-countdown {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--sf-line); border-radius: 999px;
    padding: .1rem .55rem; font-size: .76rem; font-weight: 600;
    background: var(--sf-surface-2); color: var(--sf-muted);
}
/* "Son gün" vurgusu DENETLENEN çifti kullanır (--sf-on-warn / --sf-warn, bkz. StorefrontThemeContrastTests
   Pairs listesi). `--sf-warn`'ı METİN rengi olarak `--sf-surface-2` üstünde kullanmak cazipti, ama o çift
   denetim listesinde YOK: uyarı rengini açık bir tona çeken bir tema rozeti sessizce okunmaz yapardı. */
.sf-countdown.is-last { background: var(--sf-warn); color: var(--sf-on-warn); border-color: var(--sf-warn); }

.sf-freeship { display: grid; gap: .3rem; margin-block: .5rem; }
.sf-freeship-text { display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--sf-ink); }
.sf-freeship-bar { height: 6px; border-radius: 999px; background: var(--sf-surface-2); overflow: hidden; }
.sf-freeship-bar > span { display: block; height: 100%; background: var(--sf-accent); transition: width .25s ease; }
.sf-freeship.is-on .sf-freeship-bar > span { background: var(--sf-ok); }
.sf-freeship.is-on .sf-freeship-text { color: var(--sf-ok); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .sf-freeship-bar > span { transition: none; }
}

/* ---------- bildirim kutusu (V1) ----------
   Bootstrap'in `.alert-*` sınıfları vitrinden ÇIKARILDI: renkleri sabittir ve tema token'larını
   bilmez; koyu temalarda (darkops, premium) açık zemin + açık metin üretiyorlardı. Bu kurallar
   aynı görevi tema renkleriyle yapar. Zemin, durum renginin düşük yoğunluklu karışımıdır;
   metin ise doygun durum rengidir — ikisi de aynı token'dan türediği için tema değişince
   birlikte kayar ve kontrast korunur. */
.sf-alert {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .6rem .8rem; border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-line); background: var(--sf-surface-2); color: var(--sf-ink);
    font-size: .88rem; line-height: 1.45; margin-block: .5rem;
}
.sf-alert i { flex: none; line-height: 1.45; }
.sf-alert-ok {
    background: color-mix(in srgb, var(--sf-ok) 12%, var(--sf-surface));
    border-color: color-mix(in srgb, var(--sf-ok) 35%, var(--sf-line));
    color: var(--sf-ok);
}
/* `.sf-alert-err`, `.sf-alert-danger`ın İKİNCİ ADIDIR ve aynı kuralda tutulur (kopya kural DEĞİL).
   Neden var: onay, alt-kullanıcı ve teklif ekranları hata kutusunu `sf-alert-err` ile yazıyordu ve bu
   sınıf base.css'te HİÇ TANIMLI DEĞİLDİ — yani hata mesajı, hata gibi görünmeyen düz bir kutuda
   çıkıyordu. Görünümler tek tek düzeltilmek yerine ad burada tanınır: aynı hatayı yapan yeni bir
   görünüm de doğru görünür ve iki kural birbirinden ayrı düşemez. */
.sf-alert-danger, .sf-alert-err {
    background: color-mix(in srgb, var(--sf-danger) 12%, var(--sf-surface));
    border-color: color-mix(in srgb, var(--sf-danger) 35%, var(--sf-line));
    color: var(--sf-danger);
}
.sf-alert-warn {
    background: color-mix(in srgb, var(--sf-warn) 12%, var(--sf-surface));
    border-color: color-mix(in srgb, var(--sf-warn) 35%, var(--sf-line));
    color: var(--sf-warn);
}
.sf-alert-info {
    background: color-mix(in srgb, var(--sf-accent) 10%, var(--sf-surface));
    border-color: color-mix(in srgb, var(--sf-accent) 30%, var(--sf-line));
    color: var(--sf-ink);
}

@media (prefers-reduced-motion: reduce) {
    .sf-img-2 { transition: none; }
}

.sf-chip { border: 1px solid var(--sf-line); border-radius: 999px; padding: 0 .45rem; font-size: .7rem; line-height: 1.5; }
.sf-chip-ok { color: var(--sf-ok); border-color: color-mix(in srgb, var(--sf-ok) 35%, transparent); }
.sf-chip-info { color: var(--sf-accent-2); border-color: color-mix(in srgb, var(--sf-accent) 35%, transparent); }
.sf-chip-accent { color: var(--sf-accent-ink); background: var(--sf-accent); border-color: var(--sf-accent); }
.sf-chip-muted { color: var(--sf-muted); }
/* Bekleme/dikkat durumu (ör. sipariş "Onay Bekliyor") — iptalin gri tonundan AYRIŞIR (audit SF-STATUS-ONAYBEKLIYOR). */
.sf-chip-warn { color: var(--sf-warn); border-color: color-mix(in srgb, var(--sf-warn) 35%, transparent); }
/* Sıralama çubuğu JS-off submit yedeği: JS varken gizli (onchange gönderir), noscript ile görünür. */
.sf-sort-go { display: none; }

/* ---------- satır biçimi ---------- */
.sf-rows { display: flex; flex-direction: column; gap: .75rem; }
.sf-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: .75rem; }
.sf-row-media { position: relative; display: grid; place-items: center; height: 90px; border-radius: var(--sf-radius-sm); background: var(--sf-surface-2); overflow: hidden; }
.sf-row-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sf-row-buy { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
@media (max-width: 640px) { .sf-row { grid-template-columns: 80px minmax(0, 1fr); } .sf-row-buy { grid-column: 1 / -1; align-items: stretch; } }

/* ---------- tablo biçimi ---------- */
.sf-table-wrap { overflow-x: auto; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.sf-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sf-table th, .sf-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--sf-line); text-align: left; vertical-align: middle; }
.sf-table thead th { background: var(--sf-surface-2); font-weight: 600; color: var(--sf-muted); white-space: nowrap; }
.sf-table tbody tr:last-child td { border-bottom: 0; }
.sf-table a { color: var(--sf-ink); text-decoration: none; font-weight: 550; }
.sf-table .ta-r { text-align: right; }
.sf-table .sf-price { justify-content: flex-end; }
.sf-table .sf-atc { justify-content: flex-end; }

/* ---------- fiyat ---------- */
.sf-price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.sf-price-now { font-size: 1.2rem; font-weight: 800; color: var(--sf-accent-2); letter-spacing: var(--sf-tracking); }
.sf-price-old { font-size: .82rem; color: var(--sf-muted); text-decoration: line-through; }
.sf-price-off { font-size: .7rem; font-weight: 700; color: var(--sf-on-ok); background: var(--sf-ok); border-radius: 999px; padding: .05rem .4rem; }

/* ---------- sepete ekle ---------- */
/* V3 FIX: dar kartta (mobil) adet kutusu + "Sepete Ekle" tek satıra sığmayıp buton KARTTAN TAŞIP kırpılıyordu.
   flex-wrap ile buton yer kalmayınca alt satıra tam-genişlik iner; min-width:0 taşmayı kesin keser. */
.sf-atc { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.sf-qty { width: 68px; flex: 0 0 auto; border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-ink); border-radius: var(--sf-radius-sm); padding: .35rem .5rem; font: inherit; font-size: .88rem; text-align: center; }
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-ink); border-radius: var(--sf-radius-sm); padding: .4rem .8rem; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; }
/* v2 a11y: DOKUNMATİK cihazlarda 44px hedef (WCAG 2.5.5). Yalnız pointer:coarse → masaüstü yoğun B2B bozulmaz. */
@media (pointer: coarse) { .sf-btn, .sf-input, .sf-select { min-height: 44px; } }
.sf-btn:hover { border-color: var(--sf-accent); color: var(--sf-accent-2); }
.sf-btn-primary { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-accent-ink); flex: 1 1 8rem; min-width: 0; }
.sf-btn-primary:hover { background: var(--sf-accent-2); border-color: var(--sf-accent-2); color: var(--sf-on-accent-2); }
/* YIKICI eylem düğmesi (sipariş REDDET). Tanımlı olmadığı için "Reddet" düğmesi "Onayla"nın yanında
   nötr görünüyordu — iki karşıt eylem aynı ağırlıkta durunca yanlış tıklama davetiye olur. Renk çifti
   DENETLENEN çifttir (--sf-on-danger / --sf-danger, bkz. StorefrontThemeContrastTests.Pairs); sabit
   renk YAZILMAZ, aksi hâlde koyu temalarda okunmaz hâle gelirdi. */
.sf-btn-danger { background: var(--sf-danger); border-color: var(--sf-danger); color: var(--sf-on-danger); }
.sf-btn-danger:hover { background: var(--sf-danger); border-color: var(--sf-danger); color: var(--sf-on-danger); filter: brightness(1.1); }
.sf-btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- sayfalama / boş durum ---------- */
.sf-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 2rem; }
.sf-pager-info { font-size: .85rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-empty { text-align: center; color: var(--sf-muted); padding: 3.5rem 1rem; }
.sf-empty i { font-size: 2.6rem; display: block; margin-bottom: .6rem; opacity: .6; }

/* ---------- başlık şeridi ---------- */
/* Eylem satırı hizalayıcıları. Vitrinde Bootstrap yardımcı sınıfları (`d-flex`, `justify-content-*`)
   YÜKLÜ DEĞİLDİR — vitrin düzeni yalnız base.css + tema token'larından oluşur. Onay/alt-kullanıcı
   ekranları bu Bootstrap adlarını kullanıyordu ve ERP düzeninden vitrine alınınca düğme satırları
   hizasız kalacaktı. Mevcut `.sf-actions` (flex + hizala + boşluk) üzerine iki değiştirici yeter;
   yeni bir yardımcı-sınıf ailesi İCAT EDİLMEZ. */
.sf-actions-end { justify-content: flex-end; }
.sf-actions-between { justify-content: space-between; }
/* Onay kutusu + etiket satırı (alt-kullanıcı yetki listesi): etiket kalın DEĞİL, tıklanabilir. */
.sf-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; }
.sf-check input { width: auto; flex: none; transform: scale(1.2); }

.sf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.sf-head h1 { font-size: 1.35rem; font-weight: 750; margin: 0; letter-spacing: var(--sf-tracking); font-family: var(--sf-font-display); }
.sf-head .sf-count { font-size: .82rem; color: var(--sf-muted); }

/* ---------- hero (B2C temaları) ---------- */
.sf-hero { background: linear-gradient(120deg, var(--sf-accent-2), var(--sf-accent)); color: var(--sf-accent-ink); padding: 3rem 0; }
.sf-hero h1 { font-family: var(--sf-font-display); font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.02em; text-wrap: balance; }
.sf-hero p { margin: 0; opacity: .9; font-size: 1.02rem; max-width: 55ch; }

/* ---------- altbilgi ---------- */
.sf-footer { border-top: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-muted); font-size: .84rem; padding: 1.25rem 0; margin-top: auto; }
.sf-footer-inner { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.sf-footer a { color: inherit; }

/* ---------- form / giriş kartı ---------- */
.sf-auth { display: grid; place-items: center; padding: 3rem 1rem; }
.sf-auth-card { width: 100%; max-width: 420px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: 2rem; box-shadow: var(--sf-shadow); }
.sf-auth-card h1 { font-size: 1.3rem; font-weight: 750; margin: 0 0 .25rem; font-family: var(--sf-font-display); }
.sf-auth-card .sf-sub { color: var(--sf-muted); font-size: .88rem; margin-bottom: 1.4rem; }
.sf-field { margin-bottom: 1rem; }
.sf-field label { display: block; font-size: .8rem; color: var(--sf-muted); margin-bottom: .25rem; }
.sf-field .sf-input { height: 44px; }
.sf-submit { width: 100%; height: 44px; }

/* ---------- ürün detay ---------- */
.sf-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
/* audit next-pdp: SABİT 360px + overflow:hidden, çok görselli üründe galeri thumb şeridini + ana görselin üstünü
   KIRPIYORDU (~432px içerik 360px kutuda). height:auto + min-height → tek görsel/placeholder 360px kalır,
   galeri (ana 360 + thumb 62) kırpılmadan büyür. Sabit yükseklik zaten .sf-gallery-main'de. */
.sf-detail-media { position: relative; display: grid; place-items: center; height: auto; min-height: 360px; background: var(--sf-surface-2); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; }
.sf-detail-media .sf-card-ph { font-size: 4rem; }
.sf-detail-body { display: flex; flex-direction: column; gap: .75rem; }
.sf-detail-title { font-family: var(--sf-font-display); font-size: 1.6rem; font-weight: 750; margin: 0; letter-spacing: var(--sf-tracking); text-wrap: balance; }
.sf-detail-price .sf-price-now { font-size: 1.75rem; }
.sf-detail-desc { white-space: pre-line; color: var(--sf-muted); margin: 0; max-width: 65ch; }
.sf-detail .sf-atc { max-width: 340px; }
@media (max-width: 800px) { .sf-detail { grid-template-columns: 1fr; gap: 1.25rem; } .sf-detail-media { min-height: 260px; } }

/* ---------- sepet ---------- */
.sf-panel { background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: var(--sf-pad); }
.sf-panel + .sf-panel { margin-top: 1rem; }
.sf-cart-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sf-cart-table th, .sf-cart-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--sf-line); text-align: left; vertical-align: middle; }
.sf-cart-table thead th { color: var(--sf-muted); font-weight: 600; font-size: .8rem; }
.sf-cart-table .ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.sf-cart-table tfoot td { font-weight: 750; border-bottom: 0; }
.sf-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; align-items: end; }
.sf-form-grid .sf-span-all { grid-column: 1 / -1; }

/* erişilebilirlik: klavye odağı daima görünür */
.sf-btn:focus-visible, .sf-input:focus-visible, .sf-act:focus-visible, .sf-brand:focus-visible, .sf-catlist a:focus-visible {
    outline: 2px solid var(--sf-accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sf-card { transition: none; }
    .sf-card:hover { transform: none; }
}

/* =========================================================================
 * E1 — Keşif & ürün deneyimi bileşenleri
 * Sözleşme aynen geçerli: burada YALNIZ yapı/davranış; renk ve biçim --sf-*'tan.
 * Bu blok 20 temanın hepsinde çalışır; tema dosyaları isterse ince ayar yapar.
 * ========================================================================= */

/* ---------- arama önerisi (otomatik tamamlama) ---------- */
.sf-search { position: relative; }
.sf-suggest {
    position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px);
    background: var(--sf-surface); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm); box-shadow: var(--sf-shadow);
    overflow: hidden; max-height: 320px; overflow-y: auto;
}
.sf-suggest[hidden] { display: none; }
.sf-suggest-item {
    display: flex; justify-content: space-between; gap: .75rem; align-items: baseline;
    padding: .5rem .75rem; font-size: .87rem; color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--sf-line);
}
.sf-suggest-item:last-child { border-bottom: 0; }
.sf-suggest-item:hover, .sf-suggest-item:focus-visible { background: var(--sf-surface-2); color: var(--sf-accent-2); }
.sf-suggest-item code { color: var(--sf-muted); font-size: .78rem; flex: none; }
/* V2 — üç bölümlü öneri kutusu: bölüm başlığı + sayı rozeti. */
.sf-suggest-head {
    padding: .35rem .7rem .15rem; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted);
}
.sf-suggest-n { margin-left: auto; font-size: .72rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-suggest-item.is-cat span:first-child, .sf-suggest-item.is-brand span:first-child { font-weight: 600; }

/* ---------- faset grupları ---------- */
.sf-facet-group { display: flex; flex-direction: column; gap: .4rem; }
.sf-facet-title { font-size: .78rem; font-weight: 700; color: var(--sf-muted); letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.sf-facet-opts { display: flex; flex-direction: column; gap: .25rem; max-height: 240px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.sf-facet-opt { display: flex; align-items: center; gap: .45rem; font-size: .86rem; cursor: pointer; }
.sf-facet-opt input { accent-color: var(--sf-accent); flex: none; }
.sf-facet-count { color: var(--sf-muted); font-size: .78rem; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.sf-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.sf-price-range .sf-input { min-width: 0; font-variant-numeric: tabular-nums; }
.sf-facet-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Üst şerit yerleşiminde fasetler yan yana akar; sol rayda alt alta yığılır. */
.sf-facets-top { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.sf-facets-top .sf-facet-group { min-width: 170px; }
.sf-facets-top .sf-facet-opts { max-height: 150px; }
.sf-facets-rail { display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- sıralama çubuğu ---------- */
.sf-sortbar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.sf-sort { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--sf-muted); }
.sf-sort .sf-select { width: auto; min-width: 170px; }

/* ---------- etkin filtre çipleri ---------- */
.sf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.sf-chip-filter {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; font-size: .8rem; border-radius: 999px;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line); color: var(--sf-ink);
}
.sf-chip-x { color: var(--sf-muted); text-decoration: none; line-height: 1; font-weight: 700; }
.sf-chip-x:hover, .sf-chip-x:focus-visible { color: var(--sf-danger); }

/* ---------- ürün galerisi ---------- */
.sf-gallery { display: flex; flex-direction: column; gap: .6rem; }
.sf-gallery-main {
    position: relative; display: grid; place-items: center; height: 360px;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius); overflow: hidden;
}
.sf-gallery-thumbs { display: flex; gap: .45rem; flex-wrap: wrap; }
.sf-thumb {
    width: 62px; height: 62px; padding: 0; display: grid; place-items: center; overflow: hidden;
    background: var(--sf-surface); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm); cursor: pointer;
}
.sf-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sf-thumb:hover, .sf-thumb:focus-visible { border-color: var(--sf-accent); }
.sf-thumb.is-active { border-color: var(--sf-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-accent) 25%, transparent); }
@media (max-width: 800px) { .sf-gallery-main { height: 260px; } }

/* ---------- varyant seçici ---------- */
.sf-variants { display: flex; flex-direction: column; gap: .6rem; }
.sf-variant-axis { display: flex; flex-direction: column; gap: .3rem; }
.sf-variant-label { font-size: .78rem; font-weight: 700; color: var(--sf-muted); letter-spacing: .04em; text-transform: uppercase; }
.sf-variant-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.sf-variant-opt {
    padding: .32rem .7rem; font-size: .85rem; text-decoration: none;
    color: var(--sf-ink); background: var(--sf-surface);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm);
}
.sf-variant-opt:hover, .sf-variant-opt:focus-visible { border-color: var(--sf-accent); color: var(--sf-accent-2); }
.sf-variant-opt.is-active { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-accent-ink); font-weight: 600; }

/* ---------- kademe fiyat / özellik tabloları ---------- */
.sf-tiers, .sf-specs { width: 100%; border-collapse: collapse; font-size: .87rem; }
.sf-tiers th, .sf-tiers td, .sf-specs th, .sf-specs td {
    padding: .45rem .6rem; border-bottom: 1px solid var(--sf-line); text-align: left; vertical-align: top;
}
.sf-tiers thead th, .sf-specs th { color: var(--sf-muted); font-weight: 600; font-size: .8rem; }
.sf-tiers td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.sf-specs th { width: 40%; font-weight: 600; }

/* ---------- detay sayfası bölümleri ---------- */
.sf-section { margin-top: 2rem; }
.sf-section-title {
    font-family: var(--sf-font-display); font-size: 1.05rem; font-weight: var(--sf-title-weight);
    letter-spacing: var(--sf-tracking); margin: 0 0 .75rem;
}
.sf-meta-list { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; padding: 0; list-style: none; }
.sf-meta-item { font-size: .82rem; color: var(--sf-muted); }
.sf-meta-item strong { color: var(--sf-ink); font-weight: 600; }
.sf-badge-out { background: color-mix(in srgb, var(--sf-danger) 12%, transparent); color: var(--sf-danger); }

/* devre dışı sayfalama bağlantısı */
.is-disabled { opacity: .45; pointer-events: none; }

.sf-thumb:focus-visible, .sf-variant-opt:focus-visible, .sf-suggest-item:focus-visible, .sf-chip-x:focus-visible {
    outline: 2px solid var(--sf-accent); outline-offset: 2px;
}

/* =========================================================================
 * E2 — Sepet & checkout bileşenleri (adım göstergesi, para özeti, kupon,
 * miktar düzenleme, adres seçimi, hukuki onay).
 * ========================================================================= */

/* ---------- adım göstergesi ---------- */
.sf-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sf-step {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; border-radius: 999px; font-size: .84rem;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line); color: var(--sf-muted);
}
.sf-step-done { color: var(--sf-ok); border-color: color-mix(in srgb, var(--sf-ok) 35%, var(--sf-line)); }
.sf-step-active {
    background: var(--sf-accent); border-color: var(--sf-accent);
    color: var(--sf-accent-ink); font-weight: 600;
}

/* ---------- para özeti ---------- */
.sf-money { display: flex; flex-direction: column; gap: .35rem; }
.sf-money-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.sf-money-label { color: var(--sf-muted); }
.sf-money-value { font-variant-numeric: tabular-nums; }
.sf-money-total {
    border-top: 1px solid var(--sf-line); margin-top: .35rem; padding-top: .5rem;
    font-size: 1.05rem; font-weight: 750;
}
.sf-money-total .sf-money-label { color: var(--sf-ink); }
.sf-money-note { font-size: .78rem; color: var(--sf-muted); margin-top: -.15rem; }

/* ---------- kupon ---------- */
.sf-coupon { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sf-coupon .sf-input { max-width: 220px; }
.sf-coupon-applied {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .6rem; border-radius: var(--sf-radius-sm);
    background: color-mix(in srgb, var(--sf-ok) 12%, transparent);
    color: var(--sf-ok); font-weight: 600; font-size: .85rem;
}

/* ---------- sepet miktar düzenleme ---------- */
.sf-qty-form { display: inline-flex; gap: .3rem; align-items: center; }
.sf-qty-input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- V6: miktar kuralı / koli ile sipariş ----------
   RENK YALNIZ --sf-* TOKEN'INDAN. Sabit bir hex, koyu temalarda okunamayan bir uyarı üretir ve
   StorefrontThemeContrastTests'i kırar. */
.sf-qty-unit {
    flex: 0 0 auto; border: 1px solid var(--sf-line); background: var(--sf-surface);
    color: var(--sf-ink); border-radius: var(--sf-radius-sm); padding: .35rem .4rem;
    font: inherit; font-size: .82rem;
}
.sf-qty-hint { flex: 1 1 100%; font-size: .72rem; color: var(--sf-muted); }
.sf-line-pack { color: var(--sf-muted); }
/* Checkout kapısının engellediği satır — yalnız renk DEĞİL, kenarlık da değişir: rengi ayırt
   edemeyen kullanıcı için tek başına renk erişilebilir bir gösterge değildir. */
.sf-row-invalid > td { background: color-mix(in srgb, var(--sf-danger) 8%, transparent); }
.sf-line-invalid { margin-top: .25rem; font-size: .75rem; color: var(--sf-danger); }
.sf-qty-adjusted { margin: .35rem 0 0; padding-inline-start: 1.1rem; font-variant-numeric: tabular-nums; }

/* ---------- V6 Aşama 3: vitrin yüzeyi (adet kutusu · KDV ikili · fiyat rozeti · vade) ----------
   RENK YALNIZ --sf-* TOKEN'INDAN (sabit hex → StorefrontThemeContrastTests kırılır). */

/* Adet kutusu + artır/azalt. Düğmeler sunucuda `hidden` basılır; betik yüklenince görünür olur. */
.sf-qty-box { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.sf-qty-step {
    border: 1px solid var(--sf-line); background: var(--sf-surface-2); color: var(--sf-ink);
    border-radius: var(--sf-radius-sm); padding: 0 .5rem; font: inherit; font-weight: 700;
    line-height: 1; cursor: pointer;
}
.sf-qty-step:hover { border-color: var(--sf-accent); color: var(--sf-accent-2); }
.sf-qty-step[hidden] { display: none; }
.sf-qty-box .sf-qty { border-radius: 0; }
.sf-qty-box .sf-qty-step:first-child { border-end-end-radius: 0; border-start-end-radius: 0; }
.sf-qty-box .sf-qty-step:last-child { border-end-start-radius: 0; border-start-start-radius: 0; }

/* Kuralın insan okur özeti ("En az 12 adet · 6'nın katları"). */
.sf-qty-rule { flex: 1 1 100%; font-size: .72rem; color: var(--sf-muted); }

/* KDV'nin diğer tabanı — ikincil bilgi olduğu için küçük ve soluk. */
.sf-price-vat { font-size: .75rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }

/* Fiyat kaynağı rozeti (sözleşme / size özel / kademe). */
.sf-price-source { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.sf-badge-price {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .1rem .45rem;
    border: 1px solid transparent;
}
.sf-badge-contract {
    color: var(--sf-on-ok); background: var(--sf-ok);
}
.sf-badge-tier {
    color: var(--sf-accent-2); background: color-mix(in srgb, var(--sf-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--sf-accent) 40%, transparent);
}
/* Sözleşmeli kademe satırı — renge EK OLARAK kenarlık: rengi ayırt edemeyen kullanıcı için
   tek başına renk erişilebilir bir gösterge değildir. */
.sf-tier-contract > td { background: color-mix(in srgb, var(--sf-ok) 10%, transparent); }
.sf-tier-contract > td:first-child { border-inline-start: 3px solid var(--sf-ok); }
.sf-tier-note { margin: .5rem 0 0; font-size: .76rem; color: var(--sf-muted); }

/* Müşterinin kendi stok kodu (ürün detayı, başlığın altı). */
.sf-detail-custcode { margin: -.25rem 0 .5rem; font-size: .8rem; color: var(--sf-muted); }

/* Checkout özetindeki vade satırı. */
.sf-term-summary {
    display: flex; gap: .5rem; align-items: center; margin-top: .75rem;
    padding: .55rem .75rem; border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm); background: var(--sf-surface-2);
    font-size: .85rem; color: var(--sf-ink);
}

/* ---------- adres seçimi ---------- */
.sf-addr-list { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sf-addr {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .7rem .85rem; border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm); background: var(--sf-surface); cursor: pointer;
}
.sf-addr:hover { border-color: var(--sf-accent); }
.sf-addr:has(input:checked) {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-accent) 20%, transparent);
}
.sf-addr input { accent-color: var(--sf-accent); margin-top: .2rem; flex: none; }
.sf-addr-label { font-size: .89rem; line-height: 1.45; }

/* ---------- hukuki onay + ödeme ---------- */
.sf-legal {
    display: flex; gap: .55rem; align-items: flex-start;
    padding: .75rem .85rem; border-radius: var(--sf-radius-sm);
    background: var(--sf-surface-2); border: 1px solid var(--sf-line);
    font-size: .86rem; line-height: 1.5;
}
.sf-legal-check { accent-color: var(--sf-accent); margin-top: .15rem; flex: none; }
.sf-pay-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

.sf-qty-input:focus-visible, .sf-addr:focus-within, .sf-legal-check:focus-visible {
    outline: 2px solid var(--sf-accent); outline-offset: 2px;
}

/* =========================================================================
 * E3 — Hesap merkezi & favori bileşenleri.
 * ========================================================================= */

/* ---------- favori (kalp) ---------- */
.sf-fav-form { display: inline-flex; margin: 0; }
.sf-fav {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: color-mix(in srgb, var(--sf-surface) 85%, transparent);
    border: 1px solid var(--sf-line); border-radius: 999px;
    color: var(--sf-muted); font-size: 1rem; line-height: 1;
}
.sf-fav:hover { border-color: var(--sf-danger); color: var(--sf-danger); }
.sf-fav[disabled] { opacity: .5; cursor: default; }
.sf-fav-on { color: var(--sf-danger); border-color: var(--sf-danger); }

/* Kart üzerinde sağ üst köşe. Kart medyası konumlandırma bağlamı olmadığı için kartın kendisi kullanılır. */
.sf-card { position: relative; }
.sf-card > .sf-fav-form { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.sf-row-buy .sf-fav-form { align-self: flex-end; }

/* ---------- hesap merkezi ---------- */
.sf-acc-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.25rem; }
.sf-acc-tab {
    padding: .4rem .85rem; border-radius: 999px; font-size: .86rem; text-decoration: none;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line); color: var(--sf-ink);
}
.sf-acc-tab:hover { border-color: var(--sf-accent); color: var(--sf-accent-2); }
.sf-acc-tab.is-active {
    background: var(--sf-accent); border-color: var(--sf-accent);
    color: var(--sf-accent-ink); font-weight: 600;
}

/* ---------- sipariş zaman çizelgesi ---------- */
.sf-timeline { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.sf-tl-item { display: grid; grid-template-columns: 26px 1fr; gap: .6rem; padding-bottom: 1rem; position: relative; }
.sf-tl-item:not(:last-child)::before {
    content: ""; position: absolute; left: 12px; top: 22px; bottom: 0;
    width: 2px; background: var(--sf-line);
}
.sf-tl-dot {
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line); color: var(--sf-muted); font-size: .8rem;
}
.sf-tl-done .sf-tl-dot { background: var(--sf-ok); border-color: var(--sf-ok); color: var(--sf-on-ok); }
.sf-tl-current .sf-tl-dot { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-accent-ink); }
.sf-tl-cancel .sf-tl-dot { background: var(--sf-danger); border-color: var(--sf-danger); color: var(--sf-on-danger); }
.sf-tl-body { display: flex; flex-direction: column; gap: .1rem; }
.sf-tl-title { font-size: .9rem; font-weight: 600; }
.sf-tl-meta { font-size: .78rem; color: var(--sf-muted); }

.sf-fav:focus-visible, .sf-acc-tab:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

/* =========================================================================
 * E4 — B2B güç araçları (hızlı sipariş hata satırları, finans ekranları).
 * ========================================================================= */

/* Hızlı sipariş önizlemesinde ÇÖZÜLEMEYEN satır. Renk tek başına anlam taşımaz
   (erişilebilirlik): satırda ayrıca metinle hata nedeni de yazılıdır. */
.sf-row-error { background: color-mix(in srgb, var(--sf-danger) 8%, transparent); }
.sf-row-error td { color: var(--sf-danger); }
.sf-chip-danger {
    background: color-mix(in srgb, var(--sf-danger) 12%, transparent);
    color: var(--sf-danger);
}

/* Finans özet kartları */
.sf-fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.sf-fin-card {
    background: var(--sf-surface); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius); padding: .9rem 1rem;
}
.sf-fin-label { font-size: .78rem; color: var(--sf-muted); }
.sf-fin-value { font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.sf-fin-value.is-negative { color: var(--sf-danger); }

/* =========================================================================
 * E6 — İçerik & merchandising (banner, koleksiyon şeridi, bilgi sayfası, yorumlar).
 * ========================================================================= */

/* ---------- ana sayfa banner ---------- */
.sf-banners { display: grid; gap: var(--sf-gap); margin-bottom: 1.5rem; }
.sf-banner {
    position: relative; display: grid; align-items: end; min-height: 200px;
    border-radius: var(--sf-radius); overflow: hidden;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line);
}
.sf-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-banner-body {
    position: relative; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem;
    align-items: flex-start;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
    color: var(--sf-on-overlay);
}
.sf-banner:not(:has(.sf-banner-img)) .sf-banner-body { background: none; color: var(--sf-ink); }
.sf-banner-title { margin: 0; font-size: 1.4rem; font-weight: 750; letter-spacing: var(--sf-tracking); }
.sf-banner-sub { margin: 0; font-size: .92rem; opacity: .92; max-width: 60ch; }
@media (min-width: 768px) { .sf-banner { min-height: 260px; } }

/* ---------- bilgi sayfası ---------- */
.sf-page { max-width: 78ch; margin-inline: auto; }
.sf-page-title { font-family: var(--sf-font-display); font-size: 1.6rem; font-weight: 750; margin: 0 0 1rem; }
.sf-page-h2 { font-size: 1.1rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.sf-page-p { margin: 0 0 .75rem; line-height: 1.65; white-space: pre-line; }
.sf-page-list { margin: 0 0 .5rem 1.1rem; padding: 0; }
.sf-page-hr { border: 0; border-top: 1px solid var(--sf-line); margin: 1.25rem 0; }

/* ---------- yorumlar ---------- */
.sf-rv-summary { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.sf-rv-avg { text-align: center; }
.sf-rv-avg-num { font-size: 2.1rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.sf-rv-avg-max { color: var(--sf-muted); font-size: .9rem; }
.sf-rv-count { font-size: .8rem; color: var(--sf-muted); }
.sf-rv-dist { flex: 1 1 220px; min-width: 200px; margin: 0; padding: 0; list-style: none; }
.sf-rv-dist-row { display: grid; grid-template-columns: 1.2rem 1fr 2rem; gap: .45rem; align-items: center; font-size: .8rem; }
.sf-rv-dist-star { color: var(--sf-muted); text-align: right; }
.sf-rv-dist-n { color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-rv-bar { display: block; height: 7px; border-radius: 999px; background: var(--sf-surface-2); overflow: hidden; }
.sf-rv-bar-fill { display: block; height: 100%; background: var(--sf-accent); }

/* ---------- yıldız derecelendirme (audit SF-CARD-RATING / SF-PDP-RATING-SUMMARY / SF-REVIEW-STARS) ----------
   Paylaşılan _StarRating partial'ı bu sınıfları basar: dolu/yarım yıldız amber, boş yıldız soluk. Sayısal
   değer erişilebilir ad olarak taşınır (role=img + aria-label), böylece hem tarama kolay hem ekran-okur doğru. */
.sf-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; font-size: .9rem; }
.sf-stars .bi { display: inline-block; }
.sf-star-on { color: var(--sf-warn); }
.sf-star-off { color: color-mix(in srgb, var(--sf-muted) 45%, transparent); }
.sf-rating { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sf-rating-num { font-weight: 650; font-size: .85rem; font-variant-numeric: tabular-nums; }
.sf-rating-count { color: var(--sf-muted); font-size: .8rem; text-decoration: none; }
.sf-rating-count:hover { color: var(--sf-accent); }
.sf-card-rating { margin: .1rem 0 .15rem; }   /* kartta meta ile fiyat arası */

.sf-rv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.sf-rv-item { border-top: 1px solid var(--sf-line); padding-top: .75rem; }
.sf-rv-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.sf-rv-stars { font-variant-numeric: tabular-nums; }
.sf-rv-author { color: var(--sf-muted); }
.sf-rv-date { color: var(--sf-muted); margin-inline-start: auto; font-size: .78rem; }
.sf-rv-title { font-weight: 650; margin-top: .2rem; }
.sf-rv-body { margin: .25rem 0 0; line-height: 1.6; white-space: pre-line; max-width: 70ch; }
.sf-rv-form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .6rem; max-width: 480px; }

/* =========================================================================
 * V5 — KİŞİSELLEŞTİRME: karşılaştırma düğmesi, alt çubuk, karşılaştırma tablosu.
 *
 * SÖZLEŞME: burada YALNIZ --sf-* token'ları kullanılır; hiçbir sabit renk (#hex/rgb) yazılmaz —
 * aksi hâlde 20 temanın bir kısmında bileşen sessizce okunmaz hâle gelir
 * (StorefrontThemeContrastTests bu kuralı kilitler).
 *
 * Kullanılan renk çiftleri DENETLENEN çiftlerdir:
 *   --sf-ink / --sf-surface · --sf-muted / --sf-surface · --sf-accent-ink / --sf-accent
 * "Seçili" ve "farklı satır" vurguları için accent rengi ZEMİN olarak kullanılır ve mürekkep
 * kendi token'ından (--sf-accent-ink) gelir; accent'i METİN rengi olarak açık bir zeminde
 * kullanmak denetim listesinde OLMAYAN bir çift üretirdi.
 * ========================================================================= */

/* --- karşılaştırma aç/kapa düğmesi (kart + ürün detayı) --- */
.sf-cmp-form { display: inline-flex; margin: 0; }
.sf-cmp {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 1px solid var(--sf-line); border-radius: 999px;
    padding: .22rem .6rem; cursor: pointer;
    font: inherit; font-size: .76rem; font-weight: 600; line-height: 1.2;
    color: var(--sf-muted);
}
.sf-cmp:hover { color: var(--sf-ink); border-color: var(--sf-accent); }
.sf-cmp:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
/* SEÇİLİ hâl: zemin accent, mürekkep kendi token'ından. */
.sf-cmp-on { background: var(--sf-accent); color: var(--sf-accent-ink); border-color: var(--sf-accent); }
.sf-cmp-on:hover { color: var(--sf-accent-ink); }

/* --- alt sabit karşılaştırma çubuğu ---
   position:fixed — kullanıcı katalogda gezinirken seçim sayısı daima görünür kalmalı.
   z-index mega menünün altında kalacak kadar düşük tutulur (menü açıkken çubuk menüyü örtmez). */
.sf-cmpbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
    padding: .6rem 1rem;
    background: var(--sf-surface); border-top: 1px solid var(--sf-line);
    box-shadow: var(--sf-shadow);
}
.sf-cmpbar-count { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--sf-ink); }
.sf-cmpbar-actions { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sf-cmpbar-clear { margin: 0; }
/* Çubuk sayfanın son satırını örtmesin: gövdenin altına çubuk yüksekliği kadar boşluk bırakılır. */
body.sf-body:has(.sf-cmpbar) .sf-main { padding-bottom: 5.5rem; }

/* --- karşılaştırma tablosu ---
   Yatay kaydırma KABINDADIR (.sf-table-wrap → overflow-x:auto); min-width sayesinde dar ekranda
   tablo kabı kaydırılır, SAYFA GÖVDESİ yatay kaymaz. */
.sf-cmp-table { min-width: 640px; }
.sf-cmp-table th, .sf-cmp-table td { vertical-align: top; }
.sf-cmp-rowhead { width: 11rem; min-width: 9rem; color: var(--sf-muted); font-weight: 600; }
.sf-cmp-col { min-width: 10rem; text-align: left; }
.sf-cmp-media { display: block; height: 110px; background: var(--sf-surface-2); border-radius: var(--sf-radius-sm); overflow: hidden; margin-bottom: .4rem; }
.sf-cmp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-cmp-name { display: block; color: var(--sf-ink); text-decoration: none; font-weight: 650; font-size: .9rem; line-height: 1.3; }
.sf-cmp-name:hover { text-decoration: underline; }
.sf-cmp-code { display: block; font-size: .75rem; color: var(--sf-muted); font-weight: 400; }
.sf-cmp-actions { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }

/* AYNI olan satır soluk, FARKLI olan satır vurgulu: karşılaştırmanın tek amacı farkı görmektir. */
.sf-cmp-same td, .sf-cmp-same .sf-cmp-rowhead { color: var(--sf-muted); }
.sf-cmp-diff td { color: var(--sf-ink); font-weight: 600; }
.sf-cmp-diff .sf-cmp-rowhead { color: var(--sf-ink); }
/* Renk TEK BAŞINA anlam taşımasın diye farklı satırın başlığında metinsel bir rozet de vardır. */
.sf-cmp-diff-tag {
    display: inline-block; margin-inline-start: .35rem;
    background: var(--sf-accent); color: var(--sf-accent-ink);
    border-radius: 999px; padding: .02rem .4rem; font-size: .66rem; font-weight: 700;
}

/* =====================================================================
   V5 — "HABER VER" KUTUSU (stok / fiyat alarmı)
   RENK YALNIZ --sf-* TOKEN'DAN. Sabit renk (#hex/rgb) yazılırsa
   StorefrontThemeContrastTests kırılır; ayrıca yalnız DENETLENEN çiftler
   kullanılır (metin --sf-ink/--sf-muted, zemin --sf-surface-2).
   ===================================================================== */
.sf-alertbox {
    margin: 1.4rem 0;
    padding: 1rem 1.1rem;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
}
.sf-alertbox-title { margin: 0 0 .25rem; font-size: 1.02rem; font-weight: 700; color: var(--sf-ink); }
.sf-alertbox-lead { margin: 0 0 .8rem; font-size: .86rem; color: var(--sf-muted); }
/* Rıza alınan yerde aydınlatma metni de bulunur; küçük ama GİZLENMEZ. */
.sf-alertbox-legal { margin: .7rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--sf-muted); }
.sf-alertbox-done {
    display: flex; align-items: center; gap: .4rem;
    margin: .5rem 0; font-size: .86rem; color: var(--sf-ink);
}

/* Form dar ekranda tek sütuna iner (grid yok — akış yeterli, JS gerekmez). */
.sf-alert-form { display: flex; flex-direction: column; gap: .45rem; margin: .6rem 0 0; max-width: 32rem; }
.sf-alert-label { font-size: .8rem; font-weight: 600; color: var(--sf-ink); }
.sf-alert-input {
    width: 100%; max-width: 100%;
    padding: .45rem .6rem;
    font: inherit; font-size: .88rem;
    color: var(--sf-ink); background: var(--sf-surface);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm);
}
/* Girişli kullanıcıda adres sunucudan gelir ve DEĞİŞTİRİLEMEZ; salt-okur olduğu görsel olarak da bellidir. */
.sf-alert-input[readonly] { background: var(--sf-surface-2); color: var(--sf-muted); }
.sf-alert-consent {
    display: flex; align-items: flex-start; gap: .45rem;
    font-size: .8rem; line-height: 1.45; color: var(--sf-muted);
}
.sf-alert-consent input { margin-top: .18rem; flex: none; }
.sf-alert-submit { align-self: flex-start; }

/* ---------------------------------------------------------------- V7 Aşama 2: onay ekranı
   Onay/alt-kullanıcı ekranları V7 Aşama 1'de vitrin temasına alındı; bu dalga kademe listesi ve
   gerekçe alanını ekledi. Yalnız --sf-* token kullanılır (StorefrontThemeContrastTests kapısı). */

/* Çok satırlı not alanı: .sf-field .sf-input tek satırlık girdiler için 44px sabit yükseklik
   uyguluyor; textarea'da bu, üç satırlık gerekçe kutusunu tek satıra ezerdi. */
.sf-field textarea.sf-input { height: auto; min-height: 5.5rem; resize: vertical; }

/* Genel rozet — onay kademesi ilerlemesi ("2/3") ve "sırada" işareti.
   Vitrinde yalnız ROZET VARYANTLARI tanımlıydı (.sf-badge-price/-contract/-tier); taban sınıf yoktu ve
   `class="sf-badge"` hiçbir kural eşleştirmiyordu. Renk kontrastı denetlenen --sf-* çiftinden gelir. */
.sf-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem;
    color: var(--sf-accent-2); background: color-mix(in srgb, var(--sf-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--sf-accent) 40%, transparent);
    white-space: nowrap;
}

/* Uyarı kutusundaki "neler değişti" listesi. Vitrinde Bootstrap YÜKLÜ DEĞİLDİR; list-unstyled yok. */
.sf-list-plain { list-style: none; margin: 0; padding: 0; }
.sf-list-plain > li { margin: .15rem 0; }

/* ---------------------------------------------------------------- V7 Aşama 3: adına sipariş + bütçe
   Yalnız --sf-* token kullanılır (StorefrontThemeContrastTests kapısı); sabit renk YOKTUR. */

/* ADINA-SİPARİŞ ŞERİDİ — her sayfada, ekranın üstüne YAPIŞIK.
   Neden sticky: temsilci uzun bir katalog sayfasında aşağı indiğinde "müşteri adına işlem
   yapıyorum" bilgisini kaybetmemelidir; yanlışlıkla müşterinin adına iş yapıldığının fark
   edilmemesi, bu özelliğin en büyük operasyonel riskidir.
   Renk çifti --sf-on-warn/--sf-warn'dır ve kontrast testi tarafından ZATEN denetlenmektedir
   (".sf-cart-badge" satırı) — dikkat çeker ama okunur. */
.sf-onbehalf {
    /* audit next-mobile: eskiden top:0 z-index:40 → yapışkan tema nav'ıyla (aynı top:0) ÜST ÜSTE biniyordu
       (nav'ı ya da kritik "X için sipariş veriyorsunuz" uyarısını gizliyordu). Nav'ın ALTINA kaydır + nav'dan
       düşük z-index: iki yapışkan da pinlenince şerit nav'ın hemen altında durur, örtüşmez. */
    position: sticky; top: var(--sf-nav-h, 0); z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap;
    margin: 0 0 .9rem; padding: .55rem .85rem;
    background: var(--sf-warn); color: var(--sf-on-warn);
    border-radius: var(--sf-radius-sm);
    font-size: .85rem; font-weight: 600;
    box-shadow: var(--sf-shadow);
}
.sf-onbehalf-text { display: inline-flex; align-items: center; gap: .4rem; }
.sf-onbehalf-form { margin: 0; }
/* Çıkış düğmesi şeridin ÜSTÜNDE durur; zemin şerit rengidir, bu yüzden metin de --sf-on-warn'dır. */
.sf-onbehalf-exit {
    display: inline-flex; align-items: center; gap: .35rem;
    font: inherit; font-size: .8rem; font-weight: 700;
    color: var(--sf-on-warn); background: transparent;
    border: 1px solid var(--sf-on-warn); border-radius: 999px;
    padding: .2rem .7rem; cursor: pointer;
}
.sf-onbehalf-exit:hover { background: color-mix(in srgb, var(--sf-on-warn) 18%, transparent); }
.sf-onbehalf-exit:focus-visible { outline: 2px solid var(--sf-on-warn); outline-offset: 2px; }

/* BÜTÇE ÇUBUĞU — hesap merkezinde ve checkout özetinde aynı görünür (tek kural, iki ekran). */
.sf-budget { margin: .6rem 0 0; }
.sf-budget-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    font-size: .82rem; color: var(--sf-muted);
}
.sf-budget-head strong { color: var(--sf-ink); font-variant-numeric: tabular-nums; }
/* Ray + dolgu. Dolgu genişliği sunucudan gelen yüzdedir (istemcide hesap YOK). */
.sf-budget-rail {
    margin-top: .3rem; height: .5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--sf-ink) 10%, var(--sf-surface-2));
    overflow: hidden;
}
.sf-budget-fill { height: 100%; border-radius: 999px; background: var(--sf-ok); }
/* Aşımda renk değişir: çubuk zaten %100'de kırpıldığı için tek başına "aştım" bilgisini veremez. */
.sf-budget.is-over .sf-budget-fill { background: var(--sf-danger); }
.sf-budget-note { margin-top: .3rem; font-size: .78rem; color: var(--sf-muted); }
.sf-budget.is-over .sf-budget-note { color: var(--sf-danger); font-weight: 600; }

/* A3 — KALAN KREDİ BANDI (_EnterpriseBanners, _Flash içinde her sayfada). Salt-okunur bir bilgi
   şerididir; renkler yalnız --sf-* token'larından gelir (ContrastTests kapısı). */
.sf-credit-band {
    display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem;
    /* A5 boşluk normalizasyonu: kardeş enterprise şeritleriyle (.sf-overdue / .sf-basis-note) AYNI
       dip boşluğu → her tema kendi --sf-gap'ini kullanır, ritim 20 temada tutarlı olur (sabit .9rem
       yerine token). Renk/palet DEĞİŞMEZ; ContrastTests etkilenmez. */
    margin: 0 0 var(--sf-gap); padding: .5rem .85rem;
    background: var(--sf-surface-2); color: var(--sf-ink);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm);
    font-size: .82rem;
}
.sf-credit-band-item { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.sf-credit-band-item strong { color: var(--sf-muted); font-weight: 600; }
.sf-credit-band-unlimited { color: var(--sf-ok); font-weight: 700; }

/* =========================================================================
 * V8 — BAYİ FİNANS PANELİ (yaşlandırma · risk göstergesi · ciro · hedef/prim).
 *
 * RENK KURALI: burada SABİT renk YOKTUR; her şey --sf-* token'ından gelir. Kullanılan çiftler
 * (--sf-on-warn/--sf-warn, --sf-on-danger/--sf-danger, --sf-ok/--sf-surface) StorefrontThemeContrastTests
 * tarafından DENETLENEN çiftlerdir; yeni bir çift uydurulmadı — denetlenmeyen bir çift, bir tema
 * token'ını değiştirdiğinde sessizce okunmaz hâle gelirdi.
 * ========================================================================= */

/* ---------- vadesi geçmiş borç uyarı şeridi (hesap merkezi + finans girişi, TEK kural) ---------- */
.sf-overdue {
    display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap;
    margin: 0 0 var(--sf-gap);
    padding: .8rem 1rem; border-radius: var(--sf-radius);
    background: var(--sf-warn); color: var(--sf-on-warn);
}
.sf-overdue-icon { font-size: 1.15rem; line-height: 1.35; flex: none; }
.sf-overdue-body { flex: 1 1 14rem; min-width: 0; }
.sf-overdue-amount {
    display: inline-block; margin-inline-end: .4rem;
    font-size: 1.1rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.sf-overdue-note { margin-top: .2rem; font-size: .8rem; opacity: .9; font-variant-numeric: tabular-nums; }
/* Şeridin üzerindeki düğme ŞERİT RENGİNDEDİR; metin de bu yüzden --sf-on-warn'dır (denetlenen çift). */
.sf-overdue-link {
    flex: none; align-self: center;
    background: transparent; color: var(--sf-on-warn); border-color: var(--sf-on-warn);
}
.sf-overdue-link:hover { background: color-mix(in srgb, var(--sf-on-warn) 18%, transparent); color: var(--sf-on-warn); }

/* ---------- ölçüm çubuğu (limit kullanımı · kova payı · ciro dilimi · kademe ilerlemesi) ----------
   TEK bileşen, dört ekran. Ayrı ayrı yazılsaydı biri güncellenip diğerleri farklı görünürdü.
   Genişlik DAİMA sunucudan gelen yüzdedir; istemcide hesap YOKTUR. */
.sf-meter {
    display: block; width: 100%; min-width: 4rem; height: .45rem;
    border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--sf-ink) 10%, var(--sf-surface-2));
}
.sf-meter-lg { height: .6rem; }
.sf-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--sf-accent); }
.sf-meter-fill.is-ok { background: var(--sf-ok); }
.sf-meter-fill.is-warn { background: var(--sf-warn); }
.sf-meter-fill.is-danger { background: var(--sf-danger); }
.sf-meter-fill.is-accent { background: var(--sf-accent); }
.sf-meter-pct { font-size: .74rem; color: var(--sf-muted); font-variant-numeric: tabular-nums; }

.sf-meter-block { margin: .7rem 0 0; }
.sf-meter-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--sf-muted); margin-bottom: .3rem;
}
.sf-meter-head strong { color: var(--sf-ink); font-variant-numeric: tabular-nums; }
/* Aşımda metin ŞARTTIR: çubuk %100'de kırpıldığı için tek başına "aştım" bilgisini veremez. */
.sf-meter-note { margin-top: .3rem; font-size: .78rem; font-weight: 600; color: var(--sf-danger); }

/* ---------- taban açıklaması ("prim tabanı ciro" gibi tanım notları) ---------- */
.sf-basis-note {
    margin: 0 0 var(--sf-gap); font-size: .82rem; color: var(--sf-muted);
    display: flex; align-items: flex-start; gap: .4rem;
}

/* ---------- yaşlandırma / ciro / kademe tabloları ----------
   Sayı sütunları hizalansın diye tabular-nums; yatay kaydırma KABINDADIR (.sf-table-wrap). */
.sf-aging-table td, .sf-aging-table th,
.sf-turnover-table td, .sf-turnover-table th,
.sf-tier-table td, .sf-tier-table th { font-variant-numeric: tabular-nums; }
.sf-aging-share, .sf-turnover-bar-col { min-width: 8rem; width: 22%; }
.sf-aging-notdue > td { background: color-mix(in srgb, var(--sf-ok) 7%, transparent); }
.sf-tier-current > td { background: color-mix(in srgb, var(--sf-accent) 10%, transparent); font-weight: 650; }
.sf-tier-current > td:first-child { border-inline-start: 3px solid var(--sf-accent); }
.sf-neg { color: var(--sf-danger); }
.sf-fin-value-sm { font-size: 1rem; }

/* MOBİL: kova/kademe tabloları dar ekranda da okunabilir kalsın — pay çubuğu sütunu gizlenmez,
   daraltılır (bilgi kaybı olmaz; yüzde metni zaten çubuğun yanındadır). */
@media (max-width: 640px) {
    .sf-aging-share, .sf-turnover-bar-col { min-width: 5rem; }
    .sf-overdue-amount { font-size: 1rem; }
    .sf-overdue-link { align-self: flex-start; }
}

/* ============================================================================
 * FAZ S — Enterprise++ ortak bileşenleri (additive; token-tabanlı, tema-agnostik)
 * skeleton · sepet çekmecesi · kargo/hız rozeti · mobil sticky CTA · toast · flaş
 * ==========================================================================*/

/* --- Skeleton (yükleniyor iskeleti) --- */
.sf-skel {
    background: linear-gradient(90deg, var(--sf-skeleton-base) 25%, var(--sf-skeleton-shine) 37%, var(--sf-skeleton-base) 63%);
    background-size: 400% 100%;
    animation: sf-skel-shimmer var(--sf-skeleton-speed) ease-in-out infinite;
    border-radius: var(--sf-radius-sm);
}
.sf-skel-line { height: .8rem; margin: .35rem 0; }
.sf-skel-media { height: var(--sf-media-h); border-radius: var(--sf-radius); }
.sf-skel-title { height: 1rem; width: 80%; }
.sf-skel-price { height: 1.1rem; width: 45%; }
@keyframes sf-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sf-skel { animation: none; } }

/* --- Sepet çekmecesi / yan panel (sfOpenDrawer ile) --- */
.sf-scrim {
    position: fixed; inset: 0; background: var(--sf-scrim);
    opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: var(--sf-z-drawer);
}
.sf-scrim.sf-open { opacity: 1; visibility: visible; }
.sf-drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: min(var(--sf-drawer-w), 94vw);
    max-width: 94vw; background: var(--sf-drawer-bg); box-shadow: var(--sf-drawer-shadow);
    transform: translateX(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
    z-index: calc(var(--sf-z-drawer) + 1); display: flex; flex-direction: column;
}
.sf-scrim.sf-open .sf-drawer { transform: translateX(0); }
.sf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sf-pad); border-bottom: 1px solid var(--sf-line); }
.sf-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sf-pad); }
.sf-drawer-foot { border-top: 1px solid var(--sf-line); padding: var(--sf-pad); }
@media (prefers-reduced-motion: reduce) { .sf-drawer { transition: none; } }

/* --- Kart rozetleri: kargo / hız --- */
.sf-badge-ship { background: var(--sf-badge-ship-bg); color: var(--sf-badge-ship-ink); }
.sf-badge-fast { background: var(--sf-badge-fast-bg); color: var(--sf-badge-fast-ink); }
.sf-badge-ship, .sf-badge-fast {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px; line-height: 1.4;
}
/* B1 — kart rozet satırı (kargo/hız) */
.sf-card-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }

/* B1 — renk faseti swatch'ları */
.sf-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-swatch { position: relative; cursor: pointer; line-height: 0; }
.sf-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-swatch-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid var(--sf-line);
    background: var(--sf-surface); font-size: .6rem; font-weight: 600; color: var(--sf-ink-soft);
    box-shadow: inset 0 0 0 2px var(--sf-surface); transition: box-shadow .15s ease, transform .1s ease;
}
.sf-swatch.is-on .sf-swatch-dot,
.sf-swatch input:focus-visible + .sf-swatch-dot { box-shadow: 0 0 0 2px var(--sf-accent); transform: scale(1.05); }
.sf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* B1 — sonsuz kaydırma çıpası (görünmez işaretçi + yükleniyor iskeleti) */
.sf-infinite { min-height: 1px; }
.sf-infinite-skel { margin-top: 1rem; }

/* --- Mobil sticky CTA (PDP) --- */
.sf-sticky-cta {
    position: sticky; bottom: 0; z-index: 20; background: var(--sf-sticky-bg);
    box-shadow: var(--sf-sticky-shadow); padding: .6rem var(--sf-pad);
    display: none;
}
@media (max-width: 768px) { .sf-sticky-cta { display: flex; gap: .5rem; align-items: center; } }

/* --- Toast (sfToast) --- */
.sf-toast-wrap { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: var(--sf-z-toast); display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.sf-toast {
    background: var(--sf-toast-bg); color: var(--sf-toast-ink); padding: .6rem 1rem; border-radius: var(--sf-radius-sm);
    box-shadow: var(--sf-shadow); font-size: .9rem; opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease; max-width: min(92vw, 420px);
}
.sf-toast.sf-show { opacity: 1; transform: translateY(0); }

/* --- Flaş geri-sayım rozeti (hh:mm:ss; storefront-flash.js doldurur) --- */
.sf-flash { background: var(--sf-flash-bg); color: var(--sf-flash-ink); font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; }
/* B5 — flaş süresi dolunca soluklaşır (istemci is-ended ekler). */
.sf-flash.is-ended { opacity: .55; }
/* B5 — ana sayfadan fırsatlar merkezine giriş noktası (ortalanmış). */
.sf-deals-cta { text-align: center; margin-block: 1rem; }

/* a11y: yalnız ekran-okuyucu canlı bölge (sfLiveRegion) */
.sf-sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================ B2 — PDP cila + mini sepet çekmecesi */

/* --- Genel yardımcı düğme biçimleri (B2) --- */
.sf-btn-block { display: flex; width: 100%; justify-content: center; }
.sf-btn-accent { background: var(--sf-accent); color: var(--sf-accent-ink); border-color: var(--sf-accent); }
.sf-btn-accent:hover { filter: brightness(.95); }
.sf-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border: 0; background: transparent; color: var(--sf-ink); border-radius: var(--sf-radius-sm); cursor: pointer;
}
.sf-icon-btn:hover { background: var(--sf-surface-2); }

/* --- Galeri: masaüstü büyüteç (transform-origin ile yakınlaştırma) --- */
.sf-gallery-main { position: relative; overflow: hidden; }
.sf-gallery-main.sf-zoom-ready { cursor: zoom-in; }
.sf-gallery-main.sf-zoom-ready img { transition: transform .15s ease; }
.sf-gallery-main.is-zooming img { transform: scale(2.2); }
.sf-zoom-hint {
    position: absolute; right: .5rem; bottom: .5rem; z-index: 2; display: none;
    width: 1.8rem; height: 1.8rem; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sf-surface) 82%, transparent); color: var(--sf-ink);
    border: 1px solid var(--sf-line); border-radius: 999px; font-size: .85rem; pointer-events: none;
}
.sf-gallery-main.sf-zoom-ready .sf-zoom-hint { display: inline-flex; }
.sf-gallery-main.is-zooming .sf-zoom-hint { opacity: 0; }

/* --- Galeri lightbox (dokunmatik birincil; tıkla-büyüt) --- */
.sf-lightbox {
    position: fixed; inset: 0; z-index: calc(var(--sf-z-drawer) + 20);
    background: rgba(2, 6, 23, .9); display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.sf-lightbox.sf-open { display: flex; }
.sf-lightbox-img { max-width: 96vw; max-height: 90vh; object-fit: contain; border-radius: var(--sf-radius-sm); }
.sf-lightbox-close {
    position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.sf-lightbox-close:hover { background: rgba(255, 255, 255, .24); }

/* --- Varyant renk swatch bağlantısı (B1 token'ları üzerine) --- */
.sf-swatch-link { display: inline-flex; text-decoration: none; }
.sf-swatch-link .sf-swatch-dot { width: 1.9rem; height: 1.9rem; }
.sf-swatch-link.is-on .sf-swatch-dot { box-shadow: 0 0 0 2px var(--sf-accent); transform: scale(1.05); }

/* --- PDP gösterge taksit notu --- */
.sf-installment-note {
    border: 1px dashed var(--sf-line); border-radius: var(--sf-radius); padding: .6rem .8rem;
    background: var(--sf-surface-2); display: grid; gap: .2rem; margin: .5rem 0;
}
.sf-installment-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: var(--sf-ink); }
.sf-installment-example { font-size: .85rem; color: var(--sf-ink); }
.sf-installment-hint { font-size: .72rem; color: var(--sf-muted); }

/* --- Statik paylaş bağlantıları --- */
.sf-share { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.sf-share-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--sf-muted); margin-right: .2rem; }
.sf-share-link {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border: 1px solid var(--sf-line); border-radius: 999px; color: var(--sf-ink); text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.sf-share-link:hover { background: var(--sf-surface-2); border-color: var(--sf-accent); color: var(--sf-accent); }

/* --- Yapışkan mobil CTA içeriği --- */
.sf-sticky-grow { flex: 1 1 auto; justify-content: center; }

/* --- Mini sepet çekmecesi (drawer içeriği) --- */
.sf-cart-drawer .sf-empty-sm { padding: 2rem 1rem; }
.sf-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.sf-mini-line { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .6rem; align-items: start; padding-bottom: .75rem; border-bottom: 1px solid var(--sf-line); }
.sf-mini-line:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-mini-thumb { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: var(--sf-radius-sm); border: 1px solid var(--sf-line); background: var(--sf-surface-2); }
.sf-mini-info { min-width: 0; display: grid; gap: .3rem; }
.sf-mini-name { font-size: .85rem; font-weight: 600; color: var(--sf-ink); line-height: 1.3; }
.sf-mini-meta { font-size: .8rem; color: var(--sf-ink); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.sf-mini-actions { display: flex; align-items: center; gap: .35rem; }
.sf-mini-qty { display: inline-flex; align-items: center; gap: .25rem; }
.sf-mini-qty .sf-qty-input { width: 3.4rem; }
.sf-mini-total { font-size: .85rem; white-space: nowrap; }
.sf-mini-sum { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; font-size: 1rem; }
.sf-mini-cta { display: flex; gap: .5rem; }
.sf-mini-cta .sf-btn { flex: 1 1 auto; justify-content: center; }

/* --- B4: Sadakat (puan kazan notu · sepet bakiye · puan-harca) --- */
.sf-loyalty-earn, .sf-loyalty-cart, .sf-loyalty-cart-earn {
    display: flex; align-items: center; gap: .4rem; margin: .5rem 0;
    font-size: .85rem; color: var(--sf-ink);
}
.sf-loyalty-earn { font-weight: 600; }
.sf-loyalty-earn .bi, .sf-loyalty-cart .bi, .sf-loyalty-cart-earn .bi { color: var(--sf-accent); }
.sf-loyalty-cart, .sf-loyalty-cart-earn {
    border: 1px dashed var(--sf-line); border-radius: var(--sf-radius);
    padding: .5rem .7rem; background: var(--sf-surface-2);
}
.sf-loyalty-redeem { display: grid; gap: .3rem; margin: .25rem 0; }
.sf-loyalty-redeem label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.sf-loyalty-redeem label .bi { color: var(--sf-accent); }
.sf-loyalty-expiring { margin-top: .6rem; }
.sf-loyalty-expiring .sf-list { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .8rem; color: var(--sf-muted); display: grid; gap: .2rem; }