/* Kozamia — Modern Responsive HTML + CSS */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F8F5FC;
  --bg-card: #ffffff;
  --text: #1A1A1A;
  --text-muted: #5C5668;
  --border: #e2e6ee;
  --violet: #752FEE;
  --kz-violet: #752FEE;
  --kz-gold: #CE8FF2;
  --fuchsia: #F9A8D4;
  --cyan: #CE8FF2;
  --accent-rgb: 117, 47, 238;
  --fuchsia-rgb: 249, 168, 212;
  --cyan-rgb: 206, 143, 242;
  --mood-bg-1: rgba(var(--accent-rgb), 0.12);
  --mood-bg-2: rgba(206, 143, 242, 0.08);
  --header-bg: rgba(255, 255, 255, 0.88);
  --shadow: 0 4px 24px rgba(var(--accent-rgb), 0.08);
  --radius: 1rem;
  --nav-h: 4rem;
  --bottom-nav-h: 4.5rem;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --kz-display: "Fraunces", Georgia, serif;
  --kozamia-brand-serif: var(--kz-display);
  --container: min(80rem, 100% - 2rem);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100dvh;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, var(--mood-bg-1), transparent),
    radial-gradient(ellipse 60% 40% at 90% 10%, var(--mood-bg-2), transparent);
  pointer-events: none;
  z-index: -1;
}

body.mood-theme .site-header,
body.mood-theme .bottom-nav {
  border-color: color-mix(in srgb, var(--violet) 18%, var(--border));
}

body.mood-theme .brand-name,
body.mood-theme .btn-login,
body.mood-theme .btn-primary {
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #fff;
}

body.mood-theme .brand-name {
  background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.mood-theme .bottom-nav .nav-item.active {
  color: var(--violet);
  background: rgba(var(--accent-rgb), 0.08);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.muted { color: var(--text-muted); }
.small { font-size: 0.75rem; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined", "Material Symbols", sans-serif !important;
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  user-select: none;
}

/* Theme */
body:has(#theme-toggle:checked) {
  --bg: #09090b;
  --bg-card: #141416;
  --text: #fafafa;
  --text-muted: #a1a1aa;
  --border: #27272a;
  --header-bg: rgba(9, 9, 11, 0.92);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.icon-theme::after { content: "🌙"; font-size: 1rem; }
body:has(#theme-toggle:checked) .icon-theme::after { content: "☀️"; }
body:has(#theme-toggle:checked) .icon-theme { background: var(--violet); color: #fff; }

body:has(#ghost-toggle:checked) .site-header,
body:has(#ghost-toggle:checked) .bottom-nav,
body:has(#ghost-toggle:checked) .feature-card,
body:has(#ghost-toggle:checked) .chat-panel,
body:has(#ghost-toggle:checked) .modal-box { opacity: 0.85; }

body:has(#ghost-toggle:checked) .icon-ghost { background: #0891b2; color: #fff; }

/* Header — sticky; modallar / diyaloglar bunun üstünde olmalı */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  width: var(--container);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  z-index: 2;
}

.brand-name {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.desktop-nav { display: none; gap: 0.25rem; }

.desktop-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}

.desktop-nav a:hover {
  color: var(--violet);
  background: rgba(var(--accent-rgb), 0.08);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

body.logged-in #btn-auth { display: none !important; }
body.logged-in #user-menu { display: block !important; }

/* Anasayfa keşif kartları + sosyal / günün akışı — yalnızca üye */
body:not(.logged-in) #btn-notifications,
body:not(.logged-in) #notif-panel,
body:not(.logged-in) #live-notif-toast,
body:not(.logged-in) #notif-dot {
  display: none !important;
}

body:not(.logged-in) [data-auth-home-discover],
body:not(.logged-in) #home-social-feed-section,
body:not(.logged-in) #home-hashtag-section,
body:not(.logged-in) #daily-flow-card,
body:not(.logged-in) #active-bots-panel {
  display: none !important;
}

/* Misafir önizleme şeridi — ürün kanıtı (üye olmadan) */
body:not(.logged-in) #home-guest-preview {
  display: block !important;
}
body.logged-in #home-guest-preview {
  display: none !important;
}

/* Misafir canlı listesi peeki — sadece liste, paneller kapalı */
body:not(.logged-in) #page-connect.guest-peek-live .connect-hub-header,
body:not(.logged-in) #page-connect.guest-peek-live .connect-tabs,
body:not(.logged-in) #page-connect.guest-peek-live #connect-guest-invite {
  display: none !important;
}
body:not(.logged-in) #page-connect.guest-peek-live #connect-panel-live {
  display: block !important;
}
body:not(.logged-in) #page-connect.guest-peek-live #live-start-btn,
body:not(.logged-in) #page-connect.guest-peek-live [data-live-host-only],
body:not(.logged-in) #page-connect.guest-peek-live .live-composer,
body:not(.logged-in) #page-connect.guest-peek-live #live-gift-sheet {
  display: none !important;
}

/* Capacitor / APK açılış + pull-to-refresh */
.kozamia-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #F7F1E8;
  color: #6B25D9;
  pointer-events: all;
  transition: opacity 0.4s ease;
}
.kozamia-boot-splash[hidden] { display: none !important; }
.kozamia-boot-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.kozamia-boot-logo {
  display: grid;
  place-items: center;
  animation: kozamiaBootPulse 1.35s ease-in-out infinite;
}
.kozamia-boot-logo-svg {
  width: clamp(3.25rem, 14vw, 4.25rem);
  height: clamp(3.25rem, 14vw, 4.25rem);
  display: block;
  filter: drop-shadow(0 6px 16px rgba(117, 47, 238, 0.22));
}
.kozamia-boot-mark {
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.85;
}
.kozamia-boot-brand {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.65rem, 6.5vw, 2.15rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, #752FEE, #d946ef, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kozamiaBootPulse 1.35s ease-in-out infinite;
  animation-delay: 0.12s;
}
@keyframes kozamiaBootPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
#kozamia-ptr {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 99990;
  min-width: 7.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, #752FEE 92%, #000);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0;
  pointer-events: none;
}
#kozamia-ptr.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(0.75rem + env(safe-area-inset-top, 0px)));
}
#kozamia-ptr.is-busy::after {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.4rem;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -0.1rem;
  animation: kozamiaPtrSpin 0.7s linear infinite;
}
@keyframes kozamiaPtrSpin {
  to { transform: rotate(360deg); }
}

/* Misafir menü: sekmeler görünür (davet); içerik üyelik ister.
   Site UI is-nav-hidden olsa bile Bağlan alt nav’da görünsün. */
body:not(.logged-in) .desktop-nav a[data-goto="connect"],
body:not(.logged-in) .mobile-nav a[data-goto="connect"] {
  display: inline-flex !important;
  opacity: 1;
}

body:not(.logged-in) .bottom-nav .nav-item[data-page="connect"],
body:not(.logged-in) .bottom-nav .nav-item[data-page="connect"].is-nav-hidden,
body:not(.logged-in) .bottom-nav .nav-item[data-page="connect"][hidden] {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Kullanıcı Bağlan’ı kapattıysa (yalnızca giriş yapmış) */
body.logged-in.user-hide-connect .bottom-nav .nav-item[data-page="connect"],
body.logged-in.user-hide-connect .desktop-nav a[data-goto="connect"],
body.logged-in.user-hide-connect .mobile-nav a[data-goto="connect"],
body.logged-in.user-hide-connect [data-home-card="connect"] {
  display: none !important;
}

body:not(.logged-in) .bottom-nav .nav-item[data-page="profile"] {
  opacity: 0.85;
}

/* Misafir Bağlan: yalnızca davet paneli — üye sekmeleri/panelleri gizli */
body:not(.logged-in) #page-connect .connect-hub-header,
body:not(.logged-in) #page-connect .connect-tabs,
body:not(.logged-in) #page-connect .connect-panel,
body:not(.logged-in) #page-connect .connect-online-banner {
  display: none !important;
}

body:not(.logged-in) #connect-guest-invite {
  display: block !important;
}

/* Misafir Akış: davet kartı; story + video paneli tamamen gizli */
body:not(.logged-in) #page-feed .feed-page-panel,
body:not(.logged-in) #page-feed #discover-panel-feed,
body:not(.logged-in) #page-feed .story-rings-row,
body:not(.logged-in) #page-feed .feed-top-chrome,
body:not(.logged-in) #page-feed .discover-feed-toolbar {
  display: none !important;
}

body:not(.logged-in) #feed-guest-invite {
  display: block !important;
}

/* Misafir Keşfet: yalnızca davet — paneller / sekmeler gizli */
body:not(.logged-in) #page-discover .connect-hub-header,
body:not(.logged-in) #page-discover .connect-tabs,
body:not(.logged-in) #page-discover .connect-panel {
  display: none !important;
}

body:not(.logged-in) #discover-guest-invite {
  display: block !important;
}

.icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  max-width: 2.25rem;
  max-height: 2.25rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s, transform 0.15s, opacity 0.15s;
}

.icon-btn:active { transform: scale(0.94); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn:active { transform: scale(0.97); }

.btn-login {
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.btn-login-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: none;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.hero-cta-row .btn {
  min-width: 10.5rem;
  padding: 0.7rem 1.4rem;
  box-sizing: border-box;
  justify-content: center;
}

body.logged-in .hero-cta-row,
body.logged-in .hub-guest-invite,
body.logged-in #btn-auth-register {
  display: none !important;
}

.hub-guest-invite {
  margin: 0 0 1.5rem;
  padding: 1.35rem 1.25rem 1.5rem;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(236, 72, 153, 0.1), transparent 55%),
    linear-gradient(160deg, rgba(117, 47, 238, 0.08), rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(117, 47, 238, 0.16);
  text-align: center;
}

.hub-guest-invite-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet, #752FEE);
}

.hub-guest-invite-title {
  margin: 0 auto 0.65rem;
  max-width: 30rem;
  font-size: clamp(1.1rem, 3.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.hub-guest-invite-lead,
.hub-guest-invite-why {
  margin: 0 auto 1rem;
  max-width: 36rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.hub-guest-invite-why {
  margin-top: 0.25rem;
  margin-bottom: 1.1rem;
  font-style: italic;
}

.hub-guest-invite-list {
  list-style: none;
  margin: 0 auto 1rem;
  padding: 0;
  max-width: 36rem;
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.hub-guest-invite-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.15rem 0;
}

.hub-guest-invite-list .material-symbols-outlined {
  font-size: 1.35rem;
  color: var(--violet, #752FEE);
  margin-top: 0.1rem;
}

.hub-guest-invite-list strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.hub-guest-invite-list span:not(.material-symbols-outlined) {
  display: block;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.hub-guest-invite-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.hub-guest-invite-cta .btn {
  min-width: 10.5rem;
  padding: 0.7rem 1.4rem;
  box-sizing: border-box;
  justify-content: center;
  white-space: nowrap;
  flex: 0 1 auto;
}

.hub-guest-invite-cta .btn-outline {
  border: 1.5px solid rgba(15, 23, 42, 0.18);
  background: #fff;
  color: var(--text, #0f172a);
  box-shadow: none;
}

.hub-guest-invite-cta .btn-outline:hover {
  border-color: rgba(117, 47, 238, 0.45);
  color: var(--violet, #752FEE);
  background: rgba(117, 47, 238, 0.04);
}

#page-feed .hub-guest-invite,
#page-discover .hub-guest-invite,
#page-connect .hub-guest-invite {
  margin-top: 0.25rem;
}

#page-connect .hub-guest-invite {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, rgba(117, 47, 238, 0.18));
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(var(--cyan-rgb), 0.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 10%, rgba(var(--fuchsia-rgb), 0.12), transparent 50%),
    linear-gradient(165deg, #f3fbff, #faf8ff 55%, #fff);
  box-shadow: 0 16px 36px rgba(6, 182, 212, 0.08);
}

#page-connect .hub-guest-invite-kicker {
  color: #0e7490;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

#page-connect .hub-guest-invite-title {
  background: linear-gradient(105deg, #0f172a 10%, #752FEE 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hub-guest-features {
  display: grid;
  gap: 1rem;
  margin: 0 auto 1.15rem;
  max-width: 40rem;
  text-align: left;
}

.hub-guest-feature {
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(117, 47, 238, 0.12);
}

.hub-guest-feature-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-bottom: 0.65rem;
}

.hub-guest-feature-head .material-symbols-outlined {
  font-size: 1.5rem;
  color: var(--violet, #752FEE);
  margin-top: 0.1rem;
}

.hub-guest-feature-head h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hub-guest-feature-head p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.hub-guest-feature-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.hub-guest-feature-points li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.hub-guest-feature-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--violet, #752FEE);
  opacity: 0.75;
}

.hub-guest-feature-points strong {
  color: var(--text, #1f1630);
  font-weight: 650;
}

@media (min-width: 720px) {
  .hub-guest-invite {
    padding: 1.75rem 1.75rem 1.85rem;
  }

  .hub-guest-invite-list {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }

  .hub-guest-invite-rich {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
  }

  .hub-guest-features {
    max-width: 42rem;
  }
}

.btn-logout {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}

body:has(#theme-toggle:checked) .btn-logout {
  background: rgba(225, 29, 72, 0.15);
  border-color: rgba(225, 29, 72, 0.35);
}

.btn-primary {
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  color: #fff;
}

.btn-full { width: 100%; }
.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid #b91c1c;
}
.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}
.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pe-account-delete {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  border: none;
  border-radius: 0;
  padding: 1.1rem 0 0;
  background: transparent;
}
.pe-delete-heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #b91c1c;
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.pe-delete-heading .material-symbols-outlined {
  font-size: 1.15rem;
}
.pe-delete-info {
  margin: 0.65rem 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid rgba(185, 28, 28, 0.12);
}
.pe-delete-info-list {
  margin: 0.35rem 0 0.55rem 1.1rem;
  padding: 0;
}
.pe-delete-info-list li {
  margin-bottom: 0.25rem;
}
.pe-account-delete .pe-delete-ack {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.65rem 0 0.85rem;
  font-size: 0.875rem;
}
.pe-account-status.is-error { color: #dc2626; }
.pe-account-status.is-ok { color: #16a34a; }

/* Mobile burger — alt nav ile yedeklendi; hamburger kapalı */
.nav-toggle { display: none; }

.nav-burger,
.mobile-nav {
  display: none !important;
}

@media (min-width: 900px) {
  .desktop-nav { display: flex; }
  .header-actions .btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
}

@media (max-width: 480px) {
  .brand-name {
    display: inline;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
  }
  .brand-logo {
    width: 1.85rem;
    height: 1.85rem;
  }
  .btn-login, .btn-logout { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
  :root {
    --container: min(100%, 100% - 1.25rem);
  }
  .page-wrap {
    padding-top: 0.85rem;
    padding-bottom: 1.5rem;
  }
}

/* Main layout */
.page-wrap {
  width: var(--container);
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
}

.page-hero { margin-bottom: 1.75rem; }
#page-home .page-hero { text-align: center; }

.hero-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--violet);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.page-hero h1 {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hero-sub {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.layout-grid {
  display: grid;
  gap: 1.5rem;
}

.layout-grid-centered {
  grid-template-columns: 1fr;
  justify-items: center;
}

.layout-grid-centered .main-column {
  width: 100%;
  max-width: 52rem;
}

@media (min-width: 1024px) {
  .layout-grid:not(.layout-grid-centered) {
    grid-template-columns: 1fr min(22rem, 32%);
    align-items: start;
  }
}

.section { margin-bottom: 1.5rem; }

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 600;
  margin-bottom: 1rem;
}

.section-title .material-symbols-outlined { color: var(--violet); }

/* Video grid — responsive */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  align-content: start;
}

@media (min-width: 540px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

.video-card-wrap {
  min-width: 0;
  max-width: 100%;
}

.video-card {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .video-card {
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.15);
  }
  .video-card:hover .video-play { opacity: 1; transform: scale(1.05); }
}

.video-thumb {
  aspect-ratio: 9 / 14;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.video-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.video-thumb .video-play {
  position: relative;
  z-index: 1;
}

.video-thumb .video-likes,
.video-thumb .video-duration {
  z-index: 1;
}

.video-play {
  font-size: 2.5rem !important;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

@media (hover: none), (pointer: coarse) {
  .video-play { opacity: 0.85; }
}

.video-likes {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.625rem;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
}

.video-duration {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.625rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-variant-numeric: tabular-nums;
}

button.video-card {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: transparent;
}

.video-grid-more {
  margin-top: 0.75rem;
  text-align: center;
}

.discover-feed-intro {
  margin-bottom: 1rem;
}

.discover-video-grid {
  margin-bottom: 0.5rem;
}

.video-card-info {
  padding: 0.625rem 0.75rem;
  font-size: 0.6875rem;
}

.video-card-info p {
  margin-top: 0.2rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gradient-pink { background: linear-gradient(145deg, #F9A8D4, #F472B6); }
.gradient-violet { background: linear-gradient(145deg, #996BF1, #752FEE); }
.gradient-cyan { background: linear-gradient(145deg, #F8F5FC, #CE8FF2, #752FEE); }
.gradient-rose { background: linear-gradient(145deg, #F9A8D4, #F472B6); }

/* Feature cards */
.card-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 600px) { .card-grid { grid-template-columns: 1fr 1fr; } }

.feature-card {
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.12);
}

.card-violet { background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(217,70,239,0.06)); }
.card-teal { background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(6,182,212,0.06)); }
.card-orange { background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(234,88,12,0.06)); }
.card-pink { background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(244,114,182,0.06)); }
.card-mint { background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(6,182,212,0.06)); }
.card-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.06)); }

.card-grid-wide {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .card-grid-wide { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .card-grid-wide { grid-template-columns: repeat(2, 1fr); }
}

/* Günün Akışı — öne çıkan kart */
.daily-flow-spotlight {
  max-width: 36rem;
  margin: 0 auto 1.15rem;
  padding: 0 0.25rem;
}
.daily-flow-spotlight-inner {
  text-align: center;
  padding: 0.85rem 0.9rem 0.8rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 70%),
    var(--bg-card);
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.06);
}
.daily-flow-spotlight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  text-align: left;
}
.daily-flow-spotlight-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.daily-flow-spotlight-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: rgba(var(--accent-rgb), 0.1);
}
.daily-flow-spotlight-label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet);
}
.daily-flow-meditation-label {
  margin: 0.05rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.25;
}
.daily-engage-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
  font-size: 0.6875rem;
}
.daily-engage-streak .material-symbols-outlined {
  font-size: 0.9rem;
  color: #ea580c;
}
.daily-engage-streak strong {
  font-variant-numeric: tabular-nums;
}
.daily-engage {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--violet, #752FEE) 18%, var(--border));
  background: color-mix(in srgb, var(--violet, #752FEE) 5%, var(--bg-card, #fff));
  text-align: left;
}
.daily-engage-ask {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 650;
}
.daily-engage-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-bottom: 0.35rem;
  justify-content: flex-start;
}
.daily-engage-mood {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  min-width: 2.55rem;
  padding: 0.28rem 0.22rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-card, #fff);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.daily-engage-mood:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--violet, #752FEE) 40%, var(--border));
}
.daily-engage-mood.is-active {
  border-color: var(--violet, #752FEE);
  background: color-mix(in srgb, var(--violet, #752FEE) 12%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet, #752FEE) 20%, transparent);
}
.daily-engage-mood-emoji { font-size: 1rem; line-height: 1; }
.daily-engage-mood-label { font-size: 0.5625rem; font-weight: 600; color: var(--text-muted, #64748b); }
.daily-engage-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.2rem 0 0.35rem;
}
.daily-engage-action-text {
  margin: 0;
  flex: 1 1 8rem;
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  line-height: 1.35;
}
.daily-engage-done-msg {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: #15803d;
}
.daily-engage-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.daily-engage-ctas .btn {
  flex: 1 1 auto;
  min-height: 1.85rem !important;
  padding: 0.28rem 0.5rem !important;
  font-size: 0.7rem !important;
  border-radius: 0.5rem !important;
}
.daily-engage-ctas .btn .material-symbols-outlined,
.daily-engage-action .btn .material-symbols-outlined {
  font-size: 0.95rem !important;
}
.daily-engage-action .btn {
  min-height: 1.85rem !important;
  padding: 0.28rem 0.55rem !important;
  font-size: 0.7rem !important;
  border-radius: 0.5rem !important;
}
.daily-engage.is-complete {
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
  background: color-mix(in srgb, #22c55e 6%, var(--bg-card, #fff));
}

.home-gossip-spotlight {
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  padding: 0 0.25rem;
}
.home-gossip-card {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, #db2777 28%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, #db2777 10%, transparent), color-mix(in srgb, #996BF1 6%, transparent)),
    var(--bg-card, #fff);
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.home-gossip-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb, #db2777 12%, transparent);
}
.home-gossip-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #db2777;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.home-gossip-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #be185d;
}
.home-gossip-title {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 700;
  padding-right: 4.5rem;
}
.home-gossip-meta {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
}
.home-gossip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: #be185d;
}
.home-gossip-cta .material-symbols-outlined { font-size: 1rem; }

.modal-daily-fal .daily-fal-box,
.modal-daily-fal .fal-app-shell {
  max-width: 26rem;
  width: min(100%, 26rem);
  padding: 0;
  overflow: hidden;
  position: relative;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--violet) 16%, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fal-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  color: #fff;
}
.fal-app-bar h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.fal-app-bar-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 0.45rem;
}
.fal-app-bar-btn:hover { background: rgb(255 255 255 / 0.14); }
.fal-app-bar-spacer { width: 3.2rem; }
.fal-step {
  padding: 0.9rem 0.85rem 1.1rem;
  max-height: min(78vh, 36rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, var(--mood-bg-1), transparent),
    radial-gradient(ellipse 55% 40% at 95% 5%, var(--mood-bg-2), transparent),
    var(--bg);
  text-align: left;
}
.fal-step-parchment {
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, var(--mood-bg-1), transparent),
    radial-gradient(ellipse 55% 40% at 95% 5%, rgba(var(--cyan-rgb), 0.08), transparent),
    var(--bg);
}
.fal-photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.fal-photo-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  border: 1.5px dashed color-mix(in srgb, var(--violet) 35%, var(--border));
  background: var(--bg-card);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fal-photo-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.fal-photo-slot:hover {
  border-color: color-mix(in srgb, var(--violet) 55%, var(--border));
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}
.fal-photo-slot.has-photo {
  border-style: solid;
  border-color: var(--violet);
}
.fal-photo-slot.has-photo .fal-photo-hit {
  background: transparent;
}
.fal-photo-placeholder {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  color: var(--violet);
  text-align: center;
  pointer-events: none;
}
.fal-photo-placeholder .material-symbols-outlined { font-size: 1.45rem; }
.fal-photo-placeholder em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.75;
  color: var(--text-muted);
}
.fal-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.fal-photo-sheet {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
  background: rgb(15 15 18 / 0.45);
  padding: 0.75rem;
}
.fal-photo-sheet[hidden] { display: none !important; }
.fal-photo-sheet-panel {
  background: var(--bg-card);
  border-radius: 1rem;
  padding: 0.85rem;
  display: grid;
  gap: 0.45rem;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
}
.fal-photo-sheet-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}
.fal-photo-sheet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  cursor: pointer;
}
.fal-photo-sheet-btn .material-symbols-outlined {
  font-size: 1.2rem;
  color: var(--violet);
}
.fal-photo-sheet-btn.is-danger {
  color: #be185d;
  border-color: color-mix(in srgb, #be185d 28%, var(--border));
}
.fal-photo-sheet-btn.is-danger .material-symbols-outlined { color: #be185d; }
.fal-photo-sheet-btn.is-muted {
  color: var(--text-muted);
  background: transparent;
}
.fal-fields {
  display: grid;
  gap: 0.45rem;
}
.fal-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.fal-field:focus-within {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--border));
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.fal-field-icon {
  font-size: 1.15rem;
  color: var(--violet);
}
.fal-field input,
.fal-field select {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.fal-hint {
  margin: 0.75rem 0 0.9rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.fal-cta {
  width: 100%;
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.28);
}
.fal-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.fal-cta:not(:disabled):active {
  transform: translateY(1px);
}
.fal-cta-outline {
  margin-top: 0.75rem;
  background: transparent;
  color: var(--violet);
  border: 1.5px solid color-mix(in srgb, var(--violet) 40%, var(--border));
  box-shadow: none;
}
.fal-step-lead {
  margin: 0 0 0.65rem;
  font-weight: 700;
  color: var(--text);
}
.fal-seer-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}
.fal-seer-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border-radius: 0.85rem;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fal-seer-card.is-selected {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  background: color-mix(in srgb, var(--violet) 6%, var(--bg-card));
}
.fal-seer-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--fuchsia-rgb), 0.12));
  font-size: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--violet) 20%, var(--border));
}
.fal-seer-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.fal-seer-meta strong { font-size: 0.95rem; color: var(--text); }
.fal-seer-cost {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--violet);
}
.fal-seer-check {
  font-size: 1.35rem;
  color: var(--border);
}
.fal-seer-card.is-selected .fal-seer-check { color: var(--violet); }
.fal-history-list {
  display: grid;
  gap: 0.55rem;
}
.fal-history-empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
  color: var(--text-muted);
}
.fal-history-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.fal-history-thumb {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.55rem;
  overflow: hidden;
  background: rgba(var(--accent-rgb), 0.1);
  display: grid;
  place-items: center;
  color: var(--violet);
}
.fal-history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fal-history-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.fal-history-meta strong {
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fal-status {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.fal-status.is-busy { color: var(--text-muted); }
.fal-status.is-new { color: var(--fuchsia); }
.fal-step-result { padding: 0 0 0.85rem; background: var(--bg); }
.fal-result-hero {
  position: relative;
  min-height: 10rem;
  background: linear-gradient(145deg, #2A0A5C, #752FEE 55%, #d946ef);
  display: grid;
  place-items: center;
}
.fal-result-hero.has-photo { place-items: stretch; }
.fal-result-hero img {
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  display: block;
}
.fal-result-hero-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(transparent, rgb(15 15 18 / 0.78));
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-end;
}
.fal-result-parchment {
  margin: 0.75rem 0.85rem 0;
  padding: 0.9rem 0.85rem 1rem;
  border-radius: 0.85rem;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border));
  box-shadow: var(--shadow);
}
.fal-result-seer {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.fal-result-seer-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--fuchsia-rgb), 0.14));
  border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--border));
  flex-shrink: 0;
}
.fal-result-seer-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: var(--text);
}
.fal-share-ribbon {
  appearance: none;
  border: none;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  color: #fff;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}
.fal-result-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}
.fal-result-body p { margin: 0 0 0.75rem; }
.fal-result-body p:last-child { margin-bottom: 0; }
.fal-result-foot {
  padding: 0.65rem 0.85rem 0;
  display: flex;
  justify-content: flex-start;
}
.fal-result-foot .fal-app-bar-btn { color: var(--violet); }

@media (max-width: 48rem) {
  .modal-daily-fal .fal-app-shell {
    max-width: 100%;
    width: 100%;
    border-radius: 1rem 1rem 0 0;
    max-height: 92vh;
  }
}

.daily-flow-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}
.daily-flow-dismiss:hover { background: transparent; color: var(--text); }
.daily-flow-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "prev body next"
    ". dots .";
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.1rem;
}
.daily-flow-nav#daily-flow-prev { grid-area: prev; }
.daily-flow-nav#daily-flow-next { grid-area: next; }
.daily-flow-spotlight-body { grid-area: body; }
.daily-flow-dots { grid-area: dots; }
.daily-flow-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--violet);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, opacity 0.15s ease, transform 0.15s ease;
}
.daily-flow-nav .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}
.daily-flow-nav:hover {
  background: transparent;
  color: var(--fuchsia, var(--violet));
}
.daily-flow-nav:active {
  transform: scale(0.94);
}
.daily-flow-nav[hidden] {
  visibility: hidden;
  pointer-events: none;
}
.daily-flow-spotlight-body {
  min-width: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.daily-flow-spotlight-body.is-fading {
  opacity: 0;
  transform: translateY(4px);
}
.daily-affirmation {
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.35rem;
  color: var(--text);
  border: none;
  padding: 0;
  font-style: normal;
}
.daily-intention {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.45rem;
  line-height: 1.4;
}
.daily-flow-dots {
  display: flex;
  justify-content: center;
  gap: 0.28rem;
  margin-bottom: 0.55rem;
}
.daily-flow-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(var(--accent-rgb), 0.2);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.daily-flow-dot.is-active {
  width: 0.95rem;
  background: var(--violet);
}
.daily-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}
.daily-flow-actions .btn {
  min-height: 1.9rem !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 0.72rem !important;
  border-radius: 0.5rem !important;
  gap: 0.25rem;
}
.daily-flow-actions .btn .material-symbols-outlined {
  font-size: 0.95rem !important;
}

@media (max-width: 48rem) {
  .daily-flow-spotlight {
    max-width: 100%;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
    box-sizing: border-box;
  }
  .daily-flow-spotlight-inner {
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.7rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    box-shadow: none;
    background: var(--bg-card, #fff);
    box-sizing: border-box;
  }
  .daily-flow-spotlight-head {
    margin-bottom: 0.4rem;
  }
  .daily-flow-spotlight-brand {
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
  }
  .daily-flow-spotlight-icon {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1.05rem;
    border-radius: 0.45rem;
  }
  .daily-flow-spotlight-label {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
  }
  .daily-flow-meditation-label {
    font-size: 0.68rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .daily-flow-carousel {
    display: grid;
    grid-template-columns: 1.3rem 1fr 1.3rem;
    grid-template-areas:
      "body body body"
      "prev dots next";
    align-items: center;
    column-gap: 0.15rem;
    row-gap: 0.18rem;
    margin-bottom: 0.05rem;
  }
  .daily-flow-spotlight-body {
    grid-area: body;
    min-width: 0;
    width: 100%;
  }
  .daily-flow-nav#daily-flow-prev {
    grid-area: prev;
    justify-self: start;
  }
  .daily-flow-nav#daily-flow-next {
    grid-area: next;
    justify-self: end;
  }
  .daily-flow-dots {
    grid-area: dots;
    margin: 0;
  }
  .daily-flow-nav {
    width: 1.3rem;
    height: 1.3rem;
  }
  .daily-flow-nav[hidden] {
    visibility: hidden;
    pointer-events: none;
  }
  .daily-affirmation {
    font-size: clamp(0.85rem, 3.8vw, 0.98rem);
    line-height: 1.35;
    margin: 0 0 0.3rem;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .daily-intention {
    font-size: clamp(0.72rem, 3.2vw, 0.8rem);
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .daily-flow-dots {
    margin: 0;
  }
  .daily-flow-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    width: 100%;
  }
  .daily-flow-actions .btn {
    width: 100%;
    min-height: 1.85rem !important;
    justify-content: center;
    font-size: 0.68rem !important;
    padding: 0.28rem 0.4rem !important;
    white-space: nowrap;
    text-align: center;
  }
}

@media (max-width: 22.5rem) {
  .daily-flow-spotlight-inner {
    padding: 0.55rem 0.55rem 0.6rem;
  }
  .daily-flow-actions {
    grid-template-columns: 1fr;
  }
  .daily-affirmation {
    font-size: 0.85rem;
  }
  .daily-intention {
    font-size: 0.72rem;
  }
}

/* Biz Başardık */
.story-compose {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.story-compose h3 { margin-bottom: 0.5rem; }
.story-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.875rem;
}
.story-form input,
.story-form select,
.story-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}
.story-form .btn,
.story-form button[type="submit"] {
  margin-top: 0.15rem;
}
.story-login-hint { margin-bottom: 0.55rem; text-align: center; }
.stories-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.55rem 0.65rem 0.5rem;
  box-shadow: none;
}
.story-card-header { margin-bottom: 0.3rem; }
.story-author {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.story-author strong {
  font-size: 0.78rem;
  line-height: 1.2;
}
.story-author .muted.small {
  font-size: 0.62rem !important;
  line-height: 1.2;
}
.story-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  overflow: hidden;
}
.story-card h3 {
  font-size: 0.82rem;
  margin: 0 0 0.2rem;
  line-height: 1.3;
  font-weight: 700;
}
.story-text {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted, #64748b);
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.story-you-tag,
.story-pending-tag {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 9999px;
}
.story-you-tag {
  background: color-mix(in srgb, var(--accent, #752FEE) 16%, transparent);
  color: var(--accent, #752FEE);
}
.story-pending-tag {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
}
.story-card.is-own-story {
  border-color: color-mix(in srgb, var(--accent, #752FEE) 35%, var(--border));
}
.story-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.btn-inspire {
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.25);
  color: #db2777;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  min-height: 1.55rem;
}
.btn-inspire:hover { background: rgba(236, 72, 153, 0.18); }
.btn-inspire:disabled { opacity: 0.7; cursor: default; }
.stories-empty { text-align: center; padding: 1rem; font-size: 0.78rem; }

.story-compose {
  margin-bottom: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--bg-card);
}
.story-compose h3 {
  margin: 0 0 0.15rem;
  font-size: 0.85rem;
}
.story-compose .muted.small {
  margin: 0 0 0.4rem;
  font-size: 0.65rem !important;
}
.story-form {
  display: grid;
  gap: 0.35rem;
}
.story-form input,
.story-form select,
.story-form textarea {
  font-size: 0.78rem !important;
  padding: 0.4rem 0.5rem !important;
  min-height: 2rem;
  border-radius: 0.45rem;
}
.story-form textarea {
  min-height: 4.5rem;
}
.story-form .btn {
  min-height: 1.85rem !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 0.75rem !important;
  justify-self: start;
}

#discover-panel-stories .page-toolbar {
  margin-bottom: 0.4rem;
}
#discover-panel-stories .category-pills {
  gap: 0.25rem;
}
#discover-panel-stories .category-pills .pill,
#discover-panel-stories .pill {
  padding: 0.22rem 0.5rem !important;
  font-size: 0.68rem !important;
  min-height: 1.55rem;
}

/* Meditasyon */
.meditation-modal-box { max-width: 24rem; text-align: center; }
.meditation-emoji { font-size: 2rem; display: block; margin-bottom: 0.25rem; }
.meditation-player { padding: 0.5rem 0 1rem; }
.breathing-circle-wrap {
  position: relative;
  width: 9rem;
  height: 9rem;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breathing-circle {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), #ec4899);
  opacity: 0.85;
  transition: transform 1s ease, opacity 1s ease;
}
.breathing-circle.is-inhale {
  transform: scale(1.35);
  opacity: 1;
  animation: breathe-in 1s ease forwards;
}
.breathing-circle.is-exhale {
  transform: scale(0.85);
  opacity: 0.7;
  animation: breathe-out 1s ease forwards;
}
.breathing-circle.is-hold {
  transform: scale(1.1);
  opacity: 0.9;
}
@keyframes breathe-in {
  from { transform: scale(0.9); }
  to { transform: scale(1.35); }
}
@keyframes breathe-out {
  from { transform: scale(1.35); }
  to { transform: scale(0.85); }
}
.breathing-phase-label {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--violet);
  bottom: -0.25rem;
}
.meditation-phase-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 3rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
}
.meditation-progress-bar {
  height: 0.375rem;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.meditation-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), #06b6d4);
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* Destek Eşleşmesi (Buddy) */
.buddy-guest {
  text-align: center;
  padding: 2rem 1rem;
}
.buddy-guest-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

/* Bağlan hub — Topluluk · Sesli · Eşleşme */
.connect-hub { max-width: 48rem; margin: 0 auto; }
.connect-hub-header {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
  padding-top: 0;
  padding-bottom: 0.15rem;
  background: var(--bg);
}
.connect-hub-title {
  margin-bottom: 0.75rem;
}
.connect-hub-title h1 {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  margin: 0.25rem 0;
  font-weight: 700;
  color: var(--text);
}
.connect-hub-title .hero-sub,
.connect-hub-sub {
  margin: 0;
  font-size: 0.8125rem;
}

.connect-online-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.connect-online-banner .material-symbols-outlined {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.connect-online-banner strong { color: var(--text); }
.connect-online-banner.is-live {
  border-color: color-mix(in srgb, #16a34a 45%, var(--border));
  background: color-mix(in srgb, #16a34a 12%, var(--bg-card));
  color: #166534;
}
.connect-online-banner.is-live .material-symbols-outlined,
.connect-online-banner.is-live strong {
  color: #16a34a;
}
.connect-online-banner.is-offline,
.connect-online-banner.is-api,
.connect-online-banner.is-local {
  border-color: color-mix(in srgb, #dc2626 45%, var(--border));
  background: color-mix(in srgb, #dc2626 10%, var(--bg-card));
  color: #991b1b;
}
.connect-online-banner.is-offline .material-symbols-outlined,
.connect-online-banner.is-offline strong,
.connect-online-banner.is-api .material-symbols-outlined,
.connect-online-banner.is-api strong,
.connect-online-banner.is-local .material-symbols-outlined,
.connect-online-banner.is-local strong {
  color: #dc2626;
}
.connect-online-banner .btn { margin-left: auto; flex-shrink: 0; }

.connect-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
  padding: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.connect-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.connect-tab .material-symbols-outlined { font-size: 1.25rem; }
.connect-tab.active,
.connect-tab:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--violet);
}
.connect-tab.active {
  background: color-mix(in srgb, var(--violet, #752FEE) 14%, transparent);
  color: var(--violet, #752FEE);
  box-shadow: inset 0 -2px 0 var(--violet, #752FEE);
  font-weight: 700;
}
.connect-panel { min-height: 0; }

.hub-tabs-sticky {
  position: relative;
  z-index: 12;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0 0.25rem;
  background: color-mix(in srgb, var(--bg, #fff) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-sizing: border-box;
}
.hub-tabs-chrome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 0.9rem;
  margin-top: 0.2rem;
  padding: 0 0.35rem;
}
.hub-tabs-swipe-hint {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet, #752FEE);
  opacity: 0.85;
  animation: hubTabsHintPulse 1.6s ease-in-out infinite;
}
.hub-tabs-swipe-hint.is-fading {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hub-tabs-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}
.hub-tabs-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--violet, #752FEE) 25%, transparent);
  transition: width 0.2s ease, background 0.2s ease;
}
.hub-tabs-dot.is-active {
  width: 0.85rem;
  background: var(--violet, #752FEE);
}
@keyframes hubTabsHintPulse {
  0%, 100% { opacity: 0.45; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}
.connect-panel {
  animation: hubPanelIn 0.22s ease;
}
@keyframes hubPanelIn {
  from { opacity: 0.55; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.connect-panel[hidden] {
  display: none !important;
}
.connect-tabs.discover-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.3rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  grid-template-columns: none;
}
.connect-tabs.discover-tabs::-webkit-scrollbar {
  display: none;
}
.connect-tabs.discover-tabs .connect-tab {
  flex: 0 0 auto;
  min-width: 4.25rem;
  max-width: 5.75rem;
  white-space: nowrap;
  font-size: 0.625rem;
  padding: 0.4rem 0.35rem;
}
.connect-tabs.discover-tabs .connect-tab .material-symbols-outlined {
  font-size: 1.15rem;
}

.connect-tab .tab-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}
.connect-tab .tab-label-short { display: none; }
.connect-tab .tab-label-long { display: block; }

@media (max-width: 64rem) {
  .connect-tab .tab-label-long { display: none; }
  .connect-tab .tab-label-short { display: block; }
}

.connect-tabs.discover-tabs-trio {
  grid-template-columns: repeat(3, 1fr);
}
.connect-tabs.connect-tabs-trio {
  grid-template-columns: repeat(3, 1fr);
}
.connect-tabs.connect-tabs-quad {
  grid-template-columns: repeat(4, 1fr);
}
.connect-tab-messages {
  position: relative;
}
.connect-tab-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.3rem;
  background: var(--fuchsia);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}
.connect-messages-wrap {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}

/* —— Özel Mesajlar (profesyonel düzen) —— */
#connect-panel-messages .dm-app {
  width: 100%;
  height: clamp(30rem, calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 8rem), 48rem);
  min-height: 22rem;
  max-height: calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 5rem);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 1rem;
  box-shadow: 0 18px 50px rgba(var(--accent-rgb), 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media (max-width: 48rem) {
  #page-connect .connect-hub-title h1 { font-size: 1.15rem; }
  #page-connect .hero-sub { font-size: 0.8rem; }
  #connect-panel-messages .dm-app {
    height: auto;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
  #connect-panel-messages .dm-sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #connect-panel-messages .dm-inbox-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  #messages-settings-view {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column;
    padding-bottom: 1rem;
  }
  #messages-settings-view:not([hidden]) {
    visibility: visible;
  }
  .msg-settings-form {
    overflow: visible !important;
    max-height: none !important;
    min-height: 0;
    flex: 1 0 auto;
    padding-bottom: 6rem;
  }
  .dm-settings details {
    margin-bottom: 0.5rem;
  }
  .dm-settings-accordion-summary {
    min-height: 2.75rem;
  }
  .dm-settings-accordion-title {
    font-size: 0.8125rem;
    line-height: 1.3;
  }
  .profile-edit-form,
  #profile-edit-form {
    font-size: 0.9rem;
  }
}

.dm-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.07), rgba(var(--fuchsia-rgb), 0.04));
}
.dm-toolbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
  cursor: pointer;
  flex-shrink: 0;
}
.dm-toolbar-back .material-symbols-outlined { font-size: 1.125rem; }
.dm-toolbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.dm-toolbar-icon { font-size: 1.375rem; line-height: 1; flex-shrink: 0; }
.dm-toolbar-text {
  min-width: 0;
  line-height: 1.25;
}
.dm-toolbar-text strong {
  display: block;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-toolbar-text .small {
  display: block;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-toolbar-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 999px;
  flex-shrink: 0;
}
.dm-toolbar-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.625rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.dm-toolbar-tab .material-symbols-outlined { font-size: 1rem; }
.dm-toolbar-tab-label { display: none; }
.dm-toolbar-tab.active {
  background: var(--bg-card);
  color: var(--violet);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.12);
}
@media (min-width: 36rem) {
  .dm-toolbar-tab-label { display: inline; }
  .dm-toolbar-tab { padding: 0.4rem 0.75rem; font-size: 0.75rem; }
}
.dm-toolbar-text .small.is-online-text { color: #752FEE; font-weight: 600; }
.dm-toolbar-text .small.is-hidden-text { color: var(--text-muted); font-style: italic; }

.dm-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dm-logged {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-split {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-sidebar {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(var(--accent-rgb), 0.02);
}
.dm-chat-pane,
.dm-chat-empty-state {
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.dm-chat-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.dm-chat-pane[hidden] { display: none !important; }
.dm-chat-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 0.375rem;
  color: var(--text-muted);
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.06), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(var(--fuchsia-rgb), 0.05), transparent 40%),
    var(--bg);
}
.dm-chat-empty-state .material-symbols-outlined {
  font-size: 2.75rem;
  color: rgba(var(--accent-rgb), 0.35);
  margin-bottom: 0.25rem;
}
.dm-sidebar[hidden],
.dm-chat-pane[hidden],
.dm-chat-empty-state[hidden],
#messages-list-view[hidden],
#messages-chat-view[hidden],
#dm-gossip-digest[hidden] {
  display: none !important;
}

@media (min-width: 48rem) {
  .dm-split,
  #messages-inbox-view.dm-split {
    flex-direction: row;
    align-items: stretch;
  }
  .dm-sidebar {
    width: 17.5rem;
    max-width: 42%;
    flex: 0 0 auto;
    border-right: 1px solid var(--border);
  }
  .dm-chat-empty-state:not([hidden]) { display: flex; }
  .dm-app.is-mobile-chat .dm-sidebar { display: flex; }
}

.dm-app.is-mobile-chat .dm-sidebar { display: none !important; }
.dm-app.is-mobile-chat .dm-chat-pane:not([hidden]) {
  display: flex !important;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.dm-app.is-mobile-chat #dm-gossip-digest {
  display: none !important;
}

.dm-guest {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.dm-guest-card {
  text-align: center;
  max-width: 18rem;
  padding: 1.5rem;
  border: 1px dashed rgba(var(--accent-rgb), 0.2);
  border-radius: 1rem;
  background: rgba(var(--accent-rgb), 0.03);
}
.dm-guest-icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.dm-guest-card h2 { font-size: 1rem; margin: 0 0 0.375rem; }

.dm-settings {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.dm-settings-card {
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.dm-settings-accordion {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  overflow: hidden;
}
.dm-settings-accordion + .dm-settings-accordion { margin-top: 0.5rem; }
.dm-settings-accordion-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text, #1e1b2e);
  transition: background 0.15s;
}
.dm-settings-accordion-summary::-webkit-details-marker,
.dm-settings-accordion-summary::marker { display: none; }
.dm-settings-accordion-summary:hover { background: rgba(var(--accent-rgb), 0.04); }
.dm-settings-accordion-icon {
  font-size: 1.125rem;
  color: var(--violet);
  flex-shrink: 0;
}
.dm-settings-accordion-title {
  min-width: 0;
  text-align: left;
  color: inherit;
}
.dm-settings-accordion-chevron {
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.dm-settings-accordion[open] .dm-settings-accordion-chevron { transform: rotate(180deg); }
.dm-settings-accordion-panel {
  padding: 0.125rem 0.875rem 0.75rem;
  border-top: 1px solid var(--border);
  background: rgba(var(--accent-rgb), 0.02);
}
.dm-settings-accordion-panel .toggle-row:first-of-type { margin-top: 0.25rem; }
.dm-settings-accordion-panel .dm-blocked-list { margin-top: 0.25rem; }
.dm-settings-save { margin-top: 0.75rem; margin-bottom: 0.5rem; }
.msg-settings-form { display: flex; flex-direction: column; }

.dm-mod-bot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.dm-mod-bot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.dm-mod-bot-btn:hover { border-color: rgba(var(--accent-rgb), 0.35); transform: translateY(-1px); }

.dm-mod-bot-btn.is-active {
  border-color: var(--violet);
  background: rgba(117, 47, 238, 0.1);
  box-shadow: 0 4px 14px rgba(117, 47, 238, 0.12);
}

.dm-mod-bot-emoji { font-size: 1.25rem; line-height: 1; }
.dm-mod-bot-icon { font-size: 1.125rem; color: var(--violet); }
.dm-mod-hint { margin: 0 0 0.625rem; }

.dm-icon-toggle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.dm-icon-toggle-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

.dm-icon-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.dm-icon-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dm-icon-toggle .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--text-muted);
  pointer-events: none;
}

.dm-icon-toggle:has(input:checked) {
  border-color: var(--violet);
  background: rgba(117, 47, 238, 0.12);
}

.dm-icon-toggle:has(input:checked) .material-symbols-outlined { color: var(--violet); }

.dm-icon-toggle-shield:has(input:checked) {
  border-color: #be123c;
  background: rgba(225, 29, 72, 0.08);
}

.msg-settings-inline-icon {
  font-size: 0.875rem;
  vertical-align: middle;
  margin-right: 0.125rem;
}

@media (max-width: 480px) {
  .connect-tabs.connect-tabs-quad {
    grid-template-columns: repeat(2, 1fr);
  }
  .connect-tabs.connect-tabs-quad .connect-tab {
    font-size: 0.625rem;
  }
  .connect-tabs.discover-tabs {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
  }
  .connect-tabs.discover-tabs .connect-tab {
    font-size: 0.6rem;
    min-width: 3.85rem;
    max-width: 5.25rem;
    padding: 0.35rem 0.3rem;
  }
}

/* Basit eşleşme — kart keşfi (sıkı) */
.buddy-form-simple { position: relative; }
.buddy-discover {
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--violet, #752FEE) 18%, var(--border));
  background: color-mix(in srgb, var(--violet, #752FEE) 4%, var(--bg-card, #fff));
}
.buddy-discover-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}
.buddy-discover-head strong {
  font-size: 0.78rem;
  font-weight: 700;
}
.buddy-discover-head .muted.small {
  font-size: 0.65rem !important;
  line-height: 1.25;
}
.buddy-discover-card {
  min-height: 5.75rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border);
  background: var(--bg-card, #fff);
  padding: 0.5rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  text-align: center;
}
.buddy-discover-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: color-mix(in srgb, var(--violet, #752FEE) 12%, #fff);
  flex-shrink: 0;
}
.buddy-discover-name { font-size: 0.85rem; font-weight: 700; margin: 0; line-height: 1.2; }
.buddy-discover-meta { margin: 0; font-size: 0.65rem; color: var(--text-muted, #64748b); line-height: 1.25; }
.buddy-discover-bio { margin: 0.05rem 0 0; font-size: 0.7rem; line-height: 1.3; color: var(--text, #171717); }
.buddy-discover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.buddy-discover-actions .btn {
  min-height: 1.85rem;
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
  gap: 0.15rem;
}
.buddy-discover-actions .material-symbols-outlined {
  font-size: 0.95rem;
}
.buddy-discover-pass { color: #64748b; }
.buddy-discover-like { gap: 0.2rem; }
.buddy-discover-empty { margin: 0.35rem 0 0; text-align: center; font-size: 0.68rem !important; }
.buddy-discover-or {
  margin: 0 0 0.3rem;
  text-align: center;
  font-size: 0.68rem;
}
.buddy-match-top {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
}
.buddy-match-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.buddy-match-hint {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
}
.buddy-identity-icons {
  display: flex;
  gap: 0.28rem;
}
.buddy-id-icon {
  position: relative;
  cursor: pointer;
}
.buddy-id-icon input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.buddy-id-icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.15rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.buddy-id-icon:has(input:checked) span {
  border-color: var(--violet);
  background: rgba(var(--accent-rgb), 0.12);
  transform: scale(1.04);
}
.buddy-id-icon:hover span { border-color: rgba(var(--accent-rgb), 0.4); }
.buddy-match-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.buddy-settings-btn { position: relative; }
.buddy-settings-btn.is-active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--violet);
  color: var(--violet);
}
.buddy-settings-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--fuchsia);
  border: 2px solid var(--bg-card);
  border-radius: 999px;
}
.buddy-match-hint {
  margin: 0.3rem 0.35rem 0;
  text-align: center;
  font-size: 0.65rem !important;
  line-height: 1.3;
}
.buddy-settings-panel {
  margin-top: 0.75rem;
  padding: 0.875rem;
  background: var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.buddy-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.buddy-settings-head strong { font-size: 0.9375rem; }
.buddy-settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.buddy-settings-close:hover { background: var(--bg); color: var(--text); }
.buddy-settings-note {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}
.buddy-settings-note textarea {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  resize: vertical;
}

.buddy-guest {
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0;
}
.buddy-guest-icon { font-size: 4rem; margin-bottom: 1rem; }
.buddy-demo-hint { margin-top: 1rem; }

.buddy-info-box {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.buddy-info-box .material-symbols-outlined { color: #6366f1; flex-shrink: 0; }

.buddy-form-section {
  margin-bottom: 1.5rem;
}
.buddy-form-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.buddy-gender-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.75rem;
}
.buddy-gender-option {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg-card);
  transition: border-color 0.2s;
}
.buddy-gender-option:has(input:checked) {
  border-color: var(--violet);
  background: rgba(var(--accent-rgb), 0.06);
}
.buddy-gender-option input { margin-right: 0.5rem; }
.buddy-gender-option small { color: var(--text-muted); font-size: 0.75rem; margin-left: 1.5rem; }

.buddy-situation-grid {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 1fr;
  margin-top: 0.75rem;
}
@media (min-width: 600px) {
  .buddy-situation-grid { grid-template-columns: 1fr 1fr; }
}
.buddy-situation-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  cursor: pointer;
  font-size: 0.8125rem;
  background: var(--bg-card);
}
.buddy-situation-option:has(input:checked) {
  border-color: var(--violet);
  background: rgba(var(--accent-rgb), 0.06);
}
.buddy-situation-option .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--violet);
  flex-shrink: 0;
}
.buddy-form textarea {
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
}

.buddy-state-panel {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.buddy-state-icon { font-size: 3rem; margin-bottom: 1rem; }
.buddy-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 16%, var(--bg-card));
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 700;
}
.buddy-live-badge .live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: buddyLivePulse 1.6s ease-out infinite;
}
@keyframes buddyLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  100% { box-shadow: 0 0 0 0.55rem rgba(34, 197, 94, 0); }
}
.buddy-live-pulse {
  animation: buddyLivePulse 1.6s ease-out infinite;
}

.buddy-match-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .buddy-match-layout { grid-template-columns: 16rem 1fr; align-items: start; }
}

/* display:grid [hidden]'ı ezer — Bitir sonrası sohbet açık kalıyordu */
#buddy-form-view[hidden],
#buddy-queue-view[hidden],
#buddy-match-view[hidden],
#buddy-ended-view[hidden],
.buddy-match-layout[hidden],
.buddy-state-panel[hidden] {
  display: none !important;
}

.buddy-match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.buddy-partner-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 0.75rem;
}
.buddy-match-card h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.buddy-match-card strong { display: block; font-size: 1.125rem; margin-bottom: 0.375rem; }
.buddy-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.875rem 0;
  padding: 0.375rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--violet);
}
.buddy-duration-note { margin-bottom: 1rem; }

.buddy-chat-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 22rem;
}
.buddy-chat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--accent-rgb), 0.04);
}
.buddy-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 20rem;
}
.buddy-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 85%;
}
.buddy-msg.is-self {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.buddy-msg-avatar { font-size: 1.25rem; flex-shrink: 0; }
.buddy-msg-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.625rem 0.875rem;
}
.buddy-msg.is-self .buddy-msg-bubble {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
  border-radius: 1rem 1rem 0.25rem 1rem;
}
.buddy-msg-bubble p { font-size: 0.875rem; margin-bottom: 0.25rem; line-height: 1.45; }
.buddy-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}
.buddy-chat-form input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
}

/* Özel Mesajlar — küçük pencere */
.messages-page-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.75rem 0.75rem calc(var(--bottom-nav-h) + 0.75rem);
  min-height: 0;
}

.messages-window {
  width: 100%;
  max-width: 21rem;
  height: min(26rem, calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 1.5rem));
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.14);
  overflow: hidden;
}

.messages-window-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--fuchsia-rgb), 0.06));
  min-height: 2.75rem;
}

.messages-window-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
  cursor: pointer;
  flex-shrink: 0;
}
.messages-window-back .material-symbols-outlined { font-size: 1.125rem; }

.messages-window-title-wrap {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.messages-window-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.messages-window-sub {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.3;
}

.messages-window-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#messages-logged {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#messages-inbox-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}

#messages-settings-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.msg-settings-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 5rem;
  -webkit-overflow-scrolling: touch;
}

.panic-settings-panel-wrap {
  max-height: none;
  padding-bottom: 1rem;
}
#messages-inbox-view[hidden],
#messages-calls-view[hidden],
#messages-settings-view[hidden],
#messages-ai-view[hidden],
#messages-lounge-view[hidden],
#messages-vip-view[hidden] {
  display: none !important;
}

#messages-logged > #messages-ai-view:not([hidden]),
#messages-logged > #messages-inbox-view:not([hidden]),
#messages-logged > #messages-calls-view:not([hidden]),
#messages-logged > #messages-lounge-view:not([hidden]),
#messages-logged > #messages-vip-view:not([hidden]),
#messages-logged > #messages-settings-view:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#messages-list-view {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 48rem) {
  #messages-list-view {
    flex: 0 0 auto;
    width: 17.5rem;
    max-width: 42%;
  }
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--violet);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--fuchsia); }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  cursor: pointer;
}
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row input { accent-color: var(--violet); flex-shrink: 0; }
.toggle-row-compact { padding: 0.375rem 0; }
.toggle-row-shield {
  background: rgba(var(--accent-rgb), 0.05);
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  margin-top: 0.25rem;
}

.msg-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.3rem;
  margin-left: auto;
  background: var(--fuchsia);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}

body.logged-in #messages-guest { display: none !important; }
body:not(.logged-in) #messages-logged { display: none !important; }

.messages-guest {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  gap: 0.5rem;
}
.messages-guest-icon { font-size: 2rem; }
.messages-guest h2 { font-size: 0.9375rem; margin: 0; }

.messages-tabs {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.messages-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.messages-tab .material-symbols-outlined { font-size: 1.125rem; }
.messages-tab.active,
.messages-tab:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--violet);
}

.dm-inbox-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem;
}
.dm-inbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s;
}
.dm-inbox-item:hover { background: rgba(var(--accent-rgb), 0.06); }
.dm-inbox-item.has-unread { background: rgba(var(--accent-rgb), 0.08); }
.dm-inbox-item.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
}
.dm-inbox-avatar { font-size: 1.375rem; flex-shrink: 0; width: 1.75rem; text-align: center; }
.presence-avatar {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.presence-avatar.dm-inbox-presence { width: 1.875rem; }
.presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 2px solid var(--bg-card);
  background: #94a3b8;
}
.presence-avatar.is-online .presence-dot { background: #752FEE; }
.presence-avatar.is-hidden .presence-dot { display: none; }
.dm-online-section {
  flex-shrink: 0;
  padding: 0.375rem 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
  align-self: stretch;
  text-align: left;
}

@media (max-width: 48rem) {
  .dm-online-section {
    order: -1;
    padding: 0.35rem 0.55rem 0.4rem;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 88%, rgba(var(--accent-rgb), 0.06));
  }

  .dm-online-label {
    margin: 0 0 0.25rem;
    font-size: 0.625rem;
    justify-content: flex-start;
  }

  .dm-online-scroll-hint {
    display: none;
  }

  .dm-online-chip {
    width: 2.75rem;
    padding: 0.15rem;
    gap: 0.15rem;
  }

  .dm-online-chip-avatar {
    font-size: 1.25rem;
  }

  .dm-online-chip-name {
    font-size: 0.5625rem;
  }

  .dm-sidebar-search {
    order: 0;
  }

  .dm-mood-hub {
    order: 1;
  }

  .dm-inbox-list {
    order: 2;
  }
}
.dm-online-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 0.375rem 0.125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dm-online-scroll-hint {
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
.dm-online-strip {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.dm-online-strip-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dm-online-strip-viewport::before,
.dm-online-strip-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.25rem;
  width: 1.5rem;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
}
.dm-online-strip-viewport::before {
  left: 0;
  background: linear-gradient(to right, rgba(var(--accent-rgb), 0.06), transparent);
}
.dm-online-strip-viewport::after {
  right: 0;
  background: linear-gradient(to left, rgba(var(--accent-rgb), 0.06), transparent);
}
.dm-online-strip-viewport.can-scroll-left::before { opacity: 1; }
.dm-online-strip-viewport.can-scroll-right::after { opacity: 1; }
.dm-online-scroll-btn {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.dm-online-scroll-btn[hidden] { display: none !important; }
.dm-online-scroll-btn .material-symbols-outlined { font-size: 1rem; }
.dm-online-scroll-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
}
.dm-online-list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0.125rem 0.25rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: grab;
}
.dm-online-list:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.35);
  outline-offset: 2px;
  border-radius: 0.5rem;
}
.dm-online-list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.dm-online-list.is-dragging .dm-online-chip {
  pointer-events: none;
}
.dm-online-list::-webkit-scrollbar { display: none; }
.dm-online-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 3.25rem;
  padding: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  scroll-snap-align: start;
  touch-action: manipulation;
}
.dm-online-chip-avatar { font-size: 1.5rem; line-height: 1; }
.dm-online-chip-name {
  font-size: 0.625rem;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-presence-inline { font-weight: 600; }
.dm-presence-inline.is-online { color: #752FEE; }
.dm-presence-inline.is-last-seen {
  color: var(--dm-muted, #6b6580);
  font-weight: 500;
}
.dm-presence-inline.is-hidden-text {
  color: var(--dm-muted, #6b6580);
  font-weight: 500;
  font-style: italic;
}

#dm-chat-peer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}
#dm-chat-peer-status.is-online-text {
  color: #16a34a;
  font-weight: 600;
}
#dm-chat-peer-status.is-hidden-text {
  font-style: italic;
  opacity: 0.85;
}
#dm-chat-peer-status.is-online-text { color: #752FEE; font-weight: 600; }
#dm-chat-peer-status.is-hidden-text { color: var(--text-muted); font-style: italic; }
.profile-presence-line {
  font-size: 0.8125rem;
  margin: 0.125rem 0 0.25rem;
  color: var(--text-muted);
}
.profile-presence-line.is-online-text { color: #752FEE; font-weight: 600; }
.profile-online-badge.is-offline {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}
.msg-settings-hint { margin: 0.25rem 0 0.5rem; line-height: 1.4; }
.dm-inbox-body { flex: 1; min-width: 0; }
.dm-inbox-top { display: flex; justify-content: space-between; gap: 0.375rem; margin-bottom: 0.125rem; }
.dm-inbox-top strong { font-size: 0.8125rem; }
.dm-inbox-preview { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.dm-unread-dot {
  flex-shrink: 0;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  background: var(--violet);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-inbox-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  text-align: center;
}
.dm-inbox-empty .material-symbols-outlined { font-size: 1.75rem; opacity: 0.45; margin-bottom: 0.375rem; }
.dm-inbox-empty p { font-size: 0.8125rem; margin: 0; }
.dm-inbox-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 0.375rem 0.625rem 0.5rem;
  text-align: center;
  font-size: 0.625rem;
  border-top: 1px solid var(--border);
}

.dm-chat-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dm-chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.dm-chat-peer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  padding: 0;
  min-width: 0;
  flex: 1;
}
.dm-chat-peer-avatar { font-size: 1.625rem; flex-shrink: 0; }
.dm-chat-peer-meta { min-width: 0; }
.dm-chat-peer strong { display: block; font-size: 0.875rem; line-height: 1.2; }
.dm-chat-peer .small { font-size: 0.6875rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.dm-chat-call-actions { display: flex; gap: 0.2rem; flex-shrink: 0; }

.icon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
.icon-action-btn .material-symbols-outlined { font-size: 0.9375rem; }
.icon-action-btn:hover { background: transparent; color: var(--violet); }
.icon-action-danger:hover { background: transparent; color: #dc2626; }

.dm-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.875rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.03) 0%, transparent 12%),
    #f4f2f7;
}
body:has(#theme-toggle:checked) .dm-chat-messages,
body.site-ui-force-dark .dm-chat-messages {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.07) 0%, transparent 12%),
    #121214;
}
body:has(#theme-toggle:checked) .dm-msg-bubble,
body.site-ui-force-dark .dm-msg-bubble {
  background: #27272a;
  color: #fafafa;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
body:has(#theme-toggle:checked) .dm-msg.is-peer .dm-msg-bubble::before,
body.site-ui-force-dark .dm-msg.is-peer .dm-msg-bubble::before {
  border-color: transparent #27272a transparent transparent;
}
body:has(#theme-toggle:checked) .dm-msg.is-self .dm-msg-bubble,
body.site-ui-force-dark .dm-msg.is-self .dm-msg-bubble {
  background: #3a322c;
  color: #fafafa;
}
body:has(#theme-toggle:checked) .dm-msg.is-self .dm-msg-bubble::before,
body.site-ui-force-dark .dm-msg.is-self .dm-msg-bubble::before {
  border-color: transparent transparent transparent #3a322c;
}
body:has(#theme-toggle:checked) .dm-msg.is-call .dm-msg-bubble,
body.site-ui-force-dark .dm-msg.is-call .dm-msg-bubble {
  background: #1e293b;
}
.dm-chat-messages::before {
  content: "";
  flex: 1 1 auto;
  min-height: 0;
}
.dm-chat-empty { text-align: center; padding: 2rem 1rem; font-size: 0.8125rem; }
.dm-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
.dm-msg.is-self {
  flex-direction: row-reverse;
}
.dm-msg-avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
  background: #e8e4ef;
  font-size: 0.85rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(30, 27, 46, 0.08);
}
.dm-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-msg-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #ffffff;
  color: #1e1b2e;
  border: none;
  border-radius: 0.95rem;
  padding: 0.4rem 0.65rem 0.32rem;
  box-shadow: 0 4px 14px rgba(30, 27, 46, 0.1);
}
.dm-msg.is-peer .dm-msg-bubble::before,
.dm-msg.is-self .dm-msg-bubble::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  width: 0;
  height: 0;
  border-style: solid;
  filter: drop-shadow(0 2px 3px rgba(30, 27, 46, 0.06));
  z-index: 1;
}
.dm-msg.is-peer .dm-msg-bubble::before {
  left: -0.55rem;
  border-width: 0.45rem 0.65rem 0.45rem 0;
  border-color: transparent #fff transparent transparent;
}
.dm-msg.is-self .dm-msg-bubble {
  background: #752FEE;
  color: #FFFFFF;
}
.dm-msg.is-self .dm-msg-bubble::before {
  right: -0.55rem;
  left: auto;
  border-width: 0.45rem 0 0.45rem 0.65rem;
  border-color: transparent transparent transparent #752FEE;
}
.dm-msg.is-call .dm-msg-bubble { background: #F8F5FC; color: #1A1A1A; }
.dm-msg-bubble p { font-size: 0.8rem; margin-bottom: 0.05rem; line-height: 1.32; }
.dm-msg-bubble .small { font-size: 0.6rem; }

/* @kullanıcıadı mention */
button.kz-mention {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #0d9488;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button.kz-mention:hover,
button.kz-mention:focus-visible {
  text-decoration: underline;
  outline: none;
}
.dm-msg.is-self button.kz-mention { color: #5eead4; }
.kz-mention-popover {
  position: fixed;
  z-index: 12000;
  max-height: 220px;
  overflow: auto;
  padding: 0.35rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.kz-mention-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.kz-mention-item:hover,
.kz-mention-item:focus-visible {
  background: rgba(13, 148, 136, 0.1);
  outline: none;
}
.kz-mention-empty {
  margin: 0.35rem 0.5rem;
}
body:has(#theme-toggle:checked) .kz-mention-popover,
body.site-ui-force-dark .kz-mention-popover {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
}
body:has(#theme-toggle:checked) button.kz-mention,
body.site-ui-force-dark button.kz-mention {
  color: #5eead4;
}
.dm-msg-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  margin-top: 0.06rem;
}
.dm-receipt {
  display: inline-flex;
  width: 0.9rem;
  height: 0.9rem;
  color: #CE8FF2;
}
.dm-msg.is-self .dm-receipt.is-sent { color: #CE8FF2; }
.dm-msg.is-self .dm-receipt.is-read { color: #db2777; }
.dm-receipt-svg { width: 100%; height: 100%; display: block; }
.dm-call-tag { margin-right: 0.125rem; }

.dm-chat-blocked-notice {
  flex-shrink: 0;
  padding: 0.375rem 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  border-top: 1px solid rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  font-size: 0.6875rem;
  text-align: center;
}
.dm-chat-form {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.dm-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8125rem;
}
.dm-chat-form .btn {
  padding: 0.4375rem 0.5rem;
  border-radius: 999px;
  min-width: auto;
  flex-shrink: 0;
}
.dm-chat-form .btn .material-symbols-outlined { font-size: 1rem; }

.messages-settings {
  overflow-y: auto;
  padding: 0.5rem 0.625rem 0.625rem;
}
.msg-settings-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
}
.msg-settings-form { margin-bottom: 0.5rem; }
.msg-settings-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0;
}
.btn-full { width: 100%; margin-top: 0.375rem; }
.dm-blocked-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dm-blocked-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.75rem;
}
.dm-blocked-item .btn-sm { padding: 0.2rem 0.45rem; font-size: 0.6875rem; }

/* Ses / Görüntülü arama — WhatsApp tarzı tam ekran gelen arama */
.dm-call-box {
  text-align: center;
  max-width: 16rem;
  padding: 1rem 1.25rem 1.25rem;
}
.modal-dm-call-expand.is-open {
  display: flex !important;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  z-index: 10050;
  background: #0b1220;
}
.modal-dm-call-expand.is-open .modal-backdrop {
  background: transparent;
}
.modal-dm-call-expand.is-open .dm-call-box {
  max-width: none;
  width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  position: relative;
  padding:
    calc(2.5rem + env(safe-area-inset-top, 0px))
    1.5rem
    calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(117, 47, 238, 0.35), transparent 60%),
    linear-gradient(165deg, #1a1035 0%, #0b1220 45%, #0f172a 100%);
  color: #f8fafc;
}
.modal-dm-call-expand.is-open .dm-call-box h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0 0.25rem;
  color: #fff;
}
.modal-dm-call-expand.is-open .dm-call-box .muted,
.modal-dm-call-expand.is-open #dm-call-status {
  color: rgba(248, 250, 252, 0.78);
  font-size: 1rem;
}
.modal-dm-call-expand.is-open .dm-call-visual {
  width: 8.5rem;
  height: 8.5rem;
  margin: 2rem auto 1rem;
}
.modal-dm-call-expand.is-open .dm-call-avatar {
  width: 6.5rem;
  height: 6.5rem;
  font-size: 3rem;
}
.modal-dm-call-expand.is-open .dm-call-pulse {
  background: rgba(236, 72, 153, 0.28);
}
.modal-dm-call-expand.is-incoming-call .dm-call-incoming-actions:not([hidden]) {
  display: flex !important;
  width: 100%;
  max-width: 22rem;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 2rem;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.modal-dm-call-expand.is-incoming-call .dm-call-incoming-actions .btn {
  min-width: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.modal-dm-call-expand.is-incoming-call .dm-call-incoming-actions .btn .material-symbols-outlined {
  font-size: 1.75rem;
}
.modal-dm-call-expand.is-incoming-call .dm-call-reject-btn {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}
.modal-dm-call-expand.is-video-call .dm-call-box,
.modal-dm-call-expand.is-open.is-video-call .dm-call-box {
  max-width: none;
  width: 100%;
}
.dm-call-visual {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-call-avatar {
  font-size: 2rem;
  position: relative;
  z-index: 1;
  line-height: 1;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
}
.dm-call-avatar .dm-chat-peer-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}
.dm-call-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.15);
  animation: dm-pulse 1.5s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
.dm-call-visual.is-connected .dm-call-pulse { animation: none; background: rgba(34, 197, 94, 0.15); }
@keyframes dm-pulse {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
.dm-call-box h2 { font-size: 1rem; margin-bottom: 0.25rem; }
.dm-call-box .muted { font-size: 0.8125rem; }
.dm-call-timer { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0.375rem 0; }
.dm-call-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 16rem;
  margin-bottom: 0.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
  background: #0a0a12;
}
.dm-call-video-frame.is-live {
  max-height: min(58vh, 28rem);
  aspect-ratio: 3 / 4;
  background: #050508;
}
.dm-call-video-frame.is-conference {
  aspect-ratio: 1 / 1;
  max-height: min(56vh, 24rem);
}
.dm-call-conf-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: #0f0e1a;
}
.dm-call-conf-tile {
  position: relative;
  min-height: 0;
  background: #1a1830;
  overflow: hidden;
}
.dm-call-conf-video,
.dm-call-conf-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-call-conf-name {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}
.dm-call-invite-panel {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}
.dm-call-invite-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 10rem;
  overflow: auto;
  margin: 0.5rem 0;
}
.dm-call-invite-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.dm-call-invite-item:hover {
  background: rgba(255, 255, 255, 0.12);
}
.dm-call-video-peer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  background: #0f0e1a;
}
.dm-call-wait-hint {
  position: relative;
  z-index: 2;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 500;
  pointer-events: none;
}
.dm-call-video-peer video,
.dm-call-video-peer-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 1;
  transform: none;
  pointer-events: none;
}
/* Boş peer video / tarayıcı play overlay gizle */
.dm-call-video-peer:not(.has-remote) video,
.dm-call-video-peer:not(.has-remote) .dm-call-video-peer-el {
  opacity: 0;
  visibility: hidden;
}
.dm-call-video-peer.has-remote .dm-call-wait-hint {
  display: none;
}
.dm-call-video-peer video::-webkit-media-controls,
.dm-call-video-peer video::-webkit-media-controls-enclosure,
.dm-call-video-peer video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.dm-call-video-frame.is-local-preview .dm-call-video-peer video,
.dm-call-video-frame.is-local-preview .dm-call-video-peer-el {
  transform: scaleX(-1);
}
.dm-call-video-avatar { font-size: 2.5rem; }
.dm-call-video-self {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 5.75rem;
  height: 7.6rem;
  border-radius: 0.85rem;
  background: #0b0b12;
  border: 2px solid rgba(255, 255, 255, 0.88);
  display: block;
  color: #fff;
  overflow: hidden;
  z-index: 4;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}
.dm-call-video-self .dm-call-video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.35);
  background: #12121a;
  z-index: 0;
  pointer-events: none;
}
.dm-call-video-self:has(video) .dm-call-video-placeholder,
.dm-call-video-self.has-video .dm-call-video-placeholder {
  display: none !important;
}
.dm-call-video-self video,
.dm-call-video-self-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #0b0b12;
  z-index: 1;
  display: block;
}
.dm-call-video-self .dm-call-fx-overlay,
.dm-call-video-self #dm-call-fx-overlay {
  z-index: 2;
}
.dm-call-video-self video.is-mirror,
.dm-call-video-self-el.is-mirror,
video.is-mirror {
  transform: scaleX(-1);
}
.dm-call-visual.is-video { display: none; }
.dm-call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 4.5vw, 1.35rem);
  margin-top: auto;
  width: 100%;
  max-width: 22rem;
  padding: 0.35rem 0.5rem 0.15rem;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}
.dm-call-controls[hidden],
.dm-call-incoming-actions[hidden] {
  display: none !important;
}
.dm-call-ctrl-btn[hidden],
.dm-call-more-item[hidden],
.dm-call-end-btn[hidden] {
  display: none !important;
}
.dm-call-incoming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
  position: relative;
  z-index: 5;
}
.dm-call-incoming-actions .btn {
  min-width: 8rem;
  pointer-events: auto;
  cursor: pointer;
}
.dm-call-answer-btn {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.dm-call-pip-accept {
  background: #16a34a !important;
}
.dm-call-pip-reject {
  background: #ef4444 !important;
}
.dm-call-pip-btn[hidden] {
  display: none !important;
}
.dm-call-pip[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.modal-dm-call-expand:not(.is-open) {
  display: none !important;
  pointer-events: none !important;
}
.dm-call-ctrl-btn {
  width: 3.35rem;
  height: 3.35rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dm-call-ctrl-btn.is-active {
  background: rgba(220, 38, 38, 0.35);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.55);
}
.dm-call-ctrl-btn.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}
.dm-call-ctrl-btn.is-on {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(74, 222, 128, 0.5);
  color: #bbf7d0;
}
.dm-call-ctrl-btn .material-symbols-outlined { font-size: 1.45rem; }
.dm-call-more-btn.is-open {
  background: rgba(255, 255, 255, 0.22);
}
.dm-call-minimize-btn {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  left: 0.75rem;
  z-index: 6;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.dm-call-minimize-btn .material-symbols-outlined { font-size: 1.5rem; }
.dm-call-side-tools {
  position: absolute;
  left: calc(0.65rem + env(safe-area-inset-left, 0px));
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.dm-call-side-tools[hidden] { display: none !important; }
.dm-call-side-tools .dm-call-ctrl-btn {
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.modal-dm-call-expand.is-incoming-call .dm-call-minimize-btn,
.modal-dm-call-expand.is-incoming-call .dm-call-minimize-ctrl,
.modal-dm-call-expand.is-incoming-call .dm-call-more-btn {
  display: none;
}
.modal-dm-call-expand.is-open .dm-call-controls .dm-call-ctrl-btn,
.modal-dm-call-expand.is-open .dm-call-end-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.modal-dm-call-expand.is-open .dm-call-controls .dm-call-ctrl-btn.is-active {
  background: rgba(220, 38, 38, 0.35);
  color: #fecaca;
}
.modal-dm-call-expand.is-open .dm-call-controls .dm-call-ctrl-btn.is-on {
  background: rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
}
.dm-call-filters-slot[hidden],
.dm-call-filters { display: none !important; }
.dm-call-actions { margin-top: 1rem; }
.dm-call-end-btn {
  width: 3.65rem;
  height: 3.65rem;
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: #ef4444 !important;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}
.dm-call-end-btn .material-symbols-outlined { font-size: 1.55rem; }

/* Açılır araç paneli (sesli / görüntülü ikincil) */
.dm-call-more-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}
.dm-call-more-sheet[hidden] {
  display: none !important;
}
.dm-call-more-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(2, 6, 23, 0.45);
  cursor: pointer;
}
.dm-call-more-panel {
  position: relative;
  z-index: 1;
  width: min(22rem, calc(100% - 1.5rem));
  margin: 0 0 calc(5.5rem + env(safe-area-inset-bottom, 0px));
  padding: 1rem 1rem 1.15rem;
  border-radius: 1.15rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: #fff;
  text-align: left;
}
.dm-call-more-title {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.62);
}
.dm-call-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.dm-call-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 4.35rem;
  padding: 0.7rem 0.5rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dm-call-more-item .material-symbols-outlined {
  font-size: 1.45rem;
}
.dm-call-more-item.is-active {
  background: rgba(117, 47, 238, 0.28);
  border-color: rgba(167, 139, 250, 0.55);
}
.dm-call-more-item:active {
  transform: scale(0.97);
}
.dm-call-more-item[hidden] {
  display: none !important;
}
.modal-dm-call-expand.is-video-call .dm-call-controls {
  z-index: 30;
}
.modal-dm-call-expand.is-video-call .dm-call-fx-sheet {
  z-index: 45;
}

/* Görüntülü arama — tam ekran peer + PiP + alt kontroller (mockup) */
.dm-call-ctrl-label {
  display: none;
}
.dm-call-meta-block {
  position: relative;
  z-index: 8;
  width: 100%;
  text-align: center;
}
.dm-call-e2e {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  white-space: nowrap;
}
.dm-call-e2e .material-symbols-outlined {
  font-size: 0.85rem;
  font-variation-settings: "FILL" 1;
}
.modal-dm-call-expand.is-open.is-video-call .dm-call-box {
  background: #050508;
  padding:
    calc(0.5rem + env(safe-area-inset-top, 0px))
    0.85rem
    calc(1.15rem + env(safe-area-inset-bottom, 0px));
  justify-content: flex-end;
  overflow: hidden;
}
.modal-dm-call-expand.is-open.is-video-call .dm-call-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(42%, 18rem);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}
.modal-dm-call-expand.is-video-call .dm-call-e2e:not([hidden]) {
  display: inline-flex !important;
}
.modal-dm-call-expand.is-video-call .dm-call-minimize-btn {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
  top: calc(0.55rem + env(safe-area-inset-top, 0px));
  left: 0.35rem;
  z-index: 14;
}
.modal-dm-call-expand.is-video-call .dm-call-video-frame,
.modal-dm-call-expand.is-video-call .dm-call-video-frame.is-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  z-index: 0;
  overflow: hidden;
}
.modal-dm-call-expand.is-video-call .dm-call-video-self {
  top: calc(3.25rem + env(safe-area-inset-top, 0px));
  right: 0.75rem;
  bottom: auto;
  width: 6.35rem;
  height: 8.5rem;
  border-radius: 0.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  z-index: 10;
}
.modal-dm-call-expand.is-video-call .dm-call-visual {
  display: none !important;
}
.modal-dm-call-expand.is-video-call .dm-call-meta-block {
  margin-top: auto;
  margin-bottom: 0.85rem;
  padding: 0 0.5rem;
  z-index: 8;
}
.modal-dm-call-expand.is-video-call .dm-call-meta-block h2,
.modal-dm-call-expand.is-video-call #dm-call-title {
  font-size: clamp(1.45rem, 5.5vw, 1.85rem);
  font-weight: 700;
  margin: 0 0 0.2rem;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.modal-dm-call-expand.is-video-call #dm-call-status {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.modal-dm-call-expand.is-video-call.is-call-connected #dm-call-status {
  display: none !important;
}
.modal-dm-call-expand.is-video-call .dm-call-timer {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.15rem 0 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.modal-dm-call-expand.is-video-call .dm-call-controls {
  max-width: 17.5rem;
  width: 100%;
  gap: 0.35rem;
  margin-top: 0;
  padding: 0 0.35rem 0.2rem;
  align-items: flex-end;
  justify-content: center;
  z-index: 8;
}
.modal-dm-call-expand.is-video-call .dm-call-ctrl-btn,
.modal-dm-call-expand.is-video-call .dm-call-end-btn {
  width: auto !important;
  height: auto !important;
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0;
  border: none !important;
  background: transparent !important;
  color: #fff;
  box-shadow: none !important;
  border-radius: 0;
}
.modal-dm-call-expand.is-video-call .dm-call-ctrl-btn.is-busy,
.modal-dm-call-expand.is-video-call .dm-call-end-btn.is-busy {
  opacity: 0.65;
  pointer-events: none;
}
.modal-dm-call-expand.is-video-call .dm-call-ctrl-btn .material-symbols-outlined,
.modal-dm-call-expand.is-video-call .dm-call-end-btn .material-symbols-outlined {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: #5c3478;
  color: #fff;
  box-shadow: none;
}
.modal-dm-call-expand.is-video-call .dm-call-end-btn .material-symbols-outlined {
  width: 2.85rem;
  height: 2.85rem;
  font-size: 1.3rem;
  background: #e53935;
}
.modal-dm-call-expand.is-video-call .dm-call-ctrl-btn.is-active .material-symbols-outlined {
  background: #efe6f5;
  color: #5c3478;
}
.modal-dm-call-expand.is-video-call .dm-call-ctrl-btn.is-on .material-symbols-outlined {
  background: #5c3478;
  color: #fff;
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 1px;
}
.modal-dm-call-expand.is-video-call .dm-call-ctrl-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.92);
  max-width: 3.8rem;
  text-align: center;
}
.modal-dm-call-expand.is-video-call .dm-call-more-btn {
  display: none !important;
}

@media (min-width: 40rem) {
  #connect-panel-messages .dm-app {
    height: clamp(32rem, calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 8rem), 46rem);
    max-height: calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 5rem);
  }
}

/* Kız Kardeşlik Sözleşmesi */
.modal-pact.pact-required .modal-backdrop { pointer-events: none; }
.pact-modal-box { max-width: 26rem; position: relative; }
.pact-modal-hero {
  text-align: center;
  margin-bottom: 1.25rem;
  padding-top: 0.5rem;
}
.pact-hero-icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.pact-intro { font-size: 0.9375rem; line-height: 1.55; margin-bottom: 1.25rem; }
.pact-principles {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pact-principle {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: var(--radius);
  padding: 1rem;
}
.pact-principle-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; }
.pact-principle strong { display: block; font-size: 0.9375rem; margin-bottom: 0.25rem; color: var(--violet); }
.pact-principle p { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
.pact-closing { font-size: 0.875rem; line-height: 1.55; font-style: italic; color: var(--text-muted); }
.pact-checkbox span { font-size: 0.8125rem; line-height: 1.45; }
.pact-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Akış Koruyucuları */
.flow-guardians-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.flow-guardians-intro { margin-bottom: 1rem; }
.flow-guardians-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .flow-guardians-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .flow-guardians-grid { grid-template-columns: repeat(3, 1fr); }
}
.flow-guardian-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.flow-guardian-card.is-founder {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(236,72,153,0.04));
}
.flow-guardian-inner {
  display: flex;
  gap: 0.875rem;
  padding: 1.125rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: default;
}
button.flow-guardian-inner { cursor: pointer; }
button.flow-guardian-inner:hover { background: rgba(var(--accent-rgb), 0.04); }
.flow-guardian-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.flow-guardian-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--violet);
  margin-bottom: 0.25rem;
}
.flow-guardian-info strong { display: block; font-size: 0.9375rem; }
.flow-guardian-role { font-size: 0.75rem; color: var(--text-muted); display: block; margin-bottom: 0.375rem; }
.flow-guardian-info p { font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); margin: 0; }

/* Görevler & Ödüller */
.rewards-guest {
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0;
}
.rewards-guest-icon { font-size: 4rem; margin-bottom: 1rem; }

.rewards-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.rewards-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}
.rewards-stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--violet);
  margin-bottom: 0.25rem;
}
.rewards-stat span { font-size: 0.75rem; color: var(--text-muted); }

.rewards-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.task-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow);
}
.task-card.is-complete { border-color: rgba(34, 197, 94, 0.4); }
.task-card.is-claimed { opacity: 0.85; }

.task-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--violet);
}
.task-card.is-claimed .task-card-icon { background: rgba(34, 197, 94, 0.12); color: #22c55e; }

.task-card-body { flex: 1; min-width: 0; }
.task-card-body h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.task-card-body p { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.625rem; }

.task-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.task-progress-bar {
  flex: 1;
  height: 0.375rem;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.task-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), #ec4899);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.task-progress-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

.task-reward-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--violet);
  margin-top: 0.375rem;
}

.task-card-actions { flex-shrink: 0; align-self: center; }

.rewards-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.reward-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.reward-card.is-unlocked {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.12);
}
.reward-card.is-locked { opacity: 0.55; filter: grayscale(0.4); }

.reward-lock {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  font-size: 0.875rem;
}

.reward-tag {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
}

.reward-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
.reward-card h3 { font-size: 0.9375rem; margin-bottom: 0.375rem; }
.reward-card p { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.reward-unlocked-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #22c55e;
}

.rewards-hint { margin-bottom: 1rem; }

.rewards-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-h) + 1.25rem);
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--violet);
  color: var(--text);
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.2);
  z-index: 10100;
  font-size: 0.875rem;
  max-width: calc(100vw - 2rem);
  text-align: center;
}

.profile-badge-chip.unlocked {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--violet);
}

.feature-card h3 { font-size: 1rem; font-weight: 600; }
.feature-card p { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; }
.feature-link { display: inline-block; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--violet); }
.card-teal .feature-link { color: #0d9488; }

.expert-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}

.expert-card:hover { transform: translateY(-1px); }
.expert-card p { font-size: 0.875rem; color: var(--text-muted); }
.chevron { color: var(--text-muted); margin-left: auto; }

.avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
}

.avatar.large { width: 3rem; height: 3rem; font-size: 1.25rem; }

/* Chat */
.chat-panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .chat-panel { position: sticky; top: calc(var(--nav-h) + 1rem); }
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
  animation: pulse 2s infinite;
}

@keyframes pulse { 50% { opacity: 0.5; } }

.chat-messages {
  max-height: min(420px, 50dvh);
  overflow-y: auto;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
}

.chat-msg {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.chat-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--violet);
}

.chat-msg p { font-size: 0.875rem; margin: 0.125rem 0; }

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.375rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 0.75rem;
  transition: color 0.2s, background 0.2s;
  min-width: 0;
}

.nav-item .material-symbols-outlined { font-size: 1.375rem; }
.nav-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.nav-item:hover, .nav-item:focus-visible { background: rgba(var(--accent-rgb), 0.06); }
.nav-home:hover { color: var(--violet); }
.nav-guide:hover { color: #14b8a6; }
.nav-voice:hover { color: var(--violet); }
.nav-podcast:hover { color: #3b82f6; }
.nav-profile:hover { color: var(--fuchsia); }
.nav-connect:hover { color: var(--violet); }

@media (min-width: 768px) {
  .bottom-nav { max-width: 32rem; left: 50%; transform: translateX(-50%); border-radius: 1.25rem 1.25rem 0 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* Modals — site-header (1200) ve search/notif üstünde */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 640px) {
  .modal { align-items: center; padding: 1rem; }
}

.modal.is-open { display: flex; }

#modal-daily-poll,
.modal-daily-poll {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.modal-open,
body.video-fs-open,
body.story-viewer-open,
body.dm-media-lightbox-open {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 48rem), (max-device-width: 48rem) {
  html.modal-open,
  html.video-fs-open,
  html.story-viewer-open {
    overflow: hidden;
  }
  body.modal-open,
  body.video-fs-open,
  body.story-viewer-open,
  body.dm-media-lightbox-open {
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    max-width: 100%;
    top: var(--scroll-lock-top, 0px);
    left: 0;
    right: 0;
  }
  .connect-panel {
    animation: none !important;
  }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}

.modal-box {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp 0.3s ease;
}

@media (min-width: 640px) {
  .modal-box {
    max-width: 28rem;
    border-radius: 1.25rem;
    max-height: 88dvh;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    animation: modalIn 0.25s ease;
  }
  .modal-scroll-box { max-width: 32rem; }
  .video-modal-box { max-width: 24rem; padding: 0; }
  .profile-modal-box { max-width: 24rem; padding: 0; }
}

@media (max-width: 639px) {
  .modal-box { border-radius: 1.25rem 1.25rem 0 0; }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--border);
  z-index: 5;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.modal-close:hover { background: rgba(var(--accent-rgb), 0.15); color: var(--violet); }

.modal-head { text-align: center; padding: 1.5rem 1.5rem 0; }
.modal-head h2 { font-size: clamp(1.25rem, 4vw, 1.5rem); }
.modal-head p { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem; }

.modal-login-box { padding: 0 1.25rem 1.5rem; }

@media (min-width: 640px) { .modal-login-box { padding: 0 1.5rem 1.5rem; } }

.modal-header-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.modal-header-row > div { width: 100%; }

.modal-header-row h2 { font-size: 1.125rem; padding-right: 0; }

.modal-header-row .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  flex-shrink: 0;
}

/* Forms */
.login-form { margin-top: 0.75rem; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  padding: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.auth-tab {
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.auth-tab.active {
  background: var(--bg-card);
  color: var(--violet);
  box-shadow: 0 1px 4px rgba(var(--accent-rgb), 0.12);
}
.auth-tab:hover:not(.active) { color: var(--text); }

.auth-security-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.auth-security-note .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--violet);
  flex-shrink: 0;
}
.auth-password-hint { margin: 0.25rem 0 0.75rem; }
.auth-switch-hint { text-align: center; margin-top: 0.75rem; }
.auth-switch-hint .link-btn { font-size: inherit; }

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 380px) {
  .role-grid { grid-template-columns: 1fr; }
  .role-card { display: flex; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; padding: 0.625rem 0.875rem; }
  .role-card .role-emoji { font-size: 1.25rem; }
}

.role-card {
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.625rem 0.375rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.role-card input { display: none; }
.role-card:has(input:checked) { border-color: var(--violet); background: rgba(var(--accent-rgb), 0.08); }
.role-emoji { font-size: 1.375rem; display: block; }
.role-card strong { display: block; font-size: 0.6875rem; margin-top: 0.25rem; }
.role-card small { font-size: 0.5625rem; color: var(--text-muted); }

.login-google-wrap {
  margin-bottom: 0.15rem;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 3rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 1rem;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  color: #3c4043;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c9ce;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.12);
}

.btn-google:active {
  transform: scale(0.985);
  background: #f1f3f4;
}

.btn-google:focus-visible {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

body:has(#theme-toggle:checked) .btn-google {
  background: #303134;
  border-color: #5f6368;
  color: #e8eaed;
  box-shadow: none;
}

body:has(#theme-toggle:checked) .btn-google:hover {
  background: #3c4043;
  border-color: #8ab4f8;
}

.btn-google-logo {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.btn-google[hidden],
.google-signin-slot[hidden] {
  display: none !important;
}

#login-google-wrap[hidden],
#login-form[hidden],
#register-form[hidden] {
  display: none !important;
}

.google-config-hint {
  text-align: center;
  margin: 0.5rem 0 0;
}

.google-config-hint code {
  font-size: 0.75rem;
  background: var(--bg-soft);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.field-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.password-wrap { position: relative; }

.username-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.username-field-wrap .username-prefix {
  position: absolute;
  left: 0.85rem;
  z-index: 1;
  color: var(--text-muted, #6b6580);
  font-weight: 600;
  pointer-events: none;
}

.username-field-wrap .username-input {
  padding-left: 1.75rem;
  margin-bottom: 0.35rem;
}

.auth-username-hint {
  margin: -0.15rem 0 0.65rem;
}

.password-wrap .field-input { padding-right: 2.75rem; margin-bottom: 0.5rem; }

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.25rem !important;
}

.strength-wrap { margin-bottom: 0.75rem; }
.strength-track { height: 4px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.strength-bar { height: 100%; width: 0; border-radius: 9999px; transition: width 0.4s, background 0.3s; }
.strength-label { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.25rem; display: block; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-row input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--violet); }

.login-form .btn-primary { margin-top: 0.5rem; padding: 0.875rem; font-size: 0.9375rem; }

/* Confessions, polls, comments */
.confession-form { padding: 0 1rem 1rem; border-bottom: 1px solid var(--border); }

.confession-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  resize: none;
}

.confession-form .btn { margin-top: 0.5rem; padding: 0.5rem 1.25rem; }

.confession-list { padding: 1rem; }

.confession-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.confession-card p { font-size: 0.9375rem; }

.confession-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.btn-energy {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.btn-energy:hover { background: rgba(var(--accent-rgb), 0.22); }
.btn-energy:active { transform: scale(0.97); }
.btn-energy.is-sent {
  opacity: 0.85;
  cursor: default;
  background: color-mix(in srgb, #db2777 14%, transparent);
  color: #9d174d;
}

.poll-bars { padding: 1rem; }
.poll-row { margin-bottom: 1rem; }
.poll-vote-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.poll-vote-btn.is-readonly { cursor: default; }
.poll-vote-btn:not(.is-readonly):hover .poll-track { background: color-mix(in srgb, var(--violet) 12%, var(--border)); }
.poll-row.is-voted .poll-label-row span { color: var(--violet); font-weight: 700; }
.poll-guest-hint { padding: 0 1rem 0.5rem; text-align: center; }
.poll-label-row { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.375rem; }
.poll-track { height: 0.625rem; background: var(--border); border-radius: 9999px; overflow: hidden; }
.poll-fill { height: 100%; border-radius: 9999px; transition: width 0.7s ease; }
.bar-violet { background: #752FEE; }
.bar-lilac { background: #CE8FF2; }
.bar-teal { background: #CE8FF2; }
.bar-cyan { background: #996BF1; }
.bar-rose { background: #F472B6; }

.section-subtitle {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 1rem;
  margin-bottom: 0.75rem;
}

.comment-list { padding: 0 1rem 1.25rem; }
.comment-item { display: flex; gap: 0.625rem; margin-bottom: 0.875rem; }
.username { font-size: 0.8125rem; font-weight: 600; color: var(--violet); }
.comment-item p { font-size: 0.875rem; margin: 0.125rem 0; }

/* Video modal */
.video-player {
  aspect-ratio: 9 / 14;
  max-height: 55dvh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn { font-size: 3.5rem !important; color: #fff; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }

.video-close { color: #fff !important; background: rgba(0,0,0,0.4) !important; }

.video-author {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
}

.video-author small { display: block; opacity: 0.8; font-size: 0.75rem; }

.video-info { padding: 1rem; }
.video-info p { font-size: 0.9375rem; }

/* Video oynatıcı — header (1200) üstünde; mobilde gerçek tam ekran */
.modal-video-fs {
  z-index: 1400 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom)) !important;
}

.modal-video-fs .modal-backdrop {
  background: rgba(0, 0, 0, 0.92);
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-video-fs .video-fs-shell {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(100%, 24rem);
  height: min(84dvh, 46rem);
  min-height: min(72dvh, 38rem);
  max-height: min(84dvh, 46rem);
  display: block;
  background: #000;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Mobil: header/nav üstüne binmeden edge-to-edge */
@media (max-width: 900px) {
  .modal-video-fs {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .modal-video-fs .modal-backdrop {
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-video-fs .video-fs-shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    height: 100svh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .modal-video-fs .video-fs-close {
    top: max(0.65rem, env(safe-area-inset-top, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
  }
  .modal-video-fs .video-fs-owner-actions {
    top: max(0.65rem, env(safe-area-inset-top, 0px));
    left: max(0.65rem, env(safe-area-inset-left, 0px));
  }
  .modal-video-fs .video-fs-meta {
    padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  }
  .modal-video-fs .video-fs-swipe-hint {
    bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 5rem));
  }
}

.modal-video-fs .video-fs-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  background: #000;
  overflow: hidden;
  border-radius: 0;
}

.modal-video-fs .video-fs-player,
.modal-video-fs .video-fs-image {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #000;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Video detay açıkken site chrome gizle — üst üste binmesin */
body.video-fs-open .site-header,
body.video-fs-open .bottom-nav {
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-video-fs .video-fs-player[hidden],
.modal-video-fs .video-fs-image[hidden] {
  display: none !important;
}

/* Native oynatma çubuğu (play / süre / fullscreen) gizle — Instagram tarzı */
.modal-video-fs .video-fs-player::-webkit-media-controls,
.modal-video-fs .video-fs-player::-webkit-media-controls-enclosure,
.modal-video-fs .video-fs-player::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.modal-video-fs .feed-media-overlay-fs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.modal-video-fs .feed-media-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.video-fs-owner-actions {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 8;
  display: flex;
  gap: 0.5rem;
}

.video-fs-owner-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-fs-owner-btn-danger {
  background: rgba(220, 38, 38, 0.65);
}

.video-fs-owner-btn .material-symbols-outlined {
  font-size: 1.2rem;
}

.video-fs-swipe-hint {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  text-align: center;
  padding: 0 1rem;
  font-size: 0.7rem;
}

@media (min-width: 48rem) {
  .video-fs-swipe-hint { display: none; }
}

.video-fs-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 8;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.video-fs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.video-fs-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.video-fs-prev { left: 0.4rem; }
.video-fs-next { right: 0.4rem; }

.video-fs-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 3rem 1rem 1.1rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 12%, rgba(0, 0, 0, 0.45) 55%, transparent);
  pointer-events: none;
  box-sizing: border-box;
}

.video-fs-meta > * {
  pointer-events: auto;
}

.video-fs-title {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0 0 0.55rem;
  line-height: 1.35;
  text-align: left;
  max-width: 100%;
  word-break: break-word;
}

.video-fs-author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0 0 0.5rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.video-fs-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.video-fs-author strong {
  display: block;
  font-size: 0.9375rem;
}

.video-fs-author small {
  display: block;
  opacity: 0.75;
  font-size: 0.75rem;
}

.video-fs-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  opacity: 0.9;
  align-items: center;
}

.video-fs-like-btn {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.video-fs-like-btn:hover { background: rgba(255, 255, 255, 0.14); }
.video-fs-like-btn.is-liked {
  background: rgba(244, 63, 94, 0.25);
  color: #fda4af;
}
.video-fs-like-btn.is-liked:active { transform: scale(0.96); }

@media (min-width: 768px) {
  .modal-video-fs .video-fs-shell {
    width: min(100%, 26rem);
    height: min(84dvh, 48rem);
  }
  .video-fs-nav {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.video-stats { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.875rem; align-items: center; }

.like-btn { font-size: 0.875rem; transition: color 0.2s; }
.like-btn.liked { color: #ef4444; }

.video-comments { border-top: 1px solid var(--border); padding: 0.875rem 1rem 1rem; }
.video-comments h3 { font-size: 0.6875rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; letter-spacing: 0.05em; }

/* Profile modal */
.profile-banner { height: 5.5rem; background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--cyan)); }
.profile-close { color: #fff !important; background: rgba(0,0,0,0.25) !important; }

.profile-body {
  padding: 0 1.25rem 1.5rem;
  text-align: center;
  margin-top: -2.5rem;
}

.profile-avatar {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid var(--bg-card);
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.profile-body h2 { margin-top: 0.75rem; font-size: 1.25rem; }
.profile-body .username { color: var(--violet); font-size: 0.875rem; }

.role-badge {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
  font-size: 0.75rem;
  font-weight: 500;
}

.profile-bio { margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.stat { background: var(--bg); border-radius: 0.75rem; padding: 0.75rem 0.5rem; }
.stat strong { display: block; font-size: 1rem; }
.stat span { font-size: 0.625rem; color: var(--text-muted); }
.stat .gold { color: #d97706; }

.profile-body .btn { margin-top: 1.25rem; padding: 0.75rem; }

/* Biometric */
.biometric-overlay {
  position: fixed;
  inset: 0;
  z-index: 21000;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.biometric-overlay[hidden] { display: none !important; }

.biometric-content { text-align: center; color: #fff; padding: 1rem; }

.biometric-ring {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bioPulse 1.5s ease infinite;
  box-shadow: 0 0 48px rgba(var(--accent-rgb), 0.5);
}

.biometric-ring .material-symbols-outlined { font-size: 2.5rem; color: #fff; }

@keyframes bioPulse {
  50% { transform: scale(1.06); }
}

.biometric-bar {
  width: min(12rem, 70vw);
  height: 4px;
  background: #27272a;
  border-radius: 9999px;
  margin: 1.5rem auto 0;
  overflow: hidden;
}

.biometric-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
  border-radius: 9999px;
  animation: bioProgress 2.5s ease-in-out forwards;
}

@keyframes bioProgress { from { width: 0; } to { width: 100%; } }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
body:has(#theme-toggle:checked) ::-webkit-scrollbar-thumb { background: #3f3f46; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* --- App pages & new components --- */
.app-page { display: none; }
.app-page.active { display: block; }

.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}

.announcement-bar[hidden] {
  display: none !important;
  padding: 0;
}

.announcement-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.announcement-bar-close {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.announcement-bar-close .material-symbols-outlined {
  font-size: 1.05rem;
}

.announcement-bar:empty {
  display: none;
  padding: 0;
}

.content-read-banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.85rem;
  padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
  background: linear-gradient(90deg, #0f766e, #752FEE);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  box-sizing: border-box;
}
.content-read-banner[hidden] { display: none !important; }
.content-read-banner-icon { font-size: 1.15rem; flex-shrink: 0; }
.content-read-banner-text {
  margin: 0;
  flex: 1 1 10rem;
  min-width: 0;
  line-height: 1.3;
}
.content-read-banner-go {
  border: 0;
  background: #fff;
  color: #6B25D9;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
}
.content-read-banner-close {
  border: 0;
  background: transparent;
  color: #fff;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
}
.content-read-banner-close .material-symbols-outlined { font-size: 1.1rem; }

.admin-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.625rem 1rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--violet);
}

.admin-banner[hidden] { display: none !important; }

.btn-admin-sm {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: var(--violet);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.user-menu { position: relative; }

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.8125rem;
  font-weight: 500;
  max-width: min(42vw, 9.5rem);
}

.user-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 480px) {
  .user-menu-trigger {
    max-width: min(36vw, 7.25rem);
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
  }
}

.user-avatar { font-size: 1.125rem; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 12rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
  padding: 0.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 1300;
}

.user-menu.open .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.user-dropdown a:hover { background: rgba(var(--accent-rgb), 0.08); }

.main-column .active-bots-panel,
.main-column .active-now-panel { margin-bottom: 1rem; }

.sidebar-stack { display: flex; flex-direction: column; gap: 1rem; }

.active-bots-panel,
.active-now-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.active-now-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  font-size: 0.8125rem;
}

.active-now-strip,
.active-bots-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.1rem 0.35rem;
  max-height: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.active-now-strip::-webkit-scrollbar,
.active-bots-list::-webkit-scrollbar { display: none; }

.active-now-chip {
  flex: 0 0 auto;
  width: 3.6rem;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  color: inherit;
  font: inherit;
}
.active-now-avatar {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 0.28rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border, #e5e5e5) 55%, var(--bg-card, #fff));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #22c55e 50%, transparent);
}
.active-now-chip.is-self .active-now-avatar {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cyan, #0891b2) 55%, transparent);
}
.active-now-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.active-now-emoji { font-size: 1.05rem; line-height: 1; opacity: 0.75; }
.active-now-dot {
  position: absolute;
  right: -0.05rem;
  bottom: -0.05rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--bg, #fff);
  z-index: 1;
}
.active-now-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 3.6rem;
  margin: 0 auto;
  opacity: 0.8;
}
.active-now-empty {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  text-align: center;
}
.active-now-head .live-dot {
  width: 0.4rem;
  height: 0.4rem;
}

.chat-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-header,
.chat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #22c55e;
  animation: livePulse 2s ease infinite;
}

@keyframes livePulse {
  50% { opacity: 0.5; }
}

.bot-count-badge {
  margin-left: 0;
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.active-now-head .bot-count-badge {
  margin-left: 0;
}

.bot-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  transition: background 0.15s;
}

.bot-item:hover { background: rgba(var(--accent-rgb), 0.06); }

.bot-chat-link {
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.bot-chat-link:active { transform: scale(0.99); }

.bot-avatar {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bot-color, var(--violet)) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.bot-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--bg-card);
}

.bot-info { min-width: 0; }
.bot-info strong { display: block; font-size: 0.8125rem; }

.content-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}

.content-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  padding: 0.7rem 0.75rem;
  box-shadow: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.content-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1);
}

.content-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.45rem;
}
.content-icon .material-symbols-outlined { font-size: 1.05rem; }

.content-card h3 { font-size: 0.82rem; margin-bottom: 0.2rem; line-height: 1.3; }
.content-card p { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.4rem; line-height: 1.35; }
.content-card .btn,
.content-card-btn {
  min-height: 1.7rem !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.68rem !important;
}

.shop-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.shop-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.shop-tag {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--violet);
  color: #fff;
}

.shop-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
.shop-card h3 { font-size: 0.9375rem; margin-bottom: 0.375rem; }
.shop-price { color: var(--violet); font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.875rem; }

.podcast-list,
.group-list { display: flex; flex-direction: column; gap: 0.75rem; }

.podcast-card,
.group-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.podcast-cover,
.group-emoji {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.podcast-info { flex: 1; min-width: 0; }
.podcast-info h3,
.group-card h3 { font-size: 0.9375rem; }

.podcast-play {
  font-size: 2rem !important;
  color: var(--violet);
}

.group-card > div { flex: 1; }

.group-card-active {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: left;
}

.group-card-active:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.12);
}

.group-card-body { flex: 1; min-width: 0; text-align: left; }

.group-card-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.375rem 0;
  line-height: 1.45;
}

.group-card-preview {
  font-size: 0.8125rem;
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  margin: 0.5rem 0;
  text-align: left;
}

.group-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.pill-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
}

.group-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.group-joined-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--violet);
}

.group-open-icon {
  color: var(--text-muted);
  font-size: 1.5rem;
}

.community-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.community-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 0.5rem;
  box-shadow: var(--shadow);
}

.community-stat strong {
  display: block;
  font-size: 1.25rem;
  color: var(--violet);
}

.community-stat span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.community-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card, #fff);
  color: var(--violet);
  font-weight: 600;
  font-size: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.community-back-btn .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.community-detail-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
  text-align: left;
}

.community-detail-hero {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  min-width: 0;
}

.community-detail-title {
  min-width: 0;
  flex: 1 1 auto;
}

.community-detail-title h2 {
  margin: 0;
  font-size: 1.25rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-detail-title .muted {
  margin: 0.15rem 0 0;
}

.community-detail-emoji {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.community-detail-hero h2 { font-size: 1.25rem; text-align: left; }

.community-detail-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  text-align: left;
}

.community-topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.community-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.community-group-video-slot {
  margin-top: 0.65rem;
  width: 100%;
}

.community-group-video-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.community-group-video-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(106, 61, 138, 0.1);
}

.community-group-video-card.is-pending {
  background: rgba(106, 61, 138, 0.04);
}

.community-group-video-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.community-group-video-meta strong {
  font-size: 0.85rem;
  color: #1c1224;
}

.community-group-video-empty,
.community-group-video-loading {
  margin: 0.15rem 0 0;
}

#community-create-video-btn .material-symbols-outlined {
  font-size: 1rem;
}

.community-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.community-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.community-tab {
  flex: 1;
  padding: 0.75rem 0.5rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.community-tab.active {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

.community-chat-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: left;
}

.community-hybrid-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.community-hybrid-panel > .community-voice-inline {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

.community-hybrid-panel .community-chat-toolbar {
  flex: 0 0 auto;
  margin-bottom: 0.35rem;
  padding: 0 0.65rem;
}

.community-hybrid-panel .community-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(18rem, 42dvh);
  overflow-y: auto;
}

.community-hybrid-panel .community-chat-form {
  flex: 0 0 auto;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: auto;
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  background: var(--bg, #fafafa);
}

.community-chat-messages {
  max-height: 22rem;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.community-chat-msg {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.community-chat-msg.is-bot {
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 0.75rem;
  padding: 0.5rem;
  margin: 0 -0.5rem;
}

.community-chat-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
  overflow: hidden;
}

.community-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-chat-name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}

.bot-tag {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  margin-left: 0.25rem;
}

.community-chat-msg p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 0.375rem;
}

.community-chat-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.community-like-btn,
.community-like-count {
  border: none;
  background: none;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
}

.community-like-btn:hover { color: #ec4899; }
.community-like-btn.liked { color: #ec4899; font-weight: 600; }

.community-chat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.community-chat-form > input,
.community-chat-form > #community-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--bg-card);
  min-height: 2.35rem;
  box-sizing: border-box;
}

.community-chat-form > .btn,
.community-chat-form > button[type="submit"] {
  flex: 0 0 auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.community-login-hint { padding: 0 0.75rem 0.75rem; text-align: center; }

.community-announce-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.community-announce-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow);
}

.community-announce-card h3 {
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

.community-rules-card ul {
  margin: 0;
  padding-left: 1.125rem;
}

.community-rules-card li {
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.community-members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.community-members-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

.community-member-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow);
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.community-member-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
}

.community-member-avatar {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.08);
  margin-bottom: 0.5rem;
}

.community-member-you {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.04);
}

.community-empty { padding: 1.5rem; text-align: center; }

.btn-sm {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
}

.profile-guest { max-width: 28rem; margin: 0 auto; text-align: center; }

.profile-guest-icon { font-size: 4rem; margin-bottom: 1rem; }
.profile-guest h2 { margin-bottom: 0.5rem; }
.profile-guest p { margin-bottom: 1.25rem; }

/* --- Facebook benzeri profil --- */
.profile-fb {
  max-width: 42rem;
  margin: 0 auto;
  text-align: left;
}

.profile-cover-wrap {
  position: relative;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  z-index: 0;
}

.profile-cover-wrap.is-own-cover {
  cursor: pointer;
}

.profile-cover {
  height: clamp(7.5rem, 24vw, 11rem);
  min-height: 7.5rem;
  background: linear-gradient(135deg, #752FEE, #ec4899, #06b6d4);
  background-size: cover;
  background-position: center;
}

.profile-cover-edit {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  left: auto;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
  max-width: calc(100% - 1.25rem);
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  background: rgba(15, 15, 20, 0.72);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.profile-cover-edit .material-symbols-outlined {
  font-size: 1.1rem;
  color: #fff;
}

.profile-cover-edit-label {
  white-space: nowrap;
  font-size: 0.75rem;
}

.profile-cover-wrap.is-own-cover:hover .profile-cover-edit,
.profile-cover-wrap.is-cover-edit-open .profile-cover-edit,
.profile-cover-wrap.is-own-cover:focus-within .profile-cover-edit {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none), (max-width: 48rem) {
  .profile-cover-wrap.is-own-cover .profile-cover-edit {
    opacity: 0.92;
    pointer-events: auto;
  }
  .profile-cover-wrap.is-own-cover.is-cover-edit-open .profile-cover-edit {
    opacity: 1;
    pointer-events: auto;
  }
}

.profile-media-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.profile-media-edit .material-symbols-outlined { font-size: 1.125rem; }

.profile-fb-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 0.85rem;
  align-items: end;
  padding: 0 1rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  text-align: left;
}

.profile-fb-avatar-wrap {
  position: relative;
  width: 5.75rem;
  height: 5.75rem;
  margin: -2.85rem 0 0;
  flex-shrink: 0;
  z-index: 2;
}

.profile-fb-avatar {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  border: 3px solid var(--bg-card);
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.35rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 15, 20, 0.18);
}

.profile-fb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-edit {
  position: absolute;
  right: -0.1rem;
  bottom: -0.05rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  z-index: 3;
  background: #fff;
  border: 2px solid var(--bg-card);
}

.profile-avatar-edit .material-symbols-outlined { font-size: 1rem; }

.profile-fb-meta {
  min-width: 0;
  padding-top: 0.55rem;
  grid-column: 2;
}

.profile-fb-meta h1 {
  font-size: 1.25rem;
  margin-bottom: 0.15rem;
}

@media (max-width: 30rem) {
  .profile-fb-head {
    grid-template-columns: auto 1fr;
    gap: 0.45rem 0.65rem;
    padding: 0 0.75rem 0.85rem;
  }
  .profile-fb-avatar-wrap,
  .profile-fb-avatar {
    width: 4.75rem;
    height: 4.75rem;
  }
  .profile-fb-avatar-wrap {
    margin-top: -2.35rem;
  }
  .profile-fb-avatar {
    font-size: 1.85rem;
    border-width: 3px;
  }
  .profile-fb-meta {
    padding-top: 0.35rem;
  }
}

.profile-username {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.profile-bio-text {
  margin: 0.5rem 0 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}

.profile-fb-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-start;
  margin-top: 0.65rem;
  align-items: center;
}

.profile-fb-actions[hidden] {
  display: none !important;
}

.profile-fb-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.875rem;
}

.profile-menu {
  position: relative;
  display: inline-flex;
}

.profile-menu-trigger .profile-menu-chevron {
  font-size: 1.05rem;
  opacity: 0.7;
}

.profile-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 0.85rem;
  background: var(--bg-card, #fff);
  border: 1px solid rgba(117, 47, 238, 0.12);
  box-shadow: 0 14px 36px rgba(30, 27, 46, 0.14);
}

.profile-menu-dropdown[hidden] {
  display: none !important;
}

.profile-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.profile-menu-item:hover {
  background: rgba(117, 47, 238, 0.08);
}

.profile-menu-item .material-symbols-outlined {
  font-size: 1.15rem;
  color: var(--violet, #752FEE);
}

.profile-menu-item-danger {
  color: #be123c;
}

.profile-menu-item-danger .material-symbols-outlined {
  color: #be123c;
}

.profile-menu-item[hidden] {
  display: none !important;
}

.profile-composer-hint-feed {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  .profile-fb-actions {
    width: 100%;
  }
  .profile-fb-actions .btn,
  .profile-menu {
    flex: 1 1 auto;
  }
  .profile-menu-trigger {
    width: 100%;
    justify-content: center;
  }
  .profile-menu-dropdown {
    left: auto;
    right: 0;
    min-width: 12.75rem;
    width: max-content;
    max-width: min(18rem, calc(100vw - 1.5rem));
  }
}

.profile-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 1rem 0 0;
  padding: 0 0.25rem;
  border-bottom: 1px solid var(--border);
}

.profile-tab {
  flex: 1;
  padding: 0.75rem 0.5rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.profile-tab.active {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

.profile-tab-panel { display: none; margin-top: 1rem; }
.profile-tab-panel.active { display: block; }

.profile-composer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.profile-composer-top {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.profile-composer-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-composer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-composer textarea {
  flex: 1;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  resize: vertical;
  font-family: inherit;
  font-size: 0.9375rem;
}

.profile-composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.profile-composer-expand {
  margin-bottom: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.profile-composer-addon-bar {
  margin: 0.55rem 0 0;
}

.profile-composer-expand .share-studio-addons .share-studio-addon.is-active,
#profile-composer-addons .share-studio-addon.is-active {
  background: rgba(117, 47, 238, 0.12);
}

.profile-composer-extra {
  margin-top: 0.65rem;
  text-align: left;
}

.profile-composer-extra-card {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
}

.profile-composer-mood-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.profile-composer-mood-btn {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.profile-composer-mood-btn.is-active {
  border-color: var(--violet);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
}

.profile-composer-preview {
  margin-top: 0.5rem;
  max-height: 10rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

.profile-composer-preview img,
.profile-composer-preview video {
  width: 100%;
  max-height: 10rem;
  object-fit: cover;
  display: block;
}

.profile-composer-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.profile-composer-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.profile-composer-field input {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-card);
}

.profile-wall-media {
  width: 100%;
  max-height: 16rem;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  object-fit: cover;
}

.profile-wall-post-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--violet);
  margin-bottom: 0.375rem;
}

#page-profile .profile-fb {
  padding-bottom: 1.25rem;
}

.composer-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.profile-wall { display: flex; flex-direction: column; gap: 0.75rem; }

.profile-wall-post {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: left;
  box-shadow: var(--shadow);
}

.profile-wall-post-head {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 0.625rem;
}

.profile-wall-post-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-wall-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-wall-post-head strong { display: block; font-size: 0.9375rem; }
.profile-wall-post p { margin-bottom: 0.75rem; line-height: 1.5; text-align: left; }

.profile-wall-post-media {
  margin: 0 0 0.75rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2, #F6F0FC);
  min-height: 3rem;
}

.profile-wall-post-media img,
.profile-wall-post-media video {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  background: #0f0f12;
}

.profile-wall-post-media.is-image img {
  object-fit: cover;
  max-height: 420px;
  background: transparent;
}

.profile-wall-post-media audio {
  display: block;
  width: 100%;
  padding: 0.75rem;
  min-height: 3rem;
}

.wall-media-audio-card,
.wall-media-music-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(117, 47, 238, 0.08), rgba(37, 99, 235, 0.06));
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.wall-audio-icon,
.wall-music-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(117, 47, 238, 0.15);
  color: #752FEE;
}
.wall-music-icon { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.wall-audio-body,
.wall-music-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.wall-audio-body strong,
.wall-music-body strong {
  font-size: 0.9rem;
  line-height: 1.3;
}
.wall-media-audio-card audio,
.wall-media-music-card audio {
  padding: 0;
  min-height: 2.25rem;
}
.wall-music-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}
.wall-music-link:hover { text-decoration: underline; }
.wall-music-link .material-symbols-outlined { font-size: 1rem; }

.share-studio-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.share-studio-av-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
}
.share-studio-av-card .material-symbols-outlined {
  font-size: 1.75rem;
}
.share-studio-av-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.share-studio-av-card audio { width: 100%; }
.share-studio-music-ext {
  font-size: 0.75rem;
  word-break: break-all;
  color: #93c5fd;
}
#share-studio-voice-record-btn.is-recording {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  animation: share-studio-pulse 1.2s ease-in-out infinite;
}
@keyframes share-studio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.profile-wall-post-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.wall-like-btn,
.wall-del-btn {
  border: none;
  background: none;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--text-muted);
}

.wall-like-btn:hover { color: #ec4899; }
.wall-like-btn.liked { color: #ec4899; font-weight: 600; }
.wall-del-btn:hover { color: #ef4444; }

.wall-edit-btn {
  border: none;
  background: none;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--primary, #752FEE);
  font-weight: 600;
}
.wall-edit-btn:hover { text-decoration: underline; }

.wall-post-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.wall-post-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(117, 47, 238, 0.1);
  color: var(--text, #1f1635);
}
.profile-wall-post-body > p { margin-bottom: 0.75rem; }
.profile-wall-post-media { position: relative; }
.profile-wall-post-media .feed-media-overlay { border-radius: inherit; }

.modal-share-studio {
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem !important;
}
.modal-share-studio .share-studio-sheet {
  width: min(22.5rem, calc(100vw - 1.5rem));
  max-height: min(78dvh, 34rem);
  overflow: auto;
  padding: 0;
  position: relative;
  margin: auto;
  border-radius: 1rem !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  animation: modalIn 0.22s ease;
}
.share-studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem 0.4rem;
  position: sticky;
  top: 0;
  background: var(--card, #fff);
  z-index: 2;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.share-studio-head-copy {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.share-studio-head h2 { margin: 0; font-size: 0.92rem; }
.share-studio-head #share-studio-sub {
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  display: none;
}
.share-studio-back {
  border: 0;
  background: transparent;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: inherit;
}
.share-studio-back .material-symbols-outlined { font-size: 1.15rem; }
.share-studio-back[hidden] { display: none !important; }
.modal-share-studio .modal-close {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
}
.modal-share-studio .modal-close .material-symbols-outlined { font-size: 1.15rem; }
.share-studio-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem 0.7rem;
}
.share-studio-step[hidden] { display: none !important; }
.share-studio-author {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.share-studio-author-av {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.share-studio-author-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.share-studio-author-meta strong {
  display: block;
  font-size: 0.8rem;
}
.share-studio-pills {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.1rem;
}
.share-studio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 0;
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
  background: rgba(15, 23, 42, 0.06);
  font: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  color: #374151;
}
.share-studio-pill .material-symbols-outlined { font-size: 0.85rem; }
.share-studio-caption-wrap textarea {
  width: 100%;
  border: 0;
  resize: vertical;
  min-height: 3.25rem;
  max-height: 7rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  background: transparent;
  padding: 0.15rem 0;
}
.share-studio-preview-wrap {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 7.5rem;
  background: #111827;
  display: grid;
  place-items: center;
}
/* display:grid [hidden] attribute'unu ezer — boş mor/siyah kutu kalıyordu */
.share-studio-preview-wrap[hidden],
.share-studio-preview[hidden],
.share-studio-preview-img[hidden],
.share-studio-text-preview[hidden] {
  display: none !important;
}
.share-studio-preview,
.share-studio-preview-img {
  width: 100%;
  max-height: 11rem;
  object-fit: contain;
  display: block;
}
.share-studio-text-preview {
  width: 100%;
  min-height: 6.5rem;
  padding: 0.75rem;
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  background: linear-gradient(135deg, #2A0A5C, #752FEE);
}
.share-studio-edit-all {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.share-studio-edit-all[hidden],
.share-studio-media-remove[hidden] { display: none !important; }
.share-studio-media-remove {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.share-studio-media-remove .material-symbols-outlined { font-size: 1.05rem; }
.share-studio-inline-fields {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(117, 47, 238, 0.14);
  background: rgba(117, 47, 238, 0.04);
}
.share-studio-inline-fields[hidden] { display: none !important; }
.share-studio-field { display: flex; flex-direction: column; gap: 0.3rem; }
.share-studio-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.share-studio-field textarea,
.share-studio-field input[type="text"],
.share-studio-field input[type="url"],
.share-studio-music-row input {
  width: 100%;
  border: 1px solid rgba(117, 47, 238, 0.18);
  border-radius: 0.55rem;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.82rem;
  background: var(--bg, #faf8ff);
}
.share-studio-music-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.share-studio-bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}
.share-studio-bg-btn {
  height: 44px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
}
.share-studio-bg-btn.is-active {
  border-color: var(--violet, #752FEE);
  box-shadow: 0 0 0 2px rgba(117, 47, 238, 0.25);
}
.share-studio-mood-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.share-studio-mood-btn {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.share-studio-mood-btn.is-active {
  border-color: #752FEE;
  background: rgba(117, 47, 238, 0.12);
  font-weight: 700;
}
.share-studio-addon-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.65rem;
  background: #fff;
}

/* Gönderi stüdyosu: eklenti çubuğu (foto / hiss / konum / ses…) */
#modal-share-studio .share-studio-addon-bar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.65rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.85rem;
  background: #f8f7fb;
}
.share-studio-audio-preview {
  margin-top: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.65rem;
  background: rgba(117, 47, 238, 0.06);
  border: 1px solid rgba(117, 47, 238, 0.12);
}
.share-studio-audio-preview audio {
  width: 100%;
  display: block;
  margin-bottom: 0.25rem;
}
.share-studio-setting-panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.15rem 0 0.55rem;
  padding: 0.7rem 0.75rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.share-studio-setting-panel[hidden] { display: none !important; }
.share-studio-choice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.share-studio-choice .material-symbols-outlined { font-size: 1.05rem; color: #64748b; }
.share-studio-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.share-studio-choice-card {
  position: relative;
  cursor: pointer;
  margin: 0;
}
.share-studio-choice-card input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.share-studio-choice-card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-height: 4.4rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.share-studio-choice-card-inner .material-symbols-outlined {
  font-size: 1.2rem;
  color: #64748b;
}
.share-studio-choice-card-inner strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
}
.share-studio-choice-card-inner small {
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1.25;
}
.share-studio-choice-card input:checked + .share-studio-choice-card-inner {
  border-color: #0f172a;
  background: #fff;
  box-shadow: 0 0 0 1px #0f172a, 0 6px 16px rgba(15, 23, 42, 0.08);
}
.share-studio-choice-card input:checked + .share-studio-choice-card-inner .material-symbols-outlined {
  color: #e11d48;
}
.share-studio-choice-card input:focus-visible + .share-studio-choice-card-inner {
  outline: 2px solid #e11d48;
  outline-offset: 2px;
}

.share-studio-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
}
.share-studio-seg-opt {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.share-studio-seg-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.share-studio-seg-opt > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.share-studio-seg-opt > span .material-symbols-outlined {
  font-size: 1.05rem;
}
.share-studio-seg-opt input:checked + span {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.share-studio-schedule-when {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.15rem;
  padding-top: 0.15rem;
}
.share-studio-schedule-when[hidden] { display: none !important; }
.share-studio-schedule-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: #475569;
}
.share-studio-schedule-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.share-studio-quick-chip {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.share-studio-quick-chip:hover,
.share-studio-quick-chip.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.share-studio-datetime {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.share-studio-datetime-ico {
  display: grid;
  place-items: center;
  width: 2.75rem;
  flex-shrink: 0;
  background: linear-gradient(160deg, #fff1f2, #ffe4e6);
  color: #e11d48;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
}
.share-studio-datetime-ico .material-symbols-outlined {
  font-size: 1.25rem;
}
.share-studio-datetime-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.65rem 0.55rem;
}
.share-studio-datetime-body .share-studio-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.share-studio-datetime-body input[type="datetime-local"] {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  color: #0f172a;
  outline: none;
  padding: 0;
  min-height: 1.4rem;
}
.share-studio-datetime-body input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}
.share-studio-groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 11rem;
  overflow-y: auto;
}
.share-studio-group-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.share-studio-group-item:has(input:checked) {
  border-color: #0f172a;
  box-shadow: 0 0 0 1px #0f172a;
}
.share-studio-group-item input { flex-shrink: 0; accent-color: #e11d48; }
.share-studio-group-item strong { font-weight: 650; }
.share-studio-addon.is-active {
  background: rgba(117, 47, 238, 0.14);
}
.share-studio-addon-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}
.share-studio-addons {
  display: flex;
  align-items: center;
  gap: 0.05rem;
}
.share-studio-addon {
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.share-studio-addon .material-symbols-outlined { font-size: 1.15rem; }
.share-studio-addon.is-photo { color: #16a34a; }
.share-studio-addon.is-video { color: #e11d48; }
.share-studio-addon.is-mood { color: #ea580c; }
.share-studio-addon.is-location { color: #dc2626; }
.share-studio-addon.is-music { color: #2563eb; }
.share-studio-addon.is-audio { color: #752FEE; }
.share-studio-addon.is-more { color: #6b7280; }
.share-studio-addon.is-active {
  background: rgba(117, 47, 238, 0.12);
}

.share-studio-preview-card {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.35rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.share-studio-preview-thumb {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.7rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.share-studio-preview-thumb img,
.share-studio-preview-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.share-studio-preview-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.1rem;
}
.share-studio-preview-copy strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.share-studio-preview-copy .muted {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.68) !important;
  margin: 0.15rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.share-studio-settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.share-studio-setting {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 0.9rem;
  background: #fff;
  text-align: left;
  padding: 0.7rem 0.75rem;
  font: inherit;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.share-studio-setting:hover {
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.share-studio-setting.is-open {
  border-color: rgba(15, 23, 42, 0.16);
  background: #f8fafc;
}
.share-studio-setting > .material-symbols-outlined:first-child {
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: #0f172a;
  background: #f1f5f9;
  flex-shrink: 0;
}
.share-studio-setting > .material-symbols-outlined:last-child {
  color: #94a3b8;
  font-size: 1.15rem;
}
.share-studio-setting-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.share-studio-setting-copy strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}
.share-studio-setting-copy small {
  color: #64748b;
  font-size: 0.68rem;
  line-height: 1.3;
}
.share-studio-setting.is-toggle {
  cursor: default;
}
.share-studio-switch {
  position: relative;
  width: 2.6rem;
  height: 1.45rem;
  flex-shrink: 0;
}
.share-studio-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.share-studio-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d1d5db;
  transition: 0.2s;
}
.share-studio-switch span::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  top: 0.175rem;
  left: 0.175rem;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.share-studio-switch input:checked + span {
  background: #2563eb;
}
.share-studio-switch input:checked + span::after {
  transform: translateX(1.15rem);
}

.share-studio-edit-mount { margin-top: 0.25rem; }
.share-studio-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  padding-top: 0.35rem;
  background: linear-gradient(to top, var(--card, #fff) 70%, transparent);
}
.share-studio-actions .btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  min-height: 2.15rem;
}
.share-studio-actions .btn.is-loading { opacity: 0.7; pointer-events: none; }
.share-studio-actions #share-studio-next { flex: 1; }
.share-studio-actions #share-studio-publish { flex: 1; }
.share-studio-actions #share-studio-publish[hidden],
.share-studio-actions #share-studio-next[hidden] { display: none !important; }

.share-studio-capcut {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #0b0f18;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.share-studio-capcut[hidden] { display: none !important; }
.share-studio-capcut-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  position: sticky;
  top: 0;
  background: rgba(11, 15, 24, 0.94);
  z-index: 2;
  flex-shrink: 0;
}
.share-studio-capcut-head .btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.share-studio-capcut-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fecaca;
}
.share-studio-capcut-stage {
  min-height: 0;
  height: auto;
  background: #000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}
.share-studio-capcut-stage .share-studio-preview-wrap {
  width: 100%;
  border-radius: 0;
  min-height: 0 !important;
  max-height: min(38vh, 18rem);
  margin: 0;
  display: block;
  background: #000;
  aspect-ratio: auto !important;
}
.share-studio-capcut-stage .share-studio-preview,
.share-studio-capcut-stage .share-studio-preview-img {
  max-height: min(38vh, 18rem);
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  vertical-align: top;
}
.share-studio-capcut .share-studio-edit-mount {
  padding: 0.2rem 0.65rem 0.85rem;
  background: #121826;
  flex: 1 1 auto;
  min-height: 0;
}
.share-studio-capcut .feed-edit-panel {
  margin: 0;
  padding: 0.45rem 0.4rem 0.55rem;
}
.share-studio-capcut .feed-edit-live-row {
  margin-bottom: 0.15rem;
}
.share-studio-capcut .feed-edit-swipe-hint {
  margin: 0 0 0.25rem;
}
.modal-share-studio.is-capcut-open .share-studio-form,
.modal-share-studio.is-capcut-open .share-studio-head {
  visibility: hidden;
}

@media (max-width: 640px) {
  .share-studio-music-row { grid-template-columns: 1fr; }
  .share-studio-bg-grid { grid-template-columns: repeat(3, 1fr); }
  .share-studio-addon-bar {
    flex-direction: row;
    align-items: center;
  }
  .share-studio-addons { justify-content: flex-end; flex-wrap: nowrap; }
  .modal-share-studio .share-studio-sheet {
    width: min(22rem, calc(100vw - 1.25rem));
    max-height: min(76dvh, 32rem);
  }
}

.wall-comment-btn { border: none; background: none; font-size: 0.8125rem; cursor: pointer; color: var(--text-muted); }
.wall-comment-btn:hover { color: var(--primary); }

.wall-comments-wrap {
  margin-top: 0.75rem;
  padding: 0.85rem 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
  background: #faf7f2;
  border-radius: 0.85rem;
  color: #1c1917;
}

.wall-comments-wrap[hidden] { display: none !important; }

.wall-comment-list { list-style: none; padding: 0; margin: 0 0 0.625rem; }

.wall-comment-item {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  font-size: 0.8125rem;
  align-items: flex-start;
}

.wall-comment-item.is-reply {
  margin-left: 1.75rem;
  padding-left: 0.65rem;
  border-left: 2px solid rgba(117, 47, 238, 0.18);
}

.wall-comment-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(117, 47, 238, 0.1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  font-size: 0.85rem;
  color: inherit;
}

.wall-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wall-comment-body {
  flex: 1;
  min-width: 0;
}

.wall-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.wall-comment-author,
.social-feed-author-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--text, #0f172a);
  cursor: pointer;
}

.wall-comment-author:hover,
.social-feed-author-btn:hover {
  color: var(--violet, #752FEE);
  text-decoration: underline;
}

.wall-comment-author-static { font-size: 0.8125rem; }

.wall-comment-text {
  margin: 0.15rem 0 0.25rem;
  line-height: 1.4;
  color: var(--text, #0f172a);
  word-break: break-word;
}

.wall-comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.15rem;
}

.wall-comment-action {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  cursor: pointer;
}

.wall-comment-action:hover { color: var(--violet, #752FEE); }
.wall-comment-action.is-danger:hover { color: #dc2626; }

.wall-comment-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.25rem 0 0.1rem;
}

.wall-comment-react-chip {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.wall-comment-react-chip.is-mine {
  background: rgba(117, 47, 238, 0.1);
  border-color: rgba(117, 47, 238, 0.28);
}

.wall-comment-react-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.75rem;
  width: fit-content;
}

.wall-comment-react-picker[hidden] { display: none !important; }

.wall-comment-react-pick {
  border: none;
  background: #f8fafc;
  border-radius: 0.45rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1rem;
}

.wall-comment-react-pick.is-active,
.wall-comment-react-pick:hover {
  background: rgba(117, 47, 238, 0.12);
}

.wall-comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.wall-comment-reply-chip {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6B25D9;
  background: rgba(117, 47, 238, 0.08);
  border-radius: 0.55rem;
  padding: 0.3rem 0.55rem;
}

.wall-comment-reply-cancel {
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: #752FEE;
}

.wall-comment-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.social-feed-list { display: flex; flex-direction: column; gap: 0.75rem; }

.home-feed-uniform {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  max-width: 26rem;
  margin: 0 auto;
}

.home-feed-card {
  padding: 0.75rem;
  overflow: hidden;
}

.home-feed-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}
.home-feed-card.is-boosted {
  border-color: rgba(117, 47, 238, 0.35);
  box-shadow: 0 0 0 1px rgba(117, 47, 238, 0.12);
}
.home-feed-boost-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6B25D9;
  background: rgba(117, 47, 238, 0.12);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.share-studio-capcut-stage {
  min-height: 0;
}
#modal-share-studio .share-studio-addons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
}
#modal-share-studio .share-studio-addon {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
#modal-share-studio .share-studio-addon .material-symbols-outlined {
  font-size: 1.25rem;
  color: #6B25D9;
}

.home-feed-card-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Ana sayfa: belge kaydırması her zaman açık */
#page-home.active,
#page-home.active .page-wrap {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  touch-action: pan-y;
}

/* Video kartlarında dikey kaydırma — button/video gesture yutmasın */
#page-home .home-feed-media,
#page-home .home-feed-media video,
#page-home .tiktok-reel-video,
#page-home .home-feed-card {
  touch-action: pan-y !important;
}

.home-feed-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(68vw, 28rem);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #1a1714;
  cursor: default;
  touch-action: pan-y;
}

.home-feed-media:hover,
.home-feed-media:active {
  transform: none;
  box-shadow: none;
}

.home-feed-media-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.home-feed-media-inner.tiktok-reel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-feed-media-inner img,
.home-feed-media-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #1a1714;
}

.home-feed-media-inner video.is-broken {
  opacity: 0;
}

.home-feed-media.is-playing .home-feed-expand-hint {
  opacity: 0.35;
}

.home-feed-media-inner.is-audio,
.home-feed-media-inner.is-text {
  background: linear-gradient(160deg, #faf7f2, #efe8dc);
  color: #1c1917;
  padding: 1rem;
  text-align: center;
  gap: 0.35rem;
}

.home-feed-media-inner.is-audio .material-symbols-outlined {
  font-size: 2.5rem;
  color: var(--violet, #752FEE);
}

.home-feed-media-inner.is-text p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.home-feed-expand-hint {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: #1c1917;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.home-feed-card-text {
  margin: 0.65rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-text-lightbox {
  max-width: min(28rem, 92vw);
  padding: 1.5rem;
  background: #faf7f2;
  border-radius: 1rem;
  color: #1c1917;
}

.feed-text-lightbox p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.social-feed-post {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: left;
  box-shadow: var(--shadow);
}

.social-feed-post-head {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 0.625rem;
}

.social-feed-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  overflow: hidden;
  flex-shrink: 0;
}

.social-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }

.social-feed-post-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.social-feed-hint { margin-top: 0.75rem; text-align: center; }

.social-feed-guest-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--fuchsia-rgb), 0.05));
  text-align: left;
}

.social-feed-guest-banner .material-symbols-outlined {
  font-size: 1.5rem;
  color: var(--violet);
  flex-shrink: 0;
}

.social-feed-guest-banner strong {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}

.social-feed-guest-banner p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.social-feed-guest-banner .btn {
  flex-shrink: 0;
  margin-left: auto;
}

.social-feed-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px dashed rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.03);
}

.social-feed-empty .material-symbols-outlined {
  font-size: 2rem;
  color: rgba(var(--accent-rgb), 0.35);
  margin-bottom: 0.375rem;
}

.social-feed-author-btn {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  display: block;
  text-align: left;
}

.social-feed-author-btn:hover {
  color: var(--primary);
  text-decoration: underline;
}

.social-feed-post-actions .wall-like-btn {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s;
}

.social-feed-post-actions .wall-like-btn:hover {
  background: transparent;
}

.social-feed-post-actions .wall-like-btn.liked {
  color: #e11d48;
}

@media (max-width: 480px) {
  .social-feed-guest-banner {
    flex-wrap: wrap;
  }
  .social-feed-guest-banner .btn {
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
  }
}

#profile-follow-btn {
  position: relative;
  z-index: 5;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: auto;
}

#profile-follow-btn.is-following {
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border);
}

#profile-follow-btn:not(.is-following) {
  min-width: 7.5rem;
}

#profile-follow-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.profile-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}

.profile-stat-btn {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.profile-stat-btn:hover,
.profile-stat-btn:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.profile-stat-btn strong {
  color: var(--text);
  font-weight: 700;
}

.follow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.follow-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 0.625rem 0.75rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.follow-list-item:hover {
  border-color: var(--primary);
}

.follow-list-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.follow-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.follow-list-meta {
  min-width: 0;
  flex: 1;
}

.follow-list-meta strong {
  display: block;
  font-size: 0.9375rem;
}

.follow-list-meta span {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.wall-share-btn {
  border: none;
  background: none;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--text-muted);
}

.wall-share-btn:hover {
  color: var(--primary);
}

.profile-about-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
  text-align: left;
  box-shadow: var(--shadow);
}

.profile-about-card h3 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

.profile-about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-about-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.profile-about-list li:last-child { border-bottom: none; }

.profile-about-list .material-symbols-outlined {
  color: var(--violet);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.profile-about-list li div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.profile-about-list strong { font-size: 0.8125rem; color: var(--text-muted); }
.profile-about-list span { font-size: 0.9375rem; }

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.profile-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  font-size: 0.8125rem;
}

.profile-activity-list { display: flex; flex-direction: column; gap: 0.625rem; }

.profile-activity-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
}

.profile-activity-item .material-symbols-outlined {
  color: var(--violet);
  font-size: 1.25rem;
}

.profile-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.profile-photo-item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.profile-photo-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.profile-photo-item figcaption {
  padding: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.profile-photo-placeholder {
  grid-column: 1 / -1;
  padding: 2.5rem 1rem;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.profile-photo-placeholder span { font-size: 3rem; display: block; margin-bottom: 0.5rem; }

.profile-fb-footer { margin-top: 1.25rem; }

.profile-back-btn {
  display: none !important;
}

.profile-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.375rem;
}

.profile-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

body:not(.logged-in) .active-bots-panel { display: none !important; }

.bot-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bot-item-self {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.04);
}

.bot-you-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--violet);
  margin-left: 0.125rem;
}

.bot-you-tag.is-new-user {
  color: #059669;
  background: color-mix(in srgb, #10b981 14%, transparent);
  padding: 0.05rem 0.3rem;
  border-radius: 9999px;
}

.dm-online-chip {
  position: relative;
}

.dm-online-live-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--bg-card, #fff);
}

.dm-online-chip.is-live {
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
}

.profile-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.profile-online-badge.is-visible {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.profile-online-badge.is-hidden {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

.profile-privacy-badge.is-public {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.profile-privacy-badge.is-private {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--violet);
}

.profile-cover-private {
  filter: blur(2px) brightness(0.85);
}

.profile-private-notice {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px dashed rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.profile-private-notice .material-symbols-outlined {
  font-size: 2rem;
  color: var(--violet);
  display: block;
  margin-bottom: 0.5rem;
}

.profile-private-notice h3 {
  font-size: 1rem;
  margin-bottom: 0.375rem;
}

.profile-privacy-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.privacy-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.privacy-option:has(input:checked) {
  border-color: var(--violet);
  background: rgba(var(--accent-rgb), 0.06);
}

.privacy-option input { margin: 0; }

.privacy-option .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--violet);
}

.profile-link {
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.profile-link:hover { opacity: 0.92; }

.bot-item.profile-link:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
}

.profile-inline-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.35);
}

button.chat-msg.profile-link {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

button.expert-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.profile-empty { padding: 1.5rem; }

/* Profil düzenleme modal */
.profile-edit-modal { max-width: 28rem; }

#modal-profile-edit.is-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

#modal-profile-edit .profile-edit-modal,
#modal-profile-edit.is-open .profile-edit-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  max-height: min(92dvh, calc(100dvh - 1.5rem));
  /* modal-scroll-box overflow-y:auto ile çakışmasın */
  overscroll-behavior: none;
  touch-action: manipulation;
}

#modal-profile-edit .modal-header-row,
#modal-profile-edit .profile-edit-preview,
#modal-profile-edit .profile-edit-nav,
#modal-profile-edit .profile-edit-footer {
  position: relative;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
  z-index: auto;
}

#modal-profile-edit .modal-header-row {
  background: var(--bg-card, #fff);
  padding-top: 0.15rem;
  margin-bottom: 0.35rem;
}

#modal-profile-edit .profile-edit-nav {
  background: var(--bg-card, #fff);
  padding-top: 0.25rem;
  margin-top: 0;
}

/* Tek kaydırma kökü — flex-basis 0% şart (auto = içerik kadar büyür, yukarı jesti kilitlenir) */
#modal-profile-edit .profile-edit-scroll {
  display: block;
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  overscroll-behavior-x: none;
}

#modal-profile-edit #profile-edit-form {
  overflow: visible;
  height: auto;
  min-height: 0;
  max-height: none;
  touch-action: pan-y;
}

#modal-profile-edit .profile-edit-footer {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 80%, transparent);
  background: var(--bg-card, #fff);
}

.profile-edit-compact .modal-header-row h2 {
  font-size: 1.05rem;
  margin: 0;
}
.profile-edit-compact .modal-header-row .muted {
  font-size: 0.75rem;
  margin: 0.15rem 0 0;
}
.profile-edit-compact .profile-edit-preview {
  margin: 0 0 0.75rem;
  overflow: visible;
}
.profile-edit-compact .profile-edit-preview-cover {
  height: 5.25rem;
  min-height: 5.25rem;
}
.profile-edit-compact .profile-edit-preview-avatar {
  width: 3.35rem;
  height: 3.35rem;
  margin-top: -1.65rem;
  font-size: 1.25rem;
}
.profile-edit-compact .profile-edit-preview-meta {
  padding: 0.55rem 0 0.15rem;
}
.profile-edit-compact .profile-edit-preview-name {
  font-size: 0.9rem;
}
.profile-edit-compact .pe-preview-hint {
  font-size: 0.65rem;
}
.profile-edit-compact .profile-edit-nav {
  gap: 0.3rem;
  margin: 0 0 0.65rem;
  padding: 0.1rem 0 0.55rem;
}
.profile-edit-compact .profile-edit-nav-btn {
  padding: 0.32rem 0.55rem;
  font-size: 0.72rem;
  gap: 0.2rem;
}
.profile-edit-compact .profile-edit-nav-btn .material-symbols-outlined {
  font-size: 0.95rem;
}
.profile-edit-compact .profile-edit-section {
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
}
.profile-edit-compact .profile-edit-section h3 {
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
  gap: 0.25rem;
}
.profile-edit-compact .profile-edit-section h3 .material-symbols-outlined {
  font-size: 1.05rem;
}
.profile-edit-compact .profile-edit-section label {
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
}
.profile-edit-compact .profile-edit-section input,
.profile-edit-compact .profile-edit-section textarea {
  margin-top: 0.25rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.85rem;
}
.profile-edit-compact .toggle-row {
  padding: 0.28rem 0;
  font-size: 0.8rem;
}
.profile-edit-compact .profile-privacy-hint,
.profile-edit-compact .pe-account-hint {
  font-size: 0.72rem;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.profile-edit-compact .profile-edit-sub {
  font-size: 0.75rem;
  margin: 0.45rem 0 0.2rem;
}
.profile-edit-compact .pe-gender-options {
  gap: 0.35rem;
}
.profile-edit-compact .pe-gender-option {
  padding: 0.4rem 0.5rem;
}
.profile-edit-compact .pe-gender-option small {
  display: none;
}
.profile-edit-compact .pe-location-inputs {
  gap: 0.35rem;
}
.profile-edit-compact .pe-location-inputs .btn {
  padding: 0.35rem 0.45rem;
  min-width: 2.25rem;
}
.profile-edit-compact .privacy-option {
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
}
.profile-edit-compact .pe-mod-bot-grid {
  gap: 0.35rem;
  margin: 0.35rem 0;
}
.profile-edit-compact .dm-mod-bot-btn {
  width: 2.35rem;
  height: 2.35rem;
}
.profile-edit-compact .pe-sound-row select {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}
.profile-edit-compact .pe-sound-preview {
  width: 2rem;
  height: 2rem;
}
.profile-edit-compact #pe-notif-test-btn {
  margin: 0.15rem 0 0.45rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
}

.profile-edit-compact .pe-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.35rem;
}
.profile-edit-compact .pe-field-grid label {
  margin-bottom: 0;
}
.profile-edit-compact .pe-general-compact {
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
}
.profile-edit-compact .pe-general-compact .pe-gender-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.profile-edit-compact .pe-general-compact .pe-gender-option {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  gap: 0.3rem;
  align-items: center;
}
.profile-edit-compact .pe-general-compact .pe-gender-option-icon {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.85rem;
}
.profile-edit-compact .pe-general-compact .pe-gender-option-text strong {
  font-size: 0.72rem;
  line-height: 1.15;
}
.profile-edit-compact .pe-general-compact .pe-gender-label {
  font-size: 0.72rem;
  margin-bottom: 0.25rem;
}
.profile-edit-compact .pe-general-compact textarea {
  min-height: 2.5rem;
}

.profile-edit-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.15rem 0 0.85rem;
  border-bottom: 1px solid var(--border);
}

.profile-edit-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg-card, #fff);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-edit-nav-btn .material-symbols-outlined {
  font-size: 1.05rem;
}

.profile-edit-nav-btn.is-active {
  border-color: color-mix(in srgb, var(--accent, #752FEE) 55%, var(--border));
  background: color-mix(in srgb, var(--accent, #752FEE) 14%, transparent);
  color: var(--accent, #752FEE);
}

/* Admin portal: yönetici veya moderatör */
body:not(.is-admin):not(.is-staff) .admin-only-link,
body:not(.is-admin):not(.is-staff) #admin-portal-link,
body:not(.is-admin):not(.is-staff) #profile-admin-link,
body:not(.is-admin):not(.is-staff) #ps-admin-row,
body:not(.is-admin):not(.is-staff) #admin-banner,
.admin-only-link[hidden],
#admin-portal-link[hidden],
#profile-admin-link[hidden],
#ps-admin-row[hidden],
#admin-banner[hidden] {
  display: none !important;
}

.profile-edit-preview {
  position: relative;
  margin: 0 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: visible;
  box-shadow: var(--shadow);
}

.profile-edit-preview-cover {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5rem;
  min-height: 6.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, #f3ebe3 0%, #d4b8c8 42%, #8b5a9e 78%, #6a3d8a 100%);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}

.pe-preview-edit-chip {
  position: absolute;
  right: 0.5rem;
  bottom: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  background: rgba(15, 15, 20, 0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.pe-preview-edit-chip .material-symbols-outlined {
  font-size: 0.95rem;
}

.profile-edit-preview-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 0.7rem;
  align-items: end;
  padding: 0 0.75rem 0.65rem;
  text-align: left;
}

.profile-edit-preview-avatar {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  margin: -1.85rem 0 0;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(15, 15, 20, 0.16);
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
}

.profile-edit-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.profile-edit-preview-meta {
  padding: 0.65rem 0 0.15rem;
  text-align: left;
  min-width: 0;
}

.profile-edit-preview-name {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}

.profile-edit-preview-username {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.pe-preview-hint {
  margin: 0.2rem 0 0;
  line-height: 1.25;
}

.profile-edit-form { text-align: left; }

.profile-edit-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.profile-edit-section h3 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

.profile-edit-section label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.profile-edit-section input,
.profile-edit-section textarea {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  background: var(--bg);
}

.profile-edit-section.pe-account-security .pe-password-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.profile-edit-section.pe-account-security .field-input {
  margin-bottom: 0.65rem;
}
.pe-account-hint {
  margin: 0 0 0.75rem;
  line-height: 1.35;
}
.pe-account-status.is-error { color: #b91c1c; }
.pe-account-status.is-ok { color: #15803d; }

.profile-emoji-picker,
.profile-cover-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.emoji-pick {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  font-size: 1.375rem;
  cursor: pointer;
}

.emoji-pick.active {
  border-color: var(--violet);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}

.cover-pick {
  width: 3.5rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 2px solid transparent;
  cursor: pointer;
}

.cover-pick.active {
  border-color: var(--violet);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}

.profile-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  margin-top: 0.5rem;
  width: fit-content;
  max-width: 100%;
}

.profile-file-label .material-symbols-outlined {
  font-size: 1.1rem;
}

.pe-upload-layer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pe-upload-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 5rem;
  padding: 0.7rem 0.65rem;
  border-radius: 0.85rem;
  border: 1.5px dashed rgba(117, 47, 238, 0.35);
  background:
    linear-gradient(160deg, rgba(117, 47, 238, 0.06), rgba(236, 72, 153, 0.04)),
    var(--bg-card, #fff);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.pe-upload-dropzone-wide {
  min-height: 4.25rem;
  aspect-ratio: 16 / 5;
  max-height: 5.5rem;
}

.pe-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.55rem;
  align-items: start;
}
.pe-photos-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.pe-photos-hint {
  margin: -0.25rem 0 0.45rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
.pe-upload-dropzone-avatar {
  min-height: 4.5rem;
  max-height: 5.75rem;
  aspect-ratio: 1;
  border-radius: 0.85rem;
}
.profile-edit-compact .pe-photos-grid {
  gap: 0.45rem;
}
.profile-edit-compact .pe-upload-layer {
  gap: 0.45rem;
}
.profile-edit-compact .pe-upload-dropzone,
.profile-edit-compact .pe-upload-dropzone-wide,
.profile-edit-compact .pe-upload-dropzone-avatar {
  min-height: 3.75rem;
  max-height: 5rem;
  padding: 0.4rem 0.45rem;
}
.profile-edit-compact .pe-upload-dropzone-avatar {
  /* Tam genişlikte kare aspect-ratio kutuyu şişirmesin */
  aspect-ratio: auto;
  height: 4.5rem;
  width: 100%;
  max-width: 7.5rem;
  justify-self: start;
}
.profile-edit-compact .pe-upload-dropzone-wide {
  aspect-ratio: 2.6 / 1;
  height: 4.25rem;
  max-height: 4.5rem;
}
.profile-edit-compact .pe-upload-icon {
  font-size: 1.15rem;
  margin-bottom: 0;
}
.profile-edit-compact .pe-upload-copy {
  gap: 0.1rem;
}
.profile-edit-compact .pe-upload-copy strong {
  font-size: 0.72rem;
}
.profile-edit-compact .pe-upload-cta {
  margin-top: 0.25rem;
  padding: 0.28rem 0.75rem;
  font-size: 0.7rem;
  box-shadow: 0 3px 10px rgba(117, 47, 238, 0.18);
}
.profile-edit-compact .pe-upload-copy .muted {
  display: none;
}
@media (max-width: 24rem) {
  .pe-photos-grid {
    grid-template-columns: 1fr;
  }
  .profile-edit-compact .pe-upload-dropzone-avatar {
    max-width: none;
    height: 4.25rem;
  }
  .profile-edit-compact .pe-upload-dropzone-wide {
    height: 3.85rem;
    max-height: 4rem;
    aspect-ratio: auto;
  }
}

.pe-upload-dropzone:hover,
.pe-upload-dropzone.is-dragover {
  border-color: var(--violet, #752FEE);
  box-shadow: 0 8px 28px rgba(117, 47, 238, 0.12);
  transform: translateY(-1px);
}

.pe-upload-dropzone.has-file {
  border-style: solid;
  border-color: rgba(117, 47, 238, 0.28);
}

.pe-upload-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}

.pe-upload-icon {
  font-size: 1.75rem;
  color: var(--violet, #752FEE);
  margin-bottom: 0.15rem;
}

.pe-upload-copy strong {
  font-size: 0.9375rem;
}

.pe-upload-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.55rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #752FEE, #db2777);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(117, 47, 238, 0.22);
  pointer-events: none;
}

.pe-file-input,
.pe-upload-dropzone input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pe-gender-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.35rem 0 0.75rem;
  text-align: left;
}

.pe-gender-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.pe-gender-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 520px) {
  .pe-gender-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pe-gender-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border, #e8e4f0);
  border-radius: 0.85rem;
  background: var(--bg-card, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}

.pe-gender-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.pe-gender-option-icon {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--violet, #752FEE);
  background: rgba(117, 47, 238, 0.1);
}

.pe-gender-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pe-gender-option-text strong {
  font-size: 0.88rem;
  line-height: 1.25;
}

.pe-gender-option-text small {
  font-size: 0.7rem;
  color: var(--text-muted, #6b6580);
  line-height: 1.3;
}

.pe-gender-option:hover {
  border-color: rgba(117, 47, 238, 0.35);
}

.pe-gender-option:has(input:checked) {
  border-color: var(--violet, #752FEE);
  background: rgba(117, 47, 238, 0.07);
  box-shadow: 0 0 0 2px rgba(117, 47, 238, 0.12);
}

.pe-gender-option:has(input:checked) .pe-gender-option-icon {
  background: linear-gradient(135deg, #752FEE, #db2777);
  color: #fff;
}

.pe-upload-preview {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 0;
}

.pe-upload-preview.has-image {
  display: block;
}

.pe-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pe-upload-preview.has-image + .pe-upload-copy {
  opacity: 0;
}

.pe-upload-dropzone.has-file:hover .pe-upload-copy {
  opacity: 1;
  background: rgba(15, 10, 30, 0.55);
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.pe-upload-dropzone.has-file:hover .pe-upload-copy .muted,
.pe-upload-dropzone.has-file:hover .pe-upload-icon {
  color: #F0E6FF;
}

.pe-upload-or {
  margin: 0;
  text-align: center;
}

.discover-confessions-panel {
  padding: 0.1rem 0 0.75rem;
}

.discover-confessions-head {
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 80%, transparent);
}

.discover-confessions-head h2 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.1rem;
  font-size: 0.9rem;
}

.discover-confessions-head .material-symbols-outlined {
  font-size: 1.05rem;
}

.discover-confessions-head .muted.small {
  font-size: 0.68rem !important;
  margin: 0;
  line-height: 1.3;
}

/* İtiraf / Fısılda — sıkı panel */
#discover-panel-confessions .confession-form {
  padding: 0 0 0.55rem;
  border-bottom: 1px solid var(--border);
}

#discover-panel-confessions .confession-form textarea {
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.35;
  min-height: 3.1rem;
}

#discover-panel-confessions .confession-form .btn {
  margin-top: 0.35rem;
  padding: 0.32rem 0.85rem;
  font-size: 0.75rem;
  min-height: 1.8rem;
}

#discover-panel-confessions .confession-mod-notice {
  margin-top: 0.3rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.68rem;
  border-radius: 0.4rem;
}

#discover-panel-confessions .confession-list {
  padding: 0.5rem 0 0;
}

#discover-panel-confessions .confession-card {
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  border-radius: 0.55rem;
}

#discover-panel-confessions .confession-card p {
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
  text-align: left;
}

#discover-panel-confessions .confession-meta {
  margin-top: 0.35rem;
  gap: 0.3rem;
}

#discover-panel-confessions .btn-energy {
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  min-height: 1.5rem;
}

.profile-edit-footer {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.profile-edit-compact .profile-edit-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: auto;
  padding: 0.65rem 0 calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, var(--kozamia-shell-cream, #fdf8f5) 24%);
}

.pe-notif-simple-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pe-notif-simple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(106, 61, 138, 0.1);
  background: #fff;
}

.pe-notif-simple-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
}

.pe-notif-hidden-fields {
  display: none !important;
}

.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
}

.profile-card-avatar {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.profile-stats-row .stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.875rem 0.5rem;
}

body.admin-mode { padding-bottom: 0; }
body.admin-mode .bottom-nav { display: none; }
body.admin-mode .admin-banner { display: none !important; }

/* --- Sayfa araç çubuğu & ortak --- */
.page-toolbar { margin-bottom: 1.25rem; }
.page-toolbar-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  padding: 0.4375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pill.active,
.pill:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--violet);
}

.page-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.page-info-box .material-symbols-outlined { color: var(--violet); flex-shrink: 0; }

.section-subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
}

.content-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--violet);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  margin-bottom: 0.375rem;
}

.content-card-btn {
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--border);
}

.content-card-btn.read {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.04);
}

.guide-modal-body {
  padding: 1rem 1.25rem 1.5rem;
  text-align: center;
}

.guide-modal-body p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--text);
}

.guide-tips {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--bg);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  text-align: center;
}

.guide-tips h4 { font-size: 0.875rem; margin-bottom: 0.625rem; }
.guide-tips ul {
  list-style-position: inside;
  padding-left: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.guide-tips li { margin-bottom: 0.375rem; }

/* Sesli Sohbet Odaları */
.voice-stats-bar,
.community-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

#page-connect .voice-stats-bar {
  gap: 0.55rem;
  padding: 0.35rem;
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(var(--cyan-rgb), 0.08), rgba(var(--accent-rgb), 0.06));
  border: 1px solid color-mix(in srgb, var(--cyan) 20%, var(--border));
}

.voice-stat,
.community-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 0.5rem;
  box-shadow: var(--shadow);
}

#page-connect .voice-stat {
  border: none;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.08);
}

.voice-stat strong,
.community-stat strong {
  display: block;
  font-size: 1.25rem;
  color: var(--violet);
}

#page-connect .voice-stat strong {
  background: linear-gradient(110deg, #0e7490, #752FEE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.voice-stat span,
.community-stat span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.voice-login-hint {
  margin-top: 1rem;
  text-align: center;
}

.voice-room-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.voice-room-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.voice-room-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.12);
}

.voice-room-card-anon {
  border-color: rgba(100, 116, 139, 0.35);
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.06), rgba(var(--accent-rgb), 0.04));
}

.voice-room-card-emoji {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.voice-room-card-body { flex: 1; min-width: 0; }

.voice-room-card-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
  line-height: 1.45;
}

.voice-room-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.voice-anon-badge-sm {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  background: rgba(100, 116, 139, 0.15);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  margin-left: 0.25rem;
}

.voice-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: none;
  background: none;
  color: var(--violet);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0.25rem 0;
}

.voice-room-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
  text-align: left;
}

.voice-room-anon {
  border-color: rgba(100, 116, 139, 0.35);
}

.voice-room-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.voice-room-emoji {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.voice-room-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.voice-anon-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  background: rgba(100, 116, 139, 0.15);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.voice-anon-notice,
.voice-admin-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
}

.voice-anon-notice {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.25);
}

.voice-admin-notice {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.voice-anon-notice .material-symbols-outlined,
.voice-admin-notice .material-symbols-outlined {
  color: var(--violet);
  flex-shrink: 0;
}

.voice-topic-pills { margin-bottom: 0.25rem; }

.voice-stage,
.voice-audience {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow);
  text-align: left;
}

.voice-stage h3,
.voice-audience h3,
.voice-rules h3 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

.voice-participant-grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.voice-participant-grid-compact .voice-participant { padding: 0.625rem 0.75rem; }

.voice-participant {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
}

.voice-participant.is-speaking {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.06);
}

.voice-participant.is-self {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.04);
}

.voice-participant-avatar {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
}

.voice-participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voice-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 2px solid var(--bg-card, #fff);
  background: #94a3b8;
  z-index: 2;
}
.voice-presence-dot.is-online { background: #16a34a; }
.voice-presence-dot.is-offline { background: #94a3b8; }
.voice-participant.is-offline { opacity: 0.72; }
.voice-participant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.voice-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  color: var(--text-muted);
}
.voice-status-pill .material-symbols-outlined { font-size: 0.875rem; }
.voice-status-pill.is-online {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}
.voice-status-pill.is-offline {
  background: color-mix(in srgb, #94a3b8 18%, transparent);
  color: #64748b;
}
.voice-status-pill.is-mic-on {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}
.voice-status-pill.is-mic-off {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #b91c1c;
}
.voice-participant.is-mic-on {
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
}
.voice-host-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--text);
}
.voice-host-line .material-symbols-outlined {
  font-size: 1.1rem;
  color: #ca8a04;
}
.voice-now-speaking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #16a34a 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #16a34a 35%, var(--border));
  color: #166534;
  font-size: 0.875rem;
}
.voice-now-speaking[hidden] { display: none !important; }
.voice-now-speaking .material-symbols-outlined {
  color: #16a34a;
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-speaking-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  animation: voice-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

.voice-participant-info { flex: 1; min-width: 0; text-align: left; }
.voice-participant-info strong { display: block; font-size: 0.875rem; word-break: break-word; }

.voice-wave {
  color: #22c55e;
  font-size: 1.25rem;
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-rules {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
  text-align: left;
}

.voice-rules ul {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.875rem;
}

.voice-rules li { margin-bottom: 0.375rem; }

.voice-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
  margin-top: 0;
}

.voice-detail-shell {
  display: flex;
  flex-direction: column;
  min-height: min(62vh, 34rem);
  max-height: calc(100dvh - 12.5rem);
}

.voice-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.voice-room-dock {
  position: sticky;
  bottom: 0;
  z-index: 12;
  flex: 0 0 auto;
  margin-top: 0.35rem;
  padding: 0.55rem 0.25rem 0.65rem;
  background: color-mix(in srgb, var(--bg-card, #fff) 94%, #efeaf8);
  border-top: 1px solid rgba(117, 47, 238, 0.14);
  box-shadow: 0 -10px 28px rgba(20, 12, 40, 0.07);
  border-radius: 0.85rem 0.85rem 0 0;
}

.voice-room-dock .voice-filter-strip {
  margin: 0 0 0.5rem;
}

.voice-room-dock .voice-room-actions .btn {
  min-height: 2.65rem;
  flex: 1 1 9rem;
  max-width: 16rem;
}

.community-voice-merge {
  display: none !important;
}

.community-voice-merge-hint {
  display: none !important;
}

.community-voice-inline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(117, 47, 238, 0.16);
  background: linear-gradient(135deg, rgba(117, 47, 238, 0.08), rgba(236, 72, 153, 0.05));
}

.community-voice-inline:not(.is-live) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.community-voice-inline.is-live {
  gap: 0.28rem;
  margin: 0 0 0.3rem;
  padding: 0.3rem 0.4rem;
  border-color: rgba(117, 47, 238, 0.28);
  background: linear-gradient(135deg, rgba(117, 47, 238, 0.12), rgba(16, 185, 129, 0.06));
}

.community-voice-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.community-voice-inline.is-live .community-voice-inline-copy strong {
  font-size: 0.68rem;
  gap: 0.18rem;
}

.community-voice-inline.is-live .community-voice-inline-copy .material-symbols-outlined {
  font-size: 0.85rem;
}

.community-voice-inline.is-live .community-voice-inline-copy p {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.2;
}

.community-voice-inline-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
}

.community-voice-inline-copy .material-symbols-outlined {
  font-size: 0.95rem;
  color: #752FEE;
}

.community-voice-inline-copy p {
  margin: 0.1rem 0 0;
  font-size: 0.65rem;
  line-height: 1.25;
}

.community-voice-inline-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
  flex-shrink: 0;
}

.community-voice-inline-actions .btn {
  padding: 0.18rem 0.4rem !important;
  min-height: 1.55rem !important;
  min-width: 0 !important;
  font-size: 0.65rem !important;
  gap: 0.15rem !important;
  border-radius: 0.45rem !important;
  line-height: 1.1 !important;
}

.community-voice-inline-actions .btn .material-symbols-outlined {
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

.community-voice-inline.is-live .community-voice-inline-actions .btn {
  padding: 0.15rem 0.32rem !important;
  min-height: 1.45rem !important;
  width: 1.7rem !important;
  min-width: 1.7rem !important;
  justify-content: center;
}

.community-voice-inline.is-live .community-voice-btn-label {
  display: none !important;
}

.community-voice-inline.is-live .community-voice-inline-actions .material-symbols-outlined {
  font-size: 0.95rem !important;
  line-height: 1;
  margin: 0;
}

.community-voice-peers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  align-items: center;
  max-height: 2.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.community-voice-peer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid rgba(117, 47, 238, 0.18);
  overflow: visible;
}

.community-voice-peer.is-speaking {
  border-color: rgba(16, 185, 129, 0.85);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

.community-voice-peer-av {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1;
}

.community-voice-peer-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.community-voice-peer-mic {
  position: absolute;
  right: -0.12rem;
  bottom: -0.12rem;
  font-size: 0.55rem !important;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  display: grid;
  place-items: center;
}

.community-voice-peer.is-mic-on .community-voice-peer-mic {
  color: #059669;
}

.voice-empty { padding: 0.5rem 0; }

.nav-voice:hover { color: var(--violet); }

.coin-wallet {
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--fuchsia-rgb), 0.08));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.coin-wallet-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.coin-wallet-icon { font-size: 2rem; }
.coin-wallet-inner strong { display: block; font-size: 1.25rem; color: var(--violet); }

.page-toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 400;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-toast[hidden] { display: none !important; }

/* Podcast */
.podcast-compose {
  margin: 0 0 1.25rem;
  padding: 1.15rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.podcast-compose h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
.podcast-submit-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.podcast-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.podcast-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  cursor: pointer;
}
.podcast-login-hint {
  text-align: center;
  margin-bottom: 1rem;
}
.podcast-my-pending {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent, #752FEE) 6%, transparent);
}
.podcast-pending-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.podcast-pending-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.np-media {
  width: 100%;
  flex-basis: 100%;
  order: 5;
}
.np-yt {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.75rem;
  background: #000;
}
.np-audio {
  width: 100%;
}
.admin-podcast-upload-card {
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 0.5rem;
}
.admin-podcast-upload-card .podcast-source-tabs {
  margin: 0.5rem 0;
}

.podcast-featured {
  margin-bottom: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.podcast-featured-inner {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

@media (min-width: 540px) {
  .podcast-featured-inner { grid-template-columns: auto 1fr; align-items: center; }
}

.podcast-featured-cover {
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
}

.podcast-featured-inner h2 { font-size: 1.125rem; margin: 0.375rem 0; }
.podcast-featured-inner p { font-size: 0.875rem; margin-bottom: 0.625rem; }

.podcast-desc { color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; }

.podcast-card.playing {
  border-color: var(--violet);
  background: rgba(var(--accent-rgb), 0.06);
}

.podcast-card.playing .podcast-play { color: var(--fuchsia); }

.now-playing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--violet);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.15);
}

.now-playing[hidden] { display: none !important; }

.now-playing-cover {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: rgba(var(--accent-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.now-playing-info { flex: 1; min-width: 0; }
.now-playing-info strong { display: block; font-size: 0.875rem; }
.now-playing-bar {
  height: 4px;
  background: var(--border);
  border-radius: 9999px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.now-playing-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
  border-radius: 9999px;
  transition: width 0.3s linear;
}

.now-playing-stop {
  font-size: 1.75rem !important;
  color: var(--violet);
  flex-shrink: 0;
}

/* Profil genişletilmiş */
.profile-guest-features {
  list-style: none;
  text-align: center;
  max-width: 16rem;
  margin: 0 auto 1.25rem;
}

.profile-guest-features li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.profile-guest-features .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--violet);
}

.profile-guest-hint { margin-top: 1rem; }

.profile-header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.profile-header-info { flex: 1; min-width: 0; }
.profile-header-info h2 { font-size: 1.25rem; }
.profile-bio-text {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}

.profile-badge-chip {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.profile-quick-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.quick-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}

.quick-nav-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.quick-nav-btn .material-symbols-outlined { font-size: 1.125rem; color: var(--violet); }

.profile-section { margin-top: 1.5rem; text-align: center; }

.profile-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.profile-section-title .material-symbols-outlined { font-size: 1.125rem; color: var(--violet); }

.profile-activity-list { display: flex; flex-direction: column; gap: 0.625rem; }

.profile-activity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.profile-activity-item .material-symbols-outlined {
  color: var(--violet);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.profile-activity-item p { font-size: 0.8125rem; margin-bottom: 0.125rem; }

.profile-actions { margin-top: 1.5rem; }

/* --- Site geneli metin ortalama --- */
.page-wrap,
.page-hero,
.app-page,
.modal-box,
.modal-scroll-box,
.modal-login-box,
.login-form,
.field-label,
.field-input,
.confession-form textarea,
.confession-card,
.confession-card p,
.video-card-info,
.section-title,
.expert-card,
.chat-panel,
.chat-msg,
.bot-info,
.group-card,
.podcast-card,
.podcast-info,
.podcast-featured-inner,
.shop-card,
.coin-wallet-inner,
.admin-banner,
.announcement-bar {
  text-align: center;
}

.page-hero,
.page-info-box {
  text-align: center;
}

.page-info-box {
  flex-direction: column;
  align-items: center;
}

.page-toolbar-split {
  justify-content: center;
}

/* Yatay taşan şeritte center ilk pill’i (Tümü) keser — sola hizala */
.category-pills {
  justify-content: flex-start;
}

.section-title,
.expert-card,
.confession-meta,
.checkbox-row {
  justify-content: center;
}

.checkbox-row {
  align-items: center;
}

.group-card,
.podcast-card {
  flex-wrap: wrap;
  justify-content: center;
}

.group-card > div,
.podcast-info,
.expert-card > div {
  text-align: center;
  flex: 1;
  min-width: min(100%, 12rem);
}

.chat-msg {
  flex-direction: column;
  align-items: center;
}

.chat-msg > div {
  text-align: center;
}

.video-card-info {
  text-align: center;
}

.profile-quick-nav {
  justify-items: center;
}

.poll-bars,
.poll-row {
  text-align: center;
}

.poll-label-row {
  justify-content: center;
  gap: 1rem;
}

.profile-header-info {
  text-align: center;
  width: 100%;
}

.content-card,
.content-card h3,
.content-card p {
  text-align: center;
}

.modal-scroll-box {
  padding-bottom: 1rem;
}

.guide-modal-body,
#admin-preview-body {
  text-align: center;
}

#admin-preview-body p,
#admin-preview-body .guide-tips {
  text-align: center;
}

/* --- DM medya ekleri --- */
.dm-attach-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.dm-attach-menu[hidden] {
  display: none !important;
}

.dm-attach-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.dm-attach-option .material-symbols-outlined { font-size: 1.125rem; color: var(--violet); }
.dm-attach-option:hover { border-color: var(--violet); background: rgba(var(--accent-rgb), 0.06); }

.dm-attach-toggle,
.dm-voice-record-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--violet);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dm-voice-record-btn.is-recording {
  background: #ef4444;
  color: #fff;
  animation: dm-rec-pulse 1s ease infinite;
}

@keyframes dm-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.dm-msg.is-media .dm-msg-bubble { max-width: none; width: 100%; padding: 0.55rem 0.65rem; }
.dm-media-image { margin: 0; position: relative; }
.dm-media-image img,
.dm-media-open img {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  border-radius: 0.625rem;
}
.dm-viewonce-pick-hint {
  margin: 0 0 0.35rem;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  color: var(--muted, #888);
  grid-column: 1 / -1;
}
.dm-viewonce-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 9.5rem;
  padding: 1.1rem 1rem;
  border: none;
  border-radius: 0.625rem;
  background: linear-gradient(145deg, rgba(88, 28, 135, 0.92), rgba(157, 23, 77, 0.88));
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.dm-viewonce-lock .material-symbols-outlined {
  font-size: 2rem;
  opacity: 0.95;
}
.dm-viewonce-lock-label {
  font-weight: 650;
  font-size: 0.9rem;
}
.dm-viewonce-lock-hint {
  font-size: 0.72rem;
  opacity: 0.8;
}
.dm-viewonce-burned {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.08);
  color: var(--muted, #888);
  font-size: 0.85rem;
}
.dm-msg.is-self .dm-viewonce-burned {
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  opacity: 0.9;
}
.dm-viewonce-burned .material-symbols-outlined {
  font-size: 1.15rem;
}
.dm-viewonce-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(15, 15, 20, 0.78);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.dm-viewonce-badge.is-opened {
  min-width: auto;
  padding: 0 0.45rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.9);
}
.dm-media-open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  position: relative;
  border-radius: 0.625rem;
  overflow: hidden;
}
.dm-media-expand-hint,
.dm-media-play-overlay {
  position: absolute;
  inset: auto 0.4rem 0.4rem auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}
.dm-media-play-overlay {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.35);
}
.dm-media-play-overlay .material-symbols-outlined {
  font-size: 2.75rem;
}
.dm-media-video video,
.dm-media-open-video video {
  display: block;
  width: 100%;
  max-height: 14rem;
  border-radius: 0.625rem;
  background: #000;
  pointer-events: none;
}

.dm-media-voice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 9rem;
}
.dm-media-voice.is-playing .dm-voice-wave span {
  animation-play-state: running;
}
.dm-voice-play {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--violet);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-voice-play.is-playing {
  background: var(--violet);
  color: #fff;
}
.dm-voice-expand {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-voice-expand .material-symbols-outlined { font-size: 1rem; }
.dm-voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 1.25rem;
}
.dm-voice-wave span {
  width: 3px;
  height: 40%;
  border-radius: 2px;
  background: var(--violet);
  animation: dm-wave 0.9s ease-in-out infinite;
  animation-play-state: paused;
}
.dm-voice-wave span:nth-child(2) { animation-delay: 0.1s; height: 70%; }
.dm-voice-wave span:nth-child(3) { animation-delay: 0.2s; height: 55%; }
.dm-voice-wave span:nth-child(4) { animation-delay: 0.15s; height: 80%; }
.dm-voice-wave span:nth-child(5) { animation-delay: 0.25s; height: 45%; }
@keyframes dm-wave {
  0%, 100% { transform: scaleY(0.6); }
  50% { transform: scaleY(1.2); }
}
.dm-voice-dur { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.dm-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.dm-media-lightbox[hidden] { display: none !important; }
.dm-media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(10, 8, 18, 0.82);
  cursor: pointer;
}
.dm-media-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(42rem, 100%);
  max-height: min(92dvh, 52rem);
  display: flex;
  flex-direction: column;
  background: #111;
  color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.dm-media-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
}
.dm-media-lightbox-head .icon-btn { color: #fff; }
.dm-media-lightbox-stage {
  flex: 1;
  min-height: 12rem;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  overflow: auto;
}
.dm-media-lightbox-stage img,
.dm-media-lightbox-stage video {
  max-width: 100%;
  max-height: min(78dvh, 40rem);
  border-radius: 0.5rem;
  background: #000;
}
.dm-media-lightbox-audio-wrap {
  padding: 0 1rem 1rem;
}
.dm-media-lightbox-audio-wrap audio {
  width: 100%;
}
.dm-media-lightbox-audio-visual {
  text-align: center;
  padding: 2rem 1rem;
  color: rgba(255, 255, 255, 0.9);
}
.dm-media-lightbox-audio-visual .material-symbols-outlined {
  font-size: 3rem;
  color: #CDABF5;
}
body.dm-media-lightbox-open {
  overflow: hidden;
}

.dm-media-location {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
  padding: 0.25rem;
}
.dm-media-location .material-symbols-outlined {
  font-size: 1.75rem;
  color: #ef4444;
}
.dm-media-location strong { display: block; font-size: 0.875rem; }

/* --- Arama PiP (arka planda gezinme) --- */
.dm-call-pip {
  position: fixed;
  right: 0.75rem;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: min(20rem, calc(100vw - 1.5rem));
}

.dm-call-pip-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #2A0A5C, #2A0A5C);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dm-call-pip-visual {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.dm-call-pip-avatar {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.dm-call-pip-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(236, 72, 153, 0.25);
  animation: dm-call-ring 1.4s ease-out infinite;
}

.dm-call-pip-visual.is-connected .dm-call-pip-pulse {
  animation: none;
  background: rgba(34, 197, 94, 0.2);
}

@keyframes dm-call-ring {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

.dm-call-pip-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.dm-call-pip-info strong {
  display: block;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-call-pip-info span {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
}

#dm-call-pip-timer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dm-call-pip-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.dm-call-pip-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dm-call-pip-btn .material-symbols-outlined { font-size: 1.125rem; }
.dm-call-pip-btn.is-active { background: rgba(239, 68, 68, 0.35); }
.dm-call-pip-end { background: #ef4444; }

.modal-dm-call-expand.is-open {
  pointer-events: auto;
  background: #0b1220;
  z-index: 10050;
}

.modal-dm-call-expand.is-open .modal-backdrop {
  pointer-events: auto;
  background: transparent;
}

.modal-dm-call-expand.is-open .modal-box,
.modal-dm-call-expand.is-open .dm-call-box {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.modal-dm-call-expand.is-incoming-call .dm-call-incoming-actions:not([hidden]) {
  display: flex !important;
}

/* --- Profil ruh hali teması --- */
.profile-fb {
  --profile-accent: #752FEE;
}

.profile-mood-badge {
  display: inline-block;
  margin: 0.25rem auto 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--profile-accent) 14%, transparent);
  color: var(--profile-accent);
}

.profile-status-line { margin-top: 0.5rem; margin-bottom: 0.15rem; }

.profile-fb-avatar.profile-mood-ring {
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--profile-accent);
}

.profile-tab.active {
  color: var(--profile-accent);
  border-color: var(--profile-accent);
}

.profile-fb-actions .btn-primary {
  background: var(--profile-accent);
  border-color: var(--profile-accent);
}

.profile-mood-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mood-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
}

.mood-pick::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--mood-preview);
}

.mood-pick.active {
  border-color: var(--profile-accent, var(--violet));
  box-shadow: 0 0 0 1px var(--profile-accent, var(--violet));
}

.mood-pick-emoji { font-size: 1.125rem; }

@media (min-width: 40rem) {
  .profile-mood-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-call-pip { right: 1rem; bottom: 1rem; }
}

/* Keşfet hub panelleri */
.hub-panel-intro {
  margin: 0 0 0.55rem;
  padding: 0.1rem 0 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 80%, transparent);
}
.hub-panel-intro h2 {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  margin: 0 0 0.15rem;
}
.hub-panel-intro .material-symbols-outlined { font-size: 1.1rem; }
.hub-panel-intro .muted.small {
  font-size: 0.7rem !important;
  margin: 0;
  line-height: 1.3;
}
.content-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.4rem;
  background: color-mix(in srgb, var(--accent, #c4a484) 12%, transparent);
}
.content-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.content-card-thumb-media {
  display: grid;
  place-items: center;
}
.content-card-thumb-media .material-symbols-outlined {
  font-size: 2.25rem;
  opacity: 0.75;
}
.hub-article-media {
  margin: 0 0 1rem;
  border-radius: 0.85rem;
  overflow: hidden;
  background: #0f0f12;
}
.hub-article-media img,
.hub-article-media video {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
  background: #0f0f12;
}
.hub-article-media-yt {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.hub-article-media-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.discover-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0.3rem;
  grid-template-columns: none !important;
}
.discover-tabs::-webkit-scrollbar { display: none; }
.discover-tabs .connect-tab {
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* ——— Geri bildirim FAB kaldırıldı ——— */
.kozamia-feedback-fab,
#kozamia-feedback-fab {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.kozamia-feedback-box { max-width: 26rem; }
.kozamia-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.kozamia-feedback-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.kozamia-feedback-form input,
.kozamia-feedback-form select,
.kozamia-feedback-form textarea {
  border: 1px solid #e4e4e7;
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-weight: 500;
}
.kozamia-feedback-form textarea { resize: vertical; min-height: 6rem; }
@media (max-width: 640px) {
  .kozamia-feedback-fab {
    bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 4.25rem));
  }
}

/* Konumumu kullan — Google */
.pe-location-row,
.share-studio-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pe-location-inputs {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}
.pe-location-inputs input {
  flex: 1 1 10rem;
  min-width: 0;
}
.pe-location-inputs .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.pe-location-inputs .material-symbols-outlined {
  font-size: 1.05rem;
}

/* —— Gruplar / oda içi — sıkı + taşma önle —— */
#connect-panel-community {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}
#connect-panel-community .section-subtitle {
  font-size: 0.9rem;
  margin: 0 0 0.45rem;
  gap: 0.3rem;
}
#connect-panel-community .community-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.15rem 0 0.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 55%, rgba(255,255,255,0));
}
#connect-panel-community .community-sort-nav {
  display: flex;
  flex: 1;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
#connect-panel-community .community-sort-nav::-webkit-scrollbar { display: none; }
#connect-panel-community .community-sort-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(106, 61, 138, 0.14);
  background: #fff;
  color: #7a6288;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
#connect-panel-community .community-sort-btn.active {
  background: #6a3d8a;
  border-color: #6a3d8a;
  color: #fff;
}
#connect-panel-community .community-create-icon-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: #6a3d8a;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
#connect-panel-community .community-create-icon-btn .material-symbols-outlined { font-size: 1.15rem; }
#connect-panel-community .community-scope-nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
  flex-wrap: wrap;
}
#connect-panel-community .community-scope-btn {
  border: none;
  background: transparent;
  color: #9a8aa0;
  font-size: 0.7rem;
  font-weight: 650;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
}
#connect-panel-community .community-scope-btn.active {
  color: #6a3d8a;
  background: rgba(106, 61, 138, 0.08);
}
#connect-panel-community .community-scope-meta {
  margin-left: auto;
  font-size: 0.65rem;
}
#connect-panel-community .group-list { gap: 0.2rem; }
#connect-panel-community .group-card {
  gap: 0.45rem;
  padding: 0.38rem 0.45rem;
  border-radius: 0.55rem;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#connect-panel-community .group-emoji {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.5rem;
  font-size: 1rem;
}
#connect-panel-community .group-card h3 {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#connect-panel-community .group-card-meta {
  margin: 0.08rem 0 0;
  font-size: 0.62rem;
  color: #9a8aa0;
  display: flex;
  gap: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
}
#connect-panel-community .group-card-desc,
#connect-panel-community .group-card-preview {
  display: none !important;
}
#connect-panel-community .group-card-body { overflow: hidden; min-width: 0; }
#connect-panel-community .group-card-body .muted.small {
  font-size: 0.62rem !important;
  margin: 0.08rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#connect-panel-community .group-card-desc {
  font-size: 0.64rem;
  margin: 0.12rem 0 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#connect-panel-community .group-card-preview {
  font-size: 0.62rem;
  padding: 0.18rem 0.28rem;
  margin: 0.15rem 0 0;
  border-radius: 0.32rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#connect-panel-community .group-card-topics {
  flex-wrap: nowrap;
  gap: 0.15rem;
  margin-top: 0.2rem;
  overflow: hidden;
}
#connect-panel-community .group-card-topics .pill-sm {
  padding: 0.1rem 0.28rem;
  font-size: 0.55rem;
  max-width: 4.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#connect-panel-community .group-card-actions { gap: 0.15rem; }
#connect-panel-community .group-joined-badge { font-size: 0.58rem; }
#connect-panel-community .group-open-icon { font-size: 1.05rem; }
#connect-panel-community .group-card-actions .btn-sm {
  min-height: 1.45rem;
  padding: 0.16rem 0.35rem;
  font-size: 0.6rem;
}
#connect-panel-community .community-stats-bar {
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
#connect-panel-community .community-stat {
  padding: 0.35rem 0.25rem;
  border-radius: 0.5rem;
  box-shadow: none;
}
#connect-panel-community .community-stat strong { font-size: 0.9rem; }
#connect-panel-community .community-stat span { font-size: 0.58rem; }
#connect-panel-community .community-local-bar {
  gap: 0.3rem;
  margin-bottom: 0.55rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
#connect-panel-community .community-local-bar .pill,
#connect-panel-community .community-local-bar .btn {
  flex: 0 0 auto;
  min-height: 1.65rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  white-space: nowrap;
}
#connect-panel-community .community-back-btn {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  margin: 0;
  font-size: 0;
  flex-shrink: 0;
  order: 0;
}
#connect-panel-community .community-back-btn .material-symbols-outlined {
  font-size: 1.05rem;
}
#connect-panel-community .community-detail-header {
  padding: 0.5rem 0.55rem;
  margin-bottom: 0.4rem;
  border-radius: 0.6rem;
  box-shadow: none;
  overflow: hidden;
  min-width: 0;
}
#connect-panel-community .community-detail-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
  min-width: 0;
}
#connect-panel-community .community-detail-emoji {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  order: 1;
  flex-shrink: 0;
}
#connect-panel-community .community-detail-title {
  order: 2;
  min-width: 0;
  flex: 1 1 auto;
}
#connect-panel-community .community-detail-hero h2,
#connect-panel-community .community-detail-title h2 {
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.25;
}
#connect-panel-community .community-detail-hero .muted.small,
#connect-panel-community .community-detail-title .muted.small {
  font-size: 0.62rem !important;
  margin: 0.08rem 0 0;
}
#connect-panel-community .community-detail-desc {
  font-size: 0.7rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#connect-panel-community .community-topic-pills {
  gap: 0.2rem;
  margin-bottom: 0.35rem;
}
#connect-panel-community .community-topic-pills .pill {
  padding: 0.12rem 0.35rem !important;
  font-size: 0.58rem !important;
  min-height: 1.35rem !important;
}
#connect-panel-community .community-detail-actions { gap: 0.35rem; }
#connect-panel-community .community-detail-actions .btn {
  min-height: 1.7rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
}
#connect-panel-community .community-live-badge { font-size: 0.65rem; }
#connect-panel-community .community-tabs {
  gap: 0.1rem;
  margin-bottom: 0.4rem;
}
#connect-panel-community .community-tab {
  padding: 0.4rem 0.2rem;
  font-size: 0.7rem;
  border-bottom-width: 2px;
  min-width: 0;
}
#connect-panel-community .community-chat-panel {
  border-radius: 0.6rem;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#connect-panel-community .community-hybrid-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
#connect-panel-community .community-hybrid-panel .community-chat-toolbar {
  padding: 0.2rem 0.4rem 0;
  margin-bottom: 0.15rem;
  flex: 0 0 auto;
}
#connect-panel-community .community-hybrid-panel .community-chat-toolbar .btn-sm {
  min-height: 1.55rem;
  padding: 0.18rem 0.4rem;
  font-size: 0.65rem;
}
#connect-panel-community .community-chat-messages {
  padding: 0.45rem 0.5rem;
  gap: 0.4rem;
  max-height: min(14rem, 34dvh);
  overflow-x: hidden;
  overflow-y: auto;
}
#connect-panel-community .community-hybrid-panel .community-chat-messages {
  flex: 1 1 auto;
  min-height: 5.5rem;
  max-height: min(13rem, 32dvh);
}
#connect-panel-community .community-chat-msg {
  gap: 0.4rem;
  min-width: 0;
}
#connect-panel-community .community-chat-msg.is-bot {
  padding: 0.35rem;
  border-radius: 0.5rem;
  margin: 0;
}
#connect-panel-community .community-chat-avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.85rem;
}
#connect-panel-community .community-chat-name { font-size: 0.68rem; }
#connect-panel-community .community-chat-msg p {
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 0.1rem 0 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#connect-panel-community .community-chat-meta {
  font-size: 0.58rem;
  gap: 0.35rem;
}
#connect-panel-community .community-chat-form {
  gap: 0.3rem;
  padding: 0.45rem 0.5rem;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  min-height: 2.85rem;
  align-items: center;
  background: var(--bg, #fafafa);
  border-top: 1px solid var(--border);
  z-index: 8;
}
#connect-panel-community .community-chat-form input,
#connect-panel-community .community-chat-form > #community-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.8rem;
  min-height: 2.25rem;
  border-radius: 0.5rem;
}
#connect-panel-community .community-chat-form .btn,
#connect-panel-community .community-chat-form > button[type="submit"] {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
#connect-panel-community .community-voice-inline {
  gap: 0.25rem;
  margin: 0;
  padding: 0.28rem 0.4rem;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(135deg, rgba(117, 47, 238, 0.14), rgba(236, 72, 153, 0.08));
}
#connect-panel-community .community-voice-inline:not(.is-live) {
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.28rem 0.4rem;
}
#connect-panel-community .community-voice-inline-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
#connect-panel-community .community-voice-inline-copy strong {
  font-size: 0.68rem;
  gap: 0.15rem;
}
#connect-panel-community .community-voice-inline-copy .material-symbols-outlined {
  font-size: 0.85rem;
}
#connect-panel-community .community-voice-inline-copy p {
  margin: 0;
  font-size: 0.55rem !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#connect-panel-community .community-voice-inline-actions {
  flex-shrink: 0;
  gap: 0.15rem;
}
#connect-panel-community .community-voice-inline-actions .btn {
  min-height: 1.4rem !important;
  padding: 0.12rem 0.35rem !important;
  font-size: 0.6rem !important;
  white-space: nowrap;
  border-radius: 0.4rem !important;
}
#connect-panel-community .community-voice-inline-actions .btn .material-symbols-outlined {
  font-size: 0.9rem !important;
}
#connect-panel-community .community-voice-inline.is-live .community-voice-inline-actions .btn {
  width: 1.55rem !important;
  min-width: 1.55rem !important;
  min-height: 1.4rem !important;
  padding: 0.1rem !important;
}
#connect-panel-community .community-voice-inline.is-live .community-voice-btn-label {
  display: none !important;
}
#connect-panel-community .community-voice-peers {
  gap: 0.18rem;
  max-width: 100%;
  max-height: 1.7rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
#connect-panel-community .community-voice-peer {
  width: 1.4rem;
  height: 1.4rem;
}
#connect-panel-community .community-voice-peer-av {
  width: 100%;
  height: 100%;
  font-size: 0.65rem;
}
#connect-panel-community .community-voice-peer-mic {
  font-size: 0.7rem !important;
}
#connect-panel-community .community-members-grid {
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
#connect-panel-community .community-member-card {
  padding: 0.45rem 0.4rem;
  border-radius: 0.55rem;
  gap: 0.2rem;
}
#connect-panel-community .community-member-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
#connect-panel-community .community-member-card strong { font-size: 0.72rem; }
#connect-panel-community .community-announce-card {
  padding: 0.5rem 0.55rem;
  border-radius: 0.55rem;
  margin-bottom: 0.4rem;
}
#connect-panel-community .community-announce-card h3 {
  font-size: 0.8rem;
  margin: 0 0 0.25rem;
}
#connect-panel-community .community-announce-card p,
#connect-panel-community .community-rules-card li {
  font-size: 0.7rem;
  line-height: 1.35;
}
#connect-panel-community .flow-guardians-section { margin-top: 0.75rem; }
#connect-panel-community .flow-guardians-intro {
  font-size: 0.68rem !important;
  margin: 0 0 0.4rem;
}
@media (max-width: 48rem) {
  #connect-panel-community .community-hybrid-panel {
    min-height: min(52dvh, 24rem);
  }
  #connect-panel-community .community-voice-inline:not(.is-live) {
    flex-direction: column;
    align-items: stretch;
  }
  #connect-panel-community .community-voice-inline-actions { width: 100%; }
  #connect-panel-community .community-voice-inline-actions .btn { flex: 1 1 auto; }

  /* Ses açıkken hero kartı küçült — ani collapse yerine yumuşak sıkıştır */
  #page-connect.is-group-voice-on #connect-panel-community .community-detail-header {
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.25rem;
  }
  #page-connect.is-group-voice-on #connect-panel-community .community-detail-desc,
  #page-connect.is-group-voice-on #connect-panel-community .community-topic-pills {
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
  }
  #page-connect.is-group-voice-on #connect-panel-community .community-detail-actions .community-live-badge {
    display: none;
  }
  #page-connect.is-group-voice-on #connect-panel-community .community-hybrid-panel {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #page-connect.is-group-voice-on #connect-panel-community .community-hybrid-panel .community-chat-messages {
    max-height: none;
    min-height: 4.5rem;
    flex: 1 1 auto;
  }
  #page-connect.is-group-voice-on #connect-panel-community .community-chat-form {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    z-index: 10;
    min-height: 3rem;
    padding-bottom: 0.45rem;
  }
  #page-connect.is-group-voice-on #connect-panel-community .community-voice-inline.is-live {
    position: sticky;
    top: 0;
    z-index: 6;
    box-shadow: 0 4px 12px rgba(30, 27, 46, 0.08);
    max-height: min(28dvh, 9.5rem);
    overflow-y: auto;
  }
}

/* Keşfet içerik okuyucu — kategori içi yukarı/aşağı */
.discover-article-sheet {
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
.discover-article-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  flex: 0 0 auto;
}
.discover-article-nav[hidden] {
  display: none !important;
}
.discover-article-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  background: var(--bg-card, #fff);
  color: var(--text, #0f172a);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  min-height: 2.1rem;
}
.discover-article-nav-btn .material-symbols-outlined {
  font-size: 1.1rem;
}
.discover-article-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.discover-article-nav-hint {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.68rem !important;
}