/* =====================================================================
   Naturéka Klub — fő stíluslap
   Arculat: az eredeti Naturéka arculati kézikönyv szerint
     Ében #392B25 · Fű zöld #7F8A57 · Meleg napsugár #E9C970 · Finom homok #F4E8D5
   Formanyelv: botanikus herbárium — boltív-motívum (patikaablak),
     préselt növény vonalrajzok, hajszálvékony arany vonalak,
     herbáriumi címkék sorszámmal, arculati futószalag.
   Tipográfia: Cormorant Garamond (címek) + Mulish (kenyérszöveg)
     + Dancing Script (írott kiemelés) — ugyanaz a hármas, mint a
     vallalkozasepito.hu oldalon, jól olvasható, teljes magyar ékezettel.
   ===================================================================== */

/* ---------- Design tokenek ---------- */
:root {
	/* Arculati alapszínek */
	--eben:       #392B25;
	--eben-2:     #4B3A31;
	--eben-3:     #614C40;
	--fuzold:     #7F8A57;
	--moha:       #5F6B44;
	--oliva:      #888F68;
	--kiwi:       #B2B978;
	--napsugar:   #E9C970;
	--arany:      #E2A83B;
	--lemon:      #FAE9B0;
	--homok:      #F4E8D5;
	--antik:      #E8E3DC;
	--puder:      #E8DECF;
	--cian:       #E1E6DE;
	--alabastrom: #CDC0A4;
	--tejeskave:  #C4A485;
	--meggy:      #BD3D40;
	--narancs:    #CD7115;

	/* Felületek */
	--papir:      #FCFAF6;
	--papir-2:    #F8F3EA;
	--feher:      #ffffff;

	/* Szöveg */
	--szoveg:     #4A3B33;
	--szoveg-halk:#6E5C51;
	--szoveg-vil: #F1E9DC;
	--szoveg-vil-halk: rgba(241, 233, 220, 0.72);

	/* Vonalak */
	--vonal:      rgba(57, 43, 37, 0.14);
	--vonal-eros: rgba(57, 43, 37, 0.28);
	--vonal-vil:  rgba(241, 233, 220, 0.22);
	--vonal-arany:rgba(226, 168, 59, 0.55);

	/* Tipográfia — ugyanaz a betűcsalád, mint a vallalkozasepito.hu oldalon.
	   A korábbi Bodoni Moda / Allura páros magas kontrasztú, hajszálvékony
	   szárvégekkel: elegáns, de idősebb olvasóknak nehezen kivehető. */
	--font-cim:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-torzs:  "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-iras:   "Dancing Script", cursive;

	/* Forma */
	--r-ap:  3px;                              /* apró, szögletes karakter */
	--r-kp:  6px;
	--boltiv: 50% 50% 3px 3px / 26% 26% 3px 3px;  /* patikaablak-ív */
	--arnyek-lagy: 0 18px 44px rgba(57, 43, 37, 0.10);
	--arnyek-mely: 0 36px 90px rgba(57, 43, 37, 0.22);

	/* Térköz */
	--kozter:   clamp(1.25rem, 4vw, 3.25rem);
	--szekcio-y:clamp(4.5rem, 10vw, 9rem);
	--maxw:     1240px;
	--maxw-sz:  720px;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 92px; /* sticky fejléc miatt */
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-torzs);
	font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.12rem);
	font-weight: 400;
	line-height: 1.78;
	color: var(--szoveg);
	background-color: var(--papir);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Papír-atmoszféra: finom, rétegzett fény a háttérben (nem lapos szín). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(1100px 620px at 12% -8%, rgba(233, 201, 112, 0.16), transparent 62%),
		radial-gradient(900px 560px at 92% 4%, rgba(225, 230, 222, 0.55), transparent 60%),
		radial-gradient(1200px 800px at 50% 108%, rgba(244, 232, 213, 0.85), transparent 66%);
	pointer-events: none;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--moha); text-decoration: none; transition: color .22s ease; }
a:hover { color: var(--narancs); }

/* A Cormorant Garamond optikailag kisebb és világosabb, mint a korábbi
   Bodoni Moda, ezért a címek félkövéren és valamivel nagyobb fokozatban
   futnak — így távolabbról és gyengébb látással is jól olvashatók. */
h1, h2, h3, h4 {
	font-family: var(--font-cim);
	color: var(--eben);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.008em;
	margin: 0 0 .55em;
}
h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.06; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 600; }
h4 { font-size: clamp(1.05rem, 1.2vw, 1.2rem); font-family: var(--font-torzs); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
strong, b { color: var(--eben); font-weight: 600; }
em { font-style: italic; }

::selection { background: var(--napsugar); color: var(--eben); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--eben); color: var(--homok);
	padding: .85rem 1.35rem; border-radius: 0 0 var(--r-kp) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Layout segédek ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--kozter); }
.szuk { max-width: var(--maxw-sz); margin-inline: auto; }
.kozep { text-align: center; }
.szekcio { padding-block: var(--szekcio-y); position: relative; }
.szekcio--homok { background: linear-gradient(180deg, var(--papir-2), var(--homok)); }
.szekcio--antik  { background: var(--antik); }
.szekcio--cian   { background: linear-gradient(170deg, var(--cian), var(--papir)); }

/* Sötét (ében) szekció — a lap ritmusának ellenpontja. */
.szekcio--eben {
	background:
		radial-gradient(900px 500px at 78% 0%, rgba(127, 138, 87, 0.30), transparent 62%),
		radial-gradient(700px 460px at 6% 96%, rgba(226, 168, 59, 0.16), transparent 60%),
		var(--eben);
	color: var(--szoveg-vil);
}
.szekcio--eben h2,
.szekcio--eben h3,
.szekcio--eben h4 { color: var(--homok); }
.szekcio--eben strong { color: var(--napsugar); }
/* A gombok NEM kaphatják meg a link-színt: az arany gombon arany felirat
   olvashatatlan lenne. */
.szekcio--eben a:not(.gomb) { color: var(--napsugar); }
.szekcio--eben a:not(.gomb):hover { color: var(--lemon); }

/* Világos kártya sötét szekcióban: a szövegszínt vissza kell állítani,
   különben a krémszínű örökölt szín fehér alapon olvashatatlan. */
.szekcio--eben .ar-kartya,
.szekcio--eben .tudastar__kartya,
.szekcio--eben .partner {
	color: var(--szoveg);
}
.szekcio--eben .ar-kartya h3,
.szekcio--eben .tudastar__kartya h3 { color: var(--eben); }
.szekcio--eben .ar-kartya strong,
.szekcio--eben .tudastar__kartya strong { color: var(--eben); }
.szekcio--eben .ar-kartya .lista-pipa li,
.szekcio--eben .tudastar__kartya li { color: var(--szoveg); }

/* ---------- Herbáriumi címke (szekció-jelölő) ----------
   Sorszám + hajszálvonal + ritkított verzál, mint egy préselt növény cédulája. */
.cimke {
	display: flex;
	align-items: center;
	gap: .9rem;
	font-family: var(--font-torzs);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--moha);
	margin: 0 0 1.5rem;
}
.cimke__szam {
	font-family: var(--font-cim);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0;
	font-style: italic;
	color: var(--arany);
}
.cimke__vonal {
	flex: 0 0 auto;
	width: clamp(28px, 6vw, 66px);
	height: 1px;
	background: linear-gradient(90deg, var(--vonal-arany), transparent);
}
.cimke--kozep { justify-content: center; }
.cimke--kozep .cimke__vonal:last-child { background: linear-gradient(270deg, var(--vonal-arany), transparent); }
.szekcio--eben .cimke { color: var(--kiwi); }
.szekcio--eben .cimke__szam { color: var(--napsugar); }

/* ---------- Írott kiemelés (P22 Alison helyett Dancing Script) ---------- */
.iras {
	font-family: var(--font-iras);
	font-size: clamp(1.75rem, 3vw, 2.6rem);
	line-height: 1.25;
	color: var(--narancs);
	font-weight: 600;
	letter-spacing: 0;
}
.szekcio--eben .iras { color: var(--napsugar); }

/* ---------- Gombok ----------
   Nem pirula: patikacímke-szerű, enyhén szögletes, ritkított verzál,
   dupla keret arany hajszálvonallal. */
.gomb {
	--gomb-bg: var(--eben);
	--gomb-szin: var(--homok);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: 1.08rem 2.3rem;
	font-family: var(--font-torzs);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.25;
	text-align: center;
	color: var(--gomb-szin);
	background: var(--gomb-bg);
	border: 0;
	border-radius: var(--r-ap);
	cursor: pointer;
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background-color .28s ease, color .28s ease;
	isolation: isolate;
}
/* Eltolt arany keret — a hover ráülteti a gombra. */
.gomb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--vonal-arany);
	border-radius: var(--r-ap);
	transform: translate(6px, 6px);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
	pointer-events: none;
	z-index: -1;
}
.gomb:hover { transform: translate(-1px, -2px); box-shadow: 0 14px 30px rgba(57, 43, 37, 0.22); color: var(--napsugar); }
.gomb:hover::after { transform: translate(3px, 3px); }
.gomb:active { transform: translate(0, 0); }

.gomb--arany { --gomb-bg: var(--napsugar); --gomb-szin: var(--eben); }
.gomb--arany:hover { color: var(--eben); background: var(--lemon); }
.gomb--zold  { --gomb-bg: var(--moha); --gomb-szin: var(--homok); }
.gomb--vilagos { --gomb-bg: transparent; --gomb-szin: var(--eben); box-shadow: inset 0 0 0 1px var(--vonal-eros); }
.gomb--vilagos:hover { --gomb-bg: var(--eben); color: var(--homok); }
.gomb--blokk { display: flex; width: 100%; }
.gomb--nagy  { padding: 1.25rem 2.7rem; font-size: .84rem; }

.gomb-alatt {
	margin-top: .95rem;
	font-size: .86rem;
	color: var(--szoveg-halk);
	font-weight: 400;
}
.szekcio--eben .gomb-alatt { color: var(--szoveg-vil-halk); }

/* ---------- Boltív-keret (patikaablak) ----------
   A képek visszatérő formája. Ez a lap egyik védjegye. */
.boltiv {
	position: relative;
	border-radius: var(--boltiv);
	overflow: hidden;
	background: var(--puder);
	box-shadow: var(--arnyek-lagy);
}
.boltiv img { width: 100%; height: 100%; object-fit: cover; }
/* Belső arany hajszálkeret, az ív vonalát követve. */
.boltiv::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(244, 232, 213, 0.5);
	border-radius: var(--boltiv);
	pointer-events: none;
}
.boltiv--arany::after { border-color: var(--vonal-arany); }

/* ---------- Futószalag (arculati elem a kézikönyvből) ---------- */
.szalag {
	background: var(--eben);
	color: var(--homok);
	padding-block: .92rem;
	overflow: hidden;
	border-block: 1px solid rgba(226, 168, 59, 0.28);
	position: relative;
}
.szalag__sav {
	display: flex;
	width: max-content;
	animation: szalag-fut 46s linear infinite;
}
.szalag:hover .szalag__sav { animation-play-state: paused; }
.szalag__elem {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding-inline: .75rem;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(244, 232, 213, 0.9);
}
.szalag__pont { color: var(--arany); font-size: .8rem; }
@keyframes szalag-fut { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Fejléc ---------- */
.fejlec {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(252, 250, 246, 0.82);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.fejlec.rogzitett {
	border-bottom-color: var(--vonal);
	box-shadow: 0 10px 30px rgba(57, 43, 37, 0.06);
}
.fejlec__belso {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 78px;
	padding-block: .7rem;
}
.marka { display: inline-flex; align-items: center; gap: .8rem; color: var(--eben); }
.marka:hover { color: var(--eben); }
/* Az eredeti Naturéka növény-motívum (PNG). A fejlécben moha, a sötét
   láblécben kiwi színű változat megy ki — lásd nk_markajel().
   2026-08-07 óta a logó mellett NINCS felirat, ezért nagyobb méretet kap:
   önmagában kell vinnie a fejlécet. */
.marka__jel { width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; }
.marka__szoveg { display: flex; flex-direction: column; line-height: 1.05; }
.marka__nev {
	font-family: var(--font-cim);
	font-size: 1.42rem;
	font-weight: 700;
	letter-spacing: .01em;
}
.marka__alcim {
	font-size: .58rem;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--moha);
	margin-top: .18rem;
}
.marka .custom-logo { max-height: 52px; width: auto; }

.fomenu { margin-left: auto; }
.fomenu__lista {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.fomenu__lista a {
	position: relative;
	font-size: .81rem;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--szoveg);
	padding-block: .4rem;
	white-space: nowrap; /* a menüpontok soha ne törjenek két sorba */
}
.fomenu__lista a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--arany);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.fomenu__lista a:hover { color: var(--eben); }
.fomenu__lista a:hover::after { transform: scaleX(1); }

.fejlec__cta { flex: 0 0 auto; padding: .82rem 1.5rem; font-size: .7rem; }

.menu-kapcsolo {
	display: none;
	margin-left: auto;
	width: 46px; height: 46px;
	background: transparent;
	border: 1px solid var(--vonal-eros);
	border-radius: var(--r-ap);
	cursor: pointer;
	position: relative;
}
.menu-kapcsolo span,
.menu-kapcsolo span::before,
.menu-kapcsolo span::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 20px; height: 1.5px;
	background: var(--eben);
	transform: translate(-50%, -50%);
	transition: transform .3s ease, opacity .2s ease;
}
.menu-kapcsolo span::before { transform: translate(-50%, -7px); }
.menu-kapcsolo span::after  { transform: translate(-50%, 5.5px); }
.menu-kapcsolo[aria-expanded="true"] span { background: transparent; }
.menu-kapcsolo[aria-expanded="true"] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-kapcsolo[aria-expanded="true"] span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.mobilmenu {
	display: none;
	border-top: 1px solid var(--vonal);
	background: var(--papir);
	padding: 1.5rem var(--kozter) 2rem;
}
.mobilmenu[data-nyitva] { display: block; animation: le-be .3s ease both; }
.mobilmenu__lista { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .2rem; }
.mobilmenu__lista a {
	display: block;
	padding: .75rem 0;
	font-size: 1rem;
	color: var(--eben);
	border-bottom: 1px solid var(--vonal);
}
@keyframes le-be { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
	overflow: hidden;
}
.hero__racs {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.hero__felcim {
	font-family: var(--font-torzs);
	font-size: clamp(.82rem, 1.1vw, .95rem);
	font-weight: 400;
	line-height: 1.65;
	color: var(--moha);
	max-width: 30rem;
	margin: 0 0 1.5rem;
	padding-left: 1.15rem;
	border-left: 2px solid var(--vonal-arany);
}
.hero h1 { margin-bottom: .5em; }
/* A főcím utolsó szava írott kiemelést kap. */
.hero h1 .kiemelt {
	font-family: var(--font-iras);
	font-size: 1.18em;
	font-weight: 400;
	color: var(--narancs);
	letter-spacing: 0;
	line-height: .9;
	display: inline-block;
	transform: rotate(-2.2deg);
	padding-inline: .06em;
}
.hero__leiras { font-size: 1.06rem; max-width: 34rem; color: var(--szoveg-halk); }

.hero__pontok {
	list-style: none;
	margin: 1.9rem 0 2.4rem;
	padding: 0;
	display: grid;
	gap: .78rem;
	max-width: 33rem;
}
.hero__pontok li {
	position: relative;
	padding-left: 2.1rem;
	font-size: .96rem;
	line-height: 1.55;
	color: var(--szoveg);
}
.hero__pontok li .levelke {
	position: absolute;
	left: 0; top: .12rem;
	width: 1.25rem; height: 1.25rem;
	color: var(--fuzold);
}

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.35rem; }

.hero__kep {
	position: relative;
	aspect-ratio: 4 / 5;
	max-height: 640px;
}
.hero__kep .boltiv { height: 100%; }
/* Ráúszó bélyegző-korong: a "több mint 200 recept" horgony. */
.pecset {
	position: absolute;
	left: -2.4rem;
	bottom: 2.6rem;
	width: clamp(112px, 13vw, 156px);
	height: clamp(112px, 13vw, 156px);
	border-radius: 50%;
	background: var(--napsugar);
	color: var(--eben);
	display: grid;
	place-content: center;
	text-align: center;
	box-shadow: 0 18px 40px rgba(57, 43, 37, 0.24);
	border: 1px solid rgba(57, 43, 37, 0.14);
	animation: leng 7s ease-in-out infinite;
}
.pecset__szam { font-family: var(--font-cim); font-size: clamp(1.8rem, 2.5vw, 2.45rem); line-height: 1; font-weight: 700; }
.pecset__szoveg {
	font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	margin-top: .3rem; line-height: 1.35;
}
@keyframes leng {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50%      { transform: translateY(-9px) rotate(-1deg); }
}

/* ---------- Videó blokk ---------- */
.video-keret {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-kp);
	overflow: hidden;
	background: var(--eben);
	box-shadow: var(--arnyek-mely);
	border: 1px solid var(--vonal-arany);
}
.video-keret iframe,
.video-keret video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Álló (Shorts) videó: keskeny, 9:16-os keret, középre húzva — 16:9-ben a
   videó két oldalán hatalmas fekete sávok maradnának. */
.video-keret--allo {
	aspect-ratio: 9 / 16;
	max-width: 340px;
	margin-inline: auto;
}

/* Ismeretlen beágyazókód: nem tudjuk az arányát, ezért nem is kényszerítünk rá
   keretet — a beágyazás a saját magasságát kapja, és semmi nem vágódik le. */
.video-keret--sajat-arany { aspect-ratio: auto; }
.video-keret--sajat-arany > iframe,
.video-keret--sajat-arany > video { position: static; max-width: 100%; }

/* ---------- Kedvcsináló videó (álló) + szöveg ----------
   Az álló videó önmagában, teljes szélességben árván állt: a keskeny képkocka
   mellett mindkét oldalon üres sáv maradt. Kéthasábos elrendezésben a szöveg
   kitölti a helyet, a videó pedig a hasábja szélességét kapja. */
.kedvcsinalo {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 330px);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.kedvcsinalo__szoveg h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	margin-bottom: 1.2rem;
}
.kedvcsinalo__szoveg p { max-width: 46ch; }
.kedvcsinalo__cta { margin-top: 1.8rem; }
.kedvcsinalo__video .video-keret--allo { max-width: 100%; margin-inline: 0; }

/* A webinárfelvétel alatti felirat: mikori a felvétel, meddig nézhető. */
.webinar__felirat {
	margin: 1rem 0 0;
	text-align: center;
	font-size: .92rem;
	color: var(--szoveg-halk);
}

.video-helykitolto {
	display: grid;
	place-content: center;
	text-align: center;
	gap: .6rem;
	padding: 2rem;
	color: var(--szoveg-vil-halk);
	background:
		repeating-linear-gradient(135deg, rgba(244,232,213,.05) 0 12px, transparent 12px 24px),
		var(--eben);
	height: 100%;
}
.video-helykitolto strong { color: var(--napsugar); font-weight: 500; }
.video-helykitolto small { font-size: .78rem; letter-spacing: .05em; }

/* ---------- Problémaszekció / szöveges ritmus ---------- */
.folyo-szoveg { max-width: 40rem; }
.folyo-szoveg p:first-of-type { font-size: 1.2rem; color: var(--eben); font-weight: 400; }

.lista-pipa { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .7rem; }
.lista-pipa li {
	position: relative;
	padding-left: 1.7rem;
	line-height: 1.6;
}
.lista-pipa li::before {
	content: "";
	position: absolute;
	left: .18rem; top: .78em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--arany);
}
.lista-pipa--vilagos li::before { background: var(--napsugar); }

/* Kétoszlopos, elcsúsztatott elrendezés (nem szimmetrikus). */
.ketoszlop {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.ketoszlop--forditva > *:first-child { order: 2; }
.ketoszlop__kep { position: relative; aspect-ratio: 5 / 6; }
.ketoszlop__kep .boltiv { height: 100%; }
.eltolt { transform: translateY(clamp(-2.5rem, -3vw, 0rem)); }

/* Kiemelt mondat — a "Végre tudom, mit kenek magamra." típusú zárlatokhoz. */
.kiemelt-mondat {
	margin: 2.6rem 0 0;
	padding: 1.9rem 2.2rem;
	background: var(--feher);
	border-left: 3px solid var(--arany);
	border-radius: 0 var(--r-kp) var(--r-kp) 0;
	box-shadow: var(--arnyek-lagy);
	font-family: var(--font-cim);
	font-size: clamp(1.45rem, 2.4vw, 2.1rem);
	font-weight: 500;
	line-height: 1.32;
	color: var(--eben);
}
.szekcio--eben .kiemelt-mondat {
	background: rgba(244, 232, 213, 0.07);
	color: var(--homok);
	box-shadow: none;
}

/* ---------- Kifogás-kártyák ---------- */
/* Öt kártya: felül három, alatta kettő egymás mellett. A 6 oszlopos rács
   teszi lehetővé, hogy az alsó sor két eleme egyenlően ossza el a szélességet
   (3-3 oszlop), és ne maradjon csonka sor. */
.kifogas-racs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5rem;
	margin-top: 2.8rem;
}
.kifogas { grid-column: span 2; }
.kifogas-racs .kifogas:nth-child(n+4) { grid-column: span 3; }
.kifogas {
	position: relative;
	padding: 2rem 1.8rem 1.9rem;
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
	transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.kifogas:hover { transform: translateY(-5px); box-shadow: var(--arnyek-lagy); border-color: var(--vonal-arany); }
/* A jobb felső sarokban ülő sorszám alá ne fusson be a cím. */
.kifogas h3 {
	font-size: 1.12rem;
	font-family: var(--font-torzs);
	font-weight: 600;
	letter-spacing: -0.005em;
	padding-right: 2.8rem;
}
.kifogas p:last-child { margin-bottom: 0; }
.kifogas__szam {
	position: absolute;
	top: 1.1rem; right: 1.4rem;
	font-family: var(--font-cim);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--alabastrom);
}

/* ---------- Bemutatkozás ---------- */
.bemutatkozas__nev {
	font-family: var(--font-iras);
	font-size: clamp(2.4rem, 4.6vw, 3.8rem);
	color: var(--narancs);
	line-height: 1;
	margin: 0 0 .35rem;
}
.bemutatkozas__titulus {
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--moha);
	font-weight: 500;
	margin-bottom: 2rem;
}
/* Telefonon a név és a titulus a portré FÖLÉ kerül (a 10+ éves adatlap alá),
   nagy képernyőn viszont a jobb hasáb eleje viszi. Mindig csak az egyik látszik. */
.bemutatkozas__fejlec-mobil { display: none; }
.bemutatkozas__fejlec-mobil .bemutatkozas__titulus { margin-bottom: 1.2rem; }

/* ---------- Vélemények (csúszka) ---------- */
.velemenyek { position: relative; }
.velemeny-sav {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: .6rem .3rem 2rem;
	margin-inline: -.3rem;
	scrollbar-width: thin;
	scrollbar-color: var(--alabastrom) transparent;
}
.velemeny-sav::-webkit-scrollbar { height: 4px; }
.velemeny-sav::-webkit-scrollbar-thumb { background: var(--alabastrom); border-radius: 99px; }
.velemeny-sav::-webkit-scrollbar-track { background: transparent; }

.velemeny {
	flex: 0 0 min(430px, 84vw);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	/* A felső térköz a dekoratív idézőjelnek is helyet ad. */
	padding: 3.6rem 1.9rem 1.7rem;
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
	position: relative;
}
/* A magyar alsó idézőjel (\201E) a betűkép ALJÁN ül, ezért a felső élhez
   igazítjuk, és a kártya felső paddingja tartja távol a szövegtől. */
.velemeny::before {
	content: "\201E";
	position: absolute;
	top: 0; left: 1.5rem;
	font-family: var(--font-cim);
	font-size: 3.6rem;
	line-height: 1;
	color: var(--napsugar);
	opacity: .75;
	pointer-events: none;
}
.velemeny__szoveg {
	position: relative;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--szoveg);
	margin: 0 0 1.3rem;
	font-weight: 400;
}
.velemeny__nev {
	margin-top: auto;
	font-family: var(--font-cim);
	font-size: 1.18rem;
	font-weight: 700;
	font-style: italic;
	color: var(--eben);
}
.velemeny__nev::before {
	content: "";
	display: block;
	width: 26px; height: 1px;
	background: var(--vonal-arany);
	margin-bottom: .7rem;
}
/* A 6. utáni vélemények alapból rejtve — a gomb bontja ki. */
.velemeny[hidden] { display: none; }

.velemeny-vezerlo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: .5rem;
}
.nyilak { display: flex; gap: .6rem; }
.nyil {
	width: 46px; height: 46px;
	display: grid; place-content: center;
	background: transparent;
	border: 1px solid var(--vonal-eros);
	border-radius: 50%;
	color: var(--eben);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.nyil:hover { background: var(--eben); color: var(--homok); border-color: var(--eben); }
.nyil svg { width: 18px; height: 18px; }

/* ---------- Accordion (kurzuskategóriák + GYIK) ---------- */
.harmonika { border-top: 1px solid var(--vonal); }
.harmonika__elem { border-bottom: 1px solid var(--vonal); }
.harmonika__fej {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.45rem .4rem;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-cim);
	font-size: clamp(1.18rem, 1.7vw, 1.45rem);
	font-weight: 600;
	color: var(--eben);
	transition: color .25s ease;
}
.harmonika__fej:hover { color: var(--narancs); }
.harmonika__fej .jelolo {
	margin-left: auto;
	flex: 0 0 auto;
	width: 34px; height: 34px;
	display: grid; place-content: center;
	border: 1px solid var(--vonal-eros);
	border-radius: 50%;
	position: relative;
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
/* A két vonal pontosan a korong közepén keresztezi egymást (+),
   nyitott állapotban a függőleges eltűnik (−). */
.harmonika__fej .jelolo::before,
.harmonika__fej .jelolo::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--eben);
	transition: transform .3s ease, background-color .3s ease;
}
.harmonika__fej .jelolo::before { width: 13px; height: 2px; }
.harmonika__fej .jelolo::after  { width: 2px; height: 13px; }
.harmonika__fej[aria-expanded="true"] .jelolo { background: var(--eben); border-color: var(--eben); }
.harmonika__fej[aria-expanded="true"] .jelolo::before,
.harmonika__fej[aria-expanded="true"] .jelolo::after { background: var(--napsugar); }
.harmonika__fej[aria-expanded="true"] .jelolo::after { transform: translate(-50%, -50%) scaleY(0); }

.harmonika__szam {
	font-family: var(--font-cim);
	font-style: italic;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--arany);
	flex: 0 0 auto;
	min-width: 1.6rem;
}
.harmonika__test {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .38s cubic-bezier(.2,.7,.3,1);
}
.harmonika__test[data-nyitva] { grid-template-rows: 1fr; }
.harmonika__belso { overflow: hidden; }
.harmonika__belso > * { margin-top: 0; }
.harmonika__belso-padding { padding: .2rem .4rem 1.7rem; }

.szekcio--eben .harmonika { border-top-color: var(--vonal-vil); }
.szekcio--eben .harmonika__elem { border-bottom-color: var(--vonal-vil); }
.szekcio--eben .harmonika__fej { color: var(--homok); }
.szekcio--eben .harmonika__fej:hover { color: var(--napsugar); }
.szekcio--eben .harmonika__fej .jelolo { border-color: var(--vonal-vil); }
.szekcio--eben .harmonika__fej .jelolo::before,
.szekcio--eben .harmonika__fej .jelolo::after { background: var(--homok); }
.szekcio--eben .harmonika__fej[aria-expanded="true"] .jelolo { background: var(--napsugar); border-color: var(--napsugar); }
.szekcio--eben .harmonika__fej[aria-expanded="true"] .jelolo::before { background: var(--eben); }

.kurzus-lista { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.kurzus-lista li {
	break-inside: avoid;
	padding: .42rem 0 .42rem 1.5rem;
	position: relative;
	font-size: .94rem;
	line-height: 1.5;
}
.kurzus-lista li::before {
	content: "";
	position: absolute;
	left: 0; top: .95em;
	width: 9px; height: 1px;
	background: var(--arany);
}

/* ---------- Mit kapsz: fő pillérek ---------- */
.pillerek {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.6rem;
	margin-top: 3rem;
}
.piller {
	padding: 2.2rem 1.9rem;
	background: var(--feher);
	border-radius: var(--r-kp);
	border: 1px solid var(--vonal);
	position: relative;
	overflow: hidden;
}
.piller::before {
	content: "";
	position: absolute;
	inset: auto -30% -55% auto;
	width: 220px; height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(233, 201, 112, 0.22), transparent 68%);
	pointer-events: none;
}
.piller__ikon { width: 34px; height: 34px; color: var(--fuzold); margin-bottom: 1.1rem; }
.piller h3 { font-size: 1.18rem; }
.piller p:last-child { margin-bottom: 0; font-size: .94rem; }

/* ---------- Iránytű: 5 pillér ---------- */
/* Öt pillér: felül három, alatta kettő — de a két alsó egyenlően osztozik a
   teljes szélességen, hogy egységes maradjon a rács. */
.iranytu {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.4rem;
	margin-top: 3rem;
	counter-reset: pillerszam;
}
.iranytu__elem { grid-column: span 2; }
.iranytu__elem:nth-child(4),
.iranytu__elem:nth-child(5) { grid-column: span 3; }
.iranytu__elem {
	position: relative;
	padding: 2.4rem 1.6rem 1.8rem;
	border: 1px solid var(--vonal-vil);
	border-radius: var(--r-kp);
	background: rgba(244, 232, 213, 0.045);
	transition: background-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.iranytu__elem:hover { background: rgba(244, 232, 213, 0.1); transform: translateY(-4px); }
.iranytu__elem::before {
	counter-increment: pillerszam;
	content: "0" counter(pillerszam);
	position: absolute;
	top: 1.1rem; right: 1.3rem;
	font-family: var(--font-cim);
	font-style: italic;
	font-size: 1.9rem;
	color: rgba(233, 201, 112, 0.4);
	line-height: 1;
}
.iranytu__elem h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.iranytu__elem p { font-size: .9rem; margin-bottom: 0; color: var(--szoveg-vil-halk); }

/* ---------- Lépések (így vezet végig) ---------- */
.lepesek { margin-top: 3rem; display: grid; gap: 0; counter-reset: lepesszam; }
.lepes {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1.6rem;
	padding: 1.9rem 0;
	border-top: 1px solid var(--vonal);
	align-items: start;
}
.lepes:last-child { border-bottom: 1px solid var(--vonal); }
.lepes__szam {
	counter-increment: lepesszam;
	font-family: var(--font-cim);
	font-size: clamp(2.1rem, 3.6vw, 3.1rem);
	line-height: .9;
	color: var(--alabastrom);
	font-weight: 700;
}
.lepes__szam::before { content: "0" counter(lepesszam); }
.lepes h3 { margin-bottom: .3rem; font-size: 1.2rem; }
.lepes p { margin-bottom: 0; font-size: .96rem; }

/* ---------- Értékbontás + árazás ---------- */
.ertek {
	max-width: 640px;
	margin: 2.4rem auto 0;
	border: 1px solid var(--vonal-arany);
	border-radius: var(--r-kp);
	background: rgba(244, 232, 213, 0.06);
	padding: 1.9rem 1.9rem 1.5rem;
}
.ertek__sor {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	padding: .62rem 0;
	font-size: .95rem;
}
.ertek__sor + .ertek__sor { border-top: 1px dashed rgba(244, 232, 213, 0.16); }
.ertek__pont { flex: 1; height: 1px; background: rgba(244, 232, 213, 0.22); }
.ertek__ar { font-family: var(--font-cim); font-size: 1.18rem; font-weight: 600; color: var(--homok); white-space: nowrap; }
.ertek__osszeg {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--vonal-arany);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.ertek__osszeg strong { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--kiwi); }
.ertek__osszeg span { font-family: var(--font-cim); font-size: clamp(1.7rem, 3.1vw, 2.45rem); font-weight: 700; color: var(--napsugar); }

.arak {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.8rem;
	margin-top: 3.2rem;
	max-width: 900px;
	margin-inline: auto;
}
.ar-kartya {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.6rem 2rem 2.2rem;
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
	transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ar-kartya:hover { transform: translateY(-6px); box-shadow: var(--arnyek-mely); }
.ar-kartya--kiemelt { border-color: var(--arany); border-width: 1.5px; }
.ar-kartya__cimke {
	position: absolute;
	top: -.8rem; left: 50%;
	transform: translateX(-50%);
	background: var(--napsugar);
	color: var(--eben);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: .42rem 1.1rem;
	border-radius: 99px;
	white-space: nowrap;
}
.ar-kartya h3 {
	font-family: var(--font-torzs);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--moha);
	margin-bottom: .9rem;
}
.ar-kartya__ar {
	font-family: var(--font-cim);
	font-size: clamp(2.4rem, 4.1vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--eben);
	margin-bottom: .25rem;
}
.ar-kartya__ar small { font-family: var(--font-torzs); font-size: .95rem; font-weight: 400; color: var(--szoveg-halk); }
.ar-kartya__megjegyzes { font-size: .9rem; color: var(--narancs); margin-bottom: 1.5rem; font-weight: 400; }
.ar-kartya .lista-pipa { flex: 1; margin-bottom: 1.8rem; }
.ar-kartya .lista-pipa li { font-size: .92rem; }
.arak-alatt { margin-top: 2rem; font-size: .88rem; text-align: center; color: var(--szoveg-halk); }
.szekcio--eben .arak-alatt { color: var(--szoveg-vil-halk); }

/* ---------- „A klub zárva tart" figyelmeztetés ----------
   Az árkártyák fölött jelenik meg, amikor a vezérlőpulton zárva állapot van. */
.klub-zarva {
	max-width: 720px;
	margin: 2.5rem auto 0;
	padding: 1.6rem 1.8rem;
	text-align: center;
	background: rgba(244, 232, 213, 0.08);
	border: 1px solid var(--vonal-arany);
	border-radius: var(--r-kp);
}
.klub-zarva__cim {
	font-family: var(--font-cim);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 600;
	color: var(--napsugar);
	margin: 0 0 .5rem;
}
.klub-zarva__szoveg { font-size: .95rem; margin: 0 0 1.4rem; }

/* ---------- Visszaszámláló (kapcsolható) ---------- */
.visszaszamlalo {
	margin: 0 auto 2.8rem;
	max-width: 620px;
	text-align: center;
	padding: 1.6rem 1.5rem;
	border: 1px solid var(--vonal-arany);
	border-radius: var(--r-kp);
	background: rgba(233, 201, 112, 0.08);
}
.visszaszamlalo__cim {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--narancs);
	margin-bottom: .9rem;
}
.szekcio--eben .visszaszamlalo__cim { color: var(--napsugar); }
.visszaszamlalo__ora { display: flex; justify-content: center; gap: clamp(.7rem, 2.4vw, 1.7rem); }
.vsz-egyseg { min-width: 62px; }
.vsz-egyseg__szam {
	font-family: var(--font-cim);
	font-size: clamp(2rem, 4.1vw, 2.85rem);
	font-weight: 700;
	line-height: 1;
	color: var(--eben);
	font-variant-numeric: tabular-nums;
}
.szekcio--eben .vsz-egyseg__szam { color: var(--homok); }
.vsz-egyseg__cimke {
	font-size: .6rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--szoveg-halk);
	margin-top: .35rem;
}
.szekcio--eben .vsz-egyseg__cimke { color: var(--szoveg-vil-halk); }

/* ---------- Partnerek ---------- */
/* 8 partner — fix 4 oszlop, hogy két teli sor legyen, ne maradjon csonka sor. */
.partnerek {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 2.6rem;
	background: var(--vonal);
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
	overflow: hidden;
}
.partner {
	background: var(--feher);
	display: grid;
	place-items: center;
	padding: 1.9rem 1.2rem;
	min-height: 128px;
	text-align: center;
}
.partner img {
	max-height: 62px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* A logók vegyes minőségűek (képernyőkép, színes háttér) — egységes
	   monokróm kezelés fogja össze őket. Hoverre visszaszínesedik. */
	filter: grayscale(1) contrast(1.08) opacity(.8);
	transition: filter .35s ease, transform .35s ease;
}
.partner:hover img { filter: none; transform: scale(1.04); }
/* Ahol nincs használható logó, a partner neve áll a helyén. */
.partner__nev {
	font-size: .8rem;
	line-height: 1.45;
	letter-spacing: .04em;
	color: var(--szoveg-halk);
	text-align: center;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* ---------- Neked való / nem neked való ---------- */
.valo-racs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.6rem; }
.valo {
	padding: 2.2rem 2rem;
	border-radius: var(--r-kp);
	border: 1px solid var(--vonal);
	background: var(--feher);
}
.valo--igen { border-left: 3px solid var(--fuzold); }
.valo--nem  { border-left: 3px solid var(--tejeskave); background: var(--papir-2); }
.valo h3 { font-size: 1.2rem; margin-bottom: 1.2rem; }
.valo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
.valo li { position: relative; padding-left: 1.9rem; font-size: .94rem; line-height: 1.55; }
.valo li::before {
	position: absolute;
	left: 0; top: -.05rem;
	font-size: 1rem;
	line-height: 1.6;
}
.valo--igen li::before { content: "✓"; color: var(--fuzold); font-weight: 700; }
.valo--nem  li::before { content: "–"; color: var(--tejeskave); font-weight: 700; }

/* ---------- Záró / két jövő ---------- */
.ket-jovo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3.5vw, 2.6rem); margin-top: 2.8rem; }
.jovo {
	padding: 2.3rem 2rem;
	border-radius: var(--r-kp);
	position: relative;
	overflow: hidden;
}
.jovo--regi {
	background: rgba(196, 164, 133, 0.14);
	border: 1px dashed var(--tejeskave);
	color: var(--szoveg-halk);
}
.jovo--uj {
	background: linear-gradient(160deg, rgba(233, 201, 112, 0.22), rgba(178, 185, 120, 0.16));
	border: 1px solid var(--vonal-arany);
}
.jovo__fej {
	font-size: .68rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 1rem;
}
.jovo--regi .jovo__fej { color: var(--tejeskave); }
.jovo--uj .jovo__fej { color: var(--narancs); }
.jovo p:last-child { margin-bottom: 0; }

/* ---------- Biztonsági tájékoztató ---------- */
.tajekoztato {
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
	padding: 2rem 2rem 1.6rem;
	background: var(--papir-2);
	font-size: .9rem;
	color: var(--szoveg-halk);
}
.tajekoztato h3 { font-size: 1.05rem; font-family: var(--font-torzs); font-weight: 600; }
.tajekoztato p:last-child { margin-bottom: 0; }

/* ---------- Modális ablak (SAPI űrlapokhoz) ---------- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 2.5rem);
	background: rgba(57, 43, 37, 0.62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.modal[data-nyitva] { opacity: 1; visibility: visible; }
/* A SAPI fizetési űrlap 1800 px fölé is megnő, ezért a doboz oszlopos:
   a fejléc fixen áll, és CSAK az űrlap görget. Így nem tűnik el a cím és a
   bezáró gomb, és látszik, hogy van még tartalom lejjebb. */
.modal__doboz {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(94vh, 1200px);
	background: var(--papir);
	border-radius: var(--r-kp);
	box-shadow: var(--arnyek-mely);
	overflow: hidden;
	transform: translateY(18px) scale(.985);
	transition: transform .34s cubic-bezier(.2,.7,.3,1);
}
.modal[data-nyitva] .modal__doboz { transform: none; }
.modal__fej {
	flex: 0 0 auto;
	padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.4rem, 3.5vw, 2.6rem) clamp(1rem, 2vw, 1.3rem);
	border-bottom: 1px solid var(--vonal);
	background: var(--papir);
}
.modal__test {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.4rem, 3.5vw, 2.6rem) clamp(1.6rem, 3vw, 2.2rem);
}
/* Vékony, a paletta szerinti görgetősáv — jelzés, hogy görgethető a tartalom. */
.modal__test { scrollbar-width: thin; scrollbar-color: var(--vonal-eros) transparent; }
.modal__test::-webkit-scrollbar { width: 10px; }
.modal__test::-webkit-scrollbar-thumb { background: var(--vonal-eros); border-radius: 999px; border: 3px solid var(--papir); }

/* Jelzés, hogy a fizetési űrlap hosszabb a látható résznél. A JS teszi rá a
   `data-gorgetheto` attribútumot, és leveszi, amint a látogató a végére ért. */
.modal__doboz[data-gorgetheto]::after {
	content: attr(data-gorgetheto);
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2.6rem 1rem .9rem;
	text-align: center;
	font-family: var(--font-torzs);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--moha);
	background: linear-gradient(180deg, rgba(253, 250, 244, 0), var(--papir) 62%);
	pointer-events: none;
	transition: opacity .3s ease;
}

.modal__cim { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .35rem; padding-right: 3rem; }
.modal__alcim { font-size: .92rem; color: var(--szoveg-halk); margin-bottom: 0; padding-right: 3rem; }
.modal__bezar {
	position: absolute;
	z-index: 2;
	top: .85rem; right: .85rem;
	width: 40px; height: 40px;
	display: grid; place-content: center;
	background: transparent;
	border: 1px solid var(--vonal);
	border-radius: 50%;
	color: var(--eben);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
.modal__bezar:hover { background: var(--eben); color: var(--homok); }
body.modal-nyitva { overflow: hidden; }

/* Mobilon a felugró ablak gyakorlatilag teljes képernyős, hogy a hosszú
   fizetési űrlapból minél több látszódjon egyszerre. */
@media (max-width: 620px) {
	.modal { padding: .6rem; }
	.modal__doboz { max-height: 96vh; }
}

/* A SalesAutopilot űrlap beágyazott stílusának tompítása. */
.sapi-urlap { min-height: 120px; }
.sapi-urlap input[type="text"],
.sapi-urlap input[type="email"],
.sapi-urlap input[type="tel"],
.sapi-urlap select,
.sapi-urlap textarea {
	width: 100%;
	max-width: 100%;
	padding: .85rem 1rem;
	font-family: var(--font-torzs);
	font-size: .96rem;
	color: var(--szoveg);
	background: var(--feher);
	border: 1px solid var(--vonal-eros);
	border-radius: var(--r-ap);
	margin-bottom: .9rem;
}
.sapi-urlap input[type="submit"],
.sapi-urlap button[type="submit"] {
	width: 100%;
	padding: 1.05rem 2rem;
	font-family: var(--font-torzs);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--homok);
	background: var(--eben);
	border: 0;
	border-radius: var(--r-ap);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
.sapi-urlap input[type="submit"]:hover,
.sapi-urlap button[type="submit"]:hover { background: var(--moha); color: var(--napsugar); }

/* Admin-figyelmeztetés hiányzó beágyazókód esetén (csak bejelentkezve látszik). */
.admin-jelzes {
	border: 1px dashed var(--meggy);
	border-radius: var(--r-ap);
	padding: 1rem 1.2rem;
	background: rgba(189, 61, 64, 0.06);
	color: var(--meggy);
	font-size: .86rem;
	line-height: 1.6;
}

/* ---------- Galéria + képnagyító ----------
   A rács magától tölti ki a sort, így a képek száma bármikor változhat.
   Minden kép gomb, tehát billentyűzetről is nagyítható. */

/* A galéria alja maga is „lezárja" a szekciót, ezért itt szűkebb a térköz —
   a teljes szekció-ritmus a képek alatt üres sávnak látszana. */
.szekcio--galeria { padding-bottom: calc(var(--szekcio-y) * 0.45); }

.galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: clamp(.5rem, 1.1vw, .85rem);
}
.galeria__elem {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	border: 1px solid var(--vonal);
	border-radius: var(--r-ap);
	background: var(--feher);
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 1;
	transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.galeria__elem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.galeria__elem::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(226, 168, 59, 0);
	transition: box-shadow .3s ease;
	pointer-events: none;
}
.galeria__elem:hover {
	transform: translateY(-3px);
	box-shadow: var(--arnyek-lagy);
	border-color: var(--vonal-arany);
}
.galeria__elem:hover img { transform: scale(1.06); }
.galeria__elem:hover::after { box-shadow: inset 0 0 0 1px rgba(226, 168, 59, .45); }

.szekcio--eben .galeria__elem { border-color: rgba(244, 232, 213, 0.18); background: rgba(244, 232, 213, 0.06); }

/* Képernyőképek (zárt csoportos visszajelzések): NEM vágjuk négyzetre, mert a
   bejegyzés szövege a lényeg. Álló arány + teljes kép, fehér alapon. */
/* 2026-08-07: Réka egységesen 4:5-re szerkesztette a képeket, ezért a keret is
   pontosan 4:5 — így a `cover` semmit nem vág le a bejegyzés szövegéből. */
.galeria--kepernyokep { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.galeria--kepernyokep .galeria__elem { aspect-ratio: 4 / 5; background: #fff; }
.galeria--kepernyokep .galeria__elem img { object-fit: contain; }
.galeria--kepernyokep .galeria__elem:hover img { transform: scale(1.03); }

.nagyito {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.3rem, 2vw, 1.4rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(30, 22, 18, 0.93);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
}
.nagyito[data-nyitva] { opacity: 1; visibility: visible; }
.nagyito__doboz {
	margin: 0;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
}
.nagyito__doboz img {
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	width: auto;
	border-radius: var(--r-kp);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.nagyito__szamlalo {
	font-family: var(--font-torzs);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--szoveg-vil-halk);
}
.nagyito__bezar,
.nagyito__nyil {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(244, 232, 213, 0.28);
	background: rgba(244, 232, 213, 0.08);
	color: var(--homok);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.nagyito__bezar { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; }
.nagyito__nyil { width: 52px; height: 52px; }
.nagyito__bezar:hover,
.nagyito__nyil:hover { background: var(--napsugar); color: var(--eben); border-color: var(--napsugar); }

@media (max-width: 620px) {
	.galeria { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
	/* Kis kijelzőn a nyilak a kép alá kerülnek, hogy ne takarják el a fotót. */
	.nagyito { flex-wrap: wrap; align-content: center; }
	.nagyito__doboz { order: -1; flex-basis: 100%; }
	.nagyito__nyil { width: 46px; height: 46px; }
}

/* ---------- Körhinta (élő klubtalálkozók) ----------
   Középen egy nagy kép, kétoldalt kisebbek, lapozáskor átúsznak egymásba.
   A pozíciót a JS a `data-eltolas` attribútummal adja meg, a mozgást ez a
   néhány szabály végzi — nincs hozzá külső könyvtár. */
.karuszel {
	position: relative;
	max-width: 1400px;
	margin-inline: auto;
	padding: clamp(.5rem, 1.5vw, 1.2rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 2vw, 1.6rem);
	/* A szélső lapok szándékosan kilógnának a sávból — itt vágjuk le őket,
	   különben mobilon vízszintesen görgethetővé tennék az egész oldalt. */
	overflow: hidden;
}

.karuszel__szinpad {
	position: relative;
	z-index: 1;
	height: clamp(300px, 42vw, 520px);
	perspective: 1400px;
	transform-style: preserve-3d;
}

.karuszel__lap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(220px, 28vw, 380px);
	height: clamp(280px, 36vw, 470px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-kp);
	background: var(--papir-2);
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%) scale(.6);
	transition:
		transform .62s cubic-bezier(.22,.72,.24,1),
		opacity .5s ease,
		filter .5s ease,
		box-shadow .5s ease,
		visibility 0s linear .62s;
}
.karuszel__lap img { width: 100%; height: 100%; object-fit: cover; }

/* Középső lap: teljes méret, arany hajszálkeret, mély árnyék. */
.karuszel__lap[data-eltolas="0"] {
	z-index: 5;
	opacity: 1;
	visibility: visible;
	cursor: zoom-in;
	transform: translate(-50%, -50%) scale(1);
	box-shadow: 0 30px 66px rgba(57, 43, 37, .28), 0 0 0 1px var(--vonal-arany);
	transition-delay: 0s;
}
/* Szomszédok: kisebbek, hátrébb fordulva, tompítva. */
.karuszel__lap[data-eltolas="-1"],
.karuszel__lap[data-eltolas="1"] {
	z-index: 4;
	opacity: .62;
	visibility: visible;
	filter: saturate(.8);
	box-shadow: 0 18px 40px rgba(57, 43, 37, .18);
	transition-delay: 0s;
}
.karuszel__lap[data-eltolas="-1"] { transform: translate(calc(-50% - clamp(150px, 20vw, 280px)), -50%) scale(.76) rotateY(19deg); }
.karuszel__lap[data-eltolas="1"]  { transform: translate(calc(-50% + clamp(150px, 20vw, 280px)), -50%) scale(.76) rotateY(-19deg); }

/* A második szomszéd már csak sejlik, mélységet ad a sornak. */
.karuszel__lap[data-eltolas="-2"],
.karuszel__lap[data-eltolas="2"] {
	z-index: 3;
	opacity: .3;
	visibility: visible;
	filter: saturate(.6);
	box-shadow: 0 12px 28px rgba(57, 43, 37, .12);
	transition-delay: 0s;
}
.karuszel__lap[data-eltolas="-2"] { transform: translate(calc(-50% - clamp(250px, 33vw, 470px)), -50%) scale(.58) rotateY(26deg); }
.karuszel__lap[data-eltolas="2"]  { transform: translate(calc(-50% + clamp(250px, 33vw, 470px)), -50%) scale(.58) rotateY(-26deg); }

.karuszel__lap[data-eltolas="-1"]:hover,
.karuszel__lap[data-eltolas="1"]:hover,
.karuszel__lap[data-eltolas="-2"]:hover,
.karuszel__lap[data-eltolas="2"]:hover { opacity: .95; filter: none; }

.karuszel__nyil {
	position: absolute;
	z-index: 6;
	top: 50%;
	transform: translateY(-50%);
	width: 56px; height: 56px;
	display: grid;
	place-content: center;
	border: 1px solid var(--vonal-eros);
	border-radius: 50%;
	background: var(--feher);
	box-shadow: var(--arnyek-lagy);
	color: var(--eben);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.karuszel__nyil:hover {
	background: var(--eben);
	border-color: var(--eben);
	color: var(--homok);
	transform: translateY(-50%) scale(1.06);
}
.karuszel__nyil--elozo     { left: clamp(.4rem, 2vw, 2.2rem); }
.karuszel__nyil--kovetkezo { right: clamp(.4rem, 2vw, 2.2rem); }

.karuszel__labl {
	position: relative;
	z-index: 6;
	margin-top: clamp(1rem, 2vw, 1.6rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
}
.karuszel__pontok { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.karuszel__pont {
	width: 9px; height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vonal-eros);
	opacity: .45;
	cursor: pointer;
	transition: background-color .3s ease, opacity .3s ease, transform .3s ease, width .3s ease;
}
.karuszel__pont:hover { opacity: .8; }
.karuszel__pont[aria-current="true"] { width: 26px; border-radius: 999px; background: var(--arany); opacity: 1; }
.karuszel__sugo {
	margin: 0;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--szoveg-halk);
}

@media (max-width: 620px) {
	/* Kis kijelzőn a második szomszéd csak zsúfolna, ezért eltűnik. */
	.karuszel__lap[data-eltolas="-2"],
	.karuszel__lap[data-eltolas="2"] { opacity: 0; visibility: hidden; }
	.karuszel__lap[data-eltolas="-1"] { transform: translate(calc(-50% - 44vw), -50%) scale(.7) rotateY(19deg); }
	.karuszel__lap[data-eltolas="1"]  { transform: translate(calc(-50% + 44vw), -50%) scale(.7) rotateY(-19deg); }
	.karuszel__nyil { width: 46px; height: 46px; }
}

/* ---------- Lábléc ---------- */
.lablec {
	background: var(--eben);
	color: var(--szoveg-vil-halk);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	font-size: .92rem;
}
.lablec__racs {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 2.6rem;
	border-bottom: 1px solid var(--vonal-vil);
}
.lablec h4 {
	color: var(--homok);
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 1.2rem;
	font-weight: 600;
}
.lablec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lablec a { color: var(--szoveg-vil-halk); }
.lablec a:hover { color: var(--napsugar); }
.lablec__marka { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; color: var(--homok); }
.lablec__marka .marka__jel { color: var(--kiwi); }
.lablec__marka .marka__nev { color: var(--homok); }
.lablec__marka .marka__alcim { color: var(--kiwi); }
.lablec__zaras {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-top: 1.8rem;
	font-size: .82rem;
}
.kozossegi { display: flex; gap: .7rem; }
.kozossegi a {
	width: 40px; height: 40px;
	display: grid; place-content: center;
	border: 1px solid var(--vonal-vil);
	border-radius: 50%;
	color: var(--homok);
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.kozossegi a:hover { background: var(--napsugar); color: var(--eben); border-color: var(--napsugar); }
.kozossegi svg { width: 18px; height: 18px; }

/* ---------- Belső oldalak (page.php) ---------- */
.oldal-fej {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--vonal);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.oldal-tartalom { max-width: var(--maxw-sz); margin-inline: auto; }
.oldal-tartalom h2 { margin-top: 2.2rem; }
.oldal-tartalom h3 { margin-top: 1.8rem; }
.oldal-tartalom ul, .oldal-tartalom ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.oldal-tartalom li { margin-bottom: .5rem; }
.oldal-tartalom img { border-radius: var(--r-kp); margin-block: 1.5rem; }
/* Jogi dokumentumok: a hosszú adatkezelési táblázat vízszintesen görgethető,
   hogy mobilon se lógjon ki az oldalból. */
.jogi-tablazat {
	margin: 2rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
}
.jogi-tablazat table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .84rem; }
.jogi-tablazat th,
.jogi-tablazat td {
	padding: .7rem .85rem;
	border-bottom: 1px solid var(--vonal);
	border-right: 1px solid var(--vonal);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}
.jogi-tablazat th { background: var(--homok); font-weight: 600; color: var(--eben); }
.jogi-tablazat tr:last-child td { border-bottom: 0; }
.jogi-tablazat th:last-child,
.jogi-tablazat td:last-child { border-right: 0; }

.oldal-tartalom h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.oldal-tartalom h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }

.oldal-tartalom blockquote {
	margin: 1.8rem 0;
	padding: 1.2rem 1.6rem;
	border-left: 3px solid var(--arany);
	background: var(--papir-2);
	font-family: var(--font-cim);
	font-size: 1.28rem;
	font-weight: 500;
}

/* ---------- Tapadó kép hosszú szöveg mellett ----------
   Ahol a szövegoszlop jóval hosszabb a képnél, a kép együtt halad az
   olvasással, így nem marad nagy üres folt a másik oszlopban. */
@media (min-width: 881px) {
	.ketoszlop--tapado { align-items: start; }
	.ketoszlop--tapado .ketoszlop__kep {
		position: sticky;
		top: 104px;
		align-self: start;
	}
}

/* ---------- „Egy idő után nehéz eldönteni" felsorolás ---------- */
.dontesek {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem);
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-left: 3px solid var(--arany);
	border-radius: 0 var(--r-kp) var(--r-kp) 0;
}
.dontesek__cim {
	font-family: var(--font-cim);
	font-size: clamp(1.25rem, 1.9vw, 1.55rem);
	font-weight: 600;
	color: var(--eben);
	margin-bottom: 1.1rem;
}
/* FIGYELEM: a .lista-pipa alap `display: grid`, a többhasábos tördelés pedig
   grid-konténeren nem működik — ezért itt vissza kell állítani blokkra. */
.lista-pipa--hasab {
	display: block;
	columns: 2;
	column-gap: 2.8rem;
	margin: 0;
}
.lista-pipa--hasab li { break-inside: avoid; margin-bottom: .7rem; }

/* ---------- Tudástár-kártyák (a sötét szekcióban, világos alapon) ---------- */
.tudastar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 1rem;
}
.tudastar__kartya {
	display: flex;
	flex-direction: column;
	padding: clamp(1.7rem, 2.6vw, 2.2rem);
	background: var(--papir);
	border-radius: var(--r-kp);
	border: 1px solid rgba(244, 232, 213, 0.12);
	box-shadow: 0 20px 44px rgba(20, 14, 11, 0.24);
}
/* Az utolsó (arany) kártya teljes szélességben zárja a rácsot. */
.tudastar__kartya--arany {
	grid-column: 1 / -1;
	background: linear-gradient(150deg, var(--lemon), var(--homok));
	border-color: var(--vonal-arany);
}
.tudastar__cimke {
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--moha);
	margin-bottom: .7rem;
}
.tudastar__kartya h3 {
	font-size: clamp(1.2rem, 1.9vw, 1.5rem);
	margin-bottom: .7rem;
}
.tudastar__bevezeto {
	font-size: .93rem;
	line-height: 1.7;
	color: var(--szoveg-halk);
	margin-bottom: 1.1rem;
}
.tudastar__labjegyzet {
	margin: 1rem 0 0;
	font-size: .85rem;
	font-style: italic;
	color: var(--szoveg-halk);
}

/* Tételes lista a kártyákban — rövid sorok, hajszálvonallal elválasztva,
   így nem folyik össze a sok szöveg. */
.tetelek { list-style: none; margin: 0; padding: 0; }
.tetelek li {
	position: relative;
	padding: .58rem 0 .58rem 1.5rem;
	font-size: .92rem;
	line-height: 1.5;
	border-top: 1px solid var(--vonal);
}
.tetelek li:first-child { border-top: 0; padding-top: 0; }
.tetelek li:first-child::before { top: .5em; }
.tetelek li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1em;
	width: 9px;
	height: 1px;
	background: var(--arany);
}
.tetelek--nevvel li { display: flex; flex-direction: column; gap: .1rem; }
.tetelek--nevvel em {
	font-style: normal;
	font-size: .8rem;
	color: var(--moha);
	letter-spacing: .01em;
}

/* Kedvezmény-extrák */
.extrak {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.4rem;
	margin-top: .5rem;
}
.extra { display: flex; flex-direction: column; gap: .3rem; }
/* A kötőjel a címbetűben világos alapon könnyen elvész — ezért nem törő
   kötőjelet használunk (‑) és vastagabb vágatot. */
.extra__szam {
	font-family: var(--font-cim);
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--eben);
}
.extra__szoveg { font-size: .88rem; line-height: 1.55; color: var(--szoveg-halk); }

/* ---------- Adatlap a portré alatt (bemutatkozás) ---------- */
.adatlap {
	margin-top: 1.5rem;
	padding: 1.4rem 1.5rem;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid var(--vonal);
	border-radius: var(--r-kp);
	display: grid;
	gap: 1rem;
}
.adatlap__sor { display: flex; align-items: baseline; gap: .9rem; }
.adatlap__szam {
	flex: 0 0 auto;
	min-width: 4.6rem;
	font-family: var(--font-cim);
	font-size: 1.38rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--narancs);
}
.adatlap__szoveg { font-size: .86rem; line-height: 1.5; color: var(--szoveg-halk); }

/* ---------- GYIK két hasábban ---------- */
.gyik-racs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	margin-top: 2rem;
}
.gyik-racs .harmonika { margin: 0; }

/* ---------- Scroll-animáció ---------- */
.megjelen {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
	will-change: opacity, transform;
}
.megjelen.lathato { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.megjelen { opacity: 1; transform: none; }
}

/* ---------- Reszponzív ---------- */
@media (max-width: 1000px) {
	.hero__racs { grid-template-columns: 1fr; gap: 3rem; }
	.hero__kep { max-width: 460px; margin-inline: auto; width: 100%; }
	.pecset { left: -1rem; }
	.lablec__racs { grid-template-columns: 1fr 1fr; }
	.lablec__racs > *:first-child { grid-column: 1 / -1; }
}

/* Köztes sávban a menü elférjen a logó és a CTA között. */
@media (max-width: 1150px) and (min-width: 881px) {
	.fomenu__lista { gap: 1rem; }
	.fomenu__lista a { font-size: .74rem; }
	.marka__alcim { display: none; }
	.fejlec__cta { padding: .78rem 1.1rem; font-size: .66rem; }
}

@media (max-width: 880px) {
	.fomenu, .fejlec__cta { display: none; }
	.menu-kapcsolo { display: block; }
	.ketoszlop, .valo-racs, .ket-jovo { grid-template-columns: 1fr; }
	.ketoszlop--forditva > *:first-child { order: 0; }
	.eltolt { transform: none; }
	/* A portré 5:6-os, ezért telefonon is 5:6 a keret — 4:5-tel a boltív oldalt
	   belevágott a hajba. Réka visszajelzése, 2026-08-07. */
	.ketoszlop__kep { max-width: 440px; margin-inline: auto; width: 100%; aspect-ratio: auto; }
	.ketoszlop__kep .boltiv { height: auto; aspect-ratio: 5 / 6; }
	.bemutatkozas__fejlec-mobil { display: block; text-align: center; }
	.bemutatkozas__fejlec-asztali { display: none; }
	/* Telefonon egymás alá: előbb a szöveg, alatta a videó, középre zárva. */
	.kedvcsinalo { grid-template-columns: 1fr; }
	.kedvcsinalo__video { max-width: 320px; margin-inline: auto; width: 100%; }
	.kedvcsinalo__szoveg p { max-width: none; }
	.kurzus-lista { columns: 1; }
	.partnerek { grid-template-columns: repeat(2, 1fr); }
	.kifogas-racs { grid-template-columns: 1fr; }
	.kifogas,
	.kifogas-racs .kifogas:nth-child(n+4) { grid-column: auto; }
	.iranytu { grid-template-columns: 1fr; }
	.iranytu__elem,
	.iranytu__elem:nth-child(4),
	.iranytu__elem:nth-child(5) { grid-column: auto; }
	.tudastar { grid-template-columns: 1fr; }
	.gyik-racs { grid-template-columns: 1fr; gap: 0; }
	.lista-pipa--hasab { columns: 1; }
}

@media (max-width: 560px) {
	:root { --szekcio-y: 3.6rem; }
	.hero__pontok li { font-size: .92rem; }
	.gomb { width: 100%; }
	.hero__cta { flex-direction: column; align-items: stretch; }
	.lepes { grid-template-columns: 3.2rem 1fr; gap: 1.1rem; }
	.lablec__racs { grid-template-columns: 1fr; }
	.lablec__zaras { flex-direction: column; align-items: flex-start; }
	.pecset { width: 96px; height: 96px; left: -.5rem; bottom: 1.2rem; }
	.kiemelt-mondat { padding: 1.4rem 1.5rem; }
	.velemeny { flex-basis: 86vw; }
}

/* ---------- Nyomtatás ---------- */
@media print {
	.fejlec, .lablec, .szalag, .modal, .nagyito, .gomb { display: none !important; }
	body { background: #fff; color: #000; }
}