/* ══════════════════════════════════════════════════════════════════════════
   fpe-ui2c.css — UI 2. kör / C blokk: oldaltípusok, média, lapozó
   Létrehozva: 2026-07-26 · Breznai András · breznaiandras.com

   MIT TARTALMAZ (a 39_UI_Elem_Leltar pontszámaival):
     1. Flow háttérvideók / állóképek     — .fpe-vhatter (7.6)
     2. Arany haladás-sáv                 — .fpe-halado (3.2 + 5.6, KÖZÖS)
     3. Bizalmi blokk nyitható részletek  — .fpe-bizalom-* (3.5)
     4. Cikk-tartalomjegyzék              — .fpe-toc (5.5)
     5. Cikk sticky CTA                   — .fpe-sticky-cta (5.7)
     6. Köszönő oldalak következő lépése  — .fpe-kovetkezo (6.5)

   BETÖLTÉSI HELY: a fpe-ui2b.css UTÁN, a fpe-temak.css ELŐTT.
     - a fpe-arany.css marad az "utolsó szó" a gomb-megerősítésen,
     - a fpe-temak.css marad az "utolsó szó" a mód-függő tokeneken.
     Ez a fájl egyetlen gomb-hover/active szabályt sem ír felül.

   🔴 NO-JS SZERZŐDÉS: ez a fájl egyetlen darab tartalmat sem rejt el
   magától. Minden összecsukás `[data-fpe-csuk]`-hoz van kötve, amit
   KIZÁRÓLAG a fpe-ui2c.js tesz ki futásidőben. Ha a JS nem fut le, a
   bizalmi blokk kinyitva marad, a cikkek teljes szövege látszik, a
   háttérvideók helyén pedig az állókép ül.

   🔴 A HÁTTÉRVIDEÓK FÖLÖTTI SZÖVEG mindkét felületi módban VILÁGOS. A
   .fpe-video-blokk saját szín-kontextust nyit (lásd 1/c), mert egy sötét
   videó fölött a világos mód sötét szövege olvashatatlan lenne.

   MOZGÁS: minden animáció lekapcsol prefers-reduced-motion alatt.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Az arany megerősítés-nyelv szándékosan mód-független (lásd
     fpe-arany.css fejlécét): ez "jó irány"-jel, nem felület-szín. */
  --fpe-arany: #d9a544;
  --fpe-arany-halk: rgba(217, 165, 68, 0.28);

  /* A haladás-sáv vastagsága. Egy helyen állítható, mert a HVCO-k
     lépés-jelzője és a cikkek olvasási progresszje UGYANAZ a komponens
     (39-es fájl 3.2 hivatkozik az 5.6-ra). */
  --fpe-halado-v: 3px;
}


/* ══ 1. FLOW HÁTTÉRVIDEÓK ÉS ÁLLÓKÉPEK (39-es fájl 7.6) ═══════════════════

   MIÉRT NINCS <video> A MARKUPBAN:
   a markup CSAK az állóképet tartalmazza; a <video>-t a fpe-ui2c.js
   szúrja be, és csak akkor, ha
       (a) a nézet legalább 900 px széles       — mobilon sávszélesség,
       (b) prefers-reduced-motion: no-preference,
       (c) a látogató nem "adatspórolós" (navigator.connection.saveData).
   Így mobilon és JS nélkül EGYETLEN BÁJT videó sem töltődik le — a
   7.6 "mobilon állókép" feltétele nem CSS-trükkel, hanem azzal teljesül,
   hogy a kérés el sem indul.

   A KÉT FÁTYOL-RÉTEG (7.6 kontraszt-feltétel):
   megmértük mind az 5 klip MINDEN kockáját (240/192 kocka, 640 px-re
   skálázva). Mindegyikben van kiégett, ~1,0 relatív luminanciájú pixel
   (utcai lámpa, bokeh-részecske, asztali lámpa). Ha a TELJES képre olyan
   fátyol kerülne, ami ott is AA-t ad, az a videó nagy részét elnyelné.
   Két réteg van, együtt 0,88 effektív alfával:
     ::after  — teljes képre, 0,55: ez adja a "prémium, sötét" alaphangot,
                és önmagában NEM elég a szöveg alá;
     ::before — 0,7333, szintén a teljes képre.
   Együtt: 1-(1-0,55)(1-0,7333) = 0,88. A PONTOS levezetés és a mérési
   módszer a lenti 1/d szakaszban van — ott derül ki az is, miért NEM
   gradiens, és miért volt az első, screenshot-alapú mérés hibás.
   ────────────────────────────────────────────────────────────────────── */

/* a) A gazda-elem. Ez tartja a rétegsorrendet. */
.fpe-video-blokk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* A tartalom MINDIG a fátyol fölött ül. */
.fpe-video-blokk > *:not(.fpe-vhatter) { position: relative; z-index: 1; }

/* b) A médiaréteg. */
.fpe-vhatter {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #0b0e18;      /* amíg a kép betölt, ne villanjon fehéret */
  pointer-events: none;     /* a videó soha ne fogjon kattintást */
}

.fpe-vhatter > img,
.fpe-vhatter > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* A videó és az állókép PONTOSAN egymáson ül, hogy a csere ne ugorjon. */
  position: absolute;
  inset: 0;
}

/* A videó a poszter FÖLÉ kerül, és beúszik — így nincs fekete villanás,
   amíg az első kocka megjön. */
.fpe-vhatter > video {
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms ease;
}
.fpe-vhatter > video[data-fpe-lat="1"] { opacity: 1; }

/* c) Teljes fátyol — a "prémium sötét" alaphang. */
.fpe-vhatter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(10, 13, 25, 0.55);
}

/* d) Szöveg-scrim.

   ⚠️ EZ AZ ÉRTÉK MÉRÉSSEL LETT BEÁLLÍTVA, NEM SZEMRE — és egy korábbi,
   HIBÁS mérést javít. Első nekifutásra screenshotból mértünk, ami AA-t
   mutatott; kiderült, hogy a headless Chrome a <video>-t GPU-kompozit
   rétegen festi, amit a screenshot NEM fog be (4 különböző időpont képe
   bitre azonos volt, és azonos a csak-poszteres esettel). Vagyis a poszter
   lett lemérve, nem a videó.

   A javított mérés a lapon belül canvasra rajzolja a videót (ugyanazzal az
   object-fit: cover matekkal), és a szöveg PONTOS téglalapjában olvassa ki
   a legvilágosabb pixelt, 24 mintavétellel a klip hosszán. Eredmény: a
   hero-szövegek téglalapjában a nyers luminancia eléri az 1,0-t (bokeh-
   részecske, utcai lámpa) — tehát a legrosszabb eset tényleg a kiégett
   fehér, nem elméleti aggály.

   Kiszámolva, nyers L = 1,0 mellett, A effektív fátyol-alfával:
       komp = (1 - A) · 1,0 + A · 0,0055
   AA-hoz (4,5:1) #e8ecf5 szöveggel (L = 0,830) komp ≤ 0,1748 kell,
   ebből A ≥ 0,871. Ezért a beállítás A = 0,88:
       1 - (1 - 0,55)(1 - 0,7333) = 0,88
   Így a videóból 12% látszik át — a bokeh-részecske (komp 0,125) még
   mindig jól elkülönül a háttértől (komp 0,008), tehát a mozgás megmarad,
   csak halk. Ez a 21-es fájl 1. pontjának szándéka is: "diszkrét,
   hipnotikus mozgás, ami a szöveg olvashatóságát nem zavarja".

   MIÉRT EGYENLETES, NEM GRADIENS: az első verzió 62% alatt 0,30-ra
   halványult, és pont ott bukott meg a HVCO2 .proof-val (1,67:1) és
   .proof-sub (1,53:1) — a hero szövege ugyanis a szekció ALJÁIG ér. */
.fpe-vhatter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(10, 13, 25, 0.7333);
}

/* A kalkulátor-atmoszféra és a lábléc: a 21-es fájl 6. pontja kifejezetten
   "nagyon alacsony kontraszt"-ot kér, hogy a FORM maradjon a domináns elem.
   Ugyanaz a 0,88 effektív fátyol — a különbség csak az, hogy itt a média
   eleve halkabb, és nincs mögötte nagy tipográfia. */
.fpe-vhatter--halk::before { background: rgba(10, 13, 25, 0.7333); }
.fpe-vhatter--halk::after  { background: rgba(10, 13, 25, 0.55); }

/* e) SAJÁT SZÍN-KONTEXTUS a médiaréteg fölé.
   🔴 Ez a fájl legfontosabb szabálya. A site két felületi módban fut; a
   világos módban a --text-primary #10131f (majdnem fekete). Egy sötét
   videó fölött az olvashatatlan. A videós blokk ezért NEM örökli a mód
   szövegszíneit, hanem sajátot nyit — így a hero mindkét módban azonosan,
   világos szöveggel jelenik meg.

   ⚠️ A PALETTA SZÁNDÉKOSAN KÉT SZÍNRE VAN HÚZVA. A mérés megmutatta, hogy
   a kiégett (L=1,0) pixel fölött a 0,88-as fátyollal csak a nagyon világos
   szöveg megy át AA-n:
       #f5f7fb (L 0,929)  →  5,60:1   ✓
       #e8ecf5 (L 0,830)  →  5,03:1   ✓
       #d5dae6 (L 0,660)  →  4,06:1   ✗  — ezért NEM használjuk
       #aab3c5 (L 0,433)  →  2,31:1   ✗  — ezért NEM használjuk
   Tehát a --text-muted a videó fölött NEM halványabb, hanem azonos a
   másodlagossal. A hierarchiát itt a méret és a vastagság viszi, nem a
   szín — ez a videós blokkok szándékos eltérése a lap többi részétől. */
.fpe-video-blokk {
  --text-primary:   #f5f7fb;
  --text-secondary: #e8ecf5;
  --text-muted:     #e8ecf5;
  --border:         rgba(255, 255, 255, 0.16);
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.34);
  color: var(--text-primary);
}

/* A hero-szövegek egy része saját, fix színt hoz a lap saját CSS-éből
   (rgb(170,179,197), rgb(176,184,200)…), ami a videó fölött 2,31:1 volt.
   Ezeket itt visszük fel a mért, biztonságos másodlagos színre. */
.fpe-video-blokk .hero-byline,
.fpe-video-blokk .hero-statement,
.fpe-video-blokk .hero-subtitle,
.fpe-video-blokk .hero-text,
.fpe-video-blokk .proof-sub,
.fpe-video-blokk .disclaimer,
.fpe-video-blokk .fpe-vkis {
  color: #e8ecf5;
}
.fpe-video-blokk .hero-title,
.fpe-video-blokk h1,
.fpe-video-blokk h2 { color: #f5f7fb; }

/* ⚠️ AKCENTUS-SZÍNEK A MÉDIA FÖLÖTT.
   A márka kék (#75b8e7, L 0,455) és az arany (#d9a544, L 0,421) a kiégett
   pixel fölött 2,7:1 körül van — egyik sem menthető fátyollal anélkül,
   hogy a videó teljesen eltűnne. Ezért ezek az elemek NEM a nyers médián
   ülnek, hanem saját, tömör sötét chipen. A chip fölött ugyanez a kék
   6,99:1 — és a márkaszín megmarad, nem kell "kifehéríteni". */
.fpe-video-blokk .hero-badge,
.fpe-video-blokk .proof-item,
.fpe-video-blokk .hero-proof-strip > * {
  background: rgba(10, 13, 25, 0.86);
  border-radius: 8px;
  padding: 6px 11px;
  backdrop-filter: none;    /* a 20-as irányelv 2. pontja: nincs üveg itt */
}

/* f) Ha a JS nem fut le VAGY mobil a nézet: marad az állókép. Nincs
   külön szabály — a markupban eleve csak az <img> van. */


/* ══ 2. ARANY HALADÁS-SÁV — KÖZÖS KOMPONENS (3.2 ÉS 5.6) ══════════════════

   Egyetlen komponens szolgálja ki a HVCO-k lépés-jelzőjét és a cikkek
   olvasási progresszjét, mert a 39-es fájl 3.2 pontja kifejezetten
   konzisztenciát kér a két oldaltípus között. A különbség csak az, MI
   tölti fel (lásd fpe-ui2c.js): HVCO-n a lépés sorszáma, cikken a
   görgetés aránya.
   ────────────────────────────────────────────────────────────────────── */

.fpe-halado {
  position: fixed;
  top: var(--fpe-fonav-h, 52px);
  left: 0;
  right: 0;
  height: var(--fpe-halado-v);
  z-index: 90;              /* a nav (100) ALATT, a tartalom fölött */
  background: rgba(127, 140, 170, 0.16);
  pointer-events: none;
}

.fpe-halado-sav {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    rgba(217, 165, 68, 0.75) 0%,
    var(--fpe-arany) 65%,
    #f0c46a 100%);
  box-shadow: 0 0 8px rgba(217, 165, 68, 0.5);
  transition: width 220ms ease-out;
}

/* A sáv maga dekoratív (aria-hidden). A "3 / 6. oldal" információ NEM
   veszhet el a képernyőolvasónak — azt a .fpe-halado-sr viszi tovább,
   ugyanazzal a szöveggel, amit a régi .progress-label mondott. */
.fpe-halado-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A régi pontsor + "1 / 6. oldal" felirat helyét ez a sáv veszi át. A
   .progress-wrap-ot NEM töröljük a markupból (11 HVCO × több hivatkozás
   a saját showPage()-ükben), csak elrejtjük — és KIZÁRÓLAG akkor, ha a
   JS tényleg felépítette a sávot. */
[data-fpe-halado="kesz"] .progress-wrap { display: none; }

@media print {
  .fpe-halado { display: none; }
}


/* ══ 3. BIZALMI BLOKK — RÖVID MAG + NYITHATÓ RÉSZLETEK (3.5) ══════════════

   🔴 COMPLIANCE. A jogi tartalom egyetlen szava sem változik és nem
   rövidül — kizárólag átrendeződik:
     · MINDIG LÁTHATÓ marad a .fpe-kiall (név, MNB-nyilvántartási szám,
       a két bevezető mondat) és a .fpe-folyamat (mi történik, ha
       jelentkezel),
     · NYITHATÓBA kerül a .fpe-transzp ("Beszéljünk arról, miből élek")
       és a .fpe-szkeptikus ("Amire most gondolsz") — pontosan az a két
       blokk, amit a 39-es fájl 3.5 pontja megnevez.

   ⚠️ NEM display:none. A részletek `max-height:0; overflow:hidden`
   mögött ülnek, tehát BENN MARADNAK a renderfában: a keresők indexelik,
   a képernyőolvasók felolvassák. Ellenőrizve: a .fpe-transzp és a
   .fpe-szkeptikus egyetlen oldalon SEM tartalmaz fókuszálható elemet
   (0 link, 0 gomb, 0 mező mind a 15 oldalon), tehát összecsukott
   állapotban sem keletkezik "láthatatlan Tab-csapda".
   ────────────────────────────────────────────────────────────────────── */

.fpe-bizalom-nyit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;                 /* 20-as irányelv 6. pont */
  padding: 11px 14px;
  margin: 14px 0 0;
  border: 1px solid var(--border, rgba(127, 140, 170, 0.22));
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary, #3b4356);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.fpe-bizalom-nyit-jel {
  flex: none;
  width: 18px; height: 18px;
  transition: transform 220ms ease;
}
.fpe-bizalom-nyit[aria-expanded="true"] .fpe-bizalom-nyit-jel {
  transform: rotate(180deg);
}

/* Az összecsukás KIZÁRÓLAG akkor él, ha a JS kitette a data-fpe-csuk-ot.
   JS nélkül ez a szabály nem illeszkedik → minden látszik. */
.fpe-bizalom-reszletek[data-fpe-csuk] {
  max-height: 0;
  overflow: hidden;
  /* A max-height animálása "ugrik" nagy tartalomnál; a láthatóság
     kereszt-fade-je elfedi. */
  transition: max-height 380ms ease, opacity 260ms ease;
  opacity: 0;
}
.fpe-bizalom-reszletek[data-fpe-csuk="nyitva"] {
  max-height: 4000px;
  opacity: 1;
}

@media print {
  /* Nyomtatásban MINDEN jogi szöveg látszik, összecsukástól függetlenül. */
  .fpe-bizalom-reszletek[data-fpe-csuk] { max-height: none; opacity: 1; }
  .fpe-bizalom-nyit { display: none; }
}


/* ══ 4. CIKK-TARTALOMJEGYZÉK (5.5) ═══════════════════════════════════════

   A <h2>-kből épül, JS-ből. Ha a JS nem fut, egyszerűen nincs jegyzék —
   a cikk teljes szövege attól még olvasható.
   ────────────────────────────────────────────────────────────────────── */

.fpe-toc {
  margin: 22px 0 30px;
  padding: 16px 18px;
  border: 1px solid var(--border, rgba(127, 140, 170, 0.22));
  border-left: 3px solid var(--fpe-arany-halk);
  border-radius: 10px;
  background: var(--card, rgba(127, 140, 170, 0.05));
}

.fpe-toc-cim {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted, #5a6273);
}

.fpe-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fpe-toc;
}

.fpe-toc li { counter-increment: fpe-toc; }

.fpe-toc a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 44px;                 /* érintőfelület, 20-as irányelv 6. */
  padding: 4px 0;
  color: var(--text-secondary, #3b4356);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
}

.fpe-toc a::before {
  content: counter(fpe-toc) ".";
  flex: none;
  min-width: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--fpe-arany);
  opacity: 0.75;
}

.fpe-toc a:hover,
.fpe-toc a:focus-visible {
  color: var(--text-primary, #10131f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A haladás-sáv és a sticky nav ne takarja a célcímsort ugráskor. */
.fpe-toc-cel {
  scroll-margin-top: calc(var(--fpe-fonav-h, 52px) + var(--fpe-halado-v) + 18px);
}

@media print {
  .fpe-toc { display: none; }
}


/* ══ 5. CIKK STICKY CTA (5.7) ═════════════════════════════════════════════

   ⚠️ A 39-es fájl három feltételt szab: ne takarja a szöveget, legyen
   bezárható, és mobilon ne ütközzön a Kapcsolat-widgettel + a
   cookie-sarokdobozzal (2.2).

   Hogyan teljesül:
     · a --fpe-consent-tav offset EMELI a doboz fölé (ugyanaz a
       konvenció, amit a fpe-consent.js és a fpe-ui2b.js használ),
     · a lebegő Kapcsolat-widget fixen a BAL alsóban ül, ezért a sáv
       mobilon balról 64 px-ről indul (48 px kör + 16 px levegő),
     · a bezárás sessionStorage-ba kerül: ugyanabban a munkamenetben
       nem tér vissza.
   ────────────────────────────────────────────────────────────────────── */

.fpe-sticky-cta {
  position: fixed;
  z-index: 95;                      /* a consent (100000) és a nav alatt */
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  bottom: calc(16px + var(--fpe-fix-gap, 0px) + var(--fpe-consent-tav, 0px));
  width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--border, rgba(127, 140, 170, 0.22));
  border-radius: 12px;
  background: var(--card, #ffffff);
  box-shadow: 0 8px 28px rgba(8, 11, 20, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s 280ms;
}

.fpe-sticky-cta[data-fpe-lat="1"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s;
}

.fpe-sticky-cta-szoveg {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary, #3b4356);
}

.fpe-sticky-cta-gomb {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.fpe-sticky-cta-zar {
  flex: none;
  width: 44px; height: 44px;        /* érintőfelület, a látható X kisebb */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted, #5a6273);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.fpe-sticky-cta-zar:hover,
.fpe-sticky-cta-zar:focus-visible { color: var(--text-primary, #10131f); }

@media (max-width: 720px) {
  .fpe-sticky-cta {
    left: 64px;                     /* a bal alsó Kapcsolat-kör mellett */
    right: 12px;
    width: auto;
    transform: translateY(14px);
    padding: 8px 8px 8px 12px;
    gap: 8px;
  }
  .fpe-sticky-cta[data-fpe-lat="1"] { transform: translateY(0); }
  /* Kis kijelzőn a magyarázó mondat elmarad — a gomb szövege önmagában is
     elmondja, mi történik. */
  .fpe-sticky-cta-szoveg { display: none; }
  .fpe-sticky-cta-gomb { flex: 1 1 auto; justify-content: center; }
}

@media print {
  .fpe-sticky-cta { display: none; }
}


/* ══ 6. KÖSZÖNŐ OLDALAK — KÖVETKEZŐ LÉPÉS (6.5) ══════════════════════════

   ⚠️ "Ne hasson újabb sürgetésnek." Ezért az ajánlás vizuálisan a
   megerősítés ALATT és HALKABBAN ül: nincs arany keret, nincs glow,
   nincs "döntési" (3. szintű) kártya — a 2.7-es hierarchia szerint ezek
   szándékosan 2. szintűek.
   ────────────────────────────────────────────────────────────────────── */

/* ⚠️ EZ A BLOKK SZÁNDÉKOSAN NEM HASZNÁL TÉMA-TOKENT.

   A három köszönő oldal (koszonom / koszonom-konyv / koszonom-visszahivas)
   önhordó, FIXEN SÖTÉT lap: saját hex-színekkel dolgoznak, és nem
   kapcsolnak felületi módot. A fpe-temak.css viszont alapértelmezésben a
   VILÁGOS mód tokenjeit adja — mérve az lett belőle, hogy a var(--card)
   fehér kártyát rakott a sötét lapra (1,00:1), a var(--text-primary) pedig
   majdnem fekete szöveget a sötét háttérre (1,01:1).

   Ezért a komponens itt saját, explicit sötét palettát visz. Ha később
   világos lapra is kellene, akkor kap egy .fpe-kovetkezo--vilagos
   módosítót — de token-öröklésre ezen a három lapon nem lehet építeni.
   Mért értékek a #0f1220 lapon / #1a1d2e kártyán: 18,6:1 · 8,1:1 ·
   16,7:1 · 7,2:1. */
.fpe-kovetkezo {
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fpe-kovetkezo-cim {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.fpe-kovetkezo-alcim {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #a3abb9;
}

.fpe-kovetkezo-racs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fpe-kovetkezo-kartya {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #1a1d2e;
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}

.fpe-kovetkezo-kartya:hover,
.fpe-kovetkezo-kartya:focus-visible {
  border-color: var(--fpe-arany-halk);
  transform: translateY(-1px);
}

.fpe-kovetkezo-kartya-cim {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
}

.fpe-kovetkezo-kartya-le {
  font-size: 13px;
  line-height: 1.55;
  color: #a3abb9;
}


/* ══ 7. MOZGÁS-ÉRZÉKENYSÉG ═══════════════════════════════════════════════
   A JS is ellenőrzi (és pl. a videót el sem kéri), de a CSS-oldali
   felülbírálat marad a biztonsági háló arra az esetre, ha a beállítás
   futás közben változik.
   ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fpe-vhatter > video { transition: none !important; }
  .fpe-halado-sav { transition: none !important; }
  .fpe-bizalom-reszletek[data-fpe-csuk] { transition: none !important; }
  .fpe-bizalom-nyit-jel { transition: none !important; }
  .fpe-sticky-cta {
    transition: opacity 1ms linear, visibility 0s !important;
    transform: translateX(-50%) !important;
  }
  .fpe-kovetkezo-kartya { transition: none !important; }
  .fpe-kovetkezo-kartya:hover,
  .fpe-kovetkezo-kartya:focus-visible { transform: none; }
}