@layer components {
.kalauz [hidden] {
display: none !important;
}
.kalauz > * { pointer-events: auto; }
.kalauz .kalauz__fel[hidden] { display: grid !important; visibility: hidden; }
@media (width < 64rem) {
.kalauz {
inset-block-end: calc(clamp(1rem, 3vw, 1.75rem) + var(--cookie-banner-h, 0px));
}
}
.kalauz {
position: fixed;
inset-block-end: clamp(1rem, 3vw, 1.75rem);
inset-inline-end: clamp(1rem, 3vw, 1.75rem);
pointer-events: none;
z-index: 60;
display: grid;
grid-template-columns: auto auto;
justify-content: end;
justify-items: end;
align-items: end;
gap: 0.75rem;
}
.kalauz__fel {
grid-column: 1;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--surface-1);
color: var(--text-muted);
box-shadow: 0 10px 22px -10px rgba(0, 46, 50, 0.35);
transition: color var(--transition), border-color var(--transition),
transform var(--transition), box-shadow var(--transition);
}
.kalauz__fel:hover {
color: var(--text);
border-color: var(--neon);
transform: translateY(-2px);
box-shadow: 0 14px 26px -10px rgba(0, 46, 50, 0.42);
}
.kalauz__fel .kalauz__ikon { width: 18px; height: 18px; }
.kalauz__fel path { stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
.kalauz.has-fel .kalauz__fel { animation: kalauzFel var(--dur-slow) var(--ease); }
}
@keyframes kalauzFel {
from { opacity: 0; transform: translateY(8px) scale(0.9); }
to   { opacity: 1; transform: none; }
}
.kalauz__gomb {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 50px;
padding-inline: 1.15rem 1.25rem;
padding-inline-start: 2.5rem;
border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
background: var(--brand-teal, #002E32);
color: #FFFFFF;
font-size: var(--step-0);
font-weight: 600;
box-shadow: 0 2px 4px -1px rgba(0, 46, 50, 0.30),
0 12px 28px -10px rgba(0, 46, 50, 0.45),
0 0 0 4px color-mix(in srgb, var(--neon) 8%, transparent);
transition: background var(--transition), box-shadow var(--transition),
transform var(--transition);
}
.kalauz__gomb:hover {
background: color-mix(in srgb, var(--brand-teal, #002E32) 88%, var(--neon));
transform: translateY(-2px);
box-shadow: 0 3px 6px -1px rgba(0, 46, 50, 0.32),
0 18px 34px -12px rgba(0, 46, 50, 0.5),
0 0 0 5px color-mix(in srgb, var(--neon) 14%, transparent);
}
.kalauz__jel {
position: absolute;
inset-inline-start: -1.5rem;
inset-block-start: 50%;
width: 3.6rem;
height: 3.6rem;
translate: 0 -50%;
rotate: -6deg;
filter: drop-shadow(0 4px 6px rgba(0, 20, 22, 0.45));
transition: rotate var(--transition), scale var(--transition);
}
.kalauz__gomb:hover .kalauz__jel { rotate: -2deg; scale: 1.06; }
.jel-lap    { fill: var(--neon); }
.jel-el     { fill: #0B3A3E; }
.jel-el--vilagos { fill: #14545A; }
.jel-racs   { stroke: #0B3A3E; stroke-width: 1.2; opacity: 0.55; }
.jel-csillam { fill: #FFFFFF; opacity: 0.34; }
.jel-arnyek { fill: #000000; opacity: 0.22; }
.kalauz.is-open .kalauz__gomb { opacity: 0.55; }
.kalauz__panel {
grid-column: 1 / -1;
justify-self: stretch;
--kalauz-text: var(--step--1);
width: min(25rem, calc(100vw - 2rem));
max-height: min(34rem, calc(100dvh - 8rem));
display: flex;
flex-direction: column;
border: 1px solid var(--line-strong);
border-radius: var(--radius-l);
background: var(--surface-1);
box-shadow: 0 28px 56px -20px rgba(0, 46, 50, 0.38),
0 2px 8px -2px rgba(0, 46, 50, 0.16);
overflow: hidden;
}
.kalauz__fej {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.1rem 0.85rem;
border-block-end: 1px solid var(--line);
}
.kalauz__cim {
font-family: var(--font-heading);
font-size: var(--step-1);
font-weight: 600;
color: var(--text);
}
.kalauz__alcim {
margin-block-start: 0.15rem;
color: var(--text-muted);
font-size: var(--kalauz-text);
}
.kalauz__bezar {
flex: none;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-control);
color: var(--text-subtle);
transition: color var(--transition), background var(--transition);
}
.kalauz__bezar:hover { color: var(--text); background: var(--surface-2); }
.kalauz__bezar .kalauz__ikon { width: 16px; height: 16px; }
.kalauz__bezar path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kalauz__torzs {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1rem 1.1rem;
}
.kalauz__inditok {
display: grid;
gap: 0.4rem;
}
.kalauz__indito {
padding: 0.6rem 0.8rem;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface-2);
color: var(--text-body);
font-size: var(--kalauz-text);
line-height: 1.5;
text-align: start;
transition: border-color var(--transition), background var(--transition);
}
.kalauz__indito:hover {
border-color: var(--neon);
background: var(--accent-tint);
}
.kalauz__kerdes {
color: var(--text-subtle);
font-size: var(--kalauz-text);
font-style: italic;
}
.kalauz__mondat {
margin-block-start: 0.5rem;
color: var(--text-body);
line-height: 1.65;
text-wrap: pretty;
}
.kalauz__lista {
list-style: none;
display: grid;
gap: 0.4rem;
margin-block-start: 0.9rem;
padding: 0;
}
.kalauz__talalat {
display: grid;
gap: 0.15rem;
padding: 0.65rem 0.8rem;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface-1);
color: inherit;
text-decoration: none;
transition: border-color var(--transition), background var(--transition);
}
.kalauz__talalat:hover {
border-color: var(--neon);
background: var(--accent-tint);
}
.kalauz__talalat-cim {
font-weight: 600;
color: var(--text);
line-height: 1.4;
}
.kalauz__talalat-hol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
color: var(--text-subtle);
font-size: var(--kalauz-text);
}
.kalauz__terulet {
font-family: var(--font-data);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-text);
}
.kalauz__ujra {
margin-block-start: 0.9rem;
color: var(--link);
font-size: var(--kalauz-text);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.kalauz__allapot {
color: var(--text-muted);
font-size: var(--kalauz-text);
line-height: 1.6;
}
.kalauz__allapot.is-hiba { color: var(--status-error); }
@media (prefers-reduced-motion: no-preference) {
.kalauz__allapot.is-tolt { animation: kalauzVar 1.4s var(--ease) infinite; }
}
@keyframes kalauzVar {
0%, 100% { opacity: 0.55; }
50%      { opacity: 1; }
}
.kalauz__urlap {
display: flex;
gap: 0.5rem;
padding: 0.85rem 1.1rem;
border-block-start: 1px solid var(--line);
background: var(--surface-2);
}
.kalauz__mezo {
flex: 1;
min-width: 0;
height: 2.6rem;
padding-inline: 0.8rem;
border: 1px solid var(--line-default);
border-radius: var(--radius-control);
background: var(--surface-1);
color: var(--text);
font: inherit;
font-size: var(--kalauz-text);
}
.kalauz__mezo:focus-visible { border-color: var(--neon); outline: none; }
.kalauz__kuld {
flex: none;
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
border-radius: var(--radius-control);
background: var(--neon);
color: var(--on-neon);
transition: background var(--transition), opacity var(--transition);
}
.kalauz__kuld:hover { background: var(--neon-hover); }
.kalauz__kuld:disabled { opacity: 0.5; cursor: progress; }
.kalauz__kuld .kalauz__ikon { width: 18px; height: 18px; }
.kalauz__kuld path { stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kalauz__lab {
padding: 0.7rem 1.1rem 0.85rem;
border-block-start: 1px solid var(--line);
color: var(--text-subtle);
font-size: 0.75rem;
line-height: 1.55;
}
.kalauz__lab a { color: var(--accent-text); }
@media (width < 34rem) {
.kalauz {
inset-inline: 1rem;
inset-block-end: calc(1rem + var(--cookie-banner-h, 0px));
justify-items: end;
}
.kalauz__panel {
--kalauz-text: 0.9375rem;
width: auto;
max-height: min(30rem, calc(100dvh - 7.5rem - var(--cookie-banner-h, 0px)));
}
.kalauz__kapocs { font-size: 0.85rem; }
.kalauz__gomb { align-self: end; }
.kalauz.is-open .kalauz__gomb { display: none; }
}
.kalauz__blokkcim {
margin-block-start: var(--space-s);
font-family: var(--font-data);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-subtle);
}
.kalauz__blokkcim:first-child { margin-block-start: 0; }
.kalauz__kezdo .kalauz__inditok { margin-block-start: 0.45rem; }
.kalauz__kapcsok {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-block-start: 0.45rem;
}
.kalauz__kapocs {
padding: 0.28rem 0.6rem;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface-1);
color: var(--text-muted);
font-size: 0.8rem;
text-decoration: none;
transition: border-color var(--transition), color var(--transition),
background var(--transition);
}
.kalauz__kapocs:hover {
border-color: var(--neon);
background: var(--accent-tint);
color: var(--text);
}
.kalauz__itt {
font-family: var(--font-data);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-text);
}
.kalauz__talalat.is-itt { border-color: color-mix(in srgb, var(--neon) 45%, var(--line)); }
@media print {
.kalauz { display: none !important; }
}
}
.kalauz-halvany > *:not(.kalauz-kiemelt) {
opacity: 0.32;
transition: opacity var(--dur-slow, 350ms) var(--ease, ease);
}
.kalauz-kiemelt {
position: relative;
z-index: 1;
border-radius: var(--radius-l, 16px);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 55%, transparent),
0 0 0 12px color-mix(in srgb, var(--neon) 12%, transparent);
transition: box-shadow var(--dur-slow, 350ms) var(--ease, ease);
}
::highlight(kalauz) {
background: color-mix(in srgb, var(--neon) 45%, transparent);
color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
.kalauz-kiemelt { animation: kalauzVillan 900ms var(--ease, ease); }
}
@keyframes kalauzVillan {
0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 85%, transparent),
0 0 0 6px color-mix(in srgb, var(--neon) 30%, transparent); }
100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 55%, transparent),
0 0 0 12px color-mix(in srgb, var(--neon) 12%, transparent); }
}
@media print {
.kalauz-halvany > * { opacity: 1 !important; }
.kalauz-kiemelt { box-shadow: none !important; }
}