/* ════════════════════════════════════════════════════
   SOHBET — Soliterax
   ════════════════════════════════════════════════════ */

/* Yazı tipleri kendi sunucumuzdan gelir.
 *
 * Google Fonts kullanılsaydı her sayfa açılışında ziyaretçinin IP'si,
 * tarayıcı bilgisi ve hangi sayfayı açtığı Google'a giderdi. Anonim
 * kalması gereken bir platformda bu kabul edilemez.
 *
 * Dosyalar yoksa @font-face sessizce başarısız olur ve sistem yazı
 * tipleri devreye girer — site çalışmaya devam eder.
 * İndirmek için: ./yazitipi-indir.sh
 */

@font-face {
  font-family: 'Chakra Petch';
  src: url('yazitipi/chakra-petch-600.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('yazitipi/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('yazitipi/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('yazitipi/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --void:  #050a12;
  --deep:  #0a1526;
  --panel: #0e1c2f;
  --raf:   #071019;
  --line:  #1a3049;
  --line2: #244463;
  --cyan:  #7fe9ff;
  --cyan-d: rgba(127,233,255,.5);
  --gold:  #ffd88a;
  --jade:  #00e5a0;
  --ember: #ff6b6b;
  --paper: #dfe9f2;
  --ash:   #7b93ab;
  --ash2:  #4d6478;
  --disp:  'Chakra Petch', system-ui, sans-serif;
  --body:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --raf-g:  70px;
  --yan-g: 232px;
  --uye-g: 210px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--void);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: var(--void); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══ ANA DÜZEN ═══ */
.uygulama {
  display: grid;
  grid-template-columns: var(--raf-g) var(--yan-g) 1fr var(--uye-g);
  height: 100dvh;
}
.uygulama.uye-gizli { grid-template-columns: var(--raf-g) var(--yan-g) 1fr; }
.uygulama.uye-gizli .uyeler { display: none; }

/* ═══ SUNUCU RAFI ═══ */
.raf {
  background: var(--raf);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.raf::-webkit-scrollbar { width: 0; }

/* Sunucu ikonu — 45 derece döndürülmüş kare (elmas).
   Kare döndürülünce köşegeni büyüdüğü için dış ölçü küçük tutuldu;
   harf ters yöne döndürülerek dik kalıyor. */
.raf-oge {
  position: relative;
  width: 34px; height: 34px;
  margin: 5px 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--void);
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.2,.9,.3,1),
              border-radius .2s, box-shadow .2s;
}
.raf-oge:hover  { transform: rotate(45deg) scale(1.08); border-radius: 5px; }
.raf-oge:active { transform: rotate(45deg) scale(.96); }
.raf-oge.etkin  { border-radius: 4px; box-shadow: 0 0 0 2px var(--raf), 0 0 0 4px currentColor; }

/* Harf ters döndürülerek dik tutulur */
.raf-oge span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--disp);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
}

/* Sol kenar göstergesi — elmasın dışında, döndürmeden etkilenmesin */
.raf-sarmal {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 48px;
  flex-shrink: 0;
}
.raf-sarmal::before {
  content: '';
  position: absolute;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--paper);
  height: 0;
  transition: height .2s cubic-bezier(.2,.9,.3,1);
}
.raf-sarmal:hover::before { height: 16px; }
.raf-sarmal.etkin::before { height: 26px; }

.raf-ekle {
  width: 34px; height: 34px;
  border-radius: 7px;
  border: 1.5px dashed var(--line2);
  color: var(--ash);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: border-color .2s, color .2s, transform .2s cubic-bezier(.2,.9,.3,1);
}
.raf-ekle span {
  display: block;
  transform: rotate(-45deg);
  font-size: 1.2rem;
  line-height: 1;
}
.raf-ekle:hover {
  border-color: var(--jade);
  color: var(--jade);
  transform: rotate(45deg) scale(1.08);
}

.raf-ayrac {
  width: 28px; height: 1px;
  background: var(--line);
  flex-shrink: 0;
  margin: .15rem 0;
}

/* İpucu balonu */
.ipucu {
  position: fixed;
  z-index: 200;
  padding: .4rem .7rem;
  background: var(--void);
  border: 1px solid var(--line2);
  border-radius: 5px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .15s, transform .15s;
}
.ipucu.acik { opacity: 1; transform: none; }

/* ═══ KANAL PANELİ ═══ */
.yan {
  background: var(--deep);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.yan-ust {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 54px;
}
.yan-baslik {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yan-menu {
  margin-left: auto;
  color: var(--ash2);
  padding: .2rem;
  transition: color .15s;
}
.yan-menu:hover { color: var(--paper); }

.kanal-kutu { flex: 1; overflow-y: auto; padding: .6rem .5rem; min-height: 0; }

.kanal-basligi {
  display: flex;
  align-items: center;
  padding: .5rem .6rem .35rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
}
.kanal-basligi button {
  margin-left: auto;
  color: var(--ash2);
  font-size: 1rem;
  line-height: 1;
  transition: color .15s;
}
.kanal-basligi button:hover { color: var(--paper); }

.kanal {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .48rem .6rem;
  border-radius: 5px;
  color: var(--ash);
  font-size: .89rem;
  text-align: left;
  transition: background .13s, color .13s;
}
.kanal:hover { background: rgba(127,233,255,.05); color: var(--paper); }
.kanal.etkin { background: rgba(127,233,255,.1); color: var(--cyan); }
.kanal .diyez { color: var(--ash2); font-weight: 500; }
.kanal.etkin .diyez { color: var(--cyan-d); }
.kanal .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal .kilit { margin-left: auto; font-size: .7rem; opacity: .6; }

.ben-kutu {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  border-top: 1px solid var(--line);
  background: var(--raf);
}
.ben-bilgi { min-width: 0; flex: 1; }
.ben-bilgi strong {
  display: block;
  font-size: .84rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ben-bilgi span { font-size: .68rem; color: var(--ash2); }
.ben-kutu button { color: var(--ash2); font-size: .72rem; transition: color .15s; }
.ben-kutu button:hover { color: var(--ember); }

/* ═══ SOHBET ═══ */
.sohbet { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.sohbet-ust {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  min-height: 54px;
  background: rgba(10,21,38,.55);
  backdrop-filter: blur(10px);
}
.sohbet-ust h1 {
  font-family: var(--disp);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.sohbet-ust h1 .diyez { color: var(--ash2); }
.sohbet-aciklama {
  font-size: .8rem;
  color: var(--ash2);
  padding-left: .8rem;
  border-left: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ust-eylem { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.simge-dugme {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ash);
  transition: background .15s, color .15s;
}
.simge-dugme:hover { background: rgba(255,255,255,.06); color: var(--paper); }
.simge-dugme.etkin { color: var(--cyan); }

.akis {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.25rem 0;
  min-height: 0;
}

/* ═══ MESAJ ═══ */
.mesaj {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .75rem;
  padding: .3rem .5rem .3rem 0;
  border-radius: 5px;
  animation: mgir .2s ease;
}
@keyframes mgir { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.mesaj:hover { background: rgba(255,255,255,.016); }
.mesaj:hover .msj-eylem { opacity: 1; }

.mesaj.devam { padding-top: .04rem; }
.mesaj.devam .msj-ust { display: none; }
.mesaj.devam .avatar { visibility: hidden; height: 0; }

.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: .95rem;
  color: var(--void);
  flex-shrink: 0;
}
.avatar.kucuk { width: 26px; height: 26px; font-size: .72rem; }

.msj-ust { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .08rem; }
.msj-ad { font-family: var(--disp); font-weight: 600; font-size: .9rem; }
.msj-zaman { font-size: .68rem; color: var(--ash2); }

.msj-govde { font-size: .93rem; line-height: 1.6; overflow-wrap: anywhere; }
.msj-govde a { border-bottom: 1px solid rgba(127,233,255,.25); }
.msj-govde code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: .08em .35em;
  border-radius: 3px;
  color: var(--gold);
}
.msj-govde pre {
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .7rem .9rem;
  margin: .35rem 0;
  overflow-x: auto;
}
.msj-govde pre code { background: none; border: none; padding: 0; color: var(--paper); }
.bahset { color: var(--cyan); background: rgba(127,233,255,.1);
          padding: .05em .3em; border-radius: 3px; font-weight: 500; }

/* Mesaj araç çubuğu — üstüne gelince beliren yüzer düğmeler */
.msj-arac {
  position: absolute;
  top: -12px; right: 8px;
  display: flex;
  gap: 1px;
  padding: 2px;
  background: var(--deep);
  border: 1px solid var(--line2);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .14s, transform .14s;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  z-index: 5;
}
.mesaj:hover .msj-arac,
.mesaj:focus-within .msj-arac { opacity: 1; pointer-events: auto; transform: none; }

.msj-arac button {
  width: 28px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--ash);
  transition: background .13s, color .13s;
}
.msj-arac button:hover { background: rgba(255,255,255,.07); color: var(--paper); }
.msj-arac button.tehlike:hover { background: rgba(255,107,107,.14); color: var(--ember); }

.mesaj { position: relative; }

/* Düzenlendi işareti */
.duzenlendi-im {
  font-size: .64rem;
  color: var(--ash2);
  margin-left: .2rem;
}

/* Yanıt alıntısı — ızgaranın tüm genişliğini kaplar.
   Sütun atanmazsa avatar hücresini kapar ve düzen bozulur. */
.yanit-alinti {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .15rem;
  padding-left: 14px;
  font-size: .8rem;
  color: var(--ash2);
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
}
.yanit-alinti::before {
  content: '';
  width: 18px; height: 10px;
  border-left: 2px solid var(--line2);
  border-top: 2px solid var(--line2);
  border-top-left-radius: 6px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}
.yanit-ad { font-weight: 500; flex-shrink: 0; }
.yanit-ozet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .75;
}
.yanit-alinti:hover .yanit-ozet { opacity: 1; }

/* Vurgulanan mesaj (yanıta tıklanınca) */
.mesaj.vurgu {
  background: rgba(127,233,255,.09);
  animation: vurguSon 2.2s ease forwards;
}
@keyframes vurguSon {
  0%, 55% { background: rgba(127,233,255,.11); }
  100%    { background: transparent; }
}

/* Yanıtlama şeridi — yazma kutusunun üstünde */
.yanit-serit {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  font-size: .82rem;
  color: var(--ash);
}
.yanit-serit b { color: var(--cyan); font-weight: 500; }
.yanit-serit .ozet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .7;
  min-width: 0;
}
.yanit-serit button {
  margin-left: auto;
  color: var(--ash2);
  padding: 0 .2rem;
  flex-shrink: 0;
}
.yanit-serit button:hover { color: var(--ember); }
.yanit-serit + .yazma-kutu { border-radius: 0 0 7px 7px; }

/* Satır içi düzenleme */
.duzenle-kutu {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .2rem;
}
.duzenle-kutu textarea {
  width: 100%;
  padding: .55rem .7rem;
  background: var(--void);
  border: 1px solid var(--cyan-d);
  border-radius: 5px;
  outline: none;
  resize: vertical;
  font-size: .92rem;
  line-height: 1.5;
  min-height: 60px;
}
.duzenle-alt { display: flex; gap: .5rem; align-items: center; font-size: .72rem; color: var(--ash2); }

.gun-ayraci {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1rem 0 .6rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash2);
}
.gun-ayraci::before, .gun-ayraci::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ═══ YAZMA ═══ */
.yazma { padding: .5rem 1.25rem 1.1rem; }

.yazma-kutu {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  padding: .65rem .85rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 7px;
  transition: border-color .2s;
}
.yazma-kutu:focus-within { border-color: var(--cyan-d); }
.yazma-kutu textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  font-size: .93rem;
  line-height: 1.5;
  max-height: 160px;
  min-height: 22px;
}
.yazma-kutu textarea::placeholder { color: var(--ash2); }

.gonder {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--cyan);
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.gonder:hover:not(:disabled) { background: rgba(127,233,255,.13); }
.gonder:active:not(:disabled) { transform: scale(.9); }
.gonder:disabled { opacity: .3; cursor: not-allowed; }

.yazma-alt {
  display: flex;
  gap: .8rem;
  margin-top: .35rem;
  padding: 0 .2rem;
  font-size: .7rem;
  color: var(--ash2);
}
.sayac.dolu { color: var(--ember); }

/* ═══ ÜYE PANELİ ═══ */
.uyeler {
  background: var(--deep);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: .8rem .6rem;
}
.uye-basligi {
  padding: .5rem .6rem .35rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
}
.uye {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .6rem;
  border-radius: 5px;
  transition: background .13s;
  position: relative;
}
.uye:hover { background: rgba(255,255,255,.03); }
.uye-ad {
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.uye.cevrimdisi { opacity: .45; }
.durum-noktasi {
  position: absolute;
  left: 26px; bottom: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--deep);
  background: var(--jade);
}
.uye.cevrimdisi .durum-noktasi { background: var(--ash2); }
.rol-etiketi {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .08rem .3rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.rol-etiketi.sahip    { background: rgba(255,216,138,.15); color: var(--gold); }
.rol-etiketi.yonetici { background: rgba(127,233,255,.13); color: var(--cyan); }

/* ═══ DÜĞMELER ═══ */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.3rem;
  font-family: var(--disp);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--cyan-d);
  background: rgba(127,233,255,.06);
  border-radius: 5px;
  transition: background .18s, transform .1s;
}
.dugme:hover:not(:disabled) { background: rgba(127,233,255,.14); }
.dugme:active:not(:disabled) { transform: translateY(1px); }
.dugme:disabled { opacity: .35; cursor: not-allowed; }
.dugme.tam { width: 100%; }
.dugme.kucuk { padding: .4rem .85rem; font-size: .72rem; }
.dugme.sade { color: var(--ash); border-color: var(--line2); background: none; }
.dugme.sade:hover:not(:disabled) { background: rgba(255,255,255,.04); }
.dugme.tehlike { color: var(--ember); border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.06); }
.dugme.tehlike:hover:not(:disabled) { background: rgba(255,107,107,.14); }

/* ═══ UYARI ═══ */
.uyari {
  padding: .7rem 1rem;
  border-radius: 5px;
  font-size: .86rem;
  border: 1px solid;
  margin-bottom: 1rem;
  line-height: 1.55;
}
.uyari.iyi  { background: rgba(0,229,160,.08);  border-color: rgba(0,229,160,.3);  color: var(--jade); }
.uyari.kotu { background: rgba(255,107,107,.08); border-color: rgba(255,107,107,.3); color: var(--ember); }
.uyari code { font-family: var(--mono); font-size: .84em; }

/* ═══ ORTA KUTU (giriş, kurulum) ═══ */
.orta {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: auto;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(127,233,255,.07), transparent 70%),
    var(--void);
}
.kutu {
  width: 100%;
  max-width: 400px;
  padding: 2.4rem 2rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  animation: kgir .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes kgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.kutu h1 {
  font-family: var(--disp);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.not { font-size: .86rem; color: var(--ash); line-height: 1.6; margin-bottom: 1.4rem; }
.not code {
  font-family: var(--mono); font-size: .82em;
  background: var(--panel); padding: .1em .35em;
  border-radius: 3px; color: var(--gold);
}

.alan { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.alan > span {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ash2);
}
.alan input, .alan textarea {
  padding: .7rem .85rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: none;
  font-size: .92rem;
  transition: border-color .2s;
  width: 100%;
}
.alan input:focus, .alan textarea:focus { border-color: var(--cyan-d); }
.alan small { font-size: .74rem; color: var(--ash2); }

.gecis { margin-top: 1.1rem; text-align: center; font-size: .82rem; color: var(--ash2); }
.gecis button { color: var(--cyan); font-size: inherit; }

/* ═══ KİP (modal) ═══ */
.perde {
  position: fixed;
  inset: 0;
  background: rgba(2,6,12,.72);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 150;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.kip {
  width: 100%;
  max-width: 420px;
  background: var(--deep);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 1.6rem;
  animation: kgir .25s cubic-bezier(.2,.9,.3,1);
  max-height: 85dvh;
  overflow-y: auto;
}
.kip h2 {
  font-family: var(--disp);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.kip-alt { display: flex; gap: .6rem; margin-top: 1.3rem; }
.kip-alt .dugme { flex: 1; }

.kod-kutu {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 5px;
  margin: .6rem 0 1rem;
}
.kod-kutu code {
  flex: 1;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}

/* ═══ BOŞ / YÜKLENİYOR ═══ */
.bos {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  color: var(--ash2);
  font-size: .9rem;
  padding: 2rem;
}
.bos-ic { max-width: 320px; }
.bos-ic h2 {
  font-family: var(--disp);
  font-size: 1.1rem;
  color: var(--ash);
  margin-bottom: .5rem;
  font-weight: 600;
}

.noktalar { display: inline-flex; gap: 4px; }
.noktalar i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
  animation: zip 1.2s ease-in-out infinite;
}
.noktalar i:nth-child(2) { animation-delay: .15s; }
.noktalar i:nth-child(3) { animation-delay: .3s; }
@keyframes zip {
  0%,60%,100% { opacity: .25; transform: translateY(0); }
  30%         { opacity: 1;   transform: translateY(-4px); }
}

/* ═══ MOBİL ═══ */
.mobil-dugme { display: none; }

/* ─── Kalıcı mobil üst çubuk ─── */
.mobil-ust {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--line);
  background: var(--deep);
  flex-shrink: 0;
}
.mobil-ust .marka {
  font-size: .74rem;
  letter-spacing: .18em;
}

@media (max-width: 900px) {
  .uygulama, .uygulama.uye-gizli {
    grid-template-columns: 1fr;
    grid-template-rows: 100dvh;
  }

  /* Mobilde her zaman görünen üst çubuk — kanal açılmasa bile
     menüye erişilebilsin */
  .mobil-ust { display: flex; }

  /* Menü açıkken arka plan kaymasın */
  body:has(.yan.acik), body:has(.uyeler.acik) { overflow: hidden; }

  .raf, .yan {
    position: fixed;
    top: 0; bottom: 0;
    z-index: 60;
    transition: transform .25s cubic-bezier(.2,.9,.3,1);
    will-change: transform;
  }

  .raf {
    left: 0;
    width: var(--raf-g);
    transform: translateX(-100%);
  }

  /* Kanal paneli soldan raf genişliği kadar içeride durur.
     Yalnızca kendi genişliği kadar kaydırılırsa sağ kenarı ekranda
     kalır — raf genişliği de kaydırmaya eklenmeli. */
  .yan {
    left: var(--raf-g);
    width: var(--yan-g);
    transform: translateX(calc(-100% - var(--raf-g)));
  }

  .raf.acik, .yan.acik { transform: translateX(0); }

  .uyeler {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--uye-g);
    z-index: 60;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.2,.9,.3,1);
    display: block;
  }
  .uyeler.acik { transform: none; }
  .uygulama.uye-gizli .uyeler { display: block; }

  .golge {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .golge.acik { opacity: 1; pointer-events: auto; }

  .mobil-dugme { display: grid; }
  .sohbet-aciklama { display: none; }

  .akis { padding: .85rem .8rem 0; }
  .yazma { padding: .5rem .8rem calc(.8rem + env(safe-area-inset-bottom)); }

  .sohbet-ust { padding: .7rem .85rem; min-height: 48px; }
  .sohbet-ust h1 { font-size: .95rem; }

  /* Mesajlar mobilde daha derli toplu */
  .mesaj { grid-template-columns: 32px 1fr; gap: .55rem; }
  .avatar { width: 32px; height: 32px; font-size: .82rem; }
  .msj-govde { font-size: .9rem; }
  .msj-ad { font-size: .86rem; }

  /* Araç çubuğu dokunmatikte hep görünür — üstüne gelme yok */
  .msj-arac {
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
    box-shadow: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: .25rem;
    grid-column: 2;
    justify-content: flex-start;
    gap: .15rem;
  }
  .msj-arac button { width: 30px; height: 28px; }
  .mesaj.devam .msj-arac { display: none; }
  .mesaj:hover .msj-arac { opacity: 1; }

  /* Girdi alanı iOS'ta yakınlaşmasın — 16px altı zoom tetikler */
  .yazma-kutu textarea,
  .alan input, .alan textarea { font-size: 16px; }

  .yan-ust { min-height: 48px; }
  .kanal { padding: .6rem .7rem; font-size: .92rem; }
  .uye { padding: .55rem .6rem; }

  .profil-kutu { width: min(300px, calc(100vw - 2rem)); }
}

/* Çok dar ekranlar */
@media (max-width: 380px) {
  :root { --raf-g: 60px; --yan-g: 200px; --uye-g: 185px; }
  .raf-oge, .raf-ekle { width: 30px; height: 30px; }
  .raf-sarmal { height: 42px; }
  .akis { padding: .7rem .6rem 0; }
  .yazma { padding: .4rem .6rem calc(.7rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══ PROFİL ═══ */
.profil-ust {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.profil-avatar {
  width: 56px; height: 56px;
  border-radius: 11px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--void);
}
.profil-avatar span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.4rem;
}
.profil-kim { min-width: 0; }
.profil-kim strong {
  display: block;
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 600;
}
.profil-kim span { font-family: var(--mono); font-size: .78rem; color: var(--ash2); }

.profil-satir {
  display: flex;
  gap: .8rem;
  padding: .4rem 0;
  font-size: .85rem;
}
.profil-satir dt { color: var(--ash2); min-width: 90px; }
.profil-satir dd { color: var(--paper); }

/* Renk seçici */
.renk-izgara {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .2rem;
}
.renk-nokta {
  width: 26px; height: 26px;
  border-radius: 6px;
  transform: rotate(45deg);
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
}
.renk-nokta:hover { transform: rotate(45deg) scale(1.15); }
.renk-nokta.secili { border-color: var(--paper); transform: rotate(45deg) scale(1.12); }

.sekme-serit {
  display: flex;
  gap: .2rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.sekme {
  padding: .5rem .85rem;
  font-family: var(--disp);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ash2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.sekme:hover { color: var(--paper); }
.sekme.etkin { color: var(--cyan); border-bottom-color: var(--cyan); }

.sekme-govde { display: none; }
.sekme-govde.etkin { display: block; }

/* ═══ ROL ETİKETLERİ ═══ */
.rol-rozet {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.rol-rozet::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: currentColor;
  flex-shrink: 0;
}

.rol-liste { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* Rol yönetimi satırı */
.rol-satir {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 5px;
  margin-bottom: .4rem;
}
.rol-elmas {
  width: 14px; height: 14px;
  border-radius: 3px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.rol-ad { font-weight: 500; font-size: .88rem; }
.rol-sayi { font-family: var(--mono); font-size: .7rem; color: var(--ash2); }
.rol-satir .sag { margin-left: auto; display: flex; gap: .5rem; }
.rol-satir button { font-size: .76rem; color: var(--ash2); transition: color .15s; }
.rol-satir button:hover { color: var(--paper); }
.rol-satir button.tehlike:hover { color: var(--ember); }

/* ═══ ÜYE PROFİL KUTUSU ═══ */
.profil-kutu {
  position: fixed;
  z-index: 180;
  width: 280px;
  background: var(--deep);
  border: 1px solid var(--line2);
  border-radius: 9px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  overflow: hidden;
  animation: kutuAc .16s cubic-bezier(.2,.9,.3,1);
}
@keyframes kutuAc {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.profil-bant { height: 56px; position: relative; }

.profil-kutu .buyuk-avatar {
  position: absolute;
  left: 14px; bottom: -22px;
  width: 52px; height: 52px;
  border-radius: 11px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  border: 3px solid var(--deep);
  color: var(--void);
}
.profil-kutu .buyuk-avatar span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.25rem;
}

.profil-govde { padding: 2rem 1rem 1rem; }

.profil-govde .isim {
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}
.profil-govde .etiket {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ash2);
}

.profil-bolum {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
}
.profil-bolum h4 {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
  margin-bottom: .4rem;
}
.profil-bolum p { font-size: .84rem; color: var(--paper); line-height: 1.5; }

.profil-eylem {
  display: flex;
  gap: .4rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
}
.profil-eylem .dugme { flex: 1; padding: .45rem .6rem; font-size: .72rem; }

/* ═══ KANAL İZİN IZGARASI ═══ */
.izin-satir {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.izin-satir:last-child { border-bottom: none; }
.izin-ad { font-size: .86rem; display: flex; align-items: center; gap: .45rem; }

.izin-secim {
  margin-left: auto;
  display: flex;
  gap: 1px;
  background: var(--line);
  border-radius: 5px;
  padding: 1px;
  flex-shrink: 0;
}
.izin-secim button {
  padding: .28rem .55rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 500;
  color: var(--ash2);
  background: var(--void);
  transition: background .13s, color .13s;
  white-space: nowrap;
}
.izin-secim button:hover { color: var(--paper); }
.izin-secim button.secili { background: var(--panel); color: var(--cyan); }
.izin-secim button.secili[data-izin="gizli"] { color: var(--ember); }
.izin-secim button.secili[data-izin="okur"]  { color: var(--gold); }
.izin-secim button.secili[data-izin="yazar"] { color: var(--jade); }

/* Salt okunur kanal göstergesi */
.okur-serit {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: .84rem;
  color: var(--ash);
}

/* ════════════════════════════════════════════════════
   AYAR PANELİ — tam ekran, sol menülü
   ════════════════════════════════════════════════════ */

.panel {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--void);
  animation: panelGir .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes panelGir {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

/* ─── Sol menü ─── */
.panel-yan {
  background: var(--raf);
  border-right: 1px solid var(--line);
  padding: 1.75rem 0 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.panel-yan-baslik {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 1.25rem 1rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.panel-yan-baslik .elmas {
  width: 26px; height: 26px;
  border-radius: 6px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--void);
}
.panel-yan-baslik .elmas span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--disp);
  font-weight: 700;
  font-size: .8rem;
}
.panel-yan-baslik .ad {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-menu { padding: 0 .6rem; display: flex; flex-direction: column; gap: 1px; }

.panel-menu button {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 5px;
  font-size: .88rem;
  color: var(--ash);
  text-align: left;
  transition: background .13s, color .13s;
}
.panel-menu button:hover { background: rgba(127,233,255,.05); color: var(--paper); }
.panel-menu button.etkin { background: rgba(127,233,255,.1); color: var(--cyan); }
.panel-menu button.tehlike:hover { background: rgba(255,107,107,.08); color: var(--ember); }

.panel-menu .ayrac {
  height: 1px;
  background: var(--line);
  margin: .5rem .7rem;
}

.panel-menu-basligi {
  padding: .8rem .7rem .35rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
}

/* ─── İçerik ─── */
.panel-ana {
  overflow-y: auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem) 4rem;
  position: relative;
}
.panel-ic { max-width: 620px; }

.panel-kapat {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--ash);
  transition: border-color .15s, color .15s, transform .12s;
}
.panel-kapat:hover { border-color: var(--ember); color: var(--ember); }
.panel-kapat:active { transform: scale(.93); }

.panel-baslik {
  font-family: var(--disp);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: .35rem;
}
.panel-alt-baslik {
  font-size: .88rem;
  color: var(--ash);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.panel-bolum { margin-bottom: 2.25rem; }
.panel-bolum h3 {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

/* ─── Kaydet çubuğu ─── */
.kaydet-serit {
  position: sticky;
  bottom: -4rem;
  margin: 2rem -1rem -2rem;
  padding: .9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .86rem;
  color: var(--ash);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
.kaydet-serit.acik { opacity: 1; transform: none; pointer-events: auto; }
.kaydet-serit .dugme { margin-left: auto; }

/* ─── Liste satırı (üye, rol, kanal) ─── */
.liste-satir {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .8rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: .4rem;
  transition: border-color .15s;
}
.liste-satir:hover { border-color: var(--line2); }
.liste-satir.acik { border-color: var(--cyan-d); }
.liste-satir .sag { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.liste-satir .kucuk-yazi { font-size: .76rem; color: var(--ash2); }

.liste-govde {
  padding: .9rem .8rem;
  margin: -.4rem 0 .5rem;
  background: var(--void);
  border: 1px solid var(--cyan-d);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

/* ─── Onay kutusu satırı ─── */
.onay-satir {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background .13s;
}
.onay-satir:hover { background: rgba(255,255,255,.03); }

.onay-kutu {
  width: 17px; height: 17px;
  border: 1.5px solid var(--line2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .13s, border-color .13s;
}
.onay-kutu svg { opacity: 0; transition: opacity .12s; }
.onay-satir.secili .onay-kutu { background: var(--cyan); border-color: var(--cyan); }
.onay-satir.secili .onay-kutu svg { opacity: 1; color: var(--void); }

/* ─── Boş durum ─── */
.panel-bos {
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--ash2);
  font-size: .86rem;
  line-height: 1.6;
}

/* ─── Davet kutusu ─── */
.davet-kutu {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.davet-kutu code {
  flex: 1;
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--gold);
  overflow-wrap: anywhere;
}

/* ─── Tehlike alanı ─── */
.tehlike-alan {
  padding: 1.1rem;
  background: rgba(255,107,107,.05);
  border: 1px solid rgba(255,107,107,.25);
  border-radius: 6px;
}
.tehlike-alan h4 {
  font-family: var(--disp);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ember);
  margin-bottom: .35rem;
}
.tehlike-alan p { font-size: .84rem; color: var(--ash); margin-bottom: .9rem; line-height: 1.6; }

@media (max-width: 760px) {
  .panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panel-yan {
    padding: .9rem 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 40vh;
  }
  .panel-yan-baslik { padding-bottom: .7rem; margin-bottom: .4rem; }
  .panel-menu { flex-direction: row; overflow-x: auto; gap: .25rem; }
  .panel-menu button { white-space: nowrap; }
  .panel-menu .ayrac, .panel-menu-basligi { display: none; }
  .panel-ana { padding: 1.5rem 1.25rem 3rem; }
  .panel-kapat { top: .9rem; right: 1rem; }
}

/* Mesaj gövde hücresi — uzun kelimeler taşmasın */
.msj-icerik { min-width: 0; }

/* ═══ BOT KORUMASI ═══ */

/* Bal küpü — ekran okuyucular ve gerçek kullanıcılar görmez,
   ama DOM'da var olduğu için botlar doldurur */
.bal-kupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.dogrulama-kutu {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem .55rem .85rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 5px;
  transition: border-color .2s;
}
.dogrulama-kutu:focus-within { border-color: var(--cyan-d); }

.dogrulama-kutu > span:first-child {
  flex: 1;
  font-size: .9rem;
  color: var(--paper);
  letter-spacing: .01em;
  user-select: none;
}

.dogrulama-kutu input {
  width: 62px;
  padding: .4rem .5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  text-align: center;
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--cyan);
  flex-shrink: 0;
}
.dogrulama-kutu input:focus { border-color: var(--cyan-d); }

.dogrulama-kutu button {
  color: var(--ash2);
  font-size: 1rem;
  line-height: 1;
  padding: .25rem;
  flex-shrink: 0;
  transition: color .15s, transform .3s;
}
.dogrulama-kutu button:hover { color: var(--cyan); transform: rotate(180deg); }

/* ════════════════════════════════════════════════════
   SESLİ KANAL
   ════════════════════════════════════════════════════ */

.kanal.ses .diyez { display: none; }
.kanal.ses .ses-simge {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: .7;
}
.kanal .kisi-sayi {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ash2);
  flex-shrink: 0;
}
.kanal.ses.dolu .kisi-sayi { color: var(--ember); }

/* Sesli kanaldaki kişiler — kanal listesinde altta */
.ses-kisiler {
  padding: .1rem 0 .35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.ses-kisi {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .22rem .4rem;
  border-radius: 4px;
  font-size: .8rem;
  color: var(--ash);
  transition: background .13s;
}
.ses-kisi:hover { background: rgba(255,255,255,.03); }
.ses-kisi .avatar {
  width: 20px; height: 20px;
  font-size: .6rem;
  border-radius: 50%;
  transition: box-shadow .12s;
}
.ses-kisi.konusuyor .avatar {
  box-shadow: 0 0 0 2px var(--jade);
}
.ses-kisi .ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ses-kisi .im {
  margin-left: auto;
  display: flex;
  gap: .25rem;
  color: var(--ember);
  flex-shrink: 0;
}

/* ─── Ses denetim çubuğu (kanal panelinin altında) ─── */
.ses-cubuk {
  padding: .6rem .8rem;
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ses-durum {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}
.ses-durum .nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jade);
  flex-shrink: 0;
  animation: sesNabiz 2s ease-in-out infinite;
}
@keyframes sesNabiz {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,229,160,.45); }
  50%      { opacity: .7; box-shadow: 0 0 0 5px rgba(0,229,160,0); }
}
.ses-durum .baglanti { color: var(--jade); font-weight: 500; }
.ses-durum .kanal-adi {
  color: var(--ash2);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ses-dugmeler { display: flex; gap: .35rem; }
.ses-dugme {
  flex: 1;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: var(--ash);
  transition: background .13s, color .13s;
}
.ses-dugme:hover { background: rgba(255,255,255,.09); color: var(--paper); }
.ses-dugme.etkin { background: rgba(255,107,107,.16); color: var(--ember); }
.ses-dugme.ayril { background: rgba(255,107,107,.12); color: var(--ember); }
.ses-dugme.ayril:hover { background: rgba(255,107,107,.22); }

/* ─── Sesli kanal ana ekranı ─── */
.ses-sahne {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  min-height: 0;
  overflow-y: auto;
}

.ses-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
  gap: 1rem;
  justify-content: center;
  width: 100%;
  max-width: 760px;
}

.ses-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.4rem 1rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color .18s, transform .18s;
}
.ses-kart.konusuyor {
  border-color: var(--jade);
  box-shadow: 0 0 0 1px var(--jade), 0 0 24px rgba(0,229,160,.14);
}

.ses-kart .buyuk-avatar-2 {
  width: 62px; height: 62px;
  border-radius: 13px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  color: var(--void);
  transition: transform .18s;
}
.ses-kart.konusuyor .buyuk-avatar-2 { transform: rotate(45deg) scale(1.06); }
.ses-kart .buyuk-avatar-2 span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.5rem;
}

.ses-kart .isim {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ses-kart .imler {
  display: flex;
  gap: .4rem;
  color: var(--ember);
  min-height: 16px;
}

.ses-bilgi {
  text-align: center;
  color: var(--ash2);
  font-size: .86rem;
  line-height: 1.7;
  max-width: 380px;
}
.ses-bilgi h2 {
  font-family: var(--disp);
  font-size: 1.15rem;
  color: var(--ash);
  margin-bottom: .5rem;
  font-weight: 600;
}

.ses-katil-dugme {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.8rem;
  font-family: var(--disp);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--jade);
  border-radius: 6px;
  transition: transform .12s, box-shadow .18s;
}
.ses-katil-dugme:hover {
  box-shadow: 0 0 26px rgba(0,229,160,.3);
}
.ses-katil-dugme:active { transform: translateY(1px); }
.ses-katil-dugme:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Rol atama (profil kutusunda) ─── */
.rol-ekle-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  border: 1px dashed var(--line2);
  color: var(--ash2);
  font-size: .8rem;
  line-height: 1;
  transition: border-color .15s, color .15s;
}
.rol-ekle-dugme:hover { border-color: var(--cyan); color: var(--cyan); }

.rol-secici {
  margin-top: .5rem;
  max-height: 170px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--void);
}
.rol-secici .satir {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  font-size: .82rem;
  cursor: pointer;
  transition: background .12s;
}
.rol-secici .satir:hover { background: rgba(255,255,255,.04); }
.rol-secici .onay-kutu { width: 15px; height: 15px; }

/* Rol rozetine tıklanabilirlik */
.rol-rozet.tiklanir { cursor: pointer; transition: filter .15s; }
.rol-rozet.tiklanir:hover { filter: brightness(1.3); }

@media (max-width: 900px) {
  .ses-izgara { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; }
  .ses-kart { padding: 1rem .7rem; }
  .ses-kart .buyuk-avatar-2 { width: 50px; height: 50px; }
  .ses-sahne { padding: 1.25rem .8rem; }
}

/* ════════════════════════════════════════════════════
   ARKADAŞLAR VE ÖZEL MESAJLAR
   ════════════════════════════════════════════════════ */

/* Ev düğmesi rozeti */
.raf-rozet {
  position: absolute;
  top: 2px; right: 8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ember);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  z-index: 2;
  border: 2px solid var(--raf);
  pointer-events: none;
}

.raf-oge.ev { border: 1px solid var(--line2); }
.raf-oge.ev.etkin { border-color: transparent; }

/* Özel sohbet satırı */
.kanal.ozel { gap: .55rem; position: relative; }
.kanal.ozel .avatar { width: 22px; height: 22px; font-size: .62rem; }

.durum-nokta-mini {
  position: absolute;
  left: 22px; bottom: 7px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ash2);
  border: 2px solid var(--deep);
  display: grid;
  place-items: center;
  box-sizing: content-box;
}

.mini-rozet {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ember);
  color: #fff;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Gelen/giden istek satırı */
.istek-satir {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: 5px;
  font-size: .85rem;
  color: var(--ash);
}
.istek-satir:hover { background: rgba(255,255,255,.03); }
.istek-satir.bekliyor { opacity: .65; }
.istek-satir .avatar { width: 22px; height: 22px; font-size: .62rem; }
.istek-satir .ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.istek-satir .eylem { margin-left: auto; display: flex; gap: .2rem; flex-shrink: 0; }
.istek-satir .eylem button {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: .8rem;
  color: var(--ash2);
  transition: background .13s, color .13s;
}
.istek-satir .eylem [data-is="kabul"]:hover {
  background: rgba(0,229,160,.15); color: var(--jade);
}
.istek-satir .eylem [data-is="red"]:hover,
.istek-satir .eylem [data-is="iptal"]:hover {
  background: rgba(255,107,107,.15); color: var(--ember);
}

/* Ortak sunucular — profil kutusunda */
.ortak-liste {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 130px;
  overflow-y: auto;
}
.ortak-oge {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .4rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background .13s;
}
.ortak-oge:hover { background: rgba(127,233,255,.06); }

.ortak-elmas {
  width: 20px; height: 20px;
  border-radius: 5px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--void);
}
.ortak-elmas span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--disp);
  font-weight: 700;
  font-size: .6rem;
}
.ortak-ad {
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sohbet başlığındaki küçük avatar */
.sohbet-ust .avatar.kucuk { width: 24px; height: 24px; font-size: .68rem; }

/* ════════════════════════════════════════════════════
   DOSYA EKLERİ
   ════════════════════════════════════════════════════ */

.ek {
  margin-top: .4rem;
  max-width: 420px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--void);
  position: relative;
  display: inline-block;
}

.ek img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  width: auto;
  height: auto;
  cursor: zoom-in;
  background:
    repeating-conic-gradient(rgba(255,255,255,.02) 0% 25%, transparent 0% 50%)
    50% / 16px 16px;
}

.ek-alt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--ash2);
  border-top: 1px solid var(--line);
}
.ek-alt .sure { margin-left: auto; }
.ek-alt .sure.az { color: var(--gold); }
.ek-alt a { color: var(--ash2); transition: color .15s; }
.ek-alt a:hover { color: var(--cyan); }

.gif-im {
  position: absolute;
  top: .4rem; left: .4rem;
  padding: .1rem .3rem;
  border-radius: 3px;
  background: rgba(5,10,18,.8);
  color: var(--gold);
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  pointer-events: none;
}

/* Büyütülmüş görsel */
.buyutec {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(2,6,12,.9);
  display: grid;
  place-items: center;
  padding: 2rem;
  cursor: zoom-out;
  animation: fade .15s ease;
}
.buyutec img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  cursor: default;
}
.buyutec-kapat {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line2);
  color: var(--ash);
  background: rgba(10,21,38,.8);
  transition: color .15s, border-color .15s;
}
.buyutec-kapat:hover { color: var(--ember); border-color: var(--ember); }

.buyutec-bilgi {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .5rem 1rem;
  border-radius: 6px;
  background: rgba(10,21,38,.85);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ash2);
}
.buyutec-bilgi a { color: var(--cyan); }

/* ─── Yükleme alanı ─── */
.ek-dugme {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ash2);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.ek-dugme:hover { background: rgba(255,255,255,.06); color: var(--cyan); }

.onizleme-serit {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
}
.onizleme-serit + .yazma-kutu { border-radius: 0 0 7px 7px; }

.onizleme-serit img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--line2);
  flex-shrink: 0;
}
.onizleme-bilgi { min-width: 0; flex: 1; font-size: .8rem; }
.onizleme-bilgi strong {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onizleme-bilgi span { color: var(--ash2); font-size: .72rem; }
.onizleme-serit button {
  color: var(--ash2);
  padding: .2rem .35rem;
  flex-shrink: 0;
  transition: color .15s;
}
.onizleme-serit button:hover { color: var(--ember); }

/* Yükleme ilerlemesi */
.yukleme-cubuk {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .3rem;
}
.yukleme-cubuk i {
  display: block;
  height: 100%;
  background: var(--cyan);
  width: 0;
  transition: width .2s;
}

/* Sürükle-bırak */
.birak-katmani {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(5,10,18,.88);
  border: 2px dashed var(--cyan);
  border-radius: 8px;
  margin: .5rem;
  pointer-events: none;
  animation: fade .12s ease;
}
.birak-katmani span {
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: .06em;
}

.sohbet { position: relative; }

@media (max-width: 900px) {
  .ek { max-width: 100%; }
  .ek img { max-height: 260px; }
}

/* Ses kartında bağlantı durumu */
.ses-durum-yazi {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--ash2);
  text-align: center;
}
.ses-durum-yazi.kotu { color: var(--ember); }
.ses-kart.sorunlu { border-color: rgba(255,107,107,.35); }

/* Ses tanı paneli */
.ses-tani {
  width: 100%;
  max-width: 520px;
  margin-top: .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--void);
}
.ses-tani summary {
  padding: .6rem .9rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash2);
  list-style: none;
}
.ses-tani summary::before { content: '▸ '; }
.ses-tani[open] summary::before { content: '▾ '; }
.ses-tani summary:hover { color: var(--ash); }

.ses-tani-govde {
  padding: 0 .9rem .8rem;
  max-height: 280px;
  overflow-y: auto;
}
.tani-bolum { margin-bottom: .8rem; }
.tani-bolum b {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
  margin-bottom: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}
.tani-satir {
  display: flex;
  gap: .6rem;
  padding: .18rem 0;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ash);
  align-items: baseline;
}
.tani-satir .zaman { color: var(--ash2); flex-shrink: 0; }
.tani-satir .ayrinti {
  margin-left: auto;
  color: var(--ash2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}
.tani-satir .iyi { color: var(--jade); }
.tani-satir .kotu { color: var(--ember); }

/* ════════════════════════════════════════════════════
   DURUM GÖSTERGELERİ
   ════════════════════════════════════════════════════ */

/* Üye listesi — durum noktası artık renkli ve simgeli */
.uye { position: relative; }
.uye-govde { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.uye-durum-metni {
  font-size: .7rem;
  color: var(--ash2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.durum-noktasi {
  position: absolute;
  left: 26px; bottom: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--deep);
  display: grid;
  place-items: center;
  box-sizing: content-box;
}
.uye:hover .durum-noktasi { border-color: #0d1a2b; }

/* ─── Durum simgeleri ───
   Her durum noktanın içine kendi işaretini basar. Renk körlüğü olan
   kullanıcılar için yalnızca renge güvenmemek önemli. */

/* Uzakta — hilal */
.durum-noktasi.uzakta::after,
.durum-nokta-kk.uzakta::after,
.ben-durum-nokta.uzakta::after,
.durum-nokta-mini.uzakta::after {
  content: '';
  width: 62%; height: 62%;
  border-radius: 50%;
  background: var(--deep);
  transform: translate(-22%, -22%);
}

/* Toplantıda — saat ibresi hissi veren nokta */
.durum-noktasi.toplantida::after,
.durum-nokta-kk.toplantida::after,
.ben-durum-nokta.toplantida::after,
.durum-nokta-mini.toplantida::after {
  content: '';
  width: 2px; height: 40%;
  background: var(--deep);
  border-radius: 1px;
  transform: translateY(-15%);
}

/* Rahatsız etmeyin — yatay çizgi */
.durum-noktasi.rahatsiz::after,
.durum-nokta-kk.rahatsiz::after,
.ben-durum-nokta.rahatsiz::after,
.durum-nokta-mini.rahatsiz::after {
  content: '';
  width: 60%; height: 2px;
  background: var(--deep);
  border-radius: 1px;
}

/* Çevrimdışı görün / çevrimdışı — içi boş halka */
.durum-noktasi.gizli,
.durum-noktasi.cevrimdisi,
.durum-nokta-kk.gizli,
.ben-durum-nokta.gizli,
.durum-nokta-mini.gizli,
.durum-nokta-mini.cevrimdisi {
  background: transparent !important;
  box-shadow: inset 0 0 0 2.5px #4d6478;
}

/* ─── Sol alt kendi durumun ─── */
.ben-avatar-sarmal { position: relative; flex-shrink: 0; display: block; }

.ben-durum-nokta {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--raf);
  background: var(--jade);
  cursor: pointer;
  transition: transform .15s;
  display: grid;
  place-items: center;
}
.ben-durum-nokta:hover { transform: scale(1.2); }
/* Sol alt kendi noktanın arka planı raf rengi */
.ben-durum-nokta.uzakta::after,
.ben-durum-nokta.toplantida::after,
.ben-durum-nokta.rahatsiz::after { background: var(--raf); }

/* ─── Durum seçici ─── */
.durum-secici {
  position: fixed;
  z-index: 190;
  width: 236px;
  background: var(--deep);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  padding: .5rem;
  animation: kutuAc .16s cubic-bezier(.2,.9,.3,1);
}

.durum-baslik {
  padding: .35rem .6rem .5rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash2);
}

.durum-oge {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .6rem;
  border-radius: 5px;
  text-align: left;
  transition: background .13s;
  flex-wrap: wrap;
}
.durum-oge:hover { background: rgba(255,255,255,.05); }
.durum-oge.secili { background: rgba(127,233,255,.1); }

.durum-nokta-kk {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.durum-nokta-kk {
  width: 12px; height: 12px;
}

.durum-ad { font-size: .88rem; font-weight: 500; }
.durum-not {
  width: 100%;
  padding-left: 1.65rem;
  font-size: .7rem;
  color: var(--ash2);
  line-height: 1.3;
  margin-top: -.1rem;
}

.durum-ayrac {
  height: 1px;
  background: var(--line);
  margin: .45rem .3rem;
}

.durum-metin-alan {
  display: flex;
  gap: .35rem;
  padding: .2rem .3rem .1rem;
}
.durum-metin-alan input {
  flex: 1;
  min-width: 0;
  padding: .45rem .6rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: none;
  font-size: .82rem;
  transition: border-color .2s;
}
.durum-metin-alan input:focus { border-color: var(--cyan-d); }
.durum-metin-alan button {
  width: 32px;
  border-radius: 5px;
  background: rgba(127,233,255,.08);
  color: var(--cyan);
  transition: background .13s;
  flex-shrink: 0;
}
.durum-metin-alan button:hover { background: rgba(127,233,255,.18); }

/* Arkadaş listesindeki durum noktası */
.durum-nokta-mini {
  display: grid;
  place-items: center;
}

/* Durum seçicide seçili işareti */
.durum-tik {
  margin-left: auto;
  color: var(--cyan);
  font-size: .85rem;
  flex-shrink: 0;
}