/* Loovia özel video oynatıcısı — video.html (ve ileride kullanılacak her
   sayfa) tarafından paylaşılır. Aynı ID'lere sahip markup ile birlikte
   player.js'in kurduğu kontrolleri stilllendirir. */

.player-wrap { width: 100%; background: #000; border-radius: 6px; overflow: hidden; position: relative; aspect-ratio: 16 / 9; max-height: 85vh; }
.player-wrap video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: none; }
.player-wrap video::-webkit-media-controls { display: none !important; }
/* Android Chrome'da videoya uzun basınca çıkan "indir" menüsü, native
   <video> üstünde dokunma algılandığında tetikleniyor — sıradan bir
   contextmenu engellemesiyle durmuyor. Çözüm: dokunuşları videonun
   KENDİSİ değil, üstündeki şeffaf bir katman (tap-shield) alsın —
   video pointer-events:none olduğu için dokunuş hiç ona ulaşmıyor. */
.tap-shield { position: absolute; inset: 0; z-index: 1; background: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

@media (max-width: 640px) {
  .player-wrap { border-radius: 0; aspect-ratio: 16 / 10; }
}

.ctrl-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 14px 10px; display: flex; align-items: center; gap: 12px; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); opacity: 1; transition: opacity .2s; }
.player-wrap.idle .ctrl-bar { opacity: 0; pointer-events: none; }
.ctrl-bar button { background: transparent; border: 0; padding: 0; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.ctrl-bar svg { width: 20px; height: 20px; fill: #fff; }
.seek-wrap { flex: 1; display: flex; align-items: center; }
.seek { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); cursor: pointer; }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.time { color: #fff; font-size: 12px; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.vol-wrap { position: relative; display: flex; align-items: center; }
.vol-wrap svg { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }
.vol-pop { position: absolute; bottom: 100%; left: 50%; margin-bottom: 10px; background: rgba(20,20,20,.92); border-radius: 10px; padding: 10px 0 12px; width: 34px; height: 90px; display: flex; justify-content: center; align-items: center; transform-origin: 50% 100%; transform: translateX(-50%) scaleY(.4); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease; }
.vol-wrap.show-pop .vol-pop { transform: translateX(-50%) scaleY(1); opacity: 1; pointer-events: auto; }
.vol-pop .vol { writing-mode: vertical-lr; direction: rtl; -webkit-appearance: slider-vertical; appearance: slider-vertical; width: 4px; height: 68px; border-radius: 4px; background: rgba(255,255,255,.3); cursor: pointer; }
.vol-pop .vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.vol-pop .vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
#vol-btn svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.vol-wrap.show-pop #vol-btn svg { transform: scale(1.15); }
.center-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.25); border: 0; }
.center-play svg { width: 56px; height: 56px; fill: #fff; }
.center-play.hidden { display: none; }
.speed-btn { width: auto !important; padding: 0 6px !important; font-size: 12px; font-weight: 600; }

/* 10 sn geri / ileri düğmeleri: kontrol çubuğuyla birlikte görünür/gizlenir */
.skip-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(0,0,0,.38); padding: 0; display: grid; place-items: center; cursor: pointer; transition: opacity .2s, background .15s; }
.skip-btn svg { width: 38px; height: 38px; }
.skip-btn:active { background: rgba(0,0,0,.6); }
.skip-back { left: 16%; }
.skip-fwd { right: 16%; }
.player-wrap.idle .skip-btn { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .skip-btn { width: 50px; height: 50px; } .skip-btn svg { width: 34px; height: 34px; } .skip-back { left: 11%; } .skip-fwd { right: 11%; } }

/* Ortadaki oynat / durdur: oynat ikonu (video durunca) ve durdur düğmesi (video oynarken) aynı yerde, atlama düğmelerinin arasında */
.center-play svg { width: 64px; height: 64px; padding: 15px; box-sizing: border-box; border-radius: 50%; background: rgba(0,0,0,.38); fill: #fff; }
.center-pause { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 64px; height: 64px; border: 0; border-radius: 50%; background: rgba(0,0,0,.38); padding: 0; display: grid; place-items: center; cursor: pointer; transition: opacity .2s, background .15s; }
.center-pause svg { width: 34px; height: 34px; fill: #fff; }
.center-pause:active { background: rgba(0,0,0,.6); }
.center-pause.hidden { display: none; }
.player-wrap.idle .center-pause { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .center-play svg, .center-pause { width: 58px; height: 58px; } .center-play svg { padding: 13px; } .center-pause svg { width: 30px; height: 30px; } }

/* Sol üstte küçük, şeffaf logo (beyaz siluet); tıklamayı engellemez */
.player-logo { position: absolute; top: 12px; left: 14px; z-index: 1; width: 78px; height: auto; opacity: .5; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
@media (max-width: 640px) { .player-logo { top: 9px; left: 10px; width: 60px; } }