/* The Narrative Studio — az 5. design-irány (az eredeti oldal finomítva).
   Cabin betűtípus (fonts.css), fehér alap, szürke nagy címek, teljes
   szélességű bannerek. A galéria (.jrow/.ph) és a lightbox jelölése a
   KL Weddings-ből átvett site.js/lightbox.js kontraktusát követi. */

:root {
  --tinta: #222;
  --szurke: #777;
  --halvany: #aaa;
  --vonal: #e8e6e2;
  --hiba: #b3261e;
  --siker: #1e6f43;
  /* oldalsó behúzás a fejlécképhez (a KL Weddings --sav mintájára) */
  --sav: max(4vw, 24px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Cabin', -apple-system, 'Segoe UI', sans-serif;
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── Fejléc ─────────────────────────────────────────────────────────── */
header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 44px;
  gap: 20px;
}
header.over { color: #fff; }
header:not(.over) {
  position: static;
  background: #fff;
  border-bottom: 1px solid var(--vonal);
}
.wordmark img { height: 17px; width: auto; }
header.over .wordmark img { filter: drop-shadow(0 1px 10px rgba(0,0,0,.3)); }

/* A menüpontok a KL Weddings mintájára nagybetűsek, ritkított betűközzel.
   A KL .26em-et használ, de a hosszabb magyar szavak (VÁLLALKOZÁSOKNAK)
   ettől kifutnának, ezért .18em és szűkebb térköz — a betűkép ugyanaz. */
header nav {
  display: flex; gap: 20px; align-items: center;
  font-size: 12px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
}
header.over nav { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
header nav > a { opacity: .92; border-bottom: 1px solid transparent; padding-bottom: 2px; }
header nav > a:hover { opacity: 1; border-color: currentColor; }
header nav > a.active { opacity: 1; border-color: currentColor; }
.nav-extra { display: none; }

.fej-jobb { display: flex; gap: 18px; align-items: center; }
.rezerva-fej {
  border: 1px solid currentColor;
  padding: 9px 20px;
  letter-spacing: .14em;
  font-size: 12px;
  text-transform: uppercase;
  transition: .25s;
  white-space: nowrap;
}
header.over .rezerva-fej:hover { background: #fff; color: #222; border-color: #fff; }
header:not(.over) .rezerva-fej:hover { background: #222; color: #fff; }

/* nyelvváltó: nyugalomban a kód, rámutatásra kicsúszik a többi
   (a klweddings.com bevált animációja: max-width + opacity átmenet) */
.lang-fold {
  display: flex; align-items: center;
  font-size: 12px; letter-spacing: .18em;
  cursor: pointer;
  border: 1px solid currentColor;
  padding: 8px 14px 9px;
  opacity: .92;
}
.lang-fold .rest {
  display: flex; gap: 12px; align-items: center;
  max-width: 0; overflow: hidden; opacity: 0; margin-left: 0; white-space: nowrap;
  transition: max-width .4s ease, opacity .3s ease, margin-left .4s ease;
}
.lang-fold:hover .rest, .lang-fold:focus-within .rest,
.lang-fold.stuck .rest { max-width: 120px; opacity: 1; margin-left: 12px; }
.lang-fold .rest a {
  opacity: .7;
  /* nagyobb koppintási felület — a látvány nem változik */
  padding: 10px 4px; margin: -10px -4px;
}
.lang-fold .rest a:hover { opacity: 1; }
.lang-fold:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* hamburger */
.menu-btn {
  display: none;
  background: none; border: 0;
  /* a button elem nem örökli a színt magától — enélkül a képre úszó
     (fehér) fejlécben is fekete maradna a két vonal */
  color: inherit;
  width: 40px; height: 34px;
  position: relative;
  z-index: 40;
}
.menu-btn span {
  position: absolute; left: 8px; right: 8px; height: 2px;
  background: currentColor;
  transition: .3s;
}
.menu-btn span:first-child { top: 12px; }
.menu-btn span:last-child { top: 20px; }
body.menu-open .menu-btn span:first-child { top: 16px; transform: rotate(45deg); }
body.menu-open .menu-btn span:last-child { top: 16px; transform: rotate(-45deg); }

/* ── Nyitány (főoldal) ──────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 540px;
  background: #111;
  overflow: hidden;
}
.hero img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero img.bg.on { opacity: 1; }
.hero .fedo { position: absolute; inset: 0; background: rgba(0,0,0,.14); }
.hero-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 64vw);
  z-index: 5;
}
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 2px 24px rgba(0,0,0,.25)); }
.dia-cim {
  position: absolute; left: 44px; bottom: 38px;
  color: #fff; font-size: 15px; letter-spacing: .06em;
  z-index: 5;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
/* ── Kártyasor és kártyarács ────────────────────────────────────────── */
.kartyasor, .kartyarad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 26px;
  padding: 90px 44px 0;
}
.kartyarad { padding: 40px 44px 90px; row-gap: 48px; }
.kartya { display: block; }
.kartya .kep { aspect-ratio: 16/10; overflow: hidden; background: #f2f1ef; }
.kartya .kep img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.kartya:hover .kep img { transform: scale(1.035); }
.kartya .nev { margin-top: 14px; font-size: 16px; font-weight: 500; letter-spacing: .02em; }
.kartya .tip { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--halvany); margin-top: 3px; }

/* ── Nagy szürke címes szekciók ─────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 110px 44px;
  max-width: 1240px;
  margin: 0 auto;
}
.split h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 600;
  color: #666;
  line-height: 1.18;
}
.split .torzs { font-size: 15.5px; line-height: 1.85; color: #444; align-self: center; }
.split .torzs p + p { margin-top: 14px; }
.szolg-lista { margin-top: 16px; color: #666; }
.szolg-lista span {
  display: inline-block;
  border-bottom: 1px solid var(--vonal);
  padding: 3px 0; margin-right: 18px;
}

/* ── Teljes szélességű banner ───────────────────────────────────────── */
.banner {
  position: relative;
  min-height: 78vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 80px 24px;
}
.banner.kicsi { min-height: 56vh; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner .fedo { position: absolute; inset: 0; background: rgba(10,10,10,.30); }
.banner > *:not(img):not(.fedo) { position: relative; z-index: 2; }
.banner h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  max-width: 22ch;
  line-height: 1.2;
  text-shadow: 0 2px 26px rgba(0,0,0,.35);
}
.banner-szoveg { margin-top: 18px; max-width: 52ch; font-size: 16px; line-height: 1.7; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.gombok { display: flex; gap: 16px; flex-wrap: wrap; }
.banner .gombok { margin-top: 38px; justify-content: center; }
.keretes, .teli {
  display: inline-block;
  padding: 15px 34px;
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: .25s;
}
/* Általános gomb-szabály: a telt és a keretes hoverre HELYET CSERÉL —
   a telt áttetsző-keretessé válik, a keretes telté. Ha párban állnak
   (.gombok), a testvér is együtt vált: egyetlen csere-mozdulatnak hat. */
.keretes { border: 1px solid #fff; color: #fff; }
.keretes:hover { background: #fff; color: #222; }
.teli { background: #fff; color: #222; border: 1px solid #fff; }
.teli:hover { background: transparent; color: #fff; }
.teli.sotet { background: #222; color: #fff; border-color: #222; }
.teli.sotet:hover { background: transparent; color: #222; }
.teli.sotet[disabled] { opacity: .4; cursor: not-allowed; }

/* ── Instagram-sáv ──────────────────────────────────────────────────── */
.insta { padding: 0 44px 96px; text-align: center; }
.insta .cim { font-size: 13px; letter-spacing: .14em; color: var(--halvany); margin-bottom: 30px; display: inline-block; }
.insta .cim:hover { color: var(--tinta); }
.insta-racs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.insta-racs > div, .insta-racs > a { aspect-ratio: 1; overflow: hidden; background: #f2f1ef; display: block; }
.insta-racs img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
/* Élő posztok: a fehér keretes feltöltések miatt a kép felnagyítva ül a
   négyzetben — a keret kívül reked. A nagyítás origója a felső harmadon:
   a portrék arca így biztosan a kivágásban marad. */
/* Élő posztok: a geometriát képenként a JS méri ki (keret-levágás).
   A .zoom csak tartalék, ha a mérés nem sikerül. */
.insta-racs.elo a { position: relative; }
.insta-racs.elo img { position: absolute; left: 0; top: 0; }
.insta-racs.elo img.zoom { width: 100%; height: 100%; transform: scale(1.6); transform-origin: 50% 38%; }

/* ── Aloldali fejléc (banner + cím) ─────────────────────────────────── */
/* ── Aloldali fejléckép: a cím a képre írva, bal alul (mint a KL nyitóképén).
      A sáv nem ér a képernyő aljáig — alatta rés jelzi, hogy van tovább. ── */
.oldal-banner {
  position: relative;
  /* A KL Weddings nyitóképének méretével egyező: 92vh — a képernyő aljánál
     csak egy keskeny sáv látszik a következő szakaszból, a tartalom a saját
     természetes térközével indul alatta. */
  height: 92vh; min-height: 560px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #111;
}
.oldal-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Alacsony változat az ügyintéző oldalakra (foglaló): a kép hangulatot ad,
   de nem tolja egy képernyővel lejjebb a lényeget. A dupla osztály minden
   nézetben (a mobilos 76svh-s szabállyal szemben is) érvényesül. */
.oldal-banner.alacsony { height: 52vh; height: 52svh; min-height: 360px; }
/* A képpel kezdő oldalakon (galéria, kártyarács, projekt) a tartalom
   ugyanakkora levegőt kap a borító után, amennyi a szöveggel kezdő
   oldalakon (Stúdió, Vállalkozásoknak) természetesen adódik. */
.oldal-banner + .galeria { padding-top: 90px; }
.oldal-banner + .kartyasor, .oldal-banner + .kartyarad { padding-top: 90px; }
.oldal-banner + .morzsa { padding-top: 80px; }
.oldal-banner + .kapcsolat { padding-top: 90px; }
.oldal-banner .fedo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.38)); }
.banner-cimblokk { position: relative; z-index: 2; padding: 0 44px 48px; max-width: 900px; }
.oldal-banner h1 {
  color: #fff;
  font-size: clamp(36px, 5.5vw, 62px);
  font-weight: 600;
  text-shadow: 0 2px 26px rgba(0,0,0,.4);
}
.oldal-intro {
  font-size: 17px; line-height: 1.8; color: #555;
  padding: 44px 0 8px;
  text-align: center;
}
.oldal-fej-egyszeru {
  max-width: 860px; margin: 0 auto;
  padding: 140px 24px 20px;
  text-align: center;
}
header:not(.over) + .oldal-fej-egyszeru { padding-top: 70px; }
.oldal-fej-egyszeru h1 { font-size: clamp(34px, 4.5vw, 50px); font-weight: 600; color: #666; margin-bottom: 18px; }

.morzsa { max-width: 1240px; margin: 0 auto; padding: 28px 44px 0; font-size: 14px; color: var(--szurke); }
.morzsa a:hover { color: var(--tinta); }

.oldal-cta { text-align: center; padding: 26px 24px 96px; }
.tovabb-link { font-size: 15px; border-bottom: 1px solid var(--tinta); padding-bottom: 3px; }
.tovabb-link:hover { opacity: .7; }

/* ── Justified galéria + lightbox ───────────────────────────────────── */
.galeria { padding: 44px 24px 30px; max-width: 1500px; margin: 0 auto; }
.jrow { display: flex; gap: 8px; margin-bottom: 8px; }
.ph { position: relative; cursor: zoom-in; overflow: hidden; background: #f2f1ef; flex-basis: 0; min-width: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,.96);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.lightbox button {
  position: absolute;
  background: none; border: 0; color: #fff;
  font-size: 34px; line-height: 1;
  opacity: .8; padding: 18px;
}
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: 12px; right: 16px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }

/* ── Stúdió-szakaszok ───────────────────────────────────────────────── */
.studio-szakaszok { max-width: 1240px; margin: 0 auto; padding: 40px 44px 60px; }
.studio-szakasz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 0;
}
.studio-szakasz .kep img { width: 100%; height: auto; }
.studio-szakasz.forditott .kep { order: 2; }
.studio-szakasz h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: #666; margin-bottom: 18px; }
.studio-szakasz p { font-size: 15.5px; line-height: 1.85; color: #444; margin-bottom: 12px; }

/* ── Vállalkozásoknak ───────────────────────────────────────────────── */
.vall-blokkok { max-width: 900px; margin: 0 auto; padding: 30px 24px 40px; }
.vall-blokk { padding: 44px 0; border-bottom: 1px solid var(--vonal); }
.vall-blokk:last-child { border-bottom: 0; }
.vall-blokk h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: #666; margin-bottom: 18px; }
.vall-blokk h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--szurke); margin: 26px 0 10px; }
.vall-blokk p { font-size: 15.5px; line-height: 1.85; color: #444; margin-bottom: 12px; }
.mini-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.mini-galeria > div { aspect-ratio: 4/3; overflow: hidden; background: #f2f1ef; }
.mini-galeria img { width: 100%; height: 100%; object-fit: cover; }

/* ── Kapcsolat ──────────────────────────────────────────────────────── */
.kapcsolat {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 50px 24px 100px;
}
.kapcsolat-adatok h2 { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.kapcsolat-adatok p { font-size: 15.5px; line-height: 1.8; color: #444; margin-bottom: 14px; }
.kapcsolat-adatok a:hover { text-decoration: underline; }
.pnrr { font-size: 13px; color: var(--szurke); }

.urlap { display: flex; flex-direction: column; gap: 16px; }
.urlap label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: .06em; color: var(--szurke); }
/* magyarázó sor a mező ALATT (a label oszlop-flexében a beviteli mező után) */
.urlap .mezo-hint { font-size: 12.5px; letter-spacing: 0; color: var(--halvany); line-height: 1.5; }
.urlap input, .urlap textarea, .urlap select {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--vonal);
  background: #fbfaf8;
  color: var(--tinta);
  border-radius: 0;
}
.urlap input:focus, .urlap textarea:focus, .urlap select:focus { outline: 1px solid #999; }
.urlap button { align-self: flex-start; }
.urlap-uzenet { padding: 14px 16px; font-size: 14.5px; line-height: 1.6; }
.urlap-uzenet.siker { background: #ecf5ef; color: var(--siker); }
.urlap-uzenet.hiba { background: #faeceb; color: var(--hiba); }
.urlap.sorban { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.halk { font-size: 13px; color: var(--halvany); line-height: 1.6; }
.jogi { max-width: 760px; margin: 0 auto; padding: 20px 24px 90px; }
.jogi-blokk { padding: 22px 0; }
.jogi-blokk h2 { font-size: 20px; font-weight: 600; color: #555; margin-bottom: 10px; }
.jogi-blokk p { font-size: 15px; line-height: 1.8; color: #444; }
.jogi-datum { margin-top: 26px; font-size: 13px; color: var(--halvany); }
.jogi-blokk p + p { margin-top: 12px; }
.jogi-blokk a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* Elállási mintaformanyomtatvány — szándékosan monospace, hogy kimásolható legyen */
.elallas-urlap {
  margin-top: 14px; padding: 20px 22px; background: #f7f6f4;
  border: 1px solid var(--vonal); border-radius: 4px;
  font: 13px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #444; white-space: pre-wrap; overflow-x: auto;
}

/* Foglalási jelölőnégyzetek */
.jelolok { display: grid; gap: 14px; margin: 20px 0 22px; }
/* A .urlap label függőleges elrendezését kell felülírni, ezért az erősebb szelektor. */
.urlap label.jelolo { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; letter-spacing: 0; line-height: 1.65; color: #444; }
.jelolo input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--tinta); cursor: pointer; }
.jelolo input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ANPC — alternatív vitarendezés (SAL). A hivatalos piktogram mérete 250×50. */
.anpc-sav { margin-top: 22px; }
.anpc-sal { display: inline-block; line-height: 0; }
.anpc-sal img { width: 250px; height: 62px; }
.anpc-potlo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 250px; height: 50px; border: 1px solid var(--vonal); border-radius: 3px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--halvany); line-height: 1.3; text-align: center; padding: 0 10px;
}
.anpc-sal:hover .anpc-potlo { color: var(--tinta); border-color: var(--tinta); }

/* ── Foglaló ────────────────────────────────────────────────────────── */
.foglalo-intro { max-width: 760px; margin: 0 auto; padding: 48px 24px 0; }
.foglalo { max-width: 900px; margin: 0 auto; padding: 30px 24px 100px; }
/* Széles kijelzőn két hasáb: balra a lépések, jobbra a kísérő összegző.
   A panel csak itt él — mobilon az űrlap alji összegzése (.fog-osszegzes)
   tölti be ugyanezt a szerepet. */
@media (min-width: 1020px) {
  .foglalo {
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0 72px;
    align-items: start;
  }
  .fog-osszegzes { display: none !important; }
}
.fog-lepes { padding: 26px 0; border-bottom: 1px solid var(--vonal); transition: opacity .35s; }
.fog-lepes:last-child { border-bottom: 0; }
.fog-lepes h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--szurke); margin-bottom: 18px; display: flex; align-items: baseline; gap: 14px; }
/* a még nem elérhető lépés halványan várakozik; kattintható eleme ilyenkor nincs */
.fog-lepes.zart { opacity: .35; pointer-events: none; }
.lepes-ertek { margin-left: auto; text-align: right; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--tinta); }

.fog-szolgaltatasok { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fog-szolg-gomb {
  border: 1px solid var(--vonal);
  background: #fbfaf8;
  padding: 16px 18px;
  text-align: left;
  transition: .2s;
}
.fog-szolg-gomb:hover { border-color: #999; transform: translateY(-2px); }
.fog-szolg-gomb.aktiv { border-color: #222; background: #222; color: #fff; }
.fog-szolg-gomb .fej { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.fog-szolg-gomb .nev { font-size: 15px; font-weight: 500; }
.fog-szolg-gomb .ar { font-size: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fog-szolg-gomb .resz { font-size: 13px; margin-top: 4px; opacity: .7; }

/* Alkalmak száma: egymást követő sávok (hosszabb bérlés / több személy) */
.fog-db { margin-top: 22px; }
.fog-db-fej { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fog-db-fej .cimke { font-size: 13px; color: var(--szurke); }
.fog-db-fej .halk { font-size: 12.5px; }
.fog-db-lepteto { display: flex; align-items: center; gap: 14px; }
.fog-db-lepteto button {
  width: 38px; height: 38px;
  border: 1px solid var(--vonal); background: var(--mezo);
  font-size: 18px; line-height: 1;
}
.fog-db-lepteto button:hover:not([disabled]) { border-color: #999; }
.fog-db-lepteto button[disabled] { opacity: .3; cursor: default; }
.fog-db-lepteto b { min-width: 24px; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fog-db-lepteto .halk { font-size: 13px; }

.fog-naptar { max-width: 420px; }
.fog-naptar-fej { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fog-naptar-fej .ho { font-size: 15px; font-weight: 500; }
.fog-naptar-fej button { background: none; border: 1px solid var(--vonal); width: 34px; height: 34px; font-size: 16px; }
.fog-naptar-fej button:hover { border-color: #999; }
.fog-naptar-fej button[disabled] { opacity: .3; cursor: default; }
.fog-naptar-racs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fog-naptar-racs .fejnap { font-size: 11px; letter-spacing: .08em; color: var(--halvany); text-align: center; padding: 6px 0; }
.fog-nap {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: none;
  font-size: 14px;
  color: var(--halvany);
  display: flex; align-items: center; justify-content: center;
}
.fog-nap.szabad { color: var(--tinta); border-color: var(--vonal); background: #fbfaf8; }
.fog-nap.szabad:hover { border-color: #999; }
/* .szabad.aktiv: a lejjebb lévő témázó szabály (.fog-nap.szabad { background: var(--mezo) })
   azonos specificitással felülütné a sima .aktiv hátterét — fehér szám maradna
   világos mezőn. A dupla osztály emeli a specificitást. */
.fog-nap.szabad.aktiv { background: #222; color: #fff; border-color: #222; }

.fog-savok { display: block; }
.fog-savok-sor { display: flex; flex-wrap: wrap; gap: 10px; }
.fog-sav-csop + .fog-sav-csop { margin-top: 20px; }
.fog-sav-csop h3 { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--halvany); margin-bottom: 10px; }
.fog-sav {
  border: 1px solid var(--vonal);
  background: #fbfaf8;
  padding: 10px 16px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.fog-sav:hover { border-color: #999; }
.fog-sav.aktiv { background: #222; color: #fff; border-color: #222; }

/* Fizetési mód: két kártyaszerű rádiógomb az űrlapban */
.fog-fizmod { border: 0; padding: 0; margin: 4px 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fog-fizmod legend { font-size: 13px; color: var(--szurke); margin-bottom: 10px; padding: 0; }
.fizmod { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--vonal); background: var(--mezo); padding: 14px 16px; cursor: pointer; transition: border-color .2s; }
.fizmod:hover { border-color: #999; }
.fizmod input { margin-top: 3px; accent-color: #222; }
.fizmod:has(input:checked) { border-color: #222; }
.fizmod b { display: block; font-size: 14.5px; font-weight: 500; }
.fizmod small { display: block; font-size: 12.5px; color: var(--szurke); margin-top: 2px; }

.fog-osszegzes { background: #f7f6f4; padding: 14px 16px; font-size: 14.5px; line-height: 1.7; }

/* Kísérő összegző panel (csak a kéthasábos elrendezésben látszik). A tetején
   ragad: a lap fejléce nem fix, ezért elég egy kis levegő. */
.fog-panel { display: none; }
@media (min-width: 1020px) { .fog-panel { display: block; position: sticky; top: 32px; } }
.fog-panel {
  border: 1px solid var(--vonal);
  background: #fbfaf8;
  padding: 24px 26px 26px;
  margin-top: 26px;
}
.fog-panel h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--szurke); margin-bottom: 4px; }
.fog-panel dl { margin: 0; }
.fog-panel dl > div { padding: 14px 0; border-bottom: 1px solid var(--vonal); }
.fog-panel dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--halvany); margin-bottom: 3px; }
.fog-panel dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.fog-p-ar { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
.fog-p-ar span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--halvany); }
.fog-p-ar b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Az űrlapok jogi lábjegyzete. A margin nullázása kell: a .jogi lapszintű
   „margin: 0 auto"-ja flex-elemként a rövid bekezdéseket középre húzná. */
.jogi.halk { padding: 0; max-width: none; margin: 0; }
.jogi.halk + .jogi.halk { margin-top: 8px; }
/* a benne lévő ÁSZF-/adatvédelmi link kattinthatónak látsszon */
.jogi.halk a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.siker-doboz { background: #f7f6f4; padding: 26px 28px; font-size: 16px; line-height: 1.7; }
.siker-doboz.kesz { background: #ecf5ef; }
.siker-reszletek { margin-top: 12px; font-weight: 500; }


/* ── Lábléc ─────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--vonal);
  padding: 56px 44px 48px;
  text-align: center;
  font-size: 14px;
  color: var(--szurke);
  line-height: 2;
}
footer .marka { color: var(--tinta); font-weight: 500; letter-spacing: .03em; }
footer a:hover { color: var(--tinta); }
footer .legal { margin-top: 14px; font-size: 12.5px; color: var(--halvany); }
footer .legal a { text-decoration: underline; }

/* ── Mobil ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  header { padding: 20px 24px; }
  /* A lenyíló menü animálva nyílik: a sötét lap áttűnik, a menüpontok
     lentről úsznak be, egymás után. A display helyett visibility vált,
     hogy az átmenet lejátszódhasson. */
  header nav {
    display: flex;
    position: fixed; inset: 0;
    background: #171717;
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    font-size: 20px;
    z-index: 35;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  body.menu-open header nav {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
  }
  /* minden menüpont külön, lentről úszik fel — az első is késleltetve
     indul, hogy a mozgás minden elemen jól látható legyen */
  header nav > a, header nav .nav-extra > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  }
  body.menu-open header nav > a, body.menu-open header nav .nav-extra > * {
    opacity: 1;
    transform: none;
  }
  body.menu-open header nav > a:nth-child(1) { transition-delay: .08s; }
  body.menu-open header nav > a:nth-child(2) { transition-delay: .15s; }
  body.menu-open header nav > a:nth-child(3) { transition-delay: .22s; }
  body.menu-open header nav > a:nth-child(4) { transition-delay: .29s; }
  body.menu-open header nav > a:nth-child(5) { transition-delay: .36s; }
  body.menu-open header nav > a:nth-child(6) { transition-delay: .43s; }
  body.menu-open header nav .nav-extra > *:nth-child(1) { transition-delay: .52s; }
  body.menu-open header nav .nav-extra > *:nth-child(2) { transition-delay: .58s; }
  body.menu-open { overflow: hidden; }
  body.menu-open header { color: #fff; }
  .nav-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; color: #bbb; }
  .nav-social { display: flex; gap: 16px; }
  .menu-btn { display: block; }
  header:not(.over) .menu-btn { color: var(--tinta); }
  body.menu-open .menu-btn { color: #fff; position: fixed; top: 20px; right: 24px; }
  .fej-jobb { margin-left: auto; margin-right: 8px; }

  .kartyasor, .kartyarad { grid-template-columns: 1fr; padding: 56px 24px 0; }
  .kartyarad { padding-bottom: 64px; }
  .split { grid-template-columns: 1fr; gap: 22px; padding: 64px 24px; }
  .insta { padding: 0 24px 64px; }
  .insta-racs { grid-template-columns: repeat(3, 1fr); }
  .banner-cimblokk { padding: 0 24px 34px; }
  .oldal-banner { height: 76vh; height: 76svh; min-height: 420px; }
  .oldal-banner + .galeria, .oldal-banner + .kartyasor,
  .oldal-banner + .kartyarad, .oldal-banner + .kapcsolat { padding-top: 56px; }
  .oldal-banner + .morzsa { padding-top: 48px; }
  .studio-szakaszok { padding: 20px 24px 40px; }
  .studio-szakasz { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .studio-szakasz.forditott .kep { order: 0; }
  .kapcsolat { grid-template-columns: 1fr; gap: 40px; }
  .mini-galeria { grid-template-columns: repeat(2, 1fr); }
  .dia-cim { left: 24px; bottom: 28px; }
  .jrow { gap: 5px; margin-bottom: 5px; }
  .morzsa { padding: 20px 24px 0; }
}

/* ════════════════════════════════════════════════════════════════════
   FELTURBÓZÁS — mozgás, galéria-élmény, sötét mód. A fenti alapokra
   épülő réteg; ami itt van, az felülírja az alapértelmezéseket.
   ════════════════════════════════════════════════════════════════════ */

/* ── Színrendszer + automatikus sötét mód ── */
:root {
  --lap: #fff;
  --lap-emelt: #f7f6f4;
  --mezo: #fbfaf8;
  --gomb: #222;
  --gomb-szoveg: #fff;
  color-scheme: light;
}
body { background: var(--lap); }
header:not(.over) { background: var(--lap); }
.urlap input, .urlap textarea, .urlap select { background: var(--mezo); }
.fog-szolg-gomb, .fog-nap.szabad, .fog-sav, .fog-panel { background: var(--mezo); }
.studio { background: var(--lap-emelt); }

/* ── Tipográfia: folyékony skála. A Circular készletéből hiányzik az
   ő/ű és a román ș/ț/ă, ezért címekben NEM használható (kevert betűkép
   lenne) — csak a garantáltan ékezet nélküli vízjelen él. ── */
h1, .split h2, .banner h2, .oldal-banner h1, .oldal-fej-egyszeru h1,
.studio-szakasz h2, .vall-blokk h2, .kov-nev, .index-nev, .spec-lap h2 {
  letter-spacing: -.015em;
}
html { font-size: clamp(15px, 14px + .3vw, 17px); }

/* ── Oldalátmenetek (View Transitions, több-oldalas) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms ease both vt-el; }
::view-transition-new(root) { animation: 320ms ease both vt-be; }
@keyframes vt-el { to { opacity: 0; } }
@keyframes vt-be { from { opacity: 0; } }

/* ── Betöltő ── */
.betolto {
  position: fixed; inset: 0; z-index: 200;
  background: #111;
  display: none;
  align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
body.betoltes .betolto, html.elso .betolto { display: flex; }
.betolto.el { opacity: 0; pointer-events: none; display: flex; }
.betolto-jel {
  width: 120px; height: 7px; background: #fff;
  transform-origin: left;
  animation: betolto-huzas .9s cubic-bezier(.7, 0, .2, 1) both;
}
@keyframes betolto-huzas { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.betoltes, html.elso body:has(> .betolto) { overflow: hidden; }



/* ── Hero: logó a jobb alsó sarokban — átlós egyensúly a bal alsó
      felirat-sorral, és nem takarja a portrék középre eső arcait. ── */
.hero-logo {
  left: auto; right: 44px; top: auto; bottom: 110px;
  transform: none;
  width: min(440px, 58vw);
}
.hero-logo img { animation: hero-be 1.1s cubic-bezier(.2, .7, .2, 1) both .15s; }
@keyframes hero-be { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .hero-logo { left: auto; right: 24px; bottom: 96px; } }
/* A Ken Burns-zoom MINDEN dián folyamatosan fut (nem a .on-hoz kötve):
   azonos fázisban lélegeznek, így az áttűnés alatt sincs méret-ugrás. */
.hero img.bg { animation: kenburns 10s ease-in-out infinite alternate; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.06; } }
.dia-sor {
  position: absolute; left: 44px; right: 44px; bottom: 38px; z-index: 5;
  display: flex; align-items: center; gap: 18px;
  color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.dia-cim { position: static; font-size: 15px; letter-spacing: .06em; }
.dia-szamlalo { font-size: 12px; letter-spacing: .18em; opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia-folyamat {
  width: 120px; height: 1.5px; background: rgba(255,255,255,.3);
  overflow: hidden;
}
.dia-folyamat i {
  display: block; height: 100%; background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.dia-folyamat i.megy { animation: dia-halad linear both; animation-duration: inherit; }
@keyframes dia-halad { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* a főoldali hármas kocka formában (a listaoldalak 16:10-e marad) */
.kartyasor .kartya .kep { aspect-ratio: 1/1; }

/* ── Scroll-koreográfia (a galéria-blokkokra szándékosan NEM fut) ── */
/* A rejtett kezdőállapot csak .js alatt él (a <head> egysoros scriptje
   teszi fel) — JS nélkül semmi sem ragadhat láthatatlanul. */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.lathato { opacity: 1; transform: none; }
.kartyasor .kartya:nth-child(2), .kartyarad .kartya:nth-child(3n+2) { transition-delay: .08s; }
.kartyasor .kartya:nth-child(3), .kartyarad .kartya:nth-child(3n) { transition-delay: .16s; }
.oldal-banner .fel-uszo { animation: hero-be .9s cubic-bezier(.2, .7, .2, 1) both .1s; }

/* ── Képek beúszása a domináns színről ── */
.js .ph img, .js .kartya .kep img, .js .insta-racs img, .js .mini-galeria img {
  opacity: 0; transition: opacity .55s ease, transform .7s ease;
}
.ph img.betolt, .kartya .kep img.betolt, .insta-racs img.betolt,
.mini-galeria img.betolt { opacity: 1; }
body.kep-azonnal .ph img, body.kep-azonnal .kartya .kep img,
body.kep-azonnal .insta-racs img, body.kep-azonnal .mini-galeria img { opacity: 1; }


/* ── Ritmusos projektgaléria ── */
.galeria.ritmus { max-width: 1400px; padding: 44px 24px 0; }
.rit-teljes { margin: 0 0 28px; }
.rit-szolo { display: flex; justify-content: center; margin: 64px 0; }
/* Az általános .ph szabály flex-basis: 0-t ad (a sorba rendezett galéria
   öröksége) — flexben az felülüti a width-et, és a szóló kép nullára
   zsugorodott. A flex-basis-t kell kimondani, nem csak a width-et. */
.rit-szolo .ph { flex: 0 0 min(560px, 78vw); width: min(560px, 78vw); }
/* align-items: start — nyújtás nélkül a cella nem lóg túl a képén,
   különben az eltérő arányú (pl. négyzetes) képek alatt kilátszana
   a háttérszín */
.rit-kettes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; align-items: start; }
.rit-harmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; align-items: start; }
.galeria.ritmus .ph img { width: 100%; height: auto; display: block; }
.morzsa-tip { color: var(--halvany); font-size: 13px; margin-left: 14px; letter-spacing: .06em; }

/* ── Következő projekt — teljes szélességű átvezetés ── */
.kov-projekt {
  position: relative; display: flex;
  min-height: 62vh;
  align-items: flex-end;
  overflow: hidden;
  margin-top: 90px;
}
.kov-projekt > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.kov-projekt .fedo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.5)); }
.kov-belso { position: relative; z-index: 2; padding: 0 44px 54px; color: #fff; }
.kov-cimke { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; margin-bottom: 10px; }
.kov-nev { font-size: clamp(34px, 5vw, 64px); font-weight: 600; line-height: 1.05; text-shadow: 0 2px 24px rgba(0,0,0,.35); }

/* ── Rács / Lista nézetváltó + tipográfiai index ── */
.nezet-valto {
  display: flex; gap: 8px; justify-content: center;
  padding: 34px 24px 0;
}
.nezet-gomb {
  border: 1px solid var(--vonal); background: none;
  color: var(--szurke);
  padding: 8px 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: .2s;
}
.nezet-gomb[aria-selected="true"] { background: var(--gomb); color: var(--gomb-szoveg); border-color: var(--gomb); }
.index-lista { position: relative; max-width: 1100px; margin: 0 auto; padding: 40px 24px 90px; }
.index-sor {
  display: grid; grid-template-columns: 60px 1fr auto;
  align-items: baseline; gap: 18px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--vonal);
  transition: padding .3s;
}
.index-sor:hover { padding-left: 22px; }
.index-szam { font-size: 13px; color: var(--halvany); font-variant-numeric: tabular-nums; }
.index-nev {
  font-size: clamp(26px, 4vw, 48px); font-weight: 500; line-height: 1.1;
  transition: opacity .25s;
}
.index-lista:hover .index-sor:not(:hover) .index-nev { opacity: .35; }
.index-tip { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--halvany); }
.index-kep {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 300px; aspect-ratio: 4/3;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.index-kep.lathato { opacity: 1; }
.index-kep img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .index-kep { display: none; } .index-sor { grid-template-columns: 40px 1fr; } .index-tip { display: none; } }

/* ── Stúdió spec-lap + térkép ── */
.spec-lap { max-width: 900px; margin: 0 auto; padding: 20px 24px 60px; }
.spec-lap h2 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--szurke); margin-bottom: 18px; }
.spec-racs { border-top: 1px solid var(--vonal); }
.spec-sor {
  display: grid; grid-template-columns: 180px 1fr; gap: 18px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--vonal);
}
.spec-nev { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--halvany); padding-top: 3px; }
.spec-ertek { font-size: 15.5px; color: var(--tinta); }
@media (max-width: 640px) { .spec-sor { grid-template-columns: 1fr; gap: 4px; } }
.terkep { max-width: 900px; margin: 0 auto; padding: 0 24px 70px; }
.terkep a { position: relative; display: block; overflow: hidden; }
/* A térkép mindig szürke marad — hoverre sem színesedik. */
.terkep img { width: 100%; height: auto; filter: grayscale(1) contrast(1.04); }
.terkep-jel {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: #e0501a; border: 3px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(224,80,26,.25);
}
.terkep-gomb {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(20,20,20,.85); color: #fff;
  padding: 9px 16px; font-size: 12px; letter-spacing: .08em;
}

/* ── Lábléc: vízjel + helyi idő ── */
footer { position: relative; overflow: hidden; }
.footer-meta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--halvany); }
.footer-meta .pont { margin: 0 8px; }
.vizjel {
  font-family: 'Circular', sans-serif;
  font-size: clamp(90px, 17vw, 260px);
  font-weight: 500; letter-spacing: -.03em;
  line-height: .9;
  color: var(--tinta);
  opacity: .045;
  margin-top: 30px; margin-bottom: -.28em;
  user-select: none; white-space: nowrap;
}

/* ── Lightbox 2.0 ── */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity .35s ease, visibility 0s .35s;
  background: none;
}
.lightbox.nyitva { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.lb-hatter { position: absolute; inset: 0; background: rgba(12,11,10,.95); backdrop-filter: blur(10px); }
.lb-kep {
  position: relative; z-index: 2;
  max-width: 92vw; max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.lb-kep.nagyitva { transform: scale(2); cursor: zoom-out; }
.lightbox button { position: absolute; z-index: 3; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; opacity: .75; padding: 18px; }
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: 10px; right: 14px; font-size: 30px; }
.lightbox .lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lb-szam {
  position: absolute; top: 22px; left: 24px; z-index: 3;
  color: rgba(255,255,255,.8);
  font-size: 12.5px; letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
.lb-csik {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; gap: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
.lb-csik::-webkit-scrollbar { display: none; }
.lb-bely {
  position: static !important;   /* a .lightbox button abszolút szabálya ellen */
  flex: 0 0 auto;
  width: 58px; height: 42px;
  padding: 0 !important; opacity: .45 !important;
  border: 1px solid transparent !important;
  transition: opacity .25s;
}
.lb-bely img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-bely.aktiv { opacity: 1 !important; border-color: #fff !important; }
.lb-bely:hover { opacity: .85 !important; }

/* ── Sikeroldal: animált pipa ── */
.siker-doboz.kesz::before {
  content: '✓';
  display: block;
  width: 40px; height: 40px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--siker);
  color: #fff; font-size: 22px; line-height: 40px; text-align: center;
  clip-path: circle(0 at 50% 50%);
  animation: pipa-kor .45s ease-out both;
}
@keyframes pipa-kor { to { clip-path: circle(50% at 50% 50%); } }

/* ── Gomb-aláhúzások: balról jobbra rajzolódnak ── */
header nav > a, .tovabb-link, .mind {
  border-bottom: 0 !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .35s cubic-bezier(.2, .7, .2, 1);
  padding-bottom: 3px;
}
header nav > a:hover, header nav > a.active, .tovabb-link:hover, .mind:hover {
  background-size: 100% 1px;
}

/* ── Reduced motion: minden mozgás kikapcsol ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal, .rit-teljes, .rit-kettes, .rit-harmas, .rit-szolo { opacity: 1; transform: none; }
  .js .ph img, .js .kartya .kep img, .js .insta-racs img, .js .mini-galeria img { opacity: 1; }
  .szemcse, .betolto { display: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Foglaló: skeleton-töltés + kevés-hely jelzés ── */
.fog-skeleton { display: grid; gap: 8px; max-width: 420px; }
.fog-skeleton i {
  display: block; height: 34px;
  background: var(--lap-emelt);
  animation: skel 1.1s ease-in-out infinite alternate;
}
.fog-skeleton i:nth-child(2) { animation-delay: .12s; }
.fog-skeleton i:nth-child(3) { animation-delay: .24s; }
.fog-skeleton i:nth-child(4) { animation-delay: .36s; }
.fog-skeleton i:nth-child(5) { animation-delay: .48s; }
@keyframes skel { from { opacity: .45; } to { opacity: 1; } }
.fog-nap.keves { position: relative; }
.fog-nap.keves::after {
  content: '';
  position: absolute; right: 4px; top: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #d9a441;
}

/* ── Főoldali statisztika-sor a Portfóliónk cím alatt ── */
.stat-sor { display: flex; gap: 44px; margin-top: 34px; flex-wrap: wrap; }
.stat-sor b { display: block; font-size: 34px; font-weight: 600; color: var(--tinta); line-height: 1.1; }
.stat-sor span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--halvany); }
.mind-link { display: inline-block; margin-top: 24px; }

/* ── Nyitókép-választó (#kepvalaszto) ── */
.valaszto {
  position: fixed; inset: 0; z-index: 400;
  background: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.valaszto-fej {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--vonal);
}
.valaszto-info { font-size: 13px; color: var(--szurke); flex: 1; }
.valaszto-masol { padding: 10px 20px !important; }
.valaszto-bezar { background: none; border: 0; font-size: 26px; opacity: .6; }
.valaszto-bezar:hover { opacity: 1; }
.valaszto-ki {
  margin: 12px 20px 0; padding: 10px;
  font: 12px/1.5 Menlo, monospace;
  border: 1px solid var(--vonal); background: var(--lap-emelt);
  resize: vertical;
}
.valaszto-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px; padding: 16px 20px 40px;
}
.valaszto-kep {
  position: relative;
  aspect-ratio: 3/2; overflow: hidden;
  padding: 0; border: 3px solid transparent; background: #eceae6;
}
/* contain: az egész fotó látszik, nem vágunk bele a válogatás közben */
.valaszto-kep img { width: 100%; height: 100%; object-fit: contain; opacity: 1 !important; }
.valaszto-kep.aktiv { border-color: #1e6f43; }
.valaszto-kep i {
  display: none;
  position: absolute; top: 6px; left: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #1e6f43; color: #fff;
  font-style: normal; font-size: 13px; line-height: 24px; text-align: center;
}
.valaszto-kep.aktiv i { display: block; }

/* ── Instagram-szekció: kicker + kiemelt cím, garantált kocka-rács ── */
.insta-kicker {
  display: block;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--halvany);
  margin-bottom: 10px;
}
.insta-cim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--tinta);
  margin-bottom: 36px;
  opacity: .85;
  transition: opacity .25s;
}
.insta-cim:hover { opacity: 1; }
.insta-cim svg { flex: 0 0 auto; }
.insta-racs > div, .insta-racs > a {
  position: relative;
  aspect-ratio: 1 !important;
  overflow: hidden;
  background: #f2f1ef;
  display: block;
}
.insta-racs img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── 360°-os termék-nézegető ── */
.forgo-wrap { max-width: 760px; margin: 30px auto 10px; padding: 0 24px; }
.forgo {
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;         /* vízszintes húzás a miénk, görgetés a lapé */
  user-select: none;
}
.forgo img { width: 100%; height: auto; display: block; pointer-events: none; }
.forgo.huzas { cursor: grabbing; }
.forgo-jel {
  text-align: center;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--halvany);
  margin-top: 12px;
}

/* ── Termékrács: fehér hátteres termékfotók egyenletes cellákban ── */
.galeria.termek-racs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1240px;
  padding: 44px 24px 30px;
}
.galeria.termek-racs .ph {
  aspect-ratio: 1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.galeria.termek-racs .ph img {
  width: 100%; height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
}
@media (max-width: 640px) { .galeria.termek-racs { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ── PNRR pályázati sáv (kötelező arculati elem) — visszafogott méretben ── */
.palyazat {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px 70px;
  display: grid;
  gap: 12px;
}
.palyazat img { width: 100%; height: auto; }

/* ── Szolgáltatás-kártyák a főoldalon ── */
.szolg-kartyak {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 44px 90px;
}
.szolg-kartya {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  display: block;
}
.szolg-kartya img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.szolg-kartya:hover img { transform: scale(1.035); }
.szolg-kartya::after {
  content: '';
  position: absolute; inset: 0;
  /* erősebb alsó árnyék: a fehér hátteres termékfotón (Fresh-üveg) a
     halvány fátyol nem adott elég kontrasztot a feliratnak */
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.72));
}
.szolg-kartya span {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  z-index: 2;
  color: #fff;
  font-size: 14.5px; font-weight: 500; letter-spacing: .04em;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
@media (max-width: 900px) { .szolg-kartyak { grid-template-columns: repeat(2, 1fr); padding: 0 24px 64px; } }

/* ── „Dolgozzunk együtt" záró sáv ── */
.zaro-cta {
  border-top: 1px solid var(--vonal);
  text-align: center;
  padding: 90px 24px;
}
.zaro-cta h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; color: #666; }
.zaro-cta p { margin: 14px auto 0; max-width: 52ch; font-size: 15.5px; line-height: 1.7; color: #555; }
.zaro-cta .gombok { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.keretes.sotet { border: 1px solid #222; color: #222; }
.keretes.sotet:hover { background: #222; color: #fff; }

/* ── Rólam-blokk ── */
.rolam {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 24px 70px;
}
.rolam-kep img { width: 100%; height: auto; }
.rolam-szoveg h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: #666; margin-bottom: 16px; }
.rolam-szoveg p { font-size: 15.5px; line-height: 1.85; color: #444; margin-bottom: 12px; }
.alairas { display: inline-block; margin-top: 8px; font-size: 15px; color: var(--szurke); font-style: italic; }
@media (max-width: 760px) { .rolam { grid-template-columns: 1fr; gap: 24px; } .rolam-kep { max-width: 300px; } }

/* ── GYIK ── */
.gyik { max-width: 760px; margin: 0 auto; padding: 10px 24px 100px; }
.gyik h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; color: #666; margin-bottom: 8px; }
.gyik h3 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--halvany);
  margin: 30px 0 6px;
}
.gyik details { border-bottom: 1px solid var(--vonal); }
.gyik summary {
  padding: 16px 30px 16px 2px;
  font-size: 15.5px; font-weight: 500;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after {
  content: '+';
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--halvany);
  transition: transform .25s;
}
.gyik details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.gyik details p { padding: 0 2px 18px; font-size: 15px; line-height: 1.8; color: #444; }

/* ── Ügyfél-fal (75+ szám + áttűnő névcsoportok) ── */
.ugyfelek { padding: 0 24px 96px; }
/* szekció-horgony: hajszálvonal + kicker, mint egy szerkesztőségi rovatcím */
.ugyfel-fej {
  max-width: 1100px; margin: 0 auto 44px;
  padding-top: 36px; border-top: 1px solid var(--vonal);
}
.ugyfel-fej span {
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--halvany);
}
.ugyfel-blokk {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.7fr;
  gap: 64px; align-items: start;
}
.ugyfel-szam b { display: block; font-size: clamp(64px, 8vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.ugyfel-szam b span { color: var(--halvany); }
.ugyfel-szam .cimke { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--halvany); }
.ugyfel-szam p { margin-top: 18px; font-size: 15px; line-height: 1.75; color: var(--szurke); max-width: 30ch; }
/* a csoportok egymásra rétegezve úsznak át — nincs üres pillanat */
.ugyfel-forgo { position: relative; min-height: 132px; }
.ugyfel-csoport {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px;
  opacity: 0; transition: opacity .7s ease;
}
.ugyfel-csoport.lat { opacity: 1; }
.ugyfel-csoport div {
  display: flex; align-items: center;
  min-height: 33px; padding: 0 2px;
  font-size: 15.5px; font-weight: 500; letter-spacing: .03em; color: #6f6c66;
  border-bottom: 1px solid var(--vonal);
}
.ugyfel-csoport div:nth-last-child(-n+2) { border-bottom: 0; }
.ugyfel-csoport img { max-height: 26px; width: auto; opacity: .7; filter: grayscale(1); }
.ugyfel-pontok { display: flex; gap: 8px; margin-top: 26px; }
.ugyfel-pontok i { width: 5px; height: 5px; border-radius: 50%; background: #ddd; transition: background .3s; }
.ugyfel-pontok i.aktiv { background: #8a8a8a; }
@media (max-width: 800px) {
  .ugyfel-fej { margin-bottom: 34px; padding-top: 28px; }
  .ugyfel-blokk { grid-template-columns: 1fr; gap: 38px; }
  .ugyfel-forgo { min-height: 264px; }
  .ugyfel-csoport { grid-template-columns: 1fr; }
  .ugyfel-csoport div:nth-last-child(-n+2) { border-bottom: 1px solid var(--vonal); }
  .ugyfel-csoport div:last-child { border-bottom: 0; }
}


/* ── „Az oldal tetejére" gomb ── */
.fel-gomb {
  position: fixed; right: 26px; bottom: 26px;
  width: 46px; height: 46px;
  background: #fff; color: var(--tinta);
  border: 1px solid var(--vonal);
  font-size: 17px; line-height: 1;
  z-index: 25;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s,
              background .25s, color .25s, border-color .25s;
}
.fel-gomb.lat { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, background .25s, color .25s, border-color .25s; }
.fel-gomb:hover { background: #222; color: #fff; border-color: #222; }
@media (max-width: 640px) { .fel-gomb { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* ── Google-értékelés badge a láblécben ── */
.google-badge { margin-top: 6px; font-size: 13px; }
.google-badge b { color: #d9a441; font-weight: 600; letter-spacing: .02em; }
.google-badge a:hover { color: var(--tinta); }

/* ── Portfóliónk: aszimmetrikus blokk (3. változat) ── */
.portfolio-blokk {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 100px 44px 90px;
}
.pb-bal h2 { font-size: clamp(34px, 4vw, 50px); font-weight: 600; color: #666; margin-bottom: 16px; }
.pb-bal p { font-size: 15.5px; line-height: 1.85; color: #444; max-width: 40ch; }
.pb-statok { margin-top: 34px; display: grid; gap: 16px; }
.pb-statok > div { border-top: 1px solid var(--vonal); padding-top: 12px; }
.pb-statok b { display: block; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-statok span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--halvany); }
.pb-racs .szolg-kartyak {
  grid-template-columns: 1fr 1fr;
  padding: 0;
  gap: 18px;
  max-width: none;
}
.pb-racs .szolg-kartya { aspect-ratio: 1; }
.pb-racs .szolg-kartya:nth-child(2) { transition-delay: .08s; }
.pb-racs .szolg-kartya:nth-child(3) { transition-delay: .16s; }
.pb-racs .szolg-kartya:nth-child(4) { transition-delay: .24s; }
@media (max-width: 900px) {
  .portfolio-blokk { grid-template-columns: 1fr; gap: 36px; padding: 64px 24px 56px; }
  .pb-statok { grid-template-columns: repeat(2, 1fr); }
  .pb-statok > div:first-child, .pb-statok > div:last-child { grid-column: 1 / -1; }
}

/* ══ Ballagási landing (vegzosok.thenarrativestudio.com) ══════════════════
   A design-audit utáni felépítés (2026-09-27): osztott nyitókép, számokkal
   összevethető csomagok, foglalás a galéria előtt, mobilon rögzített sáv.
   Minden szakasz ugyanarra a 1200 px-es sávra igazodik, mint a foglaló. */
.bszem { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #6b6b6b; }

/* ── Nyitókép: bal hasáb szöveg, jobb hasáb fotó ── */
/* a nyitókép mindig pontosan kitölti a képernyőt: betöltéskor csak a hero látszik */
.bnyito { display: flex; min-height: 100vh; min-height: 100svh; }
.bnyito-szoveg { flex: 0 0 46%; box-sizing: border-box; padding: 30px 56px 48px; display: flex; flex-direction: column; }
.bnyito-logo img { height: 17px; width: auto; display: block; }
.bnyito-torzs { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-top: 32px; }
.bnyito h1 { font-size: clamp(56px, 7vw, 96px); line-height: .95; font-weight: 600; letter-spacing: -.02em; color: var(--tinta); }
.bnyito-alcim { font-size: 19px; line-height: 1.6; color: #444; max-width: 440px; }
.btenyek { border-top: 1px solid var(--tinta); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: 500px; }
.bar { font-size: 30px; font-weight: 600; line-height: 1.1; }
.bidoszak { font-size: 16px; line-height: 1.5; color: #444; }
.bnyito-gombok { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.blink { font-size: 15px; color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.bnyito-labj { font-size: 13.5px; color: #6b6b6b; }
.bnyito-kep { flex: 1; position: relative; overflow: hidden; }
.bnyito-kep > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
.bnyito-logo-feher { display: none; }
.bnyito-belyegek { position: absolute; left: 28px; bottom: 28px; display: flex; gap: 8px; align-items: flex-end; }
.bbelyeg { width: 74px; height: 96px; padding: 0; border: 3px solid #fff; background: #ddd; cursor: zoom-in; }
.bbelyeg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bnyito-belyegek a { margin: 0 0 4px 8px; background: rgba(20,20,20,.72); color: #fff; font-size: 14px; padding: 8px 12px; }

/* ── Szakaszfejek ── */
.bszakasz { max-width: 1200px; margin: 0 auto; padding: 96px 24px 0; box-sizing: border-box; }
.bszakasz-fej { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; scroll-margin-top: 24px; }
.bszakasz-fej h2 { margin-top: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
.bszakasz-intro { font-size: 16px; line-height: 1.7; color: #444; max-width: 640px; margin-top: -12px; }
.bszakasz-foglalas + .foglalo { padding-top: 24px; }
/* a foglaló és a következő szakasz között ne duplázódjon a térköz (100 + 96 px volt) */
.bszakasz-foglalas + .foglalo { padding-bottom: 8px; }

/* ── Csomagok ── */
.bplusz { font-size: 15px; color: #444; }
.bcsomag-racs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bcsomag { background: var(--lap-emelt); padding: 34px 34px 32px; display: flex; flex-direction: column; gap: 22px; }
.bcsomag-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bcsomag h3 { font-size: 22px; font-weight: 600; }
.bcsomag-ar { font-size: 15px; color: #6b6b6b; white-space: nowrap; }
.bcsomag-ar b { font-size: 36px; font-weight: 600; color: var(--tinta); }
.bstat { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #d9d5ce; border-bottom: 1px solid #d9d5ce; }
.bstat li { padding: 16px 0 16px 16px; border-left: 1px solid #d9d5ce; display: flex; flex-direction: column; gap: 2px; }
.bstat li:first-child { padding-left: 0; border-left: 0; }
.bstat b { font-size: 30px; font-weight: 600; line-height: 1.1; }
.bstat span { font-size: 13.5px; color: #555; }
.bcsomag-leiras { font-size: 15px; line-height: 1.55; color: #444; flex: 1; }
.bcsomag .teli { align-self: flex-start; }
.bcsomag.sotet { background: var(--tinta); color: #fff; }
.bcsomag.sotet .bcsomag-ar, .bcsomag.sotet .bstat span { color: #c9c9c9; }
.bcsomag.sotet .bcsomag-ar b { color: #fff; }
.bcsomag.sotet .bstat, .bcsomag.sotet .bstat li { border-color: #4a4a4a; }
.bcsomag.sotet .bcsomag-leiras { color: #ddd; }
.bbonusz { margin-top: 24px; border: 1px solid var(--tinta); padding: 26px 34px; display: flex; gap: 40px; align-items: center; }
.bbonusz-szam { display: flex; align-items: baseline; gap: 12px; flex: 0 0 250px; }
.bbonusz-szam b { font-size: 64px; font-weight: 600; line-height: 1; }
.bbonusz-szam span { font-size: 17px; line-height: 1.3; }
.bbonusz > p:last-child { font-size: 15.5px; line-height: 1.6; color: #333; }

/* ── Referenciák és tudnivalók ── */
.bszakasz + .bgaleria { padding-top: 0; }
.bmind { text-align: center; padding: 32px 24px 0; }
.bmind button { cursor: zoom-in; background: none; }
.bgyik .gyik.bgyik-racs { max-width: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
.bzaro { margin-top: 28px; font-style: italic; color: #555; line-height: 1.7; }
.bkerdes { margin-top: 12px; padding-bottom: 96px; font-size: 16px; line-height: 1.8; color: #333; }
.bkerdes a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
/* a ballagási oldalon a halvány segédszöveg is olvasható legyen (4,5 : 1 felett) */
body:has(.bnyito) .halk { color: #6b6b6b; }

/* ── Foglaló: a ballagási változat kiegészítései ── */
.fog-fizetes-info { margin: 4px 0 14px; }
.foglalo.elkuldve .fog-lepesek, .foglalo.elkuldve .fog-panel { display: none; }
#fog-kesz { max-width: 640px; margin: 0 auto; }
#fog-kesz[hidden], #fog-masodik[hidden] { display: none; }

/* ── Foglaló, ballagási mód: választott csomag sora + létszám két gombbal ── */
.fog-valasztott { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--lap-emelt); padding: 12px 8px 12px 16px; }
.fog-valasztott b { font-size: 16px; font-weight: 600; }
.fog-valasztott span { font-size: 15px; color: #555; }
.fog-csere { min-height: 44px; padding: 0 10px; background: none; border: 0; font: inherit; font-size: 15px; color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fog-valasztott[hidden], .fog-szolgaltatasok[hidden] { display: none; }
.fog-fo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.fog-fo-gomb { min-height: 64px; text-align: left; padding: 10px 16px; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); font: inherit; cursor: pointer; }
.fog-fo-gomb b { display: block; font-size: 17px; font-weight: 600; }
.fog-fo-gomb span { display: block; font-size: 13px; margin-top: 2px; min-height: 1.2em; }
.fog-fo-gomb.aktiv { background: var(--tinta); color: #fff; }
.fog-fo-hint { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #444; }
.fog-lepes.zart .fog-fo { pointer-events: none; }
/* ballagás: nap + óra egy lépésben — a sávok a naptár folytatásaként, saját cím nélkül */
.fog-lepes.osszevont { border-bottom: 0; padding-bottom: 6px; }
.fog-lepes-folytatas { padding-top: 6px; }
.fog-lepes-folytatas > h2 { display: none; }
body:has(.bnyito) .fog-naptar-fej button { width: 44px; height: 44px; }
.fog-nap.bonusz { position: relative; }
/* jan.–febr. (+5 kép): egy 4 px-es tintapont a szám alatt, a kiválasztott napon fehér */
.fog-nap.bonusz::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--tinta); }
.fog-nap.bonusz.aktiv::after { background: #fff; }
.fog-bonusz-jel { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #444; }
.fog-bonusz-jel.aktiv::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--tinta); margin-right: 10px; vertical-align: middle; }

/* ── Animációk (ballagás) ── */
/* becsukáskor a „+” azonnal visszafordul, nem az animáció végén */
.bgyik details.csukodik summary::after { transform: translateY(-50%); }
/* a csomagszámok egymás után úsznak be (a .reveal rendszerrel; késleltetés soronként) */
.js .bstat li.reveal { transform: translateY(10px); transition-duration: .5s, .5s; }

/* ── Mobil: rögzített alsó sáv (csak telefonon) ── */

@media (max-width: 900px) {
  .bcsomag-racs { grid-template-columns: 1fr; }
  .bgyik .gyik.bgyik-racs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bnyito { flex-direction: column; }
  /* a kép tölti ki a maradékot, így magas telefonon sem lóg be a következő szakasz */
  .bnyito-kep { order: -1; flex: 1 0 auto; height: 50vh; height: 50svh; min-height: 320px; }
  .bnyito-szoveg { padding: 22px 20px 8px; }
  .bnyito-logo, .bnyito-belyegek { display: none; }
  .bnyito-logo-feher { display: block; position: absolute; left: 20px; top: 18px; }
  .bnyito-logo-feher img { height: 15px; width: auto; display: block; }
  .bnyito-torzs { padding-top: 0; gap: 16px; }
  .bnyito-gombok .teli { flex: 1 1 100%; text-align: center; }
  .bnyito h1 br { display: none; }
  .bnyito h1 { font-size: 48px; line-height: 1; }
  .bnyito-alcim { font-size: 16px; }
  .bar { font-size: 28px; }
  .bidoszak { font-size: 15px; }
  .bszem { font-size: 11px; }
  .bszakasz { padding-top: 64px; }
  .bszakasz-fej { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bcsomag { padding: 26px 20px; }
  .bstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bstat li:nth-child(3) { padding-left: 0; border-left: 0; }
  .bstat li:nth-child(n+3) { border-top: 1px solid #d9d5ce; }
  .bcsomag.sotet .bstat li:nth-child(n+3) { border-top-color: #4a4a4a; }
  .bbonusz { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .bbonusz-szam { flex: none; }
  .bbonusz-szam b { font-size: 48px; }
  body:has(.bnyito) .fel-gomb { bottom: calc(var(--also-fedes, 0px) + 16px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, bottom .45s cubic-bezier(.2,.8,.2,1); }
  body:has(.bnyito) .fel-gomb.lat { transition: opacity .3s ease, transform .3s ease, bottom .45s cubic-bezier(.2,.8,.2,1); }
}

/* ── Ballagás: #kepvalaszto (nyitókép élő felpróbálása) ── */
.bvalaszto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: #fff; border-top: 1px solid var(--vonal); box-shadow: 0 -8px 30px rgba(0,0,0,.12); }
.bvalaszto-fej { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 16px; font-size: 13px; }
.bvalaszto-fej label { display: flex; gap: 8px; align-items: center; color: #555; }
.bv-ki { flex: 1; min-width: 200px; font-size: 12px; color: #333; }
.bv-masol { padding: 10px 16px; }
.bv-bezar { width: 40px; height: 40px; border: 1px solid var(--vonal); background: #fff; font-size: 20px; cursor: pointer; }
.bvalaszto-sav { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; }
.bv-kep { position: relative; flex: 0 0 auto; height: 120px; padding: 0; border: 3px solid transparent; background: #eee; cursor: pointer; }
.bv-kep img { height: 100%; width: auto; display: block; }
.bv-kep.aktiv { border-color: var(--tinta); }
.bv-kep i { position: absolute; left: 4px; top: 4px; background: var(--tinta); color: #fff; font-style: normal; font-size: 10px; letter-spacing: .08em; padding: 2px 5px; }
body.bvalaszto-nyitva { padding-bottom: 200px; }

/* ── Ballagás: GYIK felugró ablak (a foglaló kötelező jelölőjéből) ── */
.bgyik-ablak { width: min(680px, calc(100vw - 32px)); max-height: min(80vh, 720px); margin: auto; inset: 0; padding: 0; border: 0; background: #fff; color: var(--tinta); display: flex; flex-direction: column; }
.bgyik-ablak:not([open]) { display: none; }
.bgyik-ablak::backdrop { background: rgba(17,17,17,.55); }
.bgyik-ablak-fej { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 10px; border-bottom: 1px solid var(--vonal); }
.bgyik-ablak-fej h2 { font-size: 22px; font-weight: 600; }
.bgyik-ablak-bezar { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; cursor: pointer; }
.bgyik-ablak-torzs { overflow-y: auto; padding: 4px 20px; max-width: none; }
.bgyik-ablak-lab { padding: 14px 20px 18px; border-top: 1px solid var(--vonal); text-align: right; }
.gyik-nyit { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* ══ Ballagási foglaló — design-audit után (2026-09-28) ══════════════════════
   Minden szabály body:has(.bnyito) alatt: a stúdió-foglaló nem változik. */
/* számozott lépések: szám körben, a kész lépés pipát kap; nincs áttetszés */
body:has(.bnyito) .fog-lepes h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta); align-items: center; }
body:has(.bnyito) .lepes-szam { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--tinta); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
body:has(.bnyito) .fog-lepes.kesz .lepes-szam { background: var(--tinta); color: transparent; position: relative; }
body:has(.bnyito) .fog-lepes.kesz .lepes-szam::after { content: ''; position: absolute; left: 8px; top: 7px; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
body:has(.bnyito) .fog-lepes.zart { opacity: 1; }
body:has(.bnyito) .fog-lepes.zart h2 { color: #555; }
body:has(.bnyito) .fog-lepes.zart .lepes-szam { border: 1px solid #c8c4bd; color: #6b6b6b; font-weight: 400; }
body:has(.bnyito) .fog-lepes.zart .fog-fo { opacity: .45; }
body:has(.bnyito) .lepes-ertek { font-size: 14.5px; }

/* naptár dobozok nélkül: kerek, 44 px-es napok */
body:has(.bnyito) .fog-naptar { max-width: 400px; }
body:has(.bnyito) .fog-naptar-fej button { border: 0; background: none; font-size: 20px; }
body:has(.bnyito) .fog-naptar-fej .ho { font-size: 17px; font-weight: 600; }
body:has(.bnyito) .fog-naptar-racs { gap: 2px 0; }
body:has(.bnyito) .fog-naptar-racs .fejnap { font-size: 12px; letter-spacing: 0; color: #6b6b6b; }
body:has(.bnyito) .fog-nap { width: 44px; height: 44px; aspect-ratio: auto; margin: 0 auto; border: 0; border-radius: 50%; font-size: 15px; color: #c8c4bd; }
body:has(.bnyito) .fog-nap.szabad { background: none; border: 0; color: var(--tinta); font-weight: 500; }
body:has(.bnyito) .fog-nap.szabad:hover { background: #f2efea; }
body:has(.bnyito) .fog-nap.szabad.aktiv { background: var(--tinta); color: #fff; }
body:has(.bnyito) .fog-nap.bonusz::after { bottom: 5px; }

/* kezdési idők: a nap neve, alatta rács */
body:has(.bnyito) .fog-sav-nap { font-size: 16px; font-weight: 600; margin-top: 6px; }
body:has(.bnyito) .fog-sav-alcim { font-size: 13.5px; color: #555; margin: 2px 0 12px; }
body:has(.bnyito) .fog-savok-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-width: 480px; }
body:has(.bnyito) .fog-sav { height: 44px; padding: 0; border: 1px solid #cfcac2; background: #fff; font-size: 15px; color: var(--tinta); }
body:has(.bnyito) .fog-sav.aktiv { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* űrlap: fekete, olvasható címkék, fehér 48 px-es mezők (16 px: iPhone nem nagyít) */
body:has(.bnyito) .urlap label { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--tinta); }
body:has(.bnyito) .urlap input:not([type=checkbox]):not([type=hidden]), body:has(.bnyito) .urlap textarea { background: #fff; border: 1px solid #cfcac2; font-size: 16px; font-weight: 400; min-height: 48px; box-sizing: border-box; }
body:has(.bnyito) .mezo-hint { font-size: 13px; font-weight: 400; color: #555; }
body:has(.bnyito) .jelolok-kotelezo { border: 1px solid var(--vonal); padding: 14px 14px 12px; display: grid; gap: 12px; }
body:has(.bnyito) .jelolok-cim { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #555; }
body:has(.bnyito) .urlap label.jelolo { font-weight: 400; color: #333; }
body:has(.bnyito) .jelolo input { width: 22px; height: 22px; margin-top: 0; }
body:has(.bnyito) .fog-osszegzes { background: none; padding: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: #555; }
body:has(.bnyito) .fog-osszegzes[hidden] { display: none; }
body:has(.bnyito) .fog-osszegzes b { font-size: 20px; color: var(--tinta); white-space: nowrap; }
body:has(.bnyito) .fog-zaro .teli { width: 100%; text-align: center; }

/* összegző kártya (asztali): fehér, fekete keret, benne a gomb */
@media (min-width: 1020px) {
  body:has(.bnyito) .fog-panel { background: #fff; border: 1px solid var(--tinta); padding: 24px; }
  body:has(.bnyito) .fog-panel h3 { font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta); margin-bottom: 8px; }
  body:has(.bnyito) .fog-panel dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 0; }
  body:has(.bnyito) .fog-panel dl > div[hidden] { display: none; }
  body:has(.bnyito) .fog-panel dt { font-size: 15px; letter-spacing: 0; text-transform: none; color: #555; margin: 0; }
  body:has(.bnyito) .fog-panel dd { text-align: right; }
  body:has(.bnyito) .fog-p-ar { border-top: 1px solid var(--vonal); margin-top: 6px; padding-top: 14px; }
  body:has(.bnyito) .fog-p-ar span { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--tinta); }
  body:has(.bnyito) .fog-p-ar b { font-size: 30px; }
  body:has(.bnyito) .fog-gomb-panel { width: 100%; margin-top: 18px; text-align: center; }
  body:has(.bnyito) .fog-gomb-panel[disabled] { opacity: .4; cursor: not-allowed; }
  /* asztalon a gomb a kártyában van — az űrlap alján nem kell még egy */
  body:has(.bnyito) .fog-zaro { display: none; }
}
/* mobil: az összegzés és a gomb az űrlap alján rögzítve, amíg az űrlap látszik */
@media (max-width: 1019px) {
  body:has(.bnyito) .fog-zaro { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--vonal); margin: 8px -24px 0; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); }
}