/* Shared appearance tokens for the application and embedded account forms. */
html:root,body.bex-wa{--bex-primary:#0ec26f;--bex-primary-dark:#005BB5;--bex-primary-hover:#0073E6;--bex-light:#E3F2FD;--bex-soft:#F5F6F6;--bex-page:#F0F2F5;--wa-bg:#F0F2F5;--wa-surface:var(--color-bg-light);--wa-welcome:#F0F2F5;--wa-chat:#EFEAE2;--wa-bar:#F0F2F5;--wa-rail:var(--color-bg-light);--wa-search:#F5F6F6;--wa-hover:rgba(0,0,0,.04);--wa-menu-hover:#E3F2FD;--wa-selected:#E3F2FD;--wa-text:var(--color-bg-dark);--wa-text-secondary:#54656F;--wa-muted:#54656F;--wa-faint:#54656F;--wa-line:#E9EDEF;--wa-green:#0ec26f;--wa-green-deep:#0ec26f;--wa-green-soft:#D9F2FD;--wa-green-ink:#005BB5;--wa-incoming:var(--color-bg-light);--wa-outgoing:#D9F2FD;--wa-primary:#0ec26f;--wa-primary-ink:var(--color-bg-light);color-scheme:light}
html:root.dark,html.dark body.bex-wa,html[data-theme="dark"] body.bex-wa,body.dark.bex-wa{--bex-primary:#0ec26f;--bex-primary-dark:#0066CC;--bex-primary-hover:#0073E6;--wa-bg:#0B141A;--wa-surface:var(--color-bg-dark);--wa-welcome:#0B141A;--wa-chat:#0B141A;--wa-bar:#202c33;--wa-rail:var(--color-bg-dark);--wa-search:#202c33;--wa-hover:rgba(255,255,255,.05);--wa-menu-hover:#162C3D;--wa-selected:#162C3D;--wa-text:#E9EDEF;--wa-text-secondary:#8696A0;--wa-muted:#8696A0;--wa-faint:#8696A0;--wa-line:#222E35;--wa-green:#0ec26f;--wa-green-deep:#00A3FF;--wa-green-soft:#162C3D;--wa-green-ink:#38BDF8;--wa-incoming:#202c33;--wa-outgoing:#0C4A6E;--wa-primary:#0ec26f;--wa-primary-ink:var(--color-bg-light);color-scheme:dark}
html:root[data-theme=mint],html[data-theme=mint] body.bex-wa{--wa-bg:#f7fcf9;--wa-surface:var(--color-bg-light);--wa-welcome:#ecf7ef;--wa-chat:#e7f2e9;--wa-bar:#f7fcf9;--wa-rail:#ecf7ef;--wa-search:#eaf4ee;--wa-hover:#eaf4ee;--wa-menu-hover:#dcece1;--wa-selected:#dcece1;--wa-text:#16362b;--wa-muted:#506c5e;--wa-line:#cedfd4;--wa-green:#007957;--wa-green-deep:#006e4f;--wa-green-soft:#cff0dc;--wa-green-ink:#175637;--wa-incoming:#fff;--wa-outgoing:#cff0dc;--wa-primary:#007957;color-scheme:light}
html:root[data-theme=blue],html[data-theme=blue] body.bex-wa{--wa-bg:#f9fbff;--wa-surface:var(--color-bg-light);--wa-welcome:#eef4fc;--wa-chat:#e5edf8;--wa-bar:#f9fbff;--wa-rail:#eef4fc;--wa-search:#edf3fb;--wa-hover:#edf3fb;--wa-menu-hover:#dce8f8;--wa-selected:#dce8f8;--wa-text:#152a46;--wa-muted:#4e6682;--wa-line:#d2def0;--wa-green:#2163aa;--wa-green-deep:#1b5d9c;--wa-green-soft:#dbeafc;--wa-green-ink:#1c4e84;--wa-incoming:#fff;--wa-outgoing:#dbeafc;--wa-primary:#2163aa;color-scheme:light}
html:root[data-theme=rose],html[data-theme=rose] body.bex-wa{--wa-bg:#fffafb;--wa-surface:var(--color-bg-light);--wa-welcome:#fbf0f4;--wa-chat:#f5e9ee;--wa-bar:#fffafb;--wa-rail:#fbf0f4;--wa-search:#f8edf2;--wa-hover:#f8edf2;--wa-menu-hover:#f0dde6;--wa-selected:#f0dde6;--wa-text:#432c36;--wa-muted:#7b5969;--wa-line:#e8d3dd;--wa-green:#a53b6e;--wa-green-deep:#963665;--wa-green-soft:#f6dbe8;--wa-green-ink:#84305a;--wa-incoming:#fff;--wa-outgoing:#f6dbe8;--wa-primary:#a53b6e;color-scheme:light}
html:root[data-theme=sand],html[data-theme=sand] body.bex-wa{--wa-bg:#fffdf8;--wa-surface:#fffdf8;--wa-welcome:#f7f1e5;--wa-chat:#f0e7d6;--wa-bar:#fffdf8;--wa-rail:#f7f1e5;--wa-search:#f5efe2;--wa-hover:#f5efe2;--wa-menu-hover:#ebe1ce;--wa-selected:#ebe1ce;--wa-text:#3e3525;--wa-muted:#72654f;--wa-line:#e1d7c5;--wa-green:#87642e;--wa-green-deep:#795922;--wa-green-soft:#f1e3c5;--wa-green-ink:#694d20;--wa-incoming:#fffdf8;--wa-outgoing:#f1e3c5;--wa-primary:#87642e;color-scheme:light}
html:root[data-theme=midnight],html[data-theme=midnight] body.bex-wa{--wa-bg:#101b2d;--wa-surface:#101b2d;--wa-welcome:#0a1322;--wa-chat:#0a1322;--wa-bar:#1a2940;--wa-rail:#1a2940;--wa-search:#1a2940;--wa-hover:#1a2940;--wa-menu-hover:#273c57;--wa-selected:#273c57;--wa-text:#edf4ff;--wa-muted:#b5c6dc;--wa-faint:#a6bdd8;--wa-line:#344a66;--wa-green:#306fae;--wa-green-deep:#81baf5;--wa-green-soft:#1b3658;--wa-green-ink:#b7d9ff;--wa-incoming:#1a2940;--wa-outgoing:#204570;--wa-primary:#306fae;--wa-primary-ink:#fff;color-scheme:dark}
body.bex-wa .biz-add,body.bex-wa .wa-go,body.bex-wa .wa-pill.primary,body.bex-wa .bex-profile-form button[type=submit],body.bex-wa #btn-send{background:var(--wa-primary)!important;color:var(--wa-primary-ink)!important}
body.bex-wa #wa-rail :is(button, a.rail-btn).on, body.bex-wa #wa-rail :is(button, a.rail-btn)[aria-current="page"]{background:var(--wa-green-soft)!important;color:var(--wa-primary)!important}
body.bex-wa #wa-rail :is(button, a.rail-btn).on svg{stroke:var(--wa-primary)!important}
body.bex-wa .bex-profile-heading .material-symbols-outlined[aria-label="Doğrulanmış hesap"]{color:#2999ff;font-variation-settings:"FILL" 1}
body.bex-wa .bex-profile-cover.is-repositioning{cursor:ns-resize;touch-action:none;user-select:none;outline:3px solid var(--wa-green-deep);outline-offset:-3px}
body.bex-wa .bex-profile-cover.is-repositioning img{pointer-events:none;user-select:none;-webkit-user-drag:none}
body.bex-wa .bex-cover-controls{margin:0;padding:18px 22px;border:0;border-bottom:1px solid var(--wa-line);background:var(--wa-search);color:var(--wa-text)}
body.bex-wa .bex-cover-controls legend{font-weight:600;padding:0}
body.bex-wa .bex-cover-controls p{font-size:13px;line-height:1.6;color:var(--wa-muted);margin:6px 0 12px}
body.bex-wa .bex-cover-controls input[type=range]{display:block;width:100%;min-height:44px;accent-color:var(--wa-green-deep);cursor:ns-resize}
body.bex-wa .bex-cover-controls button{min-height:34px;padding:6px 12px;margin:8px 8px 0 0;border:1px solid var(--wa-line);border-radius:999px;background:var(--wa-bg);color:var(--wa-text);font:inherit;font-size:13px;font-weight:600;line-height:1.25}
body.bex-wa .bex-cover-controls [data-profile-cover-save]{background:var(--wa-primary);color:var(--wa-primary-ink);border-color:transparent}

/* ── Kapak/Avatar FAB kamera butonu ── */
body.bex-wa .bex-photo-fab{
  position:absolute;bottom:10px;right:10px;
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .1s;z-index:5;
  backdrop-filter:blur(4px);
}
body.bex-wa .bex-photo-fab:hover{background:rgba(0,0,0,.75);transform:scale(1.08);}
body.bex-wa .bex-photo-fab .material-symbols-outlined{font-size:18px;}

/* Kapak FAB — sağ alt köşe */
body.bex-wa .bex-cover-fab{bottom:12px;right:12px;}

/* Avatar FAB — avatar wrap içinde sağ alt */
body.bex-wa .bex-profile-avatar-wrap{position:relative;display:inline-block;}
body.bex-wa .bex-avatar-fab{bottom:0;right:0;width:28px;height:28px;}
body.bex-wa .bex-avatar-fab .material-symbols-outlined{font-size:14px;}

/* ── Kapak konumlandırma buton satırı ── */
body.bex-wa .bex-cover-btn-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
body.bex-wa .bex-cover-save-btn{background:var(--wa-primary)!important;color:var(--wa-primary-ink)!important;border-color:transparent!important;}
body.bex-wa .bex-cover-cancel-btn{background:var(--wa-bg);color:var(--wa-text);border:1px solid var(--wa-line);border-radius:999px;padding:6px 12px;min-height:34px;font-size:13px;font-weight:600;line-height:1.25;cursor:pointer;}

/* ── Mavi tik isim değiştirme uyarısı ── */
body.bex-wa .bex-tik-uyari,
.bex-tik-uyari{
display:block;margin-top:8px;padding:10px 12px;border:1px solid var(--wa-line);border-radius:12px;background:var(--wa-search);color:var(--wa-text);font-size:12.5px;font-weight:500;line-height:1.5;
}
body.bex-wa .bex-tik-uyari a{color:var(--wa-green-deep);}

/* ── Kapak controls — profil özeti üstüne binmesin ── */
body.bex-wa .bex-cover-controls{
  position:relative;z-index:2;
  margin:0;padding:16px 20px;border:0;
  border-bottom:1px solid var(--wa-line);
  background:var(--wa-search);color:var(--wa-text);
}

/* Bridge the application palette to shared page/form tokens. */
html:root,body.bex-wa{--wa-input-bg:var(--wa-search);--wa-text-secondary:var(--wa-muted);--wa-header:var(--wa-bar);--wa-bubble-out:var(--wa-outgoing);--wa-bubble-in:var(--wa-incoming);--wa-bubble-out-text:var(--wa-text);--wa-bubble-in-text:var(--wa-text);--wa-tick:#2999ff;--wa-read-tick:#53bdeb}
body.bex-wa .bex-btn-primary{background:var(--wa-primary)!important;color:var(--wa-primary-ink)!important}
/* Keep focused text controls readable without iOS automatic zoom. */
@media(max-width:767px){
body.bex-wa input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.bex-wa textarea,body.bex-wa select,body.bex-profile-modal .bex-prof-inp{font-size:16px!important}
}

/* Keep every menu usable within the visible viewport, including the keyboard. */
body.bex-wa #wa-menu.wa-pop { overflow-x: hidden !important; overflow-y: auto !important; }
body.bex-wa #wa-menu .wa-wrap { flex-direction: column !important; }
body.bex-wa #wa-menu .wa-sub { position: static !important; width: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--wa-search); }
body.bex-wa .wa-pop button:focus-visible, body.bex-wa .thread-row:focus-visible, body.bex-wa .wa-sheet button:focus-visible { outline: 2px solid var(--wa-green-deep); outline-offset: -3px; }
body.bex-wa .bw-group .member-verified:not([hidden]) { display: inline-flex; }
body.bex-wa .wa-sheet { max-height: min(86dvh, calc(var(--vvh, 100dvh) - 16px)); overflow-y: auto; }
body.bex-wa #wa-emoji.bex-emoji-picker { min-width: 0; }

/* Embedded account forms use the same palette without inheriting the chat shell. */
body.bex-embed-page { display: block; height: auto; min-height: 100dvh; overflow-y: visible !important; overflow-x: hidden !important; background: var(--wa-bg); color: var(--wa-text); }
body.bex-embed-page :is(.bg-white,.bg-slate-50,.bg-slate-100) { background-color: var(--wa-bg) !important; }
body.bex-embed-page :is(.bg-slate-200,.bg-gray-200) { background-color: var(--wa-search) !important; }
body.bex-embed-page :is(.text-slate-900,.text-slate-800,.text-slate-700) { color: var(--wa-text) !important; }
body.bex-embed-page :is(.text-slate-600,.text-slate-500,.text-slate-400) { color: var(--wa-muted) !important; }
body.bex-embed-page :is(.border-slate-200,.border-slate-100,.divide-slate-100 > *) { border-color: var(--wa-line) !important; }
body.bex-embed-page :is(input,textarea,select):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) { background-color: var(--wa-search); color: var(--wa-text); border-color: var(--wa-line); }
body.bex-embed-page .peer:checked + div { background-color: var(--wa-primary) !important; }
body.bex-embed-page .peer:focus-visible + div { outline: 2px solid var(--wa-green-deep); outline-offset: 3px; }

/* Universal WhatsApp Avatar Normalization (1:1 circular ratio, identical scale) */
body.bex-wa .wa-inbox-avatar,
body.bex-wa .thread-row > :first-child:is(div, span, a),
body.bex-wa .thread-row .bex-avatar-frame,
body.bex-wa .thread-row .grup-foto,
body.bex-wa .wa-group-avatar,
body.bex-wa .wa-call-avatar,
body.bex-wa .bex-community-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
body.bex-wa :is(.wa-inbox-avatar, .thread-row > :first-child, .bex-avatar-frame, .grup-foto, .wa-group-avatar, .wa-call-avatar) > img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
body.bex-wa #thread-header-icon,
body.bex-wa #thread-header-icon.grup-foto,
body.bex-wa #pane-chat > header .thread-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
body.bex-wa #thread-header-icon > img,
body.bex-wa #pane-chat > header .thread-avatar > img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
body.bex-wa .bw-face,
body.bex-wa .bw-who img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* Reference design system: shared surfaces, bubbles, nav and safe areas. */
body.bex-wa, body.bex-user-page { background: var(--wa-welcome, #F7F9F8); color: var(--wa-text, #101820); }
body.bex-wa #wa-rail button.on, body.bex-wa #wa-rail button[aria-current="page"], body.bex-wa .page-navigation-link.is-active { color: var(--wa-green, #00B86B); }
body.bex-wa .thread-row, body.bex-wa .nav-card, body.bex-wa .wa-settings-card, body.bex-user-page .bex-card { border-radius: 12px; }
body.bex-wa .bw-bubble, body.bex-wa .bw-msg { border-radius: 12px; box-shadow: 0 1px 1px rgba(16,24,32,.04); }
body.bex-wa #pane-chat > footer, body.bex-wa .wa-composer { background: var(--wa-bar, #fff); }
body.bex-wa #mesaj-giris, body.bex-wa .bex-input { border-radius: 24px; }
body.bex-wa #btn-send, body.bex-wa .wa-go { background: var(--wa-primary, #00B86B); }
@media (max-width: 767px) {
body.bex-wa #app-tabs, body.has-page-navigation .page-navigation { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
body.bex-wa #pane-chat > footer { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.bex-wa *, body.bex-user-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Profile avatar: strict circular aspect ratio 1:1, object-fit cover */
body.bex-wa .bex-profile-avatar,
body.bex-wa .bex-profile-avatar-wrap,
body.bex-wa .member-avatar,
body.bex-wa .bex-avatar-frame,
.bex-avatar-frame,
.bex-profile-avatar,
.member-avatar {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
body.bex-wa .bex-profile-avatar > img,
body.bex-wa .bex-avatar-frame > img,
body.bex-wa .member-avatar > img,
.bex-avatar-frame > img,
.bex-profile-avatar > img,
.member-avatar > img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Profile actions: full width, icon + text */
body.bex-wa .bex-profile-actions.bex-profile-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 4px 0 !important;
}
body.bex-wa .bex-profile-actions.bex-profile-actions-row > :is(button, a, .bex-prof-btn) {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 6px !important; font-size: 12px !important;
  border: 1px solid var(--wa-line) !important;
  border-radius: 10px !important;
  background: var(--wa-search) !important;
  color: var(--wa-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .15s ease, filter .15s ease !important;
}
body.bex-wa .bex-profile-actions.bex-profile-actions-row > :is(button, a, .bex-prof-btn):hover {
  background: var(--wa-hover) !important;
}
body.bex-wa .bex-profile-actions.bex-profile-actions-row > :is(button, a, .bex-prof-btn) .bex-act-icon {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--wa-green-deep) !important;
}
body.bex-wa .bex-profile-actions.bex-profile-actions-row > :is(button, a, .bex-prof-btn) > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Profile Social card: matches Hakkımda styling, underneath it */
body.bex-wa .bex-profile-social-card {
  margin-top: 14px !important;
}
body.bex-wa .bex-profile-social-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 6px !important;
}
body.bex-wa .bex-social-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--wa-line) !important;
  border-radius: 12px !important;
  background: var(--wa-search) !important;
  color: var(--wa-text) !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
}
body.bex-wa .bex-social-item:hover {
  background: var(--wa-hover) !important;
}
body.bex-wa .bex-social-item-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}
body.bex-wa .bex-social-item-handle {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--wa-text) !important;
}

/* Ensure mobile action buttons and tabs are always clickable and interactive */
#app-tabs, #app-tabs .tab-btn, #app-tabs .tab-add, #btn-create, #create-sheet button, .icon-btn {
  touch-action: manipulation !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}
#app-tabs {
  z-index: 45 !important;
}
#create-sheet {
  z-index: 90 !important;
  pointer-events: auto !important;
}
#create-sheet[hidden], #create-sheet.hidden {
  display: none !important;
}

/* ── WhatsApp Web Tarzı Bağlı Cihazlar Modalı (Linked Devices) ── */
#bex-linked-devices-sheet {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 26, 0.75);
  backdrop-filter: blur(8px);
  z-index: 100060;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  #bex-linked-devices-sheet {
    align-items: center !important;
    padding: 24px !important;
  }
}
.bex-devices-card {
  width: 100%;
  max-width: 480px;
  background: var(--wa-surface, var(--color-bg-light));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
  overflow: hidden;
  max-height: calc(90dvh - env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
}
html.dark .bex-devices-card {
  background: var(--color-bg-dark);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
@media (min-width: 640px) {
  .bex-devices-card {
    border-radius: 24px;
    max-height: 85vh;
  }
}
.bex-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
html.dark .bex-device-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
.bex-device-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
html.dark .bex-device-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ── Keşfet Genişletilmiş Sağ Ray & Kart Teması (Responsive & Modern) ── */
#kesfet-desktop-right-panel {
  background: var(--wa-bg, #f0f2f5) !important;
}
html.dark #kesfet-desktop-right-panel {
  background: #0c1317 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
#kesfet-desktop-right-panel .bex-desktop-widget {
  background: var(--color-bg-light) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
}
html.dark #kesfet-desktop-right-panel .bex-desktop-widget {
  background: var(--color-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e9edef !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}



/* ============================================================
   BEXGRAM GLOBAL UNIFIED HEADER & COMPONENT STYLES
   Tüm sayfalarda (login, download, index, messenger vb.)
   dil açılır menüsü, tema düğmesi ve WhatsApp Web kartını garanti eder.
   ============================================================ */

/* 1. Global Dil Seçici Menüsü */
.bex-lang-dropdown {
  position: relative !important;
  display: inline-block !important;
}
.bex-lang-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--wa-line, rgba(0,0,0,0.12)) !important;
  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;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
  line-height: 1 !important;
}
html.dark .bex-lang-trigger {
  background: #1f2c34 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #e9edef !important;
}
.bex-lang-trigger:hover {
  border-color: #00a884 !important;
  color: #00a884 !important;
}
.bex-lang-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 190px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  background: var(--color-bg-light) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
  padding: 6px !important;
  z-index: 9999 !important;
  display: none !important;
}
.bex-lang-popover.is-open,
.bex-lang-popover.show {
  display: block !important;
  animation: bexPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html.dark .bex-lang-popover {
  background: #1f2c34 !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6) !important;
}
.bex-lang-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-bg-dark) !important;
  text-decoration: none !important;
  transition: background 0.12s ease !important;
  cursor: pointer !important;
}
html.dark .bex-lang-item {
  color: #e9edef !important;
}
.bex-lang-item:hover {
  background: rgba(0, 168, 132, 0.1) !important;
  color: #00a884 !important;
}
.bex-lang-item.selected {
  background: rgba(0, 168, 132, 0.15) !important;
  color: #00a884 !important;
}

/* 2. Global Tema Değiştirici Buton */
.bex-icon-btn,
.auth-theme {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--wa-line, rgba(0,0,0,0.12)) !important;
  background: var(--wa-surface, var(--color-bg-light)) !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
html.dark .bex-icon-btn,
html.dark .auth-theme {
  background: #1f2c34 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #e9edef !important;
}
.bex-icon-btn:hover,
.auth-theme:hover {
  border-color: #00a884 !important;
  color: #00a884 !important;
}

/* 3. Global WhatsApp Web Yan Yana Grid */
.bex-wa-grid-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr) !important;
  gap: 52px !important;
  align-items: center !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  .bex-wa-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
.bex-wa-left-col {
  min-width: 0 !important;
}
.bex-wa-right-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* 4. Global WhatsApp Web Kart & QR Çerçevesi */
.bex-wa-web-card {
  background: var(--color-bg-light) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
  padding: 48px 56px !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  width: 100% !important;
}
html.dark .bex-wa-web-card {
  background: var(--color-bg-dark) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45) !important;
}
.bex-wa-qr-frame {
  position: relative !important;
  width: min(264px, 100%) !important;
  height: min(264px, 100%) !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08) !important;
  box-sizing: border-box !important;
}

@keyframes bexPopIn {
  0% { opacity: 0; transform: scale(0.95) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Universal Member Wallet Card */
.member-wallet-card {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(217, 119, 6, 0.04) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08) !important;
  cursor: pointer !important;
}
.member-wallet-left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.member-wallet-icon-wrap {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  flex-shrink: 0 !important;
}
.member-wallet-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.member-wallet-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #b45309 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
html.dark .member-wallet-label {
  color: #fbbf24 !important;
}
.member-wallet-balance {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
html.dark .member-wallet-balance {
  color: #e9edef !important;
}
.member-wallet-actions {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.member-wallet-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #f59e0b !important;
  color: var(--color-bg-light) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
  transition: opacity 0.15s ease !important;
}
.member-wallet-btn:hover {
  background: #d97706 !important;
}


/* ==========================================================================
   BEXGRAM ULTIMATE PROFILE VIEW FIX (DESKTOP & MOBILE)
   ========================================================================== */

/* Profile Container in Welcome Pane or Stage */
#pane-welcome .wa-inchat.bex-profile,
.bex-profile {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--wa-bg, #f0f2f5) !important;
}

/* Constrain Profile Content to clean, elegant max-width (680px) on Desktop */
#pane-welcome .wa-inchat.bex-profile .wa-inbody,
.bex-profile .wa-inbody {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 16px 16px 32px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
    #pane-welcome .wa-inchat.bex-profile .wa-inbody,
    .bex-profile .wa-inbody {
        max-width: 100% !important;
        padding: 0 0 16px !important;
    }
}

/* Profile Card Wrapper */
.bex-profile-card,
.bex-profile-surface {
  width: 100% !important;
  background: var(--wa-surface, var(--color-bg-light)) !important;
  border: 1px solid var(--wa-line, rgba(0,0,0,0.08)) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
  box-sizing: border-box !important;
  margin-bottom: 16px !important;
}

html.dark .bex-profile-card,
html.dark .bex-profile-surface {
  background: var(--color-bg-dark) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 767px) {
  .bex-profile-card,
  .bex-profile-surface {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
}

/* Cover Photo */
.bex-profile-cover {
  position: relative !important;
  width: 100% !important;
  height: 190px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(0,168,132,0.2), rgba(0,128,105,0.08)) !important;
}

.bex-profile-cover > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Profile Summary Area */
.bex-profile-summary {
  position: relative !important;
  padding: 0 16px 16px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Keep the profile identity beside its avatar in the Messenger profile. */
body.bex-wa .bex-profile-header-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

body.bex-wa .bex-profile-heading {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

body.bex-wa .bex-profile-header-row > .bex-profile-avatar-wrap.bex-avatar-frame {
  align-self: center !important;
  margin-top: 0 !important;
}

@media (min-width: 641px) {
  body.bex-wa .bex-profile-header-row {
    gap: 20px !important;
    min-height: 96px;
  }

  body.bex-wa .bex-profile-heading {
    align-self: center;
    padding-top: 0;
  }

  body.bex-wa .bex-profile-heading h1,
  body.bex-wa .bex-profile-heading h2 {
    font-size: 19px;
  }

  body.bex-wa .bex-profile-heading .bex-profile-handle {
    font-size: 13px;
  }
}

.bex-profile-avatar-wrap {
  position: relative !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  border: 4px solid var(--wa-surface, var(--color-bg-light)) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  background: var(--wa-surface, var(--color-bg-light)) !important;
}

html.dark .bex-profile-avatar-wrap {
  border-color: var(--color-bg-dark) !important;
  background: var(--color-bg-dark) !important;
}

.bex-profile-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

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

/* Name & Handle */
.bex-profile-name-col {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.bex-profile-name {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html.dark .bex-profile-name {
  color: #e9edef !important;
}

.bex-profile-handle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--wa-muted, #667781) !important;
  margin-top: 2px !important;
}

/* Stats Bar: ALWAYS 3 Horizontal Flex Columns */
.bex-profile-counters-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  width: 100% !important;
  max-width: 380px !important;
  margin: 14px auto 14px !important;
  padding: 8px 12px !important;
  background: var(--wa-search, rgba(0,0,0,0.03)) !important;
  border: 1px solid var(--wa-line, rgba(0,0,0,0.08)) !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

html.dark .bex-profile-counters-bar {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.bex-counter-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  padding: 4px !important;
  text-decoration: none !important;
  color: inherit !important;
}

.bex-counter-val {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
  line-height: 1.2 !important;
}

html.dark .bex-counter-val {
  color: #e9edef !important;
}

.bex-counter-lbl {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--wa-muted, #667781) !important;
  margin-top: 2px !important;
}

/* Action Buttons: 4 Columns, Clean and Proportioned */
.bex-profile-actions.bex-profile-actions-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 14px auto 16px !important;
  box-sizing: border-box !important;
}

@media (max-width: 440px) {
  .bex-profile-actions.bex-profile-actions-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.bex-profile-actions.bex-profile-actions-row > :is(button, a, .bex-prof-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  background: var(--wa-search, #f0f2f5) !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
  border: 1px solid var(--wa-line, rgba(0,0,0,0.06)) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

html.dark .bex-profile-actions.bex-profile-actions-row > :is(button, a, .bex-prof-btn) {
  background: #202c33 !important;
  color: #e9edef !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.bex-profile-actions.bex-profile-actions-row > .bex-btn-primary {
  background: var(--bex-primary, var(--color-primary)) !important;
  color: var(--color-bg-light) !important;
  border-color: transparent !important;
}

.bex-profile-actions.bex-profile-actions-row > .bex-btn-primary:hover {
  background: var(--bex-primary-hover, #006b57) !important;
}

/* Jeton Cüzdanım Card: Perfect Centered Flex Row */
.bex-profile-summary .member-wallet-card,
.member-wallet-card {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  margin: 14px auto 16px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.05) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08) !important;
  cursor: pointer !important;
}

.member-wallet-left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.member-wallet-icon-wrap {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  flex-shrink: 0 !important;
}

.member-wallet-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.member-wallet-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #b45309 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html.dark .member-wallet-label {
  color: #fbbf24 !important;
}

.member-wallet-balance {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--wa-text, var(--color-bg-dark)) !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html.dark .member-wallet-balance {
  color: #e9edef !important;
}

.member-wallet-actions {
  flex-shrink: 0 !important;
}

.member-wallet-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: #f59e0b !important;
  color: var(--color-bg-light) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
  transition: opacity 0.15s ease !important;
}

.member-wallet-btn:hover {
  background: #d97706 !important;
}

/* Bio, Accounts, Security — sayaç çubuğu ve cüzdan kartıyla aynı genişlik */
.bex-profile-about,
.bex-profile-account,
.bex-profile-security-row {
width: 100% !important;
max-width: 480px !important;
margin: 0 auto 14px !important;
padding-left: 16px !important;
padding-right: 16px !important;
text-align: left !important;
box-sizing: border-box !important;
}

.bex-profile-posts {
    max-width: 680px !important;
    margin: 16px auto 0 !important;
    box-sizing: border-box !important;
}

/* ── Ortak modern yüzey: mevcut düzeni bozmadan tüm kabuklara uygulanır ── */
body.bex-wa,
body.page-explore,
body.page-rooms,
body.page-notifications,
body.page-search,
body.page-groups,
body.member-page,
body.bex-user-page {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.bex-wa :is(.bex-post-card, .search-user-item, .thread-row, .bex-notif-item, .member-card, .wa-room-card, .kanal-card),
body.page-explore .bex-post-card,
body.page-rooms .wa-room-card,
body.page-notifications .bex-notif-item,
body.page-search .search-user-item,
body.member-page .member-card {
    border-radius: 18px;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.bex-wa :is(.bex-post-card, .wa-room-card, .kanal-card, .member-card):hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 28px rgba(17, 27, 33, .08);
    }
    html.dark body.bex-wa :is(.bex-post-card, .wa-room-card, .kanal-card, .member-card):hover {
        box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    }
}

body.bex-wa :is(button, a, .thread-row, .search-user-item, .bex-notif-item):focus-visible {
    outline: 2px solid var(--wa-green, var(--color-primary));
    outline-offset: 2px;
}

body.bex-wa :is(.bex-empty, .empty-state, .member-post-status, .bex-explore-empty) {
    border: 1px dashed var(--wa-line, #e9edef);
    border-radius: 18px;
    background: var(--wa-search, #f5f6f6);
    color: var(--wa-muted, #54656f);
}

@media (prefers-reduced-motion: reduce) {
    body.bex-wa :is(.bex-post-card, .wa-room-card, .kanal-card, .member-card) {
        transition: none;
    }
}

/* ============================================================
   BEXGRAM MASTER POPUPS & STACKING CONTEXT ARCHITECTURE
   Tüm açılır menüler, 3-nokta popover'ları, sheet'ler ve modallar
   asla arkada kalmaz; daima en üst katmanda gösterilir.
   ============================================================ */

#bex-sidebar-popmenu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  z-index: 999999 !important;
  width: min(280px, calc(100vw - 24px)) !important;
  min-width: 240px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 100px);
  overscroll-behavior: contain;
  background: var(--wa-surface, #ffffff) !important;
  background-color: var(--wa-surface, #ffffff) !important;
  border: 1px solid var(--wa-line, rgba(11, 20, 26, 0.08)) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(11, 20, 26, 0.16), 0 2px 6px rgba(11, 20, 26, 0.08) !important;
  padding: 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

html.dark #bex-sidebar-popmenu {
  background: #233138 !important;
  background-color: #233138 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#bex-sidebar-popmenu button,
#bex-sidebar-popmenu a {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--wa-text, #111b21) !important;
  cursor: pointer !important;
  text-align: left !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
  text-decoration: none !important;
}

#bex-sidebar-popmenu button:hover,
#bex-sidebar-popmenu a:hover,
#bex-sidebar-popmenu button:focus-visible,
#bex-sidebar-popmenu a:focus-visible {
  background: var(--wa-hover, rgba(11, 20, 26, 0.04)) !important;
  background-color: var(--wa-hover, rgba(11, 20, 26, 0.04)) !important;
  color: var(--wa-text, #111b21) !important;
}

html.dark #bex-sidebar-popmenu button,
html.dark #bex-sidebar-popmenu a {
  color: #d1d7db !important;
}

html.dark #bex-sidebar-popmenu button:hover,
html.dark #bex-sidebar-popmenu a:hover,
html.dark #bex-sidebar-popmenu button:focus-visible,
html.dark #bex-sidebar-popmenu a:focus-visible {
  background: #182229 !important;
  background-color: #182229 !important;
  color: #e9edef !important;
}

#bex-sidebar-popmenu button svg,
#bex-sidebar-popmenu a svg {
  color: var(--wa-muted, #54656f) !important;
  flex-shrink: 0 !important;
  transition: color 0.12s ease !important;
}

#bex-sidebar-popmenu button:hover svg,
#bex-sidebar-popmenu a:hover svg {
  color: var(--wa-text, #111b21) !important;
}

html.dark #bex-sidebar-popmenu button svg,
html.dark #bex-sidebar-popmenu a svg {
  color: #8696a0 !important;
}

html.dark #bex-sidebar-popmenu button:hover svg,
html.dark #bex-sidebar-popmenu a:hover svg {
  color: #e9edef !important;
}

#bex-sidebar-popmenu a[href*="cikis.php"]:hover,
#bex-sidebar-popmenu a[href*="cikis.php"]:hover span,
#bex-sidebar-popmenu a[href*="cikis.php"]:hover svg {
  color: #ea4335 !important;
}

#bex-sidebar-popmenu button span,
#bex-sidebar-popmenu a span {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#bex-sidebar-popmenu > :is(button, a) > :last-child {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#messenger-sidebar > header {
  overflow: visible !important;
  position: relative !important;
  z-index: 150 !important;
}

#bex-desktop-share-popover,
.bex-header-share-popover {
  z-index: 999999 !important;
}

/* WhatsApp Açık Sohbet 3-Nokta Menüsü & Context Menü */
#wa-menu.wa-pop.is-on,
.wa-pop.is-on {
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

#wa-menu.hidden,
#wa-menu:not(.is-on),
.wa-pop.hidden,
.wa-pop:not(.is-on),
#bex-sidebar-popmenu.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Bottom Sheet'ler ve Ayarlar Katmanı */
#wa-sheet,
#sheet-settings,
#sheet-more-menu,
.wa-sheet {
  z-index: 9999999 !important;
}

/* Modallar ve Efektler Stüdyosu */
.bex-fx-modal-backdrop,
.bex-modal-backdrop {
z-index: 99999999 !important;
}

/* ═════════════════════════════════════════════════════════════════════
 * Bexgram 2026 Vibrant & Modern UI / UX Upgrade (v3.5.3 - Build 57)
 * Canlı gradientler, neon vurgular, modern kartlar ve ikon stilleri
 * ═════════════════════════════════════════════════════════════════════ */

:root {
  --bex-gradient-primary: linear-gradient(135deg, #0ec26f 0%, #059669 100%);
  --bex-gradient-blue: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --bex-gradient-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --bex-gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.7) 100%);
  --bex-glass-border: rgba(255, 255, 255, 0.15);
  --bex-neon-glow: 0 0 20px rgba(14, 194, 111, 0.35);
}

.dark {
  --bex-gradient-card: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  --bex-glass-border: rgba(148, 163, 184, 0.12);
}

/* Modern Gradient Vurgulu Butonlar & Aksiyonlar */
.bex-btn-gradient,
.btn-primary-gradient {
  background: var(--bex-gradient-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 6px 20px -4px rgba(14, 194, 111, 0.45) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bex-btn-gradient:hover,
.btn-primary-gradient:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 10px 25px -4px rgba(14, 194, 111, 0.6) !important;
}

/* Mavi Tik Rozet Parlaması & Prestij Rozetleri */
.bex-badge-blue,
[data-badge="mavi_tik"],
.bex-blue-tick {
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.35);
  transition: transform 0.2s ease;
}

.bex-badge-blue:hover,
.bex-blue-tick:hover {
  transform: scale(1.12);
}

/* Modern Glassmorphism Kartlar */
.bex-card-modern {
  background: var(--bex-gradient-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bex-glass-border);
  border-radius: 18px;
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bex-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px -6px rgba(0, 0, 0, 0.25);
}

/* Canlı Başlık ve Navigasyon Çubukları */
header.bex-wa-header,
.bex-app-topbar {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--bex-glass-border) !important;
}

/* Bildirim İkonları & Rozet Sayaçları */
.bex-badge-counter {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.45) !important;
}

/* İnteraktif İkonlar */
.material-symbols-outlined {
  transition: transform 0.18s ease, color 0.18s ease;
}

button:hover > .material-symbols-outlined,
a:hover > .material-symbols-outlined {
  transform: scale(1.08);
}