/* =========================================================
   Bojler-javítás – komponensek
   Gombok, kártyák, fejléc, lábléc, mobil hívósáv, szekciók
   ========================================================= */

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

.gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .95rem 1.6rem;
	min-height: 3rem;
	font-family: var(--font-cim);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--kerek-m);
	cursor: pointer;
	transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.gomb:active {
	transform: translateY(1px);
}

.gomb svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* Elsődleges: a hívásgomb. Sárga alapon sötét felirat – ez a legjobban észrevehető
   kombináció mobilon, erős napfényben is (9,6:1 kontraszt). */
.gomb--hivas {
	background: var(--sarga);
	color: var(--szoveg);
	box-shadow: var(--arnyek-s);
}

.gomb--hivas:hover,
.gomb--hivas:focus-visible {
	background: var(--sarga-sotet);
	color: var(--szoveg);
	box-shadow: var(--arnyek-m);
}

/* Másodlagos: ajánlatkérés */
.gomb--ajanlat {
	background: var(--ejkek);
	color: var(--feher);
}

.gomb--ajanlat:hover,
.gomb--ajanlat:focus-visible {
	background: var(--acelkek);
	color: var(--feher);
}

/* Vonalas – sötét háttéren */
.gomb--vonalas {
	background: transparent;
	color: var(--feher);
	border-color: rgba(255, 255, 255, .55);
}

.gomb--vonalas:hover,
.gomb--vonalas:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: var(--feher);
	color: var(--feher);
}

/* Vonalas – világos háttéren */
.gomb--vonalas-sotet {
	background: transparent;
	color: var(--ejkek);
	border-color: var(--vonal);
}

.gomb--vonalas-sotet:hover,
.gomb--vonalas-sotet:focus-visible {
	border-color: var(--acelkek);
	background: var(--huvos-feher);
	color: var(--ejkek);
}

.gomb--nagy {
	padding: 1.1rem 2rem;
	font-size: 1.1rem;
	min-height: 3.5rem;
}

.gomb-sor {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

/* ---------------------------------------------------------
   Szekciók
   --------------------------------------------------------- */

.szekcio {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.szekcio--huvos { background: var(--huvos-feher); }
.szekcio--sotet { background: var(--ejkek); color: rgba(255, 255, 255, .88); }

/* Rövidebb függőleges levegő: ott kell, ahol két szekció tartalmilag
   összetartozik (hero → bevezető), és a teljes térköz szétszakítaná őket. */
.szekcio--szuk {
	padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}

.szekcio--sotet h2,
.szekcio--sotet h3,
.szekcio--sotet strong {
	color: var(--feher);
}

.szekcio--sotet a {
	color: var(--sarga);
}

.szekcio-fej {
	max-width: 46rem;
	margin-bottom: var(--ter-m);
}

.szekcio-fej--kozepre {
	margin-inline: auto;
	text-align: center;
}

.szekcio-cimke {
	display: inline-block;
	font-family: var(--font-cim);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--acelkek);
	margin-bottom: .5rem;
}

.szekcio--sotet .szekcio-cimke {
	color: var(--sarga);
}

.szekcio-alcim {
	font-size: 1.1rem;
	color: var(--szoveg-halvany);
	margin-bottom: 0;
}

.szekcio--sotet .szekcio-alcim {
	color: rgba(255, 255, 255, .8);
}

/* Sötét szekcióban a halvány szövegszín olvashatatlan lenne – felülírjuk. */
.szekcio--sotet p,
.szekcio--sotet li {
	color: rgba(255, 255, 255, .82);
}

/* ---------------------------------------------------------
   Rácsok
   --------------------------------------------------------- */

.racs {
	display: grid;
	gap: var(--ter-s);
}

.racs--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.racs--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.racs--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Kötött hármas rács: a hat szolgáltatás-kártya asztali nézetben 3+3-ban áll,
   nem 4+2-ben – így két egyenlő sor lesz belőle. */
.racs--harmas {
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.racs--harmas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60rem) {
	.racs--harmas {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------
   Kártyák
   --------------------------------------------------------- */

.kartya {
	display: flex;
	flex-direction: column;
	padding: var(--ter-m);
	background: var(--feher);
	border: 1px solid var(--vonal-halvany);
	border-radius: var(--kerek-l);
	box-shadow: var(--arnyek-s);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.kartya h3 {
	margin-bottom: .5rem;
}

.kartya p:last-child {
	margin-bottom: 0;
}

a.kartya,
.kartya--kattinthato {
	text-decoration: none;
	color: inherit;
}

a.kartya:hover,
a.kartya:focus-visible,
.kartya--kattinthato:hover {
	transform: translateY(-3px);
	box-shadow: var(--arnyek-m);
	border-color: var(--vilagoskek);
}

.kartya-ikon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--ter-s);
	background: var(--huvos-feher);
	color: var(--acelkek);
	border-radius: var(--kerek-m);
}

.kartya-ikon svg {
	width: 1.7rem;
	height: 1.7rem;
}

.kartya-tovabb {
	margin-top: auto;
	padding-top: var(--ter-s);
	font-family: var(--font-cim);
	font-weight: 600;
	font-size: .95rem;
	color: var(--acelkek);
}

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

/*
 * A logós-menüs sor MINDEN képernyőméreten a lap tetején marad görgetés
 * közben (Zoli, 2026.08.02.): asztali gépen is végig kéznél van a menü és az
 * ajánlatkérő gomb.
 *
 * Eddig asztali méretben a fölötte lévő sötét sáv tapadt (a telefonszám
 * miatt), a menüsor nem. A kettő együtt 170 képpontot enne el a képernyő
 * tetejéből – az egy laptopon már a lap negyede –, ezért esett a választás a
 * menüsorra: a telefonszám a mobil nézetben amúgy is ott van a fix alsó
 * hívógombon, asztali gépen pedig a menüsor jobb szélén az „Ajánlatkérés”
 * gomb marad végig elérhető.
 */
.fejlec {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--feher);
	border-bottom: 1px solid var(--vonal-halvany);
	box-shadow: 0 6px 18px rgba(4, 20, 42, .16);
}

/* Felső sáv: márkanév + telefonszám. Zoli kifejezett kérése, hogy ez így
   maradjon. A <header>-en KÍVÜL, a body közvetlen gyerekeként él – ez abból
   maradt, amikor még ez volt a tapadó elem; a helye így is pontosan jó, és a
   sticky fejléc alatta nem kap plusz szülő-korlátot. */
.fejlec-felso {
	background: var(--ejkek-sotet);
	color: rgba(255, 255, 255, .9);
	font-size: .9rem;

	/* A hero ugyanezzel a kékkel indul: elválasztó vonal nélkül a sáv
	   beleolvadna, és a telefonszám „a heroban lógna”. */
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* A bejelentkezett szerkesztőnek a WP admin sávja is a lap tetején ül. */
.admin-bar .fejlec {
	top: 32px;
}

@media (max-width: 48.875rem) {
	.admin-bar .fejlec {
		top: 46px;
	}
}

/* 600 képpont alatt a WP admin sávja már nem fix, ott nem kell eltolás. */
@media (max-width: 37.5rem) {
	.admin-bar .fejlec {
		top: 0;
	}
}

.fejlec-felso__belso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .35rem 1.25rem;
	padding-block: .55rem;
}

.fejlec-felso__brand {
	min-width: 0;
	font-family: var(--font-cim);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--feher);
}

/* Asztali méretben egy sorban fut a név és a szerep. */
.fejlec-felso__brandszerep::before {
	content: " ";
}

.fejlec-felso__jobb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

/*
 * A Google-értékelés helye a sávban.
 *
 * Mobilon ez váltja a telefonszámot és a működési területet: a lap alján
 * amúgy is ott a fix hívógomb, itt viszont a márkanév és a csillagok
 * mennek együtt – Zoli kifejezett kérése (2026.07.31.).
 */
/*
 * FONTOS: ezt a dobozt soha nem szabad display:none-nal elrejteni. A Trustindex
 * betöltője csak akkor építi fel a widgetet, ha a helye a betöltés pillanatában
 * tényleg benne van a látható képernyőben – egy nulla méretű doboz sosem az,
 * és akkor néma marad az egész (fél napig ettől volt üres a hero jelvénye).
 * Ezért itt marad, láthatóan; asztali méretben a JS viszi át a hero fotójára.
 */
.fejlec-felso__ti {
	display: block;
	flex: none;
	line-height: 0;
}

.fejlec-felso__ti .ti-widget[data-layout-id][data-set-id],
.fejlec-felso__ti .ti-widget {
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	z-index: auto !important;
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 0 !important;
}

.fejlec-felso__ti .ti-close-button {
	display: none !important;
}

/* Ezt a JS teszi rá, miután a widget felépült – lásd assets/js/fo.js. */
.fejlec-felso__ti--rejtve {
	display: none;
}

.fejlec-felso__tetel {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
}

.fejlec-felso__tetel svg {
	width: 1em;
	height: 1em;
	flex: none;
	color: var(--sarga);
}

.fejlec-felso__tetel:hover,
.fejlec-felso__tetel:focus-visible {
	color: var(--sarga);
}

.fejlec-felso__tel {
	font-family: var(--font-cim);
	font-weight: 700;
	color: var(--feher);
}

@media (max-width: 55.9375rem) {
	.fejlec-felso__belso {
		flex-wrap: nowrap;
		gap: .75rem;
	}

	/* Mobilon két sorba tördeljük: így a teljes név kifér a jelvény mellé. */
	.fejlec-felso__brand {
		display: flex;
		flex-direction: column;
		line-height: 1.15;
	}

	.fejlec-felso__brandnev {
		font-size: .95rem;
		font-weight: 700;
	}

	.fejlec-felso__brandszerep {
		font-size: .72rem;
		font-weight: 500;
		letter-spacing: .04em;
		color: rgba(255, 255, 255, .78);
	}

	.fejlec-felso__brandszerep::before {
		content: none;
	}

	.fejlec-felso__tetel--terulet,
	.fejlec-felso__tetel--telefon {
		display: none;
	}

	/* A widget natúrban ~220 px széles, és annyira összenyomná a márkanevet,
	   hogy csak a „Nyári Tibor vill…” maradna belőle. Zolinak viszont pont a
	   név a fontos, ezért a jelvényt kicsinyítjük – a doboz szélessége is
	   ennek megfelelően szűkül, hogy ne maradjon utána üres hely. */
	/*
	 * A jelvényt kicsinyítjük, hogy a márkanév is kiférjen mellé.
	 *
	 * Szándékosan `zoom` és nem `transform: scale()`: a transform csak a
	 * megjelenést kicsinyíti, a doboz marad akkora, amekkora – emiatt vagy
	 * indokolatlanul magas lett a sáv, vagy (fix mérettel) elvágta a
	 * „455 vélemény” feliratot. A zoom a tördelésre is hat, így nem kell
	 * képpontra belőni semmit, és a szöveghossz változását is elbírja.
	 */
	.fejlec-felso__ti .ti-widget {
		zoom: .75;
		width: max-content !important;
		max-width: none !important;
	}

	/*
	 * A sávban elég a csillag és az átlag – a „455 vélemény" csak helyet vinne
	 * a márkanév elől. A darabszám csupasz szövegcsomóként áll a `.ti-text`-ben,
	 * nincs saját elem köré húzva, ezért csak így, betűméret-nullázással lehet
	 * elrejteni; az átlagnak visszaadjuk a méretét.
	 */
	.fejlec-felso__ti .ti-text {
		font-size: 0 !important;
	}

	.fejlec-felso__ti .ti-text .ti-rating {
		font-size: 15px !important;
		/* A widget saját elválasztó vonala a darabszám elé mutatna – az viszont
		   most nincs ott, tehát a vonal is felesleges. */
		margin-right: 0 !important;
		padding-right: 0 !important;
		border-right: 0 !important;
	}
}

/* Fő sáv: logó + menü + hívásgomb */
.fejlec-fo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ter-s);
	padding-block: .85rem;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	flex: none;
	text-decoration: none;
	color: var(--ejkek);
}

.logo img {
	max-height: 3.1rem;
	width: auto;
}

/* A WordPress saját logó-kimenete (custom-logo) – az eredeti oldal logója. */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
}

.custom-logo-link img {
	max-height: 3.4rem;
	width: auto;
	height: auto;
}

@media (max-width: 30rem) {
	.custom-logo-link img {
		max-height: 2.6rem;
	}
}

.logo-szoveg {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.logo-szoveg strong {
	font-family: var(--font-cim);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--ejkek);
	letter-spacing: -.01em;
	white-space: nowrap;
}

.logo-szoveg span {
	font-size: .78rem;
	color: var(--szoveg-halvany);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fejlec-jobb {
	flex: none;
}

.fejlec-jobb {
	display: flex;
	align-items: center;
	gap: .8rem;
}

/* ---------------------------------------------------------
   Főmenü
   --------------------------------------------------------- */

.fomenu ul {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fomenu li {
	margin: 0;
	position: relative;
}

.fomenu a {
	display: block;
	padding: .55rem .7rem;
	font-family: var(--font-cim);
	font-weight: 600;
	font-size: .95rem;
	color: var(--ejkek);
	text-decoration: none;
	border-radius: var(--kerek-s);
	white-space: nowrap;
}

.fomenu a:hover,
.fomenu a:focus-visible {
	background: var(--huvos-feher);
	color: var(--acelkek);
}

.fomenu .current-menu-item > a,
.fomenu .current_page_item > a,
.fomenu .current-menu-ancestor > a {
	color: var(--acelkek);
	box-shadow: inset 0 -2px 0 var(--sarga);
}

/* Almenü */
.fomenu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 15rem;
	padding: .4rem;
	background: var(--feher);
	border: 1px solid var(--vonal-halvany);
	border-radius: var(--kerek-m);
	box-shadow: var(--arnyek-m);
	opacity: 0;
	visibility: hidden;
	transform: translateY(.35rem);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.fomenu li:hover > .sub-menu,
.fomenu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fomenu .sub-menu a {
	font-weight: 500;
	font-size: .95rem;
}

/* Menü nyitógomb – mobilon */
.menu-gomb {
	display: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: var(--huvos-feher);
	border: 1px solid var(--vonal);
	border-radius: var(--kerek-m);
	color: var(--ejkek);
	cursor: pointer;
}

.menu-gomb svg {
	width: 1.5rem;
	height: 1.5rem;
}

.menu-gomb .ikon-x { display: none; }
.menu-gomb[aria-expanded="true"] .ikon-x { display: block; }
.menu-gomb[aria-expanded="true"] .ikon-menu { display: none; }

/* A menü hét tétele hosszú magyar szavakból áll, ezért a hamburger-menüre
   váltás korábban, 1180 képpontnál történik – így soha nem tördel két sorba. */
@media (max-width: 73.75rem) {
	.menu-gomb {
		display: inline-flex;
	}

	.fejlec-jobb .gomb--ajanlat {
		display: none;
	}

	.fomenu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: var(--ter-s);
		background: var(--feher);
		border-top: 1px solid var(--vonal-halvany);
		box-shadow: var(--arnyek-l);
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}

	.fomenu.nyitva {
		display: block;
	}

	.fomenu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fomenu a {
		padding: .85rem .7rem;
		border-bottom: 1px solid var(--vonal-halvany);
		border-radius: 0;
	}

	.fomenu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 var(--ter-s);
		min-width: 0;
	}
}

/* ---------------------------------------------------------
   Fix mobil hívósáv – bal: Hívás, jobb: Ajánlatkérés
   --------------------------------------------------------- */

.mobilsav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	display: none;
	background: var(--feher);
	border-top: 1px solid var(--vonal);
	box-shadow: 0 -4px 16px rgba(16, 48, 92, .1);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobilsav__belso {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	padding: .5rem .75rem;
}

.mobilsav .gomb {
	width: 100%;
	padding-inline: .5rem;
	font-size: 1rem;
}

@media (max-width: 48rem) {
	.mobilsav {
		display: block;
	}

	body {
		--mobilsav: 4.5rem;
	}
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero {
	position: relative;
	background: linear-gradient(160deg, var(--ejkek) 0%, var(--acelkek) 100%);
	color: var(--feher);
	overflow: hidden;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60rem 30rem at 85% 15%, rgba(95, 137, 192, .35), transparent 60%),
		radial-gradient(40rem 24rem at 10% 90%, rgba(255, 194, 26, .12), transparent 65%);
	pointer-events: none;
}

.hero__belso {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--ter-l);
	align-items: center;
	padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem);
}

@media (min-width: 56rem) {
	.hero__belso {
		grid-template-columns: 1.05fr .95fr;
	}
}

/* A hero címsora két teljes mondat, ezért egy fokkal kisebb, mint az
   aloldalak H1-e – különben öt sorba tördel és elnyomja a képet. */
.hero h1 {
	font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.7rem);
	line-height: 1.12;
	color: var(--feher);
	margin-bottom: var(--ter-s);
	max-width: 16em;
}

/* A <strong> alapszíne sötétkék – a heroban és a záró sávban ez eltűnne. */
.hero strong,
.zaro strong {
	color: var(--sarga);
}

.hero__kiemelt {
	color: var(--sarga);
}

/* A címsor alatti egy mondat: ez mondja ki, mivel foglalkozunk. Félkövér és
   világosabb, mint a bevezető, hogy a kettő ne mosódjon össze egy szövegtömbbé. */
.hero__vezeto {
	font-family: var(--font-cim);
	font-size: clamp(1.05rem, 1rem + .45vw, 1.22rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--feher);
	max-width: 34rem;
	margin-bottom: .7rem;
}

.hero__bevezeto {
	font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
	color: rgba(255, 255, 255, .9);
	max-width: 34rem;
	margin-bottom: var(--ter-m);
}

.hero__cimke {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .9rem;
	margin-bottom: var(--ter-s);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-family: var(--font-cim);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--feher);
}

/* Kattintható változat – a Hajdu bojler szerviz gyűjtőoldalra visz. */
.hero__cimke--link {
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.hero__cimke--link:hover,
.hero__cimke--link:focus-visible {
	background: rgba(255, 255, 255, .2);
	border-color: var(--sarga);
	color: var(--feher);
}

/* Bizalmi chipek a hajtás fölött – a látványterv hero-sávja. */
.hero__chipek {
	list-style: none;
	padding: 0;
	margin: var(--ter-m) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.hero__chipek li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: .5rem .9rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, .94);
}

.hero__chipek svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	color: var(--sarga);
}

/* A hero jobb oldala: fotó + tapasztalat-jelvény + Google-értékelés */
.hero__vizual {
	display: grid;
	gap: var(--ter-s);
	width: 100%;
	max-width: 30rem;
	justify-self: end;
}

.hero__kep {
	position: relative;
	margin: 0;
	width: 100%;
}

/* A keret külön elem, mert a jelvénynek ki kell lógnia a lekerekített képből. */
.hero__kep-keret {
	position: relative;
	border-radius: var(--kerek-l);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(4, 20, 42, .38);
	border: 1px solid rgba(255, 255, 255, .16);
}

.hero__kep img {
	width: 100%;
	height: auto;
	display: block;
}

/* „20+ év tapasztalat” – a látványterv lebegő jelvénye. */
.hero__jelveny {
	position: absolute;
	top: 1.25rem;
	right: -.75rem;
	z-index: 2;
	display: grid;
	justify-items: center;
	padding: .55rem 1rem;
	background: var(--sarga);
	color: var(--ejkek);
	border-radius: var(--kerek-m);
	box-shadow: 0 14px 28px rgba(4, 20, 42, .45);
	text-align: center;
}

.hero__jelveny b {
	font-family: var(--font-cim);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
}

.hero__jelveny small {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .03em;
}

/*
 * A Google-értékelés a képre ülve, a bal alsó sarokban – a látványterv fehér
 * lebegő kártyájának a helyén.
 *
 * A Trustindexben ez a widget „lebegő” elrendezésű: a saját CSS-e a képernyő
 * bal alsó sarkába szögezi (position:fixed), a betöltője pedig a body végére is
 * átmozgathatja. Ezért kell egyszerre a JS-es visszamozgatás (assets/js/fo.js)
 * és ez a felülírás – a widget saját szelektoránál erősebb kötéssel.
 */
.hero__ti {
	position: absolute;
	left: -1.25rem;
	bottom: 1.5rem;
	z-index: 3;
	max-width: calc(100% - .5rem);
}

.hero__ti .ti-widget[data-layout-id][data-set-id],
.hero__ti .ti-widget {
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	z-index: auto !important;
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 0 !important;
}

.hero__ti .ti-close-button {
	display: none !important;
}

@media (max-width: 55.9375rem) {
	.hero__vizual {
		max-width: 22rem;
		justify-self: start;
	}

	/* Kis kijelzőn a kilógó kártya levágódna, ezért beljebb húzzuk. */
	.hero__ti {
		left: .6rem;
		bottom: .6rem;
	}

	/* 2026.08.02-től mobilon is a képen ül a jelvény (korábban a fejléc felső
	   sávjában maradt). Natúrban ~220 px széles, ami egy 360 px-es kijelzőn a
	   fotó nagy részét eltakarná – ezért kicsinyítjük. Szándékosan `zoom`, nem
	   `transform: scale()`: a transform a doboz méretét nem viszi magával. */
	.hero__ti .ti-widget {
		zoom: .78;
	}
}

/* ---------------------------------------------------------
   Az „egy kiszállással megoldjuk" ígéret-szekció
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Bevezető sáv a hero alatt
   --------------------------------------------------------- */

/* Középre zárt, keskeny szövegoszlop. A 44rem-es korlát kb. 70 karakteres
   sorhosszt ad – ennél szélesebb folyószöveget nem kényelmes olvasni. */
.bevezeto {
	max-width: 44rem;
	text-align: center;
}

.bevezeto h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem);
	margin-bottom: var(--ter-s);
}

.bevezeto p {
	margin-bottom: var(--ter-s);
}

.bevezeto p:last-child {
	margin-bottom: 0;
}

/* A három rövid kérdés + a felszólítás: ez a blokk hangsúlyos nyitánya. */
.bevezeto__felvezeto {
	font-family: var(--font-cim);
	font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
	font-weight: 600;
	color: var(--acelkek);
}

/* A tevékenységet kimondó mondat – ez a blokk SEO-magja, ezért kap kiemelést. */
.bevezeto__kiemelt {
	font-weight: 600;
	color: var(--ejkek);
}

/* Keskeny kijelzőn a középre zárt folyószöveg mindkét széle szakadozott lesz,
   és négy bekezdésnyi ilyen szöveget fárasztó olvasni. A címsor és a nyitó
   kérdéssor középen marad, a törzs balra zár. */
@media (max-width: 40rem) {
	.bevezeto p:not(.bevezeto__felvezeto) {
		text-align: left;
	}
}

/* ---------------------------------------------------------
   „Miért választanak minket” – kétoszlopos sötét sáv
   --------------------------------------------------------- */

.igeret {
	display: grid;
	gap: var(--ter-m) var(--ter-l);
	align-items: start;
}

@media (min-width: 56rem) {
	.igeret {
		grid-template-columns: 1.05fr .95fr;
	}
}

/* A címsor alatti egysoros ígéret – nagyobb, mint a folyószöveg, de nem H3,
   mert a címhierarchiában nincs helye (a szekciónak egy H2-je van). */
.igeret__alcim {
	font-family: var(--font-cim);
	font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
	font-weight: 600;
	color: var(--sarga);
	margin-bottom: var(--ter-s);
}

.igeret__lista-cim {
	margin-bottom: .75rem;
}

.igeret__zaras {
	margin-top: var(--ter-s);
	margin-bottom: 0;
}

.igeret__zaras strong {
	display: block;
	color: var(--sarga);
	font-size: 1.05rem;
}

/* A jobb oszlop saját címe. A bal oldali H2-nél kisebb, hogy a két oszlop
   ne két egyenrangú szekciónak látsszon. */
.igeret__garancia h3 {
	font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
	margin-bottom: var(--ter-s);
}

/* ---------------------------------------------------------
   Pipás felsorolás
   --------------------------------------------------------- */

/* Szakaszcím alatti alcím a szerkesztőből (pl. „7 jel, amit nem érdemes…”). */
.szakasz-bevezeto p.szakasz-vezeto {
	font-family: var(--font-cim);
	font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
	color: var(--acelkek);
	margin-bottom: .5rem;
}

/* A ✓ CSS-ből jön, nem a szövegből: így a felolvasó nem mondja ki
   minden tételnél, és a sortörés sem szakítja el a jeltől a szöveget. */
.pipa-lista {
	list-style: none;
	margin: 0 0 var(--ter-s);
	padding: 0;
	display: grid;
	gap: .4rem .9rem;
}

/* A 13rem-es alsó határ szándékos: ennél kisebb értéknél három hasáb jönne
   ki, és a hosszabb tételek („egyéb Hajdu alkatrészek") két sorba törnének,
   amitől szakadozott lesz a lista. Így mindenhol két, egyenletes oszlop van. */
.pipa-lista--ketto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.pipa-lista li {
	position: relative;
	margin: 0;
	padding-left: 1.6rem;
	font-size: .97rem;
	line-height: 1.45;
}

.pipa-lista li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--acelkek);
}

.szekcio--sotet .pipa-lista li::before {
	color: var(--sarga);
}

.igeret__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ter-s);
}

.igeret__lista li {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	margin: 0;
	padding: 1rem 1.15rem;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--kerek-m);
}

.igeret__lista svg {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	color: var(--sarga);
	margin-top: .15rem;
}

.igeret__lista strong {
	display: block;
	font-family: var(--font-cim);
	font-size: 1.02rem;
	color: var(--feher);
	margin-bottom: .15rem;
}

.igeret__lista span {
	font-size: .95rem;
	color: rgba(255, 255, 255, .82);
}

/* ---------------------------------------------------------
   Az „egy kiszállással megoldjuk" USP-sáv
   --------------------------------------------------------- */

/* Kétoszlopos kártyarács: a 26rem-es alsó határ miatt asztali méretben 2x2,
   táblagépen és mobilon egymás alatt. Négy hasábra nem bontjuk, mert a
   blokkok többbekezdésnyi szöveget tartalmaznak. */
.usp {
	display: grid;
	gap: var(--ter-s);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.usp__elem {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: var(--ter-m);
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: var(--kerek-l);
}

/* Fehér szekcióban a keret önmagában alig látszik, ezért egy halk árnyék
   emeli el a kártyát a háttértől. */
.szekcio:not(.szekcio--huvos):not(.szekcio--sotet) .usp__elem {
	box-shadow: var(--arnyek-s);
}

/* Mobilon az ikon melletti szövegoszlop kb. 250 pixelre szűkülne, és ezekben
   a kártyákban több bekezdés van – ezért ott az ikon a szöveg fölé kerül. */
@media (max-width: 30rem) {
	.usp__elem {
		flex-direction: column;
		gap: .75rem;
	}
}

.usp__ikon {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	flex: none;
	background: var(--sarga);
	color: var(--ejkek);
	border-radius: var(--kerek-m);
}

.usp__ikon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.usp__elem h3 {
	font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
	margin-bottom: .5rem;
}

.usp__elem p {
	font-size: .97rem;
	color: var(--szoveg-halvany);
	margin: 0 0 .55rem;
}

/* A kártya záró mondata: ez foglalja össze az érvet, ezért sötétebb és
   félkövér – de nem sárga, mert világos háttéren olvashatatlan lenne.
   A szelektor szándékosan kétosztályos, hogy a `.usp__elem p` fölé kerüljön. */
.usp__elem .usp__zaras {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--ejkek);
}

.usp__torzs > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   Hibalista (ikonos blokk)
   --------------------------------------------------------- */

.hibak {
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.hiba {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: 1rem 1.15rem;
	background: var(--feher);
	border: 1px solid var(--vonal-halvany);
	border-left: 4px solid var(--sarga);
	border-radius: var(--kerek-m);
	text-decoration: none;
	color: var(--szoveg);
	box-shadow: var(--arnyek-s);
	transition: transform .15s ease, box-shadow .15s ease;
}

.hiba:hover,
.hiba:focus-visible {
	transform: translateX(3px);
	box-shadow: var(--arnyek-m);
	color: var(--ejkek);
}

/* A tünet saját oldalán a hozzá tartozó csempe nem hivatkozás, hanem jelölés. */
.hiba--aktiv {
	background: var(--acelkek);
	border-color: var(--acelkek);
	border-left-color: var(--sarga);
	color: var(--feher);
	box-shadow: var(--arnyek-m);
	cursor: default;
}

.hiba--aktiv:hover {
	transform: none;
}

.hiba svg {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	color: var(--acelkek);
}

.hiba--aktiv svg {
	color: var(--sarga);
}

.hiba strong {
	font-family: var(--font-cim);
	font-size: 1rem;
	font-weight: 600;
}

/* ---------------------------------------------------------
   Folyamat: felhív → kiszállunk → megjavítjuk
   --------------------------------------------------------- */

.folyamat {
	display: grid;
	gap: var(--ter-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	counter-reset: lepes;
}

.lepes {
	position: relative;
	padding-top: 3.5rem;
}

.lepes::before {
	counter-increment: lepes;
	content: counter(lepes);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--sarga);
	color: var(--ejkek);
	font-family: var(--font-cim);
	font-weight: 800;
	font-size: 1.25rem;
	border-radius: 50%;
}

.lepes h3 {
	font-size: 1.15rem;
	margin-bottom: .35rem;
}

/* Több hasábban a hosszabb lépéscím két sorba tör, a rövidebb egybe – ettől
   a három szövegtörzs eltérő magasságban indulna. Két sornyi hely mindnek
   egyenesbe hozza a kezdőpontot. Mobilon (egy hasáb) nincs rá szükség. */
@media (min-width: 48rem) {
	.lepes h3 {
		min-height: 2lh;
	}
}

.lepes p {
	color: var(--szoveg-halvany);
	margin: 0;
}

.szekcio--sotet .lepes p {
	color: rgba(255, 255, 255, .82);
}

/* ---------------------------------------------------------
   Kerületi linksáv
   --------------------------------------------------------- */

.keruletek {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.keruletek li {
	margin: 0;
}

.keruletek a {
	display: inline-block;
	padding: .45rem .9rem;
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: 999px;
	font-size: .93rem;
	text-decoration: none;
	color: var(--ejkek);
}

.keruletek a:hover,
.keruletek a:focus-visible {
	background: var(--ejkek);
	border-color: var(--ejkek);
	color: var(--feher);
}

/* ---------------------------------------------------------
   Záró ajánlatkérő sáv
   --------------------------------------------------------- */

.zaro {
	background: linear-gradient(140deg, var(--ejkek), var(--acelkek));
	color: var(--feher);
	border-radius: var(--kerek-l);
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
	text-align: center;
}

.zaro h2 {
	color: var(--feher);
}

.zaro p {
	color: rgba(255, 255, 255, .88);
	max-width: 40rem;
	margin-inline: auto;
}

.zaro p + p {
	margin-top: .7rem;
}

/* A címsor alatti egy mondat a záró sávban – nagyobb és fehérebb a törzsnél. */
.zaro p.zaro__alcim {
	font-family: var(--font-cim);
	font-size: clamp(1.02rem, 1rem + .35vw, 1.18rem);
	font-weight: 600;
	color: var(--feher);
}

.zaro .gomb-sor {
	justify-content: center;
	margin-top: var(--ter-m);
}

/* ---------------------------------------------------------
   Ajánlatkérő űrlap

   A záró sáv alatt ül, minden oldal alján. Szándékosan rövid:
   név, telefon, e-mail, üzenet – a többit telefonon egyeztetik.
   --------------------------------------------------------- */

.urlap-blokk {
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: var(--kerek-l);
	box-shadow: var(--arnyek-m);
	padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
	margin-top: calc(var(--ter-m) * -1 - .5rem);
	margin-inline: auto;
	max-width: 46rem;
	position: relative;
	z-index: 1;
}

.urlap-fej {
	text-align: center;
	margin-bottom: var(--ter-m);
}

.urlap-fej h2 {
	margin-bottom: .5rem;
}

.urlap-fej p {
	color: var(--szoveg-halvany);
	max-width: 34rem;
	margin-inline: auto;
}

.urlap-sor {
	display: grid;
	gap: var(--ter-s);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.urlap-sor {
		grid-template-columns: 1fr 1fr;
	}
}

.urlap-mezo {
	margin-bottom: var(--ter-s);
}

.urlap-mezo label {
	display: block;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .35rem;
}

.urlap-mezo .kotelezo {
	color: var(--riaszto);
}

.urlap-mezo .nem-kotelezo {
	font-weight: 400;
	color: var(--szoveg-halvany);
	font-size: .875rem;
}

.urlap-mezo input,
.urlap-mezo textarea {
	width: 100%;
	font: inherit;
	color: var(--szoveg);
	background: var(--huvos-feher);
	border: 1px solid var(--vonal);
	border-radius: var(--kerek-s);
	padding: .85rem 1rem;
	min-height: 3rem;
}

.urlap-mezo textarea {
	resize: vertical;
	min-height: 6rem;
}

.urlap-mezo input:focus-visible,
.urlap-mezo textarea:focus-visible {
	outline: 3px solid var(--acelkek-vil);
	outline-offset: 1px;
	border-color: var(--acelkek);
	background: var(--feher);
}

/* A robotcsapda: a képernyőn nincs sehol, de nem display:none,
   mert azt néhány robot felismeri és átugorja. */
.urlap-rejtett {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.urlap-jelolo {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin: var(--ter-s) 0;
	font-size: .9rem;
	color: var(--szoveg-halvany);
	line-height: 1.5;
}

.urlap-jelolo input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .1rem;
	accent-color: var(--acelkek);
}

.urlap-jelolo a {
	text-decoration: underline;
}

.urlap-lab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ter-s);
	margin-top: var(--ter-s);
}

.urlap-lab .gomb {
	flex: 1 1 auto;
	justify-content: center;
}

.urlap-sugo {
	font-size: .9rem;
	color: var(--szoveg-halvany);
	margin: 0;
}

.urlap-sugo a {
	font-weight: 700;
	color: var(--acelkek);
	white-space: nowrap;
}

.urlap-hiba {
	background: #fdf0ef;
	border: 1px solid var(--riaszto);
	border-radius: var(--kerek-s);
	padding: 1rem 1.15rem;
	margin-bottom: var(--ter-s);
	font-size: .95rem;
}

.urlap-hiba ul {
	margin: .4rem 0 0;
	padding-left: 1.2rem;
}

.urlap-koszono {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #eefaf3;
	border: 1px solid var(--rendben);
	border-radius: var(--kerek-m);
	padding: 1.25rem 1.4rem;
}

.urlap-koszono svg {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--rendben);
}

.urlap-koszono strong {
	display: block;
	font-size: 1.1rem;
	margin-bottom: .25rem;
}

.urlap-koszono p {
	margin: 0;
	color: var(--szoveg-halvany);
}

.urlap-koszono a {
	font-weight: 700;
	color: var(--acelkek);
	white-space: nowrap;
}

/* ---------------------------------------------------------
   Cikk / oldal tartalom
   --------------------------------------------------------- */

.oldal-fej {
	background: var(--huvos-feher);
	border-bottom: 1px solid var(--vonal);
	padding-block: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.morzsa {
	font-size: .9rem;
	color: var(--szoveg-halvany);
	margin-bottom: .6rem;
}

.morzsa a {
	color: var(--szoveg-halvany);
}

.morzsa a:hover {
	color: var(--acelkek);
}

.morzsa span + span::before {
	content: "›";
	margin: 0 .45em;
	color: var(--vilagoskek);
}

.cikk-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	font-size: .92rem;
	color: var(--szoveg-halvany);
}

.tartalom {
	font-size: 1.075rem;
}

/* A bekezdések és listák sorhossza korlátozott, de BALRA zártan – így a
   szöveg bal széle pontosan ott kezdődik, ahol a fejlécben a logó. */
.tartalom > p,
.tartalom > ul,
.tartalom > ol,
.tartalom > blockquote {
	max-width: var(--szoveg-sorhossz);
	margin-inline: 0;
}

.tartalom > * + * {
	margin-top: var(--ter-s);
}

.tartalom h2 {
	margin-top: var(--ter-l);
}

.tartalom h3 {
	margin-top: var(--ter-m);
}

.tartalom img {
	border-radius: var(--kerek-m);
	height: auto;
}

/* ---------------------------------------------------------
   Képek a cikk szövegében

   Az eredeti oldalon a képek nem külön sávban álltak, hanem a bekezdés mellé
   voltak úsztatva, a szöveg körbefolyta őket – Zoli ezt kérte vissza
   (2026.08.02.).

   Két helyről jöhet ilyen kép, és mindkettő ugyanígy néz ki:
     · `cikk-kep-uszo` – a kiemelt képet a téma fűzi az első bekezdésbe
       (lásd inc/tartalom.php),
     · `alignleft` / `alignright` – a régi cikkek szövegében ott lévő képek
       WordPress-osztálya. Ez élesítés után válik fontossá: az éles cikkekben
       mind így van beállítva.
   --------------------------------------------------------- */

.tartalom img.cikk-kep-uszo,
.tartalom img.alignleft,
.tartalom .wp-caption.alignleft {
	float: left;
	max-width: min(20rem, 42%);
	margin: .4rem var(--ter-m) var(--ter-s) 0;
}

.tartalom img.alignright,
.tartalom .wp-caption.alignright {
	float: right;
	max-width: min(20rem, 42%);
	margin: .4rem 0 var(--ter-s) var(--ter-m);
}

.tartalom img.aligncenter,
.tartalom .wp-caption.aligncenter {
	display: block;
	margin-inline: auto;
}

/* A címsorok soha nem kezdődhetnek egy kép mellett félig: a szöveg
   körbefolyhatja a képet, egy új gondolat viszont új sorban induljon. */
.tartalom h2,
.tartalom h3 {
	clear: both;
}

/* Keskeny képernyőn nincs mit körbefolyni: ott a kép a szöveg fölé áll,
   teljes szélességben. */
@media (max-width: 34rem) {
	.tartalom img.cikk-kep-uszo,
	.tartalom img.alignleft,
	.tartalom img.alignright,
	.tartalom .wp-caption.alignleft,
	.tartalom .wp-caption.alignright {
		float: none;
		display: block;
		max-width: 100%;
		margin-inline: 0;
		margin-bottom: var(--ter-s);
	}
}

/* Cikk elején és végén egységes hívás-blokk */
.cikk-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ter-s);
	padding: var(--ter-m);
	margin-block: var(--ter-m);
	background: var(--huvos-feher);
	border: 1px solid var(--vonal);
	border-left: 4px solid var(--sarga);
	border-radius: var(--kerek-m);
}

.cikk-cta p {
	margin: 0;
	max-width: 34rem;
}

.cikk-cta strong {
	display: block;
	font-family: var(--font-cim);
	font-size: 1.1rem;
}

/* Cikklista */
.cikk-lista {
	display: grid;
	gap: var(--ter-s);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.cikk-kartya {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--feher);
	border: 1px solid var(--vonal-halvany);
	border-radius: var(--kerek-l);
	box-shadow: var(--arnyek-s);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cikk-kartya:hover,
.cikk-kartya:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--arnyek-m);
	border-color: var(--vilagoskek);
}

/* A cím linkje kiterül az egész csempére – így bárhova kattintva megnyílik. */
.cikk-kartya__test h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Ha a cikkhez nincs kiemelt kép, ne üres szürke folt maradjon. */
.cikk-kartya__kep--ures {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(135deg, rgba(29, 78, 137, .06) 0 10px, transparent 10px 20px),
		linear-gradient(160deg, var(--huvos-feher), #dde5f0);
	color: var(--acelkek);
}

.cikk-kartya__kep--ures svg {
	width: 3.25rem;
	height: 3.25rem;
	opacity: .55;
	stroke-width: 1.3;
}

/* „Megnézem" – gombnak látszik, de a kártyalink viszi a kattintást. */
.cikk-kartya__gomb {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: var(--ter-s);
	font-family: var(--font-cim);
	font-weight: 700;
	font-size: .95rem;
	color: var(--acelkek);
}

.cikk-kartya__gomb svg {
	width: 1.1em;
	height: 1.1em;
	transition: transform .18s ease;
}

.cikk-kartya:hover .cikk-kartya__gomb svg {
	transform: translateX(4px);
}

.cikk-kartya__kep {
	aspect-ratio: 16 / 9;
	background: var(--huvos-feher);
	overflow: hidden;
}

.cikk-kartya__kep img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cikk-kartya__test {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--ter-s) var(--ter-m) var(--ter-m);
}

.cikk-kartya__test h3 {
	font-size: 1.12rem;
	margin-bottom: .4rem;
}

.cikk-kartya__test h3 a {
	text-decoration: none;
	color: inherit;
}

.cikk-kartya__test p {
	color: var(--szoveg-halvany);
	font-size: .97rem;
}

/* Lapozó */
.lapozo {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-top: var(--ter-l);
}

.lapozo .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .7rem;
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: var(--kerek-m);
	font-family: var(--font-cim);
	font-weight: 600;
	text-decoration: none;
	color: var(--ejkek);
}

.lapozo .page-numbers.current {
	background: var(--ejkek);
	border-color: var(--ejkek);
	color: var(--feher);
}

.lapozo a.page-numbers:hover {
	border-color: var(--acelkek);
	color: var(--acelkek);
}

/* ---------------------------------------------------------
   Kereső
   --------------------------------------------------------- */

.kereso {
	max-width: 40rem;
}

.kereso__mezo {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .4rem .4rem .4rem 1rem;
	background: var(--feher);
	border: 1px solid var(--vonal);
	border-radius: 999px;
	box-shadow: var(--arnyek-s);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.kereso__mezo:focus-within {
	border-color: var(--acelkek);
	box-shadow: 0 0 0 3px rgba(29, 78, 137, .14), var(--arnyek-s);
}

.kereso__mezo > svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--vilagoskek);
}

.kereso__mezo input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
}

.kereso__mezo input[type="search"]:focus {
	outline: none;
	box-shadow: none;
}

.kereso__mezo input::-webkit-search-cancel-button {
	cursor: pointer;
}

.kereso__gomb {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex: none;
	padding: .7rem 1.35rem;
	background: var(--ejkek);
	color: var(--feher);
	border: 0;
	border-radius: 999px;
	font-family: var(--font-cim);
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .15s ease;
}

.kereso__gomb:hover,
.kereso__gomb:focus-visible {
	background: var(--acelkek);
}

.kereso__gomb svg {
	width: 1.05em;
	height: 1.05em;
}

@media (max-width: 30rem) {
	.kereso__gomb span {
		display: none;
	}

	.kereso__gomb {
		padding: .7rem .85rem;
	}
}

/* Sötét sávon is működjön */
.szekcio--sotet .kereso__mezo,
.dolt-sav .kereso__mezo {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .28);
}

.szekcio--sotet .kereso__mezo input,
.dolt-sav .kereso__mezo input {
	color: var(--feher);
}

.szekcio--sotet .kereso__mezo input::placeholder,
.dolt-sav .kereso__mezo input::placeholder {
	color: rgba(255, 255, 255, .65);
}

.szekcio--sotet .kereso__gomb,
.dolt-sav .kereso__gomb {
	background: var(--sarga);
	color: var(--szoveg);
}

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

.lablec {
	background: var(--ejkek);
	color: rgba(255, 255, 255, .78);
	padding-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

.lablec h2,
.lablec h3 {
	color: var(--feher);
	font-size: 1.05rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: var(--ter-s);
}

.lablec a {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.lablec a:hover,
.lablec a:focus-visible {
	color: var(--sarga);
	text-decoration: underline;
}

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

.lablec li + li {
	margin-top: .5rem;
}

.lablec-racs {
	display: grid;
	gap: var(--ter-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	padding-bottom: var(--ter-l);
}

.lablec-brand strong {
	display: block;
	font-family: var(--font-cim);
	font-size: 1.2rem;
	color: var(--feher);
	margin-bottom: .4rem;
}

.lablec-kapcsolat {
	display: grid;
	gap: .6rem;
}

.lablec-kapcsolat a,
.lablec-kapcsolat span {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
}

.lablec-kapcsolat svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	color: var(--sarga);
	margin-top: .2rem;
}

.lablec-alja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem var(--ter-m);
	padding-block: var(--ter-s);
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .9rem;
}

.lablec-alja ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
}

.lablec-alja li + li {
	margin-top: 0;
}

/* Süti-beállítások: gomb, de a lábléc linkjeinek látszatával – a bővítmény
   lebegő buborékja helyett ez nyitja a beállításokat. */
.lablec-suti {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
}

.lablec-suti:hover,
.lablec-suti:focus-visible {
	color: var(--sarga);
	text-decoration: underline;
}

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

.hiba404 {
	text-align: center;
	padding-block: var(--ter-xl);
}

.hiba404__szam {
	font-family: var(--font-cim);
	font-size: clamp(4rem, 2rem + 12vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--huvos-feher);
	margin-bottom: var(--ter-s);
}