/* ============================================================================
   TASARIM BELİRTEÇLERİ (design tokens)

   ⚠️ NEDEN AYRI DOSYA: app.css'te 72 değişken vardı ama HEPSİ RENKTİ
   (ölçüldü). Boşluk, tipografi, yükselti, hareket, dokunma hedefi ve
   güvenli alan her ekranda ELLE yazılıyordu — bu yüzden aynı görsel dil iki
   ekranda iki türlü çıkıyordu. Native his tam olarak bu tutarlılıktan doğar.

   ⚠️ DEĞERLER CİHAZ SINIFINA GÖRE DEĞİŞİR, MEDYA SORGUSUNA GÖRE DEĞİL.
   Kırılma noktası yaklaşımı (max-width: 640px) "dar masaüstü penceresi"ni
   telefon sanar. Burada ölçüt `html[data-cihaz]`: fare kullanan bir kullanıcı
   pencereyi daralttığında düzen DEĞİŞMEZ, çünkü eli değişmemiştir.

   Ölçü birimi: Android'in dp'si ile 1:1 örtüşsün diye px kullanılır
   (Blazor WASM'da rem tabanı tarayıcı yazı boyutuna bağlıdır ve kullanıcı
   sistem yazı boyutunu büyütünce dokunma hedefleri kayardı).
   ========================================================================= */

:root {
  /* --- BOŞLUK: 4dp ızgara (Material 3) ------------------------------- */
  --bo-1: 4px;
  --bo-2: 8px;
  --bo-3: 12px;
  --bo-4: 16px;
  --bo-5: 20px;
  --bo-6: 24px;
  --bo-8: 32px;
  --bo-10: 40px;

  /* Ekran kenar boşluğu — cihaz sınıfına göre ezilir. */
  --bo-kenar: var(--bo-4);

  /* --- YARIÇAP -------------------------------------------------------- */
  --yr-kucuk: 8px;
  --yr-orta: 12px;
  --yr-buyuk: 16px;
  --yr-dev: 28px;      /* Material 3 "extra large" — sayfa/sheet üstü */
  --yr-tam: 999px;

  /* --- YÜKSELTİ (Material 3 elevation 0..5) ---------------------------
     Gölge YUMUŞAK ve KISA: uzun gölge web hissi verir. */
  --yk-0: none;
  --yk-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px 1px rgba(0,0,0,.12);
  --yk-2: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px 2px rgba(0,0,0,.12);
  --yk-3: 0 4px 8px 3px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.28);
  --yk-4: 0 6px 10px 4px rgba(0,0,0,.12), 0 2px 3px rgba(0,0,0,.28);

  /* --- DOKUNMA HEDEFİ -------------------------------------------------
     ⚠️ 48dp PAZARLIK KONUSU DEĞİLDİR. Depo çalışanı eldivenle ve yürürken
     dokunur; küçük hedef yanlış satır seçtirir ve yanlış satır yanlış
     stok hareketi demektir. */
  --dokun: 48px;
  --dokun-buyuk: 56px;
  --dokun-fab: 56px;

  /* --- TİPOGRAFİ (Material 3 ölçeği, mobil için sıkılaştırılmış) ------ */
  --yz-ailesi: 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif;

  --yz-goruntu: 700 28px/34px var(--yz-ailesi);
  --yz-baslik-b: 600 22px/28px var(--yz-ailesi);
  --yz-baslik-o: 600 18px/24px var(--yz-ailesi);
  --yz-baslik-k: 600 16px/22px var(--yz-ailesi);
  --yz-govde-b:  400 16px/24px var(--yz-ailesi);
  --yz-govde-o:  400 14px/20px var(--yz-ailesi);
  --yz-govde-k:  400 12px/16px var(--yz-ailesi);
  --yz-etiket-b: 600 14px/20px var(--yz-ailesi);
  --yz-etiket-o: 600 12px/16px var(--yz-ailesi);
  --yz-etiket-k: 600 11px/16px var(--yz-ailesi);

  /* Sayısal alanlar (miktar, fiyat, barkod) — rakamlar SABİT GENİŞLİKTE
     hizalanmalı, yoksa liste taranırken göz kayar. */
  --yz-sayi: 600 16px/22px ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* --- HAREKET (Material 3 easing) ------------------------------------ */
  --hz-kisa: 120ms;
  --hz-orta: 220ms;
  --hz-uzun: 320ms;
  --eg-standart: cubic-bezier(.2, 0, 0, 1);
  --eg-giris:    cubic-bezier(.05, .7, .1, 1);
  --eg-cikis:    cubic-bezier(.3, 0, .8, .15);

  /* --- GÜVENLİ ALAN ---------------------------------------------------
     Çentik, kamera deliği, jest çubuğu. `viewport-fit=cover` index.html'de
     zaten var; bu değişkenler onu KULLANILABİLİR kılar. */
  --gv-ust:  env(safe-area-inset-top, 0px);
  --gv-alt:  env(safe-area-inset-bottom, 0px);
  --gv-sol:  env(safe-area-inset-left, 0px);
  --gv-sag:  env(safe-area-inset-right, 0px);

  /* --- KABUK ÖLÇÜLERİ ------------------------------------------------- */
  --ust-cubuk: 56px;                 /* Material 3 top app bar */
  --alt-gezinme: 64px;               /* Material 3 navigation bar */
  --alt-gezinme-tam: calc(var(--alt-gezinme) + var(--gv-alt));
}

/* ---------------------------------------------------------------- TELEFON */
:root[data-cihaz="telefon"] {
  --bo-kenar: var(--bo-4);
}

/* --------------------------------------------------------------- TERMİNAL
   ⚠️ EL TERMİNALİ TELEFONUN KÜÇÜĞÜ DEĞİLDİR. Ekran dar ama kullanıcı
   ELDİVENLİ ve genellikle TEK ELLE, çoğu zaman YÜRÜRKEN kullanır. Bu yüzden:
     • dokunma hedefi BÜYÜR (48 → 56), küçülmez
     • kenar boşluğu DARALIR (ekranı içerik kazansın)
     • yazı büyür (kol mesafesinden okunur)
   Yani "daha küçük ekran = daha küçük her şey" YANLIŞTIR. */
:root[data-cihaz="terminal"] {
  --bo-kenar: var(--bo-3);
  --dokun: 56px;
  --dokun-buyuk: 64px;
  --yz-govde-o: 400 15px/21px var(--yz-ailesi);
  --yz-govde-b: 400 17px/25px var(--yz-ailesi);
  --yz-sayi: 700 18px/24px ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --alt-gezinme: 68px;
}

/* ----------------------------------------------------------------- TABLET */
:root[data-cihaz="tablet"] {
  --bo-kenar: var(--bo-6);
  --yz-govde-o: 400 15px/22px var(--yz-ailesi);
}

/* --------------------------------------------------------------- MASAÜSTÜ
   Masaüstü mevcut deneyimi KORUR (kullanıcı kararı: "web tarafı mevcut
   hâlini büyük ölçüde koruyabilir"). Belirteçler yine de tanımlıdır ki
   ortak bileşenler iki tarafta da aynı dili konuşsun. */
:root[data-cihaz="masaustu"] {
  --bo-kenar: var(--bo-6);
  --dokun: 40px;          /* fare hedefi parmaktan küçüktür */
  --dokun-buyuk: 44px;
}

/* Hareketi azalt tercihi: süreler sıfırlanır ama düzen değişmez. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hz-kisa: 0ms;
    --hz-orta: 0ms;
    --hz-uzun: 0ms;
  }
}