/* =========================================================================
   Bizzo Casino HU — stylesheet
   Rendszer: TYPO-05 (display-heavy) · SPACE-08 (5/10 lépcső) · CONT-03
   · BP-02 · GEO-09 (üveg) · NAME-05 · desktop-first
   ========================================================================= */

/* ---- 1. Betűkészlet: saját kiszolgálás, külső CDN nélkül ---------------- */

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url('/look/glyphs/pp-latin-ext-400.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url('/look/glyphs/pp-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: url('/look/glyphs/pp-latin-ext-500.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: url('/look/glyphs/pp-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url('/look/glyphs/pp-latin-ext-600.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url('/look/glyphs/pp-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	src: url('/look/glyphs/pp-latin-ext-700.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	src: url('/look/glyphs/pp-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 2. Tervezői jelkészlet (:root) ------------------------------------ */

:root {
	/* szín — az összetolt (.final) értékek a specifikációból */
	--main: #fdd611;
	--vivid: #fdbe05;
	--action-down: #d3a200;
	--back: #27102e;
	--card: #341a3d;
	--text: #ffffff;
	--muted: #bebebe;
	--divider: #4a3253;
	--edge-hard: #6b4d76;
	--gradient-light: #200f28;
	--grad-2: #3d2a47;
	--caution: #c1272d;

	/* betű */
	--display: 'Poppins', Arial, sans-serif;
	--body: 'Poppins', Arial, sans-serif;
	--display-1: clamp(30px, 5.1vw, 72px);
	--display-2: clamp(24px, 3.2vw, 44px);
	--display-3: clamp(20px, 2.1vw, 28px);
	--sub-2: 20px;
	--sm-2: 16px;
	--h6: 14px;
	--normal: 18px;
	--fine: 15px;
	--xs: 12px;
	--compact: 1.12;
	--base: 1.5;
	--roomy: 1.7;
	--w-normal: 400;
	--semi: 500;
	--strong: 700;
	--close: -0.02em;
	--e-base: 0;
	--open: 0.14em;

	/* térköz — SPACE-08 */
	--g-2xs: 5px;
	--g-xs: 10px;
	--g-sm: 15px;
	--g-md: 25px;
	--g-lg: 40px;
	--g-xl: 60px;
	--g-2xl: 90px;
	--g-3xl: 140px;
	--sec-y: 40px;

	/* forma — GEO-09 üveg */
	--r-2xs: 2px;
	--r-xs: 2px;
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--lozenge: 9999px;
	--round-full: 50%;
	--d-xs: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	--d-sm: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	--d-md: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	--d-lg: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--slim: 1px;
	--mid: 2px;
	--thick: 3px;

	/* mozgás — a specifikáció számai, kerekítés nélkül */
	--short: 173ms;
	--t-normal: 300ms;
	--easy: 607ms;
	--out: cubic-bezier(0.12, 0.65, 0.55, 0.93);
	--in: cubic-bezier(0.45, 0.04, 0.44, 1);
	--swing: cubic-bezier(0.45, 0.04, 0.44, 1);
	--overshoot: cubic-bezier(0.33, 1.1, 0.73, 1.35);

	/* keret */
	--page: 1400px;
	--prose: 1400px;
	--nook: 470px;
	--padding-desktop: 24px;
	--edge-mid: 32px;
	--edge-narrow: 16px;
	--lane: calc(var(--page) + 2 * var(--padding-desktop));
	--tall: 64px;
	--size-mobile: 60px;
	--head-h: 106px;
}

/* ---- 3. Mobil felülírások (desktop-first: a kisebb képernyő írja felül) - */

@media (max-width: 820px) {
	:root {
		--display-1: clamp(29px, 8.2vw, 40px);
		--display-2: clamp(23px, 6vw, 30px);
		--display-3: 22px;
		--sub-2: 18px;
		--sm-2: 14px;
		--h6: 12px;
		--normal: 17px;
		--fine: 14px;
		--xs: 11px;
		--sec-y: 32px;
		--padding-desktop: 16px;
	}
}

/* ---- 4. Alapozás ------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--head-h) + 12px);
	-webkit-text-size-adjust: 100%;
}

html,
body {
	overflow-x: clip;
}

body {
	background: var(--back);
	color: var(--text);
	display: flex;
	flex-direction: column;
	font-family: var(--body);
	font-size: var(--normal);
	font-weight: var(--w-normal);
	line-height: var(--base);
	margin: 0;
	min-height: 100vh;
}

.slab {
	flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--display);
	letter-spacing: var(--close);
	line-height: var(--compact);
	margin: 0;
	overflow-wrap: anywhere;
}

p {
	margin: 0;
}

img {
	max-width: 100%;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* ---- 5. Akadálymentesség ---------------------------------------------- */

.skipLane {
	background: var(--vivid);
	color: var(--back);
	font-weight: var(--strong);
	left: 12px;
	padding: 10px 18px;
	position: fixed;
	border-radius: var(--r-sm);
	text-decoration: none;
	top: 12px;
	z-index: 400;
}

.skipLane:not(:focus) {
	top: -200px !important;
}

.sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---- 6. Felelős játék csík (RG-01) ------------------------------------- */

.warnbar {
	background: var(--caution);
	color: #ffffff;
	display: block;
	font-size: var(--xs);
	letter-spacing: 0.03em;
	line-height: 1.35;
	padding: 7px var(--padding-desktop);
	text-align: center;
}

.warnbar-mark {
	align-items: center;
	background: #ffffff;
	border-radius: var(--r-2xs);
	color: var(--caution);
	display: inline-flex;
	font-weight: var(--strong);
	justify-content: center;
	margin-inline-end: 8px;
	min-height: 18px;
	padding: 0 5px;
	vertical-align: middle;
}

.warnbar-jump {
	background: var(--caution);
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.warnbar-jump:hover {
	background: var(--caution);
	color: #ffffff;
	text-decoration-thickness: 2px;
}

/* ---- 7. Fejléc — HEAD-SUBNAV (fő sor + alatta szakaszsáv) -------------- */

.mara {
	background: var(--back);
	position: sticky;
	top: 0;
	transition: box-shadow var(--t-normal) var(--out);
	z-index: 120;
}

.mara.is-shrunk {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
}

.mara-lane {
	align-items: center;
	background: var(--back);
	display: flex;
	gap: var(--g-sm);
	height: 64px;
	margin-inline: auto;
	max-width: var(--lane);
	padding-inline: var(--padding-desktop);
	transition: height var(--t-normal) var(--out);
	width: 100%;
}

.mara.is-shrunk .mara-lane {
	height: 56px;
}

.mara-brand {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	margin-inline-end: auto;
	text-decoration: none;
}

.mara-shot {
	display: block;
	flex-shrink: 0;
	height: 56px;
	transition: height var(--t-normal) var(--out);
	width: auto;
}

.mara.is-shrunk .mara-shot {
	height: 48px;
}

.mara-flag {
	background: linear-gradient(#ce2b37 33.33%, #f4f4f4 33.33% 66.66%, #3a7d44 66.66%);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-2xs);
	display: inline-block;
	flex-shrink: 0;
	height: 15px;
	width: 22px;
}

.mara-tools {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: var(--g-sm);
}

.mara-offer {
	flex-shrink: 0;
	white-space: nowrap;
}

.mara-menu-opener {
	align-items: center;
	background: var(--grad-2);
	border: 0;
	border-radius: var(--r-sm);
	color: var(--text);
	cursor: pointer;
	display: none;
	flex-shrink: 0;
	gap: 4px;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 12px;
}

.mara-lines {
	background: var(--text);
	border-radius: var(--round-full);
	display: block;
	height: 5px;
	position: relative;
	width: 5px;
}

.mara-lines::before,
.mara-lines::after {
	background: var(--text);
	border-radius: var(--round-full);
	content: '';
	height: 5px;
	position: absolute;
	top: 0;
	width: 5px;
}

.mara-lines::before {
	left: -9px;
}

.mara-lines::after {
	left: 9px;
}

/* alsó sáv: a szakaszok sora, priority+ elrendezéssel */
.mara-strip {
	background: var(--gradient-light);
	width: 100%;
}

.mara-routes {
	margin-inline: auto;
	max-width: var(--lane);
	padding-inline: var(--padding-desktop);
	width: 100%;
}

.mara-queue {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--g-sm);
	list-style: none;
	min-height: 42px;
}

.mara-node {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: var(--g-sm);
}

.mara-node[hidden] {
	display: none;
}

.mara-node + .mara-node::before {
	color: var(--edge-hard);
	content: '/';
	font-size: var(--h6);
}

.mara-jump {
	background: var(--gradient-light);
	color: var(--text);
	display: inline-block;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 500;
	padding: 10px 2px;
	text-decoration: none;
	transition: color var(--short) var(--out), transform var(--short) var(--out);
	white-space: nowrap;
}

.mara-jump:hover {
	background: var(--gradient-light);
	color: var(--vivid);
	transform: translateY(-2px);
}

.mara-jump[aria-current='page'] {
	background: var(--gradient-light);
	color: var(--main);
	text-decoration: underline;
	text-decoration-color: var(--main);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.mara-nodeMore {
	flex-shrink: 0;
	position: relative;
}

.mara-nodeMore[hidden] {
	display: none;
}

.mara-more-knob {
	align-items: center;
	background: var(--grad-2);
	border: 0;
	border-radius: var(--r-sm);
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	gap: 4px;
	justify-content: center;
	min-height: 32px;
	padding: 0 10px;
}

.mara-more-knob:hover {
	background: var(--edge-hard);
	color: var(--text);
}

.mara-dot {
	background: var(--text);
	border-radius: var(--round-full);
	display: block;
	height: 4px;
	width: 4px;
}

.mara-more-menu {
	background: var(--card);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-md);
	box-shadow: var(--d-md);
	display: none;
	inset-inline-end: 0;
	list-style: none;
	max-height: 62vh;
	min-width: 210px;
	overflow-y: auto;
	padding: var(--g-xs);
	position: absolute;
	top: calc(100% + 6px);
	z-index: 130;
}

.mara-more-menu.is-open {
	display: block;
}

.mara-more-menu .mara-jump {
	background: var(--card);
	display: block;
	padding: 10px 12px;
	white-space: normal;
}

.mara-more-menu .mara-jump:hover {
	background: var(--grad-2);
	color: var(--vivid);
	transform: none;
}

/* kihúzható mobil panel — teljes, lapos lista */
.mara-slide {
	background: var(--card);
	border-top: var(--slim) solid var(--divider);
	display: none;
	max-height: 74vh;
	overflow-y: auto;
	padding: var(--g-xs) var(--padding-desktop) var(--g-md);
}

.mara-slide.is-open {
	display: block;
}

.mara-shelf {
	list-style: none;
}

.mara-cell {
	border-bottom: var(--slim) solid var(--divider);
}

.mara-cell .mara-jump {
	background: var(--card);
	display: block;
	font-size: var(--sm-2);
	padding: 13px 0;
	white-space: normal;
}

.mara-cell .mara-jump:hover {
	background: var(--card);
	transform: none;
}

@media (max-width: 900px) {
	.mara-menu-opener {
		display: inline-flex;
	}

	.mara-strip {
		display: none;
	}
}

@media (max-width: 620px) {
	.mara-lane {
		flex-wrap: wrap;
		height: auto;
		min-height: 60px;
		padding-block: 8px;
	}

	.mara.is-shrunk .mara-lane {
		height: auto;
	}

	.mara-shot {
		height: 44px;
	}

	.mara.is-shrunk .mara-shot {
		height: 44px;
	}

	.mara-tools {
		flex-basis: 100%;
		justify-content: stretch;
		order: 3;
	}

	.mara-offer {
		flex: 1 1 auto;
	}
}

/* ---- 8. Szakasz-keret: egy szélesség az egész oldalon ------------------ */

.misalet-shell,
.ximutos-shell,
.bydarix-shell,
.ginok-shell,
.zolo-shell,
.pepixab-shell,
.pypa-shell,
.zoxysu-shell,
.pysytek-shell,
.gysonyt-shell,
.puda-shell,
.nelymuv-shell {
	margin-inline: auto;
	max-width: var(--lane);
	padding-inline: var(--padding-desktop);
	width: 100%;
}

.plate {
	margin: 0 auto;
	max-width: var(--lane);
	padding: var(--g-sm) var(--padding-desktop);
}

.plate img {
	border-radius: var(--r-lg);
	box-shadow: var(--d-sm);
	display: block;
	height: auto;
	max-height: 56vh;
	object-fit: cover;
	width: 100%;
}

/* ---- 9. Első képernyő — HERO-03 (középre zárt, tömör) ------------------ */

.misalet {
	background: var(--back);
	overflow: hidden;
	padding-block: var(--g-xl);
	position: relative;
	text-align: center;
}

.misalet-art::before {
	background: url('/look/artwork.webp') center / cover no-repeat;
	content: '';
	inset: 0;
	opacity: 0.24;
	pointer-events: none;
	position: absolute;
}

.misalet-shell {
	position: relative;
}

.misalet-eyebrow {
	color: var(--main);
	display: block;
	font-size: var(--xs);
	font-weight: var(--semi);
	letter-spacing: var(--open);
	margin-bottom: var(--g-sm);
	text-transform: uppercase;
}

.misalet-hdr {
	color: var(--text);
	font-size: var(--display-1);
	font-weight: var(--strong);
	margin-inline: auto;
	max-width: 18ch;
}

.misalet-kicker {
	color: var(--muted);
	font-size: var(--normal);
	line-height: var(--roomy);
	margin-block: var(--g-md);
	margin-inline: auto;
	max-width: var(--nook);
}

.misalet-offer {
	margin-block: var(--g-xs) var(--g-sm);
}

.misalet-fine {
	color: var(--muted);
	display: block;
	font-size: var(--xs);
	margin-inline: auto;
	max-width: var(--nook);
}

/* ---- 10. Oldalfej — PHEAD-05 (morzsasor + cím) ------------------------- */

.zoxysu {
	background: var(--gradient-light);
	padding-block: var(--sec-y);
}

.zoxysu-crumbs {
	color: var(--muted);
	font-size: var(--xs);
	letter-spacing: var(--open);
	margin-bottom: var(--g-sm);
	text-transform: uppercase;
}

.zoxysu-crumbs a {
	background: var(--gradient-light);
	color: var(--vivid);
	text-decoration: none;
}

.zoxysu-crumbs a:hover {
	background: var(--gradient-light);
	color: var(--main);
	text-decoration: underline;
}

.zoxysu-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--strong);
}

.zoxysu-blurb {
	color: var(--muted);
	margin-top: var(--g-sm);
}

/* ---- 11. Szövegtörzs — PROSE-22 (bekezdés behúzása) -------------------- */

.ximutos {
	background: var(--back);
	padding-block: var(--sec-y);
}

.ximutos-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--w-normal);
	margin-block-start: 0;
	margin-block-end: var(--g-sm);
}

.ximutos-blurb {
	color: var(--muted);
	line-height: var(--roomy);
	margin: 0;
}

.ximutos-blurb + .ximutos-blurb {
	text-indent: var(--g-lg);
}

.ximutos-queue {
	color: var(--muted);
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
	line-height: var(--roomy);
	margin-block: var(--g-sm);
	padding-inline-start: var(--g-md);
}

.ximutos-queue li {
	padding-inline-start: var(--g-2xs);
}

.ximutos-queue li::marker {
	color: var(--vivid);
}

.ximutos strong {
	color: var(--text);
	font-weight: var(--semi);
}

.ximutos-jump {
	background: var(--back);
	color: var(--vivid);
	text-decoration: none;
	background-image: linear-gradient(var(--vivid), var(--vivid));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: background-size var(--short) var(--out);
}

.ximutos-jump:hover {
	background-color: var(--back);
	color: var(--main);
	background-image: linear-gradient(var(--main), var(--main));
	background-size: 100% 2px;
}

/* köztes ajánlat-sáv a hosszú szöveg közepén */
.midcall {
	margin: 0 auto;
	max-width: var(--lane);
	padding: var(--g-sm) var(--padding-desktop) var(--g-md);
	text-align: center;
}

.midcall-offer {
	max-width: 100%;
}

.midcall-fine {
	color: var(--muted);
	display: block;
	font-size: var(--xs);
	margin-top: var(--g-xs);
}

/* ---- 12. Kártyarács — GRID-01 (három hasáb, keretes kártyák) ----------- */

.bydarix {
	background: var(--back);
	padding-block: var(--sec-y);
}

.bydarix-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--strong);
	margin-block-end: var(--g-md);
}

.bydarix-queue {
	display: grid;
	gap: var(--g-lg);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
}

.bydarix-cell {
	background: var(--card);
	border: var(--slim) solid var(--divider);
	border-radius: var(--r-md);
	padding: var(--g-md);
	transition: border-color var(--t-normal) var(--out);
}

.bydarix-cell:hover {
	border-color: var(--vivid);
}

.bydarix-glyph {
	align-items: center;
	background: var(--grad-2);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-sm);
	color: var(--main);
	display: inline-flex;
	height: 38px;
	justify-content: center;
	margin-bottom: var(--g-sm);
	width: 38px;
}

.bydarix-glyph svg {
	fill: currentColor;
	height: 21px;
	width: 21px;
}

.bydarix-cap {
	color: var(--text);
	font-size: var(--sub-2);
	font-weight: var(--strong);
	margin-bottom: var(--g-xs);
}

.bydarix-text {
	color: var(--muted);
	font-size: var(--fine);
	line-height: var(--base);
}

/* ---- 13. Adatlap — TABLE-08 (lebegő kártyák, <table> nélkül) ----------- */

.ginok {
	background: var(--back);
	padding-block: var(--sec-y);
}

.ginok-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--strong);
	margin-block-end: var(--g-md);
}

.ginok-queue {
	display: grid;
	gap: var(--g-md);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
}

.ginok-tile {
	background: var(--card);
	border: var(--slim) solid var(--divider);
	border-radius: var(--r-md);
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
	padding: var(--g-md);
}

.ginok-entry {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ginok-cap {
	color: var(--muted);
	font-size: var(--xs);
	letter-spacing: var(--open);
	text-transform: uppercase;
}

.ginok-val {
	color: var(--text);
	font-size: var(--normal);
	font-weight: var(--semi);
}

/* ---- 14. Kérdések — FAQ-10 (ragadó bal hasáb + lista) ------------------ */

.zolo {
	background: var(--back);
	padding-block: var(--sec-y);
}

.zolo-shell {
	display: grid;
	gap: var(--g-lg);
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}

.zolo-aside {
	align-self: start;
	padding: var(--g-md) 0;
	position: sticky;
	top: calc(var(--head-h) + 16px);
}

.zolo-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--strong);
}

.zolo-blurb {
	color: var(--muted);
	font-size: var(--fine);
	margin-top: var(--g-sm);
}

.zolo-queue {
	display: flex;
	flex-direction: column;
	gap: var(--g-md);
	list-style: none;
}

.zolo-cell {
	background: var(--card);
	border: var(--slim) solid var(--divider);
	border-radius: var(--r-md);
	padding: var(--g-sm) var(--g-md);
}

.zolo-knob {
	align-items: start;
	cursor: pointer;
	display: grid;
	gap: var(--g-sm);
	grid-template-columns: minmax(0, 1fr) 22px;
	list-style: none;
	padding-block: var(--g-xs);
}

.zolo-knob::-webkit-details-marker {
	display: none;
}

.zolo-cap {
	color: var(--text);
	font-size: var(--sub-2);
	font-weight: var(--semi);
}

.zolo-sign {
	background: var(--grad-2);
	border-radius: var(--round-full);
	color: var(--main);
	display: block;
	height: 22px;
	line-height: 20px;
	position: relative;
	text-align: center;
	transition: transform var(--t-normal) var(--swing);
	width: 22px;
}

.zolo-sign::before {
	content: '+';
	font-size: 16px;
}

.zolo-cell[open] .zolo-sign {
	transform: rotate(135deg);
}

.zolo-fill {
	color: var(--muted);
	line-height: var(--roomy);
	padding-block: var(--g-xs) var(--g-sm);
}

/* ---- 15. Vélemények — REV-10 (halk, aláhúzott sorok) ------------------- */

.pepixab {
	background: var(--back);
	padding-block: var(--sec-y);
}

.pepixab-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--strong);
	margin-block-end: var(--g-md);
}

.pepixab-queue {
	list-style: none;
}

.pepixab-cell {
	border-bottom: var(--slim) dotted var(--edge-hard);
	padding-block: var(--g-md);
}

.pepixab-file {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pepixab-who {
	color: var(--text);
	font-size: var(--normal);
	font-weight: var(--semi);
}

.pepixab-score {
	color: var(--main);
	font-size: var(--fine);
}

.pepixab-posted {
	color: var(--muted);
	font-size: var(--fine);
}

.pepixab-text {
	color: var(--muted);
	line-height: var(--roomy);
	margin: var(--g-xs) 0 0;
}

/* ---- 16. Ajánlatsáv — CTA-04 (halk, középre zárt) ---------------------- */

.pypa {
	background: var(--gradient-light);
	padding-block: var(--sec-y);
	text-align: center;
}

.pypa-hdr {
	color: var(--text);
	font-size: var(--display-3);
	font-weight: var(--strong);
}

.pypa-blurb {
	color: var(--muted);
	line-height: var(--roomy);
	margin-block: var(--g-sm) var(--g-md);
	margin-inline: auto;
	max-width: var(--nook);
}

.pypa-offer {
	max-width: 100%;
}

.pypa-fine {
	color: var(--muted);
	display: block;
	font-size: var(--xs);
	margin-top: var(--g-sm);
}

/* ---- 17. Jogi szöveg — LEGAL-04 (keretes doboz) ------------------------ */

.pysytek {
	background: var(--back);
	padding-block: var(--sec-y);
}

.pysytek-box {
	background: var(--card);
	border: var(--slim) solid var(--divider);
	border-radius: var(--r-lg);
	box-shadow: var(--d-sm);
	padding: var(--g-lg);
	position: relative;
}

.pysytek-posted {
	color: var(--muted);
	display: block;
	font-size: var(--xs);
	margin-bottom: var(--g-sm);
	text-align: right;
}

.pysytek-lede {
	color: var(--text);
	line-height: var(--roomy);
}

.pysytek-part {
	margin-top: var(--g-md);
}

.pysytek-hdr {
	color: var(--text);
	font-size: var(--display-3);
	font-weight: var(--semi);
	margin-block-start: var(--g-md);
	margin-block-end: var(--g-xs);
}

.pysytek-blurb {
	color: var(--muted);
	line-height: var(--roomy);
	margin-top: var(--g-xs);
}

.pysytek-queue {
	color: var(--muted);
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
	line-height: var(--roomy);
	margin-top: var(--g-xs);
	padding-inline-start: var(--g-md);
}

.pysytek-queue li::marker {
	color: var(--vivid);
}

.pysytek-note {
	border-top: var(--slim) solid var(--divider);
	color: var(--muted);
	font-size: var(--fine);
	line-height: var(--roomy);
	margin-top: var(--g-md);
	padding-top: var(--g-sm);
}

/* ---- 18. Kapcsolati űrlap — FORM-02 (két hasáb) ------------------------ */

.gysonyt {
	background: var(--back);
	padding-block: var(--sec-y);
}

.gysonyt-shell {
	display: grid;
	gap: var(--g-lg);
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.gysonyt-col {
	background: var(--card);
	border-radius: var(--r-md);
	padding: var(--g-md);
}

.gysonyt-hdr {
	color: var(--text);
	font-size: var(--display-3);
	font-weight: var(--strong);
	margin-bottom: var(--g-sm);
}

.gysonyt-blurb {
	color: var(--muted);
	line-height: var(--roomy);
}

.gysonyt-queue {
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
	list-style: none;
	margin-top: var(--g-md);
}

.gysonyt-queue li {
	color: var(--muted);
	font-size: var(--fine);
}

.gysonyt-queue a {
	background: var(--card);
	color: var(--vivid);
	text-decoration: none;
}

.gysonyt-queue a:hover {
	background: var(--card);
	color: var(--main);
	text-decoration: underline;
}

.gysonyt-quiz {
	display: flex;
	flex-direction: column;
	gap: var(--g-sm);
}

.gysonyt-entry {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 6px;
}

.gysonyt-cap {
	color: var(--text);
	font-size: var(--fine);
	font-weight: var(--semi);
}

.gysonyt-entry input,
.gysonyt-entry textarea {
	background: var(--gradient-light);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-sm);
	color: var(--text);
	font-family: var(--body);
	font-size: var(--fine);
	min-height: 46px;
	padding: 11px 14px;
	width: 100%;
}

.gysonyt-entry textarea {
	min-height: 140px;
	resize: vertical;
}

.gysonyt-send {
	align-self: flex-start;
	background: var(--vivid);
	border: 0;
	border-radius: var(--r-md);
	color: var(--back);
	cursor: pointer;
	font-family: var(--display);
	font-size: var(--fine);
	font-weight: var(--strong);
	letter-spacing: var(--open);
	min-height: 48px;
	padding-inline: var(--g-md);
	text-transform: uppercase;
}

.gysonyt-send:hover {
	background: var(--action-down);
	color: var(--back);
}

.gysonyt-done {
	background: #14361f;
	border: var(--slim) solid #2f7d4a;
	border-radius: var(--r-sm);
	color: var(--text);
	display: none;
	font-size: var(--fine);
	padding: var(--g-sm);
}

.gysonyt-done.is-open {
	display: block;
}

/* ---- 19. Szerzői aláírás — BYLINE-04 (idézetes) ------------------------ */

.zomovof {
	background: var(--back);
	padding-block: var(--sec-y);
}

.zomovof-quote {
	margin: 0 auto;
	max-width: 640px;
	position: relative;
	text-align: center;
}

.zomovof-quote p {
	color: var(--text);
	font-family: var(--display);
	font-size: var(--sub-2);
	font-style: italic;
	line-height: var(--base);
}

.zomovof-credit {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-xs);
	justify-content: center;
	margin-top: var(--g-sm);
}

.zomovof-face {
	border: var(--mid) solid var(--edge-hard);
	border-radius: var(--round-full);
	flex-shrink: 0;
	height: 40px;
	object-fit: cover;
	width: 40px;
}

.zomovof-who {
	font-style: normal;
	font-weight: var(--strong);
}

.zomovof-who a {
	background: var(--back);
	color: var(--vivid);
	text-decoration: none;
}

.zomovof-who a:hover {
	background: var(--back);
	color: var(--main);
	text-decoration: underline;
}

.zomovof-job {
	color: var(--muted);
	font-size: var(--fine);
	font-style: italic;
}

.zomovof-tag {
	color: var(--muted);
	display: block;
	flex-basis: 100%;
	font-size: var(--xs);
}

/* ---- 20. Szerzői kártya — AUTH-05 (tömör, soros) ----------------------- */

.puda {
	background: var(--back);
	padding-block: var(--sec-y);
}

.puda-tile {
	background: var(--card);
	border-radius: var(--r-md);
	display: flex;
	gap: var(--g-sm);
	max-width: 480px;
	padding: var(--g-md);
}

.puda-face {
	border-radius: var(--round-full);
	flex-shrink: 0;
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.puda-fill {
	display: flex;
	flex-direction: column;
	gap: var(--g-2xs);
}

.puda-job {
	color: var(--main);
	font-size: var(--xs);
	letter-spacing: var(--open);
	text-transform: uppercase;
}

.puda-who {
	color: var(--text);
	font-size: var(--normal);
	font-weight: var(--strong);
}

.puda-blurb {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--muted);
	display: -webkit-box;
	font-size: var(--fine);
	overflow: hidden;
}

.puda-articles {
	margin-top: var(--g-md);
}

.puda-artHdr {
	color: var(--text);
	font-size: var(--display-3);
	font-weight: var(--strong);
	margin-block-end: var(--g-sm);
}

.puda-queue {
	display: grid;
	gap: var(--g-xs);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
}

.puda-cell {
	background: var(--card);
	border: var(--slim) solid var(--divider);
	border-radius: var(--r-sm);
	padding: var(--g-sm);
}

.puda-cell a {
	background: var(--card);
	color: var(--vivid);
	text-decoration: none;
}

.puda-cell a:hover {
	background: var(--card);
	color: var(--main);
	text-decoration: underline;
}

.puda-star {
	color: var(--main);
	font-size: var(--xs);
}

/* ---- 21. Hibaoldal — ERR-03 (drámázás nélkül) -------------------------- */

.nelymuv {
	background: var(--back);
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--sec-y);
	text-align: center;
}

.nelymuv-hdr {
	color: var(--text);
	font-size: var(--display-2);
	font-weight: var(--strong);
	margin-inline: auto;
	max-width: var(--nook);
}

.nelymuv-blurb {
	color: var(--muted);
	line-height: var(--roomy);
	margin-block: var(--g-sm) var(--g-md);
	margin-inline: auto;
	max-width: 600px;
}

.nelymuv-return {
	background: var(--vivid);
	border-radius: var(--r-md);
	color: var(--back);
	display: inline-flex;
	align-items: center;
	font-family: var(--display);
	font-size: var(--fine);
	font-weight: var(--strong);
	letter-spacing: var(--open);
	min-height: 44px;
	padding-inline: var(--g-md);
	text-decoration: none;
	text-transform: uppercase;
}

.nelymuv-return:hover {
	background: var(--action-down);
	color: var(--back);
}

/* ---- 22. Lábléc — FOOT-06 (kiáltvány) ---------------------------------- */

.vido {
	background: var(--gradient-light);
	padding-block: var(--g-xl);
}

.vido-band {
	margin-inline: auto;
	max-width: var(--lane);
	padding-inline: var(--padding-desktop);
	width: 100%;
}

.vido-creed {
	margin-inline: auto;
	max-width: var(--nook);
	text-align: center;
}

.vido-cry {
	color: var(--text);
	font-family: var(--display);
	font-size: var(--display-2);
	font-weight: var(--strong);
}

.vido-return {
	background: var(--gradient-light);
	color: var(--vivid);
	display: inline-block;
	font-family: var(--display);
	font-size: var(--sm-2);
	letter-spacing: var(--open);
	margin-top: var(--g-sm);
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 5px;
}

.vido-return:hover {
	background: var(--gradient-light);
	color: var(--main);
}

.vido-rule {
	background: var(--divider);
	height: 1px;
	margin-block: var(--g-lg);
}

.vido-tag {
	align-items: start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-md);
	justify-content: space-between;
}

.vido-brand {
	display: inline-block;
	flex-shrink: 0;
}

.vido-shot {
	display: block;
	height: 62px;
	width: auto;
}

.vido-routes,
.vido-lawful {
	flex: 1 1 220px;
}

.vido-queue {
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
	list-style: none;
}

.vido-hdr {
	color: var(--text);
	font-family: var(--display);
	font-size: var(--h6);
	font-weight: var(--strong);
	letter-spacing: var(--open);
	margin-bottom: var(--g-xs);
	text-transform: uppercase;
}

.vido-jump {
	background: var(--gradient-light);
	color: var(--muted);
	font-size: var(--fine);
	text-decoration: none;
}

.vido-jump:hover {
	background: var(--gradient-light);
	color: var(--vivid);
	text-decoration: underline;
}

.vido-fine {
	color: var(--muted);
	display: block;
	flex-basis: 100%;
	font-size: var(--xs);
	padding-top: var(--g-sm);
}

/* ---- 23. Süti sáv — COOK-14 (kétsoros, beállítás-hivatkozással) -------- */

.neralun {
	background: var(--card);
	border-top: var(--mid) solid var(--vivid);
	bottom: 0;
	display: none;
	inset-inline: 0;
	position: fixed;
	transition: transform var(--easy) var(--out), visibility var(--easy) var(--out);
	z-index: 90;
}

.neralun.is-open {
	display: block;
}

.neralun.is-gone {
	pointer-events: none;
	transform: translateY(160%);
	visibility: hidden;
}

.neralun-fill {
	margin-inline: auto;
	max-width: var(--lane);
	padding: var(--g-sm) var(--padding-desktop);
}

.neralun-blurb {
	color: var(--muted);
	font-size: var(--fine);
	line-height: 1.4;
	padding-block: 4px;
}

.neralun-tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-sm);
	margin-top: var(--g-xs);
}

.neralun-yes,
.neralun-later,
.neralun-prefs {
	align-items: center;
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--display);
	font-size: var(--h6);
	font-weight: var(--semi);
	justify-content: center;
	min-height: 40px;
	padding-inline: var(--g-sm);
	text-decoration: none;
}

.neralun-yes {
	background: var(--vivid);
	color: var(--back);
}

.neralun-yes:hover {
	background: var(--action-down);
	color: var(--back);
}

.neralun-later {
	background: var(--grad-2);
	color: var(--text);
}

.neralun-later:hover {
	background: var(--edge-hard);
	color: var(--text);
}

.neralun-prefs {
	background: var(--grad-2);
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.neralun-prefs:hover {
	background: var(--edge-hard);
	color: var(--text);
}

/* ---- 24. Megjelenés görgetésre (reveal = rise) ------------------------- */

[data-onview] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity var(--easy) var(--out), transform var(--easy) var(--out);
}

[data-onview].is-open {
	opacity: 1;
	transform: none;
}

/* ---- 25. Szűkebb képernyők -------------------------------------------- */

@media (max-width: 1180px) {
	.bydarix-queue {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.zolo-shell,
	.gysonyt-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.zolo-aside {
		position: static;
	}

	.bydarix-queue {
		grid-template-columns: minmax(0, 1fr);
	}

	.vido-tag {
		gap: var(--g-md);
	}

	.pysytek-box {
		padding: var(--g-md);
	}

	.gysonyt-entry {
		flex: 0 0 auto;
	}

	.plate img {
		max-height: 46vh;
	}

	.misalet {
		padding-block: var(--g-lg);
	}
}

@media (max-width: 700px) {
	.neralun-fill {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.neralun-blurb {
		font-size: 13px;
		overflow: visible;
		white-space: normal;
	}

	.neralun-tools {
		width: 100%;
	}

	.neralun-yes,
	.neralun-later,
	.neralun-prefs {
		flex: 1 1 auto;
		font-size: 12px;
		min-height: 40px;
		white-space: normal;
	}
}

@media (max-width: 430px) {
	.neralun-tools {
		flex-direction: column;
	}

	.zomovof-tag {
		line-height: 1.6;
	}

	.vido-shot {
		height: 52px;
	}
}

/* ---- 26. Mozgásra érzékenyeknek --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}

	[data-onview] {
		opacity: 1;
		transform: none;
	}
}
/* Offer CTA */
.bcnn-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;border:2px solid #200F28;border-radius:999px;
  background:#4F46E5;color:#FFFFFF;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.bcnn-act:hover{background:#4338CA;color:#FFFFFF;animation:none}
.bcnn-act:hover::after{animation:none}
.bcnn-act:active{background:#3730A3;color:#FFFFFF}
.bcnn-act:focus-visible{outline:3px solid #200F28;outline-offset:3px}
.bcnn-act{animation:breathe_bcnn 4.2s linear infinite}
@keyframes breathe_bcnn{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.8,.35,1)}9.524%{transform:scale(1.07);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}28.571%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bcnn-act,.bcnn-act::after{animation:none!important;transition:none!important}}

@media (max-width: 927px) {
  .mara-strip,
  .mara-routes,
  .mara-queue,
  .mara-jump { display: none !important; }
  .mara-menu-opener { display: flex !important; }
}

@media (max-width: 927px) {
  #site-drawer .mara-jump { display: revert !important; }
}