/* ============================================================
   Nightmare Apocalypse — stíluslap
   Design: filmszerű plakát-esztétika. Meleg aszfalt-fekete alap,
   nátriumlámpa-borostyán akcent, hajszálvonalas editorial rács.
   Szándékos döntések:
   - radius: 4px MINDENHOL (a "bubbly" 12px helyett) → nyomdai, éles karakter
   - 1 akcent + 1 státuszszín, semmi több
   - kártyarács helyett hajszálvonallal elválasztott sorok
   ============================================================ */

/* ---------- 1. TOKENEK ---------- */
:root{
  /* Háttérrétegek — meleg neutral, NEM navy és nem tiszta fekete */
  --bg:        #0b0a09;
  --surface:   #121010;
  --elevated:  #1a1717;

  /* Vonalak — hajszál, sosem vastagabb */
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.17);

  /* Szöveg — meleg törtfehér, nem #fff */
  --text:   #f3eee8;
  --dim:    #a49c93;
  --faint:  #6d6660;

  /* Akcent: nátriumlámpa borostyán. Karakteres, de nem neon. */
  --accent:      #ff7a18;
  --accent-warm: #ffa34d;
  --accent-soft: rgba(255,122,24,.13);
  --accent-line: rgba(255,122,24,.34);

  /* Egyetlen státuszszín */
  --online: #3ddc84;

  /* Tipográfia */
  --f-display: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Ritmus — 4px rács */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r: 4px;               /* egyetlen radius az egész oldalon */
  --shell: 1240px;
  --t: .15s ease;         /* gyorsabb mint gondolnád */
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
code{ font-family:var(--f-mono); }
::selection{ background:var(--accent); color:#0b0a09; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed; top:-100px; left:var(--s4); z-index:200;
  background:var(--accent); color:#0b0a09; padding:var(--s3) var(--s4);
  border-radius:var(--r); font-weight:600; transition:top var(--t);
}
.skip-link:focus{ top:var(--s4); }

/* ---------- 3. ATMOSZFÉRA (szemcse + vignetta) ---------- */
.film{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-2%,1%) }  40%{ transform:translate(1%,-2%) }
  60%{ transform:translate(-1%,-1%) } 80%{ transform:translate(2%,1%) }
}
.vignette{
  position:fixed; inset:0; z-index:89; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ---------- 4. ÚJRAHASZNÁLT ELEMEK ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--s5); }

/* Mikro-címke: mono + uppercase + tág betűköz — editorial jelölés,
   ez tagolja a szekciókat szám szerint */
.micro{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--faint);
}
.micro--accent{ color:var(--accent); }

/* FONTOS: a display betűnél a sormagasság nem mehet 1.0 alá.
   A magyar nagybetűs ékezetek (É Á Ő Ű) a cap-height fölé nyúlnak,
   szűkebb sorköznél belelógnak az előző sorba. Nagybetűnél nincs
   alávágás, így az 1.0 vizuálisan még mindig feszes marad. */
.h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem,5.2vw,4.2rem);
  line-height:1; letter-spacing:-.01em; text-transform:uppercase;
  margin-top:var(--s4);
}
.is-accent{ color:var(--accent); }
.lead{ font-size:clamp(1rem,1.5vw,1.15rem); color:var(--dim); max-width:52ch; }
.muted{ color:var(--dim); }
.muted strong{ color:var(--text); font-weight:600; }

/* Gombok — 3 variáns, több nem kell */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s3) var(--s5); border-radius:var(--r);
  font-size:.9rem; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:#12100e; }
.btn--primary:hover{ background:var(--accent-warm); }
.btn--ghost{ border-color:var(--line-strong); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn--sm{ padding:var(--s2) var(--s4); font-size:.82rem; }
.btn--lg{ padding:var(--s4) var(--s6); font-size:1rem; }
.btn--block{ width:100%; }

/* Ikonok — a sprite maga sosem látszik, csak a <use> hivatkozások */
.sprite{ display:none; }
.ico{
  display:block; width:20px; height:20px; flex:0 0 auto;
  fill:currentColor;              /* az ikon a gomb szövegszínét veszi fel */
}
.ico--sm{ width:15px; height:15px; }
.ico--lg{ width:40px; height:40px; }

/* A FiveM jel a hivatalos kliensikonból kinyert, háttér nélküli maszk.
   Maszkként (nem képként) használom, hogy a currentColor-t vegye fel —
   így hoverkor a gombbal együtt vált színt, ahogy az SVG ikonok. */
.ico--fivem{
  background:currentColor;
  -webkit-mask:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACwCAYAAAD61gcAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAArWSURBVHhe7Z29qizHFUYNfgfFjpQpEjgTCBQZFAj0FMoEfg2BY4PBgcGRQI8gUCYw6C0EAoMe4br24fRxT51VU931t7+q7gUruN9U1+w7d9+pmZrumT98+PDhiipAdS0vhov7Y9Cbj4NU2/JiuLjeXLbZTAwX9sugJ3Gz2Z+Nfba0GC6sJ6lmM+w/wv62ZcVwYb141mwb+9uXFcNF/XvQgyPNZuzHLCuGi+rB0WYz/hrcj11SDBd1NHGzWUPl2I9fUgwXdPTeW9xsR5fz/TFLiuGCjqS02Yz42OXEcDGfvW5qTU2zGfZMvD9+OTFczF+DI6htto39HMuJ4WKOoFWzGft5lhPDhRzxUVbLZrNn4/1cy4nhQvbmbraTYriQPbmbrUAMF/HbYC/uZisUw0XsRctm+y24n2t5MVzEHsT3UdNs/w3G8y0vhgv4Q7A18X3UNNvvwXi+S4jhArYmnv9utkIxXMCWxHPXfHJx6WYzMZzclstpPPfdbJViOLmtiOf1aDaD8mnFcHJbEM/p1WzGL0G6fUoxnNgWy2k8p2ezbdCYKcVwYmuJ5xvdbLapTNDYKcVwYmuI51Jpts+CNH5KMZzUn4KlxHPVNFvJa65Us8Ufo00vhpNaSjxPTbPZa8h4vpyXaTYTwwn9U7CEeJ672TqL4YT+J3iWeI672QaI4YSeJT7+brZBYjiZHwXPEB9vpwmVcjfbSTGczDPvTuNjbfuilLvZCsRwMo9A+2I1lDRb6pSmyzSbieFk5ribTUgMJzL3JTV0zUANCs1mUD6FGE7kM1o327+D8Xw5ezSbYfPS7fJiOJEpWi+jJf/AvZptg8bIi+EkppZTuhqqBsVmM2icvBhOImEbuEfGHaWk2VLfdNmy2YyS2tzFcBJjFJrNmopo3WwbdIy0GE5gvJwqNNunQaJXsxl0nLQYTuCe1s1W0iBfB4mezWZMt6xiOIEbV262DZpDVgzF3ZZThWZLLaM0Nqfdfwk0l6wYimvQUlJD6bPR34IxNC5nabMZUy2rGIqr0mxmfGoUjclZ02wbNK+kGE5k7T9WTbNtbtBtOVs0m0FzS4rhJCo0m2lQnrNVsxnTLKsYTqBKs5Xastk26H7kxFBcj2azY1r92l+PZjPovuTEUFivZjPotrP2ajZjimUVQ1E9m82g28/4ebA3dL9SYihqDSXNtj/rgzaZz2hnCo+A7ltKDAWtoaTZbHnaUzLH5qhmM0pOgR8qhoKWUtIo/wjG0Lgjjmy2DapDRgzFtOWshJJm+z4YU/rs5tFsBtUiI4ZilkDz5KQGKX3tRo07CumvaMVQyPi11BFonpypZyMam5OW5NFQXRJiKORZaI6cqWaz31ql8c+05VeBT4JUn7sYCnkGOj5nqtnspEoaf0QFZH87H0MRc1fV76Hjc6ZeZ/0lSOOPqgLV5i6GIh6Fjs35c5AoWUZjS99Vt4ZqcxdDAY++FqJjc9pXQBA1y+helddxkssqhgIeeZag43Km5m39IlsFqs1VDAXMQcfkTDUbja1VBarNVQydzS1JdEzOkc1mluwf9kBuWcXQ2WfLKY3PObrZNlWg2tzE0NkUNDanV7OZKlBtbmLoaGo5pbE5PZvNVEFqWcXQUWoSGpfTu9lM29NTgepzEUNHY2hMztQ+G43trQpUm4sYOrlfTu0ZisbkTP3IB40doQqlj2dzMXRyWwZLH5zUj3zQ2FGe+Ty4N1TfcDF00lip2UyVj7kMq4VqHCqGDtqDsVqzbaogsaxi6GDpW/eWzdbiTBFSCapvqBhOIjWbZTQ2p50p8m2UtZK+Q84L92UVwwmkd6OlzfZd0KDbWqmC+7KKobj2oMWUNtv+Q3a6vZVKUH3DxFBYajb65Zkj7puNfperpUrbI67LKoaiUrOVLhH/DO75IkjjWqm0PdL7P9dTMRS0ZbPRlVo0rrVKUH1DxFDMls2WulKLxrZWiVbXb5wWQyFbNlvqLFx7xqPxrU396JsHpW+yqsVQxBHNZthX39MxPVSC6usuhgKOajaDjumlEt8EqcauYuhsy2b7V/AZpfOWSn83T6jGrmLoaMtmS31vyJ5en5+mVNoeMajGrmLoJDWbLYc0NufR72ejY3urxOj/cDIN17LZcq/Z9tDxvVWDauwmhoNt2Ww0Vwr74kCao7dK2yMG1dhNDAdKjGg2w37rlOYZoRJDl1UMB5h68Tyq2QyaZ5RqUI1dxLCzCs1WeoZJK5XOHjGoxi5i2FliZLMZw9+dRdrXgykx7PHAsKPE6GYzaL7RqkE1NhfDTlpjxXg0m0FzjlYNqrG5GHYyxqvZSu+3tUoX1xhDHhcMOxg3iVezGTSvl2pQjU3FsIN7PJvNoLm9VINqbCqGjbUG2yi9gKNVs9k8NL+X9rtYSnRfVjFs7IZ3sxmlNfTSTvVWg+psJoaNNUp/3aVlsxl0H96qQTU2E8OG2tcnlF6w0QO6H2/V6LqsYihgD7q/PilUbXvEoDqbiKGzvaD7UlENqrGJGDraE7o/FdXothpg6GRPpL46HvwpqAbVWS2GDvZGbTuEVINqrBbDwY6A7ldNNbqsChgOdBR032oqQnVWieEgR2EXrdD9q2knQapBdVaJ4QBHQvevqhrNl1UMOzsaqkFVRajOYjHs6GjUt0Ni1S6uMajOYjHsYOpKrd5QLeqq0fQ/LYaN9Wo2g+pRVxGqs0gMG+rZbAbVpK4iVGeRGDbSu9m8rz0tVXF7pNmZ0hg20LvZDKprFhWhOk+LYaUKzWZQbbOoiP27Uq2nxLBClWZTPdnyqFa/Gk2WVQwLVWk2g+qbTUWozlNiWKBSsxlU42wqUr2sYligEmrXnpba+oq1FlQ/thieVO2BmXU7JFZxe8SgWg+L4UnVoBpnVZGqZRXDE17iHC5HFalaVjE8oRqzb4fEKm6PGFTrITE8oRpU4+wqUvw6GcODLn/uloiqUK1ZMTyoGqtsh8Qqbo8YVGtWDA+qRvWmpKifBRUpWlYxPOC9nI5VFar1qRgeUBGqcxVVoVqfimFGtc9NjVmuPS31yG+/enB6WcUw429BNajO1VSFak2KYUZFqM7VVIVqTYrhE+0rVNWY7drTUtW+8Xzj1MsZDJ+oCNW5ol8FVaF6UQyfqAjVuaqqUK0ohgkVl1ODal1VVQ6fNIFhQkWKP0SeVMVvPN+get+JYUJFqM7VVYVqfSeGoOrGI9W6uqpYj1C9D2IIKrLayZZHVd0eMajeBzEEFaE6r+CnQVWo3gcxjLyXUz1V+T5I9b6JYaQiq55seVRlqN43Mdyp+vS96smWR/0uqArV+yaGO1VfoFKtV/KPQVWefraN4U5VqNarqQzV+yKGr6oup1fdDolVhup9EcNX7+VUWzstSJXksorhq6pQrVdVGao32XCqy+lVTrY8qjJUb7LhVJfTq2+HxKpeJG3gk8O74FVVqNYrq3gF3Z53Nb8Lgl8HVaF6r64y7+p9FwR/DypytZMtj6rMu48gH/7wqipU663ud8htPNT78Ifg50FV4lpv/68yD2/09kWbilfVG/d2yHOVeVhW90WbqsR13j6qvD1ivNW6L/p+dzqv9oZKmbdldV+06rvTq59seVRl3v4NZyj43g45pjovdW7F/tkSUbYab5+rvj3ysqxuxSqzf1Bvn6vMy7KqXmj2KqDbB9V5aTjldzgfBeMH9Tat+rvVL61I21RVJX5Ab/MK8+Hn/wEbPJF/gDr97wAAAABJRU5ErkJggg==") center/contain no-repeat;
          mask:url("data:image/png;base64,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") center/contain no-repeat;
}

/* Felirat nélküli ikongomb: négyzetes, a gomb-padding helyett fix méret.
   A hozzáférhető nevet az aria-label adja, mert nincs látható szöveg. */
.btn--icon{ width:80px; height:80px; padding:0; }
.btn--icon .ico{ transition:transform var(--t); }
.btn--icon:hover .ico{ transform:scale(1.08); }

.foot__discord{ display:inline-flex; align-items:center; gap:var(--s2); }

.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.12em; padding:3px 10px; border-radius:999px;  /* kivétel: badge */
  border:1px solid var(--line);
}
.tag--online{ color:var(--online); border-color:rgba(61,220,132,.3); background:rgba(61,220,132,.08); }

/* ---------- 5. NAVIGÁCIÓ ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,10,9,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--shell); margin-inline:auto; padding:var(--s4) var(--s5);
  display:flex; align-items:center; gap:var(--s5);
  transition:padding var(--t);
}
.nav.is-stuck .nav__inner{ padding-block:var(--s3); }

.brand{ display:flex; align-items:center; gap:var(--s3); }
.brand__mark{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--accent-line); border-radius:var(--r);
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--f-display); font-size:.95rem; letter-spacing:.04em;
  transition:background var(--t), border-color var(--t);
}
.brand:hover .brand__mark{ background:var(--accent); color:#12100e; border-color:var(--accent); }
.brand__name{
  display:flex; align-items:baseline; gap:7px;
  font-family:var(--f-display); font-size:1.35rem; letter-spacing:.06em; text-transform:uppercase;
}
/* Az Apocalypse utótag mono és kisebb — így a hosszú név egy jelként olvasható,
   nem két egyenrangú szóként, és a fejléc sem nő szét. */
.brand__suffix{
  font-family:var(--f-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; color:var(--accent);
}

.nav__links{ display:flex; gap:var(--s4); margin-right:auto; }
.nav__links a{
  position:relative; font-size:.9rem; color:var(--dim); white-space:nowrap;
  padding-block:var(--s2); transition:color var(--t);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right var(--t);
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--text); }
.nav__links a:hover::after,.nav__links a.is-active::after{ right:0; }

.nav__actions{ display:flex; align-items:center; gap:var(--s3); }

.pulse{
  display:inline-flex; align-items:baseline; gap:var(--s2);
  font-family:var(--f-mono); font-size:.8rem; color:var(--dim);
}
.pulse__dot{
  width:7px; height:7px; border-radius:50%; background:var(--online);
  box-shadow:0 0 0 0 rgba(61,220,132,.55); animation:ping 2.4s ease-out infinite;
  align-self:center;
}
@keyframes ping{ 70%{ box-shadow:0 0 0 8px rgba(61,220,132,0) } 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0) } }
.pulse__num{ color:var(--text); font-weight:500; }
.pulse__cap{ color:var(--faint); }

/* A két rúd abszolút pozicionált, így a nyitott állapotban
   pontosan egymásra fordul — margóval számolva sosem stimmelt. */
/* ---------- 5b. STEAM BEJELENTKEZÉS ---------- */
/* A blokk alapból rejtett: ha nincs backend (pl. file:// alól nyitva),
   a JS meg sem jeleníti, hogy ne kínáljon működésképtelen gombot. */
.auth{ display:flex; align-items:center; gap:var(--s2); }
.auth[hidden]{ display:none; }
.auth__login{ white-space:nowrap; }

.auth__user{
  display:flex; align-items:center; gap:var(--s2);
  padding:3px 10px 3px 3px;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color var(--t), background var(--t);
}
.auth__user:hover{ border-color:var(--accent-line); background:var(--accent-soft); }
/* Szögletes avatar, nem kör — így illeszkedik a lap éles, nyomdai karakteréhez */
.auth__avatar{ width:26px; height:26px; border-radius:3px; object-fit:cover; background:var(--elevated); }
.auth__name{
  font-size:.85rem; max-width:15ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.auth__out{
  display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--r); color:var(--dim);
  transition:color var(--t), border-color var(--t);
}
.auth__out:hover{ color:var(--accent); border-color:var(--accent-line); }

/* Mobil menüben teljes szélességben */
.auth--menu{ width:100%; }
.auth--menu .auth__login{ flex:1; justify-content:center; padding-block:var(--s3); }
.auth--menu .auth__user{ flex:1; padding:var(--s2); }
.auth--menu .auth__name{ max-width:none; }

.burger{ display:none; position:relative; width:34px; height:34px; }
.burger span{
  position:absolute; left:7px; width:20px; height:1.5px; background:var(--text);
  transition:transform .18s ease;
}
.burger span:first-child{ top:14px; }
.burger span:last-child{ top:19px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

/* Teljes képernyős overlay: nem kell a fejléc magasságát kitalálni,
   és a nav (z-index 100) fölötte marad, így a bezárás mindig elérhető. */
.mobilemenu{
  position:fixed; inset:0; z-index:99;
  background:rgba(11,10,9,.98);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:96px var(--s5) var(--s5);
  display:flex; flex-direction:column; gap:var(--s5);
  overflow-y:auto;
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu nav{ display:flex; flex-direction:column; }
.mobilemenu nav a{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em;
}
.mm__idx{ font-family:var(--f-mono); font-size:.7rem; color:var(--accent); letter-spacing:.1em; }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:calc(var(--s10) + var(--s5)) 0 var(--s8); overflow:hidden;
}
.hero__art{ position:absolute; inset:0; z-index:0; }

/* Háttérkép: égő Los Santos — Rockstar hivatalos GTA Online grafika (assets/img/hero-bg.jpg,
   forrás a kepek.html-en). A stilizált térkép (assets/img/hero-map.svg) megmaradt:
   ha inkább azt szeretnéd, írd át az url-t rá és a pozíciót 55% 40%-ra. */
/* A kép lassan ráközelít és elsodródik — ettől él a város a szöveg mögött.
   A nagyítás sosem megy 1.06 alá, így a széle nem villan ki elmozduláskor.
   Az egérkövetés a háttér pozícióját tolja, nem a transformot: a kettő
   így nem üti egymást. */
.hero__map{
  position:absolute; inset:0;
  background-image:url(../img/hero-bg.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:calc(62% + (var(--eger-x,0) * -16px)) calc(30% + (var(--eger-y,0) * -10px));
  transform-origin:62% 34%;
  animation:heromozgas 30s ease-in-out infinite alternate;
  transition:background-position .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
@keyframes heromozgas{
  from{ transform:scale(1.06) translate3d(0,0,0) }
  to  { transform:scale(1.17) translate3d(-2.2%,-2.4%,0) }
}
/* Sötétítés a szöveg mögött, és átmenet a lap többi részébe */
.hero__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,10,9,.96) 0%, rgba(11,10,9,.86) 26%, rgba(11,10,9,.5) 52%, rgba(11,10,9,.22) 74%, rgba(11,10,9,.42) 100%),
    linear-gradient(180deg, rgba(11,10,9,.88) 0%, rgba(11,10,9,0) 24%, rgba(11,10,9,0) 76%, var(--bg) 100%);
}
/* Füst — két, ellentétes irányban lassan úszó réteg (mozgáscsökkentésnél áll) */
.hero__fog{
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(40% 36% at 32% 68%, rgba(125,115,105,.16), transparent 70%),
    radial-gradient(34% 30% at 72% 28%, rgba(125,115,105,.12), transparent 70%),
    radial-gradient(28% 40% at 58% 88%, rgba(255,122,24,.10), transparent 70%);
  animation:fogdrift 70s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero__fog--2{ animation-duration:95s; animation-direction:alternate-reverse; opacity:.8; }
@keyframes fogdrift{ from{ transform:translate3d(-3%,1%,0) } to{ transform:translate3d(3%,-2%,0) } }

/* Felszálló parázs. Négy csempézett pontréteg, mindegyik pontosan egy
   csempényit lép a ciklus alatt — így a loop nem látszik. A különböző
   csempemagasságok adják a különböző sebességet. */
.hero__parazs{
  position:absolute; inset:-8% 0 0; pointer-events:none;
  background-image:
    radial-gradient(7px 7px     at 18% 88%, rgba(255,140,50,.22),  transparent 70%),
    radial-gradient(3.2px 3.2px at 18% 88%, rgba(255,196,120,1),   transparent 62%),
    radial-gradient(6px 6px     at 63% 72%, rgba(255,160,70,.18),  transparent 70%),
    radial-gradient(2.6px 2.6px at 63% 72%, rgba(255,216,155,.95), transparent 62%),
    radial-gradient(6.5px 6.5px at 85% 90%, rgba(255,130,40,.20),  transparent 70%),
    radial-gradient(3px 3px     at 85% 90%, rgba(255,180,86,1),    transparent 62%),
    radial-gradient(2px 2px     at 41% 55%, rgba(255,226,178,.70), transparent 62%),
    radial-gradient(2.2px 2.2px at 8%  40%, rgba(255,198,116,.75), transparent 62%),
    radial-gradient(1.8px 1.8px at 74% 30%, rgba(255,212,152,.62), transparent 62%);
  background-size:
    300px 360px, 300px 360px,
    380px 440px, 380px 440px,
    260px 320px, 260px 320px,
    430px 500px, 340px 410px, 470px 560px;
  mask-image:linear-gradient(180deg, transparent 3%, #000 26%, #000 84%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 3%, #000 26%, #000 84%, transparent 100%);
  animation:parazs 19s linear infinite;
}
/* A fényudvar és a magja egy tételben mozog, ezért páronként azonos a lépés. */
@keyframes parazs{
  from{ background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 }
  to  { background-position:
          -34px -360px, -34px -360px,
           26px -440px,  26px -440px,
          -48px -320px, -48px -320px,
           40px -500px, -22px -410px, 30px -560px }
}

/* Fényforrások: két lágy folt, ez adja az „utcai lámpa éjjel” hangulatot */
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); }
/* A meleg folt lassan lélegzik — mintha lobogna valami a városban */
.hero__glow--warm{
  width:56vw; height:56vw; left:-12vw; top:-14vw;
  background:radial-gradient(circle, rgba(255,122,24,.28), transparent 68%);
  animation:izzas 11s ease-in-out infinite alternate;
}
@keyframes izzas{ from{ opacity:.7 } to{ opacity:1 } }
.hero__glow--cold{
  width:44vw; height:44vw; right:-8vw; bottom:-16vw;
  background:radial-gradient(circle, rgba(70,110,170,.16), transparent 70%);
}
/* Hajszálrács — nyomdai szedéstükör érzet */
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 80% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%, #000 20%, transparent 78%);
  opacity:.22;   /* a térkép alatt csak halvány szedéstükör marad */
}
/* Óriás kontúr-tipó a háttérben */
/* A méret a szóhosszhoz van szabva: 9 betű 23vw-vel kilógna a képernyőről. */
.hero__ghost{
  position:absolute; left:50%; bottom:-2vw; transform:translateX(-50%);
  font-family:var(--f-display); font-size:13vw; line-height:.8; letter-spacing:.02em;
  text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.055);
  white-space:nowrap; user-select:none;
}
/* Egérkövető fénykúp */
.hero__spot{
  position:absolute; width:640px; height:640px; margin:-320px 0 0 -320px;
  background:radial-gradient(circle, rgba(255,122,24,.11), transparent 62%);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.hero:hover .hero__spot{ opacity:1; }

.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto; gap:var(--s8); align-items:end;
}
.hero__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3.4rem,11vw,9.5rem); line-height:1; letter-spacing:-.015em;
  text-transform:uppercase; margin:var(--s5) 0 var(--s5);
}
.hero__title span{ display:block; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }

/* Státuszkártya — az egyetlen elem az oldalon, ami valódi „panel” */
.statuscard{
  width:326px; padding:var(--s5);
  background:linear-gradient(180deg, var(--elevated), var(--surface));
  border:1px solid var(--line); border-radius:var(--r);
}
.statuscard__top{ display:flex; align-items:center; justify-content:space-between; }
.statuscard__big{ display:flex; align-items:baseline; gap:var(--s2); margin-top:var(--s4); }
.statuscard__num{
  font-family:var(--f-display); font-size:3.4rem; line-height:1; color:var(--text);
}
.statuscard__den{ font-size:.85rem; color:var(--faint); }

.meter{ height:3px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; margin:var(--s4) 0 var(--s5); }
.meter__fill{
  display:block; height:100%; width:var(--fill);
  background:linear-gradient(90deg, var(--accent), var(--accent-warm));
}

.statuscard__rows{ display:grid; gap:var(--s3); padding-bottom:var(--s5); }
.statuscard__rows > div{ display:flex; justify-content:space-between; font-size:.85rem; }
.statuscard__rows dt{ color:var(--faint); }
.statuscard__rows dd{ font-family:var(--f-mono); font-size:.8rem; }

.connect{
  display:flex; align-items:center; gap:var(--s2);
  border-top:1px solid var(--line); padding-top:var(--s4);
}
/* nowrap + ellipszis: a cím egy sorban marad. Ha valaki hosszabb domaint ír be,
   vizuálisan levágódik, de a másolás gomb a teljes szöveget viszi a vágólapra. */
.connect__str{
  flex:1; min-width:0; font-size:.72rem; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.connect__btn{
  font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); padding:var(--s1) var(--s2); border-radius:var(--r);
  transition:background var(--t);
}
.connect__btn:hover{ background:var(--accent-soft); }

.scrollcue{
  position:absolute; left:50%; bottom:var(--s5); transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--faint); transition:color var(--t);
}
.scrollcue:hover{ color:var(--accent); }
.scrollcue i{ width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation:drop 2s ease-in-out infinite; }
@keyframes drop{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }

/* ---------- 7. TICKER ---------- */
.ticker{
  border-block:1px solid var(--line); background:var(--surface);
  overflow:hidden; padding:var(--s3) 0;
}
.ticker__track{
  display:flex; align-items:center; gap:var(--s5); width:max-content;
  animation:slide 34s linear infinite;
}
.ticker span{
  font-family:var(--f-display); font-size:1.05rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--dim); white-space:nowrap;
}
.ticker i{ color:var(--accent); font-size:.6rem; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- 8. SZÁMOK ---------- */
/* Nem kártyák, hanem hajszálvonallal osztott sáv — ez a fő „anti-AI” döntés */
.numbers{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:var(--s8);
}
.numbers__item{
  padding-inline:var(--s5); border-left:1px solid var(--line);
}
.numbers__item:first-child{ border-left:0; padding-left:0; }
.numbers__val{
  display:block; font-family:var(--f-display); font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:1; color:var(--text);
}
.numbers__key{ display:block; margin-top:var(--s2); font-size:.85rem; color:var(--faint); }

/* ---------- 9. SZEKCIÓ VÁZ ---------- */
.sec{ padding-block:var(--s9); }
.sec__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s7); margin-bottom:var(--s8); }
.sec__note{ max-width:34ch; padding-bottom:var(--s2); }

/* Kétoszlopos editorial: bal oldal ragad, jobb oldal görög */
.split{ display:grid; grid-template-columns:minmax(280px,.85fr) 1.15fr; gap:var(--s9); align-items:start; }
.split__aside{ position:sticky; top:120px; }
.split__aside .muted{ margin-top:var(--s5); max-width:38ch; }

/* ---------- 10. FUNKCIÓK ---------- */
.feats{ border-top:1px solid var(--line); }
.feat{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s5);
  padding:var(--s6) var(--s4) var(--s6) 0;
  border-bottom:1px solid var(--line);
  transition:background var(--t), padding-left var(--t);
}
.feat:hover{ background:linear-gradient(90deg, var(--accent-soft), transparent 60%); padding-left:var(--s4); }
.feat__idx{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--faint); padding-top:5px; transition:color var(--t);
}
.feat:hover .feat__idx{ color:var(--accent); }
.feat h3{ font-size:1.15rem; font-weight:600; letter-spacing:-.005em; }
.feat p{ margin-top:var(--s2); color:var(--dim); font-size:.95rem; max-width:56ch; }

/* ---------- 11. IDÉZET ---------- */
.quote{
  padding-block:var(--s9);
  border-block:1px solid var(--line);
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(255,122,24,.07), transparent 60%),
    var(--surface);
}
/* A sorhossz `em`-ben mérve, mert az a saját betűméretéhez igazodik.
   `ch` itt csapda: a blockquote 16px-es törzsbetűjén számolna. */
.quote p{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem,4.2vw,3.1rem); line-height:1.15; letter-spacing:-.01em;
  max-width:15em;
}
.quote cite{
  display:flex; align-items:center; gap:var(--s3); margin-top:var(--s5);
  font-style:normal; font-size:.85rem; white-space:nowrap;
}
.quote cite i{ color:var(--accent); font-style:normal; }

/* ---------- 12. ÉLETEK (vízszintes sín) ---------- */
.rail{
  display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--s1) max(var(--s5), calc((100vw - var(--shell))/2 + var(--s5))) var(--s5);
  /* A snap enélkül a szélső kártyát a doboz széléhez rántja és „megeszi”
     a bal paddinget — így viszont a sín a szedéstükörhöz igazodik. */
  scroll-padding-inline:max(var(--s5), calc((100vw - var(--shell))/2 + var(--s5)));
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.rail::-webkit-scrollbar{ height:3px; }
.rail::-webkit-scrollbar-thumb{ background:var(--line-strong); }
.rail:active{ cursor:grabbing; }
/* Egérrel húzás közben a snap kikapcsol (a JS teszi ki az osztályt), különben
   a sín nem követi az egeret, hanem fél kártyánként ugrik. */
.rail.is-dragging{ scroll-snap-type:none; }

/* Lapozó nyilak: a sín két szélén, a kártyák függőleges közepén ülnek —
   ott, ahol a levágott következő kártya amúgy is „tovább”-ot ígér.
   Fotó fölött állnak, ezért tömör hátteret kapnak. A széleken eltűnnek,
   nem szürkülnek: egy inaktív gomb a képen csak zaj lenne. */
.rail-wrap{ position:relative; --path-h:420px; }
.rail__arrow{
  position:absolute; top:calc(var(--s1) + var(--path-h) / 2); z-index:2;
  width:44px; height:44px; padding:0; transform:translateY(-50%);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--elevated) 92%, transparent);
  border:1px solid var(--line-strong); border-radius:var(--r);
  color:var(--text);
  transition:border-color var(--t), color var(--t), opacity var(--t);
}
.rail__arrow--prev{ left:var(--s4); }
.rail__arrow--next{ right:var(--s4); }
.rail__arrow:hover{ border-color:var(--accent); color:var(--accent); }
.rail__arrow:active{ transform:translateY(calc(-50% + 1px)); }
.rail__arrow[disabled]{ opacity:0; pointer-events:none; }
.rail-wrap.is-flat .rail__arrow{ display:none; }   /* minden kártya kifér: nincs mit lapozni */

.path{
  position:relative; flex:0 0 290px; height:var(--path-h, 420px); scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s5); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; isolation:isolate;
  transition:border-color var(--t), transform var(--t);
}
/* Rétegsorrend felülről lefelé: rácsvonal-textúra → színfátyol → fotó.
   A fátyol tartja egy palettán a hét különböző fotót, és lefelé sötétít,
   hogy a cím és a leírás mindig olvasható maradjon. */
.path::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px),
    var(--pathtint),
    var(--pathimg);
  background-size:auto, auto, cover;
  background-position:center;
  background-repeat:repeat, no-repeat, no-repeat;
  filter:saturate(.78);
  transition:transform .5s ease, filter .3s ease;
}
.path:hover::before{ filter:saturate(1); }
.path::after{  /* olvashatóság: sötét fátyol a szöveg alatt */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,10,9,.15) 0%, rgba(11,10,9,.92) 72%);
}
.path:hover{ border-color:var(--accent-line); transform:translateY(-4px); }
.path:hover::before{ transform:scale(1.06); }

/* Minden út saját fotót és színfátylat kap. A fátyol felül áttetsző
   (látszik a kép), lent szinte tömör (olvasható a szöveg). */
.path--law   { --pathimg:url("../img/paths/law.jpg");   --pathtint:linear-gradient(160deg, rgba(27,40,54,.26), rgba(11,13,19,.88) 76%); }
.path--med   { --pathimg:url("../img/paths/med.jpg");   --pathtint:linear-gradient(160deg, rgba(51,25,28,.22), rgba(16,10,11,.88) 76%); }
.path--gov   { --pathimg:url("../img/paths/gov.jpg");   --pathtint:linear-gradient(160deg, rgba(42,38,32,.30), rgba(15,13,12,.9) 76%); }
.path--biz   { --pathimg:url("../img/paths/biz.jpg");   --pathtint:linear-gradient(160deg, rgba(58,36,16,.22), rgba(17,11,8,.88) 76%); }
.path--crime { --pathimg:url("../img/paths/crime.jpg"); --pathtint:linear-gradient(160deg, rgba(36,26,44,.24), rgba(13,10,16,.88) 76%); }
.path--work  { --pathimg:url("../img/paths/work.jpg");  --pathtint:linear-gradient(160deg, rgba(61,44,13,.22), rgba(16,12,9,.88) 76%); }
.path--press { --pathimg:url("../img/paths/press.jpg"); --pathtint:linear-gradient(160deg, rgba(18,42,40,.26), rgba(9,14,14,.88) 76%); }

.path__idx{
  position:absolute; top:var(--s5); left:var(--s5);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; color:var(--dim);
}
.path h3{
  font-family:var(--f-display); font-size:1.9rem; line-height:1.05;
  text-transform:uppercase; letter-spacing:.01em;
}
.path p{ margin-top:var(--s3); font-size:.88rem; color:var(--dim); }
.path__tag{
  align-self:flex-start; margin-top:var(--s4);
  font-family:var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); border:1px solid var(--accent-line); border-radius:999px; padding:2px 9px;
}
.rail__hint{ display:block; text-align:center; margin-top:var(--s3); }

/* ---------- 13. LÉPÉSEK ---------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.step{
  position:relative; padding:var(--s6) var(--s5) 0 0;
  border-right:1px solid var(--line);
}
.step:last-child{ border-right:0; }
.step::before{  /* a folyamatot jelző pont a felső vonalon */
  content:''; position:absolute; top:-4px; left:0; width:7px; height:7px;
  border-radius:50%; background:var(--accent);
}
.step__n{
  display:block; font-family:var(--f-display); font-size:2.6rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--line-strong);
  transition:color var(--t), -webkit-text-stroke-color var(--t);
}
.step:hover .step__n{ color:var(--accent); -webkit-text-stroke-color:transparent; }
.step h3{ margin-top:var(--s4); font-size:1.05rem; font-weight:600; }
.step p{ margin-top:var(--s2); font-size:.9rem; color:var(--dim); }

.steps__cta{
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line);
  font-size:.85rem;
}

/* ---------- 14. SZABÁLYOK / GYIK (harmonika) ---------- */
.rules,.faq{ border-top:1px solid var(--line); }
.faq{ columns:2; column-gap:var(--s7); }
.faq .rule{ break-inside:avoid; }

.rule{ border-bottom:1px solid var(--line); }
.rule summary{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s5) 0; cursor:pointer; list-style:none;
  font-size:1.02rem; font-weight:500;
  transition:color var(--t);
}
.rule summary::-webkit-details-marker{ display:none; }
.rule summary:hover{ color:var(--accent); }
.rule__n{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--faint); }

/* Plusz → mínusz ikon, tisztán CSS-ből */
.rule__x{ position:relative; width:11px; height:11px; margin-left:auto; flex:0 0 auto; }
.rule__x::before,.rule__x::after{
  content:''; position:absolute; inset:50% 0 auto; height:1.5px; background:currentColor;
  transform:translateY(-50%); transition:transform var(--t), opacity var(--t);
}
.rule__x::after{ transform:translateY(-50%) rotate(90deg); }
.rule[open] .rule__x::after{ transform:translateY(-50%) rotate(0deg); opacity:0; }
.rule[open] summary{ color:var(--accent); }

.rule__body{ padding:0 var(--s7) var(--s5) var(--s6); }
.rule__body p{ color:var(--dim); font-size:.94rem; max-width:62ch; }
.rule[open] .rule__body{ animation:open .28s ease; }
@keyframes open{ from{ opacity:0; transform:translateY(-6px) } }

/* ---------- 15. CSATLAKOZÁS ---------- */
.join{ position:relative; padding-block:var(--s10); overflow:hidden; text-align:center; }
.join__art{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(255,122,24,.22), transparent 65%),
    linear-gradient(180deg, transparent, rgba(255,122,24,.04));
}
.join__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--s4); }
.join__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem,10vw,8rem); line-height:1; text-transform:uppercase; letter-spacing:-.015em;
}
.join .lead{ text-align:center; }
/* stretch: a connect-gomb felveszi az ikongomb magasságát, így a kettő
   egy tömbként olvasható. Töréskor (mobil) mindkettő a saját magasságát kapja. */
.join__cta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:var(--s3); margin-top:var(--s5);
}
.join__cta code{ font-size:.85rem; }

/* ---------- 16. LÁBLÉC ---------- */
.foot{ border-top:1px solid var(--line); background:var(--surface); padding-top:var(--s8); }
.foot__inner{ display:flex; justify-content:space-between; gap:var(--s8); flex-wrap:wrap; }
.foot__brand .muted{ margin-top:var(--s4); max-width:34ch; font-size:.9rem; }
.foot__links{ display:flex; gap:var(--s8); }
.foot__links div{ display:flex; flex-direction:column; gap:var(--s3); }
.foot__links .micro{ margin-bottom:var(--s1); }
.foot__links a{ font-size:.9rem; color:var(--dim); transition:color var(--t); }
.foot__links a:hover{ color:var(--accent); }
.foot__bar{
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s8); padding-block:var(--s5); border-top:1px solid var(--line);
  font-size:.78rem;
}

/* ---------- 16b. KÉPFORRÁS OLDAL ---------- */
.credits{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:var(--s5); margin-top:var(--s8);
  border-top:1px solid var(--line); padding-top:var(--s6);
}
.credit h2{
  font-family:var(--f-display); font-size:1.3rem; line-height:1.05;
  text-transform:uppercase; letter-spacing:.02em; color:var(--accent);
}
.credit dl{ margin-top:var(--s3); display:grid; gap:var(--s2); }
.credit dl > div{ display:grid; grid-template-columns:74px 1fr; gap:var(--s3); font-size:.86rem; }
.credit dt{ color:var(--faint); font-family:var(--f-mono); font-size:.7rem;
            text-transform:uppercase; letter-spacing:.1em; padding-top:3px; }
.credit dd{ margin:0; color:var(--dim); overflow-wrap:anywhere; }
.credit a{ color:var(--text); border-bottom:1px solid var(--accent-line); transition:color var(--t); }
.credit a:hover{ color:var(--accent); }

.notice{
  margin-top:var(--s8); padding:var(--s5);
  border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--r); background:var(--surface);
}
.notice p + p{ margin-top:var(--s3); }
.notice .micro{ margin-bottom:var(--s3); }

/* ---------- 16c. BOLT ---------- */
.shop{ display:grid; grid-template-columns:1fr 320px; gap:var(--s7); margin-top:var(--s8); align-items:start; }
.shop[hidden]{ display:none; }
.shop__status{ color:var(--dim); font-size:.92rem; padding:var(--s6) 0; }
.shop__status code{ color:var(--text); }

.pkgcsoport + .pkgcsoport{ margin-top:var(--s8); }
.pkgracs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:var(--s4); margin-top:var(--s4);
}

/* Csomagkártya — hajszálvonal, éles sarok, árnyék nélkül */
.pkg{
  position:relative; display:flex; flex-direction:column;
  padding:var(--s5); border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); transition:border-color var(--t), background var(--t);
}
.pkg:hover{ border-color:var(--line-strong); }
.pkg--kiemelt{ border-color:var(--accent-line); background:linear-gradient(180deg, var(--accent-soft), var(--surface) 60%); }
.pkg__jel{
  position:absolute; top:-9px; left:var(--s5);
  font-family:var(--f-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.14em;
  background:var(--accent); color:#12100e; padding:2px 8px; border-radius:999px;
}
.pkg__nev{ font-size:1.02rem; font-weight:600; }
.pkg__ar{ display:flex; align-items:baseline; gap:var(--s2); margin-top:var(--s3); }
.pkg__ar strong{ font-family:var(--f-display); font-size:1.9rem; line-height:1.05; font-weight:400; }
.pkg__ido{ font-size:.78rem; color:var(--faint); }
.pkg__leiras{ margin-top:var(--s3); font-size:.88rem; color:var(--dim); }
.pkg__lista{ margin-top:var(--s4); display:grid; gap:6px; }
.pkg__lista li{
  position:relative; padding-left:16px; font-size:.84rem; color:var(--dim);
}
.pkg__lista li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.pkg__gomb{ margin-top:var(--s5); width:100%; }

/* Kosár */
.cart{
  position:sticky; top:110px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--elevated); padding:var(--s5);
}
.cart__top{ display:flex; align-items:center; justify-content:space-between; }
.cart__db{ font-family:var(--f-mono); font-size:.72rem; color:var(--faint); }
.cart__lista{ margin-top:var(--s4); display:grid; gap:var(--s3); }
.cart__ures{ font-size:.86rem; color:var(--faint); padding:var(--s4) 0; }
.cart__sor{ display:flex; align-items:center; gap:var(--s3); justify-content:space-between; }
.cart__info{ display:grid; min-width:0; }
.cart__nev{ font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart__egyseg{ font-family:var(--f-mono); font-size:.68rem; color:var(--faint); }
.cart__db-vez{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.cart__db-vez button{
  width:24px; height:24px; border:1px solid var(--line); border-radius:var(--r);
  color:var(--dim); font-size:.95rem; line-height:1;
  transition:color var(--t), border-color var(--t);
}
.cart__db-vez button:hover{ color:var(--accent); border-color:var(--accent-line); }
.cart__db-vez span{ min-width:22px; text-align:center; font-family:var(--f-mono); font-size:.8rem; }

.cart__ossz{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line);
  font-size:.88rem;
}
.cart__ossz strong{ font-family:var(--f-display); font-size:1.5rem; font-weight:400; }
.cart__jegyzet{ display:block; margin-top:var(--s4); }
.cart__jegyzet textarea{
  width:100%; margin-top:var(--s2); padding:var(--s3);
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--f-body); font-size:.84rem; resize:vertical;
}
.cart__jegyzet textarea:focus{ outline:none; border-color:var(--accent); }
#cartAkcio{ margin-top:var(--s4); }

/* Fizetési mód választó */
.fizmod{ margin-bottom:var(--s4); }
.fizmod .micro{ display:block; margin-bottom:var(--s2); }
.fizmod__sor{
  display:grid; grid-template-columns:auto 1fr; gap:2px var(--s3);
  align-items:center; padding:var(--s3);
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  transition:border-color var(--t), background var(--t);
}
.fizmod__sor + .fizmod__sor{ margin-top:6px; }
.fizmod__sor:hover{ border-color:var(--line-strong); }
.fizmod__sor.is-valasztva{ border-color:var(--accent-line); background:var(--accent-soft); }
.fizmod__sor input{ grid-row:1 / 3; accent-color:var(--accent); width:15px; height:15px; }
.fizmod__nev{ font-size:.86rem; font-weight:500; display:flex; align-items:center; gap:var(--s2); }
.fizmod__alcim{ font-size:.72rem; color:var(--faint); }
.fizmod__teszt{
  font-family:var(--f-mono); font-style:normal; font-size:.58rem;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); border:1px solid var(--accent-line);
  border-radius:999px; padding:1px 6px;
}
/* Discord név — csak Discordos egyeztetésnél jelenik meg; a jegyzet mezővel azonos nyelven */
.fizmod__extra{ display:block; margin-top:var(--s3); }
.fizmod__extra[hidden]{ display:none; }
.fizmod__extra input{
  width:100%; margin-top:var(--s2); padding:var(--s3);
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--f-body); font-size:.84rem;
}
.fizmod__extra input:focus{ outline:none; border-color:var(--accent); }
.fizmod__extra .fizmod__alcim{ display:block; margin-top:var(--s2); }
.cart__apro{ margin-top:var(--s3); font-size:.74rem; }

/* Visszaigazolás */
.visszaig{ margin-top:var(--s9); }
.visszaig[hidden]{ display:none; }
.visszaig__doboz{
  margin-top:var(--s6); padding:var(--s6);
  border:1px solid var(--accent-line); border-left:2px solid var(--accent);
  border-radius:var(--r); background:var(--surface);
}
.fizet{ display:grid; gap:var(--s3); }
.fizet > div{ display:grid; grid-template-columns:190px 1fr; gap:var(--s4); align-items:baseline; }
.fizet dt{ font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase;
           letter-spacing:.1em; color:var(--faint); }
.fizet dd{ margin:0; overflow-wrap:anywhere; }
.fizet__ref{ color:var(--accent); font-size:1rem; letter-spacing:.06em; }
.fizet__fig{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); font-size:.84rem; }
.visszaig__gombok{ margin-top:var(--s6); }

/* Saját rendelések */
.sajatrend{ margin-top:var(--s9); }
.sajatrend[hidden]{ display:none; }
.rend{ border-top:1px solid var(--line); padding:var(--s5) 0; }
.rend__fej{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.rend__ref{ color:var(--accent); font-size:.88rem; letter-spacing:.05em; }
.rend__datum{ font-size:.8rem; color:var(--faint); }
.rend__ar{ margin-left:auto; font-family:var(--f-display); font-size:1.2rem; font-weight:400; }
.rend__tetelek{ margin-top:var(--s3); display:grid; gap:4px; }
.rend__tetelek li{ font-size:.85rem; color:var(--dim); }
.rend__tetelek span{ color:var(--faint); font-family:var(--f-mono); font-size:.75rem; }
.rend__akcio{ margin-top:var(--s4); font-size:.82rem; }

/* Kuka — halvány alapon, csak hoverre válik pirosra, hogy ne hívja
   magára a figyelmet, de egyértelmű legyen a következménye */
.rend__kuka{
  display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--r); color:var(--faint);
  transition:color var(--t), border-color var(--t), background var(--t);
}
.rend__kuka:hover{
  color:#ff6b5e; border-color:rgba(255,107,94,.4); background:rgba(255,107,94,.08);
}
.rend__kuka:disabled{ opacity:.5; cursor:default; }

.rend__megerosit{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s4); padding:var(--s3) var(--s4);
  border:1px solid rgba(255,107,94,.35); border-left:2px solid #ff6b5e;
  border-radius:var(--r); background:rgba(255,107,94,.06);
  font-size:.85rem;
}
.rend__megerosit span{ margin-right:auto; }

/* Nincs beállított fizetési mód */
.fizhiany{
  padding:var(--s4); border:1px solid var(--accent-line); border-left:2px solid var(--accent);
  border-radius:var(--r); background:var(--accent-soft);
}
.fizhiany p{ font-size:.84rem; color:var(--dim); }
.fizhiany .micro{ display:block; margin-bottom:var(--s2); }
.fizhiany code{ color:var(--text); font-size:.78rem; }

.st--var { color:var(--accent);  border-color:var(--accent-line); background:var(--accent-soft); }
.st--ok  { color:#7fb2ff; border-color:rgba(127,178,255,.3); background:rgba(127,178,255,.08); }
.st--kesz{ color:var(--online); border-color:rgba(61,220,132,.3); background:rgba(61,220,132,.08); }
.st--nem { color:var(--faint); }

/* Admin */
.adminszuro{ display:flex; gap:var(--s5); flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:var(--s3); }
.adminszuro a{ font-size:.86rem; color:var(--dim); padding-bottom:var(--s2); position:relative; transition:color var(--t); }
.adminszuro a:hover, .adminszuro a.is-active{ color:var(--text); }
.adminszuro a.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-13px; height:1px; background:var(--accent);
}
.adminakcio{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4); }

@media (max-width:900px){
  .shop{ grid-template-columns:1fr; }
  .cart{ position:static; }
  .fizet > div{ grid-template-columns:1fr; gap:2px; }
}

/* ---------- 17. TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:var(--s6); z-index:120;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--elevated); border:1px solid var(--accent-line); border-radius:var(--r);
  padding:var(--s3) var(--s5); font-size:.85rem;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------- 17b. FEJLESZTŐI JELZÉS ----------
   Csak file:// alól jelenik meg (a JS teszi ki), éles kiszolgálón soha. */
.devhint{
  position:fixed; left:var(--s5); bottom:var(--s5); z-index:120;
  display:flex; flex-direction:column; gap:var(--s1);
  max-width:340px; padding:var(--s4) var(--s7) var(--s4) var(--s4);
  background:var(--elevated); border:1px solid var(--accent-line);
  border-left:2px solid var(--accent); border-radius:var(--r);
  font-size:.82rem; line-height:1.5; color:var(--dim);
}
.devhint strong{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--accent);
}
.devhint code{ color:var(--text); font-size:.78rem; }
.devhint button{
  position:absolute; top:var(--s2); right:var(--s2);
  width:24px; height:24px; border-radius:var(--r);
  color:var(--faint); font-size:1.1rem; line-height:1;
  transition:color var(--t), background var(--t);
}
.devhint button:hover{ color:var(--text); background:rgba(255,255,255,.06); }

@media (max-width:560px){
  .devhint{ left:var(--s4); right:var(--s4); bottom:var(--s4); max-width:none; }
}

/* ---------- 18. SCROLL REVEAL ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); }
[data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---------- 19. RESPONSZÍV ---------- */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; align-items:start; gap:var(--s7); }
  .statuscard{ width:100%; max-width:420px; }
  .split{ grid-template-columns:1fr; gap:var(--s7); }
  .split__aside{ position:static; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2){ border-right:0; }
  .step:nth-child(-n+2){ padding-bottom:var(--s6); border-bottom:1px solid var(--line); }
}
@media (max-width:860px){
  /* A fejlécben csak a logó és a menügomb marad — a CTA duplázás
     felesleges volt, a mobil menü alján úgyis ott a teljes szélességű gomb. */
  .nav__links,.nav__actions{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .nav__inner{ gap:var(--s4); }
  .numbers{ grid-template-columns:repeat(2,1fr); gap:var(--s6) 0; }
  .numbers__item:nth-child(odd){ border-left:0; padding-left:0; }
  .faq{ columns:1; }
  .sec__head{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .quote p{ max-width:none; }
}
@media (max-width:560px){
  .sec{ padding-block:var(--s8); }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:var(--s5); }
  .step:last-child{ border-bottom:0; }
  .numbers{ grid-template-columns:1fr; }
  .numbers__item{ border-left:0; padding-left:0; }
  .hero__ghost{ font-size:20vw; }
  .hero__map{ background-position:60% 30%; opacity:.6; }
  .rule__body{ padding-inline:0 var(--s4); }
  .btn{ width:100%; }
  .btn--icon{ width:80px; }   /* az ikongomb mobilon se nyúljon szét */
  .rail__arrow{ width:40px; height:40px; }
  .rail__arrow--prev{ left:var(--s3); }
  .rail__arrow--next{ right:var(--s3); }
  .hero__cta,.join__cta{ width:100%; }
}

/* ---------- 20. MOZGÁSCSÖKKENTÉS ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  /* A parázs megállítva csak pöttyök lennének a képen — inkább ne legyen ott. */
  .hero__parazs{ display:none; }
}

/* ---------- 21. NYELVVÁLASZTÓ ----------
   Natív <select>, hogy mobilon és billentyűzettel is működjön; a kinézet a
   fejléc mono „címkéihez” (pulse, micro) igazodik. A nyíl saját rajz. */
.lang{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
.lang__sel{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); background:transparent;
  border:1px solid var(--line); border-radius:var(--r);
  padding:6px 26px 6px 10px; cursor:pointer; line-height:1.2;
  transition:color var(--t), border-color var(--t);
}
.lang__sel:hover,.lang__sel:focus-visible{ color:var(--text); border-color:var(--line-strong); }
.lang__sel option{ background:var(--elevated); color:var(--text); text-transform:none; letter-spacing:0; }
.lang::after{
  content:''; position:absolute; right:11px; top:50%; width:5px; height:5px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg); color:var(--faint); pointer-events:none;
}

/* A mobil menüben teljes szélességű sor, felirattal */
.mobilemenu__lang{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
}
.mobilemenu__lang .lang__sel{ font-size:.8rem; padding-block:8px; min-width:150px; }

/* Szöveges nyelvsor a szerveroldali oldalakhoz (fizetés utáni oldal) */
.langlinks{ display:inline-flex; gap:2px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; }
.langlinks a{
  padding:5px 8px; border-radius:var(--r); color:var(--faint);
  transition:color var(--t), background var(--t);
}
.langlinks a:hover{ color:var(--text); }
.langlinks a.is-active{ color:var(--accent); background:var(--accent-soft); }

/* A képek-forrása és a fizetési oldal fejlécében a nyelvválasztó és a
   vissza gomb mobilon is maradjon látható (a fő nav__actions ott elrejtődik) */
.nav__actions.is-always{ display:flex; }
@media (max-width:560px){
  .nav__actions .btn{ width:auto; }
}

/* ---------- 17. FIÓK OLDAL (regisztracio.html) ----------
   Ugyanaz a doboz-nyelv, mint a boltban: sötét felület, egy hajszálvonal,
   és narancs csak ott, ahol tényleg jelent valamit. */
.fiokoldal{ max-width:620px; }
.fiokoldal .notice{ margin-top:var(--s6); }

.fiokdoboz{
  margin-top:var(--s6); padding:var(--s6);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface);
}
.fiokdoboz[hidden]{ display:none; }
.fiokdoboz .muted{ margin-top:var(--s3); font-size:.9rem; }
.fiokdoboz .btn{ margin-top:var(--s5); }

.h3{ font-family:var(--f-body); font-size:1.15rem; font-weight:600; letter-spacing:-.005em; }

/* Fülek: regisztráció / belépés */
.tabok{ display:flex; gap:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s6); }
.tab{
  position:relative; padding:0 0 var(--s3); background:none; border:0;
  font-family:var(--f-body); font-size:.92rem; font-weight:500;
  color:var(--faint); cursor:pointer; transition:color var(--t);
}
.tab::after{
  content:''; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
  background:var(--accent); transition:right var(--t);
}
.tab:hover{ color:var(--dim); }
.tab.is-active{ color:var(--text); }
.tab.is-active::after{ right:0; }

/* Űrlap */
.urlap{ display:grid; gap:var(--s4); }
.urlap[hidden]{ display:none; }
.urlap__sor{ display:block; }
.urlap__sor .micro{ display:block; margin-bottom:var(--s2); }
.urlap__sor input{
  width:100%; padding:var(--s3);
  background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--f-body); font-size:.9rem;
  transition:border-color var(--t);
}
.urlap__sor input:hover{ border-color:var(--line-strong); }
.urlap__sor input:focus{ outline:none; border-color:var(--accent); }
.urlap__sor input:autofill{ box-shadow:0 0 0 40px var(--bg) inset; -webkit-text-fill-color:var(--text); }
.urlap__ketto{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }

.urlap__pipa{ display:flex; align-items:flex-start; gap:var(--s3); font-size:.84rem; color:var(--dim); cursor:pointer; }
.urlap__pipa input{ margin-top:2px; accent-color:var(--accent); width:15px; height:15px; flex:0 0 auto; }
.urlap__pipa a{ color:var(--text); border-bottom:1px solid var(--accent-line); }
.urlap__pipa a:hover{ color:var(--accent); }

.urlap__hiba{
  padding:var(--s3); font-size:.84rem; color:#ffb4a2;
  border:1px solid rgba(255,90,60,.35); border-left:2px solid #ff5a3c;
  border-radius:var(--r); background:rgba(255,90,60,.08);
}
.urlap__hiba[hidden]{ display:none; }
.urlap__apro{ margin-top:var(--s3); font-size:.78rem; color:var(--faint); }
.urlap .btn{ margin-top:var(--s2); }

/* Szövegszerű gomb (kijelentkezés a Steam-lépésből) */
.linkgomb{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--dim); border-bottom:1px solid var(--line-strong);
  transition:color var(--t), border-color var(--t);
}
.linkgomb:hover{ color:var(--accent); border-color:var(--accent-line); }
.linkgomb:disabled{ opacity:.5; cursor:default; }

.fiokdoboz__gombok{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5); }
.fiokdoboz__gombok .btn{ margin-top:0; }

@media (max-width:560px){
  .fiokdoboz{ padding:var(--s5); }
  .urlap__ketto{ grid-template-columns:1fr; }
  .fiokdoboz__gombok .btn{ width:100%; justify-content:center; }
}

/* A fejléc kijelentkezett állapota: Regisztráció + Belépés egymás mellett */
.auth__reg{ white-space:nowrap; }
.auth--menu .auth__reg,
.auth--menu .auth__login{ flex:1; justify-content:center; padding-block:var(--s3); }

/* 1300 px alatt a szöveges menü a burger alá költözik, de a fiók-gombok
   maradnak: a Regisztráció ne essen ki a fejlécből. A határ azért ilyen
   magas, mert a fejléc belseje 1240-nél megáll — az alatt már a hét
   menüpont + a játékosszámláló + a három gomb nem fér el egy sorban. */
@media (max-width:1300px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__inner{ gap:var(--s4); }
  .nav__actions{ margin-left:auto; gap:var(--s3); }
}

/* A „Csatlakozás” szekció fiók-blokkja: a Discord/FiveM ikonok alatt,
   vékony elválasztóval — látszik, hogy külön lépés, nem harmadik ikon. */
.join__fiok{
  margin-top:var(--s7); padding-top:var(--s6);
  border-top:1px solid var(--line);
  max-width:560px; width:100%;
}
.join__fiok .muted{ margin-top:var(--s3); font-size:.92rem; }
.join__fiokgombok{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); margin-top:var(--s5); }
@media (max-width:560px){
  .join__fiokgombok .btn{ width:100%; justify-content:center; }
}

/* ---------- 22. RENDSZEREK OLDAL (rendszerek.html) ----------
   Dokumentáció, nem marketing: a szem a bal oldali mono címkéken fut le,
   a magyarázat a jobb hasábban ül. Kártyák helyett hajszálvonal, mint
   a szabályzatnál. */

.rsznav{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);
  margin-top:var(--s6); padding-top:var(--s6);
  border-top:1px solid var(--line);
}
.rsznav a{
  display:inline-flex; align-items:baseline; gap:var(--s2);
  padding:var(--s2) var(--s3);
  border:1px solid var(--line); border-radius:var(--r);
  font-size:.86rem; color:var(--dim);
  transition:color var(--t), border-color var(--t), background var(--t);
}
.rsznav a:hover{ color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); }
.rsznav b{ font-family:var(--f-mono); font-size:.68rem; font-weight:400; color:var(--faint); }
.rsznav a:hover b{ color:var(--accent); }

.rszlista{ margin-top:var(--s8); border-top:1px solid var(--line); }

/* A sorszám kiszélesedő helye; ennyivel beljebb kezdődik a cím és alatta
   a címkeoszlop is, hogy egy vonalban fussanak. */
.rsz{ --behuzas:40px; }

.rsz{
  padding-block:var(--s7);
  border-bottom:1px solid var(--line);
  scroll-margin-top:110px;            /* a fix fejléc ne vágja le a címet */
}
.rsz__fej{ display:flex; align-items:flex-start; gap:0; }
.rsz__idx{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  color:var(--accent); padding-top:6px; flex:0 0 var(--behuzas);
}
.rsz__cim{ flex:1 1 auto; }
.rsz__cim h2{
  font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:400; letter-spacing:.01em; line-height:1.1;
  text-transform:uppercase;
}
.rsz__cim .muted{ margin-top:var(--s3); font-size:.95rem; max-width:68ch; }
.rsz__res{
  flex:0 0 auto; font-size:.72rem; color:var(--faint);
  border:1px solid var(--line); border-radius:var(--r);
  padding:3px var(--s2);
}

.rsz__adat{ margin-top:var(--s6); margin-left:var(--behuzas); display:grid; gap:0; }
.rsz__adat > div{
  display:grid; grid-template-columns:190px 1fr; gap:var(--s5);
  padding-block:var(--s3);
}
.rsz__adat > div + div{ border-top:1px solid rgba(255,255,255,.05); }
.rsz__adat dt{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); padding-top:4px;
}
.rsz__adat dd{ color:var(--dim); font-size:.94rem; max-width:74ch; }
.rsz__adat code{
  font-size:.86rem; color:var(--accent-warm);
  background:var(--accent-soft); border-radius:2px; padding:1px 5px;
}
kbd{
  font-family:var(--f-mono); font-size:.78rem; color:var(--text);
  border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:3px; padding:0 5px; background:var(--elevated);
}

@media (max-width:860px){
  .rsz{ --behuzas:0px; }
  .rsz__fej{ flex-wrap:wrap; }
  .rsz__idx{ flex-basis:100%; padding-bottom:var(--s2); }
  .rsz__res{ order:3; }
  .rsz__adat > div{ grid-template-columns:1fr; gap:var(--s1); padding-block:var(--s4); }
}

/* ---------- 23. KERESŐ ASSZISZTENS ----------
   Jobb alsó sarokban ül, a lap fölött. A panel ugyanabból a hajszálvonalas
   nyelvből épül, mint a státuszkártya — nem „chat widget”, hanem az oldal
   része. Mobilon teljes szélességet kap. */

.asz{ position:fixed; right:var(--s5); bottom:var(--s5); z-index:120; }

.asz__nyito{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s5);
  background:var(--accent); color:#0b0a09;
  border-radius:var(--r); font-weight:600; font-size:.9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform var(--t), background var(--t);
}
.asz__nyito:hover{ background:var(--accent-warm); transform:translateY(-1px); }
.asz.is-nyitva .asz__nyito{ display:none; }

/* Kérdőjel, tisztán CSS-ből — nem kell hozzá ikonkészlet */
.asz__nyitoJel{
  width:18px; height:18px; flex:0 0 auto; position:relative;
  border:1.5px solid currentColor; border-radius:50%;
}
.asz__nyitoJel::before{
  content:'?'; position:absolute; inset:0;
  display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1;
}

.asz__panel{
  width:380px; max-height:min(620px, calc(100svh - 120px));
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--elevated), var(--surface));
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
.asz__panel[hidden]{ display:none; }

.asz__fej{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
  padding:var(--s5); border-bottom:1px solid var(--line);
}
.asz__alcim{ margin-top:var(--s2); font-size:.86rem; color:var(--dim); max-width:30ch; }

.asz__zar{ position:relative; width:22px; height:22px; flex:0 0 auto; color:var(--dim); }
.asz__zar::before,.asz__zar::after{
  content:''; position:absolute; left:3px; right:3px; top:50%; height:1.5px;
  background:currentColor;
}
.asz__zar::before{ transform:rotate(45deg); }
.asz__zar::after{ transform:rotate(-45deg); }
.asz__zar:hover{ color:var(--text); }

.asz__lista{
  flex:1 1 auto; overflow-y:auto; padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s4);
  scrollbar-width:thin;
}
.asz__sor{ display:flex; }
.asz__sor--en{ justify-content:flex-end; }
.asz__sor--en .asz__buborek{
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:var(--text);
}
.asz__buborek{
  padding:var(--s3) var(--s4); border-radius:var(--r);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  font-size:.92rem; line-height:1.55; max-width:30ch;
}
.asz__valasz{ display:flex; flex-direction:column; gap:var(--s3); max-width:100%; }

.asz__kartya{
  padding:var(--s4); border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--r); background:rgba(255,255,255,.03);
}
.asz__kartya h4{ margin:0 0 var(--s2); font-size:.95rem; font-weight:600; }
.asz__kartya p{ font-size:.9rem; line-height:1.6; color:var(--dim); }

.asz__link{
  display:inline-block; margin-top:var(--s3);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--accent-line); padding-bottom:2px;
}
.asz__link:hover{ color:var(--accent-warm); }

.asz__micro{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.asz__tovabbi{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.asz__javaslat{
  padding:var(--s2) var(--s3); font-size:.84rem; color:var(--dim);
  border:1px solid var(--line); border-radius:var(--r);
  transition:color var(--t), border-color var(--t), background var(--t);
  text-align:left;
}
.asz__javaslat:hover{ color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); }

.asz__urlap{
  display:flex; gap:var(--s2); padding:var(--s4) var(--s5) var(--s5);
  border-top:1px solid var(--line);
}
.asz__mezo{
  flex:1 1 auto; min-width:0; padding:var(--s3) var(--s4);
  background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  font:inherit; font-size:.92rem;
}
.asz__mezo:focus{ outline:none; border-color:var(--accent-line); }
.asz__mezo::placeholder{ color:var(--faint); }

/* Nyíl jobbra, CSS-ből */
.asz__kuld{
  position:relative; width:44px; flex:0 0 auto;
  background:var(--accent); border-radius:var(--r);
}
.asz__kuld::before{
  content:''; position:absolute; inset:0; margin:auto;
  width:9px; height:9px; border:1.5px solid #0b0a09;
  border-left:0; border-bottom:0; transform:rotate(45deg) translate(-2px,2px);
}
.asz__kuld:hover{ background:var(--accent-warm); }

@media (max-width:560px){
  .asz{ right:var(--s3); bottom:var(--s3); left:var(--s3); }
  .asz__panel{ width:auto; max-height:calc(100svh - 96px); }
  .asz__nyito{ width:100%; justify-content:center; }
}