/* Kapcsolat (kapcsolat.php, 10-25): a sürgős lap űrlap-elemeire épül (surgos.css), narancs kiemeléssel; köszönőnézet animációval. */
.kp .kp-jel{border-color:var(--amber-line);background:var(--amber-soft);color:var(--amber)!important}
.kp h1{max-width:24ch}
.kp-racs{display:grid;gap:24px;margin-top:24px}
.kp .kp-form{margin-top:0}
.kp-temak{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px}
.kp label.kp-tema{min-height:64px}
.kp-tema span{display:flex;flex-direction:column;gap:2px}
.kp-tema b{color:var(--white);font-size:.95rem}
.kp-tema small{color:var(--dim);font-size:.82rem;font-weight:400;line-height:1.35}
.kp .sg-chk input{accent-color:var(--amber)}
.kp .sg-chk:has(input:checked){border-color:var(--amber);background:var(--amber-soft)}
.kp-csop[aria-invalid="true"] .kp-tema,.kp fieldset[aria-invalid="true"] .kp-tema{border-color:var(--crit)}
.kp .kp-uz{margin:0;display:flex;flex-direction:column;gap:6px;max-width:none}
.kp textarea{width:100%;min-width:0;min-height:150px;padding:12px 14px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);color:var(--white);font:1rem/1.5 var(--f-body);resize:vertical}
.kp textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.kp textarea[aria-invalid="true"]{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit)}
.kp-btn{width:100%;min-height:56px;font-size:1.05rem;cursor:pointer}
.kp-oldal{display:grid;gap:12px;align-content:start}
.kp-oldal h2{margin:0;font-size:1.05rem}
.kp-kartya{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);background:var(--tile)}
.kp-kartya b{color:var(--white)}
.kp-kartya span{color:var(--dim);font-size:.9rem;overflow-wrap:anywhere}
.kp-kartya a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--amber)}
.kp-kartya.kp-surgos{border-left-color:var(--crit)}
.kp-kartya.kp-surgos a{color:var(--crit)}
.kp-kartya.kp-ceg{border-left-color:var(--line2)}
@media (min-width:1100px){
  .kp-racs{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px;align-items:start}
  .kp-mezok{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kp-temak{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Köszönőnézet: a boríték bezárul, aztán pipa rajzolódik ki. Csökkentett mozgásnál rögtön a pipa látszik. */
.kp-kesz{display:grid;justify-items:center;text-align:center;gap:12px;padding:clamp(24px,5vw,48px) clamp(16px,4vw,40px);border:1px solid var(--line);border-top:4px solid var(--ok);border-radius:var(--r);background:var(--tile)}
.kp-kesz h1{margin:0;max-width:22ch}
.kp-kesz .lead{margin:0 auto;max-width:56ch}
.kp-spam{margin:0;color:var(--dim);font-size:.9rem}
.kp-anim{width:clamp(120px,22vw,160px);height:auto;color:var(--ok);overflow:visible}
.kp-level{color:var(--amber)}
.kp-pipa{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .kp-level{transform-origin:80px 64px;animation:kp-repul 1.1s cubic-bezier(.5,0,.75,0) .25s both}
  .kp-pipa{opacity:0;animation:kp-feltun .01s linear 1.25s forwards}
  .kp-pipa circle{stroke-dasharray:227;stroke-dashoffset:227;animation:kp-rajz .6s ease-out 1.25s forwards}
  .kp-pipa path{stroke-dasharray:52;stroke-dashoffset:52;animation:kp-rajz .35s ease-out 1.8s forwards}
  .kp-kesz h1,.kp-kesz .lead,.kp-spam{animation:kp-be .5s ease-out both}
  .kp-kesz h1{animation-delay:1.9s}.kp-kesz .lead{animation-delay:2.05s}.kp-spam{animation-delay:2.2s}
}
@media (prefers-reduced-motion:reduce){.kp-level{display:none}}
@keyframes kp-repul{0%{transform:none;opacity:1}35%{transform:translate(0,4px) scale(.96);opacity:1}100%{transform:translate(70px,-60px) scale(.35) rotate(-18deg);opacity:0}}
@keyframes kp-feltun{to{opacity:1}}
@keyframes kp-rajz{to{stroke-dashoffset:0}}
@keyframes kp-be{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kp-tovabb{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.kp-tovabb li{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:var(--r);background:var(--tile);max-width:none}
.kp-tovabb b{color:var(--white)}
.kp-tovabb span{color:var(--dim);font-size:.92rem}
.kp-tovabb .btn2{align-self:flex-start;margin-top:auto}
