/* ═══════════════════════════════════════════════════════════════════════════
   fpe-ui2d.css — FPE Ecosystem, UI 2. kör / D blokk
   Létrehozva: 2026-07-26
   Breznai András · breznaiandras.com

   MIT TARTALMAZ
   ─────────────
   1. KALKULÁTOR-FŐSZÁM  (39-es fájl 4.4)
      Egy domináns eredmény panelenként — nagy szám, arany keret,
      számláló-animáció —, a többi sor halkabb alátámasztás.
   2. ESETTANULMÁNY-LAPOZÓ  (39-es fájl 3.8, 37-es portolási spec)
      Az egymásra rétegzett „pakli" carousel vanilla CSS-ben.

   MIÉRT KÜLÖN FÁJL
   ────────────────
   Az A/B/C körök eredményei (fpe-temak.css, fpe-ui2b.*, fpe-ui2c.*) érintetlenek
   maradnak, hogy a D blokk egyetlen fájlpár törlésével visszavonható legyen.

   SZÍN-SZERZŐDÉS
   ──────────────
   Egyetlen fix hex sincs benne: minden szín a fpe-temak.css tokenjeiből jön,
   tehát mindkét felületi módban működik. A FŐSZÁM SZÍNÉT SEM ÍRJUK ÁT: az arany
   a KERET, nem a szám — a szám megtartja az oldal saját, már bemért színét
   (a 2D kör kontraszt-mérése szerint mind AA).

   VISSZAVONÁS
   ───────────
   Töröld a <link ... fpe-ui2d.css> és <script ... fpe-ui2d.js> sorokat.
   A kalkulátorok visszaállnak a korábbi, egyenrangú eredmény-soraikra; a
   lapozó helyén a statikus kártyák maradnak (lásd fpe-ui2d.js 2. szakasz).

   Kapcsolódó: 39_UI_Elem_Leltar_es_Tervezesi_Dontesek_2026-07-26,
   37_Reviews_Carousel_Portolasi_Spec_2026-07-26,
   44_Claude_Code_Prompt_UI_Kor2D_Zaras_2026-07-26
   ═══════════════════════════════════════════════════════════════════════════ */


:root {
  /* A rugó CSS-ben — a 37-es spec 4. pontja számolta ki az eredeti
     motion/react spring-ből (stiffness 250, damping 20, mass 0.5 →
     ω₀ = 22,36 rad/s, ζ = 0,894, max. túllövés 1,0014). */
  --fpe-rugo: cubic-bezier(0.22, 1, 0.36, 1);
  --fpe-rugo-ido: 280ms;

  /* Arany keret-erősség. A --accent-gold szövegre bemért, sötét arany
     (világosban #8a5e12); keretként ez adja a legtisztább jelet. */
  --fpe-arany-keret: 2px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* 300 ms-ra mintavételezve az analitikus rugó-megoldásból (37-es spec 4/a) */
    --fpe-rugo: linear(0, 0.0331, 0.1122, 0.2144, 0.3244, 0.4324, 0.5325, 0.6219,
      0.6991, 0.7644, 0.8183, 0.8622, 0.8972, 0.9247, 0.946, 0.9622, 0.9743,
      0.9832, 0.9897, 0.9942, 0.9973, 0.9994, 1.0007, 1.0014, 1);
    --fpe-rugo-ido: 300ms;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. KALKULÁTOR-FŐSZÁM  (39-es fájl 4.4)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1.0 MIÉRT ATTRIBÚTUM ÉS NEM JAVASCRIPT

   A kiemelés vezérlése két attribútummal történik, közvetlenül a markupban:

       data-fpe-foszam   — EZ a panel válasza (egy dobozban pontosan egy)
       data-fpe-alatam   — ez eddig `.big` volt, de mostantól alátámasztás

   Azért attribútum, és azért nem JS teszi rá futásidőben:
   a kalkulátorok az eredmény-dobozokat `innerHTML`-lel ÚJRAÉPÍTIK minden
   csúszka-mozdulatra, tehát bármilyen JS-ből adott osztály azonnal elvész.
   Az attribútum viszont a template-stringben van, tehát minden újrarendereléskor
   visszakerül — nem kell MutationObserver, és nem is ütközhet a B kör
   számláló-animációjával (fpe-arany.js 3. szakasza), ami ugyanezeket a
   csomópontokat írja.

   A SZÁMLÁLÓ-ANIMÁCIÓT SEM ÍRJUK ÚJRA: a 4.4 pont harmadik követelményét
   (számláló-animáció) a B kör `fpe-arany.js`-e már megvalósította. Ahol a
   főszám kívül esett a figyelt gyökereken (`.highlight-box`, `.burn-box`),
   ott a meglévő `data-fpe-anim-cel` beakasztóval kapcsoltuk be — új
   animáció-motor nélkül.
   ─────────────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────────────
   1.1 A KERET
   A keret arra az elemre kerül, ami a főszámot KÖRÜLZÁRJA — sor, kiemelt
   doboz vagy egy külön erre jelölt blokk.

   Miért nincs arany HÁTTÉR-tint: a sorok többsége már egy kék tinten ül
   (--card2 + 12% accent = #d5e1ee világosban). Egy további arany tint alá
   vinné a szöveget a 4,5:1 alá — a 2D kör kontraszt-mérése pont ezt fogta meg
   a babaváró státusz-sorain. A hangsúlyt ezért a keret + a méret adja.

   `:has()` nélküli böngészőn a keret nem jelenik meg, de a nagyobb szám igen —
   tehát a hierarchia akkor is megvan. (A `:has()` amúgy is használatban van
   már: fpe-temak.css 5. szakasz.)
   ─────────────────────────────────────────────────────────────────────────── */
.result-row:has([data-fpe-foszam]),
.calc-result-row:has([data-fpe-foszam]),
.fpe-foszam-blokk:has([data-fpe-foszam]) {
  border: var(--fpe-arany-keret) solid var(--accent-gold) !important;
  border-radius: 10px;
  padding: 10px 12px !important;
  margin: 10px 0 !important;
}

.highlight-box:has([data-fpe-foszam]),
.burn-box:has([data-fpe-foszam]) {
  border-color: var(--accent-gold) !important;
  border-width: var(--fpe-arany-keret) !important;
  border-style: solid !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.2 A SZÁM
   Nem adunk neki új színt (lásd a fájl fejlécének szín-szerződését), csak
   méretet és súlyt. A `!important` azért kell, mert a kalkulátorok saját
   `.result-val.big { font-size: 20px }` szabályai ugyanolyan specifikusak,
   viszont az oldalak saját <style> blokkja később tölt be, mint ez a fájl.
   ─────────────────────────────────────────────────────────────────────────── */
/* Minden főszám tabuláris számjegyet kap, hogy a számláló-animáció alatt ne
   ugráljon a szélesség. Ez az EGYETLEN szabály, ami minden főszámra érvényes. */
[data-fpe-foszam] { font-variant-numeric: tabular-nums; }

/* A MÉRETET csak ott emeljük, ahol a főszám egy NORMÁL SÚLYÚ eredmény-sor
   értéke volt (15–20 px). Ahol a szám már eleve 26–40 px-es kiemelt elem
   (.hl-val, .burn-val, .amount-big, .cost, .fpe-foszam-szam, #pfFinalVal),
   ott nem nyúlunk hozzá — különben LEKICSINYÍTENÉNK a főszámot, ami pont az
   ellenkezője a 4.4 pont szándékának. */
.result-val[data-fpe-foszam],
.value[data-fpe-foszam],
.calc-result-val[data-fpe-foszam] {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}

@media (max-width: 560px) {
  .result-val[data-fpe-foszam],
  .value[data-fpe-foszam],
  .calc-result-val[data-fpe-foszam] { font-size: 22px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   1.3 AZ ALÁTÁMASZTÁS
   Ami eddig `.big` volt ugyanabban a dobozban, visszahalkul a többi sor
   szintjére. A SZÍN NEM VÁLTOZIK — a „veszteség piros", „megtakarítás zöld"
   jelentés megmarad, csak a méret-hierarchia áll helyre.
   ─────────────────────────────────────────────────────────────────────────── */
[data-fpe-alatam].result-val,
[data-fpe-alatam].value,
[data-fpe-alatam].calc-result-val {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* A befektetés-kalkulátor két versenyző-kártyája (D2.3): MARADNAK, de
   alátámasztásként — a főszám a kettő közötti különbség. */
.amount-big[data-fpe-alatam] { font-size: 26px !important; }
@media (max-width: 560px) {
  .amount-big[data-fpe-alatam] { font-size: 22px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   1.4 ÖNÁLLÓ FŐSZÁM-DOBOZ
   Ott, ahol nincs mibe belekapaszkodni (befektetés-kalkulátor: a Kata/Kálmán
   különbség-sor most jön létre). Tömör --card felület: ez a legkontrasztosabb
   háttér, amit adhatunk, tehát a szám itt biztosan AA.
   ─────────────────────────────────────────────────────────────────────────── */
.fpe-foszam {
  display: block;
  text-align: center;
  background: var(--card);
  border: var(--fpe-arany-keret) solid var(--accent-gold);
  border-radius: 12px;
  padding: 16px 14px;
  margin: 16px 0;
}

.fpe-foszam-cimke {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.fpe-foszam-szam {
  display: block;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent-text, var(--accent));
  font-variant-numeric: tabular-nums;
}

.fpe-foszam-alcimke {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .fpe-foszam-szam { font-size: 30px; }
  .fpe-foszam { padding: 14px 12px; }
}

/* Nyomtatásban az arany keret szürkébe fordul, de a hierarchia megmarad. */
@media print {
  .fpe-foszam,
  .result-row:has([data-fpe-foszam]),
  .calc-result-row:has([data-fpe-foszam]),
  .fpe-foszam-blokk:has([data-fpe-foszam]),
  .highlight-box:has([data-fpe-foszam]),
  .burn-box:has([data-fpe-foszam]) { border-color: #666 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   1.5 A D4 SCREENSHOT-KÖR EGYETLEN REGRESSZIÓ-JAVÍTÁSA

   MIT FOGOTT MEG A MÉRÉS
   A C kör a láblécnek is adott Flow-hátteret (`footer-asztal`, állókép).
   A `<footer>` viszont MIND A 13 oldalon egy 600–760 px széles, 44–136 px
   magas, KÖZÉPRE ZÁRT doboz — mérve. Az `object-fit: cover` ezért 5,6:1 és
   10,7:1 közötti levágást csinál a szobabelsőből: a lámpa és az ablakkeret
   felismerhető marad, de egy vékony, oldal közepén lebegő sávban. Ez nem
   atmoszférának látszik, hanem elrontott képnek. (Legjobban a rövid
   `uzenet.html`-en, ahol a sáv a lap alján egyedül áll.)

   MIÉRT ÍGY JAVÍTJUK
   A C kör szándéka (halk atmoszféra a lábléc mögött) érvényes; a hiba a
   FELBONTHATATLAN KIVÁGÁS. Ezért nem vesszük el a képet és NEM nyúlunk a
   fpe-ui2c.js/.css-hez: itt, additív szabállyal elmossuk annyira, hogy
   textúrának olvasódjon, ne fotónak. A scale a blur szélein keletkező
   áttetsző csíkot tolja ki a látható területről.
   VISSZAVONÁS: töröld ezt az egy szabályt — a kép visszaáll élesre.
   ─────────────────────────────────────────────────────────────────────────── */
footer.fpe-video-blokk > .fpe-vhatter > img,
footer.fpe-video-blokk > .fpe-vhatter > video {
  filter: blur(16px) saturate(0.5);
  transform: scale(1.15);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ESETTANULMÁNY-LAPOZÓ  (39-es fájl 3.8 · 37-es portolási spec)

   🔴 COMPLIANCE: ezek ESETTANULMÁNYOK, nem ügyfélvélemények és nem ajánlások.
   Sem a class-nevekben, sem a feliratokban nem szerepel „vélemény",
   „testimonial" vagy „ajánlás" (37-es spec 0/a pont).

   🔴 NINCS autoPlay. A 35-ös terv 3.4 pontja tiltja az automatikus carouselt,
   ezért a portban nem is létezik ilyen kapcsoló (37-es spec 0/b pont).
   ═══════════════════════════════════════════════════════════════════════════ */

.fpe-esetek {
  --fpe-eset-elmosas: 2px;      /* 37-es spec: blur = activeIndex > index ? 2 : 0 */
  --fpe-eset-tolas: -30px;      /* FRAME_OFFSET = -30 */
  position: relative;
  max-width: 720px;
  margin: 28px auto;
}

/* A 35-ös terv 2.1 pontja a strukturális elemeknek 900–1040 px-ig engedi a
   kitörést az olvasási sávból; a pakli-metafora ennél kevesebbel is elfér,
   ezért csak 720 px-ig nyílik — így a kártyán a magyar szöveg sem tördelik
   szét (37-es spec 6. pont). */
@media (min-width: 900px) {
  .fpe-esetek { max-width: 760px; }
}

.fpe-esetek:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 6px;
  border-radius: 14px;
}

.fpe-esetek-cim {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
  text-align: center;
}

/* A 08b előszavának szó szerinti mondata — ez tartja a keretet
   esettanulmánynál, nem ajánlásnál (37-es spec 0/a). */
.fpe-esetek-alcim {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 6px;
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   2.1 A PAKLI
   A kártyák egymás FÖLÖTT ülnek, azonos középpontra igazítva. A konténer
   magasságát a legmagasabb kártya adja: a nem aktív kártyák is a rácsban
   maradnak (grid-area: 1/1), így nincs fix magasság — a 37-es spec 6. pontja
   ezt kifejezetten kéri, mert a magyar szöveg 10–15%-kal hosszabb.
   ─────────────────────────────────────────────────────────────────────────── */
.fpe-esetek-pakli {
  display: grid;
  /* Hely a mögöttes kártyák kilátszó felső élének. A transform-origin
     `center top`, tehát a k-adik kártya FELSŐ ÉLE pontosan k × 30 px-szel
     kerül feljebb (a skálázás csak lefelé húzza össze). A pontos értéket a
     fpe-ui2d.js számolja a kártyaszámból; a 66px a fallback 3 kártyára. */
  padding-top: var(--fpe-eset-fejtav, 66px);
}

.fpe-eset {
  grid-area: 1 / 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 18px;
  box-shadow: 0 10px 30px var(--shadow);
  transform-origin: center top;
  transition:
    transform var(--fpe-rugo-ido) var(--fpe-rugo),
    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* 37-es spec: a mögöttes kártya ne fogjon kattintást */
  pointer-events: none;
}

.fpe-eset[data-fpe-aktiv="1"] { pointer-events: auto; }

/* A 37-es spec 6. pontja miatt NINCS backdrop-filter: minden kártya üveg
   lenne, a 20-as irányelvek 2. pontja pedig max. 2–3 üveg-elemet enged
   nézetenként, hosszabb szövegblokkon pedig egyáltalán nem. A filter:blur()
   marad, de az egyszerre legfeljebb egy elemen van (az éppen elhagyotton). */

.fpe-eset-idezojel {
  font-size: 44px;
  line-height: 0.7;
  font-weight: 900;
  /* Az egyetlen hely, ahol az arany dísz-szerepben áll, nem szövegként —
     ezért mehet alfával (37-es spec 7. pont). */
  color: var(--accent-gold);
  opacity: 0.22;
  display: block;
  margin-bottom: 4px;
}

.fpe-eset-szoveg {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.fpe-eset-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.fpe-eset-alany {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.fpe-eset-szam {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text, var(--accent));
}

/* A halk „esettanulmány" címke — a 37-es spec 3. pontja írja elő, hogy a
   kártya ne olvasódjon idézetnek vagy ajánlásnak. */
.fpe-eset-cimke {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   2.2 VEZÉRLŐK
   44×44 px tap-terület (20_UI_Design_Iranyelvek 6. pont) átlátszó háttéren,
   benne a látható korong / pötty. Az eredeti 28×28-as gombja és 8 px-es
   pöttye ehhez kevés volt (37-es spec 5. pont).
   ─────────────────────────────────────────────────────────────────────────── */
.fpe-esetek-vezerlo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
}

.fpe-esetek-nyil {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
}

.fpe-esetek-nyil span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Vezérlő kerete: a WCAG 1.4.11 szerint ≥3:1 — ezért --border-strong,
     nem a díszítő --border (lásd fpe-temak.css 1. szakasz). */
  border: 1px solid var(--border-strong);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.fpe-esetek-nyil svg { width: 14px; height: 14px; display: block; }

/* Arany megerősítés hoveren ÉS tapre — a 20-as irányelvek 3. pontja mindkettőt
   előírja; az eredeti komponensben csak `hover:` volt, ami mobilon soha nem
   látszik. */
.fpe-esetek-nyil:hover span,
.fpe-esetek-nyil:focus-visible span,
.fpe-esetek-nyil:active span,
.fpe-esetek-nyil.fpe-arany-tap span {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: var(--tint-surface-2);
}

.fpe-esetek-nyil:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 8px;
}

.fpe-esetek-nyil[disabled] { opacity: 0.35; cursor: default; }

.fpe-esetek-pontok {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fpe-esetek-pont {
  width: 26px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.fpe-esetek-pont i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Nem-szöveges állapotjelző → WCAG 1.4.11, ≥3:1 a lap hátterén.
     A 37-es spec 7. pontja szerint az eredeti rgba(accent,.3) csak ~1,3:1;
     a --border-strong tömör értéke mindkét módban 3:1 felett van. */
  background: var(--border-strong);
  transition: background 0.2s, transform 0.2s;
}

.fpe-esetek-pont[aria-current="true"] i {
  background: var(--accent);
  transform: scale(1.35);
}

.fpe-esetek-pont:hover i,
.fpe-esetek-pont:focus-visible i,
.fpe-esetek-pont:active i,
.fpe-esetek-pont.fpe-arany-tap i { background: var(--accent-gold); }

.fpe-esetek-pont:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 0;
  border-radius: 6px;
}

/* A lapozás állapota képernyőolvasónak (37-es spec 5. pont) */
.fpe-esetek-elo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   2.3 CSÖKKENTETT MOZGÁS
   Az eredeti useReducedMotion csak a scale/y-t nullázta. A 37-es spec 5.
   pontja szerint a portban az elmosás és az áttűnés is essen ki, a lapozás
   pedig legyen azonnali.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fpe-eset {
    transition: none !important;
    filter: none !important;
  }
  .fpe-esetek-pont i { transition: none; }
}

/* JS nélkül: a pakli egymás alatti kártyákként olvasható, a vezérlők eltűnnek.
   Így a tartalom (és a kereső számára a szöveg) sosem vész el. */
.fpe-esetek:not(.fpe-esetek--js) .fpe-esetek-pakli {
  display: block;
  padding-top: 0;
}
.fpe-esetek:not(.fpe-esetek--js) .fpe-eset {
  pointer-events: auto;
  margin-bottom: 14px;
  box-shadow: none;
}
.fpe-esetek:not(.fpe-esetek--js) .fpe-esetek-vezerlo { display: none; }

/* Nyomtatás: minden eset egymás alatt, keret nélkül, vezérlők nélkül. */
@media print {
  .fpe-esetek-pakli { display: block !important; padding-top: 0 !important; }
  .fpe-eset {
    grid-area: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 10px;
  }
  .fpe-esetek-vezerlo { display: none !important; }
}