/* Sauran — Liquid Glass tasarım katmanı (onaylanan prototipten).
   style.css'ten SONRA yüklenir; yalnızca görünümü değiştirir, DOM/JS'e dokunmaz.
   Cam yüzeyler kasıtlı olarak az sayıda öğede kullanılır (performans). */

/* ── Tasarım belirteçleri ─────────────────────────────────────────────── */
:root {
  /* zemin */
  --bg-app: #0a0d11;
  --bg-surface: #0e1319;
  --bg-surface-2: #131a22;
  --bg-surface-3: #18212b;
  /* metin */
  --text-primary: #e8edf2;
  --text-secondary: #a4afbb;
  --text-tertiary: #7a8693;
  /* vurgu */
  --accent: #5cc8ff;
  --accent-soft: rgba(92, 200, 255, 0.14);
  --accent-line: rgba(92, 200, 255, 0.35);
  --success: #5fd6a4;
  --warning: #f0c36b;
  --danger: #ff7a86;
  /* cam */
  --glass-1: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(24, 31, 40, 0.62);
  --glass-bg: var(--glass-1);
  --blur-1: 18px;
  --blur-2: 28px;
  --border-soft: rgba(255, 255, 255, 0.075);
  --border-soft-strong: rgba(255, 255, 255, 0.12);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-surface: none;
  --shadow-focus: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  /* şekil */
  --radius-sm: 11px;
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* boşluk ölçeği */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}

/* ── Tipografi ────────────────────────────────────────────────────────── */
* { font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; }
body { -webkit-font-smoothing: antialiased; line-height: 1.55; }

/* ── Atmosfer: tek, çok hafif ışık (sabit, animasyonsuz) ─────────────── */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(60, 150, 210, 0.16), transparent 65%),
    radial-gradient(700px 460px at -5% 105%, rgba(40, 110, 160, 0.10), transparent 65%);
}
#chat-screen, #login-screen { position: relative; z-index: 1; }
.login-particles { display: none; }

/* ── Odak halkası ─────────────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Giriş / kayıt (odak camı) ───────────────────────────────────────── */
#login-screen { background: transparent; }
.login-box {
  background: var(--glass-2); border: 0; border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
  box-shadow: var(--hi), 0 0 0 1px rgba(255, 255, 255, 0.09), var(--shadow-focus);
  padding: 38px 34px; width: 400px;
}
.login-box h2 { text-transform: none; letter-spacing: -0.01em; font-size: 24px; font-weight: 650; color: var(--text-primary); }
.login-box input {
  height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft); color: var(--text-primary);
}
.login-box input:focus { border-color: var(--accent-line); background: rgba(255, 255, 255, 0.055); box-shadow: none; }
/* Floating label alanı: yukarıdaki genel input yüksekliği/dolgusu etiketle çakışmasın (etiket yukarı çıkınca değer altında kalır) */
.login-box .field-float input { height: 54px; padding: 22px 14px 6px; line-height: 1.2; }
.login-box button:not(.auth-switch button) {
  height: 46px; border-radius: 12px; background: var(--accent); color: #04202e; border: 0; font-weight: 550;
  transition: 0.18s var(--ease);
}
.login-box button:not(.auth-switch button):hover { background: #7ad4ff; box-shadow: none; transform: translateY(-1px); }

.auth-switch button {
  background: none; border: 0; box-shadow: none; color: var(--accent); font-weight: 550; text-transform: none; letter-spacing: 0;
  width: auto; padding: 4px 6px; height: auto; border-radius: 8px;
}
.auth-switch button:hover { background: var(--accent-soft); }

/* ── Üst bar ─────────────────────────────────────────────────────────── */
.topbar { background: transparent; border-bottom: 1px solid var(--border-soft); box-shadow: none; }
.topbar-logo { color: var(--text-primary); letter-spacing: 0.22em; font-weight: 650; }
.topbar-context-title { color: var(--text-secondary); }
.topbar-profile-btn, .topbar-menu-btn {
  background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); transition: 0.18s var(--ease);
}
.topbar-profile-btn:hover, .topbar-menu-btn:hover { background: var(--glass-1); color: var(--text-primary); border-color: transparent; }
.topbar-badge { background: var(--accent); color: #04202e; }
.topbar-menu-badge { background: var(--accent); box-shadow: none; }

/* ── Cam yüzeyler (yalnızca menü / açılır / popup) ───────────────────── */
.liquid-glass {
  background: var(--glass-2); border: 0;
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.2); backdrop-filter: blur(var(--blur-1)) saturate(1.2);
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
}
.liquid-glass:hover { background: var(--glass-2); border-color: transparent; }
.topbar-menu-item { color: var(--text-secondary); border-radius: var(--radius-sm); }
.topbar-menu-item:hover { background: var(--accent-soft); color: var(--text-primary); }

/* ── Modallar (odak camı) ────────────────────────────────────────────── */
.modal-overlay { background: rgba(4, 7, 10, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-box, .profile-modal-box, .dm-modal-box {
  background: var(--glass-2); border: 0; border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
  box-shadow: var(--hi), 0 0 0 1px rgba(255, 255, 255, 0.09), var(--shadow-focus);
}
.modal-header { color: var(--text-primary); border-bottom: 1px solid var(--border-soft); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }
.modal-header button:not([class]):hover { color: var(--accent); border-color: var(--accent-line); }
.settings-tabs { border-color: var(--border-soft); }

/* ── Lobi listesi ────────────────────────────────────────────────────── */
.hub-card { border-radius: var(--radius-sm); transition: 0.16s var(--ease); }
.hub-card:hover { background: var(--glass-1); }
.hub-card:hover .hub-card-icon { background: var(--accent-soft); }
.hub-card-name { color: var(--text-primary); font-weight: 600; letter-spacing: 0; }
.hub-card-meta, .hub-list-subtitle, .hub-detail-count { color: var(--text-tertiary); letter-spacing: 0.04em; }
.hub-list-subtitle { text-transform: uppercase; font-weight: 600; letter-spacing: 0.08em; }

/* ── Lobi başlığı, yan paneller ──────────────────────────────────────── */
.hub-detail-header { background: transparent; border-bottom: 0; padding: 20px 32px 12px; }
.hub-detail-header h2 { color: var(--text-primary); font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.hub-detail-side, .hub-voice-rooms-side, .friends-sidebar {
  background: var(--glass-1); border-color: var(--border-soft);
  box-shadow: var(--hi);
}
.friends-sidebar-title { color: var(--text-tertiary); }
.friends-sidebar-name, .hub-voice-member-name { color: var(--text-secondary); }
.hub-voice-room-name { color: var(--text-primary); }

/* ── Sohbet: kutusuz mesajlar ────────────────────────────────────────── */
.chat-area { background: transparent; }
.message, .hub-msg, .dm-msg {
  background: transparent; border: 0; border-left: 0; border-radius: var(--radius-sm); transition: background 0.15s;
}
.message:hover, .hub-msg:hover { background: rgba(255, 255, 255, 0.028); }
.message .username { color: var(--text-primary); letter-spacing: 0; font-weight: 600; }
.message .time, .dm-msg-time { color: var(--text-tertiary); opacity: 1; }
.message .content, .hub-msg-text { color: #d3dbe3; line-height: 1.55; }
.hub-msg-text { background: transparent; }
.dm-msg-mine { background: var(--accent-soft); }
.dm-msg-theirs { background: var(--glass-1); }

/* ── Mesaj yazma alanı (hafif cam) ───────────────────────────────────── */
.composer-input-box, .hub-composer .composer-input-box {
  background: var(--glass-1); border: 0; border-radius: 18px; box-shadow: var(--hi), 0 0 0 1px var(--border-soft);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.2); backdrop-filter: blur(var(--blur-1)) saturate(1.2);
  transition: 0.18s var(--ease);
}
.composer-input-box:focus-within { box-shadow: var(--hi), 0 0 0 1px var(--accent-line); }
.composer-send-btn { background: var(--accent); color: #04202e; border: 0; border-radius: 14px; }
.composer-send-btn:hover { background: #7ad4ff; }
.composer-icon-btn, .composer-attach-btn { color: var(--text-secondary); }
.composer-icon-btn:hover, .composer-attach-btn:hover { background: var(--glass-1); color: var(--text-primary); }
.composer-attach-menu { background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); border-radius: var(--radius); }

/* ── Sesli oda ───────────────────────────────────────────────────────── */
.hub-voice-room-row { background: transparent; border-radius: var(--radius-sm); }
.hub-voice-room-row:hover { background: var(--glass-1); }
.hub-in-room-pill { background: rgba(95, 214, 164, 0.1); color: var(--success); border: 0; }
.hub-in-room-dot { background: var(--success); box-shadow: none; }

/* ── Bildirim toast ──────────────────────────────────────────────────── */
.toast { background: var(--glass-2); border: 0; border-radius: var(--radius); color: var(--text-primary);
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 16px 40px -14px rgba(0, 0, 0, 0.55); }

/* ── Kaydırma çubuğu ─────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; }

/* ── Mobil: dokunma hedefleri, alttan açılan pencereler ──────────────── */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
  .hub-detail-header { padding: 14px 18px 8px; }
  .topbar-profile-btn, .topbar-menu-btn, .hub-icon-btn, .composer-icon-btn, .composer-send-btn { min-width: 44px; min-height: 44px; }
  .modal-overlay { align-items: flex-end; }
  .modal-box, .profile-modal-box, .dm-modal-box {
    width: 100%; max-width: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Düşük güç / hareket azaltma: camı düz yüzeye indir ──────────────── */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .login-box, .liquid-glass, .modal-box, .profile-modal-box, .dm-modal-box, .composer-input-box, .modal-overlay {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .login-box, .liquid-glass, .modal-box, .profile-modal-box, .dm-modal-box { background: #131a22; }
}

/* ── Düğme hiyerarşisi: birincil / ikincil / sade ────────────────────── */
.hub-create-submit, .poll-submit-btn, .about-btn-primary, .cropper-btn-primary, .profile-action-primary {
  background: var(--accent); color: #04202e; border: 0; border-radius: 12px; font-weight: 550; letter-spacing: 0; text-transform: none;
  transition: 0.18s var(--ease);
}
.hub-create-submit:hover, .poll-submit-btn:hover, .about-btn-primary:hover, .cropper-btn-primary:hover, .profile-action-primary:hover { background: #7ad4ff; box-shadow: none; }
.profile-action-btn:not(.profile-action-primary):not(.profile-action-danger), .hub-settings-action-btn, .hub-create-image-btn {
  background: var(--glass-1); border: 0; box-shadow: var(--hi), 0 0 0 1px var(--border-soft); border-radius: 12px; color: var(--text-primary);
}
.profile-action-danger { color: var(--danger); }
.modal-box input:not([type=checkbox]):not([type=file]):not([type=radio]), .modal-box textarea, .modal-box select {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text-primary);
}
.modal-box input:focus, .modal-box textarea:focus, .modal-box select:focus { border-color: var(--accent-line); outline: 0; box-shadow: none; }

/* ══ v2 YERLEŞİM: sol ray + lobi listesi + ana içerik ═══════════════════ */
.app-rail, .lobby-nav, .lobby-nav-toggle, .home-empty { display: none; }
.rail-btn {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; position: relative;
  color: var(--text-secondary); background: none; border: 0; cursor: pointer; transition: 0.18s var(--ease);
}
.rail-btn svg, .lobby-nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { background: var(--glass-1); color: var(--text-primary); }
.rail-btn.on { color: var(--accent); background: var(--accent-soft); }
.rail-btn-sm { width: 28px; height: 28px; border-radius: 9px; }
.rail-btn-sm svg { width: 16px; height: 16px; }
.rail-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.app-rail-logo { width: 34px; height: 34px; border-radius: 50%; margin: 0 0 14px; flex: none;
  background: #000 url(icons/mark.svg) center / 100% 100% no-repeat; }
.rail-spacer { flex: 1; }
.rail-avatar { width: 36px; height: 36px; border-radius: 50%; margin-top: 8px; border: 0; cursor: pointer; font-weight: 600; font-size: 13px; color: #cfe9f7;
  background: linear-gradient(140deg, #25445a, #182a38) center/cover; display: grid; place-items: center; }

.lobby-nav-head { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.lobby-nav-list { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.lobby { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); border: 0; background: none;
  color: var(--text-secondary); text-align: left; cursor: pointer; font-size: 14.5px; transition: 0.16s var(--ease); min-height: 40px; }
.lobby:hover { background: var(--glass-1); color: var(--text-primary); }
.lobby.active { background: var(--accent-soft); color: var(--text-primary); }
.lobby .mark { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.5; flex: none; }
.lobby.active .mark { background: var(--accent); opacity: 1; }
.lobby-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-count { font-size: 12px; color: var(--text-tertiary); }
.lobby-nav .friends-sidebar {
  position: static; display: flex !important; width: auto; max-width: none; max-height: 40%; flex: 0 1 auto; transform: none !important;
  background: none; box-shadow: none; border: 0; border-top: 1px solid var(--border-soft); border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 4px 0; margin-top: 8px; z-index: auto;
}
#friends-sidebar-toggle-btn { display: none !important; }
.home-empty { color: var(--text-tertiary); text-align: center; margin: 22vh auto 0; }

@media (min-width: 901px) {
  /* Masaüstü de telefonla AYNI gezinme: tek sütunlu etiketli sol ray + rayın yanında açılan Lobiler/Arkadaşlar/Gruplar çekmecesi. */
  #chat-screen[style*="flex"] { display: grid !important; grid-template-columns: calc(var(--rail-w) + 4px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
  .app-rail {
    display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; z-index: 55; grid-column: 1; grid-row: 1 / 3;
    width: 60px; margin: 8px 0 8px 8px; padding: 14px 0; border-radius: 30px; background: var(--glass-2);
    -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
  }
  .app-rail-logo { display: none; }
  .app-rail .rail-btn { width: 46px; height: 46px; border-radius: 50%; flex: none; }
  .app-rail .rail-btn:hover { background: var(--glass-1); }
  .app-rail .rail-btn.on { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
  .app-rail .rail-btn-friends, .app-rail .rail-btn-mobile { display: grid; }
  #rail-home { order: 1; }
  #rail-discover { order: 2; }
  #rail-lobbies { order: 3; }
  .rail-btn-friends { order: 4; }
  #rail-friend { order: 5; }
  #rail-groups { order: 6; }
  #rail-notifications, #rail-settings { display: none; }
  .rail-spacer { order: 8; flex: 1; }
  .rail-avatar { order: 9; width: 46px; height: 46px; margin-top: 0; box-shadow: 0 0 0 1px var(--border-soft-strong); }
  .rail-dot { top: 8px; right: 8px; }
  .app-rail .rail-avatar[data-lbl]::after { margin-top: 7px; }
  body.lobby-drawer-open:not(.drawer-friends):not(.drawer-groups) #rail-lobbies,
  body.drawer-groups #rail-groups, body.drawer-friends #rail-friends { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
  .lobby-nav {
    display: flex; flex-direction: column; position: fixed; z-index: 200; left: calc(var(--rail-w) + 4px); top: 8px; bottom: 8px; width: 300px; margin: 0; padding: 18px 12px 12px;
    min-height: 0; border-radius: 28px; transform: translateX(calc(-100% - var(--rail-w) - 24px)); transition: transform 0.25s var(--ease);
    background: var(--glass-2); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), var(--shadow-focus);
  }
  body.lobby-drawer-open .lobby-nav { transform: none; }
  /* Çekmece kipleri: Lobiler | Arkadaşlar | Gruplar (her biri yalnız kendi bölümü) */
  body:not(.drawer-friends) .lobby-nav .friends-sidebar { display: none !important; }
  body.drawer-friends .lobby-nav-head, body.drawer-friends #lobby-nav-list { display: none; }
  body.drawer-friends .lobby-nav .friends-sidebar { max-height: none; flex: 1 1 auto; border-top: 0; margin-top: 0; padding-top: 4px; }
  .lobby-nav .friends-groups { display: none; }
  body.drawer-groups .lobby-nav .friends-groups { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding-top: 0; border-top: 0; max-height: none; }
  body.drawer-groups .lobby-nav .friends-groups-list { overflow-y: auto; }
  body.drawer-groups .lobby-nav-head, body.drawer-groups #lobby-nav-list, body.drawer-groups .lobby-nav .friends-sidebar { display: none !important; }
  .topbar { grid-column: 2; grid-row: 1; border-bottom: 0; padding: 14px 24px 0; min-height: 0; }
  .topbar-logo, .topbar-profile-btn { display: none; }
  .chat-area { grid-column: 2; grid-row: 2; min-height: 0; }
  .hub-back-btn { display: none; }
  .home-empty { display: none !important; }
}
@media (min-width: 901px) and (max-height: 720px) { .app-rail { gap: 8px; padding: 10px 0; } }

@media (max-width: 900px) {
  .lobby-nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); cursor: pointer; }
  .lobby-nav-toggle:hover { background: var(--glass-1); color: var(--text-primary); }
  .lobby-nav {
    display: flex; flex-direction: column; position: fixed; z-index: 200; top: 0; bottom: 0; left: 0; width: min(320px, 86vw);
    padding: calc(18px + env(safe-area-inset-top)) 12px 12px; transform: translateX(-104%); transition: transform 0.25s var(--ease);
    background: var(--glass-2); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), var(--shadow-focus);
  }
  body.lobby-drawer-open .lobby-nav { transform: none; }
  .lobby-nav .friends-sidebar { max-height: 45%; }
  
  .lobby-nav .rail-btn-sm { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lobby-nav { transition: none; } }

/* ── Sohbet: prototipteki gibi tek sütun, sola hizalı, kutusuz ───────── */
#hub-messages, .hub-messages { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }
.hub-msg, .hub-msg.msg-mine { align-self: stretch; max-width: none; width: auto; flex-direction: row; padding: 8px 12px; gap: 14px; }
/* Sauran Plus "Yumuşak"/"Kontrast" sohbet teması ve balon stilleri: kutu yalnızca iletinin kendisini sarar
   (kullanıcı adı/avatar kutunun DIŞINDA kalır — bkz. .hub-msg-bubble, script.js applyChatTheme). Kutu, mesaj
   uzunluğuna göre boyutlanır ve gönderene göre sola/sağa hizalanır (taşan tozlar için overflow: hidden). */
.hub-msg-bubble { width: fit-content; max-width: 100%; }
.dm-msg.chat-theme-soft, .dm-msg.chat-theme-contrast {
  align-self: flex-start; max-width: 78%; width: fit-content; overflow: hidden;
}
.dm-msg.dm-msg-mine.chat-theme-soft, .dm-msg.dm-msg-mine.chat-theme-contrast {
  align-self: flex-end;
}
.hub-msg.msg-mine .header { flex-direction: row; }
.hub-msg.msg-mine .hub-msg-body { text-align: left; }
.hub-msg.msg-mine .hub-msg-actions { left: auto; right: 6px; }
.hub-msg .username, .hub-msg .header .username { color: var(--text-primary) !important; font-weight: 600; letter-spacing: 0; }
.hub-msg .time { color: var(--text-tertiary); }
.hub-composer { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }

/* ── Lobi başlığı: prototipteki gibi düz (hap/cam yok) ───────────────── */
.hub-title-pill { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
.hub-detail-count { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.hub-call-btn, .hub-icon-btn { background: none; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.hub-call-btn:hover, .hub-icon-btn:hover { background: var(--glass-1); color: var(--text-primary); box-shadow: none; }
#hub-feed, .dm-feed { padding-left: max(24px, calc((100% - 860px) / 2)); padding-right: max(24px, calc((100% - 860px) / 2)); }
@media (min-width: 901px) { .hub-detail-header { padding-left: max(24px, calc((100% - 860px) / 2)); padding-right: max(24px, calc((100% - 860px) / 2)); } }

/* ── Ayarlar ve form kontrolleri ─────────────────────────────────────── */
.privacy-option { background: var(--glass-1); border: 0; border-radius: var(--radius-sm); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.privacy-option:hover { background: rgba(255, 255, 255, 0.06); }
.privacy-option-title { color: var(--text-primary); font-weight: 600; }
.privacy-option-desc { color: var(--text-tertiary); }
.privacy-option.selected { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.privacy-option.selected .privacy-option-title { color: var(--text-primary); }
.settings-tab-btn { border-radius: var(--radius-sm); border: 0; background: none; color: var(--text-secondary); }
.settings-tab-btn:hover { background: var(--glass-1); color: var(--text-primary); }
.settings-tab-btn.active { background: var(--accent-soft); color: var(--text-primary); }
.profile-field-label { color: var(--text-tertiary); }

/* ── Ghost / tehlikeli düğmeler ─────────────────────────────────────── */
.logout-btn { background: none; border: 0; border-radius: 12px; color: var(--danger); text-transform: none; letter-spacing: 0; font-weight: 550; box-shadow: none; }
.logout-btn:hover { background: rgba(255, 122, 134, 0.1); }
.about-btn-ghost { background: none; border: 0; color: var(--text-secondary); }
.profile-close-btn, .modal-header button:not([class]), .friend-add-close-btn { border-radius: 50%; border: 0; background: var(--glass-1); }

/* ── Sesli odalar paneli: sol ray+lobi listesinin yanından açılır ─────── */
.hub-voice-rooms-side { background: var(--glass-2); border: 0; -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), var(--shadow-focus); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.hub-voice-rooms-toggle-btn { background: var(--glass-1); border: 0; box-shadow: var(--hi), 0 0 0 1px var(--border-soft); color: var(--text-secondary); }
.hub-voice-rooms-toggle-btn.has-active { color: var(--success); }
.hub-voice-room-add-btn, .hub-voice-room-leave-btn { border-radius: 12px; }
@media (min-width: 901px) {
  .hub-voice-rooms-side { left: calc(var(--rail-w) + 4px); top: 12px; bottom: 12px; }
  .hub-voice-rooms-toggle-btn { left: calc(var(--rail-w) + 4px); }
  .hub-voice-rooms-toggle-btn.open { left: calc(var(--rail-w) + 264px); }
}

/* ══ Aşama 3: kalan farklar ═════════════════════════════════════════════ */

/* ── Üye paneli düğmesi (başlıkta ikon) ve panel ─────────────────────── */
.members-in-header { position: static !important; transform: none !important; width: 38px; height: 38px; border-radius: var(--radius-sm); }
.members-in-header svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.members-in-header.open { color: var(--accent); background: var(--accent-soft); }
.hub-detail-side { background: var(--glass-2); border: 0; -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), var(--shadow-focus); }
@media (min-width: 901px) { .hub-detail-side { top: 12px; bottom: 12px; right: 12px; border-radius: var(--radius-lg); } }

/* ── ☰ menü: küçük, sade ─────────────────────────────────────────────── */
.topbar-menu-btn { width: 36px; height: 36px; padding: 0; font-size: 16px; color: var(--text-tertiary); display: grid; place-items: center; }
.topbar-menu-dropdown { border-radius: var(--radius); }

/* ── Profil penceresi: küçük, kompakt kart ───────────────────────────── */
.profile-modal-box, .profile-modal-box-minimal { width: 320px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
.profile-banner { padding: 26px 20px 16px; border-bottom: 1px solid var(--border-soft); background-image: linear-gradient(180deg, rgba(60, 150, 210, 0.16), transparent 80%); }
.profile-banner.has-image { background-image: linear-gradient(180deg, rgba(10, 13, 17, 0.1), rgba(10, 13, 17, 0.7)), var(--banner-img); background-size: cover; }
.profile-modal-box .banner-change-btn { font-size: 11px; padding: 4px 10px; opacity: 0.85; }
.profile-modal-username { font-size: 18px; letter-spacing: 0; font-weight: 650; }
.profile-modal-box hr, .profile-modal-box .profile-divider { border-color: var(--border-soft); }

/* ── Açılış animasyonu (hafif) ───────────────────────────────────────── */
@keyframes sauran-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-box, .profile-modal-box { animation: sauran-pop 0.22s var(--ease); }

/* ── Sesli oda ekranı: geniş sahne + alttaki cam kontrol hapı ────────── */
.call-overlay { background: var(--bg-app); }
.call-overlay::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 78% -8%, rgba(60, 150, 210, 0.14), transparent 65%); }
.call-overlay > .call-hub-room-view { position: relative; }
.call-header {
  order: 99; align-self: center; justify-content: center; gap: 10px; margin: 0 0 max(24px, env(safe-area-inset-bottom));
  padding: 8px; border: 0; border-radius: 999px; background: none; position: static; isolation: isolate;
}
.call-header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--glass-2);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), var(--shadow-focus); }
#call-hub-name, #call-header-duration { position: fixed; left: 0; right: 0; text-align: center; pointer-events: none; }
#call-hub-name { top: 40px; }
.call-overlay > .call-header { position: relative; }
.call-header span#call-hub-name { color: var(--text-primary); font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.call-header span#call-header-duration { color: var(--text-tertiary); font-size: 12.5px; font-weight: 500; top: 96px; }
.call-header button, .call-header #call-mute-btn, .call-header #call-screenshare-btn, .call-header #call-leave-btn, .call-header #call-minimize-btn {
  height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--glass-1); color: var(--text-primary);
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft); font-size: 13.5px; font-weight: 550; transition: 0.18s var(--ease); cursor: pointer;
}
.call-header button:hover { background: rgba(255, 255, 255, 0.08); }
#call-header-spacer{display:none}
.call-header #call-mute-btn { color: var(--accent); }
#call-screenshare-btn.active, .call-header #call-screenshare-btn.active { background: var(--accent-soft); color: var(--accent); }
.call-header #call-minimize-btn { width: 44px; padding: 0; color: var(--text-secondary); }
body .call-header #call-leave-btn { background: rgba(255, 122, 134, 0.14); color: var(--danger); box-shadow: none; }
body .call-header #call-leave-btn:hover { background: rgba(255, 122, 134, 0.24); color: var(--danger); }
.call-hub-room-view { align-items: center; justify-content: center; padding: 96px 24px 8px; }
.call-hub-room-grid { gap: 34px; align-content: center; align-items: flex-start; max-width: 760px; flex: 0 1 auto; }
.call-hub-room-person { width: 120px; gap: 12px; color: var(--text-secondary); }
.call-hub-room-avatar { width: 92px; height: 92px; font-size: 30px; border: 0; background: linear-gradient(140deg, #25445a, #182a38);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: 0.25s var(--ease); }
.call-hub-room-person:has(.voice-icon-btn.speaking) .call-hub-room-avatar { box-shadow: 0 0 0 3px var(--bg-app), 0 0 0 5px var(--accent-line), 0 0 30px rgba(92, 200, 255, 0.25); }
/* Sauran Plus: konuşurken farklı, mor/altın bir parıltı (özel konuşma göstergesi) */
.call-hub-room-person.plus-voice:has(.voice-icon-btn.speaking) .call-hub-room-avatar {
  box-shadow: 0 0 0 3px var(--bg-app), 0 0 0 5px #6d5bd0, 0 0 30px rgba(109, 91, 208, .45), 0 0 14px rgba(255, 213, 74, .35);
}
.call-hub-room-person:has(.voice-icon-btn.off) .call-hub-room-avatar { opacity: 0.6; }
.call-hub-room-person.is-self .call-hub-room-avatar { border: 0; }
.call-hub-room-name { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 500; color: inherit; }
.call-hub-room-screenshare-banner { border-radius: var(--radius); background: var(--accent-soft); border: 0; }
#call-hub-room-watch-btn { border: 0; background: var(--accent); color: #04202e; border-radius: 999px; }
.call-mini-bar { background: var(--glass-2); border: 0; box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); }
@media (max-width: 720px) {
  .call-header { gap: 6px; padding: 6px; }
  .call-header button { padding: 0 14px; font-size: 13px; }
  .call-hub-room-grid { gap: 22px; }
  .call-hub-room-avatar { width: 76px; height: 76px; }
  .call-hub-room-person { width: 96px; }
}

/* ── Admin / moderasyon ortak yüzey dili ─────────────────────────────── */
body:has(.adm-header), body:has(.mod-header) { background: var(--bg-app); color: var(--text-secondary); }
.login-box input[type="date"] { color-scheme: dark; font-weight: 400; color: var(--text-secondary); }
.login-box label, .login-box .field-label { color: var(--text-tertiary); }
@media (max-width: 900px) { .hub-back-btn { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .hub-detail-header { padding-left: 12px; } .home-empty { display: none !important; } }

/* ══ Aşama 5: hata düzeltmeleri + prototipe son yaklaştırma ═════════════ */

/* 1) Sesli odalar paneli ve üye paneli: kapalıyken gerçekten görünmez ve etkileşimsiz */
.hub-voice-rooms-side, .hub-detail-side { visibility: hidden; opacity: 0; pointer-events: none;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.25s; }
.hub-voice-rooms-side.open, .hub-detail-side.open { visibility: visible; opacity: 1; pointer-events: auto;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), visibility 0s; }
@media (min-width: 901px) {
  .hub-voice-rooms-side { transform: translateX(-24px); }
  .hub-voice-rooms-side.open { transform: none; }
  .hub-detail-side { transform: translateX(calc(100% + 40px)); }
  .hub-detail-side.open { transform: none; }
}

/* 5) Dokunma alanları: görsel küçük kalır, etkileşim alanı ~44 px */
@media (max-width: 900px) {
  .msg-avatar-btn, .hub-attach-btn, .hub-start-btn, .composer-icon-btn, .hub-icon-btn, .hub-voice-rooms-toggle-btn { position: relative; }
  .msg-avatar-btn::after, .hub-attach-btn::after, .composer-icon-btn::after { content: ""; position: absolute; inset: -6px; }
  .hub-start-btn::after { content: ""; position: absolute; inset: -4px -2px; }
  .hub-voice-rooms-toggle-btn { position: fixed; width: 20px; height: 96px; opacity: 0.8; }
  .hub-voice-rooms-toggle-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -24px; }
  .hub-voice-rooms-toggle-btn span { font-size: 9px; }
}

/* 6/7) Sesli oda kontrolleri: ikon tabanlı cam hap */
.call-header button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto; }
.call-header button, .call-header #call-mute-btn, .call-header #call-screenshare-btn, .call-header #call-leave-btn, .call-header #call-minimize-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.call-header #call-mute-btn.muted { color: var(--text-tertiary); }
.call-header-sub { position: fixed; left: 0; right: 0; top: 72px; text-align: center; pointer-events: none; color: var(--text-tertiary) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.call-hub-room-person .voice-status { opacity: 0.55; transform: scale(0.85); margin-top: 0; }
.call-hub-room-person .voice-self-tag { color: var(--text-tertiary); font-size: 12px; opacity: 1; }

/* 4) Sesli oda: katılımcı alanı kontrol hapının arkasına girmez */
.call-hub-room-view { min-height: 0; overflow-y: auto; justify-content: flex-start; }
.call-hub-room-grid { margin: auto 0; }
@media (max-width: 720px) {
  .call-hub-room-view { padding: 104px 16px 24px; }
  .call-hub-room-person { width: 84px; gap: 8px; }
  .call-hub-room-avatar { width: 64px; height: 64px; font-size: 22px; }
  .call-hub-room-grid { gap: 18px 14px; }
}

/* 9) Mesaj görünümü */
.hub-msg-text, .hub-msg .content { font-size: 15px; }
.hub-msg .username { font-size: 14.5px !important; }
.hub-msg .header { justify-content: flex-start; gap: 9px; }
.hub-msg .time, .hub-msg .header .time { margin-left: 0; order: 0; font-size: 12px; }
.hub-msg .msg-avatar-btn { background: linear-gradient(140deg, #25445a, #182a38); border: 0; border-radius: 50%; }
.hub-msg .msg-avatar-btn, .hub-msg .msg-avatar-btn .profile-avatar { color: #cfe9f7 !important; font-weight: 600; }

/* 10) Sohbet başlığı: sade */
.hub-detail-icon { display: none; }

/* 11) Lobi oluştur: prototipteki düzen */
#hub-create-modal .modal-box { width: 400px; max-width: 92vw; max-height: none; padding: 26px 26px 22px; }
#hub-create-modal .modal-header { border: 0; padding: 0 0 4px; font-size: 19px; font-weight: 650; }
#hub-create-close-btn { display: none; }
#hub-create-modal .hub-create-body { padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hub-create-desc { color: var(--text-secondary); font-size: 14px; margin: 0; }
#hub-create-modal .hub-create-image-wrap { order: 3; display: flex; flex-direction: row; align-items: center; gap: 12px; justify-content: flex-start; }
#hub-create-modal .hub-create-image-preview { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
.hub-create-image-btn { background: none; border: 0; box-shadow: none; color: var(--text-secondary); }
.hub-create-actions { order: 5; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.hub-create-actions .hub-create-submit { width: auto; padding: 0 20px; height: 40px; }
.hub-create-cancel { height: 40px; padding: 0 16px; border: 0; background: none; color: var(--text-secondary); border-radius: 12px; cursor: pointer; }
.hub-create-cancel:hover { background: var(--glass-1); color: var(--text-primary); }
#hub-create-error { order: 4; }

/* 12) Kayıt / giriş: marka + sade düğme */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.auth-brand i { width: 26px; height: 26px; border-radius: 50%; background: #000 url(icons/mark.svg) center / 100% 100% no-repeat; }
.auth-brand b { font-size: 20px; font-weight: 650; letter-spacing: 0.02em; color: var(--text-primary); }
.login-box h2 { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: 22px; }
.login-box button:not(.auth-switch button) { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* 8) Ayarlar: tam sayfa, gruplu satırlar */
@media (min-width: 769px) {
  #settings-modal { align-items: stretch; justify-content: stretch; padding: 0; background: var(--bg-app); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #settings-modal .settings-modal-box { position: static; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; background: transparent;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: sauran-pop 0.22s var(--ease); display: flex; flex-direction: column; align-items: center; }
  #settings-modal .modal-header { width: 100%; max-width: 900px; padding: 34px 0 6px; border: 0; font-size: 26px; font-weight: 650; }
  #settings-modal .settings-layout { width: 100%; max-width: 900px; gap: 32px; padding-top: 12px; }
  #settings-modal .settings-tabs { width: 190px; border: 0; padding: 4px 0; }
  #settings-modal .settings-modal-body { padding: 4px 0 40px; }
}
#settings-modal .settings-panel { gap: 0; }
#settings-modal .profile-field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 18px; }
#settings-modal .privacy-options { gap: 0; margin-top: 6px; }
#settings-modal .privacy-option { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--border-soft); padding: 14px 4px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
#settings-modal .privacy-option:hover { background: var(--glass-1); }
#settings-modal .privacy-option.selected { background: none; box-shadow: none; }
#settings-modal .privacy-option.selected .privacy-option-title { color: var(--accent); }
#settings-modal .privacy-option-desc { flex-basis: 100%; }
.notif-toggle { background: rgba(255, 255, 255, 0.1); box-shadow: none; border: 0; }
.notif-toggle input:checked ~ .notif-toggle-track { background: var(--accent); }
.notif-toggle-thumb { background: #dfe7ee; }
.notif-toggle input:checked ~ .notif-toggle-track .notif-toggle-thumb { background: #04202e; box-shadow: none; }

/* 3) Mobil profil: ekrana sığar, kaydırılır, güvenli alan */
@media (max-width: 720px) {
  #profile-modal .profile-modal-box, .profile-modal-box { width: 100%; max-width: none; max-height: calc(100dvh - 16px - env(safe-area-inset-top)); overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  #profile-modal { align-items: flex-end; padding: 0; }
  #hub-create-modal .modal-box { width: 100%; max-width: none; }
  /* 15) Mobil ana ekran sadeleşmesi */
  .topbar-logo { display: none; }
  .topbar-profile-btn { min-width: 44px; min-height: 44px; }
}

@media (max-width: 900px) { .hub-attach-btn { min-width: 44px; min-height: 44px; } }

/* Ayarlar: bildirim onay kutuları anahtar (switch) görünümünde — davranış aynı, yalnızca görsel */
.notif-pref-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); background: none; border-radius: 0; cursor: pointer; }
.notif-pref-row > span { flex: 1; color: var(--text-primary); }
.notif-pref-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; order: 2; flex: none; margin: 0; width: 42px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); position: relative; cursor: pointer; transition: background 0.2s var(--ease); border: 0;
}
.notif-pref-row input[type="checkbox"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #dfe7ee; transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
.notif-pref-row input[type="checkbox"]:checked { background: var(--accent); }
.notif-pref-row input[type="checkbox"]:checked::after { transform: translateX(18px); background: #04202e; }
.notif-pref-row input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
.notif-pref-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══ Mobil hata düzeltmeleri (5 madde) ══════════════════════════════════ */

/* 1) Sesli oda kartı: sağ sütun kartın içinde, tek satırda, taşmadan */
.hub-voice-room-row { overflow: hidden; align-items: center; }
.hub-voice-room-info { min-width: 0; }
.hub-voice-room-side { align-self: center; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; min-width: 0; }
.hub-voice-room-count { margin: 0; white-space: nowrap; }
.hub-voice-room-delete { order: 2; }
.hub-voice-room-toggle { max-width: 100%; white-space: nowrap; }

/* 3) Üyeler paneli: çubuğun hemen altında başlar, üstte boşluk yok */
@media (max-width: 900px) {
  .hub-detail-side { top: calc(env(safe-area-inset-top) + 46px); padding-top: 10px; }
  .hub-side-title { line-height: 1.4; margin-top: 0; }
}

/* 4) Açılır menüler opak ve üstte: arkadaki metin görünmez */
.composer-attach-menu, .msg-actions-menu, .topbar-menu-dropdown, .composer-attach-wrap .liquid-glass {
  background: rgba(16, 22, 29, 0.98); z-index: 70;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.composer-attach-wrap { position: relative; z-index: 40; }

/* 5) Klavye: mobilde composer'da bulanıklık (backdrop-filter) yok; yeniden boyamada sıçrama azalır */
@media (max-width: 900px) {
  .composer-input-box, .hub-composer .composer-input-box { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 27, 35, 0.92); }
  .hub-detail-main, .chat-area, #hub-detail-view { min-height: 0; }
  #hub-feed { overscroll-behavior: contain; }
}

/* ══ iOS/mobil gerçek cihaz hataları ════════════════════════════════════ */
/* Başlıktaki üye düğmesi yalnızca kendi paneli açıkken diğer panellerin üstünde kalır (ses paneline binmesin) */
.members-in-header { z-index: auto; }
.members-in-header.open { z-index: 61; }
.hub-voice-rooms-side.open { z-index: 65; }

@media (max-width: 900px) {
  /* Klavye açıkken görünüm alanı (visualViewport) kadar yükseklik: composer ve alt sayfalar klavyenin üstünde kalır */
  html { overscroll-behavior: none; }
  /* iOS: klavye açılınca görünür alan kayar (offsetTop); gövde görünür alana sabitlenir, composer klavyenin hemen üstünde kalır */
  body { position: fixed; top: var(--vvtop, 0px); left: 0; right: 0; width: 100%; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); overflow: hidden; }
  .modal-overlay { top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 100dvh); }
  .modal-overlay .modal-box, .modal-overlay .profile-modal-box { max-height: calc(var(--vvh, 100dvh) - 16px); overflow-y: auto; }
  .hub-start-menu { left: 12px; right: auto; z-index: 70; max-width: calc(100vw - 24px); }
}

/* Ayarlar: şifre alanları ve hesap silme — daha ferah ve büyük */
#settings-modal .settings-panel input[type="password"] {
  display: block; width: 100%; height: 50px; padding: 0 16px; margin: 0 0 14px; font-size: 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-soft); color: var(--text-primary); outline: 0;
}
#settings-modal .settings-panel input[type="password"]:focus { border-color: var(--accent-line); background: rgba(255, 255, 255, 0.065); }
#settings-modal .settings-panel input[type="password"]:first-of-type { margin-top: 10px; }
#settings-password-btn, #settings-delete-account-btn { width: 100%; height: 50px; margin-top: 6px; font-size: 15px; border-radius: 14px; }
#settings-password-error { margin: -4px 0 8px; }
#settings-delete-password { margin-top: 14px; }
#settings-delete-account-btn { margin-top: 2px; justify-content: center; }

/* Lobi fotoğrafları: listede küçük, üst çubukta ortada cam baloncuk */
.lobby-avatar { display: grid; place-items: center; overflow: hidden; border-radius: 50%; flex: none; width: 28px; height: 28px;
  font-size: 12px; font-weight: 600; color: #cfe9f7; background: linear-gradient(140deg, #25445a, #182a38); opacity: 1; }
.lobby .mark.lobby-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(140deg, #25445a, #182a38); opacity: 1; }
.lobby-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lobby.active .lobby-avatar { box-shadow: 0 0 0 2px var(--bg-app), 0 0 0 3.5px var(--accent); background: linear-gradient(140deg, #25445a, #182a38); }
.topbar-lobby-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; padding: 3px;
  background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.3); backdrop-filter: blur(var(--blur-1)) saturate(1.3);
}
.lobby-avatar-lg { width: 100%; height: 100%; font-size: 17px; }
.topbar { position: relative; }
@media (min-width: 901px) { .topbar-lobby-badge { top: 30px; } }

/* Ana menü ve lobi çekmecesi: iki liste + kaydırma */
.lobby-nav-sub { padding: 16px 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.lobby-nav-list { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
#hub-list-view { overflow-y: auto; padding-bottom: 40px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
.hub-list-subtitle { text-transform: none; letter-spacing: 0.02em; font-size: 13px; font-weight: 650; color: var(--text-secondary); }
@media (max-width: 900px) {
  #hub-list-view { padding: 12px 18px calc(40px + env(safe-area-inset-bottom)); }
  .hub-list-header { margin-bottom: 14px; }
  .hub-list-section { margin-bottom: 22px; }
  .hub-list-grid { max-width: none; }
}

/* Lobi bilgi penceresi */
.topbar-lobby-badge { border: 0; cursor: pointer; }
.topbar-lobby-badge:hover { box-shadow: var(--hi), 0 0 0 1px var(--accent-line), 0 8px 24px -8px rgba(0, 0, 0, 0.6); }
.hub-info-box { width: 340px; max-width: 92vw; max-height: none; padding: 26px 24px 20px; text-align: center; }
.hub-info-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hub-info-head h3 { font-size: 20px; font-weight: 650; color: var(--text-primary); overflow-wrap: anywhere; }
.lobby-avatar.hub-info-avatar { width: 84px; height: 84px; font-size: 30px; }
.hub-info-desc { margin: 14px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.hub-info-rows { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); text-align: left; }
.hub-info-rows dt { color: var(--text-tertiary); font-size: 13px; }
.hub-info-rows dd { color: var(--text-primary); font-size: 14px; text-align: right; margin: 0; overflow-wrap: anywhere; }
.hub-info-close { margin-top: 20px; width: 100%; height: 44px; border: 0; border-radius: 12px; cursor: pointer; color: var(--text-primary);
  background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.hub-info-close:hover { background: rgba(255, 255, 255, 0.07); }
@media (max-width: 720px) { .hub-info-box { width: 100%; max-width: none; } }

/* Ana menü: açılır liste düğmeleri */
.hub-list-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; margin-bottom: 8px; cursor: pointer; user-select: none;
  border-radius: 14px; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft);
  color: var(--text-primary) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none;
  transition: background 0.18s var(--ease);
}
.hub-list-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.hub-list-toggle::after { content: attr(data-count); margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.hub-list-toggle::before { content: ""; order: 3; width: 8px; height: 8px; margin-left: 6px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(-45deg); transition: transform 0.2s var(--ease); }
.hub-list-toggle.open::before { transform: rotate(45deg); }
.hub-list-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══ Üye listesi ayracı ve DM başlığı ═══════════════════════════════════ */
.hub-member-divider { height: 1px; margin: 6px 6px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); flex: none; }
#dm-modal-title { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
#dm-modal-title .msg-avatar-btn { width: 36px; height: 36px; font-size: 14px; flex: none; }
#dm-modal-title .dm-title-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dm-modal .dm-call-btn { width: 40px; height: 40px; font-size: 17px; margin-left: auto; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
#dm-modal .dm-call-btn:hover { background: rgba(92, 200, 255, 0.26); }
#dm-modal .dm-call-btn.in-call { background: rgba(255, 46, 70, 0.2); border-color: #ff2e46; color: #ff2e46; }
#dm-modal #dm-close-btn { width: 40px; height: 40px; font-size: 16px; margin-left: 8px; flex: none; background: rgba(255, 255, 255, 0.12); border: 0; color: var(--text-primary); }
#dm-modal #dm-close-btn:hover { background: rgba(255, 255, 255, 0.2); color: var(--text-primary); }

/* ══ Sesli görüşme: mikrofon / çıkış seçimi ═════════════════════════════ */
.call-header .call-audio-arrow { width: 30px; height: 44px; padding: 0; border-radius: 999px; margin-left: -6px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; color: var(--text-secondary); }
.call-header .call-audio-arrow.has-mic-icon { width: auto; min-width: 52px; padding: 0 12px 0 10px; margin-left: 0; }
.call-header .call-audio-arrow svg { width: 18px; height: 18px; margin: 0; }
.call-header .call-audio-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; color: var(--accent); align-items: center; justify-content: center; }
.call-header .call-audio-btn.on-earpiece { background: var(--accent-soft); }
.call-device-menu { position: fixed; z-index: 90; flex-direction: column; gap: 2px; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 14px; }
.call-device-menu-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.call-device-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font-size: 13.5px; text-align: left; cursor: pointer; }
.call-device-menu button:hover, .call-device-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.call-device-menu button.selected { color: var(--accent); }
.call-device-check { width: 16px; flex: none; text-align: center; }

/* Gürültü engelleme: ayarlar açıklaması ve çağrı düğmesi */
.settings-voice-hint { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }
.call-header .call-nc-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.call-header .call-nc-btn.on { background: var(--accent-soft); color: var(--accent); }

/* DM arama kaydı (sistem satırı) */
.dm-call-log { display: flex; justify-content: center; margin: 6px 0; }
.dm-call-log-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: var(--text-secondary); background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); }
.dm-call-log.is-missed .dm-call-log-pill { color: var(--danger); }
.dm-call-log-time { color: var(--text-tertiary); font-size: 11.5px; }

/* Bildirim izni isteği (girişten sonra bir kez, kapatılabilir) */
.notif-prompt { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 14px; width: min(520px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 16px; color: var(--text-primary); font-size: 13.5px; line-height: 1.4; }
.notif-prompt-text { flex: 1; }
.notif-prompt-actions { display: flex; gap: 8px; flex: none; }
.notif-prompt button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.notif-prompt-later { background: transparent; color: var(--text-secondary); }
.notif-prompt-enable { background: var(--accent); color: #04202e; }
@media (max-width: 520px) { .notif-prompt { flex-direction: column; align-items: stretch; } .notif-prompt-actions { justify-content: flex-end; } }

/* ══ Arama çalma / gelen arama: liquid glass, yuvarlak köşeler, profil görseli ═══════════ */
.call-ring-bg { position: absolute; inset: -40px; z-index: 0; pointer-events: none; background-size: cover; background-position: center; filter: blur(42px) saturate(1.15); opacity: 0.5; transform: scale(1.1); }
.call-overlay > .call-ringing-state { position: relative; z-index: 1; }
.call-ringing-avatar { width: 104px; height: 104px; overflow: hidden; font-size: 44px; background: var(--glass-2); border: 0; box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 0 34px rgba(92, 200, 255, 0.28); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.call-ringing-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.call-avatar-initial { font-size: 40px; font-weight: 650; line-height: 1; color: var(--user-color, var(--text-primary)); }
.call-ringing-text { color: var(--text-secondary); font-weight: 550; }
.call-ringing-cancel-btn, .dm-incoming-decline-btn, .dm-incoming-accept-btn {
  min-width: 132px; min-height: 48px; padding: 0 26px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.call-ringing-cancel-btn, .dm-incoming-decline-btn { background: rgba(255, 70, 90, 0.2); border: 1px solid rgba(255, 110, 125, 0.45); color: #ffb3bb; box-shadow: var(--hi); }
.call-ringing-cancel-btn:hover, .dm-incoming-decline-btn:hover { background: rgba(255, 70, 90, 0.34); color: #fff; }
.dm-incoming-accept-btn { background: rgba(92, 200, 255, 0.2); border: 1px solid rgba(92, 200, 255, 0.5); color: #bfe9ff; box-shadow: var(--hi); }
.dm-incoming-accept-btn:hover { background: rgba(92, 200, 255, 0.34); color: #fff; }
.dm-incoming-call-modal { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dm-incoming-call-box { background: var(--glass-2); border: 0; border-radius: 32px; padding: 34px 36px; box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 24px 60px -16px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.3); backdrop-filter: blur(var(--blur-2)) saturate(1.3); }
.dm-incoming-call-username { color: var(--text-primary); font-size: 18px; font-weight: 650; }
.dm-incoming-call-sub { color: var(--text-tertiary); font-size: 13px; }

/* Oturum kontrolü sürerken (önceden giriş yapılmış cihaz) giriş ekranı görünmez; sonuç gelince kaldırılır */
html.auth-pending #login-screen { visibility: hidden; }

/* ══ Keşfet ═══════════════════════════════════════════════════════════════ */
.discover-view { flex-direction: column; gap: 18px; padding: 24px clamp(14px, 4vw, 40px); overflow-y: auto; }
.discover-head { display: flex; flex-direction: column; gap: 12px; max-width: 980px; width: 100%; margin: 0 auto; }
.discover-title { margin: 0; font-size: 26px; font-weight: 650; color: var(--text-primary); letter-spacing: -0.01em; }
.discover-subtitle { margin: -6px 0 4px; font-size: 14px; color: var(--text-tertiary); }
.discover-search { width: 100%; height: 48px; padding: 0 16px; border-radius: 14px; border: 0; color: var(--text-primary); font-size: 15px; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); outline: none; -webkit-appearance: none; appearance: none; }
.discover-search:focus { box-shadow: var(--hi), 0 0 0 1px var(--accent-line); }
.discover-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.discover-chips::-webkit-scrollbar { display: none; }
.discover-chip { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--glass-1); color: var(--text-secondary); font-size: 13.5px; font-weight: 550; cursor: pointer; box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.discover-chip.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.discover-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.discover-select { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 0; color: var(--text-primary); font-size: 14px; background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); width: 100%; max-width: 100%; }
.discover-filters .discover-select { width: auto; min-width: 150px; flex: 1 1 150px; }
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; max-width: 980px; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { .discover-grid { grid-template-columns: 1fr; } }
.discover-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); -webkit-backdrop-filter: blur(var(--blur-1)); backdrop-filter: blur(var(--blur-1)); cursor: pointer; text-align: left; }
.discover-card:hover { box-shadow: var(--hi), 0 0 0 1px var(--accent-line); }
.discover-card-top { display: flex; align-items: center; gap: 12px; }
.discover-card-avatar { width: 48px; height: 48px; border-radius: 14px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--glass-1); }
.discover-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.discover-card-name { font-size: 15.5px; font-weight: 650; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.discover-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: var(--accent); background: var(--accent-soft); }
.discover-tag.muted { color: var(--text-secondary); background: var(--glass-1); }
.discover-card-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.discover-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-tertiary); }
.discover-card-meta .voice-live { color: var(--success); }
.discover-card-cta { align-self: flex-start; margin-top: 2px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.discover-more { align-self: center; min-height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--glass-1); color: var(--text-primary); font-size: 14px; cursor: pointer; box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.discover-empty { max-width: 980px; width: 100%; margin: 20px auto; text-align: center; color: var(--text-tertiary); font-size: 14.5px; line-height: 1.6; }
.discover-detail-box { width: min(560px, calc(100vw - 20px)); max-height: calc(var(--vvh, 100dvh) - 20px); display: flex; flex-direction: column; }
.discover-detail-body { overflow-y: auto; padding: 4px 4px 8px; display: flex; flex-direction: column; gap: 14px; }
.discover-detail-top { display: flex; align-items: center; gap: 14px; }
.discover-detail-top .discover-card-avatar { width: 64px; height: 64px; border-radius: 18px; }
.discover-detail-owner { font-size: 13px; color: var(--text-tertiary); }
.discover-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.discover-fact { padding: 10px 12px; border-radius: 12px; background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); }
.discover-fact b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.discover-fact span { font-size: 14px; color: var(--text-primary); }
.discover-detail-section h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.discover-detail-section p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.discover-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.discover-detail-actions { display: flex; gap: 10px; align-items: center; padding-top: 10px; }
.discover-detail-actions .hub-create-submit { flex: 1; min-height: 48px; }
.discover-report-btn { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-tertiary); font-size: 13px; cursor: pointer; }
.hub-discover-settings { display: flex; flex-direction: column; gap: 8px; }
.hubset-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }
.hubset-count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--accent-soft); color: var(--accent); }
.hubset-count:empty { display: none; }
.join-request-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); }
.join-request-row .join-request-name { flex: 1; color: var(--text-primary); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.join-request-row button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.join-request-approve { background: var(--accent-soft); color: var(--accent); }
.join-request-reject { background: rgba(255, 90, 105, 0.16); color: #ffb3bb; }

/* ══ Mobil sol ray: Ana Menü · Arkadaşlar · Keşfet · Arkadaş Ekle · (altta) Profil — liquid glass ═══════════ */
:root { --rail-w: 76px; }
.rail-btn-friends { display: none; }
@media (max-width: 900px) {
  #chat-screen[style*="flex"] { padding-left: calc(var(--rail-w) + env(safe-area-inset-left)); }
  .app-rail {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: absolute; z-index: 55; left: calc(8px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); width: 60px;
    padding: 14px 0; border-radius: 30px; background: var(--glass-2);
    -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
  }
  .app-rail-logo { display: none; }
  .app-rail .rail-btn { width: 46px; height: 46px; border-radius: 50%; flex: none; }
  .app-rail .rail-btn:hover { background: var(--glass-1); }
  .app-rail .rail-btn.on { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
  #rail-home { order: 1; }
  .rail-btn-friends { display: grid; order: 2; }
  #rail-discover { order: 3; }
  #rail-friend { order: 4; }
  #rail-notifications, #rail-settings { display: none; }
  .rail-spacer { order: 8; flex: 1; }
  .rail-avatar { order: 9; width: 46px; height: 46px; margin-top: 0; box-shadow: 0 0 0 1px var(--border-soft-strong); }
  .topbar-profile-btn { display: none; }
  .rail-dot { top: 8px; right: 8px; }

  /* Çekmece rayın yanında açılır; ray hep görünür kalır */
  .lobby-nav { left: calc(var(--rail-w) + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); width: min(300px, calc(100vw - var(--rail-w) - 20px)); border-radius: 28px; padding: 18px 12px 12px; transform: translateX(calc(-100% - var(--rail-w) - 24px)); }
  body.lobby-drawer-open .lobby-nav { transform: none; }
  /* Lobiler ve Arkadaşlar ayrı modlarda: hamburger = Lobiler, ray düğmesi = Arkadaşlar */
  body:not(.drawer-friends) .lobby-nav .friends-sidebar { display: none !important; }
  body.drawer-friends .lobby-nav-head, body.drawer-friends #lobby-nav-list { display: none; }
  body.drawer-friends .lobby-nav .friends-sidebar { max-height: none; flex: 1 1 auto; border-top: 0; margin-top: 0; padding-top: 4px; }
  .hub-voice-rooms-toggle-btn { left: var(--rail-w); }
  .hub-voice-rooms-side { left: var(--rail-w); }
}

/* Sık Tercihlerim: arkadaş panelinin en üstünde, 3 profil yan yana (liquid glass) */
.friends-favorites { margin: 2px 2px 14px; padding: 12px 10px 10px; border-radius: 22px; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); -webkit-backdrop-filter: blur(var(--blur-1)); backdrop-filter: blur(var(--blur-1)); }
.friends-favorites-title { padding: 0 4px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.friends-favorites-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.friends-fav { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 4px 2px; border: 0; border-radius: 14px; background: none; color: var(--text-secondary); cursor: pointer; }
.friends-fav:hover, .friends-fav:focus-visible { background: var(--accent-soft); color: var(--text-primary); outline: none; }
.friends-fav-avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 650; color: var(--user-color, var(--text-primary)); background: var(--glass-2); box-shadow: 0 0 0 1px var(--border-soft-strong); }
.friends-fav-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.friends-fav-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #4b5563; box-shadow: 0 0 0 2px var(--bg-app); }
.friends-fav-dot.on { background: var(--success); }
.friends-fav-unread { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #04202e; background: var(--accent); }
.friends-fav-name { width: 100%; text-align: center; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keşfet: arama/filtre araç çubuğu düğmeyle açılır; beğeni ve popülerlik */
.discover-head-row { display: flex; align-items: center; gap: 14px; }
.discover-head-row .discover-title { margin: 0; }
.discover-head-row .discover-subtitle { margin: 2px 0 0; }
.discover-search-toggle { position: relative; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text-secondary); background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); -webkit-backdrop-filter: blur(var(--blur-1)); backdrop-filter: blur(var(--blur-1)); }
.discover-search-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.discover-search-toggle[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.discover-filter-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-app); }
.discover-tools { display: flex; flex-direction: column; gap: 12px; }
.discover-pop { display: inline-flex; align-items: center; gap: 4px; }
.discover-pop.level-1 { color: #ffb86b; }
.discover-pop.level-2 { color: #ff9f43; font-weight: 600; }
.discover-pop.level-3 { color: #ff7a59; font-weight: 700; }
.discover-like-btn { flex: none; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; color: var(--text-secondary); background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.discover-like-btn.liked { color: #ff7a8a; background: rgba(255, 90, 105, 0.14); box-shadow: 0 0 0 1px rgba(255, 110, 125, 0.4); }
.discover-like-btn:disabled { opacity: 0.55; cursor: default; }
.discover-superlike-btn { flex: none; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; cursor: pointer; color: #ffd27a; background: rgba(255, 190, 70, 0.12); box-shadow: 0 0 0 1px rgba(255, 200, 100, 0.35); white-space: nowrap; }
.discover-detail-actions { flex-wrap: wrap; }

/* Seviye ve puan (Keşfet) */
.discover-level { padding: 12px 14px; border-radius: 16px; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.discover-level-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--text-secondary); }
.discover-level-top b { font-size: 16px; color: var(--text-primary); }
.discover-level-bar { height: 8px; margin: 10px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.discover-level-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #8fe0ff); }
.discover-level-note { font-size: 12px; color: var(--text-tertiary); }
.discover-lv { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #ffd27a; background: rgba(255, 190, 70, 0.14); }

/* Sauran Coin, kilitli beğeni durumu */
.discover-wallet { margin-left: auto; flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; cursor: pointer; color: #ffd27a; background: rgba(255, 190, 70, 0.12); box-shadow: 0 0 0 1px rgba(255, 200, 100, 0.3); }
.discover-like-btn.locked { color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--border-soft); }
.discover-detail-hint { min-height: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }
.discover-detail-hint:empty { display: none; }
.discover-superlike-btn.confirming { color: #04202e; background: #ffd27a; box-shadow: none; }
.discover-superlike-btn:disabled { opacity: 0.55; cursor: default; }

/* Lobi Süper Beğeni animasyonu + Destekçiler şeridi */
.lobby-supporters{display:flex;align-items:center;gap:6px;padding:6px 12px;overflow-x:auto;white-space:nowrap}
.lobby-supporters[hidden]{display:none}
.lobby-supporters .ls-label{font-size:11px;color:#ffd166;margin-right:4px;flex:none}
.lobby-supporters .ls-avatar{flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:rgba(255,209,102,.18);border:1px solid rgba(255,209,102,.55)}
.lobby-supporters .ls-avatar img{width:100%;height:100%;object-fit:cover}
.super-like-burst{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:10000;pointer-events:none;text-align:center;animation:slbLife 3.2s ease forwards}
.super-like-burst .slb-star{font-size:64px;filter:drop-shadow(0 0 18px rgba(255,209,102,.9));animation:slbPop 1s ease-out}
.super-like-burst .slb-text{margin-top:6px;padding:8px 16px;border-radius:999px;font-weight:bold;font-size:14px;color:#fff3c4;background:rgba(20,22,28,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,209,102,.5)}
@keyframes slbPop{0%{transform:scale(.2) rotate(-40deg);opacity:0}60%{transform:scale(1.35) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes slbLife{0%{opacity:0;top:30%}12%{opacity:1;top:22%}80%{opacity:1}100%{opacity:0;top:18%}}
@media (prefers-reduced-motion:reduce){.super-like-burst .slb-star{animation:none}}

/* ── Etiketler: butonların altında kısa açıklama (düzeni bozmasın diye mutlak konum) ─── */
[data-lbl] { position: relative; }
[data-lbl]::after { content: attr(data-lbl); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; font-size: 9.5px; line-height: 1.1; font-weight: 500; letter-spacing: 0; color: var(--text-tertiary); white-space: nowrap; pointer-events: none; }
.topbar-profile-btn[data-lbl]::after { display: none; }
.app-rail { gap: 16px; }
.topbar-superlike-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 38px; padding: 0 6px; border: 0; background: none; color: #ffd166; font-size: 18px; cursor: pointer; }
.topbar-superlike-btn.confirming { color: #fff3c4; text-shadow: 0 0 10px rgba(255,209,102,.9); }

/* ── Mobil: üst çubuk daralt; Keşfet/Lobi'de ray + üç çizgi yok ───────── */
@media (max-width: 900px) {
  .topbar { padding-top: 2px; padding-bottom: 2px; min-height: 0; }
  .topbar-profile-btn, .topbar-menu-btn { min-height: 38px; }
  body[data-view="hub-detail"] .app-rail, body[data-view="discover"] .app-rail,
  body[data-view="hub-detail"] .lobby-nav-toggle, body[data-view="discover"] .lobby-nav-toggle,
  body[data-view="hub-detail"] #topbar-menu-btn, body[data-view="discover"] #topbar-menu-btn { display: none !important; }
  body[data-view="hub-detail"] #chat-screen[style*="flex"], body[data-view="discover"] #chat-screen[style*="flex"] { padding-left: env(safe-area-inset-left); }

  /* Keşfet: başlık üst çubuğa taşındı; başlık bloğu küçük ve yukarıda; Coin üst çubukta küçük */
  body[data-view="discover"] .discover-title { display: none; }
  body[data-view="discover"] .discover-subtitle { font-size: 11.5px; margin: 0; }
  body[data-view="discover"] .discover-head { gap: 6px; }
  body[data-view="discover"] .discover-search-toggle { width: 34px; height: 34px; }
  body[data-view="discover"] .discover-search-toggle svg { width: 16px; height: 16px; }
  body[data-view="discover"] .topbar-right .discover-wallet { transform: scale(.82); transform-origin: right center; }

  /* Keşfet kartları: yan yana 3 */
  body[data-view="discover"] .discover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body[data-view="discover"] .discover-card { padding: 10px 8px; gap: 6px; border-radius: 16px; align-items: center; text-align: center; }
  body[data-view="discover"] .discover-card-top { flex-direction: column; gap: 6px; }
  body[data-view="discover"] .discover-card-avatar { width: 40px; height: 40px; border-radius: 12px; }
  body[data-view="discover"] .discover-card-name { font-size: 12.5px; max-width: 100%; }
  body[data-view="discover"] .discover-card-tags { display: none; }
  body[data-view="discover"] .discover-card-desc { font-size: 11px; line-height: 1.35; min-height: 0; -webkit-line-clamp: 2; text-align: center; }
  body[data-view="discover"] .discover-card-meta { justify-content: center; font-size: 10.5px; gap: 2px 6px; }
  body[data-view="discover"] .discover-card-meta > span:last-child, body[data-view="discover"] .discover-card-meta > span:nth-child(n+4) { display: none; }
  body[data-view="discover"] .discover-card-cta { align-self: stretch; min-height: 30px; padding: 0 6px; font-size: 11.5px; }
}
#topbar-context-title { cursor: pointer; padding: 10px 6px; } body:not([data-view="discover"]) #topbar-context-title { cursor: default; }
@media (max-width: 900px) { body[data-view="discover"] .discover-head { margin-bottom: 4px; } }
@media (max-width: 900px) { .topbar-lobby-badge { width: 36px; height: 36px; padding: 2px; } .topbar-lobby-badge .lobby-avatar-lg { font-size: 14px; } .topbar { min-height: 46px; } }

/* ── Üst çubuk etiketleri çubuğun içinde kalsın ─────────────────────── */
.topbar [data-lbl] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; min-height: 0; gap: 1px; }
.topbar [data-lbl]::after { position: static; transform: none; margin-top: 0; }
.topbar .topbar-lobby-actions [data-lbl] { height: 38px; padding-top: 2px; }
.topbar-right .discover-wallet[data-lbl] { display: inline-flex; flex-direction: row; height: 26px; padding: 0 10px; transform: none; }
.topbar-right .discover-wallet[data-lbl]::after { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0; }
/* Yukarıdaki genel ".topbar [data-lbl]" kuralı masaüstünde "Lobiler" çentiğini de (display:none olması gerekirken)
   görünür kılıyordu, çünkü öznitelik seçicisi masaüstü-gizleme kuralından daha özgüldü. Masaüstünde kesin kapatıyoruz. */
@media (min-width: 901px) { .topbar .lobby-nav-toggle[data-lbl] { display: none !important; } }

/* ── Lobi üst çubuğu: liquid glass hap + sürekli yıldız tozu ─────────── */
.topbar-lobby-actions { align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.3); backdrop-filter: blur(var(--blur-1)) saturate(1.3); }
.topbar-lobby-actions .topbar-superlike-btn, .topbar-lobby-actions .hub-icon-btn, .topbar-lobby-actions .hub-members-toggle-btn { min-width: 40px; }
.topbar-lobby-actions .topbar-superlike-btn { background: none; }
.sl-star { position: relative; display: inline-block; line-height: 1; }
.sl-star i { position: absolute; left: 50%; bottom: 55%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 5px 1px rgba(255,209,102,.9); opacity: 0; animation: slDust 2.4s ease-out infinite; }
.sl-star i:nth-child(1) { margin-left: -9px; animation-delay: 0s; }
.sl-star i:nth-child(2) { margin-left: 4px; animation-delay: .5s; }
.sl-star i:nth-child(3) { margin-left: -3px; animation-delay: 1s; width: 2px; height: 2px; }
.sl-star i:nth-child(4) { margin-left: 8px; animation-delay: 1.5s; }
.sl-star i:nth-child(5) { margin-left: -6px; animation-delay: 1.9s; width: 2px; height: 2px; }
@keyframes slDust { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-20px) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sl-star i { animation: none; } }

@media (max-width: 900px) {
  /* Lobi: geri + ad üst çubukta; sayaç/üyeler başlığın hemen altında, biraz sağda */
  body[data-view="hub-detail"] .topbar-left { gap: 4px; }
  body[data-view="hub-detail"] .topbar-left .hub-back-btn { min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
  body[data-view="hub-detail"] .topbar-left #hub-detail-name { font-size: 16px; max-width: calc(50vw - 62px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
  body[data-view="hub-detail"] .hub-detail-header { padding-top: 2px; padding-bottom: 4px; padding-right: 28px; justify-content: flex-end; gap: 4px; }
  body[data-view="hub-detail"] .hub-voice-rooms-toggle-btn, body[data-view="hub-detail"] .hub-voice-rooms-side { left: 0; }
  #discover-open-btn, #friend-add-open-btn { display: none !important; }
}
/* Sesli odalar sekmesi en sola (Lobi ekranında ray yok) */

/* ── Popüler Lobiler + 1./2./3. rozetleri ────────────────────────────── */
.discover-popular { max-width: 980px; width: 100%; margin: 0 auto 14px; padding: 12px 12px 14px; border-radius: 22px; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.discover-popular-title { margin: 0 0 10px; font-size: 14px; font-weight: 650; color: #ffd166; letter-spacing: .02em; }
.discover-grid-popular { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.discover-card { position: relative; }
.rank-badge { position: absolute; top: -7px; left: -5px; z-index: 2; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 800; color: #3a2a00; }
.rank-badge-1 { color: #4a3000; background: linear-gradient(140deg, #fff3b0, #ffd23f 45%, #e89b0c); box-shadow: 0 0 0 1.5px #fff0a0, 0 0 14px 2px rgba(255,200,40,.8); animation: rankGlow 2.2s ease-in-out infinite alternate; }
.rank-badge-1 b { font-size: 12px; margin-right: 1px; }
.rank-badge-2 { background: linear-gradient(140deg, #ffffff, #cfd6de 50%, #8d98a6); box-shadow: 0 0 0 1.5px #e6ebf1; }
.rank-badge-3 { color: #3a1d08; background: linear-gradient(140deg, #f3c9a0, #cd7f32 55%, #8b4e1c); box-shadow: 0 0 0 1.5px #e0a56b; }
.discover-card.rank-1 { box-shadow: var(--hi), 0 0 0 2px #f5c542, 0 0 22px rgba(245,197,66,.4); }
.discover-card.rank-2 { box-shadow: var(--hi), 0 0 0 2px #c4ccd6; }
.discover-card.rank-3 { box-shadow: var(--hi), 0 0 0 2px #cd7f32; }
.discover-card.rank-1::after { content: ''; position: absolute; inset: -8px; border-radius: 26px; pointer-events: none;
  background:
    radial-gradient(circle, #fff8d0 0 1.6px, transparent 2.4px) 8% 6% / 22px 22px no-repeat,
    radial-gradient(circle, #ffe27a 0 1.4px, transparent 2.2px) 92% 12% / 20px 20px no-repeat,
    radial-gradient(circle, #fff8d0 0 1.6px, transparent 2.4px) 96% 70% / 22px 22px no-repeat,
    radial-gradient(circle, #ffe27a 0 1.4px, transparent 2.2px) 12% 94% / 20px 20px no-repeat,
    radial-gradient(circle, #fff8d0 0 1.4px, transparent 2.2px) 55% 100% / 20px 20px no-repeat,
    radial-gradient(circle, #ffe27a 0 1.4px, transparent 2.2px) 50% 0% / 20px 20px no-repeat;
  animation: rankTwinkle 1.8s ease-in-out infinite alternate; }
@keyframes rankGlow { from { box-shadow: 0 0 0 1.5px #fff0a0, 0 0 8px 1px rgba(255,200,40,.6); } to { box-shadow: 0 0 0 1.5px #fff0a0, 0 0 18px 4px rgba(255,200,40,.95); } }
@keyframes rankTwinkle { from { opacity: .25; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .rank-badge-1, .discover-card.rank-1::after { animation: none; } }
@media (max-width: 900px) {
  body[data-view="discover"] .discover-grid-popular .discover-card { padding: 16px 8px 12px; gap: 8px; }
  body[data-view="discover"] .discover-grid-popular .discover-card-avatar { width: 52px; height: 52px; }
  body[data-view="discover"] .discover-grid-popular .discover-card-name { font-size: 13.5px; }
  body[data-view="discover"] .discover-grid-popular .discover-card-cta { min-height: 34px; font-size: 12.5px; }
}

/* ── Lobi oluşturma: Görsel Ekle düz buton + Keşfet ayarları ────────── */
#hub-create-modal .hub-create-image-btn { padding: 10px 18px; border-radius: 999px; background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); color: var(--text-primary); font-size: 13.5px; }
#hub-create-modal .hub-create-image-preview { width: 44px; height: 44px; overflow: hidden; }
.hub-create-discover { display: flex; flex-direction: column; gap: 8px; order: 5; }
#hub-create-modal .hub-create-body { max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) { body[data-view="hub-detail"] .hub-detail-header .hub-title-pill { margin-left: auto; } }
@media (max-width: 900px) {
  body[data-view="hub-detail"] .hub-detail-header .hub-title-pill { flex: 0 1 auto; margin-left: 0; }
  .topbar-lobby-actions [data-lbl]::after { font-size: 9px; }
  .topbar-lobby-actions .topbar-superlike-btn, .topbar-lobby-actions .hub-icon-btn, .topbar-lobby-actions .hub-members-toggle-btn { min-width: 0; padding: 0 7px; }
}
@media (max-width: 900px) {
  .topbar-lobby-actions .topbar-superlike-btn, .topbar-lobby-actions .hub-icon-btn, .topbar-lobby-actions .hub-members-toggle-btn { width: auto !important; }
  body[data-view="hub-detail"] .hub-detail-header .hub-title-pill { flex: 0 0 auto; width: auto; min-width: 0; gap: 0; }
  body[data-view="hub-detail"] .hub-detail-header #hub-detail-icon { display: none; }
}

/* ── Ana Menü: üst çubuk tam genişlik, sol ray çubuğun altından başlar; Lobiler en solda ── */
:root { --topbar-h: 48px; }
@media (max-width: 900px) {
  #chat-screen[style*="flex"] { padding-left: env(safe-area-inset-left); }
  .app-rail { top: calc(env(safe-area-inset-top) + var(--topbar-h) + 6px); }
  body:not([data-view="hub-detail"]):not([data-view="discover"]) .chat-area { margin-left: var(--rail-w); }
  .topbar { padding-left: 4px; }

  /* Lobi üst sağ: iki ayrı liquid-glass buton, biraz aşağı/sağda; üyeler küçük butonda */
  .topbar-lobby-actions { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 8px; margin-right: -6px; transform: translateY(3px); }
  .topbar-lobby-actions .topbar-superlike-btn, .topbar-lobby-actions .hub-icon-btn, .topbar-lobby-actions .hub-members-toggle-btn { border-radius: 16px; background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.3); backdrop-filter: blur(var(--blur-1)) saturate(1.3); height: 38px; }
  body[data-view="hub-detail"] .hub-detail-header { padding-right: 12px; }
  /* Üyeler butonu masaüstündeki gibi ekranın sağ kenarında sabit bir sekme değil, artık Süper Beğeni/Lobi
     Ayarları ile aynı grupta: ikon üstte, "Üyeler" yazısı altta. Eski ok yerine insan ikonu gösterilir. */
  .topbar-lobby-actions .hub-members-toggle-btn { position: static !important; top: auto; right: auto; transform: none; width: auto; height: auto; border-right: 1px solid rgba(255,255,255,.14); }
  .topbar-lobby-actions .hub-members-toggle-arrow { display: none; }
  .topbar-lobby-actions .hub-members-toggle-icon { display: block; width: 17px; height: 17px; }
  .hub-members-toggle-icon { display: none; }
}
.call-header .call-audio-btn.deafened { color: var(--danger, #ff6b6b); background: rgba(255, 107, 107, 0.14); }

/* 6) Üyeler paneli açıkken üstteki üye düğmesi gizlenir (aynı gruptaki diğer butonlar kalır) */
@media (max-width: 900px) {
  .topbar-lobby-actions .hub-members-toggle-btn.open { visibility: hidden; }
}

/* 7) Lobi üst sağ: butonlar daha dar (Lobi görseline yapışık durmasın diye), etiket ortalanır ve taşmaz */
@media (max-width: 900px) {
  .topbar-lobby-actions { gap: 4px; margin-left: 10px; }
  .topbar-lobby-actions .topbar-superlike-btn, .topbar-lobby-actions .hub-icon-btn, .topbar-lobby-actions .hub-members-toggle-btn { padding: 0 5px; font-size: 13px; }
  .topbar-lobby-actions [data-lbl]::after { font-size: 8px; white-space: normal; width: max-content; max-width: 64px; text-align: center; }
}

/* 8) Lobi içi üst çubuk sıkışması: Süper Beğeni/Lobi Ayarları ikon-only (etiket yazısı yer kaplamasın),
   üye sayısı ("N kişi") gereksiz — Üyeler'e basınca zaten panelde görünüyor, bildirim zili de burada
   fazladan çift giriş noktası oluşturuyor (bkz. #notifications-btn üst çubukta zaten var). */
@media (max-width: 900px) {
  body[data-view="hub-detail"] #hub-detail-count { display: none; }
  body[data-view="hub-detail"] #notifications-btn { display: none; }
  .topbar-lobby-actions .topbar-superlike-btn, .topbar-lobby-actions .hub-icon-btn { padding: 0 4px; min-width: 30px; height: 30px; }
  .topbar-lobby-actions [data-lbl]::after { display: none; }
}

/* ── Sauran Market: avatar çerçeveleri (profil, üst çubuk, sol ray) ─── */
.profile-avatar-wrap[class*="frame-"], .rail-avatar[class*="frame-"] { overflow: visible; }
.frame-ocean, .frame-neon, .frame-galaxy, .frame-supporter { position: relative; }
.frame-ocean::after, .frame-neon::after, .frame-galaxy::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 1;
}
.frame-ocean::after { box-shadow: 0 0 0 2px #4fc3e8, 0 0 10px 1px rgba(79,195,232,.6); animation: frameWave 3s ease-in-out infinite; }
.frame-neon::after { box-shadow: 0 0 0 2px #ff2fd0, 0 0 12px 2px rgba(255,47,208,.75); animation: frameNeon 1.6s ease-in-out infinite alternate; }
.frame-galaxy::after { box-shadow: 0 0 0 2px #b98bff, 0 0 14px 2px rgba(160,110,255,.7);
  background: radial-gradient(circle, #fff 0 1.2px, transparent 2px) 15% 10% / 14px 14px no-repeat,
              radial-gradient(circle, #fff 0 1px, transparent 1.8px) 80% 20% / 12px 12px no-repeat,
              radial-gradient(circle, #fff 0 1.2px, transparent 2px) 70% 85% / 14px 14px no-repeat,
              radial-gradient(circle, #fff 0 1px, transparent 1.8px) 20% 80% / 12px 12px no-repeat;
  animation: frameGalaxy 4s linear infinite; }
@keyframes frameWave { 0%, 100% { box-shadow: 0 0 0 2px #4fc3e8, 0 0 8px 1px rgba(79,195,232,.5); } 50% { box-shadow: 0 0 0 2px #6fd8fa, 0 0 14px 2px rgba(79,195,232,.85); } }
@keyframes frameNeon { from { box-shadow: 0 0 0 2px #ff2fd0, 0 0 8px 1px rgba(255,47,208,.55); } to { box-shadow: 0 0 0 2px #ff7af0, 0 0 18px 4px rgba(255,47,208,.95); } }
@keyframes frameGalaxy { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* ── Mesaj/üye/arkadaş avatarları: çerçeveyi göstermek için ince bir sarmalayıcı ─────────
   (.msg-avatar-btn kendi overflow:hidden'ı yüzünden çerçeveyi keserdi, o yüzden çerçeve
   bir kardeş öğe olarak bu sarmalayıcının içine ekleniyor, düğmenin kendisine değil). */
.msg-avatar-frame-wrap { position: relative; display: inline-flex; flex-shrink: 0; }

/* ── Sauran Supporter: kurucu döneminin özel, Market'te satılmayan Legendary çerçevesi ──
   Halka: özel üretilen görsel (client/assets/frame-supporter.png, şeffaf altın alev halkası).
   Üst çubuk/ray/profil hepsi farklı piksel boyutunda olduğu için görsel yüzde bazlı konumlanır (bkz. script.js
   supporterFrameOverlayHtml()). Etiket: alt kısımda kırmızı dolgu + altın "SUPPORTER" yazısı, hafif nefes alır. */
.frame-supporter { cursor: pointer; }
.sf-overlay { position: absolute; inset: -6%; pointer-events: none; z-index: 1; }
/* Görsel (512px PNG) sabit kalır — üzerinde filter/brightness animasyonu koşturmak her karede yeniden
   çizim (repaint) gerektirip performansı düşürüyordu. "Nefes alma" hissi artık ayrı, ucuz bir opacity
   katmanıyla (yalnızca compositor, repaint yok) veriliyor. */
.sf-overlay .sf-ring-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sf-overlay::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 180, 60, .55) 0%, rgba(255, 140, 20, .25) 55%, transparent 75%);
  animation: sfGlowPulse 2.8s ease-in-out infinite;
  will-change: opacity;
}
.sf-highlight { position: absolute; inset: 0; animation: sfSpin 5s linear infinite; transform-origin: 50% 50%; will-change: transform; }
.sf-highlight::before {
  content: ''; position: absolute; top: 6%; left: 50%; width: 12%; height: 12%; margin-left: -6%;
  border-radius: 50%; background: radial-gradient(circle, #fff8dc 0%, rgba(255, 233, 170, .65) 45%, transparent 72%);
  filter: blur(1.5px);
}
@keyframes sfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sfGlowPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .frame-ocean::after, .frame-neon::after, .frame-galaxy::after,
  .sf-overlay::before, .sf-highlight { animation: none; }
}

/* ── Sauran Plus çerçevesi: satın alınmaz/hediye edilmez, aktif abonelikte otomatik açılır. Neon/Ocean/Galaxy
   gibi "sade" bir parlama değil — dönen degrade halka + mesaj balonundaki ("Yumuşak" tema) ile AYNI yükselen
   ışıltı tozu animasyonu, saf CSS (görsel dosya gerekmez). ── */
.frame-plus { position: relative; cursor: pointer; }
.pf-overlay { position: absolute; inset: -12%; border-radius: 50%; pointer-events: none; z-index: 1; }
.pf-glow {
  position: absolute; inset: 6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(168, 85, 247, .5) 0%, rgba(147, 51, 234, .2) 55%, transparent 75%);
  animation: pfGlowPulse 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}
.pf-ring {
  position: absolute; border-radius: 50%; will-change: transform;
}
.pf-ring-outer {
  inset: 0;
  background: conic-gradient(from 0deg, #4c1d78, #9333ea, #d946ef, #f0abfc, #9333ea, #4c1d78);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9%), #000 calc(100% - 9%));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9%), #000 calc(100% - 9%));
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, .9));
  animation: pfRingSpin 5s linear infinite;
}
.pf-ring-inner {
  inset: 16%;
  background: conic-gradient(from 180deg, #d8b4fe, transparent 35%, transparent 65%, #f5d0fe);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12%), #000 calc(100% - 12%));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12%), #000 calc(100% - 12%));
  opacity: .8;
  animation: pfRingSpinReverse 3.6s linear infinite;
}
.pf-dust {
  position: absolute; bottom: 6%; width: 6%; height: 6%; min-width: 2.5px; min-height: 2.5px; border-radius: 50%; z-index: 2;
  background: #fff; box-shadow: 0 0 0.3em rgba(255, 255, 255, .95), 0 0 0.7em rgba(216, 170, 255, 1); opacity: 0;
  animation: pfDustRise 3.4s ease-in infinite;
}
.pf-dust:nth-child(4) { left: 10%; animation-delay: 0s; }
.pf-dust:nth-child(5) { left: 26%; animation-delay: .5s; }
.pf-dust:nth-child(6) { left: 42%; animation-delay: 1s; }
.pf-dust:nth-child(7) { left: 58%; animation-delay: 1.5s; }
.pf-dust:nth-child(8) { left: 74%; animation-delay: 2s; }
.pf-dust:nth-child(9) { left: 90%; animation-delay: 2.5s; }
.pf-dust:nth-child(10) { left: 50%; animation-delay: 1.75s; }
.pf-spark {
  position: absolute; width: 10%; height: 10%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #f5d0fe 35%, transparent 72%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  animation: pfSparkTwinkle 2.4s ease-in-out infinite;
}
.pf-spark:nth-child(11) { top: 4%; left: 58%; animation-delay: 0s; }
.pf-spark:nth-child(12) { top: 62%; left: 90%; animation-delay: .8s; }
.pf-spark:nth-child(13) { top: 78%; left: 14%; animation-delay: 1.6s; }
@keyframes pfRingSpin { to { transform: rotate(360deg); } }
@keyframes pfRingSpinReverse { to { transform: rotate(-360deg); } }
@keyframes pfGlowPulse { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes pfDustRise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  18% { opacity: 1; }
  85% { opacity: .35; }
  100% { transform: translateY(-125%) scale(.3); opacity: 0; }
}
@keyframes pfSparkTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-ring, .pf-glow, .pf-spark { animation: none; }
  .pf-dust { animation: none; opacity: 0; }
}

/* ── Market ürün kartları (gift.html'e benzer sade sayfa stiline eklenir) */

/* ── Sauran Market / Kitaplığım: artık ayrı sayfa değil, uygulama içi panel (geçiş takılması yok) ── */
.market-modal-box { width: 560px; max-width: 92vw; max-height: 82vh; }
.market-modal-body { padding: 4px 18px 20px; max-height: calc(82vh - 50px); overflow-y: auto; }
.mk-sub { color: #6b7280; font-size: 12.5px; margin: 6px 0 14px; }
.mk-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 209, 102, .12); border: 1px solid rgba(255, 209, 102, .4); color: #ffd166; font-weight: bold; font-size: 13px; margin-bottom: 14px; }
.mk-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 16px 0 8px; }
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-card { border-radius: 14px; padding: 8px 6px; background: rgba(20, 22, 28, .55); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.mk-avatar-preview { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #8e9297; position: relative; overflow: visible; }
.mk-name { font-size: 11px; font-weight: 650; color: #e2f8f6; line-height: 1.2; }
.mk-rarity { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; padding: 1.5px 6px; border-radius: 999px; }
.mk-rarity-free { background: rgba(148, 163, 184, .15); color: #94a3b8; }
.mk-rarity-rare { background: rgba(79, 195, 232, .15); color: #4fc3e8; }
.mk-rarity-epic { background: rgba(255, 47, 208, .15); color: #ff2fd0; }
.mk-rarity-legendary { background: rgba(185, 139, 255, .15); color: #b98bff; }
.mk-rarity-special { background: rgba(255, 213, 74, .15); color: #ffd54a; }
.mk-price { font-size: 10px; color: #8e9297; }
.mk-btn { width: 100%; padding: 6px 2px; border-radius: 999px; border: 1px solid rgba(92, 200, 255, .45); background: rgba(92, 200, 255, .14); color: #5cc8ff; font-weight: bold; font-size: 10px; cursor: pointer; }
.mk-btn:disabled { opacity: .45; cursor: default; border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .04); color: #8e9297; }
.mk-btn.owned { border-color: rgba(126, 231, 135, .5); background: rgba(126, 231, 135, .12); color: #7ee787; }
.mk-state { color: #6b7280; font-size: 13px; text-align: center; padding: 30px 0; }
@media (max-width: 900px) {
  .market-modal-box { width: 92vw; }
  .mk-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Profilden Market'e taşınan Plus kişiselleştirmeleri (Sohbet Teması, Mesaj Balonu, Profil Rengi/Teması/
   Efekti, İsim Efekti) — henüz coin fiyatlandırması yok, "Fiyat: Yakında" etiketiyle gösterilir. ── */
.mk-plus-sections { margin-top: 4px; }
.mk-plus-block .profile-field-label { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.mk-price-soon { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: #ffd166; background: rgba(255, 209, 102, .12); border: 1px solid rgba(255, 209, 102, .35); padding: 2px 8px; border-radius: 999px; }

/* Bildirim zili artık tüm platformlarda üst çubukta tek bir yerde (bkz. #notifications-btn) —
   sol raydaki eski zil ikonu her yerde gizli, çifte giriş noktası olmasın. */
#rail-notifications { display: none !important; }

/* ── Sauran Plus rozeti: kullanıcı adının yanında, mor/mavi, Supporter'dan ayrı ────────── */
.plus-badge {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  padding: 1.5px 7px 1.5px 6px; border-radius: 999px; margin-left: 4px;
  color: #eef2ff; background: linear-gradient(135deg, #6d5bd0, #4f7cff);
  box-shadow: 0 0 0 1px rgba(150, 170, 255, .5), 0 0 8px rgba(109, 91, 208, .55);
  animation: plusBadgeGlow 2.6s ease-in-out infinite;
}
@keyframes plusBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(150, 170, 255, .5), 0 0 6px rgba(109, 91, 208, .45); }
  50% { box-shadow: 0 0 0 1px rgba(180, 195, 255, .8), 0 0 12px rgba(79, 124, 255, .8); }
}
@media (prefers-reduced-motion: reduce) { .plus-badge { animation: none; } }
.plus-badge-sm { font-size: 9px; padding: 1px 5px 1px 4px; margin-left: 3px; }

/* ── Sauran Plus: "Oyuncu İsim Kartı" — mor parlak hap, içinden yükselen ışıltı tozu ──── */
.plus-name-card {
  position: relative; display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  padding: 1.5px 8px 1.5px 6px; border-radius: 999px; margin-left: 4px; overflow: hidden;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; color: #fbf0ff;
  background: linear-gradient(135deg, #5b1a8a, #9333ea 55%, #d946ef 100%);
  box-shadow: 0 0 0 1px rgba(216, 180, 254, .55), 0 0 8px rgba(168, 85, 247, .6);
  animation: pncGlow 2.6s ease-in-out infinite;
}
.pnc-star { font-style: normal; font-size: 8.5px; line-height: 1; color: #fff7d6; text-shadow: 0 0 4px rgba(255, 255, 255, .85); }
.pnc-label { line-height: 1; }
.pnc-dust {
  position: absolute; bottom: 1px; width: 2px; height: 2px; border-radius: 50%;
  background: #f3e8ff; box-shadow: 0 0 4px 1px rgba(216, 180, 254, .9); opacity: 0;
  animation: pncRise 2.6s ease-in infinite; will-change: transform, opacity;
}
.pnc-dust:nth-child(3) { left: 18%; animation-delay: 0s; }
.pnc-dust:nth-child(4) { left: 48%; animation-delay: .9s; }
.pnc-dust:nth-child(5) { left: 76%; animation-delay: 1.7s; }
@keyframes pncGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(216, 180, 254, .5), 0 0 6px rgba(168, 85, 247, .45); }
  50% { box-shadow: 0 0 0 1px rgba(232, 200, 255, .85), 0 0 12px rgba(217, 70, 239, .8); }
}
@keyframes pncRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: .95; }
  80% { opacity: .45; }
  100% { transform: translateY(-13px) scale(.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .plus-name-card { animation: none; } .pnc-dust { animation: none; opacity: 0; } }

/* ── Sauran Plus "Oyuncu İsim Kartı": rozetten AYRI — kullanıcı adının KENDİSİ mor parlak bir kart
   üzerinde görünür. Mesaj/üye/arkadaş listesi/sesli oda/profil, kullanıcı adı basılan HER yerde kullanılır.
   Boyut ebeveyn font-size'ına göre (em) ölçeklenir, böylece her bağlamda doğru görünür. */
.plus-name-plate {
  position: relative; display: inline-flex; align-items: center; padding: 0 0.1em;
  line-height: 1.02; vertical-align: -0.03em;
  border-radius: 0.2em; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, rgba(76, 29, 120, .22), rgba(147, 51, 234, .15) 100%);
  box-shadow: 0 0 0 1px rgba(216, 180, 254, .1);
}
.pnp-text { position: relative; z-index: 1; color: #e8dcf5; }
.pnp-dust {
  position: absolute; bottom: 0; width: 0.14em; height: 0.14em; min-width: 2.5px; min-height: 2.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0.2em rgba(255, 255, 255, .95), 0 0 0.55em rgba(224, 170, 255, 1); opacity: 0;
  animation: pnpRise 3.4s ease-in infinite; will-change: transform, opacity;
}
.pnp-dust:nth-child(1) { left: 10%; animation-delay: 0s; }
.pnp-dust:nth-child(2) { left: 38%; animation-delay: .85s; }
.pnp-dust:nth-child(3) { left: 65%; animation-delay: 1.7s; }
.pnp-dust:nth-child(4) { left: 88%; animation-delay: 2.55s; }
@keyframes pnpRise {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  20% { opacity: 1; }
  75% { opacity: .7; }
  100% { transform: translateY(-1em) scale(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .plus-name-plate { animation: none; } .pnp-dust { animation: none; opacity: 0; } }

/* ── Sauran Plus "Profil Efekti": profil penceresindeki BÜYÜK avatarın çevresinde animasyon.
   İki seçenek: Sakura (alttan yükselip avatarın üstünden süzülen çiçek yaprakları) ve Sahne Işıkları
   (alt kısımlara yayılmış, sürekli sağa-sola sallanan ince ışık huzmeleri). Parçacıklar .pfx-mask içinde (border-radius:50%,
   overflow:hidden) durur — avatar dairesinin dışına TAŞMAZ, cinsiyet ayrımı gözetmeyen nötr efektler. ── */
.pfx-mask {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 2;
}
.pfx-petal {
  position: absolute; bottom: 2%; width: 9px; height: 9px; opacity: 0; pointer-events: none;
  background: linear-gradient(135deg, #ffc3e0, #ff8fc4 60%, #f472b6); border-radius: 0 70% 0 70%;
  box-shadow: 0 0 3px rgba(255, 140, 200, .6);
}
/* Her yaprak: farklı başlangıç noktası, farklı yörünge (A-F), farklı süre ve düzensiz gecikme —
   aynı sırada/aynı ritimde yükselmesinler diye kasıtlı olarak "dağınık" değerler kullanıldı. */
.pfx-petal:nth-child(1)  { left: 6%;  width: 8px; height: 8px; animation: pfxPetalRiseA 4.1s ease-out infinite; animation-delay: .1s; }
.pfx-petal:nth-child(2)  { left: 61%; width: 6px; height: 6px; animation: pfxPetalRiseD 3.3s ease-in infinite;  animation-delay: 1.9s; }
.pfx-petal:nth-child(3)  { left: 22%; width: 9px; height: 9px; animation: pfxPetalRiseB 4.6s ease-out infinite; animation-delay: .7s; }
.pfx-petal:nth-child(4)  { left: 84%; width: 6px; height: 6px; animation: pfxPetalRiseE 3.8s ease-in infinite;  animation-delay: 2.6s; }
.pfx-petal:nth-child(5)  { left: 45%; width: 8px; height: 8px; animation: pfxPetalRiseC 4.3s ease-out infinite; animation-delay: .0s; }
.pfx-petal:nth-child(6)  { left: 12%; width: 7px; height: 7px; animation: pfxPetalRiseF 3.6s ease-in infinite;  animation-delay: 3.4s; }
.pfx-petal:nth-child(7)  { left: 73%; width: 9px; height: 9px; animation: pfxPetalRiseA 3.9s ease-out infinite; animation-delay: 1.4s; }
.pfx-petal:nth-child(8)  { left: 33%; width: 6px; height: 6px; animation: pfxPetalRiseD 4.4s ease-in infinite;  animation-delay: 2.1s; }
.pfx-petal:nth-child(9)  { left: 92%; width: 7px; height: 7px; animation: pfxPetalRiseB 3.5s ease-out infinite; animation-delay: .5s; }
.pfx-petal:nth-child(10) { left: 3%;  width: 7px; height: 7px; animation: pfxPetalRiseE 4.0s ease-in infinite;  animation-delay: 3.0s; }
.pfx-petal:nth-child(11) { left: 55%; width: 6px; height: 6px; animation: pfxPetalRiseF 4.7s ease-out infinite; animation-delay: 1.1s; }
.pfx-petal:nth-child(12) { left: 68%; width: 8px; height: 8px; animation: pfxPetalRiseC 3.7s ease-in infinite;  animation-delay: 2.9s; }
@keyframes pfxPetalRiseA {
  0% { transform: translateY(0) translateX(0) rotate(0deg) scale(.6); opacity: 0; }
  14% { opacity: 1; }
  52% { transform: translateY(-30px) translateX(9px) rotate(130deg) scale(1); opacity: 1; }
  80% { opacity: .7; }
  100% { transform: translateY(-63px) translateX(4px) rotate(260deg) scale(.5); opacity: 0; }
}
@keyframes pfxPetalRiseB {
  0% { transform: translateY(0) translateX(0) rotate(20deg) scale(.55); opacity: 0; }
  18% { opacity: 1; }
  48% { transform: translateY(-26px) translateX(-11px) rotate(-90deg) scale(.95); opacity: 1; }
  82% { opacity: .65; }
  100% { transform: translateY(-62px) translateX(-16px) rotate(-220deg) scale(.45); opacity: 0; }
}
@keyframes pfxPetalRiseC {
  0% { transform: translateY(0) translateX(0) rotate(-10deg) scale(.65); opacity: 0; }
  10% { opacity: .9; }
  60% { transform: translateY(-40px) translateX(2px) rotate(200deg) scale(1.05); opacity: 1; }
  85% { opacity: .5; }
  100% { transform: translateY(-65px) translateX(10px) rotate(340deg) scale(.5); opacity: 0; }
}
@keyframes pfxPetalRiseD {
  0% { transform: translateY(0) translateX(0) rotate(0deg) scale(.5); opacity: 0; }
  16% { opacity: 1; }
  45% { transform: translateY(-22px) translateX(13px) rotate(110deg) scale(.9); opacity: 1; }
  79% { opacity: .6; }
  100% { transform: translateY(-60px) translateX(18px) rotate(240deg) scale(.4); opacity: 0; }
}
@keyframes pfxPetalRiseE {
  0% { transform: translateY(0) translateX(0) rotate(15deg) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  58% { transform: translateY(-36px) translateX(-8px) rotate(-160deg) scale(1); opacity: .95; }
  84% { opacity: .55; }
  100% { transform: translateY(-64px) translateX(-13px) rotate(-300deg) scale(.45); opacity: 0; }
}
@keyframes pfxPetalRiseF {
  0% { transform: translateY(0) translateX(0) rotate(-25deg) scale(.55); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateY(-28px) translateX(6px) rotate(170deg) scale(1); opacity: 1; }
  81% { opacity: .65; }
  100% { transform: translateY(-61px) translateX(12px) rotate(310deg) scale(.5); opacity: 0; }
}
/* Sahne Işıkları: TEK, KESİNTİSİZ gövdeler — asla kaybolup yeniden BELİRMEZ. 4 ince ışık huzmesi alt
   kısımlara yayılmış şekilde konumlanır, her biri kendi kökünden (alt uç) sürekli sağa-sola sallanır
   (translateX/rotate/scaleX) ve Sakura yapraklarıyla AYNI noktada (~%80-84 yükseklik) kendi gradyanıyla
   saydamlaşarak "kaybolur". Hiçbir an opacity 0'a inip yeniden 0'dan belirmiyor. */
.pfx-stagelight {
  position: absolute; left: 50%; bottom: 0; width: 14%; height: 100%; pointer-events: none;
  transform-origin: 50% 100%;
  background: linear-gradient(to top,
    rgba(255, 255, 255, .55) 0%,
    rgba(240, 240, 248, .4) 14%,
    rgba(231, 231, 243, .24) 30%,
    rgba(223, 223, 238, .12) 48%,
    rgba(219, 219, 236, .04) 66%,
    rgba(219, 219, 236, 0) 80%);
  filter: blur(1.3px);
}
.pfx-stagelight:nth-child(2) { margin-left: -14%; width: 13%; animation: pfxSmokeSwayB 7.8s ease-in-out infinite -2.4s; opacity: .75; }
.pfx-stagelight:nth-child(3) { margin-left: 6%;   width: 12%; animation: pfxSmokeSwayC 5.6s ease-in-out infinite -1.1s; opacity: .7; }
/* En dıştaki iki ışık: köklerinden tamamen merkeze doğru yatıp yeniden dikilir, sürekli tekrarlar. Daha kısa
   boyda ve daha az saydamlaşan gradyanla tasarlandı — kökleri dairenin tam alt ucunda DEĞİL, biraz daha
   içeride (dairenin o yükseklikte hâlâ geniş olduğu bir noktada) olduğu için tam yatınca maskeye takılıp
   kaybolmuyor, yattığı hâliyle net görünüyor. */
.pfx-stagelight:nth-child(1) {
  margin-left: -32%; bottom: 10%; width: 12%; height: 58%; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, .8) 0%, rgba(240, 240, 248, .6) 35%, rgba(228, 228, 242, .3) 65%, transparent 95%);
  animation: pfxLightTiltR 4.6s ease-in-out infinite;
}
.pfx-stagelight:nth-child(4) {
  margin-left: 20%; bottom: 10%; width: 11%; height: 54%; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, .78) 0%, rgba(240, 240, 248, .58) 35%, rgba(228, 228, 242, .28) 65%, transparent 95%);
  animation: pfxLightTiltL 5.1s ease-in-out infinite -1.8s;
}
@keyframes pfxLightTiltR {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  38% { transform: rotate(82deg) scaleY(.92); }
  55% { transform: rotate(82deg) scaleY(.92); }
  85% { transform: rotate(0deg) scaleY(1); }
}
@keyframes pfxLightTiltL {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  38% { transform: rotate(-82deg) scaleY(.92); }
  55% { transform: rotate(-82deg) scaleY(.92); }
  85% { transform: rotate(0deg) scaleY(1); }
}
@keyframes pfxSmokeSwayA {
  0%, 100% { transform: translateX(0) rotate(0deg) scaleX(1); }
  25%  { transform: translateX(5%) rotate(4deg) scaleX(1.08); }
  50%  { transform: translateX(-3%) rotate(-3deg) scaleX(.94); }
  75%  { transform: translateX(6%) rotate(5deg) scaleX(1.1); }
}
@keyframes pfxSmokeSwayB {
  0%, 100% { transform: translateX(0) rotate(0deg) scaleX(1); }
  30%  { transform: translateX(-6%) rotate(-5deg) scaleX(.92); }
  60%  { transform: translateX(4%) rotate(4deg) scaleX(1.07); }
  85%  { transform: translateX(-4%) rotate(-3deg) scaleX(.96); }
}
@keyframes pfxSmokeSwayC {
  0%, 100% { transform: translateX(0) rotate(0deg) scaleX(1); }
  20%  { transform: translateX(4%) rotate(3deg) scaleX(1.05); }
  55%  { transform: translateX(-5%) rotate(-4deg) scaleX(.9); }
  80%  { transform: translateX(3%) rotate(3deg) scaleX(1.04); }
}
@media (prefers-reduced-motion: reduce) { .pfx-petal, .pfx-stagelight { animation: none; } }

/* ── Sauran Plus "Lobi Teması": Lobi sahibi seçer, tüm üyeler görür (sahibin Plus'ı bitince sunucu 'default' döner) ── */
.hub-detail-view[data-hub-theme="aurora"] {
  background-image: radial-gradient(ellipse at 15% 0%, rgba(120, 80, 255, .16), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(40, 220, 200, .12), transparent 55%);
}
.hub-detail-view[data-hub-theme="ember"] {
  background-image: radial-gradient(ellipse at 10% 0%, rgba(255, 110, 60, .15), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(255, 190, 70, .10), transparent 55%);
}
.hub-detail-view[data-hub-theme="forest"] {
  background-image: radial-gradient(ellipse at 12% 0%, rgba(60, 200, 120, .14), transparent 55%), radial-gradient(ellipse at 92% 100%, rgba(90, 160, 90, .12), transparent 55%);
}
.hub-theme-swatch-aurora { background: linear-gradient(135deg, rgba(120, 80, 255, .6), rgba(40, 220, 200, .5)); }
.hub-theme-swatch-ember { background: linear-gradient(135deg, rgba(255, 110, 60, .6), rgba(255, 190, 70, .5)); }
.hub-theme-swatch-forest { background: linear-gradient(135deg, rgba(60, 200, 120, .6), rgba(90, 160, 90, .5)); }

/* Seçici önizleme rozetleri (Ayarlar > Profil Efekti) */
.chat-theme-swatch-sakura { background: linear-gradient(160deg, rgba(255, 195, 224, .55), rgba(244, 114, 182, .35)); position: relative; overflow: hidden; }
.chat-theme-swatch-sakura::before {
  content: ''; position: absolute; bottom: -4px; left: 40%; width: 5px; height: 5px; border-radius: 0 70% 0 70%;
  background: linear-gradient(135deg, #ffc3e0, #f472b6); animation: pfxPetalRise 2.2s ease-in infinite;
}
.chat-theme-swatch-stagelights { background: linear-gradient(160deg, rgba(60, 40, 90, .5), rgba(20, 15, 35, .35)); position: relative; overflow: hidden; }
.chat-theme-swatch-stagelights::before, .chat-theme-swatch-stagelights::after {
  content: ''; position: absolute; bottom: -3px; width: 3px; height: 16px; border-radius: 2px; transform-origin: bottom center;
  background: linear-gradient(to top, rgba(255, 255, 255, .8), transparent 85%);
}
.chat-theme-swatch-stagelights::before { left: 30%; animation: pfxSmokeSwayA 2.4s ease-in-out infinite; }
.chat-theme-swatch-stagelights::after { left: 60%; animation: pfxSmokeSwayC 2s ease-in-out infinite; }

/* ── Sauran Plus: temel sohbet temaları (yalnızca aboneyken sunucu bu değeri döndürür). Lobi'de sınıflar
   .hub-msg-bubble üzerinde (yalnızca ileti), DM'de .dm-msg'nin kendisi üzerindedir (zaten yalnızca ileti). ── */
.hub-msg-bubble.chat-theme-soft, .dm-msg.chat-theme-soft {
  background: linear-gradient(135deg, rgba(109, 91, 208, .10), rgba(79, 124, 255, .06));
  border-radius: 14px;
}
.hub-msg-bubble.chat-theme-contrast, .dm-msg.chat-theme-contrast {
  background: rgba(79, 124, 255, .05);
  border-left: 2.5px solid #6d5bd0;
  border-radius: 4px;
}
.hub-msg.msg-mine .hub-msg-bubble.chat-theme-soft, .dm-msg.chat-theme-soft.dm-msg-mine {
  background: linear-gradient(135deg, rgba(109, 91, 208, .16), rgba(79, 124, 255, .10));
}
.hub-msg.msg-mine .hub-msg-bubble.chat-theme-contrast, .dm-msg.chat-theme-contrast.dm-msg-mine {
  border-left-color: #4f7cff;
  background: rgba(109, 91, 208, .08);
}

/* "Yumuşak" temada kutunun alt kısmından üst kısmına doğru yükselen mor ışıltı tozu — kutu dışına taşmaz
   (overflow: hidden), mesaj metninin ARKASINDA kalır (z-index). */
.hub-msg-bubble.chat-theme-soft, .dm-msg.chat-theme-soft { position: relative; isolation: isolate; overflow: hidden; }
.hub-msg-bubble.chat-theme-soft::before, .dm-msg.chat-theme-soft::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(185, 139, 255, .85) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(147, 112, 219, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(216, 180, 254, .8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(168, 130, 255, .6) 0 .9px, transparent 1.3px);
  background-repeat: repeat-y;
  background-size: 34px 46px, 46px 58px, 26px 40px, 58px 52px;
  background-position: 14% 100%, 42% 100%, 68% 100%, 86% 100%;
  animation: softDustRise 4.2s linear infinite;
}
.hub-msg-bubble.chat-theme-soft > *, .dm-msg.chat-theme-soft > * { position: relative; z-index: 1; }
@keyframes softDustRise {
  from { background-position: 14% 100%, 42% 100%, 68% 100%, 86% 100%; }
  to   { background-position: 14% -46px, 42% -58px, 68% -40px, 86% -52px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-msg-bubble.chat-theme-soft::before, .dm-msg.chat-theme-soft::before { animation: none; opacity: .35; }
}

/* "Kontrast" temada — "Yumuşak"tan FARKLI bir efekt: sol kenar çizgisi boyunca akan mavi/mor bir ışık
   taraması, sürekli sağa doğru süzülüp kutu dışına taşmadan tekrarlanır (overflow: hidden). */
.hub-msg-bubble.chat-theme-contrast, .dm-msg.chat-theme-contrast { position: relative; isolation: isolate; overflow: hidden; }
.hub-msg-bubble.chat-theme-contrast::before, .dm-msg.chat-theme-contrast::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(100deg, transparent 32%, rgba(120, 170, 255, .30) 47%, rgba(180, 140, 255, .40) 53%, transparent 68%);
  background-size: 220% 100%;
  animation: contrastShimmer 3.4s ease-in-out infinite;
}
.hub-msg-bubble.chat-theme-contrast::after, .dm-msg.chat-theme-contrast::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; z-index: 0; pointer-events: none;
  background: #6d5bd0; box-shadow: 0 0 6px 1px rgba(109, 91, 208, .8);
  animation: contrastEdgeGlow 3.4s ease-in-out infinite;
}
.hub-msg-bubble.chat-theme-contrast > *, .dm-msg.chat-theme-contrast > * { position: relative; z-index: 1; }
@keyframes contrastShimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
@keyframes contrastEdgeGlow {
  0%, 100% { box-shadow: 0 0 4px 0.5px rgba(109, 91, 208, .6); }
  50% { box-shadow: 0 0 9px 2px rgba(150, 130, 255, .95); }
}
@media (prefers-reduced-motion: reduce) {
  .hub-msg-bubble.chat-theme-contrast::before, .dm-msg.chat-theme-contrast::before,
  .hub-msg-bubble.chat-theme-contrast::after, .dm-msg.chat-theme-contrast::after { animation: none; }
}

/* ── Sohbet Teması seçici (profil, yalnızca Plus için aktif) ─────────── */
.profile-field-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.chat-theme-picker { display: flex; gap: 8px; margin-top: 8px; }
.chat-theme-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border-radius: 12px; border: 1px solid var(--border-soft-strong); background: var(--glass-1); color: var(--text-secondary);
  font-size: 11.5px; cursor: pointer;
}
.chat-theme-option.selected { border-color: #6d5bd0; background: rgba(109, 91, 208, .14); color: var(--text-primary); }
.chat-theme-option:disabled { opacity: .4; cursor: not-allowed; }
.chat-theme-swatch { width: 28px; height: 18px; border-radius: 6px; background: var(--glass-2); box-shadow: 0 0 0 1px var(--border-soft); position: relative; overflow: hidden; }
/* Market/Ayarlar'daki küçük önizlemeler de gerçek balonlardaki animasyonları taşır — "sade" durmasın. */
.chat-theme-swatch-soft { background: linear-gradient(135deg, rgba(109, 91, 208, .4), rgba(79, 124, 255, .3)); }
.chat-theme-swatch-soft::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(220, 190, 255, .95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(216, 180, 254, .85) 0 1px, transparent 1.4px);
  background-repeat: repeat-y; background-size: 10px 14px, 14px 16px; background-position: 25% 100%, 70% 100%;
  animation: softDustRise 2.2s linear infinite;
}
.chat-theme-swatch-contrast { background: rgba(79, 124, 255, .15); box-shadow: inset 2px 0 0 #6d5bd0, 0 0 0 1px var(--border-soft); }
.chat-theme-swatch-contrast::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(100deg, transparent 32%, rgba(120, 170, 255, .55) 47%, rgba(180, 140, 255, .7) 53%, transparent 68%);
  background-size: 220% 100%;
  animation: contrastShimmer 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .chat-theme-swatch-soft::before, .chat-theme-swatch-contrast::before { animation: none; } }
.profile-color-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.profile-color-row input[type="color"] { width: 40px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--border-soft-strong); background: var(--glass-1); cursor: pointer; }

/* ── Hediye Kutusu (bildirimden "Ödülü Topla") ───────────────────────── */
.gift-box-modal-box { width: 320px; max-width: 92vw; padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.gift-box-stage { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.gift-box-visual { position: relative; width: 120px; height: 100px; cursor: pointer; transition: transform .15s ease; }
.gift-box-visual:hover { transform: scale(1.04); }
.gift-box-visual.opening { pointer-events: none; }
.gift-box-base { position: absolute; left: 0; bottom: 0; width: 120px; height: 68px; border-radius: 8px;
  background: linear-gradient(150deg, #b3271b, #7a1811); box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 -6px 10px rgba(0,0,0,.25); }
.gift-box-lid { position: absolute; left: -6px; top: 30px; width: 132px; height: 30px; border-radius: 8px;
  background: linear-gradient(150deg, #d9392a, #a8291d); box-shadow: 0 4px 10px rgba(0,0,0,.35); transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s ease .2s; z-index: 2; }
.gift-box-ribbon-v { position: absolute; left: 50%; top: 30px; bottom: 0; width: 14px; margin-left: -7px; background: linear-gradient(180deg, #ffd54a, #e0a020); z-index: 1; }
.gift-box-ribbon-h { position: absolute; left: -6px; top: 40px; width: 132px; height: 12px; background: linear-gradient(90deg, #ffd54a, #e0a020); z-index: 3; }
.gift-box-visual.opening .gift-box-lid { transform: translateY(-70px) rotate(-35deg); opacity: 0; }
.gift-box-visual.opening .gift-box-ribbon-h { opacity: 0; transition: opacity .2s ease; }
.gift-box-visual.opening { animation: giftBoxShake .35s ease; }
@keyframes giftBoxShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.gift-box-glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,213,74,.5), transparent 70%); opacity: 0; pointer-events: none; }
.gift-box-visual.opening + .gift-box-glow, .gift-box-stage.revealed .gift-box-glow { opacity: 1; animation: giftBoxGlowPulse 1.2s ease-out; }
@keyframes giftBoxGlowPulse { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.6); } }
.gift-box-reveal { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: giftBoxRevealIn .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes giftBoxRevealIn { from { opacity: 0; transform: scale(.5) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.gift-box-reveal-icon { font-size: 56px; filter: drop-shadow(0 4px 10px rgba(255,213,74,.5)); }
.gift-box-reveal-label { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.gift-box-reveal-sub { font-size: 11.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.gift-box-hint { margin: 0; font-size: 12px; color: var(--text-tertiary); }
.gift-box-claim-btn { width: 100%; }
.gift-collected-tag { font-size: 12px; color: #7ee787; font-weight: 600; }
.gift-notification-card { position: relative; }

/* ── Sauran Plus hareketli çıkartmalar: SVG karakterler (stickers.js). Yüz, kollar, kulak/kuyruk ayrı hareket eder.
   Mesajda sürekli oynar; seçicide yalnızca üzerine gelince (performans için duraklatılmış). ── */
.sticker-picker { max-height: 300px; overflow-y: auto; overflow-x: hidden; width: 236px; box-sizing: border-box; }
.sticker-picker-label { grid-column: 1 / -1; font-size: 11px; color: var(--text-tertiary, #8e9297); padding: 6px 2px 2px; display: flex; align-items: center; gap: 6px; }
.sticker-plus-btn { padding: 3px !important; }
.sticker-plus-btn .stk-svg { width: 100%; height: auto; aspect-ratio: 120 / 124; }
.sticker-plus-btn .stk-svg * { animation-play-state: paused; }
.sticker-plus-btn:hover .stk-svg * { animation-play-state: running; }
.hub-msg-sticker.stk-msg, .dm-msg-sticker.stk-msg { display: block; width: 116px; height: 120px; font-size: 0; }
.stk-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stk-svg [class*="stk-"] { transform-box: fill-box; }
.stk-root { transform-origin: 50% 100%; }
.stk-body-bob .stk-root { animation: stkBob 1.7s ease-in-out infinite; }
.stk-body-hop .stk-root { animation: stkHop 1.5s ease-in-out infinite; }
.stk-body-sway .stk-root { animation: stkSway 2.6s ease-in-out infinite; }
.stk-body-float .stk-root { animation: stkFloat 3s ease-in-out infinite; }
.stk-body-roll .stk-root { animation: stkRoll 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
.stk-body-pulse .stk-root { animation: stkPulse 1.2s ease-in-out infinite; transform-origin: 50% 60%; }
.stk-body-twinkle .stk-root { animation: stkTwk 2s ease-in-out infinite; transform-origin: 50% 55%; }
.stk-arm { transform-origin: 50% 10%; }
.stk-wave-r { animation: stkWaveR 0.9s ease-in-out infinite; }
.stk-wave-l { animation: stkWaveL 0.9s ease-in-out infinite; animation-delay: .25s; }
.stk-swing-r { animation: stkSwingR 2.2s ease-in-out infinite; }
.stk-swing-l { animation: stkSwingL 2.2s ease-in-out infinite; }
.stk-eyes { transform-origin: 50% 50%; animation: stkBlink 4.2s infinite; }
.stk-eyes-soft { transform-origin: 50% 60%; animation: stkSoft 3.4s ease-in-out infinite; }
.stk-mouth { transform-origin: 50% 15%; animation: stkTalk 1.3s ease-in-out infinite; }
.stk-tongue { transform-origin: 50% 0%; animation: stkTongue 1.8s ease-in-out infinite; }
.stk-ear-l { transform-origin: 75% 95%; animation: stkEarL 2.4s ease-in-out infinite; }
.stk-ear-r { transform-origin: 25% 95%; animation: stkEarR 2.4s ease-in-out infinite; animation-delay: .4s; }
.stk-tail { transform-origin: 8% 92%; animation: stkTail 0.9s ease-in-out infinite; }
.stk-foot-l { animation: stkFootL 1.5s ease-in-out infinite; }
.stk-foot-r { animation: stkFootR 1.5s ease-in-out infinite; }
.stk-tent { transform-origin: 50% 5%; animation: stkTent 1.7s ease-in-out infinite; }
.stk-tent-b { animation-delay: .85s; }
.stk-twinkle { transform-origin: 50% 50%; animation: stkSpark 1.6s ease-in-out infinite; }
.stk-pulse { transform-origin: 50% 50%; animation: stkPulse 1s ease-in-out infinite; }
.stk-spout { transform-origin: 50% 100%; animation: stkSpout 1.9s ease-in-out infinite; }
.stk-mane { transform-origin: 90% 50%; animation: stkMane 2.2s ease-in-out infinite; }
.stk-horn { transform-origin: 50% 100%; animation: stkHorn 2.4s ease-in-out infinite; }
.stk-string { transform-origin: 50% 0%; animation: stkString 2.4s ease-in-out infinite; }
.stk-leaf { transform-origin: 50% 100%; animation: stkLeaf 2s ease-in-out infinite; }
.stk-bow { transform-origin: 50% 50%; animation: stkPulse 2s ease-in-out infinite; }
.stk-tuft { transform-origin: 50% 100%; animation: stkLeaf 1.6s ease-in-out infinite; }
.stk-rainbow { transform-origin: 50% 100%; animation: stkRainbow 2.6s ease-in-out infinite; }
.stk-stem { transform-origin: 50% 0%; animation: stkString 2.6s ease-in-out infinite; }
@keyframes stkBob { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-6%) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.04, .96); } }
@keyframes stkHop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 30% { transform: translateY(-14%) scale(.96, 1.06); } 42% { transform: translateY(0) scale(1.05, .95); } }
@keyframes stkSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes stkFloat { 0%, 100% { transform: translateY(3%) rotate(-2deg); } 50% { transform: translateY(-7%) rotate(2deg); } }
@keyframes stkRoll { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes stkPulse { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.1); } 55% { transform: scale(.97); } }
@keyframes stkTwk { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.07) rotate(6deg); } }
@keyframes stkSpark { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(14deg); opacity: .7; } }
@keyframes stkWaveR { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(38deg); } }
@keyframes stkWaveL { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(-38deg); } }
@keyframes stkSwingR { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(9deg); } }
@keyframes stkSwingL { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-9deg); } }
@keyframes stkBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes stkSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes stkTalk { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1.1); } }
@keyframes stkTongue { 0%, 100% { transform: scaleY(.7); } 50% { transform: scaleY(1.15); } }
@keyframes stkEarL { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(9deg); } }
@keyframes stkEarR { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-9deg); } }
@keyframes stkTail { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes stkFootL { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes stkFootR { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(0); } }
@keyframes stkTent { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes stkSpout { 0%, 100% { transform: scale(.75); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes stkMane { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes stkHorn { 0%, 100% { transform: rotate(-4deg); filter: brightness(1); } 50% { transform: rotate(4deg); filter: brightness(1.3); } }
@keyframes stkString { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes stkLeaf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes stkRainbow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .stk-svg *, .stk-svg { animation: none !important; } }
.stk-ex-a { animation: stkExA 6s ease-in-out infinite; }
.stk-ex-b { animation: stkExB 6s ease-in-out infinite; opacity: 0; }
.stk-steam { animation: stkSteam 2.4s ease-in-out infinite; }
.stk-flame { transform-origin: 50% 100%; animation: stkFlame .7s ease-in-out infinite; }
.stk-glow { transform-origin: 50% 60%; animation: stkGlow 1.8s ease-in-out infinite; }
@keyframes stkExA { 0%, 55%, 100% { opacity: 1; } 62%, 90% { opacity: 0; } }
@keyframes stkExB { 0%, 55%, 100% { opacity: 0; } 62%, 90% { opacity: 1; } }
@keyframes stkSteam { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-4px); opacity: .45; } }
@keyframes stkFlame { 0%, 100% { transform: scale(1, 1) rotate(-3deg); } 50% { transform: scale(.9, 1.12) rotate(3deg); } }
@keyframes stkGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.08); } }

/* ── Sauran Plus "Profil Teması": profil penceresinin renk şeması (kendi ve başkasının profilinde) ── */
.chat-theme-picker-wrap { flex-wrap: wrap; }
.chat-theme-picker-wrap .chat-theme-option { flex: 1 1 30%; min-width: 84px; }
.ptheme-swatch-midnight { background: linear-gradient(135deg, #1a1f4a, #3d2a7a); }
.ptheme-swatch-sunset { background: linear-gradient(135deg, #ff7a59, #b93a8c); }
.ptheme-swatch-forest { background: linear-gradient(135deg, #2f9a5a, #17513a); }
.ptheme-swatch-sakura { background: linear-gradient(135deg, #ffb3d1, #c76bb0); }
.ptheme-swatch-ocean { background: linear-gradient(135deg, #2aa8ff, #1a4fa8); }
.profile-modal-box[data-profile-theme="midnight"] { background-image: linear-gradient(160deg, rgba(61, 42, 122, .55), rgba(26, 31, 74, .35)); box-shadow: 0 0 0 1px rgba(140, 120, 255, .35), 0 8px 40px rgba(30, 20, 90, .5); }
.profile-modal-box[data-profile-theme="sunset"] { background-image: linear-gradient(160deg, rgba(255, 122, 89, .32), rgba(185, 58, 140, .30)); box-shadow: 0 0 0 1px rgba(255, 140, 110, .35), 0 8px 40px rgba(140, 40, 90, .4); }
.profile-modal-box[data-profile-theme="forest"] { background-image: linear-gradient(160deg, rgba(47, 154, 90, .34), rgba(23, 81, 58, .34)); box-shadow: 0 0 0 1px rgba(90, 200, 130, .35), 0 8px 40px rgba(20, 80, 50, .45); }
.profile-modal-box[data-profile-theme="sakura"] { background-image: linear-gradient(160deg, rgba(255, 179, 209, .30), rgba(199, 107, 176, .28)); box-shadow: 0 0 0 1px rgba(255, 170, 205, .35), 0 8px 40px rgba(150, 70, 130, .4); }
.profile-modal-box[data-profile-theme="ocean"] { background-image: linear-gradient(160deg, rgba(42, 168, 255, .32), rgba(26, 79, 168, .34)); box-shadow: 0 0 0 1px rgba(90, 190, 255, .35), 0 8px 40px rgba(20, 60, 140, .45); }

/* ── Sauran Plus "İsim Efekti": kullanıcı adı metninde animasyon (isim kartından bağımsız; kart varsa içinde çalışır) ── */
.nfx-preview { font-weight: 700; font-size: 14px; line-height: 1.2; }
.name-fx { font-weight: 700; }
.name-fx-gradient, .name-fx-rainbow, .name-fx-shimmer { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 200% 100%; }
.name-fx-gradient { background-image: linear-gradient(90deg, #5cc8ff, #b98bff, #ff8fd0, #5cc8ff); animation: nfxSlide 5s linear infinite; }
.name-fx-rainbow { background-image: linear-gradient(90deg, #ff6b6b, #ffb14d, #ffe14d, #6fdc7a, #6ab7ff, #b98bff, #ff6b6b); animation: nfxSlide 4s linear infinite; }
.name-fx-shimmer { background-image: linear-gradient(100deg, #cfd6e4 30%, #ffffff 50%, #cfd6e4 70%); animation: nfxSlide 2.6s linear infinite; }
.name-fx-glow { color: #eaf6ff; animation: nfxGlow 2.4s ease-in-out infinite; }
@keyframes nfxSlide { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@keyframes nfxGlow { 0%, 100% { text-shadow: 0 0 3px rgba(92, 200, 255, .45); } 50% { text-shadow: 0 0 8px rgba(92, 200, 255, .95), 0 0 14px rgba(185, 139, 255, .6); } }
@media (prefers-reduced-motion: reduce) { .name-fx { animation: none !important; } }

/* ── Sauran Plus "Lobi Arka Planı": Lobi sahibinin yüklediği görsel, okunabilirlik için koyulaştırılarak sohbet alanına yerleşir ── */
.hub-detail-view.has-hub-bg {
  background-image: linear-gradient(rgba(10, 13, 17, .74), rgba(10, 13, 17, .88)), var(--hub-bg-image);
  background-size: cover; background-position: center;
}
.hub-bg-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hub-bg-preview { width: 72px; height: 41px; border-radius: 8px; background: var(--glass-2, rgba(255,255,255,.06)) center / cover no-repeat; box-shadow: 0 0 0 1px var(--border-soft, rgba(255,255,255,.1)); flex-shrink: 0; }

/* ── Sauran Plus "Özel emoji paketi": ek tepki emojileri (kilitliyse soluk) ── */
.msg-reaction-picker { flex-wrap: wrap; max-width: 250px; }
.msg-reaction-picker .react-extra.locked { opacity: .35; filter: grayscale(.6); }

/* ── Abonelikler paneli: Plus ve Premium kartları ── */
.subs-modal-box { width: 720px; }
.subs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.subs-card { position: relative; border-radius: 16px; padding: 16px 14px 14px; background: rgba(20, 22, 28, .55); border: 1px solid rgba(255, 255, 255, .09); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.subs-card-plus { border-color: rgba(147, 51, 234, .45); box-shadow: 0 0 24px -8px rgba(147, 51, 234, .5); }
.subs-card-premium { border-color: rgba(255, 200, 80, .5); background: linear-gradient(160deg, rgba(255, 200, 80, .10), rgba(20, 22, 28, .6) 45%); box-shadow: 0 0 28px -8px rgba(255, 190, 60, .55); }
.subs-card-ribbon { position: absolute; top: 10px; right: -30px; transform: rotate(35deg); background: linear-gradient(90deg, #ffb42e, #ffdf7a); color: #4a3200; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 3px 34px; }
.subs-card-head { display: flex; align-items: center; gap: 8px; }
.subs-card-name { font-size: 16px; font-weight: 700; color: #f0f4fa; }
.subs-premium-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 9px; border-radius: 999px; color: #4a3200; background: linear-gradient(135deg, #ffb42e, #ffe27a); box-shadow: 0 0 10px rgba(255, 190, 60, .55); }
.subs-card-tag { margin: 0; font-size: 12px; color: #9aa4b4; }
.subs-list { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.subs-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #cfd6e4; line-height: 1.35; }
.subs-list small { color: #7d8797; }
.subs-ic { width: 20px; flex-shrink: 0; text-align: center; }
.subs-plus-all { padding: 6px 8px; border-radius: 10px; background: rgba(255, 200, 80, .12); color: #ffe6a8 !important; }
.subs-soon { opacity: .65; }
.subs-status { text-align: center; padding: 9px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.subs-status-on { color: #7ee787; background: rgba(126, 231, 135, .12); border: 1px solid rgba(126, 231, 135, .4); }
.subs-buy-btn { padding: 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #8e9297; font-weight: 700; font-size: 12.5px; }
.subs-note { color: #6b7280; font-size: 11.5px; text-align: center; margin: 12px 0 0; }
@media (max-width: 900px) { .subs-cards { grid-template-columns: 1fr; } .subs-modal-box { width: 92vw; } }
.subs-extra-head { padding: 6px 8px; border-radius: 10px; background: rgba(255, 200, 80, .16); color: #ffe6a8 !important; margin-top: 4px; }

/* ── "Şu an ne oynuyorum" ── */
.activity-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.activity-row input { flex: 1; min-width: 0; }
.activity-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-secondary, #b6bfcc); cursor: pointer; }
.profile-activity { display: block; margin-top: 4px; font-size: 12px; color: #8fd0ff; }
.friends-activity { display: block; font-size: 10.5px; font-weight: 500; color: #8fd0ff; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Bildirim sesi paketi seçici (Ayarlar > Bildirimler) ── */
.sound-pack-block { margin-top: 12px; }
.sound-ic { font-size: 18px; line-height: 1.2; }

/* ── Sauran Plus "Mesaj Balonu": sohbet temasından bağımsız köşe/gölge/çerçeve stilleri (gönderenin mesajlarında) ── */
.bubble-swatch { width: 34px; height: 18px; border-radius: 4px; background: var(--glass-2, rgba(255,255,255,.08)); box-shadow: 0 0 0 1px var(--border-soft, rgba(255,255,255,.1)); }
.bubble-swatch-round { border-radius: 12px; }
.bubble-swatch-glass { background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06)); box-shadow: 0 0 0 1px rgba(255,255,255,.3); border-radius: 8px; }
.bubble-swatch-outline { background: transparent; box-shadow: 0 0 0 1.5px rgba(140, 170, 255, .7); border-radius: 8px; }
.bubble-swatch-shadow { border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,.6); }
/* Lobi'de balon sınıfları .hub-msg-bubble üzerinde (yalnızca ileti); DM'de .dm-msg'nin kendisi üzerinde. */
.hub-msg-bubble.chat-theme-soft, .hub-msg-bubble.chat-theme-contrast,
.hub-msg-bubble.bubble-round, .hub-msg-bubble.bubble-glass, .hub-msg-bubble.bubble-outline, .hub-msg-bubble.bubble-shadow {
  padding: 6px 12px;
}
.hub-msg-bubble.bubble-round, .dm-msg.bubble-round { border-radius: 22px; padding-left: 18px; padding-right: 18px; }
.hub-msg-bubble.bubble-glass, .dm-msg.bubble-glass { border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hub-msg-bubble.bubble-outline, .dm-msg.bubble-outline { border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(140, 170, 255, .55); }
.hub-msg-bubble.bubble-shadow, .dm-msg.bubble-shadow { border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }

.screenshare-fps-badge { position: absolute; left: 8px; bottom: 8px; z-index: 5; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.65); color: #7ee787; font-size: 12px; font-weight: 700; pointer-events: none; }

/* ── Ekran paylaşımı FPS seçici ── */
.share-fps-box { width: 460px; }
.share-fps-opt { display: block; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #e2e8f4; cursor: pointer; }
.share-fps-opt:hover:not(:disabled) { border-color: rgba(92, 200, 255, .55); background: rgba(92, 200, 255, .1); }
.share-fps-opt.selected { border-color: rgba(92, 200, 255, .7); box-shadow: 0 0 0 1px rgba(92, 200, 255, .35) inset; }
.share-fps-opt:disabled { opacity: .45; cursor: default; }
.share-fps-opt small { display: block; margin-top: 4px; color: #8e9bb0; font-size: 12px; }
.share-fps-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 190, 60, .18); color: #ffd28a; margin-left: 4px; }

/* Sesli oda ekranı (z-index 200) üstünde görünmesi için: FPS seçici, çağrı katmanından yüksek olmalı. */
#share-fps-modal { z-index: 320; }


/* ══ Lobi ayarları: tam ekran, bölümlü pencere ════════════════════════════ */
body.hubset-open { overflow: hidden; }
.hubset-screen {
  position: fixed; inset: 0; z-index: 900; display: flex; background: var(--bg-app);
  animation: hubset-in 0.18s var(--ease);
}
@keyframes hubset-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hubset-screen { animation: none; } }
.hubset-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }

.hubset-topbar {
  display: flex; align-items: center; gap: 14px; padding: 14px 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft); background: var(--bg-surface);
}
.hubset-topbar-icon {
  width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-3); box-shadow: 0 0 0 1px var(--border-soft);
}
.hubset-topbar-icon img { width: 100%; height: 100%; object-fit: cover; }
.hubset-topbar-icon .hub-icon-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.hubset-topbar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hubset-eyebrow { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
.hubset-title { font-size: 17px; font-weight: 650; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.hubset-close {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-soft-strong); background: transparent;
  color: var(--text-secondary); font-size: 14px; cursor: pointer; flex-shrink: 0; transition: 0.15s var(--ease);
}
.hubset-close:hover { color: var(--text-primary); border-color: var(--accent-line); background: var(--accent-soft); }

.hubset-layout { flex: 1; min-height: 0; display: flex; }
.hubset-nav {
  width: 264px; flex-shrink: 0; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border-soft); overflow-y: auto; background: var(--bg-surface);
}
.hubset-nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font-size: 14px; text-align: left; cursor: pointer; transition: 0.15s var(--ease);
}
.hubset-nav-btn:hover { background: var(--glass-1); color: var(--text-primary); }
.hubset-nav-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.hubset-nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; align-items: center; justify-content: center;
  background: var(--accent); color: #04202e; font-size: 11px; font-weight: 700;
}

.hubset-content { flex: 1; min-width: 0; overflow-y: auto; padding: 32px 40px 120px; }
.hubset-panel { max-width: 680px; flex-direction: column; gap: 16px; }
.hubset-panel-head h3 { font-size: 22px; font-weight: 650; color: var(--text-primary); letter-spacing: -0.015em; margin-bottom: 4px; }
.hubset-panel-head p { font-size: 13px; color: var(--text-tertiary); margin-bottom: 4px; }
.hubset-card {
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.hubset-card.hub-settings-body { padding: 16px; }
.hubset-card .discover-select, .hubset-card .hub-name-input, .hubset-card .about-me-input { border-radius: 10px; }
.hubset-card .profile-field-label { margin-top: 4px; margin-bottom: 0; }
.hubset-card #hub-discover-settings, .hubset-card .hub-discover-settings { flex-direction: column; gap: 10px; }
.hubset-identity { flex-direction: row; align-items: center; gap: 20px; }
.hubset-avatar { width: 88px !important; height: 88px !important; border-radius: 22px !important; flex-shrink: 0; font-size: 34px; }
.hubset-identity-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hubset-identity-fields .hub-name-input { width: 100%; }
.hubset-inline-btn { padding: 8px 14px; border-radius: 999px; }
.hubset-hint, .hubset-card .hubset-hint { font-size: 12px; color: var(--text-tertiary); }
.hubset-actions { display: flex; flex-direction: column; gap: 8px; }
.hubset-actions .hub-settings-action-btn, .hubset-danger-zone .hub-settings-action-btn { width: 100%; justify-content: flex-start; }

.hubset-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.hubset-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-soft-strong); background: transparent; color: var(--text-secondary); font-size: 13px; transition: 0.15s var(--ease);
}
.hubset-tab:hover { color: var(--text-primary); border-color: var(--accent-line); }
.hubset-tab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.hubset-tab-danger { color: var(--danger); }
.hubset-tab-danger.active { background: rgba(255, 122, 134, 0.12); border-color: rgba(255, 122, 134, 0.4); color: var(--danger); }

.hubset-danger-zone {
  margin-top: 8px; padding: 18px; border-radius: var(--radius); border: 1px solid rgba(255, 122, 134, 0.28);
  background: rgba(255, 122, 134, 0.04); flex-direction: column; gap: 8px;
}
.hubset-danger-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); }

/* Alt sekme/görünümler artık sol menüden açıldığı için eski "← Geri" düğmeleri gizlenir. */
.hubset-screen .hub-settings-back-btn { display: none; }

.hubset-savebar {
  position: absolute; left: 0; right: 0; bottom: 0; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: rgba(14, 19, 25, 0.92);
  -webkit-backdrop-filter: blur(var(--blur-1)); backdrop-filter: blur(var(--blur-1)); border-top: 1px solid var(--border-soft);
}
.hubset-savebar .hub-create-error { flex: 1; margin: 0; font-size: 13px; }
.hubset-save-btn {
  min-width: 140px; height: 42px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #04202e; font-weight: 650; font-size: 14px; transition: 0.15s var(--ease);
}
.hubset-save-btn:hover { filter: brightness(1.08); }

@media (max-width: 768px) {
  .hubset-topbar { padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .hubset-layout { flex-direction: column; }
  .hubset-nav {
    width: 100%; flex-direction: row; gap: 6px; padding: 10px 16px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--border-soft); scrollbar-width: none; flex-shrink: 0;
  }
  .hubset-nav::-webkit-scrollbar { display: none; }
  .hubset-nav-btn { width: auto; flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-soft-strong); font-size: 13px; white-space: nowrap; }
  .hubset-nav-btn.active { border-color: var(--accent-line); }
  .hubset-content { padding: 20px 16px 120px; }
  .hubset-panel-head h3 { font-size: 19px; }
  .hubset-card { padding: 16px; }
  .hubset-identity { gap: 14px; }
  .hubset-avatar { width: 72px !important; height: 72px !important; border-radius: 18px !important; }
  .hubset-savebar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .hubset-save-btn { flex: 1; }
}
.hubset-card #hubset-theme-block { display: flex; flex-direction: column; gap: 10px; }
.hubset-card #hubset-theme-block[style*="none"] { display: none !important; }
.hubset-card #hubset-theme-hint { margin-bottom: 10px; }
.hubset-inline-btn { border: 1px solid var(--border-soft-strong) !important; }
.hubset-savebar .hub-create-error:empty { display: none; }
.hubset-nav-btn > span:not(.hubset-nav-badge):last-of-type { white-space: nowrap; }
#hub-requests-open-btn { gap: 8px; }


/* ── @bahsetme ── */
.mention { color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 3px; font-weight: 600; }
.mention.mention-me { color: #ffd479; background: rgba(240, 195, 107, 0.16); }
.hub-msg.hub-msg-mentions-me { background: rgba(240, 195, 107, 0.06); box-shadow: inset 3px 0 0 #f0c36b; border-radius: 10px; }
.composer-input-box { position: relative; }
.mention-suggest {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 60; max-height: 280px; overflow-y: auto;
  padding: 6px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-surface-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), var(--shadow-focus);
}
.mention-suggest[hidden] { display: none; }
.mention-suggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; font-size: 14px;
}
.mention-suggest-item.active, .mention-suggest-item:hover { background: var(--accent-soft); }
.mention-suggest-avatar {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--user-color, var(--bg-surface-3)); color: #fff; font-size: 12px; font-weight: 700;
}
.mention-suggest-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-suggest-hint { margin-left: auto; font-size: 12px; color: var(--text-tertiary); }
.hub-card-unread.has-mention { background: #f0c36b; color: #2a1d00; }
.notification-preview { margin-top: 4px; font-size: 12px; opacity: 0.75; font-style: italic; }
.lobby .lobby-unread { margin-left: auto; min-width: 20px; height: 20px; font-size: 11px; }
.lobby .lobby-unread[style*='inline-flex'] + .lobby-count { display: none; }

/* Gönderiliyor / gönderilemedi */
.msg-pending { opacity: 0.55; pointer-events: none; transition: opacity 0.2s; }
.msg-failed { opacity: 0.8; box-shadow: inset 3px 0 0 var(--danger); border-radius: 10px; }
.msg-failed::after { content: 'Gönderilemedi'; display: block; font-size: 11px; color: var(--danger); padding: 2px 0 4px 8px; }

.settings-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.settings-connection-row .profile-field-label { margin: 0; }
.settings-connection-info { border: 1px solid var(--border-soft-strong); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.settings-connection-info[data-quality="good"] { color: var(--success); border-color: rgba(95, 214, 164, 0.4); }
.settings-connection-info[data-quality="ok"] { color: var(--warning); border-color: rgba(240, 195, 107, 0.4); }
.settings-connection-info[data-quality="bad"] { color: var(--danger); border-color: rgba(255, 122, 134, 0.4); }

/* "Yazıyor…" göstergesi: yer kaplamaz (yükseklik sabit), yalnızca görünürlüğü değişir; mesaj alanı zıplamaz */
.typing-indicator {
  display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 14px; margin-bottom: 2px;
  font-size: 12px; color: var(--text-tertiary); opacity: 0; transition: opacity 0.15s var(--ease); pointer-events: none;
}
.typing-indicator.active { opacity: 1; }
.typing-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: typing-bounce 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: 0.8; } }

/* ── Mesaj arama paneli ── */
.msg-search-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; z-index: 850; flex-direction: column;
  background: var(--bg-surface); border-left: 1px solid var(--border-soft); box-shadow: var(--shadow-focus);
  padding-top: env(safe-area-inset-top);
}
.msg-search-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.msg-search-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-search-title { font-size: 16px; font-weight: 650; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-search-box {
  display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px; padding: 0 12px; height: 44px;
  border-radius: 12px; background: var(--bg-app); border: 1px solid var(--border-soft-strong);
}
.msg-search-box:focus-within { border-color: var(--accent-line); }
.msg-search-box input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text-primary); font-size: 15px; }
.msg-search-hint { margin: 0 16px 8px; font-size: 12px; color: var(--text-tertiary); }
.msg-search-results { flex: 1; overflow-y: auto; padding: 4px 8px 24px; display: flex; flex-direction: column; gap: 2px; }
.msg-search-item {
  display: flex; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent;
  text-align: left; cursor: pointer; color: var(--text-primary);
}
.msg-search-item:hover, .msg-search-item:focus-visible { background: var(--glass-1); }
.msg-search-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--user-color, var(--bg-surface-3)); color: #fff; font-weight: 700; font-size: 13px;
}
.msg-search-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-search-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-search-meta { font-size: 12px; color: var(--text-tertiary); }
.msg-search-meta strong { color: var(--text-secondary); }
.msg-search-text { font-size: 14px; line-height: 1.45; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msg-search-text mark { background: rgba(240, 195, 107, 0.28); color: #ffe2a8; border-radius: 4px; padding: 0 2px; }
.msg-search-empty { text-align: center; color: var(--text-tertiary); font-size: 13px; padding: 28px 0; }
.msg-search-more { margin: 8px auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-soft-strong); background: transparent; color: var(--text-secondary); cursor: pointer; }
.msg-flash { animation: msg-flash 2s var(--ease); }
@keyframes msg-flash { 0%, 30% { background: rgba(92, 200, 255, 0.22); box-shadow: inset 3px 0 0 var(--accent); } 100% { background: transparent; } }
.jump-latest-btn {
  position: sticky; bottom: 8px; align-self: center; margin: -44px auto 8px; z-index: 5; padding: 8px 16px; border-radius: 999px;
  border: 0; background: var(--accent); color: #04202e; font-weight: 650; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-focus);
}
@media (max-width: 768px) {
  .msg-search-panel { width: 100%; border-left: 0; }
}

/* ── İki adımlı doğrulama ── */
.login-2fa-step { flex-direction: column; gap: 12px; }
.login-2fa-text { font-size: 14px; color: var(--text-secondary); margin: 0; }
.login-2fa-btn { height: 46px; border-radius: 12px; background: var(--accent); color: #04202e; border: 0; font-weight: 600; cursor: pointer; }
.login-2fa-btn:disabled { opacity: 0.6; }
.login-2fa-links { display: flex; justify-content: space-between; }
.twofa-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.twofa-badge { font-weight: 650; }
.twofa-badge.on { color: var(--success); }
.twofa-badge.off { color: var(--text-tertiary); }
.twofa-meta { color: var(--text-tertiary); }
.twofa-box { max-width: 440px; }
.twofa-step { flex-direction: column; gap: 10px; }
.twofa-qr { align-self: center; background: #fff; padding: 10px; border-radius: 12px; width: 200px; height: 200px; }
.twofa-qr img { width: 100%; height: 100%; display: block; }
.twofa-secret { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.04em; padding: 10px 12px; border-radius: 10px; background: var(--bg-app); border: 1px solid var(--border-soft-strong); user-select: all; word-break: break-all; color: var(--text-primary); }
.twofa-code-input { font-size: 22px; letter-spacing: 0.3em; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.twofa-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 12px 12px 12px 32px; border-radius: 12px; background: var(--bg-app); border: 1px solid var(--border-soft-strong); margin: 0; }
.twofa-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--text-primary); user-select: all; }
.twofa-code-actions { display: flex; gap: 8px; }
.twofa-code-actions .hub-settings-action-btn { flex: 1; justify-content: center; }

/* E-posta adresi (Ayarlar → Güvenlik) */
.email-current-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; min-width: 0; }
.email-current { font-size: 14px; color: var(--text-primary, #e6e6e6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.email-reveal-btn { background: none; border: none; color: var(--accent, #5cc8ff); font-size: 13px; cursor: pointer; padding: 4px 2px; text-decoration: underline; flex-shrink: 0; align-self: center; }
/* Ayarlar penceresinin (aynı katmanda, DOM'da sonra gelen) ÜSTÜNDE açılmalı */
#twofa-modal, #email-change-modal { z-index: 160; }
.twofa-body .hubset-save-btn { min-height: 44px; flex-shrink: 0; }
.twofa-body .hub-name-input, .twofa-body .hub-settings-action-btn { flex-shrink: 0; }

/* Yavaş mod çubuğu (lobi yazma alanının üstü) */
.hub-slowmode-bar { display: flex; align-items: center; gap: 6px; margin: 0 12px 6px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; color: var(--text-secondary, #aab4be); background: rgba(92, 200, 255, 0.08); border: 1px solid rgba(92, 200, 255, 0.18); }
.hub-slowmode-bar.waiting { color: #ffd27a; background: rgba(255, 196, 80, 0.10); border-color: rgba(255, 196, 80, 0.28); }
.composer-send-btn.slowmode-locked { opacity: 0.45; cursor: not-allowed; }

/* Kelime filtresi kartı */
.wf-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 10px 0 4px; cursor: pointer; }
.wf-check input { width: 18px; height: 18px; accent-color: var(--accent, #5cc8ff); flex-shrink: 0; }
.wf-terms { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; font-family: inherit; line-height: 1.4; }
.wf-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wf-actions .hubset-save-btn { margin-left: auto; }

/* Moderasyon kaydı */
.modlog-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.modlog-filters > * { flex: 1 1 200px; min-width: 0; margin: 0; }
.modlog-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 56vh; overflow-y: auto; }
.modlog-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.modlog-row:last-child { border-bottom: none; }
.modlog-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,0.05); flex-shrink: 0; font-size: 15px; }
.modlog-body { min-width: 0; flex: 1; }
.modlog-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #e6e6e6); }
.modlog-meta { font-size: 12.5px; color: var(--text-secondary, #9aa4ae); margin-top: 2px; overflow-wrap: anywhere; }
.modlog-meta b { color: var(--text-primary, #e6e6e6); font-weight: 600; }
.modlog-time { font-size: 11.5px; color: var(--text-muted, #6f7a85); flex-shrink: 0; white-space: nowrap; padding-top: 2px; }

/* Davet kodu oluşturma */
.invite-step { display: flex; flex-direction: column; gap: 8px; }
.invite-step .discover-select { margin-bottom: 6px; }
.invite-step .hubset-save-btn { min-height: 44px; margin-top: 6px; }
.invite-summary { font-size: 13px; color: var(--text-secondary, #9aa4ae); text-align: center; }
.invite-row-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
/* Tam ekran lobi ayarları (z-index 900) açıkken, içinden açılan pencereler (davet, arkadaş daveti, görsel kırpma, profil…)
   ve bildirim baloncukları ayarların ÜSTÜNDE görünmeli. */
body.hubset-open .modal-overlay, body.hubset-open .cropper-overlay { z-index: 950; }
body.hubset-open .toast-container { z-index: 1000; }

/* 2FA kurulumu: sade, iki adımlı */
.twofa-stephead { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; color: var(--text-primary); margin-top: 4px; }
.twofa-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #5cc8ff); color: #0b0c10; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.twofa-open-app { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.twofa-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.twofa-qr-hint { margin: 0; text-align: center; }
.twofa-noapp { margin: 0; font-size: 12.5px; }
.twofa-noapp a, .twofa-manual summary { color: var(--accent, #5cc8ff); }
.twofa-manual { font-size: 13px; }
.twofa-manual summary { cursor: pointer; padding: 4px 0; list-style: none; text-decoration: underline; }
.twofa-manual summary::-webkit-details-marker { display: none; }
.twofa-manual[open] { display: flex; flex-direction: column; gap: 8px; }
.twofa-manual .twofa-secret { font-size: 13px; }
/* Telefonda QR gizli (aynı telefonla taranamaz); bilgisayarda "uygulamada aç" gizli */
.twofa-box[data-device="phone"] .twofa-qr-wrap { display: none; }
.twofa-box[data-device="desktop"] .twofa-open-app { display: none; }

/* Bas-konuş */
.ptt-key-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px 30px; font-size: 13.5px; }
.ptt-kbd { min-width: 34px; padding: 4px 10px; border-radius: 8px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--bg-app); border: 1px solid var(--border-soft-strong); border-bottom-width: 3px; color: var(--text-primary); }
.ptt-kbd.listening { border-color: var(--accent, #5cc8ff); color: var(--accent, #5cc8ff); animation: ptt-blink 1s infinite; }
@keyframes ptt-blink { 50% { opacity: 0.5; } }
#settings-ptt-key-hint { margin-left: 30px; }
.call-ptt-btn {
  position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 260;
  display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
  background: rgba(20, 26, 33, 0.92); border: 2px solid rgba(92, 200, 255, 0.45); color: var(--text-primary, #e6e6e6);
  font-size: 15px; font-weight: 650; white-space: nowrap; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
.call-ptt-btn .call-ptt-icon { font-size: 20px; }
.call-ptt-btn.active { background: #1f8f4e; border-color: #57f287; transform: translateX(-50%) scale(1.05); }
.call-ptt-btn.locked { opacity: 0.55; }

/* Link önizlemesi */
.link-preview { position: relative; margin-top: 6px; max-width: 420px; border-left: 3px solid var(--accent, #5cc8ff); border-radius: 8px; background: rgba(255,255,255,0.04); overflow: hidden; }
.link-preview-main { display: flex; flex-direction: column; gap: 3px; padding: 9px 30px 10px 12px; text-decoration: none; color: inherit; }
.link-preview-site { font-size: 11.5px; color: var(--text-tertiary, #8a949e); }
.link-preview-title { font-size: 14px; font-weight: 650; color: var(--accent, #5cc8ff); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview-main:hover .link-preview-title { text-decoration: underline; }
.link-preview-desc { font-size: 12.5px; color: var(--text-secondary, #aab4be); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview-img { margin-top: 6px; width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; background: rgba(0,0,0,0.2); }
.link-preview-remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.35); color: var(--text-secondary, #aab4be); font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.link-preview:hover .link-preview-remove, .link-preview-remove:focus-visible { opacity: 1; }
@media (hover: none) { .link-preview-remove { opacity: 0.8; } }
.dm-msg .link-preview { margin-bottom: 4px; }

/* Grup DM */
.friends-groups { margin: 4px 0 10px; }
.friends-groups-head { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.friends-groups-add { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-soft-strong, rgba(255,255,255,0.12)); background: transparent; color: var(--text-secondary, #aab4be); font-size: 15px; cursor: pointer; }
.friends-groups-add:hover { color: var(--accent, #5cc8ff); border-color: var(--accent, #5cc8ff); }
.friends-groups-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.friends-groups-empty { font-size: 12.5px; color: var(--text-tertiary, #8a949e); padding: 4px 2px; }
.group-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; border: none; background: transparent; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.group-row:hover, .group-row.active { background: rgba(255,255,255,0.06); }
.group-avatar { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.group-avatar span { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--user-color, #3a4652); border: 2px solid var(--bg-panel, #11161c); overflow: hidden; }
.group-avatar span img { width: 100%; height: 100%; object-fit: cover; }
.group-avatar span:nth-child(1) { top: 0; left: 0; }
.group-avatar span:nth-child(2) { bottom: 0; right: 0; }
.group-row-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.group-row-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-row-sub { font-size: 11.5px; color: var(--text-tertiary, #8a949e); }
.group-row .hub-card-unread { margin-left: auto; }
.group-pick-count { font-size: 12.5px; color: var(--text-tertiary, #8a949e); }
.group-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; border: 1px solid var(--border-soft-strong, rgba(255,255,255,0.1)); border-radius: 12px; padding: 4px; }
.group-pick-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.group-pick-item:hover { background: rgba(255,255,255,0.05); }
.group-pick-item input { width: 18px; height: 18px; accent-color: var(--accent, #5cc8ff); flex-shrink: 0; }
.group-pick-item.disabled { opacity: 0.45; cursor: default; }
.group-rename-row { display: flex; gap: 8px; align-items: center; }
.group-rename-row input { flex: 1; min-width: 0; margin: 0; }
.group-members-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.group-mute-row { margin: 4px 0; }
.hub-msg-system { align-self: center; text-align: center; font-size: 12.5px; color: var(--text-tertiary, #8a949e); padding: 6px 12px; margin: 4px auto; max-width: 90%; }
.hub-msg-system b { color: var(--text-secondary, #aab4be); font-weight: 600; }
/* Grup görünümünde lobiye özgü parçalar gizli */
.hub-detail-view.is-group #hub-voice-rooms-toggle-btn,
.hub-detail-view.is-group #hub-voice-rooms-side,
.hub-detail-view.is-group #hub-voice-rooms-backdrop,
.hub-detail-view.is-group #lobby-supporters,
.hub-detail-view.is-group #hub-settings-open-btn,
.hub-detail-view.is-group #hub-member-options-wrap { display: none !important; }

/* Grup ayarları içinden açılan kişi seçici onun ÜSTÜNDE */
#group-pick-modal { z-index: 170; }
body.hubset-open #group-pick-modal { z-index: 960; }
#group-settings-members { max-height: 38vh; overflow-y: auto; flex-shrink: 0; }
#group-settings-members .settings-blocked-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
#group-settings-members .voice-mute-row-meta { display: inline; margin: 0; }
#group-settings-leave { margin-top: 6px; flex-shrink: 0; }

/* iPhone ana ekrana ekle yönergesi */
.a2hs-steps { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: a2hs; }
.a2hs-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--text-primary, #e6e6e6); }
.a2hs-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(92, 200, 255, 0.12); color: var(--accent, #5cc8ff); font-size: 18px; font-weight: 700; }
.a2hs-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-ico-text { font-size: 12px; }
.a2hs-never { align-self: center; }

/* Profil penceresi: ad ve durum kapağın altında; kapak fotoğrafı engellenmez */
.profile-banner { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.profile-banner.has-image { background-image: linear-gradient(180deg, rgba(10, 13, 17, 0) 55%, rgba(10, 13, 17, 0.35)), var(--banner-img); background-position: center; }
.profile-identity-section { display: flex; flex-direction: column; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.08)); }
.profile-identity-section .username-view, .profile-identity-section .username-edit { margin-top: 0; }
.profile-identity-section .username-edit input { min-width: 0; flex: 1; max-width: 220px; }
.profile-identity-section .status-label-row { margin-top: 6px; }
/* Kapat düğmesi her kapak görselinde okunur olsun */
#profile-modal .profile-close-btn, #other-profile-modal .profile-close-btn {
  z-index: 5; width: 34px; height: 34px; top: 12px; right: 12px; font-size: 15px; font-weight: 700;
  background: rgba(8, 10, 14, 0.78); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#profile-modal .profile-close-btn:hover, #other-profile-modal .profile-close-btn:hover { background: rgba(8, 10, 14, 0.92); color: #5cc8ff; border-color: #5cc8ff; }

/* ══ Sol ray sırası (telefon): Ana Menü · Keşfet · Lobiler · Arkadaşlar · Arkadaş Ekle · Gruplar ══ */
.rail-btn-mobile { display: none; }
@media (max-width: 900px) {
  .rail-btn-mobile { display: grid; }
  #rail-home { order: 1; }
  #rail-discover { order: 2; }
  #rail-lobbies { order: 3; }
  .rail-btn-friends { order: 4; }
  #rail-friend { order: 5; }
  #rail-groups { order: 6; }
  body.lobby-drawer-open:not(.drawer-friends):not(.drawer-groups) #rail-lobbies,
  body.drawer-groups #rail-groups, body.drawer-friends #rail-friends { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
  /* Lobiler çekmeceyle değil raydan açılır: üst çubuktaki üç çizgi kalktı */
  .topbar .lobby-nav-toggle { display: none !important; }
  /* Çekmece kipleri: Lobiler | Arkadaşlar | Gruplar (her biri yalnız kendi bölümü) */
  .lobby-nav .friends-groups { display: none; }
  body.drawer-groups .lobby-nav .friends-groups { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
  body.drawer-groups .lobby-nav .friends-groups-list { overflow-y: auto; }
  body.drawer-groups .lobby-nav-head, body.drawer-groups #lobby-nav-list, body.drawer-groups .lobby-nav .friends-sidebar { display: none !important; }
  /* Üst çubuk: daha yüksek; "Ana Menü" en solda */
  :root { --topbar-h: 58px; }
  .topbar { min-height: var(--topbar-h) !important; padding-top: 6px; padding-bottom: 6px; padding-left: 14px; }
  .topbar-left { gap: 0; }
  #topbar-context-title { padding-left: 2px; font-size: 18px; }
  /* Profil yazısı çerçeveden biraz ayrık, okunur */
  .app-rail .rail-avatar[data-lbl]::after { margin-top: 7px; }
}
/* Masaüstü: Gruplar da telefondaki gibi kendi çekmece kipinde (bkz. yukarıdaki min-width: 901px bloğu) */
@media (min-width: 901px) {
  .lobby-nav .friends-groups-list { overflow-y: auto; min-height: 0; }
}

/* ══ Telefon yan çevrilince (yatay) ══════════════════════════════════════════
   iPhone'da yan çevirme sayfayı yakınlaştırıp öyle bırakıyordu (viewport'ta maximum-scale=1 ile önlendi) ve sol ray
   kısa yüksekliğe sığmıyordu. Yatayda: yatay taşma yok; üst çubuk ince; ray yazısız, küçük düğmeli ve kaydırılabilir. */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  :root { --topbar-h: 44px; --rail-w: 62px; }
  .topbar { min-height: var(--topbar-h) !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-left: calc(14px + env(safe-area-inset-left)) !important; padding-right: calc(10px + env(safe-area-inset-right)); }
  #topbar-context-title { font-size: 16px; }
  .app-rail {
    width: 50px; gap: 4px !important; padding: 8px 0; border-radius: 24px;
    top: calc(env(safe-area-inset-top) + var(--topbar-h) + 4px) !important; bottom: calc(4px + env(safe-area-inset-bottom));
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  }
  .app-rail::-webkit-scrollbar { display: none; }
  .app-rail .rail-btn, .app-rail .rail-avatar { width: 38px !important; height: 38px !important; flex: none; }
  .app-rail [data-lbl]::after { display: none; }
  .app-rail .rail-spacer { flex: 1 0 4px; }
  body:not([data-view="hub-detail"]):not([data-view="discover"]) .chat-area { margin-left: calc(var(--rail-w) + env(safe-area-inset-left)); }
  .lobby-nav { top: calc(4px + env(safe-area-inset-top)) !important; bottom: calc(4px + env(safe-area-inset-bottom)) !important; width: min(320px, calc(100vw - var(--rail-w) - 20px)) !important; }
}
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  /* Lobi içinde: geri düğmesi yalnızca ok (yazı lobi adının üstüne binmesin); ikinci satır ince */
  body[data-view="hub-detail"] .hub-back-btn [data-i18n="back-to-hubs"] { display: none; }
  body[data-view="hub-detail"] .topbar-left .hub-back-btn { width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; }
  body[data-view="hub-detail"] .topbar-left { gap: 8px; }
  body[data-view="hub-detail"] .hub-detail-header { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0; }
  body[data-view="hub-detail"] .hub-detail-header .hub-icon-btn { height: 34px; }
  body[data-view="hub-detail"] .hub-detail-header [data-lbl]::after { display: none; }
}

/* ══ Balon efektleri: GPU (transform) ile — iPhone'da donmasın, ana iş parçacığını meşgul etmesin ══════
   Eski sürüm background-position'ı canlandırıyordu: her karede yeniden boyama gerekir; çok balonda iPhone animasyonu
   durduruyor ve dokunuşlar saniyelerce gecikiyordu. Şimdi katman hareket ettirilir (birleştirici/GPU), boyama yok. */
.hub-msg-bubble.chat-theme-soft::before, .dm-msg.chat-theme-soft::before {
  inset: 0 0 -52px 0;
  background-size: 34px 52px, 46px 52px, 26px 52px, 58px 52px;
  background-position: 14% 4px, 42% 30px, 68% 17px, 86% 43px;
  background-repeat: repeat-y;
  animation: softDustRiseGpu 4.2s linear infinite;
  will-change: transform;
}
@keyframes softDustRiseGpu { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -52px, 0); } }
.hub-msg-bubble.chat-theme-contrast::before, .dm-msg.chat-theme-contrast::before {
  inset: 0 auto 0 -100%; width: 300%;
  background-image: linear-gradient(100deg, transparent 38%, rgba(120, 170, 255, .30) 47%, rgba(180, 140, 255, .40) 53%, transparent 62%);
  background-size: 100% 100%;
  animation: contrastShimmerGpu 3.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes contrastShimmerGpu { from { transform: translate3d(34%, 0, 0); } to { transform: translate3d(-34%, 0, 0); } }
.hub-msg-bubble.chat-theme-contrast::after, .dm-msg.chat-theme-contrast::after {
  box-shadow: 0 0 7px 1.5px rgba(130, 115, 240, .85);
  animation: contrastEdgeGlowGpu 3.4s ease-in-out infinite;
}
@keyframes contrastEdgeGlowGpu { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hub-msg-bubble.chat-theme-soft::before, .dm-msg.chat-theme-soft::before,
  .hub-msg-bubble.chat-theme-contrast::before, .dm-msg.chat-theme-contrast::before,
  .hub-msg-bubble.chat-theme-contrast::after, .dm-msg.chat-theme-contrast::after { animation: none; }
}
/* Ekranda görünmeyen mesajların tüm efektleri (balon, çerçeve, isim efekti) duraklatılır */
.msg-offscreen, .msg-offscreen *, .msg-offscreen::before, .msg-offscreen::after,
.msg-offscreen *::before, .msg-offscreen *::after { animation-play-state: paused !important; }
/* DM paneli zaten bulanık cam: içindeki her balonun ayrıca arka plan bulanıklaştırması (iPhone'da çok pahalı) kapalı */
#dm-modal .dm-msg.bubble-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); }
#dm-close-btn { touch-action: manipulation; }
/* Grup görünümü: lobiye özgü düğmeler nerede olursa olsun (telefonda üst çubuğa taşınmış olsalar da) gizli */
body.in-group[data-view="hub-detail"] #hub-settings-open-btn,
body.in-group[data-view="hub-detail"] #lobby-superlike-btn,
body.in-group[data-view="hub-detail"] #hub-member-options-wrap,
body.in-group[data-view="hub-detail"] #hub-voice-rooms-toggle-btn,
body.in-group[data-view="hub-detail"] #hub-voice-rooms-side,
body.in-group[data-view="hub-detail"] .topbar-lobby-badge { display: none !important; }

/* Ek menü / çıkartma seçici: ortak dropdown animasyonu translateX(-50%) içerdiği için solda yarısı ekran dışından kayıyordu */
@keyframes attachPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.composer-attach-menu, .sticker-picker { animation: attachPopIn 0.16s ease-out; }

/* ── Lobi yan panelleri: kapatma düğmesi + bilgisayarda yan sütun modu ── */
.hub-side-close-btn {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--glass-1); color: var(--text-secondary); font-size: 14px; cursor: pointer;
  box-shadow: var(--hi), 0 0 0 1px var(--border-soft); z-index: 2; display: flex; align-items: center; justify-content: center;
}
.hub-side-close-btn:hover { color: var(--text-primary, #fff); background: var(--glass-2); }
.hub-detail-side, .hub-voice-rooms-side { position: fixed; }
.hub-detail-side .hub-side-title, .hub-voice-rooms-side .hub-side-title { padding-right: 34px; }
.sidedock-setting { display: none; }
@media (min-width: 1101px) {
  .sidedock-setting { display: block; }
  body.dock-members[data-view="hub-detail"] .hub-detail-main { margin-right: 284px; transition: margin 0.25s ease; }
  body.dock-voice[data-view="hub-detail"] .hub-detail-main { margin-left: 272px; transition: margin 0.25s ease; }
  body.dock-members .hub-detail-side, body.dock-voice .hub-voice-rooms-side { box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong); }
  body.dock-members[data-view="hub-detail"] .hub-members-toggle-btn { display: none; }
}
@media (min-width: 1101px) {
  /* Üst çubuk (z 80) şeffaf alanıyla panelin ✕ düğmesini örtmesin */
  .hub-voice-rooms-side.open { z-index: 85; }
  .hub-detail-side { top: 72px; }
}

/* Telefonda lobi üst sağ butonları: simge tam ortada, butonlar biraz daha geniş */
@media (max-width: 900px) {
  .topbar .topbar-lobby-actions .topbar-superlike-btn,
  .topbar .topbar-lobby-actions .hub-icon-btn,
  .topbar .topbar-lobby-actions .hub-members-toggle-btn {
    display: flex; align-items: center; justify-content: center; padding: 0 9px; min-width: 44px; height: 40px; line-height: 1;
  }
  .topbar .topbar-lobby-actions [data-lbl]::after { display: none; }
}

/* Dokunmatik: mesaj satırında büyük vurgu çerçevesi yok; basılı tutunca metin seçilmez (Kopyala ⋯ menüsünde) */
@media (hover: none) {
  .hub-msg:hover, .hub-msg.show-actions, .dm-msg:hover, .dm-msg.show-actions, .message:hover { background: transparent !important; box-shadow: none !important; }
  .hub-msg, .dm-msg, .dm-msg-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  .hub-msg input, .hub-msg textarea, .dm-msg input, .dm-msg textarea { -webkit-user-select: text; user-select: text; }
}

/* Telefon: yan paneller açıkken donma — panelin bulanıklığı (backdrop-filter) arkadaki hareketli mesaj efektlerini
   her karede yeniden bulanıklaştırıyordu. Panel opak, efektler panel açıkken duraklatılır. */
@media (max-width: 900px) {
  .hub-detail-side, .hub-voice-rooms-side { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #121821 !important; bottom: 0; z-index: 70; }
  body.theme-purple .hub-detail-side, body.theme-purple .hub-voice-rooms-side { background: #17122a !important; }
  .hub-detail-side.open, .hub-voice-rooms-side.open { z-index: 70; } /* .open (z:65) karartma katmanının (69) altında kalıp dokunuşları engelliyordu */
  .hub-side-backdrop.open { cursor: pointer; z-index: 69; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.hub-side-open .hub-feed *, body.hub-side-open .hub-feed *::before, body.hub-side-open .hub-feed *::after { animation-play-state: paused !important; }
  .hub-side-close-btn { width: 36px; height: 36px; font-size: 16px; }
}
@media (max-width: 900px) {
  .topbar .topbar-lobby-actions #hub-settings-open-btn { font-size: 18px; line-height: 1; padding: 0 10px; }
}

/* Mesaj yazma alanı: odaklanınca çıkan mavi dikdörtgen çerçeve yok (kutunun kendisi zaten yuvarlak) */
#hub-message-input, #dm-message-input, #hub-message-input:focus, #dm-message-input:focus, #hub-message-input:focus-visible, #dm-message-input:focus-visible {
  outline: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0; background: transparent; -webkit-appearance: none; appearance: none;
}

/* ══ Masaüstü: küçültülmüş arama çubuğu — düzeni aşağı itmeyen, üstte ortalı küçük cam hap ══
   (Telefonda tam genişlikli şerit kalır. Eskiden tüm sayfaya 42px üst boşluk ekleyip ray/içeriği taşırıyordu.) */
@media (min-width: 901px) {
  body.call-mini-active { padding-top: 0; }
  .call-mini-bar {
    left: 50%; right: auto; top: 10px; transform: translateX(-50%); width: auto; min-width: 280px; max-width: min(460px, calc(100vw - 280px)); height: 40px;
    padding: 6px 8px 6px 14px; border: 0; border-radius: 999px; background: var(--glass-2);
    -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    box-shadow: var(--hi), 0 0 0 1px rgba(87, 242, 135, 0.45), 0 10px 28px -10px rgba(0, 0, 0, 0.6);
  }
  .call-mini-name { max-width: 220px; }
}

/* ══ Özelleştirme Merkezi (profil + sohbet kişiselleştirmesinin tek yeri) ═════════════════════════════ */
.profile-customize-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 12px; padding: 12px 14px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  color: var(--text-primary); background: linear-gradient(135deg, rgba(109, 91, 208, .22), rgba(79, 124, 255, .12)); box-shadow: var(--hi), 0 0 0 1px var(--accent-line);
}
.profile-customize-btn:hover { filter: brightness(1.12); }
.pcb-ic { font-size: 22px; flex: none; }
.pcb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pcb-text strong { font-size: 14.5px; font-weight: 650; }
.pcb-text small { font-size: 11.5px; color: var(--text-tertiary); }
.pcb-chev { font-size: 22px; color: var(--text-tertiary); flex: none; }
.cz-screen .hubset-card { display: flex; flex-direction: column; gap: 10px; }
.cz-card-title { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.cz-status { font-size: 13px; color: var(--text-secondary); }
.cz-block { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.cz-block .profile-field-label { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.cz-feat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.cz-feat:first-of-type { border-top: 0; }
.cz-feat-ic { font-size: 22px; flex: none; width: 30px; text-align: center; }
.cz-feat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cz-feat-text strong { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cz-feat-text small { font-size: 12px; color: var(--text-tertiary); }
.cz-chip { flex: none; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-soft-strong); color: var(--text-tertiary); }
.cz-chip-on { color: #57f287; border-color: rgba(87, 242, 135, .45); background: rgba(87, 242, 135, .1); }
.cz-prem-head { font-size: 13px; color: var(--text-secondary); padding-bottom: 6px; }

/* ══ Sauran Atmosphere kartları ══════════════════════════════════════════════════════════════════════ */
.cz-atmo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.atmo-clear { grid-column: 1 / -1; justify-self: start; border: 0; background: none; color: var(--text-tertiary); font-size: 12.5px; cursor: pointer; padding: 4px 0; }
.atmo-clear:hover { color: var(--danger); }
.atmo-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.atmo-card.active { box-shadow: var(--hi), 0 0 0 2px var(--accent-line); }
.atmo-art { position: relative; height: 128px; display: grid; place-items: center; }
.atmo-emoji { font-size: 46px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.atmo-tier { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(8, 10, 14, .62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.atmo-tier-premium { color: #ffd166; box-shadow: 0 0 0 1px rgba(255, 209, 102, .4); }
.atmo-tier-plus { color: #b9a8ff; box-shadow: 0 0 0 1px rgba(150, 130, 255, .4); }
.atmo-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.atmo-body h4 { font-size: 16px; font-weight: 650; color: var(--text-primary); margin: 0; }
.atmo-body p { font-size: 12.5px; line-height: 1.4; color: var(--text-tertiary); margin: 0; }
.atmo-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.atmo-chip { font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: var(--glass-2); color: var(--text-secondary); }
.atmo-stage { display: none; gap: 4px; }
.atmo-stage.on { display: flex; }
.atmo-stage span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 5px 0; border-radius: 6px; background: var(--glass-2); color: var(--text-tertiary); transition: .2s; }
.atmo-stage span.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.atmo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.atmo-btn { flex: 1 1 auto; border: 0; border-radius: 999px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--glass-2); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-soft-strong); }
.atmo-btn:hover:not(:disabled) { background: var(--glass-1); box-shadow: 0 0 0 1px var(--accent-line); }
.atmo-btn:disabled { opacity: .6; cursor: default; }
.atmo-btn-use { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.atmo-btn-on { color: #57f287; box-shadow: 0 0 0 1px rgba(87, 242, 135, .4); opacity: 1 !important; }

/* Profil sesi düğmesi (başkasının profilinde) */
.op-sound { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 4px; }
.op-sound-btn { border: 0; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-primary); }
.op-sound-ask { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); }
.op-sound-ask button { border: 0; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; background: var(--glass-2); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-soft-strong); }
.settings-atmo-vol { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.settings-atmo-vol input { flex: 1; }

/* ══ Lobi Takviyesi ═══════════════════════════════════════════════════════════════════════════════════ */
.hub-boost-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px auto 6px; width: 100%; max-width: 860px; padding: 6px 12px; }
.hbs-info { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer; color: var(--text-primary); background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); }
.hbs-info:hover { box-shadow: var(--hi), 0 0 0 1px var(--accent-line); }
.hbs-ic { font-size: 15px; }
.hbs-count { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.hbs-level { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.hbs-bar { flex: 1; min-width: 40px; height: 6px; border-radius: 999px; background: var(--glass-2); overflow: hidden; }
.hbs-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6d5bd0, #4f7cff, #4fe3ff); transition: width .4s; }
.hbs-cta, .hbs-sound { border: 0; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; background: var(--glass-2); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-soft-strong); }
.hbs-cta { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.hbs-cta:hover, .hbs-sound:hover { filter: brightness(1.15); }
.hbs-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-tertiary); width: 100%; }
.hbs-ask button { border: 0; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; background: var(--glass-2); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-soft-strong); }
@media (max-width: 720px) { .hub-boost-strip { padding: 4px 10px; gap: 6px; } .hbs-cta { padding: 6px 10px; } }
.booster-mark { font-size: .85em; }
.bst-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bst-big { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.bst-lvl { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.bst-bar { height: 8px; border-radius: 999px; background: var(--glass-2); overflow: hidden; margin: 8px 0 4px; }
.bst-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6d5bd0, #4f7cff, #4fe3ff); }
.bst-level { padding: 10px 12px; margin-top: 8px; border-radius: 14px; background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); opacity: .75; }
.bst-level.done { opacity: 1; box-shadow: 0 0 0 1px rgba(87, 242, 135, .4); }
.bst-level-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bst-lv { font-size: 11px; font-weight: 700; color: var(--accent); }
.bst-at { margin-left: auto; font-size: 11.5px; color: var(--text-tertiary); }
.bst-level.done .bst-at { color: #57f287; }
.bst-level ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.boost-modal-box { max-width: 520px; }
.cz-sound-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-sound-opt { display: inline-flex; border-radius: 999px; overflow: hidden; background: var(--glass-2); box-shadow: 0 0 0 1px var(--border-soft-strong); }
.cz-sound-opt.selected { box-shadow: 0 0 0 2px var(--accent-line); background: var(--accent-soft); }
.cz-sound-pick, .cz-sound-play { border: 0; background: none; color: var(--text-primary); font-size: 12.5px; font-weight: 600; padding: 8px 12px; cursor: pointer; }
.cz-sound-pick:disabled { opacity: .5; cursor: default; }
.cz-sound-play { padding: 8px 10px; color: var(--accent); border-left: 1px solid var(--border-soft); }
.atmo-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.atmo-filters::-webkit-scrollbar { display: none; }
.atmo-filter { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-secondary); background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); white-space: nowrap; }
.atmo-filter small { font-size: 10.5px; opacity: .7; }
.atmo-filter.on { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.atmo-tier-coin { color: #ffd166; box-shadow: 0 0 0 1px rgba(255, 209, 102, .4); }
.atmo-empty { grid-column: 1 / -1; padding: 18px 0; }

/* ══ Lobi görsel efektleri (Seviye 3 + lobi Atmosphere'i) — arka plan katmanı, sohbetin ARKASINDA, tıklamayı engellemez ═════ */
.hub-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hub-fx > i { position: absolute; display: block; }
.hub-fx-petals > i { top: -4%; width: 9px; height: 9px; border-radius: 0 70% 0 70%; background: linear-gradient(135deg, #ffc3e0, #f472b6); opacity: 0; animation: hubfxPetal var(--t) linear var(--d) infinite; transform: scale(var(--s)); }
@keyframes hubfxPetal {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--s)); opacity: 0; }
  8% { opacity: .55; }
  92% { opacity: .45; }
  100% { transform: translate3d(var(--x), 108vh, 0) rotate(420deg) scale(var(--s)); opacity: 0; }
}
.hub-fx-stars > i { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(190, 200, 255, .8); opacity: .12; animation: hubfxTwinkle var(--t) ease-in-out var(--d) infinite; transform: scale(var(--s)); }
@keyframes hubfxTwinkle { 0%, 100% { opacity: .1; } 50% { opacity: .75; } }
.hub-fx-lights > i { bottom: 0; width: 7%; height: 62%; transform-origin: 50% 100%; opacity: .5; filter: blur(2px);
  background: linear-gradient(to top, rgba(120, 190, 255, .45), rgba(160, 130, 255, .18) 45%, transparent 90%); animation: pfxSmokeSwayA var(--t) ease-in-out var(--d) infinite; }
.hub-fx-lights > i:nth-child(1) { left: 12% !important; } .hub-fx-lights > i:nth-child(2) { left: 36% !important; }
.hub-fx-lights > i:nth-child(3) { left: 62% !important; } .hub-fx-lights > i:nth-child(4) { left: 86% !important; }
@media (prefers-reduced-motion: reduce) { .hub-fx > i { animation: none; opacity: .15; } }
body.hubset-open .hub-fx > i { animation-play-state: paused; }

/* ══ Lobi bannerı (Seviye 3, GIF olabilir): lobi bilgi penceresi + Keşfet kartı/detayı (sohbetin üstünde DEĞİL) ═════════ */
.hub-banner-preview { width: 160px !important; height: 40px !important; }
.hub-info-banner { height: 104px; margin: -26px -24px 16px; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--glass-1) center / cover no-repeat; position: relative; }
.hub-info-banner::after, .discover-card-banner::after, .discover-detail-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(8, 10, 14, .5)); border-radius: inherit; }
.hub-info-box:has(.hub-info-banner) .hub-info-avatar { margin-top: -46px; position: relative; box-shadow: 0 0 0 4px var(--bg-app, #0a0d11); }
.discover-card-banner { position: relative; align-self: stretch; height: 68px; margin: -16px -16px 2px; border-radius: 20px 20px 0 0; background: var(--glass-1) center / cover no-repeat; flex: none; }
.discover-card.rank-1 .discover-card-banner, .discover-card[class*="rank-"] .discover-card-banner { margin-top: -16px; }
.discover-detail-banner { position: relative; height: 128px; border-radius: 16px; background: var(--glass-1) center / cover no-repeat; flex: none; overflow: hidden; }
@media (max-width: 900px) { body[data-view="discover"] .discover-card-banner { height: 52px; margin: -10px -8px 2px; border-radius: 16px 16px 0 0; } }

/* ══ Lobiye özel emojiler (Seviye 4) ═════════════════════════════════════════════════════════════════ */
.hub-emoji { width: 1.6em; height: 1.6em; vertical-align: -0.4em; object-fit: contain; }
.hub-emoji-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; max-width: 280px; }
.hub-emoji-pick { border: 0; background: var(--glass-1); border-radius: 10px; padding: 6px; cursor: pointer; }
.hub-emoji-pick img { width: 34px; height: 34px; object-fit: contain; display: block; }
.hub-emoji-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-emoji-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); font-size: 12px; }
.hub-emoji-item img { width: 28px; height: 28px; object-fit: contain; }
.hub-emoji-item button { border: 0; background: none; color: var(--text-tertiary); cursor: pointer; }
.hub-emoji-item button:hover { color: var(--danger); }
.atmo-early { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(8, 10, 14, .62); color: #ffd166; box-shadow: 0 0 0 1px rgba(255, 209, 102, .4); }
.msg-reaction-picker .react-prem { box-shadow: 0 0 0 1px rgba(255, 209, 102, .35); border-radius: 8px; }

/* ══ Takviye: lobi bilgi penceresinde ═══════════════════════════════════════════════════════════════ */
.hub-info-boost { margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); text-align: left; }
.hib-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 650; color: var(--text-primary); }
.hib-lvl { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.hib-bar { height: 6px; border-radius: 999px; background: var(--glass-2); overflow: hidden; margin: 8px 0; }
.hib-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6d5bd0, #4f7cff, #4fe3ff); }
.hib-max, .bst-max { margin: 6px 0; font-size: 12.5px; line-height: 1.45; color: #ffd166; }
.hib-btn { width: 100%; margin-top: 4px; height: 38px; border: 0; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 650; color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.hib-btn:hover { filter: brightness(1.12); }

/* ══ Lobi üyeleri: kart görünümü + Premium'a özel animasyonlu kartlar ═══════════════════════════════════════ */
.hub-member-card { position: relative; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc, #5cc8ff) 20%, transparent), rgba(255, 255, 255, 0.04) 70%); }
.hub-member-card .hub-member-avatar-wrap .msg-avatar-btn { width: 38px; height: 38px; font-size: 14px; }
.hub-member-card .hub-member-dot { width: 11px; height: 11px; }
.hub-member-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-member-card .hub-member-name { font-size: 13.5px; font-weight: 600; }
.hub-member-sub { font-size: 11px; color: var(--text-tertiary, #8b93a1); }
.hub-member-card > :not(.mc-fx) { position: relative; z-index: 1; }
.member-prem { border-color: transparent; isolation: isolate; }
.member-prem::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(110deg, #ffd166, #c084fc, #4fe3ff, #ffd166); background-size: 300% 300%; animation: mcBorder 6s linear infinite; }
.member-prem::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 12.5px; background: rgba(14, 19, 25, 0.96);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc, #c084fc) 24%, rgba(14, 19, 25, 0.96)), rgba(14, 19, 25, 0.96) 75%); }
.mc-fx { position: absolute; inset: 1.5px; border-radius: 12.5px; overflow: hidden; pointer-events: none; z-index: 0; }
.mc-shine { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent); animation: mcShine 4.6s ease-in-out infinite; }
.mc-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe8a3; box-shadow: 0 0 6px 1px rgba(255, 209, 102, 0.9); opacity: 0; animation: mcSpark 3.2s ease-in-out infinite; }
.mc-spark-a { left: 22%; top: 70%; animation-delay: 0s; }
.mc-spark-b { left: 58%; top: 28%; animation-delay: 1.1s; }
.mc-spark-c { left: 86%; top: 62%; animation-delay: 2.1s; }
@keyframes mcBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes mcShine { 0%, 55% { transform: translateX(0); opacity: 0; } 62% { opacity: 1; } 100% { transform: translateX(560%); opacity: 0; } }
@keyframes mcSpark { 0%, 100% { opacity: 0; transform: translateY(0) scale(.6); } 40% { opacity: 1; transform: translateY(-5px) scale(1); } 70% { opacity: 0; transform: translateY(-10px) scale(.5); } }
@media (prefers-reduced-motion: reduce) { .member-prem::before, .mc-shine, .mc-spark { animation: none; } .mc-spark { opacity: .5; } }

/* ══ Premium üye kartı stilleri (cs-*): renkler değişken, parçacıklar emoji ya da nokta ═════════════════════════ */
.member-prem::before { background-image: linear-gradient(110deg, var(--b1, #ffd166), var(--b2, #c084fc), var(--b3, #4fe3ff), var(--b1, #ffd166)); }
.member-prem::after { background: linear-gradient(135deg, color-mix(in srgb, var(--tint, var(--mc, #c084fc)) 24%, rgba(14, 19, 25, 0.96)), rgba(14, 19, 25, 0.96) 75%); }
.cs-emoji .mc-spark { width: auto; height: auto; background: none; box-shadow: none; font-size: 12px; line-height: 1; }
.cs-emoji .mc-spark::before { content: var(--sp); }
.cs-rose   { --b1: #ff9ecb; --b2: #ff5fa8; --b3: #ffd1e6; --tint: #ff7eb6; --sp: '💗'; }
.cs-teddy  { --b1: #f6c9a0; --b2: #ffb3c8; --b3: #fff0d9; --tint: #e8a47a; --sp: '🧸'; }
.cs-bunny  { --b1: #e9d5ff; --b2: #ffc2e0; --b3: #ffffff; --tint: #f0a6d8; --sp: '🐰'; }
.cs-sakura { --b1: #ffc1d9; --b2: #ff8fb8; --b3: #ffffff; --tint: #ff9ec4; --sp: '🌸'; }
.cs-candy  { --b1: #ff9ad5; --b2: #7fe3ff; --b3: #fff29a; --tint: #c9a0ff; --sp: '🍭'; }
.cs-fire   { --b1: #ff9f1c; --b2: #ff3d00; --b3: #ffd23f; --tint: #ff5a1f; }
.cs-fire::before { animation-duration: 2.6s; }
.cs-fire .mc-spark { background: #ffb347; box-shadow: 0 0 7px 1px rgba(255, 90, 0, 0.95); animation-duration: 1.7s; }
.cs-thunder { --b1: #4fc3ff; --b2: #ffffff; --b3: #3a5bff; --tint: #3d7bff; --sp: '⚡'; }
.cs-thunder::before { animation: mcBorder 2.4s linear infinite, mcFlicker 3.4s steps(1) infinite; }
.cs-steel  { --b1: #c9d3e0; --b2: #6b7788; --b3: #eef3f9; --tint: #7f8da1; }
.cs-steel::after { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 7px), linear-gradient(135deg, color-mix(in srgb, #7f8da1 22%, rgba(14, 19, 25, 0.96)), rgba(14, 19, 25, 0.96) 75%); }
.cs-steel .mc-spark { display: none; }
.cs-steel .mc-shine { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation-duration: 3.4s; }
.cs-frost  { --b1: #bdf3ff; --b2: #5ec8ff; --b3: #ffffff; --tint: #6fd3ff; --sp: '❄️'; }
.cs-dragon { --b1: #2fd27a; --b2: #ffd166; --b3: #0e7a45; --tint: #1fbf6d; --sp: '🐉'; }
@keyframes mcFlicker { 0%, 88%, 92%, 100% { filter: none; } 90% { filter: brightness(2.2); } 96% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { .cs-thunder::before { animation: none; } }

/* Özelleştirme Merkezi: stil önizlemeleri */
.cz-card-group { margin: 12px 0 6px; font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.cz-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cz-card-opt { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; border-radius: 16px; }
.cz-card-opt.selected { box-shadow: 0 0 0 2px var(--accent-line); }
.cz-card-prev { display: flex; align-items: center; width: 100%; box-sizing: border-box; }
.cz-card-prev-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #0a0d11; background: var(--mc, #8b7cf0); }

/* ══ Birleşik emoji paneli (Emoji / GIF'ler / Çıkartmalar) ═══════════════════════════════════════════════ */
.composer-emoji-btn { flex: none; font-size: 20px; line-height: 1; opacity: .85; }
.composer-emoji-btn:hover { opacity: 1; }
.emoji-panel { position: fixed; z-index: 400; width: 380px; max-width: calc(100vw - 16px); height: min(440px, 62vh); flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--glass-2); box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 18px 50px -12px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.3); backdrop-filter: blur(var(--blur-2)) saturate(1.3); }
.emoji-panel.ep-sheet { left: 0 !important; right: 0; bottom: 0 !important; width: 100%; max-width: none; height: 62vh; border-radius: 20px 20px 0 0; }
.ep-handle { display: none; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--border-soft-strong); flex: none; }
.ep-sheet .ep-handle { display: block; }
.ep-tabs { display: flex; gap: 6px; margin: 10px 12px 6px; padding: 4px; border-radius: 999px; background: var(--glass-1); flex: none; }
.ep-tabs button { flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.ep-tabs button.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.ep-search { display: flex; align-items: center; gap: 8px; margin: 4px 12px 8px; padding: 0 12px; border-radius: 12px; background: var(--glass-1); box-shadow: 0 0 0 1px var(--border-soft); flex: none; }
.ep-search input { flex: 1; min-width: 0; height: 38px; border: 0; background: none; color: var(--text-primary); font-size: 14px; outline: none; }
.ep-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; overscroll-behavior: contain; }
.ep-sec h4 { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.ep-sec h4 small { margin-left: auto; font-size: 10.5px; text-transform: none; letter-spacing: 0; opacity: .8; }
.ep-prem { color: #ffd166; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.ep-item { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 10px; background: none; cursor: pointer; padding: 4px; font-size: 24px; line-height: 1; color: inherit; }
.ep-item:hover { background: var(--glass-1); }
.ep-item img { width: 100%; height: 100%; object-fit: contain; }
.ep-stk { padding: 2px; }
.ep-stk-in { display: block; width: 100%; height: 100%; }
.ep-stk-in svg { width: 100%; height: 100%; }
.ep-locked img, .ep-locked .ep-stk-in { opacity: .35; filter: grayscale(.5); }
.ep-lock { position: absolute; right: 2px; bottom: 2px; font-size: 12px; font-style: normal; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.ep-add { border: 1.5px dashed var(--border-soft-strong); color: var(--text-tertiary); font-size: 22px; }
.ep-note { margin: 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }
.ep-empty { text-align: center; padding: 24px 0; }
.ep-link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; text-decoration: underline; }
.ep-jump { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 10px; border-top: 1px solid var(--border-soft); flex: none; scrollbar-width: none; }
.ep-jump::-webkit-scrollbar { display: none; }
.ep-jump button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--glass-1); color: var(--text-secondary); font-size: 15px; font-weight: 700; cursor: pointer; }
.ep-jump button:hover { background: var(--accent-soft); color: var(--accent); }
.ep-gif-soon { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.ep-gif-ic { font-size: 44px; margin-bottom: 8px; }
.ep-gif-soon h4 { font-size: 16px; color: var(--text-primary); margin: 0 0 6px; text-transform: none; letter-spacing: 0; display: block; }
.ep-gif-soon p { font-size: 13px; line-height: 1.5; margin: 0; }
.ep-meta { display: flex; flex-direction: column; min-width: 0; }
.ep-meta small, .ep-count { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; }

/* ══ Açılır menüler her yerde opak: temaya (body.theme-*) bağlı şeffaflık arkadaki metni göstermesin ══ */
body .topbar-menu-dropdown, body .composer-attach-menu, body .msg-actions-menu, body .composer-attach-wrap .liquid-glass,
body .hub-member-menu, body .sticker-picker, body .emoji-panel, body .hub-emoji-picker, body .ctx-menu, body .context-menu {
  background: #0e1319 !important; background-image: none !important; opacity: 1 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 0 0 1px var(--border-soft-strong), 0 16px 40px -10px rgba(0, 0, 0, 0.75);
  z-index: 420;
}

/* ══ GIF sekmesi ve sohbette GIF ═════════════════════════════════════════════════════════════════════════ */
.ep-gif-grid { columns: 2; column-gap: 6px; padding-top: 4px; }
.ep-gif { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--glass-1); cursor: pointer; break-inside: avoid; }
.ep-gif img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ep-gif:hover { outline: 2px solid var(--accent); }
.ep-gif-attr { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--text-secondary); }
.ep-jump.ep-attr-bar { justify-content: center; align-items: center; padding: 9px 10px; min-height: 34px; }
.chat-gif { display: block; max-width: min(260px, 100%); max-height: 220px; border-radius: 12px; }

/* ══ Özel çıkartmalar ═══════════════════════════════════════════════════════════════════════════════ */
.stk-custom { display: block; width: 100%; height: 100%; object-fit: contain; }
.hub-msg-sticker .stk-custom, .dm-msg-sticker .stk-custom { width: 140px; height: 140px; }
.ep-stk-in img { width: 100%; height: 100%; object-fit: contain; }
.ep-stk-manage { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ep-stk-item img { width: 44px; height: 44px; }

/* ══ Seviye 4: duyuru panosu, karşılama ═════════════════════════════════════════════════════════════ */
.hub-info-announce { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft, rgba(92,200,255,.12)); box-shadow: inset 0 0 0 1px var(--accent-line, rgba(92,200,255,.3)); }
.hub-info-announce .hia-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--accent, #5cc8ff); }
.hub-info-announce p { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); }
.hub-welcome-box { max-width: 380px; text-align: center; padding: 26px 22px 20px; }
.hub-welcome-ic { font-size: 40px; margin-bottom: 6px; }
.hub-welcome-box h3 { margin: 0 0 10px; }
.hub-welcome-msg { margin: 0 0 16px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--text-secondary); }
.hub-welcome-ok { border: 0; border-radius: 999px; padding: 10px 28px; font-weight: 700; cursor: pointer; background: var(--accent, #5cc8ff); color: #06121a; }

/* ══ Canlı önizleme sayfası (Özelleştirme seçenekleri) ══════════════════════════════════════════════ */
.chat-theme-option.pv-locked { opacity: .62; position: relative; }
.chat-theme-option.pv-locked::after { content: "🔒"; position: absolute; top: 4px; right: 4px; font-size: 11px; }
.pv-overlay { z-index: 460; align-items: center; justify-content: center; }
.pv-sheet { width: min(420px, calc(100vw - 24px)); max-height: 92vh; overflow-y: auto; padding: 14px 16px 16px; border-radius: 22px; background: #0e1319 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.pv-handle { display: none; width: 40px; height: 4px; border-radius: 4px; background: var(--border-soft-strong); margin: 0 auto 10px; }
.pv-stage { border-radius: 16px; background: #05080b; padding: 14px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px var(--border-soft); overflow: hidden; }
.pv-profile.profile-modal-box { position: relative; inset: auto; transform: none; width: 100%; max-width: none; margin: 0; padding: 18px 16px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: none; background-color: #0e1319; }
.pv-avatar { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: visible; background: var(--bg-surface-3); display: grid; place-items: center; font-size: 32px; font-weight: 700; }
.pv-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pv-initial { color: var(--text-primary); }
.pv-name { font-size: 19px; font-weight: 700; }
.pv-about { align-self: stretch; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 12.5px; }
.pv-about span { color: var(--text-secondary); }
.pv-chat { display: flex; flex-direction: column; gap: 12px; }
.pv-msg { display: flex; gap: 9px; align-items: flex-start; }
.pv-msg-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-surface-3); display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; }
.pv-msg-av img { width: 100%; height: 100%; object-fit: cover; }
.pv-msg b { font-size: 13px; }
.pv-msg .hub-msg-bubble { margin-top: 3px; display: inline-block; max-width: 100%; }
.pv-cardstage { display: grid; place-items: center; padding: 6px 0; }
.pv-cardstage .cz-card-prev { width: 100%; max-width: 300px; transform: scale(1.15); transform-origin: center; }
.pv-info .pv-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
.pv-info h3 { margin: 4px 0 6px; font-size: 19px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-info p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.pv-actions { display: flex; gap: 8px; }
.pv-btn { flex: 1; border: 0; border-radius: 999px; padding: 13px 16px; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--accent, #5cc8ff); color: #06121a; }
.pv-btn-up { background: linear-gradient(135deg, #7c5cff, #ff6fb5); color: #fff; }
.pv-btn-ghost { background: var(--glass-1); color: var(--text-primary); flex: 0 0 auto; }
.pv-btn:disabled { opacity: .6; cursor: default; flex: 1; }
@media (max-width: 720px) {
  .pv-overlay { align-items: flex-end; }
  .pv-sheet { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pv-handle { display: block; }
}

/* ══ Mağaza ana sayfası ═════════════════════════════════════════════════════════════════════════════ */
.store-screen { position: fixed; inset: 0; z-index: 440; display: none; flex-direction: column; background: #080b0f; }
body.st-open { overflow: hidden; }
.st-shell { display: flex; flex-direction: column; width: min(1100px, 100%); height: 100%; margin: 0 auto; }
.st-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.st-head h2 { flex: 1; margin: 0; font-size: 20px; }
.st-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--glass-1); color: var(--text-primary); font-size: 18px; cursor: pointer; }
.st-wallet { padding: 7px 12px; border-radius: 999px; background: var(--glass-1); font-weight: 700; font-size: 13px; }
.st-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 10px; scrollbar-width: none; flex: none; }
.st-chips::-webkit-scrollbar { display: none; }
.st-chips button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--glass-1); color: var(--text-secondary); }
.st-chips button.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.st-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 28px; overscroll-behavior: contain; }
.st-note { font-size: 12.5px; color: var(--text-tertiary); margin: 4px 2px 12px; }
.st-promo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 4px 0 10px; }
.st-promo-card { text-align: left; border: 0; border-radius: 16px; padding: 16px; cursor: pointer; color: #fff; display: flex; flex-direction: column; gap: 4px; }
.st-promo-card b { font-size: 16px; }
.st-promo-card span { font-size: 12.5px; opacity: .92; line-height: 1.45; }
.st-promo-card i { font-style: normal; font-size: 12px; font-weight: 700; margin-top: 4px; }
.st-promo-prem { background: linear-gradient(135deg, #6d3cff, #ff5fa8); }
.st-promo-plus { background: linear-gradient(135deg, #1f8fff, #20d5c2); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.st-empty { grid-column: 1 / -1; text-align: center; color: var(--text-tertiary); padding: 30px 0; }
.st-card { display: flex; flex-direction: column; text-align: left; border: 0; border-radius: 16px; padding: 0; overflow: hidden; cursor: pointer; background: #10161d; color: inherit; box-shadow: 0 0 0 1px var(--border-soft); transition: transform .15s, box-shadow .15s; }
.st-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-line), 0 10px 26px -12px rgba(0, 0, 0, .7); }
.st-card.st-active { box-shadow: 0 0 0 2px var(--accent); }
.st-thumb { position: relative; height: 128px; display: grid; place-items: center; background: #05080b; overflow: hidden; }
.st-locked .st-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,11,.45), transparent 55%); pointer-events: none; }
.st-meta { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.st-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.st-sub { font-size: 11.5px; color: var(--text-tertiary); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.st-badge { font-size: 10.5px; }
.st-free { font-weight: 700; color: #57f287; }
.st-coin { font-weight: 700; color: #ffd166; }
.st-state { font-size: 11px; color: var(--text-tertiary); }
.st-state.on { color: #57f287; font-weight: 700; }
.st-state.lock, .st-state.soon { opacity: .9; }
.st-prof.profile-modal-box { position: relative; inset: auto; transform: none; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; display: grid; place-items: center; animation: none; background-color: #0e1319; box-shadow: none; }
.st-prof-fx { width: 100%; height: 100%; display: grid; place-items: center; background: #0e1319; }
.st-av { position: relative; width: 62px; height: 62px; border-radius: 50%; background: var(--bg-surface-3); display: grid; place-items: center; font-weight: 700; font-size: 24px; }
.st-av > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.st-nm { font-size: 20px; font-weight: 700; padding: 0 8px; text-align: center; }
.st-chat { display: flex; flex-direction: column; gap: 8px; padding: 10px; width: 100%; align-items: flex-start; }
.st-chat .hub-msg-bubble { font-size: 12px; max-width: 90%; padding: 7px 11px; }
.st-chat .hub-msg-bubble + .hub-msg-bubble { align-self: flex-end; }
.st-cardthumb { width: 100%; padding: 0 12px; display: grid; place-items: center; }
.st-cardthumb .cz-card-prev { width: 100%; pointer-events: none; }
.st-atmo { width: 100%; height: 100%; display: grid; place-items: center; font-size: 42px; }
.st-atmo-big { height: 170px; border-radius: 14px; font-size: 64px; }
.st-stk { width: 96px; height: 96px; }
.st-stk svg, .st-stk img { width: 100%; height: 100%; }
.st-stk-big { width: 150px; height: 150px; margin: 0 auto; }
.st-frame { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; position: relative; }
.st-bigframe { display: grid; place-items: center; padding: 20px 0; }
@media (max-width: 720px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .st-thumb { height: 116px; } }
/* Mağaza performansı: ekran dışındaki kartlar çizilmez/animasyon harcamaz (79 kartlı ızgara) */
.st-card { content-visibility: auto; contain-intrinsic-size: 160px 230px; }
.st-card:not(:hover) .mc-fx i, .st-card:not(:hover) .pfx-mask i { animation-play-state: paused; }

/* Paket önizlemesi (sekmeler + lobi) */
.pv-tabs { display: flex; gap: 6px; padding: 4px; margin: 0 0 10px; border-radius: 999px; background: var(--glass-1); }
.pv-tabs button { flex: 1; border: 0; background: none; padding: 9px 4px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.pv-tabs button.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.pv-lobby.hub-detail-view { display: block !important; position: relative; height: 190px; border-radius: 14px; overflow: hidden; padding: 0; }
.pv-lobby .hub-fx { z-index: 0; }
.pv-lobby-bar { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 10px 14px; font-size: 13px; background: rgba(0,0,0,.28); }
.pv-lobby-bar span { color: var(--text-tertiary); }
.pv-lobby-msg { position: relative; z-index: 1; display: flex; gap: 8px; padding: 18px 14px; align-items: flex-start; }
.pv-lobby-msg .hub-msg-bubble { font-size: 13px; }
.st-bundle { flex-direction: column; gap: 10px; align-content: center; }
.st-bundle-emoji { font-size: 40px; }
.st-bundle .hub-msg-bubble { font-size: 11.5px; padding: 6px 11px; }

/* Ana menü: iki sabit sekme (Lobilerim / Katıldığım lobiler) — liste kaydırılsa da en üstte kalır */
.hub-list-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 0 12px; margin: 0 0 8px; background: var(--bg-app, #0a0d11); }
.hub-list-tab { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer; color: var(--text-secondary); font-size: 14.5px; font-weight: 600; background: var(--glass-1); box-shadow: var(--hi), 0 0 0 1px var(--border-soft); transition: background .18s; }
.hub-list-tab:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.hub-list-tab.on { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.hub-list-tab-count { font-size: 12.5px; font-weight: 600; min-width: 24px; text-align: center; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text-secondary); }
.hub-list-tab.on .hub-list-tab-count { background: var(--accent); color: #06121a; }
@media (max-width: 480px) { .hub-list-tab { padding: 0 12px; font-size: 13.5px; } }

/* ══ Telefon (dikey): sol ray yerine altta yüzen cam hap (pill) gezinme — #mnav (mobile-nav.js) ═══════════
   Yatay telefonda ve tabletlerde eski sol ray kalır. Sohbet/Keşfet ekranlarında hap gizlidir (tam ekran içerik). */
.mnav, .friends-directory { display: none; }
@media (max-width: 720px) and (min-height: 501px) {
  :root { --rail-w: 0px; }
  .app-rail { display: none !important; }
  .mnav {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 68px; z-index: 210;
    display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 7px 8px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)), rgba(18, 26, 42, .78);
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -12px rgba(0,0,0,.75);
  }
  body[data-view="hub-detail"] .mnav, body[data-view="discover"] .mnav { display: none; }
  .mnav-btn { position: relative; flex: 1 1 0; min-width: 0; height: 52px; border: 0; border-radius: 999px; background: none; color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mnav-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-btn.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  .mnav-avatar { flex: 0 0 52px; }
  .mnav-av { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-surface-3) center / cover no-repeat; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--text-primary); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
  .mnav-dot { position: absolute; top: 9px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 2px rgba(18, 26, 42, .9); }
  /* çekmece (Gruplar / Mesajlar / Arkadaşlar) pillin üstünde biter */
  .lobby-nav { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  body:not([data-view="hub-detail"]):not([data-view="discover"]) .chat-area { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  #hub-list-view { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
  /* Arkadaşlar çekmecesi: yalnızca arkadaş listesi + arama (mesajlaşma paneli ve lobi listesi gizli) */
  body.drawer-friendlist .lobby-nav-head, body.drawer-friendlist #lobby-nav-list, body.drawer-friendlist .lobby-nav .friends-sidebar, body.drawer-friendlist .lobby-nav .friends-groups { display: none !important; }
  body.drawer-friendlist .friends-directory { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
}
.friends-directory { padding: 4px 4px 0; }
.fd-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.fd-search { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; padding: 0 12px; border-radius: 12px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--border-soft); }
.fd-search svg { width: 17px; height: 17px; stroke: var(--text-tertiary); fill: none; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.fd-search input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; outline: 0; color: var(--text-primary); font-size: 14px; }
.fd-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 2px 8px; }
.fd-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--text-primary); cursor: pointer; text-align: left; font-size: 14.5px; }
.fd-row:hover, .fd-row:active { background: rgba(255,255,255,.07); }
.fd-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--user-color, #5b6cff); color: #fff; }
.fd-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fd-st { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #4b5563; box-shadow: 0 0 0 2.5px #121a26; }
.fd-st.on { background: #57f287; }
.fd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fd-sub { font-size: 12px; color: var(--text-tertiary); }
.fd-empty { padding: 26px 14px; text-align: center; color: var(--text-tertiary); font-size: 13.5px; line-height: 1.5; }
/* Ana Menü üst satırı: Yeni Lobi / Yeni Arkadaş / Yeni Grup */
#hub-list-header { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hub-create-btn-alt { background: var(--glass-1) !important; color: var(--text-primary) !important; box-shadow: inset 0 0 0 1px var(--accent-line) !important; }
@media (max-width: 480px) { #hub-list-header { flex-wrap: nowrap; gap: 6px; } #hub-list-header .hub-create-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 12.5px; white-space: nowrap; min-height: 40px; } }

/* ══ Supporter Rose: bayan destekçilere özel gül-altın çiçekli çerçeve (assets/frame-supporter-rose.svg) ═══════════════ */
.frame-supporter_rose { position: relative; cursor: pointer; }
.sr-overlay { position: absolute; inset: -6%; pointer-events: none; z-index: 1; }
/* görsel 512×624: üstteki 112 birim tavşan kulakları; halka kare kısmı (alt 512) avatarla hizalı kalır */
.sr-overlay .sr-ring-img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 512 / 624; }
.sr-overlay::before {
  content: ''; position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 150, 200, .42) 0%, rgba(255, 130, 185, .2) 58%, transparent 76%);
  animation: srGlowPulse 3.2s ease-in-out infinite; will-change: opacity;
}
.sr-highlight { position: absolute; inset: 0; animation: sfSpin 6.5s linear infinite; transform-origin: 50% 50%; will-change: transform; }
.sr-highlight::before {
  content: ''; position: absolute; top: 5%; left: 50%; width: 10%; height: 10%; margin-left: -5%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 220, 238, .75) 42%, transparent 72%); filter: blur(1.2px);
}
@keyframes srGlowPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sr-overlay::before, .sr-highlight { animation: none; } }

/* ══ Masaüstü / tablet: sol ray da telefondaki yeni gezinmeyle aynı (#mnav dikey cam ray) ═════════════════════
   Gruplar · Keşfet · Ana Menü · Arkadaşlar (liste + arama) · Mesajlar · (altta) Profil. Eski .app-rail gizlenir; ızgaradaki ray sütunu aynen kalır. */
.mnav-lbl { display: none; }
body.drawer-friendlist .lobby-nav-head, body.drawer-friendlist #lobby-nav-list, body.drawer-friendlist .lobby-nav .friends-sidebar, body.drawer-friendlist .lobby-nav .friends-groups { display: none !important; }
body.drawer-friendlist .friends-directory { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
@media (min-width: 721px) and (min-height: 501px) {
  .app-rail { display: none !important; }
  .mnav {
    position: fixed; z-index: 210; left: 8px; top: 8px; bottom: 8px; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; border-radius: 30px;
    background: var(--glass-2); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35); backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    box-shadow: var(--hi), 0 0 0 1px var(--border-soft-strong), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
  }
  .mnav-btn { position: relative; flex: none; width: 50px; height: 56px; border: 0; border-radius: 18px; background: none; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: .18s var(--ease); }
  .mnav-btn:hover { background: var(--glass-1); color: var(--text-primary); }
  .mnav-btn.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
  .mnav-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-lbl { display: block; font-size: 9.5px; line-height: 1; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .mnav-avatar { margin-top: auto; height: 62px; }
  .mnav-av { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-surface-3) center / cover no-repeat; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-soft-strong); }
  .mnav-dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 2px rgba(18, 26, 42, .9); }
}
@media (min-width: 721px) and (max-width: 900px) and (min-height: 501px) {
  body[data-view="hub-detail"] .mnav, body[data-view="discover"] .mnav { display: none; }
}
@media (max-width: 720px) { .mnav-lbl { display: none; } }

/* ══ Bildirimler: sağdan açılan yan pencere; liste yukarı/aşağı kaydırılır ══════════════════════════════════ */
#notifications-modal { align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; }
#notifications-modal .modal-box {
  width: min(400px, 100vw); max-width: 100vw; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 22px 0 0 22px; background: #0e1319 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: -18px 0 50px -16px rgba(0, 0, 0, .85), 0 0 0 1px var(--border-soft);
  padding-top: env(safe-area-inset-top, 0px); animation: notifSlideIn .26s cubic-bezier(.22, .8, .3, 1);
}
#notifications-modal .modal-header { flex: none; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); font-size: 16px; font-weight: 700; }
#notifications-modal .notifications-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin;
}
@keyframes notifSlideIn { from { transform: translateX(100%); } to { transform: none; } }
@media (max-width: 480px) { #notifications-modal .modal-box { width: 92vw; } }
@media (prefers-reduced-motion: reduce) { #notifications-modal .modal-box { animation: none; } }

/* ══ Bildirimler: şık yan pencere (prototip tarzı: yumuşak kartlar, simge rozetleri, hap düğmeler) ═════════════ */
#notifications-modal .modal-box { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)), #0d1220 !important; }
#notifications-modal .modal-header { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 0; }
#notifications-modal .modal-header > span { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.nm-count { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #2f7bff, #5cc8ff); color: #04121e; }
.nm-count.zero { background: rgba(255,255,255,.08); color: var(--text-secondary); font-weight: 600; }
#notifications-close-btn { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--text-secondary); font-size: 15px; cursor: pointer; }
#notifications-close-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
#notifications-modal .notifications-list { gap: 10px; padding: 4px 14px calc(22px + env(safe-area-inset-bottom, 0px)); }
#notifications-modal .notifications-toolbar { display: flex; gap: 8px; flex-wrap: nowrap; padding: 2px 0 4px; }
#notifications-modal .notifications-tool-btn { flex: 1; min-width: 0; padding: 9px 10px; font-size: 12px; font-weight: 700; border: 0; border-radius: 999px; background: rgba(92,200,255,.12); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(92,200,255,.3); }
#notifications-modal .notifications-tool-btn:hover { background: rgba(92,200,255,.22); }
#notifications-modal .notifications-tool-btn.danger { background: rgba(255,90,110,.1); color: #ff8d9b; box-shadow: inset 0 0 0 1px rgba(255,90,110,.3); }
.nc-filter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); align-self: flex-start; }
.nc-filter button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.nc-filter button.on { background: rgba(255,255,255,.14); color: #fff; }
#notifications-modal .notifications-list.nc-only-unread .notification-card.notification-seen { display: none !important; }
#notifications-modal .notifications-list.nc-only-read .notification-card:not(.notification-seen) { display: none !important; }
#notifications-modal .notifications-list.nc-only-read .notification-card.notification-seen { opacity: .85; }
.nc-group { margin: 12px 4px 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); }
#notifications-modal .notification-card {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 14px 14px 12px; border: 0 !important; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #121a2c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: transform .15s, box-shadow .15s;
}
#notifications-modal .notification-card:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(92,200,255,.28); }
#notifications-modal .notification-card.notification-seen { opacity: .62; }
#notifications-modal .notification-card.nc-new::before { content: ""; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: #5cc8ff; box-shadow: 0 0 0 3px rgba(92,200,255,.22); }
.nc-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -10px rgba(0,0,0,.8); }
.nc-ic-blue { background: linear-gradient(135deg, #2f7bff, #5cc8ff); } .nc-ic-violet { background: linear-gradient(135deg, #6b4cff, #c46bff); }
.nc-ic-green { background: linear-gradient(135deg, #1fa971, #57f287); } .nc-ic-red { background: linear-gradient(135deg, #e0405a, #ff8a5c); }
.nc-ic-gold { background: linear-gradient(135deg, #ffb347, #ffd166); color: #2a1c00; } .nc-ic-gray { background: linear-gradient(135deg, #4b5563, #8b97a8); }
.nc-body { min-width: 0; padding-right: 36px; }
.nc-time { position: absolute; top: 14px; right: 30px; font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
#notifications-modal .nc-new .nc-time { right: 30px; }
#notifications-modal .notification-text { font-size: 13.5px; line-height: 1.5; color: var(--text-primary); margin-bottom: 10px; }
#notifications-modal .notification-text strong { color: #fff; }
#notifications-modal .notification-official-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: rgba(255,176,102,.14); color: #ffb066; margin-bottom: 6px; text-transform: uppercase; }
#notifications-modal .notification-preview { margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); font-style: normal; opacity: .9; }
#notifications-modal .notification-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#notifications-modal .notification-actions button { flex: 1 1 0; min-width: 0; padding: 9px 12px; font-size: 12.5px; font-weight: 800; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.07); color: var(--text-secondary); }
#notifications-modal .notification-accept { background: linear-gradient(135deg, #2f7bff, #5cc8ff) !important; color: #04121e !important; }
#notifications-modal .notification-accept:hover { filter: brightness(1.1); }
#notifications-modal .notification-decline { background: rgba(255,90,110,.12) !important; color: #ff8d9b !important; }
#notifications-modal .notification-delete { background: rgba(255,255,255,.06); }
#notifications-modal .notification-delete:hover { background: rgba(255,90,110,.14); color: #ff8d9b; }
#notifications-modal .gift-notification-card { background: linear-gradient(135deg, rgba(255,179,71,.14), rgba(255,209,102,.04)), #121a2c; box-shadow: inset 0 0 0 1px rgba(255,209,102,.3); }
#notifications-modal .gift-collected-tag { font-size: 12.5px; font-weight: 700; color: #57f287; }
#notifications-modal .notifications-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 16px; color: var(--text-secondary); }
.nc-empty-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: linear-gradient(135deg, rgba(47,123,255,.25), rgba(92,200,255,.12)); box-shadow: inset 0 0 0 1px rgba(92,200,255,.3); margin-bottom: 8px; }
#notifications-modal .notifications-empty b { font-size: 16px; color: var(--text-primary); }
#notifications-modal .notifications-empty small { font-size: 13px; color: var(--text-tertiary); }

/* ══ Performans: kalabalık listelerde (mesajlar, üyeler, arkadaşlar) süs animasyonları kapalı ═══════════════════
   Her Plus kullanıcı adı 4, her çerçeve 2-8 sürekli animasyon ekliyordu; tek sohbette yüzlerce animasyon ekranı donduruyordu.
   Süsler profilde, üst çubukta ve büyük avatarlarda çalışmaya devam eder; listelerde sabit kalır. */
#hub-feed .pnp-dust, #dm-feed .pnp-dust, #hub-member-list .pnp-dust, #friends-sidebar-list .pnp-dust, #friends-favorites .pnp-dust, #fd-list .pnp-dust,
#hub-feed .pnc-dust, #dm-feed .pnc-dust, #hub-member-list .pnc-dust { display: none !important; animation: none !important; }
#hub-feed .sr-highlight, #dm-feed .sr-highlight, #hub-member-list .sr-highlight, #friends-sidebar-list .sr-highlight,
#hub-feed .sf-highlight, #dm-feed .sf-highlight, #hub-member-list .sf-highlight, #friends-sidebar-list .sf-highlight { display: none !important; }
#hub-feed .sr-overlay::before, #dm-feed .sr-overlay::before, #hub-member-list .sr-overlay::before, #friends-sidebar-list .sr-overlay::before,
#hub-feed .sf-overlay::before, #dm-feed .sf-overlay::before, #hub-member-list .sf-overlay::before, #friends-sidebar-list .sf-overlay::before { animation: none !important; }
#hub-feed .pf-overlay *, #dm-feed .pf-overlay *, #hub-member-list .pf-overlay *, #friends-sidebar-list .pf-overlay * { animation: none !important; }
#hub-feed .pf-dust, #dm-feed .pf-dust, #hub-member-list .pf-dust, #friends-sidebar-list .pf-dust, #hub-feed .pf-spark, #dm-feed .pf-spark, #hub-member-list .pf-spark, #friends-sidebar-list .pf-spark { display: none !important; }
/* ekran dışındaki süslü öğeler durur (perf-chat.js .anim-off ekler) */
.anim-off, .anim-off *, .anim-off::before, .anim-off::after, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
/* Üzerinde kalıcı pencere açıkken (DM paneli üstü dahil) tüm pencereler DM panelinin üstünde açılır */
.modal-overlay:not(.pv-overlay) { z-index: 230; }

/* Performans: Supporter Rose çerçevesi listelerde SABİT sürümü kullanır (animasyonlu SVG her karede yeniden çizilir; telefonda sohbeti dondurabilir) */
#hub-feed .sr-ring-img, #dm-feed .sr-ring-img, #dm-modal .sr-ring-img, #hub-member-list .sr-ring-img, #friends-sidebar-list .sr-ring-img, #friends-favorites .sr-ring-img, #fd-list .sr-ring-img,
#notifications-list .sr-ring-img, .gift-wrap .sr-ring-img { content: url("assets/frame-supporter-rose-static.svg"); }
#dm-modal .sr-highlight, #dm-modal .sf-highlight { display: none !important; }
#dm-modal .sr-overlay::before, #dm-modal .sf-overlay::before { animation: none !important; }
#dm-modal .pnp-dust, #dm-modal .pnc-dust { display: none !important; animation: none !important; }
#dm-modal .pf-overlay *, #dm-modal .pf-dust, #dm-modal .pf-spark { animation: none !important; }

/* Performans (iPhone/iPad): bulanık cam (backdrop-filter) iOS'ta tüm ekranı her karede yeniden çizdirir ve sohbeti dondurur.
   Cam yüzeyler iOS'ta opak koyu zeminle çizilir; diğer platformlarda görünüm değişmez. */
@supports (-webkit-touch-callout: none) {
  .modal-box, .profile-modal-box, .dm-modal-box, .liquid-glass, .lobby-nav, .mnav, .dm-incoming-call-modal, .app-rail, .friends-sidebar,
  .hub-composer, .topbar, .composer-attach-menu, .msg-actions-menu, .hub-member-menu {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .dm-modal-box, .profile-modal-box { background: #0f131a !important; }
  .lobby-nav, .mnav, .app-rail { background-color: #121a26 !important; }
  .modal-overlay { background: rgba(0, 0, 0, .66); }
}


/* ══ Profil kartı efektleri (fx-pack.js) ve isim plakaları ═══════════════════════════════════════════════════ */
.profile-modal-box.has-pfxc, .st-prof, .pv-profile { position: relative; }
.st-prof { overflow: hidden; }
.pfxc { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pfxc > svg { position: absolute; left: 0; width: 100%; display: block; }
.pfxc .fxc-top { top: 0; height: clamp(44px, 9%, 78px); -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.pfxc .fxc-bot { bottom: 0; height: clamp(64px, 14%, 120px); -webkit-mask-image: linear-gradient(to top, #000 50%, transparent); mask-image: linear-gradient(to top, #000 50%, transparent); }
.pfxc .fxc-full { top: 0; height: 100%; }
.pfxc i { position: absolute; display: block; }

/* Alev */
.pfxc-flame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 118%, rgba(255, 90, 20, .38), transparent 55%), radial-gradient(ellipse at 50% -18%, rgba(255, 60, 10, .26), transparent 50%); animation: fxGlow 2.2s ease-in-out infinite alternate; }
.pfxc-flame .fxc-top { transform: scaleY(-1); -webkit-mask-image: linear-gradient(to top, #000 45%, transparent); mask-image: linear-gradient(to top, #000 45%, transparent); }
.pfxc-flame .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: fxFlick 1.2s ease-in-out infinite; }
.pfxc-flame .fxc-ember { bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px rgba(255, 150, 40, .85); opacity: 0; animation: fxEmber var(--t) ease-out var(--d) infinite; }
@keyframes fxFlick { 0%, 100% { transform: scaleY(.9) skewX(-2deg); } 50% { transform: scaleY(1.1) skewX(2deg); } }
@keyframes fxGlow { from { opacity: .6; } to { opacity: 1; } }
@keyframes fxEmber { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: 1; } 85% { opacity: .9; } 100% { transform: translate(var(--x), calc(-1 * var(--rise, 260px))) scale(.45); opacity: 0; } }

/* Mürekkep */
.pfxc-ink::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 28%, transparent 66%, rgba(0, 0, 0, .6)); }
.pfxc-ink .dr { transform-box: fill-box; transform-origin: 50% 0; animation: fxDrip 5s ease-in-out infinite; }
.pfxc-ink .fxc-smoke { bottom: -8%; width: 70%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse, rgba(10, 8, 24, .85), rgba(40, 20, 80, .35) 55%, transparent 72%); animation: fxSmoke 8s ease-in-out infinite alternate; }
.pfxc-ink .s1 { left: -15%; } .pfxc-ink .s2 { right: -18%; animation-duration: 10s; animation-delay: -3s; } .pfxc-ink .s3 { left: 20%; bottom: -14%; animation-duration: 12s; animation-delay: -6s; opacity: .8; }
.pfxc-ink .fxc-ash { bottom: 4%; width: 3px; height: 3px; border-radius: 50%; background: rgba(210, 200, 255, .75); opacity: 0; animation: fxEmber var(--t) linear var(--d) infinite; }
@keyframes fxDrip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } }
@keyframes fxSmoke { from { transform: translateX(-6%) scale(1); } to { transform: translateX(8%) scale(1.12); } }

/* Yıldırım */
.pfxc-storm::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(70, 60, 210, .38) 100%); animation: fxGlow 1.8s ease-in-out infinite alternate; }
.pfxc-storm .bo { opacity: 0; animation: fxBolt 6s linear infinite; }
.pfxc-storm .arc { animation: fxArc 1.4s linear infinite; }
.pfxc-storm .arc2 { animation-duration: 2.1s; animation-direction: reverse; }
.pfxc-storm .fxc-spark { top: 6%; width: 4px; height: 4px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 8px 2px rgba(120, 160, 255, .9); animation: fxTwinkle 1.6s ease-in-out var(--d) infinite; }
.pfxc-storm .fxc-spark:nth-of-type(odd) { top: auto; bottom: 8%; }
@keyframes fxBolt { 0%, 52%, 58%, 66%, 100% { opacity: 0; } 54% { opacity: 1; } 56% { opacity: .25; } 60% { opacity: .95; } 63% { opacity: .2; } }
@keyframes fxArc { to { stroke-dashoffset: -68; } }
@keyframes fxTwinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.2); } }

/* Tatlı */
.pfxc-sweet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 46px rgba(255, 140, 200, .5), inset 0 0 0 1.5px rgba(255, 190, 220, .55); }
.pfxc-sweet .fxc-sw { bottom: -6%; font-style: normal; line-height: 1; text-shadow: 0 0 8px rgba(255, 140, 200, .7); opacity: 0; animation: fxSweet var(--t) ease-in var(--d) infinite; }
@keyframes fxSweet { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 10% { opacity: .95; } 55% { transform: translate(var(--x), -280px) rotate(10deg); } 100% { transform: translate(calc(var(--x) * -1), -560px) rotate(-8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pfxc *, .pfxc::before { animation: none !important; } .pfxc .fxc-ember, .pfxc .fxc-ash, .pfxc .fxc-sw { opacity: .6; } }

/* İsim plakası: üye listesi satırının ve profil adının arkasında zemin (listelerde sabit; önizleme/profilde .plate-anim ışıltı) */
.has-plate { position: relative; overflow: hidden; background-color: #101018; background-repeat: no-repeat; border-radius: 14px; }
#other-profile-username.has-plate, #profile-username.has-plate, .pv-name.has-plate { display: inline-block; padding: 6px 18px; }
.has-plate::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); opacity: 0; pointer-events: none; }
.has-plate.plate-anim::after { opacity: 1; animation: plateShine 3.6s ease-in-out infinite; }
@keyframes plateShine { 0%, 40% { transform: translateX(0); } 100% { transform: translateX(520%); } }
.plate-flame { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C6 20 10 26 14 6C20 24 26 20 30 40ZM28 40C36 14 44 24 52 2C58 22 64 18 70 40ZM68 40C76 22 82 28 90 8C96 26 104 22 110 40Z' fill='%23ffc23a' opacity='.6'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(150, 18, 8, .96), rgba(255, 92, 18, .6) 62%, rgba(255, 190, 70, .2)) !important; background-position: right bottom, 0 0 !important; background-size: 52% 74%, 100% 100% !important; }
.plate-ink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cg fill='%23020208'%3E%3Cpath d='M0 0H120V6C100 12 90 4 70 8C50 12 40 4 20 8C10 10 4 6 0 8Z'/%3E%3Crect x='12' y='4' width='5' height='20' rx='2.5'/%3E%3Ccircle cx='14.5' cy='26' r='4'/%3E%3Crect x='58' y='4' width='6' height='28' rx='3'/%3E%3Ccircle cx='61' cy='34' r='4.6'/%3E%3Crect x='98' y='4' width='5' height='16' rx='2.5'/%3E%3Ccircle cx='100.5' cy='22' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(90deg, #07070f, #181832 70%, #232350) !important; background-size: 100% 100%, 100% 100% !important; background-position: 0 0, 0 0 !important; }
.plate-storm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpolyline points='96,0 88,14 98,18 86,40' fill='none' stroke='%23eef4ff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolyline points='96,0 88,14 98,18 86,40' fill='none' stroke='%237fa6ff' stroke-opacity='.5' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(90deg, #0d1240, #3a2a9a 62%, #1d6fff) !important; background-size: 100% 100%, 100% 100% !important; background-position: 0 0, 0 0 !important; }
.plate-sweet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cg fill='%23ff6fa8' opacity='.55'%3E%3Cpath d='M92 14c-3-5-9-1-5 4 2 2 5 4 5 4s3-2 5-4c4-5-2-9-5-4z'/%3E%3Cpath d='M108 26c-2-3-6-1-3 2 1 1 3 3 3 3s2-2 3-3c3-3-1-5-3-2z'/%3E%3Cpath d='M74 8c-2-3-6-1-3 2 1 1 3 3 3 3s2-2 3-3c3-3-1-5-3-2z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(90deg, #ff9ec6, #ffc4dc 62%, #fff0f6) !important; background-size: 100% 100%, 100% 100% !important; background-position: 0 0, 0 0 !important; }
.plate-flame, .plate-ink, .plate-storm { color: #fff; }
.plate-sweet { color: #5a1f3c; }
.has-plate .hub-member-name, .has-plate .hub-member-sub { color: inherit; position: relative; z-index: 1; }
.plate-sweet .hub-member-sub { opacity: .75; }
.hub-member-row.has-plate.member-prem { background-color: #101018; }
.hub-member-row.has-plate::before { z-index: 0; }

/* yeni efekt/plaka seçici simgeleri ve mağaza küçük resimleri */
.fx-sw { display: inline-grid; place-items: center; width: 34px; height: 24px; border-radius: 8px; font-size: 14px; background: rgba(255,255,255,.08); }
.fx-sw-flame { background: linear-gradient(135deg, #9a1608, #ff8a1a); } .fx-sw-ink { background: linear-gradient(135deg, #05050c, #2c2c58); }
.fx-sw-storm { background: linear-gradient(135deg, #1a2a9a, #7a5cff); } .fx-sw-sweet { background: linear-gradient(135deg, #ff9ec6, #ffd6ec); }
.st-plate { width: 86%; padding: 14px 16px; font-weight: 700; font-size: 16px; text-align: left; }
.st-plate > span { position: relative; z-index: 1; }
.has-plate .plus-name-plate, .has-plate .plus-name-plate::before, .has-plate .plus-name-plate::after { background: none !important; box-shadow: none !important; border: 0 !important; }
.has-plate .plus-name-plate .pnp-text { position: relative; z-index: 1; }
.hub-member-card.has-plate { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; }
.hub-member-card.has-plate::before, .hub-member-card.has-plate .mc-fx { display: none !important; }