/* =========================================================
   VİDEO PENCERESİ
   Röportajlar siteden çıkmadan izleniyor. Kart ve oynatma
   düğmeleri bağlantı olarak duruyor (betik çalışmazsa video
   yine açılır); betik varsa bağlantı bu pencereye dönüyor.
   Menü 1002'de; pencere onun da üstünde.
   ========================================================= */
.vlb {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px
}

.vlb[hidden] {
  display: none
}

.vlb-mask {
  position: absolute;
  inset: 0;
  background: rgba(4, 39, 41, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: vlbFade .25s ease
}

/* Genişlik ekran yüksekliğine de bağlı: yalnız yatay ölçüye bakılırsa
   16:9 çerçeve alçak pencerelerde taşıyor ve künye görünmüyor. Üçünün
   en küçüğü kazanıyor — pencere her zaman ekrana sığan en büyük
   oynatıcıyı veriyor, YouTube da çözünürlüğü buna göre seçiyor. */
.vlb-box {
  position: relative;
  width: min(1440px, 100%, (100vh - 150px) * 16 / 9);
  animation: vlbGir .3s cubic-bezier(.2, .8, .3, 1)
}

.vlb-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5)
}

.vlb-frame iframe,
.vlb-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

/* Künye oynatıcının altında: üstüne binerse videonun kendi
   denetimlerini kapatıyor. */
.vlb-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: #fff
}

.vlb-cap b {
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -.008em
}

.vlb-cap span {
  font-size: 14px;
  color: rgba(255, 255, 255, .66)
}

/* Oynatıcı belgede düğmeden sonra geliyor: ikisi de konumlandırılmış
   olduğu için sıra kararı sonrakine kalıyor ve düğme arkada kalıyordu. */
.vlb-close {
  position: absolute;
  z-index: 2;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform .2s, background .2s
}

.vlb-close svg {
  width: 19px;
  height: 19px
}

.vlb-close:hover {
  transform: scale(1.08);
  background: var(--bg-soft)
}

.vlb-close:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px
}

/* Sayfa arkada kaydırılmasın diye gövdeye kilit */
body.vlb-acik {
  overflow: hidden
}

@keyframes vlbFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes vlbGir {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (max-width:640px) {
  .vlb {
    padding: 16px
  }

  .vlb-frame {
    border-radius: 14px
  }

  .vlb-close {
    top: -8px;
    right: -8px;
    width: 38px;
    height: 38px
  }

  .vlb-cap b {
    font-size: 15px
  }
}

@media (prefers-reduced-motion:reduce) {

  .vlb-mask,
  .vlb-box {
    animation: none
  }

  .vlb-close {
    transition: none
  }
}

/* --- şablon sayfaları ---------------------------------------------
   Belge görselleri 16:9 değil; çerçeve oranı sabitlemek yerine
   görselin kendi oranını alıyor, yüksekliği ekranla sınırlanıyor.

   Pencere de görselin genişliğine iniyor: dikey bir A4 sayfası
   video genişliğinde kutuya konunca iki yanda geniş beyaz alan
   kalıyor ve belge küçük görünüyordu. */
.vlb-box:has(.vlb-resim) {
  width: auto;
  max-width: min(1440px, 100%)
}

.vlb-frame.vlb-resim {
  aspect-ratio: auto;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(100vh - 150px)
}

.vlb-frame.vlb-resim img {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain
}

.vlb-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: background .2s, transform .2s
}

.vlb-ok[hidden] {
  display: none
}

.vlb-ok svg {
  width: 21px;
  height: 21px
}

.vlb-geri {
  left: -22px
}

.vlb-ileri {
  right: -22px
}

.vlb-ok:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.07)
}

.vlb-ok:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px
}

/* Sayaç künyenin sağ ucunda: sayfa numarası başlığa karışmasın */
.vlb-sayac {
  margin-left: auto;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .78)
}

@media (max-width:900px) {

  .vlb-geri {
    left: 6px
  }

  .vlb-ileri {
    right: 6px
  }
}