/* ==========================================================================
   TEMA SİSTEMİ — palet · şablon · yoğunluk · yazı boyutu
   (01.10.2026, kullanıcı isteği: "MobiltegSaha'daki tema ve renk seçenekleri
   Depogi'de de olsun; kullanıcı istediği görünümü seçebilsin")

   Kaynak: C:\Projeler\MobiltegSaha — apps/web/src/lib/theme-options.ts ve
   apps/web/src/app/globals.css. Ramp değerleri oradan birebir alınmıştır;
   adlandırma ve belirteç adları Depogi'nin Türkçe sistemine uyarlanmıştır.

   ÇALIŞMA BİÇİMİ — js/tema.js (ve index.html'deki önyükleme betiği) kök
   öğeye şu sınıfları yazar:
     tema-palet-{depogi|kurumsal|grafit|slate|zumrut|bordo|okyanus|kum|
                 turuncu|koyu|kontrast}
     tema-sablon-{depogi|klasik|modern|kompakt|operasyon|yonetici}
     tema-yogunluk-{standart|kompakt}
     tema-yazi-{normal|buyuk}
   VARSAYILAN = hiçbir kural eşleşmez: uygulama bugünkü görünümünde kalır
   (palet "depogi" ve şablon "depogi" için bilinçli olarak kural YOKTUR).

   ⚠️ KOYU KİP İKİ KATMANLIDIR. Mevcut koyu kip `prefers-color-scheme`
   medya sorgularıyla çalışır (app.css, kabuk.css, mobil.css, harita.css) ve
   DOKUNULMADI: varsayılan "depogi" paleti onları izlemeye devam eder.
   Açık paletler `tema-acik`, "koyu" paleti `tema-koyu` sınıfıyla medya
   sorgularının yerini TELAFİ eder (aşağıda, her blok kaynak satırıyla
   eşleşir). tema.css index.html'de EN SON yüklenir; eşit özgünlükte
   kazanan bu dosyadır.

   Seçim cihazda saklanır (localStorage: depogi.tema) — MobiltegSaha'daki
   sunucu tarafı kullanıcı tercihi PWA mimarisinde cihaz-yerel karşılıktır;
   başlangıçta da aynı tema görünsün diye uygulama açılmadan ÖNCE
   uygulanır (index.html, FOUC yok).
   ========================================================================== */

/* ------------------------------------------------- AÇIK PALET ORTAK TABANI
   Açık palet seçiliyken sistem koyu kipi AÇIK olsa bile yüzeyler AÇIK
   kalır: medya sorgusu bloklarının değerleri burada bilinçli olarak
   geri sarılır (kaynak değerler app.css :root). vurgu-400/vurgu-acik
   palet Specific olduğundan aşağıdaki palet kurallarında gelir.

   ⚠️ BU BLOK PALET KURALLARINDAN ÖNCE DURMAK ZORUNDADIR: kontrast
   paleti --kenar/--zemin gibi nötrleri DAHA KOYU tanımlar ve eşit
   özgünlükte (0,2,0) kaynak sırasıyla burayı ezer — sonda olsaydı
   kontrastın kenarları varsayılan açık tona dönerdi (ölçüldü:
   --kenar #767C87 yerine #DCE6F0 çıkıyordu). */
:root.tema-acik {
  color-scheme: light;
  --zemin: #F2F5F9; --yuzey: #ffffff; --yuzey-2: #F7FAFD;
  --kenar: #DCE6F0; --kenar-koyu: #BFD2E2;
  --kenar-2: #E6EDF4; --zebra: #EEF3F8; --satir-ustu: #E1ECF6;
  --cizgi: #DCE6F0; --cizgi-koyu: #BFD2E2;
  --metin: #1F2A37; --metin-2: #4A5A6E; --metin-3: #7B8CA0;
  --hata-bg: #FBEAEA;
  --veri-kod: #0A6F66; --veri-fiyat: #1F9D55;
  --veri-miktar: #123B63; --veri-takip: #B26A00;
  --basari: #157A45; --uyari: #B26A00; --hata: #C23A3A;
  --golge-1: 0 1px 2px rgba(16, 46, 77, .07), 0 1px 3px rgba(16, 46, 77, .09);
  --golge-2: 0 4px 12px rgba(16, 46, 77, .09), 0 2px 4px rgba(16, 46, 77, .05);
  --golge-3: 0 18px 50px rgba(16, 46, 77, .16), 0 4px 14px rgba(16, 46, 77, .10);
  --harita-karo-suzgec: none;
}

/* ============================================================ 1. PALETLER
   Marka rampası (yan menü, giriş paneli) + vurgu rampası (düğme, aktif
   öğe, odak) MobiltegSaha'nın "brand" rampasından gelir:
     marka-600←brand-600 · marka-700←brand-700 · marka-800←brand-800 ·
     marka-900←brand-900 · vurgu-500←brand-500 · vurgu-400←brand-400 ·
     vurgu-600←brand-600 · vurgu-acik←brand-50
   Menü grubu renkleri (--grup-*) ve veri renkleri paletle DEĞİŞMEZ —
   MobiltegSaha'da grafik/harita renkleri sabit tutulur; gruplar veri
   rengidir, marka rengi değil. */

:root.tema-palet-kurumsal {
  --marka-600: #2563EB; --marka-700: #1D4ED8;
  --marka-800: #1E40AF; --marka-900: #1E3A8A;
  --vurgu-500: #3B82F6; --vurgu-400: #60A5FA; --vurgu-600: #2563EB;
  --vurgu-acik: #EFF6FF; --ikincil: #93C5FD; --ikincil-acik: #EFF6FF;
}

:root.tema-palet-grafit {
  --marka-600: #3F3F46; --marka-700: #27272A;
  --marka-800: #18181B; --marka-900: #09090B;
  --vurgu-500: #52525B; --vurgu-400: #71717A; --vurgu-600: #3F3F46;
  --vurgu-acik: #FAFAFA; --ikincil: #D4D4D8; --ikincil-acik: #FAFAFA;
}

:root.tema-palet-slate {
  --marka-600: #334155; --marka-700: #1E293B;
  --marka-800: #0F172A; --marka-900: #020617;
  --vurgu-500: #475569; --vurgu-400: #64748B; --vurgu-600: #334155;
  --vurgu-acik: #F8FAFC; --ikincil: #CBD5E1; --ikincil-acik: #F8FAFC;
}

:root.tema-palet-zumrut {
  --marka-600: #04805A; --marka-700: #047857;
  --marka-800: #065F46; --marka-900: #064E3B;
  --vurgu-500: #10B981; --vurgu-400: #34D399; --vurgu-600: #04805A;
  --vurgu-acik: #ECFDF5; --ikincil: #6EE7B7; --ikincil-acik: #ECFDF5;
}

:root.tema-palet-bordo {
  --marka-600: #BE123C; --marka-700: #9F1239;
  --marka-800: #881337; --marka-900: #4C0519;
  --vurgu-500: #E11D48; --vurgu-400: #FB7185; --vurgu-600: #BE123C;
  --vurgu-acik: #FFF1F2; --ikincil: #FDA4AF; --ikincil-acik: #FFF1F2;
}

:root.tema-palet-okyanus {
  --marka-600: #087491; --marka-700: #0C647D;
  --marka-800: #155E75; --marka-900: #164E63;
  --vurgu-500: #06B6D4; --vurgu-400: #22D3EE; --vurgu-600: #087491;
  --vurgu-acik: #ECFEFF; --ikincil: #67E8F9; --ikincil-acik: #ECFEFF;
}

:root.tema-palet-kum {
  --marka-600: #AA5406; --marka-700: #964608;
  --marka-800: #92400E; --marka-900: #78350F;
  --vurgu-500: #F59E0B; --vurgu-400: #FBBF24; --vurgu-600: #AA5406;
  --vurgu-acik: #FFFBEB; --ikincil: #FDE68A; --ikincil-acik: #FFFBEB;
}

/* MobiltegSaha'da bu palet şirketin kendi markasıydı (mobilteg turuncusu);
   Depogi'de genel "Turuncu" paletidir — değerler aynı. */
:root.tema-palet-turuncu {
  --marka-600: #BE420A; --marka-700: #A8380A;
  --marka-800: #9A3412; --marka-900: #7C2D12;
  --vurgu-500: #F97316; --vurgu-400: #FB923C; --vurgu-600: #BE420A;
  --vurgu-acik: #FFF7ED; --ikincil: #FDBA74; --ikincil-acik: #FFF7ED;
}

/* "Koyu Enterprise": marka LACİVERT kalır (yan menü, logo dili) ama tüm
   yüzeyler koyulaşır. Değerler app.css'teki prefers-color-scheme: dark
   bloğunun AYNISIDIR — kullanıcı koyu paleti seçince isterse sistem
   tercihi açık olsun, aynı koyu görünüm gelir. */
:root.tema-palet-koyu {
  color-scheme: dark;
  --zemin:      #0D1A26;
  --yuzey:      #142433;
  --yuzey-2:    #1A2E40;
  --kenar:      #24405A;
  --kenar-koyu: #35566F;
  --kenar-2:    #1E3549;
  --zebra:      #192C3D;
  --satir-ustu: #20384D;
  --metin:      #E6EEF6;
  --metin-2:    #A6BACD;
  --metin-3:    #7B93A8;
  --hata-bg:    #331A1A;
  --vurgu-400:  #4FD8C9;
  --vurgu-acik: #103A38;
  --veri-kod:    #5FD3C6;
  --veri-fiyat:  #5FCF8E;
  --veri-miktar: #8FB8DC;
  --veri-takip:  #FFC14D;
  --basari:      #5FCF8E;
  --uyari:       #FFC14D;
  --hata:        #E88A8A;
  --golge-1: 0 1px 2px rgba(0,0,0,.32);
  --golge-2: 0 4px 12px rgba(0,0,0,.38);
  --golge-3: 0 18px 50px rgba(0,0,0,.55);
  --harita-karo-suzgec: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.7);
}

/* "Yüksek Kontrast": açık bir palet ama nötrler ve kenarlar WCAG 10:1
   metin / 3:1 kenar eşiğinin üstüne itilir (MobiltegSaha palet-contrast). */
:root.tema-palet-kontrast {
  color-scheme: light;
  --marka-600: #0047BB; --marka-700: #003896;
  --marka-800: #00286E; --marka-900: #001C50;
  --vurgu-500: #0A55C8; --vurgu-400: #2864D2; --vurgu-600: #0047BB;
  --vurgu-acik: #E8F0FF; --ikincil: #A0BEF5; --ikincil-acik: #E8F0FF;
  --zemin: #F7F7F8; --yuzey-2: #ECEDF0;
  --kenar: #767C87; --kenar-koyu: #3C424E;
  --kenar-2: #9AA0AA; --zebra: #E6E8EC; --satir-ustu: #D8E2F4;
  --metin: #0C0F14; --metin-2: #212630; --metin-3: #2D333E;
}
:root.tema-palet-kontrast :focus-visible {
  outline: 2px solid var(--vurgu-600);
  outline-offset: 2px;
}

/* ------------------------------------------------- (açık palet ortak tabanı
   tema-acik bloğu YUKARIDA, palet kurallarından önce durur — gerekçesi
   ve sıralama kuralı orada yazılı.) */

/* ================================================= 2. KOYU KİP TELAFİLERİ
   Aşağıdaki kurallar MEVCUT medya sorgusu bloklarının sınıf tabanlı
   eşleridir. "koyu" paleti sistem tercihi AÇIKKEN seçilirse (tema-koyu),
   açık paletler sistem tercihi KOYUKEN seçilirse (tema-acik) devreye
   girer. İki durumda da kaynak dosyadaki değerler birebir kullanılır. */

/* kabuk.css @media dark — .rozet-bilgi/.rozet-mavi (açık değerler) */
:root.tema-acik .rozet-bilgi,
:root.tema-acik .rozet-mavi {
  background: rgba(36,113,163,.10); color: var(--vurgu-600);
  border-color: rgba(36,113,163,.24);
}
/* kabuk.css @media dark — seçilebilir satır odak çizgisi */
:root.tema-acik tr.secilebilir:focus-visible { outline-color: var(--vurgu-500); }
/* kabuk.css @media dark — sıralama düğmesi */
:root.tema-acik .sirala-dugme:focus-visible { outline-color: var(--vurgu-500); }
:root.tema-acik .tablo th.etkin .sirala-dugme,
:root.tema-acik .editor-tablo th.etkin .sirala-dugme { color: var(--vurgu-500); }
/* mobil.css @media dark — üst çubuk, alt gezinme, rozetler (açık değerler) */
:root.tema-acik .m-ust { background: var(--marka-800); }
:root.tema-acik .m-alt { background: var(--yuzey-2); }
:root.tema-acik .m-rozet-basari { background: #E3F2E5; color: #1B5E20; }
:root.tema-acik .m-rozet-uyari  { background: #FFF3E0; color: #E65100; }
:root.tema-acik .m-rozet-hata   { background: #FDE7E7; color: #B71C1C; }
:root.tema-acik .m-cevrimdisi   { background: #FFF3E0; color: #E65100; }
/* harita.css @media dark — küme sayacı yazısı */
:root.tema-acik .hrt-kutu .marker-cluster-small div,
:root.tema-acik .hrt-kutu .marker-cluster-medium div,
:root.tema-acik .hrt-kutu .marker-cluster-large div { color: var(--metin-ters); }

/* "koyu" paleti — sistem AÇIKken (tema-koyu), mobil dışı */
:root.tema-koyu .rozet-bilgi,
:root.tema-koyu .rozet-mavi {
  background: rgba(107,174,220,.14); color: var(--vurgu-400);
  border-color: rgba(107,174,220,.30);
}
:root.tema-koyu tr.secilebilir:focus-visible { outline-color: var(--vurgu-400); }
:root.tema-koyu .sirala-dugme:focus-visible { outline-color: var(--vurgu-400); }
:root.tema-koyu .tablo th.etkin .sirala-dugme,
:root.tema-koyu .editor-tablo th.etkin .sirala-dugme { color: var(--vurgu-400); }
:root.tema-koyu .hrt-kutu .marker-cluster-small div,
:root.tema-koyu .hrt-kutu .marker-cluster-medium div,
:root.tema-koyu .hrt-kutu .marker-cluster-large div { color: var(--zemin); }

/* "koyu" paleti — mobil (mobil.css'in kendi koyu değerleri) */
:root.tema-koyu:not([data-cihaz="masaustu"]) {
  --zemin: #0e1620; --yuzey: #16202c; --yuzey-2: #1d2a38;
  --cizgi: #263544; --cizgi-koyu: #35485c;
  --metin: #e8eef5; --metin-2: #9aacc0;
  --kenar-2: #223142; --zebra: #1c2836; --satir-ustu: #263548;   /* mobil.css 13 ile aynı (inceleme 14.10.2026) */
}
:root.tema-koyu .m-ust { background: #16202c; }
:root.tema-koyu .m-alt { background: #131c26; }
:root.tema-koyu .m-rozet-basari { background: #17351c; color: #A5D6A7; }
:root.tema-koyu .m-rozet-uyari  { background: #3a2a10; color: #FFCC80; }
:root.tema-koyu .m-rozet-hata   { background: #3a1717; color: #EF9A9A; }
:root.tema-koyu .m-cevrimdisi   { background: #3a2a10; color: #FFCC80; }

/* ============================================================ 3. ŞABLONLAR
   Kabuk yüzeyleri kabuk.css'te tanımlı --yan-* belirteçlerinden okunur;
   buradaki şablonlar yalnızca belirteçleri ezer. "depogi" şablonu için
   bilinçli olarak KURAL YOKTUR (varsayılan = bugünkü görünüm). */

/* Kurumsal Klasik — açık yan menü, çerçeveli kartlar, dengeli yoğunluk. */
:root.tema-sablon-klasik {
  --yan-zemin: var(--yuzey);
  --yan-metin-kok: var(--metin);
  --yan-metin: var(--metin-2);
  --yan-metin-etkin: var(--vurgu-600);
  --yan-grup-metin: var(--metin-3);
  --yan-kenar: var(--kenar);
  --yan-hover: var(--yuzey-2);
  --yan-etkin-bg: var(--vurgu-acik);
  --yan-baslik-alt-metin: var(--metin-3);
  --yan-cizgi-karistir: #1F2A37;
  --yan-cikis-metin: #A81F1F;
  --yan-cikis-metin-etkin: #7F1414;
  --yan-cikis-bg: rgba(194,58,58,.07);
  --yan-cikis-kenar: rgba(194,58,58,.32);
  --yan-cikis-hover: rgba(194,58,58,.15);
  --r-sm: 7px; --r-md: 9px; --r-lg: 11px; --r-xl: 14px;
  --golge-1: 0 1px 2px rgba(16,46,77,.05);
  --golge-2: 0 2px 8px rgba(16,46,77,.07);
  --golge-3: 0 10px 30px rgba(16,46,77,.12), 0 2px 8px rgba(16,46,77,.06);
}
:root.tema-sablon-klasik .yan { border-right: 1px solid var(--yan-kenar); }

/* Kurumsal Modern — yumuşak köşeler, gölgeli kartlar, vurgulu menü. */
:root.tema-sablon-modern {
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px;
  --golge-1: 0 1px 3px rgba(16,46,77,.08), 0 6px 18px -10px rgba(16,46,77,.14);
  --golge-2: 0 4px 12px rgba(16,46,77,.10), 0 10px 28px -14px rgba(16,46,77,.18);
  --yan-etkin-bg: var(--vurgu-600);
  --yan-metin-etkin: #fff;
}

/* Kompakt — sık satırlar, keskin köşeler (veri girişi ekranları). */
:root.tema-sablon-kompakt {
  --r-sm: 5px; --r-md: 7px; --r-lg: 9px; --r-xl: 12px;
  --golge-1: none;
  --golge-2: 0 1px 3px rgba(16,46,77,.10);
  --golge-3: 0 6px 20px rgba(16,46,77,.13);
}

/* Operasyon — koyu yan menü (düz), düz kartlar, sık tablo. */
:root.tema-sablon-operasyon {
  --yan-zemin: var(--marka-900);
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px;
  --golge-1: none;
  --golge-2: 0 1px 3px rgba(16,46,77,.10);
  --golge-3: 0 6px 20px rgba(16,46,77,.13);
}

/* Yönetici — koyu yan menü + koyu üst şerit, geniş kartlar. */
:root.tema-sablon-yonetici {
  --yan-zemin: var(--marka-900);
  --r-lg: 20px; --r-xl: 28px;
  --golge-1: 0 1px 3px rgba(16,46,77,.08), 0 8px 22px -12px rgba(16,46,77,.16);
  --golge-2: 0 4px 14px rgba(16,46,77,.11), 0 14px 36px -16px rgba(16,46,77,.20);
  --golge-3: 0 18px 50px rgba(16,46,77,.18), 0 4px 14px rgba(16,46,77,.10);
}
:root.tema-sablon-yonetici .ust-serit {
  background: linear-gradient(175deg, var(--marka-800), var(--marka-900));
  border-bottom-color: var(--marka-900);
  color: #E6EEF6;
}
:root.tema-sablon-yonetici .ust-serit h1 { color: #fff; }
:root.tema-sablon-yonetici .arama-girdi {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff;
}
:root.tema-sablon-yonetici .arama-girdi::placeholder { color: rgba(255,255,255,.55); }
:root.tema-sablon-yonetici .menu-dugmesi {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff;
}
:root.tema-sablon-yonetici .cevrimici-rozet,
:root.tema-sablon-yonetici .kuyruk-rozet {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.24);
}
:root.tema-sablon-yonetici .cevrimici-rozet.kapali { color: #FFC14D; border-color: rgba(255,194,77,.45); }
:root.tema-sablon-yonetici .kuyruk-rozet.kuyruk-hatali { color: #FFC14D; border-color: rgba(255,194,77,.45); }
:root.tema-sablon-yonetici .ust-kullanici-dugme { color: #fff; }
:root.tema-sablon-yonetici .ust-kullanici-dugme:hover {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20);
}
:root.tema-sablon-yonetici .ust-kullanici-alt,
:root.tema-sablon-yonetici .ust-kullanici-ok { color: rgba(255,255,255,.62); }
:root.tema-sablon-yonetici .gorunum-cip {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff;
}
:root.tema-sablon-yonetici .gorunum-cip:hover { background: rgba(255,255,255,.16); }

/* ============================================== 4. YOĞUNLUK (kompakt kip)
   ⚠️ 48dp DOKUNMA HEDEFİ PAZARLIK KONUSU DEĞİLDİR (belirtec.css): mobil
   cihazlarda düğme/girdi yükseklikleri DOKUNULMAZ. Kompakt kip boşluğu,
   tablo satırını ve yazı tabanını sıkıştırır; masaüstünde (fare) ayrıca
   dokunma hedefi 40px'e iner — belirtec.css'teki masaüstü ölçüsü. */

:root.tema-yogunluk-kompakt,
:root.tema-yogunluk-kompakt body,
:root.tema-sablon-kompakt,
:root.tema-sablon-kompakt body { font-size: 14px; }

:root.tema-yogunluk-kompakt table.tablo,
:root.tema-sablon-kompakt table.tablo { font-size: 13px; }
:root.tema-yogunluk-kompakt table.tablo th,
:root.tema-yogunluk-kompakt table.tablo td,
:root.tema-sablon-kompakt table.tablo th,
:root.tema-sablon-kompakt table.tablo td { padding: 7px 10px; }
:root.tema-sablon-operasyon table.tablo th,
:root.tema-sablon-operasyon table.tablo td { padding: 9px 12px; }

:root.tema-yogunluk-kompakt .kart-govde,
:root.tema-sablon-kompakt .kart-govde { padding: 12px; }
:root.tema-yogunluk-kompakt .kart-basi,
:root.tema-sablon-kompakt .kart-basi { padding: 10px 12px; }
:root.tema-yogunluk-kompakt .sayfa,
:root.tema-sablon-kompakt .sayfa { padding: 14px; }
:root.tema-yogunluk-kompakt .alan,
:root.tema-sablon-kompakt .alan { margin-bottom: 10px; }
:root.tema-yogunluk-kompakt .kiplik-govde,
:root.tema-sablon-kompakt .kiplik-govde { padding: 14px; }
:root.tema-yogunluk-kompakt .menu-kart,
:root.tema-sablon-kompakt .menu-kart { padding: 11px; min-height: 60px; }
:root.tema-yogunluk-kompakt .yan-bag,
:root.tema-sablon-kompakt .yan-bag { padding: 7px 9px; min-height: 38px; font-size: 13.5px; }
:root.tema-yogunluk-kompakt .yan-grup-ad,
:root.tema-sablon-kompakt .yan-grup-ad { padding: 10px 8px 5px; }

/* Kompakt masaüstünde düğme/girdi/sekme ölçüsü DEĞİŞKENLE verilir ve 5b'nin
   hemen ARDINDAN tanımlanır (ikisi de :root'ta, aynı özgüllük, sonraki kazanır).
   Eskiden `.girdi { padding: 9px 12px 9px 40px }` (0,4,0) simgesiz kutulara da
   40px boş pay veriyor ve .girdi-kucuk/.satir-eylem değiştiricilerini eziyordu. */
:root.tema-yogunluk-kompakt[data-cihaz="masaustu"] .secim-satir { min-height: 34px; }

/* ================================================== 5. YAZI BOYUTU (büyük)
   MobiltegSaha --text-base 15→17px ile tüm rem tabanlı arayüzü büyütür;
   Depogi px tabanlıdır (belirtec.css gerekçesi), bu yüzden taban VE temel
   metin taşıyıcıları birlikte büyütülür. */

:root.tema-yazi-buyuk,
:root.tema-yazi-buyuk body { font-size: 16.5px; }
:root.tema-yazi-buyuk.tema-yogunluk-kompakt,
:root.tema-yazi-buyuk.tema-yogunluk-kompakt body,
:root.tema-yazi-buyuk.tema-sablon-kompakt,
:root.tema-yazi-buyuk.tema-sablon-kompakt body { font-size: 15.5px; }

:root.tema-yazi-buyuk table.tablo { font-size: 15.5px; }
:root.tema-yazi-buyuk .yan-bag { font-size: 16px; }
:root.tema-yazi-buyuk .dugme { font-size: 16.5px; }
:root.tema-yazi-buyuk .girdi { font-size: 17.5px; }
:root.tema-yazi-buyuk .rozet { font-size: 13px; }
:root.tema-yazi-buyuk .arama-girdi { font-size: 15px; }
:root.tema-yazi-buyuk .menu-kart-ad { font-size: 16.5px; }
:root.tema-yazi-buyuk .kart-basi h2 { font-size: 17.5px; }
:root.tema-yazi-buyuk .ust-kullanici-ad { font-size: 15px; }
:root.tema-yazi-buyuk .ozet-deger { font-size: 23px; }

/* ======================================= 5b. MASAÜSTÜ VARSAYILAN YAZI ÖLÇEĞİ
   Kullanıcı (12.10.2026): ana ekranlardaki yazılar "kocaman"; ölçü Mobilteg
   Saha olsun. Saha (apps/web: tailwind.config.ts + globals.css): kök 15px,
   içerik text-sm 13.1px, etiket/tablo başlığı/rozet text-xs 12px, sayfa
   başlığı 18.75px/600, KPI 22.5px/600, girdi ≈36px, düğme ≈34–36px.

   ⚠️ YALNIZ DEĞİŞKEN ATANIR, SEÇİCİ YAZILMAZ. İlk sürüm `main.sayfa .girdi`
   gibi (0,5,1) özgüllüklü kurallarla küçültüyordu; .girdi-kucuk, .girdi-serit,
   .yontem-secici, .satir-eylem, .barkod-alan gibi değiştiricileri ezdi ve
   tablo içi kutuları, satır düğmelerini, iskonto seçicisini bozdu (satır satır
   yazı denetimi, 13.10.2026). Temel kurallar bu değişkenleri okur; değiştirici
   kendi değerini yazdığı için eskisi gibi kazanır.

   Yalnız MASAÜSTÜ: el terminali/telefon/tablet mobil.css'in kendi ölçüsünü
   kullanır (eldiven, kol mesafesi — belirtec.css). "Büyük yazı" seçilince
   değişkenler tanımsız kalır ve eski (büyük) ölçü döner. */

:root[data-cihaz="masaustu"]:not(.tema-yazi-buyuk) {
  --girdi-yazi: 13px;  --girdi-yuk: 36px;  --girdi-py: 7px;  --girdi-px: 12px;
  --girdi-ikon-bosluk: 36px;  --girdi-ikon-sol: 12px;  --girdi-ikon-boy: 16px;
  --dugme-yazi: 13px;  --dugme-yuk: 36px;  --dugme-py: 7px;  --dugme-px: 14px;  --dugme-bosluk: 7px;
  --dugme-sade-yuk: 34px;  --dugme-sade-py: 6px;  --dugme-sade-px: 10px;
  --dugme-kucuk-yazi: 12.5px;  --dugme-kucuk-yuk: 30px;  --dugme-kucuk-py: 4px;  --dugme-kucuk-px: 10px;
  --etiket-yazi: 12px;
  --uyari-yazi: 13px;
  --tablo-yazi: 13px;  --tablo-bas-yazi: 12px;  --tablo-bas-py: 8px;  --tablo-py: 8px;  --tablo-px: 12px;
  --kart-baslik-yazi: 14px;
  --kiplik-baslik-yazi: 15px;
  --sayfa-baslik-yazi: 19px;
  --secim-yazi: 13px;
  --izgara-yazi: 13px;
  --sekme-yazi: 12.5px;  --sekme-yuk: 34px;  --sekme-py: 6px;  --sekme-px: 12px;
  --miktar-yazi: 13.5px;
  --menu-kart-yazi: 13.5px;
  --ozet-yazi: 20px;
  --kpi-yazi: 24px;
  --ted-pers-yazi: 13px;
  --ipucu-yazi: 12px;
  /* K.66 Saha İkizi (sahaikizi.css temel kuralları okur; mobil varsayılanı orada). */
  --si-yazi: 13px;  --si-kucuk-yazi: 12px;  --si-baslik-yazi: 11px;  --si-buyuk-yazi: 15px;  --si-marka-yazi: 15px;
  --si-kpi-deger-yazi: 21px;  --si-puan-yazi: 32px;
}
/* Gövde metni: yalnız KALITIM (özgüllük yarışı yok); kendi boyunu yazan öğe
   etkilenmez. */
:root[data-cihaz="masaustu"]:not(.tema-yazi-buyuk) main.sayfa { font-size: 13px; }

/* Kompakt yoğunluk (masaüstü): 4. bölümün eski 40px ölçüsü değişkenle. Büyük
   yazıyla birlikte de geçerlidir (eski davranış). */
:root.tema-yogunluk-kompakt[data-cihaz="masaustu"] {
  --girdi-yuk: 32px;  --girdi-py: 5px;  --girdi-px: 10px;  --girdi-ikon-bosluk: 34px;
  --dugme-yuk: 32px;  --dugme-py: 5px;  --dugme-px: 12px;
  --dugme-sade-yuk: 30px;  --dugme-kucuk-yuk: 28px;
  --sekme-yuk: 30px;  --sekme-py: 4px;
}
:root.tema-yogunluk-kompakt[data-cihaz="masaustu"]:not(.tema-yazi-buyuk) main.sayfa { font-size: 12.5px; }

/* ============================================ 6. GÖRÜNÜM SEÇİCİ (üst şerit)
   MobiltegSaha ThemeSelector bileşeninin kabuğu: çip + açılır panel.
   Hem masaüstü üst şeridinde hem mobil üst çubukta çizilir. */

.gorunum-sarmal { position: relative; flex-shrink: 0; }

.gorunum-cip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--kenar); border-radius: 999px;
  background: var(--yuzey-2); color: var(--metin);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis);
}
.gorunum-cip:hover { background: var(--yuzey); border-color: var(--kenar-koyu); }
.gorunum-cip:focus-visible { outline: 2px solid var(--vurgu-500); outline-offset: 2px; }

.gorunum-renk {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--yuzey), 0 0 0 3px var(--kenar);
}

/* Saydam tıklanma perdesi: panel dışına tıklayınca kapanır. */
.gorunum-perde { position: fixed; inset: 0; z-index: 69; }

.gorunum-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  width: 330px; max-width: calc(100vw - 20px);
  max-height: min(600px, calc(100dvh - 90px)); overflow-y: auto;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  box-shadow: var(--golge-3);
  padding: 14px;
}

.gorunum-bolum-baslik {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--metin-3);
  margin: 0 0 7px;
}
.gorunum-panel > .gorunum-bolum-baslik + .gorunum-bolum-baslik { margin-top: 13px; }
.gorunum-panel > * + .gorunum-bolum-baslik { margin-top: 13px; }

.gorunum-palet-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.gorunum-palet-dugme {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 5px 9px;
  border: 1px solid var(--kenar); border-radius: 9px;
  background: var(--yuzey); color: var(--metin-2);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.gorunum-palet-dugme:hover { border-color: var(--kenar-koyu); color: var(--metin); }
.gorunum-palet-dugme:focus-visible { outline: 2px solid var(--vurgu-500); outline-offset: 1px; }
.gorunum-palet-dugme.secili {
  border-color: var(--vurgu-500); background: var(--vurgu-acik);
  color: var(--vurgu-600); font-weight: 600;
}
.gorunum-palet-dugme .gorunum-renk-ornek {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: var(--gorunum-renk);
}

.gorunum-sablon-liste { display: grid; gap: 3px; }
.gorunum-sablon-dugme {
  display: block; width: 100%; padding: 7px 9px;
  border: 0; border-radius: 9px; background: transparent;
  text-align: left; cursor: pointer; font: inherit;
}
.gorunum-sablon-dugme:hover { background: var(--yuzey-2); }
.gorunum-sablon-dugme:focus-visible { outline: 2px solid var(--vurgu-500); outline-offset: 1px; }
.gorunum-sablon-dugme.secili { background: var(--vurgu-acik); }
.gorunum-sablon-ad { display: block; font-size: 12.5px; font-weight: 600; color: var(--metin); }
.gorunum-sablon-dugme.secili .gorunum-sablon-ad { color: var(--vurgu-600); }
.gorunum-sablon-aciklama { display: block; font-size: 11.5px; color: var(--metin-3); margin-top: 1px; }

.gorunum-secim-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gorunum-secim-dugme {
  min-height: 34px; padding: 4px 8px;
  border: 0; border-radius: 9px;
  background: var(--yuzey-2); color: var(--metin-2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.gorunum-secim-dugme:hover { background: var(--kenar); color: var(--metin); }
.gorunum-secim-dugme:focus-visible { outline: 2px solid var(--vurgu-500); outline-offset: 1px; }
.gorunum-secim-dugme.secili {
  background: linear-gradient(135deg, var(--vurgu-500), var(--vurgu-600));
  color: #fff;
}

.gorunum-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 10px;
  border-top: 1px solid var(--kenar);
  font-size: 11.5px; color: var(--metin-3);
}
.gorunum-sifirla {
  border: 0; background: none; padding: 0;
  color: var(--vurgu-600);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.gorunum-sifirla:focus-visible { outline: 2px solid var(--vurgu-500); outline-offset: 2px; }

/* DOKUNMATİK CİHAZDA DOKUNMA HEDEFİ: yukarıdaki 34–40px masaüstü (fare)
   ölçüsüdür. Telefon/tablette 48px, el terminalinde 56px olmalı — `--dokun`
   belirteci (belirtec.css) bu iki değeri cihaza göre zaten taşır. */
:root:not([data-cihaz="masaustu"]) .gorunum-cip,
:root:not([data-cihaz="masaustu"]) .gorunum-palet-dugme,
:root:not([data-cihaz="masaustu"]) .gorunum-sablon-dugme,
:root:not([data-cihaz="masaustu"]) .gorunum-secim-dugme {
  min-height: var(--dokun, 48px);
}
:root:not([data-cihaz="masaustu"]) .gorunum-sifirla {
  display: inline-flex; align-items: center;
  min-height: var(--dokun, 48px); padding: 0 6px;
}

/* Dar ekranda çipin etiketi gizlenir — rozetlerle aynı kural. */
@media (max-width: 640px) {
  .gorunum-cip .etiket { display: none; }
  .gorunum-cip { padding: 6px 9px; }
}