/* ============================================================
   BAKED BAGS — BASE: reset, fontlar, tipografi, motion temeli
============================================================ */

/* ============================================================
   ANTİ-FLASH — nav/footer/chatbot fetch ile sonradan geldiğinden
   sayfa bir an eksik/ham görünüp "yerine oturuyordu". İçeriği hazır
   olana dek gizle, hazır olunca yumuşak göster. core.js bitince
   .bb-ready ekler; JS çökse/yavaşlasa bile CSS failsafe ~2sn'de açar.
   (Katmansız kural → @layer base'i ezer.)
============================================================ */
body {
    opacity: 0;
    animation: bbAntiFlashReveal .01s linear 2s forwards
}

body.bb-ready {
    opacity: 1;
    animation: none;
    transition: opacity .22s ease
}

@keyframes bbAntiFlashReveal {
    to {
        opacity: 1
    }
}

@media (prefers-reduced-motion:reduce) {
    body.bb-ready {
        transition: none
    }
}

/* — Yazı tipi: Plus Jakarta Sans (tokens.css @import ile yüklenir) — */

@layer base {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%
    }

    /* DİKKAT: html'e overflow-x EKLEME — Chrome'da position:sticky'yi (nav) bozar
     (overflow-x:clip html'de overflow-y'yi de clip'e çevirip dikey scroll/sticky'yi bozar).
     YATAY-TAŞMA KORUMASI = body'de overflow-x:clip (hidden FALLBACK).
     ⚠️ iOS Safari bug'ı: body{overflow-x:hidden} viewport'u dokunmayla yatay PAN edilebilir
     bırakır → ekran bir kenara "kayıp kalıyor". overflow-x:clip (Safari 16+) scroll/pan
     container'ı OLUŞTURMAZ → ne masaüstünde sticky'yi bozar ne iOS'ta pan'a izin verir.
     Eski tarayıcı (Safari<16) hidden'a düşer. body'de clip → viewport'a propagate olur,
     dikey scroll korunur. */
    body {
        font-family: var(--bb-font-body);
        background: var(--bb-surface);
        color: var(--bb-on-light);
        line-height: var(--bb-lh-body);
        min-width: 320px;
        overflow-x: hidden;
        overflow-x: clip;
        overscroll-behavior-x: none;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* ════════════════════════════════════════════════════════════════════
     iOS SAFARI YATAY-PAN GUARD (kullanıcı raporu: 3 sayfada sağa kaydırma).
     Bir öğeye overflow-y:auto verilince TARAYICI overflow-x'i de auto yapar →
     iOS Safari'de o dikey-kaydırma paneli (içerik taşmasa bile, nested-scroll
     glitch'i ile) yana pannable olur ve sayfayı kaydırır. ÇÖZÜM: dikey panellere
     touch-action:pan-y (dokunmayı yalnız dikeye kilitle) + overflow-x:clip
     (yatay scroll konteynerini öldür) + overscroll-behavior:contain (zincirleme yok).
     Masaüstünde 0 taşma çıkar (yalancı-negatif) → bu yalnız gerçek iOS Safari'de.
  ════════════════════════════════════════════════════════════════════ */
    .bb-cart__body,
    .bb-mm__links,
    .bb-chat__body,
    .bb-chat__chips--scroll,
    .odm-mini,
    .odm-summary,
    .adm-sb,
    .admU-body {
        overflow-x: clip;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* Yatay-scroll GEREKEN konteynerler (tablo/tab/rail): yatay overscroll'u kendinde
     tut, sayfaya zincirleme (yatay bounce) yapma. touch-action AUTO kalır (hem yatay
     scroll hem üstünden dikey sayfa scroll çalışsın). */
    .bb-tabs,
    .adm-wrap,
    .lab-table-wrap,
    .urn-filterbar,
    .vid-rail,
    .adm-bars,
    .adm-mini-bars {
        overscroll-behavior-x: contain;
    }

    a {
        text-decoration: none;
        color: inherit
    }

    ul,
    ol {
        list-style: none
    }

    img,
    svg,
    video {
        max-width: 100%;
        display: block
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: var(--bb-font-body);
        color: inherit
    }

    input,
    textarea,
    select {
        font-family: var(--bb-font-body);
        font-size: 16px;
        outline: none
    }

    /* font-size:16px ZORUNLU → iOS Safari, <16px input'a odaklanınca sayfayı otomatik
     yakınlaştırır ("yazı yazınca zoom"). 16px bunu tüm tarayıcılarda engeller. */
    ::selection {
        background: var(--bb-teal-400);
        color: var(--bb-cacao-900)
    }

    h1,
    h2,
    h3,
    h4 {
        font-weight: var(--bb-fw-display);
        line-height: var(--bb-lh-snug)
    }

    /* — Display tipografi yardımcıları (modern grotesk: ağır + sıkı izleme) — */
    .bb-display {
        font-family: var(--bb-font-display);
        font-weight: var(--bb-fw-display);
        line-height: var(--bb-lh-tight);
        letter-spacing: var(--bb-ls-display)
    }

    .bb-dx {
        font-family: var(--bb-font-display);
        font-weight: var(--bb-fw-display);
        font-size: var(--bb-display-xl);
        line-height: var(--bb-lh-tight);
        letter-spacing: var(--bb-ls-display)
    }

    .bb-d1 {
        font-family: var(--bb-font-display);
        font-weight: var(--bb-fw-display);
        font-size: var(--bb-display-l);
        line-height: var(--bb-lh-tight);
        letter-spacing: var(--bb-ls-display)
    }

    .bb-d2 {
        font-family: var(--bb-font-display);
        font-weight: var(--bb-fw-display);
        font-size: var(--bb-display-m);
        line-height: 1.08;
        letter-spacing: var(--bb-ls-display)
    }

    .bb-d3 {
        font-family: var(--bb-font-display);
        font-weight: var(--bb-fw-display);
        font-size: var(--bb-display-s);
        line-height: 1.1;
        letter-spacing: var(--bb-ls-display)
    }

    /* — Etiket (uppercase, harf aralıklı) — */
    .bb-eyebrow {
        font-size: var(--bb-text-xs);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: var(--bb-ls-label);
        color: var(--bb-teal-700);
        display: inline-flex;
        align-items: center;
        gap: var(--bb-2);
    }

    .bb-eyebrow::before {
        content: "";
        width: 26px;
        height: 1px;
        background: var(--bb-gold-700);
        display: inline-block
    }

    /* — Layout — */
    .bb-container {
        max-width: var(--bb-container);
        margin-inline: auto;
        padding-inline: var(--bb-pad-x);
        width: 100%
    }

    .bb-section {
        padding-block: var(--bb-pad-y)
    }

    .bb-section--dark {
        background: var(--bb-surface-dark);
        color: var(--bb-on-dark)
    }

    .bb-section--ivory {
        background: var(--bb-grad-ivory)
    }

    .bb-section-head {
        max-width: 680px;
        margin-bottom: var(--bb-7)
    }

    .bb-section-head.center {
        margin-inline: auto;
        text-align: center
    }

    .bb-section-head p {
        margin-top: var(--bb-3);
        color: var(--bb-on-light-dim);
        font-size: var(--bb-text-l)
    }

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

    .bb-grid {
        display: grid;
        gap: var(--bb-5)
    }

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

    .bb-text-teal {
        color: var(--bb-teal-500)
    }

    /* — Scroll reveal (IntersectionObserver .is-in ekler) — */
    .reveal {
        opacity: 1;
        transform: translateY(40px);
        transition: opacity var(--bb-dur-slow) var(--bb-ease-standard), transform var(--bb-dur-slow) var(--bb-ease-standard)
    }

    /* ⚠️ KRİTİK iOS FIX: reveal-l/r ESKİDEN translateX(±46px) idi → öğeler sayfa açılışında 46px
     yana KAYMIŞ başlıyor (observer .is-in ekleyene kadar). iOS Safari bu TRANSFORM-taşmasını
     overflow-x:clip ile KIRPMIYOR → "sayfa açılınca sağa kaygan, scroll/bekleme ile düzeliyor"
     bug'ı. (Masaüstü Chrome clip'i kırpıyor → 0 ölçülüyor → yalancı-negatif, bende görünmüyordu.)
     translateY'e çevrildi → yatay taşma kaynağı YOK. Yatay reveal İSTENİRSE kapsayıcıya overflow:clip şart. */
    .reveal-l {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity var(--bb-dur-slow) var(--bb-ease-standard), transform var(--bb-dur-slow) var(--bb-ease-standard)
    }

    .reveal-r {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity var(--bb-dur-slow) var(--bb-ease-standard), transform var(--bb-dur-slow) var(--bb-ease-standard)
    }

    .reveal-scale {
        opacity: 1;
        transform: scale(.9) translateY(22px);
        transition: opacity var(--bb-dur-slow) var(--bb-ease-standard), transform var(--bb-dur-slow) var(--bb-ease-emphasized)
    }

    .reveal.is-in,
    .reveal-l.is-in,
    .reveal-r.is-in,
    .reveal-scale.is-in {
        opacity: 1;
        transform: none
    }

    .d1 {
        transition-delay: .07s
    }

    .d2 {
        transition-delay: .14s
    }

    .d3 {
        transition-delay: .21s
    }

    .d4 {
        transition-delay: .28s
    }

    .d5 {
        transition-delay: .35s
    }

    .d6 {
        transition-delay: .42s
    }

    @keyframes bb-float {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-14px)
        }
    }

    @keyframes bb-float-s {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-9px)
        }
    }

    @keyframes bb-sheen {
        0% {
            transform: translateX(-120%)
        }

        100% {
            transform: translateX(120%)
        }
    }

    @keyframes bb-pulse {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(63, 180, 180, .45)
        }

        70% {
            box-shadow: 0 0 0 14px rgba(63, 180, 180, 0)
        }
    }

    @keyframes bb-spin {
        to {
            transform: rotate(360deg)
        }
    }

    @keyframes bb-ticker {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(-50%)
        }
    }

    @keyframes bb-toast-in {
        from {
            transform: translateX(120%);
            opacity: 0
        }

        to {
            transform: translateX(0);
            opacity: 1
        }
    }

    @keyframes bb-toast-out {
        from {
            transform: translateX(0);
            opacity: 1
        }

        to {
            transform: translateX(120%);
            opacity: 0
        }
    }

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

        to {
            transform: scale(1) translateY(0);
            opacity: 1
        }
    }
}

/* — Erişilebilirlik: hareketi azalt — */
/* Hareketi azalt: içerik her zaman görünür kalsın, marka motion'ı (ticker, hover
   geçişleri, menü çizgisi) korunsun; yalnız sürekli zıplayan/parıldayan dekoratif
   döngüleri sakinleştir. (Nuclear *-override ticker'ı ve UI geri bildirimini öldürüyordu.) */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    .reveal,
    .reveal-l,
    .reveal-r,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important
    }

    .hero__art img.main,
    .hero__chip,
    .cta-band::before,
    .bb-fab,
    .vh__stage img,
    .vh__chip,
    .vt-strip__track {
        animation: none !important
    }
}

/* ============================================================
   PREMIUM BİTİŞ (global, sade — tüm sayfalara tutarlı yükseltme)
============================================================ */
@layer base {

    /* Yetim kelime / dengesiz satır kırılımı yok → editöryel bitiş */
    h1,
    h2,
    h3,
    h4,
    .bb-display,
    .bb-dx,
    .bb-d1,
    .bb-d2,
    .bb-d3 {
        text-wrap: balance;
        overflow-wrap: break-word
    }

    p,
    .bb-section-head p,
    figcaption {
        text-wrap: pretty
    }

    /* Sayısal hizalama — fiyat/istatistik "mühendislik" hissi (tek genişlik rakam) */
    .bb-stat b,
    .bb-cart__total b,
    .urun-kart__price .now,
    .bb-cart-line .price {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum"1
    }

    /* Erişilebilir, markaya uygun odak halkası (klavye) — input'lar kendi :focus'unu korur */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    label.gir-remember:focus-within {
        outline: 2px solid var(--bb-teal-500);
        outline-offset: 2px;
        border-radius: var(--bb-r-sm)
    }
}

/* ════════════════════════════════════════════════════════════════
   MOBİL — display başlık ölçeği. bb-d1/bb-d2 (46px / 34px+) başlıklar
   uzun Türkçe kelimelerle (ör. "VAPELEYENLERİN") dar ekranda kabı
   taşıp viewport kenarında kırpılıyordu. Mobilde ölçeği düşür → her şey
   sığar, hiyerarşi korunur. Unlayered → tokens.css @layer'ını ezer.
═════════════════════════════════════════════════════════════════ */
@media (max-width:600px) {
    :root {
        --bb-display-l: clamp(34px, 8.6vw, 46px);
        --bb-display-m: clamp(28px, 6.8vw, 40px);
    }
}