/* ====================================================================
   KUZEN — EK TEMALAR, OYUN PANELİ, SUNUCU AYARLARI
   ==================================================================== */

body.theme-ocean {
  --brand: #0ea5e9;
  --brand-hover: #0284c7;
  --brand-active: #0369a1;
  --brand-glow: #0ea5e966;
  --brand-subtle: #0ea5e92e;
  --text-link: #7dd3fc;
  --bg-tertiary: #041421;
  --bg-secondary: #0a2236;
  --bg-secondary-alt: #0c2a44;
  --bg-primary: #0a2236;
  --bg-floating: #0d2740;
  --bg-input: rgba(255,255,255,0.06);
  --text-normal: #d9e8f5;
  --text-muted: #7f98ad;
  --bg-modifier-selected: #0ea5e933;
  background: radial-gradient(900px 500px at 10% -10%, rgba(14,165,233,.35), transparent 60%), #041421;
}
body.theme-ocean .btn-primary { background: #0ea5e9; }
body.theme-ocean .btn-primary:hover { background: #0284c7; }

body.theme-sunset {
  --brand: #f97316;
  --brand-hover: #ea580c;
  --brand-active: #c2410c;
  --brand-glow: #f9731666;
  --brand-subtle: #f973162e;
  --text-link: #fdba74;
  --bg-tertiary: #1a0c10;
  --bg-secondary: #2a1419;
  --bg-secondary-alt: #33161d;
  --bg-primary: #2a1419;
  --bg-floating: #2a1219;
  --bg-input: rgba(255,255,255,0.06);
  --text-normal: #f6e6dc;
  --text-muted: #a8857a;
  --bg-modifier-selected: #f9731633;
  background: radial-gradient(900px 500px at 90% -10%, rgba(249,115,22,.35), transparent 60%), #1a0c10;
}
body.theme-sunset .btn-primary { background: #f97316; }
body.theme-sunset .btn-primary:hover { background: #ea580c; }

body.theme-rose {
  --brand: #ec4899;
  --brand-hover: #db2777;
  --brand-active: #be185d;
  --brand-glow: #ec489966;
  --brand-subtle: #ec48992e;
  --text-link: #f9a8d4;
  --bg-tertiary: #170b17;
  --bg-secondary: #241224;
  --bg-secondary-alt: #2c1730;
  --bg-primary: #241224;
  --bg-floating: #241224;
  --bg-input: rgba(255,255,255,0.06);
  --text-normal: #f3e1f0;
  --text-muted: #a0819a;
  --bg-modifier-selected: #ec489933;
  background: radial-gradient(900px 500px at 50% -20%, rgba(236,72,153,.3), transparent 60%), #170b17;
}
body.theme-rose .btn-primary { background: #ec4899; }
body.theme-rose .btn-primary:hover { background: #db2777; }

body.theme-neon {
  --brand: #22ff88;
  --brand-hover: #16e07a;
  --brand-active: #0fb865;
  --brand-glow: #22ff8866;
  --brand-subtle: #22ff882e;
  --text-link: #67ffb0;
  --bg-tertiary: #05070a;
  --bg-secondary: #0a0f14;
  --bg-secondary-alt: #0e151c;
  --bg-primary: #0a0f14;
  --bg-floating: #0a0f14;
  --bg-input: rgba(255,255,255,0.06);
  --text-normal: #d6f5e4;
  --text-muted: #6b8c7a;
  --bg-modifier-selected: #22ff8833;
  background: radial-gradient(900px 500px at 100% 100%, rgba(34,255,136,.12), transparent 60%), #05070a;
}
body.theme-neon .btn-primary { background: #22ff88; }
body.theme-neon .btn-primary:hover { background: #16e07a; }

body.theme-mint {
  --brand: #2dd4bf;
  --brand-hover: #14b8a6;
  --brand-active: #0d9488;
  --brand-glow: #2dd4bf66;
  --brand-subtle: #2dd4bf2e;
  --text-link: #5eead4;
  --bg-tertiary: #0b1f1c;
  --bg-secondary: #102a26;
  --bg-secondary-alt: #143430;
  --bg-primary: #102a26;
  --bg-floating: #102a26;
  --bg-input: rgba(255,255,255,0.06);
  --text-normal: #dcf5ef;
  --text-muted: #7fa89f;
  --bg-modifier-selected: #2dd4bf33;
  background: radial-gradient(900px 500px at 0% 0%, rgba(45,212,191,.25), transparent 60%), #0b1f1c;
}
body.theme-mint .btn-primary { background: #2dd4bf; }
body.theme-mint .btn-primary:hover { background: #14b8a6; }


/* ---------- Tema kartları ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.theme-card {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, border-color .15s; min-height: 76px;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.selected { border-color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.theme-swatch { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.theme-name { font-weight: 700; color: #fff; font-size: 14px; }
.theme-desc { font-size: 11px; color: rgba(255,255,255,.7); }

/* ---------- Sunucu ayarları ---------- */
.srv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.srv-stat {
  background: var(--bg-secondary); border-radius: 12px; padding: 12px; text-align: center;
  font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
}
.srv-stat span { display: block; font-size: 22px; font-weight: 800; color: var(--text-header); margin-bottom: 2px; }
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-row .auth-input { flex: 1; }

/* ---------- Oyun paneli (XOX) ---------- */
#game-panel {
  margin: 0 0 8px; background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--text-normal);
}
.game-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.game-bar-title { font-weight: 600; color: var(--text-header); }
.game-bar-title strong { color: var(--brand); }
.game-bar-actions { display: flex; gap: 6px; }
.game-btn {
  padding: 6px 12px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; font-size: 12px;
}
.game-btn:hover { background: var(--brand-hover); }
.game-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.15); color: var(--text-muted); }
.game-body { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.xox-board { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; }
.xox-cell {
  width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.05);
  font-size: 28px; font-weight: 800; color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}
.xox-cell.playable:hover { background: var(--brand-subtle); }
.xox-cell.cell-x { color: #60a5fa; }
.xox-cell.cell-o { color: #f472b6; }
.xox-cell:disabled { cursor: default; }
.game-players { display: flex; flex-direction: column; gap: 8px; }
.pl { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font-weight: 600; }
.pl-x { color: #60a5fa; }
.pl-o { color: #f472b6; }

/* ---------- Ekler ---------- */
.message-attachment-video { max-width: 420px; max-height: 300px; border-radius: 14px; display: block; background: #000; }
audio { max-width: 360px; }

/* ==================== BİLDİRİM (TOAST) ==================== */
.toast-root {
  position: fixed; right: 22px; bottom: 22px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.kz-toast {
  pointer-events: auto;
  padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.4;
  color: #fff; background: #1e2130; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease;
}
.kz-toast.show { opacity: 1; transform: none; }
.kz-toast-error { border-color: rgba(248,113,113,.6); background: #3b1d24; }
.kz-toast-info { border-color: rgba(167,139,250,.5); }

/* ==================== DİYALOG (onay / metin / seçim) ==================== */
.kz-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 6, 16, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: kzFade .15s ease;
}
@keyframes kzFade { from { opacity: 0; } to { opacity: 1; } }
.kz-dialog {
  width: min(420px, 100%); padding: 22px; border-radius: 18px;
  background: var(--bg-floating, #232428); color: var(--text-normal, #e3e5f7);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.kz-dialog-title { font-size: 18px; font-weight: 800; color: var(--text-header, #fff); margin-bottom: 8px; }
.kz-dialog-msg { font-size: 14px; color: var(--text-muted, #9ca3af); line-height: 1.5; margin-bottom: 14px; }
.kz-dialog-input {
  width: 100%; padding: 11px 13px; margin-bottom: 14px; border-radius: 10px;
  background: rgba(0,0,0,.25); color: var(--text-normal, #e3e5f7); border: 1px solid rgba(255,255,255,.12);
  font: inherit; outline: none;
}
.kz-dialog-input:focus { border-color: #a78bfa; }
.kz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.kz-choice {
  padding: 14px 10px; border-radius: 12px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--c); border: 2px solid rgba(255,255,255,.25); font: inherit;
}
.kz-choice:hover { filter: brightness(1.12); }
.kz-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.kz-btn { padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; border: 0; color: #fff; }
.kz-btn-ghost { background: rgba(255,255,255,.08); color: var(--text-normal, #e3e5f7); }
.kz-btn-primary { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.kz-btn-danger { background: #dc2626; }
.kz-btn:hover { filter: brightness(1.1); }

/* ==================== OYUN PANELİ: kartlar ve blok yapısı ==================== */
#game-panel .game-card { margin-bottom: 8px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); padding-bottom: 6px; }
#game-panel .game-card .game-bar { border-radius: 14px 14px 0 0; }
#game-panel .game-launcher { margin-bottom: 8px; }
.uno-stats { font-size: 13px; color: var(--text-muted, #9ca3af); padding: 0 14px 8px; line-height: 1.6; }
.uno-stats strong { color: var(--text-normal, #e3e5f7); }
.uno-pending { color: #fbbf24 !important; }
.uno-table { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 4px 14px 8px; }
.uno-players { display: flex; gap: 8px; flex-wrap: wrap; }
.uno-pl {
  padding: 6px 11px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 600;
  display: flex; gap: 10px; align-items: center; border: 1px solid transparent;
}
.uno-pl.turn { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.2); }
.uno-count { color: var(--text-muted, #9ca3af); font-weight: 700; }
.uno-face {
  width: 54px; height: 76px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: #fff; user-select: none;
  border: 2px solid rgba(255,255,255,.75); box-shadow: 0 6px 16px rgba(0,0,0,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.35); font-family: inherit;
}
.uno-r { background: #dc2626; }
.uno-y { background: #eab308; color: #1f2937; text-shadow: none; }
.uno-b { background: #2563eb; }
.uno-g { background: #16a34a; }
.uno-k { background: conic-gradient(#dc2626 0 25%, #eab308 0 50%, #2563eb 0 75%, #16a34a 0); }
.uno-empty { background: #374151; }
.uno-back { background: linear-gradient(135deg, #111827, #1f2937); font-size: 13px; letter-spacing: 1px; }
.uno-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(255,255,255,.4); }
.uno-dot.uno-r, .uno-dot.uno-y, .uno-dot.uno-b, .uno-dot.uno-g { width: 10px; height: 10px; font-size: 0; }
.uno-hand { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 14px 10px; }
.uno-hand .uno-face { width: 50px; height: 70px; cursor: pointer; font-size: 16px; transition: transform .15s, opacity .15s; }
.uno-hand .uno-face:hover { transform: translateY(-7px); }
.uno-hand .uno-face:not(.playable) { opacity: .5; filter: saturate(.6); }
.uno-hand .uno-face.playable { box-shadow: 0 0 0 2px #a78bfa, 0 6px 16px rgba(0,0,0,.35); }
.uno-log { font-size: 12.5px; color: var(--text-muted, #9ca3af); padding: 0 14px 6px; font-style: italic; }

/* ==================== SESLİ SAHNE: sohbet satırının içinde (üye listesi yerinde kalır) ==================== */
.chat-body-split > .voice-stage-container { flex: 1; min-width: 0; height: 100%; }

/* ==================== OYUN ODASI (büyük ekran) ==================== */
.game-room-btn.has-game { color: #4ade80; }
.game-room-btn.has-game svg { fill: #4ade80; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; vertical-align: middle; margin-left: 4px; }
.game-room-overlay {
  position: fixed; inset: 0; z-index: 9000; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 600px at 50% 30%, rgba(139,92,246,.22), transparent 70%), rgba(4,6,16,.74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: kzFade .18s ease;
}
.game-room {
  width: min(980px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(31,34,62,.97), rgba(14,16,34,.97));
  border: 1px solid rgba(255,255,255,.1); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  color: var(--text-normal, #e3e5f7);
}
.game-room-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.game-room-tabs { display: flex; gap: 8px; }
.grt { padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #e5e7eb; font: inherit; font-weight: 700; cursor: pointer; }
.grt.on { background: linear-gradient(135deg, #8b5cf6, #22d3ee); border-color: transparent; color: #fff; }
.game-room-close { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-size: 16px; }
.game-room-close:hover { background: rgba(255,255,255,.14); }
.game-room-body { padding: 26px 22px 22px; overflow-y: auto; }
.arena { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.arena-status { font-size: 16px; font-weight: 600; color: #cbd5e1; text-align: center; }
.arena-status strong { color: #fff; }
.arena-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.arena-log { font-size: 13px; color: #94a3b8; font-style: italic; }
.arena-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 50px 20px; color: #cbd5e1; }
.arena-empty-icon { font-size: 46px; }
.game-btn.big { padding: 12px 22px; font-size: 15px; }

/* XOX: büyük tahta, iki yanda oyuncu koltuğu */
.xox-arena-row { display: flex; align-items: center; gap: 30px; justify-content: center; flex-wrap: wrap; }
.xo-seat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 160px; padding: 16px 12px;
  border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .2s, border-color .2s;
}
.xo-seat.is-turn { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,.28), 0 0 26px rgba(250,204,21,.25); }
.xo-seat.empty { opacity: .45; }
.xo-seat .seat-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c);
  background: #1e293b; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; color: #fff;
}
.xo-seat img, .uno-seat img, .uno-myseat img { width: 100%; height: 100%; object-fit: cover; }
.xo-seat .seat-name { font-weight: 700; color: #fff; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-sym { font-weight: 900; font-size: 22px; color: var(--c); }
.xox-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(360px, 60vw); }
.xox-big .xox-cell { width: auto; height: auto; aspect-ratio: 1 / 1; font-size: 54px; border-radius: 16px; }

/* UNO: yeşil masa, koltuklar etrafta */
.uno-felt {
  position: relative; width: min(700px, 100%); height: 360px; margin: 26px auto 8px;
  border-radius: 50% / 46%; border: 14px solid #5b3a1f;
  background: radial-gradient(ellipse at center, #237f52 0%, #135c3a 62%, #0b3b26 100%);
  box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 22px 40px rgba(0,0,0,.45);
}
.uno-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; }
.uno-seat .seat-avatar {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c, #475569);
  background: #1e293b; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
}
.uno-seat .seat-name { font-weight: 700; font-size: 13px; color: #fff; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.uno-seat.is-turn .seat-avatar { box-shadow: 0 0 0 4px rgba(250,204,21,.6), 0 0 22px rgba(250,204,21,.55); }
.uno-seat.empty { opacity: .4; }
.uno-seat.empty .seat-avatar { border-style: dashed; color: #cbd5e1; font-size: 22px; }
.seat-count { font-size: 12px; color: #d1fae5; background: rgba(0,0,0,.4); padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.seat-top { top: -34px; left: 50%; transform: translateX(-50%); }
.seat-top-left { top: -34px; left: 8%; }
.seat-top-right { top: -34px; right: 8%; }
.seat-left { left: -64px; top: 50%; transform: translateY(-50%); }
.seat-right { right: -64px; top: 50%; transform: translateY(-50%); }
.felt-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 18px; }
.uno-deck {
  width: 58px; height: 82px; border-radius: 11px; border: 2px solid #fff;
  background: repeating-linear-gradient(45deg, #1e293b 0 6px, #334155 6px 12px);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.uno-deck span { background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 8px; font-size: 14px; }
.uno-pile .uno-face.big { width: 74px; height: 104px; font-size: 26px; }
.felt-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 13px; color: #ecfdf5; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.uno-pending { color: #fde047; font-weight: 800; }
.uno-dot.big { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; display: inline-block; }
.uno-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.uno-myseat { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.uno-myseat .seat-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c); background: #1e293b; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.uno-myhand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 100%; padding-bottom: 4px; }
.uno-face.mini { width: 60px; height: 84px; font-size: 18px; cursor: pointer; }
.uno-face.mini:hover { transform: translateY(-8px); }

@media (max-width: 760px) {
  .uno-felt { height: 420px; }
  .seat-left { left: -6px; top: auto; bottom: 12px; transform: none; }
  .seat-right { right: -6px; top: auto; bottom: 12px; transform: none; }
  .xox-arena-row { gap: 14px; }
  .xo-seat { width: 120px; }
}

/* ===== Anketler ===== */
.poll-card { margin-top: 8px; background: var(--bg-secondary, #2b2d31); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; max-width: 460px; }
.poll-q { font-weight: 700; margin-bottom: 8px; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit; }
.poll-opt:hover:not(:disabled) { border-color: var(--accent, #8b5cf6); }
.poll-opt.mine { border-color: var(--accent, #8b5cf6); }
.poll-opt:disabled { cursor: default; opacity: .85; }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(139,92,246,.25); z-index: 0; transition: width .3s; }
.poll-label, .poll-count { position: relative; z-index: 1; }
.poll-count { font-size: 12px; color: var(--text-muted, #949ba4); white-space: nowrap; }
.poll-foot { margin-top: 8px; font-size: 12px; color: var(--text-muted, #949ba4); }
.poll-dialog { max-width: 460px; width: 100%; }
.poll-row { display: flex; align-items: flex-end; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.chat-poll-btn { background: none; border: none; cursor: pointer; font-size: 18px; padding: 6px; opacity: .8; }
.chat-poll-btn:hover { opacity: 1; }

/* ===== Chk / rol listesi ===== */
.chk-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.chk-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.chk-empty { font-size: 13px; color: var(--text-muted, #949ba4); }
.role-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

/* ===== Sunucu banneri ===== */
.srv-banner { height: 70px; background-size: cover; background-position: center; border-radius: 0; }

/* ===== Sunucu şeridi klasörleri ===== */
.rail-folder { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0; width: 100%; }
.rail-folder-btn { width: 48px; height: 48px; border-radius: 16px; border: none; background: var(--folder-color, #8b5cf6); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; color: #fff; }
.rail-folder.open .rail-folder-btn { border-radius: 14px; }
.rail-folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; height: 100%; }
.rail-mini { display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 9px; font-weight: 700; overflow: hidden; background: #313338; }
.rail-mini img { width: 100%; height: 100%; object-fit: cover; }
.rail-folder-name-inline { font-size: 10px; font-weight: 700; line-height: 1.1; word-break: break-all; }
.rail-folder-items { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-left: 2px solid var(--folder-color, #8b5cf6); }
.rail-folder-child { width: 100%; display: flex; justify-content: center; }
.rail-folder-child.active .server-icon-btn { border-radius: 16px; }
.server-item-wrapper.rail-drop, .rail-folder.rail-drop .rail-folder-btn { outline: 2px dashed #8b5cf6; outline-offset: 2px; }

/* ===== Oyun odası ipucu ===== */
.room-hint { margin: 10px auto; padding: 14px 16px; max-width: 520px; text-align: center; border-radius: 10px; background: rgba(139,92,246,.12); border: 1px dashed rgba(139,92,246,.5); font-size: 14px; }

/* ===== Mobil menü butonu ===== */
.mobile-nav-btn { display: none; background: none; border: none; color: inherit; font-size: 20px; cursor: pointer; padding: 4px 8px; }

/* ===== Mobil uyumluluk ===== */
@media (max-width: 900px) {
  .chat-header-topic { display: none; }
  /* Üye listesi: sağdan açılan çekmece */
  .members-sidebar {
    display: flex !important; position: fixed; top: 52px; right: 0; bottom: 0; z-index: 920;
    width: min(290px, 86vw); max-width: 86vw; transform: translateX(105%); visibility: hidden;
    transition: transform .2s ease, visibility .2s; box-shadow: -4px 0 18px rgba(0,0,0,.4);
  }
  .members-sidebar:not(.hidden) { transform: none; visibility: visible; }
  .members-sidebar.hidden { display: none !important; }
}
@media (max-width: 720px) {
  .mobile-nav-btn { display: inline-flex; align-items: center; }
  .server-sidebar { width: 56px !important; min-width: 56px !important; }
  .server-item-wrapper { width: 56px !important; }
  .server-icon-btn { width: 40px !important; height: 40px !important; }
  .channels-sidebar {
    position: fixed !important; top: 0; bottom: 0; left: 56px; z-index: 900;
    width: min(300px, calc(100vw - 56px)) !important;
    transform: translateX(calc(-100% - 60px)); visibility: hidden;
    transition: transform .2s ease, visibility .2s; box-shadow: 4px 0 18px rgba(0,0,0,.4);
  }
  body.nav-open .channels-sidebar { transform: none; visibility: visible; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 800; }
  .main-chat-wrapper { min-width: 0; width: 100%; }
  .chat-header { padding: 0 10px; gap: 6px; }
  .chat-header-divider { display: none; }
  .chat-body-split { flex-direction: column; }
  .message-actions-bar { display: none !important; }
  .game-room { width: 100vw !important; height: 100vh !important; max-width: none !important; border-radius: 0 !important; }
  .uno-felt, .xox-big { min-height: 0 !important; }
  .uno-felt { grid-template-columns: 1fr !important; }
  .poll-card { max-width: 100%; }
}

/* ===== Sabitleme, arama, mention ===== */
.pin-badge { margin-left: 6px; font-size: 12px; }
.mention { background: rgba(88,101,242,.25); color: #c9ceff; border-radius: 3px; padding: 0 2px; }
.mention.mention-me { background: rgba(250,168,26,.3); color: #ffd98a; font-weight: 600; }
.search-results { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; margin-top: 10px; }
.search-hit { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit; }
.search-hit:hover { border-color: var(--accent, #8b5cf6); }
.search-hit-meta { font-size: 12px; color: var(--text-muted, #949ba4); }
.search-hit-text { font-size: 14px; word-break: break-word; }
.msg-flash { animation: msgFlash 1.6s ease; }
@keyframes msgFlash { 0%,40% { background: rgba(139,92,246,.3); } 100% { background: transparent; } }

/* ===== Ikonlar (emoji yerine SVG) ===== */
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.ui-icon.mini { width: 12px; height: 12px; }
.ui-icon.qs-icon { width: 18px; height: 18px; color: var(--text-muted, #949ba4); }
.pin-badge .ui-icon { width: 13px; height: 13px; color: var(--text-muted, #949ba4); }
.room-hint .ui-icon { width: 16px; height: 16px; margin-right: 4px; }
.mobile-nav-btn .ui-icon { width: 22px; height: 22px; }
.chat-poll-btn .ui-icon { width: 20px; height: 20px; }
.header-action-btn .ui-icon { width: 20px; height: 20px; }
.kz-dialog-title .ui-icon { width: 18px; height: 18px; margin-right: 4px; }
.poll-q .ui-icon { width: 16px; height: 16px; margin-right: 4px; }
.category-add-btn .ui-icon { width: 14px; height: 14px; }
.msg-action-btn .ui-icon { width: 16px; height: 16px; }

/* ===== Okunmamış, sessize alma ===== */
.channel-item.unread .channel-name { color: var(--text-header, #fff); font-weight: 700; }
.unread-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.unread-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--text-header, #fff); }
.channel-item .channel-actions { display: flex; gap: 2px; }
.channel-item:not(:hover) .channel-action-icon:not(.keep) { opacity: 0; }
.channel-item:hover .channel-action-icon { opacity: 1; }
.channel-item .unread-badge + .channel-actions, .channel-item .unread-dot + .channel-actions { display: none; }
.channel-item:hover .unread-badge + .channel-actions, .channel-item:hover .unread-dot + .channel-actions { display: flex; }

/* ===== Ctrl+K hızlı geçiş ===== */
.quick-switch-dialog { width: min(520px, 92vw); padding: 14px; }
.qs-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; margin-top: 10px; }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.qs-item.sel, .qs-item:hover { background: rgba(139,92,246,.18); }
.qs-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-sub { font-size: 12px; color: var(--text-muted, #949ba4); }
.qs-hint { margin-top: 8px; font-size: 11px; color: var(--text-muted, #949ba4); text-align: right; }

/* ===== Yasaklılar / ayar bölümleri ===== */
.settings-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.ban-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ban-user { font-size: 12px; color: var(--text-muted, #949ba4); }
.danger-text { color: #f23f43 !important; }

/* ===== Kişi limiti denetimi ===== */
.limit-ctl .chk-row { margin-top: 6px; }
.limit-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.limit-slider { flex: 1; accent-color: var(--brand, #8b5cf6); height: 28px; min-width: 0; }
.limit-slider:disabled { opacity: .4; }
.limit-val { min-width: 74px; text-align: right; font-weight: 600; color: var(--text-header, #fff); font-size: 13px; white-space: nowrap; }

/* ===== Ses kaydı ===== */
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; border-radius: 10px; background: rgba(242,63,67,.12); border: 1px solid rgba(242,63,67,.4); width: 100%; box-sizing: border-box; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #f23f43; animation: recPulse 1s infinite; }
@keyframes recPulse { 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-label { flex: 1; font-size: 13px; color: var(--text-muted, #949ba4); }
.rec-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rec-btn .ui-icon { width: 18px; height: 18px; }
.rec-send { background: var(--brand, #8b5cf6); color: #fff; }
.chat-mic-btn.recording { color: #f23f43; }

/* ===== Sürükle-bırak tutacağı ===== */
.drag-grip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; margin-right: 2px; color: var(--text-muted, #949ba4); cursor: grab; touch-action: none; flex: 0 0 auto; }
.drag-grip .ui-icon { width: 16px; height: 16px; }
.channel-item .drag-grip { opacity: .35; }
.channel-item:hover .drag-grip { opacity: 1; }
.dragging { opacity: .35; }
.drag-ghost { position: fixed !important; z-index: 9999; pointer-events: none; opacity: .92; box-shadow: 0 10px 30px rgba(0,0,0,.45); border-radius: 8px; background: var(--bg-secondary, #2b2d31); margin: 0 !important; }
.category-item.dragging { border: 1px dashed var(--brand, #8b5cf6); }

/* Dokunmatik cihazlarda kanal aksiyonları her zaman görünür */
@media (hover: none) {
  .channel-item .channel-action-icon { opacity: 1 !important; }
  .channel-item .drag-grip { opacity: 1; }
}

/* ===== Mesaj ekleri: taşmayı önle ===== */
.message-attachment-box { max-width: 100%; min-width: 0; }
.message-attachment-box audio { width: min(100%, 360px); max-width: 100%; display: block; }
.message-attachment-box video, .message-attachment-img { max-width: 100%; height: auto; }
.message-content-box { min-width: 0; max-width: 100%; }

/* ===================== GİRİŞ / KAYIT: AYRIK PANEL ===================== */
.auth-wrapper { padding: 0 !important; align-items: stretch !important; }
.auth-wrapper > .auth-brand { display: flex; }
.auth-brand {
  position: relative; overflow: hidden;
  flex: 0 0 33.333%; max-width: 33.333%;
  min-height: 100vh;
  background: linear-gradient(160deg, #0b2016 0%, #0d1a13 55%, #07100b 100%);
  border-right: 1px solid rgba(110,231,160,0.12);
  color: #e8f5ec;
  display: flex; align-items: center;
}
.auth-brand-bg { position: absolute; inset: 0; pointer-events: none; }
.auth-brand-bg .orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; animation: authFloat 14s ease-in-out infinite; }
.auth-brand-bg .o1 { width: 260px; height: 260px; background: #23a55a; top: -60px; left: -80px; }
.auth-brand-bg .o2 { width: 200px; height: 200px; background: #0ea5e9; bottom: 10%; right: -90px; animation-delay: -5s; opacity: .35; }
.auth-brand-bg .o3 { width: 140px; height: 140px; background: #facc15; bottom: -40px; left: 30%; animation-delay: -9s; opacity: .18; }
.auth-brand-bg .grid-lines {
  position: absolute; inset: 0; opacity: .08;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 44px 44px;
}
@keyframes authFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-24px); } }
.auth-brand-inner { position: relative; padding: 48px 44px; max-width: 480px; }
.kz-mark svg { width: 52px; height: 52px; display: block; filter: drop-shadow(0 8px 20px rgba(35,165,90,.45)); }
.auth-brand-kicker { margin-top: 18px; font-size: 12px; letter-spacing: .32em; font-weight: 700; color: #6ee7a0; }
.auth-brand-title { margin: 10px 0 14px; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.auth-brand-text { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: rgba(232,245,236,.72); }
.auth-brand-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-brand-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(232,245,236,.85); }
.auth-brand-points .pt-ic { width: 18px; height: 18px; flex: 0 0 18px; color: #6ee7a0; }

.auth-panel {
  flex: 1 1 66.666%; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; background: radial-gradient(circle at 70% 20%, #143522 0%, #111214 70%);
}
.auth-panel .auth-card { max-width: 440px; background: rgba(30,31,34,.92); backdrop-filter: blur(6px); }
.auth-card-clean { box-shadow: 0 24px 60px rgba(0,0,0,.45) !important; }

@media (max-width: 760px) {
  .auth-wrapper { flex-direction: column; overflow-y: auto; }
  .auth-brand { flex: 0 0 auto; max-width: none; min-height: 0; border-right: 0; border-bottom: 1px solid rgba(110,231,160,.12); }
  .auth-brand-inner { padding: 22px 20px; }
  .auth-brand-kicker { margin-top: 10px; }
  .auth-brand-title { font-size: 22px; margin: 6px 0 0; }
  .auth-brand-text, .auth-brand-points { display: none; }
  .auth-panel { flex: 1 0 auto; min-height: 0; padding: 22px 16px; }
  .auth-panel .auth-card { padding: 24px 20px; }
}

/* ===================== KUZEN PREMIUM ===================== */
.premium-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: middle;
  color: #facc15; filter: drop-shadow(0 0 4px rgba(250,204,21,.45));
}
.premium-badge svg { width: 14px; height: 14px; }
.premium-rail-btn { color: #facc15 !important; }
.premium-rail-btn svg { width: 22px; height: 22px; }
.premium-dialog { max-width: 460px; width: 100%; padding: 0 !important; overflow: hidden; }
.premium-hero {
  padding: 30px 24px 22px; text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(250,204,21,.22), transparent 65%), linear-gradient(160deg,#1f2a1f,#14181a);
}
.premium-crown svg { width: 44px; height: 44px; color: #facc15; filter: drop-shadow(0 6px 18px rgba(250,204,21,.4)); }
.premium-title { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.premium-sub { margin-top: 4px; font-size: 13px; color: var(--text-muted, #aab); }
.premium-perks { list-style: none; margin: 0; padding: 16px 24px; display: grid; gap: 14px; }
.premium-perks li { display: flex; gap: 12px; align-items: flex-start; }
.premium-perks b { display: block; font-size: 14px; }
.premium-perks span { font-size: 13px; color: var(--text-muted, #aab); }
.perk-ic { width: 20px; height: 20px; flex: 0 0 20px; color: #facc15; margin-top: 2px; }
.premium-style { padding: 0 24px 8px; display: grid; gap: 8px; }
.premium-color { width: 56px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; }
.premium-save { margin-top: 10px; width: 100%; background: linear-gradient(135deg,#facc15,#f59e0b) !important; color: #1a1300 !important; }
.premium-dialog .kz-dialog-actions { padding: 12px 24px 18px; }