/* ============================================================================
   KAPU + FELSŐ MENÜ — a "keret", ami nem dia.

   MIÉRT LÉTEZIK EZ A FÁJL (2026-08-14, mérésből):
   a nyitóképernyő (.entry-gate) és a menü belső elemei (.top-nav__*) stílusai a
   RÉGI `layout.css`-ben maradtak, amit az index.html már nem tölt be. Emiatt a
   kapu stílus nélkül, a normál folyamban ült, a fixen pozicionált dia-réteg
   ráfeküdt, és a BELÉPÉS gomb NEM VOLT KATTINTHATÓ (Playwright:
   "slide__inner intercepts pointer events").

   Ide csak a keret kerül. A diák stílusa marad a slides-*.css fájlokban.
   ============================================================================ */

/* ── RÉTEGREND (egy helyen, hogy ne csússzon szét) ──────────────────────────
   videó -2/0 · vignetta 1 · diák 20 · menü 60 · görgetésjelző 50 · KAPU 90 */

/* ── FELSŐ MENÜ ────────────────────────────────────────────────────────────
   A .top-nav pozícióját a slides-base.css adja (fix, felül, a diákkal AZONOS
   szélességi sávban). Itt csak a felület és a belső elemek jönnek.
   FONTOS: az elem .glass-nav osztályt is visel, ami függőleges HUD-ot csinál
   belőle — a flex-direction-t vissza kell venni sorra. */
/* LEBEGŐ ÜVEGSÁV (user, 2026-08-14): nem tapad a képernyő tetejéhez, hanem
   lebeg — kerek sarkok, üvegfelület, finom fénykeret. */
.top-nav.glass-nav {
  flex-direction: row;
  gap: clamp(1rem, 3vw, 3.25rem);
  top: clamp(10px, 1.6vh, 18px);
  /* A .glass-nav a 600px alatti sávban `top:auto; bottom:16px`-et kap (a régi FÜGGŐLEGES
     oldalsó HUD maradéka). Reset nélkül a felső sáv a képernyő aljáig nyúlik, és az
     üveghomályával letakarja a diákat — mérve 390x844-en: 815px magas nav, 15 takart
     szövegelem. Ezzel: 56px, 0 takart elem. */
  bottom: auto;
  height: auto;
  min-height: 3.4rem;
  padding-block: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(235, 237, 245, 0.16);
  border-bottom-color: rgba(235, 237, 245, 0.28);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(9, 12, 18, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.9rem 2.6rem rgba(6, 8, 14, 0.42);
}

/* A menü a nyitáskor LASSAN úszik be (a koreográfia 2. lépése), és belépés
   után marad. A kapun még nem kattintható. */
.top-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 1400ms var(--ease-out), transform 1400ms var(--ease-out);
}
body.nyitas-menu .top-nav {
  opacity: 0.9;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;   /* a kapun is kattintható legyen a fejezetmenü (user, 2026-08-17) */
}
/* A kapu (#entry-gate) teljes képernyős és z-index 90, a sáv 60 — ezért a kapun a VALÓDI
   egérkattintás a kapura esett, nem a fejezetgombra (mérve: elementFromPoint mind a négy
   gomb közepén a kaput adta vissza). A `pointer-events: auto` önmagában kevés volt.
   Belépés után visszaáll a normál 60-as réteg. A kapu paneljét nem takarja: a sáv 14–77px,
   a panel 99–742px között van. */
body:not(.is-entered) .top-nav { z-index: 120; }
body.is-entered .top-nav {
  opacity: 1;
  pointer-events: auto;
}

/* MÁRKAPÁROS: a mi jelünk × az ügyfél logója (user, 2026-08-14) */
.top-nav__brand-lockup {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.7rem;
  /* gomb, de LÁTVÁNYBAN nem az (user kérése) */
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.top-nav__brand-lockup:hover { background: rgba(235, 237, 245, 0.07); }
.top-nav__brand-lockup:active { transform: scale(0.985); }
.top-nav__brand-lockup:focus-visible {
  outline: 2px solid var(--lime-bright, #a1e657);
  outline-offset: 2px;
}

/* Újraindításkor rövid elsötétítés, hogy a töltés ne rántson egyet. */
body.ujraindul { transition: opacity 400ms ease-out; opacity: 0; }
.top-nav__x {
  color: rgba(235, 237, 245, 0.42);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1;
}
/* Az eredeti ügyféllogó ÁLLÓ felépítésű (lóhere, alatta a felirat) — menüsávban
   a felirat 6 px magas lett volna, olvashatatlanul. Ezért vízszintes párost
   készítettünk belőle (brief/media-szjz/szjz-logo-vizszintes.png). */
.top-nav__client {
  height: 1.85rem;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

.top-nav__brand {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
}
.top-nav__brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-nav__list {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.25rem, 1.2vw, 1.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav__link {
  position: relative;
  padding: 0.65rem 0.35rem;
  border: 0;
  background: transparent;
  color: rgba(235, 237, 245, 0.78);
  font: inherit;
  font-size: clamp(0.61rem, 0.9vw, 0.73rem);
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease;
}
/* aláhúzás-jelölő: az aktív fejezet */
.top-nav__link::after {
  position: absolute;
  right: 0.35rem;
  bottom: 0.2rem;
  left: 0.35rem;
  height: 2px;
  border-radius: 99px;
  background: var(--lime, #93d14f);
  box-shadow: 0 0 0.75rem rgba(147, 209, 79, 0.7);
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 180ms ease, transform 180ms ease;
}
.top-nav__link:hover,
.top-nav__link:focus-visible,
.top-nav__link.is-active {
  outline: none;
  color: var(--lime-bright, #a1e657);
}
.top-nav__link:hover::after,
.top-nav__link:focus-visible::after,
.top-nav__link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* asztali gépen nincs hamburger */
.top-nav__toggle { display: none; }

/* ── KAPU ──────────────────────────────────────────────────────────────────
   Teljes képernyő, a diák ÉS a menü fölött. A videó látszik mögötte. */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  /* alapállapot: még nem úszott be. Az átmenet HOSSZÚ és lassú — a JS állítja
     be a `--kapu-ido`-t úgy, hogy a videó vége + 1 mp-re érjen célba. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--kapu-ido, 2.4s) ease-out,
              transform var(--kapu-ido, 2.4s) ease-out,
              visibility 0s linear var(--kapu-ido, 2.4s);
}
.entry-gate.is-visible {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.entry-gate.is-exiting {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-24px) scale(0.985);
  pointer-events: none;
}

.entry-panel {
  position: relative;
  width: min(100%, 46rem);
  max-height: calc(100svh - 2 * clamp(16px, 3vw, 32px));
  padding: clamp(1.8rem, 5vw, 3.6rem);
  text-align: center;
  overflow: hidden;
}

.entry-mark {
  width: clamp(3rem, 7vw, 4.6rem);
  height: auto;
  margin: 0 auto 1.1rem;
  object-fit: contain;
}

.entry-kicker {
  margin: 0;
  color: var(--lime-bright, #a1e657);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.entry-panel h1 {
  margin: 0.75rem 0 0;
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.98;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
}

.entry-companies {
  max-width: 35rem;
  margin: 1.1rem auto 0;
  color: var(--muted, rgba(235, 237, 245, 0.8));
  font-size: clamp(0.78rem, 1.4vw, 0.94rem);
  line-height: 1.55;
}

#enter-experience {
  margin-top: clamp(1.3rem, 3.4vw, 2.2rem);
}

/* ── LÉPTETŐ ────────────────────────────────────────────────────────────────
   User, 2026-08-14: "nagyon sokat kell görgetni, inkább gomb legyen".
   Középen alul ül, a görgetés és a billentyűk ettől függetlenül működnek. */
.dia-nav {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 2.6vh, 28px);
  transform: translateX(-50%);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(235, 237, 245, 0.16);
  background: rgba(9, 12, 18, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 0.8rem 2.2rem rgba(6, 8, 14, 0.4);
  transition: opacity 320ms var(--ease-out);
}
.dia-nav.is-hidden { opacity: 0; pointer-events: none; }

.dia-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 1.05em;
  border-radius: 999px;
  border: 1px solid rgba(235, 237, 245, 0.18);
  background: rgba(235, 237, 245, 0.06);
  color: rgba(235, 237, 245, 0.9);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.dia-nav__btn:hover:not(:disabled) {
  background: rgba(235, 237, 245, 0.12);
  border-color: rgba(235, 237, 245, 0.3);
}
.dia-nav__btn:disabled { opacity: 0.3; cursor: default; }
.dia-nav__btn:focus-visible { outline: 2px solid var(--lime-bright, #a1e657); outline-offset: 2px; }

.dia-nav__btn--fo {
  border-color: rgba(147, 209, 79, 0.65);
  background: var(--lime, #93d14f);
  color: #11131c;
}
.dia-nav__btn--fo:hover:not(:disabled) {
  background: var(--lime-bright, #a1e657);
  border-color: var(--lime-bright, #a1e657);
}

.dia-nav__szamlalo {
  min-width: 4.5em;
  color: rgba(235, 237, 245, 0.72);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* a régi görgetés-jelző már nem létezik, de ha visszakerülne, ne lógjon ki */
.scroll-cue { color: rgba(235, 237, 245, 0.72); font-size: 0.63rem; letter-spacing: 0.16em; }

/* ── ALACSONY ABLAK: a kapu is sűrűsödik, sose lóghat ki ──────────────────── */
@media (max-height: 800px) {
  .entry-panel { padding: clamp(1.2rem, 3.4vw, 2.2rem); }
  .entry-mark  { width: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 0.7rem; }
  .entry-panel h1 { font-size: clamp(1.8rem, 4.4vw, 3.2rem); }
  .entry-companies { margin-top: 0.8rem; }
}

/* ── MOBIL ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .top-nav.glass-nav { gap: 0.75rem; border-radius: 0 0 12px 12px; }
  .top-nav__brand { width: 2.2rem; height: 2.2rem; }

  .top-nav__toggle {
    display: grid;
    gap: 0.24rem;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: auto;
    padding: 0.5rem;
    border: 1px solid rgba(235, 237, 245, 0.15);
    border-radius: 0.55rem;
    background: rgba(235, 237, 245, 0.06);
    cursor: pointer;
  }
  .top-nav__toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: #ebedf5;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .top-nav.is-open .top-nav__toggle span:nth-child(1) { transform: translateY(0.31rem) rotate(45deg); }
  .top-nav.is-open .top-nav__toggle span:nth-child(2) { opacity: 0; }
  .top-nav.is-open .top-nav__toggle span:nth-child(3) { transform: translateY(-0.31rem) rotate(-45deg); }

  .top-nav__list {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    background: rgba(9, 12, 18, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    opacity: 0;
    pointer-events: none;
    transition: max-height 240ms var(--ease-out), opacity 180ms ease, border-color 180ms ease;
  }
  .top-nav.is-open .top-nav__list {
    max-height: 24rem;
    padding: 0.45rem;
    border-color: rgba(235, 237, 245, 0.16);
    opacity: 1;
    pointer-events: auto;
  }
  .top-nav__link { width: 100%; padding: 0.85rem 0.75rem; text-align: left; }
  .top-nav__link::after { right: auto; left: 0.75rem; bottom: 0.4rem; width: 2.5rem; }

  .entry-panel { width: min(92vw, 28rem); }
}

/* ── NYOMTATÁS / PDF: a kapu az első oldal, menü nincs ────────────────────── */
@media print {
  .top-nav, .scroll-cue { display: none !important; }
  .entry-gate,
  .entry-gate.is-exiting {
    position: relative;
    inset: auto;
    z-index: 1;
    min-height: 100vh;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    break-after: page;
    page-break-after: always;
  }
  .entry-panel { width: min(100%, 170mm); max-height: none; padding: 18mm; }
  .entry-panel h1 { color: #11131c; font-size: 34pt; }
  .entry-companies { color: #343743; }
}

/* --- KIS KÉPERNYŐ ------------------------------------------------------------
   Csak telefonon jelenik meg: 767px alatti szélesség VAGY 500px alatti magasság
   (ez fogja meg a fekvő telefont, ahol a szélesség még 844px). */
.kis-kepernyo { display: none; }
@media (max-width: 767px), (max-height: 500px) {
  .kis-kepernyo {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center; padding: 24px;
    background: rgba(6, 8, 14, 0.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .kis-kepernyo.is-elrejtve { display: none; }
}
.kis-kepernyo__panel {
  max-width: 34ch; text-align: center;
  border: 1px solid rgba(235, 237, 245, 0.16); border-radius: var(--c-radius, 20px);
  padding: 26px 22px; background: rgba(9, 12, 18, 0.86);
}
.kis-kepernyo__cim {
  margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: 0.01em;
}
.kis-kepernyo__szoveg {
  margin: 0 0 18px; font-size: 0.95rem; line-height: 1.45;
  color: rgba(235, 237, 245, 0.85);
}
.kis-kepernyo__btn { font-size: 0.9rem; }