/* Színvilág: alkonyati tópart (a hero fotó szerint) – SÖTÉT téma.
   Egy paletta, nincs light/dark váltó: az oldal éjszakai tópart. */
:root{
  --ej:#0d1f33;        /* legmélyebb éjkék */
  --viz:#5b9dd4;       /* elsődleges kék – sötét háttéren világosítva a kontraszthoz */
  --viz-vil:#7fb3dd;   /* acélkék kiemelés */
  --barack:#eda275;    /* horizont barack */
  --arany:#f5a63a;     /* amber, a vízen csillanó fény – CTA szín */
  --alkony:#d97a4e;    /* meleg terrakotta */

  --hatter:#0b1a2b;    /* oldal háttere */
  --karty:#14293f;     /* kártyák, panelek */
  --panel:#1b3550;     /* chipek, sávok, kiemelt hátterek */
  --vonal:#26445f;     /* szegélyek */
  --tinta:#e8f0f7;     /* fő szövegszín */
  --halvany:#9db4c9;   /* másodlagos szöveg */
  --arny:0 8px 24px rgba(0,0,0,.35); --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta);background:var(--hatter);
}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,7vw,3.4rem)}
h2{font-size:clamp(1.5rem,4.5vw,2.2rem)}
a{color:var(--viz)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
/* [TÉNY] Minden szekció <section class="wrap"> alakú, és a .wrap padding-shorthandje
   (osztály) felülírja az elem-szelektort – ezért a lentebbi `section` szabály függőleges
   paddingja évekig nem érvényesült, a szekciók összeértek. Ez a sor adja vissza.
   ponytail: nem a .wrap-ot bontottam szét és nem !important – egy szelektor, ami elég erős. */
section{padding:56px 0;scroll-margin-top:64px}
section.wrap{padding:44px 20px}
/* A hero alsó paddingja (124px) MÁR megadja a térközt – a rá következő szekció ne tegyen rá
   még egyszer ennyit. ponytail: szomszéd-szelektor, nem kell osztály a lapokra. */
.hero+section.wrap{padding-top:0}
.kozep{text-align:center}

/* fejléc */
header{
  position:sticky;top:0;z-index:20;background:rgba(11,26,43,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--vonal)
}
.fej{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.5px;text-decoration:none;color:var(--tinta)}
.logo span{color:var(--arany)}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{
  text-decoration:none;font-size:.92rem;font-weight:600;padding:7px 12px;
  border-radius:999px;color:var(--tinta)
}
nav a:hover{background:var(--panel);color:var(--viz-vil)}

/* hero – valódi fotó (alkonyati tópart) sötétítő overlay-jel.
   Az overlay alsó vége a --hatter-be fut, így nincs éles vágás a fotó és az oldal között.
   ponytail: egy JPG, nincs <picture>/srcset. Reszponzív változatok akkor, ha a 278 KB
   mérhetően fájni fog mobilon – akkor egy 800px-es verzió + srcset a megoldás. */
.hero{
  /* A sötétítő gradiens változóban van, hogy a korosztályos lapok CSAK a fotót cserélhessék
     (lásd lentebb a body.kor-* szabályokat), és a szöveg olvashatósága mindenhol azonos maradjon. */
  --hero-arny:linear-gradient(rgba(9,21,35,.78) 0%,rgba(9,21,35,.42) 38%,rgba(9,21,35,.30) 58%,rgba(11,26,43,.85) 88%,var(--hatter) 100%);
  /* Tartalék: minden lap visel egy hero-* osztályt, tehát ez csak akkor látszik, ha valaki
     elfelejti. Szándékosan a három használt kép egyike, nem a régi alkonyat-topart.jpg –
     az a fájl már csak az og:image miatt maradt meg a lemezen. */
  background:
    var(--hero-arny),
    url("img/alkonyat-nadas.jpg") center 38%/cover no-repeat;
  background-color:var(--ej); /* ha a kép nem tölt be, akkor is olvasható marad */
  /* Az alsó padding SZÁNDÉKOSAN kicsi: a fotó alján üres sáv keletkezett a szöveg és az első
     tartalmi blokk között (mérve 142px, a user kétszer szúrta ki). A gradiens utolsó stopja amúgy
     is a háttérszín, tehát a kifutáshoz nem kell nagy sáv – a fotó `cover`, csak kevesebbet mutat. */
  color:#fff;padding:100px 0 48px;position:relative;overflow:hidden
}
.hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero p{font-size:1.15rem;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.gombok{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.gomb{
  display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;
  text-decoration:none;border:0;cursor:pointer;font-size:1rem;
  background:var(--arany);color:#2a1a06;box-shadow:var(--arny)
}
.gomb:hover{transform:translateY(-2px)}
.gomb.hatter{background:rgba(255,255,255,.18);color:#fff;box-shadow:none;border:2px solid rgba(255,255,255,.6)}
.gomb.kicsi{padding:9px 18px;font-size:.9rem}

/* kártyák */
.racs{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kartya{
  background:var(--karty);border-radius:var(--r);padding:24px;box-shadow:var(--arny);
  border:1px solid var(--vonal);border-top:6px solid var(--viz-vil)
}
.kartya .ikon{font-size:2.4rem;line-height:1}
.kartya h3{margin-top:12px}
.kartya .kor{font-size:.85rem;font-weight:700;color:var(--viz);text-transform:uppercase;letter-spacing:.06em}
.k-kicsik{border-top-color:var(--arany)}
.k-kamasz{border-top-color:var(--barack)}
.k-teen{border-top-color:var(--alkony)}
ul.pipa{list-style:none;padding:0;margin:12px 0 0}
ul.pipa li{padding-left:26px;position:relative;margin:.4em 0}
ul.pipa li::before{content:"🐟";position:absolute;left:0;font-size:.9em}

/* képsáv – képregénykockák: vízszintes csík, egyszerre EGY kocka látszik.
   ponytail: a görgetés natív (scroll-snap), JS csak a nyilakhoz és a
   számlálóhoz kell – a `scrollLeft` AZ állapot, nincs külön carousel-modell.

   [TÉNY] A kilógó következő kocka („peek") EGYEDÜL nem elég jelzés: a user
   nem vette észre, hogy jobbra van még. Ezért van a sáv alatt nyíl + „1 / 5".

   A TARTALMI szabály fontosabb a CSS-nél: egy kocka = EGY gondolat = egy RAJZ
   és egy buborék, legfeljebb ~20 szóval. Ami hosszabb, az nem kocka, hanem a
   sáv alatti details.szint törzsébe való. Ha egy kockát görgetni kell, elrontottad. */
.kepsav{
  position:relative;   /* hogy a kockák offsetLeft-je a sávhoz mérődjön (app.js lapoz()) */
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  /* A padding-bottom nem díszítés: az overflow-x:auto függőlegesen is vág, és
     6px-nél a kockák vetett árnyéka (0 8px 24px) le volt nyisszantva. */
  scroll-snap-type:x mandatory;margin:18px 0 0;padding:4px 0 26px;scrollbar-width:none
}
.kepsav::-webkit-scrollbar{display:none}
.kocka{
  flex:0 0 min(78%,300px);scroll-snap-align:start;
  background:var(--karty);border:1px solid var(--vonal);
  border-left:6px solid var(--akcent);border-radius:var(--r);
  padding:16px;box-shadow:var(--arny)
}
.kocka h3{margin:12px 0 0;font-size:1.05rem;color:var(--akcent)}

/* A rajz. Nincs képfájl: inline SVG, tehát nincs letöltés, nincs elmosódás
   nagyításnál, és a paletta-változókból színeződik – sötét témán is jó. */
.kocka svg{display:block;width:100%;height:auto;background:var(--panel);border-radius:12px}
.rajz-viz {fill:none;stroke:var(--viz);stroke-width:2}
.rajz-alak{fill:none;stroke:var(--tinta);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rajz-bot {fill:none;stroke:var(--arany);stroke-width:2.5;stroke-linecap:round}
.rajz-ut  {fill:none;stroke:var(--barack);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
.rajz-nyil{fill:none;stroke:var(--barack);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rajz-halv{fill:none;stroke:var(--halvany);stroke-width:2;stroke-linecap:round}
.rajz-suly{fill:var(--arany);stroke:none}
.rajz-szem{fill:var(--tinta);stroke:none}


/* Szövegbuborék: világos folt sötét tintával – ez a képregény-idióma, és
   egyben a kontraszt-csúcs a kockán, tehát ide néz a szem először. */
.bubi{
  position:relative;margin:16px 0 0;background:var(--tinta);color:var(--ej);
  border-radius:14px;padding:10px 14px;font-weight:600;font-size:.95rem;line-height:1.4
}
.bubi::after{
  content:"";position:absolute;top:-10px;left:24px;
  border:10px solid transparent;border-top:0;border-bottom-color:var(--tinta)
}
/* A „mindig ezt csináld" kocka – a sávban ez az egy, ami nem ismeret, hanem szabály. */
.kocka.fo{border-left-color:var(--arany)}
.kocka.fo .bubi{background:var(--arany)}
.kocka.fo .bubi::after{border-bottom-color:var(--arany)}

/* Lapozó a sáv ALATT (nem a szélén, mint a .tipplap): itt mobilon is kell,
   pont az volt a panasz, hogy nem látszik a folytatás. Ugyanaz az arany
   kör + chevron idióma, mint a #fel gombon és a tippsávon. */
/* [TÉNY] A gombsor alsó margója nélkül a `.sav-vez` alja PONTOSAN a következő
   blokk tetejéhez ért (mérve: 339px mindkettő) – az arany kör ránézésre ráült
   a következő dobozra. Nem átfedés volt, hanem nulla térköz. */
.sav-vez{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 26px}
.sav-szam{font-size:.9rem;font-weight:700;color:var(--halvany);min-width:52px;text-align:center}
.sav-nyil{
  width:40px;height:40px;border-radius:50%;padding:0;line-height:1;border:0;
  background:var(--arany);color:#2a1a06;font-size:1.6rem;font-weight:700;
  cursor:pointer;box-shadow:var(--arny)
}
.sav-nyil:disabled{opacity:.25;cursor:default}

/* szintek */
details.szint{
  background:var(--karty);border-radius:var(--r);box-shadow:var(--arny);
  border:1px solid var(--vonal);margin-bottom:16px;overflow:hidden;
  scroll-margin-top:104px   /* hogy a ragadós fejléc ne takarja, ha horgonyról ugrunk ide */
}
details.szint>summary{
  cursor:pointer;padding:20px 24px;font-weight:800;font-size:1.15rem;
  display:flex;align-items:center;gap:14px;list-style:none
}
details.szint>summary::-webkit-details-marker{display:none}
details.szint>summary::after{content:"▾";margin-left:auto;color:var(--viz);font-size:1.4rem}
details.szint[open]>summary::after{content:"▴"}
details.szint .jel{
  width:38px;height:38px;border-radius:50%;background:var(--viz-vil);color:#0b1a2b;
  display:grid;place-items:center;font-size:1.2rem;font-weight:800;flex:0 0 auto
}
.sz-2 .jel{background:var(--barack)} .sz-3 .jel{background:var(--alkony)}
.szint-torzs{padding:0 24px 24px}
.szint-torzs h4{margin:18px 0 6px;color:var(--viz);font-size:1rem;text-transform:uppercase;letter-spacing:.05em}
.szint-torzs p,.szint-torzs ul{margin:0}
/* csomó-videó: 16:9 doboz. Amíg nincs ID, egy keresőlinket tartalmaz. */
.video{
  margin:16px 0 0;aspect-ratio:16/9;background:var(--panel);border:1px solid var(--vonal);
  border-radius:12px;overflow:hidden;display:grid;place-items:center;text-align:center;padding:16px
}
.video a{font-weight:700;text-decoration:none;color:var(--viz-vil)}
.video a:hover{text-decoration:underline}
/* álló (Shorts) videó: ugyanaz a doboz, csak 9:16 és keskenyebb – ponytail: egy szabály,
   nem külön komponens. A .video minden más viselkedése (lusta betöltés, tartalék link) marad. */
.video.allo{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
.video.betoltve{padding:0;display:block}
.video iframe{width:100%;height:100%;border:0;display:block}

.cimkek{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.cimke{background:var(--panel);color:var(--tinta);border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:600}

/* kvíz */
.kviz{background:var(--karty);border-radius:var(--r);box-shadow:var(--arny);padding:24px;margin-top:24px}
.valaszto{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.valaszto button{
  padding:10px 18px;border-radius:999px;border:2px solid var(--vonal);background:var(--panel);
  font-weight:700;cursor:pointer;font-size:.95rem;color:var(--tinta)
}
.valaszto button:hover{border-color:var(--viz-vil)}
.valaszto button[aria-pressed="true"]{background:var(--arany);border-color:var(--arany);color:#2a1a06}
.savtart{height:10px;background:var(--panel);border-radius:999px;overflow:hidden;margin:18px 0}
.sav{height:100%;width:0;background:var(--arany);transition:width .3s}
#kerdes{font-size:1.2rem;font-weight:700;margin:0 0 16px}
.opciok{display:grid;gap:10px}
.opciok button{
  text-align:left;padding:14px 18px;border-radius:12px;border:2px solid var(--vonal);
  background:var(--panel);font-size:1rem;cursor:pointer;font-weight:600;color:var(--tinta)
}
.opciok button:hover:not(:disabled){border-color:var(--viz-vil);background:#22405f}
/* helyes/hibás marad zöld–piros: ez jelentés, nem márkaszín (a súgó ✅/❌-t is ír).
   Sötét háttéren tompított tinta + világos keret, hogy a szöveg olvasható maradjon. */
.opciok button.jo{background:#1d4030;border-color:#4caf72;color:#dff5e6}
.opciok button.rossz{background:#43231f;border-color:#e07a63;color:#fbe0da}
.opciok button:disabled{cursor:default}
.sugo{
  margin:16px 0 0;padding:14px 16px;background:#1f3348;
  border-left:5px solid var(--arany);border-radius:8px;color:var(--tinta)
}
.jelvenyek{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
/* A sáv alatt is kell térköz, különben hozzáér a következő blokkhoz (mérve 0px a
   tizenevesek/kiskamasz lapon, ahol nyitható blokk jön alá). A :not(:last-child) azért kell,
   mert a kicsik.html-en a sáv a kvízdoboz UTOLSÓ eleme – ott a doboz paddingja adja a teret. */
.jelvenyek:not(:last-child){margin-bottom:24px}
.jelveny{
  display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:999px;
  padding:8px 16px;font-weight:700;font-size:.9rem;border:1px solid var(--vonal)
}
.jelveny.szurke{opacity:.45;filter:grayscale(1)}

/* egyéb */
.figyelem{
  background:#1f3348;border-left:5px solid var(--arany);padding:14px 18px;
  border-radius:8px;font-size:.95rem;color:var(--tinta)
}
/* CTA a hero fotójával, erős sötétítéssel – összefogja az oldal két végét */
.cta{
  background:
    linear-gradient(rgba(9,21,35,.82),rgba(9,21,35,.88)),
    url("img/alkonyat-topart.jpg") center 45%/cover no-repeat;
  background-color:var(--ej);
  color:#fff;border-radius:var(--r);padding:44px 36px;text-align:center;
  border:1px solid var(--vonal)
}
.cta h2{color:#fff}
.cta a.gomb{margin-top:8px}
footer{padding:32px 0;font-size:.9rem;color:var(--halvany);border-top:1px solid var(--vonal);margin-top:40px}
/* mobil: a menü ne tördelődjön két sorba, hanem egy vízszintesen húzható sáv legyen */
@media (max-width:640px){
  .fej{gap:8px;min-height:52px}
  nav{width:100%;margin:0 0 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:0 0 auto;font-size:.88rem;padding:6px 10px}
  section{scroll-margin-top:104px}
  section.wrap{padding:28px 20px}
  .hero{padding:72px 0 40px}
  .cta{padding:32px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ============================================================
   Korosztály-oldalak (2. kör: index = választó, korosztályonként külön lap)
   ============================================================ */

/* Kártya-ikonok: az eredeti emoji motívumok lapos, kitöltött formákkal.
   Ikononként legfeljebb HÁROM szín ezek közül – ezt tartsd be új ikonnál is.
   Az svg 1em, tehát a méretét a .ikon meglévő font-size-a adja (3rem / 2.4rem). */
.ikon svg{width:1em;height:1em;display:block}
.ikon .i1{fill:var(--viz-vil)}   /* kék */
.ikon .i2{fill:var(--arany)}     /* arany */
.ikon .i3{fill:var(--tinta)}     /* világos */
.ikon .i4{fill:var(--barack)}    /* barack */
.ikon .i5{fill:var(--karty)}     /* kártyaháttér – lyuknak, pl. kulcslyuk */

/* nagy választókártyák a nyitólapon */
.valasztok{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:8px}
a.valaszto-kartya{
  display:block;text-decoration:none;color:var(--tinta);background:var(--karty);
  border:1px solid var(--vonal);border-top:6px solid var(--viz-vil);border-radius:var(--r);
  padding:28px 24px;box-shadow:var(--arny);transition:transform .15s,border-color .15s
}
a.valaszto-kartya:hover{transform:translateY(-3px);border-color:var(--arany)}
a.valaszto-kartya .ikon{font-size:3rem;line-height:1}
a.valaszto-kartya h3{margin:14px 0 4px;font-size:1.35rem}
a.valaszto-kartya .kor{
  font-size:.85rem;font-weight:700;color:var(--viz);text-transform:uppercase;letter-spacing:.06em
}
a.valaszto-kartya .kinek{
  display:inline-block;margin-top:14px;font-size:.85rem;font-weight:700;
  background:var(--panel);border-radius:999px;padding:5px 12px
}
a.valaszto-kartya .tovabb{display:block;margin-top:16px;color:var(--arany);font-weight:700}
.v-kicsik{border-top-color:var(--arany)}
.v-kamasz{border-top-color:var(--barack)}
.v-teen{border-top-color:var(--alkony)}
.v-szulo{border-top-color:var(--viz-vil)}

/* szülői segédlet: elkülönül a gyereknek szóló szövegtől */
.szulonek{
  background:#152f45;border:1px dashed var(--viz-vil);border-radius:12px;
  padding:18px 20px;margin:20px 0 0
}
.szulonek>h4{
  margin:0 0 8px;color:var(--viz-vil);font-size:.95rem;
  text-transform:uppercase;letter-spacing:.05em
}
.szulonek p{margin:0}
.szulonek p+p{margin-top:10px}

/* „hol vagyok" sáv az aloldalak tetején */
.morzsa{font-size:.9rem;color:var(--halvany);padding:18px 0 0}
.morzsa a{color:var(--halvany)}

/* korosztály-jelző az aloldal hero-jában */
.korjel{
  display:inline-block;background:var(--arany);color:#2a1a06;font-weight:800;
  border-radius:999px;padding:6px 16px;font-size:.9rem;margin-bottom:18px
}

/* lapozó az aloldalak alján */
.lapozo{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-top:40px}

/* ============================================================
   Korosztály-arculat (3. kör)
   Minden aloldal <body class="kor-..."> osztályt kap, és ez egyetlen
   változón, az --akcent-en keresztül színezi az egész oldalt.
   Így egy helyen lehet korosztályt átszínezni, nem húsz szabályban.
   ============================================================ */
:root{--akcent:var(--viz-vil)}
body.kor-kicsik{--akcent:var(--arany)}
body.kor-kamasz{--akcent:var(--barack)}
body.kor-teen  {--akcent:var(--alkony)}
body.kor-szulo {--akcent:var(--viz-vil)}

/* a ragadós fejléc alsó vonala mindig mutatja, melyik korosztályban vagy */
body[class*="kor-"] header{border-bottom:3px solid var(--akcent)}

/* az aktuális korosztály menüpontja kiemelve */
body[class*="kor-"] nav a[aria-current="page"]{
  background:var(--akcent);color:#2a1a06
}

/* szekciócímek elé korosztály-színű sáv */
body[class*="kor-"] section>h2{
  border-left:6px solid var(--akcent);padding-left:16px
}

/* akcentust átvevő elemek */
/* A három korosztályos lap saját hajnali képet kap, hogy ne ugyanaz a fotó fogadjon mindenhol.
   Mind a három ugyanabból a sorozatból való, mint az alap hero: azonos kék-narancs paletta,
   azonos sziluettes horizont – tehát a lapok VÁLTOZNAK, de a site hangulata nem törik meg.
   ponytail: csak a háttérkép cserélődik, a gradiens és a szövegméretek a .hero-ból jönnek. */
/* Három hajnali kép váltakozik az egész site-on. A választás NEM korosztály kérdése – ezért
   nem a kor-* osztályokra megy, hanem saját hero-* osztályra a body-n, amiből minden lap
   pontosan egyet visel. Új lap: adj neki egy hero-* osztályt, és kész. */
body.hero-nadas   .hero{background-image:var(--hero-arny),url("img/alkonyat-nadas.jpg")}
body.hero-narancs .hero{background-image:var(--hero-arny),url("img/alkonyat-narancs.jpg")}
body.hero-felhos  .hero{background-image:var(--hero-arny),url("img/alkonyat-felhos.jpg")}

body[class*="kor-"] .korjel{background:var(--akcent)}
body[class*="kor-"] details.szint .jel{background:var(--akcent)}
body[class*="kor-"] details.szint>summary::after{color:var(--akcent)}
body[class*="kor-"] .szint-torzs h4{color:var(--akcent)}
body[class*="kor-"] .kartya{border-top-color:var(--akcent)}
body[class*="kor-"] ul.pipa li::before{content:"🐟"}

/* forma és méret is korosztályt jelez:
   a kicsiknél nagyobb betű és kerekebb sarkok, a tizenéveseknél szikárabb */
body.kor-kicsik{font-size:18.5px;--r:26px}
body.kor-kicsik h1,body.kor-kicsik h2{letter-spacing:-.5px}
body.kor-kicsik ul.pipa li::before{content:"🐣"}
body.kor-kamasz ul.pipa li::before{content:"🎒"}
body.kor-teen{--r:12px}
body.kor-teen ul.pipa li::before{content:"▸"}
body.kor-szulo ul.pipa li::before{content:"✓"}
body.kor-teen ul.pipa li::before,
body.kor-szulo ul.pipa li::before{color:var(--akcent);font-weight:800}

/* a négy választókártya egy sorban a nyitólapon – a szülői kártya
   egyenrangú a három korosztállyal, nem alá csúszik egy külön sorba */
/* csak ott 4 oszlop, ahol tenyleg 4 kartya van (nyitolap) – a modszerek oldalon
   3 kartya van, ott az auto-fit hagyja oket 3 egyenlo oszlopban */
@media (min-width:900px){
  .valasztok.negy{grid-template-columns:repeat(4,1fr)}
  .valasztok.negy a.valaszto-kartya{padding:24px 18px}
  .valasztok.negy a.valaszto-kartya h3{font-size:1.2rem}
  .valasztok.negy a.valaszto-kartya .ikon{font-size:2.6rem}
}

/* módszer-oldalak: nem korosztályhoz, hanem technikához tartoznak,
   ezért saját, kék akcentust kapnak – így ránézésre elkülönülnek a korosztályos lapoktól */
body.kor-modszer{--akcent:var(--viz)}
body.kor-modszer ul.pipa li::before{content:"▸";color:var(--akcent);font-weight:800}

/* nehézségi jelző a módszer-oldalak hero-jában */
.szintjel{
  display:inline-block;background:var(--panel);border:1px solid var(--vonal);
  border-radius:999px;padding:5px 14px;font-size:.85rem;font-weight:700;margin-left:8px
}

/* felgörgető gomb – a JS teszi be és kapcsolja rá a .lat osztályt.
   Arany kör + tömör ikon: ugyanaz a CTA-idióma, mint a .gomb-oknál és a kártyaikonoknál. */
#fel{
  position:fixed;right:20px;bottom:20px;z-index:30;
  width:52px;height:52px;border-radius:50%;padding:0;
  display:grid;place-items:center;
  border:0;background:var(--arany);cursor:pointer;box-shadow:var(--arny);
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s
}
/* A nyíl ugyanaz a chevron-glif, mint a tippsáv lapozóin (.tipplap), csak
   felfelé fordítva – egy ikonnyelv az egész oldalon. */
#fel .nyil{
  display:block;font-size:1.8rem;font-weight:700;line-height:1;color:#2a1a06;
  transform:rotate(-90deg)
}
#fel.lat{opacity:.45;visibility:visible}   /* alapból visszafogott, ne vonja el a figyelmet */
/* Csak igazi mutatóeszközön hoverezünk: érintésen a :hover a koppintás után ottmarad
   („sticky hover”), és a gomb élénk arany maradna a felgörgetés után is. */
@media (hover:hover){#fel:hover{opacity:1;transform:translateY(-2px)}}
#fel:focus-visible{opacity:1}

/* ============================================================
   Profi tippek galéria-sáv (pergetes.html, tippek.js)
   A .tippablak egy natív vízszintes scroll-doboz: ezt tolja lassan a JS, és
   ezen lapoznak a nyilak is (scrollBy). Ezért NEM használunk `gap`-et – a
   kártya margin-right-ja adja a rést, és így a 320px-es lépés pontosan
   egy kártyát mozdít (300 + 20).
   ============================================================ */
.tippsav{position:relative;margin-top:8px}
.tippablak{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  /* elhalványuló szélek, hogy a kártyák ne „elvágva" jelenjenek meg */
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}
.tippablak::-webkit-scrollbar{display:none}
.tippfuto{display:flex;width:max-content}
.tippkartya{
  flex:0 0 300px;margin-right:20px;background:var(--karty);border-radius:var(--r);
  border:1px solid var(--vonal);border-top:6px solid var(--akcent);
  box-shadow:var(--arny);padding:20px;display:flex;flex-direction:column
}
.tippkartya h3{font-size:1.1rem;margin:10px 0 8px}
.tippkartya p{margin:0;font-size:.95rem}
.tippcsoport{
  align-self:flex-start;background:var(--panel);border-radius:999px;padding:4px 12px;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--viz)
}
/* lapozó nyilak – a sáv két szélén, a halványuló rész fölött.
   Ugyanaz a CTA-idióma, mint a felgörgető gombnál (#fel): arany kör, sötét tinta. */
.tipplap{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;padding:0;line-height:1;
  border:0;background:var(--arany);color:#2a1a06;
  font-size:1.8rem;font-weight:700;cursor:pointer;box-shadow:var(--arny);
  opacity:.4   /* alapból visszafogott, mint a #fel – a kártyák a fontosak */
}
.tipplap.hatra{left:-6px} .tipplap.elore{right:-6px}
.tipplap:hover,.tipplap:focus-visible{opacity:1}
/* Mobilon nincs nyíl: kevés a hely, a gomb a szövegre lógna – ott a kártyákat
   ujjal húzva lapozod (a .tippablak natív scroll-doboz, ez magától megy). */
@media (max-width:640px){.tipplap{display:none}}