/* tayfcet · film controls (oynatici.js; SPEC-visual-system 8.14 "Media frame / video player"; Tayfun 2026-10-30).
   A floating bar like the nav's: surface at 92 %, 1 px border, radius-pill. The play button is the logo's counter triangle
   (SPEC 2.8: the `play` icon in a 64 px mint-white circle on the picture; 40 px round in the bar, like .mo-pp). The timeline is
   the motion page's (.mo-scrub): 3 px track, brand gradient fill, round thumb; time in mono; sound and full screen from
   the icon set. Colours are fixed brand values (mint-white #F3F8F7, tayf blue 700 #1D6F8C, ink border #D9E5EB, logo gradient, focus #2B8FB3), not
   the page's tokens: the Gece theme remaps --color-white and --color-mint-white, and a work's own colours must never repaint the
   brand's control. The bar is the same light floating pill on every case page and theme, like "Sesli izle". */
:where(.bp) { position: relative; display: block; line-height: 0; border-radius: var(--r-lg, 24px); }
:where(.bp) > video { display: block; border-radius: inherit; }

/* the big start button, before a film has started and when it has ended */
.bp-big { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 248, 247, .96); color: #1D6F8C; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); cursor: pointer; transition: transform .3s var(--emph, cubic-bezier(.2, 0, 0, 1)), opacity .3s var(--emph, cubic-bezier(.2, 0, 0, 1)); }
.bp-big:hover { transform: scale(1.04); }
.bp-big .ti { width: 28px; height: 28px; }
.bp-big .ti + .ti, .bp.ended .bp-big .ti:first-child { display: none; }
.bp.ended .bp-big .ti + .ti { display: block; }
.bp.started .bp-big { opacity: 0; pointer-events: none; }

/* the bar */
.bp-bar { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px 10px; padding: 6px 8px 6px 6px; border: 1px solid #D9E5EB; border-radius: 999px; background: rgba(243, 248, 247, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -18px rgba(0, 68, 90, .5); color: #1D6F8C; line-height: 1; transition: opacity .3s var(--emph, cubic-bezier(.2, 0, 0, 1)), transform .3s var(--emph, cubic-bezier(.2, 0, 0, 1)), visibility .3s; }
.bp:not(.started) .bp-bar { opacity: 0; visibility: hidden; pointer-events: none; }
.bp.idle.playing:not(:focus-within) .bp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.bp.idle.playing { cursor: none; }
.bp-bar button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #1D6F8C; cursor: pointer; transition: background-color .2s var(--emph, cubic-bezier(.2, 0, 0, 1)), border-color .2s var(--emph, cubic-bezier(.2, 0, 0, 1)); }
.bp-bar button:hover { background: rgba(29, 111, 140, .1); }
.bp-bar .bp-pp { border: 1px solid #D9E5EB; background: #FFFFFF; }
.bp-bar .bp-pp:hover { background: #FFFFFF; border-color: #1D6F8C; }
.bp-bar .ti { width: 16px; height: 16px; }
.bp-pp .ti + .ti, .bp.playing .bp-pp .ti:first-child, .bp-mute .ti + .ti, .bp.muted .bp-mute .ti:first-child { display: none; }
.bp.playing .bp-pp .ti + .ti, .bp.muted .bp-mute .ti + .ti { display: block; }
.bp-bar button:focus-visible, .bp-big:focus-visible { outline: 2px solid #2B8FB3; outline-offset: 2px; }

/* the timeline */
.bp-scrub { position: relative; height: 32px; min-width: 60px; cursor: pointer; touch-action: none; outline: none; --sp: 0; }
.bp-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(76, 114, 131, .28); overflow: hidden; }
.bp-fill { display: block; height: 100%; background: linear-gradient(90deg, #D7E55F 0%, #89D8B4 35%, #65B8DA 70%, #798DCB 100%); transform: scaleX(var(--sp)); transform-origin: left; }
.bp-thumb { position: absolute; top: 50%; left: calc(var(--sp) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px #1D6F8C, 0 4px 10px rgba(0, 68, 90, .18); transition: transform .2s var(--emph, cubic-bezier(.2, 0, 0, 1)); }
.bp-scrub:hover .bp-thumb, .bp.drag .bp-thumb { transform: scale(1.25); }
.bp-scrub:focus-visible .bp-thumb { box-shadow: 0 0 0 2px #1D6F8C, 0 0 0 5px #2B8FB3; }
.bp-time { margin: 0; font: 500 12px/1 var(--font-mono, 'JetBrains Mono', monospace); font-variant-numeric: tabular-nums; color: #1D6F8C; white-space: nowrap; }
.bp-time b { font-weight: 500; }
.bp-time span::before { content: ' / '; }

/* full screen: the frame fills the screen, the picture keeps its ratio, the bar floats at the foot */
.bp:fullscreen { display: grid; place-items: center; border-radius: 0; background: #000; }
.bp:fullscreen > video { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; border-radius: 0; }
.bp:fullscreen .bp-bar { left: max(16px, 4vw); right: max(16px, 4vw); bottom: max(16px, 3vh); }
.bp:-webkit-full-screen { display: grid; place-items: center; border-radius: 0; background: #000; }
.bp:-webkit-full-screen > video { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; border-radius: 0; }
.bp:-webkit-full-screen .bp-bar { left: max(16px, 4vw); right: max(16px, 4vw); bottom: max(16px, 3vh); }

@media (max-width: 560px) {
  .bp-bar { left: 8px; right: 8px; bottom: 8px; gap: 4px 8px; }
  .bp-time span, .bp-bar .bp-mute { display: none; }   /* a phone has its own volume keys */
}
@media (pointer: coarse) { .bp-bar button { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .bp-bar, .bp-big, .bp-thumb, .bp-bar button { transition: none; } }