/* ============================================================
   IRODAKALAUZ.HU — designrendszer

   A vizuális nyelv a dailysports.net/bookmakers referenciából jön:
   savas sárga jelszín fekete alapon, fehér kártyák, Inter betű,
   8px lekerekítés. A kód viszont a sajátunk — nincs átemelt markup,
   nincs harmadik féltől származó szkript, nincs követő.

   Ami nálunk jobb, és amit ez a fájl kiszolgál:
     · a szűrő és a rendezés TÉNYLEG működik, azonnal, oldaltöltés nélkül
     · mobilon a szűrő alsó fiókba kerül, nem szorul le a lap aljára
     · nincs süti-fal, mert nincs mit engedélyezni: nulla követés
     · billentyűzettel is végigjárható, látható fókuszjelöléssel
   ============================================================ */

:root {
  /* — jelszínek — */
  --sarga: #faff00;
  --sarga-melyebb: #e2e600;
  --tinta: #141414;
  --tinta-lagy: #2c2c2c;

  /* — felületek — */
  --lap: #fcfcfc;
  --feher: #ffffff;
  --halvany: #f4f4f5;
  --keret: #e7e7e9;
  --keret-eros: #d9d9dd;

  /* — szöveg — */
  --szoveg: #141414;
  --szoveg-halk: rgba(20, 20, 20, .64);
  --szoveg-halvany: rgba(20, 20, 20, .45);

  /* — jelzések — */
  --zold: #12805c;
  --zold-halvany: #e7f6f0;
  --piros: #c02626;

  /* — forma — */
  --ker: 8px;
  --ker-nagy: 14px;
  --arnyek: 0 1px 2px rgba(20, 20, 20, .05);
  --arnyek-emelt: 0 12px 32px -12px rgba(20, 20, 20, .18);

  --sav: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lap);
  color: var(--szoveg);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.6rem; }
}

/* Fókusz: mindenhol látszik, mert billentyűzettel is használható a lap. */
:focus-visible {
  outline: 3px solid var(--sarga-melyebb);
  outline-offset: 2px;
  border-radius: 4px;
}

.sav {
  max-width: var(--sav);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Csak képernyőolvasónak. */
.rejtve {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   FEJLÉC
   ============================================================ */

.fejlec {
  background: var(--tinta);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}

.fejlec-sav {
  max-width: var(--sav);
  margin: 0 auto;
  padding: 0 1rem;
  height: 60px;
  display: flex;
  align-items: center;
  gap: .7rem;
}
@media (min-width: 900px) { .fejlec-sav { gap: 1.25rem; } }

/* — a logó: ir(labda)dakalauz — */
.jel {
  display: inline-flex;
  align-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.045em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.jel-labda {
  display: inline-block;
  width: .78em; height: .78em;
  margin: 0 .01em;
  vertical-align: -.02em;
  flex-shrink: 0;
}

.fonav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}
.fonav a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  transition: color .15s ease;
}
.fonav a:hover { color: #fff; }

.fej-cta {
  background: var(--sarga);
  color: var(--tinta);
  font-weight: 700;
  font-size: .875rem;
  padding: .5rem .95rem;
  border-radius: var(--ker);
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease;
}
.fej-cta:hover { filter: brightness(.93); }

@media (max-width: 419px) {
  .fej-cta { display: none; }
  .jel { font-size: 1.2rem; }
}

.menugomb {
  margin-left: auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: var(--ker);
  color: #fff;
  cursor: pointer;
}

@media (min-width: 900px) {
  .fonav { display: flex; }
  .menugomb { display: none; }
  .fej-cta { margin-left: 0; }
}

.mobilnav {
  background: var(--tinta-lagy);
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: .5rem 1rem 1rem;
}
.mobilnav a {
  display: block;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-weight: 600;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mobilnav a:last-child { border-bottom: none; }

/* ============================================================
   MORZSA
   ============================================================ */

.morzsa {
  background: var(--halvany);
  border-bottom: 1px solid var(--keret);
  font-size: .8rem;
  color: var(--szoveg-halk);
}
.morzsa .sav { padding-top: .6rem; padding-bottom: .6rem; }
.morzsa a { color: var(--szoveg-halk); text-decoration: none; }
.morzsa a:hover { color: var(--szoveg); }
.morzsa span[aria-current] { color: var(--szoveg); font-weight: 600; }

/* ============================================================
   ELRENDEZÉS — oldalsáv + fő oszlop
   ============================================================ */

.torzs { padding: 1.5rem 0 3rem; }

.racs {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

/* NE VEDD KI. A rács elemei alapból min-width:auto-val élnek, vagyis
   nem hajlandók a tartalmuknál keskenyebbre zsugorodni. Emiatt egy
   széles elem (pl. az összehasonlító táblázat) nem a saját dobozában
   görget, hanem szétfeszíti az egész lapot, és a telefon oldalra
   csúszik. A min-width:0 engedi meg a zsugorodást. */
.racs > * { min-width: 0; }

@media (min-width: 1000px) {
  .racs { grid-template-columns: 264px 1fr; align-items: start; }
}

/* ============================================================
   SZŰRŐ
   ============================================================ */

.szuro {
  background: var(--feher);
  border: 1px solid var(--keret);
  border-radius: var(--ker-nagy);
  padding: 1.15rem;
}

@media (min-width: 1000px) {
  .szuro { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
}

.szuro-fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.szuro-fej h2 { font-size: 1rem; }

.torles {
  background: none;
  border: none;
  color: var(--szoveg-halk);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: .2rem .3rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.torles:hover { color: var(--piros); }
.torles[disabled] { opacity: .35; cursor: default; }
.torles[disabled]:hover { color: var(--szoveg-halk); }

.szuro-csoport { border-top: 1px solid var(--keret); padding-top: .9rem; margin-top: .9rem; }
.szuro-csoport:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.szuro-cim {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--szoveg-halvany);
  margin: 0 0 .6rem;
}

.pipa {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .34rem 0;
  cursor: pointer;
  font-size: .875rem;
  user-select: none;
}
.pipa input {
  width: 17px; height: 17px;
  accent-color: var(--tinta);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.pipa .db {
  margin-left: auto;
  font-size: .75rem;
  color: var(--szoveg-halvany);
  font-variant-numeric: tabular-nums;
}
/* Nulla találatú szűrő: látszik, de tompán — ne kelljen próbálgatni. */
.pipa.ures { opacity: .4; }

/* Mobilon a szűrő alsó fiók. A referencián ilyenkor a lap aljára szorul,
   és senki nem görget odáig. */
@media (max-width: 999px) {
  .szuro-doboz {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--feher);
    border-radius: var(--ker-nagy) var(--ker-nagy) 0 0;
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .4);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    max-height: 82vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .szuro-doboz.nyitva { transform: none; }
  .szuro { border: none; border-radius: 0; padding-bottom: 5.5rem; }
  .szuro-fogo {
    position: sticky; top: 0; z-index: 1;
    background: var(--feher);
    padding: .75rem 1.15rem .5rem;
    border-bottom: 1px solid var(--keret);
    display: flex; align-items: center; justify-content: space-between;
  }
  .fiok-fatyol {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(20, 20, 20, .5);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
  }
  .fiok-fatyol.nyitva { opacity: 1; pointer-events: auto; }
}

@media (min-width: 1000px) {
  .szuro-fogo { display: none; }
  .fiok-fatyol { display: none; }
}

/* Lebegő szűrőgomb mobilra */
.szuro-gomb {
  position: fixed;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--tinta);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .75rem 1.4rem;
  font: inherit;
  font-weight: 700;
  font-size: .875rem;
  box-shadow: var(--arnyek-emelt);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.szuro-gomb .jelzo {
  background: var(--sarga);
  color: var(--tinta);
  border-radius: 999px;
  min-width: 20px;
  padding: 0 .35rem;
  font-size: .75rem;
  font-weight: 800;
}
@media (min-width: 1000px) { .szuro-gomb { display: none; } }

/* ============================================================
   FŐ OSZLOP — bevezető, vezérlők
   ============================================================ */

.bevezeto p {
  color: var(--szoveg-halk);
  max-width: 68ch;
  margin: .85rem 0 0;
}

.vezerlok {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin: 1.5rem 0 1.1rem;
}

.kereso {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
}
.kereso svg {
  position: absolute;
  left: .7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--szoveg-halvany);
  pointer-events: none;
}
.kereso input {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  padding: .6rem .7rem .6rem 2.25rem;
  border: 1px solid var(--keret-eros);
  border-radius: var(--ker);
  background: var(--feher);
  color: inherit;
}
.kereso input::placeholder { color: var(--szoveg-halvany); }

.rendezo {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--feher);
  border: 1px solid var(--keret-eros);
  border-radius: var(--ker);
  padding: 0 .7rem;
  height: 38px;
}
.rendezo label { font-size: .8rem; color: var(--szoveg-halk); font-weight: 600; }
.rendezo select {
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.rendezo select:focus { outline: none; }

.talalat {
  font-size: .85rem;
  color: var(--szoveg-halk);
  margin: 0 0 1rem;
}
.talalat b { color: var(--szoveg); font-weight: 700; }

/* ============================================================
   IRODA KÁRTYA
   ============================================================ */

.lista { display: flex; flex-direction: column; gap: .85rem; }

/* A kártya rácsa nevesített területekkel. Így ugyanaz a HTML tud
   mobilon egymás alá, asztalon pedig egy sorba rendeződni — nem kell
   se pozicionálni, se elemet duplikálni. */
.iroda {
  background: var(--feher);
  border: 1px solid var(--keret);
  border-radius: var(--ker-nagy);
  padding: 1.15rem;
  display: grid;
  gap: .85rem 1rem;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "rang  marka"
    "kozep kozep"
    "ajanlat ajanlat";
  transition: border-color .18s ease, box-shadow .18s ease;
}
.iroda:hover {
  border-color: var(--keret-eros);
  box-shadow: var(--arnyek-emelt);
}

.rang {
  grid-area: rang;
  width: 34px; height: 34px;
  align-self: center;
  background: var(--halvany);
  border-radius: var(--ker);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
/* Dobogó: az első három kap sárga jelet. */
.iroda:nth-child(1) .rang { background: var(--sarga); }
.iroda:nth-child(2) .rang,
.iroda:nth-child(3) .rang { background: #fbffb0; }

.marka {
  grid-area: marka;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.plakat {
  width: 104px; height: 48px;
  flex-shrink: 0;
  background: var(--feher);
  border: 1px solid var(--keret);
  border-radius: var(--ker);
  display: flex; align-items: center; justify-content: center;
  padding: .3rem;
}
.plakat img { max-height: 100%; width: auto; object-fit: contain; }

.iroda-nev { margin-bottom: .1rem; }

.ertekeles {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .8rem;
  color: var(--szoveg-halk);
}
.csillagok { display: inline-flex; gap: 1px; color: var(--sarga-melyebb); }
.pont { font-weight: 800; color: var(--szoveg); font-variant-numeric: tabular-nums; }

.kozep { grid-area: kozep; min-width: 0; }

.verdikt {
  font-size: .875rem;
  color: var(--szoveg-halk);
  margin: 0 0 .6rem;
  max-width: 60ch;
}

.jellemzok {
  display: grid;
  gap: .4rem .9rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.jellemzok li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--szoveg-halk);
}
.jellemzok svg { flex-shrink: 0; margin-top: .28em; color: var(--zold); }

.ajanlat {
  grid-area: ajanlat;
  background: var(--halvany);
  border-radius: var(--ker);
  padding: .95rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: center;
  justify-content: center;
}
.bonusz {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.bonusz-cimke {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--szoveg-halvany);
  margin: 0;
}

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  padding: .7rem 1.1rem;
  border: none;
  border-radius: var(--ker);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
  font-family: inherit;
}
.gomb:hover { background: #000; transform: translateY(-1px); }
.gomb-sarga { background: var(--sarga); color: var(--tinta); }
.gomb-sarga:hover { background: var(--sarga-melyebb); }

/* Legalább 12px. A 11px alatti szöveg telefonon már nem olvasható
   kényelmesen, és a "Partnerlink · 18+" pont olyan közlés, aminek
   látszania kell. */
.apro {
  font-size: .75rem;
  color: var(--szoveg-halvany);
  margin: 0;
}

@media (min-width: 620px) {
  .jellemzok { grid-template-columns: 1fr 1fr; }
}

/* Asztali nézet: minden egy sorban, ahogy a referencián. */
@media (min-width: 960px) {
  .iroda {
    grid-template-columns: 34px 180px 1fr 236px;
    grid-template-areas: "rang marka kozep ajanlat";
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
  }
  .marka { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .plakat { width: 150px; height: 62px; }
  .verdikt { display: none; }
  .ajanlat { text-align: center; }
  /* Egy sorban maradjon a gombfelirat — a kétsoros gomb csúnyán néz ki. */
  .ajanlat .gomb { font-size: .875rem; padding: .7rem .9rem; white-space: nowrap; }
}

/* Nulla találat */
.ures-allapot {
  background: var(--feher);
  border: 1px dashed var(--keret-eros);
  border-radius: var(--ker-nagy);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.ures-allapot p { color: var(--szoveg-halk); margin: .5rem 0 1.1rem; }

/* ============================================================
   TARTALMI SZEKCIÓK
   ============================================================ */

.doboz {
  background: var(--feher);
  border: 1px solid var(--keret);
  border-radius: var(--ker-nagy);
  padding: 1.4rem;
  margin-top: 1.5rem;
}
.doboz h2 { margin-bottom: .8rem; }
.doboz p { color: var(--szoveg-halk); margin: 0 0 .8rem; max-width: 72ch; }
.doboz p:last-child { margin-bottom: 0; }

.szempontok {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
  margin-top: 1.1rem;
}
@media (min-width: 700px) { .szempontok { grid-template-columns: repeat(3, 1fr); } }

.szempont {
  background: var(--halvany);
  border-radius: var(--ker);
  padding: 1rem;
}
.szempont h3 { font-size: .95rem; margin-bottom: .35rem; }
.szempont p { font-size: .85rem; margin: 0; }

/* Kérdés-válasz */
details.kerdes {
  border-top: 1px solid var(--keret);
  padding: .9rem 0;
}
details.kerdes:first-of-type { border-top: none; }
details.kerdes summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
details.kerdes summary::-webkit-details-marker { display: none; }
details.kerdes summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--szoveg-halvany);
  line-height: 1;
  flex-shrink: 0;
}
details.kerdes[open] summary::after { content: "–"; }
details.kerdes p {
  color: var(--szoveg-halk);
  font-size: .9rem;
  margin: .7rem 0 0;
  max-width: 72ch;
}

/* ============================================================
   LÁBLÉC
   ============================================================ */

.lablec {
  background: var(--tinta);
  color: rgba(255, 255, 255, .68);
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  font-size: .875rem;
}
.lablec-racs {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2rem;
}
@media (min-width: 700px) { .lablec-racs { grid-template-columns: 1.4fr 1fr 1fr; } }

.lablec h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.lablec ul { list-style: none; margin: 0; padding: 0; }
.lablec li { margin-bottom: .5rem; }
.lablec a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.lablec a:hover { color: var(--sarga); }
.lablec .jel { font-size: 1.2rem; margin-bottom: .8rem; }
.lablec .bemutato { max-width: 42ch; margin: 0; }

.lablec-alj {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
}

.felnott {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}
.felnott .karika {
  width: 30px; height: 30px;
  border: 2px solid var(--piros);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* ============================================================
   VISSZAJELZÉS (másolás)
   ============================================================ */

.pirit {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  background: var(--tinta);
  color: #fff;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--arnyek-emelt);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 80;
}
.pirit.latszik { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* Rejtett elem MINDIG rejtett maradjon, akkor is, ha valamelyik
   osztály display-t állítana rá. */
[hidden] { display: none !important; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--tinta);
  color: #fff;
  padding: 2.75rem 0 2.25rem;
  position: relative;
  overflow: hidden;
}
/* Halvány sárga fényfolt — ad egy kis mélységet a fekete sávnak
   anélkül, hogy képet kellene betölteni hozzá. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 45% auto -10%;
  height: 150%;
  background: radial-gradient(45% 45% at 30% 40%, rgba(250, 255, 0, .13) 0%, transparent 70%);
  pointer-events: none;
}
.hero .sav { position: relative; }

.hero-cimke {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sarga);
  margin: 0 0 .8rem;
}
.hero h1 { max-width: 16ch; margin-bottom: .9rem; }
.hero .kiemelt {
  color: var(--sarga);
  /* Aláhúzás, ami nem vágja el a betűszárakat. */
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .13em;
}
.hero-alcim {
  color: rgba(255, 255, 255, .72);
  max-width: 56ch;
  margin: 0;
  font-size: 1rem;
}

.adatcsik {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 2rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ker-nagy);
  overflow: hidden;
}
@media (min-width: 720px) { .adatcsik { grid-template-columns: repeat(4, 1fr); } }

.adat {
  background: var(--tinta);
  padding: .95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.adat strong {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--sarga);
  font-variant-numeric: tabular-nums;
}
.adat span {
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.35;
}

/* ============================================================
   GYORSVÁLASZTÓ CHIPEK
   ============================================================ */

.chipsor {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.1rem 0 0;
}
.chip {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--keret-eros);
  background: var(--feher);
  color: var(--szoveg-halk);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--szoveg-halvany); color: var(--szoveg); }
.chip.aktiv {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

/* ============================================================
   KÁRTYA — címkék és részletek
   ============================================================ */

.cimkesor {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .8rem;
}
.cimke {
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--halvany);
  color: var(--szoveg-halk);
  white-space: nowrap;
}

details.reszletek { margin-top: .75rem; }
details.reszletek summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: var(--szoveg-halk);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
details.reszletek summary::-webkit-details-marker { display: none; }
details.reszletek summary::after {
  content: "▾";
  font-size: .8em;
  transition: transform .18s ease;
}
details.reszletek[open] summary::after { transform: rotate(180deg); }
details.reszletek summary:hover { color: var(--szoveg); }

.reszlet-torzs {
  margin-top: .7rem;
  padding: .9rem;
  background: var(--halvany);
  border-radius: var(--ker);
}
.reszlet-torzs > p:first-child {
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--szoveg-halk);
}

.adatlap {
  display: grid;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: .82rem;
}
@media (min-width: 560px) { .adatlap { grid-template-columns: 1fr 1fr; } }
.adatlap > div { display: flex; gap: .4rem; }
.adatlap dt { font-weight: 700; flex-shrink: 0; }
.adatlap dt::after { content: ":"; }
.adatlap dd { margin: 0; color: var(--szoveg-halk); }

/* Asztalon a rövid leírás a részletek közt él, a kártyán nem kell. */
@media (min-width: 960px) {
  .reszlet-torzs > p:first-child { display: block; }
}

/* ============================================================
   ÖSSZEHASONLÍTÓ TÁBLÁZAT
   ============================================================ */

/* Széles tartalom SAJÁT dobozában görgessen — a lap törzse soha
   ne csússzon oldalra. */
.tabla-keret {
  overflow-x: auto;
  border: 1px solid var(--keret);
  border-radius: var(--ker);
  -webkit-overflow-scrolling: touch;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  min-width: 620px;
}
.tabla th, .tabla td {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--keret);
  vertical-align: middle;
}
.tabla thead th {
  background: var(--halvany);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--szoveg-halvany);
  white-space: nowrap;
}
.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: #fafafa; }
.tabla td { color: var(--szoveg-halk); }

.tabla-marka {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  white-space: nowrap;
}
.tabla-marka img {
  width: 52px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.tabla-pont {
  display: inline-block;
  min-width: 2.4rem;
  text-align: center;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--sarga);
  color: var(--tinta);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tabla-cta { text-align: right; white-space: nowrap; }
.tabla-cta a {
  font-weight: 700;
  color: var(--szoveg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tabla-cta a:hover { color: #000; }

/* ============================================================
   LÉPÉSEK
   ============================================================ */

.lepesek {
  list-style: none;
  counter-reset: l;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 820px) { .lepesek { grid-template-columns: repeat(3, 1fr); } }

.lepesek li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.lepes-szam {
  width: 30px; height: 30px;
  flex-shrink: 0;
  background: var(--sarga);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .9rem;
}
.lepesek h3 { font-size: .95rem; margin-bottom: .3rem; }
.lepesek p { font-size: .85rem; color: var(--szoveg-halk); margin: 0; }