/* Bexgram polish layer — düşük özgüllük (:where) ile mevcut tasarımı bozmadan
   erişilebilirlik, dokunma hedefi, güvenli alan ve hareket tercihi iyileştirmeleri. */
:root { --bex-focus: #00a884; --bex-focus-offset: 2px; }
html[data-theme="dark"], html.dark { --bex-focus: #25d366; color-scheme: dark; }
html[data-theme="light"], html.light { color-scheme: light; }

/* Klavye odağı: tüm etkileşimli öğelerde görünür halka */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--bex-focus);
  outline-offset: var(--bex-focus-offset);
  border-radius: inherit;
}

/* Taşma önleme: medya ve uzun metinler kapsayıcıyı aşmasın */
:where(img, video, canvas, svg, iframe) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(p, h1, h2, h3, h4, h5, h6, li, td, th, label, .settings-item-title, .settings-item-sub) { overflow-wrap: anywhere; }
:where(pre, code) { white-space: pre-wrap; word-break: break-word; }
:where(table) { max-width: 100%; }

/* Dokunmatik cihazlar: rahat dokunma hedefi, çift dokunma yakınlaştırmasını kapat */
@media (pointer: coarse) {
  :where(button, [role="button"], .settings-nav-item, .rail-btn, select) { min-height: 44px; }
  :where(a, button, [role="button"], input, select, textarea, label, summary) { touch-action: manipulation; }
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: max(16px, 1em); }
}

/* Çentikli cihazlar için güvenli alan */
@supports (padding: max(0px)) {
  body.bex-device-mobile { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* Ayarlar çekmecesi: tema butonları için seçili durum */
.wa-theme-btn { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; cursor: pointer; }
.wa-theme-btn.is-active { border-color: #00a884; }
.settings-nav-item { transition: background-color .15s ease; }
.settings-nav-item.hidden { display: none; }

/* Sakin kaydırma çubukları (karanlık/aydınlık) */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(134,150,160,.45) transparent; }
}

/* Hareket hassasiyeti olanlar için animasyonları kıs */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Yazdırma: gezinti öğelerini gizle */
@media print { #wa-rail, .bex-rail-settings-wrap, nav[aria-label="Gezinti"] { display: none !important; } }

/* Sohbetleri seç (toplu seçim) — seçim kutuları ve vurgu */
#messenger-sidebar.is-chat-selecting { position: relative; }
#messenger-sidebar.is-chat-selecting .thread-row[data-thread] { position: relative; padding-left: 48px !important; cursor: pointer; transition: background-color .15s ease, padding .15s ease; }
#messenger-sidebar.is-chat-selecting .thread-row[data-thread]::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%; border: 2px solid #8696a0; background: transparent; box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease;
}
#messenger-sidebar.is-chat-selecting .thread-row[data-thread="genel"] { padding-left: inherit !important; opacity: .55; }
#messenger-sidebar.is-chat-selecting .thread-row[data-thread="genel"]::before { display: none; }
#messenger-sidebar.is-chat-selecting .thread-row.is-selected::before {
  border-color: #00a884; background: #00a884 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
}
#messenger-sidebar.is-chat-selecting .thread-row.is-selected { background-color: rgba(0,168,132,.10) !important; }
html.dark #messenger-sidebar.is-chat-selecting .thread-row.is-selected, html[data-theme="dark"] #messenger-sidebar.is-chat-selecting .thread-row.is-selected { background-color: rgba(0,168,132,.16) !important; }
#wa-bulk-chat-bar { min-height: 56px; }
#wa-bulk-chat-bar.hidden { display: none !important; }
@media (max-width: 767px) { #wa-bulk-chat-bar { position: fixed; padding-top: max(8px, env(safe-area-inset-top, 0px)); } }

/* =====================================================================
   META PLATFORM STYLE – Alt Gezinme, Üst Bar, Kart ve Genel UI İyileştirmeleri
   ===================================================================== */

/* — Alt gezinme çubuğu: Meta tarzı yüksek kontrast aktif durum — */
@media (max-width: 767px) {
  /* Aktif sekme: dolgu ikon + yeşil renk */
  .page-navigation-link.is-active,
  .page-navigation-link[aria-current="page"],
  #app-tabs .tab-btn.is-active,
  #app-tabs [data-page-tab].is-active {
    color: var(--bex-primary, #00a884) !important;
  }
  .page-navigation-link.is-active svg,
  .page-navigation-link[aria-current="page"] svg,
  #app-tabs .tab-btn.is-active svg,
  #app-tabs [data-page-tab].is-active svg {
    filter: drop-shadow(0 0 4px rgba(0,168,132,.35));
  }
  /* Aktif sekme altında nokta göstergesi */
  .page-navigation-link.is-active::after,
  .page-navigation-link[aria-current="page"]::after {
    content: "";
    display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--bex-primary, #00a884);
    margin: 2px auto 0;
  }
  /* Tab ikonları: daha büyük, daha havadar */
  .page-navigation-link svg,
  #app-tabs .tab-btn svg { width: 26px !important; height: 26px !important; }
  .page-navigation-link { min-width: 48px; }
  .page-navigation-label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .02em; }
}

/* — Üst başlık çubuğu: Meta tarzı temiz görünüm — */
.bxh, .bex-page-head, header.bexh {
  border-bottom: 1px solid var(--wa-line, rgba(0,0,0,0.08)) !important;
}
/* Başlık metin boyutu tutarlılığı */
.bxh-title, .bex-page-title, .bex-header-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* — Kart ve öğe hover efektleri — */
@media (hover: hover) {
  .thread-row:hover, .search-user-item:hover, .notif-item:hover,
  .kesfet-item:hover, .member-list-item:hover {
    background-color: var(--wa-hover, rgba(0,0,0,.04)) !important;
    transition: background-color .12s ease;
  }
  html.dark .thread-row:hover, html.dark .search-user-item:hover,
  html.dark .notif-item:hover, html.dark .kesfet-item:hover {
    background-color: var(--wa-hover, rgba(255,255,255,.04)) !important;
  }
}

/* — Buton temel iyileştirmeleri: aktif baskı efekti — */
button:active:not(:disabled), [role="button"]:active:not([aria-disabled="true"]),
a.btn:active, .wa-btn:active, .bex-btn:active {
  transform: scale(0.97);
  transition: transform .08s ease;
}

/* — Avatar yuvarlak hale getirme — */
.wa-avatar, .bex-avatar, .user-avatar,
.search-user-avatar img, .thread-avatar img,
.notif-avatar img, .member-avatar img {
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* — Okunmamış rozet: Meta tarzı kırmızı yuvarlak — */
.unread-badge, .bex-badge, .notif-count,
.thread-unread-badge:not(.is-muted) {
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px; min-height: 18px;
  padding: 0 4px;
  line-height: 18px;
}

/* — Profil sayfası buton grubu (uye.php) — */
.member-buttons-row { gap: 8px !important; }
.member-button {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
  transition: filter .12s ease, transform .08s ease !important;
}
.member-button:active { transform: scale(.97) !important; }

/* — Takip et butonu renk iyileştirmeleri — */
.search-quick-follow-btn, .follow-btn, .btn-takip-et {
  min-width: 80px;
  font-weight: 700 !important;
}

/* — Hediye / coin gönder butonu — */
.btn-send-user-gift {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(16,185,129,.18)) !important;
  border: 1.5px solid rgba(245,158,11,.5) !important;
  color: #d97706 !important;
  font-weight: 700 !important;
}
html.dark .btn-send-user-gift {
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(16,185,129,.22)) !important;
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.5) !important;
}

/* — Mesaj baloncukları: Meta tarzı yuvarlatma — */
.wa-msg-bubble, .bex-bubble, .message-bubble {
  border-radius: 18px !important;
}
.wa-msg-bubble.is-outgoing, .bex-bubble.is-outgoing, .message-bubble.is-me {
  border-bottom-right-radius: 4px !important;
}
.wa-msg-bubble.is-incoming, .bex-bubble.is-incoming, .message-bubble.is-other {
  border-bottom-left-radius: 4px !important;
}

/* — Genel input/textarea iyileştirmeleri — */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="tel"], textarea {
  outline: none !important;
}
input[type="text"]:focus, input[type="search"]:focus,
input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(0,168,132,.2) !important;
  border-color: var(--bex-primary, #00a884) !important;
}

/* — Yükleme iskelet animasyonu iyileştirme — */
.bex-wa-skel-avatar, .bex-wa-skel-line {
  background: linear-gradient(90deg,
    rgba(0,0,0,.07) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.07) 63%
  ) !important;
  background-size: 400px 100% !important;
  animation: bex-skel-shimmer 1.4s ease infinite !important;
}
html.dark .bex-wa-skel-avatar, html.dark .bex-wa-skel-line {
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 25%, rgba(255,255,255,.1) 37%, rgba(255,255,255,.06) 63%
  ) !important;
  background-size: 400px 100% !important;
}
@keyframes bex-skel-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* — Reels: tam ekran snap scroll — */
#reels-container { scroll-snap-type: y mandatory !important; }
.reel-item { scroll-snap-align: start !important; }

/* — Bildirim noktası: okunmamış gösterge — */
.has-unread-dot::after {
  content: "";
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid var(--wa-surface, #fff);
  pointer-events: none;
}

/* — Rail (sol gezinme) buton vurgulama — */
.rail-btn.is-active, .wa-rail-btn.is-active,
#wa-rail button.is-active, #wa-rail a.is-active {
  color: var(--bex-primary, #00a884) !important;
  background: rgba(0,168,132,.1) !important;
  border-radius: 10px !important;
}
html.dark .rail-btn.is-active, html.dark .wa-rail-btn.is-active {
  background: rgba(37,211,102,.12) !important;
}

/* — Medya gönderme düğmesi (ataç/kamera) — */
.wa-attach-btn, .wa-send-btn, .bex-send-btn {
  transition: background-color .15s ease, transform .08s ease !important;
}
.wa-send-btn:active, .bex-send-btn:active {
  transform: scale(.92) !important;
}

/* — Arama filtresi pill aktif durumu — */
.search-filter-btn.is-active {
  background: var(--bex-primary, #00a884) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,168,132,.3) !important;
}
html.dark .search-filter-btn.is-active {
  box-shadow: 0 2px 8px rgba(37,211,102,.25) !important;
}

/* — Profil istatistik sayaçları — */
.bex-counter-col { cursor: pointer; transition: opacity .12s ease; }
.bex-counter-col:active { opacity: .75; }

/* — Geçiş animasyonları — */
@media (prefers-reduced-motion: no-preference) {
  .page-navigation-link, .rail-btn, .wa-rail-btn {
    transition: color .15s ease, background-color .15s ease !important;
  }
}

/* — Responsive kart düzeni — */
@media (max-width: 480px) {
  .bex-cards-grid, .feed-grid, .posts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* — Versiyon: 20261108meta1 — */