/* Panel tek ekrana sigar: sayfa kaymaz, tablo kalan yuksekligi doldurur ve satir sayisi ona gore secilir. */
:root {
  --bg: #0b0d12;
  --surface: #11141b;
  --surface-2: #171b24;
  --border: #222734;
  --border-soft: #1a1e28;
  --text: #e7e9ee;
  --muted: #8b92a5;
  --faint: #5d6477;
  --accent: #e2b354;
  --ok: #3fcf8e;
  --warn: #f0b429;
  --danger: #f2555a;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
svg { width: 16px; height: 16px; flex: none; }

/* Marka */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0c66b, #b9832b);
  color: #17130a; font-weight: 800;
}
.brand-name { font-weight: 650; letter-spacing: .2px; }
.brand-sub { color: var(--muted); font-size: 11px; }

/* Dugmeler ve alanlar */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.button:hover:not(:disabled) { background: #1c212c; border-color: #2f3646; }
.button:disabled { opacity: .45; cursor: default; }
.button.primary { height: 38px; background: var(--accent); border-color: var(--accent); color: #17130a; font-weight: 600; }
.button.primary:hover:not(:disabled) { background: #ecc26a; border-color: #ecc26a; }
.button.ghost { justify-content: flex-start; background: transparent; border-color: transparent; color: var(--muted); }
.button.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--text); }
.button.icon { width: 34px; padding: 0; }
.button.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.input {
  height: 36px; padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
  outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--accent); }

/* Giris */
.login {
  height: 100%;
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(600px 400px at 50% 30%, rgb(226 179 84 / .07), transparent);
}
.login-card {
  width: min(340px, 100%);
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
.field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.form-error { margin-top: -6px; color: var(--danger); font-size: 12px; }
.form-error:empty { display: none; }
.form-ok { margin-top: -6px; color: var(--ok); font-size: 12px; }
.form-ok:empty { display: none; }
.input.code { font-family: var(--mono); letter-spacing: 3px; }
.input.code::placeholder { font-family: inherit; letter-spacing: normal; }

/* Iskelet */
.shell { height: 100%; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sidebar {
  display: flex; flex-direction: column; gap: 24px;
  padding: 18px 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar .brand { padding: 0 6px; }
.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px;
  border-radius: 8px;
  color: var(--muted); text-decoration: none;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav-icon { display: flex; }

/* Giris yapan yonetici: ad ve rol, cikis dugmesinin ustunde */
.whoami {
  display: flex; align-items: baseline; gap: 6px;
  padding: 0 14px; margin-bottom: -16px;
  color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden;
}
.who-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.who-sep { color: var(--faint); }

.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 24px;
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 16px; font-weight: 600; }
.actions { display: flex; align-items: center; gap: 8px; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }

/* Sayaclar */
.stats { flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-label { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { margin-top: 6px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.warn .stat-value:not(.zero) { color: var(--warn); }
.stat.danger .stat-value:not(.zero) { color: var(--danger); }

/* Tablo karti */
.card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.table-wrap { flex: 1; min-height: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; transition: opacity .15s; }
table.loading { opacity: .55; }
th {
  height: 40px; padding: 0 14px;
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
td {
  height: 50px; padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
tbody tr.row:hover td { background: rgb(255 255 255 / .02); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-main, .cell-sub { overflow: hidden; text-overflow: ellipsis; }
.cell-sub { margin-top: 1px; color: var(--muted); font-size: 11.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--faint); }
tr.empty td { height: 140px; text-align: center; color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 500;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: rgb(63 207 142 / .1); color: var(--ok); }
.pill.warn { background: rgb(240 180 41 / .1); color: var(--warn); }
.pill.danger { background: rgb(242 85 90 / .1); color: var(--danger); }

.pager {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 50px; padding: 0 10px 0 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.pager-nav { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.pager .error { color: var(--danger); }

/* Form ekranlari (Hesabim gibi) */
.panels { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; overflow: auto; }
.panel-form {
  width: min(380px, 100%);
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.panel-title { font-size: 14px; font-weight: 600; }
.panel-hint { margin-top: -8px; color: var(--muted); font-size: 12px; }
.profile-row { display: flex; justify-content: space-between; gap: 12px; }

/* Arama ve durum */
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 10px; color: var(--faint); pointer-events: none; }
.search .input { width: 280px; height: 34px; padding-left: 32px; }
.updated { margin-right: 6px; color: var(--faint); font-size: 12px; white-space: nowrap; }

@media (max-height: 760px) {
  .view { gap: 12px; padding: 16px 20px 20px; }
  .stat { padding: 10px 14px; }
  .stat-value { margin-top: 2px; font-size: 18px; }
}
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 60px minmax(0, 1fr); }
  .brand-text, .nav .label, .sidebar .label, .whoami { display: none; }
  .search .input { width: 180px; }
  .updated { display: none; }
}

/* Ortak pencereler, bildirimler, kopyalama alani (js/ui/). Yoneticiler ve Islem kaydi ekranlari. */
select, textarea { font: inherit; color: inherit; }
select.input { padding-right: 8px; cursor: pointer; }
.input.compact { height: 30px; padding: 0 8px; }
.input.textarea { height: auto; padding: 8px 12px; resize: vertical; }
.button.small { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.button.small svg { width: 14px; height: 14px; }
.button.small.ok { color: var(--ok); }
.button.compact { height: 34px; }
.button.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.button.danger:hover:not(:disabled) { background: #f46b70; border-color: #f46b70; }
.button.danger-text { color: var(--danger); }
.link {
  max-width: 100%;
  padding: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link:hover { color: var(--accent); text-decoration: underline; }

.modal {
  width: min(460px, calc(100vw - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0;
  border: 0; background: transparent; color: var(--text);
}
.modal.wide { width: min(720px, calc(100vw - 32px)); }
.modal::backdrop { background: rgb(5 6 9 / .7); backdrop-filter: blur(2px); }
.modal-card {
  display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 48px); overflow: auto;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 70px rgb(0 0 0 / .5);
}
.modal-title { font-size: 15px; font-weight: 600; }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head .modal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-title:focus { outline: none; }
.modal-close.button.ghost { justify-content: center; }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.modal-text { color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions .button.primary, .modal-actions .button.danger { height: 34px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.field-hint { color: var(--faint); font-size: 11.5px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12.5px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.callout { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--border); }
.callout.warn { background: rgb(240 180 41 / .08); border-left-color: var(--warn); }
.callout strong { color: var(--warn); }

.copy-field { display: flex; flex-direction: column; gap: 6px; }
.copy-label { color: var(--muted); font-size: 12px; }
.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row .input { flex: 1; min-width: 0; }
.copy-row.multiline { align-items: flex-start; }
textarea.copy-value { height: auto; padding: 8px 12px; resize: none; word-break: break-all; line-height: 1.4; }
.copy-row .button.small { height: 36px; flex: none; }
.totp-setup { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 18px; align-items: start; }
.totp-fields { display: flex; flex-direction: column; gap: 12px; }
.qr-box { width: 184px; padding: 0; border-radius: 8px; overflow: hidden; background: #fff; }
.qr-box svg.qr { display: block; width: 184px; height: 184px; }

/* Ust cubugun altinda: alttaki sayfalama dugmelerinin ustune binmesin. */
.toasts { position: fixed; top: 72px; right: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.toast {
  max-width: 380px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .4);
}
.toast.ok { border-left-color: var(--ok); }
.toast.error { border-left-color: var(--danger); }

/* Suzgec satiri (Islem kaydi) */
.filters { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters select.input { width: 220px; height: 34px; }
.filters .search .input { width: 300px; }

/* Yoneticiler tablosu: az satir, gerekirse kayar */
.table-wrap.scroll { overflow: auto; }
td select.input.compact { width: 100%; max-width: 150px; }
tr.dimmed td { color: var(--muted); }
tr.empty.error td { color: var(--danger); }
.row-actions { display: flex; gap: 6px; }
.tag {
  margin-left: 8px; padding: 1px 7px;
  border-radius: 999px;
  background: rgb(226 179 84 / .14); color: var(--accent);
  font: 500 10.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

@media (max-width: 900px) {
  .filters select.input { width: 160px; }
  .filters .search .input { width: 180px; }
  .totp-setup { grid-template-columns: minmax(0, 1fr); }
}

/* ==== Genel bakis (views/overview.js) ==== */
/* Bu ekran sayfaya sigmayabilir (grafik + tablolar); yalniz kendi alani kayar, iskelet yerinde kalir. */
.overview {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; gap: 16px;
}
.ov-card {
  min-width: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ov-hero { grid-column: span 5; }
.ov-accounts { grid-column: span 7; }
.ov-chart { grid-column: span 12; }
.ov-cores { grid-column: span 7; align-self: start; }
.ov-side { grid-column: span 5; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ov-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-height: 28px; }
.ov-card-title { flex: 1; font-size: 13px; font-weight: 600; }
.ov-card-sub { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ov-label { color: var(--muted); font-size: 12px; }
.ov-hint { margin: -4px 0 12px; }
.ov-error { margin-top: 10px; color: var(--danger); font-size: 12px; }
.ov-error:empty { display: none; }
.updated.error { color: var(--danger); }

/* Cevrimici sayisi ve krallik dagilimi. Krallik renkleri koyu yuzeyde renk korlugu denetiminden gecti;
   her rengin yaninda ad da yazar (yalniz renge dayanilmaz). */
.ov-hero-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ov-hero-value { font-size: 40px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-hero-value.muted { color: var(--faint); }
.ov-hero-sub { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.ov-empires { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.empire-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.empire-bar.empty .empire-seg { display: none; }
.empire-seg { height: 100%; transition: width .3s; }
.empire-seg:first-child { border-radius: 4px 0 0 4px; }
.empire-seg:last-child { border-radius: 0 4px 4px 0; }
.shinsoo { background: #c2403c; }
.chunjo { background: #b98a28; }
.jinno { background: #4c8fe6; }
.empire-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.empire-item { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.empire-key { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.empire-name { color: var(--muted); }
.empire-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.empire-share { color: var(--faint); font-variant-numeric: tabular-nums; }

/* Hesap sayaclari */
.ov-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-stat { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
.ov-stat.danger .stat-value:not(.zero) { color: var(--danger); }

/* Zaman araligi secici */
.segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.segmented button {
  height: 26px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--muted); font-size: 12px; cursor: pointer;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }

/* Cevrimici grafigi (SVG, kutuphane yok) */
.chart { position: relative; min-height: 240px; transition: opacity .15s; }
.chart.loading { opacity: .55; }
.chart .chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg:focus { outline: none; }
.chart-svg:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.chart-grid line { stroke: var(--border-soft); stroke-width: 1; }
.chart-grid line.chart-base { stroke: var(--border); }
.chart-grid text { fill: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: rgb(226 179 84 / .12); stroke: none; }
.chart-dot { fill: var(--accent); }
.chart-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.chart-cursor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart-cursor-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.chart-empty { height: 240px; display: grid; place-items: center; color: var(--muted); }
.chart-empty.error { color: var(--danger); }
.chart-tip {
  position: absolute; z-index: 1; pointer-events: none;
  min-width: 140px; padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
  font-size: 12px; white-space: nowrap;
}
.chart-tip-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip-time { color: var(--muted); }
.chart-tip-cores { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); }
.chart-tip-cores div { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.chart-tip-cores span:first-child { font-family: var(--mono); font-size: 11.5px; }

/* Cekirdek tablosu ve servis sagligi */
.ov-table table td, .ov-table table th { height: 40px; }
.ov-table tr.empty td { height: 80px; }
.health-list { display: flex; flex-direction: column; }
.health-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.health-row:last-child { border-bottom: 0; }
.health-text { flex: 1; min-width: 0; }
.health-text .cell-sub { white-space: nowrap; }
.health-latency { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Duyuru: once onay, sonra gonderim (iki tiklama) */
.notice-form { display: flex; flex-direction: column; gap: 10px; }
.notice-input { position: relative; display: flex; }
.notice-input .input { flex: 1; min-width: 0; padding-right: 64px; }
.notice-counter {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.notice-counter.over { color: var(--danger); font-weight: 600; }
.notice-actions { display: flex; gap: 8px; }
.notice-form .form-error, .notice-form .form-ok { margin-top: 0; }
.notice-form .button.primary.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

@media (max-width: 1100px) {
  .ov-hero, .ov-accounts, .ov-cores, .ov-side { grid-column: span 12; }
}
@media (max-height: 760px) {
  .overview { gap: 12px; }
  .ov-hero-value { font-size: 32px; }
}
/* ==== Genel bakis sonu ==== */

/* ==== Hesap detayi ve moderasyon (views/accountDetail.js, ui/banDialog.js) ==== */
/* Hesap listesinde satir detay penceresini acar. */
tbody tr.link-row { cursor: pointer; }
tbody tr.link-row:focus { outline: none; }
tbody tr.link-row:focus-visible td { background: rgb(226 179 84 / .06); }
tbody tr.link-row:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* Detay penceresi: sagdan acilan genis cekmece. Liste arkada yerinde kalir (sol kenarda gorunur), dar
   ekranda tam genislik. Baslik ve dugmeler sabit, yalniz govde kayar. */
.modal.drawer {
  width: min(1180px, calc(100vw - 72px)); height: 100%;
  margin: 0 0 0 auto;
}
.modal.drawer[open] { animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }
.modal.drawer .modal-card {
  height: 100%; max-height: none;
  gap: 0; padding: 0;
  border-width: 0 0 0 1px; border-radius: 0;
}
.modal.drawer .modal-head {
  flex: none; flex-wrap: wrap;
  min-height: 60px; padding: 12px 14px 12px 22px;
  border-bottom: 1px solid var(--border);
}
.modal.drawer .modal-title { font-size: 16px; }
/* Kartlarin kolon sayisi pencerenin genisligine gore (container sorgusu), ekranin degil. */
.modal.drawer .modal-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 24px; container-type: inline-size; }
@media (max-width: 700px) {
  .modal.drawer { width: 100vw; }
  .modal.drawer .modal-card { border-left-width: 0; }
  .modal.drawer .modal-head { padding: 10px 10px 10px 16px; row-gap: 8px; }
  /* Baslik ve X ilk satirda, islem dugmeleri altta. */
  .modal.drawer .modal-head > .actions { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .modal.drawer .modal-head > .actions .actions { flex-wrap: wrap; }
  .modal.drawer .modal-body { padding: 14px 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.drawer[open] { animation: none; }
}

.ad { display: flex; flex-direction: column; gap: 16px; }
.ad-loading, .ad-error { color: var(--muted); }
.ad-error { color: var(--danger); }
.ad-head {
  flex: none;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ad-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ad-mysql { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.ad-head .facts { grid-template-columns: repeat(4, max-content minmax(0, 1fr)); }

.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ad-card {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ad-card.wide { grid-column: 1 / -1; }
.ad-card-head { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.ad-card-title { flex: 1; font-size: 13px; font-weight: 600; }
.ad-none { color: var(--muted); }
.ad-reason { white-space: pre-wrap; word-break: break-word; }
.ad-empire { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.ad-mismatch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.danger-text { color: var(--danger); }

/* Etiket - deger listesi */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.facts dt { color: var(--muted); font-size: 12px; white-space: nowrap; }
.facts dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Kart icindeki kucuk tablolar */
.ad-table { overflow-x: auto; margin: 0 -6px; }
.ad-table table { table-layout: auto; }
.ad-table th { height: 32px; padding: 0 8px; }
.ad-table td { height: 40px; padding: 0 8px; }
.ad-table tr.empty td { height: 64px; }
.ad-table table.audit-table { table-layout: fixed; }

/* Yasak penceresi */
.choices { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
.choices legend { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.choice {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg);
  cursor: pointer; font-size: 12.5px;
}
.choice input { accent-color: var(--danger); }
.choice:has(input:checked) { border-color: var(--danger); background: rgb(242 85 90 / .08); }
.ban-custom .input { width: 100%; }
.ban-summary { color: var(--text); font-variant-numeric: tabular-nums; }
.ban-summary.error { color: var(--danger); }

/* Islem adimlarinin sonucu */
.steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; align-items: flex-start; gap: 10px; }
.step-mark { width: 18px; flex: none; text-align: center; font-weight: 700; }
.step.ok .step-mark { color: var(--ok); }
.step.fail .step-mark { color: var(--warn); }
.step.skip { color: var(--muted); }

/* Oturumlar tablosu yarim kartta ~520 piksel ister; daha darda kartlar alt alta. */
@container (max-width: 1060px) {
  .ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-head .facts { grid-template-columns: repeat(2, max-content minmax(0, 1fr)); }
}
@container (max-width: 520px) {
  .ad-head .facts { grid-template-columns: max-content minmax(0, 1fr); }
}
/* ==== Hesap detayi sonu ==== */