/* ========== Nexus ZG Dark UI v3 (Clean) ========== */
:root{
  --bg-main:#070c14;
  --bg-2:#0d141c;
  --bg-elevated:#0f1722;
  --bg-elevated-soft:#101927;
  --panel:var(--bg-elevated);
  --panel-2:#111b28;
  --elev:#0b141f;
  --stroke:#1c2a3c;
  --stroke-2:#22344a;
  --accent-primary:#6d7bff;
  --accent-secondary:#3ce0c6;
  --text-main:#eaf3ff;
  --text-muted:#9bb0c9;
  --text-danger:#ff99ad;

  --font-xs:12px;
  --font-sm:13px;
  --font-md:14px;
  --font-lg:16px;
  --font-xl:20px;

  --rail-w:76px;
  --left-w:260px;
  --right-w:280px;

  --radius-1:12px;
  --radius-2:16px;
  --radius-lg:14px;
  --radius-xl:20px;

  --shadow-soft:0 14px 38px rgba(0,0,0,.4);
  --shadow-strong:0 26px 80px rgba(0,0,0,.6);
  --shadow-lg:0 12px 28px rgba(0,0,0,.45);
  --shadow-md:0 6px 16px rgba(0,0,0,.35);
  --center-max:1180px;

  /* legacy aliases */
  --bg:var(--bg-main);
  --muted:var(--text-muted);
  --text:var(--text-main);
  --text-dim:#cfdcf0;
  --primary:var(--accent-primary);
  --primary-2:#5566f5;
  --red:var(--text-danger);
  --amber:#f2b94b;
  --green:#26c08a;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  background:radial-gradient(circle at 20% 20%,rgba(88,104,255,.07),transparent 32%), radial-gradient(circle at 80% 0%,rgba(61,221,196,.06),transparent 28%), linear-gradient(180deg, var(--bg-main), var(--bg-2));
  color:var(--text-main);
  font:400 var(--font-md)/1.55 "Space Grotesk","Inter", "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  letter-spacing:0.01em;
}

/* GRID */
#main{
  height:100vh;
  width:100vw;
  display:grid;
  grid-template-rows:1fr;
  grid-auto-rows:1fr;
  align-items:stretch;
  grid-template-columns:var(--rail-w) var(--left-w) 1fr var(--right-w);
  overflow:hidden;
}

#leftRail,
#left,
#center,
#right{
  min-height:100vh;
}

.mobile-sidebar{display:contents;}
.mobile-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:900;
}
.mobile-menu-btn{display:none;}
html.no-scroll{overflow:hidden;}
body.no-scroll{overflow:hidden;}

/* ---------- Rail ---------- */
#leftRail{
  background:linear-gradient(180deg,#0e1622 0%,#0a0f15 100%);
  border-right:1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:12px 8px;
}

/* Sunucu balonlar─▒ */
.badge-round{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  color:#dfe8f8;
  background:#1a2737;
  border:1px solid #23344b;
  font-weight:800;
  letter-spacing:.3px;
  user-select:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  background-size:cover;
  background-position:center;
  position:relative;
}
.badge-round:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.badge-round.selected{
  outline:2px solid var(--primary);
}

/* Friends tu┼şu i├ğin aktif state */
#btnFriends.active{outline:2px solid var(--primary)}

/* Yeni sunucu butonu */
#btnAddGuildRail{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px dashed #2a3a52;
  background:transparent;
  color:#9bb2c9;
  cursor:pointer;
  transition:.15s;
}
#btnAddGuildRail:hover{
  border-color:var(--primary);
  color:var(--primary);
}

/* ---------- Left panel ---------- */
#left{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-right:1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  position:relative;
  min-height:100vh;
}

/* Sunucu ba┼şl─▒k */
#serverTitle{
  padding:8px 12px;
  margin:10px;
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  background:linear-gradient(135deg,rgba(18,26,40,.9),rgba(13,21,34,.92));
  color:#dbe7ff;
  border:1px solid #1c2432;
  border-radius:var(--radius-lg);
  -webkit-appearance:none;
  appearance:none;
  box-shadow:var(--shadow-soft);
}
#serverTitle::after{content:"?";margin-left:auto;color:var(--muted);font-size:12px;}

#currentGuildName{
  padding:0 14px 10px;
  color:#eaf3ff;
  font-weight:900;
  letter-spacing:.04em;
}

/* Kategoriler / kanallar */
#categoryList{
  padding:8px 10px 14px;
  overflow:auto;
}
#categoryList::-webkit-scrollbar{width:10px}
#categoryList::-webkit-scrollbar-thumb{
  background:#1b293a;
  border-radius:10px;
}

.cat{
  margin:10px 4px 18px;
}
.cat-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:6px 8px;
  color:#9fb3c7;
  user-select:none;
}
.cat-title{
  font-size:var(--font-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
}
.cat-actions .mini{
  font-size:12px;
  padding:5px 10px;
  border-radius:10px;
  background:#172238;
  border:1px solid #24354b;
  color:#d7e6f7;
  cursor:pointer;
}
.cat-actions .mini:hover{background:#1a2942}
.category-actions{
  display:flex;
  align-items:center;
  gap:6px;
  opacity:.9;
  transition:opacity .12s ease;
}
.cat-header:hover .category-actions{
  opacity:1;
}
.category-action{
  width:26px;
  height:26px;
  border-radius:999px;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(109,123,255,0.18);
  border:1px solid rgba(109,123,255,0.28);
  color:#fff;
  cursor:pointer;
  transition:
    background .15s ease,
    transform .12s ease,
    box-shadow .12s ease;
}
.category-action:hover{
  background:rgba(109,123,255,0.32);
  transform:scale(1.06);
  box-shadow:0 0 8px rgba(109,123,255,0.35);
}
.category-add-btn{
  background:linear-gradient(135deg,#4f46e5,#6b8dff);
  border:1px solid rgba(95,91,255,0.6);
}
.category-settings-btn{
  background:rgba(109,123,255,0.18);
}
.category-action i{
  font-size:14px;
  pointer-events:none;
}

/* Kanal sat─▒r─▒ */
.channel{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:9px 12px;
  margin:3px 0;
  border-radius:10px;
  cursor:pointer;
  color:#dce8f8;
  background:transparent;
  transition:.16s ease;
}
.channel:hover{background:#172235}
.channel.selected{
  background:#1a2539;
  outline:1px solid #263a54;
}
.channel span{display:flex;align-items:flex-start;gap:8px}
.row-actions{
  opacity:0;
  display:flex;
  gap:6px;
  transition:.12s;
}
.channel:hover .row-actions,
.channel.selected .row-actions{opacity:1}
.btn-icon{
  background:#152034;
  border:1px solid #26374f;
  color:#cfe0f7;
  border-radius:8px;
  padding:4px 6px;
  font-size:12px;
  cursor:pointer;
}
.btn-icon:hover{background:#19263f}

/* ---------- Center (messages) ---------- */
#center{
  background:linear-gradient(180deg,#0b121a,#080f19);
  border-right:1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  height:100vh;
  overflow:hidden;
  padding:0 28px 24px;
}
.center-main{
  width:100%;
  max-width:none;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
.center-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
#center.voice-active{
  padding:0;
}
#center.voice-active .center-main{display:none;}
#center.voice-active #voicePanel{
  display:flex;
  width:100%;
  max-width:var(--center-max);
  height:100%;
  margin:0;
  flex:1;
  align-self:stretch;
}
#center.voice-active #voicePanel .vc-shell{min-height:100%;height:100%;}

/* ---------- Messages ---------- */
#messages,
.messages-list{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  padding:6px 14px 14px;
  max-height:calc(100vh - 220px);
}
#messages::-webkit-scrollbar,
.messages-list::-webkit-scrollbar{width:12px}
#messages::-webkit-scrollbar-thumb,
.messages-list::-webkit-scrollbar-thumb{
  background:#1c2b40;
  border-radius:10px;
}
.message-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 12px;
  border-radius:var(--radius-lg);
  transition:background .14s ease, box-shadow .14s ease;
}
.message-row:hover{
  background:rgba(21,30,45,.6);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.message-row.mine .message-author{color:#9ec5ff;}
.message-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#182337 center/cover no-repeat;
  color:#dce6ff;
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  text-transform:uppercase;
  border:1px solid #24354e;
  box-shadow:inset 0 0 12px rgba(0,0,0,.35);
}
.message-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.message-meta{display:flex;flex-direction:column;gap:0;}
.message-header{
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1;
  margin-bottom:2px;
}
.msg-header{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#7c8190;
}
.msg-author{
  font-weight:800;
  color:#f5f7ff;
  line-height:1;
}
.msg-dot{
  color:#7c8190;
}
.message-pinned-indicator{
  margin-left:6px;
  color:var(--accent-secondary);
  font-size:var(--font-xs);
}
.msg-time{
  font-size:11px;
  color:#7c8190;
  opacity:.7;
  letter-spacing:.02em;
  line-height:1;
}
.message-actions{
  margin-left:auto;
  display:flex;
  gap:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.message-row:hover .message-actions{opacity:1;pointer-events:auto;}
.message-actions button{
  border:1px solid #25354e;
  background:transparent;
  color:#cfd8f4;
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
}
.msg-text{
  white-space:pre-wrap;
}
.mention-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 8px;
  background:#ff206050;
  color:#ffb5c5;
  font-size:12px;
  font-weight:500;
  margin:0 2px;
}
.mention-everyone{
  background:#ff2b5c33;
  color:#ffb5c5;
}
.mention-user{
  background:#2b4cff33;
  color:#c9d8ff;
}
.mention-role{
  background:#7c3aed33;
  color:#d8c4ff;
}
.message-pin-action{
  border-color:rgba(255,255,255, .2);
  background:rgba(24,37,60,.6);
  position:relative;
  font-size:12px;
}
.message-pin-action:hover{
  background:rgba(255,255,255,.08);
}
.message-pin-action[data-pinned="1"]{
  color:var(--accent-secondary);
  border-color:var(--accent-secondary);
}
.message-actions .danger{
  color:#ffccd8;
  border-color:#4a2230;
}
.message-content,
.msg-content{
  margin:0;
  padding:0;
  white-space:pre-wrap;
  word-break:break-word;
  color:#dfe7ff;
  font-size:var(--font-md);
  line-height:1.2;
}
.message-content p,
.message-content div,
.msg-content p,
.msg-content div{
  margin:0;
  padding:0;
}
.message-edited{
  color:var(--text-muted);
  font-size:var(--font-xs);
}

/* FEATURE: pinned messages */
.pinned-messages{
  width:100%;
  background:var(--bg-elevated-soft);
  border:1px solid #162233;
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pinned-messages.hidden{display:none;}
.pinned-messages-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.pinned-count{
  font-size:11px;
  letter-spacing:.08em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
}
.pinned-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pinned-item{
  background:linear-gradient(180deg,rgba(15,24,36,.85),rgba(7,11,19,.95));
  border:1px solid rgba(35,52,77,.6);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pinned-item-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#dfe7ff;
}
.pinned-item-author{
  font-weight:600;
}
.pinned-item-time{
  font-size:10px;
  color:var(--text-muted);
}
.pinned-item-content{
  font-size:13px;
  color:#e2e8ff;
  word-break:break-word;
}
.pinned-item-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--text-muted);
}
.pinned-item-action{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  padding:4px 10px;
  font-size:11px;
  cursor:pointer;
  color:#f5f7ff;
}
.pinned-item-action:hover{
  background:rgba(255,255,255,.08);
}

.msg-edit-container{
  margin-top:6px;
  padding:10px;
  border-radius:12px;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.28);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msg-edit-textarea{
  width:100%;
  min-height:60px;
  resize:vertical;
  background:rgba(11,17,27,.9);
  border:1px solid rgba(148,163,184,.3);
  border-radius:10px;
  color:#e5e7eb;
  padding:10px 12px;
  font-size:var(--font-md);
  line-height:1.45;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.msg-edit-textarea:focus{
  border-color:#6366f1;
  box-shadow:0 0 0 2px rgba(99,102,241,.25);
}
.msg-edit-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.btn-edit-save,
.btn-edit-cancel{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn-edit-save{
  background:linear-gradient(135deg,var(--accent-primary),#7b8aff);
  color:#0b1220;
  border-color:var(--accent-primary);
  box-shadow:0 10px 20px rgba(88,101,242,.25);
}
.btn-edit-save:hover{transform:translateY(-1px);opacity:.95;}
.btn-edit-cancel{
  background:transparent;
  color:#dbe7ff;
  border-color:#2a3d5b;
}
.btn-edit-cancel:hover{transform:translateY(-1px);opacity:.85;}

/* Composer */
#composer{
  position:sticky;
  bottom:0;
  z-index:5;
  padding:14px 0 6px;
  background:linear-gradient(180deg, transparent, rgba(8,12,18,.9) 35%, rgba(8,12,18,.96));
  display:flex;
  gap:10px;
  align-items:flex-start;
}
#composer .wrap{
  flex:1;
  background:var(--bg-elevated-soft);
  border:1px solid #253750;
  border-radius:var(--radius-xl);
  display:flex;
  align-items:flex-start;
  padding:10px 12px;
  box-shadow:var(--shadow-soft);
}
#msgBox{
  flex:1;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text-main);
  padding:8px 6px;
  font-size:var(--font-md);
}
#sendBtn{
  min-width:110px;
  padding:12px 16px;
  border:0;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--accent-primary),#7b8aff);
  color:white;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background .16s ease;
  box-shadow:0 10px 24px rgba(88,101,242,.3);
}
#sendBtn:hover{background:var(--primary-2)}

#voicePanel{
  margin:14px 0 10px;
  padding:0;
  border:1px solid #1f2f46;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(24,35,58,.78), rgba(10,15,21,.95));
  box-shadow:var(--shadow-strong),0 0 0 1px rgba(95,110,255,.08);
  position:relative;
  flex:1;
  width:100%;
  max-width:var(--center-max);
  align-self:stretch;
}
#voicePanel .vc-shell{
  position:relative;
  min-height:clamp(520px, 70vh, 840px);
  width:100%;
  background:
    radial-gradient(circle at 16% 20%, rgba(88,101,242,.16), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(45,212,191,.14), transparent 30%),
    linear-gradient(150deg,#0d1729 0%,#0b1324 100%);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 0 0 1px rgba(95,110,255,.16),0 25px 60px rgba(0,0,0,.55),0 0 40px rgba(94,234,212,.12);
  animation:roomPulse 12s ease-in-out infinite alternate;
}
#voicePanel .vc-shell::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:24px;
  background:conic-gradient(from 160deg, rgba(94,240,209,.22), rgba(88,101,242,.18), rgba(94,240,209,.22));
  opacity:.35;
  filter:blur(16px);
  pointer-events:none;
  z-index:0;
  animation:slowSweep 14s linear infinite;
}
#voicePanel .vc-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  opacity:.18;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
}
.vc-particles{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;}
.vc-particles span{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(96,165,250,.18);
  box-shadow:0 0 12px rgba(94,234,212,.25);
  animation:particleFloat 12s ease-in-out infinite;
  opacity:.4;
  filter:blur(.2px);
}
@keyframes particleFloat{
  0%{transform:translate3d(0,0,0) scale(.8); opacity:.15;}
  50%{transform:translate3d(10px,-18px,0) scale(1.1); opacity:.4;}
  100%{transform:translate3d(-12px,12px,0) scale(.9); opacity:.18;}
}
@keyframes roomPulse{0%{box-shadow:0 0 0 1px rgba(95,110,255,.18),0 25px 60px rgba(0,0,0,.55),0 0 60px rgba(94,234,212,.08);}100%{box-shadow:0 0 0 1px rgba(88,101,242,.24),0 25px 70px rgba(0,0,0,.6),0 0 70px rgba(94,234,212,.14);}}
@keyframes slowSweep{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.vc-header{
  position:relative;
  z-index:2;
  padding:16px 18px;
  border-bottom:1px solid #1e2b40;
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(120deg,rgba(12,20,34,.95),rgba(10,18,32,.9));
}
.vc-title{
  position:relative;
  font-weight:800;
  letter-spacing:.3px;
  padding-bottom:6px;
  font-size:var(--font-lg);
}
.vc-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:3px;
  width:100%;
  background:linear-gradient(90deg,#68d6ff 0%,#9f7aea 50%,#5ef0d1 100%);
  border-radius:999px;
  transform-origin:left;
  animation:underlineGlow 2.8s ease-in-out infinite alternate;
}
@keyframes underlineGlow{
  0%{transform:scaleX(.35); opacity:.7; filter:drop-shadow(0 0 8px rgba(104,214,255,.28));}
  100%{transform:scaleX(1); opacity:1;}
}
.vc-head-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.vc-count{
  color:#d7e6ff;font-size:13px;padding:6px 12px;border-radius:14px;
  background:linear-gradient(120deg,#14233b,#0f1b2f);border:1px solid #233752;
  box-shadow:0 8px 20px rgba(0,0,0,.35),0 0 12px rgba(94,234,212,.18);
}
.vc-wave{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:22px;
  width:52px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .28s ease, transform .28s ease;
}
.vc-wave.active{opacity:1;transform:translateY(0);}
.vc-wave span{
  flex:1;
  background:linear-gradient(180deg,#5ef0d1,#2dd4bf);
  border-radius:999px;
  height:22%;
  animation:headerWave 1.1s ease-in-out infinite;
}
.vc-wave:not(.active) span{animation-play-state:paused;height:14%;opacity:.4;}
.vc-wave span:nth-child(2){animation-delay:.12s;}
.vc-wave span:nth-child(3){animation-delay:.24s;}
.vc-wave span:nth-child(4){animation-delay:.36s;}
@keyframes headerWave{
  0%,100%{height:22%;opacity:.7;}
  50%{height:100%;opacity:1;}
}
.vc-actions{display:flex;gap:10px;}
.vc-main{
  position:relative;
  z-index:2;
  flex:1;
  padding:18px 18px 130px;
  overflow:auto;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  justify-items:start;
  align-content:start;
  transition:grid-template-columns .3s ease, gap .3s ease;
}
.vc-main.solo{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  justify-items:start;
}
/* Tablet layout */
@media (max-width:1023px) and (min-width:768px){
  #center{
    padding:0 12px 16px;
  }

  #voicePanel{
    margin:10px 0;
    width:100%;
    max-width:var(--center-max);
    align-self:stretch;
  }

  .vc-head-right{
    gap:8px;
  }

  .vc-main{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }

  /* Sağdaki üye paneli: tablette sağdan kayan sheet */
  #right{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:280px;
    max-width:80vw;
    background:#0b121c;
    border-left:1px solid #1d2a3f;
    box-shadow:-10px 0 30px rgba(0,0,0,.35);
    transform:translateX(110%);
    transition:transform .2s ease;
    z-index:30;
    display:block !important;
  }

  #memberList{
    padding:14px 12px;
    height:100%;
    overflow-y:auto;
  }

  body.show-members #right{
    transform:translateX(0);
  }

  .tablet-only{
    display:inline-flex;
  }
}
/* Mobile layout */
@media (max-width:768px){
  html, body{
    overflow:auto;
  }

  :root{
    --rail-w:0px;
    --left-w:0px;
    --right-w:0px;
  }

  #main{
    display:block;
    width:100vw;
    min-height:100vh;
    height:auto;
  }

  .mobile-menu-btn{
    display:block;
    position:fixed;
    top:12px;
    left:14px;
    font-size:26px;
    color:#ffffff;
    z-index:1100;
    cursor:pointer;
  }

  .mobile-backdrop{
    display:block;
  }

  .mobile-backdrop.show,
  body.mobile-sidebar-open .mobile-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  #mobileSidebar{
    display:none;
  }

  #mobileSidebar.open,
  #mobileSidebar.mobile-sidebar-open,
  body.mobile-sidebar-open #mobileSidebar{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px 12px 16px;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:clamp(260px, 80vw, 340px);
    max-width:100vw;
    background:#050914;
    box-shadow:0 0 30px rgba(0,0,0,0.6);
    border-right:1px solid #0f172a;
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    overflow-y:auto;
    z-index:1000;
  }

  #mobileSidebarBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:900;
  }

  #mobileSidebarBackdrop.show,
  body.mobile-sidebar-open #mobileSidebarBackdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.mobile-sidebar-open{
    overflow:hidden;
  }

  #leftRail{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:calc(100% - 24px);
    min-width:0;
    min-height:0;
    height:86px;
    margin:0 12px 12px;
    padding:10px 8px;
    background:linear-gradient(180deg,#0e1622 0%,#0a0f15 100%);
    border:1px solid #101a2b;
    border-radius:12px;
    overflow-x:auto;
    box-shadow:var(--shadow-md);
  }

  #left{
    display:none;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:clamp(260px, 80vw, 340px);
    max-width:100vw;
    flex:1;
    min-height:0;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border:1px solid #101a2b;
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transform:translateX(-105%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .35s ease, opacity .35s ease, visibility .2s ease;
    z-index:1000;
  }

  #left.mobile-sidebar-open,
  #left.open,
  body.mobile-sidebar-open #left{
    display:flex;
    flex-direction:column;
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  #categoryList{
    max-height:calc(100vh - 180px);
    padding:8px 10px 120px;
    overflow-y:auto;
  }

  #profileFooter{
    position:sticky;
    bottom:0;
    left:0;
    right:0;
    margin:0 8px 8px;
  }

  #center,
  .center-main,
  .center-body{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  #center{
    padding:12px 12px 18px;
    min-height:100vh;
    grid-column:1 / -1;
  }

  #centerHeader{
    width:100% !important;
    margin:0 !important;
  }

  #centerEmpty,
  #messages,
  #voicePanel,
  .messages-list{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    border-radius:0.75rem;
  }

  #centerEmpty{
    padding:20px 16px;
    margin-top:10px;
  }

  #mobileMembersBtn{
    display:none;
    width:calc(100% - 20px);
    margin:8px 10px 6px;
    padding:12px 14px;
    align-self:flex-start;
    border-radius:16px;
    border:1px solid rgba(109,123,255,.38);
    background:linear-gradient(135deg,rgba(109,123,255,.18),rgba(60,224,198,.16));
    color:#eaf2ff;
    font-weight:800;
    letter-spacing:.02em;
    gap:12px;
    justify-content:flex-start;
    align-items:center;
    box-shadow:0 12px 26px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04);
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  }

  #mobileMembersBtn .mm-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(145deg,#1f2940,#111827);
    border:1px solid #2b3d5a;
    position:relative;
    display:grid;
    place-items:center;
    box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 0 10px rgba(109,123,255,.12);
  }

  #mobileMembersBtn .mm-icon::before,
  #mobileMembersBtn .mm-icon::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:linear-gradient(135deg,#6d7bff,#3ce0c6);
    box-shadow:0 0 10px rgba(109,123,255,.28);
  }

  #mobileMembersBtn .mm-icon::before{
    width:16px;
    height:16px;
    left:6px;
    top:8px;
  }

  #mobileMembersBtn .mm-icon::after{
    width:14px;
    height:14px;
    right:6px;
    bottom:8px;
    opacity:.8;
  }

  #mobileMembersBtn .mm-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
    align-items:flex-start;
  }

  #mobileMembersBtn .mm-title{
    font-weight:900;
    font-size:var(--font-md);
  }

  #mobileMembersBtn .mm-sub{
    font-size:12px;
    color:var(--text-muted);
    letter-spacing:.01em;
  }

  #mobileMembersBtn::after{
    content:"";
    margin-left:auto;
    width:34px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(109,123,255,.8),rgba(60,224,198,.75));
    opacity:.9;
  }

  #mobileMembersBtn.active{
    background:linear-gradient(135deg,rgba(60,224,198,.22),rgba(109,123,255,.26));
    border-color:rgba(60,224,198,.55);
    box-shadow:0 14px 28px rgba(60,224,198,.22),0 0 0 1px rgba(109,123,255,.18);
  }

  #mobileMembersBtn:active{
    transform:translateY(1px);
    box-shadow:0 10px 20px rgba(0,0,0,.28);
  }

  /* MOBİL ÜYE PANELİ: sağdan kayan sheet */
  #right{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:280px;
    max-width:80vw;
    background:#0b121c;
    border-left:1px solid #1d2a3f;
    box-shadow:-10px 0 30px rgba(0,0,0,.35);
    transform:translateX(110%);
    transition:transform .2s ease;
    z-index:30;
    display:block !important;
  }

  #memberList{
    padding:14px 12px;
    height:100%;
    overflow-y:auto;
  }

  body.show-members #right{
    transform:translateX(0);
  }

  .messages-list,
  #messages{
    padding:12px 10px !important;
  }

  .message-item,
  .message-row{
    max-width:100% !important;
    word-break:break-word;
  }

  .message-input-row,
  #messageInput,
  #composer,
  #composer .wrap,
  #msgBox{
    width:100% !important;
  }

  #composer{
    padding:12px 10px;
  }

  .mobile-only{
    display:inline-flex;
  }

  .tablet-only{
    display:inline-flex;
  }
}
.user-card{
  background:linear-gradient(150deg,rgba(16,28,49,.94) 0%,rgba(12,21,39,.98) 100%);
  border:1px solid #1e2b40;
  border-radius:var(--radius-lg);
  padding:12px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,opacity .22s ease, background-position 1.4s ease;
  box-shadow:0 10px 22px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  background-size:180% 180%;
  max-width:160px;
}
.user-card:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 28px rgba(0,0,0,.58),0 0 0 1px rgba(94,240,209,.18);
  border-color:#36517c;
}
.user-card.speaking{
  border-color:rgba(52,211,153,.75);
  box-shadow:0 0 0 2px rgba(52,211,153,.24),0 12px 26px rgba(0,0,0,.6);
  background-image:linear-gradient(120deg,rgba(52,211,153,.08),rgba(88,101,242,.08));
  animation:speakGradient 3.2s ease-in-out infinite;
}
.user-card.quiet{filter:saturate(.6);opacity:.78;}
.user-card.joining{animation:cardPop .45s ease;}
.user-card.leaving{animation:cardLeave .28s ease forwards;}
.user-card.dimmed{opacity:.32;filter:saturate(.45);}
.user-card.self{box-shadow:0 0 0 1px rgba(88,101,242,.4),0 10px 22px rgba(0,0,0,.5);}
@keyframes speakGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.vc-main.solo .user-card,
.user-card.solo-card{
  width:100%;
  max-width:170px;
}
.user-card.solo-card{
  transform:scale(1.01);
}
@keyframes cardPop{0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(94,240,209,.2);}60%{transform:scale(1.03);}100%{transform:scale(1);}}
@keyframes cardLeave{to{opacity:0;transform:translateY(6px) scale(.94);}}
.avatar{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,#1e293b,#0d1626);
  border:1px solid #1f2d44;display:grid;place-items:center;font-weight:800;color:#e8f0ff;
  position:relative;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.35),0 0 12px rgba(94,234,212,.12);
}
.avatar .crown-icon{
  position:absolute;
  top:-6px;
  left:-6px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(245,209,66,.65));
}
.avatar .crown-icon svg{width:14px;height:14px;}
.avatar::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 42%),radial-gradient(circle at 70% 40%,rgba(255,255,255,.08),transparent 40%);
  opacity:.7;mix-blend-mode:screen;
}
.avatar.speaking{
  box-shadow:0 0 0 2px rgba(52,211,153,.35),0 0 0 10px rgba(52,211,153,.08),inset 0 0 0 1px rgba(94,240,209,.3);
}
.status-dot{position:absolute;width:11px;height:11px;border-radius:50%;border:2px solid #0d1423;bottom:-2px;right:-2px;box-shadow:0 0 0 4px rgba(0,0,0,.25);}
.status-online{background:#22c55e;}
.status-idle{background:#facc15;}
.status-dnd{background:#f43f5e;}
.status-offline{background:#94a3b8;}
.avatar.speaking::after{
  content:"";
  position:absolute;inset:-6px;border-radius:20px;
  border:2px solid rgba(52,211,153,.7);
  animation:ringPulse 1.4s ease-in-out infinite;
}
@keyframes ringPulse{0%{transform:scale(.92);opacity:.8;}100%{transform:scale(1.15);opacity:0;}}
.u-meta{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;}
.u-name{font-weight:800;font-size:var(--font-sm);letter-spacing:.12px;text-align:center;color:var(--text-main);}
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:10px;
  font-size:10px;color:#e9f4ff;
  background:linear-gradient(120deg,rgba(93,116,255,.32),rgba(20,232,181,.25));
  border:1px solid rgba(99,102,241,.35);
  box-shadow:0 6px 14px rgba(0,0,0,.25),0 0 0 1px rgba(20,232,181,.06);
  width:fit-content;
}
.badge.owner{background:linear-gradient(120deg,rgba(245,181,59,.3),rgba(245,209,66,.22));border-color:rgba(245,209,66,.6);box-shadow:0 0 12px rgba(245,209,66,.35);}
.badge.admin{background:linear-gradient(120deg,rgba(124,58,237,.28),rgba(99,102,241,.22));border-color:rgba(124,58,237,.6);}
.badge.mod{background:linear-gradient(120deg,rgba(34,211,238,.2),rgba(45,212,191,.16));border-color:rgba(45,212,191,.5);}
.badge.member{background:linear-gradient(120deg,rgba(148,163,184,.16),rgba(96,125,164,.16));border-color:rgba(107,114,128,.4);color:#e3e9f5;}
.badge .badge-icon{
  width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
}
.u-flags{display:flex;align-items:center;gap:6px;color:#9db5d8;}
.u-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:8px;
  background:#121c2d;border:1px solid #1f2e44;color:#cbd7f5;
  box-shadow:inset 0 0 12px rgba(0,0,0,.25);
}
.u-flag svg{width:12px;height:12px;fill:currentColor;}
.u-flag.muted{color:#f87171;border-color:rgba(244,113,113,.6);background:rgba(60,16,24,.7);}
.u-flag.deaf{color:#fb923c;border-color:rgba(251,146,60,.6);background:rgba(46,27,14,.7);}
.status-pill{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;color:#dfe7ff;border:1px solid #22354d;background:#101b2f;}
.audio-bar{
  position:relative;
  width:100%;
  height:8px;
  margin-top:6px;
  background:linear-gradient(180deg,rgba(14,24,39,.9),rgba(8,14,23,.85));
  border:1px solid #1f314a;
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}
.audio-bar span{
  position:absolute;left:2px;right:2px;bottom:2px;
  height:50%;background:linear-gradient(90deg,#5ef0d1,#5eb1ff);
  border-radius:999px;
  transition:height .35s ease,opacity .25s ease, box-shadow .25s ease;
}
.vc-main.muted-mode .audio-bar span{opacity:.45;filter:saturate(.65);height:35%;}
.vc-main.muted-mode .avatar.speaking::after{opacity:.45;}
.user-card.quiet .audio-bar span{opacity:.4;filter:saturate(.5);height:40%;}
.vd-empty{
  grid-column:1/-1;
  text-align:center;
  padding:80px 20px;
  color:#9db5d8;
  background:linear-gradient(120deg,rgba(20,32,52,.6),rgba(14,22,36,.5));
  border:1px dashed #22354d;
  border-radius:14px;
  box-shadow:inset 0 0 14px rgba(0,0,0,.35);
}
.vc-footer{
  position:sticky;bottom:0;padding:12px 16px;background:#0c1424e6;border-top:1px solid #1e2b40;
  backdrop-filter:blur(10px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;z-index:3;
  box-shadow:0 -10px 24px rgba(0,0,0,.35);
}
.vc-status{color:#a9b6d4;font-size:13px;flex:1 1 220px;}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;}
.ctrl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--radius-lg);
  border:1px solid #1e2b40;background:linear-gradient(135deg,#142035,#0f1829);
  color:#e8f0ff;cursor:pointer;font-weight:700;flex:1 1 150px;
  transition:all .18s ease;position:relative;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.38);
  min-height:48px;
}
.ctrl-btn:hover{border-color:#3b4f73;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(94,234,212,.2),0 12px 26px rgba(0,0,0,.45);}
.ctrl-btn:active{transform:translateY(0);}
.ctrl-btn.primary{background:linear-gradient(135deg,var(--accent-primary),#6ae0f0);border-color:#6bb5ff;color:#0b1220;}
.ctrl-btn.danger{background:linear-gradient(135deg,rgba(244,63,94,.2),rgba(244,63,94,.35));border-color:rgba(244,63,94,.6);color:#fecdd3;}
.ctrl-btn.muted{background:#1f2937;color:#cbd5e1;}
.ctrl-btn.alert{box-shadow:0 0 18px rgba(244,63,94,.35);}
.ctrl-btn .tip{
  position:absolute;bottom:110%;left:50%;transform:translateX(-50%);
  background:#0f172a;padding:4px 8px;border-radius:6px;border:1px solid #1f2d44;
  font-size:11px;color:#a9b6d4;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.ctrl-btn:hover .tip{opacity:1;}
.ctrl-btn .ripple,.icon-btn .ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple .6s linear;
  background:rgba(99,102,241,.25);
  pointer-events:none;
  inset:auto;
}
@keyframes ripple{to{transform:scale(2.4);opacity:0;}}
.conn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#a9b6d4;}
.conn .dot{width:10px;height:10px;border-radius:50%;background:#34d399;box-shadow:0 0 0 6px rgba(52,211,153,.12);transition:background .2s ease,box-shadow .2s ease;position:relative;overflow:visible;}
.conn .dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:.35;
  animation:pingPulse 2.4s ease-out infinite;
}
.conn.ping-bad .dot::after{animation-duration:1.4s;}
.conn.ping-warn .dot::after{animation-duration:1.8s;}
.conn.ping-good .dot::after{animation-duration:2.4s;}
.conn .dot.pulse{
  animation:dotFlash .4s ease;
}
.conn .dot.pulse::after{animation-play-state:running;}
.conn.ping-good .dot{background:#34d399;box-shadow:0 0 0 6px rgba(52,211,153,.12);}
.conn.ping-warn .dot{background:#facc15;box-shadow:0 0 0 6px rgba(250,204,21,.12);}
.conn.ping-bad .dot{background:#f43f5e;box-shadow:0 0 0 6px rgba(244,63,94,.12);}
.conn .dot.pulse{filter:drop-shadow(0 0 8px currentColor);}
@keyframes pingPulse{0%{transform:scale(.6);opacity:.6;}80%{transform:scale(1.4);opacity:0;}100%{opacity:0;transform:scale(1.6);}}
@keyframes dotFlash{0%{transform:scale(1);}50%{transform:scale(1.25);}100%{transform:scale(1);}}
.modal.vd-modal{
  position:fixed;left:50%;bottom:90px;transform:translate(-50%,6px) scale(.94);
  background:linear-gradient(145deg,rgba(15,25,43,.95),rgba(9,15,26,.96));
  border:1px solid #1e2b40;border-radius:16px;padding:0;
  width:min(380px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(94,234,212,.08);display:none;z-index:1200;
  backdrop-filter:blur(18px);opacity:0;transition:transform .2s ease,opacity .2s ease;
}
.modal.vd-modal.show{display:block;opacity:1;transform:translate(-50%,0) scale(1);}
.vd-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #1f2e44;
  cursor:grab;
  user-select:none;
  background:linear-gradient(120deg,rgba(15,25,43,.9),rgba(10,18,32,.9));
}
.vd-modal-title{font-weight:800;letter-spacing:.2px;}
.vd-modal-body{padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;}
.vd-field{display:flex;flex-direction:column;gap:6px;margin-bottom:0;color:#a9b6d4;font-size:13px;}
.vd-field select,.vd-field input[type=range]{
  width:100%;background:#0d1628;border:1px solid #1e2b40;border-radius:10px;color:#e8f0ff;padding:8px 10px;outline:none;
  box-shadow:inset 0 0 10px rgba(0,0,0,.35);
}
.vd-wave-preview{
  height:44px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:10px;
  border-radius:12px;
  background:linear-gradient(120deg,rgba(18,32,53,.8),rgba(12,22,37,.9));
  border:1px solid #1f2e44;
}
.vd-wave-preview span{
  flex:1;
  height:16%;
  background:linear-gradient(180deg,#67e8f9,#5eead4);
  border-radius:999px;
  transition:height .18s ease,opacity .18s ease;
}
.vd-modal-actions{display:flex;justify-content: flex-start;gap:8px;margin:0;padding:12px 14px 14px;}
.vd-modal .ctrl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--radius-lg);
  border:1px solid #1e2b40;background:linear-gradient(135deg,#142035,#0f1829);
  color:#e8f0ff;cursor:pointer;font-weight:700;flex:1 1 150px;
  transition:all .18s ease;position:relative;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.38);
  min-height:48px;
}

@media (max-width: 720px){
  .vc-main{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding-bottom:150px;}
  .vc-head-right{flex-wrap:wrap;justify-content: flex-start;}
  .vc-footer{flex-direction:column;align-items:flex-start;}
  .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;}
  .ctrl-btn{flex:1 1 45%;justify-content:center;}
  .conn{margin-left:0;}
}

.voice-peer.off .dot{background:#64748b;}
.voice-peer.muted .dot{background:#f97316;}
#voiceAudioNodes{display:none;}

/* Voice controls in profile footer */
#voiceFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex:1;
  min-width:0;
}
#voiceFooterPeers{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
  color:#c7d7f4;
  font-size:12px;
}
.voice-footer-actions{
  display:flex;
  gap:6px;
}
.voice-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #24344c;
  background:#0f1b2c;
  color:#c7d7f4;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.12s;
}
.voice-leave{
  border-radius:10px;
  border:1px solid #4b1f2f;
  background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(244,63,94,.3));
  color:#ffd7de;
  padding:8px 12px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  transition:.2s ease all;
}
.voice-leave.disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.voice-footer{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}
.field-help{
  font-size:12px;
  color:#9fb2d4;
  margin-top:4px;
}
.voice-icon.off{
  background:#2b0f16;
  border-color:#7f1d1d;
  color:#f87171;
}
.vp-footer-chip{
  padding:4px 8px;
  border-radius:10px;
  background:#102038;
  border:1px solid #1f2f46;
  color:#c7d7f4;
  font-size:11px;
}
.vp-footer-chip.more{
  background:#1f2937;
  border-color:#334155;
}
.vp-footer-muted{
  color:#7a8aa5;
  font-size:12px;
}

.role-list{
  max-height:180px;
  overflow:auto;
  border:1px solid #1f2e44;
  border-radius:10px;
  padding:8px;
  background:#0f1927;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.role-list label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#dce6f8;
  font-size:13px;
  margin:0;
}
.role-list input[type=checkbox]{width:16px;height:16px;}

/* ---------- Right (members) ---------- */
#right{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  display:flex;
  flex-direction:column;
}

/* Üye listesi container */
#memberList{padding:14px 12px;overflow:auto;}

.member-section-title{
  font-size:13px;
  color:#eaf3ff;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:12px 0 6px 12px;
  font-weight:900;
}

#memberList::-webkit-scrollbar{width:10px}
#memberList::-webkit-scrollbar-thumb{
  background:#1c2b40;
  border-radius:10px;
}

/* Yeni ├╝ye sat─▒r─▒ (member-row) */
.member-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px 12px 60px;
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  color:#e3eefc;
  background:linear-gradient(135deg,rgba(20,28,42,.7),rgba(12,18,30,.65));
  border:1px solid transparent;
}
.member-row:hover{background:rgba(22,35,58,.82);border-color:#24364d;box-shadow:0 12px 26px rgba(0,0,0,.28);transform:translateY(-1px);}
.member-row .dot{position:absolute;left:46px;bottom:12px;width:10px;height:10px;border-radius:50%;border:2px solid #0c1424;box-shadow:0 0 0 6px rgba(0,0,0,.18);}

/* Avatar (k├╝├ğ├╝k) */
.avatar.small{
  position:absolute;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#203042 center/cover no-repeat;
  overflow:hidden;
  border:1px solid #263a54;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  left:14px;
  top:50%;
  transform:translateY(-50%);
}

/* ─░sim */
.member-name{font-size:var(--font-sm);color:#d8e6ff;font-weight:700;letter-spacing:.2px;transition:color .2s ease,text-shadow .2s ease;}
.member-name{display:inline-flex;align-items:center;gap:6px;}
.member-name.role-owner{color:#f5d142;text-shadow:0 0 10px rgba(245,209,66,.35);}
.member-name.role-admin{color:#c47aff;text-shadow:0 0 10px rgba(196,122,255,.28);}
.member-name.role-mod{color:#42e0c4;text-shadow:0 0 10px rgba(66,224,196,.28);}
.member-name.role-member{color:#b8c7e3;}
.member-name .member-crown{
  margin-left:6px;
  font-size:12px;
  color:#fbbf24;
}
.nx-crown{
  margin-left:6px;
  font-size:12px;
  color:#f5d142;
  text-shadow:0 0 10px rgba(245,209,66,.5);
}
.member-roles{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0 60px;align-items:center;}
.role-bubble{
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#1a2536;
  color:#9fb2d4;
  font-size:10px;
  box-shadow:0 0 12px rgba(0,0,0,.35);
}
.role-bubble.role-owner{background:linear-gradient(140deg,#f9e87a,#f5d142);color:#0c0b05;box-shadow:0 0 12px rgba(245,209,66,.55);}
.role-bubble.role-admin{background:linear-gradient(140deg,#c47aff,#7c3aed);color:#0f0b1a;box-shadow:0 0 12px rgba(196,122,255,.45);}
.role-bubble.role-mod{background:linear-gradient(140deg,#42e0c4,#22c55e);color:#012418;box-shadow:0 0 12px rgba(66,224,196,.45);}
.role-bubble.role-member{background:linear-gradient(140deg,#1f2c42,#2c3c5a);color:#d0def7;}
.role-pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:#1f2a3c;
  color:#dfe8ff;
  border:1px solid #24344b;
}
.role-pill.role-owner{background:linear-gradient(140deg,#f9e87a,#f5d142);color:#0c0b05;border-color:rgba(245,209,66,.6);}
.role-pill.role-admin{background:linear-gradient(140deg,#c47aff,#7c3aed);color:#12071f;border-color:rgba(196,122,255,.6);}
.role-pill.role-mod{background:linear-gradient(140deg,#42e0c4,#22c55e);color:#06241b;border-color:rgba(66,224,196,.6);}
.role-pill.role-member{background:linear-gradient(140deg,#1f2c42,#2c3c5a);color:#d0def7;border-color:rgba(52,73,102,.7);}
.nx-role-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:linear-gradient(135deg,rgba(109,123,255,.16),rgba(60,224,198,.16));
  border:1px solid rgba(109,123,255,.35);
  color:#e6ecff;
  box-shadow:0 0 0 1px rgba(88,101,242,.12),0 10px 18px rgba(0,0,0,.32);
}

/* Durum noktas─▒ */
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.dot.online{background:var(--green)}
.dot.away{background:var(--amber)}
.dot.dnd{background:#ff5967}
.dot.offline{background:#425567}

/* Sa─ş alttaki kullan─▒c─▒ kart─▒ */
#userCard{border-top:1px solid var(--stroke);padding:14px;background:var(--bg-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:8px;}
#userCard .np-profile-card{margin-top:0;}
#ucAvatar{width:72px;height:72px;border-radius:14px;background:#1b2a42 center/cover no-repeat;border:1px solid #283c58;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 10px 20px rgba(0,0,0,.32);}
#ucName{font-weight:900;font-size:var(--font-md);}
#ucBio{color:var(--text-muted);margin-top:4px;white-space:pre-wrap;line-height:1.5;}

/* Sa─ş paneldeki profil kart─▒ */
.np-profile-card {
  margin-top: 12px;
  margin-right: 12px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(110, 124, 255, 0.16), transparent 55%),
              rgba(5, 10, 20, 0.95);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.np-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.np-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #20273b, #141824);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.np-profile-name {
  font-weight: 600;
  font-size: 14px;
  color: #f5f6ff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.np-profile-crown {
  font-size: 14px;
}
/* Genel info sat─▒r─▒ */
.np-profile-subtext {
  font-size: 12px;
  color: rgba(200, 205, 230, 0.75);
}
/* Alt b├Âl├╝mler */
.np-profile-section {
  padding-top: 6px;
  border-top: 1px solid rgba(120, 130, 180, 0.18);
  margin-top: 4px;
}
.np-profile-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(160, 170, 210, 0.7);
  margin-bottom: 4px;
}
.np-profile-bio{
  white-space:pre-wrap;
  font-size:12px;
  color:#dfe5ff;
  line-height:1.55;
}
.np-profile-bio.np-profile-roles-empty{
  color:rgba(180,188,220,0.6);
}
.nx-dragging{opacity:.65;}
.nx-drag-over{
  outline:1px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);
}
.np-profile-id {
  font-size: 12px;
  color: #f0f3ff;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Roller alan─▒ */
.np-profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.np-profile-role-pill {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(125, 135, 255, 0.16);
  color: #cfd4ff;
  border: 1px solid rgba(125, 135, 255, 0.32);
}
.np-profile-roles-empty {
  font-size: 12px;
  color: rgba(180, 188, 220, 0.6);
}
/* Rol d├╝zenle butonu */
.np-profile-role-edit {
  margin-top: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(135deg, #5865f2, #7b5cff);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(88, 101, 242, 0.45);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}
.np-profile-role-edit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(88, 101, 242, 0.6);
  filter: brightness(1.05);
}
.np-profile-role-edit:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(88, 101, 242, 0.55);
}


/* ---------- Profil footer (left bottom) ---------- */
#profileFooter{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:linear-gradient(135deg,rgba(15,21,32,.92),rgba(10,15,26,.96));
  border:1px solid #1c2432;
  border-radius:var(--radius-lg);
  cursor:pointer;
  min-height:72px;
  box-shadow:0 -10px 24px rgba(0,0,0,.32);
}
.me-avatar{width:32px;height:32px;border-radius:10px;background:#202b3d center/cover no-repeat;flex:0 0 32px;display:grid;place-items:center;color:#a8c1ff;font-weight:700;font-size:12px;}

/* ---------- Modals ---------- */
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:50;background:rgba(6,10,16,.6);backdrop-filter:blur(12px);}
.modal.show{display:grid}
.modal .card{width:min(540px,92vw);background:linear-gradient(145deg,rgba(15,25,43,.94),rgba(9,15,26,.96));border:1px solid #273b58;border-radius:20px;padding:20px;box-shadow:var(--shadow-strong);}
.modal#modalChannelSettings .card,
.modal#modalNewChannel .card{width:min(420px,92vw);}
.modal .title{font-weight:900;margin-bottom:12px;font-size:var(--font-lg);}
.modal .row{display:flex;gap:8px;margin:8px 0;align-items:center;}
.modal input,
.modal select,
.modal textarea{width:100%;padding:10px 12px;border-radius:14px;border:1px solid #2a3d5c;background:#0d1726;color:#e7f1ff;outline:none;font-size:var(--font-sm);}
.modal input:focus,
.modal select:focus,
.modal textarea:focus{border-color:#35508a;box-shadow:0 0 0 2px rgba(88,101,242,.18);}

/* Butonlar */
.btn{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  border-radius:12px;
  padding:10px 14px;
  border:1px solid transparent;
  font-weight:800;
  cursor:pointer;
}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-2)}
.btn.ghost{
  background:#172238;
  border-color:#2a3d5b;
  color:#d7e6fb;
}
.btn.ghost:hover{background:#1b2946}
.btn.danger{
  background:#3a1520;
  color:#ffd9de;
  border-color:#542434;
}
.btn.danger:hover{background:#4a1a28}

.channel-settings-perms{
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,12,20,.75);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.perm-role-select label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9fb2d4;
  margin-bottom:4px;
}
.perm-role-select select{
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #26344c;
  background:#0c1421;
  color:#e5e9ff;
}
.perm-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.perm-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
}
.perm-label{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.perm-label strong{
  font-size:13px;
}
.perm-desc{
  font-size:11px;
  color:#9db0c8;
  line-height:1.4;
}
.perm-controls{
  display:flex;
  gap:6px;
}
.perm-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,.04);
  color:#dfe7ff;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease;
}
.perm-btn.deny{border-color:#a5303b;}
.perm-btn.neutral{border-color:#4a5872;}
.perm-btn.allow{border-color:#1c4b61;}
.perm-btn.active{
  background:rgba(255,255,255,.12);
}
.perm-btn.deny.active{background:#581928;color:#ffb1be;border-color:#ffb1be;}
.perm-btn.allow.active{background:#1b3c47;color:#8ef2ff;border-color:#5df1ff;}
.perm-btn.neutral.active{background:#2b3252;}
.perm-footer{display:flex;justify-content:flex-end;}

.perm-overrides-simple{
  font-size:13px;
  color:#cfe0ff;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  white-space:pre-wrap;
}

.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 4px;
}

.perm-name {
  font-size: 13px;
  color: #cfd4ff;
}

.perm-controls {
  display: flex;
  gap: 6px;
}

.perm-toggle {
  border: none;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  color: #cfd4ff;
  cursor: pointer;
}

.perm-toggle.active {
  background: #5865f2;
  color: #fff;
}

.perm-empty,
.perm-error {
  font-size: 13px;
  color: #a0a7d8;
  padding: 6px 0;
}


.channel-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.channel-perm-label {
  font-size: 13px;
  color: #e5e7eb;
}

.perm-tristate {
  display: inline-flex;
  align-items: center;
  background: #020617;
  border-radius: 999px;
  border: 1px solid #4b5563;
  overflow: hidden;
}

.perm-tristate-btn {
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.perm-tristate-btn + .perm-tristate-btn {
  border-left: 1px solid #374151;
}

.perm-tristate-btn:hover {
  background: #111827;
}

.perm-tristate-deny.is-active {
  background: #7f1d1d;
  color: #fecaca;
}

.perm-tristate-neutral.is-active {
  background: #111827;
  color: #e5e7eb;
}

.perm-tristate-allow.is-active {
  background: #166534;
  color: #bbf7d0;
}

#mention-suggestions {
  position: absolute;
  bottom: 64px;
  left: 50px;
  background: #0d1117;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  padding: 6px 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 2000;
}

#mention-suggestions.hidden {
  display: none;
}

.mention-suggestion {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  font-size: 13px;
}

.mention-suggestion:hover,
.mention-suggestion.is-active {
  background: #1e2635;
}

.ms-name {
  color: #ffffff;
  font-weight: 500;
}

.ms-meta {
  color: #7c8190;
  font-size: 11px;
}


/* ---------- Unread badge ---------- */
.unread-badge{
  display:inline-block;
  min-width:16px;
  padding:0 6px;
  font-size:11px;
  line-height:18px;
  border-radius:9px;
  background:#d34d4d;
  color:#fff;
  text-align:center;
  margin-left:6px;
}
.guild-unread{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#d34d4d;
  color:#fff;
  font-size:10px;
  line-height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px #0b1220,0 6px 16px rgba(0,0,0,.35);
}

/* ---------- Men?ler (server / plus / profile) ---------- */
.menu,
#serverMenu,
#plusMenu,
#profileFooterMenu{
  position:fixed;
  z-index:99999;
  min-width:220px;
  padding:8px;
  background:rgba(12,18,28,.96);
  border:1px solid #1c2432;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-strong);
  display:none;
  backdrop-filter:blur(12px);
}
#serverMenu .menu-item,
#plusMenu .menu-item,
#profileFooterMenu .menu-item,
.menu .menu-item{
  padding:10px 12px;
  border-radius:10px;
  color:#dbe7ff;
  cursor:pointer;
  font-size:var(--font-sm);
}
#serverMenu .menu-item:hover,
#plusMenu .menu-item:hover,
#profileFooterMenu .menu-item:hover,
.menu .menu-item:hover{
  background:#162233;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.menu .menu-title{
  font-size:12px;
  color:#8fa6bf;
  padding:6px 8px 4px;
}
.menu .menu-sep{
  border:0;
  border-top:1px solid #1c2432;
  margin:6px 4px;
}

/* ---------- Util ---------- */
button{cursor:pointer}
label{display:block;color:#cfe0f6;margin:6px 0 4px}
.hidden{display:none!important}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  :root{--right-w:0px}
  #right{display:none}
}
@media (max-width:980px){
  :root{--left-w:240px}
}

/* Desktop layout reset (>=1024px) */
@media (min-width:1024px){
  :root{
    --rail-w:76px;
    --left-w:260px;
    --right-w:280px;
  }
  #main{
    grid-template-columns:var(--rail-w) var(--left-w) minmax(0,1fr) var(--right-w);
    width:100vw;
    max-width:100vw;
    margin:0;
  }
  #right{
    display:flex;
  }
  .center-main{
    max-width:var(--center-max);
    width:100%;
    margin:0 auto;
  }
  .center-body{
    max-width:var(--center-max);
    width:100%;
    margin:0 auto;
  }

  #centerEmpty,
  .welcome-box{
    max-width:780px;
    margin:40px auto;
    padding:48px 64px;
    height:auto;
  }
}

/* ============ AUTH (login / register) ============ */
.auth-body{
  margin:0;
  min-height:100vh;
  background:#05070b;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;
}
.auth-shell{
  width:100%;
  max-width:480px;
  padding:24px;
}
.auth-card{
  background:#11161d;
  border-radius:18px;
  padding:28px 32px 32px;
  box-shadow:0 18px 40px rgba(0,0,0,.7);
}
.auth-title{
  font-size:24px;
  font-weight:600;
  margin:0 0 6px;
}
.auth-subtitle{
  margin:0 0 20px;
  font-size:13px;
  color:#a3b1c6;
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.auth-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.auth-label{
  font-size:13px;
  color:#c5d0e0;
}
.auth-input{
  background:#05070b;
  border-radius:10px;
  border:1px solid #1e2634;
  padding:8px 10px;
  color:#e4ecff;
  font-size:14px;
}
.auth-input:focus{
  outline:none;
  border-color:#5865f2;
  box-shadow:0 0 0 1px rgba(88,101,242,.5);
}
.auth-hint{
  font-size:11px;
  color:#7d8aa3;
}
.auth-error{
  min-height:18px;
  font-size:12px;
  color:#ff6b6b;
  margin-top:4px;
}
.auth-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.auth-footer{
  margin-top:18px;
  font-size:13px;
  color:#a3b1c6;
}
.auth-footer a{
  color:#fff;
  text-decoration:none;
}
.auth-footer a:hover{text-decoration:underline}

/* ============ FRIENDS PANEL ============ */
.friends-root{
  padding:12px 12px 0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.friends-header{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.friends-title{
  font-size:18px;
  font-weight:600;
}
.friends-subtitle{
  font-size:12px;
  color:#7d8aa3;
}
.friends-toolbar{
  display:flex;
  gap:8px;
}
.pill{
  border-radius:999px;
  border:1px solid #1e2634;
  padding:6px 14px;
  background:#11161d;
  color:#e4ecff;
  font-size:13px;
  cursor:pointer;
}
.pill.primary{
  background:#5865f2;
  border-color:#5865f2;
}
.pill:hover{background:#161d27}
.friends-section{margin-top:4px}
.friends-section-title{
  font-size:var(--font-xs);
  font-weight:700;
  color:#7d8aa3;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.friends-empty{
  font-size:13px;
  color:#a3b1c6;
}
.friends-links{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
}
.linkish{
  background:none;
  border:none;
  padding:0;
  text-align:left;
  font-size:13px;
  color:#e4ecff;
  cursor:pointer;
}
.linkish:hover{text-decoration:underline}
.friends-dm-list{
  margin-top:16px;
  border-top:1px solid #161d27;
  padding-top:10px;
}

/* Arkada┼ş sat─▒r─▒ */
.friend-row{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  border:0;
  background:transparent;
  color:#e4ecff;
  text-align:left;
}
.friend-row:hover{background:#161d27}
.friend-row .avatar{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,#1e293b,#0d1626);
  border:1px solid #1f2d44;display:grid;place-items:center;font-weight:800;color:#e8f0ff;
  position:relative;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.35),0 0 12px rgba(94,234,212,.12);
}
.friend-row .meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.friend-row .meta .name{
  font-size:13px;
  font-weight:500;
}
.friend-row .meta .tag{
  font-size:11px;
  color:#7d8aa3;
}
/* ============ CENTER EMPTY (kanal se?ilmeden ?nce) ============ */
#centerEmpty{
  position:relative;
  flex:1;
  width:100%;
  max-width:900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 36px;
  gap:14px;
  color:var(--text-muted);
  border:1px solid rgba(93,118,170,.38);
  background:linear-gradient(145deg,rgba(18,29,47,.88),rgba(10,18,32,.95));
  border-radius:24px;
  box-shadow:var(--shadow-strong),0 0 0 1px rgba(109,123,255,.08);
  overflow:hidden;
  isolation:isolate;
  margin:0 auto;
}
#centerEmpty::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 30% 20%,rgba(111,123,255,.18),transparent 40%), radial-gradient(circle at 72% 60%,rgba(60,224,198,.18),transparent 38%);
  filter:blur(18px);
  opacity:.7;
  z-index:0;
  animation:heroDrift 18s ease-in-out infinite alternate;
}
#centerEmpty::after{
  content:"";
  position:absolute;
  inset:-4px;
  background:conic-gradient(from 120deg,rgba(60,224,198,.12),rgba(111,123,255,.16),rgba(60,224,198,.12));
  opacity:.5;
  filter:blur(12px);
  z-index:0;
  animation:heroSpin 16s linear infinite;
}
@keyframes heroDrift{
  0%{transform:translate3d(-6px,-6px,0) scale(1);}
  100%{transform:translate3d(8px,10px,0) scale(1.06);}
}
@keyframes heroSpin{
  to{transform:rotate(360deg);}
}

.ce-logo{
  width:88px;
  height:88px;
  border-radius:24px;
  background:radial-gradient(circle at 30% 20%, #85a0ff, #4b5cfa);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:34px;
  color:#f9fbff;
  box-shadow:0 15px 32px rgba(0,0,0,.45),0 0 30px rgba(109,123,255,.35);
  margin-bottom:4px;
  position:relative;
  z-index:1;
}

.ce-title{
  font-size:26px;
  font-weight:800;
  color:var(--text-main);
  margin:0;
  letter-spacing:.2px;
  position:relative;
  z-index:1;
}

.ce-sub{
  max-width:520px;
  font-size:var(--font-md);
  line-height:1.6;
  margin:0;
  color:var(--text-muted);
  position:relative;
  z-index:1;
}

#centerHeader{
  position:sticky;
  top:0;
  left:0;
  z-index:6;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(16,26,42,.95),rgba(12,20,34,.9));
  border:1px solid #1f2f46;
  border-radius:var(--radius-lg);
  box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 0 1px rgba(109,123,255,.08);
}
#currentChannelName{
  position:relative;
  font-weight:800;
  font-size:var(--font-lg);
  letter-spacing:.2px;
  color:var(--text-main);
  padding-left:18px;
}
#currentChannelName::before{
  content:"#";
  color:var(--text-muted);
  font-size:18px;
  font-weight:800;
  opacity:.85;
  position:absolute;
  left:-2px;
  top:0;
}
#currentChannelName::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--accent-secondary),var(--accent-primary));
  border-radius:999px;
  box-shadow:0 0 14px rgba(109,123,255,.35);
  transform-origin:left;
  transform:scaleX(.45);
  animation:channelUnderline 3.2s ease-in-out infinite alternate;
}
@keyframes channelUnderline{
  0%{transform:scaleX(.45);opacity:.8;}
  100%{transform:scaleX(1);opacity:1;}
}
.center-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.mobile-only,
.tablet-only{
  display:none;
}

#scrollLatestBtn{
  position:fixed;
  right:max(18px, calc((100vw - var(--center-max))/2 + 18px));
  bottom:110px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #334155;
  background:#1e293b;
  color:#e5e7eb;
  cursor:pointer;
  box-shadow:var(--shadow-lg);
  font-weight:700;
  display:none;
  z-index:12;
}
#scrollLatestBtn.show{display:inline-flex;align-items:center;gap:6px;}
#scrollLatestBtn:hover{background:#253349;}



.user-card.speaking .audio-bar{box-shadow:0 0 0 1px rgba(60,224,198,.25),0 0 18px rgba(60,224,198,.25);}
.user-card.speaking .audio-bar span{height:90%;box-shadow:0 0 12px rgba(60,224,198,.35);}

#vdLeave{background:linear-gradient(135deg,#2b1b24,#3b1f2c);border-color:#4b1f2f;color:#ffd6dd;}
#vdLeave:hover{background:linear-gradient(135deg,#3d2432,#542f3d);}

#vdJoin,
#vdLeave,
#btnVoiceJoin,
#btnVoiceLeave{
  display:none !important;
}


.me-row{display:flex;align-items:center;gap:10px;}
.me-name{font-weight:800;font-size:var(--font-sm);color:var(--text-main);}

/* Voice mini panel (kanal kartı altı) */
.voice-mini-panel{margin:4px 0 12px 12px;padding:8px;background:#0f1728;border:1px solid #1f2a3f;border-radius:10px;display:flex;flex-direction:column;gap:6px;}
.voice-mini-users{display:flex;flex-direction:column;gap:6px;}
.voice-mini-user{display:flex;align-items:center;gap:10px;}
.voice-mini-avatar{width:28px;height:28px;border-radius:8px;background:#1f2d46;color:#d9e6ff;font-weight:700;display:flex;align-items:center;justify-content:center;}
.voice-mini-name{font-size:13px;color:#dbe7ff;}
.voice-mini-empty{font-size:12px;color:#73839f;}
.voice-volume-slider{flex:1;accent-color:#7b8aff;height:4px;}
.voice-mini-action{margin-left:auto;background:rgba(255,255,255,.05);border:1px solid #2a3a5a;color:#dbe7ff;padding:4px 8px;border-radius:8px;cursor:pointer;font-size:12px;}
.voice-mini-action:disabled{opacity:.5;cursor:not-allowed;}

/* Main panel (ses/ekran paylaşımı) */
.main-panel{padding:16px;border:1px solid #1f2f46;border-radius:16px;background:#0e1523;box-shadow:0 15px 45px rgba(0,0,0,.35);margin-bottom:14px;}
.main-panel.hidden{display:none;}
.main-panel .panel-title{font-weight:800;font-size:16px;color:#dbe7ff;}
.main-panel .panel-count{font-size:12px;color:#9fb2d4;padding:4px 8px;border:1px solid #1f2f46;border-radius:10px;}
.voice-layout{display:grid;grid-template-rows:auto 1fr auto;min-height:0;padding:16px 24px;gap:14px;max-width:1200px;margin:0 auto;}
.voice-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px;background:linear-gradient(90deg,rgba(110,150,255,0.18),rgba(0,0,0,0));border-bottom:1px solid rgba(255,255,255,0.06);border-radius:12px;}
.voice-head-left{display:flex;align-items:center;gap:10px;}
.voice-header-title{display:flex;flex-direction:column;gap:2px;}
.voice-header-title small{font-size:12px;opacity:.7;}
.voice-header-badges{display:flex;align-items:center;gap:8px;}
.panel-pill{padding:4px 8px;font-size:12px;border-radius:10px;background:rgba(79,70,229,.14);color:#cdd5ff;border:1px solid rgba(79,70,229,.35);}
.voice-badge{font-size:12px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);}
.voice-badge.ping{background:rgba(130,180,255,.12);border-color:rgba(130,180,255,.3);}
.mini-icon{opacity:.85;margin-right:4px;}
.voice-body{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);gap:16px;align-items:stretch;}
.voice-screen{border-radius:16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden;min-height:260px;}
.voice-screen.empty{justify-content:center;}
.voice-screen video{width:100%;height:100%;object-fit:contain;border-radius:12px;background:#0b1220;}
.voice-screen-empty{display:flex;flex-direction:column;align-items:center;gap:12px;}
.voice-screen-empty-icon{width:64px;height:64px;border-radius:20px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.2),transparent);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.9;}
.voice-screen-empty-text{font-size:13px;opacity:.7;text-align:center;}
.voice-screen-badge-live{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;background:rgba(255,60,80,0.25);border:1px solid rgba(255,60,80,0.5);}
.voice-screen-stop{position:absolute;bottom:12px;left:12px;}
.voice-screen-tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.04);margin-bottom:18px;}
.voice-screen-tab{font-size:12px;padding:4px 10px;border-radius:999px;cursor:pointer;opacity:.7;transition:background .15s ease,opacity .15s ease;border:0;background:transparent;color:#dbe7ff;}
.voice-screen-tab.active{background:rgba(140,180,255,0.25);opacity:1;}
.voice-screen,.voice-users{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.voice-screen:hover,.voice-users:hover{box-shadow:0 12px 32px rgba(0,0,0,0.45);border-color:rgba(255,255,255,0.08);transform:translateY(-1px) scale(1.01);}
.voice-channel-info{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;margin-top:12px;border-radius:14px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.04);}
.voice-channel-info-main .voice-channel-info-title{font-size:13px;font-weight:600;}
.voice-channel-info-main .voice-channel-info-sub{font-size:11px;opacity:.6;}
.voice-channel-info-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.info-pill{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);}
.voice-channel-info-ping{display:flex;flex-direction:column;align-items:flex-end;font-size:11px;}
.voice-channel-info-ping .ping-value{font-size:13px;font-weight:600;}
.ping-good{color:#7fffd4;}
.ping-warn{color:#ffd76a;}
.ping-bad{color:#ff7a7a;}
.screen-share-cta{display:flex;flex-direction:column;align-items:center;gap:12px;}
.screen-share-btn{padding:14px 20px;border-radius:12px;border:1px solid #2a3a5a;background:linear-gradient(135deg,#1e2a40,#253556);color:#dbe7ff;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 1px rgba(94,234,212,.12);transition:transform .12s ease,box-shadow .12s ease;}
.screen-share-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 0 1px rgba(94,234,212,.2);}
.panel-placeholder{padding:24px;text-align:center;color:#9fb2d4;font-size:14px;}
.voice-users{border-radius:16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:260px;}
.voice-users .voice-mini-panel{margin:0;padding:0;border:none;background:transparent;}
.voice-users .voice-mini-user{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,0.25);transition:background .15s ease,box-shadow .15s ease,transform .1s ease;}
.voice-user-name-wrap{display:flex;flex-direction:column;gap:2px;}
.voice-user-role{font-size:11px;opacity:.7;}
.voice-user-dot{margin-left:auto;font-size:14px;color:#9fb2d4;}
.channel-actions{display:flex;align-items:center;gap:6px;}
.channel-capacity-badge{font-size:12px;padding:2px 6px;border-radius:999px;background:rgba(79,70,229,0.12);border:1px solid rgba(79,70,229,0.25);font-weight:600;}
.channel-action{border:none;background:rgba(255,255,255,0.04);color:#dbe7ff;border-radius:999px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;}
.channel-action:hover{background:rgba(255,255,255,0.12);}
.voice-user-row.speaking{background:rgba(130,180,255,0.16);box-shadow:0 0 0 1px rgba(130,180,255,0.4);transform:translateY(-1px);}
.voice-users .voice-mini-avatar{width:28px;height:28px;border-radius:8px;background:#1f2d46;color:#d9e6ff;font-weight:700;display:flex;align-items:center;justify-content:center;}
.voice-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,0.04);padding-top:8px;margin-top:4px;}
.voice-footer-left{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.8;}
.voice-footer-left-icon{width:18px;height:18px;border-radius:999px;background:rgba(100,200,140,0.25);border:1px solid rgba(100,200,140,0.5);display:flex;align-items:center;justify-content:center;font-size:11px;}
.voice-footer-info{color:#9fb2d4;font-size:13px;}
.voice-footer-desc{font-size:11px;opacity:.6;}
.voice-leave-btn{margin-left:auto;}
@media (max-width:900px){.voice-body{grid-template-columns:1fr;grid-template-rows:auto auto;}}
@media (max-width:1024px){
  .voice-layout{gap:16px;}
  .voice-body{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .voice-screen,.voice-users{width:100%;}
}



.msg-badge-everyone {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 0, 80, 0.18);
  color: #ff4b81;
  border: 1px solid rgba(255, 0, 80, 0.5);
}