/* ============================================================
   B2C / hero — "Vitrin Hero"
   Canli mercan-turuncu vurgu, sicak beyaz notr, yuvarlak koseler, ferah.
   ============================================================ */

:root {
    --sf-bg: #fffaf6;
    --sf-surface: #ffffff;
    --sf-surface-2: #fff2ea;
    --sf-ink: #2a1c17;
    --sf-muted: #7a6259;
    --sf-line: #f0dcd1;

    --sf-accent: #f4552b;
    --sf-accent-2: #ff8a4c;
    --sf-accent-ink: #ffffff;
    --sf-ok: #1c8a5c;
    --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;
}

/* ---------- 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: rgba(255, 255, 255, .65);
}

/* ---------- nav ---------- */
.sf-t-hero .sf-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    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 rgba(244, 85, 43, .28);
}

.sf-t-hero .sf-btn-primary:hover {
    box-shadow: 0 10px 22px rgba(244, 85, 43, .34);
}

.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%, #ff9c5e 0%, #f4552b 46%, #d63c1c 100%);
    color: #fff;
}

.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: #fff;
    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: #fff5ef;
    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: rgba(255, 255, 255, .16);
    border: 2px solid rgba(255, 255, 255, .28);
}

.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: rgba(255, 255, 255, .24);
}

.sf-t-hero-blob-c {
    width: 54px;
    height: 54px;
    right: 8px;
    bottom: 14px;
    background: rgba(255, 240, 232, .34);
}

/* 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 h1 {
    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: #c0350f;
}

.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: #c0350f;
}

.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: #2a1c17;
    color: #f6e6dd;
    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: #ffd2bd;
}

.sf-t-hero-footer a:hover {
    color: #ffffff;
}

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