/* ============================================================================
   ELBA 2.0 — a nyilvános weboldal közös arculata
   ----------------------------------------------------------------------------
   2026-09-27: az új főoldal (5. kör, prémium fotós irány) nyelvére igazítva —
   Geist + Geist Mono betű, sötét 56 px-es menüsáv, törtfehér lábléc, 600-as
   súlyú, szorosabb betűközű címek, 10 px-es gombsugár, a zöld csak a telt
   gombon és a jelzéseken; szövegben a sötétebb link-zöld (#3E6B12) olvasható.
   A főoldal (index.html) saját stíluslapot visz, de ugyanezekkel az értékekkel.

   A design kézirat (design_handoff_elba_2) minden stílust inline-ban adott meg,
   mert a tervezőeszköz így dolgozik. A production kódban ennek osztályok és
   tokenek felelnek meg: egy helyen írjuk le a színt, a méretet és a térközt, és
   minden oldal ugyanazt használja. Ha a zöld egyszer változik, egy sort kell
   átírni, nem tizenöt fájlt.

   Felépítés:
     1. Tokenek            — színek, tipográfia, sugarak, árnyékok
     2. Alapok             — reset, tipográfiai skála
     3. Elrendezés         — szekciók, tartalomszélességek, rácsok
     4. Elemek             — gomb, kártya, badge, chip, mono címke, táblázat, űrlap
     5. Ismétlődő sávok    — bejelentősáv, fejléc, zöld CTA, lábléc
     6. Mobil              — 900px és 640px töréspont
   ========================================================================== */

/* ---------- 1. Tokenek ---------- */
:root{
  /* márka */
  --zold:#7cb342;
  --zold-hover:#6CA036;
  --zold-sotet:#699a34;
  --zold-vilagos:#A9DB72;      /* sötét háttéren olvasható zöld */
  --link:#3E6B12;              /* világos háttéren olvasható zöld szöveg */
  --link-hover:#2C4F0B;
  --gomb-tinta:#0B1206;        /* a zöld gomb szövege */
  --zold-pasztell-szoveg:#4e7d1e;

  /* szöveg */
  --tinta:#1C1D1B;
  --tinta-hover:#000000;
  --torzs:#4A4C47;
  --torzs-2:#4A4C47;
  --torzs-3:#3D403A;
  --masodlagos:#6B6D68;
  --halvany:#8E908A;
  --halvany-2:#9A9C96;
  --soteten-vilagos:#A3A59F;
  --soteten-vilagos-2:#D6D7D2;

  /* felületek */
  --lap:#FFFFFF;
  --halvany-hatter:#F4F4F1;
  --szurkes-hatter:#F4F4F1;
  --zold-pasztell:#e7f0d5;
  --zold-pasztell-keret:#CDE3B6;
  --canvas:#ECECE7;
  --sotet-felulet:#0B0C0B;
  --sotet:#0B0C0B;

  /* keretek */
  --keret:#E6E6E1;
  --keret-eros:#DCDCD6;
  --keret-gomb:#CFD0CA;
  --sotet-keret:rgba(255,255,255,.10);
  --sotet-keret-2:rgba(255,255,255,.18);

  /* sugarak */
  --r-gomb:10px;
  --r-gomb-kicsi:8px;
  --r-kartya:16px;
  --r-kartya-nagy:20px;
  --r-pill:999px;

  /* árnyékok */
  --arny-ar:0 30px 70px -30px rgba(20,24,16,.35);
  --arny-panel:0 12px 40px rgba(24,24,24,.06);
  --arny-kep:0 -6px 60px rgba(24,24,24,.16);
  --arny-mobil:0 18px 44px rgba(24,24,24,.14);

  /* elrendezés */
  --betu:"Geist",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --tartalom:1160px;
  --szekcio-padding:80px 44px;

  --atmenet:150ms ease;
}

/* ---------- 2. Alapok ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--lap); color:var(--tinta);
  font-family:var(--betu);
  font-size:16px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%}
a{color:var(--link); text-decoration:none; transition:color var(--atmenet)}
a:hover{color:var(--link-hover)}
h1,h2,h3,h4{margin:0; color:var(--tinta); text-wrap:balance}
p{margin:0; text-wrap:pretty}

h1{font-size:56px; font-weight:600; line-height:1.04; letter-spacing:-.04em}
/* A hero címsorában kézzel van a sortörés (<br>), ezért itt a `balance` csak
   összeveszne vele — a tördelést a szerző dönti el. */
h1.hero{font-size:72px; line-height:1.0; letter-spacing:-.045em; text-wrap:normal}
h1.rovid{font-size:48px}
h2{font-size:40px; font-weight:600; line-height:1.1; letter-spacing:-.035em}
h2.kicsi{font-size:34px; letter-spacing:-.035em}
h3{font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
h3.nagy{font-size:24px; letter-spacing:-.025em}

.bevezeto{font-size:19px; line-height:1.6; color:var(--torzs)}
.torzs{font-size:16px; line-height:1.65; color:var(--masodlagos)}
.meta{font-size:13px; color:var(--masodlagos)}
.halvany-szoveg{color:var(--halvany)}

/* kis, verzálos mono címke — a design visszatérő eleme */
.mono{
  font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--link);
}
.mono.halk{color:var(--masodlagos); letter-spacing:.10em}

/* ---------- 3. Elrendezés ---------- */
.szekcio{padding:var(--szekcio-padding)}
.szekcio.tomor{padding:64px 44px}
.szekcio.szurke{background:var(--szurkes-hatter)}
.szekcio.halvany{background:var(--halvany-hatter)}
.szekcio.sotet{background:var(--sotet); color:var(--soteten-vilagos)}
.szekcio.sotet .mono{color:var(--zold-vilagos)}
.szekcio.sotet h1,.szekcio.sotet h2,.szekcio.sotet h3{color:#fff}
.belso{max-width:var(--tartalom); margin:0 auto}
.belso.keskeny{max-width:1000px}
.belso.gyik{max-width:900px}
.belso.cikk{max-width:720px}
.belso.kozep{max-width:820px; text-align:center}

.oszlop{display:flex; flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.g36{gap:36px}.g44{gap:44px}
.racs{display:grid; gap:20px}
/* Rácselem alapból `min-width:auto`, tehát nem tud a tartalmánál keskenyebb lenni —
   emiatt egy hosszú szó vagy egy nem törő sor kitolja az egész oldalt mobilon. */
.racs>*,.ketoszlop>*,.lablec .oszlopok>*{min-width:0}
.racs.k2{grid-template-columns:repeat(2,1fr)}
.racs.k3{grid-template-columns:repeat(3,1fr)}
.racs.k4{grid-template-columns:repeat(4,1fr)}
.ketoszlop{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}

/* szekciófej: mono címke + H2, opcionálisan jobbra tolt linkkel */
.szekciofej{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:44px}
.szekciofej .cim{display:flex; flex-direction:column; gap:14px; max-width:620px}
.szekciofej.kozepre{flex-direction:column; align-items:center; text-align:center}
.szekciofej.kozepre .cim{align-items:center}

/* ---------- 4. Elemek ---------- */
.gomb{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:17px; font-weight:600;
  background:var(--zold); color:var(--gomb-tinta);
  padding:14px 28px; border:1px solid transparent; border-radius:var(--r-gomb);
  cursor:pointer; transition:background var(--atmenet),border-color var(--atmenet),color var(--atmenet);
  text-align:center;
}
.gomb:hover{background:var(--zold-hover); color:var(--gomb-tinta)}
.gomb.kicsi{font-size:14px; font-weight:600; padding:9px 16px; border-radius:var(--r-gomb-kicsi)}
.gomb.kozepes{font-size:15px; font-weight:600; padding:12px 22px}
.gomb.teljes{width:100%}

.gomb.korvonal{background:var(--lap); color:var(--tinta); border-color:var(--keret-gomb); font-weight:600}
.gomb.korvonal:hover{background:var(--lap); border-color:var(--tinta)}

.gomb.sotet{background:var(--sotet); color:#fff}
.gomb.sotet:hover{background:var(--tinta-hover); color:#fff}

/* zöld sávon belüli áttetsző keretes gomb */
.gomb.attetszo{background:transparent; color:var(--tinta); border-color:rgba(24,24,24,.35); font-weight:600}
.gomb.attetszo:hover{background:transparent; border-color:var(--tinta)}

.kartya{
  background:var(--lap); border:1px solid var(--keret); border-radius:var(--r-kartya);
  padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:border-color var(--atmenet);
}
.kartya:hover{border-color:var(--keret-gomb)}
.kartya.nagy{border-radius:var(--r-kartya-nagy); padding:36px; gap:16px}
.kartya.lapos{background:var(--szurkes-hatter); border-color:transparent; border-radius:var(--r-kartya-nagy); padding:30px}
.kartya.lapos:hover{border-color:transparent}
.kartya.sotet{background:var(--sotet); border-color:var(--sotet); border-radius:var(--r-kartya-nagy); padding:30px; justify-content:space-between}
.kartya.sotet h3{color:#fff}
.kartya.sotet p{color:var(--soteten-vilagos)}
.kartya p{font-size:15px; line-height:1.6; color:var(--masodlagos); margin:0}
.kartya.nagy p{font-size:16px; line-height:1.65}

/* számozott ikonkeret a funkciókártyákon */
.sorszam{
  width:38px; height:38px; border-radius:8px; background:var(--zold-pasztell);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:500; color:var(--link); font-size:14px;
}
.zold-csik{width:36px; height:4px; background:var(--zold); border-radius:2px; display:block}

.badge{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  background:var(--zold-pasztell); border:1px solid rgba(124,179,66,.5);
  color:var(--zold-pasztell-szoveg); padding:7px 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:600;
}
.badge .pont{width:7px; height:7px; border-radius:50%; background:var(--zold)}

.chip{
  font-family:var(--mono); font-size:12px;
  color:var(--zold-pasztell-szoveg); background:var(--zold-pasztell);
  border:1px solid var(--zold-pasztell-keret); padding:6px 11px; border-radius:5px;
}
/* horgonyzott navigációs pill (Funkciók oldal) */
.pill{
  display:inline-flex; align-items:center; background:var(--szurkes-hatter);
  color:var(--tinta); font-size:15px; font-weight:500;
  padding:9px 18px; border-radius:var(--r-gomb); border:1px solid transparent;
  transition:border-color var(--atmenet),background var(--atmenet);
}
.pill:hover{border-color:var(--keret-gomb); color:var(--tinta)}
.pill.aktiv{background:var(--sotet); color:#fff}

/* képhelykitöltő — ide valódi képernyőkép vagy fotó kerül */
.kephely{
  background:repeating-linear-gradient(135deg,#F2F3F0 0 12px,#E7E9E4 12px 24px);
  display:flex; align-items:center; justify-content:center; min-height:200px;
}
.kephely .cimke{
  font-family:var(--mono); font-size:12px;
  color:var(--masodlagos); background:#fff; padding:8px 14px; border-radius:4px;
  text-align:center;
}
/* böngészőkeret a képernyőképek köré */
.bongeszo{border:1px solid var(--keret-eros); border-radius:12px; overflow:hidden; background:#fff}
/* Saját osztálynév, nem `.fejlec` — az az oldal sticky fejléce, és a két szabály
   összeakadna (justify-content, position). */
.bongeszo .sav{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--canvas); border-bottom:1px solid var(--keret-eros);
}
.bongeszo .pont{width:9px; height:9px; border-radius:50%; background:var(--keret-gomb)}
.bongeszo .utvonal{font-family:var(--mono); font-size:11px; color:var(--halvany); margin-left:8px}

/* statisztika */
.stat{display:flex; flex-direction:column; gap:6px}
.stat .szam{font-size:44px; font-weight:600; letter-spacing:-.04em; color:var(--tinta)}
.stat .szam.zold{color:var(--link)}
.stat .leiras{font-size:14px; color:var(--masodlagos); line-height:1.5}

/* táblázat */
.tabla{width:100%; border-collapse:collapse; font-size:15px}
.tabla th,.tabla td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--keret-eros)}
.tabla th{font-weight:600; font-size:14px; background:var(--szurkes-hatter)}
.tabla th.kiemelt{background:var(--zold-pasztell); color:var(--zold-pasztell-szoveg)}
.tabla td{color:var(--torzs-2); line-height:1.6}
.tabla .ok{color:var(--link); font-weight:600}
.tabla .nincs{color:var(--halvany)}

/* űrlap */
.mezo{display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; color:var(--tinta)}
.mezo input,.mezo select,.mezo textarea{
  font-family:inherit; font-size:15px; color:var(--tinta); background:#fff;
  border:1px solid var(--keret-eros); border-radius:var(--r-gomb); padding:14px 15px;
  outline:none; transition:border-color var(--atmenet); font-weight:400;
}
.mezo input:focus,.mezo select:focus,.mezo textarea:focus{border-color:var(--zold); box-shadow:0 0 0 3px rgba(124,179,66,.18)}
.mezo textarea{min-height:130px; resize:vertical; line-height:1.6}
.jelolo{display:flex; align-items:flex-start; gap:9px; font-size:14px; font-weight:400; color:var(--masodlagos); line-height:1.5}
.jelolo input{accent-color:var(--zold); margin-top:3px}
.hiba{font-size:13px; color:#B4451F; font-weight:600}
.mezo.hibas input,.mezo.hibas select,.mezo.hibas textarea{border-color:#B4451F}

/* GYIK */
.gyik details{border-top:1px solid var(--keret-eros); padding:18px 0}
.gyik details:last-child{border-bottom:1px solid var(--keret-eros)}
.gyik summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; font-size:16px; font-weight:600; color:var(--tinta); list-style:none;
}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary .plusz{font-size:20px; color:var(--link); transition:transform .2s ease}
.gyik details[open] summary .plusz{transform:rotate(45deg)}
.gyik details p{margin:12px 0 0; font-size:15px; line-height:1.65; color:var(--masodlagos)}

/* horgonyzott célpontok a sticky fejléc alatt */
[id]{scroll-margin-top:80px}

/* ---------- 5. Ismétlődő sávok ---------- */
.bejelentes{
  background:var(--szurkes-hatter); color:var(--torzs); font-size:13px;
  padding:9px 44px; display:flex; justify-content:center; align-items:center; gap:10px;
  text-align:center; flex-wrap:wrap;
}
.bejelentes .uj{
  background:var(--zold); color:var(--gomb-tinta); font-weight:600; font-size:11px;
  padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.04em;
}
.bejelentes a{color:var(--link); font-weight:500}
.bejelentes a:hover{color:var(--link-hover)}

/* Fejléc: ugyanaz a sötét, 56 px-es üvegsáv, mint a főoldalon. Három oszlop:
   logó balra, menü középen, belépés/gomb jobbra. */
.fejlec{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px;
  height:56px; padding:0 max(22px, calc((100% - 1200px) / 2));
  background:rgba(11,12,11,.86); color:var(--soteten-vilagos-2);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; z-index:50;
}
.fejlec>a:first-child{justify-self:start; display:flex}
.fejlec .logo{height:22px; width:auto; display:block}
.fejlec nav{display:flex; align-items:center; gap:32px; font-size:13px; font-weight:500; letter-spacing:.005em}
.fejlec nav a{color:var(--soteten-vilagos-2); transition:color .3s}
.fejlec nav a:hover{color:#fff}
.fejlec nav a.aktiv{color:#fff; box-shadow:inset 0 -1px 0 var(--zold)}
.fejlec .jobb{display:flex; align-items:center; gap:18px; justify-self:end}
.nyelv{
  display:flex; align-items:center; font-family:var(--mono);
  font-size:11px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-gomb-kicsi); overflow:hidden;
}
.nyelv span{padding:3px 8px; color:var(--soteten-vilagos); cursor:default}
.nyelv span.aktiv{background:rgba(255,255,255,.14); color:#fff; font-weight:500}
.fejlec .belepes-link{font-size:13px; font-weight:500; color:var(--soteten-vilagos-2)}
.fejlec .belepes-link:hover{color:#fff}
.fejlec .gomb.kicsi{font-size:13px; padding:7px 14px; border-radius:8px; white-space:nowrap}
.hamburger{display:none; width:40px; height:40px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:#F4F4F1}
.hamburger span{display:block; width:18px; height:1.5px; background:currentColor; position:relative}
.hamburger span::before,.hamburger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}

/* Záró felhívás: sötét sáv, mint a főoldal zárása. A régi zöld sáv gombjai
   (.gomb.sotet + .gomb.attetszo) itt zöld telt + világos keretes gombként jelennek meg. */
.cta-sav{background:var(--sotet); color:var(--tinta-s,#F4F4F1); padding:88px 44px}
.cta-sav .belso{display:flex; align-items:center; justify-content:space-between; gap:48px}
.cta-sav h2{font-size:40px; font-weight:600; letter-spacing:-.035em; margin:0; color:#F4F4F1}
.cta-sav p{font-size:17px; color:var(--soteten-vilagos); margin:0}
.cta-sav .gomb.sotet{background:var(--zold); color:var(--gomb-tinta)}
.cta-sav .gomb.sotet:hover{background:var(--zold-hover)}
.cta-sav .gomb.attetszo{color:#F4F4F1; border-color:rgba(255,255,255,.3)}
.cta-sav .gomb.attetszo:hover{border-color:#fff; color:#fff}
.cta-sav .gombok{display:flex; gap:12px; white-space:nowrap}

/* Lábléc: törtfehér, halk — mint a főoldalon. */
.lablec{background:var(--szurkes-hatter); padding:56px 44px 36px; color:var(--masodlagos)}
.lablec .oszlopok{max-width:var(--tartalom); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
/* A logó flex-oszlop gyereke, és az alapértelmezett `align-items:stretch` a teljes
   oszlopszélességre húzta — rögzített magassággal ez torzulást adott. A `flex-start`
   meghagyja a kép saját arányát. */
.lablec img{height:22px; width:auto; align-self:flex-start}
.lablec p,.lablec span,.lablec a{font-size:13px; line-height:1.6}
.lablec a{color:var(--torzs)}
.lablec a:hover{color:var(--tinta); text-decoration:underline}
.lablec .fejcim{color:var(--tinta); font-weight:600; margin-bottom:4px}
.lablec .zaras{
  max-width:var(--tartalom); margin:36px auto 0; padding-top:20px;
  border-top:1px solid var(--sotet-keret); display:flex; justify-content:space-between;
  font-size:12px; color:var(--masodlagos); gap:16px; flex-wrap:wrap;
}

/* ---------- 6. Mobil ---------- */
@media (max-width:900px){
  :root{--szekcio-padding:56px 20px}
  h1{font-size:40px}
  h1.hero{font-size:44px}
  h1.rovid{font-size:34px}
  h2{font-size:32px}
  h2.kicsi{font-size:28px}
  .bevezeto{font-size:17px}

  .fejlec{padding:0 20px; gap:12px; grid-template-columns:1fr auto}
  .fejlec nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--sotet); padding:8px 20px 16px; box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  }
  .fejlec nav.nyitva{display:flex}
  .fejlec nav a{padding:14px 0; font-size:17px; border-bottom:1px solid rgba(255,255,255,.08)}
  .fejlec nav a.aktiv{box-shadow:none; color:var(--zold-vilagos)}
  .hamburger{display:flex}
  .fejlec .jobb{gap:8px}
  .fejlec .jobb .nyelv,.fejlec .jobb .belepes-link{display:none}

  .racs.k2,.racs.k3,.racs.k4{grid-template-columns:1fr}
  .ketoszlop{grid-template-columns:1fr; gap:40px}
  .szekciofej{flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:28px}

  .cta-sav{padding:64px 20px}
  .cta-sav .belso{flex-direction:column; align-items:flex-start; gap:24px}
  .cta-sav h2{font-size:28px}
  .cta-sav .gombok{width:100%; flex-direction:column; white-space:normal}

  .lablec{padding:40px 20px 28px}
  .lablec .oszlopok{grid-template-columns:1fr 1fr; gap:28px}
  .bejelentes{padding:9px 20px; font-size:12.5px}
}
@media (max-width:640px){
  .gomb{width:100%; font-size:16px; padding:16px 22px}
  .gomb.kicsi{width:auto; padding:11px 18px}
  .stat .szam{font-size:36px}
  .lablec .oszlopok{grid-template-columns:1fr}
  .tabla th,.tabla td{padding:12px 10px; font-size:14px}
}