/*
 * A NYILVÁNOS OLDAL STÍLUSA — kézzel, build-lánc nélkül.
 *
 * ===== MIÉRT NINCS TAILWIND =====
 *
 * Mert nincs Vite a projektben, és egy Node-lánc behúzása EGY marketinglapért
 * több üzemeltetési kockázat, mint amennyi kényelmet ad: minden telepítéshez
 * kellene egy build lépés, és a lap addig se nézne ki sehogy, amíg az elszáll.
 * A FrankenPHP ezt a fájlt közvetlenül kiszolgálja.
 *
 * ===== A SZÍNEK =====
 *
 * Egy alapszín (mélykék) + egy kiemelő (borostyán). Sötét módot is tud: a
 * `prefers-color-scheme` a látogató rendszerbeállítását követi. Ez nem
 * divat — a fejlesztő-közeli célközönség fele sötétben olvas.
 */

:root {
    --hatter: #ffffff;
    --hatter-halvany: #f6f7f9;
    --hatter-erős: #0f172a;
    --szoveg: #16202e;
    --szoveg-halvany: #5b6675;
    --keret: #e3e7ec;
    --alap: #1d4ed8;
    --alap-sotet: #1739a8;
    --alap-halvany: #eef2ff;
    /* AMI AZ `--alap` HÁTTEREN ÁLL. Világos módban a fehér 6,7:1 — sötét
       módban viszont az `--alap` világoskékre vált, és ott a fehér 2,47:1
       lenne, vagyis WCAG-bukás a lap LEGFONTOSABB kattintható elemén.
       Ezért nem `#fff` van bedrótozva a gombokba, hanem ez a változó. */
    --alap-szoveg: #ffffff;
    /* INTERAKTÍV ELEM KÖRVONALA (űrlapmező, másodlagos gomb). A `--keret`
       1,24:1 — az elválasztó vonalakhoz elég, egy beviteli mező EGYETLEN
       körvonalához nem (WCAG 1.4.11: 3:1). */
    --keret-eros: #7d8796;
    --kiemelo: #b45309;
    --kiemelo-halvany: #fffbeb;
    --zold: #047857;
    --zold-halvany: #ecfdf5;
    --arnyek: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
    --sugar: 14px;
    --szeles: 1140px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hatter: #0c1220;
        --hatter-halvany: #121a2b;
        --hatter-erős: #060b16;
        --szoveg: #e8edf5;
        --szoveg-halvany: #9aa7bb;
        --keret: #1f2a3d;
        --alap: #7ea2ff;
        --alap-sotet: #a8c0ff;
        --alap-halvany: #16203a;
        /* Sötét szöveg a világos kéken: 7,6:1. */
        --alap-szoveg: #0c1220;
        --keret-eros: #6b7a94;
        --kiemelo: #fbbf24;
        --kiemelo-halvany: #241c0c;
        --zold: #34d399;
        --zold-halvany: #0d241c;
        --arnyek: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--hatter);
    color: var(--szoveg);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* A BILLENTYŰZETES NAVIGÁCIÓ LÁTHATÓ. Egy `outline: none` itt akadálymentességi
   hiba lenne, nem esztétikai döntés. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--alap);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Aki csökkentett mozgást kért, ne kapjon animációt. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

a { color: var(--alap); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1rem; }

.keret { max-width: var(--szeles); margin: 0 auto; padding: 0 1.25rem; }
.keskeny { max-width: 760px; }

/* Ugrás a tartalomra — csak billentyűzettel látszik. */
.ugras {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--alap); color: #fff; padding: .75rem 1.25rem;
    border-radius: 0 0 var(--sugar) 0;
}
.ugras:focus { left: 0; }

/* ===================================================================
   Fejléc
   =================================================================== */

.fejlec {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--hatter) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--keret);
}
.fejlec-sor { display: flex; align-items: center; gap: 1.25rem; height: 68px; }
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 800;
        font-size: 1.08rem; color: var(--szoveg); letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
/* A JEL BLOKK-SZINTŰ. Beágyazott képként (`img`) alapvonalra ülne, és
   alatta 3-4 képpont rés nyílna — a fejléc magassága ettől ugrana meg.
   Az `svg` a régi, egyszínű jel miatt maradt bent: a szabály olcsó, és
   így egy visszaállítás sem törik el rajta. */
.logo svg, .logo img { display: block; }
.lablec-logo svg, .lablec-logo img { display: block; }

.fo-menu { display: flex; gap: .25rem; margin-left: auto; }
.fo-menu a {
    padding: .5rem .7rem; border-radius: 8px; color: var(--szoveg-halvany);
    font-size: .94rem; font-weight: 550;
}
.fo-menu a:hover { background: var(--hatter-halvany); color: var(--szoveg); text-decoration: none; }
.fo-menu a[aria-current="page"] { color: var(--alap); background: var(--alap-halvany); }

.fejlec-jobb { display: flex; align-items: center; gap: .5rem; }
.mobil-menu { display: none; }

.nyelvvalto { display: flex; border: 1px solid var(--keret); border-radius: 8px; overflow: hidden; }
.nyelvvalto a {
    padding: .32rem .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    color: var(--szoveg-halvany); background: var(--hatter);
}
.nyelvvalto a:hover { text-decoration: none; background: var(--hatter-halvany); }
.nyelvvalto a[aria-current="true"] { background: var(--alap); color: #fff; }

/* ===================================================================
   Gombok
   =================================================================== */

.gomb {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .72rem 1.25rem; border-radius: 10px; font-weight: 650; font-size: .96rem;
    border: 1px solid transparent; cursor: pointer; text-align: center;
}
.gomb:hover { text-decoration: none; }
.gomb-fo { background: var(--alap); color: var(--alap-szoveg); box-shadow: var(--arnyek); }
.gomb-fo:hover { background: var(--alap-sotet); color: var(--alap-szoveg); }
.gomb-mas { background: var(--hatter); color: var(--szoveg); border-color: var(--keret-eros); }
.gomb-mas:hover { background: var(--hatter-halvany); }
.gomb-kicsi { padding: .45rem .85rem; font-size: .88rem; }
.gomb-teljes { width: 100%; }

/* ===================================================================
   Szakaszok
   =================================================================== */

.szakasz { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.szakasz-halvany { background: var(--hatter-halvany); }
.szakasz-fej { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.szakasz-fej p { color: var(--szoveg-halvany); font-size: 1.08rem; margin: 0; }

.cimke {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--alap-halvany); color: var(--alap);
    padding: .3rem .7rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 1rem;
}
.cimke-zold { background: var(--zold-halvany); color: var(--zold); }
.cimke-kiemelo { background: var(--kiemelo-halvany); color: var(--kiemelo); }

/* ===================================================================
   Nyitókép
   =================================================================== */

.nyito { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.nyito-racs { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.nyito p.bevezeto { font-size: 1.15rem; color: var(--szoveg-halvany); max-width: 34rem; }
.nyito-gombok { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1rem; }
.nyito-apro { font-size: .88rem; color: var(--szoveg-halvany); margin: 0; }

/* A KOCKÁZATOLDÓ HÁRMAS. Egy pontokkal tagolt szürke sorban a három
   legfontosabb kifogásoldó („nem kell kártya", „nincs telepítés", „bármikor
   lemondható") egyetlen átugorható mondat volt. Külön tételként, pipával
   mindhárom megáll a szemben. Sorba tördel, ha nem fér ki. */
.nyito-apro-lista {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem 1.15rem;
    font-size: .88rem; color: var(--szoveg-halvany);
}
.nyito-apro-lista li { display: flex; align-items: center; gap: .35rem; }
.nyito-apro-lista svg { color: var(--zold); flex: none; }

/* ===================================================================
   Rácsok, kártyák
   =================================================================== */

.racs { display: grid; gap: 1.25rem; }
.racs-2 { grid-template-columns: repeat(2, 1fr); }
.racs-3 { grid-template-columns: repeat(3, 1fr); }
.racs-4 { grid-template-columns: repeat(4, 1fr); }

.kartya {
    background: var(--hatter); border: 1px solid var(--keret);
    border-radius: var(--sugar); padding: 1.5rem;
}
.kartya h3 { margin-bottom: .4rem; }
.kartya p { color: var(--szoveg-halvany); margin: 0; font-size: .96rem; }
.kartya-ikon {
    width: 42px; height: 42px; border-radius: 11px; background: var(--alap-halvany);
    display: grid; place-items: center; margin-bottom: .9rem; color: var(--alap);
}

/* Lépések (hogyan működik) */
.lepesek { counter-reset: lepes; display: grid; gap: 1.25rem; }
.lepes { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; }
.lepes-szam {
    counter-increment: lepes; width: 46px; height: 46px; border-radius: 50%;
    background: var(--alap); color: #fff; display: grid; place-items: center;
    font-weight: 800; font-size: 1.05rem;
}
.lepes-szam::before { content: counter(lepes); }
.lepes h3 { margin-bottom: .25rem; }
.lepes p { color: var(--szoveg-halvany); margin: 0; }

/* Mért számok */
.szamok { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.szam { text-align: center; padding: 1.25rem .75rem; background: var(--hatter);
        border: 1px solid var(--keret); border-radius: var(--sugar); }
.szam b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em;
          color: var(--alap); line-height: 1.1; }
.szam span { font-size: .88rem; color: var(--szoveg-halvany); }

/* ===================================================================
   Árlista
   =================================================================== */

/* HÁROM OSZLOP, NEM NÉGY — 2026-08-23.
   A négyes rács négy csomagra készült. A Nano és az „Egyedi" kártyával hat
   lett belőlük, és a négyes rács 4+2-re tördelt: a legdrágább csomag és az
   ajánlatkérés árván maradt egy féloldalas második sorban, a hajtás alatt.
   Hatnál a három oszlop az egyetlen kiosztás, ami két TELJES sort ad. */
.arak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.ar-kartya {
    background: var(--hatter); border: 1px solid var(--keret); border-radius: var(--sugar);
    padding: 1.5rem 1.35rem; display: flex; flex-direction: column;
}
.ar-kartya.kiemelt { border-color: var(--alap); box-shadow: var(--arnyek); position: relative; }
.ar-kartya.kiemelt::after {
    content: attr(data-cimke); position: absolute; top: -11px; left: 50%;
    transform: translateX(-50%); background: var(--alap); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .22rem .7rem; border-radius: 999px; white-space: nowrap;
}
.ar-nev { font-size: 1.05rem; font-weight: 750; margin: 0 0 .3rem; }
.ar-osszeg { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: .5rem 0 .1rem; }
.ar-idoszak { color: var(--szoveg-halvany); font-size: .85rem; margin: 0 0 1.1rem; }
.ar-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; font-size: .93rem; }
.ar-lista li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; align-items: start; }
.ar-lista svg { margin-top: .28rem; color: var(--zold); }
.ar-kredit-reszlet {
    display: block; margin-top: .25rem; color: var(--szoveg-halvany);
    font-size: .78rem; line-height: 1.45;
}
.ar-kartya .gomb { margin-top: auto; }

.penznemvalto { display: flex; justify-content: center; gap: .35rem; margin-bottom: 1.75rem; }
.penznemvalto button {
    padding: .4rem .9rem; border-radius: 8px; border: 1px solid var(--keret);
    background: var(--hatter); color: var(--szoveg-halvany); font-weight: 650;
    font-size: .88rem; cursor: pointer;
}
.penznemvalto button[aria-pressed="true"] { background: var(--alap); color: #fff; border-color: var(--alap); }

/* ===================================================================
   Táblázat, GYIK, tartalmi oldalak
   =================================================================== */

.tabla-doboz { overflow-x: auto; border: 1px solid var(--keret); border-radius: var(--sugar); }
table.osszehasonlito { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .94rem; }
table.osszehasonlito th, table.osszehasonlito td { padding: .8rem 1rem; text-align: left;
    border-bottom: 1px solid var(--keret); }
table.osszehasonlito thead th { background: var(--hatter-halvany); font-weight: 700; }
table.osszehasonlito tbody tr:last-child td { border-bottom: 0; }

details.gyik {
    border: 1px solid var(--keret); border-radius: var(--sugar);
    padding: 1rem 1.25rem; margin-bottom: .75rem; background: var(--hatter);
}
details.gyik summary { cursor: pointer; font-weight: 650; list-style: none; }
details.gyik summary::-webkit-details-marker { display: none; }
details.gyik summary::after { content: "+"; float: right; color: var(--szoveg-halvany); font-weight: 700; }
details.gyik[open] summary::after { content: "\2212"; }
details.gyik p { margin: .85rem 0 0; color: var(--szoveg-halvany); }

/* Jogi és hosszú szöveges oldalak */
.szoveges { max-width: 780px; margin: 0 auto; }
.szoveges h2 { margin-top: 2.5rem; font-size: 1.35rem; }
.szoveges h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.szoveges ul, .szoveges ol { color: var(--szoveg-halvany); padding-left: 1.25rem; }
.szoveges li { margin-bottom: .4rem; }
.szoveges table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .93rem; }
.szoveges th, .szoveges td { border: 1px solid var(--keret); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.szoveges thead th { background: var(--hatter-halvany); }
.tartalomjegyzek { background: var(--hatter-halvany); border-radius: var(--sugar); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
/* A SZÁMOZÁS A CÍMEKBEN VAN, nem a listán: a szakaszcímek maguk hozzák
   („1. Ki az adatkezelő”). Egy `<ol>` saját számozása mellett ez „1. 1. Ki
   az adatkezelő”-nek látszana — böngészőben vettem észre, nem kódolvasásból. */
.tartalomjegyzek ol { margin: 0; padding-left: 0; list-style: none; }
.tartalomjegyzek li { margin-bottom: .35rem; }

/* KITÖLTETLEN CÉGADAT. Szándékosan feltűnő: aki ránéz, lássa, hogy még nincs
   kész — egy halvány helyőrző itt élesben is bent maradna. */
.hianyzo {
    background: var(--kiemelo-halvany); color: var(--kiemelo);
    border: 1px dashed currentColor; border-radius: 6px;
    padding: 0 .35rem; font-size: .9em; font-weight: 650;
}

.figyelem {
    background: var(--kiemelo-halvany); border: 1px solid color-mix(in srgb, var(--kiemelo) 35%, transparent);
    border-left: 4px solid var(--kiemelo); border-radius: 10px;
    padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .95rem;
}
.figyelem strong { color: var(--kiemelo); }

/* ===================================================================
   Űrlap
   =================================================================== */

.urlap { display: grid; gap: 1rem; }
.urlap-sor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mezo { display: grid; gap: .35rem; }
.mezo label { font-size: .9rem; font-weight: 650; }
.mezo .sugo { font-size: .82rem; color: var(--szoveg-halvany); }
/* A MEZŐ EGYETLEN KÖRVONALA — a `--keret` (1,24:1) itt kevés volt.
   Elválasztó vonalhoz elég, de egy beviteli mezőt CSAK ez a vonal
   határol: nélküle nem látszik, hol lehet gépelni (WCAG 1.4.11: 3:1).
   És ez a lap egyetlen lead-forrása. */
.mezo input, .mezo select, .mezo textarea {
    padding: .68rem .8rem; border: 1px solid var(--keret-eros); border-radius: 9px;
    background: var(--hatter); color: var(--szoveg); font: inherit; font-size: .95rem; width: 100%;
}
.mezo textarea { min-height: 150px; resize: vertical; }
.mezo .hiba { color: #b91c1c; font-size: .85rem; }
@media (prefers-color-scheme: dark) { .mezo .hiba { color: #fca5a5; } }

.pipa-sor { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; align-items: start; font-size: .9rem; }
.pipa-sor input { width: 18px; height: 18px; margin-top: .22rem; }
.pipa-sor label { color: var(--szoveg-halvany); font-weight: 400; }

/* A MÉZESBÖDÖN. `display:none` helyett elrejtve, de a segédeszközöknek is
   kimondottan jelezve (`aria-hidden`, `tabindex=-1`) — egy képernyőolvasót
   használó embert nem szabad csapdába csalni. */
.mezesbodon { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.siker {
    background: var(--zold-halvany); border: 1px solid color-mix(in srgb, var(--zold) 35%, transparent);
    border-left: 4px solid var(--zold); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.siker strong { color: var(--zold); }

/* ===================================================================
   Lábléc
   =================================================================== */

.lablec { padding: 3.5rem 0 2rem; margin-top: 0; }
body:not(.fooldal-uj) .lablec { background: var(--hatter-erős); color: #cbd5e1; }
body:not(.fooldal-uj) .lablec a { color: #cbd5e1; }
body:not(.fooldal-uj) .lablec a:hover { color: #fff; }
.lablec-racs { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.lablec h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .9rem; }
body:not(.fooldal-uj) .lablec h4 { color: #fff; }
.lablec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
/* ÖSSZEFÉSÜLVE — a két gép ugyanezt a hibát egymástól függetlenül javította.
   A szín korábban INLINE állt a `lablec.blade.php`-ban, és így semmilyen
   stíluslap nem tudta felülírni (`style`-t csak `!important` fog le) — az új,
   világos hátterű főoldalon 2,46:1-re esett a bemutató bekezdés, a „RobiFox"
   felirat pedig 1,04:1-re. Itt a helye: a régi, SÖTÉT láblécen ez a szürke és ez
   a fehér a helyes, az új főoldal pedig felülírja (`fooldal.css:1682-1685`, mind
   a négy lábléc-osztályra kimondva).

   A `max-width` A MÁSIK ÁGRÓL jön, és nem szín-, hanem sorhossz-kérdés: a
   bemutató bekezdés 26rem-nél tördel. Az az ág a színt is kivette innen — azt
   NEM vettük át, mert a sötét láblécnek szüksége van rá, és a felülírás-készlet
   ezen az ágon van meg teljesen. A `style` attribútum viszont az ő javításuk
   szerint TŰNT EL a blade-ből: onnan semmi nem maradt beírva. */
.lablec-info { font-size: .9rem; line-height: 1.7; max-width: 26rem; color: #94a3b8; }
.lablec-logo { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; margin-bottom: .9rem; }
.lablec-alj {
    margin-top: 2.5rem; padding-top: 1.5rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .86rem;
}
body:not(.fooldal-uj) .lablec-alj { border-top: 1px solid rgba(255, 255, 255, .12); color: #94a3b8; }

/* ===================================================================
   A KÉT RENDSZER HATÁRA — MIÉRT `:not(.fooldal-uj)`

   Ez a fájl MINDEN nyilvános lapon betöltődik, a főoldalon és az
   előnézet-képernyőkön is — azok viszont már az ÚJ, VILÁGOS rendszeren
   futnak (`fooldal.css`, `body.fooldal-uj`). Ami itt hatókör nélkül áll,
   az átszivárog oda.

   A szivárgás nem elméleti volt. A közös lábléc terméknevét a
   `.lablec-logo { color: #fff }` festette fehérre — a régi, sötétkék
   láblécen ez volt a helyes, a világos papíron viszont a „RobiFox"
   felirat egyszerűen ELTŰNT. Ugyanígy a záró sáv címe: a `.zaro h2`
   `var(--alap-szoveg)`-je majdnem fehér, mert a régi záró sáv HÁTTERE volt
   kék; az új rendszerben a sáv törtfehér, és a „Nézd meg a saját
   weboldaladon" cím olvashatatlanul világos lett rajta.

   A megoldás nem `!important` és nem felülírás: a SZÍNEK maradnak ott, ahol
   a hozzájuk tartozó SÖTÉT háttér is van. Ami elrendezés (rács, méret,
   térköz), az közös marad — abban nincs vita a két rendszer között. Az új
   rendszer színeit a `fooldal.css` adja; ahol egy KÖZÖS részletnek
   (`reszek/lablec.blade.php`) ott nincs szabálya, azt itt, a
   `body.fooldal-uj` hatókörben pótoljuk — a `fooldal.css` egy másik darab
   fájlja, és egy közös részlet olvashatósága nem várhat rá.
   =================================================================== */

body:not(.fooldal-uj) .lablec-logo { color: #fff; }
/* A bemutatkozó bekezdés színe KORÁBBAN egy beírt `style="color:#94a3b8"`
   volt a részletben, és pont ezért szivárgott mindenhová: egy `style`
   attribútumot stíluslapból csak `!important`-tal lehet lefogni. Innen
   viszont már hatókörözhető — a régi lapokon ugyanaz a szín, az újakon a
   világos rendszer halvány tintája. */
body:not(.fooldal-uj) .lablec-info { color: #94a3b8; }
body.fooldal-uj .lablec-info { color: var(--tinta-6); }

/* ===================================================================
   Záró felhívás — a RÉGI, KÉK SÁV

   Az `--alap` háttér és az `--alap-szoveg` szöveg együtt jár: ez a két
   érték egymáshoz van mérve (6,7:1). Az új rendszer záró sávja törtfehér,
   és ott a saját színeit a `fooldal.css` adja — ide tehát csak az tartozik,
   ami a kék sávon áll.
   =================================================================== */

body:not(.fooldal-uj) .zaro { background: var(--alap); color: var(--alap-szoveg); }
.zaro { padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; }
body:not(.fooldal-uj) .zaro h2 { color: var(--alap-szoveg); }
.zaro p { max-width: 40rem; margin: 0 auto 1.75rem; }
body:not(.fooldal-uj) .zaro p { color: color-mix(in srgb, var(--alap-szoveg) 88%, var(--alap)); }
body:not(.fooldal-uj) .zaro .gomb-fo { background: var(--alap-szoveg); color: var(--alap); }
body:not(.fooldal-uj) .zaro .gomb-fo:hover { background: color-mix(in srgb, var(--alap-szoveg) 92%, var(--alap)); color: var(--alap-sotet); }
body:not(.fooldal-uj) .zaro .gomb-mas { background: transparent; color: var(--alap-szoveg);
                  border-color: color-mix(in srgb, var(--alap-szoveg) 55%, transparent); }
body:not(.fooldal-uj) .zaro .gomb-mas:hover { background: color-mix(in srgb, var(--alap-szoveg) 12%, transparent); }

/* A FÓKUSZKERET A ZÁRÓ SÁVON BELÜL LÁTHATATLAN VOLT.
   A globális szabály `outline: 3px solid var(--alap)` — a `.zaro` háttere
   pedig PONTOSAN `var(--alap)`. Ugyanaz a szín ugyanazon: 1,00:1, vagyis a
   billentyűzettel navigáló látogató a lap UTOLSÓ konverziós pontján veszti
   el a fókuszt (WCAG 2.4.7). Az új rendszer sávján ez a baj nem áll fenn
   (világos háttér, `--akcent` keret a `fooldal.css`-ből), ezért ott ez a
   javítás nem is kell. */
body:not(.fooldal-uj) .zaro a:focus-visible,
body:not(.fooldal-uj) .zaro button:focus-visible { outline-color: var(--alap-szoveg); }
.zaro-gombok { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
/* A záró sávon a szöveg a kiemelt háttéren ül: a `--szoveg-halvany` itt
   olvashatatlan lenne, ezért a sáv saját szövegszínéből halványítunk. */
.zaro-apro {
    margin: 1.25rem 0 0; font-size: .88rem;
    color: color-mix(in srgb, var(--alap-szoveg) 80%, var(--alap));
}

/* ===================================================================
   Reszponzív — a mobil NEM másodlagos: az érdeklődők fele onnan néz
   =================================================================== */

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

    /* A FŐCÍM ÉS A GOMB MARAD ELÖL — az ábra megy alá.
       Itt korábban `order: -1` állt, vagyis mobilon ELŐBB jött a nagy
       illusztráció. Mérve: 844 px magas kijelzőn a főcím 581 px-nél, az első
       gomb 967 px-nél kezdődött — az első képernyőn NEM VOLT kattintható
       ajánlat. Egy eladási oldalon ez a legdrágább hiba, amit egy
       CSS-sorral el lehet követni. Külső átvizsgálás mérte ki. */
    .nyito-abra { margin-top: 1.5rem; }
    .racs-4 { grid-template-columns: repeat(2, 1fr); }
    .arak { grid-template-columns: repeat(2, 1fr); }
    .lablec-racs { grid-template-columns: 1fr 1fr; }
}

/* A FEJLÉC HAMARABB CSUKÓDIK ÖSSZE, MINT KORÁBBAN.
   A menü eddig csak 720 px alatt tűnt el — 721 és 884 px között viszont az
   öt menüpont + nyelvváltó + két gomb + logó MÁR NEM FÉRT KI, és a lap
   VÍZSZINTESEN GÖRGETHETŐVÉ vált. Mind a tizenegy aloldalon, minden
   tableten és minden keskenyebb asztali ablakban. Külső átvizsgálás mérte
   ki; a mobil (390 px) és az asztali (1280 px) nézet közti sávot addig
   senki nem nézte meg.

   Csak a MENÜ költözik ide: a ragadós fejléc és az alacsonyabb sor a 720 px
   alatti szabály marad, mert azt a függőleges hely szűkössége indokolja,
   nem a vízszintesé. */
@media (max-width: 900px) {
    .fo-menu { display: none; }
    .fejlec-jobb { margin-left: auto; }
    .mobil-menu { display: block; position: relative; }
    .mobil-menu summary {
        list-style: none; cursor: pointer; border: 1px solid var(--keret-eros);
        border-radius: 9px; padding: .45rem .65rem; font-size: .88rem;
        font-weight: 700; background: var(--hatter);
    }
    .mobil-menu summary::-webkit-details-marker { display: none; }
    .mobil-menu-lap {
        position: absolute; z-index: 60; right: 0; top: calc(100% + .5rem);
        width: min(290px, calc(100vw - 2.5rem)); padding: .8rem;
        border: 1px solid var(--keret); border-radius: 12px;
        background: var(--hatter); box-shadow: var(--arnyek);
    }
    .mobil-menu-lap nav { display: grid; gap: .2rem; }
    .mobil-menu-lap nav a { padding: .55rem .65rem; color: var(--szoveg); border-radius: 7px; }
    .mobil-menu-lap nav a[aria-current="page"] { color: var(--alap); background: var(--alap-halvany); }
    .mobil-menu-alj {
        display: flex; gap: 1rem; margin-top: .55rem; padding: .7rem .65rem .1rem;
        border-top: 1px solid var(--keret); font-size: .9rem; font-weight: 650;
    }
    .mobil-menu-reg { display: none; }
}

@media (max-width: 720px) {
    /* A FEJLÉC NEM RAGAD, ÉS ALACSONYABB.
       Két sorba tördelve ÉS ragadósan 204 px-et vitt el egy 844 px-es
       kijelzőből — a viewport negyedét, végig. A logó és a menü egy
       görgetéssel úgyis visszahozható; a képernyő teteje viszont az
       ajánlaté. */
    .fejlec { position: static; }
    .fejlec-sor { height: auto; min-height: 64px; padding: .6rem 0; gap: .55rem; }
    .fejlec-jobb .nyelvvalto, .fejlec-jobb .gomb-mas { display: none; }
    .nyito { padding-top: 1.25rem; }
    .nyito p.bevezeto { font-size: 1.02rem; }
    .racs-2, .racs-3, .racs-4 { grid-template-columns: 1fr; }
    .arak { grid-template-columns: 1fr; }
    .szamok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .szam { min-width: 0; }
    .szam span { overflow-wrap: anywhere; }
    .urlap-sor { grid-template-columns: 1fr; }
    .lablec-racs { grid-template-columns: 1fr; }
    .ar-kartya.kiemelt::after { left: 1.35rem; transform: none; }
}

/* 320–360 px között a logó + CTA + menü már nem fér el egy sorban.
   A CTA ilyenkor a lenyílóba kerül: elérhető marad, de nem szorítja
   szét a fejlécet. */
@media (max-width: 360px) {
    .fejlec-jobb .gomb-fo { display: none; }
    .mobil-menu-reg { display: inline; }
}

/* Nyomtatás: a jogi oldalakat sokan kinyomtatják vagy PDF-be mentik. */
@media print {
    .fejlec, .lablec, .zaro, .ugras { display: none; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* =====================================================================
   A SÜTI-SÁV (2026-09-01)
   =====================================================================

   A LAP ALJÁN ÜL, NEM ELŐTTE. Nem modális, és ez szándékos: ma tájékoztat,
   nem hozzájárulást kér (az indoklás `App\Support\SutiHozzajarulas`), tehát
   nincs miért elzárnia a tartalmat. Egy elzáró süti-ablak a leggyakoribb
   „azonnal bezárom, bármit is írt" felület — pont az ellenkezőjét éri el
   annak, amiért van.

   A `position: fixed` + `bottom` párost egy `padding-bottom` NEM követi a
   `body`-n: a sáv a lap legalját takarja, amíg becsukatlan. A láblécben
   viszont épp jogi hivatkozások állnak, tehát a sáv magassága bele van
   számítva a lábléc alsó bélésébe (`.lablec { padding-bottom }` alább). */
.suti-sav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: var(--felszin, #fff);
    border-top: 1px solid var(--keret-szin, #e4e4e7);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
}
.suti-sav-tartalom {
    max-width: 62rem;
    margin: 0 auto;
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.suti-sav-szoveg {
    margin: 0;
    flex: 1 1 20rem;
    font-size: .9rem;
    line-height: 1.5;
}
/* A SÜTIK NEVE MONOSPACE-BEN. Nem díszítés: ezek technikai azonosítók, és a
   látogató a böngésző fejlesztői eszközében pontosan így fogja látni őket —
   ha ott ellenőrizni akarja, amit írunk, egyezzen a betűkép is. */
.suti-sav-nevek {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    opacity: .85;
    margin-inline: .25rem;
    overflow-wrap: anywhere;
}
.suti-sav-gomb { flex: 0 0 auto; }

/* ===== A HELYKIHAGYÁS A SÁV ALATT: JS-BŐL, MÉRT MAGASSÁGGAL =====

   ITT KORÁBBAN EGY TIPP ÁLLT (`.lablec { padding-bottom: 7rem }`), ÉS KÉT
   OKBÓL IS ROSSZ VOLT — mindkettőt böngésző-mérés mutatta meg:

   1. NEM IS ÉRVÉNYESÜLT. A főoldal és a sales-lapok a `fooldal.css`-t is
      betöltik, abban pedig `body.fooldal-uj .lablec{padding:48px 0 32px}` áll —
      NAGYOBB specifikusságú szelektor, tehát sorrendtől függetlenül nyer. A
      lábléc alsó bélése mérve MINDENHOL 32px maradt.
   2. A SZÁM IS KEVÉS VOLT. A sáv tényleges magassága mérve: 137px (1280px),
      180px (768px), 278px (375px), 321px (320px) — a 7rem (112px) egyiket sem
      fedi. A sáv ezért MOBILON ELFOGTA a lábléc jogi hivatkozásainak
      kattintását; a `25-suti-sav.spec.js` meg is nevezte az elfogó elemet
      („`.suti-sav-nem` … intercepts pointer events").

   A CSS-ben ez nem javítható tisztán: a sáv magassága a szöveg hosszától, a
   betűkészlettől és a viewporttól függ, és egy `!important`-tal megvívott
   specifikussági háború a következő új lap-CSS-nél újrakezdődne.

   A JS ezért a MÉRT magasságot teszi a `body` aljára (lásd `reszek/suti-sav`),
   és a döntés után visszaveszi. Ami itt marad: a sáv `max-height`-je, hogy egy
   hosszú szöveg se foglalja el a képernyő felét. */
.suti-sav { max-height: 45vh; overflow-y: auto; }

/* MOBILON A SÜTI-NEVEK LISTÁJA KIMARAD.
   Mérve 320px-en a sáv 321px magas volt — a képernyő 40%-a. A leghosszabb
   elem a négy süti neve monospace-ben; a jogi lap ugyanezt felsorolja, és a
   sáv oda mutat. A tájékoztatás így nem sérül: a látogató egy kattintással
   megkapja a teljes listát. */
@media (max-width: 480px) { .suti-sav-nevek { display: none; } }

/* Nyomtatáskor a sáv nem kell — mint a fejléc és a lábléc. */
@media print { .suti-sav { display: none; } }

/* A KÉT GOMB EGYENRANGÚ (2026-09-01, a GA4 miatt).
   Az „Elutasítom" ugyanolyan méretű és ugyanannyi kattintásra van, mint az
   „Elfogadom": a hozzájárulásnak SZABADNAK kell lennie, egy halványra vett
   elutasítás pedig a gyakorlatban nem szabad választás. Csak a HANGSÚLY más
   (kitöltött vs. szegélyes), és a sorrend fordított — a szem először a szűkebb
   lehetőséget látja. */
.suti-sav-gombok { display: flex; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; }
.suti-sav-nem {
    background: transparent;
    border: 1px solid var(--keret-szin, #d4d4d8);
    color: inherit;
}
.suti-sav-nem:hover { border-color: currentColor; }

/* A jogi lapon a döntés kezelőfelülete. Keretes doboz, mert ez az egyetlen
   HELY azon a lapon, ahol a látogató nem olvas, hanem TESZ valamit. */
.suti-dontes {
    border: 1px solid var(--keret-szin, #e4e4e7);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin: 1rem 0 2rem;
}
.suti-dontes p { margin: 0 0 .5rem; }