:root {

    --bex-z-content: 10;

    --bex-z-sticky-header: 60;

    --bex-z-bottom-nav: 1000;

    --bex-z-dropdown: 1500;

    --bex-z-drawer: 2000;

    --bex-z-modal-backdrop: 99990;

    --bex-z-modal-surface: 99995;

    --bex-z-modal-footer: 99996;

    --bex-z-toast: 100080;

    --bex-nav-height: calc(56px + env(safe-area-inset-bottom, 0px));

    --bex-nav-bar: 56px;

}



.page-navigation { display: none; }

.page-navigation-label-short { display: none; }

.bex-notification-count {

    position: absolute;

    top: -4px;

    right: -4px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    border: 2px solid var(--wa-surface, #fff);

    border-radius: 999px;

    background: #ef4444;

    color: #fff;

    font: 700 10px/1 var(--wa-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    white-space: nowrap;

    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);

    pointer-events: none;

}

html.dark .bex-notification-count {

    border-color: var(--wa-surface, var(--color-bg-dark));

}

a[data-page-back] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; transition: background-color 0.15s ease; touch-action: manipulation; }

a[data-page-back] svg { flex: 0 0 auto; }

a[data-page-back]:focus-visible, .page-navigation-link:focus-visible { outline: 2px solid var(--wa-green-deep, #25d366); outline-offset: 3px; border-radius: 12px; }

.bex-user-header { min-height: 56px; }

@media (min-width: 640px) { .bex-user-header { min-height: 60px; } }

.bex-user-header .page-title { min-width: 0; }

.bex-user-header .logout-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; }



/* ── Bex Shell Header Profil Avatarı ── */

.bex-user-header .bex-user-header-avatar,

.bex-user-header a[title="Profilim"],

.bex-user-header-avatar {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

    max-width: 34px !important;

    max-height: 34px !important;

    border-radius: 50% !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

}

.bex-user-header .bex-user-header-avatar img,

.bex-user-header a[title="Profilim"] img,

.bex-user-header-avatar-img,

header.bex-user-header img[alt="Profil"] {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

    max-width: 34px !important;

    max-height: 34px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    aspect-ratio: 1 / 1 !important;

    display: block !important;

}





/* ── Bex Sayfa Menüsü (.bex-page-menu) ── */

.bex-page-menu { position: relative; display: inline-block; }

.bex-page-menu[open] { position: relative; z-index: 100000 !important; }

.bex-page-menu summary {

    list-style: none; cursor: pointer; width: 40px; height: 40px; min-width: 40px; min-height: 40px;

    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;

    color: var(--wa-muted, #667781); transition: background-color 0.15s ease, color 0.15s ease;

    user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;

}

.bex-page-menu summary::-webkit-details-marker { display: none; }

.bex-page-menu summary:hover {

    background: rgba(0, 0, 0, 0.05); color: var(--wa-text, var(--color-bg-dark));

}

html.dark .bex-page-menu summary:hover {

    background: rgba(255, 255, 255, 0.08); color: #fff;

}

.bex-page-menu[open] summary {

    background: var(--wa-green-soft, rgba(0, 168, 132, 0.12));

    color: var(--wa-primary, #00a884);

}

.bex-page-menu-list {

position: absolute; right: 0; top: calc(100% + 6px);

min-width: 220px; width: max-content; max-width: min(280px, calc(100vw - 16px)); max-height: min(70vh, calc(100dvh - 96px));

    background: var(--wa-surface, var(--color-bg-light));

    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.1));

    border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08);

    padding: 6px; z-index: 100001 !important; display: flex; flex-direction: column; gap: 2px;

    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);

    animation: bexMenuIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);

    overflow-y: auto;

}

@media (max-width: 767px) {

    .bex-page-menu-list {

        max-height: min(70vh, calc(100dvh - var(--bex-nav-height, calc(56px + env(safe-area-inset-bottom, 0px))) - 72px));

    }

}

html.dark .bex-page-menu-list {

    background: var(--wa-surface, #1f2c34);

    border-color: var(--wa-line, rgba(255, 255, 255, 0.12));

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.3);

}



/* Açık menüye sahip ebeveyn konteyner ve başlıkların z-index'ini zirveye çıkar */

header:has(.bex-page-menu[open]),

.bex-user-header:has(.bex-page-menu[open]),

.member-topbar:has(.bex-page-menu[open]),

#kesfet-desktop-sidebar:has(.bex-page-menu[open]),

#kesfet-main-section:has(.bex-page-menu[open]),

#odalar-desktop-sidebar:has(.bex-page-menu[open]),

#odalar-main-section:has(.bex-page-menu[open]),

#bildirim-desktop-sidebar:has(.bex-page-menu[open]),

#bildirim-main-section:has(.bex-page-menu[open]),

#messenger-sidebar:has(.bex-page-menu[open]),

#member-profile-sidebar:has(.bex-page-menu[open]),

.member-profile-sidebar:has(.bex-page-menu[open]),

aside:has(.bex-page-menu[open]),

section:has(.bex-page-menu[open]),

.bex-menu-is-open {

    z-index: 100055 !important;

    overflow: visible !important;

}



.bex-page-menu-list {

    z-index: 100060 !important;

}



/* Sticky üst başlıklar (sayfa kaydırılsa dahi üstte kalır) */

.bex-user-header,

.member-topbar {

    position: sticky !important;

    top: 0;

    z-index: 60 !important;

}



/* Flex/panel üst başlıkları */

#kesfet-desktop-sidebar > header,

#kesfet-main-section > header,

#odalar-desktop-sidebar > header,

#odalar-main-section > header,

#bildirim-desktop-sidebar > header,

#bildirim-main-section > header,

body.page-search header,

body.page-groups header,

body.page-channels header,

body.page-explore header,

body.page-rooms header,

body.page-notifications header {

position: relative;

    z-index: 60 !important;

}

.bex-page-menu-list a {

display: flex;

align-items: center;

gap: 10px;

min-height: 36px;

padding: 6px 10px;

    border-radius: 12px;

    font-size: 13.5px;

    font-weight: 500;

    color: var(--wa-text, var(--color-bg-dark));

    text-decoration: none;

    transition: all 0.14s ease;

    touch-action: manipulation;

    min-width: 0;

}

.bex-page-menu-ico {

    width: 28px;

    height: 28px;

    flex: 0 0 28px;

    border-radius: 8px;

    background: rgba(0, 0, 0, 0.04);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--wa-primary, #00a884);

    transition: transform 0.14s ease;

    }

html.dark .bex-page-menu-ico {

    background: rgba(255, 255, 255, 0.05);

}

.bex-page-menu-ico svg {

    width: 18px;

    height: 18px;

    display: block;

}

.bex-page-menu-content {

    display: flex;

    flex-direction: column;

    min-width: 0;

    flex: 1 1 auto;

    gap: 1.5px;

}

.bex-page-menu-txt {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13.5px;

    font-weight: 600;

    line-height: 1.25;

    color: var(--wa-text, var(--color-bg-dark));

}

.bex-page-menu-desc {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    color: var(--wa-muted, #667781);

    line-height: 1.2;

}

.bex-page-menu-badge {

    padding: 2px 7px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    background: rgba(0, 168, 132, 0.14);

    color: var(--color-primary);

    border: 1px solid rgba(0, 168, 132, 0.25);

    margin-left: 6px;

    flex-shrink: 0;

}

.bex-page-menu-badge.is-trend {

    background: rgba(236, 72, 153, 0.14);

    color: #ec4899;

    border-color: rgba(236, 72, 153, 0.28);

}

.bex-page-menu-badge.is-live {

    background: rgba(239, 68, 68, 0.14);

    color: #ef4444;

    border-color: rgba(239, 68, 68, 0.28);

}

.bex-page-menu-badge.is-gold {

    background: rgba(245, 158, 11, 0.15);

    color: #d97706;

    border-color: rgba(245, 158, 11, 0.3);

}

html.dark .bex-page-menu-badge.is-gold {

    color: #fbbf24;

}

.bex-page-menu-list a.is-wallet-item {

background: transparent;

border: 0;

margin: 0;

}

html.dark .bex-page-menu-list a.is-wallet-item {

    background: rgba(245, 158, 11, 0.12);

    border-color: rgba(245, 158, 11, 0.25);

}

.bex-page-menu-list a:hover {

    background: rgba(0, 0, 0, 0.05);

}

.bex-page-menu-list a:hover .bex-page-menu-ico {

    transform: scale(1.08);

}

html.dark .bex-page-menu-list a {

    color: #e9edef !important;

}

html.dark .bex-page-menu-list a .bex-page-menu-txt {

    color: #e9edef !important;

}

html.dark .bex-page-menu-list a .bex-page-menu-desc {

    color: #8696a0 !important;

}

html.dark .bex-page-menu-list a:hover {

    background: rgba(255, 255, 255, 0.08) !important;

    color: var(--color-bg-light) !important;

}

.bex-page-menu-list a.bex-page-menu-logout {

color: #ef4444 !important;

border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));

margin-top: 2px;

padding-top: 6px;

}

.bex-page-menu-list a.bex-page-menu-logout .bex-page-menu-ico {

color: #ef4444;

background: rgba(239, 68, 68, 0.1);

}

.bex-page-menu-list a.bex-page-menu-logout .bex-page-menu-txt {

    color: #ef4444 !important;

}

html.dark .bex-page-menu-list a.bex-page-menu-logout {

    border-top-color: rgba(255, 255, 255, 0.08);

}

.bex-page-menu-list button.bex-page-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    width: 100%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--wa-text, var(--color-bg-dark));
    background: transparent;
    border: none;
    text-align: left;
    text-decoration: none;
    transition: all 0.14s ease;
    touch-action: manipulation;
    min-width: 0;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
}
.bex-page-menu-list button.bex-page-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}
.bex-page-menu-list button.bex-page-menu-item:hover .bex-page-menu-ico {
    transform: scale(1.08);
}
html.dark .bex-page-menu-list button.bex-page-menu-item {
    color: #e9edef !important;
}
html.dark .bex-page-menu-list button.bex-page-menu-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-bg-light) !important;
}
.bex-page-menu-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--wa-line, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
}
html.dark .bex-page-menu-divider {
    background: var(--wa-line, rgba(255, 255, 255, 0.08));
}

.bex-page-menu-list a.bex-page-menu-logout:hover {

    background: rgba(239, 68, 68, 0.12) !important;

}

@keyframes bexMenuIn {

    from { opacity: 0; transform: translateY(-6px) scale(0.96); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}



@media (max-width: 767px) {

    /* Masaüstü rayını mobilde kesinlikle gizle ve sıfır genişlik ata */

    #wa-rail,

    .bex-desktop-rail {

        display: none !important;

        visibility: hidden !important;

        width: 0 !important;

        min-width: 0 !important;

        max-width: 0 !important;

        height: 0 !important;

        pointer-events: none !important;

        overflow: hidden !important;

    }



    /* ── Mobil Alt Gezinme Çubuğu (#app-tabs & .page-navigation) — Sabit Konum ve Sıfır Hatalı Boşluk ── */

    body.bex-wa #app-tabs,

    body.bex-user-page #app-tabs,

    body.member-page #app-tabs,

    body #app-tabs,

    .page-navigation {

        position: fixed !important;

        inset: auto 0 0 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

        top: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        min-height: var(--bex-nav-height) !important;

        height: var(--bex-nav-height) !important;

        max-height: var(--bex-nav-height) !important;

        padding-top: 0 !important;

        padding-bottom: env(safe-area-inset-bottom, 0px) !important;

        padding-left: max(2px, env(safe-area-inset-left, 2px)) !important;

        padding-right: max(2px, env(safe-area-inset-right, 2px)) !important;

        overflow: hidden !important;

        background: var(--wa-surface, rgba(255, 255, 255, 0.98)) !important;

        color: var(--wa-text-secondary, #54656F) !important;

        backdrop-filter: blur(20px) saturate(180%) !important;

        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

        border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04) !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-around !important;

        z-index: 1000 !important;

        contain: layout style;

        user-select: none;

        -webkit-user-select: none;

        font-family: var(--wa-font, 'Inter', -apple-system, sans-serif);

    }

    

    html.dark body.bex-wa #app-tabs,

    html.dark body.bex-user-page #app-tabs,

    html.dark body.member-page #app-tabs,

    html.dark body #app-tabs,

    html.dark .page-navigation {

        background: var(--wa-surface, rgba(17, 27, 33, 0.98)) !important;

        border-top-color: var(--wa-line, rgba(255, 255, 255, 0.08)) !important;

        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.35) !important;

        color: var(--wa-text-secondary, #AEBAC1) !important;

    }

    



    /* ── Mobil Gövde Alt Boşluğu: Sadece Menü Görünürken ve Tam Nav Yüksekliği Kadar (Mobilde) ── */

    @media (max-width: 767.98px) {

    body.has-page-navigation:not(.page-reels):not(.chat-open):not(.kb-open):not(.bex-modal-open):not(.has-active-modal):not(.bex-user-page):not(.page-explore):not(.page-rooms):not(.page-notifications):not(.member-page):not(.page-search):not(.page-groups),

    body.has-bottom-nav:not(.page-reels):not(.chat-open):not(.kb-open):not(.bex-modal-open):not(.has-active-modal):not(.bex-user-page):not(.page-explore):not(.page-rooms):not(.page-notifications):not(.member-page):not(.page-search):not(.page-groups) {

    padding-bottom: var(--bex-nav-height, calc(56px + env(safe-area-inset-bottom, 0px))) !important;

    box-sizing: border-box !important;

    }

    }

    

    body.page-reels,

    body.page-reels.has-page-navigation,

    body.page-reels.has-bottom-nav,

    body.chat-open,

    body.kb-open,

    body.bex-modal-open,

    body.has-active-modal,

    body.overflow-hidden.has-page-navigation,

    body.overflow-hidden.has-bottom-nav,

    body.page-rooms.has-page-navigation,

    body.page-notifications.has-page-navigation,

    body.member-page.has-page-navigation,

    body.member-page.has-bottom-nav,

    body.page-search.has-page-navigation,

    body.page-search.has-bottom-nav,

    body.page-explore.has-page-navigation,

    body.page-groups.has-page-navigation,

    body.bex-user-page.has-page-navigation {

    padding-bottom: 0 !important;

    }

    body.page-search.has-page-navigation > main,

    body.page-search.has-page-navigation #arama-panes {

        padding-bottom: 0 !important;

        margin-bottom: 0 !important;

    }



    /* Sabit alt menünün kapattığı son içerik: kaydırma alanına tek, tam uyumlu pay.

       Gövde boşluğu bu sayfalarda sıfırlandığı için içerik alt bara sıfır mesafede biter. */

    @media (max-width: 767.98px) {

        body.page-search.has-page-navigation #search-user-list,

        body.page-explore.has-page-navigation #kesfet-main-section,

        body.page-rooms.has-page-navigation #odalar-main-section > .overflow-y-auto,

        body.page-notifications.has-page-navigation #bildirim-main-section > .overflow-y-auto,

        body.page-groups.has-page-navigation #grup-list,

        body.member-page.has-page-navigation .member-sidebar-scroll,

        body.member-page.has-page-navigation .member-workspace-scroll,

        body.bex-user-page.has-page-navigation .bex-user-container {

            padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px)) !important;

            scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px)) !important;

            box-sizing: border-box !important;

        }

    }

    



    /* ── Aktif Modal, Cüzdan, Hikaye Görüntüleyici, Aksiyon Menüsü veya Sanal Klavye Açıkken Alt Gezinmeyi Kesinlikle Gizle ── */

    body.chat-open #app-tabs,

    body.chat-open .page-navigation,

    body.kb-open #app-tabs,

    body.kb-open .page-navigation,

    body.bex-modal-open #app-tabs,

    body.bex-modal-open .page-navigation,

    body.has-active-modal #app-tabs,

    body.has-active-modal .page-navigation,

    body:has(.bex-wallet-modal-overlay.is-active) #app-tabs,

    body:has(.bex-wallet-modal-overlay.is-active) .page-navigation,

    body:has(#bex-wallet-modal-overlay.is-active) #app-tabs,

    body:has(#bex-wallet-modal-overlay.is-active) .page-navigation,

    body:has(#bex-story-composer-modal.is-open) #app-tabs,

    body:has(#bex-story-composer-modal.is-open) .page-navigation,

    body:has(#bex-story-viewer-modal.is-open) #app-tabs,

    body:has(#bex-story-viewer-modal.is-open) .page-navigation,

    body:has(#bex-action-center-sheet:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#bex-action-center-sheet:not(.hidden):not([style*="display: none"])) .page-navigation,

    body:has(#bex-disappearing-modal:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#bex-disappearing-modal:not(.hidden):not([style*="display: none"])) .page-navigation,

    body:has(#bex-linked-devices-sheet:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#bex-linked-devices-sheet:not(.hidden):not([style*="display: none"])) .page-navigation,

    body:has(#bex-newchat-modal:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#bex-newchat-modal:not(.hidden):not([style*="display: none"])) .page-navigation,

    body:has(#bex-newgroup-modal:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#bex-newgroup-modal:not(.hidden):not([style*="display: none"])) .page-navigation,

    body:has(#sheet-settings:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#sheet-settings:not(.hidden):not([style*="display: none"])) .page-navigation,

    body:has(.bex-lightbox-backdrop.is-open) #app-tabs,

    body:has(.bex-lightbox-backdrop.is-open) .page-navigation,

    body:has([aria-modal="true"].is-active) #app-tabs,

    body:has([aria-modal="true"].is-active) .page-navigation,

    body:has(.modal.show) #app-tabs,

    body:has(.modal.show) .page-navigation,

    body:has(.swal2-container) #app-tabs,

    body:has(.swal2-container) .page-navigation,

    body.has-active-stage #app-tabs,

    body.has-active-stage .page-navigation,

    body:has(.wa-room-stage-view) #app-tabs,

    body:has(.wa-room-stage-view) .page-navigation,

    body:has(#stage-container:not(.hidden):not([style*="display: none"])) #app-tabs,

    body:has(#stage-container:not(.hidden):not([style*="display: none"])) .page-navigation {

        display: none !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform: translateY(120%) !important;

        opacity: 0 !important;

    }

    

/* Panel kendisi kaymaz; pay kayan listenin sonundadır. Panel boşluğu

   çift aralık bırakırdı, bu yüzden sıfır kalır. */

body.bex-wa #messenger-sidebar,

body.page-groups #messenger-sidebar,

body.page-search #messenger-sidebar {

    padding-bottom: 0 !important;

    box-sizing: border-box !important;

}

@media (max-width: 767.98px) {

    body.bex-wa #thread-list-main,

    body.bex-wa #thread-list-archived,

    body.page-channels.has-page-navigation .kanal-liste {

        padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px)) !important;

        scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px)) !important;

        box-sizing: border-box !important;

    }

    

    body.has-page-navigation:is(.chat-open, .page-reels, :has(#pane-chat)) > main {

      height: 100dvh !important;

      max-height: 100dvh !important;

    }

    }



@media (min-width: 768px) {

    body.bex-wa #thread-list-main,

    body.bex-wa #thread-list-archived,

    body.page-channels.has-page-navigation .kanal-liste {

        padding-bottom: 8px !important;

        scroll-padding-bottom: 8px !important;

        box-sizing: border-box !important;

    }

    

    body.has-page-navigation:is(.chat-open, .page-reels, :has(#pane-chat)) > main {

      height: 100dvh !important;

      max-height: 100dvh !important;

    }

    }

    



    /* ── Merkezi Oluşturma (+) Butonu — alt çubuğun dikey ortasında ── */

    .page-navigation-create {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    align-self: center !important;

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    min-height: 32px !important;

    max-width: 32px !important;

    max-height: 32px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;

    background: linear-gradient(135deg, #00A884 0%, var(--color-primary) 100%) !important;

    color: var(--color-bg-light) !important;

    box-shadow: 0 2px 8px rgba(0, 128, 105, 0.28) !important;

    border: 2px solid var(--wa-surface, var(--color-bg-light)) !important;

        transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease !important;

        cursor: pointer !important;

        z-index: 46 !important;

        flex-shrink: 0 !important;

        touch-action: manipulation !important;

        -webkit-tap-highlight-color: transparent !important;

    }



    .page-navigation-create svg {

        stroke: var(--color-bg-light) !important;

    }



    .page-nav-badge {

        position: absolute !important;

        top: -3px !important;

        right: 2px !important;

        min-width: 15px !important;

        height: 15px !important;

        padding: 0 3.5px !important;

        border-radius: 999px !important;

        background: #ef4444 !important;

        color: var(--color-bg-light) !important;

        font-size: 9px !important;

        font-weight: 700 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        line-height: 1 !important;

        border: 1.5px solid var(--wa-surface, #fff) !important;

        box-sizing: border-box !important;

    }



    html.dark .page-nav-badge {

        border-color: var(--wa-surface, var(--color-bg-dark)) !important;

    }



    /* WhatsApp Kanonik Yeşil Sohbet Rozeti */

    .page-nav-badge.bex-badge-emerald {

        background: #25D366 !important;

        color: var(--color-bg-dark) !important;

        font-weight: 800 !important;

    }



    html.dark .page-nav-badge.bex-badge-emerald {

        background: #25D366 !important;

        color: var(--color-bg-dark) !important;

        font-weight: 800 !important;

    }

    

    html.dark .page-navigation-create {

        background: linear-gradient(135deg, #25D366 0%, #00A884 100%) !important;

        border-color: var(--wa-surface, var(--color-bg-dark)) !important;

        box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4) !important;

    }

    

    .page-navigation-create:hover {

        transform: translateY(-1px) scale(1.04) !important;

        box-shadow: 0 6px 18px rgba(0, 128, 105, 0.42), 0 3px 6px rgba(0, 0, 0, 0.1) !important;

    }



    html.dark .page-navigation-create:hover {

        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 3px 6px rgba(0, 0, 0, 0.45) !important;

    }



    .page-navigation-create:active {

        transform: scale(0.92) !important;

        box-shadow: 0 2px 8px rgba(0, 128, 105, 0.25) !important;

    }



    html.dark .page-navigation-create:active {

        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25) !important;

    }

        /* ── Menü Öğesi Bağlantıları ── */

    .page-navigation-link {

    flex: 1 1 0 !important;

    min-width: 0 !important;

    max-width: 100% !important;

    height: var(--bex-nav-bar) !important;

    max-height: var(--bex-nav-bar) !important;

    min-height: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 1px !important;

    padding: 2px 1px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

        color: var(--wa-text-secondary, #54656F) !important;

        text-decoration: none !important;

        border-radius: 12px !important;

        -webkit-tap-highlight-color: transparent !important;

        touch-action: manipulation !important;

        transition: color 0.15s ease, transform 0.15s ease !important;

    }

    

    html.dark .page-navigation-link {

        color: var(--wa-text-secondary, #AEBAC1) !important;

    }



    .page-navigation-link:hover {

        color: var(--wa-text, var(--color-bg-dark)) !important;

    }



    html.dark .page-navigation-link:hover {

        color: var(--color-bg-light) !important;

    }



    .page-navigation-link:active {

        transform: scale(0.94) !important;

    }

    

    .page-navigation-link.is-active,

    .page-navigation-link.on {

        color: var(--bex-primary, var(--color-primary)) !important;

    }

    

    html.dark .page-navigation-link.is-active,

    html.dark .page-navigation-link.on {

        color: var(--wa-green-deep, #25D366) !important;

    }

    

    .page-navigation-icon {

    display: grid !important;

    place-items: center !important;

    width: 24px !important;

    height: 20px !important;

        border-radius: 0 !important;

        background: transparent !important;

        color: inherit !important;

        transition: color 0.18s ease !important;

    }

    .page-navigation-icon svg {

    width: 20px !important;

    height: 20px !important;

        stroke: currentColor !important;

    }

    .page-navigation-icon svg polygon[fill="currentColor"] {

        fill: currentColor !important;

    }

    

    /* Aktif sekme yalnızca ikon rengiyle belli olur; arkada kapsül/daire olmaz. */

    .page-navigation-link.is-active .page-navigation-icon,

    html.dark .page-navigation-link.is-active .page-navigation-icon {

    background: transparent !important;

    }

    

    .page-navigation-label {

    font-size: 9px !important;

    font-weight: 600 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;

    max-width: 100% !important;

    letter-spacing: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    transition: font-weight 0.15s ease !important;

    }

    /* Profil fotoğrafı diğer gezinme ikonlarıyla aynı boyutta kalır. */

    .page-navigation-link[data-page-tab="profile"] {

        justify-content: center !important;

        align-items: center !important;

        gap: 2px !important;

        padding: 2px 1px !important;

    }

    .page-navigation-link[data-page-tab="profile"] .page-navigation-icon {

    width: 24px !important;

    height: 20px !important;

        margin: 0 !important;

    }

    .page-navigation-link[data-page-tab="profile"] .wa-profile-tab-avatar {

        display: grid !important;

        place-items: center !important;

        width: 20px !important;

        height: 20px !important;

        border-radius: 50% !important;

        overflow: hidden !important;

        background: transparent !important;

    }

    .page-navigation-link[data-page-tab="profile"] .wa-profile-tab-avatar img {

        width: 20px !important;

        height: 20px !important;

        max-width: 20px !important;

        max-height: 20px !important;

        border-radius: 50% !important;

        object-fit: cover !important;

        border: 0 !important;

        box-sizing: border-box !important;

        display: block !important;

    }

    .page-navigation-link[data-page-tab="profile"] .page-navigation-label {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        text-align: center !important;

        padding: 0 !important;

    }

    

    .page-navigation-link.is-active .page-navigation-label,

    .page-navigation-link.on .page-navigation-label {

        font-weight: 700 !important;

        color: inherit !important;

    }

    .page-navigation-link.is-active[data-page-tab="profile"] .wa-profile-tab-avatar img,

    .page-navigation-link.on[data-page-tab="profile"] .wa-profile-tab-avatar img {

        box-shadow: 0 0 0 2px var(--wa-primary, var(--color-primary)) !important;

    }

    html.dark .page-navigation-link.is-active[data-page-tab="profile"] .wa-profile-tab-avatar img,

    html.dark .page-navigation-link.on[data-page-tab="profile"] .wa-profile-tab-avatar img {

        box-shadow: 0 0 0 2px var(--wa-green-deep, #25D366) !important;

    }

    

    

    .nav-badge,

    .nav-badge.is-on {

    display: none !important;

    }

    

    }

    

    /* ── Orta-Küçük Mobil Ekranlar (361px - 410px) ── */

@media (max-width: 410px) {

    .page-navigation {

        padding-left: max(2px, env(safe-area-inset-left, 2px)) !important;

        padding-right: max(2px, env(safe-area-inset-right, 2px)) !important;

    }

    

    .page-navigation-icon { width: 26px !important; height: 20px !important; background: transparent !important; }

    .page-navigation-icon svg { width: 20px !important; height: 20px !important; }

    .page-navigation-label { font-size: 10px !important; letter-spacing: 0 !important; }

    .page-navigation-create {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

    margin-top: 0 !important;

    }

}



/* ── Dar Mobil Ekranlar (340px - 360px, Galaxy A / iPhone Mini) ── */

@media (max-width: 360px) {

    .page-navigation {

        padding-left: max(1px, env(safe-area-inset-left, 1px)) !important;

        padding-right: max(1px, env(safe-area-inset-right, 1px)) !important;

        gap: 0 !important;

    }

    

    .page-navigation-label { font-size: 11px !important; letter-spacing: 0 !important; }

    .page-navigation-create {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    min-height: 32px !important;

    margin-top: 0 !important;

    margin-left: 1px !important;

    margin-right: 1px !important;

    border-width: 2.5px !important;

    }

    

    .page-navigation-create svg { width: 17px !important; height: 17px !important; }

    .page-navigation-icon { width: 24px !important; height: 20px !important; background: transparent !important; }

    .page-navigation-icon svg { width: 20px !important; height: 20px !important; }

    .page-navigation-link { min-height: 0 !important; height: var(--bex-nav-bar) !important; max-height: var(--bex-nav-bar) !important; }

}



/* ── Çok Dar Mobil Ekranlar (<= 330px, iPhone SE 1 / Eski Cihazlar) ── */

@media (max-width: 330px) {

    .page-navigation {

        padding-left: 1px !important;

        padding-right: 1px !important;

        gap: 0 !important;

    }

    

    .page-navigation-label {

    display: none !important;

    }

    

    .page-navigation-icon { width: 28px !important; height: 24px !important; background: transparent !important; }

    .page-navigation-icon svg { width: 20px !important; height: 20px !important; }

    .page-navigation-create {

    width: 30px !important;

    height: 30px !important;

    min-width: 30px !important;

    min-height: 30px !important;

    margin-top: 0 !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        border-width: 2px !important;

    }

    

    .page-navigation-create svg { width: 15px !important; height: 15px !important; }

}



/* ── Masaüstü & Tablet (>= 768px): Mobil Alt Gezinmeyi Kesinlikle Gizle ── */

@media (min-width: 768px) {

body:not(.bex-device-mobile) #app-tabs,

body:not(.bex-device-mobile) .page-navigation,

body:not(.bex-device-mobile) .bex-bottom-create-menu,

body:not(.bex-device-mobile) #bex-bottom-menu-backdrop,

body:not(.bex-device-mobile) #bex-bottom-create-menu


display: none !important;

visibility: hidden !important;

pointer-events: none !important;

height: 0 !important;

width: 0 !important;

overflow: hidden !important;

}

    

    body.has-page-navigation,

    body.has-bottom-nav {

        padding-bottom: 0 !important;

    }



    /* Alt menü kapalı: menü yüksekliği kadar boş şerit kalmaz. */

    body.page-search #search-user-list,

    body.page-explore #kesfet-main-section,

    body.page-explore > main > #kesfet-main-section,

    body.page-rooms #odalar-main-section,

    body.page-rooms #odalar-main-section > .overflow-y-auto,

    body.page-rooms > main > #odalar-main-section,

    body.page-notifications #bildirim-main-section,

    body.page-notifications #bildirim-main-section > .overflow-y-auto,

    body.page-notifications > main > #bildirim-main-section,

    body.page-groups #grup-list,

    body.page-groups #mesaj-scroll,

    body.member-page .member-sidebar-scroll,

    body.member-page .member-workspace-scroll,

    body.member-page .member-main,

    body.bex-user-page .bex-user-container,

    body.bex-wa #thread-list-main,

    body.bex-wa #thread-list-archived,

    body.page-channels .kanal-liste,

    body .bex-profile .wa-inbody {

        padding-bottom: 16px !important;

        scroll-padding-bottom: 16px !important;

    }

}



/* Masaüstü cihazlarda alt menü gizlenir çünkü rail her genişlikte görünür.

   Mobil cihazda alt menü her genişlikte kalır; aksi halde yatay tutulan

   telefonda hem rail hem alt menü kapanır. Cihaz sınıfı bex-device.js ve

   PHP body class'ı tarafından atanır. */

@media (max-width: 767.98px) {

  #app-tabs,

  .page-navigation {

    position: fixed !important;

    inset: auto 0 0 0 !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    min-height: var(--bex-nav-height) !important;

    height: var(--bex-nav-height) !important;

    max-height: var(--bex-nav-height) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-around !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 1000 !important;

    background: var(--wa-surface, #fff) !important;

    border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

    padding-top: 0 !important;

    padding-bottom: env(safe-area-inset-bottom, 0px) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    }

    }

    body.bex-device-mobile #app-tabs,

    body.bex-device-mobile .page-navigation {

    position: fixed !important;

    inset: auto 0 0 0 !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    top: auto !important;

    width: 100% !important;

    min-height: var(--bex-nav-height) !important;

    height: var(--bex-nav-height) !important;

    max-height: var(--bex-nav-height) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-around !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 1000 !important;

    background: var(--wa-surface, #fff) !important;

    border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

    padding-top: 0 !important;

    padding-bottom: env(safe-area-inset-bottom, 0px) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    }

  body.bex-device-mobile.has-page-navigation:not(.page-reels):not(.chat-open):not(.kb-open):not(.bex-modal-open):not(.has-active-modal):not(.bex-user-page):not(.page-explore):not(.page-rooms):not(.page-notifications):not(.member-page):not(.page-search):not(.page-groups):not(.bex-profile-open),

  body.bex-device-mobile.has-bottom-nav:not(.page-reels):not(.chat-open):not(.kb-open):not(.bex-modal-open):not(.has-active-modal):not(.bex-user-page):not(.page-explore):not(.page-rooms):not(.page-notifications):not(.member-page):not(.page-search):not(.page-groups):not(.bex-profile-open) {

  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;

  }

  

  /* ── Reels Sayfası Alt Gezinme Menüsü — Diğer Sayfalarla (WhatsApp Teması) Birebir Eşitlendi ── */

body.page-reels #app-tabs,
body.page-reels #app-tabs.page-navigation,
body.page-reels .page-navigation {
    background: var(--wa-surface, rgba(255, 255, 255, 0.98)) !important;
    color: var(--wa-text-secondary, #54656F) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04) !important;
    z-index: 1000 !important;
}

html.dark body.page-reels #app-tabs,
html.dark body.page-reels #app-tabs.page-navigation,
html.dark body.page-reels .page-navigation {
    background: var(--wa-surface, rgba(17, 27, 33, 0.98)) !important;
    border-top-color: var(--wa-line, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.35) !important;
    color: var(--wa-text-secondary, #AEBAC1) !important;
}

body.page-reels #app-tabs .page-navigation-link {
    color: var(--wa-text-secondary, #54656F) !important;
}

html.dark body.page-reels #app-tabs .page-navigation-link {
    color: var(--wa-text-secondary, #AEBAC1) !important;
}

body.page-reels #app-tabs .page-navigation-link:hover {
    color: var(--wa-text, var(--color-bg-dark)) !important;
}

html.dark body.page-reels #app-tabs .page-navigation-link:hover {
    color: var(--color-bg-light) !important;
}

body.page-reels #app-tabs .page-navigation-link.is-active,
body.page-reels #app-tabs .page-navigation-link.on {
    color: var(--wa-primary, var(--color-primary, #00A884)) !important;
}

html.dark body.page-reels #app-tabs .page-navigation-link.is-active,
html.dark body.page-reels #app-tabs .page-navigation-link.on {
    color: var(--wa-green-deep, #25D366) !important;
}

body.page-reels #app-tabs .page-navigation-label {
    color: inherit !important;
}

body.page-reels #app-tabs .page-navigation-icon svg,
body.page-reels .page-navigation-icon svg {
    stroke: currentColor !important;
    fill: none !important;
}

body.page-reels #app-tabs .page-navigation-icon svg polygon,
body.page-reels .page-navigation-icon svg polygon {
    fill: currentColor !important;
    stroke: none !important;
}

body.bex-device-mobile #wa-rail,

body.bex-device-mobile #wa-rail.bex-desktop-rail {

display: none !important;

}

body.bex-device-mobile.has-desktop-rail {

padding-left: 0 !important;

}

/* Masaüstü (>= 768px): rail kalır, alt menü kapanır. */

@media (min-width: 768px) {

#app-tabs,

.page-navigation,

.bex-mobile-notif,

body.page-reels #app-tabs,

body.page-reels .page-navigation {

display: none !important;

visibility: hidden !important;

pointer-events: none !important;

}

}

/* Telefon (< 768px): alt menü her sayfada, Reels dahil, görünür. */

@media (max-width: 767.98px) {

body #app-tabs,

body .page-navigation,

body.page-reels #app-tabs,

body.page-reels .page-navigation,

body.bex-device-desktop #app-tabs,

body.bex-device-desktop .page-navigation {

display: flex !important;

visibility: visible !important;

pointer-events: auto !important;

position: fixed !important;

inset: auto 0 0 0 !important;

width: 100% !important;

height: var(--bex-nav-height) !important;

min-height: var(--bex-nav-height) !important;

max-height: var(--bex-nav-height) !important;

overflow: hidden !important;

z-index: 1000 !important;

}

}

body.bex-device-desktop.has-page-navigation,

body.bex-device-desktop.has-bottom-nav,

body.bex-device-desktop.has-page-navigation > main,

body.bex-device-desktop.page-explore #kesfet-main-section,

body.bex-device-desktop.page-rooms #odalar-main-section,

body.bex-device-desktop.page-notifications #bildirim-main-section,

body.bex-device-desktop.page-search #search-user-list,

body.bex-device-desktop.member-page .member-main,

body.bex-device-desktop .bex-profile .wa-inbody {

    padding-bottom: 0 !important;

}



/* Pull-to-refresh & Touch Navigation Animations */

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-spin { animation: spin 0.8s linear infinite; }

html.dark #bex-universal-pull { background: rgba(17, 27, 33, 0.88) !important; color: #10b981 !important; }



/* Canlı oda, sohbet veya modal alt menüyü gizleyince payı da kalkar. */

body.has-active-stage .page-navigation,

body:has(#wa-room-stage:not([style*="display: none"])) .page-navigation,

body:has(.wa-room-stage-view:not([style*="display: none"])) .page-navigation,

.page-navigation.wa-hidden-by-stage {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

    height: 0 !important;

    min-height: 0 !important;

    padding: 0 !important;

    border: 0 !important;

}



body.chat-open.has-page-navigation,

body.chat-open.has-bottom-nav,

body.kb-open.has-page-navigation,

body.bex-modal-open.has-page-navigation,

body.has-active-modal.has-page-navigation,

body.has-active-stage.has-page-navigation {

    padding-bottom: 0 !important;

}



body.chat-open #thread-list-main,

body.chat-open #thread-list-archived,

body.chat-open #mesaj-scroll,

body.has-active-stage #odalar-main-section,

body.has-active-stage #odalar-main-section > .overflow-y-auto,

body.bex-modal-open #kesfet-main-section,

body.has-active-modal #kesfet-main-section {

    padding-bottom: 0 !important;

    scroll-padding-bottom: 0 !important;

}





/* ── Bex Alt Gezinme Açılır Submenu (Bottom Navigation Submenu) ── */

.bex-bottom-menu-backdrop {

    position: fixed;

    inset: 0;

    z-index: 100040;

    background: rgba(11, 20, 26, 0.45);

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    animation: bexFadeIn 0.2s ease-out;

}

.bex-bottom-menu-backdrop[hidden] {

    display: none !important;

}



.bex-bottom-create-menu {

    position: fixed;

    bottom: calc(var(--bex-nav-height, 56px) + 12px);

    left: 50%;

    transform: translateX(-50%);

    width: min(340px, calc(100vw - 24px));

    z-index: 100050;

    animation: bexSubmenuIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}

.bex-bottom-create-menu[hidden] {

    display: none !important;

}



.bex-bottom-menu-card {

    position: relative;

    background: var(--wa-surface, var(--color-bg-light));

    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.1));

    border-radius: 22px;

    padding: 14px;

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.08);

}

html.dark .bex-bottom-menu-card {

    background: var(--wa-surface, #1f2c34);

    border-color: var(--wa-line, rgba(255, 255, 255, 0.12));

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.3);

}



.bex-bottom-menu-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 10px;

    margin-bottom: 10px;

    border-bottom: 1px solid var(--wa-line, rgba(0, 0, 0, 0.06));

}

html.dark .bex-bottom-menu-header {

    border-bottom-color: var(--wa-line, rgba(255, 255, 255, 0.08));

}



.bex-bottom-menu-close {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: none;

    background: rgba(0, 0, 0, 0.05);

    color: var(--wa-muted, #667781);

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    line-height: 1;

}

html.dark .bex-bottom-menu-close {

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

}



.bex-bottom-menu-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

}



.bex-bottom-menu-item {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 12px 6px;

    border-radius: 14px;

    border: none;

    background: rgba(0, 0, 0, 0.02);

    cursor: pointer;

    transition: all 0.16s ease;

    touch-action: manipulation;

}

html.dark .bex-bottom-menu-item {

    background: rgba(255, 255, 255, 0.04);

}

.bex-bottom-menu-item:hover,

.bex-bottom-menu-item:focus-visible {

    background: var(--wa-search, rgba(0, 168, 132, 0.08));

    transform: translateY(-2px);

}



.bex-bottom-menu-icon {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: transform 0.16s ease;

}

.bex-bottom-menu-item:hover .bex-bottom-menu-icon {

    transform: scale(1.08);

}



.bex-bottom-menu-label {

    font-size: 11px;

    font-weight: 700;

    color: var(--wa-text, var(--color-bg-dark));

    text-align: center;

    line-height: 1.2;

}

html.dark .bex-bottom-menu-label {

    color: #e9edef;

}



.bex-bottom-menu-tag {

    position: absolute;

    top: 4px;

    right: 4px;

    background: linear-gradient(135deg, #ec4899, #f43f5e);

    color: #fff;

    font-size: 9px;

    font-weight: 800;

    padding: 1px 5px;

    border-radius: 6px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.bex-bottom-menu-footer-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 10px;

    padding: 8px 12px;

    border-radius: 12px;

    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));

    background: rgba(0, 0, 0, 0.02);

    color: var(--wa-muted, #54656F);

    font-size: 11.5px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.16s ease;

    touch-action: manipulation;

}

html.dark .bex-bottom-menu-footer-btn {

    border-color: var(--wa-line, rgba(255, 255, 255, 0.1));

    background: rgba(255, 255, 255, 0.04);

    color: var(--wa-muted, #8696A0);

}

.bex-bottom-menu-footer-btn:hover,

.bex-bottom-menu-footer-btn:focus-visible {

    background: var(--wa-search, rgba(0, 168, 132, 0.08));

    color: var(--wa-text, var(--color-bg-dark));

}

html.dark .bex-bottom-menu-footer-btn:hover,

html.dark .bex-bottom-menu-footer-btn:focus-visible {

    color: var(--color-bg-light);

}



.bex-bottom-menu-pointer {

    display: none !important;

}

html.dark .bex-bottom-menu-footer-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 10px;

    padding: 8px 12px;

    border-radius: 12px;

    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));

    background: rgba(0, 0, 0, 0.02);

    color: var(--wa-muted, #54656F);

    font-size: 11.5px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.16s ease;

    touch-action: manipulation;

}

html.dark .bex-bottom-menu-footer-btn {

    border-color: var(--wa-line, rgba(255, 255, 255, 0.1));

    background: rgba(255, 255, 255, 0.04);

    color: var(--wa-muted, #8696A0);

}

.bex-bottom-menu-footer-btn:hover,

.bex-bottom-menu-footer-btn:focus-visible {

    background: var(--wa-search, rgba(0, 168, 132, 0.08));

    color: var(--wa-text, var(--color-bg-dark));

}

html.dark .bex-bottom-menu-footer-btn:hover,

html.dark .bex-bottom-menu-footer-btn:focus-visible {

    color: var(--color-bg-light);

}



.bex-bottom-menu-pointer {

    background: var(--wa-surface, #1f2c34);

    border-color: var(--wa-line, rgba(255, 255, 255, 0.12));

}



.page-navigation-create.is-open {

    transform: rotate(45deg) scale(1.05) !important;

    background: #ef4444 !important;

    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;

}



@keyframes bexSubmenuIn {

    from {

        opacity: 0;

        transform: translateX(-50%) translateY(14px) scale(0.94);

    }

    to {

        opacity: 1;

        transform: translateX(-50%) translateY(0) scale(1);

    }

}

@keyframes bexFadeIn {

from { opacity: 0; }

to { opacity: 1; }

}



/* ── Alt menü kilidi: yedi öğe eşit, çubuğun içinde, cihaza göre ölçeklenir ── */

body #app-tabs.page-navigation,

body .page-navigation#app-tabs {

--bex-nav-bar: 56px;

--bex-nav-height: calc(var(--bex-nav-bar) + env(safe-area-inset-bottom, 0px));

--bex-nav-icon: 20px;

--bex-nav-label: 10px;

--bex-nav-plus: 32px;

display: flex !important;

flex-flow: row nowrap !important;

align-items: center !important;

justify-content: stretch !important;

gap: 0 !important;

position: fixed !important;

inset: auto 0 0 0 !important;

top: auto !important;

width: 100% !important;

max-width: 100vw !important;

height: var(--bex-nav-height) !important;

min-height: var(--bex-nav-height) !important;

max-height: var(--bex-nav-height) !important;

padding: 0 max(2px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(2px, env(safe-area-inset-left, 0px)) !important;

margin: 0 !important;

overflow: hidden !important;

box-sizing: border-box !important;

}

body #app-tabs .page-navigation-link {

flex: 1 1 0 !important;

width: auto !important;

min-width: 0 !important;

max-width: none !important;

height: var(--bex-nav-bar) !important;

min-height: 0 !important;

max-height: var(--bex-nav-bar) !important;

margin: 0 !important;

padding: 3px 1px 2px !important;

gap: 1px !important;

align-self: center !important;

overflow: hidden !important;

box-sizing: border-box !important;

}

body #app-tabs .page-navigation-icon,

body #app-tabs .page-navigation-link[data-page-tab="profile"] .page-navigation-icon {

width: var(--bex-nav-icon) !important;

height: var(--bex-nav-icon) !important;

min-height: 0 !important;

max-height: var(--bex-nav-icon) !important;

margin: 0 !important;

}

body #app-tabs .page-navigation-icon svg {

width: var(--bex-nav-icon) !important;

height: var(--bex-nav-icon) !important;

}

body #app-tabs .page-navigation-label {

display: block !important;

height: 12px !important;

max-height: 12px !important;

margin: 0 !important;

padding: 0 !important;

font-size: var(--bex-nav-label) !important;

line-height: 12px !important;

text-align: center !important;

white-space: nowrap !important;

overflow: hidden !important;

text-overflow: ellipsis !important;

}

body #app-tabs .page-navigation-link[data-page-tab="profile"] .wa-profile-tab-avatar,

body #app-tabs .page-navigation-link[data-page-tab="profile"] .wa-profile-tab-avatar img {

width: var(--bex-nav-icon) !important;

height: var(--bex-nav-icon) !important;

max-width: var(--bex-nav-icon) !important;

max-height: var(--bex-nav-icon) !important;

}

body #app-tabs .page-navigation-create {

flex: 0 0 var(--bex-nav-plus) !important;

width: var(--bex-nav-plus) !important;

height: var(--bex-nav-plus) !important;

min-width: var(--bex-nav-plus) !important;

min-height: 0 !important;

max-width: var(--bex-nav-plus) !important;

max-height: var(--bex-nav-plus) !important;

margin: 0 !important;

align-self: center !important;

}

@media (max-width: 410px) {

body #app-tabs.page-navigation { --bex-nav-icon: 18px; --bex-nav-label: 9px; --bex-nav-plus: 30px; }

}

@media (max-width: 360px) {

body #app-tabs.page-navigation { --bex-nav-icon: 18px; --bex-nav-label: 8px; --bex-nav-plus: 28px; }

}

@media (max-width: 330px) {

body #app-tabs.page-navigation { --bex-nav-icon: 20px; --bex-nav-plus: 28px; }

body #app-tabs .page-navigation-label { display: none !important; height: 0 !important; }

}

@media (min-width: 768px) {

body:not(.bex-device-mobile) #app-tabs.page-navigation {

display: none !important;

}

}

body.bex-device-mobile #app-tabs.page-navigation {

display: flex !important;

}





/* ══════════════════════════════════════════════════════════════════

WhatsApp Tarzı Sağ Altta Yüzen Hızlı Sohbet & Rehber Butonu (FAB)

══════════════════════════════════════════════════════════════════ */

.bex-wa-fab-container {

position: fixed !important;

right: max(16px, env(safe-area-inset-right, 16px)) !important;

bottom: calc(var(--bex-nav-height, 56px) + 16px) !important;

z-index: 100060 !important;

display: flex !important;

flex-direction: column !important;

align-items: flex-end !important;

gap: 12px !important;

pointer-events: none !important;

user-select: none !important;

-webkit-user-select: none !important;

transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;

}



/* FAB Ana Dairesel Buton */

.bex-wa-fab-btn,

.bex-floating-fab {

    pointer-events: auto !important;

    width: 56px !important;

    height: 56px !important;

    min-width: 56px !important;

    min-height: 56px !important;

    max-width: 56px !important;

    max-height: 56px !important;

    border-radius: 50% !important;

    background: linear-gradient(135deg, #00A884 0%, var(--color-primary) 100%) !important;

    color: var(--color-bg-light) !important;

    border: none !important;

    outline: none !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    touch-action: manipulation !important;

    -webkit-tap-highlight-color: transparent !important;

    box-shadow: 0 4px 18px rgba(0, 128, 105, 0.42), 0 2px 6px rgba(0, 0, 0, 0.18) !important;

    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background 0.2s ease !important;

    position: relative !important;

    z-index: 1000 !important;

}



html.dark .bex-wa-fab-btn,

html.dark .bex-floating-fab {

    background: #25D366 !important;

    color: var(--color-bg-dark) !important;

    box-shadow: 0 4px 22px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.5) !important;

}



.bex-wa-fab-btn:hover,

.bex-floating-fab:hover {

    transform: scale(1.08) translateY(-1px) !important;

    box-shadow: 0 6px 24px rgba(0, 128, 105, 0.55), 0 3px 8px rgba(0, 0, 0, 0.22) !important;

}



html.dark .bex-wa-fab-btn:hover,

html.dark .bex-floating-fab:hover {

    box-shadow: 0 6px 26px rgba(37, 211, 102, 0.6), 0 3px 8px rgba(0, 0, 0, 0.55) !important;

}



.bex-wa-fab-btn:active,

.bex-floating-fab:active {

    transform: scale(0.92) !important;

}



.bex-wa-fab-icon-main {

    position: relative !important;

    width: 26px !important;

    height: 26px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



.bex-fab-svg-chat,

.bex-fab-svg-close {

    position: absolute !important;

    inset: 0 !important;

    margin: auto !important;

    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;

}



.bex-fab-svg-close {

    opacity: 0 !important;

    transform: rotate(-90deg) scale(0.6) !important;

}



.bex-wa-fab-btn.is-open .bex-fab-svg-chat {

    opacity: 0 !important;

    transform: rotate(90deg) scale(0.6) !important;

}



.bex-wa-fab-btn.is-open .bex-fab-svg-close {

    opacity: 1 !important;

    transform: rotate(0deg) scale(1) !important;

}



/* FAB Hızlı Seçenekler Menüsü (Speed Dial).

   Menü, karartma katmanının (position:fixed) üstünde durması için

   kendisi de fixed olmalı; aksi halde tıklamalar backdrop'a düşer. */

.bex-wa-fab-menu {

position: fixed !important;

right: max(16px, env(safe-area-inset-right, 16px)) !important;

bottom: calc(var(--bex-nav-height, 56px) + 16px + 56px + 14px) !important;

display: flex !important;

flex-direction: column !important;

align-items: flex-end !important;

gap: 10px !important;

margin: 0 !important;

padding: 0 !important;

pointer-events: auto !important;

transform-origin: bottom right !important;

z-index: 100070 !important;

animation: bexFabDialIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}



.bex-wa-fab-menu[hidden] {

display: none !important;

}



@keyframes bexFabDialIn {

from { opacity: 0; transform: translateY(12px) scale(0.94); }

to { opacity: 1; transform: translateY(0) scale(1); }

}



.bex-wa-fab-item {

position: relative !important;

z-index: 1 !important;

display: flex !important;

align-items: center !important;

justify-content: flex-end !important;

gap: 10px !important;

background: transparent !important;

border: none !important;

outline: none !important;

cursor: pointer !important;

touch-action: manipulation !important;

-webkit-tap-highlight-color: transparent !important;

padding: 2px !important;

pointer-events: auto !important;

transition: transform 0.16s ease !important;

}



.bex-wa-fab-item:hover {

    transform: translateX(-3px) !important;

}



.bex-wa-fab-item:active {

    transform: scale(0.95) !important;

}



.bex-wa-fab-label {

    background: var(--wa-surface, var(--color-bg-light)) !important;

    color: var(--wa-text, var(--color-bg-dark)) !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    padding: 7px 13px !important;

    border-radius: 10px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;

    white-space: nowrap !important;

    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

}



html.dark .bex-wa-fab-label {

    background: #202c33 !important;

    color: #e9edef !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;

}



.bex-wa-fab-icon {

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    min-height: 44px !important;

    border-radius: 50% !important;

    color: var(--color-bg-light) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;

    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

}



.bex-wa-fab-item:hover .bex-wa-fab-icon {

    transform: scale(1.1) !important;

}



/* Karartma Backdrop. Menü ve butonun ALTINDA kalmalı (100060 altı). */

.bex-wa-fab-backdrop {

position: fixed !important;

inset: 0 !important;

background: rgba(11, 20, 26, 0.42) !important;

backdrop-filter: blur(2px) !important;

-webkit-backdrop-filter: blur(2px) !important;

z-index: 100040 !important;

pointer-events: auto !important;

transition: opacity 0.2s ease !important;

}



.bex-wa-fab-backdrop[hidden] {

    display: none !important;

}



/* Modallarda, klavyede, aktif sohbette ve reels video izlerken FAB'ı kesinlikle gizle.

   Menü position:fixed olduğu için konteynerle birlikte ayrıca gizlenir. */

body.chat-open .bex-wa-fab-container,

body.chat-open .bex-wa-fab-menu,

body.chat-open .bex-floating-fab,

body.kb-open .bex-wa-fab-container,

body.kb-open .bex-wa-fab-menu,

body.kb-open .bex-floating-fab,

body.wa-page-open .bex-wa-fab-container,

body.wa-page-open .bex-wa-fab-menu,

body.wa-page-open .bex-floating-fab,

body.nav-open .bex-wa-fab-container,

body.nav-open .bex-wa-fab-menu,

body.nav-open .bex-floating-fab,

body.bex-profile-open .bex-wa-fab-container,

body.bex-profile-open .bex-wa-fab-menu,

body.bex-profile-open .bex-floating-fab,

body.bex-modal-open .bex-wa-fab-container,

body.bex-modal-open .bex-wa-fab-menu,

body.bex-modal-open .bex-floating-fab,

body.has-active-modal .bex-wa-fab-container,

body.has-active-modal .bex-wa-fab-menu,

body.has-active-modal .bex-floating-fab,

body.page-reels .bex-wa-fab-container,

body.page-reels .bex-wa-fab-menu,

body.page-reels .bex-floating-fab,

body.has-active-stage .bex-wa-fab-container,

body.has-active-stage .bex-wa-fab-menu,

body.has-active-stage .bex-floating-fab,

body:has(.wa-room-stage-view) .bex-wa-fab-container,

body:has(.wa-room-stage-view) .bex-wa-fab-menu,

body:has(#stage-container:not(.hidden):not([style*="display: none"])) .bex-wa-fab-container,

body:has(#stage-container:not(.hidden):not([style*="display: none"])) .bex-wa-fab-menu,

body:has([aria-modal="true"].is-active) .bex-wa-fab-container,

body:has([aria-modal="true"].is-active) .bex-wa-fab-menu,

body:has(#bex-story-viewer-modal.is-open) .bex-wa-fab-container,

body:has(#bex-story-viewer-modal.is-open) .bex-wa-fab-menu,

body:has(#bex-wallet-modal-overlay.is-active) .bex-wa-fab-container,

body:has(#bex-wallet-modal-overlay.is-active) .bex-wa-fab-menu {

display: none !important;

pointer-events: none !important;

opacity: 0 !important;

transform: none !important;

}



/* Masaüstünde FAB responsive konumlandırma */
@media (min-width: 768px) {
  .bex-wa-fab-container {
    right: 28px !important;
    bottom: 28px !important;
    display: flex !important;
    z-index: 100060 !important;
  }
  .bex-wa-fab-menu {
    right: 28px !important;
    bottom: 96px !important;
    z-index: 100070 !important;
  }
  body:not(.bex-device-mobile):has(#messenger-sidebar) .bex-wa-fab-container,
  body.page-messenger .bex-wa-fab-container {
    left: calc(var(--bex-rail-w, 64px) + 360px - 72px) !important;
    right: auto !important;
    bottom: 24px !important;
    display: flex !important;
  }
  body:not(.bex-device-mobile):has(#messenger-sidebar) .bex-wa-fab-menu,
  body.page-messenger .bex-wa-fab-menu {
    left: calc(var(--bex-rail-w, 64px) + 360px - 72px) !important;
    right: auto !important;
    bottom: 92px !important;
    align-items: flex-start !important;
  }
}







/* WhatsApp FAB Sohbetler ve Keşfet için aktif */

/* Shared header search remains a single keyboard-accessible control. */

.bex-header-search-placeholder {

    display: block;

    padding: 8px 12px 8px 36px;

    border: 1px solid var(--wa-line, #e9edef);

    border-radius: 999px;

    background: var(--wa-search, #f0f2f5);

    color: var(--wa-muted, #667781);

    font-size: 12px;

    text-align: start;

}

.bex-global-header .bex-header-profile { display: inline-flex; align-items: center; justify-content: center; }


/* Desktop strict separation */
body.bex-device-desktop #app-tabs {
    display: none !important;
}