/* =====================================================================
   MamsFlix Player — kontrol kaca ala Apple TV
   ===================================================================== */
.mfp {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  color: #fff;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  container-type: inline-size;
  --ui-fade: .35s;
}
.mfp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mfp.is-fs .mfp-video { object-fit: contain; }
.mfp-shade {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ui-fade);
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.72) 100%);
}
.mfp.show-ui .mfp-shade, .mfp.is-paused .mfp-shade { opacity: 1; }

.mfp-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; transition: transform .25s var(--ease-spring), background-color .2s; --glass-bg: rgba(40, 40, 44, .38); }
.mfp-btn:hover { --glass-bg: rgba(70, 70, 76, .5); }
.mfp-btn:active { transform: scale(.9); }
.mfp-btn svg { width: 22px; height: 22px; }
.mfp-btn.md { width: 58px; height: 58px; }
.mfp-btn.md svg { width: 28px; height: 28px; }
.mfp-btn.lg { width: 84px; height: 84px; }
.mfp-btn.lg svg { width: 36px; height: 36px; }
.mfp-btn.lg svg path[fill] { transform: translateX(1.5px); }

/* lapisan UI muncul/hilang */
.mfp-top, .mfp-center, .mfp-bar { opacity: 0; pointer-events: none; transition: opacity var(--ui-fade), transform var(--ui-fade) var(--ease); }
.mfp.show-ui .mfp-top, .mfp.show-ui .mfp-center, .mfp.show-ui .mfp-bar,
.mfp.is-paused:not(.is-loading) .mfp-top, .mfp.is-paused:not(.is-loading) .mfp-center, .mfp.is-paused:not(.is-loading) .mfp-bar { opacity: 1; pointer-events: auto; }
.mfp:not(.show-ui):not(.is-paused) { cursor: none; }
.mfp.is-loading .mfp-center, .mfp.is-gate .mfp-center { opacity: 0 !important; pointer-events: none !important; }

.mfp-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; transform: translateY(-6px); }
.mfp.show-ui .mfp-top { transform: none; }
.mfp-title { min-width: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.mfp-title small { display: block; font: 600 11.5px/1.2 var(--font); color: rgba(255, 255, 255, .7); letter-spacing: .02em; }
.mfp-title b { display: block; font: 700 17px/1.2 var(--font-display); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfp-title span { display: block; font-size: 13px; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mfp-center { position: absolute; z-index: 4; inset: 0; margin: auto; height: 90px; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 8cqi, 72px); pointer-events: none; }
.mfp-center > * { pointer-events: auto; }
@container (min-width: 900px) { .mfp-center .md { display: none; } }

.mfp-bar {
  position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 14px;
  padding: 10px 14px 8px; border-radius: 22px; transform: translateY(8px);
  --glass-bg: rgba(30, 30, 34, .42);
}
.mfp.show-ui .mfp-bar, .mfp.is-paused .mfp-bar { transform: none; }
.mfp-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.mfp-row .spacer { flex: 1; }
.mfp-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; transition: background-color .2s, transform .2s var(--ease-spring); flex: none; }
.mfp-ic:hover { background: rgba(255, 255, 255, .12); }
.mfp-ic:active { transform: scale(.9); }
.mfp-ic svg { width: 22px; height: 22px; }
.mfp-ic.on { color: var(--accent-hi); }
.mfp-time { font: 500 13.5px/1 var(--font); color: rgba(255, 255, 255, .92); margin-left: 6px; white-space: nowrap; }
.mfp-time .dim { color: rgba(255, 255, 255, .45); }
.mfp-vol { display: flex; align-items: center; }
.mfp-vol input { width: 0; opacity: 0; transition: width .3s var(--ease), opacity .3s; }
.mfp-vol:hover input, .mfp-vol:focus-within input { width: 86px; opacity: 1; margin-right: 6px; }
.mfp input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, #fff var(--v, 50%), rgba(255, 255, 255, .28) var(--v, 50%));
}
.mfp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.mfp input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
@container (max-width: 560px) { .mfp .hide-sm { display: none; } .mfp-vol input { display: none; } .mfp-bar { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px 6px; border-radius: 18px; } .mfp-ic { width: 36px; height: 36px; } }

/* scrubber */
.mfp-scrub { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.mfp-track { position: relative; width: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; transition: height .2s var(--ease); }
.mfp-scrub:hover .mfp-track, .mfp.scrubbing .mfp-track { height: 8px; }
.mfp-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.mfp-track .buf { background: rgba(255, 255, 255, .32); }
.mfp-track .cur { background: #fff; }
.mfp-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); transform: scale(0); transition: transform .2s var(--ease-spring); }
.mfp-scrub:hover .mfp-knob, .mfp.scrubbing .mfp-knob { transform: scale(1); }
.mfp-tip { position: absolute; bottom: 22px; transform: translateX(-50%); padding: 5px 9px; border-radius: 9px; background: rgba(20, 20, 22, .85); font: 600 12.5px/1 var(--font); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.mfp-scrub:hover .mfp-tip, .mfp.scrubbing .mfp-tip { opacity: 1; }
.mfp.is-controlled .mfp-scrub { cursor: not-allowed; }

/* subtitle */
.mfp-subs {
  position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 8%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; text-align: center; transition: bottom .35s var(--ease);
  --sub-scale: 1; --sub-color: #fff; --sub-bg: rgba(0, 0, 0, .55); --sub-blur: 0px; --sub-font: var(--font);
}
.mfp.show-ui .mfp-subs[data-pos="default"], .mfp.is-paused .mfp-subs[data-pos="default"], .mfp.show-ui .mfp-subs[data-pos^="bottom"] { bottom: 128px; }
.mfp-subs .cue {
  display: inline-block; max-width: 100%;
  padding: .16em .5em; border-radius: .3em;
  font: 600 calc(clamp(15px, 2.6cqi, 34px) * var(--sub-scale))/1.3 var(--sub-font);
  color: var(--sub-color); background: var(--sub-bg);
  -webkit-backdrop-filter: blur(var(--sub-blur)); backdrop-filter: blur(var(--sub-blur));
  text-shadow: var(--sub-shadow);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mfp-subs[data-pos="top"], .mfp-subs[data-pos="top-left"], .mfp-subs[data-pos="top-right"] { top: 12%; bottom: auto; }
.mfp-subs[data-pos="center"], .mfp-subs[data-pos="left"], .mfp-subs[data-pos="right"] { top: 50%; bottom: auto; transform: translateY(-50%); }
.mfp-subs[data-pos$="left"], .mfp-subs[data-pos="left"] { align-items: flex-start; text-align: left; }
.mfp-subs[data-pos$="right"], .mfp-subs[data-pos="right"] { align-items: flex-end; text-align: right; }

/* gate / loading */
.mfp-gate { position: absolute; z-index: 6; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,.75)); }
.mfp.is-loading .mfp-gate, .mfp.is-gate .mfp-gate { display: flex; }
.mfp-gate-text { margin: 0; font: 500 14px/1.3 var(--font); color: rgba(255, 255, 255, .85); }
.mfp-ring { position: relative; width: 56px; height: 56px; }
.mfp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mfp-ring circle { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 3.5; }
.mfp-ring .arc { stroke: #fff; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; transition: stroke-dashoffset .25s linear; }
.mfp-ring .n { position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px/1 var(--font-round); font-variant-numeric: tabular-nums; }
.mfp.is-loading:not(.is-gate) .mfp-ring .arc { stroke-dasharray: 40 132; animation: spin .9s linear infinite; transform-origin: center; }
.mfp.is-loading:not(.is-gate) .mfp-ring svg { animation: spin .9s linear infinite; }
.mfp.is-loading:not(.is-gate) .mfp-ring .n { display: none; }
.mfp.is-buffering:not(.is-loading)::after { content: ""; position: absolute; z-index: 4; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; border: 3.5px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin .8s linear infinite; pointer-events: none; }
.mfp.is-buffering.show-ui::after { display: none; }

.mfp-error { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.mfp-error-card { max-width: 420px; padding: 22px; border-radius: 24px; text-align: center; }
.mfp-error-card > svg { width: 34px; height: 34px; color: var(--yellow); }
.mfp-error-card p { margin: 10px 0 16px; font-size: 15px; line-height: 1.45; }

/* feedback kilat (±10, volume) */
.mfp-flash { position: absolute; z-index: 7; top: 18%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 600 14px/1 var(--font); opacity: 0; pointer-events: none; }
.mfp-flash svg { width: 20px; height: 20px; }
.mfp-flash.on { animation: mfp-flash 1.1s var(--ease) forwards; }
@keyframes mfp-flash { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.94); } 15%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.mfp-resume { position: absolute; z-index: 7; left: 18px; bottom: 120px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 999px; font-size: 14px; animation: pop-in .4s var(--ease-spring); }

/* menu setelan (gaya context menu iOS) */
.mfp-menu {
  position: absolute; z-index: 9; right: 16px; bottom: 112px;
  width: min(330px, calc(100% - 32px)); max-height: calc(100% - 140px);
  overflow: auto; padding: 8px; border-radius: 22px;
  animation: pop-in .3s var(--ease-spring); transform-origin: bottom right;
  --glass-bg: rgba(30, 30, 34, .7);
}
.mfp-menu .menu-item { min-height: 42px; font-size: 15px; }
.mfp-menu .menu-item > svg:last-child { width: 15px; height: 15px; color: var(--label-3); }
.mfp-menu .mfp-back { color: var(--label-2); font-weight: 600; }
.mfp-menu .menu-item svg:empty { width: 20px; height: 20px; }
.mfp-posgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 8px 10px; }
.mfp-posgrid button { aspect-ratio: 16/9; border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); position: relative; }
.mfp-posgrid button i { position: absolute; width: 40%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.mfp-posgrid button:nth-child(3n+1) i { left: 12%; }
.mfp-posgrid button:nth-child(3n+2) i { left: 30%; }
.mfp-posgrid button:nth-child(3n) i { right: 12%; }
.mfp-posgrid button:nth-child(-n+3) i { top: 18%; }
.mfp-posgrid button:nth-child(n+4):nth-child(-n+6) i { top: calc(50% - 2px); }
.mfp-posgrid button:nth-child(n+7) i { bottom: 18%; }
.mfp-posgrid button.is-active { background: rgba(229, 9, 20, .3); box-shadow: inset 0 0 0 1.5px var(--accent-hi); }
.mfp-posgrid button.is-active i { background: #fff; }
.mfp-style { padding: 4px 10px 10px; display: grid; gap: 6px; }
.mfp-style label { font: 600 12.5px/1 var(--font); color: var(--label-2); margin-top: 8px; display: flex; justify-content: space-between; }
.mfp-style .segmented { display: flex; }
.mfp-style .segmented button { flex: 1; }
.mfp-style input[type="range"] { width: 100%; --v: 50%; }
.mfp-preview { height: 64px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #3a2a1c, #1d3b4a 60%, #4a1d2b); }
.mfp-preview span { padding: 3px 10px; border-radius: 6px; font-weight: 600; font-size: 16px; }
.mfp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.mfp-swatches button { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); display: grid; place-items: center; }
.mfp-swatches button svg { width: 14px; height: 14px; color: var(--label-2); }
.mfp-swatches button.is-active { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.mfp-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px; border-radius: 14px; background: rgba(118, 118, 128, .2); }
.mfp-stepper button { width: 44px; height: 34px; border-radius: 10px; font: 600 20px/1 var(--font); }
.mfp-stepper button:hover { background: rgba(255, 255, 255, .1); }
.mfp-stepper span { font: 600 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.mfp-stepper.big { margin: 6px 6px 10px; }
.mfp-stepper.big span { font-size: 20px; }
.mfp-speedchips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 6px 6px; }
.mfp-speedchips button { height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .07); font: 600 14px/1 var(--font); }
.mfp-speedchips button.is-active { background: #fff; color: #000; }
@container (max-width: 560px) { .mfp-menu { right: 8px; left: 8px; width: auto; bottom: 92px; } }

/* episode berikutnya */

/* =====================================================================
   Pemutar di hero halaman detail (inline, seperti sumber)
   ===================================================================== */
.hero-player { position: relative; background: #000; padding-top: calc(var(--nav-h) + 24px); }
.hero-player-titlebar { display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter) 12px; }
.hero-player-titlebar .grow { min-width: 0; }
.hero-player-titlebar small { display: block; font: 600 12px/1.2 var(--font); color: var(--label-2); }
.hero-player-titlebar b { display: block; font: 700 18px/1.2 var(--font-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-player-frame { position: relative; margin: 0 auto; width: min(100%, calc((100svh - var(--nav-h) - 90px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: calc(100svh - var(--nav-h) - 90px); }
.hero-player-frame .mfp { border-radius: 0; }
@media (min-width: 861px) { .hero-player-frame { width: min(calc(100% - 2 * var(--gutter)), calc((100svh - var(--nav-h) - 90px) * 16 / 9)); } .hero-player-frame .mfp { border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(229, 9, 20, .35), 0 0 0 .5px rgba(255, 255, 255, .12); } }
@media (max-width: 860px) { .hero-player { padding-top: 76px; } .hero-player-titlebar { padding: 0 12px 10px; } }
.guest-strip { display: flex; align-items: center; gap: 12px; margin: 14px auto 0; width: min(calc(100% - 2 * var(--gutter)), 980px); padding: 10px 10px 10px 18px; border-radius: 999px; font-size: 14px; }
.guest-strip .grow { flex: 1; min-width: 0; }
.guest-strip > svg { width: 20px; height: 20px; flex: none; color: var(--accent-hi); }
@media (max-width: 560px) { .guest-strip { border-radius: 18px; } }

@container (max-width: 560px) {
  .mfp-btn.lg { width: 60px; height: 60px; }
  .mfp-btn.lg svg { width: 26px; height: 26px; }
  .mfp-btn.md { width: 44px; height: 44px; }
  .mfp-btn.md svg { width: 22px; height: 22px; }
  .mfp-btn { width: 38px; height: 38px; }
  .mfp-btn svg { width: 18px; height: 18px; }
  .mfp-top { padding: 10px; gap: 8px; }
  .mfp-title b { font-size: 14px; }
  .mfp-title span, .mfp-title small { font-size: 11px; }
  .mfp.show-ui .mfp-subs[data-pos="default"], .mfp.is-paused .mfp-subs[data-pos="default"], .mfp.show-ui .mfp-subs[data-pos^="bottom"] { bottom: 74px; }
  .mfp-resume { left: 8px; bottom: 80px; font-size: 13px; }
  .mfp-time { font-size: 12px; }
}
@container (max-width: 420px) { .mfp-center { gap: 22px; } .mfp-top .mfp-title span { display: none; } }

/* ---------- kenyamanan sentuh & layar kecil ---------- */
.mfp { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mfp-video { -webkit-touch-callout: none; }
@container (max-width: 560px) {
  .mfp-btn.lg { width: 66px; height: 66px; }
  .mfp-btn.lg svg { width: 30px; height: 30px; }
  .mfp-btn.md { width: 50px; height: 50px; }
  .mfp-btn.md svg { width: 24px; height: 24px; }
  .mfp-bar { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px 6px; border-radius: 18px; }
  .mfp-top { padding: 10px 12px; }
  .mfp-title b { font-size: 15px; }
}
@media (hover: none) {
  .mfp-scrub { height: 28px; }
  .mfp-vol input { display: none; }
  .mfp.show-ui .mfp-knob, .mfp.is-paused .mfp-knob { transform: scale(1); }
}
.mfp.is-fast .mfp-video { filter: none; }

/* ---------- tombol Nonton Bareng (atas) & episode berikutnya (bar) ---------- */
.mfp-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 13px; border-radius: 999px; font: 600 14px/1 var(--font); color: #fff; --glass-bg: rgba(40, 40, 44, .38); transition: transform .25s var(--ease-spring); }
.mfp-pill:hover { --glass-bg: rgba(70, 70, 76, .5); }
.mfp-pill:active { transform: scale(.95); }
.mfp-pill svg { width: 20px; height: 20px; }
.mfp-next-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; margin: 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 13.5px/1 var(--font); flex: none; transition: background-color .2s, transform .2s var(--ease-spring); }
.mfp-next-btn:hover { background: rgba(255, 255, 255, .24); }
.mfp-next-btn:active { transform: scale(.95); }
.mfp-next-btn svg { width: 17px; height: 17px; }
@container (max-width: 560px) {
  .mfp-pill { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .mfp-pill span { display: none; }
  .mfp-next-btn { width: 36px; padding: 0; justify-content: center; margin: 0; background: none; }
  .mfp-next-btn span { display: none; }
}

/* ---------- kartu "Episode Berikutnya" ---------- */
.mfp-next { position: absolute; z-index: 8; right: 18px; bottom: 112px; left: auto; display: flex; align-items: stretch; gap: 14px; padding: 12px; border-radius: 22px; width: min(460px, calc(100% - 36px)); max-width: none; animation: pop-in .45s var(--ease-spring); --glass-bg: rgba(24, 24, 28, .82); }
.mfp-next-thumb { position: relative; width: 150px; flex: none; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1c1c1f; display: grid; place-items: center; }
.mfp-next-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mfp-next-thumb > svg { width: 30px; height: 30px; color: var(--label-3); }
.mfp-next-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--accent); }
.mfp-next-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mfp-next-info small { font: 500 12.5px/1.2 var(--font); color: var(--label-2); }
.mfp-next-info small b { color: #fff; font-variant-numeric: tabular-nums; }
.mfp-next-info strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 4px 0 10px; font: 700 15px/1.25 var(--font-display); }
.mfp-next-acts { display: flex; gap: 8px; }
.mfp-next-acts .btn { --h: 34px; padding: 0 13px; font-size: 13.5px; }
.mfp.is-ended .mfp-next.is-auto { right: 50%; bottom: 50%; transform: translate(50%, 50%); }
@container (max-width: 560px) {
  .mfp-next { left: 8px; right: 8px; bottom: 76px; width: auto; padding: 10px; gap: 10px; border-radius: 18px; }
  .mfp-next-thumb { width: 108px; }
  .mfp-next-info strong { font-size: 14px; margin-bottom: 8px; }
  .mfp.is-ended .mfp-next.is-auto { right: 8px; bottom: 50%; transform: translateY(50%); }
}

.mfp-next-info small .mfp-count { display: inline; font: 700 12.5px/1.2 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
.mfp-next-thumb img { border-radius: 0; }
@container (max-width: 560px) {
  .mfp-next, .mfp.is-ended .mfp-next.is-auto { left: 8px; right: 8px; top: auto; bottom: 64px; transform: none; padding: 8px 10px; gap: 10px; }
  .mfp-next-thumb { display: none; }
  .mfp-next-info strong { -webkit-line-clamp: 1; margin: 2px 0 8px; }
  .mfp-next.is-auto::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: mfp-next-fill var(--next-secs, 10s) linear forwards; }
}
@keyframes mfp-next-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }