/* ==========================================================================
   GIBRIN — TASARIM SİSTEMİ / DESIGN TOKENS
   Bu dosya, sitenin tamamında kullanılan tekrar kullanılabilir CSS
   değişkenlerini (design token) içerir. Renk, tipografi, boşluk, kenarlık,
   gölge ve breakpoint değerleri burada TEK NOKTADAN yönetilir.
   Yeni bir sayfa / bileşen eklerken önce burada karşılığı olup olmadığına
   bakılmalı, doğrudan hex/px değeri yazılmamalıdır.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     1. RENK PALETİ
     Marka rengi (deniz mavisi) sayfanın geneline değil; buton, ikon,
     link, hover ve küçük vurgu alanlarında kullanılır.
     -------------------------------------------------------------------- */

  /* Arka planlar */
  --color-bg: #FAFAF8;            /* Ana sayfa arka planı (kırık beyaz) */
  --color-surface: #FFFFFF;       /* Kart / içerik yüzeyi */
  --color-surface-alt: #E8F5F9;   /* Açık mavi yardımcı alan arka planı */
  --color-surface-dark: #15232B;  /* Koyu yüzey (footer vb.) */
  --color-header-bg: #102F3B;     /* Header'a özel koyu petrol mavisi */

  /* Marka / vurgu rengi — deniz mavisi */
  --color-primary: #087EA4;
  --color-primary-hover: #066a8a;
  --color-primary-active: #05586f;
  --color-primary-soft: rgba(8, 126, 164, 0.08);   /* hafif vurgu / hover zemini */
  --color-primary-soft-strong: rgba(8, 126, 164, 0.16);

  /* Turkuaz vurgu — yalnızca tam ekran/panel navigasyon menüsünün
     (bkz. components.css → NAVİGASYON MENÜSÜ) dekoratif dikey şeritleri
     ve hover/aktif vurgusu için; site genelinde kullanılmaz. */
  --color-accent-turquoise: #17B6C4;

  /* Metin renkleri */
  --color-heading: #15232B;       /* Koyu başlık */
  --color-text: #4B5961;          /* Normal metin */
  --color-text-muted: #7C8991;    /* İkincil / açıklama metni */
  --color-text-on-dark: rgba(255, 255, 255, 0.92);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.62);

  /* Kenarlık & ayraç */
  --color-border: #E7EAEC;
  --color-border-on-dark: rgba(255, 255, 255, 0.12);

  /* Yardımcı */
  --color-white: #FFFFFF;
  --color-overlay: rgba(21, 35, 43, 0.55);
  --color-success: #1E8E5A;
  --color-error: #C4453B;

  /* --------------------------------------------------------------------
     2. TİPOGRAFİ
     Başlıklarda geometrik / teknik hissi güçlü "Space Grotesk",
     gövde metninde okunabilirliği yüksek "Inter" kullanılır.
     -------------------------------------------------------------------- */
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Akıcı (fluid) başlık boyutları */
  --fs-h1: clamp(2.25rem, 1.85rem + 1.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);

  /* Gövde metni boyutları */
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.8125rem;

  /* Ağırlıklar */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Satır yükseklikleri */
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --lh-tight: 1.35;

  /* Harf aralığı */
  --ls-eyebrow: 0.08em;
  --ls-heading: -0.01em;

  /* --------------------------------------------------------------------
     3. BOŞLUK ÖLÇEĞİ (4px taban)
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6rem;     /* 96px */
  --space-12: 8rem;     /* 128px */

  /* --------------------------------------------------------------------
     4. KENARLIK YARIÇAPI
     Kurumsal / mühendislik hissi için aşırı yuvarlatmadan kaçınılır.
     -------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px; /* yalnızca etiket / rozet gibi küçük öğeler için */

  /* --------------------------------------------------------------------
     5. GÖLGELER (yalnızca hafif derinlik için, ağır/neon değil)
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(21, 35, 43, 0.05);
  --shadow-md: 0 4px 16px rgba(21, 35, 43, 0.08);
  --shadow-lg: 0 16px 40px rgba(21, 35, 43, 0.10);

  /* --------------------------------------------------------------------
     6. KONTEYNER / GRID
     -------------------------------------------------------------------- */
  --container-max-width: 1200px;
  --container-max-width-narrow: 800px;
  --container-padding-inline: 1.5rem;
  --grid-gap: var(--space-6);

  /* --------------------------------------------------------------------
     7. GEÇİŞLER (aşırı animasyon yok — yalnızca hover/focus için ince geçiş)
     -------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 400ms ease;

  /* Yalnızca sağdan açılan navigasyon panelinin (bkz. components.css →
     NAVİGASYON MENÜSÜ) açılış-kapanış hareketi için; site genelindeki
     diğer geçişleri ETKİLEMEZ. */
  --transition-menu: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-menu-fast: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* --------------------------------------------------------------------
     8. Z-INDEX ÖLÇEĞİ
     -------------------------------------------------------------------- */
  --z-header: 100;
  --z-nav-mobile: 90;
  --z-modal: 200;
  --z-toast: 300;

  /* --------------------------------------------------------------------
     9. BREAKPOINT REFERANSI (dokümantasyon amaçlı)
     CSS custom property'ler @media içinde kullanılamadığından, bu
     değerler media query'lerde LİTERAL olarak birebir yazılır.
     Tüm dosyalarda bu 4 kırılım noktası referans alınmalıdır:
       --bp-sm : 480px  (büyük telefon)
       --bp-md : 768px  (tablet)
       --bp-lg : 1024px (küçük dizüstü / tablet yatay)
       --bp-xl : 1280px (geniş masaüstü)
     -------------------------------------------------------------------- */
}