/* ================= TEMA: gece mavisi + az KAL yesil/sari =================
   Zemin siyah-lacivert, ana vurgu mavi; sari sadece kendi mesajin ve kucuk vurgular,
   yesil sadece cevrimici noktasi ve logo. */
:root {
  --bg: #0F1117; --panel: #141720; --ray: #0A0C11; --kart: #1B1F29; --kutu: #171B24; --cizgi: #262B37;
  --yazi: #EEF0F5; --soluk: #A4AABA; --sonuk: #7D8496; --aktif: #232A3D;
  --mavi: #7C95FF; --mavi-koyu: #1E2747; --mavi-yazi: #0E1430;
  --sari: #F2C230; --sariyazi: #14200F; --yesil: #43C98A;
}
body { background: var(--bg); }
.sari { background: var(--mavi); color: var(--mavi-yazi); }
.yesil { background: var(--kart); border-color: var(--cizgi); color: var(--yazi); }
.yesil:hover { border-color: var(--mavi); }
.oda { color: #C9CEDA; }
.oda.aktif { background: var(--aktif); }
.oda.aktif .h { color: var(--mavi); }
.msg.ben .balon { background: var(--sari); border-color: var(--sari); }
.balon { background: var(--kart); border-color: var(--cizgi); }
.anahtar:checked { background: var(--mavi); }
.uclu.secili, .oran-btn.secili, .etiket-sec.secili { background: var(--mavi); color: var(--mavi-yazi); border-color: var(--mavi); }
.bildirim-serit, .rehber-serit, .ses-cubuk, .yukleme-durum { background: var(--mavi-koyu); border-color: #34407A; }
.bildirim-serit strong, .rehber-serit strong, .ses-cubuk-yazi strong { color: #E6EAFF; }
.bildirim-serit small, .rehber-serit small, .ses-cubuk-yazi small { color: #AAB6F5; }
.mentor-rozet, .etiket-rozet { background: var(--mavi-koyu); color: #B7C3FF; border-color: #34407A; }
.ses-agac { background: var(--mavi-koyu); }
.ses-ust h2 { color: var(--yazi); }
.kirp-tutamak { border-color: var(--mavi); }
.duzenle-tamam { background: var(--mavi); color: var(--mavi-yazi); box-shadow: 0 4px 16px rgba(124,149,255,.45); }
.ses-sayi { background: var(--yesil) !important; }
.eslestir-buyuk { background: var(--mavi-koyu); border-color: #34407A; }
.liste-rol { background: rgba(124,149,255,.16); color: #AAB6F5; }
.yukleme-cubuk > div { background: var(--mavi); }
.ses-olcer > div { background: var(--yesil); }

/* ================= TELEFON: alt sekmeli uygulama duzeni ================= */
#altBar { display: none; }
body.mobil #app { display: block; height: 100dvh; position: relative; overflow: hidden; }
body.mobil #app.gizli { display: none; }
body.mobil .ray { display: none; }
body.mobil .yan, body.mobil .orta, body.mobil .mobil-ekran {
  position: absolute; inset: 0 0 calc(66px + env(safe-area-inset-bottom)) 0; display: none;
  transform: none !important; width: auto; box-shadow: none; z-index: 1; }
body.mobil #app[data-ekran="odalar"] .yan { display: flex; }
body.mobil #app[data-ekran="sohbet"] .orta { display: flex; bottom: 0; }
body.mobil #app[data-ekran="mesajlar"] #mesajEkran,
body.mobil #app[data-ekran="akis"] #akisEkran,
body.mobil #app[data-ekran="profil"] #profilEkran { display: flex; }
body.mobil #app[data-ekran="sohbet"] #altBar { display: none; }
body.mobil #altBar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(66px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #0A0C11; border-top: 1px solid var(--cizgi); }
.alt-sek { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: var(--sonuk); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.alt-sek svg { width: 25px; height: 25px; }
.alt-sek.aktif { color: var(--mavi); }
.alt-rozet { position: absolute; top: 7px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sari); color: var(--sariyazi); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Odalar ekrani */
body.mobil .yan { padding: calc(18px + env(safe-area-inset-top)) 16px 12px; gap: 12px; background: var(--bg); overflow-y: auto; }
body.mobil .yan .profil, body.mobil .grup-dm { display: none !important; }
body.mobil .yan-baslik h1 { font-size: 30px; }
body.mobil .yan-baslik span { font-size: 15px; }
body.mobil .ara-btn { height: 46px; }
body.mobil .ara-btn kbd { display: none; }
body.mobil .grup h3 { font-size: 12.5px; letter-spacing: 1.5px; margin: 14px 4px 6px; }
body.mobil .oda { height: 48px; font-size: 17px; padding: 0 14px; border-radius: 12px; }
body.mobil .oda .sayi { min-width: 26px; height: 26px; border-radius: 13px; background: var(--sari); color: var(--sariyazi); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
body.mobil .ses-alt-liste { margin-left: 30px; }
body.mobil .yan-alt { margin-top: auto; }

/* Sohbet ekrani ust cubuk: ‹ geri | baslik + alt yazi | 👥 */
body.mobil .orta header { display: grid !important; grid-template-columns: 44px 1fr 44px; grid-template-areas: "geri baslik kisi" "geri alt kisi"; column-gap: 10px; row-gap: 0; align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 12px 10px !important; background: var(--panel); border-bottom: 1px solid var(--cizgi); min-height: 0; }
body.mobil .orta header .menu-btn { grid-area: geri; width: 44px; height: 44px; font-size: 30px; border: 0; background: none; color: var(--yazi); padding-bottom: 4px; }
body.mobil .orta header .ust-logo { display: none !important; }
body.mobil .orta header .baslik { grid-area: baslik; font-size: 21px !important; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobil .orta header .soluk { grid-area: alt; display: block !important; padding: 0 !important; margin: 0 !important; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobil .orta header .kisi-btn { grid-area: kisi; width: 44px; height: 44px; border-radius: 12px; background: var(--kart); border: 0; }
body.mobil #msgs { padding: 14px 12px; }
body.mobil #bar { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--cizgi); }
body.mobil #bar input[type=text] { border-radius: 23px; padding: 0 16px; }
body.mobil #bar .sari { width: 46px; padding: 0; border-radius: 50%; font-size: 0; }
body.mobil #bar .sari::before { content: '➤'; font-size: 18px; }

/* Ortak ekran iskeleti (Mesajlar / Akis / Profil) */
.mobil-ekran { flex-direction: column; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ekran-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(22px + env(safe-area-inset-top)) 18px 10px; }
.ekran-ust h1 { margin: 0; font-size: 32px; }
.ekran-btn { width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--kart); color: var(--yazi); font-size: 19px; cursor: pointer; }
.ekran-ara { margin: 4px 18px 8px; height: 48px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); padding: 0 16px 0 44px; font-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%237D8496' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; }

/* Mesajlar listesi */
.dm-satir { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--cizgi); background: none; color: inherit; text-align: left; width: 100%; cursor: pointer; font-family: inherit; }
.dm-satir .durumlu .avatar, .dm-satir > .avatar { width: 54px; height: 54px; font-size: 18px; }
.dm-satir .durum-nokta { width: 14px; height: 14px; border-width: 3px; border-color: var(--bg); }
.dm-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-orta .ust { display: flex; align-items: baseline; gap: 8px; }
.dm-orta strong { font-size: 17px; }
.dm-orta .yil { color: var(--sonuk); font-size: 14px; }
.dm-orta .zaman { margin-left: auto; color: var(--sonuk); font-size: 13px; }
.dm-orta .son { color: var(--soluk); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.dm-orta .son span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dm-okunmadi { width: 11px; height: 11px; border-radius: 50%; background: var(--mavi); flex: none; }
.dm-satir.yeni strong, .dm-satir.yeni .son { color: var(--yazi); font-weight: 700; }
.ekran-bos { padding: 40px 24px; text-align: center; color: var(--soluk); line-height: 1.5; }

/* Akis */
.akis-filtre { display: flex; gap: 8px; padding: 4px 18px 12px; overflow-x: auto; }
.akis-cip { height: 38px; padding: 0 18px; border-radius: 19px; border: 1px solid var(--cizgi); background: none; color: var(--soluk); font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: pointer; font-family: inherit; }
.akis-cip.secili { background: #E9ECF3; color: #111; border-color: #E9ECF3; }
.akis-liste { display: flex; flex-direction: column; gap: 14px; padding: 0 14px 20px; }
.akis-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.akis-kart.duyuru { border-color: #3A4680; }
.akis-ust { display: flex; align-items: center; gap: 12px; }
.akis-ust .avatar { width: 46px; height: 46px; font-size: 16px; flex: none; }
.akis-ust div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.akis-ust strong { font-size: 16.5px; }
.akis-ust small { color: var(--sonuk); font-size: 13px; }
.akis-ust .akis-menu { flex: none; border: 0; background: none; color: var(--sonuk); font-size: 20px; width: 34px; height: 34px; cursor: pointer; }
.akis-metin { margin: 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.akis-resimler { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); }
.akis-resimler.tek { grid-template-columns: 1fr; }
.akis-resimler img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; cursor: zoom-in; display: block; background: var(--kutu); }
.akis-resimler.tek img { aspect-ratio: auto; max-height: 420px; }
.akis-eylem { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cizgi); padding-top: 8px; }
.akis-eylem button { height: 40px; border: 0; background: none; color: var(--soluk); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; border-radius: 10px; }
.akis-eylem button.begendim { color: #FF6B81; }
.akis-yorumlar { display: flex; flex-direction: column; gap: 8px; }
.akis-yorum { background: var(--kutu); border-radius: 12px; padding: 8px 12px; font-size: 14.5px; }
.akis-yorum strong { margin-right: 6px; }
.akis-yorum-yaz { display: flex; gap: 8px; }
.akis-yorum-yaz input { flex: 1; min-width: 0; height: 42px; border-radius: 21px; padding: 0 14px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); font-size: 15px; }
.akis-yorum-yaz button { height: 42px; padding: 0 16px; border-radius: 21px; border: 0; background: var(--mavi); color: var(--mavi-yazi); font-weight: 800; }
.paylas-onizleme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.paylas-onizleme img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.paylas-metin { min-height: 110px; resize: vertical; border-radius: 14px; padding: 12px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); font: inherit; font-size: 16px; }

/* Profil ekrani */
.profil-kapak { height: 150px; background: linear-gradient(135deg, #1E2747, #24305C); flex: none; }
.profil-govde { padding: 0 18px 24px; margin-top: -60px; display: flex; flex-direction: column; gap: 12px; }
.profil-govde .avatar.dev { width: 120px; height: 120px; font-size: 40px; border: 5px solid var(--bg); border-radius: 50%; }
.profil-govde h1 { margin: 4px 0 0; font-size: 30px; }
.profil-cipler { display: flex; gap: 8px; flex-wrap: wrap; }
.profil-cip { padding: 6px 14px; border-radius: 16px; background: var(--kart); color: #C7D0FF; font-weight: 700; font-size: 14px; }
.profil-bilgi { display: flex; flex-direction: column; gap: 6px; color: #D6DAE4; font-size: 16px; }
.profil-dugme-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.profil-dugme-satir button { height: 50px; border-radius: 14px; font-weight: 800; font-size: 16px; font-family: inherit; cursor: pointer; }
.profil-dugme-satir .birincil { border: 0; background: var(--mavi); color: var(--mavi-yazi); }
.profil-dugme-satir .ikincil { border: 1px solid var(--cizgi); background: none; color: var(--yazi); }
.profil-bolum-baslik { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.profil-bolum-baslik h2 { margin: 0; font-size: 22px; }
.profil-govde .profil-fotolar { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.profil-govde .profil-foto-ekle { font-size: 14px; color: var(--sonuk); }

/* Masaustunde Akis paneli */
#panel .akis-liste { padding: 0; }

.indir-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* Telefonda pencereler alt menuyu kapatmasin; alt menu hep gorunsun, ‹ geri hep olsun */
body.mobil #panel { bottom: calc(66px + env(safe-area-inset-bottom)); padding: calc(8px + env(safe-area-inset-top)) 0 0 !important; background: var(--bg); align-items: stretch; }
body.mobil #panel .panel-kutu { max-width: none; width: 100%; height: 100%; max-height: none !important; border-radius: 0; border: 0; box-shadow: none; }
body.mobil #panel .panel-ust { top: -16px; padding: 10px 12px 10px; margin: -16px -16px 0; border-bottom: 1px solid var(--cizgi); background: var(--panel); }
body.mobil #panel .panel-ust h3 { font-size: 21px; }
body.mobil #panel .panel-ust .kapat { display: none; }
body.mobil #altBar { z-index: 60; }
body.mobil #app[data-ekran="sohbet"] ~ #panel, body.mobil.sohbette #panel { bottom: 0; }

/* Uyeler listesi: YONETICI rozeti isimden ayri, alt satirda */
#panelIcerik .bekleyen strong .yon { display: table; margin: 5px 0 3px; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; letter-spacing: .6px; background: rgba(124,149,255,.16); color: #AAB6F5; }
#panelIcerik .bekleyen strong .yon.donem-yon { background: rgba(242,194,48,.16); color: var(--sari); }
.yon { margin-left: 6px; }

/* Durum: profil sayfasi ve alt sayfa */
.dev-avatar-kap { position: relative; align-self: flex-start; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.dev-avatar-kap .dev-nokta { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border: 5px solid var(--bg); }
.durum-hap { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--yazi); font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit; }
.durum-hap .durum-nokta, .alt-secenek .durum-nokta { position: static; width: 12px; height: 12px; border: 0; flex: none; }
.alt-perde { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); }
.alt-sayfa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--panel); border-radius: 22px 22px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; animation: altGel .18s ease-out; box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
@keyframes altGel { from { transform: translateY(100%); } to { transform: none; } }
.alt-tutamak { width: 40px; height: 5px; border-radius: 3px; background: #3A4050; margin: 4px auto 10px; }
.alt-baslik { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; color: var(--sonuk); margin: 0 8px 6px; text-transform: uppercase; }
.alt-secenek { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border: 0; border-radius: 14px; background: none; color: var(--yazi); text-align: left; font-size: 16px; font-family: inherit; cursor: pointer; }
.alt-secenek:active, .alt-secenek.secili { background: var(--kart); }
.alt-secenek > div { flex: 1; display: flex; flex-direction: column; }
.alt-secenek strong { font-size: 16.5px; }
.alt-secenek small { color: var(--sonuk); font-size: 13px; }
.alt-tik { color: var(--mavi); font-weight: 800; font-size: 18px; }
.alt-ikon { width: 12px; text-align: center; }
.alt-ayrac { height: 1px; background: var(--cizgi); margin: 6px 8px; }
.sekme-avatar { position: relative; display: inline-flex; }
.sekme-avatar .avatar { width: 27px; height: 27px; font-size: 10px; }
.alt-sek.aktif .sekme-avatar .avatar { box-shadow: 0 0 0 2px var(--mavi); }
.sekme-avatar .durum-nokta { width: 10px; height: 10px; border: 2px solid #0A0C11; right: -2px; bottom: -2px; }

.dil-secim{display:flex;gap:8px;margin:4px 0 8px}.dil-secim button{flex:1}

/* Koyu temaya uygun ince kaydirma cubuklari */
* { scrollbar-width: thin; scrollbar-color: #2E3546 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2E3546; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #46506A; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== Sari tema kaldirildi: koyu lacivert / siyah / gri. Vurgu rengi mavi ===== */
:root { --sari: #7C95FF; --sariyazi: #0E1430; --benbalon: #2B3A7A; --benbalon-cizgi: #36478C; }
.msg.ben .balon { background: var(--benbalon); border-color: var(--benbalon-cizgi); }
.msg.ben p, .msg.ben .balon { color: #EEF0F5; }
.msg.ben .saat { color: #93A0C8; }
.msg.ben p.silindi { color: #93A0C8; }
.msg.ben a { color: #AFC0FF; }
.msg.ben .bahsetme { background: rgba(124,149,255,.22); color: #D3DBFF; }
.msg.ben .etiket-rozet { background: rgba(255,255,255,.08); color: #DDE3F5; border-color: rgba(255,255,255,.16); }
.msg.ben .duzenle-kutu textarea { background: #141B33; color: #EEF0F5; border-color: #3A4A80; }
.msg.ben .ai-rozet { background: rgba(124,149,255,.16); color: #AFC0FF; border-color: rgba(124,149,255,.35); }
.msg.bana .balon { box-shadow: inset 3px 0 0 #7C95FF; background: #1A2140; border-color: #2B3A6E; }
.bahsetme.ben { background: rgba(124,149,255,.22); color: #AFC0FF; }
.tepki.benim { border-color: #7C95FF; background: #1A2140; color: #AFC0FF; }
.tur-btn.secili, .bildirim-btn { border-color: #7C95FF; background: #1A2140; color: #AFC0FF; }
.secili-mesaj .balon { outline-color: #7C95FF; }
.durum-nokta.uzakta { background: #F2C230; }
/* Sadece fotograf / video: cerceve ve renkli zemin yok */
.msg .balon.sadece-medya, .msg.ben .balon.sadece-medya { background: transparent; border-color: transparent; padding: 0; box-shadow: none; }
.balon.sadece-medya img, .balon.sadece-medya video { border-radius: 14px; display: block; }
.balon.sadece-medya .saat { padding: 3px 4px 0; }

/* Yonetici yildiz rozeti eski sari haliyle */
.yil { background: #F2C230; color: #14200F; }

/* Buyuk ekranlar (2K/4K, %100-125 olcek): yazilar kucuk kalmasin. Panel yuksekligi zoom'a gore duzeltilir */
@media (min-width: 2200px) { html { zoom: 1.3; } #panel .panel-kutu { max-height: calc(100dvh / 1.3 - 12vh - 16px); } }
@media (min-width: 2000px) and (max-width: 2199px) { html { zoom: 1.12; } #panel .panel-kutu { max-height: calc(100dvh / 1.12 - 12vh - 16px); } }

/* Sol dikey serit kaldirildi; logo yan panel basliginin ustunde */
.ray { display: none !important; }
.yan-baslik { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 6px; }
.yan-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.yan-baslik-yazi { display: flex; flex-direction: column; align-items: center; }
body.mobil .yan-logo { display: none; }
/* Kurucu taci: profil fotografinin ustunde */
.ben-avatar-kutu { position: relative; display: inline-flex; flex: none; }
.tac { position: absolute; left: 50%; top: -12px; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); pointer-events: none; z-index: 2; line-height: 0; }
.tac.gizli { display: none; }

/* giris: logo koyu zeminde kart */
#giris .sol { background: transparent !important; }
#giris .buyuk-logo { mix-blend-mode: normal; background: #FBFBFB; border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#giris .sol p { color: #9AA3B5; }

/* ince anahtar */
.anahtar { width: 40px !important; height: 22px !important; min-height: 0 !important; max-height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 11px !important; box-sizing: border-box !important; align-self: center; flex: 0 0 40px !important; }
.anahtar::after { top: 3px !important; left: 3px !important; width: 16px !important; height: 16px !important; }
.anahtar:checked::after { transform: translateX(18px) !important; }

/* uye listesinde kurucu taci */
.tac.tac-kucuk { top: -10px; }
.tac.tac-kucuk svg { width: 18px; height: 12px; }

/* yonetici isareti (mavi kalkan) */
.tac.yon-isaret { transform: translateX(-50%); top: -11px; }
.tac.yon-isaret.tac-kucuk { top: -9px; }
.tac.yon-isaret.tac-kucuk svg { width: 12px; height: 14px; }

/* FHD / 2K / 4K: sol panel kaydirmasiz sigsin (1366x768 laptoplar haric) */
@media (min-height: 800px) {
  body:not(.mobil) .yan { padding: 12px 10px; gap: 8px; }
  body:not(.mobil) .yan-logo { width: 58px; height: 58px; border-radius: 16px; }
  body:not(.mobil) .yan-baslik { gap: 4px; padding-top: 0; }
  body:not(.mobil) .oda { height: 31px; }
  body:not(.mobil) .grup h3 { margin: 7px 8px 3px; }
  body:not(.mobil) .yan-btn { height: 32px; }
  body:not(.mobil) .yan-alt { gap: 5px; }
}

@media (min-height: 800px) {
  body:not(.mobil) .yan-logo { width: 84px; height: 84px; border-radius: 22px; }
  body:not(.mobil) .yan-baslik { gap: 8px; padding-top: 6px; }
}
/* ekran yuksekse (2K/4K) kanallar biraz daha ferah */
@media (min-height: 1000px) { body:not(.mobil) .oda { height: 34px; } body:not(.mobil) .grup h3 { margin: 9px 8px 4px; } }

/* sag liste: daha buyuk avatar ve isim */
.uyeler { flex-basis: 260px; }
.uye { gap: 12px; }
.uye .avatar { width: 44px !important; height: 44px !important; min-width: 44px; font-size: 16px !important; }
.uye strong { font-size: 15.5px; }
.uye small { font-size: 12.5px; }
.uye.cevrimdisi { opacity: .72; }
.uye .tac.tac-kucuk { top: -11px; }

.uye .avatar { width: 42px !important; height: 42px !important; min-width: 42px; }
/* sol alt profil avatari biraz buyuk */
#benAvatar { width: 40px !important; height: 40px !important; min-width: 40px; font-size: 15px !important; }

/* sag liste arama */
.uye-ara { width: 100%; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--bg); color: var(--yazi); font-size: 14px; flex: none; box-sizing: border-box; }
.uye-ara:focus { outline: none; border-color: var(--mavi); }

.uye small { font-size: 13.5px; }

/* sag listedeki tac sol alttakiyle ayni */
.uye .tac.tac-kucuk:not(.yon-isaret) { top: -12px; }
.uye .tac.tac-kucuk:not(.yon-isaret) svg { width: 22px; height: 15px; }

/* sohbet avatarlarinda rol isareti */
.msg.ben .mesaj-avatar-kutu { display: none; }
.msg.devam .mesaj-avatar-kutu { visibility: hidden; }
.mesaj-avatar-kutu .tac { top: -11px; }

/* yonetici kalkani: avatarin sag ust kosesinde, yarisi icinde */
.tac.yon-isaret { left: auto !important; right: -6px !important; top: -6px !important; transform: none !important; }
.tac.yon-isaret svg { width: 15px !important; height: 17px !important; }

.tac.yon-isaret { top: 0 !important; right: -7px !important; }

/* durum noktasi: ornekteki boyut (ic 10.5px + 2px kenar) */
.uye .durum-nokta, .profil .durum-nokta, #benAvatar .durum-nokta { box-sizing: content-box !important; width: 10.5px !important; height: 10.5px !important; border-width: 2px !important; right: -1px !important; bottom: -1px !important; }

/* acilir-kapanir grup basliklari (Ozel mesajlar, Sesli) */
.acilir-baslik { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; }
.acilir-baslik:hover { color: var(--yazi); }
.ok-acilir { display: inline-block; font-size: 10px; transition: transform .15s; }
.grup.kapali .ok-acilir { transform: rotate(-90deg); }
.grup.kapali > .oda:not(.aktif):not(.yeni), .grup.kapali > .oda-satir:not(:has(.oda.aktif)):not(:has(.oda.yeni)), .grup.kapali > .ses-alt-liste { display: none; }

.ok-acilir { font-size: 15px; width: 14px; line-height: 1; text-align: center; margin-right: 2px; }

.ok-acilir { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: #C9CEDA; font-size: 0; }
.ok-acilir svg { width: 12px; height: 12px; }
.acilir-baslik:hover .ok-acilir { color: #fff; }

.acilir-baslik { margin-left: 2px !important; gap: 2px; }

/* sol panel: hafif KAL renkleri (A) */
body:not(.mobil) .yan { background: linear-gradient(180deg, #123528 0, #141A1C 210px, #141821 100%) !important; }
.grup h3, .acilir-baslik { color: #C9A43A !important; }
.ok-acilir, .acilir-baslik:hover .ok-acilir { color: #E2BE4E !important; }
.oda.aktif { background: rgba(31,107,74,.35) !important; box-shadow: inset 3px 0 0 #F2C230; color: #fff !important; }
.oda:hover { background: rgba(31,107,74,.18) !important; }
.yan-baslik-yazi span { font-family: 'Fraunces', Georgia, serif !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11.5px !important; color: #3FA06E !important; }

/* telefon: baslik biraz kucuk, alt sekmeler ve profil fotosu biraz buyuk */
body.mobil .yan-baslik h1 { font-size: 25px; }
body.mobil .alt-sek { font-size: 13.5px; gap: 5px; }
body.mobil .alt-sek svg { width: 29px; height: 29px; }
body.mobil .sekme-avatar .avatar { width: 33px !important; height: 33px !important; font-size: 12px !important; }
body.mobil .sekme-avatar .durum-nokta { width: 11px !important; height: 11px !important; }

body.mobil .alt-sek { font-size: 14.5px; }
body.mobil .yan-btn { font-size: 16px; }

/* profil: ince kapak, avatar yukarida */
.profil-kapak { height: 64px !important; }
.profil-govde { margin-top: -40px !important; }

/* profil kapagi: KAL yesili + buyuk logo sagda */
.profil-kapak { position: relative; height: 104px !important; background: linear-gradient(135deg, #16402F, #0F1F19 70%) !important; }
.profil-kapak::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 84px; height: 84px; border-radius: 18px; background: #FBFBFB url(giris-logo.png) center / cover no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.profil-govde { margin-top: -48px !important; }

.profil-kapak::after { background-image: url(kapak-logo.jpg) !important; }

/* profil kapagi: yesil gecis + seffaf marti filigrani + okul adi + altin cizgi */
.profil-kapak { position: relative; height: 110px !important; overflow: hidden; background: url(kapak-marti.png) right -52px top -34px / 210px auto no-repeat, linear-gradient(135deg, #16402F, #0F1F19 75%) !important; box-shadow: none !important; }
.profil-kapak::before { content: 'KADIKÖY ANADOLU LİSESİ · 1955'; position: absolute; left: 18px; top: 18px; font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 12.5px; letter-spacing: 1.5px; color: rgba(242,194,48,.8); }
html[lang="en"] .profil-kapak::before { content: 'KADIKÖY ANATOLIAN HIGH SCHOOL · 1955'; }
.profil-kapak::after { content: '' !important; display: block !important; position: absolute; left: 0; right: 0; top: auto !important; bottom: 0; transform: none !important; width: auto !important; height: 3px !important; border-radius: 0 !important; background: #D9AE2E !important; box-shadow: none !important; z-index: 2; }
.profil-govde { margin-top: -48px !important; position: relative; z-index: 3; }

.profil-kapak { background: url(kapak-marti.png?v=2) right 4px top -12px / 158px auto no-repeat, linear-gradient(135deg, #16402F, #0F1F19 75%) !important; }
.profil-kapak::before { font-size: 11px !important; letter-spacing: 1.3px !important; }

/* kapak yazisi iki satir: 1955 altta, saga hizali */
.profil-kapak::before { content: 'KADIKÖY ANADOLU LİSESİ\A 1955' !important; white-space: pre; text-align: right; line-height: 1.5; font-size: 12.5px !important; letter-spacing: 1.5px !important; top: 16px !important; }
html[lang="en"] .profil-kapak::before { content: 'KADIKÖY ANATOLIAN HIGH SCHOOL\A 1955' !important; }

.profil-kapak { background-position: right 4px top 3px, 0 0 !important; }

html[lang="en"] .profil-kapak::before { content: 'KADIKÖY ANATOLIAN\A HIGH SCHOOL\A 1955' !important; line-height: 1.45; }

/* okunmamis mesajlar cizgisi + asagi in dugmesi */
.yeni-cizgi { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: #F2C230; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.yeni-cizgi::before, .yeni-cizgi::after { content: ''; flex: 1; height: 1px; background: rgba(242,194,48,.55); }
.yeni-dugme-kap { position: relative; height: 0; z-index: 5; }
.yeni-dugme { position: absolute; right: 16px; bottom: 10px; padding: 8px 14px; border: 0; border-radius: 18px; background: var(--mavi); color: var(--mavi-yazi, #111); font-weight: 800; font-size: 13.5px; font-family: inherit; box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; }
.yeni-dugme.gizli { display: none; }

/* profil ekraninda tac / kalkan */
.dev-avatar-kap { position: relative; }
.tac.dev-tac { left: 50% !important; top: -30px !important; transform: translateX(-50%) rotate(-8deg) !important; z-index: 4; }
.tac.dev-tac svg { width: 54px !important; height: 37px !important; }
.tac.yon-isaret.dev-kalkan { right: 2px !important; top: 6px !important; z-index: 4; }
.tac.yon-isaret.dev-kalkan svg { width: 30px !important; height: 34px !important; }

/* sohbetten Akis'a paylas */
.akisa-kutu { display: flex; flex-direction: column; gap: 12px; }
.akisa-not { width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--bg); color: var(--yazi); font: inherit; font-size: 15px; resize: vertical; }
.akisa-onizleme { border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 8px; }
.akisa-onizleme img, .akisa-onizleme video { width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; background: #000; }
.akisa-metin { margin: 0; white-space: pre-wrap; word-break: break-word; }
.akisa-ust { font-size: 14px; }
.akisa-paylas { height: 48px; border: 0; border-radius: 14px; background: var(--mavi); color: var(--mavi-yazi, #111); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.akisa-paylas:disabled { opacity: .6; }
.akis-kaynak { font-size: 12.5px; color: var(--soluk, #9AA3B5); margin: -2px 0 4px; }
.akis-video { width: 100%; max-height: 420px; border-radius: 12px; background: #000; margin-top: 6px; }
.kisa-bilgi { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; padding: 10px 18px; border-radius: 20px; background: #1F7A4D; color: #fff; font-weight: 800; z-index: 300; transition: .25s; box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: none; }
.kisa-bilgi.gor { opacity: 1; transform: translate(-50%, 0); }

/* dil secimi dugmeleri: sabit boy, secili olan mavi cerceve */
.dil-btn { flex: 1; height: 50px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--kart, #1A1F2B); color: var(--yazi); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; transition: none; }
.dil-btn.secili { border-color: var(--mavi); background: rgba(124,149,255,.16); box-shadow: inset 0 0 0 1px var(--mavi); }
.bildirim-alt { display: flex; flex-direction: column; gap: 12px; }
.bildirim-alt.gizli { display: none; }

.kutu label { font-size: 15px; }

/* okunmamis sayisi: koyu KAL yesili (WhatsApp gibi) */
.oda .sayi:not(.bahsetme-sayi):not(.ses-sayi), body.mobil .oda .sayi:not(.bahsetme-sayi):not(.ses-sayi) { background: #14633E !important; color: #fff !important; }

/* buyutulmus resimde belirgin Indir dugmesi */
.resim-indir { width: auto !important; padding: 0 18px !important; border-radius: 23px !important; font-size: 16px !important; font-weight: 800; text-decoration: none; gap: 6px; background: rgba(255,255,255,.22) !important; }
.resim-indir:hover { background: rgba(255,255,255,.32) !important; }

/* telefonda "ana ekrana ekle" seridi: ustte sabit */
.telefon-serit { position: relative; margin: 0 0 6px !important; border-radius: 14px; flex: none; }
.telefon-serit .serit-sonra { min-width: 36px; }

/* telefon: ekranlar kendi icinde kaysin, iOS esneme (yukari itme) sayfayi kaydirip yarim birakmasin */
html, body.mobil { overscroll-behavior: none; }
body.mobil .mobil-ekran, body.mobil .yan { overscroll-behavior-y: contain; }
body.mobil .mobil-ekran > * { flex-shrink: 0; }

.bekleyen-uyari { display: block; margin-top: 4px; color: #F2C230 !important; font-size: 12.5px; }

/* ===== Telefon: ilk tasarima yakin duzen ===== */
/* oda listesi basligi: solda kucuk logo, yaninda dönem adi, sagda arama */
body.mobil .yan-baslik { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 12px !important; padding: 4px 2px 2px !important; }
body.mobil .yan-logo { display: block !important; width: 46px !important; height: 46px !important; border-radius: 12px !important; box-shadow: none !important; flex: none; }
body.mobil .yan-baslik-yazi { align-items: flex-start !important; flex: 1; min-width: 0; }
body.mobil .yan-baslik h1 { font-size: 22px !important; line-height: 1.15; }
body.mobil .yan-baslik-yazi span { font-size: 10.5px !important; letter-spacing: 1px !important; }
body.mobil #donemAraBtn { display: none !important; }
.mobil-ara-btn { display: none; }
body.mobil .mobil-ara-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--kutu, #1A1F2B); color: var(--yazi); flex: none; }
body.mobil .mobil-ara-btn svg { width: 22px; height: 22px; }
/* yazi odalarinin onunde # */
body.mobil .grup:not(.grup-ses):not(.grup-dm) .oda > span:first-child::before { content: '#'; color: #6E7891; font-weight: 500; margin-right: 12px; }
body.mobil .oda { font-size: 17px; }
/* sohbet: baskalarinin mesaji balonsuz (ilk tasarim), saat ad satirinin sagında; dikeyde sikisik */
body.mobil #msgs { gap: 8px !important; }
body.mobil .msg:not(.ben) { align-items: flex-start !important; }
body.mobil .msg:not(.ben) .balon { position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 4px 0 2px !important; line-height: 1.32; max-width: 100% !important; }
body.mobil .msg:not(.ben) .balon .saat { position: absolute; top: 1px; right: 4px; margin: 0 !important; }
body.mobil .msg:not(.ben).devam .balon .saat { top: 0; }
body.mobil .msg.devam { margin-top: -4px; }
body.mobil .msg.ben .balon { padding-top: 7px !important; padding-bottom: 6px !important; line-height: 1.32; }
body.mobil .msg:not(.ben) > div:not(.avatar):not(.durumlu):not(.mesaj-avatar-kutu), body.mobil .msg:not(.ben) .balon { flex: 1 1 auto; min-width: 0; }
body.mobil .msg:not(.ben) .balon .saat { right: 8px; }

.hesap-sil-btn { height: 46px; border-radius: 12px; border: 1px solid rgba(237,66,69,.45); background: rgba(237,66,69,.08); color: #F07174; font: inherit; font-weight: 700; cursor: pointer; }