/* ─── v1.17: Tema Değişkenleri ────────────────────────────────────────────── */
:root {
  --bg-app: #0d0f14;
  --bg-surface: #151822;
  --bg-surface-2: #1a1e2a;
  --bg-surface-3: #1f2430;
  --border-soft: rgba(255, 255, 255, 0.09);
  --border-soft-strong: rgba(255, 255, 255, 0.16);
  --text-primary: #eef0f3;
  --text-secondary: #9aa0ac;
  --text-tertiary: #6b7280;
  --accent: #66fcf1;
  --accent-soft: rgba(102, 252, 241, 0.12);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.06);
}

body.theme-purple {
  --bg-app: #130a22;
  --bg-surface: #1e1035;
  --bg-surface-2: #26123f;
  --bg-surface-3: #2f1850;
  --border-soft: rgba(186, 130, 255, 0.14);
  --border-soft-strong: rgba(186, 130, 255, 0.24);
  --text-primary: #f1e9fb;
  --text-secondary: #b6a3d9;
  --text-tertiary: #8874ad;
  --accent: #b366f5;
  --accent-soft: rgba(179, 102, 245, 0.16);
  --shadow-surface: 0 2px 16px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(179, 102, 245, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; max-width: 100%; }
body { background-color: var(--bg-app); color: var(--text-secondary); height: 100vh; height: 100dvh; display: flex; transition: background-color 0.2s, color 0.2s; }
img, iframe { max-width: 100%; }

/* ─── v1.9/v1.17: Açık Tema — yumuşak yüzeyler, sert siyah çerçeve yok ───── */
body.theme-purple #login-screen,
body.theme-purple .topbar,
body.theme-purple .chat-area,
body.theme-purple .hub-detail-side,
body.theme-purple .hub-voice-rooms-side,
body.theme-purple .friends-sidebar,

body.theme-purple .topbar { border-bottom: 1px solid var(--border-soft); box-shadow: var(--shadow-surface); }
body.theme-purple .composer-input-box,
body.theme-purple .dm-modal-box .composer-input-box { background-color: var(--bg-surface); border-color: var(--border-soft); box-shadow: var(--shadow-surface); }

body.theme-purple .login-box,
body.theme-purple .modal-box,
body.theme-purple .hub-card,
body.theme-purple .hub-msg-text,
body.theme-purple .hub-poll-card,
body.theme-purple .hub-share-card,
body.theme-purple .hub-role-row,
body.theme-purple .friend-request-row,
body.theme-purple .template-card,
body.theme-purple .role-builder-row,
body.theme-purple .privacy-option,
body.theme-purple .dm-msg-theirs { background-color: var(--bg-surface); border-color: var(--border-soft); box-shadow: var(--shadow-surface); }

body.theme-purple .dm-msg-mine { background-color: var(--accent-soft); border-color: rgba(179, 102, 245, 0.3); }

body.theme-purple .login-box h2,
body.theme-purple .profile-modal-username,
body.theme-purple .hub-detail-header h2,
body.theme-purple .hub-card-name { color: var(--text-primary); }

body.theme-purple #login-username-input,
body.theme-purple #login-password-input,
body.theme-purple .login-box input,
body.theme-purple #message-input,
body.theme-purple #hub-message-input,
body.theme-purple .hub-name-input,
body.theme-purple .poll-create-body input,
body.theme-purple .poll-create-body textarea,
body.theme-purple .friend-add-section input,
body.theme-purple #username-edit-input,
body.theme-purple #settings-current-password,
body.theme-purple #settings-new-password { background-color: var(--bg-surface-2); color: var(--text-primary); }

body.theme-purple .hub-msg-text,
body.theme-purple .hub-share-content,
body.theme-purple .friend-request-name,
body.theme-purple .profile-field-value { color: var(--text-primary); }

body.theme-purple .dm-side-panel .dm-modal-box,
body.theme-purple .dm-modal-box { background: var(--bg-surface); border-left: 1px solid var(--border-soft); box-shadow: -14px 0 40px rgba(0, 0, 0, 0.4); }

body.theme-purple .liquid-glass,
body.theme-purple .topbar-menu-dropdown,
body.theme-purple .friends-sidebar,
body.theme-purple .hub-title-pill,
body.theme-purple .hub-call-btn,
body.theme-purple .hub-icon-btn,
body.theme-purple .hub-back-btn,
body.theme-purple .composer-attach-btn,
body.theme-purple .composer-icon-btn { background: var(--glass-bg); border-color: var(--border-soft); }

body.theme-purple .hub-detail-header,
body.theme-purple .hub-detail-side,
body.theme-purple .hub-voice-rooms-side { border-color: var(--border-soft); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0b0c10; }
::-webkit-scrollbar-thumb { background: #1f2833; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #45a29e; }

/* Giriş Ekranı */
#login-screen { width: 100%; height: 100vh; height: 100dvh; display: flex; justify-content: center; align-items: center; background-color: var(--bg-app); position: relative; overflow: hidden; }
.login-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

@keyframes login-box-mount {
  from { opacity: 0; transform: scale(0.92); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
.login-box {
  position: relative; z-index: 1; background-color: var(--bg-surface); padding: 40px; border-radius: 18px;
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-surface); text-align: center; width: 350px; max-width: 92vw;
  animation: login-box-mount 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-box h2 { color: #fff; margin-bottom: 25px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 20px; }
.title-char {
  display: inline-block; opacity: 0; transform: translateY(16px) scale(0.85);
  animation: title-char-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes title-char-in {
  0%   { opacity: 0; transform: translateY(16px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .title-char { animation: none; opacity: 1; transform: none; }
}
.login-box input { width: 100%; padding: 12px 14px; margin-bottom: 16px; background-color: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: 12px; color: var(--accent); outline: none; transition: 0.2s; font-size: 14px; }
.login-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px var(--accent-soft); }
.auth-field-label { display: block; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin: -8px 0 8px 2px; }

/* Floating label alanları (kullanıcı adı / şifre) */
.field-float { position: relative; margin-bottom: 16px; }
.field-float input { margin-bottom: 0; padding: 21px 14px 9px; }
.field-float label {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #6b7280; font-size: 14px; letter-spacing: normal; text-transform: none;
  pointer-events: none; transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, letter-spacing 0.18s ease;
}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label {
  top: 11px; transform: translateY(0); font-size: 9.5px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .login-box { animation: none; }
  .login-particles { display: none; }
  #login-btn.is-loading .btn-spinner { animation: none; }
  #login-btn.is-success .btn-success { animation: none; }
}
.auth-terms-note { text-align: left; font-size: 12px; color: #9ca3af; margin: 4px 0 16px; line-height: 1.5; }
.auth-terms-note a { color: #66fcf1; }

.terms-modal-box { width: 92vw; max-width: 480px; max-height: 82vh; display: flex; flex-direction: column; gap: 10px; padding: 24px; text-align: left; }
.terms-modal-box h3 { margin: 0; font-size: 16px; color: #66fcf1; }
.terms-modal-hint { margin: 0; font-size: 12px; color: #9ca3af; }
.terms-modal-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; line-height: 1.6; color: #c5c6c7;
}
.terms-modal-body h1 { font-size: 15px; color: #66fcf1; margin: 0 0 4px; }
.terms-modal-body h2 { font-size: 13px; color: #66fcf1; margin: 18px 0 6px; }
.terms-modal-body p, .terms-modal-body li { font-size: 12.5px; color: #c5c6c7; }
.terms-modal-body .legal-notice { background: rgba(255, 159, 67, 0.1); border: 1px solid rgba(255, 159, 67, 0.3); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #ffb066; margin: 10px 0; }
.terms-modal-body .legal-updated { display: none; }
.terms-modal-body hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 22px 0; }
#terms-accept-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.login-box button {
  width: 100%; padding: 12px; border-radius: 999px; cursor: pointer; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
  color: #66fcf1; background: rgba(102, 252, 241, 0.08);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(102, 252, 241, 0.35); transition: 0.3s;
}
.login-box button:hover { background: rgba(102, 252, 241, 0.22); box-shadow: 0 0 14px rgba(102, 252, 241, 0.3); }

/* Giriş butonu: yüklenme (spinner) ve başarı (checkmark) durumları */
#login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
#login-btn .btn-spinner, #login-btn .btn-success { display: none; }
#login-btn .btn-success { width: 16px; height: 16px; }
#login-btn .btn-success svg { width: 100%; height: 100%; }
#login-btn.is-loading .btn-label { visibility: hidden; }
#login-btn.is-loading .btn-spinner {
  display: block; position: absolute; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(102, 252, 241, 0.25); border-top-color: var(--accent, #66fcf1);
  animation: login-btn-spin 0.7s linear infinite;
}
#login-btn.is-success { background: rgba(87, 242, 135, 0.16); border-color: rgba(87, 242, 135, 0.5); }
#login-btn.is-success .btn-label, #login-btn.is-success .btn-spinner { display: none; }
#login-btn.is-success .btn-success { display: block; color: #57f287; animation: login-btn-success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes login-btn-spin { to { transform: rotate(360deg); } }
@keyframes login-btn-success-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* İkincil aksiyonlar ("Şifremi Unuttum", "Zaten hesabın var mı? Giriş Yap",
   "Geri Dön" vb.) — ana pill butonla (Giriş Yap / Kayıt Ol) birbirine
   yapışıp aynı buton gibi görünmesinler diye üstte boşluk ve sade metin-link
   görünümü. */
.auth-switch {
  margin-top: 14px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px; font-size: 12px; color: #6b7280;
}
.auth-switch button {
  width: auto; padding: 0; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; color: #66fcf1; font-size: 12px; font-weight: bold; text-transform: none; letter-spacing: normal;
  text-decoration: underline; cursor: pointer; transition: color 0.2s;
}
.auth-switch button:hover { color: #9df9f0; background: none; box-shadow: none; }

/* Ana Ekran */
#chat-screen { width: 100%; display: flex; flex-direction: column; }

/* ─── v1.9: Üst Bar ───────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; background: var(--bg-surface); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; position: relative; z-index: 80; transition: background-color 0.2s, border-color 0.2s; }
.topbar-logo { color: #66fcf1; font-weight: bold; letter-spacing: 3px; font-size: 14px; }
/* SAURAN yazısı üst çubuğun tam ortasında sabit dursun — sol/sağ içerik
   genişliği ne olursa olsun kaymaz, çünkü .topbar'a göre mutlak konumlanıyor. */
.topbar-logo-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.topbar-context-title { color: #9ca3af; font-weight: bold; font-size: 12px; letter-spacing: 0.3px; white-space: nowrap; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-badge { position: absolute; top: -5px; right: -5px; background: #66fcf1; color: #0b0c10; font-size: 9px; font-weight: bold; padding: 1px 5px; border-radius: 8px; }
/* AŞAMA E: profil butonu artık yuvarlak bir ikon olarak sağ üstte, 3 çizgi
   menüsünün hemen solunda — hamburger butonuyla aynı boyut dilinde. */
.topbar-profile-btn {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; gap: 0;
  border-radius: 50%; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; transition: 0.2s;
}
.topbar-profile-btn:hover { border-color: rgba(102, 252, 241, 0.4); }
.topbar-profile-btn .profile-username { display: none; }
.topbar-profile-btn .profile-avatar-wrap-sm { width: 32px; height: 32px; }
.topbar-profile-btn .profile-avatar-wrap-sm .profile-avatar { width: 32px; height: 32px; font-size: 14px; }
.topbar-profile-btn .profile-avatar-wrap-sm .profile-avatar-img { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }

/* ─── v1.15: Hamburger Menü ───────────────────────────────────────────────── */
.topbar-menu-btn {
  position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12); color: #c5c6c7; cursor: pointer; font-size: 16px; transition: 0.2s;
}
.topbar-menu-btn:hover { border-color: rgba(102, 252, 241, 0.4); color: #66fcf1; }
.topbar-menu-badge { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #66fcf1; box-shadow: 0 0 6px rgba(102, 252, 241, 0.7); }

.topbar-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 22px; z-index: 90; min-width: 220px;
  display: flex; flex-direction: column; padding: 8px; border-radius: 14px;
  animation: dropdown-in 0.18s ease-out;
}
.topbar-menu-item {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: none; border: none; color: #c5c6c7; font-size: 13px; cursor: pointer; transition: 0.15s; text-align: left; width: 100%;
}
.topbar-menu-item:hover { background: rgba(102, 252, 241, 0.1); color: #66fcf1; }
.topbar-menu-item .topbar-badge { position: static; margin-left: auto; }

/* Sohbet Alanı */
.chat-area { flex: 1; display: flex; flex-direction: column; background-color: var(--bg-app); min-height: 0; }
#messages { flex: 1; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }

/* Mesaj */
.message { background-color: #12141a; padding: 12px 15px; border-radius: 2px; border-left: 2px solid #1f2833; transition: 0.3s; align-self: flex-start; max-width: 75%; word-wrap: break-word; }
.message:hover { border-left-color: var(--user-color, #66fcf1); }
.message .header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.message .username { color: #66fcf1; font-weight: bold; font-size: 14px; letter-spacing: 1px; }
.message .time { color: #45a29e; font-size: 11px; opacity: 0.6; }
.message .content { color: #c5c6c7; font-size: 14px; line-height: 1.5; }

/* Mesaj Yazma Alanı */
#chat-form { padding: 20px 25px; background-color: #12141a; display: flex; gap: 15px; border-top: 1px solid #1f2833; }
#message-input { flex: 1; background-color: #0b0c10; border: 1px solid #1f2833; padding: 15px; border-radius: 2px; color: #66fcf1; outline: none; font-size: 14px; transition: 0.3s; }
#message-input:focus { border-color: #45a29e; }
#message-input::placeholder { color: #45a29e; opacity: 0.5; }
#chat-form button { padding: 0 25px; background-color: transparent; color: #66fcf1; border: 1px solid #66fcf1; border-radius: 2px; cursor: pointer; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
#chat-form button:hover { background-color: #66fcf1; color: #0b0c10; box-shadow: 0 0 10px rgba(102, 252, 241, 0.3); }

/* ─── v1.3: Modal ─────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 100; }
.modal-box { background: #1f2833; border: 1px solid #2a3644; border-radius: 2px; width: 280px; max-height: 400px; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,0.6); }

/* Ayarlar penceresi: sağdan açılan sabit sürgü panel — hiçbir metin taşmaz/gizlenmez */
#settings-modal { justify-content: flex-end; align-items: stretch; }
#settings-modal .settings-modal-box {
  max-height: 100vh; height: 100vh; width: 460px; max-width: 100vw;
  border-radius: 16px 0 0 16px; box-shadow: -10px 0 40px rgba(0,0,0,0.6);
  animation: settings-drawer-in 0.22s ease-out;
}
@keyframes settings-drawer-in { from { transform: translateX(100%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

/* Masaüstü: sol tarafta dikey kategori listesi + sağda kaydırılabilir içerik */
.settings-layout { display: flex; flex-direction: row; flex: 1; min-height: 0; }

.settings-tabs {
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
  width: 150px; padding: 14px 10px; overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-tab-btn {
  flex-shrink: 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: transparent; border: 1px solid transparent; color: #9ca3af;
  cursor: pointer; transition: 0.2s;
}
.settings-tab-btn:hover { background: rgba(255, 255, 255, 0.05); color: #c5c6c7; }
.settings-tab-btn.active { background: rgba(102, 252, 241, 0.12); border-color: rgba(102, 252, 241, 0.35); color: #66fcf1; font-weight: bold; }

.settings-modal-body { overflow-y: auto; flex: 1; min-width: 0; }
.settings-panel { display: flex; flex-direction: column; gap: 12px; }

/* Mobil: yatay kaydırılabilir şerit (zaten iyi çalışıyordu, korunuyor) */
@media (max-width: 768px) {
  #settings-modal .settings-modal-box { width: 100vw; max-width: 100vw; border-radius: 0; }
  .settings-layout { flex-direction: column; }
  .settings-tabs {
    flex-direction: row; width: auto; gap: 6px; padding: 12px 16px 0; overflow-x: auto; overflow-y: visible;
    border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab-btn { border-radius: 999px; white-space: nowrap; }
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #2a3644; color: #66fcf1; font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.modal-header button:not([class]) {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1); color: #8e9297; font-size: 13px; cursor: pointer; line-height: 1; padding: 0; transition: 0.2s;
}
.modal-header button:not([class]):hover { color: #66fcf1; border-color: rgba(102, 252, 241, 0.4); }
#users-list { list-style: none; overflow-y: auto; padding: 10px 0; }
#users-list li { padding: 9px 16px; color: #c5c6c7; font-size: 14px; display: flex; align-items: center; gap: 8px; }
#users-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #57f287; flex-shrink: 0; }
#users-list li.me { color: #66fcf1; font-weight: bold; }
#users-list li.me::after { content: ' (sen)'; font-size: 11px; opacity: 0.6; font-weight: normal; }

/* ─── v1.9: Profil Butonu ─────────────────────────────────────────────────── */
.profile-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; color: #0b0c10; background: var(--user-color, #66fcf1); }
.profile-avatar-img { border-radius: 50%; object-fit: cover; }
.profile-username { color: #c5c6c7; font-size: 13px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.profile-avatar-wrap-sm { width: 30px; height: 30px; }
.profile-avatar-wrap-sm .profile-avatar { width: 30px; height: 30px; font-size: 13px; }
.profile-avatar-wrap-sm .profile-avatar-img { width: 30px; height: 30px; max-width: 30px; max-height: 30px; position: absolute; inset: 0; }

/* ─── v1.9: Durum Altıgenleri (Aktif / Takılıyor / Meşgul / Gizli) ───────── */
.status-hex {
  position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: #4b5563; border: none; padding: 0; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; font-size: 8px;
}
.status-hex-sm { width: 13px; height: 13px; }

.status-active { background: #57f287; box-shadow: 0 0 6px rgba(87, 242, 135, 0.8); }
.status-idle { background: #ffd93d; box-shadow: 0 0 6px rgba(255, 217, 61, 0.8); }
.status-busy { background: #ff2e46; box-shadow: 0 0 6px rgba(255, 46, 70, 0.8); }
.status-invisible { background: #6b7280; }
.status-offline { background: #4b5563; box-shadow: none; }

.profile-about-section { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; text-align: left; }
.profile-about-text { margin: 0; font-size: 13px; line-height: 1.5; color: #c5c6c7; white-space: pre-wrap; word-break: break-word; }
.profile-about-text.is-empty { color: #6b7280; font-style: italic; }
.about-me-input {
  width: 100%; min-height: 70px; resize: vertical; padding: 10px 12px; border-radius: 12px; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #e2f8f6;
  font-size: 13px; font-family: inherit;
}
.profile-about-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.about-me-count { font-size: 11px; color: #6b7280; }

.status-option-dot { position: static; width: 22px; height: 22px; font-size: 12px; flex-shrink: 0; }

/* ─── v1.5: Profil Modal — Yapı ──────────────────────────────────────────── */
/* Liquid Glass: borderless, saydam, blur'lu — Sauran'ın diğer liquid-glass
   panelleriyle (bildirim/rapor/onay pencereleri) aynı dilde. */
/* Temel .modal-box kuralı max-height:400px + overflow:hidden getiriyor —
   profil paneli (kapak fotoğrafı + avatar + hakkımda + çıkış butonu) bunu
   aştığında altta kalan kısım (Çıkış Yap butonu) sessizce kırpılıp sadece
   1px'lik kırmızı kenarı görünür kalıyordu. max-height'ı büyütüp taşarsa
   içeride kaydırma yapıyoruz; köşe yuvarlaklığı overflow-x:hidden ile korunur. */
.profile-modal-box {
  width: 340px; max-height: 88vh; border-radius: 20px; overflow-x: hidden; overflow-y: auto; border: none;
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Arkadaş Ekle penceresi — köşesiz (yuvarlatılmış) liquid glass */
#friend-add-modal .modal-box {
  border-radius: 20px; overflow: hidden; border: none;
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.friend-add-box { position: relative; padding: 30px 24px 24px; align-items: stretch; max-height: none; }
.friend-add-close-btn {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1); color: #8e9297; font-size: 12px; cursor: pointer; transition: 0.2s;
}
.friend-add-close-btn:hover { color: #ff2e46; border-color: rgba(255, 46, 70, 0.4); background: rgba(255, 46, 70, 0.1); }
.friend-add-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 22px; }
.friend-add-hero-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(102, 252, 241, 0.1); border: 1px solid rgba(102, 252, 241, 0.3);
  box-shadow: 0 0 20px rgba(102, 252, 241, 0.15); margin-bottom: 6px;
}
.friend-add-hero h3 { color: #fff; font-size: 16px; font-weight: bold; }
.friend-add-hero p { color: #8e9297; font-size: 12px; line-height: 1.5; max-width: 260px; }
#friend-add-modal .friend-add-section {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); transition: 0.2s;
}
#friend-add-modal .friend-add-section:focus-within { border-color: rgba(102, 252, 241, 0.45); box-shadow: 0 0 10px rgba(102, 252, 241, 0.15); }
.friend-add-input-icon { color: #66fcf1; font-size: 13px; font-weight: bold; flex-shrink: 0; }
#friend-add-modal .friend-add-section input {
  flex: 1; background: transparent; border: none; color: #eef0f3; padding: 8px 0; font-size: 13px; outline: none;
}
#friend-add-modal .friend-add-section button {
  flex-shrink: 0; padding: 9px 18px; border-radius: 999px; background: #66fcf1; border: none;
  color: #0b0c10; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s;
}
#friend-add-modal .friend-add-section button:hover { box-shadow: 0 0 14px rgba(102, 252, 241, 0.4); transform: translateY(-1px); }
#friend-add-modal .friend-add-error { padding: 10px 4px 0; text-align: center; }

/* Ortak liquid glass pencere tabanı — köşesiz/yuvarlatılmış, saydam, blur'lu.
   Arkadaş Ekle penceresiyle aynı dil; başka pencereler de bu sınıfı kullanabilir. */
.liquid-modal-box {
  border-radius: 20px; overflow: hidden; border: none; position: relative;
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.liquid-modal-close-btn {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1); color: #8e9297; font-size: 12px; cursor: pointer; transition: 0.2s; z-index: 2;
}
.liquid-modal-close-btn:hover { color: #ff2e46; border-color: rgba(255, 46, 70, 0.4); background: rgba(255, 46, 70, 0.1); }
.liquid-modal-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 24px 16px; }
.liquid-modal-hero-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(102, 252, 241, 0.1); border: 1px solid rgba(102, 252, 241, 0.3);
  box-shadow: 0 0 20px rgba(102, 252, 241, 0.15); margin-bottom: 6px;
}
.liquid-modal-hero h3 { color: #fff; font-size: 16px; font-weight: bold; }
.liquid-modal-hero p { color: #8e9297; font-size: 12px; line-height: 1.5; max-width: 260px; }

/* Fotoğraf kırpma penceresi */
.cropper-overlay { z-index: 300; }
.cropper-box { width: 360px; max-width: 92vw; max-height: 92vh; padding-bottom: 20px; align-items: stretch; }
.cropper-hero { padding: 26px 24px 12px; }
.cropper-stage-wrap { display: flex; justify-content: center; padding: 0 20px; }
.cropper-stage { position: relative; overflow: hidden; border-radius: 14px; background: #000; touch-action: none; cursor: grab; user-select: none; }
.cropper-stage:active { cursor: grabbing; }
.cropper-stage canvas { display: block; }
.cropper-guide { position: absolute; inset: 0; pointer-events: none; border: 2px solid rgba(102, 252, 241, 0.7); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.cropper-guide.round { border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.55); }
.cropper-zoom { margin: 16px 28px 4px; accent-color: #66fcf1; }
.cropper-actions { display: flex; gap: 10px; padding: 12px 20px 0; }
.cropper-btn { flex: 1; padding: 11px; border-radius: 999px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.cropper-btn-ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #c5c6c7; }
.cropper-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.3); }
.cropper-btn-primary { background: #66fcf1; border: none; color: #0b0c10; }
.cropper-btn-primary:hover { box-shadow: 0 0 14px rgba(102, 252, 241, 0.4); transform: translateY(-1px); }

/* Arkadaşını Hub'a Davet Et — liquid glass liste */
.hub-invite-friend-box { width: 320px; max-height: 80vh; }
.liquid-friend-list { list-style: none; overflow-y: auto; max-height: 320px; padding: 4px 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.liquid-friend-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); transition: 0.2s;
}
.liquid-friend-row:hover { border-color: rgba(102, 252, 241, 0.35); background: rgba(255, 255, 255, 0.08); }
.liquid-friend-row .msg-avatar-btn { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
.liquid-friend-name { flex: 1; min-width: 0; color: #eef0f3; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liquid-friend-invite-btn {
  flex-shrink: 0; padding: 8px 16px; border-radius: 999px; background: #66fcf1; border: none;
  color: #0b0c10; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.2s;
}
.liquid-friend-invite-btn:hover { box-shadow: 0 0 14px rgba(102, 252, 241, 0.4); transform: translateY(-1px); }
.liquid-friend-invite-btn:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; }
.liquid-friend-empty { padding: 8px 20px 28px; color: #8e9297; font-size: 12px; text-align: center; }

.profile-banner {
  position: relative; padding: 28px 20px 18px; text-align: center;
  background:
    linear-gradient(180deg, rgba(102, 252, 241, 0.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(102, 252, 241, 0.03) 0px, rgba(102, 252, 241, 0.03) 1px, transparent 1px, transparent 3px);
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-banner.has-image {
  background-image: linear-gradient(180deg, rgba(11, 12, 16, 0.1), rgba(11, 12, 16, 0.75)), var(--banner-img);
}

.banner-change-btn {
  position: absolute; top: 10px; left: 10px; padding: 6px 12px; border-radius: 999px;
  color: #c5c6c7; font-size: 11px; font-weight: bold; cursor: pointer;
}

.profile-close-btn { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #8e9297; cursor: pointer; font-size: 13px; line-height: 1; transition: 0.2s; }
.profile-close-btn:hover { color: #66fcf1; border-color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.4); }

.profile-avatar-lg { width: 76px; height: 76px; font-size: 28px; border: 1px solid rgba(102, 252, 241, 0.5); box-shadow: 0 0 14px rgba(102, 252, 241, 0.25), inset 0 0 12px rgba(102, 252, 241, 0.1); }
.profile-banner .profile-avatar-wrap { width: 76px; height: 76px; }
.profile-banner .profile-avatar-img { width: 76px; height: 76px; position: absolute; inset: 0; border: 1px solid rgba(102, 252, 241, 0.5); }
.profile-banner .status-hex { width: 20px; height: 20px; }

.avatar-change-overlay { position: absolute; inset: 0; width: 76px; height: 76px; border-radius: 50%; background: rgba(11, 12, 16, 0.78); display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.2s; z-index: 3; cursor: pointer; }
.profile-avatar-wrap:hover .avatar-change-overlay,
.avatar-change-overlay.show { opacity: 1; }
.avatar-change-overlay button { background: none; border: none; color: #66fcf1; cursor: pointer; font-size: 15px; padding: 4px; }
.avatar-change-overlay button:hover { color: #fff; }
#avatar-remove-btn { color: #ff2e46; }
#avatar-remove-btn:hover { color: #ff6b7d; }

.profile-modal-box-minimal { width: 300px; }
.username-view { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.profile-modal-username { color: #fff; font-size: 17px; letter-spacing: 1px; }
.username-edit-btn { padding: 5px 12px; border-radius: 999px; color: #8e9297; cursor: pointer; font-size: 11px; font-weight: bold; }
.username-edit-btn:hover { color: #66fcf1; }
.username-edit { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.username-edit input { width: 120px; background: #0b0c10; border: 1px solid #66fcf1; color: #66fcf1; padding: 6px 8px; font-size: 13px; outline: none; }

.status-label { display: block; margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #45a29e; }

/* AŞAMA E: "Durumum" liquid glass butonu — status-label'ın yanında, tıklayınca
   aynı status-dropdown'ı açar (statusDotBtn ile aynı davranış, ikinci bir giriş noktası). */
.status-label-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.status-label-row .status-label { margin-top: 0; }
.status-label-btn { padding: 4px 12px; border-radius: 999px; color: #66fcf1; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; cursor: pointer; }
.status-label-btn:hover { color: #fff; }

/* AŞAMA E: avatar üzerindeki çöp kovası artık ayrı bir buton değil, "⋯" ile
   açılan küçük bir liquid-glass menünün içinde. */
.avatar-more-wrap { position: relative; }

/* Lobi üyesi (sahip olmayan) seçenekleri — Bildirimleri sustur / Bildir / Ayrıl */
.hub-member-options-wrap { position: relative; flex-shrink: 0; }
.hub-member-options-wrap .msg-actions-menu { min-width: 210px; }
.hub-member-mute-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; font-size: 12.5px; color: #c5c6c7; }
.avatar-more-menu {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; min-width: 110px; padding: 5px; border-radius: 12px; animation: dropdown-in 0.15s ease-out;
}
.avatar-more-menu button { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: none; border: none; color: #ff2e46; font-size: 12px; cursor: pointer; white-space: nowrap; }
.avatar-more-menu button:hover { background: rgba(255, 46, 70, 0.12); color: #ff6b7d; }

/* ─── v1.5: Durum Açılır Menüsü ──────────────────────────────────────────── */
.status-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; width: 240px; background: #12141a; border: 1px solid rgba(102, 252, 241, 0.35); box-shadow: 0 0 20px rgba(102, 252, 241, 0.15), 0 10px 30px rgba(0,0,0,0.6); z-index: 10; padding: 6px; animation: dropdown-in 0.18s ease-out; flex-direction: column; gap: 2px; }

@keyframes dropdown-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.status-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: transparent; border: 1px solid transparent; cursor: pointer; text-align: left; transition: 0.15s; }
.status-option:hover { background: #1f2833; border-color: rgba(102, 252, 241, 0.3); box-shadow: 0 0 8px rgba(102, 252, 241, 0.12); }
.status-option-dot { position: static; margin-top: 2px; }
.status-option-text { display: flex; flex-direction: column; gap: 1px; }
.status-option-text strong { color: #c5c6c7; font-size: 12px; letter-spacing: 0.5px; }
.status-option-text small { color: #6b7280; font-size: 10px; }

/* ─── v1.5: Sekmeler ──────────────────────────────────────────────────────── */
.profile-tabs { display: flex; border-bottom: 1px solid #1f2833; }
.profile-tab-btn { flex: 1; padding: 11px 8px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #6b7280; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.2s; }
.profile-tab-btn:hover { color: #c5c6c7; }
.profile-tab-btn.active { color: #66fcf1; border-bottom-color: #66fcf1; text-shadow: 0 0 8px rgba(102, 252, 241, 0.5); }

.profile-tab-panel { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 16px; }

.profile-field { width: 100%; }
.profile-field-label { display: block; color: #45a29e; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.profile-field-value { display: block; color: #c5c6c7; font-size: 14px; word-break: break-all; }

/* ─── v1.5: Hakkında ──────────────────────────────────────────────────────── */
.about-view { border: 1px solid #1f2833; padding: 10px 12px; cursor: pointer; transition: 0.2s; position: relative; min-height: 40px; }
.about-view:hover { border-color: rgba(102, 252, 241, 0.4); box-shadow: 0 0 8px rgba(102, 252, 241, 0.1); }
#about-text { color: #c5c6c7; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
#about-text:empty::before { content: 'Henüz bir şey yazmadın.'; color: #4b5563; font-style: italic; }
.about-edit-hint { display: block; margin-top: 6px; color: #4b5563; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0; transition: opacity 0.2s; }
.about-view:hover .about-edit-hint { opacity: 1; }

.about-edit { animation: about-edit-in 0.2s ease-out; }
@keyframes about-edit-in {
  from { opacity: 0; transform: scaleY(0.96); }
  to { opacity: 1; transform: scaleY(1); }
}
#about-textarea { width: 100%; min-height: 80px; resize: vertical; background: #0b0c10; border: 1px solid #66fcf1; color: #c5c6c7; padding: 10px; font-size: 13px; font-family: inherit; outline: none; box-shadow: 0 0 10px rgba(102, 252, 241, 0.15); }
.about-edit-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.about-char-count { color: #4b5563; font-size: 10px; }
.about-edit-actions { display: flex; gap: 8px; }
.about-btn {
  padding: 7px 16px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; border-radius: 999px; transition: 0.2s;
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.about-btn-ghost { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #8e9297; }
.about-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.3); color: #c5c6c7; }
.about-btn-primary { background: rgba(102, 252, 241, 0.08); border: 1px solid rgba(102, 252, 241, 0.35); color: #66fcf1; }
.about-btn-primary:hover { background: rgba(102, 252, 241, 0.22); box-shadow: 0 0 10px rgba(102, 252, 241, 0.3); }

/* border yerine inset box-shadow kullanılıyor: clip-path (kesik köşeler) ile
   birlikte gerçek border kullanmak bazı Android Chrome sürümlerinde border'ın
   şekle düzgün kenetlenmeyip ince kırmızı bir çizgi gibi taşmasına yol açıyordu. */
.logout-btn {
  width: 100%; margin-top: 4px; padding: 10px; background: transparent; border: none;
  box-shadow: inset 0 0 0 1px #ff2e46; color: #ff2e46; cursor: pointer; font-weight: bold;
  text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.logout-btn:hover { background-color: #ff2e46; color: #0b0c10; box-shadow: inset 0 0 0 1px #ff2e46, 0 0 14px rgba(255, 46, 70, 0.5); }

/* ─── v1.5: Gizlilik ──────────────────────────────────────────────────────── */
.privacy-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.privacy-option { width: 100%; text-align: left; padding: 12px 14px; background: #0b0c10; border: 1px solid #1f2833; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; gap: 3px; }
.privacy-option:hover { border-color: rgba(102, 252, 241, 0.4); }
.privacy-option-title { color: #c5c6c7; font-size: 13px; font-weight: bold; }
.privacy-option-desc { color: #6b7280; font-size: 11px; }
.privacy-option.selected { border-color: #66fcf1; box-shadow: 0 0 10px rgba(102, 252, 241, 0.2); }
.privacy-option.selected .privacy-option-title { color: #66fcf1; }
.privacy-option.selected .privacy-option-title::after { content: ' ✓'; }

/* ─── v1.5: Doğrulama Formu ──────────────────────────────────────────────── */
.verify-info { color: #8e9297; font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
#verify-code-input { text-align: center; letter-spacing: 8px; font-size: 18px; }

/* ─── v1.6: Hub Sistemi — Genel ───────────────────────────────────────────── */
.view-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Hub Listesi */
.hub-list-view {
  padding: 28px 32px; overflow-y: auto;
}
/* "Ana Menü" başlığı artık üst çubukta (bkz. .topbar-context-title) — bu satırda
   sadece "+ Yeni Lobi" butonu kaldığı için sağa yaslıyoruz. */
.hub-list-header { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 22px; }
.hub-create-btn {
  padding: 10px 20px; border-radius: 999px; color: #66fcf1; font-weight: bold; letter-spacing: 1px; cursor: pointer;
  background: rgba(102, 252, 241, 0.08); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(102, 252, 241, 0.3); transition: 0.2s;
}
.hub-create-btn:hover { background: rgba(102, 252, 241, 0.22); box-shadow: 0 0 14px rgba(102, 252, 241, 0.3); }
.hub-list-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #6b7280; font-size: 13px; text-align: center; margin-top: 100px; }

/* ─── v1.16: Arkadaşlar Paneli (ana ekran sağı) ───────────────────────────── */
.friends-sidebar {
  position: fixed; top: 60px; right: 0; bottom: 0; width: 270px; max-width: 84vw;
  padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0;
  transform: translateX(0); transition: transform 0.25s ease; z-index: 40;
}
.friends-sidebar:not(.open) { transform: translateX(100%); }
.friends-sidebar-title { color: #fff; font-size: 12px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; }
.friends-sidebar-list { display: flex; flex-direction: column; gap: 6px; }

.friends-sidebar-row {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: 0.15s;
}
.friends-sidebar-row:hover { background: rgba(255, 255, 255, 0.06); }
.friends-sidebar-avatar {
  position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: bold; color: var(--user-color, #66fcf1); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden;
}
.friends-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Avatarın solunda çevrimiçi noktası (yeşil = aktif, gri = çevrimdışı/gizli);
   sağ altta anlık durum altıgeni. Avatar overflow:hidden olduğu için altıgen
   kırpılmasın diye sarmalayıcıya bağlı. */
.friends-sidebar-presence { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #4b5563; }
.friends-sidebar-row.online .friends-sidebar-presence { background: #57f287; box-shadow: 0 0 6px rgba(87, 242, 135, 0.7); }
.friends-sidebar-avatar-wrap { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.friends-sidebar-avatar-wrap .friends-sidebar-status { cursor: default; }
.friends-sidebar-name { flex: 1; min-width: 0; color: #c5c6c7; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-sidebar-row.online .friends-sidebar-name { color: #fff; }
.friends-sidebar-unread {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #66fcf1; color: #0b0c10;
  font-size: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center;
}
.friends-sidebar-empty { color: #4b5563; font-size: 12px; text-align: center; margin-top: 20px; }

.friends-sidebar-toggle-btn {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  width: 26px; height: 52px; border-radius: 12px 0 0 12px; z-index: 41;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14); border-right: none; color: #8e9297; cursor: pointer; transition: right 0.25s ease, color 0.2s;
}
.friends-sidebar-toggle-btn:hover { color: #66fcf1; }
.friends-sidebar-toggle-arrow { display: inline-block; font-size: 13px; transition: transform 0.25s ease; }
.friends-sidebar-toggle-btn.open .friends-sidebar-toggle-arrow { transform: rotate(180deg); }

@media (max-width: 768px) {
  .friends-sidebar.open { transform: translateX(0); }
}
.hub-create-btn-big { width: 88px; height: 88px; border-radius: 50%; background: transparent; border: 2px solid #66fcf1; color: #66fcf1; font-size: 40px; font-weight: 300; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.hub-create-btn-big:hover { background: #66fcf1; color: #0b0c10; box-shadow: 0 0 24px rgba(102, 252, 241, 0.5); transform: scale(1.05); }

.invite-code-display { text-align: center; font-size: 24px; letter-spacing: 4px; color: #66fcf1; background: #0b0c10; border: 1px solid #66fcf1; padding: 16px; font-weight: bold; word-break: break-all; }

.hub-list-grid { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.hub-list-section { margin-bottom: 30px; }
.hub-list-subtitle { color: #45a29e; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.hub-card { background: transparent; border: none; border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: 0.15s; display: flex; flex-direction: row; align-items: center; gap: 14px; }
.hub-card:hover { background: #12141a; }
.hub-card-icon { font-size: 22px; width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #12141a; }
.hub-card-icon.hub-icon-initial, .hub-detail-icon.hub-icon-initial, .hub-create-image-preview.hub-icon-initial {
  font-weight: bold; color: var(--user-color, #66fcf1); background: rgba(255, 255, 255, 0.06);
}
.hub-card:hover .hub-card-icon { background: #171a21; }
.hub-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-card-name { color: #c5c6c7; font-weight: bold; font-size: 14px; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-card-meta { color: #45a29e; font-size: 11px; letter-spacing: 0.5px; }

/* ─── v1.10: Hub Oluşturma — Basit Form ──────────────────────────────────── */
.hub-create-image-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hub-create-image-preview { width: 72px; height: 72px; border-radius: 12px; background-color: #12141a; background-size: cover; background-position: center; border: 1px solid #2a3644; display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; object-fit: cover; }
.hub-create-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.hub-create-image-btn { padding: 6px 14px; background: transparent; border: 1px solid #2a3644; color: #8e9297; font-size: 11px; cursor: pointer; transition: 0.2s; }
.hub-create-image-btn:hover { border-color: #66fcf1; color: #66fcf1; }

/* ─── v1.10: Yan Panel (Arkadaşlar) ──────────────────────────────────────── */
.users-modal-overlay { justify-content: flex-end; background: rgba(0,0,0,0.4); }
.side-panel { width: 320px; height: 100%; background: #1f2833; border-left: 1px solid #2a3644; display: flex; flex-direction: column; animation: slide-in-right 0.2s ease-out; }
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slide-in-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.side-panel-scroll { flex: 1; overflow-y: auto; padding-bottom: 20px; }

.top-friends-list { display: flex; gap: 12px; padding: 0 16px 16px; overflow-x: auto; }
.top-friend-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; width: 56px; }
.top-friend-item .profile-avatar { width: 44px; height: 44px; font-size: 16px; }
.top-friend-item span { color: #8e9297; font-size: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px; }

/* ─── v1.10: Bildirimler ──────────────────────────────────────────────────── */
.notifications-list { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.notification-card { background: #12141a; border: 1px solid #1f2833; border-left: 3px solid #66fcf1; padding: 12px 14px; }
.notification-text { color: #c5c6c7; font-size: 13px; margin-bottom: 10px; }
.notification-actions { display: flex; gap: 8px; }
.notification-actions button { flex: 1; padding: 7px; font-size: 11px; font-weight: bold; cursor: pointer; border: 1px solid; background: transparent; }
.notification-accept { border-color: #57f287; color: #57f287; }
.notification-accept:hover { background: #57f287; color: #0b0c10; }
.notification-decline { border-color: #ff2e46; color: #ff2e46; }
.notification-decline:hover { background: #ff2e46; color: #0b0c10; }
.notifications-empty { padding: 30px 16px; color: #4b5563; font-size: 12px; text-align: center; }

/* ─── Öneri & Görüş Panosu ────────────────────────────────────────────────── */
.feedback-modal-box { width: 380px; display: flex; flex-direction: column; max-height: 80vh; }
.feedback-form { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 8px; }
.feedback-form input[type="text"], .feedback-form textarea { width: 100%; background: #0b0c10; border: 1px solid #2a3644; color: #c5c6c7; padding: 10px; font-size: 13px; outline: none; font-family: inherit; box-sizing: border-box; }
.feedback-form input[type="text"]:focus, .feedback-form textarea:focus { border-color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.15); }
.feedback-form textarea { resize: vertical; min-height: 60px; }
.feedback-sort-row { display: flex; gap: 8px; padding: 10px 16px 4px; }
.feedback-sort-btn { flex: 1; background: transparent; border: 1px solid #1f2833; color: #8e9297; font-size: 11px; padding: 6px; cursor: pointer; }
.feedback-sort-btn:hover { border-color: #66fcf1; color: #c5c6c7; }
.feedback-sort-active { border-color: #66fcf1; color: #66fcf1; }
.feedback-list { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.feedback-card { background: #12141a; border: 1px solid #1f2833; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.feedback-vote-btn { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 1px solid #2a3644; color: #8e9297; padding: 6px 10px; cursor: pointer; min-width: 40px; }
.feedback-vote-btn:hover { border-color: #66fcf1; color: #66fcf1; }
.feedback-vote-btn.feedback-voted { border-color: #66fcf1; color: #66fcf1; background: rgba(102, 252, 241, 0.08); }
.feedback-vote-count { font-weight: bold; font-size: 13px; }
.feedback-vote-arrow { font-size: 11px; }
.feedback-content { flex: 1; min-width: 0; }
.feedback-title { color: #c5c6c7; font-size: 13px; font-weight: bold; margin-bottom: 4px; word-break: break-word; }
.feedback-body { color: #8e9297; font-size: 12px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.feedback-meta { color: #4b5563; font-size: 10px; margin-top: 6px; }
.feedback-empty { padding: 30px 16px; color: #4b5563; font-size: 12px; text-align: center; }

/* ─── v1.10: Diğer ────────────────────────────────────────────────────────── */
.forgot-link { color: #6b7280; font-size: 11px; text-decoration: underline; background: none; border: none; cursor: pointer; }
.forgot-link:hover { color: #66fcf1; }

/* ─── v1.6: Hub Oluşturma Sihirbazı ───────────────────────────────────────── */
.hub-create-box { width: 460px; max-width: 90vw; }
.hub-create-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; }
.hub-create-title { color: #8e9297; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }

.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.template-card { background: #12141a; border: 1px solid #1f2833; padding: 18px 14px; text-align: center; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.template-card:hover { border-color: #66fcf1; box-shadow: 0 0 16px rgba(102, 252, 241, 0.15); transform: translateY(-2px); }
.template-card-icon { font-size: 28px; }
.template-card-title { color: #c5c6c7; font-weight: bold; font-size: 13px; letter-spacing: 0.5px; }
.template-card-desc { color: #6b7280; font-size: 11px; }

.subtype-list { display: flex; flex-direction: column; gap: 8px; }
.subtype-option { background: #12141a; border: 1px solid #1f2833; padding: 13px 16px; text-align: left; color: #c5c6c7; font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.subtype-option:hover { border-color: #66fcf1; box-shadow: 0 0 10px rgba(102, 252, 241, 0.12); }

.hub-back-link { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; background: none; border: none; padding: 0; text-align: left; width: fit-content; }
.hub-back-link:hover { color: #66fcf1; }

.hub-name-input { width: 100%; background: #0b0c10; border: 1px solid #2a3644; color: #66fcf1; padding: 12px; font-size: 14px; outline: none; }
.hub-name-input:focus { border-color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.15); }

.role-builder-list { display: flex; flex-direction: column; gap: 8px; }
.role-builder-row { display: flex; align-items: center; gap: 8px; background: #12141a; border: 1px solid #1f2833; padding: 8px 10px; }
.role-builder-row input[type="text"] { flex: 1; background: transparent; border: none; color: #c5c6c7; font-size: 13px; outline: none; }
.role-builder-row .role-icon-input { width: 34px; flex: none; text-align: center; }
.role-builder-row .role-slot-input { width: 46px; flex: none; text-align: center; background: #0b0c10; border: 1px solid #1f2833; color: #45a29e; padding: 4px; }
.role-remove-btn { background: none; border: none; color: #4b5563; cursor: pointer; font-size: 13px; }
.role-remove-btn:hover { color: #ff2e46; }
.role-add-btn { padding: 9px; background: transparent; border: 1px dashed #2a3644; color: #6b7280; font-size: 12px; cursor: pointer; transition: 0.2s; }
.role-add-btn:hover { border-color: #66fcf1; color: #66fcf1; }

.hub-create-submit { width: 100%; padding: 12px; background: transparent; border: 1px solid #66fcf1; color: #66fcf1; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s; margin-top: 4px; }
.hub-create-submit:hover { background: #66fcf1; color: #0b0c10; box-shadow: 0 0 14px rgba(102, 252, 241, 0.4); }
.hub-create-error { color: #ff2e46; font-size: 12px; text-align: center; }

/* ─── v1.6: Hub Detay ─────────────────────────────────────────────────────── */
.hub-detail-view { flex-direction: row; position: relative; }
.hub-detail-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* Üye paneli: her ekran boyutunda varsayılan olarak kapalı, sağdan kayan panel */
.hub-detail-side {
  position: fixed; top: 60px; right: 0; bottom: 0; width: 260px; max-width: 82vw;
  border-left: 1px solid #1f2833; background: #101319; padding: 18px 14px;
  display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.25s ease; z-index: 60;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
.hub-detail-side.open { transform: translateX(0); }
.hub-side-backdrop { display: none; }
.hub-side-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 55; }

.hub-members-toggle-btn {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  width: 26px; height: 52px; border-radius: 12px 0 0 12px; z-index: 61;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14); border-right: none;
  color: #8e9297; cursor: pointer; transition: right 0.25s ease, color 0.2s;
}
.hub-members-toggle-btn:hover { color: #66fcf1; }
.hub-members-toggle-arrow { display: inline-block; font-size: 13px; transition: transform 0.25s ease; }
.hub-members-toggle-btn.open .hub-members-toggle-arrow { transform: rotate(180deg); }

/* ─── v1.16: Sesli Odalar Paneli (sol taraf) ─────────────────────────────── */
.hub-voice-rooms-side {
  position: fixed; top: 60px; left: 0; bottom: 0; width: 260px; max-width: 82vw;
  border-right: 1px solid #1f2833; background: #101319; padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
  transform: translateX(-100%); transition: transform 0.25s ease; z-index: 60;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}
.hub-voice-rooms-side.open { transform: translateX(0); }

.hub-voice-rooms-toggle-btn {
  position: fixed; top: 50%; left: 0; transform: translateY(-50%);
  width: 26px; height: 130px; border-radius: 0 12px 12px 0; z-index: 61;
  display: flex; align-items: center; justify-content: center; padding: 8px 0;
  background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14); border-left: none;
  color: #8e9297; cursor: pointer; transition: left 0.25s ease, color 0.2s;
}
.hub-voice-rooms-toggle-btn span {
  writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: bold; letter-spacing: 1.5px; white-space: nowrap;
}
.hub-voice-rooms-toggle-btn:hover { color: #66fcf1; }
.hub-voice-rooms-toggle-btn.has-active { color: #57f287; border-color: rgba(87, 242, 135, 0.4); }

.hub-voice-rooms-list { display: flex; flex-direction: column; gap: 8px; }
.hub-voice-room-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.2s;
}
.hub-voice-room-row:hover { border-color: rgba(102, 252, 241, 0.35); }
.hub-voice-room-row.active { background: rgba(87, 242, 135, 0.1); border-color: rgba(87, 242, 135, 0.4); }
.hub-voice-room-icon { font-size: 15px; flex-shrink: 0; }
.hub-voice-room-info { flex: 1; min-width: 0; }
.hub-voice-room-name { color: #fff; font-size: 12px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-voice-room-count { color: #6b7280; font-size: 10px; }
.hub-voice-room-row.active .hub-voice-room-count { color: #57f287; }
.hub-voice-room-delete { flex-shrink: 0; background: none; border: none; color: #4b5563; font-size: 11px; cursor: pointer; padding: 4px; }
.hub-voice-room-delete:hover { color: #ff2e46; }
.hub-voice-room-leave-btn {
  margin: -4px 0 4px; padding: 7px; border-radius: 10px; width: 100%; text-align: center; cursor: pointer;
  background: rgba(255, 46, 70, 0.1); border: 1px solid rgba(255, 46, 70, 0.35); color: #ff6b7d; font-size: 11px; font-weight: bold; transition: 0.2s;
}
.hub-voice-room-leave-btn:hover { background: rgba(255, 46, 70, 0.22); }
.hub-voice-room-add-btn {
  padding: 9px; border-radius: 12px; font-weight: bold; font-size: 12px; color: #66fcf1; cursor: pointer; text-align: center;
}

.hub-in-room-pill {
  display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(87, 242, 135, 0.12); border: 1px solid rgba(87, 242, 135, 0.4); color: #57f287; font-size: 11px; font-weight: bold;
}
.hub-in-room-count { color: #c5c6c7; font-weight: bold; }
.hub-in-room-dot { width: 7px; height: 7px; border-radius: 50%; background: #57f287; animation: mic-pulse-cyan 1.4s ease-in-out infinite; }

/* ─── 13A: Sesli oda presence (üye listesi, mikrofon, konuşan) ─────────────── */
.hub-voice-room-side { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; }
.hub-voice-room-count { margin-top: auto; }
.hub-voice-room-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  color: #c5c6c7; font-size: 10px; font-weight: bold; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.hub-voice-room-toggle:hover { border-color: rgba(102, 252, 241, 0.4); color: #66fcf1; }
.hub-voice-room-chevron { display: inline-block; font-size: 10px; transition: transform 0.25s ease; }
.hub-voice-room-toggle.open .hub-voice-room-chevron { transform: rotate(90deg); }

.hub-voice-room-members-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.28s ease, opacity 0.2s ease; }
.hub-voice-room-members-wrap.open { grid-template-rows: 1fr; opacity: 1; }
.hub-voice-room-members { overflow: hidden; min-height: 0; }
.hub-voice-room-members-list { display: flex; flex-direction: column; gap: 6px; padding: 2px 4px 6px; }
.hub-voice-room-members-empty { color: #6b7280; font-size: 11px; text-align: center; padding: 8px 0; }
.hub-voice-room-member {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.hub-voice-room-member.is-self { background: rgba(102, 252, 241, 0.06); border-color: rgba(102, 252, 241, 0.2); }
.hub-voice-member-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: bold; color: var(--user-color, #66fcf1); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.hub-voice-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hub-voice-member-name { flex: 1; min-width: 0; color: #c5c6c7; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-self-tag { color: #66fcf1; font-style: normal; font-size: 0.9em; opacity: 0.8; }

/* Mikrofon / hoparlör simgeleri: köşesiz, saydam liquid glass. Kapalıyken kırmızı çapraz çizgi,
   konuşurken mikrofon simgesinin çevresinde yeşil ışık. */
.voice-status { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.voice-icon-btn {
  position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #c5c6c7; background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: 0.2s;
}
.voice-icon-btn.interactive { cursor: pointer; }
.voice-icon-btn.interactive:hover { border-color: rgba(102, 252, 241, 0.5); background: rgba(102, 252, 241, 0.12); }
.voice-icon-btn.off { color: #ff6b7d; border-color: rgba(255, 46, 70, 0.45); }
.voice-icon-btn.off::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; border-radius: 2px; background: #ff2e46;
  transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 0 4px rgba(255, 46, 70, 0.6);
}
.voice-icon-btn.speaking {
  color: #57f287; border-color: rgba(87, 242, 135, 0.9); background: rgba(87, 242, 135, 0.14);
  box-shadow: 0 0 0 2px rgba(87, 242, 135, 0.3), 0 0 14px rgba(87, 242, 135, 0.75);
}
.call-hub-room-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.call-hub-room-person.is-self .call-hub-room-avatar { border-color: rgba(102, 252, 241, 0.45); }
.call-hub-room-person .voice-status { margin-top: 2px; }
#call-mute-btn { padding: 8px 16px; background: transparent; border: 1px solid #57f287; color: #57f287; font-weight: bold; font-size: 12px; cursor: pointer; transition: 0.2s; }
#call-mute-btn:hover { background: #57f287; color: #0b0c10; }
#call-mute-btn.muted { border-color: #ff2e46; color: #ff2e46; }
#call-mute-btn.muted:hover { background: #ff2e46; color: #0b0c10; }
.voice-room-preview-avatar { overflow: hidden; }
.voice-room-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.voice-room-preview-name { flex: 1; min-width: 0; }

/* ─── v1.17: Sesli Oda Önizleme / Katıl Paneli ────────────────────────────── */
.voice-room-preview-box { width: 320px; max-width: 92vw; display: flex; flex-direction: column; max-height: 70vh; }
.voice-room-preview-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.voice-room-preview-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; min-height: 40px; }
.voice-room-preview-empty { color: #4b5563; font-size: 12px; text-align: center; padding: 18px 0; }
.voice-room-preview-person { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.voice-room-preview-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold; color: var(--user-color, #66fcf1); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.voice-room-preview-name { color: #c5c6c7; font-size: 13px; }
.voice-room-preview-join-btn {
  padding: 12px; border-radius: 999px; text-align: center; font-weight: bold; font-size: 13px; letter-spacing: 0.5px;
  color: #57f287; background: rgba(87, 242, 135, 0.1); border: 1px solid rgba(87, 242, 135, 0.4); cursor: pointer; transition: 0.2s;
}
.voice-room-preview-join-btn:hover { background: rgba(87, 242, 135, 0.22); box-shadow: 0 0 14px rgba(87, 242, 135, 0.25); }

.hub-detail-header { display: flex; align-items: center; gap: 10px; padding: 14px 25px; border-bottom: 1px solid var(--border-soft); background: var(--bg-app); }
.hub-back-btn {
  display: flex; align-items: center; gap: 6px; border-radius: 999px; color: #8e9297; font-size: 12px; font-weight: bold; padding: 8px 16px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12); transition: 0.2s;
}
.hub-back-btn:hover { color: #66fcf1; border-color: rgba(102, 252, 241, 0.4); box-shadow: 0 0 8px rgba(102, 252, 241, 0.15); }
.hub-back-arrow { font-size: 13px; }

.hub-title-pill {
  display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 18px; flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hub-detail-icon { font-size: 18px; flex-shrink: 0; }
.hub-detail-header h2 { color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.hub-detail-count { color: #45a29e; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }

.hub-call-btn, .hub-icon-btn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12); color: #c5c6c7; transition: 0.2s;
}
.hub-call-btn:hover, .hub-icon-btn:hover { border-color: rgba(102, 252, 241, 0.4); color: #66fcf1; box-shadow: 0 0 10px rgba(102, 252, 241, 0.15); }
.hub-call-btn.in-call { background: rgba(255, 46, 70, 0.16); border-color: rgba(255, 46, 70, 0.5); color: #ff2e46; }

.hub-feed { flex: 1; overflow-y: auto; padding: 20px 25px; display: flex; flex-direction: column; gap: 14px; }
.hub-feed-empty { color: #4b5563; font-size: 13px; text-align: center; margin-top: 40px; }

.hub-composer { border: none; background: transparent; box-shadow: none; padding: 16px 25px; position: relative; }
.hub-scroll-bottom-btn {
  position: absolute; top: -48px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #66fcf1; cursor: pointer; z-index: 5; animation: dropdown-in 0.18s ease-out;
}
.hub-scroll-bottom-btn svg { width: 16px; height: 16px; }

.hub-start-btn {
  padding: 9px 16px; border-radius: 999px; color: #8e9297; font-size: 12px; font-weight: bold; letter-spacing: 0.5px;
  cursor: pointer; transition: 0.2s; margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.hub-start-btn:hover { border-color: rgba(102, 252, 241, 0.4); color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.15); }
.hub-start-menu { position: absolute; bottom: 60px; left: 25px; background: #0d0f14; border: 1px solid rgba(102, 252, 241, 0.35); box-shadow: 0 0 20px rgba(102, 252, 241, 0.15), 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; padding: 6px; z-index: 10; animation: dropdown-in 0.18s ease-out; }
.hub-start-menu button { background: none; border: none; color: #c5c6c7; font-size: 13px; padding: 9px 14px; text-align: left; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.hub-start-menu button:hover { background: #1f2833; color: #66fcf1; }
#hub-chat-form { display: flex; gap: 12px; }

/* ─── Liquid Glass temel stili ────────────────────────────────────────────── */
.liquid-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: 0.2s;
}
.liquid-glass:hover { background: rgba(102, 252, 241, 0.1); border-color: rgba(102, 252, 241, 0.4); }

/* ─── v1.14: Birleşik Mesaj Kutusu (Ekle + Yaz + Dikte + Sesli Mesaj) ────── */
.composer-form { display: flex; gap: 10px; align-items: center; }
.composer-input-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
  background-color: var(--bg-surface-2); border: none; border-radius: 22px;
  padding: 4px 6px 4px 4px; transition: background-color 0.2s;
}
.composer-input-box input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; padding: 9px 6px; color: #66fcf1; font-size: 14px; }
.composer-attach-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #1f2833; color: #8e9297; font-size: 18px; cursor: pointer; transition: 0.2s;
}
.composer-attach-btn:hover { border-color: #66fcf1; color: #66fcf1; }

.composer-attach-wrap { position: relative; flex-shrink: 0; }
.composer-attach-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; min-width: 180px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 14px; animation: dropdown-in 0.18s ease-out;
}
.composer-attach-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: none; border: none; color: #c5c6c7; font-size: 13px; cursor: pointer; text-align: left; transition: 0.15s; white-space: nowrap;
}
.composer-attach-menu button:hover { background: rgba(102, 252, 241, 0.1); color: #66fcf1; }

.sticker-picker {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px;
  border-radius: 16px; width: 220px; animation: dropdown-in 0.18s ease-out;
}
.sticker-picker button {
  background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1;
  padding: 8px; border-radius: 10px; transition: 0.15s;
}
.sticker-picker button:hover { background: rgba(102, 252, 241, 0.12); transform: scale(1.1); }

.hub-msg-sticker, .dm-msg-sticker {
  font-size: 64px; line-height: 1; background: none !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}
.dm-msg:has(.dm-msg-sticker) {
  background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

.composer-send-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-left: 2px; font-size: 15px; color: #66fcf1; cursor: pointer; transform: rotate(0deg);
  background: rgba(102, 252, 241, 0.14);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(102, 252, 241, 0.4);
  box-shadow: 0 2px 10px rgba(102, 252, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: 0.2s;
}
.composer-send-btn:hover { background: rgba(102, 252, 241, 0.28); box-shadow: 0 2px 14px rgba(102, 252, 241, 0.3); }

/* ─── v1.11: Mikrofon Butonları (Dikte / Sesli Mesaj) ────────────────────── */
.mic-btn {
  padding: 0 !important; width: 34px !important; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important; border: 1px solid #1f2833 !important; color: #8e9297;
  cursor: pointer; transition: 0.2s; text-transform: none !important; letter-spacing: normal !important;
}
.mic-btn svg { width: 16px; height: 16px; }
.mic-btn:hover { border-color: #66fcf1 !important; color: #66fcf1; background: transparent !important; box-shadow: none !important; }
.mic-btn.recording { border-color: #ff2e46 !important; color: #ff2e46; background: rgba(255, 46, 70, 0.1) !important; animation: mic-pulse 1.2s ease-in-out infinite; }
.mic-btn.listening { border-color: #66fcf1 !important; color: #66fcf1; background: rgba(102, 252, 241, 0.1) !important; animation: mic-pulse-cyan 1.2s ease-in-out infinite; }
.composer-icon-btn { border-radius: 50%; }

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 46, 70, 0.5); }
  50% { box-shadow: 0 0 12px rgba(255, 46, 70, 0.8); }
}
@keyframes mic-pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 rgba(102, 252, 241, 0.4); }
  50% { box-shadow: 0 0 12px rgba(102, 252, 241, 0.7); }
}

/* Sesli Mesaj Baloncuğu */
.voice-msg-card {
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid rgba(102, 252, 241, 0.5); border-radius: 14px;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px; width: fit-content; min-width: 200px;
}
.voice-msg-card audio { height: 32px; flex: 1; }
.voice-msg-duration { color: #45a29e; font-size: 11px; flex-shrink: 0; }
.dm-msg-mine .voice-msg-card { border-left-color: #66fcf1; }

.hub-side-title { color: #45a29e; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.hub-role-list, .hub-member-list { display: flex; flex-direction: column; gap: 6px; }

.hub-role-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #12141a; border: 1px solid #1f2833; cursor: pointer; transition: 0.2s; }
.hub-role-row:hover { border-color: rgba(102, 252, 241, 0.4); }
.hub-role-row.mine { border-color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.15); }
.hub-role-row.full { opacity: 0.5; cursor: not-allowed; }
.hub-role-icon { font-size: 13px; }
.hub-role-info { flex: 1; min-width: 0; }
.hub-role-name { color: #c5c6c7; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; }
.hub-role-members { color: #6b7280; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-role-slots { color: #45a29e; font-size: 10px; flex-shrink: 0; }
.hub-add-role-btn { width: 100%; margin-top: 8px; padding: 8px; background: transparent; border: 1px dashed #2a3644; color: #6b7280; font-size: 11px; cursor: pointer; }
.hub-add-role-btn:hover { border-color: #66fcf1; color: #66fcf1; }

.hub-member-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition: 0.15s;
}
.hub-member-row:hover { border-color: rgba(102, 252, 241, 0.3); background: rgba(102, 252, 241, 0.06); }
.hub-member-avatar-wrap { position: relative; flex-shrink: 0; }
.hub-member-avatar-wrap .msg-avatar-btn { width: 28px; height: 28px; font-size: 11px; }
.hub-member-dot { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: #57f287; border: 2px solid #101319; flex-shrink: 0; }
.hub-member-name { color: #c5c6c7; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.hub-member-name:hover { color: #66fcf1; }

.hub-member-menu-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.hub-member-menu-btn { background: none; border: none; color: #6b7280; font-size: 14px; cursor: pointer; padding: 2px 6px; }
.hub-member-menu-btn:hover { color: #c5c6c7; }
.hub-member-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 150px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 12px; animation: dropdown-in 0.15s ease-out;
}
.hub-member-menu button {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: none; border: none;
  color: #c5c6c7; font-size: 12px; cursor: pointer; text-align: left; white-space: nowrap; transition: 0.15s;
}
.hub-member-menu button:hover { background: rgba(102, 252, 241, 0.1); color: #66fcf1; }
.hub-member-menu .hub-member-menu-danger:hover { background: rgba(255, 46, 70, 0.12); color: #ff2e46; }

/* Hub Sohbet / Anket / Paylaşım Kartları */
.hub-msg { align-self: flex-start; max-width: 78%; width: fit-content; position: relative; padding: 4px 10px; border-radius: 6px; transition: background 0.12s; display: flex; gap: 8px; align-items: flex-start; }
.hub-msg.msg-mine { align-self: flex-end; flex-direction: row-reverse; }
.hub-msg.msg-mine .header { flex-direction: row-reverse; }
.hub-msg.msg-mine .hub-msg-body { text-align: right; }
.hub-msg.msg-mine .hub-msg-actions { right: auto; left: 6px; }
.hub-msg:hover { background: rgba(255,255,255,0.025); }
.hub-msg .header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.hub-msg .username { color: #66fcf1; font-weight: bold; font-size: 13px; }
.hub-msg .time { color: #45a29e; font-size: 10px; opacity: 0.6; flex-shrink: 0; }
.hub-msg .edited-tag { color: #4b5563; font-size: 10px; }
.hub-msg-body { flex: 1; min-width: 0; }

/* Mesaj avatarı (Hub + DM ortak) */
.msg-avatar-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 1px solid #1f2833; background: #12141a; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #66fcf1;
  font-weight: bold; font-size: 13px; transition: 0.2s;
}
.msg-avatar-btn:hover { border-color: #66fcf1; box-shadow: 0 0 6px rgba(102, 252, 241, 0.3); }
.msg-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

.hub-msg-text { color: #c5c6c7; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.hub-msg-deleted { color: #4b5563; font-size: 13px; font-style: italic; }

.hub-msg-actions {
  position: absolute; top: -10px; right: 6px; display: none; gap: 2px;
  background: rgba(20, 22, 28, 0.75); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 3px;
}
@media (hover: hover) {
  .hub-msg:hover .hub-msg-actions { display: flex; }
}
.hub-msg.show-actions .hub-msg-actions { display: flex; }
.hub-msg-actions button { background: none; border: none; color: #8e9297; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 999px; }
.hub-msg-actions button:hover { color: #66fcf1; background: rgba(102, 252, 241, 0.12); }

/* ─── AŞAMA D: Mesaj Aksiyonları Menüsü (⋯) — liquid glass, kompakt ────────── */
.msg-actions-bar { position: absolute; }
.msg-actions-menu, .msg-reaction-picker {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  animation: dropdown-in 0.15s ease-out;
}
.msg-actions-menu {
  display: none; flex-direction: column; min-width: 190px; padding: 6px; border-radius: 14px;
}
.msg-actions-menu button {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 10px; width: 100%;
  background: none; border: none; color: #c5c6c7; font-size: 12.5px; cursor: pointer; text-align: left; white-space: nowrap; transition: 0.15s;
}
.msg-actions-menu button:hover { background: rgba(102, 252, 241, 0.1); color: #66fcf1; }
.msg-actions-menu button.hub-member-menu-danger:hover { background: rgba(255, 46, 70, 0.12); color: #ff2e46; }
.msg-actions-menu-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 6px; }

.msg-reaction-picker { display: none; gap: 2px; padding: 6px 8px; border-radius: 999px; }
.msg-reaction-picker button { background: none; border: none; font-size: 17px; cursor: pointer; padding: 3px 5px; border-radius: 999px; transition: 0.15s; line-height: 1; }
.msg-reaction-picker button:hover { background: rgba(102, 252, 241, 0.15); transform: scale(1.15); }

/* ─── Tepki (reaction) rozetleri ────────────────────────────────────────────── */
.msg-reactions-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.msg-reaction-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #c5c6c7; transition: 0.15s;
}
.msg-reaction-pill:hover { background: rgba(102, 252, 241, 0.12); }
.msg-reaction-pill.mine { background: rgba(102, 252, 241, 0.16); border-color: rgba(102, 252, 241, 0.4); color: #66fcf1; }
.msg-reaction-pill span { font-weight: bold; }

/* ─── Yanıt (reply) önizlemesi — composer üstü + mesaj içi alıntı ──────────── */
.composer-reply-preview {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; margin: 0 25px 8px; border-radius: 14px; font-size: 12px; color: #c5c6c7;
}
.dm-modal-box .composer-reply-preview { margin: 0 18px 8px; }
.composer-reply-preview-text { display: flex; flex-direction: column; gap: 2px; color: #66fcf1; font-weight: bold; }
.composer-reply-preview-content { color: #9ca3af; font-weight: normal; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.composer-reply-preview button { background: none; border: none; color: #8e9297; font-size: 13px; cursor: pointer; padding: 4px; }
.composer-reply-preview button:hover { color: #ff2e46; }

.msg-reply-quote {
  display: flex; flex-direction: column; gap: 1px; padding: 5px 10px; margin-bottom: 4px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border-left: 2px solid #66fcf1; font-size: 11.5px; transition: 0.15s;
}
.msg-reply-quote:hover { background: rgba(102, 252, 241, 0.1); }
.msg-reply-quote-user { color: #66fcf1; font-weight: bold; }
.msg-reply-quote-text { color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

.msg-pinned-tag { color: #66fcf1; font-size: 10px; font-weight: bold; }
.msg-forwarded-tag { color: #6b7280; font-size: 10px; font-weight: bold; margin-bottom: 3px; opacity: 0.85; }

@keyframes msg-jump-flash {
  0%, 100% { background: transparent; }
  30% { background: rgba(102, 252, 241, 0.18); }
}
.msg-jump-highlight { animation: msg-jump-flash 1.4s ease-out; border-radius: 8px; }

.hub-msg-edit-box { display: flex; gap: 8px; align-items: center; }
.hub-msg-edit-box input { flex: 1; background: #0b0c10; border: 1px solid #66fcf1; color: #c5c6c7; padding: 7px 10px; font-size: 13px; outline: none; }
.hub-msg-edit-box button { padding: 6px 10px; font-size: 11px; font-weight: bold; cursor: pointer; border: 1px solid #66fcf1; background: transparent; color: #66fcf1; }
.hub-msg-edit-box button:hover { background: #66fcf1; color: #0b0c10; }

.hub-poll-card, .hub-share-card {
  background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: none; border-radius: 16px; padding: 14px 16px; min-width: 260px;
}
.hub-poll-question { color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 12px; }
.hub-poll-option { position: relative; margin-bottom: 8px; padding: 9px 12px; background: rgba(255, 255, 255, 0.04); border: none; border-radius: 12px; cursor: pointer; overflow: hidden; transition: 0.2s; }
.hub-poll-option:hover { background: rgba(102, 252, 241, 0.08); }
.hub-poll-option.voted { background: rgba(102, 252, 241, 0.12); }
.hub-poll-option-fill { position: absolute; inset: 0; background: rgba(102, 252, 241, 0.12); z-index: 0; transition: width 0.3s ease; }
.hub-poll-option-row { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #c5c6c7; font-size: 12px; }
.hub-poll-total { color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.hub-share-content { color: #c5c6c7; font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.hub-share-url { color: #66fcf1; font-size: 12px; word-break: break-all; }
.hub-share-tag { color: #45a29e; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: block; }

/* Anket / Paylaşım Oluşturma Modalları */
.poll-create-box, .share-create-box { width: 380px; max-width: 90vw; }
.poll-create-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.poll-create-body input[type="text"], .poll-create-body textarea { width: 100%; background: #0b0c10; border: 1px solid #2a3644; color: #c5c6c7; padding: 11px; font-size: 13px; outline: none; font-family: inherit; }
.poll-create-body input[type="text"]:focus, .poll-create-body textarea:focus { border-color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.15); }
.poll-create-body textarea { min-height: 70px; resize: vertical; }
.poll-options-list { display: flex; flex-direction: column; gap: 8px; }
.poll-option-row { display: flex; gap: 8px; align-items: center; }
.poll-option-row input { flex: 1; }
.poll-submit-btn { width: 100%; padding: 11px; margin-top: 4px; }

/* ─── v1.15: Hub Ayarları Modalı ──────────────────────────────────────────── */
.hub-settings-box { width: 380px; max-width: 92vw; max-height: 82vh; }
.hub-settings-body { overflow-y: auto; }
/* Lobi ayarları: ekranın sağında, tam boyda açılan köşesiz liquid glass panel. */
#hub-settings-modal { justify-content: flex-end; align-items: stretch; }
.hub-settings-panel {
  width: 400px; max-width: 100vw; height: 100%; max-height: none; border-radius: 0; border: none;
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
  animation: dm-panel-in 0.22s ease-out;
}
.hub-settings-panel .modal-header { border-bottom-color: rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.hub-settings-panel .hub-settings-body { flex: 1; min-height: 0; }
#hub-settings-bans-section .hub-settings-action-btn { width: 100%; }
.settings-blocked-list-tall { max-height: none; }
#hub-settings-pick-view .settings-blocked-row, #hub-settings-bans-view .settings-blocked-row { align-items: center; }
#hub-settings-pick-view .settings-blocked-avatar, #hub-settings-bans-view .settings-blocked-avatar { width: 36px; height: 36px; font-size: 14px; }
#hub-settings-pick-view .settings-blocked-name, #hub-settings-bans-view .settings-blocked-name { font-size: 13px; font-weight: bold; }
.hub-settings-back-btn {
  align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #c5c6c7; font-size: 12px; font-weight: bold; transition: 0.2s;
}
.hub-settings-back-btn:hover { color: #66fcf1; border-color: rgba(102, 252, 241, 0.4); }

.hub-settings-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.hub-settings-divider { height: 1px; background: #1f2833; margin: 8px 0; }
.hub-settings-action-btn {
  padding: 10px 14px; text-align: left; font-size: 12px; font-weight: bold; letter-spacing: 0.3px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: #c5c6c7; transition: 0.2s;
}
.hub-settings-action-btn:hover { border-color: rgba(102, 252, 241, 0.4); color: #66fcf1; }
.hub-settings-action-btn.hub-settings-danger { color: #ff8a95; }
.hub-settings-action-btn.hub-settings-danger:hover { border-color: rgba(255, 46, 70, 0.5); color: #ff2e46; }

.call-overlay { position: fixed; inset: 0; background: #0b0c10; z-index: 200; display: flex; flex-direction: column; }
.call-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 25px; background: #12141a; border-bottom: 1px solid #1f2833; }
.call-header span { color: #66fcf1; font-weight: bold; letter-spacing: 0.5px; font-size: 14px; }
#call-leave-btn { padding: 8px 18px; background: transparent; border: 1px solid #ff2e46; color: #ff2e46; font-weight: bold; font-size: 12px; cursor: pointer; transition: 0.2s; }
#call-leave-btn:hover { background: #ff2e46; color: #0b0c10; }
#call-screenshare-btn { padding: 8px 16px; background: transparent; border: 1px solid #66fcf1; color: #66fcf1; font-weight: bold; font-size: 12px; cursor: pointer; transition: 0.2s; }
#call-screenshare-btn:hover { background: #66fcf1; color: #0b0c10; }
#call-screenshare-btn.active { background: #66fcf1; color: #0b0c10; }
#call-minimize-btn { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: transparent; border: 1px solid #2a3644; color: #8e9297; font-size: 12px; cursor: pointer; transition: 0.2s; }
#call-minimize-btn:hover { border-color: #66fcf1; color: #66fcf1; }

/* ─── v1.15/v1.24: Küçültülmüş Arama Çubuğu — artık altta yüzen bir kapsül değil,
   üstte sabit, yeşil çizgili bir şerit. Composer'ın gönder butonuyla asla çakışmaz
   ve arama devam ederken her ekranda (mobil+masaüstü) her zaman görünür kalır. ─── */
body.call-mini-active { padding-top: 42px; }
.call-mini-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; height: 42px;
  background: rgba(20, 22, 28, 0.85); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 2px solid #57f287; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.call-mini-dot { width: 9px; height: 9px; border-radius: 50%; background: #57f287; flex-shrink: 0; animation: mic-pulse-cyan 1.4s ease-in-out infinite; }
.call-mini-name { color: #fff; font-size: 12.5px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }
.call-mini-duration { color: #57f287; font-size: 12px; font-weight: bold; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.call-mini-bar { justify-content: flex-start; }
#call-mini-expand-btn { margin-left: auto; }
.call-mini-bar button { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #c5c6c7; font-size: 11px; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.call-mini-bar button:hover { color: #66fcf1; border-color: rgba(102, 252, 241, 0.4); }
#call-mini-leave-btn:hover { color: #ff2e46; border-color: rgba(255, 46, 70, 0.5); }
.call-duration-text { color: #57f287; font-size: 12px; font-weight: bold; font-variant-numeric: tabular-nums; }
#call-header .call-duration-text { margin-right: auto; }

@media (max-width: 768px) {
  body.call-mini-active { padding-top: 38px; }
  .call-mini-bar { height: 38px; padding: 6px 12px; gap: 8px; }
  .call-mini-name { max-width: 35vw; font-size: 11.5px; }
  .call-mini-duration { font-size: 11px; }
}
.call-frame-container { flex: 1; }
.call-frame-container iframe { width: 100%; height: 100%; border: none; }

/* ─── v1.16: DM Arama — Sadece Profil Görünümü ───────────────────────────── */
.call-dm-profile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.call-dm-avatar-wrap { position: relative; width: 120px; height: 120px; }
.call-dm-avatar {
  width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: bold; color: var(--user-color, #66fcf1);
  background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(102, 252, 241, 0.35); box-shadow: 0 0 30px rgba(102, 252, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: mic-pulse-cyan 2s ease-in-out infinite;
}
.call-dm-avatar-img { position: absolute; inset: 0; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(102, 252, 241, 0.35); }
.call-dm-username { color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 0.5px; }
.call-dm-status { display: flex; align-items: center; gap: 7px; color: #57f287; font-size: 12px; font-weight: bold; }
.call-dm-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #57f287; }

/* ─── v1.18: Hub Sesli Oda — Katılımcı Izgarası ───────────────────────────── */
.call-hub-room-view { flex: 1; display: flex; flex-direction: column; padding: 20px; overflow-y: auto; }
.call-hub-room-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-content: flex-start; flex: 1; }
.call-hub-room-person { width: 110px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.call-hub-room-avatar {
  width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: bold; color: var(--user-color, #66fcf1); position: relative;
  background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}
.call-hub-room-name {
  color: #c5c6c7; font-size: 12px; font-weight: bold; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}

.call-hub-room-screenshare-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 18px; margin-bottom: 16px; border-radius: 999px; align-self: center;
  background: rgba(102, 252, 241, 0.1); border: 1px solid rgba(102, 252, 241, 0.3); color: #66fcf1; font-size: 12px; font-weight: bold;
}
#call-hub-room-watch-btn { padding: 6px 16px; border-radius: 999px; background: rgba(102, 252, 241, 0.18); border: 1px solid rgba(102, 252, 241, 0.4); color: #66fcf1; font-weight: bold; font-size: 11px; cursor: pointer; }
#call-hub-room-watch-btn:hover { background: rgba(102, 252, 241, 0.3); }

/* ─── v1.18: Ekran Paylaşımı İzleyici (köşelere taşınabilir / tam ekran) ──── */
.call-screenshare-viewer {
  position: fixed; top: 90px; right: 24px; width: 420px; max-width: 70vw; z-index: 260;
  border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14); transition: top 0.25s ease, left 0.25s ease, right 0.25s ease, bottom 0.25s ease;
}
.call-screenshare-viewer.corner-tl { top: 90px; left: 24px; right: auto; bottom: auto; }
.call-screenshare-viewer.corner-tr { top: 90px; right: 24px; left: auto; bottom: auto; }
.call-screenshare-viewer.corner-bl { bottom: 24px; left: 24px; right: auto; top: auto; }
.call-screenshare-viewer.corner-br { bottom: 24px; right: 24px; left: auto; top: auto; }
.call-screenshare-viewer.fullscreen-mode { top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: 100%; border-radius: 0; z-index: 400; }
.call-screenshare-viewer video { width: 100%; display: block; max-height: 60vh; background: #000; }
.call-screenshare-viewer.fullscreen-mode video { max-height: 100%; height: 100%; object-fit: contain; }
.call-screenshare-viewer-controls {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; background: rgba(0, 0, 0, 0.4); border-radius: 999px; padding: 4px;
}
.call-screenshare-viewer-controls button {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: #fff; font-size: 11px; cursor: pointer;
}
.call-screenshare-viewer-controls button:hover { background: rgba(102, 252, 241, 0.35); }

/* ─── v1.14: Arama Çalma (Ringing) Durumu ────────────────────────────────── */
.call-ringing-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.call-ringing-avatar { font-size: 48px; animation: mic-pulse-cyan 1.4s ease-in-out infinite; border-radius: 50%; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; background: #12141a; border: 1px solid #1f2833; }
.call-ringing-text { color: #66fcf1; font-size: 16px; font-weight: bold; letter-spacing: 0.5px; }
.call-ringing-cancel-btn { padding: 9px 22px; background: transparent; border: 1px solid #ff2e46; color: #ff2e46; font-weight: bold; font-size: 12px; cursor: pointer; transition: 0.2s; }
.call-ringing-cancel-btn:hover { background: #ff2e46; color: #0b0c10; }

/* ─── v1.14: Gelen Arama Modalı ───────────────────────────────────────────── */
.dm-incoming-call-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 300; display: flex; align-items: center; justify-content: center; }
.dm-incoming-call-box { background: #12141a; border: 1px solid rgba(102, 252, 241, 0.35); box-shadow: 0 0 30px rgba(102, 252, 241, 0.15), 0 10px 40px rgba(0,0,0,0.6); padding: 32px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 260px; }
.dm-incoming-call-username { color: #fff; font-size: 16px; font-weight: bold; }
.dm-incoming-call-sub { color: #8e9297; font-size: 12px; }
.dm-incoming-call-actions { display: flex; gap: 10px; margin-top: 8px; }
.dm-incoming-decline-btn, .dm-incoming-accept-btn { padding: 9px 20px; font-weight: bold; font-size: 12px; cursor: pointer; transition: 0.2s; background: transparent; }
.dm-incoming-decline-btn { border: 1px solid #ff2e46; color: #ff2e46; }
.dm-incoming-decline-btn:hover { background: #ff2e46; color: #0b0c10; }
.dm-incoming-accept-btn { border: 1px solid #66fcf1; color: #66fcf1; }
.dm-incoming-accept-btn:hover { background: #66fcf1; color: #0b0c10; }

/* ─── v1.14: Bildirim (Toast) ─────────────────────────────────────────────── */
.toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: #12141a; border: 1px solid rgba(255, 46, 70, 0.4); color: #f2f2f2; font-size: 13px;
  padding: 12px 20px; box-shadow: 0 0 20px rgba(255, 46, 70, 0.15), 0 8px 24px rgba(0,0,0,0.5);
  border-radius: 4px; animation: toast-in 0.25s ease-out; max-width: 90vw; text-align: center;
}
.toast.toast-leaving { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

/* ─── v1.16: Merkez Bildirim Baloncuğu ────────────────────────────────────── */
.center-toast {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%) scale(0.9); z-index: 600;
  padding: 12px 24px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: bold; white-space: nowrap;
  background: rgba(20, 22, 28, 0.75); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(102, 252, 241, 0.35); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(102, 252, 241, 0.15);
  animation: center-toast-in 0.25s ease-out forwards;
}
.center-toast-leaving { animation: center-toast-out 0.3s ease-in forwards; }
@keyframes center-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes center-toast-out { from { opacity: 1; transform: translateX(-50%) scale(1); } to { opacity: 0; transform: translateX(-50%) scale(0.92); } }

/* ─── v1.14: Dosya / Fotoğraf / Video Mesaj Kartları ─────────────────────── */
.file-msg-card {
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid rgba(102, 252, 241, 0.5); border-radius: 14px;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 280px;
}
.file-msg-icon { font-size: 22px; flex-shrink: 0; }
.file-msg-info { min-width: 0; }
.file-msg-name { color: #c5c6c7; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-msg-size { color: #6b7280; font-size: 10px; }
.file-msg-download { color: #66fcf1; font-size: 11px; text-decoration: none; flex-shrink: 0; margin-left: auto; }
.file-msg-download:hover { text-decoration: underline; }

.image-msg-card img { max-width: 260px; max-height: 260px; border-radius: 6px; display: block; cursor: zoom-in; border: 1px solid #1f2833; }

/* ─── v1.16: Fotoğraf Tam Ekran (Lightbox) ────────────────────────────────── */
.image-lightbox {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: zoom-out;
  animation: toast-in 0.15s ease-out;
}
.image-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.image-lightbox-close {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 15px; cursor: pointer;
}
.video-msg-card video { max-width: 280px; max-height: 280px; border-radius: 6px; display: block; border: 1px solid #1f2833; background: #000; }

/* ─── v1.7: Çevrimiçi / Arkadaşlar Modalı ────────────────────────────────── */
.users-modal-box { width: 300px; }
.users-modal-subtitle { padding: 10px 16px 6px; color: #45a29e; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; }
.friend-add-section { display: flex; gap: 8px; padding: 12px 16px 0; }
.friend-add-section input { flex: 1; background: #0b0c10; border: 1px solid #2a3644; color: #c5c6c7; padding: 8px 10px; font-size: 12px; outline: none; }
.friend-add-section input:focus { border-color: #66fcf1; }
.friend-add-section button { padding: 8px 12px; background: transparent; border: 1px solid #66fcf1; color: #66fcf1; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.friend-add-section button:hover { background: #66fcf1; color: #0b0c10; }
.friend-add-error { padding: 0 16px; color: #ff2e46; font-size: 11px; min-height: 0; }
.friend-add-error:not(:empty) { padding-top: 6px; }

.friend-requests-list { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 8px; }
.friend-request-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #12141a; border: 1px solid #1f2833; }

.settings-blocked-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }

.browser-notif-status { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.browser-notif-status-text {
  font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #9ca3af;
}
.browser-notif-status-text.state-granted { color: #57f287; border-color: rgba(87, 242, 135, 0.3); background: rgba(87, 242, 135, 0.08); }
.browser-notif-status-text.state-denied { color: #ff8a95; border-color: rgba(255, 46, 70, 0.3); background: rgba(255, 46, 70, 0.08); }

.notif-pref-groups { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 10px; }
.notif-pref-group { display: flex; flex-direction: column; gap: 6px; }
.notif-pref-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 2px; }
.notif-pref-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px; color: #c5c6c7; cursor: pointer; transition: 0.2s;
}
.notif-pref-row:hover { border-color: rgba(102, 252, 241, 0.25); }
.notif-pref-row input[type="checkbox"] { accent-color: #66fcf1; width: 16px; height: 16px; flex-shrink: 0; }

/* AŞAMA E: masaüstü/tarayıcı bildirim satırı — mobilde "Mobil bildirimleri"
   metnine geçer, sağında liquid glass açma/kapama anahtarı var. */
.notif-pref-toggle-row { justify-content: space-between; }
.notif-pref-toggle-text { flex: 1; }
.notif-pref-mobile-text { display: none; }
@media (max-width: 768px) {
  .notif-pref-desktop-text { display: none; }
  .notif-pref-mobile-text { display: inline; }
}

.notif-toggle { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: 999px; padding: 0; overflow: hidden; }
.notif-toggle input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.notif-toggle-track { position: absolute; inset: 0; display: flex; align-items: center; padding: 3px; transition: 0.2s; }
.notif-toggle-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #8e9297; transition: transform 0.2s, background-color 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.notif-toggle input:checked ~ .notif-toggle-track .notif-toggle-thumb { transform: translateX(16px); background: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.6); }
.settings-blocked-empty { color: #4b5563; font-size: 12px; text-align: center; padding: 8px 0; }
.settings-blocked-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-blocked-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; color: var(--user-color, #66fcf1); background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.settings-blocked-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-blocked-name { flex: 1; min-width: 0; color: #c5c6c7; font-size: 12px; white-space: normal; word-break: break-word; line-height: 1.4; }
.settings-unblock-btn { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; background: none; border: 1px solid rgba(102, 252, 241, 0.3); color: #66fcf1; font-size: 10px; font-weight: bold; cursor: pointer; }
.settings-unblock-btn:hover { background: rgba(102, 252, 241, 0.15); }
.friend-request-name { color: #c5c6c7; font-size: 12px; font-weight: bold; }
.friend-request-actions { display: flex; gap: 6px; }
.friend-request-actions button { padding: 4px 9px; font-size: 10px; font-weight: bold; cursor: pointer; border: 1px solid; background: transparent; }
.friend-accept-btn { border-color: #57f287; color: #57f287; }
.friend-accept-btn:hover { background: #57f287; color: #0b0c10; }
.friend-decline-btn { border-color: #ff2e46; color: #ff2e46; }
.friend-decline-btn:hover { background: #ff2e46; color: #0b0c10; }

#users-list { list-style: none; overflow-y: auto; padding: 6px 0 10px; max-height: 320px; }
#users-list li { padding: 9px 16px; color: #c5c6c7; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.15s; }
#users-list li:hover { background: #1f2833; }
#users-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4b5563; flex-shrink: 0; }
#users-list li.is-online::before { background: #57f287; box-shadow: 0 0 5px rgba(87, 242, 135, 0.7); }
#users-list li.me { color: #66fcf1; font-weight: bold; cursor: default; }
#users-list li.me::after { content: ' (sen)'; font-size: 11px; opacity: 0.6; font-weight: normal; }
.users-list-empty { padding: 20px 16px; color: #4b5563; font-size: 12px; text-align: center; }

/* ─── v1.7: Başkasının Profili ────────────────────────────────────────────── */
.other-profile-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-action-btn { width: 100%; padding: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; cursor: pointer; transition: 0.2s; background: transparent; border: 1px solid; }
.profile-action-primary { border-color: #66fcf1; color: #66fcf1; }
.profile-action-primary:hover { background: #66fcf1; color: #0b0c10; box-shadow: 0 0 12px rgba(102, 252, 241, 0.4); }
.profile-action-disabled { border-color: #2a3644; color: #4b5563; cursor: not-allowed; }
.profile-action-danger { border-color: #ff2e46; color: #ff2e46; font-size: 11px; padding: 8px; }
.profile-action-danger:hover { background: #ff2e46; color: #0b0c10; }
.profile-action-row { display: flex; gap: 8px; }
.profile-action-row .profile-action-btn { flex: 1; }

/* ─── v1.7: DM Paneli ─────────────────────────────────────────────────────── */
.dm-side-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw; z-index: 120;
  transform: translateX(0); animation: dm-panel-in 0.22s ease-out;
  box-shadow: -14px 0 40px rgba(0, 0, 0, 0.5);
}
@keyframes dm-panel-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.dm-modal-box {
  width: 100%; height: 100%; max-height: none; max-width: none; display: flex; flex-direction: column;
  border-radius: 0; border: none; border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 17, 22, 0.82); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: none;
}
.dm-feed { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.dm-msg-row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.dm-msg-row.msg-mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-msg {
  position: relative; max-width: 80%; width: fit-content; padding: 9px 15px; font-size: 13px; line-height: 1.5; border-radius: 18px;
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.dm-msg-mine { background: rgba(102, 252, 241, 0.1); border: none; color: #e2f8f6; }
.dm-msg-theirs { background: rgba(255, 255, 255, 0.05); border: none; color: #c5c6c7; }
.dm-msg-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dm-msg-time { flex-shrink: 0; font-size: 9px; color: #6b7280; }
.dm-msg .hub-msg-actions { top: -12px; right: 4px; }
@media (hover: hover) {
  .dm-msg:hover .hub-msg-actions { display: flex; }
}

.report-modal-box { width: 92vw; max-width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.report-modal-box h3 { margin: 0; font-size: 16px; color: #66fcf1; }
.report-reason-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; }
.report-reason-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.report-reason-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; color: #c5c6c7; cursor: pointer; transition: 0.2s;
}
.report-reason-option:hover { border-color: rgba(102, 252, 241, 0.3); }
.report-reason-option input[type="radio"] { accent-color: #66fcf1; }
.report-reason-option:has(input:checked) { background: rgba(102, 252, 241, 0.1); border-color: rgba(102, 252, 241, 0.4); color: #e2f8f6; }
.report-description-input {
  width: 100%; min-height: 70px; resize: vertical; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #e2f8f6;
  font-size: 13px; font-family: inherit;
}
.msg-report-btn { color: #ff9f43; }
.dm-msg.show-actions .hub-msg-actions { display: flex; }
.dm-modal-box .composer-form { padding: 14px 18px; border: none; background: transparent; box-shadow: none; }
.dm-call-btn { background: transparent; border: 1px solid #1f2833; color: #66fcf1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; margin-left: auto; transition: 0.2s; }
.dm-call-btn:hover { border-color: #66fcf1; box-shadow: 0 0 8px rgba(102, 252, 241, 0.2); }
.dm-call-btn.in-call { border-color: #ff2e46; color: #ff2e46; }

/* ─── v1.13: Özel Ses Oynatıcı ────────────────────────────────────────────── */
.voice-play-btn { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: rgba(102, 252, 241, 0.12); border: 1px solid #66fcf1; color: #66fcf1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0; }
.voice-play-btn:hover { background: #66fcf1; color: #0b0c10; }
.voice-msg-card { position: relative; }
.voice-progress { flex: 1; height: 3px; background: #1f2833; border-radius: 2px; overflow: hidden; min-width: 40px; }
.voice-progress-fill { height: 100%; width: 0%; background: #66fcf1; transition: width 0.1s linear; }

/* ─── v1.13: MOBİL ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  input, textarea, select { font-size: 16px !important; }

  .modal-box { max-width: 92vw; }
  .hub-create-box, .poll-create-box, .share-create-box, .users-modal-box, .feedback-modal-box, .hub-invite-friend-box { width: 92vw; max-width: 360px; }
  .dm-side-panel { width: 100vw; max-width: 100vw; }
  .dm-modal-box { width: 100%; height: 100%; }

  /* Ekran paylaşımı mobil tarayıcılarda (özellikle iOS Safari) desteklenmiyor —
     çalışmayan bir butonu göstermek yerine sadece masaüstünde bırakıyoruz. */
  #call-screenshare-btn { display: none !important; }

  /* AŞAMA D: mobilde "⋯" menüsü ekranın altından taşan bir dropdown yerine
     alttan açılan sabit bir sheet olsun — uzun mesaj listelerinde ekran dışına
     taşmaz, her zaman parmakla ulaşılabilir kalır. */
  .msg-actions-menu {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%;
    border-radius: 18px 18px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    min-width: 0; max-height: 70vh; overflow-y: auto; animation: slide-in-bottom 0.2s ease-out;
  }
  .msg-actions-menu button { font-size: 14px; padding: 11px 14px; }
  .msg-reaction-picker { position: fixed; top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); border-radius: 999px; }

  .composer-reply-preview { margin-left: 14px; margin-right: 14px; }

  .topbar { padding: 10px 10px; gap: 6px; }
  .topbar-logo { font-size: 12px; letter-spacing: 1px; flex-shrink: 0; }
  .topbar-profile-btn { width: 36px; height: 36px; }
  .topbar-profile-btn .profile-avatar-wrap-sm { width: 28px; height: 28px; }
  .topbar-profile-btn .profile-avatar-wrap-sm .profile-avatar { width: 28px; height: 28px; font-size: 12px; }
  .topbar-profile-btn .profile-avatar-wrap-sm .profile-avatar-img { width: 28px; height: 28px; max-width: 28px; max-height: 28px; }
  .topbar-menu-dropdown { right: 10px; min-width: 200px; }

  .hub-list-view { padding: 18px 14px; }
  .hub-list-header { flex-wrap: wrap; gap: 10px; }
  .hub-create-btn { padding: 8px 12px; font-size: 12px; }
  .hub-list-grid { max-width: 100%; }

  .hub-detail-header { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .hub-title-pill { flex: 1 1 140px; min-width: 140px; padding: 7px 12px; }
  .hub-back-btn { flex-shrink: 0; padding: 7px 10px; font-size: 0; }
  .hub-back-arrow { font-size: 14px; }

  .hub-detail-view { flex-direction: column; }

  .hub-feed { padding: 14px 14px; }
  .hub-composer { padding: 12px 14px; }
  #hub-chat-form, .composer-form { flex-wrap: nowrap; }
  #hub-chat-form input, .composer-form input { min-width: 0; }

  .side-panel { width: 88vw; max-width: 320px; }

  .profile-modal-box, .profile-modal-box-minimal { width: 88vw; max-width: 320px; }

  .call-header { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  #call-mute-btn, #call-screenshare-btn, #call-leave-btn { padding: 7px 12px; font-size: 11px; }
  .voice-icon-btn { width: 30px; height: 30px; }
  .call-header span { font-size: 12px; }

}

/* ─── Geliştirme bilgilendirme penceresi — keskin köşeli liquid glass ─────── */
.dev-notice-overlay {
  position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 6, 10, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.dev-notice-overlay.visible { display: flex; }
.dev-notice-overlay.open { opacity: 1; }
.dev-notice-panel {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 0;
  background: rgba(20, 22, 28, 0.58);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(10px) scale(0.98); transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.dev-notice-overlay.open .dev-notice-panel { transform: translateY(0) scale(1); }
.dev-notice-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 38%);
}
.dev-notice-scroll { position: relative; overflow-y: auto; padding: 26px 26px 10px; -webkit-overflow-scrolling: touch; }
.dev-notice-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dev-notice-icon {
  flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: bold; font-style: italic; font-family: Georgia, serif; color: var(--accent, #66fcf1);
  border: 1px solid rgba(102, 252, 241, 0.45); background: rgba(102, 252, 241, 0.08);
}
.dev-notice-title { margin: 0; font-size: 17px; font-weight: bold; color: #fff; letter-spacing: 0.3px; line-height: 1.3; }
.dev-notice-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: #c5c6c7; }
.dev-notice-body strong { color: #e2f8f6; }
.dev-notice-sign { margin: 6px 0 14px; font-size: 12.5px; font-weight: bold; color: #9ca3af; letter-spacing: 0.4px; }
.dev-notice-footer { position: relative; flex-shrink: 0; display: flex; justify-content: flex-end; padding: 14px 26px 22px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.dev-notice-btn {
  padding: 11px 24px; border-radius: 0; cursor: pointer; font-size: 13px; font-weight: bold; letter-spacing: 0.4px;
  color: var(--accent, #66fcf1); background: rgba(102, 252, 241, 0.1); border: 1px solid rgba(102, 252, 241, 0.5);
  transition: background 0.2s, box-shadow 0.2s;
}
.dev-notice-btn:hover { background: rgba(102, 252, 241, 0.2); box-shadow: 0 0 14px rgba(102, 252, 241, 0.25); }
.dev-notice-btn:focus-visible { outline: 2px solid var(--accent, #66fcf1); outline-offset: 2px; }
@media (max-width: 480px) {
  .dev-notice-scroll { padding: 20px 18px 6px; }
  .dev-notice-footer { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
  .dev-notice-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-notice-overlay, .dev-notice-panel { transition: none; }
}

/* Hesap askıda bildirimi (yalnızca doğru şifre sonrası gösterilir) */
.auth-suspended {
  margin-top: 16px; padding: 12px 14px; text-align: left; font-size: 12.5px; line-height: 1.55;
  color: #ffb066; background: rgba(255, 159, 67, 0.08); border: 1px solid rgba(255, 159, 67, 0.35); border-radius: 12px;
}
.auth-suspended strong { display: block; color: #ffc98f; font-size: 13px; }
.auth-suspended p { margin: 6px 0 0; color: #c5c6c7; word-break: break-word; }

/* ─── Resmi yönetim görevi bildirisi ─────────────────────────────────────── */
.role-notice-official { font-size: 10.5px; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase; color: #ffb066; margin-bottom: 3px; }
.role-notice-footer { flex-direction: column; align-items: stretch; gap: 10px; }
.role-notice-hint { margin: 0; font-size: 12px; color: #9ca3af; }
.role-notice-hint[hidden] { display: none; }
.role-notice-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: #e2f8f6; cursor: pointer; }
.role-notice-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #66fcf1; cursor: pointer; }
.role-notice-check input:disabled { cursor: not-allowed; }
.role-notice-check:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.role-notice-error { min-height: 0; font-size: 12px; color: #ff6b7d; }
.role-notice-error:empty { display: none; }
.role-notice-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.role-notice-later { background: none; border: none; color: #9ca3af; font-size: 12.5px; cursor: pointer; padding: 8px 4px; text-decoration: underline; }
.role-notice-later:hover { color: #e2f8f6; }
.role-notice-actions .dev-notice-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.role-notice-body-list { margin: 0 0 12px; padding-left: 18px; }
.role-notice-body-list li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: #c5c6c7; }
.role-revoked-row { display: flex; gap: 10px; font-size: 13px; margin: 0 0 8px; color: #c5c6c7; }
.role-revoked-row b { min-width: 120px; color: #9ca3af; font-weight: normal; }
.notification-official-tag { font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #ffb066; margin-bottom: 4px; }
@media (max-width: 480px) {
  .role-notice-actions { flex-direction: column-reverse; align-items: stretch; }
  .role-notice-actions .dev-notice-btn { width: 100%; }
  .role-notice-later { align-self: center; }
  .role-revoked-row { flex-direction: column; gap: 2px; }
}
#role-notice-scroll { flex: 1 1 auto; min-height: 150px; outline: none; }
#role-notice-overlay .dev-notice-panel { overflow-y: auto; }
@media (max-height: 620px) {
  .role-notice-footer { padding-top: 8px; padding-bottom: 10px; gap: 6px; }
  .role-notice-check { font-size: 12px; line-height: 1.4; }
  #role-notice-scroll { padding-top: 14px; }
}

/* ─── Bildirim penceresi araç çubuğu / okundu / sil ─────────────────────── */
.notifications-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.notifications-tool-btn { flex: 1; min-width: 120px; padding: 7px 10px; font-size: 11px; font-weight: bold; cursor: pointer; background: transparent; border: 1px solid #45a29e; color: #66fcf1; }
.notifications-tool-btn:hover { background: rgba(102, 252, 241, 0.12); }
.notifications-tool-btn.danger { border-color: #ff2e46; color: #ff6b7d; }
.notifications-tool-btn.danger:hover { background: rgba(255, 46, 70, 0.14); }
.notification-card.notification-seen { opacity: 0.6; border-left-color: #3b4450; }
.notification-delete { border-color: #4b5563; color: #9ca3af; }
.notification-delete:hover { background: #ff2e46; border-color: #ff2e46; color: #0b0c10; }

/* ─── Görev bildirisi: Reddet ───────────────────────────────────────────── */
.role-notice-decline { padding: 11px 20px; cursor: pointer; font-size: 13px; font-weight: bold; letter-spacing: 0.4px; color: #ff6b7d; background: rgba(255, 46, 70, 0.08); border: 1px solid rgba(255, 46, 70, 0.55); border-radius: 0; }
.role-notice-decline:hover { background: rgba(255, 46, 70, 0.18); }
.role-notice-decline:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 480px) { .role-notice-actions .role-notice-decline { width: 100%; } }

/* ─── iPhone Ana Ekran uygulaması: arka planda mikrofon uyarısı ───────────── */
.ios-voice-hint {
  display: flex; align-items: center; justify-content: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 18px; margin: 0 auto 16px; max-width: 560px;
  border-radius: 16px; background: rgba(255, 196, 87, 0.09); border: 1px solid rgba(255, 196, 87, 0.30); color: #ffd58a; font-size: 12.5px; line-height: 1.55; text-align: center;
}
#ios-voice-hint-ok { padding: 6px 16px; border-radius: 999px; background: rgba(255, 196, 87, 0.16); border: 1px solid rgba(255, 196, 87, 0.4); color: #ffd58a; font-weight: bold; font-size: 11px; cursor: pointer; }
#ios-voice-hint-ok:hover { background: rgba(255, 196, 87, 0.26); }

/* ─── Arkadaşlar düğmesi: okunmamış mesaj rozeti ─────────────────────────── */
.friends-sidebar-toggle-btn { overflow: visible; }
.friends-sidebar-toggle-badge {
  position: absolute; top: -8px; left: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; line-height: 1;
  color: #0b0c10; background: #66fcf1; border: 2px solid #0d0f14; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: none;
}