/* components.css — gombok, linkek, kártyák, cédulák, címkék, harmonika, táblázat, űrlap-alapok */

/* ---------- gombok (MOTION 3.5) ---------- */
.btn{--btn-h:56px;--btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-fill:var(--c-ink);--btn-fill-fg:var(--c-fog);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:var(--btn-h);padding:0 26px 0 28px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;isolation:isolate;overflow:hidden;
  transition:color var(--t-hover) var(--ease-jel),transform var(--t-micro) var(--ease-jel);will-change:auto;-webkit-tap-highlight-color:transparent}
.btn__label{position:relative;z-index:1;display:inline-block}
.btn__dot{position:relative;z-index:1;width:7px;height:7px;border-radius:4px;background:currentColor;transition:width var(--t-hover) var(--ease-jel),transform var(--t-hover) var(--ease-jel)}
/* nyílhegy: a doboz felső éle (top:50%) a vonal függőleges közepén, a csúcs (jobb felső sarok, transform-origin) a vonal végén; translateY itt TILOS, mert a forgatás csúcsát a közép fölé tolja */
.btn__dot::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) scale(0);transform-origin:100% 0;transition:transform var(--t-hover) var(--ease-jel)}
.btn::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--d,240%);aspect-ratio:1;border-radius:50%;background:var(--btn-fill);transform:translate(-50%,-50%) scale(0);transition:transform 420ms var(--ease-jel);z-index:0}
@media (hover:hover){.btn:hover::before,.btn:focus-visible::before{transform:translate(-50%,-50%) scale(1)}}
@media (hover:hover){.btn:hover,.btn:focus-visible{color:var(--btn-fill-fg)}}
@media (hover:hover){.btn:hover .btn__dot,.btn:focus-visible .btn__dot{width:16px;height:2px;transform:translateX(4px)}}
@media (hover:hover){.btn:hover .btn__dot::after,.btn:focus-visible .btn__dot::after{transform:rotate(45deg) scale(1)}}
.btn:active{transform:scale(.97)}
/* Fókusz = a márka nyitott gyűrűje: keret 3 px távolságban, 40°-os réssel, a résben lime pont */
.btn:focus-visible{outline:none}
.btn::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--focus,var(--c-lime));
  -webkit-mask:conic-gradient(from 28deg,transparent 0 22deg,#000 22deg);mask:conic-gradient(from 28deg,transparent 0 22deg,#000 22deg);opacity:0;transition:opacity var(--t-micro)}
.btn{overflow:visible}
.btn__clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0}
.btn__clip::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--d,240%);aspect-ratio:1;border-radius:50%;background:var(--btn-fill);transform:translate(-50%,-50%) scale(0);transition:transform 420ms var(--ease-jel)}
.btn:has(.btn__clip)::before{display:none}
@media (hover:hover){.btn:hover .btn__clip::before,.btn:focus-visible .btn__clip::before{transform:translate(-50%,-50%) scale(1)}}
.btn:focus-visible::after{opacity:1}
.btn__ring-dot{position:absolute;right:calc(var(--btn-h)*.18);top:-9px;width:7px;height:7px;border-radius:50%;background:var(--c-lime);opacity:0;transition:opacity var(--t-micro);pointer-events:none}
.btn:focus-visible .btn__ring-dot{opacity:1}
[data-surface=fog] .btn,[data-surface=fog-2] .btn{--btn-fill:var(--c-ink);--btn-fill-fg:var(--c-fog)}
[data-surface=ink] .btn,[data-surface=deep] .btn,.ftr .btn{--btn-fill:var(--c-fog);--btn-fill-fg:var(--c-ink)}
[data-surface=cobalt] .btn{--btn-fill:var(--c-ink);--btn-fill-fg:var(--c-fog)}
/* szellemgomb (másodlagos) */
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fg) 34%,transparent)}
@media (hover:hover){.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}}
[data-surface=ink] .btn--ghost,[data-surface=cobalt] .btn--ghost,[data-surface=deep] .btn--ghost{--btn-fill:var(--c-fog);--btn-fill-fg:var(--c-ink)}
[data-surface=fog] .btn--ghost,[data-surface=fog-2] .btn--ghost{--btn-fill:var(--c-ink);--btn-fill-fg:var(--c-fog)}
.btn--sm{--btn-h:44px;padding:0 18px 0 20px;font-size:.9375rem;gap:10px}
/* fejléc-gomb: a fejléc felülete szerint */
.hdr .btn{--btn-bg:var(--c-lime);--btn-fg:var(--c-ink);--btn-fill:var(--c-fog);--btn-fill-fg:var(--c-ink);--focus:var(--c-lime)}
html[data-under-header=fog] .hdr .btn,html[data-under-header=fog-2] .hdr .btn{--btn-bg:var(--c-cobalt);--btn-fg:var(--c-fog);--btn-fill:var(--c-ink);--btn-fill-fg:var(--c-fog);--focus:var(--c-cobalt)}
html[data-under-header=cobalt] .hdr .btn{--btn-bg:var(--c-lime);--btn-fg:var(--c-ink);--btn-fill:var(--c-ink);--btn-fill-fg:var(--c-fog)}
.cta{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.cta__micro{margin-top:14px;font-size:var(--fs-small);color:var(--fg-2);max-width:52ch}
@media (max-width:520px){.cta .btn{width:100%}}

/* ---------- szöveges link (MOTION 3.7) ---------- */
.tlink{display:inline-flex;align-items:center;gap:.5em;font-weight:650;color:var(--fg);background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size var(--t-hover) var(--ease-jel)}
.tlink::after{content:"→";display:inline-block;transition:transform var(--t-hover) var(--ease-jel)}
@media (hover:hover){.tlink:hover{background-size:100% 1.5px}}
@media (hover:hover){.tlink:hover::after{transform:translateX(4px)}}
.tlink--muted{color:var(--fg-2)}
.body a,.small a,.faq a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- címkék ---------- */
.tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.07em;text-transform:uppercase;line-height:1;padding:7px 9px;border-radius:3px;border:1px solid var(--card-line,var(--line));color:var(--fg-2);white-space:nowrap}
.tag--signal{border-color:transparent;background:var(--signal);color:var(--accent-ink)}
.tag--solid{border-color:transparent;background:var(--fg);color:var(--bg)}
.tag--warn{border-color:transparent;background:var(--c-lime);color:var(--c-ink)}
[data-surface=fog] .tag--warn,[data-surface=fog-2] .tag--warn{background:var(--c-cobalt);color:var(--c-fog)}

/* ---------- kártyák (bento + fényvezetés + tilt) ---------- */
.card{--mx:50%;--my:50%;position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,34px);transition:border-color var(--t-hover),transform 400ms var(--ease-jel);transform-style:preserve-3d}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(240px circle at var(--mx) var(--my),var(--signal),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:var(--glow,0);transition:opacity var(--t-hover);pointer-events:none}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--signal) 9%,transparent),transparent 70%);opacity:var(--glow,0);transition:opacity var(--t-hover);pointer-events:none}
@media (hover:hover){.card:hover{--glow:1}}
.card__num{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.07em;color:var(--fg-2);margin-bottom:28px;display:flex;justify-content:space-between;align-items:center}
.card h3{margin-bottom:12px}
.card p{color:var(--fg-2)}

/* ---------- bizonylat-cédula ---------- */
.slip{position:relative;background:#FFFFFF;color:var(--c-ink);border-radius:4px;padding:22px 22px 20px;font-size:.95rem;box-shadow:0 1px 0 rgba(11,16,51,.08),0 18px 40px -24px rgba(11,16,51,.35);transition:transform var(--t-hover) var(--ease-jel),box-shadow var(--t-hover)}
.slip::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:radial-gradient(circle at 5px -1px,transparent 4px,#fff 4.5px) 0 0/10px 6px repeat-x}
@media (hover:hover){.slip:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(11,16,51,.08),4px 4px 0 rgba(11,16,51,.9)}}
.slip__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed rgba(11,16,51,.22)}
.slip__head strong{font-size:1.05rem;letter-spacing:-.015em}
.slip .mono{color:var(--c-text-2-light)}
.quote{font-family:var(--f-mono);font-size:.84rem;line-height:1.55;letter-spacing:0;background:linear-gradient(to right,rgba(47,75,255,.10),rgba(47,75,255,.10)) 0 0/var(--q,0%) 100% no-repeat;padding:2px 4px;margin-inline:-4px;transition:background-size 600ms var(--ease-jel)}
@media (hover:hover){.slip:hover .quote,.slip.is-in .quote{--q:100%}}

/* ---------- harmonika (GYIK) ---------- */
.faq{border-top:1px solid var(--card-line)}
.faq details{border-bottom:1px solid var(--card-line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font:inherit;letter-spacing:inherit}
.faq__pm{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--card-line);position:relative;transition:transform var(--t-state) var(--ease-huzat),background-color var(--t-hover)}
.faq__pm::before,.faq__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor}
.faq__pm::after{transform:rotate(90deg)}
.faq details[open] .faq__pm{transform:rotate(45deg);background:var(--signal);color:var(--accent-ink);border-color:transparent}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size var(--t-state) var(--ease-huzat),content-visibility var(--t-state) allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq__a{padding:0 0 30px;max-width:70ch;color:var(--fg-2)}
.faq__a p+p,.faq__a p+ul,.faq__a ul+p{margin-top:.8em}
.faq__a strong{color:var(--fg)}
.faq__a ul{padding-left:1.2em}
.faq__a li+li{margin-top:.35em}

/* ---------- táblázat ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--card-line);background:var(--card)}
.tbl{min-width:720px;font-size:.95rem}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--card-line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);background:color-mix(in srgb,var(--fg) 3%,transparent)}
.tbl tbody th{font-weight:650;color:var(--fg);width:22%}
.tbl td{color:var(--fg-2)}
.tbl .is-us{background:color-mix(in srgb,var(--c-cobalt) 7%,transparent);color:var(--fg);font-weight:600}
.tbl thead .is-us{background:var(--c-cobalt);color:var(--c-fog)}

/* ---------- listák ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:1.5px;background:var(--signal)}
.ticks--muted li::before{background:var(--fg-2);opacity:.5}

/* ---------- űrlap-alapok ---------- */
.field{display:grid;gap:8px}
.field label{font-size:var(--fs-small);font-weight:650;transition:transform var(--t-hover) var(--ease-jel),color var(--t-hover)}
.field:focus-within label{transform:translateY(-2px);color:var(--accent)}
.input,.select,.textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--card-line);background:var(--card);color:var(--fg);transition:border-color var(--t-hover),box-shadow var(--t-hover)}
.textarea{min-height:120px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field__help{font-size:var(--fs-small);color:var(--fg-2)}
.field__err{font-size:var(--fs-small);color:var(--c-err);font-weight:600}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.check input{appearance:none;flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:5px;border:1.5px solid var(--fg-2);display:grid;place-content:center;background:var(--card)}
.check input::before{content:"";width:12px;height:12px;clip-path:polygon(14% 52%,0 66%,40% 100%,100% 22%,86% 8%,40% 72%);background:var(--accent-ink);transform:scale(0);transition:transform 180ms var(--ease-kattanas)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::before{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn__clip::before,.btn__dot,.card,.slip,.quote{transition:none}
  .card{transform:none!important}
}

/* ---------- helykitöltő (.ph): látható [ … ], de nem kiabál (QA: a jelentkezes/jogi oldal-CSS-ből emelve) ---------- */
.ph{font-family:var(--f-mono);font-size:.85em;font-weight:500;letter-spacing:.01em;color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);
  border:1px dashed color-mix(in srgb,var(--fg-2) 60%,transparent);border-radius:3px;padding:.04em .32em;white-space:normal;overflow-wrap:anywhere;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-surface=fog] .ph,[data-surface=fog-2] .ph{color:var(--c-ink-2);background:var(--c-fog-2);border-color:color-mix(in srgb,var(--c-ink-3) 55%,transparent)}
/* QA: lime soha világos alapon (BUILD-SPEC 0.) — a fókusz-pont fog felületen kobalt */
[data-surface^=fog] .btn__ring-dot{background:var(--c-cobalt)}

/* ---------- Lenyitható „Részletek” (közös komponens, v2-szövegekhez) ----------
   Jelölés:
   <details class="more">
     <summary><span class="more__lbl">Részletek</span></summary>
     <div class="more__body"> …bekezdések, lista… </div>
   </details>
   Natív <details>: billentyűvel (Enter/Szóköz) nyílik, a felolvasó a nyitott/zárt állapotot magától mondja.
   Animáció: ::details-content magasság-átmenet (interpolate-size a html-en), ahol nincs támogatás, ott azonnal nyílik;
   a tartalom finoman beúszik. Csökkentett mozgásnál nincs animáció. Világos és sötét felületen is a felület tokenjeit használja. */
.more{border-top:1px solid var(--line);margin-top:clamp(14px,2svh,24px)}
.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;font:500 var(--fs-mono)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color var(--t-hover)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"";flex:0 0 auto;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;
  background:linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 9px no-repeat;transition:transform var(--t-state) var(--ease-jel),background-size var(--t-state) var(--ease-jel)}
.more[open]>summary::before{transform:rotate(180deg);background-size:9px 1.5px,1.5px 0}
@media (hover:hover){.more>summary:hover{color:var(--fg)}}
.more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.more__body{padding:4px 0 clamp(14px,2.4svh,26px);color:var(--fg-2)}
.more__body>*+*{margin-top:.8em}
.more::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-state) var(--ease-jel),content-visibility var(--t-state) allow-discrete}
.more[open]::details-content{block-size:auto}
.more[open] .more__body{animation:moreIn var(--t-enter) var(--ease-jel) both}
@keyframes moreIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.more::details-content{transition:none}.more[open] .more__body{animation:none}.more>summary::before{transition:none}}
html.motion-off .more::details-content{transition:none}html.motion-off .more[open] .more__body{animation:none}
@media print{.more::details-content{block-size:auto}}