/*
  Kentix arayüzü. Mobil önce; büyük ekran min-width ile eklenir.
  Kırılımlar (media query'de var() olmaz, bu yüzden burada tek yerde):
    768 = tablet · 1024 = masaüstü (sabit kenar çubuğu) · 1440 = geniş
*/

@font-face{font-family:'Plus Jakarta Sans';font-weight:400;src:url(/fonts/pjs-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;src:url(/fonts/pjs-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;src:url(/fonts/pjs-600.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;src:url(/fonts/pjs-700.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;src:url(/fonts/pjs-800.ttf) format('truetype');font-display:swap}

:root{
  --primary:#0B6656;--primary-d:#084E42;--primary-l:#E3F1EC;--tint:#EEF6F3;--brand:#07A083;--primary-m:#0A7A66;
  --bg:#F3F6F5;--surface:#fff;--text:#14201C;--muted:#66726D;--border:#E3EAE7;--track:#E4EBE8;
  --danger:#B43A26;--danger-l:#FBE5DF;--warn:#C98A12;--warn-l:#FAEDD2;--warn-t:#734A00;
  --success:#2E7D4A;--success-l:#DDF0E1;--info:#2A4D88;--info-l:#E3EAF6;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:20px;--r-s:14px;--r-pill:999px;
  --shadow:0 1px 2px rgba(16,40,32,.05),0 4px 14px rgba(16,40,32,.05);
  --t-in:.22s;--t-out:.16s;--ease:cubic-bezier(.2,.7,.2,1);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --fs-s:13px;--fs-m:15px;--fs-l:17px;--fs-xl:22px;--fs-2xl:26px;
  --muted-2:#7C8984;--muted-3:#A5B1AC;--line-2:#C9D3CF;--danger-d:#972F1F;--success-d:#246B3D;--on-primary:#fff;
  --glass:rgba(243,246,245,.62);--glass-line:rgba(255,255,255,.55);
  --hover:var(--tint);--ring:0 0 0 3px rgba(11,102,86,.30);--card-pad:var(--s-4);
  --gap:12px;--gutter:16px;--control:52px;--control-s:40px;--sidebar:248px;--content-max:1280px;
}
@media (min-width:1024px){:root{--control:44px;--control-s:36px;--gutter:32px;--card-pad:var(--s-5)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:500 15px/1.45 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1,h2,h3,p{margin:0}
a{color:var(--primary)}
img,svg{max-width:100%}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.counter.over{color:var(--danger);font-weight:700}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}
.stack{display:grid;gap:var(--gap)}
.stack>*{min-width:0}
.muted,.note>div,.field em,.field p,.tbl td.cell-main,.tbl .sub,.kv dt,.sheet h3,.rt{overflow-wrap:anywhere}
.row-flex{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap}
.row-flex.nowrap{flex-wrap:nowrap}
.verified{display:inline-flex;color:var(--success);cursor:help}
.row-flex.center{justify-content:center}
.card-foot{margin-top:var(--s-3,12px)}
.row-flex.end{justify-content:flex-end}

/* ikon */
.i{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── Kabuk ───────────────────────────────────────── */
.shell{min-height:100vh;padding-bottom:84px}
.side{display:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px var(--gutter) 12px;background:var(--bg)}
.topbar h1{flex:1;min-width:0;font-size:19px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .logo{width:34px;height:34px;flex:none}
.topbar .logo img{display:block;width:100%;height:100%}
.round{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--surface);color:var(--primary);box-shadow:var(--shadow);cursor:pointer;text-decoration:none;transition:background var(--t-out)}
.round:hover{background:var(--primary-l)}
.page{max-width:var(--content-max);margin:0 auto;padding:var(--s-4) var(--gutter) 24px}
.page-head{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center;justify-content:space-between;margin:var(--s-1) 0 var(--s-4)}
.page-head>.row-flex{margin-left:auto}
.page-head .muted{font-size:var(--fs-m);font-weight:600}
.page-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.page-head p{width:100%;color:var(--muted)}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;padding:6px 8px calc(10px + var(--kentix-safe-b, env(safe-area-inset-bottom)));background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -6px 20px rgba(16,40,32,.06)}
.tabbar a,.tabbar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;justify-content:center;font:600 11px var(--font);color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap}
.tabbar a>span,.tabbar button>span{width:52px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.tabbar .i{width:22px;height:22px}
.tabbar a[aria-current],.tabbar button[aria-current]{color:var(--primary);font-weight:700}
.tabbar a[aria-current]>span,.tabbar button[aria-current]>span{background:var(--primary-l)}

@media (min-width:1024px){
  .shell{padding:0 0 0 var(--sidebar)}
  .tabbar{display:none}
  .side{position:fixed;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;gap:4px;padding:20px 14px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}
  .side .brand{display:flex;align-items:center;gap:10px;padding:0 10px 18px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--primary)}
  .side .brand img{width:34px;height:34px}
  .side .brand:hover{background:none}
  .side a{display:flex;align-items:center;gap:12px;min-height:var(--control);padding:0 12px;border-radius:var(--r-s);color:var(--text);font-weight:600;text-decoration:none}
  .side a:hover{background:var(--tint)}
  .side a[aria-current]{background:var(--primary-l);color:var(--primary);font-weight:700}
  .topbar{padding-top:16px}
  .topbar .logo{display:none}
  .page-head h2{font-size:26px}
}

/* ── Giriş sayfası ───────────────────────────────── */
.auth{max-width:420px;margin:0 auto;padding:48px var(--gutter) 24px;display:grid;gap:var(--gap)}
.auth h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.auth-logo{width:52px;height:52px}
.auth-foot{text-align:center}

/* ── Kart ve yüzeyler ────────────────────────────── */
.card{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--shadow)}
.card>h3,.card-title{display:block;margin:0 0 var(--s-2);font-size:var(--fs-s);font-weight:700;letter-spacing:.02em;color:var(--muted)}
.page>*+*{margin-top:var(--gap)}
.cols{display:grid;gap:var(--gap)}
.cols>.stack{align-content:start}
@media (min-width:768px){.cols.c2{grid-template-columns:1fr 1fr}.cols.c3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.cols.main{grid-template-columns:2fr 1fr}}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:1024px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpis>:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:1024px){.kpis>:last-child:nth-child(odd){grid-column:auto}}
.kpi{background:var(--surface);border-radius:var(--r-s);padding:14px;box-shadow:var(--shadow);font-size:13px;font-weight:600;color:var(--muted)}
.kpi b{display:block;margin-top:2px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
a.kpi{display:block;text-decoration:none;transition:box-shadow var(--t-out),transform var(--t-out)}
a.kpi:hover{box-shadow:0 6px 18px rgba(16,40,32,.12);transform:translateY(-1px)}
a.kpi:focus-visible{outline:0;box-shadow:var(--ring)}
.kpi.bad b{color:var(--danger)}
.kpi.ok b{color:var(--success)}
.kpi.warn b{color:var(--warn-t)}
.kpi.kpi-net.ok{background:var(--primary-l)}

/* ── Liste satırı ────────────────────────────────── */
.row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--border);color:inherit;text-decoration:none}
.row:last-child{border-bottom:0}
.row .ric{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--primary-l);color:var(--primary)}
.row .rt{flex:1;min-width:0}
.row a.rt{color:inherit;text-decoration:none}
.row a.rt:hover b{color:var(--primary)}
.row form.seen{flex:1;min-width:0;margin:0}
.row button.rt{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.row button.rt:hover b{color:var(--primary)}
.row .ric.ok{background:var(--success-l);color:var(--success)}
.row .ric.bad{background:var(--danger-l);color:var(--danger)}
.row .ric.warn{background:var(--warn-l);color:var(--warn-t)}
.row.is-new .rt b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--primary);vertical-align:middle}
.row.is-leaving{opacity:0;transform:translateX(12px);transition:opacity .18s,transform .18s}
.dismiss{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.dismiss:hover{background:var(--tint);color:var(--text)}
/* Sakin ana sayfa: dar ekranda iki kolon tek akışa katılır; Bildirimler Son duyurudan önce gelir. */
@media (max-width:1023.98px){.cols.home>.stack{display:contents}.home-notes{order:1}.home-last{order:2}}
.row .rt b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.row .rt small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.row .rt .badge{margin-top:6px}
.row .rt small.dim{margin-top:4px;font-size:12px;color:var(--muted-3)}
.row .ric.date{flex-direction:column;gap:0;line-height:1.05}
.row .ric.date b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.row .ric.date small{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.row .rr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .chev{color:var(--muted-3);display:flex}
.row-flex.listed{border-bottom:1px solid var(--border)}
.row-flex.listed>.row{flex:1;min-width:0;border-bottom:0}
/* Ana sayfa bildirimleri: masaüstünde kart içinde kaydırılır; mobilde liste sayfayla birlikte kayar (iç kaydırma sayfa kaydırmasını yutuyordu). */
.notes-scroll{max-height:460px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
@media (max-width:1023.98px){.notes-scroll{max-height:none;overflow-y:visible}}
/* Kaydırma çubuğu gizli; yalnız kutu kaydırılırken (app.js .is-scrolling) görünür. */
.notes-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
.notes-scroll.is-scrolling{scrollbar-color:rgba(16,40,32,.3) transparent}
/* Ana sayfa: boş duyuru kartı kısa kalır; masaüstünde bildirim kutusu sütunun kalanını doldurur, sayfa tek ekrana sığar. */
.home-last .empty{padding:12px 0}
.home-last .empty .i{width:32px;height:32px;margin-bottom:4px}
@media (min-width:1024px){.cols.home>.stack:last-child{align-content:stretch;grid-auto-rows:minmax(0,1fr)}.home-notes{display:flex;flex-direction:column}.home-notes .notes-scroll{flex:1 1 0;height:0;min-height:160px;max-height:none}}
a.row:hover,.row .rt-link:hover .rt b{color:var(--primary)}

/* ── Düğme: tek tanım; varyant = renk, boyut = .sm ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--control);padding:0 var(--s-4);border:1.5px solid transparent;border-radius:var(--r-s);background:var(--primary);color:var(--on-primary);font:700 var(--fs-m)/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--t-out),border-color var(--t-out),color var(--t-out),box-shadow var(--t-out)}
.btn:hover{background:var(--primary-d)}
.btn:active{transform:translateY(1px)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--surface);color:var(--primary);border-color:var(--border)}
.btn.ghost:hover{background:var(--hover);border-color:var(--primary)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:var(--danger-d)}
.btn.ghost.danger{background:var(--surface);color:var(--danger);border-color:var(--border)}
.btn.ghost.danger:hover{background:var(--danger-l);border-color:var(--danger)}
.btn.sm{min-height:var(--control-s);padding:0 var(--s-3);font-size:var(--fs-s)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible,.round:focus-visible,.chip:focus-visible,.tabbar a:focus-visible,.side a:focus-visible,.pg:focus-visible,.cell-link:focus-visible{outline:0;box-shadow:var(--ring)}

/* ── Form ────────────────────────────────────────── */
.field{display:block}
.field>span:not(.pw):not(.pin-box){display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--muted)}
.field:has(input:required,select:required,textarea:required)>span:not(.pw):not(.pin-box)::after,.field.is-required>span:not(.pw)::after{content:" *";color:var(--danger)}
/* Gelir/gider ikonu: gelir yeşil yukarı ok, gider kırmızı aşağı ok. */
.kind-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px}
.kind-ico.in{background:var(--primary-l);color:var(--primary)}
.kind-ico.out{background:var(--danger-l);color:var(--danger)}
.kind-ico .i{width:18px;height:18px}
.kind-ico.info{background:var(--info-l);color:var(--info)}
.type-summary{display:grid;gap:2px;align-content:start;padding:var(--s-2) var(--s-3);border-radius:var(--r-s);background:var(--primary-l);font-size:var(--fs-s);color:var(--muted)}
.type-summary>b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--primary-d)}
.kind-wrap{display:inline-flex;align-items:center;gap:10px}
.kind-text{font-size:var(--fs-m);font-weight:700}
.kind-text.in{color:var(--success)}
.kind-text.out{color:var(--danger)}
@media (max-width:767.98px){.kind-cell .kind-ico{width:28px;height:28px;border-radius:10px}.kind-cell .kind-ico .i{width:15px;height:15px}}
.row .rr.pos{color:var(--success)}
.row .rr.neg{color:var(--danger)}
/* Son hareketler: mobilde tarih alt satırda; masaüstünde ayrı sütun. */
/* Kart düz (flush): satırlar yatay boşluğu kendisi taşır; sistem tablo başlığıyla aynı zemin. */
.card.flush .mov-row{padding-left:16px;padding-right:16px}
.mov-date,.mov-account,.mov-head{display:none}
@media (min-width:768px){
  .mov-head{display:grid;grid-template-columns:36px minmax(0,1fr) 160px 120px 140px;column-gap:12px;padding:12px 16px;background:var(--tint);border-bottom:1px solid var(--border);border-radius:var(--r) var(--r) 0 0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .mov-head .right{text-align:right}
  .mov-row{display:grid;grid-template-columns:36px minmax(0,1fr) 160px 120px 140px;column-gap:12px;align-items:center;padding:12px 16px}
  .mov-row .rt small{display:none}
  .mov-row .mov-date-m{display:none}
  .mov-date{display:block;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
  .mov-account{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .mov-row .rr{text-align:right}
}
.field input:not([type=checkbox]),.field select,.field textarea,.filter input{display:block;width:100%;min-height:var(--control);padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:500 16px var(--font)}
.field textarea{min-height:96px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover,.filter input:hover{border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus,.filter input:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.field em{display:block;margin-top:4px;font-size:12px;font-style:normal;color:var(--muted)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger)}
.field.invalid em{color:var(--danger)}

.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;cursor:pointer}
.toggle small{display:block;color:var(--muted)}
.toggle:has(input:required)>span::after{content:" *";color:var(--danger)}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{position:relative;width:52px;height:30px;flex:none;border-radius:15px;background:var(--line-2);transition:background .2s}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.toggle input:checked+i{background:var(--primary)}
.toggle input:checked+i::after{left:25px}
.toggle input:focus-visible+i{outline:3px solid rgba(11,102,86,.35);outline-offset:2px}
.toggle:has(input:disabled){opacity:.55;cursor:not-allowed}

/* ── Rozet · uyarı · durumlar ────────────────────── */
.badge{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;white-space:nowrap;background:var(--track);color:var(--muted)}
.badge.ok{background:var(--success-l);color:var(--success)}
.badge.warn{background:var(--warn-l);color:var(--warn-t)}
.badge.bad{background:var(--danger-l);color:var(--danger)}
.badge.info{background:var(--info-l);color:var(--info)}

.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-s);font-size:14px;background:var(--info-l);color:var(--info)}
.note.ok{background:var(--success-l);color:var(--success)}
.note.warn{background:var(--warn-l);color:var(--warn-t)}
.note.bad{background:var(--danger-l);color:var(--danger)}
.note form{margin-top:10px}
.stack-top{margin-top:var(--gap)}
.form-note{flex:1 0 100%;align-items:center;justify-content:space-between;flex-wrap:wrap}

.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.empty .i{display:block;width:44px;height:44px;margin:0 auto 8px;color:var(--primary);stroke-width:1.5}
.empty.err .i{color:var(--danger)}
.empty b{display:block;color:var(--text);font-size:16px}

.prog{display:block;width:100%;height:8px;border:0;border-radius:4px;background:var(--track);appearance:none;overflow:hidden}
.prog::-webkit-progress-bar{background:var(--track)}
.prog::-webkit-progress-value{background:var(--brand);border-radius:4px}
.prog::-moz-progress-bar{background:var(--brand)}

/* ── Sekme (segment) · çip · arama çubuğu ────────── */
.seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-s);background:var(--track);overflow-x:auto}
.seg a,.seg button{flex:1;min-height:38px;padding:0 12px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.seg button{border:0;background:none;font-family:inherit;cursor:pointer}
.seg button:not([aria-current]):hover{background:var(--hover)}
.seg a[aria-current],.seg button[aria-current]{background:var(--surface);color:var(--primary);font-weight:700;box-shadow:var(--shadow)}

.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:var(--gap)}
.filter select{min-height:var(--control);padding:0 var(--s-3);border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:600 var(--fs-m) var(--font);box-shadow:var(--shadow);cursor:pointer}
.filter select:hover{border-color:var(--line-2)}
.filter select:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.filter .field{flex:1 1 220px;min-width:0}
/* Etiketli alanın yanındaki düğme etiketin değil kutunun hizasına oturur. */
.filter>.btn{align-self:flex-end;min-height:var(--control)}
.filter .search{position:relative;flex:1 1 220px;min-width:0}
.filter .search .i{position:absolute;left:14px;top:50%;margin-top:-10px;width:20px;height:20px;color:var(--muted)}
.filter .search input{padding-left:44px;box-shadow:var(--shadow)}
.chips{display:flex;gap:6px;overflow-x:auto;width:100%}
.chip{flex:none;display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--control-s);padding:0 var(--s-3);border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:600 var(--fs-s) var(--font);text-decoration:none;cursor:pointer;transition:background var(--t-out),border-color var(--t-out)}
.chip:hover{background:var(--hover);border-color:var(--primary)}
.chip[aria-current]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.chip[aria-current] .count{opacity:.8}
@media (min-width:768px){.chips{width:auto}}

/* ── Veri tablosu: mobilde kart satırı, ≥768'de kolonlu tablo ── */
.card.flush{padding:0}
.card.flush .tbl thead th:first-child{border-top-left-radius:var(--r)}
.card.flush .tbl thead th:last-child{border-top-right-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse}
.tbl thead{display:none}
.tbl tbody{display:grid}
.tbl tr{display:grid;grid-template-columns:1fr auto;gap:var(--s-1) var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);transition:background var(--t-out)}
.tbl tr:last-child{border-bottom:0}
.tbl td{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);grid-column:1/-1;min-width:0;padding:0;font-size:var(--fs-m)}
.tbl td::before{content:attr(data-label);color:var(--muted);font-size:var(--fs-s);font-weight:600;flex:none}
.tbl td.cell-main{display:block;order:-1;grid-column:1;font-weight:700;font-size:var(--fs-l)}
.tbl td.cell-main::before,.tbl td.actions::before,.tbl td[data-label=""]::before{content:none}
.tbl td.actions{grid-column:2;grid-row:1;justify-content:flex-end}
.tbl td.num{font-variant-numeric:tabular-nums;font-weight:700}
.tbl td.na{display:none}
.bal-stack{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:100%}
.bal-main{white-space:nowrap}
.bal-split{white-space:nowrap;font-size:12px;font-weight:500;color:var(--muted)}
.tbl .sub{display:block;margin-top:2px;font-size:var(--fs-s);font-weight:500;color:var(--muted)}
.tbl .cell-link{color:inherit;text-decoration:none}
.tbl .cell-link:hover{color:var(--primary);text-decoration:underline}
.tbl a.flat{color:inherit;text-decoration:none}
.tbl a.flat:hover{color:var(--primary);text-decoration:none}
.tbl .pos{color:var(--success)}.tbl .neg{color:var(--danger)}
.section-title{margin:0;font-size:var(--fs-s);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* Bölüm başlığı + sağda filtre; üstte boşluk, sıkışık görünmesin. */
.section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap);margin:var(--s-5) 0 var(--s-3)}
.section-head .field{min-width:200px}
.tbl-note{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);font-size:var(--fs-s);color:var(--muted)}
@media (min-width:768px){
  .tbl thead{display:table-header-group}
  .tbl tbody{display:table-row-group}
  .tbl tr{display:table-row;padding:0}
  .tbl th{padding:var(--s-3) var(--s-4);text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--tint);border-bottom:1px solid var(--border);white-space:nowrap}
  .tbl td{display:table-cell;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);vertical-align:middle}
  .tbl td::before{content:none}
  .tbl td.na{display:table-cell;color:var(--muted)}
  .tbl td.cell-main{display:table-cell;order:0;font-size:var(--fs-m)}  .tbl tr:last-child td{border-bottom:0}
  .tbl tbody tr:hover{background:var(--hover)}
  .tbl th.num,.tbl td.num{text-align:right}
  .tbl th.actions,.tbl td.actions{width:1%;text-align:right;white-space:nowrap}
}

/* ── Sheet: modal · drawer · onay (tek bileşen, üç yerleşim) ── */
body:has(dialog[open]){overflow:hidden}
.sheet{width:100%;max-width:560px;margin:auto auto 0;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--surface);color:var(--text);max-height:92dvh;overflow:auto;
  opacity:0;transform:translateY(100%);
  transition:opacity var(--t-out) var(--ease),transform var(--t-out) var(--ease),overlay var(--t-out) allow-discrete,display var(--t-out) allow-discrete}
.sheet[open]{opacity:1;transform:none;transition-duration:var(--t-in)}
.sheet:focus{outline:0}
@starting-style{.sheet[open]{opacity:0;transform:translateY(100%)}}
.sheet::backdrop{background:transparent;transition:background var(--t-out),overlay var(--t-out) allow-discrete,display var(--t-out) allow-discrete}
.sheet[open]::backdrop{background:rgba(10,24,19,.5)}
@starting-style{.sheet[open]::backdrop{background:transparent}}
.sheet>div{padding:20px 20px 24px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px}
.sheet h3{margin:0;font-size:19px;letter-spacing:-.02em}
.sheet .grab{position:relative;width:50px;height:5px;margin:0 auto 8px;border-radius:3px;background:var(--line-2)}
/* Görünmez dokunma alanı: çubuk 5 px, parmak ıskalıyordu. Yalnız yukarı ve yanlara genişler (alttaki başlık düğmeleri çalınmasın). */
.sheet .grab::before{content:"";position:absolute;inset:-14px -24px 0}
.sheet .grab,.sheet-head,.hub-grab,.hub-head{touch-action:none}
.sheet .actions{display:grid;gap:8px;margin-top:16px}
.sheet .actions form{display:contents}
.setup-dismiss{margin-top:12px}
.wiz-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--gap);min-height:56px;padding:8px var(--gutter);background:transparent;border-bottom:1px solid var(--glass-line);box-shadow:0 1px 0 rgba(16,40,32,.04),0 10px 30px rgba(16,40,32,.07)}
.wiz-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);pointer-events:none}
.wiz-brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--primary);text-decoration:none}
.wiz-brand img{width:34px;height:34px}
.wiz-site{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz{max-width:640px;margin:0 auto;padding:var(--s-2) var(--gutter) 40px}
.wiz-cols{display:grid;gap:var(--gap);align-items:start}
@media (min-width:768px){
  .wiz{padding-top:var(--s-4)}
  .wiz-bar{padding:12px var(--s-5)}
}
.wiz-colhead{display:none}
@media (min-width:1024px){
  .wiz{max-width:960px}
  .wiz-cols{grid-template-columns:1fr 1fr;gap:var(--s-5)}
  .wiz-colhead{display:block}
  .wiz-cols>form.stack{padding:var(--s-4);background:var(--tint);border:1px solid var(--border);border-radius:var(--r-s)}
  .wiz-cols>form.stack .wiz-save{justify-self:end}
  .wiz-cols:has(>form.stack)>.stack:first-child{padding-top:calc(var(--s-4) + 1px)}
  .wiz-nav{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border)}
}
.wiz-hero{display:grid;justify-items:center;margin:var(--s-3) 0 var(--s-5);font-size:clamp(34px,8vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-align:center;color:var(--text)}
.wiz-box{display:grid;gap:var(--gap);background:var(--surface);border-radius:var(--r);padding:var(--s-5);box-shadow:var(--shadow)}
.legal{gap:var(--s-3)}
.legal h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em}
.legal h2{margin-top:var(--s-2);font-size:var(--fs-l);font-weight:700}
.legal ul,.legal ol{margin:0;padding-left:20px;display:grid;gap:var(--s-1)}
.legal p,.legal li{line-height:1.6;overflow-wrap:anywhere}
.wiz.gate{max-width:480px;padding-top:var(--s-4)}
.gate .wiz-box{gap:var(--s-4)}
.gate-head{display:grid;gap:var(--s-2);justify-items:start}
.gate-head h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em}
.gate-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--primary-l);color:var(--primary)}
.gate-ico svg{width:26px;height:26px}
.gate-foot{display:flex;justify-content:center;gap:var(--gap);flex-wrap:wrap;margin-top:var(--s-4)}
@media (min-width:768px){.wiz.gate{padding-top:56px}}
.wiz-box h2{margin:8px 0 0;font-size:22px;letter-spacing:-.02em}
.wiz-box p{margin:0}
.wiz-cols [data-contact-pick]{justify-self:start;min-height:var(--control-s);padding:0 var(--s-4);background:var(--primary-l);color:var(--primary-d);border:1.5px solid var(--primary);font-size:14px;font-weight:700}
.wiz-cols [data-contact-pick]:hover{background:var(--primary-l);border-color:var(--primary-d)}
.wiz-cols [data-contact-pick] svg{width:18px;height:18px}
.wiz-btns{display:flex;justify-content:flex-end;gap:var(--gap)}
.wiz-save{justify-self:center;min-height:var(--control-s);padding:0 var(--s-5)}
.wiz-list{border:1px solid var(--border);border-radius:var(--r-s);padding:0 12px}
.wiz-list form{margin:0}
.wiz-list>.row:last-child,.wiz-list>.row:nth-last-child(2):has(+ dialog){border-bottom:0}
.wiz-top,.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--gap)}
.wiz-nav{margin-top:8px}
.wiz-nav .btn.sm{min-height:44px;padding:0 var(--s-4);font-size:14px}
.sheet.drawer{height:92dvh;max-width:none}
.sheet.confirm{max-width:420px}
.sheet.notice{max-width:min(420px,calc(100vw - 32px));margin:auto;border-radius:var(--r)}
.sheet.notice:not([open]){transform:scale(.96)}
@starting-style{.sheet.notice[open]{transform:scale(.96)}}
.sheet.notice .grab{display:none}
.sheet.notice .actions{display:flex;justify-content:flex-end;flex-wrap:wrap}
@media (min-width:768px){
  .sheet{margin:auto;border-radius:var(--r);transform:scale(.96)}
  @starting-style{.sheet[open]{transform:scale(.96)}}
  .sheet .grab{display:none}
  .sheet .actions{display:flex;justify-content:flex-end}
  .sheet.drawer{margin:0 0 0 auto;width:440px;height:100dvh;max-height:none;border-radius:var(--r) 0 0 var(--r)}
  .sheet.drawer:not([open]){transform:translateX(100%)}
  @starting-style{.sheet.drawer[open]{transform:translateX(100%)}}
}

/* ── Menü (satır işlemleri): mobilde alt panel, ≥768 açılır; üst çubuk menüleri aşağıda hep açılır ── */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu-list{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;padding:12px 12px calc(16px + var(--kentix-safe-b, env(safe-area-inset-bottom)));background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(16,40,32,.18)}
.menu-list a,.menu-list button{display:flex;align-items:center;gap:10px;min-height:var(--control);padding:0 12px;border:0;border-radius:var(--r-s);background:none;color:var(--text);font:600 15px var(--font);text-align:left;text-decoration:none;cursor:pointer}
.menu-list a:hover,.menu-list button:hover{background:var(--tint)}
.menu-list .danger{color:var(--danger)}
.menu-list [aria-current]{background:var(--primary-l);color:var(--primary);font-weight:700}
@media (min-width:768px){
  .menu-list{position:absolute;top:100%;right:0;left:auto;bottom:auto;min-width:200px;padding:6px;border:1.5px solid var(--primary);border-radius:var(--r-s);overflow-x:hidden;box-shadow:var(--shadow),0 12px 28px rgba(16,24,40,.16)}
}

/* ── Toast ve yükleniyor ─────────────────────────── */
.toast{position:fixed;z-index:40;left:var(--gutter);right:var(--gutter);bottom:96px;padding:14px 16px;border-radius:var(--r-s);background:var(--text);color:var(--bg);font-weight:600;text-align:center;animation:toast 4s var(--ease) forwards}
.toast.bad{background:var(--danger);color:#fff}
@keyframes toast{0%{opacity:0;transform:translateY(12px)}8%,88%{opacity:1;transform:none}100%{opacity:0;visibility:hidden}}
@media (min-width:1024px){.toast{left:auto;right:24px;bottom:24px;width:360px;text-align:left}}

.btn[aria-busy]{position:relative;color:transparent;pointer-events:none}
.btn[aria-busy]::after{content:"";position:absolute;width:20px;height:20px;border:3px solid color-mix(in srgb,var(--on-primary) 40%,transparent);border-top-color:var(--on-primary);border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost[aria-busy]::after{border-color:var(--border);border-top-color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}

.skel{display:block;height:14px;margin:10px 0;border-radius:7px;background:linear-gradient(90deg,var(--track) 25%,var(--tint) 50%,var(--track) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.skel:nth-child(odd){width:70%}
/* Bağlantıya basılınca (app.js): üstte ilerleme çubuğu, içerik soluk. Uygulamada çubuğu Flutter çizer. */
html.is-navigating main.page{opacity:.55;transition:opacity .15s}
html.is-navigating::before{content:"";position:fixed;inset:0 0 auto;height:3px;z-index:100;background:var(--primary);transform-origin:left;animation:navbar 8s cubic-bezier(.1,.7,.2,1) forwards}
html.kentix-app.is-navigating::before{display:none}
@keyframes navbar{from{transform:scaleX(.05)}to{transform:scaleX(.9)}}
@media (prefers-reduced-motion:reduce){html.is-navigating::before{animation:none;transform:scaleX(.6)}}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── Sayfalama: numaralı; dar alanda yalnız çevre sayfalar, ok düğmeleri ikon (container query) ── */
.pager{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap);margin-top:var(--gap)}
.pager-info{display:flex;align-items:center;gap:var(--s-3)}
.pager-size{display:flex;align-items:center;gap:var(--s-2);color:var(--muted)}
.pager-size select{height:36px;padding:0 var(--s-2);border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:700 13px var(--font)}
.pager-size select:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.pager-pages{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-left:auto}
@media (max-width:767.98px){.pager{flex-direction:column;align-items:flex-end}.pager-info{justify-content:space-between;width:100%}.pager-pages{margin-left:0;justify-content:flex-end}}
.pg{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:40px;height:40px;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:700 14px var(--font);text-decoration:none}
a.pg:hover{border-color:var(--primary);color:var(--primary)}
.pg.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pg.off{opacity:.45}
.pg.gap{border-color:transparent;background:none;min-width:20px;padding:0;color:var(--muted)}
.pg b{display:none;font-weight:700}
.pg.far{display:none}
@container (min-width:520px){.pg b{display:inline}.pg.far{display:inline-flex}}

/* ── Seçim kartı (radyo) ─────────────────────────── */
.choice{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--control);padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);cursor:pointer}
/* Gizli radyo: genel input kuralı (genişlik %100, yükseklik 52px) kartın dışına taşıp yatay kaydırma açıyordu. */
.choice input,.field .choice input[type=radio]{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.choice .rt{flex:1;min-width:0}
.choice .rt b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.choice .rt small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.choice .dot{width:22px;height:22px;flex:none;border:2px solid var(--line-2);border-radius:50%}
.choice:has(input:checked){border-color:var(--primary);background:var(--primary-l)}
.choice:has(input:checked) .dot{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 45%,transparent 50%)}
.choice:has(input:focus-visible){outline:3px solid rgba(11,102,86,.35);outline-offset:2px}
/* Kutucuk: ikon üstte, ad altta. Izgara 3 sütun; ekran genişliğinde değişmez, kutular ortalı kalır. */
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.choice.choice-tile{flex-direction:column;justify-content:center;gap:8px;min-height:116px;padding:14px 8px;text-align:center}
.choice.choice-tile .ric{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--primary-l);color:var(--primary)}
.choice.choice-tile .rt{flex:none}
.choice.choice-tile .rt b{font-size:14px;line-height:1.25}
.choice.choice-tile .dot{display:none}
.field.invalid .choice{border-color:var(--danger)}
/* Fotoğraf alanı: tasarım; yükleme arka uçta henüz yok. */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;border:1.5px dashed var(--line-2);border-radius:var(--r-s);background:var(--surface);text-align:center;color:var(--muted)}
.dropzone .ric{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--primary-l);color:var(--primary)}
.dropzone b{color:var(--text);font-size:15px;font-weight:700}
.dropzone small{font-size:13px}
.dropzone [data-file-name]{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:6px}
.sheet.preview{max-width:min(860px,96vw)}
.preview-body{display:grid;place-items:center;min-height:120px}
.preview-body img{max-width:100%;max-height:70dvh;border-radius:var(--r-s)}
.preview-body iframe{width:100%;height:70dvh;border:0;border-radius:var(--r-s)}
.req-photo{display:block;width:min(100%,300px);aspect-ratio:1;object-fit:cover;margin:var(--s-3) auto 0;border-radius:var(--r-s);background:var(--track)}
.file-progress{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.file-bar{width:100%;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.file-bar i{display:block;height:100%;width:var(--p,0%);border-radius:4px;background:var(--primary);transition:width .15s linear}
.file-bar.is-wait i{width:40%;animation:file-wait 1s ease-in-out infinite alternate}
@keyframes file-wait{from{transform:translateX(-30%)}to{transform:translateX(150%)}}
@media (prefers-reduced-motion:reduce){.file-bar.is-wait i{animation:none;width:100%;opacity:.5}}
.dropzone.has-file{border-style:solid;background:var(--primary-l)}
.dropzone.has-file [data-file-title]{color:var(--primary)}
.attach-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.attach-row a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text)}
.attach-row .btn{flex-shrink:0}

/* ── Makbuz, ekstre ve sonuç ─────────────────────── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 12px;font-size:14px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;text-align:right;font-weight:700;overflow-wrap:anywhere}
.kv-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0 6px;border-top:1.5px solid var(--border);font-size:13px;font-weight:700;color:var(--muted)}
.kv-total b{font-size:22px;color:var(--text)}
.receipt-head{display:grid;gap:4px;justify-items:start;margin-bottom:12px}
.result{display:grid;justify-items:center;gap:6px;padding:12px 0;text-align:center}
.result h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.big-ico{width:90px;height:90px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--track);color:var(--muted)}
.big-ico.ok{background:var(--success-l);color:var(--success)}
.big-ico.warn{background:var(--warn-l);color:var(--warn-t)}
.big-ico.bad{background:var(--danger-l);color:var(--danger)}
.big-ico .i{width:42px;height:42px}
.btn.ok{background:var(--success)}
.btn.ok:hover{background:var(--success-d)}
.iban{font-size:17px;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums;word-break:break-all;margin:4px 0 10px}
.pick-line{display:flex;align-items:center;gap:var(--s-3);cursor:pointer}.pick-line input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--primary);cursor:pointer}
.phone-current{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2) var(--s-3);padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--tint)}
.phone-current b{font-size:20px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.copy-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin:2px 0 var(--s-4)}.copy-row .iban{margin:0}
.steps{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.qr{display:grid;justify-items:center;gap:6px;padding:16px;border:1.5px dashed var(--border);border-radius:var(--r-s);text-align:center;color:var(--muted)}
.qr span{font-size:72px;line-height:1;color:var(--text)}
.steps-bar{display:grid;gap:6px}
.tl{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.tl li{flex:1;min-width:0;border-top:6px solid var(--border);padding-top:8px;font-size:14px;font-weight:700}
.tl li small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--muted)}
.tl li.done{border-color:var(--success)}
.tl li.now{border-color:var(--warn)}
.meeting{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.date{display:grid;justify-items:center;min-width:56px;padding:8px 6px;border-radius:var(--r-s);background:var(--primary-l);color:var(--primary)}
.date b{font-size:24px;line-height:1}
.date small{font-size:12px;font-weight:700}
.expense{display:grid;gap:6px;padding:8px 0;border-bottom:1px solid var(--border)}
.expense:last-child{border-bottom:0}
.question{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.ann-date{font-size:13px;color:var(--muted);margin-bottom:6px}

/* ── Toplam borç bloğu (prototip S-02 "hero") ────── */
.hero{position:relative;overflow:hidden;margin-bottom:12px;padding:20px;border-radius:24px;background:linear-gradient(140deg,var(--primary) 0%,var(--primary-m) 60%,var(--brand) 140%);color:#fff;box-shadow:0 10px 24px rgba(11,102,86,.28)}
.hero:after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.07)}
.hero .small{font-size:13px}
.hero .big{font:800 34px/1.1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hero-units{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.28);display:grid;gap:6px}
.hero-unit{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-s)}
.hero-unit span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.hero-unit b{flex:none}
.hero-badge{padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);font:700 12px var(--font);white-space:nowrap}

/* ── Kalem seçimi (borç ekranı) ───────────────────── */
.item-select{cursor:pointer}
.item-select input{width:22px;height:22px;flex:none;accent-color:var(--primary)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}

/* ── Karşılama: başlık ve alt satır sıkı, daire seçici hemen altında ── */
.greet{display:grid;gap:2px;margin:0}
.greet h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.greet p{margin:0}
.greet-form{margin-top:4px}

/* ── Açılır seçim (arıza listesi) ─────────────────── */
.picker summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--control);padding:0 14px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);font-weight:700;cursor:pointer;list-style:none}
.picker summary::-webkit-details-marker{display:none}
.picker summary::after{content:"▾";color:var(--muted)}
.picker[open] summary{border-color:var(--primary)}
.picker[open] summary::after{content:"▴"}
.picker .stack{margin-top:10px}
/* Açılır liste overlay: açılınca altındaki alanları itmez (pilot seçici, class="dropdown"). */
.picker.dropdown{position:relative}
.picker.dropdown[open] .stack{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;margin-top:0}
.picker-search{display:block;width:100%;min-height:var(--control-s);padding:0 12px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:600 var(--fs-m) var(--font)}
.picker-search:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.picker-results{display:grid;gap:var(--gap)}
.picker .opt{display:flex;align-items:center;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--text);font:600 15px/1.3 var(--font);text-align:left;cursor:pointer}
.picker .opt:hover{background:var(--tint)}
.picker .opt[aria-current]{color:var(--primary);font-weight:800;background:var(--primary-l)}
.pick-plain .picker .opt[aria-current]{color:var(--text);font-weight:600;background:var(--tint)}
.field.invalid .picker summary{border-color:var(--danger)}
.picker.is-disabled summary{opacity:.5;cursor:not-allowed}
/* Onay kutusu kısa ve kendi içinde kayar: liste üstüne binmez, kutuyu uzatır. */
.sheet.confirm .picker.dropdown[open] .stack{position:static;margin-top:6px}
/* Onay bekleyen satır: sarımsı zemin (hover'da da kalır). */
.tbl tbody tr.is-pending,.tbl tbody tr.is-pending:hover{background:color-mix(in srgb,var(--warn-l) 35%,var(--surface))}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pair>*{min-width:0}
/* Açık liste: seçeneklerin bir menü olduğu çerçeve ve gölgeyle belli olur; uzun listede kendi içinde kayar. */
.picker[open] .stack{margin-top:6px;padding:8px;max-height:320px;overflow-x:hidden;overflow-y:auto;border:1.5px solid var(--primary);border-radius:var(--r-s);background:var(--surface);box-shadow:0 12px 28px rgba(16,24,40,.16)}

/* ── Satır içi form (etiket ve düğme aynı hizada) ── */
.inline-form{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.inline-form .field{flex:1 1 180px;min-width:0}
.inline-form .btn{min-height:var(--control)}

/* ── Profil ve okunabilir metin ──────────────────── */
.ben-head{display:flex;align-items:center;gap:14px}
/* Profilim (.hub): telefonda menü + alttan açılan sayfa, masaüstünde sekme. Bölmeler tek kopyadır. */
.hub-tabs,.hub-backdrop{display:none}
.hub-group{margin:0 4px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hub-list{padding:0 var(--card-pad)}
.hub-row{width:100%;border:0;border-bottom:1px solid var(--border);background:none;font:inherit;text-align:left;cursor:pointer}
.hub-row .rt small{display:block;color:var(--muted)}
.hub-theme{padding:0}
.hub-theme .toggle{flex:1;min-height:0}
.hub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.hub-head h3{margin:0;font-size:19px;letter-spacing:-.02em}
.hub-grab{display:none}
.hub-save{width:100%}
.hub-pane .card.flush{background:none;box-shadow:none;border-radius:0;overflow:visible}
.hub-pane .card.flush .tbl thead th{border-radius:0}
.trio{display:grid;gap:var(--gap)}
@media (max-width:1023.98px){
.hub-detail{display:contents}
.hub-pane{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:560px;max-height:90dvh;margin:0 auto;overflow:auto;padding:14px 20px 28px;background:var(--surface);border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(16,40,32,.25);transform:translateY(105%);visibility:hidden;transition:transform var(--t-out) var(--ease),visibility 0s var(--t-out)}
.hub-pane.is-open{transform:none;visibility:visible;transition:transform var(--t-in) var(--ease)}
.hub-pane[data-pane=gorunum]{display:none}
html:has(.hub.has-open){overflow:hidden}
.hub-pane{overscroll-behavior:contain}
.hub-grab{display:block;position:relative;width:50px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--line-2)}
.hub-grab::before{content:"";position:absolute;inset:-14px -24px 0}
.hub.has-open .hub-backdrop{display:block;position:fixed;inset:0;z-index:39;background:rgba(10,24,19,.5)}
}
@media (min-width:1024px){
.hub-tabs{display:flex}
.hub-menu{display:none}
.hub-head .round{display:none}
.hub-detail{padding:28px 32px}
.hub-save{width:auto;min-width:180px;justify-self:end}
}
.avatar{width:64px;height:64px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:22px;font-weight:800}
.lead{font-size:18px;line-height:1.55;white-space:pre-line}

/* ── Hızlı eylem kutucukları · borç tutarı ───────── */
.debt-amt{margin:4px 0 2px;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.debt-amt.ok{color:var(--success)}.debt-amt.warn{color:var(--warn-t)}.debt-amt.bad{color:var(--danger)}
@media (min-width:1024px){.debt-amt{font-size:42px}}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px 6px;border-radius:var(--r-s);background:var(--tint);color:var(--text);font-size:13px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none}
.tile:hover{background:var(--primary-l)}
.tile .ric{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--surface);color:var(--primary)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .toast{animation-duration:4s!important}
}

/* Liste satırı: bağlantı alanı ve satır menüsü ayrı; menü satırın sağında */
.row .rt-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}
.row .sd{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.row .sd.g{background:var(--success)}.row .sd.y{background:var(--warn)}.row .sd.r{background:var(--danger)}
.row .menu{flex:none}
.row .badge{flex:none}

/* Üst çubuk: profil düğmesi ve hesap menüsü */
.topbar .avatar{width:40px;height:40px;background:var(--primary);color:var(--on-primary);font:700 13px var(--font);letter-spacing:.02em;list-style:none;cursor:pointer;border:0}
.topbar button.round{width:34px;height:34px}
.topbar .menu{position:relative}
.topbar .menu>summary::-webkit-details-marker{display:none}
.account-name{padding:4px 12px 8px;font-size:13px}
.account-who{padding:6px 12px 10px;font-size:16px;font-weight:700;line-height:1.3;color:var(--text)}
/* Üst çubuk menüleri her genişlikte butonun altından açılır (alt panel yalnız satır menüleri için). */
.topbar .menu-list{position:absolute;top:calc(100% + 8px);right:0;left:auto;bottom:auto;width:220px;padding:6px;border:1.5px solid var(--primary);border-radius:var(--r-s);overflow-x:hidden;box-shadow:var(--shadow),0 12px 28px rgba(16,24,40,.16)}

/* Üst çubuk: buzlu cam. Kaydırınca içerik altından bulanık görünür. */
/* Buzlu cam ::before'da: topbar'ın kendisi backdrop-filter taşımaz, yoksa içindeki fixed menü (mobil alt sayfa) topbar'a göre konumlanır. */
.topbar{background:transparent;border-bottom:1px solid var(--glass-line);box-shadow:0 1px 0 rgba(16,40,32,.04),0 10px 30px rgba(16,40,32,.07);color:var(--text)}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);pointer-events:none}
/* Açık hesap menüsü alt çubuğun (tabbar) üstünde kalsın: menü topbar'ın yığınında, topbar da açıkken öne geçer. */
.topbar:has(.menu[open]){z-index:40}
.menu-list form{margin:0}
.menu-list form button{width:100%}
.topbar h1{color:var(--text)}

/* Yönetici özeti: tahsilat çubukları ve hero ilerleme */
.bars{display:grid;gap:var(--s-3)}
.bar-row{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:var(--s-3)}
.bar-row small{color:var(--muted);font-weight:600}
.bar-row b{text-align:right}
.hero-foot{display:flex;justify-content:space-between;gap:12px;margin-top:var(--s-3);font-size:14px}
.qa.top{margin-bottom:12px}
.qa.top .tile{background:var(--surface);box-shadow:var(--shadow)}
.qa.top .tile{min-height:112px}
.qa.top .tile .ric{width:56px;height:56px;border-radius:18px}
.qa.top .tile .ric svg{width:30px;height:30px}
.hero-prog{margin-top:var(--s-3);background:rgba(255,255,255,.25)}
.hero-prog::-webkit-progress-bar{background:rgba(255,255,255,.25)}
.hero-prog::-webkit-progress-value{background:#fff}
.hero-prog::-moz-progress-bar{background:#fff}

/* Makbuz yazdırma: yalnız makbuz kartı PDF'e girer. */
@media print{body *{visibility:hidden}#receipt,#receipt *{visibility:visible}#receipt{position:absolute;left:0;top:0;width:100%}}
.num.neg{color:var(--danger)}
.num.pos{color:var(--success)}

/* Bütçe özeti: ince satırlar; kategori adı ve tutar, altında kalemler. */
.bud-line{padding:10px 0;border-top:1px solid var(--border)}
.bud-line:first-child{border-top:0;padding-top:0}
.bud-row{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:700}
.bud-line .prog{margin:8px 0 0}
.bud-row .num{font-weight:600;white-space:nowrap}
.bud-sub{display:flex;justify-content:space-between;gap:12px;margin-top:4px;padding-left:12px;font-size:13px;color:var(--muted)}
.bud-sub span:last-child{white-space:nowrap}

/* Parola alanı: göster/gizle düğmesi alanın içinde, sağda. */
.pw{position:relative;display:block}
.pw input{padding-right:52px}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.pw-toggle:hover{background:var(--tint);color:var(--text)}
.pw-toggle .i{width:20px;height:20px}

/* ═══ 99 · Koyu tema ═══
   html[data-theme=dark]: <head> betiği (ilk boyama) ve Profilim'deki karanlık mod anahtarı (app.js) koyar. Yalnız belirteçler yeniden tanımlanır;
   kural yeniden yazılmaz. Yeni renk eklerken sabit hex yazma, belirteç kullan, yoksa bu blokta karşılığını ekle. */
:root[data-theme=dark]{
  color-scheme:dark;
  --primary:#34C3A2;--primary-d:#2AA98B;--primary-l:#173A32;--tint:#1B2723;
  --bg:#0E1513;--surface:#161F1C;--text:#E6EEEB;--muted:#93A39D;--border:#26332F;--track:#26332F;
  --danger:#E5604B;--danger-l:#3A1E19;--warn:#E0A83A;--warn-l:#3A2D12;--warn-t:#F0CF8A;
  --success:#3E9E63;--success-l:#17321F;--info:#8FB0EE;--info-l:#1A2640;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);--ring:0 0 0 3px rgba(52,195,162,.4);
  --muted-2:#7A8A84;--muted-3:#7C8C86;--line-2:#34433E;--danger-d:#C94B38;--success-d:#34855A;--on-primary:#06231C;
  --glass:rgba(14,21,19,.7);--glass-line:rgba(255,255,255,.06);
}
:root[data-theme=dark] .hero{background:linear-gradient(140deg,#0B6656 0%,#0A7A66 60%,#07A083 140%);box-shadow:none}

/* Daireler tablosu: Durum, işlem menüsüne yakın dursun (masaüstü). */
@media (min-width:768px){
  .units-table .tbl th:nth-last-child(2),.units-table .tbl td.status{width:1%;text-align:right;white-space:nowrap}
}

/* Sakin topbar'ı: o anki daire numarası; tıklanınca dairelerim menüsü. */
.topbar .unit-pill{width:auto;min-width:40px;padding:0 12px;border-radius:var(--r-pill);font:700 13px var(--font);color:var(--primary);list-style:none;cursor:pointer;white-space:nowrap}
.topbar .unit-pill{gap:6px}
.topbar .unit-pill .i{width:20px;height:20px}
.topbar .unit-pill>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar .role-switch .unit-pill{max-width:min(46vw,260px)}
@media (max-width:767.98px){.topbar .role-switch .unit-pill{padding:0}.topbar .role-switch .unit-pill>span{display:none}}
.topbar .role-switch .menu-list{width:max-content;min-width:220px;max-width:min(340px,calc(100vw - 24px))}

/* Duyuru çekmecesi (pilot): geniş ve ferah; yalnız class="wide" taşıyan sheet'te geçerli */
.sheet.wide>div{padding:24px 22px 28px}
.sheet.wide form.stack{gap:20px}
@media (min-width:768px){.sheet.drawer.wide{width:min(720px,94vw)}.sheet.wide>div{padding:28px 32px 32px}}
@media (max-width:639.98px){.sheet.wide .pair{grid-template-columns:1fr}}
.ann-text{gap:10px}
.ann-text .counter{margin-left:auto;font-size:13px;white-space:nowrap}
.ann-box,.form-box{border:1px solid var(--border);border-radius:var(--r-s);padding:0 14px}
.ann-box .toggle+.toggle,.form-box .toggle+.toggle{border-top:1px solid var(--border)}

/* Giriş ekranı: uygulamanın açık temasıyla uyumlu, marka yeşili ışık lekelerinin süzüldüğü mesh arka plan; kart beyaz cam. */
.login{--kentix-bar-top:var(--tint);--kentix-bar-bottom:var(--primary-l);position:relative;min-height:100vh;display:grid;place-items:center;padding:var(--s-5) var(--gutter);overflow:hidden;background:var(--bg)}
.login-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,var(--tint),var(--bg) 45%,var(--primary-l))}
.login-art::before,.login-art::after{content:"";position:absolute;inset:-25%}
.login-art::before{background:radial-gradient(38% 38% at 20% 25%,color-mix(in srgb,var(--brand) 72%,transparent),transparent 70%),radial-gradient(34% 34% at 80% 75%,color-mix(in srgb,var(--primary-m) 50%,transparent),transparent 70%);animation:login-blob-a 18s ease-in-out infinite alternate}
.login-art::after{background:radial-gradient(36% 36% at 78% 22%,color-mix(in srgb,var(--info) 30%,transparent),transparent 70%),radial-gradient(30% 30% at 22% 80%,color-mix(in srgb,var(--brand) 45%,transparent),transparent 70%);animation:login-blob-b 24s ease-in-out infinite alternate}
.login-card{position:relative;width:100%;max-width:420px;padding:var(--s-6) var(--s-5);background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--glass-line);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-radius:28px;box-shadow:0 30px 70px rgba(11,102,86,.16),inset 0 1px 0 rgba(255,255,255,.7);view-transition-name:login-card}
.login-art{view-transition-name:login-art}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(login-card){animation-duration:.35s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}}
.login-form{display:grid;gap:var(--s-4)}
.login-card.wide{max-width:640px}
@media (min-width:768px){.form-2col{grid-template-columns:1fr 1fr}.form-2col>.span,.form-2col>.form-note{grid-column:1/-1}}

.login-brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--primary);text-decoration:none}
.login-brand img{width:38px;height:38px;padding:4px;border-radius:12px;background:#fff}
.login-form h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.login-form p{margin-top:var(--s-1)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{min-height:65px}
.login-aux{display:flex;justify-content:flex-end;font-size:var(--fs-s);font-weight:600}
.login-form .btn{transition:transform var(--t-out),box-shadow var(--t-out),background var(--t-out)}
.login-form .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,102,86,.28)}
.login-form .btn:active{transform:translateY(0)}
.login-form>*{animation:login-up .7s var(--ease) both}
.login-form>form{position:relative;z-index:1}
.login-form>*:nth-child(1){animation-delay:.2s}.login-form>*:nth-child(2){animation-delay:.3s}.login-form>*:nth-child(3){animation-delay:.4s}
@media (max-width:479.98px){.login-card{padding:var(--s-5) var(--s-4)}}
@keyframes login-blob-a{from{transform:translate(-4%,-3%) rotate(0) scale(1)}to{transform:translate(6%,5%) rotate(14deg) scale(1.12)}}
@keyframes login-blob-b{from{transform:translate(5%,4%) rotate(0) scale(1.1)}to{transform:translate(-6%,-5%) rotate(-16deg) scale(1)}}
@keyframes login-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.login-art::before,.login-art::after,.login-card,.login-form>*{animation:none!important}}

/* Uygulama (Flutter WebView) içinde: yazı seçimi ve uzun basma menüsü kapalı. Alanlar hariç.
   Sınıf köprüden gelir (kentix_flutter/assets/webview/kentix_bridge.js); tarayıcıda yoktur. */
.kentix-app{--kentix-safe-b:0px;-webkit-touch-callout:none}
/* Android'in dokunma vurgusu (basınca mavi zemin) uygulamada kapalı; basma geri bildirimi .btn:active ile.  */
.kentix-app *{-webkit-tap-highlight-color:transparent}
/* Basma tepkisi: parmak değdiği anda öğe koyulaşır ve hafifçe küçülür; kalkınca döner. */
.kentix-app :is(button,a,[role=button]):active{filter:brightness(.9);transform:scale(.98);transition:transform 80ms ease-out,filter 80ms ease-out}
/* Form gönderilirken gönder düğmesi (app.js) kilitli ve soluk görünür. */
.is-busy{opacity:.7;cursor:progress!important}
.kentix-app body{-webkit-user-select:none;user-select:none}
.kentix-app input,.kentix-app textarea,.kentix-app select,.kentix-app [contenteditable]{-webkit-user-select:text;user-select:text}
/* WebView'da ağır efektler kapalı: blur ve sürekli animasyon klavye/kaydırma sırasında takılma yapar.
   Renk ve düzen aynı kalır; yalnızca cam efekti ve arka plan hareketi gider. */
.kentix-app .login-art::before,.kentix-app .login-art::after,.kentix-app .login-form>*{animation:none!important}
.kentix-app .login-card{animation:login-card-in .5s var(--ease) both}
@keyframes login-card-in{from{opacity:0;transform:translateY(32px) scale(.92)}to{opacity:1;transform:none}}
.kentix-app .login-card,.kentix-app .topbar::before,.kentix-app .wiz-bar::before{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.kentix-app .login-card{background:var(--surface)!important}
.kentix-app .topbar::before,.kentix-app .wiz-bar::before{background:var(--surface)!important}
/* Bağlantı ve görseller basılı tutulup kaydırılınca sürüklenmesin (Android'de adres gölgesi çıkıyordu). */
.kentix-app a,.kentix-app img{-webkit-user-drag:none}
/* Klavye açıkken sayfanın altına klavye kadar boşluk: son alan kaydırılabilsin (__kentixKlavyeDegisti). */
.kentix-app.kentix-klavye-acik body{padding-bottom:var(--kentix-klavye,0px)}
.kentix-app.kentix-klavye-acik .sheet:not(.drawer){margin-bottom:var(--kentix-klavye,0px);max-height:calc(92dvh - var(--kentix-klavye,0px));border-radius:var(--r-l,28px)}
.kentix-app.kentix-klavye-acik .sheet.drawer{scroll-padding-bottom:calc(var(--kentix-klavye,0px) + 24px)}
.kentix-app.kentix-klavye-acik .sheet.drawer::after{content:"";display:block;height:var(--kentix-klavye,0px)}
.kentix-app.kentix-klavye-acik .hub-pane{bottom:var(--kentix-klavye,0px);max-height:calc(90dvh - var(--kentix-klavye,0px))}

/* Şifre kutusu (6 haneli): gerçek giriş görünmez üstte durur, daireler dolar */
.pin-box{position:relative;display:block;min-height:var(--control)}
.pin-box input{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:none;opacity:0;font-size:16px;cursor:text}
.field .pin-box input:not([type=checkbox]){position:absolute;min-height:0;padding:0;border:0;background:none;box-shadow:none}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:var(--control);border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);transition:border-color var(--t-out),box-shadow var(--t-out)}
.pin-dots i{width:14px;height:14px;border:2px solid var(--line-2);border-radius:50%;transition:background var(--t-out),border-color var(--t-out)}
.pin-dots i.on{border-color:var(--primary);background:var(--primary)}
.pin-box:hover .pin-dots{border-color:var(--line-2)}
.pin-box:focus-within .pin-dots{border-color:var(--primary);box-shadow:var(--ring)}
.pin-box:focus-within .pin-dots i.cur{border-color:var(--primary)}
.field.invalid .pin-dots{border-color:var(--danger)}