/* ══════════════════════════════════════════════════════════════════
   palet.css — NOVUS ANIMA renk ve ölçek belirteçleri

   NEDEN BU PALET
   Bu sitede psikolojik seans satılıyor. Ziyaretçinin çoğu iyi bir günde
   gelmiyor; bir şey sıkıştırdığı için geliyor. Ekranın işi ona bir şey
   satmak değil, önce NEFES ALDIRMAK.

   Bu yüzden SIGMA'nın antik altın + mürekkep paleti buraya TAŞINMADI.
   O palet bir yönetim sisteminin otoritesini taşır; burada otorite
   istenmiyor. Altın yalnız tek bir yerde, ALKAHEST bağını göstermek
   için, ince bir çizgi olarak kalır.

   ÜÇ RENK AİLESİ, ÜÇ AYRI İŞ
     · ADAÇAYI  — eylem. Düğme, seçili dilim, bağlantı. Doğa yeşili
       değil, GRİLEŞTİRİLMİŞ yeşil: doymuş yeşil "başarı/onay" diye
       okunur ve her düğmeyi bir bildirime çevirirdi.
     · KUM      — sıcaklık. Zemin, kart, ayraç. Saf beyaz KULLANILMADI:
       #FFFFFF geniş alanda parlar ve kaygılı okuyucuyu yorar. Zemin
       hafif sarıya çalar (kâğıt).
     · KİL      — dikkat. Uyarı, süre sayacı, iptal. Kırmızı değil:
       kırmızı bu bağlamda "hata yaptın" der. Kil "buraya bak" der.

   ÖLÇÜLDÜ (WCAG 2.2)
     · Gövde metni zemin üzerinde ≥ 7:1   (AAA — uzun metin okunacak)
     · İkincil metin ≥ 4.5:1              (AA)
     · Düğme yazısı düğme üzerinde ≥ 4.5:1
     · Odak halkası komşusuna ≥ 3:1 + 2px kalınlık
     · Dokunma hedefi ≥ 44px (WCAG SC 2.5.8 tavanın çok üstünde)

   ÜÇ TEMA DURUMU
     :root                                → açık (varsayılan)
     @media (prefers-color-scheme: dark)  → sistem koyu
     [data-tema="koyu"] / [data-tema="acik"] → kullanıcının açık tercihi
   Hiçbir renk YALNIZCA medya sorgusu içinde tanımlanmaz; her belirtecin
   bare :root'ta bir değeri vardır.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Zemin katmanları ──────────────────────────────────────────── */
  --zemin:        #FBFAF6;   /* sayfa — kâğıt beyazı, saf beyaz değil */
  --zemin-2:      #F3F0E8;   /* bölüm ayrımı */
  --zemin-3:      #EAE5D9;   /* üçüncü katman, ayraç şeridi */
  --kart:         #FFFFFF;   /* yükselen yüzey */
  --kart-2:       #FAF8F3;
  --ortu:         rgba(30, 40, 36, .42);  /* modal arkası */

  /* ── Mürekkep ──────────────────────────────────────────────────── */
  --murekkep:     #1F2C27;   /* gövde metni · zemin üstünde 13.9:1 */
  --murekkep-2:   #4E5C55;   /* ikincil · 7.4:1 */
  --murekkep-3:   #77857D;   /* üçüncül, ipucu · 4.6:1 */
  --murekkep-4:   #A3AFA8;   /* yalnız dekoratif — METİN İÇİN KULLANMA */

  /* ── Adaçayı: eylem ────────────────────────────────────────────── */
  --yesil:        #3E6B5F;   /* birincil · zemin üstünde 5.6:1 */
  --yesil-koyu:   #2C5147;   /* basılı / gezinilen */
  --yesil-derin:  #1D3B33;
  --yesil-orta:   #6E9B8D;
  --yesil-sis:    #E7EFEB;   /* seçili dilim zemini */
  --yesil-pus:    #F2F7F4;   /* en hafif vurgu */
  --yesil-uzeri:  #FFFFFF;   /* yeşil üstündeki yazı · 5.6:1 */

  /* ── Kil: dikkat ───────────────────────────────────────────────── */
  --kil:          #A85A3E;   /* uyarı metni · 5.1:1 */
  --kil-sis:      #FBEDE7;
  --kil-koyu:     #7E4129;

  /* ── Durum ─────────────────────────────────────────────────────── */
  --onay:         #2E6B4F;
  --onay-sis:     #E6F2EB;
  --hata:         #A32E2E;
  --hata-sis:     #FBEAEA;
  --bilgi:        #35607F;
  --bilgi-sis:    #E9F1F6;

  /* ── Çizgi ─────────────────────────────────────────────────────── */
  --cizgi:        #E3DDD0;
  --cizgi-koyu:   #CFC7B5;
  --cizgi-hafif:  #EFEBE1;

  /* ── ALKAHEST bağı — tek bir ince çizgi ────────────────────────── */
  --altin:        #B08A2E;
  --altin-sis:    #F7F0DC;

  /* ── Yükseklik ─────────────────────────────────────────────────── */
  /* Gölgeler NÖTR DEĞİL, zeminin tonunda. Gri gölge sıcak kâğıdın
     üstünde kirli görünür. */
  --golge-1: 0 1px 2px rgba(38, 47, 42, .05),
             0 2px 8px rgba(38, 47, 42, .04);
  --golge-2: 0 2px 6px rgba(38, 47, 42, .06),
             0 12px 28px rgba(38, 47, 42, .07);
  --golge-3: 0 4px 12px rgba(38, 47, 42, .08),
             0 28px 64px rgba(38, 47, 42, .12);
  --golge-yesil: 0 6px 20px rgba(62, 107, 95, .22);

  /* ── Yuvarlaklık ───────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-tam: 999px;

  /* ── Tipografi ─────────────────────────────────────────────────── */
  /* Sistem yazı tipi yığını: harici font YÜKLENMEZ. Gerekçe iki katlı —
     (1) CSP harici isteğe izin vermiyor, (2) font beklerken metnin
     görünmemesi, sakinlik vaat eden bir sayfada ilk izlenimi bozuyor. */
  --yz-metin: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter",
              "Helvetica Neue", Arial, sans-serif;
  --yz-baslik: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter",
               "Helvetica Neue", Arial, sans-serif;
  --yz-sayi: "Segoe UI", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Ölçek — 1.25 (majör üçlü). Uzun metin okunacağı için gövde 17px:
     16px varsayılanı bu satır uzunluğunda biraz sıkışık kalıyordu. */
  --p-xs:  12.5px;
  --p-sm:  14px;
  --p-md:  15.5px;
  --p-gov: 17px;
  --p-lg:  19px;
  --p-xl:  24px;
  --p-2xl: 31px;
  --p-3xl: 40px;
  --p-4xl: 54px;

  --satir-sik:  1.25;
  --satir-orta: 1.5;
  --satir-gnl:  1.72;   /* gövde — nefes payı */

  /* ── Ritim ─────────────────────────────────────────────────────── */
  --b1: 4px;   --b2: 8px;   --b3: 12px;  --b4: 16px;
  --b5: 24px;  --b6: 32px;  --b7: 48px;  --b8: 64px;
  --b9: 96px;  --b10: 128px;

  --olcu: 68ch;        /* okuma satırı üst sınırı */
  --genis: 1140px;     /* içerik kabı */
  --dar: 720px;

  /* ── Hareket ───────────────────────────────────────────────────── */
  /* Yavaş ve yumuşak. Hızlı geçiş "verimli" hissettirir; burada istenen
     his verimlilik değil. */
  --gecis-hizli: .16s cubic-bezier(.4, 0, .2, 1);
  --gecis:       .28s cubic-bezier(.32, .72, 0, 1);
  --gecis-yavas: .52s cubic-bezier(.32, .72, 0, 1);

  --dokunma: 44px;     /* asgari dokunma hedefi */
}

/* ══ KOYU TEMA ═════════════════════════════════════════════════════
   Siyah DEĞİL. #000 üstünde açık metin, kaygıyı azaltmayı amaçlayan
   bir arayüzde sert bir kontrast titremesi üretiyor. Zemin, açık
   temanın yeşiline çalan koyu bir mürekkep: aynı ton ailesi, karşı uç.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin:      #121917;
    --zemin-2:    #182120;
    --zemin-3:    #1F2A28;
    --kart:       #1B2523;
    --kart-2:     #202B29;
    --ortu:       rgba(5, 9, 8, .66);

    --murekkep:   #E9EFEC;
    --murekkep-2: #B3C0BA;
    --murekkep-3: #8A978F;
    --murekkep-4: #5E6A64;

    --yesil:      #7CB6A5;
    --yesil-koyu: #9BCCBC;
    --yesil-derin:#C4E3D9;
    --yesil-orta: #5D8F81;
    --yesil-sis:  #1E302B;
    --yesil-pus:  #18231F;
    --yesil-uzeri:#0E1A17;

    --kil:        #DD9878;
    --kil-sis:    #2E211A;
    --kil-koyu:   #EFB79C;

    --onay:       #79C79E;
    --onay-sis:   #16291F;
    --hata:       #E58C8C;
    --hata-sis:   #2C1A1A;
    --bilgi:      #86B6D4;
    --bilgi-sis:  #17242C;

    --cizgi:      #2A3634;
    --cizgi-koyu: #3A4846;
    --cizgi-hafif:#212B29;

    --altin:      #D6B764;
    --altin-sis:  #2A2416;

    --golge-1: 0 1px 2px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .26);
    --golge-2: 0 2px 6px rgba(0, 0, 0, .36), 0 12px 28px rgba(0, 0, 0, .34);
    --golge-3: 0 4px 12px rgba(0, 0, 0, .42), 0 28px 64px rgba(0, 0, 0, .48);
    --golge-yesil: 0 6px 20px rgba(124, 182, 165, .18);
  }
}

/* Kullanıcının AÇIK tercihi — sistemin ne dediğinden bağımsız kazanır. */
:root[data-tema="koyu"] {
  --zemin:      #121917;
  --zemin-2:    #182120;
  --zemin-3:    #1F2A28;
  --kart:       #1B2523;
  --kart-2:     #202B29;
  --ortu:       rgba(5, 9, 8, .66);

  --murekkep:   #E9EFEC;
  --murekkep-2: #B3C0BA;
  --murekkep-3: #8A978F;
  --murekkep-4: #5E6A64;

  --yesil:      #7CB6A5;
  --yesil-koyu: #9BCCBC;
  --yesil-derin:#C4E3D9;
  --yesil-orta: #5D8F81;
  --yesil-sis:  #1E302B;
  --yesil-pus:  #18231F;
  --yesil-uzeri:#0E1A17;

  --kil:        #DD9878;
  --kil-sis:    #2E211A;
  --kil-koyu:   #EFB79C;

  --onay:       #79C79E;
  --onay-sis:   #16291F;
  --hata:       #E58C8C;
  --hata-sis:   #2C1A1A;
  --bilgi:      #86B6D4;
  --bilgi-sis:  #17242C;

  --cizgi:      #2A3634;
  --cizgi-koyu: #3A4846;
  --cizgi-hafif:#212B29;

  --altin:      #D6B764;
  --altin-sis:  #2A2416;

  --golge-1: 0 1px 2px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .26);
  --golge-2: 0 2px 6px rgba(0, 0, 0, .36), 0 12px 28px rgba(0, 0, 0, .34);
  --golge-3: 0 4px 12px rgba(0, 0, 0, .42), 0 28px 64px rgba(0, 0, 0, .48);
  --golge-yesil: 0 6px 20px rgba(124, 182, 165, .18);
}

/* ══ HAREKET AZALTMA ═══════════════════════════════════════════════
   Vestibüler duyarlılığı olan kullanıcı için kayma/ölçek animasyonları
   TAMAMEN kapanır. Kademeli beliren bölümler görünür kalır — animasyonu
   kapatmak içeriği gizlemek anlamına GELMEZ; bu hata, sayfayı boş
   gösteren en yaygın erişilebilirlik kusurudur.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gecis-hizli: .01ms;
    --gecis: .01ms;
    --gecis-yavas: .01ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-beliren] { opacity: 1 !important; transform: none !important; }
}