/* ═══════════════════════════════════════════════════════════════════════════
   fpe-flow.css — A FŐOLDAL ANIMÁLT FLOW-JA
   Létrehozva: 2026-08-06 (65-ös prompt) · ÁTÍRVA: 2026-08-06 (68-as prompt)
   Forrás: 67_Fooldal_Flow_Terv_Andras_2026-08-06.excalidraw (András saját terve)
   Szövegforrás: ugyanaz a rajz + a „Javítás prezentáció" (16 dia)

   MI EZ
   ─────
   ADDITÍV réteg. Kizárólag az ÚJ, flow-hoz tartozó szekciók stílusát viszi:
     1. közös flow-tipográfia          — .flow-cimke / .flow-cim / .flow-alcim
     2. FOLYAMAT (4 lépés)             — .flow-lepesek + SZAGGATOTT összekötő
     3. ÁTMENET („Jövő")               — .flow-atmenet
     4. MIT JELENTHET A JÖVŐ?          — .flow-pillerek / .flow-biztonsag / .flow-focel
     5. CARD FLIP (a 6 téma)           — .fpe-flip*
     6. ZÁRÁS + A KÉT OPCIÓ            — .flow-zaras / .flow-dontes
     7. görgetés-vezérelt megjelenés   — .flow-be / .flow-be--bent
     8. 1200 px feletti felskálázás az ÚJ elemekre

   EGYETLEN meglévő szabályt sem ír felül szándékosan. Ahol a meglévő,
   index.html-ben INLINE álló osztályt kell igazítani, ott KÉT osztályos
   szelektorral teszi (.flow-dontes .flow-opcio) — mert az inline <style> a
   <body>-ban ül, tehát azonos specificitásnál az nyerne.

   BETÖLTÉSI HELY (index.html): a lap utolsó inline <style> blokkja UTÁN,
   a fpe-nagyitas.css ELŐTT.
     · az inline stílusok után → az egy-osztályos szabályaink érvényesülnek
     · a fpe-nagyitas.css előtt → 1200 px felett a 125%-os felskálázás
       továbbra is „utolsó szó" marad a MEGLÉVŐ osztályokon. Az ÚJ osztályokat
       a nagyítás-réteg nem ismeri, ezért azok 1,25×-esét a 8. blokk adja meg.

   🔴 A DESIGN-MEGKÖTÉS (68-as prompt 1. pont, András szavai):
      „a kinézet, amit ebben a fájlban látsz, IRÁNYELV. A szaggatott vonal jó
       és kell, a többit az eddigi designhoz kell igazítani."
      Ezért: a rajz adja a SZERKEZETET és az IDŐZÍTÉST; a színek, a tipográfia,
      a kártyák és a térközök a meglévő tokenekből (--bg-card, --border-subtle,
      --accent-text, --radius) jönnek. Egyetlen új szín-konstans sincs, kivéve
      az átmenet-sáv fekete fade-jét, ami maga a hatás.

   🔴 MOZGÁS ÉS NO-JS — a 3. pont négy megkötése:
      · NO-JS: ez a fájl EGYETLEN elemet sem rejt el alapállapotban.
        A rejtés a `.flow-be` osztályhoz van kötve, amit KIZÁRÓLAG a
        fpe-flow.js tesz ki futásidőben (B8 kör döntése, 42-es log).
      · prefers-reduced-motion: a JS ki sem teszi a `.flow-be`-t; a lenti
        biztonsági háló pedig `!important`-tal visszaadja a láthatóságot,
        ha bármiért mégis kikerülne.
      · Görgetés-blokkolás NINCS: ez a réteg nem használ position:fixed-et,
        sticky-t, overflow:hidden-t a <body>-n, és semmilyen scroll-snapet.
      · A 3D Card Flip csak ott kapcsol be, ahol van valódi hover (lásd 5.).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. KÖZÖS FLOW-TIPOGRÁFIA ═══════════════════════════════════════════════ */

.flow-fej {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}
.flow-cimke {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-text, var(--accent));
  margin-bottom: 8px;
}
.flow-cim {
  font-size: clamp(21px, 3.2vw, 30px); font-weight: 900;
  color: var(--text-primary); line-height: 1.28; letter-spacing: -0.5px;
  text-wrap: balance;
}
.flow-alcim {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.75;
  max-width: 620px; margin: 12px auto 0;
}
.flow-bekezdes {
  font-size: 15px; color: var(--text-secondary); line-height: 1.85;
  max-width: 640px; margin: 0 auto;
}
.flow-bekezdes--kozep { text-align: center; }


/* ══ 2. FOLYAMAT — 4 LÉPÉS, SZAGGATOTT ÖSSZEKÖTŐVEL ═════════════════════════
   A rajz szerinti szerkezet: a négy sorszám EGYMÁS ALATT, körben, a szöveg
   jobbra tőle, és a köröket SZAGGATOTT VONAL köti össze. (A korábbi, 2×2-es
   kártyarács azért került ki, mert kártya-kereten átvágva a szaggatott vonal
   nem összekötésnek, hanem hibának látszott — a rajz pedig egyértelműen
   egyetlen, folyamatos sávot mutat.)
   ──────────────────────────────────────────────────────────────────────────── */

.flow-lepesek {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 700px;
}
.flow-lepes {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: 18px;
  align-items: start;
  padding-bottom: 30px;
}
.flow-lepes:last-child { padding-bottom: 0; }

.flow-lepes-szam {
  grid-column: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid var(--border);
  color: var(--accent-text, var(--accent));
  font-size: 14px; font-weight: 800; line-height: 1;
}
.flow-lepes-szoveg {
  grid-column: 2;
  font-size: 15px; color: var(--text-secondary); line-height: 1.7;
  padding-top: 6px;
}

/* 🔴 A SZAGGATOTT ÖSSZEKÖTŐ — András kifejezett kérése.
   A kör alsó élétől a következő kör felső éléig fut. Dekoratív, ezért
   pseudo-elem: nincs se a DOM-ban, se a felolvasóban. */
.flow-lepes:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 16px;                       /* a 34 px-es kör közepe − 1 px félvonal */
  top: 42px;                        /* a kör alja + 8 px levegő */
  bottom: 4px;
  border-left: 2px dashed rgba(var(--accent-rgb), 0.40);
  transform-origin: top center;
}
/* A vonal „meghúzása" CSAK akkor animál, ha a JS elrejtette a lépést.
   JS nélkül a vonal eleve teljes hosszú. Az átmenet — ugyanabból az okból,
   mint a 7. blokkban — a `--bent` állapoton áll, hogy az elrejtés azonnali
   legyen, és a vonal ne „húzódjon vissza" a betöltés után. */
.flow-lepes.flow-be::before        { transform: scaleY(0); }
.flow-lepes.flow-be--bent::before  {
  transform: scaleY(1);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1)
              calc(var(--flow-kesl, 0ms) + 240ms);
}

/* A 4. pont után „megáll a történet", és feljön a gomb. Görgetés-blokkolás
   nélkül: ez egy sima horgony-link a következő szekcióra. */
.flow-tovabb { padding-top: 34px; }


/* ══ 3. ÁTMENET — „apró szünet, fekete fade, és felvillan a Jövő" ═══════════
   András szó szerinti leírása a rajzon. Megvalósítás: teljes szélességű,
   sötét sáv, ami a lap hátterébe fentről és lentről is kifut (ez a „fade"),
   középen a szóval, ami 1,2 s-mal később jelenik meg.

   🔴 SEM position:fixed, SEM sticky, SEM scroll-snap. A sáv normál blokk a
      tartalom folyamában — végig tovább lehet görgetni.
   ──────────────────────────────────────────────────────────────────────────── */

.flow-atmenet {
  position: relative;
  min-height: clamp(240px, 40vh, 400px);
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(to bottom,
      var(--bg, #0f1220) 0%,
      #05070d 30%,
      #05070d 70%,
      var(--bg, #0f1220) 100%);
  overflow: hidden;
}
/* Halk fény a szó mögött — a „felvillanás" hordozója. */
.flow-atmenet::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: min(560px, 90vw); height: min(560px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(var(--accent-rgb), 0.16) 0%,
    rgba(var(--accent-rgb), 0) 62%);
  pointer-events: none;
}
.flow-atmenet-szo {
  position: relative;
  font-size: clamp(38px, 9vw, 84px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text-primary);
  text-align: center;
  padding: 0 20px;
}


/* ══ 4. MIT JELENTHET A JÖVŐ? — 4 PILLÉR → BIZTONSÁG ════════════════════════ */

.flow-pillerek {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 760px; margin: 0 auto;
}
@media (max-width: 640px) { .flow-pillerek { grid-template-columns: repeat(2, 1fr); } }

.flow-piller {
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius, 12px);
}
.flow-piller svg { color: var(--accent-text, var(--accent)); flex-shrink: 0; }
.flow-piller-cim {
  font-size: 13px; font-weight: 800; color: var(--text-primary); line-height: 1.35;
}

/* Az átvezető mondat a pillérek és a BIZTONSÁG között. */
.flow-jovo-atvezeto { margin-top: 30px; }

/* A pillérek és a BIZTONSÁG közti irányjelzés. Dekoratív → aria-hidden. */
.flow-nyil {
  display: block; margin: 16px auto 14px;
  width: 22px; height: 22px;
  color: var(--text-muted); opacity: .5;
}

.flow-biztonsag {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 420px; margin: 0 auto 14px;
  padding: 16px 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.07);
}
.flow-biztonsag svg { color: var(--accent-text, var(--accent)); flex-shrink: 0; }
.flow-biztonsag-szo {
  font-size: 15px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary);
}
.flow-biztonsag-ala {
  text-align: center;
  font-size: 13.5px; color: var(--text-muted); line-height: 1.7;
  margin: 0 auto 30px;
}
@media (max-width: 420px) {
  .flow-biztonsag { padding: 14px 18px; gap: 10px; }
  .flow-biztonsag-szo { font-size: 13px; letter-spacing: 2px; }
}

/* ── A FŐ CÉL ── */
.flow-focel {
  max-width: 720px; margin: 34px auto 0;
  padding: 28px 30px;
  background: var(--bg-strip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px);
  text-align: center;
  position: relative;
}
.flow-focel::before {
  content: ''; position: absolute; left: 50%; top: -1px;
  transform: translateX(-50%);
  width: 56px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent); opacity: .8;
}
.flow-focel-cimke {
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-text, var(--accent)); margin-bottom: 12px;
}
.flow-focel-fo {
  font-size: clamp(17px, 2.4vw, 21px); font-weight: 800;
  color: var(--text-primary); line-height: 1.45; text-wrap: balance;
}
.flow-focel-ala {
  font-size: 14px; color: var(--text-muted); line-height: 1.75;
  margin-top: 12px; font-style: italic;
}
@media (max-width: 560px) { .flow-focel { padding: 22px 20px; } }


/* ══ 5. CARD FLIP — a hat téma ══════════════════════════════════════════════
   Port a kokonutui „Card Flip"-ből (React + Tailwind + shadcn → VANILLA).
   A 4. pont hat megkötése, és hogy melyiket hol teljesíti:

   (a) HOVER MOBILON NINCS → az ALAPÁLLAPOT a két oldal EGYMÁS ALATT
       („mindkét oldal tartalmát egymás alatt" — a prompt engedett változata).
       A 3D csak akkor kapcsol be, ha van igazi hover ÉS finom mutató ÉS
       elég szélesség — ezt a fpe-flow.js méri, és `.fpe-flip--aktiv`-ot tesz ki.
       Ezért érintésen, no-JS-en, szűk nézeten és reduced-motion alatt
       ugyanaz a lapos, olvasható kártya látszik, mint eddig.
   (b) SEO → a hátoldal tartalma a HTML-ben van, mindig. Ez a fájl sehol nem
       rejti el (a `backface-visibility` csak a 3D módban, a JS után él).
   (c) BILLENTYŰZET → a fordító vezérlő VALÓDI <button>. Így az Enter ÉS a
       Space natívan működik, JS-es preventDefault NÉLKÜL. (Ez a fő oka, hogy
       nem `div[role=button]` lett: ott a Space-hez preventDefault kellene,
       ami görgetést fogó kód — a 3. pont épp ezt zárja ki.)
       A hátoldali link `tabindex=-1`-et kap, amíg a kártya nincs megfordítva
       (fpe-flow.js), tehát nincs Tab-csapda.
   (d) reduced-motion → nincs 3D: a JS be sem kapcsolja, marad az (a) állapot.
   (e) NINCS CDN: se React, se Tailwind, se shadcn. Vanilla transform + JS.
   (f) ARANY NINCS a kártyákon (39-es fájl 2.7: az arany = „ez a döntés").
       Ezért NEM a `.segitseg-tema` osztályt viszik tovább: annak
       `a.segitseg-tema:hover` szabálya az index.html-ben arany keretet és
       arany ragyogást ad. Az új `.fpe-flip*` névtér nem esik bele.
   ──────────────────────────────────────────────────────────────────────────── */

/* A rács SZÁNDÉKOSAN a meglévő, EGYENLŐEN ELOSZTOTT `.segitseg-racs`
   (3 → 2 → 1 oszlop). A 68-as prompt 2.4 pontja szerint a rajz egyenetlen
   elrendezése nem irányadó, ezért a korábbi bento-arányok kikerültek. */

.fpe-flip {
  /* ALAPÁLLAPOT: a KONTÉNER a kártya-felület, a két oldal egymás alatt fut. */
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}
.fpe-flip-lap { padding: 16px 18px; }
.fpe-flip-lap--hatul { padding-top: 0; }

.fpe-flip-cim {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; color: var(--text-primary);
  line-height: 1.35;
}
.fpe-flip-cim svg { flex-shrink: 0; color: var(--accent); }
.fpe-flip-szoveg { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.fpe-flip-link {
  display: inline-block; margin-top: 10px;
  font-size: 12px; font-weight: 700; color: var(--accent-text, var(--accent));
  text-decoration: none;
  border-radius: 8px;
}
.fpe-flip-link:hover, .fpe-flip-link:focus-visible {
  text-decoration: underline; outline: none;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .45);
}
.fpe-flip-megjegyzes {
  display: inline-block; margin-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
/* A lefedetlen téma (lakástakarékpénztár): nincs mögötte oldal, ezért
   halkabb háttér + szaggatott keret — ugyanaz az elv, mint a korábbi
   `.segitseg-tema--info`-nál. Nem hazug affordancia egyik irányban sem. */
.fpe-flip--info { background: var(--bg-strip); border-style: dashed; }
.fpe-flip--info .fpe-flip-cim { color: var(--text-secondary); }

/* A fordító gomb CSAK 3D módban létezik. JS nélkül soha nem jelenik meg,
   így nem keletkezik működésképtelen vezérlő. */
.fpe-flip-gomb { display: none; }


/* ── 3D MÓD — kizárólag `.fpe-flip--aktiv` alatt (a JS teszi ki) ───────────── */

.fpe-flip--aktiv {
  background: none; border: 0; overflow: visible;
  perspective: 1600px;
}
.fpe-flip--aktiv .fpe-flip-belso {
  position: relative;
  display: grid;
  min-height: 150px;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(0.77, 0, 0.175, 1);
}
/* A két oldal UGYANABBA a rács-cellába kerül → a konténer magassága
   magától a hosszabb oldalhoz áll be. Nincs kézzel beírt fix magasság,
   tehát a 125%-os nagyítás (1200 px felett) sem tudja kilógatni. */
.fpe-flip--aktiv .fpe-flip-lap {
  grid-area: 1 / 1;
  display: flex; flex-direction: column;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius, 12px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.fpe-flip--aktiv.fpe-flip--info .fpe-flip-lap {
  background: var(--bg-strip); border-style: dashed;
}
.fpe-flip--aktiv .fpe-flip-lap--elol   { transform: rotateY(0deg); }
.fpe-flip--aktiv .fpe-flip-lap--hatul  { transform: rotateY(180deg); }

/* Két kiváltó: az egérrel jövő HOVER (CSS, JS nélkül is működik, ha a 3D
   már be van kapcsolva) és a gombbal váltott, RAGADÓS `--nyitva` állapot
   (billentyűzet és érintés). SZÁNDÉKOSAN NINCS `:focus-within`: az a
   fordító gombra fókuszálva magától átfordítaná a kártyát, miközben az
   aria-expanded még „false" — a felolvasó és a szem mást mondana. */
.fpe-flip--aktiv:hover .fpe-flip-belso,
.fpe-flip--aktiv.fpe-flip--nyitva .fpe-flip-belso { transform: rotateY(180deg); }

/* 🔴 ELŐLAP 3D MÓDBAN — mért probléma (1440 px-es felvétel, 2026-08-06):
   ha a cím felül, a gomb pedig `margin-bottom:auto`-val az alján ült, a
   kártya közepén ~90 px üres lyuk maradt, mert a magasságot a HOSSZABB
   hátoldal szabja meg. Megoldás: az előlap tartalma FÜGGŐLEGESEN KÖZÉPRE
   kerül, és az ikon nagyobb lesz, a cím fölé állva — ugyanaz a kompozíció,
   mint a `.flow-piller` kártyáknál (ikon → felirat), tehát nem új
   design-nyelv, hanem a meglévő ismétlése. */
.fpe-flip--aktiv .fpe-flip-lap--elol { justify-content: center; }
.fpe-flip--aktiv .fpe-flip-lap--elol .fpe-flip-cim {
  flex-direction: column; align-items: flex-start;
  gap: 12px; font-size: 15px; margin-bottom: 16px;
}
.fpe-flip--aktiv .fpe-flip-lap--elol .fpe-flip-cim svg { width: 26px; height: 26px; }
.fpe-flip--aktiv .fpe-flip-lap--hatul .fpe-flip-szoveg { margin-bottom: auto; }

.fpe-flip--aktiv .fpe-flip-gomb {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  margin-top: 0;
  min-height: 34px; padding: 6px 12px 6px 10px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-text, var(--accent));
  font-family: inherit; font-size: 11.5px; font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.fpe-flip--aktiv .fpe-flip-gomb svg { width: 14px; height: 14px; flex-shrink: 0; }
.fpe-flip--aktiv .fpe-flip-gomb:hover,
.fpe-flip--aktiv .fpe-flip-gomb:focus-visible {
  background: rgba(var(--accent-rgb), 0.20);
  border-color: var(--accent);
  outline: none;
}
/* SZÁNDÉKOSAN nincs `cursor: pointer` az előlapon: 3D módban a kártya
   hoverre magától fordul, tehát az előlapra nem lehet rákattintani (mire a
   mutató odaér, már a hátoldal van előtérben). Hamis affordancia lenne. */

/* Biztonsági háló: ha bármiért mégis bekapcsolna a 3D mozgás-mentesség
   mellett, a fordulás azonnali lesz, nem 3D-animáció. */
@media (prefers-reduced-motion: reduce) {
  .fpe-flip--aktiv .fpe-flip-belso { transition: none !important; }
}


/* ══ 6. ZÁRÁS + A KÉT OPCIÓ ═════════════════════════════════════════════════
   🔴 VISSZASZÁMLÁLÓ NINCS. A 68-as prompt 2.5 pontja szerint a korábbi
      tervben szereplő 3-2-1-0 visszaszámlálás KIMARAD: mesterséges sürgetés
      valódi határidő nélkül, ütközik az 51-es fájl „halkítani" döntésével.
   🔴 A „85%" állítás sincs kiírva (ellenőrizhetetlen szám). A helye üres.
   ──────────────────────────────────────────────────────────────────────────── */

.flow-zaras {
  max-width: 720px; margin: 0 auto 44px;
  padding: 26px 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-card);
  position: relative;
}
.flow-zaras::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px; background: var(--accent);
}
.flow-zaras-szoveg {
  font-size: 15px; color: var(--text-secondary); line-height: 1.85;
}
@media (max-width: 560px) { .flow-zaras { padding: 22px 20px 22px 24px; } }

.flow-dontes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 860px; margin: 28px auto 0;
}
@media (max-width: 720px) { .flow-dontes { grid-template-columns: 1fr; } }

/* Két osztályos szelektor: a .hvco-card alapszabályai az index.html
   <body>-ban álló inline <style>-ban vannak, azonos specificitással. */
.flow-dontes .flow-opcio {
  padding: 28px 26px;
  gap: 10px;
  align-items: flex-start;
}
.flow-opcio-jel {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--accent-text, var(--accent));
}
.flow-opcio-cim {
  font-size: 18px; font-weight: 900; color: var(--text-primary); line-height: 1.35;
}
.flow-opcio-szoveg {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.7; flex: 1;
}
.flow-opcio-cta {
  font-size: 13px; font-weight: 800; color: var(--accent-text, var(--accent));
  margin-top: 4px;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.flow-opcio:hover .flow-opcio-cta { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .flow-opcio:hover .flow-opcio-cta { transform: none; }
}

/* Arany-fegyelem (E/F-terv): az arany a lapon négy helyen él, az egyik a
   „kiemelt kártya". Az ① opció ez a kártya. SZÁNDÉKOSAN nem a meglévő
   .hvco-card--kiemelt osztályt kapja: annak ::after-je a „Kezdd ezzel"
   feliratot írja ki, ami itt új, nem András által írt szöveg lenne. */
.flow-dontes .flow-opcio--elso {
  border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}
.flow-dontes .flow-opcio--elso .flow-opcio-jel { color: var(--accent-gold); }
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .flow-dontes .flow-opcio--elso { border-color: rgba(217, 165, 68, .45); }
}

/* A „Letölthető anyagok" sáv az új #anyagok szekció ELSŐ eleme lett
   (korábban a kerék UTÁN állt, 44 px felső levegővel). */
.hub-alcim--elso { margin-top: 0; }


/* ══ 7. GÖRGETÉS-VEZÉRELT MEGJELENÉS ════════════════════════════════════════
   🔴 EZ A LEGKOCKÁZATOSABB BLOKK — a 3. pont hat megkötése:

   1. A rejtés KIZÁRÓLAG a `.flow-be` osztályhoz van kötve, amit csak a
      fpe-flow.js tesz ki futásidőben. JS nélkül 0 rejtett szó.
   2. prefers-reduced-motion alatt a JS ki sem teszi; a lenti háló
      `!important`-tal visszaadja a láthatóságot, ha mégis.
   3. Görgetés-blokkolás NINCS: itt nincs fixed/sticky/scroll-snap, és a JS
      egyetlen wheel/touchmove/scroll eseményre sem hallgat.
   4. EGYSZER fut le: a JS `unobserve`-ol, és a `--bent` osztályt nem veszi le.
   5. Az időzítés a MEGJELENÉS RITMUSA egy csoporton belül; a csoport
      indulását a görgetés (IntersectionObserver) váltja ki.
   6. Csak `opacity` és `transform` animálódik — mindkettő kompozitált,
      layoutot nem számol újra, tehát mobilon sem lassít.
   ──────────────────────────────────────────────────────────────────────────── */

/* 🔴 AZ ÁTMENET SZÁNDÉKOSAN A `--bent` ÁLLAPOTON VAN, NEM A `.flow-be`-N.
   MÉRT HIBA VOLT (2026-08-06, valódi Chrome): ha a `transition` a `.flow-be`-n
   áll, akkor a JS-es elrejtés is ANIMÁL — az elem betöltés után előbb
   LÁTHATÓ, majd a saját késleltetése után (a #jovo-nál 4,25 s!) KIÚSZIK,
   és csak utána jön be. Aki 4 s-on belül odaért, a pilléreket eltűnni látta.
   Így a `.flow-be` felvétele AZONNALI (animáció nélküli) elrejtés, és
   kizárólag a megjelenés animálódik. */
.flow-be {
  opacity: 0;
  transform: translateY(16px);
}
.flow-be.flow-be--bent {
  opacity: 1;
  transform: none;
  transition:
    opacity   520ms cubic-bezier(.22,.61,.36,1) var(--flow-kesl, 0ms),
    transform 520ms cubic-bezier(.22,.61,.36,1) var(--flow-kesl, 0ms);
}

/* Az átmenet-sáv szava „felvillan": kicsit nagyobbról ül a helyére. */
.flow-atmenet-szo.flow-be { transform: scale(1.14); }
.flow-atmenet-szo.flow-be.flow-be--bent { transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Biztonsági háló: a JS ilyenkor ki sem teszi az osztályt, de ha
     valamiért mégis, az elem AZONNAL látszik, mozgás nélkül. */
  .flow-be, .flow-atmenet-szo.flow-be {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .flow-lepes.flow-be::before {
    transform: scaleY(1) !important; transition: none !important;
  }
}
@media print {
  .flow-be { opacity: 1 !important; transform: none !important; }
  .flow-lepes.flow-be::before { transform: scaleY(1) !important; }
}


/* ══ 8. HORGONY-BIZTOSÍTÉK ══════════════════════════════════════════════════
   Az index.html#tools horgony 21 másik oldal „← Főmenü" gombjának a célja.
   Az index.html `.fpe-sect[id] { scroll-margin-top: 68px }` szabálya ezt
   megadja; ez itt csak biztosíték az ÚJ, id-vel bíró szekciókra.
   ──────────────────────────────────────────────────────────────────────────── */
#folyamat, #jovo, #tools, #anyagok, #zaras { scroll-margin-top: 68px; }


/* ══ 9. 125%-OS ALAPNÉZET 1200 PX FELETT — AZ ÚJ ELEMEKRE ═══════════════════
   A fpe-nagyitas.css generált réteg a MEGLÉVŐ osztályokat skálázza; az itt
   bevezetett új osztályokat nem ismeri. Enélkül a flow szövege 1200 px felett
   halványan kisebb lenne a környezeténél. Ugyanaz a szorzó (1,25), ugyanaz a
   `calc(eredeti * 1.25)` alak, hogy a forrás változása azonnal látszódjon.
   (A 34 px-es sorszám-kör és a szaggatott vonal geometriája SZÁNDÉKOSAN nem
   skálázódik: a nagyítás-réteg sem nyúl width/height-hoz és kerethez.)
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .flow-lepesek        { max-width: calc(700px * 1.25); }
  .flow-lepes          { gap: calc(18px * 1.25); padding-bottom: calc(30px * 1.25); }
  .flow-lepes-szoveg   { font-size: calc(15px * 1.25); }
  .flow-tovabb         { padding-top: calc(34px * 1.25); }

  .flow-atmenet-szo    { padding: 0 calc(20px * 1.25); }

  .flow-pillerek       { max-width: calc(760px * 1.25); gap: calc(12px * 1.25); }
  .flow-piller         { padding: calc(16px * 1.25); gap: calc(10px * 1.25); }
  .flow-piller-cim     { font-size: calc(13px * 1.25); }
  .flow-jovo-atvezeto  { margin-top: calc(30px * 1.25); }
  .flow-biztonsag      { padding: calc(16px * 1.25) calc(24px * 1.25); gap: calc(12px * 1.25); }
  .flow-biztonsag-szo  { font-size: calc(15px * 1.25); }
  .flow-biztonsag-ala  { font-size: calc(13.5px * 1.25); }

  .fpe-flip-lap        { padding: calc(16px * 1.25) calc(18px * 1.25); }
  .fpe-flip--aktiv .fpe-flip-lap { padding: calc(18px * 1.25); }
  .fpe-flip--aktiv .fpe-flip-belso { min-height: calc(150px * 1.25); }
  .fpe-flip--aktiv .fpe-flip-lap--elol .fpe-flip-cim { font-size: calc(15px * 1.25); }
  .fpe-flip-cim        { font-size: calc(13.5px * 1.25); gap: calc(8px * 1.25); }
  .fpe-flip-szoveg     { font-size: calc(12.5px * 1.25); }
  .fpe-flip-link       { font-size: calc(12px * 1.25); }
  .fpe-flip-megjegyzes { font-size: calc(12px * 1.25); }
  .fpe-flip--aktiv .fpe-flip-gomb { font-size: calc(11.5px * 1.25); }
}
