/* Bemutatkozó film: álló (9:16) kártya, saját lejátszósávval – gépen és telefonon ugyanígy */
dialog.film{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#eff3ed;overflow:hidden}
dialog.film::backdrop{background:#0a130ee8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
dialog.film[open]::backdrop{animation:film-fade .35s ease}
.film-wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
.film-head{width:var(--fw);display:flex;align-items:center;justify-content:space-between;gap:16px}
.film-head div{display:flex;flex-direction:column;gap:3px;min-width:0}
.film-head span{font-size:10.5px;letter-spacing:1.8px;color:#c9eeaa}
.film-head strong{font-weight:400;font-size:22px;letter-spacing:-.04em;white-space:nowrap}
.film-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff30;background:#ffffff0d;color:#eff3ed;display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s}
.film-x:hover{background:#eff3ed;color:#101815;border-color:#eff3ed}
.film-x svg{width:18px;height:18px}
.film{--fh:min(78vh,820px,calc((100vw - 32px) * 16 / 9));--fw:calc(var(--fh) * 9 / 16)}
@supports(height:1dvh){.film{--fh:min(78dvh,820px,calc((100vw - 32px) * 16 / 9))}}
.film-card{position:relative;width:var(--fw);height:var(--fh);border-radius:28px;overflow:hidden;background:#000;box-shadow:0 50px 100px -40px #000,0 0 0 1px #ffffff14;isolation:isolate}
.film-card video{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;display:block;background:#000}
.film-card video::-webkit-media-controls{display:none!important}
/* középső lejátszás gomb */
.film-play{position:absolute;left:50%;top:50%;z-index:3;width:78px;height:78px;margin:-39px 0 0 -39px;border:0;border-radius:50%;background:#c9eeaa;color:#101815;display:grid;place-items:center;
  box-shadow:0 18px 40px -14px #000c;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,background .25s}
.film-play svg{width:26px;height:26px;margin-left:4px}
.film-play:hover{transform:scale(1.06);background:#d8f5bf}
.film-card.is-playing .film-play{opacity:0;transform:scale(.7);pointer-events:none}
.film-card::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 55%,#000a);pointer-events:none;transition:opacity .4s}
.film-card.is-playing.is-idle::before{opacity:0}
/* alsó sáv */
.film-bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:999px;background:#101815a6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .35s,transform .35s}
.film-card.is-playing.is-idle .film-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.film-btn{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#eff3ed;display:grid;place-items:center;transition:background .2s,color .2s}
.film-btn:hover{background:#ffffff1f;color:#c9eeaa}
.film-btn svg{width:18px;height:18px}
.film-time{flex:none;font-size:11.5px;color:#d7e0d8;font-variant-numeric:tabular-nums;min-width:30px;text-align:center}
.film-prog{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none;outline:none}
.film-prog::before,.film-prog i{content:'';position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;transition:height .2s,margin .2s}
.film-prog::before{right:0;background:#ffffff38}
.film-prog i{width:0;background:#c9eeaa}
.film-prog i::after{content:'';position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#c9eeaa;transform:scale(0);transition:transform .2s}
.film-prog:hover::before,.film-prog:hover i,.film-prog.is-drag::before,.film-prog.is-drag i,.film-prog:focus-visible::before,.film-prog:focus-visible i{height:5px;margin-top:-2.5px}
.film-prog:hover i::after,.film-prog.is-drag i::after,.film-prog:focus-visible i::after{transform:scale(1)}
.film-err{position:absolute;left:20px;right:20px;top:50%;z-index:4;transform:translateY(-50%);margin:0;padding:16px 18px;border-radius:18px;background:#101815e6;text-align:center;font-size:14px;line-height:1.5}
.film-err[hidden]{display:none}
.film-card.has-error .film-play,.film-card.has-error .film-bar{display:none}
/* nyitás */
dialog.film[open] .film-card{animation:film-in .55s cubic-bezier(.2,.8,.2,1)}
dialog.film[open] .film-head{animation:film-fade .5s .1s both}
@keyframes film-in{from{opacity:0;transform:translateY(24px) scale(.96)}}
@keyframes film-fade{from{opacity:0}}
html.film-lock{overflow:hidden}
@media(max-width:750px){
  .film-wrap{gap:12px}
  .film-head strong{font-size:19px}
  .film-card{border-radius:24px}
  .film-time:last-of-type{display:none}
}
@media(prefers-reduced-motion:reduce){dialog.film[open] .film-card,dialog.film[open] .film-head,dialog.film[open]::backdrop{animation:none}}