/* Bexgram Reels: a single layout owner, inside the shared application shell. */

:root {

  --bex-reel-width: 440px;

  --bex-reel-radius: 18px;

  --reels-nav-space: 0px;

}



html:has(body.page-reels) {

  width: 100%;

  height: 100%;

  margin: 0;

  overflow: hidden;

}



/* The rail is a flex child here. Shared fixed-rail padding would count it twice. */

body.bex-wa.page-reels,

body.bex-wa.page-reels.has-desktop-rail {

  margin: 0 !important;

  padding: 0 !important;

  width: 100% !important;

  height: 100vh !important;

  height: 100dvh !important;

  min-height: 0 !important;

  max-height: 100dvh !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  background: var(--wa-bg, #0b141a) !important;

  color: var(--wa-text, var(--wa-line));

  touch-action: pan-y;

}



body.page-reels #bex-reels-main-layout {

  display: flex !important;

  flex: 1 1 0 !important;

  flex-direction: row !important;

  align-items: stretch !important;

  width: 100% !important;

  max-width: none !important;

  height: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  position: relative !important;

  overflow: hidden !important;

  background: var(--wa-bg, #0b141a);

}



body.page-reels #wa-rail.bex-desktop-rail {

  position: relative !important;

  inset: auto !important;

  display: flex !important;

  flex: 0 0 72px !important;

  width: 72px !important;

  min-width: 72px !important;

  max-width: 72px !important;

  height: 100% !important;

  margin: 0 !important;

  z-index: 40 !important;

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

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

}



body.page-reels #reels-desktop-sidebar {

  display: flex !important;

  flex: 0 0 clamp(280px, 23vw, 340px) !important;

  flex-direction: column;

  width: clamp(280px, 23vw, 340px) !important;

  min-width: 0 !important;

  max-width: 340px !important;

  height: 100%;

  min-height: 0;

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

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

}



body.page-reels #reels-main-section {

  display: flex !important;

  flex: 1 1 0 !important;

  flex-direction: column !important;

  align-items: stretch !important;

  width: 0 !important;

  min-width: 0 !important;

  height: 100% !important;

  min-height: 0 !important;

  overflow: hidden !important;

  background: var(--wa-bg, #0b141a) !important;

}



body.page-reels .bex-reels-stage-wrap {

  display: flex !important;

  flex: 1 1 0 !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  width: 100% !important;

  height: 0 !important;

  min-height: 0 !important;

  padding: 12px 16px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  background: var(--wa-bg, #0b141a) !important;

}



body.page-reels .bex-reels-stage {

  display: flex !important;

  flex: 0 1 var(--bex-reel-width) !important;

  flex-direction: column !important;

  align-items: stretch !important;

  position: relative !important;

  width: var(--bex-reel-width) !important;

  max-width: 100% !important;

  min-width: 0 !important;

  height: 100% !important;

  max-height: 820px !important;

  margin: 0 auto !important;

  border-radius: var(--bex-reel-radius) !important;

  overflow: hidden !important;

  background: var(--wa-bg, #0b141a) !important;

  box-shadow: 0 0 0 1px var(--wa-line, rgba(255, 255, 255, 0.08)), 0 12px 36px rgba(0, 0, 0, .22) !important;

}



body.page-reels .bex-reels-feed {

  position: relative;

  flex: 1 1 0;

  width: 100% !important;

  max-width: 100% !important;

  height: 100% !important;

  min-height: 0;

  max-height: 100% !important;

  overflow-x: hidden;

  overflow-y: auto;

  overscroll-behavior-y: contain;

  scroll-snap-type: y mandatory;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

  background: var(--wa-bg, #0b141a) !important;

}



body.page-reels .bex-reel-card {

  width: 100% !important;

  height: 100% !important;

  min-height: 100% !important;

  max-height: 100% !important;

  background: var(--wa-bg, #0b141a) !important;

}



body.page-reels .bex-reels-desktop-controls {

  position: static !important;

  transform: none !important;

  display: flex !important;

  flex-direction: column;

  flex: 0 0 48px;

  gap: 12px;

  margin: 0 !important;

  pointer-events: auto;

}



body.page-reels #bex-reels-desktop-side-panel {

  display: flex !important;

  flex: 0 1 340px !important;

  flex-direction: column;

  width: 340px !important;

  min-width: 260px !important;

  max-width: 340px !important;

  height: 100% !important;

  max-height: 820px !important;

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

  border-radius: var(--bex-reel-radius);

  overflow: hidden;

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

}



@media (min-width: 768px) {

  body.page-reels .bex-reels-stage .bex-reels-global-header {

    padding-top: 14px !important;

    padding-bottom: 12px !important;

    justify-content: center !important;

  }

  body.page-reels .bex-reels-header-left,

  body.page-reels .bex-reels-header-right {

    display: none !important;

  }

}



/* Make room for the feed before adding secondary panels. */

@media (max-width: 1439px) {

  body.page-reels #bex-reels-desktop-side-panel { display: none !important; }

}

@media (max-width: 1099px) {

  body.page-reels #reels-desktop-sidebar { display: none !important; }

}



/* A phone keeps its mobile navigation in landscape as well. */

@media (max-width: 1023px) {

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

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

padding-left: 0 !important;

padding-bottom: 0 !important;

}

body.page-reels.bex-device-mobile #bex-reels-main-layout {

height: calc(100dvh - var(--reels-nav-space)) !important;

max-height: calc(100dvh - var(--reels-nav-space)) !important;

margin: 0 !important;

}

body.page-reels.bex-device-mobile .bex-reels-stage,

body.page-reels.bex-device-mobile .bex-reels-stage-wrap {

max-height: calc(100dvh - var(--reels-nav-space)) !important;

}

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

  body.page-reels.bex-device-mobile #wa-rail.bex-desktop-rail,

  body.page-reels.bex-device-mobile #reels-desktop-sidebar,

  body.page-reels.bex-device-mobile #bex-reels-desktop-side-panel,

  body.page-reels.bex-device-mobile .bex-reels-desktop-controls,

  body.page-reels.bex-device-mobile #reels-main-section > .bex-global-header,

  body.page-reels.bex-device-mobile .bex-reels-desktop-header {

    display: none !important;

  }

  body.page-reels.bex-device-mobile .bex-reels-stage-wrap {

    padding: 0 !important;

    margin: 0 !important;

  }

  body.page-reels.bex-device-mobile .bex-reels-stage {

    flex: 1 1 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    max-height: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    margin: 0 !important;

  }

}



/* Masaüstü (>= 768px) alt menüyü kapatır; video sahnesi 1024px üstünde kart olur. */

@media (min-width: 768px) {

body.page-reels #app-tabs,

body.page-reels .page-navigation {

display: none !important;

visibility: hidden !important;

pointer-events: none !important;

}

}

@media (min-width: 1024px) {

  body.page-reels #reels-desktop-sidebar {

    display: flex !important;

  }

  body.page-reels .bex-reels-stage {

    flex: 0 1 var(--bex-reel-width, 440px) !important;

    width: var(--bex-reel-width, 440px) !important;

    max-width: var(--bex-reel-width, 440px) !important;

    max-height: 820px !important;

    border-radius: var(--bex-reel-radius, 18px) !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

    margin: 0 auto !important;

  }

  body.page-reels .bex-reels-stage-wrap {

    padding: 12px 16px !important;

    display: flex !important;

    justify-content: center !important;

  }

  body.page-reels #bex-reels-main-layout {

    margin-bottom: 0 !important;

  }

}

@media (min-width: 1440px) {

  body.page-reels #bex-reels-desktop-side-panel {

    display: flex !important;

  }

}



@media (max-width: 767px) {

body.page-reels {

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

padding-left: 0 !important;

padding-bottom: 0 !important;

box-sizing: border-box !important;

}

body.page-reels #bex-reels-main-layout {

flex: 0 0 auto !important;

height: calc(100dvh - var(--reels-nav-space)) !important;

max-height: calc(100dvh - var(--reels-nav-space)) !important;

margin: 0 !important;

}

body.page-reels .bex-reels-stage,

body.page-reels .bex-reels-stage-wrap,

body.page-reels #reels-main-section {

max-height: calc(100dvh - var(--reels-nav-space)) !important;

}

  body.page-reels #wa-rail,

  body.page-reels #wa-rail.bex-desktop-rail,

  body.page-reels #reels-desktop-sidebar,

  body.page-reels #bex-reels-desktop-side-panel,

  body.page-reels .bex-reels-desktop-controls,

  body.page-reels #reels-main-section > .bex-global-header,

  body.page-reels .bex-reels-desktop-header {

    display: none !important;

  }

  body.page-reels .bex-reels-stage-wrap {

    padding: 0 !important;

    margin: 0 !important;

  }

  body.page-reels .bex-reels-stage {

    flex: 1 1 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    max-height: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    margin: 0 !important;

  }

  body.page-reels:not(.bex-modal-open):not(.has-active-modal):not(.kb-open):not(.has-reel-holding) #app-tabs {

  display: flex !important;

  visibility: visible !important;

  pointer-events: auto !important;

  /* Physical bar height stays measurable after a modal or desktop resize.

     --bex-nav-height only reserves the space occupied by a visible bar. */

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

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

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

  overflow: hidden !important;

  box-sizing: border-box !important;

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

  }

}



/* Header styles */

.bex-reels-global-header {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  max-width: 100vw;

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

  height: auto;

  padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px));

  padding-bottom: 10px;

  padding-left: 12px;

  padding-right: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  z-index: 50;

  background: linear-gradient(180deg, rgba(11, 20, 26, 0.92) 0%, rgba(11, 20, 26, 0.55) 60%, transparent 100%);

  pointer-events: none;

  box-sizing: border-box;

  overflow: visible !important;

}

html:not(.dark) .bex-reels-global-header {

  background: linear-gradient(180deg, rgba(240, 242, 245, 0.92) 0%, rgba(240, 242, 245, 0.45) 60%, transparent 100%);

}

html:not(.dark) .bex-reels-nav-tabs {

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

  border: 1px solid rgba(0, 0, 0, 0.1);

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

}

html:not(.dark) .bex-reels-tab-btn {

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

}

html:not(.dark) .bex-reels-tab-btn:hover {

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

}

html:not(.dark) .bex-reels-tab-btn.is-active {

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

  background: rgba(0, 128, 105, 0.12);

  text-shadow: none;

}

html:not(.dark) .bex-reels-tab-sep {

  color: rgba(0, 0, 0, 0.25);

}

html:not(.dark) .bex-reels-icon-btn {

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

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

  border: 1px solid rgba(0, 0, 0, 0.1);

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}

html:not(.dark) .bex-reels-icon-btn:hover {

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

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

  border-color: rgba(0, 0, 0, 0.2);

}

.bex-reels-global-header * {

  pointer-events: auto;

}

.bex-reels-header-left {

  display: flex;

  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  z-index: 2;

}

.bex-reels-header-center {

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 1 1 auto;

  min-width: 0;

  z-index: 1;

}

.bex-reels-header-right {

  display: flex;

  align-items: center;

  gap: 5px;

  flex: 0 0 auto;

  z-index: 2;

}



/* Keşfet • Takip Ettiklerim Sekmeleri (TikTok & Instagram Reels Tarzı) */

.bex-reels-nav-tabs {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  padding: 3px 8px;

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

  backdrop-filter: blur(16px) saturate(180%);

  -webkit-backdrop-filter: blur(16px) saturate(180%);

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

  max-width: 100%;

}

.bex-reels-tab-btn {

  background: transparent;

  border: none;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12.5px;

  font-weight: 700;

  padding: 3px 8px;

  border-radius: 999px;

  cursor: pointer;

  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);

  outline: none;

  white-space: nowrap;

  letter-spacing: -0.01em;

  position: relative;

  touch-action: manipulation;

}

.bex-reels-tab-btn:hover {

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

}

.bex-reels-tab-btn.is-active {

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

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

  font-weight: 800;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

}

.bex-reels-tab-sep {

  color: rgba(255, 255, 255, 0.32);

  font-size: 10px;

  user-select: none;

}

.bex-reels-brand {

  display: flex;

  align-items: center;

  gap: 8px;

}

.bex-reels-logo-img {

  width: 26px;

  height: 26px;

  border-radius: 8px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

}

.bex-reels-brand-title {

  font-weight: 800;

  font-size: 16px;

  letter-spacing: -0.02em;

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

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);

}

.bex-reels-badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 3px 8px;

  border-radius: 999px;

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

  backdrop-filter: blur(10px);

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

  border: 1px solid rgba(255, 255, 255, 0.15);

  font-size: 10px;

  font-weight: 700;

  color: var(--wa-green-soft);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.bex-reels-icon-btn {

  width: 36px;

  height: 36px;

  min-width: 36px;

  min-height: 36px;

  border-radius: 50%;

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

  backdrop-filter: blur(12px);

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

  border: 1px solid rgba(255, 255, 255, 0.18);

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

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  outline: none;

  transition: all 0.18s ease;

  touch-action: manipulation;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

}

.bex-reels-icon-btn:hover {

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

  border-color: rgba(255, 255, 255, 0.35);

  transform: scale(1.05);

}

.bex-reels-icon-btn:active {

  transform: scale(0.94);

}

.bex-reels-action-pill {

  height: 36px;

  padding: 0 12px;

  border-radius: 999px;

  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);

  border: 1px solid rgba(255, 255, 255, 0.22);

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

  font-weight: 700;

  font-size: 12.5px;

  letter-spacing: -0.01em;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

  outline: none;

  box-shadow: 0 3px 12px rgba(5, 150, 105, 0.35);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  touch-action: manipulation;

}

.bex-reels-action-pill:hover {

  transform: translateY(-1px) scale(1.02);

  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.45);

}

.bex-reels-action-pill:active {

  transform: scale(0.96);

}

.bex-reels-pill-text {

  display: inline-block;

  white-space: nowrap;

}



@media (max-width: 640px) {

  .bex-reels-global-header {

    padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;

    padding-bottom: 8px !important;

    padding-left: 10px !important;

    padding-right: 10px !important;

    gap: 6px !important;

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

    overflow: visible !important;

  }

  .bex-reels-pill-text {

    display: none !important;

  }

  .bex-reels-action-pill {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

    padding: 0 !important;

    justify-content: center !important;

    border-radius: 50% !important;

  }

  .bex-reels-header-left .bex-reels-icon-btn,

  .bex-reels-header-more-btn {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

  }

  .bex-reels-coin-pill {

    padding: 2px 7px !important;

    height: 30px !important;

    font-size: 11px !important;

  }

  .bex-reels-coin-pill span {

    max-width: 44px !important;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .bex-reels-tab-btn {

    font-size: 12px !important;

    padding: 3px 8px !important;

    line-height: 1.2 !important;

  }

  .bex-reels-nav-tabs {

    gap: 4px !important;

    padding: 3px 8px !important;

  }

}



@media (max-width: 380px) {

  .bex-reels-global-header {

    padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;

    padding-left: 6px !important;

    padding-right: 6px !important;

    gap: 4px !important;

    overflow: visible !important;

  }

  .bex-reels-tab-btn {

    font-size: 11px !important;

    padding: 2.5px 6px !important;

  }

  .bex-reels-action-pill,

  .bex-reels-header-left .bex-reels-icon-btn,

  .bex-reels-header-more-btn {

    width: 30px !important;

    height: 30px !important;

    min-width: 30px !important;

    min-height: 30px !important;

  }

  .bex-reels-coin-pill {

    padding: 2px 5px !important;

    font-size: 10.5px !important;

    height: 28px !important;

  }

  .bex-reels-coin-pill span {

    max-width: 36px !important;

  }

}



/* Instagram Tarzı Kayan Ses Durumu Hapı (Volume Toast) */

.bex-reels-volume-toast {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.85);

  padding: 10px 18px;

  border-radius: 999px;

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

  backdrop-filter: blur(16px);

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

  border: 1px solid rgba(255, 255, 255, 0.18);

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

  font-size: 13.5px;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 8px;

  pointer-events: none;

  z-index: 100070;

  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65);

  opacity: 0;

  transition: opacity 0.18s ease, transform 0.18s ease;

}

.bex-reels-volume-toast.is-visible {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

}



/* Dikey Kaydırma Listesi */

.bex-reels-feed {

  position: relative;

  width: 100%;

  height: 100%;

  max-width: var(--bex-reel-width);

  overflow-y: scroll;

  scroll-snap-type: y mandatory;

  scroll-behavior: smooth;

  scrollbar-width: none; /* Firefox */

  -ms-overflow-style: none; /* IE */

  background: var(--wa-bg, #0b141a);

}

.bex-reels-feed::-webkit-scrollbar {

  display: none;

}



@media (min-width: 768px) {

  .bex-reels-feed {

    height: 100% !important;

    max-height: 100% !important;

    border-radius: inherit !important;

    box-shadow: none !important;

    margin: 0 !important;

  }

}



/* Tek Bir Reel Kartı — Instagram & TikTok Standardı */

.bex-reel-card {

  position: relative;

  width: 100%;

  height: 100%;

  min-height: 100%;

  max-height: 100%;

  scroll-snap-align: start;

  scroll-snap-stop: always;

  overflow: hidden !important;

  background: var(--wa-bg, #0b141a);

  display: flex;

  align-items: center;

  justify-content: center;

  contain: layout paint;

  box-sizing: border-box;

}



/* Video Oynatıcı — Tam Ekran, Kırpma/Taşma Yapmayan Instagram Standardı */

.bex-reel-video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100% !important;

  height: 100% !important;

  max-width: 100% !important;

  max-height: 100% !important;

  object-fit: cover;

  object-position: center center;

  display: block;

  background: transparent;

  z-index: 1;

}



/* Instagram Mantığı: Yatay / Geniş Formatlı Videoları Kırpmadan Orijinal Oranında Ortala */

.bex-reel-card.has-landscape {

  background: radial-gradient(circle at center, #182229 0%, var(--wa-bg, #0b141a) 100%) !important;

}

html:not(.dark) .bex-reel-card.has-landscape {

  background: radial-gradient(circle at center, var(--color-bg-light) 0%, var(--wa-bg, var(--wa-search)) 100%) !important;

}

.bex-reel-video.is-landscape {

  object-fit: contain !important;

  background: transparent !important;

  border-radius: 12px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

}

html:not(.dark) .bex-reel-video.is-landscape {

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

}



/* Gradyan Gölgeler */

.bex-reel-overlay-top {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 90px;

  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, transparent 100%);

  pointer-events: none;

  z-index: 10;

}

.bex-reel-overlay-bottom {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 280px;

  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 50%, transparent 100%);

  pointer-events: none;

  z-index: 10;

}



/* Üst Başlık & Canlı Rozeti */

.bex-reel-top-bar {

  position: absolute;

  top: max(14px, env(safe-area-inset-top, 14px));

  left: 16px;

  right: 16px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 20;

}

.bex-reel-logo {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-weight: 800;

  font-size: 17px;

  letter-spacing: -0.02em;

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

  text-shadow: 0 2px 8px rgba(0,0,0,0.6);

}

.bex-reel-logo img {

  width: 26px;

  height: 26px;

  border-radius: 8px;

}

.bex-reel-tag {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 4px 10px;

  border-radius: 999px;

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

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  font-size: 11px;

  font-weight: 700;

  color: var(--wa-green-soft);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



/* Sağ Eylem Sütunu (TikTok Tarzı) */

.bex-reel-actions {

  position: absolute;

  right: 14px;

  bottom: 24px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  z-index: 25;

}



@media (max-width: 767px) {

  .bex-reel-actions {

    right: 10px !important;

    bottom: 16px !important;

    gap: 10px !important;

  }

}



.bex-reel-action-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  background: transparent;

  border: none;

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

  cursor: pointer;

  padding: 0;

  outline: none;

  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  touch-action: manipulation;

}

.bex-reel-action-btn:hover {

  transform: scale(1.1);

}

.bex-reel-action-btn:active {

  transform: scale(0.92);

}



.bex-reel-icon-circle {

  width: 44px;

  height: 44px;

  border-radius: 50%;

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

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.14);

  display: flex;

  align-items: center;

  justify-content: center;

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

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

  transition: all 0.2s ease;

}

@media (max-width: 640px) {

  .bex-reel-icon-circle {

    width: 40px !important;

    height: 40px !important;

  }

  .bex-reel-icon-circle svg {

    width: 20px !important;

    height: 20px !important;

  }

  .bex-reel-count {

    font-size: 11px !important;

    line-height: 1 !important;

  }

  .bex-reel-disc {

    width: 38px !important;

    height: 38px !important;

  }

}

.bex-reel-action-btn.is-liked .bex-reel-icon-circle {

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

  border-color: rgba(239, 68, 68, 0.7) !important;

  color: #ef4444 !important;

}

.bex-reel-action-btn.is-liked svg {

  fill: #ef4444 !important;

  stroke: #ef4444 !important;

  animation: bexHeartPop 0.35s ease;

}

.bex-reel-action-btn.is-liked .bex-reel-count {

  color: #ef4444 !important;

  font-weight: 800 !important;

}

.bex-reel-action-btn.bex-reel-gift-btn .bex-reel-icon-circle {
  background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.2)) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: #fbbf24 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.bex-reel-action-btn.bex-reel-gift-btn:hover .bex-reel-icon-circle {
  background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.55), rgba(217, 119, 6, 0.35)) !important;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

.bex-reel-action-btn.bex-reel-gift-btn .bex-reel-count {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}




.bex-reel-count {

  font-size: 11.5px;

  font-weight: 700;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);

  color: #f1f5f9;

}



/* Dönen Müzik Plağı (Vinyl Disc) */

.bex-reel-disc {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: conic-gradient(#111 0deg, #333 90deg, #111 180deg, #333 270deg, #111 360deg);

  border: 3px solid #222;

  box-shadow: 0 4px 15px rgba(0,0,0,0.6);

  display: flex;

  align-items: center;

  justify-content: center;

  animation: bexDiscSpin 4s linear infinite;

}

.bex-reel-disc.is-paused {

  animation-play-state: paused;

}

/* Animated Equalizer Wave next to the vinyl disc */
.bex-reel-music-disc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bex-reel-equalizer-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  padding: 1px 3px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.bex-reel-equalizer-wave .bex-eq-bar {
  display: inline-block;
  width: 2.5px;
  background: #00a884;
  border-radius: 2px;
  animation: bexReelEq 0.75s ease-in-out infinite alternate;
}

.bex-reel-equalizer-wave .bex-eq-bar:nth-child(1) { height: 5px; animation-delay: 0.1s; }
.bex-reel-equalizer-wave .bex-eq-bar:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.bex-reel-equalizer-wave .bex-eq-bar:nth-child(3) { height: 8px; animation-delay: 0.2s; }

@keyframes bexReelEq {
  0% { height: 3px; }
  50% { height: 13px; }
  100% { height: 6px; }
}

.bex-reel-card.is-paused .bex-reel-equalizer-wave .bex-eq-bar,
.bex-reel-disc.is-paused + .bex-reel-equalizer-wave .bex-eq-bar {
  animation-play-state: paused !important;
}

.bex-reel-disc-thumb {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  object-fit: cover;

  border: 1px solid rgba(255, 255, 255, 0.4);

}

@keyframes bexDiscSpin {

  100% { transform: rotate(360deg); }

}



/* Sol Alt Bilgi Paneli */

.bex-reel-info {

  position: absolute;

  left: 16px;

  right: 76px;

  bottom: 24px;

  z-index: 25;

  display: flex;

  flex-direction: column;

  gap: 8px;

  text-align: left;

}



@media (max-width: 767px) {

  .bex-reel-info {

    left: 12px !important;

    right: 66px !important;

    bottom: 16px !important;

    gap: 6px !important;

  }

  .bex-reel-avatar-wrap {

    width: 36px !important;

    height: 36px !important;

    min-width: 36px !important;

  }

  .bex-reel-author-name {

    font-size: 13.5px !important;

  }

  .bex-reel-caption {

    font-size: 12.5px !important;

    line-height: 1.35 !important;

  }

}



/* Yazar Profil Satırı */

.bex-reel-author-row {

  display: flex;

  align-items: center;

  gap: 10px;

}

.bex-reel-avatar-wrap {

  width: 40px;

  height: 40px;

  min-width: 40px;

  border-radius: 50%;

  position: relative;

  cursor: pointer;

}

.bex-reel-avatar-wrap img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  border: 1.5px solid var(--wa-green-soft);

}

.bex-reel-author-meta {

  display: flex;

  flex-direction: column;

  min-width: 0;

}

.bex-reel-author-name {

  font-size: 14px;

  font-weight: 800;

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

  display: inline-flex;

  align-items: center;

  gap: 4px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);

  cursor: pointer;

}

.bex-reel-author-user {

  font-size: 11.5px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.75);

  font-family: monospace;

}



.bex-reel-follow-btn {

  display: inline-flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  align-items: center !important;

  justify-content: center !important;

  white-space: nowrap !important;

  word-break: keep-all !important;

  flex-shrink: 0 !important;

  width: auto !important;

  min-width: max-content !important;

  padding: 4px 12px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 700;

  border: 1px solid rgba(255, 255, 255, 0.4);

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

  backdrop-filter: blur(8px);

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

  cursor: pointer;

  transition: all 0.15s ease;

  touch-action: manipulation;

  margin-left: 4px;

}

.bex-reel-follow-btn:hover {

  background: var(--wa-green-soft);

  border-color: var(--wa-green-soft);

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

}

.bex-reel-follow-btn.is-following {

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

  border-color: rgba(255, 255, 255, 0.2);

  color: rgba(255, 255, 255, 0.7);

}



/* Açıklama & Çeviri */

.bex-reel-caption {

  font-size: 13px;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.95);

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  word-break: break-word;

}

.bex-reel-caption.is-expanded {

  -webkit-line-clamp: unset;

}

.bex-reel-caption a {

  color: #6ee7b7;

  font-weight: 700;

  text-decoration: none;

}

.bex-reel-translate-btn {

  background: transparent;

  border: none;

  padding: 0;

  font-size: 11px;

  font-weight: 700;

  color: #38bdf8;

  cursor: pointer;

  margin-top: 2px;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  text-shadow: 0 1px 2px rgba(0,0,0,0.8);

}

.bex-reel-translate-btn:hover {

  text-decoration: underline;

}

.bex-reel-translated-text {

  font-size: 12.5px;

  font-style: italic;

  color: #a5f3fc;

  margin-top: 4px;

  padding: 4px 8px;

  border-radius: 8px;

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

  backdrop-filter: blur(6px);

  border-left: 2.5px solid #38bdf8;

}



/* Müzik Şeridi (Audio Marquee) */

.bex-reel-audio {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 11.5px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.85);

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

  max-width: 100%;

  overflow: hidden;

  white-space: nowrap;

}

.bex-reel-audio svg {

  flex-shrink: 0;

}



/* İlerleme ve Süre Kontrolleri (Modern Scrubber / Instagram & TikTok Standardı — Sade, İnce ve Çakışmasız) */

.bex-reel-scrubber-container {

  position: absolute;

  bottom: 2px;

  left: 0;

  right: 0;

  width: 100%;

  height: 12px;

  display: flex;

  align-items: flex-end;

  padding: 0 !important;

  z-index: 35;

  pointer-events: auto;

  user-select: none;

  -webkit-user-select: none;

  box-sizing: border-box;

}



@media (min-width: 768px) {

  .bex-reel-scrubber-container {

    bottom: 2px;

    padding: 0 !important;

  }

}



.bex-reel-time-current,

.bex-reel-time-remaining {

  display: none !important; /* TikTok ve Instagram standardı: ekranda yer kaplayan kaba sayaç yazıları varsayılan olarak gizlidir */

}



/* Sürükleme (Drag) anında kullanıcıya önizleme balonu göster */

.bex-reel-progress-wrap.is-dragging .bex-reel-time-current {

  display: block !important;

  position: absolute;

  bottom: 18px;

  left: 50%;

  transform: translateX(-50%);

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

  backdrop-filter: blur(8px);

  padding: 3px 8px;

  border-radius: 6px;

  font-size: 11px;

  font-family: monospace;

  color: #fff;

  pointer-events: none;

  white-space: nowrap;

  z-index: 50;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.bex-reel-progress-wrap {

  flex: 1;

  width: 100%;

  position: relative;

  height: 12px;

  display: flex;

  align-items: flex-end;

  cursor: pointer;

  touch-action: none;

}



.bex-reel-progress-track {

  width: 100%;

  height: 2.5px;

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

  border-radius: 0;

  position: relative;

  transition: height 0.15s ease, background-color 0.15s ease;

}



.bex-reel-progress-bar {

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, var(--wa-green-soft), #34d399);

  border-radius: 9999px;

  position: relative;

  pointer-events: none;

  transition: width 0.08s linear;

}



.bex-reel-progress-handle {

  width: 12px;

  height: 12px;

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

  border-radius: 50%;

  position: absolute;

  top: 50%;

  left: 0%;

  transform: translate(-50%, -50%);

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

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.15s ease, transform 0.15s ease;

}



.bex-reel-scrubber-container:hover .bex-reel-progress-track,

.bex-reel-progress-wrap.is-dragging .bex-reel-progress-track {

  height: 5px;

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

}



.bex-reel-scrubber-container:hover .bex-reel-progress-handle,

.bex-reel-progress-wrap.is-dragging .bex-reel-progress-handle {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1.15);

}



.bex-reel-progress-wrap.is-dragging .bex-reel-progress-bar {

  transition: none !important;

}



.bex-reel-count.is-hidden-count {

  display: none !important;

}



/* Çift Dokunma Kalp Patlama Animasyonu */

.bex-floating-heart {

  position: absolute;

  width: 80px;

  height: 80px;

  margin-left: -40px;

  margin-top: -40px;

  pointer-events: none;

  z-index: 100;

  animation: bexHeartBurst 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}

.bex-floating-heart svg {

  width: 100%;

  height: 100%;

  fill: #ef4444;

  filter: drop-shadow(0 4px 16px rgba(239, 68, 68, 0.8));

}

@keyframes bexHeartBurst {

  0% { transform: scale(0) rotate(-15deg); opacity: 0; }

  35% { transform: scale(1.35) rotate(0deg); opacity: 1; }

  65% { transform: scale(1.1) rotate(8deg); opacity: 0.9; }

  100% { transform: scale(1.6) translateY(-40px); opacity: 0; }

}

@keyframes bexHeartPop {

  0% { transform: scale(1); }

  50% { transform: scale(1.35); }

  100% { transform: scale(1); }

}



/* Duraklatıldı İkonu */

.bex-reel-pause-indicator {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.6);

  width: 64px;

  height: 64px;

  border-radius: 50%;

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

  backdrop-filter: blur(10px);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  opacity: 0;

  pointer-events: none;

  z-index: 15;

  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.bex-reel-pause-indicator.is-visible {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

}



/* Yorumlar Çekmecesi (Slide-Up Drawer) */

.bex-reels-sheet-backdrop[hidden],

.bex-reels-sheet-backdrop.hidden,

.bex-reels-modal-backdrop[hidden],

.bex-reels-modal-backdrop.hidden {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



.bex-reels-sheet-backdrop {

  position: fixed;

  inset: 0;

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

  backdrop-filter: blur(4px);

  z-index: 99990;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.25s ease;

}

.bex-reels-sheet-backdrop.is-open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

.bex-reels-sheet-panel {

  width: 100%;

  max-width: 480px;

  max-height: 70vh;

  height: 65vh;

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

  color: var(--wa-text, var(--wa-line));

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

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

  border-bottom: none;

  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);

  display: flex;

  flex-direction: column;

  transform: translateY(100%);

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  overflow: hidden;

}

.bex-reels-sheet-backdrop.is-open .bex-reels-sheet-panel {

  transform: translateY(0);

}



/* Masaüstü Yorum Paneli (Sağ Kenara Kenetlenmiş & Video Gizlenmez) */

@media (min-width: 1024px) {

  #bex-reels-comments-backdrop {

    background: transparent !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    justify-content: flex-end !important;

    align-items: stretch !important;

    pointer-events: none !important;

  }

  #bex-reels-comments-backdrop.is-open {

    pointer-events: auto !important;

  }

  #bex-reels-comments-backdrop .bex-reels-sheet-panel {

    width: 380px !important;

    max-width: 380px !important;

    height: 100% !important;

    max-height: 100vh !important;

    border-radius: 0 !important;

    border-top: none !important;

    border-left: 1px solid var(--wa-line, rgba(255, 255, 255, 0.12)) !important;

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

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

    transform: translateX(100%) !important;

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  }

  #bex-reels-comments-backdrop.is-open .bex-reels-sheet-panel {

    transform: translateX(0) !important;

  }

  body.has-desktop-comments-open #reels-main-section {

    padding-right: 380px !important;

    transition: padding-right 0.3s ease;

  }

  body.has-desktop-comments-open .bex-reels-desktop-controls {

    left: calc(50% + 244px - 190px) !important;

  }

}

@media (max-width: 767px) {

  .bex-reels-sheet-panel {

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

  }

}

.bex-reels-sheet-head {

  padding: 14px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.bex-reels-sheet-title {

  font-size: 15px;

  font-weight: 800;

  color: #fff;

  display: flex;

  align-items: center;

  gap: 8px;

}

.bex-reels-sheet-close {

  width: 32px;

  height: 32px;

  border-radius: 50%;

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

  border: none;

  color: var(--wa-muted);

  font-size: 20px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}

.bex-reels-comments-list {

  flex: 1;

  overflow-y: auto;

  padding: 14px 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.bex-reel-comment-item {

  display: flex;

  gap: 12px;

}

.bex-reel-comment-avatar {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

}

.bex-reel-comment-body {

  flex: 1;

  min-width: 0;

}

.bex-reel-comment-author {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wa-text, #E9EDEF);

  display: inline-flex;

  align-items: center;

  gap: 4px;

}

.bex-reel-comment-text {

  font-size: 13px;

  color: #d1d5db;

  line-height: 1.35;

  margin-top: 2px;

  word-break: break-word;

}

.bex-reel-comment-date {

  font-size: 10.5px;

  color: var(--wa-muted);

  margin-top: 3px;

}



.bex-reels-comment-form {

  padding: 10px 14px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  gap: 10px;

  background: #0b141a;

}

.bex-reels-comment-input {

  flex: 1;

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

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 999px;

  padding: 9px 16px;

  color: #fff;

  font-size: 13px;

  outline: none;

}

.bex-reels-comment-input:focus {

  border-color: var(--wa-green-soft);

}

.bex-reels-comment-send {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: var(--wa-green-deep);

  border: none;

  color: #fff;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: background 0.15s;

}

.bex-reels-comment-send:hover {

  background: var(--wa-green-soft);

}



/* Paylaşım Modalı / Sohbet Listesi */

.bex-reels-share-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));

  gap: 14px;

  padding: 16px;

  max-height: 40vh;

  overflow-y: auto;

}

.bex-reels-share-chat-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  background: transparent;

  border: none;

  cursor: pointer;

  color: #fff;

  text-align: center;

  padding: 4px;

  border-radius: 12px;

  transition: background 0.15s;

}

.bex-reels-share-chat-item:hover {

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

}

.bex-reels-share-chat-item img {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  object-fit: cover;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

}

.bex-reels-share-chat-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-text, #E9EDEF);

  width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* ── Reels Sayfası Alt Menü — Diğer Sayfalar ile Tam Uyumlu WhatsApp Görünümü ── */

body.page-reels #app-tabs,

body.page-reels .page-navigation {

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

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

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

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

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

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

  z-index: 1000 !important;

}



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

html.dark body.page-reels .page-navigation {

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

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

  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;

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

}



body.page-reels .page-navigation-link {

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

}



html.dark body.page-reels .page-navigation-link {

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

}



body.page-reels .page-navigation-link:hover {

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

}



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

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

}



body.page-reels .page-navigation-link.is-active,

body.page-reels .page-navigation-link.on {

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

}



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

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

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

}



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

body.page-reels .page-navigation-link.on .page-navigation-icon {

  color: inherit !important;

}



body.page-reels .page-navigation-create {

  background: linear-gradient(135deg, var(--wa-green-deep) 0%, var(--color-primary) 100%) !important;

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

}



html.dark body.page-reels .page-navigation-create {

  background: linear-gradient(135deg, var(--wa-green-soft) 0%, var(--wa-green-deep) 100%) !important;

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

}



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

   REELS COMPOSER MODAL (VİDEO YÜKLEME VE PAYLAŞIM EKRANI)

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

.bex-reels-modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 100050;

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

  backdrop-filter: blur(16px);

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

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 16px;

  animation: bexFadeIn 0.2s ease-out;

}

.bex-reels-composer-surface {

  position: relative;

  width: 100%;

  max-width: 480px;

  max-height: min(92vh, 720px);

  background: #182229;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);

  display: flex;

  flex-direction: column;

  overflow: hidden;

  animation: bexScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes bexScaleUp {

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

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

}

.bex-reels-modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 18px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

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

}

.bex-reels-modal-close {

  width: 32px;

  height: 32px;

  border-radius: 50%;

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

  border: none;

  color: #94a3b8;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.15s ease;

}

.bex-reels-modal-close:hover {

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

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

}

.bex-reels-composer-body {

  padding: 16px 18px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.bex-reels-upload-zone {

  border: 2px dashed rgba(255, 255, 255, 0.18);

  border-radius: 16px;

  padding: 20px 14px;

  text-align: center;

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

  transition: border-color 0.2s ease, background-color 0.2s ease;

  cursor: pointer;

}

.bex-reels-upload-zone.is-dragover {

  border-color: #10b981;

  background: rgba(16, 185, 129, 0.08);

}

.bex-reels-drop-prompt {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.bex-reels-drop-icon {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(16, 185, 129, 0.12);

  display: flex;

  align-items: center;

  justify-content: center;

}

.bex-reels-select-btn {

  margin-top: 12px;

  padding: 7px 16px;

  border-radius: 999px;

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

  border: 1px solid rgba(255, 255, 255, 0.15);

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

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.15s ease;

}

.bex-reels-select-btn:hover {

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

}

.bex-reels-preview-box {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}

.bex-reels-preview-player {

  max-height: 240px;

  max-width: 160px;

  border-radius: 12px;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);

  background: #000;

  object-fit: cover;

}

.bex-reels-preview-controls {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 6px 10px;

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

  border-radius: 10px;

}

.bex-reels-video-filename {

  font-size: 11.5px;

  color: #94a3b8;

  max-width: 70%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.bex-reels-change-btn {

  font-size: 11.5px;

  font-weight: 700;

  color: #10b981;

  background: transparent;

  border: none;

  cursor: pointer;

}

.bex-reels-input-group {

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.bex-reels-input-label {

  font-size: 12px;

  font-weight: 600;

  color: #cbd5e1;

}

.bex-reels-textarea {

  width: 100%;

  padding: 10px 12px;

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

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

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

  font-size: 13px;

  outline: none;

  resize: none;

  box-sizing: border-box;

  font-family: inherit;

  transition: border-color 0.15s ease;

}

.bex-reels-textarea:focus {

  border-color: #10b981;

}

.bex-reels-input {

  width: 100%;

  padding: 8px 12px;

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

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

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

  font-size: 13px;

  outline: none;

  box-sizing: border-box;

  font-family: inherit;

  transition: border-color 0.15s ease;

}

.bex-reels-input:focus {

  border-color: #10b981;

}

.bex-reels-input-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 4px;

}

.bex-reels-quick-tags {

  display: flex;

  gap: 5px;

}

.bex-reels-tag-pill {

  padding: 3px 8px;

  border-radius: 999px;

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

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #38bdf8;

  font-size: 10.5px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.12s ease;

}

.bex-reels-tag-pill:hover {

  background: rgba(56, 189, 248, 0.15);

  border-color: rgba(56, 189, 248, 0.35);

}

.bex-reels-progress-panel {

  padding: 10px 12px;

  border-radius: 12px;

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

  border: 1px solid rgba(255, 255, 255, 0.08);

}

.bex-reels-alert {

  padding: 9px 12px;

  border-radius: 10px;

  font-size: 12px;

  font-weight: 600;

}

.bex-reels-alert-error {

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

  border: 1px solid rgba(239, 68, 68, 0.35);

  color: #f87171;

}

.bex-reels-alert-success {

  background: rgba(16, 185, 129, 0.15);

  border: 1px solid rgba(16, 185, 129, 0.35);

  color: #34d399;

}

.bex-reels-modal-footer {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  padding: 12px 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

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

}

.bex-reels-cancel-btn {

  padding: 8px 16px;

  border-radius: 12px;

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: #cbd5e1;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.15s ease;

}

.bex-reels-cancel-btn:hover {

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

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

}

.bex-reels-submit-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 20px;

  border-radius: 12px;

  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);

  border: none;

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

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.bex-reels-submit-btn:hover {

  transform: translateY(-1px);

  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45);

}

.bex-reels-submit-btn:disabled {

  opacity: 0.6;

  pointer-events: none;

  cursor: not-allowed;

}



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

   REELS MÜZİK & TREND ŞARKILAR SEÇİCİ (MUSIC PICKER MODAL)

   Ülkelere Göre Trendler & Tarzlar

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

.bex-reels-pick-music-btn {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  width: 100%;

  padding: 10px 14px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(14, 165, 233, 0.12) 100%);

  border: 1px dashed rgba(52, 211, 153, 0.45);

  color: #34d399;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.15s ease;

  box-sizing: border-box;

}

.bex-reels-pick-music-btn:hover {

  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(14, 165, 233, 0.22) 100%);

  border-color: #34d399;

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

}



.bex-reels-selected-track-badge {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 12px;

  border-radius: 12px;

  background: rgba(16, 185, 129, 0.15);

  border: 1px solid rgba(16, 185, 129, 0.35);

  margin-top: 6px;

}

.bex-reels-selected-track-info {

  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

}

.bex-reels-selected-track-thumb {

  width: 28px;

  height: 28px;

  border-radius: 8px;

  background: #0f172a;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #34d399;

  font-size: 14px;

  flex-shrink: 0;

}

.bex-reels-selected-track-text {

  min-width: 0;

}

.bex-reels-selected-track-title {

  font-size: 12.5px;

  font-weight: 700;

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.bex-reels-selected-track-artist {

  font-size: 11px;

  color: #94a3b8;

}

.bex-reels-selected-track-remove {

  background: transparent;

  border: none;

  color: #ef4444;

  cursor: pointer;

  padding: 4px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.bex-reels-selected-track-remove:hover {

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

}



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

   MÜZİK VE TREND ŞARKILAR SEÇİM MODALI (BOTTOM SHEET & DIALOG)

   TikTok, Instagram Reels & Spotify Tarzı Tasarım Mimarisi

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



#bex-reels-music-backdrop {

  position: fixed;

  inset: 0;

  z-index: 100060;

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

  backdrop-filter: blur(12px);

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

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 12px;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.22s ease;

}

#bex-reels-music-backdrop.is-open {

  opacity: 1 !important;

  pointer-events: auto !important;

}



.bex-reels-music-surface {

  position: relative;

  width: 100%;

  max-width: 430px;

  max-height: 72dvh;

  border-radius: 18px;

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

  border: 1px solid var(--wa-line, rgba(255, 255, 255, 0.12));

  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75);

  backdrop-filter: blur(20px);

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

  display: flex;

  flex-direction: column;

  overflow: hidden;

  animation: bexScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Mobil Çekmece Tutamacı */

.bex-reels-sheet-handle {

  width: 32px;

  height: 3.5px;

  border-radius: 999px;

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

  margin: 6px auto 2px;

  flex-shrink: 0;

}

@media (min-width: 641px) {

  .bex-reels-sheet-handle {

    display: none;

  }

}



/* Modal Başlığı */

.bex-reels-music-surface .bex-reels-modal-header {

  padding: 8px 14px 6px;

  display: flex;

  align-items: center;

  justify-content: space-between;

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

  flex-shrink: 0;

}

.bex-reels-music-head-left {

  display: flex;

  align-items: center;

  gap: 8px;

}

.bex-reels-music-head-icon {

  width: 26px;

  height: 26px;

  border-radius: 8px;

  background: linear-gradient(135deg, var(--wa-green-deep) 0%, #0d9488 100%);

  display: flex;

  align-items: center;

  justify-content: center;

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

  box-shadow: 0 2px 8px rgba(0, 168, 132, 0.35);

  flex-shrink: 0;

}

.bex-reels-music-head-icon svg {

  width: 14px;

  height: 14px;

}

.bex-reels-music-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wa-text, #E9EDEF);

  line-height: 1.2;

  margin: 0;

}

.bex-reels-music-subtitle {

  font-size: 10.5px;

  color: var(--wa-muted);

  margin: 1px 0 0;

}



/* Arama Çubuğu */

.bex-reels-music-search-wrap {

  padding: 6px 14px 4px;

  flex-shrink: 0;

}

.bex-reels-music-search-box {

  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--wa-line);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 10px;

  padding: 0 10px;

  height: 34px;

  transition: all 0.15s ease;

}

.bex-reels-music-search-box:focus-within {

  border-color: var(--wa-green-deep);

  box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.22);

  background: #222e35;

}

.bex-reels-music-search-icon {

  color: var(--wa-muted);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.bex-reels-music-search-icon svg {

  width: 14px;

  height: 14px;

}

.bex-reels-music-search-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--wa-text, #E9EDEF);

  font-size: 12px;

  min-width: 0;

}

.bex-reels-music-search-input::placeholder {

  color: var(--wa-muted);

}

.bex-reels-music-clear-btn {

  background: transparent;

  border: none;

  color: var(--wa-muted);

  cursor: pointer;

  padding: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  transition: color 0.15s ease;

}

.bex-reels-music-clear-btn:hover {

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

}



/* Ülke Seçim Kaydırma Çubuğu */

.bex-reels-country-scroll {

  display: flex;

  gap: 4px;

  padding: 3px 14px 3px;

  overflow-x: auto;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

  flex-shrink: 0;

}

.bex-reels-country-scroll::-webkit-scrollbar { display: none; }

.bex-reels-country-tab {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 3px 9px;

  border-radius: 999px;

  background: var(--wa-line);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: #aebac1;

  font-size: 11px;

  font-weight: 600;

  height: 24px;

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.15s ease;

  user-select: none;

  flex-shrink: 0;

}

.bex-reels-country-tab:hover {

  background: var(--wa-line);

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

}

.bex-reels-country-tab.is-active {

  background: linear-gradient(135deg, var(--wa-green-deep) 0%, #0d9488 100%);

  border-color: transparent;

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

  box-shadow: 0 1px 6px rgba(0, 168, 132, 0.35);

}



/* Tarzlar / Türler Filtresi */

.bex-reels-genre-scroll {

  display: flex;

  gap: 4px;

  padding: 2px 14px 5px;

  overflow-x: auto;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

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

  flex-shrink: 0;

}

.bex-reels-genre-scroll::-webkit-scrollbar { display: none; }

.bex-reels-genre-pill {

  padding: 2px 8px;

  border-radius: 999px;

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

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: var(--wa-muted);

  font-size: 10.5px;

  font-weight: 600;

  height: 22px;

  display: inline-flex;

  align-items: center;

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.12s ease;

  user-select: none;

  flex-shrink: 0;

}

.bex-reels-genre-pill:hover {

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

  color: #f1f5f9;

}

.bex-reels-genre-pill.is-active {

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

  border-color: rgba(0, 168, 132, 0.45);

  color: var(--wa-green-soft);

  font-weight: 700;

}



/* Şarkı Listesi & Kartları */

.bex-reels-tracks-list {

  flex: 1 1 auto;

  overflow-y: auto;

  padding: 5px 14px 8px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  min-height: 180px;

  max-height: 44dvh;

}

.bex-reels-tracks-loading {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 24px 14px;

  color: var(--wa-muted);

  font-size: 12px;

  font-weight: 500;

}

.bex-reels-track-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 5px 9px;

  border-radius: 10px;

  background: #182229;

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: all 0.15s ease;

}

.bex-reels-track-card:hover {

  background: var(--wa-line);

  border-color: rgba(255, 255, 255, 0.12);

}

.bex-reels-track-card.is-selected {

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

  border-color: rgba(0, 168, 132, 0.4);

}



.bex-reels-track-left {

  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

  flex: 1 1 auto;

}

.bex-reels-track-cover-wrap {

  position: relative;

  width: 38px;

  height: 38px;

  border-radius: 8px;

  background: linear-gradient(135deg, var(--wa-green-deep) 0%, #0d9488 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  overflow: hidden;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}

.bex-reels-track-cover-icon {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

}

.bex-reels-track-play-btn {

  position: absolute;

  inset: 0;

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

  border: none;

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

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.15s ease;

}

.bex-reels-track-play-btn svg {

  width: 14px;

  height: 14px;

}

.bex-reels-track-card:hover .bex-reels-track-play-btn {

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

}



/* Canlı Equalizer Ses Çubukları Animasyonu */

.bex-reels-equalizer {

  display: flex;

  align-items: flex-end;

  gap: 2px;

  height: 13px;

}

.bex-reels-equalizer span {

  width: 2.5px;

  height: 100%;

  background: var(--wa-green-soft);

  border-radius: 1.5px;

  animation: bexWaveBar 0.8s ease-in-out infinite alternate;

}

.bex-reels-equalizer span:nth-child(1) { animation-delay: 0.1s; height: 30%; }

.bex-reels-equalizer span:nth-child(2) { animation-delay: 0.3s; height: 75%; }

.bex-reels-equalizer span:nth-child(3) { animation-delay: 0.2s; height: 100%; }

.bex-reels-equalizer span:nth-child(4) { animation-delay: 0.4s; height: 50%; }



@keyframes bexWaveBar {

  0% { height: 20%; }

  100% { height: 100%; }

}



.bex-reels-track-meta {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 1px;

  flex: 1 1 auto;

}

.bex-reels-track-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-text, #E9EDEF);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  line-height: 1.25;

}

.bex-reels-track-subline {

  display: flex;

  align-items: center;

  gap: 4px;

  font-size: 10.5px;

  color: var(--wa-muted);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.bex-reels-track-artist {

  color: #cbd5e1;

  font-weight: 500;

}

.bex-reels-track-dot {

  color: #64748b;

  font-size: 9px;

}

.bex-reels-track-count {

  color: var(--wa-green-deep);

  font-weight: 600;

  font-size: 10px;

}

.bex-reels-track-badge {

  padding: 1px 5px;

  border-radius: 3px;

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

  font-size: 9px;

  font-weight: 600;

  color: #aebac1;

  white-space: nowrap;

}



.bex-reels-track-right {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

  margin-left: 8px;

}

.bex-reels-track-use-btn {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  padding: 4px 10px;

  border-radius: 999px;

  background: linear-gradient(135deg, var(--wa-green-deep) 0%, #0d9488 100%);

  border: none;

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

  font-size: 11px;

  font-weight: 600;

  height: 25px;

  cursor: pointer;

  box-shadow: 0 1px 6px rgba(0, 168, 132, 0.3);

  transition: all 0.15s ease;

  white-space: nowrap;

}

.bex-reels-track-use-btn:hover {

  transform: scale(1.04);

  box-shadow: 0 3px 10px rgba(0, 168, 132, 0.45);

}



/* Mobil Alt Çekmece (Bottom Sheet) Uyarlaması */

@media (max-width: 640px) {

  #bex-reels-music-backdrop {

    align-items: flex-end !important;

    padding: 0 !important;

  }

  .bex-reels-music-surface {

    width: 100% !important;

    max-width: 100% !important;

    max-height: 65dvh !important;

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

    border-left: none !important;

    border-right: none !important;

    border-bottom: none !important;

    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8) !important;

    transform: translateY(100%);

    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;

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

  }

  #bex-reels-music-backdrop.is-open .bex-reels-music-surface {

    transform: translateY(0) !important;

  }

  .bex-reels-tracks-list {

    max-height: 40dvh !important;

  }

}





/* Reels Başlığı 3 Nokta Alt Menü (Submenu) Uyumluluğu */

.bex-reels-global-header .bex-page-menu summary {

    width: 36px;

    height: 36px;

    border-radius: 50%;

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

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

    border: 1px solid rgba(255, 255, 255, 0.12);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.18s ease;

}

.bex-reels-global-header .bex-page-menu summary:hover,

.bex-reels-global-header .bex-page-menu[open] summary {

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

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

}

/* 3 Nokta Menüsü (.bex-page-menu) Koyu Tema ve Kusursuz Tipografi */

.bex-reels-global-header .bex-page-menu-list,

body.page-reels .bex-page-menu-list {

    top: calc(100% + 8px) !important;

    right: 0 !important;

    background: #182229 !important;

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

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

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 4px 16px rgba(0, 0, 0, 0.5) !important;

    border-radius: 16px !important;

    padding: 8px !important;

    min-width: 220px !important;

    z-index: 100060 !important;

}



.bex-reels-global-header .bex-page-menu-list a,

body.page-reels .bex-page-menu-list a {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 10px 14px !important;

    border-radius: 10px !important;

    font-size: 14px !important;

    font-weight: 600 !important;

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

    text-decoration: none !important;

    transition: all 0.15s ease !important;

}



.bex-reels-global-header .bex-page-menu-list a .bex-page-menu-ico,

body.page-reels .bex-page-menu-list a .bex-page-menu-ico {

    color: var(--wa-muted) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

    width: 20px !important;

    height: 20px !important;

    transition: color 0.15s ease !important;

}



.bex-reels-global-header .bex-page-menu-list a .bex-page-menu-txt,

body.page-reels .bex-page-menu-list a .bex-page-menu-txt {

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

    font-size: 14px !important;

    font-weight: 600 !important;

}



.bex-reels-global-header .bex-page-menu-list a:hover,

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

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

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

}



.bex-reels-global-header .bex-page-menu-list a:hover .bex-page-menu-ico,

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

    color: var(--wa-green-soft) !important;

}



.bex-reels-global-header .bex-page-menu-list a:hover .bex-page-menu-txt,

body.page-reels .bex-page-menu-list a:hover .bex-page-menu-txt {

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

}



/* Jeton Cüzdanı Öğesi Özel Vurgusu */

.bex-reels-global-header .bex-page-menu-list a[href*="cuzdan.php"],

body.page-reels .bex-page-menu-list a[href*="cuzdan.php"] {

    background: rgba(245, 158, 11, 0.14) !important;

    border: 1px solid rgba(245, 158, 11, 0.28) !important;

    margin-top: 4px !important;

}

.bex-reels-global-header .bex-page-menu-list a[href*="cuzdan.php"] .bex-page-menu-txt,

body.page-reels .bex-page-menu-list a[href*="cuzdan.php"] .bex-page-menu-txt,

.bex-reels-global-header .bex-page-menu-list a[href*="cuzdan.php"] .bex-page-menu-ico,

body.page-reels .bex-page-menu-list a[href*="cuzdan.php"] .bex-page-menu-ico {

    color: #fbbf24 !important;

}

.bex-reels-global-header .bex-page-menu-list a[href*="cuzdan.php"]:hover,

body.page-reels .bex-page-menu-list a[href*="cuzdan.php"]:hover {

    background: rgba(245, 158, 11, 0.25) !important;

}



/* Çıkış Yap Butonu */

.bex-reels-global-header .bex-page-menu-list a.bex-page-menu-logout,

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

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    margin-top: 6px !important;

    padding-top: 10px !important;

}

.bex-reels-global-header .bex-page-menu-list a.bex-page-menu-logout .bex-page-menu-txt,

body.page-reels .bex-page-menu-list a.bex-page-menu-logout .bex-page-menu-txt,

.bex-reels-global-header .bex-page-menu-list a.bex-page-menu-logout .bex-page-menu-ico,

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

    color: #ef4444 !important;

}

.bex-reels-global-header .bex-page-menu-list a.bex-page-menu-logout:hover,

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

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

}



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

   ALT GEZİNME BARI & KONTROLLER — REELS İLE TAM ENTEGRASYON

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



/* Reels Sayfasında Alt Gezinme Barı (Tema Uyumlu Cam Efekti) */

/* Reels bottom navigation synced with WhatsApp design system in page-navigation.css */



/* Basılı Tutma Modu (Hold to Pause & Clean Screen — Instagram & TikTok) */

.bex-reel-card.is-holding .bex-reel-actions,

.bex-reel-card.is-holding .bex-reel-info,

.bex-reel-card.is-holding .bex-reel-overlay-top,

.bex-reel-card.is-holding .bex-reel-overlay-bottom,

.bex-reel-card.is-holding .bex-reel-progress-wrap,

.bex-reel-card.is-holding .bex-reel-scrubber-container,

body.has-reel-holding .bex-reels-global-header,

body.has-reel-holding .bex-reels-desktop-controls,

body.has-reel-holding #app-tabs,

body.has-reel-holding .page-navigation {

  opacity: 0 !important;

  pointer-events: none !important;

  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



/* Oynat Dalgası (Play Pulse Animation) */

.bex-reel-play-pulse {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.7);

  width: 68px;

  height: 68px;

  border-radius: 50%;

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

  backdrop-filter: blur(12px);

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  pointer-events: none;

  z-index: 25;

  animation: bexPlayPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

@keyframes bexPlayPulse {

  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; }

  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }

  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }

}



/* Masaüstü Gezinme Butonları (Desktop Controls) */

.bex-reels-desktop-controls {

  position: absolute;

  left: calc(50% + (var(--bex-reel-width, 440px) / 2) + 24px);

  right: auto;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 14px;

  z-index: 60;

  pointer-events: auto;

}

@media (max-width: 767px) {

  .bex-reels-desktop-controls {

    display: none !important;

  }

}

@media (min-width: 768px) and (max-width: 900px) {

  .bex-reels-desktop-controls {

    left: auto;

    right: 12px;

  }

}

.bex-reels-nav-btn {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(30, 30, 30, 0.85);

  backdrop-filter: blur(12px);

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

  border: 1px solid rgba(255, 255, 255, 0.15);

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

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.bex-reels-nav-btn:hover {

  background: rgba(45, 45, 45, 0.95);

  border-color: rgba(255, 255, 255, 0.3);

  transform: scale(1.08);

}

.bex-reels-nav-btn:active {

  transform: scale(0.95);

}



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

   REELS ETKİLEŞİM, KAYDETME VE BAĞLAM MENÜSÜ EKLENTİLERİ

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



/* Kaydet / Bookmark Butonu Aktif Durumu */

.bex-reel-action-btn.is-saved svg {

  fill: #f59e0b !important;

  stroke: #f59e0b !important;

}

.bex-reel-action-btn.is-saved .bex-reel-icon-circle {

  background: rgba(245, 158, 11, 0.22) !important;

  border-color: rgba(245, 158, 11, 0.45) !important;

}



/* Çift Tıklama Koordinatlı Kalp Patlama Efekti (Instagram / TikTok) */

.bex-reel-burst-heart {

  position: absolute;

  pointer-events: none;

  z-index: 100;

  transform: translate(-50%, -50%) scale(0);

  filter: drop-shadow(0 4px 16px rgba(239, 68, 68, 0.6));

  animation: bexHeartBurstAnim 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}

@keyframes bexHeartBurstAnim {

  0% { transform: translate(-50%, -50%) scale(0) rotate(-18deg); opacity: 0; }

  30% { transform: translate(-50%, -50%) scale(1.35) rotate(0deg); opacity: 1; }

  50% { transform: translate(-50%, -50%) scale(1.05) rotate(6deg); opacity: 1; }

  75% { transform: translate(-50%, -50%) scale(1) translateY(-12px); opacity: 0.95; }

  100% { transform: translate(-50%, -50%) scale(1.4) translateY(-36px); opacity: 0; }

}



/* Takip Ettiklerim Boş Durum Kartı (Empty Feed Card) */

.bex-reel-card.bex-reel-empty-card {

  background: radial-gradient(circle at center, #111e24 0%, #06090c 100%) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  padding: 24px;

}

.bex-reels-empty-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  max-width: 320px;

  gap: 14px;

}

.bex-reels-empty-icon-ring {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: rgba(16, 185, 129, 0.12);

  border: 1px solid rgba(52, 211, 153, 0.3);

  color: #34d399;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 30px rgba(16, 185, 129, 0.25);

  animation: bexEmptyPulse 2.5s infinite ease-in-out;

}

@keyframes bexEmptyPulse {

  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }

  50% { transform: scale(1.06); box-shadow: 0 0 35px rgba(16, 185, 129, 0.4); }

}

.bex-reels-empty-title {

  font-size: 19px;

  font-weight: 800;

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

  margin: 0;

  letter-spacing: -0.02em;

}

.bex-reels-empty-desc {

  font-size: 13px;

  color: #94a3b8;

  line-height: 1.5;

  margin: 0;

}

.bex-reels-empty-action-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 22px;

  border-radius: 999px;

  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);

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

  font-size: 13px;

  font-weight: 700;

  border: none;

  cursor: pointer;

  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.4);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  margin-top: 6px;

}

.bex-reels-empty-action-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.55);

}

.bex-reels-swipe-hint {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  color: #64748b;

  font-size: 11px;

  font-weight: 600;

  margin-top: 18px;

  user-select: none;

}

.bex-reels-bounce-arrow {

  color: #34d399;

  animation: bexBounceArrow 1.5s infinite ease-in-out;

}

@keyframes bexBounceArrow {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(6px); }

}



/* Header 3 Nokta Butonu */

.bex-reels-header-more-btn {

  width: 36px;

  height: 36px;

  border-radius: 50%;

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

  backdrop-filter: blur(12px);

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

  border: 1px solid rgba(255, 255, 255, 0.12);

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

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.15s ease;

}

.bex-reels-header-more-btn:hover {

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

  transform: scale(1.05);

}



/* Reels 3 Nokta Bağlam Menüsü (Bottom Sheet) */

.bex-reels-more-sheet {

  position: relative;

  width: 100%;

  max-width: 460px;

  background: #141c22;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 24px 24px 0 0;

  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);

  display: flex;

  flex-direction: column;

  max-height: 85dvh;

  overflow: hidden;

  animation: bexSheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);

}

@media (min-width: 768px) {

  .bex-reels-more-sheet {

    border-radius: 24px;

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

  }

}

@keyframes bexSheetSlideUp {

  from { transform: translateY(100%); }

  to { transform: translateY(0); }

}

.bex-reels-sheet-handle-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 10px 0 4px;

}

.bex-reels-sheet-handle {

  width: 36px;

  height: 4px;

  border-radius: 999px;

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

}

.bex-reels-more-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 18px 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.bex-reels-more-header-left {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}

.bex-reels-more-body {

  overflow-y: auto;

  padding: 10px 14px 24px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.bex-reels-more-group {

  display: flex;

  flex-direction: column;

  gap: 2px;

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

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 16px;

  overflow: hidden;

  padding: 4px;

}

.bex-reels-more-item {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  border-radius: 12px;

  background: transparent;

  border: none;

  color: #e2e8f0;

  text-align: left;

  cursor: pointer;

  transition: all 0.15s ease;

}

.bex-reels-more-item:hover {

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

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

}

.bex-reels-more-icon {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.bex-reels-more-text {

  display: flex;

  flex-direction: column;

  min-width: 0;

  flex: 1 1 auto;

}

.bex-reels-more-label {

  font-size: 13.5px;

  font-weight: 600;

  line-height: 1.2;

}

.bex-reels-more-desc {

  font-size: 11px;

  color: #94a3b8;

  margin-top: 2px;

  line-height: 1.2;

}

.bex-reels-more-item.is-danger:hover {

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

}

.bex-reels-more-item.bex-reels-more-nav-link {

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



/* Reels İstatistik Modalı */

.bex-reels-stats-surface {

  position: relative;

  width: 100%;

  max-width: 440px;

  background: #141c22;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 24px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);

  overflow: hidden;

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

}

.bex-stats-tile {

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

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 16px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.bex-stats-tile-icon {

  width: 32px;

  height: 32px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 4px;

}

.bex-stats-tile-num {

  font-size: 18px;

  font-weight: 800;

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

  font-family: monospace;

}

.bex-stats-tile-lbl {

  font-size: 11.5px;

  font-weight: 600;

  color: #94a3b8;

}





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

   Masaüstü Sol Kenar Çubuğu (Reels Desktop Sidebar)

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

.bex-reel-side-btn {

  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);

  user-select: none;

}

.bex-reel-side-btn:hover {

  background: var(--wa-hover, rgba(0, 0, 0, 0.04)) !important;

}

html.dark .bex-reel-side-btn:hover {

  background: var(--wa-hover, rgba(255, 255, 255, 0.05)) !important;

}

.bex-reel-side-btn.is-active {

  background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 12%, var(--wa-surface, var(--color-bg-light))) !important;

  border-color: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 45%, transparent) !important;

  box-shadow: 0 2px 8px rgba(0, 168, 132, 0.08);

}

html.dark .bex-reel-side-btn.is-active {

  background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 18%, var(--wa-surface, #1f2c34)) !important;

  border-color: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 55%, transparent) !important;

  box-shadow: 0 2px 12px rgba(0, 168, 132, 0.15);

}

.bex-reel-tag {

  transition: all 0.15s ease;

  user-select: none;

}

.bex-reel-tag:hover {

  border-color: var(--wa-green-deep, var(--wa-green-deep)) !important;

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

}

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

   Masaüstü Sağ Etkileşim ve Canlı Yorum Paneli (TikTok & Instagram Standardı)

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

#bex-reels-desktop-side-panel {

  display: none;

  flex-direction: column;

  width: 380px;

  min-width: 320px;

  max-width: 400px;

  height: 100%;

  max-height: 820px;

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

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

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

  overflow: hidden;

  flex-shrink: 0;

  z-index: 20;

}



@media (min-width: 1440px) {

  #bex-reels-desktop-side-panel {

    display: flex !important;

  }

  /* Masaüstü: Yan panel varken mükerrer butonları ve bilgileri video üzerinden gizle */

  body.page-reels .bex-reel-info {

    display: none !important;

  }

  body.page-reels .bex-reel-actions > *:not([data-reel-action="mute"]) {

    display: none !important;

  }

  body.page-reels .bex-reel-actions {

    top: 20px !important;

    right: 20px !important;

    bottom: auto !important;

    gap: 0 !important;

  }

}



.bex-reels-dsp-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 16px;

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

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

  flex-shrink: 0;

}



.bex-reels-dsp-author {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  flex: 1;

}



.bex-reels-dsp-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

  border: 1.5px solid var(--wa-line, rgba(255, 255, 255, 0.15));

}



.bex-reels-dsp-author-meta {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.bex-reels-dsp-name-row {

  display: flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

}



.bex-reels-dsp-name {

  font-size: 14px;

  font-weight: 700;

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

  text-decoration: none;

}



.bex-reels-dsp-name:hover {

  text-decoration: underline;

}



.bex-reels-dsp-handle {

  font-size: 12px;

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

}



.bex-reels-dsp-follow-btn {

  padding: 6px 14px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 700;

  border: 1px solid var(--wa-primary, var(--wa-green-deep));

  background: transparent;

  color: var(--wa-primary, var(--wa-green-deep));

  cursor: pointer;

  transition: all 0.15s ease;

  flex-shrink: 0;

}



.bex-reels-dsp-follow-btn:hover {

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

}



.bex-reels-dsp-follow-btn.is-following {

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

  border-color: rgba(255, 255, 255, 0.15);

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

}



.bex-reels-dsp-body {

  padding: 12px 16px;

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

  flex-shrink: 0;

}



.bex-reels-dsp-caption {

  font-size: 13px;

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

  line-height: 1.45;

  margin: 0 0 8px 0;

  word-break: break-word;

  max-height: 80px;

  overflow-y: auto;

}



.bex-reels-dsp-caption a {

  color: var(--wa-green-deep);

  text-decoration: none;

  font-weight: 600;

}



.bex-reels-dsp-caption a:hover {

  text-decoration: underline;

}



.bex-reels-dsp-audio {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 11.5px;

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

  padding: 4px 8px;

  border-radius: 6px;

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

}



.bex-reels-dsp-stats {

  display: flex;

  align-items: center;

  justify-content: space-around;

  padding: 10px 16px;

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

  flex-shrink: 0;

}



.bex-reels-dsp-stat-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: transparent;

  border: none;

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

  font-size: 12.5px;

  font-weight: 600;

  cursor: pointer;

  padding: 6px 10px;

  border-radius: 8px;

  transition: all 0.15s ease;

}



.bex-reels-dsp-stat-btn:hover {

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

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

}



.bex-reels-dsp-stat-btn.is-liked {

  color: #ef4444 !important;

}



.bex-reels-dsp-stat-btn.is-liked svg {

  fill: #ef4444 !important;

  stroke: #ef4444 !important;

}



.bex-reels-dsp-stat-btn.is-saved {

  color: #f59e0b !important;

}




#dsp-btn-gift {
  color: #f59e0b !important;
}
#dsp-btn-gift:hover {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
}

.bex-reels-dsp-stat-btn.is-saved svg {

  fill: #f59e0b !important;

  stroke: #f59e0b !important;

}



.bex-reels-dsp-comments {

  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding: 12px 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.bex-reels-dsp-comment-item {

  display: flex;

  gap: 10px;

  font-size: 13px;

  align-items: flex-start;

}



.bex-reels-dsp-comment-item .bex-dsp-c-avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

}



.bex-reels-dsp-comment-item .bex-dsp-c-content {

  flex: 1;

  min-width: 0;

}



.bex-reels-dsp-comment-item .bex-dsp-c-author {

  font-weight: 700;

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

  margin-right: 6px;

  font-size: 12.5px;

  text-decoration: none;

}



.bex-reels-dsp-comment-item .bex-dsp-c-author:hover {

  text-decoration: underline;

}



.bex-reels-dsp-comment-item .bex-dsp-c-text {

  color: var(--wa-text, var(--wa-line));

  line-height: 1.4;

  word-break: break-word;

  font-size: 12.5px;

}



.bex-reels-dsp-comment-item .bex-dsp-c-meta {

  font-size: 11px;

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

  margin-top: 3px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.bex-reels-dsp-comment-form {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 14px;

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

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

  flex-shrink: 0;

}



.bex-reels-dsp-input {

  flex: 1;

  min-width: 0;

  height: 38px;

  border-radius: 999px;

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

  border: 1px solid var(--wa-line, rgba(255, 255, 255, 0.12));

  padding: 0 14px;

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

  font-size: 13px;

  outline: none;

  transition: border-color 0.15s ease;

}



.bex-reels-dsp-input:focus {

  border-color: var(--wa-primary, var(--wa-green-deep));

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

}



.bex-reels-dsp-send-btn {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: var(--wa-primary, var(--wa-green-deep));

  border: none;

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

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex-shrink: 0;

  transition: transform 0.15s ease, background 0.15s ease;

}



.bex-reels-dsp-send-btn:hover {

  background: #008f70;

  transform: scale(1.05);

}



/* Navigation occupies its own space; controls stay flush above bottom nav. */

@media (max-width: 767px) {

  body.page-reels .bex-reel-scrubber-container {

    bottom: 2px !important;

    height: 10px !important;

    z-index: 35 !important;

    padding: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

  }

  body.page-reels .bex-reel-actions {

    right: 10px !important;

    bottom: 16px !important;

    gap: 10px !important;

  }

  body.page-reels .bex-reel-info {

    left: 12px !important;

    right: 66px !important;

    bottom: 16px !important;

  }

  body.page-reels .bex-reel-caption {

    margin-bottom: 4px !important;

    font-size: 13.5px !important;

  }

  body.page-reels .bex-reel-audio {

    margin-bottom: 0 !important;

  }

}

@media (min-width: 768px) and (max-width: 1099px) {

  body.page-reels .bex-reel-actions,

  body.page-reels .bex-reel-info {

    bottom: 24px !important;

  }

  body.page-reels .bex-reel-scrubber-container {

    bottom: 0 !important;

    height: 12px !important;

    padding: 0 !important;

  }

}

body.page-reels.bex-device-mobile .bex-reels-header-left,

body.page-reels.bex-device-mobile .bex-reels-header-right {

  display: flex !important;

}



@media (max-width: 380px) {

  body.page-reels .bex-reels-coin-pill { display: none !important; }

}

@media (max-height: 500px) and (min-width: 600px) {

  body.page-reels .bex-reel-actions {

    display: grid;

    grid-template-columns: repeat(4, 44px);

    align-items: end;

    gap: 6px !important;

  }

  body.page-reels .bex-reel-info { right: 230px !important; }

  body.page-reels .bex-reel-caption { -webkit-line-clamp: 1; }

}



/* Masaüstü Header Reels Akış Sekmeleri */

.bex-reels-desktop-header .bex-reels-tab-btn.is-active {

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

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

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

}

html.dark .bex-reels-desktop-header .bex-reels-tab-btn.is-active {

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

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

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;

}

/* ==========================================================================
   BEXGRAM REELS & UYE CANONICAL BOTTOM NAVIGATION SYNCHRONIZATION
   Light and dark theme styles 100% matched with WhatsApp design system
   ========================================================================== */
body.page-reels #app-tabs,
body.page-reels .page-navigation {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--bex-nav-height, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
  height: var(--bex-nav-height, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
  max-height: var(--bex-nav-height, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
  padding-top: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-left: max(2px, env(safe-area-inset-left, 2px)) !important;
  padding-right: max(2px, env(safe-area-inset-right, 2px)) !important;
  background: var(--wa-surface, rgba(255, 255, 255, 0.98)) !important;
  color: var(--wa-text-secondary, #54656F) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

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

body.page-reels .page-navigation-link {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: var(--wa-text-secondary, #54656F) !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  touch-action: manipulation !important;
}

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

body.page-reels .page-navigation-link:hover {
  color: var(--wa-text, #111b21) !important;
}

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

body.page-reels .page-navigation-link:active {
  transform: scale(0.94) !important;
}

body.page-reels .page-navigation-link.is-active,
body.page-reels .page-navigation-link.on {
  color: var(--wa-primary, var(--wa-green-deep)) !important;
}

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

body.page-reels .page-navigation-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 22px !important;
  color: inherit !important;
  background: transparent !important;
}

body.page-reels .page-navigation-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

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

body.page-reels .page-navigation-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

body.page-reels .page-navigation-link.is-active .page-navigation-label,
body.page-reels .page-navigation-link.on .page-navigation-label {
  font-weight: 700 !important;
  color: inherit !important;
}

body.page-reels .page-navigation-link[data-page-tab="profile"] .wa-profile-tab-avatar {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
}

body.page-reels .page-navigation-link[data-page-tab="profile"] .wa-profile-tab-avatar img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  transition: box-shadow 0.15s ease !important;
}

body.page-reels .page-navigation-link.is-active[data-page-tab="profile"] .wa-profile-tab-avatar img,
body.page-reels .page-navigation-link.on[data-page-tab="profile"] .wa-profile-tab-avatar img {
  box-shadow: 0 0 0 2px var(--wa-primary, var(--wa-green-deep)) !important;
}

html.dark body.page-reels .page-navigation-link.is-active[data-page-tab="profile"] .wa-profile-tab-avatar img,
html.dark body.page-reels .page-navigation-link.on[data-page-tab="profile"] .wa-profile-tab-avatar img {
  box-shadow: 0 0 0 2px var(--wa-green-deep, var(--wa-green-soft)) !important;
}

@media (min-width: 768px) {
  body.page-reels #app-tabs,
  body.page-reels .page-navigation {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}