:root { --bg:#0D110F; --panel:#111713; --ray:#090C0A; --kart:#18201B; --kutu:#131915; --cizgi:#26302A; --yazi:#EDF1EC; --soluk:#A6B1A8; --sonuk:#85918A; --sari:#F2C230; --sariyazi:#14200F; --yesil:#5FD08E; --aktif:#1B3A27; --krem:#F6F4EA; --koyuyesil:#14632E; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--yazi); font-family: 'Source Sans 3', system-ui, 'Segoe UI', sans-serif; font-size: 16px; }
h1, h2, .orta .baslik, .yil, .rozet { font-family: 'Fraunces', Georgia, serif; letter-spacing: 0; }
.gizli { display: none !important; }
.soluk { color: var(--soluk); margin: 0; }
.kucuk { font-size: 13px; }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; height: 50px; border-radius: 12px; border: 1px solid #2B362F; background: var(--kutu); color: var(--yazi); padding: 0 16px; font-size: 15px; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--sari); outline-offset: 1px; }
.sari { height: 50px; border-radius: 14px; border: 0; background: var(--sari); color: var(--sariyazi); font-weight: 800; font-size: 16px; padding: 0 22px; }
.sari:hover { filter: brightness(1.06); }
.yesil { height: 46px; border-radius: 12px; border: 1px solid #1F8A4C; background: #10301E; color: var(--yazi); font-weight: 700; }
.yesil:disabled { opacity: .55; cursor: default; }
.link { background: none; border: 0; color: var(--yesil); font-weight: 700; font-size: 14px; padding: 6px; align-self: center; }
.link:hover { text-decoration: underline; }

/* --- Giris --- */
#giris { min-height: 100%; display: flex; flex-wrap: wrap; }
#giris .sol { flex: 1 1 460px; background: var(--krem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 24px; text-align: center; }
.buyuk-logo { width: min(420px, 80%); border-radius: 28px; mix-blend-mode: multiply; }
#giris .sol h1 { margin: 8px 0 0; font-size: 28px; font-weight: 800; color: var(--koyuyesil); letter-spacing: 3px; }
#giris .sol p { margin: 0; font-size: 15px; font-weight: 600; color: #4A5A4E; letter-spacing: 2px; }
#giris .sag { flex: 999 1 520px; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.kutu { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.kutu h2 { margin: 0 0 4px; font-size: 32px; font-weight: 800; }
.kutu label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #C6CFC8; }
.ikili { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.ayrac { display: flex; align-items: center; gap: 12px; color: #6F7C73; font-size: 13px; }
.ayrac span { flex: 1; height: 1px; background: var(--cizgi); }
.davet { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--kutu); border: 1px solid var(--cizgi); }
.davet p { font-size: 14px; line-height: 1.5; }
.rozet { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sari); color: var(--sariyazi); font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; }
.hata { color: #F08A80; margin: 0; min-height: 1em; font-size: 14px; }

/* --- Uygulama --- */
#app { height: 100%; display: flex; }
.ray { flex: 0 0 76px; background: var(--ray); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; }
.ray-logo { width: 52px; height: 52px; border-radius: 16px; }
.cizgi { width: 32px; height: 2px; border-radius: 2px; background: var(--cizgi); }
.yil { width: 52px; height: 52px; border-radius: 16px; background: var(--sari); color: var(--sariyazi); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.yil:empty { display: none; }
.yan { flex: 0 0 248px; background: var(--panel); display: flex; flex-direction: column; gap: 14px; padding: 18px 12px; overflow: auto; }
.yan-baslik { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.yan-baslik h1 { margin: 0; font-size: 18px; font-weight: 800; }
.yan-baslik span { font-size: 13px; color: var(--soluk); }
.grup h3, .uyeler h3 { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--sonuk); margin: 10px 8px 6px; }
.oda { width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #C6CFC8; font-weight: 600; font-size: 15px; text-align: left; }
.oda:hover { background: #151D18; }
.oda .h { color: var(--sonuk); }
.oda.aktif { background: var(--aktif); color: var(--yazi); font-weight: 700; }
.oda.aktif .h { color: var(--sari); }
.oda.yeni { color: var(--yazi); font-weight: 700; }
.oda .sayi { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; background: var(--sari); color: var(--sariyazi); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.not { font-size: 12px; color: var(--sonuk); padding: 2px 10px 0; }
.profil { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg); }
.profil small { display: block; font-size: 12px; color: var(--yesil); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; }
.orta { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; }
.orta header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #1F2823; flex-wrap: wrap; }
.orta .baslik { font-size: 18px; font-weight: 800; } .orta .baslik b { color: var(--sari); }
.orta header .soluk { font-size: 13px; }
#msgs { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
#msgs { gap: 10px; }
.msg { display: flex; gap: 10px; align-items: flex-end; }
.msg .avatar { width: 36px; height: 36px; font-size: 13px; }
.msg .balon { max-width: min(560px, 75%); background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px 18px 18px 6px; padding: 9px 14px 10px; }
.msg.ben { flex-direction: row-reverse; }
.msg.ben .avatar { display: none; }
.msg.ben .balon { background: var(--sari); border-color: var(--sari); border-radius: 18px 18px 6px 18px; }
.msg.ben .ust { display: none; }
.msg.ben p { color: var(--sariyazi); }
.msg.ben .saat { color: #4F5A3A; }
.msg .saat { display: block; text-align: right; font-size: 11px; color: var(--sonuk); margin-top: 2px; }
.msg.devam .ust { display: none; }
.msg.devam .avatar { visibility: hidden; }
.msg.devam { margin-top: -6px; }
.msg.ben p:first-child, .msg.devam p:first-child { margin-top: 0; }
.msg .ust { font-size: 14px; font-weight: 700; color: var(--yesil); }
.msg .ust small { font-weight: 500; color: var(--sonuk); font-size: 12px; margin-left: 6px; }
.msg .ust .yon { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sari); color: var(--sariyazi); font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.msg p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #DCE3DD; white-space: pre-wrap; word-break: break-word; }
.msg img { display: block; max-width: min(340px, 100%); border-radius: 12px; margin-top: 6px; border: 1px solid var(--cizgi); }
.bos { margin: auto; text-align: center; color: var(--sonuk); }
#bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 20px; }
#bar input[type=text] { flex: 1; min-width: 0; height: 46px; border-radius: 14px; }
#bar .sari { height: 46px; font-size: 15px; }
.yuvarlak { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--kart); color: #C6CFC8; font-size: 22px; }
.uyeler { flex: 0 0 240px; background: var(--panel); padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.uye { display: flex; align-items: center; gap: 10px; }
.uye .avatar { position: relative; }
.uye .avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--yesil); border: 3px solid var(--panel); }
.uye strong { display: block; font-size: 14px; } .uye small { font-size: 12px; color: var(--soluk); }
@media (max-width: 900px) { .uyeler { display: none; } }
@media (max-width: 640px) { .yan { flex-basis: 180px; } .ray { display: none; } }

/* --- Donem arama (Ctrl+K) --- */
.ara-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; margin: 4px 0 2px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--soluk); font-size: 14px; text-align: left; }
.ara-btn:hover { border-color: var(--sari); color: var(--yazi); }
kbd { font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--sonuk); }
.oda-satir { display: flex; align-items: center; gap: 2px; } .oda-satir .oda { flex: 1; min-width: 0; }
.kapat { flex-shrink: 0; width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; visibility: hidden; display: flex; align-items: center; justify-content: center; color: var(--sonuk); font-size: 16px; }
.oda-satir:hover .kapat, .kapat:focus { visibility: visible; }
.kapat:hover { background: #26302A; color: var(--yazi); }
.oda .misafir { font-size: 11px; color: var(--sonuk); margin-left: 4px; }
#arama { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; z-index: 50; }
.arama-kutu { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--cizgi); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.arama-kutu input { height: 54px; font-size: 18px; border-radius: 14px; }
#aramaSonuc { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.sonuc-baslik { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--sonuk); margin: 8px 6px 2px; }
.sonuc { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--yazi); font-size: 16px; font-weight: 600; text-align: left; width: 100%; }
.sonuc:hover, .sonuc.secili { background: var(--aktif); }
.sonuc .yan-bilgi { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--soluk); }
.sonuc .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); }
.onyillar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.onyil { height: 40px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); font-weight: 700; }
.onyil.secili, .onyil:hover { border-color: var(--sari); }
.yillar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.yil-btn { height: 46px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--yazi); font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.yil-btn small { font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 10px; color: var(--yesil); }
.yil-btn:hover { border-color: var(--sari); }
.yil-btn.ben { background: var(--aktif); }
.arama-alt { margin: 0; font-size: 12px; color: var(--sonuk); }

/* --- e-posta kodu, davet, onay --- */
.not-kutu { margin: 0; padding: 10px 14px; border-radius: 12px; background: #2A2410; border: 1px solid #5C4B12; color: #F2D77A; font-size: 14px; }
.kutu input[readonly], .kutu select:disabled { opacity: .7; }
#kod, #kKod { letter-spacing: 8px; font-size: 22px; font-weight: 700; }
.yan-alt { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.yan-alt + .profil { margin-top: 8px; }
.yan-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px dashed #2F5A3E; background: transparent; color: var(--yesil); font-weight: 700; font-size: 14px; }
.yan-btn:hover { background: var(--aktif); }
.yan-btn .sayi { min-width: 22px; height: 22px; border-radius: 11px; background: var(--sari); color: var(--sariyazi); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cikis { margin-left: auto; background: none; border: 0; color: var(--sonuk); font-size: 12px; font-weight: 600; }
.cikis:hover { color: var(--yazi); }
#panel { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; z-index: 50; }
#panel.gizli { display: none; }
.panel-kutu { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.panel-ust { display: flex; align-items: center; justify-content: space-between; }
.panel-ust h3 { margin: 0; font-size: 20px; }
#panelIcerik { display: flex; flex-direction: column; gap: 12px; }
.davet-link { height: 46px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--bg); color: var(--yazi); padding: 0 12px; font: inherit; font-size: 14px; }
.bekleyen { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg); }
.bekleyen > div:nth-child(2) { flex: 1; min-width: 0; }
.bekleyen strong { display: block; }
.bekleyen small { color: var(--soluk); font-size: 12px; overflow-wrap: anywhere; }
.kucuk-btn { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }

/* --- 3D emoji ve tepkiler --- */
.msg-govde { position: relative; display: flex; flex-direction: column; max-width: min(560px, 75%); min-width: 0; }
.msg.ben .msg-govde { align-items: flex-end; }
.msg .msg-govde .balon { max-width: 100%; }
.msg img.emoji { display: inline-block; width: 1.4em; height: 1.4em; margin: 0 1px; vertical-align: -0.35em; border: 0; border-radius: 0; max-width: none; object-fit: contain; }
.msg p.buyuk-emoji img.emoji { width: 48px; height: 48px; margin: 2px 2px 0 0; vertical-align: middle; }
.tepki-cubuk { position: absolute; top: -18px; right: 8px; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--kutu); border: 1px solid var(--cizgi); box-shadow: 0 4px 14px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .12s, transform .12s; z-index: 2; }
.msg.ben .tepki-cubuk { right: auto; left: 8px; }
.msg-govde:hover .tepki-cubuk, .msg-govde:focus-within .tepki-cubuk { opacity: 1; pointer-events: auto; transform: none; }
.tepki-sec { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.tepki-sec:hover { background: var(--aktif); transform: scale(1.15); }
.tepki-sec img.emoji { width: 26px; height: 26px; margin: 0; vertical-align: middle; }
.tepkiler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tepkiler:empty { display: none; }
.tepki { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--soluk); font-size: 13px; font-weight: 700; }
.tepki img.emoji { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
.tepki.benim { border-color: var(--sari); background: #2A2410; color: var(--sari); }
.tepki:hover { border-color: var(--soluk); }
@media (hover: none) { .tepki-cubuk { position: static; opacity: 1; pointer-events: auto; transform: none; margin-top: 4px; box-shadow: none; align-self: flex-start; display: none; } .msg-govde:focus-within .tepki-cubuk { display: flex; } }

/* giris logosu (logo son.png) beyaz zeminli: panel de ayni beyaz */
#giris .sol { background: #FBFBFB; }

/* --- @bahsetme --- */
.orta { position: relative; }
.bahsetme { padding: 0 4px; border-radius: 6px; background: rgba(95,208,142,.18); color: var(--yesil); font-weight: 700; }
.bahsetme.ben { background: rgba(242,194,48,.25); color: var(--sari); }
.msg.ben .bahsetme { background: rgba(20,32,15,.15); color: var(--sariyazi); }
.msg.bana .balon { box-shadow: inset 3px 0 0 var(--sari); background: #2A2410; border-color: #5C4B12; }
.sayi.bahsetme-sayi { background: var(--sari); color: var(--sariyazi); font-weight: 800; }
.oneri { position: absolute; left: 16px; right: 16px; bottom: 78px; max-width: 420px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--kutu); border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 20; }
.oneri.gizli { display: none; }
.oneri-kisi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--yazi); font-size: 15px; font-weight: 600; text-align: left; }
.oneri-kisi .avatar { width: 30px; height: 30px; font-size: 12px; }
.oneri-kisi small { margin-left: auto; color: var(--sonuk); font-weight: 500; }
.oneri-kisi.secili, .oneri-kisi:hover { background: var(--aktif); }
.kartlar { position: fixed; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(340px, calc(100vw - 32px)); }
.bahsetme-kart { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid #5C4B12; background: #2A2410; color: var(--yazi); text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: kartGel .2s ease-out; }
.bahsetme-kart strong { color: var(--sari); font-size: 14px; }
.bahsetme-kart small { color: var(--soluk); font-size: 12px; }
.bahsetme-kart span { font-size: 14px; color: #E6E2CC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes kartGel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- durum (cevrimici / uzakta / rahatsiz etmeyin) --- */
.profil { position: relative; }
.profil-btn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; border-radius: 10px; }
.profil-btn:hover strong { text-decoration: underline; }
#benAvatar, .durumlu { position: relative; flex: none; }
.durumlu { display: inline-flex; }
.durum-nokta { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--panel); background: #3BA55C; }
.durum-nokta.uzakta { background: #F2C230; }
.durum-nokta.rahatsiz { background: #ED4245; }
.durum-nokta.rahatsiz::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; margin-top: -1px; background: var(--panel); border-radius: 1px; }
#benDurum { color: var(--soluk) !important; }
.durum-menu { position: absolute; left: 0; bottom: calc(100% + 8px); width: 240px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--kutu); border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 30; }
.durum-menu.gizli { display: none; }
.durum-sec { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--yazi); font-weight: 600; font-size: 14px; text-align: left; }
.durum-sec .durum-nokta { position: relative; right: auto; bottom: auto; border-color: var(--kutu); flex: none; }
.durum-sec small { margin-left: auto; color: var(--sonuk); font-weight: 500; font-size: 12px; }
.durum-sec:hover, .durum-sec.secili { background: var(--aktif); }

/* --- telefon gorunumu: odalar soldan acilan cekmece --- */
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); font-size: 20px; line-height: 1; }
@media (max-width: 700px) {
  html, body { height: 100%; }
  #app { height: 100dvh; }
  .ray { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .yan { position: fixed; inset: 0 auto 0 0; width: min(320px, 84vw); flex: none; z-index: 45; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(0,0,0,.5); }
  .yan.acik { transform: none; }
  #app.menu-acik::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 44; }
  .orta header { padding: 10px 12px; gap: 10px; }
  .orta header .soluk { flex-basis: 100%; padding-left: 50px; margin-top: -8px; }
  #msgs { padding: 12px 10px; }
  .msg-govde { max-width: 85%; }
  #bar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  #bar .sari { padding: 0 14px; }
  #text { font-size: 16px; }   /* iPhone'da yakinlastirma olmasin */
  .oneri { left: 8px; right: 8px; bottom: 70px; }
  #giris { flex-direction: column; }
  #giris .sol { flex: none; padding: 24px 16px 8px; }
  #giris .sol .buyuk-logo { width: min(240px, 70vw); }
  #giris .sag { padding: 16px; }
}

.bildirim-btn { border-style: solid; border-color: #5C4B12; color: var(--sari); background: #2A2410; }

/* --- davet: WhatsApp ve e-posta --- */
.davet-wa { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 14px; background: #25D366; color: #0B2E17 !important; font-weight: 800; font-size: 16px; text-decoration: none; }
.davet-wa:hover { filter: brightness(1.06); }
#panelIcerik .yesil { height: 46px; }
#panelIcerik .ayrac { text-align: center; color: var(--sonuk); font-size: 13px; }
.davet-mail { display: flex; gap: 8px; }
.davet-mail .davet-link { flex: 1; min-width: 0; }
.davet-mail .yesil { padding: 0 14px; flex: none; }

/* --- yetkiler: donem yoneticisi, davet turu, mesaj silme --- */
.yon.donem-yon { background: #1F8A4C; color: #EDF1EC; }
.davet-tur { display: flex; flex-direction: column; gap: 6px; }
.tur-secim { display: flex; gap: 6px; flex-wrap: wrap; }
.tur-btn { flex: 1 1 auto; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--bg); color: var(--soluk); font-weight: 700; font-size: 13px; }
.tur-btn.secili { border-color: var(--sari); background: #2A2410; color: var(--sari); }
.rol-sec { height: 36px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--bg); color: var(--yazi); font: inherit; font-size: 13px; padding: 0 8px; max-width: 150px; }
.msg p.silindi { font-style: italic; color: var(--sonuk); }
.msg.ben p.silindi { color: #4F5A3A; }
.sil-btn { font-size: 18px; filter: grayscale(.3); }
.sil-btn:hover { background: #3A1A1A !important; }

/* --- ana ekrana ekle rehberi --- */
.yukle { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 16px 14px; border-radius: 18px; background: #F6F4EA; color: #14200F; box-shadow: 0 12px 40px rgba(0,0,0,.55); max-width: 460px; margin: 0 auto; animation: kartGel .25s ease-out; }
.yukle.gizli { display: none; }
.yukle-ikon { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.yukle-yazi { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-right: 18px; }
.yukle-yazi strong { font-family: 'Fraunces', Georgia, serif; font-size: 18px; color: #14632E; }
.yukle-yazi p { margin: 0; font-size: 14px; line-height: 1.45; color: #2B3A2F; }
#yukleIcerik { display: flex; flex-direction: column; gap: 8px; }
.yukle-adim { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; line-height: 1.35; }
.yukle-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #14632E; color: #F2C230; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.yukle .sari { height: 46px; }
.yukle-kapat { position: absolute; top: 6px; right: 8px; color: #4A5A4E; }
/* iPhone Safari'de paylas dugmesini gosteren ok */
.yukle-ok { position: fixed; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 71; font-size: 34px; color: #F2C230; text-shadow: 0 2px 8px rgba(0,0,0,.6); animation: okZipla 1s ease-in-out infinite; pointer-events: none; }
.yukle-ok.gizli { display: none; }
@keyframes okZipla { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (min-width: 701px) { .yukle, .yukle-ok { display: none !important; } }

/* --- ayarlar --- */
.ayar-btn { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--soluk); font-size: 18px; }
.ayar-btn:hover { color: var(--yazi); }
.ayar-satir { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.ayar-satir > div { flex: 1; min-width: 0; }
.ayar-satir strong { display: block; font-size: 15px; }
.ayar-satir small { color: var(--soluk); font-size: 13px; }
.anahtar { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 15px; background: #3A443D; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.anahtar::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.anahtar:checked { background: #3BA55C; }
.anahtar:checked::after { transform: translateX(20px); }
.anahtar:focus-visible { outline: 2px solid var(--sari); outline-offset: 2px; }

/* rehber artik sabit degil, sayfanin ustunde akista: formu ve tarayicinin alt menusunu kapatmaz */
.yukle { position: relative; left: auto; right: auto; bottom: auto; margin: 12px; max-width: none; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
#giris > .yukle { flex: none; width: auto; }
.orta > .yukle { margin: 10px 10px 0; }
/* ok: sayfanin en altinda, tarayici cubugunun hemen ustunde, kartin uzerine binmez */
.yukle-ok { bottom: calc(4px + env(safe-area-inset-bottom)); font-size: 30px; }
.yukle-ok.sag { left: auto; right: 34px; transform: none; animation-name: okZiplaSag; }
@keyframes okZiplaSag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.yukle-resimli { font-size: 14px; font-weight: 700; color: #14632E !important; text-decoration: underline; }

/* sag panelden durum degistirme */
.durum-menu.sabit { position: fixed; left: auto; bottom: auto; z-index: 80; }
.uye.ben-satir { cursor: pointer; border-radius: 10px; }
.uye.ben-satir:hover, .uye.ben-satir:focus-visible { background: var(--aktif); outline: none; }

.davet-alan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #C6CFC8; }

/* Emoji secici + yatay kaydirma duzeltmesi */
#msgs { overflow-x: hidden; }
.orta, .msg, .msg-govde { min-width: 0; }
#bar { position: relative; }
.emoji-btn { font-size: 20px; line-height: 1; }
.emoji-kutu { position: absolute; left: 20px; bottom: 76px; z-index: 30; width: min(360px, calc(100% - 40px)); max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: #161C18; border: 1px solid #2C352F; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.emoji-kutu.gizli { display: none; }
.emoji-sec { padding: 4px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.emoji-sec:hover { background: #26302A; }
.emoji-sec .emoji { width: 28px; height: 28px; }
/* ---------- Sesli oda (Çamlık) ---------- */
.ses-modu #bar, .ses-modu #oneri { display: none !important; }
.ses-panel { margin: auto; width: min(760px, 100%); padding: 28px 20px; display: flex; flex-direction: column; gap: 20px; }
.ses-ust { display: flex; gap: 16px; align-items: center; }
.ses-ust h2 { margin: 0; font-family: Georgia, serif; font-size: 28px; color: var(--sari); }
.ses-ust p { margin: 4px 0 0; }
.ses-agac { width: 64px; height: 64px; border-radius: 18px; background: #14632E; display: flex; align-items: center; justify-content: center; font-size: 34px; flex: none; }
.ses-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; min-height: 120px; padding: 16px; border-radius: 18px; background: #121815; border: 1px solid #222B25; }
.ses-bos { grid-column: 1 / -1; text-align: center; align-self: center; }
.ses-kisi { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; background: #1A211C; text-align: center; min-width: 0; }
.ses-kisi strong { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-kisi small { color: var(--soluk); font-size: 12px; }
.ses-kisi .ses-avatar { width: 64px; height: 64px; font-size: 22px; border-radius: 50%; box-shadow: 0 0 0 3px transparent; transition: box-shadow .12s; }
.ses-kisi.konusuyor .ses-avatar { box-shadow: 0 0 0 3px #3BA55C, 0 0 18px rgba(59,165,92,.6); }
.ses-kisi.sessiz { opacity: .7; }
.ses-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ses-katil { height: 50px; padding: 0 26px; font-size: 16px; }
.ses-btn { height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid #2C352F; background: #1A211C; color: #E8EDE9; font-weight: 700; cursor: pointer; }
.ses-btn.kapali { background: #3A1E1E; border-color: #6B2B2B; }
.ses-btn.kirmizi, .ses-mini.kirmizi { background: #B3261E; border-color: #B3261E; color: #fff; }
.ses-alt-liste { margin: -2px 0 6px 22px; display: flex; flex-direction: column; gap: 2px; }
.ses-alt { font-size: 12.5px; color: #B9C4BC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-alt.sessiz { opacity: .6; }
.ses-sayi { background: #3BA55C !important; color: #fff !important; }
.ses-cubuk { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: #13301E; border: 1px solid #1F5A33; }
.ses-cubuk-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: #DFF5E6; cursor: pointer; padding: 0; text-align: left; }
.ses-cubuk-yazi strong { font-size: 13px; }
.ses-cubuk-yazi small { font-size: 11.5px; color: #8FD1A5; }
.ses-mini { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #2C352F; background: #1A211C; color: #fff; cursor: pointer; flex: none; }
.ses-mini.kapali { background: #3A1E1E; }
/* Mesaj duzenleme */
.duzenle-kutu { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; min-width: min(420px, 60vw); }
.duzenle-kutu textarea { width: 100%; resize: vertical; min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid #2C352F; background: #0F1411; color: #E8EDE9; font: inherit; font-size: 15px; }
.msg.ben .duzenle-kutu textarea { background: #FFF7D6; color: #14200F; border-color: #C9A11F; }
.duzenle-dugmeler { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.duzenle-dugmeler small { margin-right: auto; font-size: 11px; }
.msg.duzenleniyor .tepki-cubuk { display: none !important; }
/* Ses ayarlari */
.ses-alan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #C6CFC8; }
.ses-sec { width: 100%; height: 44px; border-radius: 12px; padding: 0 10px; background: var(--bg, #0F1411); color: #E8EDE9; border: 1px solid #2C352F; font: inherit; font-size: 14px; }
.ses-seviye { display: flex; align-items: center; gap: 10px; }
.ses-seviye input[type=range] { flex: 1; accent-color: #F2C230; height: 28px; }
.ses-seviye span { width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: #E8EDE9; }
.ses-olcer { height: 10px; border-radius: 5px; background: #222B25; overflow: hidden; }
.ses-olcer > div { height: 100%; width: 0; background: #3BA55C; border-radius: 5px; transition: width .08s linear; }
.ses-olcer > div.yuksek { background: #F2C230; }
/* Bildirim seridi */
.bildirim-serit { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 12px 10px 14px; border-radius: 14px; background: #13301E; border: 1px solid #1F5A33; }
.bildirim-serit > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bildirim-serit strong { font-size: 14px; color: #DFF5E6; }
.bildirim-serit small { font-size: 12.5px; color: #8FD1A5; }
.bildirim-serit .sari { height: 38px; padding: 0 18px; }
.serit-sonra { border: 0; background: none; color: #8FD1A5; font-weight: 600; cursor: pointer; padding: 6px; }
/* Telefonla eslestir */
.eslestir-alan { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #121815; border: 1px solid #222B25; }
.eslestir-alan input { height: 52px; font-size: 26px; letter-spacing: 10px; text-align: center; }
.eslestir-qr { display: block; width: 220px; height: 220px; margin: 4px auto; border-radius: 12px; background: #fff; padding: 8px; }
.eslestir-adres { text-align: center; font-weight: 700; color: var(--sari, #F2C230); word-break: break-all; margin: 0; }
.eslestir-buyuk { text-align: center; font-size: 44px; font-weight: 800; letter-spacing: 8px; color: #fff; padding: 10px; border-radius: 14px; background: #13301E; border: 1px solid #1F5A33; font-variant-numeric: tabular-nums; }
/* Yukleme rehberi: buyuk kapat dugmesi + "Simdi degil" */
.yukle-kapat { top: 4px; right: 4px; width: 40px; height: 40px; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20,32,15,.08); color: #14200F; z-index: 2; }
.yukle-yazi { padding-right: 34px; }
.yukle-sonra { align-self: flex-start; border: 0; background: none; color: #4A5A4E; font-weight: 700; font-size: 14px; text-decoration: underline; padding: 4px 0; cursor: pointer; }
/* Telefon: sagdan cevrimici kisiler cekmecesi (Discord gibi) */
.kisi-btn { display: none; margin-left: auto; font-size: 18px; }
@media (max-width: 900px) {
  .kisi-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .uyeler { display: flex !important; position: fixed; inset: 0 0 0 auto; width: min(290px, 80vw); z-index: 45; transform: translateX(102%); transition: transform .2s ease; box-shadow: -8px 0 30px rgba(0,0,0,.5); padding-top: calc(18px + env(safe-area-inset-top)); }
  .uyeler.acik { transform: none; }
  #app.kisi-acik::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 44; }
}
@media (max-width: 700px) {
  .orta header .soluk { padding-right: 44px; }
}
/* Telefonda ust cubukta logo */
.ust-logo { display: none; }
@media (max-width: 700px) {
  .ust-logo { display: block; width: 34px; height: 34px; border-radius: 10px; flex: none; object-fit: cover; }
  .orta header .soluk { padding-left: 94px; }
}
/* Video ve yukleme durumu */
.msg-video { display: block; width: min(420px, 100%); max-height: 70vh; margin-top: 6px; border-radius: 12px; background: #000; }
.yukleme-durum { margin: 0 20px 6px; padding: 8px 12px; border-radius: 12px; background: #13301E; border: 1px solid #1F5A33; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #DFF5E6; }
.yukleme-cubuk { height: 6px; border-radius: 3px; background: #0F1411; overflow: hidden; }
.yukleme-cubuk > div { height: 100%; width: 0; background: #F2C230; transition: width .15s; }
@media (max-width: 700px) { .yukleme-durum { margin: 0 10px 6px; } }
/* + menusu */
.ek-menu { position: absolute; left: 20px; bottom: 76px; z-index: 31; width: min(300px, calc(100% - 40px)); padding: 6px; display: flex; flex-direction: column; gap: 2px; background: #161C18; border: 1px solid #2C352F; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: kartGel .15s ease-out; }
.ek-sec { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: #E8EDE9; cursor: pointer; }
.ek-sec:hover, .ek-sec:active { background: #26302A; }
.ek-ikon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; background: #1F2A23; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ek-sec span:nth-child(2) { font-weight: 700; font-size: 15px; }
.ek-sec small { color: var(--soluk); font-size: 12px; }
@media (max-width: 700px) { .ek-menu { left: 10px; bottom: 70px; } }
.baglanti-serit { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 90; padding: 8px 16px; border-radius: 20px; background: #B3261E; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
/* Profil */
.avatar.fotolu { background-size: cover !important; background-position: center !important; color: transparent !important; }
.avatar.tiklanir { cursor: pointer; }
.profil-satir { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 14px; background: var(--bg, #0F1411); border: 1px solid #222B25; color: inherit; text-align: left; cursor: pointer; }
.profil-satir > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profil-satir small { color: var(--soluk); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil-satir .ok-isaret { font-size: 22px; color: var(--soluk); }
.avatar.buyuk-avatar { width: 52px; height: 52px; font-size: 18px; flex: none; }
.profil-ust { display: flex; align-items: center; gap: 16px; }
.avatar.profil-avatar { width: 96px; height: 96px; font-size: 32px; flex: none; border-radius: 50%; }
.profil-dugmeler { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.profil-ad { margin: 0; font-size: 20px; }
.profil-hakkinda { margin: 0; padding: 12px 14px; border-radius: 12px; background: #121815; border: 1px solid #222B25; font-size: 15px; line-height: 1.45; }
.basari { margin: 0; color: #3BA55C; font-weight: 700; }
.durum-secimi { display: flex; flex-direction: column; gap: 4px; }
.profil-fotolar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profil-foto { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #121815; }
.profil-foto img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.profil-foto-sil { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; cursor: pointer; }
.profil-foto-ekle { aspect-ratio: 1; border-radius: 12px; border: 2px dashed #2C352F; background: none; color: var(--soluk); font-size: 34px; cursor: pointer; }
.resim-buyuk { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.resim-buyuk img { max-width: 100%; max-height: 100%; border-radius: 10px; }
/* Gondermeden once duzenleme ekrani */
.duzenle-ekran { position: fixed; inset: 0; z-index: 95; background: #000; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.duzenle-ust { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.duzenle-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #1E2420; color: #fff; font-size: 20px; cursor: pointer; flex: none; }
.duzenle-baslik { color: #DDE5DF; font-weight: 700; font-size: 14px; }
.oran-grup { display: flex; gap: 4px; flex-wrap: wrap; }
.oran-btn { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid #333; background: #141815; color: #DDE5DF; font-weight: 700; font-size: 13px; cursor: pointer; }
.oran-btn.secili { background: #F2C230; color: #14200F; border-color: #F2C230; }
.duzenle-sahne { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.duzenle-video { max-width: 100%; max-height: 100%; border-radius: 8px; }
.kirp-kap { position: relative; display: inline-block; line-height: 0; overflow: hidden; touch-action: none; }
.kirp-tuval { display: block; max-width: calc(100vw - 16px); max-height: calc(100dvh - 190px); }
.kirp-kutu { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; touch-action: none;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 33.33% 33.33%; background-position: -1px -1px; }
.kirp-tutamak { position: absolute; width: 26px; height: 26px; border: 4px solid #F2C230; }
.kirp-tutamak.nw { left: -5px; top: -5px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.kirp-tutamak.ne { right: -5px; top: -5px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.kirp-tutamak.sw { left: -5px; bottom: -5px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.kirp-tutamak.se { right: -5px; bottom: -5px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.duzenle-alt { display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; }
.duzenle-yazi { flex: 1; min-width: 0; height: 48px; border-radius: 24px; padding: 0 18px; border: 1px solid #333; background: #141815; color: #fff; font-size: 16px; }
.duzenle-alt .soluk { flex: 1; }
.duzenle-tamam { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #3BA55C; color: #fff; font-size: 28px; font-weight: 800; cursor: pointer; flex: none; box-shadow: 0 4px 16px rgba(59,165,92,.45); }
.duzenle-tamam:disabled { opacity: .6; }
/* Hizli kaydirma */
#msgs { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; will-change: scroll-position; }
#msgs > .msg { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.msg-video { content-visibility: visible; }
/* Telefon ust cubuk: 👥 dugmesi baslikla ayni satirda, sagda */
@media (max-width: 900px) {
  .orta header { flex-wrap: wrap; }
  .orta header .soluk { order: 5; }
  .orta header .kisi-btn { order: 4; margin-left: auto; }
}
/* Telefon ust cubuk: ince tek satir */
@media (max-width: 700px) {
  .orta header { padding: 6px 10px; gap: 8px; min-height: 0; flex-wrap: nowrap; }
  .orta header .soluk { display: none; }
  .orta header .menu-btn, .orta header .kisi-btn { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .ust-logo { width: 30px; height: 30px; border-radius: 8px; }
  .orta header .baslik { font-size: 18px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.resim-kapat { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 22px; cursor: pointer; z-index: 101; }
.resim-indir { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 66px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 101; }
.balon img { cursor: zoom-in; }
/* Uzun basma menusu */
.mesaj-perde { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.35); }
.mesaj-menu { position: fixed; z-index: 81; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 16px; background: #1A211C; border: 1px solid #2C352F; box-shadow: 0 12px 34px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px; animation: kartGel .12s ease-out; }
.mesaj-menu-tepki { display: flex; gap: 2px; padding: 4px 4px 8px; border-bottom: 1px solid #2C352F; margin-bottom: 4px; justify-content: space-between; }
.mesaj-menu-tepki .tepki-sec { padding: 4px; border: 0; background: none; border-radius: 10px; cursor: pointer; }
.mesaj-menu-tepki .emoji { width: 30px; height: 30px; }
.mesaj-menu-sec { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 10px; background: none; color: #E8EDE9; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.mesaj-menu-sec:hover, .mesaj-menu-sec:active { background: #26302A; }
.mesaj-menu-sec.kirmizi { color: #FF6B60; }
.secili-mesaj .balon { outline: 2px solid #F2C230; outline-offset: 2px; }
#msgs .balon { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (hover: hover) { #msgs .balon { -webkit-user-select: text; user-select: text; } }
/* Telefonda uzun basinca tum ekran secilmesin (uygulama gibi); yazi kutulari haric */
@media (hover: none) {
  body, #app, #app * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #app input, #app textarea, #app [contenteditable], #panel input, #panel textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  img, video { -webkit-user-drag: none; }
}
/* Kariyer / Mezun Rehberi */
.kariyer-kart { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #121815; border: 1px solid #222B25; }
.kariyer-satir { font-size: 14.5px; line-height: 1.4; }
.mentor-rozet { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #13301E; border: 1px solid #1F5A33; color: #8FD1A5; font-size: 12px; font-weight: 800; }
.kariyer-link { color: var(--sari, #F2C230); font-weight: 700; text-decoration: none; }
.rehber-serit { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 14px; background: #13301E; border: 1px solid #1F5A33; margin-bottom: 4px; flex: none; }
.rehber-serit > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rehber-serit strong { color: #DFF5E6; } .rehber-serit small { color: #8FD1A5; font-size: 12.5px; }
.rehber-serit .sari { height: 38px; padding: 0 18px; }
.rehber-liste { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.rehber-kisi { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 12px; background: #121815; color: inherit; text-align: left; cursor: pointer; }
.rehber-kisi:hover { background: #1A211C; }
.rehber-kisi > div { display: flex; flex-direction: column; min-width: 0; }
.rehber-kisi small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rehberlik etiketleri */
.rehber-cubuk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 20px 0; }
.rehber-cubuk small { flex-basis: 100%; font-size: 12px; }
.etiket-sec { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid #2C352F; background: #141815; color: #DDE5DF; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.etiket-sec.secili { background: #F2C230; color: #14200F; border-color: #F2C230; }
.etiket-sec.isimsiz.secili { background: #3B4A80; color: #fff; border-color: #3B4A80; }
.etiket-rozet { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #13301E; color: #8FD1A5; border: 1px solid #1F5A33; }
.msg.ben .etiket-rozet { background: rgba(20,32,15,.15); color: #14200F; border-color: rgba(20,32,15,.25); }
.rozet-satir { display: flex; flex-wrap: wrap; gap: 6px; }
.rehber-kart { cursor: default; display: flex; flex-direction: column; gap: 4px; }
.rehber-kart-dug { display: flex; gap: 6px; margin-top: 6px; }
.ses-modu #rehberCubuk { display: none; }
@media (max-width: 700px) { .rehber-cubuk { padding: 6px 10px 0; overflow-x: auto; flex-wrap: nowrap; } .rehber-cubuk small { display: none; } }

/* Paneller uzun olunca kendi icinde kaysin (arka plan kaymasin) */
#panel { overscroll-behavior: contain; }
#panel .panel-kutu { max-height: calc(100dvh - 12vh - 16px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#panel .panel-ust { position: sticky; top: -18px; z-index: 3; background: inherit; margin: -18px -18px 0; padding: 18px 18px 8px; }
#panel .panel-ust .kapat { width: 40px; height: 40px; font-size: 22px; border-radius: 50%; }
body.panel-acik { overflow: hidden; }
@media (max-width: 700px) {
  #panel { padding: calc(10px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
  #panel .panel-kutu { width: 100%; max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* Bildirim ayarlari */
.bildirim-satir { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg, #0F1411); }
.bildirim-satir > div:first-child { display: flex; flex-direction: column; }
.bildirim-satir small { color: var(--soluk); font-size: 13px; }
.uclu-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 12px; background: #141815; border: 1px solid #222B25; }
.uclu { height: 36px; border: 0; border-radius: 9px; background: none; color: #C6CFC8; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.uclu.secili { background: #F2C230; color: #14200F; }

/* Sag panel: cevrimdisi uyeler soluk */
.uye.cevrimdisi { opacity: .45; }
.uye.cevrimdisi:hover { opacity: .8; }
.uye { cursor: pointer; }
.cevrimdisi-baslik { margin-top: 14px !important; }

/* Sag liste: eski yesil nokta kalksin (durum noktasi zaten var), rol rozeti */
.uye .avatar::after { display: none; }
.liste-rol { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(242,194,48,.18); color: #F2C230; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; vertical-align: middle; }

/* Durum noktasi kucuk (profil fotografi gorunsun); cevrimdisi gri */
.durum-nokta { width: 10px; height: 10px; border-width: 2px; right: -1px; bottom: -1px; }
.durum-nokta.cevrimdisi { background: #747F8D; }
.uye.cevrimdisi { opacity: .6; }
#benAvatar .durum-nokta, .profil .durum-nokta { width: 11px; height: 11px; }
.durum-sec .durum-nokta { width: 12px; height: 12px; }

.sinif-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.sinif-cipler .etiket-sec { min-width: 44px; height: 36px; font-size: 15px; }

/* Panel geri dugmesi */
.panel-ust { gap: 8px; }
.panel-ust h3 { flex: 1; min-width: 0; }
.panel-geri { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: #1E2420; color: #fff; font-size: 30px; line-height: 1; padding-bottom: 4px; cursor: pointer; }
.panel-geri.gizli { display: none; }

.tepki-cubuk.yuzen { position: fixed; top: 0; left: 0; right: auto; opacity: 1; pointer-events: auto; transform: none; z-index: 60; display: flex; animation: yuzenGel .12s ease-out; }
@keyframes yuzenGel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mod-uyari { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 90; display: flex; gap: 10px; align-items: flex-start; max-width: min(520px, calc(100vw - 24px)); background: #2A1A1D; border: 1px solid #6B2B35; color: #FFD9DE; padding: 12px 14px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 14px; }
.mod-uyari button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; }
.mod-durum-kart { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--kart, #1B1F29); border: 1px solid var(--cizgi, #262B37); margin-bottom: 6px; }
.mod-durum-kart small { color: var(--soluk, #A4AABA); }
.mod-sure { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.kirmizi-btn { width: 100%; padding: 11px; border-radius: 12px; border: 1px solid #6B2B35; background: #3A1C22; color: #FF9AA8; font-weight: 600; cursor: pointer; margin-top: 6px; }
.kirmizi-btn:hover { background: #4A2129; }
.mod-satir { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--kart, #1B1F29); border: 1px solid var(--cizgi, #262B37); color: inherit; margin-bottom: 6px; cursor: pointer; }
.mod-satir div { display: flex; flex-direction: column; } .mod-satir small { color: var(--soluk, #A4AABA); }
.mesaj-menu-baslik { padding: 6px 12px 8px; font-weight: 700; font-size: 13px; color: var(--soluk, #A4AABA); border-bottom: 1px solid var(--cizgi, #262B37); margin-bottom: 4px; }

.ai-rozet { display: inline-block; margin-top: 6px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(124,149,255,.16); color: #AFC0FF; border: 1px solid rgba(124,149,255,.35); }
.msg.ben .ai-rozet { background: rgba(20,32,15,.12); color: #14200F; border-color: rgba(20,32,15,.25); }

.ses-olcer { position: relative; }
.ses-olcer .esik-cizgi { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #F2C230; border-radius: 2px; }
.ses-mod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 8px; }
.ses-mod-sec { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--cizgi, #262B37); background: var(--kart, #1B1F29); color: inherit; cursor: pointer; }
.ses-mod-sec small { color: var(--soluk, #A4AABA); font-size: 11.5px; line-height: 1.3; }
.ses-mod-sec.secili { border-color: var(--mavi, #7C95FF); background: rgba(124,149,255,.12); }
@media (max-width: 520px) { .ses-mod { grid-template-columns: 1fr; } }
.ptt-btn { display: block; width: min(340px, 100%); margin: 14px auto 4px; padding: 22px 16px; border-radius: 999px; border: 2px solid var(--mavi, #7C95FF); background: rgba(124,149,255,.12); color: var(--yazi, #EEF0F5); font-size: 17px; font-weight: 700; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ptt-btn.basili { background: #43C98A; border-color: #43C98A; color: #0B1A12; transform: scale(.98); }
.ptt-not { text-align: center; }

.hata-metin { width: 100%; min-height: 110px; resize: vertical; border-radius: 12px; padding: 10px 12px; background: var(--kutu, #171B24); color: var(--yazi, #EEF0F5); border: 1px solid var(--cizgi, #262B37); font: inherit; margin: 6px 0; }
.hata-onizle img { max-width: 100%; max-height: 220px; border-radius: 10px; margin: 6px 0; display: block; }
.hata-kart { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--kart, #1B1F29); border: 1px solid var(--cizgi, #262B37); margin-bottom: 8px; }
.hata-kart small { color: var(--soluk, #A4AABA); } .hata-kart p { margin: 4px 0; white-space: pre-wrap; }
.hata-kart img { max-width: 100%; max-height: 200px; border-radius: 8px; cursor: zoom-in; align-self: flex-start; }
.hata-kart code { font-size: 12px; white-space: pre-wrap; word-break: break-word; color: #FFB4BF; }
.hata-kart select { margin-top: 4px; max-width: 160px; }

.spam-not { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--soluk, #A4AABA); line-height: 1.4; }
.spam-not b { color: var(--yazi, #EEF0F5); font-weight: 600; }

.tepki-ac { position: fixed; z-index: 59; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--cizgi, #262B37); background: var(--kutu, #171B24); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.tepki-ac:hover { background: var(--aktif, #232A3D); transform: scale(1.08); }

.sil-btn svg, .cop-ikon svg { display: block; }
.cop-ikon { display: inline-flex; align-items: center; justify-content: center; }
.sil-btn:hover svg path { stroke: #FFB3BD; }