/* ============================================================================
RentMySite (RMS) — a BTS Systems Group havidíjas weboldal-szolgáltatásának stílusa
----------------------------------------------------------------------------
ALMÁRKA, NEM ÜGYFÉL-SITE (2026-09-19, Benjamin: „a BTS stílusát viszi tovább … mégis egy külön
szolgáltatás”). A „két site sosem hasonlíthat” gyári szabálytól SZÁNDÉKOSAN térünk el: a BTS-DNS
átjön (Sora · Plus Jakarta Sans · IBM Plex Mono, sötét alap, üvegkártyák, mono kicker, a matt
fekete robot), de az RMS-nek SAJÁT színe, jele és motívuma van:
· szín: ERŐS, a BTS intenzitásával (2026-09-19 este, Benjamin: „legyen inkább az egész erősebb színekkel,
ahogy a BTS, és a narancs legyen az alapértelmezett” — „nem kell, hogy visszafogott legyen … a BTS-t
kövesse, ott sem az”). Az alap az erős narancs; a színválasztóban még élénk lime, erős kék és pink. A
főcím második sora, a világító főgomb csillanással, a gyulladó címkék, a gyűrű és a robot fénye mind a
színt viszi. Előzmény: az első kör neon lime-ja délután lágyítva (#B8D96B), este erősre cserélve.
· jel: a BTS-jel inverze — sötét csempe, NYITOTT színes hatszög (a havi ciklus), a résben állapot-LED.
· motívum: a havi ciklus — 30 szegmens, a hónap minden napja; a mai nap ég. ⛔ DÍSZ: százalékot,
üzemidőt, SLA-t nem állít.
⚠ VILÁGOS HÁTON az élénk szín SZÖVEGNEK nem elég sötét — ott az `--acc-mely` megy (mind a négy színnél ≥ 5,7:1).
A tervezői brief: docs/rentmysite-arculat.md. No-build, vanilla; külső kérés nincs.
============================================================================ */
/* ---------- 0. BETŰK — a BTS woff2-jei (a Sora és a Jakarta változtatható betű) ---------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/sora-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/sora-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- 1. TOKENEK — sötét az alap (a BTS arca is a sötét), világos a kapcsolóval ---------- */
:root{
color-scheme:dark;
--hat:#07090E; --hat-2:#0A0D14; --felulet:#0F131C; --felulet-2:#151A25; --felulet-3:#1C2230;
--ink:#EFF2F8; --ink-2:#C9D0DD; --ink-dim:#98A2B8; --halk:#5F6980; --meta:#7C8699;
--vonal:rgba(255,255,255,.09); --vonal-2:rgba(255,255,255,.055);
--uveg:rgba(255,255,255,.035); --uveg-2:rgba(255,255,255,.06);
--arny-1:0 2px 8px rgba(0,0,0,.4); --arny-2:0 24px 60px -30px rgba(0,0,0,.95);
--r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
--maxw:1240px;
--f-display:'Sora',system-ui,-apple-system,sans-serif;
--f-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
--f-mono:'IBM Plex Mono',ui-monospace,monospace;
--ease:cubic-bezier(.16,1,.3,1);
--fejlec-m:72px;
}
:root[data-theme="light"]{
color-scheme:light;
--hat:#FAF8F4; --hat-2:#F2EEE6; --felulet:#FFFFFF; --felulet-2:#F7F4EE; --felulet-3:#EFEBE3;
--ink:#15171D; --ink-2:#343945; --ink-dim:#5F6574; --halk:#9A9FAB; --meta:#6B7180;
--vonal:rgba(21,23,29,.09); --vonal-2:rgba(21,23,29,.055);
--uveg:rgba(255,255,255,.75); --uveg-2:rgba(255,255,255,.92);
--arny-1:0 1px 2px rgba(21,23,29,.04),0 10px 26px -16px rgba(21,23,29,.16);
--arny-2:0 2px 6px rgba(21,23,29,.05),0 34px 64px -32px rgba(21,23,29,.3);
}
/* A „ÉJSZAKA” FEJEZETEK (hős, Kezdjük el, lábléc) mindkét módban sötétek — mint a bts.hu-n. */
.ej{
color-scheme:dark;
--hat:#07090E; --hat-2:#0A0D14; --felulet:#0F131C; --felulet-2:#151A25; --felulet-3:#1C2230;
--ink:#EFF2F8; --ink-2:#C9D0DD; --ink-dim:#98A2B8; --halk:#5F6980; --meta:#7C8699;
--vonal:rgba(255,255,255,.09); --vonal-2:rgba(255,255,255,.055);
--uveg:rgba(255,255,255,.035); --uveg-2:rgba(255,255,255,.06);
--acc-mely:var(--acc-vil); --grad-lt:var(--grad);
}
/* AZ RMS MÁRKA — az ALAP az erős narancs (2026-09-19 este, Benjamin). `--acc-vil`: akcent-szöveg sötét háton ·
`--acc-mely`: akcent-szöveg világos háton · `--grad`: sötét háton · `--grad-lt`: világos háton · `--btn`: főgomb.
A BTS szolgáltatás-színeinek szerkezete: két végpontú, élénk gradiens. Kontraszt (WCAG): az `--acc` 7,6:1 és az
`--acc-vil` 9,5:1 a #07090E-n · az `--acc-mely` 5,7:1 a #FAF8F4-en · a gomb szövege a gombon ≥ 7,4:1. */
[data-brand="rms"]{--acc:#FF7A1A;--acc-2:#FFB054;--acc-rgb:255,122,26;--acc-ink:#1A0B02;--acc-vil:#FF9A4D;--acc-mely:#A84300;
--grad:linear-gradient(118deg,#FF7A1A,#FFB054);--grad-lt:linear-gradient(118deg,#A84300,#BF4C00);
--btn:linear-gradient(118deg,#FF7A1A,#FFA24A)}
/* A SZÍNVÁLASZTÓ (2026-09-19). Az alap a narancs (fent, a márka-token maga); a többi a ``
alatt írja felül a márka-tokeneket — minden elem a tokenekből dolgozik, a robotokat a JS cseréli (a
`bat/rms-robotok.py --mind` gyártja őket ugyanezekből a hexákból). Sorrend (Benjamin és a külső vélemény):
narancs · lime · kék · pink. Kontraszt (WCAG): az `--acc-vil` a #07090E-n ≥ 9,2:1 · az `--acc-mely` a #FAF8F4-en
≥ 5,7:1 · a gomb szövege a gombon ≥ 4,8:1.
⚠ A kék `--acc`-ja sötét háton 4,4:1 — kitöltésnek és nagy betűnek jó, apró szövegnek ott a `--acc-vil` megy.
A pink (334°) 11°-ra van a BTS AI-szolgáltatás színétől (#F0139B, 323°) — ismert; Benjamin 2026-09-19: a pink is
marad („ha valaki akarja, megnézi”), és a választó a látogatóknak marad. */
html[data-szin="lime"]{--acc:#B8F23A;--acc-2:#E2FF9A;--acc-rgb:184,242,58;--acc-ink:#0E1402;--acc-vil:#D4FA7A;--acc-mely:#4A6A00;
--grad:linear-gradient(118deg,#A8E62E,#E2FF9A);--grad-lt:linear-gradient(118deg,#3F5C00,#4F7300);
--btn:linear-gradient(118deg,#B8F23A,#D8FA86)}
html[data-szin="kek"]{--acc:#2F6BFF;--acc-2:#8CB2FF;--acc-rgb:47,107,255;--acc-ink:#FFFFFF;--acc-vil:#8DB0FF;--acc-mely:#1D4ED8;
--grad:linear-gradient(118deg,#5B8DFF,#A9C6FF);--grad-lt:linear-gradient(118deg,#1D4ED8,#2A56DC);
--btn:linear-gradient(118deg,#1F5CE8,#2B66F5)}
html[data-szin="pink"]{--acc:#FF4F9A;--acc-2:#FF9CC8;--acc-rgb:255,79,154;--acc-ink:#2A0716;--acc-vil:#FF8CBE;--acc-mely:#B0125A;
--grad:linear-gradient(118deg,#FF4F9A,#FF9CC8);--grad-lt:linear-gradient(118deg,#A10F52,#B8146A);
--btn:linear-gradient(118deg,#FF4F9A,#FF7DB6)}
/* MODERN — kék-lila-magenta (Benjamin, 2026-10-29), és 10-29 óta a LAP ALAPÉRTELMEZETT színe (a fej-szkript teszi rá a
`data-szin="modern"`-t; a narancs a márka-token alapja maradt, JS nélkül az látszik): háromszínű átmenet, a középpont (a lila) a token. Kontraszt: az `--acc-vil`
a #07090E-n ≈ 8,7:1 · az `--acc-mely` fehéren ≈ 8,7:1 · a fehér gombszöveg a gomb mindhárom pontján ≥ 4,6:1. */
html[data-szin="modern"]{--acc:#8B5CF6;--acc-2:#E879F9;--acc-rgb:139,92,246;--acc-ink:#FFFFFF;--acc-vil:#B9A6FF;--acc-mely:#6D28D9;
--grad:linear-gradient(118deg,#5B7BFF,#8B5CF6 48%,#E05ADC);--grad-lt:linear-gradient(118deg,#3B4FD8,#6D28D9 50%,#A21CAF);
--btn:linear-gradient(118deg,#4F6BF5,#7C3AED 50%,#C026D3)}
/* A BTS arany anyamárka — CSAK a „Mögöttünk a BTS” sávban és az ajánló-sor kis hatszögén. */
[data-brand="bts"]{--acc:#C69A4E;--acc-2:#F0DCAC;--acc-rgb:198,154,78;--acc-ink:#17120A;--acc-vil:#EBD5A8;--acc-mely:#7A5A1E;
--grad:linear-gradient(118deg,#B8873F 0%,#D9AE60 26%,#F4E3B8 50%,#D0A153 74%,#B8873F 100%);
--grad-lt:linear-gradient(100deg,#5E441A 0%,#8A6528 40%,#A8823A 66%,#6E4F1E 100%);
--btn:linear-gradient(133deg,#FFF7E6 0%,#F0DCAC 26%,#D0A153 52%,#B8873F 66%,#FBEFD2 100%)}
:root:not([data-theme="light"]) [data-brand],:root:not([data-theme="light"])[data-brand]{--acc-mely:var(--acc-vil);--grad-lt:var(--grad)}
/* ---------- 2. BÁZIS ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--fejlec-m) + 16px)}
/* görgetősáv a választott színben (10-29, mint az adminban): sötétben az élénk `--acc`, világosban a mély árnyalat */
*{scrollbar-width:thin;scrollbar-color:var(--acc) var(--hat)}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:var(--hat)}
*::-webkit-scrollbar-thumb{background:var(--acc);border-radius:8px;border:2px solid var(--hat)}
*::-webkit-scrollbar-thumb:hover{background:var(--acc-2)}
:root[data-theme="light"] *{scrollbar-color:var(--acc-mely) var(--hat-2)}
:root[data-theme="light"] *::-webkit-scrollbar-track,:root[data-theme="light"] *::-webkit-scrollbar-corner{background:var(--hat-2)}
:root[data-theme="light"] *::-webkit-scrollbar-thumb{background:var(--acc-mely);border-color:var(--hat-2)}
body{font:400 1rem/1.65 var(--f-body);color:var(--ink-2);background:var(--hat);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
/* ⚠ a `hidden` attribútumot a saját `display:flex`-ünk felülírná (a rejtett sor mégis látszott) */
[hidden]{display:none!important}
.rejtett{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.keret{width:min(var(--maxw),100% - 32px);margin-inline:auto}
@media (min-width:700px){.keret{width:min(var(--maxw),100% - 64px)}}
.szam{font-variant-numeric:tabular-nums}
/* tipográfia */
.kicker{display:inline-flex;align-items:center;gap:.55rem;font:600 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-mely)}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-lt)}
.cim-1{font:800 clamp(2.25rem,4.7vw,3.75rem)/1.04 var(--f-display);letter-spacing:-.045em;color:var(--ink)}
.cim-2{font:800 clamp(1.8rem,3.6vw,2.85rem)/1.08 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.cim-3{font:700 1.14rem/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.grad{background:var(--grad-lt);-webkit-background-clip:text;background-clip:text;color:transparent}
.ej .grad,:root:not([data-theme="light"]) .grad{background-image:var(--grad)}
.lead{font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.7;color:var(--ink-dim);max-width:58ch}
.halk{color:var(--ink-dim)}
/* gombok — pill, mint a bts.hu-n */
.gomb{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.35rem;border-radius:999px;
font:700 .96rem/1 var(--f-body);letter-spacing:-.01em;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s}
.gomb svg{width:18px;height:18px}
/* a főgomb a BTS `.btn-fo`-ja: színes fényudvar, és rámutatáskor végigfut rajta a csillanás */
.gomb-fo{position:relative;overflow:hidden;isolation:isolate;background:var(--btn);color:var(--acc-ink);
box-shadow:0 16px 34px -16px rgba(var(--acc-rgb),.85),inset 0 1px 0 rgba(255,255,255,.35)}
.gomb-fo::after{content:"";position:absolute;z-index:-1;top:-60%;left:-45%;width:34%;height:220%;transform:rotate(11deg);pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transition:left .9s var(--ease)}
.gomb-fo:hover{transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(var(--acc-rgb),.95),inset 0 1px 0 rgba(255,255,255,.5)}
.gomb-fo:hover::after{left:120%}
.gomb-szel{border:1px solid var(--vonal);background:var(--uveg);color:var(--ink)}
.gomb-szel:hover{border-color:rgba(var(--acc-rgb),.45);background:var(--uveg-2)}
.gomb-kicsi{min-height:40px;padding:.6rem 1rem;font-size:.88rem}
/* ---------- 3. FEJLÉC ---------- */
.fejlec{position:fixed;inset:0 0 auto;z-index:50;height:var(--fejlec-m);display:flex;align-items:center;
background:rgba(7,9,14,.62);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid rgba(255,255,255,.06);transition:background-color .3s}
:root[data-theme="light"] .fejlec{background:rgba(250,248,244,.8);border-bottom-color:rgba(21,23,29,.07)}
.fejlec .keret{display:flex;align-items:center;gap:1.4rem}
.logo{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap}
.logo-jel{width:36px;height:36px;flex:none;filter:drop-shadow(0 6px 16px rgba(var(--acc-rgb),.22))}
/* a jel BEÁGYAZOTT SVG (2026-09-19): a színválasztóval együtt vált — képként (`![]()
`) nem látná a tokeneket */
.logo-jel .j-csempe{fill:#0F131C;stroke:rgba(var(--acc-rgb),.28);stroke-width:1.5}
.logo-jel .j-hatszog{fill:none;stroke:var(--acc);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.logo-jel .j-fenye{fill:var(--acc);stroke:none;opacity:.55}
.logo-jel .j-mag{fill:var(--acc-vil);stroke:none}
.logo-szo{display:flex;flex-direction:column;gap:.28rem}
.logo-nev{font:700 1.08rem/1 var(--f-display);letter-spacing:-.035em;color:var(--ink)}
.logo-nev span{color:var(--ink-dim)}
.logo-bts{display:inline-flex;align-items:center;gap:.35rem;font:500 .56rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.logo-bts svg{width:8px;height:8px;stroke:#C69A4E;stroke-width:3}
.nav{display:flex;gap:clamp(1rem,1.6vw,1.5rem);margin-left:auto}
.nav a{font:600 .9rem/1 var(--f-body);white-space:nowrap;color:var(--ink-dim);transition:color .2s}
.nav a:hover{color:var(--ink)}
.fejlec-jobb{display:flex;align-items:center;gap:.6rem}
.ikon-gomb{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--vonal);background:var(--uveg);color:var(--ink-2);transition:border-color .2s,color .2s}
.ikon-gomb:hover{border-color:rgba(var(--acc-rgb),.45);color:var(--ink)}
.ikon-gomb svg{width:18px;height:18px}
/* a SZÍNVÁLASZTÓ a fejlécben — egy pont (a mostani szín), kattintásra a négy szín */
.szin-valaszto{position:relative;display:none}
.js .szin-valaszto{display:block}
.szin-pont{width:16px;height:16px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px var(--felulet),0 0 0 3px rgba(var(--acc-rgb),.45)}
.szin-lista{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:228px;padding:.45rem;border-radius:16px;background:var(--felulet);
border:1px solid var(--vonal);box-shadow:var(--arny-2);display:grid;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .2s,transform .3s var(--ease),visibility 0s linear .2s}
/* nyitáskor a láthatóság AZONNAL vált (különben a fókusz nem tud a listára lépni), záráskor az elhalványulás után */
.szin-lista.nyitva{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease),visibility 0s}
.szin-lista-cim{padding:.5rem .6rem .4rem;font:600 .62rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.szin-opcio{display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem .6rem;border-radius:11px;text-align:left;
font:600 .9rem/1.2 var(--f-body);color:var(--ink);transition:background-color .2s}
.szin-opcio:hover{background:var(--vonal-2)}
.szin-opcio[aria-checked="true"]{background:var(--felulet-2)}
.szin-opcio i{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.szin-opcio svg{width:16px;height:16px;margin-left:auto;stroke-width:2.4;color:var(--ink-dim);visibility:hidden}
.szin-opcio[aria-checked="true"] svg{visibility:visible}
.szin-opcio small{display:block;font:500 .7rem/1.3 var(--f-body);color:var(--ink-dim);margin-top:.12rem}
.i-nap{display:none}
:root[data-theme="light"] .i-nap{display:block}
:root[data-theme="light"] .i-hold{display:none}
.menu-gomb{display:none}
.mobil-menu{position:fixed;inset:var(--fejlec-m) 0 auto;z-index:49;padding:1rem 16px 1.4rem;background:var(--felulet);border-bottom:1px solid var(--vonal);
display:grid;gap:.2rem;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.mobil-menu.nyitva{opacity:1;transform:none;visibility:visible}
.mobil-menu a{padding:.85rem .4rem;border-bottom:1px solid var(--vonal-2);font:600 1rem/1.2 var(--f-body);color:var(--ink)}
.mobil-menu .gomb{margin-top:.8rem}
/* a menü 1280 px alatt a hamburgerben: a színválasztó gombja óta a menüpontok két sorba törtek és a fejléc jobb szélső
gombja kilógott (981-en 15 px-szel a képernyőn kívül); a hosszabb „· 2015 óta építünk” szlogen a küszöböt
1139-ről 1219-re tolta (1180-on még törik, 1220-on már nem) — mérve 2026-09-19/20; a „Referenciák” menüpont (10-29) óta 1220-on is tört → 1279 */
@media (max-width:1279px){.nav{display:none}.menu-gomb{display:grid}.fejlec-jobb{margin-left:auto}.fejlec .gomb-fo{display:none}}
/* 700 px fölött lenyíló a hamburger alatt, a keret jobb széléhez igazítva (nem teljes szélességű sáv) */
@media (min-width:700px){.mobil-menu{left:auto;width:min(420px,100% - 64px);right:max(32px,calc((100% - var(--maxw)) / 2));
padding:.9rem 1.1rem 1.2rem;border:1px solid var(--vonal);border-top:0;border-radius:0 0 var(--r-l) var(--r-l);box-shadow:var(--arny-2)}}
/* a jel alatti sor a három gombbal (szín · téma · menü): 540 px alatt a „· 2015 óta építünk” nem fér el (a szlogennel
a fejléc 512 px-et kíván; 430-on korábban a menü-gomb 5 px-szel a képernyőn kívül volt), 420 px alatt a sor sem
— mérve 2026-09-19/20 */
@media (max-width:539px){.logo-ota{display:none}}
@media (max-width:420px){.logo-bts{display:none}}
/* 360 px alatt a logó + a három gomb (szín · téma · menü) 306 px — 320-on 288 fér el: szorosabb rések, 38 px-es gombok */
@media (max-width:359px){.fejlec .keret{gap:.75rem}.fejlec-jobb{gap:.4rem}.logo{gap:.55rem}.fejlec .ikon-gomb{width:38px;height:38px}}
/* ---------- 4. A HAVI CIKLUS — az RMS motívuma (30 szegmens, a mai ég) ---------- */
.ciklus{display:flex;gap:3px;align-items:flex-end;height:18px}
/* 10-29 (Benjamin): a szegmensek a lap GRADIENSÉT viszik végig — mindegyik a saját helyének árnyalatát (a JS adja a
`--k` helyet és a `--n` darabszámot); a ma égő szegmens így a sáv végén már a gradiens vége (Modernnél erős pink). */
.ciklus i{flex:1;min-width:3px;height:100%;border-radius:2px;background:var(--grad);background-size:calc(var(--n,30) * 100%) 100%;background-position:var(--k,0%) 0;opacity:.28}
.ciklus i.volt{opacity:.6}
.ciklus i.ma{opacity:1;box-shadow:0 0 12px var(--acc-2);animation:ma-pulzal 2.4s ease-in-out infinite}
:root[data-theme="light"] .ciklus:not(.ej .ciklus) i{background-image:var(--grad-lt);opacity:.2}
:root[data-theme="light"] .ciklus:not(.ej .ciklus) i.volt{opacity:.5}
:root[data-theme="light"] .ciklus:not(.ej .ciklus) i.ma{opacity:1;box-shadow:none}
@keyframes ma-pulzal{0%,100%{opacity:1}50%{opacity:.45}}
.led{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16),0 0 14px rgba(var(--acc-rgb),.85);flex:none}
:root[data-theme="light"] .led:not(.ej .led){background:var(--acc-mely);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc-mely) 14%,transparent)}
/* ---------- 5. HŐS ---------- */
.hos{position:relative;padding:calc(var(--fejlec-m) + clamp(2.4rem,6vw,4.5rem)) 0 clamp(3rem,7vw,5.5rem);background:
radial-gradient(900px 520px at 78% 38%,rgba(var(--acc-rgb),.085),transparent 62%),
radial-gradient(700px 480px at 8% 0%,rgba(198,154,78,.06),transparent 60%),var(--hat);overflow:hidden}
.hos::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.28),transparent)}
.hos-racs{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hos-szoveg{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:1.35rem}
.hos .kicker{font-size:.7rem}
/* két hasábban a bekezdés NEM futhat a képhasáb címkéi alá: azok a képből balra kilógnak (−12 % + az inaktív 6 px),
a hasábköznél 15–19 px-szel messzebb — 981–1920 px-en mérve a sorvég a „Biztonsági frissítés” alá ért (2026-09-21) */
@media (min-width:981px){.hos .lead{max-width:min(58ch,calc(100% - 1.8rem))}}
.hos .cim-1 .sor{display:block}
.hos-gombok{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.3rem}
.hos-tenyek{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.2rem}
.hos-tenyek li{list-style:none;display:inline-flex;align-items:center;gap:.5rem;font:600 .86rem/1.3 var(--f-body);color:var(--ink-2)}
.hos-tenyek svg{width:16px;height:16px;color:var(--acc);stroke-width:2.4}
.allapot{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;align-items:center;width:min(100%,460px);margin-top:.6rem;padding:.9rem 1.05rem;
border:1px solid var(--vonal);border-radius:var(--r-m);background:var(--uveg)}
.allapot-cim{display:flex;align-items:center;gap:.55rem;font:600 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-vil)}
.allapot-ar{justify-self:end;font:500 .74rem/1 var(--f-mono);color:var(--ink-dim)}
.allapot-ar b{font-weight:600;color:var(--ink)}
.allapot .ciklus{grid-column:1/-1}
.allapot-lab{grid-column:1/-1;display:flex;justify-content:space-between;gap:.8rem;font:500 .64rem/1 var(--f-mono);letter-spacing:.06em;color:var(--halk);white-space:nowrap}
@media (max-width:520px){.allapot-lab span:nth-child(2){display:none}}
/* a hős képe: a havi ciklus gyűrűje, benne a robot (a választott szín LED-jével), a kezénél az üzemeltetés tételei */
.hos-kep{position:relative;aspect-ratio:1/1.02;width:100%;max-width:560px;justify-self:center}
.gyuru{position:absolute;inset:4% 2% 0 2%;width:96%;height:96%;overflow:visible}
/* A GYŰRŰ AZ ÓRAMUTATÓVAL ELLENTÉTESEN forog (2026-09-19, Benjamin: „más irányba pörög a háttérben a kör, mint amilyen
irányban aktiválódnak-deaktiválódnak ezek a feliratok”): a címkék a bal oldalon fentről lefelé ülnek (mérve: −134° …
+146°), a csíkok így sorban érik el őket. 72 mp egy kör: két címke között ~4 mp — ennyi kell a gépelésnek. */
.gyuru-forog{transform-origin:50% 50%;animation:gyuru-forog 72s linear infinite}
@keyframes gyuru-forog{to{transform:rotate(-360deg)}}
/* HÁROM világító csík jár a körben (Benjamin: „legyen rajta több”), mögöttük halványuló csóva — a menetirány is látszik.
Amelyik csík egy címkéhez ér, az kigyullad (rms.js, a hős-blokk). */
.gyuru .sz{stroke:rgba(var(--acc-rgb),.22);stroke-width:5;stroke-linecap:butt}
.gyuru .sz-feny{stroke:var(--acc);stroke-width:6;filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.9))}
.gyuru .sz-farok1{stroke:rgba(var(--acc-rgb),.62);stroke-width:5.5}
.gyuru .sz-farok2{stroke:rgba(var(--acc-rgb),.38);stroke-width:5}
.gyuru .belso{stroke:rgba(255,255,255,.07);stroke-width:1}
.gyuru-fenye{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.22),rgba(var(--acc-rgb),.05) 60%,transparent 72%);filter:blur(6px)}
.hos-robot{position:absolute;left:50%;bottom:0;width:70%;transform:translateX(-42%);filter:drop-shadow(0 34px 44px rgba(0,0,0,.65));z-index:2}
.hos-robot img{width:100%;height:auto}
/* A MINTAOLDAL A ROBOT TÁBLÁJÁN — a tábla a képen enyhén ferde (skewY), a helye a 425×700-as kép koordinátáiból
(bat/rms-robotok.py után mérve: ~5–147 × 4–90 px). `screen` keverés: csak fényt ad, mint egy kijelző — a táblát
fogó ujjak nem tűnnek el alatta. */
.tabla{position:absolute;left:1.6%;top:1.2%;width:32.6%;height:11.4%;transform:skewY(6.4deg);transform-origin:0 0;mix-blend-mode:screen;pointer-events:none}
.tabla-lap{position:absolute;inset:16% 13% 20% 11%;display:flex;flex-direction:column;gap:7%}
.tabla i{display:block;border-radius:2px;background:rgba(239,242,248,.28)}
.tabla .t-nav{height:7%;width:30%;background:rgba(var(--acc-rgb),.85);box-shadow:0 0 6px rgba(var(--acc-rgb),.9)}
.tabla .t-hos{height:30%;border-radius:4px;background:linear-gradient(120deg,rgba(var(--acc-rgb),.55),rgba(var(--acc-rgb),.08) 70%)}
.tabla .t-sor{height:6%;width:80%}
.tabla .t-sor.r{width:52%;background:rgba(239,242,248,.16)}
.tabla .t-harom{display:grid;grid-template-columns:repeat(3,1fr);gap:8%;flex:1}
.tabla .t-harom i{height:100%;background:rgba(239,242,248,.12)}
.hos-tetelek{position:absolute;inset:0;z-index:3;pointer-events:none}
.hos-tetel{position:absolute;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem .5rem .6rem;border-radius:999px;white-space:nowrap;
font:600 .8rem/1 var(--f-body);color:var(--ink);background:rgba(15,19,28,.78);border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 30px -16px rgba(0,0,0,.9);
transition:opacity .45s var(--ease),transform .45s var(--ease)}
/* A CÍMKÉT A GYŰRŰ CSÍKJA GYÚJTJA (2026-09-19, Benjamin: „ezek aktiválják a feliratokat ahogy mennek végig”): az rms.js a
csíkok és a címkék szögéből dönti el, melyik ég (`.aktiv`) — izzó keret, a pont kigyullad. JS nélkül mind teljes fényű. */
.hos-tetel .pont{width:7px;height:7px;border-radius:50%;background:rgba(var(--acc-rgb),.35);transition:background-color .45s,box-shadow .45s}
.hos-tetel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(var(--acc-rgb),.75);box-shadow:0 0 22px -4px rgba(var(--acc-rgb),.7);
opacity:0;transition:opacity .45s var(--ease)}
.js .hos-tetel{opacity:.55;transform:translateX(-6px)}
.js .hos-tetel.aktiv{opacity:1;transform:none}
.hos-tetel.aktiv::after{opacity:1}
.hos-tetel.aktiv .pont{background:var(--acc);box-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
.hos-tetel:nth-child(1){left:-2%;top:9%}
.hos-tetel:nth-child(2){left:-9%;top:25%}
.hos-tetel:nth-child(3){left:-12%;top:41%}
.hos-tetel:nth-child(4){left:-7%;top:57%}
.hos-tetel:nth-child(5){left:3%;top:72%}
/* A ROBOT MÖGÖTTI FELIRAT — a bts.hu hősének „kódolója” (bts concept.css `.hos-kod`; Benjamin: „legyen mögötte ugyanúgy
felirat hozzájuk, mint a BTS-en”): a kigyulladt címke neve, leírása (a „Mi van benne” kártyájáról) és egy nyíl,
gépelve. A bts.hu-n jobb felül áll; itt a robot a hős tetejéig ér (mérve), ezért a címkék ALATT, bal lent: a csíkok
lefelé haladnak a címkéken, és a szöveg ott „érkezik meg”. Telefonon a kép fölött, lefoglalt sávban (lent). */
.hos-kod{display:none;position:absolute;z-index:1;left:-3%;top:81%;width:13.5rem;pointer-events:none;
--hk-rgb:var(--acc-rgb);font:500 clamp(.66rem,.78vw,.76rem)/1.55 var(--f-mono);color:rgba(245,242,235,.64)}
.js .hos-kod{display:block}
.hk-szoveg{margin:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.hk-sor{display:block}
.hk-komment{color:rgb(var(--hk-rgb));text-shadow:0 0 18px rgba(var(--hk-rgb),.45)}
.hk-test{color:rgba(245,242,235,.72)}
.hk-nyil{margin-top:.35rem;color:rgb(var(--hk-rgb))}
/* a kurzor: üresen a sor elején vár, gépelés közben mindig az utolsó sor végén áll */
.hk-szoveg:empty::after,.hk-szoveg>.hk-sor:last-child::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:.15em;vertical-align:-.12em;
background:rgb(var(--hk-rgb));box-shadow:0 0 10px rgba(var(--hk-rgb),.8);animation:hk-kurzor 1.05s steps(1) infinite}
@keyframes hk-kurzor{50%{opacity:0}}
@media (max-width:980px){
.hos-racs{grid-template-columns:1fr}
/* egy hasábban a felirat a kép ALATT, lefoglalt sávban: fölötte a robot táblája a kép tetején túlnyúlik (390 px-en
mérve 47 px), és rácsúszott volna az utolsó sorra. A leghosszabb leírás 390 px-en 5 sor, ~100 px. */
.hos-kep{max-width:440px;margin-top:1rem;margin-bottom:7rem}
.hos-kod{left:0;top:100%;margin-top:.9rem;width:100%;max-width:none;font-size:.74rem}
.hos-tetel:nth-child(1){left:2%}.hos-tetel:nth-child(2){left:-2%}.hos-tetel:nth-child(3){left:-4%}.hos-tetel:nth-child(4){left:-1%}.hos-tetel:nth-child(5){left:6%}
}
@media (max-width:520px){
.hos-kep{max-width:360px}
.hos-tetel{font-size:.72rem;padding:.42rem .66rem .42rem .5rem}
.hos-tetel:nth-child(1){left:0}.hos-tetel:nth-child(2){left:-3%}.hos-tetel:nth-child(3){left:-4%}.hos-tetel:nth-child(4){left:-2%}.hos-tetel:nth-child(5){left:2%}
}
/* ---------- 6. SZAKASZOK ---------- */
.szakasz{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.szakasz-fej{display:flex;flex-direction:column;gap:.9rem;max-width:760px;margin-bottom:clamp(2rem,4vw,3rem)}
.szakasz-fej.kozep{align-items:center;text-align:center;margin-inline:auto}
.szakasz.masik{background:var(--hat-2);border-block:1px solid var(--vonal-2)}
/* HOGYAN MŰKÖDIK — a bts.hu /web „Folyamat” idővonala (2026-09-19, Benjamin: „a négy lépést vegyük át inkább a
BTS-ről … lefele megy ugyanígy ahogy van”; forrás: bts concept.css 772–797, concept.js 8.). Kontúros nagy szám, a
bal szélen a görgetéssel telő csík (rms.js), az elért lépés száma KONTÚR MARAD, csak fényt kap — a BTS-döntés
(Benjamin, 09-13): „ne kitöltse a számot, csak glowt rakjon köré”. A `--csp` a csík csomópontjának háttere: a
BTS-ben `--hat`, de itt az a lap háttér-tokenje, ezért más a neve (önhivatkozás volna). */
.szakasz-fej .gomb{align-self:flex-start;margin-top:.4rem}
.idovonal{--pl:clamp(1.4rem,3vw,2.2rem);--szm:2.5rem;--telik:0;
--csp:var(--hat);--sav:var(--vonal);--sor:var(--vonal-2);--korvonal:rgba(245,242,235,.3);--szam:var(--acc-mely);--szov:var(--ink-dim);--metasz:var(--meta);--fill:var(--grad-lt);
position:relative;padding-left:var(--pl);list-style:none}
:root[data-theme="light"] .idovonal{--korvonal:var(--meta)}
.idovonal::before,.idovonal::after{content:"";position:absolute;left:0;top:0;width:2px;border-radius:2px}
.idovonal::before{bottom:0;background:var(--sav)}
.idovonal::after{height:calc(100% * var(--telik));background:var(--fill);box-shadow:0 0 14px rgba(var(--acc-rgb),.55)}
.lepes-i{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);gap:1.5rem;padding:1.7rem 0;border-top:1px solid var(--sor);transition:padding-left .5s var(--ease)}
.lepes-i:last-child{border-bottom:1px solid var(--sor)}
.lepes-i:hover{padding-left:.7rem}
/* a csík csomópontja, a lépés számának magasságában */
.lepes-i::before{content:"";position:absolute;left:calc(-1 * var(--pl) - 4px);top:calc(1.7rem + var(--szm) / 2 - 5px);width:10px;height:10px;border-radius:3px;
background:var(--csp);border:2px solid var(--sav);transition:background .4s,border-color .4s,box-shadow .4s}
.lepes-i.elert::before{background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16),0 0 12px rgba(var(--acc-rgb),.7)}
.lepes-szam{font:800 var(--szm)/1 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.4px var(--korvonal);
transition:-webkit-text-stroke-color .4s,color .4s,filter .5s}
.lepes-i.elert .lepes-szam{-webkit-text-stroke-color:var(--szam);filter:drop-shadow(0 0 4px rgba(var(--acc-rgb),.9)) drop-shadow(0 0 14px rgba(var(--acc-rgb),.45))}
.lepes-i:hover .lepes-szam{-webkit-text-stroke-color:var(--szam);filter:drop-shadow(0 0 5px rgba(var(--acc-rgb),.95)) drop-shadow(0 0 18px rgba(var(--acc-rgb),.55))}
.lepes-test h3{margin-bottom:.45rem;font:700 1.25rem/1.25 var(--f-display);letter-spacing:-.025em;color:var(--ink)}
.lepes-test p{max-width:64ch;font-size:.96rem;color:var(--szov)}
.lepes-meta{display:block;margin-top:.6rem;font:500 .72rem/1.5 var(--f-mono);letter-spacing:.05em;color:var(--metasz)}
@media (max-width:760px){
.idovonal{--szm:2rem}
.lepes-i{grid-template-columns:52px minmax(0,1fr);gap:1rem;padding:1.4rem 0}
.lepes-i::before{top:calc(1.4rem + var(--szm) / 2 - 5px)}
.lepes-i:hover{padding-left:0}
}
/* FUTÓSÁV a folyamat alatt — a bts.hu `.marquee`-je (concept.css 910–923): végtelen sáv két fejezet között, a
széleken elfogy, egér alatt megáll. A sor kétszer áll a markupban, a sáv a felével lép; a térköz a tétel SAJÁT
jobb margója, nem a flex `gap` — különben a két fél között fél térközzel több lenne, és a körbefordulás megugrana. */
.marquee{position:relative;overflow:hidden;padding:1.1rem 0;border-block:1px solid var(--vonal-2);
-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;list-style:none;animation:mq 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:.55rem;padding-right:2.6rem;font:500 .9rem/1.2 var(--f-mono);color:var(--ink-dim);white-space:nowrap}
.mq-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none}
@media (prefers-reduced-motion:reduce){
.mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:.6rem;padding-inline:clamp(18px,4vw,32px)}
.mq-item[aria-hidden]{display:none}
}
/* mi van a havidíjban — ikonrács, a sarokban ég a LED */
.benne-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.benne{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.35rem 1.35rem 1.4rem;border-radius:var(--r-l);background:var(--felulet);
border:1px solid var(--vonal);box-shadow:var(--arny-1);transition:transform .4s var(--ease),border-color .3s}
.benne:hover{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.35)}
/* KÁRTYA-FÉNY az egér alatt — a bts.hu `.jell-racs>.kartya` megoldása (concept.css 8.): a fény HELYÉT az rms.js
adja (`--cx`/`--cy`), a megjelenését a hover. Csak festés, elrendezést nem mozgat. */
.benne::before,.csomag::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;border-radius:inherit;transition:opacity .5s;
pointer-events:none;background:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%),rgba(var(--acc-rgb),.13),transparent 62%)}
.benne:hover::before,.csomag:hover::before{opacity:1}
.benne > *,.csomag > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.benne:hover{transform:none}}
.benne .led{position:absolute;top:1.1rem;right:1.1rem}
.benne-ikon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.22);color:var(--acc-mely)}
.benne-ikon svg{width:21px;height:21px}
.benne p{font-size:.92rem;color:var(--ink-dim)}
@media (max-width:980px){.benne-racs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.benne-racs{grid-template-columns:1fr}}
/* teljes költség-összevetés (Benjamin, 2026-11-04): két tételes oszlop, mobilon egymás alatt; tokenek -> mind a 4 szín és a világos mód */
.osszev{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:stretch}
.osszev-oszlop{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.6rem 1.5rem 1.3rem;border-radius:var(--r-xl);background:var(--felulet);
border:1px solid var(--vonal);box-shadow:var(--arny-1);min-width:0}
.osszev-nalunk{border-color:rgba(var(--acc-rgb),.38);background:linear-gradient(180deg,rgba(var(--acc-rgb),.07),transparent 46%),var(--felulet)}
.osszev-nalunk .led{position:absolute;top:1.5rem;right:1.5rem}
.osszev-al{font-size:.92rem;color:var(--ink-dim);margin-bottom:.6rem}
.osszev-lista{list-style:none;display:flex;flex-direction:column}
.osszev-lista li{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 0;border-top:1px solid var(--vonal-2)}
.osszev-lista li:first-child{border-top:0}
.osszev-lista li > div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.osszev-lista b{font-weight:700;color:var(--ink);font-size:.98rem}
.osszev-lista li > div > span{font-size:.9rem;color:var(--ink-dim);overflow-wrap:anywhere}
.osszev-jel{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--felulet-2);border:1px solid var(--vonal);color:var(--ink-dim)}
.osszev-jel svg{width:18px;height:18px}
.osszev-nalunk .osszev-jel{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.24);color:var(--acc-mely)}
.osszev-lista li.osszev-ido b{color:var(--ink)}
.osszev-megj{margin:1.5rem auto 0;max-width:78ch;font-size:.86rem;color:var(--ink-dim);text-align:center}
.osszev-cta{display:flex;justify-content:center;margin-top:1.4rem}
@media (max-width:820px){.osszev{grid-template-columns:1fr}.osszev-oszlop{padding:1.35rem 1.15rem 1.1rem}}
/* választható tételek — funkció-sáv (nem mind havidíj-alap!); a kártya a kalkulátorba visz */
.fn-racs{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.fn{display:flex;flex-direction:column;gap:.7rem;height:100%;padding:1.05rem 1.1rem;border-radius:var(--r-l);background:var(--felulet);border:1px solid var(--vonal);
box-shadow:var(--arny-1);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),border-color .3s}
.fn:hover,.fn:focus-visible{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.45)}
.fn-ikon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.22);color:var(--acc-mely)}
.fn-ikon svg{width:20px;height:20px}
.fn-nev{font:700 .95rem/1.3 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.fn-megj{margin:1.1rem auto 0;max-width:78ch;font-size:.86rem;color:var(--ink-dim);text-align:center}
@media (prefers-reduced-motion:reduce){.fn:hover,.fn:focus-visible{transform:none}}
@media (max-width:980px){.fn-racs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.fn-racs{grid-template-columns:1fr 1fr;gap:.65rem}.fn{padding:.9rem .9rem}}
/* csomagok */
/* „ez mind benne van” sáv a csomagok fölött (Benjamin, 2026-09-21) */
.benne-sav{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;list-style:none;margin-top:.2rem}
.benne-sav li{padding:.34rem .75rem;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.3);
background:rgba(var(--acc-rgb),.07);font:600 .8rem/1 var(--f-body);color:var(--ink-2)}
.benne-sav a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--acc-rgb),.5);text-underline-offset:3px}
.benne-sav-megj{margin-top:.6rem;font-size:.86rem;color:var(--ink-dim);text-align:center}
.csomag-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
.csomag{position:relative;display:flex;flex-direction:column;gap:1.1rem;padding:1.6rem 1.5rem 1.35rem;border-radius:var(--r-xl);background:var(--felulet);
border:1px solid var(--vonal);box-shadow:var(--arny-1)}
.csomag.kiemelt{border-color:rgba(var(--acc-rgb),.55);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.25),0 30px 70px -40px rgba(var(--acc-rgb),.6)}
.csomag-jel{position:absolute;top:-.8rem;left:1.5rem;padding:.38rem .7rem;border-radius:999px;background:var(--btn);color:var(--acc-ink);
font:600 .64rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 20px -8px rgba(var(--acc-rgb),.8)}
.csomag-fej{display:flex;flex-direction:column;gap:.35rem}
.csomag-fej span{font:600 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.csomag-ar{display:flex;align-items:baseline;gap:.4rem;font:800 clamp(2rem,3.4vw,2.5rem)/1 var(--f-display);letter-spacing:-.045em;color:var(--ink)}
.csomag-ar small{font:500 .82rem/1 var(--f-mono);letter-spacing:0;color:var(--ink-dim)}
.csomag-ar .tol{font:500 .8rem/1 var(--f-mono);color:var(--ink-dim);letter-spacing:0}
.csomag-plafon{margin:-.4rem 0 .2rem;font-size:.82rem;line-height:1.45;color:var(--ink-dim)}
.csomag-plafon b{color:var(--acc-mely)}
.csomag-plafon-csillag{display:block;margin-top:.3rem;font-size:.76rem;line-height:1.4}
.csomag-lista{display:grid;gap:.55rem;list-style:none;font-size:.92rem;color:var(--ink-2)}
.csomag-lista li{display:grid;grid-template-columns:18px 1fr;gap:.55rem;align-items:start}
.csomag-lista svg{width:16px;height:16px;margin-top:.22rem;color:var(--acc-mely);stroke-width:2.4}
/* a kártya alatti halk jegyzet: ami NEM a csomag része, hanem külön kapcsolható (Benjamin, 2026-09-20) */
.csomag-megj{margin-top:.1rem;font-size:.82rem;line-height:1.45;color:var(--ink-dim)}
.csomag-lab{margin-top:auto;display:flex;flex-direction:column;gap:.9rem;padding-top:.4rem}
.csomag-ciklus{display:flex;flex-direction:column;gap:.45rem}
.csomag-ciklus span{font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;color:var(--halk);text-transform:uppercase}
@media (max-width:980px){.csomag-racs{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
/* ---------- 6/b. A SZERVEREK (Benjamin, 2026-09-20: „saját root szervereinken futnak”) ---------- */
/* éjszakai sáv: világos módban is sötét marad (mint a hős és a BTS-sáv) — az infra a lap technikai arca */
.szerver-szakasz{background:var(--hat);border-block:1px solid rgba(255,255,255,.07)}
.szerver-racs{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.szerver-fej{display:flex;flex-direction:column;gap:.9rem}
.szerver-cimkek{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin-top:.3rem}
.szerver-cimkek li{padding:.34rem .7rem;border-radius:999px;border:1px solid var(--vonal);background:var(--felulet);
font:500 .74rem/1 var(--f-mono);color:var(--ink-dim)}
/* halk, de kattintható: a részletes hosting-leírás a bts.hu-n van — nem másoljuk ide */
.szerver-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.5rem;font:600 .9rem/1.3 var(--f-body);
color:var(--acc-vil);text-decoration:underline;text-decoration-color:rgba(var(--acc-rgb),.35);text-underline-offset:4px;
transition:text-decoration-color .25s,color .25s}
.szerver-link:hover{text-decoration-color:rgba(var(--acc-rgb),.9)}
.szerver-link svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.szerver-lista{display:grid;gap:.75rem;list-style:none}
.szerver-lista li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.9rem;padding:1rem 1.15rem;border-radius:var(--r-m);
border:1px solid var(--vonal);background:var(--felulet);transition:border-color .25s,transform .25s var(--ease)}
.szerver-lista li:hover{border-color:rgba(var(--acc-rgb),.35);transform:translateY(-2px)}
.szerver-lista .ikon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--felulet-2);
border:1px solid var(--vonal-2);color:var(--acc-mely)}
.szerver-lista svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.szerver-lista b{font:700 1rem/1.3 var(--f-display);color:var(--ink);letter-spacing:-.015em}
/* ⚠ a --szov az idővonal SAJÁT változója (nem globális): itt --ink-dim kell, azt az .ej felülírja — különben a sötét sávban világos módban olvashatatlan */
.szerver-lista p{margin-top:.25rem;font-size:.9rem;line-height:1.55;color:var(--ink-dim)}
.szerver-lista p b{font:inherit;font-weight:700;color:var(--ink)}
@media (max-width:980px){.szerver-racs{grid-template-columns:1fr}}
/* ---------- 6/c. SZERVER-KIEMELÉS a hős után (Benjamin, 2026-11-04: „nem osztott tárhely — saját szerver”) ----------
Két kártya egymás mellett: BAL = a sűrű, közös doboz (halk, szürke, szoros), JOBB = a miénk (akcent-keret, elkülönített
cellák, élő EKG-vonal + pulzáló led). Csak tokenek: az 5 színnél és világos/sötét módban is a lap színeit követi.
Mozgás: a led és az EKG finom, `prefers-reduced-motion` alatt áll. */
/* a fény külön réteg (nem a háttér): a „tiszta világos” próba (rms-proba.css) a `.szakasz.masik` hátterét felülírja, a fény így megmarad */
.szerver-sav{overflow:hidden}
.szerver-sav::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 340px at 50% -4%,rgba(var(--acc-rgb),.12),transparent 70%)}
.szerver-sav > .keret{position:relative}
.szk-fej{max-width:920px}
.szk-fej .cim-2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.06}
.szk-fej .lead{max-width:64ch}
.szk-par{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.1rem;align-items:stretch}
.szk-oldal{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.4rem 1.2rem;border-radius:var(--r-xl);
background:var(--felulet);border:1px solid var(--vonal);box-shadow:var(--arny-1)}
.szk-oldal .cim-3{font-size:1.3rem}
.szk-abra{display:block;width:100%;height:auto;margin-bottom:.7rem}
.szk-al{font-size:.95rem;color:var(--ink-dim)}
.szk-lista{list-style:none;display:flex;flex-direction:column;margin-top:.35rem}
.szk-lista li{position:relative;padding:.7rem 0 .7rem 1.55rem;border-top:1px solid var(--vonal-2);font-size:.93rem;line-height:1.5;color:var(--ink-dim)}
.szk-lista li::before{content:"";position:absolute;left:.15rem;top:1.12rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--halk)}
/* bal: a zsúfolt doboz — sok kis ablak, szorosan; a „te” oldalad szaggatott körvonal a tömegben */
.szk-osztott .szk-doboz{fill:var(--felulet-2);stroke:var(--vonal);stroke-width:1.5}
.szk-ablakok rect{fill:var(--halk);opacity:.34}
.szk-ablakok rect:nth-child(3n+1){opacity:.5}
.szk-ablakok rect:nth-child(5n){opacity:.22}
.szk-ablakok rect.te{fill:none;opacity:1;stroke:var(--ink-dim);stroke-width:1.6;stroke-dasharray:4 3}
/* jobb: a miénk — akcent-keret, elkülönített cellák, élő figyelés */
.szk-sajat{border-color:rgba(var(--acc-rgb),.5);background:linear-gradient(180deg,rgba(var(--acc-rgb),.09),transparent 52%),var(--felulet);
box-shadow:0 0 0 1px rgba(var(--acc-rgb),.14),0 30px 70px -44px rgba(var(--acc-rgb),.7)}
.szk-led{fill:var(--acc-mely);filter:drop-shadow(0 0 5px rgba(var(--acc-rgb),.9));animation:ma-pulzal 2.4s ease-in-out infinite}
.szk-sajat .szk-doboz{fill:rgba(var(--acc-rgb),.05);stroke:rgba(var(--acc-rgb),.6);stroke-width:1.5}
.szk-cellak rect{fill:rgba(var(--acc-rgb),.1);stroke:rgba(var(--acc-rgb),.42);stroke-width:1.4}
.szk-cellak rect.te{fill:rgba(var(--acc-rgb),.32);stroke:var(--acc-mely);stroke-width:1.8}
.szk-ekg-alap,.szk-ekg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.szk-ekg-alap{stroke:rgba(var(--acc-rgb),.28);stroke-width:2}
.szk-ekg{stroke:var(--acc-mely);stroke-width:2.8;stroke-dasharray:24 76;filter:drop-shadow(0 0 4px rgba(var(--acc-rgb),.7));
animation:szk-ekg 3.4s linear infinite}
@keyframes szk-ekg{from{stroke-dashoffset:24}to{stroke-dashoffset:-76}}
.szk-sajat .szk-al{color:var(--ink-2)}
.szk-sajat .szk-lista li{color:var(--ink-2)}
.szk-sajat .szk-lista li::before{background:var(--acc-mely);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16)}
.szk-nyil{align-self:center;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--felulet);
border:1px solid rgba(var(--acc-rgb),.45);color:var(--acc-mely);box-shadow:0 10px 26px -14px rgba(var(--acc-rgb),.8)}
.szk-nyil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.szk-cta{display:flex;justify-content:center;margin-top:1.7rem}
.szk-cta .gomb svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
.szk-par{grid-template-columns:minmax(0,1fr);gap:.8rem}
.szk-nyil{justify-self:center;width:40px;height:40px}
.szk-nyil svg{transform:rotate(90deg)}
.szk-oldal{padding:1.15rem 1.05rem 1rem}
}
@media (prefers-reduced-motion:reduce){.szk-ekg{animation:none;stroke-dasharray:none;filter:none}.szk-led{animation:none}}
/* ---------- 7. KALKULÁTOR + ÉLŐ MAKETT ---------- */
.kalk{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.kalk-bal{display:flex;flex-direction:column;gap:1.6rem}
.kalk-lepes{display:flex;flex-direction:column;gap:.9rem}
/* PLAFON-sáv (Benjamin, 2026-09-21): kimondja, ha a bejelölt tételek elérték a csomag felső árát. Folyó szöveg —
⚠ NEM flex: az a mondatot a mentén három elemre szedte szét (rés a szavak közt + kényszerített sortörés);
a flex a korábbi csomag-ajánló gombjához kellett, az a plafon-modellel kikerült */
.csomag-ajanlo{padding:.8rem 1rem;border-radius:var(--r-m);
border:1px solid rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.09);font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.csomag-ajanlo[hidden]{display:none}
.csomag-ajanlo b{color:var(--ink)}
.kalk-lepes-cim{display:flex;align-items:center;gap:.7rem;font:700 1rem/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.kalk-lepes-cim i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;font:600 .74rem/1 var(--f-mono);font-style:normal;
background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.3);color:var(--acc-mely)}
/* 1. csomag-választó — három kártya, rádió-gombbal */
.cs-valaszto{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.cs-opcio{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:.9rem .95rem;border-radius:var(--r-m);background:var(--felulet);
border:1px solid var(--vonal);cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .3s var(--ease)}
.cs-opcio:hover{transform:translateY(-2px)}
.cs-opcio input{position:absolute;opacity:0;pointer-events:none}
.cs-opcio b{font:700 .98rem/1.2 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.cs-opcio span{font:500 .74rem/1.3 var(--f-mono);color:var(--ink-dim)}
.cs-opcio:has(input:checked){border-color:rgba(var(--acc-rgb),.7);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.35),0 14px 34px -20px rgba(var(--acc-rgb),.7)}
.cs-opcio:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:3px}
.cs-opcio::after{content:"";position:absolute;top:.8rem;right:.8rem;width:14px;height:14px;border-radius:50%;border:2px solid var(--vonal)}
.cs-opcio:has(input:checked)::after{border-color:var(--acc);background:radial-gradient(circle,var(--acc) 0 3px,transparent 4px)}
@media (max-width:560px){.cs-valaszto{grid-template-columns:1fr}}
/* 2. kiegészítők — harmonika kategóriánként */
.kat{border:1px solid var(--vonal);border-radius:var(--r-m);background:var(--felulet);overflow:hidden}
.kat+.kat{margin-top:.6rem}
.kat summary{list-style:none;display:grid;grid-template-columns:40px 1fr auto;gap:.85rem;align-items:center;padding:.9rem 1rem;cursor:pointer}
.kat summary::-webkit-details-marker{display:none}
.kat-ikon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--felulet-2);border:1px solid var(--vonal-2);color:var(--acc-mely)}
.kat-ikon svg{width:19px;height:19px}
.kat-cim b{display:block;font:700 .98rem/1.25 var(--f-display);color:var(--ink);letter-spacing:-.015em}
.kat-cim span{font-size:.82rem;color:var(--ink-dim)}
.kat-db{display:inline-flex;align-items:center;gap:.45rem;font:600 .7rem/1 var(--f-mono);color:var(--ink-dim)}
.kat-db b{min-width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:var(--felulet-2);color:var(--ink-2);font-weight:600}
.kat-db b.van{background:rgba(var(--acc-rgb),.16);color:var(--acc-mely)}
.kat-db svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.kat[open] .kat-db svg{transform:rotate(180deg)}
.kat-tetelek{display:grid;border-top:1px solid var(--vonal-2)}
.tetel{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.85rem 1rem;border-bottom:1px solid var(--vonal-2);transition:background-color .2s}
.tetel:last-child{border-bottom:0}
.tetel:hover{background:var(--vonal-2)}
.tetel.tetel-ugras{animation:tetelUgras 2.4s ease-out}
@keyframes tetelUgras{0%,35%{background:rgba(var(--acc-rgb),.22);box-shadow:inset 3px 0 0 var(--acc)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.tetel.tetel-ugras{animation:none;background:rgba(var(--acc-rgb),.18);box-shadow:inset 3px 0 0 var(--acc)}}
.tetel-szoveg b{display:block;font:600 .92rem/1.3 var(--f-body);color:var(--ink)}
.tetel-szoveg span{display:block;font-size:.8rem;line-height:1.45;color:var(--ink-dim);margin-top:.15rem}
.tetel-szoveg em{display:inline-block;margin-top:.35rem;font:500 .68rem/1.2 var(--f-mono);font-style:normal;color:var(--meta)}
.tetel-ar{text-align:right;font:600 .86rem/1.2 var(--f-mono);color:var(--ink);white-space:nowrap}
.tetel-ar small{display:block;font-weight:500;font-size:.68rem;color:var(--ink-dim);margin-top:.2rem}
.tetel.tiltott{opacity:.45}
/* ⏳ HAMAROSAN (2026-09-26): a még nem rendelhető csomag és tételek — látszanak, de nem választhatók */
.tetel-szoveg .hamarosan-jel,.oa-gomb .hamarosan-jel{background:rgba(127,127,127,.2);color:var(--ink-dim)}
.cs-opcio.cs-hamarosan{opacity:.55;cursor:not-allowed}
.cs-opcio.cs-hamarosan:hover{transform:none}
.oa-gomb:disabled{opacity:.55;cursor:not-allowed}
.csomag-jel-hamarosan{background:rgba(127,127,127,.25);color:var(--ink)}
.tetel.tiltott .kapcs{cursor:not-allowed}
.tetel.benne-van .tetel-ar{color:var(--acc-mely)}
/* a kapcsoló — valódi checkbox (billentyűzet, képernyőolvasó), a sín csak díszlet */
.kapcs{position:relative;display:inline-flex;cursor:pointer}
.kapcs input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit}
.kapcs-sin{width:44px;height:26px;border-radius:999px;background:var(--felulet-3);border:1px solid var(--vonal);position:relative;transition:background-color .25s,border-color .25s}
.kapcs-sin::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink-dim);transition:transform .3s var(--ease),background-color .25s}
.kapcs input:checked+.kapcs-sin{background:rgba(var(--acc-rgb),.22);border-color:rgba(var(--acc-rgb),.7)}
.kapcs input:checked+.kapcs-sin::after{transform:translateX(18px);background:var(--acc);box-shadow:0 0 10px rgba(var(--acc-rgb),.8)}
:root[data-theme="light"] .kapcs input:checked+.kapcs-sin::after{background:var(--acc-mely);box-shadow:none}
/* a kék sötét háton a saját színű sínen 3:1 alatt maradna — ott a gomb a világos kék (a világos téma szabálya erősebb) */
html[data-szin="kek"] .kapcs input:checked+.kapcs-sin::after{background:var(--acc-vil)}
.kapcs input:focus-visible+.kapcs-sin{outline:2px solid var(--acc);outline-offset:3px}
.kapcs input:disabled+.kapcs-sin{opacity:.6}
/* mennyiség (postafiókok) */
.mennyiseg{display:inline-flex;align-items:center;border:1px solid var(--vonal);border-radius:12px;overflow:hidden;background:var(--felulet-2)}
.mennyiseg button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2)}
.mennyiseg button:hover{background:var(--vonal)}
.mennyiseg button svg{width:14px;height:14px;stroke-width:2.4}
.mennyiseg output{min-width:28px;text-align:center;font:600 .86rem/1 var(--f-mono);color:var(--ink)}
/* 3. fizetési ütem */
/* a jobb oldal: élő makett + összesítő — ragadós */
.kalk-jobb{position:sticky;top:calc(var(--fejlec-m) + 16px);display:flex;flex-direction:column;gap:1rem}
.makett{position:relative;border-radius:var(--r-l);background:#0B0E15;border:1px solid rgba(255,255,255,.09);box-shadow:var(--arny-2);overflow:hidden;color-scheme:dark}
.makett-sav{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.6rem .8rem;background:#10141D;border-bottom:1px solid rgba(255,255,255,.06)}
.makett-pontok{display:flex;gap:5px}
.makett-pontok i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.makett-cim{display:flex;align-items:center;gap:.45rem;justify-self:center;min-width:0;max-width:100%;padding:.35rem .8rem;border-radius:999px;background:#07090E;border:1px solid rgba(255,255,255,.06);
font:500 .72rem/1 var(--f-mono);color:#98A2B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.makett-cim svg{width:12px;height:12px;flex:none;color:var(--acc);stroke-width:2.4}
.makett-cim b{font-weight:500;color:#EFF2F8}
.makett-jel{font:600 .56rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#5F6980}
/* ⚠ NEM `gap`: a rejtett (0 magas) blokkok is kapnának rést, és üres sávok maradnának — margóval tagolunk */
.makett-lap{position:relative;padding:.8rem;display:flex;flex-direction:column;min-height:340px;max-height:430px;overflow:hidden;
/* AZ ÜGYFÉL OLDALA — a dizájn-lépésből (2026-09-19): fő szín (`--m-akc-rgb`: gombok, logó, jelölők), második szín
(`--m-akc2-rgb`: képhelyek, kiemelések); a háttér sötét, vagy `.vilagos`. Minden szín ezekből — beégetett nincs. */
--m-akc-rgb:37,99,235; --m-akc2-rgb:245,158,11;
--m-hat:#0B0E15; --m-fel:var(--m-fel); --m-fel2:var(--m-fel2); --m-sz:255,255,255; --m-szov:#EFF2F8;
background:var(--m-hat);transition:background-color .5s}
.makett-lap.vilagos{--m-hat:#FFFFFF; --m-fel:#F3F2EF; --m-fel2:#E9E7E2; --m-sz:21,23,29; --m-szov:#15171D}
.makett-lap>*{margin-bottom:.55rem}
.makett::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,#0B0E15);pointer-events:none;z-index:1;transition:opacity .5s}
.makett:has(.makett-lap.vilagos)::after{background:linear-gradient(rgba(255,255,255,0),#FFFFFF)}
.m-nav{display:flex;align-items:center;gap:.5rem;padding:.35rem .2rem}
.m-logo{width:54px;height:10px;border-radius:5px;background:rgba(var(--m-akc-rgb),.75)}
.m-menu{display:flex;gap:.4rem;margin-left:auto;align-items:center}
.m-menu i{width:26px;height:6px;border-radius:3px;background:rgba(var(--m-sz),.16)}
.m-nyelv{display:none;gap:3px}
.m-nyelv b{font:600 .5rem/1 var(--f-mono);padding:.18rem .28rem;border-radius:4px;background:rgba(var(--m-sz),.08);color:rgba(var(--m-sz),.72)}
.m-nyelv b:first-child{background:rgba(var(--m-akc-rgb),.3);color:var(--m-szov)}
.m-kosar{display:none;position:relative;width:18px;height:18px;color:rgba(var(--m-sz),.72)}
.m-kosar svg{width:18px;height:18px}
.m-kosar em{position:absolute;top:-4px;right:-5px;width:10px;height:10px;border-radius:50%;background:rgb(var(--m-akc-rgb))}
.m-hos{display:grid;grid-template-columns:1.2fr .8fr;gap:.6rem;align-items:center;padding:.8rem;border-radius:12px;
background:linear-gradient(135deg,rgba(var(--m-akc-rgb),.26),rgba(var(--m-akc-rgb),.05) 70%),var(--m-fel)}
.m-hos-sz{display:flex;flex-direction:column;gap:.35rem}
.m-hos-sz i{height:8px;border-radius:4px;background:rgba(var(--m-sz),.55)}
.m-hos-sz i:nth-child(2){width:78%;background:rgba(var(--m-sz),.3)}
.m-hos-sz i:nth-child(3){width:55%;height:6px;background:rgba(var(--m-sz),.18)}
.m-hos-sz u{width:58px;height:16px;border-radius:999px;background:rgba(var(--m-akc-rgb),.9);margin-top:.2rem}
.m-hos-k{height:62px;border-radius:9px;background:radial-gradient(circle at 35% 35%,rgba(var(--m-sz),.22),transparent 55%),rgba(var(--m-akc2-rgb),.45)}
.m-cim{height:7px;width:34%;border-radius:4px;background:rgba(var(--m-sz),.3);margin:.25rem 0 .1rem .1rem}
.m-racs{display:grid;gap:.4rem}
.m-racs.harom{grid-template-columns:repeat(3,1fr)}
.m-racs.ketto{grid-template-columns:1fr 1fr}
.m-kartya{display:flex;flex-direction:column;gap:.28rem;padding:.45rem;border-radius:8px;background:var(--m-fel);border:1px solid rgba(var(--m-sz),.05)}
.m-kartya i{height:5px;border-radius:3px;background:rgba(var(--m-sz),.2)}
.m-kartya i.r{width:60%;background:rgba(var(--m-sz),.12)}
.m-kartya .k{height:34px;border-radius:6px;background:rgba(var(--m-akc2-rgb),.3)}
.m-kartya .ar{height:8px;width:42%;border-radius:4px;background:rgba(var(--m-akc-rgb),.75)}
.m-kapcsolat{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.55rem;border-radius:10px;background:var(--m-fel)}
.m-kapcsolat i{height:14px;border-radius:5px;background:rgba(var(--m-sz),.07);border:1px solid rgba(var(--m-sz),.06)}
.m-kapcsolat i:last-child{grid-column:1/-1;height:24px}
.m-kapcsolat u{grid-column:2;justify-self:end;width:54px;height:14px;border-radius:999px;background:rgba(var(--m-akc-rgb),.85)}
/* a kapcsolóra összeálló blokkok — a magasság 0fr → 1fr (a `--lit`-tanulság: nem animált öröklődő változó) */
.makett-lap>.m-blokk{display:grid;grid-template-rows:0fr;opacity:0;margin-bottom:0;
transition:grid-template-rows .55s var(--ease),opacity .4s,margin-bottom .55s var(--ease)}
.makett-lap>.m-blokk.be{margin-bottom:.55rem}
.m-blokk>div{min-height:0;overflow:hidden}
.makett-lap>.m-blokk.be{grid-template-rows:1fr;opacity:1}
.m-blokk.uj>div{animation:m-uj 1.1s var(--ease)}
@keyframes m-uj{0%{box-shadow:0 0 0 1px rgba(var(--acc-rgb),.9),0 0 26px rgba(var(--acc-rgb),.35)}100%{box-shadow:0 0 0 1px rgba(var(--acc-rgb),0),0 0 0 rgba(var(--acc-rgb),0)}}
.m-naptar{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;padding:.5rem;border-radius:10px;background:var(--m-fel)}
.m-naptar i{height:10px;border-radius:3px;background:rgba(var(--m-sz),.06)}
.m-naptar i.f{background:rgba(var(--m-akc2-rgb),.6)}
.m-naptar i.v{background:rgb(var(--m-akc-rgb))}
.m-hirlevel{display:flex;gap:.4rem;align-items:center;padding:.5rem;border-radius:10px;background:rgba(var(--m-akc-rgb),.14)}
.m-hirlevel i{flex:1;height:14px;border-radius:5px;background:rgba(var(--m-sz),.1)}
.m-hirlevel u{width:48px;height:14px;border-radius:999px;background:rgba(var(--m-akc-rgb),.9)}
.m-csillag{display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem;border-radius:10px;background:var(--m-fel)}
.m-csillag svg{width:11px;height:11px;fill:#FFC933;stroke:none}
.m-csillag b{font:600 .6rem/1 var(--f-mono);color:var(--m-szov);margin-left:.2rem}
.m-csillag i{flex:1;height:5px;border-radius:3px;background:rgba(var(--m-sz),.12)}
.m-galeria{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.m-galeria i{height:26px;border-radius:5px;background:linear-gradient(135deg,rgba(var(--m-akc-rgb),.35),rgba(var(--m-sz),.05))}
.m-galeria i:nth-child(2n){background:linear-gradient(135deg,rgba(var(--m-akc2-rgb),.4),rgba(var(--m-sz),.04))}
.m-terkep{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;padding:.45rem .55rem;border-radius:10px;background:var(--m-fel)}
.m-terkep div{height:34px;border-radius:7px;background:repeating-linear-gradient(45deg,rgba(var(--m-sz),.05) 0 6px,transparent 6px 12px),var(--m-fel2);position:relative}
.m-terkep div::after{content:"";position:absolute;left:46%;top:26%;width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:rgb(var(--m-akc-rgb))}
.m-terkep span{font:600 .5rem/1.2 var(--f-mono);color:rgba(var(--m-sz),.55);text-transform:uppercase;letter-spacing:.08em}
.m-fizetes{display:flex;gap:.35rem;align-items:center;padding:.4rem .55rem;border-radius:10px;background:var(--m-fel)}
.m-fizetes i{width:26px;height:16px;border-radius:4px;background:rgba(var(--m-sz),.14)}
.m-fizetes i:first-child{background:linear-gradient(135deg,#EB001B 0 50%,#F79E1B 50%)}
.m-fizetes span{margin-left:auto;font:600 .5rem/1 var(--f-mono);color:rgba(var(--m-sz),.55);letter-spacing:.08em;text-transform:uppercase}
.m-lablec{display:flex;align-items:center;gap:.45rem;padding:.45rem .5rem;border-top:1px solid rgba(var(--m-sz),.06);margin-top:auto;margin-bottom:0}
.m-lablec i{height:5px;width:60px;border-radius:3px;background:rgba(var(--m-sz),.12)}
.m-lablec .posta{display:none;align-items:center;gap:.3rem;margin-left:auto;font:500 .52rem/1 var(--f-mono);color:rgba(var(--m-sz),.72)}
.m-lablec .posta svg{width:11px;height:11px;color:rgb(var(--m-akc-rgb))}
.makett.nyelv .m-nyelv,.makett.shop .m-kosar{display:flex}
.makett.posta .m-lablec .posta{display:inline-flex}
/* az admin: ceruza-jel a lap sarkán */
.m-szerk{position:absolute;right:.9rem;top:3.4rem;z-index:2;display:none;align-items:center;gap:.3rem;padding:.3rem .45rem;border-radius:7px;background:rgba(var(--acc-rgb),.14);
border:1px solid rgba(var(--acc-rgb),.4);font:600 .5rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-vil)}
.m-szerk svg{width:10px;height:10px;stroke-width:2.4}
.makett.admin .m-szerk{display:inline-flex}
/* a sarokban álló robot — a LED-je minden kapcsolásnál felvillan (fényréteg `opacity`, nem változó-animáció) */
.makett-robot{position:absolute;right:.4rem;bottom:0;width:76px;z-index:3;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.7))}
.makett-robot img{width:100%;height:auto}
.makett-villan{position:absolute;right:-.6rem;bottom:1.4rem;width:100px;height:100px;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
background:radial-gradient(closest-side,rgba(var(--acc-rgb),.55),rgba(var(--acc-rgb),0))}
.makett-villan.most{animation:villan .9s ease-out}
@keyframes villan{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* 2. lépés: csukva indul — a súgó és a „Lenyitom” jel mondja, hogy le kell nyitni (Benjamin, 2026-09-19) */
.kalk-sugo{margin:-.35rem 0 .1rem;font-size:.86rem;color:var(--ink-dim)}
/* IPARAGI KIINDULO OSSZEALLITASOK (2026-09-26): a 2. lepes teteje - a 4. lepes tipus-cimkeinek alakja (.tipus) */
.oa{display:flex;flex-direction:column;gap:.5rem;margin:-.2rem 0 .1rem}
.oa-cim{font:600 .68rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.oa-sor{display:flex;flex-wrap:wrap;gap:.45rem}
.oa-megerosit{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;padding:.7rem .85rem;border-radius:var(--r-m);
border:1px solid rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.08);font-size:.86rem;line-height:1.4;color:var(--ink)}
.oa-megerosit[hidden]{display:none}
.oa-megerosit-gombok{display:inline-flex;flex-wrap:wrap;gap:.45rem}
.oa-allapot{font-size:.82rem;line-height:1.45;color:var(--acc-mely)}
.oa-allapot:empty{display:none}
/* NEPSZERU jel a tetel neve mellett */
.tetel-szoveg .nepszeru{display:inline-block;vertical-align:.1em;margin-left:.3rem;padding:.2rem .42rem;border-radius:999px;
font:600 .56rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
background:rgba(var(--acc-rgb),.16);color:var(--acc-mely)}
/* AI-CSOMAG: a csoport elso sora, halvanyan kiemelve */
.tetel.csomag-tetel{background:rgba(var(--acc-rgb),.06)}
.tetel.csomag-tetel:hover{background:rgba(var(--acc-rgb),.1)}
/* az allapot-jelzes („AI-csomagban”, „A ... csomag resze”, „Csak ... csomaggal”) SAJAT sorban - kulonben a megjegyzes vegehez tapadt */
.tetel-szoveg em[data-tetel-ok],.tetel-szoveg em[data-csomag-ossz]{display:block;width:fit-content}
.tetel-szoveg em[data-tetel-ok][hidden]{display:none}
.tetel.benne-van .tetel-szoveg em[data-tetel-ok]{color:var(--acc-mely)}
.kat-nyit{font:600 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-mely)}
.kat[open] .kat-nyit{display:none}
.kat:not([open]) .kat-db svg{color:var(--acc-mely)}
@media (max-width:520px){.kat-nyit{display:none}}
/* 3. DIZÁJN — háttér (szegmens) és két alapszín */
.kalk-lepes-cim small{margin-left:.35rem;font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap}
.dizajn{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.1rem;border:1px solid var(--vonal);border-radius:var(--r-m);background:var(--felulet)}
.dz-sor{display:flex;flex-direction:column;gap:.55rem}
.dz-cim{font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.szegmens{display:inline-grid;grid-template-columns:repeat(3,auto);padding:4px;border-radius:999px;background:var(--felulet-2);border:1px solid var(--vonal);width:max-content;max-width:100%}
.szegmens label{position:relative;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.45rem 1rem;border-radius:999px;cursor:pointer;
font:600 .88rem/1 var(--f-body);color:var(--ink-dim);white-space:nowrap;transition:background-color .25s,color .25s,box-shadow .25s}
.szegmens input{position:absolute;opacity:0;pointer-events:none}
.szegmens label:has(input:checked){background:var(--felulet-3);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.55)}
.szegmens label:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.szegmens small{font:600 .6rem/1 var(--f-mono);padding:.22rem .38rem;border-radius:6px;background:rgba(var(--acc-rgb),.16);color:var(--acc-mely)}
.szin-par{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
/* DOMAIN ÉS LEVELEZÉS (2026-09-20): végződésenként egy sor (mező + kereső + válasz + „hozom”), alatta a
postafiókok száma és — csak amennyit kért — a címek. A cél: átlátható maradjon, ne nyúljon el a form. */
.domain-sorok{display:grid;gap:.9rem;margin-top:.9rem}
.domain-sor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.7rem;align-items:center}
.domain-sor[hidden]{display:none}
.domain-mezo{display:flex;align-items:center;gap:.2rem;padding:.55rem .85rem;border:1px solid var(--vonal);
border-radius:14px;background:var(--felulet-2);transition:border-color .2s,box-shadow .2s}
.domain-mezo:focus-within{border-color:rgba(var(--acc-rgb),.6);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.14)}
.domain-mezo input{flex:1 1 auto;min-width:0;border:0;background:none;color:var(--ink);font:600 1rem/1.4 var(--f-body);outline:none}
.domain-mezo input::placeholder{color:var(--halk);font-weight:500}
.domain-veg{font:600 1rem/1.4 var(--f-mono);color:var(--ink-dim)}
/* a kereső válasza — „szabad”-ot csak igazolás mellett mondunk, különben „nem tudjuk” (a bts.hu szabálya) */
.domain-valasz{grid-column:1 / -1;display:flex;align-items:flex-start;gap:.5rem;margin-top:-.1rem;font:600 .92rem/1.5 var(--f-body);color:var(--ink-2)}
.domain-valasz::before{content:"";flex:none;width:9px;height:9px;margin-top:.45rem;border-radius:50%;background:var(--halk)}
.domain-valasz.szabad{color:var(--acc-mely)}.domain-valasz.szabad::before{background:var(--acc);box-shadow:0 0 10px rgba(var(--acc-rgb),.8)}
.domain-valasz.foglalt::before,.domain-valasz.hibas::before{background:#E8534B}
.domain-valasz b{color:var(--ink)}
.domain-sajat{grid-column:1 / -1;display:flex;align-items:center;gap:.6rem;margin-top:-.2rem;font-size:.88rem;color:var(--ink-2);cursor:pointer;
padding:.4rem .6rem;margin-left:-.6rem;border-radius:12px;border:1px solid transparent;transition:border-color .3s,background-color .3s}
/* a postafiókok: léptető + ár, alatta a címek két oszlopban (telefonon egyben) */
.posta-blokk{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--vonal-2)}
.posta-fej{display:flex;align-items:center;gap:.8rem;margin-top:.5rem}
.posta-ar{font:500 .84rem/1 var(--f-mono);color:var(--ink-dim)}
.posta-ar b{color:var(--ink-2);font-weight:600}
.posta-cimek{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.7rem}
.posta-cimek[hidden]{display:none}
.posta-cim{display:flex;align-items:center;gap:.15rem;padding:.4rem .7rem;border:1px solid var(--vonal);border-radius:12px;
background:var(--felulet-2);min-width:0}
.posta-cim:focus-within{border-color:rgba(var(--acc-rgb),.6)}
.posta-cim input{flex:1 1 auto;min-width:0;border:0;background:none;color:var(--ink);font:600 .9rem/1.3 var(--f-body);outline:none}
.posta-cim input::placeholder{color:var(--halk);font-weight:500}
.posta-utotag{font:500 .82rem/1.3 var(--f-mono);color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
/* két domainnél a végződés KATTINTHATÓ: cím-soronként átváltható (Benjamin, 2026-09-20) */
.posta-utotag.valt{flex:none;max-width:62%;padding:.16rem .45rem;border-radius:8px;border:1px dashed rgba(var(--acc-rgb),.45);
color:var(--acc-mely);cursor:pointer;transition:background-color .2s,border-color .2s;
/* hosszú névnél az ELEJE vágódjon le, ne a végződés — az a lényeg, amit a gomb vált */
direction:rtl;unicode-bidi:plaintext;text-align:right}
.posta-utotag.valt:hover{background:rgba(var(--acc-rgb),.12);border-color:rgba(var(--acc-rgb),.8)}
.posta-sugo{margin:.5rem 0 0;font-size:.82rem;color:var(--ink-dim)}
.posta-sugo[hidden]{display:none}
.posta-tobb{grid-column:1 / -1;margin:0;font-size:.84rem;color:var(--ink-dim)}
/* keskenyen a három végződés három egyenlő hasáb, a díj-címke a felirat alá (különben kilóg a lap: 390 px-en
435 px-re tágult — mérve 2026-09-20) */
@media (max-width:620px){.domain-sor{grid-template-columns:1fr}.posta-cimek{grid-template-columns:1fr}
.domain-szegmens{width:100%;grid-template-columns:repeat(3,1fr)}
.domain-szegmens label{flex-direction:column;gap:.2rem;padding-inline:.45rem;text-align:center;line-height:1.15}
.domain-szegmens small{white-space:nowrap}}
/* foglalt névnél ide kell nyúlnia: „ha a tiéd, pipáld be” */
.domain-sajat.kiemelve{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.08)}
.domain-sajat input{width:18px;height:18px;flex:none;accent-color:var(--acc)}
.szin-mezo{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border:1px solid var(--vonal);border-radius:14px;background:var(--felulet-2);cursor:pointer}
.szin-mezo:hover{border-color:rgba(var(--acc-rgb),.45)}
.szin-mezo input{width:40px;height:40px;flex:none;padding:0;border:0;border-radius:11px;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.szin-mezo input::-webkit-color-swatch-wrapper{padding:0}
.szin-mezo input::-webkit-color-swatch{border:1px solid rgba(255,255,255,.18);border-radius:11px}
.szin-mezo input::-moz-color-swatch{border:1px solid rgba(255,255,255,.18);border-radius:11px}
.szin-mezo input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.szin-mezo span{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.szin-mezo b{font:600 .88rem/1.1 var(--f-body);color:var(--ink)}
.szin-mezo code{font:500 .72rem/1 var(--f-mono);color:var(--ink-dim)}
.dz-megj{font-size:.8rem;line-height:1.5;color:var(--ink-dim)}
@media (max-width:420px){.szegmens label{padding:.45rem .7rem;font-size:.82rem}.szin-par{grid-template-columns:1fr}}
/* 375 px alatt a csomagösszerakó nem fért el (a lap 355 px-re tágult, 360-on a jobb margóba nyúlt; mérve 2026-09-19):
a „Mindkettő” díj-címkéje a felirat ALÁ kerül (a szegmens 301 → ~245 px), a tétel ára a leírás alá (a leghosszabb
sor — „Keresőoptimalizálás” — 331 px-ről a kapcsoló + a leghosszabb szó szélességére); a kapcsoló a két sor mellett. */
@media (max-width:374px){
.szegmens label:has(small){flex-direction:column;gap:.22rem;padding-block:.32rem}
.tetel{grid-template-columns:auto minmax(0,1fr);row-gap:.4rem}
.tetel>:first-child{grid-row:span 2}
.tetel-ar{grid-column:2;text-align:left}
.tetel-ar:empty{display:none}
.tetel-ar small{display:inline;margin:0 0 0 .3rem}
}
/* 4. MILYEN WEBOLDALT? — nem kötelező: típus-címkék (újra kattintva visszavonható) és egy rövid leírás */
.tipus-sor{display:flex;flex-wrap:wrap;gap:.45rem}
.tipus{padding:.5rem .85rem;border-radius:999px;border:1px solid var(--vonal);background:var(--felulet);font:600 .84rem/1 var(--f-body);color:var(--ink-dim);
transition:border-color .2s,color .2s,background-color .2s}
.tipus:hover{border-color:rgba(var(--acc-rgb),.45);color:var(--ink)}
.tipus[aria-pressed="true"]{border-color:rgba(var(--acc-rgb),.7);background:rgba(var(--acc-rgb),.12);color:var(--ink)}
.tipus:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.leiras{display:flex;flex-direction:column;gap:.4rem}
.leiras span{font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.leiras textarea{width:100%;resize:vertical;min-height:84px;padding:.75rem .9rem;border-radius:14px;border:1px solid var(--vonal);background:var(--felulet);
font:500 .92rem/1.5 var(--f-body);color:var(--ink)}
.leiras textarea::placeholder{color:var(--halk)}
.leiras textarea:focus{outline:none;border-color:rgba(var(--acc-rgb),.6);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15)}
.leiras small{align-self:flex-end;font:500 .66rem/1 var(--f-mono);color:var(--halk)}
/* a makett nav-jában a nap/hold jel — csak „mindkettő” háttérnél (a makett magától váltogat) */
.m-tema{display:none;align-items:center;gap:2px;padding:.12rem .2rem;border-radius:999px;background:rgba(var(--m-sz),.08)}
.m-tema svg{width:9px;height:9px;fill:none;stroke:rgba(var(--m-sz),.55);stroke-width:2.2}
.makett.ketto .m-tema{display:inline-flex}
/* az összesítő */
.osszesito{display:flex;flex-direction:column;gap:.9rem;padding:1.25rem 1.3rem;border-radius:var(--r-l);background:var(--felulet);border:1px solid var(--vonal);box-shadow:var(--arny-1)}
.ossz-fej{display:flex;justify-content:space-between;align-items:center}
.ossz-fej h3{font:700 1.02rem/1 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.ossz-fej span{font:600 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.ossz-lista{display:grid;gap:.45rem;list-style:none;max-height:210px;overflow:auto;padding-right:.3rem}
.ossz-lista li{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--ink-2)}
.ossz-lista li span:last-child{font:500 .8rem/1.4 var(--f-mono);color:var(--ink);white-space:nowrap}
.ossz-lista li.fo{font-weight:700;color:var(--ink)}
.ossz-lista li.bennevan span:last-child{color:var(--acc-mely)}
.ossz-vegso{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:.9rem;border-top:1px solid var(--vonal)}
.ossz-vegso-cim{display:flex;flex-direction:column;gap:.3rem;font:600 .68rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.ossz-vegso-cim small{font:500 .74rem/1.35 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink-dim)}
.ossz-szam{display:flex;align-items:baseline;gap:.35rem;font:800 clamp(1.9rem,3.2vw,2.35rem)/1 var(--f-display);letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
.ossz-szam small{font:500 .8rem/1 var(--f-mono);letter-spacing:0;color:var(--ink-dim)}
.ossz-egyszeri{display:flex;justify-content:space-between;font-size:.84rem;color:var(--ink-dim)}
/* A FIX ÁR kimondása — a kalkulátornál és az űrlap összesítőjénél. Halk, de nem elrejtve:
ha nem olvassák el, a két út (megrendelés / kérdés) megint alku-olvasatot kap. */
.ossz-fix{margin:10px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-dim);
padding-top:10px;border-top:1px solid var(--vonal)}
.ossz-fix b{color:var(--ink)}
.urlap-ossz-fix{margin:8px 0 0;font-size:.8rem;color:var(--ink-dim)}
.urlap-ossz-fix b{color:var(--ink)}
.ossz-egyszeri b{font:600 .82rem/1.4 var(--f-mono);color:var(--ink)}
.ossz-megj{font-size:.76rem;line-height:1.5;color:var(--ink-dim)}
.ossz .gomb{width:100%}
.ossz-gombok{display:flex;flex-direction:column;gap:.5rem}
.ossz-gombok .gomb{width:100%}
@media (max-width:1060px){
.kalk{grid-template-columns:1fr}
.kalk-jobb{position:relative;top:auto}
}
/* telefonon alsó sáv: végösszeg + ugrás az összesítőhöz */
.mobil-sav{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .75rem .7rem 1.1rem;
border-radius:18px;background:rgba(15,19,28,.94);border:1px solid rgba(var(--acc-rgb),.35);box-shadow:0 20px 50px -20px rgba(0,0,0,.95);color:#EFF2F8;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(140%);transition:transform .45s var(--ease)}
.mobil-sav.lat{transform:none}
.mobil-sav-szam{display:flex;flex-direction:column;gap:.25rem}
.mobil-sav-szam span{font:600 .6rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#98A2B8}
.mobil-sav-szam b{font:800 1.3rem/1 var(--f-display);letter-spacing:-.04em}
.mobil-sav-szam b small{font:500 .7rem/1 var(--f-mono);letter-spacing:0;color:#98A2B8;margin-left:.25rem}
@media (max-width:1060px){.mobil-sav{display:flex}}
/* ---------- 8. BÉRLÉS VAGY VÁSÁRLÁS — „vagy”-párbaj ---------- */
.parbaj{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch}
.parbaj-oldal{display:flex;flex-direction:column;gap:1rem;padding:1.6rem;border-radius:var(--r-xl);background:var(--felulet);border:1px solid var(--vonal);box-shadow:var(--arny-1)}
.parbaj-oldal.rms{border-color:rgba(var(--acc-rgb),.45)}
.parbaj-oldal ul{display:grid;gap:.6rem;list-style:none;font-size:.93rem}
.parbaj-oldal li{display:grid;grid-template-columns:18px 1fr;gap:.6rem}
.parbaj-oldal li svg{width:16px;height:16px;margin-top:.24rem;color:var(--acc-mely);stroke-width:2.4}
.parbaj-oldal .gomb{margin-top:auto;align-self:flex-start}
.parbaj-cimke{display:inline-flex;align-items:center;gap:.5rem;font:600 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-mely)}
.vagy{align-self:center;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--felulet-2);border:1px solid var(--vonal);
font:600 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
@media (max-width:860px){.parbaj{grid-template-columns:1fr}.vagy{justify-self:center}}
/* referenciák (10-29) — böngészőkeretes kártya, a kép a site nyitónézete. A havidíj-blokk a kalkulátor összesítőjének kicsinyítése
(`.ossz-lista` / `.ossz-vegso` hangja); az adatot az rms.js számolja a kalkulátor árlistájából. */
.ref-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.ref{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:var(--felulet);border:1px solid var(--vonal);
box-shadow:var(--arny-1);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.ref:hover,.ref:focus-within{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.4);box-shadow:var(--arny-2)}
.ref[hidden]{display:none}
.ref-kep{display:block;color:inherit;text-decoration:none;overflow:hidden}
.ref-keret{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;background:var(--felulet-2);border-bottom:1px solid var(--vonal-2)}
.ref-pontok{display:flex;gap:5px;flex:none}
.ref-pontok i{width:8px;height:8px;border-radius:50%;background:var(--vonal)}
.ref:hover .ref-pontok i:first-child{background:var(--acc)}
.ref-cim{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.28rem .7rem;border-radius:999px;background:var(--hat-2);
font:500 .72rem/1.2 var(--f-mono);color:var(--ink-dim);text-align:center}
.ref-kep img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .7s var(--ease)}
.ref:hover .ref-kep img{transform:scale(1.025)}
.ref-test{flex:1;display:flex;flex-direction:column;gap:.9rem;padding:1rem 1.1rem 1.1rem}
.ref-szoveg{display:flex;flex-direction:column;gap:.25rem}
.ref-szoveg b{font:600 1.02rem/1.25 var(--f-display);color:var(--ink)}
.ref-szoveg span{font-size:.86rem;color:var(--ink-dim)}
/* a havidíj — a kalkulátor „A választásod” dobozának kicsiben */
.ref-ar{display:flex;flex-direction:column;gap:.55rem;padding:.85rem .95rem;border-radius:var(--r-m);background:var(--uveg);border:1px solid var(--vonal)}
.ref-ar-fej{display:flex;justify-content:space-between;align-items:baseline;font:600 .62rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.ref-ar ul{display:grid;gap:.32rem;list-style:none}
.ref-ar li{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;color:var(--ink-2)}
.ref-ar li span:last-child{font:500 .74rem/1.45 var(--f-mono);color:var(--ink);white-space:nowrap}
.ref-ar li.fo{font-weight:700;color:var(--ink)}
.ref-ar-vegso{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;padding-top:.6rem;border-top:1px solid var(--vonal);
font:600 .62rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.ref-ar-vegso b{font:800 1.45rem/1 var(--f-display);letter-spacing:-.035em;color:var(--ink);text-transform:none}
.ref-ar-vegso b small{margin-left:.3rem;font:500 .7rem/1 var(--f-mono);letter-spacing:0;color:var(--ink-dim)}
.ref-gombok{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto}
.ref-link{display:inline-flex;align-items:center;gap:.4rem;font:600 .86rem/1 var(--f-body);color:var(--ink-dim);text-decoration:none;transition:color .25s}
.ref-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--ease)}
.ref-link:hover{color:var(--acc-mely)}
.ref-link:hover svg{transform:translate(2px,-2px)}
.ref-tovabb{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:1.8rem;text-align:center}
.ref-tovabb [data-ref-db]{font:500 .8rem/1 var(--f-mono);color:var(--ink-dim)}
.ref-megj{font-size:.8rem;color:var(--ink-dim);max-width:60ch}
@media (prefers-reduced-motion:reduce){.ref:hover,.ref:focus-within{transform:none}.ref:hover .ref-kep img{transform:none}}
@media (max-width:980px){.ref-racs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ref-racs{grid-template-columns:1fr}}
/* visszahívás / döntsétek el (10-29) — a kalkulátornál kisebb lépés; a mezők a megrendelő űrlap `.mezo`-ját öröklik */
.vh{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.4rem,3.5vw,2.6rem);
border-radius:var(--r-xl);background:var(--felulet);border:1px solid rgba(var(--acc-rgb),.3);box-shadow:var(--arny-2)}
.vh-szoveg{display:flex;flex-direction:column;gap:.9rem}
.vh-urlap{display:flex;flex-direction:column;gap:.9rem}
.vh-urlap .gomb{align-self:stretch;justify-content:center}
.vh-valaszt{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.vh-opcio{position:relative;cursor:pointer}
.vh-opcio input{position:absolute;opacity:0;pointer-events:none}
.vh-opcio>span{display:flex;flex-direction:column;gap:.2rem;height:100%;padding:.8rem .95rem;border-radius:var(--r-m);border:1px solid var(--vonal);
background:var(--felulet-2);transition:border-color .25s,background .25s}
.vh-opcio b{font:600 .92rem/1.25 var(--f-display);color:var(--ink)}
.vh-opcio small{font-size:.8rem;color:var(--ink-dim)}
.vh-opcio:hover>span{border-color:rgba(var(--acc-rgb),.35)}
.vh-opcio input:checked+span{border-color:rgba(var(--acc-rgb),.7);background:rgba(var(--acc-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.35)}
.vh-opcio input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.vh-hiba{font-size:.85rem;color:#E5484D}
.vh-kesz{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;border-radius:var(--r-m);background:rgba(var(--acc-rgb),.08);border:1px solid rgba(var(--acc-rgb),.35)}
.vh-kesz b{font:700 1.15rem/1.2 var(--f-display);color:var(--ink)}
.vh-kesz p{color:var(--ink-2)}
.vh-azon{font:500 .75rem/1 var(--f-mono);color:var(--ink-dim)}
.vh-azon:empty{display:none}
@media (max-width:860px){.vh{grid-template-columns:1fr}}
@media (max-width:420px){.vh-valaszt{grid-template-columns:1fr}}
/* ---------- 9. MÖGÖTTÜNK A BTS — az arany anyamárka egyetlen helye ---------- */
.bts-sav{position:relative;overflow:hidden;padding:clamp(3rem,6vw,4.5rem) 0;background:
radial-gradient(600px 360px at 18% 60%,rgba(198,154,78,.14),transparent 65%),var(--hat)}
.bts-sav .keret{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.bts-robot{width:clamp(130px,16vw,190px);height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.6)) brightness(.9)}
.bts-szoveg{display:flex;flex-direction:column;gap:.8rem;max-width:62ch}
.bts-szoveg .kicker{color:var(--acc-mely)}
.bts-szoveg p{color:var(--ink-dim)}
.bts-szoveg p b{color:var(--ink)}
.bts-jel{width:22px;height:22px;stroke:var(--acc);stroke-width:2.6}
@media (max-width:860px){.bts-sav .keret{grid-template-columns:1fr;text-align:left}.bts-robot{width:130px}}
/* ---------- 10. GYIK ---------- */
.gyik{display:grid;gap:.6rem;max-width:880px;margin-inline:auto}
.gyik details{border:1px solid var(--vonal);border-radius:var(--r-m);background:var(--felulet)}
.gyik summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.05rem 1.15rem;cursor:pointer;
font:700 1rem/1.35 var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary i{font:600 .7rem/1 var(--f-mono);font-style:normal;color:var(--acc-mely)}
.gyik summary svg{width:18px;height:18px;color:var(--ink-dim);transition:transform .3s var(--ease)}
.gyik details[open] summary svg{transform:rotate(45deg)}
.gyik details p{padding:0 1.15rem 1.15rem calc(1.15rem + 2.2rem);color:var(--ink-dim);font-size:.95rem}
/* ⚖️ A GYIK-ben LISTA is állhat (a kilépési díj hat kivétele, 2026-09-21) — a bekezdéssel AZONOS behúzással,
különben a felsorolás-jelek a kártyán KÍVÜLRE esnek (mérve: a doboz bal széle elé lógtak). */
.gyik details ul{margin:0 0 1.15rem;padding:0 1.15rem 0 calc(1.15rem + 2.2rem + 1.15rem);color:var(--ink-dim);font-size:.95rem}
.gyik details ul li{margin:.28rem 0}
.gyik details ul li::marker{color:var(--acc)}
.gyik details p+ul{margin-top:-.5rem}
@media (max-width:560px){.gyik details p{padding-left:1.15rem}
.gyik details ul{padding-left:calc(1.15rem + 1.15rem)}}
/* ---------- 11. KEZDJÜK EL ---------- */
/* a bts.hu „Kezdjük el” panelje, TÜKRÖZVE (Benjamin, 2026-09-19: „üljön a robot a dobozon, viszont ez legyen tükrözve és
itt a jobb oldalán üljön — a BTS-en a bal oldalon ül”; forrás: bts concept.css 14.). A robot a kép --k-el (62 %)
magasságában ül a panel tetején — ott fekszik a támaszkodó kéz alja (a bts.hu mérése): 62 %-a a panel fölé lóg,
ennyi hely kell fölötte (a szakasz felső térköze 0, ezért a panel margója adja). */
.kezdjuk{--kr:clamp(210px,21vw,300px);--k-el:.62;position:relative;isolation:isolate;margin-top:calc(var(--kr) * var(--k-el) + 1rem);
padding:clamp(2rem,5vw,3.4rem);border-radius:var(--r-xl);
background:radial-gradient(700px 420px at 85% 100%,rgba(var(--acc-rgb),.16),transparent 65%),var(--felulet);border:1px solid rgba(var(--acc-rgb),.25)}
/* a szöveg a robot lábai (a kép alsó 38 %-a, a panelbe lóg) mellett fut, nem alattuk */
.kezdjuk-szoveg{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;position:relative;z-index:1;max-width:calc(100% - var(--kr) * .72)}
.kezdjuk-gombok{display:flex;flex-wrap:wrap;gap:.7rem}
/* a jobb sarkon, tükrözve: a támaszkodó kéz (a kép 0–22 %-a — tükrözve a jobb széle) a lekerekítés közepénél, az ujjak
ráhajlanak a sarokra; a kéz-fények a tükrözéssel együtt fordulnak. Csak a fény lélegzik, a robot nem mozog. */
.k-robot{position:absolute;z-index:2;right:calc(var(--r-xl) * .3);top:0;height:var(--kr);aspect-ratio:423 / 700;
transform:translateY(calc(var(--k-el) * -100%)) scaleX(-1);pointer-events:none}
.k-robot-kep{display:block;width:100%;height:100%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.k-robot i{position:absolute;display:block;border-radius:50%;left:calc(var(--kx) * 1%);top:calc(var(--ky) * 1%);translate:-50% -50%;
mix-blend-mode:screen;pointer-events:none;--k-ero:1}
.k-robot .mag{width:14%;aspect-ratio:1;background:radial-gradient(circle,rgba(var(--acc-rgb),.95) 0%,rgba(var(--acc-rgb),.55) 34%,rgba(var(--acc-rgb),0) 70%);
animation:k-lelegzet 3.4s ease-in-out infinite}
.k-robot .halo{width:42%;aspect-ratio:1;background:radial-gradient(circle,rgba(var(--acc-rgb),.34) 0%,rgba(var(--acc-rgb),.13) 38%,rgba(var(--acc-rgb),0) 72%);
animation:k-lelegzet 3.4s ease-in-out infinite reverse}
.k-robot .mag2{width:9%;--k-ero:.6;animation-delay:-1.7s}
.k-robot .halo2{width:26%;--k-ero:.5;animation-delay:-1.7s}
@keyframes k-lelegzet{0%,100%{opacity:calc(.62 * var(--k-ero));transform:scale(.92)}50%{opacity:var(--k-ero);transform:scale(1.08)}}
/* világosban a panel sötét marad (.ej), de a robot 62 %-a a VILÁGOS lap fölé lóg: ott a `screen` nem ad fényt, és a fekete
vetett árnyék szürke folt — a bts.hu mérése szerint sima keverés, erősebb mag, halk, lila-szürke árnyék */
:root[data-theme="light"] .k-robot i{mix-blend-mode:normal}
:root[data-theme="light"] .k-robot .mag{background:radial-gradient(circle,rgba(var(--acc-rgb),.9) 0%,rgba(var(--acc-rgb),.5) 40%,rgba(var(--acc-rgb),0) 72%)}
:root[data-theme="light"] .k-robot .halo{background:radial-gradient(circle,rgba(var(--acc-rgb),.22) 0%,rgba(var(--acc-rgb),.09) 42%,rgba(var(--acc-rgb),0) 74%)}
:root[data-theme="light"] .k-robot-kep{filter:drop-shadow(0 14px 20px rgba(28,22,54,.26))}
@media (prefers-reduced-motion:reduce){.k-robot i{animation:none;opacity:calc(.8 * var(--k-ero))}}
/* telefonon a szöveg teljes szélességű: a robot lábai a panel jobb felső részébe lógnak — a szöveg alattuk indul */
@media (max-width:760px){.kezdjuk-szoveg{max-width:none;padding-top:calc(var(--kr) * (1 - var(--k-el)) - .6rem)}}
/* ---------- 11/b. AZ ŰRLAP (ajánlatkérés + megrendelés) ----------
A panelen BELÜL, a szöveg ALATT fut — a robot csak a panel tetejére lóg be, így az űrlap mindig szabad
területen van (a bts.hu-n a robot a bal, az űrlap a jobb hasáb; itt a robot a jobb sarok, ezért alá kerül). */
.urlap{display:flex;flex-direction:column;gap:.95rem;position:relative;z-index:1;margin-top:1.6rem;
padding-top:1.5rem;border-top:1px solid var(--vonal)}
.urlap-mod{grid-template-columns:repeat(2,auto)}
.urlap-lead{font-size:.88rem;line-height:1.55;color:var(--ink-dim);margin:-.35rem 0 0}
/* a kalkulátor összeállítása — ugyanaz a hangulat, mint az összesítő, de kisebb */
.urlap-ossz{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem;border-radius:var(--r-m);
background:var(--uveg);border:1px solid var(--vonal)}
.urlap-ossz-fej{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.urlap-ossz-fej b{font:700 .95rem/1.2 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.urlap-ossz-fej a{font:600 .78rem/1 var(--f-body);color:var(--acc-mely);border-bottom:1px solid transparent}
.urlap-ossz-fej a:hover{border-bottom-color:currentColor}
.urlap-ossz-lista{display:grid;gap:.3rem;list-style:none;max-height:150px;overflow:auto;padding-right:.2rem}
.urlap-ossz-lista li{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--ink-2)}
.urlap-ossz-lista li span:last-child{font:500 .76rem/1.4 var(--f-mono);color:var(--ink);white-space:nowrap}
.urlap-ossz-lista li.bennevan span:last-child{color:var(--acc-mely)}
.urlap-ossz-vegso{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.5rem;border-top:1px solid var(--vonal);
font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.urlap-ossz-vegso b{font:800 1.15rem/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);text-transform:none}
.urlap-ossz-vegso.halk{border-top:0;padding-top:0}
.urlap-ossz-vegso.halk b{font:600 .84rem/1.3 var(--f-mono);letter-spacing:0}
/* mezők */
.urlap-sor{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.mezo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.mezo>span{display:flex;align-items:baseline;gap:.4rem;font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.mezo>span i{font-style:normal;color:var(--acc-mely)}
.mezo>span small{font:500 .66rem/1 var(--f-mono);letter-spacing:.04em;text-transform:none;color:var(--halk)}
.mezo input,.mezo textarea{width:100%;padding:.7rem .9rem;border-radius:14px;border:1px solid var(--vonal);background:var(--felulet);
font:500 .92rem/1.5 var(--f-body);color:var(--ink)}
.mezo textarea{resize:vertical;min-height:80px}
.mezo input::placeholder,.mezo textarea::placeholder{color:var(--halk)}
.mezo input:focus,.mezo textarea:focus{outline:none;border-color:rgba(var(--acc-rgb),.6);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15)}
.mezo input[aria-invalid="true"],.mezo textarea[aria-invalid="true"]{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
/* jelölőnégyzet — a szöveg a négyzet mellett fut, a magyarázat alatta */
.jelolo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;cursor:pointer;
font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.jelolo input{width:19px;height:19px;margin-top:.12rem;flex:none;accent-color:var(--acc);cursor:pointer}
.jelolo small{display:block;margin-top:.22rem;font-size:.78rem;line-height:1.5;color:var(--ink-dim)}
.jelolo a{color:var(--acc-mely);border-bottom:1px solid rgba(var(--acc-rgb),.4)}
.jelolo a:hover{border-bottom-color:currentColor}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* ⚖️ K1 — a kiemelt öt adat a gomb közvetlen közelében (a keret és a háttér adja a „kiemelten” feltételt) */
.rendel-blokk{display:flex;flex-direction:column;gap:.85rem;padding:1.05rem 1.15rem;border-radius:var(--r-m);
background:rgba(var(--acc-rgb),.07);border:1px solid rgba(var(--acc-rgb),.3)}
.rendel-blokk h3{font:700 .98rem/1.2 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.rendel-adatok{display:grid;gap:.6rem}
.rendel-adatok>div{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:.2rem .9rem}
.rendel-adatok dt{font:600 .68rem/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.rendel-adatok dd{font-size:.86rem;line-height:1.55;color:var(--ink-2)}
.rendel-adatok dd b{color:var(--ink)}
.rendel-blokk .jelolo{padding-top:.75rem;border-top:1px solid rgba(var(--acc-rgb),.22)}
@media (max-width:560px){.rendel-adatok>div{grid-template-columns:1fr}}
/* hiba, gomb, jegyzet */
.urlap-hiba{padding:.7rem .9rem;border-radius:12px;border:1px solid rgba(229,72,77,.5);background:rgba(229,72,77,.1);
font-size:.86rem;line-height:1.5;color:#FFC9CB}
/* ⚠ A `.gomb` alapból `white-space:nowrap` — a „Megrendelés fizetési kötelezettséggel” felirat 360 px-en
emiatt 35 px-rel kilógott a gombjából (mérve). A teljes szélességű gomb felirata TÖRDELŐDHET, a gomb
pedig magasodik: a jogszabály a feliratot írja elő, nem azt, hogy egy sorban legyen. */
.gomb-teljes{width:100%;white-space:normal;text-align:center;line-height:1.3}
.gomb[disabled]{opacity:.55;pointer-events:none}
.urlap-jegyzet{font-size:.78rem;line-height:1.5;color:var(--ink-dim);text-align:center;margin-top:-.35rem}
/* a küldés utáni visszajelzés — az űrlap HELYÉRE */
.urlap-kesz{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;position:relative;z-index:1;
margin-top:1.6rem;padding-top:1.5rem;border-top:1px solid var(--vonal)}
.kesz-ikon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(var(--acc-rgb),.16)}
.kesz-ikon svg{width:24px;height:24px;fill:none;stroke:var(--acc-vil);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.urlap-kesz.bukott .kesz-ikon{background:rgba(229,72,77,.16)}
.urlap-kesz.bukott .kesz-ikon svg{stroke:#FF9B9D}
.urlap-kesz h3{font:700 1.15rem/1.2 var(--f-display);color:var(--ink);letter-spacing:-.025em}
.urlap-kesz p{font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.urlap-kesz .kesz-azonosito{font:600 .84rem/1.4 var(--f-mono);color:var(--acc-mely)}
/* ⚠ A `hidden` ATTRIBÚTUM ÖNMAGÁBAN KEVÉS: a böngésző `[hidden]{display:none}` szabálya a legkisebb
fajsúlyú, ezért minden osztály-szabály (`.urlap{display:flex}`, `.mezo`, `.jelolo`, `.rendel-blokk`)
FELÜLÍRNÁ — a „rejtett” elem látszana. Ez a sor a szakasz VÉGÉN áll, hogy az azonos fajsúlyú
szabályokat (pl. `.urlap-ossz-vegso.halk`) is verje. */
.urlap[hidden],.urlap-kesz[hidden],.urlap [hidden]{display:none}
@media (max-width:560px){.urlap-sor{grid-template-columns:1fr}}
/* ---------- 12. LÁBLÉC ---------- */
.lablec{padding:3.2rem 0 2rem;background:var(--hat);border-top:1px solid var(--vonal-2);color:var(--ink-dim)}
.lablec-racs{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.lablec h2{font:600 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1rem}
.lablec-oszlop{display:flex;flex-direction:column;gap:.55rem;font-size:.9rem}
.lablec-oszlop a:hover{color:var(--ink)}
.lablec-marka{display:flex;flex-direction:column;gap:1rem;max-width:36ch;font-size:.9rem}
.lablec-ciklus{display:flex;flex-direction:column;gap:.45rem;max-width:260px}
.lablec-ciklus span{font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--halk)}
.lablec-al{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--vonal-2);font-size:.8rem;color:var(--halk)}
/* ⚖️ 2026-09-21: jogi linkek + az ajánlatkérés természete a láblécben. A megjegyzés SAJÁT SORBA kerül
(100 % szélesség), különben a flex-sorban a három elem közé szorulna és olvashatatlanná törne. */
.lablec-jogi a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.lablec-jogi a:hover,.lablec-jogi a:focus-visible{color:var(--acc);border-bottom-color:currentColor}
.lablec-megj{flex:1 0 100%;margin-top:.5rem;line-height:1.6;color:var(--halk)}
.lablec-megj b{color:var(--ink-dim)}
@media (max-width:760px){.lablec-racs{grid-template-columns:1fr}}
/* ---------- 13. BEÚSZÁS — csak ha van JS és nincs mozgás-csökkentés ---------- */
.js .beuszik{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .beuszik.lat{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.js .beuszik{opacity:1;transform:none}
.gyuru-forog{animation:none}
}
/* ============================================================
JOGI MODÁL (2026-09-21) — a szöveget a `legal.php` adja, a viselkedést az `assets/rms-jogi.js`.
A lábléc linkjei `href`-fel IS működnek (`jogi-lap.php`): JS nélkül a látogató nem üres lapot kap.
============================================================ */
.jogi-nyitva{overflow:hidden}
.jogi-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(.8rem,3vw,2.4rem)}
.jogi-modal[hidden]{display:none}
.jogi-hatter{position:absolute;inset:0;background:rgba(3,5,9,.72);backdrop-filter:blur(3px)}
.jogi-panel{position:relative;width:min(56rem,100%);max-height:min(88vh,60rem);display:flex;flex-direction:column;
background:var(--felulet);border:1px solid var(--vonal);border-radius:var(--r-m);overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,.55)}
.jogi-fej{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
padding:1.15rem 1.25rem;border-bottom:1px solid var(--vonal)}
.jogi-cim{font:700 1.18rem/1.3 var(--f-cim);margin:0;color:var(--ink)}
.jogi-upd{margin:.25rem 0 0;font-size:.85rem;color:var(--halk)}
.jogi-gombok{display:flex;align-items:center;gap:.55rem;flex:none}
.jogi-szoveg{overflow:auto;padding:1.25rem 1.35rem 2rem;color:var(--ink-dim);line-height:1.68;font-size:.95rem}
.jogi-szoveg:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.jogi-szoveg h4{font:600 1.03rem/1.35 var(--f-cim);color:var(--ink);margin:1.9rem 0 .55rem;
padding-bottom:.32rem;border-bottom:1px solid var(--vonal)}
.jogi-szoveg h4:first-child{margin-top:0}
.jogi-szoveg p,.jogi-szoveg li{margin:.55rem 0}
.jogi-szoveg ul{padding-left:1.3rem}
.jogi-szoveg b{color:var(--ink)}
.jogi-szoveg a{color:var(--acc)}
.jogi-szoveg .jogi-bev{padding:.9rem 1.05rem;border:1px solid var(--vonal);border-radius:12px;background:var(--hatter)}
.jogi-szoveg .jogi-tabla{width:100%;border-collapse:collapse;margin:.9rem 0;font-size:.9rem}
.jogi-szoveg .jogi-tabla th,.jogi-szoveg .jogi-tabla td{border:1px solid var(--vonal);padding:.45rem .6rem;
text-align:left;vertical-align:top}
.jogi-szoveg .jogi-tabla th{background:var(--hatter);color:var(--ink);font-weight:600}
@media (max-width:620px){
.jogi-fej{flex-direction:column;gap:.7rem}
.jogi-gombok{width:100%;justify-content:space-between}
/* ⚠ Telefonon a táblázat sorokra bomlik — különben vízszintesen kilógna a modálból. */
.jogi-szoveg .jogi-tabla,.jogi-szoveg .jogi-tabla tbody,.jogi-szoveg .jogi-tabla tr,
.jogi-szoveg .jogi-tabla td,.jogi-szoveg .jogi-tabla th{display:block}
.jogi-szoveg .jogi-tabla tr{margin-bottom:.75rem;border:1px solid var(--vonal);border-radius:10px;overflow:hidden}
.jogi-szoveg .jogi-tabla th,.jogi-szoveg .jogi-tabla td{border:0;border-bottom:1px solid var(--vonal)}
}
/* =========================================================
SÜTI-PANEL — a gyár közös rétege, a LAP tokenjeivel
---------------------------------------------------------
A kód közös (`assets/suti.js`), a megjelenés a site-é: minden érték egy `--suti-*` tokenből
jön, aminek van tartalék-értéke. Egy másik site-on elég ezt a blokkot átvenni és a tokeneket
a saját palettájára állítani.
⚠ Benjamin kérése: „ne takarja a footert, ne rondítsa az oldalt" — ezért LEBEGŐ KÁRTYA a bal
alsó sarokban (nem teljes szélességű sáv), telefonon a képernyő aljához simulva, és amíg
nyitva van, a lap saját lebegő sávja (a kalkulátoré) félreáll.
========================================================= */
.suti-panel{
--suti-hat:var(--felulet,#0F131C); --suti-ink:var(--ink,#EFF2F8); --suti-halk:var(--ink-dim,#98A2B8);
--suti-vonal:var(--vonal,rgba(255,255,255,.09)); --suti-acc:var(--acc,#FF7A1A); --suti-acc-ink:var(--acc-ink,#1A0B02);
position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:120;width:min(27rem,calc(100vw - 24px));
opacity:0;transform:translateY(14px);transition:opacity .26s var(--ease,ease),transform .26s var(--ease,ease)}
.suti-panel.lat{opacity:1;transform:none}
.suti-panel[hidden]{display:none}
.suti-kartya{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.25rem 1.1rem;
border-radius:var(--r-l,22px);background:var(--suti-hat);border:1px solid var(--suti-vonal);
box-shadow:0 24px 60px -24px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.25)}
.suti-x{position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:none;border:0;cursor:pointer;color:var(--suti-halk)}
.suti-x:hover{background:var(--uveg,rgba(255,255,255,.06));color:var(--suti-ink)}
.suti-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.suti-cim{font:700 1.02rem/1.25 var(--f-display,inherit);letter-spacing:-.02em;color:var(--suti-ink);padding-right:1.6rem}
.suti-szoveg{font-size:.86rem;line-height:1.55;color:var(--suti-halk)}
.suti-reszletek{display:flex;flex-direction:column;gap:.55rem;padding:.75rem 0 .1rem;border-top:1px solid var(--suti-vonal)}
.suti-sor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;cursor:pointer;
font-size:.86rem;line-height:1.45;color:var(--suti-ink)}
.suti-sor[hidden]{display:none}
.suti-sor input{width:18px;height:18px;margin-top:.1rem;accent-color:var(--suti-acc);cursor:pointer}
.suti-sor small{display:block;margin-top:.15rem;font-size:.78rem;line-height:1.5;color:var(--suti-halk)}
.suti-sor small i{font-style:normal}
.suti-sor-zart{cursor:default;opacity:.85}
.suti-sor-zart input{cursor:not-allowed}
/* ⚖️ AZONOS SÚLY: az „Elutasítom" ugyanaz a gomb-alak, mint az „Elfogadom" — a nemet ugyanolyan
könnyű legyen mondani. Csak a kitöltés különbözik, a méret és a hangsúly nem. */
.suti-gombok{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.15rem}
/* ⚠ `flex:1 1 0` (nem `auto`): az azonos súly nem hasonló súlyt jelent — `auto`-val a két gomb
a SAJÁT szövege szerint kapott helyet (mérve: 193 vs 190 px). Nullról indulva pontosan egyforma. */
.suti-gomb{flex:1 1 0;min-width:8.5rem;min-height:42px;padding:.6rem 1rem;border-radius:999px;cursor:pointer;
font:700 .88rem/1.25 var(--f-body,inherit);border:1px solid var(--suti-vonal);background:var(--uveg,rgba(255,255,255,.05));
color:var(--suti-ink);transition:transform .2s,border-color .2s,background-color .2s}
.suti-gomb:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--suti-acc) 55%,transparent)}
.suti-gomb:focus-visible{outline:2px solid var(--suti-acc);outline-offset:2px}
.suti-gomb-fo{border-color:color-mix(in srgb,var(--suti-acc) 45%,transparent)}
.suti-gomb-halk{flex:0 0 auto;min-width:0;border-color:transparent;background:none;color:var(--suti-halk);font-weight:600}
.suti-gomb-halk:hover{color:var(--suti-ink);background:var(--uveg,rgba(255,255,255,.05))}
.suti-gomb-mentes{background:var(--btn,var(--suti-acc));color:var(--suti-acc-ink);border-color:transparent}
.suti-lab{font-size:.74rem;line-height:1.5;color:var(--halk,#5F6980)}
.suti-lab b{font-weight:600;color:var(--suti-halk)}
/* amíg a panel nyitva van, a kalkulátor lebegő sávja félreáll (telefonon egymásra csúsznának) */
html.suti-nyitva [data-mobil-sav]{opacity:0;pointer-events:none}
@media (max-width:560px){
.suti-panel{left:8px;right:8px;bottom:8px;width:auto}
.suti-gomb{flex:1 1 100%}
.suti-gomb-halk{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.suti-panel{transition:none}}
/* =========================================================
KARBANTARTÁS-KÉPERNYŐ — a lap saját arculatán
---------------------------------------------------------
A kód közös (`assets/karbantartas.js`), a látvány az RMS-é: mély éjkék alap, narancs jel, a lap
betűi. A takarás TELJES (inset:0), és a lap görgetése áll — de ez nem biztonsági határ, csak
karbantartás-jelzés (a HTML kimegy).
========================================================= */
html.karbantartas-alatt, html.karbantartas-alatt body { overflow: hidden; }
#karbantartas{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;text-align:center;
background:var(--hat,#07090E);color:var(--ink,#EFF2F8);font-family:var(--f-body,system-ui,sans-serif)}
.kb-hatter{position:absolute;inset:-30%;filter:blur(60px);opacity:.55;pointer-events:none;
background:radial-gradient(42% 48% at 28% 26%,rgba(var(--acc-rgb,255,122,26),.55),transparent),
radial-gradient(44% 44% at 74% 68%,color-mix(in srgb,var(--acc-2,#FFB054) 32%,transparent),transparent)}
.kb-belso{position:relative;z-index:2;max-width:34rem;padding:2.5rem 1.6rem}
.kb-jel{display:block;width:84px;height:84px;margin:0 auto 1.6rem}
.kb-jel svg{width:100%;height:100%}
.kb-csempe{fill:var(--felulet,#0F131C);stroke:rgba(var(--acc-rgb,255,122,26),.28);stroke-width:1.5}
.kb-hatszog{fill:none;stroke:var(--acc,#FF7A1A);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.kb-led{fill:var(--acc-2,#FF9A4D);animation:kb-lelegzet 1.8s ease-in-out infinite}
@keyframes kb-lelegzet{0%,100%{opacity:.45}50%{opacity:1}}
.kb-cim{font:800 clamp(1.6rem,4.5vw,2.4rem)/1.15 var(--f-display,inherit);letter-spacing:-.03em;
background:var(--grad,linear-gradient(118deg,#FF7A1A,#FFB054));-webkit-background-clip:text;background-clip:text;color:transparent}
.kb-szoveg{margin-top:.9rem;font-size:1rem;line-height:1.65;color:var(--ink-2,#C9D0DD)}
.kb-lab{margin-top:1.6rem;font-size:.86rem;color:var(--ink-dim,#98A2B8)}
.kb-lab a{color:var(--acc-vil,#FF9A4D);border-bottom:1px solid rgba(var(--acc-rgb,255,122,26),.4)}
@media (prefers-reduced-motion:reduce){.kb-led{animation:none;opacity:1}}
/* A NYELVVÁLTÓ (ADR 0004) — egy nyelvnél rejtve (nyelv.js). Asztalon a fejlécben (az ikon-gombok
nyelvén), 1280 px alatt a mobil menüben (a fejlécben ott a hamburger). */
.rms-nyelvvalto{display:flex;align-items:center;gap:.3rem}
.rms-nyelvgomb{height:40px;min-width:40px;padding:0 .7rem;border-radius:12px;border:1px solid var(--vonal);background:var(--uveg);color:var(--ink-2);font:700 .78rem/1 var(--f-body);letter-spacing:.06em;cursor:pointer;transition:border-color .2s,color .2s}
.rms-nyelvgomb:hover{border-color:rgba(var(--acc-rgb),.45);color:var(--ink)}
.rms-nyelvgomb.active{border-color:rgba(var(--acc-rgb),.7);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.35)}
.rms-nyelvvalto .webnyelv-lista{background:var(--felulet);color:var(--ink);border:1px solid var(--vonal)}
.mobil-menu .rms-nyelvvalto{padding:.9rem .4rem .2rem;flex-wrap:wrap}
@media (max-width:1279px){.fejlec .rms-nyelvvalto{display:none!important}}
/* ---------- SEBESSÉGMÉRŐ — „Mérd meg a mostani oldalad” (2026-09-26) ----------
A viselkedés közös (`sebesseg-meres.js` az `sm-` osztályokat rajzolja); a LÁTVÁNY az RMS-é: a pontszám nem gyűrű,
hanem a HAVI CIKLUS motívuma — 20 szegmensből rakott sáv, a kigyulladt szegmensek a pontszámig érnek (a JS a
`--sm-p`-t adja). A pontszám-színek a Google sávjai (0–49 · 50–89 · 90–100): a jelentésük a Google-é, nem a márkáé. */
.meres-szakasz{padding-top:clamp(2.6rem,6vw,4.6rem);padding-bottom:clamp(2.6rem,6vw,4.6rem)}
.meres-kartya{--sm-jo:#34D58C;--sm-kozepes:#FFB547;--sm-gyenge:#FF6363;
position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
padding:clamp(1.5rem,4vw,3rem);border-radius:var(--r-xl);border:1px solid rgba(var(--acc-rgb),.28);
background:radial-gradient(640px 380px at 0% 0%,rgba(var(--acc-rgb),.16),transparent 65%),var(--felulet);box-shadow:var(--arny-2)}
:root[data-theme="light"] .meres-kartya{--sm-jo:#12824F;--sm-kozepes:#A45F00;--sm-gyenge:#C62828}
.meres-szoveg{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.meres-urlap{width:100%;margin-top:.4rem}
.meres-mezo{display:flex;gap:.4rem;padding:.35rem;border-radius:999px;background:var(--hat-2);border:1px solid var(--vonal);transition:border-color .25s,box-shadow .25s}
.meres-mezo:focus-within{border-color:rgba(var(--acc-rgb),.7);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16)}
.meres-mezo input{flex:1;min-width:0;padding:.7rem 1rem;border:0;background:transparent;color:var(--ink);font:500 1rem/1.3 var(--f-body)}
.meres-mezo input:focus{outline:none}
.meres-mezo input::placeholder{color:var(--halk)}
.meres-mezo .gomb[disabled]{opacity:.7;cursor:progress;transform:none}
.meres-hiba{margin-top:.8rem;padding:.75rem 1rem;border-radius:14px;background:rgba(255,99,99,.1);border:1px solid rgba(255,99,99,.35);color:var(--ink);font-size:.92rem;line-height:1.5}
.sm-hiba-reszlet{display:block;margin-top:.4rem;font-size:.8rem;color:var(--ink-dim);overflow-wrap:anywhere}
.meres-tajek{font-size:.8rem;line-height:1.55;color:var(--ink-dim);max-width:52ch}
.meres-tajek a{color:var(--acc-mely);text-decoration:underline;text-underline-offset:2px}
.meres-halad{margin-top:1rem}
.sm-halad-lepes{font:600 .76rem/1.4 var(--f-mono);letter-spacing:.05em;color:var(--acc-mely)}
.sm-halad-sav{margin-top:.55rem;height:8px;border-radius:99px;background:var(--vonal);overflow:hidden}
.sm-halad-tolt{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width .4s linear}
.sm-halad-ido{margin-top:.45rem;font-size:.78rem;color:var(--ink-dim)}
/* a szegmens-sáv: 20 szegmens a havi ciklus rajzolatával (maszk), a kitöltés a pontszámig */
.meres-ures,.sm-gyuruk{display:grid;gap:.85rem}
.meres-ures{padding:1.3rem;border-radius:var(--r-l);border:1px dashed var(--vonal);background:var(--uveg)}
.meres-ures-sor,.sm-gyuru{display:grid;grid-template-columns:minmax(7.5rem,9.5rem) minmax(0,1fr) 2.6rem;align-items:center;gap:.9rem}
.meres-ures-nev,.sm-gyuru-nev{grid-column:1;grid-row:1;font:600 .66rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.meres-ures-sav,.sm-gyuru::after{grid-column:2;grid-row:1;display:block;height:14px;
-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 3px),transparent calc(5% - 3px) 5%);
mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 3px),transparent calc(5% - 3px) 5%)}
.meres-ures-sav{background:var(--vonal)}
.meres-ures-sz{grid-column:3;grid-row:1;text-align:right;font:700 1.1rem/1 var(--f-display);color:var(--halk)}
.sm-fut .meres-ures-sav{background:linear-gradient(90deg,var(--vonal) 0 30%,rgba(var(--acc-rgb),.75) 45%,var(--vonal) 60%) 0 0/300% 100%;animation:sm-szegmens 1.4s linear infinite}
@keyframes sm-szegmens{from{background-position:100% 0}to{background-position:-50% 0}}
.sm-van-eredmeny .meres-ures{display:none}
.meres-eredmeny{padding:clamp(1.1rem,2.6vw,1.5rem);border-radius:var(--r-l);border:1px solid var(--vonal);background:var(--uveg)}
.sm-er-cim{font:700 1.14rem/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.sm-er-cim:focus{outline:none}
.sm-er-url{margin-top:.25rem;font:500 .78rem/1.4 var(--f-mono);color:var(--ink-dim);overflow-wrap:anywhere}
.sm-gyuruk{margin-top:1.1rem}
/* a nézet-választó (Mobil | Gép) a sávok fölött — kétállású kapszula az RMS színében; a jel a teljesítmény-pont (a Google
sávjának színében), mérés közben lüktető pont, hibánál „!” */
.sm-fulek{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;max-width:100%;margin-top:1rem;padding:.3rem;
border-radius:999px;background:var(--hat-2);border:1px solid var(--vonal)}
.sm-ful{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:44px;padding:.45rem 1.15rem;border:0;
border-radius:999px;background:transparent;color:var(--ink-dim);font:700 .9rem/1.2 var(--f-body);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.sm-ful:hover{color:var(--ink)}
.sm-ful[aria-selected="true"]{color:var(--ink);background:rgba(var(--acc-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.6)}
.sm-ful:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
.sm-ful-jel{display:inline-grid;place-items:center;min-width:2.3em;height:1.6em;padding:0 .45rem;border-radius:99px;
font:800 .74rem/1 var(--f-mono);font-variant-numeric:tabular-nums;background:var(--uveg);color:var(--ink-dim)}
.sm-ful-jel.sm-sav-jo{color:var(--sm-jo);background:color-mix(in srgb,var(--sm-jo) 15%,transparent)}
.sm-ful-jel.sm-sav-kozepes{color:var(--sm-kozepes);background:color-mix(in srgb,var(--sm-kozepes) 15%,transparent)}
.sm-ful-jel.sm-sav-gyenge{color:var(--sm-gyenge);background:color-mix(in srgb,var(--sm-gyenge) 15%,transparent)}
.sm-ful-hiba .sm-ful-jel{color:var(--sm-gyenge);background:color-mix(in srgb,var(--sm-gyenge) 15%,transparent)}
.sm-ful-fut .sm-ful-jel::before{content:"";width:.5em;height:.5em;border-radius:50%;background:rgb(var(--acc-rgb));animation:sm-lukt .9s ease-in-out infinite alternate}
@keyframes sm-lukt{from{opacity:.25;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.sm-panel:focus{outline:none}
.sm-panel:focus-visible{outline:2px solid rgba(var(--acc-rgb),.55);outline-offset:6px;border-radius:8px}
.sm-panel-halad,.sm-panel-hiba{margin-top:1.1rem;padding:1rem 1.1rem;border-radius:16px}
.sm-panel-halad{border:1px dashed rgba(var(--acc-rgb),.4);background:var(--hat-2)}
.sm-panel-hiba{background:rgba(255,99,99,.1);border:1px solid rgba(255,99,99,.35);color:var(--ink);font-size:.92rem;line-height:1.5}
.sm-gyuru{--sm-szin:var(--sm-kozepes)}
.sm-gyuru.sm-sav-jo{--sm-szin:var(--sm-jo)} .sm-gyuru.sm-sav-gyenge{--sm-szin:var(--sm-gyenge)}
.sm-gyuru svg{display:none}
.sm-gyuru::after{content:"";background:linear-gradient(90deg,var(--sm-szin) calc(var(--sm-p,0) * 1%),var(--vonal) 0)}
.sm-gyuru-szam{grid-column:3;grid-row:1;text-align:right;font:800 1.2rem/1 var(--f-display);color:var(--sm-szin);font-variant-numeric:tabular-nums}
.sm-alcim{margin-top:1.4rem;font:600 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-mely)}
.sm-mutatok{display:grid;gap:.5rem;margin-top:.65rem}
.sm-mut{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-radius:16px;border:1px solid var(--vonal);background:var(--hat-2);--sm-szin:var(--sm-kozepes)}
.sm-mut.sm-sav-jo{--sm-szin:var(--sm-jo)} .sm-mut.sm-sav-gyenge{--sm-szin:var(--sm-gyenge)}
.sm-mut-bal{display:grid;gap:.1rem;min-width:0}
.sm-mut-cim{font-size:.9rem;color:var(--ink)}
.sm-mut-mit{font-size:.74rem;color:var(--ink-dim)}
.sm-mut-jobb{display:grid;justify-items:end;gap:.2rem;flex:none}
.sm-mut-ertek{font:800 1.05rem/1 var(--f-display);color:var(--sm-szin);font-variant-numeric:tabular-nums}
.sm-mut-sav{font:600 .6rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sm-szin)}
.sm-jav-ossz,.sm-jav-nincs{margin-top:.45rem;font-size:.82rem;color:var(--ink-dim)}
.sm-javaslatok{display:grid;gap:.5rem;margin-top:.65rem}
.sm-jav{display:grid;gap:.25rem;padding:.8rem 1rem;border-radius:16px;border:1px solid var(--vonal);background:var(--hat-2);border-left:3px solid var(--acc)}
.sm-jav-te{border-left-color:var(--vonal)}
.sm-jav-cimke{justify-self:start;padding:.2rem .6rem;border-radius:99px;font:600 .58rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.sm-jav-mi .sm-jav-cimke{background:var(--btn);color:var(--acc-ink)}
.sm-jav-te .sm-jav-cimke{border:1px solid var(--vonal);color:var(--ink-dim)}
.sm-jav-cim{font-size:.93rem;color:var(--ink);overflow-wrap:anywhere}
.sm-jav-leiras{font-size:.84rem;line-height:1.5;color:var(--ink-dim)}
.sm-jav-megtak{font:500 .72rem/1.3 var(--f-mono);color:var(--acc-mely)}
.sm-er-lab{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.3rem}
.sm-er-lab .meres-cta{white-space:normal;text-align:left;min-height:48px;line-height:1.25;min-width:0;max-width:100%}
.sm-er-jegy{margin-top:.85rem;font-size:.76rem;line-height:1.5;color:var(--ink-dim)}
@media (max-width:900px){.meres-kartya{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
.meres-mezo{flex-direction:column;border-radius:22px}
.meres-mezo .gomb{width:100%}
.meres-ures-sor,.sm-gyuru{grid-template-columns:minmax(0,1fr) 2.4rem;row-gap:.35rem}
.meres-ures-nev,.sm-gyuru-nev{grid-column:1 / -1}
.meres-ures-sav,.sm-gyuru::after{grid-column:1;grid-row:2}
.meres-ures-sz,.sm-gyuru-szam{grid-column:2;grid-row:2}
.sm-mut{align-items:flex-start}
.sm-fulek{display:grid;width:100%}
}
@media (prefers-reduced-motion:reduce){.sm-halad-tolt{transition:none}.sm-fut .meres-ures-sav{animation:none}.sm-ful-fut .sm-ful-jel::before{animation:none}}