/* =========================================================================================
   BELÉPŐ-KÉPERNYŐK , V10 ARCULAT, VILÁGOS                              (2026-10-05)

   MI EZ. A `auth.css` MEGJELENÉSÉT írja át a honlap V10 arculatára. Rátét, nem csere: az
   `auth.css` minden működés-közeli része (belépés-jelző, induló-kép, elakadt állapot,
   telefon-szabályok, mozgás-csökkentés) érintetlenül a helyén marad, és ez a fájl utána
   töltődik be.

   MIÉRT RÁTÉT, ÉS MIÉRT NEM ÍRTAM ÁT A JELÖLÉST. A `core/main.js` HUSZONEGY azonosítóra
   épül ezen a képernyőn (`loginForm`, `mfaForm`, `mfaOtp`, `passkeyBtn`, `setPwForm`,
   `resetReqForm`, `authTitle`, `authSubtitle` és a többi), plusz négy összetett választóra.
   A belépő a rendszer egyetlen kapuja: ha a jelölés elmozdul, nem „csúnya” lesz, hanem nem
   lehet belépni. A V10 kinézet viszont kijön CSS-ből is, mert a meglévő jelölés már
   középre zárt kártyát ír le. Így a JS-hez egy ujjal sem kellett nyúlni.

   HONNAN JÖTT. A `honlap/V09/V10-koncept/46-belepes.html`, PO-jóváhagyással („a bejelentkezés
   jó lesz így”), és a PO döntése, hogy CSAK VILÁGOS kell, váltó nélkül.

   A TINTA-ÉRTÉKEK NEM ÚJAK. A `.munka/belepes-vilagos-talon/` 2026-09-29-i, MÉRT világos
   témájából valók; a szerkezet viszont a V10 konceptté, nem a talon vonalhálós változatáé.

   AMI KIKERÜLT, ÉS AMIÉRT
     1. A VONALHÁLÓ-HÁTTÉR és a fény-foltok. A V10 belépőn a kártya az egyetlen dolog, amit
        nézni kell. A rétegek a jelölésben maradnak (a `core/auth-hatter.js` tovább fut és
        nem dob hibát), csak nem látszanak.
     2. A `backdrop-filter: blur(22px)`. Az üveg-doboz a mozgó háttér miatt kellett; tömör
        fehér kártyán nincs mit homályosítani. Ez egyben a lap legdrágább eleme volt
        Safariban, tehát a kivétele nem csak dísz-kérdés.

   A KONTRASZT ÚJRA SZÁMOLVA, mert a felület megváltozott. A kártya most TÖMÖR fehér, tehát
   nincs „legrosszabb eset” a háttér mozgásából: a mért érték egyben a szavatolt érték.
     cím #0d1b33 fehéren        17,1:1
     szöveg #2c3440 fehéren     12,6:1
     halvány #5a6a85 fehéren     5,4:1
     link és gomb #0b5cd5        6,0:1 (fehér szöveggel a gombon ugyanennyi)
   Küszöb: apró szöveg 4,5 , nagy cím 3,0. Mind fölötte.
   ========================================================================================= */

/* ══ 1. A TOKENEK ════════════════════════════════════════════════════════════════════════
   Csak az értékek cserélődnek, egyetlen komponens-szabály sem duplikálódik. A kék MINDENHOL
   a honlap márkakékje (#0b5cd5), nem a régi #0b63d6: a belépő a honlap folytatása, és két,
   egymáshoz közeli kék egymás után észrevehetően pontatlan. */
.app-auth-view {
  --auth-alap: #eef1f6;
  --auth-panel-bg: #ffffff;
  --auth-panel-keret: rgba(13, 27, 51, 0.07);
  --auth-panel-arnyek: 0 24px 70px rgba(13, 27, 51, 0.12);

  --auth-text-strong: #0d1b33;
  --auth-text: #2c3440;
  --auth-text-faint: #5a6a85;

  --auth-input-bg: #ffffff;
  --auth-line: rgba(13, 27, 51, 0.16);
  --auth-line-tele: rgba(13, 27, 51, 0.3);
  --auth-focus-line: #0b5cd5;
  --auth-input-ink: #0d1b33;
  --auth-placeholder: #7b879b;
  --auth-autofill-bg: #ffffff;

  --auth-ink: #0b5cd5;
  --auth-ink-hover: #0a51bb;
  --auth-ink-tinta: #ffffff;
  --auth-ghost-bg: #f3f5f9;
  --auth-ghost-keret: rgba(13, 27, 51, 0.13);
  --auth-link: #0b5cd5;
  --auth-vonal: rgba(13, 27, 51, 0.1);
  --auth-focus: rgba(11, 92, 213, 0.22);

  --auth-danger: #b42318;
  --auth-danger-soft: #fdeeee;
  --auth-danger-keret: #f3c9c9;
  --auth-siker: #0f6b46;
  --auth-siker-soft: #eaf7f1;
  --auth-siker-keret: #bfe3d3;

  --auth-radius-input: 12px;
  --auth-radius-card: 28px;

  /* AZ IKONOS LOGÓ. A négyzetes jel a szójellel: 8133 × 2743, tehát 2,965:1 , a
     `.login-logo-mark` 116 × 39-es doboza (2,97:1) pont ezt az arányt viszi, nem kell
     hozzá méretet állítani. */
  --auth-logo: url('../img/bespo-uniq-logo-negyzet-kek.svg');
}

/* ══ 2. A HÁTTÉR ════════════════════════════════════════════════════════════════════════
   Sima felület, dísz nélkül. A rétegek a jelölésben MARADNAK, csak nem látszanak: a
   `core/auth-hatter.js` tovább cserélgeti rajtuk az `.aktiv` osztályt, és nem kell
   hozzányúlni ahhoz, hogy ne dobjon hibát. */
.app-auth-view {
  background: var(--auth-alap);
}
.app-auth-view .auth-hatter {
  display: none;
}

/* ══ 3. A KÁRTYA ════════════════════════════════════════════════════════════════════════
   Tömör fehér, üveg nélkül. A `backdrop-filter` és a belső fény-vonal kikerül: azok a mozgó
   háttér előtt adtak plasztikát, ami itt nincs. */
.app-auth-view .login-panel {
  max-width: 440px;
  padding: 44px 44px 36px;
  background: var(--auth-panel-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--auth-panel-keret);
  box-shadow: var(--auth-panel-arnyek);
}
/* A REGISZTRÁCIÓ SZÉLESEBB KÁRTYÁN FÉR EL EGY KÉPERNYŐN: ott hat mező van, nem kettő. */
.app-auth-view .reg-panel {
  max-width: 580px;
}

/* ══ 4. A FEJ ═══════════════════════════════════════════════════════════════════════════
   A logó, a cím és az alcím középen , a jelölés eleve így áll, itt csak a méretek és a
   térközök igazodnak a V10-hez. */
.app-auth-view .login-brand {
  margin: 0 auto 26px;
}
.app-auth-view .login-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.app-auth-view .reg-panel .login-title {
  font-size: 26px;
}
.app-auth-view .login-subtitle,
.app-auth-view .reg-subtitle {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--auth-text-faint);
}
.app-auth-view .login-subtitle strong {
  font-weight: 500;
  color: var(--auth-text-strong);
}

/* ══ 5. MEZŐK ÉS GOMBOK ═════════════════════════════════════════════════════════════════
   Az 50 képpontos magasság a honlap gombjaival egyezik: a két felület között a felhasználó
   ugyanazt a méret-rendet látja. */
.app-auth-view .login-form input[type='email'],
.app-auth-view .login-form input[type='password'],
.app-auth-view .login-form input[type='text'],
.app-auth-view .login-form input[type='tel'] {
  height: 50px;
  border-width: 1.5px;
  font-size: 15.5px;
}
.app-auth-view .login-btn,
.app-auth-view .login-btn-kulcs {
  height: 50px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
}
.app-auth-view .login-btn {
  background: var(--auth-ink);
  color: var(--auth-ink-tinta);
}
.app-auth-view .login-btn:hover:not(:disabled) {
  background: var(--auth-ink-hover);
}
/* A KULCSOS GOMB MÁSODLAGOS MARAD. A jelölése `login-btn login-btn-kulcs`, tehát a fenti
   `.login-btn` szabály ráfestette a kék felületet is: két egyforma kék gomb állt egymás
   alatt, és akkor egyik sem mondja meg, melyik a fő út. Itt kapja vissza a halk felületet,
   nagyobb fajsúlyon. */
.app-auth-view .login-btn.login-btn-kulcs {
  background: var(--auth-ghost-bg);
  border: 1.5px solid var(--auth-ghost-keret);
  color: var(--auth-text-strong);
}
.app-auth-view .login-btn.login-btn-kulcs:hover:not(:disabled) {
  background: #eceff5;
  border-color: var(--auth-ink);
  color: var(--auth-ink);
}

/* A HAT KÓD-DOBOZ. Ugyanaz a méret-rend, mint a koncepten: 58 magas, 12-es lekerekítés, és
   a kitöltött doboz halkan kékkel jelzi magát, hogy végigfutva látszódjon, hol tart. */
.app-auth-view .login-otp input {
  height: 58px;
  border-radius: 12px;
  background: var(--auth-ghost-bg);
  font-size: 22px;
  font-weight: 600;
}
/* A KITÖLTÖTT dobozt a JS jelöli `is-tele` osztállyal, és a régi CSS már számol vele. Itt
   csak a SZÍNE lesz a V10 kékje. A `:not(:placeholder-shown)` ide NEM jó: ezeknek a
   mezőknek nincs `placeholder` attribútumuk, tehát az a feltétel üresen is igaz, és minden
   doboz kék keretet kapott volna. */
.app-auth-view .login-otp input.is-tele {
  border-color: var(--auth-ink);
  background: rgba(11, 92, 213, 0.07);
}

/* A PAJZS a kétfaktoros nézet fölött: lágy kék korong, a koncept szerint. */
.app-auth-view .login-shield {
  background: rgba(11, 92, 213, 0.1);
  color: var(--auth-ink);
  border: 0;
}

/* ══ 6. TELEFON ═════════════════════════════════════════════════════════════════════════
   Az `auth.css` telefon-szabálya az üveg-doboz miatt tette a kártyát majdnem tömörre; itt
   már tömör, tehát csak a térközök szűkülnek. */
@media (max-width: 560px) {
  .app-auth-view .login-panel {
    padding: 30px 22px 26px;
    border-radius: 22px;
  }
  .app-auth-view .login-title {
    font-size: 24px;
  }
}

/* ══ 7. A MÁRKA-PANEL az „Érdekel a rendszer” mellett ════════════════════════════════════
   CSAK ITT van két hasáb. A bejelentkezés teljes képernyős marad: oda már ügyfél érkezik,
   és neki a mezők kellenek, nem az érvek.

   A `.login-left` eddig `display: contents` volt, tehát a kártya közvetlenül a `.reg-split`
   flexébe került. Rácsban ez nem elég: kell egy valódi doboz, ami a bal cellát kitölti és
   a kártyát középre teszi benne. Ezért kap itt `display: flex`-et. */
@media (min-width: 1000px) {
  .app-auth-view.reg-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: stretch;
    padding: 0;
    /* A KÉK TOLDÁS MIATT KELL (lásd lentebb): enélkül a jobbra kilógó sáv
       vízszintes görgetést csinálna. */
    overflow: hidden;
  }
  .app-auth-view.reg-split .login-left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
  }
  /* A KÁRTYA A LÁTHATÓ FEHÉR SÁV KÖZEPÉN. A rács a cellája közepére teszi, és ez nagyítás
     nélkül helyes is. Nagyítás alatt viszont a rács BELSŐ koordinátái és a képernyőn látható
     helyek elválnak: a PO Safarijában a nézet 1920 széles, a kék panel doboza mégis 970-nél
     kezdődik, és a kártya közepe 190 képponttal jobbra esett a fehér sáv közepétől.
     Az eltolást a `core/auth-v10-marka.js` méri ki; a `0px` az alapérték, tehát nagyítás
     nélkül és JS nélkül is a helyén marad. */
  .app-auth-view.reg-split .login-panel {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: var(--reg-kartya-eltol, 0px);
  }
}

.reg-marka {
  display: none;
}
@media (min-width: 1000px) {
  .reg-marka {
    --reg-parna: clamp(40px, 4vw, 64px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--reg-parna);
    /* FÜGGŐLEGES GRADIENS, nem átlós. Nem esztétikai döntés: az alábbi toldás
       `background: inherit`-tel folytatja, és egy átlós gradiens a toldás saját
       dobozán MÁS szögben futna, tehát látszana az illesztés. Függőlegesnél a
       két doboz magassága azonos, így a folytatás tökéletes. */
    background: linear-gradient(180deg, #0b5cd5, #0847a8);
    color: #fff;
  }
  /* A JOBB SZÉLIG ÉRŐ KÉK (PO, 2026-10-05, Safariból).
     MIÉRT NEM ELÉG A RÁCS. A `dashboard.css` nagy képernyőn `zoom`-ot tesz a `body`-ra, a
     belépő pedig visszaszoroz (`zoom: 0.833`). Safariban ez a `position: fixed` nézetet
     meg is KESKENYÍTI: a jobb oldalon világos sáv marad a kék mellett. Chromiumban
     ugyanez nem reprodukálható, tehát méréssel nem lehetett volna megfogni, csak a PO
     képernyőjéről.
     A toldás egy pszeudo-elem, ami a panel jobb szélétől indul és 60vw-t fed, ugyanazzal a
     háttérrel. Ahol nincs hiány (Chromium), ott egyszerűen kilóg és a szülő levágja. */
  .reg-marka::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 60vw;
    background: inherit;
    pointer-events: none;
  }
}
/* A LOGÓ a bal felső sarokban, a kártya logójával EGY MAGASSÁGBAN. A magasságot a
   `core/auth-v10-marka.js` méri ki és írja a `--reg-logo-fent` változóba; a 64 képpont csak
   addig érvényes, amíg az első mérés le nem fut. Abszolút pozíció kell hozzá, különben a
   logó részt venne a panel függőleges elrendezésében, és azt tolná szét. */
.reg-marka-logo {
  position: absolute;
  top: var(--reg-logo-fent, 64px);
  left: var(--reg-parna);
  height: 34px;
  opacity: 0.92;
}
.reg-marka-szemold {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.reg-marka-cim {
  margin: 0 0 18px;
  max-width: 16ch;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.reg-marka-lead {
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.reg-marka-tenyek {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reg-marka-tenyek li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 15px;
  line-height: 1.45;
}
/* Ugyanaz a teli pipa-korong, mint a honlapon: a kört a `color` festi, a pipát a `stroke`. */
.reg-marka-tenyek svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #fff;
}
.reg-marka-tenyek svg circle {
  fill: currentColor;
  stroke: none;
}
.reg-marka-tenyek svg path {
  fill: none;
  stroke: #0b5cd5;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reg-marka-alj {
  position: absolute;
  left: var(--reg-parna);
  bottom: var(--reg-parna);
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}