:root{
  /* Ayıraçlar bilerek belirgin: yoğun tablolarda alanların birbirinden
     ayrıldığı net görünmezse ekran karman çorman okunuyor. */
  --bg:#e7ecf2; --card:#fff; --line:#c5d0dd; --line2:#dde5ee;
  --line3:#aebbcb;                     /* güçlü ayıraç: başlık altı, kart üstü */
  --th-bg:#e6ecf3; --th-ink:#3c4b5c;   /* tablo başlık satırı */
  --zebra:#f7f9fc;                     /* tek/çift satır ayrımı */
  --surface-2:#f2f6fa;                 /* kart içi ikincil zemin */
  --kenar:#2f3a47;                     /* kartların dış çerçevesi — alanları keskin ayırır */
  --ink:#1b2430; --ink2:#5a6775; --muted:#7b8895;
  --brand:#12545f; --brand2:#e6f0f1;
  --ok:#1f7a4c; --ok-bg:#e7f5ee; --ok-line:#9fd3ba;
  --warn:#a8620a; --warn-bg:#fdf1e0; --warn-line:#e8c48c;
  --crit:#b03434; --crit-bg:#fdeceb; --crit-line:#eeb1ad;
  --mono:Consolas,"SF Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5}
a{color:var(--brand)}

/* ---- üst çubuk ---- */
.top{background:var(--card);border-bottom:2px solid var(--line3);box-shadow:0 1px 4px rgba(24,38,56,.06);padding:0 20px;
  display:flex;align-items:center;gap:18px;height:56px;position:sticky;top:0;z-index:40}
/* Logo yüksekliği 56px'lik üst çubuğa göre: altta ve üstte 11'er piksel boşluk
   kalacak şekilde 34px. Genişlik oranla kendiliğinden gelir (452:120). */
.top .logo{display:flex;align-items:center;gap:11px}
.top .logo img{height:34px;width:auto;display:block}
.top .logo .rol{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:2px 7px}
.top .sp{flex:1}
.top .who{font-size:13px;color:var(--ink2)}
.top .who b{color:var(--ink)}

.wrap{max-width:1500px;margin:0 auto;padding:20px 20px 60px;display:flex;flex-direction:column;gap:20px}

/* ---- durum şeridi ---- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--kenar);border-radius:7px;padding:13px 16px;
  box-shadow:0 1px 2px rgba(24,38,56,.06);
  display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .v{font-size:22px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--ink2)}
.stat.good .v{color:var(--ok)} .stat.warn .v{color:var(--warn)} .stat.bad .v{color:var(--crit)}

/* ---- kart ---- */
/* Kartlar zeminden ayrılsın: ince koyu dış çerçeve + hafif gölge. */
.card{background:var(--card);border:1px solid var(--kenar);border-radius:7px;overflow:hidden;
  box-shadow:0 1px 2px rgba(24,38,56,.08), 0 3px 10px rgba(24,38,56,.05)}
.card>h2{margin:0;padding:14px 16px;border-bottom:2px solid var(--line3);font-size:15px;font-weight:700;
  letter-spacing:-.01em;background:#fafcfe;display:flex;align-items:center;gap:10px}
.card>h2 .cnt{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400}
.card .empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:14px}

/* ---- katlanır kart ---- */
.card.katlanir>h2{cursor:pointer;user-select:none}
.card.katlanir>h2:hover{background:#f3f7fb}
.card.katlanir>h2::after{content:'▾';margin-left:auto;font-size:13px;color:var(--muted);
  transition:transform .15s ease}
.card.katlanir.kapali>h2{border-bottom:none}
.card.katlanir.kapali>h2::after{transform:rotate(-90deg)}
.card.katlanir.kapali>.govde{display:none}

/* ---- tablo ---- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:900px}
/* Başlık satırı gövdeden net ayrılsın: koyu zemin, koyu yazı, kalın alt çizgi. */
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--th-ink);font-weight:700;
  text-align:left;padding:11px 14px;background:var(--th-bg);
  border-bottom:2px solid var(--line3);white-space:nowrap}
th+th{border-left:1px solid #d3dde8}
td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
/* Sıra sıra hafif zemin — uzun satırlarda göz kaymasını engeller. */
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr:hover{background:#eaf1f8}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Düğme taşıyan hücreler. Satır içi biçim yerine sınıf kullanıyoruz ki
   telefondaki kart görünümü bunu sorunsuz geçersiz kılabilsin. */
.islem-hucre{display:flex;gap:6px;flex-wrap:wrap}
.islem-hucre.g8{gap:8px}
.tutar{display:inline-block;font-family:var(--mono);font-weight:600;color:var(--ok);
  border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:4px;padding:3px 9px;white-space:nowrap}
.ad{display:inline-block;font-family:var(--mono);font-size:13px;border:1px solid var(--line);
  border-radius:4px;padding:3px 9px;background:#fafbfc}
.ad.acik{border-color:var(--ok-line);background:var(--ok-bg);color:#14532d;font-weight:600}
.kaynak{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;color:#9d2f5f;
  border:1px solid #edb9d0;background:#fdeef5;border-radius:4px;padding:2px 8px}
.sayac{display:inline-block;font-family:var(--mono);font-weight:700;border-radius:4px;padding:3px 9px;
  border:1px solid var(--line);background:#f6f8fa}
.sayac.s1{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.sayac.s2{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}

/* ---- düğmeler ---- */
.btn{font:inherit;font-size:13px;font-weight:600;border-radius:4px;padding:7px 14px;cursor:pointer;
  border:1px solid;background:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-rez{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.btn-rez:hover:not(:disabled){background:#f9e6c8}
.btn-ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.btn-ok:hover:not(:disabled){background:#d6ecdf}
.btn-no{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
.btn-no:hover:not(:disabled){background:#f9dcd9}
.btn-g{color:var(--ink2);border-color:var(--line)}
.btn-g:hover:not(:disabled){background:#f2f5f8}
.btn-brand{color:#fff;background:var(--brand);border-color:var(--brand)}
.btn-brand:hover:not(:disabled){background:#0d4149}

/* ---- uyarı çubuğu ---- */
.bar{border-radius:6px;padding:11px 16px;font-size:14px;display:flex;align-items:center;gap:10px;border:1px solid}
.bar.crit{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-line)}
.bar.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.bar b{font-weight:700}

/* ---- bildirim ---- */
#toast{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast{background:#1b2430;color:#fff;border-radius:6px;padding:11px 16px;font-size:14px;max-width:380px;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.toast.err{background:#8f2b2b}
.toast.ok{background:#1c6b46}

/* ---- kapatılamayan popup ---- */
.mask{position:fixed;inset:0;background:rgba(16,22,30,.62);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border:1px solid var(--kenar);border-radius:8px;max-width:520px;width:100%;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .mh{padding:16px 22px;font-size:17px;font-weight:700;color:#fff;background:var(--crit)}
.modal .mh.w{background:var(--warn)}
.modal .mb{padding:20px 22px;display:flex;flex-direction:column;gap:12px;font-size:15px}
.modal .mb .big{font-family:var(--mono);font-size:15px;background:#f6f8fa;border:1px solid var(--line);
  border-radius:4px;padding:10px 14px}
.modal .mf{padding:0 22px 20px;display:flex;justify-content:flex-end;gap:10px}

/* ---- rezerve onay penceresi ---- */
.modal.onay{max-width:560px}
.modal .mh.duz{
  background:#1b2430;color:#eef2f6;text-align:center;
  font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.1em;
  padding:14px 22px}
.modal.onay .mb{padding:4px 26px 20px;gap:16px}

/* Etiket sütunu en uzun etikete göre daralır, değerler hep aynı hizadan başlar. */
.ozet{display:grid;grid-template-columns:max-content 1fr;gap:10px 26px;
  margin:0;padding:18px 2px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ozet dt{font-family:var(--mono);font-size:13.5px;color:var(--ink2);white-space:nowrap}
.ozet dd{font-family:var(--mono);font-size:13.5px;font-weight:600;margin:0;word-break:break-all}
.ozet dd.para{color:var(--ok);font-size:15px}

.soru{font-size:15px;font-weight:600;text-align:center}
.aciklama{font-size:13px;color:var(--muted);text-align:center;line-height:1.5}
.modal .mf.genis{justify-content:center;gap:14px;padding-bottom:22px}
.modal .mf.genis .btn{min-width:150px;justify-content:center;padding:11px 16px;
  font-size:14px;letter-spacing:.06em}

/* ---- giriş ---- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .box{background:var(--card);border:1px solid var(--kenar);border-radius:8px;padding:30px;
  width:100%;max-width:370px;display:flex;flex-direction:column;gap:14px;box-shadow:0 4px 22px rgba(20,30,45,.07)}
.login .logo-img{height:52px;width:auto;display:block;margin:0 auto 4px}
.login p.sub{margin:0;color:var(--muted);font-size:13px}
label{font-size:12px;font-weight:600;color:var(--ink2);display:flex;flex-direction:column;gap:5px}
textarea{font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line);border-radius:5px;
  background:#fff;color:var(--ink);width:100%;resize:vertical;min-height:86px;line-height:1.5}
textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand2)}

input,select{font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line);border-radius:5px;
  background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.err{color:var(--crit);font-size:13px;min-height:18px}
.login .adim{display:flex;flex-direction:column;gap:14px}
.giris-dugme{justify-content:center;padding:11px}
.baglanti-dugme{background:none;border:0;color:var(--brand);font:inherit;font-size:13px;
  cursor:pointer;padding:2px;text-align:center}
.baglanti-dugme:hover{text-decoration:underline}
.kod-alani{font-family:var(--mono);font-size:22px;letter-spacing:.35em;text-align:center;
  font-weight:700;padding:12px}
.yonerge{margin:0;padding-left:20px;font-size:14px;color:var(--ink2);line-height:1.7}
.yonerge li{margin-bottom:3px}

/* ---- derece rozeti ---- */
.derece{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.06em;padding:5px 11px;border-radius:5px;cursor:pointer;
  border:1px solid;background:#fff;font-family:inherit;white-space:nowrap}
.derece:hover{filter:brightness(.94)}
.derece .tac{font-size:13px;line-height:1}

/* Derece penceresindeki basamak listesi — hepsi aynı hizada. */
.basamaklar{display:grid;grid-template-columns:max-content 1fr max-content;
  gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.basamaklar>div{display:contents}
.bsm-ad,.bsm-orta,.bsm-sag{padding:11px 4px;border-bottom:1px solid var(--line2);
  display:flex;align-items:center}
.basamaklar>div:last-child .bsm-ad,
.basamaklar>div:last-child .bsm-orta,
.basamaklar>div:last-child .bsm-sag{border-bottom:none}
.bsm-ad{gap:8px;font-weight:700;font-size:13px;letter-spacing:.04em;white-space:nowrap}
.bsm-orta{justify-content:flex-end;font-family:var(--mono);font-size:12.5px;color:var(--muted);
  padding-right:18px;white-space:nowrap}
.bsm-sag{justify-content:flex-end;font-family:var(--mono);font-size:13px;font-weight:600;
  white-space:nowrap;min-width:132px}
.bsm-satir.simdi{background:var(--surface-2)}
.bsm-nokta{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bsm-sag.ulasildi{color:var(--ok)}
.bsm-sag.kalan{color:var(--ink)}
.bsm-sag.pasif{color:var(--muted)}

/* ---- yönetim ---- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:14px 16px}
.form-row .full{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}
.log{font-family:var(--mono);font-size:12px;max-height:320px;overflow-y:auto}
.log div{padding:6px 16px;border-bottom:1px solid var(--line2);display:flex;gap:10px}
.log div:last-child{border-bottom:none}
.log .t{color:var(--muted);white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--ok)} .dot.off{background:var(--crit)}

/* ---- belge yükleme ---- */
.dosyalar{display:flex;flex-direction:column;gap:10px}
.dsr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:5px;padding:11px 14px;background:var(--surface-2)}
.dsr.tamam{border-color:var(--ok-line);background:var(--ok-bg)}
.dsr .ad{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.dsr .alt{font-size:12px;color:var(--muted);margin-top:2px;word-break:break-all}
.dsr.tamam .alt{color:#2c6b4a}
.dsr .isaret{font-family:var(--mono);color:var(--muted)}
.dsr.tamam .isaret{color:var(--ok)}
.secdug{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:4px;
  padding:7px 14px;background:#fff;color:var(--ink2);cursor:pointer;white-space:nowrap}
.secdug:hover{background:#f2f5f8}
.dsr input[type=file]{display:none}

/* ---- sekmeler ---- */
.sekmeler{display:flex;border-bottom:2px solid var(--line3);padding:0 10px;overflow-x:auto;background:#fafcfe}
.sekme{padding:11px 16px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit}
.sekme:hover{color:var(--ink2)}
.sekme.aktif{color:var(--brand);border-bottom-color:var(--brand)}
.sekme .sayi{font-family:var(--mono);font-size:12px;opacity:.75;margin-left:5px}

.durum{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  border:1px solid;border-radius:4px;padding:3px 9px;white-space:nowrap}
.durum.bekliyor{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.durum.onayli{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.durum.red{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
.sebep{font-size:13px;color:var(--crit);margin-top:3px}
.uyari-mini{font-size:12px;color:var(--warn);margin-top:3px}
.durum.geri{color:#7a3ea8;border-color:#c9a6e0;background:#f4ebfa}
.durum.web{color:var(--brand);border-color:#a8cdd3;background:var(--brand2)}
.durum.bos{color:var(--muted);border-color:var(--line);background:var(--surface-2)}

/* ---- duyuru okuyan listesi ---- */
.readers{display:flex;flex-wrap:wrap;gap:6px}
.reader{font-family:var(--mono);font-size:12px;border:1px solid var(--line);
  background:#fff;color:var(--muted);padding:3px 9px;border-radius:4px;white-space:nowrap}
.reader.yes{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}

/* ---- sayfalama ---- */
.sayfalama{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:2px solid var(--line3);background:var(--th-bg)}
.sayfalama .bilgi{flex:1;font-size:13.5px;color:var(--ink2);min-width:200px}
.sayfalama .bilgi b{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.sayfalama .sayfa{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap}
.sayfalama .btn{padding:6px 13px;font-size:13px}

/* ---- duyuru kayan yazı ---- */
.duyuru-serit{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:6px;
  display:flex;align-items:center;gap:12px;padding:9px 14px;cursor:pointer;overflow:hidden}
.duyuru-serit:hover{background:#f9e6c8}
.duyuru-serit .ico{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--warn);white-space:nowrap;flex-shrink:0}
/* min-width:0 şart — flex öğesi varsayılan olarak içeriği kadar geniş olmak
   ister, o yüzden kutu taşar ve kayma mesafesi yanlış hesaplanır. */
.duyuru-serit .kayan{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
/* padding-left:100% metni kutunun sağ kenarından başlatır; translateX(-100%)
   kendi toplam genişliği (kutu + metin) kadar sola taşır, yani metin
   soldaki DUYURU etiketine kadar akıp tamamen kaybolur. */
.duyuru-serit .kayan span{display:inline-block;padding-left:100%;color:var(--warn);font-size:14px;
  animation:kay linear infinite;animation-duration:20s;will-change:transform}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .duyuru-serit .kayan span{animation:none;padding-left:0;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ---- mesaj kutusu ---- */
.zil{position:relative;font-size:18px;line-height:1;background:none;border:0;cursor:pointer;
  padding:6px 8px;border-radius:5px}
.zil:hover{background:#f2f5f8}
.zil .sayi{position:absolute;top:0;right:0;min-width:17px;height:17px;border-radius:9px;
  background:var(--crit);color:#fff;font-size:11px;font-weight:700;font-family:var(--mono);
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.msg-liste{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column}
.msg-sat{display:grid;grid-template-columns:8px 1fr auto;gap:12px;align-items:start;
  padding:13px 18px;border-bottom:1px solid var(--line2)}
.msg-sat:last-child{border-bottom:none}
.msg-sat.yeni{background:var(--surface-2)}
.msg-sat .nokta{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:6px}
.msg-sat.yeni .nokta{background:var(--brand)}
.msg-sat .govde{display:flex;flex-direction:column;gap:3px;min-width:0}
.msg-sat .metin{font-size:14.5px}
.msg-sat.yeni .metin{font-weight:600}
.msg-sat .alt{font-family:var(--mono);font-size:11px;color:var(--muted)}
.msg-sat .sil{font-size:12px;color:var(--muted);background:none;border:0;cursor:pointer;
  font-family:var(--mono);padding:2px 6px;border-radius:4px}
.msg-sat .sil:hover{color:var(--crit);background:var(--crit-bg)}
.rozet{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;padding:1px 6px;
  border-radius:3px;border:1px solid;margin-right:6px}
.rozet.red{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
.rozet.geri{color:#7a3ea8;border-color:#c9a6e0;background:#f4ebfa}
.rozet.bilgi{color:var(--brand);border-color:#a8cdd3;background:var(--brand2)}

/* ---- hakediş tablosu ---- */
.hak{display:flex;flex-direction:column}
.hak .sat{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 18px;border-bottom:1px solid var(--line2)}
.hak .sat:last-child{border-bottom:none}
.hak .sat.vurgu{background:var(--surface-2);font-weight:600}
.hak .et{font-size:14px;color:var(--ink2)}
.hak .sat.vurgu .et{color:var(--ink)}
.hak .dg{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap}
.hak .dg.eksi{color:var(--crit)}
.hak .dg.net{color:var(--brand);font-weight:600}
.hak .dg.borc{color:var(--crit);font-weight:700}
.hak .dg.ok{color:var(--ok);font-weight:600}


/* ---- yönetim: gönderilmiş mesaj geçmişi ---- */
.gecmis-msg{display:flex;flex-direction:column;gap:7px;max-height:220px;overflow-y:auto;
  border:1px solid var(--line);border-radius:5px;padding:9px;background:var(--surface-2)}
.gm{background:#fff;border:1px solid var(--line);border-left:3px solid var(--line3);
  border-radius:4px;padding:8px 11px}
.gm.ok{border-left-color:var(--ok)}
.gm-ust{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.gm-durum{font-family:var(--mono);font-size:11px;color:var(--muted)}
.gm.ok .gm-durum{color:var(--ok)}
.gm-metin{font-size:13px;line-height:1.5;color:var(--ink)}
.gm-alt{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}

/* ================================================================
   MOBİL
   Masaüstü görünümü hiç değişmez; kurallar yalnızca dar ekranda
   devreye girer.
   ================================================================ */

@media (max-width:900px){
  .wrap{padding:15px 12px 40px;gap:15px}
  .top{padding:0 13px;gap:13px}
}

@media (max-width:780px){
  /* Üst çubuk tek satıra sığmıyor ve tüm sayfayı yana kaydırıyordu.
     Artık alt satıra geçiyor, sayfa yatay kaymıyor. */
  .top{height:auto;min-height:56px;flex-wrap:wrap;padding:9px 12px;gap:9px;align-items:center}
  .top .logo img{height:27px}
  .top .sp{flex:1 1 auto}
  .top .who{order:9;flex:1 1 100%;font-size:12px;padding-top:8px;
    border-top:1px solid var(--line2)}

  .wrap{padding:12px 10px 40px;gap:13px}

  /* iOS Safari, 16 pikselden küçük yazı alanlarına dokununca ekranı
     kendiliğinden yakınlaştırıyor. 16'ya çıkarınca bu zıplama biter. */
  input,select,textarea{font-size:16px}

  /* Parmakla rahat basılabilir düğme yüksekliği. */
  .btn{padding:10px 15px;min-height:40px}
  .zil,.derece{min-height:36px}

  .strip{grid-template-columns:1fr 1fr;gap:9px}
  .stat{padding:11px 13px}
  .stat .v{font-size:19px}
  .stat .k{font-size:10px}

  .card>h2{padding:12px 14px;font-size:14px}
  .card .empty{padding:24px 14px;font-size:13px}
  .form-row{padding:12px 13px}
  .sekmeler{padding:0 6px}
  .sekme{padding:11px 12px;font-size:13px}

  .mask{padding:10px}
  .modal .mh{padding:14px 16px;font-size:16px}
  .modal .mb{padding:16px}
  .modal .mf{padding:0 16px 16px}
  .modal .mf.genis{flex-direction:column-reverse}
  .modal .mf.genis .btn{width:100%}

  /* ---- tablolar telefonda karta dönüşür ---- */
  /* Her hücreye kendi başlığı data-b olarak yazılıyor (bkz. etiketle()).
     Böylece sütunlar alt alta, başlıkları solda görünür. */
  .tw{overflow-x:visible}
  table.kart{min-width:0!important;display:block}
  table.kart thead{display:none}
  table.kart tbody,table.kart tr,table.kart td{display:block;width:auto}
  table.kart tbody tr{border-bottom:2px solid var(--line3);padding:5px 0}
  table.kart tbody tr:last-child{border-bottom:none}
  table.kart tbody tr:hover{background:transparent}
  table.kart td{border:none;padding:7px 14px;display:flex;align-items:baseline;
    justify-content:space-between;gap:14px;text-align:right}
  table.kart td[data-b]::before{content:attr(data-b);flex:0 0 auto;text-align:left;
    font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);white-space:nowrap;padding-top:2px}
  table.kart td.tam{display:block;text-align:left}
  table.kart td.islem{display:block;text-align:left}
  table.kart td.islem::before{display:block;margin-bottom:7px}
  table.kart td.islem .btn{margin:0 6px 6px 0}

  /* ---- katlanır satır ----
     Kapalıyken yalnızca özet hücre (varsa tutar) görünür. Satıra dokununca
     kalan hücreler aşağı doğru açılır. Böylece uzun listelerde ekran
     kalabalıklaşmıyor. */
  table.kart tbody tr{display:flex;flex-direction:column}
  table.kart tbody tr>td.ozet{order:-1;position:relative;cursor:pointer;
    padding:13px 14px 13px 32px;font-size:15px;user-select:none}
  table.kart tbody tr>td.ozet::after{content:'▾';position:absolute;left:12px;top:50%;
    transform:translateY(-50%);color:var(--muted);font-size:12px;
    transition:transform .15s ease}
  table.kart tbody tr:not(.acik)>td.ozet::after{transform:translateY(-50%) rotate(-90deg)}
  table.kart tbody tr.acik>td.ozet{border-bottom:1px solid var(--line2);margin-bottom:4px}
  table.kart tbody tr:not(.acik)>td.gizli{display:none}
  table.kart tbody tr:not(.acik){padding:0}
}

@media (max-width:430px){
  .strip{grid-template-columns:1fr}
  .top .logo img{height:24px}
  .wrap{padding:10px 8px 36px}
  table.kart td{padding:7px 11px;gap:10px}
}

/* ---- başarısız işlem uyarısı ---- */
.uyari-kutu{border:1px solid var(--crit-line);background:var(--crit-bg);border-radius:6px;
  padding:13px 15px;display:flex;flex-direction:column;gap:9px}
.uyari-kutu+.uyari-kutu{margin-top:10px}
.uyari-bas{font-weight:700;font-size:15px;color:var(--crit)}
.uyari-metin{font-size:14px;line-height:1.55;color:var(--ink2)}
.uyari-kutu .ozet{margin:0;background:#fff;border:1px solid var(--crit-line)}