/* Just Clean színtéma: fekete + neonzöld (a logó színei). A színeket itt, a :root blokkban lehet átírni. / Colour theme: edit the colours in :root. */
@font-face{font-family:"ISOCPEUR";src:url(../fonts/ISOCPEUR.woff?v=3) format("woff"),url(../fonts/ISOCPEUR.ttf?v=3) format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--black:#000;--bg:#040704;--surface:#0b130c;--surface2:#122015;--line:#1f3a22;--text:#e8f1e8;--muted:#93a893;--accent:#00ff00;--accent-hover:#7dff7d;--danger:#ff6a5c;--font:"ISOCPEUR","Segoe UI",system-ui,Arial,sans-serif}
*{box-sizing:border-box;font-variant-ligatures:none!important}
html{scroll-padding-top:4rem}
body{margin:0;font:20px/1.6 var(--font);font-synthesis:none;color:var(--text);background:var(--bg)}
strong,b,th,dt{font-weight:400}
h1,h2,h3{font-family:var(--font);font-weight:400;line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3.3rem);color:var(--accent)}h2{font-size:1.75rem;color:var(--accent)}h3{font-size:1.25rem}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
header.top{background:var(--black);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center;justify-content:space-between;padding-top:.8rem;padding-bottom:.8rem}
.brand{font:1.3rem var(--font);color:var(--accent);text-decoration:none}
nav a{white-space:nowrap;font-family:var(--font);font-size:1.05rem;color:var(--muted);text-decoration:none;margin-right:1.4rem;padding:.3rem 0;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--text);border-bottom-color:var(--accent)}
nav a.cta{display:inline-block;margin-top:.2rem;background:var(--accent);color:#000;padding:.35rem .9rem;border-radius:4px;border-bottom:0;margin-right:0}
nav a.cta:hover,nav a.cta[aria-current]{background:var(--accent-hover);color:#000}
.btn{display:inline-block;background:var(--accent);color:#000;font-family:var(--font);font-size:1.1rem;text-decoration:none;padding:.7rem 1.4rem;border-radius:4px;margin-top:.8rem}
.btn:hover{background:var(--accent-hover);color:#000}
button.btn{border:0;cursor:pointer}button.btn:disabled{opacity:.6;cursor:wait}
section{padding:3rem 0}
.alt{background:var(--surface)}
.panel{padding:0}
.banner{--h:clamp(168px,19.6vw,322px);--lw:min(40vw,calc(var(--h)*2.1));position:relative;isolation:isolate;overflow:hidden;background:#000;height:var(--h);border-bottom:2px solid var(--accent)}
.banner .logo{position:relative;display:block;height:100%;width:var(--lw);object-fit:cover;mix-blend-mode:screen}
.banner .photo{position:absolute;top:0;bottom:0;right:0;left:calc(var(--lw)*.8);background:url(../img/hardware.webp) 50% 62%/cover;-webkit-mask-image:linear-gradient(to right,transparent calc(var(--lw)*.2),#000 calc(var(--h)*.4 + 55%));mask-image:linear-gradient(to right,transparent calc(var(--lw)*.2),#000 calc(var(--h)*.4 + 55%))}
section.lead{padding:2.5rem 0 .5rem}
.lead p{max-width:40rem;font-size:1.15rem}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem}
.card{background:var(--surface);border-left:4px solid var(--accent);padding:1.4rem 1.6rem}
.card dl{margin:0}.card dt{color:var(--muted);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.8rem}.card dt:first-child{margin-top:0}.card dd{margin:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:0;padding:0;list-style:none}
.gallery figure{margin:0}.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface2)}
.gallery figcaption{font-size:.95rem;color:var(--muted);padding-top:.4rem}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:var(--surface);margin-bottom:2rem}
th,td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
th{background:var(--surface2);color:var(--accent);font:400 1rem var(--font);border-bottom:2px solid var(--accent)}
td strong{display:block;color:#fff;font-size:1.05em;padding-left:4ch;text-indent:-4ch}
tbody{counter-reset:svc}
tbody tr{counter-increment:svc}
td:first-child strong::before{content:counter(svc) ".";display:inline-block;min-width:4ch;text-indent:0;color:var(--accent)}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
td:last-child{font-family:var(--font);color:var(--accent)}
.desc{display:block;font-size:.95rem;color:var(--muted);margin-top:.2rem;max-width:42rem}
details.more{margin-top:.35rem}
details.more summary{cursor:pointer;color:var(--accent);font:.9rem var(--font)}
details.more .desc{margin-top:.4rem}
.note{color:var(--muted);font-size:.95rem}
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.dl{display:block;padding:1.4rem 1.6rem;border:1px solid var(--accent);color:var(--text);background:var(--surface);text-decoration:none}
.dl:hover{background:var(--accent);color:#000}.dl strong{display:block;font:400 1.2rem var(--font);margin-bottom:.3rem}
footer{background:var(--black);border-top:1px solid var(--line);color:var(--muted);padding:2rem 0;font-size:.95rem}
html[lang=hu] [data-l=en],html[lang=en] [data-l=hu]{display:none!important}
.lang{display:flex;gap:.3rem}
.lang button{font:.85rem var(--font);background:transparent;color:var(--muted);border:1px solid var(--line);padding:.25rem .65rem;border-radius:3px;cursor:pointer}
.lang button:hover{color:var(--text);border-color:var(--text)}
.lang button[aria-pressed=true]{background:var(--accent);color:#000;border-color:var(--accent)}
.tabbar{display:flex;gap:.3rem;overflow-x:auto;border-bottom:3px solid var(--accent);margin-bottom:1.5rem}
.tab{font:1rem var(--font);white-space:nowrap;padding:.7rem 1.5rem;border:0;border-radius:4px 4px 0 0;background:var(--surface);color:var(--muted);cursor:pointer}
.tab:hover{background:var(--surface2);color:var(--text)}
.tab[aria-selected=true]{background:var(--accent);color:#000}
.tabs-on>.panel>.panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panel[hidden]{display:none}
.tabs[data-depth="2"]>.tabbar{border-bottom:2px solid var(--line)}
.tabs[data-depth="2"]>.tabbar .tab{padding:.5rem 1.1rem;font-size:.95rem;background:transparent;color:var(--muted);border:1px solid var(--line);border-bottom:0}
.tabs[data-depth="2"]>.tabbar .tab:hover{background:var(--surface);color:var(--text)}
.tabs[data-depth="2"]>.tabbar .tab[aria-selected=true]{background:var(--surface2);color:var(--accent);border-color:var(--accent)}
.tabs[data-depth="3"]>.tabbar{border-bottom:1px solid var(--line);gap:1.4rem}
.tabs[data-depth="3"]>.tabbar .tab{padding:.35rem 0;font-size:.95rem;background:transparent;border-radius:0;color:var(--muted);border-bottom:3px solid transparent}
.tabs[data-depth="3"]>.tabbar .tab:hover{background:transparent;color:var(--text)}
.tabs[data-depth="3"]>.tabbar .tab[aria-selected=true]{background:transparent;color:var(--text);border-bottom-color:var(--accent)}
.quote-link{display:inline-block;margin-top:.4rem;font-size:.93rem}
.quote-link::after{content:" \2197"}
.qform{max-width:40rem}
.field{margin-bottom:1.1rem}
.field label{display:block;color:#fff}
.hint{display:block;color:var(--muted);margin-bottom:.2rem}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform select,.qform textarea{width:100%;font:inherit;padding:.65rem .8rem;border:2px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text)}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--accent)}
.check{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0}
.check input{margin-top:.45rem;width:1.1rem;height:1.1rem;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:1rem 1.2rem;border-left:5px solid var(--accent);background:var(--surface);max-width:40rem}
.form-msg.err{border-left-color:var(--danger)}
@media(max-width:700px){
.two,.gallery,.docs{grid-template-columns:1fr}
.banner{height:auto;display:flex;flex-direction:column-reverse}
.banner .logo{width:100%;height:auto}
.banner .photo{position:relative;left:auto;height:140px;margin-top:-1.5rem;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%);mask-image:linear-gradient(to bottom,transparent,#000 60%)}
}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.product{display:block;width:100%;text-align:left;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0;cursor:pointer;overflow:hidden}
.product:hover{border-color:var(--accent)}
.product.is-res{opacity:.7}
.p-img{position:relative;display:block;aspect-ratio:4/3;background:var(--surface2)}
.p-img img{display:block;width:100%;height:100%;object-fit:cover}
.p-img.noimg{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.p-img .ph{display:none}.p-img.noimg .ph{display:block}
.badges{position:absolute;left:.6rem;top:.6rem;display:flex;gap:.4rem}
.d-body>.badges{position:static;margin:.9rem 0 .2rem}
.badge{font-size:.8rem;line-height:1.5;padding:0 .6rem;border-radius:3px;background:var(--accent);color:#000}
.badge.used{background:#000;color:var(--accent);border:1px solid var(--accent)}
.badge.res{background:#000;color:var(--danger);border:1px solid var(--danger)}
.p-info{display:block;padding:.9rem 1rem 1rem}
.p-name{display:block;color:#fff;font-size:1.05em;line-height:1.3}
.p-price{display:block;margin-top:.4rem;color:var(--accent)}
dialog.pd{border:1px solid var(--accent);background:var(--bg);color:var(--text);padding:0;width:min(46rem,calc(100vw - 1.5rem));max-height:calc(100vh - 1.5rem);overflow:auto;border-radius:6px}
dialog.pd::backdrop{background:rgba(0,0,0,.82)}
.d-body{padding:1.2rem 1.4rem 1.6rem}
.d-close{float:right;margin:-.2rem -.4rem 0 .5rem;width:2.4rem;height:2.4rem;font:1.6rem/1 var(--font);color:#000;background:var(--accent);border:0;border-radius:4px;cursor:pointer;position:relative;z-index:1}
.d-main{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#000;clear:both}
.d-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.d-thumbs button{width:72px;height:54px;padding:0;background:#000;border:2px solid var(--line);cursor:pointer}
.d-thumbs button[aria-current=true]{border-color:var(--accent)}
.d-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.d-title{margin:.4rem 0 .2rem;font-size:1.5rem}
.d-price{margin:0 0 .8rem;color:var(--accent);font-size:1.2rem}
.specs{margin:.6rem 0;padding-left:1.2rem}
.warranty{color:var(--muted)}
html:has(dialog[open]){overflow:hidden}
/* MOBIL ÁRLISTA: keskeny képernyőn a táblázatsorok kártyává alakulnak (név, ár, részletek, link egymás alatt), így nincs oldalra csúszás */
@media(max-width:700px){
.tablewrap{overflow:visible}
table,tbody,tr{display:block}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
tr{display:flex;flex-direction:column;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
td{display:block;border:0;padding:0}
td:first-child{display:contents}
td:first-child>strong{order:1}
td:last-child{order:2;text-align:left;white-space:normal;padding:.2rem 0 .2rem 4ch}
td:first-child>details{order:3}
td:first-child>.quote-link{order:4;align-self:flex-start}
.tabbar{flex-wrap:wrap;overflow-x:visible}
.tab{padding:.6rem 1rem}
}
/* menü: a pontok szükség esetén új sorba törnek */
header.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem}
header.top nav a{margin-right:0}
/* termékoldal ki-/bekapcsolása (data/beallitasok.js) */
.when-off{display:none}
html[data-products="off"] .when-off{display:block}
html[data-products="off"] [data-feature="products"]{display:none!important}
/* szolgáltatás kód */
.svc-code{display:block;margin-top:.15rem;font-size:.85rem;color:var(--muted)}
.svc-code b{font-weight:400;color:var(--text);letter-spacing:.04em}
.qform input[readonly]{opacity:.85;border-style:dashed}