/* Siteye özel video oynatıcı: kontroller, ilerleme, tam ekran.
   YouTube çerçevesi ekrandan uzun tutulur: 16:9 görüntü ortada kırpılmadan tam görünür,
   üstteki başlık ve alttaki logo görünür alanın dışında kalır. */

/* Kırpma kutusu her zaman tam 16:9 görüntü alanıdır; çerçeve onun içinde dikeyde taşar */
.screen .yt-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; --yt-bleed: max(64px, 12%); }
.screen .yt-clip .yt, .screen .yt-clip iframe {
  position: absolute; left: 0; width: 100%; border: 0;
  top: calc(var(--yt-bleed) * -1); height: calc(100% + var(--yt-bleed) * 2);
}

/* Ortadaki büyük oynat düğmesi: yalnızca durduğunda */
/* Sade ve opak: YouTube'un oynat/durdur anında gösterdiği simgeyi (≈52 px) tam örter */
.vc-big {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  display: grid; place-items: center; translate: -50% -50%;
  background: #121212; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18);
  transition: transform .15s var(--ease), opacity .25s, background .15s;
}
.vc-big .icon { width: 22px; height: 22px; }
.vc-big.is-play .icon { margin-left: 3px; }
.vc-big:hover { background: var(--tally); transform: scale(1.06); }
/* Oynatmaya geçince düğme bir an "durdur" simgesiyle kalır, YouTube'un geçiş simgesi bitince söner */
.screen.vc-playing .vc-big { opacity: 0; pointer-events: none; transform: scale(.9); transition-delay: .9s; }

/* Alt çubuk */
.vc-bar {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); /* okunurluk için alt karartma */
  color: #fff; transition: opacity .25s, transform .25s var(--ease);
}
.vc-btn {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: none; color: #fff;
}
.vc-btn:hover { background: rgba(255, 255, 255, .14); }
.vc-btn .icon { width: 20px; height: 20px; }
.vc-time { flex: none; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); min-width: 86px; }
.vc-source { flex: none; font-size: 12px; color: rgba(255, 255, 255, .72); padding: 0 6px; }
.vc-source:hover { color: #fff; text-decoration: underline; }

/* İlerleme çubuğu: tıkla ya da sürükle */
.vc-track { position: relative; flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vc-rail { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; transition: height .15s; }
.vc-fill { position: absolute; inset: 0; background: var(--tally); transform-origin: left; transform: scaleX(0); }
.vc-thumb {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; translate: -50% -50%; scale: 0; transition: scale .15s;
}
.vc-track:hover .vc-rail, .vc-track:focus-visible .vc-rail { height: 6px; }
.vc-track:hover .vc-thumb, .vc-track:focus-visible .vc-thumb { scale: 1; }
.vc-track:focus-visible { outline: none; }
.vc-track:focus-visible .vc-rail { box-shadow: 0 0 0 2px #fff; }
.vc-track.is-disabled { cursor: default; opacity: .6; }

/* Oynarken fare durunca kontroller ve imleç gizlenir */
.screen.vc-idle .vc-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.screen.vc-idle { cursor: none; }
/* Kayıt sırasında kontroller kilitli ve gizli */
.screen.vc-locked .vc-bar, .screen.vc-locked .vc-big { opacity: 0; pointer-events: none; }
/* Altyazı kontrol çubuğunun üstünde kalsın */
/* Altyazı kontrol çubuğunun hemen üstünde */
.screen .subtitle { bottom: max(6%, 48px); }

/* Tam ekran: kendi kapsayıcımız; altyazı ve kontroller içinde kalır */
.screen:fullscreen, .screen.is-pseudo-fs {
  width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000;
}
/* Tam ekranda görüntü ekrana sığdırılır ve ortalanır; kenar boşlukları siyah kalır */
.screen:fullscreen .yt-clip, .screen.is-pseudo-fs .yt-clip,
.screen:fullscreen .poster, .screen.is-pseudo-fs .poster {
  inset: auto; left: 50%; top: 50%; translate: -50% -50%;
  width: min(100vw, 177.78vh); height: auto; aspect-ratio: 16 / 9;
}
.screen.is-pseudo-fs { position: fixed; inset: 0; z-index: 100; }
body.has-pseudo-fs { overflow: hidden; }
.screen:fullscreen .vc-big, .screen.is-pseudo-fs .vc-big { width: 68px; height: 68px; }
.screen:fullscreen .vc-big .icon, .screen.is-pseudo-fs .vc-big .icon { width: 26px; height: 26px; }

@media (max-width: 600px) {
  .vc-bar { gap: 2px; padding: 22px 6px 6px; }
  .vc-time { min-width: 0; font-size: 12px; }
  .vc-source { font-size: 11px; padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-bar, .vc-big, .vc-thumb { transition: none; }
}

/* Hazırlanmış sahne: kendi videomuz, YouTube kırpması gerekmez */
.screen .yt-clip .yt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Ses seviyesi: ses düğmesinin üzerine gelince açılan çubuk */
.vc-vol { flex: none; display: flex; align-items: center; }
.vc-vol-range {
  --v: 100%;
  width: 0; opacity: 0; margin: 0; padding: 0; height: 20px; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: transparent;
  transition: width .2s var(--ease), opacity .2s, margin .2s;
}
.vc-vol:hover .vc-vol-range, .vc-vol:focus-within .vc-vol-range { width: 84px; opacity: 1; margin: 0 6px 0 4px; }
.vc-vol-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right, #fff var(--v), rgba(255, 255, 255, .28) var(--v)); }
.vc-vol-range::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .28); }
.vc-vol-range::-moz-range-progress { height: 4px; border-radius: 99px; background: #fff; }
.vc-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; }
.vc-vol-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.vc-vol-range:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
/* Dokunmatik ekranda üzerine gelme yok: çubuk hep görünür */
@media (hover: none) { .vc-vol-range { width: 64px; opacity: 1; margin: 0 4px; } }
@media (max-width: 480px) and (hover: none) { .vc-vol-range { width: 48px; } }