:root {
  --zemin: #202124;
  --panel: #2d2e31;
  --kutu: #3c4043;
  --kutuAcik: #4a4e52;
  --kenar: #5f6368;
  --metin: #e8eaed;
  --soluk: #9aa0a6;
  --mavi: #8ab4f8;
  --kirmizi: #ea4335;
  --yesil: #81c995;
  --sari: #fdd663;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kutu); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--kenar); }

body {
  margin: 0;
  overflow: hidden;
  font: 14px/1.5 "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  user-select: none;
}

.gizli { display: none !important; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
}

svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

input[type="text"], input[type="password"], input[type="email"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  outline: none;
  user-select: text;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus { border-color: var(--mavi); }

.birincil {
  background: var(--mavi);
  color: #202124;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
}
.birincil:not(:disabled):hover { background: #aecbfa; }

.ikonBtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--soluk);
}
.ikonBtn:hover { background: rgba(255, 255, 255, .08); color: var(--metin); }
.ikonBtn svg { width: 20px; height: 20px; }

.ekran { height: 100%; min-height: 0; display: flex; flex-direction: column; }

/* ================= GIRIS ================= */

#lobi { overflow: hidden; }
.lobiGovde { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px; }

.lobiKart {
  width: 100%;
  max-width: 860px;
  background: var(--panel);
  border-radius: 16px;
  padding: 28px 28px 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
}
.lobiSol, .lobiSag { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 760px) {
  .lobiKart { grid-template-columns: 1fr; max-width: 420px; }
}

/* Kamera onizlemesi (giris ekrani) */
.onizleme {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--zemin);
  display: grid;
  place-items: center;
}
.onizleme video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* ayna gibi */
  display: none;
}
.onizleme.kameraAcik video { display: block; }
.onizleme.kameraAcik .onizlemeBos { display: none; }
.onizlemeBos { color: var(--soluk); font-size: 13px; }
.onizleme .yuvarlak { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }

.marka { display: flex; align-items: center; gap: 10px; }
.marka img { width: 34px; height: 34px; }
.marka h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.marka h1 span { color: var(--mavi); }
.altyazi { margin: -10px 0 4px; color: var(--soluk); }

.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > span { font-size: 13px; color: var(--soluk); }
.alan small { color: var(--soluk); font-size: 12px; }
.satir { display: flex; gap: 6px; align-items: center; }

details.alan summary { cursor: pointer; color: var(--soluk); font-size: 13px; width: fit-content; }
details.alan[open] summary { margin-bottom: 4px; }

.seviye {
  height: 4px;
  border-radius: 2px;
  background: var(--kutu);
  overflow: hidden;
  margin-top: 4px;
}
#lobiSeviye {
  height: 100%;
  width: 0;
  background: var(--yesil);
  transition: width 80ms linear;
}

#btnKatil { margin-top: 4px; padding: 12px; font-size: 15px; }

.durum { min-height: 20px; font-size: 13px; color: var(--soluk); text-align: center; }
.durum.hata { color: #f28b82; }
.surum { margin-top: -8px; font-size: 11px; color: var(--kenar); text-align: center; }
.surum a { color: var(--mavi); }

/* ================= GORUSME ================= */

#gorusme { display: flex; flex-direction: column; position: relative; }

.baglantiUyari {
  position: absolute;
  z-index: 10;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--sari);
  color: #202124;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

#alan {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 16px 16px 0;
}

#kutucuklar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 12px;
}

.kutucuk {
  position: relative;
  width: var(--kw, 320px);
  height: var(--kh, 180px);
  background: var(--kutu);
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color 120ms;
}
.kutucuk.konusuyor { outline-color: var(--mavi); }

/* konusan gorunumu: buyuk kutucuk kendi satirinda, digerleri altta serit */
#gorusme:not(.sahneVar) #kutucuklar.konusanGorunum { align-content: center; }
#gorusme:not(.sahneVar) .konusanGorunum .kutucuk.buyuk {
  order: -1;
  width: var(--bw);
  height: var(--bh);
  margin: 0 calc((100% - var(--bw)) / 2);
}
#gorusme:not(.sahneVar) .konusanGorunum .kutucuk.buyuk .avatar { width: 22%; max-width: 180px; font-size: 64px; }
.kutucuk.sabit::before {
  content: '📌';
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 10px;
  font-size: 14px;
}
#btnGorunum .ikonKonusan, #btnGorunum.konusan .ikonIzgara { display: none; }
#btnGorunum.konusan .ikonKonusan { display: block; }

/* Kamera acikken harf yerine goruntu; ad/rozetler goruntunun ustunde okunur kalsin */
.kameraVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.kutucuk[data-id="ben"] .kameraVideo { transform: scaleX(-1); }
.kutucuk.kameraAcik .kameraVideo { display: block; }
.kutucuk.kameraAcik .avatar { display: none; }
.kutucuk.kameraAcik::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .5));
  pointer-events: none;
}
.isim, .rozetler, .baglanti { z-index: 1; }

.avatar {
  width: clamp(48px, 28%, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(20px, 3.2vw, 48px);
  font-weight: 500;
  color: #fff;
  transition: box-shadow 120ms;
}
.kutucuk.konusuyor .avatar { box-shadow: 0 0 0 4px rgba(138, 180, 248, .45); }

.isim {
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 60px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.rozetler {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.rozet { display: none; }
.rozet.sunum {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mavi);
  color: #202124;
}
.rozet.mikKapali {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(32, 33, 36, .75);
  place-items: center;
}
.rozet.mikKapali svg { width: 16px; height: 16px; color: #f28b82; }
.kutucuk.sunuyor .rozet.sunum { display: inline-block; }
.kutucuk.sessiz .rozet.mikKapali { display: grid; }

.baglanti {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--sari);
}
.baglanti:empty { display: none; }

/* --- sahne (paylasilan ekran) --- */

#sahne {
  display: none;
  flex: 1;
  min-width: 0;
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.sahneVar #sahne { display: flex; flex-direction: column; }
.sahneVar #kutucuklar {
  flex: 0 0 220px;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  overflow-y: auto;
  gap: 10px;
}
.sahneVar .kutucuk { width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; }
.sahneVar .kutucuk .avatar { width: 30%; font-size: 22px; }

#sahneVideo {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: #000;
}

.sahneUst {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  background: linear-gradient(rgba(0, 0, 0, .65), transparent);
}
#sahneBaslik { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sahneSecici { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
#sahneSecici button {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  white-space: nowrap;
}
#sahneSecici button.aktif { background: var(--mavi); color: #202124; }
.sahneUst .ikonBtn { color: var(--metin); margin-left: auto; }

#kendiSunum {
  display: none;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(32, 33, 36, .92);
  white-space: nowrap;
}
#kendiSunum button {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--mavi);
  color: #202124;
  font-weight: 600;
}
/* Kendi ekranini tam boy gostermek sonsuz ayna etkisi yapar; kucuk onizleme yeterli. */
#sahne.kendi #kendiSunum { display: flex; }
#sahne.kendi #sahneVideo { flex: none; width: 55%; height: 55%; margin: auto; opacity: .85; }

#sahne:fullscreen { border-radius: 0; }

/* beyaz tahta (sahnede) */
#tahtaAlan { display: none; position: absolute; inset: 48px 12px 12px; z-index: 1; }
#sahne.tahtaModu #tahtaAlan { display: block; }
#sahne.tahtaModu #sahneVideo, #sahne.tahtaModu #kendiSunum, #sahne.tahtaModu #cizimTuval, #sahne.tahtaModu .cizimAraclari { display: none !important; }
#sahne.tahtaModu { background: #2a2b2e; }
#tahtaTuval { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.tahtaAraclar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(32, 33, 36, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
#tahtaRenkler { display: flex; gap: 6px; }
.tahtaRenk { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.tahtaRenk.secili { border-color: #fff; box-shadow: 0 0 0 2px var(--mavi); }
.tahtaArac { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--metin); }
.tahtaArac svg { width: 18px; height: 18px; }
.tahtaArac:hover { background: rgba(255, 255, 255, .1); }
.tahtaArac.secili { background: var(--mavi); color: #202124; }
#btnTahta.yeni::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fdd663;
}
#btnTahta { position: relative; }

/* bekleme odasi */
.beklemeKart {
  position: fixed;
  z-index: 25;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, calc(100% - 32px));
}
.beklemeSatir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  font-size: 13px;
}
.beklemeSatir span { flex: 1; min-width: 0; }
.beklemeSatir button { padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.beklemeSatir button:not(.birincil) { color: var(--mavi); border: 1px solid var(--kenar); }
.beklemeVazgec { align-self: center; margin-top: -6px; padding: 6px 16px; border-radius: 999px; color: var(--mavi); border: 1px solid var(--kenar); }
.odaBekleme { margin-top: 10px; }

/* tutanak ve ozet */
#tutanakSekme { padding: 12px; gap: 10px; }
.tutanakUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#tutanakDurum { font-size: 13px; color: var(--soluk); }
#tutanakDurum.acik { color: #f28b82; font-weight: 600; }
#btnTutanakAc { padding: 7px 16px; border-radius: 999px; font-size: 13px; }
#btnTutanakAc:not(.birincil) { color: var(--mavi); border: 1px solid var(--kenar); }
#tutanakListe { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.tutanakSatir { font-size: 13px; line-height: 1.45; user-select: text; }
.tutanakSatir div:first-child { display: flex; gap: 8px; align-items: baseline; }
.tutanakSatir b { font-size: 12px; }
.tutanakSatir time { font-size: 11px; color: var(--soluk); }
.tutanakBos { color: var(--soluk); font-size: 12px; line-height: 1.5; margin: 0; }
.tutanakAlt { display: flex; gap: 8px; }
.tutanakAlt button { flex: 1; padding: 8px; border-radius: 999px; border: 1px solid var(--kenar); color: var(--mavi); font-size: 13px; }
.tutanakAlt button:disabled { opacity: .6; }
.tutanakNot { color: var(--soluk); font-size: 11px; line-height: 1.4; }
.kayitIsaret.tutanakIsaret { background: rgba(138, 180, 248, .16); color: var(--mavi); }
.kayitIsaret.tutanakIsaret i { background: var(--mavi); }
.mesaj.sistemMesaj { background: rgba(138, 180, 248, .08); padding: 8px 10px; border-radius: 10px; }
.mesaj.sistemMesaj .mesajUst b { color: var(--mavi); }

/* notlar: kisisel / ortak */
.notTuru { display: flex; gap: 4px; margin: 0; padding: 3px; border-radius: 999px; background: var(--zemin); }
.notTuru button { flex: 1; padding: 6px 10px; border-radius: 999px; font-size: 13px; color: var(--soluk); }
.notTuru button.aktif { background: rgba(138, 180, 248, .18); color: var(--mavi); }

/* ekrana cizim */
#cizimTuval { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#sahne.cizimAcik #cizimTuval { pointer-events: auto; touch-action: none; }
#sahne[data-arac="kalem"] #cizimTuval { cursor: crosshair; }
#sahne[data-arac="isaretci"] #cizimTuval { cursor: none; }
.cizimAraclari { display: flex; gap: 2px; margin-left: auto; }
.sahneUst .cizimAraclari .ikonBtn { margin-left: 0; }
.sahneUst .cizimAraclari + .ikonBtn { margin-left: 6px; }
.sahneUst .yakinlastirma + .ikonBtn { margin-left: 6px; }
.sahneUst .ikonBtn.aktif { background: var(--mavi); color: #202124; }

/* --- alt kontrol cubugu --- */

#kontrol {
  flex: none;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
#kontrol .sol { display: flex; align-items: center; gap: 12px; min-width: 0; }
#kontrol .orta { display: flex; gap: 12px; }
#kontrol .sag { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }

.panelBtn { position: relative; color: var(--metin); width: 44px; height: 44px; }
.panelBtn svg { width: 22px; height: 22px; }
.panelBtn.aktif { background: rgba(138, 180, 248, .16); color: var(--mavi); }
.panelBtn .sayac {
  position: absolute;
  bottom: 4px;
  right: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--soluk);
}
.okunmamis {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--kirmizi);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* --- yan panel (Kisiler / Sohbet / Notlar) --- */

#yanPanel {
  flex: 0 0 330px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 12px;
  overflow: hidden;
}
.panelUst {
  flex: none;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 16px;
  border-bottom: 1px solid var(--kutu);
}
.panelBaslik { font-size: 15px; font-weight: 700; }
.panelSekmeler { display: flex; gap: 2px; }
.panelSekme {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--soluk);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.panelSekme.aktif { color: var(--mavi); border-bottom-color: var(--mavi); }
.panelIcerik { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panelIcerik.gizli { display: none !important; }

#mesajListe {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 18px 12px;
}
.sohbetBos {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--zemin);
  color: var(--soluk);
  font-size: 12px;
  text-align: center;
}

.mesaj { margin-top: 14px; }
.mesaj.devami { margin-top: 4px; }
.mesaj.devami .mesajUst { display: none; }
.mesajUst { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.mesajUst b { font-size: 13px; font-weight: 600; }
.mesajUst time { font-size: 11px; color: var(--soluk); }
.mesajMetin {
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}
.mesajMetin a { color: var(--mavi); }
.mesaj.bekliyor .mesajMetin { opacity: .5; }

.mesajUst .adTik { cursor: pointer; }
.mesajUst .adTik:hover { text-decoration: underline; }

.mesajAlt { padding: 0 12px 12px; position: relative; }

/* yanit / duzenleme / silme / bahsetme */
.mesaj { position: relative; border-radius: 8px; }
.mesajIslemler {
  display: none;
  position: absolute;
  top: -6px;
  right: 0;
  z-index: 2;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.mesaj:hover .mesajIslemler { display: flex; }
.mesajIslemler .ikonBtn { width: 28px; height: 28px; }
.mesajIslemler .ikonBtn svg { width: 16px; height: 16px; }
.mesaj.bekliyor .mesajIslemler { display: none; }
.mesajUst .duzenlendi { font-size: 11px; color: var(--soluk); font-style: italic; }
.silindiMetin { color: var(--soluk); font-style: italic; }
.mesajYanit {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0 4px;
  padding: 4px 8px;
  border-left: 3px solid var(--mavi);
  border-radius: 4px;
  background: rgba(138, 180, 248, .08);
  color: var(--soluk);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mesajYanit b { color: var(--mavi); margin-right: 6px; }
.mesaj.bahsedildi { background: rgba(253, 214, 99, .08); box-shadow: inset 3px 0 0 #fdd663; padding-left: 8px; }
.bahsetme { color: var(--mavi); font-weight: 600; }
.bahsetme.ben { color: #202124; background: #fdd663; border-radius: 4px; padding: 0 3px; }
.mesaj.parla { animation: mesajParla 1.6s ease-out; }
@keyframes mesajParla { 0%, 40% { background: rgba(138, 180, 248, .25); } 100% { background: transparent; } }

#sohbetModu {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 8px;
  background: rgba(138, 180, 248, .1);
  font-size: 12px;
  color: var(--soluk);
}
#sohbetModu.gizli { display: none; }
#sohbetModu span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sohbetModu b { color: var(--mavi); }
#sohbetModu .ikonBtn { width: 26px; height: 26px; }
#sohbetModu .ikonBtn svg { width: 16px; height: 16px; }

#bahsetmeListe {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
#bahsetmeListe.gizli { display: none; }
#bahsetmeListe button { text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
#bahsetmeListe button.secili, #bahsetmeListe button:hover { background: rgba(138, 180, 248, .16); }
#bahsetmeListe small { color: var(--soluk); }
.yaziyor { height: 18px; margin: 0 6px 2px; font-size: 12px; font-style: italic; color: var(--soluk); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mesajYaz {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 4px 4px 4px;
  border-radius: 20px;
  background: var(--zemin);
}
#btnDosyaEkle { width: 36px; height: 36px; flex: none; }
.mesajYaz:focus-within { outline: 1px solid var(--kenar); }
#mesajKutu {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--metin);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  resize: none;
  outline: none;
  user-select: text;
}
#btnGonder { width: 36px; height: 36px; color: var(--mavi); flex: none; }
#btnGonder:disabled { color: var(--soluk); }

#sure { font-variant-numeric: tabular-nums; }
.ayrac { width: 1px; height: 18px; background: var(--kenar); }

.odaKodu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 500;
  min-width: 0;
}
.odaKodu:hover { background: rgba(255, 255, 255, .08); }
.odaKodu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaKodu svg { width: 16px; height: 16px; color: var(--soluk); }

.yuvarlak {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kutu);
  transition: background 120ms;
}
.yuvarlak:not(:disabled):hover { background: var(--kutuAcik); }
.yuvarlak .ikonKapali { display: none; }
.yuvarlak.kapali .ikonAcik, .yuvarlak.aktif .ikonAcik { display: none; }
.yuvarlak.kapali .ikonKapali, .yuvarlak.aktif .ikonKapali { display: block; }
.yuvarlak.kapali { background: var(--kirmizi); }
.yuvarlak.kapali:not(:disabled):hover { background: #f06156; }
.yuvarlak.aktif { background: var(--mavi); color: #202124; }
.yuvarlak.aktif:hover { background: #aecbfa; }
.yuvarlak.ayril { width: 64px; border-radius: 999px; background: var(--kirmizi); }
.yuvarlak.ayril:hover { background: #f06156; }

.kisiRozet { display: flex; align-items: center; gap: 6px; color: var(--soluk); }
.kisiRozet svg { width: 20px; height: 20px; }

/* ================= EKRAN SECICI ================= */

.modalArka {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, .6);
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal {
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel);
  border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.modal h2 { margin: 0; font-size: 18px; font-weight: 500; }

.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--kutu); }
.sekme {
  padding: 8px 16px;
  color: var(--soluk);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.sekme.aktif { color: var(--mavi); border-bottom-color: var(--mavi); }

#kaynakListe {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  align-content: start;
  padding: 2px;
}
.kaynak {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  text-align: left;
  outline: 2px solid transparent;
}
.kaynak:hover { background: rgba(255, 255, 255, .05); }
.kaynak.secili { outline-color: var(--mavi); background: rgba(138, 180, 248, .1); }
.kaynak img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}
.kaynak span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bos { grid-column: 1 / -1; color: var(--soluk); text-align: center; padding: 40px 0; }

.uyari {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(253, 214, 99, .12);
  color: var(--sari);
}

.modalAlt { display: flex; justify-content: flex-end; gap: 8px; }
.modalAlt button:not(.birincil) { padding: 10px 18px; border-radius: 999px; color: var(--mavi); }
.modalAlt button:not(.birincil):hover { background: rgba(138, 180, 248, .1); }
.modalAlt .seciciSes { margin-right: auto; font-size: 13px; color: var(--soluk); }

/* ================= GUNCELLEME ================= */

.guncelleme {
  position: fixed;
  z-index: 25;
  left: 16px;
  bottom: 96px;
  max-width: min(360px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--kutu);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  font-size: 13px;
}
#lobi:not(.gizli) ~ .guncelleme { bottom: 16px; }
#btnGuncelle {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mavi);
  color: #202124;
  font-weight: 600;
  white-space: nowrap;
}
#btnGuncelle:hover { background: #aecbfa; }

/* ================= AVATAR ================= */

.avatar.emoji { font-size: clamp(28px, 5vw, 72px); }
.sahneVar .kutucuk .avatar.emoji { font-size: 30px; }
.avatar.kucuk {
  width: 36px;
  height: 36px;
  flex: none;
  font-size: 16px;
}
.avatar.kucuk.emoji { font-size: 20px; }

.avatarDugme {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  outline: 2px solid transparent;
}
.avatarDugme.emoji { font-size: 22px; }
.avatarDugme:hover { outline-color: var(--mavi); }
.marka #btnLobiAyarlar { margin-left: auto; }

/* ================= KUTUCUK EKLERI ================= */

.rozet.yoneticiRozet { font-size: 16px; line-height: 1; }
.kutucuk.yonetici .rozet.yoneticiRozet { display: inline-block; }

/* el kaldirma ve tepkiler */
.rozet.elRozet {
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  background: #fdd663;
  animation: elSalla 1.2s ease-in-out 2;
}
.kutucuk.elKalkik .rozet.elRozet { display: inline-block; }
.kutucuk.elKalkik { outline-color: #fdd663; }
@keyframes elSalla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

#tepkiSarici { position: relative; }
.yuvarlak.elKalkik { box-shadow: inset 0 0 0 2px #fdd663; }
#tepkiMenu {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.tepkiSatir { display: flex; gap: 2px; }
.tepkiSatir button { font-size: 24px; width: 42px; height: 42px; border-radius: 10px; }
.tepkiSatir button:hover { background: rgba(255, 255, 255, .08); transform: scale(1.12); }
#btnElKaldir { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--kenar); font-size: 14px; white-space: nowrap; }
#btnElKaldir:hover { background: rgba(255, 255, 255, .06); }
#btnElKaldir.aktif { background: #fdd663; color: #202124; border-color: #fdd663; }

.ucanTepki {
  position: absolute;
  z-index: 3;
  bottom: 12%;
  font-size: 42px;
  line-height: 1;
  pointer-events: none;
  animation: tepkiUc 2.6s ease-out forwards;
}
.ucanTepki.sahnede { bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ucanTepki span {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(32, 33, 36, .85);
  color: var(--metin);
}
@keyframes tepkiUc {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  15% { transform: translateY(0) scale(1.1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-160px) scale(1); opacity: 0; }
}
.rozet.yerelSessizRozet {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(32, 33, 36, .75);
  place-items: center;
}
.rozet.yerelSessizRozet svg { width: 16px; height: 16px; color: var(--sari); }
.kutucuk.yerelSessiz .rozet.yerelSessizRozet { display: grid; }
.kutucuk.susturuldu .rozet.mikKapali { display: grid; background: var(--kirmizi); }
.kutucuk.susturuldu .rozet.mikKapali svg { color: #fff; }

/* Baglanti kalitesi: 3 cubuk */
.rozet.kalite {
  gap: 2px;
  align-items: flex-end;
  height: 16px;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(32, 33, 36, .75);
  box-sizing: content-box;
}
.kutucuk.kaliteDusuk .rozet.kalite, .kisiSatir .rozet.kalite { display: inline-flex; }
.rozet.kalite i { display: block; width: 3px; border-radius: 1px; background: var(--kenar); }
.rozet.kalite i:nth-child(1) { height: 5px; }
.rozet.kalite i:nth-child(2) { height: 10px; }
.rozet.kalite i:nth-child(3) { height: 15px; }
.rozet.kalite.k1 i:nth-child(1) { background: var(--kirmizi); }
.rozet.kalite.k2 i:nth-child(-n+2) { background: var(--sari); }
.rozet.kalite.k3 i { background: var(--yesil); }

/* Uzerine gelince: ses duzeyi ve sessize alma (sadece bu bilgisayar icin) */
.kutuKontrol {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(32, 33, 36, .85);
  opacity: 0;
  transition: opacity 120ms;
}
.kutucuk:hover .kutuKontrol, .kutuKontrol:focus-within { opacity: 1; }
.kontrolDugme {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.kontrolDugme:hover { background: rgba(255, 255, 255, .12); }
.kontrolDugme svg { width: 18px; height: 18px; }
.kutuKontrol input[type="range"] { width: 90px; accent-color: var(--mavi); }
.sahneVar .kutuKontrol input[type="range"] { width: 60px; }

/* Bas-konus modunda mikrofon dugmesi */
.yuvarlak.basKonus { box-shadow: inset 0 0 0 2px var(--mavi); }
.yuvarlak.basKonus:not(.kapali) { background: var(--yesil); color: #202124; }

.kaliteUyari { top: 52px; background: #f28b82; }

/* ================= KISI LISTESI ================= */

#kisilerSekme { overflow-y: auto; }
#kisiListesi { padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.kisiSatir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
}
.kisiSatir:hover { background: rgba(255, 255, 255, .04); }
.kisiBilgi { flex: 1; min-width: 0; }
.kisiAd { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisiYonetici { margin-left: 6px; font-size: 13px; }
.kisiAlt { font-size: 12px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisiMenuDugme { width: 34px; height: 34px; flex: none; }
.kisiNot { margin: 10px 8px 0; font-size: 12px; color: var(--soluk); line-height: 1.5; }

/* oda ayarlari (Oda ayarlari paneli; oda menusunden acilir) */
#odaAyarlari:empty { display: none; }
#odaSekme { overflow-y: auto; }
.odaAyar { margin: 4px 16px 16px; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.odaAyarBaslik { font-size: 14px; font-weight: 500; }
.odaAyarForm { display: flex; gap: 8px; }
.odaAyarForm input { flex: 1; min-width: 0; padding: 8px 10px; }
.odaAyarForm button { padding: 8px 14px; }
.odaAyarKaldir { align-self: flex-start; color: #f28b82; font-size: 13px; padding: 4px 0; }
.odaAyarKaldir:hover { text-decoration: underline; }
.odaKodu.sifreli::before { content: '🔒'; font-size: 13px; }
#btnSifreGoster.aktif { color: var(--mavi); }

.acilirMenu {
  position: fixed;
  z-index: 40;
  min-width: 210px;
  padding: 6px 0;
  border-radius: 10px;
  background: #35363a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
.acilirMenu button {
  display: block;
  width: 100%;
  padding: 9px 16px;
  text-align: left;
  font-size: 13px;
}
.acilirMenu button:hover, .acilirMenu button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.acilirMenu button.tehlike { color: #f28b82; }
.menuAyrac { height: 1px; margin: 6px 0; background: var(--kenar); }

/* ================= NOTLAR ================= */

#notlarSekme { padding: 12px; gap: 8px; }
#notKutu, #ortakNotKutu {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--kutu);
  border-radius: 10px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: none;
  outline: none;
  user-select: text;
}
#notKutu:focus, #ortakNotKutu:focus { border-color: var(--kenar); }
.notAlt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notAlt small { color: var(--soluk); font-size: 11px; }
#btnNotKopyala { padding: 6px 12px; border-radius: 999px; color: var(--mavi); font-size: 12px; flex: none; }
#btnNotKopyala:hover { background: rgba(138, 180, 248, .1); }

/* ================= DOSYA KARTI ================= */

.dosyaKart {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px;
  border-radius: 10px;
  background: var(--zemin);
  border: 1px solid var(--kutu);
}
.dosyaIkon { width: 28px; height: 28px; color: var(--mavi); }
.dosyaBilgi { flex: 1; min-width: 0; }
.dosyaAd { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; }
.dosyaAlt { font-size: 11px; color: var(--soluk); }
.dosyaCubuk { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--kutu); overflow: hidden; }
.dosyaCubuk div { height: 100%; width: 0; background: var(--mavi); transition: width 150ms linear; }
.dosyaDugmeler { display: flex; flex-direction: column; gap: 4px; flex: none; }
.dosyaDugmeler button { padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--mavi); }
.dosyaDugmeler button:hover { background: rgba(138, 180, 248, .1); }
.dosyaDugmeler button.birincil { color: #202124; }
.mesaj.bekliyor .dosyaKart { opacity: .6; }

/* resim onizleme */
.resimKart { margin-top: 4px; max-width: 100%; }
.resimKart img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  background: var(--kutu);
  cursor: zoom-in;
}
.resimKart.yukleniyor img { display: none; }
.resimAlt { font-size: 12px; color: var(--soluk); }
.resimKart.yukleniyor .resimAlt {
  padding: 22px 14px;
  border-radius: 10px;
  background: var(--kutu);
  text-align: center;
}
.resimAlt button { color: var(--mavi); font-size: 12px; }
.mesaj.bekliyor .resimKart { opacity: .6; }
#sohbet.birakilabilir { outline: 2px dashed var(--mavi); outline-offset: -6px; }

.resimGoster { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 10px; }
.resimGoster img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 8px; align-self: center; }
.resimGosterAlt { display: flex; align-items: center; gap: 8px; }
.resimGosterAlt span { margin-right: auto; font-size: 13px; color: var(--metin); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resimGosterAlt button:not(.birincil):not(.ikonBtn) { padding: 10px 18px; border-radius: 999px; color: var(--mavi); border: 1px solid var(--kenar); }

/* ================= AYARLAR ================= */

.ayarlarModal { width: min(720px, 100%); height: min(560px, calc(100vh - 48px)); padding: 0; gap: 0; overflow: hidden; }
.ayarlarUst { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 22px; border-bottom: 1px solid var(--kutu); }
.ayarlarGovde { flex: 1; min-height: 0; display: flex; }
.ayarlarMenu {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--kutu);
}
.ayarlarMenu button { text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--soluk); font-size: 14px; }
.ayarlarMenu button:hover { background: rgba(255, 255, 255, .05); }
.ayarlarMenu button.aktif { background: rgba(138, 180, 248, .14); color: var(--mavi); }
.ayarlarIcerik { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px; }
.ayarlarIcerik section { display: flex; flex-direction: column; gap: 16px; }
.ayarlarIcerik section.gizli { display: none !important; }
.ayarlarIcerik p { margin: 0; }
.aciklama { font-size: 12px; color: var(--soluk); line-height: 1.5; }
.ayarAlt { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ayarAlt .aciklama { margin-right: auto; }
.ayarAlt button:not(.birincil) { padding: 10px 18px; border-radius: 999px; color: var(--mavi); border: 1px solid var(--kenar); }
.secimSatir { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.secimSatir input { width: 18px; height: 18px; accent-color: var(--mavi); }
.ayarGrup { display: flex; flex-direction: column; gap: 6px; }
.ayarGrup > .aciklama, .ayarGrup > .sesDeneme { margin-left: 28px; }
.sesDeneme { display: flex; gap: 8px; margin-top: 4px; }
.sesDeneme button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--kenar); color: var(--soluk); font-size: 12px; }
.sesDeneme button:hover { color: var(--metin); border-color: var(--soluk); }
.tusSec {
  align-self: flex-start;
  min-width: 140px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--kenar);
  background: var(--zemin);
  font-weight: 600;
}
.tusSec.bekliyor { border-color: var(--mavi); color: var(--mavi); }

#avatarListe { display: flex; flex-wrap: wrap; gap: 6px; }
.avatarGrup { flex-basis: 100%; margin-top: 6px; font-size: 12px; color: var(--soluk); }
.avatarSecim {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: var(--zemin);
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.avatarSecim:hover { background: var(--kutu); }
.avatarSecim.secili { outline-color: var(--mavi); background: rgba(138, 180, 248, .16); }
.avatarSecim.harf { font-size: 18px; font-weight: 600; }

/* ================= SURUMLER ================= */

.surumlerModal { width: min(800px, 100%); height: min(680px, calc(100vh - 48px)); padding: 0; gap: 0; overflow: hidden; }
.surumListe { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 24px; }
.surumDurum { margin: 0; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--soluk); font-size: 14px; }
.surumDurum p { margin: 0; }
.surumDurum button { padding: 8px 18px; border-radius: 999px; color: var(--mavi); border: 1px solid var(--kenar); }

.surumKart { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 20px 0; }
.surumKart + .surumKart { border-top: 1px solid var(--kutu); }
.surumYan { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; font-size: 13px; color: var(--soluk); }
.surumEtiket { display: inline-flex; align-items: center; gap: 6px; color: var(--metin); font-family: Consolas, monospace; font-size: 12px; }
.surumEtiket svg { width: 14px; height: 14px; fill: var(--soluk); flex: none; }

.surumGovde { min-width: 0; padding: 16px 20px 18px; border: 1px solid var(--kutu); border-radius: 12px; background: rgba(0, 0, 0, .14); }
.surumBaslik { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.surumBaslik h3 { margin: 0 4px 0 0; font-size: 20px; font-weight: 600; }
.surumRozet { padding: 1px 9px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; }
.surumRozet.enSon { color: var(--yesil); border-color: rgba(129, 201, 149, .5); }
.surumRozet.sizde { color: var(--mavi); border-color: rgba(138, 180, 248, .5); }
.surumRozet.onSurum { color: var(--sari); border-color: rgba(253, 214, 99, .5); }

.surumNotlar { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.surumNotlar p, .surumNotlar ul, .surumNotlar h4 { margin: 0 0 10px; }
.surumNotlar > :last-child { margin-bottom: 0; }
.surumNotlar h4 { font-size: 15px; font-weight: 600; }
.surumNotlar .surumOzet { font-size: 15px; font-weight: 500; }
.surumNotlar ul { padding-left: 22px; }
.surumNotlar li + li { margin-top: 4px; }
.surumNotlar li::marker { color: var(--soluk); }
.surumNotlar code { padding: 1px 5px; border-radius: 4px; background: var(--kutu); font-family: Consolas, monospace; font-size: 12.5px; }
.surumNotYok { color: var(--soluk); }

/* ================= BILDIRIM ================= */

.bildirim {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 12px);
  max-width: min(480px, calc(100% - 32px));
  padding: 10px 18px;
  border-radius: 8px;
  background: #e8eaed;
  color: #202124;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
}
.bildirim.goster { opacity: 1; transform: translate(-50%, 0); }

/* dugmeli bildirim (ornegin "Kayit kaydedildi · Klasorde goster") */
.eylemBildirim { display: flex; align-items: center; gap: 14px; bottom: 150px; }
.eylemBildirim.goster { pointer-events: auto; }
.eylemBildirim button { color: #1a73e8; font-weight: 600; white-space: nowrap; }

/* gorusme kaydi */
#btnKayit.kaydediyor { color: #fff; background: var(--kirmizi); }
.kayitIsaret {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(234, 67, 53, .18);
  color: #f28b82;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.kayitIsaret i { width: 8px; height: 8px; border-radius: 50%; background: var(--kirmizi); animation: kayitNabiz 1.4s ease-in-out infinite; }
@keyframes kayitNabiz { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
.odaKip { margin-top: 10px; }

/* ================= HESAP VE PLAN (hesap.js) ================= */
.lobiHesap {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--kenar);
  color: var(--mavi);
  font-size: 13px;
}
.lobiHesap:hover { background: var(--kutu); }
.planEtiket {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--kutu);
  color: var(--soluk);
  font-size: 12px;
  font-weight: 600;
}
.planEtiket.premium { background: rgba(253, 214, 99, .16); color: var(--sari); }
.hesapKart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--kutu);
  margin-bottom: 12px;
}
.hesapKimlik { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.hesapKimlik b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesapSifre input { margin-top: 8px; }
.hesapSifre button { margin-top: 8px; padding: 8px 16px; border-radius: 999px; color: var(--mavi); border: 1px solid var(--kenar); }
.hesapSekmeler { display: flex; gap: 6px; margin-bottom: 12px; }
.hesapSekmeler button { padding: 6px 14px; border-radius: 999px; color: var(--soluk); border: 1px solid var(--kenar); }
.hesapSekmeler button.aktif { background: var(--mavi); border-color: var(--mavi); color: #202124; font-weight: 600; }
#hesapDurum { min-height: 18px; margin: 8px 0 0; }
#hesapDurum.hata { color: #f28b82; }
#hesapDurum.tamam { color: var(--yesil); }
.planTablo { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 13px; }
.planTablo th, .planTablo td { padding: 6px 8px; border-bottom: 1px solid var(--kutu); text-align: center; }
.planTablo th:first-child, .planTablo td:first-child { text-align: left; color: var(--soluk); }
.planTablo th:last-child { color: var(--sari); }
.planRozet {
  position: absolute;
  z-index: 9;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(32, 33, 36, .85);
  border: 1px solid var(--kutu);
  color: var(--soluk);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.planRozet.premium { color: var(--sari); }
.planRozet.az { color: #202124; background: var(--sari); border-color: var(--sari); font-weight: 600; }
.kisiPremium { margin-left: 6px; font-size: 13px; }
.premiumNot { margin: 6px 0 10px; color: var(--sari); }

/* ================= SES BAGLANTISI / PING (sesBaglantisi.js) ================= */
.pingGosterge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  color: var(--soluk);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}
.pingGosterge .rozet.kalite { display: inline-flex; height: 15px; padding: 0; background: none; }
/* Kisinin kutucugunda: cubuklar ve ping */
.kutucuk.pingVar .rozet.kalite { display: inline-flex; }
.rozet.kalite b {
  display: block;
  align-self: center;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}
.rozet.kalite b:empty { display: none; }
/* Dar pencere (yarim ekran ve altı): sol taraf orta dugmelerin altina girmesin */
@media (max-width: 1000px) {
  #kontrol .sol { gap: 8px; }
  #kontrol .sol .ayrac { display: none; }
  #kontrol .orta { gap: 8px; }
}
@media (max-width: 900px) {
  #kontrol { padding: 0 14px; }
  #kontrol .sag .panelBtn { width: 40px; }
}
@media (max-width: 860px) {
  .pingGosterge .pingMs { display: none; } /* ping yine ipucunda */
}

/* ================= SOHBET (sohbetler.js): yazilamayan konusma ================= */
.sohbetKapali { margin: 0 4px 4px; padding: 10px 12px; border-radius: 8px; background: var(--zemin); color: var(--soluk); font-size: 12px; text-align: center; }
#sohbet.yazilamaz .mesajYaz, #sohbet.yazilamaz #sohbetModu { display: none; }

/* ================= MESAJ SESLERI (bildirimler.js) ================= */
.mesajSesleri { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; margin: 10px 0 0 28px; }
.mesajSesSatir { display: contents; }
.mesajSesSatir > span { font-size: 13px; white-space: nowrap; }
.mesajSesSatir select { padding: 7px 10px; font-size: 13px; }
.mesajSesSatir .ikonBtn { width: 34px; height: 34px; color: var(--metin); }
.mesajSesSatir .ikonBtn svg { width: 18px; height: 18px; }
.ayarGrup > .mesajSesDurum { margin-left: 28px; }
.mesajSesDurum:empty { display: none; }

/* ================= ARKADASLAR (arkadaslar.js) ================= */
.arkadasKart {
  flex: 1 1 280px;
  max-width: 340px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 18px 12px 14px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}
@media (max-width: 1000px) {
  .arkadasKart { flex-basis: 100%; max-width: 860px; }
}
.arkadasBolum { display: flex; flex-direction: column; gap: 2px; }
.arkadasBolum .aciklama { margin: 4px 8px 8px; }
#gorusmeArkadaslar { margin: 0 8px 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
#gorusmeArkadaslar:empty { display: none; }
.arkadasUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 2px 4px 8px; }
.arkadasUst b { font-size: 15px; font-weight: 600; }
.arkadasSayi { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--yesil); }
.arkadasUst .ikonBtn { width: 36px; height: 36px; color: var(--metin); }
.arkadasUst .ikonBtn.aktif { background: rgba(138, 180, 248, .16); color: var(--mavi); }
.arkadasEkleKap { display: flex; flex-direction: column; gap: 4px; margin: 0 4px 8px; }
.arkadasEkleKap .aciklama { margin: 2px 4px 0; }
.arkadasEkle { display: flex; gap: 6px; }
.arkadasEkle input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; }
.arkadasEkle button { padding: 8px 14px; font-size: 13px; }
.arkadasSatir { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 8px; border-radius: 10px; }
.arkadasSatir:hover { background: rgba(255, 255, 255, .04); }
.arkadasSatir.cevrimdisi .arkadasAvatar, .arkadasSatir.cevrimdisi .arkadasBilgi { opacity: .55; }
.arkadasAvatar { position: relative; flex: none; }
.halNokta { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--panel); background: var(--kenar); }
.arkadasSatir.cevrimici .halNokta { background: var(--yesil); }
.arkadasSatir.odada .halNokta, .arkadasSatir.burada .halNokta { background: var(--mavi); }
.arkadasBilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arkadasBilgi b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arkadasBilgi small { font-size: 12px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arkadasSatir.odada .arkadasBilgi small, .arkadasSatir.burada .arkadasBilgi small { color: var(--mavi); }
.arkadasDugme { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--kenar); color: var(--mavi); font-size: 12px; font-weight: 500; white-space: nowrap; }
.arkadasDugme:hover { background: rgba(138, 180, 248, .1); }
.arkadasDugme.birincil { border-color: var(--mavi); color: #202124; }
.arkadasBolum > .arkadasDugme { align-self: flex-start; margin: 0 8px; }
.arkadasAra { width: 34px; height: 34px; flex: none; color: var(--yesil); }
.arkadasAra svg { width: 19px; height: 19px; }
.arkadasMenu { width: 30px; height: 30px; flex: none; opacity: 0; }
.arkadasSatir:hover .arkadasMenu, .arkadasMenu:focus-visible { opacity: 1; }

/* Gelen arama karti */
.cagriKart {
  position: fixed;
  z-index: 60;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  outline: 1px solid rgba(138, 180, 248, .35);
  animation: cagriGel 220ms ease-out;
}
@keyframes cagriGel { from { opacity: 0; transform: translate(-50%, -12px); } }
.cagriKart .avatar { width: 48px; height: 48px; flex: none; font-size: 20px; animation: cagriNabiz 1.6s ease-in-out infinite; }
.cagriKart .avatar.emoji { font-size: 26px; }
@keyframes cagriNabiz { 50% { box-shadow: 0 0 0 7px rgba(129, 201, 149, .25); } }
.cagriYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cagriYazi b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cagriYazi small { font-size: 12px; color: var(--soluk); }
.cagriDugmeler { display: flex; gap: 10px; flex: none; }
.cagriDugmeler .yuvarlak { width: 46px; height: 46px; }
.cagriDugmeler .yuvarlak.ayril { width: 46px; }
.yuvarlak.cagriKabul { background: #1e8e3e; color: #fff; }
.yuvarlak.cagriKabul:hover { background: #26a64a; }
@media (prefers-reduced-motion: reduce) {
  .cagriKart, .cagriKart .avatar { animation: none; }
}

/* ================= SAHNE YAKINLASTIRMA (yakinlastirma.js) ================= */
#sahneVideo { transform-origin: 0 0; }
.yakinlastirma { display: flex; align-items: center; gap: 0; margin-left: 6px; }
.sahneUst .yakinlastirma .ikonBtn { margin-left: 0; width: 34px; height: 34px; }
.yakinlastirma .ikonBtn svg { width: 18px; height: 18px; }
.yakinlastirma .ikonBtn:disabled { opacity: .35; }
#btnOlcek { min-width: 50px; padding: 4px 6px; border-radius: 6px; color: var(--metin); font-size: 12px; font-variant-numeric: tabular-nums; }
#btnOlcek:hover { background: rgba(255, 255, 255, .1); }
#sahne.kendi .yakinlastirma, #sahne.tahtaModu .yakinlastirma { display: none; }
#sahne.yakin:not(.cizimAcik) #sahneVideo { cursor: grab; }
#sahne.yakin.suruklen:not(.cizimAcik) #sahneVideo { cursor: grabbing; }

/* ================= KABUK: Discord duzeni (odalar.js) ================= */
/* Solda odalar cubugu, yanda ana sayfanin ya da odanin kanallari, ortada icerik. */
.kabuk { display: grid; grid-template-columns: 72px 240px minmax(0, 1fr); height: 100vh; }
.icerik { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--zemin); }
.icerik > .ekran { flex: 1; }
.menuDugme { display: none; }

/* --- odalar cubugu --- */
.odaRay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: #151619;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.odaRay::-webkit-scrollbar { display: none; }
.rayOdalar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rayOdalar:empty { display: none; }
.rayOge {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: border-radius 150ms ease, background-color 150ms ease;
}
.rayOge:hover, .rayOge.aktif { border-radius: 16px; }
.rayOge::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--metin);
  transform: translateY(-50%);
  transition: height 150ms ease;
}
.rayOge:hover::before { height: 20px; }
.rayOge.aktif::before { height: 36px; }
.rayAna img { width: 30px; height: 30px; }
.rayAna.aktif { background: var(--mavi); }
.rayAyrac { flex: none; width: 32px; height: 2px; border-radius: 1px; background: var(--panel); }
.rayEkle { color: var(--yesil); }
.rayEkle svg { width: 24px; height: 24px; }
.rayEkle:hover { background: var(--yesil); color: #202124; }
.rayOda.gecici { outline: 2px dashed var(--kenar); outline-offset: -2px; }
.rayNokta {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 4px solid #151619;
  background: var(--mavi);
}
.rayNokta.bagli { background: var(--yesil); }

/* --- yan sutun --- */
.yanSutun { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #1c1d20; }
.sutunIcerik { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sutunUst {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #141517;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.kodlaKatil {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #141517;
  color: var(--soluk);
  font-size: 13px;
  text-align: left;
}
.kodlaKatil:hover { color: var(--metin); }
.sutunListe { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.sutunBaslik {
  padding: 16px 8px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--soluk);
}
.sutunOge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--soluk);
  font-size: 15px;
  text-align: left;
}
.sutunOge svg { width: 20px; height: 20px; }
.sutunOge:hover:not(:disabled) { background: rgba(255, 255, 255, .05); color: var(--metin); }
.sutunOge.aktif { background: rgba(255, 255, 255, .09); color: var(--metin); font-weight: 600; }
.sutunOge:disabled { opacity: .45; cursor: default; }
.sutunOgeAd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sutunRozet {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--kirmizi);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.sutunSayi { flex: none; font-size: 12px; color: var(--soluk); }
/* Biri tahtaya cizince kanalin sagindaki sari nokta (ortak.js .yeni) */
.sutunOge#btnTahta.yeni::after { top: 50%; right: 12px; transform: translateY(-50%); }

/* Odalarim (ana sayfa sutunu) */
.odalarListe { display: flex; flex-direction: column; gap: 2px; }
.odaSatir { min-height: 44px; }
.odaSatirSimge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.odaSatirYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; }
.odaSatirYazi b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaSatirYazi small { font-size: 12px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaSatirYazi small.canli { color: var(--yesil); }
.odalarBos { margin: 4px 8px; font-size: 12px; color: var(--soluk); }

/* Oda basligi ve kanallar */
.odaBaslik { width: 100%; justify-content: space-between; gap: 8px; padding: 0 12px; text-align: left; color: var(--metin); }
.odaBaslik:hover { background: rgba(255, 255, 255, .04); }
.odaBaslikYazi { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.odaBaslikYazi b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaBaslikYazi small { font-size: 12px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaBaslik svg { width: 20px; height: 20px; }
.kanalKisiler { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 28px; }
.kanalKisiler:empty { display: none; }
.kanalKisi {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--soluk);
  font-size: 14px;
  text-align: left;
}
.kanalKisi:hover { background: rgba(255, 255, 255, .05); color: var(--metin); }
.kanalKisi .avatar { width: 24px; height: 24px; flex: none; font-size: 11px; font-weight: 600; }
.kanalKisi .avatar.emoji { font-size: 14px; }
.kanalKisi.konusuyor .avatar { box-shadow: 0 0 0 2px var(--yesil); }
.kanalKisiAd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanalKisi.ben .kanalKisiAd { color: var(--metin); }
.kanalEtiket {
  flex: none;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--mavi);
  color: #202124;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 16px;
}
.kanalKisi svg { width: 15px; height: 15px; color: #f28b82; }
.kanalNot { margin: 12px 8px 0; font-size: 12px; color: var(--soluk); }

/* Sesli kanallar (kanallar.js) */
.kanalBaslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanalEkle { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--soluk); }
.kanalEkle:hover { color: var(--metin); background: rgba(255, 255, 255, .08); }
.kanalEkle svg { width: 16px; height: 16px; }
.sesliKanallar { display: flex; flex-direction: column; gap: 2px; }
.kanalSatir { position: relative; }
.kanalSatir .kanalSesli { width: 100%; }
.kanalSesli.bagli { color: var(--metin); }
.kanalSesli.bagli svg { color: var(--yesil); }
.kanalAyar {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: none;
  place-items: center;
  border-radius: 4px;
  color: var(--soluk);
}
.kanalSatir:hover .kanalAyar, .kanalAyar:focus-visible { display: grid; }
.kanalAyar:hover { color: var(--metin); background: rgba(255, 255, 255, .08); }
.kanalAyar svg { width: 16px; height: 16px; }
.kanalSatir:has(.kanalAyar):hover .sutunSayi { visibility: hidden; }
.kanalKisi.uzak { cursor: default; }
.kanalKisi.uzak:hover { background: none; color: var(--soluk); }
.yoneticiListe { display: flex; flex-direction: column; gap: 8px; }
.yoneticiSatir { display: flex; align-items: center; gap: 10px; }
.yoneticiAd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- ses baglantisi ve kullanici paneli --- */
.sesPanel {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 6px;
  background: #18191b;
  border-bottom: 1px solid #222326;
}
.sesPanelYazi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 4px;
  border-radius: 6px;
  text-align: left;
  line-height: 1.3;
}
.sesPanelYazi b { color: var(--yesil); font-size: 13px; }
.sesPanelYazi small { color: var(--soluk); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesPanelYazi:hover small { color: var(--metin); }
.sesPanel .pingGosterge { flex: none; gap: 5px; padding: 6px 2px; font-size: 12px; }
.sesPanel .pingMs { display: inline; min-width: 40px; }
.sesAyril { width: 32px; height: 32px; color: #f28b82; }
.kullaniciPanel {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 8px;
  background: #18191b;
}
.kullaniciPanel .avatarDugme { width: 34px; height: 34px; font-size: 15px; }
.kullaniciPanel .avatarDugme.emoji { font-size: 18px; }
.kullaniciYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.kullaniciYazi b { max-width: 100%; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kullaniciPanel .lobiHesap {
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 6px;
  border: 0;
  border-radius: 0;
  color: var(--soluk);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}
.kullaniciPanel .lobiHesap:hover { background: none; color: var(--metin); }
.kullaniciPanel .lobiHesap > span:first-child { display: none; } /* hesap adi; ustte gorunen ad var */
.kullaniciPanel .planEtiket { padding: 0; background: none; font-size: 12px; }
.kullaniciPanel .ikonBtn { width: 32px; height: 32px; color: var(--soluk); }
.kullaniciPanel .ikonBtn:hover { color: var(--metin); }
.panelMik .ikonKapali { display: none; }
.panelMik.kapali .ikonAcik { display: none; }
.panelMik.kapali .ikonKapali { display: block; }
.panelMik.kapali { color: #f28b82; }

/* --- icerik basliklari --- */
.icerikUst {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid #191a1c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.icerikBaslik { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
.icerikBaslik > span { overflow: hidden; text-overflow: ellipsis; }
.icerikBaslik svg { width: 20px; height: 20px; color: var(--soluk); }
.gorusmeUst .ustDugmeler { margin-left: auto; display: flex; gap: 2px; }
.gorusmeUst .panelBtn { width: 38px; height: 38px; }
.gorusmeUst .panelBtn svg { width: 20px; height: 20px; }
#gorusme > .baglantiUyari { top: 64px; }

/* --- odaya giris --- */
.lobiSagBaslik { margin: 0 0 2px; font-size: 22px; font-weight: 700; }
.odaKaydet {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--mavi);
  font-size: 13px;
}
.odaKaydet svg { width: 18px; height: 18px; }
.odaKaydet:hover { background: rgba(138, 180, 248, .1); }

/* --- oda ekle / duzenle penceresi --- */
.odaPencere { width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; }
.odaPencere h2 { margin: 0; }
.odaPencere .durum { min-height: 0; text-align: left; }
.odaPencere .durum:empty { display: none; }

/* --- ana sayfa: arkadaslar --- */
.arkadasSekmeler {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--kutu);
  overflow-x: auto;
  scrollbar-width: none;
}
.arkadasSekmeler button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  color: var(--soluk);
  font-size: 14px;
}
.arkadasSekmeler button:hover { background: rgba(255, 255, 255, .05); color: var(--metin); }
.arkadasSekmeler button.aktif { background: var(--kutu); color: var(--metin); font-weight: 600; }
.arkadasSekmeler button.ekle { background: var(--mavi); color: #202124; font-weight: 600; }
.arkadasSekmeler button.ekle.aktif { background: transparent; color: var(--mavi); }
.arkadasSekmeler .sutunRozet { min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
.anaGovde { flex: 1; min-height: 0; display: flex; }
.arkadasSayfa { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px 16px 24px; gap: 0; }
.listeBaslik { padding: 4px 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--soluk); }
.arkadasSayfa .arkadasSatir { padding: 10px 8px; border-radius: 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
.arkadasSayfa .arkadasSatir:hover { border-top-color: transparent; background: rgba(255, 255, 255, .05); }
.arkadasSayfa .arkadasSatir .avatar.kucuk { width: 38px; height: 38px; }
.arkadasSayfa .arkadasBilgi b { font-size: 15px; font-weight: 600; }
.arkadasSayfa .arkadasBilgi small { font-size: 13px; }
.arkadasSayfa .halNokta { border-color: var(--zemin); }
.arkadasSayfa .arkadasAra { background: var(--panel); border-radius: 50%; }
.arkadasSayfa .arkadasMenu { opacity: 1; background: var(--panel); border-radius: 50%; }
.arkadasSayfa .arkadasEkleKap { max-width: 560px; margin: 0 0 12px; }
.arkadasSayfa .arkadasEkle input { padding: 10px 12px; font-size: 14px; }
.arkadasSayfa .arkadasEkle button { padding: 10px 16px; font-size: 14px; }
.arkadasSayfa > .aciklama { margin: 4px 2px 12px; }
.ekleBaslik { margin: 0 0 4px; font-size: 16px; }
.hosgeldin {
  max-width: 520px;
  margin: 32px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hosgeldin img { width: 104px; height: 104px; }
.hosgeldin h2 { margin: 0; font-size: 22px; }
.hosgeldin p { margin: 0; color: var(--soluk); }
.hosgeldinDugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.hosgeldinDugmeler button { padding: 10px 18px; border-radius: 999px; font-weight: 600; }
.hosgeldinDugmeler button:not(.birincil) { border: 1px solid var(--kenar); color: var(--metin); }
.aktifGorusmeler {
  flex: 0 0 300px;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border-left: 1px solid #191a1c;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aktifGorusmeler h2 { margin: 4px 0; font-size: 17px; }
.aktifGorusmeler > p { margin: 0; color: var(--soluk); font-size: 13px; }
.aktifKart { padding: 14px; border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.aktifKartUst { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aktifKartUst .odaSatirSimge { width: 36px; height: 36px; border-radius: 10px; }
.aktifKartYazi { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.aktifKartYazi b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aktifKartYazi small { font-size: 12px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aktifKart .birincil { padding: 8px; }
#anaSayfa > .surum { flex: none; margin: 0; padding: 6px 8px 8px; }
@media (max-width: 1100px) {
  .aktifGorusmeler { display: none; }
}

/* --- dar pencere / telefon: odalar ve kanallar soldan acilir --- */
@media (max-width: 760px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .odaRay, .yanSutun {
    position: fixed;
    z-index: 45;
    top: 0;
    bottom: 0;
    transition: transform 180ms ease;
  }
  .odaRay { left: 0; width: 72px; transform: translateX(-100%); }
  .yanSutun { left: 72px; width: min(260px, calc(100vw - 72px)); transform: translateX(calc(-100% - 72px)); }
  .kabuk.menuAcik .odaRay, .kabuk.menuAcik .yanSutun { transform: none; box-shadow: 8px 0 24px rgba(0, 0, 0, .45); }
  .menuDugme { display: grid; position: absolute; z-index: 30; top: 8px; left: 8px; width: 36px; height: 36px; color: var(--metin); }
  .icerikUst { padding-left: 52px; }
  .arkadasSayfa { padding: 12px; }
  .lobiGovde { padding: 12px; }
  .lobiKart { padding: 18px 16px; gap: 20px; }
}

/* ================= ODA EKRANI: sohbet ortada, gorusme sagda (sohbetler.js) ================= */
#odaEkran { flex-direction: row; }
.sohbetSutun { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sohbetUst .icerikBaslik { gap: 6px; }
.sohbetSimge { flex: none; color: var(--soluk); font-size: 20px; font-weight: 500; line-height: 1; }
.sohbetSimge.avatar { width: 24px; height: 24px; font-size: 11px; font-weight: 600; }
.sohbetAciklama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); font-size: 13px; border-left: 1px solid var(--kenar); padding-left: 12px; }
.sohbetAciklama:empty { display: none; }

/* Sohbet: ortada her zaman acik */
#sohbet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#sohbet .mesajAlt { padding-bottom: 6px; }
#mesajListe { padding: 8px 20px 12px; }
.dahaEski { flex: none; align-self: center; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--mavi); background: rgba(138, 180, 248, .1); }
.dahaEski:hover { background: rgba(138, 180, 248, .18); }

/* Ekran paylasilirken (ya da tahta acikken) sahne sohbetin ustunde */
.sohbetSutun > #sahne { flex: 3 1 0; min-height: 180px; margin: 12px 16px 0; }
.sahneVar #sohbet { flex: 2 1 0; min-height: 200px; }

/* Gorusme: sag sutun, kutucuklar alt alta */
.gorusmeSutun { flex: 0 0 340px; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; border-left: 1px solid #191a1c; background: #1b1c1f; }
.gorusmeSutun.gizli { display: none !important; }
.gorusmeSutun #alan { flex-direction: column; gap: 10px; padding: 12px 12px 0; }
#kutucuklar, .sahneVar #kutucuklar {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  overflow-y: auto;
  gap: 10px;
}
#kutucuklar .kutucuk { width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; }
#kutucuklar .avatar { width: 30%; font-size: 22px; }
#kutucuklar .avatar.emoji { font-size: 30px; }
#btnGorunum { display: none; }
.gorusmeSutun #kutucuklar .kutucuk.buyuk { width: 100%; height: auto; margin: 0; }
.gorusmeSutun #yanPanel { flex: 1 1 auto; }
.gorusmeSutun.panelAcik #kutucuklar { display: none; }
.gorusmeSutun #kontrol { height: 72px; padding: 0 8px; }
.gorusmeSutun #kontrol .orta { gap: 8px; }
.gorusmeSutun .gorusmeUst { padding-left: 14px; }
.gorusmeSutun .gorusmeUst .icerikBaslik { font-size: 14px; }
.gorusmeSutun .baglantiUyari { top: 60px; white-space: normal; text-align: center; }

/* Sol sutun: sohbet kanallari ve ozel mesajlar */
.kanalYazi svg { color: var(--soluk); }
.kanalYazi .yaziIsaret { flex: none; width: 20px; text-align: center; font-size: 19px; line-height: 1; color: var(--soluk); }
.kanalYazi.okunmadi { color: var(--metin); font-weight: 600; }
.kanalYazi.okunmadi::before { content: ''; position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: var(--metin); }
.kanalSatir .kanalYazi { position: relative; width: 100%; }
.ozelListe { display: flex; flex-direction: column; gap: 1px; }
.ozelSatir { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 6px; color: var(--soluk); font-size: 14px; text-align: left; width: 100%; }
.ozelSatir:hover { background: rgba(255, 255, 255, .05); color: var(--metin); }
.ozelSatir.aktif { background: rgba(255, 255, 255, .09); color: var(--metin); }
.ozelSatir.okunmadi { color: var(--metin); font-weight: 600; }
.ozelSatir .avatar { position: relative; width: 30px; height: 30px; flex: none; font-size: 12px; font-weight: 600; overflow: visible; }
.ozelSatir .avatar.emoji { font-size: 16px; }
.ozelSatir .avatar.cevrimici::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); border: 2px solid #26272a; }
.ozelSatirYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ozelSatirYazi b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozelSatirYazi small { font-size: 12px; font-weight: 400; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozelBos { margin: 2px 8px 4px; font-size: 12px; color: var(--soluk); }

/* Dar pencere: gorusme ustte, kutucuklar yatay serit; sohbet altta */
@media (max-width: 900px) {
  #odaEkran { flex-direction: column; }
  .gorusmeSutun { order: -1; flex: 0 0 auto; max-height: 48%; border-left: 0; border-bottom: 1px solid #191a1c; }
  .gorusmeSutun #alan { flex-direction: row; }
  #kutucuklar, .sahneVar #kutucuklar { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  #kutucuklar .kutucuk { width: 180px; }
}

/* ================= GIRIS KAPISI (hesap.js) ================= */
/* Notr zemin + hafif doku (duz ve steril olmasin), tek vurgu rengi; solda kisa tanitim, sagda form.
   Guncelleme seridi (25) ve bildirimler (30) ustte kalsin. */
.girisKapisi {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(28px, 6vw, 64px);
  overflow-y: auto;
  background-color: #1c1d20;
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .045) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.girisKapisi.bekliyor .kapiIc { visibility: hidden; }
.kapiIc {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
  align-items: center;
  gap: clamp(32px, 7vw, 104px);
}
.kapiTanitim { display: flex; flex-direction: column; gap: 22px; padding-bottom: 12px; }
.kapiIkon { width: 72px; height: 72px; border-radius: 18px; }
.kapiSlogan {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.kapiMaddeler { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 46ch; color: var(--soluk); font-size: 15px; }
.kapiMaddeler li { display: flex; align-items: baseline; gap: 12px; }
.kapiMaddeler li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--mavi); transform: translateY(-2px); opacity: .85; }
.kapiKart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 22px;
  border-radius: 16px;
  background: #26272b;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 48px -12px rgba(8, 9, 12, .55);
}
.kapiKart h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.kapiKart > .aciklama { margin: -8px 0 2px; color: var(--soluk); font-size: 13px; text-wrap: pretty; }
.kapiKart .alanUst { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kapiDegis { margin: 0; text-align: center; color: var(--soluk); font-size: 13px; }
.kapiKart input { border-radius: 9px; transition: border-color 160ms; }
.kapiKart input[aria-invalid="true"] { border-color: #f28b82; }
#kapiKod { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .32em; text-align: center; padding: 10px 8px 10px calc(8px + .32em); }
.kapiKart .durum { margin: 0; text-align: left; }
.kapiKart .durum:empty { display: none; }
.kapiKart .durum.tamam { color: var(--yesil); }
#btnKapiGonder { padding: 12px; font-size: 15px; border-radius: 10px; transition: background 180ms, transform 120ms; }
#btnKapiGonder:not(:disabled):active { transform: scale(.98); }
.kapiAlt { display: flex; justify-content: space-between; gap: 8px; min-height: 20px; }
.baglantiDugme { padding: 2px 0; color: var(--mavi); font-size: 13px; transition: color 160ms; }
.baglantiDugme:hover { color: #aecbfa; text-decoration: underline; text-underline-offset: 3px; }
.kapiSunucu { border-top: 1px solid #323338; padding-top: 12px; }
.kapiSunucu summary { cursor: pointer; color: var(--soluk); font-size: 12px; width: fit-content; }
.kapiSunucu input { width: 100%; margin-top: 8px; }
@media (max-width: 760px) {
  .kapiIc { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 22px; }
  .kapiTanitim { flex-direction: row; align-items: center; gap: 14px; padding: 0; }
  .kapiIkon { width: 52px; height: 52px; border-radius: 14px; }
  .kapiSlogan { max-width: none; font-size: 20px; }
  .kapiMaddeler { display: none; }
}
/* Giris kapisi acikken dar ekrandaki menu dugmesi de gizli (kapinin ustunde kalmasin) */
body:has(#girisKapisi:not(.gizli)) .menuDugme { display: none; }

/* ================= SUNUCULAR (sunucular.js) ================= */
/* Sol cubukta sunucu simgesi: yuklenen resim ya da sunucuya ozgu renkte bas harfler.
   Ozel gorusme (arkadasla arama) gorusme suresince gecici bir simgeyle durur. */
.rayOda { padding: 0; }
.raySimge {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.raySimge img { width: 100%; height: 100%; object-fit: cover; }
.rayOda.ozelGorusme .raySimge { background: #233227; color: var(--yesil); }
.rayOda.ozelGorusme svg { width: 22px; height: 22px; fill: currentColor; }
.rayOge:active { transform: translateY(1px); }

/* Ozel gorusmenin sutununda sunucuya ait bolumler yok */
.ozelSutun .sunucuBolum, .ozelSutun #odaOzeller { display: none; }
.ozelSutun #btnOdaMenu { cursor: default; }
.ozelSutun #btnOdaMenu svg { display: none; }

/* Pencereler */
.modal input[aria-invalid="true"] { border-color: #f28b82; }
.modalAlt .modalSol { margin-right: auto; }
.simgeSec { display: flex; align-items: center; gap: 14px; }
.simgeOnizleme {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #26272b;
  border: 1px dashed var(--kenar);
  color: var(--soluk);
  font-size: 22px;
  font-weight: 600;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
button.simgeOnizleme:hover { border-color: var(--mavi); color: var(--mavi); }
button.simgeOnizleme:active { transform: scale(.97); }
.simgeOnizleme.buyuk { width: 80px; height: 80px; border-radius: 24px; border: 0; color: #fff; font-size: 26px; }
.simgeOnizleme svg { width: 26px; height: 26px; fill: currentColor; }
.simgeOnizleme img, .simgeIc img { width: 100%; height: 100%; object-fit: cover; }
.simgeIc { width: 100%; height: 100%; display: grid; place-items: center; }
.simgeYazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.simgeDugmeler { display: flex; gap: 8px; margin-top: 8px; }
.simgeDugmeler button:not(.birincil), .davetAyar > button, .ayarKaldir, .ayarMenu {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--kenar);
  color: var(--metin);
  font-size: 13px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.simgeDugmeler button:not(.birincil):hover, .davetAyar > button:hover, .ayarKaldir:hover, .ayarMenu:hover {
  background: rgba(255, 255, 255, .06);
  border-color: #80868b;
}
.simgeDugmeler .birincil { padding: 7px 16px; }

.sunucuKart { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: #26272b; }
.sunucuKartSimge {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.sunucuKartSimge img { width: 100%; height: 100%; object-fit: cover; }
.sunucuKartYazi { display: flex; flex-direction: column; min-width: 0; }
.sunucuKartYazi b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sunucuKartYazi small { color: var(--soluk); font-size: 12px; }

#davetLink { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
.davetAyar summary { cursor: pointer; color: var(--soluk); font-size: 13px; }
.davetAyar summary:hover { color: var(--metin); }
.davetAyar[open] summary { margin-bottom: 10px; }
.davetAyarSatir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }

.sunucuAyar { width: min(560px, calc(100vw - 32px)); max-height: min(660px, calc(100vh - 48px)); display: flex; flex-direction: column; gap: 14px; }
.sunucuAyar h2 { margin: 0; letter-spacing: -.01em; }
.sunucuAyar .hesapSekmeler { margin-bottom: 0; flex-wrap: wrap; }
.sunucuAyarGovde { flex: 1; min-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; }
.sunucuAyar .durum:empty { display: none; }
.ayarListe { display: flex; flex-direction: column; gap: 2px; }
.ayarSatir { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: 10px; }
.ayarSatir:hover { background: rgba(255, 255, 255, .04); }
.ayarSatir .avatar.kucuk { position: relative; overflow: visible; }
.ayarSatir .avatar.cevrimici::after, .uyeSatir .avatar.cevrimici::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yesil);
  border: 2px solid #2d2e31;
}
.ayarSatirYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ayarSatirYazi b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ayarSatirYazi small { color: var(--soluk); font-size: 12px; }
.kodYazi { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .02em; }
.ayarMenu { width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: 18px; line-height: 1; }
.tehlikeBolum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(242, 139, 130, .35);
  border-radius: 14px;
}
.tehlikeBolum > div { display: flex; flex-direction: column; gap: 2px; }
.tehlikeDugme { flex: none; padding: 8px 16px; border-radius: 999px; background: rgba(242, 139, 130, .12); color: #f28b82; font-weight: 600; transition: background-color 150ms ease, color 150ms ease; }
.tehlikeDugme:hover { background: #f28b82; color: #202124; }
.tehlikeDugme:active { transform: scale(.98); }

/* Sagdaki uye listesi: cevrimici ustte, cevrimdisi soluk */
.uyeSutun { flex: 0 0 240px; min-width: 0; min-height: 0; overflow-y: auto; background: #1b1c1f; border-left: 1px solid #191a1c; }
.uyeSutun.gizli { display: none !important; }
.uyeListe { display: flex; flex-direction: column; gap: 1px; padding: 18px 8px 24px; }
.uyeBaslik { margin: 16px 8px 6px; font-size: 12px; font-weight: 600; color: var(--soluk); letter-spacing: .02em; }
.uyeBaslik:first-child { margin-top: 0; }
.uyeSatir {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--metin);
  font-size: 14px;
  text-align: left;
  width: 100%;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.uyeSatir:hover { background: rgba(255, 255, 255, .06); }
.uyeSatir:active { background: rgba(255, 255, 255, .09); }
.uyeSatir.cevrimdisi { opacity: .45; }
.uyeSatir.cevrimdisi:hover { opacity: .85; }
.uyeSatir .avatar { position: relative; width: 32px; height: 32px; flex: none; font-size: 13px; font-weight: 600; overflow: visible; }
.uyeSatir .avatar.emoji { font-size: 17px; }
.uyeSatir .avatar.cevrimici::after { border-color: #1b1c1f; }
.uyeAd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uyeRozet { flex: none; font-size: 13px; }
.uyeRozet.yonetici { color: var(--mavi); }
.uyeBos { margin: 4px 8px; font-size: 12px; color: var(--soluk); }
.uyeDavet { margin: 8px 8px 0; padding: 9px 12px; border-radius: 10px; background: rgba(138, 180, 248, .12); color: var(--mavi); font-weight: 600; font-size: 13px; transition: background-color 150ms ease; }
.uyeDavet:hover { background: rgba(138, 180, 248, .2); }
.sohbetUstDugme { margin-left: auto; color: var(--soluk); }
.sohbetUstDugme.aktif { color: var(--metin); }
.odaSatirSimge.belirsiz { background: #3a3b3f; font-size: 15px; }
@media (max-width: 1100px) { .uyeSutun { flex-basis: 204px; } }
@media (max-width: 900px) { .uyeSutun, #btnUyeler { display: none !important; } }

/* ================= KATEGORILER, ROLLER VE IZINLER (kanallar.js, sunucular.js) ================= */
/* Kanal agaci: once kategorisiz kanallar, sonra daraltilabilir kategoriler */
.kanalAgaci { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.kategoriGrup { display: flex; flex-direction: column; gap: 2px; }
.kategori { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.kategoriBaslik { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 4px 2px 0; border-radius: 6px; }
.kategoriAc {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  color: var(--soluk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  transition: color 120ms ease;
}
.kategoriAc:hover { color: var(--metin); }
.kategoriAc svg { flex: none; width: 14px; height: 14px; fill: currentColor; transition: transform 150ms ease; }
.kategoriAc.kapali svg { transform: rotate(-90deg); }
.kategoriAd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kategoriBaslik .kanalEkle { opacity: 0; transition: opacity 120ms ease; }
.kategoriBaslik:hover .kanalEkle, .kategoriBaslik .kanalEkle:focus-visible { opacity: 1; }
.kategoriBos { margin: 0 8px 4px 18px; font-size: 12px; color: var(--soluk); }
.kilitIsaret { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 2px; color: var(--soluk); }
.kilitIsaret svg { width: 12px; height: 12px; fill: currentColor; }
.kanalSesli.kilitli { opacity: .55; }
.kanalSesli.kilitli:hover { cursor: not-allowed; }

/* Surukle-birak: birakilacak yerin ustunde ince cizgi */
.surukleniyor { opacity: .4; }
.kanalSatir.birakHedef::before, .kategoriBaslik.birakHedef::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: -2px;
  height: 2px;
  border-radius: 1px;
  background: var(--mavi);
}

/* Kanal olustur: tur secimi */
.kanalTurSec { display: flex; flex-direction: column; gap: 8px; }
.kanalTur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #26272b;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.kanalTur:hover { background: #2b2c30; }
.kanalTur:has(input:checked) { border-color: var(--mavi); background: rgba(138, 180, 248, .08); }
.kanalTur:has(input:focus-visible) { outline: 2px solid var(--mavi); outline-offset: 2px; }
.kanalTur input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--mavi); }
.kanalTurIsaret { flex: none; width: 22px; text-align: center; font-size: 20px; line-height: 1; color: var(--soluk); }
svg.kanalTurIsaret { height: 20px; fill: currentColor; }
.kanalTurYazi { display: flex; flex-direction: column; line-height: 1.3; }
.kanalTurYazi b { font-weight: 600; }
.kanalTurYazi small { color: var(--soluk); font-size: 12px; }

/* Kanal izinleri penceresi */
.kanalIzinPencere { width: min(480px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); display: flex; flex-direction: column; gap: 14px; }
.kanalIzinGovde { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-right: 4px; }
.kanalIzinGovde > .aciklama { margin: 0; }
.izinBolumler { display: flex; flex-direction: column; gap: 16px; transition: opacity 150ms ease; }
.izinBolumler.devreDisi { opacity: .4; pointer-events: none; }
.izinBolum { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.izinBolum legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.izinRoller { display: flex; flex-direction: column; gap: 6px; margin-left: 28px; padding: 10px 12px; border-radius: 10px; background: #26272b; }
.izinRoller .aciklama { margin: 0; }
.izinRol { font-size: 13px; }
.izinMiras { align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #26272b; }
.izinMiras input { margin-top: 2px; flex: none; }
.izinMiras > span { display: flex; flex-direction: column; gap: 1px; }
.izinMiras b { font-weight: 500; }
.rolNokta { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.rolNokta.buyuk { width: 14px; height: 14px; }
.metinDugme { padding: 0; color: var(--mavi); font-size: inherit; font-weight: 600; }
.metinDugme:hover { text-decoration: underline; }

/* Sunucu ayarlari > Roller */
.rolUst { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rolUst .aciklama { margin: 0; max-width: 46ch; }
.rolUst .birincil { flex: none; padding: 8px 16px; }
.rolBos { margin: 0 8px 6px; }
.rolSatir { gap: 6px; }
.rolSatirAc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 2px 4px; border-radius: 8px; text-align: left; }
.rolSatirAc:focus-visible { outline: 2px solid var(--mavi); }
.rolSatirAc .ayarSatirYazi b { font-weight: 600; }
.ayarMenu.ikonlu { display: grid; place-items: center; }
.ayarMenu.ikonlu svg { width: 18px; height: 18px; fill: currentColor; }
.ayarMenu:disabled { opacity: .3; cursor: default; background: none; border-color: var(--kenar); }
.rolDuzenUst { display: flex; align-items: center; gap: 10px; min-width: 0; }
.geriDugme {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  color: var(--soluk);
  font-size: 13px;
  transition: background-color 150ms ease, color 150ms ease;
}
.geriDugme:hover { color: var(--metin); background: rgba(255, 255, 255, .06); }
.geriDugme svg { width: 18px; height: 18px; fill: currentColor; }
.rolDuzenAd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
.rolRenkler { display: flex; flex-wrap: wrap; gap: 8px; }
.rolRenk { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; transition: transform 120ms ease, box-shadow 120ms ease; }
.rolRenk:hover:not(:disabled) { transform: scale(1.08); }
.rolRenk:active:not(:disabled) { transform: scale(.96); }
.rolRenk[aria-checked="true"] { border-color: #202124; box-shadow: 0 0 0 2px var(--metin); }
.rolRenk.renksiz { background: repeating-linear-gradient(135deg, #3c4043 0 4px, #2d2e31 4px 8px); }
.rolRenk:disabled { cursor: default; opacity: .5; }
.rolIzinler { display: flex; flex-direction: column; gap: 10px; }
.rolIzinBaslik { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--soluk); }
.rolIzin { align-items: flex-start; }
.rolIzin input { flex: none; margin-top: 3px; }
.rolIzin:has(input:disabled) { opacity: .5; cursor: default; }
.rolIzinYazi { display: flex; flex-direction: column; line-height: 1.35; }
.rolIzinYazi b { font-weight: 500; }
.rolIzinYazi small { color: var(--soluk); font-size: 12px; }
.rolUyeler { display: flex; flex-direction: column; gap: 6px; }
.rolUyeEkle { align-self: flex-start; width: auto; min-width: 200px; margin-top: 4px; }

/* ================= TEPKI, SABITLEME, ARAMA (sohbetAraclari.js) ================= */
.sohbetSutun { position: relative; }
.sohbetUst .sohbetUstDugme { margin-left: 0; }
.aramaAlan {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 180px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: #1b1c1f;
  color: var(--soluk);
  cursor: text;
  transition: width 200ms ease, box-shadow 150ms ease;
}
.aramaAlan:focus-within { width: 260px; box-shadow: 0 0 0 1px var(--mavi); color: var(--metin); }
.aramaAlan svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.aramaAlan input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--metin); font: inherit; font-size: 13px; outline: none; }
.aramaAlan input::placeholder { color: var(--soluk); }
.aramaAlan input::-webkit-search-cancel-button { filter: invert(.7); cursor: pointer; }
#btnSabitler.aktif { color: var(--metin); }
@media (max-width: 900px) { .aramaAlan { width: 130px; } .aramaAlan:focus-within { width: 190px; } }

/* Ust paneller: sabitlenmis mesajlar ve arama sonuclari (basligin altinda, saga yasli) */
.sohbetPanel {
  position: absolute;
  top: 58px;
  right: 12px;
  z-index: 20;
  width: min(420px, calc(100% - 24px));
  max-height: calc(100% - 140px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #3a3b3f;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.sohbetPanelUst { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid #3a3b3f; }
.sohbetPanelUst b { font-size: 14px; font-weight: 600; }
.sohbetPanelUst .ikonBtn { width: 30px; height: 30px; }
.panelListe { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.panelBos { margin: 0; padding: 18px 16px; font-size: 13px; line-height: 1.5; color: var(--soluk); }
.panelOzet { margin: 0; padding: 8px 14px 0; font-size: 12px; color: var(--soluk); }
.panelMesaj { position: relative; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background-color 120ms ease; }
.panelMesaj:hover, .panelMesaj:focus-visible { background: rgba(255, 255, 255, .05); outline: none; }
.panelMesaj:focus-visible { box-shadow: inset 0 0 0 2px var(--mavi); }
.panelMesaj:active { background: rgba(255, 255, 255, .08); }
.panelMesajUst { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 4px; }
.panelMesajUst .avatar.kucuk { flex: none; width: 20px; height: 20px; font-size: 10px; }
.panelMesajUst b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panelMesajYer { min-width: 0; font-size: 12px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panelMesajUst time { flex: none; margin-left: auto; font-size: 11px; color: var(--soluk); }
.panelMesajMetin {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.panelMesajMetin mark { padding: 0 1px; border-radius: 3px; background: rgba(253, 214, 99, .3); color: inherit; }
.panelKaldir { position: absolute; top: 6px; right: 8px; display: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--kenar); background: var(--panel); color: var(--metin); font-size: 12px; transition: border-color 120ms ease, color 120ms ease; }
.panelMesaj:hover .panelKaldir, .panelKaldir:focus-visible { display: block; }
.panelMesaj:has(.panelKaldir):hover time { visibility: hidden; }
.panelKaldir:hover { border-color: #f28b82; color: #f28b82; }
.panelDaha { flex: none; margin: 4px 6px 6px; padding: 8px; border-radius: 8px; color: var(--mavi); font-size: 13px; font-weight: 600; transition: background-color 120ms ease; }
.panelDaha:hover:not(:disabled) { background: rgba(138, 180, 248, .1); }

/* Tepkiler: mesajin altinda emoji ve sayisi; benimkiler vurgulu */
.mesajTepkiler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tepkiCip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #2b2c30;
  color: var(--soluk);
  font-size: 12px;
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.tepkiCip:hover { background: #33353a; border-color: var(--kenar); }
.tepkiCip:active { transform: translateY(1px); }
.tepkiCip.benim { background: rgba(138, 180, 248, .15); border-color: rgba(138, 180, 248, .55); color: var(--mavi); }
.tepkiEmoji { font-size: 15px; line-height: 1; }
.tepkiSayi { font-variant-numeric: tabular-nums; }
.tepkiEkleCip { padding: 0 6px; opacity: 0; }
.mesaj:hover .tepkiEkleCip, .tepkiEkleCip:focus-visible { opacity: 1; }
.tepkiEkleCip svg { width: 14px; height: 14px; fill: currentColor; }

/* Emoji secici (mesajin "Tepki ekle" dugmesi) */
.emojiSecici {
  position: fixed;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(8, 34px);
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #3a3b3f;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.emojiSecici button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-size: 20px; line-height: 1; transition: background-color 100ms ease, transform 100ms ease; }
.emojiSecici button:hover, .emojiSecici button:focus-visible { background: rgba(255, 255, 255, .08); transform: scale(1.12); outline: none; }
.emojiSecici button.secili { background: rgba(138, 180, 248, .18); }

/* Sabitlenmis mesaj: ust bilgide isaret (art arda mesajda da gorunsun diye ust bilgi acik) */
.sabitIsaret { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--soluk); }
.sabitIsaret::before { content: '📌'; font-size: 10px; }
.mesaj.devami.sabit .mesajUst { display: flex; }
/* Baslikta yer daralinca once aciklama kisalir, kanal adi kalir */
.sohbetUst .icerikBaslik { flex: 0 0 auto; max-width: 45%; }
.sohbetUst .sohbetAciklama { flex: 0 1 auto; }

/* ================= DURUM, PROFIL RESMI, BILDIRIM AYARI (profilDurum.js) ================= */
:root {
  --durumBosta: #f0b232;
  --durumRahatsiz: #f28b82;
  --durumGorunmez: #80868b;
}

/* Profil resmi: avatarin icinde resim (yuklenene kadar bas harf) */
.avatar img, .avatarDugme img, .avatarSecim img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatarDugme, .avatarSecim { padding: 0; } /* dugmenin varsayilan ic boslugu resmi ovallestirmesin */

/* Sol alttaki avatarim: kosede durum noktasi; tiklayinca durum menusu */
.kullaniciPanel .avatarDugme { position: relative; }
.kullaniciPanel .avatarDugme::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 3px solid #18191b;
  background: var(--yesil);
}
.kullaniciPanel .avatarDugme.d-bosta::after { background: var(--durumBosta); }
.kullaniciPanel .avatarDugme.d-rahatsiz::after { background: var(--durumRahatsiz); }
.kullaniciPanel .avatarDugme.d-gorunmez::after { background: #18191b; box-shadow: inset 0 0 0 3px var(--durumGorunmez); }
.kullaniciOzel {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soluk);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 120ms ease;
}
.kullaniciOzel:hover { color: var(--metin); }

/* Baskalarinin durumu: uye listesi, ozel mesajlar ve arkadaslar (cevrimici yesil, bosta sari, rahatsiz kirmizi) */
.avatar.cevrimici.d-bosta::after { background: var(--durumBosta); }
.avatar.cevrimici.d-rahatsiz::after { background: var(--durumRahatsiz); }
.arkadasSatir.cevrimici.d-bosta .halNokta { background: var(--durumBosta); }
.arkadasSatir.cevrimici.d-rahatsiz .halNokta { background: var(--durumRahatsiz); }
.uyeYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.uyeYazi .uyeAd { flex: none; }
.uyeOzel { font-size: 11.5px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menude durum noktasi, secili isaret ve aciklama */
.acilirMenu button.secimli { position: relative; padding-right: 36px; }
.acilirMenu button[aria-checked="true"]::after { content: '✓'; position: absolute; right: 14px; top: 9px; color: var(--mavi); font-weight: 700; }
.acilirMenu button small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--soluk); }
.acilirMenu button .menuNokta ~ small { padding-left: 20px; }
.menuNokta { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--yesil); }
.menuNokta.d-bosta { background: var(--durumBosta); }
.menuNokta.d-rahatsiz { background: var(--durumRahatsiz); }
.menuNokta.d-gorunmez { background: none; box-shadow: inset 0 0 0 2px var(--durumGorunmez); }

/* Ozel durum penceresi */
.ozelDurumSatir { display: flex; align-items: center; gap: 8px; }
.ozelDurumSatir input { flex: 1; min-width: 0; }
.ozelEmoji { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #26272b; font-size: 20px; transition: background-color 150ms ease; }
.ozelEmoji:hover { background: #303135; }
.ozelEmoji.bos { filter: grayscale(1); opacity: .55; }
.ozelEmojiListe { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; border-radius: 10px; background: #26272b; }
.ozelEmojiListe button { height: 34px; border-radius: 8px; font-size: 19px; transition: background-color 100ms ease; }
.ozelEmojiListe button:hover, .ozelEmojiListe button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.ozelEmojiListe button.secili { background: rgba(138, 180, 248, .18); }

/* Avatar listesinde profil resmi secenegi */
.avatarSecim.resimSecim { overflow: hidden; color: var(--soluk); }
.avatarSecim.resimSecim:hover { color: var(--metin); }
.avatarSecim.resimSecim svg { width: 20px; height: 20px; fill: currentColor; }

/* Bildirimi kapatilan (Hicbiri) sohbet kanali soluk */
.kanalYazi.sessiz { opacity: .5; }
.kanalYazi.sessiz:hover, .kanalYazi.sessiz.aktif { opacity: .85; }

/* ================= OKUNMAMIS ROZETLERI VE HIZLI GECIS (okunmamis.js, hizliGecis.js) ================= */
/* Sol cubuk: okunmamis sunucunun solunda kisa beyaz cizgi, bahsetmede kirmizi sayi */
.rayOge.okunmadi::before { height: 8px; }
.rayOge.okunmadi:hover::before { height: 20px; }
.rayRozet {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  border: 3px solid #151619;
  background: #e5484d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rozetli .rayNokta { right: auto; left: -3px; }

/* Hizli gecis (Ctrl+K): ustte, ortada */
.hizliGecisArka { place-items: start center; padding-top: 14vh; }
.hizliGecis { width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; }
#hizliGecisKutu { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; font-size: 17px; }
.hizliListe { max-height: min(420px, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hizliOge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--soluk);
  text-align: left;
  transition: background-color 80ms ease;
}
.hizliOge.secili { background: rgba(255, 255, 255, .07); color: var(--metin); }
.hizliOge b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--metin); }
.hizliOge small { flex: none; max-width: 45%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--soluk); }
.hizliSimge { flex: none; display: grid; place-items: center; width: 24px; height: 24px; font-size: 18px; color: var(--soluk); }
.hizliSimge svg { width: 18px; height: 18px; fill: currentColor; }
.hizliSimge.sunucuSimge { overflow: hidden; border-radius: 8px; color: #fff; font-size: 9.5px; font-weight: 700; }
.hizliSimge.sunucuSimge img { width: 100%; height: 100%; object-fit: cover; }
.hizliSimge.avatar { width: 24px; height: 24px; aspect-ratio: auto; font-size: 11px; font-weight: 600; color: #fff; }
.hizliSimge.avatar.emoji { font-size: 14px; }
.hizliBos { margin: 0; padding: 16px 8px; font-size: 13px; line-height: 1.5; color: var(--soluk); }
.hizliIpucu { margin: 0; font-size: 12px; color: var(--soluk); }
.hizliIpucu b { color: var(--metin); font-weight: 600; }

/* ================= SES YONETIMI (sesYonetimi.js) ================= */
.sutunSayi.sinirEk { margin-left: -10px; }
.sutunSayi.dolu { color: var(--metin); }
.kanalKisi svg.sunucudaSusturuldu { color: var(--kirmizi); }
.afkAyar .satir select:last-child { flex: 0 0 140px; }
.afkAyar select:disabled { opacity: .55; }

/* ================= YAZI BICIMI VE LINK ONIZLEMESI (bicim.js) ================= */
.mesajMetin strong { font-weight: 650; }
.mesajMetin .satirKod {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--kutu);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
}
.mesajMetin .kodBlok {
  margin: 4px 0;
  padding: 8px 10px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--kutu);
  border-radius: 6px;
  background: #18191b;
  white-space: pre;
}
.mesajMetin .kodBlok code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; line-height: 1.5; }
.mesajMetin blockquote { margin: 2px 0; padding-left: 10px; border-left: 3px solid var(--kenar); }
.mesajMetin .mesajBaslik { margin: 6px 0 2px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.mesajMetin .mesajBaslik.b1 { font-size: 20px; }
.mesajMetin .mesajBaslik.b2 { font-size: 17px; }
.mesajMetin .mesajBaslik.b3 { font-size: 15px; }
.mesajMetin .mesajMaddeler { margin: 2px 0; padding-left: 22px; }
.mesajMetin .mesajMaddeler li { margin: 1px 0; }
.mesajMetin.buyukEmoji { font-size: 40px; line-height: 1.25; }
.gizliYazi { border-radius: 4px; background: var(--kutuAcik); color: transparent; cursor: pointer; transition: background .15s; }
.gizliYazi:not(.acik) * { color: transparent !important; background: transparent !important; }
.gizliYazi:not(.acik):hover { background: var(--kenar); }
.gizliYazi.acik { background: rgba(255, 255, 255, .07); color: inherit; cursor: auto; }
.gizliYazi:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }

.linkKartlar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.linkKart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 460px);
  padding: 10px 12px 12px;
  border-left: 4px solid var(--linkKartRenk, var(--kenar));
  border-radius: 6px;
  background: var(--panel);
}
.linkKartYazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linkKartSite { font-size: 11px; color: var(--soluk); }
.linkKart a.linkKartBaslik { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--mavi); text-decoration: none; }
.linkKart a.linkKartBaslik:hover { text-decoration: underline; }
.linkKartAciklama {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--metin);
  opacity: .85;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.linkKartResim { align-self: flex-start; max-width: 100%; max-height: 260px; border-radius: 4px; object-fit: contain; cursor: zoom-in; opacity: 0; transition: opacity .2s; }
.linkKartResim.yuklendi { opacity: 1; }
.linkKart.sadeceResim { width: auto; padding: 0; border: 0; background: none; }
.linkKart.sadeceResim .linkKartResim { max-width: min(100%, 400px); max-height: 300px; }

/* ================= YENI MESAJLAR CIZGISI VE ILETME (sohbetler.js, iletme.js) ================= */
.yeniCizgi { display: flex; align-items: center; gap: 8px; margin: 16px 0 -6px; font-size: 11px; font-weight: 700; color: #f28b82; }
.yeniCizgi::before { content: ''; flex: 1; height: 1px; background: rgba(242, 139, 130, .55); }
.yeniCizgi span { padding: 1px 6px; border-radius: 4px; background: #f28b82; color: #202124; line-height: 16px; }

.iletKart { margin-top: 4px; padding: 2px 0 2px 12px; border-left: 3px solid var(--kenar); }
.iletUst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 2px; font-size: 12px; color: var(--soluk); }
.iletUst b { font-size: 13px; font-weight: 600; color: var(--metin); }
.iletEtiket { font-weight: 600; }

.iletPencere { width: min(520px, calc(100vw - 32px)); }
.iletOnizleme {
  max-height: 140px;
  overflow: hidden;
  padding: 10px 12px;
  border-left: 3px solid var(--kenar);
  border-radius: 6px;
  background: var(--zemin);
}
#iletAra, #iletNot { width: 100%; }
.iletListe { max-height: min(300px, 40vh); }

/* ================= ANKET VE @ROL BAHSETME (anket.js, sohbetEk.js) ================= */
.bahsetme.rolBahsetme:not(.ben) { color: var(--rolRenk, var(--mavi)); }

.anketKart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 440px);
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--panel);
}
.anketSoru { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.anketIpucu { margin-top: -4px; font-size: 12px; color: var(--soluk); }
.anketSecenekler { display: flex; flex-direction: column; gap: 6px; }
.anketSecenek {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  overflow: hidden;
  border: 1px solid var(--kutu);
  border-radius: 8px;
  background: var(--zemin);
  color: var(--metin);
  text-align: left;
  transition: border-color .15s ease;
}
.anketSecenek::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--anketYuzde, 0%);
  background: rgba(138, 180, 248, .14);
  transition: width .3s ease;
}
.anketSecenek:hover:not(:disabled) { border-color: var(--kenar); }
.anketSecenek:active:not(:disabled) { transform: translateY(1px); }
.anketSecenek.secili { border-color: var(--mavi); }
.anketSecenek.secili::before { background: rgba(138, 180, 248, .26); }
.anketSecenek.kazanan::before { background: rgba(129, 201, 149, .24); }
.anketSecenek:disabled { cursor: default; opacity: 1; }
.anketIsaret { flex: none; width: 16px; height: 16px; border: 2px solid var(--kenar); border-radius: 50%; }
.anketSecenek[role="checkbox"] .anketIsaret { border-radius: 4px; }
.anketSecenek.secili .anketIsaret { border-color: var(--mavi); background: var(--mavi); box-shadow: inset 0 0 0 2px var(--zemin); }
.anketKart.bitti .anketIsaret { display: none; }
.anketMetin { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.anketSayi { flex: none; font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.anketAlt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--soluk); }
.anketBitir { padding: 0; color: var(--mavi); font-size: 12px; font-weight: 600; }
.anketBitir:hover { text-decoration: underline; }

#btnAnket { width: 36px; height: 36px; flex: none; }
.anketPencere { width: min(480px, calc(100vw - 32px)); }
.anketSecenekListe { display: flex; flex-direction: column; gap: 6px; }
.anketSecenekSatir { display: flex; align-items: center; gap: 6px; }
.anketSecenekSatir input { flex: 1; }
.anketSecenekSil { width: 32px; height: 32px; flex: none; }
.anketEkle { align-self: flex-start; font-size: 13px; }
.anketAyarlar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.anketAyarlar .alan { flex: 0 0 160px; }
.anketCoklu { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13px; }
#anketDurum:empty { display: none; }

/* ================= KONULAR (iplik.js) ================= */
.iplikKart {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 440px);
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--kutu);
  border-radius: 8px;
  background: var(--panel);
  color: var(--metin);
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.iplikKart:hover { border-color: var(--kenar); background: var(--kutu); }
.iplikKart:active { transform: translateY(1px); }
.iplikKart svg { flex: none; width: 18px; height: 18px; fill: var(--mavi); }
.iplikKartYazi { display: flex; flex-direction: column; min-width: 0; }
.iplikKartYazi b { overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.iplikKartYazi small { font-size: 12px; color: var(--soluk); }
.sohbetSimge.iplikSimge svg { width: 18px; height: 18px; fill: currentColor; }
.iplikGeri { padding: 0; color: var(--mavi); font-size: inherit; font-weight: 600; }
.iplikGeri:hover { text-decoration: underline; }
.iplikOge .panelMesajUst { align-items: center; }
.iplikOgeSimge { display: grid; place-items: center; width: 20px; height: 20px; }
.iplikOgeSimge svg { width: 16px; height: 16px; fill: var(--soluk); }
.iplikOge.aktif { background: rgba(255, 255, 255, .05); }
.iplikPencere { width: min(460px, calc(100vw - 32px)); }

/* ================= geri bildirim (Ayarlar) ================= */
.gbTurler { margin-bottom: 0; }
.gbMetin {
  width: 100%;
  min-height: 132px;
  padding: 10px 12px;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  user-select: text;
}
.gbMetin:focus { border-color: var(--mavi); }
.gbMetin::placeholder { color: var(--soluk); }
#gbSayac { align-self: flex-end; font-variant-numeric: tabular-nums; }
#gbSayac:empty { display: none; }
.gbEkler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gbEkDugme { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--kenar); color: var(--metin); font-size: 13px; transition: background .15s, border-color .15s; }
.gbEkDugme:hover { background: rgba(255, 255, 255, .06); border-color: var(--soluk); }
.gbResimOnizleme { position: relative; width: fit-content; max-width: 100%; }
.gbResimOnizleme img { display: block; max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--kutu); cursor: zoom-in; }
.gbResimOnizleme .ikonBtn { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; background: rgba(32, 33, 36, .85); color: var(--metin); }
.gbResimOnizleme .ikonBtn svg { width: 16px; height: 16px; }
.gbDurum.hata { color: #f28b82; }

/* ================= yonetim paneli ================= */
.yonetimDugme { position: relative; }
.yonetimRozet {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--kirmizi);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.yonetimModal { width: min(860px, 100%); height: min(720px, calc(100vh - 48px)); padding: 0; gap: 0; overflow: hidden; }
.yonetimSuzgec { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--kutu); }
.yonetimSuzgec .hesapSekmeler { margin-bottom: 0; flex-wrap: wrap; }
.yonetimSayi { font-variant-numeric: tabular-nums; opacity: .8; }
.yonetimSayi:empty { display: none; }
.yonetimSuzgec select { width: auto; padding: 6px 10px; }
.yonetimListe { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.yonetimBos { margin: 0; padding: 56px 0; text-align: center; color: var(--soluk); font-size: 14px; }
.yonetimDaha { align-self: center; padding: 8px 18px; border-radius: 999px; color: var(--mavi); border: 1px solid var(--kenar); }

.gbKart { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid transparent; }
.gbKart.yeni { border-color: var(--kutu); }
.gbUst { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gbUst .avatar { flex: none; width: 32px; height: 32px; font-size: 14px; }
.gbKim { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.gbKim b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbEposta { font-size: 12px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.gbEtiket { flex: none; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.gbEtiket.oneri { background: rgba(129, 201, 149, .14); color: var(--yesil); }
.gbEtiket.hata { background: rgba(242, 139, 130, .14); color: #f28b82; }
.gbZaman { flex: none; font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.gbMetinYazi { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.gbResim { width: fit-content; max-width: 100%; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--kutu); cursor: zoom-in; }
.gbResim img { display: block; max-width: 100%; max-height: 220px; }
.gbGunluk summary { cursor: pointer; width: fit-content; font-size: 13px; color: var(--soluk); }
.gbGunluk pre { margin: 8px 0 0; padding: 10px 12px; max-height: 200px; overflow: auto; border-radius: 8px; background: var(--zemin); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.gbAlt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gbBilgi { flex: 1; min-width: 160px; font-size: 12px; color: var(--soluk); overflow-wrap: anywhere; }
.gbDurumEtiket { font-size: 12px; color: var(--soluk); }
.gbDurumEtiket.yeni { color: var(--mavi); }
.gbDurumEtiket.cozuldu { color: var(--yesil); }
.gbIslem { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--kenar); color: var(--metin); font-size: 13px; transition: background .15s, border-color .15s; }
.gbIslem:hover { background: rgba(255, 255, 255, .06); }
.gbIslem.birincil { border-color: var(--mavi); color: #202124; }
.gbIslem.gbSil { color: #f28b82; border-color: transparent; }
.gbIslem.gbSil:hover { background: rgba(242, 139, 130, .1); }
@media (max-width: 600px) {
  .yonetimSuzgec, .yonetimListe { padding-left: 14px; padding-right: 14px; }
  .gbUst { flex-wrap: wrap; }
}