/* ═══════════════════════════════════════════════════════════
   KISS FERI PHOTOGRAPHY: kreatív és event (kreativ.php)
   Poszter, filmtekercs, narancs blokkok. Más betű, más ritmus,
   mint az esküvői oldal; közös a név, a mono időbélyeg.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0A0A0B; --bg2:#121113; --paper:#F2EFE8; --dim:#8E8A84;
  --or:#FF3D00; --on-or:#0A0A0B; --line:rgba(242,239,232,.14);
  --poster:"Anton",Impact,"Arial Narrow",sans-serif;
  --display:"Syne",Impact,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --body:"Inter",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(18px,4vw,56px); --bar:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* vízszintesen semmi nem görgethet és nem pattog: a clip nem csinál görgetőkonténert a body-ból (a hidden igen, és az iOS-en lötyögött) */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
html,body{max-width:100%}
body{background:var(--bg);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;overscroll-behavior-x:none}
body.lock{overflow:hidden}
html:has(body.lock){overflow:hidden}   /* a html a görgető, a body-n a hidden magában már nem zár */
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--or);color:var(--on-or)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
section{position:relative}

/* szemcse és a betöltési vaku. A szemcse nagyobb a képernyőnél, hogy a rázkódása ne látszódjon a széleken;
   telefonon és érintős gépen nincs, mert a kevert, egész képernyős réteg akasztotta a görgetést.
   2026-11-07 (NAES-tanulság: a szemcse objektíveffekt, a tiszta feketén és fehéren nullára halványul):
   eddig színes zaj volt "screen" keveréssel, ez a fekete lapot 0,04-ről 0,07 lumára emelte (tejes fekete),
   miközben maga a szemcse alig látszott (szórás 0,8%). Most szürke, 0,5 körül kiegyenlített zaj "soft-light"
   keveréssel: a fekete és a fehér változatlan, a lap feketéjén ugyanúgy van textúra (0,7%), a képeken és a
   narancson erősebb (kb. 2%), színzaj nincs. */
.grain{position:fixed;inset:-8%;z-index:95;pointer-events:none;opacity:.18;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='2.5 0 0 0 -.75  2.5 0 0 0 -.75  2.5 0 0 0 -.75  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
.flash{position:fixed;inset:0;z-index:140;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:flash .7s ease-out forwards}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* ── fejléc: narancs szalag ─────────────────────────── */
.bar{position:fixed;inset:0 0 auto;z-index:90;height:var(--bar);display:flex;align-items:center;gap:24px;padding:0 var(--pad);
  background:var(--or);color:var(--on-or);border-bottom:2px solid var(--on-or)}
.brand{display:flex;align-items:baseline;gap:8px;line-height:1}
.brand__name{font-family:var(--poster);font-weight:400;font-size:17px;letter-spacing:.16em;white-space:nowrap}
.brand__sub{font-family:var(--serif);font-style:italic;font-size:14px}
.bar__nav{display:flex;gap:22px;margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.bar__nav a{position:relative;padding:4px 0;white-space:nowrap}
.bar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--on-or);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.bar__nav a:hover::after{transform:scaleX(1)}
.bar__cross{font-weight:700}
.bar__right{display:flex;align-items:center;gap:16px}
.lang{display:flex;gap:5px;font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.lang a{opacity:.55}.lang a.on{opacity:1;text-decoration:underline;text-underline-offset:4px}
.bar__cta{background:var(--on-or);color:var(--or);white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px;transition:transform .35s var(--ease),background .3s,color .3s}
.bar__cta:hover{background:var(--paper);color:var(--on-or);transform:translateY(-2px)}

/* ── poszter ────────────────────────────────────────── */
.poster{min-height:100svh;padding:calc(var(--bar) + 22px) var(--pad) 26px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative}
/* a Vanta köd a poszter mögött: a motion.js tölti be a lap után, és csak akkor mutatja, ha a lap gyors marad */
.poster__fog{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.poster__fog.on{opacity:.75}
/* a cím fölött a köd sötétebb marad, hogy a két sor olvasható legyen */
.poster__fog::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.15) 45%,rgba(10,10,11,.5) 100%)}
.poster__fog canvas{display:block}
.poster>*:not(.poster__fog){position:relative;z-index:1}
.poster__h{font-family:var(--poster);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:.005em;
  display:grid;gap:clamp(12px,2vw,26px)}
.poster__l{display:block;overflow:hidden;white-space:nowrap;font-size:clamp(54px,12.3vw,236px);margin-top:-.16em}
.poster__l i{display:block;font-style:normal;padding:.16em 0 .06em}
.js .poster__l i{transform:translateY(105%);animation:lineUp 1.1s var(--ease) forwards}
.js .poster__l--2 i{animation-delay:.14s}
.poster__l--2{color:var(--or)}
.poster__l--2 i{transition:color .3s;-webkit-text-stroke:0}
.poster__l--2:hover i{color:transparent;-webkit-text-stroke:3px var(--or)}
@keyframes lineUp{to{transform:none}}

/* a két sor között futó képsáv */
.band{display:block;height:clamp(90px,16vh,190px);overflow:hidden;border-block:2px solid var(--or);position:relative}
/* a h1 első sora: a kulcsszó kicsiben, a poszter két sora fölött */
.poster__k{display:block;font-family:var(--mono);font-weight:400;font-size:11px;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:clamp(4px,1vw,10px)}
.js .band{clip-path:inset(0 100% 0 0);animation:bandIn 1.2s var(--ease) .35s forwards}
@keyframes bandIn{to{clip-path:inset(0 0 0 0)}}
.band__run{display:flex;height:100%;width:max-content;animation:run 38s linear infinite}
.band__run img{height:100%;width:auto;max-width:none;filter:grayscale(1) contrast(1.15);transition:filter .4s}
.band:hover .band__run{animation-play-state:paused}
.band__run img:hover{filter:none}
@keyframes run{to{transform:translateX(-50%)}}

.poster__foot{display:grid;grid-template-columns:1fr 2fr auto;gap:32px;align-items:end}
.poster__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.poster__lead{font-size:clamp(16px,1.6vw,21px);font-weight:300;max-width:60ch;color:#D8D3CB}
.js .poster__kicker,.js .poster__lead,.js .rec{opacity:0;animation:fade .8s var(--ease) .9s forwards}
@keyframes fade{to{opacity:1}}
.rec{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--paper);
  border:1px solid var(--line);padding:8px 12px}
.rec i{width:10px;height:10px;border-radius:50%;background:#FF3B30;box-shadow:0 0 12px #FF3B30;animation:blink 1.1s steps(2) infinite}
.rec b{letter-spacing:.2em}
@keyframes blink{50%{opacity:.15}}

/* ── a tekercs ──────────────────────────────────────── */
.reel{padding:clamp(60px,8vw,110px) 0 0;background:var(--bg2);border-top:1px solid var(--line)}
.reel__head{display:flex;align-items:end;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:0 var(--pad);margin-bottom:30px}
.reel__t{font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,110px);line-height:.9}
.reel__hint{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:grid;gap:4px}
.reel__ctl{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.reel__count{margin-right:10px;color:var(--dim)}
.reel__count b{color:var(--paper);font-weight:400}
.reel__btn{width:46px;height:46px;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;transition:background .3s,color .3s,border-color .3s}
.reel__btn:hover{background:var(--or);color:var(--on-or);border-color:var(--or)}
/* a filmcsík: perforáció fent és lent */
.film{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;cursor:grab;scrollbar-width:none;
  padding:26px var(--pad);position:relative;
  background:
    repeating-linear-gradient(90deg,var(--bg) 0 14px,transparent 14px 26px) 0 6px/26px 12px repeat-x,
    repeating-linear-gradient(90deg,var(--bg) 0 14px,transparent 14px 26px) 0 calc(100% - 6px)/26px 12px repeat-x,
    #1C1A19}
.film::-webkit-scrollbar{display:none}
.film.drag{cursor:grabbing;scroll-snap-type:none}
.film__track{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content;align-items:flex-start}
/* a soron lévő kocka középen áll meg (a két szélén a lehető legközelebb); a léptetés is ide hoz */
.frame{margin:0;scroll-snap-align:center;display:flex;flex-direction:column;gap:9px;flex:none}
.frame .card__hit{height:clamp(300px,58vh,640px);aspect-ratio:var(--ar);display:block;overflow:hidden;background:#000;position:relative;
  transition:transform .5s var(--ease)}
.frame .card__hit img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .5s,transform .9s var(--ease)}
.frame:hover .card__hit img{filter:saturate(1.25) contrast(1.05);transform:scale(1.04)}
.frame .card__hit::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.frame:hover .card__hit::after{animation:flash .45s ease-out}
.frame figcaption{display:flex;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.frame figcaption b{color:var(--or);font-weight:700}
.frame figcaption em{font-style:normal;margin-left:auto;font-variant-numeric:tabular-nums}
/* az utolsó kocka: innen nyílik a teljes galéria */
.frame--more{height:clamp(300px,58vh,640px);width:clamp(230px,24vw,360px);display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:clamp(18px,2.4vw,34px);border:1px dashed var(--line);transition:border-color .3s,background .3s}
.frame--more:hover{border-color:var(--or);background:rgba(255,61,0,.06)}
.more__k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.more__n{font-family:var(--poster);font-weight:400;font-size:clamp(64px,8vw,130px);line-height:.9;color:var(--or);letter-spacing:.01em}
.more__t{font-size:15px;font-weight:300;color:#D0CBC3;max-width:18ch}
.more__c{margin-top:18px;align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:11px 14px;
  transition:background .3s,color .3s,border-color .3s}
.frame--more:hover .more__c{background:var(--or);color:var(--on-or);border-color:var(--or)}
.reel__bar{height:3px;background:var(--line);position:relative}
.reel__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--or);transition:width .15s linear}

/* ── az átfutás: narancs blokk ─────────────────────── */
.turn{background:var(--or);color:var(--on-or);padding:clamp(72px,9vw,140px) var(--pad);overflow:hidden}
.turn__step{--spot:rgba(10,10,11,.14)}
.turn__k{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:12px}
.turn__t{font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(40px,6.4vw,100px);line-height:.9;margin-bottom:clamp(36px,5vw,70px)}
.turn__row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);position:relative}
.turn__step{padding-top:22px;border-top:2px solid var(--on-or);position:relative}
.turn__step::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;background:var(--on-or);border-radius:50%}
.turn__n{display:block;font-family:var(--poster);font-size:clamp(52px,7.5vw,118px);line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.turn__step h3{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:16px 0 8px}
.turn__step p{font-size:15px;line-height:1.5;max-width:30ch;opacity:.85}
.js .turn__step{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease) calc(var(--i)*.12s),transform .7s var(--ease) calc(var(--i)*.12s)}
.js .turn.in .turn__step{opacity:1;transform:none}
.turn__line{margin-top:clamp(36px,5vw,70px);height:6px;background:rgba(20,10,5,.18);position:relative}
.turn__line i{position:absolute;inset:0 auto 0 0;width:0;background:var(--on-or);transition:width 2.2s var(--ease)}
.turn.in .turn__line i{width:100%}

/* ── amit csinálok: a négy kategória, mindegyik a saját képével ─────────────────────────
   Alapból (telefon, érintő, JS nélkül) függőleges lista. Asztalon, egérrel a motion.js
   kitűzi a szekciót (.is-pinned), és a négy panel oldalra csúszik a görgetéssel. */
.rows{padding:clamp(72px,9vw,140px) var(--pad)}
.rows__k{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.rows__list{list-style:none;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"n t p" "n d p" "n go p";gap:12px 24px;align-items:start;align-content:center;
  padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.row:hover{padding-left:16px}
.row__n{grid-area:n;font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:.5em}
.row__t{grid-area:t;font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(34px,5.4vw,88px);line-height:.92;transition:color .3s}
.row:hover .row__t{color:var(--or)}
.row__d{grid-area:d;font-size:15px;font-weight:300;color:#C9C4BC;max-width:44ch}
.row__go{grid-area:go;justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line);padding:11px 16px;
  transition:background .3s,color .3s,border-color .3s}
.row__go:hover{background:var(--or);color:var(--on-or);border-color:var(--or)}
.row__pic{grid-area:p;margin:0;aspect-ratio:3/2;overflow:hidden;background:#000;align-self:center}
.row__pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .5s}
.row:hover .row__pic img{filter:saturate(1.2) contrast(1.05)}
/* a kitűzött, vízszintes változat */
.rows.is-pinned{height:100svh;padding:calc(var(--bar) + 28px) 0 0;overflow:hidden;display:flex;flex-direction:column}
.rows.is-pinned .rows__k{padding:0 var(--pad);margin-bottom:0}
.rows.is-pinned .rows__list{display:flex;align-items:stretch;flex:1;min-height:0;width:max-content;border:0;padding:0 var(--pad);will-change:transform}
.rows.is-pinned .row{width:min(74vw,1160px);height:100%;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"n p" "t p" "d p" "go p";
  gap:14px clamp(24px,3vw,56px);align-content:center;border:0;border-left:1px solid var(--line);padding:0 clamp(24px,3vw,56px) 0 clamp(20px,2.4vw,40px);transition:none}
.rows.is-pinned .row:hover{padding-left:clamp(20px,2.4vw,40px)}
.rows.is-pinned .row__t{font-size:clamp(48px,6.4vw,118px)}
.rows.is-pinned .row__d{font-size:clamp(15px,1.3vw,18px)}
.rows.is-pinned .row__pic{height:min(64svh,720px);aspect-ratio:auto;width:100%}
.rows.is-pinned .row__pic img{scale:1.16}

/* ── GYIK ───────────────────────────────────────────── */
.kfaq{padding:clamp(72px,9vw,140px) var(--pad);border-top:1px solid var(--line)}
.kfaq__t{font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(40px,6vw,96px);line-height:.92;margin-bottom:clamp(28px,4vw,56px);max-width:16ch}
.kfaq__list{max-width:980px;border-top:1px solid var(--line)}
.kqa{border-bottom:1px solid var(--line)}
.kqa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:clamp(16px,1.9vw,21px);transition:color .3s}
.kqa summary::-webkit-details-marker{display:none}
.kqa summary:hover{color:var(--or)}
.kqa summary i{flex:none;width:22px;height:22px;position:relative}
.kqa summary i::before,.kqa summary i::after{content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:var(--or);transition:transform .35s var(--ease)}
.kqa summary i::after{transform:rotate(90deg)}
.kqa[open] summary i::after{transform:rotate(0)}
.kqa p{padding:0 0 24px;color:#C9C4BC;font-weight:300;max-width:70ch}

/* ── kapcsolat ──────────────────────────────────────── */
.kontakt{background:var(--bg2);border-top:1px solid var(--line);padding:clamp(60px,8vw,120px) var(--pad);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px)}
.kontakt__stamp{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--or);margin-bottom:14px}
.kontakt__t{font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(56px,9vw,150px);line-height:.88}
.kontakt__t em{font-style:normal;display:block;color:transparent;-webkit-text-stroke:2px var(--or)}
.kontakt__lead{margin-top:22px;font-size:clamp(15px,1.4vw,18px);font-weight:300;color:#D0CBC3;max-width:52ch}
.kontakt__meta{display:grid;gap:12px;margin-top:30px}
.kontakt__meta div{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px}
.kontakt__meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);min-width:92px}
.kontakt__meta dd a{border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.kontakt__meta dd a:hover{color:var(--or);border-bottom-color:var(--or)}
.qf{display:grid;gap:14px}
.qf__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qf label{display:flex;flex-direction:column;gap:7px}
.qf label span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.qf input,.qf select,.qf textarea{background:var(--bg);border:1px solid var(--line);border-radius:0;color:var(--paper);padding:14px 15px;font:inherit;font-size:15px;
  transition:border-color .3s}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;border-color:var(--or)}
.qf textarea{resize:vertical}
.qf__full{grid-column:1/-1}
.qf__hp{position:absolute;left:-9999px}
.qf__go{justify-self:start;background:var(--or);color:var(--on-or);padding:16px 30px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .35s var(--ease),box-shadow .35s}
.qf__go:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(255,61,0,.4)}
.formNote{padding:14px 16px;font-size:14px;border:1px solid}
.qf__legal{grid-column:1/-1;margin:2px 0 0;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--dim)}
.qf__legal a{text-decoration:underline;text-underline-offset:3px}
.qf__legal a:hover,.kfoot__imp a:hover{color:var(--or)}
.kfoot__imp a{text-decoration:underline;text-underline-offset:3px}
.formNote--ok{border-color:var(--or);color:var(--or);background:rgba(255,61,0,.08)}
.formNote--bad{border-color:#FF3B30;color:#FF6B61;background:rgba(255,59,48,.08)}

/* ── lábléc ─────────────────────────────────────────── */
.kfoot{padding:0 var(--pad) 26px;border-top:1px solid var(--line)}
.kfoot__cross{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(26px,4vw,48px) 0;border-bottom:1px solid var(--line);transition:color .3s}
.kfoot__cross span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.kfoot__cross b{font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4.4vw,64px);line-height:1}
.kfoot__cross:hover b{color:var(--or)}
.kfoot__tags{display:flex;flex-wrap:wrap;gap:7px;padding:26px 0 18px}
.kfoot__tags span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim);border:1px solid var(--line);padding:5px 10px}
.kfoot__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim)}
.kfoot__bar a:hover{color:var(--or)}
.kfoot__imp{margin:14px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:1.6;color:var(--dim);opacity:.8}

/* ── nagyító ────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:120;background:rgba(8,7,7,.97);display:flex;align-items:center;justify-content:center;padding:clamp(16px,5vw,60px)}
.lb[hidden]{display:none}
.lb__fig{max-width:min(1400px,92vw);max-height:86vh;max-height:calc(100svh - 32px);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
.lb__fig img{max-height:80vh;max-height:min(80svh,calc(100svh - 96px));width:auto;max-width:100%;object-fit:contain}
.lb__fig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:center}
.lb__x{position:absolute;top:18px;right:22px;font-size:30px;line-height:1;width:46px;height:46px;display:grid;place-items:center;transition:background .3s,color .3s}
.lb__x:hover{background:var(--or);color:var(--on-or)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);font-size:42px;width:58px;height:58px;display:grid;place-items:center;transition:background .3s,color .3s}
.lb__nav:hover{background:var(--or);color:var(--on-or)}
.lb__nav--p{left:12px}.lb__nav--n{right:12px}

/* ── reszponzív ─────────────────────────────────────── */
/* 1180 alatt a sávban nem fér el a menü a gomb mellett, 1024-es laptopon lelógott a CTA */
@media (max-width:1180px){
  .bar__nav{display:none}
  .bar__right{margin-left:auto}
}
@media (max-width:980px){
  .poster__foot{grid-template-columns:1fr;gap:16px}
  .rec{justify-self:start}
  .turn__row{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:40px 1fr;grid-template-areas:"n p" "n t" "n d" "n go";gap:12px 16px}
  .row__pic{aspect-ratio:16/10}
  .kontakt{grid-template-columns:1fr}
}
@media (max-width:600px){
  .bar{gap:12px}
  .poster{min-height:auto;gap:40px}
  .brand__sub{display:none}
  .brand__name{font-size:14px;letter-spacing:.14em}
  .bar__cta{padding:8px 12px;font-size:10px}
  .poster__l{font-size:clamp(34px,11vw,90px)}   /* 375 px-en 41 px: a "Reggel posztolod." sor így fér ki */
  .band{height:80px}
  /* telefonon a kocka férjen be a képernyőbe: fekvő kép is egészben látszik, nem csak egy darabja */
  .frame .card__hit,.frame--more{height:clamp(200px,60vw,52vh)}
  .turn__row{grid-template-columns:1fr}
  .qf__row{grid-template-columns:1fr}
  .reel__hint{display:none}
  .lb__nav{font-size:30px;width:44px;height:44px}
}
@media (hover:none),(max-width:900px){
  .grain{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .poster__l i,.js .band,.js .poster__kicker,.js .poster__lead,.js .rec,.js .turn__step{opacity:1;transform:none;clip-path:none}
  .grain{display:none}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════
   v01.06 · AKADÁLYMENTESSÉG (a jury mérése alapján)
   ═══════════════════════════════════════════════════════════ */
.skip{position:fixed;left:16px;top:-90px;z-index:1001;padding:12px 18px;background:#0A0A0B;color:#F3F0EA;font:600 13px/1 var(--body);letter-spacing:.04em;border:2px solid #F3F0EA;border-radius:6px;transition:top .2s}
.skip:focus{top:16px}
main:focus,section:focus{outline:none}
/* a narancs sávon a nem aktív nyelv is teljes erővel látszik (5,6:1), az aktívat a vastagság és az aláhúzás jelzi */
.lang a{opacity:1;display:inline-block;padding:10px 5px;margin:-10px -2px;font-weight:400}
.lang a.on{font-weight:700}
.brand{padding-block:10px}
.kfoot__imp{opacity:1}
.kfoot__bar a,.kontakt__meta dd a,.qf__legal a{display:inline-block;padding-block:5px}
.kontakt__meta dd a{border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .3s}
.kontakt__meta dd a:hover{background-size:100% 1px}
.frame--more{transition:border-color .3s,background .3s,transform .45s var(--ease)}
.frame--more:hover{transform:translateY(-4px)}

/* az impresszum adatkezelési linkje is legalább 24 px magas érintési cél */
.kfoot__imp a{display:inline-block;padding-block:6px}

/* ═══════════════════════════════════════════════════════════
   v01.06 · A ZSŰRI ÉS A DESIGN-LEKTOR JAVASLATAI
   ═══════════════════════════════════════════════════════════ */
:root{color-scheme:dark}
html{scroll-padding-top:calc(var(--bar) + 16px)}
/* a narancs szalagon a fókuszgyűrű fekete (5,6:1): narancson a narancs nem látszott */
.bar :focus-visible{outline-color:var(--on-or)}
/* űrlapmezők: a keret legalább 3:1, fókuszban kétpixeles narancs gyűrű */
.qf input,.qf select,.qf textarea{border-color:rgba(242,239,232,.38)}
.qf input:focus-visible,.qf select:focus-visible,.qf textarea:focus-visible{box-shadow:0 0 0 2px var(--or)}
/* a kitűzött sort a böngésző fókuszkor ne görgesse el oldalra (azt a GSAP tolja, a motion.js odagörget) */
.rows.is-pinned{overflow:clip}
/* a tekercs hover villanása visszafogott: gyors végigsöprésnél se villogjon a teljes kocka */
.frame:hover .card__hit::after{animation:flashSoft .45s ease-out}
@keyframes flashSoft{0%{opacity:.22}100%{opacity:0}}
/* a REC pont a márka narancsa, fényudvar nélkül */
.rec i{background:var(--or);box-shadow:none}
/* filctoll-kiemelés a kreatív oldalon is: narancs, a dőlt a márka serifje (nem ferdített Inter) */
.mark{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;
  background:linear-gradient(rgba(255,61,0,.5),rgba(255,61,0,.5)) no-repeat 0 82%/calc(var(--mark,1)*100%) .3em;
  padding:0 .06em;margin:0 -.06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* ékezetek a többsoros nagy címekben */
.row__t,.kfaq__t,.turn__t{line-height:1.02}
/* hover: a GYIK jele, a lábléc nyila; a sorok címe transformmal mozdul, nem layouttal */
.kqa summary i{transition:transform .35s var(--ease)}
.kqa summary:hover i{transform:scale(1.18)}
.kfoot__cross b{display:inline-block;transition:color .3s,transform .4s var(--ease)}
.kfoot__cross:hover b{transform:translateX(6px)}
.row{transition:none}
.row:hover{padding-left:0}
.row__t,.row__d{transition:color .3s,transform .5s var(--ease)}
.row:hover .row__t,.row:hover .row__d{transform:translateX(16px)}
.rows.is-pinned .row:hover .row__t,.rows.is-pinned .row:hover .row__d{transform:none}

/* menü 1180 px alatt: gomb a szalagban, a lenyíló panel fekete, a nyelvváltó telefonon ide költözik */
.bar__menu,.bar__lang{display:none}
@media (max-width:1180px){
  .bar__menu{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;padding:0 11px}
  .bar__menu span{display:block;height:2px;background:var(--on-or);transition:transform .35s var(--ease)}
  .bar__menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .bar__menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .bar.is-open .bar__nav{display:flex;position:fixed;left:0;right:0;top:var(--bar);flex-direction:column;align-items:flex-start;gap:2px;margin:0;
    padding:16px var(--pad) 26px;background:var(--bg);color:var(--paper);border-bottom:2px solid var(--or);max-height:calc(100svh - var(--bar));overflow:auto}
  .bar.is-open .bar__nav a{font-family:var(--poster);font-size:clamp(28px,8vw,44px);letter-spacing:.01em;line-height:1.15;padding:6px 0;transition:color .3s,transform .35s var(--ease)}
  .bar.is-open .bar__nav a::after{display:none}
  .bar.is-open .bar__nav a:hover{color:var(--or);transform:translateX(6px)}
  .bar.is-open .bar__lang{display:flex;margin-top:14px}
  .bar.is-open .bar__nav .bar__lang a{font-family:var(--mono);font-size:13px;line-height:1}
  .bar.is-open .bar__nav :focus-visible{outline-color:var(--or)}
}
@media (max-width:600px){.bar__right > .lang{display:none}}

/* a REC doboz a mozgás kapcsolója (WCAG 2.2.2): szünetben PAUSE felirat és két csík a pont helyén */
.rec{cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--paper);background:transparent;
  transition:border-color .3s,transform .35s var(--ease)}
.rec:hover{border-color:var(--or);transform:translateY(-2px)}
.rec[aria-pressed="true"] i{border-radius:0;background:linear-gradient(90deg,var(--paper) 0 34%,transparent 34% 66%,var(--paper) 66%);animation:none}
/* csak a felolvasónak szóló szöveg (pl. a REC gomb neve: "REC (a mozgás szüneteltetése)") */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══ v01.07 · HOVER: minden fő cél válaszol, és nem csak színnel ══ */
/* a link nyila a link irányába lép (kf_arr) */
.arr{display:inline-block;transition:transform .4s var(--ease)}
a:hover .arr,a:focus-visible .arr{transform:translateX(5px)}
/* a logó: a név alá aláhúzás rajzolódik */
.brand__name{padding-bottom:3px;margin-bottom:-3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.brand:hover .brand__name{background-size:100% 1px}
/* HU és EN: az aktív alatt végig ott a vonal, a másik alá hoverre rajzolódik */
.lang a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;background-origin:content-box;transition:background-size .35s var(--ease)}
.lang a.on{text-decoration:none}
.lang a.on,.lang a:hover{background-size:100% 1px}
.lang a.on:hover{background-size:100% 2px}   /* az aktív nyelv is válaszol: a vonala megvastagszik */

/* ══ v01.07 · NAGY CÍMEK: az ékezet nem ér a fenti sorba ══ */
/* Anton: a nagybetű 0,86 em magas, az ékezetes nagybetű teteje 1,10 em, az ő és ű teteje 1,17 em.
   1,24-es sorköznél a második sor ékezete, az ő és ű is, legalább 0,07 em-re marad a fölötte lévő sor aljától (eddig .88 és 1,02 között volt). */
.row__t,.kfaq__t,.turn__t,.kontakt__t,.reel__t,.kfoot__cross b{line-height:1.24}