/**
 * Video oynatma listesi popup'i (ana sayfa hero butonu).
 *
 * Yapi Bricks template'inde (Video Oynatma Listesi TR/EN), icerik kt_video
 * CPT'sinde; bu dosya yalniz gorunumdur. Sol sahne + sag kayan liste.
 * Kapsam .brx-popup: kurallar yalniz popup icinde gecerlidir.
 */

.brx-popup .video-playlist {
  /* Liste paneli sahnenin yuksekligini ASMAZ: iki kolon da ayni olcuden
     beslenir. Sahne yuksekligi popup genisliginden turer (popup genisligi
     sablonda min(94vw, 1180px)); dar ekranda 78vh tavani devreye girer. */
  --vpl-yan-kolon: 348px;
  --vpl-yukseklik: min(calc((min(94vw, 1180px) - var(--vpl-yan-kolon)) * 9 / 16), 78vh);

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--vpl-yan-kolon);
  align-items: stretch;
  overflow: hidden;
  border-radius: 12px;
  background: var(--brand-ink, #050d20);
}

/* Sahne: video kenardan kenara, siyah zemin. */
.brx-popup .video-playlist__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: #000;
}

/* Bricks sarmalayici (:where(.brxe-video)) 16/9 kutu + ICINDEKI video mutlak
   konumlu (tuzak 6). Sarmalayicinin yuksekligi orandan gelir; aspect-ratio'yu
   auto'ya cekmek sarmalayiciyi SIFIR yukseklige dusurur ve video sahnenin
   disina tasar (kapat dugmesi de yanlis yere oturur, mobilde olculdu).
   Dogru kopru: orani KORU, Bricks'in padding-top yedegini sifirla. */
.brx-popup .video-playlist__stage .brxe-video,
.brx-popup .video-playlist__stage .video-playlist__video {
  width: auto;
  max-width: 100%;
  height: var(--vpl-yukseklik);
  aspect-ratio: 16 / 9;
  padding-top: 0;
  background: #000;
}

.brx-popup .video-playlist__stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

/* Bricks poster'li videoyu cover ile kirpar; oynatma listesinde kapak
   kadraji korunsun diye contain'e cekilir. */
.brx-popup .video-playlist__stage video[poster]:not([data-is-loaded]) {
  object-fit: contain;
}

/* Kapat dugmesi video ustunde; site.css'teki .modal-close dili korunur,
   yalniz zemin video uzerinde okunur olsun diye yari saydama alinir. */
.brx-popup .video-playlist__stage .modal-close {
  background: rgba(255, 255, 255, 0.3);
  color: var(--brand-white, #ffffff);
}

/* Liste paneli. */
.brx-popup .video-playlist__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--vpl-yukseklik);
  background: #0a1330;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.brx-popup .video-playlist__head {
  flex: 0 0 auto;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brx-popup .video-playlist__title {
  margin: 0;
  color: var(--brand-white, #ffffff);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Liste kaydirma alani: cubuk DAIMA gorunur (macOS'un ustten binen
   kaybolan cubugu yerine sabit genislikte oluk), liste sahneden uzunsa
   burada kayar. */
.brx-popup .video-playlist__items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* scrollbar-gutter olmadan macOS/Chrome cubugu USTTEN BINEN (overlay) tipte
     kalir ve yalniz kaydirirken belirir; oluk ayrilinca klasik, daima gorunen
     cubuk gelir (::-webkit-scrollbar genisligi tek basina bunu yapmiyor,
     olculdu). */
  scrollbar-gutter: stable;
}

/* DIKKAT: elemente scrollbar-width/scrollbar-color YAZILIRSA Chrome
   ::-webkit-scrollbar kurallarini yok sayar ve macOS'ta cubuk ustten binen
   (0 genislikte, kaydirirken beliren) hale doner. Cubugun daima gorunmesi
   icin webkit oluğu tek basina birakildi; Firefox'a standart ozellikler
   ayri blokta verilir. */
.brx-popup .video-playlist__items::-webkit-scrollbar {
  width: 10px;
}

@supports not selector(::-webkit-scrollbar) {
  .brx-popup .video-playlist__items {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.34) rgba(255, 255, 255, 0.07);
  }
}

.brx-popup .video-playlist__items::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.brx-popup .video-playlist__items::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  background-clip: padding-box;
}

.brx-popup .video-playlist__items::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  background-clip: padding-box;
}

/* Liste ogesi: 16/9 kucuk resim + metin. */
.brx-popup .video-playlist__item {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  padding: 14px 12px 14px 18px; /* sag: 12 + 10px kaydirma olugu = baslikla hizali */
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.brx-popup .video-playlist__item:hover,
.brx-popup .video-playlist__item:focus-visible {
  background: rgba(1, 137, 212, 0.16);
}

.brx-popup .video-playlist__item.is-active {
  background: rgba(1, 137, 212, 0.26);
  box-shadow: inset 3px 0 0 var(--brand-blue, #0189d4);
}

.brx-popup .video-playlist__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #000;
}

.brx-popup .video-playlist__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brx-popup .video-playlist__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.brx-popup .video-playlist__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}

.brx-popup .video-playlist__name {
  color: var(--brand-white, #ffffff);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.brx-popup .video-playlist__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

/* Tablet ve alti: sahne ustte, liste altta dikey kayar. Yan kolon yok,
   sahne tam genislige oturur; masaustunun yukseklik esitlemesi kalkar. */
@media (max-width: 991px) {
  .brx-popup .video-playlist {
    grid-template-columns: minmax(0, 1fr);
  }

  .brx-popup .video-playlist__stage .brxe-video,
  .brx-popup .video-playlist__stage .video-playlist__video {
    width: 100%;
    height: auto;
    max-height: 42vh;
  }

  .brx-popup .video-playlist__list {
    height: auto;
    max-height: 40vh;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brx-popup .video-playlist__head {
    padding: 14px 18px 12px;
  }

  .brx-popup .video-playlist__title {
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  .brx-popup .video-playlist__item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
  }

  .brx-popup .video-playlist__desc {
    -webkit-line-clamp: 2;
  }
}