:root {
  --zemin: #0B101E;
  --panel: #182038;
  --kutu: #1E2842;
  --kutuAcik: #283452;
  --kenar: #3A4663;
  --metin: #EDEFF5;
  --soluk: #9198AD;
  --mavi: #45B3BE; /* vurgu rengi (tarihsel adi mavi): logonun turkuazinin acik tonu; lacivertle yumusak durur. Mercan (--mercan) sadece uyari ve tehlike icin */
  /* Diyor'un uc rengi (logo.js LOGO_RENK): lacivert, turkuaz, beyaz */
  --lacivert: #0A1C44;
  --lacivertAcik: #13295E;
  --turkuaz: #159FAD;
  --turkuazAcik: #45B3BE;
  --mercan: #F76565; /* uyari ve tehlike (sil, ayril, hata, kapali mikrofon); marka rengi degil */
  --mercanAcik: #F98A8A;
  --kirmizi: #F76565;
  --yesil: #5DD39E; /* cevrimici, konusan, onay (renk korlugu modunda mavi: html.renkKoru) */
  --yesilKoyu: #2E9E6A; /* yesil zeminli dugme (beyaz yazi) */
  --yesilRgb: 93 211 158;
  --sari: #fdd663;
  --vurguYazi: #0A1C44; /* mercan, sari ve yesil zeminli dugmelerdeki yazi: lacivert */
  /* Turkuaz dolu dugmeler ve secili sekmeler: koyu turkuaz zemin, beyaz yazi (acik turkuazda beyaz okunmaz); ustune gelince koyulasir */
  --vurguDolgu: #159FAD;
  --vurguDolguUst: #128B98;
  --dolguYazi: #FFFFFF;
  /* Yuzey tonlari: logonun laciverti etrafinda koyu, az doygun lacivertler (goz yormasin) (renk temalari bunlari degistirir: temalar.css, app/build/tema-uret.js) */
  --ray: #06080F; /* sol sunucu cubugu */
  --yan: #0B0F1C; /* sol sutun */
  --yanKoyu: #080B15; /* sol sutun ust cizgisi ve sunucu basligi */
  --alt: #090C17; /* kullanici paneli, koyu yuzeyler */
  --cizgi: #070A13; /* koyu ayirici cizgiler */
  --kart: #131A2F; /* pencere ici kartlar */
  --kartUst: #182036; /* kart ustune gelince, tepki */
  --kartUst2: #1C253D;
  --kartUst3: #202A44;
  --kenarKoyu: #232D47; /* acilir pencere kenarlari */
  --acilir: #0C111F; /* acilir panel ve arama kutusu zemini */
  --profil: #0C111F; /* profil karti zemini */
  --profilIc: #172036; /* profil kartinin ic bolumu */
  --tahtaZemin: #131A2F; /* beyaz tahta modunda sahne */
  --kapiCizgi: #1E2740;
  --ozelYesil: #10302A; /* ozel gorusme simgesi zemini */
  --panelAcik: #232E4A;
  --cizgiAcik: #0E1322;
  --halka: #10162A; /* ozel mesaj listesinde cevrimici noktasinin cercevesi */
  --iplikCizgi: #0B0F1C; /* sagdaki konu paneli ayiricisi */
  --maviAcik: #7FCDD5; /* vurgulu yazinin (baglanti) ustune gelince */
  --maviRgb: 69 179 190; /* --mavi'nin saydam tonlari: rgb(var(--maviRgb) / .1) */
  --zeminRgb: 11 16 30;
  /* Yalniz CSS'te (::before) kullanilan simgeler: maske olarak, rengi currentColor/arka plandan */
  --simgeIgne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
  --simgeKilit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  --simgeKum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* Arayuzdeki isaret simgeleri (app.js simge()): emoji yerine SVG, yazinin boyunda ve renginde */
.simge { display: inline-flex; align-items: center; vertical-align: -.125em; margin-right: .35em; }
.simge:last-child { margin-right: 0; }
.simge svg { width: 1em; height: 1em; }

/* Yazi boyutu (Ayarlar > Erisilebilirlik; erisim.js <html>'e yazar): arayuz yazilari --yaziOlcek ile, sohbet metni
   --sohbetOlcek ile (13px tabanli: 16px secilince 16/13). Varsayilan 16px. */
:root { --yaziOlcek: 1.2; --sohbetOlcek: 1.2308; }

html, body { height: 100%; }
/* Baslik cubugu (baslik.js, main.js titleBarOverlay): Windows ve Linux masaustunde pencerenin ustunde 30px */
:root { --baslikYuk: 0px; }
html.ozelBaslik { --baslikYuk: 30px; }
.baslikCubugu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: var(--baslikYuk);
  display: flex; align-items: center; gap: 8px; padding-left: 12px;
  background: var(--ray); color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; letter-spacing: .01em;
  user-select: none; -webkit-app-region: drag;
}
.baslikCubugu img { width: 16px; height: 16px; }
html.ozelBaslik :is(.modalArka, .girisKapisi, .onayArka, .profilArka, .acilisEkrani) { top: var(--baslikYuk); }

::-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: calc(14px * var(--yaziOlcek))/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(--vurguDolgu);
  color: var(--dolguYazi);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
}
.birincil:not(:disabled):hover { background: var(--vurguDolguUst); }

.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: calc(13px * var(--yaziOlcek)); }
.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: calc(22px * var(--yaziOlcek)); 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: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
.alan small { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.satir { display: flex; gap: 6px; align-items: center; }

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

/* Ses etkinligi esigi: seviye cubugunun ustunde cizgi (ayarlar.js) */
.seviye.esikli { position: relative; overflow: visible; }
.seviye.esikli > div { border-radius: 2px; max-width: 100%; }
.seviyeEsik { position: absolute; top: -4px; width: 2px; height: 12px; border-radius: 1px; background: var(--metin); }
.seviyeEsik.gizli { display: none; }
.kapiAyarlari { margin-top: 10px; display: grid; gap: 10px; }
.kapiAyarlari.gizli { display: none; }
.kapiAyarlari input[type="range"], #ayarPttBirakma { width: 100%; accent-color: var(--mavi); }
.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: calc(15px * var(--yaziOlcek)); }

.durum { min-height: 20px; font-size: calc(13px * var(--yaziOlcek)); color: var(--soluk); text-align: center; }
.durum.hata { color: var(--mercan); }
.surum { margin-top: -8px; font-size: calc(11px * var(--yaziOlcek)); 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: var(--vurguYazi);
  font-size: calc(13px * var(--yaziOlcek));
  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(--yesil); }

/* Sabitleme (gorunum.js): kamerasi acik ya da paylasan kisinin kutucugunda igne; sabitliyken hep gorunur */
.kutuSabitle {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgb(var(--zeminRgb) / .85);
  color: var(--metin);
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.kutuSabitle svg { width: 17px; height: 17px; fill: currentColor; }
.kutucuk.kameraAcik .kutuSabitle, .kutucuk.sunuyor .kutuSabitle { display: grid; }
.kutucuk:hover .kutuSabitle, .kutuSabitle:focus-visible, .kutuSabitle.aktif { opacity: 1; }
.kutuSabitle:hover { background: var(--kutuAcik); }
.kutuSabitle:active { transform: translateY(1px); }
.kutuSabitle.aktif { background: var(--vurguDolgu); color: var(--dolguYazi); }
.kutuSabitle.aktif:hover { background: var(--vurguDolguUst); }
#btnSahneSabit.aktif { background: var(--vurguDolgu); color: var(--dolguYazi); }
#sahne.tahtaModu #btnSahneSabit { display: none; }
#sahneSecici button.sabit::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--simgeIgne) center / contain no-repeat;
  mask: var(--simgeIgne) center / contain no-repeat;
}
#sahne.kameraSahne .cizimAraclari, #sahne.kameraSahne #cizimTuval { display: none; }
#sahne.benKamera #sahneVideo { transform: scaleX(-1); }

/* 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 rgb(var(--yesilRgb) / .45); }

.isim {
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 60px;
  font-size: calc(13px * var(--yaziOlcek));
  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: calc(11px * var(--yaziOlcek));
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vurguDolgu);
  color: var(--dolguYazi);
}
.rozet.mikKapali {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(var(--zeminRgb) / .75);
  place-items: center;
}
.rozet.mikKapali svg { width: 16px; height: 16px; color: var(--mercan); }
.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: calc(12px * var(--yaziOlcek));
  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; }
/* Paylasim varken sahne tum genislikte; kutucuk seridi (kameralar) sahnedeki dugmeyle acilir, biri kamerasini
   acinca kendiliginden gorunur (app.js seritGuncelle) */
#gorusme.sahneVar:not(.seritAcik) #kutucuklar { display: none; }
.seritDugme {
  display: none; align-items: center; gap: 5px; height: 30px; padding: 0 10px; flex: none;
  border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: calc(12px * var(--yaziOlcek)); font-weight: 600;
}
.sahneVar .seritDugme { display: inline-flex; }
.seritDugme svg { width: 17px; height: 17px; fill: currentColor; }
.seritDugme:hover { background: rgba(255, 255, 255, .22); }
.seritDugme[aria-pressed="true"] { background: rgba(255, 255, 255, .9); color: var(--vurguYazi); }
.seritDugme #seritSayi:empty { display: none; }
.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: calc(22px * var(--yaziOlcek)); }

#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: calc(12px * var(--yaziOlcek));
  white-space: nowrap;
}
#sahneSecici button.aktif { background: var(--vurguDolgu); color: var(--dolguYazi); }
.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: rgb(var(--zeminRgb) / .92);
  white-space: nowrap;
}
#kendiSunum button {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--vurguDolgu);
  color: var(--dolguYazi);
  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: var(--tahtaZemin); }
#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: rgb(var(--zeminRgb) / .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(--vurguDolgu); color: var(--dolguYazi); }
#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: calc(16px + var(--baslikYuk));
  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: calc(13px * var(--yaziOlcek));
}
.beklemeSatir span { flex: 1; min-width: 0; }
.beklemeSatir button { padding: 7px 14px; border-radius: 999px; font-size: calc(13px * var(--yaziOlcek)); }
.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; }

.mesaj.sistemMesaj { background: rgb(255 255 255 / .035); padding: 8px 10px; border-radius: 10px; }
.mesaj.sistemMesaj .mesajUst b { color: #fff; }

/* 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: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
.notTuru button.aktif { background: rgb(var(--maviRgb) / .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(--vurguDolgu); color: var(--dolguYazi); }

/* --- 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: rgb(var(--maviRgb) / .16); color: var(--mavi); }
.panelBtn .sayac {
  position: absolute;
  bottom: 4px;
  right: 2px;
  font-size: calc(11px * var(--yaziOlcek));
  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: calc(11px * var(--yaziOlcek));
  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: calc(15px * var(--yaziOlcek)); font-weight: 700; }
.panelSekmeler { display: flex; gap: 2px; }
.panelSekme {
  padding: 10px 12px;
  font-size: calc(14px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek));
  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: calc(13px * var(--sohbetOlcek)); font-weight: 600; }
.mesajUst time { font-size: calc(11px * var(--yaziOlcek)); color: var(--soluk); }
/* Diyor'un kendi mesaji: adin yaninda robot simgeli "SİSTEM" etiketi (sohbetler.js) */
.sistemEtiket { align-self: center; display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; background: rgb(255 255 255 / .12); color: var(--metin); font-size: calc(10px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .04em; line-height: 1; }
.sistemEtiket .simge { margin-right: 3px; font-size: calc(12px * var(--yaziOlcek)); }
.mesajMetin .sistemSimge { margin-right: 6px; font-size: calc(16px * var(--sohbetOlcek)); color: var(--yesil); vertical-align: -3px; }
.mesajMetin {
  font-size: calc(13px * var(--sohbetOlcek));
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}
.mesajMetin a { color: var(--mavi); text-decoration: none; } /* Discord gibi: alti ustune gelince (her zaman: html.baglantiAlti) */
.mesajMetin a:hover { text-decoration: underline; }
.mesaj.bekliyor .mesajMetin { opacity: .5; }

.mesajUst .adTik { cursor: pointer; }
.mesajUst .paketRozet { margin-left: -2px; align-self: center; }
.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; }
/* Mesaj secme kipi (secim.js): secilebilenlerin solunda kutucuk, secilenler vurgulu; alttaki cubuk yazma kutusunun yerinde */
#mesajListe.secimModu .mesajIslemler { display: none !important; }
#mesajListe.secimModu .mesaj { cursor: default; }
#mesajListe.secimModu .mesaj { margin-left: 30px; }
#mesajListe.secimModu .mesaj.secilebilir { cursor: pointer; }
#mesajListe.secimModu .mesaj.secilebilir::before { content: ''; position: absolute; left: -26px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--kenar); border-radius: 5px; box-sizing: border-box; }
#mesajListe.secimModu .mesaj.secilebilir:hover { background: rgb(255 255 255 / .03); }
#mesajListe.secimModu .mesaj.secili { background: rgb(var(--maviRgb) / .12); }
#mesajListe.secimModu .mesaj.secili::before { border-color: var(--mavi); background: var(--mavi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.mesajAlt.secimde .mesajYaz { display: none; }
.secimCubugu { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px 4px 16px; border-radius: 20px; background: var(--zemin); box-shadow: inset 0 0 0 1px var(--ayirici); }
.secimCubugu.gizli { display: none; }
#secimSayi { font-weight: 600; }
.secimIpucu { flex: 1; min-width: 0; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secimCubugu button { height: 34px; padding: 0 14px; border-radius: 17px; font-weight: 600; }
#btnSecimIptal:hover { background: var(--kutu); }
.secimSil { background: var(--mercan); color: #fff; }
.secimSil:disabled { opacity: .45; cursor: default; }
.mesajUst .duzenlendi { font-size: calc(11px * var(--yaziOlcek)); 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: rgb(var(--maviRgb) / .08);
  color: var(--soluk);
  font-size: calc(12px * var(--yaziOlcek));
  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; }
.bahsetme { color: var(--mavi); font-weight: 600; }
/* #kanal (Discord gibi): tiklayinca kanal acilir (sohbetEk.js bahsetmeYaz) */
.kanalBahsetme { padding: 0 3px; border-radius: 4px; background: rgb(var(--maviRgb) / .15); color: var(--mavi); font-weight: 500; cursor: pointer; transition: background-color 120ms ease; }
.kanalBahsetme:hover { background: rgb(var(--maviRgb) / .3); }
.bahsetme.ben { color: var(--vurguYazi); background: #fdd663; border-radius: 4px; padding: 0 3px; }
.mesaj.parla { animation: mesajParla 1.6s ease-out; }
@keyframes mesajParla { 0%, 40% { background: rgb(var(--maviRgb) / .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: rgb(var(--maviRgb) / .1);
  font-size: calc(12px * var(--yaziOlcek));
  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: calc(13px * var(--yaziOlcek)); }
#bahsetmeListe button.secili, #bahsetmeListe button:hover { background: rgb(var(--maviRgb) / .16); }
#bahsetmeListe small { color: var(--soluk); }
/* Komut formunda kisi secenegi onerileri: profil resmi, ad, BOT etiketi */
#bahsetmeListe .kisiOneri { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
#bahsetmeListe .kisiOneri b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bahsetmeListe .kisiOneri .botEtiket { flex: none; }
.avatar.kisiOneriAvatar { flex: none; width: 26px; font-size: calc(12px * var(--yaziOlcek)); overflow: hidden; }
.avatar.kisiOneriAvatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#bahsetmeListe { max-height: 320px; overflow-y: auto; }
/* Egik cizgi komutu formu (Discord gibi): komut ve her secenegi ayri alan; ustte odaklanilan secenegin aciklamasi */
.mesajYaz.komutModu #mesajKutu { display: none; }
.komutKutu { flex: 1; min-width: 0; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 2px; outline: none; }
.komutKutu.gizli { display: none; }
.komutAd { padding: 2px 4px; font-weight: 600; color: var(--mavi); }
.komutSecenek { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid transparent; border-radius: 6px; overflow: hidden; background: rgb(var(--maviRgb) / .08); font-size: calc(14px * var(--yaziOlcek)); }
.komutSecenek > span { display: flex; align-items: center; padding: 2px 7px; background: rgb(var(--maviRgb) / .18); color: var(--metin); font-weight: 600; white-space: nowrap; }
.komutSecenek:not(.zorunlu) > span { color: var(--soluk); font-weight: 400; }
.komutSecenek input[type="text"], .komutSecenek select {
  width: auto; min-width: 4ch; max-width: 48ch; height: auto; margin: 0; padding: 3px 7px; border: 0; border-radius: 0;
  background: none; color: var(--metin); font: inherit; box-shadow: none; outline: none;
}
.komutSecenek select { padding-right: 4px; cursor: pointer; }
.komutSecenek input::placeholder { color: var(--soluk); font-style: italic; }
.komutSecenek.odak { border-color: var(--mavi); }
.komutSecenek.hatali { border-color: var(--kirmizi); }
.komutIpucu { margin: 0 10px 4px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.komutIpucu.gizli { display: none; }
.komutIpucu b { color: var(--metin); }
.yaziyor { height: 18px; margin: 0 6px 2px; font-size: calc(12px * var(--yaziOlcek)); 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);
}
/* Dosya, anket, cekilis (cekilis.js): yer kapali halin genisligi kadar; acilinca yazma kutusunun ustune dogru genisler */
.ozellikYer { position: relative; flex: none; width: 74px; height: 36px; }
.ozellikYer:has(.ozellikler.tekli) { width: 36px; }
.ozellikler { position: absolute; left: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 2px; height: 36px; border-radius: 18px; white-space: nowrap; transition: background-color 140ms ease, box-shadow 140ms ease, padding 140ms ease; }
.ozellikler .ozellik { flex: none; width: auto; min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 18px; }
.ozellikler .ozellik.gizli { display: none; }
.ozellikAd { max-width: 0; overflow: hidden; opacity: 0; font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; transition: max-width 180ms ease, opacity 120ms ease, margin 180ms ease; }
.ozellikler:not(.acik) .ekOzellik { display: none; }
.ozellikler.acik { padding: 0 4px; margin-left: -4px; background: var(--kutu); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.ozellikler.acik .ozellik:hover:not(:disabled) { background: var(--kart); }
.ozellikler.acik .ozellikAd { max-width: 90px; opacity: 1; margin-left: 6px; }
/* GIF, cikartma, emoji dugmeleri: yazma kutusunun saginda, ince cizgili simgeler */
.araDugmeler { flex: none; display: flex; align-items: center; gap: 2px; }
.araDugmeler .ikonBtn { width: 36px; height: 36px; flex: none; transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; }
.araDugmeler .ikonBtn:not(:disabled):hover { transform: translateY(-1px); }
.araDugmeler .ikonBtn.aktif { background: rgb(var(--maviRgb) / .16); color: var(--mavi); }
.araDugmeler .ikonBtn:disabled { opacity: .4; }
.araSimge { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.araDugmeler .araSimge { width: 23px; height: 23px; }
.araSimge .dolu { fill: currentColor; stroke: 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: calc(13px * var(--sohbetOlcek));
  line-height: 20px;
  resize: none;
  outline: none;
  user-select: text;
}
#btnGonder { width: 36px; height: 36px; color: var(--mavi); flex: none; }
/* Gonderilmeyi bekleyen ekler (dosya.js): yazma yerinin ust parcasi gibi; kaldirma dugmesi kosede */
.ekTepsi { display: flex; gap: 12px; overflow-x: auto; padding: 14px 12px 10px; border-radius: 20px 20px 0 0; background: var(--zemin); scrollbar-width: thin; }
.ekTepsi.gizli { display: none; }
.ekTepsi + .mesajYaz.ekli { border-radius: 0 0 20px 20px; box-shadow: inset 0 1px 0 var(--kenar); }
.ekKart { position: relative; flex: none; width: 160px; padding: 8px; border-radius: 10px; background: var(--kart); }
.ekGorsel { display: grid; place-items: center; height: 128px; overflow: hidden; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.ekGorsel img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.ekGorsel svg { width: 44px; height: 44px; fill: var(--soluk); }
.ekAd { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--yaziOlcek)); color: var(--metin); }
.ekSil {
  position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--panel); color: var(--kirmizi); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.ekSil svg { width: 16px; height: 16px; fill: currentColor; }
.ekSil:hover { background: var(--kirmizi); color: #fff; }
#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; }
/* Kapali, acik (kamera/ekran) ve ayril: logonun laciverti (koyu zeminde secilsin diye acik tonu); kapali ve ayril mercan, acik turkuaz halka */
.yuvarlak.kapali { background: var(--lacivertAcik); color: var(--mercan); }
.yuvarlak.kapali:not(:disabled):hover { background: #1C3A80; }
.yuvarlak.aktif { background: var(--lacivertAcik); color: #fff; box-shadow: inset 0 0 0 2px var(--turkuaz); }
.yuvarlak.aktif:hover { background: #1C3A80; }
.yuvarlak.ayril { width: 64px; border-radius: 999px; background: var(--lacivertAcik); color: var(--mercan); box-shadow: inset 0 0 0 1px rgb(var(--maviRgb) / .45); }
.yuvarlak.ayril:hover { background: var(--mercan); color: var(--vurguYazi); }

.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 - var(--baslikYuk));
  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: calc(18px * var(--yaziOlcek)); 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: rgb(var(--maviRgb) / .1); }
.kaynak img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}
.kaynak span { font-size: calc(12px * var(--yaziOlcek)); 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: calc(13px * var(--yaziOlcek));
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(253, 214, 99, .12);
  color: var(--sari);
}
.uyari p { margin: 0; }
/* Ekran kaydi izni uyarisindaki "Ayarlari ac" ve "Yeniden baslat" */
.uyariDugmeleri { display: flex; gap: 8px; margin-top: 8px; }
.uyariDugmeleri button {
  font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--sari); color: var(--vurguYazi);
}
.uyariDugmeleri button:hover { filter: brightness(1.08); }

.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: rgb(var(--maviRgb) / .1); }
.modalAlt .seciciSes { margin-right: auto; font-size: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
/* Ekran secicisinde yayin kalitesi (app.js yayinKalitesiCiz) */
.seciciKalite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 12px 0 14px; }
.seciciKalite label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.seciciKalite select { min-width: 120px; }
.seciciKaliteNot { flex-basis: 100%; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.seciciKaliteNot:empty { display: none; }

/* ================= 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: calc(13px * var(--yaziOlcek));
}
#lobi:not(.gizli) ~ .guncelleme { bottom: 16px; }
#btnGuncelle {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--vurguDolgu);
  color: var(--dolguYazi);
  font-weight: 600;
  white-space: nowrap;
}
#btnGuncelle:hover { background: var(--vurguDolguUst); }

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

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

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

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

.rozet.yoneticiRozet { font-size: calc(16px * var(--yaziOlcek)); line-height: 1; color: var(--sari); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.kutucuk.yonetici .rozet.yoneticiRozet { display: inline-block; }

/* el kaldirma ve tepkiler */
.rozet.elRozet {
  font-size: calc(15px * var(--yaziOlcek));
  line-height: 1;
  color: var(--vurguYazi);
  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; }
/* Ekran paylasirken kalite menusu (app.js ekranKaliteMenusu) */
#ekranSarici { position: relative; display: flex; }
.ekranKaliteDugme { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); box-shadow: 0 0 0 2px var(--alt); color: var(--metin); }
.ekranKaliteDugme svg { width: 16px; height: 16px; fill: currentColor; }
.ekranKaliteDugme:hover { background: var(--kutuAcik); }
#ekranKaliteMenu { position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: grid; gap: 10px;
  min-width: 260px; padding: 12px 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
#ekranKaliteMenu label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.ekranKaliteNot { margin: 0; font-size: calc(11.5px * var(--yaziOlcek)); color: var(--soluk); }
.ekranCizimIzinleri { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ayirici); }
#ekranKaliteMenu .ekranCizimIzinleri label { flex-direction: row; align-items: center; gap: 8px; font-size: calc(12.5px * var(--yaziOlcek)); color: var(--metin); }
.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: calc(24px * var(--yaziOlcek)); 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: calc(14px * var(--yaziOlcek)); white-space: nowrap; }
#btnElKaldir:hover { background: rgba(255, 255, 255, .06); }
#btnElKaldir.aktif { background: #fdd663; color: var(--vurguYazi); border-color: #fdd663; }

.ucanTepki {
  position: absolute;
  z-index: 3;
  bottom: 12%;
  font-size: calc(42px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek));
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(var(--zeminRgb) / .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: rgb(var(--zeminRgb) / .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: rgb(var(--zeminRgb) / .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: rgb(var(--zeminRgb) / .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: var(--vurguYazi); }

.kaliteUyari { top: 52px; background: var(--mercan); }

/* ================= 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: calc(14px * var(--yaziOlcek)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisiYonetici { margin-left: 6px; font-size: calc(13px * var(--yaziOlcek)); color: var(--sari); }
.kisiAlt { font-size: calc(12px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); color: var(--soluk); line-height: 1.5; }

/* oda ayarlari (Oda ayarlari paneli; oda menusunden acilir) */
#odaSekme { overflow-y: auto; }
.odaKodu.sifreli::before { content: ''; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--simgeKilit) center / contain no-repeat; mask: var(--simgeKilit) center / contain no-repeat; }
#btnSifreGoster.aktif { color: var(--mavi); }

.acilirMenu {
  position: fixed;
  z-index: 40;
  min-width: 210px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--panelAcik);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
.acilirMenu button {
  display: block;
  width: 100%;
  padding: 9px 16px;
  text-align: left;
  font-size: calc(13px * var(--yaziOlcek));
}
.acilirMenu button:hover, .acilirMenu button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.acilirMenu button.tehlike { color: var(--mercan); }
/* Menu icindeki ayar satiri (kisinin ses duzeyi): ad ve yuzde ustte, kaydirici altta */
.acilirMenu .menuKaydirici { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 16px 10px; font-size: calc(13.5px * var(--yaziOlcek)); color: var(--metin); }
.acilirMenu .menuKaydirici small { font-size: calc(11.5px * var(--yaziOlcek)); color: var(--soluk); }
.acilirMenu .menuKaydirici input { grid-column: 1 / -1; width: 100%; min-width: 170px; accent-color: var(--mavi); }
/* Ustu cizili simge (kapali kulaklik): cizgi simgenin renginde */
.ikonCizgi { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menuAyrac { height: 1px; margin: 6px 0; background: var(--kenar); }

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

#notKutu, #ortakNotKutu {
  flex: none;
  height: clamp(140px, 34vh, 360px);
  width: 100%;
  padding: 12px;
  border: 1px solid var(--kutu);
  border-radius: 10px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  font-size: calc(13px * var(--yaziOlcek));
  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: calc(11px * var(--yaziOlcek)); }
#btnNotKopyala { padding: 6px 12px; border-radius: 999px; color: var(--mavi); font-size: calc(12px * var(--yaziOlcek)); flex: none; }
#btnNotKopyala:hover { background: rgb(var(--maviRgb) / .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: calc(13px * var(--yaziOlcek)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; }
.dosyaAlt { font-size: calc(11px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); color: var(--mavi); }
.dosyaDugmeler button:hover { background: rgb(var(--maviRgb) / .1); }
.dosyaDugmeler button.birincil { color: var(--dolguYazi); }
.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: calc(12px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); }
.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 - var(--baslikYuk)); display: flex; flex-direction: column; gap: 10px; }
.resimGoster img { max-width: 100%; max-height: calc(100vh - 120px - var(--baslikYuk)); object-fit: contain; border-radius: 8px; align-self: center; }
.resimGosterAlt { display: flex; align-items: center; gap: 8px; }
.resimGosterAlt span { margin-right: auto; font-size: calc(13px * var(--yaziOlcek)); 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(940px, 100%); height: min(720px, calc(100vh - 48px - var(--baslikYuk))); 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: calc(14px * var(--yaziOlcek)); }
.ayarlarMenu button:hover { background: rgba(255, 255, 255, .05); }
.ayarlarMenu button.aktif { background: rgb(var(--maviRgb) / .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: calc(12px * var(--yaziOlcek)); 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: calc(14px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); }
.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: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.avatarSecim {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(24px * var(--yaziOlcek));
  background: var(--zemin);
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.avatarSecim:hover { background: var(--kutu); }
.avatarSecim.secili { outline-color: var(--mavi); background: rgb(var(--maviRgb) / .16); }
.avatarSecim.harf { font-size: calc(18px * var(--yaziOlcek)); font-weight: 600; }

/* Telefon: pencereler kenara yakin; ayarlarin bolum menusu ustte yana kayan sekmeler (icerige yer kalsin) */
@media (max-width: 760px) {
  .modalArka { padding: 12px; }
  .modal { max-height: calc(100dvh - 24px - var(--baslikYuk)); padding: 18px 16px 14px; }
  .ayarlarModal { height: calc(100dvh - 24px - var(--baslikYuk)); padding: 0; }
  .ayarlarUst { padding: 10px 8px 8px 16px; }
  .ayarlarGovde { flex-direction: column; }
  .ayarlarMenu { flex: none; flex-direction: row; gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--kutu); overflow-x: auto; scrollbar-width: none; }
  .ayarlarMenu button { flex: none; padding: 7px 12px; white-space: nowrap; }
  .ayarlarIcerik { padding: 16px; }
}

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

.surumlerModal { width: min(800px, 100%); height: min(680px, calc(100vh - 48px - var(--baslikYuk))); 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: calc(14px * var(--yaziOlcek)); }
.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: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
.surumEtiket { display: inline-flex; align-items: center; gap: 6px; color: var(--metin); font-family: Consolas, monospace; font-size: calc(12px * var(--yaziOlcek)); }
.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: calc(20px * var(--yaziOlcek)); font-weight: 600; }
.surumRozet { padding: 1px 9px; border: 1px solid; border-radius: 999px; font-size: calc(12px * var(--yaziOlcek)); 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: rgb(var(--maviRgb) / .5); }
.surumRozet.onSurum { color: var(--sari); border-color: rgba(253, 214, 99, .5); }

.surumNotlar { font-size: calc(14px * var(--yaziOlcek)); 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: calc(15px * var(--yaziOlcek)); font-weight: 600; }
.surumNotlar .surumOzet { font-size: calc(15px * var(--yaziOlcek)); 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: calc(12.5px * var(--yaziOlcek)); }
.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: var(--vurguYazi);
  font-size: calc(13px * var(--yaziOlcek));
  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") */

/* gorusme kaydi */
.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: var(--mercan);
  font-size: calc(12px * var(--yaziOlcek));
  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; }
}

/* ================= 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: calc(13px * var(--yaziOlcek));
}
.lobiHesap:hover { background: var(--kutu); }
.planEtiket {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--kutu);
  color: var(--soluk);
  font-size: calc(12px * var(--yaziOlcek));
  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); }
.hesapSifre button.birincil { border-color: transparent; color: var(--dolguYazi); } /* dolu dugme: turkuaz zeminde turkuaz yazi soluk gorunuyordu */
.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(--vurguDolgu); border-color: var(--vurguDolgu); color: var(--dolguYazi); font-weight: 600; }
#hesapDurum { min-height: 18px; margin: 8px 0 0; }
#hesapDurum.hata { color: var(--mercan); }
#hesapDurum.tamam { color: var(--yesil); }
.planTablo { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: calc(13px * var(--yaziOlcek)); }
.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:nth-child(n+3) { color: var(--sari); }
.planRozet {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(var(--zeminRgb) / .85);
  border: 1px solid var(--kutu);
  color: var(--soluk);
  font-size: calc(12px * var(--yaziOlcek));
  font-variant-numeric: tabular-nums;
}
.planRozet.premium { color: var(--sari); }
.planRozet.az { color: var(--vurguYazi); background: var(--sari); border-color: var(--sari); font-weight: 600; }
/* Paket rozeti (hesap.js paketRozeti): koyu cam zemin + neon cerceve; Pro turkuaz, Pro Max altin (PRO krem + MAX altin).
   Zemin her temada koyu, acik temada da okunur. Isik gorununce bir kez ve ustune gelince gecer: surekli parlamasi uye
   listesi ve sohbetteki her rozette islemci ve GPU harciyordu (2026-10-19 olcum); isik transform ile kayar, yeniden yerlesim yok. */
.paketRozet { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .32em; flex: none; margin-left: 6px; padding: 0 6px;
  height: 16px; border-radius: 999px; border: 1px solid; font-size: calc(9.5px * var(--yaziOlcek)); font-weight: 800; letter-spacing: .05em;
  line-height: 1; white-space: nowrap; vertical-align: middle; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .25)), #0a0f1a; }
.paketRozet::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-110%) skewX(-20deg);
  animation: rozetIsik 1.6s ease-out .25s 1; }
.paketRozet:hover::after { animation: rozetIsik2 1.4s ease-out 1; }
@keyframes rozetIsik { from { transform: translateX(-110%) skewX(-20deg); } to { transform: translateX(270%) skewX(-20deg); } }
@keyframes rozetIsik2 { from { transform: translateX(-110%) skewX(-20deg); } to { transform: translateX(270%) skewX(-20deg); } }
.paketRozet.pro { color: #4ff0ff; border-color: #2ee6f5; text-shadow: 0 0 6px rgba(79, 240, 255, .7);
  box-shadow: 0 0 6px rgba(46, 230, 245, .55), inset 0 0 6px rgba(46, 230, 245, .22); }
.paketRozet.promax { color: #ffc93c; border-color: #ffc23a; text-shadow: 0 0 6px rgba(255, 190, 50, .6);
  box-shadow: 0 0 7px rgba(255, 190, 50, .6), inset 0 0 6px rgba(255, 190, 50, .22); }
.paketRozet .rozetPro { color: #fff1d6; text-shadow: 0 0 5px rgba(255, 230, 180, .5); }
.paketRozet .rozetMax { color: #ffc93c; }
.profilAd .paketRozet { margin-left: 0; height: 18px; padding: 0 6px; font-size: calc(10px * var(--yaziOlcek)); }
.profilKarti.profilMax { border-color: rgba(233, 185, 73, .7); box-shadow: 0 0 0 1px rgba(233, 185, 73, .35), 0 0 26px -6px rgba(233, 185, 73, .55), 0 16px 40px rgba(0, 0, 0, .5);
  animation: profilGel 140ms cubic-bezier(.2, .8, .2, 1), maxIsik 4.8s ease-in-out 140ms 2; } /* sonsuz degil: kart acik kaldikca cizim surmesin */
.profilKarti.profilMax .profilAvatarKap { box-shadow: 0 0 0 2px #e9b949; }
@keyframes maxIsik { 0%, 100% { box-shadow: 0 0 0 1px rgba(233, 185, 73, .35), 0 0 22px -8px rgba(233, 185, 73, .45), 0 16px 40px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 0 0 1px rgba(233, 185, 73, .55), 0 0 30px -4px rgba(233, 185, 73, .65), 0 16px 40px rgba(0, 0, 0, .5); } }
@media (prefers-reduced-motion: reduce) { .paketRozet::after { animation: none; } .profilKarti.profilMax { animation: none; } }
.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: calc(13px * var(--yaziOlcek));
  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: calc(11px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek)); 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: calc(13px * var(--yaziOlcek)); white-space: nowrap; }
.mesajSesSatir select { padding: 7px 10px; font-size: calc(13px * var(--yaziOlcek)); }
.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 - var(--baslikYuk));
  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: calc(15px * var(--yaziOlcek)); font-weight: 600; }
.arkadasSayi { margin-left: 8px; font-size: calc(12px * var(--yaziOlcek)); font-weight: 500; color: var(--yesil); }
.arkadasUst .ikonBtn { width: 36px; height: 36px; color: var(--metin); }
.arkadasUst .ikonBtn.aktif { background: rgb(var(--maviRgb) / .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: calc(13px * var(--yaziOlcek)); }
.arkadasEkle button { padding: 8px 14px; font-size: calc(13px * var(--yaziOlcek)); }
.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: calc(14px * var(--yaziOlcek)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arkadasBilgi small { font-size: calc(12px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); font-weight: 500; white-space: nowrap; }
.arkadasDugme:hover { background: rgb(var(--maviRgb) / .1); }
.arkadasDugme.birincil { border-color: var(--vurguDolgu); color: var(--dolguYazi); }
.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: calc(20px + var(--baslikYuk));
  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 rgb(var(--maviRgb) / .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: calc(20px * var(--yaziOlcek)); animation: cagriNabiz 1.6s ease-in-out infinite; }
.cagriKart .avatar.emoji { font-size: calc(26px * var(--yaziOlcek)); }
@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: calc(15px * var(--yaziOlcek)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cagriYazi small { font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.cagriDugmeler { display: flex; gap: 10px; flex: none; }
.cagriDugmeler .yuvarlak { width: 46px; height: 46px; }
.cagriDugmeler .yuvarlak.ayril { width: 46px; }
.yuvarlak.cagriKabul { background: var(--yesilKoyu); color: #fff; }
.yuvarlak.cagriKabul:hover { filter: brightness(1.12); }
@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: calc(12px * var(--yaziOlcek)); 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. */
/* Telefonda 100vh tarayicinin adres/alt cubugunu da sayar (yazma kutusu altta kalir); dvh gorunen alan */
.kabuk { display: grid; grid-template-columns: 72px 240px minmax(0, 1fr); height: calc(100vh - var(--baslikYuk)); height: calc(100dvh - var(--baslikYuk)); margin-top: var(--baslikYuk); }
.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: var(--ray);
  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;
  padding: 0; /* tarayicinin dugme ic boslugu 48px logoyu saga itiyordu (sunucu simgeleriyle ayni hizada olsun) */
  width: 48px;
  height: 48px;
  border-radius: 16px; /* hepsi ayni yuvarlatilmis kare (Discord gibi): sunucular, logo, ekle, kesfet, indir */
  display: grid;
  place-items: center;
  background: var(--panel);
  color: #fff;
  font-size: calc(15px * var(--yaziOlcek));
  font-weight: 700;
  transition: background-color 150ms ease;
}
.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 { background: transparent; }

.rayAna .rayLogo { width: 48px; height: 48px; }
/* Logonun lacivert karesi (logo.js) diger simgelerle ayni boyut ve kose: 48px kutu, 16px kose (viewBox 200) */
.rayAna .rayLogo > rect:first-child { x: 0; y: 0; width: 200px; height: 200px; rx: 66.7px; }
.rayAna.aktif { background: transparent; }
/* Acilis ekrani (logo.js): animasyonlu logo; uygulama hazir olunca solarak kalkar */
.acilisEkrani {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; transition: opacity 250ms ease;
  background: radial-gradient(circle at 50% 50%, #18233F 0, var(--yan) 45%); /* logonun lacivert karesi zemine karismasin */
}
/* Selcuklu semsesi (cini-semse.svg): logonun arkasinda tek madalyon, hale gibi; ortasi bos */
.acilisEkrani::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("cini-semse-run.svg") center / 620px no-repeat; opacity: .5; /* hareketli (app/build/semse-run-uret.js) */
  -webkit-mask-image: radial-gradient(circle 310px at 50% 50%, transparent 24%, #000 56%, #000 84%, transparent 100%);
  mask-image: radial-gradient(circle 310px at 50% 50%, transparent 24%, #000 56%, #000 84%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .acilisEkrani::before { background-image: url("cini-semse.svg"); } } /* hareketi azalt: duragan semse */
html.hareketAz .acilisEkrani::before { background-image: url("cini-semse.svg"); } /* uygulamadaki "Hareketi azalt" ayari */
.acilisEkrani.kalkiyor { opacity: 0; pointer-events: none; }
.acilisLogo { width: 120px; height: 120px; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .45)); }
.rayAyrac { flex: none; width: 32px; height: 2px; border-radius: 1px; background: var(--panel); }
.rayEkle { color: var(--turkuazAcik); }
.rayEkle svg { width: 24px; height: 24px; }
.rayEkle:hover { background: var(--vurguDolgu); color: var(--dolguYazi); }
.rayOda.gecici { outline: 2px dashed var(--kenar); outline-offset: -2px; }
.rayNokta {
  z-index: 2;
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 4px solid var(--ray);
  background: var(--mavi);
}
.rayNokta.bagli { background: var(--yesil); }
/* Sol cubuk ipucu (odalar.js rayIpucuGoster): simgenin saginda, sola bakan oklu balon */
.rayIpucu {
  position: fixed;
  z-index: 60;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panelAcik);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
}
.rayIpucu.acik { opacity: 1; transform: translate(0, -50%); }
.rayIpucu::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: inherit;
  border-radius: 2px;
  transform: translateY(-50%) rotate(45deg);
}
.rayIpucu strong { display: block; font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; color: var(--metin); overflow-wrap: anywhere; }
.rayIpucu span { display: block; margin-top: 2px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
@media (prefers-reduced-motion: reduce) { .rayIpucu { transition: none; } }

/* --- yan sutun --- */
.yanSutun { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--yan); }
.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 var(--yanKoyu);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.kodlaKatil {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--yanKoyu);
  color: var(--soluk);
  font-size: calc(13px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek));
  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: calc(15px * var(--yaziOlcek));
  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: calc(11px * var(--yaziOlcek));
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.sutunSayi { flex: none; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }

/* 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: calc(12px * var(--yaziOlcek));
  font-weight: 700;
}
.odaSatirYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: calc(14px * var(--yaziOlcek)); }
.odaSatirYazi b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaSatirYazi small { font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaSatirYazi small.canli { color: var(--yesil); }
.odalarBos { margin: 4px 8px; font-size: calc(12px * var(--yaziOlcek)); 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: calc(15px * var(--yaziOlcek)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaBaslikYazi small { font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odaBaslik svg { width: 20px; height: 20px; }
/* Sunucu afisi: kanal listesinin ustunde, adin arkasinda (sunucular.js sunucuAfisCiz) */
.odaBaslik { position: relative; }
.odaAfis { display: none; }
/* Discord gibi: 16:9 afis; kanal listesi kaydirilinca yumusakca normal basliga doner (odalar.js "kaydirildi") */
#odaSutun { container-type: inline-size; }
.odaBaslik.afisli {
  height: calc(100cqw * 9 / 16); align-items: flex-start; padding-top: 14px; overflow: hidden;
  border-bottom-color: transparent; box-shadow: none; transition: height 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.odaBaslik.afisli .odaAfis { display: block; position: absolute; inset: 0; transition: opacity 220ms ease; }
.odaAfis img, .sunucuAfisOnizleme img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
/* Ustte ad okunsun diye koyulasma, altta resim sutunun rengine yumusakca karisir (sert kenar kalmaz) */
.odaBaslik.afisli::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 220ms ease;
  background:
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 38%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(to bottom, transparent 62%, color-mix(in srgb, var(--yan) 85%, transparent));
}
.odaBaslik.afisli > :not(.odaAfis) { position: relative; z-index: 2; color: #fff; transition: color 220ms ease; }
.odaBaslik.afisli .odaBaslikYazi b, .odaBaslik.afisli .odaBaslikYazi small { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.odaBaslik.afisli:hover { background: transparent; }
.odaBaslik.afisli:hover .odaAfis { opacity: .9; }
.odaBaslik.afisli.kaydirildi { height: 52px; padding-top: 0; align-items: center; border-bottom-color: var(--yanKoyu); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.odaBaslik.afisli.kaydirildi .odaAfis, .odaBaslik.afisli.kaydirildi::before { opacity: 0; }
.odaBaslik.afisli.kaydirildi > :not(.odaAfis) { color: var(--metin); }
.odaBaslik.afisli.kaydirildi .odaBaslikYazi b { color: var(--metin); text-shadow: none; }
.odaBaslik.afisli.kaydirildi .odaBaslikYazi small { color: var(--soluk); text-shadow: none; }
.odaBaslik.afisli.kaydirildi:hover { background: rgba(255, 255, 255, .04); }
@media (prefers-reduced-motion: reduce) { .odaBaslik.afisli, .odaBaslik.afisli .odaAfis, .odaBaslik.afisli::before { transition: none; } }
.sunucuAfisOnizleme { width: min(320px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--kart); display: grid; place-items: center; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.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: calc(14px * var(--yaziOlcek));
  text-align: left;
}
.kanalKisi:hover { background: rgba(255, 255, 255, .05); color: var(--metin); }
.kanalKisi .avatar { width: 24px; height: 24px; flex: none; font-size: calc(11px * var(--yaziOlcek)); font-weight: 600; }
.kanalKisi .avatar.emoji { font-size: calc(14px * var(--yaziOlcek)); }
.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(--vurguDolgu);
  color: var(--dolguYazi);
  font-size: calc(10px * var(--yaziOlcek));
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 16px;
}
.kanalKisi svg { width: 15px; height: 15px; color: var(--mercan); }
.kanalKisi svg.kameraIsaret { 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); }
/* Konusma isareti: bulundugum kanalda biri konusurken simge tam parlaklikta, kimse konusmazken soluk; animasyon yok.
   Olcum (2026-10-19, 182 Hz ekran, gorusmede surekli konusma): eski cubuk dalgasi (SVG sekillerinde donusum, GPU'ya
   devredilemiyor) toplam %51 (saniyede 182 stil hesabi + 182 yerlesim), opaklik nabzi bile %30 (GPU her ekran
   karesinde ciziyor), sabit isaret durum degisince bir kez cizer. Oteki kanallarda (icinde biri olsa da) simge
   durur, dolu kanal rengiyle ayrilir. */
.kanalSesli.dolu svg { color: var(--metin); }
.kanalSesli.bagli svg { opacity: .55; }
.kanalSesli.bagli.konusuluyor svg { opacity: 1; }
/* Pencere kucultulmus ya da tepsideyken (tepsi.js pencere:etkin) animasyonlar durur: backgroundThrottling kapali
   oldugu icin (main.js; gorusme sesi arka planda yavaslamasin) sayfa kendini hep gorunur sanar ve cizmeye devam ederdi */
html.pencereArkada *, html.pencereArkada *::before, html.pencereArkada *::after { animation-play-state: paused !important; }
.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; }
/* Kilit isareti satirin sag ucunda durur; ustune gelince cikan ayar dugmesi onun ustune binmesin diye kilit sola kayar */
.kanalSatir:has(.kanalAyar):hover .kilitIsaret, .kanalSatir:has(.kanalAyar:focus-visible) .kilitIsaret { margin-right: 26px; }
.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;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 8px 6px;
  background: var(--alt);
  border-bottom: 1px solid var(--cizgiAcik);
}
.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: calc(13px * var(--yaziOlcek)); }
.sesPanelYazi small { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); }
.sesPanel .pingMs { display: inline; min-width: 40px; }
.sesAyril { width: 32px; height: 32px; color: var(--mercan); }
.sesPanelUst { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Kamera ve ekran: gorusme ekranindakilerin durumunu yansitir (app.js sesPanelAraclari) */
.sesPanelAraclar { display: flex; gap: 6px; }
.sesPanelArac { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 8px; background: var(--kutu); color: var(--metin); font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; }
.sesPanelArac:hover:not(:disabled) { background: var(--kart); }
.sesPanelArac:disabled { opacity: .5; cursor: default; }
.sesPanelArac svg { width: 18px; height: 18px; fill: currentColor; }
.sesPanelArac .ikonKapali, .sesPanelArac.kapali .ikonAcik { display: none; }
.sesPanelArac.kapali .ikonKapali { display: block; }
.sesPanelArac.aktif { background: rgb(var(--yesilRgb) / .18); color: var(--yesil); }
.kullaniciPanel {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 8px;
  background: var(--alt);
}
.kullaniciPanel .avatarDugme { width: 34px; height: 34px; font-size: calc(15px * var(--yaziOlcek)); }
.kullaniciPanel .avatarDugme.emoji { font-size: calc(18px * var(--yaziOlcek)); }
.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: calc(14px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek)); }
.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: var(--mercan); }

/* Mikrofon/kulaklik ve yanindaki ok tek parca (Discord gibi); kapaliyken parca kirmizi zeminli. Menu: sesMenusu.js */
/* Panel soldaki sunucu cubugunun altina da uzanir (Discord gibi): ada yer acilir; cubuk altinda panel kadar bosluk birakir */
.kullaniciPanel { position: relative; z-index: 2; margin-left: -72px; width: calc(100% + 72px); padding-left: 12px; }
.odaRay { padding-bottom: calc(12px + 56px); }
/* Adin altinda silik plan adi (Diyor / Diyor+); ozel durum yazilmissa onun yerine o gorunur (profilDurum.js) */
.kullaniciPanel .lobiHesap .planEtiket { color: var(--soluk); font-weight: 500; }
/* Dugmeler hep gorundugu icin aralari dar: ad ve plan yazisina yer kalsin */
.kullaniciPanel > .panelSesGrup + .panelSesGrup, .kullaniciPanel > .panelSesGrup + #btnAyarlar { margin-left: -6px; }
.panelSesGrup { display: flex; align-items: center; flex: none; border-radius: 8px; transition: background-color 120ms; }
.panelSesGrup:hover { background: var(--kutu); }
.panelSesGrup:has(.panelMik.kapali) { background: rgb(247 101 101 / .14); }
.panelSesGrup:has(.panelMik.kapali):hover { background: rgb(247 101 101 / .22); }
.kullaniciPanel .panelSesGrup .ikonBtn { width: 28px; }
.kullaniciPanel .panelSesGrup .ikonBtn:hover { background: none; }
.panelOk {
  display: grid;
  place-items: center;
  width: 16px;
  height: 32px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--soluk);
  cursor: pointer;
}
.panelOk svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(180deg); transition: transform 150ms; }
.panelOk[aria-expanded="true"] svg { transform: none; }
.panelOk:hover, .panelOk[aria-expanded="true"] { color: var(--metin); }
.panelSesGrup:has(.panelMik.kapali) .panelOk { color: var(--mercan); }

.sesMenu {
  position: absolute;
  z-index: 40;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--kenarKoyu);
  border-radius: 10px;
  background: var(--acilir);
  box-shadow: 0 12px 32px rgb(0 0 0 / .45);
  animation: sesMenuGel 140ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes sesMenuGel { from { opacity: 0; transform: translateY(6px); } }
.sesMenu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--kenarKoyu); }
.sesMenuBolum { display: block; }
.sesMenuSatir {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--metin);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sesMenuSatir:hover, .sesMenuSatir:focus-visible { background: var(--kutu); }
.sesMenuSatir > svg { flex: none; width: 18px; height: 18px; fill: var(--soluk); transition: transform 150ms; }
.sesMenuSatir[aria-expanded="true"] > svg { transform: rotate(90deg); }
.sesMenuYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sesMenuYazi b, .sesMenuAyarlar b, .sesMenuKaydiriciUst b { font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; }
.sesMenuYazi small { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesMenuAyarlar > svg { order: -1; }
.sesMenuListe { display: flex; flex-direction: column; margin: 2px 0 4px; padding-left: 8px; }
.sesMenuSecenek {
  position: relative;
  padding: 7px 10px 7px 30px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--soluk);
  font: inherit;
  font-size: calc(13px * var(--yaziOlcek));
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.sesMenuSecenek::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 1.5px solid var(--soluk);
  border-radius: 50%;
}
.sesMenuSecenek[aria-checked="true"] { color: var(--metin); }
.sesMenuSecenek[aria-checked="true"]::before { border-color: var(--mavi); background: radial-gradient(var(--mavi) 45%, transparent 50%); }
.sesMenuSecenek:hover, .sesMenuSecenek:focus-visible { background: var(--kutu); color: var(--metin); }
.sesMenuKaydirici { padding: 8px 10px 10px; }
.sesMenuKaydiriciUst { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sesMenuDeger { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-variant-numeric: tabular-nums; }
.sesMenuKaydirici input[type="range"] {
  --dolu: 50%;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  background: linear-gradient(to right, var(--mavi) var(--dolu), var(--kutuAcik) var(--dolu));
  appearance: none;
  cursor: pointer;
}
.sesMenuKaydirici input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / .4);
  appearance: none;
}
.sesMenuKaydirici input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .sesMenu { animation: none; }
  .panelOk svg, .sesMenuSatir > svg { transition: none; }
}

/* --- icerik basliklari --- */
.icerikUst {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.icerikBaslik { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(15px * var(--yaziOlcek)); font-weight: 700; white-space: nowrap; }
.icerikBaslik > span { overflow: hidden; text-overflow: ellipsis; }
.icerikBaslik svg { width: 20px; height: 20px; color: var(--soluk); }
.icerikBaslik .yaziIsaret { color: var(--soluk); font-size: calc(20px * var(--yaziOlcek)); font-weight: 400; line-height: 1; }
.sohbetBaslik { display: none; }
#gorusme > .baglantiUyari { top: 12px; }

/* --- odaya giris --- */
.lobiSagBaslik { margin: 0 0 2px; font-size: calc(22px * var(--yaziOlcek)); 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: calc(13px * var(--yaziOlcek));
}
.odaKaydet svg { width: 18px; height: 18px; }
.odaKaydet:hover { background: rgb(var(--maviRgb) / .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: calc(14px * var(--yaziOlcek));
}
.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(--vurguDolgu); color: var(--dolguYazi); font-weight: 600; }
.arkadasSekmeler button.ekle.aktif { background: transparent; color: var(--mavi); }
.arkadasSekmeler .sutunRozet { min-width: 16px; height: 16px; font-size: calc(10px * var(--yaziOlcek)); line-height: 16px; }
.anaGovde { position: relative; isolation: isolate; flex: 1; min-height: 0; display: flex; overflow: hidden; }
/* Ana sayfa (arkadaslar): sag alt kosede soluk bir semse; liste bos da olsa dolu da olsa arkada kalir */
.anaGovde::after {
  content: ''; position: absolute; z-index: -1; right: -210px; bottom: -210px; width: 560px; aspect-ratio: 1; pointer-events: none;
  background: url("cini-semse.svg") center / contain no-repeat; opacity: .26;
}
.arkadasSayfa { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px 16px 24px; gap: 0; }
.listeBaslik { padding: 4px 2px 10px; font-size: calc(12px * var(--yaziOlcek)); 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: calc(15px * var(--yaziOlcek)); font-weight: 600; }
.arkadasSayfa .arkadasBilgi small { font-size: calc(13px * var(--yaziOlcek)); }
.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: calc(14px * var(--yaziOlcek)); }
.arkadasSayfa .arkadasEkle button { padding: 10px 16px; font-size: calc(14px * var(--yaziOlcek)); }
.arkadasSayfa > .aciklama { margin: 4px 2px 12px; }
.ekleBaslik { margin: 0 0 4px; font-size: calc(16px * var(--yaziOlcek)); }
.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: calc(22px * var(--yaziOlcek)); }
.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 var(--cizgi);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aktifGorusmeler h2 { margin: 4px 0; font-size: calc(17px * var(--yaziOlcek)); }
.aktifGorusmeler > p { margin: 0; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.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: calc(15px * var(--yaziOlcek)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aktifKartYazi small { font-size: calc(12px * var(--yaziOlcek)); 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); }
  /* Icerik kendi katmaninda: menu dugmesi (z 30) acilir pencerelerin (z 20) ustunde kalmasin */
  .icerik { isolation: isolate; }
  /* Pencereler, acilir menuler ve bildirimler soldan acilan menunun (z 45) ustunde */
  .modalArka { z-index: 50; }
  .acilirMenu, .bildirim { z-index: 55; }
  /* Menu acikken icerik karartilir; dokununca menu kapanir (odalar.js #icerik pointerdown) */
  .icerik::after { content: ''; position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .kabuk.menuAcik .icerik::after { opacity: 1; pointer-events: auto; }
  .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; }
  /* Arkadaslar: baslik yerine sekmeler (hepsi sigmazsa yana kayar) */
  #anaSayfa > .icerikUst > .icerikBaslik { display: none; }
  #anaSayfa .arkadasSekmeler { padding-left: 0; border-left: 0; }
  /* Sohbet: sol sutun kapali, kanal adi baslikta; arama kutusu dokununca acilir */
  .sohbetBaslik { display: flex; flex: 1; }
  .sohbetUst .aramaAlan { width: 36px; padding: 0 10px; cursor: pointer; }
  .sohbetUst .aramaAlan:focus-within { flex: 1; width: auto; cursor: text; }
  .sohbetUst:has(.aramaAlan:focus-within) .sohbetBaslik { display: none; }
  .sohbetUst .aramaAlan:not(:focus-within) input::placeholder { color: transparent; }
}
/* Telefonda iOS, 16px'ten kucuk yazili kutuya dokununca sayfayi yakinlastirir */
@media (max-width: 760px) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: calc(16px * var(--yaziOlcek)) !important; }
}

/* ================= ODA EKRANI (odalar.js) ================= */
/* Ortada ya sohbet (sagda acilabilen konu paneliyle) ya da sesli kanal (gorusme). Hangisinin acik oldugu
   soldaki secili satirdan belli: satir icerigin rengini alip saga dogru icerikle birlesir (KABUK). */
#odaEkran { flex-direction: row; position: relative; }
.sohbetSutun { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.sohbetSutun.gizli { display: none !important; }
.sohbetUst { gap: 6px; }

/* Sohbet */
#sohbet { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
#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: calc(12px * var(--yaziOlcek)); color: var(--mavi); background: rgb(var(--maviRgb) / .1); }
.dahaEski:hover { background: rgb(var(--maviRgb) / .18); }
/* Okunmamislarin basi yukarida kaldiysa: ustte yuzen dugme (sohbetler.js yeniDugmesiniGuncelle) */
.yeniPil { position: absolute; z-index: 4; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--vurguDolgu); color: var(--dolguYazi); font-size: calc(12.5px * var(--yaziOlcek)); font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: transform 120ms ease, background-color 120ms ease; }
.yeniPil:hover { background: var(--vurguDolguUst); transform: translateX(-50%) translateY(-1px); }
.yeniPil.gizli { display: none; }

/* Kanal degisince yeni icerik hafifce kayarak gelir (secili satirdan icerige dogru) */
@keyframes icerikGel { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sohbetAkis.gecis, .sohbetSutun.gecis, #gorusme.gecis { animation: icerikGel 220ms cubic-bezier(.2, .8, .2, 1); }

/* Sesli kanal: ortada. Kutucuklar izgarada (app.js yerlesimGuncelle); ekran ya da tahta sunulurken sahne
   solda, kutucuklar sagda serit; kisiler/notlar/ayarlar paneli en sagda. */
#gorusme { flex: 1; min-width: 0; min-height: 0; }
#gorusme.gizli { display: none !important; }

/* Dar pencere: panel acikken kutucuklarin yerinde; sunum varken kutucuklar altta yatay serit */
@media (max-width: 900px) {
  #gorusme.panelAcik #kutucuklar, #gorusme.panelAcik #sahne { display: none; }
  #gorusme.panelAcik #yanPanel { flex: 1 1 auto; }
  #gorusme.sahneVar #alan { flex-direction: column; }
  .sahneVar #kutucuklar { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .sahneVar .kutucuk { width: 160px; }
}

/* Sol sutun: sohbet kanallari ve ozel mesajlar */
.kanalYazi svg { color: var(--soluk); }
.kanalYazi .yaziIsaret { flex: none; width: 20px; text-align: center; font-size: calc(19px * var(--yaziOlcek)); 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: calc(14px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); font-weight: 600; overflow: visible; }
.ozelSatir .avatar.emoji { font-size: calc(16px * var(--yaziOlcek)); }
.ozelSatir .avatar.cevrimici::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); border: 2px solid var(--halka); }
.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: calc(12px * var(--yaziOlcek)); font-weight: 400; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozelSatirSunucu { font-weight: 600; color: var(--metin); }
.ozelBos { margin: 2px 8px 4px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }

/* ================= 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: var(--yan);
  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");
}
/* Kosebent: semsenin ceyregi sag ust kosede, soluk */
.girisKapisi::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("cini-semse-run.svg") right -420px top -420px / 840px no-repeat; opacity: .32; /* hareketli: kosede yavasca doner */
  -webkit-mask-image: radial-gradient(circle 430px at 100% 0, #000 60%, transparent 100%);
  mask-image: radial-gradient(circle 430px at 100% 0, #000 60%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .girisKapisi::before { background-image: url("cini-semse.svg"); } } /* hareketi azalt: duragan semse */
html.hareketAz .girisKapisi::before { background-image: url("cini-semse.svg"); } /* uygulamadaki "Hareketi azalt" ayari */
.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; }
.kapiMarka { display: flex; align-items: center; gap: 14px; }
.kapiMarka span { font-size: calc(34px * var(--yaziOlcek)); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.kapiIkon { width: 72px; height: 72px; }
.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: calc(15px * var(--yaziOlcek)); }
.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: var(--kart);
  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: calc(22px * var(--yaziOlcek)); font-weight: 600; letter-spacing: -.01em; }
.kapiKart > .aciklama { margin: -8px 0 2px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); text-wrap: pretty; }
.kapiDegis { margin: 0; text-align: center; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.kapiKart input { border-radius: 9px; transition: border-color 160ms; }
.kapiKart input[aria-invalid="true"] { border-color: var(--mercan); }
/* Kullanici adi kutusu: solda sabit @ (kayit formu ve Ayarlar > Hesap) */
.kadiKutu { position: relative; display: flex; align-items: center; }
.kadiKutu > i { position: absolute; left: 12px; font-style: normal; font-size: calc(15px * var(--yaziOlcek)); line-height: 1; color: var(--soluk); pointer-events: none; }
.kadiKutu > input[type="text"] { flex: 1; width: 100%; margin: 0; padding-left: 30px; } /* .hesapSifre input ust boslugu @ isaretini kaydiriyordu */
#kapiKadiDurum:empty { display: none; }
#kapiKadiDurum.tamam, #kadiDurum.tamam { color: var(--yesil); }
#kapiKadiDurum.hata, #kadiDurum.hata { color: var(--mercan); }
#kadiForm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--kutu); }
#kadiForm.gizli { display: none; }
#kadiForm .aciklama:empty { display: none; }
.profilKadi { overflow: hidden; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); text-overflow: ellipsis; white-space: nowrap; }
#kapiKod { font-size: calc(22px * var(--yaziOlcek)); 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: calc(15px * var(--yaziOlcek)); 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: calc(13px * var(--yaziOlcek)); transition: color 160ms; }
.baglantiDugme:hover { color: var(--maviAcik); text-decoration: underline; text-underline-offset: 3px; }
/* "Sifremi unuttum": sifre kutusunun hemen altinda, sagda */
.kapiUnuttum { align-self: flex-end; 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; }
  .kapiMarka span { display: none; }
  .kapiSlogan { max-width: none; font-size: calc(20px * var(--yaziOlcek)); }
  .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: calc(15px * var(--yaziOlcek));
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.raySimge img { width: 100%; height: 100%; object-fit: cover; }
.rayOda.ozelGorusme .raySimge { background: var(--ozelYesil); 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 #btnOdaMenu { cursor: default; }
.ozelSutun #btnOdaMenu svg { display: none; }

/* Pencereler */
.modal input[aria-invalid="true"] { border-color: var(--mercan); }
.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: var(--kart);
  border: 1px dashed var(--kenar);
  color: var(--soluk);
  font-size: calc(22px * var(--yaziOlcek));
  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: calc(26px * var(--yaziOlcek)); }
.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: calc(13px * var(--yaziOlcek));
  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: var(--kart); }
.sunucuKartSimge {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: calc(20px * var(--yaziOlcek));
  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: calc(19px * var(--yaziOlcek)); font-weight: 600; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sunucuKartYazi small { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }

#davetLink { font-family: Consolas, "Cascadia Mono", monospace; font-size: calc(13px * var(--yaziOlcek)); }
.davetAyar summary { cursor: pointer; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.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(780px, calc(100vw - 32px)); height: min(760px, calc(100vh - 48px - var(--baslikYuk))); 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 var(--panel);
}
.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: calc(12px * var(--yaziOlcek)); }
.kodYazi { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .02em; }
/* Entegrasyonlar: gelen webhook'lar (sunucular.js entegrasyonlarSekmesi) */
.webhookUst { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.webhookUst .aciklama { flex: 1; margin: 0; }
.webhookUst .birincil { flex: none; padding: 8px 16px; }
.webhookAdres { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 12px; border-radius: 10px; background: rgb(var(--maviRgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--maviRgb) / .4); }
.webhookAdres .satir { display: flex; gap: 8px; flex-wrap: wrap; }
.webhookAdres input { flex: 1 1 260px; min-width: 0; font-size: calc(12.5px * var(--yaziOlcek)); }
.webhookAdres button { flex: none; padding: 7px 14px; }
.webhookSatir { align-items: flex-start; padding: 10px 8px; }
.webhookSatir .ayarSatirYazi { gap: 4px; }
.webhookIslemler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.webhookResim { flex: none; margin-top: 2px; cursor: pointer; }
.webhookResim:hover { box-shadow: 0 0 0 2px var(--mavi); }
.webhookAd { width: 100%; max-width: 260px; padding: 4px 8px; font-weight: 500; }
.webhookKanal { flex: 0 1 200px; min-width: 0; }
.webhookYardim { margin-top: 14px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.webhookYardim summary { cursor: pointer; color: var(--metin); }
.webhookYardim p { margin: 8px 0; line-height: 1.5; }
.webhookYardim pre { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--kart); color: var(--metin); font-size: calc(12px * var(--yaziOlcek)); white-space: pre-wrap; word-break: break-all; }
.sistemEtiket.botEtiket { background: var(--vurguDolgu); color: var(--dolguYazi); } /* Diyor turkuazi (birincil dugmeler gibi) */
/* Bot etkilesimleri (sohbetler.js): komut satiri, dugmeler, sadece kisinin gordugu mesaj */
.mesajEtkilesim { display: flex; align-items: center; gap: 4px; margin: 0 0 2px; color: var(--soluk); font-size: calc(12.5px * var(--yaziOlcek)); }
.mesajEtkilesim .simge { font-size: calc(14px * var(--yaziOlcek)); }
.mesajDugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.mesajDugme { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 6px; font-size: calc(13.5px * var(--yaziOlcek)); font-weight: 500; color: #fff; text-decoration: none; transition: filter 120ms ease; }
.mesajDugme:hover:not(:disabled) { filter: brightness(1.1); text-decoration: none; }
.mesajDugme:disabled { opacity: .5; cursor: default; }
.mesajDugme.primary { background: var(--vurguDolgu); color: var(--dolguYazi); }
.mesajDugme.secondary, .mesajDugme.link { background: rgba(255, 255, 255, .1); color: var(--metin); }
.mesajDugme.success { background: var(--yesilKoyu); }
.mesajDugme.danger { background: #da373c; }
.mesaj.geciciMesaj { background: rgb(var(--maviRgb) / .06); }
/* Bot kartlari (embeds) */
.botKart { display: grid; gap: 6px; max-width: 520px; margin: 6px 0 2px; padding: 10px 14px 12px; border-left: 4px solid var(--soluk); border-radius: 6px; background: rgba(255, 255, 255, .04); }
.botKartBaslik { font-weight: 600; color: var(--metin); }
.botKartBaslik a { color: var(--mavi); }
.botKartAciklama { font-size: calc(14px * var(--yaziOlcek)); line-height: 1.45; }
.botKartAlanlar { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.botKartAlan { flex: 1 1 100%; min-width: 0; font-size: calc(13.5px * var(--yaziOlcek)); }
.botKartAlan.yanyana { flex: 1 1 140px; }
.botKartAlan b { display: block; margin-bottom: 2px; font-size: calc(12.5px * var(--yaziOlcek)); }
.botKartResim { max-width: 100%; max-height: 300px; border-radius: 6px; cursor: zoom-in; }
.botKartAlt { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.geciciNot { margin-top: 4px; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.geciciNot .metinDugme { font-size: calc(12px * var(--yaziOlcek)); }
.botOzelSatir { align-items: flex-start; margin-top: 4px; }
.botOzelSatir small { display: block; margin-top: 2px; }
.ayarSatirYazi b .botEtiket, .uyeYanAd .botEtiket { margin-left: 6px; vertical-align: 1px; }
.ayarBolumBaslik { margin: 6px 0 8px; font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; letter-spacing: .02em; color: var(--soluk); text-transform: uppercase; }
.ayarBolumBaslik:not(:first-child) { margin-top: 22px; }
.ayarMenu { width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: calc(18px * var(--yaziOlcek)); 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: var(--mercan); font-weight: 600; transition: background-color 150ms ease, color 150ms ease; }
.tehlikeDugme:hover { background: var(--mercan); color: var(--vurguYazi); }
.tehlikeDugme:active { transform: scale(.98); }

.sohbetUstDugme { margin-left: auto; color: var(--soluk); }
.sohbetUstDugme.aktif { color: var(--metin); }
.odaSatirSimge.belirsiz { background: var(--kenarKoyu); color: var(--soluk); font-size: calc(18px * var(--yaziOlcek)); }

/* ================= 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: calc(12px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek)); 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 (kanallar.js): birakilacak yerde ince cizgi; icine birakilacak kanal/kategori cerceveli */
.surukleniyor { opacity: .4; }
.birakCizgi {
  position: fixed;
  z-index: 1000;
  height: 2px;
  border-radius: 1px;
  background: var(--mavi);
  pointer-events: none;
}
.birakCizgi::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mavi);
}
.kanalSatir.birakIcine::after, .kategoriBaslik.birakIcine::after, .birakKategorisiz.birakIcine {
  border-radius: 6px;
  background: rgb(var(--maviRgb) / .14);
  box-shadow: inset 0 0 0 2px var(--mavi);
}
.kanalSatir.birakIcine::after, .kategoriBaslik.birakIcine::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.birakKategorisiz.birakIcine { border-color: transparent; color: var(--metin); }
.birakKategorisiz {
  margin: 6px 6px 4px;
  padding: 8px;
  border: 1px dashed var(--soluk);
  border-radius: 6px;
  color: var(--soluk);
  font-size: calc(12px * var(--yaziOlcek));
  text-align: center;
}
.suruklemeVar .kanalAyar, .suruklemeVar .kategoriBaslik .kanalEkle { display: none !important; }
.suruklemeVar .sutunOge { pointer-events: none; } /* imlec altindaki hover rengi birakma yerini gizlemesin */
.kanalKisi[draggable="true"] { cursor: grab; }
.kanalPencereKonular { align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--kart); }
.kanalPencereKonular input { margin-top: 2px; flex: none; }
.kanalPencereKonular > span { display: flex; flex-direction: column; gap: 1px; }
#btnKanalPencereSil { color: var(--mercan); }

/* 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: var(--kart);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.kanalTur:hover { background: var(--kartUst); }
.kanalTur:has(input:checked) { border-color: var(--mavi); background: rgb(var(--maviRgb) / .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: calc(20px * var(--yaziOlcek)); line-height: 1; color: var(--soluk); }
svg.kanalTurIsaret { height: 20px; fill: currentColor; }
span.kanalTurIsaret { display: grid; place-items: center; }
span.kanalTurIsaret svg { width: 20px; 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: calc(12px * var(--yaziOlcek)); }

/* Kanal izinleri penceresi */
.kanalIzinPencere { width: min(480px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px - var(--baslikYuk))); 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: calc(13px * var(--yaziOlcek)); font-weight: 600; }
.izinRoller { display: flex; flex-direction: column; gap: 6px; margin-left: 28px; padding: 10px 12px; border-radius: 10px; background: var(--kart); }
.izinRoller .aciklama { margin: 0; }
.izinRol { font-size: calc(13px * var(--yaziOlcek)); }
.izinMiras { align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--kart); }
.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: calc(13px * var(--yaziOlcek));
  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: calc(16px * var(--yaziOlcek)); 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: var(--vurguYazi); box-shadow: 0 0 0 2px var(--metin); }
.rolRenk.renksiz { background: repeating-linear-gradient(135deg, var(--kutu) 0 4px, var(--panel) 4px 8px); }
.rolRenk:disabled { cursor: default; opacity: .5; }
.rolIzinler { display: flex; flex-direction: column; gap: 10px; }
.rolIzinBaslik { margin: 6px 0 0; font-size: calc(13px * var(--yaziOlcek)); 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: calc(12px * var(--yaziOlcek)); }
.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: var(--acilir);
  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: calc(13px * var(--yaziOlcek)); 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 var(--kenarKoyu);
  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 var(--kenarKoyu); }
.sohbetPanelUst b { font-size: calc(14px * var(--yaziOlcek)); 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: calc(13px * var(--yaziOlcek)); line-height: 1.5; color: var(--soluk); }
.panelOzet { margin: 0; padding: 8px 14px 0; font-size: calc(12px * var(--yaziOlcek)); 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: calc(10px * var(--yaziOlcek)); }
.panelMesajUst b { font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panelMesajYer { min-width: 0; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panelMesajUst time { flex: none; margin-left: auto; font-size: calc(11px * var(--yaziOlcek)); color: var(--soluk); }
.panelMesajMetin {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(13px * var(--yaziOlcek));
  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: calc(12px * var(--yaziOlcek)); 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: var(--mercan); color: var(--mercan); }
.panelDaha { flex: none; margin: 4px 6px 6px; padding: 8px; border-radius: 8px; color: var(--mavi); font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; transition: background-color 120ms ease; }
.panelDaha:hover:not(:disabled) { background: rgb(var(--maviRgb) / .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: var(--kartUst);
  color: var(--soluk);
  font-size: calc(12px * var(--yaziOlcek));
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.tepkiCip:hover { background: var(--kartUst3); border-color: var(--kenar); }
.tepkiCip:active { transform: translateY(1px); }
.tepkiCip.benim { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .4); color: #fff; }
.tepkiEmoji { font-size: calc(15px * var(--yaziOlcek)); 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: block;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--kenarKoyu);
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.emojiSecici button, .emojiAlan button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-size: calc(20px * var(--yaziOlcek)); line-height: 1; transition: background-color 100ms ease, transform 100ms ease; }
.emojiSecici button:hover, .emojiSecici button:focus-visible, .emojiAlan button:hover, .emojiAlan button:focus-visible { background: rgba(255, 255, 255, .08); transform: scale(1.12); outline: none; }
.emojiSecici button.secili, .emojiAlan button.secili { background: rgb(var(--maviRgb) / .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: calc(11px * var(--yaziOlcek)); color: var(--soluk); }
.sabitIsaret::before { content: ''; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--simgeIgne) center / contain no-repeat; mask: var(--simgeIgne) center / contain no-repeat; }
.mesaj.devami.sabit .mesajUst { display: flex; }

/* ================= DURUM, PROFIL RESMI, BILDIRIM AYARI (profilDurum.js) ================= */
:root {
  --durumBosta: #f0b232;
  --durumRahatsiz: var(--mercan);
  --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; }
.avatarResim { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.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 var(--alt);
  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: var(--alt); box-shadow: inset 0 0 0 3px var(--durumGorunmez); }
.kullaniciOzel {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soluk);
  font-size: calc(12px * var(--yaziOlcek));
  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); }

/* 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: calc(11.5px * var(--yaziOlcek)); 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: var(--kart); font-size: calc(20px * var(--yaziOlcek)); transition: background-color 150ms ease; }
.ozelEmoji:hover { background: var(--kartUst2); }
.ozelEmoji.bos { filter: grayscale(1); opacity: .55; }
.ozelEmojiListe { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; border-radius: 10px; background: var(--kart); }
.ozelEmojiListe button { height: 34px; border-radius: 8px; font-size: calc(19px * var(--yaziOlcek)); transition: background-color 100ms ease; }
.ozelEmojiListe button:hover, .ozelEmojiListe button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.ozelEmojiListe button.secili { background: rgb(var(--maviRgb) / .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; }
/* Kenarlik dahil 20px (ic 14px): sayi tam ortada; alttaki simgenin ustunde kalsin (z-index) */
.rayRozet {
  position: absolute;
  z-index: 2;
  right: -6px;
  bottom: -6px;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: 999px;
  border: 3px solid var(--ray);
  background: #e5484d;
  color: #fff;
  font-size: calc(10.5px * var(--yaziOlcek));
  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: calc(17px * var(--yaziOlcek)); }
.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: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.hizliSimge { flex: none; display: grid; place-items: center; width: 24px; height: 24px; font-size: calc(18px * var(--yaziOlcek)); color: var(--soluk); }
.hizliSimge svg { width: 18px; height: 18px; fill: currentColor; }
.hizliSimge.sunucuSimge { overflow: hidden; border-radius: 8px; color: #fff; font-size: calc(9.5px * var(--yaziOlcek)); font-weight: 700; }
.hizliSimge.sunucuSimge img { width: 100%; height: 100%; object-fit: cover; }
.hizliSimge.avatar { width: 24px; height: 24px; aspect-ratio: auto; font-size: calc(11px * var(--yaziOlcek)); font-weight: 600; color: #fff; }
.hizliSimge.avatar.emoji { font-size: calc(14px * var(--yaziOlcek)); }
.hizliBos { margin: 0; padding: 16px 8px; font-size: calc(13px * var(--yaziOlcek)); line-height: 1.5; color: var(--soluk); }
.hizliIpucu { margin: 0; font-size: calc(12px * var(--yaziOlcek)); 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); }
/* Sadece bende sessiz (ben sessize aldim): gri hoparlor; kirmizi mikrofon herkesin gordugu durumdur */
.kanalKisi svg.yerelSessizIsaret { color: var(--soluk); }
.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: calc(12px * var(--yaziOlcek));
}
.mesajMetin .kodBlok {
  margin: 4px 0;
  padding: 8px 10px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--kutu);
  border-radius: 6px;
  background: var(--alt);
  white-space: pre;
}
.mesajMetin .kodBlok code { font-family: Consolas, "Cascadia Mono", monospace; font-size: calc(12px * var(--sohbetOlcek)); 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: calc(20px * var(--yaziOlcek)); }
.mesajMetin .mesajBaslik.b2 { font-size: calc(17px * var(--yaziOlcek)); }
.mesajMetin .mesajBaslik.b3 { font-size: calc(15px * var(--yaziOlcek)); }
.mesajMetin .mesajMaddeler { margin: 2px 0; padding-left: 22px; }
.mesajMetin .mesajMaddeler li { margin: 1px 0; }
.mesajMetin.buyukEmoji { font-size: calc(40px * var(--yaziOlcek)); 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: 5px solid #fff;
  border-radius: 6px;
  background: var(--panel);
}
.linkKartYazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linkKartSite { font-size: calc(11px * var(--yaziOlcek)); color: var(--soluk); }
.linkKart a.linkKartBaslik { font-size: calc(14px * var(--yaziOlcek)); 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: calc(12.5px * var(--yaziOlcek));
  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) ================= */
/* Gun ayraci: gun degisince mesajlarin arasinda tarih (sohbetler.js gunAyraci) */
.gunAyraci { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; color: var(--soluk); }
.gunAyraci::before, .gunAyraci::after { content: ''; flex: 1; height: 1px; background: var(--kenar); }
.yeniCizgi { display: flex; align-items: center; gap: 8px; margin: 16px 0 -6px; font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; color: var(--turkuazAcik); }
.yeniCizgi::before { content: ''; flex: 1; height: 1px; background: rgb(var(--maviRgb) / .55); }
.yeniCizgi span { padding: 1px 6px; border-radius: 4px; background: var(--vurguDolgu); color: var(--dolguYazi); 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: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.iletUst b { font-size: calc(13px * var(--yaziOlcek)); 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: calc(15px * var(--yaziOlcek)); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.anketIpucu { margin-top: -4px; font-size: calc(12px * var(--yaziOlcek)); 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: rgb(255 255 255 / .07);
  transition: width .3s ease;
}
.anketSecenek:hover:not(:disabled) { border-color: var(--kenar); }
.anketSecenek:active:not(:disabled) { transform: translateY(1px); }
.anketSecenek.secili { border-color: rgb(255 255 255 / .45); }
.anketSecenek.secili::before { background: rgb(255 255 255 / .12); }
.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: #fff; background: #fff; 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: calc(13.5px * var(--yaziOlcek)); }
.anketSayi { flex: none; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); font-variant-numeric: tabular-nums; }
.anketAlt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.anketBitir { padding: 0; color: var(--mavi); font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; }
.anketBitir:hover { text-decoration: underline; }

/* Cekilis karti (cekilis.js) */
.cekilisKart { display: flex; flex-direction: column; gap: 6px; width: min(100%, 440px); margin-top: 6px; padding: 12px 14px; border-radius: 8px; background: var(--panel); border-left: 3px solid var(--sari); }
.cekilisUst { display: flex; align-items: center; gap: 8px; }
.cekilisEtiket { font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sari); }
.cekilisOdul { font-size: calc(16px * var(--yaziOlcek)); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.cekilisBilgi { font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.cekilisKazananlar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--zemin); font-size: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
.cekilisKazananlar b { color: var(--metin); font-size: calc(12px * var(--yaziOlcek)); }
.cekilisKazananListe { display: flex; flex-wrap: wrap; gap: 6px; }
.cekilisKazanan { padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--metin); font-weight: 600; }
.cekilisKazanan.ben { background: rgb(var(--yesilRgb) / .2); color: var(--yesil); }
.cekilisAlt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cekilisKatil { min-width: 110px; height: 34px; padding: 0 16px; border-radius: 8px; background: var(--vurguDolgu); color: var(--dolguYazi); font-weight: 700; }
.cekilisKatil:hover { background: var(--vurguDolguUst); }
.cekilisKatil.katildi { background: rgb(var(--yesilRgb) / .18); color: var(--yesil); }
.cekilisKatil.katildi:hover { background: rgb(var(--yesilRgb) / .26); }
.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: calc(13px * var(--yaziOlcek)); }
.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: calc(13px * var(--yaziOlcek)); }
#anketDurum:empty { display: none; }


/* ================= 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: calc(13px * var(--yaziOlcek)); 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: rgb(var(--zeminRgb) / .85); color: var(--metin); }
.gbResimOnizleme .ikonBtn svg { width: 16px; height: 16px; }
.gbDurum.hata { color: var(--mercan); }

/* ================= YENI DUZEN: secili satir icerige birlesir, mesajlarda resim, konu paneli ================= */
/* Icerik (sohbet, sesli kanal) sol sutundan biraz acik; secili satir ayni rengi alip saga, icerige dogru
   uzanir ve kenarlari iceri kivrilir: hangi kanalda olundugu basliga gerek kalmadan belli olur. */
:root { --icerik: #10162A; }
.icerik { background: var(--icerik); }
.sutunListe { scrollbar-width: none; }
.sutunListe::-webkit-scrollbar { display: none; }
.sutunListe .sutunOge, .sutunListe .ozelSatir { transition: background-color 180ms ease, color 180ms ease, border-radius 180ms ease; }
.sutunListe .sutunOge.aktif, .sutunListe .ozelSatir.aktif {
  position: relative;
  z-index: 1;
  margin-right: -8px;
  padding-right: 16px;
  border-radius: 8px 0 0 8px;
  background: var(--icerik);
  color: var(--metin);
}
.sutunListe .kanalSatir .sutunOge.aktif, .sutunListe .ozelSatir.aktif { width: calc(100% + 8px); }
.sutunListe .sutunOge.aktif::before, .sutunListe .sutunOge.aktif::after,
.sutunListe .ozelSatir.aktif::before, .sutunListe .ozelSatir.aktif::after {
  content: '';
  position: absolute;
  right: 0;
  left: auto;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 0;
  pointer-events: none;
}
.sutunListe .sutunOge.aktif::before, .sutunListe .ozelSatir.aktif::before { top: -8px; background: radial-gradient(circle at 0 0, transparent 7.5px, var(--icerik) 8px); }
.sutunListe .sutunOge.aktif::after, .sutunListe .ozelSatir.aktif::after { top: auto; bottom: -8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--icerik) 8px); }
.sutunListe .kanalSatir:has(.aktif) .kanalAyar { right: 14px; }
.sutunListe .kanalSatir:has(.aktif):has(.kanalAyar):hover .kilitIsaret, .sutunListe .kanalSatir:has(.aktif):has(.kanalAyar:focus-visible) .kilitIsaret { margin-right: 34px; }
/* Kilitli satirda kisi sayisi ustune gelince yer de kaplamaz: kilit her satirda dugmenin hemen solunda durur */
.kanalSatir:has(.kanalAyar):hover .kilitIsaret ~ .sutunSayi, .kanalSatir:has(.kanalAyar:focus-visible) .kilitIsaret ~ .sutunSayi { display: none; }

/* Mesajlar: solda yazanin resmi; art arda mesajlarda resim yerine (uzerine gelince) saat */
/* Solda 8px pay: vurgulu (bahsedilen, konusu acik) mesajin cizgisi resme degmesin, acilinca kayma olmasin */
.mesaj { padding-left: 60px; min-height: 22px; }
.mesaj:hover { background: rgba(255, 255, 255, .025); }
.mesajAvatar { position: absolute; left: 8px; top: 2px; width: 38px; height: 38px; font-size: calc(15px * var(--yaziOlcek)); font-weight: 600; }
.mesajAvatar.emoji { font-size: calc(20px * var(--yaziOlcek)); }
.mesajAvatar.adTik { cursor: pointer; transition: filter 120ms ease; }
.mesajAvatar.adTik:hover { filter: brightness(1.12); }
.mesajAvatar.adTik:active { transform: translateY(1px); }
.mesajAvatar.diyorAvatar { background: var(--acilir) !important; padding: 6px; }
.mesaj.devami .mesajAvatar { display: none; }
.mesajKisaSaat { display: none; position: absolute; left: 8px; top: 3px; width: 40px; text-align: center; font-size: calc(10.5px * var(--yaziOlcek)); line-height: 18px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.mesaj.devami:hover .mesajKisaSaat { display: block; }
.mesaj.devami.sabit .mesajAvatar { display: grid; }
.mesaj.devami.sabit .mesajKisaSaat { display: none; }
.mesaj.sistemMesaj { padding-left: 62px; }
.mesaj.sistemMesaj .mesajAvatar { left: 10px; top: 8px; }
.mesaj.iplikAcik { background: rgb(var(--maviRgb) / .08); box-shadow: inset 3px 0 0 var(--mavi); }
/* Vurgu cizgisi duz dursun (yuvarlak kosede kivrilmasin) */
.mesaj.bahsedildi, .mesaj.iplikAcik { border-radius: 0 8px 8px 0; }

/* Ana mesajin altindaki konu karti: yanit verenlerin resimleri, yanit sayisi */
.iplikKart {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 12px 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--metin);
  text-align: left;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.iplikKart:hover { border-color: var(--kenar); background: rgba(255, 255, 255, .04); }
.iplikKart:active { transform: translateY(1px); }
.iplikYuzler { display: flex; align-items: center; }
.iplikYuzler .avatar { width: 22px; height: 22px; font-size: calc(10px * var(--yaziOlcek)); font-weight: 600; border: 2px solid var(--icerik); }
.iplikYuzler .avatar + .avatar { margin-left: -6px; }
.iplikYuzler svg { width: 18px; height: 18px; fill: var(--mavi); }
.iplikKartYazi { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.iplikKartYazi b { font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; color: var(--mavi); white-space: nowrap; }
.iplikKartYazi small { font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sagdaki konu paneli (iplik.js) */
@keyframes iplikGel { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.iplikYan { flex: 0 0 400px; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--iplikCizgi); background: var(--icerik); animation: iplikGel 200ms cubic-bezier(.2, .8, .2, 1); }
.iplikYan.gizli { display: none !important; }
.iplikYanUst { gap: 4px; padding: 0 8px 0 16px; }
.iplikYanBaslik { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.iplikYanBaslik b { font-size: calc(15px * var(--yaziOlcek)); font-weight: 700; }
.iplikYanBaslik small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.iplikYanUst .ikonBtn { width: 32px; height: 32px; color: var(--soluk); border-radius: 8px; }
.iplikYanUst .ikonBtn:hover { color: var(--metin); background: rgba(255, 255, 255, .06); }
.iplikYanUst .ikonBtn svg { width: 20px; height: 20px; }
.iplikListe { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 12px; }
.iplikAna .mesaj { margin-top: 0; }
.iplikAna .mesaj:hover { background: none; }
.iplikAyrac { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.iplikAyrac::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }
.iplikAyrac.bos { justify-content: center; margin-top: 28px; }
.iplikAyrac.bos::after { display: none; }
.iplikListe .sohbetAkis > .sohbetBos { display: none; }
.iplikAlt { padding: 0 12px 12px; }
#iplikModu { display: flex; align-items: center; gap: 6px; margin: 0 4px 6px; padding: 4px 4px 4px 10px; border-radius: 8px; background: rgb(var(--maviRgb) / .1); font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
#iplikModu.gizli { display: none; }
#iplikModu span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iplikModu b { color: var(--mavi); }
#iplikModu .ikonBtn { width: 26px; height: 26px; }
#iplikModu .ikonBtn svg { width: 16px; height: 16px; }
#iplikKutu { flex: 1; min-height: 36px; max-height: 120px; padding: 8px 0 8px 12px; border: 0; background: none; color: var(--metin); font: inherit; font-size: calc(13px * var(--yaziOlcek)); line-height: 20px; resize: none; outline: none; user-select: text; }
#btnIplikGonder { width: 36px; height: 36px; color: var(--mavi); flex: none; }
#btnIplikGonder:disabled { color: var(--soluk); }
@media (max-width: 1100px) { .iplikYan { flex-basis: 340px; } }
@media (max-width: 900px) {
  .iplikYan { position: absolute; z-index: 25; top: 0; right: 0; bottom: 0; width: min(400px, 100%); box-shadow: -8px 0 24px rgba(0, 0, 0, .4); }
}

/* Sesli kanalin alt cubugu: solda kanalin araclari (beyaz tahta, notlar), ortada ses ve goruntu */
#kontrol { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); gap: 12px; }
#kontrol .araclar { justify-self: start; display: flex; gap: 6px; min-width: 0; }
#kontrol .sag { justify-self: end; display: flex; align-items: center; gap: 2px; min-width: 0; }
#kontrol .sag .panelBtn { width: 40px; height: 40px; border-radius: 50%; color: var(--soluk); transition: background-color 150ms ease, color 150ms ease; }
#kontrol .sag .panelBtn:hover { background: rgba(255, 255, 255, .06); color: var(--metin); }
#kontrol .sag .panelBtn.aktif { background: rgb(var(--maviRgb) / .16); color: var(--mavi); }
#kontrol .sag .panelBtn svg { width: 21px; height: 21px; }
#kontrol .sag .kayitIsaret { margin: 0 6px 0 0; }
#gorusme #alan { padding-top: 10px; }

/* Ust satir: solda plan rozeti, sagda davet (akista: kutucuklarin ve sahnenin ustune binmez) */
.gorusmeUst { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 12px 16px 0; }
.gorusmeUst .planRozet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Gorusmenin suresi (app.js): plan rozetinin yaninda, davetin solunda */
.gorusmeSure { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; font-variant-numeric: tabular-nums; }
.gorusmeSure svg { width: 14px; height: 14px; fill: currentColor; }
.davetDugme {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--metin);
  font-size: calc(13px * var(--yaziOlcek));
  font-weight: 600;
  transition: background-color 150ms ease;
}
.davetDugme svg { width: 18px; height: 18px; fill: currentColor; }
.davetDugme:hover { background: rgba(255, 255, 255, .1); }
.davetDugme:active { transform: translateY(1px); }
/* Telefon: uc grup tek satira sigmaz (ust uste binerdi); ustte araclar ve sagdakiler, altta ortadakiler */
@media (max-width: 760px) {
  #kontrol {
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "araclar . sag" "orta orta orta";
    gap: 6px 6px;
    padding: 6px 8px 10px;
  }
  .gorusmeUst { padding-left: 56px; min-height: 44px; padding-top: 8px; } /* sol ustteki menu dugmesine yer */
  .davetDugme span { display: none; }
  .davetDugme { width: 36px; padding: 0; justify-content: center; }
  #kontrol .araclar { grid-area: araclar; }
  #kontrol .sag { grid-area: sag; }
  #kontrol .orta { grid-area: orta; justify-self: center; gap: 10px; }
  #kontrol .sag .panelBtn { width: 36px; height: 36px; }
  #kontrol .orta .yuvarlak { width: 46px; height: 46px; }
  #kontrol .aracDugme { width: 36px; height: 36px; }
}
.aracDugme {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--kutu);
  color: var(--metin);
  font-size: calc(13px * var(--yaziOlcek));
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.aracDugme svg { width: 20px; height: 20px; }
.aracDugme:hover { background: var(--kutuAcik); }
.aracDugme:active { transform: translateY(1px); }
.aracDugme.aktif { background: rgb(var(--maviRgb) / .18); color: var(--mavi); }
#btnTahta.aracDugme.yeni::after { top: 4px; right: 6px; }
/* Gorusme alani daralinca (sagda notlar/liste acik ya da dar pencere) araclar sadece simge: ortadaki dugmelerin ustune binmesin */
#gorusme { container: gorusme / inline-size; }
@container gorusme (max-width: 860px) {
  .aracDugme { width: 40px; padding: 0; justify-content: center; }
  .aracDugme span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sohbetAkis.gecis, .sohbetSutun.gecis, #gorusme.gecis, .iplikYan { animation: none; }
  .sutunListe .sutunOge, .sutunListe .ozelSatir { transition: none; }
}

/* Sunucudaki dosyanin kalan saklama suresi (dosya.js omurGuncelle): resim ve dosya kartlarinin altinda */
.medyaOmur { margin-top: 3px; font-size: calc(11px * var(--yaziOlcek)); color: var(--soluk); font-variant-numeric: tabular-nums; }
.medyaOmur::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--simgeKum) center / contain no-repeat; mask: var(--simgeKum) center / contain no-repeat; }
.medyaOmur.az { color: var(--sari); }

/* ================= YUKLENIYOR ISKELETI (sunucuya/kanala gecerken; kanallar.js, sohbetler.js) ================= */
/* Gercek duzenin yerinde gri, hafif parlayan bloklar: kanal agaci, ozel mesajlar, mesajlar */
@keyframes iskeletParilti { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.iskelet {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 70%);
  background-size: 300% 100%;
  animation: iskeletParilti 1.5s ease-in-out 20; /* sonlu: takilan yukleme sonsuza dek cizdirmesin */
}
.iskeletAvatar { flex: none; border-radius: 50%; }
.iskeletSatir { height: 10px; }

/* mesajlar */
.sohbetBos.iskeletAkis { margin: 0; padding: 4px 0 0; background: none; text-align: left; }
.iskeletMesaj { position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 42px; margin-top: 22px; padding-left: 60px; }
.iskeletMesaj .iskeletAvatar { position: absolute; left: 8px; top: 0; width: 38px; height: 38px; }
.iskeletMesaj .iskeletAd { height: 11px; max-width: 160px; margin-bottom: 2px; }
.iskeletMesaj .iskeletSatir { max-width: 560px; }
.iskeletMesaj:nth-child(2) .iskelet { animation-delay: .1s; }
.iskeletMesaj:nth-child(3) .iskelet { animation-delay: .2s; }
.iskeletMesaj:nth-child(4) .iskelet { animation-delay: .3s; }
.iskeletMesaj:nth-child(5) .iskelet { animation-delay: .4s; }
.iskeletMesaj:nth-child(6) .iskelet { animation-delay: .5s; }

/* kanal agaci */
.iskeletBolum { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.iskeletKategori { width: 42%; height: 8px; margin: 12px 8px 8px; }
.iskeletKanalSatir { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; }
.iskeletKanalSimge { flex: none; width: 18px; height: 14px; border-radius: 4px; }
.iskeletKanalSimge.sesli { border-radius: 50%; width: 16px; height: 16px; }
.iskeletKanalSatir .iskeletSatir { height: 11px; }

/* ozel mesajlar */

@media (prefers-reduced-motion: reduce) { .iskelet { animation: none; } }

/* ================= GIF VE CIKARTMALAR (gif.js) ================= */
/* Sohbetteki GIF: yeri boyutuyla ayrilir, yuklenene kadar hafif parlayan zemin; cikartma zeminsiz */
@keyframes gifBekle { 50% { opacity: .55; } }
.gifMesaj { position: relative; max-width: 100%; margin-top: 4px; border-radius: 10px; overflow: hidden; background: var(--panel); }
.gifMesaj:not(.yuklendi):not(.hata) { animation: gifBekle 1.4s ease-in-out 20; } /* sonlu: yuklenemeyen GIF sonsuza dek cizdirmesin */
.gifMesaj.cikartma { background: none; border-radius: 0; }
.gifMesaj img, .gifOge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gifMesaj.hata::after { content: 'GIF yüklenemedi'; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.gifMesaj.hata img { display: none; }

/* Secici: yazma kutusunun ustunde, sagda */
.gifSecici {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: calc(100% - 4px);
  width: min(420px, calc(100% - 24px));
  height: min(440px, 60vh);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--kenarKoyu);
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.gifSecici.gizli { display: none; }
.gifUst { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--kenarKoyu); }
.gifSekmeler { display: flex; gap: 4px; }
.gifSekmeler button { padding: 5px 12px; border-radius: 8px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); font-weight: 600; transition: background-color 120ms ease, color 120ms ease; }
.gifSekmeler button:hover { background: rgba(255, 255, 255, .05); color: var(--metin); }
.gifSekmeler button[aria-selected="true"] { background: rgb(var(--maviRgb) / .16); color: var(--mavi); }
.gifAra input { width: 100%; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: var(--acilir); color: var(--metin); font: inherit; font-size: calc(13px * var(--yaziOlcek)); outline: none; }
.gifAra input:focus { border-color: var(--mavi); }
.gifIzgara { flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: flex-start; gap: 6px; padding: 8px; }
.gifSutun { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gifOge { display: block; width: 100%; padding: 0; border-radius: 8px; overflow: hidden; background: var(--kart); transition: transform 120ms ease, box-shadow 120ms ease; }
.gifOge:not(.yuklendi) { animation: gifBekle 1.4s ease-in-out 20; }
.gifOge.cikartma { background: rgba(255, 255, 255, .03); }
.gifOge:hover, .gifOge:focus-visible { transform: scale(1.03); box-shadow: 0 0 0 2px var(--mavi); outline: none; }
.gifDurum { position: absolute; left: 16px; right: 16px; top: 120px; margin: 0; text-align: center; font-size: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
.gifDurum.gizli { display: none; }
.gifAlt { flex: none; padding: 5px 10px; border-top: 1px solid var(--kenarKoyu); text-align: right; font-size: calc(10px * var(--yaziOlcek)); letter-spacing: .02em; color: var(--soluk); }
.gifAlt b { color: var(--metin); }
@media (prefers-reduced-motion: reduce) { .gifMesaj, .gifOge { animation: none !important; } .gifOge:hover { transform: none; } }

/* ================= PROFIL KARTI (profilKarti.js) ================= */
/* Sohbette ada, resme ya da @etikete tiklayinca yaninda: kisinin renginde serit, buyuk resim, durum, roller */
@keyframes profilGel { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.profilKarti {
  position: fixed;
  z-index: 40;
  width: calc(240px * var(--yaziOlcek) + 40px); /* yazi buyutulunce kart da genisler (dugmeler tek satir kalsin) */
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--kenarKoyu);
  background: var(--profil);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  outline: none;
  animation: profilGel 140ms cubic-bezier(.2, .8, .2, 1);
  user-select: text;
}
.profilSerit { height: 52px; background-color: var(--kart); transition: height 160ms ease; }
.profilSerit.afisResimli { height: 92px; }
.profilAvatarKap { position: relative; width: 72px; height: 72px; margin: -36px 0 0 14px; border-radius: 50%; border: 5px solid var(--profil); background: var(--profil); }
.profilAvatar { width: 62px; height: 62px; font-size: calc(24px * var(--yaziOlcek)); font-weight: 600; }
.profilAvatar.emoji { font-size: calc(32px * var(--yaziOlcek)); }
.profilNokta { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--profil); }
.profilGovde { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px 14px; }
.profilAd { display: flex; align-items: center; gap: 6px; min-width: 0; }
.profilAd b { font-size: calc(16px * var(--yaziOlcek)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilTac { color: var(--sari); font-size: calc(15px * var(--yaziOlcek)); }
.profilAd .botEtiket { flex: none; height: 18px; font-size: calc(11px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilAd .botEtiket { height: 22px; padding: 0 8px; font-size: calc(13px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilAd .botEtiket svg { width: 14px; height: 14px; }
.profilEtiket { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--soluk); font-size: calc(11px * var(--yaziOlcek)); font-weight: 600; }
.profilDurumYazi { color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); white-space: nowrap; }
/* "@ad · Cevrimici" tek satirda */
.profilAltSatir { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.profilAltSatir .profilKadi:not([hidden]) + .profilDurumYazi::before { content: '·'; margin-right: 6px; }
.profilOzel { font-size: calc(13px * var(--yaziOlcek)); color: var(--metin); }
/* Etkinlik (etkinlik.js): oynadigi oyun / kullandigi uygulama, ne zamandir */
.etkinlikKart { display: flex; align-items: center; gap: 10px; min-width: 0; }
.etkinlikSimge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--kart); color: var(--soluk); font-size: 22px; }
.etkinlikSimge.t-oyun { color: var(--yesil); }
.etkinlikYazi { display: flex; flex-direction: column; min-width: 0; }
.etkinlikYazi b { font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etkinlikYazi small { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.profilBolumler { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--profilIc); }
/* Kucuk kart sade: ayrintilar (uyelik tarihi, ortak sunucular) buyuk profilde; hakkinda en fazla 3 satir */
.profilKarti:not(.buyuk) .profilBolum.ayrinti { display: none; }
.profilKarti:not(.buyuk) .profilBolumler:not(:has(.profilBolum:not(.ayrinti))) { display: none; }
.profilKarti:not(.buyuk) .profilHakkinda { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.profilKarti:not(.buyuk) .etkinlikSimge { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
.profilKarti:not(.buyuk) .etkinlikYazi b { font-size: calc(13px * var(--yaziOlcek)); }
.profilBolum h4 { margin: 0 0 4px; font-size: calc(10px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.profilYazi { font-size: calc(13px * var(--yaziOlcek)); }
.profilHakkinda { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.profilRoller { display: flex; flex-wrap: wrap; gap: 6px; }
.profilRol { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: calc(12px * var(--yaziOlcek)); }
.profilRol i { width: 10px; height: 10px; border-radius: 50%; background: #80868b; }
/* Ortak sunucular: kucuk kartta ilk 4 (gerisi "+N"; tiklayinca buyuk profil), buyuk profilde hepsi */
.profilSunucular { display: flex; flex-direction: column; gap: 2px; }
.profilSunucu { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 6px; border-radius: 8px; text-align: left; color: var(--metin); }
.profilSunucu:hover { background: rgba(255, 255, 255, .06); }
.profilSunucu.fazla { display: none; }
.profilKarti.buyuk .profilSunucu.fazla { display: flex; }
.profilKarti.buyuk .profilSunucuDaha { display: none; }
.profilSunucuSimge { flex: none; display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 9px; color: #fff; font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; }
.profilSunucuSimge img { width: 100%; height: 100%; object-fit: cover; }
.profilSunucuAd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13px * var(--yaziOlcek)); font-weight: 500; }
.profilSunucuDaha { align-self: flex-start; margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; }
.profilSunucuDaha:hover { color: var(--metin); }
.profilDugme { margin-top: 10px; padding: 7px 8px; overflow: hidden; border-radius: 8px; font-size: calc(13px * var(--yaziOlcek)); text-overflow: ellipsis; white-space: nowrap; background: var(--vurguDolgu); color: var(--dolguYazi); font-weight: 600; transition: background-color 150ms ease; }
.profilDugme:hover:not(:disabled) { background: var(--vurguDolguUst); }
.profilDugme:active:not(:disabled) { transform: translateY(1px); }
.mesajUst b.adTik { cursor: pointer; }
.bahsetme[data-kimlik] { cursor: pointer; border-radius: 4px; padding: 0 2px; background: rgb(var(--maviRgb) / .14); }
.bahsetme[data-kimlik]:hover { background: rgb(var(--maviRgb) / .28); text-decoration: underline; }
/* Buyuk profil: ayni kisiye tekrar ya da karttaki resme/afise tiklayinca ortada, arkasi karartilmis */
@keyframes profilBuyu { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes profilArkaGel { from { opacity: 0; } to { opacity: 1; } }
.profilArka { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .55); animation: profilArkaGel 160ms ease; }
.profilBuyutulebilir { cursor: zoom-in; }
.profilKarti.buyuk .profilBuyutulebilir { cursor: default; }
.profilKarti.buyuk {
  left: 50%; top: 50%;
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 48px - var(--baslikYuk));
  overflow-y: auto;
  border-radius: 18px;
  transform: translate(-50%, -50%);
  animation: profilBuyu 180ms cubic-bezier(.2, .8, .2, 1);
}
.profilKarti.buyuk .profilSerit { height: 120px; }
.profilKarti.buyuk .profilSerit.afisResimli { height: 212px; }
.profilKarti.buyuk .profilAvatarKap { width: 148px; height: 148px; margin: -74px 0 0 24px; border-width: 8px; }
.profilKarti.buyuk .profilAvatar { width: 132px; height: 132px; font-size: calc(52px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilAvatar.emoji { font-size: calc(72px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilNokta { right: 2px; bottom: 2px; width: 28px; height: 28px; border-width: 6px; }
.profilKarti.buyuk .profilGovde { gap: 6px; padding: 12px 24px 24px; }
.profilKarti.buyuk .profilAd b { font-size: calc(24px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilDurumYazi, .profilKarti.buyuk .profilOzel { font-size: calc(14px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilBolumler { gap: 16px; padding: 16px; }
.profilKarti.buyuk .profilYazi { font-size: calc(14px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilDugme { align-self: flex-start; min-width: 200px; padding: 9px 14px; font-size: calc(14px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilAd .paketRozet { height: 22px; padding: 0 8px; font-size: calc(12px * var(--yaziOlcek)); }
.profilKarti.buyuk .profilBolum h4 { margin-bottom: 6px; font-size: calc(11px * var(--yaziOlcek)); }
@media (prefers-reduced-motion: reduce) { .profilKarti, .profilKarti.buyuk, .profilArka { animation: none; } }
.bahsetme.ben[data-kimlik] { background: #fdd663; }
.bahsetme.ben[data-kimlik]:hover { background: #fde293; }

/* ================= SAGDAKI UYE LISTESI (uyeYan.js) ================= */
/* Discord gibi: sohbet kanalinda kanali gorenler (cevrimici / cevrimdisi), sesli kanalda gorusmedekiler */
.uyeYan {
  flex: 0 0 248px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--yan);
  border-left: 1px solid var(--iplikCizgi);
  transition: flex-basis 200ms cubic-bezier(.2, .8, .2, 1);
}
.uyeYan.notluk { flex-basis: 340px; }
.uyeListe { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 8px 16px; }

/* Kisi arama */
.uyeAra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 10px 10px 2px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--alt);
  color: var(--soluk);
  cursor: text;
  transition: border-color 150ms ease;
}
.uyeAra:focus-within { border-color: var(--kenar); }
.uyeAra svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.uyeAra input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--metin); font: inherit; font-size: calc(13px * var(--yaziOlcek)); outline: none; }
.uyeAra input::placeholder { color: var(--soluk); }
.uyeAra input::-webkit-search-cancel-button { filter: invert(.6); cursor: pointer; }

/* Notlar (sesli kanalda, kisilerin ustunde) */
@keyframes notGel { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.uyeNotlar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 10px 4px;
  padding: 10px;
  border-radius: 12px;
  background: var(--kart);
  animation: notGel 180ms cubic-bezier(.2, .8, .2, 1);
}
.uyeNotlar.gizli { display: none; }
.uyeNotUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 4px; }
.uyeNotUst b { font-size: calc(14px * var(--yaziOlcek)); font-weight: 700; }
.uyeNotUst .ikonBtn { width: 28px; height: 28px; color: var(--soluk); }
.uyeNotUst .ikonBtn:hover { color: var(--metin); }
.uyeNotUst .ikonBtn svg { width: 18px; height: 18px; }
.uyeYanBaslik { margin: 14px 8px 4px; font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--soluk); }
.uyeYanBaslik:first-child { margin-top: 8px; }
.uyeYanSatir {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--metin);
  text-align: left;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.uyeYanSatir:hover { background: rgba(255, 255, 255, .05); }
.uyeYanSatir:active { transform: translateY(1px); }
.uyeYanSatir.cevrimdisi { opacity: .45; }
.uyeYanSatir.cevrimdisi:hover { opacity: .8; }
.uyeYanSatir .avatar { position: relative; flex: none; width: 32px; height: 32px; font-size: calc(13px * var(--yaziOlcek)); }
.uyeYanSatir .avatar.cevrimici::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); border: 2px solid var(--yan); }
/* Bosta ve rahatsiz etmeyin rengi (ustteki genel kural ayni agirlikta ve once geldigi icin burada yeniden) */
.uyeYanSatir .avatar.cevrimici.d-bosta::after { background: var(--durumBosta); }
.uyeYanSatir .avatar.cevrimici.d-rahatsiz::after { background: var(--durumRahatsiz); }
.uyeYanSatir.konusuyor .avatar { box-shadow: 0 0 0 2px var(--yan), 0 0 0 4px var(--yesil); }
.uyeYanYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.uyeYanAd { display: flex; align-items: center; gap: 4px; min-width: 0; }
.uyeYanAd .paketRozet { margin-left: 2px; }
.uyeYanAd b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--yaziOlcek)); font-weight: 500; }
.uyeYanTac { flex: none; color: var(--sari); font-size: calc(13px * var(--yaziOlcek)); }
.uyeYanYazi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.uyeYanMik { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--soluk); }
.uyeYanMik svg { width: 16px; height: 16px; fill: currentColor; }
.uyeYanEtiket { flex: none; padding: 0 5px; border-radius: 4px; background: var(--kirmizi); color: #fff; font-size: calc(10px * var(--yaziOlcek)); font-weight: 700; line-height: 16px; }
.uyeYanRozet { flex: none; cursor: pointer; }
.uyeYanBos { margin: 12px 8px; font-size: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
/* Dar pencerede liste yok; notlar acilinca sutun sagdan ustte acilir */
@media (max-width: 1000px) {
  .uyeYan { display: none; }
  .uyeYan.notluk { display: flex; position: absolute; z-index: 25; top: 0; right: 0; bottom: 0; width: min(340px, 100%); box-shadow: -8px 0 24px rgba(0, 0, 0, .4); }
}
@media (prefers-reduced-motion: reduce) { .uyeYan { transition: none; } .uyeNotlar { animation: none; } }

/* ================= UYE ATMA / YASAKLAMA (uyeCeza.js) ================= */
.cezaPencere { width: min(460px, calc(100vw - 32px)); }
.cezaUst { display: flex; align-items: center; gap: 12px; }
.cezaUst .avatar { flex: none; width: 40px; height: 40px; font-size: calc(16px * var(--yaziOlcek)); }
.cezaUst h2 { min-width: 0; overflow-wrap: anywhere; }
.cezaTurler { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--zemin); }
.cezaSecim { padding: 8px 10px; border-radius: 8px; color: var(--soluk); font-weight: 600; transition: background-color 150ms ease, color 150ms ease; }
.cezaSecim:hover:not(:disabled) { color: var(--metin); }
.cezaSecim[aria-checked="true"] { background: var(--kutu); color: var(--metin); }
.cezaSecim[aria-checked="true"][data-tur="yasakla"] { background: rgba(242, 139, 130, .16); color: var(--mercan); }
.cezaSecim:disabled { opacity: .4; cursor: not-allowed; }
.cezaAciklama { margin: 0; }
.cezaSureler, .cezaNedenler { display: flex; flex-wrap: wrap; gap: 6px; }
.cezaCip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--kutuAcik); color: var(--metin); font-size: calc(13px * var(--yaziOlcek)); transition: background-color 150ms ease, border-color 150ms ease; }
.cezaCip:hover { background: rgba(255, 255, 255, .05); }
.cezaCip:active { transform: translateY(1px); }
.cezaCip[aria-checked="true"], .cezaCip[aria-pressed="true"] { border-color: var(--mavi); background: rgb(var(--maviRgb) / .16); }
.cezaNedenKutu { width: 100%; padding: 9px 12px; }
.tehlikeDolu { padding: 8px 18px; border-radius: 999px; background: var(--mercan); color: var(--vurguYazi); font-weight: 600; transition: background-color 150ms ease; }
.tehlikeDolu:hover { background: var(--mercanAcik); }
.tehlikeDolu:active { transform: translateY(1px); }
.cezaBilgi { display: flex; flex-direction: column; gap: 8px; }
.cezaBilgi p { margin: 0; }
.cezaBilgiNeden { padding: 10px 12px; border-radius: 10px; background: var(--zemin); overflow-wrap: anywhere; }
.yasakNeden { overflow-wrap: anywhere; }

/* ================= PROFIL: HAKKIMDA VE ARKA PLAN (profilEk.js, Ayarlar > Profil) ================= */
#ayarHakkinda {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  user-select: text;
}
#ayarHakkinda:focus { border-color: var(--mavi); }
.hakkindaSayac { align-self: flex-end; font-variant-numeric: tabular-nums; }
.hakkindaSayac.az { color: var(--sari) !important; }
/* Onizleme: kartin ust kismi gibi (serit + profil resmi) */
.afisOnizleme { position: relative; height: 112px; max-width: 360px; border-radius: 12px; overflow: hidden; background: var(--profil); }
.afisOnizlemeSerit { height: 72px; }
.afisOnizlemeSerit.afisResimli { height: 72px; }
.afisOnizlemeAvatar { position: absolute; left: 14px; bottom: 6px; width: 56px; height: 56px; font-size: calc(22px * var(--yaziOlcek)); font-weight: 600; box-shadow: 0 0 0 5px var(--profil); }
.afisRenkler { display: flex; flex-wrap: wrap; gap: 8px; }
.afisSecenek {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.afisSecenek:hover { transform: translateY(-1px); }
.afisSecenek:active { transform: translateY(1px); }
.afisSecenek[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--mavi); }
.afisSecenek.ozelRenk { background: conic-gradient(#ef4444, #f59e0b, #84cc16, #10b981, #0ea5e9, #8b5cf6, #ec4899, #ef4444); }
.afisSecenek.ozelRenk input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.afisSecenek.resimSecenek { display: grid; place-items: center; background: var(--kutu); color: var(--metin); }
.afisSecenek.resimSecenek svg { width: 18px; height: 18px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .profilSerit, .afisSecenek { transition: none; } }

/* Afis resmi (hizalamasiyla) ve profil resmi/afis hizalama penceresi (profilEk.js) */
.afisResimli { position: relative; overflow: hidden; }
.afisResim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.avatarSecim.hizalaSecim { display: grid; place-items: center; color: var(--metin); }
.avatarSecim.hizalaSecim svg { width: 20px; height: 20px; fill: currentColor; }
.hizaPencere { width: min(520px, 100%); }
.hizaCerceve {
  position: relative;
  flex: none; /* modal esnek sutun: kucuk pencerede cerceve ezilmesin (daire elips olurdu) */
  overflow: hidden;
  margin: 4px auto 0;
  background: var(--kart);
  cursor: grab;
  touch-action: none;
  outline-offset: 3px;
}
.hizaCerceve.suruklen { cursor: grabbing; }
.hizaCerceve.daire { width: min(240px, 70vw); aspect-ratio: 1; border-radius: 50%; }
.hizaCerceve.afis { width: 100%; aspect-ratio: 3; border-radius: 12px; }
.hizaCerceve.sunucuAfis { width: min(360px, 100%); aspect-ratio: 16 / 9; border-radius: 8px; }
.hizaCerceve img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.hizaYakin { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--soluk); }
.hizaYakin svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.hizaYakin input { flex: 1; accent-color: var(--mavi); }
.sistemEtiket.botEtiket.dogrulanmis { background: var(--yesilKoyu); }
.yetkiliAlan { margin-top: 18px; }
.yetkiliDogrulandi { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--yesilKoyu); color: #fff; font-size: calc(10px * var(--yaziOlcek)); vertical-align: 1px; }

/* ================= SES SINAMA (sesSinama.js, Ayarlar > Ses ve goruntu) ================= */
.sinamaSatir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -6px; }
.sinamaDugme { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--kenar); color: var(--metin); font-size: calc(13px * var(--yaziOlcek)); font-weight: 500; transition: background-color 150ms ease, border-color 150ms ease; }
.sinamaDugme:hover { background: rgba(255, 255, 255, .05); }
.sinamaDugme:active { transform: translateY(1px); }
.sinamaDugme.aktif { border-color: var(--kirmizi); color: var(--mercan); }
.sinamaDurum { flex: 1; min-width: 160px; font-size: calc(12.5px * var(--yaziOlcek)); color: var(--soluk); text-wrap: pretty; }
.sinamaDurum.suruyor { color: var(--mavi); }
.sinamaDurum.tamam { color: var(--yesil); }
.sinamaDurum.hata { color: var(--mercan); }
.cihazUyari { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(242, 139, 130, .1); color: var(--mercan); font-size: calc(13px * var(--yaziOlcek)); line-height: 1.45; }
.cihazUyari .baglantiDugme { font-size: calc(13px * var(--yaziOlcek)); }

/* ================= ERISILEBILIRLIK (erisim.js; Ayarlar > Erisilebilirlik) ================= */
/* Renk korlugu modu: yesil isaretler maviye doner (mercan/kirmizidan ayrilsin); durum noktalari sekil de alir
   (Discord gibi: rahatsiz etmeyin ortasinda cizgi, bosta hilal, gorunmez halka); konusan cercevesi kalinlasir. */
html.renkKoru { --yesil: #4C9AFF; --yesilKoyu: #2F6FD6; --yesilRgb: 76 154 255; }
html.renkKoru .kullaniciPanel .avatarDugme.d-rahatsiz::after,
html.renkKoru .avatar.cevrimici.d-rahatsiz::after,
html.renkKoru .arkadasSatir.cevrimici.d-rahatsiz .halNokta,
html.renkKoru .menuNokta.d-rahatsiz {
  background: linear-gradient(var(--alt), var(--alt)) center / 60% 26% no-repeat, var(--durumRahatsiz);
}
html.renkKoru .kullaniciPanel .avatarDugme.d-bosta::after,
html.renkKoru .avatar.cevrimici.d-bosta::after,
html.renkKoru .arkadasSatir.cevrimici.d-bosta .halNokta,
html.renkKoru .menuNokta.d-bosta {
  background: radial-gradient(circle at 28% 28%, var(--alt) 0 38%, transparent 40%), var(--durumBosta);
}
html.renkKoru .kanalKisi.konusuyor .avatar { box-shadow: 0 0 0 3px var(--yesil); }
html.renkKoru .uyeYanSatir.konusuyor .avatar { box-shadow: 0 0 0 2px var(--yan), 0 0 0 5px var(--yesil); }
html.renkKoru .kutucuk.konusuyor { outline-width: 4px; }
/* Hareketi azalt: gecis ve animasyonlar kapanir (yer degistiren icerik aninda gelir) */
html.hareketAz *, html.hareketAz *::before, html.hareketAz *::after {
  animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important;
}

/* Hazir SVG avatarlar (avatarlar.js): dairenin icini doldurur; zemin rengi avatarin kendi rengi */
/* Kirpma SVG'nin kendisinde: avatarin disina tasan durum noktasi (::after) kesilmesin */
.avatar.hazir, .avatarDugme.hazir { padding: 0; }
.hazirAvatar { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
/* avatar, emoji ve cikartmalarin ortak tanimlari (avatarlar.js sanatTanimlariniEkle): cizilir ama gorunmez */
.sanatTanimlari { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.avatarSecim.hazir { padding: 0; overflow: hidden; }
.avatarSecim.hazir.secili { box-shadow: 0 0 0 2px var(--zemin), 0 0 0 4px var(--mavi); }

/* ================= OZEL EMOJI VE CIKARTMALAR (emojiler.js) ================= */
.ozelEmoji { display: inline-block; width: 1.375em; height: 1.375em; vertical-align: -.3em; }
.ozelEmoji svg, .ozelEmoji img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mesajMetin.buyukEmoji .ozelEmoji { width: 48px; height: 48px; vertical-align: middle; }
.tepkiEmoji.ozelEmoji, .tepkiCip .tepkiEmoji svg, .tepkiCip .tepkiEmoji img { width: 18px; height: 18px; vertical-align: -4px; }
.cikartmaMesaj { width: 160px; height: 160px; margin-top: 4px; }
.cikartmaMesaj svg, .cikartmaMesaj img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cikartmaMesaj.yok { display: grid; place-items: center; height: 60px; border: 1px dashed var(--kenar); border-radius: 12px; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
/* Emoji secici: bolumler */
.emojiSecici { width: 324px; scrollbar-gutter: stable; max-width: calc(100vw - 16px); max-height: min(420px, calc(100vh - 16px)); overflow-y: auto; padding-top: 0; }
/* Ustte sabit: arama ve grup dugmeleri (sohbetAraclari.js emojiBolumleriKur); altta butun emojiler gruplariyla */
.emojiUst { position: sticky; top: 0; z-index: 1; padding: 6px 0 4px; background: var(--panel); }
.emojiAlan .emojiUst { background: var(--acilir); }
.emojiAra { width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--kenarKoyu); background: var(--zemin); color: var(--metin); font: inherit; font-size: calc(13.5px * var(--yaziOlcek)); }
.emojiAra:focus { outline: none; border-color: var(--turkuaz); }
.emojiGruplar { display: flex; gap: 1px; margin-top: 4px; }
.emojiSecici .emojiGruplar button, .emojiAlan .emojiGruplar button { flex: 1 1 0; min-width: 0; width: auto; padding: 0; height: 28px; font-size: calc(15px * var(--yaziOlcek)); border-radius: 6px; filter: grayscale(.35); opacity: .8; }
.emojiSecici .emojiGruplar button:hover, .emojiAlan .emojiGruplar button:hover { transform: none; filter: none; opacity: 1; }
.emojiIzgara { content-visibility: auto; contain-intrinsic-size: auto 200px; }
.emojiYok { padding: 24px 8px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); text-align: center; }
.emojiBolum { padding: 6px 6px 4px; color: var(--soluk); font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.emojiIzgara { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; }
.emojiIzgara .ozelEmoji { width: 26px; height: 26px; }
/* GIF seciciyle ayni pencerede: cikartma paketleri */
.gifSecici.paketKipi .gifIzgara, .gifSecici.paketKipi .gifAra, .gifSecici.paketKipi .gifAlt { display: none; }
.gifSecici.paketKipi .paketAlan { display: block; }
.gifSecici.emojiKipi .paketAlan { display: none; }
.gifSecici.emojiKipi .emojiAlan { display: block; }
.emojiAlan { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 2px 10px 10px; }
.emojiAlan .emojiIzgara { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emojiAlan .emojiBolum { padding-left: 2px; }
.paketAlan { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; }
.paketBaslik { margin: 8px 2px 6px; color: var(--soluk); font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.paketIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.paketOge { aspect-ratio: 1; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .03); transition: background-color 120ms ease, transform 120ms ease; }
.paketOge:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.paketOge > span, .paketOge svg, .paketOge img, .paketOge .cikartmaMesaj { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }

/* Sunucu ayarlari > Emoji ve cikartma */
.emojiEkleForm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emojiEkleForm select { width: 120px; }
.emojiEkleForm input { flex: 1 1 180px; min-width: 0; }
.ayarAltBaslik { margin: 6px 0 0; font-size: calc(12px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.emojiOnizleme { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.emojiOnizleme img { max-width: 30px; max-height: 30px; }
.cikartmaOnizleme { width: 64px; height: 64px; }
.cikartmaOnizleme img { max-width: 60px; max-height: 60px; }

/* Ayarlar > Sunucularim: katildigim sunucular ve her birindeki takma adim (takmaAd.js) */
.sunucularimAra { margin: 0; }
.sunucularimListe { display: flex; flex-direction: column; gap: 6px; }
.sunucularimSatir {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(140px, 220px) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--kart);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.sunucularimSatir:hover { background: var(--kartUst); }
.sunucularimSatir.vurgu { border-color: var(--mavi); }
.sunucularimSimge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 12px;
  color: #fff;
  font-size: calc(14px * var(--yaziOlcek));
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms ease;
}
.sunucularimSimge:active { transform: scale(.96); }
.sunucularimSimge img { width: 100%; height: 100%; object-fit: cover; }
.sunucularimBilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sunucularimAd { overflow: hidden; padding: 0; color: var(--metin); font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sunucularimAd:hover { text-decoration: underline; }
.sunucularimAlt { overflow: hidden; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); text-overflow: ellipsis; white-space: nowrap; }
.sunucularimAlt.tamam { color: var(--yesil); }
.sunucularimAlt.hata { color: var(--kirmizi); white-space: normal; }
.sunucularimSatir input[type="text"] { padding: 8px 10px; font-size: calc(13px * var(--yaziOlcek)); }
.sunucularimKaydet { padding: 8px 16px; font-size: calc(13px * var(--yaziOlcek)); }
.sunucularimKaydet:disabled { opacity: .45; cursor: default; }
.sunucularimBos { margin: 8px 0; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); line-height: 1.5; }
@media (max-width: 640px) {
  .sunucularimSatir { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .sunucularimSatir input[type="text"] { grid-column: 1 / -2; grid-row: 2; }
  .sunucularimKaydet { grid-row: 2; }
}

/* Profil kartinda takma adin altindaki hesap adi */
.profilHesapAd { overflow: hidden; color: var(--metin); font-size: calc(13px * var(--yaziOlcek)); opacity: .8; text-overflow: ellipsis; white-space: nowrap; }

/* Onay penceresi (onay.js): window.confirm yerine; modallarin ustunde, acilis ekraninin altinda */
.onayArka {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(4 7 15 / .62);
  opacity: 0;
  transition: opacity 160ms ease;
}
.onayArka.acik { opacity: 1; }
.onayPencere {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 18px;
  border: 1px solid var(--kenarKoyu);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgb(2 5 14 / .55);
  transform: translateY(6px) scale(.98);
  transition: transform 180ms cubic-bezier(.2, .9, .3, 1.1);
}
.onayArka.acik .onayPencere { transform: none; }
.onayPencere h2 { margin: 0; font-size: calc(17px * var(--yaziOlcek)); font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.onayPencere p { margin: 0; color: var(--soluk); font-size: calc(14px * var(--yaziOlcek)); line-height: 1.5; text-wrap: pretty; }
.onayPencere.tehlike h2::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgb(247 101 101 / .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F76565'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.onayAlt { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.onayAlt button { padding: 9px 18px; border-radius: 999px; font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; transition: background-color 150ms ease, transform 100ms ease; }
.onayAlt button:active { transform: scale(.97); }
.onayVazgec { color: var(--metin); }
.onayVazgec:hover, .onayVazgec:focus-visible { background: var(--kutuAcik); }
.onayEvet { background: var(--vurguDolgu); color: var(--dolguYazi); }
.onayEvet:hover { background: var(--vurguDolguUst); }
.onayPencere.tehlike .onayEvet { background: var(--mercan); color: #fff; }
.onayPencere.tehlike .onayEvet:hover { background: var(--mercan); filter: brightness(1.08); }
.onayAlt button:focus-visible { outline: 2px solid var(--metin); outline-offset: 2px; }

/* ================= Ayarlar: Discord duzeni (tam ekran) =================
   Solda koyu, sayfanin solundan saga yaslanan gruplu menu; sagda en fazla 740px icerik ve kapatma (ESC) sutunu. */
.ekranOkuyucu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modalArka.ayarlarTam { padding: 0; background: var(--yan); display: block; }
.ayarlarTam .sunucularimSatir { background: var(--kartUst2); }
.ayarlarTam .sunucularimSatir:hover { background: var(--kartUst3); }
.ayarlarTam .ayarlarModal {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: var(--yan);
  box-shadow: none;
  animation: ayarAcil 220ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes ayarAcil { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.ayarlarTam .ayarlarGovde { height: 100%; }
.ayarlarMenuKap { flex: 1 0 218px; display: flex; justify-content: flex-end; overflow-y: auto; background: var(--yan); scrollbar-width: thin; scrollbar-color: var(--kutu) transparent; }
.ayarlarTam .ayarlarMenu { flex: none; width: 218px; gap: 2px; padding: 60px 8px 60px 20px; border-right: 0; }
.ayarMenuBaslik { padding: 4px 10px 6px; color: var(--soluk); font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; cursor: default; pointer-events: none; user-select: none; }
.ayarMenuBaslik:not(:first-child) { padding-top: 6px; }
.ayarMenuAyrac { height: 1px; margin: 8px 10px; background: var(--kenarKoyu); }
.ayarlarTam .ayarlarMenu button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--soluk);
  font-size: calc(15px * var(--yaziOlcek));
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}
.ayarlarTam .ayarlarMenu button:hover { background: rgb(255 255 255 / .05); color: var(--metin); }
.ayarlarTam .ayarlarMenu button.aktif { background: rgb(255 255 255 / .09); color: var(--metin); }
.ayarlarTam .ayarlarMenu button:focus-visible { outline: 2px solid var(--mavi); outline-offset: -2px; }
.ayarlarTam .ayarlarMenu .ayarMenuCikis { color: var(--metin); }
.ayarlarTam .ayarlarMenu .ayarMenuCikis:hover { background: rgb(247 101 101 / .12); color: var(--mercan); }
.ayarlarTam .ayarlarMenu button svg { flex: none; width: 18px; height: 18px; opacity: .7; transition: opacity 120ms ease; }
.ayarlarTam .ayarlarMenu button:hover svg, .ayarlarTam .ayarlarMenu button.aktif svg { opacity: 1; }
.ayarMenuSurum { margin: 0; padding: 4px 10px; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); opacity: .8; }
.ayarlarTam .ayarlarIcerik { flex: 1 1 800px; display: flex; align-items: flex-start; padding: 0; overflow-y: auto; background: var(--kart); scrollbar-width: thin; scrollbar-color: var(--kutu) transparent; }
.ayarlarIcerikIc { flex: 1 1 auto; min-width: 0; max-width: 740px; padding: 60px 40px 80px; }
.ayarlarTam .ayarSayfaBaslik { margin: 0 0 22px; font-size: calc(21px * var(--yaziOlcek)); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--metin); }
.ayarlarTam .ayarlarIcerik section { gap: 20px; }
.ayarKapatKol { position: sticky; top: 0; flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 60px; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; }
.ayarKapat { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--kenar); border-radius: 50%; color: var(--soluk); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 100ms ease; }
.ayarKapat svg { width: 18px; height: 18px; }
.ayarKapat:hover { border-color: var(--metin); color: var(--metin); background: rgb(255 255 255 / .06); }
.ayarKapat:active { transform: scale(.94); }

/* Icerik: alan basliklari Discord gibi kucuk buyuk harf; secenekler arasinda ince cizgi; onay kutulari anahtar */
.ayarlarTam .ayarlarIcerik .alan > span { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.ayarlarTam .ayarlarIcerik .ayarGrup:not(:last-child), .ayarlarTam .ayarlarIcerik section > .secimSatir:not(:last-child) { padding-bottom: 20px; border-bottom: 1px solid var(--kenarKoyu); }
.ayarlarTam .ayarlarIcerik .secimSatir { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 16px; font-size: calc(15px * var(--yaziOlcek)); font-weight: 500; }
.ayarlarTam .ayarlarIcerik .secimSatir > span { flex: 1; min-width: 0; }
.ayarlarTam .ayarlarIcerik .ayarGrup > .aciklama, .ayarlarTam .ayarlarIcerik .ayarGrup > .sesDeneme { margin-left: 0; margin-right: 56px; }
.ayarlarTam .ayarlarIcerik .secimSatir input[type="checkbox"] {
  appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--kenar);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.ayarlarTam .ayarlarIcerik .secimSatir input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
  transition: transform 150ms cubic-bezier(.3, .7, .4, 1);
}
.ayarlarTam .ayarlarIcerik .secimSatir input[type="checkbox"]:checked { background: var(--yesilKoyu); }
.ayarlarTam .ayarlarIcerik .secimSatir input[type="checkbox"]:checked::before { transform: translateX(16px); }
.ayarlarTam .ayarlarIcerik .secimSatir input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.ayarlarTam .ayarlarIcerik .secimSatir input[type="checkbox"]:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }

/* Dar pencere ve telefon: menu ustte yana kayan sekmeler, kapatma sag ustte */
@media (max-width: 760px) {
  .ayarlarTam .ayarlarGovde { flex-direction: column; }
  .ayarlarMenuKap { flex: none; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--kenarKoyu); }
  .ayarlarTam .ayarlarMenu { width: auto; flex-direction: row; align-items: center; gap: 4px; padding: 10px 64px 10px 12px; }
  .ayarlarTam .ayarlarMenu button { flex: none; white-space: nowrap; font-size: calc(14px * var(--yaziOlcek)); }
  .ayarMenuBaslik, .ayarMenuAyrac, .ayarMenuSurum { display: none; }
  .ayarlarTam .ayarlarIcerik { flex: 1; }
  .ayarlarIcerikIc { padding: 20px 16px 48px; }
  .ayarKapatKol { position: fixed; top: calc(6px + var(--baslikYuk)); right: 8px; width: auto; padding: 0; z-index: 1; }
  .ayarKapatKol span { display: none; }
}

/* Metin isteyen onay penceresi (onay.js metinIste) */
.onayAlan { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.onayAlan > span { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.onaySifirla { align-self: flex-start; padding: 0; color: var(--mavi); font-size: calc(13px * var(--yaziOlcek)); }
.onaySifirla:hover { text-decoration: underline; }

/* Profil kartimda iki dugme yan yana: Profili duzenle + takma ad (takmaAd.js) */
.profilDugmeler { display: flex; gap: 8px; margin-top: 10px; }
.profilDugmeler .profilDugme { flex: 1; min-width: 0; margin-top: 0; }
.profilDugme.ikincil { background: var(--kutuAcik); color: var(--metin); }
.profilDugme.ikincil:hover:not(:disabled) { background: var(--kenar); }

/* ================= ANONSLAR: ana sayfadaki akis ve anons kanali isareti (akis.js) ================= */
/* Ana sayfanin ortasinda ya anons akisi ya da arkadaslar (kabuk.anaBolum; #anaSayfa.akisAcik). Akis sosyal medya
   duzeninde: ustte sunucu seridi (gorulmemis anonsu olanin cevresinde halka), altinda gonderi kartlari. */
#anaSayfa.akisAcik > .icerikUst, #anaSayfa.akisAcik > .anaGovde { display: none; }
.akisSayfa { position: relative; isolation: isolate; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.akisAlt { color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.akisKaydir { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 40px; }
.akisListe { display: flex; flex-direction: column; gap: 16px; width: min(640px, 100%); margin: 0 auto; }
/* Sunucu seridi */
.akisSerit { display: flex; gap: 6px; padding: 2px 2px 10px; overflow-x: auto; scrollbar-width: none; }
.akisSerit::-webkit-scrollbar { display: none; }
.akisSeritOge { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; padding: 4px 2px; background: none; color: var(--soluk); border-radius: 12px; }
.akisSeritHalka { display: grid; place-items: center; width: 58px; height: 58px; padding: 3px; border-radius: 50%; border: 2px solid var(--kenarKoyu); transition: border-color 150ms ease, transform 150ms ease; }
.akisSeritOge.yeni .akisSeritHalka { border-color: transparent; background: linear-gradient(var(--zemin), var(--zemin)) padding-box, linear-gradient(135deg, var(--turkuaz), var(--altin, #DAB77B)) border-box; }
.akisSeritOge:hover .akisSeritHalka { transform: scale(1.05); }
.akisSeritOge.secili .akisSeritHalka { border-color: var(--turkuazAcik); background: none; }
.akisSeritOge.secili { color: var(--metin); }
.akisSeritSimge { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: var(--lacivertAcik); color: #fff; font-size: calc(15px * var(--yaziOlcek)); font-weight: 700; }
.akisSeritSimge img { width: 100%; height: 100%; object-fit: cover; }
.akisSeritHepsi svg { width: 24px; height: 24px; fill: currentColor; }
.akisSeritAd { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--yaziOlcek)); }
/* Gonderi karti */
.akisKart { position: relative; padding: 16px 18px 10px; border-radius: 16px; background: var(--kart); border: 1px solid var(--kenarKoyu); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; transition: border-color 150ms ease; }
.akisKart:hover { border-color: var(--kenar); }
.akisKart.yeni { border-color: rgb(var(--maviRgb) / .45); }
.akisKartUst { display: flex; align-items: center; gap: 8px; }
.akisSunucu { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; background: none; color: inherit; text-align: left; border-radius: 8px; }
.akisSunucuSimge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--lacivertAcik); color: #fff; font-size: calc(14px * var(--yaziOlcek)); font-weight: 700; }
.akisSunucuSimge img { width: 100%; height: 100%; object-fit: cover; }
.akisSunucuAd { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.akisAdSatir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.akisAdSatir b { font-size: calc(15.5px * var(--yaziOlcek)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akisYeni { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--vurguDolgu); color: var(--dolguYazi); font-size: calc(10.5px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.akisSunucuAd small { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--soluk); font-size: calc(12.5px * var(--yaziOlcek)); }
.akisSunucuAd small .avatar.kucuk { flex: none; width: 16px; height: 16px; font-size: calc(8px * var(--yaziOlcek)); }
.akisYazanAd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akisNokta { opacity: .6; }
.akisSunucu:hover .akisAdSatir b { color: var(--mavi); }
.akisMenu { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: none; color: var(--soluk); }
.akisMenu:hover { background: var(--kutuAcik); color: var(--metin); }
.akisMenu svg { width: 20px; height: 20px; fill: currentColor; }
.akisMetin { margin-top: 12px; font-size: calc(15.5px * var(--yaziOlcek)); line-height: 1.6; user-select: text; overflow-wrap: anywhere; }
.akisMetin.buyukEmoji { font-size: calc(40px * var(--yaziOlcek)); line-height: 1.2; }
.akisResim { display: block; width: 100%; min-height: 120px; max-height: 460px; margin-top: 12px; padding: 0; overflow: hidden; border-radius: 12px; background: var(--kutu); cursor: zoom-in; }
.akisResim img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.akisEk { display: block; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--kutu); color: var(--metin); font-size: calc(14px * var(--yaziOlcek)); text-align: left; }
.akisEk:hover { background: var(--kutuAcik); }
.akisKart > .linkOnizlemeler, .akisKart > .linkOnizleme { margin-top: 12px; }
/* Kartin alti: tepkiler, altinda ince cizgiyle eylemler */
.akisAltSatir { margin-top: 12px; }
.akisTepkiler:empty { display: none; }
.akisTepkiler { margin: 0 0 10px; }
.akisEylemler { display: flex; gap: 4px; padding-top: 6px; border-top: 1px solid var(--kenarKoyu); }
.akisEylem { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 8px; background: none; color: var(--soluk); font-size: calc(13.5px * var(--yaziOlcek)); font-weight: 600; transition: background-color 120ms ease, color 120ms ease; }
.akisEylem:hover { background: rgb(var(--maviRgb) / .1); color: var(--mavi); }
.akisEylem svg { width: 18px; height: 18px; fill: currentColor; }
/* Bos, yukleniyor, son */
.akisBos { margin: 56px auto; text-align: center; color: var(--soluk); }
.akisBos b { display: block; margin-bottom: 6px; color: var(--metin); font-size: calc(18px * var(--yaziOlcek)); }
.akisBos p { margin: 0; }
.akisBosSimge { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: rgb(var(--maviRgb) / .12); color: var(--mavi); }
.akisBosSimge svg { width: 30px; height: 30px; fill: currentColor; }
.akisSon { margin: 4px 0 0; text-align: center; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.akisIskelet { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; }
.akisIskelet span { display: block; height: 12px; border-radius: 6px; background: var(--kutu); animation: akisNabiz 1.4s ease-in-out 20; }
.akisIskelet .iskeletUst { width: 44%; height: 44px; border-radius: 22px; }
.akisIskelet .kisa { width: 60%; }
@keyframes akisNabiz { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
html.hareketAz .akisIskelet span { animation: none; }
.akisDaha { align-self: center; padding: 8px 18px; border-radius: 999px; background: var(--kutu); color: var(--metin); font-weight: 600; }
.akisDaha:hover:not(:disabled) { background: var(--kutuAcik); }
.akisSessiz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.akisSessizDugme { padding: 4px 10px; border-radius: 999px; background: var(--kutu); color: var(--metin); font-size: calc(13px * var(--yaziOlcek)); }
.akisSessizDugme:hover { background: var(--kutuAcik); }
/* Soldaki "Ana sayfa" satirinda gorulmemis anons noktasi */
.sutunNokta { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--turkuazAcik); }
/* Anons kanalinin isareti: "#" yerine megafon */
/* Siradaki duyuru: yazma kutusunun ustundeki kart (akis.js duyuruSirasiCiz) */
.duyuruSira {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 6px;
  padding: 8px 8px 8px 12px;
  border-radius: 10px;
  border: 1px solid rgb(var(--maviRgb) / .28);
  background: rgb(var(--maviRgb) / .08);
}
.duyuruSira.gizli { display: none; }
#sohbet.yazilamaz .duyuruSira { display: none; }
.siraIsaret { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--maviRgb) / .16); color: var(--mavi); }
.siraIsaret svg { width: 17px; height: 17px; fill: currentColor; }
.siraGovde { flex: 1; min-width: 0; }
.siraUst { display: flex; align-items: baseline; gap: 8px; font-size: calc(12px * var(--yaziOlcek)); color: var(--soluk); }
.siraUst b { color: var(--mavi); font-weight: 600; white-space: nowrap; }
.siraUst span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siraMetin { margin-top: 2px; font-size: calc(13px * var(--yaziOlcek)); line-height: 1.35; color: var(--metin); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.siraDugmeler { flex: none; display: flex; gap: 6px; }
.siraDugme { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: rgb(var(--maviRgb) / .16); color: var(--metin); font: inherit; font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; cursor: pointer; }
.siraDugme:hover { background: rgb(var(--maviRgb) / .28); }
.siraDugme.tehlike { background: transparent; color: var(--soluk); }
.siraDugme.tehlike:hover { background: rgb(247 101 101 / .16); color: #F76565; }

.yaziIsaret { display: inline-grid; place-items: center; }
.yaziIsaret svg { width: .9em; height: .9em; fill: currentColor; }
.anonsIsaret { display: inline-grid; place-items: center; }
.anonsIsaret svg { width: 1.05em; height: 1.05em; fill: currentColor; }
/* Selcuklu semsesi: akisin sag alt kosesinde soluk (ana sayfadaki arkadaslar bolumuyle ayni) */
.akisSayfa::after {
  content: ''; position: absolute; z-index: -1; right: -210px; bottom: -210px; width: 560px; aspect-ratio: 1; pointer-events: none;
  background: url("cini-semse.svg") center / contain no-repeat; opacity: .22;
}

/* ================= Uygulamayi indir (sadece tarayici surumu, indirPenceresi.js) ================= */
.rayIndir { color: var(--turkuazAcik); }
.rayIndir svg { width: 24px; height: 24px; fill: currentColor; }
.rayIndir:hover { background: var(--vurguDolgu); color: var(--dolguYazi); }
.indirModal { width: min(760px, 100%); padding: 0; gap: 0; overflow: hidden; }
.indirIcerik { display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 22px; overflow-y: auto; }
.indirAlt { margin: 0; color: var(--soluk); font-size: calc(14px * var(--yaziOlcek)); }
.indirKartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.indirKart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px 14px;
  border: 1px solid var(--kenar);
  border-radius: 12px;
  background: var(--kart);
  text-align: center;
  transition: border-color 150ms;
}
.indirKart:hover { border-color: var(--soluk); }
.indirKart.sizin { border-color: var(--mavi); background: rgb(var(--maviRgb) / .08); }
.indirKart > svg { width: 64px; height: 64px; margin-bottom: 6px; fill: var(--soluk); }
.indirKart.sizin > svg { fill: var(--metin); }
.indirKart b { font-size: calc(17px * var(--yaziOlcek)); font-weight: 700; }
.indirKart small { min-height: 2.6em; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.indirDugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 36px;
  margin-top: auto;
  border: 0;
  border-radius: 8px;
  background: var(--vurguDolgu);
  color: var(--dolguYazi);
  font: inherit;
  font-size: calc(14px * var(--yaziOlcek));
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms;
}
.indirDugme:hover { background: var(--vurguDolguUst); }
.indirDugme:active { transform: translateY(1px); }
.indirDugme svg { width: 18px; height: 18px; fill: currentColor; transition: transform 150ms; }
.indirDugme[aria-expanded="true"] svg { transform: rotate(180deg); }
.indirSecim { position: relative; width: 100%; margin-top: auto; }
.indirListe {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px); /* yukari acilir: pencerenin alt kenarinda kesilmesin */
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--kenarKoyu);
  border-radius: 8px;
  background: var(--acilir);
  box-shadow: 0 8px 24px rgb(0 0 0 / .45);
  text-align: left;
}
.indirListe a { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 6px; color: var(--metin); text-decoration: none; }
.indirListe a:hover, .indirListe a:focus-visible { background: var(--kutu); }
.indirListe a small { min-height: 0; }
.indirNot { margin: 0; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.indirNot:empty { display: none; }
@media (max-width: 620px) {
  .indirKartlar { grid-template-columns: minmax(0, 1fr); }
  .indirKart { flex-direction: row; flex-wrap: wrap; text-align: left; padding: 14px; }
  .indirKart > svg { width: 36px; height: 36px; margin: 0; }
  .indirKart small { min-height: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .indirDugme svg { transition: none; } }

/* ================= Ayarlar > Gorunum: renk temalari (temaAyari.js; renkler temalar.css) ================= */
.temaBaslik { margin: 6px 0 4px; font-size: calc(14px * var(--yaziOlcek)); font-weight: 700; }
.temaMaxBaslik { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.temaMaxBaslik .paketRozet { margin-left: 0; }
.temaYildiz { color: var(--sari); }
.temaNot { margin: 0 0 6px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.temaKareler { display: flex; flex-wrap: wrap; gap: 10px 6px; }
.temaKutu { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; }
.temaAd { max-width: 100%; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.temaOrnek {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgb(128 128 128 / .45);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.temaOrnek:hover { transform: translateY(-2px); }
.temaOrnek:active { transform: translateY(0); }
.temaOrnek:focus-visible { outline: 2px solid var(--mavi); outline-offset: 3px; }
.temaOrnek[aria-checked="true"], .temaOrnek.onizleniyor { box-shadow: 0 0 0 2px var(--zemin), 0 0 0 4px var(--mavi); }
.temaOrnek[aria-checked="true"] + .temaAd, .temaOrnek.onizleniyor + .temaAd { color: var(--metin); }
.temaOrnek[aria-checked="true"]::after {
  content: '';
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--zemin);
  border-radius: 50%;
  background: var(--vurguDolgu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.temaKilit { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgb(0 0 0 / .55); }
.temaKilit svg { width: 12px; height: 12px; fill: #fff; }
.temaPremiumKutu { padding: 16px; border: 1px solid var(--kenarKoyu); border-radius: 12px; }
.temaOnizleme { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: rgb(var(--maviRgb) / .12); font-size: calc(13px * var(--yaziOlcek)); }
.temaOnizleme span { flex: 1 1 260px; }
.temaOnizleme button { padding: 6px 12px; border: 1px solid var(--kenar); border-radius: 8px; background: none; color: var(--metin); font: inherit; cursor: pointer; }
.temaOnizleme button:hover { background: var(--kutu); }
@media (prefers-reduced-motion: reduce) { .temaOrnek { transition: none; } .temaOrnek:hover { transform: none; } }

/* Acik tema: koyu zemin varsayan beyaz yazilar (sistem mesajinin adi, giris ekranindaki marka, benim tepkim) zemine gore */
html[data-tema="acik"] .mesaj.sistemMesaj .mesajUst b, html[data-tema="acik"] .kapiMarka span { color: var(--metin); }
html[data-tema="acik"] .tepkiCip.benim { background: rgb(var(--maviRgb) / .12); border-color: var(--mavi); color: var(--metin); }

/* ================= Erisilebilirlik: yogunluk ve baglanti cizgisi (erisim.js) ================= */
/* Kullanici arayuzu yogunlugu: sunucu, kanal, uye ve arkadas listelerinin satir araliklari */
html.yogunSikisik .sutunOge { min-height: 30px; }
html.yogunSikisik .uyeYanSatir { min-height: 34px; padding-block: 2px; }
html.yogunSikisik .kanalKisi { min-height: 26px; }
html.yogunSikisik .arkadasSatir { padding-block: 4px; }
html.yogunSikisik .rayOdalar, html.yogunSikisik .odaRay { gap: 4px; }
html.yogunSikisik .odaSatir { min-height: 38px; }
html.yogunGenis .sutunOge { min-height: 42px; }
html.yogunGenis .uyeYanSatir { min-height: 50px; padding-block: 6px; }
html.yogunGenis .kanalKisi { min-height: 34px; }
html.yogunGenis .arkadasSatir { padding-block: 10px; }
html.yogunGenis .rayOdalar, html.yogunGenis .odaRay { gap: 12px; }
html.yogunGenis .odaSatir { min-height: 50px; }
/* Baglantilarin altini her zaman ciz */
html.baglantiAlti :is(.mesajMetin, .aciklama, .surum, .botKartBaslik, .profilHakkinda, .erisimOnizleme) a:not([class*="Dugme"]) { text-decoration: underline; text-underline-offset: 2px; }

/* ================= Ayarlar > Erisilebilirlik (erisimAyari.js) ================= */
.erisimAltBaslik { margin: 0 0 6px; color: var(--soluk); font-size: calc(14px * var(--yaziOlcek)); font-weight: 500; }
.erisimBolumBaslik { margin: 18px 0 2px; font-size: calc(19px * var(--yaziOlcek)); font-weight: 500; }
.erisimAyarAd { font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; }
.ayarGrup > .aciklama.erisimAciklama { margin: 0; }
.erisimOnizleme { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 18px 20px; border: 1px solid var(--kenarKoyu); border-radius: 10px; background: var(--icerik); }
.erisimMesajlar { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.erisimMesaj { display: flex; gap: 12px; }
.erisimMesaj > .avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; font-size: calc(16px * var(--yaziOlcek)); font-weight: 700; line-height: 1; }
.erisimGovde { min-width: 0; }
.erisimGovde .mesajTepkiler { margin-top: 4px; }
.erisimGovde .tepkiCip { cursor: default; }
.erisimYan { display: flex; align-items: center; gap: 18px; }
.erisimDurumlar { display: flex; flex-direction: column; gap: 8px; }
.erisimDurumlar .avatar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; font-size: calc(13px * var(--yaziOlcek)); }
.erisimYan .birincil { pointer-events: none; }
/* Yazi boyutu kaydiricisi: isaretler degere oranli konumda (Discord gibi) */
.yaziKaydirici { position: relative; padding-top: 22px; margin: 4px 10px 0; }
.boyutIsaretler { position: absolute; inset: 0 0 auto; height: 18px; }
.boyutIsaret { position: absolute; top: 0; transform: translateX(-50%); color: var(--soluk); font-size: calc(11px * var(--yaziOlcek)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boyutIsaret::after { content: ''; position: absolute; left: 50%; top: 22px; width: 1px; height: 14px; background: var(--kenar); }
.boyutIsaret.secili { color: var(--mavi); font-weight: 700; }
.yaziKaydirici input[type="range"] {
  --dolu: 33%;
  position: relative;
  width: 100%;
  height: 6px;
  margin: 8px 0;
  border-radius: 3px;
  background: linear-gradient(to right, var(--mavi) var(--dolu), var(--kutuAcik) var(--dolu));
  appearance: none;
  cursor: pointer;
}
.yaziKaydirici input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .45); appearance: none; }
.yaziKaydirici input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.yogunlukSecim { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ================= Ayarlar: Discord'un yeni duzeni (ayarGezinti.js) =================
   Solda sabit menu (profilim, arama, gruplar; secili bolumun alt basliklari), sagda sabit baslik cubugu + ortada icerik */
.ayarlarTam .ayarlarGovde { display: flex; }
.ayarlarTam .ayarlarMenuKap { flex: 0 0 268px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 14px 10px 10px; border-right: 1px solid var(--cizgi); }
.ayarlarTam .ayarlarMenu { width: auto; padding: 2px 0 24px; }
.ayarProfilBas { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
#ayarProfilAvatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; font-size: calc(16px * var(--yaziOlcek)); font-weight: 700; }
.ayarProfilYazi { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ayarProfilYazi b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(15px * var(--yaziOlcek)); }
.ayarProfilDuzenle { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--soluk); font: inherit; font-size: calc(12.5px * var(--yaziOlcek)); cursor: pointer; }
.ayarProfilDuzenle svg { width: 12px; height: 12px; fill: currentColor; }
.ayarProfilDuzenle:hover { color: var(--metin); text-decoration: underline; }
.ayarAra { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--kenarKoyu); border-radius: 8px; background: var(--zemin); color: var(--soluk); }
.ayarAra:focus-within { border-color: var(--mavi); }
.ayarAra svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.ayarAra input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--metin); font: inherit; font-size: calc(14px * var(--yaziOlcek)); }
.ayarAraSonuc { display: flex; flex-direction: column; gap: 2px; }
.ayarAraSonuc button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--metin); font: inherit; text-align: left; cursor: pointer; }
.ayarAraSonuc button:hover, .ayarAraSonuc button:focus-visible { background: rgb(var(--maviRgb) / .1); }
.ayarAraSonuc b { font-size: calc(14px * var(--yaziOlcek)); font-weight: 500; }
.ayarAraSonuc small { color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.ayarAraBos { margin: 0; padding: 10px; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
/* Alt basliklar: secili bolum dugmesinin altinda, solda ince cizgi; bulunulan baslik beyaz ve cizgisi kalin */
.ayarAltMenu { display: flex; flex-direction: column; margin: 2px 0 6px 21px; border-left: 1px solid var(--kenarKoyu); }
.ayarlarTam .ayarlarMenu .ayarAltMenu button { position: relative; min-height: 32px; padding: 5px 12px; border-radius: 0; background: none; color: var(--soluk); font-size: calc(14px * var(--yaziOlcek)); font-weight: 500; }
.ayarlarTam .ayarlarMenu .ayarAltMenu button:hover { color: var(--metin); background: none; }
.ayarlarTam .ayarlarMenu .ayarAltMenu button.aktif { color: var(--metin); }
.ayarAltMenu button.aktif::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--metin); }
/* Icerik: sabit baslik cubugu (sayfa adi + kapat) */
.ayarlarTam .ayarlarIcerik { flex: 1 1 auto; display: block; }
.ayarIcerikUst { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 14px 0 24px; border-bottom: 1px solid var(--kenarKoyu); background: var(--kart); }
.ayarlarTam .ayarIcerikUst .ayarSayfaBaslik { margin: 0; font-size: calc(16px * var(--yaziOlcek)); font-weight: 600; }
.ayarIcerikUst .ayarKapat { width: 34px; height: 34px; border: 0; border-radius: 8px; }
.ayarIcerikUst .ayarKapat:hover { background: var(--kutu); }
.ayarlarTam .ayarlarIcerikIc { max-width: 720px; margin: 0 auto; padding: 34px 40px 80px; }
.ayarVurgu { animation: ayarVurgu 1.6s ease; border-radius: 8px; }
@keyframes ayarVurgu { 0%, 40% { background: rgb(var(--maviRgb) / .18); } 100% { background: transparent; } }
/* Hesap sayfasi: satirlar (ad - deger - dugme) */
#hesapGirisli { display: flex; flex-direction: column; gap: 4px; }
#hesapGirisli > .aciklama { margin: 0; }
.hesapBaslik { margin: 8px 0 6px; font-size: calc(22px * var(--yaziOlcek)); font-weight: 500; letter-spacing: -.01em; }
.hesapSatir { display: flex; align-items: center; gap: 14px; min-height: 50px; }
.hesapSatirAd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: calc(14.5px * var(--yaziOlcek)); font-weight: 600; }
.hesapSatirAd small { color: var(--soluk); font-size: calc(12.5px * var(--yaziOlcek)); font-weight: 400; line-height: 1.4; }
.hesapSatirDeger { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--yaziOlcek)); }
.hesapSatirDugme { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--kenarKoyu); border-radius: 8px; background: var(--kutu); color: var(--metin); font: inherit; font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 120ms; }
.hesapSatirDugme:hover { background: var(--kutuAcik); }
.hesapSatirDugme.tehlike { border-color: transparent; background: var(--mercan); color: #fff; }
.hesapSatirDugme.tehlike:hover { filter: brightness(1.08); background: var(--mercan); }
.hesapSatirSimge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--kutu); color: var(--sari); font-size: calc(18px * var(--yaziOlcek)); }
.hesapAyrac { width: 100%; margin: 18px 0; border: 0; border-top: 1px solid var(--kenarKoyu); }
.metinBaglanti { padding: 0; border: 0; background: none; color: var(--mavi); font: inherit; cursor: pointer; }
.metinBaglanti:hover { text-decoration: underline; }
#hesapSifreForm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--kutu); }
#hesapSifreForm.gizli { display: none; }
.planDetay summary { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); list-style: none; cursor: pointer; }
.planDetay summary::-webkit-details-marker { display: none; }
.planDetay summary svg { width: 16px; height: 16px; fill: currentColor; transition: transform 150ms; }
.planDetay[open] summary svg { transform: rotate(90deg); }
.planDetay .planTablo { margin-top: 8px; }
/* Telefon: menu ustte yana kayan sekmeler kalir; profil basligi, arama ve alt basliklar gizli */
@media (max-width: 760px) {
  .ayarlarTam .ayarlarMenuKap { flex: none; padding: 0; border-right: 0; }
  .ayarProfilBas, .ayarAra, .ayarAraSonuc, .ayarAltMenu { display: none !important; }
  .ayarlarTam .ayarlarMenu { padding: 8px 12px; }
  .ayarIcerikUst { padding: 0 8px 0 16px; }
  .ayarlarTam .ayarlarIcerikIc { padding: 20px 16px 60px; }
  .hesapSatir { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ayarVurgu { animation: none; } }
.ayarlarTam .ayarlarIcerik .yogunlukSecim .secimSatir { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; } /* Discord gibi: yuvarlak dugme solda */

/* Hesap > Giris yapilan cihazlar (hesap.js cihazlariYukle) */
.hesapSatirIleri { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--metin); font: inherit; font-size: calc(14px * var(--yaziOlcek)); font-weight: 600; cursor: pointer; }
.hesapSatirIleri:hover { background: var(--kutu); }
.hesapSatirIleri svg { width: 20px; height: 20px; fill: var(--soluk); transition: transform 150ms; }
.hesapSatirIleri[aria-expanded="true"] svg { transform: rotate(90deg); }
.cihazPanel { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; }
.cihazPanel.gizli { display: none; }
.cihazListe { display: flex; flex-direction: column; border: 1px solid var(--kenarKoyu); border-radius: 10px; overflow: hidden; }
.cihazSatir { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cihazSatir + .cihazSatir { border-top: 1px solid var(--kenarKoyu); }
.cihazSimge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kutu); color: var(--soluk); }
.cihazSimge svg { width: 22px; height: 22px; fill: currentColor; }
.cihazYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cihazYazi b { font-size: calc(14.5px * var(--yaziOlcek)); font-weight: 600; }
.cihazYazi small { color: var(--soluk); font-size: calc(12.5px * var(--yaziOlcek)); }
.cihazBu { padding: 1px 7px; border-radius: 4px; background: rgb(var(--yesilRgb) / .16); color: var(--yesil); font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; vertical-align: 1px; }
.cihazPanel > .hesapSatirDugme { align-self: flex-start; }
.cihazPanel > .aciklama:empty { display: none; }

/* Gorusmeye bagliyken "Gorusmeye bagli" cubugu da kullanici paneli gibi sol sunucu cubugunun altina uzanir: ikisi tek blok */
.sesPanel { position: relative; z-index: 2; margin-left: -72px; width: calc(100% + 72px); padding-left: 16px; }
/* Sunucu cubugunun son ogeleri iki panelin altinda kalmasin */
.kabuk:has(#sesPanel:not(.gizli)) .odaRay { padding-bottom: calc(12px + 56px + 102px); }
#epostaForm, #kapatForm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--kutu); }
#epostaForm.gizli, #kapatForm.gizli, .epostaAdim.gizli { display: none; }
.epostaAdim { display: flex; flex-direction: column; gap: 10px; }
#epostaForm .aciklama:empty, #kapatForm .aciklama:empty { display: none; }
#epostaForm .metinBaglanti:disabled, #kapatForm .metinBaglanti:disabled { color: var(--soluk); cursor: default; text-decoration: none; }
#epostaForm .ayarAlt, #kapatForm .ayarAlt { align-items: center; }
#epostaForm .ayarAlt .metinBaglanti, #kapatForm .ayarAlt .metinBaglanti { margin-right: auto; }
#kapatForm.sil { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mercan) 55%, transparent); }
#btnKapatOnayla.tehlike { background: var(--mercan); border-color: transparent; color: #fff; }

/* Bolum ayiricilari (Discord gibi): sunucu cubugu, kanal sutunu, icerik, uye listesi ve basliklar ince gri cizgiyle
   ayrilir. Renk temanin yazi renginden turetilir: her temada (acik, koyu, renkli) uyumlu, ayni belirginlikte. */
:root { --ayirici: color-mix(in srgb, var(--metin) 10%, transparent); }
.odaRay { border-right: 1px solid var(--ayirici); }
.yanSutun { border-right: 1px solid var(--ayirici); }
.sutunUst, .icerikUst { border-bottom-color: var(--ayirici); box-shadow: none; }
.uyeYan, .iplikYan { border-left-color: var(--ayirici); }
.kullaniciPanel, .sesPanel { border-top: 1px solid var(--ayirici); }
.mesajYaz { box-shadow: inset 0 0 0 1px var(--ayirici); }

/* Bolum ayiricilari (Discord gibi): sunucu cubugu, kanal sutunu, icerik, uye listesi ve basliklar ince gri cizgiyle
   ayrilir. Renk temanin yazi renginden turetilir: her temada (acik, koyu, renkli) uyumlu, ayni belirginlikte. */
:root { --ayirici: color-mix(in srgb, var(--metin) 10%, transparent); }
.odaRay { border-right: 1px solid var(--ayirici); }
.yanSutun { border-right: 1px solid var(--ayirici); }
.sutunUst, .icerikUst { border-bottom-color: var(--ayirici); box-shadow: none; }
.uyeYan, .iplikYan { border-left-color: var(--ayirici); }
.kullaniciPanel, .sesPanel { border-top: 1px solid var(--ayirici); }
.mesajYaz { box-shadow: inset 0 0 0 1px var(--ayirici); }

/* Kullanici paneli: ad ve altindaki plan/ozel durum tek tiklama alani (durum menusu); ustune gelince alt satirda
   @kullanici adi (Discord gibi) */
.kullaniciYazi { margin: 0 -4px; padding: 3px 4px; border-radius: 6px; cursor: pointer; transition: background-color 120ms ease; }
.kullaniciYazi:hover { background: color-mix(in srgb, var(--metin) 7%, transparent); }
/* Alt satir penceresi: bir satir yukseklik; icindekiler alt alta (plan ya da ozel durum, sonra @kullanici adi).
   Ustune gelince icerik bir satir yukari kayar (asagidan yukari gecis). */
.kullaniciAlt { --satir: calc(15px * var(--yaziOlcek)); display: block; max-width: 100%; height: var(--satir); overflow: hidden; }
.kullaniciAltIc { display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.kullaniciAltIc > * { flex: none; display: block; max-width: 100%; height: var(--satir); margin: 0; line-height: var(--satir); }
.kullaniciKadi { overflow: hidden; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); text-overflow: ellipsis; white-space: nowrap; }
.kullaniciYazi:hover .kullaniciAltIc:has(.kullaniciKadi:not(:empty)) { transform: translateY(calc(-1 * var(--satir))); }
@media (prefers-reduced-motion: reduce) { .kullaniciAltIc { transition: none; } }
html.hareketAz .kullaniciAltIc { transition: none; }

/* Hesap degistirme (hesapDegistir.js): pencere ve giris ekranindaki kayitli hesaplar */
.hesaplarModal { width: min(440px, 100%); padding: 0; gap: 0; overflow: hidden; }
.hesaplarIcerik { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 20px; }
.kayitliHesaplar { display: flex; flex-direction: column; gap: 4px; }
.kayitliHesap { display: flex; align-items: center; gap: 4px; border-radius: 10px; transition: background-color 120ms ease; }
.kayitliHesap:hover { background: color-mix(in srgb, var(--metin) 6%, transparent); }
.kayitliHesapGec { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; text-align: left; color: var(--metin); }
.kayitliHesapGec:focus-visible { outline: 2px solid var(--mavi); outline-offset: -2px; }
.kayitliHesapGec .avatar { flex: none; width: 40px; height: 40px; font-size: calc(16px * var(--yaziOlcek)); }
.kayitliHesapYazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.kayitliHesapYazi b, .kayitliHesapYazi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kayitliHesapYazi b { font-size: calc(15px * var(--yaziOlcek)); font-weight: 600; }
.kayitliHesapYazi small { color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); }
.kayitliHesapEtkin { flex: none; padding: 2px 8px; border-radius: 999px; background: rgb(var(--maviRgb) / .16); color: var(--mavi); font-size: calc(12px * var(--yaziOlcek)); font-weight: 600; }
.kayitliHesap.etkin .kayitliHesapGec { cursor: default; }
.kayitliHesapSil { flex: none; width: 32px; height: 32px; margin-right: 6px; color: var(--soluk); opacity: 0; transition: opacity 120ms ease; }
.kayitliHesap:hover .kayitliHesapSil, .kayitliHesapSil:focus-visible { opacity: 1; }
.kayitliHesapSil:hover { color: var(--mercan); }
@media (hover: none) { .kayitliHesapSil { opacity: 1; } }
.hesapEkleDugme { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px dashed var(--kenar); border-radius: 10px; color: var(--mavi); font-weight: 600; transition: background-color 120ms ease; }
.hesapEkleDugme svg { width: 18px; height: 18px; fill: currentColor; }
.hesapEkleDugme:not(:disabled):hover { background: rgb(var(--maviRgb) / .08); }
.hesaplarIcerik .aciklama { margin: 0; font-size: calc(12.5px * var(--yaziOlcek)); }
.kapiHesaplar { display: flex; flex-direction: column; gap: 6px; }
.kapiHesaplar > span:first-child { font-size: calc(13px * var(--yaziOlcek)); color: var(--soluk); }
.kapiHesaplar .kayitliHesap { background: color-mix(in srgb, var(--metin) 4%, transparent); }
.kapiHesaplarAyrac { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); }
.kapiHesaplarAyrac::before, .kapiHesaplarAyrac::after { content: ''; flex: 1; height: 1px; background: var(--ayirici); }

/* Profil penceresi (benPopup.js): sol alttaki panelden acilir (Discord gibi) */
.benPopup {
  position: fixed; z-index: 40; width: 300px; overflow: hidden; display: flex; flex-direction: column;
  padding-bottom: 12px; border-radius: 12px; border: 1px solid var(--ayirici); background: var(--profil);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); outline: none; animation: profilGel 140ms cubic-bezier(.2, .8, .2, 1);
}
.benSerit { height: 96px; background-color: var(--kart); }
.benUst { display: flex; align-items: flex-start; gap: 6px; margin: -44px 12px 0; }
.benAvatarKap { position: relative; flex: none; width: 88px; height: 88px; border-radius: 50%; border: 6px solid var(--profil); background: var(--profil); }
.benAvatar { width: 76px; height: 76px; font-size: calc(30px * var(--yaziOlcek)); font-weight: 600; }
.benAvatar.emoji { font-size: calc(40px * var(--yaziOlcek)); }
.benNokta { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid var(--profil); background: var(--yesil); }
.benNokta.d-bosta { background: var(--durumBosta); }
.benNokta.d-rahatsiz { background: var(--durumRahatsiz); }
.benNokta.d-gorunmez { background: var(--profil); box-shadow: inset 0 0 0 3px var(--soluk); }
/* Ozel durum balonu: avatarin sagindaki dusunce baloncugu */
.benBalon {
  position: relative; min-width: 0; max-width: 170px; margin-top: 48px; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 14px; border: 1px solid var(--ayirici); background: var(--kart);
  color: var(--soluk); font-size: calc(13px * var(--yaziOlcek)); font-style: italic; text-align: left;
  transition: color 120ms ease, background-color 120ms ease;
}
.benBalon.dolu { font-style: normal; color: var(--metin); }
.benBalon > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benBalon::before { content: ''; position: absolute; left: -9px; top: -2px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ayirici); background: var(--kart); }
.benBalon:hover { color: var(--metin); background: var(--kartUst); }
.benBalonArti { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--soluk); color: var(--kart); }
.benBalonArti svg { width: 12px; height: 12px; fill: currentColor; }
.benKimlik { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 12px; min-width: 0; }
.benKimlik b { overflow: hidden; font-size: calc(20px * var(--yaziOlcek)); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.benKimlik small { overflow: hidden; color: var(--metin); font-size: calc(13.5px * var(--yaziOlcek)); text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.benGrup { display: flex; flex-direction: column; margin: 0 12px; padding: 4px; border-radius: 10px; background: var(--kart); }
.benGrup + .benGrup { margin-top: 8px; }
.benSatir {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border-radius: 6px;
  color: var(--metin); font-size: calc(14px * var(--yaziOlcek)); font-weight: 500; text-align: left; transition: background-color 100ms ease;
}
.benSatir + .benSatir { box-shadow: 0 -1px 0 var(--ayirici); }
.benSatir:hover, .benSatir:focus-visible, .benSatir[aria-expanded="true"] { background: color-mix(in srgb, var(--metin) 8%, transparent); box-shadow: none; outline: none; }
.benSatir:hover + .benSatir, .benSatir[aria-expanded="true"] + .benSatir { box-shadow: none; }
.benSatir > svg { flex: none; width: 18px; height: 18px; fill: var(--soluk); }
.benSatir > .menuNokta { flex: none; margin: 0 4px; }
.benSatir > span:not(.benOk) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benOk { flex: none; display: grid; place-items: center; color: var(--soluk); }
.benOk svg { width: 18px; height: 18px; fill: currentColor; }
.benYan { min-width: 230px; animation: profilGel 120ms cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .benPopup, .benYan { animation: none; } }
html.hareketAz .benPopup, html.hareketAz .benYan { animation: none; }

/* Ozel tema (Diyor+, tema.js ozelTemaUygula): sunucu cubugu, kanal sutunu, icerik ve uye listesi tek bir gradyan gibi
   gorunur (background-attachment: fixed; her bolge kendi taban rengiyle karisir). Kartlar ve kutular duz kalir. */
html.ozelTema .odaRay { background: var(--ozelRay) fixed; }
html.ozelTema .yanSutun, html.ozelTema .uyeYan { background: var(--ozelYan) fixed; }
html.ozelTema .kullaniciPanel, html.ozelTema .sesPanel { background: var(--ozelAlt) fixed; }
html.ozelTema .icerik, html.ozelTema .iplikYan, html.ozelTema .sutunListe .sutunOge.aktif, html.ozelTema .sutunListe .ozelSatir.aktif { background: var(--ozelIcerik) fixed; }

/* Ozel tema paneli (ozelTema.js): ayarlarin saginda */
.ozelTemaPanel {
  position: fixed; top: var(--baslikYuk); right: 0; bottom: 0; z-index: 30; width: min(340px, 100vw); display: flex; flex-direction: column;
  border-left: 1px solid var(--ayirici); background: var(--yan); box-shadow: -16px 0 40px rgba(0, 0, 0, .35);
  animation: otGel 180ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes otGel { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ozelTemaPanel { animation: none; } }
html.hareketAz .ozelTemaPanel { animation: none; }
.otUst { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 8px 20px; }
.otUst h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: calc(16px * var(--yaziOlcek)); font-weight: 700; }
.otRozet { padding: 2px 8px; border-radius: 999px; background: rgb(var(--maviRgb) / .16); color: var(--mavi); font-size: calc(11px * var(--yaziOlcek)); font-weight: 700; }
.otUst .ikonBtn svg { width: 20px; height: 20px; }
.otGovde { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 20px 16px; scrollbar-width: thin; }
.otGovde h3 { margin: 10px 0 0; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); font-weight: 700; letter-spacing: .02em; }
.otMod { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--ayirici); background: var(--kart); }
.otMod button { display: grid; place-items: center; height: 36px; border-radius: 7px; color: var(--soluk); transition: background-color 120ms ease, color 120ms ease; }
.otMod button svg { width: 18px; height: 18px; fill: currentColor; }
.otMod button:hover { color: var(--metin); }
.otMod button[aria-checked="true"] { background: var(--kartUst2); color: var(--metin); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.otSerit { position: relative; height: 40px; margin: 0 2px; border-radius: 10px; border: 1px solid var(--ayirici); }
.otNokta { position: absolute; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 7px; border: 2px solid rgb(255 255 255 / .85); box-shadow: 0 1px 4px rgb(0 0 0 / .35); transition: transform 120ms ease; }
.otNokta:first-child:not(:only-child) { transform: translate(-10%, -50%); }
.otNokta:last-child:not(:only-child) { transform: translate(-90%, -50%); }
.otNokta[aria-checked="true"] { width: 30px; height: 30px; border-width: 3px; border-color: #fff; box-shadow: 0 0 0 2px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .35); }
.otNokta:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
.otSV {
  --ton: hsl(0 100% 50%);
  position: relative; height: 170px; border-radius: 10px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--ton));
}
.otSV:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
.otSVImlec { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 1px 4px rgb(0 0 0 / .4); pointer-events: none; }
.otTon { --imlec: red; width: 100%; height: 14px; margin: 2px 0; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.otTon::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: var(--imlec); box-shadow: 0 0 0 1px rgb(0 0 0 / .4); }
.otTon::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; background: var(--imlec); }
.otTon:focus-visible { outline: 2px solid var(--mavi); outline-offset: 3px; }
.otHexSatir { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 10px; border: 1px solid var(--ayirici); background: var(--kart); }
.otOrnek { flex: none; width: 28px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); }
.otHex[type="text"] { flex: 1; min-width: 0; height: 32px; padding: 0 6px; border: 0; background: none; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.otHexSatir .ikonBtn { flex: none; width: 32px; height: 32px; color: var(--soluk); }
.otHexSatir .ikonBtn:not(:disabled):hover { color: var(--metin); }
.otHexSatir .ikonBtn svg { width: 18px; height: 18px; fill: currentColor; }
.otDugme { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--ayirici); background: var(--kart); color: var(--metin); font-weight: 600; transition: background-color 120ms ease; }
.otDugme svg { width: 18px; height: 18px; fill: currentColor; }
.otDugme:not(:disabled):hover { background: var(--kartUst2); }
.otDugme:not(:disabled):active { transform: translateY(1px); }
.otKaydirici { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; font-size: calc(14px * var(--yaziOlcek)); }
.otKaydirici b { font-weight: 600; font-variant-numeric: tabular-nums; }
.otKaydirici input { grid-column: 1 / -1; width: 100%; accent-color: var(--vurguDolgu); }
.otAltDugmeler { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.otAlt { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--ayirici); }
.otNot { margin: 0; color: var(--soluk); font-size: calc(12.5px * var(--yaziOlcek)); }
.otNot:empty { display: none; }
.temaOrnek.temaOzel { border-color: rgb(255 255 255 / .35); }
/* Ozel tema ayarlar ekraninda da: menu ve icerik ayni gradyanla */
html.ozelTema .ayarlarTam .ayarlarModal, html.ozelTema .ayarlarMenuKap { background: var(--ozelYan) fixed; }
html.ozelTema .ayarlarTam .ayarlarIcerik { background: var(--ozelKart) fixed; }

/* Sunucu simgelerinin boyutu (erisim.js --raySimge; Ayarlar > Gorunum): simge, kose, yazi, logo, ayrac ve secim cizgisi
   ayni oranla olceklenir (48 px'teki eski olculere gore) */
:root { --raySimge: 40px; }
.rayOge { width: var(--raySimge); height: var(--raySimge); border-radius: calc(var(--raySimge) / 3); font-size: calc(var(--raySimge) * .3125 * var(--yaziOlcek)); }
.raySimge { font-size: calc(var(--raySimge) * .3125 * var(--yaziOlcek)); }
.rayAna .rayLogo { width: var(--raySimge); height: var(--raySimge); }
.rayAyrac { width: calc(var(--raySimge) * .67); }
.rayOge:hover::before, .rayOge.okunmadi:hover::before { height: calc(var(--raySimge) * .42); }
.rayOge.aktif::before { height: calc(var(--raySimge) * .75); }
.rayEkle svg, .rayIndir svg { width: calc(var(--raySimge) / 2); height: calc(var(--raySimge) / 2); }
.rayOda.ozelGorusme svg { width: calc(var(--raySimge) * .46); height: calc(var(--raySimge) * .46); }
/* Ayar: canli onizleme (gercek cubuk siniflariyla) */
.raySimgeAyar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.raySimgeOnizleme { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; padding: 12px 0; border-radius: 12px; background: var(--ray); border: 1px solid var(--ayirici); }
.raySimgeOnizleme .rayOge::before { display: none; }
.raySimgeAyar .yaziKaydirici { flex: 1 1 260px; }
/* Ozel temada acilan pencereler de gradyanli (Discord gibi): profil penceresi ve karti, menuler, ipuclari, pencereler,
   onay, emoji/GIF secici, ses menusu, ozel tema paneli */
html.ozelTema :is(.benPopup, .profilKarti) { background: var(--ozelProfil) fixed; }
html.ozelTema :is(.modal, .onayPencere, .emojiSecici, .gifSecici, #tepkiMenu, .arkadasSayfa .arkadasMenu, .guncelleme) { background: var(--ozelPanel) fixed; }
html.ozelTema :is(.acilirMenu, .rayIpucu) { background: var(--ozelPanelAcik) fixed; }
html.ozelTema .sesMenu { background: var(--ozelAcilir) fixed; }
html.ozelTema .ozelTemaPanel { background: var(--ozelYan) fixed; }
/* Ozel temada pencerelerin icindeki kartlar yari saydam: gradyan altindan gorunur */
html.ozelTema :is(.benGrup, .benBalon, .profilBolumler) { background: color-mix(in srgb, var(--kart) 62%, transparent); }

/* Sunuculari surukle-birak (odalar.js raySurukleBagla): birakilacak yerde cizgi, suruklenen soluk */
.rayOdalar { position: relative; }
.rayBirakCizgi { position: absolute; left: 50%; width: var(--raySimge); height: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--mavi); pointer-events: none; }
.rayOda.surukleniyor { opacity: .4; }

/* Buyuk sunucuda uye listesinin altindaki not (uyeYan.js) */
.uyeYanNot { margin: 10px 8px 14px; color: var(--soluk); font-size: calc(12px * var(--yaziOlcek)); line-height: 1.4; }

/* Askeri rutbe rozeti (derece.js): erbas seritleri, astsubay cubuklari, subay yildizlari; ust subay altin, general kirmizi zemin */
.dereceRozet { display: inline-flex; align-items: center; gap: 1px; flex: none; height: 16px; padding: 0 3px; margin-left: 4px; border-radius: 4px;
  color: var(--soluk); background: rgba(127, 127, 127, .14); vertical-align: middle; }
.dereceRozet svg { width: 9px; height: 9px; }
.dereceRozet.erbas { color: #8a9a5b; }
.dereceRozet.astsubay { color: #6f9bd1; }
.dereceRozet.subay { color: #c0c6cf; }
.dereceRozet.ustsubay { color: #d9a43a; }
.dereceRozet.general { color: #f6d98a; background: #8e1b1b; }
.mesajUst .dereceRozet { margin-left: -2px; align-self: center; }
.profilDereceAd { display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--yaziOlcek)); }
.profilDereceAd .dereceRozet { margin-left: 0; }
.profilDereceIlerleme { display: block; margin-top: 2px; color: var(--soluk); }
.dereceTabloKap { max-height: 46vh; overflow: auto; margin: 10px 0; border: 1px solid var(--cizgi, rgba(127, 127, 127, .2)); border-radius: 8px; }
.dereceTablo { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--yaziOlcek)); }
.dereceTablo th { position: sticky; top: 0; background: var(--panel, var(--arka)); text-align: left; padding: 6px 8px; font-weight: 600; color: var(--soluk); }
.dereceTablo td { padding: 3px 8px; border-top: 1px solid rgba(127, 127, 127, .12); }
.dereceTablo input { width: 72px; }
.dereceTabloAd { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dereceTabloAd .dereceRozet { margin-left: 0; }