/* ===========================================================================
   Azonnali AutóVétel — 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ü
   =========================================================================== */

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

:root {
    /* =======================================================================
       MÁRKATOKENEK
       -----------------------------------------------------------------------
       Grafit + réz. Ezek az értékek a LOGO_HASZNALAT_ES_SZINEK.txt szerinti
       végleges márkaszínek — nem munkapaletta többé.

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

       Irányadó vizuális arány: kb. 60% világos alap / 30% grafit / max. 10% réz.
       ======================================================================= */

    --szin-hatter:          #FBFAF8;   /* fő háttér — meleg törtfehér */
    --szin-hatter-alt:      #F3F1ED;   /* alternatív háttér (váltakozó szekciók) */
    --szin-felulet:         #FFFFFF;   /* kártya, űrlapmező */

    --szin-sotet:           #151A1F;   /* sötét grafit felület */
    --szin-sotet-alt:       #1E252C;   /* rétegzés a sötét blokkon belül */

    --szin-szoveg:            #14181C; /* fő szöveg — világos háttéren ~15:1 */
    --szin-szoveg-masodlagos: #5A6470; /* másodlagos szöveg — ~5:1 (AA) */
    --szin-szoveg-inverz:     #F5F3F0; /* szöveg sötét felületen */

    --szin-cta:             #A2551A;   /* réz — fehér felirattal 5,4:1 */
    --szin-cta-hover:       #8A4715;   /* 7,0:1 */
    --szin-cta-aktiv:       #743A10;
    --szin-akcentus:        #C8862F;   /* kiemelés, NEM CTA */

    --szin-border:          #E2DED7;
    --szin-border-eros:     #CFC9BF;

    --szin-siker:           #1E7A4C;
    --szin-hiba:            #9E1B32;
    --szin-fokusz:          #1F6FEB;   /* hideg kék — szándékosan nem márkaszín */

    /* Halvány, réz- és állapotalapú háttérfelületek (jelöléshez, nem felülethez) */
    --szin-cta-halvany:     #F6EDE3;
    --szin-siker-halvany:   #EAF3EE;
    --szin-hiba-halvany:    #FBF0F2;

    /* -----------------------------------------------------------------------
       Ö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.
       ----------------------------------------------------------------------- */
    --szin-sotet-melyebb:   #0E1216;
    --szin-sotet-enyhe:     var(--szin-sotet-alt);
    --szin-hatter-melyebb:  var(--szin-hatter-alt);
    --szin-feher:           var(--szin-felulet);
    --szin-szoveg-lagy:     #2C343C;
    --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 grafit családba került: a réz az ajánlatkérésé marad. */
    --szin-hivas:           var(--szin-sotet);
    --szin-hivas-sotet:     var(--szin-sotet-melyebb);
    --szin-hivas-vilagos:   #EFEDE9;

    --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 HÁROM gombos sáv (telefon / visszahívás / ajánlat) magasabb a korábbi
       kétgombosnál, mert az ikon a felirat FÖLÖTT áll. Mért magasság 320 px-en:
       83 px — az alapérték ennél biztonsággal nagyobb. */
    --also-sav-magassag:    92px;

    --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. --- */
    --arnyek-finom:  0 1px 2px rgba(20, 24, 28, 0.06);
    --arnyek-emelt:  0 6px 20px rgba(20, 24, 28, 0.10);
    --arnyek-sav:    0 -2px 12px rgba(20, 24, 28, 0.10);

    /* Ö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 ---
       Rendszerbetűtípus: külső fontkérés nincs.
       A fontfájl self-hosted WOFF2-ként kerül be, ha rendelkezésre áll;
       addig a fallback verem viszi az oldalt. Google Fonts betöltése TILOS. */
    --betu: system-ui, -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, 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;
}

/* 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 167 7712") 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. */
.gomb--cta {
    background: var(--szin-cta);
    border-color: var(--szin-cta);
    color: var(--szin-feher);
    box-shadow: 0 6px 18px rgba(187, 83, 7, 0.32);
}

.gomb--cta:hover,
.gomb--cta:focus {
    background: var(--szin-cta-sotet);
    border-color: var(--szin-cta-sotet);
    color: var(--szin-feher);
    box-shadow: 0 8px 22px rgba(187, 83, 7, 0.38);
}

/* 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(14, 18, 22, 0.28);
    }
}

/* --- Felső bizalmi sáv: keskeny réz gradiens --- */
.fejlec-bizalom {
    background: linear-gradient(90deg, var(--szin-cta-aktiv) 0%, var(--szin-cta) 45%, var(--szin-akcentus) 100%);
    color: var(--szin-feher);
}

/* 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;
    opacity: 0.92;
}

@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--kompakt .logo__kep,
.logo--kompakt-vilagos .logo__kep { height: 36px; }
.logo--brand .logo__kep         { height: 86px; }
.logo--brand-tagline .logo__kep { height: 104px; }

/* 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);
    color: var(--szin-feher);
}

.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-feher);
}

/* 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(245, 243, 240, 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(200, 134, 47, 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(245, 243, 240, 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;
    }
}

/* --- 1280 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. Az ÖT menüpont miatt a
       töréspont magasabb (1280 px), mint a korábbi háromnál — a navigáció
       inkább maradjon hamburgerben, mint hogy összetorlódjon. */
@media (min-width: 1280px) {
    .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;
    }
}

/* Kis asztali szélesség (1280–1439 px): a teljes menü elfér, de csak
   szűkebb térközzel. Enélkül a menü összenyomódna vagy a CTA kilógna. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .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(245, 243, 240, 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(21, 26, 31, 0.30) 0%, rgba(21, 26, 31, 0) 35%,
                rgba(21, 26, 31, 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(21, 26, 31, 0.92) 18%,
                            rgba(21, 26, 31, 0.45) 45%, rgba(21, 26, 31, 0.10) 75%, rgba(21, 26, 31, 0.28) 100%),
            linear-gradient(to bottom, rgba(21, 26, 31, 0.55) 0%, rgba(21, 26, 31, 0) 22%,
                            rgba(21, 26, 31, 0) 72%, rgba(21, 26, 31, 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(200, 134, 47, 0) 0%, var(--szin-cta) 26%,
                    var(--szin-akcentus) 62%, rgba(200, 134, 47, 0) 100%);
        box-shadow: 0 0 18px rgba(200, 134, 47, 0.45);
        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);
    color: var(--szin-szoveg-inverz);
}

.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 RÉZ 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(162, 85, 26, 0.18);
    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;
}

/* A LETILTOTT KÜLDÉS GOMB — beküldés közben.

   Mobilhálózaton tíz fénykép feltöltése percekig is tarthat. A gomb ilyenkor
   letiltódik, hogy a türelmetlen második kattintás ne induljon el újabb
   beküldésként. A látvány egyértelműen „folyamatban" állapotot mutat. */
.urlap__kuldes[disabled] {
    cursor: progress;
    opacity: 0.72;
    filter: saturate(0.75);
}

/* FOLYAMATJELZÉS BEKÜLDÉS KÖZBEN.

   Szerveroldalon renderelődik, de `hidden` állapotban: JavaScript nélkül
   soha nem jelenik meg, és az űrlap ugyanúgy elküldhető marad. */
.urlap__folyamat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--szin-keret);
    border-radius: var(--sugar-kozepes, 0.6rem);
    background: var(--szin-halvany-hatter, #f6f5f3);
    color: var(--szin-szoveg);
    font-size: 1rem;
    line-height: 1.5;
}

/* Forgó jelző. A `prefers-reduced-motion` beállítást tiszteletben tartjuk:
   ott a jelző álló marad, a szöveg viszont ugyanúgy tájékoztat. */
.urlap__folyamat-jelzo {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--szin-keret-eros, #c9c4bd);
    border-top-color: var(--szin-marka, #b06a2c);
    border-radius: 50%;
    animation: azav-forgas 0.9s linear infinite;
}

@keyframes azav-forgas {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .urlap__folyamat-jelzo {
        animation: none;
    }
}

/* 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);
}

/* 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(245, 243, 240, 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(245, 243, 240, 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(245, 243, 240, 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(245, 243, 240, 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;

    /* HÁROM konverziós út. Az ajánlatkérés SZÁNDÉKOSAN a legszélesebb oszlop:
       a vizuális prioritás ajánlat > telefon > visszahívás. */
    display: grid;
    grid-template-columns: 3fr 3fr 4fr;
    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);
}

/* Az ikon a felirat FÖLÖTT áll: három gomb így fér el kulturáltan 320 px-en is,
   vízszintes görgetés és levágott felirat nélkül. */
.also-sav__gomb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

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

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

    /* A felirat NEM törhet betűkre. A három rövid szó („Telefon",
       „Visszahívás", „Ajánlat") 320 px-en is elfér, ha nem nyomjuk össze. */
    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 réz. */
.also-sav__gomb--ajanlat {
    background: var(--szin-cta);
    color: var(--szin-szoveg-inverz);
}

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

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

/* A két másodlagos gomb — szegélyes, nem tömör. Elérhető, de nem kiabál. */
.also-sav__gomb--hivas,
.also-sav__gomb--visszahivas {
    background: transparent;
    color: var(--szin-szoveg);
    border: 2px solid var(--szin-szoveg);
}

.also-sav__gomb--hivas:hover,
.also-sav__gomb--hivas:focus,
.also-sav__gomb--visszahivas:hover,
.also-sav__gomb--visszahivas:focus {
    background: var(--szin-cta-halvany);
    border-color: var(--szin-cta);
    color: var(--szin-cta-hover);
}

/* Ha nincs telefonszám, a maradék két út osztozik a sávon. */
.also-sav--egy-gomb {
    grid-template-columns: 4fr 6fr;
}

/* 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.75rem; padding-inline: 2px; }
    .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(245, 243, 240, 0.62);
}

.morzsamenu--hero .morzsamenu__elem a {
    color: rgba(245, 243, 240, 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(245, 243, 240, 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(14, 18, 22, 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(14, 18, 22, 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(245, 243, 240, 0.45);
}

.gomb--masodlagos-inverz:hover {
    background: rgba(245, 243, 240, 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(245, 243, 240, 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(200, 134, 47, 0.16);
    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-inverz);
    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(245, 243, 240, 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
   ---------------------------------------------------------------------------
   A sötét záró CTA-blokkban él. 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ó. */

.visszahivas {
    margin-top: var(--terkoz-5);
    border-top: 1px solid rgba(245, 243, 240, 0.18);
    padding-top: var(--terkoz-5);
}

.visszahivas__nyito {
    display: flex;
    align-items: center;
    gap: var(--terkoz-2);
    min-height: var(--erintheto-min);
    padding: var(--terkoz-2) 0;
    color: var(--szin-szoveg-inverz);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

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

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

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

/* A lenyíló tartalom VILÁGOS felületen ül: az űrlapmezők így azonnal
   láthatók a sötét blokkon belül is. */
.visszahivas__tartalom {
    margin-top: var(--terkoz-4);
    padding: var(--terkoz-5);
    background: var(--szin-felulet);
    border-radius: var(--sugar-nagy);
    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; }
}

/* ===========================================================================
   KÉPFELTÖLTÉS — előnézet, halmozó hozzáadás, törlés
   ---------------------------------------------------------------------------
   MOBIL-FIRST. A vezérlés ujjal használható: a hozzáadás gomb és a törlés gomb
   egyaránt eléri a 44 px-es minimális érintőfelületet, és a tételek közötti
   távolság sem enged félrenyúlást.

   JavaScript nélkül ezekből semmi nem jelenik meg: a natív fájlmező marad
   láthatóan, és az űrlap ugyanúgy beküldhető.
   =========================================================================== */

/* A natív mező elrejtése — CSAK akkor, ha a JavaScript átvette a vezérlést
   (az osztályt a szkript teszi rá). Nem `display:none`: a mező a billentyűzetes
   bejárásban és a címke hivatkozásában is benne marad, és a beküldés is rajta
   keresztül történik. */
.kepfeltolto__bemenet--rejtett {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kepfeltolto__vezerlo {
    display: flex;
    flex-direction: column;
    gap: var(--terkoz-2);
    align-items: flex-start;
    margin-top: var(--terkoz-2);
}

.kepfeltolto__gomb {
    /* Teljes szélesség mobilon: a legkönnyebben eltalálható forma. */
    width: 100%;
    min-height: var(--erintheto-min);
    justify-content: center;
}

.kepfeltolto__szamlalo {
    margin: 0;
    font-size: var(--betu-segéd);
    font-weight: 600;
    color: var(--szin-szoveg-masodlagos);
}

/* --- A kiválasztott fájlok listája --- */

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

.kepfeltolto__tetel {
    position: relative;
    display: flex;
    gap: var(--terkoz-3);
    align-items: center;
    padding: var(--terkoz-2);
    /* Hely a törlés gombnak, hogy a szöveg ne fusson alá. */
    padding-right: calc(var(--erintheto-min) + var(--terkoz-3));
    background: var(--szin-felulet);
    border: 1px solid var(--szin-border);
    border-radius: var(--sugar);
}

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

.kepfeltolto__elonezet--dokumentum {
    font-size: var(--betu-mikro);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--szin-szoveg-masodlagos);
}

/* PDF-nél és a be nem tölthető képnél ikon áll a miniatűr helyén — törött
   kép ikon SOHA nem maradhat a felületen. */
.kepfeltolto__ikon {
    --ikon-meret: 28px;

    color: var(--szin-szoveg-masodlagos);
}

.kepfeltolto__kep {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kepfeltolto__adatok {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

/* A fájlnév tetszőlegesen hosszú lehet: nem törhet ki a dobozból. */
.kepfeltolto__nev {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--betu-segéd);
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

.kepfeltolto__torles {
    position: absolute;
    top: 50%;
    right: var(--terkoz-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--erintheto-min);
    height: var(--erintheto-min);
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--szin-szoveg-masodlagos);
    cursor: pointer;
    background: var(--szin-hatter-alt);
    border: 1px solid var(--szin-border);
    border-radius: 50%;
    transform: translateY(-50%);
}

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

/* --- Azonnali figyelmeztetések (kliensoldali előellenőrzés) --- */

.kepfeltolto__uzenetek {
    margin-top: var(--terkoz-3);
    padding: var(--terkoz-3);
    font-size: var(--betu-segéd);
    color: var(--szin-hiba);
    background: var(--szin-hiba-halvany);
    border: 1px solid var(--szin-hiba);
    border-radius: var(--sugar);
}

.kepfeltolto__hibalista {
    margin: 0;
    padding-left: 1.25em;
}

.kepfeltolto__hibalista li + li { margin-top: var(--terkoz-1); }

/* Két oszlop, amint elfér — a listát így kevesebb görgetéssel át lehet nézni. */
@media (min-width: 560px) {
    .kepfeltolto__lista { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .kepfeltolto__gomb { width: auto; }

    .kepfeltolto__vezerlo {
        flex-direction: row;
        gap: var(--terkoz-4);
        align-items: center;
    }
}

/* ===========================================================================
   KÖSZÖNŐOLDAL — a feltöltésből kimaradt fájlok jelzése
   ---------------------------------------------------------------------------
   Az ajánlatkérés mentése és a képek feldolgozása két külön lépés. Ha egy kép
   kimarad, azt a beküldőnek látnia KELL — de nem hibaként, mert a beküldése
   sikeres volt. Ezért figyelmeztető, nem elutasító hangvétel és színvilág.
   =========================================================================== */

.fajl-figyelmeztetes {
    margin: var(--terkoz-5) 0;
    padding: var(--terkoz-4);
    text-align: left;
    background: var(--szin-cta-halvany);
    border: 1px solid var(--szin-akcentus);
    border-radius: var(--sugar);
}

.fajl-figyelmeztetes__cim {
    display: flex;
    gap: var(--terkoz-2);
    align-items: center;
    margin: 0 0 var(--terkoz-2);
    font-weight: 700;
    color: var(--szin-szoveg);
}

.fajl-figyelmeztetes__cim svg {
    flex: 0 0 auto;
    color: var(--szin-akcentus);
}

.fajl-figyelmeztetes__bevezeto,
.fajl-figyelmeztetes__megoldas {
    margin: 0 0 var(--terkoz-2);
    font-size: var(--betu-segéd);
}

.fajl-figyelmeztetes__megoldas { margin-bottom: 0; }

.fajl-figyelmeztetes__lista {
    margin: 0 0 var(--terkoz-3);
    padding-left: 1.25em;
    font-size: var(--betu-segéd);
}

.fajl-figyelmeztetes__lista li + li { margin-top: var(--terkoz-1); }