/* ════════════════════════════════════════════════════════════════════════
   ŞPO Askı Takip — "Modernist" arayüz sistemi.
   Beyaz zemin, siyah metin, tek vurgu olarak ŞPO yeşili (#15803d); keskin
   köşeler (radius 0), kalın ayraçlar ve Archivo yazı tipi.
   Renk/ölçü değerleri aşağıdaki değişkenlerden gelir;
   arayüzü baştan renklendirmek için yalnızca :root bloğu değiştirilir.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Archivo (değişken yazı tipi, yerel kopya — internet gerekmez) ---- */
@font-face{
 font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
 src:url('fonts/archivo-latin-ext.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
   U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
 font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
 src:url('fonts/archivo-latin.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
   U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
 /* Beyaz zemin · siyah metin · tek vurgu: ŞPO yeşili.
    Yeşil ve nötr basamaklar OKLCH'de tek bir açıklık ölçeğinde üretildi;
    böylece her rolün aynı basamağı gözde aynı değerde okunur. */
 --bg:#ffffff;
 --surface:#f2f4f2;
 --ink:#1a1c1a;
 --accent:#15803d;
 --accent-2:#62891a;
 --line:color-mix(in srgb,#1a1c1a 40%,transparent);
 --line-soft:color-mix(in srgb,#1a1c1a 18%,transparent);
 --mut:color-mix(in srgb,#1a1c1a 55%,transparent);

 --n100:#f4f5f5;--n200:#e7e8e7;--n300:#d3d4d4;--n400:#b6b7b7;--n500:#979898;
 --n600:#797a7a;--n700:#5d5e5d;--n800:#414241;--n900:#2b2c2b;

 --a100:#f1f7f2;--a200:#deede0;--a300:#c0ddc5;--a400:#90c79b;--a500:#50b06a;
 --a600:#28914b;--a700:#177036;--a800:#124f26;--a900:#15331c;

 --a2-100:#f3f7f0;--a2-200:#e3ebdb;--a2-300:#cbdbbb;--a2-700:#496a0a;--a2-800:#344b0a;

 --font:'Archivo',system-ui,'Segoe UI',sans-serif;
 --head-w:800;

 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;

 --shadow-sm:0 1px 2px color-mix(in srgb,#2b2c2b 14%,transparent);
 --shadow-md:0 3px 10px color-mix(in srgb,#2b2c2b 16%,transparent);
 --shadow-lg:0 12px 32px color-mix(in srgb,#2b2c2b 22%,transparent);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
     font-size:15px;line-height:1.55;font-weight:400}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:var(--head-w);line-height:1.14;
     letter-spacing:-.015em;margin:0 0 var(--s2)}
h1{font-size:34px}h2{font-size:24px}h3{font-size:19px}h4{font-size:16px}h5{font-size:14px}
h6{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
p{margin:0 0 var(--s3)}
a{color:var(--a700);text-underline-offset:3px;text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
img{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
hr{height:2px;border:0;margin:var(--s4) 0;background:var(--line)}

/* ---- üst çubuk ---- */
header{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
       padding:var(--s3) var(--s6);background:var(--bg);
       border-bottom:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--s2);margin-right:var(--s2)}
.brand img{height:24px;width:24px;object-fit:contain}
header h1{font-size:17px;margin:0;letter-spacing:.01em;white-space:nowrap;font-weight:var(--head-w)}
header nav{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
header a{color:inherit;text-decoration:none;font-size:14px;white-space:nowrap}
header a:hover,header a.on{color:var(--accent);text-decoration:none}
header a.on{font-weight:600}
.nav-tools{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav-sep{width:2px;height:22px;background:var(--line);margin:0 var(--s1)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
     border:1px solid transparent;background:transparent;color:var(--accent);cursor:pointer;padding:0}
.icon-btn:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);text-decoration:none}
.icon-btn svg{display:block}
main{max-width:1280px;margin:0 auto;padding:var(--s6) var(--s6) var(--s8)}
main.wide{max-width:none}

.badge{display:inline-block;background:var(--accent);color:var(--bg);
       padding:1px 7px;font-size:11px;font-weight:700;letter-spacing:.02em}

/* ---- kartlar ---- */
.card{background:var(--surface);box-shadow:var(--shadow-sm);padding:var(--s6);margin-bottom:var(--s5)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
        font-weight:600;margin-bottom:var(--s2)}
.hint{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.5}
.text-muted{color:var(--mut)}

/* ---- tablolar ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;vertical-align:top}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
   color:var(--mut);border-bottom:2px solid var(--line)}
td{border-bottom:1px solid var(--line-soft)}
tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.table-wrap{overflow-x:auto}

/* ---- düğmeler ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
     text-decoration:none;font-family:var(--font);font-weight:var(--head-w);font-size:14px;
     line-height:1.2;padding:var(--s2) 14px;border:1px solid transparent;border-radius:0;
     background:var(--accent);color:var(--bg);transition:background .15s,color .15s}
.btn:hover{background:var(--a700);color:var(--bg);text-decoration:none}
.btn:active{background:var(--a800)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.sec:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.btn.sec:active{background:color-mix(in srgb,var(--ink) 14%,transparent)}
/* Yıkıcı işlem: palette dördüncü bir renk katmadan, siyahın ağırlığıyla ayrılır */
.btn.danger{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger:hover{background:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--accent);border-color:transparent;padding-inline:var(--s2)}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.btn.small{padding:5px 11px;font-size:12px}
.btn.block{width:100%}
button{font:inherit}
form.inline{display:inline}

/* ---- form alanları ---- */
input,select,textarea{width:100%;min-height:36px;padding:7px 10px;font:inherit;font-size:14px;
     color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:0;
     caret-color:var(--accent)}
textarea{min-height:90px;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 60%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent);
     outline:2px solid var(--accent);outline-offset:0}
input[type=checkbox],input[type=radio]{width:16px;height:16px;min-height:0;accent-color:var(--accent);
     margin:0;padding:0}
input[type=file]{background:transparent;border-style:dashed;padding:6px}
label{display:block;margin:var(--s4) 0 5px;font-size:12px;font-weight:500;color:var(--mut)}

/* ---- bildirim şeritleri ---- */
.flash{background:var(--a100);border:1px solid var(--a300);border-left:3px solid var(--accent);
       padding:11px 16px;margin-bottom:var(--s4);font-size:14px}
.flash.warn{background:var(--n200);border-color:var(--line-soft);border-left-color:var(--ink)}
.flash.warn a{color:var(--a800);font-weight:600}
.flash.info{background:var(--n100);border-color:var(--line-soft);border-left-color:var(--ink)}
.status-ok{font-size:12px;color:var(--mut)}
.status-err{font-size:12px;color:var(--ink);font-weight:700}

/* ---- etiketler (chip / tag) ---- */
/* Aciliyet ölçeği tek renk yerine ağırlıkla kurulur:
   dolu siyah → yeşil çerçeve → yeşil zemin → soluk çerçeve. */
.chip,.site-tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;
     padding:3px 10px;font-weight:600;white-space:nowrap}
.site-tag{background:var(--ink);color:var(--bg);font-weight:700}
.chip.red{background:var(--ink);color:var(--bg);font-weight:700}
.chip.amber{background:transparent;border:1px solid var(--accent);color:var(--a800);padding:2px 9px}
.chip.green{background:var(--a100);color:var(--a800)}
.chip.gray{background:transparent;border:1px solid var(--line-soft);color:var(--mut);padding:2px 9px}
a.chip.yer{text-decoration:none}
a.chip.yer:hover{border-color:var(--accent);color:var(--a800)}

/* ---- iki durumlu düğmeler (İncelendi / İtiraz / Dava, açılır başlıklar) ---- */
.tog{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1.4;
     text-decoration:none;color:var(--ink);cursor:pointer;background:transparent;
     border:1px solid var(--line);padding:5px 12px;transition:background .15s,color .15s}
.tog:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);text-decoration:none}
.tog.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.tog.on:hover{background:var(--a700);color:var(--bg)}
/* koşulu sağlanmamış işlem (ör. incelenmeden itiraz) — tıklanamaz görünür */
.tog:disabled{opacity:.4;cursor:not-allowed}
.tog:disabled:hover{background:transparent;color:var(--ink)}
.tog.danger:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---- kurum listesi (il başlıkları) ---- */
details.il-group{border:1px solid var(--line-soft);background:var(--bg);margin-bottom:var(--s3)}
details.il-group summary{cursor:pointer;padding:10px 14px;font-family:var(--font);font-weight:var(--head-w);
     font-size:15px;display:flex;align-items:center;gap:var(--s2);list-style:none;user-select:none;
     background:var(--n200);border-bottom:2px solid var(--line)}
details.il-group summary::-webkit-details-marker{display:none}
details.il-group summary:before{content:'▸';color:var(--accent);font-weight:400;transition:transform .15s}
details.il-group[open] summary:before{transform:rotate(90deg)}
details.il-group table{margin:0}
details.il-group th{background:var(--bg)}
.url-ico{font-size:15px;text-decoration:none}
.url-ico:hover{opacity:.7}
tr.site-row[draggable="true"]{cursor:grab}
tr.site-row.dragging{opacity:.45;background:var(--a100)}
details.il-group.dragging{opacity:.5}
tr.site-row.pasif td:not(:last-child){opacity:.55}
tr.site-row.pasif b{font-weight:600;text-decoration:line-through;text-decoration-color:var(--n400)}
.drag-handle{color:var(--n500);cursor:grab;margin-right:4px;font-size:13px}

/* ---- ana sayfa özet paneli ---- */
.dash{display:grid;grid-template-columns:320px 1fr;gap:var(--s6);align-items:start}
/* ızgara sütunu geniş tablo yüzünden taşmasın; tablo kendi içinde kaysın */
.dash>*{min-width:0}
.dash-side{display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:var(--s4)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.stat{background:var(--surface);padding:var(--s4);box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--font);font-weight:var(--head-w);font-size:28px;line-height:1.1}
.stat.hot b{color:var(--accent)}
.stat span{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;
     letter-spacing:.06em;margin-top:2px;font-weight:600}
.stat a{color:inherit}
.bar-row{margin-bottom:var(--s3)}
.bar-row:last-child{margin-bottom:0}
.bar-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;gap:var(--s2)}
.bar-top b{font-weight:700}
.bar{height:8px;background:var(--n300)}
.bar>i{display:block;height:100%;background:var(--accent)}
.bar.neutral>i{background:var(--n700)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
     flex-wrap:wrap;margin-bottom:var(--s4)}
.page-head h2{margin:0}
.page-head .tools{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---- plan kartları ---- */
.plan-item{padding:var(--s4) 0;border-bottom:1px solid var(--line-soft)}
.plan-item:last-child{border-bottom:none}
.plan-item.unread{background:var(--a100);border-left:3px solid var(--accent);
     padding-left:var(--s3);padding-right:var(--s3)}
.plan-meta{font-size:12px;color:var(--mut);margin-bottom:7px;display:flex;gap:var(--s2);
     align-items:center;flex-wrap:wrap}
.plan-title{display:block;color:var(--ink);text-decoration:none;line-height:1.6;
     word-break:break-word;font-size:14px;font-weight:500}
.plan-title:hover{color:var(--accent);text-decoration:underline}
.plan-actions{margin-top:9px;display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.plan-actions .kilit-not{margin:0}
.plan-panels{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.plan-panels details{margin:0}

/* ---- toplu işlem çubuğu (dışa aktarma + toplu silme) ---- */
.toplu-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3);
     padding:var(--s2) var(--s3);background:var(--bg);border:1px solid var(--line-soft)}
.toplu-bar .hint{margin:0}
.toplu-bar #secimSayisi{margin-right:auto}
.toplu-bar select{width:auto;min-width:0;font-size:12px;padding:5px 9px;margin:0}
.toplu-bar label[for]{cursor:pointer}
.toplu-ayrac{width:1px;align-self:stretch;background:var(--line-soft);margin:0 2px}
.plan-sec{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600;
     color:var(--mut);cursor:pointer}
.plan-sec input{width:16px;height:16px}

/* ---- süzgeç çubuğu ---- */
.filter-bar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);align-items:center}
.filter-bar select,.filter-bar input{width:auto;min-width:180px}

/* ---- açılır tarih / ek dosya kutuları ---- */
details.dates{margin-top:var(--s2)}
details.dates summary{display:inline-block;list-style:none;user-select:none}
details.dates summary::-webkit-details-marker{display:none}
.dates-form{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s2);
     background:var(--bg);border:1px solid var(--line-soft);padding:var(--s3)}
.dates-form label{margin:0 0 4px;font-size:11px}
.dates-form input{width:160px}
.ek-kutu{margin-top:var(--s2);background:var(--bg);border:1px solid var(--line-soft);padding:var(--s3)}
.ek-liste{list-style:none;margin:0 0 var(--s2);padding:0}
.ek-liste li{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:5px 0;
     border-bottom:1px dashed var(--line-soft)}
.ek-liste li:last-child{border-bottom:none}
.ek-liste a{color:var(--a700);font-size:13px;font-weight:600;word-break:break-all}
.ek-form{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.ek-form input[type=file]{width:auto;max-width:100%;font-size:12px}

/* ---- kurum bazlı adet özeti ---- */
.kurum-ozet summary{display:inline-block;list-style:none;user-select:none}
.kurum-ozet summary::-webkit-details-marker{display:none}
.kurum-chips{display:flex;flex-wrap:wrap;gap:7px;margin:var(--s2) 0 var(--s1)}
.kurum-chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:12px;
     color:var(--ink);background:transparent;border:1px solid var(--line-soft);padding:4px 11px}
.kurum-chip:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);
     color:var(--ink);text-decoration:none}
.kurum-chip b{background:var(--n200);color:var(--n900);padding:1px 7px;font-size:11px}
.kurum-chip.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.kurum-chip.on b{background:color-mix(in srgb,#fff 25%,transparent);color:var(--bg)}
.kurum-chip.clear{color:var(--ink);border-color:var(--line);background:var(--n200)}

/* ---- grafikler sayfası süzgeci ---- */
.grafik-suzgec{padding:var(--s4) var(--s5)}
.suzgec-satir{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.suzgec-satir label{margin:0;font-size:12px;font-weight:600;color:var(--mut);
     text-transform:uppercase;letter-spacing:.05em}
.suzgec-satir select{width:auto;min-width:190px;margin:0}
.suzgec-satir .satir-onay{text-transform:none;letter-spacing:0}
.grafik-suzgec .kurum-ozet{margin-top:var(--s3)}
.grafik-suzgec .kurum-chip{cursor:pointer;user-select:none}
.grafik-suzgec .kurum-chip:not(.on){opacity:.55}
#kurumKutulari{max-height:230px;overflow:auto}
#kapsamOzet{font-size:12px;color:var(--mut)}
.halka{height:320px}

/* ---- pop-up pencereler ---- */
dialog.modal{border:none;padding:0;width:min(580px,94vw);border-radius:0;color:var(--ink);
     background:var(--bg);box-shadow:var(--shadow-lg)}
dialog.modal::backdrop{background:color-mix(in srgb,#1a1c1a 50%,transparent)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
     padding:var(--s3) var(--s5);background:var(--surface);border-bottom:2px solid var(--line)}
.modal-head h3{margin:0;font-size:17px}
.modal-x{border:none;background:transparent;color:var(--mut);font-size:18px;line-height:1;
     cursor:pointer;padding:2px 7px;width:auto;min-height:0}
.modal-x:hover{background:var(--n300);color:var(--ink)}
.modal-body{padding:var(--s4) var(--s5);max-height:72vh;overflow:auto}
.modal-body>p.hint:first-child{margin-top:0}
.modal-konu{margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px dashed var(--line-soft);
     word-break:break-word}
.modal-foot{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s4);
     padding-top:var(--s3);border-top:1px solid var(--line-soft)}
.satir-onay{display:flex;align-items:center;gap:9px;margin:4px 0 var(--s2);font-size:14px}
.satir-onay input{width:auto}
/* kurum satırındaki "İşlemler" penceresi: solda düğme, sağda açıklaması */
.islem-menu{display:grid;grid-template-columns:150px 1fr;gap:var(--s3);align-items:center}
.islem-menu form.inline{display:block}
.islem-menu .btn{width:100%}
.islem-menu .hint{margin:0}
.mdu-form{display:flex;gap:var(--s3);flex-wrap:wrap}
.mdu-form>div{flex:1 1 180px}
.mdu-form label{margin-top:var(--s2)}

/* ---- açıklama listesi ---- */
.not-liste{list-style:none;margin:0 0 var(--s4);padding:0}
.not-liste li{border:1px solid var(--line-soft);background:var(--bg);padding:10px 12px;
     margin-bottom:9px}
.not-ust{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;margin-bottom:5px}
.not-ust .hint{margin:0}
.not-metin{font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.not-islem{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.not-islem details{flex:1 1 100%}
.not-islem summary{display:inline-block;list-style:none;user-select:none}
.not-islem summary::-webkit-details-marker{display:none}
.not-form{margin-top:var(--s2);display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.not-form textarea{width:100%}
.not-form label{margin:var(--s2) 0 0}

/* ---- yetki tablosu / işlem günlüğü ---- */
.yetki-tablo th{font-size:10px}
.yetki-tablo td{vertical-align:middle}
.log-tablo td{font-size:13px;vertical-align:top}
.log-tablo .chip{white-space:nowrap}

.pager{display:flex;gap:var(--s3);align-items:center;justify-content:center;margin-top:var(--s5)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}

/* ---- giriş ekranı ---- */
.login-wrap{min-height:100vh;width:100%;display:flex;background:var(--bg)}
.login-side{flex:1 1 45%;min-width:340px;background:var(--ink);color:var(--bg);display:flex;
     flex-direction:column;justify-content:space-between;padding:var(--s8)}
.login-side .brand img{height:40px;width:40px}
.login-side .brand span{font-family:var(--font);font-weight:var(--head-w);font-size:19px;
     letter-spacing:.03em}
.login-rule{width:56px;height:2px;background:var(--accent);margin-bottom:var(--s4)}
.login-side h1{font-size:40px;line-height:1.15;margin:0 0 var(--s4)}
.login-side p{font-size:15px;line-height:1.7;opacity:.75;max-width:42ch;margin:0}
.login-foot{font-size:12px;opacity:.55}
.login-form{flex:1 1 55%;display:flex;align-items:center;justify-content:center;padding:var(--s8)}
.login-form form{width:100%;max-width:380px}
.login-form h2{font-size:26px;margin:0 0 var(--s2)}
.login-form .lead{font-size:14px;color:var(--mut);margin:0 0 var(--s6)}
.login-form .field{margin-bottom:var(--s4)}
.login-form .flash{margin-bottom:var(--s4)}

/* ---- küçük ekranlar ---- */
@media(max-width:900px){
 .dash{grid-template-columns:1fr}
 .dash-side{position:static}
 .stat-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
@media(max-width:700px){
 .grid{grid-template-columns:1fr}
 header{padding:10px 14px;gap:var(--s2)}
 header nav{gap:var(--s3)}
 header h1{font-size:15px}
 header a{font-size:13px}
 .nav-tools{margin-left:0}
 main{padding:var(--s4) var(--s3) var(--s6)}
 .card{padding:var(--s4)}
 h2{font-size:21px}
 table{font-size:13px}
 th,td{padding:8px 9px}
 .filter-bar{flex-direction:column;align-items:stretch}
 .filter-bar select,.filter-bar input{width:100%;min-width:0}
 .dates-form{flex-direction:column;align-items:stretch}
 .dates-form input{width:100%}
 dialog.modal{width:100%;max-width:100%;margin:auto 0 0}
 .modal-body{max-height:78vh;padding:var(--s3)}
 .mdu-form{flex-direction:column;gap:0}
 .islem-menu{grid-template-columns:1fr;gap:var(--s2)}
 .islem-menu .hint{margin-bottom:var(--s2)}
 .stat{padding:var(--s3)}
 .stat b{font-size:23px}
 .login-wrap{flex-direction:column}
 .login-side{padding:var(--s6);min-width:0;gap:var(--s5)}
 .login-side h1{font-size:28px}
 .login-form{padding:var(--s6)}
}