/* ==========================================================================
   BEXGRAM MODERN 2026 — Birleşik renk paleti + mobil/masaüstü uyum katmanı
   --------------------------------------------------------------------------
   Neden var: Eski tema dosyalarında iki ayrı koyu palet (bex-* lacivert/teal
   ve wa-* WhatsApp grisi) aynı ekranda karışıyordu. Bu dosya tüm token'ları
   tek bir ölçeğe bağlar. Seçiciler (html:root / html body) eski dosyalardan
   daha yüksek özgüllükte olduğu için yükleme sırasından bağımsız kazanır.
   ========================================================================== */

/* ---------- 1. AYDINLIK TEMA ---------- */
html:root,
html[data-theme="light"]:root,
html[data-theme="system"]:root {
  --bx-bg:          #F3F5F7;
  --bx-surface:     #FFFFFF;
  --bx-surface-2:   #F0F3F5;
  --bx-surface-3:   #E6EBEE;
  --bx-line:        #E1E7EB;
  --bx-text:        #0E1A21;
  --bx-text-2:      #4F616C;
  --bx-brand:       #00A884;
  --bx-brand-hover: #028E70;
  --bx-brand-soft:  #D9FDD3;
  --bx-on-brand:    #FFFFFF;
  --bx-accent:      #0EA5E9;
  --bx-danger:      #D0263F;
  --bx-bubble-out:  #DCF5E9;
  --bx-bubble-in:   #FFFFFF;
  --bx-chat-bg:     #EDF1EF;
  --bx-hover:       rgba(14, 26, 33, 0.045);
  --bx-ring:        rgba(14, 165, 233, 0.25);
  --bx-shadow-sm:   0 1px 2px rgba(14, 26, 33, 0.06), 0 1px 1px rgba(14, 26, 33, 0.03);
  --bx-shadow-lg:   0 12px 32px rgba(14, 26, 33, 0.12), 0 2px 6px rgba(14, 26, 33, 0.05);
}

/* ---------- 2. KARANLIK TEMA ---------- */
html.dark:root,
html[data-theme="dark"]:root,
html[data-theme="midnight"]:root,
html body.dark {
  --bx-bg:          #0A1016;
  --bx-surface:     #0F171E;
  --bx-surface-2:   #16212A;
  --bx-surface-3:   #1D2A34;
  --bx-line:        #22303B;
  --bx-text:        #E9EFF3;
  --bx-text-2:      #A3B3BE;
  --bx-brand:       #25D366;
  --bx-brand-hover: #34E77B;
  --bx-brand-soft:  #103629;
  --bx-on-brand:    #0B141A;
  --bx-accent:      #38BDF8;
  --bx-danger:      #F2667A;
  --bx-bubble-out:  #0F4A3A;
  --bx-bubble-in:   #18232C;
  --bx-chat-bg:     #0B1218;
  --bx-hover:       rgba(233, 239, 243, 0.055);
  --bx-ring:        rgba(56, 189, 248, 0.25);
  --bx-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35);
  --bx-shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Koyu temada kart yüzeyi olarak kullanılan eski token */
  --color-bg-dark:  #0F171E !important;
}

/* ---------- 3. ESKİ TOKEN'LARI BİRLEŞİK PALETE BAĞLA ---------- */
html:root, html.dark:root, html[data-theme]:root, html body, html body.dark {
  /* bex-* */
  --color-primary: var(--bx-brand) !important;
  --bex-brand: var(--bx-brand) !important;
  --bex-brand-hover: var(--bx-brand-hover) !important;
  --bex-brand-soft: var(--bx-brand-soft) !important;
  --bex-on-brand: var(--bx-on-brand) !important;
  --bex-bg: var(--bx-bg) !important;
  --bex-surface: var(--bx-surface) !important;
  --bex-surface-secondary: var(--bx-surface-2) !important;
  --bex-header: var(--bx-surface) !important;
  --bex-chat-bg: var(--bx-chat-bg) !important;
  --bex-text: var(--bx-text) !important;
  --bex-text-secondary: var(--bx-text-2) !important;
  --bex-border: var(--bx-line) !important;
  --bex-primary: var(--bx-brand) !important;
  --bex-primary-hover: var(--bx-brand-hover) !important;
  --bex-on-primary: var(--bx-on-brand) !important;
  --bex-accent: var(--bx-accent) !important;
  --bex-accent-blue: var(--bx-accent) !important;
  --bex-message-out: var(--bx-bubble-out) !important;
  --bex-message-in: var(--bx-bubble-in) !important;
  --bex-message-out-text: var(--bx-text) !important;
  --bex-message-in-text: var(--bx-text) !important;
  --bex-selected: var(--bx-brand-soft) !important;
  --bex-hover: var(--bx-hover) !important;
  --bex-danger: var(--bx-danger) !important;
  --bex-tick-read: var(--bx-accent) !important;
  --bex-badge: var(--bx-brand) !important;
  --bex-badge-text: var(--bx-on-brand) !important;
  --bex-outgoing: var(--bx-bubble-out) !important;
  --bex-incoming: var(--bx-bubble-in) !important;
  --bex-verified: var(--bx-accent) !important;
  /* kanonik */
  --bg-primary: var(--bx-bg) !important;
  --bg-secondary: var(--bx-surface) !important;
  --surface-primary: var(--bx-surface) !important;
  --surface-secondary: var(--bx-surface-2) !important;
  --text-primary: var(--bx-text) !important;
  --text-secondary: var(--bx-text-2) !important;
  --text-muted: var(--bx-text-2) !important;
  --accent-primary: var(--bx-brand) !important;
  --accent-hover: var(--bx-brand-hover) !important;
  --border-primary: var(--bx-line) !important;
  --button-primary-bg: var(--bx-brand) !important;
  --button-primary-text: var(--bx-on-brand) !important;
  --button-secondary-bg: var(--bx-surface-2) !important;
  --button-secondary-text: var(--bx-text) !important;
  --input-bg: var(--bx-surface-2) !important;
  --input-text: var(--bx-text) !important;
  --input-border: var(--bx-line) !important;
  /* wa-* */
  --wa-bg: var(--bx-bg) !important;
  --wa-surface: var(--bx-surface) !important;
  --wa-card-bg: var(--bx-surface) !important;
  --wa-search: var(--bx-surface-2) !important;
  --wa-line: var(--bx-line) !important;
  --wa-text: var(--bx-text) !important;
  --wa-text-secondary: var(--bx-text-2) !important;
  --wa-muted: var(--bx-text-2) !important;
  --wa-green: var(--bx-brand) !important;
  --wa-green-deep: var(--bx-brand-hover) !important;
  --wa-green-soft: var(--bx-brand-soft) !important;
  --wa-green-ink: var(--bx-brand) !important;
  --wa-bubble-out: var(--bx-bubble-out) !important;
  --wa-bubble-in: var(--bx-bubble-in) !important;
  --wa-bubble-out-text: var(--bx-text) !important;
  --wa-bubble-in-text: var(--bx-text) !important;
  --wa-outgoing: var(--bx-bubble-out) !important;
  --wa-incoming: var(--bx-bubble-in) !important;
  --wa-selected: var(--bx-brand-soft) !important;
  --wa-hover: var(--bx-hover) !important;
  --wa-interactive-hover: var(--bx-hover) !important;
  --wa-input-bg: var(--bx-surface-2) !important;
  --wa-header: var(--bx-surface) !important;
  --wa-welcome: var(--bx-bg) !important;
  --wa-icon: var(--bx-text-2) !important;
  --wa-tick: var(--bx-accent) !important;
  --wa-read-tick: var(--bx-accent) !important;
  --wa-unread-badge: var(--bx-brand) !important;
  --wa-primary: var(--bx-brand) !important;
  --wa-primary-ink: var(--bx-on-brand) !important;
  --wa-shadow: var(--bx-shadow-sm) !important;
  --wa-shadow-lg: var(--bx-shadow-lg) !important;
  --wa-radius: 12px !important;
  --color-danger: var(--bx-danger) !important;
  --color-info: var(--bx-accent) !important;
}

/* ---------- 4. TEMEL MODERNLEŞTİRME ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html body {
  background-color: var(--bx-bg);
  color: var(--bx-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
html.dark:root { color-scheme: dark; }
html[data-theme="light"]:root { color-scheme: light; }

::selection { background: var(--bx-ring); color: inherit; }

/* Klavye odağı: her etkileşimli öğede görünür, fare tıklamasında gizli */
html body :is(a, button, [role="button"], input, select, textarea, [tabindex]):focus,
html body :is(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible,
html body :is(a, button, [role="button"], input, select, textarea, [tabindex]):active {
  outline: none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* İnce, temaya uygun kaydırma çubukları (masaüstü) */
@media (hover: hover) and (pointer: fine) {
  html body * { scrollbar-width: thin; scrollbar-color: var(--bx-surface-3) transparent; }
  html body *::-webkit-scrollbar { width: 8px; height: 8px; }
  html body *::-webkit-scrollbar-track { background: transparent; }
  html body *::-webkit-scrollbar-thumb { background: var(--bx-surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
  html body *::-webkit-scrollbar-thumb:hover { background-color: var(--bx-text-2); }
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 5. MARKA YAZISI & GİRİŞ EKRANI (mobil) ---------- */
/* "Bexgram" yazısı flex içinde daralıp ENTERPRISE rozetinin altına taşıyordu */
html body .bex-wa-wordmark { min-width: 0; }
html body .bex-wa-wordmark span.bex-wa-wordmark-text { flex-shrink: 0; white-space: nowrap; }
html body .bex-wa-wordmark .bex-corp-pill { flex-shrink: 0; }
@media (max-width: 419.98px) {
  html body .auth-header .bex-wa-wordmark .bex-corp-pill { display: none !important; }
  html body .auth-header .bex-wa-wordmark span.bex-wa-wordmark-text { font-size: 20px !important; }
}
/* Ayırıcı: işaretlemede zaten span çizgileri var; ::before/::after ikinci kez çiziyordu */
html body .auth-divider:has(> span.flex-1)::before,
html body .auth-divider:has(> span.flex-1)::after { content: none; }
html body .auth-divider > span.flex-1 { background: var(--bx-line) !important; }

/* ---------- 6. MOBİL / MASAÜSTÜ UYUM ---------- */
/* Çentikli telefonlarda güvenli alan */
html body .auth-app,
html body .bex-mobile-view {
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}
/* iOS'ta odaklanınca sayfanın büyümesini engelle: girişler en az 16px */
@media (max-width: 767.98px) and (pointer: coarse) {
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: max(16px, 1em); }
}
/* Dokunmatik cihazlarda hover efektleri yapışmasın */
@media (hover: none) {
  html body :is(button, a, [role="button"]):hover { transition: none; }
}
/* Yatay taşmayı kökten kapat (sohbet/rail kendi içinde kaydırır) */
html, html body { max-width: 100%; overflow-x: clip; }

/* ---------- 7. MODERN YÜZEYLER (sohbet listesi, filtre çipleri, rail) ---------- */
html body #wa-rail { background: var(--bx-surface) !important; border-inline-end: 1px solid var(--bx-line) !important; }
html body :is(.wa-chat-folders, .bex-chat-filters) :is(button, a) {
  border-radius: 999px !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
html body :is(.wa-sidebar-search, .bex-search-input, #wa-search) {
  border-radius: 12px !important;
}

/* ---------- 8. TAILWIND dark:[#hex] SABİTLERİNİ PALETE BAĞLA ---------- */
html.dark body :is(.dark\:bg-\[\#0b141a\], .dark\:bg-\[\#0c1317\]) { background-color: var(--bx-bg) !important; }
html.dark body :is(.dark\:bg-\[\#111b21\]) { background-color: var(--bx-surface) !important; }
html.dark body :is(.dark\:bg-\[\#1f2c34\], .dark\:bg-\[\#202c33\]) { background-color: var(--bx-surface-2) !important; }
html.dark body :is(.dark\:bg-\[\#233138\]) { background-color: var(--bx-surface-3) !important; }
html.dark body :is(.dark\:bg-\[\#005c4b\]) { background-color: var(--bx-bubble-out) !important; }
html.dark body :is(.dark\:bg-\[\#00a884\]) { background-color: var(--bx-brand) !important; }
html.dark body :is(.dark\:text-\[\#e9edef\], .dark\:text-\[\#d1d7db\]) { color: var(--bx-text) !important; }
html.dark body :is(.dark\:text-\[\#8696a0\], .dark\:text-\[\#aebac1\]) { color: var(--bx-text-2) !important; }
html.dark body :is(.dark\:text-\[\#25d366\], .dark\:text-\[\#4fd1b0\]) { color: var(--bx-brand) !important; }
html.dark body :is(.dark\:text-\[\#53bdeb\], .dark\:text-\[\#38bdf8\]) { color: var(--bx-accent) !important; }
html.dark body :is(.dark\:border-\[\#111b21\], .dark\:border-\[\#1f2c34\], .dark\:border-\[\#222d34\], .dark\:border-\[\#2a3942\]) { border-color: var(--bx-line) !important; }

/* Tailwind gövde yardımcıları */
html body .bg-background { background-color: var(--bx-bg) !important; }
html body .text-on-surface { color: var(--bx-text) !important; }
html body .text-on-surface-variant { color: var(--bx-text-2) !important; }

/* ==========================================================================
   9. BİLDİRİMLER SAYFASI (bildirimler.php) — modern, kompakt, mobil uyumlu
   ========================================================================== */
html body.page-notifications,
html body.page-notifications #bildirim-main-section { background: var(--bx-bg) !important; color: var(--bx-text) !important; }
html body.page-notifications #bildirim-desktop-sidebar { background: var(--bx-surface) !important; border-right-color: var(--bx-line) !important; }

/* Üst sekmeler: segment kontrol, mobilde yatay kaydırılır, asla kesilmez */
html body.page-notifications .bex-main-tabs-wrap {
  display: flex !important; gap: 4px !important; padding: 4px !important;
  background: var(--bx-surface-2) !important; border: 1px solid var(--bx-line) !important;
  border-radius: 14px !important; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important;
}
html body.page-notifications .bex-main-tabs-wrap::-webkit-scrollbar { display: none; }
html body.page-notifications .bex-main-tab-btn {
  flex: 1 0 auto !important; flex-wrap: nowrap !important; white-space: nowrap;
  min-height: 40px !important; padding: 6px 12px !important; gap: 6px !important;
  border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--bx-text-2) !important; background: transparent !important; box-shadow: none !important;
}
html body.page-notifications .bex-main-tab-btn .material-symbols-outlined { font-size: 19px !important; }
html body.page-notifications .bex-main-tab-btn:hover { color: var(--bx-text) !important; background: var(--bx-hover) !important; }
html body.page-notifications .bex-main-tab-btn.active {
  background: var(--bx-surface) !important; color: var(--bx-brand) !important;
  box-shadow: var(--bx-shadow-sm) !important;
}
html.dark body.page-notifications .bex-main-tab-btn.active { background: var(--bx-surface-3) !important; }
html body.page-notifications .bex-main-tab-btn .badge-pill {
  min-width: 20px; padding: 1px 6px !important; font-size: 11px !important; font-weight: 700 !important;
  text-align: center; border-radius: 999px !important;
}
html body.page-notifications .bex-main-tab-btn.active .badge-pill { background: var(--bx-brand) !important; color: var(--bx-on-brand) !important; }
html body.page-notifications .bex-main-tab-btn:not(.active) .badge-pill { background: var(--bx-surface-3) !important; color: var(--bx-text) !important; }

/* Sağ eylemler (Yönet / Tümünü oku) */
html body.page-notifications :is(#btn-toggle-bulk, #btn-mark-all-read) {
  min-height: 36px; border-radius: 10px !important; text-decoration: none !important; white-space: nowrap;
}
html body.page-notifications #btn-toggle-bulk { background: var(--bx-surface-2) !important; color: var(--bx-text-2) !important; border: 1px solid var(--bx-line); }
html body.page-notifications #btn-mark-all-read { color: var(--bx-brand) !important; }
html body.page-notifications #btn-mark-all-read:hover { background: var(--bx-brand-soft) !important; }

/* Filtre çipleri */
html body.page-notifications .notif-filter-pill {
  min-height: 34px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 600 !important;
  background: var(--bx-surface) !important; color: var(--bx-text-2) !important;
  border: 1px solid var(--bx-line) !important; box-shadow: none !important; flex-shrink: 0;
}
html body.page-notifications .notif-filter-pill .material-symbols-outlined { font-size: 17px !important; color: currentColor !important; }
html body.page-notifications .notif-filter-pill:hover { background: var(--bx-hover) !important; color: var(--bx-text) !important; }
html body.page-notifications :is(.notif-filter-pill.is-active, .notif-filter-pill.active) {
  background: var(--bx-brand-soft) !important; color: var(--bx-brand) !important;
  border-color: color-mix(in srgb, var(--bx-brand) 40%, transparent) !important;
}

/* Zaman grubu başlığı: sade etiket */
html body.page-notifications .bex-notif-time-group {
  background: transparent !important; padding: 4px 4px 0 !important; margin: 14px 0 6px !important;
  color: var(--bx-text-2) !important; font-size: 12px !important; letter-spacing: .06em;
}
html body.page-notifications .bex-notif-time-group > span:first-child { display: none; }

/* Kart: her ekranda tek satır, kompakt */
html body.page-notifications #notif-list-container { display: flex; flex-direction: column; gap: 6px; }
html body.page-notifications #notif-list-container > * + * { margin-top: 0 !important; }
html body.page-notifications .bex-notif-card {
  flex-direction: row !important; align-items: center !important; gap: 10px !important;
  padding: 12px !important; border-radius: 14px !important;
  background: var(--bx-surface) !important; border: 1px solid var(--bx-line) !important;
  box-shadow: none !important; color: var(--bx-text) !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
html body.page-notifications .bex-notif-card:hover { border-color: color-mix(in srgb, var(--bx-brand) 35%, var(--bx-line)) !important; box-shadow: none !important; }
html body.page-notifications .bex-notif-card.is-unread {
  background: color-mix(in srgb, var(--bx-brand) 6%, var(--bx-surface)) !important;
  border-color: color-mix(in srgb, var(--bx-brand) 30%, var(--bx-line)) !important;
}
html body.page-notifications .bex-notif-card.is-unread::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--bx-brand);
}
html body.page-notifications .bex-notif-main { gap: 12px !important; align-items: center !important; }
html body.page-notifications .bex-notif-avatar-wrap,
html body.page-notifications .bex-notif-avatar-img { width: 44px !important; height: 44px !important; min-width: 44px !important; }
html body.page-notifications .bex-notif-avatar-img { border-color: var(--bx-line) !important; }
html body.page-notifications .bex-notif-badge-icon { box-shadow: 0 0 0 2px var(--bx-surface); }
html body.page-notifications .bex-notif-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--bx-text) !important; }
html body.page-notifications .bex-notif-card.is-unread .bex-notif-title { font-weight: 700 !important; }
html body.page-notifications .bex-notif-time { font-size: 12px !important; color: var(--bx-text-2) !important; white-space: nowrap; }
html body.page-notifications .bex-notif-body {
  font-size: 13px !important; line-height: 1.4 !important; color: var(--bx-text-2) !important; margin: 2px 0 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body.page-notifications .bex-notif-author { color: var(--bx-text) !important; }
html body.page-notifications .bex-notif-snippet { color: var(--bx-text-2) !important; }

/* Eylemler: kartın sağında küçük ikonlar (mobilde ayrı satıra düşmez) */
html body.page-notifications .bex-notif-actions {
  width: auto !important; padding: 0 !important; border: 0 !important; gap: 2px !important;
  flex-direction: row !important; justify-content: flex-end !important; margin-left: 0 !important;
}
html body.page-notifications .bex-notif-btn { width: 36px !important; height: 36px !important; border-radius: 10px !important; color: var(--bx-text-2) !important; }
html body.page-notifications .bex-notif-btn .material-symbols-outlined { font-size: 20px !important; }
html body.page-notifications .bex-notif-btn:hover { background: var(--bx-hover) !important; color: var(--bx-text) !important; }
html body.page-notifications .btn-mark-single-read:hover { color: var(--bx-brand) !important; }
html body.page-notifications .btn-delete-notif:hover { color: var(--bx-danger) !important; background: color-mix(in srgb, var(--bx-danger) 10%, transparent) !important; }

@media (max-width: 640px) {
  html body.page-notifications .bex-notif-card { padding: 10px 6px 10px 12px !important; }
  /* Kartın tamamı zaten bağlantı: mobilde ayrı "git" oku gereksiz yer kaplıyordu */
  html body.page-notifications .bex-notif-actions > a.bex-notif-target { display: none !important; }
  html body.page-notifications .bex-notif-btn { width: 34px !important; height: 34px !important; }
  html body.page-notifications .bex-notif-media-thumb { width: 40px !important; height: 40px !important; min-width: 40px !important; }
  html body.page-notifications .bex-main-tab-btn { padding: 6px 10px !important; font-size: 12.5px !important; }
}

/* Toplu işlem çubuğu ve onay kutusu */
html body.page-notifications .bex-bulk-toolbar { background: var(--bx-surface) !important; border: 1px solid var(--bx-line) !important; border-radius: 14px !important; }
html body.page-notifications .bex-checkbox-custom.checked { background: var(--bx-brand) !important; border-color: var(--bx-brand) !important; color: var(--bx-on-brand) !important; }

/* Yan panel sekmeleri */
html body.page-notifications :is(.sidebar-tab-btn, .sidebar-filter-btn).is-active {
  background: var(--bx-brand-soft) !important; color: var(--bx-brand) !important; border-color: transparent !important; box-shadow: none !important;
}
html body.page-notifications :is(.sidebar-tab-btn, .sidebar-filter-btn):hover { background: var(--bx-hover) !important; }

/* Tercihler: form alanları */
html body.page-notifications #pane-settings select,
html body.page-notifications #pane-settings input[type="file"] {
  background: var(--bx-surface-2) !important; border-color: var(--bx-line) !important; color: var(--bx-text) !important; min-height: 40px;
}

/* ==========================================================================
   10. TÜM SAYFALAR — ikon, yazı ve düğme tutarlılığı
   ========================================================================== */
/* İkon fontu: tek tip çizgi kalınlığı, hizalama; font yüklenmeden ikon adı
   (ör. "notifications") düz yazı olarak taşmasın */
:where(html body) :where(.material-symbols-outlined, .material-symbols-rounded, .material-icons) {
  line-height: 1;
  direction: ltr;
  user-select: none;
  font-feature-settings: "liga";
  flex-shrink: 0;
}
/* Yalnızca boyut/dolgu sınıfı verilmemiş ikonlar: genişlik 1em, taşan ad gizlenir */
html body :is(.material-symbols-outlined, .material-symbols-rounded, .material-icons):not([class*="w-"]):not([class*="p-"]):not([class*="px-"]):not([class*="py-"]):not([style*="width"]) {
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
}
/* SVG ikonlar düğme içinde küçülmesin / kaymasın */
html body :is(button, a, [role="button"]) > svg { flex-shrink: 0; }

/* Devre dışı düğmeler belirgin olsun */
html body :is(button, [role="button"], input[type="submit"]):disabled,
html body :is(button, [role="button"])[aria-disabled="true"] { cursor: not-allowed !important; opacity: .55; }

/* Düğme metni satır kırılınca bozulmasın */
html body button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* Tipografi: başlıklar dengeli kırılır, paragraflarda tek kelime kalmaz */
html body :is(h1, h2, h3) { text-wrap: balance; }
html body p { text-wrap: pretty; }

/* Form alanları: tema renkleri ve tutarlı odak */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea)::placeholder { color: var(--bx-text-2); opacity: .8; }
html body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--bx-brand); }

/* Dokunmatik cihazlarda küçük ikon düğmeleri için en az 40px dokunma alanı */
@media (pointer: coarse) {
  html body :is(.icon-btn, .adm-icon-btn, .bex-notif-btn, .member-icon-button) { min-width: 40px; min-height: 40px; }
}

/* Bildirim başlığı: tek satırda erken kesilmek yerine en fazla 2 satır */
html body.page-notifications .bex-notif-header-line { align-items: flex-start !important; }
html body.page-notifications .bex-notif-title {
  white-space: normal !important; text-overflow: clip !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
  min-width: 0; flex: 1 1 auto;
}
html body.page-notifications .bex-notif-time { flex-shrink: 0; padding-top: 1px; }
/* Yatay kaydırılan çip/sekme satırlarında kaydırma çubuğu gizli */
html body.page-notifications .bex-notif-app .overflow-x-auto { scrollbar-width: none !important; }
html body.page-notifications .bex-notif-app .overflow-x-auto::-webkit-scrollbar { display: none !important; }

/* ==========================================================================
   11. MOBİL ↔ MASAÜSTÜ UYUMU (cihaz türünden bağımsız, genişliğe göre)
   ========================================================================== */
/* İkon sınıfı her sayfada ikon fontunu kullansın (mavitik.php gibi sayfalarda
   font atanmadığı için "arrow_back" düz yazı olarak görünüyordu) */
html body .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
}

/* Tablet / yatay telefon: tarayıcı kimliği "mobil" olsa bile ekran ≥768px ise
   alt menü gizleniyordu ve sol menü de mobil sınıfta kapalıydı → gezinme yoktu.
   Geniş ekranda sol menüyü her cihazda göster. */
@media (min-width: 768px) {
  html body.bex-device-mobile #wa-rail,
  html body.bex-device-mobile #wa-rail.bex-desktop-rail {
    display: flex !important;
  }
  html body.bex-device-mobile.has-desktop-rail { padding-left: 72px !important; }
}
/* Dar pencere: masaüstü cihazda bile <768px'te alt menü + tam genişlik içerik */
@media (max-width: 767.98px) {
  html body.bex-device-desktop.has-desktop-rail { padding-left: 0 !important; }
}

/* Davet sayfası üst başlığı: 360px'te düğmeler ekran dışına taşıyordu */
@media (max-width: 580px) {
  html body .bex-invite-header { padding: max(12px, env(safe-area-inset-top, 12px)) 14px 12px !important; }
  html body .bex-invite-header-inner { gap: 8px !important; min-width: 0; }
  html body .bex-header-actions { gap: 6px !important; min-width: 0; flex-shrink: 1; }
  html body .bex-brand-link { font-size: 18px !important; flex-shrink: 0; }
  html body .bex-header-btn { padding: 7px 12px !important; font-size: 13px !important; }
  html body .bex-lang-select { padding: 7px 24px 7px 10px !important; font-size: 12px !important; max-width: 108px; text-overflow: ellipsis; }
  html body .bex-lang-arrow { right: 8px !important; }
}
@media (max-width: 400px) {
  html body .bex-brand-link > span { display: none; }
  html body .bex-header-btn.text-only { padding-inline: 6px !important; }
  html body .bex-header-btn.primary > span { display: none; }
  html body .bex-header-btn.primary { width: 36px; height: 36px; padding: 0 !important; }
}

/* Genel: esnek satırlardaki metin kutuları daralabilsin (taşma yerine kısalsın) */
html body :is(.truncate, .line-clamp-1, .line-clamp-2) { min-width: 0; }

/* Tablolar mobilde yatay kaydırılsın, sayfayı taşırmasın */
@media (max-width: 767.98px) {
  html body :is(.adm-table-wrap, .table-responsive, .overflow-x-auto) { -webkit-overflow-scrolling: touch; max-width: 100%; }
  html body :is(.modal, [role="dialog"]) { max-width: 100vw; }
}

/* Çok geniş ekranlar: okuma sayfalarında satırlar aşırı uzamasın */
@media (min-width: 1600px) {
  html body :is(.bex-legal-content, .legal-content, .bex-help-content) { max-width: 820px; margin-inline: auto; }
}

/* ==========================================================================
   12. SOHBET SEÇ (toplu işlemler) — üst seçim çubuğu + alt işlem çubuğu
   ========================================================================== */
/* Satırda tek seçim dairesi: ::before (bex-polish) kalır, eski kutu gizlenir */
html body #messenger-sidebar .wa-inbox-check { display: none !important; }
html body #messenger-sidebar.is-chat-selecting .thread-row[data-thread]::before { border-color: var(--bx-text-2); }
html body #messenger-sidebar.is-chat-selecting .thread-row.is-selected::before { border-color: var(--bx-brand); background-color: var(--bx-brand); }
html body #messenger-sidebar.is-chat-selecting .thread-row.is-selected { background-color: var(--bx-brand-soft) !important; }
html body #messenger-sidebar.is-chat-selecting .thread-row[data-thread] { user-select: none; -webkit-user-select: none; }

html body #wa-bulk-chat-bar.bx-bulk { all: unset; display: contents; }
html body #wa-bulk-chat-bar.bx-bulk.hidden { display: none !important; }

html body .bx-bulk-top,
html body .bx-bulk-actions {
  position: fixed; left: 0; right: 0; z-index: 100040;
  background: var(--bx-surface); color: var(--bx-text);
  box-sizing: border-box; font-family: inherit;
}
html body .bx-bulk-top {
  top: 0; display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: max(6px, env(safe-area-inset-top, 0px)) 8px 6px;
  border-bottom: 1px solid var(--bx-line); box-shadow: var(--bx-shadow-sm);
  animation: bxBulkIn .18s ease-out;
}
html body .bx-bulk-icon {
  width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent;
  color: var(--bx-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
html body .bx-bulk-icon:hover { background: var(--bx-hover); }
html body .bx-bulk-icon .material-symbols-outlined { font-size: 24px; }
html body .bx-bulk-count { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .bx-bulk-all {
  border: 1px solid var(--bx-line); background: var(--bx-surface-2); color: var(--bx-brand);
  font-size: 13px; font-weight: 600; padding: 0 14px; height: 36px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
html body .bx-bulk-all:hover { background: var(--bx-brand-soft); }

html body .bx-bulk-actions {
  bottom: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bx-line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  animation: bxBulkUp .18s ease-out;
}
html body .bx-bulk-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent;
  color: var(--bx-text); cursor: pointer; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center;
  transition: background-color .15s ease, opacity .15s ease;
}
html body .bx-bulk-act .material-symbols-outlined { font-size: 22px; }
html body .bx-bulk-act-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .bx-bulk-act:hover:not(:disabled) { background: var(--bx-hover); }
html body .bx-bulk-act.is-danger { color: var(--bx-danger); }
html body .bx-bulk-act.is-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bx-danger) 12%, transparent); }
html body .bx-bulk-act:disabled { opacity: .38; cursor: default; }
html body #wa-bulk-chat-bar.is-busy .bx-bulk-actions { pointer-events: none; }
html body #wa-bulk-chat-bar.is-busy .bx-bulk-count::after { content: " · işleniyor…"; color: var(--bx-text-2); font-weight: 500; }

/* Seçim modunda alt menü gizlenir, liste alt çubuğun altında kalmaz */
html body.is-chat-selecting #app-tabs#app-tabs,
html body.is-chat-selecting #app-tabs.page-navigation.page-navigation,
html body.is-chat-selecting .page-navigation.page-navigation.page-navigation { display: none !important; }
html body #messenger-sidebar.is-chat-selecting #chat-list,
html body #messenger-sidebar.is-chat-selecting #thread-list-main,
html body #messenger-sidebar.is-chat-selecting #thread-list-archived,
html body #messenger-sidebar.is-chat-selecting [data-chat-list] { padding-bottom: 84px !important; }

/* Masaüstü / tablet: çubuklar sohbet listesi panelinin içinde kalır */
@media (min-width: 768px) {
  html body #messenger-sidebar.is-chat-selecting { position: relative !important; }
  html body #messenger-sidebar .bx-bulk-top,
  html body #messenger-sidebar .bx-bulk-actions { position: absolute; }
  html body #messenger-sidebar .bx-bulk-top { padding-top: 6px; min-height: 60px; }
  html body #messenger-sidebar .bx-bulk-actions { padding-bottom: 8px; }
}
@media (max-width: 359.98px) {
  html body .bx-bulk-act { font-size: 10px; }
  html body .bx-bulk-act .material-symbols-outlined { font-size: 20px; }
}
@keyframes bxBulkIn { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bxBulkUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   13. TASARIM SİSTEMİ — ortak köşe, gölge, animasyon ve bileşen görünümü
   Yalnızca görsel özellikler (renk, köşe, gölge, geçiş) ayarlanır; boyut ve
   konum kurallarına dokunulmaz, böylece mevcut yerleşimler bozulmaz.
   ========================================================================== */
html:root {
  --bx-r-sm: 8px;
  --bx-r-md: 12px;
  --bx-r-lg: 16px;
  --bx-r-xl: 20px;
  --bx-r-pill: 999px;
  --bx-ease: cubic-bezier(.2, .8, .2, 1);
  --bx-dur: .16s;
  --bx-dur-slow: .24s;
  --bx-success: #12A06A;
  --bx-warning: #C77700;
}
html.dark:root { --bx-success: #3DDC97; --bx-warning: #F5B841; }

/* Yönetim paneli renkleri ortak palete bağlanır (tek renk sistemi) */
html:root, html.dark:root, html[data-theme]:root {
  --adm-bg: var(--bx-bg) !important;
  --adm-card-bg: var(--bx-surface) !important;
  --adm-card-border: var(--bx-line) !important;
  --adm-inset: var(--bx-surface-2) !important;
  --adm-hover: var(--bx-hover) !important;
  --adm-sidebar: var(--bx-surface) !important;
  --adm-sidebar-text: var(--bx-text) !important;
  --adm-sidebar-muted: var(--bx-text-2) !important;
  --adm-sidebar-border: var(--bx-line) !important;
  --adm-header-bg: var(--bx-surface) !important;
  --adm-accent: var(--bx-brand) !important;
  --adm-accent-soft: var(--bx-brand-soft) !important;
  --adm-on-accent: var(--bx-on-brand) !important;
  --adm-active-bg: var(--bx-brand-soft) !important;
  --adm-active-text: var(--bx-brand) !important;
  --adm-active-border: color-mix(in srgb, var(--bx-brand) 35%, transparent) !important;
}

/* ---- Butonlar ---- */
html body :is(.bex-btn, .member-button, .auth-button, .bex-btn-secondary, .play-btn) { border-radius: var(--bx-r-md); }
html body :is(.adm-btn, .bex-btn, .bgx-btn, .member-button, .auth-button, .wa-pill, .bex-action-btn, .verification-button, .bex-btn-secondary, .bex-btn-pill, .play-btn) {
  transition: background-color var(--bx-dur) var(--bx-ease), color var(--bx-dur) var(--bx-ease),
              border-color var(--bx-dur) var(--bx-ease), box-shadow var(--bx-dur) var(--bx-ease),
              transform var(--bx-dur) var(--bx-ease), filter var(--bx-dur) var(--bx-ease) !important;
  -webkit-font-smoothing: antialiased;
}
html body :is(.wa-pill, .bex-btn-pill) { border-radius: var(--bx-r-pill) !important; }
html body :is(.adm-btn, .bex-btn, .member-button, .auth-button, .play-btn):active:not(:disabled) { transform: scale(.98); }
html body .adm-btn { border-radius: 10px !important; font-weight: 600 !important; }
html body .adm-btn:hover { opacity: 1 !important; filter: brightness(1.06); }
html body .adm-btn-green { background: var(--bx-brand) !important; color: var(--bx-on-brand) !important; }
html body .adm-btn-blue { background: var(--bx-accent) !important; color: #fff !important; }
html body .adm-btn-red { background: var(--bx-danger) !important; color: #fff !important; }
html body .adm-btn-amber { background: var(--bx-warning) !important; color: #fff !important; }
html body .adm-btn-ghost { background: var(--bx-surface-2) !important; color: var(--bx-text) !important; border: 1px solid var(--bx-line) !important; }
html body .adm-btn-ghost:hover { background: var(--bx-surface-3) !important; filter: none; }

/* İkon butonları: tutarlı hover/active yüzeyi */
html body :is(.icon-btn, .adm-icon-btn, .member-icon-button, .bex-msg-act-btn, .bex-reel-action-btn, .rail-btn) {
  transition: background-color var(--bx-dur) var(--bx-ease), color var(--bx-dur) var(--bx-ease), transform var(--bx-dur) var(--bx-ease);
}
@media (hover: hover) {
  html body :is(.icon-btn, .adm-icon-btn, .member-icon-button):hover { background-color: var(--bx-hover) !important; }
}

/* ---- Kartlar ---- */
html body :is(.adm-card, .adm-stat-card, .bex-prof-card, .bex-feature-card, .bex-card-section, .verification-card, .bex-platform-card, .nav-card) {
  border-radius: var(--bx-r-lg) !important;
  border-color: var(--bx-line) !important;
  box-shadow: var(--bx-shadow-sm);
  transition: border-color var(--bx-dur) var(--bx-ease), box-shadow var(--bx-dur-slow) var(--bx-ease);
}
html body .adm-card:not([class*="from-"]):not([class*=" bg-"]):not([style*="background"]) { background-color: var(--bx-surface) !important; }
@media (hover: hover) {
  html body :is(.bex-feature-card, .bex-platform-card, .nav-card, .adm-stat-card):hover { box-shadow: var(--bx-shadow-lg); }
}

/* ---- Form alanları ---- */
html body :is(.adm-input, .wa-modal-input, .auth-input-wrap, .bex-search-input) {
  border-radius: var(--bx-r-md) !important;
  border-color: var(--bx-line) !important;
  background-color: var(--bx-surface-2) !important;
  color: var(--bx-text) !important;
  transition: border-color var(--bx-dur) var(--bx-ease), box-shadow var(--bx-dur) var(--bx-ease), background-color var(--bx-dur) var(--bx-ease);
}
html body :is(.adm-input, .wa-modal-input):focus,
html body .auth-input-wrap:focus-within {
  border-color: var(--bx-accent) !important;
  box-shadow: 0 0 0 2px var(--bx-ring) !important;
  outline: none !important;
}
html body .auth-field-error { color: var(--bx-danger) !important; }

/* ---- Tablolar (yönetim) ---- */
html body .adm-table { border-color: var(--bx-line) !important; }
html body .adm-table :is(th) { color: var(--bx-text-2) !important; font-weight: 600 !important; }
html body .adm-table tbody tr { transition: background-color var(--bx-dur) var(--bx-ease); }
@media (hover: hover) { html body .adm-table tbody tr:hover { background-color: var(--bx-hover) !important; } }

/* ---- Menüler ve açılır pencereler ---- */
html body :is(.wa-pop, .bex-popover, .bex-composer-dropdown-menu, .bex-page-menu-content, .bex-rail-action-menu) {
  border-radius: 14px !important;
  border: 1px solid var(--bx-line) !important;
  background-color: var(--bx-surface) !important;
  box-shadow: var(--bx-shadow-lg) !important;
  color: var(--bx-text);
}
html body :is(.menu-item, .bex-popover-item, .bex-page-menu-item, .bex-tl-menu-item, .bex-rail-action-menu-item, .bex-drop-opt) {
  border-radius: 10px;
  transition: background-color var(--bx-dur) var(--bx-ease);
}
@media (hover: hover) {
  html body :is(.menu-item, .bex-popover-item, .bex-page-menu-item, .bex-tl-menu-item, .bex-rail-action-menu-item, .bex-drop-opt):hover { background-color: var(--bx-hover) !important; }
}
html body .wa-menu-divider { background-color: var(--bx-line) !important; border-color: var(--bx-line) !important; }

/* ---- Pencereler (modal / dialog / sheet) ---- */
html body :is(.wa-dialog-card, .bex-gift-modal-card, .member-modal .modal-card, .wa-modal-card) {
  border-radius: var(--bx-r-xl) !important;
  background-color: var(--bx-surface) !important;
  color: var(--bx-text);
  box-shadow: var(--bx-shadow-lg) !important;
  border: 1px solid var(--bx-line);
}
html body :is(.wa-dialog-backdrop, .wa-modal-overlay, .bex-gift-modal-backdrop) {
  background-color: rgba(6, 10, 14, .55) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ---- Rozet ve çipler ---- */
html body :is(.kategori-chip-btn, .search-filter-btn, .bex-location-chip, .bex-ai-chip, .bex-reels-genre-pill, .bex-reels-country-tab, .adm-filter-btn) {
  border-radius: var(--bx-r-pill) !important;
  transition: background-color var(--bx-dur) var(--bx-ease), color var(--bx-dur) var(--bx-ease), border-color var(--bx-dur) var(--bx-ease);
}

/* ---- Tipografi: başlıklarda sıkı harf aralığı, rakamlarda eşit genişlik ---- */
html body :is(h1, h2) { letter-spacing: -0.015em; }
html body :is(.adm-stat-card, .thread-time, .bex-notif-time, .bex-package-price, #bex-gift-user-balance) { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   14. PERFORMANS
   ========================================================================== */
/* Uzun listelerde ekran dışındaki öğelerin çizimi ertelenir */
html body #thread-list-main > .thread-row { content-visibility: auto; contain-intrinsic-size: auto 72px; }
html body #notif-list-container > .bex-notif-card { content-visibility: auto; contain-intrinsic-size: auto 76px; }
html body #all-games-grid > .bex-game-card { content-visibility: auto; contain-intrinsic-size: auto 320px; }
/* Görseller: yüklenirken kaymayı önlemek için temel arka plan */
html body .bex-avatar-frame img, html body .bex-notif-avatar-img { background-color: var(--bx-surface-2); }

/* ==========================================================================
   15. SOL MENÜ (rail) AKTİF ÖĞE — ikon arka planla aynı renge düştüğü için
   görünmüyordu (koyu temada stroke: --wa-green-soft). Tek ve net kural.
   ========================================================================== */
html body #wa-rail :is(a, button).rail-btn:is(.on, [aria-current="page"]),
html.dark body #wa-rail :is(a, button).rail-btn:is(.on, [aria-current="page"]) {
  background: var(--bx-brand-soft) !important;
  color: var(--bx-brand) !important;
}
html body #wa-rail :is(a, button).rail-btn:is(.on, [aria-current="page"]) :is(.rail-btn-icon, .rail-btn-icon svg, svg),
html.dark body #wa-rail :is(a, button).rail-btn:is(.on, [aria-current="page"]) :is(.rail-btn-icon, .rail-btn-icon svg, svg) {
  color: var(--bx-brand) !important;
  stroke: var(--bx-brand) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html body #wa-rail .rail-btn:not(.on):not([aria-current="page"]) .rail-btn-icon svg { stroke: currentColor !important; }
html body #wa-rail .rail-btn:not(.on):not([aria-current="page"]) { color: var(--bx-text-2) !important; }
@media (hover: hover) {
  html body #wa-rail .rail-btn:not(.on):not([aria-current="page"]):hover { background: var(--bx-hover) !important; color: var(--bx-text) !important; }
}

/* ==========================================================================
   16. MEDYA ÖNİZLEME / DÜZENLEME PENCERELERİ — tamamen tema renkleri
   Pencereler yarı yarıya sabit koyu renk (#202c33, #0b141a ...) yarı yarıya tema
   değişkeni kullandığı için açık temada karışık görünüyordu (ör. koyu yazı koyu
   zeminde). İşaretlemeye dokunmadan tüm yüzeyler ortak palete bağlanır.
   ========================================================================== */
/* Yüzeyler */
html body :is(:is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal), :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal) *):is([class*="bg-[var(--color-bg-dark)]"], [class*="bg-[#0b141a]"], [class*="bg-[#111b21]"], [class*="bg-[#1f2c34]"], [class*="bg-[#182229]"]) {
  background-color: var(--bx-surface) !important;
}
html body :is(:is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal), :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal) *):is([class*="bg-[#202c33]"]) {
  background-color: var(--bx-surface-2) !important;
}
html body :is(:is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal), :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal) *):is([class*="hover:bg-[#2a3942]"]):hover {
  background-color: var(--bx-surface-3) !important;
}
/* Pencere arka planı ve önizleme sahnesi */
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) {
  background-color: var(--bx-bg) !important;
  color: var(--bx-text) !important;
}
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) :is(#wa-media-modal-stage, [class*="bg-[#0c1317]"]) {
  background-color: var(--bx-chat-bg) !important;
}
/* Kenarlıklar */
html body :is(:is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal), :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal) *):is([class*="border-[#222d34]"], [class*="border-[#2a3942]"], [class*="border-white/"]) {
  border-color: var(--bx-line) !important;
}
/* Yazı renkleri */
html body :is(:is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal), :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal) *):is([class*="text-[#e9edef]"], [class*="text-[#d1d7db]"]) {
  color: var(--bx-text) !important;
}
html body :is(:is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal), :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-emoji-picker, #wa-editor-crop-panel, #wa-editor-draw-panel, #bex-schedule-modal, #ctx-menu, #bex-voice-recorder-bar, #bex-viewonce-modal) *):is([class*="text-[#aebac1]"], [class*="text-[#8696a0]"], [class*="text-[var(--color-muted)]"]) {
  color: var(--bx-text-2) !important;
}
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) .text-white:not([class*="bg-"]) { color: var(--bx-text) !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) :is([class*="hover:text-white"]):hover { color: var(--bx-text) !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) ::placeholder { color: var(--bx-text-2) !important; opacity: .85; }
/* Hover / aktif yüzeyler (beyaz saydam yerine tema) */
html body :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-crop-panel, #wa-editor-draw-panel) :is([class*="hover:bg-white/"]):hover { background-color: var(--bx-hover) !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-crop-panel, #wa-editor-draw-panel) :is([class*="bg-white/10"]):not([class*="hover:bg-white/10"]) { background-color: var(--bx-surface-2) !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-crop-panel, #wa-editor-draw-panel) :is([class*="bg-white/20"]):not([class*="hover:bg-white/20"]) { background-color: var(--bx-surface-3) !important; }
/* Marka butonları (gönder, uygula, aktif oran): metin zemine göre okunur */
html body :is(#wa-media-preview-modal, #grup-media-preview-modal, #wa-editor-crop-panel) :is([class*="text-[var(--color-bg-dark)]"]) { color: var(--bx-on-brand) !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) :is(#wa-media-modal-send, #grup-media-preview-send, [class*="hover:bg-[#008f72]"]) { background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; color: #ffffff !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) :is(#wa-media-modal-send, #grup-media-preview-send, [class*="hover:bg-[#008f72]"]):hover { background: linear-gradient(135deg, #0369a1, #0284c7) !important; color: #ffffff !important; }
/* Açıklama alanı */
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) #wa-media-caption-input { color: var(--bx-text) !important; background: transparent !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) :is(#wa-media-caption-input):focus { box-shadow: none !important; }
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) [class*="focus-within:border-"]:focus-within { border-color: rgba(255, 255, 255, 0.28) !important; }
/* Etkin durumdaki düğmeler (HD / tek gösterimlik) */
html body :is(#wa-media-modal-hd, #wa-media-modal-view-once):is([data-hd="1"], [data-viewonce="1"]) {
  background-color: var(--bx-brand-soft) !important; color: var(--bx-brand) !important; border-color: var(--bx-brand) !important;
}
/* Pencere kapatma / araç ikonları: tema ikon rengi, dokunma alanı yeterli */
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) header button .material-symbols-outlined { color: inherit; }
/* Videoda yerel kontroller ve görsel gölgesi sakin */
html body :is(#wa-media-preview-modal, #grup-media-preview-modal) :is(#wa-media-modal-img, #wa-media-modal-video) { box-shadow: var(--bx-shadow-lg) !important; }

/* ---- Tek gösterimlik medya ---- */
/* Yeni etiket "1 Fotoğraf": daire simgesi içinde yinelenen rakam yerine nokta */
.bw-viewonce-circle:empty::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body #bex-viewonce-modal { background-color: var(--bx-bg) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body #bex-viewonce-modal :is(#bex-viewonce-stage, #bex-viewonce-loader) { background-color: var(--bx-chat-bg) !important; }
html body #bex-viewonce-modal :is(#bex-viewonce-img, #bex-viewonce-video) { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
/* Yazdırma / PDF: görüntüleyici kesinlikle çıktıda yer almaz */
@media print { #bex-viewonce-modal, #wa-media-preview-modal, #grup-media-preview-modal { display: none !important; visibility: hidden !important; } }

/* Uyarı pencereleri: 
 satır sonları korunur */
html body :is(.wa-dialog-card) :is(p, .wa-dialog-message, [id*="message"]) { white-space: pre-line; }


/* ==========================================================================
   BEXGRAM 2026 — PÜRÜZSÜZ TEMA GEÇİŞLERİ & SKELETON SHIMMER DOKUSU
   ========================================================================== */
html,
body,
.app-container,
#wa-rail,
#app-tabs,
.thread-row,
.bex-glass-card,
.wa-main-header,
.wa-chat-header,
.page-navigation {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.25s ease !important;
}

@keyframes bexShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.bex-skeleton-shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: bexShimmer 1.6s infinite ease-in-out;
}

html.light .bex-skeleton-shimmer {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
}


/* ==========================================================================
   BEXGRAM 2026 — ULTRA-MODERN VIBRANT FAB (+) BUTTON WITH ROTATING RGB AURA
   ========================================================================== */
@keyframes bexFABRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes bexFABPulsate {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 168, 132, 0.45), 0 0 25px rgba(14, 165, 233, 0.35);
    }
    50% {
        box-shadow: 0 6px 28px rgba(0, 168, 132, 0.65), 0 0 35px rgba(14, 165, 233, 0.55);
    }
}

.bex-wa-fab-btn,
.bex-floating-fab {
    pointer-events: auto !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    border-radius: 50% !important;
    position: relative !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;
    border: none !important;
    outline: none !important;
    isolation: isolate !important;
    background: transparent !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 1000 !important;
    animation: bexFABPulsate 3s ease-in-out infinite !important;
}

/* 1. Dış Dairede Dönen Yarı Şeffaf Canlı RGB Halo Halkası */
.bex-wa-fab-btn::before,
.bex-floating-fab::before {
    content: "" !important;
    position: absolute !important;
    inset: -3.5px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 0deg,
        rgba(255, 0, 128, 0.85),
        rgba(121, 40, 202, 0.85),
        rgba(0, 112, 243, 0.9),
        rgba(0, 223, 216, 0.95),
        rgba(0, 200, 83, 0.95),
        rgba(255, 184, 0, 0.85),
        rgba(255, 0, 128, 0.85)
    ) !important;
    animation: bexFABRotate 3.2s linear infinite !important;
    z-index: -2 !important;
    opacity: 0.85 !important;
    filter: blur(1px) !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

/* 2. Dönen RGB ile İç Buton Arasında Şık İnce Işık Boşluğu */
.bex-wa-fab-btn::after,
.bex-floating-fab::after {
    content: "" !important;
    position: absolute !important;
    inset: 1.5px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00A884 0%, #008069 40%, #0EA5E9 100%) !important;
    z-index: -1 !important;
    transition: background 0.3s ease !important;
}

html.dark .bex-wa-fab-btn::after,
html.dark .bex-floating-fab::after {
    background: linear-gradient(135deg, #00C853 0%, #00A884 35%, #0EA5E9 75%, #38BDF8 100%) !important;
}

/* İkon ve İçerik */
.bex-wa-fab-btn .bex-wa-fab-icon-main,
.bex-floating-fab .bex-wa-fab-icon-main {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)) !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hover ve Active Etkileşimleri */
.bex-wa-fab-btn:hover,
.bex-floating-fab:hover {
    transform: scale(1.12) translateY(-2px) !important;
}

.bex-wa-fab-btn:hover::before,
.bex-floating-fab:hover::before {
    opacity: 1 !important;
    filter: blur(2.5px) !important;
    animation-duration: 2s !important;
}

.bex-wa-fab-btn:active,
.bex-floating-fab:active {
    transform: scale(0.92) !important;
}



/* ==========================================================================
   BEXGRAM 2026 — MEDYA ÖNİZLEME MODALI & SÜRÜKLE-BIRAK TEMASI
   ========================================================================== */
#bex-dnd-overlay {
    cursor: pointer;
}

#bex-dnd-card {
    cursor: default;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 168, 132, 0.25) !important;
}

/* Medya Önizleme Modalı Gönder Butonu */
#wa-media-modal-send {
    background: linear-gradient(135deg, #00A884 0%, #008069 40%, #0EA5E9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 168, 132, 0.45) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

#wa-media-modal-send:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 24px rgba(0, 168, 132, 0.65) !important;
}

#wa-media-modal-send:active {
    transform: scale(0.92) !important;
}

/* Medya Önizleme Başlık ve Açıklama Çubuğu */
#wa-media-preview-modal header {
    background: var(--wa-surface, rgba(17, 27, 33, 0.95)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#wa-media-preview-modal footer {
    background: var(--wa-surface, rgba(17, 27, 33, 0.95)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Küçük Resimler Şeridi (Thumbnails Carousel) */
#wa-media-modal-carousel {
    background: var(--wa-surface, rgba(17, 27, 33, 0.95)) !important;
}

.wa-media-thumb.is-active,
.wa-carousel-thumb.is-active {
    border-color: #00A884 !important;
    box-shadow: 0 0 12px rgba(0, 168, 132, 0.6) !important;
    transform: scale(1.05) !important;
}


/* ==========================================================================
   BEXGRAM 2026 — SÜRÜKLE-BIRAK (DND) VE MEDYA ÖNİZLEME KATI KURALLARI
   ========================================================================== */
#bex-dnd-overlay.hidden,
#bex-dnd-overlay[hidden],
#wa-drag-drop-overlay.hidden,
#wa-drag-drop-overlay[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#bex-dnd-overlay:not(.hidden):not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#bex-dnd-overlay {
    cursor: pointer;
}

#bex-dnd-card {
    cursor: default;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 168, 132, 0.25) !important;
}

/* Medya Önizleme Modalı (Tam Ekran WhatsApp Web 2026) */
#wa-media-preview-modal {
    z-index: 100090 !important;
}

#wa-media-preview-modal header {
    background: rgba(17, 27, 33, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#wa-media-preview-modal footer {
    background: rgba(17, 27, 33, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#wa-media-modal-send {
    background: linear-gradient(135deg, #00A884 0%, #008069 40%, #0EA5E9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 168, 132, 0.45) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

#wa-media-modal-send:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 24px rgba(0, 168, 132, 0.65) !important;
}

#wa-media-modal-send:active {
    transform: scale(0.92) !important;
}


/* ==========================================================================
   /* TÜM PROJEDE TIKLAMA / ODAKLANMA YEŞİLLİKLERİNİN İPTALİ */
   ========================================================================== */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
}

:focus, :focus-visible, :active {
  outline: none !important;
  outline-color: transparent !important;
}

button:focus, button:focus-visible,
a:focus, a:focus-visible,
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
[tabindex]:focus, [tabindex]:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

input:focus, textarea:focus, select:focus,
#composer-input-wrap:focus-within,
.composer-container:focus-within,
.biz-field input:focus-visible,
.biz-field textarea:focus-visible,
.biz-screen input:focus-visible,
.biz-screen textarea:focus-visible,
.biz-screen select:focus-visible,
.bex-settings-search-box:focus-within {
  border-color: var(--bx-line, rgba(255, 255, 255, 0.18)) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Navigasyon aktif sekme: arka plan/daire tamamen kaldırıldı, sadece metin ve ikon rengi */
body #app-tabs .bex-nav-active-dot {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body #app-tabs .page-navigation-link.is-active,
body #app-tabs .page-navigation-link.on {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  color: var(--bx-accent, #38bdf8) !important;
}

html:not(.dark) body #app-tabs .page-navigation-link.is-active,
html:not(.dark) body #app-tabs .page-navigation-link.on {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  color: var(--bx-accent, #0284c7) !important;
}