/* =============================================================================
 *  player.css — the Celas video player, over a YouTube iframe.
 *
 *  Ported from fruzai-web/assets/css/player.css. The bar, the scrubber, the
 *  glass centre button and the idle behaviour are that file's; what changed is
 *  what sits underneath.
 *
 *  There, the picture was a <video> element playing our own file. Here it is a
 *  YouTube iframe running with controls=0, driven through their IFrame Player
 *  API by assets/js/player.js — a YouTube video cannot be fed to a <video>
 *  element, but its player CAN be operated from JavaScript, which is what lets
 *  the control bar be ours. YouTube's logo stays on the picture during playback
 *  and no custom bar can take it off.
 *
 *  Before the first click there is no iframe at all: just the poster and the
 *  centre button. See video_facade() in app/helpers.php.
 * ========================================================================== */
.vp { --aw-accent: var(--accent, #f2292f); --aw-rad: 18px; }

/* ============================================================ video player
   Ported from VideoPlayer.dc.html, then dressed in the Artwall's own system:
   --aw-rad corners, the brand accent on the progress, Inter Tight inherited,
   and a control bar that floats inside the frame like the rest of the surface
   rather than a black strip welded to the bottom edge.

   The native controls stay in the markup and are only removed once player.js
   runs — with scripting off the video is still fully playable. */
.vp {
  position: relative; width: 100%; background: #05060a; line-height: 0;
  --vp-pad: 14px;
}
.vp:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 3px; }
.vp__video { width: 100%; max-height: 74vh; display: block; background: #05060a; object-fit: contain; cursor: pointer; }

.vp__spinner { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vp__spinner::after {
  content: ''; width: 42px; height: 42px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.22); border-top-color: #fff; animation: vp-spin .8s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }

/* centre play — the same pill language as the rest of the Artwall */
.vp__center {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; animation: vp-fade .18s ease;
}
@keyframes vp-fade { from { opacity: 0; } to { opacity: 1; } }
.vp__center span {
  width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1.5px solid rgba(255,255,255,.55); color: #fff;
  backdrop-filter: blur(18px) saturate(160%) brightness(.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 40px -18px rgba(0,0,0,.75);
  transition: transform .16s ease, background .16s ease;
}
.vp__center:hover span { transform: scale(1.06); background: rgba(12,14,20,.55); }
/* A play triangle is optically centred on its CENTROID, not on its bounding
   box — a third of the way in from the flat edge. This artwork already does
   that: its three points are (8,4.3) (8,19.7) (19.84,12), whose centroid lands
   on x=11.95 in a 24 box, i.e. dead centre, which leaves the bounding box
   sitting ~2px right of the circle's middle. That IS the nudge. The extra 2px
   that used to be here applied it a second time and pushed the glyph visibly
   off to the right. */
.vp__center svg { display: block; }

/* the bar: a floating panel, inset from the frame */
/* Glass: it has to be thin enough to SEE the video through, which means a low
   alpha carried by a strong blur — a dark panel with a blur behind it is just a
   dark panel. The hairline on top is the lit edge that sells the material; the
   inset shadow underneath keeps the controls legible over a bright frame. */
.vp__bar {
  position: absolute; left: var(--vp-pad); right: var(--vp-pad); bottom: var(--vp-pad); z-index: 4;
  padding: 6px 12px 8px; border-radius: var(--aw-rad); color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 42%, rgba(10,12,18,.08));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(34px) saturate(200%) brightness(.9);
  -webkit-backdrop-filter: blur(34px) saturate(200%) brightness(.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -1px 0 rgba(0,0,0,.22),
              0 18px 44px -26px rgba(0,0,0,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  transition: opacity .24s ease, transform .24s ease;
}
/* No backdrop-filter (older Firefox): fall back to something opaque enough to
   read, rather than white text on whatever the frame happens to be. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vp__bar { background: rgba(12,14,20,.72); }
}
.vp.is-idle .vp__bar { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* scrubber */
.vp__scrub { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vp__track { position: relative; width: 100%; height: 4px; border-radius: 999px; background: rgba(255,255,255,.3); transition: height .12s ease; }
.vp__scrub:hover .vp__track, .vp__scrub.is-drag .vp__track { height: 6px; }
.vp__buf, .vp__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; width: 0; }
.vp__buf  { background: rgba(255,255,255,.3); }
.vp__fill { background: var(--aw-accent); }
.vp__knob {
  position: absolute; left: 0; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transform: translate(-50%, -50%) scale(1); transition: transform .12s ease;
}
.vp.is-idle .vp__knob { transform: translate(-50%, -50%) scale(0); }

/* controls row */
.vp__row { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.vp__ico {
  background: transparent; border: none; cursor: pointer; padding: 0; color: #fff;
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  opacity: .88; transition: opacity .14s ease, background .14s ease;
}
.vp__ico:hover { opacity: 1; background: rgba(255,255,255,.18); }
/* An engaged toggle has to look engaged, not just hovered. */
.vp__ico.is-on { opacity: 1; color: var(--aw-accent); background: rgba(255,255,255,.16); }
.vp__ico:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }
.vp__time {
  flex: none; margin-left: 4px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.92); letter-spacing: .01em; white-space: nowrap;
}
.vp__time-dur { color: rgba(255,255,255,.55); font-weight: 500; }
.vp__spacer { flex: 1; }

/* volume: the slider unfolds from the speaker instead of eating the bar */
.vp__vol { display: flex; align-items: center; }
.vp__volrange {
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  width: 0; opacity: 0; height: 22px; margin: 0; transition: width .18s ease, opacity .18s ease, margin .18s ease;
}
.vp__vol:hover .vp__volrange, .vp__vol:focus-within .vp__volrange { width: 74px; opacity: 1; margin: 0 8px 0 2px; }
.vp__volrange::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #fff var(--vp-vol, 100%), rgba(255,255,255,.26) var(--vp-vol, 100%));
}
.vp__volrange::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.26); }
.vp__volrange::-moz-range-progress { height: 4px; border-radius: 999px; background: #fff; }
.vp__volrange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.vp__volrange::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

/* fullscreen: fill the screen, not a letterboxed 74vh box in the middle of it */
.vp:fullscreen, .vp:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; --vp-pad: 22px; }
.vp:fullscreen .vp__video, .vp:-webkit-full-screen .vp__video { width: 100%; height: 100%; max-height: none; }

@media (max-width: 560px) {
  .vp { --vp-pad: 8px; }
  .vp__bar { padding: 4px 8px 6px; }
  .vp__ico { width: 34px; height: 34px; }
  /* No hover on touch: keep the level visible instead of hiding it behind one. */
  .vp__volrange { width: 56px; opacity: 1; margin: 0 6px 0 2px; }
  .vp__time { font-size: 11.5px; }
}

.vp [hidden] { display: none; }


/* ---- what the YouTube variant adds --------------------------------------
   There is no <video> here to give the box a height, and the iframe only
   arrives on the first click — so the shape has to be stated.
   ---------------------------------------------------------------------- */

.vp--yt { aspect-ratio: 16 / 9; border-radius: var(--aw-rad); overflow: hidden; margin: 24px 0; }

.vp__stage { position: absolute; inset: 0; z-index: 0; }
/* The iframe fills the stage outright. site.css's bare `.post-body iframe`
   rule matches this one too at the SAME specificity, so anything it sets and
   we do not — its `margin: 24px 0`, its `aspect-ratio` — leaks through and
   slides the picture down inside the stage, leaving a black band across the
   top. That is the bug the .embed override in site.css already documents; the
   player needs the same treatment, so every property it touches is restated. */
.post-body .vp__stage iframe,
.vp__stage iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; border: 0; display: block;
  aspect-ratio: auto;   /* the stage already holds the ratio */
}

/* The poster is not only the before-first-click still: it comes BACK over the
   iframe the moment the video stops running.

   That is the only lever there is against YouTube's own chrome. The iframe is
   cross-origin, so not one pixel inside it can be styled or removed, and no
   player parameter takes the chrome off any more — modestbranding was retired
   in 2023 and showinfo in 2018. With controls:0 the frame stays clean WHILE
   PLAYING; pause or end it and YouTube draws the lot: the channel plate and
   title top-left, share and watch-later bottom-left, the "Diğer videolar" grid
   and the logo bottom-right. So the answer is to never let that state be seen.

   Opaque on purpose — a translucent scrim still leaves the white title legible.

   The cost, worth knowing: this is the video's thumbnail, not the frame you
   paused on, so pausing snaps back to the still instead of freezing in place. */
.vp__poster {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .18s ease;
}
/* Before the first click nothing is playing, so the frame reads as a still
   rather than as a video the visitor is failing to start. Once the player is
   live the poster is a cover, and a cover has to be solid. */
.vp:not(.is-live) .vp__poster { opacity: .82; }
.vp:not(.is-live):hover .vp__poster { opacity: 1; }
.vp.is-playing .vp__poster { display: none; }

/* The bar and the centre button sit ABOVE the iframe. */
.vp__center { z-index: 3; }
.vp__bar    { z-index: 4; }

/* The frame is OUR button, always. The iframe runs with controls=0 and is
   driven entirely through the API, so it never needs the cursor — and giving
   it the cursor is what brought YouTube's own chrome up on hover (the title
   plate, share, watch-later, its gradients) sitting on top of our bar. So the
   stage is deaf to the mouse for good, not just until the player exists.

   The cost, worth stating: an ad's "Skip" is inside that iframe too, and it
   goes deaf with the rest. */
.vp__stage { pointer-events: none; }

/* Which leaves the centre button as the only thing a click on the picture can
   land on — so while the video runs it stays put as a full-frame pause target
   and only the glass circle fades out. player.js toggles is-quiet; it used to
   hide the button outright, which with the iframe deaf would have made the
   picture unclickable. */
.vp__center.is-quiet span,
.vp__center.is-quiet:hover span { opacity: 0; transform: scale(.94); }
.vp__center span { transition: transform .16s ease, background .16s ease, opacity .16s ease; }

@media (max-width: 576px) {
  .vp__center span { width: 58px; height: 58px; }
  .vp__center svg  { width: 24px; height: 24px; }
}