/* ============================================================
   BAKED BAGS — BİLEŞENLER (token-only)
============================================================ */
@layer components {

    /* ───────── a11y: içeriğe-geç bağlantısı (odakta görünür · WCAG 2.4.1) ───────── */
    .bb-skip {
        position: fixed;
        top: -60px;
        left: 12px;
        z-index: 9999;
        background: var(--bb-cacao-700);
        color: #fff;
        padding: 10px 16px;
        border-radius: var(--bb-r-sm);
        font-weight: 800;
        text-decoration: none;
        transition: top var(--bb-dur-fast)
    }

    .bb-skip:focus {
        top: 12px;
        outline: 3px solid var(--bb-gold-400);
        outline-offset: 2px
    }

    /* ───────── Butonlar ───────── */
    .bb-btn {
        --_bg: var(--bb-teal-500);
        --_fg: #fff;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--bb-2);
        font-weight: 800;
        font-size: var(--bb-text-s);
        letter-spacing: .02em;
        padding: 14px 26px;
        border-radius: var(--bb-r-pill);
        overflow: hidden;
        max-width: 100%;
        background: var(--_bg);
        color: var(--_fg);
        white-space: nowrap;
        transition: transform var(--bb-dur-fast) var(--bb-ease-standard),
            box-shadow var(--bb-dur-base) var(--bb-ease-standard),
            background var(--bb-dur-base) var(--bb-ease-standard);
        box-shadow: var(--bb-e2);
    }

    .bb-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--bb-e3)
    }

    .bb-btn:active {
        transform: translateY(0) scale(.98)
    }

    /* Uzun buton metni dar ekranda (≤420px) sarsın — nowrap+overflow:hidden ile büyüyüp kabı aşıp
   yatay-taşma yapmasın (ör. WhatsApp Destek, Lab Sonuçlarını Görüntüle). Global = tüm sayfalar. */
    @media (max-width:420px) {
        .bb-btn {
            white-space: normal
        }
    }

    .bb-btn--primary {
        --_bg: var(--bb-teal-500)
    }

    .bb-btn--primary:hover {
        --_bg: var(--bb-teal-600);
        box-shadow: var(--bb-glow-teal)
    }

    .bb-btn--primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bb-grad-sheen);
        transform: translateX(-120%);
        transition: transform var(--bb-dur-cine) var(--bb-ease-standard)
    }

    .bb-btn--primary:hover::after {
        transform: translateX(120%)
    }

    .bb-btn--gold {
        --_bg: var(--bb-grad-gold);
        --_fg: var(--bb-cacao-900)
    }

    .bb-btn--gold:hover {
        box-shadow: var(--bb-glow-gold)
    }

    .bb-btn--dark {
        --_bg: var(--bb-cacao-700);
        --_fg: var(--bb-ivory-50)
    }

    .bb-btn--dark:hover {
        --_bg: var(--bb-cacao-600)
    }

    .bb-btn--ghost {
        --_bg: transparent;
        --_fg: var(--bb-cacao-600);
        box-shadow: none;
        border: 1.5px solid var(--bb-border)
    }

    .bb-btn--ghost:hover {
        --_bg: var(--bb-cacao-600);
        --_fg: #fff;
        box-shadow: var(--bb-e2)
    }

    .bb-btn--on-dark.bb-btn--ghost {
        --_fg: var(--bb-ivory-50);
        border-color: rgba(255, 255, 255, .28)
    }

    .bb-btn--on-dark.bb-btn--ghost:hover {
        --_bg: var(--bb-ivory-50);
        --_fg: var(--bb-cacao-900)
    }

    .bb-btn--lg {
        padding: 17px 34px;
        font-size: var(--bb-text-m)
    }

    .bb-btn--sm {
        padding: 10px 18px;
        font-size: var(--bb-text-xs)
    }

    .bb-btn--block {
        display: flex;
        width: 100%
    }

    /* ───────── Rozet / pill / chip ───────── */
    .bb-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--bb-text-xs);
        font-weight: 800;
        padding: 6px 12px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-cacao-600);
        color: #fff;
        letter-spacing: .04em
    }

    .bb-badge--gold {
        background: var(--bb-grad-gold);
        color: var(--bb-cacao-900)
    }

    .bb-badge--teal {
        background: var(--bb-teal-500);
        color: #fff
    }

    .bb-badge--soft {
        background: rgba(63, 180, 180, .14);
        color: var(--bb-teal-700)
    }

    .bb-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-surface-raised);
        color: var(--bb-on-light);
        box-shadow: var(--bb-e1);
        font-weight: 700;
        font-size: var(--bb-text-s)
    }

    .bb-pill svg,
    .bb-pill .ico {
        color: var(--bb-teal-600)
    }

    .bb-stars {
        color: var(--bb-star);
        letter-spacing: 2px;
        font-size: var(--bb-text-s)
    }

    /* ───────── Duyuru ticker ───────── */
    .bb-ticker {
        background: var(--bb-cacao-800);
        color: var(--bb-on-dark);
        overflow: hidden;
        white-space: nowrap;
        border-bottom: 1px solid var(--bb-border-gold)
    }

    .bb-ticker__track {
        display: flex;
        width: max-content;
        animation: bb-ticker 38s linear infinite;
        will-change: transform
    }

    /* Duraklatma yalnız gerçek imleçli (hover yapabilen) cihazlarda — dokunmatikte
   tap ile :hover yapışıp barın donmasını engeller */
    @media (hover:hover) and (pointer:fine) {
        .bb-ticker:hover .bb-ticker__track {
            animation-play-state: paused
        }
    }

    .bb-ticker__item {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px clamp(20px, 3vw, 46px);
        font-size: var(--bb-text-xs);
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .bb-ticker__item .dot {
        color: var(--bb-gold-500)
    }

    /* ───────── Zam geri sayımı ───────── */
    .bb-hike {
        display: none;
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(80% 120% at 0% 50%, rgba(63, 180, 180, .28), transparent 55%),
            radial-gradient(70% 100% at 100% 50%, rgba(201, 162, 75, .22), transparent 50%),
            linear-gradient(90deg, #1a0a04 0%, #2a1408 50%, #0f1f1f 100%);
        color: #fff;
        border-bottom: 1px solid rgba(201, 162, 75, .35);
    }

    .bb-hike[aria-hidden="false"] {
        display: block;
    }

    .bb-hike.is-on {
        animation: bb-hike-in .55s var(--bb-ease-emphasized, cubic-bezier(.34, 1.56, .64, 1)) both;
    }

    .bb-hike.is-leaving {
        display: block !important;
        animation: bb-hike-out .32s var(--bb-ease-standard, cubic-bezier(.22, 1, .36, 1)) both;
    }

    .bb-hike__bar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #5eead4, #f0d78c, transparent);
        background-size: 200% 100%;
        animation: bb-shimmer-x 2.8s linear infinite;
    }

    .bb-hike__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: clamp(12px, 3vw, 28px);
        flex-wrap: wrap;
        padding-block: 14px;
    }

    .bb-hike__eye {
        margin: 0 0 4px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bb-gold-400, #c9a24b);
    }

    .bb-hike__title {
        margin: 0;
        font-family: var(--bb-font-display);
        font-size: clamp(18px, 2.6vw, 24px);
        letter-spacing: .02em;
        line-height: 1.15;
        background: linear-gradient(120deg, #fff, #5eead4 55%, #f0d78c);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .bb-hike__msg {
        margin: 6px 0 0;
        font-size: var(--bb-text-s);
        color: rgba(251, 247, 238, .65);
        max-width: 42ch;
    }

    .bb-hike__timer {
        display: flex;
        gap: 8px
    }

    .bb-hike__unit {
        min-width: 58px;
        padding: 10px 8px;
        border-radius: 14px;
        text-align: center;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 0 20px rgba(63, 180, 180, .12);
    }

    .bb-hike__unit b {
        display: block;
        font-family: var(--bb-font-display);
        font-size: clamp(20px, 3vw, 28px);
        line-height: 1;
        color: #5eead4;
        text-shadow: 0 0 18px rgba(94, 234, 212, .45);
    }

    .bb-hike__unit b.is-tick {
        animation: bb-tick .38s var(--bb-ease-emphasized, cubic-bezier(.34, 1.56, .64, 1));
    }

    .bb-hike__unit span {
        display: block;
        margin-top: 4px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(251, 247, 238, .5);
    }

    .bb-hike__cta {
        flex: none
    }

    @media (max-width:720px) {
        .bb-hike__inner {
            justify-content: center;
            text-align: center
        }

        .bb-hike__msg {
            max-width: none
        }

        .bb-hike__unit {
            min-width: 52px
        }
    }

    @media (prefers-reduced-motion:reduce) {

        .bb-hike[aria-hidden="false"],
        .bb-hike.is-leaving,
        .bb-hike__bar,
        .bb-hike__unit b.is-tick {
            animation: none;
        }

        .bb-hike__unit b {
            text-shadow: none
        }
    }

    /* ───────── Navigasyon ───────── */
    .bb-nav {
        position: sticky;
        top: 0;
        z-index: var(--bb-z-nav);
        transition: background var(--bb-dur-base), box-shadow var(--bb-dur-base)
    }

    .bb-nav__inner {
        display: flex;
        align-items: center;
        gap: var(--bb-5);
        height: 76px;
        max-width: var(--bb-container);
        margin-inline: auto;
        padding-inline: var(--bb-pad-x)
    }

    /* Kaydırınca da ŞEFFAF kalır (opak krem değil) — hafif glass: blur okunabilirliği korur, zemin yarısaydam */
    .bb-nav.scrolled {
        background: rgba(251, 247, 238, .32);
        -webkit-backdrop-filter: blur(12px) saturate(1.05);
        backdrop-filter: blur(12px) saturate(1.05);
        box-shadow: 0 1px 0 var(--bb-border-gold)
    }

    .bb-nav__logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--bb-font-display);
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--bb-cacao-700);
        transform-origin: left center;
        transition: opacity var(--bb-dur-fast) var(--bb-ease-standard), transform .28s cubic-bezier(.34, 1.56, .64, 1), filter .2s var(--bb-ease-standard)
    }

    .bb-nav__logo:hover {
        opacity: .82
    }

    /* basılınca derinlik: içeri bastırma + yaylanarak geri (logo + yazı birlikte) */
    .bb-nav__logo:active {
        transform: scale(.88);
        filter: brightness(.94)
    }

    .bb-nav__logo img {
        height: 40px;
        width: auto
    }

    @media (prefers-reduced-motion:reduce) {
        .bb-nav__logo {
            transition: opacity var(--bb-dur-fast)
        }

        .bb-nav__logo:active {
            transform: none
        }
    }

    .bb-nav__links {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-inline: auto
    }

    .bb-nav__link {
        position: relative;
        padding: 9px 16px;
        font-weight: 600;
        font-size: var(--bb-text-s);
        border-radius: var(--bb-r-pill);
        color: var(--bb-ink-700);
        transition: color var(--bb-dur-fast) var(--bb-ease-standard), background var(--bb-dur-fast) var(--bb-ease-standard), transform var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    /* Soldan büyüyen gradient alt çizgi (sevilen menü animasyonu) + yumuşak pill zemin + hafif kalkma */
    .bb-nav__link::before {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 5px;
        height: 2.5px;
        background: linear-gradient(90deg, var(--bb-teal-600), var(--bb-cacao-600));
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    .bb-nav__link:hover {
        color: var(--bb-cacao-700);
        background: rgba(92, 42, 16, .055);
        transform: translateY(-2px)
    }

    .bb-nav__link:hover::before,
    .bb-nav__link.aktif::before {
        transform: scaleX(1)
    }

    .bb-nav__link.aktif {
        color: var(--bb-cacao-700)
    }

    .bb-nav__link.has-mega::after {
        content: "▾";
        display: inline-block;
        font-size: 9px;
        margin-left: 6px;
        opacity: .55;
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized), opacity var(--bb-dur-fast)
    }

    .bb-nav__link.has-mega:hover::after,
    .bb-nav__link.has-mega.mega-open::after {
        transform: rotate(180deg);
        opacity: 1
    }

    .bb-nav__actions {
        display: flex;
        align-items: center;
        gap: var(--bb-2)
    }

    .bb-icon-btn {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: var(--bb-r-pill);
        display: grid;
        place-items: center;
        color: var(--bb-cacao-700);
        transition: background var(--bb-dur-fast), transform var(--bb-dur-fast)
    }

    .bb-icon-btn:hover {
        background: rgba(92, 42, 16, .08);
        transform: translateY(-1px)
    }

    .bb-icon-btn svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.6
    }

    /* Hesap butonu: ikon + dinamik etiket (Giriş Yap / Hesabım); mobilde (≤980) sadece ikon */
    .bb-acc-btn {
        width: auto;
        gap: 8px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center
    }

    .bb-acc-btn__lbl {
        font-size: var(--bb-text-s);
        font-weight: 700;
        color: var(--bb-cacao-700);
        white-space: nowrap
    }

    @media (max-width:980px) {
        .bb-acc-btn {
            width: 44px;
            padding: 0;
            gap: 0
        }

        .bb-acc-btn__lbl {
            display: none
        }
    }

    .bb-cart-badge {
        position: absolute;
        top: 3px;
        right: 3px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-teal-700);
        color: var(--bb-ivory-50);
        font-size: 10px;
        font-weight: 900;
        display: grid;
        place-items: center;
        border: 1.5px solid var(--bb-surface);
        box-shadow: 0 2px 6px rgba(31, 122, 122, .45);
        transform: scale(0);
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    .bb-cart-badge.show {
        transform: scale(1)
    }

    .bb-burger {
        display: none;
        flex-direction: column;
        gap: 5px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center
    }

    .bb-burger span {
        width: 22px;
        height: 2px;
        background: var(--bb-cacao-700);
        border-radius: 2px;
        transition: transform var(--bb-dur-base)
    }

    /* ───────── Mega menü (glassmorphism) ───────── */
    .bb-mega {
        position: fixed;
        top: 84px;
        left: 50%;
        transform: translateX(-50%) scale(.985);
        width: min(900px, 92vw);
        background: rgba(251, 247, 238, .94);
        -webkit-backdrop-filter: blur(22px) saturate(1.1);
        backdrop-filter: blur(22px) saturate(1.1);
        border: 1px solid var(--bb-border-gold);
        border-radius: var(--bb-r-2xl);
        box-shadow: var(--bb-e4);
        padding: var(--bb-6);
        z-index: var(--bb-z-nav);
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: var(--bb-5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--bb-dur-base) var(--bb-ease-standard), transform var(--bb-dur-base) var(--bb-ease-emphasized), visibility var(--bb-dur-base)
    }

    .bb-mega.open {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1)
    }

    .bb-mega__col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-content: start
    }

    .bb-mega__col h4 {
        grid-column: 1/-1;
        font-family: var(--bb-font-display);
        font-weight: 800;
        font-size: var(--bb-text-xs);
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--bb-teal-700);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .bb-mega__col h4::before {
        content: "";
        width: 18px;
        height: 1px;
        background: var(--bb-gold-700)
    }

    .bb-mega__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-radius: var(--bb-r-md);
        border: 1px solid transparent;
        position: relative;
        transform: translateY(10px);
        opacity: 0;
        transition: background var(--bb-dur-fast) var(--bb-ease-standard), border-color var(--bb-dur-fast), box-shadow var(--bb-dur-fast),
            transform var(--bb-dur-base) var(--bb-ease-emphasized), opacity var(--bb-dur-base) var(--bb-ease-standard)
    }

    .bb-mega.open .bb-mega__item {
        transform: translateY(0);
        opacity: 1
    }

    .bb-mega.open .bb-mega__item:nth-child(3) {
        transition-delay: .05s
    }

    .bb-mega.open .bb-mega__item:nth-child(4) {
        transition-delay: .1s
    }

    .bb-mega.open .bb-mega__item:nth-child(5) {
        transition-delay: .15s
    }

    .bb-mega__item:hover {
        background: var(--bb-surface-raised);
        border-color: var(--bb-border-gold);
        box-shadow: var(--bb-e1);
        transform: translateY(-2px)
    }

    .bb-mega__item .thumb {
        width: 48px;
        height: 48px;
        border-radius: var(--bb-r-md);
        object-fit: cover;
        background: var(--bb-grad-cacao);
        box-shadow: var(--bb-e1);
        flex: none
    }

    .bb-mega__item b {
        display: block;
        font-size: var(--bb-text-s);
        font-weight: 700;
        color: var(--bb-on-light)
    }

    .bb-mega__item span {
        font-size: var(--bb-text-xs);
        color: var(--bb-on-light-dim)
    }

    .bb-mega__item>span {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0
    }

    .bb-mega__promo {
        position: relative;
        overflow: hidden;
        background: var(--bb-grad-hero);
        color: var(--bb-on-dark);
        border: 1px solid var(--bb-border-gold);
        border-radius: var(--bb-r-xl);
        padding: var(--bb-5);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transform: translateY(10px);
        opacity: 0;
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized) .12s, opacity var(--bb-dur-base) .12s
    }

    .bb-mega.open .bb-mega__promo {
        transform: translateY(0);
        opacity: 1
    }

    .bb-mega__promo::after {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        right: -50px;
        top: -50px;
        background: radial-gradient(circle, rgba(217, 188, 114, .22), transparent 70%);
        pointer-events: none
    }

    .bb-mega__promo .bb-d3 {
        color: var(--bb-gold-400)
    }

    /* ───────── Mobil menü (sağ panel) ───────── */
    .bb-mm-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--bb-z-overlay);
        background: rgba(20, 8, 3, .55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--bb-dur-base) var(--bb-ease-standard), visibility var(--bb-dur-base)
    }

    .bb-mm-backdrop.open {
        opacity: 1;
        visibility: visible
    }

    .bb-mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(86vw, 380px);
        z-index: var(--bb-z-overlay);
        background: var(--bb-grad-hero);
        color: var(--bb-on-dark);
        display: flex;
        flex-direction: column;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform var(--bb-dur-base) var(--bb-ease-standard), visibility 0s linear var(--bb-dur-base);
        box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
        border-left: 1px solid var(--bb-border-gold)
    }

    .bb-mobile-menu.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--bb-dur-base) var(--bb-ease-standard), visibility 0s
    }

    .bb-mm__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .12)
    }

    .bb-mm__brand {
        font-family: var(--bb-font-display);
        letter-spacing: .1em;
        font-size: var(--bb-text-l);
        color: var(--bb-on-dark)
    }

    .bb-mm__close {
        font-size: 24px;
        color: var(--bb-on-dark);
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 50%
    }

    .bb-mm__close:active {
        background: rgba(255, 255, 255, .1)
    }

    .bb-mm__links {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px;
        flex: 1;
        overflow-y: auto
    }

    .bb-mm__links a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 12px;
        border-radius: var(--bb-r-md);
        font-family: var(--bb-font-display);
        font-size: var(--bb-text-xl);
        letter-spacing: .03em;
        color: var(--bb-on-dark);
        transition: background var(--bb-dur-fast) var(--bb-ease-standard)
    }

    .bb-mm__links a:hover,
    .bb-mm__links a:active {
        background: rgba(255, 255, 255, .08)
    }

    .bb-mm__links a .i {
        font-size: 19px;
        width: 24px;
        text-align: center;
        flex: 0 0 auto
    }

    .bb-mm__links a .ch {
        margin-left: auto;
        color: var(--bb-gold-300);
        font-size: 18px
    }

    .bb-mm__foot {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px 14px 6px
    }

    .bb-mm__foot a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 13px;
        border-radius: var(--bb-r-md);
        color: #fff
    }

    .bb-mm__acc {
        background: var(--bb-grad-teal)
    }

    .bb-mm__wa {
        background: #25D366
    }

    .bb-mm__foot a .ic {
        font-size: 20px;
        flex: 0 0 auto
    }

    .bb-mm__foot a b {
        display: block;
        font-size: var(--bb-text-s);
        font-weight: 800;
        line-height: 1.15
    }

    .bb-mm__foot a small {
        display: block;
        font-size: 11px;
        opacity: .9;
        margin-top: 1px
    }

    .bb-mm__note {
        padding: 8px 14px 18px;
        text-align: center;
        font-size: var(--bb-text-xs);
        color: var(--bb-on-dark-dim);
        font-weight: 700
    }

    /* ───────── Mini sepet (nav DIŞINDA, z:10001) ───────── */
    .bb-cart-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(22, 8, 3, .5);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        z-index: var(--bb-z-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--bb-dur-base), visibility var(--bb-dur-base)
    }

    .bb-cart-backdrop.open {
        opacity: 1;
        visibility: visible
    }

    .bb-cart {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(420px, 92vw);
        background: var(--bb-surface);
        z-index: var(--bb-z-panel);
        box-shadow: var(--bb-e4);
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--bb-dur-base) var(--bb-ease-standard), visibility 0s linear var(--bb-dur-base)
    }

    .bb-cart.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--bb-dur-base) var(--bb-ease-standard), visibility 0s
    }

    .bb-cart__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--bb-5);
        border-bottom: 1px solid var(--bb-border)
    }

    .bb-cart__head h3 {
        font-family: var(--bb-font-display);
        font-size: var(--bb-display-s);
        color: var(--bb-cacao-700)
    }

    .bb-cart__body {
        flex: 1;
        overflow-y: auto;
        padding: var(--bb-4) var(--bb-5);
        display: flex;
        flex-direction: column;
        gap: var(--bb-3)
    }

    .bb-cart__foot {
        padding: var(--bb-5);
        border-top: 1px solid var(--bb-border);
        background: var(--bb-surface-raised)
    }

    .bb-cart-line {
        display: grid;
        grid-template-columns: 64px 1fr auto;
        gap: var(--bb-3);
        align-items: center;
        background: var(--bb-surface-raised);
        border-radius: var(--bb-r-md);
        padding: 10px;
        box-shadow: var(--bb-e1)
    }

    .bb-cart-line img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        border-radius: var(--bb-r-sm);
        background: var(--bb-grad-ivory)
    }

    .bb-cart-line b {
        font-size: var(--bb-text-s)
    }

    .bb-cart-line .meta {
        font-size: var(--bb-text-xs);
        color: var(--bb-on-light-dim)
    }

    .bb-cart-line {
        align-items: start
    }

    .bb-cart-line .price {
        font-weight: 900;
        color: var(--bb-cacao-700)
    }

    .bb-cart-line .rm {
        color: var(--bb-error);
        font-size: 18px;
        padding: 4px;
        align-self: start
    }

    .bb-cart-line__info {
        min-width: 0
    }

    .bb-cart-line__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        flex-wrap: wrap
    }

    /* Mini-sepet adet stepper (− sayı +) — sepet.html .spt-qty deseninin kompakt hali */
    .bb-cart-qty {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--bb-border);
        border-radius: var(--bb-r-pill);
        background: var(--bb-surface)
    }

    .bb-cart-qty__b {
        width: 28px;
        height: 28px;
        border-radius: var(--bb-r-pill);
        background: transparent;
        font-weight: 800;
        font-size: 16px;
        color: var(--bb-cacao-700);
        display: grid;
        place-items: center;
        line-height: 1;
        transition: background var(--bb-dur-fast) var(--bb-ease-standard), color var(--bb-dur-fast) var(--bb-ease-standard)
    }

    .bb-cart-qty__b:hover {
        background: var(--bb-surface-2)
    }

    .bb-cart-qty__b:active {
        background: var(--bb-teal-500);
        color: #fff
    }

    .bb-cart-qty__b:disabled {
        opacity: .3;
        pointer-events: none
    }

    .bb-cart-qty__n {
        min-width: 26px;
        text-align: center;
        font-weight: 800;
        font-size: var(--bb-text-s);
        color: var(--bb-cacao-700)
    }

    .bb-cart__empty {
        text-align: center;
        color: var(--bb-on-light-dim);
        padding: var(--bb-8) var(--bb-4)
    }

    .bb-cart__empty .em {
        font-size: 54px;
        opacity: .5
    }

    .bb-cart__break {
        display: grid;
        gap: 6px;
        margin-bottom: 10px;
        font-size: var(--bb-text-s);
        font-weight: 700;
        color: var(--bb-ink-500);
    }
    .bb-cart__break[hidden] { display: none !important; }
    .bb-cart__row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: baseline;
    }
    .bb-cart__row.is-save {
        color: var(--bb-teal-700);
        font-weight: 800;
    }
    .bb-cart__row.is-save span:first-child {
        min-width: 0;
    }

    .bb-cart__total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: var(--bb-4)
    }

    .bb-cart__total b {
        font-family: var(--bb-font-display);
        font-size: var(--bb-display-s);
        color: var(--bb-cacao-700)
    }

    .qty {
        display: inline-flex;
        align-items: center;
        gap: 10px
    }

    .qty button {
        width: 26px;
        height: 26px;
        border-radius: var(--bb-r-sm);
        background: var(--bb-surface-2);
        font-weight: 900;
        color: var(--bb-cacao-700)
    }

    /* ───────── Kart temeli ───────── */
    .bb-card {
        background: var(--bb-surface-raised);
        border-radius: var(--bb-r-lg);
        box-shadow: var(--bb-e2);
        overflow: hidden;
        transition: transform var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
    }

    .bb-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--bb-e3)
    }

    /* Ürün kartı */
    .urun-kart {
        position: relative;
        display: flex;
        flex-direction: column
    }

    /* Rozet üst-sol köşede; görsel rozetin altından başlasın diye üstte ~46px rezerv
   (place-items:end center → görseli alt-kenara hizalar, üst kenar rozetle örtüşmez) */
    .urun-kart__media {
        position: relative;
        aspect-ratio: 1/1;
        background: var(--bb-grad-ivory);
        display: grid;
        place-items: end center;
        overflow: hidden
    }

    .urun-kart__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom;
        filter: drop-shadow(0 18px 26px rgba(46, 20, 6, .28));
        transition: transform var(--bb-dur-slow) var(--bb-ease-standard)
    }

    .urun-kart:hover .urun-kart__media img {
        transform: scale(1.07) rotate(-2deg)
    }

    /* Rozet görselin ÜSTÜNDE (z-index:3) + okunurluk için hafif backdrop blur arka plan;
   gold/teal token rengi .bb-badge'den korunur (sadece bu scope'ta backdrop ekliyoruz) */
    .urun-kart__badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3
    }

    .urun-kart__badge .bb-badge {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        box-shadow: 0 4px 14px rgba(22, 8, 3, .22), inset 0 1px 0 rgba(255, 255, 255, .18)
    }

    .urun-kart__badge--oos,
    .bb-badge.urun-kart__badge--oos {
        background: var(--bb-cacao-700) !important;
        color: #fff !important;
        border: 0;
        font-weight: 800
    }

    .urun-kart.is-oos .urun-kart__media img,
    .urun-kart.is-oos .kat-urun__media img {
        filter: grayscale(.35) brightness(.92);
        opacity: .88
    }

    .urun-kart__fav {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border-radius: var(--bb-r-pill);
        background: rgba(255, 255, 255, .8);
        display: grid;
        place-items: center;
        color: var(--bb-cacao-600)
    }

    .urun-kart__body {
        padding: var(--bb-4);
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: center
    }

    .urun-kart__title {
        font-family: var(--bb-font-display);
        font-size: var(--bb-text-xl);
        letter-spacing: .03em;
        color: var(--bb-cacao-700)
    }

    .urun-kart__rating {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: var(--bb-text-xs);
        color: var(--bb-on-light-dim)
    }

    .urun-kart__price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px
    }

    .urun-kart__price .now {
        font-family: var(--bb-font-display);
        font-size: 28px;
        color: var(--bb-cacao-700)
    }

    .urun-kart__price .cur {
        font-size: var(--bb-text-s);
        color: var(--bb-on-light-dim);
        font-weight: 800
    }

    /* Çok dar telefon (≤380px, ör. iPhone SE) 2-sütun ızgarada kart içi sığma:
   28px fiyat + rating satırı dar kartta taşıyordu → fiyatı kıs, rating sarsın. */
    @media (max-width:380px) {
        .urun-kart__price {
            flex-wrap: wrap;
            gap: 2px 6px
        }

        .urun-kart__price .now {
            font-size: 24px
        }

        .urun-kart__rating {
            flex-wrap: wrap;
            gap: 4px
        }
    }

    /* Kategori kartı */
    .kat-kart {
        position: relative;
        border-radius: var(--bb-r-lg);
        overflow: hidden;
        aspect-ratio: 4/5;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--bb-5);
        box-shadow: var(--bb-e2);
        transition: transform var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base)
    }

    .kat-kart::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bb-grad-cacao);
        z-index: 0;
        transition: transform var(--bb-dur-slow)
    }

    .kat-kart::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(22, 8, 3, .78), transparent 62%);
        z-index: 1
    }

    .kat-kart>* {
        position: relative;
        z-index: 2
    }

    .kat-kart img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0
    }

    .kat-kart:hover {
        transform: translateY(-8px);
        box-shadow: var(--bb-e3)
    }

    .kat-kart:hover img {
        transform: scale(1.06)
    }

    .kat-kart h3 {
        font-family: var(--bb-font-display);
        font-size: var(--bb-display-s);
        letter-spacing: .03em
    }

    .kat-kart p {
        font-size: var(--bb-text-s);
        color: rgba(255, 255, 255, .78)
    }

    .kat-kart .arrow {
        margin-top: var(--bb-3);
        font-weight: 900;
        color: var(--bb-gold-400);
        font-size: var(--bb-text-s)
    }

    .kat-kart.locked {
        filter: saturate(.82)
    }

    .kat-kart.locked::before {
        background: linear-gradient(155deg, var(--bb-cacao-500), var(--bb-cacao-900))
    }

    .kat-kart.locked .lock {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 20px;
        text-align: center;
        background: linear-gradient(180deg, rgba(22, 8, 3, .30), rgba(22, 8, 3, .66));
        -webkit-backdrop-filter: blur(1.5px);
        backdrop-filter: blur(1.5px)
    }

    .kat-kart.locked .lock::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
        background-size: 14px 14px;
        -webkit-mask-image: radial-gradient(circle at 50% 42%, #000, transparent 78%);
        mask-image: radial-gradient(circle at 50% 42%, #000, transparent 78%)
    }

    .kat-kart.locked .lock__badge {
        position: relative;
        width: 62px;
        height: 62px;
        border-radius: var(--bb-r-pill);
        display: grid;
        place-items: center;
        font-size: 27px;
        background: rgba(255, 255, 255, .10);
        border: 1px solid var(--bb-border-gold);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .20);
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized), box-shadow var(--bb-dur-base)
    }

    .kat-kart.locked .lock h3 {
        font-family: var(--bb-font-display);
        font-weight: 800;
        font-size: var(--bb-text-xl);
        letter-spacing: -.01em;
        color: #fff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .45)
    }

    .kat-kart.locked .lock__tag {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .2em;
        color: var(--bb-gold-300);
        padding: 6px 15px;
        border-radius: var(--bb-r-pill);
        background: rgba(217, 188, 114, .12);
        border: 1px solid var(--bb-border-gold)
    }

    .kat-kart.locked:hover .lock__badge {
        transform: translateY(-3px) scale(1.06);
        box-shadow: 0 14px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25)
    }

    /* Yorum kartı */
    .yorum-kart {
        break-inside: avoid;
        margin-bottom: var(--bb-5)
    }

    .yorum-kart .top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: var(--bb-3)
    }

    .yorum-kart .avatar {
        width: 46px;
        height: 46px;
        border-radius: var(--bb-r-pill);
        object-fit: cover;
        background: var(--bb-grad-teal)
    }

    .yorum-kart .who b {
        font-size: var(--bb-text-s)
    }

    .yorum-kart .who span {
        font-size: var(--bb-text-xs);
        color: var(--bb-success);
        font-weight: 700
    }

    .yorum-kart p {
        font-size: var(--bb-text-s);
        color: var(--bb-ink-700)
    }

    .yorum-kart .photo {
        margin-top: var(--bb-3);
        border-radius: var(--bb-r-md);
        width: 100%;
        object-fit: cover;
        max-height: 240px
    }

    /* Özellik kartı */
    .feat-kart {
        padding: var(--bb-5);
        border-radius: var(--bb-r-lg);
        background: var(--bb-surface-raised);
        box-shadow: var(--bb-e1);
        border: 1px solid var(--bb-border);
        transition: transform var(--bb-dur-base), box-shadow var(--bb-dur-base)
    }

    .feat-kart:hover {
        transform: translateY(-4px);
        box-shadow: var(--bb-e2)
    }

    .feat-kart .ic {
        width: 54px;
        height: 54px;
        border-radius: var(--bb-r-md);
        display: grid;
        place-items: center;
        background: var(--bb-grad-teal);
        color: #fff;
        font-size: 24px;
        margin-bottom: var(--bb-3);
        box-shadow: var(--bb-glow-teal)
    }

    .feat-kart h3 {
        font-family: var(--bb-font-display);
        font-size: var(--bb-text-xl);
        letter-spacing: .03em;
        color: var(--bb-cacao-700);
        margin-bottom: 6px
    }

    .feat-kart p {
        font-size: var(--bb-text-s);
        color: var(--bb-on-light-dim)
    }

    /* Koyu bölümde kart metinleri otomatik açık renge dönsün (görünmez-metin regresyonunu önler) */
    .bb-section--dark .feat-kart {
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .1)
    }

    .bb-section--dark .feat-kart h3 {
        color: var(--bb-gold-400)
    }

    .bb-section--dark .feat-kart p {
        color: var(--bb-on-dark-dim)
    }

    .bb-section--dark .bb-acc__q {
        color: var(--bb-on-dark)
    }

    .bb-section--dark .bb-acc__a p {
        color: var(--bb-on-dark-dim)
    }

    /* ───────── İstatistik bandı ───────── */
    .bb-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--bb-4)
    }

    .bb-stat {
        text-align: center;
        padding: var(--bb-4)
    }

    .bb-stat b {
        display: block;
        font-family: var(--bb-font-display);
        font-size: var(--bb-display-m);
        color: var(--bb-gold-400);
        line-height: 1
    }

    .bb-stat span {
        font-size: var(--bb-text-xs);
        text-transform: uppercase;
        letter-spacing: var(--bb-ls-label);
        color: var(--bb-on-dark-dim)
    }

    /* ───────── Formlar ───────── */
    .bb-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: var(--bb-4)
    }

    .bb-field label {
        font-size: var(--bb-text-xs);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--bb-ink-500)
    }

    .bb-input {
        width: 100%;
        padding: 14px 16px;
        border-radius: var(--bb-r-md);
        border: 1.5px solid var(--bb-border);
        background: var(--bb-surface-raised);
        font-size: var(--bb-text-m);
        transition: border var(--bb-dur-fast), box-shadow var(--bb-dur-fast)
    }

    .bb-input:focus {
        border-color: var(--bb-teal-500);
        box-shadow: 0 0 0 4px rgba(63, 180, 180, .16)
    }

    /* ───────── Sekme (tabs) ───────── */
    .bb-tabs {
        display: inline-flex;
        gap: 4px;
        background: var(--bb-surface-2);
        padding: 5px;
        border-radius: var(--bb-r-pill)
    }

    /* Mobil: sekme grubu taşarsa yatay kaydır (kayma/taşma engeli) */
    @media (max-width:600px) {
        .bb-tabs {
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none
        }

        .bb-tabs::-webkit-scrollbar {
            display: none
        }

        .bb-tabs .bb-tab {
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 11px 16px;
            min-height: 44px;
            display: inline-flex;
            align-items: center
        }
    }

    .bb-tab {
        padding: 10px 20px;
        border-radius: var(--bb-r-pill);
        font-weight: 800;
        font-size: var(--bb-text-s);
        color: var(--bb-ink-500);
        transition: all var(--bb-dur-fast) var(--bb-ease-standard)
    }

    .bb-tab.active {
        background: var(--bb-surface-raised);
        color: var(--bb-cacao-700);
        box-shadow: var(--bb-e1)
    }

    /* ───────── Akordeon (SSS) ───────── */
    .bb-acc {
        border-bottom: 1px solid var(--bb-border)
    }

    .bb-acc__q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--bb-4);
        padding: var(--bb-4) 0;
        font-weight: 800;
        font-size: var(--bb-text-l);
        cursor: pointer;
        color: var(--bb-cacao-700)
    }

    .bb-acc__q .pm {
        width: 30px;
        height: 30px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-surface-2);
        display: grid;
        place-items: center;
        font-size: 18px;
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized), background var(--bb-dur-fast)
    }

    .bb-acc.open .bb-acc__q .pm {
        transform: rotate(45deg);
        background: var(--bb-teal-500);
        color: #fff
    }

    .bb-acc__a {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--bb-dur-base) var(--bb-ease-standard)
    }

    .bb-acc__a p {
        padding-bottom: var(--bb-4);
        color: var(--bb-on-light-dim);
        font-size: var(--bb-text-m)
    }

    /* ───────── Modal ───────── */
    .bb-modal-bd {
        position: fixed;
        inset: 0;
        background: rgba(22, 8, 3, .6);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: var(--bb-z-overlay);
        display: grid;
        place-items: center;
        padding: var(--bb-4);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--bb-dur-base), visibility var(--bb-dur-base)
    }

    .bb-modal-bd.open {
        opacity: 1;
        visibility: visible
    }

    .bb-modal {
        background: var(--bb-surface);
        border-radius: var(--bb-r-xl);
        box-shadow: var(--bb-e4);
        max-width: 560px;
        width: 100%;
        padding: var(--bb-6);
        transform: scale(.92);
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    .bb-modal-bd.open .bb-modal {
        transform: scale(1);
        animation: bb-modal-in var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    /* ───────── Toast ───────── */
    .bb-toast-wrap {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: var(--bb-z-toast);
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .bb-toast {
        min-width: 260px;
        max-width: 340px;
        padding: 14px 18px;
        border-radius: var(--bb-r-md);
        color: #fff;
        font-weight: 700;
        font-size: var(--bb-text-s);
        box-shadow: var(--bb-e3);
        display: flex;
        align-items: center;
        gap: 10px;
        animation: bb-toast-in var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    .bb-toast.out {
        animation: bb-toast-out var(--bb-dur-base) var(--bb-ease-exit) forwards
    }

    .bb-toast--basari {
        background: linear-gradient(135deg, #236047, #2E7D5B)
    }

    .bb-toast--sepet {
        background: var(--bb-grad-cacao);
        border: 1px solid var(--bb-border-gold)
    }

    .bb-toast--hata {
        background: linear-gradient(135deg, #922, #C0392B)
    }

    .bb-toast--bilgi {
        background: var(--bb-grad-teal)
    }

    .bb-toast--uyari {
        background: var(--bb-grad-gold);
        color: var(--bb-cacao-900)
    }

    /* ───────── Chatbot ───────── */
    .bb-fab {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: var(--bb-z-chatbot);
        width: 62px;
        height: 62px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-grad-teal);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: var(--bb-glow-teal);
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized)
    }

    .bb-fab:hover {
        transform: scale(1.08) rotate(4deg)
    }

    .bb-fab svg {
        width: 28px;
        height: 28px
    }

    /* Mobil menü açıkken destek FAB'ını gizle — panelin üstüne binmesin */
    body.bb-mm-open .bb-fab {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(.8)
    }

    .bb-chat {
        position: fixed;
        right: 24px;
        bottom: 96px;
        z-index: var(--bb-z-chatbot);
        width: min(380px, 92vw);
        height: min(560px, 76vh);
        background: var(--bb-surface);
        border-radius: var(--bb-r-xl);
        box-shadow: var(--bb-e4);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(20px) scale(.96);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--bb-dur-base) var(--bb-ease-emphasized), opacity var(--bb-dur-base), visibility var(--bb-dur-base)
    }

    .bb-chat.open {
        transform: none;
        opacity: 1;
        visibility: visible
    }

    .bb-chat__head {
        background: var(--bb-grad-hero);
        color: var(--bb-on-dark);
        padding: var(--bb-4) var(--bb-5);
        display: flex;
        align-items: center;
        gap: 12px
    }

    .bb-chat__head .av {
        width: 42px;
        height: 42px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-grad-teal);
        display: grid;
        place-items: center;
        font-family: var(--bb-font-display);
        font-weight: 800;
        font-size: 21px;
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25)
    }

    .bb-chat__head b {
        font-size: var(--bb-text-m)
    }

    .bb-chat__head .on {
        font-size: var(--bb-text-xs);
        color: var(--bb-teal-300);
        display: flex;
        align-items: center;
        gap: 5px
    }

    .bb-chat__head .on::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--bb-teal-300)
    }

    .bb-chat__head .x {
        margin-left: auto;
        font-size: 22px;
        opacity: .8
    }

    .bb-chat__body {
        flex: 1;
        overflow-y: auto;
        padding: var(--bb-4);
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--bb-surface-2)
    }

    .bb-msg {
        max-width: 82%;
        padding: 11px 14px;
        border-radius: var(--bb-r-md);
        font-size: var(--bb-text-s);
        line-height: 1.5;
        box-shadow: var(--bb-e1)
    }

    .bb-msg.bot {
        background: var(--bb-surface-raised);
        align-self: flex-start;
        border-bottom-left-radius: 4px
    }

    .bb-msg.user {
        background: var(--bb-teal-500);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 4px
    }

    .bb-chat__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        padding: 0 var(--bb-4) var(--bb-3)
    }

    /* çok chip → dikey taşmayı sınırla, yumuşak kaydır (scrollbar gizli) */
    .bb-chat__chips--scroll {
        max-height: 96px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    .bb-chat__chips--scroll::-webkit-scrollbar {
        display: none
    }

    .bb-chip {
        flex: 0 1 auto;
        max-width: 100%;
        padding: 8px 13px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-surface-raised);
        border: 1px solid var(--bb-border);
        font-size: var(--bb-text-xs);
        font-weight: 700;
        color: var(--bb-cacao-700);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background var(--bb-dur-fast), transform var(--bb-dur-fast)
    }

    .bb-chip:hover {
        background: var(--bb-teal-500);
        color: #fff;
        transform: translateY(-1px)
    }

    /* Chatbot içi mini ürün kartı (bot mesajı olarak): görsel + isim + fiyat + Sepete Ekle */
    .bb-chat-urun {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 11px;
        align-items: center;
        max-width: 90%;
        align-self: flex-start;
        padding: 10px;
        border-radius: var(--bb-r-md);
        background: var(--bb-surface-raised);
        border: 1px solid var(--bb-border);
        box-shadow: var(--bb-e1)
    }

    .bb-chat-urun__img {
        width: 56px;
        height: 56px;
        border-radius: var(--bb-r-sm);
        object-fit: contain;
        background: var(--bb-grad-ivory);
        flex: none
    }

    .bb-chat-urun__info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0
    }

    .bb-chat-urun__isim {
        font-size: var(--bb-text-s);
        font-weight: 800;
        color: var(--bb-cacao-700);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .bb-chat-urun__fiyat {
        font-family: var(--bb-font-display);
        font-size: var(--bb-text-l);
        color: var(--bb-cacao-700);
        line-height: 1
    }

    .bb-chat-urun__fiyat .cur {
        font-family: var(--bb-font-body, inherit);
        font-size: var(--bb-text-xs);
        font-weight: 800;
        color: var(--bb-on-light-dim);
        margin-left: 3px
    }

    .bb-chat-urun__ekle {
        margin-top: 4px;
        justify-self: start;
        padding: 7px 14px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-grad-teal);
        color: #fff;
        font-size: var(--bb-text-xs);
        font-weight: 800;
        letter-spacing: .02em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: var(--bb-e1);
        transition: transform var(--bb-dur-fast) var(--bb-ease-standard), box-shadow var(--bb-dur-fast)
    }

    .bb-chat-urun__ekle:hover {
        transform: translateY(-1px);
        box-shadow: var(--bb-glow-teal)
    }

    .bb-chat-urun__ekle:active {
        transform: translateY(0) scale(.97)
    }

    .bb-chat__foot {
        display: flex;
        gap: 8px;
        padding: var(--bb-3);
        border-top: 1px solid var(--bb-border);
        background: var(--bb-surface-raised)
    }

    .bb-chat__foot input {
        flex: 1;
        border: 1px solid var(--bb-border);
        border-radius: var(--bb-r-pill);
        padding: 11px 16px
    }

    .bb-chat__foot button {
        width: 44px;
        height: 44px;
        border-radius: var(--bb-r-pill);
        background: var(--bb-teal-500);
        color: #fff;
        display: grid;
        place-items: center
    }

    /* ───────── Footer ───────── */
    .bb-footer {
        background: var(--bb-grad-hero);
        color: var(--bb-on-dark)
    }

    .bb-footer__top {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
        gap: var(--bb-6);
        padding-block: var(--bb-8)
    }

    .bb-footer h4 {
        font-family: var(--bb-font-display);
        font-size: var(--bb-text-l);
        letter-spacing: .08em;
        color: var(--bb-gold-400);
        margin-bottom: var(--bb-4);
        text-transform: uppercase
    }

    .bb-footer a {
        display: block;
        padding: 7px 0;
        color: var(--bb-on-dark-dim);
        font-size: var(--bb-text-s);
        transition: color var(--bb-dur-fast), transform var(--bb-dur-fast)
    }

    .bb-footer a:hover {
        color: var(--bb-gold-400);
        transform: translateX(4px)
    }

    .bb-footer__brand p {
        color: var(--bb-on-dark-dim);
        font-size: var(--bb-text-s);
        margin: var(--bb-3) 0
    }

    .bb-footer__social {
        display: flex;
        gap: 10px;
        margin-top: var(--bb-4)
    }

    .bb-footer__social a {
        width: 42px;
        height: 42px;
        border-radius: var(--bb-r-pill);
        background: rgba(255, 255, 255, .1);
        display: grid;
        place-items: center;
        transform: none
    }

    .bb-footer__social a:hover {
        background: var(--bb-gold-500);
        color: var(--bb-cacao-900);
        transform: translateY(-3px)
    }

    .bb-footer__bottom {
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-block: var(--bb-4);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--bb-3);
        font-size: var(--bb-text-xs);
        color: var(--bb-on-dark-dim)
    }

    .bb-newsletter {
        display: flex;
        gap: 8px;
        margin-top: var(--bb-3)
    }

    .bb-newsletter input {
        flex: 1;
        border-radius: var(--bb-r-pill);
        border: 1px solid rgba(255, 255, 255, .2);
        background: rgba(255, 255, 255, .06);
        color: #fff;
        padding: 12px 16px
    }

    .bb-newsletter input::placeholder {
        color: rgba(255, 255, 255, .5)
    }

    /* ───────── Yardımcı ───────── */
    .bb-divider-gold {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--bb-gold-500), transparent);
        margin-block: var(--bb-6)
    }

    .bb-spinner {
        width: 28px;
        height: 28px;
        border: 3px solid var(--bb-border);
        border-top-color: var(--bb-teal-500);
        border-radius: 50%;
        animation: bb-spin .8s linear infinite
    }

    /* ============================================================
   MOBİL & TABLET — paylaşılan responsive temel
   (sayfa-özel override'lar her sayfanın kendi <style>'ında)
============================================================ */

    /* ≤980px: burger menüsü devreye girer, masaüstü linkleri + mega gizlenir */
    @media (max-width:980px) {
        .bb-nav__inner {
            height: 64px;
            gap: var(--bb-3)
        }

        .bb-nav__links {
            display: none
        }

        .bb-mega {
            display: none !important
        }

        .bb-burger {
            display: flex
        }

        .bb-nav__logo {
            margin-inline-end: auto;
            font-size: 20px
        }

        .bb-nav__logo img {
            height: 34px
        }

        /* hesabım ikonu burger menüsünde mevcut → nav'da sadeleştir */
        .bb-nav__actions a.bb-icon-btn {
            display: none
        }

        /* footer → 2 sütun, marka bloğu tam genişlik */
        .bb-footer__top {
            grid-template-columns: 1fr 1fr;
            gap: var(--bb-5) var(--bb-6);
            padding-block: var(--bb-7)
        }

        .bb-footer__brand {
            grid-column: 1/-1
        }
    }

    /* ≤768px: mobil düzen */
    @media (max-width:768px) {

        /* istatistik bandı 4→2 sütun */
        .bb-stats {
            grid-template-columns: 1fr 1fr;
            gap: var(--bb-3)
        }

        .bb-stat {
            padding: var(--bb-3)
        }

        /* bölüm başlıkları biraz daha sıkı */
        .bb-section-head {
            margin-bottom: var(--bb-6)
        }

        .bb-section-head p {
            font-size: var(--bb-text-m)
        }

        /* footer → tek sütun */
        .bb-footer__top {
            grid-template-columns: 1fr;
            gap: var(--bb-5);
            padding-block: var(--bb-6)
        }

        .bb-footer__brand {
            grid-column: auto
        }

        .bb-footer__bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--bb-2)
        }

        /* mobil menü panel: dar telefonda link boyutu */
        .bb-mm__links a {
            font-size: var(--bb-text-l)
        }

        /* chatbot FAB + pencere mobil */
        .bb-fab {
            right: 16px;
            bottom: 16px;
            width: 56px;
            height: 56px
        }

        .bb-fab svg {
            width: 25px;
            height: 25px
        }

        .bb-chat {
            right: 12px;
            left: 12px;
            bottom: 82px;
            width: auto;
            height: min(540px, 72vh)
        }

        /* toast tam genişlik */
        .bb-toast-wrap {
            top: 14px;
            left: 14px;
            right: 14px
        }

        .bb-toast {
            min-width: 0;
            max-width: none;
            width: 100%
        }

        /* modal kenar boşluğu */
        .bb-modal {
            padding: var(--bb-5)
        }

        /* ürün kartı: rozet daha sıkı, görsel rezervi azalt (mobil) */
        .urun-kart__badge {
            top: 10px;
            left: 10px
        }

        .urun-kart__badge .bb-badge {
            font-size: 11px;
            padding: 5px 10px
        }

        .urun-kart__media {
            padding: 38px 18px 18px
        }

        .urun-kart__media img {
            width: 74%;
            height: 74%
        }
    }

    /* ≤480px: küçük telefon ince ayar */
    @media (max-width:480px) {
        .bb-nav__logo span {
            font-size: 18px
        }

        .bb-acc__q {
            font-size: var(--bb-text-m)
        }

        .bb-btn--lg {
            padding: 15px 24px;
            font-size: var(--bb-text-s)
        }

        /* istatistik bandı → tek sütun: 2 sütunlu büyük rakam (display-m) + gap + padding
     en dar ekranda kabı taşabiliyordu; tek sütun = 0 yatay taşma */
        .bb-stats {
            grid-template-columns: 1fr
        }
    }
}

/* ───────── Yorum lightbox (reels — tıkla; tam foto + tam metin) ───────── */
@layer components {
    .yorum-kart {
        cursor: pointer
    }

    body.bb-rlb-acik {
        overflow: hidden
    }

    .bb-rlb {
        position: fixed;
        inset: 0;
        z-index: var(--bb-z-panel);
        display: none;
        align-items: center;
        justify-content: center;
        padding: clamp(12px, 4vw, 28px)
    }

    .bb-rlb.open {
        display: flex
    }

    .bb-rlb__bd {
        position: absolute;
        inset: 0;
        background: rgba(22, 8, 3, .80);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px)
    }

    .bb-rlb__card {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: min(420px, 94vw);
        max-height: 92vh;
        overflow: hidden;
        background: var(--bb-surface-raised);
        border-radius: var(--bb-r-2xl);
        box-shadow: var(--bb-e4);
        animation: bb-rlb-in var(--bb-dur-base) var(--bb-ease-emphasized) both
    }

    @keyframes bb-rlb-in {
        from {
            opacity: 0;
            transform: translateY(18px) scale(.97)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .bb-rlb__x {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 38px;
        height: 38px;
        border: 0;
        cursor: pointer;
        border-radius: var(--bb-r-pill);
        background: rgba(0, 0, 0, .46);
        color: #fff;
        font-size: 24px;
        line-height: 1;
        display: grid;
        place-items: center;
        transition: background var(--bb-dur-fast) var(--bb-ease-standard)
    }

    .bb-rlb__x:hover {
        background: rgba(0, 0, 0, .66)
    }

    /* reels (portre) çerçeve — foto TAM görünür (contain), koyu zemin letterbox */
    .bb-rlb__media {
        flex: 0 0 auto;
        aspect-ratio: 9/16;
        max-height: 60vh;
        background: var(--bb-cacao-900);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .bb-rlb__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block
    }

    .bb-rlb__panel {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: var(--bb-5);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain
    }

    .bb-rlb__who {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px
    }

    .bb-rlb__av {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: var(--bb-r-pill);
        background: var(--bb-grad-teal);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 18px
    }

    .bb-rlb__who b {
        display: block;
        color: var(--bb-cacao-700);
        font-size: var(--bb-text-m);
        line-height: 1.2
    }

    .bb-rlb__badge {
        font-size: var(--bb-text-xs);
        font-weight: 800;
        color: var(--bb-teal-700)
    }

    .bb-rlb__stars {
        color: var(--bb-gold-500);
        font-size: 18px;
        letter-spacing: 2px;
        margin-bottom: 10px
    }

    .bb-rlb__text {
        color: var(--bb-ink-700);
        font-size: var(--bb-text-m);
        line-height: var(--bb-lh-body);
        overflow-wrap: anywhere;
        margin: 0
    }

    @media (max-width:480px) {
        .bb-rlb__media {
            max-height: 54vh
        }

        .bb-rlb__card {
            width: 96vw;
            max-height: 90vh
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .bb-rlb__card {
            animation: none
        }
    }
}

/* —— Paylaşılan modal motion —— */
@layer components {
    @keyframes bb-veil-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes bb-veil-out {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes bb-pop-in {
        0% {
            opacity: 0;
            transform: translateY(32px) scale(.9);
            filter: blur(8px);
        }

        62% {
            opacity: 1;
            transform: translateY(-8px) scale(1.025);
            filter: blur(0);
        }

        100% {
            opacity: 1;
            transform: none;
            filter: none;
        }
    }

    @keyframes bb-pop-out {
        from {
            opacity: 1;
            transform: none;
        }

        to {
            opacity: 0;
            transform: translateY(18px) scale(.94);
        }
    }

    @keyframes bb-rise-in {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes bb-shine-sweep {
        from {
            transform: translateX(-130%) rotate(18deg);
        }

        to {
            transform: translateX(240%) rotate(18deg);
        }
    }

    @keyframes bb-shimmer-x {
        from {
            background-position: 200% 0;
        }

        to {
            background-position: -200% 0;
        }
    }

    @keyframes bb-hike-in {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes bb-hike-out {
        to {
            opacity: 0;
            transform: translateY(-100%);
        }
    }

    @keyframes bb-tick {
        from {
            transform: scale(1.22);
            color: #f0d78c;
        }

        to {
            transform: none;
        }
    }

    @keyframes bb-code-pulse {

        0%,
        100% {
            box-shadow: 0 0 22px rgba(94, 234, 212, .35);
        }

        50% {
            box-shadow: 0 0 40px rgba(240, 215, 140, .7), 0 0 16px rgba(94, 234, 212, .55);
        }
    }

    @keyframes bb-spark {

        0%,
        100% {
            opacity: .15;
            transform: scale(.7);
        }

        50% {
            opacity: 1;
            transform: scale(1.25);
        }
    }

    .bb-modal-shine {
        position: absolute;
        inset: -20% -40%;
        width: 40%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent);
        pointer-events: none;
        animation: bb-shine-sweep 1.6s var(--bb-ease-standard, cubic-bezier(.22, 1, .36, 1)) .18s both;
    }

    .bb-spark {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f0d78c;
        box-shadow: 0 0 10px #5eead4;
        pointer-events: none;
        animation: bb-spark 1.8s ease-in-out infinite;
    }

    .bb-spark--1 {
        top: 18px;
        right: 28px;
        animation-delay: .1s;
    }

    .bb-spark--2 {
        top: 42%;
        left: 16px;
        width: 6px;
        height: 6px;
        background: #5eead4;
        animation-delay: .55s;
    }

    .bb-spark--3 {
        bottom: 28px;
        right: 18%;
        width: 5px;
        height: 5px;
        animation-delay: 1s;
    }
}

/* —— 18+ yaş kapısı —— */
@layer components {
    .bb-age__note a {
        color: var(--bb-gold-300);
    }

    /* ── Hoşgeldin kupon ── */
    .bb-welcome {
        position: fixed;
        inset: 0;
        z-index: 10050;
        display: none;
        place-items: center;
        padding: 24px;
        background: rgba(12, 4, 2, .72);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .bb-welcome.is-open,
    .bb-welcome[aria-hidden="false"]:not([hidden]) {
        display: grid !important;
        animation: bb-veil-in .38s ease both;
    }

    .bb-welcome.is-leaving {
        display: grid !important;
        pointer-events: none;
        animation: bb-veil-out .32s ease both;
    }

    .bb-welcome[hidden]:not(.is-leaving) {
        display: none !important;
    }

    .bb-welcome__panel {
        position: relative;
        width: min(440px, 100%);
        padding: clamp(28px, 4vw, 40px);
        border-radius: 28px;
        overflow: hidden;
        color: #fff;
        text-align: center;
        background:
            radial-gradient(90% 80% at 0% 0%, rgba(63, 180, 180, .35), transparent 55%),
            radial-gradient(80% 70% at 100% 100%, rgba(201, 162, 75, .3), transparent 50%),
            linear-gradient(160deg, #2c160c, #120804 55%, #0a1a1a);
        border: 1px solid rgba(201, 162, 75, .45);
        box-shadow: 0 32px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(63, 180, 180, .2);
        animation: bb-pop-in 0.62s var(--bb-ease-emphasized, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
    }

    .bb-welcome.is-leaving .bb-welcome__panel {
        animation: bb-pop-out .3s var(--bb-ease-standard, cubic-bezier(.22, 1, .36, 1)) both;
    }

    .bb-welcome__glow {
        position: absolute;
        width: 200px;
        height: 200px;
        right: -40px;
        top: -60px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(94, 234, 212, .4), transparent 70%);
        filter: blur(8px);
        pointer-events: none;
        animation: bb-spark 3.2s ease-in-out infinite;
    }

    .bb-welcome__eye {
        position: relative;
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bb-gold-400, #c9a24b);
        animation: bb-rise-in .5s .08s both;
    }

    .bb-welcome__panel h2 {
        position: relative;
        margin: 0 0 12px;
        font-family: var(--bb-font-display);
        font-size: clamp(26px, 4vw, 34px);
        line-height: 1.15;
        background: linear-gradient(120deg, #fff, #5eead4 60%, #f0d78c);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: bb-rise-in .5s .14s both;
    }

    .bb-welcome__txt {
        position: relative;
        margin: 0 0 20px;
        color: rgba(251, 247, 238, .7);
        font-size: var(--bb-text-s);
        line-height: 1.5;
        animation: bb-rise-in .5s .2s both;
    }

    .bb-welcome__code-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 22px;
        animation: bb-rise-in .5s .28s both;
    }

    .bb-welcome__code {
        display: inline-block;
        padding: 14px 20px;
        border-radius: 14px;
        font-size: clamp(18px, 3vw, 22px);
        font-weight: 900;
        letter-spacing: .14em;
        color: #1a0a04;
        background: linear-gradient(120deg, #5eead4, #f0d78c);
        animation: bb-code-pulse 2.2s ease-in-out infinite;
    }

    .bb-welcome__invite {
        position: relative;
        margin: 0 0 18px;
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 12px;
        line-height: 1.45;
        color: rgba(251, 247, 238, .78);
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(201, 162, 75, .28);
        animation: bb-rise-in .5s .34s both;
    }

    .bb-welcome__invite b {
        color: #f0d78c;
    }

    .bb-welcome__invite a {
        color: var(--bb-teal-400, #5eead4);
        font-weight: 700;
        text-underline-offset: 2px;
    }

    .bb-welcome__actions {
        position: relative;
        display: grid;
        gap: 10px;
        animation: bb-rise-in .5s .4s both;
    }

    .bb-welcome__note {
        position: relative;
        margin: 16px 0 0;
        font-size: 11px;
        color: rgba(251, 247, 238, .45);
    }

    @media (prefers-reduced-motion: reduce) {

        .bb-welcome,
        .bb-welcome__panel,
        .bb-welcome__code,
        .bb-welcome__glow,
        .bb-modal-shine,
        .bb-spark {
            animation: none !important;
        }
    }

    html.bb-age-pending,
    html.bb-age-pending body {
        overflow: hidden !important;
    }

    .bb-age {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: var(--bb-pad-x, 20px);
        background:
            radial-gradient(80% 60% at 70% 0%, rgba(63, 180, 180, 0.18), transparent 55%),
            radial-gradient(70% 50% at 10% 100%, rgba(201, 162, 75, 0.12), transparent 50%),
            rgba(22, 8, 3, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    html.bb-age-pending .bb-age {
        display: flex;
        animation: bb-veil-in .4s ease both;
    }

    .bb-age.is-leaving {
        display: flex !important;
        pointer-events: none;
        animation: bb-veil-out .34s ease both;
    }

    .bb-age__panel {
        position: relative;
        overflow: hidden;
        width: min(440px, 100%);
        text-align: center;
        color: var(--bb-on-dark);
        background: linear-gradient(165deg, rgba(58, 26, 12, 0.95), rgba(22, 8, 3, 0.98));
        border: 1px solid rgba(217, 188, 114, 0.28);
        border-radius: var(--bb-r-2xl, 20px);
        padding: clamp(28px, 5vw, 40px) clamp(22px, 4vw, 32px);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(201, 162, 75, .12);
        animation: bb-pop-in 0.62s var(--bb-ease-emphasized, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
    }

    .bb-age.is-leaving .bb-age__panel {
        animation: bb-pop-out .3s var(--bb-ease-standard, cubic-bezier(.22, 1, .36, 1)) both;
    }

    .bb-age__mark {
        position: relative;
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 18px;
        letter-spacing: 0.02em;
        color: var(--bb-cacao-900);
        background: linear-gradient(135deg, var(--bb-gold-300), var(--bb-gold-500));
        box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.2), 0 0 24px rgba(201, 162, 75, .35);
        animation: bb-code-pulse 2.4s ease-in-out infinite;
    }

    .bb-age__eye {
        position: relative;
        margin: 0 0 8px;
        font-size: var(--bb-text-xs);
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--bb-gold-400);
        animation: bb-rise-in .45s .1s both;
    }

    .bb-age__panel h2 {
        position: relative;
        margin: 0 0 12px;
        font-family: var(--bb-font-display);
        font-weight: 800;
        font-size: clamp(1.35rem, 3.5vw, 1.75rem);
        line-height: 1.2;
        color: var(--bb-on-dark);
        text-wrap: balance;
        animation: bb-rise-in .45s .16s both;
    }

    .bb-age__txt {
        position: relative;
        margin: 0 0 22px;
        color: var(--bb-on-dark-dim);
        font-size: var(--bb-text-m);
        line-height: var(--bb-lh-body);
        animation: bb-rise-in .45s .22s both;
    }

    .bb-age__actions {
        position: relative;
        display: grid;
        gap: 10px;
        animation: bb-rise-in .45s .3s both;
    }

    .bb-age__actions .bb-btn--ghost {
        color: var(--bb-on-dark-dim);
        border-color: rgba(251, 247, 238, 0.18);
    }

    .bb-age__actions .bb-btn--ghost:hover {
        color: var(--bb-on-dark);
        border-color: rgba(251, 247, 238, 0.35);
    }

    .bb-age__note {
        position: relative;
        margin: 18px 0 0;
        font-size: var(--bb-text-xs);
        color: var(--bb-on-dark-dim);
        line-height: 1.45;
        animation: bb-rise-in .45s .38s both;
    }

    .bb-age__note a {
        color: var(--bb-gold-400);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {

        .bb-age,
        .bb-age__panel,
        .bb-age__mark,
        .bb-modal-shine,
        .bb-spark {
            animation: none !important;
        }
    }
}