/* ===========================================================================
   VRG Autófelvásárlás — egyedi vizuális rendszer
   ---------------------------------------------------------------------------
   MOBIL-FIRST: az alapértékek a mobilra vonatkoznak,
   a nagyobb képernyőket min-width media query bővíti.

   Ellenőrzési szélességek: 320 / 360 / 390 / 430 / 768 / 1024 / 1440 px

   A Bootstrap csak alapréteg. A megjelenést az itt definiált saját
   komponensrendszer adja: .fejlec, .hero, .lepes, .kartya, .urlap, .gyik.

   TÖRÉSPONTOK
     < 992 px    mobil és álló tablet — menügomb, kör alakú hívás gomb
     >= 992 px   fekvő tablet — telefonszám és CTA a fejlécsávban
     >= 1200 px  asztali — teljes vízszintes menü
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Betűtípus — MANROPE, self-hosted
   ---------------------------------------------------------------------------
   A jóváhagyott arculat betűcsaládja (04_VRG_ARCULATI_KEZIKONYV_V1.md, 4.).

   HONNAN?
     A hivatalos Google Fonts forrásból, SIL Open Font License 1.1 alatt. A
     licencszöveg a betűfájlok mellett: `web/assets/fonts/OFL.txt`.

   MIÉRT HELYI FÁJLBÓL?
     Külső fontkérés (Google Fonts CDN) TILOS: az a látogató IP-címét egy
     harmadik félhez küldené hozzájárulás nélkül, és a CSP-t is tágítani
     kellene. Így egyetlen külső kérés sem indul.

   MIÉRT VARIÁLIS BETŰ?
     A projekt öt súlyt használ (400–800). Egyetlen variábilis fájl mindet
     lefedi, tehát öt letöltés helyett kettő van — összesen ~39 KB.

   MIÉRT KÉT FÁJL?
     Karakterkészlet szerinti bontás. A magyar `ő` és `ű` a LATIN-EXT
     tartományban van (U+0150–0171), az alapbetűk a LATIN-ban. A böngésző
     csak azt tölti le, amire az oldalon ténylegesen szükség van.

   `font-display: swap`: a szöveg AZONNAL olvasható a tartalék betűvel, és a
   Manrope megérkezésekor vált — a tartalom megjelenését semmi nem késlelteti.

   Build-lépés, Composer és csomagkezelő NINCS: a fájlok a projekt részei.
   --------------------------------------------------------------------------- */

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

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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;
}

/* ---------------------------------------------------------------------------
   1. Tervezői változók
   --------------------------------------------------------------------------- */

:root {
    /* =======================================================================
       MÁRKATOKENEK — VRG Autófelvásárlás
       -----------------------------------------------------------------------
       FORRÁS: 04_VRG_ARCULATI_KEZIKONYV_V1.md (3. Színpaletta) és
               09_VRG_GLOBALIS_UI_ES_VIZUALIS_IRANYELVEK_CLAUDE.md (5.).
       Ezek VÉGLEGES, jóváhagyott márkaszínek — nem munkapaletta.

       FONTOS: komponensben SOHA nem írunk közvetlen HEX értéket, csak tokent.
       Az arculat cseréje = ennek az egy blokknak az átírása.

       SZÍNHASZNÁLATI SZABÁLY: a zöld AKCIÓ- ÉS AKCENTUSSZÍN, nem háttérszín.
       Az alapot a világos felületek + navy adják, a zöld a CTA-ké és a
       kisebb kiemeléseké (kb. 60% világos / 30% navy / max. 10% zöld).

       CTA-KONTRASZT: a zöld CTA felirata KÖTELEZŐEN sötét (--szin-szoveg).
       Fehér felirat a világos zöldön TILOS — a sötét ad erős kontrasztot.
       ======================================================================= */

    --szin-hatter:          #F8FAFC;   /* fő világos háttér */
    --szin-hatter-alt:      #EEF3F7;   /* alternatív háttér (váltakozó szekciók) */
    --szin-felulet:         #FFFFFF;   /* kártya, űrlapmező */

    --szin-sotet:           #0A2A4A;   /* Primary brand — navy felület */
    --szin-sotet-alt:       #2E3B4E;   /* Secondary — rétegzés a sötét blokkon belül */

    --szin-szoveg:            #0F172A; /* elsődleges szöveg és CTA-felirat */
    --szin-szoveg-masodlagos: #475569; /* másodlagos szöveg */
    --szin-szoveg-inverz:     #FFFFFF; /* szöveg sötét felületen */

    --szin-cta:             #7AC943;   /* elsődleges akció — SÖTÉT felirattal */
    --szin-cta-hover:       #69B637;
    --szin-cta-aktiv:       #5A9E2F;

    /* A VRG-ben a zöld EGYSZERRE akció- és akcentusszín: külön akcentus-
       árnyalatot az arculat nem határoz meg, ezért nem is találunk ki. */
    --szin-akcentus:        #7AC943;

    --szin-border:          #D7E0E8;
    --szin-border-eros:     #BECBD8;   /* a border sötétebb fokozata (elválasztók) */

    --szin-siker:           #16A34A;
    --szin-hiba:            #DC2626;
    --szin-fokusz:          #A3E635;   /* márka fókuszszín, jól látható */

    /* Halvány, állapot- és akcentusalapú háttérfelületek (jelöléshez). */
    --szin-cta-halvany:     #EDF7E3;
    --szin-siker-halvany:   #E8F6EE;
    --szin-hiba-halvany:    #FBEAEA;

    /* -----------------------------------------------------------------------
       Örökölt változónevek → az új tokenekre képezve.

       MIÉRT? A meglévő, működő komponensrendszer több száz helyen hivatkozik
       ezekre. Az átképzéssel az EGÉSZ stíluslap egyszerre kapja meg a
       jóváhagyott arculatot, anélkül hogy a bevált szabályokat újraírnánk.
       Új kódban a fenti márkatokeneket használjuk.
       ----------------------------------------------------------------------- */

    /* A navy MÉLYEBB rétege: gradiensekhez és a lábléchez. Nem új márkaszín,
       hanem a Primary brand sötétebb fokozata. */
    --szin-sotet-melyebb:   #06203A;
    --szin-sotet-enyhe:     var(--szin-sotet-alt);
    --szin-hatter-melyebb:  var(--szin-hatter-alt);
    --szin-feher:           var(--szin-felulet);
    --szin-szoveg-lagy:     #334155;
    --szin-halvany:         var(--szin-szoveg-masodlagos);
    --szin-keret:           var(--szin-border);

    --szin-cta-sotet:       var(--szin-cta-hover);
    --szin-cta-vilagos:     var(--szin-cta-halvany);

    /* A „hívás" elem a NAVY családba tartozik: a zöld az ajánlatkérésé marad. */
    --szin-hivas:           var(--szin-sotet);
    --szin-hivas-sotet:     var(--szin-sotet-melyebb);
    --szin-hivas-vilagos:   #E4EDF5;

    --szin-hiba-vilagos:    var(--szin-hiba-halvany);

    --szin-elsodleges:       var(--szin-sotet);
    --szin-elsodleges-sotet: var(--szin-sotet-melyebb);
    --szin-hatter-halvany:   var(--szin-hatter);

    /* --- Térközskála: 4 px alap. Random pixelérték nem használható. --- */
    --terkoz-1:  4px;
    --terkoz-2:  8px;
    --terkoz-3:  12px;
    --terkoz-4:  16px;
    --terkoz-5:  24px;
    --terkoz-6:  32px;
    --terkoz-7:  48px;
    --terkoz-8:  56px;
    --terkoz-9:  96px;
    --terkoz-10: 120px;

    /* --- Méretek --- */

    /* A rögzített alsó sáv GOMBJÁNAK magassága. Ez ÁLLANDÓ érték.
       FONTOS: a sáv magasságát SOHA nem szabad a --also-sav-magassag
       változóból származtatni, mert azt a oldal.js a mért magasságból írja
       felül — a kettő összekötése minden méréskor növelné a sávot. */
    --also-sav-gomb-magassag: 66px;

    /* A <body> alsó térköze, hogy a sáv ne takarjon tartalmat.
       Alapból a tényleges sávmagasságnál nagyobb, hogy JavaScript nélkül is
       elég legyen; a oldal.js a mért értékkel pontosítja.

       A KÉT gombos sáv (hívás / ajánlatkérés) egysoros elrendezésű, ezért
       alacsonyabb: a gomb 66 px, a sáv belső térközével együtt ~82 px. */
    --also-sav-magassag:    88px;

    --erintheto-min:        44px;

    /* Az űrlapmezők a designrendszer szerint nagyobbak: mobilon kényelmes. */
    --mezo-magassag:        56px;
    --gomb-magassag:        52px;
    --fejlec-magassag:      64px;

    /* --- Border-radius: nem minden kapszula. --- */
    --sugar:                10px;   /* gomb és űrlapmező — szándékosan azonos */
    --sugar-nagy:           16px;   /* kártya */
    --sugar-blokk:          24px;   /* nagy vizuális blokk (hero, térkép) */
    --sugar-kep:            12px;
    --sugar-kicsi:          8px;

    /* --- Árnyék: pontosan három szint. A negyediktől kezdődik a dashboard-hatás.
       Az árnyék a márka NAVY színéből képződik, nem semleges feketéből. --- */
    --arnyek-finom:  0 1px 2px rgba(10, 42, 74, 0.07);
    --arnyek-emelt:  0 6px 20px rgba(10, 42, 74, 0.12);
    --arnyek-sav:    0 -2px 12px rgba(10, 42, 74, 0.12);

    /* Örökölt árnyéknevek — az új, visszafogottabb szintekre képezve. */
    --arnyek-halk:   var(--arnyek-finom);
    --arnyek-kozep:  var(--arnyek-emelt);
    --arnyek-eros:   var(--arnyek-emelt);

    /* --- Tipográfia ---
       A jóváhagyott arculat betűcsaládja a MANROPE, a kézikönyvben rögzített
       tartalékveremmel: `Manrope, Arial, Helvetica, sans-serif`.

       A betűfájlok HELYI, self-hosted WOFF2-ként a projekt részei — lásd a
       fájl elején a 0. szakaszt. Külső fontkérés nem indul.

       A méretskála a fontcserétől FÜGGETLEN — az alább definiált értékek
       akkor sem változnak. */
    --betu: "Manrope", Arial, Helvetica, sans-serif;

    /* Méretskála — a fontcsere ezt NEM érinti. */
    --betu-h1:    clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --betu-h2:    clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
    --betu-h3:    clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --betu-body:  clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
    --betu-segéd: 0.9375rem;
    --betu-mikro: 0.8125rem;

    /* --- Szakaszritmus --- */
    --szakasz-terkoz: var(--terkoz-8);

    /* --- Átmenet: mozgás csak visszajelzésre. --- */
    --atmenet: 150ms ease-out;

    /* Belépő (scroll-reveal) mozgás. Az arculat 180–450 ms közötti, ease-out
       jellegű mozgást ír elő — ez az érték annak a közepe. */
    --atmenet-belepo: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Csökkentett mozgásigény: minden átmenet kikapcsol. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   2. Alapok
   --------------------------------------------------------------------------- */

html {
    /* Nincs vízszintes görgetés egyetlen szélességen sem.
       -----------------------------------------------------------------------
       A `hidden` SCROLL-KONTÉNERT hoz létre, és ettől a ragadós fejléc nem a
       képernyőhöz, hanem a konténerhez ragadna — vagyis egyszerűen elgörögne.
       A `clip` ugyanúgy levágja a kilógó tartalmat, de NEM hoz létre
       scroll-konténert, ezért a `position: sticky` működik.

       A `hidden` szándékosan ELŐBB áll: régebbi böngészőben az érvényesül,
       az újabbak a `clip` értékkel írják felül. */
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
    /* Mobilon a fejléc NEM ragadós, ezért nem kell horgonyeltolás. */
    scroll-padding-top: var(--terkoz-4);
}

/* A fejléc 992 px-től ragadós — a horgonyeltolásnak UGYANITT kell kezdődnie,
   különben a horgony célpontját eltakarná a fejléc. */
@media (min-width: 992px) {
    html {
        scroll-padding-top: 120px;
    }
}

body {
    font-family: var(--betu);
    font-size: 1.0625rem;      /* 17 px — mobilon is kényelmesen olvasható */
    line-height: 1.7;
    color: var(--szin-szoveg);
    background: var(--szin-hatter);
    /* Lásd a html szabályát: a `clip` nem hoz létre scroll-konténert, ezért a
       ragadós fejléc működik. A `hidden` a régebbi böngészők tartaléka. */
    overflow-x: hidden;
    overflow-x: clip;
    /* Hosszú, tördelhetetlen szavak ne lógjanak ki. */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* A rögzített alsó sáv NEM takarhatja el a tartalmat. */
body.van-also-sav {
    padding-bottom: calc(var(--also-sav-magassag) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    body.van-also-sav {
        padding-bottom: 0;
    }
}

img,
svg,
video,
table {
    max-width: 100%;
}

img,
video {
    height: auto;
}

h1, h2, h3, h4 {
    color: var(--szin-sotet);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.015em;
    margin-top: 0;
}

p {
    margin-bottom: 1.15rem;
}

a {
    color: var(--szin-sotet-enyhe);
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--szin-sotet);
}

/* Látható fókuszjelölés — akadálymentesség. */
:focus-visible {
    outline: 3px solid var(--szin-cta);
    outline-offset: 2px;
    border-radius: 4px;
}

.ugras-tartalomra {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
}

@media (min-width: 768px) {
    body {
        font-size: 1.125rem;   /* 18 px asztali és tablet nézetben */
    }

    :root {
        --szakasz-terkoz: 4.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   3. Tartalomszélesség és szakaszok
   --------------------------------------------------------------------------- */

.burok {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.15rem;
}

.burok--keskeny {
    max-width: 860px;
}

@media (min-width: 576px) {
    .burok {
        padding-inline: 1.75rem;
    }
}

.szakasz {
    padding-block: var(--szakasz-terkoz);
}

.szakasz--vilagos { background: var(--szin-feher); }
.szakasz--halvany { background: var(--szin-hatter); }

.szakasz__fejlec {
    max-width: 48rem;
    margin-bottom: 2.25rem;
}

.szakasz__fejlec--kozep {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.szakasz__cim {
    font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.3rem);
    margin-bottom: 0.85rem;
}

.szakasz__bevezeto {
    margin-bottom: 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1.0625rem;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .szakasz__bevezeto { font-size: 1.15rem; }
    .szakasz__fejlec   { margin-bottom: 2.75rem; }
}

/* ---------------------------------------------------------------------------
   4. Gombok — saját rendszer a Bootstrap fölött
   --------------------------------------------------------------------------- */

.gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    min-height: 52px;
    /* MOBIL-FIRST: szűk képernyőn kisebb vízszintes térköz, hogy a hosszabb
       feliratok (pl. „Telefonálok: +36 70 000 0000") elférjenek anélkül, hogy
       a szöveg kicsúszna a gombból. 576 px-től visszaáll a nagyobb térköz. */
    padding: 0.8rem 1.05rem;

    border: 2px solid transparent;
    border-radius: var(--sugar);

    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;

    /* =======================================================================
       SZÖVEGTÖRÉS — a gombfelirat SOHA nem eshet szét betűkre.
       -----------------------------------------------------------------------
       A `body` örökölt `overflow-wrap: break-word` értéke és a szűk flex-oszlop
       együtt odáig vitte a feliratot, hogy szótagokra, sőt betűkre tört
       („Aj án lat ot ké re k"). A gomb ezért EXPLICIT módon tiltja a szótörést:
       a sor a SZÓKÖZÖKNÉL törik, nem a szavak belsejében.

       `min-width` NINCS beállítva: flex-elemként a gomb alapértelmezett
       `min-width: auto` értéke már megakadályozza, hogy a leghosszabb szó alá
       zsugorodjon. Explicit `min-content` viszont 320 px-en KISZÉLESÍTETTE a
       gombot a rendelkezésre álló hely fölé, és vízszintes görgetést okozott. */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: normal;
    max-width: 100%;

    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                transform 0.12s ease, box-shadow 0.15s ease;
}

/* Az ikon soha nem nyomódik össze a felirat javára. */
.gomb > .ikon {
    flex: 0 0 auto;
}

/* A telefonszám EGYBEN marad: számjegyei nem törhetnek sorok közé. */
.telefon-gomb__szam,
.fejlec__telefon span {
    white-space: nowrap;
}

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

.gomb--teljes {
    width: 100%;
}

.gomb--nagy {
    min-height: 60px;
    font-size: 1.15rem;
    padding-inline: 1.2rem;
}

/* 576 px-től már van hely a nagyobb, levegősebb gombtérközre. */
@media (min-width: 576px) {
    .gomb      { padding-inline: 1.6rem; }
    .gomb--nagy { padding-inline: 1.9rem; }
}

/* Elsődleges CTA — MINDEN oldalon ugyanez a hangsúlyszín.
   A felirat SÖTÉT (--szin-szoveg): a világos zöldön ez ad erős kontrasztot.
   Fehér feliratot az arculat kifejezetten tilt. */
.gomb--cta {
    background: var(--szin-cta);
    border-color: var(--szin-cta);
    color: var(--szin-szoveg);
    box-shadow: 0 6px 18px rgba(90, 158, 47, 0.28);
}

.gomb--cta:hover,
.gomb--cta:focus {
    background: var(--szin-cta-hover);
    border-color: var(--szin-cta-hover);
    color: var(--szin-szoveg);
    box-shadow: 0 8px 22px rgba(90, 158, 47, 0.34);
}

.gomb--cta:active {
    background: var(--szin-cta-aktiv);
    border-color: var(--szin-cta-aktiv);
}

/* Hívás — világos felületen. */
.gomb--hivas {
    background: var(--szin-hivas);
    border-color: var(--szin-hivas);
    color: var(--szin-feher);
}

.gomb--hivas:hover,
.gomb--hivas:focus {
    background: var(--szin-hivas-sotet);
    border-color: var(--szin-hivas-sotet);
    color: var(--szin-feher);
}

/* MÁSODLAGOS művelet sötét felületen — szándékosan visszafogott, hogy ne
   versenyezzen az elsődleges CTA-val. Kontrasztja így is jóval AA felett. */
.gomb--halk {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--szin-hatter-alt);
    box-shadow: none;
}

.gomb--halk:hover,
.gomb--halk:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--szin-feher);
}

/* Másodlagos, világos felületen */
.gomb--vonalas {
    background: transparent;
    border-color: var(--szin-sotet);
    color: var(--szin-sotet);
}

.gomb--vonalas:hover,
.gomb--vonalas:focus {
    background: var(--szin-sotet);
    color: var(--szin-feher);
}

.gomb i {
    font-size: 1.15em;
    line-height: 1;
}

.gomb-sor {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

@media (min-width: 576px) {
    .gomb-sor {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .gomb-sor .gomb {
        flex: 0 1 auto;
    }
}

/* ---------------------------------------------------------------------------
   5. Fejléc
   --------------------------------------------------------------------------- */

/* A MOBIL FEJLÉC SZÁNDÉKOSAN NEM RAGADÓS.
   Mobilon a hívás és az ajánlatkérés végig elérhető a rögzített ALSÓ sávban,
   ezért a fejléc nem foglalhat el állandóan függőleges helyet.

   992 px FELETT viszont nincs alsó sáv — ott a fejléc ragad, hogy a
   telefonszám és az ajánlatkérő CTA görgetés közben is elérhető maradjon.

   SZÍN: sötét grafit alap, felül vékony réz bizalmi sávval. A fejléc a
   márkatokenekből épül; közvetlen HEX érték nem szerepelhet benne. */
.fejlec {
    position: static;
    z-index: 1035;
    background: var(--szin-sotet);
    color: var(--szin-szoveg-inverz);
}

@media (min-width: 992px) {
    .fejlec {
        position: sticky;
        top: 0;
        box-shadow: 0 6px 24px rgba(6, 32, 58, 0.30);
    }
}

/* --- Felső bizalmi sáv: keskeny, MÉLY NAVY csík zöld akcentusikonnal ---
   SZÁNDÉKOSAN nem zöld felület: az arculat szerint a zöld akció- és
   akcentusszín, nem nagy háttérfelület. A sáv így halk marad, és a zöld
   megőrzi a jelentését (ez itt a CTA). */
.fejlec-bizalom {
    background: var(--szin-sotet-melyebb);
    color: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* MOBIL-FIRST: a sáv alapból REJTETT.
   Nagyon szűk képernyőn nem fér el kulturáltan, és ott a fejléc magassága a
   fontosabb — a bizalmi üzenetek a főoldali bizalmi szakaszban úgyis ott
   vannak. 576 px-től jelenik meg, a harmadik üzenet 768 px-től. */
.fejlec-bizalom {
    display: none;
}

.fejlec-bizalom__lista {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin: 0;
    padding-block: 0.4rem;
    list-style: none;
}

.fejlec-bizalom__elem {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* A harmadik üzenet csak 992 px-től fér el EGY SORBAN. Alatta elrejtjük:
   768 px-en a három üzenet két sorba tört, és a sáv rendezetlenné vált. */
.fejlec-bizalom__elem:nth-child(3) {
    display: none;
}

.fejlec-bizalom__ikon {
    --ikon-meret: 15px;
    flex: 0 0 auto;
    /* A zöld itt AKCENTUS: apró ikon, nem felület. */
    color: var(--szin-cta);
}

/* A sávban lévő telefonszám kattintható marad, de nem versenyez a fő CTA-val. */
.fejlec-bizalom__telefon {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.fejlec-bizalom__telefon:hover,
.fejlec-bizalom__telefon:focus {
    color: var(--szin-cta);
}

@media (min-width: 576px) {
    .fejlec-bizalom { display: block; }
}

@media (min-width: 768px) {
    .fejlec-bizalom__lista { gap: 0.35rem 1.75rem; }
    .fejlec-bizalom__elem { font-size: 0.75rem; letter-spacing: 0.06em; }
}

@media (min-width: 992px) {
    .fejlec-bizalom__lista {
        justify-content: center;
        gap: 0.35rem 3rem;
        padding-block: 0.5rem;
        /* Egyetlen sor: a sáv soha nem tördelődik két sorba. */
        flex-wrap: nowrap;
    }

    .fejlec-bizalom__elem { font-size: 0.78rem; }
    .fejlec-bizalom__elem:nth-child(3) { display: inline-flex; }
}

/* --- A fő navigációs sáv --- */
.fejlec__fo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.fejlec__sav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--terkoz-2);
    min-height: var(--fejlec-magassag);
    padding-block: var(--terkoz-2);
}

/* --- Logó ---
   A logó körül VÉDŐTÉR kell — a szójel „A" betűjének magassága. Ezt a
   jobb oldali margó és a fejléc gap-je együtt biztosítja. */
.logo {
    display: inline-flex;
    align-items: center;
    /* Érinthetőség: a logó is kattintható elem. */
    min-height: var(--erintheto-min);
    margin-right: auto;
    padding-right: var(--terkoz-3);
    text-decoration: none;
}

.logo__kep {
    display: block;
    width: auto;
    /* A magasság vezérel: a horizontális logó 826x188, azaz ~4,4:1. */
    height: 34px;
}

.logo--lablec .logo__kep  { height: 40px; }
.logo--vilagos .logo__kep { height: 38px; }

/* =========================================================================
   A SÖTÉT HÁTTERŰ LOGÓVÁLTOZAT ILLESZTÉSE
   -------------------------------------------------------------------------
   A jóváhagyott `vrg-logo-primary-dark.png` NEM átlátszó hátterű: a saját,
   mély navy (#001A36 körüli) alapjával együtt érkezett. Navy felületen ez
   önmagában látható téglalapot rajzolna a logó köré.

   A `mix-blend-mode: lighten` csatornánként a VILÁGOSABBAT tartja meg. Mivel
   a logó saját háttere MINDEN csatornán sötétebb, mint a márkanavy, a
   háttértéglalap pontosan a mögötte lévő felület színére változik — a fehér
   szójel és a zöld pipa viszont érintetlen marad.

   Így a jóváhagyott assetet EGYETLEN képponton sem kell módosítani.
   Kevert módot nem támogató böngészőben a logó a saját, kissé sötétebb
   alapján jelenik meg — olvasható marad, csak nem teljesen összeolvadó.

   MEGJEGYZÉS: átlátszó hátterű PNG vagy SVG export ezt feleslegessé tenné.
   ========================================================================= */
.logo--lablec .logo__kep {
    mix-blend-mode: lighten;
}

/* A fejléc logója a jóváhagyott arculat SÖTÉT hátterű változata, és
   szándékosan HANGSÚLYOSABB a korábbinál. */
.logo--fejlec-sotet .logo__kep { height: 38px; }

@media (min-width: 576px) {
    .logo__kep                     { height: 38px; }
    .logo--lablec .logo__kep       { height: 46px; }
    .logo--fejlec-sotet .logo__kep { height: 44px; }
    .fejlec__sav                   { min-height: 72px; }
}

@media (min-width: 1280px) {
    .logo__kep                     { height: 44px; }
    .logo--fejlec-sotet .logo__kep { height: 50px; }
    .fejlec__sav                   { min-height: 84px; }
}

/* --- A fejléc műveletei --- */
.fejlec__muveletek {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

/* A logó a sávban balra tapad, a menü és a műveletek jobbra. */
.fejlec .logo {
    margin-right: auto;
}

.fejlec__hivas-mobil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--erintheto-min);
    height: var(--erintheto-min);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    color: var(--szin-feher);
    text-decoration: none;
    font-size: 1.2rem;
}

.fejlec__hivas-mobil:hover,
.fejlec__hivas-mobil:focus {
    background: var(--szin-cta);
    border-color: var(--szin-cta);
    /* Zöld felületen SÖTÉT ikon — a fehér kontrasztja itt nem elegendő. */
    color: var(--szin-szoveg);
}

.menu-kapcsolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--erintheto-min);
    height: var(--erintheto-min);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--szin-feher);
    font-size: 1.45rem;
    cursor: pointer;
}

.menu-kapcsolo[aria-expanded="true"] {
    background: var(--szin-cta);
    border-color: var(--szin-cta);
    color: var(--szin-szoveg);
}

/* Vékony világos elválasztó a navigáció és a konverziós elemek között. */
.fejlec__elvalaszto {
    display: none;
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.18);
}

.fejlec__telefon,
.fejlec__cta {
    display: none;
}

/* --- Navigáció: mobilon lenyíló, teljes szélességű sáv --- */
.fomenu {
    display: none;
    order: 3;
    flex-basis: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: 0.6rem 1rem;
}

.fomenu.nyitva {
    display: block;
}

.fomenu__lista {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fomenu__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.65rem 0.6rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

.fomenu__link:hover,
.fomenu__link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--szin-feher);
}

/* Aktív oldal — finom réz kiemelés, nem harsány kitöltés. */
.fomenu__link--aktiv {
    color: var(--szin-akcentus);
}

/* --- Szolgáltatások: lenyíló menü (asztal) / harmonika (mobil) ---
       A nyitógomb NEM hivatkozás: nincs mögötte oldal és nincs horgony sem.
       Natív <details>/<summary>, ezért JavaScript nélkül is működik és
       billentyűzettel is kezelhető. */

.fomenu__lenyilo {
    /* Alap (mobil): a panel a menüben marad — harmonika. */
    position: static;
}

.fomenu__nyito {
    /* A natív nyílhegy helyett saját, forgó ikont használunk. */
    list-style: none;
    cursor: pointer;
    justify-content: space-between;
    gap: 0.6rem;
    user-select: none;
}

.fomenu__nyito::-webkit-details-marker {
    display: none;
}

.fomenu__nyil {
    flex: 0 0 auto;
    transition: transform 0.18s ease;
    --ikon-meret: 16px;
}

.fomenu__lenyilo[open] > .fomenu__nyito .fomenu__nyil {
    transform: rotate(180deg);
}

.fomenu__lenyilo[open] > .fomenu__nyito {
    color: var(--szin-feher);
}

.fomenu__almenu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.2rem 0 0.35rem;
    /* Mobilon behúzás jelzi az alárendeltséget, réz vezetővonallal. */
    padding: 0 0 0 0.9rem;
    border-left: 2px solid rgba(122, 201, 67, 0.45);
    list-style: none;
}

/* ZÁRT ÁLLAPOTBAN NEM RENDERELŐDIK.
   A böngésző alapértelmezett <details>-elrejtését a saját `display: flex`
   (asztalon ráadásul a `position: absolute`) felülírná, ezért a panel zárva is
   megjelenne. Ez a szabály állítja helyre a natív viselkedést — a nyitást és
   zárást továbbra is maga a <details> [open] állapota vezérli. */
.fomenu__lenyilo:not([open]) .fomenu__almenu {
    display: none;
}

.fomenu__almenu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.0125rem;
    font-weight: 600;
    text-decoration: none;
}

.fomenu__almenu-link:hover,
.fomenu__almenu-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--szin-feher);
}

/* --- 992 px-től: telefonszám és CTA a sávban ---
       A KONVERZIÓS ELEMEK ELŐBBRE VALÓK, mint a teljes menüsor: a telefonszám
       és az ajánlatkérő CTA már itt megjelenik, miközben a navigáció még
       hamburgerben marad. */
@media (min-width: 992px) {
    .fejlec__hivas-mobil {
        display: none;
    }

    .fejlec__elvalaszto {
        display: block;
    }

    .fejlec__telefon {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: var(--erintheto-min);
        padding-inline: 0.6rem;
        color: var(--szin-feher);
        font-weight: 800;
        font-size: 1.14rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .fejlec__telefon .ikon {
        color: var(--szin-akcentus);
        --ikon-meret: 18px;
    }

    .fejlec__telefon:hover,
    .fejlec__telefon:focus {
        color: var(--szin-akcentus);
    }

    .fejlec__cta {
        display: inline-flex;
        min-height: 48px;
        padding: 0.65rem 1.25rem;
        font-size: 1.03rem;
    }

    .fejlec__muveletek {
        gap: 0.75rem;
    }
}

/* --- 1400 px-től: teljes vízszintes menü, menügomb nélkül ---
       A fejléc ITT MINDIG EGYETLEN SOR. Ezt a `flex-wrap: nowrap` a sávon és a
       `white-space: nowrap` a menüpontokon biztosítja.

       MIÉRT 1400 px (korábban 1280)?
       A menü a „Szolgáltatások" ponttal HAT elemű lett, és a sáv három
       gyereke (logó + menü + műveletek) `flex: 0 0 auto` — egyikük sem
       zsugorodhat. 1280 px-en a három gyerek együtt ~1266 px-t igényel, a
       tartalomsáv viszont csak 1144 px széles: a `fejlec__muveletek` és
       benne a CTA KILÓGOTT a viewportból, és mivel a vízszintes görgetés
       tiltott, a gomb egyszerűen LEVÁGÓDOTT (1280 px-en 36, 1440 px-en
       82 px-cel).

       A méretek szűkítése önmagában nem elég: hat menüponttal a teljes
       navigáció 1200 px-es tartalomsávban SEMMILYEN szélességen nem fér el
       kulturáltan. Ezért a fenti, már meglévő elvet követjük — „inkább
       maradjon hamburgerben, mint hogy összetorlódjon" —, és a töréspontot
       emeljük oda, ahol a hat pont ténylegesen elfér (lásd még a fejléc
       szélesebb burkát a 31. szakaszban). */
@media (min-width: 1400px) {
    .fejlec__sav {
        flex-wrap: nowrap;
    }

    .menu-kapcsolo {
        display: none;
    }

    .fomenu {
        display: block;
        order: 0;
        /* 0 0 auto: a menü SOHA nem nyomódik össze — inkább a térközök
           szűkülnek (lásd a következő szabálycsoportot). */
        flex: 0 0 auto;
        border-top: 0;
        padding: 0;
        margin-inline: 1.5rem auto;
    }

    .fomenu__lista {
        flex-direction: row;
        align-items: center;
        gap: 0.15rem;
        flex-wrap: nowrap;
    }

    .fomenu__link {
        min-height: 40px;
        padding-inline: 0.75rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* --- Asztali lenyíló panel ---
           A menüsorban a nyitógomb marad a helyén, a panel pedig FÖLÉ úszik,
           így a fejléc magassága és egysoros elrendezése változatlan. */
    .fomenu__elem--almenu {
        position: relative;
    }

    .fomenu__nyito {
        gap: 0.4rem;
    }

    .fomenu__almenu {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        z-index: 40;
        min-width: 15rem;
        margin: 0;
        padding: 0.4rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        background: var(--szin-sotet-alt);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    /* Finom réz felső él — a fejléc arculatához illő lezárás. */
    .fomenu__almenu::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        border-radius: 12px 12px 0 0;
        background: linear-gradient(to right, var(--szin-cta), var(--szin-akcentus));
    }

    .fomenu__almenu-link {
        min-height: 40px;
        white-space: nowrap;
    }

    .fejlec__muveletek {
        flex: 0 0 auto;
    }

    .fejlec .logo {
        flex: 0 0 auto;
        margin-right: 0;
    }
}

/* Kompakt asztali térközök — 1400 px-TŐL FELFELÉ, felső határ nélkül.

   KORÁBBAN ez a szabály csak 1280–1439.98 px között élt, és 1440 px-en
   megszűnt. Ott viszont a menü egyben SZÉLESEBB is lett (793 px a szűkített
   721 helyett), ezért éppen a nagyobb képernyőn lógott ki a legjobban a CTA
   (82 px). A hat menüpont a teljes térközökkel egyetlen desktop szélességen
   sem fér el, ezért a kompakt méret marad érvényben fölfelé is — a
   különbség alig látható (0,96rem vs 1rem), a stabilitás viszont teljes. */
@media (min-width: 1400px) {
    .fomenu            { margin-inline: 0.75rem auto; }
    .fomenu__link      { padding-inline: 0.5rem; font-size: 0.96rem; }
    .fejlec__telefon   { padding-inline: 0.35rem; font-size: 1.05rem; }
    .fejlec__cta       { padding-inline: 0.95rem; font-size: 0.99rem; }
    .fejlec__muveletek { gap: 0.5rem; }
}

/* --- Sticky kompakt állapot ---
       Görgetés közben a fejléc valamivel tömörebb lesz, de NEM alakul át más
       kinézetű fejléccé: a navigáció, a telefonszám és a CTA végig elérhető.
       Az osztályt a oldal.js teszi rá. */
@media (min-width: 992px) {
    /* Csak a ténylegesen változó tulajdonságokra animálunk: az `all` fölösleges
       elrendezés-számolást okozna minden képkockában. */
    .fejlec__sav {
        transition: min-height var(--atmenet), padding-block var(--atmenet);
    }

    .fejlec-bizalom__lista {
        transition: padding-block var(--atmenet);
    }

    .logo--fejlec-sotet .logo__kep {
        transition: height var(--atmenet);
    }

    .fejlec--tomor .fejlec-bizalom__lista {
        padding-block: 0.25rem;
    }

    .fejlec--tomor .fejlec__sav {
        min-height: 64px;
        padding-block: 0.35rem;
    }

    .fejlec--tomor .logo--fejlec-sotet .logo__kep {
        height: 38px;
    }
}

/* ---------------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: linear-gradient(158deg, var(--szin-sotet-alt) 0%, var(--szin-sotet) 48%, var(--szin-sotet-melyebb) 100%);
    color: var(--szin-szoveg-inverz);
    padding-block: 2.25rem 3rem;
    overflow: hidden;
}

/* A hero alján KORÁBBAN végigfutó réz csík MEGSZŰNT.
   A gyors CTA-sáv ráül a hero aljára, és a csík — a saját rétegsorrendje miatt —
   keresztülvágta a gombokat. A hero lezárását most maga a CTA-sáv adja, a
   referencia-mockupnak megfelelően. */

.hero__racs {
    display: grid;
    gap: 2.25rem;
    /* A szöveg a képre kerül, nem alá. */
    position: relative;
    z-index: 2;
}

.hero__cim {
    color: var(--szin-feher);
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
    line-height: 1.14;
    margin-bottom: 1.15rem;
}

.hero__bevezeto {
    font-size: 1.09rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
    max-width: 36rem;
    margin-bottom: 2rem;
}

/* Egyértelműsítés: nem hirdetési oldal. Fontos üzenet, de nem CTA —
   ezért visszafogott, kereteres sáv, nem gomb. */
.hero__pontositas {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 34rem;
    margin: 0 0 2rem;
    padding: 0.85rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 4px solid var(--szin-cta);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--szin-border);
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.55;
}

.hero__pontositas i {
    color: var(--szin-akcentus);
    font-size: 1.15rem;
    line-height: 1.4;
}

.hero__gombok {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .hero__gombok {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .hero__bevezeto {
        font-size: 1.2rem;
    }
}

/* ---------------------------------------------------------------------------
   A HERO KÉPE — nem fotókártya, hanem a hero felületének része
   ---------------------------------------------------------------------------
   MOBILON a szöveg ALATT áll, teljes szélességben: így az autó látszik, a
   szöveg pedig végig olvasható marad, sarokkerekítés és keret nélkül.
   --------------------------------------------------------------------------- */

.hero__kep {
    position: relative;
    margin-top: var(--terkoz-5);
    /* Kifut a tartalomsáv széléig: a kép a hero felülete, nem külön doboz. */
    margin-inline: -1.15rem;
}

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

.hero__kep img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* Az autó a felvétel jobb oldalán van — ez a vágás tartja képben. */
    object-position: 68% center;
}

/* A kép alja beleolvad a hero hátterébe (nincs éles vágás). */
.hero__kep::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 42, 74, 0.30) 0%, rgba(10, 42, 74, 0) 35%,
                rgba(10, 42, 74, 0.55) 82%, var(--szin-sotet) 100%);
    pointer-events: none;
}

@media (min-width: 992px) {
    .hero {
        /* Nincs indokolatlan üres terület: a fejléc alatt azonnal kezdődik a
           tartalom, és a hero magasságát a szöveg adja. */
        padding-block: 3.25rem 4rem;
    }

    .hero__racs {
        /* A jobb oldali oszlop ÜRESEN marad: ott a háttérbe olvadó kép áll.
           A szöveg így nem fut rá az autóra. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
        align-items: center;
        gap: 3rem;
    }

    /* A kép a hero JOBB oldalát tölti ki, teljes magasságban. */
    .hero__kep {
        position: absolute;
        inset: 0 0 0 auto;
        width: 62%;
        margin: 0;
        z-index: 0;
    }

    .hero__kep img {
        height: 100%;
        aspect-ratio: auto;
        object-position: 62% center;
    }

    /* BAL FELŐL beolvad a sötét háttérbe — nincs látható képszél és nincs
       lekerekített kártyahatás. Alul és jobbra is finoman elhal. */
    .hero__kep::after {
        background:
            linear-gradient(to right, var(--szin-sotet) 0%, rgba(10, 42, 74, 0.92) 18%,
                            rgba(10, 42, 74, 0.45) 45%, rgba(10, 42, 74, 0.10) 75%, rgba(10, 42, 74, 0.28) 100%),
            linear-gradient(to bottom, rgba(10, 42, 74, 0.55) 0%, rgba(10, 42, 74, 0) 22%,
                            rgba(10, 42, 74, 0) 72%, rgba(10, 42, 74, 0.75) 100%);
    }

    /* FERDE, VÉKONY RÉZ ELVÁLASZTÓ a szöveges és a képi oldal között —
       a jóváhagyott referencia kompozíciójának része. */
    .hero__kep::before {
        content: "";
        position: absolute;
        top: -12%;
        bottom: -12%;
        /* Elég távol a szövegoszloptól: a ferde vonal felső vége se érjen
           hozzá a címhez és a bevezetőhöz. */
        left: 24%;
        width: 2px;
        z-index: 1;
        transform: skewX(-9deg);
        background: linear-gradient(to bottom, rgba(122, 201, 67, 0) 0%, var(--szin-cta) 26%,
                    var(--szin-akcentus) 62%, rgba(122, 201, 67, 0) 100%);
        box-shadow: 0 0 18px rgba(122, 201, 67, 0.40);
        pointer-events: none;
    }
}

@media (min-width: 1440px) {
    .hero__kep { width: 58%; }
    .hero__kep img { object-position: 58% center; }
}

/* ---------------------------------------------------------------------------
   6/b. Rövid bizalmi sáv — önálló szakasz a hero alatt
   --------------------------------------------------------------------------- */

.bizalmi-sav {
    background: var(--szin-feher);
    border-bottom: 1px solid var(--szin-keret);
    padding-block: 1.35rem;
}

.bizalom {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bizalom__elem {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
    font-size: 1.03rem;
    line-height: 1.35;
    color: var(--szin-sotet);
}

.bizalom__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--szin-cta-halvany);
    color: var(--szin-cta);
    font-size: 1.15rem;
}

@media (min-width: 768px) {
    .bizalmi-sav { padding-block: 1.6rem; }

    .bizalom {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem 1.75rem;
    }
}

/* ---------------------------------------------------------------------------
   7. Lépéssor — „Hogyan működik?"
   --------------------------------------------------------------------------- */

.lepesek {
    display: grid;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lepes {
    position: relative;
    display: flex;
    flex-direction: column;
    /* VALÓDI vizuális távolság a számozott kör és a cím között (18 px). */
    gap: 18px;
    /* Egyenlő magasságú kártyák a rácsban. */
    height: 100%;
    padding: 1.85rem 1.6rem 1.65rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-halk);
}

.lepes__fej {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

/* KÖR, nem tojás.
   A flexbox össze tudja nyomni a fix méretű elemet, ha nincs `flex: 0 0 auto`
   és `aspect-ratio` — ettől lettek oválisak a számkörök. */
.lepes__szam,
.lepes__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1;
}

.lepes__szam {
    background: var(--szin-cta);
    /* Zöld körön SÖTÉT szám — az arculat CTA-kontraszt szabálya szerint. */
    color: var(--szin-szoveg);
}

.lepes__ikon {
    background: var(--szin-cta-halvany);
    color: var(--szin-cta);
}

.lepes__cim {
    font-size: 1.22rem;
    margin-bottom: 0.5rem;
}

.lepes__szoveg {
    margin-bottom: 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* SZABÁLYOS 2×2 RÁCS 768 px-től.
   Négy lépés van, ezért a háromoszlopos rács 3+1 törést adott: az utolsó kártya
   magára maradt egy sorban. A kétoszlopos elrendezés kiegyensúlyozott, és a
   kártyák magassága is egyezik (`align-items: stretch` az alapértelmezés). */
@media (min-width: 768px) {
    .lepesek {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem;
    }

    .lepes {
        padding: 2.1rem 1.85rem 1.9rem;
    }
}

/* ---------------------------------------------------------------------------
   8. Járműkártyák — „Milyen járműveket vásárolunk fel?"
   ---------------------------------------------------------------------------
   Mobilon EGY oszlop, 576 px-től KETTŐ, 992 px-től HÁROM.
   A kártya NEM hivatkozás: nincs önálló céloldala, ezért félrevezető lenne
   kattinthatónak látszania.
   --------------------------------------------------------------------------- */

.jarmuvek {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.jarmu-kartya {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-halk);
}

.jarmu-kartya__kep {
    display: block;
    width: 100%;
    height: auto;
    /* Mobilon laposabb vágás, hogy a hat kártya ne nyúljon el. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 1px solid var(--szin-keret);
    background: var(--szin-hatter-melyebb);
}

.jarmu-kartya__torzs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.35rem 1.35rem 1.5rem;
}

.jarmu-kartya__cim {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 0.7rem;
}

.jarmu-kartya__szoveg {
    margin-bottom: 0.55rem;
    color: var(--szin-szoveg-lagy);
    font-size: 1.03rem;
    line-height: 1.6;
}

.jarmu-kartya__szoveg:last-child {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .jarmuvek {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
    }

    .jarmu-kartya__kep {
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 992px) {
    .jarmuvek {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
    }

    .jarmu-kartya__torzs { padding: 1.6rem 1.6rem 1.75rem; }
    .jarmu-kartya__cim   { font-size: 1.28rem; }
}

/* ---------------------------------------------------------------------------
   8/b. „A teljes folyamatban segítünk" — ügyintézési szolgáltatások
   --------------------------------------------------------------------------- */

.segitseg {
    display: grid;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.segitseg__elem {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-halk);
}

.segitseg__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--szin-cta-vilagos);
    color: var(--szin-cta);
    font-size: 1.5rem;
}

.segitseg__cim {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 0.4rem;
}

.segitseg__szoveg {
    margin-bottom: 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1.03rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .segitseg {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.6rem;
    }

    .segitseg__elem {
        flex-direction: column;
        padding: 1.85rem 1.65rem;
    }
}

/* ---------------------------------------------------------------------------
   8/c. „Miért érdemes tőlünk ajánlatot kérni?"
   --------------------------------------------------------------------------- */

.ervek {
    display: grid;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Mobilon vízszintes elrendezés: az ikon balra kerül, így a szakasz nem
   válik újabb, magas kártyaoszloppá a járműkártyák után. */
.erv {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.25rem 1.3rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-halk);
}

.erv__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--szin-hivas-vilagos);
    color: var(--szin-hivas);
    font-size: 1.3rem;
}

.erv__cim {
    font-size: 1.12rem;
    line-height: 1.35;
    margin-bottom: 0.3rem;
    align-self: center;
}

.erv__szoveg {
    margin-bottom: 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1.03rem;
    line-height: 1.6;
}

@media (min-width: 576px) {
    .ervek {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
    }
}

@media (min-width: 992px) {
    .ervek {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.6rem;
    }

    /* Nagyobb képernyőn függőleges elrendezés: az ikon a cím fölé kerül. */
    .erv {
        display: block;
        padding: 1.75rem 1.6rem;
    }

    .erv__ikon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
        font-size: 1.4rem;
    }

    .erv__cim {
        font-size: 1.18rem;
    }
}

/* ---------------------------------------------------------------------------
   9. Ajánlatkérő
   --------------------------------------------------------------------------- */

.ajanlatkero {
    background: linear-gradient(180deg, var(--szin-hatter-melyebb) 0%, var(--szin-hatter) 100%);
}

.urlap-kartya {
    max-width: 940px;
    margin-inline: auto;
    padding: 1.6rem 1.15rem 1.85rem;
    border: 1px solid var(--szin-keret);
    border-top: 4px solid var(--szin-cta);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-kozep);
}

@media (min-width: 768px) {
    .urlap-kartya {
        padding: 2.75rem 2.5rem 3rem;
    }
}

/* --- A három tartalmi blokk --- */
.urlap__blokk {
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--szin-keret);
    padding-top: 1.6rem;
}

.urlap__blokk:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.urlap__blokk-cim {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    float: none;
    margin-bottom: 0.35rem;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--szin-sotet);
}

.urlap__blokk-szam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--szin-sotet);
    color: var(--szin-feher);
    font-size: 1rem;
    font-weight: 800;
}

.urlap__blokk-sugo {
    margin: 0 0 1.35rem;
    padding-left: calc(34px + 0.7rem);
    color: var(--szin-halvany);
    font-size: 1rem;
    line-height: 1.55;
}

.urlap__racs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .urlap__blokk       { margin-bottom: 2.5rem; padding-top: 2rem; }
    .urlap__blokk-cim   { font-size: 1.3rem; }

    .urlap__racs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 1.75rem;
    }

    .urlap__mezo--teljes {
        grid-column: 1 / -1;
    }
}

.urlap__mezo {
    display: flex;
    flex-direction: column;
}

.urlap__cimke {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--szin-sotet);
}

.urlap__kotelezo {
    color: var(--szin-cta);
    font-weight: 800;
}

.urlap__sugo {
    margin: 0.4rem 0 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--szin-halvany);
}

/* A mezőknek AZONNAL látszaniuk kell: fehér felület, határozott — de nem
   fekete — kontúr a törtfehér háttéren. */
.urlap__bemenet,
.urlap__valaszto,
.urlap__szovegdoboz {
    width: 100%;
    min-height: var(--mezo-magassag);
    padding: 0.8rem 1rem;

    border: 1.5px solid var(--szin-border-eros);
    border-radius: var(--sugar);
    background: var(--szin-felulet);

    color: var(--szin-szoveg);
    font-family: inherit;
    /* 16 px alatt a mobilböngésző ránagyít a mezőre — ezt elkerüljük. */
    font-size: 1.0625rem;
    line-height: 1.45;
    transition: border-color var(--atmenet), box-shadow var(--atmenet);
}

.urlap__bemenet::placeholder,
.urlap__szovegdoboz::placeholder {
    color: var(--szin-szoveg-masodlagos);
    opacity: 1;
}

/* Egérrel is egyértelmű, hogy a mező interaktív. */
.urlap__bemenet:hover,
.urlap__valaszto:hover,
.urlap__szovegdoboz:hover {
    border-color: var(--szin-szoveg-masodlagos);
}

.urlap__szovegdoboz {
    min-height: 130px;
    resize: vertical;
}

.urlap__valaszto {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2357657a'%3E%3Cpath d='M8 11.2 2.4 5.6 3.8 4.2 8 8.4l4.2-4.2 1.4 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 17px 17px;
}

/* Fókuszban ZÖLD kontúr + halvány gyűrű: egyértelmű, hova írunk. */
.urlap__bemenet:focus,
.urlap__valaszto:focus,
.urlap__szovegdoboz:focus {
    border-color: var(--szin-cta);
    box-shadow: 0 0 0 3px rgba(122, 201, 67, 0.28);
    outline: none;
}

.urlap__bemenet[aria-invalid="true"],
.urlap__valaszto[aria-invalid="true"],
.urlap__szovegdoboz[aria-invalid="true"] {
    border-color: var(--szin-hiba);
    background: var(--szin-hiba-vilagos);
}

.urlap__hiba {
    display: block;
    margin-top: 0.45rem;
    color: var(--szin-hiba);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

/* --- Záró rész: hozzájárulás, beküldés, alternatíva --- */
.urlap__zaras {
    padding-top: 0.25rem;
}

.urlap__jelolo {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar);
    background: var(--szin-hatter);
    cursor: pointer;
}

.urlap__jelolo input {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    accent-color: var(--szin-cta);
}

.urlap__jelolo-szoveg {
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--szin-szoveg);
}

.urlap__kuldes {
    margin-bottom: 1.25rem;
}

/* Alternatív telefonos út — visszafogott, egy soros. Nem tör bele
   az űrlap vizuális rendszerébe: a hívás a fejlécből és a mobil
   alsó sávból mindig elérhető marad. */
.urlap__alternativa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1.03rem;
    text-align: center;
}

.urlap__alternativa-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--erintheto-min);
    padding-inline: 0.35rem;
    color: var(--szin-hivas);
    font-weight: 800;
    text-decoration: underline;
}

.urlap__alternativa-link:hover,
.urlap__alternativa-link:focus {
    color: var(--szin-hivas-sotet);
}

/* --- Üzenetblokkok --- */
.uzenet {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
    border-radius: var(--sugar);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 1.03rem;
    line-height: 1.6;
}

.uzenet--hiba {
    background: var(--szin-hiba-vilagos);
    border-color: var(--szin-hiba-halvany);
    color: var(--szin-hiba);
}

.uzenet--siker {
    background: var(--szin-hivas-vilagos);
    border-color: var(--szin-siker-halvany);
    color: var(--szin-siker);
}

/* Figyelmeztetés: a művelet SIKERÜLT, de valami részleges maradt.
   Szándékosan nem piros — a köszönőoldalon a fő üzenet a siker. */
.uzenet--figyelem {
    background: #FFF8E6;
    border-color: #F3D89A;
    color: #7A5A11;
    text-align: left;
}

/* --- Hibaösszegzés az űrlap tetején ---------------------------------------
   A látogató SOHA nem maradhat úgy a beküldés után, hogy nem tudja, mi
   történt. Ez a doboz mindig ugyanott van, a JavaScript ide adja a fókuszt,
   és ide is görget. JavaScript nélkül a szerver rendereli ki. */

.urlap__osszegzo {
    scroll-margin-top: 6rem;
}

.urlap__osszegzo[hidden] {
    display: none;
}

.urlap__osszegzo:focus {
    outline: 3px solid var(--szin-hiba);
    outline-offset: 3px;
}

.urlap__osszegzo-torzs {
    min-width: 0;
}

.urlap__osszegzo-cim {
    margin: 0;
    font-weight: 700;
}

.urlap__osszegzo-lista {
    margin: 0.6rem 0 0;
    padding-left: 1.15rem;
    font-weight: 500;
}

.urlap__osszegzo-lista li + li {
    margin-top: 0.3rem;
}

.urlap__osszegzo-lista a {
    color: inherit;
    text-decoration: underline;
}

/* --- Képválasztó ----------------------------------------------------------
   A natív <input type="file"> mobilon használhatatlan listát ad: iOS-en a
   galériából választott fotók neve „Image 1", „Image 2", és egyet sem lehet
   levenni. Ez a réteg valódi előnézetet, nevet, méretet és eltávolítást ad.

   A natív mező NEM tűnik el a DOM-ból: azon keresztül megy fel a fájllista,
   és JavaScript nélkül önmagában is működik. */

.urlap__fajl--rejtve {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
}

.kepvalaszto {
    margin-top: 0.75rem;
}

.kepvalaszto--dolgozik {
    opacity: 0.6;
    pointer-events: none;
}

.kepvalaszto__gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--mezo-magassag);
    padding: 0.7rem 1.35rem;

    border: 1.5px dashed var(--szin-border-eros);
    border-radius: var(--sugar);
    background: var(--szin-felulet);

    color: var(--szin-sotet);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--atmenet), background var(--atmenet);
}

.kepvalaszto__gomb:hover,
.kepvalaszto__gomb:focus-visible {
    border-color: var(--szin-cta);
    background: var(--szin-hatter);
}

.kepvalaszto__gomb:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.kepvalaszto__lista {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.kepvalaszto__elem {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar);
    background: var(--szin-felulet);
}

.kepvalaszto__elonezet {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--szin-hatter);
}

.kepvalaszto__elonezet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A telefonfotók EXIF-tájolását a böngésző alkalmazza. */
    image-orientation: from-image;
}

.kepvalaszto__elonezet--pdf {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--szin-halvany);
}

.kepvalaszto__adatok {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kepvalaszto__nev {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;

    /* A telefonok fájlnevei nagyon hosszúak
       („IMG_20260823_204512_HDR.jpg"). 320 px-en tördelve egy sor akár
       300 px magasra nőne, és a lista áttekinthetetlenné válna. Ezért
       legfeljebb két sor látszik; a teljes név a `title` attribútumban és
       az eltávolító gomb aria-label szövegében ott van. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.kepvalaszto__meret {
    color: var(--szin-halvany);
    font-size: 0.95rem;
}

.kepvalaszto__torol {
    flex: 0 0 auto;
    min-height: var(--erintheto-min);
    min-width: var(--erintheto-min);
    padding: 0.5rem 0.85rem;

    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar);
    background: transparent;

    color: var(--szin-hiba);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.kepvalaszto__torol:hover,
.kepvalaszto__torol:focus-visible {
    border-color: var(--szin-hiba);
    background: var(--szin-hiba-vilagos);
}

.kepvalaszto__allapot {
    margin: 0.7rem 0 0;
    color: var(--szin-halvany);
    font-size: 0.98rem;
}

/* Küldés közben a gomb egyértelműen dolgozik — kétszer kattintani
   nem lehet, mert a JavaScript le is tiltja. */
.gomb--dolgozik {
    opacity: 0.75;
    cursor: progress;
}

/* --- Beküldési folyamatjelzés ---

   MIÉRT KELL a gomb feliratán túl is? Mobilhálózaton több fénykép feltöltése
   percekig is tarthat. Ha a beküldő közben elgörget, a gomb feliratát nem
   látja, és azt hiheti, nem történik semmi — emiatt vagy újra rákattint, vagy
   elnavigál. Mindkettő elveszett lead.

   A jelzés a gomb MELLETT jelenik meg, jól láthatóan, mobilon is. */
.urlap__folyamat {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0.9rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--szin-kiemeles-halvany, #cfe3d8);
    border-radius: var(--sugar-kicsi, 8px);
    background: var(--szin-kiemeles-hatter, #f2f8f5);
    color: var(--szin-szoveg, #1d2b26);
    font-size: 1rem;
    line-height: 1.45;
}

/* A folyamatosan mozgó pont jelzi, hogy tényleg történik valami. */
.urlap__folyamat::before {
    content: "";
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.32rem;
    border-radius: 50%;
    background: var(--szin-elsodleges, #1f6b4b);
    animation: vrg-folyamat-lukteto 1.1s ease-in-out infinite;
}

@keyframes vrg-folyamat-lukteto {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}

/* A mozgásérzékenységet tiszteletben tartjuk: a jelzés akkor is látszik,
   csak nem villog. */
@media (prefers-reduced-motion: reduce) {
    .urlap__folyamat::before {
        animation: none;
        opacity: 1;
    }
}

/* --- Köszönőoldal: részlegesen sikeres képfeltöltés --- */
.koszono__fajlhiba {
    margin-top: 1.5rem;
}

.koszono__fajlhiba-lista {
    display: block;
    margin-top: 0.6rem;
}

.koszono__fajlhiba-elem {
    display: block;
    font-weight: 500;
    font-size: 0.98rem;
    line-height: 1.5;
}

.koszono__fajlhiba-elem + .koszono__fajlhiba-elem {
    margin-top: 0.25rem;
}

/* A honeypot mező soha nem látszik, de nem is display:none —
   így a botok nagyobb eséllyel kitöltik. */
.mezo-csapda {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   10. Gyakori kérdések
   ---------------------------------------------------------------------------
   Natív <details>/<summary> — JavaScript nélkül is működik,
   billentyűzettel kezelhető, képernyőolvasó-barát.
   --------------------------------------------------------------------------- */

.gyik {
    margin: 0;
}

.gyik__cim {
    font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.3rem);
    margin-bottom: 1.75rem;
}

.gyik__lista {
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-halk);
    overflow: hidden;
}

.gyik__elem + .gyik__elem {
    border-top: 1px solid var(--szin-keret);
}

.gyik__kerdes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    /* Érinthetőség: legalább 44 px magas, kényelmes belső térköz. */
    min-height: 56px;
    padding: 1.15rem 1.3rem;

    cursor: pointer;
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--szin-sotet);

    /* A böngésző alapértelmezett nyilát elrejtjük — saját ikont használunk. */
    list-style: none;
}

.gyik__kerdes::-webkit-details-marker {
    display: none;
}

.gyik__kerdes:hover {
    background: var(--szin-hatter);
}

.gyik__kerdes-szoveg {
    flex: 1 1 auto;
    min-width: 0;
}

.gyik__ikon {
    flex: 0 0 auto;
    color: var(--szin-cta);
    font-size: 1.2rem;
    transition: transform 0.18s ease;
}

.gyik__elem[open] .gyik__kerdes {
    background: var(--szin-hatter);
}

.gyik__elem[open] .gyik__ikon {
    transform: rotate(180deg);
}

.gyik__valasz {
    padding: 0 1.3rem 1.4rem;
    color: var(--szin-szoveg-lagy);
    font-size: 1.0625rem;
    line-height: 1.72;
}

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

/* Nyomtatáskor minden válasz látszódjon. */
@media print {
    .gyik__valasz {
        display: block !important;
    }

    .gyik__ikon {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   11. Záró kapcsolatfelvétel
   ---------------------------------------------------------------------------
   Nem teljes szélességű sötét blokk: kártyaként ül a világos háttéren,
   így nem hat üresnek és nem nyomja el az oldal végét.
   --------------------------------------------------------------------------- */

.zaro {
    padding-block: 0 var(--szakasz-terkoz);
    background: var(--szin-feher);
}

.zaro__doboz {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    border-radius: var(--sugar-nagy);
    background: linear-gradient(150deg, var(--szin-sotet-alt) 0%, var(--szin-sotet) 55%, var(--szin-sotet-melyebb) 100%);
    color: var(--szin-szoveg-inverz);
    box-shadow: var(--arnyek-kozep);
}

.zaro__cim {
    color: var(--szin-feher);
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.05rem);
    margin-bottom: 0.6rem;
}

.zaro__szoveg {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.09rem;
    line-height: 1.65;
}

.zaro__gombok {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.zaro__gombok .gomb {
    width: 100%;
}

@media (min-width: 576px) {
    .zaro__gombok {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .zaro__gombok .gomb {
        width: auto;
        flex: 1 1 auto;
        min-width: 14rem;
    }
}

@media (min-width: 992px) {
    .zaro__doboz {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
        padding: 2.75rem 3rem;

        /* A három elem (szöveg, gombpár, visszahíváskérés) 992 és kb. 1200 px
           között nem fér el egy sorban. Törés nélkül a visszahíváskérés kilógna
           a dobozból, és a body overflow-x levágná. */
        flex-wrap: wrap;
    }

    .zaro__szoveg-resz {
        flex: 1 1 auto;
        max-width: 34rem;
    }

    .zaro__gombok {
        flex: 0 0 auto;
        flex-direction: column;
        min-width: 17rem;
    }

    .zaro__gombok .gomb {
        width: 100%;
        min-width: 0;
    }
}

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

.lablec {
    background: var(--szin-sotet-melyebb);
    color: rgba(255, 255, 255, 0.75);
    padding-block: 2.75rem 2rem;
    font-size: 1.0625rem;
}

.lablec__racs {
    display: grid;
    gap: 2.25rem;
}

.lablec__cim {
    color: var(--szin-feher);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

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

.lablec__lista li + li {
    margin-top: 0.35rem;
}

.lablec__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--erintheto-min);
    color: var(--szin-hatter-alt);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

.lablec__link:hover,
.lablec__link:focus {
    color: var(--szin-akcentus);
    text-decoration: underline;
}

.lablec__link--nagy {
    font-size: 1.32rem;
    font-weight: 800;
}

.lablec__halvany {
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.6;
}

.lablec__zaro {
    margin-top: 2.25rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.97rem;
}

.lablec__zaro p {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .lablec__racs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3rem;
    }
}

/* ---------------------------------------------------------------------------
   13. Rögzített alsó sáv (csak mobil)
   --------------------------------------------------------------------------- */

.also-sav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;

    /* KÉT fő konverziós út: HÍVÁS és AJÁNLATKÉRÉS (jóváhagyott VRG-szabály).
       A visszahíváskérés az oldalon marad másodlagos útként — a sávot nem
       zsúfoljuk három egyenrangú gombbal.

       Az ajánlatkérés SZÁNDÉKOSAN a szélesebb oszlop: ez a fő konverzió. */
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: var(--terkoz-2);

    padding: var(--terkoz-2);
    padding-bottom: calc(var(--terkoz-2) + env(safe-area-inset-bottom, 0px));

    /* NEM átlátszó: a mögötte gördülő tartalom nem ronthatja az olvashatóságot. */
    background: var(--szin-hatter);
    border-top: 1px solid var(--szin-border);
    box-shadow: var(--arnyek-sav);
}

/* KÉT gombnál az ikon a felirat MELLETT is elfér 320 px-en — a sáv így
   alacsonyabb marad, tehát kevesebb tartalmat takar el. */
.also-sav__gomb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--terkoz-2);

    min-height: var(--also-sav-gomb-magassag);
    padding: var(--terkoz-2) var(--terkoz-2);
    border-radius: var(--sugar);

    text-decoration: none;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-align: center;

    /* A felirat NEM törhet betűkre. */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.also-sav__gomb .ikon {
    --ikon-meret: 20px;
    flex: 0 0 auto;
}

/* JOBB gomb — elsődleges, tömör zöld, SÖTÉT felirattal. */
.also-sav__gomb--ajanlat {
    background: var(--szin-cta);
    color: var(--szin-szoveg);
}

.also-sav__gomb--ajanlat:hover,
.also-sav__gomb--ajanlat:focus {
    background: var(--szin-cta-hover);
    color: var(--szin-szoveg);
}

.also-sav__gomb--ajanlat:active {
    background: var(--szin-cta-aktiv);
}

/* A hívás gomb — NAVY kitöltés: erős kontrasztú, de nem versenyez az
   ajánlatkérés zöldjével. */
.also-sav__gomb--hivas {
    background: var(--szin-hivas);
    color: var(--szin-szoveg-inverz);
    border: 2px solid var(--szin-hivas);
}

.also-sav__gomb--hivas:hover,
.also-sav__gomb--hivas:focus {
    background: var(--szin-hivas-sotet);
    border-color: var(--szin-hivas-sotet);
    color: var(--szin-szoveg-inverz);
}

/* Ha nincs telefonszám, az ajánlatkérés kapja a teljes sávot. */
.also-sav--egy-gomb {
    grid-template-columns: 1fr;
}

/* A legkisebb kijelzőn tovább szűkítünk, hogy a feliratok olvashatók
   maradjanak és semmi ne lógjon ki. */
@media (max-width: 359px) {
    .also-sav             { gap: var(--terkoz-1); }
    .also-sav__gomb       { font-size: 0.875rem; padding-inline: var(--terkoz-1); gap: var(--terkoz-1); }
    .also-sav__gomb .ikon { --ikon-meret: 18px; }
}

/* 992 px felett nincs alsó sáv: ott a RAGADÓS fejlécben végig ott a
   telefonszám és az ajánlatkérő CTA — a két sáv együtt fölösleges lenne. */
@media (min-width: 992px) {
    .also-sav {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   14. Köszönő- és hibaoldal
   --------------------------------------------------------------------------- */

.kozepes-oldal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 3.25rem 4.25rem;
}

.kozepes-oldal__doboz {
    width: 100%;
    max-width: 42rem;
    padding: 2.25rem 1.35rem 2.5rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-nagy);
    background: var(--szin-feher);
    box-shadow: var(--arnyek-kozep);
    text-align: center;
}

.kozepes-oldal__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.35rem;
    border-radius: 50%;
    background: var(--szin-hivas-vilagos);
    color: var(--szin-hivas);
    font-size: 2.1rem;
}

.kozepes-oldal__cim {
    font-size: clamp(1.7rem, 1.25rem + 2vw, 2.35rem);
    margin-bottom: 0.9rem;
}

.ugyszam {
    display: inline-block;
    margin: 0.5rem 0 1.75rem;
    padding: 0.8rem 1.25rem;
    border: 1px dashed var(--szin-cta);
    border-radius: var(--sugar);
    background: var(--szin-cta-vilagos);
    color: var(--szin-sotet);
    font-size: 1.09rem;
    font-weight: 600;
}

.ugyszam strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    word-break: break-all;
}

@media (min-width: 576px) {
    .kozepes-oldal__doboz {
        padding: 3.25rem 2.75rem;
    }
}

/* ---------------------------------------------------------------------------
   15. Kis képernyők finomhangolása (320 px)
   --------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
    .logo__szoveg      { font-size: 0.96rem; }
    .logo__jel         { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.1rem; }
    .logo              { gap: 0.45rem; }
    .also-sav__gomb    { font-size: 0.82rem; }
    .gomb              { font-size: 1rem; padding-inline: 1.1rem; }
    .gomb--nagy        { font-size: 1.06rem; }
    .burok             { padding-inline: 0.9rem; }
    .urlap-kartya      { padding-inline: 0.95rem; }
    .urlap__blokk-sugo { padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   15/b. Egységes szövegméret nagyobb képernyőn
   ---------------------------------------------------------------------------
   A komponensek `rem` értékei a GYÖKÉR betűméretéhez igazodnak, nem a
   <body> méretéhez. Ha csak a törzs méretét növelnénk, a kártyák, az
   űrlap és a lábléc szövege APRÓBB maradna a törzsszövegnél. Ezért itt
   együtt emeljük mindet — így a hierarchia arányos marad.
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .lepes__szoveg,
    .jarmu-kartya__szoveg,
    .segitseg__szoveg,
    .erv__szoveg,
    .gyik__valasz,
    .lablec,
    .lablec__link,
    .urlap__cimke,
    .urlap__bemenet,
    .urlap__valaszto,
    .urlap__szovegdoboz {
        font-size: 1.125rem;
    }

    .gyik__kerdes          { font-size: 1.2rem; }
    .lablec__link--nagy    { font-size: 1.4rem; }
    .urlap__jelolo-szoveg  { font-size: 1.115rem; }
    .urlap__hiba           { font-size: 1.05rem; }
    .urlap__sugo           { font-size: 1.02rem; }
    .urlap__blokk-sugo     { font-size: 1.06rem; }
    .uzenet                { font-size: 1.09rem; }
    .bizalom__elem         { font-size: 1.06rem; }
    .urlap__alternativa    { font-size: 1.09rem; }
    .zaro__szoveg          { font-size: 1.15rem; }
    .hero__bevezeto        { font-size: 1.22rem; }
    .hero__pontositas      { font-size: 1.09rem; }
}

/* ---------------------------------------------------------------------------
   15/b. Jogi oldalak (adatkezelési tájékoztató)
   ---------------------------------------------------------------------------
   Hosszú, folyamatos szöveg. Mobil-first: nagy sorköz, kényelmes olvasási
   szélesség, tagolt szakaszok. A tartalom JavaScript nélkül is teljes.
   --------------------------------------------------------------------------- */

.jogi-oldal {
    padding: 1.75rem 0 2.5rem;
    background: var(--szin-feher);
}

.jogi-oldal__fejlec {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--szin-keret);
    margin-bottom: 1.5rem;
}

.jogi-oldal h1 {
    margin: 0 0 0.75rem;
    font-size: 1.7rem;
    line-height: 1.25;
}

.jogi-oldal__bevezeto {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--szin-halvany);
}

.jogi-oldal__verzio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0.9rem 0 0;
    font-size: 0.95rem;
    color: var(--szin-halvany);
}

.jogi-oldal__szakasz {
    margin-bottom: 2rem;
}

.jogi-oldal__szakasz h2 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--szin-elsodleges);
}

.jogi-oldal__szakasz h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.05rem;
}

.jogi-oldal__szakasz p,
.jogi-oldal__szakasz li {
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.jogi-oldal__szakasz p {
    margin: 0 0 0.9rem;
}

.jogi-oldal__szakasz ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.jogi-oldal__szakasz li {
    margin-bottom: 0.45rem;
}

/* Céges és hatósági adatok — a definíciós lista mobilon is olvasható marad. */
.jogi-oldal__adatok {
    margin: 0 0 1.1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar);
    background: var(--szin-hatter);
}

.jogi-oldal__adatok dt {
    font-size: 0.87rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--szin-halvany);
}

.jogi-oldal__adatok dd {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.jogi-oldal__adatok dd:last-child {
    margin-bottom: 0;
}

.jogi-oldal__zaras {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--szin-keret);
}

/* --- Kiemelt cselekvési blokk (pl. Cookie-beállítások megnyitása) ---------- */

.jogi-oldal__kiemelt {
    margin: var(--terkoz-5) 0;
    padding: var(--terkoz-4);
    border: 1px solid var(--szin-border);
    border-left: 3px solid var(--szin-cta);
    border-radius: var(--sugar-nagy);
    background: var(--szin-hatter-alt);
}

.jogi-oldal__kiemelt-cim {
    margin: 0 0 var(--terkoz-1);
    font-weight: 700;
    color: var(--szin-szoveg);
}

.jogi-oldal__kiemelt-szoveg {
    margin: 0 0 var(--terkoz-3);
    color: var(--szin-szoveg-masodlagos);
}

.jogi-oldal__kiemelt .gomb[hidden] { display: none; }

/* --- Jogi táblázatok -------------------------------------------------------

   MOBIL-FIRST: az alapállapot a KÁRTYÁS nézet. Így 768 px alatt egyetlen
   táblázat sem kényszeríti vízszintes görgetésre az oldalt. A `data-cimke`
   attribútumból jön a látható mezőnév, a HTML pedig végig valódi táblázat
   marad — a képernyőolvasó a fejléceket a `scope` alapján olvassa.
   --------------------------------------------------------------------------- */

/* A táblázatrendszer KÉT néven él: a jogi oldalak `jogi-tabla`, a tartalmi
   oldalak `adat-tabla` osztályt használnak (pl. a készpénz–átutalás
   összehasonlítás a `/keszpenzes-autofelvasarlas` landingen). A SZABÁLYOK
   AZONOSAK — ez nem új dizájnrendszer, csak beszédesebb név a nem jogi
   kontextusnak. */
.jogi-tabla-burok, .adat-tabla-burok {
    margin: var(--terkoz-4) 0;
}

.jogi-tabla, .adat-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

/* A fejlécsor kártyás nézetben felesleges: minden cella viseli a saját címkéjét. */
.jogi-tabla thead, .adat-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jogi-tabla tbody tr, .adat-tabla tbody tr {
    display: block;
    margin-bottom: var(--terkoz-3);
    padding: var(--terkoz-3);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-kicsi);
    background: var(--szin-felulet);
}

.jogi-tabla tbody tr:last-child, .adat-tabla tbody tr:last-child { margin-bottom: 0; }

.jogi-tabla tbody th, .adat-tabla tbody th,
.jogi-tabla tbody td, .adat-tabla tbody td {
    display: block;
    padding: var(--terkoz-1) 0;
    text-align: left;
    border: 0;
    overflow-wrap: anywhere;
}

/* A mezőnév a cellák FÖLÖTT, hogy mobilon is egyértelmű legyen, mit lát. */
.jogi-tabla tbody th::before, .adat-tabla tbody th::before,
.jogi-tabla tbody td::before, .adat-tabla tbody td::before {
    content: attr(data-cimke);
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--betu-mikro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--szin-szoveg-masodlagos);
}

.jogi-tabla tbody th, .adat-tabla tbody th {
    font-weight: 700;
    color: var(--szin-szoveg);
}

.jogi-tabla tbody td, .adat-tabla tbody td { color: var(--szin-szoveg-lagy); }

.jogi-tabla code, .adat-tabla code {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .jogi-oldal h1              { font-size: 2.1rem; }
    .jogi-oldal__szakasz h2     { font-size: 1.4rem; }
    .jogi-oldal__szakasz p,
    .jogi-oldal__szakasz li     { font-size: 1.08rem; }
    .jogi-oldal__bevezeto       { font-size: 1.15rem; }

    .jogi-oldal__adatok {
        display: grid;
        grid-template-columns: minmax(9rem, 14rem) 1fr;
        gap: 0.5rem 1.25rem;
        align-items: baseline;
    }

    .jogi-oldal__adatok dd      { margin-bottom: 0; }

    .jogi-oldal__zaras {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* --- 768 px felett valódi táblázatos nézet --- */

    .jogi-tabla, .adat-tabla { display: table; }

    .jogi-tabla thead, .adat-tabla thead {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .jogi-tabla thead th, .adat-tabla thead th {
        padding: var(--terkoz-2) var(--terkoz-3);
        text-align: left;
        vertical-align: bottom;
        border-bottom: 2px solid var(--szin-border-eros);
        font-size: var(--betu-mikro);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--szin-szoveg-masodlagos);
    }

    .jogi-tabla tbody tr, .adat-tabla tbody tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .jogi-tabla tbody tr:nth-child(even), .adat-tabla tbody tr:nth-child(even) { background: var(--szin-hatter-alt); }

    .jogi-tabla tbody th, .adat-tabla tbody th,
    .jogi-tabla tbody td, .adat-tabla tbody td {
        display: table-cell;
        padding: var(--terkoz-3);
        vertical-align: top;
        border-bottom: 1px solid var(--szin-border);
    }

    .jogi-tabla tbody th::before, .adat-tabla tbody th::before,
    .jogi-tabla tbody td::before, .adat-tabla tbody td::before { content: none; }

    .jogi-tabla--sutik  th:first-child, .adat-tabla--sutik  th:first-child { width: 22%; }
    .jogi-tabla--megorzes th:first-child, .adat-tabla--megorzes th:first-child { width: 30%; }
    .jogi-tabla--allapot th:first-child, .adat-tabla--allapot th:first-child { width: 28%; }
}

/* ---------------------------------------------------------------------------
   16. Belső, nem publikus komponensek
   ---------------------------------------------------------------------------
   Ezek a komponensek léteznek, de a nyilvános oldalakon NEM jelennek meg:
   morzsamenü (aloldalakhoz),
   sütisáv. A stílusuk itt marad, hogy bekapcsoláskor ne törjenek el.
   --------------------------------------------------------------------------- */

.morzsamenu {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--szin-keret);
    background: var(--szin-hatter);
}

.morzsamenu__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.morzsamenu__elem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--szin-halvany);
}

.morzsamenu__elem + .morzsamenu__elem::before {
    content: "/";
    color: var(--szin-keret);
}

.morzsamenu__elem a {
    color: var(--szin-halvany);
    text-decoration: none;

    /* Az ÉRINTŐFELÜLET legyen legalább 44 px magas, a morzsasáv vizuális
       magasságának növelése nélkül: a függőleges térközt a negatív külső
       térköz visszaveszi, így az elrendezés változatlan marad. */
    display: inline-block;
    padding-block: 0.75rem;
    margin-block: -0.75rem;
}

.morzsamenu__elem a:hover,
.morzsamenu__elem a:focus {
    text-decoration: underline;
}

.morzsamenu__elem [aria-current="page"] {
    color: var(--szin-szoveg);
    font-weight: 600;
}

/* --- HERO-VÁLTOZAT ---
       A morzsamenü a hero SÖTÉT GRAFIT felületén ül, annak legtetején. Nincs
       külön világos sávja, doboza, kerete és árnyéka: a fejléc és a hero így
       egybefüggő vizuális egység marad. A szélességet és a bal szélt a hero
       saját `.burok` eleme adja, ezért a morzsamenü pontosan a hero szövegével
       egy vonalban áll. */
.morzsamenu--hero {
    padding: 0;
    border: 0;
    background: transparent;
    /* Kompakt: mobilon sem tolja le indokolatlanul a hero tartalmát. */
    margin-bottom: 0.7rem;
}

.morzsamenu--hero .morzsamenu__lista {
    font-size: 0.8125rem;
    gap: 0.15rem 0.45rem;
}

.morzsamenu--hero .morzsamenu__elem {
    color: rgba(255, 255, 255, 0.62);
}

.morzsamenu--hero .morzsamenu__elem a {
    color: rgba(255, 255, 255, 0.88);
}

.morzsamenu--hero .morzsamenu__elem a:hover,
.morzsamenu--hero .morzsamenu__elem a:focus-visible {
    color: var(--szin-akcentus);
    text-decoration: underline;
}

/* Visszafogott elválasztó — se nem harsány, se nem olvashatatlan. */
.morzsamenu--hero .morzsamenu__elem + .morzsamenu__elem::before {
    color: rgba(255, 255, 255, 0.38);
}

/* Az aktuális oldal: jól olvasható, világos réz. */
.morzsamenu--hero .morzsamenu__elem [aria-current="page"] {
    color: var(--szin-akcentus);
    font-weight: 600;
}

@media (min-width: 992px) {
    .morzsamenu--hero {
        margin-bottom: 1rem;
    }

    .morzsamenu--hero .morzsamenu__lista {
        font-size: 0.875rem;
    }
}

.kep-helyorzo { margin: 0 0 1rem; }

.kep-helyorzo__keret {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--sugar);
    background: var(--szin-hatter);
}

.kep-helyorzo__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.kep-helyorzo__felirat {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: rgba(11, 27, 44, 0.85);
    color: var(--szin-szoveg-inverz);
    font-size: 0.75rem;
    line-height: 1.3;
}

.kep-helyorzo__cimke {
    align-self: flex-start;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--szin-cta);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.kep-helyorzo__sor { display: block; }

.kep-helyorzo__fajlnev {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.kep-helyorzo__alt {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--szin-halvany);
    font-style: italic;
}

.szoveg-hianyzik {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border: 1px dashed var(--szin-cta);
    border-radius: 4px;
    background: var(--szin-cta-vilagos);
    color: var(--szin-cta-aktiv);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   16/b. Hozzájárulás-kezelő — valódi modális ablak

   A fal első látogatáskor a képernyő közepén, elsötétített háttérrel jelenik
   meg. Nincs bezáró X, és háttérkattintásra vagy Escape-re sem záródik: ezt a
   consent.js kényszeríti ki. A döntési gombok a görgethető törzs ALATT,
   ragadós láblécben ülnek, ezért hosszú tartalomnál is elérhetők maradnak.
   --------------------------------------------------------------------------- */

/* MOBIL-FIRST: az alapérték a legszűkebb (320 px) képernyőre való; a nagyobb
   térközöket min-width töréspont adja hozzá. */
.suti-fal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--terkoz-2);

    /* A modal a mobil címsor alatt is középre kerül, és nem lóghat ki. */
    padding-bottom: max(var(--terkoz-2), env(safe-area-inset-bottom, 0px));
}

.suti-fal[hidden] { display: none; }

/* A háttéroldal görgetése áll, amíg a fal nyitva van. */
body.suti-fal-nyitva { overflow: hidden; }

.suti-fal__hatter {
    position: absolute;
    inset: 0;
    background: rgba(6, 32, 58, 0.72);
}

.suti-fal__ablak {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34rem;

    /* Szándékosan NEM 100vh: a mobil böngészők címsora alatt is elférjen. */
    max-height: min(92vh, 44rem);

    background: var(--szin-felulet);
    border-radius: var(--sugar-nagy);
    box-shadow: 0 18px 60px rgba(6, 32, 58, 0.45);
    overflow: hidden;
}

.suti-fal__nezet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.suti-fal__nezet[hidden] { display: none; }

/* --- Fejléc: rögzített, nem görgetődik el --- */

.suti-fal__fejlec {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    flex: 0 0 auto;
    padding: var(--terkoz-4) var(--terkoz-4) var(--terkoz-3);
    border-bottom: 1px solid var(--szin-border);
}

.suti-fal__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: var(--sugar-kicsi);
    background: var(--szin-cta-halvany);
    color: var(--szin-cta);
}

.suti-fal__ikon svg { width: 1.25rem; height: 1.25rem; }

.suti-fal__cim {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--szin-szoveg);
}

/* --- Törzs: EZ görgethető --- */

.suti-fal__torzs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--terkoz-3) var(--terkoz-4);
}

.suti-fal__szoveg {
    margin: 0 0 var(--terkoz-4);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--szin-szoveg-masodlagos);
}

.suti-fal__jogi {
    margin: var(--terkoz-4) 0 0;
    font-size: 0.875rem;
}

.suti-fal__jogi a { color: var(--szin-cta); }

/* --- Lábléc: a döntési gombok MINDIG elérhetők --- */

.suti-fal__lablec {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--terkoz-2);
    padding: var(--terkoz-3) var(--terkoz-4);
    background: var(--szin-hatter-alt);
    border-top: 1px solid var(--szin-border);
}

/* A három döntés AZONOS méretű és érintőfelületű: csak a szín különbözteti
   meg őket, a súlyuk nem. */
.suti-fal__gomb {
    width: 100%;
    min-height: var(--erintheto-min);
    justify-content: center;
    text-align: center;
    font-size: 0.9375rem;
}

.suti-fal__gomb--semleges {
    background: var(--szin-felulet);
    color: var(--szin-szoveg);
    border: 1px solid var(--szin-border-eros);
}

.suti-fal__gomb--semleges:hover,
.suti-fal__gomb--semleges:focus {
    background: var(--szin-hatter);
    color: var(--szin-szoveg);
    border-color: var(--szin-szoveg-masodlagos);
}

.suti-fal__gomb--beallitas {
    background: var(--szin-felulet);
    color: var(--szin-cta);
    border: 1px solid var(--szin-cta);
}

.suti-fal__gomb--beallitas:hover,
.suti-fal__gomb--beallitas:focus {
    background: var(--szin-cta-halvany);
    color: var(--szin-cta-aktiv);
    border-color: var(--szin-cta-hover);
}

.suti-fal__gomb--elfogad {
    background: var(--szin-siker);
    color: #FFFFFF;
    border: 1px solid var(--szin-siker);
}

.suti-fal__gomb--elfogad:hover,
.suti-fal__gomb--elfogad:focus {
    background: #19643E;
    color: #FFFFFF;
    border-color: #19643E;
}

/* --- Kategóriák a részletes nézetben --- */

.suti-kategoria {
    padding: var(--terkoz-4) 0;
    border-top: 1px solid var(--szin-border);
}

.suti-kategoria:first-child { border-top: 0; padding-top: 0; }

.suti-kategoria__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--terkoz-3);
    min-height: var(--erintheto-min);
}

.suti-kategoria__nev {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--szin-szoveg);
}

.suti-kategoria__leiras {
    margin: var(--terkoz-2) 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--szin-szoveg-masodlagos);
}

/* A „Mindig aktív" jelölés: látható, de nem kapcsolható. */
.suti-kategoria__allando {
    display: inline-flex;
    align-items: center;
    gap: var(--terkoz-2);
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--szin-siker);
}

.suti-kategoria__allando input { accent-color: var(--szin-siker); cursor: not-allowed; }
.suti-kategoria__allando label { cursor: not-allowed; }

/* --- Kapcsoló --- */

.suti-kapcsolo {
    position: relative;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 1.75rem;
}

.suti-kapcsolo__mezo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.suti-kapcsolo__cimke {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 999px;
    background: var(--szin-border-eros);
    transition: background var(--atmenet);
    cursor: pointer;
}

.suti-kapcsolo__cimke::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: var(--arnyek-finom);
    transition: transform var(--atmenet);
}

.suti-kapcsolo__mezo:checked + .suti-kapcsolo__cimke { background: var(--szin-siker); }
.suti-kapcsolo__mezo:checked + .suti-kapcsolo__cimke::after { transform: translateX(1.5rem); }

.suti-kapcsolo__mezo:focus-visible + .suti-kapcsolo__cimke {
    outline: 3px solid var(--szin-fokusz);
    outline-offset: 2px;
}

/* --- Sütilista (lenyitható, JavaScript nélkül is működik) --- */

.suti-lista {
    margin-top: var(--terkoz-3);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-kicsi);
    background: var(--szin-hatter);
}

.suti-lista__nyito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--terkoz-2);
    min-height: var(--erintheto-min);
    padding: var(--terkoz-2) var(--terkoz-3);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--szin-cta);
    list-style: none;
}

.suti-lista__nyito::-webkit-details-marker { display: none; }

.suti-lista__jel svg { width: 0.875rem; height: 0.875rem; transition: transform var(--atmenet); }
.suti-lista[open] .suti-lista__jel svg { transform: rotate(180deg); }

.suti-szolgaltatas {
    padding: var(--terkoz-3);
    border-top: 1px solid var(--szin-border);
}

.suti-szolgaltatas__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--terkoz-2);
    margin: 0 0 var(--terkoz-1);
}

.suti-szolgaltatas__nev { font-weight: 700; font-size: 0.875rem; color: var(--szin-szoveg); }

.suti-szolgaltatas__allapot {
    flex: 0 0 auto;
    padding: 0.125rem var(--terkoz-2);
    border-radius: 999px;
    background: var(--szin-siker-halvany);
    color: var(--szin-siker);
    font-size: 0.75rem;
    font-weight: 700;
}

.suti-szolgaltatas__szolgaltato {
    margin: 0 0 var(--terkoz-2);
    font-size: 0.8125rem;
    color: var(--szin-szoveg-masodlagos);
}

/* 320 px-en egymás alatt; szélesebb képernyőn két oszlop (lásd lentebb). */
.suti-tetel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--terkoz-1) var(--terkoz-2);
    margin: 0 0 var(--terkoz-2);
    padding: var(--terkoz-2);
    border-radius: var(--sugar-kicsi);
    background: var(--szin-felulet);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.suti-tetel:last-child { margin-bottom: 0; }
.suti-tetel dt { font-weight: 600; color: var(--szin-szoveg-masodlagos); margin-top: var(--terkoz-1); }
.suti-tetel dt:first-child { margin-top: 0; }
.suti-tetel dd { margin: 0; color: var(--szin-szoveg); overflow-wrap: anywhere; }
.suti-tetel code { font-size: 0.8125rem; overflow-wrap: anywhere; }

/* --- 360 px felett: két oszlop a sütiadatoknak, tágasabb belső térköz --- */

@media (min-width: 22.5rem) {
    .suti-fal { padding: var(--terkoz-4); padding-bottom: max(var(--terkoz-4), env(safe-area-inset-bottom, 0px)); }
    .suti-fal__fejlec { padding: var(--terkoz-5) var(--terkoz-5) var(--terkoz-3); }
    .suti-fal__torzs { padding: var(--terkoz-4) var(--terkoz-5); }
    .suti-fal__lablec { padding: var(--terkoz-4) var(--terkoz-5); }

    .suti-tetel { grid-template-columns: 5.5rem 1fr; }
    .suti-tetel dt { margin-top: 0; }
}

/* --- 416 px felett a három döntési gomb egy sorba fér --- */

@media (min-width: 26rem) {
    .suti-fal__lablec { grid-template-columns: repeat(3, 1fr); }
}

/* --- Nagyon alacsony képernyő (fekvő telefon): a törzs kap kevesebb helyet,
       a gombok akkor is látszanak. Ez MAGASSÁGRA szól, nem szélességre,
       ezért nem sérti a mobil-first elrendezési elvet. --- */

@media (max-height: 30rem) {
    .suti-fal { padding: var(--terkoz-2); }
    .suti-fal__ablak { max-height: 96vh; }
    .suti-fal__fejlec { padding: var(--terkoz-3) var(--terkoz-4) var(--terkoz-2); }
    .suti-fal__torzs { padding: var(--terkoz-3) var(--terkoz-4); }
    .suti-fal__lablec { padding: var(--terkoz-3) var(--terkoz-4); }
}

@media (prefers-reduced-motion: reduce) {
    .suti-kapcsolo__cimke,
    .suti-kapcsolo__cimke::after,
    .suti-lista__jel svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   17. Táblázatok és nyomtatás
   --------------------------------------------------------------------------- */

.tablazat-gorgetheto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media print {
    .also-sav,
    .menu-kapcsolo,
    .fejlec__hivas-mobil,
    .ugras-tartalomra {
        display: none !important;
    }

    body.van-also-sav {
        padding-bottom: 0;
    }

    .fejlec {
        position: static;
    }
}

/* ===========================================================================
   18. ÚJRAFELHASZNÁLHATÓ KOMPONENSEK — a designrendszer szerint
   ---------------------------------------------------------------------------
   MASTER specifikáció 6. lépése. Ezek a komponensek a főoldal, a szolgáltatási
   és a márkaoldalak közös vizuális alapját adják.

   Részletek: docs/DESIGNRENDSZER.md
   =========================================================================== */

/* ---------------------------------------------------------------------------
   18.1 Ikon — helyi SVG-sprite
   --------------------------------------------------------------------------- */

.ikon {
    /* A méret örökölhető a szövegtől, de felülírható a --ikon-meret változóval. */
    width: var(--ikon-meret, 1em);
    height: var(--ikon-meret, 1em);
    flex: 0 0 auto;
    /* A szöveg alapvonalához igazítva — így nem „lóg ki" a gombfeliratból. */
    vertical-align: -0.125em;
    fill: currentColor;
}

/* ---------------------------------------------------------------------------
   18.2 Fókuszjelölés — EGYSÉGES, az egész oldalon
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--szin-fokusz);
    outline-offset: 2px;
    /* A gyűrű AZONNAL jelenjen meg — a fókusznak nincs átmenete. */
    transition: none;
}

/* ---------------------------------------------------------------------------
   18.3 Másodlagos gomb — a telefonos út EGYENRANGÚ
   ---------------------------------------------------------------------------
   Nem kisebb és nem halványabb az elsődlegesnél, csak kevésbé tömör. */

.gomb--masodlagos {
    background: transparent;
    color: var(--szin-szoveg);
    border: 2px solid var(--szin-szoveg);
}

.gomb--masodlagos:hover {
    background: var(--szin-cta-halvany);
    border-color: var(--szin-cta);
    color: var(--szin-cta-hover);
}

/* Sötét felületen (hero, lábléc) világos szegéllyel. */
.gomb--masodlagos-inverz {
    background: transparent;
    color: var(--szin-szoveg-inverz);
    border: 2px solid rgba(255, 255, 255, 0.45);
}

.gomb--masodlagos-inverz:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--szin-szoveg-inverz);
    color: var(--szin-szoveg-inverz);
}

/* Letiltott állapot — nincs hover, egyértelmű jelzés. */
.gomb[disabled],
.gomb[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   18.4 Szolgáltatáskártya
   --------------------------------------------------------------------------- */

.szolg-kartya {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-3);
    height: 100%;
    padding: var(--terkoz-5);
    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-nagy);
    /* Alapállapotban NINCS árnyék — nem lebeg minden. */
    transition: border-color var(--atmenet), box-shadow var(--atmenet);
}

.szolg-kartya:hover,
.szolg-kartya:focus-within {
    border-color: var(--szin-cta);
    box-shadow: var(--arnyek-emelt);
}

.szolg-kartya__ikon {
    --ikon-meret: 32px;
    color: var(--szin-cta);
}

.szolg-kartya__cim {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
}

.szolg-kartya__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
}

.szolg-kartya__link {
    display: inline-flex;
    align-items: center;
    gap: var(--terkoz-2);
    /* A hivatkozás mindig a kártya ALJÁN, akkor is, ha rövidebb a szöveg. */
    margin-top: auto;
    min-height: var(--erintheto-min);
    color: var(--szin-cta);
    font-weight: 600;
    text-decoration: none;
}

.szolg-kartya__link:hover {
    color: var(--szin-cta-hover);
    text-decoration: underline;
}

.szolg-kartya__link .ikon {
    transition: transform var(--atmenet);
}

.szolg-kartya__link:hover .ikon {
    transform: translateX(3px);
}

@media (min-width: 768px) {
    .szolg-kartya { padding: var(--terkoz-6); }
}

/* ---------------------------------------------------------------------------
   18.5 Bizalmi elem — SZÁNDÉKOSAN NEM kártya
   ---------------------------------------------------------------------------
   Ez a blokk levegős: ikon + szöveg, vékony elválasztó vonallal. */

.bizalmi-lista {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bizalmi-elem {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
    padding-block: var(--terkoz-4);
    border-top: 1px solid var(--szin-border);
}

.bizalmi-lista > .bizalmi-elem:first-child {
    border-top: 0;
}

.bizalmi-elem__ikon {
    --ikon-meret: 24px;
    margin-top: 2px;
    color: var(--szin-cta);
}

.bizalmi-elem__cim {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.bizalmi-elem__szoveg {
    margin: var(--terkoz-1) 0 0;
    color: var(--szin-szoveg-lagy);
}

@media (min-width: 768px) {
    .bizalmi-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--terkoz-6);
    }

    /* Két oszlopban a MÁSODIK oszlop első eleménél sincs felső vonal. */
    .bizalmi-lista > .bizalmi-elem:nth-child(2) {
        border-top: 0;
    }
}

/* ---------------------------------------------------------------------------
   18.6 Speciális élethelyzet — kompakt csempe
   ---------------------------------------------------------------------------
   Ez az EGYETLEN blokk, ahol mobilon két oszlop megengedett, mert rövid
   címkékről van szó. 360 px alatt egy oszlopra vált (lásd lent). */

.elethelyzet-racs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--terkoz-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.elethelyzet {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    min-height: var(--erintheto-min);
    padding: var(--terkoz-4);
    background: var(--szin-hatter-alt);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar);
    color: var(--szin-szoveg);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color var(--atmenet), background-color var(--atmenet);
}

.elethelyzet:hover {
    background: var(--szin-cta-halvany);
    border-color: var(--szin-cta);
    color: var(--szin-cta-hover);
}

.elethelyzet__ikon {
    --ikon-meret: 24px;
    color: var(--szin-szoveg-masodlagos);
}

.elethelyzet:hover .elethelyzet__ikon {
    color: var(--szin-cta);
}

@media (max-width: 359px) {
    .elethelyzet-racs { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
    .elethelyzet-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .elethelyzet-racs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   18.7 Márkaelem — TIPOGRÁFIAI kártya, logó nélkül
   ---------------------------------------------------------------------------
   Gyártói logót NEM használunk (védjegy). A márkát a névtipográfia viszi. */

.marka-racs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Minden sor egyforma magas: a hosszabb márkanév (pl. Mercedes-Benz) sem
       boríthatja fel a rács ritmusát. */
    grid-auto-rows: 1fr;
    gap: var(--terkoz-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.marka-racs > li {
    display: flex;
}

.marka-racs > li > * {
    width: 100%;
}

.marka-elem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--terkoz-1);
    min-height: 72px;
    padding: var(--terkoz-4);
    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar);
    color: var(--szin-szoveg);
    text-decoration: none;
    transition: border-color var(--atmenet), box-shadow var(--atmenet);
}

.marka-elem:hover {
    border-color: var(--szin-cta);
    box-shadow: var(--arnyek-finom);
    color: var(--szin-szoveg);
}

.marka-elem__nev {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.marka-elem__alcim {
    color: var(--szin-szoveg-masodlagos);
    font-size: var(--betu-mikro);
}

@media (min-width: 576px) {
    .marka-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .marka-racs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   18.8 A rögzített alsó sáv elrejtése, amikor az ajánlatkérő látszik
   ---------------------------------------------------------------------------
   Különben eltakarná a mezőket és a Küldés gombot. A küszöb ugyanaz (25%),
   mint az `offer_form_view` mérési eseményé. */

.also-sav {
    transition: transform var(--atmenet), opacity var(--atmenet);
}

.also-sav--rejtve {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   18.9 Szekcióváltás — a szekciókat HÁTTÉRVÁLTÁS választja el
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   18.10 A kezdőoldal jóváhagyott tartalmi blokkjai
   ---------------------------------------------------------------------------
   A hosszabb SEO-szövegrészek NEM maradhatnak ki, de nem is lehetnek
   szövegfalak: keskeny sorhossz, nagy sorköz, tagolt bekezdések.
   --------------------------------------------------------------------------- */

.szakasz--keskeny {
    padding-block: var(--terkoz-7);
}

/* Folyó szöveg: 60–75 karakter sorhossz. */
.burok--keskeny p {
    max-width: 68ch;
}

.hero__mikroszoveg {
    margin-top: var(--terkoz-4);
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--betu-segéd);
    letter-spacing: 0.01em;
}

.hero__szoveg .gomb {
    justify-content: center;
}

/* --- Szolgáltatáskártyák rácsa --- */
.kartya-racs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--terkoz-4);
    margin-top: var(--terkoz-6);
}

@media (min-width: 768px) {
    .kartya-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .kartya-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Szakaszon belüli kép és záró CTA --- */
.szakasz__kep {
    margin-top: var(--terkoz-7);
}

/* KÖZÉPRE igazított kép, kulturált maximális szélességgel: a széles szakaszban
   nem tapad balra, és nem marad mellette nagy üres felület. */
.szakasz__kep--kozepre {
    max-width: 52rem;
    margin-inline: auto;
}

.szakasz__cta {
    margin-top: var(--terkoz-6);
}

.szakasz__cta .gomb {
    width: 100%;
}

/* A kép alatti CTA-k középre igazítva. Valamivel szélesebb, mint a kép, hogy a
   három út egyetlen sorban elférjen — törés csak akkor legyen, ha tényleg kell. */
.szakasz__cta--kozepre {
    max-width: 58rem;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .szakasz__cta .gomb { width: auto; }
}

/* ---------------------------------------------------------------------------
   18.10/b Kétoszlopos tartalmi elrendezések
   ---------------------------------------------------------------------------
   Mobilon MINDIG egy oszlop, logikus sorrendben (előbb a szöveg).
   --------------------------------------------------------------------------- */

/* Szöveg + konverziós kártya, desktopon kb. 60/40 arányban. */
.szoveg-kartya-racs,
.szoveg-kep-racs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--terkoz-6);
    align-items: start;
}

.szoveg-kartya-racs__szoveg p,
.szoveg-kep-racs__szoveg p {
    max-width: 68ch;
}

@media (min-width: 992px) {
    .szoveg-kartya-racs {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        gap: var(--terkoz-7);
    }

    .szoveg-kep-racs {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: var(--terkoz-7);
        align-items: center;
    }
}

/* --- Prémium grafit konverziós kártya --- */
.konverzios-kartya {
    padding: var(--terkoz-5);
    border-radius: var(--sugar-nagy);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(150deg, var(--szin-sotet-alt) 0%, var(--szin-sotet) 60%, var(--szin-sotet-melyebb) 100%);
    color: var(--szin-szoveg-inverz);
    box-shadow: var(--arnyek-emelt);
}

.konverzios-kartya__lista {
    display: grid;
    gap: var(--terkoz-3);
    margin: 0 0 var(--terkoz-5);
    padding: 0;
    list-style: none;
}

.konverzios-kartya__elem {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.konverzios-kartya__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-width: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(122, 201, 67, 0.18);
    color: var(--szin-akcentus);
}

.konverzios-kartya__ikon .ikon {
    --ikon-meret: 19px;
}

/* A kártyán belül a három út MINDIG egymás alatt fut, teljes szélességben.
   -----------------------------------------------------------------------
   Ez a kártya SOHA nem elég széles három gombhoz: a vízszintes elrendezés
   szótagokra, sőt betűkre törte a feliratokat. A szabály ezért `!important`
   nélkül, de MAGASABB specificitással (`.cta-harmas.cta-harmas--oszlop`) írja
   felül a 576 px-es sorosítást, függetlenül attól, hol áll a fájlban. */
.cta-harmas.cta-harmas--oszlop {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.cta-harmas.cta-harmas--oszlop .gomb {
    width: 100%;
    flex: 0 0 auto;
    max-width: none;
}

/* --- A jobb oldali fotó --- */
.szoveg-kep-racs__kep .kep__allomany {
    display: block;
    width: 100%;
    height: auto;
    /* A jóváhagyott 3:2 képarány marad; a szereplő arca nem vágódik le. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--sugar-nagy);
    box-shadow: var(--arnyek-emelt);
}

/* --- Pipás felsorolás („A teljes folyamatban segítünk") --- */
.pipa-lista {
    display: grid;
    gap: var(--terkoz-3);
    margin: var(--terkoz-5) 0;
    padding: 0;
    list-style: none;
}

.pipa-lista__elem {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
}

/* --- AZ IKON MÉRETE FÜGGETLEN A SZÖVEG HOSSZÁTÓL ---
   A hiba oka: az ikon burkolója flexelem volt `flex: 0 1 auto` alapértékkel,
   ezért hosszú, több sorba törő szöveg mellett ÖSSZENYOMÓDOTT — így soronként
   eltérő méretű ikonok keletkeztek.
   A megoldás a burkoló FIX doboza: nem zsugorodik, nem nyúlik, és a belső SVG
   mérete is rögzített. Egyetlen közös szabály, nem ikononkénti méretezés. */
.pipa-lista__ikon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;

    /* Se zsugorodás, se növekedés — a doboz mindig pontosan ekkora. */
    flex: 0 0 32px;
    flex-shrink: 0;
    flex-grow: 0;
    width: 32px;
    height: 36px;

    /* A belső SVG mérete is rögzített, nem a szövegtől öröklődik. */
    --ikon-meret: 20px;

    /* Optikai igazítás az első szövegsor tetejéhez. */
    padding-top: 3px;
    color: var(--szin-cta);
}

.pipa-lista__ikon .ikon {
    flex: 0 0 auto;
    width: var(--ikon-meret);
    height: var(--ikon-meret);
}

/* Asztali méret: fix 40 × 44 px doboz, változatlanul egységesen. */
@media (min-width: 992px) {
    .pipa-lista__ikon {
        flex: 0 0 40px;
        width: 40px;
        height: 44px;
        --ikon-meret: 22px;
    }
}

/* --- Érvek („Miért érdemes először ajánlatot kérni?") --- */
.erv-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--terkoz-5);
    margin: var(--terkoz-6) 0 0;
    padding: 0;
    list-style: none;
}

.erv {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
}

/* KÖR, nem tojás.
   A flex-elrendezés a fix méretű elemet is összenyomhatja, ha a szöveg
   hosszabb. Ezért kell EGYSZERRE: fix width/height, min-width, aspect-ratio
   és flex: 0 0 auto — bármelyik hiánya ellipszist eredményez. */
.erv__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--szin-cta-halvany);
    color: var(--szin-cta);
    margin-top: 2px;
}

.erv__ikon .ikon {
    --ikon-meret: 22px;
}

.erv__cim {
    margin: 0 0 var(--terkoz-1);
    font-size: 1.0625rem;
    font-weight: 600;
}

.erv__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
}

@media (min-width: 768px) {
    .erv-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Országos lefedettség --- */
.orszagos__racs {
    display: grid;
    gap: var(--terkoz-6);
}

@media (min-width: 992px) {
    .orszagos__racs {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

/* A városok NEM telephelyek: szemléltető felsorolás, nem címlista. */
.varos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terkoz-2);
    margin: var(--terkoz-4) 0;
    padding: 0;
    list-style: none;
}

.varos-lista__elem {
    padding: var(--terkoz-1) var(--terkoz-3);
    background: var(--szin-hatter-alt);
    border: 1px solid var(--szin-border);
    border-radius: var(--radius-cimke, 999px);
    color: var(--szin-szoveg-lagy);
    font-size: var(--betu-segéd);
}

.orszagos__cta-szoveg {
    margin-top: var(--terkoz-5);
}

/* ---------------------------------------------------------------------------
   18.11 CTA-pár — ajánlatkérés ÉS telefon egymás mellett
   ---------------------------------------------------------------------------
   A két konverziós út egyenrangú, ezért egyforma súlyú gombokat kapnak.
   Mobilon egymás alatt, teljes szélességben; 576 px felett egymás mellett. */

.cta-par {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-3);
}

.cta-par .gomb {
    width: 100%;
    justify-content: center;
}

@media (min-width: 576px) {
    .cta-par {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .cta-par .gomb {
        width: auto;
        flex: 0 1 auto;
    }
}

/* ---------------------------------------------------------------------------
   18.7/b HÁRMAS CTA — mind a három konverziós út egy blokkban
   ---------------------------------------------------------------------------
   Sorrend MINDEN nézetben: ajánlat → telefon → visszahívás.
   Mobilon egymás alatt, teljes szélességben; 992 px-től egy sorban.
   --------------------------------------------------------------------------- */

.cta-harmas {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-3);
}

.cta-harmas .gomb {
    width: 100%;
    justify-content: center;
}

/* 576 px-től egy sorba rendeződhetnek, DE csak addig, amíg tényleg elférnek.
   A `flex-wrap: wrap` + `flex: 0 1 auto` + a gombokra örökölt
   `min-width: min-content` együtt azt jelenti: ha három gomb nem fér el, a
   sor MEGTÖRIK — a felirat összenyomása helyett. */
@media (min-width: 576px) {
    .cta-harmas {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
    }

    .cta-harmas .gomb {
        width: auto;
        flex: 0 1 auto;
        max-width: 100%;
    }
}

/* --- Sáv változat: sötét, lekerekített doboz közvetlenül a hero alatt --- */
.cta-harmas--sav {
    padding: var(--terkoz-4);
    border-radius: var(--sugar-blokk);
    background: linear-gradient(150deg, var(--szin-sotet-alt) 0%, var(--szin-sotet) 60%, var(--szin-sotet-melyebb) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--arnyek-emelt);
}

/* A sávot a hero ALJÁRA emeljük, hogy a két blokk összetartozzon. */
.gyors-cta-sav {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--terkoz-6));
    margin-bottom: var(--terkoz-6);
}

@media (min-width: 992px) {
    .cta-harmas--sav {
        padding: var(--terkoz-5) var(--terkoz-6);
    }

    .gyors-cta-sav {
        margin-top: calc(-1 * var(--terkoz-7));
    }
}

/* ---------------------------------------------------------------------------
   18.12 „Miért minket válasszon?" — kiemelt sötét szekció
   --------------------------------------------------------------------------- */

.miert-minket {
    padding-block: var(--terkoz-9);
}

.elony-racs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--terkoz-6);
    margin: var(--terkoz-7) 0 0;
    padding: 0;
    list-style: none;
}

/* Az előnyelemek OPTIKAILAG IS középre igazítottak: kör, cím és leírás egy
   tengelyen áll, az oszlopok azonos szélességűek és azonos magasságúak.
   Korábban minden elem balra tapadt, ezért a blokk rendezetlennek hatott. */
.elony {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.elony__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--szin-cta);
    color: var(--szin-szoveg);
    margin-bottom: var(--terkoz-4);
}

.elony__ikon .ikon {
    --ikon-meret: 24px;
}

.elony__cim {
    margin: 0 0 var(--terkoz-2);
    color: var(--szin-szoveg-inverz);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
}

.elony__szoveg {
    margin: 0;
    /* Egységes, kulturált sorhossz — a szöveg nem tapad az oszlop széléhez. */
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.80);
}

/* A szekció alatti CTA-csoport a TELJES szekcióhoz képest középen áll. */
.miert-minket .szakasz__cta {
    margin-top: var(--terkoz-8);
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .elony-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .elony-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   18.13 Ügyfélvélemények
   ---------------------------------------------------------------------------
   A mintatartalom LÁTHATÓAN jelzi magát — nem tűnhet valódi véleménynek. */

.velemeny-racs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--terkoz-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.velemeny {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--terkoz-5);
    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-nagy);
}

.velemeny__jel {
    color: var(--szin-cta);
    font-size: 2.5rem;
    line-height: 0.6;
    margin-bottom: var(--terkoz-3);
}

.velemeny__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
}

.velemeny__szoveg p {
    margin: 0;
}

.velemeny__megjegyzes {
    display: block;
    margin-top: 2px;
    color: var(--szin-szoveg-masodlagos);
    font-weight: 400;
}

.velemeny__forras {
    margin: var(--terkoz-4) 0 0;
    padding-top: var(--terkoz-3);
    border-top: 1px solid var(--szin-border);
    color: var(--szin-szoveg-masodlagos);
    font-size: var(--betu-segéd);
    font-weight: 600;
}

@media (min-width: 768px) {
    .velemeny-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .velemeny-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   18.14 Márkakártya logóterülettel
   ---------------------------------------------------------------------------
   Rendezett, prémium blokk — NEM színes logófal:
     - fix logóterület + object-fit: contain, így semmi nem torzul;
     - MONOKRÓM, grafit megjelenés (grayscale + kontraszt);
     - a réz csak apró hover-kiemelés. */

.marka-elem--logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--terkoz-3);
    /* Egységes kártyamagasság — a rács nem ugrál. */
    min-height: 116px;
    padding: var(--terkoz-4);
    text-align: center;
}

/* FIX, NÉGYZETES logóterület.
   A logókészlet minden eleme 1:1 arányú, ezért négyzetes befoglaló terület
   adja a legegységesebb optikai méretet — minden márka pontosan ugyanakkora
   helyet kap, függetlenül attól, hogy emblémáról vagy szójelről van szó. */
.marka-elem__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

.marka-elem__logo img {
    width: 44px;
    height: 44px;
    /* Ha egy logó mégsem pontosan négyzetes, akkor sem torzul. */
    object-fit: contain;

    /*
     * SZŰRŐ NÉLKÜL.
     *
     * A logókészlet MÁR monokróm grafit tónusban érkezett, és több logóban
     * fehér negatív részlet is van (pl. a Mercedes csillag belseje). Egy
     * `brightness(0)` típusú szűrő ezeket is feketére váltaná, és a rajzolat
     * összeolvadna. A nyugodt összképet így az áttetszőség adja.
     */
    opacity: 0.85;
    transition: opacity var(--atmenet);
}

/* Hoverben a logó egyszerűen erősebb — a réz a névnél jelenik meg. */
.marka-elem--logos:hover .marka-elem__logo img {
    opacity: 1;
}

/* Ha egy márkához még nincs logófájl: visszafogott tipográfiai jel.
   Így a rács SOHA nem törik el és nem lesz törött kép. */
.marka-elem__jel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--szin-hatter-alt);
    border: 1px solid var(--szin-border);
    color: var(--szin-szoveg-masodlagos);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

/* MOBIL-FIRST: az alapérték a legkisebb kijelzőé, ahol a leghosszabb
   márkanévnek (Mercedes-Benz) is egy sorban kell elférnie. */
.marka-elem--logos .marka-elem__nev {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

@media (min-width: 360px) {
    .marka-elem--logos .marka-elem__nev {
        font-size: 0.9375rem;
    }
}

.marka-elem--logos:hover .marka-elem__nev {
    color: var(--szin-cta-hover);
}

/* ---------------------------------------------------------------------------
   18.15 Visszahíváskérés — helyben lenyíló, másodlagos konverziós út
   ---------------------------------------------------------------------------
   VILÁGOS kártyafelületen él (`.urlap-alternativa`), az ajánlatkérő alatt.
   SZÁNDÉKOSAN nem harmadik óriási gomb: a nyitóelem visszafogott, de jól
   észrevehető. Natív <details>, ezért JavaScript nélkül is nyitható.

   A ZÁRT ÁLLAPOT NEM LEHET ÜRES SÁV. A nyitóelem MINDIG olvasható feliratot
   mutat („Visszahívást kérek"), mellette a nyitást jelző chevronnal. Korábban
   a felirat a sötét blokkból örökölt FEHÉR színt vitte, ezért a világos
   kártyán láthatatlan volt — a látogató egy üres, ikonos csíkot látott. */

.visszahivas {
    margin-top: var(--terkoz-1);
}

.visszahivas__nyito {
    display: flex;
    align-items: center;
    gap: var(--terkoz-2);
    min-height: var(--erintheto-min);
    padding: var(--terkoz-3);
    background: var(--szin-hatter-alt);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar);
    color: var(--szin-szoveg);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background var(--atmenet), border-color var(--atmenet);
}

.visszahivas__nyito:hover,
.visszahivas__nyito:focus-visible {
    background: var(--szin-hivas-vilagos);
    border-color: var(--szin-border-eros);
}

.visszahivas__nyito::-webkit-details-marker {
    display: none;
}

.visszahivas__nyito .ikon {
    --ikon-meret: 20px;
    color: var(--szin-elsodleges);
}

.visszahivas__nyil {
    margin-left: auto;
    transition: transform var(--atmenet);
}

.visszahivas[open] .visszahivas__nyil {
    transform: rotate(180deg);
}

/* A lenyíló tartalom a kártyán belül ül, ezért NEM kap újabb dobozt:
   dupla keret és dupla belső térköz csak szűkítené az űrlapot. */
.visszahivas__tartalom {
    margin-top: var(--terkoz-4);
    color: var(--szin-szoveg);
}

.visszahivas__bevezeto {
    margin: 0 0 var(--terkoz-4);
    color: var(--szin-szoveg-lagy);
}

.visszahivas__urlap .urlap__mezo {
    margin-bottom: var(--terkoz-4);
}

.visszahivas__idoszak {
    border: 0;
    margin: 0 0 var(--terkoz-4);
    padding: 0;
}

.visszahivas__idoszak .urlap__cimke {
    padding: 0;
}

.visszahivas__tartalom .urlap__mikroszoveg {
    margin: var(--terkoz-3) 0 0;
    color: var(--szin-szoveg-masodlagos);
    font-size: var(--betu-segéd);
}

/* --- Időszakválasztó: nagy, ujjal kényelmesen célozható kártyák --- */
.valaszto-sor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terkoz-2);
    margin-top: var(--terkoz-2);
}

.valaszto-kartya {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--gomb-magassag);
    padding: var(--terkoz-2) var(--terkoz-4);
    background: var(--szin-felulet);
    border: 1.5px solid var(--szin-border-eros);
    border-radius: var(--sugar);
    color: var(--szin-szoveg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--atmenet), background-color var(--atmenet);
}

.valaszto-kartya:hover {
    border-color: var(--szin-szoveg-masodlagos);
}

/* A rádiógomb rejtve, de FÓKUSZOLHATÓ marad: billentyűzettel is működik. */
.valaszto-kartya input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.valaszto-kartya:has(input:checked),
.valaszto-kartya--aktiv {
    background: var(--szin-cta-halvany);
    border-color: var(--szin-cta);
    color: var(--szin-cta-hover);
}

.valaszto-kartya:has(input:focus-visible) {
    outline: 2px solid var(--szin-fokusz);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   18.16 Sikeres beküldés visszajelzése (köszönőoldalak)
   --------------------------------------------------------------------------- */

.siker-doboz {
    text-align: center;
    padding: var(--terkoz-7) var(--terkoz-5);
    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-blokk);
}

.siker-doboz__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    min-width: 64px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--szin-siker-halvany);
    color: var(--szin-siker);
    margin-bottom: var(--terkoz-5);
}

.siker-doboz__ikon .ikon {
    --ikon-meret: 32px;
}

.siker-doboz__cim {
    margin: 0 0 var(--terkoz-4);
    font-size: var(--betu-h2);
    line-height: var(--sorkoz-cim);
}

.siker-doboz__szoveg {
    margin: 0 auto var(--terkoz-6);
    max-width: 40ch;
    color: var(--szin-szoveg-lagy);
}

.siker-doboz__gombok .gomb {
    width: 100%;
}

.siker-doboz__telefon {
    margin: var(--terkoz-5) 0 0;
    color: var(--szin-szoveg-masodlagos);
    font-size: var(--betu-segéd);
}

@media (min-width: 576px) {
    .siker-doboz__gombok .gomb { width: auto; }
}

/* --- Tartalmi kép komponens --- */
.kep {
    display: block;
}

.kep__allomany {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sugar-kep);
}

.szakasz--alt   { background: var(--szin-hatter-alt); }
.szakasz--sotet {
    background: var(--szin-sotet);
    color: var(--szin-szoveg-inverz);
}

.szakasz--sotet h1,
.szakasz--sotet h2,
.szakasz--sotet h3 {
    color: var(--szin-szoveg-inverz);
}


/* A láblécben lévő sütibeállítás-gomb a szomszédos hivatkozásokkal azonos
   megjelenésű, de gomb. JavaScript nélkül nincs mit beállítani, ezért rejtve
   indul, és a hozzájárulás-kezelő mutatja meg. */
.lablec__gomb {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.lablec__gomb[hidden] {
    display: none;
}


/* ---------------------------------------------------------------------------
   Szolgáltatási landing (/autofelvasarlas)
   ---------------------------------------------------------------------------
   Csak az itt megjelenő ÚJ elemek stílusa. Minden más a meglévő szakasz-,
   rács-, gomb- és képkomponensekből épül, a márkatokenekből — beégetett
   HEX érték nincs.
   --------------------------------------------------------------------------- */

/* Felső címke a hero H1 fölött: kicsi, réz, ritkított — nem CTA és nem címsor. */
.hero__cimke {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--szin-akcentus);
}

/* A felsorolásokat bevezető mondat: nem címsor, de elkülönül a folyószövegtől. */
.szakasz__kiemelt-bevezeto {
    margin-top: var(--terkoz-6);
    margin-bottom: var(--terkoz-4);
}

/* Szakaszon belüli alcím (H3), amely NEM egy felsorolás eleme.
   MIÉRT KÜLÖN OSZTÁLY? Az `.erv__cim` a kategórialisták tételcíme; ha egy
   lezáró vagy elhatároló alcím is azt viselné, a kategóriák száma sem
   szemantikailag, sem automatikus ellenőrzéssel nem lenne megállapítható. */
.szakasz__alcim {
    margin: 0 0 var(--terkoz-1);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* A járműhelyzetek címsora hivatkozás is lehet, ha a céloldal már létezik. */
.erv__cim a {
    color: inherit;
    text-decoration-color: var(--szin-akcentus);
    text-underline-offset: 3px;
}

.erv__cim a:hover,
.erv__cim a:focus-visible {
    color: var(--szin-cta);
}

/* Kapcsolódó szolgáltatások — egyszerű, jól tapintható lista.
   Az elemek addig szövegesek, amíg az adott landing nem létezik. */
.kapcsolodo-lista {
    display: grid;
    gap: 0;
    margin: var(--terkoz-5) 0 0;
    padding: 0;
    list-style: none;
}

.kapcsolodo-lista__elem {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    /* Érintőfelület: legalább 44 px magas sor. */
    min-height: 44px;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--szin-keret);
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.kapcsolodo-lista__elem:last-child {
    border-bottom: 0;
}

.kapcsolodo-lista__ikon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--szin-akcentus);
}

.kapcsolodo-lista__elem a {
    color: var(--szin-szoveg);
    font-weight: 600;
}

.kapcsolodo-lista__elem a:hover,
.kapcsolodo-lista__elem a:focus-visible {
    color: var(--szin-cta);
}

/* A céloldal nélküli tétel nem néz ki kattinthatónak. */
.kapcsolodo-lista__elem > span:not(.kapcsolodo-lista__ikon) {
    color: var(--szin-szoveg-masodlagos);
}

@media (min-width: 768px) {
    .kapcsolodo-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--terkoz-6);
    }
}

/* ---------------------------------------------------------------------------
   26. Szolgáltatási landingek — csak a hero VÁGÁSPONTJA tér el
   ---------------------------------------------------------------------------
   MIÉRT KELL? A kezdőoldali és az /autofelvasarlas hero fotóján a jármű a kép
   JOBB oldalán áll, ezért az alapértelmezett vágás jobbra tolt (68% / 62% / 58%).
   A haszongépjármű-, a sérült autós és a roncsautós felvételen viszont a
   szereplő BALRA áll, a járművek középen és jobbra — a jobbra tolt vágás
   levágná a férfit.

   Ezért itt BALRA HÚZOTT vágás kell. Az első kettőnél a középre igazítás
   elegendő; a roncsautós felvételnél — ahol a szereplő még beljebb áll a bal
   szélen — ennél is balrább kell húzni (lásd a blokk végén). Új hero-változatot
   egyik esetben SEM vezetünk be:
   ez a módosító kizárólag az `object-position` értékét írja felül, és EGYETLEN,
   közös szabályból dolgozik — nem oldalanként ismételt CSS-blokkból. Ezeknek a
   szabályoknak a fájl VÉGÉN kell állniuk, mert az alapértelmezéseket a fenti
   `@media` blokkok azonos súlyú szabályai adják. */

.hero__kep--haszongepjarmu img,
.hero__kep--serult-torott img { object-position: center center; }

@media (min-width: 992px) {
    .hero__kep--haszongepjarmu img,
    .hero__kep--serult-torott img { object-position: center center; }
}

@media (min-width: 1440px) {
    .hero__kep--haszongepjarmu img,
    .hero__kep--serult-torott img { object-position: center center; }
}

/* A RONCSAUTÓS felvételen a munkatárs még a fenti kettőnél is közelebb áll a
   kép bal széléhez, a hiányos autó eleje pedig középen és jobbra van. Középre
   igazított vágásnál 992 px felett — ahol a kép a hero jobb oldalát tölti ki, és
   ezért OLDALT vágódik — az arc a sötétbe olvadó bal peremre esne. A 25%-os
   vízszintes igazítás mindkét motívumot képben tartja.

   Ez ugyanaz a KÖZÖS rendszer, csak más értékkel: egyetlen tulajdonságot ír
   felül, ugyanebben a blokkban — nem oldalankénti CSS-fájl és nem hack.
   992 px alatt a kép TELJES szélessége látszik (csak függőlegesen vágódik),
   ezért ott a vízszintes érték nem változtat semmit. */
.hero__kep--roncsauto img { object-position: 25% center; }

@media (min-width: 992px) {
    .hero__kep--roncsauto img { object-position: 25% center; }
}

@media (min-width: 1440px) {
    .hero__kep--roncsauto img { object-position: 25% center; }
}

/* A MŰSZAKI HIBÁS felvételen három motívumot kell képben tartani: a munkatárs
   arcát (a forráskép ~27%-ánál), a nyitott motorháztetőt (~33–78%) és az autó
   elejét (~38–80%). 992 px felett a hero jobb oldali képsávja KESKENYEBB, mint
   e három motívum együttes szélessége, ezért teljes lefedés nincs — a vágást
   arra kell hangolni, hogy MINDHÁROM értelmezhető maradjon.

   Az alapértelmezett 58–68%-os igazítás a férfi arcát a bal, sötétbe olvadó
   peremre tolná (ott a takaróréteg ~0,9 fedettségű), a roncsautós 25% viszont
   ehhez a felvételhez már túl sokat vágna le az autó elejéből. A 30%-os érték
   az arcot a takaróréteg olvasható sávjába hozza, a motorháztetőt teljesen,
   a hűtőrácsot pedig lényegében egészben bent tartja.

   Ez ugyanaz a KÖZÖS rendszer, csak más értékkel: egyetlen tulajdonságot ír
   felül, ugyanebben a blokkban — nem oldalankénti CSS-fájl és nem hack.
   992 px alatt a kép TELJES szélessége látszik (csak függőlegesen vágódik),
   ezért ott a vízszintes érték nem változtat semmit. */
.hero__kep--muszaki-hibas img { object-position: 30% center; }

@media (min-width: 992px) {
    .hero__kep--muszaki-hibas img { object-position: 30% center; }
}

@media (min-width: 1440px) {
    .hero__kep--muszaki-hibas img { object-position: 30% center; }
}

/* A KÉSZPÉNZES felvételen négy motívumot kell képben tartani: az eladó arcát
   (a forráskép ~26–40%-ánál), a kulcsot (~40–47%), az átadott készpénzt
   (~48–62%) és az autó elejét (a bal alsó sávban). A tényleges közlendő —
   kulcs és pénz egyszerre — a kép KÖZEPÉN van, ezért itt sem a bal szélre
   húzott, sem az alapértelmezett jobbra tolt vágás nem jó: az előbbi a pénzt,
   az utóbbi az arcot vágná le.

   A 39%-os igazítás a kulcs–készpénz párost a képsáv közepén tartja, az arcot
   pedig a sötét takaróréteg olvasható sávjába hozza.

   Ez ugyanaz a KÖZÖS rendszer, csak más értékkel: egyetlen tulajdonságot ír
   felül, ugyanebben a blokkban — nem oldalankénti CSS-fájl és nem hack.
   992 px alatt a kép TELJES szélessége látszik (csak függőlegesen vágódik),
   ezért ott a vízszintes érték nem változtat semmit. */
.hero__kep--keszpenzes img { object-position: 39% center; }

@media (min-width: 992px) {
    .hero__kep--keszpenzes img { object-position: 39% center; }
}

@media (min-width: 1440px) {
    .hero__kep--keszpenzes img { object-position: 39% center; }
}

/* A TELJES KÖRŰ ÜGYINTÉZÉS felvételén négy motívumot kell képben tartani: a
   munkatárs arcát (a forráskép ~30–40%-ánál), a dokumentummappát (~35–48%), az
   autókulcsot (~36–41%) és az autót (~46–86%). A tényleges közlendő — arc,
   iratok és kulcs — a kép bal-közép harmadában van, ezért az alapértelmezett,
   jobbra tolt 58–68%-os igazítás az arcot a sötétbe olvadó bal peremre vinné.

   A 40%-os érték az arcot és a dokumentummappát a takaróréteg olvasható
   sávjába hozza, az autót pedig lényegében egészben bent tartja.

   Ez ugyanaz a KÖZÖS rendszer, csak más értékkel: egyetlen tulajdonságot ír
   felül, ugyanebben a blokkban — nem oldalankénti CSS-fájl és nem hack.
   992 px alatt a kép TELJES szélessége látszik (csak függőlegesen vágódik),
   ezért ott a vízszintes érték nem változtat semmit. */
.hero__kep--teljes-koru img { object-position: 40% center; }

@media (min-width: 992px) {
    .hero__kep--teljes-koru img { object-position: 40% center; }
}

@media (min-width: 1440px) {
    .hero__kep--teljes-koru img { object-position: 40% center; }
}

/* ===========================================================================
   27. VRG globális CTA-k és mikrointerakciók
   ---------------------------------------------------------------------------
   Az arculat (04_VRG_ARCULATI_KEZIKONYV_V1.md 6. és 10.) két globális elemet
   ír elő minden nyilvános oldalra:

     - ASZTALON  jobb oldali lebegő telefonhívás CTA,
     - MOBILON   rögzített alsó sáv (hívás + ajánlatkérés) — lásd 13. szakasz.

   Ehhez jönnek a visszafogott mikrointerakciók. Mindegyikre igaz:
     - nem késleltetik a tartalom vagy a CTA megjelenését,
     - nem okoznak elrendezés-eltolódást (csak opacity és transform),
     - nem villognak és nem ismétlődnek végtelenül,
     - `prefers-reduced-motion` esetén kikapcsolnak.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   27.1 Asztali lebegő telefonhívás CTA
   ---------------------------------------------------------------------------
   MOBIL-FIRST: alapból REJTETT. Mobilon a rögzített alsó sáv viszi a hívást;
   két lebegő elem egyszerre zavarna és takarna. 992 px-től jelenik meg —
   pontosan ott, ahol az alsó sáv eltűnik.
   --------------------------------------------------------------------------- */

.lebego-telefon {
    display: none;
}

@media (min-width: 992px) {

    /* KÖR ALAKÚ, 60 px-es gomb a jobb alsó sarokban.
       -----------------------------------------------------------------------
       A korábbi feliratos hasáb ~233 px széles volt és ráült a tartalomsáv
       jobb szélére. A kör alig 60 px-t foglal, tehát szöveget ténylegesen nem
       takar. A felület NAVY (a telefonos út színe), a márkajegyet a zöld
       gyűrű adja — a zöld így az ajánlatkérésé marad. */
    .lebego-telefon {
        position: fixed;
        right: var(--terkoz-5);
        bottom: var(--terkoz-5);
        z-index: 1029;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 60px;
        height: 60px;
        aspect-ratio: 1 / 1;
        padding: 0;
        border-radius: 50%;

        background: var(--szin-hivas);
        color: var(--szin-szoveg-inverz);
        /* A zöld gyűrű: márkajegy, nem felület. */
        box-shadow: 0 0 0 3px var(--szin-cta), 0 10px 26px rgba(6, 32, 58, 0.30);

        text-decoration: none;

        transition: background-color var(--atmenet), transform var(--atmenet),
                    box-shadow var(--atmenet), opacity var(--atmenet);
    }

    .lebego-telefon:hover,
    .lebego-telefon:focus-visible {
        background: var(--szin-hivas-sotet);
        color: var(--szin-szoveg-inverz);
        transform: translateY(-3px);
        box-shadow: 0 0 0 3px var(--szin-cta-hover), 0 14px 32px rgba(6, 32, 58, 0.38);
    }

    .lebego-telefon__ikon {
        display: inline-flex;
        --ikon-meret: 24px;
    }

    /* --- „Hívás" buborék: csak hoverre és billentyűzetes fókuszra ---
           Tisztán dekoratív ismétlés (a gomb `aria-label`-je hordozza a
           tényleges információt), ezért a sablonban `aria-hidden`. */
    .lebego-telefon__bubi {
        position: absolute;
        right: calc(100% + 12px);
        top: 50%;

        padding: 0.4rem 0.75rem;
        border-radius: var(--sugar-kicsi);

        background: var(--szin-sotet-melyebb);
        color: var(--szin-szoveg-inverz);
        box-shadow: var(--arnyek-emelt);

        font-size: var(--betu-segéd);
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;

        opacity: 0;
        transform: translate(6px, -50%);
        pointer-events: none;
        transition: opacity var(--atmenet), transform var(--atmenet);
    }

    /* A buborék hegye. */
    .lebego-telefon__bubi::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-left-color: var(--szin-sotet-melyebb);
        transform: translateY(-50%);
    }

    .lebego-telefon:hover .lebego-telefon__bubi,
    .lebego-telefon:focus-visible .lebego-telefon__bubi {
        opacity: 1;
        transform: translate(0, -50%);
    }

    /* ELREJTŐZIK, amikor az ajánlatkérő látszik — ugyanaz a szabály és
       ugyanaz a 25%-os küszöb, mint a mobil alsó sávnál. Így a lebegő gomb
       soha nem takarja el az űrlap mezőit vagy a Küldés gombot. */
    .lebego-telefon--rejtve {
        transform: scale(0.6);
        opacity: 0;
        pointer-events: none;
    }
}

/* ---------------------------------------------------------------------------
   27.2 Scroll-reveal — finom fade + translate belépés
   ---------------------------------------------------------------------------
   A jelölést a sablon adja (`data-belepo`), az állapotot a oldal.js kapcsolja
   (`belepo--lathato`).

   FONTOS: JavaScript NÉLKÜL is látszania kell mindennek. Ezért a kiindulási
   (rejtett) állapotot CSAK akkor kapcsoljuk be, ha a JS ténylegesen elindult,
   és ezt a <html> elemre tett `js-belepo` osztállyal jelezte. Enélkül a
   szabály nem érvényesül, tehát a tartalom azonnal olvasható.
   --------------------------------------------------------------------------- */

.js-belepo [data-belepo] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--atmenet-belepo), transform var(--atmenet-belepo);
    /* A lépcsőzetes indítást a sablon `--belepo-keses` értéke adja. */
    transition-delay: var(--belepo-keses, 0ms);
}

.js-belepo [data-belepo].belepo--lathato {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------------
   27.3 Hero betöltési animáció
   ---------------------------------------------------------------------------
   Rövid, egyszeri belépés. A `both` kitöltés miatt a végállapot marad
   érvényben, és mivel csak opacity/transform mozog, elrendezés-eltolódás
   nem keletkezik.
   --------------------------------------------------------------------------- */

@keyframes vrg-hero-belepo {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* A HERO CÍMSORA SOHA NEM MARADHAT LÁTHATATLAN.
   -----------------------------------------------------------------------
   Az animáció `opacity: 0` állapotból indul. Ha bármiért nem futna le —
   letiltott JavaScript, csökkentett mozgásigény, animációkat nem futtató
   böngésző vagy beágyazott nézet —, az oldal legfontosabb szövege
   olvashatatlan maradna.

   Ezért UGYANAZ A KAPU vonatkozik rá, mint a scroll-revealre: csak akkor
   indul, ha a `oldal.js` ténylegesen elhelyezte a `js-belepo` osztályt a
   <html> elemen. Enélkül a hero azonnal, teljes láthatósággal jelenik meg. */
.js-belepo .hero__szoveg > * {
    animation: vrg-hero-belepo 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js-belepo .hero__szoveg > *:nth-child(1) { animation-delay: 0ms; }
.js-belepo .hero__szoveg > *:nth-child(2) { animation-delay: 60ms; }
.js-belepo .hero__szoveg > *:nth-child(3) { animation-delay: 120ms; }
.js-belepo .hero__szoveg > *:nth-child(4) { animation-delay: 180ms; }
.js-belepo .hero__szoveg > *:nth-child(5) { animation-delay: 240ms; }

/* ---------------------------------------------------------------------------
   27.4 Megcsillanás a kiemelt CTA-n
   ---------------------------------------------------------------------------
   Az arculat RITKA, diszkrét fénycsíkot enged meg a fő CTA-n. Ezért:
     - CSAK a hero elsődleges gombján fut,
     - CSAK EGYSZER, a betöltés után (nincs loop, nincs pulzálás),
     - a felirat olvashatóságát nem rontja (a csík a tartalom ALATT halad).
   --------------------------------------------------------------------------- */

.hero__gombok .gomb--cta {
    position: relative;
    overflow: hidden;
    /* Saját rétegkontextus: a `z-index: -1` csík nem eshet a gomb háttere mögé. */
    isolation: isolate;
}

.hero__gombok .gomb--cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    z-index: -1;

    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;

    animation: vrg-csillan 900ms ease-out 1200ms 1 both;
}

@keyframes vrg-csillan {
    from { left: -60%; }
    to   { left: 130%; }
}

/* ---------------------------------------------------------------------------
   27.5 Csökkentett mozgásigény
   ---------------------------------------------------------------------------
   A fájl elején lévő általános szabály minden animációt és átmenetet leállít.
   Itt azt biztosítjuk, hogy a belépő elemek ilyenkor is LÁTHATÓK legyenek —
   különben a `data-belepo` kiindulási állapotában ragadnának.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .js-belepo [data-belepo] {
        opacity: 1;
        transform: none;
    }

    .hero__gombok .gomb--cta::after {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   27.6 Kisebb elrendezési kiegészítések a kezdőoldalhoz
   --------------------------------------------------------------------------- */

/* NÉGY előnyelem a sötét szekcióban: három oszlopnál 3+1 törés keletkezne. */
@media (min-width: 992px) {
    .elony-racs--negy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A jóváhagyott kezdőoldali fotók 16:9 vágásúak; a kétoszlopos blokkban ne
   vágjuk őket 3:2-re, mert a szereplő és a jármű aránya elromlana. */
.szoveg-kep-racs__kep--szeles .kep__allomany {
    aspect-ratio: 16 / 9;
}

/* A hero alatti kiegészítő út („Kérj visszahívást") — halk, de kattintható. */
.hero__mikroszoveg a {
    color: var(--szin-cta);
    font-weight: 700;
    text-underline-offset: 3px;
}

.hero__mikroszoveg a:hover,
.hero__mikroszoveg a:focus-visible {
    color: var(--szin-feher);
}

/* --- Az ajánlatkérő blokk telefonos és visszahívásos alternatívája --- */
.urlap-alternativak {
    display: grid;
    gap: var(--terkoz-4);
    max-width: 940px;
    margin: var(--terkoz-6) auto 0;
}

@media (min-width: 768px) {
    .urlap-alternativak {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        /* ZÁRT állapotban a két kártya egyforma magas — ez a rendezett kép.
           NYITOTT visszahívónál viszont NEM: lásd a lenti `:has()` szabályt. */
        align-items: stretch;
    }

    /*
     * A NAGY FEHÉR FOLT JAVÍTÁSA.
     *
     * Amikor a jobb oldali visszahívó kinyílik, a rács sora ~900 px magasra
     * nő. Ha a bal oldali telefonos kártya is kitölti a sort, ~110 px
     * tartalom alatt több mint 700 px üres fehér felület marad.
     *
     * Nyitott állapotban ezért a kártyák a SAJÁT magasságukon maradnak.
     * (Az `align-items: start` önmagában nem volt elég: a `height: 100%` a
     * rács SORÁRA hivatkozott, és visszanyújtotta a kártyát — ezért nincs
     * többé rögzített magasság.)
     */
    .urlap-alternativak:has(.visszahivas[open]) {
        align-items: start;
    }
}

.urlap-alternativa {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-3);
    padding: var(--terkoz-5);
    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-nagy);
}

.urlap-alternativa__cim {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.urlap-alternativa__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
}

.urlap-alternativa__szam {
    font-size: 1.375rem;
    font-weight: 800;
}

/* Az alternatíva-kártyák ugyanazt a sarokritmust viszik, mint a
   szolgáltatáskártyák — így az oldal formanyelve egységes marad. */
.urlap-alternativa {
    border-radius: 4px var(--sugar-blokk) var(--sugar-nagy) var(--sugar-nagy);
}

/* ===========================================================================
   28. VRG VIZUÁLIS REDESIGN — a kezdőoldal önálló formavilága
   ---------------------------------------------------------------------------
   MIÉRT VAN KÜLÖN SZAKASZ?
     A fenti komponensrendszer a bevált, működő alap. Ez a réteg NEM írja azt
     újra: kizárólag a VIZUÁLIS megjelenést teszi önállóvá, hogy a VRG első
     ránézésre se legyen összetéveszthető a kiindulási oldallal. Szerkezet,
     konverziós utak, űrlapok és mérés érintetlen.

   A VRG NÉGY VISSZATÉRŐ FORMAJEGYE
     1. FERDE METSZÉS — a hero képe és a „Miért VRG?" szekció felső pereme
        éles, ferde éllel találkozik a szomszédos felülettel. Ez a logó
        `V` / pipa geometriájának felületre vitt megfelelője.
     2. ZÖLD AKCENTUSVONAL — rövid, 4 px vastag zöld csík a címsorok fölött
        és a kártyák felső élén. Vonal, nem felület.
     3. PIPAJEL — a márka zöld pipája kis korongként az ikoncsempék sarkán.
     4. ÁTLÓS MÁRKATEXTÚRA — alig látható, ismétlődő átlós csíkozás a sötét
        felületeken; a logó pipája melletti három rövid akcentuscsík echója.

   SZÍNHASZNÁLAT: minden érték a `:root` márkatokenjeiből jön. A zöld végig
   akcentus marad — nagy háttérfelületként sehol nem jelenik meg.
   =========================================================================== */

/* A sötét felületek közös márkatextúrája. Nagyon halk: 3,5% fehér.
   -----------------------------------------------------------------------
   TELJESÍTMÉNY: a mintát MINDIG kis csempeként rajzoltatjuk ki
   (`background-size: 120px 120px`), nem a teljes szakasz méretében. Így a
   böngésző egyetlen apró bittérképet raszterizál és ismétel — nagy, sötét
   szakaszokon ez érezhetően olcsóbb. */
:root {
    --vrg-textura: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.035) 0 2px,
        rgba(255, 255, 255, 0) 2px 14px
    );
    --vrg-textura-csempe: 120px 120px;
}

/* ---------------------------------------------------------------------------
   28.1 Zöld akcentusvonal a címsorok fölött
   ---------------------------------------------------------------------------
   Ez az oldal legsűrűbben ismétlődő márkajegye. Rövid, lekerekített csík —
   nem aláhúzás, nem keret, nem felület.
   --------------------------------------------------------------------------- */

.szakasz__cim,
.hero__cim,
.zaro__cim,
.gyik__cim {
    position: relative;
    padding-top: 1.15rem;
}

.szakasz__cim::before,
.hero__cim::before,
.zaro__cim::before,
.gyik__cim::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: var(--szin-cta);
}

/* Középre igazított szakaszfejlécnél a csík is középre kerül. */
.szakasz__fejlec--kozep .szakasz__cim::before {
    left: 50%;
    transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   28.2 Hero — ferde metszés és márkatextúra
   --------------------------------------------------------------------------- */

.hero--vrg {
    /* Az alatta lévő előnysáv RÁLÓG a hero aljára, ezért itt több hely kell. */
    padding-bottom: 4.5rem;
    background-image:
        var(--vrg-textura),
        linear-gradient(158deg, var(--szin-sotet-alt) 0%, var(--szin-sotet) 48%,
                        var(--szin-sotet-melyebb) 100%);
    background-size: var(--vrg-textura-csempe), cover;
    background-repeat: repeat, no-repeat;
}

/* MOBIL: a kép a szöveg alatt, tetején zöld akcentusvonallal. */
.hero--vrg .hero__kep::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--szin-cta) 0%, rgba(122, 201, 67, 0) 70%);
    /* A ferde vonalas asztali változatot a lenti media query írja felül. */
    transform: none;
    box-shadow: none;
    top: 0;
    bottom: auto;
    left: 0;
    width: auto;
}

.hero--vrg .hero__kep::after {
    background: linear-gradient(to bottom,
                rgba(10, 42, 74, 0.28) 0%, rgba(10, 42, 74, 0) 38%,
                rgba(10, 42, 74, 0.55) 84%, var(--szin-sotet) 100%);
}

@media (min-width: 992px) {

    .hero--vrg {
        padding-bottom: 6rem;
    }

    /* A KÉP A KÉPERNYŐ SZÉLÉIG FUT.
       -----------------------------------------------------------------------
       A `.hero__kep` abszolút pozíciójú, tehát a legközelebbi pozicionált őse
       határozza meg a méretét. Ez eddig a `.hero__racs` volt, amely a
       tartalomsávon (`.burok`, max. 1200 px) belül ül — a kép ezért egy
       lebegő téglalapként állt a hero közepén, látható felső, jobb és alsó
       éllel. A lágy átmenet ezt korábban elfedte; az ÉLES, ferde metszés
       viszont azonnal láthatóvá tette.

       Megoldás: a rács visszakerül a normál folyamba, és a szövegoszlop
       kapja a rétegsorrendet. Így a kép a `.hero` szakaszhoz igazodik, azaz
       teljes magasságban, a viewport jobb széléig kifut. */
    .hero--vrg .hero__racs {
        position: static;
    }

    .hero--vrg .hero__szoveg {
        position: relative;
        z-index: 2;
    }

    /* A kép valamivel keskenyebb sávot kap, mint korábban: a bal harmadát a
       ferde metszés amúgy is navyre váltja. */
    .hero--vrg .hero__kep {
        width: 58%;
    }

    /* AZ ÉLES, FERDE ÉL.
       -----------------------------------------------------------------------
       Egyetlen, kemény átmenetű `linear-gradient` adja: 105 fokos irány, azaz
       a határvonal 15 fokkal dől — felül beljebb, alul kijjebb. A vonal
       mentén 3 px zöld akcentus fut. A második réteg a kép alját olvasztja
       a hero navy felületébe.

       MIÉRT NEM `clip-path`? Mert a zöld élt külön elemből kellene rárakni,
       és a két alakzat szögét képpontra kellene egyeztetni. Így egyetlen
       szabály adja mindkettőt, és a szög egyetlen számban módosítható. */
    .hero--vrg .hero__kep::after {
        background:
            linear-gradient(105deg,
                var(--szin-sotet) 0 31%,
                var(--szin-cta) 31% calc(31% + 3px),
                rgba(10, 42, 74, 0) calc(31% + 3px) 100%),
            linear-gradient(to bottom,
                rgba(10, 42, 74, 0.45) 0%, rgba(10, 42, 74, 0) 26%,
                rgba(10, 42, 74, 0) 68%, rgba(10, 42, 74, 0.78) 100%);
    }

    /* Asztalon a ferde él viszi a zöld vonalat — a mobil hajszálvonal nem kell. */
    .hero--vrg .hero__kep::before {
        display: none;
    }
}

@media (min-width: 1440px) {
    .hero--vrg .hero__kep {
        width: 56%;
    }
}

/* ---------------------------------------------------------------------------
   28.3 Előnysáv — a hero aljára lógó kiemelt kártya
   ---------------------------------------------------------------------------
   A négy gyors előny NEM külön sáv többé, hanem egyetlen, emelt kártya,
   amely átfedi a hero alsó peremét. Ettől a hajtás körüli terület egyetlen
   összefüggő egységgé válik.
   --------------------------------------------------------------------------- */

.vrg-elonysav {
    background: var(--szin-hatter);
    padding-block: 0 var(--szakasz-terkoz);
}

.vrg-elonysav__doboz {
    position: relative;
    z-index: 3;
    /* A negatív felső margó emeli a kártyát a heróra. */
    margin-top: calc(-1 * var(--terkoz-6));
    padding: var(--terkoz-5) var(--terkoz-4);

    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-blokk);
    box-shadow: var(--arnyek-emelt);
    overflow: hidden;
}

/* Zöld akcentus a kártya bal felső élén. */
.vrg-elonysav__doboz::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 88px;
    background: var(--szin-cta);
    border-radius: 0 0 4px 0;
}

.vrg-elonysav__lista {
    display: grid;
    gap: var(--terkoz-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vrg-elony {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-2);
}

.vrg-elony__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    margin-bottom: var(--terkoz-1);

    border-radius: 14px;
    background: var(--szin-hivas-vilagos);
    color: var(--szin-sotet);
    --ikon-meret: 21px;
}

.vrg-elony__cim {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.vrg-elony__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1rem;
    line-height: 1.6;
}

@media (min-width: 576px) {
    .vrg-elonysav__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vrg-elonysav__doboz { padding: var(--terkoz-6); }
}

@media (min-width: 1200px) {
    .vrg-elonysav__lista {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--terkoz-6);
    }

    .vrg-elonysav__doboz {
        margin-top: calc(-1 * var(--terkoz-7));
        padding: var(--terkoz-7) var(--terkoz-7) var(--terkoz-6);
    }
}

/* ---------------------------------------------------------------------------
   28.4 Ikoncsempe és pipajel — a márka visszatérő kisformája
   --------------------------------------------------------------------------- */

.vrg-csempe {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    min-width: 56px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;

    border-radius: 16px;
    background: var(--szin-sotet);
    color: var(--szin-szoveg-inverz);
    --ikon-meret: 26px;

    transition: background-color var(--atmenet), transform var(--atmenet);
}

/* Sötét felületen a csempe áttetsző, nem tömör navy. */
.vrg-csempe--vilagos {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.vrg-pipa {
    position: absolute;
    right: -7px;
    bottom: -7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    background: var(--szin-cta);
    color: var(--szin-szoveg);
    --ikon-meret: 15px;

    /* A keret a HÁTTÉR színe: a korong így kiválik a csempéből. */
    border: 2px solid var(--szin-felulet);
}

.vrg-csempe--vilagos .vrg-pipa {
    border-color: var(--szin-sotet);
}

/* ---------------------------------------------------------------------------
   28.5 Szolgáltatáskártya — VRG-formavilág
   ---------------------------------------------------------------------------
   A kártya felső bal élén rövid zöld csík ül, amely hoverre végigfut a
   kártyán. Ez az egyetlen mozgás rajta a finom megemelésen kívül.
   --------------------------------------------------------------------------- */

.szolg-kartya--vrg {
    position: relative;
    overflow: hidden;
    padding-top: var(--terkoz-7);
    gap: var(--terkoz-4);

    /* ASZIMMETRIKUS LEKEREKÍTÉS.
       -----------------------------------------------------------------------
       A bal felső sarok szinte szögletes, a többi lágy. Ettől a zöld
       akcentuscsík a sarokban nem „ráragasztott vonalnak", hanem a kártya
       saját fülének olvasódik — és a doboz azonnal megkülönböztethető a
       mindenhol egyforma sugarú, alapértelmezett kártyáktól. */
    border-radius: 4px var(--sugar-blokk) var(--sugar-nagy) var(--sugar-nagy);

    transition: border-color var(--atmenet), box-shadow var(--atmenet),
                transform var(--atmenet);
}

/* A zöld fül a bal felső sarokban. */
.szolg-kartya--vrg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 64px;
    z-index: 1;
    background: var(--szin-cta);
    border-radius: 0 0 4px 0;
    transition: width 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* FEJRÉSZ-ÁRNYALAT a kártya tetején.
   -----------------------------------------------------------------------
   Nagyon halk navy elmosódás, amely az ikoncsempe mögött adja meg a kártya
   „fejrészét". Alak nélküli — szándékosan: a ferde metszés motívumát a hero
   és a „Miért VRG?" szekció viszi, kártyaméretben sarokékként szamárfülnek
   látszana. */
.szolg-kartya--vrg::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 104px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(10, 42, 74, 0.055) 0%,
        rgba(10, 42, 74, 0) 100%);
    transition: opacity var(--atmenet);
}

.szolg-kartya--vrg:hover::after,
.szolg-kartya--vrg:focus-within::after {
    opacity: 0.6;
}

.szolg-kartya--vrg:hover,
.szolg-kartya--vrg:focus-within {
    transform: translateY(-3px);
    border-color: var(--szin-cta);
    box-shadow: var(--arnyek-emelt);
}

.szolg-kartya--vrg:hover::before,
.szolg-kartya--vrg:focus-within::before {
    width: 100%;
}

/* Az ikoncsempe ugyanazt a sarokritmust viszi, mint a kártya. */
.szolg-kartya--vrg .vrg-csempe {
    border-radius: 4px var(--sugar-nagy) var(--sugar-nagy) var(--sugar-nagy);
}

.szolg-kartya--vrg:hover .vrg-csempe,
.szolg-kartya--vrg:focus-within .vrg-csempe {
    background: var(--szin-sotet-melyebb);
    transform: translateY(-2px);
}

/* A kártya belső ritmusa: a cím közelebb az ikonhoz, a szöveg levegősebb,
   a hivatkozás pedig elválik egy hajszálvonallal. */
.szolg-kartya--vrg .szolg-kartya__cim {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.szolg-kartya--vrg .szolg-kartya__szoveg {
    line-height: 1.65;
}

.szolg-kartya--vrg .szolg-kartya__link {
    padding-top: var(--terkoz-3);
    border-top: 1px solid var(--szin-border);
}

/* ---------------------------------------------------------------------------
   28.6 „Miért VRG?" — ferde peremű, texturált navy szekció
   ---------------------------------------------------------------------------
   FIGYELEM: a ferde perem az ELŐZŐ szakasz háttérszínét vágja bele a navy
   felületbe. Az érték ezért az 5. blokk hátteréhez (`--szin-hatter-alt`) van
   kötve — ha a kezdőoldal szakaszsorrendje változik, ezt EGYÜTT kell vele
   frissíteni.
   --------------------------------------------------------------------------- */

.vrg-miert {
    position: relative;
    overflow: hidden;
    /* A ferde perem elfedné a szakasz tetejét, ezért ott több a térköz. */
    padding-top: calc(var(--szakasz-terkoz) + 28px);
}

.vrg-miert::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--szin-hatter-alt);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.vrg-miert::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--vrg-textura);
    background-size: var(--vrg-textura-csempe);
}

.vrg-miert > .burok {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .vrg-miert::before { height: 72px; }
}

/* Az előnyök üvegszerű panelben ülnek, BALRA igazítva — a korábbi középre
   igazított, keret nélküli elrendezés túl semlegesnek hatott. */
.vrg-elony-panel {
    align-items: flex-start;
    text-align: left;
    padding: var(--terkoz-5);

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--sugar-nagy);

    transition: background-color var(--atmenet), border-color var(--atmenet),
                transform var(--atmenet);
}

.vrg-elony-panel:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(122, 201, 67, 0.45);
    transform: translateY(-3px);
}

/* A panelen belül az ikoncsempe viszi a formát — a régi kör alakú, tömör
   zöld ikonháttér megszűnt (a zöld nem lehet nagy felület). */
.vrg-elony-panel .elony__ikon {
    margin-bottom: var(--terkoz-4);
}

.vrg-elony-panel .elony__cim,
.vrg-elony-panel .elony__szoveg {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    text-align: left;
}

/* ---------------------------------------------------------------------------
   28.7 „Hogyan működik?" — valódi idővonal
   ---------------------------------------------------------------------------
   Nem kártyarács: a lépések folyamatos zöld sínen ülnek, navy sorszámkörökkel.
   A sín belépéskor felülről lefelé „meghúzódik".
   --------------------------------------------------------------------------- */

.vrg-folyamat__racs {
    display: grid;
    gap: var(--terkoz-6);
    align-items: start;
}

@media (min-width: 992px) {
    .vrg-folyamat__racs {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--terkoz-7);
    }

    /* Asztalon a fotó BALRA kerül, az idővonal jobbra. Mobilon a lépések
       jönnek előbb — ott a folyamat a fontosabb, nem a hangulatkép. */
    .vrg-folyamat__kep { order: -1; }
}

.vrg-folyamat__kep .kep__allomany {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--sugar-nagy);
    box-shadow: var(--arnyek-emelt);
}

.vrg-idovonal {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vrg-idovonal__elem {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    /* LEVEGŐ: a sorszámkör és a szöveg között valódi távolság kell, különben
       a lépés összenyomottnak hat. */
    column-gap: var(--terkoz-5);
    padding-bottom: var(--terkoz-7);
}

.vrg-idovonal__elem:last-child {
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .vrg-idovonal__elem {
        column-gap: var(--terkoz-6);
        padding-bottom: var(--terkoz-8);
    }
}

/* A SÍN. Alapállapotban KÉSZ (JavaScript nélkül is látszik); a „meghúzódó"
   kiindulást csak a `js-belepo` kapcsolja be — lásd 27.2. */
.vrg-idovonal__elem::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, var(--szin-cta), rgba(122, 201, 67, 0.30));
    transform: scaleY(1);
    transform-origin: top center;
}

.vrg-idovonal__elem:last-child::before {
    display: none;
}

.js-belepo .vrg-idovonal__elem::before {
    transform: scaleY(0);
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--belepo-keses, 0ms);
}

.js-belepo .vrg-idovonal__elem.belepo--lathato::before {
    transform: scaleY(1);
}

.vrg-idovonal__jel {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    background: var(--szin-sotet);
    color: var(--szin-szoveg-inverz);

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;

    /* Kettős gyűrű: a kör kiválik a mögötte futó sínből. */
    box-shadow: 0 0 0 4px var(--szin-felulet), 0 0 0 6px rgba(122, 201, 67, 0.30);
}

.vrg-idovonal__cim {
    margin: 0 0 var(--terkoz-3);
    font-size: 1.2rem;
    line-height: 1.35;
    /* A számkör FÜGGŐLEGES KÖZEPÉHEZ igazítva (48 px kör, ~26 px sormagasság). */
    padding-top: 0.55rem;
}

.vrg-idovonal__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
    /* Nagyobb sorköz és korlátozott sorhossz: a lépés leírása így nem
       szövegtömb, hanem olvasható bekezdés. */
    line-height: 1.75;
    max-width: 46ch;
}

@media (min-width: 768px) {
    .vrg-idovonal__cim { font-size: 1.28rem; }
}

/* ---------------------------------------------------------------------------
   28.8 Bizalmi blokk — az oldal vizuális fókuszpontja
   ---------------------------------------------------------------------------
   Önálló, MÁSODLAGOS sötét tónusú sáv. Szándékosan más árnyalat, mint a
   „Miért VRG?" navyje: a két sötét blokk így nem mosódik össze.

   A fotó ELTOLT ZÖLD KERETET kap — a zöld itt is vonal, nem felület.
   --------------------------------------------------------------------------- */

.vrg-bizalom {
    position: relative;
    overflow: hidden;
    background-image:
        var(--vrg-textura),
        linear-gradient(140deg, var(--szin-sotet-alt) 0%, var(--szin-sotet) 62%,
                        var(--szin-sotet-melyebb) 100%);
    background-size: var(--vrg-textura-csempe), cover;
    background-repeat: repeat, no-repeat;
    color: var(--szin-szoveg-inverz);
}

.vrg-bizalom h2,
.vrg-bizalom h3 {
    color: var(--szin-szoveg-inverz);
}

.vrg-bizalom p {
    color: rgba(255, 255, 255, 0.82);
}

.vrg-bizalom strong {
    color: var(--szin-feher);
}

.vrg-bizalom__racs {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--terkoz-7);
    align-items: center;
}

.vrg-bizalom__szoveg p {
    max-width: 60ch;
}

.vrg-bizalom__kep {
    position: relative;
}

/* Az eltolt zöld keret.
   -----------------------------------------------------------------------
   Az eltolás a képernyő szélességéhez igazodik: a keret jobb éle SOHA nem
   érhet a viewport széléig, mert a szakasz `overflow: hidden` szabálya
   levágná — a keret akkor félbevágottnak látszana.

   320 px-en a tartalomsáv belső térköze 18 px, ezért ott 10 px az eltolás. */
.vrg-bizalom__kep::before {
    content: "";
    position: absolute;
    inset: 10px -10px -10px 10px;
    border: 2px solid var(--szin-cta);
    border-radius: var(--sugar-nagy);
    pointer-events: none;
}

@media (min-width: 576px) {
    .vrg-bizalom__kep::before {
        inset: 16px -16px -16px 16px;
    }
}

.vrg-bizalom__kep .kep__allomany {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--sugar-nagy);
    box-shadow: var(--arnyek-emelt);
}

@media (min-width: 992px) {
    .vrg-bizalom__racs {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: var(--terkoz-9);
    }

    .vrg-bizalom__kep::before {
        inset: 22px -22px -22px 22px;
    }
}

/* ---------------------------------------------------------------------------
   28.9 Országos szakasz — zöld pipával nyitó bekezdés
   --------------------------------------------------------------------------- */

.vrg-orszagos .szakasz__cim {
    margin-bottom: var(--terkoz-5);
}

/* ---------------------------------------------------------------------------
   28.10 GYIK — nyitott kérdés zöld jelöléssel
   --------------------------------------------------------------------------- */

.gyik__elem {
    transition: border-color var(--atmenet), background-color var(--atmenet);
}

.gyik__elem[open] {
    border-color: var(--szin-cta);
}

.gyik__elem[open] .gyik__ikon {
    color: var(--szin-cta);
}

/* ---------------------------------------------------------------------------
   28.11 Mobil alsó sáv — zöld márkaél
   --------------------------------------------------------------------------- */

.also-sav {
    border-top: 3px solid var(--szin-cta);
}

/* ---------------------------------------------------------------------------
   28.12 Mikrointerakciók — érzékelhető, de visszafogott
   ---------------------------------------------------------------------------
   A belépő mozgás távolsága 14 px-ről 20 px-re nő: így ténylegesen látszik,
   de továbbra sem okoz elrendezés-eltolódást (csak `opacity` és `transform`
   mozog), és nem késlelteti a tartalom megjelenését.
   --------------------------------------------------------------------------- */

.js-belepo [data-belepo] {
    transform: translateY(20px);
}

/* Csökkentett mozgásigénynél a JS el sem indítja a belépő réteget, ezért a
   `js-belepo` osztály fel sem kerül. Ez a szabály a biztonsági háló arra az
   esetre, ha a beállítás a betöltés UTÁN változna meg. */
@media (prefers-reduced-motion: reduce) {
    .js-belepo [data-belepo] {
        transform: none;
    }

    .js-belepo .vrg-idovonal__elem::before {
        transform: scaleY(1);
        transition: none;
    }

    .lebego-telefon,
    .lebego-telefon__bubi,
    .szolg-kartya--vrg,
    .szolg-kartya--vrg::before,
    .szolg-kartya--vrg::after,
    .vrg-elony-panel,
    .vrg-csempe {
        transition: none;
    }
}

/* ===========================================================================
   29. Vizuális finomítás — ajánlatkérő szakaszolás és záró CTA
   ---------------------------------------------------------------------------
   Ez a szakasz NEM új dizájn: a meglévő komponensek belső ritmusát és
   súlyozását igazítja. Szerkezet, mezőnevek, validáció, űrlapfolyamat és
   mérés érintetlen — kizárólag háttér, térköz, keret és lekerekítés változik.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   29.1 Az ajánlatkérő szakasz környezete
   ---------------------------------------------------------------------------
   A hosszú űrlap előtt vékony navy hajszálvonal zárja le az előző szakaszt,
   így az ajánlatkérő nem folyik bele a fölötte lévő világos sávba.
   --------------------------------------------------------------------------- */

.ajanlatkero {
    border-top: 1px solid var(--szin-border);
}

/* ---------------------------------------------------------------------------
   29.2 A HÁROM ŰRLAPBLOKK önálló, süllyesztett panelt kap
   ---------------------------------------------------------------------------
   Korábban egyetlen hajszálvonal választotta el őket, ezért a több mint húsz
   mező egyetlen összefüggő oszlopnak látszott. A panelek a három lépést
   ránézésre elkülönítik — az űrlap TOVÁBBRA IS egyetlen POST-ban megy el.
   --------------------------------------------------------------------------- */

.urlap-kartya .urlap__blokk,
.urlap-kartya .urlap__blokk:first-of-type {
    margin: 0 0 var(--terkoz-5);

    /* MOBIL-FIRST: 320 px-en a panel oldalsó térköze SZŰK, hogy a mezők
       szélessége ne csökkenjen érezhetően a kártya saját térköze mellett. */
    padding: var(--terkoz-5) var(--terkoz-3);

    border: 1px solid var(--szin-border);
    /* Ugyanaz a sarokritmus, mint a kártyáknál. */
    border-radius: 4px var(--sugar-nagy) var(--sugar-nagy) var(--sugar-nagy);
    background: var(--szin-hatter);
}

@media (min-width: 576px) {
    .urlap-kartya .urlap__blokk,
    .urlap-kartya .urlap__blokk:first-of-type {
        padding: var(--terkoz-5) var(--terkoz-4);
    }
}

.urlap-kartya .urlap__blokk:last-of-type {
    margin-bottom: var(--terkoz-6);
}

/* A blokk sorszáma zöld gyűrűt kap — ugyanaz a jel, mint a „Hogyan működik?"
   idővonalán, tehát a látogató ugyanazt a lépéslogikát ismeri fel. */
.urlap__blokk-szam {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    box-shadow: 0 0 0 3px rgba(122, 201, 67, 0.28);
}

.urlap__blokk-sugo {
    padding-left: calc(38px + 0.7rem);
}

@media (min-width: 768px) {
    .urlap-kartya .urlap__blokk,
    .urlap-kartya .urlap__blokk:first-of-type {
        padding: var(--terkoz-6);
        margin-bottom: var(--terkoz-6);
    }

    .urlap-kartya .urlap__blokk:last-of-type {
        margin-bottom: var(--terkoz-7);
    }
}

/* ---------------------------------------------------------------------------
   29.3 A ZÁRÓ RÉSZ (hozzájárulás + küldés) kiemelt panel
   ---------------------------------------------------------------------------
   Ez az űrlap tényleges végpontja, ezért vizuálisan is lezárja a folyamatot.
   --------------------------------------------------------------------------- */

.urlap__zaras {
    padding: var(--terkoz-5) var(--terkoz-3);
    border: 1px solid var(--szin-border);
    border-top: 4px solid var(--szin-cta);
    border-radius: 4px var(--sugar-nagy) var(--sugar-nagy) var(--sugar-nagy);
    background: var(--szin-hivas-vilagos);
}

@media (min-width: 576px) {
    .urlap__zaras {
        padding: var(--terkoz-5) var(--terkoz-4);
    }
}

/* A jelölőnégyzet doboza a panelen belül FEHÉR, hogy elváljon tőle. */
.urlap__zaras .urlap__jelolo {
    background: var(--szin-felulet);
}

@media (min-width: 768px) {
    .urlap__zaras {
        padding: var(--terkoz-6);
    }
}

/* ---------------------------------------------------------------------------
   29.4 Záró CTA — nagyobb vizuális súly
   ---------------------------------------------------------------------------
   Ez az oldal utolsó konverziós pontja, ezért a doboz nagyobb, texturált, és
   zöld felső él zárja — ugyanaz a jelrendszer, mint az ajánlatkérő kártyán.
   --------------------------------------------------------------------------- */

.zaro {
    padding-bottom: calc(var(--szakasz-terkoz) + var(--terkoz-5));
}

.zaro__doboz {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--szin-cta);
    border-radius: var(--sugar-blokk);
    padding: var(--terkoz-6) var(--terkoz-5);
    box-shadow: var(--arnyek-emelt);
}

/* Márkatextúra — ugyanaz a csempe, mint a többi sötét felületen. */
.zaro__doboz::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--vrg-textura);
    background-size: var(--vrg-textura-csempe);
}

.zaro__szoveg-resz,
.zaro__gombok {
    position: relative;
    z-index: 1;
}

.zaro__cim {
    font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.35rem);
}

.zaro__szoveg {
    font-size: 1.15rem;
}

@media (min-width: 992px) {
    .zaro__doboz {
        padding: var(--terkoz-8);
        gap: var(--terkoz-7);
    }
}


/* ===========================================================================
   30. KÉSZPÉNZES AUTÓFELVÁSÁRLÁS — az első szolgáltatási landing
   ---------------------------------------------------------------------------
   MIÉRT KÜLÖN SZAKASZ? Az implementációs leírás kéri, hogy a landing a VRG
   vizuális nyelvét használja, de SAJÁT szekcióritmussal. Az itt következő
   szabályok kizárólag azt adják hozzá, ami a kezdőoldalon nem létezik — új
   UI-rendszer NEM készült, és a globális CTA-k (lebegő telefon CTA, mobil
   alsó sáv), az űrlapok és a mérés érintetlenek.

   Minden érték az 1. szakasz TOKENJEIBŐL jön; közvetlen HEX itt sem szerepel.
   Kivétel a fehér és a zöld ÁTLÁTSZÓ árnyalatai (rgba): ezek a meglévő sötét
   blokkokban is így készülnek — lásd 28. szakasz.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   30.1 Hero — morzsamenü, eyebrow és kiemelt mondat
   --------------------------------------------------------------------------- */

/* A morzsamenü a hero SZÖVEGOSZLOPÁBAN ül, ezért alatta valódi térköz kell,
   különben nekifut az eyebrow-nak. */
.hero--landing .morzsamenu--hero {
    margin-bottom: var(--terkoz-4);
}

/* Rövid, nagybetűs témajelölő a H1 fölött. NEM címsor: a H1→H2→H3 hierarchiát
   nem törheti meg, ezért bekezdés. A zöld itt jelként jelenik meg. */
.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);

    margin: 0 0 var(--terkoz-3);

    color: var(--szin-cta);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Rövid zöld akcentusvonal — ugyanaz a jel, mint a szakaszcímek előtt. */
.hero__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--szin-cta);
}

/* A hero KIEMELT mondata: fontos üzenet, de nem CTA — ezért nem gomb, hanem
   bal oldali zöld éllel jelölt sor. */
.hero__kiemeles {
    max-width: 34rem;
    margin: 0 0 2rem;
    padding-left: var(--terkoz-4);
    border-left: 3px solid var(--szin-cta);

    color: var(--szin-border);
    font-size: 1.05rem;
    line-height: 1.6;
}

.hero__kiemeles strong {
    color: var(--szin-szoveg-inverz);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   30.2 Gyors pontsor — a kezdőoldali kártyadoboz HELYETT
   ---------------------------------------------------------------------------
   A kezdőoldalon a négy gyors előny KIEMELT KÁRTYÁBAN ül, amely rálóg a hero
   peremére. Itt szándékosan más a ritmus: tömör, kétoszlopos pontsor a hero
   szövegoszlopán BELÜL, saját felület nélkül. Így a hajtás nem kap második
   nagy dobozt, és a landing azonnal a tartalommal folytatódik.
   --------------------------------------------------------------------------- */

.vrg-pontsor {
    display: grid;
    gap: var(--terkoz-3);
    margin: var(--terkoz-6) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .vrg-pontsor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-3) var(--terkoz-5);
    }
}

.vrg-pontsor__elem {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);

    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9875rem;
    font-weight: 600;
    line-height: 1.4;
}

.vrg-pontsor__ikon {
    --ikon-meret: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(122, 201, 67, 0.45);
    border-radius: var(--sugar-kicsi);
    background: rgba(122, 201, 67, 0.12);
    color: var(--szin-cta);
}

/* ---------------------------------------------------------------------------
   30.3 Definíciós szakasz — „Mit jelent nálunk…?"
   ---------------------------------------------------------------------------
   A kezdőoldalon nincs megfelelője. Keskeny szövegsáv, hogy az oldal a téma
   kifejtésével induljon, ne újabb kártyaráccsal.
   --------------------------------------------------------------------------- */

.kp-definicio .szakasz__cim {
    margin-bottom: var(--terkoz-5);
}

.kp-definicio .szakasz__cta {
    margin-top: var(--terkoz-6);
}

/* ---------------------------------------------------------------------------
   30.4 Statikus járműállapot-kártya
   ---------------------------------------------------------------------------
   Ez MAGA a céloldal, ezért a hat tétel nem kattintható: nincs hova
   továbbküldeni a látogatót. A hover-emelés így félrevezető lenne — a kártya
   megjelenése változatlan, csak a reakciója marad el.
   --------------------------------------------------------------------------- */

.szolg-kartya--statikus:hover,
.szolg-kartya--statikus:focus-within {
    border-color: var(--szin-border);
    box-shadow: none;
}

.szolg-kartya--vrg.szolg-kartya--statikus:hover,
.szolg-kartya--vrg.szolg-kartya--statikus:focus-within {
    transform: none;
}

/* ---------------------------------------------------------------------------
   30.5 Folyamat — széles fotó FÖLÖTT, idővonal alatta
   ---------------------------------------------------------------------------
   A kezdőoldalon a folyamatfotó az idővonal MELLETT áll (kétoszlopos rács).
   Itt a fotó önálló, széles sávban ül a lépések fölött, az idővonal pedig
   középre zárva fut — ez a szakasz eltérő ritmusa.
   --------------------------------------------------------------------------- */

.kp-folyamat__kep {
    margin: 0 auto var(--terkoz-7);
    max-width: 60rem;
    border-radius: var(--sugar-blokk);
    overflow: hidden;
    box-shadow: var(--arnyek-emelt);
}

.kp-folyamat__kep .kep__allomany {
    display: block;
    width: 100%;
    height: auto;
}

/* Az idővonal olvasható sorhosszon marad a széles szakaszban is. */
.vrg-idovonal--szeles {
    max-width: 46rem;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   30.6 „Kinek lehet jó választás?" — az oldal SAJÁT kiemelt szekciója
   ---------------------------------------------------------------------------
   A kezdőoldalon nincs megfelelője. Ez a blokk kapja a navy felületet, zöld
   PIPÁS felsorolással: a zöld itt is jelként jelenik meg, nem háttérként.
   --------------------------------------------------------------------------- */

.kp-esetek__bevezeto {
    margin: 0 0 var(--terkoz-6);
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.7;
}

.kp-eset-lista {
    display: grid;
    gap: var(--terkoz-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .kp-eset-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-4) var(--terkoz-6);
    }
}

.kp-eset {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);

    color: rgba(255, 255, 255, 0.90);
    font-size: 1.0125rem;
    line-height: 1.6;
}

/* A pipa kis zöld körben — ugyanaz a jelrendszer, mint a `vrg-csempe`
   sarkában használt márkapipa. */
.kp-eset__jel {
    --ikon-meret: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 24px;
    height: 24px;
    /* A szöveg első sorának optikai közepéhez igazítva. */
    margin-top: 2px;

    border-radius: 50%;
    background: var(--szin-cta);
    color: var(--szin-szoveg);
}

.kp-esetek .szakasz__cta {
    margin-top: var(--terkoz-7);
}

/* ---------------------------------------------------------------------------
   30.7 Előnyrács VILÁGOS felületen
   ---------------------------------------------------------------------------
   MIÉRT KELL? Az `.elony__cim` és az `.elony__szoveg` alapértelmezett színe
   FEHÉR (`--szin-szoveg-inverz`, illetve fehér 80%), mert a kezdőoldalon ez a
   rács mindig a navy „Miért VRG?" sávban áll. Ezen a landingen a nagy navy
   felületet a „Kinek lehet jó választás?" blokk kapja, az érvek pedig VILÁGOS
   háttéren futnak — ott a fehér szöveg olvashatatlan lenne.

   Ezért a világos szakaszban álló rács visszakapja a normál szövegszíneket.
   A szabály KIZÁRÓLAG a színt írja felül; az elrendezés közös marad.
   --------------------------------------------------------------------------- */

.szakasz:not(.szakasz--sotet) > .burok > .elony-racs .elony__cim {
    color: var(--szin-szoveg);
}

.szakasz:not(.szakasz--sotet) > .burok > .elony-racs .elony__szoveg {
    color: var(--szin-szoveg-lagy);
}


/* ===========================================================================
   31. LAPTOP-SZÉLESSÉGEK — célzott reszponzív javítás
   ---------------------------------------------------------------------------
   MI VOLT A HIBA? A fejléc sávjának három gyereke (logó, menü, műveletek)
   mind `flex: 0 0 auto`, a sáv pedig `flex-wrap: nowrap`. Amikor a menü a
   hatodik ponttal („Szolgáltatások") 793 px-re nőtt, a három elem együtt
   ~1334 px-t igényelt, a tartalomsáv viszont csak 1144 px széles. A
   `fejlec__muveletek` — benne a fő CTA-val — KILÓGOTT a viewportból, és mivel
   a vízszintes görgetés tiltott, a gomb LEVÁGÓDOTT: 1280 px-en 36, 1440 px-en
   82 px-cel.

   Ez a szakasz csak ELRENDEZÉST igazít. Tartalom, copy, HTML-szerkezet,
   routing, mérés és márkaszínek érintetlenek.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   31.1 A fejléc sávja szélesebb lehet, mint a szövegtartalom
   ---------------------------------------------------------------------------
   A tartalom olvashatósági korlátja (1200 px) a SZÖVEGRE való — a fejléc
   viszont vízszintes sáv, amelyben a menünek és a CTA-nak el kell férnie.
   Ezért a fejléc burka ott, ahol a vízszintes menü megjelenik, szélesebb
   lehet. A tartalom szélessége VÁLTOZATLAN marad.

   1400 px-en ez 1352 → 1296 px belső sávot ad, ami a hat menüponthoz és a
   műveletekhez (~1266 px) kényelmesen elég. */
@media (min-width: 1400px) {
    .fejlec .burok {
        max-width: min(1360px, 100% - 3rem);
    }
}

/* ---------------------------------------------------------------------------
   31.2 Biztonsági háló — a fejléc SOHA ne lóghasson ki
   ---------------------------------------------------------------------------
   Ha a menü később új ponttal bővül, vagy egy felirat hosszabb lesz, a fenti
   számítás megbillenhet. Ekkor a műveletek blokk inkább SZŰKÜLJÖN, mint hogy
   kilógjon: a `min-width: 0` engedi a zsugorodást, a `justify-content: flex-end`
   pedig a jobb szélhez tartja. A CTA felirata `nowrap` marad, tehát nem törik
   el csúnyán — a térköz fogy először.

   Ez CSAK szélsőséges esetben lép működésbe; normál állapotban nincs hatása. */
@media (min-width: 1400px) {
    .fejlec__sav {
        /* A sáv soha ne legyen szélesebb a saját konténerénél. */
        max-width: 100%;
    }

    .fejlec__muveletek {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }
}

/* ---------------------------------------------------------------------------
   31.3 Hero — a kép kompozíciója laptop szélességeken
   ---------------------------------------------------------------------------
   MI VOLT A HIBA? A hero fotója a hero jobb oldalát tölti ki, `object-fit:
   cover` módban. A képsáv arányosan KESKENYEBB, mint a fotó 16:9-e, ezért a
   kép oldalt vágódik. A korábbi `62%` / `58%` igazítás a kép JOBB szélét vágta
   le — pontosan azt a részt, ahol a felvétel lényege van: a szereplő a fotó
   60–85%-ánál áll, az autó pedig 48–100% között. 1440 px-en így a szereplő
   jobb válla és az autó eleje is kicsúszott a képsávból.

   A javítás a vágást JOBBRA tolja (nagyobb `object-position` érték), így a
   levágott rész a fotó BAL oldali, üres útfelülete lesz — az nem hordoz
   információt. A szereplő arca és felsőteste, valamint az autó eleje végig
   képben marad.

   A CSS 26. szakaszának oldalankénti `--keszpenzes` módosítója (39%) ehhez a
   képhez NEM tartozik: az a technikai rétegből örökölt, MÁS kompozíciójú
   felvételhez készült, és a sablon nem is teszi ki. */
@media (min-width: 992px) {
    .hero__kep img {
        object-position: 74% center;
    }
}

@media (min-width: 1440px) {
    /* Szélesebb képsávban arányosan kevesebbet kell vágni, ezért az igazítás
       is visszaléphet — de továbbra is jóval jobbra a korábbi 58%-nál. */
    .hero__kep img {
        object-position: 70% center;
    }
}


/* ===========================================================================
   32. LANDING V2 — teljes körű ügyintézés és speciális helyzetek
   ---------------------------------------------------------------------------
   A `VRG_KESZPENZES_AUTOFELVASARLAS_CSOMAG_V2` két új szekciója. Nem új
   UI-rendszer: a meglévő szakasz-, kártya- és tipográfiai rendszerre épül,
   csak azt adja hozzá, aminek eddig nem volt megfelelője — egy szöveges
   ISMERETPANELT, amely felsorolást is hordoz.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   32.1 Teljes körű ügyintézés — széles fotó, alatta panelrács
   ---------------------------------------------------------------------------
   Ugyanaz a ritmus, mint a folyamatszakaszban (31.5/30.5): a fotó önálló,
   széles sávban ül, a részletek pedig alatta, kétoszlopos rácsban. Így a
   szakasz nem lesz szövegtömb, és nem ismétli a bizalmi blokk kép-mellett-
   szöveg elrendezését sem.
   --------------------------------------------------------------------------- */

.kp-ugyintezes__kep {
    margin: 0 auto var(--terkoz-7);
    max-width: 60rem;
    border-radius: var(--sugar-blokk);
    overflow: hidden;
    box-shadow: var(--arnyek-emelt);
}

.kp-ugyintezes__kep .kep__allomany {
    display: block;
    width: 100%;
    height: auto;
}

.kp-ugyintezes__racs {
    display: grid;
    gap: var(--terkoz-5);
    /* A rács a szakaszfejléccel egy vonalban marad. */
    margin: 0;
}

@media (min-width: 768px) {
    .kp-ugyintezes__racs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-5) var(--terkoz-6);
    }
}

/* ---------------------------------------------------------------------------
   32.2 Ismeretpanel — szöveg és felsorolás egy kártyán
   ---------------------------------------------------------------------------
   A meglévő `szolg-kartya` rövid, ikonos és CTA-ra hangolt; ez a panel
   HOSSZABB magyarázatot és listát hordoz, ezért kap saját, visszafogottabb
   formát: bal oldali zöld él, ikon nélkül. Ugyanaz a felület, border és
   sugár, mint a kártyáknál — a rendszer így nem esik szét.
   --------------------------------------------------------------------------- */

.kp-panel {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-3);
    height: 100%;
    padding: var(--terkoz-5);

    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    /* A zöld él a VRG akcentusrendszer része — vonal, nem felület. */
    border-left: 3px solid var(--szin-cta);
    border-radius: var(--sugar-nagy);
}

.kp-panel__cim {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
}

.kp-panel__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
    line-height: 1.7;
}

.kp-panel__lista {
    display: grid;
    gap: var(--terkoz-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-panel__lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
    color: var(--szin-szoveg-lagy);
    line-height: 1.6;
}

/* Kis zöld pipa — ugyanaz a jel, mint a „Kinek lehet jó választás?" listán,
   csak világos felületre hangolt mérettel. */
.kp-panel__jel {
    --ikon-meret: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 20px;
    height: 20px;
    /* A sor első sorának optikai közepéhez igazítva. */
    margin-top: 3px;

    border-radius: 50%;
    background: var(--szin-cta-halvany);
    color: var(--szin-cta-hover);
}

/* ---------------------------------------------------------------------------
   32.3 Speciális helyzetek — záró pontosítás a kártyák alatt
   ---------------------------------------------------------------------------
   A forrás kifejezetten rögzíti, hogy ezek NEM automatikusan kizáró okok.
   Ez a mondat nem kártyába való: a három eset MINDEGYIKÉRE vonatkozik, ezért
   a rács alatt, önálló sorban áll.
   --------------------------------------------------------------------------- */

.kp-specialis__zaras {
    max-width: 62ch;
    margin: var(--terkoz-6) 0 0;
    color: var(--szin-szoveg-lagy);
    font-size: 1.0125rem;
    line-height: 1.7;
}

.kp-specialis__zaras strong {
    color: var(--szin-szoveg);
}


/* ===========================================================================
   33. MŰSZAKI HIBÁS AUTÓ FELVÁSÁRLÁS — a második szolgáltatási landing
   ---------------------------------------------------------------------------
   A meglévő szakasz-, kártya-, idővonal- és tipográfiai rendszerre épül; csak
   azt adja hozzá, aminek eddig nem volt megfelelője. Új UI-framework NEM
   készült, a globális CTA-k és az űrlapok érintetlenek.

   Minden érték az 1. szakasz TOKENJEIBŐL jön. Kivétel a fehér és a zöld
   ÁTLÁTSZÓ árnyalatai (rgba), ahogy a többi sötét blokkban is.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   33.1 Hero chipsor — vízszintes, pipás bizalmi pontok
   ---------------------------------------------------------------------------
   A készpénzes landing kétoszlopos ikonlistát használ (30.2). Itt a négy pont
   VÍZSZINTESEN fut és sorvégén tördelődik, így a hero ritmusa más — miközben
   ugyanaz a márkajel (zöld pipa) tartja össze a két oldalt.
   --------------------------------------------------------------------------- */

.mh-chipsor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terkoz-2);
    margin: var(--terkoz-6) 0 0;
    padding: 0;
    list-style: none;
}

.mh-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--terkoz-2);

    padding: 0.45rem 0.8rem;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);

    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.mh-chip__jel {
    --ikon-meret: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    border-radius: 50%;
    background: var(--szin-cta);
    color: var(--szin-szoveg);
}

/* ---------------------------------------------------------------------------
   33.2 Fogalmi elhatárolás — definíciós lista
   ---------------------------------------------------------------------------
   Műszaki hibás / sérült / roncs. Ez FOGALMI TISZTÁZÁS, nem kártyás
   szolgáltatáslista, ezért `<dl>` — és ezért kap visszafogottabb, elválasztó
   vonalas formát kártya helyett.
   --------------------------------------------------------------------------- */

.mh-definicio__alcim {
    margin: var(--terkoz-7) 0 var(--terkoz-4);
    font-size: 1.25rem;
    font-weight: 700;
}

.mh-elhatarolas {
    display: grid;
    gap: 0;
    margin: 0 0 var(--terkoz-6);
    padding: 0;

    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-nagy);
    background: var(--szin-felulet);
    overflow: hidden;
}

.mh-elhatarolas__elem {
    padding: var(--terkoz-4) var(--terkoz-5);
    border-left: 3px solid var(--szin-cta);
}

.mh-elhatarolas__elem + .mh-elhatarolas__elem {
    border-top: 1px solid var(--szin-border);
}

.mh-elhatarolas__cim {
    margin: 0 0 var(--terkoz-1);
    color: var(--szin-szoveg);
    font-size: 1.0625rem;
    font-weight: 700;
}

.mh-elhatarolas__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
    line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   33.3 Közös pipás lista — az oldal visszatérő felsorolásformája
   ---------------------------------------------------------------------------
   Az oldalon hat hosszabb felsorolás van. Mind ugyanazt a formát kapja, hogy
   a sok lista ne essen szét különböző stílusokra.
   --------------------------------------------------------------------------- */

.mh-lista {
    display: grid;
    gap: var(--terkoz-2);
    margin: 0 0 var(--terkoz-5);
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .mh-lista--ket-oszlop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-2) var(--terkoz-6);
    }
}

.mh-lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
    color: var(--szin-szoveg-lagy);
    line-height: 1.6;
}

.mh-lista__jel {
    --ikon-meret: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 20px;
    height: 20px;
    /* A sor első sorának optikai közepéhez igazítva. */
    margin-top: 3px;

    border-radius: 50%;
    background: var(--szin-cta-halvany);
    color: var(--szin-cta-hover);
}

/* Sötét felületen a lista szövege és a jel is világosodik. */
.mh-lista--sotet li {
    color: rgba(255, 255, 255, 0.88);
}

.mh-lista--sotet .mh-lista__jel {
    background: var(--szin-cta);
    color: var(--szin-szoveg);
}

/* ---------------------------------------------------------------------------
   33.4 Döntési blokk — az oldal kiemelt navy felülete
   --------------------------------------------------------------------------- */

.mh-dontes p {
    color: rgba(255, 255, 255, 0.82);
}

.mh-dontes strong {
    color: var(--szin-feher);
}

.mh-dontes__bevezeto {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--szin-feher) !important;
}

.mh-dontes__lista-cim,
.mh-ertekeles__lista-cim,
.mh-elszallitas__lista-cim,
.mh-okmanyok__lista-cim,
.mh-biztonsag__lista-cim {
    margin-bottom: var(--terkoz-3);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   33.5 Értékelési szakasz — szöveg és fotó egymás mellett
   ---------------------------------------------------------------------------
   A fotó a SZÖVEG UTÁN áll a forrásban (mobilon a tartalom a fontosabb);
   asztalon a rács jobb oldalára kerül.
   --------------------------------------------------------------------------- */

.mh-ertekeles__racs {
    display: grid;
    gap: var(--terkoz-6);
    align-items: start;
}

@media (min-width: 992px) {
    .mh-ertekeles__racs {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: var(--terkoz-8);
        align-items: center;
    }
}

.mh-ertekeles__kep {
    border-radius: var(--sugar-blokk);
    overflow: hidden;
    box-shadow: var(--arnyek-emelt);
}

.mh-ertekeles__kep .kep__allomany {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   33.6 „Milyen adatokat és képeket?" — két lista egymás mellett
   --------------------------------------------------------------------------- */

.mh-adatok__racs {
    display: grid;
    gap: var(--terkoz-6);
    margin-top: var(--terkoz-6);
}

@media (min-width: 768px) {
    .mh-adatok__racs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-8);
    }
}

.mh-adatok__cim {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    margin: 0 0 var(--terkoz-4);
    padding-bottom: var(--terkoz-3);
    border-bottom: 2px solid var(--szin-cta);
    font-size: 1.1875rem;
    font-weight: 600;
}

.mh-adatok__ikon {
    --ikon-meret: 20px;
    display: inline-flex;
    color: var(--szin-cta-hover);
}

/* ---------------------------------------------------------------------------
   33.7 Figyelmeztető sor és kiemelés
   ---------------------------------------------------------------------------
   NEM hibaállapot, ezért nem a hibaszínt kapja: visszafogott, keretes sor.
   --------------------------------------------------------------------------- */

.mh-figyelmeztetes,
.mh-kiemeles {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);

    margin: var(--terkoz-6) 0 0;
    padding: var(--terkoz-4) var(--terkoz-5);

    border: 1px solid var(--szin-border);
    border-left: 4px solid var(--szin-cta);
    border-radius: var(--sugar);
    background: var(--szin-felulet);

    color: var(--szin-szoveg-lagy);
    line-height: 1.65;
}

.mh-figyelmeztetes strong,
.mh-kiemeles strong {
    color: var(--szin-szoveg);
}

.mh-figyelmeztetes__ikon {
    --ikon-meret: 20px;
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--szin-cta-hover);
}

/* ---------------------------------------------------------------------------
   33.8 Biztonsági blokk — az oldal önálló figyelmeztető kerete
   ---------------------------------------------------------------------------
   A látogató testi épségét védi, ezért vizuálisan elkülönül. Nem hibapiros:
   nem hibaállapotot jelez, hanem óvatosságra int.
   --------------------------------------------------------------------------- */

.mh-biztonsag {
    padding: var(--terkoz-6) var(--terkoz-5);
    border: 1px solid var(--szin-border-eros);
    border-top: 4px solid var(--szin-cta);
    border-radius: var(--sugar-nagy);
    background: var(--szin-felulet);
    box-shadow: var(--arnyek-finom);
}

@media (min-width: 768px) {
    .mh-biztonsag {
        padding: var(--terkoz-7);
    }
}

.mh-biztonsag__cim {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
    margin-bottom: var(--terkoz-4);
}

.mh-biztonsag__ikon {
    --ikon-meret: 26px;
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--szin-cta-hover);
}

/* A figyelmeztető listajel sárgás-zöld helyett SEMLEGES marad, de a
   háromszög ikon jelzi, hogy itt kockázatról van szó. */
.mh-lista__jel--figyelem {
    --ikon-meret: 12px;
    background: var(--szin-hivas-vilagos);
    color: var(--szin-sotet);
}

/* ---------------------------------------------------------------------------
   33.9 Okmányblokk belső hivatkozása
   --------------------------------------------------------------------------- */

.mh-okmanyok__link {
    margin-top: var(--terkoz-5);
    color: var(--szin-szoveg-lagy);
}

/* ---------------------------------------------------------------------------
   33.10 Hero-vágás — CSAK ezen az oldalon
   ---------------------------------------------------------------------------
   MIÉRT KELL SAJÁT ÉRTÉK? A javított hero fotón (HERO FIX V1) a fotó bal
   oldala szándékosan sötétített negatív tér a szövegnek, a KÉT SZEREPLŐ pedig
   a jobb szélen áll: a VRG-s szakértő a kép ~58–73%-ánál, az autótulajdonos
   ~78–90%-ánál.

   A hero képsávja ezen az oldalon nagyon magas (a szövegoszlop hosszú), ezért
   `cover` módban a fotónak csak egy 28–42% széles függőleges sávja látszik. A
   globális 74% / 70% igazítással ez a sáv 81–84%-nál ér véget — vagyis a
   TULAJDONOS ARCA éppen a vágásra esne. 80%-kal a sáv 86–88%-ig ér, így
   mindkét arc képben marad, és a nyitott motorháztetőből is látszik annyi,
   amennyi az üzenethez kell.

   A szabály a `<picture>` osztályán keresztül hat, ezért a többi oldal
   hero-vágása (31.3) VÁLTOZATLAN marad. 992 px alatt nem hat: ott a kép a
   szöveg alatt, teljes szélességben fut, jóval kisebb vágással.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .hero__kep .kep--mh-hero img {
        object-position: 80% center;
    }
}


/* ===========================================================================
   34. SÉRÜLT / TÖRÖTT + RONCSAUTÓ — a harmadik szolgáltatási landing
   ---------------------------------------------------------------------------
   A meglévő rendszerre épül, és ÚJRAHASZNÁLJA a 33. szakasz elemeit (chipsor,
   pipás lista, figyelmeztető sor) — új UI-rendszer nem készült. Csak azt adja
   hozzá, aminek eddig nem volt megfelelője: súlyossági skálát, fotózási
   checklistet és információs keretet.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   34.1 Fogalmi SÚLYOSSÁGI SKÁLA — sérült → törött → totálkár → roncs
   ---------------------------------------------------------------------------
   A műszaki hibás oldal ugyanezt a feladatot sima definíciós listával oldja
   meg (33.2). Itt a négy fokozat SORRENDJE is információ, ezért számozott
   lista, növekvő vastagságú bal éllel: a szem is látja, hogy súlyosbodik.
   --------------------------------------------------------------------------- */

.st-skala {
    display: grid;
    gap: var(--terkoz-4);
    margin: var(--terkoz-6) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: st-fok;
}

@media (min-width: 768px) {
    .st-skala {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-5);
    }
}

.st-skala__elem {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-2);
    height: 100%;
    padding: var(--terkoz-5);
    padding-left: calc(var(--terkoz-5) + 0.5rem);

    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-nagy);
}

/* A bal él vastagsága fokozatonként nő — ez a „skála" vizuális jele. */
.st-skala__elem::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--sugar-nagy) 0 0 var(--sugar-nagy);
    background: var(--szin-cta);
}

.st-skala__elem:nth-child(2)::before { width: 5px; }
.st-skala__elem:nth-child(3)::before { width: 7px; }
.st-skala__elem:nth-child(4)::before { width: 9px; }

.st-skala__fok {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    background: var(--szin-sotet);
    color: var(--szin-feher);

    font-size: 0.9rem;
    font-weight: 700;
}

.st-skala__cim {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.st-skala__szoveg {
    margin: 0;
    color: var(--szin-szoveg-lagy);
    line-height: 1.65;
}

.st-fogalmak__zaras {
    max-width: 62ch;
    margin: var(--terkoz-6) 0 0;
    color: var(--szin-szoveg-lagy);
    line-height: 1.7;
}

.st-fogalmak__zaras strong {
    color: var(--szin-szoveg);
}

/* ---------------------------------------------------------------------------
   34.2 Sérülésfotó a kártyarács FÖLÖTT
   --------------------------------------------------------------------------- */

.st-serules__kep {
    margin: 0 auto var(--terkoz-7);
    max-width: 60rem;
    border-radius: var(--sugar-blokk);
    overflow: hidden;
    box-shadow: var(--arnyek-emelt);
}

.st-serules__kep .kep__allomany {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   34.3 Iránymutató sáv — átterelés a pontosabb landingre
   ---------------------------------------------------------------------------
   Nem CTA és nem figyelmeztetés: NAVIGÁCIÓS segítség annak, aki rossz oldalra
   érkezett. Ezért visszafogott, vízszintes sáv — nem versenyez a fő CTA-val.
   --------------------------------------------------------------------------- */

.st-iranymutato-szakasz {
    padding-block: var(--terkoz-7);
}

.st-iranymutato {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-4);

    padding: var(--terkoz-5);

    border: 1px solid var(--szin-border);
    border-left: 4px solid var(--szin-akcentus);
    border-radius: var(--sugar-nagy);
    background: var(--szin-hatter-alt);
}

.st-iranymutato__ikon {
    --ikon-meret: 24px;
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--szin-sotet);
}

.st-iranymutato__cim {
    margin: 0 0 var(--terkoz-3);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.35;
}

.st-iranymutato__szoveg p {
    margin: 0 0 var(--terkoz-3);
    color: var(--szin-szoveg-lagy);
    line-height: 1.7;
}

.st-iranymutato__zaras {
    margin-bottom: 0 !important;
    font-size: 0.97rem;
}

/* ---------------------------------------------------------------------------
   34.4 Fotózási checklist + biztonsági doboz
   ---------------------------------------------------------------------------
   Sérült autónál a fénykép a legfontosabb adatforrás, ezért kap önálló
   blokkot. A biztonsági rész MELLÉ kerül, nem alá: együtt olvasandó.
   --------------------------------------------------------------------------- */

.st-foto__racs {
    display: grid;
    gap: var(--terkoz-6);
    margin-top: var(--terkoz-6);
    align-items: start;
}

@media (min-width: 992px) {
    .st-foto__racs {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: var(--terkoz-7);
    }
}

.st-biztonsag {
    padding: var(--terkoz-5);
    border: 1px solid var(--szin-border-eros);
    border-top: 4px solid var(--szin-cta);
    border-radius: var(--sugar-nagy);
    background: var(--szin-hatter-alt);
}

.st-biztonsag__cim {
    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    margin: 0 0 var(--terkoz-4);
    font-size: 1.125rem;
    font-weight: 700;
}

.st-biztonsag__ikon {
    --ikon-meret: 22px;
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--szin-cta-hover);
}

.st-biztonsag p {
    margin: 0 0 var(--terkoz-3);
    color: var(--szin-szoveg-lagy);
    line-height: 1.7;
}

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

/* ---------------------------------------------------------------------------
   34.5 Értékelési szempontok — asztalon HÁROM oszlop
   ---------------------------------------------------------------------------
   Tizenhat rövid tétel: kétoszloposan még mindig hosszan elnyúlna, ezért nagy
   képernyőn három hasábban fut.
   --------------------------------------------------------------------------- */

.st-ertekeles__lista-cim,
.st-szallitas__lista-cim,
.st-roncs__lista-cim,
.st-okmanyok__lista-cim {
    margin-bottom: var(--terkoz-3);
    font-weight: 600;
}

@media (min-width: 768px) {
    .st-ertekeles__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--terkoz-2) var(--terkoz-6);
    }
}

@media (min-width: 1200px) {
    .st-ertekeles__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------
   34.6 Folyamat — a fotó JOBBRA kerül
   ---------------------------------------------------------------------------
   A kezdőoldalon és a műszaki hibás landingen a fotó `order: -1`-gyel BALRA
   áll. Itt a rács természetes sorrendjében marad, tehát jobbra — így a három
   oldal folyamatszakasza egymástól is elkülönül.
   --------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .st-folyamat .vrg-folyamat__kep {
        order: 0;
    }
}

/* ---------------------------------------------------------------------------
   34.7 Információs keret — biztosítói kárrendezés
   ---------------------------------------------------------------------------
   Nem figyelmeztetés és nem CTA: TÁJÉKOZTATÁS, jogi felelősségkizáró
   zárómondattal. A záró mondat vizuálisan is elkülönül, mert tartalmilag más
   súlyú, mint a felette lévő felsorolás.
   --------------------------------------------------------------------------- */

.st-info {
    padding: var(--terkoz-6) var(--terkoz-5);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar-nagy);
    background: var(--szin-felulet);
    box-shadow: var(--arnyek-finom);
}

@media (min-width: 768px) {
    .st-info {
        padding: var(--terkoz-7);
    }
}

.st-info__cim {
    display: flex;
    align-items: flex-start;
    gap: var(--terkoz-3);
    margin-bottom: var(--terkoz-4);
}

.st-info__ikon {
    --ikon-meret: 24px;
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--szin-akcentus);
}

.st-info__jogi {
    margin: var(--terkoz-5) 0 0;
    padding-top: var(--terkoz-4);
    border-top: 1px solid var(--szin-border);
    color: var(--szin-szoveg-lagy);
    font-size: 0.94rem;
    font-style: italic;
    line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   34.8 Roncsautó-blokk — az oldal kiemelt navy felülete
   --------------------------------------------------------------------------- */

.st-roncs p {
    color: rgba(255, 255, 255, 0.82);
}

.st-roncs strong {
    color: var(--szin-feher);
}

/* ---------------------------------------------------------------------------
   34.9 Okmányblokk belső hivatkozása
   --------------------------------------------------------------------------- */

.st-okmanyok__link {
    margin-top: var(--terkoz-5);
    color: var(--szin-szoveg-lagy);
}