/* eKolayServis — Web Yönetim Paneli.
   v2 "Kum + Adaçayı" — kaynak: design/v2/web-revizyon-tum-ekranlar.html (W3 giriş, W4 panel).
   Sarı üst bant kalktı: üstte beyaz ince şerit, solda beyaz gruplu menü, içerik krem zeminde.
   Amber yalnız yönlendirme (aktif menü, tek birincil CTA, rozet) — zemin ya da metin rengi olmaz. */
:root {
  --zemin: #F7F4EC;
  --kum: #EFECE5;
  --kart: #FFFFFF;
  --murekkep: #26231D;
  --amber: #EFB000;
  --amber-tint: #F6E9C0;
  --amber-tint-kenar: #E8D496;
  --amber-tint-metin: #6B5600;
  --adacayi: #3E7D54;
  --adacayi-tint: #E9F1EA;
  --adacayi-kenar: #CFE2D2;
  --hata: #B3403A;
  --hata-tint: #F6E7E3;
  --hata-kenar: #EBD2CB;
  --hata-metin: #A94435;
  --kisit-tint: #F6EDDA;
  --kisit-kenar: #EADFC2;
  --kisit-metin: #8F6716;
  --metin: #26231D;
  --metin-2: #3A362C;
  --metin-3: #5B5648;
  --metin-soluk: #8B8574;
  --metin-silik: #A39C8B;
  --kenar: rgba(60, 55, 45, .14);
  --kenar-hafif: rgba(60, 55, 45, .08);
  --cizgi: #E9E4D6;
  --cizgi-2: #F0EBDE;
  --link: #8a6d00;
  --satir-vurgu: #FDF9EE;           /* bayraklı / kaydedilmemiş satır — sarı tint */

  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-round: 999px;
  --shadow-float: 0 18px 44px rgba(38, 35, 29, .25);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-marka: 'Space Grotesk', var(--font);
  color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
input, select, textarea, button { color: var(--metin); font-family: var(--font); }
::placeholder { color: var(--metin-silik); opacity: 1; }
body { font-family: var(--font); background: var(--zemin); color: var(--metin); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #5c4900; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 2px; }
.sg { font-family: var(--font-marka); }

/* ================= Giriş (W3) ================= */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--zemin); padding: 20px; }
.login-card {
  width: 100%; max-width: 340px; background: var(--kart);
  border: 1px solid var(--kenar-hafif); border-radius: var(--r-xl); padding: 22px;
}
.login-brand { text-align: center; }
.login-brand .logo { display: flex; justify-content: center; }
.login-brand .chip { margin: 10px 0 2px; }
.login-brand .mikro { margin-bottom: 14px; }
.mikro, .mic { font-size: 11.5px; font-weight: 500; color: var(--metin-silik); line-height: 1.5; }
.mic { display: inline; }
p.mic, div.mic { display: block; }
.step-head { margin-bottom: 14px; }
.step-head h1 { font-family: var(--font-marka); font-size: 17px; font-weight: 700; }
.step-head .mikro { margin-top: 4px; }
/* Adım göstergesi — amber = süreç dili */
.steps { display: flex; gap: 4px; margin-bottom: 12px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--cizgi); }
.steps i.on { background: var(--amber); }

.field { margin-bottom: 10px; }
.field label, .fld {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .7px;
  color: var(--metin-3); text-transform: uppercase; margin: 0 0 4px 1px;
}
.field input, .field select, .field textarea, .status-sel, .py-in, .dr-in, .fp-in, .fr-in {
  width: 100%; font: inherit; font-size: 13px; color: var(--metin); background: var(--kart);
  border: 1px solid var(--kenar); border-radius: var(--r-md); padding: 10px 12px; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus,
.status-sel:focus, .py-in:focus, .dr-in:focus, .fp-in:focus, .fr-in:focus { border-color: var(--murekkep); }
.field input[readonly] { background: var(--zemin); color: var(--metin-3); }
.field input.err, .field.err input { border-color: var(--hata-kenar); }
.field textarea { min-height: 78px; resize: vertical; }
.field.plain label { text-transform: none; letter-spacing: 0; font-size: 11px; }
.py-in, .dr-in, .fp-in, .fr-in { padding: 6px 9px; font-size: 12px; width: auto; min-width: 60px; max-width: 130px; }
.fp-in[type="number"], .fr-in[type="number"], .py-in[type="number"] { font-family: var(--font-marka); max-width: 92px; }
.py-in[type="checkbox"], .dr-in[type="checkbox"] { width: auto; min-width: 0; accent-color: var(--murekkep); }
.dr-checks { display: flex; gap: 10px; flex-wrap: wrap; }
.dr-checks label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--metin-3); }
.status-sel { width: auto; min-width: 150px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.status-sel:disabled { opacity: .55; }

/* 2FA — tek girişli 6 kutu; gerçek input kutuların üstünde şeffaf durur.
   Rakamları kutular yazar (input metni görünmez): harf genişliği/letter-spacing
   ile hizalama denemesi yazı tipine göre kayıyordu. */
.otp-wrap { position: relative; }
.otp-boxes { display: flex; gap: 6px; }
.otp-boxes i {
  flex: 1; height: 38px; border: 1px solid var(--kenar); border-radius: var(--r-md);
  background: var(--kart); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-marka); font-style: normal; font-weight: 700; font-size: 17px;
  line-height: 1; color: var(--metin); user-select: none;
}
.otp-boxes i.dolu { border-color: var(--murekkep); }
.otp-boxes i.aktif { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-tint); }
.field .otp-input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  padding: 0; border: 0 !important; background: transparent !important;
  color: transparent; caret-color: transparent; text-shadow: none;
}
.field .otp-input:focus { border: 0 !important; }
.otp-input::selection { background: transparent; }
/* Yeni şifre güç göstergesi */
.guc { display: flex; gap: 3px; margin-top: 6px; }
.guc i { flex: 1; height: 3px; border-radius: 2px; background: var(--cizgi); }
.guc i.on { background: var(--adacayi); }

.err-msg {
  display: none; background: var(--hata-tint); border: 1px solid var(--hata-kenar); color: var(--hata-metin);
  border-radius: var(--r-md); padding: 9px 11px; font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;
}
.err-msg.show { display: block; }
.err-msg b { font-weight: 800; }
.login-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11px; }

/* ================= Butonlar ve çipler ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--r-md); padding: 9px 16px;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--amber); color: var(--murekkep);
}
.btn:hover { filter: brightness(.96); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 11px; font-size: 11px; border-radius: var(--r-sm); }
.btn.amber { background: var(--amber); color: var(--murekkep); }
.btn.ink { background: var(--murekkep); color: var(--zemin); }
.btn.ink:hover { filter: brightness(1.3); }
.btn.ghost, .btn.hayalet, .btn.blue { background: var(--kart); border: 1px solid var(--kenar); color: var(--metin); }
.btn.ghost:hover, .btn.hayalet:hover, .btn.blue:hover { background: var(--zemin); filter: none; }
.btn.success { background: var(--kart); border: 1px solid var(--adacayi-kenar); color: var(--adacayi); }
.btn.danger, .btn.tehlike { background: var(--kart); border: 1px solid var(--hata-kenar); color: var(--hata-metin); }
.btn.tehlike.dolu, #dmodal-ok { background: var(--hata); border-color: var(--hata); color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: var(--r-round);
  padding: 4px 10px; font-size: 10.5px; font-weight: 700; color: var(--metin-3); white-space: nowrap;
}
/* Çip dili sabit: sarı tint = bekleyen · yeşil = onaylı · amber = kısıt · kırmızı = engel */
.chip.warning { background: var(--amber-tint); border-color: var(--amber-tint-kenar); color: var(--amber-tint-metin); }
.chip.success { background: var(--adacayi-tint); border-color: var(--adacayi-kenar); color: var(--adacayi); }
.chip.error   { background: var(--hata-tint); border-color: var(--hata-kenar); color: var(--hata-metin); }
.chip.kisit   { background: var(--kisit-tint); border-color: var(--kisit-kenar); color: var(--kisit-metin); }
.chip.gray    { background: var(--kum); border-color: var(--cizgi); color: var(--metin-3); }
.chip.blue, .chip.ink { background: var(--murekkep); border-color: var(--murekkep); color: var(--zemin); }
.chip.sm { padding: 3px 8px; font-size: 9px; }
.chip.tik { cursor: pointer; }

/* "⋯" taşan eylem menüsü */
.ovf {
  width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--kart);
  border: 1px solid var(--kenar); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--metin-3); letter-spacing: 1px; font-size: 12px; flex: none;
}
.ovf:hover { background: var(--zemin); }
.ovf-menu {
  position: absolute; z-index: 80; min-width: 190px; background: var(--kart);
  border: 1px solid var(--kenar-hafif); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 5px;
}
.ovf-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--metin-2);
  padding: 8px 10px; border-radius: var(--r-sm);
}
.ovf-menu button:hover { background: var(--zemin); }
.ovf-menu button.tehlike { color: var(--hata-metin); }
.ovf-menu hr { border: 0; border-top: 1px solid var(--cizgi-2); margin: 4px 6px; }

/* ================= Panel kabuğu ================= */
.app { display: none; min-height: 100vh; }
.app.active { display: block; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--kart); border-bottom: 1px solid var(--cizgi);
}
.topbar .brand { display: inline-flex; align-items: center; }
.topbar .who { margin-left: auto; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.topbar .cikis { border-color: var(--kenar); }
.nav-burger { display: none; background: none; border: 0; font-size: 17px; line-height: 1; padding: 4px 6px; }

.layout { display: block; }
@media (min-width: 980px) { .layout { display: flex; align-items: stretch; } }
.sidenav {
  width: 210px; flex: none; background: var(--kart); border-right: 1px solid var(--cizgi);
  padding: 8px 9px 18px; display: none;
}
@media (min-width: 980px) { .sidenav { display: block; position: sticky; top: 43px; align-self: stretch; min-height: calc(100vh - 43px); max-height: calc(100vh - 43px); overflow-y: auto; } }
.sidenav::-webkit-scrollbar { width: 6px; }
.sidenav::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 3px; }
.sbg { font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px; color: var(--metin-silik); margin: 14px 8px 4px; text-transform: uppercase; }
.sbg:first-child { margin-top: 4px; }
.sidenav button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; padding: 7px 9px; border-radius: 9px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--metin-3);
}
.sidenav button .ic { width: 14px; text-align: center; font-size: 11px; flex: none; }
.sidenav button:hover { background: var(--zemin); }
.sidenav button.active { background: var(--amber); color: var(--murekkep); font-weight: 800; }
.badge {
  margin-left: auto; background: var(--hata); color: #fff; border-radius: var(--r-round);
  font-size: 8.5px; font-weight: 800; padding: 1.5px 6px; line-height: 1.5;
}
/* Mobil: hamburger tam ekran katman, 4 grup başlığı korunur */
@media (max-width: 979px) {
  .nav-burger { display: inline-block; margin-left: auto; }
  .topbar .who { margin-left: 0; max-width: 32vw; }
  .sidenav.acik { display: block; position: fixed; inset: 43px 0 0 0; z-index: 45; width: auto; overflow-y: auto; border-right: 0; }
  .sidenav button { font-size: 14px; padding: 12px 10px; }
  .sbg { font-size: 9.5px; }
  .nav-perde { position: fixed; inset: 43px 0 0 0; background: rgba(38,35,29,.4); z-index: 39; }
}

.icerik { flex: 1; min-width: 0; }
.crumbbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--kart); border-bottom: 1px solid var(--cizgi);
}
.crumb { font-size: 10.5px; color: var(--metin-soluk); font-weight: 600; }
.crumb b { color: var(--metin); font-weight: 800; }
#crumb-ek { margin-left: auto; }
.main { padding: 16px 18px 26px; background: var(--zemin); min-height: calc(100vh - 86px); }
@media (max-width: 620px) { .main { padding: 14px 12px 22px; } }

/* ================= Sayfa başlığı ================= */
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h2 { font-family: var(--font-marka); font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.page-head p, .phd {
  /* min-width:100% — max-width kullanılırsa esnek taban küçülür ve açıklama
     başlığın yanına düşer; bu yüzden okuma genişliği padding ile sınırlanır. */
  flex: 0 0 100%; min-width: 100%; font-size: 11.5px; color: var(--metin-soluk);
  margin: 2px 0 14px; line-height: 1.55;
}
@media (min-width: 1100px) { .page-head p, .phd { padding-right: 22%; } }
.lbl { font-size: 9px; font-weight: 800; letter-spacing: 1.1px; color: var(--metin-silik); text-transform: uppercase; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar input, .toolbar select {
  font: inherit; font-size: 12px; color: var(--metin); background: var(--kart);
  border: 1px solid var(--kenar); border-radius: var(--r-md); padding: 8px 11px; outline: none;
}
.toolbar input:focus, .toolbar select:focus { border-color: var(--murekkep); }
.toolbar input[type="search"], .toolbar input.ara { flex: 1; min-width: 180px; max-width: 300px; }
.toolbar .sag { margin-left: auto; }

/* Toplu onay çubuğu (28.08.2026) — liste ile başlık arasında durur; seçim
   sayısı ve "neden seçemiyorum" notu tek satırda okunur. */
.toplu-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--kart); border: 1px solid var(--kenar-hafif);
  border-radius: var(--r-lg); padding: 9px 14px; margin-bottom: 10px;
}
.toplu-bar .toplu-tum {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.toplu-bar .toplu-tum input:disabled { cursor: not-allowed; }
.toplu-bar .toplu-tum:has(input:disabled) { color: var(--metin-silik); cursor: not-allowed; }
.toplu-bar button { margin-left: auto; }
.tbl-wrap input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--murekkep); }

/* ================= Kartlar / paneller ================= */
.cards { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(5, 1fr); } }
.scard { background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: 14px; padding: 12px 14px; }
.scard b { display: block; font-family: var(--font-marka); font-size: 21px; font-weight: 700; }
.scard span { display: block; font-size: 9.5px; color: var(--metin-soluk); font-weight: 600; margin-top: 2px; }
.scard .delta { color: var(--adacayi); font-weight: 700; }
.scard .para, .scard b.para { color: var(--adacayi); text-align: left; }
/* Bekleyen iş kartı — sarı tint kenarlık, tıklanınca ilgili kuyruğa gider */
.qcards { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 700px) { .qcards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .qcards { grid-template-columns: repeat(6, 1fr); } }
.qcard {
  background: var(--kart); border: 1px solid var(--amber-tint-kenar); border-radius: var(--r-lg);
  padding: 10px 12px; text-align: left; width: 100%;
}
.qcard:hover { background: var(--satir-vurgu); }
.qcard b { display: block; font-family: var(--font-marka); font-size: 19px; font-weight: 700; }
.qcard span { display: block; font-size: 9.5px; color: var(--metin-soluk); font-weight: 700; margin-top: 1px; }
.qcard.bos { border-color: var(--kenar-hafif); }
.qcard.bos b { color: var(--metin-silik); }

.panel { background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: var(--r-xl); padding: 14px 16px; margin-bottom: 12px; }
.panel h3 { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--metin-silik); text-transform: uppercase; margin-bottom: 8px; }
.panel .sub { font-size: 11.5px; color: var(--metin-soluk); }
.panel.tehlike { border-color: var(--hata-kenar); }
.panel.tehlike h3 { color: var(--hata-metin); }
.grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2.gen { grid-template-columns: 1fr; }
@media (min-width: 980px) { .grid-2.gen { grid-template-columns: 1.3fr 1fr; } }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row label { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
input[type="checkbox"] { accent-color: var(--murekkep); }
.actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* Kart satırı (şikayet, destek, yorum, moderasyon, iade) */
.mrow { background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: 13px; padding: 11px 14px; margin-bottom: 8px; }
.mrow.vurgu { background: var(--satir-vurgu); border-color: var(--amber-tint-kenar); }
.mrow .ust { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mrow .alt { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mrow .no { font-family: var(--font-marka); font-weight: 700; font-size: 12px; }
.mrow .baslik { font-size: 12.5px; font-weight: 800; }
.mrow .meta { font-size: 10.5px; color: var(--metin-silik); }
.mrow .sla { font-size: 10.5px; color: var(--kisit-metin); font-weight: 700; }
.mrow .sag { margin-left: auto; }
.alinti { background: var(--zemin); border: 1px solid #EDE8DB; border-radius: var(--r-md); padding: 9px 11px; font-size: 11.5px; color: var(--metin-2); line-height: 1.55; margin-top: 8px; }

/* ================= Tablolar ================= */
.tbl-wrap { background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: var(--r-xl); padding: 0 14px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { font-size: 8.5px; font-weight: 800; letter-spacing: .9px; color: var(--metin-silik); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cizgi); text-transform: uppercase; white-space: nowrap; }
td { padding: 10px 10px; border-bottom: 1px solid var(--cizgi-2); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.vurgu td { background: var(--satir-vurgu); }
td .name, td .tdm { font-weight: 700; }
button.name-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--metin); text-align: left; text-decoration: underline; text-decoration-color: var(--cizgi); text-underline-offset: 3px; }
button.name-link:hover { text-decoration-color: var(--amber); }
td .sub { display: block; font-size: 9.5px; color: var(--metin-silik); font-weight: 500; margin-top: 2px; }
td .actions { justify-content: flex-end; white-space: nowrap; }
/* Para her zaman yeşil ve sağda; sayısal vurgular Space Grotesk */
.para, td.para { color: var(--adacayi); font-weight: 700; text-align: right; font-family: var(--font-marka); }
.num { font-family: var(--font-marka); }
.artar { color: var(--adacayi); font-weight: 700; }
.azaltir { color: var(--hata-metin); font-weight: 700; }

/* Maskeli kişisel veri — varsayılan gizli + "göster" (gösterme denetim loguna yazılır) */
.msk { font-family: var(--font-marka); letter-spacing: .8px; }
.msk button { background: none; border: 0; padding: 0 0 0 5px; font: inherit; font-size: 9.5px; font-weight: 700; color: var(--link); text-decoration: underline; }
/* SEC-020 — sunucuda maskelenip gelen alan (panelde hiç açılmaz): kilitli eylem soluk */
.msk.kapali { color: var(--metin-soluk); cursor: help; }

/* Boş durum — ikon + tek cümle + "ne zaman dolar" notu (20 bölümde aynı kalıp) */
.empty { border: 1.5px dashed #D8D2C4; border-radius: 14px; padding: 22px; text-align: center; background: rgba(255,255,255,.5); }
.empty .ic { font-size: 20px; }
.empty b { display: block; font-size: 12px; font-weight: 800; margin-top: 4px; }
.empty span { display: block; font-size: 11px; color: var(--metin-silik); margin-top: 2px; }
.module-missing { background: var(--kisit-tint); border: 1px solid var(--kisit-kenar); border-radius: var(--r-lg); padding: 14px 16px; font-size: 12px; color: var(--kisit-metin); }
.module-missing b { display: block; font-weight: 800; margin-bottom: 3px; }

/* Yükleniyor — marka amblemi rotayı gidiş-dönüş yürür (Logo Animasyonu belgesi).
   Hareket eden tek eleman varış durağıdır: durak arası yolculuk 0.55 s, durakta
   bekleme 0.40 s, tur 3.6 s. Tam ekran/panel 26 px, buton ve satır içi 15 px.
   Amblem satır içi SVG'dir: <img> içindeki SVG animasyonu her tarayıcıda
   oynatılmıyor. Aynı animasyonun tek dosyalık sürümü
   assets/brand/amblem-anim-loading*.svg olarak durur. */
.es-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px 16px;
}
.es-loading svg { display: block; height: 26px; width: auto; }
.es-loading span { font-size: 12px; font-weight: 600; color: var(--metin-silik); }
.es-loading .hap { fill: var(--murekkep); }
.es-loading .kalkis { fill: var(--zemin); }
.es-loading .durak { fill: var(--amber); }
/* Koyu zemin — amber hap, mürekkep duraklar */
.es-loading.koyu .hap { fill: var(--amber); }
.es-loading.koyu .kalkis { fill: rgba(38, 35, 29, .55); }
.es-loading.koyu .durak { fill: var(--murekkep); }
.es-loading .varis {
  transform-box: fill-box; transform-origin: center;
  animation: esRide 3.6s cubic-bezier(.45, 0, .15, 1) infinite;
}
@keyframes esRide {
  0%, 9.7%   { transform: translateX(0) }
  25%, 34.7% { transform: translateX(-16.25px) }
  50%, 59.7% { transform: translateX(-30.75px) }
  75%, 84.7% { transform: translateX(-16.25px) }
  100%       { transform: translateX(0) }
}
@media (prefers-reduced-motion: reduce) { .es-loading .varis { animation: none } }
/* Buton ve satır içi */
.es-loading.satir { flex-direction: row; gap: 9px; padding: 0; }
.es-loading.satir svg { height: 15px; }
.es-loading.satir span { font: inherit; color: inherit; }

/* ===== PNL-029 — içerik biçimli iskelet =====
   Yükleme sırasında gelecek düzenin ölçüsü ekranda durur: başlık + çip, sekme
   şeridi, satır kartları. Renkler yalnız kum tonundadır (parıltı dikkat
   çalmaz); hareketi kısıtlayan kullanıcıda parıltı durur, iskelet kalır. */
.sk { display: block; }
.sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sk-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.sk-tabs span { width: 74px; height: 24px; border-radius: 999px; background: var(--kum); }
.sk-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: var(--r-lg);
  padding: 14px 14px; margin-bottom: 8px;
}
.sk-bar { height: 12px; border-radius: 6px; background: var(--kum); flex: 0 0 auto; }
.sk-bar.baslik { width: 190px; height: 19px; }
.sk-bar.ince { height: 9px; opacity: .72; }
.sk-chip { width: 78px; height: 22px; border-radius: 999px; background: var(--kum); margin-left: auto; }
.sk-not { margin-top: 14px; justify-content: center; color: var(--metin-silik); font-size: 12px; }
.sk-bar, .sk-chip, .sk-tabs span {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  background-size: 220px 100%; background-repeat: no-repeat;
  animation: skParilti 1.25s ease-in-out infinite;
}
@keyframes skParilti {
  0%   { background-position: -220px 0 }
  100% { background-position: calc(100% + 220px) 0 }
}
@media (prefers-reduced-motion: reduce) {
  .sk-bar, .sk-chip, .sk-tabs span { animation: none; background-image: none }
}
@media (max-width: 720px) { .sk-bar.baslik { width: 55%; } .sk-chip { margin-left: 0; } }

/* Boş araç takvimi grupları */
.map-groups { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 700px) { .map-groups { grid-template-columns: repeat(3, 1fr); } }
.map-group { background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: 14px; padding: 12px 14px; }
.map-group .pin { font-size: 15px; }
.map-group b { display: block; font-size: 12.5px; font-weight: 800; }
.map-group .cnt { font-family: var(--font-marka); font-size: 19px; font-weight: 700; }
.map-group .provs { font-size: 10.5px; color: var(--metin-silik); margin-top: 3px; }

/* ================= Modal ================= */
.modal-back { position: fixed; inset: 0; background: rgba(38,35,29,.4); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; }
.modal-back.open { display: flex; }
.modal { width: 100%; max-width: 380px; background: var(--kart); border-radius: var(--r-xl); box-shadow: var(--shadow-float); padding: 18px; }
.modal h3 { font-family: var(--font-marka); font-size: 15px; font-weight: 700; }
.modal p { font-size: 11.5px; color: var(--metin-3); line-height: 1.55; margin: 5px 0 10px; }
.modal textarea, .modal input[type="text"] {
  width: 100%; font: inherit; font-size: 12.5px; color: var(--metin); background: var(--kart);
  border: 1px solid var(--kenar); border-radius: var(--r-md); padding: 9px 11px; outline: none; min-height: 44px; resize: vertical;
}
.modal input[type="text"] { min-height: 0; }
.modal textarea:focus, .modal input:focus { border-color: var(--murekkep); }
.modal .hazir { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.modal .hazir button { background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: var(--r-round); padding: 4px 10px; font: inherit; font-size: 10px; font-weight: 700; color: var(--metin-3); }
.modal .hazir button:hover { background: var(--zemin); }
.modal .row { justify-content: flex-end; margin-top: 12px; }
/* Yıkıcı kip — kırmızı üst şerit + yazarak onay */
.modal-back.yikici .modal { border-top: 4px solid var(--hata); }
.modal-back.yikici h3 { color: var(--hata-metin); }
.modal-back.yikici input { border-color: var(--hata-kenar); font-weight: 700; letter-spacing: 1px; }

/* ================= Toast — ikonlu, iki kip, eylemli ================= */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(80px);
  background: var(--murekkep); color: var(--zemin); border-radius: var(--r-lg);
  padding: 10px 16px; font-size: 12.5px; font-weight: 600; opacity: 0; transition: .25s;
  z-index: 110; max-width: 92vw; display: flex; align-items: center; gap: 8px;
}
#toast::before { content: '\2713'; color: #7FB78E; font-weight: 800; }
#toast.error::before { content: '!'; color: #E08A7E; }
#toast.show { transform: translateX(-50%); opacity: 1; }
#toast button { background: none; border: 0; color: #B9B3A4; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; padding: 0 0 0 6px; }

/* ================= Görsel / lightbox ================= */
button.img-btn { display: inline-block; padding: 0; line-height: 0; border: 1px solid var(--kenar); border-radius: var(--r-md); overflow: hidden; background: none; cursor: zoom-in; }
button.img-btn img { display: block; object-fit: cover; }
.lightbox { position: fixed; inset: 0; background: rgba(38,35,29,.85); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 120; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-lg); }
.lightbox .close { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(247,244,236,.92); color: var(--murekkep); font-size: 22px; line-height: 1; }
.doc-link { font-size: 11px; font-weight: 700; }

/* ================= Bölüme özel ================= */
.announce-preview { background: var(--murekkep); border-radius: 14px; padding: 12px; color: var(--zemin); }
.announce-preview b { display: block; font-size: 11px; font-weight: 800; }
.announce-preview span { display: block; font-size: 10px; color: #B9B3A4; line-height: 1.5; margin-top: 2px; }
.announce-preview.placeholder span { color: #8B8574; }
/* Güven skoru — bileşen çubukları */
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--kum); overflow: hidden; }
.bar i { display: block; height: 6px; border-radius: 3px; background: var(--adacayi); }
/* Reklam önizleme */
.ad-preview { background: var(--zemin); border: 1px solid var(--amber-tint-kenar); border-radius: var(--r-lg); padding: 10px; }
.ad-preview .chip { display: inline-flex; }
.ad-preview b { display: block; font-size: 11px; font-weight: 800; margin-top: 4px; }
.ad-preview span { display: block; font-size: 9.5px; color: var(--metin-soluk); }

/* ================= Mobil: tablo → kart ================= */
/* W4-24 — tablo satırı KARTA düşer: ad üstte, meta tek satırda, tek eylem tam genişlik.
   Yatay kaydırma tamamen kalkar; dokunma hedefleri ≥44px. */
@media (max-width: 720px) {
  .tbl-wrap { border: 0; padding: 0; background: none; overflow: visible; }
  .tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display: block; width: 100%; }
  .tbl-wrap thead { display: none; }
  .tbl-wrap tr {
    background: var(--kart); border: 1px solid var(--kenar-hafif); border-radius: var(--r-lg);
    padding: 11px 12px; margin-bottom: 8px;
  }
  .tbl-wrap tr.vurgu { background: var(--satir-vurgu); border-color: var(--amber-tint-kenar); }
  .tbl-wrap td { border: 0; padding: 2px 0; }
  .tbl-wrap td:empty { display: none; }
  /* Ara sütunlar (rol, sayım, güven, durum) tek satırda toplanır */
  .tbl-wrap td:not(:first-child):not(:last-child) {
    display: inline-block; width: auto; margin: 2px 8px 2px 0; vertical-align: middle;
    font-size: 11.5px; color: var(--metin-3);
  }
  .tbl-wrap td:last-child:not(:first-child) { margin-top: 8px; }
  /* Kart kipinde SÜTUN BAŞLIĞI yok: boş bir hücrenin "—" yer tutucusu neyin boş
     olduğunu söylemediği için satırın ortasında anlamsız tireler kalıyordu
     ("Test Kullanıcı — — 17.08.2026"). Masaüstü tablosunda yer tutucu KALIR.
     Bu iki kural ara-sütun kuralından SONRA gelmek zorundadır: `:not(:first-child)
     :not(:last-child)` üç sınıf değerinde bir seçicidir ve daha önce yazılsalar
     display:inline-block onları ezerdi. */
  .tbl-wrap td:has(> .mic.bos:only-child) { display: none; }
  /* Aynı kural ÇIPLAK "—" için: JS her render sonrası yer tutucu hücreleri
     .bos-hucre ile işaretler (bkz. admin.js isaretleBosHucreler). */
  .tbl-wrap td.bos-hucre,
  .tbl-wrap td.bos-hucre:not(:first-child):not(:last-child) { display: none; }
  .tbl-wrap td .actions { justify-content: flex-start; }
  .tbl-wrap td .actions .btn { flex: 1; min-height: 42px; }
  .tbl-wrap td .actions .ovf { flex: 0 0 42px; width: 42px; min-width: 42px; max-width: 42px; height: 42px; }
  .para, td.para { text-align: left; }
  .page-head h2 { font-size: 17px; }
  .mrow .sag { margin-left: 0; }
  .topbar .who { max-width: 28vw; }
}
@media (max-width: 460px) { .topbar .who { display: none; } }