/* Akvarisztika kezdőknek — publikus alap (Natural Aquascape). FRONTEND_DESIGN_SYSTEM.md */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-var.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --aq-deep: #0D1A17;
  --aq-water-deep: #123D46;
  --aq-plant: #3F7050;
  --aq-plant-sotet: #335C41;
  --aq-wood: #795A3A;
  --aq-accent: #3C948D;
  --aq-accent-sotet: #2B7570;
  --aq-accent-sotetebb: #22605C;
  --aq-accent-vilagos: #9FD3C9;
  --aq-paper: #F5F3EC;
  --aq-paper-meleg: #EDE7DA;
  --aq-surface: #E7ECE6;
  --aq-text: #17211D;
  --aq-muted: #5B6962;
  --aq-line: #D4DDD6;
  --aq-vilagos: #EEF1EA;
  --aq-vilagos-halvany: rgba(238, 241, 234, .78);

  --kat-noveny: #4F7D4D;
  --kat-hal: #348B83;
  --kat-garnela: #A45F42;
  --kat-viz: #347A91;
  --kat-technika: #536A70;
  --kat-bio: #748A4C;
  --kat-kezdo: #806044;
  /* Figyelemszín: kizárólag a Támogatás CTA időszakos impulzusához (SUPPORT_SYSTEM §14). */
  --aq-figyelem: #C4513A;
  --aq-akcio: #C23A2E; /* Akciók menüpont ikonja: az akció funkció saját, visszafogott piros hangsúlya */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-soft: 0 10px 26px rgba(13, 26, 23, .07);
  --shadow-card: 0 18px 45px rgba(13, 26, 23, .12);
  --shadow-raised: 0 24px 55px rgba(13, 26, 23, .18);

  --betu: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Kiemelő serif: rendszerfont, külön letöltés nélkül. */
  --betu-serif: Georgia, Cambria, "Times New Roman", serif;
  /* Wide shell: 1944 CSS px-ig pontosan 1400 px, afölött fluidan nő (2560 px-en ~1840), 1880 px-nél megáll. */
  --shell-max: clamp(1400px, 72vw, 1880px);
  /* Olvasó shell hosszú folyószöveghez — ultrawide-on sem szélesedik. */
  --shell-olvaso: min(760px, calc(100% - 32px));
  --gutter: 24px;
  --shell: min(var(--shell-max), calc(100% - 2 * var(--gutter)));
  /* Ennyivel lóg ki egy elem a shellből a viewport széléig (kontrollált túlfutás). */
  --kilogas: max(var(--gutter), calc((100vw - var(--shell-max)) / 2));
  --fejlec-magassag: 76px;
  --szekcio-ter: clamp(72px, 9vw, 128px);
}

@media (max-width: 559px) {
  :root { --gutter: 16px; --fejlec-magassag: 68px; }
}

/* ================================================================ Téma: világos / sötét (FRONTEND_DESIGN_SYSTEM §4.x „Téma”)
   A sötét mód a felhasználói fiók preferenciája (felhasznalo.sotet_mod); a szerver a PWA és az Akváriumnapló <html> elemére írja:
   data-tema="sotet". A publikus weboldal nem kapja meg (ott mindig világos).
   - --t-*  : közös téma-tokenek mindkét módban — ÚJ komponens csak ezeket használja (light + dark kompatibilis megvalósítás).
   - --td-* : a meglévő CSS világos literáljainak sötét szerepszínei, CSAK sötétben definiáltak: `var(--td-felulet, #fff)` világosban
              az eredeti literál, sötétben a szerepszín. Új kódban nem kell, ott a --t-* a helyes. */
:root {
  --t-hatter: #F5F3EC;
  --t-felulet: #FFFFFF;
  --t-felulet-emelt: #FFFFFF;
  --t-kartya: #FFFFFF;
  --t-felulet-2: #F3F6F2;
  --t-keret: #D4DDD6;
  --t-elvalaszto: #E3EAE5;
  --t-szoveg: #17211D;
  --t-szoveg-2: #34423C;
  --t-halk: #5B6962;
  --t-tiltott: #9AA6A0;
  --t-teal: #2B7570;
  --t-teal-hover: #22605C;
  --t-teal-aktiv: #1D514D;
  --t-teal-halvany: #E3F1EE;
  --t-teal-szoveg: #22605C;
  --t-input-hatter: #FFFFFF;
  --t-input-keret: #C9D3CC;
  --t-fokusz: rgba(60, 148, 141, .45);
  --t-siker: #2F7A4E;
  --t-siker-halvany: #E3F1E7;
  --t-siker-szoveg: #23613A;
  --t-figyelem: #B8651A;
  --t-figyelem-halvany: #FFF1CF;
  --t-figyelem-szoveg: #7A420F;
  --t-hiba: #B42318;
  --t-hiba-halvany: #FBE9E4;
  --t-hiba-szoveg: #8A3321;
  --t-info: #2F6F86;
  --t-info-halvany: #E6EEFC;
  --t-info-szoveg: #1F4A55;
  --t-hover: rgba(13, 26, 23, .06);
  --t-overlay: rgba(13, 26, 23, .45);
  --t-scrim: rgba(13, 26, 23, .55);
  --t-tooltip: #17211D;
  --t-tooltip-szoveg: #F5F3EC;
  --t-grafikon-hatter: transparent;
  --t-grafikon-racs: #E8EEEF;
  --t-grafikon-felirat: #667786;
  --t-nav: #FFFFFF;
  /* AquaGo ↔ AquaLog módváltás (FRONTEND_DESIGN_SYSTEM „Módváltás”): mindkét témában karakteres, sötét petrol — nincs fehér villanás. */
  --t-aqualog-hatter: #0A1C1C;
  --t-aqualog-hatter-2: #0F3434;
  --t-aqualog-szoveg: #EAF3F1;
  --t-aqualog-halk: #9DBDB7;
  --t-aqualog-kiemelt: #4CC4BC;
  --t-aqualog-racs: rgba(234, 243, 241, .08);
  --t-aqualog-chip: rgba(234, 243, 241, .07);
  --t-aquago-hatter: #0D1A17;
  --t-aquago-szoveg: #F5F3EC;
}

html[data-tema="sotet"] {
  color-scheme: dark;
  --t-hatter: #0F1A1C;
  --t-felulet: #172427;
  --t-felulet-emelt: #1E2E32;
  --t-kartya: #172427;
  --t-felulet-2: #1D2D31;
  --t-keret: #2F4549;
  --t-elvalaszto: #263A3E;
  --t-szoveg: #E8EFED;
  --t-szoveg-2: #C9D6D3;
  --t-halk: #9CB0AD;
  --t-tiltott: #64777A;
  --t-teal: #4CC4BC;
  --t-teal-hover: #6FD3CC;
  --t-teal-aktiv: #39A9A2;
  --t-teal-halvany: #173A3A;
  --t-teal-szoveg: #7FD9D0;
  --t-input-hatter: #132225;
  --t-input-keret: #3A5357;
  --t-fokusz: rgba(76, 196, 188, .5);
  --t-siker: #52C48A;
  --t-siker-halvany: #16342A;
  --t-siker-szoveg: #8EDDB2;
  --t-figyelem: #E9A53F;
  --t-figyelem-halvany: #3A2C14;
  --t-figyelem-szoveg: #F3C77F;
  --t-hiba: #F07167;
  --t-hiba-halvany: #3E1F1D;
  --t-hiba-szoveg: #F7A8A0;
  --t-info: #62A8F0;
  --t-info-halvany: #172A40;
  --t-info-szoveg: #A9CCF5;
  --t-hover: rgba(232, 239, 237, .07);
  --t-overlay: rgba(3, 9, 10, .72);
  --t-scrim: rgba(0, 0, 0, .6);
  --t-tooltip: #E8EFED;
  --t-tooltip-szoveg: #0F1A1C;
  --t-grafikon-hatter: transparent;
  --t-grafikon-racs: #2C3F43;
  --t-grafikon-felirat: #9CB0AD;
  --t-nav: #111D20;
  --t-aqualog-hatter: #061213;
  --t-aqualog-hatter-2: #0B2526;
  --t-aqualog-racs: rgba(234, 243, 241, .06);
  --t-aquago-hatter: #0A1412;

  --td-hatter: var(--t-hatter);
  --td-felulet: var(--t-felulet);
  --td-felulet-2: var(--t-felulet-2);
  --td-felulet-3: #26393E;
  --td-felulet-attetszo: rgba(23, 36, 39, .94);
  --td-hover: var(--t-hover);
  --td-keret: var(--t-keret);
  --td-szoveg: var(--t-szoveg);
  --td-szoveg-2: var(--t-szoveg-2);
  --td-halk: var(--t-halk);
  --td-grafikon-racs: var(--t-grafikon-racs);
  --td-teal-halvany: var(--t-teal-halvany);
  --td-teal-szoveg: var(--t-teal-szoveg);
  --td-teal-keret: #2C5A57;
  --td-teal-attetszo: rgba(76, 196, 188, .16);
  --td-siker-halvany: var(--t-siker-halvany);
  --td-siker-szoveg: var(--t-siker-szoveg);
  --td-siker-keret: #2C5A43;
  --td-siker-attetszo: rgba(82, 196, 138, .16);
  --td-figyelem-halvany: var(--t-figyelem-halvany);
  --td-figyelem-szoveg: var(--t-figyelem-szoveg);
  --td-figyelem-keret: #6A4D20;
  --td-figyelem-attetszo: rgba(233, 165, 63, .16);
  --td-hiba-halvany: var(--t-hiba-halvany);
  --td-hiba-szoveg: var(--t-hiba-szoveg);
  --td-hiba-keret: #6E3330;
  --td-info-halvany: var(--t-info-halvany);
  --td-info-szoveg: var(--t-info-szoveg);
  --td-info-keret: #2F4C6E;
  --td-lila-halvany: #2A2240;
  --td-lila-szoveg: #C3B3F5;

  --shadow-soft: 0 10px 26px rgba(0, 0, 0, .28);
  --shadow-card: 0 18px 45px rgba(0, 0, 0, .38);
  --shadow-raised: 0 24px 55px rgba(0, 0, 0, .48);
  background: var(--t-hatter);
}
html[data-tema="sotet"] ::placeholder { color: var(--t-halk); opacity: 1; }
html[data-tema="sotet"] :disabled { color: var(--t-tiltott); }
/* Böngészős automatikus kitöltés: a natív világos sárga / fehér háttér helyett a téma mezőszíne. */
html[data-tema="sotet"] input:-webkit-autofill, html[data-tema="sotet"] textarea:-webkit-autofill, html[data-tema="sotet"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--t-szoveg); -webkit-box-shadow: 0 0 0 1000px var(--t-input-hatter) inset; caret-color: var(--t-szoveg);
}
html[data-tema="sotet"] input[type="checkbox"], html[data-tema="sotet"] input[type="radio"], html[data-tema="sotet"] input[type="range"],
html[data-tema="sotet"] progress { accent-color: var(--t-teal); }
html[data-tema="sotet"] ::selection { background: rgba(76, 196, 188, .35); color: var(--t-szoveg); }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--fejlec-magassag) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--betu);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--td-szoveg, var(--aq-text));
  background: var(--td-hatter, var(--aq-paper));
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 992px) {
  body { font-size: 1.125rem; }
}

body.menu-nyitva { overflow: hidden; }

img, svg, picture { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
p { margin: 0 0 1em; }

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

main:focus, [tabindex="-1"]:focus { outline: none; }

.shell { width: var(--shell); margin-inline: auto; }

.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;
}

.ugro-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 12px 18px; border-radius: var(--radius-xs);
  background: var(--td-hatter, var(--aq-paper)); color: var(--td-szoveg, var(--aq-text)); font-weight: 700;
}
.ugro-link:focus { top: 12px; }

.ikon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ikon-kitolt { fill: currentColor; stroke: none; }

/* ---------- Tipográfia, szekciófejek ---------- */

.felirat {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--td-figyelem-szoveg, var(--aq-wood));
}
.felirat .ikon { width: 1.35em; height: 1.35em; }
.felirat--vilagos { color: var(--aq-accent-vilagos); }

.szekciocim {
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.szekciocim--vilagos { color: #fff; }

.szekciofej { margin-bottom: clamp(36px, 4.5vw, 64px); }
.szekciofej__bevezeto { max-width: 48ch; margin: 18px 0 0; font-size: 1.125rem; color: var(--td-halk, var(--aq-muted)); }
.szekciofej__bevezeto--nagy {
  font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.3;
  color: var(--td-szoveg, var(--aq-text)); letter-spacing: -.01em;
}

@media (min-width: 820px) {
  .szekciofej--ket-oszlop {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px 64px; align-items: end;
  }
  .szekciofej--ket-oszlop .szekciofej__bevezeto { margin: 0 0 6px; }
}

.szekciofej--sor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }

/* ---------- Gombok, linkek ---------- */

.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75em 1.35em;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.gomb:hover { transform: translateY(-1px); }
.gomb:active { transform: none; }
.gomb .ikon { width: 1.2em; height: 1.2em; }
.gomb--nagy { min-height: 56px; padding: .95em 1.7em; font-size: 1.0625rem; }
.gomb--teljes { width: 100%; }

.gomb--elsodleges { background: var(--aq-accent-sotet); color: #fff; }
.gomb--elsodleges:hover { background: var(--aq-accent-sotetebb); }

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

.gomb--korvonal { border-color: var(--aq-text); color: var(--td-szoveg, var(--aq-text)); background: transparent; }
.gomb--korvonal:hover { background: var(--aq-text); color: var(--aq-paper); }

.gomb--vilagos-korvonal { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.gomb--vilagos-korvonal:hover { background: var(--td-felulet, #fff); color: var(--td-szoveg, var(--aq-deep)); border-color: var(--td-keret, #fff); }

.szoveglink {
  font-weight: 700; color: var(--td-szoveg, var(--aq-text));
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
  text-decoration-color: var(--aq-accent);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.szoveglink:hover { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); text-decoration-color: currentColor; }
.szoveglink--vilagos { color: #fff; text-decoration-color: var(--aq-accent-vilagos); }
.szoveglink--vilagos:hover { color: var(--aq-accent-vilagos); }

.helyorzo-cimke {
  position: absolute; z-index: 6; top: 12px; left: 12px;
  padding: 6px 10px; border-radius: 6px;
  background: #F2D16B; color: #2A2410;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}

/* ---------- Logó ---------- */

.logo {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  color: #fff; text-decoration: none; margin-right: auto;
}
.logo__jel { width: 50px; height: auto; color: #fff; }
.logo__szoveg { display: flex; flex-direction: column; line-height: 1; }
.logo__sor1 { font-size: 1.0625rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.logo__sor2 { margin-top: 5px; font-size: .8125rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--aq-accent-vilagos); }

@media (max-width: 374px) {
  .logo__jel { width: 42px; }
  .logo__sor1 { font-size: .9375rem; }
  .logo__sor2 { font-size: .75rem; letter-spacing: .24em; }
}

/* ---------- Fejléc ---------- */

.fejlec {
  position: sticky; top: 0; z-index: 50;
  background: var(--aq-deep); color: var(--aq-vilagos);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.fejlec__belso { display: flex; align-items: center; gap: 12px; min-height: var(--fejlec-magassag); }

.fomenu { display: none; }
.fomenu__lista { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fomenu__elem { position: relative; }
.fomenu__link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radius-xs); background: none;
  color: rgba(238, 241, 234, .88); font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.fomenu__link:hover, .fomenu__link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .07); }
.fomenu__elem--osztott { display: flex; align-items: center; }
.fomenu__link--aqualog .fomenu__ikon { width: 18px; height: 18px; color: var(--aq-accent-vilagos); }
.fomenu__elem--osztott > .fomenu__link { padding-right: 4px; border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.fomenu__nyito {
  display: grid; place-items: center; width: 30px; min-height: 44px;
  border: 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: none;
  color: rgba(238, 241, 234, .88); cursor: pointer;
}
.fomenu__nyito:hover, .fomenu__nyito[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .07); }
.fomenu__jel { width: 16px; height: 16px; transition: transform .2s ease; }
[aria-expanded="true"] > .fomenu__jel, [aria-expanded="true"] .fomenu__jel { transform: rotate(180deg); }

.lenyilo {
  display: none;
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  width: 420px; padding: 26px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-xl);
  background: #16221E; color: var(--aq-vilagos);
  box-shadow: 0 38px 80px rgba(0, 0, 0, .55), 0 12px 24px rgba(0, 0, 0, .3);
}
/* A menüpont és a panel közti rés áthidalása, hogy hoverrel ne zárjon be. */
.lenyilo::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.lenyilo.nyitva,
html:not(.js) .fomenu__elem:hover > .lenyilo,
html:not(.js) .fomenu__elem:focus-within > .lenyilo { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .lenyilo.nyitva { animation: lenyilo-be .24s ease-out; }
}
@keyframes lenyilo-be {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* A Kezdő útmutató mega-panel a fejléc shelljéhez igazodik, nem a menüponthoz. */
.fejlec__belso { position: relative; }
.fomenu__elem--mega { position: static; }
.lenyilo--kezdo { left: auto; right: 0; top: calc(100% + 6px); width: min(calc(var(--shell-max) * .772), 100%); padding: 44px 48px; }
.lenyilo--kezdo.nyitva,
html:not(.js) .fomenu__elem--mega:hover > .lenyilo--kezdo,
html:not(.js) .fomenu__elem--mega:focus-within > .lenyilo--kezdo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 52px; }
.lenyilo--algak { width: 460px; left: auto; right: -8px; }

.lenyilo__bevezeto { padding-right: 44px; border-right: 1px solid rgba(255, 255, 255, .1); }
.lenyilo__felirat { margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--td-siker-szoveg, #7FAE8C); }
.lenyilo__cim { margin: 0 0 16px; font-family: var(--betu-serif); font-size: clamp(1.7rem, 1.2rem + 1vw, 2.2rem); line-height: 1.12; color: #fff; }
.lenyilo__szoveg { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(238, 241, 234, .72); }

.lenyilo__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.lenyilo__lista--ket-oszlop { grid-template-columns: 1fr 1fr; column-gap: 36px; align-content: start; }
.lenyilo__link {
  display: flex; align-items: baseline; gap: 16px;
  min-height: 44px; padding: 15px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; text-decoration: none;
  transition: color .15s ease, padding .2s ease;
}
.lenyilo__link:hover { color: var(--aq-accent-vilagos); padding-left: 10px; }
.lenyilo__link--attekinto { color: var(--aq-accent-vilagos); font-weight: 800; }
.lenyilo--algak .lenyilo__link { font-size: .96875rem; font-weight: 600; padding: 12px 4px; }
.lenyilo--algak .lenyilo__felirat { margin: 2px 4px 6px; }
.lenyilo__szam {
  min-width: 1.6em;
  font-family: var(--betu-serif); font-size: 1.45rem; font-weight: 400;
  font-variant-numeric: oldstyle-nums; color: #8DB39A;
}
.lenyilo__link:hover .lenyilo__szam { color: var(--aq-accent-vilagos); }
.lenyilo__zaro { grid-column: 1 / -1; margin-top: 14px; }
.lenyilo__link--inditas { align-items: center; padding: 14px 18px; border: 1px solid rgba(159, 211, 201, .28); border-radius: var(--radius-sm); background: var(--td-teal-attetszo, rgba(159, 211, 201, .08)); }
.lenyilo__link--inditas:hover { padding-left: 24px; background: var(--td-teal-attetszo, rgba(159, 211, 201, .14)); }
.lenyilo__link--inditas small { display: block; margin-top: 4px; font-size: .875rem; font-weight: 500; color: rgba(238, 241, 234, .72); }
.lenyilo__ikon { flex: none; width: 24px; height: 24px; color: var(--aq-accent-vilagos); }
/* AquaGo mega-menü (2026-10-21): balra leírás + alkalmazás, jobbra a három szolgáltatás kártyaként és a Mustra-felhívás. */
.lenyilo__aquago { display: grid; align-content: start; gap: 16px; }
.lenyilo__lista--kartyak { gap: 10px; }
.lenyilo__lista--kartyak .lenyilo__link--inditas { border-bottom: 1px solid rgba(159, 211, 201, .28); }
.lenyilo__felhivas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px;
  border: 1px dashed rgba(159, 211, 201, .35); border-radius: var(--radius-sm); }
.lenyilo__felhivas p { flex: 1 1 260px; margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(238, 241, 234, .8); }
.lenyilo__felhivas strong { display: block; margin-bottom: 2px; color: #fff; font-size: 1rem; }
.lenyilo__felhivas-gomb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lenyilo__felhivas-gomb .ikon { width: 20px; height: 20px; }
.lenyilo--aquago .app-letoltes { margin-top: 26px; }

/* „Alkalmazás letöltése”: kerek ikongombok felirattal (lábléc, AquaGo menü). */
.app-letoltes__cim { margin: 0 0 12px; }
.app-letoltes__gombok { display: flex; gap: 14px; }
.app-letoltes__gomb { display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.app-letoltes__kor { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: #fff; transition: background-color .15s ease, border-color .15s ease; }
.app-letoltes__kor .ikon { width: 26px; height: 26px; }
.app-letoltes__gomb small { color: rgba(238, 241, 234, .78); font-size: .8125rem; font-weight: 700; }
.app-letoltes__gomb:hover .app-letoltes__kor { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
.app-letoltes__gomb:focus-visible { outline: none; }
.app-letoltes__gomb:focus-visible .app-letoltes__kor { outline: 3px solid var(--aq-accent-vilagos); outline-offset: 2px; }
.app-letoltes[hidden] { display: none; }
.harmonika__panel a.harmonika__inditas { margin-top: 6px; color: #fff; font-weight: 800; }
.harmonika__panel a.harmonika__attekinto { color: #fff; font-weight: 800; }

.fejlec__tamogatas { display: none; min-height: 44px; padding: .55em 1.15em; position: relative; isolation: isolate; }

/*
 * Támogatás CTA figyelemimpulzus (SUPPORT_SYSTEM §14): ~10 másodpercenként egy kb. 1,3 s-os pirosas felvillanás és két
 * kifelé futó, halványuló kör; közte teljes nyugalom. Csak transform/opacity, a dekor pointer-events nélküli és
 * abszolút pozíciójú (nincs layout shift). Reduced motion mellett nincs animáció; a támogatási oldalon nem fut.
 */
.fejlec__tamogatas::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--aq-figyelem); opacity: 0; pointer-events: none;
}
.fejlec__hullam { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.fejlec__hullam::before, .fejlec__hullam::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--aq-figyelem); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fejlec__tamogatas::before { animation: figyelem-szin 10s ease-in-out 4s infinite; }
  .fejlec__hullam::before { animation: figyelem-hullam 10s ease-out 4.1s infinite; }
  .fejlec__hullam::after { animation: figyelem-hullam 10s ease-out 4.5s infinite; }
  .fejlec__tamogatas:hover::before, .fejlec__tamogatas:focus-visible::before,
  .fejlec__tamogatas:hover .fejlec__hullam::before, .fejlec__tamogatas:hover .fejlec__hullam::after,
  .fejlec__tamogatas:focus-visible .fejlec__hullam::before, .fejlec__tamogatas:focus-visible .fejlec__hullam::after,
  .oldal-tamogatas .fejlec__tamogatas::before,
  .oldal-tamogatas .fejlec__hullam::before, .oldal-tamogatas .fejlec__hullam::after { animation: none; }
}
@keyframes figyelem-szin {
  0% { opacity: 0; }
  4% { opacity: .92; }
  10% { opacity: .92; }
  14%, 100% { opacity: 0; }
}
@keyframes figyelem-hullam {
  0% { opacity: 0; transform: scale(1); }
  2% { opacity: .6; }
  14% { opacity: 0; transform: scale(1.35, 1.8); }
  100% { opacity: 0; transform: scale(1.35, 1.8); }
}

.menugomb {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: transparent;
  color: #fff; font-weight: 700; text-decoration: none; cursor: pointer;
}
.menugomb .ikon { width: 22px; height: 22px; }
html:not(.js) button.menugomb { display: none; }
html.js .menugomb--nojs { display: none; }
/* Keskeny kijelzőn belépve (harang + profil) a „Menü” felirat vizuálisan elrejtve, a képernyőolvasó továbbra is felolvassa. */
@media (max-width: 439px) {
  .menugomb { padding: 0 11px; }
  .menugomb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 560px) {
  .fejlec__tamogatas { display: inline-flex; }
}

@media (min-width: 1200px) {
  .fomenu { display: block; }
  .logo { margin-right: 0; }
  .fomenu { margin-left: auto; }
  .fejlec__tamogatas { margin-left: 10px; }
  .menugomb, html:not(.js) .menugomb--nojs { display: none; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .fomenu__link { padding: 0 8px; font-size: .9375rem; }
  .fomenu__nyito { width: 26px; }
  .logo__szoveg { display: none; }
}

@media (min-width: 1400px) and (max-width: 1559px) {
  .fomenu__link { padding: 0 9px; }
  .fomenu__nyito { width: 26px; }
}

/* ---------- Mobil menü ---------- */

.mobilmenu {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--aq-deep); color: var(--aq-vilagos);
}
.mobilmenu[hidden] { display: none; }
.mobilmenu__fej {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--fejlec-magassag); padding: 0 var(--gutter);
  background: var(--aq-deep); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mobilmenu__bezar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: none;
  color: #fff; font-weight: 700; cursor: pointer;
}
.mobilmenu__bezar .ikon { width: 22px; height: 22px; }
.mobilmenu__nav { padding: 8px var(--gutter) 40px; }
.mobilmenu__lista { margin: 0; padding: 0; list-style: none; }
.mobilmenu__lista > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mobilmenu__link, .harmonika__gomb {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 58px; padding: 0 2px;
  border: 0; background: none; color: #fff;
  font-size: 1.25rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.harmonika__jel { width: 22px; height: 22px; transition: transform .2s ease; }
.mobilmenu__link--aqualog { justify-content: flex-start; }
.mobilmenu__ikon { width: 24px; height: 24px; color: var(--aq-accent-vilagos); }
.harmonika__gomb[aria-expanded="true"] .harmonika__jel { transform: rotate(180deg); }
.harmonika__panel { margin: 0 0 14px; padding: 0; list-style: none; }
.harmonika__panel a {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 4px;
  color: rgba(238, 241, 234, .86); font-weight: 600; line-height: 1.3; text-decoration: none;
}
.harmonika__panel a:hover { color: #fff; }
.harmonika__panel .lenyilo__szam { color: var(--aq-accent-vilagos); }
.harmonika__panel li:first-child a[href$="akvariumi-algak"] { font-weight: 800; color: #fff; }
.mobilmenu__lab { display: grid; gap: 12px; padding-top: 28px; }
.mobilmenu__masodlagos { display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--aq-accent-vilagos); font-weight: 700; }

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

.lablec { background: var(--aq-deep); color: rgba(238, 241, 234, .8); padding-top: clamp(56px, 7vw, 96px); font-size: 1rem; }
.lablec__felso { display: grid; gap: 48px; }
.lablec__kuldetes { max-width: 34ch; margin: 22px 0 22px; }
.lablec__kozossegi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lablec__kozossegi a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.lablec__kozossegi a:hover { background: rgba(255, 255, 255, .06); }
/* AquaGo a láblécben: „Alkalmazás letöltése” (közös `app-letoltes` elem; csak telefonon / tableten látszik, pwa.js). */
.lablec__app { margin-top: 28px; }
.lablec__app[hidden] { display: none; }
.lablec__app > p { max-width: 34ch; margin: 12px 0 0; font-size: .9375rem; }

.lablec__nav { display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lablec__cim { margin: 0 0 10px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aq-accent-vilagos); }
.lablec__nav ul { margin: 0; padding: 0; list-style: none; }
.lablec__nav a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(238, 241, 234, .84); text-decoration: none; }
.lablec__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.lablec__tamogatas {
  align-self: start; padding: 24px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md);
}
.lablec__tamogatas p { margin: 0 0 16px; color: #fff; font-weight: 600; line-height: 1.45; }
.lablec__also { margin-top: 56px; padding: 22px 0 30px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .875rem; }
.lablec__also p { margin: 0; }
.lablec__also { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
/* A Barion útmutatója: legalább 8 px szabad hely körülötte, a logókat nem módosítjuk, a háttérhez illő hivatalos változat látszik. */
.barion-logosor { display: block; width: 240px; max-width: 100%; height: auto; margin-block: 8px; }
.barion-logosor--sotet { display: none; }
html[data-tema="sotet"] .barion-logosor--vilagos { display: none; }
html[data-tema="sotet"] .barion-logosor--sotet { display: block; }
/* A jobb alsó sarokban lebegő „vissza a tetejére” gomb nem takarhatja a logókat. */
.lablec__also .barion-logosor { margin-right: 60px; }
/* Jobb oszlop: Támogatás és Fiókod (belépés / regisztráció / profil) azonos dobozban, egymás alatt (2026-10-21). */
.lablec__oldal { display: grid; align-content: start; gap: 16px; }
.lablec__fiok { padding: 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md); }
.lablec__fiok p { margin: 0 0 16px; color: rgba(238, 241, 234, .84); font-size: .9375rem; line-height: 1.5; }
.lablec__fiok-gomb {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; background: rgba(255, 255, 255, .06);
  color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
}
.lablec__fiok-gomb:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.lablec__fiok-gomb:focus-visible { outline: 3px solid var(--aq-accent-vilagos); outline-offset: 2px; }
.lablec__fiok-gomb .ikon { width: 20px; height: 20px; }

@media (min-width: 820px) {
  .lablec__felso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .lablec__oldal { grid-column: 2; }
}
@media (min-width: 1200px) {
  .lablec__felso { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, .9fr); }
  .lablec__oldal { grid-column: auto; }
}

/* ---------- Hibaoldal ---------- */

.hiba-oldal { padding: clamp(96px, 12vw, 160px) 0; }
.hiba-oldal p { max-width: 52ch; margin: 20px 0 32px; color: var(--td-halk, var(--aq-muted)); }

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

[data-reveal] { transition: opacity .7s ease, transform .7s ease; }
.reveal-var { opacity: 0; transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-var { opacity: 1; transform: none; }
}

/* Felgördítő gomb (minden oldal) */
.felgordito {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #0D1A17; color: #fff; box-shadow: 0 8px 24px rgba(13, 26, 23, .28); border: 1px solid rgba(255, 255, 255, .14);
}
.felgordito[hidden] { display: none; }
.felgordito:hover { background: var(--aq-accent-sotet); }
.felgordito:focus-visible { outline: 3px solid var(--aq-accent-vilagos); outline-offset: 3px; }
.felgordito__ikon { width: 22px; height: 22px; transform: rotate(180deg); }
@media (min-width: 1200px) { .felgordito { right: 28px; bottom: 28px; width: 52px; height: 52px; } }

/* Leaflet-térkép saját rétegkontextusban: a belső rétegek (z-index 400–1000) nem kerülhetnek a ragadós fejléc vagy a lapok fölé. */
.leaflet-container { isolation: isolate; }

/* A [hidden] gomb (pl. navigáció, amíg a JS be nem állítja) ne jelenjen meg a .gomb display-szabálya miatt. */
.gomb[hidden] { display: none; }

/* ================================================================ AquaGo ↔ AquaLog módváltás (FRONTEND_DESIGN_SYSTEM „Módváltás”)
   Alapból rejtett; a mod-atmenet.js a <html>-re teszi: mod-atmenet-aqualog | mod-atmenet-aquago + --indul (az induló oldalon, a
   kattintás után) | --erkezik (a céloldalon, az első festéstől) | --ki (elhalványulás). Képernyőolvasótól rejtett, nem fókuszálható. */
.mod-atmenet { display: none; }
/* A partial `hidden` attribútummal érkezik (stílus nélkül is rejtett); a kozosseg.css globális [hidden] !important szabályát ez írja felül. */
html.mod-atmenet-aqualog .mod-atmenet[hidden], html.mod-atmenet-aquago .mod-atmenet[hidden] { display: grid !important; }
html.mod-atmenet-aqualog .mod-atmenet, html.mod-atmenet-aquago .mod-atmenet {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px 16px;
  font-family: var(--betu, "Manrope", system-ui, sans-serif); pointer-events: auto; overflow: hidden;
}
html.mod-atmenet-aqualog .mod-atmenet {
  color: var(--t-aqualog-szoveg);
  background: radial-gradient(120% 80% at 50% 38%, var(--t-aqualog-hatter-2) 0%, var(--t-aqualog-hatter) 70%);
}
html.mod-atmenet-aquago .mod-atmenet { color: var(--t-aquago-szoveg); background: var(--t-aquago-hatter); }
.mod-atmenet__aqualog, .mod-atmenet__aquago { display: none; }
html.mod-atmenet-aqualog .mod-atmenet__aqualog { display: grid; justify-items: center; width: min(360px, 100%); text-align: center; }
html.mod-atmenet-aquago .mod-atmenet__aquago { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.mod-atmenet__aquago svg { width: 44px; height: 44px; }
.mod-atmenet__ikon { width: 46px; height: 46px; color: var(--t-aqualog-kiemelt); }
.mod-atmenet__szojel { margin: 10px 0 0; font-size: clamp(2.2rem, 9vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mod-atmenet__tagline { margin: 10px 0 0; color: var(--t-aqualog-halk); font-size: .98rem; font-weight: 600; }
/* Lebegő paraméterek a háttérben, a szójel körül (2026-10-09, 2. kör): mindegyik más irányból úszik be, és eltérő ütemben lassan,
   néhány pixelt lebeg — mintha az adatok az akváriumban lebegnének. A <li> helyezi el (transform) és úsztatja be (translate +
   opacity), a belső <span> lebeg (transform + opacity), így a két mozgás nem írja felül egymást. */
.mod-atmenet__adatok { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.mod-atmenet__adatok li {
  --r: min(40vw, 280px);
  position: absolute; top: calc(50% + var(--y)); left: calc(50% + var(--x)); transform: translate(-50%, -50%);
}
.mod-atmenet__adatok span {
  display: block; min-width: 46px; padding: 6px 11px; border: 1px solid var(--t-aqualog-racs); border-radius: 999px;
  background: linear-gradient(var(--t-aqualog-chip), var(--t-aqualog-chip)), var(--t-aqualog-hatter); color: var(--t-aqualog-halk); font-size: .8rem;
  font-weight: 700; letter-spacing: .02em; text-align: center; white-space: nowrap;
}
/* Helyek (x a képernyő szélességével arányos, y px a középponthoz), beúszási irány (dx, dy), lebegés (fx, fy, időtartam). */
.mod-atmenet__adatok li:nth-child(1) { --x: calc(var(--r) * -.7); --y: -168px; --dx: -26px; --dy: 4px; --fx: 3px; --fy: -5px; --t: 3.4s; --k: 200ms; }
.mod-atmenet__adatok li:nth-child(2) { --x: calc(var(--r) * .72); --y: -148px; --dx: 26px; --dy: -4px; --fx: -3px; --fy: 4px; --t: 4.1s; --k: 400ms; }
.mod-atmenet__adatok li:nth-child(3) { --x: calc(var(--r) * -.95); --y: -24px; --dx: -18px; --dy: -10px; --fx: 2px; --fy: 6px; --t: 4.6s; --k: 600ms; }
.mod-atmenet__adatok li:nth-child(4) { --x: calc(var(--r) * .95); --y: -2px; --dx: 0px; --dy: 18px; --fx: -2px; --fy: -6px; --t: 3.7s; --k: 800ms; }
.mod-atmenet__adatok li:nth-child(5) { --x: calc(var(--r) * -.58); --y: 168px; --dx: -20px; --dy: 12px; --fx: 3px; --fy: -4px; --t: 4.3s; --k: 1150ms; }
.mod-atmenet__adatok li:nth-child(6) { --x: calc(var(--r) * .58); --y: 186px; --dx: 24px; --dy: 6px; --fx: -3px; --fy: -5px; --t: 3.9s; --k: 980ms; }
.mod-atmenet__adatok li:nth-child(7) { --x: calc(var(--r) * .08); --y: -214px; --dx: 0px; --dy: -16px; --fx: 2px; --fy: 4px; --t: 4.4s; --k: 1350ms; }
.mod-atmenet__grafikon { width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.mod-atmenet__racs { fill: none; stroke: var(--t-aqualog-racs); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mod-atmenet__marker { fill: none; stroke: var(--t-aqualog-kiemelt); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; vector-effect: non-scaling-stroke; }
.mod-atmenet__vonal { fill: none; stroke: var(--t-aqualog-kiemelt); stroke-width: 2.2; stroke-linecap: round; }
.mod-atmenet__pont { fill: var(--t-aqualog-hatter); stroke: var(--t-aqualog-kiemelt); stroke-width: 2; }
.mod-atmenet__pont--utolso { fill: var(--t-aqualog-kiemelt); }
/* Háttérképletek (2026-10-09, 3. kör): nagyon halvány akvarisztikai kémia / számítás, lassan sodródva a teljes képernyőn, a tartalom
   mögött (z-index -1 az átvezető saját rétegében). */
.mod-atmenet__kepletek { position: absolute; inset: 0; z-index: -1; margin: 0; padding: 0; list-style: none; pointer-events: none; overflow: hidden; }
.mod-atmenet__kepletek li {
  position: absolute; left: var(--x); top: var(--y); color: var(--t-aqualog-szoveg); opacity: 0; white-space: nowrap;
  font: italic 500 clamp(.78rem, 2.6vw, .98rem) / 1 Georgia, "Times New Roman", serif; letter-spacing: .01em;
}
.mod-atmenet__kepletek sub, .mod-atmenet__kepletek sup { font-size: .7em; }
.mod-atmenet__nyil { position: relative; display: inline-block; width: .95em; margin: 0 .3em; border-top: .07em solid currentColor; vertical-align: middle; }
.mod-atmenet__nyil::after { content: ""; position: absolute; right: -.04em; top: -.2em; border-left: .3em solid currentColor; border-top: .165em solid transparent; border-bottom: .165em solid transparent; }
.mod-atmenet__kepletek li:nth-child(1) { --x: 5%; --y: 8%; --dx: 28px; --dy: 6px; --t: 9s; --o: .11; --k: 0ms; }
.mod-atmenet__kepletek li:nth-child(2) { --x: 40%; --y: 21%; --dx: -24px; --dy: 5px; --t: 10.5s; --o: .08; --k: 150ms; }
.mod-atmenet__kepletek li:nth-child(3) { --x: 62%; --y: 32%; --dx: 20px; --dy: -7px; --t: 8.2s; --o: .1; --k: 300ms; }
.mod-atmenet__kepletek li:nth-child(4) { --x: 3%; --y: 40%; --dx: 18px; --dy: 8px; --t: 9.6s; --o: .08; --k: 450ms; }
.mod-atmenet__kepletek li:nth-child(5) { --x: 58%; --y: 60%; --dx: -20px; --dy: -6px; --t: 11s; --o: .1; --k: 200ms; }
.mod-atmenet__kepletek li:nth-child(6) { --x: 8%; --y: 70%; --dx: 24px; --dy: -5px; --t: 8.8s; --o: .11; --k: 350ms; }
.mod-atmenet__kepletek li:nth-child(7) { --x: 66%; --y: 82%; --dx: -18px; --dy: 6px; --t: 10s; --o: .09; --k: 500ms; }
.mod-atmenet__kepletek li:nth-child(8) { --x: 22%; --y: 92%; --dx: 22px; --dy: -4px; --t: 9.2s; --o: .08; --k: 600ms; }
/* Mini diagramok a háttérben (oszlopok növekednek, a gyűrű kirajzolódik), a címkéktől távol, a képernyő felső / alsó részén. */
.mod-atmenet__diagram {
  --r: min(40vw, 280px);
  position: absolute; top: calc(50% + var(--y)); left: calc(50% + var(--x)); width: var(--w); height: auto; overflow: visible; opacity: 0;
  translate: -50% -50%; pointer-events: none;
}
.mod-atmenet__diagram--oszlop { --x: calc(var(--r) * -.55); --y: 282px; --w: 72px; }
.mod-atmenet__diagram--gyuru { --x: calc(var(--r) * .6); --y: -292px; --w: 54px; }
.mod-atmenet__diagram rect { fill: var(--t-aqualog-kiemelt); opacity: .55; transform-box: fill-box; transform-origin: 50% 100%; }
.mod-atmenet__gyuru-alap { fill: none; stroke: var(--t-aqualog-racs); stroke-width: 3; }
.mod-atmenet__gyuru { fill: none; stroke: var(--t-aqualog-kiemelt); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mod-atmenet__diagram text { fill: var(--t-aqualog-halk); font: 700 11px/1 var(--betu, "Manrope", system-ui, sans-serif); }
@media (max-height: 640px) { .mod-atmenet__diagram { display: none; } }
/* Vízszerű háttér: két nagyon halvány fényfolt lassan sodródik (csak az AquaLog-átvezetőn). */
html.mod-atmenet-aqualog .mod-atmenet::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 28% at 32% 34%, color-mix(in srgb, var(--t-aqualog-kiemelt) 11%, transparent), transparent 70%),
    radial-gradient(34% 26% at 70% 68%, color-mix(in srgb, var(--t-aqualog-kiemelt) 8%, transparent), transparent 70%);
  animation: mod-viz 7s ease-in-out infinite alternate;
}

/* Indulás (az AquaGo oldalon): a háttér és a szójel beúszik (fade, enyhe felfelé mozdulás); a mérési elemek még nem. */
html.mod-atmenet--indul .mod-atmenet { animation: mod-be 200ms ease-out both; }
html.mod-atmenet--indul .mod-atmenet__ikon, html.mod-atmenet--indul .mod-atmenet__szojel,
html.mod-atmenet--indul .mod-atmenet__tagline, html.mod-atmenet--indul .mod-atmenet__aquago { animation: mod-szojel 340ms 40ms cubic-bezier(.2, .7, .2, 1) both; }
html.mod-atmenet--indul .mod-atmenet__adatok, html.mod-atmenet--indul .mod-atmenet__grafikon { opacity: 0; }
/* Érkezés (az AquaLog oldalon, ≈2 s a kattintástól): a szójel áll; a paraméterek egymás után beúsznak és lebegnek, a trendvonal
   ≈1 s alatt kirajzolódik, a pontok sorban felvillannak, a végén marker és a legfrissebb pont finom pulzálása. */
html.mod-atmenet--erkezik .mod-atmenet__adatok li { opacity: 0; animation: mod-uszas 900ms var(--k) cubic-bezier(.2, .7, .2, 1) forwards; }
html.mod-atmenet--erkezik .mod-atmenet__adatok span { animation: mod-lebeg var(--t) ease-in-out infinite; }
html.mod-atmenet--erkezik .mod-atmenet__racs { animation: mod-be 400ms both; }
html.mod-atmenet--erkezik .mod-atmenet__vonal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mod-rajz 1200ms 650ms cubic-bezier(.45, 0, .25, 1) forwards; }
html.mod-atmenet--erkezik .mod-atmenet__pont { opacity: 0; animation: mod-pont 260ms cubic-bezier(.2, .7, .2, 1) forwards; }
html.mod-atmenet--erkezik .mod-atmenet__pont:nth-of-type(1) { animation-delay: 950ms; }
html.mod-atmenet--erkezik .mod-atmenet__pont:nth-of-type(2) { animation-delay: 1250ms; }
html.mod-atmenet--erkezik .mod-atmenet__pont:nth-of-type(3) { animation-delay: 1550ms; }
html.mod-atmenet--erkezik .mod-atmenet__pont:nth-of-type(4) { animation: mod-pont 260ms 1820ms cubic-bezier(.2, .7, .2, 1) forwards, mod-pulzus 1100ms 2080ms ease-in-out infinite alternate; }
html.mod-atmenet--erkezik .mod-atmenet__marker { animation: mod-marker 1400ms 1800ms ease-in-out infinite alternate; }
html.mod-atmenet--erkezik .mod-atmenet__kepletek li { animation: mod-keplet-be 1200ms var(--k) ease-out forwards, mod-sodrodas var(--t) ease-in-out infinite alternate; }
html.mod-atmenet--erkezik .mod-atmenet__diagram { animation: mod-diagram-be 600ms 700ms ease-out forwards, mod-diagram-lebeg 5.2s 700ms ease-in-out infinite alternate; }
html.mod-atmenet--erkezik .mod-atmenet__diagram--gyuru { animation-delay: 1000ms, 1000ms; animation-duration: 600ms, 6s; }
html.mod-atmenet--erkezik .mod-atmenet__diagram rect { transform: scaleY(0); animation: mod-oszlop 600ms cubic-bezier(.2, .7, .2, 1) forwards; }
html.mod-atmenet--erkezik .mod-atmenet__diagram rect:nth-of-type(1) { animation-delay: 850ms; }
html.mod-atmenet--erkezik .mod-atmenet__diagram rect:nth-of-type(2) { animation-delay: 980ms; }
html.mod-atmenet--erkezik .mod-atmenet__diagram rect:nth-of-type(3) { animation-delay: 1110ms; }
html.mod-atmenet--erkezik .mod-atmenet__diagram rect:nth-of-type(4) { animation-delay: 1240ms; }
html.mod-atmenet--erkezik .mod-atmenet__diagram rect:nth-of-type(5) { animation-delay: 1370ms; }
html.mod-atmenet--erkezik .mod-atmenet__gyuru { animation: mod-gyuru 1300ms 1150ms cubic-bezier(.45, 0, .25, 1) forwards; }
html.mod-atmenet--ki .mod-atmenet { animation: mod-ki 220ms ease-in forwards; pointer-events: none; }
html.mod-atmenet-aqualog.mod-atmenet--ki .mod-atmenet { animation-duration: 350ms; }
html.mod-atmenet-aquago.mod-atmenet--ki .mod-atmenet { animation-duration: 200ms; }
html.mod-atmenet--ki .mod-atmenet__aqualog, html.mod-atmenet--ki .mod-atmenet__aquago { transition: transform 300ms ease-in; transform: translateY(-6px) scale(1.02); }

@keyframes mod-be { from { opacity: 0; } to { opacity: 1; } }
@keyframes mod-ki { from { opacity: 1; } to { opacity: 0; } }
@keyframes mod-szojel { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mod-uszas { from { opacity: 0; translate: var(--dx) var(--dy); } to { opacity: .92; translate: 0 0; } }
@keyframes mod-lebeg { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; } 50% { transform: translate3d(var(--fx), var(--fy), 0); opacity: .72; } }
@keyframes mod-rajz { to { stroke-dashoffset: 0; } }
@keyframes mod-pont { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mod-pulzus { from { opacity: 1; transform: none; } to { opacity: 1; transform: scale(1.4); } }
@keyframes mod-marker { from { opacity: .18; } to { opacity: .5; } }
@keyframes mod-keplet-be { from { opacity: 0; } to { opacity: var(--o); } }
@keyframes mod-sodrodas { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
@keyframes mod-diagram-be { from { opacity: 0; } to { opacity: .8; } }
@keyframes mod-diagram-lebeg { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -5px, 0); } }
@keyframes mod-oszlop { to { transform: scaleY(1); } }
@keyframes mod-gyuru { to { stroke-dashoffset: .28; } }
@keyframes mod-viz { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(3%, 2%, 0); } }
.mod-atmenet__pont { transform-box: fill-box; transform-origin: center; }

/* Csökkentett mozgás: egyszerű áttűnés (≈0,9 s), beúszás, lebegés, rajzolás, pulzálás és sodródás nélkül. */
@media (prefers-reduced-motion: reduce) {
  html.mod-atmenet--indul .mod-atmenet { animation: mod-be 200ms linear both; }
  html.mod-atmenet--indul .mod-atmenet__ikon, html.mod-atmenet--indul .mod-atmenet__szojel, html.mod-atmenet--indul .mod-atmenet__tagline,
  html.mod-atmenet--indul .mod-atmenet__aquago, html.mod-atmenet--erkezik .mod-atmenet__racs, html.mod-atmenet--erkezik .mod-atmenet__vonal,
  html.mod-atmenet--erkezik .mod-atmenet__pont, html.mod-atmenet--erkezik .mod-atmenet__pont:nth-of-type(4), html.mod-atmenet--erkezik .mod-atmenet__adatok span,
  html.mod-atmenet--erkezik .mod-atmenet__marker, html.mod-atmenet-aqualog .mod-atmenet::before { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  html.mod-atmenet--erkezik .mod-atmenet__marker { opacity: .3; }
  html.mod-atmenet--erkezik .mod-atmenet__kepletek li { animation: none; opacity: var(--o); transform: none; }
  html.mod-atmenet--erkezik .mod-atmenet__diagram { animation: none; opacity: .8; transform: none; }
  html.mod-atmenet--erkezik .mod-atmenet__diagram rect { animation: none; transform: none; }
  html.mod-atmenet--erkezik .mod-atmenet__gyuru { animation: none; stroke-dashoffset: .28; }
  html.mod-atmenet--erkezik .mod-atmenet__adatok li { animation: mod-be 300ms linear forwards; translate: none; }
  html.mod-atmenet--ki .mod-atmenet, html.mod-atmenet-aqualog.mod-atmenet--ki .mod-atmenet { animation: mod-ki 250ms linear forwards; }
  html.mod-atmenet--ki .mod-atmenet__aqualog, html.mod-atmenet--ki .mod-atmenet__aquago { transition: none; transform: none; }
}

/* Megrendelési jogi jelölők (ÁSZF, azonnali teljesítés — T-236), minden checkoutban ugyanígy. */
.jogi-jelolo { margin: 0 0 10px; }
.jogi-jelolo__cimke { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.jogi-jelolo__cimke input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.jogi-jelolo__cimke a { color: var(--td-teal-szoveg, var(--aq-accent-sotetebb)); }

/* Mintabolt (STORE §50): jól látható jelölés, hogy a bemutató bolt adatai tesztadatok — világos és sötét témában a tokenekből. */
.minta-jel { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: var(--t-figyelem-halvany); color: var(--t-figyelem-szoveg); white-space: nowrap; }
.minta-jel .ikon { width: 14px; height: 14px; }
.minta-megjegyzes { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--t-figyelem-halvany); color: var(--t-figyelem-szoveg); font-size: .9rem; }