/* Üretildi: araclar/tema-uret.mjs ← 1-kilavuz/tokens.json (1.8). Elle değiştirmeyin. */
/* Yazı tipleri, yazı ölçeği, boşluk, köşe, kırılımlar, ızgara, ikon, form ve veri ölçüleri (kılavuz 1.2–1.7). tema.css ile birlikte yüklenir.
   Dört ölçü seti: dar (telefon dikey) · alcak (telefon yatay) · genis (tablet, masaüstü) · dikey (dikey monitör).
   Format farkı bu dosyadaki değişkenlerle gelir; bileşen CSS'i medya sorgusu yazmaz, kendi genişliğine bakar (.ok-kap + @container).
   Türkçe için iki dosya da iner: ı ç ö ü latin'de, ğ ş İ ve ₺ latin-ext'te. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--o-disp:"Space Grotesk","Inter",system-ui,sans-serif;--o-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--o-b-1:4px;--o-b-2:8px;--o-b-3:12px;--o-b-4:16px;--o-b-5:20px;--o-b-6:24px;--o-b-8:32px;--o-b-10:40px;--o-b-12:48px;--o-b-16:64px;--o-kose-kucuk:6px;--o-kose-dugme:8px;--o-kose-kart:12px;--o-kose-pencere:16px;--o-kose-hap:999px;--o-panel-en:360px;
  --o-y-baslik-1:22px;--o-y-baslik-2:17px;--o-y-bolum:12px;--o-y-sayi:26px;--o-y-satir-basligi:15px;--o-y-govde:16px;--o-y-dugme:15px;--o-y-meta:13px;--o-y-kucuk:12px;--o-kenar:16px;--o-bolum:24px;--o-kart-ara:12px;--o-kart-ic:16px;--o-satir-ic:12px 16px;--o-ust-cubuk:56px;--o-alt-menu:72px;--o-yan-ray:0px;--o-satir:64px;--o-pencere-bas:56px;--o-pencere-alt:72px;--o-pencere-bosluk:48px;--o-pencere-en-boy:720px;--o-sayac:18px;--o-hap:56px;--o-ikon-satir:16px;--o-ikon-satir-cizgi:2;--o-ikon-dugme:20px;--o-ikon-dugme-cizgi:1.75;--o-ikon-modul:20px;--o-ikon-modul-cizgi:1.75;--o-ikon-kutu:40px;--o-modul-kutu:40px;--o-alan:44px;--o-form-en:720px;--o-onay:20px;--o-anahtar-en:40px;--o-anahtar-boy:24px;--o-tutamak:24px;--o-kaydir-iz:4px;--o-takvim-gun:44px;--o-durum:24px;--o-nokta:6px;--o-tablo-satir:44px;--o-filtre:32px;--o-grafik-boy:160px;--o-halka:112px;--o-akis-nokta:8px;--o-modul-kart-en:150px;--o-ilerleme:8px;--o-toast-en:400px;--o-bos-ikon:48px;--o-pin-kutu:52px;--o-pin-tus:56px;--o-pin-en:100%}
/* Telefon yatay: alçak ekran */
@media ((orientation:landscape) and (max-height:500px)){:root{--o-bolum:20px;--o-kart-ic:12px;--o-satir-ic:8px 12px;--o-ust-cubuk:44px;--o-alt-menu:0px;--o-yan-ray:56px;--o-satir:56px;--o-pencere-bas:48px;--o-pencere-alt:56px;--o-pencere-bosluk:8px;--o-ikon-kutu:36px;--o-modul-kutu:36px;--o-alan:40px;--o-takvim-gun:36px;--o-tablo-satir:40px;--o-grafik-boy:120px;--o-halka:96px;--o-pin-kutu:40px;--o-pin-tus:40px;--o-pin-en:640px}}
/* Tablet ve masaüstü */
@media ((min-width:600px) and (min-height:501px)){:root{--o-y-baslik-1:23px;--o-y-baslik-2:18px;--o-y-bolum:13px;--o-y-sayi:27px;--o-y-satir-basligi:16px;--o-y-dugme:16px;--o-y-meta:14px;--o-y-kucuk:13px;--o-kenar:24px;--o-bolum:32px;--o-kart-ara:16px;--o-ust-cubuk:64px;--o-alt-menu:0px;--o-satir:68px;--o-pencere-bosluk:64px;--o-sayac:20px;--o-ikon-kutu:36px;--o-alan:40px;--o-tutamak:20px;--o-takvim-gun:36px;--o-grafik-boy:200px;--o-halka:136px;--o-modul-kart-en:200px;--o-bos-ikon:56px;--o-pin-tus:52px;--o-pin-en:400px}}
/* Tablet dikey: sol menü yok, bölümler alt hap menüde (1.5 h) */
@media ((min-width:600px) and (min-height:501px)) and (not ((min-width:1024px) and (min-height:501px) and (not ((min-width:1000px) and (min-height:1600px))))){:root{--o-alt-menu:72px}}
/* Dikey monitör: uzaktan okunur */
@media ((min-width:1000px) and (min-height:1600px)){:root{--o-y-baslik-1:28px;--o-y-baslik-2:22px;--o-y-bolum:16px;--o-y-sayi:32px;--o-y-satir-basligi:19px;--o-y-govde:19px;--o-y-dugme:19px;--o-y-meta:17px;--o-y-kucuk:15px;--o-kenar:32px;--o-bolum:40px;--o-kart-ara:20px;--o-kart-ic:20px;--o-satir-ic:16px 20px;--o-ust-cubuk:72px;--o-alt-menu:80px;--o-satir:84px;--o-pencere-bas:64px;--o-pencere-alt:80px;--o-pencere-en-boy:1100px;--o-sayac:24px;--o-hap:64px;--o-ikon-satir:20px;--o-ikon-satir-cizgi:1.75;--o-ikon-dugme:24px;--o-ikon-modul:24px;--o-ikon-kutu:44px;--o-modul-kutu:48px;--o-alan:52px;--o-form-en:1000px;--o-onay:24px;--o-anahtar-en:48px;--o-anahtar-boy:28px;--o-tutamak:28px;--o-kaydir-iz:6px;--o-takvim-gun:48px;--o-durum:28px;--o-nokta:8px;--o-tablo-satir:56px;--o-filtre:40px;--o-grafik-boy:260px;--o-halka:168px;--o-akis-nokta:10px;--o-modul-kart-en:260px;--o-ilerleme:12px;--o-toast-en:480px;--o-bos-ikon:72px;--o-pin-kutu:64px;--o-pin-tus:64px;--o-pin-en:480px}}
/* Dokunmatik (1.3 c, 1.4 b): görünen kutu küçükse dokunma alanı görünmez olarak 44 px'e genişler. */
:root{--o-dokunma:0px}
@media (pointer:coarse){:root{--o-dokunma:44px}}

/* Bir ölçü setinde gizle (1.3 c). Alt menü ↔ yan ray gibi yalnız yerleşim farkı için; öğe kendi display'ini korur. */
@media (not ((orientation:landscape) and (max-height:500px))) and (not ((min-width:600px) and (min-height:501px))){.ok-yok-dar{display:none!important}}
@media ((orientation:landscape) and (max-height:500px)){.ok-yok-alcak{display:none!important}}
@media ((min-width:600px) and (min-height:501px)){.ok-yok-genis{display:none!important}}
@media ((min-width:1000px) and (min-height:1600px)){.ok-yok-dikey{display:none!important}}

/* Kabuk (1.5). Sol menü yalnız 1024 px ve üstünde (masaüstü, tablet yatay); alçak ekranda ve dikey monitörde yok.
   .ok-yok-menu: sol menü varken gizle (alt hap, üst çubuktaki logo) · .ok-yok-menusuz: sol menü yokken gizle (sol menünün kendisi). */
:root{--o-grafik-soluk:0.35;--o-cakisma-sutun:240px;--o-iskelet-b1:62%;--o-iskelet-b2:46%;--o-iskelet-b3:74%;--o-iskelet-m1:38%;--o-iskelet-m2:28%;--o-iskelet-m3:50%;--o-sol-menu:240px;--o-sol-menu-dar:72px;--o-sekme-serit:44px}
@media ((min-width:1024px) and (min-height:501px) and (not ((min-width:1000px) and (min-height:1600px)))){.ok-yok-menu{display:none!important}}
/* İçeriğin solundaki menü eni (yüzen öğeler içeriğe hizalanır: toast 1.8 a) */
:root{--o-menu-en:0px}
@media ((min-width:1024px) and (min-height:501px) and (not ((min-width:1000px) and (min-height:1600px)))){:root{--o-menu-en:var(--o-sol-menu)}:root[data-menu="dar"]{--o-menu-en:var(--o-sol-menu-dar)}}
@media (not ((min-width:1024px) and (min-height:501px) and (not ((min-width:1000px) and (min-height:1600px))))){.ok-yok-menusuz{display:none!important}}

/* Yüzen katmanlar (1.5 d, e). Çekmece (detay, C11): telefonda tam ekran; telefon yatayda liste 320 px solda, detay yanında, perdesiz (D4);
   tablet ve masaüstünde sağda 440 px; dikey monitörde 66%. Pencere (C10): telefonda alttan sheet, telefon yatayda en çok 772 px sheet,
   tablet / masaüstü / dikey monitörde ortada 640 px (D7). Kısa onay her formatta ortada 420 px. kabuk.css yalnız bu değişkenleri okur.
   Güvenli alan (1.9 e): sheet ekranın altına değdiği için alt satırı --ok-g-alt kadar yükselir (--o-pencere-alt-guvenli 1); ortadaki pencerede 0.
   Çekmece üst çubuğu örtüyorsa (dar, geniş, dikey) başlığı durum çubuğu kadar uzar (--o-cekmece-bas-guvenli 1); telefon yatayda çubuğun altından başlar. */
:root{--o-cekmece-ust:0px;--o-cekmece-bas-guvenli:1;--o-cekmece-sol:0px;--o-cekmece-en:100%;--o-cekmece-perde:transparent;--o-cekmece-golge:none;--o-cekmece-cizgi:0px;--o-pencere-en:100%;--o-pencere-kisa:420px;--o-pencere-sekme:200px;--o-pencere-hiza:end;--o-pencere-kose:var(--o-kose-pencere) var(--o-kose-pencere) 0 0;--o-pencere-boy:calc(100% - var(--o-pencere-bosluk) - var(--ok-g-ust));--o-pencere-alt-guvenli:1}
@media ((orientation:landscape) and (max-height:500px)){:root{--o-cekmece-ust:calc(var(--o-ust-cubuk) + var(--ok-g-ust));--o-cekmece-bas-guvenli:0;--o-cekmece-sol:320px;--o-cekmece-cizgi:1px;--o-pencere-en:772px}}
@media ((min-width:600px) and (min-height:501px)){:root{--o-cekmece-en:440px;--o-cekmece-perde:var(--o-golge-perde-hafif);--o-cekmece-golge:var(--o-golge-cekmece);--o-cekmece-cizgi:1px;--o-pencere-en:640px;--o-pencere-hiza:center;--o-pencere-kose:var(--o-kose-pencere);--o-pencere-boy:min(calc(100% - 2 * var(--o-pencere-bosluk) - var(--ok-g-ust) - var(--ok-g-alt)),var(--o-pencere-en-boy));--o-pencere-alt-guvenli:0}}
@media ((min-width:1000px) and (min-height:1600px)){:root{--o-cekmece-en:66%}}
/* Giriş (1.11 a): PIN formu tek sütun; telefon yatayda iki sütun, solda kutular + mesaj + düğme, sağda 240 px tuş takımı (NoteLink) */
:root{--o-pin-logo:40px;--o-pin-sutun:1fr;--o-pin-tus-kolon:1;--o-pin-tus-satir:auto}
@media ((orientation:landscape) and (max-height:500px)){:root{--o-pin-sutun:1fr 240px;--o-pin-tus-kolon:2;--o-pin-tus-satir:1 / span 9}}
/* Telefon yatay: detay açıkken liste solda kalır, çekmecenin altına girmez (D4) */
@media ((orientation:landscape) and (max-height:500px)){body:has(.ok-katman-cekmece:not([hidden])) .ok-icerik{max-width:320px}}

/* Yazı (1.2 a). Büyük harfli yazı lang="tr" ister (1.2 f). */
.ok-baslik-1{font:700 var(--o-y-baslik-1)/1.25 var(--o-disp);letter-spacing:-.01em}
.ok-baslik-2{font:700 var(--o-y-baslik-2)/1.3 var(--o-disp);letter-spacing:-.01em}
.ok-bolum{font:700 var(--o-y-bolum)/1.2 var(--o-disp);letter-spacing:.08em;text-transform:uppercase}
.ok-sayi{font:700 var(--o-y-sayi)/1.1 var(--o-disp);letter-spacing:-.02em}
.ok-satir-basligi{font:600 var(--o-y-satir-basligi)/1.35 var(--o-sans)}
.ok-govde{font:400 var(--o-y-govde)/1.5 var(--o-sans)}
.ok-dugme{font:600 var(--o-y-dugme)/1.2 var(--o-sans)}
.ok-meta{font:400 var(--o-y-meta)/1.45 var(--o-sans)}
.ok-kucuk{font:600 var(--o-y-kucuk)/1.3 var(--o-sans)}
.ok-rakam{font-variant-numeric:tabular-nums}
.ok-tutar{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ok-tek-satir{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ok-uzun{overflow-wrap:break-word;hyphens:manual}

/* Izgara (1.3 d). Kapsayıcı .ok-kap; sütun sayısı kart sayısının bölenidir, öksüz kart kalmaz. */
.ok-kap{container-type:inline-size}
.ok-izgara{display:grid;gap:var(--o-kart-ara);grid-template-columns:repeat(var(--ok-sutun,1),minmax(0,1fr))}
.ok-izgara[data-sutun="4"]{--ok-sutun:2}
@container (min-width:980px){.ok-izgara[data-sutun="4"]{--ok-sutun:4}}
@container (min-width:720px){.ok-izgara[data-sutun="3"]{--ok-sutun:3}}
@container (min-width:480px){.ok-izgara[data-sutun="2"]{--ok-sutun:2}}
.ok-izgara[data-sutun="6"]{--ok-sutun:2}
@container (min-width:720px){.ok-izgara[data-sutun="6"]{--ok-sutun:3}}
/* Ana alan + ayrıntı paneli (D8): 980 px altında panel alta iner. */
.ok-ana-panel{display:grid;gap:var(--o-kart-ara);align-items:start}
@container (min-width:980px){.ok-ana-panel{grid-template-columns:minmax(0,1fr) var(--o-panel-en)}}
/* Üst çubuk (1.5 a): 600 px ve üstünde sekmeler başlıkla aynı satırda; altında üst çubuğun altında şerit (kabuk.css) */
@container ok-ana (min-width:600px){.ok-kabuk-ana>.ok-ust{grid-template-areas:"logo baslik sekme eylem";grid-template-columns:auto minmax(0,max-content) minmax(0,1fr) auto}.ok-ust>.ok-sekmeler{justify-self:start;height:auto;margin:0 0 0 var(--o-b-4);padding:0;border:0}.ok-sekmeler>.ok-sekme{flex:none}}
/* Pencere (1.5 e): 600 px ve üstünde sekmeler solda sütun, altında başlığın altında şerit (pencere .ok-kap taşır; kabuk.css) */
@container (min-width:600px){.ok-pencere .ok-pencere-duzen{grid-template-columns:var(--o-pencere-sekme) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.ok-pencere .ok-pencere-sekmeler{flex-direction:column;height:auto;padding:var(--o-b-3);border-bottom:0;border-right:1px solid var(--o-cizgi);overflow-y:auto}.ok-pencere .ok-pencere-sekme{flex:none;justify-content:flex-start;min-height:var(--o-ikon-kutu);border-radius:var(--o-kose-dugme);box-shadow:none}.ok-pencere .ok-pencere-sekme[aria-selected="true"]{background:var(--o-vurgu-zemin);box-shadow:none}.ok-pencere .ok-pencere-sekme>.ok-ikon{display:inline-block}}
/* Kart içi iki sütun: kartın kendi genişliğine göre (kart .ok-kap taşır). */
.ok-iki-sutun{display:grid;gap:var(--o-b-2) var(--o-b-4)}
@container (min-width:480px){.ok-iki-sutun{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Form (1.6). Alanlar form kabının (.ok-form, container) genişliğine göre: 480 px ve üstünde iki sütun (D5: telefon yatay iki sütun), düğmeler kendi boyunda.
   Altında tek sütun, form düğmeleri satırı eşit paylaşır. Üst seçiciyle yazılır: form.css'teki aynı özgüllükteki kurala yenilmesin. */
:root{--o-cok-satir:3;--o-cok-satir-en:8}
/* Hareket (1.12 b, tokens.hareket): durum geçişi, toast gelişi, dönen halka turu. Hareket azaltılınca geçiş ve geliş 0 (kayma yok),
   dönen halka durmaz (iş sürüyor demek), yavaşlar. İstisna: iskeletin parıltısı geri.css'te durur. */
:root{--o-gecis:0.15s;--o-gelis:0.18s;--o-donus:0.8s}
@media (prefers-reduced-motion:reduce){:root{--o-gecis:0s;--o-gelis:0s;--o-donus:2.4s}}
@container (min-width:480px){.ok-form .ok-form-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}.ok-form .ok-form-alt>.ok-buton{flex:none}}
@container (min-width:480px){.ok-form .ok-kalem{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr) auto;grid-template-areas:"ad ad ad ad sil" "miktar birim fiyat tutar tutar"}}
/* Telefon yatay, klavye açık (D5): yalnız yazılan alan ve form düğmeleri görünür. Dokunmatikte metin alanına odak klavye demektir;
   örnek sayfada ?klavye=id aynı hali açar (html data-klavye). */
@media ((orientation:landscape) and (max-height:500px)){:root[data-klavye] :is(.ok-ust,.ok-ray,.ok-hap-menu,.ok-yok-klavye,.ok-icerik:has(.ok-form :focus)>:not(:has(.ok-form :focus)),.ok-form:has(:focus) .ok-alan:not(:focus-within)){display:none!important}}
@media ((orientation:landscape) and (max-height:500px)) and (pointer:coarse){:root:has(.ok-form :is(input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit]),textarea):focus) :is(.ok-ust,.ok-ray,.ok-hap-menu,.ok-yok-klavye,.ok-icerik:has(.ok-form :focus)>:not(:has(.ok-form :focus)),.ok-form:has(:focus) .ok-alan:not(:focus-within)){display:none!important}}
/* Takvim (1.6 c): tablet / masaüstü / dikey monitörde tarih kutusunun altında (anchor), telefonda (dikey ve yatay) alttan sheet, perdeli.
   form.css yalnız bu değişkenleri okur: --o-takvim-sheet 1 iken konum ve köşe sheet'e döner. */
:root{--o-takvim-kose:var(--o-kose-pencere) var(--o-kose-pencere) 0 0}
@media (not ((min-width:600px) and (min-height:501px))){.ok-takvim:popover-open{position-area:none;inset:auto 0 0 0;width:auto;max-width:none;margin:0 auto;border-radius:var(--o-takvim-kose);border-bottom:0}.ok-takvim::backdrop{background:var(--o-golge-perde)}}
/* Tablo ↔ kart liste (1.7 b). Tablo kabı (.ok-tablo-kap) 720 px'ten darsa her satır kart liste satırı olur: üstte başlık + sağda sayı,
   altında durum hapı ve meta hücreleri " · " ile (D6: hap meta satırına iner). Sütun başlıkları ekran okuyucuda kalır, görünmez.
   Hücrenin rolü ve sütun adı th'den gelir (veri.js: data-rol, data-ad). Üst seçiciyle yazılır: veri.css'teki tablo kuralına yenilmesin. */
@container ok-tablo (max-width:719.98px){.ok-tablo-kap .ok-tablo,.ok-tablo-kap .ok-tablo>tbody{display:block}.ok-tablo-kap .ok-tablo>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ok-tablo-kap .ok-tablo tr{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:calc(var(--o-b-1) / 2) var(--o-b-2);box-sizing:border-box;min-height:var(--o-satir);padding:var(--o-satir-ic)}.ok-tablo-kap .ok-tablo tr+tr{border-top:1px solid var(--o-cizgi)}.ok-tablo-kap .ok-tablo tr::after{content:"";order:3;flex-basis:100%}.ok-tablo-kap .ok-tablo tr>td{display:block;order:5;flex:0 1 auto;width:auto;max-width:none;height:auto;min-width:0;padding:0;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font:400 var(--o-y-meta)/1.45 var(--o-sans);color:var(--o-metin-2)}.ok-tablo-kap .ok-tablo td:is([data-rol="baslik"],[data-rol="sayi"]){font:600 var(--o-y-satir-basligi)/1.35 var(--o-sans);color:var(--o-metin)}.ok-tablo-kap .ok-tablo tr>td[data-rol="baslik"]{order:1;flex:1 1 0;width:auto;max-width:none}.ok-tablo-kap .ok-tablo td:is([data-rol="sayi"],[data-rol="eylem"]){order:2;flex:none;overflow:visible}.ok-tablo-kap .ok-tablo td[data-rol="durum"]{order:4;flex:none;overflow:visible}.ok-tablo-kap .ok-tablo td[data-etiketli]::before{content:attr(data-ad) " "}.ok-tablo-kap .ok-tablo td[data-rol="meta"]~td[data-rol="meta"]::before{content:"· "}.ok-tablo-kap .ok-tablo td[data-rol="meta"]~td[data-rol="meta"][data-etiketli]::before{content:"· " attr(data-ad) " "}}
