/* ==========================================================================
   Backcourt — tasarım belirteçleri
   Renk, tipografi, boşluk, hareket ve yükseklik ölçekleri.
   ========================================================================== */

:root {
  /* --- yüzeyler: logonun lacivert plakası ----------------------------- */
  --brand-navy: #000820;   /* logo zemini — marka plakalarında birebir kullanılır */
  --bg-0: #04091a;
  --bg-1: #081023;
  --bg-2: #0f1a2e;
  --surface-1: rgba(255, 255, 255, .034);
  --surface-2: rgba(255, 255, 255, .056);
  --surface-3: rgba(255, 255, 255, .082);
  --hairline: rgba(255, 255, 255, .085);
  --hairline-strong: rgba(255, 255, 255, .16);

  /* --- metin ---------------------------------------------------------- */
  --text: #eef3fb;
  --text-2: #a9b7cf;
  --text-3: #6c7c98;
  --text-4: #4a586f;

  /* --- vurgular ------------------------------------------------------- */
  --amber: #f7a72b;
  --amber-2: #ffc766;
  --amber-ink: #150f02;
  --mint: #2fd39b;
  --sky: #4ea8f5;
  --violet: #9b7bf7;
  --rose: #f2555a;
  --wood: #b9743a;

  /* --- ışıma ---------------------------------------------------------- */
  --glow-amber: 0 0 0 1px rgba(247, 167, 43, .34), 0 8px 30px -8px rgba(247, 167, 43, .48);
  --glow-mint: 0 0 0 1px rgba(47, 211, 155, .32), 0 8px 26px -10px rgba(47, 211, 155, .42);

  /* --- yükseklik ------------------------------------------------------ */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .32);
  --sh-2: 0 4px 14px -4px rgba(0, 0, 0, .5);
  --sh-3: 0 18px 44px -14px rgba(0, 0, 0, .68);
  --sh-4: 0 34px 80px -20px rgba(0, 0, 0, .8);

  /* --- yarıçap -------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- boşluk (4px tabanlı) ------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 42px;
  --s-8: 60px;

  /* --- tipografi ------------------------------------------------------ */
  --font-display: 'Barlow Condensed', 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 27px;
  --t-3xl: 38px;
  --t-4xl: 54px;

  /* --- hareket -------------------------------------------------------- */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-snap: cubic-bezier(.16, 1, .3, 1);
  --d-fast: 140ms;
  --d-mid: 260ms;
  --d-slow: 460ms;

  /* --- kabuk ölçüleri -------------------------------------------------- */
  --topbar-h: 58px;
  --rail-w: 208px;
  --tabbar-h: 62px;
  /* Güvenli alan. Tarayıcıda `env()` doğru değeri veriyor; mağaza kabuğunun
     WebView'ında SIFIR dönüyor, o yüzden kabuk gerçek değerleri satır içi
     özel özellik olarak yazıyor ve bu satırları eziyor
     (bkz. js/core/host.js → setInsets). */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Ekran klavyesinin kapladığı yükseklik. Klavye kapalıyken sıfır; açılınca
     `core/platform.js` gerçek değeri yazıyor. iOS'ta yerleşim görünümü klavye
     için KÜÇÜLMÜYOR, o yüzden alta yapışan her şeyin bu kadar yukarı
     itilmesi gerekiyor. */
  --kb: 0px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Hareket duyarlılığı: tüm süsleyici animasyonlar kapanır. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-mid: 1ms;
    --d-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}