/* ==========================================================================
   fransadaoku.com — Tasarım token'ları  (v1 · 2026-09-11)
   --------------------------------------------------------------------------
   Kaynak: form.fransadaoku.com (fransadaoku-form/src/app/globals.css @theme
   bloğu) + Elementor global renkleri. İki site birebir aynı paleti kullanır;
   isimler form sitesiyle aynıdır (--color-navy, --color-red, --color-ink,
   --color-muted, --color-line, --color-page, --color-card, --radius-card,
   --radius-ctl). Bu dosya Sprint 2'de tema tarafından `style.css` içine
   olduğu gibi import edilir; değerler burada değiştirilirse tüm site değişir.

   Fark: başlık fontu form sitesindeki Playfair Display DEĞİL — kullanıcı
   kararıyla modern sans-serif: MANROPE (kullanıcı kararı 2026-09-11). Form sitesi daha
   sonra aynı --font-heading değerine güncellenecek.
   ========================================================================== */

:root {
  /* ---------- 1. Marka renkleri (Fransa bayrağı) ---------- */
  --color-navy:      #002654;  /* birincil: butonlar, başlıklar, hero zemini, tricolor sol */
  --color-navy-900:  #001A3A;  /* primary buton hover / koyu zeminler */
  --color-navy-700:  #0A3A73;  /* form sitesiyle aynı: link rengi, açık lacivert vurgu */
  --color-navy-100:  #C9D6E8;  /* rozet kenarlığı, ayırıcılar (lacivert zeminde) */
  --color-navy-50:   #E8EEF6;  /* form sitesiyle aynı: lacivert rozet zemini, hover zemin */

  --color-red:       #CE1126;  /* ikincil: eyebrow etiketleri, secondary buton, tricolor sağ, hata */
  --color-red-700:   #B00E20;  /* secondary buton hover */
  --color-red-50:    #FBE9EC;  /* form sitesiyle aynı: kırmızı rozet zemini, hata kutusu */

  --color-white:     #FFFFFF;

  /* ---------- 2. Nötr gri skalası (soğuk gri, 50–900) ---------- */
  /* 100/200/600/900 form sitesindeki page/line/muted/ink değerlerinin ta kendisi. */
  --color-gray-50:   #F8F9FB;
  --color-gray-100:  #EEF1F4;  /* = form --color-page  (sayfa zemini) */
  --color-gray-200:  #E7EAEE;  /* = form --color-line  (kenarlıklar) */
  --color-gray-300:  #D3D9E0;  /* pasif kenarlık, ayırıcı */
  --color-gray-400:  #AEB7C2;  /* placeholder, pasif ikon (metin için kullanma: AA geçmez) */
  --color-gray-500:  #8A96A3;  /* yalnızca dekoratif / büyük metin (3.0:1) */
  --color-gray-600:  #5F6B7A;  /* = form --color-muted (ikincil metin, meta) — 5.4:1 AA */
  --color-gray-700:  #46515E;  /* uzun ikincil metin — 8.1:1 */
  --color-gray-800:  #2E3641;  /* footer zemini (alternatif) */
  --color-gray-900:  #1C1C1C;  /* = form --color-ink  (gövde metni) — 17:1 */

  /* Anlamsal takma adlar (form sitesiyle aynı isimler) */
  --color-ink:       var(--color-gray-900);
  --color-muted:     var(--color-gray-600);
  --color-line:      var(--color-gray-200);
  --color-page:      var(--color-gray-100);
  --color-card:      var(--color-white);
  --color-surface-2: #F8F8F8;  /* Elementor "40c17c4" — çok açık gri, bölüm zemin alternatifi */
  --color-surface-3: #F0F0F0;  /* Elementor "accent"  — açık gri zemin (eski site uyumu) */

  /* ---------- 3. Durum renkleri ---------- */
  --color-success:     #15803D;  /* beyazda 5.0:1 */
  --color-success-50:  #EAF6EE;
  --color-warning:     #B45309;  /* beyazda 5.0:1 */
  --color-warning-50:  #FDF3E7;
  --color-error:       var(--color-red);
  --color-error-50:    var(--color-red-50);
  --color-info:        var(--color-navy-700);
  --color-info-50:     var(--color-navy-50);

  /* WhatsApp: #25D366 marka yeşili yalnızca ikon/çerçeve için (beyaz metinle 2.0:1 — AA geçmez).
     Buton zemini için koyulaştırılmış --color-whatsapp-600 (beyaz metinle 5.1:1). */
  --color-whatsapp:      #25D366;
  --color-whatsapp-600:  #0E7C6B;
  --color-whatsapp-700:  #0B6E5F;

  /* Odak halkası (form sitesindeki .ctl:focus ile aynı) */
  --color-focus-ring:      rgba(0, 38, 84, 0.12);
  --color-focus-ring-red:  rgba(206, 17, 38, 0.12);

  /* ---------- 4. Tipografi ---------- */
  /* Başlık fontu: MANROPE (kullanıcı kararı 2026-09-11; stil-sayfasi.html ile seçildi).
     Google Fonts latin-ext alt kümesi Türkçe karakterleri (ş ğ ı İ ç ö ü) kapsar.
     Değiştirilecekse inc/enqueue.php içindeki fdo_fonts_url() de güncellenmeli. */
  --font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Geriye dönük takma adlar (form sitesindeki isimler) */
  --font-display: var(--font-heading);
  --font-sans:    var(--font-body);

  /* Tip skalası (px). Mobilde H1/H2 bir kademe küçülür — bkz. bileşen CSS'i. */
  --text-xs:   12px;  /* eyebrow, rozet, yasal satır */
  --text-sm:   14px;  /* meta, küçük metin, footer linkleri */
  --text-base: 16px;  /* gövde */
  --text-md:   18px;  /* giriş paragrafı (lead), büyük buton */
  --text-lg:   20px;  /* H5 / kart başlığı */
  --text-xl:   24px;  /* H4 */
  --text-2xl:  28px;  /* H3 */
  --text-3xl:  32px;  /* H2 mobil */
  --text-4xl:  40px;  /* H2 masaüstü / H1 mobil */
  --text-5xl:  48px;  /* H1 masaüstü (iç sayfalar) */
  --text-6xl:  56px;  /* H1 hero */

  /* Satır yükseklikleri */
  --leading-none:    1;
  --leading-tight:   1.1;   /* H1 hero */
  --leading-snug:    1.2;   /* H2–H3 */
  --leading-heading: 1.3;   /* H4–H5, kart başlıkları */
  --leading-normal:  1.6;   /* gövde 16px → 25.6px */
  --leading-relaxed: 1.7;   /* uzun yazı gövdesi, yasal metin */

  /* Ağırlıklar */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;   /* başlık alt sınırı, buton, etiket */
  --weight-bold:     700;   /* başlık üst sınırı (800 kullanma) */

  /* Harf aralığı */
  --tracking-tight:   -0.02em;  /* 40px+ başlıklar */
  --tracking-snug:    -0.01em;  /* 24–32px başlıklar */
  --tracking-normal:  0;
  --tracking-eyebrow: 0.18em;   /* form sitesindeki .eyebrow ile aynı (uppercase 11–12px) */

  /* ---------- 5. Boşluk skalası (4px taban) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  /* Bölüm dikey boşluğu: mobil 48 / masaüstü 80–96 */
  --section-y:        var(--space-12);
  --section-y-lg:     var(--space-20);

  /* ---------- 6. Köşe yarıçapları (form sitesiyle aynı) ---------- */
  --radius-xs:   4px;    /* rozet içi, küçük chip */
  --radius-sm:   6px;    /* rozet, tag */
  --radius-ctl:  10px;   /* = form --radius-ctl: input, select, buton */
  --radius-md:   12px;   /* küçük kart, dropdown */
  --radius-card: 16px;   /* = form --radius-card: kart, kutu */
  --radius-lg:   24px;   /* hero kutusu, CTA bandı */
  --radius-pill: 999px;  /* hap rozet (eski sitedeki 100px hap butonlar → sadece rozetlerde) */

  /* ---------- 7. Gölgeler (yumuşak; eski sitenin sert gölgeleri kullanılmaz) ---------- */
  --shadow-xs:    0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:    0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card:  0 2px 8px rgba(0, 38, 84, 0.06), 0 1px 2px rgba(0, 38, 84, 0.04);
  --shadow-hover: 0 8px 24px rgba(0, 38, 84, 0.10), 0 2px 6px rgba(0, 38, 84, 0.05);
  --shadow-lg:    0 16px 40px rgba(0, 38, 84, 0.14);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.05);   /* eski navbar gölgesiyle aynı */
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---------- 8. Container genişlikleri ---------- */
  --container-page:   1200px;  /* sayfa genişliği (header, grid'ler, footer) */
  --container-wide:   1320px;  /* hero/partner şeridi gibi geniş bloklar (opsiyonel) */
  --container-prose:  720px;   /* yazı içeriği sütunu (blog tekil, sayfa) */
  --container-narrow: 560px;   /* form, bülten kutusu */
  --gutter:           20px;    /* mobil yan boşluk */
  --gutter-lg:        32px;    /* ≥ 768px yan boşluk */

  /* Breakpoint'ler — CSS custom property medya sorgusunda kullanılamaz; referans:
       sm  640px  (büyük telefon)
       md  768px  (tablet dikey; gutter 32px, 2 sütun grid)
       lg  1024px (masaüstü menü açılır, 3 sütun grid)
       xl  1200px (container tam genişlik)
     Tasarım mobil öncelikli: 375px genişlikte kırılmadan çalışmalı. */

  /* ---------- 9. Tricolor şerit + header ---------- */
  --tricolor-height:        5px;                  /* form sitesiyle aynı, sabit üstte */
  --tricolor-1:             var(--color-navy);
  --tricolor-2:             var(--color-white);
  --tricolor-3:             var(--color-red);
  --header-height:          72px;                 /* masaüstü sticky bar */
  --header-height-mobile:   56px;
  --header-bg:              rgba(255, 255, 255, 0.96);
  --logo-height:            40px;

  /* ---------- 10. z-index katmanları ---------- */
  --z-base:      0;
  --z-raised:    10;   /* kart hover, sticky yan kutu */
  --z-header:    50;   /* sticky header */
  --z-dropdown:  55;   /* menü açılırları */
  --z-tricolor:  60;   /* form sitesiyle aynı: şerit her şeyin üstünde */
  --z-overlay:   70;   /* mobil menü perdesi, arama overlay */
  --z-modal:     80;
  --z-toast:     90;
  --z-whatsapp:  45;   /* sabit WhatsApp balonu (header'ın altında kalır) */

  /* ---------- 11. Hareket ---------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}