/* =============================================================================
   far360 — PUBLIKUS LAPOK: szekcióritmus, bevezető folyószöveg, köszönő-oldalak,
   egy-kártyás belépő/2FA/jelszó-lapok.

   A hero-szekció a hero.css-ben, a dekoratív formák a shapes.css-ben vannak.
   ============================================================================= */
/* -----------------------------------------------------------------------------
   Szekcióritmus a publikus lapokon
   ----------------------------------------------------------------------------- */
.f-szekcio { margin-bottom: var(--f-block); }
.f-szekcio:last-child { margin-bottom: 0; }

.f-szekcio__fejlec { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.f-szekcio__fejlec h2 { max-width: 22ch; }

/* Bevezető, hosszabb folyószöveg-blokk (a kezdőlap jogi bevezetője). */
.f-bevezeto p {
    max-width: 68ch;
    margin-bottom: 0.9rem;
    line-height: 1.7;
    color: var(--f-grey);
}
.f-bevezeto p:last-child { margin-bottom: 0; }
.f-bevezeto strong { color: var(--f-ink); }

/* -----------------------------------------------------------------------------
   Köszönő-oldalak és középre zárt egy-kártyás lapok (belépés, 2FA, jelszó-reset)
   ----------------------------------------------------------------------------- */
.f-koszonjuk {
    position: relative;
    z-index: 0;
    overflow: hidden;
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem);
    border-radius: var(--f-radius-section);
    background: var(--f-hero);
    text-align: center;
}
/* A szövegblokk SAJÁT rétegben, a formák FÖLÖTT. A szöveg KÖZÉPRE zárt és a doboz
   középső 68%-án él, a két dekoratív forma pedig az ÁTLÓS SARKOKBAN, a szélső 16%-on
   belül (shapes.css) — a két tartomány nem érintkezik. */
.f-koszonjuk__torzs {
    position: relative;
    z-index: 1;
    max-width: min(40rem, 68%);
    margin-inline: auto;
}
@media (max-width: 860px) {
    /* A formák eltűnnek, a szöveg megkapja a teljes szélességet. */
    .f-koszonjuk__torzs { max-width: 100%; }
}
.f-koszonjuk h1 {
    font-size: var(--t-h2-hero);
    font-weight: 500;
    letter-spacing: -0.043em;
    line-height: 1.0;
}
.f-koszonjuk p {
    max-width: 46rem;
    margin-inline: auto;
    line-height: 1.7;
    color: var(--f-grey);
}
.f-koszonjuk__meta { margin-top: 1.25rem; }
.f-koszonjuk .btn-f,
.f-koszonjuk .btn-f-outline { margin-top: 1.25rem; }

/* Egy-kártyás lapok: belépés, 2FA, jelszó-reset, biztonság, hozzáférés-hiba.
   Három szélesség és két igazítás — korábban mind inline style-ként, hét nézetben. */
.f-auth-kartya {
    max-width: 440px;
    margin: 2rem auto;
}
.f-auth-kartya--kozepes { max-width: 480px; }
.f-auth-kartya--szeles  { max-width: 520px; }
/* A portál biztonsági/profil lapjain a kártya BALRA zárva ül, nem középen. */
.f-auth-kartya--balra { margin-inline: 0; }
.f-auth-kartya--kozep { max-width: 480px; text-align: center; }
/* A középre zárt kártyán belül a hosszabb szöveg és az űrlap balra zárt marad —
   középre zárt bekezdést és címkét nehéz olvasni. */
.f-auth-kartya--kozep .f-szoveg-balra,
.f-auth-kartya--kozep form,
.f-auth-kartya--kozep .f-form-group { text-align: left; }

.f-auth-link {
    margin-top: 1rem;
    text-align: center;
}

/* TOTP-beállítás: QR-kód és a kézi bevitelhez tartozó kulcs. */
.f-qr-kod {
    margin: 1rem auto;
    padding: 0.5rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-md);
}
.f-kod {
    font-family: var(--f-font-mono);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

/* Helyreállító kódok: két hasáb, monospace, egy kattintással kijelölhető sorok. */
.f-kodlista {
    columns: 2;
    font-family: var(--f-font-mono);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}
.f-kodlista li { user-select: all; }

/* A köszönő-lap admin-felhívása (csak bemutató üzemmódban látszik). A saját térközét
   maga hozza, mert a lap szövegblokkja középre zárt, és a doboz alatt gomb következik. */
.f-koszonjuk__admin {
    margin: 1.75rem 0 1.5rem;
    text-align: left;
}

.f-koszonjuk__admin .btn-f-outline {
    margin-top: 0.85rem;
}

/* A két bemutató-gomb („Ügyfélportál megtekintése” + „Teszt-admin jelszót kérek”). Egy sorban
   állnak, de keskeny kijelzőn egymás alá csúsznak. A bal oldali gomb egy POST-űrlapban van
   (antiforgery-token kell hozzá), ezért kell az űrlapnak is a flex-igazítás — enélkül a
   blokk-szintű form a mellette álló linket a következő sorba tolná. */
.f-koszonjuk__gombok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.f-koszonjuk__gombok .btn-f-outline,
.f-koszonjuk__gombok .btn-f {
    margin-top: 0;
}

.f-koszonjuk__demo {
    margin: 0;
}