/* ============================================================
   variables.css — Tasarım Tokenleri (Design Tokens)
   Tüm site genelinde kullanılan renk, tipografi, boşluk,
   gölge, geçiş ve z-index değişkenleri burada tanımlanır.
   ============================================================ */

:root {

  /* --- Renk Paleti (Color Palette) --- */

  /* Ana marka rengi — logo siyahından türetilmiş koyu antrasit */
  --color-primary: #1e1e1e;
  /* Hover durumu — hafif açık antrasit */
  --color-primary-hover: #3a3a3a;
  /* Aktif/pressed durumu — tam siyah */
  --color-primary-active: #000000;

  /* Logo gri aksanı — ayırıcılar, vurgular için */
  --color-accent: #919396;
  --color-accent-light: rgba(145, 147, 150, 0.15);

  /* Koyu tonlar — metin ve arka planlar için */
  --color-dark: #0A0A0A;
  /* en koyu — hero overlay, koyu bölümler */
  --color-gray-900: #1A1A1A;
  /* ana metin rengi */
  --color-gray-700: #3A3A3A;
  /* ikincil metin */
  --color-gray-500: #6B6B6B;
  /* açıklama/yardımcı metin */
  --color-gray-400: #999999;
  /* placeholder, devre dışı metin */
  --color-gray-300: #C4C4C4;
  /* kenarlıklar, ayırıcılar */
  --color-gray-200: #E0E0E0;
  /* hafif kenarlık */
  --color-gray-100: #F4F4F4;
  /* açık zemin bölümleri */
  --color-gray-50: #FAFAFA;
  /* kart arka planı */

  /* Beyaz — temel zemin */
  --color-white: #FFFFFF;

  /* Aksan renkler — bilgi, başarı gibi durum renkleri */
  --color-accent-blue: #0066CC;
  /* linkler, bilgi vurgusu */
  --color-accent-green: #28A745;
  /* başarı durumu */

  /* --- Tipografi (Typography) --- */

  /* Ana font ailesi — Inter (next/font/google ile self-host edilir) */
  --font-family: var(--font-family-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Başlık font ağırlığı */
  --font-weight-bold: 700;
  /* Normal metin font ağırlığı */
  --font-weight-regular: 400;
  /* Orta ağırlık — alt başlıklar için */
  --font-weight-medium: 500;
  /* İnce ağırlık — büyük dekoratif metinler için */
  --font-weight-light: 300;

  /* Fluid (responsive) font boyutları — clamp ile min, tercih, max */
  --font-size-hero: clamp(2.2rem, 5vw, 4rem);
  /* hero başlık */
  --font-size-h1: clamp(1.8rem, 3.5vw, 3rem);
  /* sayfa başlıkları */
  --font-size-h2: clamp(1.4rem, 2.5vw, 2.2rem);
  /* bölüm başlıkları */
  --font-size-h3: clamp(1.1rem, 2vw, 1.5rem);
  /* alt başlıklar */
  --font-size-body: 1rem;
  /* gövde metni (16px) */
  --font-size-small: 0.875rem;
  /* küçük metin (14px) */
  --font-size-xs: 0.75rem;
  /* en küçük metin (12px) */

  /* Satır yüksekliği */
  --line-height-tight: 1.2;
  /* başlıklar için */
  --line-height-normal: 1.6;
  /* gövde metni için */
  --line-height-loose: 1.8;
  /* uzun paragraflar için */

  /* --- Boşluk Sistemi (Spacing Scale) --- */

  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2rem;
  /* 32px */
  --space-2xl: 3rem;
  /* 48px */
  --space-3xl: 4rem;
  /* 64px */
  --space-4xl: 6rem;
  /* 96px */
  --space-5xl: 8rem;
  /* 128px */

  /* --- Kenarlık Yarıçapı (Border Radius) --- */

  --radius-sm: 4px;
  /* küçük elemanlar, badge */
  --radius-md: 8px;
  /* kartlar, inputlar */
  --radius-lg: 12px;
  /* büyük kartlar */
  --radius-xl: 16px;
  /* modal, panel */
  --radius-full: 9999px;
  /* tam yuvarlak — pill butonlar */

  /* --- Gölgeler (Box Shadows) --- */

  /* Hafif gölge — kartlar, normal durum */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Orta gölge — hover durumu */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  /* Güçlü gölge — dropdown, modal */
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.16);
  /* Çok güçlü gölge — hero üzeri elemanlar */
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);

  /* --- Geçiş Süreleri (Transitions) --- */

  /* Hızlı geçiş — hover efektleri */
  --transition-fast: 0.2s ease;
  /* Normal geçiş — menü açılma, kart animasyonu */
  --transition-normal: 0.3s ease;
  /* Yavaş geçiş — sayfa geçişleri, hero slider */
  --transition-slow: 0.5s ease;
  /* Çok yavaş — arka plan animasyonları */
  --transition-slower: 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-Index Katmanları --- */

  --z-dropdown: 100;
  /* dropdown menüler */
  --z-sticky: 200;
  /* sticky header */
  --z-overlay: 300;
  /* overlay arka planı */
  --z-modal: 400;
  /* modal pencereler */
  --z-toast: 500;
  /* bildirimler */

  /* --- Container Genişlikleri --- */

  --container-max: 1200px;
  /* ana içerik max genişliği */
  --container-narrow: 800px;
  /* dar içerik (hakkımızda metni vb.) */
  --container-wide: 1400px;
  /* geniş içerik (hero, tam genişlik) */
  --container-padding: 1.5rem;
  /* container yan boşluk */
}