/* Voteum · teljes képernyős termékbemutató — a vetítőterem.
 *
 * A színpadon a demo.css eszközei és app-felületei futnak, változatlanul; ez a
 * fájl csak azt adja köréjük, amitől lejátszó lesz belőle: fejezet-sáv,
 * keresősáv, vezérlők, és a kiemelés (gyűrű + reflektor + magyarázat).
 *
 * A keret NEM sötét „tech" felület, hanem ugyanaz a pergamen, mint a landingé:
 * papírszínű alap, vékony vonalak, derékszögek, Spectral-címek, mono
 * jelölések. Két okból. Egy: a telefon- és ablakkeretek meleg árnyékokkal
 * készültek, világos háttérre — sötét teremben ez elveszett. Kettő: a termék
 * egy hivatal eszköze, nem egy fejlesztői konzol; a bemutatójának is ilyennek
 * kell kinéznie.
 */

.ft-body{
  --bg:#f4f1ea; --paper:#fdfcf9; --paper2:#faf8f2;
  --ink:#1c1b17; --ink-soft:#45403a; --muted:#6b6455;
  --line:#ddd8cd; --line-soft:#eee9dd; --frame:#ccc5b6; --dark-line:#3a382f;
  --blue:#657EC9; --blue-deep:#41579c; --blue-light:#a9b8e6; --blue-soft:#e9edf8; --blue-pale:#dde4f6;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --serif:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.ft-body *{box-sizing:border-box;}
.ft-body a{color:var(--blue);text-decoration:none;}
.ft-body a:hover{color:var(--ink);}
.ft-body button{font:inherit;color:inherit;}
/* Papír-szemcse, ugyanaz a textúra, mint a landingen. */
.ft-body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;}

/* ── fejléc ──────────────────────────────────────────────── */
.ft-top{display:flex;align-items:center;gap:20px;height:60px;padding:0 24px;
  border-bottom:1px solid var(--line);background:#f4f1eaee;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20;}
.ft-brand{display:flex;align-items:baseline;gap:10px;}
.ft-brand b{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink);}
.ft-brand em{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--blue);
  border:1px solid var(--blue);padding:2px 7px;}
.ft-title{font-size:13.5px;color:var(--muted);border-left:1px solid var(--line);padding-left:20px;}
.ft-title b{color:var(--ink);font-weight:600;}
.ft-top .ft-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.ft-top .lang-sw{display:inline-flex;gap:6px;align-items:center;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);padding:4px 2px;}
.ft-top .lang-sw span[data-l].on{color:var(--blue);font-weight:700;}
.ft-top .lang-sw .sep{opacity:.5;}
.ft-back{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--frame);padding:8px 13px;background:var(--paper);}
.ft-back:hover{border-color:var(--ink);color:var(--ink);}

/* ── váz ─────────────────────────────────────────────────── */
.ft-wrap{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:calc(100vh - 60px);}
.ft-side{border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;
  max-height:calc(100vh - 60px);position:sticky;top:60px;}
.ft-side h2{margin:0;padding:22px 22px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;}
.ft-rail{flex:1;overflow-y:auto;padding:0 14px 20px;scrollbar-width:thin;}
.ft-rail::-webkit-scrollbar{width:7px;} .ft-rail::-webkit-scrollbar-thumb{background:var(--line);}

/* felvonás a bal sávban */
.ft-act{margin-bottom:1px;}
.ft-acth{display:flex;align-items:baseline;gap:11px;width:100%;text-align:left;cursor:pointer;background:none;
  border:0;padding:12px 10px;color:var(--ink-soft);transition:background .18s,color .18s;}
.ft-acth:hover{background:var(--bg);color:var(--ink);}
.ft-acth em{font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.06em;color:var(--muted);}
.ft-acth span{flex:1;font-family:var(--serif);font-size:16px;font-weight:500;line-height:1.25;}
.ft-acth i{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--muted);}
.ft-act.done .ft-acth{color:var(--muted);}
.ft-act.done .ft-acth em{color:var(--blue);}
.ft-act.on{background:var(--blue-soft);box-shadow:inset 2px 0 0 var(--blue);}
.ft-act.on .ft-acth{color:var(--ink);} .ft-act.on .ft-acth em{color:var(--blue-deep);}
.ft-chs{list-style:none;margin:0;padding:0 0 10px;display:none;}
.ft-act.on .ft-chs{display:block;}
.ft-chs li button{display:block;width:100%;text-align:left;cursor:pointer;background:none;border:0;
  padding:5px 10px 5px 30px;color:var(--muted);font-size:12.5px;line-height:1.4;position:relative;}
.ft-chs li button:hover{color:var(--ink);}
/* A fejezet előrehaladása FÜGGŐLEGES vonal a szöveg mellett: a sín halvány, a
   megtett rész kék. Az arány a `--p`, MAGASSÁGKÉNT — szélességre állítva a sáv
   végigfut a lapon, ami az első változat hibája volt. */
.ft-chs li button::before{content:"";position:absolute;left:15px;top:7px;width:1px;height:calc(100% - 12px);
  background:var(--line);}
.ft-chs li button u{position:absolute;left:14px;top:7px;width:3px;background:var(--blue);
  height:calc((100% - 12px) * var(--p,0));transition:height .12s linear;}
.ft-chs li.on button{color:var(--ink);font-weight:600;}
.ft-chs li.done button{color:var(--ink-soft);}
.ft-chs li button:focus-visible,.ft-acth:focus-visible,.ft-b:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* ── színpad ─────────────────────────────────────────────── */
.ft-main{display:flex;flex-direction:column;min-width:0;padding:22px 28px;gap:16px;}
.ft-head{display:flex;align-items:flex-start;gap:22px;min-height:54px;}
.ft-actlabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  white-space:nowrap;padding-top:6px;}
.ft-actlabel em{font-style:normal;color:var(--muted);margin-right:10px;}
.ft-cap{min-width:0;border-left:1px solid var(--line);padding-left:22px;}
.ft-cap b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.01em;}
.ft-cap span{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:92ch;}
.ft-reduced{margin:0;padding:11px 15px;border:1px solid var(--line);border-left:3px solid var(--blue);
  font-size:13px;color:var(--ink-soft);background:var(--paper);}

.ft-stage{position:relative;flex:1;min-height:430px;height:clamp(430px,calc(100vh - 360px),760px);
  border:1px solid var(--frame);background:
    radial-gradient(760px 420px at 74% 4%,rgba(176,126,34,.07),transparent 66%),
    radial-gradient(620px 460px at 8% 100%,rgba(101,126,201,.10),transparent 70%),
    linear-gradient(#fdfcf9,#f2eee4);
  padding:46px 38px 34px;overflow:hidden;
  box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(28,27,23,.05);}
.ft-scene{position:absolute;inset:46px 38px 34px;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.ft-scene.on{opacity:1;}

/* A nagy színpadon több hely van, mint a landingen: a kezelőfelület
   keskenyebb, a telefon nagyobb, és a kettő csak a szélén fed át. A két eszköz
   logikai mérete fix, a demo.js `fitter`-e pedig a SZÉLESSÉGBŐL számol arányt —
   magasságot nem néz —, ezért a szélességet a lejátszó adja meg, a
   rendelkezésre álló magasságból visszaszámolva (lásd `fitStage`). */
.ft-stage .vd-both .vd-mac-host{width:var(--ft-mac-w,74%);top:16px;right:16px;}
.ft-stage .vd-both .vd-phone-host{width:var(--ft-phone-w,300px);bottom:0;}
.ft-stage .vd-both.focus-mac .vd-phone-host{opacity:.34;transform:translate(-40px,30px) scale(.94);}
.ft-stage .vd-both.focus-phone .vd-mac-host{filter:saturate(.62) opacity(.6);transform:translateX(26px) scale(.985);}
.ft-stage .vd-phone-host::before{background:radial-gradient(58% 58% at 50% 46%,rgba(101,126,201,.26),transparent 72%);}
.ft-stage .vd-mac-host::before{background:radial-gradient(58% 58% at 50% 46%,rgba(176,126,34,.22),transparent 72%);}
/* Egyeszközös (csak kezelőfelület) jelenet: a szélesség is a magasságból jön,
   és középre kerül. */
.ft-stage .ft-scene.vd-mac-host{width:var(--ft-mac-full,100%);right:auto;left:50%;margin-left:calc(var(--ft-mac-full,100%) / -2);}
@media (max-width:980px){
  .ft-stage .vd-both .vd-mac-host{width:100% !important;}
  .ft-stage .vd-both .vd-phone-host{width:min(300px,78%) !important;}
}

/* Az eszköz-címkék a pergamen fölött papírlapkák, éles kontraszttal: a
   sötét-terem változatuk („Lakos" mélykéken, sötéten) olvashatatlan volt. */
.ft-stage .vd-badge{background:var(--paper);color:var(--ink-soft);border:1px solid var(--frame);}
.ft-stage .vd-both.focus-phone .vd-badge-p,
.ft-stage .vd-both.focus-mac .vd-badge-m{color:var(--ink);border-color:var(--frame);opacity:1;}
.ft-stage .vd-both.focus-phone .vd-badge-p{border-left:3px solid var(--blue);}
.ft-stage .vd-both.focus-mac .vd-badge-m{border-left:3px solid #B07E22;}
.ft-stage .vd-both.focus-phone .vd-badge-m,
.ft-stage .vd-both.focus-mac .vd-badge-p{color:var(--muted);border-color:var(--line);opacity:1;}

/* ── kiemelés: gyűrű + reflektor + magyarázat ────────────── */
.ft-layer{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;transition:opacity .2s ease;--a:0;}
.ft-layer.on{opacity:1;}
/* A gyűrű helyét MINDEN képkockán újraszámoljuk, mert a kamera pásztáz és
   nagyít. Átmenettel ez folyamatos lemaradás és remegés lenne — a CSS az előző
   helyről indulna, miközben már a következő érkezik. Ezért a méret és a hely
   ugrásmentesen, átmenet NÉLKÜL követi a célt; csak az áttűnés animált. */
.ft-ring{position:absolute;border:1.5px solid rgba(101,126,201,calc(var(--a)));
  box-shadow:0 0 0 4000px rgba(28,27,23,calc(var(--a) * .42)),0 0 0 4px rgba(101,126,201,calc(var(--a) * .16));}
.ft-tail{position:absolute;background:rgba(101,126,201,calc(var(--a) * .8));display:block;}
.ft-call{position:absolute;left:0;top:0;width:min(336px,44%);padding:15px 18px 17px;
  background:var(--paper);border:1px solid var(--ink);opacity:var(--a);
  box-shadow:5px 5px 0 rgba(28,27,23,.13);
  transition:opacity .2s ease;}
.ft-call b{display:block;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.25;color:var(--ink);}
.ft-call p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft);}

/* ── alsó sáv ────────────────────────────────────────────── */
.ft-bar{display:flex;flex-direction:column;gap:14px;}
/* Keresősáv: felvonásonként egy-egy szakasz, közöttük hajszálnyi rés. A már
   megnézett felvonás kitöltve marad, az aktuális él, a hátralévő üres — így a
   sáv egy pillantásra megmutatja, hol tartunk a filmben, nem csak a
   felvonáson belül. A fejezet-osztások halvány rovátkák a szakaszon. */
.ft-seek{display:flex;gap:3px;height:22px;align-items:center;padding-top:9px;}
.ft-seg{position:relative;height:5px;background:var(--line-soft);box-shadow:inset 0 0 0 1px var(--line);
  cursor:pointer;flex-basis:0;transition:height .18s ease,box-shadow .18s ease;overflow:hidden;border-radius:1px;}
.ft-seg::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px;z-index:2;}
.ft-seg:hover{height:9px;box-shadow:inset 0 0 0 1px var(--frame);}
.ft-seg.on{height:11px;box-shadow:inset 0 0 0 1px var(--blue-light);}
.ft-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue-light);}
.ft-seg.on .ft-fill{background:linear-gradient(180deg,var(--blue),var(--blue-deep));}
/* A fejezet-osztások csak az ÉPP FUTÓ felvonáson látszanak: nyolc szakaszon,
   szakaszonként hét-tíz rovátkával az egész sáv csíkossá vált, és semmit nem
   mondott. Ott viszont, ahol épp tartunk, pont ez a hasznos. */
.ft-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--paper);opacity:0;
  transition:opacity .2s;z-index:1;}
.ft-seg.on .ft-tick,.ft-seg:hover .ft-tick{opacity:.75;}
.ft-lab{position:absolute;left:0;top:-17px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--muted);font-weight:400;opacity:0;transition:opacity .2s,color .2s;z-index:3;}
.ft-seg.on .ft-lab{opacity:1;color:var(--blue-deep);}
.ft-seg:hover .ft-lab{opacity:1;}

.ft-ctl{display:flex;align-items:center;gap:8px;}
.ft-b{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--frame);
  background:var(--paper);cursor:pointer;color:var(--ink-soft);transition:border-color .18s,color .18s,background .18s;}
.ft-b:hover{border-color:var(--ink);color:var(--ink);}
.ft-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ft-b.ft-play{width:46px;height:46px;border-color:var(--ink);background:var(--ink);color:var(--bg);}
.ft-b.ft-play:hover{background:var(--dark-line);border-color:var(--dark-line);color:#fff;}
.ft-b.ft-play svg{width:21px;height:21px;}
.ft-b.ft-play svg path{fill:currentColor;stroke:currentColor;}
.ft-b.ft-play.on svg path{fill:none;}
.ft-time{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-left:10px;
  font-variant-numeric:tabular-nums;}
.ft-rate{display:flex;margin-left:auto;border:1px solid var(--frame);background:var(--paper);}
.ft-rate button{background:none;border:0;cursor:pointer;padding:8px 12px;font-family:var(--mono);font-size:11px;
  color:var(--muted);transition:background .16s,color .16s;}
.ft-rate button+button{border-left:1px solid var(--line);}
.ft-rate button:hover{color:var(--ink);}
.ft-rate button.on{background:var(--ink);color:var(--bg);}

/* ── lábjegyzet ──────────────────────────────────────────── */
.ft-foot{border-top:1px solid var(--line);padding:26px 28px 34px;display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between;background:var(--paper);}
.ft-foot p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:72ch;}
.ft-foot .ft-cta{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:var(--ink);
  color:var(--bg);padding:12px 20px;font-size:13.5px;font-weight:600;white-space:nowrap;}
.ft-foot .ft-cta:hover{background:var(--dark-line);border-color:var(--dark-line);color:#fff;}
.ft-foot .ft-alt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--frame);padding-bottom:3px;}
.ft-foot .ft-alt:hover{border-color:var(--ink);color:var(--ink);}

/* ── kisebb kijelzők ─────────────────────────────────────── */
@media (max-width:1180px){
  .ft-wrap{grid-template-columns:228px minmax(0,1fr);}
  .ft-main{padding:16px 18px;}
}
@media (max-width:980px){
  /* Keskeny kijelzőn a két eszköz egymás alá kerül, vagyis a színpad ezer
     pixelnél is magasabb lehet: a vezérlősáv ezért a képernyő aljára tapad,
     különben a szünet gombhoz végig kellene görgetni. */
  .ft-bar{position:sticky;bottom:0;z-index:15;padding:14px 0 12px;
    background:linear-gradient(rgba(244,241,234,0),var(--bg) 34%);}
  .ft-wrap{display:block;}
  .ft-side{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);}
  .ft-rail{display:flex;gap:8px;overflow-x:auto;padding:0 16px 14px;}
  .ft-act{flex:0 0 auto;min-width:176px;border:1px solid var(--line);}
  .ft-act.on .ft-chs{display:none;}
  .ft-stage{height:auto;min-height:0;padding:40px 20px 28px;}
  .ft-scene{position:relative;inset:auto;display:none;}
  .ft-scene.on{display:block;}
  .ft-cap span{display:none;}
  /* A demo.css a két eszközt 880 alatt teszi egymás alá, a színpad viszont már
     980 alatt kiegyenesedik (`position:relative`). A közti sávban a jelenet
     magassága nullára esett, mert a benne abszolút pozicionált eszközök nem
     tartják — a telefon a kezelőfelületre csúszott. A két határnak egyeznie
     kell. */
  .ft-stage .vd-both{position:static;display:flex;flex-direction:column;align-items:center;gap:52px;}
  .ft-stage .vd-both .vd-mac-host{position:relative;right:auto;top:auto;transform:none !important;filter:none !important;}
  .ft-stage .vd-both .vd-phone-host{position:relative;left:auto;bottom:auto;opacity:1 !important;transform:none !important;}
  /* Egymás alatti eszközöknél a kiemelés félrevezető lenne. */
  .ft-layer{display:none;}
  /* Egyeszközös jelenet: itt a színpad magassága a TARTALOMTÓL függ, tehát a
     magasságból visszaszámolt szélesség körkörös lenne — a sáv kapja a teljes
     szélességet, az arányt a `fitter` tartja. */
  .ft-stage .ft-scene.vd-mac-host{width:100%;left:auto;margin-left:0;}
}
@media (max-width:880px){
  .ft-top{flex-wrap:wrap;height:auto;padding:12px 14px;gap:10px;position:static;}
  .ft-title{border-left:0;padding-left:0;flex-basis:100%;}
  .ft-head{flex-direction:column;gap:8px;}
  .ft-cap{border-left:0;padding-left:0;}
  .ft-cap b{font-size:19px;}
  .ft-cap span{display:block;}
  /* Két eszköz egymás alatt: a kiemelés így félrevezető lenne. */
  .ft-layer{display:none;}
  .ft-rate{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ft-scene,.ft-layer,.ft-ring,.ft-call{transition:none;}
}