/* Bağlan mockup (connectv1) — header, tabs, cards, live, DM, groups, dreams */

html.is-mobile-app #page-connect.connect-logged-in .connect-hub-header-web,
html.kozamia-app-shell #page-connect.connect-logged-in .connect-hub-header-web,
html.connect-mockup-on #page-connect.connect-logged-in .connect-hub-header-web {
  display: none !important;
}

html.is-mobile-app #page-connect.connect-logged-in .connect-app-top,
html.kozamia-app-shell #page-connect.connect-logged-in .connect-app-top,
html.connect-mockup-on #page-connect.connect-logged-in .connect-app-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 0 0.25rem;
}

html.is-mobile-app .connect-app-brand-row,
html.kozamia-app-shell .connect-app-brand-row,
html.connect-mockup-on .connect-app-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
html.is-mobile-app .connect-back-x,
html.kozamia-app-shell .connect-back-x,
html.connect-mockup-on .connect-back-x {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #6a3d8a;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
html.is-mobile-app .connect-back-x[hidden],
html.kozamia-app-shell .connect-back-x[hidden],
html.connect-mockup-on .connect-back-x[hidden] {
  display: none !important;
}
html.is-mobile-app .connect-back-x .material-symbols-outlined,
html.kozamia-app-shell .connect-back-x .material-symbols-outlined,
html.connect-mockup-on .connect-back-x .material-symbols-outlined {
  font-size: 1.05rem;
}
html.is-mobile-app #page-connect.connect-in-section .connect-app-brand-name,
html.kozamia-app-shell #page-connect.connect-in-section .connect-app-brand-name,
html.connect-mockup-on #page-connect.connect-in-section .connect-app-brand-name,
html.is-mobile-app #page-connect.connect-in-section .connect-app-section-name,
html.kozamia-app-shell #page-connect.connect-in-section .connect-app-section-name,
html.connect-mockup-on #page-connect.connect-in-section .connect-app-section-name {
  flex: 0 1 auto;
  text-align: left;
  font-family: var(--kozamia-brand-serif, Georgia, "Times New Roman", serif);
  font-size: 1.2rem !important;
  font-weight: 700;
  color: var(--icon, var(--kozamia-shell-purple, #6a3d8a));
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}
html.is-mobile-app #page-connect.connect-in-section .connect-app-brand-row,
html.kozamia-app-shell #page-connect.connect-in-section .connect-app-brand-row,
html.connect-mockup-on #page-connect.connect-in-section .connect-app-brand-row {
  display: grid !important;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 0.4rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.55rem 0.65rem 0.4rem;
  background: var(--bg-elevated, #fff);
  border-radius: 0;
  box-sizing: border-box;
}
html.is-mobile-app #page-connect.connect-in-section .connect-back-x,
html.kozamia-app-shell #page-connect.connect-in-section .connect-back-x,
html.connect-mockup-on #page-connect.connect-in-section .connect-back-x {
  grid-column: 1;
  justify-self: start;
}
html.is-mobile-app #page-connect.connect-in-section .connect-app-section-name:not([hidden]),
html.kozamia-app-shell #page-connect.connect-in-section .connect-app-section-name:not([hidden]),
html.connect-mockup-on #page-connect.connect-in-section .connect-app-section-name:not([hidden]) {
  grid-column: 2;
  width: 100%;
  text-align: left !important;
  font-size: 1.15rem !important;
  font-weight: 800;
  color: var(--text, #121212) !important;
}
html.is-mobile-app #page-connect .connect-live-go-btn,
html.kozamia-app-shell #page-connect .connect-live-go-btn,
html.connect-mockup-on #page-connect .connect-live-go-btn {
  grid-column: 3;
  justify-self: end;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--kozamia-shell-purple, #6a3d8a);
  color: #fff;
  display: none;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
html.is-mobile-app #page-connect.connect-tab-live .connect-live-go-btn:not([hidden]),
html.kozamia-app-shell #page-connect.connect-tab-live .connect-live-go-btn:not([hidden]),
html.connect-mockup-on #page-connect.connect-tab-live .connect-live-go-btn:not([hidden]) {
  display: grid !important;
}
html.is-mobile-app #page-connect .connect-live-go-btn[hidden],
html.kozamia-app-shell #page-connect .connect-live-go-btn[hidden],
html.connect-mockup-on #page-connect .connect-live-go-btn[hidden] {
  display: none !important;
}
html.is-mobile-app #page-connect .connect-live-go-btn .material-symbols-outlined,
html.kozamia-app-shell #page-connect .connect-live-go-btn .material-symbols-outlined,
html.connect-mockup-on #page-connect .connect-live-go-btn .material-symbols-outlined {
  font-size: 1.05rem;
  color: #fff !important;
}
html.is-mobile-app #page-connect .connect-tabs-sticky.is-explore-hidden,
html.kozamia-app-shell #page-connect .connect-tabs-sticky.is-explore-hidden,
html.connect-mockup-on #page-connect .connect-tabs-sticky.is-explore-hidden {
  display: none !important;
}

html.is-mobile-app .connect-cat-grid,
html.kozamia-app-shell .connect-cat-grid,
html.connect-mockup-on .connect-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0.15rem 0 0.75rem;
}
html.is-mobile-app .connect-cat-card,
html.kozamia-app-shell .connect-cat-card,
html.connect-mockup-on .connect-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  min-height: 7.2rem;
  padding: 0.85rem 0.5rem 1.05rem;
  border: 0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(45, 25, 60, 0.06);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
html.is-mobile-app .connect-cat-icon,
html.kozamia-app-shell .connect-cat-icon,
html.connect-mockup-on .connect-cat-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--icon, #5c5268) 88%, #1a1420);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
html.is-mobile-app .connect-cat-icon .material-symbols-outlined,
html.kozamia-app-shell .connect-cat-icon .material-symbols-outlined,
html.connect-mockup-on .connect-cat-icon .material-symbols-outlined {
  font-size: 1.1rem;
  color: #fff;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}
html.is-mobile-app .connect-cat-card strong,
html.kozamia-app-shell .connect-cat-card strong,
html.connect-mockup-on .connect-cat-card strong {
  font-family: var(--kozamia-brand-serif, Georgia, "Times New Roman", serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #121212);
}
html.is-mobile-app .connect-cat-desc,
html.kozamia-app-shell .connect-cat-desc,
html.connect-mockup-on .connect-cat-desc {
  font-size: 0.64rem;
  color: #1f1f1f;
  line-height: 1.35;
  max-width: 8.5rem;
}
html.is-mobile-app .connect-cat-go,
html.kozamia-app-shell .connect-cat-go,
html.connect-mockup-on .connect-cat-go {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  font-size: 1rem;
  color: var(--icon, var(--kozamia-shell-purple, #6a3d8a));
}

html.is-mobile-app .connect-app-brand-name,
html.kozamia-app-shell .connect-app-brand-name {
  font-family: var(--kozamia-brand-serif, Georgia, "Times New Roman", serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #6a3d8a;
  letter-spacing: -0.02em;
}
html.is-mobile-app .connect-app-title-row,
html.kozamia-app-shell .connect-app-title-row,
html.connect-mockup-on .connect-app-title-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
html.is-mobile-app .connect-app-title-row[hidden],
html.kozamia-app-shell .connect-app-title-row[hidden],
html.connect-mockup-on .connect-app-title-row[hidden],
html.is-mobile-app #page-connect.connect-in-section:not(.connect-tab-live):not(.connect-tab-messages) .connect-app-title-row,
html.kozamia-app-shell #page-connect.connect-in-section:not(.connect-tab-live):not(.connect-tab-messages) .connect-app-title-row,
html.connect-mockup-on #page-connect.connect-in-section:not(.connect-tab-live):not(.connect-tab-messages) .connect-app-title-row {
  display: none !important;
}
html.is-mobile-app .connect-app-title,
html.kozamia-app-shell .connect-app-title {
  margin: 0;
  font-family: var(--kozamia-brand-serif, Georgia, "Times New Roman", serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: #6a3d8a;
  line-height: 1.12;
}
html.is-mobile-app .connect-app-sub,
html.kozamia-app-shell .connect-app-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #9a8aa0;
  line-height: 1.4;
}

html.is-mobile-app #page-connect .connect-tabs-sticky,
html.kozamia-app-shell #page-connect .connect-tabs-sticky {
  margin: 0.25rem 0 0.7rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 0.1rem 0 0;
}
html.is-mobile-app #page-connect .hub-tabs-chrome,
html.kozamia-app-shell #page-connect .hub-tabs-chrome {
  display: none !important;
}
html.is-mobile-app #page-connect .connect-tabs,
html.kozamia-app-shell #page-connect .connect-tabs {
  display: flex;
  gap: 0.1rem;
  overflow-x: auto;
  border-bottom: 1px solid rgba(106, 61, 138, 0.12);
  scrollbar-width: none;
  padding: 0;
  background: transparent !important;
}
html.is-mobile-app #page-connect .connect-tabs::-webkit-scrollbar,
html.kozamia-app-shell #page-connect .connect-tabs::-webkit-scrollbar { display: none; }
html.is-mobile-app #page-connect .connect-tab,
html.kozamia-app-shell #page-connect .connect-tab {
  flex: 0 0 auto;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.55rem 0.7rem 0.65rem !important;
  color: #a394ab !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  gap: 0.3rem;
  position: relative;
}
html.is-mobile-app #page-connect .connect-tab .material-symbols-outlined,
html.kozamia-app-shell #page-connect .connect-tab .material-symbols-outlined {
  font-size: 1.05rem;
}
html.is-mobile-app #page-connect .connect-tab.active,
html.kozamia-app-shell #page-connect .connect-tab.active {
  color: #6a3d8a !important;
}
html.is-mobile-app #page-connect .connect-tab.active::after,
html.kozamia-app-shell #page-connect .connect-tab.active::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #6a3d8a;
}
html.is-mobile-app #page-connect .connect-tab-badge,
html.kozamia-app-shell #page-connect .connect-tab-badge {
  background: #6a3d8a !important;
  color: #fff !important;
  min-width: 1.1rem;
  height: 1.1rem;
  font-size: 0.65rem;
}

html.is-mobile-app body.logged-in #page-connect.active:not(.is-live-stage-open),
html.kozamia-app-shell body.logged-in #page-connect.active:not(.is-live-stage-open) {
  background: var(--bg-elevated, #fff) !important;
}
html.is-mobile-app:has(#page-connect.active):has(body.logged-in):not(:has(body.is-live-stage-open)),
html.kozamia-app-shell:has(#page-connect.active):has(body.logged-in):not(:has(body.is-live-stage-open)),
html.is-mobile-app:has(#page-connect.active):has(body.logged-in):not(:has(body.is-live-stage-open)) body,
html.kozamia-app-shell:has(#page-connect.active):has(body.logged-in):not(:has(body.is-live-stage-open)) body {
  background: var(--bg, var(--kozamia-shell-cream, #fdf8f5)) !important;
}
html.is-mobile-app #page-connect.connect-logged-in .connect-hub,
html.kozamia-app-shell #page-connect.connect-logged-in .connect-hub {
  background: var(--bg-elevated, #fff);
}

html.is-mobile-app #page-connect.connect-logged-in .connect-confessions-head-web,
html.is-mobile-app #page-connect.connect-logged-in .listen-hub-hero,
html.is-mobile-app #page-connect.connect-logged-in .dream-hero-pro,
html.is-mobile-app #page-connect.connect-logged-in .community-stats-bar,
html.is-mobile-app #page-connect.connect-logged-in .community-local-bar,
html.is-mobile-app #page-connect.connect-logged-in .community-groups-heading,
html.is-mobile-app #page-connect.connect-logged-in .community-welcome-banner,
html.is-mobile-app #page-connect.connect-logged-in .flow-guardians-section,
html.is-mobile-app #page-connect.connect-logged-in .live-list-head h2,
html.is-mobile-app #page-connect.connect-logged-in .live-list-head .muted,
html.kozamia-app-shell #page-connect.connect-logged-in .live-list-head h2,
html.kozamia-app-shell #page-connect.connect-logged-in .live-list-head .muted,
html.connect-mockup-on #page-connect.connect-logged-in .live-list-head h2,
html.connect-mockup-on #page-connect.connect-logged-in .live-list-head .muted,
html.connect-mockup-on #page-connect.connect-in-section .live-list-head > div:first-child {
  display: none !important;
}
html.kozamia-app-shell #page-connect.connect-logged-in .connect-confessions-head-web,
html.kozamia-app-shell #page-connect.connect-logged-in .listen-hub-hero,
html.kozamia-app-shell #page-connect.connect-logged-in .dream-hero-pro,
html.kozamia-app-shell #page-connect.connect-logged-in .community-stats-bar,
html.kozamia-app-shell #page-connect.connect-logged-in .community-local-bar,
html.kozamia-app-shell #page-connect.connect-logged-in .community-groups-heading,
html.kozamia-app-shell #page-connect.connect-logged-in .community-welcome-banner,
html.kozamia-app-shell #page-connect.connect-logged-in .flow-guardians-section {
  display: none !important;
}

.community-welcome-banner { display: none; }
html.is-mobile-app .community-welcome-banner,
html.kozamia-app-shell .community-welcome-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin: 0 0 0.85rem;
  border-radius: 1.15rem;
  background: linear-gradient(135deg, #f3eaf8 0%, #ebe0f4 100%);
  border: 1px solid rgba(106, 61, 138, 0.1);
}
html.is-mobile-app .community-welcome-icon,
html.kozamia-app-shell .community-welcome-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #6a3d8a;
  color: #fff;
  display: grid;
  place-items: center;
}
html.is-mobile-app .community-welcome-copy,
html.kozamia-app-shell .community-welcome-copy {
  flex: 1 1 auto;
  min-width: 0;
}
html.is-mobile-app .community-welcome-copy strong,
html.kozamia-app-shell .community-welcome-copy strong {
  display: block;
  font-size: 0.88rem;
  color: #4a2d62;
  margin-bottom: 0.2rem;
}
html.is-mobile-app .community-welcome-copy p,
html.kozamia-app-shell .community-welcome-copy p {
  margin: 0;
  font-size: 0.72rem;
  color: #7a6a86;
  line-height: 1.35;
}
html.is-mobile-app .community-welcome-avs,
html.kozamia-app-shell .community-welcome-avs {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
html.is-mobile-app .community-welcome-avs span,
html.kozamia-app-shell .community-welcome-avs span {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 2px solid #f3eaf8;
  margin-left: -0.45rem;
  background: linear-gradient(145deg, #c4a3d8, #6a3d8a);
}
html.is-mobile-app .community-welcome-avs span:first-child,
html.kozamia-app-shell .community-welcome-avs span:first-child { margin-left: 0; }
html.is-mobile-app .community-welcome-avs em,
html.kozamia-app-shell .community-welcome-avs em {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  color: #6a3d8a;
  margin-left: 0.35rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
}

html.is-mobile-app #page-connect .group-list,
html.kozamia-app-shell #page-connect .group-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.2rem 0 0;
}

html.is-mobile-app #page-connect .community-toolbar,
html.kozamia-app-shell #page-connect .community-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 0.15rem 0 0.3rem;
  background: linear-gradient(180deg, rgba(252, 248, 255, 0.97) 55%, rgba(252, 248, 255, 0));
}
html.is-mobile-app #page-connect .community-sort-nav,
html.kozamia-app-shell #page-connect .community-sort-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.is-mobile-app #page-connect .community-sort-nav::-webkit-scrollbar,
html.kozamia-app-shell #page-connect .community-sort-nav::-webkit-scrollbar {
  display: none;
}
html.is-mobile-app #page-connect .community-sort-btn,
html.kozamia-app-shell #page-connect .community-sort-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(106, 61, 138, 0.14);
  background: #fff;
  color: #7a6288;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
html.is-mobile-app #page-connect .community-sort-btn.active,
html.kozamia-app-shell #page-connect .community-sort-btn.active {
  background: #6a3d8a;
  border-color: #6a3d8a;
  color: #fff;
}
html.is-mobile-app #page-connect .community-create-icon-btn,
html.kozamia-app-shell #page-connect .community-create-icon-btn {
  flex: 0 0 auto;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #6a3d8a;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
html.is-mobile-app #page-connect .community-create-icon-btn .material-symbols-outlined,
html.kozamia-app-shell #page-connect .community-create-icon-btn .material-symbols-outlined {
  font-size: 1.1rem;
}
html.is-mobile-app #page-connect .community-scope-nav,
html.kozamia-app-shell #page-connect .community-scope-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.4rem;
  flex-wrap: wrap;
}
html.is-mobile-app #page-connect .community-scope-btn,
html.kozamia-app-shell #page-connect .community-scope-btn {
  border: none;
  background: transparent;
  color: #9a8aa0;
  font-size: 0.68rem;
  font-weight: 650;
  padding: 0.18rem 0.32rem;
  border-radius: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  cursor: pointer;
}
html.is-mobile-app #page-connect .community-scope-btn .material-symbols-outlined,
html.kozamia-app-shell #page-connect .community-scope-btn .material-symbols-outlined {
  font-size: 0.88rem;
}
html.is-mobile-app #page-connect .community-scope-btn.active,
html.kozamia-app-shell #page-connect .community-scope-btn.active {
  color: #6a3d8a;
  background: rgba(106, 61, 138, 0.08);
}
html.is-mobile-app #page-connect .community-scope-meta,
html.kozamia-app-shell #page-connect .community-scope-meta {
  margin-left: auto;
  font-size: 0.62rem;
}

html.is-mobile-app #page-connect .community-groups-head-row,
html.kozamia-app-shell #page-connect .community-groups-head-row {
  display: none !important;
}
html.is-mobile-app #page-connect .community-groups-head-row .community-groups-heading,
html.kozamia-app-shell #page-connect .community-groups-head-row .community-groups-heading {
  margin: 0;
}
html.is-mobile-app #page-connect .community-create-form,
html.kozamia-app-shell #page-connect .community-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  padding: 0.85rem;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid rgba(106, 61, 138, 0.1);
  box-shadow: 0 6px 18px rgba(45, 25, 60, 0.05);
}
html.is-mobile-app #page-connect .community-create-form[hidden],
html.kozamia-app-shell #page-connect .community-create-form[hidden] {
  display: none !important;
}
html.is-mobile-app #page-connect .community-create-form label,
html.kozamia-app-shell #page-connect .community-create-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6a3d8a;
}
html.is-mobile-app #page-connect .community-create-form input,
html.is-mobile-app #page-connect .community-create-form textarea,
html.kozamia-app-shell #page-connect .community-create-form input,
html.kozamia-app-shell #page-connect .community-create-form textarea {
  border: 1px solid rgba(106, 61, 138, 0.16);
  border-radius: 0.7rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--text, #121212);
  background: #fdf8f5;
}
html.is-mobile-app #page-connect .community-create-row,
html.kozamia-app-shell #page-connect .community-create-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.5rem;
}
html.is-mobile-app #page-connect .community-create-actions,
html.kozamia-app-shell #page-connect .community-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}
html.is-mobile-app #page-connect .community-member-actions,
html.kozamia-app-shell #page-connect .community-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}
html.is-mobile-app #page-connect .community-kick-btn,
html.kozamia-app-shell #page-connect .community-kick-btn {
  color: #be123c !important;
  border-color: rgba(190, 18, 60, 0.25) !important;
}
html.is-mobile-app #page-connect .group-card.is-pending,
html.kozamia-app-shell #page-connect .group-card.is-pending {
  border-style: dashed !important;
  opacity: 0.95;
}
html.is-mobile-app #page-connect .group-card,
html.kozamia-app-shell #page-connect .group-card {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.45rem !important;
  border-radius: 0.65rem !important;
  border: 1px solid rgba(106, 61, 138, 0.08) !important;
  box-shadow: none !important;
  background: #fff !important;
  min-height: 0;
}
html.is-mobile-app #page-connect .group-emoji,
html.kozamia-app-shell #page-connect .group-emoji {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  background: #f3eaf8;
}
html.is-mobile-app #page-connect .group-card-body,
html.kozamia-app-shell #page-connect .group-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
html.is-mobile-app #page-connect .group-card-body h3,
html.kozamia-app-shell #page-connect .group-card-body h3 {
  margin: 0;
  font-size: 0.8rem;
  color: #5a356f;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.is-mobile-app #page-connect .group-card-meta,
html.kozamia-app-shell #page-connect .group-card-meta {
  margin: 0.1rem 0 0;
  font-size: 0.62rem;
  color: #9a8aa0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
}
html.is-mobile-app #page-connect .group-card-meta .dot,
html.kozamia-app-shell #page-connect .group-card-meta .dot {
  opacity: 0.55;
}
html.is-mobile-app #page-connect .group-card-desc,
html.is-mobile-app #page-connect .group-card-preview,
html.kozamia-app-shell #page-connect .group-card-desc,
html.kozamia-app-shell #page-connect .group-card-preview {
  display: none !important;
}
html.is-mobile-app #page-connect .group-new-badge,
html.kozamia-app-shell #page-connect .group-new-badge {
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 700;
  color: #fff;
  background: #6a3d8a;
  border-radius: 0.28rem;
  padding: 0.06rem 0.25rem;
  vertical-align: middle;
  margin-left: 0.18rem;
}
html.is-mobile-app #page-connect .group-card-actions,
html.kozamia-app-shell #page-connect .group-card-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}
html.is-mobile-app #page-connect .group-member-count,
html.kozamia-app-shell #page-connect .group-member-count {
  display: none;
}
html.is-mobile-app #page-connect .group-member-count .material-symbols-outlined,
html.kozamia-app-shell #page-connect .group-member-count .material-symbols-outlined {
  font-size: 1rem;
}
html.is-mobile-app #page-connect .group-open-icon,
html.kozamia-app-shell #page-connect .group-open-icon {
  color: #c4b5cb;
  font-size: 1.05rem;
}
html.is-mobile-app #page-connect .group-joined-badge,
html.kozamia-app-shell #page-connect .group-joined-badge {
  font-size: 0.65rem;
  color: #6a3d8a;
  font-weight: 700;
}
html.is-mobile-app #page-connect .community-empty-compact,
html.kozamia-app-shell #page-connect .community-empty-compact {
  margin: 0.75rem 0;
  font-size: 0.8rem;
  text-align: center;
}

html.is-mobile-app #page-connect .confession-list,
html.kozamia-app-shell #page-connect .confession-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
html.is-mobile-app #page-connect .confession-card,
html.kozamia-app-shell #page-connect .confession-card {
  padding: 0.55rem 0.65rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  box-shadow: none !important;
}
html.is-mobile-app #page-connect .confession-card-head,
html.kozamia-app-shell #page-connect .confession-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
html.is-mobile-app #page-connect .confession-avatar,
html.kozamia-app-shell #page-connect .confession-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #6a3d8a;
  color: #fff;
  display: grid;
  place-items: center;
}
html.is-mobile-app #page-connect .confession-avatar .material-symbols-outlined,
html.kozamia-app-shell #page-connect .confession-avatar .material-symbols-outlined {
  font-size: 0.95rem;
}
html.is-mobile-app #page-connect .confession-who,
html.kozamia-app-shell #page-connect .confession-who {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
html.is-mobile-app #page-connect .confession-who strong,
html.kozamia-app-shell #page-connect .confession-who strong {
  color: #6a3d8a;
  font-size: 0.78rem;
  line-height: 1.15;
}
html.is-mobile-app #page-connect .confession-who .muted,
html.kozamia-app-shell #page-connect .confession-who .muted {
  font-size: 0.62rem !important;
  line-height: 1.15;
}
html.is-mobile-app #page-connect .confession-more,
html.kozamia-app-shell #page-connect .confession-more {
  color: #b5a6bb;
}
html.is-mobile-app #page-connect .confession-more .material-symbols-outlined,
html.kozamia-app-shell #page-connect .confession-more .material-symbols-outlined {
  font-size: 1.05rem;
}
html.is-mobile-app #page-connect .confession-body,
html.kozamia-app-shell #page-connect .confession-body {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #3a3340;
}
html.is-mobile-app #page-connect .confession-meta,
html.kozamia-app-shell #page-connect .confession-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
html.is-mobile-app #page-connect .confession-tag,
html.kozamia-app-shell #page-connect .confession-tag {
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #f0e6f6;
  color: #6a3d8a;
  font-size: 0.65rem;
  font-weight: 650;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.is-mobile-app #page-connect .confession-tag.is-empty,
html.kozamia-app-shell #page-connect .confession-tag.is-empty {
  background: transparent;
  padding: 0;
  min-width: 0;
}
html.is-mobile-app #page-connect .confession-heart,
html.kozamia-app-shell #page-connect .confession-heart {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 0;
  background: transparent;
  color: #6a3d8a;
  font-weight: 650;
  font-size: 0.72rem;
  padding: 0.15rem 0.3rem;
}
html.is-mobile-app #page-connect .confession-heart .material-symbols-outlined,
html.kozamia-app-shell #page-connect .confession-heart .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0;
}
html.is-mobile-app #page-connect .confession-heart.is-sent .material-symbols-outlined,
html.kozamia-app-shell #page-connect .confession-heart.is-sent .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}
html.is-mobile-app #page-connect .confession-form,
html.kozamia-app-shell #page-connect .confession-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.55rem;
  border-radius: 0.85rem;
  background: #6a3d8a;
  color: #fff;
}
html.is-mobile-app #page-connect .confession-form textarea,
html.kozamia-app-shell #page-connect .confession-form textarea {
  border: 0;
  border-radius: 0.55rem;
  padding: 0.5rem 0.65rem;
  min-height: 2.4rem;
  resize: vertical;
  font-size: 0.82rem;
}
html.is-mobile-app #page-connect .confession-form-row,
html.kozamia-app-shell #page-connect .confession-form-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
html.is-mobile-app #page-connect .confession-tag-field,
html.kozamia-app-shell #page-connect .confession-tag-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
html.is-mobile-app #page-connect .confession-tag-hash,
html.kozamia-app-shell #page-connect .confession-tag-hash {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 700;
}
html.is-mobile-app #page-connect .confession-tag-field input,
html.kozamia-app-shell #page-connect .confession-tag-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0;
  outline: none;
}
html.is-mobile-app #page-connect .confession-tag-field input::placeholder,
html.kozamia-app-shell #page-connect .confession-tag-field input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
html.is-mobile-app #page-connect .confession-form .btn,
html.kozamia-app-shell #page-connect .confession-form .btn {
  align-self: auto;
  flex: 0 0 auto;
  background: #fff !important;
  color: #6a3d8a !important;
  border: 0 !important;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}

html.is-mobile-app #page-connect .live-room-grid,
html.kozamia-app-shell #page-connect .live-room-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0.7rem;
  grid-template-columns: none !important;
}
html.is-mobile-app #page-connect .live-room-card,
html.kozamia-app-shell #page-connect .live-room-card {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0.9rem !important;
  border-radius: 1.15rem !important;
  background: #fff !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  box-shadow: 0 6px 18px rgba(45, 25, 60, 0.05) !important;
  color: inherit;
}
html.is-mobile-app #page-connect .live-room-host-col,
html.kozamia-app-shell #page-connect .live-room-host-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  width: 3.4rem;
}
html.is-mobile-app #page-connect .live-room-av,
html.kozamia-app-shell #page-connect .live-room-av {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f0e6f6;
  font-size: 1.2rem;
  position: relative;
}
html.is-mobile-app #page-connect .live-room-av img,
html.kozamia-app-shell #page-connect .live-room-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.is-mobile-app #page-connect .live-room-av::after,
html.kozamia-app-shell #page-connect .live-room-av::after,
html.connect-mockup-on #page-connect .live-room-av::after {
  display: none !important;
  content: none !important;
}
html.is-mobile-app #page-connect .live-room-host-name,
html.kozamia-app-shell #page-connect .live-room-host-name,
html.connect-mockup-on #page-connect .live-room-host-name {
  font-family: var(--kozamia-brand-serif, Georgia, serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: #3d2a4a;
  max-width: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  overflow: hidden;
  white-space: nowrap;
}
html.is-mobile-app #page-connect .live-verified,
html.kozamia-app-shell #page-connect .live-verified,
html.connect-mockup-on #page-connect .live-verified {
  font-size: 0.72rem !important;
  color: #6a3d8a;
  font-variation-settings: "FILL" 1;
  flex-shrink: 0;
  line-height: 1;
}
html.is-mobile-app #page-connect .live-room-mid,
html.kozamia-app-shell #page-connect .live-room-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
html.is-mobile-app #page-connect .live-room-live-row,
html.kozamia-app-shell #page-connect .live-room-live-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6a3d8a;
}
html.is-mobile-app #page-connect .live-room-title,
html.kozamia-app-shell #page-connect .live-room-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2f2438;
}
html.is-mobile-app #page-connect .live-room-sub,
html.kozamia-app-shell #page-connect .live-room-sub {
  font-size: 0.72rem;
  color: #9a8aa0;
}
html.is-mobile-app #page-connect .live-cat-pill,
html.kozamia-app-shell #page-connect .live-cat-pill {
  display: inline-flex;
  margin-top: 0.15rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f0e6f6;
  color: #6a3d8a;
  font-size: 0.68rem;
  font-weight: 600;
}
html.is-mobile-app #page-connect .live-room-end,
html.kozamia-app-shell #page-connect .live-room-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
}
html.is-mobile-app #page-connect .live-room-viewers,
html.kozamia-app-shell #page-connect .live-room-viewers {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.7rem;
  color: #9a8aa0;
}
html.is-mobile-app #page-connect .live-room-viewers .material-symbols-outlined,
html.kozamia-app-shell #page-connect .live-room-viewers .material-symbols-outlined {
  font-size: 0.95rem;
}
html.is-mobile-app #page-connect .live-room-join-btn,
html.kozamia-app-shell #page-connect .live-room-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border-radius: 0.65rem;
  background: #6a3d8a;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

html.is-mobile-app #page-connect.connect-tab-messages .dm-toolbar-brand,
html.kozamia-app-shell #page-connect.connect-tab-messages .dm-toolbar-brand,
html.connect-mockup-on #page-connect.connect-tab-messages .dm-toolbar-brand {
  display: none !important;
}

/* X + Sohbetler / Aramalar aynı satırda */
html.is-mobile-app #page-connect.connect-tab-messages:not(.is-dm-chat-open) .connect-app-top,
html.kozamia-app-shell #page-connect.connect-tab-messages:not(.is-dm-chat-open) .connect-app-top,
html.connect-mockup-on #page-connect.connect-tab-messages:not(.is-dm-chat-open) .connect-app-top {
  display: none !important;
}

html.is-mobile-app #page-connect .dm-messages-close,
html.kozamia-app-shell #page-connect .dm-messages-close,
html.connect-mockup-on #page-connect .dm-messages-close {
  display: none;
}

html.is-mobile-app #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-messages-close,
html.kozamia-app-shell #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-messages-close,
html.connect-mockup-on #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-messages-close {
  display: grid !important;
  place-items: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-width: 2.25rem !important;
  max-height: 2.25rem !important;
  flex: 0 0 2.25rem !important;
  border: 0;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  background: rgba(106, 61, 138, 0.1);
  color: var(--mood-heading, #6a3d8a);
  padding: 0 !important;
  cursor: pointer;
  align-self: center !important;
  box-sizing: border-box !important;
}

html.is-mobile-app #page-connect .dm-messages-close .material-symbols-outlined,
html.kozamia-app-shell #page-connect .dm-messages-close .material-symbols-outlined {
  font-size: 1.1rem;
}

html.is-mobile-app #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-toolbar,
html.kozamia-app-shell #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-toolbar,
html.connect-mockup-on #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.45rem 0.55rem 0.35rem !important;
  background: #fff !important;
}

html.is-mobile-app #page-connect .dm-toolbar-tabs,
html.kozamia-app-shell #page-connect .dm-toolbar-tabs,
html.connect-mockup-on #page-connect .dm-toolbar-tabs {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  gap: 0.3rem;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(106, 61, 138, 0.06);
}
html.is-mobile-app #page-connect .dm-toolbar-tab-secondary,
html.kozamia-app-shell #page-connect .dm-toolbar-tab-secondary,
html.connect-mockup-on #page-connect .dm-toolbar-tab-secondary {
  display: none !important;
}
html.is-mobile-app #page-connect .dm-toolbar-tab,
html.kozamia-app-shell #page-connect .dm-toolbar-tab,
html.connect-mockup-on #page-connect .dm-toolbar-tab {
  flex: 1 1 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #6a3d8a !important;
  padding: 0.55rem 0.45rem !important;
  font-size: 0.78rem;
  font-weight: 600;
  gap: 0.35rem;
}
html.is-mobile-app #page-connect .dm-toolbar-tab.active,
html.kozamia-app-shell #page-connect .dm-toolbar-tab.active,
html.connect-mockup-on #page-connect .dm-toolbar-tab.active {
  background: #6a3d8a !important;
  color: #fff !important;
}
html.is-mobile-app #page-connect .dm-calls-view:not([hidden]),
html.kozamia-app-shell #page-connect .dm-calls-view:not([hidden]),
html.connect-mockup-on #page-connect .dm-calls-view:not([hidden]) {
  padding: 0.15rem 0 0.35rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
html.is-mobile-app #page-connect .dm-calls-list,
html.kozamia-app-shell #page-connect .dm-calls-list,
html.connect-mockup-on #page-connect .dm-calls-list {
  flex: 1 1 auto;
  min-height: 0;
}
html.is-mobile-app #page-connect .dm-calls-item,
html.kozamia-app-shell #page-connect .dm-calls-item,
html.connect-mockup-on #page-connect .dm-calls-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid rgba(106, 61, 138, 0.06);
  padding: 0.55rem 0.1rem;
}
html.is-mobile-app #page-connect .dm-calls-main,
html.kozamia-app-shell #page-connect .dm-calls-main,
html.connect-mockup-on #page-connect .dm-calls-main {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.15rem 0.2rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
html.is-mobile-app #page-connect .dm-call-kind-icon,
html.kozamia-app-shell #page-connect .dm-call-kind-icon,
html.connect-mockup-on #page-connect .dm-call-kind-icon {
  font-size: 0.95rem;
  vertical-align: -2px;
  color: #6a3d8a;
}
html.is-mobile-app #page-connect .dm-call-status.is-missed,
html.kozamia-app-shell #page-connect .dm-call-status.is-missed,
html.connect-mockup-on #page-connect .dm-call-status.is-missed {
  color: #c45c7a;
  font-weight: 600;
}
html.is-mobile-app #page-connect .dm-inbox-item-wrap,
html.kozamia-app-shell #page-connect .dm-inbox-item-wrap,
html.connect-mockup-on #page-connect .dm-inbox-item-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(106, 61, 138, 0.06);
  padding: 0.15rem 0;
}
html.is-mobile-app #page-connect .dm-inbox-item,
html.kozamia-app-shell #page-connect .dm-inbox-item,
html.connect-mockup-on #page-connect .dm-inbox-item {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.7rem 0.25rem !important;
}
html.is-mobile-app #page-connect .dm-inbox-item strong,
html.kozamia-app-shell #page-connect .dm-inbox-item strong,
html.connect-mockup-on #page-connect .dm-inbox-item strong {
  color: #2f2438;
  font-weight: 700;
}
html.is-mobile-app #page-connect .dm-unread-dot,
html.kozamia-app-shell #page-connect .dm-unread-dot,
html.connect-mockup-on #page-connect .dm-unread-dot {
  background: #6a3d8a !important;
  color: #fff !important;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
html.is-mobile-app #page-connect .dm-inbox-quick-calls,
html.kozamia-app-shell #page-connect .dm-inbox-quick-calls,
html.connect-mockup-on #page-connect .dm-inbox-quick-calls {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding-right: 0.15rem;
}
html.is-mobile-app #page-connect .dm-inbox-call-btn,
html.kozamia-app-shell #page-connect .dm-inbox-call-btn,
html.connect-mockup-on #page-connect .dm-inbox-call-btn {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  border: 0;
  background: #6a3d8a;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
html.is-mobile-app #page-connect .dm-inbox-call-btn .material-symbols-outlined,
html.kozamia-app-shell #page-connect .dm-inbox-call-btn .material-symbols-outlined,
html.connect-mockup-on #page-connect .dm-inbox-call-btn .material-symbols-outlined {
  font-size: 1.05rem;
}
html.is-mobile-app #page-connect.is-dm-chat-open .dm-inbox-quick-calls,
html.kozamia-app-shell #page-connect.is-dm-chat-open .dm-inbox-quick-calls {
  display: none;
}

/* Canlı / Yaklaşan */
html.is-mobile-app #page-connect .live-mode-tabs,
html.kozamia-app-shell #page-connect .live-mode-tabs,
html.connect-mockup-on #page-connect .live-mode-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0.15rem 0 0.85rem;
  border-bottom: 1px solid rgba(106, 61, 138, 0.12);
}
html.is-mobile-app #page-connect .live-mode-tab,
html.kozamia-app-shell #page-connect .live-mode-tab,
html.connect-mockup-on #page-connect .live-mode-tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: #a394ab;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.65rem 0.5rem 0.7rem;
  position: relative;
  cursor: pointer;
}
html.is-mobile-app #page-connect .live-mode-tab.active,
html.kozamia-app-shell #page-connect .live-mode-tab.active,
html.connect-mockup-on #page-connect .live-mode-tab.active {
  color: #6a3d8a;
}
html.is-mobile-app #page-connect .live-mode-tab.active::after,
html.kozamia-app-shell #page-connect .live-mode-tab.active::after,
html.connect-mockup-on #page-connect .live-mode-tab.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #6a3d8a;
}
html.is-mobile-app #page-connect .live-room-live-row.is-upcoming,
html.kozamia-app-shell #page-connect .live-room-live-row.is-upcoming,
html.connect-mockup-on #page-connect .live-room-live-row.is-upcoming {
  color: #9a6bb5;
  letter-spacing: 0.06em;
}
html.is-mobile-app #page-connect .live-room-join-btn.is-soon,
html.kozamia-app-shell #page-connect .live-room-join-btn.is-soon,
html.connect-mockup-on #page-connect .live-room-join-btn.is-soon {
  background: #f0e6f6;
  color: #6a3d8a;
}
html.is-mobile-app #page-connect .live-upcoming-note,
html.kozamia-app-shell #page-connect .live-upcoming-note,
html.connect-mockup-on #page-connect .live-upcoming-note {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
}
html.is-mobile-app #page-connect .live-list-actions .live-refresh-btn,
html.kozamia-app-shell #page-connect .live-list-actions .live-refresh-btn {
  color: #6a3d8a;
}

html.is-mobile-app #page-connect .dream-compose-pro,
html.kozamia-app-shell #page-connect .dream-compose-pro {
  border-radius: 1.1rem !important;
  background: #6a3d8a !important;
  color: #fff !important;
  border: 0 !important;
  padding: 1rem !important;
}
html.is-mobile-app #page-connect .dream-compose-pro .dream-section-title,
html.is-mobile-app #page-connect .dream-compose-pro .dream-ai-pill,
html.kozamia-app-shell #page-connect .dream-compose-pro .dream-section-title,
html.kozamia-app-shell #page-connect .dream-compose-pro .dream-ai-pill {
  color: #fff !important;
}
html.is-mobile-app #page-connect .dream-compose-pro textarea,
html.kozamia-app-shell #page-connect .dream-compose-pro textarea {
  border-radius: 0.85rem;
  border: 0;
}
html.is-mobile-app #page-connect .dream-card,
html.kozamia-app-shell #page-connect .dream-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem !important;
}

html.is-mobile-app #page-connect .listen-room-card,
html.kozamia-app-shell #page-connect .listen-room-card {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem !important;
  border-radius: 1.1rem !important;
}
html.is-mobile-app #page-connect .listen-room-card-emoji,
html.kozamia-app-shell #page-connect .listen-room-card-emoji {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.85rem;
  background: #f0e6f6;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  flex: 0 0 auto;
}

html.is-mobile-app #page-connect .play-game-tile,
html.kozamia-app-shell #page-connect .play-game-tile {
  border-radius: 1.15rem !important;
  overflow: hidden;
}

/* ===== connectv4 — tüm Bağlan bölümleri mockup (mobile-force üstü) ===== */
html.connect-mockup-on #page-connect.connect-logged-in,
html.is-mobile-app #page-connect.connect-logged-in,
html.kozamia-app-shell #page-connect.connect-logged-in {
  --kz-purple: #6a3d8a;
  --kz-cream: #fdf8f5;
}

html.connect-mockup-on #page-connect .community-welcome-banner,
html.is-mobile-app #page-connect.connect-logged-in .community-welcome-banner {
  display: none !important;
}
html.connect-mockup-on #page-connect .group-card-preview,
html.is-mobile-app #page-connect.connect-logged-in .group-card-preview {
  display: none !important;
}
html.connect-mockup-on #page-connect .group-card,
html.is-mobile-app #page-connect .group-card {
  padding: 0.7rem 0.8rem !important;
  border-radius: 1.15rem !important;
  gap: 0.7rem !important;
}
html.connect-mockup-on #page-connect .group-card h3,
html.is-mobile-app #page-connect .group-card h3 {
  font-family: var(--kozamia-brand-serif, Georgia, serif) !important;
  font-size: 0.95rem !important;
  color: #3d2a4a !important;
  margin: 0 0 0.15rem !important;
}
html.connect-mockup-on #page-connect .group-new-badge,
html.is-mobile-app #page-connect .group-new-badge {
  display: inline-flex !important;
  align-items: center;
  padding: 0.12rem 0.45rem !important;
  border-radius: 999px !important;
  background: #6a3d8a !important;
  color: #fff !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  vertical-align: middle;
  margin-left: 0.25rem;
}

/* İtiraflar — kompakt */
html.connect-mockup-on #page-connect .confession-form,
html.is-mobile-app #page-connect .confession-form {
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem !important;
  padding: 0.65rem 0.75rem !important;
  margin-bottom: 0.55rem !important;
  border-radius: 0.85rem !important;
  background: #6a3d8a !important;
  border: 0 !important;
}
html.connect-mockup-on #page-connect .confession-form textarea,
html.is-mobile-app #page-connect .confession-form textarea {
  border: 0 !important;
  border-radius: 0.55rem !important;
  background: #fff !important;
  min-height: 2.4rem !important;
  padding: 0.5rem 0.65rem !important;
  font-size: 0.82rem !important;
}
html.connect-mockup-on #page-connect .confession-form .btn,
html.is-mobile-app #page-connect .confession-form .btn {
  align-self: auto;
  border-radius: 999px !important;
  background: #fff !important;
  color: #6a3d8a !important;
  font-weight: 700 !important;
  border: 0 !important;
  font-size: 0.75rem !important;
  padding: 0.4rem 0.75rem !important;
}
html.connect-mockup-on #page-connect .confession-card,
html.is-mobile-app #page-connect .confession-card {
  background: #fff !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  border-radius: 0.75rem !important;
  padding: 0.55rem 0.65rem !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
html.connect-mockup-on #page-connect .confession-card-head,
html.is-mobile-app #page-connect .confession-card-head {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
html.connect-mockup-on #page-connect .confession-avatar,
html.is-mobile-app #page-connect .confession-avatar {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 50% !important;
  background: #6a3d8a !important;
  color: #fff !important;
  display: grid !important;
  place-items: center;
  flex-shrink: 0;
}
html.connect-mockup-on #page-connect .confession-avatar .material-symbols-outlined,
html.is-mobile-app #page-connect .confession-avatar .material-symbols-outlined {
  font-size: 0.95rem !important;
}
html.connect-mockup-on #page-connect .confession-who strong,
html.is-mobile-app #page-connect .confession-who strong {
  color: #6a3d8a !important;
  font-size: 0.78rem !important;
}
html.connect-mockup-on #page-connect .confession-body,
html.is-mobile-app #page-connect .confession-body {
  color: #3a3142 !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  margin: 0 0 0.4rem !important;
}
html.connect-mockup-on #page-connect .confession-meta,
html.is-mobile-app #page-connect .confession-meta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
html.connect-mockup-on #page-connect .confession-tag,
html.is-mobile-app #page-connect .confession-tag {
  display: inline-flex !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 999px !important;
  background: #f0e6f6 !important;
  color: #6a3d8a !important;
  font-size: 0.65rem !important;
  font-weight: 650 !important;
}
html.connect-mockup-on #page-connect .confession-heart,
html.is-mobile-app #page-connect .confession-heart {
  display: inline-flex !important;
  align-items: center;
  gap: 0.15rem;
  border: 0 !important;
  background: transparent !important;
  color: #6a3d8a !important;
  font-weight: 650 !important;
  font-size: 0.72rem !important;
  padding: 0.15rem 0.3rem !important;
}

/* Oyna — 2 kolon grid */
html.connect-mockup-on #page-connect #play-hub-main .play-hub-grid,
html.connect-mockup-on #page-connect #play-hub-grid,
html.is-mobile-app #page-connect #play-hub-main .play-hub-grid,
html.is-mobile-app #page-connect .play-hub-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.65rem !important;
}
html.connect-mockup-on #page-connect .play-game-card,
html.is-mobile-app #page-connect .play-game-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 1.15rem !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  box-shadow: 0 8px 20px rgba(45, 25, 60, 0.06) !important;
  padding: 0 !important;
  text-align: left !important;
  min-height: 0 !important;
}
html.connect-mockup-on #page-connect .play-card-cover,
html.is-mobile-app #page-connect .play-card-cover {
  height: 5.5rem !important;
  display: grid !important;
  place-items: center;
  position: relative;
}
html.connect-mockup-on #page-connect .play-game-card-emoji,
html.is-mobile-app #page-connect .play-game-card-emoji {
  font-size: 2rem !important;
}
html.connect-mockup-on #page-connect .play-card-body,
html.is-mobile-app #page-connect .play-card-body {
  padding: 0.55rem 0.6rem 0.7rem !important;
}
html.connect-mockup-on #page-connect .play-game-card-title,
html.is-mobile-app #page-connect .play-game-card-title {
  font-family: var(--kozamia-brand-serif, Georgia, serif) !important;
  font-size: 0.92rem !important;
  color: #6a3d8a !important;
  display: block;
  margin-bottom: 0.15rem;
}
html.connect-mockup-on #page-connect .play-game-card-desc,
html.is-mobile-app #page-connect .play-game-card-desc {
  font-size: 0.68rem !important;
  color: #9a8aa0 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.connect-mockup-on #page-connect .play-mode-row,
html.connect-mockup-on #page-connect .play-game-card-cta,
html.connect-mockup-on #page-connect .play-energy,
html.connect-mockup-on #page-connect .play-diff-pill,
html.is-mobile-app #page-connect .play-mode-row,
html.is-mobile-app #page-connect .play-game-card-cta {
  display: none !important;
}
html.connect-mockup-on #page-connect .play-game-card-meta,
html.is-mobile-app #page-connect .play-game-card-meta {
  display: flex !important;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.65rem !important;
  color: #6a3d8a !important;
}
html.connect-mockup-on #page-connect .play-cat-pill,
html.is-mobile-app #page-connect .play-cat-pill {
  border-radius: 999px !important;
  border: 1px solid rgba(106, 61, 138, 0.2) !important;
  background: #fff !important;
  color: #6a3d8a !important;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
html.connect-mockup-on #page-connect .play-cat-pill.active,
html.is-mobile-app #page-connect .play-cat-pill.active {
  background: #6a3d8a !important;
  color: #fff !important;
  border-color: #6a3d8a !important;
}
html.connect-mockup-on #page-connect .play-points-bar,
html.is-mobile-app #page-connect .play-points-bar {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem !important;
  border-radius: 999px !important;
  background: #f0e6f6 !important;
  color: #6a3d8a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.65rem !important;
  border: 0 !important;
}

/* Buddy */
html.connect-mockup-on #page-connect .buddy-discover-head,
html.is-mobile-app #page-connect .buddy-discover-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
}
html.connect-mockup-on #page-connect .buddy-discover-head strong,
html.is-mobile-app #page-connect .buddy-discover-head strong {
  font-family: var(--kozamia-brand-serif, Georgia, serif);
  font-size: 1.05rem;
  color: #6a3d8a;
}
html.connect-mockup-on #page-connect .buddy-discover-card,
html.is-mobile-app #page-connect .buddy-discover-card {
  border-radius: 1.1rem !important;
  padding: 0.75rem !important;
  text-align: center !important;
}
html.connect-mockup-on #page-connect .buddy-discover-actions,
html.is-mobile-app #page-connect .buddy-discover-actions {
  display: flex !important;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
html.connect-mockup-on #page-connect .buddy-discover-actions .btn,
html.is-mobile-app #page-connect .buddy-discover-actions .btn {
  flex: 1 1 0;
  border-radius: 999px !important;
  padding: 0.5rem 0.45rem !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}
html.connect-mockup-on #page-connect .buddy-match-card,
html.is-mobile-app #page-connect .buddy-match-card {
  background: #fff !important;
  border-radius: 1.35rem !important;
  border: 1px solid rgba(106, 61, 138, 0.12) !important;
  box-shadow: 0 10px 28px rgba(45, 25, 60, 0.07) !important;
  padding: 1.25rem !important;
  text-align: center !important;
}
html.connect-mockup-on #page-connect .buddy-partner-avatar,
html.is-mobile-app #page-connect .buddy-partner-avatar {
  width: 5.5rem !important;
  height: 5.5rem !important;
  border-radius: 50% !important;
  border: 3px solid #6a3d8a !important;
  margin: 0 auto 0.75rem !important;
  display: grid !important;
  place-items: center;
  font-size: 2rem !important;
  background: #f0e6f6 !important;
}
html.connect-mockup-on #page-connect .buddy-match-layout,
html.is-mobile-app #page-connect .buddy-match-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Dinle */
html.connect-mockup-on #page-connect .listen-radio-board-head h2,
html.is-mobile-app #page-connect .listen-radio-board-head h2 {
  font-family: var(--kozamia-brand-serif, Georgia, serif) !important;
  font-size: 1.15rem !important;
  color: #6a3d8a !important;
  margin: 0 !important;
}
html.connect-mockup-on #page-connect .listen-room-card,
html.connect-mockup-on #page-connect .radio-station-card,
html.is-mobile-app #page-connect .listen-room-card {
  background: #fff !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 6px 18px rgba(45, 25, 60, 0.05) !important;
  padding: 0.8rem !important;
}
html.connect-mockup-on #page-connect .listen-create-card,
html.is-mobile-app #page-connect .listen-create-card {
  background: #fff !important;
  border-radius: 1.15rem !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  padding: 0.9rem !important;
  margin-top: 0.85rem !important;
}
html.connect-mockup-on #page-connect .radio-hub-player,
html.is-mobile-app #page-connect .radio-hub-player {
  background: #f3eaf8 !important;
  border-radius: 1.1rem !important;
  padding: 0.75rem !important;
  margin: 0.65rem 0 !important;
}
html.connect-mockup-on #page-connect .radio-hub-play,
html.is-mobile-app #page-connect .radio-hub-play {
  background: #6a3d8a !important;
  color: #fff !important;
  border-radius: 50% !important;
  border: 0 !important;
}

/* Rüyalar */
html.connect-mockup-on #page-connect .dream-compose-pro,
html.is-mobile-app #page-connect .dream-compose-pro {
  border-radius: 1.15rem !important;
  background: linear-gradient(135deg, #6a3d8a, #8b5aad) !important;
  padding: 1rem 1.05rem !important;
  margin-bottom: 0.85rem !important;
}
html.connect-mockup-on #page-connect .dream-card,
html.is-mobile-app #page-connect .dream-card {
  background: #fff !important;
  border-radius: 1.15rem !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  box-shadow: 0 6px 18px rgba(45, 25, 60, 0.05) !important;
  padding: 0.85rem !important;
  margin-bottom: 0.65rem !important;
}
html.connect-mockup-on #page-connect .dream-section-title,
html.is-mobile-app #page-connect .dream-section-title {
  font-family: var(--kozamia-brand-serif, Georgia, serif) !important;
  color: #6a3d8a !important;
  font-size: 1.05rem !important;
}

/* Canlı list actions compact */
html.connect-mockup-on #page-connect .live-list-head,
html.is-mobile-app #page-connect.connect-logged-in .live-list-head,
html.kozamia-app-shell #page-connect.connect-logged-in .live-list-head {
  display: none !important;
}
html.connect-mockup-on #page-connect.connect-in-section .connect-app-top,
html.is-mobile-app #page-connect.connect-in-section .connect-app-top,
html.kozamia-app-shell #page-connect.connect-in-section .connect-app-top {
  gap: 0 !important;
  padding-bottom: 0.1rem !important;
}
html.connect-mockup-on #page-connect.connect-in-section .live-mode-tabs,
html.is-mobile-app #page-connect.connect-in-section .live-mode-tabs {
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
}

/* Canlı panel: alttaki gereksiz boşluğu kapat, içeriği üste yasla */
html.connect-mockup-on #page-connect #connect-panel-soul.live-stream-panel,
html.is-mobile-app body:not(.is-live-stage-open) #page-connect #connect-panel-soul.live-stream-panel,
html.kozamia-app-shell body:not(.is-live-stage-open) #page-connect #connect-panel-soul.live-stream-panel,
html.connect-mockup-on body:not(.is-live-stage-open) #page-connect #connect-panel-soul.live-stream-panel {
  min-height: calc(100dvh - var(--bottom-nav-h, 4rem) - 3.35rem) !important;
  height: auto !important;
  flex: 0 0 auto !important;
  background: #fff !important;
  border-radius: 0 !important;
  padding: 0 0.75rem calc(0.5rem + var(--bottom-nav-h, 4rem)) !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

html.is-mobile-app #page-connect.connect-in-section:not(.connect-tab-messages) .connect-panel:not([hidden]),
html.kozamia-app-shell #page-connect.connect-in-section:not(.connect-tab-messages) .connect-panel:not([hidden]),
html.connect-mockup-on #page-connect.connect-in-section:not(.connect-tab-messages) .connect-panel:not([hidden]) {
  background: #fff !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0.15rem !important;
  padding-bottom: calc(0.5rem + var(--bottom-nav-h, 4rem)) !important;
  box-sizing: border-box;
  min-height: calc(100dvh - var(--bottom-nav-h, 4rem) - 3.35rem);
}

html.is-mobile-app #page-connect #connect-panel-soul .live-list-view,
html.kozamia-app-shell #page-connect #connect-panel-soul .live-list-view {
  padding: 0.15rem 0 0.25rem !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

html.is-mobile-app #page-connect .live-upcoming-empty,
html.kozamia-app-shell #page-connect .live-upcoming-empty,
html.connect-mockup-on #page-connect .live-upcoming-empty {
  padding-top: 0.85rem;
  padding-bottom: 0.55rem;
}

html.is-mobile-app #page-connect .live-empty-wrap,
html.kozamia-app-shell #page-connect .live-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.5rem 0.35rem;
  text-align: center;
}
html.is-mobile-app #page-connect .live-empty-go-live,
html.kozamia-app-shell #page-connect .live-empty-go-live,
html.connect-mockup-on #page-connect .live-empty-go-live {
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 1.1rem;
  background: var(--mood-gradient, linear-gradient(135deg, #5c3d6e, #7d5a8c 52%, #8a7380));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--mood-glow, 0 10px 24px rgba(106, 61, 138, 0.28));
}
html.is-mobile-app #page-connect .live-empty-go-live .material-symbols-outlined,
html.kozamia-app-shell #page-connect .live-empty-go-live .material-symbols-outlined {
  font-size: 1.7rem;
  color: #fff !important;
}
html.connect-mockup-on #page-connect .dm-toolbar-back,
html.connect-mockup-on #page-connect #dm-back-btn,
html.is-mobile-app #page-connect .dm-toolbar-back,
html.is-mobile-app #page-connect #dm-back-btn,
html.kozamia-app-shell #page-connect .dm-toolbar-back,
html.kozamia-app-shell #page-connect #dm-back-btn {
  display: none !important;
}
html.connect-mockup-on #page-connect .live-list-actions,
html.is-mobile-app #page-connect .live-list-actions {
  display: flex !important;
  gap: 0.4rem;
}
html.connect-mockup-on #page-connect #live-go-live-btn,
html.is-mobile-app #page-connect #live-go-live-btn {
  border-radius: 999px !important;
  background: #6a3d8a !important;
  font-size: 0.78rem !important;
  padding: 0.45rem 0.85rem !important;
}

/* Mesajlar — arama ortalı, menü sağda; alt boşluk temiz */
html.connect-mockup-on #page-connect .dm-sidebar-search,
html.is-mobile-app #page-connect .dm-sidebar-search,
html.kozamia-app-shell #page-connect .dm-sidebar-search {
  margin: 0.2rem 0 0.35rem !important;
  padding: 0.15rem 0.55rem 0.2rem !important;
  gap: 0 !important;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-sidebar-search-row,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-sidebar-search-row,
html.connect-mockup-on #page-connect #connect-panel-messages .dm-sidebar-search-row {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 1.85rem;
  padding: 0 2.1rem !important; /* sağ menü için denge */
  box-sizing: border-box;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-sidebar-search-wrap,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-sidebar-search-wrap,
html.connect-mockup-on #page-connect #connect-panel-messages .dm-sidebar-search-wrap {
  flex: 0 1 auto !important;
  width: min(78%, 17.5rem) !important;
  max-width: 17.5rem !important;
  margin: 0 auto !important;
  background: #f3ebe0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 0.22rem 0.65rem !important;
  min-height: 1.85rem !important;
  gap: 0.25rem !important;
  justify-content: center;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-sidebar-search-wrap .material-symbols-outlined,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-sidebar-search-wrap .material-symbols-outlined {
  font-size: 0.95rem !important;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-sidebar-search-wrap input,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-sidebar-search-wrap input {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  text-align: left;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-inbox-menu-wrap,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-inbox-menu-wrap {
  position: absolute !important;
  right: 0.45rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-inbox-menu-btn,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-inbox-menu-btn {
  width: 1.7rem !important;
  height: 1.7rem !important;
  min-width: 1.7rem !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

html.is-mobile-app #page-connect #connect-panel-messages .dm-inbox-menu-btn .material-symbols-outlined,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-inbox-menu-btn .material-symbols-outlined {
  font-size: 1rem !important;
}

/* Inbox: beyaz zemin alt nav’a kadar */
html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open),
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) {
  background: #ffffff !important;
}

html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) .connect-hub,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) .connect-hub {
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box;
  min-height: calc(100dvh - var(--bottom-nav-h, 4.25rem)) !important;
  display: flex !important;
  flex-direction: column !important;
}

html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
}

html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-app,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-app {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 1.2rem 1.2rem 0 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-body,
html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-logged,
html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-split:not([hidden]),
html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-sidebar:not([hidden]),
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-body,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-logged,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-split:not([hidden]),
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-sidebar:not([hidden]) {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
}

html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-inbox-list,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-inbox-list,
html.is-mobile-app #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-calls-list,
html.kozamia-app-shell #page-connect.active.is-messages-focus:not(.is-dm-chat-open) #connect-panel-messages .dm-calls-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0.65rem !important;
  background: #ffffff !important;
}
html.connect-mockup-on #page-connect .dm-online-section,
html.is-mobile-app #page-connect .dm-online-section,
html.kozamia-app-shell #page-connect .dm-online-section,
html.connect-mockup-on #page-connect.connect-tab-messages .dm-online-section,
html.is-mobile-app #page-connect.connect-tab-messages .dm-online-section {
  display: none !important;
}
html.connect-mockup-on #page-connect .dm-inbox-item-wrap > .dm-inbox-quick-calls,
html.is-mobile-app #page-connect .dm-inbox-item-wrap > .dm-inbox-quick-calls,
html.kozamia-app-shell #page-connect .dm-inbox-item-wrap > .dm-inbox-quick-calls {
  display: none !important;
}
html.connect-mockup-on #page-connect .dm-calls-item .dm-inbox-quick-calls,
html.is-mobile-app #page-connect .dm-calls-item .dm-inbox-quick-calls,
html.kozamia-app-shell #page-connect .dm-calls-item .dm-inbox-quick-calls {
  display: flex !important;
}

/* end connectv4 */

html.is-mobile-app #page-connect .buddy-discover-card,
html.kozamia-app-shell #page-connect .buddy-discover-card {
  border-radius: 1.1rem !important;
  border: 1px solid rgba(106, 61, 138, 0.12) !important;
  box-shadow: 0 6px 16px rgba(45, 25, 60, 0.05) !important;
  background: #fff !important;
  padding: 0.75rem !important;
}
html.is-mobile-app #page-connect .buddy-discover-like,
html.kozamia-app-shell #page-connect .buddy-discover-like {
  background: #6a3d8a !important;
  border-color: #6a3d8a !important;
}

/* ===== Buddy mockup profil kartı — sıkı / kompakt ===== */
html.connect-mockup-on #page-connect.connect-in-section .buddy-discover-head,
html.is-mobile-app #page-connect.connect-in-section .buddy-discover-head {
  display: none !important;
}
html.connect-mockup-on #page-connect .buddy-discover,
html.is-mobile-app #page-connect .buddy-discover {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 0 0.65rem;
}
html.connect-mockup-on #page-connect .buddy-profile-card,
html.is-mobile-app #page-connect .buddy-profile-card,
html.connect-mockup-on #page-connect .buddy-discover-card,
html.is-mobile-app #page-connect .buddy-discover-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.28rem !important;
  padding: 0.75rem 0.75rem 0.7rem !important;
  border-radius: 1.1rem !important;
  background: #fff !important;
  border: 1px solid rgba(106, 61, 138, 0.1) !important;
  box-shadow: 0 6px 16px rgba(45, 25, 60, 0.05) !important;
}
html.connect-mockup-on #page-connect .buddy-discover-none,
html.is-mobile-app #page-connect .buddy-discover-none {
  margin: 0.5rem auto !important;
  padding: 0.75rem !important;
  text-align: center;
}
html.connect-mockup-on #page-connect .buddy-profile-av-wrap,
html.is-mobile-app #page-connect .buddy-profile-av-wrap {
  position: relative;
  width: 4.75rem;
  height: 4.75rem;
  margin: 0.05rem 0 0.1rem;
}
html.connect-mockup-on #page-connect .buddy-profile-av,
html.is-mobile-app #page-connect .buddy-profile-av {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid #6a3d8a;
  background: linear-gradient(145deg, #f3eaf8, #e4d4f0);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 1.65rem;
}
html.connect-mockup-on #page-connect .buddy-profile-av-img,
html.is-mobile-app #page-connect .buddy-profile-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.connect-mockup-on #page-connect .buddy-profile-heart,
html.is-mobile-app #page-connect .buddy-profile-heart {
  position: absolute;
  right: -0.05rem;
  bottom: -0.05rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #fff;
  color: #6a3d8a;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(45, 25, 60, 0.12);
  border: 1px solid rgba(106, 61, 138, 0.12);
}
html.connect-mockup-on #page-connect .buddy-profile-heart .material-symbols-outlined,
html.is-mobile-app #page-connect .buddy-profile-heart .material-symbols-outlined {
  font-size: 0.85rem;
  font-variation-settings: "FILL" 1;
}
html.connect-mockup-on #page-connect .buddy-profile-name-row,
html.is-mobile-app #page-connect .buddy-profile-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
html.connect-mockup-on #page-connect .buddy-profile-name,
html.is-mobile-app #page-connect .buddy-profile-name {
  font-family: var(--kozamia-brand-serif, Georgia, serif) !important;
  font-size: 1.05rem !important;
  color: #6a3d8a !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
html.connect-mockup-on #page-connect .buddy-profile-verified,
html.is-mobile-app #page-connect .buddy-profile-verified {
  color: #6a3d8a !important;
  font-size: 0.95rem !important;
  font-variation-settings: "FILL" 1;
}
html.connect-mockup-on #page-connect .buddy-online-pill,
html.is-mobile-app #page-connect .buddy-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(106, 61, 138, 0.1);
  color: #6a3d8a;
  font-size: 0.65rem;
  font-weight: 700;
}
html.connect-mockup-on #page-connect .buddy-online-pill .live-dot,
html.is-mobile-app #page-connect .buddy-online-pill .live-dot {
  width: 0.4rem;
  height: 0.4rem;
  background: #22c55e;
}
html.connect-mockup-on #page-connect .buddy-online-pill.is-off,
html.is-mobile-app #page-connect .buddy-online-pill.is-off {
  color: #8a7a94;
  background: rgba(106, 61, 138, 0.06);
}
html.connect-mockup-on #page-connect .buddy-profile-meta,
html.is-mobile-app #page-connect .buddy-profile-meta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
  margin: 0 !important;
  font-size: 0.68rem !important;
  color: #8a7a94 !important;
}
html.connect-mockup-on #page-connect .buddy-profile-meta .material-symbols-outlined,
html.is-mobile-app #page-connect .buddy-profile-meta .material-symbols-outlined {
  font-size: 0.8rem;
  vertical-align: -2px;
  color: #6a3d8a;
}
html.connect-mockup-on #page-connect .buddy-profile-meta-sep,
html.is-mobile-app #page-connect .buddy-profile-meta-sep {
  opacity: 0.45;
}
html.connect-mockup-on #page-connect .buddy-profile-interests,
html.is-mobile-app #page-connect .buddy-profile-interests {
  width: 100%;
  margin-top: 0.15rem;
  text-align: center;
}
html.connect-mockup-on #page-connect .buddy-profile-interests-label,
html.is-mobile-app #page-connect .buddy-profile-interests-label {
  display: none !important;
}
html.connect-mockup-on #page-connect .buddy-interest-grid,
html.is-mobile-app #page-connect .buddy-interest-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.28rem;
}
html.connect-mockup-on #page-connect .buddy-interest-chip,
html.is-mobile-app #page-connect .buddy-interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #f3eaf8;
  color: #6a3d8a;
  font-size: 0.62rem;
  font-weight: 600;
}
html.connect-mockup-on #page-connect .buddy-interest-chip .material-symbols-outlined,
html.is-mobile-app #page-connect .buddy-interest-chip .material-symbols-outlined {
  font-size: 0.78rem;
}
html.connect-mockup-on #page-connect .buddy-profile-intro,
html.is-mobile-app #page-connect .buddy-profile-intro {
  margin: 0.15rem 0 0.1rem !important;
  padding: 0 0.25rem;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  color: #7a6a86 !important;
  max-width: 22rem;
}
html.connect-mockup-on #page-connect .buddy-profile-quote,
html.is-mobile-app #page-connect .buddy-profile-quote {
  display: none !important;
}
html.connect-mockup-on #page-connect .buddy-profile-msg-btn,
html.is-mobile-app #page-connect .buddy-profile-msg-btn {
  width: 100% !important;
  margin-top: 0.25rem !important;
  border-radius: 999px !important;
  background: #6a3d8a !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.55rem 0.85rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.8rem !important;
}
html.connect-mockup-on #page-connect .buddy-profile-msg-btn .material-symbols-outlined,
html.is-mobile-app #page-connect .buddy-profile-msg-btn .material-symbols-outlined {
  font-size: 1rem;
}
html.connect-mockup-on #page-connect .buddy-discover-actions,
html.is-mobile-app #page-connect .buddy-discover-actions {
  display: flex !important;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
html.connect-mockup-on #page-connect .buddy-discover-actions .buddy-discover-like,
html.is-mobile-app #page-connect .buddy-discover-actions .buddy-discover-like {
  display: none !important;
}
html.connect-mockup-on #page-connect .buddy-discover-pass,
html.is-mobile-app #page-connect .buddy-discover-pass {
  flex: 1 1 auto;
  border-radius: 999px !important;
  padding: 0.5rem 0.65rem !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  border-color: rgba(106, 61, 138, 0.25) !important;
  color: #6a3d8a !important;
}
html.connect-mockup-on #page-connect .buddy-discover-pass .material-symbols-outlined,
html.is-mobile-app #page-connect .buddy-discover-pass .material-symbols-outlined {
  font-size: 1rem;
}
html.connect-mockup-on #page-connect .buddy-form-secondary,
html.is-mobile-app #page-connect .buddy-form-secondary {
  margin-top: 0.2rem;
}
html.connect-mockup-on #page-connect .buddy-queue-details,
html.is-mobile-app #page-connect .buddy-queue-details {
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(106, 61, 138, 0.1);
  padding: 0.4rem 0.7rem;
}
html.connect-mockup-on #page-connect .buddy-queue-details > summary,
html.is-mobile-app #page-connect .buddy-queue-details > summary {
  cursor: pointer;
  font-weight: 700;
  color: #6a3d8a;
  font-size: 0.78rem;
  list-style: none;
}
html.connect-mockup-on #page-connect .buddy-queue-details > summary::-webkit-details-marker {
  display: none;
}
html.connect-mockup-on #page-connect .buddy-id-icon,
html.is-mobile-app #page-connect .buddy-id-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  font-size: 1.15rem !important;
}
html.connect-mockup-on #page-connect .buddy-match-hint,
html.is-mobile-app #page-connect .buddy-match-hint {
  font-size: 0.68rem !important;
}

html.is-mobile-app #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-toolbar,
html.kozamia-app-shell #page-connect.connect-tab-messages:not(.is-dm-chat-open) .dm-toolbar {
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.45rem 0.55rem 0.35rem !important;
}

/* Mesajlar öneri UI — liste + sohbet polish (20260720msg1) */
html.is-mobile-app #page-connect.connect-tab-messages .connect-app-title,
html.kozamia-app-shell #page-connect.connect-tab-messages .connect-app-title {
  font-size: 1.65rem;
}
html.is-mobile-app #page-connect.is-dm-chat-open .connect-app-top,
html.kozamia-app-shell #page-connect.is-dm-chat-open .connect-app-top {
  display: none !important;
}
html.is-mobile-app #page-connect.connect-tab-messages #connect-panel-messages .dm-app,
html.kozamia-app-shell #page-connect.connect-tab-messages #connect-panel-messages .dm-app {
  border: 0 !important;
  border-radius: 1.15rem 1.15rem 0 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-sidebar-search-wrap,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-sidebar-search-wrap {
  background: #f3ebe0 !important;
  border-radius: 999px !important;
  border: 0 !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-chat-peer-avatar.is-initial,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-chat-peer-avatar.is-initial,
html.is-mobile-app #page-connect #connect-panel-messages .dm-msg-avatar:not(:has(img)),
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-msg-avatar:not(:has(img)) {
  background: linear-gradient(145deg, #6a3d8a, #8b5aad) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-chat-messages,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-chat-messages {
  background: #fdf8f5 !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-msg.is-self .dm-msg-bubble,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-msg.is-self .dm-msg-bubble {
  background: #f3ebe0 !important;
  border-radius: 1.1rem 1.1rem 0.35rem 1.1rem !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-msg.is-peer .dm-msg-bubble,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-msg.is-peer .dm-msg-bubble {
  background: #ffffff !important;
  border-radius: 1.1rem 1.1rem 1.1rem 0.35rem !important;
  box-shadow: 0 2px 10px rgba(45, 25, 60, 0.06) !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-msg.is-call .dm-msg-bubble,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-msg.is-call .dm-msg-bubble {
  background: #e8f4fc !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-msg.is-self .dm-msg-bubble::before,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-msg.is-self .dm-msg-bubble::before {
  border-color: transparent transparent transparent #f3ebe0 !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-msg.is-call.is-self .dm-msg-bubble::before,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-msg.is-call.is-self .dm-msg-bubble::before {
  border-color: transparent transparent transparent #e8f4fc !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-chat-form .btn.btn-primary,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-chat-form .btn.btn-primary {
  background: #6a3d8a !important;
  border-color: #6a3d8a !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 6px 16px rgba(106, 61, 138, 0.28) !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-attach-toggle,
html.is-mobile-app #page-connect #connect-panel-messages .dm-voice-record-btn,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-attach-toggle,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-voice-record-btn {
  border-radius: 999px !important;
  background: rgba(106, 61, 138, 0.08) !important;
  color: #6a3d8a !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-chat-call-actions .icon-action-btn,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-chat-call-actions .icon-action-btn {
  border-radius: 0.75rem !important;
  background: rgba(106, 61, 138, 0.06) !important;
  color: #6a3d8a !important;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-chat-empty-state,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-chat-empty-state {
  background: #fdf8f5 !important;
  text-align: center;
  padding: 2.5rem 1.25rem;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-empty-illu,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-empty-illu {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(106, 61, 138, 0.1);
  color: #6a3d8a;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-empty-illu .material-symbols-outlined,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-empty-illu .material-symbols-outlined {
  font-size: 1.85rem;
  background: none !important;
  width: auto;
  height: auto;
}
html.is-mobile-app #page-connect #connect-panel-messages .dm-chat-empty,
html.kozamia-app-shell #page-connect #connect-panel-messages .dm-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: auto;
  text-align: center;
  color: #6a3d8a;
}

/* end Bağlan mockup connectv1 */

/* Canlı mockup — X + Canlı başlık; büyük “Bağlan” satırı yok */
html.is-mobile-app #page-connect.connect-tab-live .connect-app-title-row,
html.kozamia-app-shell #page-connect.connect-tab-live .connect-app-title-row,
html.connect-mockup-on #page-connect.connect-tab-live .connect-app-title-row {
  display: none !important;
}
html.is-mobile-app #page-connect.connect-tab-live .connect-app-brand-row,
html.kozamia-app-shell #page-connect.connect-tab-live .connect-app-brand-row,
html.connect-mockup-on #page-connect.connect-tab-live .connect-app-brand-row {
  min-height: 2.35rem;
}
html.is-mobile-app #page-connect.connect-tab-live #live-login-hint,
html.kozamia-app-shell #page-connect.connect-tab-live #live-login-hint,
html.connect-mockup-on #page-connect.connect-tab-live #live-login-hint {
  display: none !important;
}
html.is-mobile-app #page-connect .live-cat-filter-bar,
html.kozamia-app-shell #page-connect .live-cat-filter-bar,
html.connect-mockup-on #page-connect .live-cat-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0 0 0.65rem;
  margin: -0.15rem 0 0.35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.is-mobile-app #page-connect .live-cat-filter-bar[hidden],
html.kozamia-app-shell #page-connect .live-cat-filter-bar[hidden],
html.connect-mockup-on #page-connect .live-cat-filter-bar[hidden] {
  display: none !important;
}
html.is-mobile-app #page-connect .live-cat-filter-bar::-webkit-scrollbar,
html.kozamia-app-shell #page-connect .live-cat-filter-bar::-webkit-scrollbar {
  display: none;
}
html.is-mobile-app #page-connect .live-cat-filter-chip,
html.kozamia-app-shell #page-connect .live-cat-filter-chip,
html.connect-mockup-on #page-connect .live-cat-filter-chip {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  background: #f0e6f6;
  color: #6a3d8a;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
html.is-mobile-app #page-connect .live-cat-filter-chip.active,
html.kozamia-app-shell #page-connect .live-cat-filter-chip.active,
html.connect-mockup-on #page-connect .live-cat-filter-chip.active {
  background: #6a3d8a;
  color: #fff;
}
html.is-mobile-app #page-connect .live-cat-filter-chip.is-go-live,
html.kozamia-app-shell #page-connect .live-cat-filter-chip.is-go-live,
html.connect-mockup-on #page-connect .live-cat-filter-chip.is-go-live {
  order: -1;
  background: #6a3d8a;
  color: #fff;
}
html.is-mobile-app #page-connect .live-room-grid-flat,
html.kozamia-app-shell #page-connect .live-room-grid-flat,
html.connect-mockup-on #page-connect .live-room-grid-flat {
  gap: 0.75rem !important;
}
html.is-mobile-app #page-connect .live-room-card,
html.kozamia-app-shell #page-connect .live-room-card,
html.connect-mockup-on #page-connect .live-room-card {
  padding: 0.9rem 0.95rem !important;
  border-radius: 1.2rem !important;
  background: #fff !important;
  border: 1px solid rgba(106, 61, 138, 0.08) !important;
  box-shadow: 0 4px 16px rgba(45, 25, 60, 0.045) !important;
}
html.is-mobile-app #page-connect .live-dot,
html.kozamia-app-shell #page-connect .live-dot,
html.connect-mockup-on #page-connect .live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #6a3d8a;
  display: inline-block;
  flex-shrink: 0;
}

/* IA hub: birincil 4 + Daha fazla (ikincil) */
html.is-mobile-app .hub-tabs-sticky:not(.hub-tabs-expanded) .hub-tab-secondary,
html.kozamia-app-shell .hub-tabs-sticky:not(.hub-tabs-expanded) .hub-tab-secondary,
html.connect-mockup-on .hub-tabs-sticky:not(.hub-tabs-expanded) .hub-tab-secondary,
html.discover-mockup-on .hub-tabs-sticky:not(.hub-tabs-expanded) .hub-tab-secondary {
  display: none !important;
}
html.is-mobile-app .hub-tabs-more-btn,
html.kozamia-app-shell .hub-tabs-more-btn,
html.connect-mockup-on .hub-tabs-more-btn,
html.discover-mockup-on .hub-tabs-more-btn {
  appearance: none;
  border: 0;
  background: rgba(106, 61, 138, 0.08);
  color: #6a3d8a;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  margin: 0.25rem 0 0;
}
html.is-mobile-app .hub-tabs-more-btn[hidden],
html.kozamia-app-shell .hub-tabs-more-btn[hidden] {
  display: none !important;
}