/* XPERI — minden oldalon azonos alapstílus: színek, tipográfia,
   fejléc, menü, gombok, nyelvváltó, lábléc. Oldalspecifikus stílus
   az adott oldal saját <style> blokkjában marad. */
:root{ --navy:#0f2a4a; --navy-2:#14355c; --blue:#0064c8; --blue-dark:#004f9e; --red:#e8483c; --bg:#f4f7fb; --bg-card:#ffffff; --text-gray:#5b6b7c; --text-light:#8a97a6; --border:#e4eaf1; --radius:14px; --maxw:1400px; --maxw-wide:1680px; --pad:32px; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
ul{list-style:none;}
img,svg{display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.logo{display:flex; align-items:center; gap:10px;}
.logo-dots{width:36px; height:36px; flex-shrink:0;}
.logo-text{display:flex; flex-direction:column; line-height:1.1;}
.logo-text .name{font-size:21px; font-weight:800; color:var(--navy); letter-spacing:0.5px;}
.logo-text .tag{font-size:9px; font-weight:700; color:var(--text-light); letter-spacing:0.6px;}

/* --- Fejléc logó bevezető animációja. Korábban ez minden oldal saját
       <style> blokkjában szerepelt külön-külön, ezért két oldalról
       (adatkezelés, impresszum) hiányzott is. Innen mind a kilenc oldal
       ugyanazt kapja, és egyetlen helyen hangolható.
       Az ütem rövidebb lett: korábban az "XPERI" alatti felirat csak a
       3,5. másodperc után kezdett látszani és az 5,5.-nél lett kész —
       addigra a látogató már máshová néz, így a beúszás elveszett. --- */
#brandDotRing{transform-origin:20px 20px; transition:transform 1.6s cubic-bezier(.5,0,.2,1);}
#brandDotRing circle{transition:fill .35s ease, opacity .35s ease;}
#headerLogo .logo-dots{position:relative; z-index:2; background:#fff;}
#headerLogo .logo-text{position:relative; z-index:1;}
#headerLogo .logo-text .name{color:var(--blue); opacity:1; transform:translateX(0); transition:opacity .7s ease .12s, transform 1.35s cubic-bezier(.2,.7,.2,1);}
#headerLogo .logo-text .tag{color:var(--text-light); opacity:1; transform:translateX(0); transition:opacity 1.05s cubic-bezier(.35,0,.35,1), transform 1.25s cubic-bezier(.2,.7,.2,1);}
#headerLogo .logo-text .name.pending{opacity:0; transform:translateX(-46px);}
#headerLogo .logo-text .tag.pending{opacity:0; transform:translateX(-22px);}
#headerLogo.intro-init #brandDotRing{transition:none !important;}
#headerLogo.intro-init #brandDotRing circle{transition:none !important;}
#headerLogo.intro-init .logo-text .name,
#headerLogo.intro-init .logo-text .tag{transition:none !important;}
.btn-primary{background:var(--blue); color:#fff;}
.lang-switch{display:flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; flex-shrink:0;}
.lang-btn{font-size:11px; font-weight:800; letter-spacing:0.4px; padding:7px 11px; background:#fff; color:var(--text-light); border:none; cursor:pointer; transition:.15s; font-family:inherit;}
.lang-btn:hover{color:var(--blue);}
.lang-btn.active{background:var(--blue); color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
footer .logo-text .name{color:#fff;}
footer .logo{margin-bottom:14px;}
footer p.desc{font-size:13px; line-height:1.6; max-width:260px;}
footer h4{color:#fff; font-size:13px; font-weight:800; letter-spacing:0.6px; margin-bottom:16px; text-transform:uppercase;}
footer ul li{margin-bottom:10px; font-size:13.5px;}
footer ul li a:hover{color:#fff;}
/* --- A fejléc egy sorban tartása ---------------------------------------
   Az itt következő szabályok szándékosan erősebb kiválasztót használnak
   (header ...), mint az oldalak saját stílusa. Az oldalstílus később
   töltődik be, és azonos erősségnél felülírná ezeket — emiatt tört
   kettőbe a menü minden aloldalon 1366 px alatt. */
@media (max-width: 1439px){
  header .header-actions{gap:10px; margin-right:0;}
  header .header-actions .btn{padding:9px 15px; font-size:11px;}
  header .lang-btn, header a.lang-btn{padding:5px 8px; font-size:10px;}
}
@media (max-width: 1366px){
  /* Táblagép fekvő tartásban (1024–1366 px). Minden fölösleges térközt
     elveszünk, a menü betűje viszont olvasható marad. */
  header .header-inner{padding:16px 16px; gap:10px;}
  header nav{gap:8px;}
  header nav a{font-size:10px; letter-spacing:0;}
  header .header-actions{gap:8px;}
  header .header-actions .btn{padding:9px 13px; font-size:10.5px; letter-spacing:.2px;}
  /* A gomb rövid felirata — ennyi hiányzott az egy sorhoz. */
  header .cta-hosszu{display:none;}
  header .cta-rovid{display:inline;}
}

/* A nyelvváltó gombokból valódi hivatkozás lett (külön cím a két nyelvnek),
   ezért az <a> elemre is kellenek a gomb-tulajdonságok. */
/* A gomb hosszú felirata az alapértelmezett; a rövidet csak a szűk
   táblagépes lépcső kapcsolja be. */
.cta-rovid{display:none;}
a.lang-btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:1;}
a.lang-btn:hover{color:var(--blue);}
a.lang-btn.active,a.lang-btn.active:hover{background:var(--blue); color:#fff;}

/* --- Reszponzív fejléc és lábléc. Ezek a szabályok a közös elemekre
       vonatkoznak, ezért itt a helyük, nem az egyes oldalak stílusában. --- */
@media (max-width: 1120px){
  /* 1024 px (a klasszikus táblagép fekvő tartásban) az utolsó szélesség,
     ahol a teljes menü még kifér. Itt már minden térköz a minimumon van;
     ennél keskenyebben a hamburger menü veszi át. */
  header .header-inner{padding:16px 10px; gap:7px;}
  header nav{gap:4px;}
  header nav a{font-size:9.5px;}
  header .header-actions{gap:6px;}
  header .header-actions .btn{padding:8px 11px; font-size:10px;}
  header .lang-btn, header a.lang-btn{padding:5px 6px; font-size:9.5px;}
}
@media (max-width: 980px){
  nav{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 620px){
  .header-inner{padding:14px 16px; gap:8px;}
  .header-inner .btn{padding:10px 14px; font-size:11px;}
  .lang-btn, a.lang-btn{padding:6px 8px; font-size:10px;}
  /* A felirat korábban itt teljesen eltűnt (display:none), ezért keskeny
     ablakban — pl. az előnézet oldalsó paneljében vagy telefonon — az
     "XPERI" alatt nem volt semmi. Elrejtés helyett zsugorodik. */
  .logo-text .tag{font-size:8px; letter-spacing:.2px; white-space:nowrap;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width: 420px){
  .header-inner{gap:6px;}
  .header-inner .btn{padding:9px 11px; font-size:10px; letter-spacing:.2px;}
  .logo-dots{width:30px; height:30px;}
  .logo-text .name{font-size:18px;}
  .logo-text .tag{font-size:7px; letter-spacing:-.1px;}
  /* Nagyon keskeny kijelzőn a 32 px-es oldalmargó már többet vesz el,
     mint amennyit ad — ettől lógott ki vízszintesen a tartalom. */
  :root{--pad:20px;}
}
@media (max-width: 374px){
  /* 375 px alatt a logó + nyelvváltó + ajánlatkérő gomb együtt már nem fér
     el egy sorban a felirattal — ott (és csak ott) marad az elrejtés. */
  .logo-text .tag{display:none;}
}
/* Az angol felirat ("IT SECURITY & MANAGED SERVICES") jóval hosszabb a
   magyarnál, ezért keskeny kijelzőn korábban kell zsugorítani, 414 px alatt
   pedig — ahol az ajánlatkérő gombbal együtt semmiképp nem fér el — elmarad.
   A magyar változat 375 px-ig végig látszik. */
@media (max-width: 459px){
  html[lang="en"] .logo-text .tag{font-size:7px; letter-spacing:-.1px;}
}
@media (max-width: 413px){
  html[lang="en"] .logo-text .tag{display:none;}
}

/* Közösségi ikonsor a láblécben — csak akkor jelenik meg, ha a
   config.php-ban van kitöltött cím. */
.kozosseg{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.kozosseg a{width:34px; height:34px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; background:rgba(255,255,255,.07);
  color:#a9b7c9; transition:background .15s, color .15s, transform .15s;}
.kozosseg a:hover{background:var(--blue); color:#fff; transform:translateY(-2px);}
.kozosseg svg{width:17px; height:17px;}

/* --- Sütisáv -------------------------------------------------------
   A lap aljához tapad, keskeny, és nem takarja el a tartalmat: a
   látogató elolvashatja anélkül, hogy bármit el kellene tüntetnie. */
.suti-sav{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:#0b2038; color:#c8d6e8; border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -8px 30px rgba(9,26,47,.22);
  animation:sutiFel .32s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sutiFel{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.suti-sav{animation:none;}}
.suti-belso{
  max-width:var(--maxw-wide); margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.suti-szoveg{font-size:12.5px; line-height:1.6; margin:0; flex:1 1 320px; min-width:0;}
.suti-szoveg a{color:#8fc4ff; font-weight:700; text-decoration:underline; white-space:nowrap;}
.suti-szoveg a:hover{color:#fff;}
.suti-gombok{display:flex; gap:10px; flex:0 0 auto;}
.suti-gomb{
  font:inherit; font-size:12px; font-weight:800; letter-spacing:.3px;
  padding:9px 18px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.suti-fo{background:var(--blue); color:#fff;}
.suti-fo:hover{background:#0057b0;}
.suti-halk{background:transparent; color:#c8d6e8; border-color:rgba(255,255,255,.28);}
.suti-halk:hover{border-color:#fff; color:#fff;}
.suti-gomb:focus-visible{outline:2px solid #8fc4ff; outline-offset:2px;}
/* A „Beállítások" nem gomb kinézetű: nem versenyez az elfogadással
   és az elutasítással, de ugyanúgy elérhető. */
.suti-szoveges{background:transparent; color:#8fc4ff; text-decoration:underline;
  padding:9px 6px; border:0;}
.suti-szoveges:hover{color:#fff;}

/* --- A részletes panel ---------------------------------------------
   Nem külön ablak: a sáv fölé nyílik ki, a lap látható marad mögötte.
   Csak akkor létezik egyáltalán, ha legalább két külön cél van. */
.suti-panel{border-top:1px solid rgba(255,255,255,.12); background:#081a2e;
  max-height:56vh; overflow-y:auto;}
.suti-panel-belso{display:block; padding-top:16px; padding-bottom:16px;}
.suti-cel{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07);}
.suti-cel h4{margin:0 0 3px; font-size:13px; color:#eaf2fb; letter-spacing:.2px;}
.suti-cel p{margin:0; font-size:12px; line-height:1.55; color:#9fb2c8; max-width:82ch;}
.suti-cel input[type=checkbox]{width:18px; height:18px; margin:1px 0 0; accent-color:var(--blue); cursor:pointer;}
label.suti-cel{cursor:pointer;}
label.suti-cel:hover h4{color:#fff;}
.suti-mindig{font-size:9.5px; font-weight:800; letter-spacing:.8px; color:#7d8fa3;
  background:rgba(255,255,255,.07); border-radius:4px; padding:4px 7px; white-space:nowrap; margin-top:1px;}
.suti-panel-gombok{display:flex; gap:10px; flex-wrap:wrap; padding-top:15px;}

@media (max-width:620px){
  /* Mobilon a szöveg és a gombsor egymás alá kerül, ezért itt minden
     méret egy fokkal kisebb: így a sáv a képernyőnek csak a töredékét
     foglalja el, és a lap alja továbbra is olvasható marad alatta. */
  .suti-belso{padding:10px 14px; gap:9px;}
  .suti-szoveg{font-size:11.8px; line-height:1.5; flex-basis:100%;}
  .suti-gombok{width:100%; gap:8px; flex-wrap:wrap;}
  .suti-gomb{flex:1; padding:8px 10px; font-size:11.5px; letter-spacing:0;}
  .suti-szoveges{flex:0 0 100%; order:-1; text-align:left; padding:0 0 2px;}
  .suti-panel{max-height:46vh;}
  .suti-panel-belso{padding-top:12px; padding-bottom:12px;}
  .suti-cel{gap:10px; padding:9px 0;}
  .suti-cel p{font-size:11.5px;}
  .suti-panel-gombok{gap:8px; padding-top:12px;}
  .suti-panel-gombok .suti-gomb{flex:1 1 100%;}
}

/* --- Tájékoztató árak doboz -------------------------------------------
   Az IT üzemeltetés oldal árlistájának kistestvére: ugyanaz a logika,
   kevesebb tétel. A struktúrált adat ugyanezekből a számokból épül,
   ezért a kettő nem tud elcsúszni egymástól. */
.arak{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 8px;}
.arak-doboz{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 28px; box-shadow:0 10px 30px rgba(15,42,74,.05);
}
.arak-doboz h3{
  font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--text-gray); margin-bottom:16px;
}
.arak-sorok{display:flex; flex-direction:column; gap:2px;}
.arak-sor{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--border);
}
.arak-sor:last-child{border-bottom:0;}
.arak-nev{font-size:14.5px; color:var(--navy); font-weight:600;}
.arak-ertek{font-size:15px; font-weight:800; color:var(--navy); white-space:nowrap;}
.arak-ertek small{font-size:12px; font-weight:600; color:var(--text-gray); margin-left:2px;}
.arak-kiemelt{
  margin-top:14px; background:#eef5ff; border:1px solid #cfe2fb; border-radius:9px;
  padding:11px 15px; font-size:13.5px; color:var(--navy-2); font-weight:600;
}
.arak-apro{
  font-size:12.5px; line-height:1.75; color:var(--text-gray); margin-top:14px;
}
.arak-apro a{color:var(--blue); font-weight:800; text-decoration:underline;}
.arak-apro a:hover{color:var(--blue-dark);}
@media (max-width:620px){
  .arak-doboz{padding:22px 20px;}
  .arak-sor{flex-direction:column; gap:3px; align-items:flex-start;}
}