/* jelentkezes.css — /jelentkezes (3 lépéses űrlap, R2 onboarding-modal stílus) + /koszonjuk (S2).
   Sötét éjtinta alap; a lime csak a jel (aktív pont, siker-pont), szöveg soha. MOTION 3.5, 3.12, 3.14. */

/* ---------- közös háttér: R2 dither-sávok, nagyon halkan ---------- */
.ap,.tk{padding-top:calc(var(--header-h) + clamp(20px,min(5vw,6svh),88px));overflow:clip}
.ap__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ap__bg i{position:absolute;width:42vw;max-width:640px;aspect-ratio:1/2.4;background:var(--c-cobalt);opacity:.16;
  -webkit-mask:var(--dither-band) 0 0/16px 16px;mask:var(--dither-band) 0 0/16px 16px;transform:rotate(38deg)}
.ap__bg i:first-child{left:-14vw;top:18%}
.ap__bg i:last-child{right:-16vw;top:44%;opacity:.12}
.ap__kicker{display:flex;align-items:center;gap:10px;color:var(--fg-2)}
.ap__kdot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--signal)}
.ap__kdot.is-on{background:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 18%,transparent)}

/* ---------- fej + elrendezés: asztalin bal oszlop = szöveg + oldalsáv, jobb = űrlap ---------- */
.ap__head{max-width:760px}
.ap__h1{margin-top:14px;font-size:min(clamp(2.1rem,1rem + 4.2vw,4.6rem),10svh);line-height:.98;letter-spacing:-.048em;font-weight:780;max-width:14ch;text-wrap:balance;hyphens:manual}
.ap__lead{margin-top:clamp(18px,2.2vw,28px);max-width:58ch;font-size:clamp(1rem,.96rem + .25vw,1.14rem);line-height:1.55;color:var(--fg-2)}
.ap__grid{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(16px,min(3.4vw,3svh),48px);align-items:start}
@media (min-width:900px) and (max-height:760px){.ap__lead{margin-top:14px;font-size:1rem;line-height:1.5}}
@media (min-width:1100px){
  .ap__grid{grid-template-columns:minmax(0,1fr) minmax(0,720px);grid-template-areas:"head form" "side form";grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,96px);row-gap:36px}
  .ap__head{grid-area:head}
  .ap__aside{grid-area:side;position:sticky;top:calc(var(--header-h-small) + 28px)}
  .af{grid-area:form}
  .ap-side__sum{pointer-events:none}
  .ap-side__pm{display:none}
}
/* oldalsáv: asztalin nyitott, mobilon összecsukva (a modul zárja) */
.ap-side{border:1px solid var(--card-line);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(6px)}
.ap-side__sum{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;list-style:none}
.ap-side__sum::-webkit-details-marker{display:none}
.ap-side__h{font-weight:720;font-size:1.06rem;letter-spacing:-.01em}
.ap-side__pm{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--card-line);flex:0 0 auto;transition:transform var(--t-state) var(--ease-huzat)}
.ap-side__pm::before,.ap-side__pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.ap-side__pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.ap-side[open] .ap-side__pm{transform:rotate(45deg)}
.ap-side__in{padding:0 22px 22px;display:grid;gap:14px}
.ap-side__ol,.ap-side__ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.95rem;line-height:1.5;color:var(--fg-2)}
.ap-side__ol li{display:grid;grid-template-columns:2.2em 1fr;gap:6px}
.ap-side__ol .mono{font-size:var(--fs-mono);color:var(--signal);padding-top:.2em}
.ap-side__h2{margin-top:10px;padding-top:16px;border-top:1px solid var(--card-line);font-size:var(--fs-mono);font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.ap-side__ul li{position:relative;padding-left:1.2em}
.ap-side__ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border:1px solid var(--fg-2)}

/* ---------- az űrlap-kártya (R2) ---------- */
.af{min-width:0}
.af-card{position:relative;border:1px solid var(--card-line);border-radius:12px;background:#0E1442;box-shadow:0 40px 120px -60px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.af-top{position:relative;display:grid;justify-items:center;gap:18px;padding:clamp(22px,3vw,34px) clamp(20px,3.6vw,44px) 22px;border-bottom:1px solid var(--card-line);
  background:radial-gradient(60% 80% at 50% 0%,rgba(47,75,255,.14),transparent 70%),
  linear-gradient(var(--c-line-dark) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--c-line-dark) 1px,transparent 1px) 0 0/24px 24px}
.af-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:repeating-linear-gradient(90deg,var(--fg-2) 0 4px,transparent 4px 8px);opacity:.25}
.af-ring{position:relative;width:160px;height:160px;color:var(--c-fog)}
.af-ring__svg,.af-ring__cv{position:absolute;inset:0;width:100%;height:100%}
.af-ring__svg{opacity:.9;transition:opacity var(--t-state)}
.af-ring__pt{fill:var(--c-lime)}
.af-ring__cv{opacity:0;transition:opacity var(--t-state);image-rendering:pixelated}
.af.is-live .af-ring__cv{opacity:1}
.af.is-live .af-ring__svg{opacity:0}
.af-prog{width:100%;display:grid;gap:8px;justify-items:center;text-align:center}
.af-prog__t{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 12px;font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.af-prog__no{color:var(--signal)}
.af-prog__name{color:var(--fg)}
.af-prog__sub{min-height:1.4em;font-size:var(--fs-small);color:var(--fg-2)}
.af-line{position:relative;width:min(260px,70%);height:12px;display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.af-line::before,.af-line__fill{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:var(--card-line)}
.af-line__fill{right:auto;width:0;background:var(--signal);transition:width var(--t-scene) var(--ease-huzat)}
.af-line i{position:relative;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--fg-2);background:#0E1442;transition:background-color var(--t-state),border-color var(--t-state),transform var(--t-state) var(--ease-kattanas)}
.af-line i.is-done{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 35%,#0E1442)}
.af-line i.is-on{border-color:var(--signal);background:var(--signal);transform:scale(1.15);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 18%,transparent)}

.af-body{position:relative;padding:clamp(22px,3.6vw,44px)}
.af-step{display:grid;gap:28px}
.af-step+.af-step{margin-top:56px;padding-top:40px;border-top:1px dashed var(--card-line)}
.af.is-ready .af-step,.js .af:not([data-module-state=error]) .af-step:not(.is-cur){display:none;margin-top:0;padding-top:0;border-top:0} /* QA: CLS 0,32 -> a JS-es oldalon már az első festéskor csak az aktuális lépés látszik */
.af.is-ready .af-step.is-cur{display:grid}
.af-step__h{font-size:clamp(1.55rem,1.2rem + 1.3vw,2.3rem);line-height:1.08;letter-spacing:-.035em;font-weight:760;text-wrap:balance}
.af-step__h:focus{outline:none}
.af-step__sub{margin-top:-18px;color:var(--fg-2);max-width:52ch}
.af-step__link{color:var(--fg-2)}

/* mezők */
.af .field label,.af-g legend{font-size:.98rem;font-weight:680;letter-spacing:-.005em;color:var(--fg)}
.af .field:focus-within > label{color:var(--fg);transform:translateY(-2px)}
.af-opt{font-weight:500;color:var(--fg-2);font-size:.9em}
.af .field__help{margin-top:-2px;line-height:1.45}
.af .input,.af .textarea{background:rgba(7,10,36,.55);border-color:var(--card-line);font-size:1rem}
.af .textarea{min-height:120px;resize:vertical;line-height:1.5}
.af .input::placeholder,.af .textarea::placeholder{color:color-mix(in srgb,var(--fg-2) 62%,transparent);opacity:1}
.af .input:focus,.af .textarea:focus{border-color:var(--c-lime);box-shadow:0 0 0 3px rgba(198,255,58,.16)}
.af [aria-invalid=true]{border-color:#FF8C82 !important}
.af .field__err,.un .field__err{color:#FF9C92;font-weight:600;line-height:1.4}
.af .field__err:empty{display:none}
.af-count{justify-self:end;margin-top:-4px;font-size:var(--fs-mono);color:var(--fg-2)}
.af-count.is-near{color:#FFD08A}
.af-soft{font-size:var(--fs-small);color:#FFD08A;line-height:1.45}

.af-g{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.af-g legend{padding:0;margin-bottom:6px;float:left;width:100%}
.af-g legend+*{clear:both}
.af-opts{display:grid;gap:8px}
@media (min-width:560px){.af-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}.af-opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}.af-opts--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:380px) and (max-width:559px){.af-opts--3,.af-opts--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.af .check{position:relative;align-items:center;gap:12px;min-height:50px;padding:12px 14px;border:1px solid var(--card-line);border-radius:8px;
  background:rgba(7,10,36,.35);font-size:.95rem;line-height:1.35;transition:border-color var(--t-hover),background-color var(--t-hover)}
@media (hover:hover){.af .check:hover{border-color:color-mix(in srgb,var(--fg-2) 60%,transparent)}}
.af .check:has(input:checked){border-color:var(--c-lime);background:rgba(198,255,58,.06)}
.af .check:has(input:focus-visible){outline:2px solid var(--c-lime);outline-offset:2px}
.af .check input{margin-top:0;border-color:var(--fg-2);background:transparent}
.af .check input:checked{border-color:var(--c-lime);background:var(--c-lime)}
.af .check input:checked::before{background:var(--c-ink)}
.af .check input:focus-visible{outline:none}
.af .check--radio input{border-radius:50%}
.af .check--radio input::before{clip-path:none;width:8px;height:8px;border-radius:50%}
.af .check--strong span{font-weight:720}
.af .check > span{display:grid;gap:2px;min-width:0}
.af-side{font-size:var(--fs-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.af-other{margin-top:6px}
.af-note,.af-b2c__box{border:1px solid var(--card-line);border-left:3px solid var(--fg-2);border-radius:0 8px 8px 0;background:rgba(244,245,250,.04);padding:14px 16px;font-size:.95rem;line-height:1.5;color:var(--fg)}
.af-b2c{margin-top:4px;display:grid;gap:12px;justify-items:start}
.af-b2c__t{font-size:.95rem;font-weight:600;cursor:pointer}
.af-b2c__t::after{content:"↓" !important}
.af-b2c__t[aria-expanded=true]::after{transform:rotate(180deg)}
.af-b2c__box{display:grid;gap:12px}
.af-b2c__box[hidden]{display:none}
.af-b2c__act{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:4px}

.af-miss{border:1px solid rgba(255,208,138,.4);background:rgba(255,208,138,.08);color:#FFE2B5;border-radius:8px;padding:12px 14px;font-weight:600;font-size:.95rem;margin-bottom:24px}
.af-miss[hidden]{display:none}
.af-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:6px}
.af-nav .btn--ghost{margin-right:auto}
.af-nav [aria-disabled=true]{opacity:.45}
@media (max-width:480px){.af-nav .btn{flex:1 1 auto}.af-nav .btn--ghost{flex:0 0 auto}}

.af-sum{border:1px dashed color-mix(in srgb,var(--fg-2) 50%,transparent);border-radius:10px;padding:18px 20px;display:grid;gap:8px;font-size:.95rem;line-height:1.5;color:var(--fg);background:rgba(7,10,36,.3)}
.af-sum__h{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.af-sum__l1{font-weight:700;overflow-wrap:anywhere}
.af-sum__k{color:var(--fg-2)}
.af-sum__links{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:4px;font-size:.9rem}
.af-sum__links button{cursor:pointer}
.af-priv,.af-calm{color:var(--fg-2);line-height:1.5;max-width:60ch}
.af-priv a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.af-fail{border-left:3px solid #FF8C82;background:rgba(255,140,130,.08);border-radius:0 8px 8px 0;padding:14px 16px;font-size:.95rem;line-height:1.5}
.af-fail[hidden]{display:none}
.af-hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* hibás mező: 2 x 4 px rezgés (MOTION 3.12) */
@keyframes af-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.af-f.is-shake{animation:af-shake 240ms var(--ease-huzat)}

/* küldés: gomb -> gyűrű -> pipa (MOTION 3.5) */
.af-send{transition:width 320ms var(--ease-huzat),padding 320ms var(--ease-huzat),background-color 320ms,box-shadow 320ms,color var(--t-hover)}
.af-send__ring{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity 200ms}
.af-send__trk{fill:none;stroke:var(--fg-2);stroke-width:2;stroke-dasharray:82 12.25;stroke-dashoffset:-6;transform:rotate(-90deg);transform-origin:24px 24px;transition:stroke 320ms}
.af-send__ok{fill:none;stroke:var(--c-fog);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 420ms var(--ease-jel) 120ms}
.af-send__pt{fill:var(--c-fog);transform-origin:24px 24px}
.af-send.is-morph{width:56px !important;padding:0;background:transparent;box-shadow:inset 0 0 0 1px var(--card-line);pointer-events:none}
.af-send.is-morph .btn__label,.af-send.is-morph .btn__dot,.af-send.is-morph .btn__clip{opacity:0}
.af-send.is-morph .af-send__ring{opacity:1}
.af-send.is-morph:not(.is-done) .af-send__pt{animation:af-orbit 900ms linear infinite}
@keyframes af-orbit{to{transform:rotate(360deg)}}
.af-send.is-done .af-send__trk{stroke:var(--c-fog)}
.af-send.is-done .af-send__ok{stroke-dashoffset:0}
.af-send.is-done .af-send__pt{fill:var(--c-lime);animation:af-pop 520ms var(--ease-kattanas) both}
@keyframes af-pop{0%{transform:scale(.4)}60%{transform:scale(1.6)}100%{transform:scale(1.25)}}
.af-send .btn__label,.af-send .btn__dot{transition:opacity 160ms}
.af-send.is-text{pointer-events:none;opacity:.8}

/* ---------- GYIK az űrlap alatt ---------- */
.ap-faq{padding-top:clamp(48px,6vw,96px)}
.ap-faq__in > *{max-width:980px}
.ap-faq__lbl{margin-bottom:18px}

/* ---------- köszönő oldal ---------- */
.tk{padding-bottom:clamp(64px,8vw,128px)}
.tk__in{display:grid;gap:clamp(28px,4vw,56px);align-items:end}
@media (min-width:1024px){.tk__in{grid-template-columns:minmax(0,1.35fr) minmax(300px,420px)}}
.tk__head{margin-top:clamp(28px,4vw,56px)}
.tk__h1{margin-top:14px;font-size:clamp(2.1rem,.9rem + 4.8vw,5.6rem);line-height:.98;letter-spacing:-.048em;font-weight:780;max-width:16ch;text-wrap:balance;hyphens:manual}
.tk__lead{margin-top:clamp(18px,2.4vw,28px);color:var(--fg-2)}
.tk__side{display:grid;gap:16px}
.tk-card{position:relative;border:1px solid var(--card-line);border-radius:12px;background:#0E1442;padding:20px;display:grid;gap:16px;box-shadow:0 30px 80px -50px rgba(0,0,0,.8)}
.tk-card__top{display:flex;justify-content:space-between;align-items:center;color:var(--fg-2);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.06em}
.tk-card__cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tk-card__cal i{aspect-ratio:1.25;border:1px solid var(--card-line);border-radius:4px}
.tk-card__slot{position:relative;border-style:dashed !important;border-color:color-mix(in srgb,var(--fg-2) 70%,transparent) !important;overflow:hidden}
.tk-card__slot b{position:absolute;inset:0;background:var(--c-lime);opacity:0;transform:scaleY(0);transform-origin:50% 100%}
.tk-card.is-lit .tk-card__slot b{opacity:.9;transform:none;transition:opacity 1600ms var(--ease-jel),transform 1600ms var(--ease-jel)}
.tk-card__bar{height:6px;border-radius:3px;background:var(--card-line);overflow:hidden}
.tk-card__bar span{display:block;height:100%;width:34%;background:color-mix(in srgb,var(--fg-2) 50%,transparent);border-radius:inherit}
.tk-sum[hidden]{display:none}

.tk-next__grid{display:grid;gap:clamp(40px,6vw,96px)}
@media (min-width:1024px){.tk-next__grid{grid-template-columns:1.1fr 1fr}}
.tk-h2{font-size:clamp(1.9rem,1.1rem + 2.8vw,3.6rem);line-height:1;letter-spacing:-.045em;font-weight:760;text-wrap:balance}
.tk-h2--sm{font-size:clamp(1.35rem,1.1rem + 1vw,2rem);line-height:1.12;letter-spacing:-.03em;margin-top:12px}
.tk-steps{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid}
.tk-steps li{display:grid;grid-template-columns:3.2em 1fr;gap:8px;padding:20px 0;border-top:1px solid var(--line);line-height:1.6;max-width:62ch}
.tk-steps li:last-child{border-bottom:1px solid var(--line)}
.tk-steps__n{color:var(--c-cobalt);font-size:var(--fs-mono);padding-top:.3em}
.tk-steps strong{font-weight:760}
.tk-q__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.tk-q__list li{position:relative;padding:16px 18px 16px 44px;background:var(--card);border:1px solid var(--card-line);border-radius:8px;line-height:1.5}
.tk-q__list li::before{content:"?";position:absolute;left:16px;top:15px;font-family:var(--f-mono);font-weight:500;color:var(--c-cobalt)}
.tk-q__list em{display:block;margin-top:6px;font-style:normal;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-cobalt)}
.tk-q__after{margin-top:18px;color:var(--fg-2);max-width:52ch}
.tk-links{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.tk-foot{margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:1px solid var(--line);color:var(--fg-2)}

/* ---------- mobil ---------- */
@media (max-width:640px){
  .af-ring{width:96px;height:96px}
  .af-top{gap:12px;padding-top:18px}
  .af-body{padding:20px 16px 24px}
  .af-card{border-radius:10px;margin-inline:calc(var(--gutter) * -.5)}
  .af-step{gap:24px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .af-f.is-shake{animation:none}
  .af-line__fill,.af-line i,.af-send,.af-send__ok,.tk-card.is-lit .tk-card__slot b{transition:none !important}
  .af-send.is-morph:not(.is-done) .af-send__pt,.af-send.is-done .af-send__pt{animation:none}
}
html.motion-off .af-f.is-shake{animation:none}