/* ============================================================
   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:0;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:0;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);
  }
}