/* ============================================================
   Hello Biztonság — KÖZLEKEDÉSBIZTONSÁG · 4. aloldal stílus
   „E-ROLLER — a fizika nem alkuszik". Minden szabály .kb4 alá
   skópozva, hogy ne ütközzön a témával / Elementorral. A blokkjaidra
   tedd rá a .kb4 wrappert.
   A dinamikus tartalmat (fékút-szimulátor, csapda-kártyák, swipe) a
   kb4-page.js építi fel; a belső kártya-stílus ott, inline van.
   ============================================================ */

.kb4{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A; --amber:#F5B324; --neon:#FF2A4D;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  background:var(--navy); color:var(--cream); font-family:var(--f-body);
}
.kb4 *{box-sizing:border-box}
/* Semmi ne lóghasson ki oldalra a blokkból: swipe közben a kihúzott
   kártya különben megnöveli az oldal szélességét → mobilon fehér csík
   jelenik meg jobb oldalt. A clip nem hoz létre görgetőt (a hidden igen). */
.kb4{overflow-x:clip}
@supports not (overflow-x:clip){ .kb4{overflow-x:hidden} }
.kb4 img{display:block}
.kb4 a{text-decoration:none}
.kb4 button{font-family:inherit}
.kb4 .i{display:inline-flex;align-items:center;justify-content:center}
.kb4 .i svg{width:100%;height:100%;display:block}

/* ---- 01 · Fékút-szimulátor (csúszka) ---- */
.kb4-range{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,#C9EA3D 0%,#F5B324 52%,#FF5A5A 100%);
  outline:none;margin:0;cursor:pointer;
}
.kb4-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#F7F5F0;border:4px solid #003153;
  box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:grab;
}
.kb4-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.06)}
.kb4-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#F7F5F0;border:4px solid #003153;
  box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:grab;
}
.kb4-range::-moz-range-track{background:transparent}
.kb4-chip{cursor:pointer;transition:transform .12s,background .16s,border-color .16s,color .16s}
@media (hover:hover) and (pointer:fine){.kb4-chip:hover{transform:translateY(-2px)}}

/* ---- 01 · Fékút-szimulátor — ELRENDEZÉS ----------------------
   A négy panel (vezérlés / úttest / stat-csempék / energia) egy
   rácsban ül; a helyüket grid-template-areas adja, ezért a DOM-
   sorrend és a képernyő-sorrend külön hangolható:
     asztali  → bal hasáb: vezérlés + statok + energia · jobb: úttest
     mobil    → csúszka ELSŐ, alatta RÖGTÖN az eredmény (nagy szám +
                „Elütöd/Megállsz” pirula + sáv), és csak azután a
                részletek. Enélkül a csúszka hatása 3 kártyával
                lejjebb, a képernyőn kívül jelent meg. */
.kb4 .kb4-brake-grid{
  display:grid;align-items:stretch;
  grid-template-columns:.82fr 1.18fr;
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"ctrl road" "stats road" "energy road";
  column-gap:30px;row-gap:18px;
}
.kb4 .kb4-bk-ctrl  {grid-area:ctrl}
.kb4 .kb4-bk-road  {grid-area:road}
.kb4 .kb4-bk-stats {grid-area:stats;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kb4 .kb4-bk-energy{grid-area:energy}

/* panelek */
.kb4 .kb4-bk-ctrl{background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);border-radius:18px;padding:22px 22px 24px}
.kb4 .kb4-bk-energy{background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);border-radius:16px;padding:16px 18px}
.kb4 .kb4-bk-road{
  background:linear-gradient(180deg,#062338,#00131f);
  border:1.5px solid rgba(17,183,163,.18);border-radius:22px;
  padding:26px 28px 24px;display:flex;flex-direction:column;
}

/* vezérlés belseje */
.kb4 .kb4-bk-head{margin-bottom:16px}
.kb4 .kb4-bk-lbl{font:700 12px 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.5);margin-bottom:10px}
.kb4 .kb4-bk-val{display:flex;align-items:baseline;gap:8px}
.kb4 #kb4-speed{font-family:'Anton',sans-serif;font-size:60px;line-height:.9;color:#F7F5F0}
.kb4 .kb4-bk-unit{font:700 18px 'Space Grotesk',sans-serif;color:rgba(247,245,240,.6)}
.kb4 .kb4-bk-scale{display:flex;justify-content:space-between;font:700 11px 'Space Mono',monospace;color:rgba(247,245,240,.4);margin-top:8px}
.kb4 .kb4-bk-chips{display:flex;gap:8px;margin-top:16px}

/* úttest-panel belseje */
.kb4 .kb4-bk-road-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.kb4 .kb4-bk-road-lbl{font:700 12px 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,240,.55)}
.kb4 .kb4-bk-total{font-family:'Anton',sans-serif;font-size:52px;line-height:1;color:#FF5A5A}
.kb4 .kb4-bk-verdict{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(255,90,90,.4);border-radius:999px;padding:9px 16px;background:rgba(255,90,90,.1)}
.kb4 .kb4-bk-lane{position:relative;height:132px;background:#08283d;border-radius:14px;overflow:hidden;margin-bottom:12px}
.kb4 .kb4-bk-legend{display:flex;align-items:center;justify-content:space-between;font:700 11px 'Space Mono',monospace;color:rgba(247,245,240,.4);margin-bottom:14px}
.kb4 .kb4-bk-tip{font-size:14.5px;line-height:1.55;color:rgba(247,245,240,.82);margin:0;border-top:1px solid rgba(247,245,240,.1);padding-top:14px}
.kb4 .kb4-bk-note{font:600 11.5px 'DM Sans',sans-serif;color:rgba(247,245,240,.45);margin-top:10px}
/* A tanács-buborék CSAK mobilon látszik (ld. a @600 blokkot); asztalin a
   tipp-bekezdés végén marad a mondat (.kb4-bk-tip-adv). */
.kb4 .kb4-bk-adv{display:none}

/* ---- 02 · Csapda-kártyák (kattintásra forduló reveal) ---- */
.kb4-trap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kb4-flip{perspective:1300px;display:grid;animation:kb4pop .55s cubic-bezier(.2,.9,.3,1.2) backwards;cursor:pointer}
.kb4-flip:nth-child(1){animation-delay:.02s}
.kb4-flip:nth-child(2){animation-delay:.10s}
.kb4-flip:nth-child(3){animation-delay:.18s}
.kb4-flip:nth-child(4){animation-delay:.26s}
/* grid-template-rows:minmax(0,1fr) — a sor NEM nőhet a kártya dobozánál nagyobbra:
   enélkül a mobilon rövidebbre húzott kártyából a másik (hosszabb) lap alul
   kilógna, és iOS-en tükrözve átüt a kártya alatt. */
.kb4-inner{position:relative;display:grid;grid-template-rows:minmax(0,1fr);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1),height .4s cubic-bezier(.4,.15,.2,1)}
.kb4-flip.kb4-flipped .kb4-inner{transform:rotateY(180deg)}
.kb4-face{grid-area:1/1;min-width:0;backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;overflow:hidden}
.kb4-face-b{transform:rotateY(180deg)}

/* ---- 03 · Swipe (Tinder-szerű) ---- */
.kb4-card{cursor:grab;touch-action:pan-y;user-select:none}
.kb4-hidden{display:none!important}

/* ---- Animációk ---- */
@keyframes kb4float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes kb4pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 0 0 18px rgba(255,90,90,0)}}
@keyframes kb4pulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}}
@keyframes kb4marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes kb4pop{from{opacity:0;transform:translateY(24px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes kb4rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes kb4spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .kb4-flip,.kb4-inner{animation:none!important;transition:none!important}
}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .kb4-trap-grid{grid-template-columns:1fr 1fr}
  .kb4-hero-grid{grid-template-columns:1fr!important}
  .kb4-swipe-grid{grid-template-columns:1fr!important}
  /* Egy hasáb — és az ÚTTEST rögtön a csúszka alá kerül, a statok/energia
     mögé. A sorrendet a grid-template-areas adja, nem a DOM. */
  .kb4 .kb4-brake-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:"ctrl" "road" "stats" "energy";
    row-gap:14px;
  }
}
@media(max-width:600px){
  .kb4-trap-grid{grid-template-columns:1fr}

  /* --- 01 fékút: tömörebb vezérlés, hogy a csúszka ÉS az eredmény
         egyszerre férjen ki egy telefon-képernyőre --- */
  .kb4 .kb4-bk-ctrl{padding:16px 16px 16px;border-radius:16px}
  /* Felirat és érték egy sorban, KÖZÉPRE igazítva: baseline-nal a 42px-es
     szám messze a kétsoros felirat fölé nyúlt. */
  .kb4 .kb4-bk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  .kb4 .kb4-bk-lbl{margin-bottom:0;font-size:11px;letter-spacing:.06em;line-height:1.35;max-width:9.5em}
  .kb4 #kb4-speed{font-size:42px}
  .kb4 .kb4-bk-unit{font-size:15px}
  /* A 15/25/40 gyorsgombok mobilon nem kellenek: a csúszka önmagában elég,
     így ~55px-et spórolunk a kártya magasságán. Asztalin maradnak. */
  .kb4 .kb4-bk-chips{display:none}
  /* A csúszka alatti 10 · 25 · 45 km/h skála sem kell: a beállított érték
     nagyban ott van a felirat mellett. Így a doboz még alacsonyabb. */
  .kb4 .kb4-bk-scale{display:none}

  /* A tipp második mondata (a TANÁCS) az úttest-panelból az energia-doboz
     alá költözik, önálló zöld buborékba — mindkét doboz alacsonyabb lesz,
     és a teendő önmagában, jól láthatóan áll. A szöveget a kb4-page.js
     mindkét helyre kiírja, itt csak azt döntjük el, melyik látszik. */
  .kb4 .kb4-bk-tip-adv{display:none}
  .kb4 .kb4-brake-grid{grid-template-areas:"ctrl" "road" "stats" "energy" "advice"}
  .kb4 .kb4-bk-adv{
    grid-area:advice;
    display:flex;align-items:flex-start;gap:10px;
    background:rgba(201,234,61,.1);border:1px solid rgba(201,234,61,.4);
    border-radius:16px;padding:12px 14px;
    font:600 14px 'DM Sans',system-ui,sans-serif;line-height:1.45;color:#C9EA3D;
  }
  .kb4 .kb4-bk-adv .i{flex:none;margin-top:1px}

  .kb4 .kb4-bk-road{padding:18px 16px;border-radius:18px}
  .kb4 .kb4-bk-road-head{margin-bottom:14px;gap:12px}
  .kb4 .kb4-bk-total{font-size:44px}
  /* a verdikt-pirula külön sorban, teljes szélességben — ez a fő visszajelzés */
  .kb4 .kb4-bk-verdict{width:100%;justify-content:center;padding:9px 14px}
  .kb4 .kb4-bk-lane{height:104px;margin-bottom:10px}
  /* A keskeny sávban a „gyerek · 7 m” és az „itt állsz meg” felirat
     egymásra csúszott (vízszintesen szükségszerűen átfednek, mert a
     megállási pont a gyerek közelébe esik). Megoldás: a gyerek-felirat
     a sáv ALJÁRA kerül, a megállás-jelző pedig a sáv TETEJÉRE, rövidebb
     vonallal — így a két szöveg soha nem érhet össze.
     A pozíciókat a kb4-page.js inline írja ki, ezért kell az !important. */
  .kb4 #kb4-obst-lbl{top:auto!important;bottom:5px!important;transform:translateX(4px)!important}
  .kb4 #kb4-you{top:4px!important;transform:translate(-50%,0)!important}
  .kb4 #kb4-you > span:last-child{height:56px!important}
  .kb4 .kb4-bk-legend{margin-bottom:12px}
  .kb4 .kb4-bk-tip{font-size:14px;padding-top:12px}
  /* a jogi/becslési lábjegyzet mobilon elmarad — asztalin megmarad */
  .kb4 .kb4-bk-note{display:none}
  .kb4-nav-links{display:none!important}
  .kb4-face{align-self:start;padding:18px}
  /* Az ÉPPEN NEM LÁTSZÓ lap feszüljön pontosan a kártya magasságára, hogy a
     saját overflow:hidden-je levágja — különben kilóg a doboz alól. */
  .kb4-flip:not(.kb4-flipped) .kb4-face-b,
  .kb4-flip.kb4-flipped .kb4-face:not(.kb4-face-b){align-self:stretch}
  /* ---- A visszajelző panel fejléce MOBILON IS egy sor ----
     Az „Eltaláltad!/Nem talált" felirat és a „Helyes: IGAZ/HAMIS" pirula
     korábban két sorba tört. Nem tördelünk (nowrap), helyette a panel
     oldalpaddingja és a fejléc elemei szűkülnek — így 320px-en is elfér. */
  .kb4 .kb4-fb-box{padding:20px 16px!important}
  .kb4 .kb4-fb-head{flex-wrap:nowrap!important;gap:8px!important;margin-bottom:12px!important}
  .kb4 .kb4-fb-head > .i{flex:none}
  .kb4 .kb4-fb-title{font-size:13px!important;letter-spacing:0!important;white-space:nowrap}
  .kb4 .kb4-fb-pill{flex:none;margin-left:auto!important;font-size:11px!important;padding:4px 10px!important}
}

/* ============================================================
   01 FÉKÚT — RÖGZÍTETT KÉP A BLOKK ALJÁN (csak mobilon)
   ------------------------------------------------------------
   A blokk végén nyílik egy „ablak” (.kb4-nyul), amiben a kép
   VIZUÁLISAN ÁLL: a kb4-page.js initNyul() a képernyő közepéhez
   rögzíti, miközben az ablak együtt görög a lappal. Ettől úgy
   látszik, mintha a felette és alatta lévő tartalom rácsúszna a
   képre — a kép fokozatosan előbukkan, majd eltűnik alatta.

   Asztali nézetben nincs (display:none) — a kérés mobilra szólt.
   Ha kell desktopra is, elég a .kb4-nyul{display:block} + az
   ablak magasságát átvenni ide a médiaqueryből.
   ============================================================ */
.kb4-nyul{display:none}

@media(max-width:600px){
  .kb4 .kb4-nyul{
    display:block;position:relative;overflow:hidden;
    /* teljes szélesség, akármekkora oldalpadding van a szekción */
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    /* az ablak MINDIG magasabb a képnél (a kép ~56vw), így egy
       darabig teljes egészében látszik, mielőtt kicsúszik */
    height:max(68vh,62vw);
    margin-top:34px;
    /* a szekció alsó paddingját lenullázza: a kép a blokk aljára tapad */
    margin-bottom:-30px;
  }
  .kb4 .kb4-nyul-img{
    position:absolute;left:0;top:0;display:block;
    width:100%;height:auto;
    will-change:transform;
  }
}


/* ============================================================
   02/b — VIDEÓ-PAKLI („reel"-kártyák)
   Portré (9:16) kártyák egymásra dobva. A pozíciót/forgatást a
   kb4-page.js initReels() számolja és inline transformként teszi
   ki — itt csak a kártya kinézete és a pakli doboza van.
   A vízszintes „kilógást" a .kb4{overflow-x:clip} fogja meg (fent).
   ============================================================ */
.kb4 .kb4-reels{--kb4-rw:288px;margin-top:38px}
.kb4 .kb4-reel-deck{
  position:relative;
  height:calc(var(--kb4-rw) * 16 / 9 + 34px);
  touch-action:pan-y;            /* a függőleges görgetés a böngészőé marad */
  user-select:none;
  cursor:grab;
}
.kb4 .kb4-reel-deck:active{cursor:grabbing}
.kb4 .kb4-reel{
  position:absolute;left:50%;top:50%;
  width:var(--kb4-rw);
  transform:translate(-50%,-50%);
  transform-origin:center;
  border-radius:20px;
  background:#062338;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.75),0 0 0 1.5px rgba(247,245,240,.1);
  transition:transform .42s cubic-bezier(.2,.9,.3,1.15),opacity .32s ease;
  will-change:transform;
}
/* húzás közben nincs átmenet — a lap az ujjat kövesse */
.kb4 .kb4-reel-deck.kb4-reel-dragging .kb4-reel{transition:none}
.kb4 .kb4-reel:focus-visible{outline:3px solid var(--lime,#C9EA3D);outline-offset:4px}

.kb4 .kb4-reel-media{
  position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#00121f;
}
.kb4 .kb4-reel-poster{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;
}
/* sötétítés a felirat mögé — az FB-borítók alján lévő poszt-sáv is
   ide esik, így nem zavar bele a kártyába */
.kb4 .kb4-reel-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(transparent,rgba(0,18,31,.9));pointer-events:none;
}
.kb4 .kb4-reel-on .kb4-reel-media::after{display:none}

.kb4 .kb4-reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  background:var(--lime,#C9EA3D);color:#003153;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.kb4 .kb4-reel-play .i{margin-left:3px}          /* a play-háromszög optikai közepe */
@media (hover:hover) and (pointer:fine){
  .kb4 .kb4-reel:hover .kb4-reel-play{transform:translate(-50%,-50%) scale(1.09)}
}

/* felirat-pirula, félig kilóg a kártya aljáról (mint a mintán) */
.kb4 .kb4-reel-cap{
  position:relative;z-index:2;margin:-20px 14px 0;
  display:flex;justify-content:center;
}
.kb4 .kb4-reel-cap span{
  background:#F7F5F0;color:#003153;
  font:700 13px 'Space Grotesk',system-ui,sans-serif;line-height:1.25;
  padding:9px 15px;border-radius:12px;text-align:center;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* platform-címke a borító sarkában — a poszter cseréjekor magától
   eltűnik, mert a teljes .kb4-reel-media tartalma kicserélődik */
.kb4 .kb4-reel-tag{
  position:absolute;left:10px;top:10px;z-index:2;
  font:700 10px/1 'Space Grotesk',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 9px;border-radius:8px;color:#F7F5F0;
  background:rgba(0,18,31,.68);
}
.kb4 .kb4-reel-tag-yt{background:rgba(214,25,25,.86)}
.kb4 .kb4-reel-tag-fb{background:rgba(24,119,242,.86)}
.kb4 .kb4-reel-tag-tt{background:rgba(0,18,31,.82)}

.kb4 .kb4-reel-frame{display:block;width:100%;height:100%;border:0}
/* a fekvő YouTube-videó a portré kártyában magától fekete sávot kap */
.kb4 .kb4-reel-frame-yt{background:#000}

/* --- vezérlők a pakli alatt --- */
.kb4 .kb4-reel-ui{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.kb4 .kb4-reel-arrow{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:rgba(247,245,240,.06);border:1.5px solid rgba(247,245,240,.16);
  color:#F7F5F0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .kb4 .kb4-reel-arrow:hover{background:rgba(17,183,163,.16);border-color:#11B7A3}
}
.kb4 .kb4-reel-dots{display:flex;align-items:center;gap:8px}
.kb4 .kb4-reel-dot{
  width:9px;height:9px;padding:0;border-radius:50%;border:none;cursor:pointer;
  background:rgba(247,245,240,.25);transition:all .25s ease;
}
.kb4 .kb4-reel-dot-on{background:#11B7A3;width:24px;border-radius:5px}
.kb4 .kb4-reel-out{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font:700 13px 'Space Grotesk',system-ui,sans-serif;color:rgba(247,245,240,.6);
}
@media (hover:hover) and (pointer:fine){
  .kb4 .kb4-reel-out:hover{color:#11B7A3}
}

@media(max-width:600px){
  .kb4 .kb4-reels{--kb4-rw:min(70vw,264px)}
}
@media (prefers-reduced-motion: reduce){
  .kb4 .kb4-reel{transition:none}
  .kb4 .kb4-reel-play{transition:none}
}

/* Csökkentett mozgás: nincs rögzítés, egyszerű álló kép. */
@media (prefers-reduced-motion: reduce){
  .kb4 .kb4-nyul{height:auto!important;overflow:visible}
  .kb4 .kb4-nyul-img{position:static!important;transform:none!important}
}