/* 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; }
/* GM yetkisi secimi: "Yuksek GM (HIGH_WIZARD)" kesilmesin. */
td select.input.compact.ga-authority { max-width: 230px; }
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 ==== */

/* ==== Bakim ve Ayarlar (views/maintenance.js, views/settings.js) ==== */
/* Durum karti ustte tam genislik; altinda plan formu (sol) ile onizleme ve izin listesi (sag). Dar ekranda
   tek kolon, durum en ustte. Ekran sayfaya sigmayabilir; yalniz kendi alani kayar. */
.mt {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "status status" "main side";
  align-content: start; gap: 16px;
}
.mt-main, .mt-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mt-main { grid-area: main; }
.mt-side { grid-area: side; }
.mt-card {
  min-width: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.mt-subtitle { font-size: 12.5px; font-weight: 600; }
.mt-rel { margin-left: 8px; color: var(--faint); font-size: 12px; }
.mt-warn { color: var(--warn); font-size: 12px; }
.mt-warn:empty { display: none; }
.mt-inline-link { color: var(--accent); text-decoration: none; }
.mt-inline-link:hover { text-decoration: underline; }
button.mt-inline-link { display: inline; color: var(--accent); }

/* Durum: sol tarafta durum, geri sayim ve dugmeler; sagda tarih ve ayrintilar. Suren bakim kirmizi kenarli. */
.mt-status {
  grid-area: status;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 14px 32px; align-items: start;
  border-left: 3px solid var(--border);
}
.mt-status.active { border-left-color: var(--danger); background: linear-gradient(90deg, rgb(242 85 90 / .07), var(--surface) 60%); }
.mt-status.scheduled { border-left-color: var(--warn); }
.mt-status .ov-error { grid-column: 1 / -1; margin-top: 0; }
.mt-status-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mt-status-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mt-headline { font-size: 18px; font-weight: 650; }
.mt-countdown { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mt-countdown-label { color: var(--muted); }
.mt-countdown-value { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mt-status.active .mt-countdown-value { color: var(--danger); }
.mt-note { color: var(--muted); max-width: 640px; }
.mt-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mt-status-actions .button.danger { height: 34px; }
.mt-facts dd { display: flex; align-items: baseline; flex-wrap: wrap; overflow: visible; }

/* Plan formu */
.mt-form { display: flex; flex-direction: column; gap: 16px; }
.mt-form > .ov-card-head { margin-bottom: 0; }
.mt-fieldset { min-width: 0; border: 0; display: flex; flex-direction: column; gap: 16px; }
.mt-fieldset:disabled .input { opacity: .7; }
.mt-switch { align-items: flex-start; }
.mt-switch input { margin-top: 2px; }
.mt-switch > span { display: flex; flex-direction: column; gap: 2px; }
.mt-switch-hint { color: var(--muted); font-size: 12px; }
.mt-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mt-date .input { width: 100%; }
.mt-date-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.mt-date-label .button.small { height: 22px; padding: 0 6px; }
.mt-field-error { margin-top: 0; }
.mt-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.mt-block { display: flex; flex-direction: column; gap: 10px; }
.mt-callout { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12.5px; }
.mt-callout strong { color: var(--text); }
.mt-dirty { color: var(--warn); font-size: 12px; }
.mt-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.mt-form-actions .button.primary { height: 34px; }

/* Dil sekmeleri: noktali isaret o dilde mesaj oldugunu, kirmizi hata oldugunu gosterir. */
.mt-lang { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.mt-lang-head { display: flex; flex-direction: column; gap: 8px; }
.mt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: 12px; cursor: pointer;
}
.mt-tab:hover { color: var(--text); }
.mt-tab[aria-selected="true"] { color: var(--text); border-color: var(--accent); background: rgb(226 179 84 / .08); }
.mt-tab .tag { margin-left: 0; }
.mt-tab-code { font-family: var(--mono); font-weight: 600; }
.mt-tab-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--faint); }
.mt-tab.filled .mt-tab-dot { background: var(--ok); border-color: var(--ok); }
.mt-tab.error { border-color: var(--danger); }
.mt-tab.error .mt-tab-dot { background: var(--danger); border-color: var(--danger); }
.mt-tabpanel { display: flex; flex-direction: column; gap: 14px; }
.mt-tabpanel .input { width: 100%; }
.mt-tabpanel .field label { color: var(--muted); }
.mt-counter { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mt-counter.over { color: var(--danger); font-weight: 600; }

/* Onizleme: patcher bilgi satiri (patcher/index.html ile ayni renkler) ve oyundaki giris penceresi. */
.mt-preview { display: flex; flex-direction: column; gap: 10px; }
.mt-preview-notes { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.mt-preview-label { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.mt-patcher-row {
  display: flex; align-items: center; gap: 10px;
  height: 28px; padding: 0 10px;
  border-radius: 3px; background: rgb(0 0 0 / .35); border: 1px solid #3a2f1d;
  color: #e9dfc8; font-size: 12px; white-space: nowrap; overflow: hidden;
}
.mt-patcher-icon { display: flex; color: #c9a05c; }
.mt-patcher-label { min-width: 62px; flex: none; font-weight: 700; }
.mt-patcher-value { color: #a89e8a; overflow: hidden; text-overflow: ellipsis; }
.mt-login-box {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: #15110b; border: 1px solid #5a4728; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6);
  color: #e9dfc8; font-family: Tahoma, Verdana, sans-serif; font-size: 12px;
}
.mt-login-title { color: #e2b354; font-weight: 400; text-align: center; }
.mt-login-message { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.mt-login-message.muted { color: #7d7362; }
.mt-login-end { color: #a89e8a; text-align: center; }

/* Duyurulu bakim: plan formunun ustunde; cekirdek sonucu kartin altinda. */
.mt-announce { display: flex; flex-direction: column; gap: 14px; }
.mt-announce > .ov-card-head { margin-bottom: 0; }
.mt-announce .ov-hint { margin: 0; }
.mt-announce .field .input { width: 100%; }
.mt-announce .mt-note:empty { display: none; }
.mt-game { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.mt-game-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mt-game-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Etkinlikler (views/events.js): OX karti; durum ozeti ustte, adimlar (katilim, soru, odul, bitis) alt alta. */
.ev { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.ev-card { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.ev-card > .ov-card-head { margin-bottom: 0; }
.ev-card .ov-hint { margin: 0; }
.ev-number { font-variant-numeric: tabular-nums; font-weight: 600; }
.ev-steps { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.ev-step { display: flex; flex-direction: column; gap: 6px; }
.ev-step-label { color: var(--muted); font-size: 12px; }
.ev-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ev-seconds, .ev-count { width: 90px; }
.ev-picker { flex: 1; min-width: 220px; max-width: 420px; }
.ev-result { font-size: 12.5px; }
.ev-result:empty { display: none; }
.ev-result.ok { color: var(--ok); }
.ev-result.error { color: var(--danger); }

/* Izin listesi */
.mt-allow-form { display: flex; gap: 8px; margin-bottom: 10px; }
.mt-allow-form .input { flex: 1; min-width: 0; height: 34px; }
.mt-allow-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mt-allow-choices:empty { display: none; }
.mt-allow table { table-layout: fixed; }
.mt-allow td { height: 46px; }
.mt-allow th.num, .mt-allow td.num { width: 96px; }
.mt-remove-col { width: 76px; text-align: right; }
.mt-allow .cell-sub { font-size: 11px; }
.mt-allow a.link { text-decoration: none; }
.mt-allow a.link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .mt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "main" "side"; }
}
@media (max-width: 760px) {
  .mt-status { grid-template-columns: minmax(0, 1fr); }
  .mt-dates { grid-template-columns: minmax(0, 1fr); }
  .mt-headline { font-size: 16px; }
  .mt-countdown-value { font-size: 22px; }
}
@media (max-width: 520px) {
  .view:has(> .mt), .view:has(> .st) { padding: 14px 12px 16px; }
  .mt-card { padding: 14px; }
  .mt-tab-name { display: none; }
}

/* Ayarlar: kartlar alt alta, okunur genislikte. */
.st { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.st-card { width: min(720px, 100%); display: flex; flex-direction: column; gap: 12px; }
.st-card .ov-card-head { margin-bottom: 0; }
.st-card .ov-hint { margin: 0; }
.st-locales { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 8px; }
.st-locale { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.st-locale:last-child { border-bottom: 0; }
.st-locale-main { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 30px; }
.st-locale-main .tag { margin-left: 0; }
.st-locale-code {
  min-width: 34px; padding: 2px 6px;
  border-radius: 6px; background: var(--surface-2);
  text-align: center; text-transform: uppercase; font-weight: 600;
}
.st-locale-name { font-weight: 500; }
.st-locale-actions { margin-left: auto; display: flex; gap: 6px; }
.st-locale-warn { padding-left: 44px; }
.st-add { display: flex; flex-direction: column; gap: 6px; }
.st-add-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.st-add-row select.input { width: 220px; height: 34px; }
.st-code { width: 64px; height: 34px; font-family: var(--mono); text-transform: lowercase; }
.st-code-name { color: var(--muted); font-size: 12px; }
.st-code-name:empty { display: none; }
.st-add .form-error { margin-top: 0; }

/* API anahtarlari (Ayarlar) */
.st-card .ov-card-head .button { margin-left: auto; }
.st-tokens { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 8px; }
.st-tokens:empty { display: none; }
.st-token { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.st-token:last-child { border-bottom: 0; }
.st-token-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.st-token-main .tag { margin-left: 0; }
.st-token-name { font-weight: 500; }
.st-token-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.st-token.inactive .st-token-name { color: var(--muted); }

@media (max-width: 520px) {
  .st-locale-actions { margin-left: 0; width: 100%; }
  .st-locale-warn { padding-left: 0; }
  .st-add-row select.input { width: 100%; }
}
/* ==== Bakim ve Ayarlar sonu ==== */

/* ==== Icerik (views/content.js, contentEditor.js, contentPreview.js) ==== */
/* Liste: tur sekmeleri, suzgec, tablo. Tablo dar ekranda yatay kayar (sutunlar ezilmesin). */
.ct-tabs { flex: none; display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ct-tab, .ce-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); font: inherit; white-space: nowrap; cursor: pointer;
}
.ct-tab:hover, .ce-tab:hover { color: var(--text); }
.ct-tab[aria-selected="true"], .ce-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.ct-tab:focus-visible, .ce-tab:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 6px 6px 0 0; }
.ct-filters select.input { width: 170px; }
.ct-table { min-width: 860px; }
.cell-main.ct-vis.live { color: var(--ok); }
.cell-main.ct-vis.pending { color: var(--warn); }
.cell-main.ct-vis.ended { color: var(--faint); }
.ct-chips, .ct-langs { display: flex; gap: 4px; overflow: hidden; }
.ct-chip {
  padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; white-space: nowrap;
}
.ct-lang { padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--faint); font: 500 11px/1.7 var(--mono); white-space: nowrap; }
.ct-lang.complete { background: rgb(63 207 142 / .1); color: var(--ok); }
.ct-lang.partial { background: rgb(240 180 41 / .1); color: var(--warn); }
@media (max-width: 900px) {
  .ct-hide-narrow { display: none; }
  .ct-filters select.input { width: 140px; }
}

/* Duzenleyici: sagdan pencere (hesap detayi kabugu). Govde iki kolon: form ve onizleme; pencere darsa
   (container sorgusu) alt alta. */
.ce-drawer .modal-head > .actions { flex-wrap: wrap; justify-content: flex-end; }
.ce-actions { flex-wrap: wrap; }
.ce-actions .button.ok { border-color: rgb(63 207 142 / .45); color: var(--ok); font-weight: 600; }
.ce-dirty { color: var(--warn); font-size: 12px; white-space: nowrap; }
/* Duzenleyicide bildirimler altta: ustte baslik dugmelerini ve uyari seridini ortmesin. */
.ce-drawer .toasts { top: auto; bottom: 24px; }
.ce { display: flex; flex-direction: column; gap: 12px; }
.ce-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ce-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--faint); font-size: 12px; }
.ce-meta:empty { display: none; }
.ce-readonly { color: var(--warn); }
.ce-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ce-layout.with-preview { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.ce-form { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ce-section {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ce-section-title { font-size: 13px; font-weight: 600; }
.ce-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.ce-span, .ce-pair.wide { grid-column: 1 / -1; }
.ce-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ce-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-field .input { width: 100%; }
.ce-field .input:disabled { opacity: .7; cursor: default; }
.ce-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ce-label { color: var(--muted); font-size: 12px; }
.ce-required { color: var(--accent); }
.ce-counter { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-counter.over { color: var(--danger); font-weight: 600; }
.ce-error { color: var(--danger); font-size: 12px; }
.ce-error:empty { display: none; }
.ce-warn { color: var(--warn); font-size: 11.5px; overflow-wrap: anywhere; }
.ce-warn-inline { color: var(--warn); }
.ce-field.invalid > .input, .ce-field.invalid .ce-inline-row .input, .ce-field.invalid > .ce-checks,
.ce-field.invalid > .segmented, .ce-field.invalid .ce-image, .ce-field.invalid > .ce-items-wrap { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); border-radius: 8px; }
.ce-field.invalid .ce-label { color: var(--danger); }
.ce-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 36px; }
.segmented.ce-radios { align-self: flex-start; }
.ce-radios label { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
.ce-radios input { position: absolute; opacity: 0; pointer-events: none; }
.ce-radios label:has(input:checked) { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.ce-radios label:has(input:focus-visible) { outline: 1px solid var(--accent); }
.ce-radios label:has(input:disabled) { cursor: default; }
.ce-color-row, .ce-icon-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ce-color { width: 42px; height: 34px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.ce-color-code { color: var(--muted); min-width: 64px; }
.ce-swatches { display: flex; gap: 6px; }
.ce-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 5px; background: var(--swatch); cursor: pointer; }
.ce-swatch[aria-pressed="true"] { border-color: var(--text); }
.ce-swatch:disabled { cursor: default; }
.ce-icon-row .input { flex: 1; min-width: 0; }
.ce-icon-glyph { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #1a1511; color: #c9a05c; }
.ce-image { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.ce-thumb {
  width: 224px; aspect-ratio: 16 / 9; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg); border: 1px dashed var(--border); border-radius: 6px;
  font-size: 12px;
}
.ce-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ce-image-side { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.ce-image-info { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12px; }
.ce-image-info:empty { display: none; }
.ce-image-buttons { display: flex; gap: 8px; }
.ce-link { color: var(--accent); }
.ce-media-off { font-size: 12px; }
.ce-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); }
.ce-tab { height: 34px; padding: 0 12px; font-size: 12.5px; }
.ce-tab-default { padding: 0 6px; border-radius: 999px; background: rgb(226 179 84 / .14); color: var(--accent); font-size: 10.5px; font-weight: 500; }
.ce-tab-mark { font-weight: 700; color: var(--faint); }
.ce-tab-mark.complete { color: var(--ok); }
.ce-tab-mark.partial { color: var(--warn); }
.ce-tabpanel { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.ce-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
/* Pasif dil (ayarda olmayan dilin cevirisi): salt okunur, sekmelerin altinda. */
.ce-passive { margin-top: 12px; font-size: 12.5px; }
.ce-passive p { margin: 4px 0; }
.ce-passive details { margin-top: 6px; }
.ce-passive summary { cursor: pointer; }
.ce-items-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ce-items { align-self: stretch; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ce-items-empty { font-size: 12px; }
.ce-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ce-kind { height: 36px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.ce-kind.new { color: #3fb06a; }
.ce-kind.balance { color: #e0a83a; }
.ce-kind.fix { color: #3f86e0; }
.ce-inline { gap: 4px; }
.ce-inline-row { display: flex; align-items: center; gap: 8px; }
.ce-inline-row .input { flex: 1; min-width: 0; }
.ce-item-tools { display: flex; gap: 4px; padding-top: 4px; }
.ce-item-tools .button.icon.small, .cp-toolbar .button.icon.small { width: 28px; }

.ce-preview {
  position: sticky; top: 0;
  max-height: calc(100vh - 110px); overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ce-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ce-preview-head select.input { width: auto; max-width: 180px; }
.ce-preview-body { display: flex; flex-direction: column; gap: 14px; }
.ce-preview-note { font-size: 12px; }

@container (max-width: 900px) {
  .ce-layout.with-preview { grid-template-columns: minmax(0, 1fr); }
  .ce-preview { position: static; max-height: none; }
}
@container (max-width: 600px) {
  .ce-grid, .ce-pair { grid-template-columns: minmax(0, 1fr); }
  .ce-item { grid-template-columns: minmax(0, 1fr) auto; }
  .ce-item > .ce-inline { grid-column: 1 / -1; grid-row: 2; }
  .ce-thumb { width: 100%; }
}

/* Onizleme: oyun ekranlarinin yaklasik esi. Renkler ve oranlar tasarimdan (patcher karti 520x186, giris
   karti 216x118); haber karti olcusu kart genisligine gore (cqw), yazi tipleri panelinkiler. Giris ekrani
   oyun icidir: Python yalniz Tahoma'yi kalinsiz cizer, onizleme de oyle. */
.cp-block { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-block.muted > :not(figcaption) { opacity: .45; }
.cp-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 11.5px; }
.cp-caption-note { color: var(--faint); font-style: italic; }
.cp-hero {
  position: relative; width: 100%; aspect-ratio: 520 / 186;
  overflow: hidden; container-type: inline-size;
  background: #1a1511; color: #efe4cc;
  border: 1px solid #8a6a34; border-radius: 5px;
}
.cp-hero-img, .cp-login-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-noimage { background: radial-gradient(120% 140% at 80% 20%, #6b4a22, #1a1511 62%); }
.cp-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .85), transparent 70%); }
.cp-hero-text {
  position: absolute; left: 3.08cqw; top: 3.08cqw; bottom: 3.08cqw; width: 55.8cqw;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.15cqw;
}
.cp-tag {
  align-self: flex-start;
  height: 3.85cqw; padding: 0 1.54cqw;
  border-radius: 3px; background: var(--cp-tag, #b2261f); color: #fff;
  font-size: max(7px, 1.92cqw); font-weight: 700; letter-spacing: .12em; line-height: 3.85cqw; white-space: nowrap;
}
.cp-hero-title { font: 700 5cqw/1.05 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.cp-hero-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #d8cdb6; font-size: max(8px, 2.31cqw); line-height: 1.4;
}
.cp-infos { display: flex; flex-direction: column; gap: 8px; }
.cp-info, .cp-notes {
  background: linear-gradient(180deg, rgb(26 21 17 / .9), rgb(10 8 7 / .93));
  border: 1px solid #57432a; color: #efe4cc;
  box-shadow: inset 0 1px 0 rgb(255 225 170 / .07), 0 6px 18px rgb(0 0 0 / .45);
}
.cp-info { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: 3px; }
.cp-info-icon { display: flex; color: #c9a05c; }
.cp-info-icon svg { width: 15px; height: 15px; }
.cp-info-label { width: 62px; flex: none; font-size: 12px; font-weight: 700; }
.cp-info-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a89e8a; font-size: 12px; }
.cp-notes { display: flex; flex-direction: column; gap: 9px; padding: 14px 18px; border-radius: 5px; }
.cp-notes-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9a96e; font-size: 13px; font-weight: 700; letter-spacing: .22em; }
.cp-note { display: flex; align-items: center; gap: 10px; }
.cp-kind {
  width: 70px; height: 20px; flex: none;
  border: 1px solid currentColor; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 18px; text-align: center;
}
.cp-kind.new { color: #3fb06a; }
.cp-kind.balance { color: #e0a83a; }
.cp-kind.fix { color: #3f86e0; }
.cp-note-text { min-width: 0; overflow-wrap: anywhere; color: #d8cdb6; font-size: 13px; }
.cp-login {
  position: relative; width: min(100%, 260px); aspect-ratio: 216 / 118;
  overflow: hidden;
  background: #1a1511; color: #efe4cc;
  border: 1px solid rgb(201 160 92 / .5); border-radius: 5px;
  box-shadow: 0 8px 20px rgb(0 0 0 / .5);
  font-family: Tahoma, Verdana, sans-serif;
}
.cp-login-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .9), transparent 70%); }
.cp-tag.small { position: absolute; left: 10px; top: 8px; height: 18px; padding: 0 7px; border-radius: 2px; font-size: 9px; font-weight: 400; line-height: 18px; }
.cp-login-text { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; flex-direction: column; }
.cp-login-title, .cp-login-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-login-title { font-size: 14px; }
.cp-login-summary { color: #c8bda6; font-size: 11px; }
.cp-ticker {
  height: 34px; display: flex; align-items: center; padding: 0 12px;
  overflow: hidden;
  background: linear-gradient(0deg, rgb(0 0 0 / .85), #1a1511);
  border-radius: 4px;
  color: #d8cdb6; font: 11px Tahoma, Verdana, sans-serif;
}
.cp-ticker-window {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cp-ticker-track { display: inline-flex; animation: cp-tick 26s linear infinite; }
@keyframes cp-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cp-ticker-track { animation: none; }
  .cp-ticker-track > :last-child { display: none; }
  .cp-ticker-window { text-overflow: ellipsis; }
}
.cp-empty { color: #7a7062; font-size: 12px; }

/* Yayin onizlemesi (yer, dil, platform; oyuncunun gorecegi sira) */
.cp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-toolbar select.input { width: auto; }
.cp-status { color: var(--faint); font-size: 12px; }
.cp-status.error { color: var(--danger); }
.cp-published {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px; container-type: inline-size;
  background: #0a0807; border: 1px solid var(--border); border-radius: var(--radius);
}
.cp-published:empty { display: none; }
.cp-patcher { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 576fr); gap: 16px; align-items: start; }
.cp-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-placeholder { display: grid; place-items: center; min-height: 80px; color: #7a7062; font-size: 12px; }
.cp-rest { list-style: none; display: flex; flex-direction: column; gap: 4px; color: #d8cdb6; font-size: 12px; }
.cp-rest li { display: flex; gap: 8px; align-items: baseline; }
.cp-rest-kind { width: 80px; flex: none; color: #c9a96e; }
.cp-login-list { display: flex; flex-wrap: wrap; gap: 12px; }
.cp-login-item { position: relative; width: min(100%, 260px); }
.cp-login-item .cp-login { width: 100%; }
.cp-fallback { padding: 0 5px; border-radius: 3px; background: rgb(240 180 41 / .15); color: var(--warn); font: 600 10px/1.6 var(--mono); }
.cp-login-item .cp-fallback { position: absolute; right: 6px; top: 6px; }
.cp-maint { color: #d8cdb6; }
/* Lobi (MA_Lobi): ust duyuru seridi 524x34 ve sag sutundaki etkinlik vitrini 264x168. Oyun ici yazi (Tahoma).
   Madalyon lobi kartindaki (btn_lobi) yuvarlak etkinlik gorseli; gorsel ortadan kirpilir. */
.cp-lobby-strip {
  display: flex; align-items: center; gap: 8px;
  width: min(100%, 524px); height: 34px; padding: 4px;
  background: rgb(10 8 7 / .72); border: 1px solid rgb(201 160 92 / .35); border-radius: 4px;
}
.cp-lobby-strip.cp-placeholder { min-height: 34px; padding: 0 12px; place-items: center start; }
.cp-lobby-strip .cp-ticker { flex: 1; min-width: 0; height: 100%; padding: 0 6px; background: none; font-size: 13px; }
.cp-lobby-badge {
  flex: none; height: 22px; padding: 0 8px;
  border-radius: 3px; background: linear-gradient(180deg, #a3261d, #6e1712); color: #fff1ea;
  font: 700 11px/22px Tahoma, Verdana, sans-serif; letter-spacing: .14em; white-space: nowrap;
}
.cp-lobby-strip > .cp-lobby-badge { height: 100%; line-height: 26px; }
.cp-lobby-event {
  position: relative; width: min(100%, 300px); aspect-ratio: 264 / 168;
  overflow: hidden; container-type: inline-size;
  background: #1a1511; color: #efe4cc;
  border: 1px solid #c9a05c; border-radius: 5px;
  box-shadow: 0 8px 20px rgb(0 0 0 / .5);
  font-family: Tahoma, Verdana, sans-serif;
}
.cp-lobby-event.cp-placeholder { padding: 0 16px; text-align: center; }
.cp-lobby-event-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-lobby-event-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(6 4 3 / .95), rgb(6 4 3 / .55) 48%, rgb(6 4 3 / .15)); }
.cp-lobby-event > .cp-lobby-badge { position: absolute; left: 10px; top: 10px; }
.cp-lobby-time {
  position: absolute; right: 10px; top: 10px; height: 22px; padding: 0 8px;
  border-radius: 3px; background: rgb(10 8 7 / .75); border: 1px solid rgb(201 160 92 / .4);
  color: #fff3dc; font-size: 12px; line-height: 20px; white-space: nowrap;
}
.cp-lobby-time.pending { color: #f0d595; }
.cp-lobby-time.ended { color: #a89e8a; }
.cp-lobby-medal {
  position: absolute; left: 12px; bottom: 14px; width: 22cqw; aspect-ratio: 1;
  overflow: hidden; border-radius: 50%;
  border: 2px solid #c9a05c; box-shadow: 0 0 0 2px #3a2a14, 0 4px 10px rgb(0 0 0 / .6);
}
.cp-lobby-medal-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cp-lobby-medal .cp-noimage { width: 100%; height: 100%; }
.cp-lobby-event-text {
  position: absolute; left: calc(22cqw + 22px); right: 12px; bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.cp-lobby-event-title, .cp-lobby-event-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.cp-lobby-event-title { color: #fff3dc; font: 700 15px/1.15 Georgia, "Times New Roman", serif; }
.cp-lobby-event-summary { color: #d8cdb6; font-size: 11.5px; }
.cp-lobby-key { align-self: flex-start; margin-top: 2px; padding: 0 5px; border-radius: 3px; background: rgb(201 160 92 / .18); color: #c9a96e; font: 10px/1.6 var(--mono); }
.cp-modal.modal.wide { width: min(1120px, calc(100vw - 32px)); }
.cp-modal-body { display: flex; flex-direction: column; gap: 12px; }
@container (max-width: 640px) {
  .cp-patcher { grid-template-columns: minmax(0, 1fr); }
}
/* ==== Icerik sonu ==== */

/* ==== Surumler (views/releases.js) ==== */
/* Tek kart; tablo dar ekranda yatay kayar. Gecmis satiri tablonun icinde acilir, metin kirilarak akar. */
.rl { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.rl-card .ov-hint { margin: 0 0 12px; }
.rl-wrap { overflow-x: auto; }
.rl-table { min-width: 860px; }
.rl-col-name { width: 200px; }
.rl-col-status { width: 150px; }
.rl-col-action { width: 96px; }
.rl-table td { height: 56px; }
.rl-name { font-weight: 500; }
.rl-sub { display: flex; gap: 10px; }
.rl-commit { color: var(--accent); text-decoration: none; }
.rl-commit:hover { text-decoration: underline; }
.rl-table .tag { margin-left: 8px; }
tr.rl-mismatch td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.rl-history-row td { height: auto; padding: 0; white-space: normal; background: var(--surface-2); }
.rl-history { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.rl-history-list { list-style: none; display: flex; flex-direction: column; }
.rl-entry { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.rl-entry:last-child { border-bottom: 0; }
.rl-entry-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.rl-entry-head .tag { margin-left: 0; }
.rl-version { font-weight: 600; }
.rl-meta { color: var(--muted); font-size: 12px; }
.rl-changes { margin: 6px 0 0 18px; color: var(--text); font-size: 12.5px; }
.rl-changes li { margin: 2px 0; overflow-wrap: anywhere; }
/* ==== Surumler sonu ==== */

/* Ses (views/voice.js, ui/voiceBan.js) */
.vc { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.vc-card .ov-hint { margin: 0 0 12px; }
.vc-names { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.vc-mic { color: var(--ok); font-weight: 600; }
.vc-room-error { color: var(--danger); font-size: 12px; }
.vc-switches { display: flex; flex-wrap: wrap; gap: 20px; }
.vc-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vc-settings .input { width: 100%; }
.vc-ban-card { display: flex; flex-direction: column; gap: 8px; }
.vc-ban-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.vc-ban-row { display: flex; flex-direction: column; gap: 2px; }

/* ==== Menu gruplari ve gecikmeli yukleme (app.js) ==== */
/* Menu uzadi (oyun ekranlari): kisa ekranda yalniz menu kayar, cikis dugmesi yerinde kalir. */
.nav { min-height: 0; overflow-y: auto; }
.nav-group {
  margin: 10px 0 2px; padding: 0 10px;
  color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
}
.nav-sep { margin: 8px 10px; border-top: 1px solid var(--border-soft); }
.view-status { color: var(--muted); }
.view-status.error { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--danger); }
@media (max-width: 900px) {
  .nav-group { margin: 8px 6px 2px; padding: 0; border-top: 1px solid var(--border-soft); height: 0; overflow: hidden; }
}
/* ==== Menu gruplari sonu ==== */

/* ==== Oyun verisi (views/online, characters, items, mobs, npcs, market, guilds, logins, gms; ui/table, pager) ==== */
/* Ortak tablo: kartin icinde kayar, baslik sabit kalir. */
.table-wrap.scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
tr.empty.pending td { color: var(--faint); }
tbody tr.link-row.no-link { cursor: default; }
td.wrap { white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.ad-table td.wrap { padding-top: 6px; padding-bottom: 6px; }
.pager-range { font-variant-numeric: tabular-nums; }

/* Sekmeli ekranlar: sekme, suzgec ve tablo alt alta; yalniz tablo kayar. */
.ga-tabpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.ga-tabpanel > .field-hint { margin-top: -4px; }
.ga-notices { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ga-notices:empty { display: none; }
.ga-cores .mono { font-size: 12px; }
.ga-narrow { width: 96px; height: 34px; }
.ga-select { width: 140px; height: 34px; }
.ga-date { width: 190px; height: 34px; }
.ga-ip { width: 150px; height: 34px; font-family: var(--mono); }
.ga-range { display: inline-flex; align-items: center; gap: 6px; }

/* Kanal cipleri (Cevrimici) */
.ga-chiprow { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ga-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.ga-chip strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ga-chip:hover { color: var(--text); }
.ga-chip[aria-pressed="true"] { border-color: var(--accent); background: rgb(226 179 84 / .08); color: var(--text); }

/* Hucreler */
.ga-empire { display: inline-flex; align-items: center; gap: 6px; }
.ga-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ga-chips.mono .ct-chip { font-family: var(--mono); }
.ga-why { white-space: pre-wrap; word-break: break-word; color: var(--muted); font-size: 12px; }
.ga-war { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ga-war .link { min-width: 0; }
.ga-winner { color: var(--ok); font-weight: 650; }
.ga-level { font-weight: 650; }
td a.link, dd a.link { color: var(--text); text-decoration: none; }
td a.link:hover, dd a.link:hover { color: var(--accent); text-decoration: underline; }
.ad-head .facts { row-gap: 10px; }
.ad-card-head .segmented { flex-wrap: wrap; }

/* Esya secici (ui/itemPicker.js) */
.picker { position: relative; min-width: 260px; }
.picker-field { position: relative; display: flex; align-items: center; }
.picker-field .input { width: 100%; height: 34px; padding-right: 64px; }
.picker-badge { position: absolute; right: 10px; color: var(--accent); font-size: 12px; pointer-events: none; }
.picker-list {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow: auto; list-style: none;
  padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 30px rgb(0 0 0 / .45);
}
.picker-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.picker-option:hover, .picker-option[aria-selected="true"] { background: rgb(226 179 84 / .1); }
.picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-vnum { flex: none; color: var(--muted); font-size: 11.5px; }
.picker-note { padding: 8px 10px; color: var(--muted); font-size: 12px; }

/* Esya gonder penceresi */
.ga-target { display: flex; align-items: baseline; gap: 10px; color: var(--text); font-size: 13px; }
.ga-count .input { width: 120px; }
.modal-form .picker { min-width: 0; }

/* Esya simgesi (ui/gameCells.js itemIcon): kutu sabit, 32x64 simge orani korunarak kuculur; satir yuksekligi
   degismez. Simge yoksa ya da inmezse notr yer tutucu. */
.ga-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ga-item-text { min-width: 0; }
.item-icon {
  flex: none; width: 32px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 6px; background: var(--surface-2);
  overflow: hidden;
}
.item-icon img { width: 100%; height: 100%; object-fit: contain; }
.item-icon.empty::after { content: ""; width: 10px; height: 10px; border: 1px dashed var(--faint); border-radius: 3px; opacity: .7; }
.item-icon.sm { width: 22px; height: 22px; border-radius: 4px; }
.item-icon.sm.empty::after { width: 7px; height: 7px; }
.item-icon.lg { width: 64px; height: 64px; border-radius: 8px; }
/* Kartta 32 px simge iki kat buyur: pikseller yumusamasin. */
.item-icon.lg img { image-rendering: pixelated; }
.picker-option { justify-content: flex-start; gap: 10px; }
.picker-option .picker-name { flex: 1; }
.ga-price-item { display: inline-flex; align-items: center; gap: 6px; }

/* Mob ve NPC rozetleri (gameLabels MOB_TYPES, MOB_RANKS); .pill.ok/.warn/.danger ortak. */
.pill.tone-violet { background: rgb(167 139 250 / .12); color: #b9a5fb; }
.pill.tone-blue { background: rgb(96 165 250 / .12); color: #82b6f7; }
.pill.tone-orange { background: rgb(251 146 60 / .12); color: #fb9d56; }
.pill.tone-gold { background: rgb(226 179 84 / .14); color: var(--accent); }
.ga-pills { display: inline-flex; gap: 4px; }
.ga-source { color: var(--muted); }

/* Esya karti (Esyalar): ozet, dusuren moblar, satan NPC'ler yan yana; listeler kendi icinde kayar. */
.ga-itemcard {
  flex: none;
  display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px;
  transition: opacity .15s;
}
.ga-itemcard.loading { opacity: .55; }
.ga-itemcard > .ad-card { max-height: 260px; min-height: 0; padding: 14px 16px; gap: 10px; }
.ga-itemcard .ad-table { flex: 1; min-height: 0; overflow: auto; }
.ga-itemcard .ad-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.ga-itemcard-status { grid-column: 1 / -1; }
.ga-itemcard-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ga-itemcard-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ga-itemcard-name strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1200px) {
  .ga-itemcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ga-itemcard-main { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ga-date { width: 170px; }
  .ga-itemcard { grid-template-columns: minmax(0, 1fr); }
}
/* ==== Oyun verisi sonu ==== */

/* IP hucresi (ui/ipCell.js): adres + bilgi dugmesi; dugme satir tiklamasini tetiklemez (ui/table.js). */
.ip-cell { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.ip-cell .mono { overflow: hidden; text-overflow: ellipsis; }
.button.icon.ip-info { flex: none; justify-content: center; width: 24px; height: 24px; }
.button.icon.ip-info svg { width: 14px; height: 14px; }
.ip-lookup { min-width: 320px; }
.ip-lookup .form-error { margin-top: 0; }

/* Beta basvurulari (views/beta.js) */
/* Uc risk rozeti dar sutuna sigmaz: alt satira gecer, satir uzar. */
td.beta-risk { white-space: normal; padding-top: 6px; padding-bottom: 6px; }
td.beta-risk .ga-pills { flex-wrap: wrap; }
.beta-subtitle { margin: 4px 0 -4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }

/* Hesaplar (views/accounts.js): giris yolu cipleri ve suzgecler tek satirda, sigmazsa alta gecer. */
.acc-filters .ga-chiprow { margin-right: 4px; }
.acc-filters select.input { width: 150px; }
/* Hesap detayi: kayit / son giris yeri (ulke, risk, nasil, IP) alt alta. */
.ad-place { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ad-place .ip-cell { margin-top: 2px; }
/* Girisler: uzun ag adi ve uygulama metni kesilir (tam hali uzerine gelince); IP sutunu kartin disina itilmesin. */
td.ad-cap { max-width: 190px; }
/* Destek talebi (views/support.js): oyuncu, destek ekibi ve ic not ayri renkte; ekler kucuk gorsel ve oynatici. */
.sp-thread { display: flex; flex-direction: column; gap: 10px; }
.sp-msg { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.sp-msg.staff { border-left: 3px solid var(--ok); }
.sp-msg.note { border-left: 3px solid var(--warn); background: rgb(240 180 41 / .06); }
.sp-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.sp-body { white-space: pre-wrap; word-break: break-word; }
.sp-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sp-image img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.sp-video { width: 100%; max-width: 480px; max-height: 320px; border-radius: 6px; background: #000; }
.sp-reply { display: flex; flex-direction: column; gap: 8px; }
/* Topluluk konu penceresi: mesaja cevabin alintisi (forumdaki alinti kutusunun panel hali). */
.ct-quote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--border); color: var(--muted); font-size: 12px; white-space: pre-wrap; word-break: break-word; }