/* DateControl — Swiss stil sistemi: yalnız BİLEŞENLER.
   Jetonların tek kaynağı tokens.css (Faz A). Buraya `:root{--…}` yazma. */

/* ==========================================================
   DateControl — Swiss · tam uygulama
   Beyaz kâğıt · siyah kural çizgisi · tek sinyal kırmızısı
   Yuvarlak köşe YOK · yumuşak gölge YOK · ikon minimum
   ========================================================== */
::view-transition-old(root){animation:vt-out var(--d-exit) var(--e-in) both}
::view-transition-new(root){animation:vt-in var(--d-enter) var(--e-out) both}
@keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0; transform:translateY(4px)}}
.skip{position:absolute; left:-9999px; top:8px; z-index:200; background:var(--ink); color:var(--paper); padding:8px 14px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.skip:focus{left:var(--pad)}
.sortb{display:inline-flex; align-items:center; gap:4px; padding:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; min-height:24px}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.pan.on .pcount{animation:fadeUp var(--d-enter) var(--e-out) both}
.pan.on dl.kv{animation:fadeUp var(--d-enter) var(--e-out) both; animation-delay:40ms}
.pan.on .nt,.pan.on .warn,.pan.on .plog,.pan.on .sc2{animation:fadeUp var(--d-enter) var(--e-out) both; animation-delay:80ms}
*{box-sizing:border-box}
/* Baglanti sifirlamasi EKRAN icin de: bugune kadar bu kural yalniz `@media print`
   icindeydi, ekranda genel bir sifirlama yoktu. Sonucu: her bilesen tek tek
   `text-decoration:none` yazmak zorundaydi ve yazmayanlar tarayici varsayilanina
   dusuyordu -- Rapor'daki `.bar` satirlari ve `<a class="btn">` (XLSX) #0000EE
   mavisi ve ALTI CIZILI geliyordu (kullanici bildirdi). Baglanti gibi gorunmesi
   GEREKEN yerler zaten kendi rengini/altini acikca veriyor. */
a{color:inherit; text-decoration:none}
html,body{margin:0; min-height:100%}
/* Kap ile zemin ayni renk olursa kap gorunmez. Apple gruplanmis listeyi
   systemGroupedBackground uzerine koyar: acik temada gri, koyuda siyah. */
body{background:var(--bg-grouped); color:var(--ink); font-family:var(--sans);
  font-size:var(--t-body); line-height:var(--lh-body); letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit; color:inherit; margin:0; background:none; border:0}
button{cursor:pointer}
/* Apple'in vurgu agirligi 600; tarayici varsayilani 700 -- 'bold' Apple arayuzunde yok. */
b,strong{font-weight:var(--w-emphasis)}
svg{display:block; flex:none}
:focus-visible{outline:3px solid var(--tint); outline-offset:2px}
[hidden]{display:none!important}
/* Apple sayilari kendi yazi tipiyle, `tabular-nums` ile hizalar -- daktilo
   yazi tipini yalniz KOD icin ayirir. `.m` 107 sablon yerinde kullaniliyor. */
.m{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
/* Rakam tasiyan KAPLAR: esit genislikli rakam, mirasla iceriye gecer.
   Daktilo kalkinca sutun hizasini ayakta tutan sey bu -- Faz 2 buna bagli.
   Kisa sinif adlari (.n .d .v .ts) tek basina SECILMEZ: bu adlar projede
   daha once cakisti, test_ui0_css onlari yasakliyor. */
.tbl,.ftbl,.mtx,.xt,.imptable,.rw,.cal,.bars,.rdl,.dqscore,.dqt,.stats,
.pngrid,.pnr,.logl,.plog,.tlist,.lead,.ix,.sbnav,.scrub,.s18,.crow,.tdl,
.custgrid,.acctpick,.kv2,.modlist,.nblist{font-variant-numeric:tabular-nums}
.up{font-size:var(--t-2xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.s-sig{color:var(--sig)} .s-ink{color:var(--ink)} .s-calm{color:var(--ink3)} .s-ok{color:var(--ok)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.page{max-width:1560px; margin:0 auto; padding:0 var(--pad) 110px}

/* ---------- prototip notu ---------- */
.note{display:flex; align-items:baseline; gap:12px; padding:9px 0 8px; border-bottom:1px solid var(--hair);
  font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.note b{color:var(--sig); font-weight:var(--w-emphasis)}
.note .sp{flex:1}
.note kbd{font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:0; text-transform:none; border:1px solid var(--hair2); padding:0 4px; margin-left:2px}
.note button{color:var(--ink3); font-size:var(--t-xs); min-width:24px; min-height:24px} .note button:hover{color:var(--ink)}

/* ---------- başlık + ana navigasyon ---------- */
/* TEK kosulsuz `.mtop` kurali. Uc taneydi: UI-1'inki gap 26 / flex-wrap wrap
   diyordu, Faz F'inki gap 20 / nowrap ile onu sessizce olduruyordu, Faz 5
   de konumu ayri yaziyordu. Kazanan degerler burada toplandi.
   Mobil blok (Faz B) DAHA SONRA gelip dolgu ve boslugu kendi ayarliyor. */
.mtop{display:flex; align-items:flex-end; gap:20px; padding:24px 0 0; flex-wrap:nowrap;
  position:sticky; top:0; z-index:30}
/* Sayfa basligi `--t-lg` (title3) idi: 1412px'lik yerlesimde 17px, yanindaki
   40px'lik manset sayisinin yaninda cekingen duruyordu. Sayfa basligi title1'e
   cikti; ust cubukta 493px bosluk var, tasma yok. */
.mtop h1{margin:0 0 12px; font-size:var(--t-title1); font-weight:var(--w-emphasis); letter-spacing:-.032em; white-space:nowrap; line-height:1.1}
.mtop h1 i{font-style:normal; font-weight:var(--w-regular); text-transform:none; letter-spacing:-.014em; color:var(--ink3)}
.nav{display:flex; gap:0; margin-left:6px; margin-bottom:0}
.nav a{display:block; padding:6px 14px 11px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); text-decoration:none; position:relative; transition:color var(--dur) var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:14px; right:14px; bottom:-3px; height:3px; background:var(--sig)}
.mtop .sp{flex:1}
.mtop .right{display:flex; align-items:flex-end; gap:18px; margin-bottom:11px}
.srch{position:relative; width:min(260px,36vw)}
.srch input{width:100%; padding:2px 26px 5px 19px; border-bottom:1px solid var(--hair2); font-size:var(--t-sm)}
.srch input:focus{border-bottom-color:var(--ink)}
.srch input::placeholder{color:var(--ink3)}
.srch .si{position:absolute; left:0; bottom:7px; color:var(--ink3); pointer-events:none}
.srch kbd{position:absolute; right:0; bottom:5px; font-family:var(--mono); font-size:var(--t-2xs); color:var(--ink3); border:1px solid var(--hair2); padding:0 4px; pointer-events:none}
.newb{padding:7px 14px; background:var(--ink); color:var(--paper); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); white-space:nowrap}
.newb:hover{background:var(--sig)}
.acct{position:relative}
.acct>button{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); padding:4px 0; border-bottom:1px solid transparent}
.acct>button:hover{color:var(--ink); border-bottom-color:var(--ink)}
.acct .menu{position:absolute; right:0; top:calc(100% + 8px); background:var(--paper); border:1px solid var(--separator); min-width:200px; z-index:30; padding:6px 0}
.acct .menu button{display:block; width:100%; text-align:left; padding:8px 16px; font-size:var(--t-sm)}
.acct .menu button:hover{background:var(--ink); color:var(--paper)}
.acct .menu .sep{border-top:1px solid var(--hair); margin:6px 0}
.rule3{border-bottom:1px solid var(--separator)}

/* ---------- manşet (radar) ---------- */
/* ---------- manşet: iki odak (Faz B) ----------
   Günlük kullanım iki soruyla başlıyor — "ne gecikti", "bu hafta ne var". Tek dev
   rakam bunlardan birini yanıtlıyor, diğeri ayrı bir sayaç bandına düşüyordu; band
   manşetin cümlesini de tekrar ediyordu. İki odak yan yana, aralarında tek saç teli;
   30/90 gün sağ odağın altında ikincil çip. Ayrı .stats / .leadstats bandı yok. */
.lead{display:flex; align-items:flex-end; flex-wrap:wrap; gap:0;
  padding:13px 0 12px; border-bottom:1px solid var(--separator)}
.focw{display:flex; align-items:flex-end; gap:0 clamp(12px,1.6vw,24px); min-width:0; max-width:600px}
.focw+.focw{border-left:1px solid var(--hair);
  margin-left:clamp(22px,3vw,52px); padding-left:clamp(22px,3vw,52px)}
/* Rakam ile cümle yan yana: alt alta dizmek manşeti 148 px yapıyordu, yan yana 92 px
   ve rakam küçülmüyor (Faz B). Üst etiket iki sütunu birden kapsar. */
.foc{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"e e" "n t";
  column-gap:clamp(10px,1.2vw,16px); align-items:end; text-align:left; min-width:0}
.foc .up{grid-area:e; color:var(--ink3); margin-bottom:5px; transition:color var(--d-micro) var(--e-out)}
.foc .n{grid-area:n; font-size:var(--t-hero2); font-weight:var(--w-emphasis); line-height:.82; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.foc .lt{grid-area:t; display:block; min-width:0; padding-bottom:3px}
.foc .l{display:block; font-size:var(--t-lg); font-weight:var(--w-emphasis); letter-spacing:-.02em; line-height:1.2}
.foc .s{display:block; font-size:var(--t-sm); color:var(--ink2); line-height:1.35; margin-top:2px}
.foc:hover .up,.foc:hover .l{color:var(--ink)}
.foc[aria-pressed="true"] .up{color:var(--ink); box-shadow:0 2px 0 var(--sig)}
/* Sağ odağın uzun aralıkları: odağın altında, aynı sütunda, sessiz. */
.focchips{display:flex; align-items:baseline; gap:0; align-self:end; padding-bottom:3px}
.fc{display:inline-flex; align-items:baseline; gap:6px; padding:5px 0; margin-left:16px; min-height:26px;
  font-size:var(--t-xs); color:var(--ink3); white-space:nowrap;
  transition:color var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out)}
.fc b{font-size:var(--t-sm); font-weight:var(--w-emphasis); color:var(--ink2); font-variant-numeric:tabular-nums}
.fc:hover{color:var(--ink)} .fc:hover b{color:var(--ink)}
.fc[aria-pressed="true"]{color:var(--ink); box-shadow:0 2px 0 var(--sig)} .fc[aria-pressed="true"] b{color:var(--sig)}
.lead .asofnote{grid-column:1/-1; font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  color:var(--sig); padding-top:10px}
/* Veri kalitesi filtre çubuğuna indi: görünür ama sessiz (eksik veri politikası). */
.fbar .qbad{display:inline-flex; align-items:baseline; gap:6px; font-size:var(--t-xs); color:var(--ink3);
  padding:6px 0; min-height:28px; white-space:nowrap; transition:color var(--d-micro) var(--e-out)}
.fbar .qbad b{font-weight:var(--w-emphasis); color:var(--ink2); font-variant-numeric:tabular-nums}
.fbar .qbad:hover{color:var(--ink)} .fbar .qbad:hover b{color:var(--ink)}
.fbar .qbad[aria-pressed="true"]{color:var(--ink); box-shadow:0 2px 0 var(--sig)}
.fbar .qbad[aria-pressed="true"] b{color:var(--sig)}

/* ---------- tipografik dizin ---------- */
.index{padding:11px 0 10px; border-bottom:1px solid var(--hair)}
.ixrow{display:grid; grid-template-columns:74px minmax(0,1fr); gap:5px 14px; align-items:baseline; padding:3px 0}
.ixrow .ixl{color:var(--ink3); padding-top:1px}
.ixv{display:flex; flex-wrap:wrap; gap:2px 0; align-items:baseline}
.ix{font-size:var(--t-sm); color:var(--ink2); padding:3px 0; min-height:24px; white-space:nowrap; transition:color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.ix:hover{color:var(--ink); box-shadow:0 1px 0 var(--ink)}
.ix[aria-pressed="true"]{color:var(--ink); font-weight:var(--w-emphasis); box-shadow:0 2px 0 var(--sig)}
.ix .n{font-size:var(--t-xs); color:var(--ink3); margin-left:4px; font-variant-numeric:tabular-nums}
.ix[aria-pressed="true"] .n{color:var(--sig)}
.sepd{color:var(--hair2); padding:0 8px; font-size:var(--t-sm); user-select:none}
.rw .t em.shby,.tbl td em.shby{font-style:normal; font-size:var(--t-2xs); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-left:8px; padding:1px 5px; box-shadow:inset 0 0 0 1px var(--hair2)}
.rw .t em.shby::before,.tbl td em.shby::before{content:"↗ "}
.acctpick button{position:relative} .acctpick button.inv::after{content:"DAVETLİ · HESAP AÇ"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:var(--t-2xs); letter-spacing:var(--tr-caption2); color:var(--sig)}
.shl{list-style:none; margin:6px 0 0; padding:0} .shl li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--hair); font-size:var(--t-sm)} .shl .pend{font-style:normal; color:var(--sig)} .shl a.ix{text-decoration:none}
.pa .btn kbd{margin-left:6px; opacity:.6}
.qrbox{width:132px; height:132px; border:1px solid var(--separator); border-radius:var(--radius-md); background:var(--bg-3); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--t-lg); font-weight:var(--w-emphasis); margin:0 0 12px; background:repeating-linear-gradient(45deg,var(--wash) 0 6px,transparent 6px 12px)}
/* dizin v2: sıra = ne gösterilsin; her değer tıklanabilir bir düğme, seçili = mürekkep dolgu */
.index{padding:8px 0 8px}
.index .ixrow{grid-template-columns:84px minmax(0,1fr); gap:2px 14px; align-items:center; padding:1px 0}
.index .ixrow .ixl{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); padding-top:0; line-height:1}
.index .ixv{gap:2px 2px; align-items:center; margin-left:-8px}
.index .ix{font-size:var(--t-sm); font-weight:var(--w-regular); color:var(--ink2); padding:4px 8px; min-height:26px; line-height:1.2; text-transform:none; letter-spacing:0; box-shadow:none; transition:background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out)}
.index .ix:hover{color:var(--ink); background:var(--wash); box-shadow:none}
.index .ix[aria-pressed="true"]{color:var(--paper); background:var(--ink); font-weight:var(--w-emphasis); box-shadow:none}
.index .ix .n{font-size:var(--t-xs); color:var(--ink3); margin-left:6px; font-variant-numeric:tabular-nums}
.index .ix[aria-pressed="true"] .n{color:var(--paper); opacity:.72}
.index .ix.all[aria-pressed="true"]{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.index .ix.all[aria-pressed="false"]{color:var(--ink3)}
.index .ix.zero{opacity:.45}
.index .ix.more{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-left:4px}
.index .ix.more:hover{color:var(--ink); background:transparent; text-decoration:underline}
.index .ix .pin{display:inline-block; width:6px; height:6px; background:currentColor; margin-right:7px; vertical-align:middle; opacity:.55}
.ixsave{margin-left:6px; border:1px dashed var(--hair2); padding:4px 10px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2); min-height:26px; transition:border-color var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out)}
.ixsave:hover{border-style:solid; border-color:var(--ink); color:var(--ink)}
.ixhint{color:var(--ink3); font-size:var(--t-sm); padding:4px 8px}
.ixtog{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); padding:4px 8px; margin-left:auto; min-height:26px}
.ixtog:hover{color:var(--ink)}
.index.collapsed .ixrow{display:none}
.ixsum{display:none; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--t-sm); color:var(--ink2); padding:3px 0; min-height:30px; width:100%; text-align:left}
.index.collapsed .ixsum{display:flex}
.ixsum b{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-right:6px}
.ixsum .sel{padding:3px 8px; background:var(--ink); color:var(--paper); font-weight:var(--w-emphasis)}
.ixsum .muted{color:var(--ink3)} .ixsum:hover b{color:var(--ink)}
.seg{display:inline-flex; border:1px solid var(--ink); margin-left:10px}
.seg button{padding:4px 10px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2); min-height:28px; transition:background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out)}
.seg button+button{border-left:1px solid var(--ink)} .seg button:hover{background:var(--wash); color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.fbar .dens{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); padding:4px 0 4px 8px; min-height:28px; white-space:nowrap}
.fbar .dens:hover{color:var(--ink)} .fbar .dens b{color:var(--ink); font-weight:var(--w-emphasis)}
.clrall{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--sig); box-shadow:0 2px 0 var(--sig); margin-left:14px}
.clrall:hover{color:var(--ink); box-shadow:0 2px 0 var(--ink)}

.fbar{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:10px 0; border-bottom:1px solid var(--hair); position:relative}
.fbar .fl{color:var(--ink3); margin-right:6px}
.fchip{display:inline-flex; align-items:center; gap:7px; padding:4px 9px 4px 10px; border:1px solid var(--ink); font-size:var(--t-xs); font-weight:var(--w-emphasis); min-height:28px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.fchip:hover{background:var(--wash)}
.fchip .k{color:var(--ink3); font-weight:var(--w-regular); margin-right:-2px}
.fchip .x{padding:4px 6px; margin:-4px -4px -4px 0; font-size:var(--t-2xs); line-height:1; color:var(--ink3)} .fchip .x:hover{color:var(--sig)}
.fadd{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px dashed var(--hair2); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2); min-height:28px}
.fadd:hover,.fadd[aria-expanded="true"]{border-style:solid; border-color:var(--ink); color:var(--ink)}
.fbar .cnt{margin-left:auto; font-size:var(--t-xs); color:var(--ink3); white-space:nowrap}
.fbar .cnt b{color:var(--ink); font-weight:var(--w-emphasis)}
.flink{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); box-shadow:0 1px 0 var(--hair2); padding:2px 0; margin-left:12px}
.flink:hover{color:var(--ink); box-shadow:0 2px 0 var(--ink)} .flink.sig{color:var(--sig)}
.fpop{position:absolute; left:0; top:calc(100% + 2px); z-index:25; background:var(--paper); border:1px solid var(--separator); min-width:260px; max-width:min(560px,96vw); display:grid; grid-template-columns:200px minmax(0,1fr)}
.fpop.one{grid-template-columns:1fr}
.fpop .col{padding:6px 0; max-height:340px; overflow-y:auto}
.fpop .col+.col{border-left:1px solid var(--hair)}
.fpop .hd{padding:8px 14px 6px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.fpop button.it{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; padding:7px 14px; font-size:var(--t-sm); min-height:32px}
.fpop button.it:hover,.fpop button.it[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.fpop button.it .n{margin-left:auto; font-size:var(--t-xs); opacity:.6}
.fpop .rng{padding:8px 14px 12px; display:grid; gap:8px}
.fpop .rng label{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.fpop .rng input{width:100%; padding:6px 0; border-bottom:1px solid var(--hair2); font-size:var(--t-sm); background:var(--paper); color:var(--ink)}
.fpop .rng input:focus{border-bottom-color:var(--ink)}
.fpop .rng .btn{justify-content:center}
.adv .grp{border:1px solid var(--ink); padding:12px 14px 10px; margin-bottom:12px; position:relative}
.adv .grp .gh{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.adv .grp .gh .seg2{margin:0; width:auto} .adv .grp .gh .seg2 button{padding:5px 12px; flex:none}
.adv .grp .gh .rmg{margin-left:auto; color:var(--ink3); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.adv .grp .gh .rmg:hover{color:var(--sig)}
.adv .rule{display:grid; grid-template-columns:150px 140px minmax(0,1fr) 28px; gap:10px; align-items:center; padding:5px 0}
.adv .rule select,.adv .rule input{width:100%; padding:6px 0; border-bottom:1px solid var(--hair2); font-size:var(--t-sm); background:var(--paper); color:var(--ink)}
.adv .rule select:focus,.adv .rule input:focus{border-bottom-color:var(--ink)}
.adv .rule .rm{color:var(--ink3); text-align:center} .adv .rule .rm:hover{color:var(--sig)}
.adv .joins{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); text-align:center; margin:-4px 0 8px}
.adv .addrow{display:flex; gap:0}
.adv .cntl{font-size:var(--t-sm); color:var(--ink2); align-self:center}
.empty .sug{display:flex; gap:0; margin-top:16px; flex-wrap:wrap} .empty .sug .btn{margin-left:-1px} .empty .sug .btn:first-child{margin-left:0}
/* ---------- 18 ay ---------- */
.distrib{padding:12px 0 0; border-bottom:1px solid var(--hair)}  /* şerit kabı; .dens yoğunluk düğmesidir */
.dhead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; color:var(--ink3)}
.dhead .sel{color:var(--ink); font-weight:var(--w-emphasis); font-size:var(--t-xs); text-transform:none; letter-spacing:var(--tr-caption2)}
.dcols{display:flex; align-items:flex-end; gap:4px; height:38px; border-bottom:1px solid var(--ink)}
.dcol{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; transition:opacity var(--dur) var(--ease)}
.dcol:hover{opacity:.5}
.dcol i{display:block; width:100%}
.dcol.on::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--sig)}
.dax{display:flex; gap:4px; margin-top:6px; padding-bottom:11px}
.dax span{flex:1; text-align:center; font-size:var(--t-xs); color:var(--ink3); overflow:hidden}

/* ---------- liste ---------- */
/* TEK kosulsuz `.sec` kurali: duzen, yapiskanlik ve malzeme bir arada.
   Ikiye bolunmustu -- Swiss katmani duzeni, Apple katmani yapiskanligi
   yaziyordu; ikisi de kosulsuzdu ve ikincisi ilkini sessizce eziyordu.
   5131 px'lik bir listede hangi kovada oldugunu bilmek gerekiyor;
   Apple'in liste davranisi: bolum basligi ustte asili kalir -- ama arac
   cubugunun ALTINDA. */
.sec{display:flex; align-items:baseline; gap:14px; padding:24px var(--row-end) 8px 0;
  border-bottom:1px solid var(--separator); width:100%; text-align:left;
  position:sticky; top:var(--tb-h, 56px); z-index:3; flex-wrap:nowrap;
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-thin);
  backdrop-filter:var(--material-thin);
  /* Gecişte kaymasin: kendi adi yok, kok katmaninda kalir. */
  view-transition-name:none; transition:opacity var(--dur) var(--ease)}
.sec:hover{opacity:.55}
/* SINIF ÇAKIŞMASI DÜZELTMESİ (Apple UX Faz 2).
   `.tw` iki ayrı şeyi adlandırıyordu: bölüm katlama oku ve tablo sarmalayıcısı.
   Tablo olanının mobil `::after`'ı "→ tabloyu yana kaydırın" metnini bölüm
   başlığındaki 11 px'lik kutuya sıkıştırıyor, başlığı 99 px yapıyordu. Bu, bu
   projenin üçüncü sınıf çakışması (öncekiler: .presets ve .dens, UI-PLAN'da).
   Bölüm oku artık `.sectw`. */
.sec .sectw{font-size:var(--t-xs); color:var(--ink3); width:11px; flex:none}
.sec .nm{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.sec .ct{margin-left:auto; font-size:var(--t-xs); color:var(--ink3); letter-spacing:var(--tr-caption2)}
/* VADE Faz 3 — LISTEDEKI BUGUN CIZGISI (VADE-PLANI tani B2).
   Satirlarin tasidigi surekli eksenin SIFIRI listede yoktu; bu cizgi odur.
   Kovalar kalir, cizgi onlarin ustune biner:
     `.tdl`     arac cubugunun altina yapisir (z-index 4)
     `.sec.fut` gelecek bolum basliklari CIZGININ ALTINA yapisir
   Gecmis basliklari (`.sec` yalin) ayni yerde asili kalmaya devam eder ama
   cizgi onlari tamamen orter: `.tdl` yukarida, hemen ardindan gelen gelecek
   basligi asagida -- ikisi birlikte 49 px'lik bolum basligini kapatir.
   Olcu tek yerde: `--tdl-h` hem cizginin yuksekligi hem `.sec.fut`in payi.
   Ikisi ayrisirsa ya bosluk ya ortusme olur; `test_vade_faz3_cizgi` bagli tutar. */
.tdl{position:sticky; top:var(--tb-h, 56px); z-index:4;
  display:grid; align-items:center; column-gap:clamp(14px,1.8vw,30px);
  min-height:var(--tdl-h, 34px);
  /* `.grp` 1 px kenarlikli bir kart: satir icerigi kabin 1 px icinden basliyor.
     Cizgi kart kenarina degil SATIRA hizalanir, yoksa "bugun" gun sutunundan
     1 px kayar ve hizalama fazin butun fikriydi. */
  padding:0 calc(var(--row-end) + 1px) 0 1px;
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-thin);
  backdrop-filter:var(--material-thin)}
.sec.fut{top:calc(var(--tb-h, 56px) + var(--tdl-h, 34px))}
/* "bugun" satirlarin gun sutunuyla ayni yerde durur: cizgi, her satirin
   uzerinde olculdugu olcegin sifiridir -- ayri bir etiket degil.
   GENISLIK BURADA YAZILMAZ: `.tdl` sicak satirin `grid-template-columns`
   kuralina ORTAK edildi (asagida ve her kirilimda `,.tdl`), boylece sutun
   nerede degisirse cizgi de orada degisir. Sayiyi iki yere yazmak bu dosyada
   daha once dorduncu kez ayrismisti. */
.tdl .now{text-align:right; font-size:var(--t-xs); font-weight:var(--w-emphasis);
  letter-spacing:var(--tr-caption2); color:var(--ink)}
.tdl .eks{grid-column:2 / -1; display:flex; align-items:center; min-width:0;
  gap:clamp(14px,1.8vw,30px)}
.tdl .ln{flex:1 1 auto; min-width:24px; height:1px; background:var(--ink)}
.tdl .dat{flex:none; font-size:var(--t-xs); color:var(--ink2); white-space:nowrap}
.tdl .dats{display:none; flex:none; font-size:var(--t-xs); color:var(--ink2); white-space:nowrap}
.tdl .rng{flex:none; font-size:var(--t-xs); color:var(--ink3); white-space:nowrap}
/* Baska bir gune bakilirken cizgi seridin OYNATMA KAFASIYLA ayni dili konusur
   (Faz 2: bugun = ink kilcizgi, asof = 2 px sinyal). */
.tdl.away .now,.tdl.away .dat,.tdl.away .dats{color:var(--sig)}
.tdl.away .ln{height:2px; background:var(--sig)}
/* TEK kosulsuz `.rw` kurali. Ucu vardi: Swiss katmani duzeni, Apple katmani
   hizalamayi ve yay gecisini, ucuncusu de ayraci kaldirmayi yaziyordu --
   ayrac artik `::after`da ve 20px girintili. Kazanan degerler burada. */
/* E0/H7: `.rw` artık <div>; ızgara ve dolgu içerideki <button class="rwb">de.
   Dış kap vurgu çubuğunu (::before), ayracı (::after) ve hızlı eylemleri taşır. */
/* Satir icerigi SAGDA kartin kenarina yapisikti (olculen bosluk 0px), solda ise
   `.d` sutununun sag hizasindan 42px bosluk vardi. Tarih kart cizgisine deger
   haldeydi. Iz surulebilir olsun diye deger token: mobilde yatay butce dar,
   oraya ayri deger veriliyor. */
.rw{display:block; width:100%; text-align:left; border-bottom:none; position:relative;
  /* KLAVYEYLE GIDILEN SATIR YAPISKAN KATMANIN ALTINDA KALIYORDU. `scrollIntoView`
     sticky ogeleri bilmez: yukari dogru gezinirken satir tepeye dayaniyor ve arac
     cubugu + bolum basligi onu yutuyordu (olculdu: 114 px; VADE Faz 3'un bugun
     cizgisiyle 148 px, yani satirin tamami). Pay burada yazilir; 52 px bolum
     basliginin olculen yuksekligi (49 px) + nefes. */
  scroll-margin-top:calc(var(--tb-h, 56px) + var(--tdl-h, 34px) + 52px);
  transition:background var(--d-quick) var(--spring-quick)}
.rwb{display:grid; align-items:center; column-gap:clamp(14px,1.8vw,30px); row-gap:0; width:100%; min-width:0;
  text-align:left; background:none; border:0; margin:0; color:inherit; font:inherit;
  letter-spacing:inherit; cursor:pointer; border-radius:0}
.rw::before{content:""; position:absolute; left:calc(var(--pad)*-1); top:0; bottom:0; width:0; background:var(--ink); transition:width var(--dur) var(--ease)}
.rw:hover{background:var(--fill-4)}
.rw.cur::before{width:7px}
.rw.act{background:var(--sigbg)} .rw.act::before{width:7px; background:var(--sig)}
.rw.dn{opacity:.34} .rw.dn .t{text-decoration:line-through}
.rw.hot .rwb{grid-template-columns:106px minmax(0,1fr) 176px 150px 96px; padding:13px var(--row-end) 12px 0}
.rw.warm .rwb{grid-template-columns:98px minmax(0,1fr) 176px 150px 96px; padding:10px var(--row-end) 9px 0}
.rw.cool .rwb{grid-template-columns:90px minmax(0,1fr) 176px 96px; padding:7px var(--row-end) 6px 0}
.rw .d{font-weight:var(--w-emphasis); letter-spacing:-.045em; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* Yoğunluk AĞIRLIK eksenidir, ZAMAN ekseni değil. `.rw.cool .d` burada ayrıca
   `color:var(--ink3)` yazıyordu ve (0,3,0) özgüllüğüyle zaman rampasını eziyordu:
   31–90 gün arası satırlar rampanın `f1` durağını hiç göremiyordu (ölçüldü: 16
   satırın 11'i). Renk artık YALNIZ `.vd-*`ten gelir (VADE Faz 4). */
.rw.hot .d{font-size:var(--t-xl)} .rw.warm .d{font-size:var(--t-lg)} .rw.cool .d{font-size:var(--t-sm)}
.rw .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.016em}
.rw.hot .t{font-size:var(--t-lg); font-weight:var(--w-emphasis)} .rw.warm .t{font-size:var(--t-sm); font-weight:var(--w-regular)} .rw.cool .t{font-size:var(--t-sm); color:var(--ink2)}
/* Başlık içi rozetler düz yazımda: her satırda büyük harf, başlığın kendisiyle yarışıyordu (UI-2). */
.rw .t em{font-style:normal; font-size:var(--t-xs); font-weight:var(--w-regular); letter-spacing:var(--tr-caption2); color:var(--ink3); box-shadow:0 1px 0 var(--hair2); margin-left:12px; white-space:nowrap}
.rw .sub{grid-column:2; font-size:var(--t-xs); color:var(--ink3); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Müşteri sütunu düz yazımda: 103 satırlık listede büyük harf, taramayı yavaşlatan
   ve ekranı gürültüye çeviren en büyük kalemdi (UI-2). */
.rw .c{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rw .k{font-size:var(--t-sm); color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rw .dd{font-size:var(--t-xs); color:var(--ink3); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Hizli eylemler satirin USTUNDE hic gorunmez (kullanici karari M3, 12.09.2026).
   Eskiden `:hover` / `.cur` / `:focus-within` uclusuyle beliriyorlardi; iki kusur
   birden uretiyordu. (1) `opacity:0` tiklanabilirligi KALDIRMAZ: dokunma cihazinda
   bu cift hic gorunemiyor ama 375 px'de satirin %41'ini kaplayan dokunulabilir bir
   alandi, paneli acmak isteyen kisi kaydi sessizce tamamliyordu. (2) Dokunmak satir
   dugmesine odak veriyor, liste gezinmesi `.cur` basiyor — yani karta dokununca
   dugmeler beliriyordu. Yol artik kaydirma (telefonda `.swl`/`.swa` seridi), panel,
   sag tik menusu ve `x`/`s` kisayollari. */
.rw .qa{position:absolute; right:var(--row-end); top:50%; transform:translateY(-50%); display:flex; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease)}
/* Tek istisna KLAVYE: odak DOGRUDAN hizli eylemin uzerine gelirse. `opacity:0` ve
   `pointer-events:none` sekme sirasindan cikarmaz, dolayisiyla yol kapanmiyor. */
.rw .qa:focus-within{opacity:1; pointer-events:auto}
/* Iki satirli satirda eylemler satirin ortasina degil, tarihin durdugu ILK
   satira hizalanir: alt meta satirinin yarisi kadar yukari. Deger tokenden
   turetilir, bu yuzden yogunluk/olcek degisince kendini duzeltir. */
.rw:has(.sub) .qa{margin-top:calc((var(--t-subhead) * var(--lh-subhead) + var(--sp-1)) / -2)}
/* Eylemler tarihin uzerine biniyor (ikisi de sag kenara yaslanik). Ortuk bir
   maske yerine tarih cekilir: Gmail/Linear'in satir-eylem deseni. */
.rw .dd{transition:opacity var(--dur) var(--ease)}
/* Tarih yalnizca klavye hizli eylemi actiginda cekilir; baska hicbir durumda
   uzerine binen bir sey yok. */
.rw:has(.qa:focus-within) .dd{opacity:0}
/* Swiss artigi: 0 yaricap + saf siyah cerceve, 26px yaricapli kartin icinde
   uygulamanin en agir cizgisiydi. Kilcal ayrac + hap ucları ile hizalandi. */
.qb{padding:6px 13px; min-height:28px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--label); background:var(--paper); border:1px solid var(--separator); margin-left:-1px; border-radius:0; transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.qa .qb:first-child{border-start-start-radius:var(--radius-pill); border-end-start-radius:var(--radius-pill); padding-inline-start:15px}
.qa .qb:last-child{border-start-end-radius:var(--radius-pill); border-end-end-radius:var(--radius-pill); padding-inline-end:15px}
.qb:hover{background:var(--ink); color:var(--paper)}
.empty{padding:70px 0; border-bottom:1px solid var(--hair)}
.empty b{display:block; font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.03em; margin-bottom:7px}
.empty span{font-size:var(--t-md); color:var(--ink3)}
.empty .btn{margin-top:18px}

/* ---------- tablo + toplu işlem ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:var(--t-sm); margin-top:22px}
.tbl th{position:sticky; top:var(--tb-h, 56px); z-index:3; background:var(--paper); text-align:left; padding:10px 6px 9px 0; border-bottom:1px solid var(--separator); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); white-space:nowrap; cursor:pointer; transition:color var(--dur) var(--ease)}
.tbl th:hover{color:var(--sig)}
.tbl th.nosort{cursor:default} .tbl th.nosort:hover{color:inherit}
.tbl th .ar{font-weight:var(--w-regular)}
.tbl td{padding:8px 6px 8px 0; border-bottom:1px solid var(--hair); white-space:nowrap}
.tbl tbody tr{cursor:pointer; transition:background var(--dur) var(--ease)}
.tbl tbody tr:hover td{background:var(--wash)}
.tbl tbody tr.act td{background:var(--sigbg)}
.tbl tbody tr.chk td{background:var(--wash2)}
.tbl td.w{max-width:340px; overflow:hidden; text-overflow:ellipsis}
.tbl td.n{font-variant-numeric:tabular-nums; text-align:right; padding-right:10px}
.tbl td.b{font-family:var(--sans); font-weight:var(--w-emphasis); font-size:var(--t-lg); letter-spacing:-.04em}
.cb{width:14px; height:14px; border:1.5px solid var(--ink); display:inline-grid; place-items:center; vertical-align:-2px; cursor:pointer; background:var(--paper)}
.cb.on{background:var(--ink)} .cb.on::after{content:""; width:6px; height:6px; background:var(--paper)}
.bulk{position:sticky; bottom:0; z-index:20; background:var(--ink); color:var(--paper); display:flex; align-items:center; gap:0; padding:0 var(--pad); margin:0 calc(var(--pad)*-1); animation:up 160ms var(--ease)}
.bulk .cnt{padding:14px 0; font-weight:var(--w-emphasis); margin-right:auto}
.bulk button{padding:14px 18px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--paper); border-left:1px solid rgba(128,128,128,.4)}
.bulk button:hover{background:var(--sig)}
.bulk button.x{color:var(--ink3)} .bulk button.x:hover{background:none; color:var(--paper)}

/* ---------- takvim ---------- */
.calhead{display:flex; align-items:baseline; gap:20px; padding:22px 0 12px; border-bottom:1px solid var(--separator)}
.calhead h2{margin:0; font-size:var(--t-2xl); font-weight:var(--w-emphasis); letter-spacing:-.04em; line-height:1}
.calhead .nb{display:flex; gap:0}
.calhead .nb button{padding:6px 12px; border:1px solid var(--ink); margin-left:-1px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.calhead .nb button:hover{background:var(--ink); color:var(--paper)}
.calhead .sp{flex:1}
.calhead .lg{display:flex; gap:16px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.calhead .lg i{display:inline-block; width:10px; height:10px; vertical-align:-1px; margin-right:5px}
.cal{display:grid; grid-template-columns:repeat(7,1fr); border-left:1px solid var(--hair)}
.cal .dow{padding:8px 10px 6px; font-size:var(--t-2xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); border-right:1px solid var(--hair); border-bottom:1px solid var(--separator)}
.cal .cell{min-height:118px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:7px 8px 8px; position:relative; display:flex; flex-direction:column; gap:3px}
.cal .cell.off{background:var(--wash)}
.cal .cell .dn{font-size:var(--t-xs); color:var(--ink3); margin-bottom:3px; display:flex; justify-content:space-between}
.cal .cell.today .dn b{background:var(--ink); color:var(--paper); padding:1px 6px; font-weight:var(--w-emphasis)}
.cal .cell.wk .dn{color:var(--hair2)}
.cal .ev{display:block; width:100%; text-align:left; font-size:var(--t-xs); line-height:1.3; padding:3px 6px; border-left:3px solid var(--tint); background:var(--wash); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background var(--dur) var(--ease)}
.cal .ev:hover{background:var(--wash2)}
.cal .ev.sig{border-left-color:var(--sig)} .cal .ev.calm{border-left-color:var(--hair2); color:var(--ink3)}
.cal .ev.dn{opacity:.4; text-decoration:line-through}
.cal .more{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--sig); text-align:left; padding:2px 6px}
.cal .more:hover{color:var(--ink)}

/* ---------- müşteriler ---------- */
.custgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); border-top:1px solid var(--separator); border-left:1px solid var(--hair)}
.custcard{border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:20px 20px 18px; text-align:left; transition:background var(--dur) var(--ease); display:flex; flex-direction:column; gap:0}
.custcard:hover{background:var(--wash)}
.custcard h3{margin:0 0 12px; font-size:var(--t-lg); font-weight:var(--w-emphasis); letter-spacing:-.02em;}
.custcard .row{display:flex; gap:22px}
.custcard .row b{display:block; font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.custcard .row span{display:block; margin-top:5px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.custcard .nx{margin-top:14px; padding-top:10px; border-top:1px solid var(--hair); font-size:var(--t-xs); color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.custcard .nx b{color:var(--sig); font-weight:var(--w-emphasis); margin-right:6px}
.ph2{display:flex; align-items:flex-end; gap:20px; padding:22px 0 14px; flex-wrap:wrap}
.ph2 .bigtitle{margin:0; font-size:var(--t-largetitle); line-height:var(--lh-largetitle);
  letter-spacing:var(--tr-largetitle); font-weight:var(--w-emphasis);}
.ph2 .sp{flex:1}
.ph2 .bk{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); text-decoration:none; box-shadow:0 1px 0 var(--hair2)}
.ph2 .bk:hover{color:var(--ink); box-shadow:0 2px 0 var(--ink)}

/* ---------- raporlar ---------- */
.rpt{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0 clamp(24px,3vw,48px); padding-top:20px}
.rpt .ctl{padding-top:6px}
.rpt .ctl .lab{display:block; margin-bottom:4px; color:var(--ink3)}
.rpt .ctl select{width:100%; padding:7px 0; border-bottom:1px solid var(--hair2); margin-bottom:16px; font-size:var(--t-sm); cursor:pointer}
.rpt .ctl select:focus{border-bottom-color:var(--ink)}
.rpt .presets{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--separator); margin-top:6px}
.rpt .presets button{text-align:left; padding:9px 0; border-bottom:1px solid var(--hair); font-size:var(--t-sm)}
.rpt .presets button:hover{color:var(--sig)}
.rpt .presets button b{display:block; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-bottom:1px}
.bars{border-top:1px solid var(--separator)}
.bar{display:grid; grid-template-columns:200px minmax(0,1fr) 96px; gap:16px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair)}
.bar .l{font-size:var(--t-sm); font-weight:var(--w-emphasis); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .b{height:14px; background:var(--wash)} .bar .b i{display:block; height:100%; background:var(--ink)}
.bar .v{font-size:var(--t-sm); text-align:right; font-variant-numeric:tabular-nums}
.bar.tot{border-bottom:1px solid var(--separator); border-top:1px solid var(--separator); margin-top:-1px}
.bar.tot .l{font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); font-size:var(--t-xs)}
.rpt .foot{font-size:var(--t-xs); color:var(--ink3); margin-top:14px; line-height:1.6}
.rpt .foot b{color:var(--sig)}

/* ---------- ayarlar ---------- */
/* Sekmeler on ikiye çıktı ve 1280 px'e sığmıyor. Şerit kendi içinde kaysın; taşma
   sayfaya vurunca bütün ayarlar ekranı yana kayıyordu. */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--separator); margin-top:22px;
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none}
.tabs a{padding:8px 16px 10px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); text-decoration:none; position:relative}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a[aria-current="page"]::after{content:""; position:absolute; left:16px; right:16px; bottom:-3px; height:3px; background:var(--sig)}
/* Faz F: kapak tersine çevrildi. Eskiden `.set` 820 px'e kapanıyordu; sayfa 1293 px'lik
   tuvalin sol üst köşesinde duruyor, sağda 473 px ve altta 496 px boşluk kalıyordu.
   Dar ölçü düzyazı için DOĞRU — hata, sayfanın tuvali hiç tanımamasıydı. Artık kap tam
   genişlikte, ölçüyü metnin ve form satırlarının kendisi taşıyor; bölüm başlıkları ve
   tablolar kenara kadar uzanıp sayfaya yatay yapı veriyor (radardaki `.sec` ile aynı dil). */
.set{padding-top:22px}
.set h2{display:flex; align-items:baseline; gap:14px; margin:34px 0 14px; padding-bottom:7px;
  border-bottom:1px solid var(--separator); font-size:var(--t-lg); font-weight:var(--w-emphasis);
  letter-spacing:var(--tr-caption2);}
.set h2:first-child{margin-top:0}
.set h2 .n{margin-left:auto; font-size:var(--t-xs); font-weight:var(--w-emphasis);
  letter-spacing:var(--tr-caption2); color:var(--ink3); text-transform:none}
.set p.lede{margin:0 0 16px; color:var(--ink2); max-width:62ch; line-height:1.55}
/* Form satırları ve düğme grupları kendi ölçülerini korur: 1293 px genişliğinde bir
   etiket-değer satırı okunmuyor. */
.set .frow,.set .actrow,.set .f,.set .fg{max-width:820px}
.set .sw,.set .pills{max-width:820px}
.frow{display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 20px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--hair)}
.frow .fl{color:var(--ink3)}
.frow .fv{font-size:var(--t-sm)}
.frow input[type=text],.frow input[type=email],.frow input[type=number],.frow select{width:100%; padding:5px 0; border-bottom:1px solid var(--hair2); font-size:var(--t-sm)}
.frow input:focus,.frow select:focus{border-bottom-color:var(--ink)}
.pills{display:flex; flex-wrap:wrap; gap:0}
.pill{padding:4px 10px; border:1px solid var(--ink); margin:0 -1px -1px 0; font-size:var(--t-xs); font-weight:var(--w-emphasis); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.pill:hover{background:var(--wash)}
/* Radyo `.sr` ile gizli; odagi tasiyan gorunur oge etikettir. Halka
   uygulamanin kendi odak dilinden geliyor (--tint, 3px) — yeni bir
   odak bicimi icat etmek iki farkli odak gorunumu demek olurdu. */
.pill:has(:focus-visible){outline:3px solid var(--tint); outline-offset:2px}
.pill.on{background:var(--ink); color:var(--paper)}
.ftbl{width:100%; border-collapse:collapse; font-size:var(--t-sm); margin-top:10px; border-top:1px solid var(--separator)}
.ftbl th{text-align:left; padding:8px 14px 7px 0; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); border-bottom:1px solid var(--hair)}
.ftbl td{padding:9px 14px 9px 0; border-bottom:1px solid var(--hair); vertical-align:baseline}
.ftbl td.a{text-align:right; white-space:nowrap}
.ftbl td.a button{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-left:14px; box-shadow:0 1px 0 var(--hair2)}
.ftbl td.a button:hover{color:var(--ink); box-shadow:0 2px 0 var(--ink)}
.ftbl td.a button.del:hover{color:var(--sig); box-shadow:0 2px 0 var(--sig)}
.ftbl tr.arch td{opacity:.45}
.ftbl .tag{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); border:1px solid var(--hair2); padding:1px 5px; margin-left:8px}
.actrow{display:flex; gap:0; margin-top:16px}
.actrow .btn{margin-left:-1px} .actrow .btn:first-child{margin-left:0}
.logl{list-style:none; margin:0; padding:0; border-top:1px solid var(--separator)}
.logl li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:8px 0; border-bottom:1px solid var(--hair); font-size:var(--t-sm)}
.logl li .ts{font-size:var(--t-xs); color:var(--ink3)}
.kv2{display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 20px; font-size:var(--t-sm); border-top:1px solid var(--separator)}
.kv2 dt{padding:9px 0; border-bottom:1px solid var(--hair); color:var(--ink3)} .kv2 dd{margin:0; padding:9px 0; border-bottom:1px solid var(--hair)}
.okbox{background:var(--okbg); color:var(--ok); border-left:4px solid var(--ok); padding:10px 14px; margin:14px 0; font-size:var(--t-sm); font-weight:var(--w-emphasis)}

.sq{padding:8px 0 10px; border-bottom:1px solid var(--hair); margin-bottom:6px; position:relative}
.sq input{width:100%; padding:7px 0 7px 22px; border-bottom:1px solid var(--hair2); font-size:var(--t-md)}
.sq input:focus{border-bottom-color:var(--ink)}
.sq .si{position:absolute; left:0; top:17px; color:var(--ink3)}
.sres{border:1px solid var(--separator); border-radius:var(--radius-md); background:var(--bg-3); margin:0 0 18px; max-height:300px; overflow-y:auto}
.sres button{display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; width:100%; text-align:left; padding:8px 14px; border-bottom:1px solid var(--hair); font-size:var(--t-sm)}
.sres button:last-child{border-bottom:0} .sres button:hover{background:var(--ink); color:var(--paper)}
.sres button .tb2{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)} .sres button:hover .tb2{color:var(--paper)}
.presets{display:flex; gap:0; margin:8px 0 18px}
.presets button{flex:1; padding:10px 12px; border:1px solid var(--ink); margin-left:-1px; text-align:left}
.presets button:first-child{margin-left:0}
.presets button b{display:block; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.presets button span{display:block; font-size:var(--t-xs); color:var(--ink3); margin-top:3px}
.presets button[aria-pressed="true"]{background:var(--ink); color:var(--paper)} .presets button[aria-pressed="true"] span{color:var(--paper); opacity:.75}
.mtx{width:100%; border-collapse:collapse; font-size:var(--t-sm); margin:6px 0 22px}
.mtx th{text-align:left; padding:8px 10px 7px 0; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); border-bottom:1px solid var(--separator)}
.mtx th.c{text-align:center; width:74px}
.mtx td{padding:9px 10px 9px 0; border-bottom:1px solid var(--hair); vertical-align:middle}
.mtx td.c{text-align:center}
.mtx tr.sec2 td{padding-top:14px; font-weight:var(--w-emphasis); font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); border-bottom:1px solid var(--rule)}
.mtx td .desc{display:block; font-size:var(--t-xs); color:var(--ink3); margin-top:2px}
.mtx select{padding:4px 0; border-bottom:1px solid var(--hair2); font-size:var(--t-xs); background:var(--paper); color:var(--ink); min-width:96px}
.mtx td.lock{color:var(--ink3); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.saved{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ok); margin-left:12px; opacity:0; transition:opacity var(--dur) var(--ease)}
.saved.on{opacity:1}
.chk3{display:flex; gap:0; margin:16px 0 4px; border:1px solid var(--ink)}
.chk3 .st3{flex:1; padding:12px 14px; border-right:1px solid var(--hair); display:flex; gap:10px; align-items:flex-start}
.chk3 .st3:last-child{border-right:0}
.chk3 .st3 .n{font-size:var(--t-sm); font-weight:var(--w-emphasis); width:22px; height:22px; border:1.5px solid var(--ink); display:grid; place-items:center; flex:none}
.chk3 .st3.dn .n{background:var(--ink); color:var(--paper)}
.chk3 .st3 b{display:block; font-size:var(--t-sm)} .chk3 .st3 span{display:block; font-size:var(--t-xs); color:var(--ink3); margin-top:2px}
.chk3 .st3.dn b{text-decoration:line-through; color:var(--ink3)}
.chkbar{display:flex; align-items:baseline; gap:12px; margin-top:14px}
.chkbar .up{color:var(--ink3)} .chkbar .sp{flex:1}
.chkbar button{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); box-shadow:0 1px 0 var(--hair2)} .chkbar button:hover{color:var(--ink)}
.codes{display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px; font-family:var(--mono); font-size:var(--t-lg); letter-spacing:var(--tr-caption2); padding:14px 0; border-top:1px solid var(--separator); border-bottom:1px solid var(--separator); margin:12px 0}
.feedurl{display:flex; gap:0; align-items:stretch; margin:6px 0 4px}
.feedurl code{flex:1; font-family:var(--mono); font-size:var(--t-xs); padding:9px 12px; border:1px solid var(--hair2); background:var(--wash); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feedurl .btn{margin-left:-1px}
:root[data-density="compact"] .rw.hot .rwb{padding:8px var(--row-end) 7px 0} :root[data-density="compact"] .rw.warm .rwb{padding:6px var(--row-end) 5px 0} :root[data-density="compact"] .rw.cool .rwb{padding:4px var(--row-end) 4px 0}
:root[data-density="compact"] .tbl td{padding:4px 6px 4px 0} :root[data-density="compact"] .rw .sub{display:none}
:root[data-density="comfortable"] .rw.hot .rwb{padding:17px var(--row-end) 16px 0} :root[data-density="comfortable"] .rw.warm .rwb{padding:13px var(--row-end) 12px 0} :root[data-density="comfortable"] .rw.cool .rwb{padding:10px var(--row-end) 9px 0}
:root[data-density="comfortable"] .tbl td{padding:12px 6px 12px 0}
/* ---------- düğmeler ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 17px; border:1px solid var(--ink); font-size:var(--t-sm); font-weight:var(--w-emphasis); background:var(--paper); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn.pri{background:var(--ink); color:var(--paper)} .btn.pri:hover{background:var(--sig); border-color:var(--sig)}
.btn.danger{color:var(--sig); border-color:var(--sig)} .btn.danger:hover{background:var(--sig); color:var(--paper)}
.btn.sm{padding:6px 12px; font-size:var(--t-xs)}
.btn kbd{font-family:var(--mono); font-size:var(--t-2xs); opacity:.6}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* ---------- detay paneli ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,10,10,.44); z-index:35; opacity:0; pointer-events:none; transition:opacity var(--d-exit) var(--e-in)}
.scrim.on{opacity:1; pointer-events:auto; transition:opacity var(--d-enter) var(--e-out)}
.pan{position:fixed; top:0; right:0; bottom:0; width:min(480px,96vw); background:var(--paper); border-left:1px solid var(--separator); z-index:40; display:flex; flex-direction:column; transform:translateX(101%); transition:transform var(--d-exit) var(--e-in)}
.pan.on{transform:none; transition:transform var(--d-panel) var(--e-out)}
.pan .ph{padding:24px 28px 18px; border-bottom:1px solid var(--separator)}
.pan .kk{display:flex; align-items:center; gap:13px; margin-bottom:13px; flex-wrap:wrap}
.pan .tag{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); box-shadow:0 2px 0 currentColor}
.pan .cls{margin-left:auto; font-size:var(--t-lg); line-height:1; color:var(--ink3)} .pan .cls:hover{color:var(--sig)}
.pan h2{margin:0; font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.03em; line-height:1.24; word-break:break-word}
.pan .pb{flex:1; overflow-y:auto; padding:22px 28px 28px}
.pcount{display:flex; align-items:baseline; gap:18px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--hair)}
.pcount .big{font-size:var(--t-hero2); font-weight:var(--w-emphasis); line-height:.8; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.pcount .lab b{display:block; font-size:var(--t-md); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.pcount .lab span{font-size:var(--t-sm); color:var(--ink2)}
dl.kv{display:grid; grid-template-columns:100px minmax(0,1fr); margin:0 0 22px; font-size:var(--t-sm)}
dl.kv dt{padding:8px 0; border-top:1px solid var(--hair); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
dl.kv dd{padding:8px 0; border-top:1px solid var(--hair); margin:0; word-break:break-word}
dl.kv dd.no{color:var(--ink3)}
dl.kv dd a{color:var(--blue)}
.sc2{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); margin:0 0 9px; padding-bottom:6px; border-bottom:1px solid var(--separator)}
.nt{font-size:var(--t-sm); line-height:1.62; white-space:pre-wrap; word-break:break-word; margin-bottom:22px; max-height:250px; overflow:auto; color:var(--ink2)}
.warn{border-left:4px solid var(--sig); padding:11px 0 11px 15px; margin-bottom:22px; font-size:var(--t-sm); line-height:1.5}
.warn.q{border-left-color:var(--hair2); color:var(--ink2)}
.pa{padding:15px 28px; border-top:1px solid var(--separator); display:flex; flex-wrap:wrap; gap:8px 0}
.pa .btn{margin-left:-1px} .pa .btn:first-child{margin-left:0}
.pa .btn.right{margin-left:auto}
.plog{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--hair)}
.plog li{display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; padding:7px 0; border-bottom:1px solid var(--hair); font-size:var(--t-xs)}
.plog li .ts{color:var(--ink3)}

/* ---------- form modalı ---------- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(10,10,10,.44); display:grid; place-items:start center; padding:6vh 16px; overflow-y:auto}
.mbox{width:min(720px,100%); background:var(--paper); border:1px solid var(--separator); animation:fadeUp var(--d-enter) var(--e-out) both}
.cbox{animation:fadeUp var(--d-enter) var(--e-out) both}
.mh{display:flex; align-items:baseline; gap:16px; padding:20px 26px 14px; border-bottom:1px solid var(--separator)}
.mh h2{margin:0; font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.03em}
.mh .cls{margin-left:auto; font-size:var(--t-lg); color:var(--ink3)} .mh .cls:hover{color:var(--sig)}
.mb{padding:18px 26px 8px}
.seg2{display:flex; gap:0; margin-bottom:18px}
.seg2 button{flex:1; padding:9px; border:1px solid var(--ink); margin-left:-1px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.seg2 button:first-child{margin-left:0}
.seg2 button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.fg{display:grid; grid-template-columns:1fr 1fr; gap:0 26px}
.fg .full{grid-column:1/-1}
.f{margin-bottom:16px}
.f label, .f .lbl{display:block; margin-bottom:5px; color:var(--ink3)}
.f label i{font-style:normal; color:var(--sig)}
.f input[type=text],.f input[type=number],.f input[type=date],.f input[type=url],.f select,.f textarea{width:100%; padding:7px 0; border-bottom:1px solid var(--hair2); font-size:var(--t-md); background:var(--paper); color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--ink)}
.f textarea{min-height:76px; resize:vertical; line-height:1.5}
.f .inl{display:flex; gap:12px; align-items:center}
.f .inl input[type=number]{flex:1}
.f .inl select{width:auto; min-width:70px}
.f .err{display:none; color:var(--sig); font-size:var(--t-xs); font-weight:var(--w-emphasis); margin-top:5px}
.f.bad input,.f.bad select{border-bottom-color:var(--sig)}
.f.bad .err{display:block}
.f .hint{font-size:var(--t-xs); color:var(--ink3); margin-top:5px}
.f .chk{display:flex; align-items:center; gap:9px; cursor:pointer; padding:6px 0; font-size:var(--t-sm); color:var(--ink)}
/* Evrak: telefonla fotoğraf (kullanıcı bildirimi ve kararı 13.09.2026). Kamera düğmesi yalnız dokunmatik ya da dar
   ekranda görünür; masaüstünde dosya seçici yeter. Girdi `.sr` ile görünmez ama odaklanabilir, odak halkası
   düğmede. `.evmsg`: sunucu hatası formun üstünde — önce yalnız ekranın dibindeki bildirimdi. */
.evkamera{display:none}
@media (pointer: coarse), (max-width: 680px){
  .evkamera{display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-5)}
  .evkamera .evkam{position:relative; justify-content:center; min-height:48px; font-size:var(--t-body)}
  .evkamera .evkam:focus-within{outline:3px solid var(--tint); outline-offset:2px}
  .evkamera .hint{margin:0; font-size:var(--t-footnote); color:var(--label-2)}
}
.evmsg{display:flex; flex-direction:column; gap:var(--sp-1); margin:0 0 var(--sp-4); padding:var(--sp-3); border-radius:var(--radius-md); background:var(--fill-3)}
.evmsg p{margin:0; font-size:var(--t-subhead)}
.evmsg .error{color:var(--red); font-weight:var(--w-emphasis)}
/* Evrak inceleme ekranı (EVRAK-TASLAK-AKISI Faz 1). Ölçülen: telefonda 17 alan alt alta 1.819 px, Kaydet 1.680 px'te
   ve fotoğraf görülemiyordu. Önizleme ekranın üst kısmını aşmaz, alanlar görünür kalır; eylem çubuğu sabit ve dar
   ekranda sekme çubuğunun ÜSTÜNDE durur. Apple HIG (Toolbars): tek birincil eylem, sonda. */
.evgorsel{margin:0 0 var(--sp-4)}
.evgorsel a{display:block}
.evgorsel img{display:block; width:100%; height:auto; max-height:38vh; object-fit:contain; background:var(--fill-3); border-radius:var(--radius-md)}
.evgorsel figcaption{margin-top:var(--sp-1)}
.evbeyan{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}
.evnot{margin:0 0 var(--sp-3)}
.evbar{position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2);
  margin:var(--sp-4) calc(var(--pad) * -1) 0; padding:var(--sp-3) var(--pad);
  background:var(--material-bg); -webkit-backdrop-filter:var(--material-thick); backdrop-filter:var(--material-thick);
  border-top:1px solid var(--separator)}
@media (max-width: 860px){
  .evbar{bottom:calc(49px + env(safe-area-inset-bottom))}
  .evbar .btn{flex:1 1 0; justify-content:center; min-height:44px}
}
/* Panelin sıradaki adımı (EVRAK-TASLAK-AKISI Faz 2). Cümle üstte, tek birincil eylem sayfanın altındaki sabit
   `.evbar`da. Çubuktaki formlar düğmelerini sona yaslar; dar ekranda düğme genişler. */
.evsira{margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md); background:var(--fill-3); font-size:var(--t-subhead); line-height:1.45}
.evsira .evsira-e{display:block; font-size:var(--t-footnote); color:var(--label-2)}
.evsira a{margin-left:var(--sp-1)}
.evbar form{display:flex; flex:1 1 auto; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:var(--sp-2); margin:0}
.evbar .evsun .hint{flex:1 1 100%; margin:0; text-align:right}
/* Seçili şeritteki sayı: `.metan`ın gri tonu mavi zeminde 1,81:1 kalıyordu (ölçüldü, canlı "Hepsi 1"). */
.btn.pri .metan{color:inherit}
/* Sabit eylem çubuğu varken bildirim çubuğun ÜSTÜNDE çıkar (EVRAK-TASLAK-AKISI Faz 2). Ölçüldü (393×852): onaydan
   sonra çıkan bildirim "Muhasebeye teslim edildi"nin üstüne biniyordu. 72px: iki 12px dolgu, 44px düğme, ayraç ve pay. */
body:has(.evbar) #toasts{bottom:72px}
@media (max-width: 860px){
  body:has(.evbar) #toasts{bottom:calc(49px + 72px + env(safe-area-inset-bottom))}
}
.mf{display:flex; gap:0; padding:14px 26px 20px; border-top:1px solid var(--separator)}
.mf .btn{margin-left:-1px} .mf .btn:first-child{margin-left:0} .mf .sp{flex:1}
.fsec{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); padding:14px 0 8px; margin:4px 0 12px; border-bottom:1px solid var(--separator); grid-column:1/-1}

/* ---------- onay ---------- */
.cbox{width:min(460px,100%); background:var(--paper); border:1px solid var(--separator); padding:24px 26px 20px}
.cbox h2{margin:0 0 8px; font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.03em}
.cbox p{margin:0 0 18px; color:var(--ink2); line-height:1.5}
.cbox .acts{display:flex; gap:0} .cbox .acts .btn{margin-left:-1px} .cbox .acts .btn:first-child{margin-left:0} .cbox .acts .sp{flex:1}

/* ---------- komut paleti ---------- */
.ck{position:fixed; inset:0; z-index:70; background:rgba(10,10,10,.44); display:grid; place-items:start center; padding-top:14vh}
.cb2{width:min(580px,93vw); background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-3); overflow:hidden}
.cbi{display:flex; align-items:center; gap:13px; padding:0 20px; border-bottom:1px solid var(--hair)}
.cbi input{flex:1; padding:16px 0; font-size:var(--t-lg); font-weight:var(--w-regular); letter-spacing:-.022em}
.cl{max-height:50vh; overflow-y:auto}
.ci{display:flex; align-items:baseline; gap:13px; padding:10px 20px; width:100%; text-align:left; font-size:var(--t-md)}
.ci.sel{background:var(--ink); color:var(--paper)}
.ci .tt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ci .hh{font-size:var(--t-2xs); color:var(--ink3)}
.cs2{padding:12px 20px 5px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.ce{padding:30px 20px; color:var(--ink3)}

/* ---------- bildirim ---------- */
/* Kap `id="toasts"`; sınıf adı `.ts` bir zamanlar kaba aitti ve kap id'ye geçince
   kural burada kaldı — o günden beri günlük listelerindeki `<span class="ts">`
   tarihlerini ekranın altına çiviliyordu (UI-0). */
/* Kap dokunuşu YUTMAZ; yalnız bildirimin kendisi yakalar. Bulundu 13.09.2026 ("mobil görünümden ayarlar
   menüsüne girilmiyor"): boş kap bile tam genişlikte, sekme çubuğunun hemen üstünde duran görünmez bir şeritti
   (z-index 80; dolgusu 16 px + güvenli alan, iPhone'da 34 pt ile 50 pt). Tarayıcı senaryosunda çekmecedeki
   "Ayarlar" satırına dokunuş bu kaba düştü. Aynı şeritte telefonun toplu işlem çubuğu da duruyor. */
#toasts{position:fixed; bottom:0; left:0; right:0; z-index:80; pointer-events:none}
#toasts .to{pointer-events:auto}
.to{display:flex; align-items:center; gap:18px; padding:13px var(--pad); background:var(--ink); color:var(--paper); font-size:var(--t-sm); animation:up var(--d-enter) var(--e-out)}
.to.ok{background:var(--ok); color:var(--paper)} .to.err{background:var(--sig); color:var(--paper)}
.to b{font-weight:var(--w-emphasis); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.to .sp{flex:1}
.to button{color:inherit; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); box-shadow:0 2px 0 currentColor}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}

/* ---------- giriş ---------- */
.login{min-height:100dvh; display:grid; place-items:center; padding:24px}
.lbox{width:min(400px,100%)}
.lbox .lg{font-size:var(--t-2xl); font-weight:var(--w-emphasis); letter-spacing:-.04em; line-height:1; margin-bottom:4px}
.lbox .lg i{display:block; font-style:normal; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-top:6px}
.lbox .stp{display:flex; gap:0; margin:26px 0 22px; border-top:1px solid var(--separator); padding-top:10px}
.lbox .stp span{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); padding-right:18px}
.lbox .stp span.on{color:var(--ink)}
.lbox .stp span.dn{color:var(--ok)}
.otp{display:flex; gap:8px; margin:6px 0 16px}
.otp input{width:100%; height:54px; text-align:center; font-family:var(--mono); font-size:var(--t-xl); font-weight:var(--w-emphasis); border:1px solid var(--separator-opaque); border-radius:var(--radius-md); background:var(--fill-4); color:var(--ink)}
.otp input:focus{border-color:var(--ink)}
.lbox .alt{margin-top:16px; font-size:var(--t-xs); color:var(--ink3)}
.lbox .alt button{color:var(--ink2); box-shadow:0 1px 0 var(--hair2); margin-left:6px}
.lbox .alt button:hover{color:var(--ink); box-shadow:0 2px 0 var(--ink)}
.lbox .pn{margin-top:26px; padding-top:12px; border-top:1px solid var(--hair); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3); line-height:1.7}

.who{display:inline-grid; place-items:center; width:20px; height:20px; border:1.5px solid var(--ink); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:0; margin-left:10px; vertical-align:-3px; flex:none}
.who.me{background:var(--ink); color:var(--paper)}
.ro{display:flex; align-items:center; gap:14px; padding:7px 0; border-bottom:1px solid var(--hair); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.ro b{color:var(--sig)}
.rolet{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); padding:1px 6px; border:1px solid var(--ink); margin-left:8px}
.rolet.customer{border-color:var(--sig); color:var(--sig)} .rolet.viewer{border-color:var(--hair2); color:var(--ink3)}
/* Dört rolün ikisi renksiz kalmıştı: hesap yöneticisi ile çalışma alanı sahibi
   aynı görünüyordu (Faz F nöbetçisi buldu). */
.rolet.owner{border-color:var(--ink); color:var(--ink)} .rolet.editor{border-color:var(--hair2); color:var(--ink2)}
.acctpick{display:grid; gap:0; border-top:1px solid var(--separator); margin-bottom:22px}
.acctpick button{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair); text-align:left; font-size:var(--t-sm)}
.acctpick button:hover{background:var(--wash)}
.acctpick button[aria-pressed="true"]{font-weight:var(--w-emphasis)}
.acctpick .who{margin:0}
.acctpick .r{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.acctpick .sub2{display:block; font-size:var(--t-xs); color:var(--ink3); font-weight:var(--w-regular)}
.lerr{color:var(--sig); font-size:var(--t-xs); font-weight:var(--w-emphasis); margin:-8px 0 12px}
.rolehint{font-size:var(--t-xs); color:var(--ink3); line-height:1.55; margin-top:6px}
@media (max-width:1000px){
  .rw.hot .rwb,.rw.warm .rwb,.tdl{grid-template-columns:88px minmax(0,1fr) 150px 96px} .rw.hot .k,.rw.warm .k{display:none}
  .rpt{grid-template-columns:1fr} .rpt .ctl{order:-1; margin-bottom:12px}
}
/* zaman kaydırıcı */
.asofnote{display:inline-block; margin-right:6px; padding:2px 7px; background:var(--sig); color:var(--paper); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); vertical-align:middle}
[data-month]{touch-action:pan-y}
a.btn{display:inline-flex; align-items:center; text-decoration:none}
/* bülten (yazdırılabilir) */
.bul{max-width:1100px}
.bul .bh{display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; padding:0 0 14px; border-bottom:1px solid var(--separator); margin-bottom:22px}
.bul .bh h2{font-size:var(--t-hero2); letter-spacing:-.04em; line-height:.95; margin:4px 0 0; font-weight:var(--w-emphasis)}
.bul .bh .meta{font-size:var(--t-sm); color:var(--ink2); text-align:right; line-height:1.6}
.bul h3{display:flex; align-items:baseline; gap:12px; font-size:var(--t-xs); letter-spacing:var(--tr-caption2); margin:26px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--rule)}
.bul h3 .n{font-weight:var(--w-emphasis)} .bul h3 .sum{margin-left:auto; font-weight:var(--w-regular); text-transform:none; letter-spacing:0; color:var(--ink2)}
.bul h3.sig{color:var(--sig); border-color:var(--sig)}
.bul table{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.bul td{padding:5px 14px 5px 0; border-bottom:1px solid var(--hair); vertical-align:top}
.bul td.n{white-space:nowrap} .bul td.r{text-align:right; padding-right:0}
.bul td.t{width:44%} .bul .cust{color:var(--ink2)}
.bul .none{color:var(--ink3); padding:8px 0; font-size:var(--t-sm)}
.bul .actions{display:flex; gap:10px; align-items:center; margin:0 0 22px}
.bul .foot{margin-top:30px; padding-top:10px; border-top:1px solid var(--rule); font-size:var(--t-xs); color:var(--ink3); letter-spacing:var(--tr-caption2); display:flex; justify-content:space-between}
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important; color:#000!important}
  .page>:not(#view),#pan,#scrim,#overlay,#toasts,.s18ax,.chkbar,.bul .actions,.fbar,.bulk{display:none!important}
  .page{padding:0!important; max-width:none!important}
  .bul{max-width:none; font-size:10.5pt} .bul h3{break-after:avoid} .bul tr{break-inside:avoid}
  a{text-decoration:none; color:inherit}
}
/* tablo: satır içi düzenleme + yatay kaydırma */
.tblwrap{overflow-x:auto; max-width:100%}
.tbl td.ie{cursor:text} .tbl td.ie:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.tbl td.ie.editing{box-shadow:none; padding-top:2px; padding-bottom:2px}
.tbl td.ie input,.tbl td.ie select{font:inherit; color:inherit; border:0; border-bottom:1px solid var(--tint); background:var(--wash); padding:3px 4px; min-width:0}
.tbl td.ie input[type=number]{width:110px} .tbl td.ie input[type=date]{width:150px}
.tbl td.ie .iek{margin-left:6px; white-space:nowrap} .tbl td.ie .iek kbd{font-size:var(--t-2xs); color:var(--ink3)}
.tbl td.st button{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2); min-height:24px} .tbl td.st button:hover{color:var(--ink)}
.tbl td.st button.dn{color:var(--ink3); text-decoration:line-through}
.tblhint{font-size:var(--t-xs); color:var(--ink3); letter-spacing:var(--tr-caption2); padding:8px 0 0}
/* ---- H5: masaüstünde etiket + simge ---------------------------------------
   Kural dar ekran bloğunun ÖNÜNE konmalı: aşağıdaki 680 px bloğu aynı seçiciye
   `margin-right:0` veriyor ve eşit özgüllükte SONRAKI kural kazanıyor. Daha
   önce bu kural dosyanın çok ilerisindeydi ve mobil geçersiz kılma hiç
   uygulanmıyordu (telefonda simgenin sağında 6 px boşluk kalıyordu). */
.newb .nbi{ margin-right:6px; }

@media (max-width:680px){
  .ix,.qb,.fchip,.btn.sm,.tb,.acct>button,.chkline a,.chkline button,.ixsum,.fbar .dens,
  .fbar .ftime,.fbar .flink,.fbar .fadd,.fbar .qbad,.fc,.seg a,.seg button,.seg2 button,
  /* `.calhead .nb a` yaziliydi ama sablonda <button> var: secici HIC eslesmiyordu,
     ay gezinme dugmeleri dokunmada 37x30 kaliyordu (olculdu, Pixel 8 emulasyonu). */
  .calhead .nb a,.calhead .nb button{min-height:44px; display:inline-flex; align-items:center}
  /* Ikon-yalniz dugmelerde GENISLIK de hedefin parcasi: kural yalniz min-height
     veriyordu, ay oklari 37x44 kaliyordu. Metinli "Bugun" zaten 69px. */
  .calhead .nb button[aria-label]{min-width:44px; justify-content:center}
  /* Kayit paneli kontrolleri: olculdu (375px, Pixel 8 emulasyonu, pointer:coarse)
     -- asama segmentleri 32px yuksek, kontrol listesi dugmeleri 42px (2px eksik),
     `.sc2 .ix` 33px GENIS. Ucu de 44'un altindaydi; `.ix` zaten yukaridaki
     listede ama orada yalniz min-height var, genislik yok. */
  .stagebar form button, .cklist li button{min-height:44px}
  .stagebar form button{min-width:44px; justify-content:center}
  /* Yeni kayit formu (overlay, 375px olcumu): tarih cipleri 61x28, `select` 37px,
     onay kutusunun GERCEK hedefi olan sarmalayici <label> 36px yuksekti.
     Onay kutusunun kendisi 24x24 kaliyor (WCAG 2.5.8 alt siniri) -- native
     kutuyu 44'e germek yerine hedefi etiket tasiyor. */
  .f .dq button{min-height:44px}
  /* Tablo gorunumu (olculdu 375px): satir secme kutusu `.cb` 14x14 -- WCAG
     2.5.8'in 24px ALT SINIRININ da altinda; sutun sirala dugmesi `.sortb` 45x24.
     `.cb`nin gorsel kutusu 14px kalir (yogun tabloda buyutmek satiri sisirir),
     hedef gorunmez bir `::before` ile 44x44'e cikar -- `::after` zaten onay
     isaretinde kullaniliyor. Ilk sutun 46px, hedef sigiyor. */
  .cb{position:relative}
  .cb::before{content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%)}
  .sortb{min-height:44px}
  /* Kisa etiketli segmentler: kural yalniz min-height veriyordu, Rapor'daki
     "Ay" 41px genis kaliyordu (kardesleri 59-90px). Arama girdisi 259x36'ydi. */
  .seg button,.seg a,.seg2 button{min-width:44px; justify-content:center}
  .srch input{min-height:44px}
  .f label:has(input[type="checkbox"]){min-height:44px; display:flex; align-items:center}
  .sc2 .ix{min-width:44px; justify-content:center}
  .mtop{flex-wrap:wrap; gap:6px 12px; padding:12px 0 10px} .mtop .sp{display:none} .mtop h1{width:100%} .mtop .right{width:100%}
  #toasts{bottom:calc(60px + env(safe-area-inset-bottom))}
  .ph .t,.pan h2{overflow-wrap:anywhere}
  .note,.mtop kbd{display:none}
  /* Sütun sayısı öğe sayısına göre kendiliğinden: Notlar modülü kapalıyken beş, açıkken
     altı öğe var. Sabit `repeat(5,1fr)` yazılıydı ve Panorama eklenince altıncı öğe ikinci
     satıra düşüyordu (İZ-3). */
  .nav{position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; width:100%; display:grid;
    grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:var(--paper);
    border-top:1px solid var(--separator); padding:0 0 env(safe-area-inset-bottom); overflow:visible}
  /* Altı öğede sütun 62 px'e iniyor; etiketi kırpmak yerine puntoyu bir kademe düşürüyoruz. */
  .nav:has(a:nth-child(6)) a{font-size:var(--t-xs); letter-spacing:0; padding:0 2px}
  /* Beş eşit sütun zaten vardı ama büyük harf etiketler sütuna sığmıyordu; düz yazım sığdırıyor. */
  .nav a{display:flex; justify-content:center; align-items:center; min-height:52px; min-width:0;
    font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); text-transform:none;
    padding:0 3px; margin:0; border:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .nav a[aria-current=page]{box-shadow:inset 0 3px 0 var(--sig)}
  .page{padding-bottom:88px}
  .fpop{position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:72vh; overflow:auto; z-index:45; border:0; border-top:1px solid var(--separator); grid-template-columns:1fr; box-shadow:0 -1px 0 var(--rule)}
  .pan{width:100vw; border-left:0}
  .bul .bh{grid-template-columns:1fr} .bul .bh .meta{text-align:left}
  /* İki odak mobilde de yan yana: alt alta inmek ~90 px harcıyor ve "ne gecikti /
     bu hafta ne var" karşılaştırmasını bozuyordu (Faz B). Dar sütunda rakamın yanına
     cümle sığmadığı için odağın KENDİ İÇİ alt alta diziliyor. */
  .lead{padding:10px 0 11px}
  .focw{flex:1 1 0; max-width:none; align-items:flex-start; flex-wrap:wrap; gap:0}
  .focw+.focw{margin-left:14px; padding-left:14px}
  .foc{grid-template-columns:minmax(0,1fr); grid-template-areas:"e" "n" "t"; width:100%}
  .foc .up{margin-bottom:2px}
  .foc .n{font-size:clamp(38px,12vw,52px); line-height:.92}
  .foc .lt{padding-bottom:0}
  .foc .l{font-size:var(--t-sm); line-height:1.25; margin-top:3px}
  .foc .s{font-size:var(--t-xs)}
  /* Çipler kendi sütununda kalsın: tam genişlik bir satır açmak manşete 31 px
     ekliyordu. Sağ sütun 165 px, iki çip yan yana sığıyor. */
  .focw{flex-direction:column; align-items:flex-start}
  .focchips{width:auto; padding:5px 0 0; flex-wrap:wrap}
  .fc{margin-left:0; margin-right:14px}

  .rw.hot .rwb,.rw.warm .rwb,.rw.cool .rwb,.tdl{grid-template-columns:72px minmax(0,1fr) 88px} .rw .c,.rw .k{display:none}
  .ixrow{grid-template-columns:1fr}
  .cal .cell{min-height:72px} .cal .more{display:block}
  .fg{grid-template-columns:1fr}
  .bar{grid-template-columns:110px minmax(0,1fr) 70px}
  .frow{grid-template-columns:1fr}
}
/* Azaltılmış hareket — Apple'ın ikame listesi (HIG Accessibility), harfiyen:
     · yayları sıkılaştır (bounce → 0)  → tokens.css yapıyor
     · x/y/z geçişlerini SOLUNMAYLA değiştir
     · z ekseninde derinlik animasyonu yapma
     · bulanıklığa ve bulanıklıktan animasyon yapma
   Eski kural her şeyi 0.01ms'ye indiriyordu, yani hareketi tümüyle KALDIRIYORDU.
   Apple'ın yaklaşımı bu değil: geçiş kalır, yalnız konum yerine opaklık taşır. */
@media (prefers-reduced-motion:reduce){
  *{
    transition-property:opacity, background-color, color, border-color, box-shadow !important;
    animation-duration:1ms !important;
  }
  /* Konum taşıyan yüzeyler yerinde belirir. */
  .pan, .pan.on{ transition:opacity var(--d-quick) linear !important; transform:none !important; }
  .sb{ transition:opacity var(--d-quick) linear !important; }
  /* Bulanıklık animasyonu yok (Apple'ın açık maddesi). */
  .fmenu{ transition:opacity var(--d-quick) linear !important; scale:1 !important; }
}
:root[data-od="badge"] .s-sig{color:var(--ink)!important} :root[data-od="badge"] .rw::before{background:var(--ink)}
.swd{display:inline-block; width:10px; height:10px; margin-right:7px; vertical-align:middle; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.pv{display:grid; grid-template-columns:72px minmax(0,1fr) auto auto; gap:16px; align-items:baseline; padding:10px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--hair); max-width:640px}
.pv .d{font-weight:var(--w-emphasis); font-size:var(--t-xl); letter-spacing:-.04em} .pv .t{font-weight:var(--w-emphasis)} .pv .t em{font-style:normal; font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); margin-left:8px} .pv .k{color:var(--ink2); font-size:var(--t-sm)} .pv .dd{font-size:var(--t-xs); color:var(--ink3)}


.to .u{color:var(--paper); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); font-size:var(--t-xs); box-shadow:0 1px 0 var(--paper); margin-left:auto}

/* gelişmiş kurucu (Django) */
.adv .grp{border:1px solid var(--ink); padding:10px 12px 12px; margin:0 0 12px}
.adv legend{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); padding:0 6px; display:flex; gap:12px; align-items:center}
.adv .rule{display:grid; grid-template-columns:1.2fr 1fr 1.4fr auto; gap:8px; align-items:center; margin:6px 0}
.adv .rule select,.adv .rule input{border:0; border-bottom:1px solid var(--separator); background:transparent; font:inherit; color:inherit; padding:6px 0}
.custgrid a.custcard{text-decoration:none; color:inherit; display:block}
.settings-soon{color:var(--ink3)}

.ief{display:inline-flex; align-items:center; gap:6px} .ief input,.ief select{font:inherit; color:inherit; border:0; border-bottom:1px solid var(--tint); background:var(--wash); padding:3px 4px; min-width:0}
.ief input[type=number]{width:110px} .ief input[type=date]{width:150px}

.bell{position:relative; font-size:var(--t-sm); color:var(--ink2); text-decoration:none; padding:4px 6px; min-height:24px; display:inline-flex; align-items:center} .bell:hover{color:var(--ink)}
.bell .n{font-size:var(--t-2xs); background:var(--sig); color:var(--paper); padding:0 4px; margin-left:3px; font-weight:var(--w-emphasis)}
.inbox li.new b{color:var(--sig)}
.mailpv{border:1px solid var(--hair2); padding:8px 14px; max-width:640px}

.ntbl td .desc{display:block; color:var(--ink3); font-size:var(--t-xs); margin-top:2px}

.cs2{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3); padding:10px 16px 4px}
.calhead .nb a,.seg a{text-decoration:none; color:inherit}
.rpt .ctl select{font:inherit}

.calhead .nb a{display:inline-block; padding:4px 10px; margin-right:6px; border:1px solid var(--ink); font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.calhead .nb a:hover{background:var(--ink); color:var(--paper)}
.seg a{display:inline-flex; align-items:center; padding:4px 10px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2); min-height:28px}
.seg a+a{border-left:1px solid var(--ink)} .seg a[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* Etiket satırı çubuklarla birebir hizalı: 18 eşit sütun, aynı boşluk. Esnek satırda boş
   etiketler sıfır genişliğe çöküp dolu olanları bitiştiriyordu (EYL’26EKİOCA’27…). */
.dlabels{display:grid; grid-template-columns:repeat(18,1fr); gap:4px; margin-top:6px}
.dlabels span{overflow:visible; white-space:nowrap; min-width:0}

/* Ayarlar › Veri: yedek durumu */
.kv2 dd.err{color:var(--sig)}
.warnpill{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--sig); box-shadow:inset 0 0 0 1px var(--sig); padding:2px 6px;
  margin-left:8px; white-space:nowrap}
/* Sayfa başlığı sayacı: dar ekranda kırpılmasın, alta insin */
.ph2 .ph2n{font-size:var(--t-xs); color:var(--ink3); white-space:nowrap; flex:0 0 auto}


/* ============ UI-1: ilk ekranı geri kazan ============ */

/* Faz B: `.leadstats` / `.pst` bandı kaldırıldı — sayaçlar manşetin iki odağına ve
   filtre çubuğuna dağıldı. UI-1'de bu band `.stats` bandının yerine gelmişti; Faz B
   ikisini birden bitiriyor. */
/* İlk adımlar tek satır: yalnız sıradaki adım. Üç kutulu kart dizisi 79 px yer kaplıyordu
   ve reddedilen yönetim paneli diline en yakın öğeydi. */
.chkline{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 12px; padding:9px 0;
  border-bottom:1px solid var(--hair); font-size:var(--t-sm); min-height:34px}
.chkline .up{color:var(--ink3)}
.chkline b{font-size:var(--t-xs); font-weight:var(--w-emphasis); color:var(--ink)}
.chkline .nx{font-weight:var(--w-emphasis)}
.chkline .hint{color:var(--ink3); font-size:var(--t-xs)}
.chkline a{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink);
  box-shadow:0 1px 0 var(--hair2); padding:4px 0}
.chkline a:hover{box-shadow:0 1px 0 var(--ink)}
.chkline .sp{flex:1}
.chkline button{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3); padding:6px 0}
.chkline button:hover{color:var(--ink)}

/* Filtre çubuğundaki zaman düğmesi: şerit + kaydırıcı birlikte açılıp kapanır. */
.fbar .ftime{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); padding:6px 9px; min-height:28px; white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--hair2)}
.fbar .ftime:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.fbar .ftime.on{color:var(--paper); background:var(--ink); box-shadow:none}

/* Katlı dizin: özet satırı tıklanabilir alanı korusun */
.index{padding:6px 0}
.index.collapsed{padding:4px 0; border-bottom:1px solid var(--hair)}
/* Seçim yokken katlı dizin "seçim yok · tüm kayıtlar" diye kendini anlatıyordu;
   söyleyecek şeyi olmayan bir band yer kaplamasın (Faz B). Anahtar filtre çubuğunda. */
.index.mute{padding:0; border-bottom:0}


/* Üst çubuk tek satır: logo + gezinme + araçlar. Eskiden araç grubu ikinci satıra sarıyor
   ve her sayfada ~64 px harcıyordu (UI-1). Dar ekranda alt başlık düşer, arama daralır. */
.mtop h1{margin-bottom:10px; flex:0 0 auto}
.mtop .right{gap:14px; margin-bottom:9px; flex:0 1 auto; min-width:0}
.srch{width:min(220px,24vw); flex:0 1 auto; min-width:96px}
@media (max-width:1440px){ .mtop h1 i{display:none} }
@media (max-width:1180px){ .nav a{padding-left:10px; padding-right:10px} }
@media (max-width:1040px){
  .mtop{flex-wrap:wrap}
  .mtop .right{margin-left:auto}
}


/* ============ UI-3: tek denetim dili ============
   Açılır liste, tarih ve onay kutusu işletim sisteminin kendi çizimiyle geliyordu:
   kutulu, yuvarlak köşeli, kendi ok simgeli. Aynı formda iki tasarım dili çarpışıyordu.
   Aşağıda hepsi alt çizgili tek dile alınır; ok işareti currentColor ile çizilir,
   böylece tema ve vurgu rengi değişince kendiliğinden uyar. */

select{appearance:none; -webkit-appearance:none; border-radius:0; cursor:pointer}
/* Ok işareti currentColor ile çizilir (tema ve vurgu rengiyle uyar). Form bağlamlarındaki
   `background` kısayolu arka plan resmini sıfırladığı için aynı özgüllükte tekrar veriliyor. */
select,
.f select,.frow select,.rpt .ctl select,.adv .rule select,.mtx select,.ief select,.tbl td.ie select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:right 7px center, right 2px center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:17px;
}
select:disabled{opacity:.5; cursor:not-allowed}
select option{background:var(--paper); color:var(--ink)}

/* Tarih alanı: kutu yok, takvim simgesi sessiz */
input[type=date]{appearance:none; -webkit-appearance:none; border-radius:0; min-height:26px}
input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.4; cursor:pointer; padding:0; margin:0 0 0 4px;
  filter:grayscale(1); transition:opacity var(--d-micro) var(--e-out);
}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
:root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator{filter:grayscale(1) invert(1)}
input[type=date]::-webkit-datetime-edit{padding:0}

/* Onay kutusu ve radyo: kare / daire, saç teli çerçeve, mürekkep dolgu */
input[type=checkbox],input[type=radio]{
  appearance:none; -webkit-appearance:none; flex:none;
  width:15px; height:15px; margin:0; cursor:pointer; vertical-align:-3px;
  background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--hair2);
  display:inline-grid; place-content:center;
  transition:background var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out);
}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
input[type=checkbox]:checked::after{
  content:""; width:8px; height:4px; margin-top:-2px;
  border-left:1.8px solid var(--paper); border-bottom:1.8px solid var(--paper);
  transform:rotate(-45deg);
}
input[type=radio]:checked::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--paper)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45; cursor:not-allowed}
label.chk{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--t-sm)}

/* Metin alanları: aynı yükseklik ritmi ve aynı odak vurgusu */
.f input[type=text],.f input[type=number],.f input[type=date],.f input[type=url],.f select,.f textarea{min-height:30px}
/* Dokunmada form alanlari 37-39px kaliyordu (olculdu 375px, pointer:coarse).
   Ustteki 44px listesi bunlari kapsamiyordu; kapsasa bile YUKARIDA oldugu icin
   bir ustteki 30px kurali esit ozgullukte onu eziyordu. Override bu yuzden
   BURADA, o kuraldan hemen sonra. Dosyanin SONUNA konamaz: `test_faz_h_...`
   son `@media (max-width:680px)` blogunun Faz H'inki oldugunu varsayiyor. */
@media (max-width:680px){
  .f input[type=text],.f input[type=number],.f input[type=date],.f input[type=url],
  .f select,.f textarea{min-height:44px}
}
.f input:hover,.f select:hover,.f textarea:hover{border-bottom-color:var(--ink3)}
.f.bad input,.f.bad select,.f.bad textarea{border-bottom-color:var(--sig)}
.f.bad label{color:var(--sig)}

/* Odak: fare için sessiz, klavye için görünür ve her denetimde aynı */
:focus{outline:none}
:focus-visible{outline:3px solid var(--tint); outline-offset:2px}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:1px}


/* ============ UI-4: takvim, raporlar, müşteriler ============ */

/* Müşteriler: dört sütunlu kart ızgarası yerine saç teli çizgili editoryal satırlar.
   Tam çerçeveli kutular reddedilen yönetim paneli diline en yakın öğeydi. */
.custlist{border-top:1px solid var(--separator); margin-top:0}
.crow{display:grid; grid-template-columns:minmax(150px,1.3fr) 84px 64px 74px minmax(0,2.2fr);
  align-items:baseline; gap:0 18px; padding:11px 0; border-bottom:1px solid var(--hair);
  text-decoration:none; color:inherit; transition:background var(--d-micro) var(--e-out)}
a.crow:hover{background:var(--wash)}
.crow.chead{padding:7px 0 6px; border-bottom:1px solid var(--hair2)}
.crow.chead span{font-size:var(--t-xs); font-weight:var(--w-regular); letter-spacing:var(--tr-caption2);
  color:var(--ink3)}
/* Olculdu: Taraflar govdesinin %19.2'si 17px'ti (--t-lg = title3), diger
   listelerde satir metni 15px (--t-headline). Ayni basamaga cekildi. */
.crow .nm{font-size:var(--t-headline); font-weight:var(--w-emphasis); letter-spacing:-.02em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.crow .nm em{font-style:normal; font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  color:var(--ink3); margin-left:9px}
.crow .num{font-size:var(--t-headline); font-weight:var(--w-emphasis); font-variant-numeric:tabular-nums}
.crow .num.tot{color:var(--ink2)}
.crow .nx{font-size:var(--t-sm); color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crow .nx b{color:var(--sig); font-weight:var(--w-emphasis); margin-right:9px}
.crow .nx .none{color:var(--ink3)}
@media (max-width:760px){
  .crow{grid-template-columns:1fr 56px 52px 56px; gap:2px 12px}
  .crow .nx{grid-column:1/-1; padding-top:2px}
  .crow.chead span:last-child{display:none}
}

/* Takvim: hücre yüksekliği içeriğe bağlı — boş haftalar daralır, dolu haftalar büyür.
   Eskiden her hücre 118 px'ti ve beş kalemlik bir ayda ekranın yarısı boş kalıyordu. */
.cal .cell{min-height:62px}
.cal .cell.wk{background:var(--wash)}
.cal .cell.off{background:var(--wash2)}
.cal .cell.today{box-shadow:inset 0 3px 0 var(--sig)}
.cal .cell.today .dn b{background:var(--sig)}
.calhead{flex-wrap:wrap}
@media (max-width:900px){ .calhead .lg{display:none} }


/* Raporlar: sağ raf yerine radardaki filtre çubuğunun aynısı. Uygulamanın hiçbir yerinde
   kenar çubuğu yok; ayrıca bu dört denetim, filtre çubuğunun işini farklı dille yapıyordu. */
.rctl{display:flex; align-items:center; flex-wrap:wrap; gap:6px 22px; padding:11px 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin-top:2px}
.rctl .fl{color:var(--ink3); margin-right:2px}
.rctl label{display:inline-flex; align-items:baseline; gap:9px; font-size:var(--t-sm)}
.rctl label span{font-size:var(--t-xs); font-weight:var(--w-regular); letter-spacing:var(--tr-caption2);
  color:var(--ink3)}
.rctl select{border-bottom:1px solid var(--hair2); padding:4px 17px 4px 0; font-size:var(--t-sm);
  min-height:28px; min-width:96px}
.rctl select:hover{border-bottom-color:var(--ink)}
.rctl .sp{flex:1}
.rctl .cnt{font-size:var(--t-xs); color:var(--ink3)}
.rctl .cnt b{color:var(--ink); font-weight:var(--w-emphasis)}
.rpt{display:block; padding-top:18px}
.bars{border-top:0}
/* Çubuk ile değer arasındaki bağ: değer hizalı sütunda kalır (karşılaştırma için doğrusu bu),
   çubuğun ucuna ince bir kapanış çizgisi konur ki göz satırın sonuna kadar takip edebilsin. */
.bar{grid-template-columns:minmax(120px,200px) minmax(0,1fr) 104px; gap:14px}
.bar .b{height:12px; background:var(--wash); box-shadow:inset 0 0 0 1px var(--hair)}
.bar .b i{box-shadow:2px 0 0 var(--sig)}
.bar:hover .l{color:var(--sig)}
.rempty{padding:26px 0; border-bottom:1px solid var(--hair)}
.rempty b{display:block; font-size:var(--t-lg); font-weight:var(--w-emphasis); margin-bottom:5px}
.rempty span{font-size:var(--t-sm); color:var(--ink3)}


/* ============ UI-5: mobil ve dokunma ============ */
@media (max-width:680px){
  /* Kayıt satırı parmakla rahat seçilsin */
  .rw{min-height:44px}
  /* Dokunma hedefleri: görsel boyut korunur, tıklama alanı 44 px'e tamamlanır.
     (Bu kurallar dosyanın sonunda çünkü taban kurallar sonradan eklendi ve önceki
     mobil bloğu geçersiz kılıyordu.) */
  .fbar .ftime,.newb,.skip{min-height:44px; display:inline-flex; align-items:center}
  .foc{min-height:44px}
  .acct>button{min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}
  .bell{min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}
  .srch input{min-height:44px; padding-top:0; padding-bottom:0}
  /* Ayarlar sekme şeridi UI-5'te gözden kaçmıştı: mobilde 34 px'ti (UI-0). */
  .tabs a{min-height:44px; display:inline-flex; align-items:center}
  /* Sayaçlar iki satıra sarar; yatay kaydırma yerine sarma tercih edildi çünkü kaydırmada
     ekranın dışında kalan sayaç fark edilmiyor. */
  /* Filtre çubuğu üç satıra yayılıyordu; sayaç ve görünüm anahtarı alta iner */
  .fbar{gap:8px 10px}
  .fbar .cnt{order:10}
  .chkline{gap:0 10px}
  .chkline .hint{display:none}
}
@media (max-width:400px){
  .nav a{letter-spacing:0; padding:0 1px}
}

/* Şablonlarda satır içi punto kalmasın: ölçek tek yerden yönetilir (UI-2/UI-6). */
.metan{font-size:var(--t-xs); color:var(--ink3)}

/* WCAG 2.5.8 asgarisi (24x24) masaüstünde de sağlansın. Mobilde 44 px kuralı geçerli
   olduğu için bu taban yalnız geniş ekranda uygulanır (aksi halde 44'ü geçersiz kılıyordu). */
@media (min-width:681px){
  .bell{min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center}
  .fbar .flink,.chkline a,.calhead .nb a{min-height:24px; display:inline-flex; align-items:center}
  .acct>button{min-width:24px; justify-content:center}
}


/* ============ Faz 7.1: ara aşama ============ */
.tag.stg{box-shadow:inset 0 0 0 1px var(--hair2); color:var(--ink2)}
.tag.stg.stale{color:var(--sig); box-shadow:inset 0 0 0 1px var(--sig)}
.rw .t em.stg{color:var(--ink2); box-shadow:0 1px 0 var(--hair2)}
.rw .t em.stg.stale{color:var(--sig); box-shadow:0 1px 0 var(--sig)}
.stagebar{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:12px 0;
  border-bottom:1px solid var(--hair); margin-bottom:4px}
.stagebar .up{color:var(--ink3)}
.stagebar form{display:flex; align-items:center; flex-wrap:wrap; gap:0 8px; flex:1; min-width:0}
.stagebar button{font-size:var(--t-sm); color:var(--ink3); padding:5px 9px; min-height:30px;
  box-shadow:inset 0 0 0 1px var(--hair2); transition:color var(--d-micro) var(--e-out)}
.stagebar button:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.stagebar button.on{color:var(--paper); background:var(--ink); box-shadow:none; font-weight:var(--w-emphasis)}
.stagebar input{flex:1; min-width:110px; border-bottom:1px solid var(--hair2); padding:4px 0;
  font-size:var(--t-sm); margin-left:4px}
.stagebar input:hover{border-bottom-color:var(--ink3)}
.stagebar .since{font-size:var(--t-xs); color:var(--ink3); white-space:nowrap}


/* ============ Faz 7.2: kontrol listesi ============ */
.sc2 .prog{font-size:var(--t-xs); color:var(--ink3); margin-left:8px}
.cklist{list-style:none; margin:0 0 12px; padding:0}
.cklist li{border-bottom:1px solid var(--hair)}
.cklist button,.cklist .ro{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  padding:9px 0; font-size:var(--t-sm); line-height:1.4; min-height:38px}
.cklist i{flex:none; width:15px; height:15px; margin-top:1px; box-shadow:inset 0 0 0 1.5px var(--hair2);
  display:inline-grid; place-content:center; transition:background var(--d-micro) var(--e-out)}
.cklist button:hover i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cklist li.on i{background:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.cklist li.on i::after{content:""; width:8px; height:4px; margin-top:-2px;
  border-left:1.8px solid var(--paper); border-bottom:1.8px solid var(--paper); transform:rotate(-45deg)}
.cklist li.on span{color:var(--ink3); text-decoration:line-through}
.ckedit{margin-bottom:14px}
.ckedit summary{font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  color:var(--ink3); cursor:pointer; padding:6px 0; min-height:26px}
.ckedit summary:hover{color:var(--ink)}
.ckedit textarea{width:100%; border:0; border-bottom:1px solid var(--hair2); padding:7px 0;
  font-size:var(--t-sm); font-family:var(--sans); line-height:1.5; resize:vertical; background:var(--paper);
  color:var(--ink)}
.ckedit .row{display:flex; align-items:center; gap:12px; margin-top:9px; flex-wrap:wrap}
.ckedit .hint{font-size:var(--t-xs); color:var(--ink3)}
.rw .t em.ckn{color:var(--ink3)}


/* ============ Faz 7.3: tedarikçi ============ */
.kv2.vend{margin-bottom:22px}
.vend a{box-shadow:0 1px 0 var(--hair2)} .vend a:hover{box-shadow:0 1px 0 var(--ink)}
.vedit{margin:0 0 26px}
.vform{margin-top:14px}
.crow.vrow{grid-template-columns:70px minmax(0,2fr) minmax(0,1fr) 110px 100px; text-align:left; width:100%}
.crow.vrow .num{font-size:var(--t-sm); font-weight:var(--w-emphasis)}
button.crow{background:none; border:0; font:inherit; color:inherit; cursor:pointer}
button.crow:hover{background:var(--wash)}
.pan .vmeta{font-size:var(--t-xs); color:var(--ink3)}
.pan .vmeta.blk{display:block; margin-top:3px}
.pan .vportal{font-size:var(--t-xs); margin-left:6px}
@media (max-width:760px){
  .crow.vrow{grid-template-columns:62px 1fr 84px}
  .crow.vrow span:nth-child(3),.crow.vrow span:nth-child(5){display:none}
}


/* ============ Faz 7.4: otomatik tarih okuma ============ */
.probebar{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px 0;
  border-bottom:1px solid var(--hair); margin-bottom:6px; font-size:var(--t-xs)}
.probebar .up{color:var(--ink3)}
.probebar .tgt{color:var(--ink2)}
.probebar .sp{flex:1}
.probebar .ok{color:var(--ok)}
.probebar .err{color:var(--sig)}
.probebar button{font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  color:var(--ink3); padding:5px 8px; min-height:28px;
  box-shadow:inset 0 0 0 1px var(--hair2)}
.probebar button:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.probebar .note{flex-basis:100%; color:var(--ink3); font-size:var(--t-xs)}
.probebar .note.stop{color:var(--sig)}


/* ============ Faz 7.5: eskalasyon ============ */
.escrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.escrow select{border-bottom:1px solid var(--hair2); padding:5px 17px 5px 0; font-size:var(--t-sm); min-height:30px}
.escrow .hint{font-size:var(--t-sm); color:var(--ink3); flex:1; min-width:220px}
.rw .t em.esc{color:var(--sig); box-shadow:0 1px 0 var(--sig); font-weight:var(--w-emphasis)}
.tag.esc{color:var(--sig); box-shadow:inset 0 0 0 1px var(--sig)}


/* ============ Faz 7.6: belge ekleri ============ */
.atlist{list-style:none; margin:0 0 10px; padding:0}
.atlist li{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--hair);
  font-size:var(--t-sm)}
.atlist a{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  box-shadow:0 1px 0 var(--hair2)}
.atlist a:hover{box-shadow:0 1px 0 var(--ink)}
.atlist .meta{font-size:var(--t-xs); color:var(--ink3); white-space:nowrap}
.atlist .x{color:var(--ink3); min-width:24px; min-height:24px}
.atlist .x:hover{color:var(--sig)}
.atadd{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.atadd .hint{font-size:var(--t-xs); color:var(--ink3)}
.atadd label.btn{cursor:pointer}


/* ============ Faz 8: modüller ============ */
.modlist{border-top:1px solid var(--separator); margin:18px 0 20px}
.modrow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 16px;
  padding:15px 0; border-bottom:1px solid var(--hair)}
.modrow b{display:block; font-size:var(--t-lg); font-weight:var(--w-emphasis); letter-spacing:-.02em}
.modrow .desc{display:block; font-size:var(--t-sm); color:var(--ink3); margin-top:3px}
.modrow .n{font-size:var(--t-xs); color:var(--ink3); white-space:nowrap}
.foot2{font-size:var(--t-sm); color:var(--ink3); max-width:70ch; line-height:1.6}
/* radar uyarı satırı: kapalı modülde kayıt varsa "kayboldu" hissi vermesin */
.modnote{display:flex; align-items:center; flex-wrap:wrap; gap:0 12px; padding:9px 0;
  border-bottom:1px solid var(--hair); font-size:var(--t-sm); min-height:34px}
.modnote .up{color:var(--ink3)}
.modnote b{font-weight:var(--w-emphasis)}
.modnote a{font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  box-shadow:0 1px 0 var(--hair2); padding:4px 0}
.modnote a:hover{box-shadow:0 1px 0 var(--ink)}


/* ============ Faz 9: not defteri ============ */
.crow.nbrow{grid-template-columns:minmax(0,1.4fr) 70px minmax(0,2fr)}
.crow.nrow{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 110px}
.crow.rev{grid-template-columns:130px minmax(0,1fr) 140px auto; align-items:center}
.nbnew{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 26px}
.nbnew input{border-bottom:1px solid var(--hair2); padding:6px 0; font-size:var(--t-sm); min-width:180px; flex:1}

/* Sayfa gövdesi: okunur satır uzunluğu ve mevcut tipografi ölçeği */
.nbody{max-width:72ch; font-size:var(--t-md); line-height:1.68; color:var(--ink)}
.nbody h2{font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.03em; margin:30px 0 10px}
.nbody h3{font-size:var(--t-lg); font-weight:var(--w-emphasis); margin:24px 0 8px}
.nbody h4,.nbody h5,.nbody h6{font-size:var(--t-md); font-weight:var(--w-emphasis); margin:20px 0 6px}
.nbody p{margin:0 0 14px}
.nbody ul,.nbody ol{margin:0 0 14px; padding-left:20px}
.nbody li{margin-bottom:5px}
.nbody a{box-shadow:0 1px 0 var(--hair2)} .nbody a:hover{box-shadow:0 1px 0 var(--ink)}
.nbody code{font-family:var(--mono); font-size:var(--t-sm); background:var(--wash); padding:1px 5px}
.nbody pre{background:var(--wash); padding:12px 14px; overflow-x:auto; margin:0 0 16px;
  box-shadow:inset 0 0 0 1px var(--hair)}
.nbody pre code{background:none; padding:0; font-size:var(--t-sm); line-height:1.5}
.nbody blockquote{margin:0 0 14px; padding-left:14px; border-left:2px solid var(--hair2); color:var(--ink2)}
.nbody table{border-collapse:collapse; width:100%; margin:0 0 16px; font-size:var(--t-sm)}
.nbody th,.nbody td{text-align:left; padding:7px 12px 7px 0; border-bottom:1px solid var(--hair)}
.nbody th{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); 
  color:var(--ink3)}
.nbody hr{border:0; border-top:1px solid var(--hair); margin:24px 0}

.ngrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 clamp(20px,3vw,40px)}
.nhint{font-size:var(--t-xs); color:var(--ink3); line-height:1.6; margin:4px 0 8px}
.nhint code{font-family:var(--mono); background:var(--wash); padding:1px 4px}
.nhint b{color:var(--sig)}
.ndel{margin-top:34px; padding-top:16px; border-top:1px solid var(--hair)}
@media (max-width:760px){
  .crow.nbrow,.crow.nrow{grid-template-columns:1fr 70px}
  .crow.nrow .nx:first-of-type,.crow.nbrow .nx{grid-column:1/-1; padding-top:2px}
  .crow.rev{grid-template-columns:1fr auto}
}

.pan .plist{list-style:none; margin:0 0 14px; padding:0}
.pan .plist li{display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--hair);
  font-size:var(--t-sm)}
.pan .plist a{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  box-shadow:0 1px 0 var(--hair2)}
.pan .plist .m{font-size:var(--t-xs); color:var(--ink3)}

/* ============ Faz 10: not defteri arayüz sadeleştirmesi (PLAN §22) ============ */

/* §22.1-D: başlığın alt kuralı ile listenin üst kuralı üst üste binip çift bant yapıyordu */
.sc2 + .custlist,.sc2 + .nblist,.sc2 + .nsect{border-top:0}


/* Oluşturma formları düğme arkasında: nadir eylem ekranın ortasını işgal etmesin (§22.1-C) */
.ndisc{margin:16px 0 30px}
.ndisc>summary{display:inline-flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3); padding:11px 0; min-height:44px}
.ndisc>summary::-webkit-details-marker{display:none}
.ndisc>summary::before{content:"+"; font-size:var(--t-lg); line-height:1}
.ndisc[open]>summary::before{content:"−"}
.ndisc>summary:hover,.ndisc[open]>summary{color:var(--ink)}
.ndisc .nbnew{margin:0 0 8px}

/* Ayar gerekcesi dugme arkasinda (AYARLAR-SADELESTIRME AS-1). Olcum: ayarlarda
   2.841 kelime GORUNUR duruyordu; her alanin yanindaki uc cumle ekrani sartnameye
   ceviriyordu. Gerekce silinmedi -- "Neden boyle?" altina indi. <details>
   JavaScript istemez; CSP satir ici isleyicileri zaten calistirmiyor. */
.nicin{margin:4px 0 0}
.nicin>summary{display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font-size:var(--t-xs); color:var(--ink3); padding:3px 0}
.nicin>summary::-webkit-details-marker{display:none}
.nicin>summary::before{content:"?"; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border:1px solid var(--hair2); border-radius:50%;
  font-size:var(--t-2xs); line-height:1}
.nicin[open]>summary::before{content:"\2212"}
.nicin>summary:hover,.nicin[open]>summary{color:var(--ink)}
.nicin>summary:focus-visible{outline:3px solid var(--tint); outline-offset:2px; border-radius:var(--radius-sm)}
.nicin p{margin:6px 0 2px; max-width:62ch; font-size:var(--t-xs); color:var(--ink3); line-height:1.55}
.nicin dl{margin:8px 0 2px; max-width:62ch; font-size:var(--t-xs); color:var(--ink3); line-height:1.55}
.nicin dt{font-weight:var(--w-emphasis); color:var(--ink2); margin-top:9px}
.nicin dt:first-child{margin-top:0}
.nicin dd{margin:1px 0 0}

/* Ayar sayfasi ici bolum gezinmesi (AS-2): dort bolum tek sayfada. */
.setsub{margin:0 0 20px}

/* Sayi + birim ("3 gun", "Ayin 10. gunu"). Cipla `input[type=number]` .frow icinde
   %100 genislikte oldugu icin birim alt satira dusuyor ve ayar okunmuyordu. */
.frow .unit{display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.frow .unit input[type=number]{width:5.5em; min-width:0}

/* ---- Onay kurali: cumle kurucu ve onizleme (AS-3) ------------------------
   Kural 13 kutuluk bir form olarak duruyordu; kullanici kafasindaki tek cumleyi
   ("20.000 ust fatura Ayse ile Kerem'e") zihninde forma ceviriyordu. Alanlar ayni
   alanlar; degisen sey duzen: kutular cumlenin icine yerlesti. */
.kcum{max-width:820px; margin-top:6px}
.kcum-l{margin:0 0 10px; line-height:2.4; font-size:var(--t-sm); color:var(--ink2)}
.kcum-t{color:var(--ink3)}
.kcum select,.kcum input[type=number],.kcum input[type=text]{
  display:inline-block; width:auto; min-width:7em; max-width:16em;
  padding:4px 0; border-bottom:1px solid var(--hair2); font-size:var(--t-sm); color:var(--ink)}
.kcum input[type=number]{min-width:6em; width:7em}
.kcum select:focus,.kcum input:focus{border-bottom-color:var(--ink)}
.kcum-who{display:flex; flex-wrap:wrap; gap:8px 18px; margin:2px 0 14px; padding:11px 0 0;
  border-top:1px solid var(--hair)}
/* Django `CheckboxSelectMultiple` sarmalayici <div> + secenek basina <div> basiyor;
   ikisi de satir yapar. `display:contents` onlari kaldirip secenekleri dogrudan
   kusagin cocugu yapiyor, yani secenekler yan yana diziliyor. */
.kcum-who > div,.kcum-who > div > div{display:contents}
.kcum-who label{display:inline-flex; align-items:center; gap:7px; font-size:var(--t-sm); min-height:32px}
.kcum-more{margin-top:10px}
.kcum-more select,.kcum-more input{max-width:none}

/* Onizleme: "su anda hangi fatura kime gidiyor". Tablo kurallardan hesaplanir. */
/* Buyuk harf YOK: Swiss katmani kaldirilirken kural olarak konuldu ve bir test
   kilitliyor. Alt baslik agirlikla ve renkle ayrisiyor. */
.kpv-h{margin:28px 0 8px; font-size:var(--t-footnote); font-weight:var(--w-emphasis);
  color:var(--label-3)}
.kpv td{vertical-align:baseline}
.kpv-step{display:inline-block}
.kpv-ok{color:var(--ink3); font-size:var(--t-xs); padding:0 4px}
.kpv-null td{border-top:1px solid var(--hair)}

.crow.nrow{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 192px}
.qclr{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); margin-left:12px; box-shadow:0 1px 0 var(--hair2)}
.qclr:hover{color:var(--sig); box-shadow:0 1px 0 var(--sig)}


/* Sabitleme göstergesi listede görünmüyordu: `.pin` yalnız radar dizinine tanımlıydı (§22.1-J) */
.crow .nm .pin,.ph2 h2 .pin{display:inline-block; width:6px; height:6px; background:var(--sig);
  margin-right:8px; vertical-align:middle}
.btn.on{background:var(--wash2)}

/* Bölüm başlığı + yerinde düzenleme */

/* Sayfa künyesi: eskiden çok satırlı meta ızgarası, artık tek sessiz satır (§22.1-E) */
.nkunye{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 20px; margin:14px 0 26px;
  font-size:var(--t-xs); color:var(--ink3)}
.nkunye a{color:var(--ink2); box-shadow:0 1px 0 var(--hair2)}
.nkunye a:hover{color:var(--sig); box-shadow:0 1px 0 var(--sig)}
.nkunye span{letter-spacing:var(--tr-caption2)}
.nkunye .own{color:var(--sig)}

/* Kuyruğun içi. İki sütunlu ızgara NOTLAR-PLANI ile kalktı: kuyruk artık katlanmış
   bölümlerden oluşuyor ve iki sütuna bölmek "hangisi hangisinin altında" sorusunu üretiyordu. */
.ntail section{padding-bottom:14px}
.ntail>.ndisc{margin:10px 0 0}
.ntail>.nwarn{margin-top:14px}
.ntail h3{margin:0 0 6px; font-size:var(--t-xs); font-weight:var(--w-emphasis);
  letter-spacing:var(--tr-caption2); color:var(--ink3)}
.tlist{list-style:none; margin:0; padding:0}
.tlist li{display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--hair);
  font-size:var(--t-sm)}
.tlist a,.tlist>li>button:not(.btn):not(.x){flex:1; min-width:0; text-align:left; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; background:none; border:0; font:inherit; color:var(--ink);
  cursor:pointer; padding:0; box-shadow:0 1px 0 var(--hair2)}
.tlist a:hover,.tlist>li>button:not(.btn):not(.x):hover{color:var(--sig); box-shadow:0 1px 0 var(--sig)}
.tlist .m{font-size:var(--t-xs); color:var(--ink3); white-space:nowrap}
.tlist .num{font-size:var(--t-xs); font-weight:var(--w-emphasis); min-width:42px}
.tlist .x{color:var(--ink3); background:none; border:0; cursor:pointer; min-width:24px}
.tlist .x:hover{color:var(--sig)}
.thint{font-size:var(--t-xs); color:var(--ink3); margin:0 0 8px; line-height:1.6}

/* İdari kuyruk: sürüm geçmişi ve arşivleme katlanmış durur */
.nadmin{margin-top:34px; padding-top:14px; border-top:1px solid var(--hair)}
.nadmin .ndisc{margin:0}
.tlist.rlist li{flex-wrap:wrap}
.tlist.rlist .w{min-width:112px}
.tlist.rlist .t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ndel{margin-top:10px; padding-top:0; border-top:0}

/* Düzenleyici: yaz/önizle sekmeleri ve biçim çubuğu (§22.1-G) */
.nwrap{margin-top:18px; border-top:1px solid var(--separator)}

/* Parola uyarısı ayrı ve görünür bir not; ipucu paragrafına gömülüydü */
.nwarn{font-size:var(--t-sm); color:var(--ink2); line-height:1.6; margin:4px 0 20px;
  padding:10px 14px; background:var(--wash); box-shadow:inset 3px 0 0 var(--sig)}
.nwarn b{color:var(--sig)}

/* Kayıt seçici: 300 seçenekli çoklu listenin yerine ara-ve-ekle (§22.1-H) */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.chips:empty{display:none}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 11px; background:var(--wash);
  box-shadow:inset 0 0 0 1px var(--hair2); font-size:var(--t-xs); max-width:100%}
.chip .x{background:none; border:0; cursor:pointer; color:var(--ink3); font-size:var(--t-2xs);
  min-width:24px; min-height:24px}
.chip .x:hover{color:var(--sig)}
.pres{list-style:none; margin:8px 0 0; padding:0; box-shadow:inset 0 0 0 1px var(--hair)}
.pres li + li{border-top:1px solid var(--hair)}
.padd{display:flex; align-items:baseline; gap:12px; width:100%; text-align:left; background:none;
  border:0; cursor:pointer; font:inherit; font-size:var(--t-sm); color:var(--ink); padding:9px 12px;
  min-height:40px}
.padd:hover{background:var(--wash)}
.padd .m{font-size:var(--t-xs); color:var(--ink3); margin-left:auto}


@media (max-width:760px){
  /* `.crow.nrow` firma sayfasının not listesinde yaşıyor; `.nbar`/`.ntail` NOTLAR-PLANI
     ile yeniden yazıldı ve kendi dar ekran kurallarını taban kurallarının ARDINDA taşıyor. */
  .crow.nrow{grid-template-columns:1fr 132px}
  .crow.nrow .nx:first-of-type{grid-column:1/-1; padding-top:2px}
}

/* Uygulamada genel `a{text-decoration:none}` yok; her bileşen kendi altını çiziyor.
   Faz 10 bileşenleri de kendi çizgisini `box-shadow` ile kurar. */
.nkunye a,.tlist a,.qclr{text-decoration:none}

/* Faz 10 · dokunma hedefleri. UI-5 ile aynı kural: görsel boyut korunur, tıklama alanı 44 px'e
   tamamlanır. `.nbar` ve `.nsave` buradan ÇIKTI: not editörü NOTLAR-PLANI ile yeniden
   yazıldı ve kendi dar ekran bloğunu taban kurallarının ARDINDAN taşıyor. */
@media (max-width:680px){
  .nbnew input,#pickQ{min-height:44px; padding-top:0; padding-bottom:0}
  .chips .x,.tlist .x{min-width:44px; min-height:44px}
  /* Satırın tamamı hedef olsun: yükseklik `li` dolgusunda değil, bağlantının kendisinde. */
  .tlist li{padding:0}
  .tlist a,.tlist>li>button:not(.btn):not(.x){min-height:44px; display:flex; align-items:center}
  .nkunye a{min-height:44px; display:inline-flex; align-items:center}
  a.crow.nrow{min-height:52px; align-content:center}
}

/* ============ Faz 11: giriş kapısı (PLAN §23) ============ */
/* Oturum açılmadan görülen her ekran. Kart değil: uygulamanın kendi editoryal düzeni sürüyor,
   üstte aynı marka satırı ve aynı 3 px kural çizgisi. */
.gate{max-width:1560px; margin:0 auto; padding:0 var(--pad) 40px; min-height:100vh;
  display:flex; flex-direction:column}
.gatehead{display:flex; align-items:baseline; gap:16px; padding:24px 0 12px; flex-wrap:wrap}
.gatehead .mark{font-size:var(--t-lg); font-weight:var(--w-emphasis); letter-spacing:-.032em;
  line-height:1.1}
.gatehead i{font-style:normal; font-size:var(--t-sm); color:var(--ink3); letter-spacing:-.014em}

.gatebody{flex:1; display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:0 clamp(40px,9vw,150px); padding-top:clamp(44px,11vh,120px); align-items:start}
.gatecol{min-width:0}
/* Sağ sütun boş bırakılmıyor ama doldurulmuyor da: tek satır, ince kural, sessiz renk. */
.gateside{min-width:0; border-left:1px solid var(--hair); padding-left:clamp(24px,3vw,44px);
  align-self:stretch}
.gateside p{margin:6px 0 0; font-size:var(--t-sm); color:var(--ink3); line-height:1.62; max-width:44ch}

/* Satır yüksekliği 1'in altına indirilmiyor: Ş, Ç, Ğ büyük harfleri alt uzantılı ve
   sıkıştırıldığında bir alttaki metnin üstüne biniyor. */
.gate-h1{margin:0 0 16px; font-size:clamp(34px,4.6vw,52px); font-weight:var(--w-emphasis); letter-spacing:-.045em;
  line-height:1.06; text-wrap:balance}
.gate-lede{margin:0 0 26px; font-size:var(--t-md); color:var(--ink2); line-height:1.6; max-width:52ch}
.gate-lede a{color:var(--ink); box-shadow:0 1px 0 var(--hair2); text-decoration:none}
.gate-lede a:hover{color:var(--sig); box-shadow:0 1px 0 var(--sig)}

.gate-form{margin:0}
.gate-form .f{margin-bottom:20px}
.gate-form .f label{display:block; margin-bottom:6px; 
  font-size:var(--t-xs); font-weight:var(--w-regular); letter-spacing:var(--tr-caption2); 
  color:var(--ink3)}
.gate-form .f label.inline{display:inline; margin-left:8px; font-family:var(--sans);
  letter-spacing:0; text-transform:none; font-size:var(--t-sm); color:var(--ink2)}
.gate-form input[type=text],.gate-form input[type=password],.gate-form input[type=email],
.gate-form input[type=number],.gate-form input[type=url],.gate-form textarea{
  width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--hair2);
  font-size:var(--t-lg); background:var(--paper); color:var(--ink); min-height:46px}
.gate-form input:hover{border-bottom-color:var(--ink3)}
/* Odak halkası bilerek kaldırılmadı: klavye odağı `:focus-visible` ile görünür kalmalı (UI-3);
   vurgu alt kuralın kalınlaşmasıyla veriliyor. */
.gate-form input:focus{border-bottom-color:var(--ink)}
.gate-form .f.bad input{border-bottom-color:var(--sig)}
.gate-form .hint{margin-top:7px; font-size:var(--t-xs); color:var(--ink3); line-height:1.55}
.gate-form .hint a{color:var(--ink2); box-shadow:0 1px 0 var(--hair2); text-decoration:none}
.gate-form .hint a:hover{color:var(--sig); box-shadow:0 1px 0 var(--sig)}
.gate-form .err{margin-top:7px; font-size:var(--t-xs); font-weight:var(--w-emphasis); color:var(--sig)}
.gate-form .err ul{list-style:none; margin:0; padding:0}
.gate-form .f.bad .err{display:block}

.gate-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px}
.gate-actions.col{flex-direction:column; align-items:stretch}
.gate-actions .btn{min-height:48px; padding:12px 26px; font-size:var(--t-md)}
.gate-actions .btn.pri{flex:1; justify-content:center; min-width:180px}

.gate-alert{margin:0 0 20px; padding:12px 16px; background:var(--wash); font-size:var(--t-sm);
  color:var(--ink2); line-height:1.55; box-shadow:inset 3px 0 0 var(--sig)}
.gate-hr{height:1px; background:var(--hair); margin:30px 0}
.gate-panel{margin:0 0 28px}
.gate-code{font-family:var(--mono); font-size:var(--t-md); line-height:1.9; letter-spacing:var(--tr-caption2);
  background:var(--wash); padding:14px 16px; overflow-x:auto; margin:0 0 20px}
.gatefoot{padding-top:36px; font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  color:var(--ink3)}

@media (max-width:860px){
  .gatebody{grid-template-columns:1fr; gap:0; padding-top:clamp(28px,6vh,52px)}
  /* Sağdaki açıklama mobilde formun altına iner; kenar kuralı üst kurala döner. */
  .gateside{border-left:0; border-top:1px solid var(--hair); padding:20px 0 0; margin-top:36px}
  .gate-h1{font-size:clamp(30px,8.5vw,40px)}
  .gate-actions .btn.pri{width:100%}
  /* "Şifrenizi mi unuttunuz?" gövde metni değil, tıklanan bir denetim. */
  .gate-form .hint a{display:inline-flex; align-items:center; min-height:44px}
  .gatefoot{padding-top:28px; line-height:1.7}
}

/* QR kodu her iki temada da beyaz zeminde durur: allauth kareyi tek siyah yol olarak, saydam
   arka planla üretiyor ve koyu temada siyah üstüne siyah düşüyordu (PLAN §23.7). */
.gate-qr{display:inline-block; background:#FFFFFF; padding:14px; margin:6px 0 24px;
  box-shadow:inset 0 0 0 1px var(--hair)}
.gate-qr img{display:block; width:min(208px,60vw); height:auto}

/* Excel içe aktarma (PLAN §24) */
.impform{margin:18px 0 6px; max-width:480px}
.impform .f label{display:block; margin-bottom:6px; font-size:var(--t-xs);
  letter-spacing:var(--tr-caption2); color:var(--ink3)}
.impform input[type=file]{width:100%; font-size:var(--t-sm); padding:9px 0; min-height:44px}
.impsm{font-size:var(--t-xs); color:var(--ink3); line-height:1.65; margin:6px 0 14px}
.impbad{margin:14px 0; padding:11px 15px; background:var(--wash); font-size:var(--t-sm);
  color:var(--ink2); box-shadow:inset 3px 0 0 var(--sig)}
.imprep{margin-top:18px}
.imprep dt.w{color:var(--sig)}
.impact{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--separator)}

/* İçe aktarma önizleme tablosu: onaydan önce her satır görünür (PLAN §24.5) */
.imptable{overflow:auto; border-top:1px solid var(--separator); border-bottom:1px solid var(--hair);
  margin:0 0 6px}
.imptable.tall{max-height:60vh}
.imptable table{border-collapse:collapse; width:100%; font-size:var(--t-sm)}
.imptable thead th{position:sticky; top:0; background:var(--paper); text-align:left;
  font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3); padding:9px 14px 8px 0; white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--hair2)}
.imptable td{padding:7px 14px 7px 0; border-bottom:1px solid var(--hair); vertical-align:top}
.imptable td.t{max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.imptable td.num{text-align:right; padding-right:20px; font-variant-numeric:tabular-nums}
.imptable td.why{color:var(--sig); font-size:var(--t-xs); max-width:38ch}
/* Sınıf adları `imp` ön ekli: `.skip` (içeriğe atla bağlantısı, position:absolute; left:-9999px)
   ve `.warn` (sol kenarlıklı uyarı kutusu) uygulamada zaten kullanılıyor ve satırları
   ekrandan çıkarıyordu. Ad vermeden önce grep. */
.imptable tr.impskip td{color:var(--ink3); text-decoration:line-through}
.imptable tr.impskip td.why{color:var(--sig); text-decoration:none}
.imptable tr.impwarn td{background:var(--wash)}
.imptable .tag{font-size:var(--t-xs); letter-spacing:var(--tr-caption2);
  padding:2px 7px; white-space:nowrap}
.imptable .tag.new{box-shadow:inset 0 0 0 1px var(--hair2); color:var(--ink2)}
.imptable .tag.upd{background:var(--ink); color:var(--paper)}

/* Çalışma alanı sıfırlama (PLAN §25) */
.rst{margin-top:18px; max-width:760px}
.rstall{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--separator);
  font-size:var(--t-md); cursor:pointer}
.rstlist{list-style:none; margin:0; padding:0}
.rstlist li{border-bottom:1px solid var(--hair)}
.rstlist label{display:grid; grid-template-columns:20px minmax(0,1fr) 62px; gap:4px 12px;
  align-items:center; padding:11px 0; cursor:pointer; min-height:44px}
.rstlist .ad{font-size:var(--t-md); font-weight:var(--w-emphasis)}
.rstlist .n{font-size:var(--t-sm); text-align:right; color:var(--ink2);
  font-variant-numeric:tabular-nums}
.rstlist .ac{grid-column:2/-1; font-size:var(--t-xs); color:var(--ink3); line-height:1.5}
.rstlist li.bos label{cursor:default} .rstlist li.bos .ad,.rstlist li.bos .n{color:var(--ink3)}
.rstonay{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px;
  padding-top:20px; border-top:2px solid var(--sig)}
.rstonay label{font-size:var(--t-sm); color:var(--ink2)}
.rstonay input{border-bottom:1px solid var(--hair2); padding:9px 0; font-size:var(--t-md);
  width:140px; min-height:44px; letter-spacing:var(--tr-caption2)}
.rstonay input:focus{border-bottom-color:var(--sig)}

@media (max-width:680px){
  /* Sayfanın en yıkıcı denetimi; parmakla ıskalanmamalı. */
  .rstonay{align-items:stretch}
  .rstonay input{width:100%}
  .rstonay .btn{width:100%; justify-content:center; min-height:48px}
}

/* ---- yapiskan arac cubugu: zemin ve kil cizgi (Swiss kaldirma, Faz 5) ----
   Zemin `.mtop`un kendisinde DEGIL ayri sozde ogede: boylece sayfanin dolgusuna
   bagli kalmaz, kenara kadar uzanir ve mobilde de bleed eder. */
/* Dar ekranda arac cubugu IKI SATIRA sariyor: 98px. Yapiskan yapmak iPhone'da
   ekranin %12'sini kalici olarak yiyor -- Apple'in gezinme cubugu tek satir ve
   54pt. Cozum arac cubugunu tek satira indirmek (Faz 8'in isi); o zamana kadar
   dar ekranda yapiskanlik kapali. Yukseklik jetonu tokens.css'te. */
@media (max-width:680px){ .mtop{ position:static; } }
.mtop::before{
  content:""; position:absolute; inset:0 calc(var(--pad) * -1); z-index:-1;
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-thin);
  backdrop-filter:var(--material-thin);
}
.mtop::after{
  content:""; position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  bottom:0; height:1px; background:var(--separator); opacity:0;
}

/* ============ Faz B: mobil üst çubuk ve filtre çubuğu ============
   Bu blok DOSYANIN SONUNDA çünkü UI-1'in koşulsuz `.mtop` kuralları (gap, flex-wrap,
   margin) daha aşağıda duruyor ve aynı özgüllükte oldukları için sonra geleni
   kazanıyor. Aynı sınıf adına iki yerden yazmanın bedeli bu; kural eklerken sırayı
   kontrol et. */
@media (max-width:680px){
  /* Üst çubuk: arama logonun yanına, "Yeni kayıt" kısalır. Kendi satırında 122 px
     harcıyordu — ilk ekranda en pahalı ikinci band buydu. */
  .mtop{gap:4px 10px; padding:10px 0 8px; flex-wrap:wrap; align-items:center}
  .mtop h1{width:auto; flex:0 0 auto; margin:0; font-size:var(--t-sm)}
  .mtop .right{width:auto; flex:1 1 auto; margin:0; justify-content:flex-end; gap:10px; align-items:center}
  .mtop .srch{width:auto; flex:1 1 90px; min-width:80px}
  /* E0/H5: eskiden font-size:0 + ::after "+ Kayıt" — Apple katmanı font-size'ı geri
     verince "+ Yeni kayıt+ Kayıt" çıkıyordu. Dar ekranda yalnız simge; ad aria-label'da. */
  .newb{padding:0; width:44px; justify-content:center; letter-spacing:0}
  .newb .nbt{display:none}
  .newb .nbi{font-size:var(--t-title3); line-height:1; margin-right:0}

  /* Filtre çubuğu üç satır segmente yayılıyordu (249 px). İkincil denetimler gizlenir;
     hepsinin başka bir yolu var: Gelişmiş ve Dizin "+ Filtre ekle" sayfasından,
     Yoğunluk Ayarlar › Görünüm'den, Zaman şeridi masaüstünden. */
  /* MR-1 (M8): "Temizle" (`.flink.sig`) gizlenmez — başka yolu yoktu, süzgeçler tek tek ✕ ile kalkıyordu.
     Zaman şeridinin telefondaki anahtarı ⋯ menüsünde ayrı (`.ftimeph`, MR-2). */
  .fbar .flink:not(.sig),.fbar .dens,.fbar .ftime{display:none}
  .fbar .kseg,.fbar .seg{flex:1 1 100%}
  .fbar .seg button,.fbar .seg a{flex:1 1 0; justify-content:center}

  /* İki odak üstten hizalı: sağdaki çip satırı yüzünden uzun olduğu için alttan
     hizalamada sol odak aşağı kayıyor ve iki etiket aynı satırda durmuyordu. */
  .lead{align-items:flex-start; padding:9px 0 10px}
  .foc .n{font-size:clamp(36px,11vw,48px)}
  /* Sayaç ve "eksik veri" kendi satırlarını istemesin: segmentler sona alınır, ikisi de
     "+ Filtre ekle" satırını paylaşır. (Belge sırasında segmentlerden sonra geldikleri
     için sarma onları dördüncü satıra atıyordu.) */
  .fbar .qbad{order:1}
  .fbar .cnt{order:2}
  .fbar .kseg{order:5}
  .fbar .seg{order:6}
  /* Grup başlığı: masaüstündeki 24 px üst boşluk dar ekranda savurgan. */
  .sec{padding:13px 0 6px}
}

/* ============ Faz C: bekleme dili ============
   Canlıda gidiş-dönüş 212-551 ms (ortalama 381). Faz C'ye kadar bu sürede ekranda
   hiçbir şey olmuyordu. Üç işaret: üstte ilerleme çizgisi, bekleyen bölgede sessiz
   soluklaşma, panelde iskelet. Hepsi 120 ms'lik eşikten sonra — hızlı yanıtta
   yanıp sönmek, hiç göstermemekten kötü. */
.busy::before{content:""; position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:linear-gradient(90deg,var(--sig) 0%,var(--sig) 40%,transparent 40%);
  background-size:280% 100%; animation:barslide 1.1s linear infinite}
@keyframes barslide{from{background-position:120% 0}to{background-position:-60% 0}}
/* Bekleyen bölge okunmaya devam etsin, yalnız bir adım geri çekilsin. Soluklaşma da
   120 ms eşiğine bağlı (`.busy`), yoksa 30 ms'lik yanıtta ekran titriyordu; `aria-busy`
   ise HEMEN konur — ekran okuyucunun beklemeyi geciktirmesi için sebep yok. */
#view{transition:opacity var(--d-enter) var(--e-out)}
.busy #view[aria-busy="true"]{opacity:.62}
/* Uçuştaki istek varken satır tıklaması yutulur: çift gönderim üretmesin. */
#view[aria-busy="true"] .rw,#view[aria-busy="true"] .tbl tbody tr{pointer-events:none}

/* İyimser satır: eylem gönderildi, sunucu henüz onaylamadı. */
.rw.acting,tr.acting{opacity:.5}
.rw.acting-done .t,tr.acting-done td.w{text-decoration:line-through}

/* Panelin açıldığı satır işaretli kalır: iki yüzey arasındaki bağ. */
.rw.open::before,tr.open td:first-child::before{width:3px; background:var(--sig)}
.rw.open{background:var(--wash)}
tr.open{background:var(--wash)}

/* Panel iskeleti: istek başlar başlamaz açılır, içerik gelince yerini bırakır.
   Eskiden panel yalnız içerik geldikten sonra açılıyordu — satıra tıklayıp yarım
   saniye hiçbir şey olmuyordu. */
.skb{display:block; background:var(--wash2); border-radius:0}
.pan .sk .kk .skb{display:inline-block; height:16px; margin-right:8px}
.pan .sk .skb.h2{height:22px; margin-top:10px}
.pan .sk .skb.big{width:96px; height:44px}
.pan .sk .skb.row{height:13px; margin-bottom:14px}
.pan .sk .skcol{display:flex; flex-direction:column; gap:7px; flex:1}
.pan .sk .skcol .skb{height:13px}
.skb.w3{width:38px} .skb.w4{width:58px} .skb.w5{width:88px} .skb.w6{width:42%}
.skb.w7{width:56%} .skb.w8{width:72%} .skb.w9{width:88%}
.pan .sk{animation:skpulse 1.3s var(--e-out) infinite}
@keyframes skpulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .busy::before{animation:none; background:var(--sig)}
  .pan .sk{animation:none}
}

/* ============ Faz D: onay penceresi ve müşteri seçici ============
   22 noktada işletim sisteminin kutusu açılıyordu. Yerel <dialog> kullanılıyor:
   odak tuzağı, Esc, arka planın etkisizleşmesi ve üst katman tarayıcıdan geliyor. */
dialog.cnf{padding:0; border:0; background:none; max-width:min(460px,calc(100vw - 32px)); color:var(--ink)}
dialog.cnf::backdrop{background:rgba(10,10,10,.44)}
.cnfb{background:var(--paper); border:1px solid var(--separator); padding:24px 26px 18px;
  animation:fadeUp var(--d-enter) var(--e-out) both}
.cnfb h2{margin:0; font-size:var(--t-xl); font-weight:var(--w-emphasis); letter-spacing:-.03em; line-height:1.2; text-wrap:balance}
.cnfb p{margin:10px 0 0; font-size:var(--t-sm); color:var(--ink2); line-height:1.5}
.cnfcopy{display:block; width:100%; margin-top:14px; padding:9px 11px; font-family:var(--mono);
  font-size:var(--t-sm); border:1px solid var(--hair2); background:var(--wash)}
.cnfa{display:flex; justify-content:flex-end; gap:8px; margin-top:22px}
.cnfa .btn{min-width:104px; justify-content:center}
/* Yıkıcı eylemde onay düğmesi sinyal rengini taşır ve odak "Vazgeç"te başlar. */
dialog.cnf.danger .cnfb{border-color:var(--sig)}
@media (prefers-reduced-motion:reduce){.cnfb{animation:none}}

/* Müşteri seçici: prompt() yerine mevcutlardan seçim. */
.cplist{list-style:none; margin:14px 0 4px; padding:0; max-height:38vh; overflow-y:auto;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.cprow{display:flex; align-items:center; gap:12px; padding:9px 2px; min-height:40px;
  border-bottom:1px solid var(--hair); cursor:pointer}
.cplist li:last-child .cprow{border-bottom:0}
.cprow:hover{background:var(--wash)}
.cprow .nm{flex:1; font-size:var(--t-sm); font-weight:var(--w-emphasis)}
.cprow .m{font-size:var(--t-xs); color:var(--ink3); font-variant-numeric:tabular-nums}
.cphint{margin:0 0 4px; font-size:var(--t-sm); color:var(--ink2)}
.cpnew{margin-top:16px}
.cpnew .hint{display:block; margin-top:5px; font-size:var(--t-xs); color:var(--ink3)}
@media (max-width:680px){
  .cnfa{flex-direction:column-reverse} .cnfa .btn{width:100%; min-height:44px}
  .cprow{min-height:44px}
}

/* ============ Faz E: sessiz eksik veri, tablo grupları, panel ============
   Kullanıcının kararı: eksik veri gizlenmesin ama bağırmasın. Tire `--ink3`'ten de
   soluk çizilir ve düzenlenebilir hücrede tıklanınca alan açılır. Yüksek kontrast
   tercihinde soluklaşma geri alınır — orada okunurluk önce gelir. */
.dash{color:var(--hair2); user-select:none}
.tbl td.ie .dash{cursor:text}
.tbl td.ie:hover .dash,dl.kv dd:hover .dash{color:var(--ink3)}
:root[data-hc="1"] .dash{color:var(--ink3)}

/* Başlık sütunu artan yeri alsın: on bir sütunun beşi tire taşırken başlık 200 px'te
   kırpılıyordu. `max-width:0` + `width:100%` klasiği — hücre kalan genişliği alır,
   taşarsa üç noktayla biter. */
.tbl td.w{max-width:0; width:100%}
.tbl th[data-col="title"]{width:100%}

/* Radar grupları tabloya taşındı: aynı veri iki görünümde iki farklı zihinsel model
   kuruyordu (radarda kovalar vardı, tabloda düz liste). */
.tbl tr.gsec td{padding:22px 0 6px; border-bottom:1px solid var(--separator); background:var(--paper)}
.tbl tr.gsec{cursor:default}
.tbl tr.gsec:hover td{background:var(--paper)}
.tbl tr.gsec .nm{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);}
.tbl tr.gsec .ct{float:right; font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--ink3)}

/* Panel bir okuma yüzeyi: adım düzenleyicisi kapalı başlar. Faz E'den önce kayıtta
   adım yokken metin alanı sürekli açıktı ve künyenin yarısı kadar yer kaplıyordu. */
.pan .ckedit>summary{cursor:pointer; font-size:var(--t-xs); color:var(--ink3); padding:6px 0; min-height:24px}
.pan .ckedit>summary:hover{color:var(--ink)}
.pan .ckedit[open]>summary{color:var(--ink)}

/* ============ Faz F: sayfa kompozisyonu ============
   Giriş ekranının sağ sütunu tek cümle taşıyordu; dikey kural içeriğin çok altına
   iniyordu. Tanım listesi hem ölçüyü hem yüksekliği dolduruyor. */
.gatelead{margin:2px 0 26px; font-size:var(--t-sm); color:var(--ink3); line-height:1.62; max-width:46ch}
.gatewhat{margin:2px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; max-width:52ch}
.gatewhat dt{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink); padding:14px 0 5px; border-top:1px solid var(--hair)}
.gatewhat dt:first-child{border-top:0; padding-top:0}
/* Üstünde bir giriş cümlesi varsa ilk başlık kendi çizgisini geri alır; yoksa cümle
   ile liste birbirine yapışıyordu. */
.gatelead+.gatewhat dt:first-child{border-top:1px solid var(--hair); padding-top:14px}
.gatewhat dd{margin:0 0 4px; font-size:var(--t-sm); color:var(--ink3); line-height:1.6}
@media (max-width:860px){
  .gatewhat dt{padding-top:12px}
}

/* Müşteri sayfasının özet bandı. Faz B'de radarın `.stats` / `.pst` bandı kaldırılınca
   bu sayfa STİLSİZ kaldı ve üç faz boyunca sayı ile etiket bitişik çıktı
   ("0Gecikmiş30Açık"). Sınıfı silmeden önce başka kullanan var mı diye bakmamıştım;
   nöbetçisi tests/test_faz_f_pages.py'de. Radarın bugünkü diliyle yeniden yazıldı. */
.stats{display:flex; flex-wrap:wrap; align-items:baseline; padding:12px 0 13px;
  border-bottom:1px solid var(--separator)}
.stats .st{display:flex; align-items:baseline; gap:9px; min-height:30px;
  padding-right:clamp(18px,2.6vw,38px); margin-right:clamp(18px,2.6vw,38px);
  border-right:1px solid var(--hair)}
.stats .st:last-child{border-right:0; margin-right:0; padding-right:0}
.stats .st b{font-size:var(--t-xl); font-weight:var(--w-emphasis); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.stats .st .lb{font-size:var(--t-xs); font-weight:var(--w-regular);
  letter-spacing:var(--tr-caption2); color:var(--ink3); white-space:nowrap}
@media (max-width:680px){
  .stats .st{padding-right:14px; margin-right:14px}
  .stats .st:nth-child(3n){border-right:0; margin-right:0; padding-right:0}
}

/* ---- Ölçüm temeli ve arşiv (İZ-0) --------------------------------------------------- */
/* Amaç: eksik veriyi listelemek değil, aynı ekranda doldurtmak. Boşluğun kendisi bir
   yapılacaklar listesi olarak okunmalı, bir suçlama olarak değil. */
.gwnote,.ph2note{margin:14px 0 0; max-width:74ch; font-size:var(--t-sm); color:var(--ink2); line-height:1.55}
.gwhint{margin:14px 0 0; font-size:var(--t-xs); color:var(--ink3)}
.gwhint kbd{font-family:var(--mono); font-size:var(--t-2xs); border:1px solid var(--hair2); padding:1px 4px}
.gwmsg{margin:12px 0 0; padding:9px 12px; font-size:var(--t-sm); color:var(--ink);
  border-left:3px solid var(--sig); background:var(--paper2)}
.gwmsg b{}
.gwt td.c,.gwt th.c{width:34px; text-align:center}
.gwt td.ie{cursor:text}
.gwbar{position:sticky; bottom:0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 0; margin-top:6px; border-top:1px solid var(--separator); background:var(--paper)}
.gwbar .sp{flex:1}
.gwbar .gwall{display:inline-flex; align-items:center; gap:7px; font-size:var(--t-xs);
  font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink2)}
.gwbar .gwlab{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.gwbar select,.gwbar input[type=text]{font:inherit; font-size:var(--t-sm); padding:7px 9px;
  border:1px solid var(--hair2); background:var(--paper); color:var(--ink); min-height:38px}
.gwbar input[type=text]{min-width:190px}
.gwsay{font-size:var(--t-xs); color:var(--ink3); max-width:52ch}

@media (max-width:680px){
  .gwbar{gap:9px}
  .gwbar .sp{display:none}
  .gwbar select,.gwbar input[type=text],.gwbar .btn{min-height:44px; flex:1 1 100%}
  .gwt th:nth-child(4),.gwt td:nth-child(4){display:none}
}

/* ---- Grafikler ve kalite karnesi (İZ-6, K-İZ8) ---------------------------------------- */
/* Grafiklerin tamamı sunucuda üretilen satır içi SVG: CSP nonce yüzeyi açmaz, yazdırmada
   vektör olarak basılır, her birinin tablo karşılığı vardır. Renkler jetonlardan gelir ki
   koyu tema ve vurgu rengi tercihi grafiklerde de geçerli olsun. */
.spark{display:block; width:100%; height:26px; overflow:visible}
.lc,.cc,.ssc{display:block; width:100%; height:auto; max-width:100%}
.lc{max-height:220px} .cc{max-height:240px}
.sh{margin:34px 0 12px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3); border-bottom:1px solid var(--hair2); padding-bottom:7px}
.empty.sm{padding:34px 0}

.dqhead{display:flex; align-items:flex-start; gap:34px; flex-wrap:wrap; padding:26px 0 4px}
.dqscore{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.dqscore .n{font-size:var(--t-hero2); font-weight:var(--w-emphasis); letter-spacing:-.05em; line-height:.86;
  font-variant-numeric:tabular-nums; font-family:var(--sans)}
.dqscore .n.lv-warn{color:var(--ink2)} .dqscore .n.lv-bad{color:var(--sig)}
.dqscore .of{font-size:var(--t-md); color:var(--ink3)}
.dqscore .lt{flex:0 0 100%; font-size:var(--t-xs); color:var(--ink3)}
.dqscore .lt b{color:var(--ink2)}
.dqsay{flex:1 1 320px; max-width:56ch; margin:6px 0 0; font-size:var(--t-sm); color:var(--ink2); line-height:1.55}
.dqbar,.dqfix,.dqtrend{margin-top:6px}
.dqbar .ssc{margin-bottom:10px}
.dqt td.n,.dqt th.n{text-align:right}
.dqready{margin-top:6px}
.rdl{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 26px}
.rdl li{border-top:1px solid var(--hair2)}
.rdl a{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; gap:2px 10px;
  padding:12px 2px 14px; text-decoration:none; color:inherit}
.rdl .pc{grid-row:1/2; font-size:var(--t-lg); font-weight:var(--w-emphasis);
  font-variant-numeric:tabular-nums; line-height:1}
.rdl .lb{grid-row:1/2; align-self:end; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3)}
.rdl .bl{grid-column:1/3; font-size:var(--t-xs); color:var(--ink3)}
/* Apple'in ilerleme cubugu: 4pt, tam yuvarlak, tint dolgu, --fill-3 yol.
   Eskisi 3px, kare ve saf siyahti. */
.rdl .mt{grid-column:1/3; height:4px; background:var(--fill-3); margin-top:5px;
  border-radius:var(--radius-pill); overflow:hidden}
.rdl .mt i{display:block; height:100%; background:var(--tint); border-radius:var(--radius-pill)}
.rdl li.lv-warn .pc{color:var(--orange)} .rdl li.lv-warn .mt i{background:var(--orange)}
.rdl li.lv-bad .pc{color:var(--red)} .rdl li.lv-bad .mt i{background:var(--red)}
.rdl a:hover .lb{color:var(--ink)}
.dqt tr.unm td{color:var(--ink3)}
.dqhint{margin:0 0 12px; font-size:var(--t-xs); color:var(--ink3); max-width:70ch}
.dqlist{list-style:none; margin:0; padding:0}
.dqlist li{border-bottom:1px solid var(--hair2)}
.dqlist a{display:flex; align-items:baseline; gap:16px; padding:11px 2px; text-decoration:none; color:inherit}
.dqlist a:hover{background:var(--paper2)}
.dqlist .lb{flex:0 0 150px; font-weight:var(--w-emphasis)}
.dqlist .ct{flex:1; font-size:var(--t-sm); color:var(--ink2)}
.dqlist .ct b{color:var(--sig)}
.dqlist .go{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.dqlist a:hover .go{color:var(--ink)}
.dqtab{margin-top:12px}
.dqtab summary{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); cursor:pointer}
.dqtab summary:hover{color:var(--ink)}
.dqfoot{margin:34px 0 0; padding-top:14px; border-top:1px solid var(--separator); font-size:var(--t-sm)}
.dqfoot b{color:var(--sig)}

@media (max-width:680px){
  .dqhead{gap:16px; padding-top:18px}
  .dqlist a{flex-wrap:wrap; gap:6px; min-height:44px}
  .dqlist .lb{flex:0 0 100%}
  .dqt th:nth-child(2),.dqt td:nth-child(2){display:none}
}
@media print{
  .dqtab{display:none}
  .lc,.cc,.ssc{max-width:100%}
}

/* ---- Panorama, öngörü, trend (İZ-3) --------------------------------------------------- */
/* En fazla sekiz kart (araştırma: 5–9 üstü bilişsel yük). Her kart: değer, değişim, eşik ve
   tek tıkla iniş. Bağlamsız tek rakam gösteriş metriğidir; kart bunu yapısal olarak engeller. */
.subnav{display:flex; gap:16px; align-items:baseline}
.subnav a{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); text-decoration:none; box-shadow:0 1px 0 var(--hair2)}
.subnav a:hover,.subnav a[aria-current]{color:var(--ink); box-shadow:0 2px 0 var(--ink)}
.pnlead{margin:20px 0 4px; max-width:62ch; font-size:var(--t-lg); font-weight:var(--w-emphasis); line-height:1.32;
  letter-spacing:-.015em}
.pnlead a{color:inherit; text-decoration:none; box-shadow:0 2px 0 var(--sig)}
.pnlead a:hover{color:var(--sig)}
.pnnote{margin:16px 0 0; max-width:76ch; font-size:var(--t-sm); color:var(--ink2); line-height:1.55}
.pnhint{margin:10px 0 0; max-width:78ch; font-size:var(--t-xs); color:var(--ink3); line-height:1.5}
.pnhint b{color:var(--ink2)}

.pncards{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:22px 0 4px;
  border-top:1px solid var(--separator); border-bottom:1px solid var(--hair2)}
.pnc{display:flex; flex-direction:column; gap:3px; padding:16px 16px 14px; text-decoration:none;
  color:inherit; border-right:1px solid var(--hair2); border-bottom:1px solid var(--hair2)}
.pnc:nth-child(4n){border-right:0}
.pnc:nth-last-child(-n+4){border-bottom:0}
.pnc:hover{background:var(--paper2)}
.pnc .v{font-family:var(--sans); font-size:var(--t-2xl); font-weight:var(--w-emphasis); letter-spacing:-.045em;
  line-height:1; font-variant-numeric:tabular-nums}
.pnc .lb{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink3)}
.pnc .ch{font-size:var(--t-xs); color:var(--ink3)}
.pnc .ch.none{font-family:var(--sans); letter-spacing:0}
.pnc .sp{display:block; margin-top:6px}
.pnc.lv-warn .v{color:var(--ink2)}
.pnc.lv-bad .v{color:var(--sig)}
.pnc.lv-bad .lb{color:var(--ink2)}

.pnsec{margin-top:8px}
.pnr td.wy{font-size:var(--t-xs); color:var(--ink3)}
.pnr td a{color:inherit; text-decoration:none; box-shadow:0 1px 0 var(--hair2)}
.pnr td a:hover{box-shadow:0 1px 0 var(--ink)}
.pngrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 26px; margin-top:14px}
.pngrid > div{padding:12px 0 14px; border-top:1px solid var(--hair2); display:flex;
  flex-direction:column; gap:3px}
.pngrid .k{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); color:var(--ink3)}
.pngrid .v2{font-size:var(--t-lg); font-weight:var(--w-emphasis); font-variant-numeric:tabular-nums}
.pngrid .n2{font-size:var(--t-xs); color:var(--ink3); line-height:1.45}
.pnflag{margin:12px 0 0; font-size:var(--t-sm)}
.pnflag a{color:inherit; text-decoration:none; box-shadow:0 2px 0 var(--sig); margin-right:4px}
.pnflag b{}
tr.pk td{background:var(--paper2)}
.chn{font-size:var(--t-xs); color:var(--ink3); text-transform:none;
  letter-spacing:0; margin-left:8px}

@media (max-width:860px){ .pncards{grid-template-columns:repeat(2,1fr)}
  .pnc:nth-child(4n){border-right:1px solid var(--hair2)}
  .pnc:nth-child(2n){border-right:0}
  .pnc:nth-last-child(-n+4){border-bottom:1px solid var(--hair2)}
  .pnc:nth-last-child(-n+2){border-bottom:0} }
@media (max-width:680px){
  .pncards{grid-template-columns:1fr}
  .pnc{border-right:0; min-height:44px}
  .pnc:nth-child(2n){border-right:0}
  .pnlead{font-size:var(--t-md)}
  .pnr th:nth-child(5),.pnr td:nth-child(5){display:none}
  .subnav{gap:12px; flex-wrap:wrap}
}
@media print{ .subnav{display:none} .pncards{break-inside:avoid} }

/* ---- Rapor v2: çapraz tablo ve kıyas (İZ-4) ------------------------------------------- */
.rctl2{border-top:0; padding-top:0}
.bars .bar .cmp{font-size:var(--t-xs); color:var(--ink3);
  min-width:46px; text-align:right}
.bars .bar .cmp.up{color:var(--ink2)} .bars .bar .cmp.dn{color:var(--ink3)}
.xtwrap{overflow-x:auto; margin-top:14px}
.xt{border-collapse:collapse; width:100%; min-width:640px; font-size:var(--t-sm)}
.xtc{text-align:left; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3); padding-bottom:8px}
.xt th,.xt td{padding:7px 10px; text-align:right; border-bottom:1px solid var(--hair2);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.xt thead th{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); border-bottom:1px solid var(--separator)}
.xt th[scope=row]{text-align:left; font-weight:var(--w-emphasis); white-space:normal; min-width:150px}
.xt tfoot th,.xt tfoot td{border-top:1px solid var(--separator); border-bottom:0; font-weight:var(--w-emphasis)}
.xt td.xc{position:relative}
.xt td.xc::before{content:""; position:absolute; inset:2px 4px; background:var(--ink);
  opacity:calc(var(--heat,0) / 260); pointer-events:none}
.xt td.xc.z{color:var(--ink3)}
.xt td a{position:relative; color:inherit; text-decoration:none; box-shadow:0 1px 0 var(--hair2)}
.xt td a:hover{box-shadow:0 1px 0 var(--ink)}
.xt td.tt,.xt th.tt{font-weight:var(--w-emphasis); border-left:1px solid var(--hair2)}

@media (max-width:680px){
  .rctl2 .cnt{order:3; flex-basis:100%}
  .xt{min-width:520px; font-size:var(--t-xs)}
}

/* ---- Bülten anlatısı (İZ-7) ------------------------------------------------------------ */
/* Kural tabanlı üç cümle. Rakamların üstünde, bölümlerin önünde: haftalık özet önce ne
   olduğunu söylesin, sonra listelesin. */
.bul .bnar{list-style:none; margin:18px 0 4px; padding:0; border-top:1px solid var(--hair2)}
.bul .bnar li{padding:9px 0 9px 18px; border-bottom:1px solid var(--hair2); position:relative;
  font-size:var(--t-sm); line-height:1.5}
.bul .bnar li::before{content:"—"; position:absolute; left:0; color:var(--sig)}
@media print{ .bul .bnar li{break-inside:avoid} }

/* ---- Geniş tablolar için kaydırma sarmalayıcısı (İZ-8) --------------------------------- */
/* Denetimin sabit ölçütlerinden biri "yatay taşma yok". Beş sütunlu bir `.ftbl` 375 px'e
   sığmıyor ve sayfayı genişletiyordu; sütun gizlemek veri kaybettiriyor, bu yüzden tablo
   kendi içinde kayıyor. Masaüstünde davranış değişmez. */
.tw{max-width:100%}
@media (max-width:680px){
  .tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tw > .ftbl{min-width:560px}
  .tw::after{content:"→ tabloyu yana kaydırın"; display:block; padding:6px 0 0;
    font-size:var(--t-2xs); color:var(--ink3)}
}

/* Rapor denetim şeritleri mobilde: on düğmeli gruplama şeridi 375 px'e sığmıyor ve
   sayfayı genişletiyordu (İZ-8). Şerit kendi içinde kayar; düğmeler kırpılmaz. */
@media (max-width:680px){
  .rctl{gap:8px 14px}
  .rctl .sp{display:none}
  .rctl .seg{margin-left:0; flex:1 1 100%; max-width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .rctl .seg button,.rctl .seg a{flex:0 0 auto; min-height:44px; white-space:nowrap}
  .rctl .cnt{flex:1 1 100%}
  .rctl .btn{min-height:44px; display:inline-flex; align-items:center}
}

/* Riske göre sıralama düğmesi (İZ-8, kabul ölçütü 10). `.ftime` ile aynı dil. */
.fbar .frisk{font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2); 
  color:var(--ink3); box-shadow:0 1px 0 var(--hair2)}
.fbar .frisk:hover{color:var(--ink); box-shadow:0 2px 0 var(--ink)}
.fbar .frisk.on{color:var(--ink); box-shadow:0 2px 0 var(--sig)}
@media (max-width:680px){ .fbar .frisk{min-height:44px; display:inline-flex; align-items:center} }

.sh4{margin:26px 0 6px; font-size:var(--t-xs); font-weight:var(--w-emphasis); letter-spacing:var(--tr-caption2);
  color:var(--ink3)}
.spofl{list-style:none; margin:0; padding:0}
.spofl li{display:grid; grid-template-columns:auto auto 1fr; gap:4px 16px; align-items:baseline;
  padding:10px 0; border-top:1px solid var(--hair2)}
.spofl .vn{font-weight:var(--w-emphasis)}
.spofl .cn{font-size:var(--t-xs); color:var(--sig)}
.spofl .il{font-size:var(--t-xs); color:var(--ink3); min-width:0; overflow-wrap:anywhere}
.spofl .il a{color:inherit; text-decoration:none; box-shadow:0 1px 0 var(--hair2)}
.spofl .il a:hover{color:var(--ink)}
@media (max-width:680px){ .spofl li{grid-template-columns:1fr auto} .spofl .il{grid-column:1/-1} }

/* ---- mobil takvim: cipler noktaya doner --------------------------------------
   Onceki hali `.cal .ev{display:none}` idi ve VERIYI YOK EDIYORDU. Olculdu
   (375px): 5 olay `display:none`; yerine beklenen `.more` dugmesi ise YALNIZ
   hucreye sigmayandan fazlasi varsa basiliyor -- gunde 1-2 kalem olan olagan
   durumda gun BOMBOS gorunuyordu. Ustelik `.cell[data-date]` yalniz
   surukle-birak hedefi (app.js), tiklanabilir degil: gune gitmenin yolu da yoktu.
   53px'lik hucrede metin okunmaz; nokta okunur.

   Dokunma hedefi 24x24 (WCAG 2.5.8), gorsel nokta 8px; renk aciliyetten gelir
   (kirmizi Acil / turuncu Yaklasan / gri Uzak -- baslikaki gostergeyle ayni).
   Etiket erisilebilirlik agacinda kalir: `color:transparent` + `overflow:hidden`
   yalniz gorunumu susturur. `font-size:0` KULLANILMADI: projenin olcek kurali
   sabit punto kacagini yasakliyor ve Faz H tarayicisi onu hata sayiyor.

   OZGULLUK 3 SINIF (`.cal .cell .ev`): Apple katmani `.cal .ev`i dosyanin
   ilerisinde (~3160) yeniden tanimliyor; esit ozgullukte olsaydi sira kazanirdi
   ve bu blogu oraya tasimak `test_graphic_is_dropped_on_narrow_screens`in
   "son `@media (max-width:680px)` Faz H'inkidir" varsayimini kiriyordu.

   Hucrenin TAMAMI tiklanabilir yapilmadi: cipler <button>; dis kap da
   tiklanabilir olsaydi dugme-icinde-dugme olurdu -- projenin E0/H7'de bilerek
   kaldirdigi desen. Hedef her kalemin kendisi, dogrudan panelini aciyor. */
@media (max-width:680px){
  .cal .cell{ flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:2px; }
  .cal .cell .dn{ flex:0 0 100%; margin-bottom:1px; }
  .cal .cell .ev{
    position:relative; display:inline-block; vertical-align:top;
    width:24px; height:24px; min-width:24px; padding:0; margin:0;
    border:0; background:none; border-radius:50%;
    overflow:hidden; color:transparent;
  }
  .cal .cell .ev::before{
    content:""; position:absolute; top:50%; left:50%;
    width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
    background:var(--orange-fill);
  }
  /* `.cal .ev.calm` (3 sinif, dosyada ilerideki Apple katmani) rengi geri
     veriyordu ve esit ozgullukte sonra geldigi icin kazaniyordu: gri gunlerde
     metin soluk soluk siziyordu ("A●."). 4 sinifla kapatilir. */
  .cal .cell .ev.calm{ color:transparent; }
  .cal .cell .ev.sig::before{ background:var(--red-fill); }
  .cal .cell .ev.calm::before{ background:var(--gray-fill); }
  .cal .cell .ev.dn{ opacity:.4; text-decoration:none; }
  .cal .cell .ev:hover, .cal .cell .ev:focus-visible{ background:var(--fill-4); }
  .cal .cell .more{ flex:0 0 100%; }
}

/* ============ Faz H: imza grafiği — 18 aylık dağılım ============
   Manşetin sağında ~840 px boş duruyordu. Veri zaten vardı ama "Zaman" düğmesinin
   arkasına saklıydı; kimse basmadan yılın şeklini göremiyordu. Artık kalıcı olarak
   manşette: her sütun bir ay, yükseklik o ayın kalem sayısı, renk aciliyet katmanı
   (sinyal / mürekkep / sessiz). Her sütun o ayı süzen bir düğme.
   Zaman düğmesi artık yalnız kaydırıcıyı açar — şerit iki kez çizilmiyor. */
.sig18{margin-left:auto; display:flex; flex-direction:column; gap:7px;
  flex:0 1 clamp(300px,38vw,560px); min-width:0; align-self:flex-end; padding-bottom:2px;
  /* ŞERİDİN TAMAMI tutamak (Faz 2), dolayısıyla yatay hareket BİZE ait olmalı.
     Yalnız eksen `pan-y` taşıyordu; dokunmatikte sütunların üstünden başlayan
     sürüklemeyi tarayıcı kaydırma sanıp `pointercancel` atıyordu — imza hareket
     parmağın girdiği yere göre bazen çalışıyordu. Dikey kaydırma serbest kalır. */
  touch-action:pan-y}
.s18h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.s18h .up{color:var(--ink3)}
.s18h .m{font-size:var(--t-2xs); color:var(--ink3); white-space:nowrap}
/* 58 -> 50: serit artik mansetin icinde ve ilk satiri asagi itiyor. 50 px'te
   en yogun ay hala okunuyor (en kucuk dolu sutun 3 px), 46'da tabani kayboluyor. */
.s18c{display:flex; align-items:stretch; gap:2px; height:50px}
.s18b{flex:1 1 0; min-width:0; height:100%; padding:0; display:flex; flex-direction:column;
  gap:4px; align-items:stretch; transition:opacity var(--d-micro) var(--e-out)}
.s18b .stack{display:flex; flex-direction:column; justify-content:flex-end; flex:1; min-height:0;
  border-bottom:1px solid var(--hair)}
.s18b .stack i{display:block; width:100%; min-height:1px}
.s18b s{text-decoration:none; height:12px; font-size:var(--t-2xs);
  line-height:1; letter-spacing:var(--tr-caption2); color:var(--ink3); white-space:nowrap; overflow:visible}
.s18b:hover .stack{border-bottom-color:var(--ink)}
.s18b:hover s{color:var(--ink)}
.s18b.zero .stack{opacity:.5}
.s18b[aria-pressed="true"] .stack{border-bottom:2px solid var(--sig)}
.s18b[aria-pressed="true"] s{color:var(--sig)}
/* Bir ay seçiliyken diğerleri geri çekilir: seçim şeridin şeklinden okunsun. */
.s18c:has(.s18b[aria-pressed="true"]) .s18b:not([aria-pressed="true"]){opacity:.42}

/* --- VADE Faz 2: seridin kendisi kaydirici --------------------------------
   Ayri bir `<input type=range>` yoktu artik; eksen hem zaman cizgisi hem
   tutamak. Gorunur bir tutamak KOYULMADI: plan "tutamak yok, seridin kendisi
   tutamaktir" diyor ve iki tutamak (bar + thumb) ayni enstrumani iki kez
   cizmek olurdu -- B1'in sikayeti tam buydu. */
.s18ax{position:relative; height:14px; margin-top:2px; cursor:ew-resize; touch-action:pan-y}
.s18ax::before{content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:var(--rule)}
.s18ax:focus-visible{outline:2px solid var(--sig); outline-offset:3px; border-radius:2px}
/* Bugun: sert dikey. B1'in en somut kusuru "seritte bugun isareti yok"tu. */
.s18now{position:absolute; top:0; width:1px; height:13px; background:var(--ink); translate:-50% 0}
.s18now::after{content:"bugün"; position:absolute; left:50%; top:13px; translate:-50% 0;
  font-size:var(--t-2xs); letter-spacing:var(--tr-caption2); color:var(--ink3); white-space:nowrap}
/* Oynatma kafasi: yalniz baska bir gune bakilirken. */
.s18head{position:absolute; top:1px; width:2px; height:11px; background:var(--sig); translate:-50% 0}
.s18head.hid{display:none}
.s18ax:hover::before{background:var(--hair2)}
/* Tiklanabilir: en kucuk basamak SUSE ayrilmis (Faz 3 kurali), bu bir dugme. */
.s18h .ix{font-size:var(--t-xs); letter-spacing:var(--tr-caption2); color:var(--sig); white-space:nowrap}
.s18h .mq{white-space:nowrap}
.sig18.dragging{cursor:ew-resize; user-select:none}

/* ---- VADE Faz 6: acik yuz ------------------------------------------------
   Tanitim sayfasi uygulamanin KENDI diliyle yazilir: ayni jetonlar, ayni yazi
   tipleri, ayni olcu. Editoryal ses (`--display`) Faz 1'de iki yere ayrilmisti
   (manset cumlesi ve bulten basligi); burasi ucuncu ve sonuncu — acik yuzun
   basligi da bir manset. */
/* Olcu ARTIK KAPTA DEGIL, cocuklarinda: acilis gorseli ekranin iki kenarina
   dokunmali, metin ise 720 pikselde kalmali. `100vw` kullanilmiyor -- masaustunde
   kaydirma cubugunu da sayar ve sayfayi yatayda tasirirdi.
   Yan bosluk SART: `bare.html`in `#view`i `.page` sarmalayicisi tasimiyor, yani
   dar ekranda metin kenara yapisiyordu (olculdu: 375 px'te 0 px). */
.tanit{padding:clamp(40px,7vh,96px) 0 120px}
.tanit>header,.tanit>section,.tanit>footer,.tanit>.tntcta{
  max-width:720px; margin-inline:auto; padding-inline:var(--pad)}
.tanit .up{color:var(--ink3)}
.tanit h1{font-family:var(--display); font-size:clamp(28px,4.4vw,46px); font-weight:var(--w-emphasis);
  letter-spacing:-.03em; line-height:1.08; margin:14px 0 18px}
.tanit .lede{font-size:var(--t-lg); color:var(--ink2); line-height:1.5; margin:0 0 26px; max-width:56ch}
.tntcta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:clamp(22px,3vh,34px)}

/* ---- Acilis gorseli: portfoyun kendisi -----------------------------------
   Denetimin bulgusu sanat yonuydu; karsiligi bir sus degil, VERI oldu. Uydurma
   portfoyun her kaydi gercek gun mesafesiyle tek eksende duruyor (gorunumun
   kaynagi `showcase/views.py::_portre`, sayilarin kaynagi `showcase/portfoy.py`).

   Iki karar:
   * `preserveAspectRatio="none"` -- eksen ekranin genisligine yayilir; icinde
     metin olmadigi icin bagimsiz olcekleme hicbir glifi bozmaz.
   * `vector-effect:non-scaling-stroke` -- o esnemede cizgi KALINLIGI sabit
     kalir. Olculdu: dikdortgenle cizildiginde 375 px'te cubuklar 0,6 piksele
     dusuyor ve rampa goze gorunmez oluyordu.
   Renk ikinci bir tablodan degil, rampanin kendisinden: `.vd-*` `color` yaziyor,
   cubuk da `stroke:currentColor` okuyor. */
.tntport{margin:clamp(34px,5.5vh,60px) 0 0}
.tntsky{display:block; width:100%; height:clamp(148px,25vh,250px); overflow:visible}
.tntsky line{vector-effect:non-scaling-stroke; stroke-linecap:butt}
.tntbar line{stroke:currentColor; stroke-width:3}
.tntyil line{stroke:var(--separator); stroke-width:1}
.tnttab{stroke:var(--hair2); stroke-width:2}
.tntnow{stroke:var(--red); stroke-width:3}
.tntcap{max-width:720px; margin:14px auto 0; padding-inline:var(--pad);
  font-size:var(--t-xs); color:var(--ink3); line-height:1.5}
.tntb{color:var(--ink2); font-weight:var(--w-emphasis)}
@media (max-width:680px){
  /* 70 cubuk 335 pikselde 3'er piksel kalinlikta cizilseydi bant dolu bir blok
     olurdu; olculdu: %60 murekkep. Kalinlik duser, dagilim okunur kalir. */
  .tntbar line{stroke-width:1.6}
  .tntsky{height:clamp(120px,20vh,170px)}
}
.tnts{margin-top:clamp(40px,6vh,72px)}
.tnts h2{font-size:var(--t-lg); font-weight:var(--w-emphasis); letter-spacing:-.02em; margin:0 0 10px}
.tnts p{font-size:var(--t-sm); color:var(--ink2); line-height:1.62; margin:0 0 12px; max-width:62ch}
/* Rampanin kendisi ornek: sayfa uygulamanin jetonlarini KULLANARAK anlatiyor. */
.tntramp{display:flex; gap:clamp(14px,3vw,34px); align-items:baseline; flex-wrap:wrap;
  font-family:var(--num); font-weight:var(--w-emphasis); font-size:var(--t-xl);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:18px}
.tntramp i{font-style:normal; font-size:.62em; opacity:.72; margin-left:1px}
/* Minyatür: uygulamanın sınıflarını kullanır ama satırı DÖRT hücrelidir
   (radarınki beş). Kendi ızgarası olmasa başlık sütunu 0 px'e çöküyordu. */
.tntdemo{margin-top:22px}
.tntdemo .lead{padding-top:0; border-bottom:0}
/* Özgüllük: satırın kendi ızgarası (`.rw.warm .rwb`) dosyanın İLERİSİNDE
   yeniden tanımlanıyor (Martian sütunları); eşit özgüllükte sıra onu kazandırır. */
.tanit .tntdemo .rw .rwb{display:grid; align-items:center; column-gap:clamp(12px,1.6vw,24px);
  grid-template-columns:112px minmax(0,1fr) 148px 96px; padding:9px var(--row-end) 8px 0; width:100%}
.tntdemo .rw:hover{background:none}
.tntdemo .sig18{flex-basis:clamp(260px,32vw,420px)}
.tntdemo .grp{margin-bottom:0}
@media (max-width:680px){
  /* Dört hücre 335 px'e sığmıyor (112+148+96+boşluk = 356). Firma sütunu düşer —
   uygulamanın kendi telefon satırı da aynı kararı veriyor. */
  .tanit .tntdemo .rw .rwb{ grid-template-columns:86px minmax(0,1fr) 92px }
  .tntdemo .rw .c{ display:none }
  .tntdemo .lead{ gap:0 }
}
.tntf{margin-top:clamp(48px,8vh,96px); padding-top:16px; border-top:1px solid var(--separator);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}

/* ---- VADE Faz 5: bakış durumu -------------------------------------------
   Sürüklerken kovaların ADI çözülür. Kova "bugüne göre" bir addır; bakılan gün
   değişince "Gecikti" başlığının altında `+5g` bir satır durabilirdi — ekranda
   bir çelişki. Kutular (yerleşim) kalır, etiketler solar: geriye programın
   tezi kalır — kayıtlar tek bir zaman ekseni üzerinde noktalardır. Bırakınca
   adlar geri gelir.

   Yükseklik DEĞİŞMEZ (`opacity`, `display` değil): bakış sırasında liste
   zıplarsa parmağın altındaki satır kayar. */
#view.peeking .sec .nm, #view.peeking .sec .ct{opacity:.18}
.sec .nm, .sec .ct{transition:opacity var(--d-quick) var(--ease)}
/* Çizgi bakış boyunca iki satır ARASINA giriyor, yani `.grp` kartının içine;
   kartın `overflow:hidden`ı yapışkanlığı orada anlamsız kılar. */
#view.peeking .tdl{position:static}
/* Sürüklemenin ne yaptığını SÖYLEYEN tek yer; yalnız bakış sırasında görünür. */
.sp18{display:none}
#view.peeking .sp18{display:inline}
#view.peeking .s18h .mq,#view.peeking .s18h .ix{display:none}

@media (max-width:900px){
  .sig18{flex-basis:clamp(240px,34vw,380px)}
  .s18c{height:46px}
  .s18h .m{display:none}
}


/* ---------------------------------------------------------------------------
   Kullanici yonetimi: uye rehberi, yetki rozetleri, yonetim paneli, sayfalama.
   Kullanici karari 09.09.2026. Yeni belirtec TANIMLANMIYOR; hepsi tokens.css
   uzerinden okunuyor (kok degiskenler yalniz orada yasar).
   --------------------------------------------------------------------------- */

/* Suzgec cubugu: alanlar taban cizgisinde hizali, dar ekranda sarilir. */
.uyfil{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-4); margin:0 0 var(--sp-5); }
.uyfil .srch{ width:min(280px,100%); }
.uyf{ display:grid; gap:2px; font-size:var(--t-caption2); color:var(--ink3); }
.uyf select{ font-size:var(--t-footnote); color:var(--ink); border-bottom:1px solid var(--hair2); padding:2px 0 4px; min-height:30px; }
.uysay{ margin-left:auto; font-size:var(--t-caption2); color:var(--ink3); white-space:nowrap; }

/* Ikincil satir: e-posta, unvan, telefon. Ad ile ayni agirlikta olursa ikisi de
   okunmaz olur; hiyerarsi boyut ve renkle kuruluyor. */
.uysub{ display:block; margin-top:2px; font-size:var(--t-caption2); color:var(--ink3); }

/* Yetki rozetleri: dort harf, kapali olan nokta. Renk tek basina anlam tasimaz
   (WCAG 1.4.1) — kapali olan harfi de kaybediyor, yani fark bicimde de var. */
/* AS-4: harf sutunu yerine rolden SAPMA. Harfler okunamiyordu (altinin ikisi ayni
   harfti) ve okunsa bile "bu kiside ne FARKLI" sorusunu cevaplamiyordu. */
.uyyet{ max-width:220px; }
.uysap{ display:block; font-size:var(--t-caption2); color:var(--ink3); white-space:nowrap; }
.uysap.on{ color:var(--ink2); font-weight:var(--w-emphasis); }
.uyozet{ flex:1 1 100%; margin:4px 0 0; padding:0 0 0 16px; list-style:disc;
  font-size:var(--t-caption2); color:var(--ink3); line-height:1.6; }
.uyozel{ margin:10px 0 0; }
.uyozel > summary{ padding:6px 0; min-height:34px; }

/* Bildirim bolumleri katlanir (AS-6). On bir kategori tek sayfada elli anahtar
   ediyordu (2.562 px). Basliga kac kategorinin acik oldugu yaziliyor ki katli
   bolumun icini gormeden durumu okunabilsin. */
.bsec{ margin:0 0 6px; }
.bsec > summary{ display:flex; align-items:baseline; gap:10px; cursor:pointer; list-style:none;
  padding:10px 0; min-height:44px; border-bottom:1px solid var(--hair);
  font-size:var(--t-sm); font-weight:var(--w-emphasis); color:var(--ink2); }
.bsec > summary::-webkit-details-marker{ display:none; }
.bsec > summary::before{ content:"+"; font-size:var(--t-lg); line-height:1; color:var(--ink3); }
.bsec[open] > summary::before{ content:"\2212"; }
.bsec > summary:hover{ color:var(--ink); }
.bsec > summary:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; }
.bsec-n{ margin-left:auto; font-size:var(--t-caption2); font-weight:var(--w-regular); color:var(--ink3); }

/* Satir ici yonetim paneli. <details> secildi cunku JS'siz calisir ve klavyeyle
   gezilir; satirlarin hepsini birden acik tutmak 25 uyede tabloyu okunmaz yapardi. */
.uym{ display:inline-block; text-align:left; }
.uym > summary{ cursor:pointer; font-size:var(--t-caption2); font-weight:var(--w-emphasis); color:var(--ink2); list-style:none; padding:4px 8px; border:1px solid var(--hair); min-height:30px; display:inline-flex; align-items:center; }
.uym > summary::-webkit-details-marker{ display:none; }
.uym > summary:hover{ background:var(--wash); color:var(--ink); }
.uym[open] > summary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.uymb{ display:grid; gap:var(--sp-3); margin-top:var(--sp-3); padding:var(--sp-4); border:1px solid var(--hair); background:var(--wash); min-width:min(420px,72vw); }
.uyalt{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin:0; font-size:var(--t-footnote); }
.uyalt + .uyalt{ padding-top:var(--sp-3); border-top:1px solid var(--hair2); }
.uyalt label:not(.chk){ font-size:var(--t-caption2); color:var(--ink3); letter-spacing:var(--tr-caption2); }
.uyl{ font-size:var(--t-caption2); color:var(--ink3); letter-spacing:var(--tr-caption2); }
.uyipuc{ flex:1 1 100%; font-size:var(--t-caption2); color:var(--ink3); }

/* Davet formu ve toplu liste alani. */
.uydav{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin:var(--sp-3) 0; }
.uydav input[type="text"]{ flex:1 1 200px; min-width:0; border-bottom:1px solid var(--hair2); padding:4px 0 6px; font-size:var(--t-footnote); min-height:34px; }
.uydav input:focus{ border-bottom-color:var(--ink); }
.uytop{ width:100%; font-size:var(--t-footnote); line-height:1.55; padding:var(--sp-3); border:1px solid var(--hair); background:var(--paper); color:var(--ink); }

/* Sayfalama. */
.pgn{ display:flex; align-items:center; justify-content:center; gap:var(--sp-5); margin:var(--sp-5) 0; font-size:var(--t-footnote); color:var(--ink3); }
.pgn a{ color:var(--ink2); font-weight:var(--w-emphasis); }
.pgn a:hover{ color:var(--ink); }

@media (max-width:680px){
  /* Dokunma hedefi 44 px (Apple HIG); suzgec ve panel tek sutuna iner. */
  .uyfil{ gap:var(--sp-3); }
  .uyfil .srch, .uyf, .uyf select{ width:100%; }
  .uyf select{ min-height:44px; }
  .uymb .chk{ min-height:44px; }
  .uysay{ margin-left:0; }
  .uym > summary{ min-height:44px; padding:0 12px; }
  .uymb{ min-width:0; }
  .uyalt{ gap:var(--sp-2); }
  .uydav input[type="text"]{ flex:1 1 100%; min-height:44px; }
  .pgn{ gap:var(--sp-4); }
}

/* ---------------------------------------------------------------------------
   Ayarlar yardimci siniflari. Denetim (09.09.2026) ayar sablonlarinda 98 satir
   ici `style=` saymisti; ayni deger onlarca yerde tekrar ediyordu ve degistirmek
   icin her sablonu tek tek acmak gerekiyordu. En sik 12 kalip burada.
   Deger uretmiyorlar, yalnizca tokens.css'i tasiyorlar.
   --------------------------------------------------------------------------- */
.u-dim{ color:var(--ink3); }
.u-b{ font-weight:var(--w-emphasis); }
.u-normal{ font-weight:var(--w-regular); }
.u-sm{ font-size:var(--t-sm); }
.u-note{ font-size:var(--t-xs); color:var(--ink3); }
.u-sub{ display:block; margin-top:2px; font-size:var(--t-xs); color:var(--ink3); }
.u-inline{ display:inline; }
.u-ml{ margin-left:var(--sp-3); }
.u-ml-sm{ margin-left:var(--sp-2); }
.u-mt{ margin-top:var(--sp-2); }
.u-gap{ margin-top:var(--sp-8); }
.u-row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.u-nowrap{ white-space:nowrap; }
.u-hair{ border-top:1px solid var(--hair2); }
.u-w-sm{ width:80px; }
.u-w-md{ width:160px; }
.u-w-lg{ width:min(560px,100%); }

/* ============================================================================
   VADE — Faz 1: iki yüz, iki rol (Vade programı, 09.09.2026)
   ============================================================================
   Tanı: zanaat kusursuzdu ama ekran Apple'ın uygulaması gibi görünüyordu,
   DateControl'ün uygulaması gibi değil. Proje önce Swiss'i ödünç aldı, sildi,
   yerine Apple'ı ödünç aldı; ikisi de ödünçtü. Kimlik, ürünün KENDİ malzemesinden
   gelmeli — ve bu üründe iki malzeme var:

     1. İşaretli gün mesafesi (−152g, +23g). DateControl'ün tek özgün ölçü
        birimi; her satırda tekrarlanıyor. Sistem yazı tipinin tabular
        rakamlarıyla çizilince "bir sütun daha" oluyor.
     2. Manşet cümlesi ("en eskisi 152 gündür açık", "Mayıs 2027'de 13 yenileme
        yığılıyor — ortalamanın 3,6 katı"). Kopya zaten iyi yazılmış; 15px'te
        bir alt satır gibi duruyordu.

   Bu iki yer dışında hiçbir şey değişmez. Gövde, form, tablo, menü ve kenar
   çubuğu `system-ui`da kalır. Jetonlar tokens.css'te (`--num`, `--display`).   */

/* ---- öz birim: işaretli gün mesafesi ---------------------------------------
   Ölçüldü (canvas TextMetrics, 100px): Martian Mono ilerleme genişliği 0.70em —
   Menlo 0.602, sistem tabular rakamları ~0.56. Yani %16–25 daha geniş. İki sonuç:

   · Harf aralığı −.045em → −.02em. Geniş bir mono'yu sıkı aralıkla çizmek onu
     okunmaz yapar; genişliğin bir kısmı zaten yüzün kendisinden geliyor.
   · Rakam sütunları genişler. Ölçülen en kötü durum dört basamak + işaret +
     birim ("−1234g"); aşağıdaki değerler o dizgeye göre, +8px nefes payıyla.
   `font-variant-numeric:tabular-nums` DURUYOR: Martian zaten eşit genişlikli
   ama tercih `data-num="sans"` ile sistem yazı tipine düştüğünde gerekiyor. */
.rw .d, .pv .d, .tbl td.n.b, .foc .n{ font-family:var(--num); }
.rw .d{ letter-spacing:-.02em; }
.foc .n{ letter-spacing:-.03em; }

/* Sütun genişlikleri: 106/98/90 → 124/112/100. Yalnız rakam sütunu büyür,
   başlık sütunu `minmax(0,1fr)` olduğu için farkı kendisi yutar. */
.rw.hot  .rwb,.tdl{ grid-template-columns:124px minmax(0,1fr) 176px 150px 96px; }
.rw.warm .rwb{ grid-template-columns:112px minmax(0,1fr) 176px 150px 96px; }
.rw.cool .rwb{ grid-template-columns:100px minmax(0,1fr) 176px 96px; }
@media (max-width:1100px){
  .rw.hot .rwb,.rw.warm .rwb,.tdl{ grid-template-columns:104px minmax(0,1fr) 150px 96px; }
}


/* Birim `g` Martian'da da geride durur; ölçek kuralı yukarıdaki `.d i`de. */

/* ---- editoryal ses: manşet cümlesi ve bülten başlığı ------------------------
   `--display` YALNIZ bu iki yerde. Boş durum ve panorama başlığı Faz 2'de
   katılacak; şimdi katmak, düzen değişmeden önce iki farklı ölçüde iki farklı
   ritim demek olurdu. */
.foc .l{ font-family:var(--display); font-weight:700; letter-spacing:-.025em; }
.bul .bh h2{ font-family:var(--display); font-weight:700; }

@media (max-width:680px){
  /* Telefonda punto KÜÇÜLMEZ, büyür: dokunma ölçeğinde `--t-title1` 1.75rem
     (28px). 28px Martian'da "−152g" ≈ 88px sürüyor, dört basamaklı en kötü
     durum ≈ 107px. 375px'lik bir ekranda rakama 107px vermek başlığı yok eder.
     Karar: telefonda gecikmiş satırın rakamı bir basamak iner (title1 → title3,
     28 → 20px). Martian 20px'te sistem yazı tipinin 24px'i kadar yer kaplıyor,
     yani görsel ağırlık kaybolmuyor — yalnız sürüklediği genişlik düşüyor. */
  .rw.hot .d{ font-size:var(--t-lg); }
  .rw.hot .rwb,.rw.warm .rwb,.rw.cool .rwb,.tdl{ grid-template-columns:92px minmax(0,1fr) 88px; }
}

/* ============ Notlar (NOTLAR-PLANI) ============
   İki bölme: solda liste, sağda not. Klasör ağacı uygulamanın kendi kenar
   çubuğunda — Apple'ın üç bölmesi dördüncü sütun açmadan kuruluyor (§10.2).
   Radar'ın tablo dili buraya gelmiyor: liste bir dizin, not bir belgedir. */

/* Liste kenar çubuğunun ayırıcısına YASLANIR (sol negatif kenar boşluğu), not bölmesi
   sayfanın kendi sağ boşluğunu KORUR. İkisine birden negatif vermek, sağ üstteki
   eylemleri ekranın kenarına yapıştırıyordu (ölçüldü: 1406 px'te 15 px kalıyordu). */
.ndesk{display:grid; grid-template-columns:var(--nl-w,320px) minmax(0,1fr); gap:0;
  min-height:calc(100dvh - var(--tb-h,64px)); margin-left:calc(-1 * var(--pad,0px))}
.nlist{border-right:1px solid var(--hair); min-width:0; display:flex; flex-direction:column;
  padding:0 var(--sp-4) 0 var(--sp-3)}
.npane{min-width:0; padding:0 0 80px var(--sp-6)}

.nlh{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) 0 var(--sp-2)}
.nlt{font-size:var(--t-lg); font-weight:var(--w-emphasis); letter-spacing:-.02em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nlh .sp{flex:1}
.ninline{display:inline-flex; align-items:center; gap:var(--sp-2)}
.nnew{flex:none; background:none; border:1px solid var(--hair2); border-radius:var(--radius-pill); cursor:pointer;
  width:32px; height:32px; font-size:var(--t-lg); line-height:1; color:var(--ink2);
  display:inline-flex; align-items:center; justify-content:center}
.nnew:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.nlbar{display:flex; flex-direction:column; gap:var(--sp-2); padding-bottom:var(--sp-3)}
.nqchip{margin:0; font-size:var(--t-xs); color:var(--ink2)}
.nlopt{display:flex; gap:var(--sp-2); flex-wrap:wrap}
.nlopt select{flex:1 1 auto; min-width:110px; max-width:none; background:none; border:0;
  font-size:var(--t-xs); color:var(--ink3); padding:2px 0}
.nlopt form{flex:1 1 auto; min-width:0}
.nlopt select:hover{color:var(--ink)}
.nldesc{font-size:var(--t-xs); color:var(--ink3); line-height:1.55; margin:0 0 var(--sp-3)}

.nrows{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}
/* Tarih omurgası: grup başlığı yapışkan, liste kaydırılırken hangi gün olduğu kaybolmaz. */
.ngh{position:sticky; top:0; z-index:1; background:var(--bg-grouped); margin:0;
  padding:var(--sp-3) 0 var(--sp-1); font-size:var(--t-xs); font-weight:var(--w-emphasis);
  letter-spacing:var(--tr-caption2); color:var(--ink3)}
.nmore{font-weight:var(--w-regular); text-transform:none; letter-spacing:0; position:static}

a.nrow{display:block; padding:10px 12px 11px; border-radius:var(--radius-sm); color:inherit;
  text-decoration:none; border:0}
a.nrow:hover{background:var(--wash)}
a.nrow.on{background:var(--wash2)}
a.nrow.on .nrt{color:var(--ink)}
.nrt{display:block; font-size:var(--t-sm); font-weight:var(--w-emphasis); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nrx{display:block; font-size:var(--t-xs); color:var(--ink2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nrm{display:block; font-size:var(--t-xs); color:var(--ink3); margin-top:3px}
.nrb{font-style:normal; color:var(--sig); margin-left:6px}
.nrt .pin{display:inline-block; width:6px; height:6px; background:var(--sig); margin-right:7px;
  vertical-align:middle}
.nempty{margin:var(--sp-6) 0}
.nsel{margin:var(--sp-8) 0}

/* ---- not bölmesi ---- */
.nback{display:none}
.nph{display:flex; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-5) 0 var(--sp-2);
  flex-wrap:wrap}
.nkunye{flex:1; min-width:200px; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px;
  margin:0; font-size:var(--t-xs); color:var(--ink3)}
.nkunye .nsep{opacity:.5}
.nkunye .own{color:var(--sig)}
.nsaved{color:var(--ink3); font-variant-numeric:tabular-nums}
.nsaved.bad{color:var(--sig)}
.npa{display:flex; gap:var(--sp-2); flex-wrap:wrap}
.nkunye2{font-size:var(--t-xs); display:flex; gap:14px; flex-wrap:wrap; margin:0 0 var(--sp-3)}

.ntags{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; padding-bottom:var(--sp-3)}
.ntag{display:inline-flex; align-items:center; gap:4px; background:var(--wash);
  border-radius:var(--radius-pill); padding:3px 4px 3px 11px; font-size:var(--t-xs)}
.ntag a{color:var(--ink2); text-decoration:none}
.ntag a:hover{color:var(--sig)}
/* Kaldırma işareti boyutu ÇİPTEN miras alır: en küçük basamak (10px) süs için
   ayrılmış ve çipin kendi ✕'i zaten o listede (Faz 3 punto merdiveni). */
.ntag .x{background:none; border:0; cursor:pointer; color:var(--ink3);
  min-width:20px; min-height:20px; border-radius:var(--radius-pill)}
.ntag .x:hover{color:var(--sig)}
.ntagadd input{background:none; border:0; border-bottom:1px dashed var(--hair2); font-size:var(--t-xs);
  padding:3px 0; width:92px; color:var(--ink)}

/* Araç çubuğu: ilk ekranda yedi denetim, kalanı ⋯ altında (sadelik bütçesi §4). */
.nbar{position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  background:var(--bg-grouped); padding:var(--sp-2) 0; border-bottom:1px solid var(--hair);
  margin-bottom:var(--sp-4)}
.nbar button{background:none; border:0; border-radius:var(--radius-sm); cursor:pointer;
  font-size:var(--t-sm); color:var(--ink2); min-width:32px; min-height:32px;
  display:inline-flex; align-items:center; justify-content:center}
.nbar button:hover{background:var(--wash); color:var(--ink)}
.nblok{background:none; border:0; font-size:var(--t-xs); color:var(--ink2); padding:4px 6px;
  margin-right:var(--sp-2)}
.nmore{position:relative}
.nmore>summary{list-style:none; cursor:pointer; min-width:32px; min-height:32px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink2);
  border-radius:var(--radius-sm)}
.nmore>summary::-webkit-details-marker{display:none}
.nmore>summary:hover{background:var(--wash)}
.nmorem{position:absolute; right:0; top:calc(100% + 4px); z-index:6; background:var(--bg-3, var(--paper));
  box-shadow:0 1px 0 var(--hair) inset, 0 8px 24px rgba(0,0,0,.12); border-radius:var(--radius-md);
  padding:var(--sp-2); display:flex; flex-direction:column; min-width:200px}
.nmorem button{justify-content:flex-start; padding:0 var(--sp-3); font-size:var(--t-xs);
  min-height:34px; width:100%}

/* ---- gövde ---- (taban tipografi yukarıdaki .nbody bloğunda) */
.ned{outline:0; min-height:46vh; padding-bottom:var(--sp-8)}
.ned:focus{outline:0}
.ned:empty::before{content:attr(data-empty); color:var(--ink3)}
.nbody img{max-width:100%; height:auto; border-radius:var(--radius-sm); display:block; margin:var(--sp-4) 0}
.nbody mark{background:#FFE9A8; color:inherit; padding:0 2px}
:root[data-theme="dark"] .nbody mark{background:#6B5A18; color:var(--ink)}
/* Kontrol listesi: kutu ::before ile, tıklama alanı satırın sol 26 piksellik şeridi. */
.nbody ul.todo{list-style:none; padding-left:0}
.nbody ul.todo>li{position:relative; padding-left:28px; margin-bottom:7px}
/* Kutunun durumu SESLİ de okunmalı. Gövdenin izin listesinde `aria-*` yok (ve olmamalı:
   yazarın eline bırakılan bir öznitelik uygulama düğümleriyle çakışır), bu yüzden durum
   CSS'in alternatif metin sözdizimiyle veriliyor: `content: "" / "metin"`. Desteklemeyen
   bir tarayıcıda yalnız çizim kalır — bilgi kaybı yok, ek bilgi yok. */
.nbody ul.todo>li::before{content:"" / "yapılacak"; position:absolute; left:0; top:.3em;
  width:16px; height:16px; border:1.6px solid var(--hair2); border-radius:var(--radius-pill);
  cursor:pointer}
.nbody ul.todo>li.done::before{content:"" / "tamamlandı";
  background:var(--tint-solid,var(--tint)); border-color:var(--tint-solid,var(--tint))}
.nbody ul.todo>li.done::after{content:""; position:absolute; left:5px; top:calc(.3em + 4px);
  width:5px; height:9px; border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(45deg)}
.nbody ul.todo>li.done{color:var(--ink3)}

/* Not seçici ([[ → gerçek bağlantı) */
.npick{position:relative; max-width:72ch; margin:var(--sp-2) 0 var(--sp-4);
  box-shadow:inset 0 0 0 1px var(--hair2); border-radius:var(--radius-sm); padding:var(--sp-2)}
.npq{width:100%; background:none; border:0; border-bottom:1px solid var(--hair);
  padding:7px 4px; font-size:var(--t-sm); color:var(--ink)}
.npres{list-style:none; margin:var(--sp-2) 0 0; padding:0}
.npadd{display:flex; align-items:baseline; gap:12px; width:100%; text-align:left; background:none;
  border:0; cursor:pointer; font:inherit; font-size:var(--t-sm); color:var(--ink); padding:8px 10px;
  min-height:38px; border-radius:var(--radius-sm)}
.npadd:hover{background:var(--wash)}
.npadd .m{font-size:var(--t-xs); color:var(--ink3); margin-left:auto}

/* ---- kuyruk ---- */
.ntail{max-width:72ch; margin-top:var(--sp-8); border-top:1px solid var(--hair); padding-top:var(--sp-2)}
.nremind .nrl{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--t-sm);
  margin:var(--sp-3) 0}
.nremind .nrl b{font-weight:var(--w-emphasis)}
.nremind .nrl.done{color:var(--ink3)}
.nremind .nrl em{font-style:normal; font-size:var(--t-xs); color:var(--ink3)}
.ntrashbar{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--t-sm);
  background:var(--wash); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-4) 0; box-shadow:inset 3px 0 0 var(--sig)}
.ntrashbar .sp{flex:1}
.nbaglar{display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-3) 0}
.nwarn{font-size:var(--t-xs); color:var(--ink3); line-height:1.55; margin:0 0 var(--sp-4)}
.nwarn b{color:var(--sig)}

/* Kenar çubuğundaki klasör ağacı: üç kat, iki kademe girinti (Apple kuralı). */
.sbnot .sbi.d2{padding-left:30px}
.sbnot .sbi.d3{padding-left:44px}
.sbadd{padding:6px 12px}
.sbadd input{width:100%; background:none; border:0; font-size:var(--t-xs); color:var(--ink3); padding:4px 0}
.sbadd input:focus{color:var(--ink)}

/* ---- dar ekran: liste ve not aynı sütunda, seçilen öne gelir ---- */
@media (max-width:1079px){
  .ndesk{grid-template-columns:minmax(0,1fr)}
  .nlist{border-right:0; padding-right:0}
  .npane{padding-left:0}
  .ndesk[data-open="1"] .nlist{display:none}
  .nback{display:inline-flex; align-items:center; min-height:44px; font-size:var(--t-sm);
    color:var(--tint); text-decoration:none; padding-top:var(--sp-3)}
  .ndesk:not([data-open="1"]) .npane{display:none}
  .nrows{overflow:visible}
}
@media (max-width:680px){
  /* Araç çubuğu telefonda SARMAZ, kendi içinde kayar: sarınca `⋯` tek başına ikinci
     satıra düşüyor ve çubuk bozuk görünüyordu. Kayma çubuğun İÇİNDE, sayfa taşmıyor. */
  .nbar{position:sticky; top:0; padding:6px 0; flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; overscroll-behavior-x:contain}
  .nbar::-webkit-scrollbar{display:none}
  .nbar button,.nmore>summary{min-width:44px; min-height:44px; flex:none}
  .nblok{flex:none}
  .nmore{position:static}
  .nmorem{right:auto; left:var(--sp-4)}
  .nnew{width:44px; height:44px}
  .ntagadd input,.npq{min-height:44px}
  a.nrow{min-height:56px}
  .ntag .x{min-width:32px; min-height:32px}
  .ned{min-height:38vh}
}

/* Not: Notlar bloğu imza bloğundan ÖNCE duruyor. Dosyanın SON
   `@media (max-width:680px)` bloğu imzanınki olmak zorunda —
   `test_faz_h_signature` onu `rindex` ile buluyor (bkz. test_uygulama_denetimi). */
@media (max-width:680px){
  /* İMZA TELEFONDA DA VAR (ödül denetimi, 12.09.2026).
     Şerit burada GİZLİYDİ ve gerekçesi doğruydu: 375 px'te on sekiz sütun 20 px'e
     düşüyor, ne okunur ne dokunulur (44 px kuralı). Ama o kural DOKUNMA HEDEFİ
     içindir — sürükleme yüzeyi için değil. Programın imza hareketi (Faz 5) bir
     sürüklemedir ve 20 px'lik sütunlara ihtiyacı yoktur.
     Karar: telefonda sütunlar İŞARETÇİYE KAPANIR (histograma döner, klavye ve
     ekran okuyucu için düğme kalmaya devam eder) ve şerit tek bir sürükleme
     yüzeyi olur. Ay süzgeci "+ Filtre ekle" sayfasından erişilebilir kalıyor —
     yani kaybolan bir yol yok, belirsiz bir 20 px'lik hedef var artık yok. */
  /* İkisi de tam satır: aksi halde `.focw`in esneme tabanı 0 olduğu için şerit
     onunla AYNI satıra giriyor ve manşeti 0 px'e eziyor (ölçüldü). */
  .lead .focw{ flex:0 0 100%; max-width:none }
  .sig18{ flex:0 0 100%; margin-left:0; align-self:stretch; padding-bottom:0; margin-top:10px }
  .s18b{ pointer-events:none }
  .s18c{ height:40px }
  .s18h .up{ display:none }
  /* Ay etiketleri telefonda DÜŞER. 18 px'lik sütuna "OCA'27" sığmıyor ve
     kırpılıyordu; taşırmak da çalışmadı (sütun kutusu kısıtlıyor). Kaybedilen
     bilgi yok: enstrümanın üstündeki satır zaten bakılan günü yazıyor ve
     eksende "bugün" işareti duruyor. Kazanılan: 12 px ve temiz bir histogram. */
  .s18b s{ display:none }
  .s18ax{ height:22px; margin-top:4px }
  .s18now{ height:21px } .s18head{ height:19px }
  .s18now::after{ top:21px }
}

/* ============================================================================
   APPLE YÜZEY KATMANI (Apple UX programı, Faz 1)
   ============================================================================
   Yalnız yüzey: yarıçap, malzeme, yükselti, etkileşim rengi. Yerleşim
   değişmiyor — o Faz 2'nin işi. Dosya sonunda çünkü mevcut kuralların
   üstüne yazması gerekiyor (CSS sıralaması tuzağı, UI-PLAN'da belgelenmişti).

   Apple'ın katman kuralı: malzeme YALNIZ denetim katmanında (araç çubuğu,
   kenar çubuğu, kağıt, menü). İçerik katmanında — liste satırı, tablo, kart —
   asla. "Liquid Glass'ı içerik katmanında kullanmayın." (HIG Materials)      */

/* ---- sürekli köşe: destekleyen tarayıcıda Apple'ın gerçek eğrisi ----------
   iOS Safari 26.5'te corner-shape YOK (Faz 0'da doğrulandı) — orada dairesel. */
@supports (corner-shape: squircle){
  .pan, .mbox, .cbox, .cnfb, .menu, .btn, .to, .fchip, .seg, .fpop,
  input, select, textarea { corner-shape: squircle; }
}

/* ---- denetim katmanı: kağıt ve modal --------------------------------------
   Koyu temada gölge iş görmez; Apple derinliği YÜKSELTİLMİŞ ZEMİN ile anlatır. */
.pan{
  background:var(--bg-elevated); border-left:1px solid var(--separator-opaque);
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow:var(--shadow-3);
  transition:transform var(--d-quick) var(--spring-quick);
}
.pan.on{ transition:transform var(--d-smooth) var(--spring-smooth); }

.mbox{
  background:var(--bg-elevated); border:none; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-3); overflow:hidden;
}
.cnfb{ background:var(--bg-elevated); border-radius:var(--radius-xl); box-shadow:var(--shadow-3); }
.cbox{ background:var(--bg-elevated); border-radius:var(--radius-xl); box-shadow:var(--shadow-3); overflow:hidden; }

/* Perde: Apple'ın kağıt arkası koyulaştırması */
.scrim, .modal, .ck{ background:rgba(0,0,0,.40); }

/* ---- menü: malzeme katmanı ------------------------------------------------ */
.menu, .fpop{
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-regular);
  backdrop-filter:var(--material-regular);
  border:1px solid var(--separator);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
}

/* ---- düğmeler ------------------------------------------------------------
   Apple: birincil eylemde renk ZEMİNE uygulanır, metne değil. Ve yıkıcı
   eylem birincil rol almaz — .danger artık dolgu değil, yalnız kırmızı metin. */
.btn{
  border-radius:var(--radius-md);
  border:1px solid var(--separator-opaque);
  background:var(--bg-3);
  font-weight:var(--w-emphasis);
  transition:background var(--d-quick) var(--spring-quick),
             color var(--d-quick) var(--spring-quick),
             border-color var(--d-quick) var(--spring-quick);
}
.btn.pri{ background:var(--tint-solid); color:#fff; border-color:transparent; }
.btn.pri:hover{ background:var(--tint-solid); border-color:transparent; filter:brightness(1.12); }
.btn.danger{ color:var(--red); border-color:var(--separator-opaque); background:var(--bg-3); }
.btn.danger:hover{ background:color-mix(in srgb, var(--red-fill) 14%, var(--bg-3)); color:var(--red); }

/* ---- çipler ve segmentler ------------------------------------------------- */
.fchip{
  border-radius:var(--radius-pill); border:none;
  background:var(--fill-3); color:var(--label);
  font-weight:var(--w-regular);
}
.fchip .k{ color:var(--label-3); }
/* Apple'ın segment denetimi seçili/seçili değil ayrımını RENKLE değil ZEMİNLE yapar;
   iki etiket de tam okunur kalır. `--label-2` dolgu zemini üstünde 4.5:1'i tutmuyordu
   (ölçülen 3.79:1) — Faz 1 kontrast denetiminde yakalandı. */
.seg{ background:var(--fill-4); border-radius:var(--radius-md); padding:2px; border:none; }
/* `a` biçimindeki segment Apple katmanında atlanmıştı: rengi Swiss'ten
   miras aldığı için dolgunun üstünde 4.28:1 kalıyordu (Faz 7'de ölçüldü). */
/* `#view a:not([class])` bu baglantilari tint'e boyuyor ve dolgunun ustunde
   4.28:1 kaliyor. O kural id tasiyor, ozgullugu daha yuksek -- segment
   kurali ayni kapsama girmeli. */
.seg button, .seg a, #view .seg a{ border-radius:calc(var(--radius-md) - 2px); color:var(--label); }
.seg button[aria-pressed="true"], .seg a[aria-pressed="true"]{
  background:var(--bg-elevated); color:var(--label); box-shadow:var(--shadow-1); }

/* ---- girdi alanları ------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea{
  border-radius:var(--radius-md);
  background:var(--fill-4);
  transition:background var(--d-quick) var(--spring-quick),
             box-shadow var(--d-quick) var(--spring-quick);
}

/* ---- bildirim (toast) ----------------------------------------------------- */
.to{
  border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-thick);
  backdrop-filter:var(--material-thick);
  color:var(--label); border:1px solid var(--separator);
  animation:up var(--d-snappy) var(--spring-snappy);
}
#toasts{ padding:0 var(--pad) calc(var(--sp-4) + env(safe-area-inset-bottom)); }

/* ---- etkileşim rengi: tıklanabilir olan mavidir ---------------------------
   Kural bilerek DAR: yalnız içerik alanındaki, kendi sınıfı olmayan bağlantılar.
   Önce `a:not(.btn):not(.nav a)` yazmıştım; özgüllüğü yüksek olduğu için kendi
   rengini belirleyen bileşenleri (.skip gibi) eziyordu ve atlama bağlantısı
   beyaz zeminde mavi metne düşüp 2.15:1'e iniyordu — Faz 1 kontrast denetiminde
   yakalandı. Ders: renk jetonu genel selektörle dağıtılmaz. */
/* Segment icindeki baglanti METIN baglantisi degil, DENETIM etiketi: tint'e
   boyanirsa dolgunun ustunde 4.28:1 kaliyor. `.seg`in cocuklari disarida. */
#view :not(.seg) > a:not([class]), .pb a:not([class]), .prose a:not([class]){ color:var(--tint); }
.ix[aria-pressed="true"], .index .ix[aria-pressed="true"]{
  background:var(--tint-solid); color:#fff; border-radius:var(--radius-sm);
}

/* ---- odak: Apple listede HALKA değil SATIR VURGUSU kullanır ---------------
   "İnsanların listeleri görüntülemesi tüm satır vurgulandığında daha kolaydır." */
:focus-visible{
  outline:3px solid var(--tint);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.rw:has(> .rwb:focus-visible), .rw:focus-visible, tr[data-open]:focus-visible{
  outline:none; background:var(--fill-3);
  box-shadow:inset 3px 0 0 var(--tint);
}
/* Halka yerine satır vurgusu: çubuk düğmenin kendisinde, zemin kapta (:has). */
.rwb:focus-visible{ outline:none; box-shadow:inset 3px 0 0 var(--tint); }

/* ---- aciliyet renkleri: her rengin tek işi -------------------------------- */
.s-sig{ color:var(--red); }
.s-ok{ color:var(--green); }
.s-calm{ color:var(--label-3); }

/* ---- ZAMAN RAMPASI (VADE Faz 4) -------------------------------------------
   `.s-*` DURUMU söyler (hata, tamamlandı, gecikmiş sayaç) ve yerinde duruyor.
   `.vd-*` ZAMANI söyler ve yalnız İŞARETLİ GÜN MESAFESİNİN üstündedir — dört
   yerde: radar listesi, radar tablosu, firma kartı, not listesi. Aynı sayı iki
   ekranda iki renk almasın diye dördü birlikte çevrildi.
   Duraklar `apps/core/dates.py::HEAT`, değerler `tokens.css` — ikisi de tek
   yer; `test_vade_faz4_rampa` ikisini birbirine bağlı tutuyor. */
.vd-p2{ color:var(--vd-p2); }
.vd-p1{ color:var(--vd-p1); }
.vd-p0{ color:var(--vd-p0); }
.vd-f1{ color:var(--vd-f1); }
.vd-f2, .vd-none{ color:var(--vd-f2); }

/* "Yalnız rozet" tercihi — renk körlüğü için aciliyetin rengi kapatılır
   (`odStyle`, `.s-sig` karşılığı 839. satırda). Rampa YOK OLMAZ, kanal
   değiştirir: geçmişin iki durağı renkten AĞIRLIĞA iner. Eski davranışta
   gecikmişlerin tamamı tek mürekkebe çöküyordu; "bir aydan eski" ile "üç
   gündür açık" ayrımı burada da duruyor. */
:root[data-od="badge"] .vd-p2{ color:var(--label-2)!important; }
:root[data-od="badge"] .vd-p1{ color:var(--label)!important; }

/* ---- bölüm başlığı: büyük harf gitti, ağırlık ve renk kaldı --------------- */
.sec .nm{ font-weight:var(--w-emphasis); }
.sec .ct{ color:var(--label-3); font-weight:var(--w-regular); }

/* ============================================================================
   ÜÇ BÖLME (Apple UX programı, Faz 2)
   ============================================================================
   Apple'ın boyut sınıfları: pencere daraldıkça kompakt görünüme geçmeyi
   OLABİLDİĞİNCE GECİKTİR, ve üçüncül sütunu (detay) önce gizle.

   Ve geçiş YIKICI OLMAMALI: pencereyi daraltıp genişletmek kullanıcının
   kenar çubuğu tercihini silmez (WWDC25 208).                              */

/* Izgara YALNIZ kenar çubuğu olan sayfalarda. `bare.html` (giriş, davet, kapı)
   aynı `#app` kabını kullanıyor ama kenar çubuğu taşımıyor; koşulsuz ızgara
   orada 264 px'lik boş bir sütun ayırıp içeriği ezik bir şeride sıkıştırıyordu.
   Canlıda yakalandı — giriş sayfası kelime kelime sarıyordu.
   `:has()` iOS Safari 26.5'te doğrulandı (Faz 0). */
#app:has(> .sb){
  display:grid;
  grid-template-columns:var(--sb-w, 264px) minmax(0, 1fr);
  min-height:100dvh;
  align-items:start;
}
#app:has(> .sb).sb-off{ grid-template-columns:0 minmax(0,1fr); }

/* ---- kenar çubuğu --------------------------------------------------------
   Apple: malzeme katmanı, ama macOS 27'nin geri getirdiği gibi pencere
   kenarına kadar ve içerikle arasında GÖRÜNÜR ayraç. Marj yok. */
.sb{
  position:sticky; top:0; align-self:start;
  height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--sp-3) var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-regular);
  backdrop-filter:var(--material-regular);
  border-right:1px solid var(--separator-opaque);
  display:flex; flex-direction:column; gap:var(--sp-5);
  scrollbar-width:thin;
}
#app.sb-off .sb{ display:none; }

.sbnav{ display:flex; flex-direction:column; gap:1px; }
.sbsec{ display:flex; flex-direction:column; gap:1px; }
.sbh{
  margin:0 0 var(--sp-1); padding:0 var(--sp-3);
  font-size:var(--t-footnote); line-height:var(--lh-footnote);
  color:var(--label-3); font-weight:var(--w-emphasis);
}
.sbcust > summary.sbh{ cursor:pointer; list-style:none; display:flex; gap:var(--sp-2); align-items:center; min-height:28px; }
.sbcust > summary.sbh::-webkit-details-marker{ display:none; }
.sbcust > summary.sbh::before{ content:"›"; display:inline-block; transition:rotate var(--d-quick) var(--spring-quick); }
.sbcust[open] > summary.sbh::before{ rotate:90deg; }
.sbcust > summary.sbh b{ margin-left:auto; color:var(--label-3); font-weight:var(--w-regular); }

/* Satır: Apple'ın kenar çubuğu satırı — kutu YOK, yalnız seçiliyken zemin. */
.sbn, .sbi{
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; text-align:left;
  padding:0 var(--sp-3); min-height:32px;
  border:none; background:none; cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:var(--t-body); line-height:var(--lh-body); color:var(--label);
  text-decoration:none;
  transition:background var(--d-quick) var(--spring-quick);
}
.sbn i, .sbi i{
  flex:none; width:20px; text-align:center;
  font-style:normal; font-size:var(--t-callout); color:var(--label-3);
}
/* Renk yalnız ANLAM taşıdığında ve SEYREK — Apple'ın kendi örneği Mail'in sarı
   VIP simgesi. Burada aciliyet basamağını söylüyor, dekorasyon değil. */
.sbi i.t-red{ color:var(--red); }
.sbi i.t-orange{ color:var(--orange); }
.sbi i.t-yellow{ color:var(--yellow); }
.sbn span, .sbi span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sbi b{
  flex:none; font-weight:var(--w-regular); color:var(--label-3);
  font-size:var(--t-footnote); font-variant-numeric:tabular-nums;
}
.sbn:hover, .sbi:hover{ background:var(--fill-4); }
.sbn.on, .sbi.on{ background:var(--fill-2); font-weight:var(--w-emphasis); }
.sbn.on i, .sbi.on i, .sbi.on b{ color:var(--label); }
.sbi.zero{ color:var(--label-3); }
.sbi.zero b{ opacity:.5; }
.sbn:focus-visible, .sbi:focus-visible{ outline:3px solid var(--tint); outline-offset:-2px; }

/* ---- araç çubuğu: üç bölge ----------------------------------------------- */
.sbtoggle{
  flex:none; width:32px; height:32px; border:none; background:none;
  color:var(--label-2); border-radius:var(--radius-sm); cursor:pointer;
  font-size:var(--t-callout);
  transition:background var(--d-quick) var(--spring-quick);
}
.sbtoggle:hover{ background:var(--fill-4); }
.mtop h1{
  font-size:var(--t-title2); line-height:var(--lh-title2);
  letter-spacing:var(--tr-title2); font-weight:var(--w-emphasis);
  margin:0; white-space:nowrap;
}
.mtop h1 i{ display:none; }  /* alt başlık araç çubuğuna sığmıyor; başlık 15 karakterin altında kalmalı */

/* ---- boyut sınıfları ------------------------------------------------------ */
@media (max-width: 1180px){
  #app:has(> .sb){ grid-template-columns:var(--sb-w, 232px) minmax(0,1fr); }
}
@media (max-width: 1000px){
  /* Kenar çubuğu üste biner: içerik tam genişlik kazanır ama tercih silinmez. */
  #app:has(> .sb){ grid-template-columns:minmax(0,1fr); }
  .sb{
    position:fixed; left:0; top:0; bottom:0; z-index:45; width:min(300px, 84vw);
    translate:-101% 0; transition:translate var(--d-smooth) var(--spring-smooth);
    box-shadow:var(--shadow-3);
  }
  #app.sb-open .sb{ translate:0 0; }
  #app.sb-off .sb{ display:flex; }
}
@media (min-width: 1001px){
  .sbtoggle{ display:none; }   /* geniş ekranda kenar çubuğu her zaman açık */
}

/* ---- araç çubuğu grupları ve taşma menüsü (Faz 2) -------------------------
   Apple: en fazla üç grup, taşma konumsal. Gruplar arasında sabit boşluk —
   "metin etiketli eylemi simgeli eylemin yanına koymak tek bir eylem yanılsaması
   yaratır" (HIG Toolbars). */
.fgrp{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; min-width:0; }
.fgrp-a{ flex:1 1 auto; min-width:0; }
.fgrp-b{ flex-wrap:nowrap; }
.fgrp-c{ flex:none; }

.fmore{
  width:32px; height:32px; border:none; background:none; cursor:pointer;
  color:var(--label-2); border-radius:var(--radius-sm);
  font-size:var(--t-callout); line-height:1;
  anchor-name:--fmore;
  transition:background var(--d-quick) var(--spring-quick);
}
.fmore:hover{ background:var(--fill-4); }
.fmore:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; }

/* Yerel popover: CSP'ye uygun, JS yok. iOS Safari 26.5'te doğrulandı (Faz 0). */
.fmenu{
  /* E0/H2: `inset:auto` kısaltması ANCHOR değerlerinden sonra gelince onları
     sıfırlıyor ve menü (0,4) noktasına düşüyordu — önce sıfırla, sonra bağla. */
  position:absolute; position-anchor:--fmore; inset:auto;
  top:anchor(bottom); right:anchor(right); margin:var(--sp-1) 0 0;
  border:1px solid var(--separator); padding:var(--sp-1);
  min-width:216px; max-width:min(280px, 92vw);
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-regular);
  backdrop-filter:var(--material-regular);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  opacity:0; scale:.96; transform-origin:top right;
  transition:opacity var(--d-quick) var(--spring-quick),
             scale var(--d-quick) var(--spring-snappy),
             overlay var(--d-quick) allow-discrete,
             display var(--d-quick) allow-discrete;
}
.fmenu:popover-open{ opacity:1; scale:1; }
@starting-style{ .fmenu:popover-open{ opacity:0; scale:.96; } }
.fmenu::backdrop{ background:transparent; }
.fmenu button{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left;
  min-height:32px; padding:0 var(--sp-3); border:none; background:none; cursor:pointer;
  border-radius:var(--radius-sm); color:var(--label);
  font-size:var(--t-body); line-height:var(--lh-body);
  transition:background var(--d-quick) var(--spring-quick);
}
.fmenu button:hover{ background:var(--fill-4); }
.fmenu button b{ margin-left:auto; color:var(--label-3); font-weight:var(--w-regular); }
.fmenu button .chk{ margin-left:auto; color:var(--tint); }
.fmenu .sep{ height:1px; background:var(--separator); margin:var(--sp-1) var(--sp-2); }

/* Anchor desteklenmiyorsa popover yine açılır, yalnız konumu sağ üstte sabitlenir. */
@supports not (position-anchor: --fmore){
  .fmenu{ position:fixed; top:auto; right:var(--pad); }
}

/* ---- dar ekran: araç çubuğu grupları (Faz 2) -----------------------------
   Apple'ın kuralı taşmayı KONUMSAL yapar: orta bölge (görünüm segmentleri)
   dar ekranda kendi içinde kayar, filtre durumu ve taşma menüsü sabit kalır.
   Kaydırma çubuğu gizli ama parmakla ve klavyeyle erişilebilir. */
@media (max-width: 1000px){
  .fbar{ align-items:flex-start; }
  .fgrp-b{
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; max-width:100%;
  }
  .fgrp-b::-webkit-scrollbar{ display:none; }
  .fbar .sp{ display:none; }
  .fgrp-a{ flex:1 1 100%; }
}

/* Bölüm başlığı dar ekranda sarmasın: sayaç kendi genişliğini korur, etiket
   gerekirse kırpılır. Faz 2'de kenar çubuğu içerik alanını daralttığında
   "20 KAYIT" harf harf sarıp başlığı 99 px yapıyordu. */
.sec .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec .ct{ flex:none; white-space:nowrap; }

/* ============================================================================
   SÜREKLİLİK (Apple UX programı, Faz 3)
   ============================================================================
   Apple'ın kuralı: bir şey nereden geldiyse oraya döner, ve hareket nesnenin
   KENDİSİNİN hareketidir — kesitin çapraz solunması değil.

   Bundan önce `::view-transition-old/new(root)` ile TÜM SAYFA soluyordu ve
   `view-transition-name` taşıyan tek öğe `:root`'tu. Artık her satırın kendi adı
   var: filtre değişince satırlar yeni yerlerine KAYIYOR.

   TUZAK: aynı anda ekranda iki öğe aynı adı taşıyamaz — geçiş sessizce iptal
   olur, hata da vermez. Adlar nesne kimliğinden türetiliyor (row-<pk>), o yüzden
   çakışma yapısal olarak imkânsız. tests/test_faz3_continuity.py bunu denetler. */

::view-transition-group(*){
  animation-duration:var(--d-snappy);
  animation-timing-function:var(--spring-snappy);
}
/* Kök artık solmuyor: sayfa çapraz solunması yerine nesneler taşınıyor. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--d-quick);
  animation-timing-function:var(--spring-quick);
}

/* Azaltılmış hareket: Apple'ın ikame listesi — konum/ölçek animasyonu kalkar,
   OPAKLIK KALIR. "Kaldırmak" değil, "solunmaya indirgemek". */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*){ animation-duration:1ms; }
  .rw, tr[data-open]{ view-transition-name:none !important; }
}

/* ---- yapışkan bölüm başlıkları -------------------------------------------
   5131 px'lik bir listede hangi kovada olduğunu bilmek gerekiyor. Apple'ın
   liste davranışı: bölüm başlığı üstte asılı kalır. */

/* ============================================================================
   SATIR ANATOMİSİ (Apple UX programı, Faz 4)
   ============================================================================
   Apple'ın yoğunluk reçetesi, kendi tablolarından:
     · satır yüksekliği oranı 1.23–1.33 (tipik web 1.5–1.6 — fark buradan geliyor)
     · tek yazı ailesi, iki ağırlık: Regular + Semibold
     · dört gri metin basamağı, ayraç için TEK bir gri
     · ayraç GİRİNTİLİ, tam genişlik değil; dikey çizgi hiç yok
     · geniş çok sütunlu tabloda zebra bandı
     · renk yalnız durum ve birincil eylem için

   Apple'ın sıkı aralık kuralı, harfiyen: yüksekliğin kısıtlı olduğu yerlerde
   (— "örneğin bir liste satırında") sıkı aralık metnin sığmasına yardım eder,
   ANCAK üç veya daha fazla satır gösteriyorsanız sıkı aralıktan kaçının.
   Radar satırı iki satır taşıyor → sıkı aralık meşru.                        */

/* Başlık: Headline (Semibold) — Apple'ın liste satırı birincil metni. */
.rw.hot .t, .rw.warm .t, .rw.cool .t{
  font-size:var(--t-headline); line-height:var(--lh-headline);
  letter-spacing:var(--tr-headline); font-weight:var(--w-emphasis);
  color:var(--label);
}
.rw.cool .t{ font-weight:var(--w-regular); }
/* Müşteri: Subheadline, ikincil etiket rengi. */
.rw .c{
  font-size:var(--t-subhead); line-height:var(--lh-subhead);
  letter-spacing:var(--tr-subhead); font-weight:var(--w-regular);
  color:var(--label-2);
}
/* Meta ve alt satır: Footnote, üçüncül. */
.rw .k, .rw .sub, .rw .dd{
  /* Faz 3: footnote macOS'ta 10px -- caption2 ile ayni basamak. Apple'in
     liste satirindaki ikincil metni macOS'ta 11, iOS'ta 15. */
  font-size:var(--t-subhead); line-height:var(--lh-subhead);
  letter-spacing:var(--tr-footnote); color:var(--label-3);
}
/* Rozetler: Caption, çerçevesiz — Apple "bölüm zaten görünür bir kap sağlıyor". */
/* Rozet: zemin YOK. Apple'ın kuralı — "sistem simgelerini çerçevesiz tercih edin;
   çerçeve gerekmez çünkü bölüm zaten görünür bir kap sağlıyor." Zemin ayrıca
   bileşik parlaklığı yükseltip metni 4.48:1'e düşürüyordu (gereken 4.5). */
.rw .t em{
  font-size:var(--t-caption1); line-height:var(--lh-caption1);
  color:var(--label-2); box-shadow:none; background:none;
  padding:0; margin-left:var(--sp-2);
}
.rw .t em.shby{ box-shadow:none; background:none; color:var(--label-2); }

/* Ayraç girintili: satır metninin başladığı yerden. Apple'ın separatorInset'i. */
.rw::after{
  content:""; position:absolute; left:var(--separator-inset); right:0; bottom:0;
  height:1px; background:var(--separator);
}
.rw:last-child::after{ display:none; }

/* `›` göstergesi denendi ve GERİ ÇEKİLDİ: `.rw::before` zaten satır vurgusu
   çubuğu olarak kullanılıyor; üstüne yazınca o çubuk kayboluyordu. Satır
   tamamen tıklanabilir ve dokununca panel açılıyor, yani yönelim zaten net.
   Apple'ın asıl kuralı "ⓘ ile › karıştırılmaz" — burada ikisi de yok, ihlal yok. */

/* Tabloda zebra: Apple'ın geniş tablo cevabı dikey çizgi değil, dönüşümlü satır. */
.tbl tbody tr[data-open]:nth-of-type(even){ background:var(--fill-4); }
.tbl td, .tbl th{ border-left:none; border-right:none; }

/* ---- başlık ve rozetler: bilgi kaybı olmadan (Faz 4) ---------------------
   Rozetler (Aylık, Yıllık, aşama, kontrol listesi, paylaşan) başlıktan sonra
   geliyordu ve başlık `nowrap` olduğu için dar ekranda kenarın DIŞINA itilip
   görünmez oluyorlardı — kozmetik değil, bilgi kaybı.
   Artık başlık esnek bir kutu: metin kırpılır, rozetler kendi genişliğini korur.
   Apple'ın kuralı: "temel bilgiyi bulmayı kolaylaştırmak için ona yeterli alan
   verin"; rozet burada temel bilgi, başlığın kuyruğu değil. */
.rw .t{
  display:flex; align-items:baseline; gap:0; min-width:0;
  overflow:visible; white-space:normal;
}
.rw .t .tx{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rw .t em{ flex:none; }

/* Dar ekran: iki satıra izin ver. Apple sıkı aralığı iki satıra kadar meşru
   sayar ("üç veya daha fazla satırda sıkı aralıktan kaçının"). */
@media (max-width: 860px){
  .rw .t{ flex-wrap:wrap; row-gap:2px; }
  .rw .t .tx{ flex:1 1 100%; }
  .rw .t em{ margin-left:0; margin-right:var(--sp-2); }
}

/* Geri alınan kayıt kısa süre işaretlenir — Apple'ın "sonucu gösterin" kuralı. */
.rw.revealed, tr.revealed{ animation:reveal 1600ms var(--spring-smooth); }
@keyframes reveal{ 0%,70%{ background:var(--fill-2); } 100%{ background:transparent; } }
@media (prefers-reduced-motion: reduce){ .rw.revealed, tr.revealed{ animation:none; background:var(--fill-2); } }

/* Jeton önerisi: türü yazılı, çünkü Apple keşfedilebilirliği ayrı bir kural yapar —
   "İnsanlar hangi jetonların mevcut olduğunu bilmeyebilir." */
.ci.tok .tt::after{
  content:"jeton"; margin-left:var(--sp-2); padding:1px 7px;
  border-radius:var(--radius-pill); background:var(--fill-3);
  color:var(--label-2); font-size:var(--t-caption2); vertical-align:middle;
}

/* Arama kapsamı: Apple'ın "geçerli kapsamı açıkça göster" kuralı. Arama her zaman
   geçerli filtrenin içinde yapılıyordu ama bu hiçbir yerde yazmıyordu — "hiç sonuç
   yok" ile "bu görünümde sonuç yok" ayırt edilemiyordu. */
.scope{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--t-footnote); color:var(--label-2);
}
.scope b{ font-weight:var(--w-emphasis); color:var(--label); }

/* ============================================================================
   AYARLAR: liste + detay (Apple UX programı, Faz 7)
   ============================================================================
   Önce on iki sekmelik yatay şeritti ve 1280 px'e sığmıyor, kendi içinde
   kayıyordu — yani bazı sekmeler görünmüyordu. Apple'ın kuralı: hiyerarşi iki
   seviyeyi geçiyorsa kenar çubuğu ile detay arasına bir İÇERİK LİSTESİ konur.

   macOS System Settings'in belgelenmiş hatalarından kaçınılıyor: sekme adları
   kırpılmıyor (sabit sütun), her grup etiketli, arama listeyi filtreliyor ama
   yerini kaybettirmiyor, hiçbir denetim yalnız hover'da belirmiyor.            */
.setwrap{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:var(--sp-8); align-items:start; }
@media (max-width: 900px){ .setwrap{ grid-template-columns:minmax(0,1fr); gap:var(--sp-5); } }

.setlist{ position:sticky; top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1); }
@media (max-width: 900px){ .setlist{ position:static; } }

.setsearch{ display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-2);
  background:var(--fill-3); border-radius:var(--radius-md); min-height:32px; margin-bottom:var(--sp-3); }
.setsearch .si{ color:var(--label-2); font-size:var(--t-callout); }
.setsearch input{ flex:1; min-width:0; border:none; background:none; padding:0;
  font-size:var(--t-body); color:var(--label); }
/* Odak halkası girdinin KENDİSİNDE. Önce sarmalayıcıya taşımıştım
   (`:focus-within`); görsel olarak Apple'ın alan vurgusuna daha yakındı ama
   odak göstergesini bir öğeden kaldırıp başkasına taşımak denetlenemiyor —
   ve uygulamanın geri kalanı halkayı denetimin üstünde tutuyor. Tutarlılık
   ve doğrulanabilirlik burada estetiğin önünde. */
.setsearch input:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; border-radius:var(--radius-sm); }

.setgrp{ margin:var(--sp-4) 0 var(--sp-1); padding:0 var(--sp-3);
  font-size:var(--t-footnote); color:var(--label-3); font-weight:var(--w-emphasis); }
.setgrp:first-child{ margin-top:0; }
.seti{ display:block; padding:0 var(--sp-3); min-height:32px; line-height:32px;
  border-radius:var(--radius-sm); color:var(--label); text-decoration:none;
  font-size:var(--t-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background var(--d-quick) var(--spring-quick); }
.seti:hover{ background:var(--fill-4); }
.seti.on{ background:var(--fill-2); font-weight:var(--w-emphasis); }
.seti:focus-visible{ outline:3px solid var(--tint); outline-offset:-2px; }
.setempty{ padding:var(--sp-3); color:var(--label-3); font-size:var(--t-footnote); }
.seth{ margin:0 0 var(--sp-5); font-size:var(--t-title2); line-height:var(--lh-title2);
  letter-spacing:var(--tr-title2); font-weight:var(--w-emphasis); }
/* Dar ekranda liste ile bölüm AYRI ekranlar (Apple UX planı §8.1: "detay → itmeli gezinme"; kullanıcı kararı
   13.09.2026). Alt alta dizmek telefonda bölümü gizliyordu. Ölçüldü (393×852): liste 54–854 px'i kaplıyor,
   "Görünüm"e dokununca bölüm 896 px'ten, sekme çubuğunun (802 px) altından başlıyordu; ekranda yalnız seçili
   satır değişiyor, bölüm açılmamış gibi görünüyordu. Kök adres (/ayarlar/) listeyi, bölüm adresi yalnız bölümü
   ve geri bağlantısını gösterir. Masaüstündeki iki bölme aynı kalır. */
.setback{ display:none; }
@media (max-width: 900px){
  .setwrap[data-root] > .set{ display:none; }
  .setwrap:not([data-root]) > .setlist{ display:none; }
  /* Liste ekranında açık bölüm yok: kök adresin masaüstündeki varsayılanı (Paylaşımlar) seçili görünmesin. */
  .setwrap[data-root] .seti.on{ background:none; font-weight:var(--w-regular); }
  .setback{ display:inline-flex; align-items:center; gap:var(--sp-1); min-height:44px; margin:0 0 var(--sp-1);
    padding:0 var(--sp-2) 0 0; color:var(--tint); font-size:var(--t-body); text-decoration:none; }
  .setback span{ font-size:var(--t-title2); line-height:1; }
  .setback:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; border-radius:var(--radius-sm); }
}

/* ============================================================================
   iPHONE ve PWA (Apple UX programı, Faz 8)
   ============================================================================ */

/* ---- alt sekme çubuğu ----------------------------------------------------
   Apple: beş hedef, "Daha" sekmesi YOK, etiketler tek kelime, hiçbir sekme
   devre dışı bırakılmaz ya da gizlenmez. Malzeme katmanı içeriğin ÜSTÜNDE
   yüzer; güvenli alan dolgusu ana ekran çubuğunu boş bırakır. */
.tabbar{ display:none; }
@media (max-width: 860px){
  .tabbar{
    display:grid; grid-template-columns:repeat(5, 1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--material-bg);
    -webkit-backdrop-filter:var(--material-thick);
    backdrop-filter:var(--material-thick);
    border-top:1px solid var(--separator-opaque);
  }
  .tb{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; min-height:49px; text-decoration:none; color:var(--label-3);
    font-size:var(--t-caption2); line-height:1.1;
    transition:color var(--d-quick) var(--spring-quick);
  }
  .tb i{ font-style:normal; font-size:var(--t-callout); line-height:1; }
  .tb.on{ color:var(--tint); }
  .tb:focus-visible{ outline:3px solid var(--tint); outline-offset:-3px; }
  /* İçerik sekme çubuğunun altına girmesin. 49 pt Apple'ın ölçülen içerik
     yüksekliği; güvenli alan onun ÜSTÜNE eklenir (toplam iPhone'da 83 pt). */
  .page{ padding-bottom:calc(49px + env(safe-area-inset-bottom) + var(--sp-4)); }
  #toasts{ bottom:calc(49px + env(safe-area-inset-bottom)); }
}

/* ---- güvenli alanlar ------------------------------------------------------ */
.page{ padding-left:max(var(--pad), env(safe-area-inset-left)); padding-right:max(var(--pad), env(safe-area-inset-right)); }
.sb{ padding-top:max(var(--sp-3), env(safe-area-inset-top)); }

/* ---- kağıt (sheet) kipi: dar ekranda panel alttan gelir -------------------
   Apple'ın detent'leri: `medium` tam yüksekliğin yaklaşık yarısı, `large` tam.
   Tutamak yeniden boyutlandırılabildiğini söyler ve VoiceOver için de odaktır. */
@media (max-width: 860px){
  .pan{
    top:auto; left:0; right:0; bottom:0; width:auto;
    height:min(92dvh, 100%);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    border-left:none; border-top:1px solid var(--separator-opaque);
    translate:0 101%;
    transition:translate var(--d-smooth) var(--spring-smooth);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pan.on{ translate:0 0; }
  .pan::before{
    content:""; display:block; width:36px; height:5px; margin:8px auto 4px;
    border-radius:999px; background:var(--fill-1); flex:none;
  }
}

/* ---- kaydırmalı satır eylemleri (Faz 8) ----------------------------------
   Konum JS yayıyla sürülüyor (CSS hızı devredemez), o yüzden burada geçiş YOK —
   yalnız görünüm. `touch-action:pan-y` yatay kaydırmayı bize bırakır, dikey
   kaydırmayı tarayıcıya. */
@media (pointer: coarse){
  .rw[data-open]{ touch-action:pan-y; }
  .rw.swiping{ will-change:translate; }
}
/* İki şerit, iki yön (APPLE-UX-PLANI Faz 8: sağa Yapıldı · sola Ertele). Her şeritte
   TEK eylem var: iki eylemi tek şeritte toplamak yönü anlamsız kılıyordu ve şablonun
   `.qa` çiftiyle birlikte 375 px'de yan yana dört düğme çıkıyordu. */
.swa{
  position:absolute; right:0; top:0; bottom:0; display:flex; align-items:stretch;
  translate:100% 0; pointer-events:none;
}
.swl{
  position:absolute; left:0; top:0; bottom:0; display:flex; align-items:stretch;
  translate:-100% 0; pointer-events:none;
}
.rw.swiping .swa, .rw.swopen .swa, .rw.swiping .swl, .rw.swopen .swl{ pointer-events:auto; }
.swb{
  border:none; color:#fff; font-size:var(--t-footnote); font-weight:var(--w-emphasis);
  padding:0 var(--sp-4); min-width:68px; cursor:pointer;
}
.swb.done{ background:var(--green); }
.swb.snooze{ background:var(--orange); }
/* Azaltılmış harekette kaydırma yine çalışır — hareket burada bir SÜS değil,
   yolun kendisi. Yalnız yay sertleşir (tokens.css). */
.swb:focus-visible{ outline:3px solid var(--tint); outline-offset:-3px; }

/* ---- dokunma hedefleri: Apple'ın VARSAYILANI 44, asgarisi 28 --------------
   İşaretçide 32 px meşru (macOS varsayılanı 28); dokunmada değil. Kenar çubuğu
   dar ekranda çekmece olarak açıldığı için orada da 44'e tamamlanıyor.
   Apple ayrıca "denetimler arasındaki boşluğu boyut kadar önemli sayın" diyor —
   yükseklik büyürken satır arası boşluk korunuyor. */
@media (pointer: coarse){
  .sbn, .sbi{ min-height:44px; }
  .sbtoggle, .fmore{ width:44px; height:44px; }
  .sec{ min-height:44px; }
  .seti{ min-height:44px; line-height:44px; }
  .fmenu button{ min-height:44px; }
  .swb{ min-width:76px; }
}

/* ============================================================================
   ÜST SAĞ KÜME ve HESAP MENÜSÜ (Apple UX programı — sonradan yakalandı)
   ============================================================================
   Bu küme program boyunca Swiss kalıntısı olarak kaldı: siyah birincil düğme,
   çerçeveli rol rozeti, altı çizili mavi bağlantı, 2px siyah menü kenarlığı ve
   satır muamelesi görmeyen menü öğeleri. Kullanıcı ekran görüntüsüyle gösterdi.

   Apple'ın kuralları burada:
     · Birincil eylemde renk ZEMİNE uygulanır, metne değil — ve o renk tint'tir.
     · Menü bir denetim katmanıdır: malzeme, hairline kenar, yumuşak gölge.
     · Menü öğesi bir satırdır: eşit yükseklik, yuvarlatılmış vurgu, tam okunur.
     · Rozet çerçevesizdir — "bölüm zaten görünür bir kap sağlıyor".
     · Kısayol ipucu ikincil etikettir, kutu değil.                            */

/* ---- birincil eylem ---- */
/* Zemin `--tint-solid`: beyaz metin taşıyan dolu düğmenin kendi jetonu.
   `--tint-fill` (Apple'ın varsayılan systemBlue'su) bir DOLGU rengidir, metin
   rengi değil — beyaz metin #0088FF üstünde 3.52:1. `--tint` de olmaz: koyu
   temada o AÇIK bir mavidir (siyah üstünde okunsun diye) ve beyaz metni
   2.15:1'e düşürür. İkisine de düştüm; ayrı jeton bu yüzden var. */
.newb{
  background:var(--tint-solid); color:#fff;
  border-radius:var(--radius-md); padding:0 var(--sp-4); min-height:32px;
  display:inline-flex; align-items:center;
  font-size:var(--t-footnote); font-weight:var(--w-emphasis);
  letter-spacing:var(--tr-footnote);
  transition:filter var(--d-quick) var(--spring-quick);
}
.newb:hover{ background:var(--tint-solid); filter:brightness(1.12); }
.newb:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; }

/* ---- arama alanı: Apple'ın dolgulu alanı, alt çizgi değil ---- */
.srch input{
  padding:0 var(--sp-7) 0 var(--sp-7);
  min-height:32px; border-bottom:none;
  background:var(--fill-3); border-radius:var(--radius-md);
  font-size:var(--t-body);
}
.srch input:focus{ border-bottom:none; }
.srch input:focus-visible{ outline:3px solid var(--tint); outline-offset:1px; }
.srch .si{ left:var(--sp-2); bottom:auto; top:50%; translate:0 -50%; color:var(--label-2); }
.srch kbd{
  right:var(--sp-2); bottom:auto; top:50%; translate:0 -50%;
  border:none; background:none; color:var(--label-3);
}

/* ---- bildirim ve hesap düğmesi ---- */
.bell, .acct > button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:0 var(--sp-2);
  border-radius:var(--radius-md); border-bottom:none;
  color:var(--label-2); font-size:var(--t-footnote);
  font-weight:var(--w-regular); letter-spacing:var(--tr-footnote);
  transition:background var(--d-quick) var(--spring-quick);
}
.bell:hover, .acct > button:hover{
  background:var(--fill-4); color:var(--label); border-bottom-color:transparent;
}
.bell:focus-visible, .acct > button:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; }

/* ---- hesap menüsü: denetim katmanı ---- */
.acct .menu{
  border:1px solid var(--separator);
  border-radius:var(--radius-md);
  padding:var(--sp-1);
  min-width:248px;
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-regular);
  backdrop-filter:var(--material-regular);
  box-shadow:var(--shadow-2);
  top:calc(100% + var(--sp-1));
}
/* Menü satırı: eşit yükseklik, yuvarlatılmış vurgu, tam okunur metin.
   Eski kural ters kontrast kullanıyordu (siyah zemin, beyaz metin) — Apple
   menüde tint dolgusu kullanır ve metni okunur bırakır. */
.acct .menu button, .acct .menu a{
  display:flex; align-items:center; gap:var(--sp-2);
  width:100%; text-align:left;
  min-height:32px; padding:0 var(--sp-3);
  border-radius:var(--radius-sm);
  color:var(--label); text-decoration:none;
  font-size:var(--t-body); line-height:var(--lh-body);
  transition:background var(--d-quick) var(--spring-quick);
}
.acct .menu button:hover, .acct .menu a:hover{
  background:var(--fill-4); color:var(--label);
}
.acct .menu button:focus-visible, .acct .menu a:focus-visible{
  outline:3px solid var(--tint); outline-offset:-2px;
}
.acct .menu .sep{
  border-top:1px solid var(--separator);
  margin:var(--sp-1) var(--sp-2);
}
/* Kısayol ipucu: ikincil etiket, kutu değil. */
.acct .menu .m{ margin-left:auto; color:var(--label-3); }

/* Menü başlığı: kimlik bloğu */
.acct .menu > div:first-child{
  padding:var(--sp-3) var(--sp-3) var(--sp-3);
  border-bottom:1px solid var(--separator);
  margin-bottom:var(--sp-1);
}

/* ---- rol rozeti: çerçevesiz ----
   Apple: "Sistem simgelerini çerçevesiz tercih edin; çerçeve gerekmez çünkü
   bölüm zaten görünür bir kap sağlıyor." Çerçeveli hâli ayrıca iki satıra
   sarıp kimlik bloğunu bozuyordu. */
.rolet{
  border:none; background:var(--fill-3); color:var(--label-2);
  border-radius:var(--radius-pill); padding:1px var(--sp-2);
  white-space:nowrap; font-size:var(--t-caption2); font-weight:var(--w-regular);
}
.rolet.owner, .rolet.editor, .rolet.viewer{ border:none; color:var(--label-2); }
.rolet.customer{ border:none; background:color-mix(in srgb, var(--red-fill) 16%, transparent); color:var(--red); }

/* ============================================================================
   GRUPLANMIS LISTE (Swiss kaldirma, Faz 4)
   Apple listeyi kendi kabina koyar: yukseltilmis zemin, 26px kose, kil cerceve.
   Kabin USTUNDE kural yok -- ayrim kabin kendisi.

   `overflow:hidden` ile kirpma YAPILMIYOR: `.tbl`in yapiskan basligi bunu
   kaldirmiyor (gizli tasma yeni bir kaydirma baglami acar, baslik pencereye
   degil o kaba yapisir). Koseler kose hucrelerine tek tek veriliyor.

   Yazdirilabilir bulten (`.bul`) ve e-posta ozeti MUAF -- kirmizi cizgi.
   ========================================================================= */
.ftbl, .mtx, .xt, .tbl, .imptable table{
  border-collapse:separate; border-spacing:0;
  background:var(--bg-elevated);
  border:1px solid var(--separator);
  border-radius:var(--radius-xl);
  border-top:1px solid var(--separator);
}
.ftbl th, .mtx th, .xt th, .tbl th, .imptable thead th,
.ftbl td, .mtx td, .xt td, .tbl td, .imptable td{
  border-bottom:1px solid var(--separator);
}
/* Girinti KABIN kenarinda, her hucrede degil: her hucreye 16px eklemek
   12 sutunlu tabloyu ~190px genisletip yatay tasma yaratiyordu. */
.ftbl th:first-child, .mtx th:first-child, .xt th:first-child,
.tbl th:first-child, .imptable thead th:first-child,
.ftbl td:first-child, .mtx td:first-child, .xt td:first-child,
.tbl td:first-child, .imptable td:first-child{ padding-left:var(--sp-4); }
.ftbl th:last-child, .mtx th:last-child, .xt th:last-child,
.tbl th:last-child, .imptable thead th:last-child,
.ftbl td:last-child, .mtx td:last-child, .xt td:last-child,
.tbl td:last-child, .imptable td:last-child{ padding-right:var(--sp-4); }
.ftbl tbody tr:last-child td, .mtx tbody tr:last-child td,
.xt tbody tr:last-child td, .tbl tbody tr:last-child td,
.imptable tbody tr:last-child td{ border-bottom:none; }
.xt tfoot td, .xt tfoot th{ border-bottom:none; }

/* Kose hucreleri: kap yuvarlak gorunsun. */
.ftbl thead th:first-child, .mtx thead th:first-child, .xt thead th:first-child,
.tbl thead th:first-child, .imptable thead th:first-child{
  border-top-left-radius:var(--radius-xl); }
.ftbl thead th:last-child, .mtx thead th:last-child, .xt thead th:last-child,
.tbl thead th:last-child, .imptable thead th:last-child{
  border-top-right-radius:var(--radius-xl); }
.ftbl tbody tr:last-child td:first-child, .mtx tbody tr:last-child td:first-child,
.tbl tbody tr:last-child td:first-child, .imptable tbody tr:last-child td:first-child{
  border-bottom-left-radius:var(--radius-xl); }
.ftbl tbody tr:last-child td:last-child, .mtx tbody tr:last-child td:last-child,
.tbl tbody tr:last-child td:last-child, .imptable tbody tr:last-child td:last-child{
  border-bottom-right-radius:var(--radius-xl); }

/* Yapiskan baslik kabin zeminini tasir; sayfaninkini degil. */
.tbl th, .imptable thead th{ background:var(--bg-elevated); }
.tbl tr.gsec td{ background:var(--bg-elevated); }
.tbl tr.gsec:hover td{ background:var(--bg-elevated); }

/* ---- radarin satir gruplari: bolum basligi KAPIN DISINDA kalir ----------
   Apple'in modeli bu: yapiskan baslik gruplanmis zeminin uzerinde yuzer,
   satirlar kendi kabinin icinde durur. `.sec` zaten `.grp`in kardesi. */
.grp{
  background:var(--bg-elevated);
  border:1px solid var(--separator);
  border-radius:var(--radius-xl);
  overflow:hidden;
  margin-bottom:var(--group-gap);
}
.grp:empty{ display:none; }

/* ---- liste bicimli gruplar: ayrac METNIN basladigi yerden baslar ---------
   Apple'in girintisi 20px. Tabloda yapilamiyor (kenarlik hucrenin tamamini
   kapliyor); blok listede temiz. */
.rdl, .dqlist, .logl, .modlist, .custlist, .nblist, .acctpick, .tlist, .plog{
  background:var(--bg-elevated);
  border:1px solid var(--separator);
  border-radius:var(--radius-xl);
  border-top:1px solid var(--separator);
  overflow:hidden;
  padding-left:0; padding-right:0;
}
.rdl > li, .dqlist > li, .logl > li, .tlist > li, .plog > li,
.modlist > .modrow, .custlist > *, .nblist > *, .acctpick > button{
  padding-left:var(--sp-5); padding-right:var(--sp-5);
  border-top:none; border-bottom:none;
  position:relative;
}
.rdl > li + li::before, .dqlist > li + li::before, .logl > li + li::before,
.tlist > li + li::before, .plog > li + li::before,
.modlist > .modrow + .modrow::before, .custlist > * + *::before,
.nblist > * + *::before, .acctpick > button + button::before{
  content:""; position:absolute; left:var(--separator-inset); right:0; top:0;
  height:1px; background:var(--separator);
}

/* ---- gruplar arasi bosluk: Apple'in olculen degeri 35px ------------------ */
.dqready, .dqbar, .dqfix, .dqtrend, .set section, .pnsec{
  margin-bottom:var(--group-gap);
}

/* ---- MUAFIYET: yazdirilabilir bulten ve e-posta ozeti (kirmizi cizgi) ---- */
.bul .ftbl, .bul .tbl, .mailpv .ftbl{
  background:none; border:none; border-radius:0;
}
.bul .ftbl th, .bul .ftbl td, .bul .tbl th, .bul .tbl td{
  padding-left:0; border-radius:0;
}
@media print{
  .ftbl, .mtx, .xt, .tbl, .imptable table,
  .rdl, .dqlist, .logl, .modlist, .custlist, .nblist, .acctpick, .tlist, .plog{
    background:none; border:none; border-radius:0;
  }
  .ftbl th, .ftbl td, .tbl th, .tbl td{ padding-left:0; }
}

/* ============================================================================
   BUYUK BASLIK ve COKME (Swiss kaldirma, Faz 5)

   16 sayfada baslik iki kez geciyordu: arac cubugunda <h1>, hemen altinda
   ayni metinle <h2>. Apple bunu tek basligla kurar -- buyuk baslik sayfanin
   ustunde durur, kaydirinca yerini arac cubugundaki kucuk basliga birakir.

   Erisilebilir baslik ARAC CUBUGUNDAKI <h1>; sayfadaki buyuk baslik onun
   gorsel ikizi ve `aria-hidden` -- ekran okuyucu ayni adi iki kez duyurmaz.
   ========================================================================= */
.rule3{ border-bottom:none; }   /* ayrim artik arac cubugunda */

/* Buyuk baslik TASIYAN sayfada kucuk baslik tepedeyken gizli. */
#app:has(.bigtitle) .mtop h1{ opacity:0; }

@supports (animation-timeline: scroll()){
  #app:has(.bigtitle) .mtop h1{
    animation:tb-baslik linear both;
    animation-timeline:scroll(root block); animation-range:24px 72px;
  }
  .mtop::after{
    animation:tb-cizgi linear both;
    animation-timeline:scroll(root block); animation-range:0 20px;
  }
}
@keyframes tb-baslik{ from{opacity:0; translate:0 8px} to{opacity:1; translate:0 0} }
@keyframes tb-cizgi{ from{opacity:0} to{opacity:1} }

/* Yedek: `animation-timeline` yoksa JS `#app`e `.scrolled` ekler. */
@supports not (animation-timeline: scroll()){
  #app:has(.bigtitle) .mtop h1{ transition:opacity var(--d-quick) var(--spring-quick); }
  #app.scrolled:has(.bigtitle) .mtop h1{ opacity:1; }
  .mtop::after{ transition:opacity var(--d-quick) var(--spring-quick); }
  #app.scrolled .mtop::after{ opacity:1; }
}

/* Hareket azaltmada cokme YOK: baslik ve cizgi hep gorunur. */
@media (prefers-reduced-motion: reduce){
  #app:has(.bigtitle) .mtop h1{ opacity:1; animation:none; }
  .mtop::after{ opacity:1; animation:none; }
}


/* ============================================================================
   KOYU TEMADA YUKSELTME (Swiss kaldirma, Faz 6)

   Apple koyu temada derinligi GOLGEYLE degil zemin basamagiyla anlatir --
   golge zaten siyah ustunde gorunmez. Uc basamak:

     sayfa zemini      #F5F5F7 / #000000
     liste-tablo kabi  #FFFFFF / #1C1C1E
     kabin USTUNDEKI   #FFFFFF / #2C2C2E   (sayfa, onay penceresi, secili satir)

   Satir vurgusu `--wash`e bagliydi; koyuda --wash #1C1C1E, yani kabin
   KENDISI -- ustune gelince hicbir sey degismiyordu. Saydam dolgu her iki
   temada da isler, cunku altindaki zemine gore koyulasir/acilir.
   ========================================================================= */
/* `[data-open]` SECILI DEGIL, satirin KIMLIGI -- her satirda var. Ilk yazimda
   onu durum sanip 254 satirin hepsine dolgu verdim; koyu temada metin
   kontrasti 5.4'ten 4.45'e dustu. Klavye imleci `.cur`, tablo satiri `.on`. */
.rw.cur{ background:var(--fill-3); }
.tbl tbody tr:hover td{ background:var(--fill-4); }
.tbl tbody tr.cur td{ background:var(--fill-3); }

/* Sayfa ve pencereler kabin USTUNDE durur: bir basamak daha. */
.pan, .mbox, .cbox, .cnfb, .cb2{ background:var(--bg-elevated-2); }

/* Giris kapisi gruplanmis liste TASIMIYOR: orada kap yok, dolayisiyla kabin
   arkasi da yok. Faz 11'in karari duruyordu -- "kart degil, uygulamanin kendi
   editoryal duzeni surer" -- zemin tabanda kaliyor. */
body:has(.gate), body:has(.lbox){ background:var(--bg); }

/* ============================================================================
   KALAN YUZEYLER ve ERISILEBILIRLIK (Swiss kaldirma, Faz 8)
   ========================================================================= */

/* ---- dokunma hedefi -------------------------------------------------------
   Apple'in ASGARISI 28x28 (isaretci), dokunmada varsayilan 44. Geri baglantisi,
   bolum gezinmesi ve bazi alanlar 14-27px'te kalmisti. Metin ICINDEKI baglanti
   muaf: orada hedef satirin kendisi. */
.ph2 .bk, .ph2 .ix, .subnav a, .tabs a, .calhead .nb a, dd a,
td form button, .ftbl td a, .ftbl td button, .actrow a, .actrow button,
.inbox a, .plog a, .pill, .pills button{
  display:inline-flex; align-items:center; min-height:var(--hit-min-pointer);
  /* Esnek kap, cocuklar arasindaki BOSLUK METNINI siler: `Musteriler <span>12</span>`
     kaynakta bosluklu ama ekranda "Musteriler12" olarak yapisiyordu (olculen
     aralik 0px). Bosluk artik `gap` ile aciktan veriliyor; tek cocuklu
     baglantilar etkilenmez, cunku gap yalniz ogeler ARASINDA is gorur. */
  gap:var(--sp-1);
}
input[type=text], input[type=number], input[type=date], input[type=search],
input[type=url], input[type=email], input[type=password], input[type=time],
select, textarea{ min-height:var(--hit-min-pointer); }
/* Onay kutusu ve radyo isaretcide 15px kaliyor: Apple da macOS'ta bu boyutu
   gonderiyor (AppKit'in kucuk onay kutusu 12pt). 28px asgarisi DUGME icin.
   Dokunmada ise gercek parmak var -- orada buyuyor. */
@media (pointer: coarse){
  input[type=checkbox], input[type=radio]{ width:24px; height:24px; }
  input[type=checkbox]:checked::after{ scale:1.5; }
}

@media (pointer: coarse){
  .ph2 .bk, .ph2 .ix, .subnav a, .tabs a, .calhead .nb a, dd a,
  td form button, .ftbl td a, .ftbl td button, .actrow a, .actrow button,
  .inbox a, .plog a, .pill, .pills button,
  /* Ust sag kume ve kenar cubugu isaretcide 28-32px'te dogru; dokunmada
     Apple'in varsayilani 44 ve bunlar uygulamanin en cok kullanilan
     denetimleri -- iPhone'da olculdu. */
  .newb, .bell, .acct > button, .sbh, .sbtoggle, .nicin>summary,
  input[type=text], input[type=number], input[type=date], input[type=search],
  input[type=url], input[type=email], input[type=password], input[type=time],
  select, textarea{ min-height:var(--hit-min); }
}

/* ---- isletim sistemi tercihleri -------------------------------------------
   Ikisi de GERCEK iOS/macOS ayari ve ikisi de Safari'de var. Uygulamanin
   kendi `data-hc` anahtari duruyor; bu blok onu OS'tan da tetikliyor. */
@media (prefers-contrast: more){
  /* Jeton tarafi tokens.css'te (palet TEK dosyada tanimlanir, proje karari). */
  .fchip, .seg, .btn{ box-shadow:inset 0 0 0 1px var(--separator-opaque); }
}
@media (prefers-reduced-transparency: reduce){
  /* Malzeme katmani opaklasir: bulaniklik kalkar, zemin tam renk olur.
     14 yerde backdrop-filter var ve hicbirinin yedegi yoktu. */
  .sb, .menu, .fpop, .sec, .tdl, .mtop::before, .tb, .to{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:var(--bg-elevated);
  }
  .mtop::before{ background:var(--bg-grouped); }
  /* Bolum basligi ve bugun cizgisi KABIN DISINDA, gruplanmis zeminin uzerinde
     yuzuyor: opaklasinca kart rengini degil zemini almalilar. */
  .sec, .tdl{ background:var(--bg-grouped); }
}

/* ============================================================================
   E0 — HATA KAPATMA (Apple etkileşim programı)
   ========================================================================= */

/* ---- H3: bölüm başlığı gerçek <h2>, içinde daraltma düğmesi ---------------- */
h2.sec{ margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }
.secb{
  display:flex; align-items:baseline; gap:14px; flex:1 1 auto; min-width:0;
  background:none; border:0; margin:0; padding:0; font:inherit; color:inherit;
  letter-spacing:inherit; text-align:left; cursor:pointer;
}
.secb:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; border-radius:6px; }
/* Hit alanı: düğme 15 px'ti (WCAG 24, Apple işaretçi asgarisi 28). Negatif kenar
   boşluğu yerleşim yüksekliğini değiştirmez; dokunmada başlık 44'e tamamlanır. */
.secb{ min-height:var(--hit-min-pointer); margin:-6px 0; align-items:center; }
@media (pointer: coarse){
  h2.sec{ padding-top:0; padding-bottom:0; align-items:center; }
  .secb{ min-height:var(--hit-min); margin:0; }
}
.sec .sectw{ font-size:var(--t-body); line-height:1; width:14px; color:var(--label-3); }
/* Daraltılmış bölüm hidden="until-found": tarayıcı content-visibility ile gizler, ⌘F bulunca
   beforematch ile açılır (E6). display:none dayatılmaz — o aramayı da kapatırdı. */

/* ---- H8: basılı durum — Apple "Always include a press state" ---------------
   Dört dil: düz düğme kararır (opaklık), dolu düğme koyulaşır, satır ve liste
   öğesi dolgu alır, sekme/çip küçülür. Dokunma vurgusu tarayıcıdan alınmaz. */
button, [role="button"], a.btn, .sbi, .sbn, .tb, .ix, .fchip .x, .rwb, .qb, .ci, .pill, .seti{
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .ix:active, .fadd:active, .flink:active, .fmore:active, .sbtoggle:active,
.bell:active, .acct > button:active, .cls:active, .sortb:active, .cb:active,
.fmenu button:active, .secb:active, .menu button:active, .menu a:active, .foc:active{
  opacity:.62; transition-duration:0ms;
}
.btn.pri:active, .newb:active, .btn.danger:active{
  opacity:1; filter:brightness(.86); transition-duration:0ms;
}
.rwb:active, .sbi:active, .sbn:active, .seti:active, .ci:active, .tbl tbody tr[data-open]:active td{
  background:var(--fill-2); transition-duration:0ms;
}
.seg button:active, .seg a:active, .tb:active, .pill:active, .fchip .x:active, .qb:active, .swb:active{
  scale:.96; opacity:.8; transition-duration:0ms;
}
.rw:active{ background:var(--fill-2); }

/* ============================================================================
   E1 — ÜÇ BÖLME: kalıcı detay / denetçi (Apple etkileşim programı, K1)
   ============================================================================
   Apple Mail modeli: kenar çubuğu + liste + detay. ≥1280 px'te detay ızgaranın
   üçüncü sütunu — perde yok, inert yok; seçim listede kalıcı vurgulu, denetçi
   seçimi izler (HIG Split views / Panels). ⌘I gizler; tercih sunucuda.
   1001–1279 px: eski perdeli panel. <861 px: kağıt. Geçişler yıkıcı değil. */
/* Kapsayıcı #view: `.page` `margin:0 auto` taşıdığı için inline-size sınırlaması
   onu sıfır genişliğe çökertiyordu (auto marj + içeriksiz boyut = 0). Blok düzeyli
   #view kapsayıcı bloğunu doldurur, sınırlamadan etkilenmez.
   Satır ızgarası görünüm genişliğine değil LİSTE SÜTUNUNA bakar: denetçi
   açıkken 1280 px'lik ekranda liste ~600 px kalır. */
#view{ container:page / inline-size; }
/* `.page` `width:auto` + `margin:0 auto` ile daralmaya (shrink-to-fit) giriyordu ve
   sınırlanmış #view max-content'e 0 katkı verdiği için araç çubuğu kadar kalıyordu
   (1161 px'lik sütunda 608 px). Sütunu doldurur, 1560 px'te ortalanır. */
#app:has(> .sb) > .page{ width:100%; min-width:0; }
@container page (max-width: 900px){
  .rw.hot .rwb,.rw.warm .rwb,.tdl{ grid-template-columns:88px minmax(0,1fr) 150px 96px; }
  .rw.hot .k,.rw.warm .k{ display:none; }
}
@container page (max-width: 640px){
  .rw.hot .rwb,.rw.warm .rwb,.rw.cool .rwb,.tdl{ grid-template-columns:72px minmax(0,1fr) 88px; }
  .rw .c,.rw .k{ display:none; }
  /* 333 px'lik satirda uc sutun sigmiyordu: `-152g` 82.7 px isterken sutunu
     72 px'ti, gun sayisi basliga 3.3 px kala giriyordu (yalniz hot satirlar:
     warm/cool'un gun puntosu kucuk, tasmiyor). Kullanici karari: mutlak tarih
     alt satira iner, baslik tam genisligi alir. */
  .rw, .sec, .tdl{ --row-end:16px; }
  .rw.hot .rwb,.tdl{ grid-template-columns:86px minmax(0,1fr) auto; }
  /* 375 px'te tarih + erim + cizgi ayni satira sigmiyor; erim duser, cizgi kalir.
     Cizginin kendisi ASLA dusmez: fazin nesnesi o. */
  .tdl .rng,.tdl .dat{ display:none; }
  .tdl .dats{ display:block; }
  .rw.hot .t{ grid-column:2 / -1; }
  .rw.hot .sub{ grid-column:2; grid-row:2; }
  .rw.hot .dd{ grid-column:3; grid-row:2; margin-top:4px; }
}
@media (min-width: 1280px){
  /* Sütun yalnız bir kayıt AÇIKKEN var; boşken 0 px — geçiş yay ile (kullanıcı kararı). */
  #app.insp:has(> .sb){ grid-template-columns:var(--sb-w, 264px) minmax(0,1fr) 0px;
    transition:grid-template-columns var(--d-smooth) var(--spring-smooth); }
  #app.insp:has(> .sb):has(> .pan.on){ grid-template-columns:var(--sb-w, 264px) minmax(0,1fr) var(--insp-w); }
  #app.insp.sb-off:has(> .sb){ grid-template-columns:0 minmax(0,1fr) 0px; }
  #app.insp.sb-off:has(> .sb):has(> .pan.on){ grid-template-columns:0 minmax(0,1fr) var(--insp-w); }
  #app.insp > .pan{
    position:sticky; top:0; height:100dvh; width:auto; min-width:0; overflow:hidden;
    transform:none; translate:none; transition:none;
    border-radius:0; box-shadow:none; z-index:auto;
    border-left:1px solid var(--separator-opaque);
    background:var(--bg-elevated);
  }
  #app.insp > .pan .ph{ padding-top:calc(var(--sp-5) + env(safe-area-inset-top)); }
  #app.insp > .pan:not(.on){ visibility:hidden; border-left-color:transparent; }
  #app.insp > .pan > *{ min-width:var(--insp-w); }
}
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:var(--sp-2); padding:var(--sp-8) var(--sp-6); color:var(--label-2);
}
.pempty .ico{ font-size:var(--t-largetitle); line-height:1; color:var(--label-3); margin-bottom:var(--sp-2); }
.pempty b{ font-size:var(--t-headline); font-weight:var(--w-emphasis); color:var(--label); }
.pempty span{ font-size:var(--t-subhead); max-width:28ch; text-wrap:balance; }
.pempty .keys{ margin-top:var(--sp-3); font-size:var(--t-caption1); color:var(--label-3); }
/* Klavyeyle seçim yüklenirken içerik hafifçe söner; iskelet yalnız tıkta. */
.pan[aria-busy="true"] > *{ opacity:.6; transition:opacity var(--d-quick) var(--spring-quick); }

/* ============================================================================
   E2 — SAYFALAR ARASI SÜREKLİLİK (Apple etkileşim programı, K2)
   ============================================================================
   Yumuşak gezinme JS'te (#view takası + oob kabuk); geriye kalan tam yüklemeler
   (giriş, geri tuşu — geçmiş önbelleği güvenlik için kapalı) beyaz flaş yerine
   belgeler arası View Transition ile solunur. Safari 18.2+, Chrome 126+. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } }

/* ============================================================================
   E3 — TEK ARAMA (Apple etkileşim programı, K3)
   ============================================================================
   Öneri katmanı arama alanına bağlı yerel popover (anchor). Malzeme katmanı,
   combobox deseni; seçili satır vurgu, jeton satırı "jeton" etiketi. */
.srch{ anchor-name:--srch; }
.srchpop{
  position:absolute; position-anchor:--srch; inset:auto;
  top:anchor(bottom); left:anchor(left); margin:6px 0 0;
  width:max(anchor-size(width), 380px); max-width:min(560px, 92vw);
  max-height:min(60vh, 520px); overflow:auto;
  padding:var(--sp-1); border:1px solid var(--separator);
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-regular); backdrop-filter:var(--material-regular);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  opacity:0; scale:.98; transform-origin:top left;
  transition:opacity var(--d-quick) var(--spring-quick), scale var(--d-quick) var(--spring-snappy),
             overlay var(--d-quick) allow-discrete, display var(--d-quick) allow-discrete;
}
.srchpop:popover-open{ opacity:1; scale:1; }
@starting-style{ .srchpop:popover-open{ opacity:0; scale:.98; } }
@supports not (position-anchor: --srch){ .srchpop{ position:fixed; top:64px; left:auto; right:var(--pad); width:380px; } }
.srchpop .sg{ padding:var(--sp-2) var(--sp-3) var(--sp-1); font-size:var(--t-footnote); color:var(--label-3); font-weight:var(--w-emphasis); }
.srchpop .so{
  display:flex; align-items:baseline; gap:var(--sp-3); width:100%; text-align:left;
  padding:7px var(--sp-3); border:none; background:none; cursor:pointer; color:var(--label);
  border-radius:var(--radius-sm); font-size:var(--t-body); line-height:var(--lh-body); min-height:32px;
}
.srchpop .so .tt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srchpop .so .hh{ font-size:var(--t-footnote); color:var(--label-3); white-space:nowrap; }
.srchpop .so:hover{ background:var(--fill-4); }
.srchpop .so[aria-selected="true"]{ background:var(--fill-3); }
.srchpop .so.tok .tt::after{
  content:"jeton"; margin-left:var(--sp-2); padding:1px 7px; border-radius:var(--radius-pill);
  background:var(--fill-3); color:var(--label-2); font-size:var(--t-caption2); vertical-align:middle;
}
.srchpop .ssc{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3) 0; font-size:var(--t-footnote); color:var(--label-2); }
.srchpop .swd{ margin-left:auto; border:none; background:none; color:var(--tint); font-size:var(--t-footnote); cursor:pointer; padding:2px 6px; border-radius:var(--radius-sm); }
.srchpop .sempty{ margin:0; padding:var(--sp-3); color:var(--label-3); font-size:var(--t-subhead); }
@media (width <= 680px){ .srchpop{ position:fixed; inset:auto var(--pad) auto var(--pad); top:calc(var(--tb-h, 58px) + 62px); width:auto; max-width:none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){ .srchpop{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-elevated); } }
@media (pointer: coarse){ .srchpop .so{ min-height:44px; } }

/* ============================================================================
   TAKVİM VE DENETİM DİLİ — kullanıcı geri bildirimi (09.09.2026, E3 sırasında)
   ============================================================================
   "Bu alanın görüntüsü çok vasat": ızgara sütunları eşit değildi ve denetçiye
   çarpıp kesiliyordu; segmentler parantez gibi görünüyordu (Swiss'ten kalan
   1 px siyah ara çizgi + yuvarlak köşe); ay gezinmesi ve "+ Filtre ekle" siyah /
   kesikli çerçeve taşıyordu; boş denetçi takvimde anlamsızdı. */

/* ---- takvim ızgarası: yedi EŞİT sütun, uzun başlık sütunu genişletemez ------ */
.cal{ grid-template-columns:repeat(7, minmax(0, 1fr)); border-left:none; }
.cal .cell, .cal .dow{ min-width:0; }
.cal .dow{ border-right:none; color:var(--label-3); font-weight:var(--w-emphasis); font-size:var(--t-caption1); letter-spacing:0; padding:6px 8px; }
.cal .cell{ min-height:96px; border-right:1px solid var(--separator); border-bottom:1px solid var(--separator); padding:6px 6px 8px; }
@media (width <= 680px){ .cal .cell{ min-height:64px; } }
.cal .cell:nth-child(7n){ border-right:none; }
.cal .cell .dn{ font-size:var(--t-footnote); color:var(--label-2); font-variant-numeric:tabular-nums; }
.cal .cell.wk .dn{ color:var(--label-3); }
.cal .cell.wk, .cal .cell.off{ background:var(--bg-grouped); }
/* Bugün: Apple'ın dolu kırmızı dairesi; üstte çubuk yok. */
.cal .cell.today{ box-shadow:none; }
.cal .cell.today .dn b{
  background:var(--red-fill); color:#fff; border-radius:999px; min-width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font-weight:var(--w-emphasis);
}
/* Etkinlik: renk aciliyeti söyler (K14) — mavi tıklanabilirlik rengidir, burada değil. */
.cal .ev{
  min-width:0; border-left-width:3px; border-left-color:var(--orange-fill); border-radius:4px;
  background:var(--fill-4); color:var(--label); font-size:var(--t-footnote); line-height:1.35; padding:3px 7px;
}
.cal .ev:hover{ background:var(--fill-3); }
.cal .ev.sig{ border-left-color:var(--red-fill); }
.cal .ev.calm{ border-left-color:var(--gray-fill); color:var(--label-2); }
.cal .more{ color:var(--tint); font-weight:var(--w-regular); letter-spacing:0; font-size:var(--t-footnote); }

/* ---- takvim başlığı: çevresiz gezinme (Apple Takvim), sessiz açıklama ------- */
.calhead{ padding:18px 0 10px; align-items:center; gap:14px; }
.calhead h2{ font-size:var(--t-title1); letter-spacing:var(--tr-title1); line-height:var(--lh-title1); }
.calhead .nb{ gap:2px; }
.calhead .nb button, .calhead .nb a{
  border:none; background:none; margin:0; color:var(--tint); padding:4px 10px; min-width:32px;
  border-radius:var(--radius-sm); font-size:var(--t-body); font-weight:var(--w-regular); letter-spacing:0;
}
.calhead .nb button:hover, .calhead .nb a:hover{ background:var(--fill-4); color:var(--tint); }
.calhead .nb button[aria-current="true"]{ color:var(--label-3); }
.calhead .nb button span{ font-size:var(--t-title3); line-height:1; }
.calhead .lg{ font-size:var(--t-footnote); font-weight:var(--w-regular); letter-spacing:0; color:var(--label-3); gap:12px; }
.calhead .lg i{ width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:0; }
.calhead .metan{ color:var(--label-3); }

/* ---- segment denetimi: ara çizgi yok, Apple'ın kısa ayraçları --------------- */
.seg button+button, .seg a+a{ border-left:none; }
.seg > *{ position:relative; }
.seg > * + *::before{
  content:""; position:absolute; left:-1px; top:24%; height:52%; width:1px;
  background:var(--separator-opaque); pointer-events:none;
}
.seg > [aria-pressed="true"]::before, .seg > [aria-pressed="true"] + *::before{ display:none; }
.seg button, .seg a{ font-weight:var(--w-regular); letter-spacing:0; font-size:var(--t-subhead); padding:4px 12px; }
.seg button[aria-pressed="true"], .seg a[aria-pressed="true"]{ font-weight:var(--w-emphasis); }
/* Form üstündeki tür seçici de aynı dil (siyah çerçeveli Swiss segmenti kalmıştı). */
.seg2{ background:var(--fill-4); border-radius:var(--radius-md); padding:2px; gap:0; }
.seg2 button{ border:none; margin:0; border-radius:calc(var(--radius-md) - 2px); font-weight:var(--w-regular); letter-spacing:0; font-size:var(--t-subhead); color:var(--label); }
.seg2 button[aria-pressed="true"]{ background:var(--bg-elevated); color:var(--label); box-shadow:var(--shadow-1); font-weight:var(--w-emphasis); }

/* ---- "+ Filtre ekle": kesikli çerçeve yerine renkli metin düğmesi (Reminders) - */
.fadd{ border:none; background:none; color:var(--tint); padding:4px 8px; border-radius:var(--radius-sm);
  font-weight:var(--w-regular); letter-spacing:0; font-size:var(--t-subhead); }
.fadd:hover, .fadd[aria-expanded="true"]{ border:none; background:var(--fill-4); color:var(--tint); }

/* ============================================================================
   E4 — TEK KATMAN DİLİ (Apple etkileşim programı)
   ============================================================================
   İki mekanizma kaldı: yerel <dialog> (pencereler: form, paylaşım, gelişmiş
   filtre, palet, yardım, onay) ve yerel popover (menüler: hesap, taşma, filtre
   niteliği, arama önerileri). Perde .modal'ın içinde; dialog kendisi saydam. */
dialog.ovl{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; overflow:visible; color:inherit;
}
dialog.ovl::backdrop{ background:transparent; }
dialog.ovl:not([open]){ display:none; }
dialog.ovl > .modal{ position:fixed; inset:0; }
/* Pencere ekrandan uzunsa gövde kendi içinde kayar; başlık ve Kaydet çubuğu hep görünür. Eskiden perdenin
   kendisi kayıyordu: iPad'de, dizüstünde, hatta 1440×900 masaüstünde Kaydet ekranın altında kalıyordu
   (ölçüldü, 13.09.2026). iPhone kağıdı (≤680 px) bunu zaten yapıyor. Formun kendisi gövde olduğunda
   (`form.mb`) alan ızgarası korunur. */
@media (width > 680px){
  dialog.ovl > .modal:has(> .mbox){ overflow:hidden; }
  dialog.ovl .mbox{ display:flex; flex-direction:column; max-height:calc(100vh - 12vh); max-height:calc(100dvh - 12vh); }
  dialog.ovl .mbox > form:not(.mb){ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  dialog.ovl .mbox .mb{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
}

/* ---- hesap menüsü: popover + anchor (eskiden hidden anahtarı) ---------------- */
.acct > button{ anchor-name:--acct; }
.acct .menu[popover]{
  position:absolute; position-anchor:--acct; inset:auto;
  top:anchor(bottom); right:anchor(right); margin:8px 0 0; left:auto;
  opacity:0; scale:.96; transform-origin:top right;
  transition:opacity var(--d-quick) var(--spring-quick), scale var(--d-quick) var(--spring-snappy),
             overlay var(--d-quick) allow-discrete, display var(--d-quick) allow-discrete;
}
.acct .menu[popover]:popover-open{ opacity:1; scale:1; }
@starting-style{ .acct .menu[popover]:popover-open{ opacity:0; scale:.96; } }
.acct .menu[popover]::backdrop{ background:transparent; }
@supports not (position-anchor: --acct){ .acct .menu[popover]{ position:fixed; top:56px; right:var(--pad); } }

/* ---- filtre niteliği menüsü: popover + anchor, malzeme katmanı ---------------- */
.fadd{ anchor-name:--fadd; }
.fpop[popover]{
  position:absolute; position-anchor:--fadd; inset:auto;
  top:anchor(bottom); left:anchor(left); margin:4px 0 0; z-index:auto;
  background:var(--material-bg);
  -webkit-backdrop-filter:var(--material-regular); backdrop-filter:var(--material-regular);
  border:1px solid var(--separator); border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  padding:var(--sp-1); opacity:0; scale:.98; transform-origin:top left;
  transition:opacity var(--d-quick) var(--spring-quick), scale var(--d-quick) var(--spring-snappy),
             overlay var(--d-quick) allow-discrete, display var(--d-quick) allow-discrete;
}
.fpop[popover]:popover-open{ opacity:1; scale:1; }
@starting-style{ .fpop[popover]:popover-open{ opacity:0; scale:.98; } }
.fpop[popover]::backdrop{ background:transparent; }
@supports not (position-anchor: --fadd){ .fpop[popover]{ position:fixed; top:auto; left:var(--pad); } }
.fpop .hd{ letter-spacing:0; color:var(--label-3); font-weight:var(--w-emphasis); font-size:var(--t-footnote); }
.fpop button.it{ border-radius:var(--radius-sm); color:var(--label); }
.fpop button.it:hover{ background:var(--fill-4); color:var(--label); }
.fpop button.it[aria-pressed="true"]{ background:var(--fill-3); color:var(--label); font-weight:var(--w-emphasis); }
.fpop button.it:focus-visible{ outline:3px solid var(--tint); outline-offset:-2px; }
.fpop .col+.col{ border-left:1px solid var(--separator); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  .fpop[popover], .acct .menu[popover]{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-elevated); }
}

/* ============================================================================
   E5 — BASILI DURUM VE MİKRO GERİ BİLDİRİM (Apple etkileşim programı, K9/K10)
   ============================================================================
   Haptik anlamlarının görsel karşılığı: başarı → kısa yay + onay işareti,
   hata → yanal sarsıntı, işlem → düğme içinde ilerleme (genişlik sabit).
   Hover yalnız gerçek işaretçide (iPad trackpad: any-hover). */

/* ---- hover: dokunmada yapışan :hover yok ----------------------------------- */
@media (any-hover: none){
  .rw:is(:hover){ background:transparent; }
  /* `.qa` ve `.dd` kuralları artık KÜRESEL (bkz. `.rw .qa` tanımı): hızlı eylemler
     hiçbir cihazda satırın üstünde belirmiyor, dolayısıyla burada ezecek bir şey yok. */
  .sbi:hover, .sbn:hover, .fmenu button:hover, .srchpop .so:hover{ background:transparent; }
}

/* ---- Yapıldı: onay işareti yayla oturur (başarı haptiğinin karşılığı) -------- */
.rw.acting-done .d{ position:relative; color:var(--green); }
.rw.acting-done .d::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  background:var(--bg-elevated); color:var(--green); font-weight:var(--w-emphasis);
  animation:pop var(--d-snappy) var(--spring-bouncy) both;
}
@keyframes pop{ from{ scale:.4; opacity:0; } to{ scale:1; opacity:1; } }

/* ---- hata: yanal sarsıntı (hata haptiğinin karşılığı) ----------------------- */
@keyframes shake{ 0%,100%{ translate:0 0; } 20%{ translate:-6px 0; } 40%{ translate:5px 0; } 60%{ translate:-3px 0; } 80%{ translate:2px 0; } }
.to.err{ animation:up var(--d-snappy) var(--spring-snappy), shake 420ms var(--spring-quick) 120ms; }
.mbox.shake{ animation:shake 420ms var(--spring-quick); }

/* ---- düğme içi ilerleme: "Kaydet" → "Kaydediliyor…", genişlik sabit ---------- */
.btn[aria-busy="true"]{ pointer-events:none; color:transparent; position:relative; }
.btn[aria-busy="true"]::after{
  content:attr(data-busy-text); position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-weight:var(--w-emphasis);
}
.btn[aria-busy="true"]:not(.pri)::after{ color:var(--label); }

@media (prefers-reduced-motion: reduce){
  .rw.acting-done .d::after{ animation:none; }
  .to.err, .mbox.shake{ animation:none; }
}

/* ============================================================================
   E6 — LİSTE ETKİLEŞİMLERİ (Apple etkileşim programı, K6 K7 K8)
   ========================================================================= */
/* ---- seçim: Finder/Mail — dolgu + sol çubuk; birden çok satır seçilebilir ----- */
.rw.sel{ background:var(--fill-2); }
.rw.sel::before{ width:3px; background:var(--tint); }
.rw.sel .rwb{ color:var(--label); }
.rwb{ position:relative; }
/* Dokunma "Seç" kipi: iOS düzenleme kipi gibi daireler */
body.selmode .rw .rwb{ padding-left:40px; }
body.selmode .rw .rwb::before{
  content:""; position:absolute; left:10px; top:50%; translate:0 -50%; width:20px; height:20px;
  border-radius:50%; border:1.5px solid var(--label-3); box-sizing:border-box;
  display:grid; place-items:center; font-size:var(--t-caption1); line-height:1;
}
body.selmode .rw.sel .rwb::before{ content:"✓"; color:#fff; background:var(--tint-solid); border-color:var(--tint-solid); }
body.selmode .rw .qa{ display:none; }
/* Secim modunda eylemler gizli; tarih o zaman cekilmemeli. */
body.selmode .rw .dd{ opacity:1; }

/* ---- kayan toplu eylem çubuğu: malzeme, yüzer, yıkıcı sonda kırmızı ----------- */
.bulk{
  position:sticky; bottom:calc(var(--sp-4) + env(safe-area-inset-bottom)); z-index:20;
  margin:var(--sp-4) auto 0; width:max-content; max-width:100%;
  background:var(--material-bg); -webkit-backdrop-filter:var(--material-thick); backdrop-filter:var(--material-thick);
  color:var(--label); border:1px solid var(--separator); border-radius:var(--radius-md); box-shadow:var(--shadow-3);
  padding:var(--sp-1) var(--sp-2); gap:var(--sp-1); animation:up var(--d-snappy) var(--spring-snappy);
}
.bulk .cnt{ padding:6px 10px; font-weight:var(--w-emphasis); font-size:var(--t-subhead); margin-right:var(--sp-2); white-space:nowrap; }
.bulk button{
  padding:6px 10px; border:none; border-left:none; border-radius:var(--radius-sm); color:var(--tint);
  font-size:var(--t-subhead); font-weight:var(--w-regular); letter-spacing:0; white-space:nowrap;
}
.bulk button:hover{ background:var(--fill-4); }
.bulk button.danger{ color:var(--red); }
.bulk button.x{ color:var(--label-2); margin-left:var(--sp-2); }
.bulk button.x:hover{ background:var(--fill-4); color:var(--label); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){ .bulk{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-elevated); } }
/* MR-3 (M5): sekme çubuğu olan genişlikte toplu çubuk onun ÜSTÜNDE durur. Ölçüldü: alt boşluk 16 px, sekme
   çubuğu 50 px — 41 px'lik çubuğun 34 px'i örtülüyordu. Telefonda düğmeler 44 px, sığmayan yana kayar. */
@media (width <= 860px){
  .bulk{ bottom:calc(50px + var(--sp-2) + env(safe-area-inset-bottom)); }
}
@media (width <= 680px){
  .bulk{ overflow-x:auto; scrollbar-width:none; }
  .bulk button{ min-height:44px; }
}

/* ---- bağlam menüsü: taşma menüsüyle aynı dil ------------------------------------ */
.ctx{
  position:fixed; inset:auto; margin:0; min-width:220px; max-width:min(320px, 92vw); padding:var(--sp-1);
  background:var(--material-bg); -webkit-backdrop-filter:var(--material-regular); backdrop-filter:var(--material-regular);
  border:1px solid var(--separator); border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  opacity:0; scale:.96; transform-origin:top left;
  transition:opacity var(--d-quick) var(--spring-quick), scale var(--d-quick) var(--spring-snappy),
             overlay var(--d-quick) allow-discrete, display var(--d-quick) allow-discrete;
}
.ctx:popover-open{ opacity:1; scale:1; }
@starting-style{ .ctx:popover-open{ opacity:0; scale:.96; } }
.ctx::backdrop{ background:transparent; }
.ctx button{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left; min-height:32px;
  padding:0 var(--sp-3); border:none; background:none; cursor:pointer; border-radius:var(--radius-sm);
  color:var(--label); font-size:var(--t-body); line-height:var(--lh-body);
}
.ctx button .tt{ flex:1; }
.ctx button kbd{ font-family:var(--mono); font-size:var(--t-caption2); color:var(--label-3); }
.ctx button:hover, .ctx button:focus-visible{ background:var(--fill-4); outline:none; }
.ctx button.danger{ color:var(--red); }
.ctx .sep{ height:1px; background:var(--separator); margin:var(--sp-1) var(--sp-2); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){ .ctx{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-elevated); } }
@media (pointer: coarse){ .ctx button{ min-height:44px; } }

/* ---- takvimde sürükle-bırak -------------------------------------------------------- */
.cal .ev[draggable]{ cursor:grab; }
.cal .ev.dragging{ opacity:.45; }
.cal .cell.dragover{ background:var(--fill-3); box-shadow:inset 0 0 0 2px var(--tint); }
.cal .cell.dragover .dn{ color:var(--tint); }

/* ==== E7: Formlar — Apple'ın form dili ==================================================
   Yerel anahtar <input type="checkbox" switch> (Safari 17.4+; iOS 18+ sistem haptiği ve
   "anahtar" semantiği bedava). Görünüm her tarayıcıda aynı olsun diye appearance:none;
   işaretçide 40×24 (macOS oranı), dokunmada iOS'un gerçek 51×31'i. Basılıyken tokmak
   yatay uzar (UISwitch). Seçici input.sw[switch]: genel input[type=checkbox] kuralını
   (onay kutusu, 15px, ✓) özgüllükle geçer. */
input.sw[switch]{ appearance:none; -webkit-appearance:none; display:inline-block; margin:0; inline-size:40px; block-size:24px; flex:none;
  border:none; border-radius:var(--radius-pill); background:var(--fill-1); box-shadow:none; position:relative; cursor:pointer;
  vertical-align:middle; transition:background var(--d-quick) var(--spring-quick); }
input.sw[switch]::after{ content:none; }
input.sw[switch]::before{ content:""; position:absolute; top:2px; left:2px; inline-size:20px; block-size:20px; border-radius:var(--radius-pill);
  background:white; box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.08);
  transition:translate var(--d-quick) var(--spring-snappy), inline-size var(--d-quick) var(--spring-quick); }
input.sw[switch]:hover{ box-shadow:none; }
input.sw[switch]:checked{ background:var(--green); box-shadow:none; }
input.sw[switch]:checked::before{ translate:16px 0; }
input.sw[switch]:active:not(:disabled)::before{ inline-size:24px; }
input.sw[switch]:checked:active:not(:disabled)::before{ translate:12px 0; }
input.sw[switch]:disabled{ opacity:.4; cursor:not-allowed; }
input.sw[switch]:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; }
@media (pointer: coarse){ input.sw[switch]{ inline-size:51px; block-size:31px; } input.sw[switch]::before{ inline-size:27px; block-size:27px; }
  input.sw[switch]:checked::before{ translate:20px 0; } input.sw[switch]:active:not(:disabled)::before{ inline-size:31px; }
  input.sw[switch]:checked:active:not(:disabled)::before{ translate:16px 0; } }
@media (prefers-contrast: more){ input.sw[switch]{ box-shadow:inset 0 0 0 1px var(--label-3); } }

/* Zorunlu alan kapısı: neden düğmenin YANINDA, hata alanın ALTINDA (Apple: sorunu kaynağına yakın göster). */
.f [aria-invalid="true"]{ border-bottom-color:var(--sig); }
.mfhint{ align-self:center; margin-right:var(--sp-3); color:var(--sig); font-size:var(--t-footnote); font-weight:var(--w-emphasis); }
.mfhint[hidden]{ display:none; }
@media (width <= 680px){ .mfhint{ display:none; } }

/* K12: tarih kısayolları (Reminders'ın Bugün · Yarın · Hafta sonu jetonları) + masaüstünde popover takvim. */
.dq{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dq button{ min-height:28px; padding:0 10px; border:none; border-radius:var(--radius-pill); background:var(--fill-3); color:var(--tint);
  font-size:var(--t-footnote); font-weight:var(--w-emphasis); line-height:1; cursor:pointer;
  transition:background var(--d-quick) var(--spring-quick), color var(--d-quick) var(--spring-quick), scale var(--d-quick) var(--spring-quick); }
.dq button:hover{ background:var(--fill-2); }
.dq button:active{ scale:.96; }
.dq button[aria-pressed="true"]{ background:var(--tint); color:white; }
.dq button:focus-visible{ outline:3px solid var(--tint); outline-offset:2px; }
.dq .dqcal{ margin-left:auto; min-width:28px; padding:0 8px; }
@media (any-hover: none){ .dq .dqcal{ display:none; } }
.dpop{
  position:fixed; inset:auto; margin:0; width:280px; padding:var(--sp-2);
  background:var(--material-bg); -webkit-backdrop-filter:var(--material-regular); backdrop-filter:var(--material-regular);
  border:1px solid var(--separator); border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  opacity:0; scale:.96; transform-origin:top left;
  transition:opacity var(--d-quick) var(--spring-quick), scale var(--d-quick) var(--spring-snappy),
             overlay var(--d-quick) allow-discrete, display var(--d-quick) allow-discrete;
}
.dpop:popover-open{ opacity:1; scale:1; }
@starting-style{ .dpop:popover-open{ opacity:0; scale:.96; } }
.dpop::backdrop{ background:transparent; }
.dpop .dh{ display:flex; align-items:center; gap:4px; padding:2px 2px 8px; }
.dpop .dh b{ flex:1; text-align:center; font-size:var(--t-subhead); font-weight:var(--w-emphasis); color:var(--label); }
.dpop .dh button{ inline-size:28px; block-size:28px; border:none; border-radius:var(--radius-pill); background:none; color:var(--tint); cursor:pointer; font-size:var(--t-body); }
.dpop .dh button:hover{ background:var(--fill-4); }
.dpop .dg{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px; }
.dpop .dg span{ text-align:center; font-size:var(--t-caption2); font-weight:var(--w-emphasis); color:var(--label-3); padding:4px 0; }
.dpop .dg button{ aspect-ratio:1; border:none; background:none; border-radius:var(--radius-pill); color:var(--label);
  font-size:var(--t-footnote); font-variant-numeric:tabular-nums; cursor:pointer; }
.dpop .dg button.out{ color:var(--label-3); }
.dpop .dg button.today{ color:var(--tint); font-weight:var(--w-emphasis); }
.dpop .dg button:hover{ background:var(--fill-4); }
.dpop .dg button[aria-selected="true"]{ background:var(--tint); color:white; }
.dpop .dg button:focus-visible{ outline:3px solid var(--tint); outline-offset:-2px; }

/* Combo box (APG): datalist verisi, tuşla gezilen öneri listesi; dokunmatikte yerel datalist kalır. */
.cbpop{
  position:fixed; inset:auto; margin:0; padding:var(--sp-1); max-height:264px; overflow-y:auto;
  background:var(--material-bg); -webkit-backdrop-filter:var(--material-regular); backdrop-filter:var(--material-regular);
  border:1px solid var(--separator); border-radius:var(--radius-md); box-shadow:var(--shadow-2);
}
.cbpop::backdrop{ background:transparent; }
.cbpop [role="option"]{ padding:6px 10px; border-radius:var(--radius-sm); color:var(--label); font-size:var(--t-body); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cbpop [role="option"]:hover{ background:var(--fill-4); }
.cbpop [role="option"][aria-selected="true"]{ background:var(--tint); color:white; }
.cbpop mark{ background:none; color:inherit; font-weight:var(--w-emphasis); }

/* Aşamalı açılım: bağlı alan yalnız anlamlıyken görünür (Apple: "yalnız gerekli olanı göster"). */
.f[data-show-when]:not([hidden]){ animation:fadeUp var(--d-quick) var(--e-out) both; }

/* ==== E8: iPhone ========================================================================
   Tek satır 54 pt gezinme çubuğu (☰ · başlık · ⌕ · +), yapışkan; filtre çubuğu tek satır (yatay
   kayan çipler, segmentler ⋯ kağıdında, ⋯ yerinde); form = tam kağıt (Vazgeç · Kaydet başlıkta,
   gövde kayar, alttan yaylanır, parmakla sürüklenir); çekmece perde + inert; klavye için
   visualViewport (--vvh/--vvt). Masaüstü ve iPad geniş düzen bu bloktan etkilenmez. */
.srchbtn, .srchx, .shb, .fmseg, .sbfoot{ display:none; }
/* MR-1/MR-2: telefon satırı ve telefonun şerit anahtarı masaüstünde yok; masaüstü şerit tercihi telefonu bağlamaz. */
.kbar{ display:none; }
@media (width > 680px){ .fmenu .ftimeph{ display:none; } .sig18[data-dk-off]{ display:none; } }
/* MR-2 (M13): dokunmatik ekranda klavye kısayol harfi anlamsız ve düğmede yer kaplıyordu. */
@media (hover: none) and (pointer: coarse){ .btn kbd{ display:none; } }
@media (width <= 680px){
  .mtop{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:nowrap; align-items:center; gap:2px;
    min-height:54px; padding:env(safe-area-inset-top) 0 0; }
  .mtop h1{ flex:1 1 auto; min-width:0; margin:0; width:auto; font-size:var(--t-headline); letter-spacing:var(--tr-headline);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mtop .sp{ display:none; }
  .mtop .right{ flex:0 0 auto; gap:0; margin:0; width:auto; min-width:0; align-items:center; }
  .mtop .srch, .mtop .bell, .mtop .acct{ display:none; }
  .srchbtn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:none; background:none;
    color:var(--tint); cursor:pointer; border-radius:var(--radius-md); }
  .srchbtn:active{ background:var(--fill-4); }
  .mtop.srch-on .sbtoggle, .mtop.srch-on h1, .mtop.srch-on .newb, .mtop.srch-on .srchbtn{ display:none; }
  .mtop.srch-on .right{ flex:1 1 auto; gap:var(--sp-1); }
  .mtop.srch-on .srch{ display:block; flex:1 1 auto; width:auto; min-width:0; }
  .mtop.srch-on .srch input{ min-height:36px; }
  .mtop.srch-on .srchx{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--sp-2); border:none; background:none;
    color:var(--tint); font-size:var(--t-body); cursor:pointer; white-space:nowrap; }
  .srchpop{ top:calc(var(--tb-h, 54px) + 4px); }

  .fbar{ position:static; flex-wrap:nowrap; align-items:center; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    gap:var(--sp-2); padding:var(--sp-2) 0; overscroll-behavior-x:contain; }
  .fbar::-webkit-scrollbar{ display:none; }
  .fbar .fgrp-a{ display:flex; flex:0 0 auto; flex-wrap:nowrap; }
  .fbar .fgrp-a > *{ flex:0 0 auto; }
  .fbar .sp, .fbar .fgrp-b{ display:none; }
  .fbar .fgrp-c{ position:sticky; right:0; margin-left:auto; flex:none; padding-left:var(--sp-3);
    background:linear-gradient(90deg, transparent, var(--bg-grouped) var(--sp-3)); }
  .fbar .cnt{ margin-left:0; order:0; } .fbar .qbad{ order:0; }
  .fmseg{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-1) var(--sp-1) var(--sp-2);
    border-bottom:1px solid var(--separator); margin-bottom:var(--sp-1); }
  .fmseg .seg{ display:flex; margin:0; } .fmseg .seg button{ flex:1 1 0; min-height:44px; justify-content:center; }
  /* MR-1 (DK-1, 13.09.2026): tür süzgeci telefonda kendi satırında, tek dokunuş. Parçalar içerik
     genişliğinde paylaşılır — eşit pay "Yenileme"yi 52 px'e sıkıştırıp yazıyı taşırıyordu (M3);
     dar ekranda satır yana kayar. Tür çipi çubukta tekrar etmez: durumu segment gösteriyor. */
  .kbar{ display:flex; margin:var(--sp-2) 0 0; overflow-x:auto; scrollbar-width:none; }
  .kbar::-webkit-scrollbar{ display:none; }
  .kbar .seg{ display:flex; flex:1 0 auto; margin:0; }
  .kbar .seg button{ flex:1 0 auto; min-height:44px; padding:0 8px; justify-content:center; white-space:nowrap; }
  .fbar .fchip.fk-kind{ display:none; }
  /* Dizin özeti etkin süzgeci ikinci kez yazıyordu ("Dizin ▾ Görev", M9); katlı Dizin ⋯ › Dizini aç ile açılır. */
  .index.collapsed{ display:none; }
  /* MR-2 (DK-3): şerit telefonda varsayılan kapalı; ⋯ › Zaman şeridi açar (`data-ph`). */
  .sig18:not([data-ph]){ display:none; }
  .fpop button.it{ min-height:44px; }
  /* MR-4 (M11): tablo telefonda yana kayan kabın içinde. Kap bir kaydırma kabı olduğu için yapışkan başlık
     sayfaya değil KABA yapışıyor: `top:var(--tb-h)` onu kabın içinde aşağı itip ilk kova etiketinin üstüne
     bindiriyor ve kabı 1 px taşırıyordu (ölçüldü). Başlık sütunu okunur genişlikte kalır. */
  .tbl th{ top:0; }
  .tblwrap{ overflow-y:hidden; }
  .tbl td.w{ min-width:11em; }

  /* Hesap grubu çekmecenin dibine SABİT (kullanıcı kararı, 13.09.2026). Ölçüldü (393×852): çekmece içeriği
     1058 px, "Ayarlar" 953 px'teydi — çekmece 206 px kaydırılmadan görünmüyordu. Listeler grubun üstünde kayar,
     malzeme arkasındakini bulanıklaştırır. Çekmecenin alt dolgusu gruba taşındı: yapışık konum ile doğal konum
     aynı yerde, liste sonuna gelince grup yerinden oynamaz. */
  .sb{ padding-bottom:0; }
  .sbfoot{ display:flex; flex-direction:column; gap:1px; margin-top:auto; position:sticky; bottom:0; z-index:1;
    margin-inline:calc(-1 * var(--sp-2)); padding:var(--sp-3) var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-bottom));
    border-top:1px solid var(--separator); background:var(--material-bg);
    -webkit-backdrop-filter:var(--material-regular); backdrop-filter:var(--material-regular); }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
    .sbfoot{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-elevated); }
  }
  .sbfoot form{ display:contents; }
  .sbfoot .sbn{ width:100%; text-align:left; border:none; background:none; font:inherit; cursor:pointer; }
  .sbfoot .sbn b{ margin-left:auto; color:var(--label-3); font-weight:var(--w-regular); }

  dialog.ovl > .modal{ padding:0; place-items:end stretch; overflow:hidden; top:var(--vvt, 0px); height:var(--vvh, 100%); bottom:auto; }
  .modal .mbox{ width:100%; max-width:none; height:calc(100% - env(safe-area-inset-top) - 8px); display:flex; flex-direction:column;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0; animation:none; transition:translate var(--d-smooth) var(--spring-smooth); }
  @starting-style{ dialog.ovl[open] .mbox{ translate:0 100%; } }
  .mbox > form{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  .mbox .mb{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom)); }
  .mbox > .mh{ position:relative; touch-action:none; padding-top:18px; }
  .mbox > .mh::before{ content:""; position:absolute; top:6px; left:50%; translate:-50% 0; width:36px; height:5px;
    border-radius:var(--radius-pill); background:var(--fill-1); }
  .mbox > .mh:has(.shb){ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-2); padding:18px var(--sp-3) 6px; }
  .mbox > .mh:has(.shb) h2{ text-align:center; font-size:var(--t-headline); letter-spacing:0; margin:0; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mbox > .mh .shb{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--sp-2); margin:0; border:none; background:none;
    color:var(--tint); font-size:var(--t-body); cursor:pointer; justify-self:start; }
  .mbox > .mh .shb.pri{ justify-self:end; font-weight:var(--w-emphasis); }
  .mbox > .mh:has(.shb) .cls{ display:none; }
  .mbox:has(> .mh .shb) .mf{ display:none; }
}
/* Dokunmada 44 pt: uzak vadedeki sıkı satırlar (35 px) ve panel/kağıt ✕'i (27×22) Apple'ın asgarisine çıkar. */
@media (pointer: coarse){
  .rw .rwb{ min-height:44px; }
  .ph .cls, .mh .cls{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}
/* E8b: cihaz bildirimi satırı (Ayarlar › Bildirimler): anahtar · açıklama · deneme düğmesi · durum. */
.devrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.devrow .hint{ flex:1 1 220px; margin:0; font-size:var(--t-footnote); color:var(--label-2); }
/* Kağıt sürükleme: geçiş kapalı (konumu JS yayı sürer); detay kağıdının orta detent'i. */
.mbox.dragging, .pan.dragging{ transition:none; }
@media (max-width: 860px){
  .pan .ph{ touch-action:none; }
  .pan.on.med{ translate:0 42%; }
}

/* ==== E9: erişilebilirlik, yazım, simge seti ============================================
   Tek simge seti (satır içi SVG, 1.8 çizgi, currentColor) — metin ağırlığıyla eşleşir; odak halkası
   3 px vurgu rengi (WebKit keyboardFocusIndicatorColor); tablo role=grid ile ok tuşlu hücre gezinmesi. */
svg.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.15em; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sbn i svg.ic, .sbi i svg.ic{ width:1.15em; height:1.15em; }
.tb i svg.ic{ width:1.5em; height:1.5em; }
.sbtoggle svg.ic, .fmore svg.ic{ width:1.25em; height:1.25em; }
.bell svg.ic{ width:1.2em; height:1.2em; }
.acct > button svg.ic{ width:.8em; height:.8em; }
.cls svg.ic{ width:1em; height:1em; }
.tbl[role="grid"] td:focus-visible, .tbl[role="grid"] th:focus-visible{ outline:3px solid var(--tint); outline-offset:-3px; }

/* ---- olcu birimi: rakam baskin, birim geride (kullanici karari 09.09.2026) --
   `−152g` tek parca, tam puntoda yaziliyordu; birim sayiyla yarisiyordu ve bu
   isaret 103 satirda 103 kez tekrarlaniyor. Birim artik ayri `<i>` icinde
   (`core.dates.day_label_html`). RENK DEGISTIRILMIYOR — aciliyet rengi
   (kirmizi/turuncu/gri) birimde de korunur, yalnizca punto ve agirlik duser.

   OPAKLIK DENENDI VE GERI CEKILDI: birim 16px/normal, yani WCAG'in "buyuk metin"
   esiginin altinda, 4.5:1 gerekiyor. Olculdu: AA'yi gecen EN DUSUK opaklik
   kirmizida 0.88, gride 0.95 -- gozle fark edilmeyecek kadar dar. Palet zaten
   esigin hemen ustune ayarli (kirmizi 5.10, gri 5.02), o yuzden soldurmak
   kontrasti kiriyor (.62'de 3.04'e dusuyordu). Hiyerarsi punto+agirliktan.
   E-posta duz surumu kullanir. */
.d i, .num i, .tbl td.n i, .nx b i{
  /* Taban kucukse .62em 9px'e dusuyordu (Taraflar'da `.nx b` icinde olculdu).
     Jeton tabanli alt sinir: 11px masaustu, 12px dokunma. */
  font-style:normal; font-size:max(.62em, var(--t-caption2)); font-weight:var(--w-regular);
  letter-spacing:0;
}

/* ---- tablo: sutunlar arasi bosluk ALICI hucrenin kenarinda ------------------
   Olculdu: `td.w` (baslik) ile komsu sutun arasinda 1280/768/375'te bosluk
   **0 px**'ti. Sebep: bosluk sag dolguyla veriliyordu, ama `overflow:hidden`
   DOLGU KUTUSUNDA kirpar -- kirpilan baslik kendi 16px sag dolgusunu yiyip
   komsuya sifir birakiyordu. Bosluk artik alici hucrenin SOL kenarinda ve
   saydam kenarlikla veriliyor: kenarlik `padding` kisayoluyla ezilmez, bu
   yuzden yogunluk ayarlarinda (compact/comfortable) da ayakta kalir. */
.tbl td + td, .tbl th + th{ border-left:12px solid transparent; }

/* ---- ayar tablolari: sayfa degil, tablo kaysin ------------------------------
   Olculdu (375px): `.ftbl` min-content genisligi 657px, kaydirma kabi yoktu ve
   `.set` icerigi tasirdi -> TUM SAYFA yana kaydi (scrollWidth 679, tasma 304px);
   yapiskan tab cubugu bile 680px oluyor, yani ekranin disina tasiyordu.
   Radar tablosunun `.tblwrap` kabinin ayar tablolarinda karsiligi yoktu. */
@media (max-width:860px){
  .set{ overflow-x:auto; overscroll-behavior-x:contain; }
}

/* ---- bildirim tablosu telefonda kart (14.09.2026) ---------------------------------------------------
   Ölçüldü (375 ve 393 px, dokunmatik öykünme, bölümler açık): altı sütunlu `.ntbl` ~455 px isterken bölüm
   335/353 px. Üstteki `.set{overflow-x:auto}` sayfayı korudu ama tablonun sağını bölümün içinde sakladı:
   Cihaz 0/11 ve Takvim 0/4 anahtarı dokunulmazdı (320 px'te Uygulama da 0/11). Yana kaydırma bölüm başlığını
   ve geri bağlantısını da ekrandan itiyordu. Kullanıcı kararı: telefonda kategori başına kart; takvimi olmayan
   kategoride soluk Takvim anahtarı gizli. Masaüstü tablosu değişmez. Tarayıcı kilidi: tests/e2e/test_mobil_ayarlar.py */
@media (width <= 680px){
  .ntbl{ display:block; width:100%; }
  .ntbl thead{ display:none; }
  .ntbl tbody{ display:block; }
  .ntbl tr{ display:flex; flex-wrap:wrap; align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--hair); }
  .ntbl tr::after{ content:""; flex:0 0 100%; order:1; }
  .ntbl td{ display:block; padding:0; }
  .ntbl td:first-child{ flex:1 1 0; min-width:0; padding-right:var(--sp-3); }
  .ntbl td:nth-child(2){ flex:0 0 auto; }
  .ntbl td.c{ order:2; flex:0 0 25%; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); margin-top:var(--sp-3); }
  .ntbl td.c::before{ content:attr(data-l); font-size:var(--t-xs); color:var(--ink3); line-height:1.2; }
  .ntbl td.yok{ display:none; }
  .ntbl tr.sec2::after{ content:none; }
  .ntbl tr.sec2 td.c{ order:0; flex:0 0 auto; margin-top:0; }
  .ntbl tr.sec2 td.c::before{ content:none; }
}

/* ---- firma secici (kayit formu) --------------------------------------------
   Serbest metin kaldirildi: yazim hatasi sessizce firma yaratiyordu ve silme
   yolu olmadigi icin oksuz kayitlar birikiyordu. Secici + satir ici hizli
   ekleme; ekleme kayit formunu KAPATMADAN yalnizca listeyi tazeler. */
.clientsel{ display:grid; gap:var(--sp-2); }
.clientsel select{ width:100%; }
.clientnew{ display:grid; gap:var(--sp-1); padding:var(--sp-2) 0 0; }
.clientnew label{ font-size:var(--t-caption1); color:var(--label-2); }

/* ---- kurulus secici (hesap menusu) ------------------------------------------
   Yalniz birden cok uyelik varsa basilir; tek kuruluslu kullaniciya gereksiz
   bir karar sunulmaz. Etkin kurulus `aria-current` ile isaretli. */
.orgsw{ display:grid; }
.orgsw form{ margin:0; }
.orgsw button[aria-current="true"]{ font-weight:var(--w-emphasis); }
.orgsw button[aria-current="true"]::after{ content:" ✓"; }

/* Kurulus disi paylasim isareti: kiraci siniri sert degil (kullanici karari),
   ama siniri gecen her bag gorunur olmali. */
.tag.ext{ color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange-fill); }

/* Evrak konuşma akışı (KE-C) — yorum, karar ve alan değişikliği tek zaman çizgisinde.
   Üç ayrı tablo yerine tek dikey akış: sıra bilginin kendisi. Sol çizgi olayın türünü
   söyler; renk dili radarınkiyle aynı (`--sig` uyarı, `--rule` nötr). */
.stream{list-style:none; margin:0 0 var(--sp-6); padding:0; border-left:1px solid var(--rule)}
.stream-e{position:relative; padding:var(--sp-3) 0 var(--sp-3) var(--sp-4); border-bottom:1px solid var(--hair);
  font-size:var(--t-callout); line-height:var(--lh-callout)}
.stream-e:last-child{border-bottom:0}
.stream-e b{font-weight:var(--w-emphasis)}
.stream-e > span.m{margin-right:var(--sp-2)}
.stream-e > div{margin-top:var(--sp-1); white-space:pre-wrap}
.stream-e::before{content:""; position:absolute; left:-1px; top:var(--sp-3); width:3px; height:18px; background:var(--rule)}
.stream-question::before{background:var(--sig)}
.stream-answer::before{background:var(--ink3)}
.stream-decision::before{background:var(--ink)}
.stream-edit::before{background:var(--hair2)}

/* Satır sonu eylem kümesi: bağlantı + form yan yana dursun. Satır içi `style` yerine sınıf,
   çünkü ayar şablonlarında satır içi stil sayısı testle kilitli (AYARLAR-SADELESTIRME). */
.rowact{display:flex; gap:6px; justify-content:flex-end; align-items:center}
.rowact form{display:contents}

/* Evrak ve not hatırlatması satırı (RE-5, DZ-0). Kayıt satırından ayrılması gerekiyor çünkü
   davranışı farklı: panel açmaz, seçilemez, hızlı eylemi yoktur — kendi ekranına gider. Ayrım
   GÖRÜNÜR olmalı, yoksa kullanıcı seçmeye çalışıp neden olmadığını anlamaz. */
.rw.docrw .rwb, .rw.noterw .rwb{cursor:pointer}
.rw.docrw::before, .rw.noterw::before{content:""; position:absolute; left:0; top:50%; width:3px; height:14px;
  transform:translateY(-50%); background:var(--ink3); opacity:.5}
.rw.docrw .sub, .rw.noterw .sub{color:var(--ink3)}
/* DZ-0: takvimde kayıt olmayan olay kendi ekranına giden BAĞLANTIDIR ve sürüklenemez. `.cal .ev`
   düğme için yazılmıştı; bağlantıda altı çizilmesin. */
.cal a.ev{text-decoration:none}
/* DZ-2: formdaki katlı tam başlık (karar DK-4). */
.fg .ftam summary{cursor:pointer; font-size:var(--t-sm); color:var(--ink2); padding:2px 0}
.fg .ftam textarea{margin-top:6px}

/* Kayıtlı görünüm listesi tek ama iki yüzeye ait (12.09.2026). Başka bir ekranı açacak
   görünümün yanında hangisi olduğu yazar — yoksa tıklayan kişi neden başka sayfaya
   gittiğini anlamaz. */
.sbi .sbsx{font-style:normal; font-size:var(--t-caption2); color:var(--ink3); margin-left:6px}