/* ============================================================================
   psikoajanda — tasarim belirtecleri (design tokens)
   Dosya: panel/public/css/tokens.css
   Faz 1 / 2026-08-11

   Bu dosya HICBIR secici tanimlamaz; yalnizca degisken uretir.
   Yuklenme sirasi:  tokens.css  ->  components.css  ->  custom.css

   OLCU BIRIMI: tumu rem. 1rem = 16px (kok yazi boyutu degistirilmemistir).

   KONTRAST NOTLARI
   Her renk ciftinin WCAG 2.1 kontrast orani yorum olarak yazilmistir.
   Esikler:  metin AA = 4.50:1 | buyuk metin (>=1.5rem veya >=1.25rem kalin) AA = 3.00:1
             metin disi (kenarlik, odak halkasi, ikon) AA = 3.00:1
   Olcum zemini aksi belirtilmedikce beyaz (#FFFFFF).
   ============================================================================ */

:root {

  /* ------------------------------------------------------------------
     1) MARKA OLCEGI  (50 -> 900)
     KILITLI KARAR: 400 = kimlik, 600 = aksiyon.
     ------------------------------------------------------------------ */

  /* #F2F5FC  beyazla  1.09:1  — yalnizca zemin. Metin tasimaz.            */
  --pa-brand-50:  #F2F5FC;
  /* #E3EAF8  beyazla  1.21:1  — bilgi kutusu / aktif menu zemini.         */
  --pa-brand-100: #E3EAF8;
  /* #C7D4F0  beyazla  1.49:1  — dekoratif ayirici, pasif kenarlik.        */
  --pa-brand-200: #C7D4F0;
  /* #A5B9E4  beyazla  1.97:1  — dekoratif dolgu.                          */
  --pa-brand-300: #A5B9E4;
  /* #7491D4  beyazla  3.11:1  — KIMLIK RENGI (logo, ust bant, dekoratif). */
  /*   ⛔ Beyaz kucuk metin TASIMAZ (3.11 < 4.50). Buyuk baslik icin uygun. */
  --pa-brand-400: #7491D4;
  /* #5B7BCC  beyazla  4.08:1  — ara ton. Kucuk metin icin hala yetersiz.  */
  --pa-brand-500: #5B7BCC;
  /* #446BC5  beyazla  5.05:1  ✔ AA — AKSIYON (buton zemini, baglanti).    */
  /*   #446BC5 metin olarak beyaz zeminde de 5.05:1 ✔                      */
  --pa-brand-600: #446BC5;
  /* #3154A5  beyazla  7.14:1  ✔ AA — hover / odak halkasi / menu metni.   */
  /*   sayfa zemini #EDEDF4 uzerinde 6.13:1 ✔ (odak halkasi >=3.00)        */
  --pa-brand-700: #3154A5;
  /* #284380  beyazla  9.52:1  ✔ AAA — bilgi kutusu metni.                 */
  /*   #E3EAF8 (brand-100) uzerinde 7.89:1 ✔ AA                            */
  --pa-brand-800: #284380;
  /* #1D3160  beyazla 12.65:1  ✔ AAA — en koyu marka tonu, vurgu metni.    */
  --pa-brand-900: #1D3160;

  /* DOLGU USTU METIN — doygun marka/hata zemini uzerindeki yazi.
     Eskiden bunun icin --pa-notr-0 kullaniliyordu; o jeton "kart zemini"
     demek ve KOYU TEMADA #232A35'e donuyor. Sonuc: yonetim panelinde koyu
     temada mavi butonun yazisi koyu gri kaliyordu (#232A35/#446BC5 = 2.21:1).
     Bu jeton temaya gore DEGISMEZ: dolgu her iki temada da doygun kaliyor. */
  --pa-dolgu-ustu: #FFFFFF;

  /* Rol takma adlari — sayfalarda dogrudan bunlari kullan */
  --pa-brand-kimlik:  var(--pa-brand-400); /* logo, ust bant, dolgu     */
  --pa-brand-aksiyon: var(--pa-brand-600); /* buton, baglanti, aktif    */
  --pa-brand-hover:   var(--pa-brand-700); /* uzerine gelme / basili    */
  --pa-brand-metin:   var(--pa-brand-800); /* acik zeminde marka metni  */

  /* ------------------------------------------------------------------
     2) NOTR OLCEK
     ------------------------------------------------------------------ */

  --pa-notr-0:   #FFFFFF; /*  1.00:1 — kart / girdi zemini                */
  --pa-notr-50:  #F7F8FA; /*  1.06:1 — hafif zemin                        */
  --pa-notr-100: #F1F2F6; /*  1.12:1 — rozet/uyari zemini                 */
  --pa-notr-200: #E3E5EC; /*  1.26:1 — tablo cizgisi, ayirici             */
  --pa-notr-300: #CBD0DA; /*  1.55:1 — devre disi kenarlik                */
  --pa-notr-400: #9BA3B2; /*  2.54:1 — ⛔ kenarlik icin YETERSIZ (<3.00)  */
  --pa-notr-500: #767F8F; /*  4.04:1 ✔ — GIRDI KENARLIGI (metin disi>=3)  */
                          /*             sayfa zemini #EDEDF4 ile 3.46:1 ✔*/
  --pa-notr-600: #5C6472; /*  5.96:1 ✔ AA — ipucu / ikincil metin         */
  --pa-notr-700: #434B57; /*  8.81:1 ✔ AAA — govde metni koyu             */
  --pa-notr-800: #2C333D; /* 12.74:1 ✔ AAA                                */
  --pa-notr-900: #1E2731; /* 15.11:1 ✔ AAA — ana metin (mevcut .text-siyah)*/

  --pa-sayfa-zemin: #EDEDF4;  /* colors.css'teki mevcut body zemini       */
                              /* beyaz kart ile 1.17:1 — sinir icin golge */
                              /* veya kenarlik sart, renk tek basina yetmez */

  /* ------------------------------------------------------------------
     3) SEMANTIK ROLLER (5)
     Her rolde 3 deger: --zemin (beyaz metin tasir), --yumusak (acik zemin),
     --metin (yumusak zemin uzerinde okunur), --kenar.
     ------------------------------------------------------------------ */

  /* BASARI */
  --pa-basari-zemin:   #0F7B4F; /* beyaz metinle 5.29:1 ✔ AA             */
  --pa-basari-yumusak: #E6F5EE; /* zemin                                 */
  --pa-basari-metin:   #0B5C3B; /* #E6F5EE uzerinde 7.15:1 ✔ AA          */
  --pa-basari-kenar:   #7FC4A5; /* metin disi, #E6F5EE ile 1.80:1 —      */
                                /* tek basina anlam tasimaz, metinle birlikte */

  /* UYARI */
  --pa-uyari-zemin:    #9A5B00; /* beyaz metinle 5.43:1 ✔ AA             */
  --pa-uyari-yumusak:  #FDF1DC;
  --pa-uyari-metin:    #7A4700; /* #FDF1DC uzerinde 6.89:1 ✔ AA          */
  --pa-uyari-kenar:    #E0B15E;

  /* HATA */
  --pa-hata-zemin:     #B3261E; /* beyaz metinle 6.54:1 ✔ AA             */
  --pa-hata-yumusak:   #FBE9E7;
  --pa-hata-metin:     #8C1D18; /* #FBE9E7 uzerinde 7.77:1 ✔ AA          */
  --pa-hata-kenar:     #E39B95;
  --pa-hata-hover:     #8C1D18; /* beyaz metinle 9.11:1 ✔ AAA            */

  /* BILGI  (marka ile ayni aile) */
  --pa-bilgi-zemin:    var(--pa-brand-600); /* beyaz metinle 5.05:1 ✔ AA  */
  --pa-bilgi-yumusak:  var(--pa-brand-100);
  --pa-bilgi-metin:    var(--pa-brand-800); /* #E3EAF8 uzerinde 7.89:1 ✔  */
  --pa-bilgi-kenar:    var(--pa-brand-200);

  /* NOTR */
  --pa-notr-zemin:     #4B5563; /* beyaz metinle 7.56:1 ✔ AAA            */
  --pa-notr-yumusak:   var(--pa-notr-100);
  --pa-notr-metin:     #374151; /* #F1F2F6 uzerinde 9.21:1 ✔ AAA         */
  --pa-notr-kenar:     var(--pa-notr-300);

  /* ------------------------------------------------------------------
     4) TIPOGRAFI (5 boyut)
     Mevcut govde yazi tipi: Poppins (custom.css icinde @import).
     ------------------------------------------------------------------ */

  --pa-yazi-ailesi: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pa-metin-xs:   0.75rem;   /* 12px — rozet, ipucu, tablo ust bilgisi   */
  --pa-metin-sm:   0.875rem;  /* 14px — yardim metni, ikincil             */
  --pa-metin-md:   1rem;      /* 16px — govde ve form varsayilani         */
  --pa-metin-lg:   1.125rem;  /* 18px — one cikan govde, kart basligi     */
  --pa-metin-xl:   1.5rem;    /* 24px — sayfa basligi (.pa-page-title)    */

  --pa-satir-siki: 1.25;
  --pa-satir-normal: 1.5;
  --pa-satir-genis: 1.7;

  --pa-agirlik-normal: 400;
  --pa-agirlik-orta:   500;
  --pa-agirlik-yari:   600;
  --pa-agirlik-kalin:  700;

  /* ------------------------------------------------------------------
     5) BOSLUK (6 kademe)  — 0.25rem tabanli
     ------------------------------------------------------------------ */

  --pa-bosluk-1: 0.25rem;  /*  4px */
  --pa-bosluk-2: 0.5rem;   /*  8px */
  --pa-bosluk-3: 0.75rem;  /* 12px */
  --pa-bosluk-4: 1rem;     /* 16px */
  --pa-bosluk-5: 1.5rem;   /* 24px */
  --pa-bosluk-6: 2rem;     /* 32px */

  /* ------------------------------------------------------------------
     6) YUVARLAKLIK (3 + pill)
     ------------------------------------------------------------------ */

  --pa-yuvarlak-sm: 0.5rem;   /*  8px — girdi, rozet                     */
  --pa-yuvarlak-md: 0.75rem;  /* 12px — metin alani, uyari kutusu        */
  --pa-yuvarlak-lg: 1rem;     /* 16px — kart, kenar cubugu (mevcut 2xl'e karsilik) */
  --pa-yuvarlak-tam: 62.5rem; /* pill — buton                            */

  /* ------------------------------------------------------------------
     7) GOLGE (3)
     ------------------------------------------------------------------ */

  --pa-golge-1: 0 0.0625rem 0.125rem rgba(30, 39, 49, 0.08);
  --pa-golge-2: 0 0.125rem 0.5rem rgba(30, 39, 49, 0.10);
  --pa-golge-3: 0 0.5rem 1.5rem rgba(30, 39, 49, 0.14);

  /* ------------------------------------------------------------------
     8) ODAK HALKASI
     WCAG 2.4.7 (Seviye AA). Panelde bugun 0 odak durumu var.
     Halka rengi brand-700 (#3154A5):
       beyaz kart uzerinde        7.14:1 ✔ (>=3.00)
       sayfa zemini #EDEDF4       6.13:1 ✔
       ⚠ #446BC5 buton zemini ile 1.41:1 ✘ — bu yuzden halka DAIMA
         outline-offset ile butonun DISINA cikarilir; sayfa zeminine dusr.
     ------------------------------------------------------------------ */

  --pa-odak-renk:    var(--pa-brand-700);
  --pa-odak-kalinlik: 0.1875rem; /* 3px */
  --pa-odak-bosluk:   0.125rem;  /* 2px — halkayi bilesenin disina tasir */

  /* ------------------------------------------------------------------
     9) GECIS
     ------------------------------------------------------------------ */

  --pa-gecis-hizli: 120ms ease-out;
  --pa-gecis:       180ms ease-out;
  --pa-gecis-yavas: 280ms ease-out;

  /* ------------------------------------------------------------------
     10) Z-INDEX (5 basamak)
     Not: bottom-menu.php:21 icinde inline z-index 999999999 (oncelik zorlamali)
     var. Faz 2'de --pa-z-sabit ile degistirilecek.
     ------------------------------------------------------------------ */

  --pa-z-taban:    0;
  --pa-z-yapisik: 10;   /* sticky basliklar, sticky buton seridi */
  --pa-z-sabit:   30;   /* mobil alt menu                        */
  --pa-z-ortu:    40;   /* karartma katmani                      */
  --pa-z-katman:  50;   /* diyalog, popup, acilir menu           */
}

/* Hareketi azaltma tercihi — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pa-gecis-hizli: 0ms;
    --pa-gecis:       0ms;
    --pa-gecis-yavas: 0ms;
  }
}