/* ======================================================================
   MasterKeys - Bejelentkezes / Regisztracio stilus
   Helye: child-theme/assets/css/mk-auth.css
   Font a temabol orokol. Minden a .mk-auth ala scope-olva.

   Szelesseg: a --mk-auth-w valtozoval allitod (jelenleg 1220px).
   A .mk-auth full-bleed technikaval kitor a BeTheme szekcio-wrapperbol,
   igy a kartya tenylegesen a megadott szelesseget veszi fel.
   ====================================================================== */

.mk-auth{
  --mk-auth-w:1220px;        /* <<< ITT ALLITSD A SZELESSEGET */

  --mk-brand:#ff1100;
  --mk-brand-d:#d60e00;
  --mk-soft:rgba(255,17,0,.07);
  --mk-green:#00B359;
  --mk-ink:#0f172a;
  --mk-ink-2:#334155;
  --mk-muted:#64748b;
  --mk-line:#e6eaf0;
  --mk-bg:#ffffff;
  --mk-tint:#f7f8fa;

  /* Full-bleed: kitor a szulo wrapperbol */
  position:relative;
  width:100vw;
  max-width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0 50px;
}
.mk-auth *{ box-sizing:border-box; }
.mk-auth [hidden]{ display:none !important; }

/* Csak a vizszintes gorgetest fogjuk vissza; a header/wrapperek nem valtoznak */
body.mk-auth-host{ overflow-x:hidden; }

/* Semmilyen gyari kek link */
.mk-auth a,
.mk-auth a:visited{ color:var(--mk-brand); text-decoration:none; }
.mk-auth a:hover{ color:var(--mk-brand-d); text-decoration:none; }

/* ======================================================================
   Kartya
   ====================================================================== */
.mk-auth-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  width:100%;
  max-width:var(--mk-auth-w);
  background:var(--mk-bg);
  border:1px solid var(--mk-line);
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(15,23,42,.28), 0 2px 8px -4px rgba(15,23,42,.08);
}

/* ======================================================================
   Bal oldal: brand panel
   Keret: alul a trust sor fixen. A tartalom felul, alatta rugalmas ures ter.
   ====================================================================== */
.mk-auth-aside{
  position:relative;
  background:linear-gradient(155deg,#12182a 0%,#0d1220 55%,#1a0f12 100%);
  color:#fff;
  padding:44px 40px;
  display:flex;
  overflow:hidden;
  min-height:600px;
}
.mk-auth-aside-glow{
  position:absolute;
  width:420px; height:420px;
  right:-160px; top:-140px;
  background:radial-gradient(circle, rgba(255,17,0,.30) 0%, rgba(255,17,0,0) 68%);
  pointer-events:none;
}
.mk-auth-aside-glow::after{
  content:"";
  position:absolute;
  width:300px; height:300px;
  left:-120px; bottom:-260px;
  background:radial-gradient(circle, rgba(255,17,0,.16) 0%, rgba(255,17,0,0) 70%);
}
.mk-auth-aside-in{
  position:relative;
  display:flex; flex-direction:column;
  width:100%;
  height:100%;
}

.mk-auth-aside-title{
  margin:0 0 10px;
  font-size:29px; line-height:1.18; font-weight:800;
  color:#fff;
  letter-spacing:-.01em;
}
.mk-auth-aside-lead{
  margin:0 0 30px;
  font-size:14.5px; line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:34ch;
}

/* A pontok utan jon a rugalmas ures ter */
.mk-auth-points{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.mk-auth-points li{
  display:flex; align-items:center; gap:12px;
  font-size:14px; color:rgba(255,255,255,.90);
}
.mk-auth-point-ico{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,17,0,.14);
  border:1px solid rgba(255,17,0,.28);
  color:#ff5b4d;
}

/* Trust: fix alul, a kozte levo ter automatikusan tagul */
.mk-auth-trust{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; color:rgba(255,255,255,.55);
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.09);
  flex:0 0 auto;
}
.mk-auth-trust-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--mk-green);
  box-shadow:0 0 0 3px rgba(0,179,89,.20);
  flex:0 0 auto;
}

/* ======================================================================
   Jobb oldal: form
   ====================================================================== */
.mk-auth-main{
  background:var(--mk-bg);
  padding:44px 46px;
  display:flex; align-items:center;
}
.mk-auth-main-in{ width:100%; max-width:520px; margin:0 auto; }

.mk-auth-head{ margin-bottom:26px; }
.mk-auth-title{
  margin:0 0 6px;
  font-size:27px; font-weight:800; color:var(--mk-ink);
  letter-spacing:-.01em; line-height:1.2;
}
.mk-auth-sub{ margin:0; font-size:14px; color:var(--mk-muted); }

/* ---- Hibauzenet ---- */
.mk-auth-alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; margin-bottom:20px;
  border-radius:12px;
  background:var(--mk-soft);
  border:1px solid rgba(255,17,0,.22);
  color:var(--mk-ink);
  font-size:13.5px; line-height:1.45;
}
.mk-auth-alert-ico{ flex:0 0 auto; color:var(--mk-brand); display:flex; padding-top:1px; }

/* ---- Form ---- */
.mk-auth-form{ display:flex; flex-direction:column; gap:17px; }

.mk-auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.mk-auth-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }

.mk-auth-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }

.mk-auth-field label{
  font-size:13px; font-weight:600; color:var(--mk-ink-2);
  letter-spacing:.005em;
}

.mk-auth-link-sm{ font-size:12.5px; font-weight:600; }

.mk-auth-input{
  display:flex; align-items:center; gap:10px;
  background:var(--mk-tint);
  border:1.5px solid transparent;
  border-radius:12px;
  padding:0 12px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mk-auth-input:focus-within{
  background:#fff;
  border-color:var(--mk-brand);
  box-shadow:0 0 0 3px var(--mk-soft);
}
.mk-auth-input-ico{ flex:0 0 auto; color:var(--mk-muted); display:flex; }
.mk-auth-input:focus-within .mk-auth-input-ico{ color:var(--mk-brand); }

/* BeTheme input reset */
.mk-auth-input input[type="text"],
.mk-auth-input input[type="email"],
.mk-auth-input input[type="password"]{
  flex:1 1 auto; min-width:0;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:14px 0 !important;
  height:auto !important; min-height:0 !important;
  font-size:15px !important;
  line-height:1.3;
  color:var(--mk-ink) !important;
}
.mk-auth-input input::placeholder{ color:#9aa4b2; opacity:1; }

.mk-auth-eye{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--mk-muted);
  background:transparent !important; border:0 !important;
  box-shadow:none !important; outline:0 !important; padding:0 !important;
  -webkit-appearance:none; appearance:none;
  transition:background .12s ease, color .12s ease;
}
.mk-auth-eye:hover{ background:rgba(15,23,42,.05) !important; color:var(--mk-ink) !important; }

.mk-auth-hint{ font-size:12px; color:var(--mk-muted); }

/* ---- Jelszo erosseg ---- */
.mk-auth-meter{
  height:4px; border-radius:999px;
  background:var(--mk-line);
  overflow:hidden;
  margin-top:2px;
}
.mk-auth-meter span{
  display:block; height:100%; width:0;
  border-radius:999px;
  transition:width .25s ease, background .25s ease;
}
.mk-auth-meter[data-level="1"] span{ width:25%;  background:#ef4444; }
.mk-auth-meter[data-level="2"] span{ width:50%;  background:#f59e0b; }
.mk-auth-meter[data-level="3"] span{ width:75%;  background:#84cc16; }
.mk-auth-meter[data-level="4"] span{ width:100%; background:var(--mk-green); }

/* ---- Checkbox ---- */
.mk-auth-checks{ display:flex; flex-direction:column; gap:11px; }

.mk-auth-check{
  display:flex; align-items:flex-start; gap:11px;
  cursor:pointer; user-select:none;
  font-size:13.5px; color:var(--mk-ink-2); line-height:1.45;
  position:relative;
}
.mk-auth-check input{
  position:absolute; opacity:0; width:0; height:0; margin:0;
}
.mk-auth-check-box{
  flex:0 0 auto;
  width:20px; height:20px; border-radius:6px;
  border:1.5px solid var(--mk-line);
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  transition:background .13s ease, border-color .13s ease;
  margin-top:1px;
}
.mk-auth-check-box svg{ opacity:0; transform:scale(.6); transition:opacity .13s ease, transform .13s ease; }
.mk-auth-check input:checked + .mk-auth-check-box{ background:var(--mk-brand); border-color:var(--mk-brand); }
.mk-auth-check input:checked + .mk-auth-check-box svg{ opacity:1; transform:scale(1); }
.mk-auth-check input:focus-visible + .mk-auth-check-box{ box-shadow:0 0 0 3px var(--mk-soft); }
.mk-auth-check-txt a{ font-weight:600; }

/* ---- Gombok ---- */
.mk-auth-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:15px 20px !important;
  border-radius:12px !important;
  font-size:15px; font-weight:700;
  cursor:pointer;
  border:0 !important; box-shadow:none !important;
  text-transform:none !important; letter-spacing:normal !important;
  height:auto !important; line-height:1.2 !important;
  -webkit-appearance:none; appearance:none;
  transition:background .14s ease, transform .06s ease;
  margin-top:4px;
}
.mk-auth-btn-primary,
.mk-auth-btn-primary:visited{ background:var(--mk-brand) !important; color:#fff !important; }
.mk-auth-btn-primary:hover{ background:var(--mk-brand-d) !important; color:#fff !important; }
.mk-auth-btn-primary:active{ transform:translateY(1px); }

/* ---- Elvalaszto ---- */
.mk-auth-sep{
  display:flex; align-items:center; gap:14px;
  margin:26px 0 20px;
  color:var(--mk-muted); font-size:12.5px;
}
.mk-auth-sep::before,
.mk-auth-sep::after{
  content:""; flex:1 1 auto; height:1px; background:var(--mk-line);
}

.mk-auth-foot{ margin:0; text-align:center; font-size:14px; color:var(--mk-muted); }
.mk-auth-link{ font-weight:700; }

/* ======================================================================
   Reszponziv - folyamatos skalazas clamp()-pel, nincs ugralas
   ====================================================================== */

/* Belso terek es meretek a viewporttal aranyosan valtoznak */
.mk-auth-aside{
  padding:clamp(26px, 3.2vw, 44px) clamp(20px, 3vw, 40px);
}
.mk-auth-main{
  padding:clamp(26px, 3.2vw, 44px) clamp(20px, 3.4vw, 46px);
}
.mk-auth-aside-title{
  font-size:clamp(21px, 1.9vw, 29px);
}
.mk-auth-title{
  font-size:clamp(22px, 1.75vw, 27px);
}
.mk-auth-aside-lead{
  font-size:clamp(13.5px, 1.05vw, 14.5px);
}
.mk-auth-points{ gap:clamp(11px, .95vw, 14px); }
.mk-auth-points li{ font-size:clamp(13px, 1vw, 14px); }
.mk-auth-point-ico{
  width:clamp(30px, 2.3vw, 34px);
  height:clamp(30px, 2.3vw, 34px);
}
.mk-auth-trust{ padding-top:clamp(18px, 1.7vw, 24px); }

/* Az oszlopok addig maradnak egymas mellett, amig elfernek.
   A valtas magatol tortenik, nem toresponthoz kotve. */
.mk-auth-card{
  grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* Egy oszlopban a bal panel ne legyen tulzottan magas */
.mk-auth-aside{ min-height:0; }
@media (min-width:900px){
  .mk-auth-aside{ min-height:600px; }
}

/* Nevmezok: akkor tornek, ha tenyleg kell */
.mk-auth-row{
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

/* iOS zoom ellen csak nagyon kicsin */
@media (max-width:520px){
  .mk-auth-input input{ font-size:16px !important; }
}

@media (prefers-reduced-motion:reduce){
  .mk-auth *{ transition:none !important; }
  .mk-auth-biz{ animation:none; }
}

/* ======================================================================
   UJ ELEMEK: kotelezo jeloles, ceges blokk, Turnstile, ertesitesek
   ====================================================================== */

/* Kotelezo csillag */
.mk-auth-req{ color:var(--mk-brand); font-weight:700; margin-left:1px; }

/* Sikeres / informacios ertesites (nem hiba) */
.mk-auth-note{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; margin-bottom:20px;
  border-radius:12px;
  background:rgba(0,179,89,.07);
  border:1px solid rgba(0,179,89,.28);
  color:var(--mk-ink);
  font-size:13.5px; line-height:1.45;
}
.mk-auth-note-ico{ flex:0 0 auto; color:var(--mk-green); display:flex; padding-top:1px; }

/* Inline "kuldd ujra" gomb a hibauzenetben */
.mk-auth-inline-form{ display:inline; margin:0; }
.mk-auth-linkbtn{
  display:inline; padding:0 !important; margin:0 !important;
  background:transparent !important; border:0 !important;
  box-shadow:none !important; outline:0 !important;
  color:var(--mk-brand) !important;
  font-size:inherit; font-weight:700;
  text-decoration:underline !important;
  cursor:pointer;
  height:auto !important; line-height:inherit !important;
  text-transform:none !important; letter-spacing:normal !important;
  -webkit-appearance:none; appearance:none;
}
.mk-auth-linkbtn:hover{ color:var(--mk-brand-d) !important; }

/* Ceges blokk */
.mk-auth-check-biz{
  padding:13px 14px;
  border:1.5px solid var(--mk-line);
  border-radius:12px;
  background:var(--mk-tint);
  transition:border-color .13s ease, background .13s ease;
}
.mk-auth-check-biz:hover{ border-color:#cbd5e1; }
.mk-auth-check-biz:has(input:checked){
  border-color:var(--mk-brand);
  background:var(--mk-soft);
}
.mk-auth-check-biz .mk-auth-check-txt{ font-weight:600; color:var(--mk-ink); }

.mk-auth-biz{
  display:flex; flex-direction:column; gap:17px;
  padding:16px 14px 4px;
  border-left:2px solid var(--mk-brand);
  margin-left:9px;
  animation:mkAuthSlide .18s ease;
}
.mk-auth-biz[hidden]{ display:none !important; }
@keyframes mkAuthSlide{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Cloudflare Turnstile */
.mk-auth-turnstile{
  margin:2px 0;
  min-height:65px;
  display:flex;
  justify-content:flex-start;
}
.mk-auth-turnstile iframe{ max-width:100% !important; }

@media (prefers-reduced-motion:reduce){
  .mk-auth-biz{ animation:none; }
}