/* Üveges fejléc gépen, üveges menügomb és teljes képernyős menü telefonon. Közös: főoldal, Termékek, Blog, cikkek. */
@media (min-width:821px){
  #siteNav{
    position:fixed; z-index:50; top:14px; left:50%; right:auto; width:min(1180px,calc(100% - 48px)); transform:translateX(-50%);
    padding:9px 10px 9px 20px; border:1px solid rgba(255,255,255,.24); border-radius:22px;
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 46%,rgba(255,255,255,.06)),rgba(10,16,30,.3);
    -webkit-backdrop-filter:blur(16px) saturate(185%) brightness(.8); backdrop-filter:blur(16px) saturate(185%) brightness(.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.1),0 16px 44px rgba(0,0,0,.38);
  }
  #siteNav .brand,#siteNav .nav-link,#siteNav .nav-cta{ color:#fff; opacity:1; text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.7); }
  #siteNav .nav-cta{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); transition:background .25s; }
  #siteNav .nav-cta:hover{ background:rgba(255,255,255,.28); }
  html:not(.fooldal) body{ padding-top:84px; }
  html:not(.fooldal){ scroll-padding-top:96px; }
}
@media (max-width:820px){
  /* a fejléc minden oldalon fent marad görgetés közben; a tartalom alatta indul */
  #siteNav{ position:fixed; top:0; left:0; right:0; background:none; border-bottom:0; }
  html:not(.fooldal) body{ padding-top:86px; }
  html:not(.fooldal){ scroll-padding-top:86px; }
  /* a fejléc üres része átengedi az érintést az alatta lévő gomboknak */
  #siteNav{ pointer-events:none; }
  #siteNav .brand,#siteNav .nav-toggle,#siteNav.menu-open .nav-links{ pointer-events:auto; }
  /* a logó is üveget kap, hogy görgetés közben ne ússzon rá olvashatatlanul a kártyákra */
  #siteNav .brand{ position:relative; z-index:3; min-height:46px; padding:6px 14px 6px 9px; gap:8px; font-size:1.02rem; border:1px solid rgba(255,255,255,.3); border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05) 50%,rgba(255,255,255,.09)),rgba(10,16,30,.2);
    -webkit-backdrop-filter:blur(10px) saturate(185%) brightness(.68); backdrop-filter:blur(10px) saturate(185%) brightness(.68);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 24px rgba(0,0,0,.3); text-shadow:0 1px 6px rgba(0,0,0,.55); }
  #siteNav .brand .bm-logo{ width:28px; height:28px; }
  #siteNav .nav-toggle{
    position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:46px; height:46px; padding:0; flex-shrink:0; cursor:pointer; border:1px solid rgba(255,255,255,.36); border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(255,255,255,.1)),rgba(10,16,30,.16);
    -webkit-backdrop-filter:blur(10px) saturate(185%) brightness(.68); backdrop-filter:blur(10px) saturate(185%) brightness(.68);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 8px 24px rgba(0,0,0,.35);
  }
  #siteNav .nav-toggle span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.5); transition:transform .25s ease,opacity .2s ease; }
  #siteNav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  #siteNav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  #siteNav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* a menü az egész képernyőt kitölti */
  .mnav-panel.open,#siteNav.menu-open .nav-links{
    position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:0;
    width:auto; height:100%; margin:0; overflow-y:auto; overscroll-behavior:contain; border:0;
    padding:calc(96px + env(safe-area-inset-top)) 28px calc(32px + env(safe-area-inset-bottom));
    background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 42%),rgba(6,10,20,.5);
    -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%);
    animation:menuBe .3s ease both;
  }
  .mnav-panel.open{ z-index:49; }
  .mnav-panel.open .nav-link,#siteNav.menu-open .nav-link{
    display:block; width:100%; box-sizing:border-box; padding:20px 2px; border-top:1px solid rgba(255,255,255,.16);
    color:#fff; opacity:1; text-align:left; text-shadow:none; font-size:clamp(1.9rem,9vw,2.6rem); font-weight:700; letter-spacing:-.02em; line-height:1.15;
    animation:menuSor .6s cubic-bezier(.16,1,.3,1) both;
  }
  .mnav-panel.open .nav-link:first-child,#siteNav.menu-open .nav-link:first-child{ border-top:0; }
  .mnav-panel.open .nav-link:nth-child(2),#siteNav.menu-open .nav-link:nth-child(2){ animation-delay:.06s; }
  .mnav-panel.open .nav-link:nth-child(3),#siteNav.menu-open .nav-link:nth-child(3){ animation-delay:.12s; }
  .mnav-panel.open .nav-cta,#siteNav.menu-open .nav-cta{
    display:block; width:100%; box-sizing:border-box; margin-top:26px; padding:17px 24px; border:0; border-radius:18px; color:#fff; text-align:center; text-shadow:none;
    background:linear-gradient(135deg,#00b8ae,#3f6fd1); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px rgba(0,0,0,.35);
    animation:menuSor .6s cubic-bezier(.16,1,.3,1) .18s both;
  }
  @keyframes menuBe{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes menuSor{ from{ opacity:0; transform:translateX(46px) rotate(1.4deg); } to{ opacity:1; transform:none; } }
}
@media (max-width:820px) and (max-height:480px){   /* fekvő telefon */
  .mnav-panel.open,#siteNav.menu-open .nav-links{ padding-top:70px; padding-bottom:14px; }
  .mnav-panel.open .nav-link,#siteNav.menu-open .nav-link{ padding:10px 2px; font-size:1.4rem; }
  .mnav-panel.open .nav-cta,#siteNav.menu-open .nav-cta{ margin-top:12px; padding:12px 20px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #siteNav{ background:rgba(10,16,30,.92); }
  .mnav-panel.open,#siteNav.menu-open .nav-links{ background:rgba(6,10,20,.97); }
  #siteNav .nav-toggle{ background:rgba(10,16,30,.85); }
  .pcard .pcard-szov,.pentek-strip .pentek-copy,a.blog-card,.product .p-body,.lab-iso,.post-toc,.post-svc,.post-cta,.pcard .pcard-lejatszo{ background:rgba(9,14,28,.88); }
}
/* ISO-jel a láblécben: minden oldalon ugyanott, a jogi sor fölött */
.lab-belso{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.lab-iso{ display:inline-flex; align-items:center; gap:11px; padding:7px 16px 7px 9px; border-radius:16px; color:#dbe2ee; font-size:.74rem; font-weight:600; letter-spacing:.04em; line-height:1.3; text-align:left; }
.lab-iso img{ display:block; width:52px; height:auto; }
/* a csillagok ne fussanak át a logón és a szövegen: a láblécben a jogi sor is kap egy kis takarást */
footer .copy{ line-height:1.5; }
/* telefonon a láblécben az aláhúzás a szöveg alatt marad, a megnyomható rész mégis elég nagy */
@media (max-width:820px){
  footer a{ display:inline-block; padding:10px 6px; border-bottom:0 !important; text-decoration:underline; text-decoration-color:rgba(0,212,200,.55); text-underline-offset:4px; }
}
/* Üveg a fejlécen kívül is. Gépen valódi elmosás. Telefonon csak a kinézete, mert sok elmosott felület görgetés közben megakaszthatja a gyengébb telefont. */
.pcard .pcard-szov,.pentek-strip .pentek-copy,a.blog-card,.product .p-body,.modal .panel,.lab-iso,.post-toc,.post-svc,.post-cta{
  border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 46%,rgba(255,255,255,.05)),rgba(9,14,28,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 34px rgba(0,0,0,.3);
}
.pentek-strip .pentek-copy{ padding:clamp(22px,3vw,36px); border-radius:22px; }
.product .p-body{ padding:clamp(20px,2.4vw,30px); border-radius:20px; }
.pcard .pcard-szov{ left:8px; right:8px; bottom:8px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; padding:11px 14px 12px; border-radius:11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 22px rgba(0,0,0,.35); }
.pcard .pcard-szov .pcard-mondat{ color:#dde3ee; }
.pcard .pcard-lejatszo{ border:1px solid rgba(255,255,255,.34); background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(255,255,255,.1)),rgba(10,16,30,.3); -webkit-backdrop-filter:blur(12px) saturate(185%) brightness(.7); backdrop-filter:blur(12px) saturate(185%) brightness(.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 22px rgba(0,0,0,.35); }
.modal .veil{ background:rgba(3,5,10,.52); }
.modal .panel{ background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 40%,rgba(255,255,255,.04)),rgba(9,14,28,.78); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%); }
@media (min-width:821px){
  .pcard .pcard-szov{ background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 46%,rgba(255,255,255,.06)),rgba(8,12,24,.5); -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(.42); backdrop-filter:blur(14px) saturate(170%) brightness(.42); }
  .pentek-strip .pentek-copy,a.blog-card,.product .p-body,.lab-iso,.post-toc,.post-svc,.post-cta{ background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 46%,rgba(255,255,255,.05)),rgba(9,14,28,.42); -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); }
}
@media (max-width:820px){
  .pcard .pcard-szov{ left:6px; right:6px; bottom:6px; padding:7px 10px 8px; border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 46%,rgba(255,255,255,.05)),rgba(7,11,22,.8); }
}
/* oldalváltáskor áttűnés a villanás helyett (a régebbi böngészők egyszerűen figyelmen kívül hagyják) */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.26s; }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .mnav-panel.open,#siteNav.menu-open .nav-links,.mnav-panel.open .nav-link,#siteNav.menu-open .nav-link,.mnav-panel.open .nav-cta,#siteNav.menu-open .nav-cta{ animation:none; }
}