/* =========================================================
   Kistermelők Térképe – közös stíluslap
   Látványvilág: lapos, színes vektoros („magyarázóvideó”) stílus,
   „Citrus Liget” paletta („fent ég, lent föld”), árcédula motívumokkal.
   A tokenek forrása: website/design/terv/fejlec-es-designrendszer.md 1.2 és 2.
   ========================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ===== 1. Alapszínek (primitívek) – közvetlenül csak ott, ahol a terv 1.3 táblája így írja ===== */
  --green-50:  #E5FAE8;   /* halvány zöld felület (kijelölés, chip) */
  --green-100: #CDF4D4;   /* „ellenőrzött” cédula háttér, ikonkör */
  --green-200: #B0E3BA;   /* görgetősáv, halvány díszítés */
  --green-400: #5CC95A;   /* PALETTA: középzöld – csak díszítés */
  --green-600: #157A3B;   /* PALETTA: fő zöld */
  --green-700: #006B2D;   /* fő zöld, rámutatás (hover) */
  --green-800: #005D1F;   /* fő zöld, lenyomva; sötét szöveg zöld alapon */
  --green-900: #073A2B;   /* PALETTA: mély */
  --green-950: #0F271B;   /* PALETTA: tinta */
  --sage-500:  #44604F;   /* PALETTA: halvány szöveg */
  --sage-400:  #658270;   /* erős vonal: űrlapmező kerete */
  --sage-200:  #CBDDCE;   /* díszítő elválasztó vonal */
  --lime-50:   #EDFFCB;
  --lime-100:  #E0FCA7;
  --lime-400:  #C4F23A;   /* PALETTA: lime */
  --lime-500:  #B4E11B;   /* lime gomb, rámutatás */
  --mandarin-50:  #FFEBD7;
  --mandarin-100: #FFDBBF;
  --mandarin-400: #FF8A2B; /* PALETTA: mandarin – csak rajz, jelölő, nagy szöveg sötéten */
  --mandarin-700: #934400; /* szöveg mandarin-halvány alapon */
  --mandarin-800: #7D3500;
  --raspberry-50:  #FFE7EF;
  --raspberry-100: #FFD4E1;
  --raspberry-400: #F25A8F; /* rajz: világosabb málna */
  --raspberry-500: #E2367A; /* PALETTA: málna – csak rajz és nagy szöveg */
  --raspberry-700: #B5015A; /* rajz: árnyék; fehér szöveg alatta is olvasható */
  --turquoise-50:  #E0FCF8;
  --turquoise-100: #C5F3EC;
  --turquoise-300: #9FEDE4; /* PALETTA: világos ég */
  --turquoise-400: #45CFC2; /* PALETTA: türkiz */
  --turquoise-800: #00564F; /* szöveg türkiz-halvány alapon */
  --blue-you:  #2A7DE1;     /* „itt vagy” pont: térképes megszokás, szándékosan kék */
  --wood-400:  #D9A066;     /* rajz: fa láda */
  --wood-600:  #A8673F;

  /* ===== 2. Szerepek (ezeket használja a CSS) ===== */
  --bg: #F4FAE8;                       /* PALETTA: oldalháttér */
  --surface: #FFFFFF;                  /* kártya, panel */
  --surface-tint: var(--green-50);     /* halvány kiemelt felület */
  --ink: var(--green-950);             /* fő szöveg */
  --ink-soft: var(--sage-500);         /* másodlagos szöveg */
  --line: var(--sage-200);             /* díszítő vonal (nem kell 3:1) */
  --line-strong: var(--sage-400);      /* mezőkeret, gombkeret (≥ 3:1) */

  --primary: var(--green-600);         /* elsődleges gomb, link */
  --primary-hover: var(--green-700);
  --primary-active: var(--green-800);
  --on-primary: #FFFFFF;
  --primary-pale: var(--green-100);

  --accent: var(--lime-400);           /* kiemelés, kijelölés, aktív jelölő */
  --accent-hover: var(--lime-500);
  --accent-pale: var(--lime-50);       /* megjegyzés, üres állapot háttér */
  --on-accent: var(--ink);

  --sky: var(--turquoise-300);         /* fejléc ege, rajzok ege */
  --deep: var(--green-900);            /* fülsor, lábléc, intró háttér */
  --deep-hover: #184738;
  --on-deep: #FFFFFF;
  --on-deep-soft: #C6DED4;             /* szöveg mélyzöldön */
  --on-deep-muted: #B6CEC4;            /* inaktív fül, apró szöveg mélyzöldön */

  --link: var(--primary);
  --link-hover: var(--primary-hover);
  --focus: var(--ink);                 /* fókuszgyűrű világos alapon */
  --focus-on-deep: var(--lime-400);    /* fókuszgyűrű sötét (vagy fő zöld) alapon */
  --selection-bg: var(--lime-400);     /* ::selection */
  --disabled-bg: #DEE8DF;
  --disabled-text: #76847B;

  /* Állapotok (a jelmagyarázattal, a cédulákkal és a térképpel egyezik) */
  --status-ok: var(--green-600);
  --status-ok-bg: var(--green-100);
  --status-ok-text: var(--green-800);
  --status-pending: var(--mandarin-400);
  --status-pending-bg: var(--mandarin-100);
  --status-pending-text: var(--mandarin-800);
  --status-example-bg: var(--lime-400);   /* „Példa” címke */
  --status-example-text: var(--ink);
  --cluster: var(--deep);                 /* térképcsoport */
  --cluster-text: var(--lime-400);
  --map-contour: var(--deep);             /* vékony körvonal a pontok körül */
  --map-selected-halo: rgb(196 242 58 / 0.5);
  --you: var(--blue-you);
  --distance-bg: var(--turquoise-100);
  --distance-text: var(--turquoise-800);

  /* Helyőrző: a tulajdonosnak kell kitöltenie (hangos, mandarin) */
  --placeholder-bg: var(--mandarin-50);
  --placeholder-text: var(--mandarin-700);
  --placeholder-line: var(--mandarin-400);

  /* Rajzok (illusztráció) – csak SVG-ben vagy nagy szövegben */
  --illus-raspberry: var(--raspberry-500);
  --illus-raspberry-light: var(--raspberry-400);
  --illus-raspberry-deep: var(--raspberry-700);
  --illus-mandarin: var(--mandarin-400);
  --illus-turquoise: var(--turquoise-400);
  --illus-wood: var(--wood-400);
  --illus-wood-deep: var(--wood-600);

  /* Fejléc-táj */
  --land-sky: var(--sky);
  --land-far: var(--lime-400);
  --land-mid: var(--green-400);
  --land-near: var(--green-600);
  --land-road: var(--bg);              /* oldalanként felülírható (térkép: --surface) */
  --land-plowed: var(--mandarin-100);  /* a traktor mögötti „felszántott” út */

  /* Térkép-előnézet a főoldalon (5.4): víz és ég, rajta az ország „matricaként” */
  --minikep-viz: var(--turquoise-50);
  --minikep-orszag: var(--green-100);
  --minikep-perem: var(--green-200);
  --minikep-talp: rgb(7 58 43 / 0.08);  /* az ország 6 egységgel lejjebb tolt árnyéka */
  --minikep-to: var(--illus-turquoise);
  --minikep-folyo: var(--illus-turquoise);

  /* Árnyékok: mélyzöldre színezve, nem feketére */
  --shadow-sm: 0 1px 2px rgb(7 58 43 / 0.10), 0 6px 16px -8px rgb(7 58 43 / 0.32);
  --shadow: 0 2px 6px rgb(7 58 43 / 0.08), 0 16px 36px -14px rgb(7 58 43 / 0.38);
  --shadow-tab: 0 -6px 24px -10px rgb(7 58 43 / 0.45);   /* fülsor */
  /* Puha 3D („soft 3D”): elmosott belső fény felül + belső árnyék alul (felfújt hatás), és többrétegű,
     nagy elmosású külső árnyék. Nincs 0 elmosású, kemény szél. */
  --soft-domb: inset 0 2px 3px rgb(255 255 255 / 0.55), inset 0 -6px 12px rgb(7 58 43 / 0.12);
  --soft-domb-sotet: inset 0 2px 4px rgb(255 255 255 / 0.28), inset 0 -6px 12px rgb(0 32 12 / 0.28);
  --soft-arnyek: 0 1px 2px rgb(7 58 43 / 0.08), 0 8px 18px -8px rgb(7 58 43 / 0.30), 0 22px 36px -22px rgb(7 58 43 / 0.32);
  --soft-arnyek-emelt: 0 2px 4px rgb(7 58 43 / 0.08), 0 16px 28px -10px rgb(7 58 43 / 0.34), 0 34px 54px -26px rgb(7 58 43 / 0.36);
  --soft-panel: 0 -2px 6px rgb(7 58 43 / 0.10), 0 30px 80px -20px rgb(7 40 25 / 0.55), 0 60px 120px -40px rgb(7 40 25 / 0.45);
  --hos-eg: #FFF1BC;                   /* a felugró oldal fejlécének ege (napsárga pasztell; tinta szöveg 15:1) */

  /* ===== 3. Betű (méretek; mobil → asztali) ===== */
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-giant: clamp(3.5rem, calc((100vw - 2 * var(--gutter)) / 4.6), 12rem); /* bemutató óriásszava */
  --fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);   /* főoldal H1 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;   /* 17 px */
  --fs-small: 0.9375rem;  /* 15 px */
  --fs-label: 0.8125rem;  /* 13 px: fülsor, jelmagyarázat, cédula – kisebbet ne */

  /* ===== 4. Térköz (4-es alap), sarok ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-xs: 6px;       /* cédula, fókuszgyűrű */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;      /* kártya, térkép-előnézet */
  --radius-xl: 28px;      /* a felugró oldal belső lapja */
  --radius-2xl: 36px;     /* a felugró oldal panelje */
  --radius-pill: 999px;   /* gombok, chipek, menüpontok */

  /* ===== 5. Mozgás ===== */
  --dur-press: 120ms;     /* gomb lenyomása */
  --dur-fast: 160ms;      /* rámutatás, színváltás */
  --dur-base: 220ms;      /* adatlap, értesítés, állapotváltás */
  --dur-slow: 320ms;      /* fejléc összehúzódása a tartalék módban */
  --dur-spring: 420ms;    /* a fülsor levele */
  --dur-drop: 520ms;      /* tűk leesése */
  --dur-hop: 620ms;       /* logó-tű pattanása */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* belépés, visszajelzés */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* képernyőn belüli mozgás */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);       /* alulról felcsúszó lap */
  /* rugó 2,8%-os túllendüléssel – csak a fülsor levelére és a tűkre */
  --ease-spring: linear(0, 0.101 5.6%, 0.309 11.1%, 0.529 16.7%, 0.715 22.2%, 0.853 27.8%, 0.943 33.3%, 0.995 38.9%, 1.020 44.4%, 1.028 50%, 1.027 55.6%, 1.021 61.1%, 1.015 66.7%, 1.009 72.2%, 1.005 77.8%, 1.002 83.3%, 1 88.9%, 1);
  --ease-fall: cubic-bezier(0.5, 0, 0.75, 0);          /* csak a pattanó tű lefelé eső szakasza */
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);       /* kis túllendülés: ugyanaz, mint a főoldali bevezető „pop”-ja (--bv-pop); a jelvény pecsétjére */
  --stagger: 40ms;        /* lépcsőzés, legfeljebb 8 elemig */

  /* ===== 6. Elrendezés és rétegsorrend ===== */
  --wrap: 1180px;
  /* viewport-fit=cover: fekve se kerüljön tartalom a bevágás alá */
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* Fejléc (mobil alapértékek; 800 px felett felülírva) */
  --fejlec-sav: 56px;            /* logó + menü sáv */
  --fejlec-taj: 28px;            /* tájkép-csík */
  --fejlec-sav-kompakt: 44px;
  --fejlec-taj-kompakt: 8px;
  --fejlec-teljes: calc(var(--fejlec-sav) + var(--fejlec-taj));                 /* 84 */
  --fejlec-kompakt: calc(var(--fejlec-sav-kompakt) + var(--fejlec-taj-kompakt)); /* 52 */
  --fejlec-osszecsukas: calc(var(--fejlec-teljes) - var(--fejlec-kompakt));      /* 32 */

  /* Fülsor (csak mobilon) */
  --fulsor-magassag: 64px;
  --fulsor-teljes: calc(var(--fulsor-magassag) + env(safe-area-inset-bottom, 0px));

  /* Lábléc dombéle (6.5) */
  --lablec-domb: 32px;

  /* Rétegsorrend (z-index) */
  --z-fejlec: 40;
  --z-fulsor: 45;
  --z-ugras: 100;           /* „Ugrás a tartalomra” */

  /* A bemutató magassága első látogatáskor: kitölti a fejléc és a fülsor közti részt */
  --bemutato-magassag: max(460px, calc(100svh - var(--fejlec-teljes) - var(--fulsor-teljes)));
  /* Teljes módban: a .keret tartalmának széle a teljes szélességű szakaszban, és a vezérlők
     (4.2) helye a dia alján, már az első kirajzoláskor lefoglalva (nincs ugrás, amikor megjelennek;
     mobilon két sor: a tárolási sor a „Kihagyom” mellett, alatta a lapozás) */
  --bemutato-szel: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter));
  --bemutato-vezerlok: 120px;
}

/* 360 px alatt a tárolási sor a „Kihagyom” mellett négy sorra törik */
@media (max-width: 359px) {
  :root {
    --bemutato-vezerlok: 136px;
  }
}

@media (min-width: 800px) {
  :root {
    --fejlec-sav: 72px;
    --fejlec-taj: 40px;               /* 112 */
    --fejlec-sav-kompakt: 56px;
    --fejlec-taj-kompakt: 14px;       /* 70; összecsukás 42 */
    --fulsor-teljes: 0px;
    --lablec-domb: 48px;
    --bemutato-magassag: max(560px, calc(100svh - var(--fejlec-teljes)));
    --bemutato-vezerlok: 72px;
  }
}

/* ---------- Alapok ---------- */

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A horgonyok ne bújjanak a ragadós (kompakt) fejléc alá, a fókuszált elemek a fülsor alá */
  scroll-padding-top: calc(var(--fejlec-kompakt) + 16px);
  scroll-padding-bottom: var(--fulsor-teljes);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

a {
  color: var(--link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 0.12em;
}

::selection {
  background: var(--selection-bg);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

.ikon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rejtett {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ugras {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: var(--z-ugras);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-deep);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.ugras:focus {
  transform: none;
  color: var(--on-deep);
}

.keret {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Fejléc: élő tájkép (fejlec-es-designrendszer.md 3.) ----------
   Fent ég, alul 3 dombréteg és a dűlőút a traktorral. Görgetésre összehúzódik, de a helyfoglalása
   nem változik (3.6). A) görgetéshez kötött CSS (lent, @supports); B) fejlec.js: .is-kompakt. */

.fejlec {
  --taj-tavoli: 34px;   /* a dombok magassága a dűlőút fölött (800 px felett nagyobb) */
  --taj-kozepso: 28px;
  --taj-kozeli: 22px;
  --taj-ut: 6px;
  position: sticky;
  top: 0;
  z-index: var(--z-fejlec);
  min-height: var(--fejlec-teljes);
  padding-bottom: var(--fejlec-taj);
  overflow: clip;
  background: var(--land-sky);
}

.fejlec,
.fejlec__sav,
.logo,
.taj__reteg,
.traktor__rajz {
  transition: transform var(--dur-slow) var(--ease-out);
}

/* A sáv (logó + menü) a táj fölött van: a csúcsok mögé bújnak */
.fejlec__sav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: var(--fejlec-sav);
}

.fejlec__belso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  transform-origin: 0 50%;
}

.logo:hover {
  color: var(--ink);
}

/* Térképtű, rajta Zsongi (40 × 70-es nézet); a pattanás a nézeten kívülre ér */
.logo__jel {
  width: 23px;
  height: 40px;
  overflow: visible;
}

.logo__szoveg {
  display: grid;
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* Mobilon nincs menü a fejlécben (az alsó fülsorba kerül) */
.fomenu {
  display: none;
}

.fomenu ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fomenu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}

/* Az égszínű fejlécen: rámutatva fehér 70% (tinta rajta 14,5:1) */
.fomenu a:hover {
  background: rgb(255 255 255 / 0.7);
  color: var(--ink);
}

.fomenu a:active {
  transform: scale(0.97);
}

/* Aktív menüpont: mély alap, lime szöveg (9,8:1) */
.fomenu a[aria-current="page"] {
  background: var(--deep);
  color: var(--accent);
}

/* Bemutató: fehér pirula (rámutatva is), málna lejátszás-ikon (SVG, nem betű) */
.fomenu .fomenu__bemutato,
.fomenu .fomenu__bemutato:hover {
  gap: 6px;
  padding-left: 11px;
  background: var(--surface);
}

/* A főoldalon, amíg a teljes módú bemutató látszik (fulsor.js, 4.6): mint a többi aktív menüpont */
.fomenu .fomenu__bemutato[aria-current],
.fomenu .fomenu__bemutato[aria-current]:hover {
  background: var(--deep);
  color: var(--accent);
}

.ikon--lejatszas {
  fill: var(--illus-raspberry);
  stroke: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fomenu__bemutato:hover .ikon--lejatszas {
    transform: scale(1.12);
  }
}

/* A táj az egész fejlécet lefedi (Zsongi a sáv magasságában is repülhet) */
.taj {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dombrétegek a dűlőúton (1 px-et alá is lógnak, hogy ne legyen rés); légperspektíva:
   hátul a legvilágosabb. A szélesebb réteg a parallaxisnál messzebbre csúszik. */
.taj__reteg {
  position: absolute;
  left: 0;
  bottom: calc(var(--taj-ut) - 1px);
  width: 100%;
}

.taj__reteg svg {
  height: 100%;
  max-width: none;
}

.taj__reteg--tavoli {
  height: var(--taj-tavoli);
  fill: var(--land-far);
}

.taj__reteg--kozepso {
  height: var(--taj-kozepso);
  fill: var(--land-mid);
}

.taj__reteg--kozeli {
  height: var(--taj-kozeli);
  fill: var(--land-near);
}

.taj__reteg--tavoli svg { width: 110%; }
.taj__reteg--kozepso svg { width: 120%; }
.taj__reteg--kozeli svg { width: 135%; }

/* Dűlőút az oldal háttérszínében, szaggatott középvonallal; a traktor útját méri (cqw) */
.taj__ut {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taj-ut);
  container-type: inline-size;
  background: var(--land-road) repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 22px) 0 2px / 100% 2px no-repeat;
}

/* „Felszántott” csík a traktor mögött: balról nő */
.taj__szantas {
  position: absolute;
  left: 0;
  top: 1px;
  width: 100%;
  height: 4px;
  background: var(--land-plowed);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.traktor {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 26px;
  height: 18px;
}

.traktor__rajz {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
}

.traktor__kerek {
  transform-box: fill-box;
  transform-origin: center;
}

/* Zsongi (a fejlec.js tölti be az első repülés előtt); nyugalomban a fejlécen kívül */
.taj .zsongi {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 17px;
  overflow: visible;
  transform: translateX(-64px);
}

/* A B) mód jelzője (fejlec.js): ha kigörög a képből, a fejléc kompakt */
.fejlec-jelzo {
  position: absolute;
  top: 24px;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* Kompakt végállapot (az A) mód végén is ez): a fejléc 32 / 42 px-et felcsúszik, a sáv ennek
   nagy részét visszaadja (a kompakt sáv közepére kerül), a távoli és a középső domb a közeli
   mögé süllyed, a közelinek csak a gerince marad. */
.fejlec.is-kompakt {
  transform: translateY(calc(-1 * var(--fejlec-osszecsukas)));
}

.is-kompakt .fejlec__sav {
  transform: translateY(47%);
}

.is-kompakt :is(.logo, .traktor__rajz),
.fejlec--kompakt .logo {
  transform: scale(0.8);
}

.is-kompakt .taj__reteg--tavoli {
  transform: translateY(110%);
}

.is-kompakt .taj__reteg--kozepso {
  transform: translateY(105%);
}

.is-kompakt .taj__reteg--kozeli,
.fejlec--kompakt .taj__reteg--kozeli {
  transform: translateY(66%);
}

/* Térkép oldal: mindig kompakt (52 / 70 px), traktor, parallaxis és Zsongi nélkül; fehér út */
.fejlec--kompakt {
  --land-road: var(--surface);
  min-height: var(--fejlec-kompakt);
  padding-bottom: var(--fejlec-taj-kompakt);
}

.fejlec--kompakt .fejlec__sav {
  min-height: var(--fejlec-sav-kompakt);
}

.fejlec--kompakt :is(.taj__reteg--tavoli, .taj__reteg--kozepso, .taj__szantas, .traktor) {
  display: none;
}

/* Logó-pattanás: a főoldal betöltésekor egyszer (fejlec.js: .fejlec--pattan), 3.8 */
@media (prefers-reduced-motion: no-preference) {
  .fejlec--pattan .logo__tu {
    animation: logo-pattan var(--dur-hop) both;
  }

  .fejlec--pattan .logo__arnyek {
    animation: logo-arnyek var(--dur-hop) both;
  }
}

/* A) Görgetéshez kötött mód: a fejléc előbb 32 / 42 px-et felgörög, csak utána ragad meg;
   közben a sáv, a logó, a dombok és a traktor a görgetéssel együtt húzódnak össze, a parallaxis,
   a traktor és a szántás pedig a lap teljes görgetését követi. A kulcskockákban nincs var() (3.5);
   az animation-timeline és -range a rövidítés utáni szabályban áll (azonos erősség, később). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fejlec:not(.fejlec--kompakt) {
      top: calc(-1 * var(--fejlec-osszecsukas));
    }

    .fejlec:not(.fejlec--kompakt) .fejlec__sav { animation: fejlec-sav-lejjebb 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .logo { animation: fejlec-kisebb 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .traktor__rajz { animation: fejlec-kisebb 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__reteg--tavoli { animation: taj-sullyed-tavoli 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__reteg--kozepso { animation: taj-sullyed-kozepso 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__reteg--kozeli { animation: taj-sullyed-kozeli 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__reteg--tavoli svg { animation: taj-csuszik-tavoli 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__reteg--kozepso svg { animation: taj-csuszik-kozepso 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__reteg--kozeli svg { animation: taj-csuszik-kozeli 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .traktor { animation: traktor-halad 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .traktor__kerek--hatso { animation: traktor-kerek-hatso 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .traktor__kerek--elso { animation: traktor-kerek-elso 1ms linear both; }
    .fejlec:not(.fejlec--kompakt) .taj__szantas { animation: taj-szantas 1ms linear both; }

    .fejlec:not(.fejlec--kompakt) :is(.fejlec__sav, .logo, .traktor__rajz, .taj__reteg) {
      animation-timeline: scroll(root block);
      animation-range: 0 32px;
    }

    .fejlec:not(.fejlec--kompakt) :is(.taj__reteg svg, .traktor, .traktor__kerek, .taj__szantas) {
      animation-timeline: scroll(root block);
    }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 800px) {
    .fejlec:not(.fejlec--kompakt) :is(.fejlec__sav, .logo, .traktor__rajz, .taj__reteg) {
      animation-range: 0 42px;
    }
  }
}

@media (min-width: 800px) {
  .fejlec {
    --taj-tavoli: 52px;
    --taj-kozepso: 42px;
    --taj-kozeli: 32px;
  }

  .logo__jel {
    width: 26px;
    height: 46px;
  }

  .fomenu {
    display: block;
  }

  .traktor {
    width: 32px;
    height: 22px;
  }

  .taj .zsongi {
    width: 22px;
    height: 18px;
  }
}

@media (max-width: 479px) {
  .fejlec__belso {
    padding-inline: 12px;
  }

  .logo {
    gap: 7px;
  }

  .logo__szoveg {
    font-size: 0.95rem;
  }
}

/* ---------- Alsó fülsor (800 px alatt; fejlec-es-designrendszer.md 4.) ----------
   Mély „föld” sáv; az aktív fület (aria-current) lime levél jelzi, JS nélkül is. A főoldalon a
   levél a szakaszok között csúszik (fulsor.js), oldalváltáskor nézetátmenettel. */

.fulsor {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-fulsor);
  padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  background: var(--deep);
  box-shadow: var(--shadow-tab);
  transition: transform var(--dur-base) var(--ease-out);
}

/* Gépelés közben lecsúszik (4.3) */
body:has(:is(input:not([type="checkbox"], [type="radio"]), textarea, iframe):focus) .fulsor {
  transform: translateY(100%);
}

/* Tartalomhoz igazodó fülek (4.2), táblagépen középen */
.fulsor__lista {
  display: flex;
  max-width: 36rem;
  height: var(--fulsor-magassag);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.fulsor__lista li {
  flex: 1 1 auto;
}

.fulsor__ful {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 56px;
  height: 100%;
  padding: 10px 6px 0;
  color: var(--on-deep-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  line-height: 16px;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) ease;
}

.fulsor__ful:active {
  color: var(--on-deep);
}

@media (hover: hover) and (pointer: fine) {
  .fulsor__ful:hover {
    color: var(--on-deep);
  }
}

.fulsor__ful:focus-visible {
  outline-color: var(--focus-on-deep);
  outline-offset: -4px;
}

.fulsor__ful .ikon {
  transition: transform var(--dur-press) var(--ease-out);
}

.fulsor__ful:active .ikon {
  transform: scale(0.9);
}

/* Az egyetlen színes ikon (5,4:1 a mélyzöldön) */
.fulsor__lejatszas {
  fill: var(--illus-mandarin);
  stroke: var(--illus-mandarin);
}

.fulsor__ful[aria-current] {
  color: var(--accent);
}

/* Lime levél (26 × 10: szár, két ív, ívelt középér) a sáv felső szélén, csak az aktív fülön */
.fulsor__level {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 26px;
  height: 10px;
  margin-left: -13px;
  background: var(--accent);
  clip-path: path(evenodd, "M.4 9 3.6 5.8C8 .2 18-.4 25.6 3 19 8.8 9.6 10.6 4.4 6.8L1 9.6ZM5.2 6.1C10.5 4.6 16 3.7 21.8 3.4 16 4.5 10.5 5.5 5.2 6.9Z");
  opacity: 0;
}

[aria-current] > .fulsor__level {
  opacity: 1;
  view-transition-name: fulsor-level;
}

@media (min-width: 800px) {
  .fulsor {
    display: none;
  }
}

/* Oldalváltáskor csak a levél utazik a régi fültől az újig (T9), az új ikon egyszer kipattan */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  :active-view-transition .fulsor__ful[aria-current] .ikon {
    animation: ful-pattan var(--dur-base) var(--ease-out);
  }
}

:root {
  view-transition-name: none;
}

::view-transition-group(fulsor-level) {
  animation-duration: var(--dur-spring);
  animation-timing-function: var(--ease-spring);
}

/* ---------- Gombok ---------- */

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  /* Elengedéskor rugósan áll vissza (kis túllendülés); lenyomáskor gyors (lásd :active). */
  transition:
    transform var(--dur-spring) var(--ease-spring),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

/* „Életre keltett” gombok: rámutatva puhán kiemelkednek (3D-ben kicsit felbillennek, az árnyék nő), lenyomva
   összenyomódnak egy rövid mozgási elmosással. Az árnyék növelése egy álelem átlátszóságával megy (nem a
   box-shadow animálásával). A gomb::after csak árnyék, a kattintást nem fogja el. */
.gomb::after,
.terkep-gomb::after,
.adatlap__bezar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--soft-arnyek-emelt);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
}

.gomb:active,
.terkep-gomb:active,
.adatlap__bezar:active {
  transform: scale(0.96);
  transition-duration: var(--dur-press), var(--dur-fast), var(--dur-fast), var(--dur-fast);
  transition-timing-function: var(--ease-out), ease, ease, ease;
  animation: lenyomas-elmosas 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gomb:hover,
  .terkep-gomb:hover,
  .adatlap__bezar:hover {
    transform: perspective(600px) translateY(-2px) rotateX(6deg);
  }

  .gomb:hover::after,
  .terkep-gomb:hover::after,
  .adatlap__bezar:hover::after {
    opacity: 1;
  }

  .gomb:hover:active,
  .terkep-gomb:hover:active,
  .adatlap__bezar:hover:active {
    transform: perspective(600px) translateY(0) rotateX(0deg) scale(0.96);
  }
}

/* Mozgási elmosás a lenyomás gyors pillanatában */
@keyframes lenyomas-elmosas {
  35% {
    filter: blur(1.4px);
  }
}

.gomb .ikon {
  transition: transform var(--dur-spring) var(--ease-spring);
}

/* Puha, „felfújt” kitöltött gombok: elmosott belső fény felül, belső árnyék alul, puha külső árnyék */
.gomb--zold,
.gomb--lime {
  box-shadow: var(--soft-domb-sotet), var(--soft-arnyek);
}

.gomb--vonal {
  box-shadow: var(--soft-domb), var(--soft-arnyek);
}

/* Lime gomb: csak mély vagy fő zöld alapon (világos alapon nincs elég kontrasztja) */
.gomb--lime {
  background: var(--accent);
  color: var(--on-accent);
}

.gomb--lime:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.gomb--zold {
  background: var(--primary);
  color: var(--on-primary);
}

.gomb--zold:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}

.gomb--zold:active {
  background: var(--primary-active);
}

.gomb--feher-vonal {
  border-color: rgb(255 255 255 / 0.75);
  background: none;
  color: var(--on-primary);
}

.gomb--feher-vonal:hover {
  background: rgb(255 255 255 / 0.12);
  color: var(--on-primary);
}

.gomb--feher-vonal::after {
  display: none;
}

.gomb--vonal {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--primary-hover);
}

.gomb--vonal:hover {
  border-color: var(--primary);
  color: var(--primary-hover);
}

.gomb--kicsi {
  min-height: 42px;
  padding: 8px 16px;
  font-size: 0.94rem;
}

@media (hover: hover) and (pointer: fine) {
  .gomb:hover .ikon--elore {
    transform: translateX(3px);
  }
}

.gombsor {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.link-gomb {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--link);
  font-weight: 650;
  font-size: 0.94rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.link-gomb:hover {
  color: var(--link-hover);
}

/* ---------- Árcédula címkék ---------- */

.cedula {
  --lyuk: var(--surface);
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px 0 19px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}

.cedula::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--lyuk);
}

.cedula--pelda {
  background: var(--status-example-bg);
  color: var(--status-example-text);
}

.cedula--ellenorzott {
  --lyuk: var(--status-ok);
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.cedula--folyamatban {
  --lyuk: var(--status-pending);
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
}

.cedula--nagy {
  height: 34px;
  padding: 0 16px 0 24px;
  font-size: 0.98rem;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

.cedula--nagy::before {
  left: 10px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
}

/* „Jelenleg ingyenes”: mély alap, lime szöveg és lyuk (9,8:1) */
.cedula--ingyenes {
  --lyuk: var(--accent);
  background: var(--deep);
  color: var(--accent);
}

/* ---------- Morzsamenü ---------- */

.morzsa ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.morzsa li + li::before {
  content: "›";
  margin-right: 4px;
  color: var(--ink-soft);
}

.morzsa a {
  color: var(--ink-soft);
}

/* ---------- Szakaszok ---------- */

.szakasz {
  padding-block: clamp(56px, 8vw, 104px);
}

.szakasz--feher {
  background: var(--surface);
}

/* A lábléc dombéle az utolsó szakasz alsó margójába lóg: fölötte maradjon 40 px */
.szakasz--lablec-elott {
  padding-bottom: max(clamp(56px, 8vw, 104px), calc(var(--lablec-domb) + var(--space-10)));
}

.szakasz__cim {
  font-size: var(--fs-h2);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.szakasz__bevezeto {
  margin-top: 14px;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}

/* ---------- Főoldal teteje (fejlec-es-designrendszer.md 5.7) ----------
   Bemutató (összecsukva: H1 + bevezető) → előnézet → „Jó tudni”; asztalin 5 : 7. A bemutató
   teljes módja (4.1) így lép ki a .keret-ből: margin-inline: calc(50% - 50vw). */

.kezdo {
  display: grid;
  column-gap: var(--space-16);
  padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 104px);
}

.bemutato__cim {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.elonezet {
  margin-top: var(--space-10);
}

/* Alcím-szerep (2.1): a kártya címe kisebb, a H1 marad a fő cím */
.elonezet__cim,
.miert__elem h3 {
  font-size: var(--fs-h3);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.elonezet__cim {
  margin-bottom: var(--space-4);
}

.jo-tudni {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--accent-pale);
  box-shadow: inset 0 0 0 1px var(--line);
}

.jo-tudni .ikon {
  margin-top: 2px;
  color: var(--primary);
}

@media (min-width: 960px) {
  .kezdo {
    grid-template-columns: 5fr 7fr;
  }

  .bemutato {
    grid-row: span 2;
  }

  .elonezet,
  .jo-tudni {
    grid-column: 2;
  }

  .elonezet {
    margin-top: 0;
  }
}

/* ---------- Bemutató: három mód (09-design-terv.md 6.1, T1–T4; mozgas-es-3d-technika.md 3.4) ----------
   Tartalma: scripts/reszek/bemutato.html. A módot az elso-latogatas.js írja az első kirajzolás előtt
   a <html data-intro> attribútumba. JS nélkül (nincs érték): H1 + bevezető, alatta a 4 dia rövid
   blokkokban; compact: csak H1 + bevezető; full: a fejléc + a szakasz + a fülsor pontosan egy képernyő,
   mély alapon, csak az aktív dia látszik. A vezérlők a JS-ig rejtve vannak; a díszítő rétegeket a
   bemutato.js teszi be (bemutato.css). Az óriás szó díszítő másolat: a valódi szöveg a rejtett <h2>. */

.bemutato__diak {
  margin: var(--space-8) 0 0;
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--deep);
  color: var(--on-deep);
  list-style: none;
}

.bemutato__dia {
  padding-block: var(--space-4);
}

.bemutato__dia + .bemutato__dia {
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.bemutato__szo {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.bemutato__dia:nth-child(2) .bemutato__szo {
  color: var(--illus-mandarin);
}

.bemutato__dia:nth-child(3) .bemutato__szo {
  color: var(--illus-turquoise);
}

.bemutato__mondat {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
}

.bemutato__alsor {
  margin-top: var(--space-1);
  color: var(--on-deep-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.bemutato__lejjebb,
[data-intro="compact"] .bemutato__diak {
  display: none;
}

/* Teljes mód: a szakasz kilép a .keret-ből, és a rács mindkét hasábját kitölti */
[data-intro="full"] .kezdo {
  padding-top: 0;
}

[data-intro="full"] .bemutato {
  --focus: var(--focus-on-deep);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--bemutato-magassag);
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  background: var(--deep);
  color: var(--on-deep);
  /* /#bemutato: a görgetés 0-n áll meg, mint első látogatáskor (a kompakt fejléc helye nem kell) */
  scroll-margin-top: calc(var(--fejlec-osszecsukas) - 16px);
}

/* A fej sor jobb vége a szünet gomb helye (T5; az 5.6 teszi be: 44 × 44, negatív függőleges
   margóval, hogy a sor ne nőjön); a H1 mellett 360 px-től elfér */
[data-intro="full"] .bemutato__fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  grid-row: 1;
  padding: var(--space-6) var(--bemutato-szel) 0;
}

/* T1: teljes módban a H1 kisebb felirat a jelenet fölött; a bevezető mondat csak összecsukva látszik */
[data-intro="full"] .bemutato__cim {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

[data-intro="full"] .bemutato__fej .szakasz__bevezeto {
  display: none;
}

[data-intro="full"] .bemutato__diak {
  position: relative;
  grid-area: 2 / 1;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

/* Egy dia: fent a szó, középen a jelenet sávja (díszítő rétegek), alul a mondat; legalul a vezérlők
   helye. Alacsony képernyőn a jelenet sávja enged előbb (a szó sora nem lesz kisebb a szónál). */
[data-intro="full"] .bemutato__dia {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 5fr minmax(0, 4fr) auto;
  padding: 0 var(--bemutato-szel) var(--bemutato-vezerlok);
  border: 0;
}

[data-intro="full"] .bemutato__dia:not(.is-aktiv) {
  visibility: hidden;
}

[data-intro="full"] .bemutato__szo {
  position: relative;
  z-index: 1;
  grid-row: 1;
  place-self: center;
  font-size: var(--fs-giant);
}

[data-intro="full"] .bemutato__szoveg {
  grid-row: 3;
  max-width: 40rem;
  padding-top: var(--space-4);
}

[data-intro="full"] .bemutato__mondat {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

[data-intro="full"] .bemutato__alsor {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
}

[data-intro="full"] .bemutato__lejjebb {
  grid-row: 3;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 0 var(--space-4) var(--space-2);
  color: var(--on-deep-soft);
  font-size: var(--fs-small);
  font-weight: 650;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Alatta az előnézet: asztalin a címe balra, a kártya a jobb hasábban (mint összecsukva a H1 és a kártya) */
[data-intro="full"] .elonezet {
  margin-top: clamp(48px, 7vw, 88px);
}

[data-intro="full"] .elonezet__cim {
  font-size: var(--fs-h2);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

@media (min-width: 960px) {
  [data-intro="full"] .elonezet {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
  }

  [data-intro="full"] .elonezet > * {
    grid-column: 2;
  }

  [data-intro="full"] .elonezet__cim {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
}

/* ---------- Térkép-előnézet (főoldal; fejlec-es-designrendszer.md 5.4–5.5) ----------
   Az SVG-t és a kártyát az "npm run oldal" írja (scripts/terkep-elonezet.mjs). Egyetlen link
   a /terkep/ oldalra; JS és térképmotor nélkül. A tűk mérete a kártya szélességéhez igazodik. */

.minikep {
  position: relative;
  display: block;
  container-type: inline-size;
  padding: var(--space-3) var(--space-3) 0;
  border-radius: var(--radius-lg);
  background: var(--minikep-viz);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out);
}

/* Rámutatáskor erősebb árnyék: külön rétegen, csak az átlátszósága változik */
.minikep::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

a.minikep:hover {
  color: var(--ink);
}

a.minikep:focus-visible {
  border-radius: var(--radius-lg);
}

.minikep__terkep {
  width: 100%;
  height: auto;
  transition: transform 200ms var(--ease-out);
}

.minikep__talp {
  fill: var(--minikep-talp);
}

.minikep__orszag {
  fill: var(--minikep-orszag);
  stroke: var(--minikep-perem);
  stroke-width: 2;
  stroke-linejoin: round;
}

.minikep__folyo {
  fill: none;
  stroke: var(--minikep-folyo);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* A Balaton vékony: azonos színű szél vastagítja, és a tihanyi szorost is kitölti */
.minikep__to {
  fill: var(--minikep-to);
  stroke: var(--minikep-to);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Tűk, csoportok, „Példa” címke: a hegyük (a csoport a közepe) körül nagyítva. A tű így
   telefonon kb. 16–21, szélesebb kártyán kb. 19–25 képpont magas; a címke betűje sehol
   sem kisebb 13 képpontnál (--fs-label). */
.minikep__jelek > g > * {
  transform: scale(var(--mk-meret, 1));
}

.minikep__jelek > g > [href^="#mk-pelda"] {
  transform: scale(var(--mk-cimke, var(--mk-meret, 1)));
}

@container (max-width: 479px) {
  .minikep__jelek {
    --mk-meret: 1.6;
    --mk-cimke: 2;
  }
}

@container (min-width: 480px) and (max-width: 639px) {
  .minikep__jelek {
    --mk-meret: 1.2;
    --mk-cimke: 1.25;
  }
}

.minikep__tu-arnyek {
  fill: var(--deep);
  fill-opacity: 0.15;
}

.minikep__tu-test {
  stroke: var(--map-contour);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}

.minikep__tu--ok .minikep__tu-test {
  fill: var(--status-ok);
}

.minikep__tu--fuggo .minikep__tu-test {
  fill: var(--status-pending);
}

.minikep__tu-fold {
  fill: var(--deep);
  fill-opacity: 0.18;
}

.minikep__tu-potty,
.minikep__pelda-lyuk {
  fill: var(--surface);
}

.minikep__csoport circle {
  fill: var(--cluster);
  stroke: var(--surface);
  stroke-width: 3;
}

.minikep__csoport text {
  fill: var(--cluster-text);
  font-size: 23px;
  font-weight: 800;
  text-anchor: middle;
}

.minikep__pelda path {
  fill: var(--status-example-bg);
  stroke: var(--map-contour);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.minikep__pelda text {
  fill: var(--status-example-text);
  font-size: 22px;
  font-weight: 700;
  text-anchor: middle;
}

.minikep__alja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-2) var(--space-4);
  line-height: 1.35;
}

.minikep__info {
  display: grid;
  gap: var(--space-1);
}

.minikep__szam {
  font-weight: 700;
}

.minikep__jelmagyarazat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  color: var(--ink-soft);
  font-size: var(--fs-label);
  font-weight: 600;
}

.minikep__jelmagyarazat > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.minikep__jelmagyarazat .jel {
  width: 12px;
  height: 12px;
}

.minikep__jelmagyarazat .jel--csoport {
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
}

/* Gombnak látszik, de nem külön link: a lenyomást a kártya jelzi */
.minikep__gomb {
  margin-left: auto;
}

.minikep__gomb:active {
  transform: none;
}

.minikep__gomb .ikon {
  margin-right: 0;
  color: inherit;
}

@container (max-width: 479px) {
  .minikep__gomb {
    width: 100%;
  }
}

.minikep--ures .minikep__alja {
  display: grid;
  gap: var(--space-1);
}

.minikep__alsor {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.minikep__keves {
  margin-top: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .minikep:hover::after {
    opacity: 1;
  }

  .minikep:hover .gomb--zold {
    background: var(--primary-hover);
  }

  .minikep:hover .ikon--elore {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a.minikep:active {
    transform: scale(0.98);
  }

  @media (hover: hover) and (pointer: fine) {
    .minikep:hover .minikep__terkep {
      transform: scale(1.015);
    }
  }
}

/* „Miért jó…”: dűlőút (5.6), az 5 ok egy szaggatott út megállói */
.miert {
  --miert-ikon: 64px;
  --miert-koz: var(--space-4);
  display: grid;
  gap: var(--space-8);
}

.miert__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.miert__elem {
  position: relative;
  display: grid;
  grid-template-columns: var(--miert-ikon) 1fr;
  gap: var(--space-4);
  padding-block: var(--miert-koz);
}

/* Az út a megálló közepétől a következőéig */
.miert__elem:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--miert-ikon) / 2 - 1.5px);
  top: calc(var(--miert-koz) + var(--miert-ikon) / 2);
  height: 100%;
  border-left: 3px dashed var(--green-400);
}

.miert__ikon {
  position: relative;
  width: var(--miert-ikon);
  height: var(--miert-ikon);
}

.miert__elem h3 {
  margin-top: calc((var(--miert-ikon) - 1.15em) / 2);
}

.miert__elem p {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  max-width: 34rem;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .miert__elem:hover .miert__ikon {
    animation: himbal 360ms ease-in-out;
  }
}

@media (min-width: 900px) {
  .miert {
    --miert-ikon: 88px;
    --miert-koz: var(--space-5);
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-16);
    align-items: start;
  }

  .miert__fej {
    position: sticky;
    top: calc(var(--fejlec-kompakt) + 24px);
  }

  .miert__elem {
    gap: var(--space-6);
  }
}

/* Lépések (Kistermelőként: „Hogyan kerülsz fel?”) */
.lepesek {
  position: relative;
  display: grid;
  gap: 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lepes;
}

.lepes {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  counter-increment: lepes;
}

.lepes::before {
  content: counter(lepes);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 1.5rem;
  position: relative;
  z-index: 1;
}

.lepes:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: -26px;
  border-left: 3px dashed var(--green-400);
}

.lepes h3 {
  font-size: 1.25rem;
  font-weight: 750;
  margin-top: 4px;
}

.lepes p {
  margin-top: 6px;
  color: var(--ink-soft);
}

@media (min-width: 800px) {
  .lepesek {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .lepes {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lepes:not(:last-child)::after {
    left: 72px;
    right: -20px;
    top: 27px;
    bottom: auto;
    border-left: 0;
    border-top: 3px dashed var(--green-400);
  }
}

/* ---------- Lábléc ---------- */

/* „Lent föld”: mély zöld alap; mobilon a fülsor alá is benyúlik (semmit nem takar el).
   Sötét alapon a világos szöveg kicsit ritkábban áll (terv 2.1). */
.lablec {
  position: relative;
  padding-bottom: var(--fulsor-teljes);
  background: var(--deep);
  color: var(--on-deep-soft);
  font-size: 0.97rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* Statikus dombél (a táj két legközelebbi rétege): az előző szakasz alsó margójába lóg (≥ 56 px),
   így bármilyen háttérből kinő; 1 px-et a lábléc alá ér, hogy ne legyen rés */
.lablec__domb {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: var(--lablec-domb);
  fill: var(--deep);
  pointer-events: none;
}

.lablec__domb path:first-child {
  fill: var(--land-near);
}

/* A térkép oldal lapja kitölti a képernyőt: ott a dombél saját helyet kap, a lista fehérjéből nő ki */
.terkep-app + .lablec {
  margin-top: var(--lablec-domb);
}

.terkep-app + .lablec .lablec__domb {
  background: var(--surface);
}

.lablec a {
  color: var(--on-deep);
}

.lablec a:hover {
  color: var(--accent);
}

.lablec :focus-visible {
  outline-color: var(--focus-on-deep);
}

.lablec__belso {
  display: grid;
  gap: 32px;
  padding-block: 32px 28px; /* a dombél fölötte ad levegőt */
}

/* Ugyanaz a logó, mint a fejlécben (jel + kétsoros felirat), a jel mély alapra rajzolt változatával */
.lablec__nev {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-deep);
}

.lablec__leiras {
  margin-top: 10px;
  max-width: 26rem;
}

.lablec h2 {
  font-size: 1rem;
  font-weight: 750;
  color: var(--on-deep);
  letter-spacing: 0;
}

.lablec ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.lablec__also {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-size: 0.88rem;
  color: var(--on-deep-muted);
}

/* Táblagépen a két lista egymás mellett */
@media (min-width: 560px) {
  .lablec__belso {
    grid-template-columns: 1fr 1fr;
  }

  .lablec__belso > :first-child,
  .lablec__also {
    grid-column: 1 / -1;
  }
}

@media (min-width: 800px) {
  .lablec__belso {
    grid-template-columns: 1.4fr 1fr 1fr;
    padding-top: 40px;
  }

  .lablec__belso > :first-child {
    grid-column: auto;
  }
}

/* Helyőrző: a tulajdonosnak kell kitöltenie. Sötét alapon (lábléc) is ugyanez a hangos doboz. */
.helyorzo {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  font-weight: 650;
  outline: 2px dashed var(--placeholder-line);
  outline-offset: -2px;
}

/* ---------- Térkép oldal ---------- */

.terkep-app {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.kereso {
  padding: 30px var(--gutter) 18px;
}

.kereso h1 {
  margin-top: 8px;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem);
  font-weight: 800;
}

.kereso__bevezeto {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

.szurok {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.szurok[hidden] {
  display: none;
}

.mezo label {
  display: block;
  margin-bottom: 4px;
  font-weight: 650;
  font-size: 0.9rem;
}

.mezo__doboz {
  position: relative;
}

.mezo__doboz .ikon {
  position: absolute;
  left: 13px;
  top: 50%;
  margin-top: -10px;
  color: var(--ink-soft);
  pointer-events: none;
}

.mezo input,
.mezo select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  font-size: 1rem;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.mezo input[type="search"] {
  padding-left: 42px;
}

.mezo select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F271B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  text-overflow: ellipsis;
}

.mezo input:hover,
.mezo select:hover {
  border-color: var(--ink-soft);
}

/* Fókusz: tinta keret + lime fényudvar */
.mezo input:focus-visible,
.mezo select:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgb(196 242 58 / 0.55);
}

.szurok__sor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.talalatok {
  padding: 0 var(--gutter) 32px;
  background: var(--surface);
}

/* Mobilon a lap görög, ezért a ragadós fejléc alatt áll meg; asztalin a lista saját dobozában (top: 0) */
.talalatok__fej {
  position: sticky;
  top: var(--fejlec-kompakt);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 10px;
  border-bottom: 2px solid var(--ink);
  background: var(--surface);
}

.talalatok__fej h2 {
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.talalatok__szam {
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.termelolista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.termelo {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 56px;
}

/* Kicsi nézet: név, hely, termékek egy sorban. Kattintásra a termelő oldala felugrik (a lista nem nyílik ki).
   A sor puha kártyává „emelkedik” rámutatáskor és amíg az oldala nyitva van (::before: háttér + árnyék).
   A negatív oldalmargó a szerver-HTML sorain is ugyanaz, így a JS-es újrarajzolás nem tolja el az elrendezést. */
.termelo__kartya {
  display: block;
}

.termelo__osszegzo {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 6px;
  margin: 0 -12px;
  padding: 14px 12px;
  border-radius: 20px;
  transition: transform var(--dur-spring) var(--ease-spring);
}

.termelo__osszegzo::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface);
  box-shadow: var(--soft-domb), var(--soft-arnyek);
  opacity: 0;
  transition: opacity var(--dur-base) ease, background-color var(--dur-base) ease;
}

/* A gomb a név szövege; a ::after az egész kis sort kattinthatóvá teszi. */
.termelo__nyito {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: inherit;
}

.termelo__nyito::after {
  content: "";
  position: absolute;
  inset: 0;
}

.termelo__nyito:focus-visible {
  outline: none;
}

.termelo__osszegzo:has(.termelo__nyito:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: -1px;
}

.termelo__osszegzo:has(.termelo__nyito) {
  cursor: pointer;
}

/* Lenyomva: a sor összenyomódik, egy pillanatra elmosódik */
.termelo__osszegzo:has(.termelo__nyito:active) {
  transform: scale(0.98);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
  animation: lenyomas-elmosas 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .termelo__osszegzo:has(.termelo__nyito):hover .termelo__nev {
    color: var(--primary-hover);
  }

  .termelo__osszegzo:has(.termelo__nyito):hover::before {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .termelo__osszegzo:has(.termelo__nyito):hover {
    transform: perspective(900px) translateY(-2px) rotateX(5deg);
  }

  .termelo__osszegzo:has(.termelo__nyito:active):hover {
    transform: perspective(900px) translateY(0) rotateX(0deg) scale(0.98);
  }
}

/* Amíg a termelő oldala nyitva van, a sora halvány lime kártya (a fátyol mögött is látszik, honnan nyílt) */
.termelo.is-kivalasztott .termelo__osszegzo::before {
  opacity: 1;
  background: var(--accent-pale);
}

.termelo__fej {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.termelo__nev {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) ease;
}

.termelo__cedulak {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.termelo__hely {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.termelo__hely .ikon {
  width: 18px;
  height: 18px;
}

.termelo__tav {
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--distance-bg);
  color: var(--distance-text);
  font-weight: 650;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.chipek {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chipek li {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  box-shadow: var(--soft-domb);
  font-size: 0.84rem;
  font-weight: 600;
}

.termelo__termekek {
  overflow: hidden;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Nagy nézet: a termelő mini-oldala (a felugró oldalban; JS nélkül a lista sora alatt) ---------- */

.reszletek {
  display: grid;
  gap: 14px;
  padding: 2px 0 20px;
}

.reszlet:not(.reszlet--pelda) + .reszlet:not(.reszlet--jegyzet) {
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}

.reszlet {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.reszlet__cim {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0;
}

.reszlet__szoveg {
  font-size: 0.97rem;
}

.reszlet__szoveg--halk,
.reszlet--jegyzet {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.reszlet--pelda {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--lime-100);
  font-size: 0.94rem;
  font-weight: 600;
}

/* Jelvények: rajzolt pecsét + egy mondat, hogy mit jelent */
.jelvenyek {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jelveny {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Puha, térbeli pecsét: két rétegű, elmosott vetett árnyék, fényfolt bal felül, enyhe mélység alul */
.jelveny__pecset {
  flex: none;
  width: 48px;
  height: 48px;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 2px rgb(7 58 43 / 0.16)) drop-shadow(0 7px 9px rgb(7 58 43 / 0.16));
}

.jelveny__fenyes {
  fill: #fff;
  opacity: 0.38;
}

.jelveny__melyseg {
  fill: var(--jelveny-jel);
  opacity: 0.1;
}

.jelveny__fogak {
  fill: var(--jelveny-fog);
}

.jelveny__belso {
  fill: var(--jelveny-belso);
}

.jelveny__jel path {
  fill: none;
  stroke: var(--jelveny-jel);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jelveny--ellenorzott {
  --jelveny-fog: var(--green-600);
  --jelveny-belso: var(--green-100);
  --jelveny-jel: var(--green-800);
  --jelveny-pasztell: var(--green-50);
}

.jelveny--folyamatban {
  --jelveny-fog: var(--mandarin-400);
  --jelveny-belso: var(--mandarin-100);
  --jelveny-jel: var(--mandarin-800);
  --jelveny-pasztell: var(--mandarin-50);
}

.jelveny__szoveg {
  font-size: 0.95rem;
  line-height: 1.4;
}

.jelveny__szoveg strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 750;
}

/* Saját képek: oldalra húzható sáv */
.kepek {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--green-200) transparent;
}

.kepek__kep {
  flex: 0 0 min(78%, 280px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-tint);
  scroll-snap-align: start;
}

.kepek__kep img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kepek--helyorzo {
  display: grid;
  gap: 6px;
  overflow: visible;
}

.kepek--helyorzo svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

.kepek--helyorzo p {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* Árak és nyitvatartás: címke balra, érték jobbra, szaggatott vonallal elválasztva */
.sorok {
  display: grid;
  margin: 0;
}

.sorok > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-strong);
}

.sorok > div:last-child {
  border-bottom: 0;
}

.sorok dt {
  font-weight: 600;
}

.sorok dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.sorok__halk dt,
.sorok__halk dd {
  color: var(--ink-soft);
  font-weight: 500;
}

/* A szerver-HTML-ben (kereső robotok, JS nélkül) a sor alatt a teljes nagy nézet is ott van.
   JS-módban (termelo-fej.js, első kirajzolás előtt) rejtve: a böngésző a felugró oldalban mutatja. */
.termelo__reszletek {
  padding-bottom: 6px;
}

.js-termelo .termelo__reszletek {
  display: none;
}

.ures-uzenet {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--accent-pale);
}

.ures-uzenet .link-gomb {
  justify-self: start;
}

/* A térkép területe */
.terkep-terulet {
  position: relative;
  height: 62svh;
  min-height: 340px;
  max-height: 680px;
  background: var(--surface-tint);
  isolation: isolate;
}

/* A MapLibre saját CSS-e "position: relative"-et ad, ezért erősebb szelektor kell. */
.terkep-terulet .terkep {
  position: absolute;
  inset: 0;
}

.terkep-allapot {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--ink-soft);
  font-weight: 600;
  background-color: var(--green-50);
  background-image:
    linear-gradient(90deg, rgb(255 255 255 / 0.55) 2px, transparent 2px),
    linear-gradient(rgb(255 255 255 / 0.55) 2px, transparent 2px);
  background-size: 56px 56px;
}

.terkep-allapot[hidden] {
  display: none;
}

.terkep-allapot--hiba {
  color: var(--ink);
  background-color: var(--placeholder-bg);
}

.terkep-gomb {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--soft-domb), var(--soft-arnyek);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-spring) var(--ease-spring), background-color var(--dur-fast) ease;
}

.terkep-gomb .ikon {
  color: var(--you);
  transition: transform var(--dur-spring) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .terkep-gomb:hover .ikon {
    transform: rotate(45deg);
  }
}

.terkep-gomb[aria-busy="true"] .ikon {
  animation: forgas 0.9s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .terkep-gomb:hover {
    background: var(--surface-tint);
  }
}

.jelmagyarazat {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: var(--shadow-sm);
  font-size: 0.8rem;
  font-weight: 600;
  list-style: none;
}

.jelmagyarazat li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jel {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--map-contour);
}

.jel--ok {
  background: var(--status-ok);
}

.jel--fuggo {
  background: var(--status-pending);
}

.jel--csoport {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--cluster);
  color: var(--cluster-text);
  font-size: 0.65rem;
  font-weight: 800;
}

.terkep-uzenet {
  position: absolute;
  z-index: 4;
  top: 64px;
  left: 12px;
  max-width: min(360px, calc(100% - 24px));
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--deep);
  color: var(--on-deep);
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}

.terkep-uzenet[hidden] {
  display: none;
}

@starting-style {
  .terkep-uzenet {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.terkep-forras {
  padding: 8px var(--gutter);
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* ---------- A termelő felugró oldala (natív <dialog>, modális) ----------
   Mobilon szinte teljes magasságú alsó lap, asztalin középre igazított nagy panel. Maga a dialógus a teljes
   képernyős, átlátszó „színpad” (rá kattintani = a háttérre kattintani), a látható rész a .adatlap__panel.
   A 3D-s belépés és kilépés WAAPI-val megy (terkep.js: belepes, bezar); a tartalom lépcsőzése, a fejléc
   rétegei és a pecsét rányomódása itt. Ez az oldal egyetlen nagy, megkomponált mozgása. */
html:has(.adatlap[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.adatlap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: contain;
}

/* A display-t csak nyitva állítjuk: a zárt dialógus (a böngésző display: none-ja) így érintetlen marad. */
.adatlap[open] {
  display: grid;
  align-items: end;
  justify-items: center;
}

.adatlap::backdrop {
  background: rgb(6 40 26 / 0.56);
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
  backdrop-filter: blur(5px) saturate(1.15);
  opacity: 1;
  transition: opacity 420ms var(--ease-out);
}

@starting-style {
  .adatlap[open]::backdrop {
    opacity: 0;
  }
}

.adatlap.is-zarul::backdrop {
  opacity: 0;
  transition-duration: 280ms;
}

.adatlap__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 92vh;
  height: 92svh;
  overflow: hidden;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--surface);
  box-shadow: var(--soft-panel);
  transform-origin: 50% 100%;
}

.adatlap__tartalom {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--green-200) transparent;
}

/* Bezáró gomb: puha, felfújt fehér kör (a mozgása a gomboknál, fent) */
.adatlap__bezar {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--soft-domb), var(--soft-arnyek);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-spring) var(--ease-spring), background-color var(--dur-fast) ease;
}

.adatlap__bezar .ikon {
  transition: transform var(--dur-spring) var(--ease-spring);
}

.adatlap__bezar:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .adatlap__bezar:hover {
    background: var(--primary-pale);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .adatlap__bezar:hover .ikon {
    transform: rotate(90deg);
  }
}

/* Fejléc: nagy név a napsárga égen, alatta lapos vektoros táj (nap, három dombréteg, lebegő levelek).
   A rétegek más-más mélységben vannak (--m): belépéskor eltérő mértékben emelkednek, finom egérnél követik
   a mutatót (--px, --py: -1…1, a terkep.js írja, csak erre az elemre), közben lassan lebegnek.
   A szöveg mindig a sárga égen vagy a lime/középzöld domb fölött marad (tinta: ≥ 7:1). */
.adatlap__hos {
  --px: 0;
  --py: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 22px 84px;
  background: var(--hos-eg);
}

.hos__taj {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hos__reteg {
  position: absolute;
  translate: calc(var(--px) * var(--m) * 1px) calc(var(--py) * var(--m) * 0.6px);
  transition: translate 1.4s var(--ease-out);
}

.hos__reteg svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hos__nap {
  top: 20px;
  right: 18%;
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 8px 14px rgb(242 174 18 / 0.35));
}

.hos__domb {
  left: -24px;
  right: -24px;
  bottom: 0;
}

.hos__domb--tavoli {
  height: 92px;
}

.hos__domb--kozepso {
  height: 70px;
  filter: drop-shadow(0 -6px 10px rgb(7 58 43 / 0.14));
}

.hos__domb--kozeli {
  height: 50px;
  filter: drop-shadow(0 -6px 12px rgb(7 58 43 / 0.2));
}

.hos__levelek {
  inset: 0 -24px;
}

.hos__lebeg {
  transform-box: fill-box;
  transform-origin: center;
}

.hos__nap-feny {
  transform-box: fill-box;
  transform-origin: center;
}

@media (max-width: 759px) {
  .hos__szeles {
    display: none;
  }
}

.adatlap__fej {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 40rem;
  padding-right: 56px;
}

.adatlap__nev {
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.adatlap__nev:focus {
  outline: none;
}

.adatlap__hely {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Megosztás: puha, felfújt fehér pirula a fejlécben */
.adatlap__megosztas {
  margin-top: 4px;
  border-color: transparent;
  background: var(--surface);
  color: var(--green-800);
  box-shadow: var(--soft-domb), var(--soft-arnyek);
}

.adatlap__megosztas:hover {
  border-color: transparent;
  background: var(--surface);
  color: var(--green-800);
}

.adatlap__megosztas.is-kesz {
  background: var(--primary-pale);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .adatlap__megosztas:hover .ikon {
    transform: translateY(-2px) rotate(-8deg);
  }
}

/* A fejléc alá csúszó, felül lekerekített fehér lap: a tartalom a táj „elé” kerül */
.adatlap__lap {
  position: relative;
  margin-top: -28px;
  padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface);
  box-shadow: 0 -14px 28px -18px rgb(7 58 43 / 0.45);
}

.reszletek--ket-oszlop {
  gap: 14px;
  padding: 0;
}

.reszletek__oszlop {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.reszletek__oszlop--jobb {
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}

/* Pecsét-kártya: pasztell, felfújt párna, rajta a puha pecsét */
.adatlap .jelveny {
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: 24px;
  background: var(--jelveny-pasztell);
  box-shadow: var(--soft-domb), var(--soft-arnyek);
}

.adatlap .jelveny__pecset {
  width: 60px;
  height: 60px;
}

/* A képsáv görgetője levágná az árnyékot: belül egy kis hely, kívül ugyanennyi negatív margó */
.adatlap .kepek {
  margin: -4px -4px -14px;
  padding: 4px 4px 18px;
}

.adatlap .kepek__kep,
.adatlap .kepek--helyorzo svg {
  border-radius: 22px;
  box-shadow: var(--soft-arnyek);
}

/* Elérhetőség: puha, felfújt pirulák; az ikon egy kis fehér buborékban ül, rámutatva előrelendül */
.adatlap__kapcsolat {
  display: grid;
  gap: 10px;
}

.gomb--kapcsolat {
  justify-content: flex-start;
  gap: 12px;
  min-height: 54px;
  padding: 9px 18px 9px 10px;
  border-color: transparent;
  background: var(--green-50);
  color: var(--green-800);
  box-shadow: var(--soft-domb), var(--soft-arnyek);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
  text-align: left;
}

.gomb--kapcsolat:hover {
  border-color: transparent;
  background: var(--green-100);
  color: var(--green-800);
}

.gomb--kapcsolat .ikon {
  flex: none;
  box-sizing: content-box;
  padding: 8px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--soft-domb);
}

.gomb--kapcsolat:first-child {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--soft-domb-sotet), var(--soft-arnyek);
}

.gomb--kapcsolat:first-child:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}

.gomb--kapcsolat:first-child:active {
  background: var(--primary-active);
}

.gomb--kapcsolat:first-child .ikon {
  background: rgb(255 255 255 / 0.18);
  color: var(--on-primary);
  box-shadow: inset 0 2px 3px rgb(255 255 255 / 0.25);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gomb--kapcsolat:hover .ikon {
    transform: translateX(3px) rotate(-12deg) scale(1.08);
  }
}

/* A belépés megkomponált részei (a panel 3D-s felbillenése a terkep.js-ben):
   a táj rétegei mélységük szerint emelkednek, a név és a részek lépcsőzve, kis elmosásból élesednek,
   a pecsét rugósan rányomódik. Csökkentett mozgásnál egyik sem fut. */
@media (prefers-reduced-motion: no-preference) {
  .adatlap[open] .hos__reteg > svg {
    animation: hos-emel 1s var(--ease-out) backwards;
    animation-delay: calc(120ms + var(--m) * 12ms);
  }

  .adatlap[open] .hos__nap > svg {
    animation-name: hos-nap-kel;
  }

  .hos__lebeg {
    animation: hos-lebeg 5.6s var(--ease-in-out) infinite alternate;
  }

  .hos__lebeg--2 {
    animation-duration: 6.8s;
    animation-delay: -2.2s;
  }

  .hos__lebeg--3 {
    animation-duration: 4.9s;
    animation-delay: -3.6s;
  }

  /* A nap fénye lassan „lélegzik” */
  .hos__nap-feny {
    animation: hos-nap-fenylik 4.8s var(--ease-in-out) infinite alternate;
  }

  .adatlap[open] .adatlap__fej {
    animation: reszlet-be 620ms var(--ease-out) 200ms backwards;
  }

  .adatlap[open] .reszlet {
    animation: reszlet-be 620ms var(--ease-out) backwards;
    animation-delay: calc(300ms + var(--i, 0) * var(--stagger));
  }

  .adatlap[open] .jelveny__pecset {
    animation: pecset 760ms var(--ease-out) 440ms backwards;
  }
}

@keyframes hos-emel {
  from {
    transform: translateY(calc(var(--m) * 7px));
  }
}

@keyframes hos-nap-kel {
  from {
    transform: translateY(46px) scale(0.82);
  }
}

@keyframes hos-nap-fenylik {
  to {
    transform: scale(1.08);
    opacity: 0.3;
  }
}

@keyframes hos-lebeg {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(-9px) rotate(7deg);
  }
}

@keyframes reszlet-be {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(4px);
  }
}

/* A pecsét felülről rányomódik: nagyból összenyomódik, kicsit visszarugózik */
@keyframes pecset {
  0% {
    opacity: 0;
    transform: scale(1.7) rotate(-22deg);
  }

  50% {
    opacity: 1;
    transform: scale(0.9) rotate(4deg);
  }

  76% {
    transform: scale(1.04) rotate(-1deg);
  }

  100% {
    transform: none;
  }
}

@media (min-width: 760px) {
  .adatlap[open] {
    align-items: center;
    padding: 28px;
  }

  .adatlap__panel {
    width: min(960px, 100%);
    height: auto;
    max-height: min(88vh, 920px);
    border-radius: var(--radius-2xl);
  }

  .adatlap__bezar {
    top: 18px;
    right: 18px;
  }

  .adatlap__hos {
    padding: 36px 40px 100px;
  }

  .hos__nap {
    top: 24px;
    right: 17%;
    width: 128px;
    height: 128px;
  }

  .hos__domb--tavoli {
    height: 118px;
  }

  .hos__domb--kozepso {
    height: 86px;
  }

  .hos__domb--kozeli {
    height: 58px;
  }

  .adatlap__lap {
    padding: 32px 40px 36px;
  }

  .reszletek--ket-oszlop {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 44px;
  }

  .reszletek__oszlop--jobb {
    padding-top: 0;
    border-top: 0;
  }
}

/* Saját helyzet jelölője */
.sajat-hely {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--you);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgb(7 58 43 / 0.3);
}

.sajat-hely::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--you);
  animation: pulzus 2.2s var(--ease-out) infinite;
}

/* MapLibre vezérlők a saját stílusunkban */
.maplibregl-ctrl-group {
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

.maplibregl-ctrl-group button {
  width: 40px !important;
  height: 40px !important;
}

.maplibregl-ctrl-attrib {
  font-family: var(--font);
  font-size: 11px;
}

.maplibregl-ctrl-attrib:not(.maplibregl-compact) {
  background: rgb(255 255 255 / 0.88) !important;
}

.maplibregl-canvas:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

@media (min-width: 960px) {
  .terkep-app {
    display: grid;
    grid-template-columns: minmax(340px, 410px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "kereso terkep"
      "talalatok terkep"
      "talalatok forras";
    height: calc(100dvh - var(--fejlec-kompakt));
    min-height: 580px;
  }

  .kereso {
    grid-area: kereso;
    padding: 30px 24px 16px;
    border-right: 1px solid var(--line);
  }

  .talalatok {
    grid-area: talalatok;
    min-height: 0;
    overflow-y: auto;
    padding: 0 24px 32px;
    border-right: 1px solid var(--line);
    scrollbar-width: thin;
    scrollbar-color: var(--green-200) transparent;
  }

  .talalatok__fej {
    top: 0;
  }

  .terkep-terulet {
    grid-area: terkep;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .terkep-forras {
    grid-area: forras;
  }
}

/* ---------- Kistermelőként oldal ---------- */

/* Lime nyitómező tinta szöveggel (12,2:1); a morzsamenü --ink-soft (5,3:1) */
.lap-nyito {
  position: relative;
  background: var(--accent);
  color: var(--on-accent);
  overflow: hidden;
}

.lap-nyito__belso {
  display: grid;
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 72px;
}

.lap-nyito h1 {
  margin-top: 18px;
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 14ch;
}

.lap-nyito .cedula {
  margin-top: 22px;
}

.lap-nyito__bevezeto {
  margin-top: 18px;
  max-width: 36rem;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.22rem);
}

.lap-nyito .gombsor {
  margin-top: 28px;
}

.lap-nyito__kep {
  width: min(100%, 420px);
  justify-self: center;
}

.dombok {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 46px;
  color: var(--bg);
}

@media (min-width: 900px) {
  .lap-nyito__belso {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 104px;
  }

  .dombok {
    height: 72px;
  }
}

.elonyok {
  display: grid;
  gap: 0;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.elonyok li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding-block: 18px;
  border-top: 2px dashed var(--line);
}

.elonyok li:last-child {
  border-bottom: 2px dashed var(--line);
}

.elonyok__jel {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary);
}

.elonyok__jel .ikon {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

.elonyok h3 {
  font-size: 1.22rem;
  font-weight: 750;
}

.elonyok p {
  margin-top: 4px;
  color: var(--ink-soft);
  max-width: 38rem;
}

@media (min-width: 900px) {
  .elonyok {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }

  .elonyok li:nth-last-child(2):nth-child(odd) {
    border-bottom: 2px dashed var(--line);
  }
}

.ket-oszlop {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .ket-oszlop {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
}

.urlap-oszlop {
  display: grid;
  gap: 56px;
}

.urlap-gomb {
  margin-top: 20px;
}

.urlap-helye {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 320px;
  margin-top: 28px;
  padding: 32px 24px;
  border: 3px dashed var(--placeholder-line);
  border-radius: var(--radius-lg);
  background: var(--placeholder-bg);
  text-align: center;
}

.urlap-helye strong {
  font-size: 1.2rem;
}

.urlap-helye p {
  max-width: 30rem;
  color: var(--mandarin-800);
}

.urlap-keret {
  width: 100%;
  min-height: 3000px;
  margin-top: 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

@media (min-width: 700px) {
  .urlap-keret {
    min-height: 2400px;
  }
}

.kapcsolat-doboz {
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.kapcsolat-doboz dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.kapcsolat-doboz dt {
  font-weight: 750;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.kapcsolat-doboz dd {
  margin: 2px 0 0;
  font-size: 1.1rem;
}

.gyik {
  margin-top: 28px;
  border-top: 2px solid var(--ink);
}

.gyik details {
  border-bottom: 1px solid var(--line);
}

.gyik summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding-block: 14px;
  cursor: pointer;
  list-style: none;
}

.gyik summary::-webkit-details-marker {
  display: none;
}

.gyik summary h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gyik summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157A3B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 200ms var(--ease-out);
}

.gyik details[open] summary::after {
  transform: rotate(45deg);
}

.gyik details p {
  padding-bottom: 18px;
  color: var(--ink-soft);
  max-width: 44rem;
}

.gyik details p + p {
  margin-top: -8px;
}

/* ---------- Adatvédelem (olvasós oldal) ---------- */

.cikk {
  max-width: 46rem;
  padding-block: 36px 88px;
}

.cikk h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 800;
}

.cikk h2 {
  margin-top: 44px;
  font-size: 1.45rem;
  font-weight: 750;
}

.cikk p,
.cikk ul {
  margin-top: 12px;
}

.cikk ul {
  padding-left: 1.2em;
}

.cikk li + li {
  margin-top: 6px;
}

.figyelmeztetes {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--placeholder-bg);
  outline: 2px dashed var(--placeholder-line);
  outline-offset: -2px;
  font-weight: 600;
}

.frissitve {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- 404 ---------- */

.nem-talalhato {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 64px 96px;
  text-align: center;
}

.nem-talalhato svg {
  width: min(260px, 70vw);
}

.nem-talalhato h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 800;
}

.nem-talalhato p {
  max-width: 30rem;
  color: var(--ink-soft);
}

/* ---------- Mozgás ---------- */

/* Fejléc (fejlec-es-designrendszer.md 3.5): a „to” állapot a kompakt végállapot (.is-kompakt) */
@keyframes fejlec-sav-lejjebb {
  to {
    transform: translateY(47%);
  }
}

@keyframes fejlec-kisebb {
  to {
    transform: scale(0.8);
  }
}

@keyframes taj-sullyed-tavoli {
  to {
    transform: translateY(110%);
  }
}

@keyframes taj-sullyed-kozepso {
  to {
    transform: translateY(105%);
  }
}

@keyframes taj-sullyed-kozeli {
  to {
    transform: translateY(66%);
  }
}

/* Parallaxis: a 110 / 120 / 135%-os réteg a lap aljára érve 10 / 20 / 35 vw-t csúszik */
@keyframes taj-csuszik-tavoli {
  to {
    transform: translateX(-9.09%);
  }
}

@keyframes taj-csuszik-kozepso {
  to {
    transform: translateX(-16.67%);
  }
}

@keyframes taj-csuszik-kozeli {
  to {
    transform: translateX(-25.93%);
  }
}

/* A traktor a dűlőút jobb széléig megy (100cqw = az út szélessége) */
@keyframes traktor-halad {
  to {
    transform: translateX(calc(100cqw - 100%));
  }
}

/* A kis első kerék a sugarak arányában (kb. 7 : 4) gyorsabban forog */
@keyframes traktor-kerek-hatso {
  to {
    transform: rotate(1440deg);
  }
}

@keyframes traktor-kerek-elso {
  to {
    transform: rotate(2520deg);
  }
}

@keyframes taj-szantas {
  to {
    transform: scaleX(1);
  }
}

/* Logó-tű pattanása (620 ms): guggolás → fent (felfelé lassul) → leesik (gyorsul) → lapul → áll.
   A tű csúcsa körül (transform-origin a rajzban); az eltolás a rajz egységében (40 × 70). */
@keyframes logo-pattan {
  0% {
    transform: none;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  18% {
    transform: scale(1.08, 0.9);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  45% {
    transform: translateY(-12px) scale(0.95, 1.05);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  70% {
    transform: scale(1.1, 0.88);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  85% {
    transform: scale(0.97, 1.03);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  100% {
    transform: none;
  }
}

@keyframes logo-arnyek {
  45% {
    transform: scaleX(0.6);
  }
}

@keyframes ful-pattan {
  from {
    transform: scale(0.9);
  }
}

@keyframes forgas {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulzus {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* A „Miért” ikonköre rámutatáskor (5.6) */
@keyframes himbal {
  33% {
    transform: rotate(-3deg);
  }
  66% {
    transform: rotate(3deg);
  }
}

@keyframes lebeg {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.anim-lebeg {
  animation: lebeg 3.6s var(--ease-in-out) 900ms infinite;
  transform-box: fill-box;
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .sajat-hely::after {
    display: none;
  }
}