/* Sayhan Oto Kurtarma — Design Tokens
   Tüm renk, boyut ve süre değerleri yalnızca burada tanımlanır.
   Renk kuralı 60/30/10: %60 koyu lacivert zemin, %30 amber vurgu, %10 kırmızı/yeşil eylem butonları. */
:root {
  /* ---------- Renkler ---------- */
  /* %10 — acil eylem */
  --color-primary: #dc2626;          /* ateş kırmızı — tüm ARA butonları */
  --color-primary-hover: #b91c1c;
  --color-whatsapp: #22c55e;         /* WhatsApp yeşili — üstündeki metin koyu (kontrast) */
  --color-whatsapp-hover: #16a34a;
  /* %30 — kurumsal vurgu (tepe lambası amberi) */
  --color-secondary: #f59e0b;
  --color-secondary-hover: #d97706;
  /* %60 — dominant koyu zemin */
  --color-dark: #0f172a;
  --color-dark-soft: #1e293b;
  --color-bg: #0f172a;
  --color-bg-alt: #131d33;
  --color-surface: #1e293b;
  --color-surface-hover: #273449;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #cbd5e1;
  --color-on-accent: #0f172a;        /* amber / yeşil üstündeki metin */
  --color-border: #334155;
  --color-border-dark: #1e293b;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  /* Saydam tonlar */
  --color-overlay-strong: rgba(15, 23, 42, 0.92);
  --color-overlay-mid: rgba(15, 23, 42, 0.55);
  --color-overlay-soft: rgba(15, 23, 42, 0.15);
  --color-backdrop: rgba(2, 6, 23, 0.9);
  --color-glass: rgba(30, 41, 59, 0.94);
  --color-shine: rgba(255, 255, 255, 0.35);
  --color-pulse-call: rgba(220, 38, 38, 0.6);
  --color-pulse-whatsapp: rgba(34, 197, 94, 0.55);
  --color-pulse-none: rgba(0, 0, 0, 0);
  --color-headlight: #fffbe6;
  --color-headlight-glow: rgba(255, 236, 170, 0.85);
  --color-beacon-glow: rgba(245, 158, 11, 0.95);
  --color-transparent: rgba(0, 0, 0, 0);

  /* İkaz şeridi (amber / lacivert çapraz) */
  --hazard-stripe: repeating-linear-gradient(-45deg, var(--color-secondary) 0 14px, var(--color-dark) 14px 28px);
  --hazard-stripe-sm: repeating-linear-gradient(-45deg, var(--color-secondary) 0 5px, var(--color-dark) 5px 10px);

  /* ---------- Tipografi (Inter) ---------- */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --font-size-3xl: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
  --font-size-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-base: 1.65;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.06em;
  --letter-spacing-wider: 0.14em;

  /* ---------- Boşluk ---------- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 104px;

  /* ---------- Yerleşim ---------- */
  --container-width: 1200px;
  --container-narrow: 760px;
  --header-height: 68px;
  --logo-size: 50px;
  --logo-footer-width: 200px;
  --touch-target: 44px;
  --label-width: 120px;
  --sub-nav-width: 260px;
  --timeline-card-width: 86%;
  --timeline-icon-size: 128px;
  --timeline-icon-opacity: 0.07;
  --dash-size: 10px;
  --caret-size: 5px;
  --icon-size: 20px;
  --icon-size-lg: 28px;
  --border-width: 1px;
  --border-width-thick: 3px;
  --accent-bar-width: 56px;
  --accent-bar-height: 8px;
  --hero-min-height: 88svh;
  --page-hero-min-height: 62svh;
  --card-media-ratio: 4 / 3;
  --scroller-item-width: 78%;

  /* Dock (mobil hızlı iletişim) */
  --dock-height: 64px;
  --dock-call-size: 72px;
  --dock-icon-size: 36px;
  --dock-call-lift: -22px;
  --dock-gap: 12px;
  --dock-reserve: 108px;            /* sayfa altında dock için ayrılan boşluk */

  /* Galeri */
  --gallery-row: 220px;

  /* ---------- Diğer ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.75);
  --shadow-up: 0 -10px 30px -8px rgba(0, 0, 0, 0.6);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --duration-reveal: 0.9s;
  --duration-line: 0.9s;
  --duration-wipe: 0.9s;
  --duration-slide: 6s;
  --duration-kenburns: 9s;
  --delay-step: 0.08s;
  --pulse-duration: 2.2s;
  --pulse-spread: 14px;
  --reveal-distance: 32px;
  --splash-hold: 1.5s;               /* çekicinin ekranda kalma süresi */
  --splash-fade: 0.5s;               /* çekicinin çıkıp ekranın açılma süresi */
  --splash-flash: 0.7s;              /* sellektör (iki yakma) süresi */
  --splash-flash-delay: 0.75s;       /* çekici durduktan sonra */
  --splash-offset: 0s;               /* açılış ekranı varken giriş animasyonlarına eklenen gecikme */
  --splash-truck-width: min(84vw, 460px);
  --splash-truck-ratio: 568 / 267;
  --splash-drive-distance: 110vw;

  --z-base: 1;
  --z-overlay: 2;
  --z-content: 3;
  --z-header: 50;
  --z-dock: 60;
  --z-lightbox: 100;
  --z-splash: 200;
}