/**

 * BEXGRAM — TAM KAPSAMLI MOBİL ARAYÜZ SİSTEMİ (V2)

 * Referans: cdn/showcase/ (1.png - 8.png)

 * Yalnızca mobil ekranlar için uygulanır (max-width: 767px).

 * Masaüstü ve tablet tasarımına kesinlikle müdahale etmez.

 */



@media (max-width: 767px) {

  :root {

    --bex-m-primary: var(--bex-primary, var(--color-primary));

    --bex-m-primary-dark: var(--bex-primary-dark, #006B57);

    --bex-m-primary-bright: var(--bex-accent, #25D366);

    --bex-m-primary-soft: var(--bex-selected, #E9F8F2);

    --bex-m-primary-very-soft: rgba(0, 128, 105, 0.08);

    --bex-m-bg: var(--bex-bg, #F0F2F5);

    --bex-m-surface: var(--bex-surface-secondary, #F5F6F6);

    --bex-m-card-bg: var(--bex-surface, var(--color-bg-light));

    --bex-m-text: var(--bex-text, var(--color-bg-dark));

    --bex-m-text-secondary: var(--bex-text-secondary, #54656F);

    --bex-m-border: var(--bex-border, #E9EDEF);

    --bex-m-badge-red: var(--bex-danger, #D92D20);

    --bex-m-radius-sm: 8px;

    --bex-m-radius-md: 10px;

    --bex-m-radius-lg: 16px;

    --bex-m-radius-xl: 24px;

    --bex-m-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);

    --bex-m-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);

    --bex-m-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.08);

  }



  html.dark {

    --bex-m-primary: var(--bex-primary, #00A884);

    --bex-m-primary-dark: var(--bex-primary-dark, var(--color-primary));

    --bex-m-primary-bright: var(--bex-accent, #25D366);

    --bex-m-bg: var(--bex-bg, #0B141A);

    --bex-m-surface: var(--bex-surface-secondary, #202C33);

    --bex-m-card-bg: var(--bex-surface, var(--color-bg-dark));

    --bex-m-text: var(--bex-text, #E9EDEF);

    --bex-m-text-secondary: var(--bex-text-secondary, #AEBAC1);

    --bex-m-border: var(--bex-border, #2A3942);

    --bex-m-primary-soft: var(--bex-selected, #182F2A);

    --bex-m-primary-very-soft: rgba(0, 168, 132, 0.1);

  }



  /* ── 1. GENEL MOBİL SIFIRLAMA VE AKICILIK ── */

  body, html {

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

    touch-action: manipulation;

  }



  body.bex-wa,

  body.bex-user-page {

    background-color: var(--bex-m-bg) !important;

    color: var(--bex-m-text) !important;

  }



  /* ── 2. MOBİL ÜST BAR (TOP BAR) ── */

  header.bex-user-header,

  #messenger-sidebar > header {

    background: color-mix(in srgb, var(--bex-m-bg) 92%, transparent) !important;

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

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

    border-bottom: 1px solid var(--bex-m-border) !important;

    min-height: calc(54px + env(safe-area-inset-top, 0px)) !important;

    padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;

    padding-bottom: 8px !important;

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

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

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03) !important;

  }



  .wa-brand span {

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

    font-weight: 800 !important;

    letter-spacing: -0.03em !important;

  }



  /* Jeton Cüzdanı Hapı */

  #btn-sidebar-wallet,

  a[href*="cuzdan.php"] {

    background: var(--bex-m-primary-very-soft) !important;

    border: 1px solid var(--bex-m-primary-soft) !important;

    color: var(--bex-m-primary-dark) !important;

    border-radius: 9999px !important;

    padding: 4px 10px !important;

    font-weight: 700 !important;

    transition: transform 0.15s ease !important;

  }

  #btn-sidebar-wallet:active,

  a[href*="cuzdan.php"]:active {

    transform: scale(0.95);

  }



  /* İkon Butonları */

  .icon-btn,

  .bex-mobile-notif,

  #btn-yeni-sohbet,

  #btn-sidebar-more-menu,

  .bex-updates-shortcut {

    width: 38px !important;

    height: 38px !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: var(--bex-m-text-secondary) !important;

    background: transparent !important;

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

  }

  .icon-btn:active {

    background: var(--bex-m-primary-soft) !important;

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

  }



  /* Bildirim Kırmızı Rozeti */

  #sidebar-notif-badge,

  .bex-badge-unread,

  .unread-badge {

    background: var(--bex-m-badge-red) !important;

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

    font-weight: 700 !important;

    border-radius: 9999px !important;

    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.35) !important;

  }



  /* ── 3. MOBİL ARAMA VE FİLTRE ÇUBUĞU ── */

  .search-pill {

    background: var(--bex-m-surface) !important;

    border: 1px solid var(--bex-m-border) !important;

    border-radius: var(--bex-m-radius-lg) !important;

    height: 40px !important;

    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;

  }

  .search-pill:focus-within {

    border-color: var(--bex-m-primary) !important;

    box-shadow: 0 0 0 3px var(--bex-m-primary-soft) !important;

  }



  .wa-folder-tab,

  .chat-filter {

    border-radius: 9999px !important;

    padding: 6px 14px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    color: var(--bex-m-text-secondary) !important;

    background: var(--bex-m-surface) !important;

    border: 1px solid var(--bex-m-border) !important;

    white-space: nowrap !important;

    transition: all 0.15s ease !important;

  }

  .wa-folder-tab.is-on,

  .chat-filter.is-on {

    background: var(--bex-m-primary) !important;

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

    border-color: var(--bex-m-primary) !important;

    box-shadow: 0 3px 10px rgba(0, 168, 107, 0.3) !important;

  }



  /* ── 4. MOBİL HİKÂYELER BARI (STORIES TRAY) ── */

  #wa-story-bar,

  .wa-story-tray,

  .bex-stories-strip {

    display: flex !important;

    gap: 12px !important;

    padding: 10px 14px !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    background: var(--bex-m-bg) !important;

    border-bottom: 1px solid var(--bex-m-border) !important;

    scrollbar-width: none !important;

  }

  #wa-story-bar::-webkit-scrollbar,

  .wa-story-tray::-webkit-scrollbar,

  .bex-stories-strip::-webkit-scrollbar {

    display: none !important;

  }



  .story-item,

  .wa-story-bubble {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 5px !important;

    flex-shrink: 0 !important;

    width: 66px !important;

    text-align: center !important;

    cursor: pointer !important;

  }

  .story-item .avatar-ring,

  .wa-story-bubble .wa-story-avatar-wrap {

    width: 58px !important;

    height: 58px !important;

    border-radius: 50% !important;

    padding: 2.5px !important;

    background: linear-gradient(135deg, var(--bex-m-primary-bright) 0%, var(--bex-m-primary) 50%, var(--bex-m-primary-dark) 100%) !important;

    box-shadow: 0 3px 8px rgba(0, 168, 107, 0.25) !important;

    position: relative !important;

  }

  .story-item.seen .avatar-ring,

  .wa-story-bubble.is-viewed .wa-story-avatar-wrap {

    background: var(--bex-m-border) !important;

    box-shadow: none !important;

  }

  .story-item img,

  .wa-story-bubble img {

    width: 100% !important;

    height: 100% !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 2px solid var(--bex-m-bg) !important;

  }

  .story-item .story-label,

  .wa-story-bubble .wa-story-name {

    font-size: 11.5px !important;

    font-weight: 500 !important;

    color: var(--bex-m-text) !important;

    max-width: 64px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

  }



  /* ── 5. MOBİL SOHBET LİSTESİ (CHAT ROWS) ── */

  .thread-item,

  .wa-chat-item {

    display: flex !important;

    align-items: center !important;

    padding: 12px 14px !important;

    min-height: 72px !important;

    border-bottom: 1px solid var(--bex-m-border) !important;

    background: var(--bex-m-bg) !important;

    transition: background 0.12s ease !important;

    user-select: none !important;

  }

  .thread-item:active,

  .wa-chat-item:active {

    background: var(--bex-m-surface) !important;

  }

  .thread-item .thread-avatar-wrap,

  .wa-chat-item .wa-avatar-wrap {

    position: relative !important;

    width: 52px !important;

    height: 52px !important;

    flex-shrink: 0 !important;

    margin-right: 12px !important;

  }

  .thread-item .thread-avatar-wrap img,

  .wa-chat-item .wa-avatar-wrap img {

    width: 52px !important;

    height: 52px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

  }

  /* Çevrimiçi Yeşil Nokta */

  .thread-item .online-dot,

  .wa-chat-item .is-online-dot {

    position: absolute !important;

    bottom: 2px !important;

    right: 2px !important;

    width: 13px !important;

    height: 13px !important;

    border-radius: 50% !important;

    background: var(--bex-m-primary-bright) !important;

    border: 2.5px solid var(--bex-m-bg) !important;

  }

  .thread-item .thread-title,

  .wa-chat-item .wa-chat-name {

    font-size: 15.5px !important;

    font-weight: 600 !important;

    color: var(--bex-m-text) !important;

    line-height: 1.3 !important;

  }

  .thread-item .thread-preview,

  .wa-chat-item .wa-chat-last-msg {

    font-size: 13.5px !important;

    color: var(--bex-m-text-secondary) !important;

    line-height: 1.4 !important;

  }

  .thread-item .thread-time,

  .wa-chat-item .wa-chat-time {

    font-size: 12px !important;

    color: var(--bex-m-text-secondary) !important;

    font-weight: 500 !important;

  }



  /* ── 6. MOBİL AKTİF SOHBET DETAY EKRANI (#pane-chat) ── */

  body.chat-open #messenger-sidebar {

    display: none !important;

  }

  body.chat-open #pane-chat {

    display: flex !important;

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100dvh !important;

    z-index: 999 !important;

    background: var(--bex-m-bg) !important;

    flex-direction: column !important;

  }



  /* Sohbet Üst Başlığı */

  #pane-chat header,

  .chat-header-bar {

    background: color-mix(in srgb, var(--bex-m-bg) 95%, transparent) !important;

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

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

    border-bottom: 1px solid var(--bex-m-border) !important;

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

    padding-top: max(6px, env(safe-area-inset-top, 6px)) !important;

    padding-bottom: 6px !important;

    padding-left: 8px !important;

    padding-right: 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;

  }

  #btn-close-chat,

  .chat-back-btn,

  #btn-back-welcome {

    width: 38px !important;

    height: 38px !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

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

  }



  /* Mesaj Balonları */

  .msg-bubble-out,

  .msg-row.is-me .bubble {

    background: var(--bex-m-primary-soft) !important;

    color: var(--bex-m-text) !important;

    border-radius: 18px 18px 4px 18px !important;

    padding: 9px 13px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

    border: 1px solid color-mix(in srgb, var(--bex-m-primary) 15%, transparent) !important;

  }

  .msg-bubble-in,

  .msg-row:not(.is-me) .bubble {

    background: var(--bex-m-card-bg) !important;

    color: var(--bex-m-text) !important;

    border-radius: 18px 18px 18px 4px !important;

    padding: 9px 13px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

    border: 1px solid var(--bex-m-border) !important;

  }



  /* Alt Mesaj Yazma Alanı */

  .chat-footer-composer,

  #composer-bar,

  #active-chat-composer,

  #pane-chat footer > div {

    background: color-mix(in srgb, var(--bex-m-bg) 96%, transparent) !important;

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

    border-top: 1px solid var(--bex-m-border) !important;

    padding: 8px 10px max(10px, env(safe-area-inset-bottom, 10px)) !important;

    gap: 8px !important;

  }

  .composer-input,

  #composer-input {

    background: var(--bex-m-surface) !important;

    border: 1px solid var(--bex-m-border) !important;

    border-radius: 22px !important;

    padding: 9px 14px !important;

    font-size: 15px !important;

    color: var(--bex-m-text) !important;

  }

  .btn-send-message,

  #btn-send {

    width: 42px !important;

    height: 42px !important;

    border-radius: 50% !important;

    background: var(--bex-m-primary) !important;

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

    box-shadow: 0 3px 10px rgba(0, 168, 107, 0.35) !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  /* ── 7. MOBİL ALT NAVİGASYON (7 ÖĞE + MERKEZİ BUTON) ── */

  #app-tabs,

  .page-navigation {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

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

    background: color-mix(in srgb, var(--bex-m-bg) 96%, transparent) !important;

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

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

    border-top: 1px solid var(--bex-m-border) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-around !important;

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

    z-index: 1000 !important;

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

  }



  /* Aktif Sohbet, Klavye veya Modal Açıkken Alt Gezinmeyi 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.bex-drawer-open #app-tabs,

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

  body.wa-media-preview-open #app-tabs,

  body.wa-media-preview-open .page-navigation,

  body:has(#wa-media-preview-modal:not(.hidden)) #app-tabs,

  body:has(#wa-media-preview-modal:not(.hidden)) .page-navigation,

  body:has(#bex-action-center-sheet:not(.hidden)) #app-tabs,

    body:has(.bex-action-center-overlay:not(.hidden)) #app-tabs,

  body:has(.bex-action-center-overlay:not(.hidden)) .page-navigation,

  body:has(#kisi-modal:not(.hidden)) #app-tabs,

  body:has(#kisi-modal:not(.hidden)) .page-navigation,

  body:has(#story-viewer:not(.hidden)) #app-tabs,

  body:has(#story-viewer:not(.hidden)) .page-navigation,

  body:has(.member-modal:not(.hidden)) #app-tabs,

  body:has(.member-modal:not(.hidden)) .page-navigation,

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

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

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

  body:has(.bex-story-viewer-modal) .page-navigation {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

  }



  /* Mobil İletişim & Profil Çekmecesi (#bex-contact-drawer) */

  #bex-contact-drawer-backdrop {

    z-index: 1050 !important;

  }

  #bex-contact-drawer {

    z-index: 1100 !important;

  }



  .page-navigation-link {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  flex: 1 1 0 !important;

  min-width: 0 !important;

  min-height: 0 !important;

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

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

    gap: 2px !important;

    color: var(--bex-m-text-secondary) !important;

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

    text-decoration: none !important;

  }

  .page-navigation-link svg {

    stroke: currentColor !important;

    transition: stroke 0.15s ease !important;

  }

  .page-navigation-label {

    font-size: 10px !important;

    font-weight: 600 !important;

    line-height: 1.15 !important;

    margin-top: 0 !important;

    letter-spacing: -0.2px !important;

    text-align: center !important;

    white-space: nowrap !important;

    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }

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

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

    width: 20px !important;

    height: 20px !important;

  }

  @media (max-width: 350px) {

    .page-navigation-link {

      min-width: 36px !important;

      padding: 0 1px !important;

      flex: 1 1 0% !important;

    }

    .page-navigation-label {

      font-size: 8.5px !important;

      letter-spacing: -0.3px !important;

    }

  }

  .page-navigation-link.is-active {

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

  }

  .page-navigation-link.is-active svg {

    stroke: var(--bex-m-primary) !important;

    stroke-width: 2.2 !important;

  }

  .page-navigation-link:active {

    transform: scale(0.92);

  }



  /* Merkezi Yuvarlak Yeşil '+' Butonu — alt çubuğun dikey ortasında */

  .page-navigation-create,

  #btn-open-action-center {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  align-self: center !important;

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

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

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

  min-height: 0 !important;

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

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

      margin: 0 !important;

      padding: 0 !important;

      overflow: hidden !important;

      box-sizing: border-box !important;

      border-radius: 50% !important;

      background: linear-gradient(135deg, var(--bex-m-primary-bright) 0%, var(--bex-m-primary) 100%) !important;

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

      box-shadow: 0 2px 8px rgba(0, 168, 107, 0.32) !important;

      border: 2px solid var(--bex-m-bg) !important;

    cursor: pointer !important;

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

  }

  .page-navigation-create:active,

  #btn-open-action-center:active {

    transform: scale(0.9) rotate(45deg);

    box-shadow: 0 2px 8px rgba(0, 168, 107, 0.3) !important;

  }



  /* ── 8. MOBİL İŞLEM MERKEZİ (BOTTOM SHEET) ── */

  .bex-action-center-container {

    border-radius: 24px 24px 0 0 !important;

    background: var(--bex-m-bg) !important;

    border: 1px solid var(--bex-m-border) !important;

    border-bottom: none !important;

    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18) !important;

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

  }

  .bex-action-center-handle {

    width: 44px !important;

    height: 5px !important;

    border-radius: 9999px !important;

    background: var(--bex-m-border) !important;

    margin: 10px auto 14px !important;

  }

  .bex-action-item {

    background: var(--bex-m-surface) !important;

    border: 1px solid var(--bex-m-border) !important;

    border-radius: var(--bex-m-radius-md) !important;

    padding: 12px 14px !important;

    transition: all 0.15s ease !important;

  }

  .bex-action-item:active {

    background: var(--bex-m-primary-soft) !important;

    border-color: var(--bex-m-primary) !important;

  }

  .bex-action-icon {

    width: 42px !important;

    height: 42px !important;

    border-radius: 12px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

  }

  .bex-icon-story { background: linear-gradient(135deg, #FF6B6B, #FA5252); color: #fff; }

  .bex-icon-chat { background: linear-gradient(135deg, var(--bex-accent, #25D366), var(--bex-primary, var(--color-primary))); color: #fff; }

  .bex-icon-group { background: linear-gradient(135deg, #4DABF7, #228BE6); color: #fff; }

  .bex-icon-room { background: linear-gradient(135deg, #BE4BDB, #7950F2); color: #fff; }

  .bex-icon-post { background: linear-gradient(135deg, #FFA94D, #FD7E14); color: #fff; }

  .bex-icon-invite { background: linear-gradient(135deg, #20C997, #0CA678); color: #fff; }



  /* ── 9. MOBİL KEŞFET GÖNDERİ KARTLARI (INSTAGRAM STİLİ) ── */

  .wa-feed-post-card,

  .explore-post-card {

    background: var(--bex-m-card-bg) !important;

    border: 1px solid var(--bex-m-border) !important;

    border-radius: var(--bex-m-radius-md) !important;

    margin: 12px 8px !important;

    overflow: hidden !important;

    box-shadow: var(--bex-m-shadow-sm) !important;

  }

  .wa-feed-post-card .post-header {

    padding: 10px 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

  }

  .wa-feed-post-card .post-actions {

    padding: 10px 12px !important;

    display: flex !important;

    align-items: center !important;

    gap: 16px !important;

  }

  .wa-feed-post-card .post-actions button {

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    color: var(--bex-m-text-secondary) !important;

  }

  .wa-feed-post-card .post-actions button.is-liked {

    color: #F43F5E !important;

  }



  /* ── 10. MOBİL CANLI ODALAR (2'Lİ GRID KARTLARI) ── */

  .rooms-grid,

  .odalar-grid {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 10px !important;

    padding: 10px 12px !important;

  }

  .room-card,

  .oda-card {

    background: var(--bex-m-card-bg) !important;

    border: 1px solid var(--bex-m-border) !important;

    border-radius: var(--bex-m-radius-md) !important;

    padding: 12px !important;

    box-shadow: var(--bex-m-shadow-sm) !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

  }

  .room-live-badge {

    background: #F43F5E !important;

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

    font-size: 10px !important;

    font-weight: 800 !important;

    padding: 2px 7px !important;

    border-radius: 9999px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

  }



  /* ── 11. MOBİL PROFİL (BANNER, AVATAR, BİO, SEKMELER) ── */

  .profile-cover {

    height: 140px !important;

    background: linear-gradient(135deg, var(--bex-m-primary) 0%, var(--bex-m-primary-dark) 100%) !important;

    position: relative !important;

  }

  .profile-avatar-wrap {

    margin-top: -46px !important;

    margin-left: 14px !important;

    width: 86px !important;

    height: 86px !important;

    border-radius: 50% !important;

    position: relative !important;

    overflow: visible !important; /* Çerçevelerin kesilmesini önle */

  }

  .profile-avatar-wrap img {

    width: 100% !important;

    height: 100% !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 4px solid var(--bex-m-bg) !important;

    box-shadow: var(--bex-m-shadow-md) !important;

    display: block !important;

  }



  /* ── 12. DAR MOBİL EKRANLAR (max-width: 380px) ── */

  @media (max-width: 380px) {

    .rooms-grid,

    .odalar-grid {

      grid-template-columns: 1fr !important;

    }

    .auth-tab,

    .auth-button {

      padding-left: 8px !important;

      padding-right: 8px !important;

      font-size: 13px !important;

    }

    header.bex-user-header {

      padding-left: 8px !important;

      padding-right: 8px !important;

    }

  }

}





/* ==========================================================================

   BEXGRAM — KATI MOBİL İZOLASYON KURALLARI (V3)

   Mobilde masaüstü rail ve sütunlarını kesin olarak gizler, akıcı tek sütun sunar.

   ========================================================================== */

@media (max-width: 767.98px) {

  #wa-rail,

  .bex-desktop-rail,

  #kesfet-desktop-sidebar,

  #odalar-desktop-sidebar,

  #games-desktop-sidebar {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

    width: 0 !important;

    height: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

  }

}



@media (max-width: 767px) {

  #wa-rail,

  .bex-desktop-rail,

  #kesfet-desktop-sidebar,

  #odalar-desktop-sidebar,

  #games-desktop-sidebar {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

    width: 0 !important;

    height: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

  }



  /* Mobil Alt Bar Güvencesi */

  .page-navigation,

  #app-tabs {

    display: flex !important;

    visibility: visible !important;

  }



  /* Mobilde header'da bexgram yazısı önündeki favicon gösterilir */

  .bex-brand-favicon {

    display: inline-block !important;

    visibility: visible !important;

  }

}