/* =========================================================================
   İMO Ankara Şubesi — 2027 Ajanda Sponsorluk Sayfası
   Tasarım tokenları (yalnızca :root değişkenleri)
   Kaynak rehber: docs/marka-rehberi.md
   Fontlar Google Fonts <link> ile yüklenir (bkz. rehber §3).

   Kırılım noktaları (CSS değişkeni media query'de kullanılamaz; referans):
     --bp-sm : 480px   (büyük telefon)
     --bp-md : 768px   (tablet)
     --bp-lg : 1024px  (küçük masaüstü)
     --bp-xl : 1280px  (masaüstü)
   Mobil öncelikli yazın: @media (min-width: 768px) { ... }
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. MARKA MAVİSİ — #004D9D (= 600) temelli skala
     --------------------------------------------------------------------- */
  --mavi-50:  #EEF5FC;
  --mavi-100: #D6E6F7;
  --mavi-200: #ADCCEE;
  --mavi-300: #7DADE2;
  --mavi-400: #4A88D0;
  --mavi-500: #1A66B8;
  --mavi-600: #004D9D; /* ANA MARKA RENGİ — logo mavisi */
  --mavi-700: #003F82;
  --mavi-800: #003268;
  --mavi-900: #00264F;
  --mavi-950: #001834;

  --renk-ana: var(--mavi-600);
  --renk-ana-hover: var(--mavi-700);
  --renk-ana-aktif: var(--mavi-800);
  --renk-ana-acik: var(--mavi-50);

  /* Koyu lacivert zemin (hero, footer, koyu bantlar) */
  --lacivert-900: #071A33;
  --lacivert-800: #0A2A52;
  --lacivert-700: #0F3566;
  --lacivert-600: #17457F;

  /* ---------------------------------------------------------------------
     2. AKSAN — Camgöbeği (mavi ile analog, teknik/çizim hissi)
     Açık zeminde metin/CTA için --camgobegi-700 (beyaz metinle 5.68:1)
     Koyu zeminde vurgu/CTA için --camgobegi-400 (lacivert metinle 8.24:1)
     --------------------------------------------------------------------- */
  --camgobegi-50:  #E6F8FA;
  --camgobegi-100: #C2EEF2;
  --camgobegi-200: #8FDFE6;
  --camgobegi-300: #5CD1DB;
  --camgobegi-400: #2EC4D0;
  --camgobegi-500: #13A6B3;
  --camgobegi-600: #008894;
  --camgobegi-700: #00727C;
  --camgobegi-800: #00636C;
  --camgobegi-900: #004A51;

  --renk-aksan: var(--camgobegi-700);
  --renk-aksan-hover: var(--camgobegi-800);
  --renk-aksan-koyu-zemin: var(--camgobegi-400);

  /* ---------------------------------------------------------------------
     3. NÖTR GRİ — hafif mavi tonlu "çelik" griler
     --------------------------------------------------------------------- */
  --gri-0:   #FFFFFF;
  --gri-25:  #F7F9FC;
  --gri-50:  #F1F3F5;
  --gri-100: #E7EBF0;
  --gri-200: #DDE3EA;
  --gri-300: #C3C9D1;
  --gri-400: #8A94A3;
  --gri-500: #6B7685;
  --gri-600: #5B6472;
  --gri-700: #4A5568;
  --gri-800: #2D3748;
  --gri-900: #16202E;

  /* ---------------------------------------------------------------------
     4. SEMANTİK — AÇIK TEMA (esas)
     --------------------------------------------------------------------- */
  --zemin:          var(--gri-25);   /* sayfa arka planı */
  --zemin-alt:      var(--mavi-50);  /* dönüşümlü bölüm bandı */
  --yuzey:          var(--gri-0);    /* kart, panel, form */
  --yuzey-yukseltilmis: var(--gri-0);
  --yuzey-vurgulu:  var(--mavi-50);

  --kenarlik:       var(--gri-200);  /* dekoratif ayırıcı */
  --kenarlik-guclu: var(--gri-500);  /* form alanı, UI sınırı (>=3:1) */
  --kenarlik-ana:   var(--mavi-600);

  --metin:          var(--gri-900);  /* 16.40:1 beyaz üzerinde */
  --metin-ikincil:  var(--gri-700);  /* 7.53:1 */
  --metin-soluk:    var(--gri-600);  /* 5.98:1 — en açık izinli metin grisi */
  --metin-ters:     var(--gri-0);
  --metin-baslik:   var(--mavi-900);
  --metin-link:     var(--mavi-600); /* 8.24:1 */
  --metin-link-hover: var(--mavi-800);

  /* Odak: YALNIZ --odak-golge ile verilir (:focus-visible { box-shadow: var(--odak-golge); }).
     Ayrı bir odak rengi tokenı yoktur; camgöbeği-500 beyaz üzerinde 2.94:1 olduğundan
     odak için kullanılmaz. Mavi halka açık zeminde 8.24:1. */
  --odak-golge:     0 0 0 3px var(--gri-0), 0 0 0 5px var(--mavi-600);
  /* Koyu bölümde (.koyu) odak: lacivert boşluk + camgöbeği-400 halka (8.24:1) */
  --odak-golge-koyu: 0 0 0 3px var(--lacivert-900), 0 0 0 5px var(--camgobegi-400);

  /* Geri bildirim (form doğrulama vb.) */
  --basari:  #16703F;
  --uyari:   #8A5A00;
  --hata:    #A8322D;
  --hata-zemin: #FBEAE9;
  --bilgi:   var(--mavi-600);

  /* ---------------------------------------------------------------------
     5. SEMANTİK — KOYU YÜZEY (hero, koyu bölümler, footer)
     Koyu bölüme .koyu sınıfı verip bu tokenları kullanın.
     --------------------------------------------------------------------- */
  --koyu-zemin:        var(--lacivert-900);
  --koyu-yuzey:        var(--lacivert-800);
  --koyu-yuzey-2:      var(--lacivert-700);
  --koyu-kenarlik:     rgba(173, 204, 238, 0.18);
  --koyu-kenarlik-guclu: rgba(173, 204, 238, 0.45);
  --koyu-metin:        #FFFFFF;          /* 17.43:1 */
  --koyu-metin-ikincil: var(--mavi-200); /* 10.50:1 */
  --koyu-metin-soluk:  var(--mavi-300);  /*  7.43:1 */
  --koyu-vurgu:        var(--camgobegi-400);
  --koyu-cizgi:        rgba(125, 173, 226, 0.22); /* teknik çizim ızgarası */
  --koyu-gradyan: linear-gradient(160deg, var(--lacivert-900) 0%, var(--mavi-900) 55%, var(--mavi-800) 100%);

  /* ---------------------------------------------------------------------
     6. ALAN DURUM RENKLERİ
     Her durum: -zemin (dolgu), -metin, -kenarlik, -ikon
     Renk tek başına anlam taşımaz: ikon + etiket + desen zorunlu (rehber §5)
     Görsel + etkileşim kurallarının TEK kaynağı: docs/marka-rehberi.md §5
     (UX §2.7 bu tabloya atıf yapar)
     --------------------------------------------------------------------- */
  /* Müsait — yeşil, düz dolgu, ikon: circle-plus. Seçilebilir */
  --durum-musait:          #16703F;
  --durum-musait-zemin:    #E7F5EE;
  --durum-musait-metin:    #16703F; /* 5.46:1 zemin üzerinde */
  --durum-musait-kenarlik: #2A9460; /* 3.40:1 zemin, 3.82:1 beyaz */

  /* Opsiyonlu — kehribar, kesik çizgili kenarlık, ikon: hourglass.
     SEÇİLEBİLİR; kartta ve özette ön görüşme uyarısı gösterilir */
  --durum-opsiyonlu:          #8A5A00;
  --durum-opsiyonlu-zemin:    #FFF4DC;
  --durum-opsiyonlu-metin:    #8A5A00; /* 5.43:1 */
  --durum-opsiyonlu-kenarlik: #A86F00; /* 3.89:1 zemin */
  --durum-opsiyonlu-desen: repeating-linear-gradient(135deg, transparent 0 6px, rgba(168, 111, 0, 0.10) 6px 8px);

  /* Satıldı — kiremit kırmızı, 45° tarama, ikon: lock.
     Seçilemez, odaklanabilir (aria-disabled="true") */
  --durum-satildi:          #A8322D;
  --durum-satildi-zemin:    #FBEAE9;
  --durum-satildi-metin:    #A8322D; /* 5.71:1 */
  --durum-satildi-kenarlik: #C0453F; /* 4.33:1 zemin — düz 1.5px (UX §2.7 ile eş) */
  --durum-satildi-desen: repeating-linear-gradient(45deg, transparent 0 5px, rgba(168, 50, 45, 0.14) 5px 7px);

  /* Kapalı — gri, noktalı kenarlık, ikon: circle-minus; opaklık düşürülmez.
     Modelde nötr, odaklanmaz; listede gizli */
  --durum-kapali:          #5B6472;
  --durum-kapali-zemin:    #F1F3F5;
  --durum-kapali-metin:    #5B6472; /* 5.38:1 */
  --durum-kapali-kenarlik: #6B7685; /* ~4.1:1 zemin */
  --durum-kapali-desen: repeating-linear-gradient(90deg, transparent 0 7px, rgba(91, 100, 114, 0.10) 7px 8px);

  /* Seçili — marka mavisi DÜZ dolgu, 2px kenarlık + camgöbeği halka, ikon: check */
  --durum-secili:          #004D9D;
  --durum-secili-zemin:    #004D9D;
  --durum-secili-metin:    #FFFFFF; /* 8.24:1 */
  --durum-secili-kenarlik: #003268;
  --durum-secili-halka:    0 0 0 3px var(--camgobegi-400);

  /* ---------------------------------------------------------------------
     6b. AJANDA SAHNESİ — kâğıt yüzeyleri (rehber §8b, UX §10.4)
     --------------------------------------------------------------------- */
  --kagit:  #FFFFFF;       /* kuşe + kapak sayfası zemini (hafif soğuk beyaz) */
  --hamur:  var(--gri-25); /* I. hamur sayfa zemini (çok hafif krem/gri) */
  --golge-kagit: var(--golge-md); /* sahnedeki sayfa gölgesi */
  /* Her Sayfa Altı şeridinin sayfa yüksekliğine oranı.
     TEMSİLÎ — [BELİRLENECEK: şerit yüksekliği]; belli olunca yalnız bu değer güncellenir. */
  --serit-oran: 12%;

  /* ---------------------------------------------------------------------
     7. TİPOGRAFİ
     Başlık: Plus Jakarta Sans (geometrik, logodaki yazıyla akraba)
     Gövde : Inter (Türkçe tam destek, tabular rakam — fiyat tabloları)
     --------------------------------------------------------------------- */
  --font-baslik: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-govde:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:   ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Ölçek: 1.200 (minor third), 16px taban; büyük başlıklar akışkan */
  --fs-xs:   0.75rem;   /* 12px — dipnot, rozet */
  --fs-sm:   0.875rem;  /* 14px — yardımcı metin, tablo */
  --fs-base: 1rem;      /* 16px — gövde (form alanı min. 16px: iOS zoom yok) */
  --fs-md:   1.125rem;  /* 18px — giriş paragrafı */
  --fs-lg:   1.25rem;   /* 20px — kart başlığı */
  --fs-xl:   1.5rem;    /* 24px — H3 */
  --fs-2xl:  clamp(1.625rem, 1.3rem + 1.4vw, 2rem);    /* 26–32 — H2 */
  --fs-3xl:  clamp(2rem, 1.5rem + 2.4vw, 2.75rem);     /* 32–44 — H1 */
  --fs-4xl:  clamp(2.375rem, 1.6rem + 3.6vw, 3.5rem);  /* 38–56 — hero */
  --fs-fiyat: clamp(1.5rem, 1.25rem + 1vw, 2rem);      /* fiyat vurgusu */

  --lh-siki:  1.1;   /* hero/H1 */
  --lh-baslik: 1.25; /* H2–H4 */
  --lh-orta:  1.45;  /* kart, kısa metin */
  --lh-govde: 1.6;   /* paragraf */

  --fw-normal: 400;
  --fw-orta:   500;
  --fw-yari:   600;
  --fw-kalin:  700;
  --fw-ekstra: 800;

  --ls-siki:  -0.02em; /* büyük başlık */
  --ls-normal: 0;
  --ls-genis: 0.08em;  /* BÜYÜK HARF üst etiket (eyebrow) */

  --olcu-metin: 68ch; /* okunabilir satır uzunluğu */

  /* ---------------------------------------------------------------------
     8. BOŞLUK — 4px tabanlı
     --------------------------------------------------------------------- */
  --b-0:  0;
  --b-1:  0.25rem; /*  4 */
  --b-2:  0.5rem;  /*  8 */
  --b-3:  0.75rem; /* 12 */
  --b-4:  1rem;    /* 16 — mobil yan boşluk */
  --b-5:  1.25rem; /* 20 */
  --b-6:  1.5rem;  /* 24 */
  --b-8:  2rem;    /* 32 */
  --b-10: 2.5rem;  /* 40 */
  --b-12: 3rem;    /* 48 */
  --b-16: 4rem;    /* 64 */
  --b-20: 5rem;    /* 80 */
  --b-24: 6rem;    /* 96 */

  --bolum-dikey: clamp(3rem, 2rem + 4vw, 6rem); /* bölüm üst/alt boşluğu */
  --kap-yan: clamp(1rem, 0.5rem + 2.5vw, 2rem);  /* container yan boşluğu */
  --kap-genislik: 1200px;
  --kap-dar: 760px;
  --dokunma-min: 44px; /* tıklanabilir alan min. */

  /* ---------------------------------------------------------------------
     9. KÖŞE YARIÇAPLARI — logodaki yuvarlatılmış kareye gönderme
     --------------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;   /* rozet, input */
  --r-md: 10px;  /* buton, küçük kart */
  --r-lg: 16px;  /* kart, panel */
  --r-xl: 24px;  /* büyük panel, modal */
  --r-tam: 999px; /* hap/pill */
  --r-sayfa: 3px; /* ajanda sayfa illüstrasyonları (kâğıt köşesi) */

  /* ---------------------------------------------------------------------
     10. GÖLGELER — mavi tonlu, yumuşak
     --------------------------------------------------------------------- */
  --golge-xs: 0 1px 2px rgba(0, 38, 79, 0.06);
  --golge-sm: 0 1px 3px rgba(0, 38, 79, 0.08), 0 1px 2px rgba(0, 38, 79, 0.04);
  --golge-md: 0 4px 12px -2px rgba(0, 38, 79, 0.10), 0 2px 4px -2px rgba(0, 38, 79, 0.06);
  --golge-lg: 0 12px 28px -6px rgba(0, 38, 79, 0.16), 0 4px 8px -4px rgba(0, 38, 79, 0.08);
  --golge-xl: 0 24px 48px -12px rgba(0, 24, 52, 0.28);
  --golge-ajanda: 0 30px 60px -20px rgba(0, 24, 52, 0.45), 0 12px 24px -12px rgba(0, 24, 52, 0.30);
  --golge-ic: inset 0 1px 2px rgba(0, 38, 79, 0.08);

  /* ---------------------------------------------------------------------
     11. GEÇİŞLER — prefers-reduced-motion'da 0'a indirin
     --------------------------------------------------------------------- */
  --sure-hizli: 120ms;
  --sure-orta:  200ms;
  --sure-yavas: 320ms;
  --sure-sahne: 600ms;
  --egri-standart: cubic-bezier(0.2, 0, 0, 1);
  --egri-cikis:    cubic-bezier(0, 0, 0.2, 1);
  --egri-giris:    cubic-bezier(0.4, 0, 1, 1);

  /* ---------------------------------------------------------------------
     12. Z-INDEX KATMANLARI
     --------------------------------------------------------------------- */
  --z-taban:    0;
  --z-yukari:   10;   /* kart hover, seçili alan */
  --z-yapiskan: 100;  /* yapışkan başlık / sepet çubuğu */
  --z-acilir:   200;  /* tooltip, dropdown */
  --z-ortu:     900;  /* modal arka örtüsü */
  --z-modal:    1000;
  --z-bildirim: 1100; /* toast */
}