/* V1 — SAYDAM RENKLER TOKEN'A BAGLANDI.
   Once bu dosyada rgba(R,G,B,A) literalleri vardi ve R,G,B degerleri asagidaki
   token'larin kanallarinin ELLE KOPYASIYDI. Gorsel sonuc dogruydu ama token degisince
   (or. tenant vurgu rengini degistirince) bu efektler ESKI RENKTE kaliyordu: hover
   tenti, kenarlik parlamasi ve gradyanlar markadan KOPUYORDU. color-mix ayni saydamligi
   uretir ama rengi token'dan okur; base.css bu deseni zaten kullaniyor. */
/* ============================================================
   B2C / hero — "Vitrin Hero"
   Canli mercan-turuncu vurgu, sicak beyaz notr, yuvarlak koseler, ferah.
   ============================================================ */

:root {
    /* V1: zemine karsi WCAG 4.5:1 saglayan murekkep (marka rengi degismedi) */
    --sf-on-accent-2: #2a1c17;
    /* V1: zemine karsi WCAG 4.5:1 saglayan murekkep (marka rengi degismedi) */
    --sf-on-warn: #000000;
    --sf-bg: #fffaf6;
    --sf-surface: #ffffff;
    --sf-surface-2: #fff2ea;
    --sf-ink: #2a1c17;
    --sf-muted: #7a6259;
    --sf-line: #f0dcd1;

    --sf-accent: #cf4825;  /* V2: beyaz mürekkeple 4.5:1 için aynı tonda koyulaştırıldı */
    --sf-accent-2: #ff8a4c;
    --sf-accent-ink: #ffffff;  /* V2: koyuya çekilmişti; tema bu token'ı --sf-accent DIŞINDA da kullandığı için (nav, sekme, tablo başlığı) koyu mürekkep oralarda KOYU-ÜSTÜNE-KOYU üretiyordu. Ton yerine vurgu rengi koyulaştırıldı. */
    --sf-ok: #1b875a;
    --sf-warn: #b8760a;
    --sf-danger: #cc2c2c;

    --sf-radius: 20px;
    --sf-radius-sm: 12px;
    --sf-gap: 22px;
    --sf-pad: 22px;
    --sf-shadow: 0 6px 20px rgba(126, 62, 36, .08);
    --sf-shadow-hover: 0 14px 34px rgba(126, 62, 36, .16);

    --sf-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --sf-font-display: "Segoe UI Semibold", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
    --sf-title-weight: 800;
    --sf-tracking: -.015em;

    --sf-container: 1200px;
    --sf-media-h: 210px;
    --sf-nav-h: 68px;

    /* --- tema iskeleti renkleri (.sf-t-hero-*) ---
       Asagidaki token'lar daha once iskelet kurallarina sabit yazilmis
       renk literallerinin TA KENDISIDIR; gorsel sonuc degismez. */

    /* yapiskan nav: yariseffaf beyaz yuzey, uzerinde metin tasir */
    --sf-nav-bg: rgba(255, 255, 255, .94);

    /* hero bandi: mercan degrade uc noktalari + uzerindeki metin renkleri */
    --sf-hero-band-from: #ff9c5e;
    --sf-hero-band-to: #d63c1c;
    --sf-hero-band-ink-soft: #fff5ef;

    /* fiyat vurgusu (kart fiyati + detay fiyati) */
    --sf-price-ink: #c0350f;

    /* koyu footer: zemin --sf-ink'ten okunur, metin/link renkleri burada */
    --sf-footer-ink: #f6e6dd;
    --sf-footer-link-ink: #ffd2bd;

    /* dekoratif dolgular: ust serit noktasi + hero blob'lari.
       Yariseffaftirlar ama yine de birer DOLGU rengidir, golge degil. */
    --sf-ticker-dot-fill: rgba(255, 255, 255, .65);
    --sf-hero-blob-fill: rgba(255, 255, 255, .16);
    --sf-hero-blob-fill-2: rgba(255, 255, 255, .24);
    --sf-hero-blob-fill-warm: rgba(255, 240, 232, .34);
    --sf-hero-blob-border: rgba(255, 255, 255, .28);
}

/* ---------- ust ince serit ---------- */
.sf-t-hero-ticker {
    background: linear-gradient(90deg, var(--sf-accent) 0%, var(--sf-accent-2) 100%);
    height: 6px;
}

.sf-t-hero-ticker-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 6px;
}

.sf-t-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sf-ticker-dot-fill);
}

/* ---------- nav ---------- */
.sf-t-hero .sf-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--sf-nav-bg);
    border-bottom: 1px solid var(--sf-line);
    box-shadow: 0 2px 14px rgba(126, 62, 36, .05);
}

.sf-t-hero .sf-brand {
    font-family: var(--sf-font-display);
    font-weight: 800;
    letter-spacing: var(--sf-tracking);
}

.sf-t-hero .sf-act {
    border-radius: 999px;
}

.sf-t-hero .sf-act-btn,
.sf-t-hero .sf-btn {
    border-radius: 999px;
}

.sf-t-hero .sf-btn-primary {
    background: linear-gradient(135deg, var(--sf-accent) 0%, var(--sf-accent-2) 100%);
    border-color: transparent;
    color: var(--sf-accent-ink);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--sf-accent) 28%, transparent);
}

.sf-t-hero .sf-btn-primary:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--sf-accent) 34%, transparent);
}

.sf-t-hero .sf-cart-badge {
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
}

/* ---------- hero bandi ---------- */
.sf-t-hero-band {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    padding: 0;
    background: radial-gradient(120% 140% at 12% 0%, var(--sf-hero-band-from) 0%, var(--sf-accent) 46%, var(--sf-hero-band-to) 100%);
    color: var(--sf-accent-ink);
}

.sf-t-hero-band-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-gap);
    padding: 64px 0 78px;
}

.sf-t-hero-copy {
    max-width: 640px;
}

.sf-t-hero-band h1 {
    font-family: var(--sf-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    margin: 0 0 .5em;
    color: var(--sf-accent-ink);
    text-shadow: 0 2px 10px rgba(120, 30, 8, .22);
}

.sf-t-hero-band p {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    color: var(--sf-hero-band-ink-soft);
    max-width: 52ch;
}

/* dekoratif blob'lar */
.sf-t-hero-art {
    position: relative;
    flex: 0 0 auto;
    width: 240px;
    height: 200px;
    display: block;
}

.sf-t-hero-blob {
    position: absolute;
    display: block;
    border-radius: 50% 42% 55% 45%;
    background: var(--sf-hero-blob-fill);
    border: 2px solid var(--sf-hero-blob-border);
}

.sf-t-hero-blob-a {
    width: 150px;
    height: 150px;
    right: 10px;
    top: 6px;
}

.sf-t-hero-blob-b {
    width: 92px;
    height: 92px;
    right: 128px;
    bottom: 4px;
    background: var(--sf-hero-blob-fill-2);
}

.sf-t-hero-blob-c {
    width: 54px;
    height: 54px;
    right: 8px;
    bottom: 14px;
    background: var(--sf-hero-blob-fill-warm);
}

/* alt yumusak gecis */
.sf-t-hero-wave {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -46px;
    height: 92px;
    z-index: 1;
    background: var(--sf-bg);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

@media (max-width: 860px) {
    .sf-t-hero-art { display: none; }
    .sf-t-hero-band-inner { padding: 46px 0 60px; }
}

/* ---------- ana govde ---------- */
.sf-t-hero-main {
    padding-top: 34px;
}

/* sayfa ici ikinci hero (view'dan gelirse) sade kalsin */
.sf-t-hero-main .sf-hero {
    background: var(--sf-surface-2);
    color: var(--sf-ink);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
}

.sf-t-hero-main .sf-hero .sf-hero-title {
    color: var(--sf-ink);
}

.sf-t-hero-main .sf-hero p {
    color: var(--sf-muted);
}

/* ---------- ust filtre seridi ---------- */
.sf-t-hero .sf-facets-top {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    padding: var(--sf-pad);
}

.sf-t-hero .sf-input,
.sf-t-hero .sf-select {
    border-radius: 999px;
    border-color: var(--sf-line);
    background: var(--sf-surface);
}

.sf-t-hero .sf-search-btn {
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sf-accent) 0%, var(--sf-accent-2) 100%);
    color: var(--sf-accent-ink);
    border-color: transparent;
}

/* ---------- kart izgarasi ---------- */
.sf-t-hero .sf-grid {
    gap: var(--sf-gap);
}

.sf-t-hero .sf-card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sf-t-hero .sf-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-hover);
}

.sf-t-hero .sf-card-media {
    background: var(--sf-surface-2);
}

.sf-t-hero .sf-card-title {
    font-family: var(--sf-font-display);
    font-weight: 700;
    letter-spacing: var(--sf-tracking);
}

.sf-t-hero .sf-card-meta {
    color: var(--sf-muted);
}

.sf-t-hero .sf-chip {
    border-radius: 999px;
}

.sf-t-hero .sf-chip-accent {
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
    border-color: transparent;
}

.sf-t-hero .sf-price-now {
    font-family: var(--sf-font-display);
    font-weight: 800;
    color: var(--sf-price-ink);
}

.sf-t-hero .sf-price-off {
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
    border-radius: 999px;
}

.sf-t-hero .sf-qty {
    border-radius: 999px;
}

/* ---------- panel / tablo / detay ---------- */
.sf-t-hero .sf-panel,
.sf-t-hero .sf-auth-card,
.sf-t-hero .sf-detail {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
}

.sf-t-hero .sf-table th {
    background: var(--sf-surface-2);
    color: var(--sf-ink);
}

.sf-t-hero .sf-detail-title {
    font-family: var(--sf-font-display);
    font-weight: 800;
    letter-spacing: var(--sf-tracking);
}

.sf-t-hero .sf-detail-price {
    color: var(--sf-price-ink);
}

.sf-t-hero .sf-empty {
    background: var(--sf-surface-2);
    border: 1px dashed var(--sf-line);
    border-radius: var(--sf-radius);
    color: var(--sf-muted);
}

.sf-t-hero .sf-pager a,
.sf-t-hero .sf-pager span {
    border-radius: 999px;
}

/* ---------- footer ---------- */
.sf-t-hero-footer {
    position: relative;
    margin-top: 56px;
    background: var(--sf-ink);
    color: var(--sf-footer-ink);
    border-top: 0;
}

.sf-t-hero-footcap {
    height: 8px;
    background: linear-gradient(90deg, var(--sf-accent) 0%, var(--sf-accent-2) 100%);
}

.sf-t-hero-footer a {
    color: var(--sf-footer-link-ink);
}

.sf-t-hero-footer a:hover {
    /* beyaz mürekkep zaten --sf-accent-ink olarak tanimli; yeni token acilmadi */
    color: var(--sf-accent-ink);
}

/* ---------- hareket tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
    .sf-t-hero .sf-card,
    .sf-t-hero .sf-card:hover {
        transition: none;
        transform: none;
    }
}