/* Social product surfaces. Shared tokens are defined in bex-design-system.css. */
body.bex-social-page {
    background: var(--bex-bg); color: var(--bex-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}
.bex-social-page :where(main, section, aside, article, form, input, textarea, select) { min-width: 0; }
.bex-social-intro {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    width: 100%; max-width: 1120px; margin-inline: auto; padding: 28px 28px 24px;
    flex-shrink: 0;
}
.bex-social-intro-copy { min-width: 0; }
.bex-social-intro h1 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; color: var(--bex-text); margin: 0; overflow-wrap: anywhere; }
.bex-social-intro p { font-size: 14px; line-height: 1.65; color: var(--bex-muted); margin: 8px 0 0; max-width: 64ch; }
.bex-social-intro.is-compact { padding: 20px 18px 14px; gap: 12px; }
.bex-social-intro.is-compact h1 { font-size: 22px; }
.bex-social-intro.is-compact p { font-size: 13px; }
.bex-social-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--bex-radius-sm); background: var(--bex-brand); color: var(--bex-on-brand); font-size: 14px; line-height: 1.3; font-weight: 600; text-decoration: none; flex-shrink: 0; cursor: pointer; transition: background .15s; }
.bex-social-primary:hover { background: var(--bex-brand-hover); }
.bex-social-secondary { background: var(--bex-surface); color: var(--bex-text); border-color: var(--bex-border); }
.bex-social-secondary:hover { background: var(--bex-surface-muted); }
.bex-social-page :where(.search-pill, .sb-search-wrap) { border-radius: var(--bex-radius-sm) !important; min-height: 46px; background: var(--bex-surface-muted) !important; border-color: var(--bex-border) !important; box-shadow: none !important; }
.bex-social-page :where(.search-pill input, .sb-search-wrap input) { min-width: 0; background: transparent !important; }
.bex-social-page :where(.grup-tab-btn, .kategori-chip-btn, .search-filter-btn, .sb-tab, .bex-tab-btn, .bex-main-tab-btn) { min-height: 40px; font-size: 13px; font-weight: 600; }
.bex-social-page :where(.grup-tab-btn.is-active, .kategori-chip-btn.is-active, .search-filter-btn.is-active) { color: var(--bex-brand) !important; background: var(--wa-selected) !important; box-shadow: none !important; }
.bex-social-page :where(.grup-empty, .bos-durum, .member-state) { padding: 44px 24px; color: var(--bex-muted); }
.bex-social-page :where(.grup-empty p, .bos-durum p, .member-state p) { font-size: 14px; line-height: 1.65; }
.bex-social-page :where(.grup-card, .kanal-item) { border-color: var(--bex-border); }
.bex-social-page :where(.grup-card, .kanal-item, .bex-game-card):focus-visible { outline: 3px solid var(--bex-brand); outline-offset: -3px; }
.bex-social-page :where(.grup-modal-body, .bex-modal, .member-dialog-surface) { border-radius: var(--bex-radius); background: var(--bex-surface); color: var(--bex-text); }
.bex-social-page :where(.bex-field label, .grup-form-label, .member-field) { font-size: 13px; font-weight: 600; color: var(--bex-muted); }
.bex-social-page :where(.bex-field input, .bex-field textarea, .bex-field select) { background: var(--bex-surface-muted); border-color: var(--bex-border); border-radius: var(--bex-radius-sm); }
.bex-social-page :where(#kesfet-desktop-sidebar, #odalar-desktop-sidebar, #games-desktop-sidebar, #bildirim-desktop-sidebar, #reels-desktop-sidebar) { width: 264px !important; min-width: 264px !important; max-width: 264px !important; background: var(--bex-surface) !important; }
.bex-social-page :where(#kesfet-desktop-sidebar, #odalar-desktop-sidebar, #games-desktop-sidebar, #bildirim-desktop-sidebar, #reels-desktop-sidebar) :where(.text-\[10px\], .text-\[11px\]) { font-size: 12px; }
.bex-social-page :where(#kesfet-main-section, #odalar-main-section, #games-main-section, #bildirim-main-section) { background: var(--bex-bg) !important; }
/* Feed has a reading width, while rooms and games retain a responsive catalogue. */
.page-explore #bex-explore-mount { width: 100%; max-width: 760px; margin-inline: auto; }
.page-explore :where(.bex-post-card, .bex-feed-create-card) { background: var(--bex-surface); border: 1px solid var(--bex-border); border-radius: var(--bex-radius); box-shadow: none; }
.page-explore :where(.bex-post-text, .bex-post-caption) { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.page-explore .bex-explore-side-btn { border-color: transparent; background: transparent; border-radius: var(--bex-radius-sm); }
.page-explore .bex-explore-side-btn.is-active { background: var(--wa-selected); border-color: transparent; }
.page-search .search-preview-card { max-width: 520px; padding: 36px !important; border-radius: var(--bex-radius) !important; background: var(--bex-surface) !important; border: 1px solid var(--bex-border); box-shadow: none !important; }
.page-search .search-preview-card :where(.text-xs, .text-\[11px\]) { font-size: 13px; line-height: 1.65; }
.page-search :where(#bex-search-submit-btn, #bex-search-clear) { min-width: 36px; min-height: 40px; }
.page-search #bex-search-action-btn { min-height: 36px; border-radius: 8px; }
.page-groups :where(.grup-card) { border-radius: var(--bex-radius-sm); box-shadow: none !important; background: var(--bex-surface); }
.page-groups .grup-kategori-chips-bar { padding-block: 10px; gap: 8px; }
.page-groups :where(.grup-tab-btn, .kategori-chip-btn) { border-radius: 9px; }
@media (min-width:768px) {
    html body.bex-wa.page-groups #grup-main > #messenger-sidebar { flex: 0 0 clamp(340px,32vw,440px) !important; width: clamp(340px,32vw,440px) !important; min-width: 340px !important; max-width: 440px !important; }
    html body.bex-wa.page-groups #grup-main > #grup-workspace { flex: 1 1 0 !important; min-width: 0 !important; }
}
html body.page-groups #grup-workspace, html body.page-groups #grup-workspace #pane-welcome { background: var(--bex-bg) !important; background-image: none !important; }
html body.page-groups .wa-welcome-card { max-width: 400px; padding: 28px; border: 1px solid var(--bex-border); border-radius: var(--bex-radius); background: var(--bex-surface) !important; box-shadow: none !important; backdrop-filter: none !important; }
.page-channels .kanal-hosgeldin { min-height: 420px; }
.page-channels .kanal-hosgeldin h2 { font-size: 30px; letter-spacing: -.035em; }
.page-channels .kanal-hosgeldin p { max-width: 44ch; font-size: 15px; }
.page-channels .kanal-item { padding-block: 15px; }
.page-channels .kanal-ikon { border-radius: 15px; }
.page-channels .kanal-pane-header { background: var(--bex-surface); }
.page-channels .k-mesaj-balonu { box-shadow: none; border: 1px solid var(--bex-border); border-radius: 14px; font-size: 15px; line-height: 1.6; }
.page-rooms #bex-rooms-mount { max-width: 1120px; border-radius: var(--bex-radius); border-color: var(--bex-border); box-shadow: none; }
.page-rooms #odalar-main-section > .bex-social-intro { max-width: 1176px; }
.page-games #games-catalog-view { max-width: 1320px; margin-inline: auto; }
.page-games #games-grid { grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: 18px; }
.page-games .bex-game-card { border: 1px solid var(--bex-border); background: var(--bex-surface) !important; border-radius: var(--bex-radius) !important; box-shadow: none !important; transform: none !important; cursor: pointer; }
.page-games .bex-game-card:hover { border-color: var(--bex-brand); }
.page-games .bex-game-card h3 { font-size: 14px; line-height: 1.5; font-weight: 600; }
.page-games .bex-game-thumb-wrap { aspect-ratio: 4/3; border-radius: 0; }
.page-games #games-grid .bex-game-card > div:last-child { padding: 12px; }
.page-games .bex-game-thumb-wrap img { object-fit: cover; }
.page-notifications .bex-notif-app { max-width: 900px; margin-inline: auto; }
.page-notifications :where(.bex-main-tabs-wrap) { background: var(--bex-surface-muted); border: 1px solid var(--bex-border); border-radius: 12px; padding: 4px; }
.page-notifications .bex-main-tab-btn { min-width: 0; padding-inline: 12px; border-radius: 8px; }
.page-notifications .bex-main-tab-btn.active { background: var(--bex-surface); color: var(--bex-brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.page-notifications #pane-settings :where(.shadow-sm, .shadow-md), .page-notifications #pane-feed :where(.shadow-sm) { box-shadow: none; border-radius: var(--bex-radius); }
.page-notifications #quest-cards-container { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.member-page .member-card { border-color: var(--bex-border); border-radius: var(--bex-radius); box-shadow: none; }
.member-page .member-button { border-radius: var(--bex-radius-sm); min-height: 44px; font-size: 14px; }
.member-page :where(.member-bio, .bex-about-text) { font-size: 15px; line-height: 1.7; }
.member-page .member-profile-sidebar { background: var(--bex-surface); }
.member-page .member-workspace-pane { background: var(--bex-bg); }
.member-page :where(.member-stats, .member-posts-tabs) { border-color: var(--bex-border); }
.bex-social-state { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 14px; padding: 40px 24px; min-height: 300px; color: var(--bex-muted); width: 100%; }
.bex-social-state h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--bex-text); margin: 0; }
.bex-social-state[hidden] { display: none !important; }
.bex-social-state p { max-width: 42ch; font-size: 14px; line-height: 1.7; margin: 0; }
.bex-social-state-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.page-reels .bex-social-state { min-height: 100%; background: var(--bex-surface); border-radius: var(--bex-radius); }
.page-reels .bex-reels-feed:has(> .bex-social-state) { width: 100%; }
.page-reels:has(.bex-reels-feed > .bex-social-state) :where(.bex-reels-desktop-side-panel, .bex-reels-desktop-controls) { display: none !important; }
.page-reels .bex-reel-video-error { position: absolute; inset: 25% 16%; z-index: 5; min-height: 0; border-radius: var(--bex-radius); background: rgba(18, 28, 32, .92); color: #fff; }
.page-reels .bex-reel-video-error h2 { color: #fff; font-size: 19px; }
.page-video-bot .bex-bot-card { border-radius: var(--bex-radius); box-shadow: none; }
.page-video-bot main > .bex-social-intro { padding: 4px 0 6px; }
.page-video-bot main > .bex-bot-card:first-of-type { background: var(--bex-brand) !important; }
.bex-invite-page .bex-invite { background: var(--bex-surface); border: 1px solid var(--bex-border); box-shadow: var(--bex-shadow); border-radius: var(--bex-radius); }
.page-channels .bex-channel-description { font-size: 13px; line-height: 1.65; color: var(--bex-muted); margin: 0 0 14px; }
.page-channels .bex-channel-form-error { font-size: 14px; line-height: 1.5; color: var(--bex-danger); margin: 12px 0; }
.page-channels .sb-title { font-size: 24px; letter-spacing: -.03em; }
.page-qr .qr-card { border-radius: var(--bex-radius); border-color: var(--bex-border); box-shadow: var(--bex-shadow); background: var(--bex-surface); }
@media (max-width: 1099px) {
    .bex-social-page :where(#kesfet-desktop-sidebar, #odalar-desktop-sidebar, #games-desktop-sidebar, #bildirim-desktop-sidebar, #reels-desktop-sidebar) { display: none !important; }
}
@media (min-width: 768px) {
    .page-search #messenger-sidebar { width: clamp(300px, 31vw, 380px); }
    .page-groups #messenger-sidebar { width: clamp(300px, 31vw, 380px); }
}
@media (max-width: 767px) {
    body.bex-wa.page-groups.has-page-navigation:not(.chat-open):not(.wa-page-open) { padding-bottom: calc(var(--bex-nav-height, 56px) + 32px) !important; }
    .bex-social-intro { padding: 22px 16px 18px; align-items: flex-start; gap: 12px; }
    .bex-social-intro h1 { font-size: 25px; }
    .bex-social-intro p { font-size: 13px; margin-top: 7px; }
    .bex-social-intro.is-compact { padding: 16px 14px 12px; }
    .bex-social-intro .bex-social-primary { padding-inline: 12px; font-size: 13px; }
    .bex-social-page :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) { font-size: 16px !important; }
    .bex-social-page :where(.search-filter-btn, .kategori-chip-btn, .grup-tab-btn, .bex-tab-btn, .sb-tab) { min-height: 44px; }
    .bex-social-page :where(.bex-modal, .member-dialog-surface) { border-radius: 18px 18px 0 0; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 16px); }
    .page-search #bex-search-submit-btn { display: none; }
    .page-search #bex-search-action-btn { min-height: 40px; }
    .page-games #games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .page-games .bex-game-card h3 { font-size: 14px; }
    .page-games #games-catalog-view > div:first-child { background: var(--bex-brand); box-shadow: none; }
    .page-notifications .bex-main-tab-btn { padding-inline: 7px; font-size: 12px; }
    .page-notifications .bex-main-tab-btn .badge-pill { font-size: 11px; }
    .page-notifications #bildirim-main-section > .bex-social-intro { padding-bottom: 10px; }
    .member-page .member-card { border-radius: 0; }
    .page-reels .bex-social-state { border-radius: 0; }
}
@media (max-width: 374px) {
    .bex-social-intro { flex-wrap: wrap; }
    .bex-social-intro .bex-social-primary { width: 100%; }
    .page-notifications .bex-main-tab-btn { flex-wrap: wrap; gap: 4px; }
}