/* ═══════════════════════════════════════════════════════════
   KISS FERI PHOTOGRAPHY: a választó (index.php)
   Két fél képernyő: balra a nappal (esküvő), jobbra az éjszaka
   (kreatív és event). Amelyik fölött az egér van, az kinyílik.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#0A0A0B; --paper:#F3F0EA; --day:#F2EDE4; --day-ink:#191713;
  --volt:#C98A4B; --hot:#FF3D00; --dim:#8A8A94;
  --display:"Anton",Impact,"Arial Narrow",sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --poster:"Anton",Impact,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"Space Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
html,body{max-width:100%}
body{background:var(--ink);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}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--hot);outline-offset:-6px}

/* ── fejléc: a kettő fölött, színt vált a felek szerint ── */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);pointer-events:none;mix-blend-mode:difference;color:#fff}
.top>*{pointer-events:auto}
.brand{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.16em}
.brand__sub{font-family:var(--serif);font-style:italic;font-size:14px;margin-top:3px;letter-spacing:.04em;opacity:.85}
.top__q{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.top__q span{display:block;font-size:9.5px;letter-spacing:.3em;opacity:.6;margin-bottom:3px}
.lang{display:flex;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang a{opacity:.5}.lang a.on{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ── a két fél ──────────────────────────────────────── */
.split{display:flex;min-height:100svh;position:relative;isolation:isolate}
.half{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;overflow:hidden;
  transition:flex .9s var(--ease);cursor:pointer}
.half__pic{position:absolute;inset:0;z-index:0}
.half__pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.4s var(--ease),filter .9s var(--ease),opacity .9s}
.half__ui{position:relative;z-index:2;padding:var(--pad);padding-bottom:clamp(44px,8vh,90px);max-width:560px;width:100%}
.half__no{font-family:var(--mono);font-size:11px;letter-spacing:.3em;display:block;margin-bottom:14px}
.half__t{line-height:.9;letter-spacing:-.02em;margin-bottom:16px;transition:transform .9s var(--ease)}
.half__d{font-size:clamp(14px,1.25vw,17px);max-width:40ch;font-weight:300;line-height:1.55;
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s}
.half__go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .18s,transform .6s var(--ease) .18s}
.half__go i{font-style:normal;transition:transform .4s var(--ease)}
.half:hover .half__go i{transform:translateX(6px)}
.half__time{position:absolute;right:var(--pad);top:50%;z-index:2;transform:rotate(90deg) translateX(-50%);transform-origin:right top;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;white-space:nowrap;opacity:.55}
.half__time b{font-weight:400;margin:0 6px}

/* nyugalmi állapot: mindkettő látszik, a leírás még nem */
.split[data-on] .half__d,.split[data-on] .half__go{opacity:0}
.split[data-on=e] .half--eskuvo,.split[data-on=k] .half--kreativ{flex-grow:1.7}
.split[data-on=e] .half--eskuvo .half__d,.split[data-on=e] .half--eskuvo .half__go,
.split[data-on=k] .half--kreativ .half__d,.split[data-on=k] .half--kreativ .half__go{opacity:1;transform:none}
.split[data-on=e] .half--kreativ .half__pic img,.split[data-on=k] .half--eskuvo .half__pic img{filter:brightness(.55) saturate(.6)}
.split[data-on=e] .half--kreativ .half__t,.split[data-on=k] .half--eskuvo .half__t{opacity:.55}
/* érintőn nincs hover: ott a leírás mindig látszik */
@media (hover:none){.half__d,.half__go{opacity:1;transform:none}}

/* a nappal: krém, serif, puha */
.half--eskuvo{background:var(--day);color:var(--day-ink)}
.half--eskuvo .half__pic{padding:clamp(60px,9vh,110px) clamp(24px,7vw,120px) clamp(130px,22vh,240px) clamp(24px,5vw,80px)}
.half--eskuvo .half__pic img{border-radius:18px;box-shadow:0 30px 80px rgba(60,40,20,.25)}
.half--eskuvo .half__t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(56px,8vw,132px)}
.half--eskuvo .half__no,.half--eskuvo .half__time{color:#8A5A22}
.half--eskuvo .half__go{color:#8A5A22}
.half--eskuvo::after{content:"";position:absolute;inset:auto 0 0;height:55%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,237,228,0) 0%,rgba(242,237,228,.92) 60%,var(--day) 100%)}

/* az éjszaka: fekete, poszterbetű, narancs */
.half--kreativ{background:var(--ink);color:var(--paper)}
.half--kreativ .half__pic img{filter:contrast(1.08) saturate(1.1)}
/* álló nyitókép: a kivágás felül maradjon, ott vannak az arcok */
.half--eskuvo .half__pic img{object-position:50% 28%}
.half--kreativ::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,7,10,.96) 0%,rgba(7,7,10,.55) 42%,rgba(7,7,10,.15) 100%)}
/* szemcse: szürke, kiegyenlített zaj soft-light keveréssel (mint a kreatív oldalon): a sötétítés feketéjét nem
   emeli meg, a képen kb. 2% (eddig színes zaj "screen" keveréssel, ami a cím alatti feketét tejesre világította) */
.half--kreativ::after{content:"";position:absolute;inset:0;z-index:1;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='160' height='160'><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.9' 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>")}
.half--kreativ .half__t{font-family:var(--poster);font-weight:400;text-transform:uppercase;font-size:clamp(60px,8.6vw,140px);letter-spacing:.01em;line-height:.88}
.half--kreativ .half__t em{display:block;font-style:normal;color:transparent;-webkit-text-stroke:2px var(--hot);font-size:.72em}
.half--kreativ:hover .half__t em{color:var(--hot);-webkit-text-stroke-color:var(--hot)}
.half--kreativ .half__no,.half--kreativ .half__time,.half--kreativ .half__go{color:var(--hot)}

/* a varrat közepén egy kis "vagy" */
.seam{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#111;font-family:var(--serif);font-style:italic;font-size:17px;
  pointer-events:none;mix-blend-mode:normal;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:left .9s var(--ease),opacity .4s}
.split[data-on=e] .seam{left:63%}
.split[data-on=k] .seam{left:37%}

/* belépés: a két fél kétfelől csúszik be */
.js .half--eskuvo{animation:inL 1.1s var(--ease) both}
.js .half--kreativ{animation:inR 1.1s var(--ease) .08s both}
.js .seam{animation:pop .7s var(--ease) .9s both}
.js .half__t{animation:up 1s var(--ease) .5s both}
@keyframes inL{from{transform:translateX(-6%)}}
@keyframes inR{from{transform:translateX(6%)}}
@keyframes pop{from{transform:translate(-50%,-50%) scale(0)}}
@keyframes up{from{transform:translateY(.35em);opacity:0}}

/* kilépés: a választott fél kitölti a képet, a másik eltűnik */
.split.leaving .half{transition:flex .6s var(--ease),opacity .4s}
.split.leaving .half:not(.is-leaving){flex-grow:0.0001;opacity:0}
.split.leaving .half.is-leaving{flex-grow:1}
.split.leaving .seam{opacity:0}
.split.leaving .is-leaving .half__pic img{transform:scale(1.14)}

/* ── a fotóbox sáv ──────────────────────────────────── */
.snapbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);
  background:#FFD400;color:#111;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.snapbar__n{font-weight:700;display:inline-flex;align-items:center;gap:8px}
.snapbar__n i{font-style:normal;transition:transform .35s var(--ease)}
a.snapbar:hover .snapbar__n i{transform:translate(3px,-3px)}
.snapbar small{font-weight:400;font-size:10px;letter-spacing:.2em;opacity:.65;border:1px solid rgba(0,0,0,.3);border-radius:999px;padding:2px 8px;margin-left:4px}
.snapbar.is-soon{background:#1A1A1F;color:#D7D2C8}
.snapbar.is-soon small{border-color:rgba(255,255,255,.3)}

/* ── röviden ────────────────────────────────────────── */
.about{padding:clamp(72px,10vw,150px) var(--pad);background:var(--ink);display:grid;gap:22px;max-width:1100px}
.about__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--volt)}
.about__p{font-size:clamp(19px,2vw,28px);font-weight:300;line-height:1.45;color:#D0CCC4;max-width:48ch}
.mark{background:linear-gradient(rgba(255,61,0,.55),rgba(255,61,0,.55)) no-repeat 0 78%/calc(var(--mark,1)*100%) .32em;padding:0 .06em;margin:0 -.06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.about__links{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.about__links a{border-bottom:1px solid rgba(243,240,234,.25);padding-bottom:3px;transition:border-color .3s,color .3s}
.about__links a:hover{color:var(--volt);border-bottom-color:var(--volt)}
.about__cities{margin:0 0 10px;font-size:12px;line-height:2;color:var(--dim)}
.about__cities a{margin-left:8px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25);white-space:nowrap}
.about__cities a:hover{color:var(--paper)}
.about__c{font-size:11px;color:var(--dim);letter-spacing:.08em}
.about__imp a{text-decoration:underline;text-underline-offset:3px}
.about__imp{margin:10px 0 0;font-size:10px;letter-spacing:.04em;line-height:1.6;color:var(--dim);opacity:.8}

/* ── telefon: egymás alatt ─────────────────────────── */
@media (max-width:760px){
  .top{padding:14px 18px;flex-wrap:wrap;row-gap:6px}
  /* a fő cím (h1) telefonon is látszik: a márkanév alatt, kicsiben */
  .top__q{order:3;width:100%;text-align:left;font-size:9.5px;letter-spacing:.12em}
  .top__q span{display:inline;margin:0 .6em 0 0}
  .split{flex-direction:column}
  .half{min-height:50svh;transition:none}
  .split[data-on=e] .half--eskuvo,.split[data-on=k] .half--kreativ{flex-grow:1}
  .half__ui{padding:22px 18px 30px;max-width:none}
  .half--eskuvo .half__pic{padding:64px 22px 120px 18px}
  .half--eskuvo .half__t{font-size:clamp(48px,15vw,72px)}
  .half--kreativ .half__t{font-size:clamp(52px,16vw,78px)}
  .half__time{display:none}
  .seam{top:50%;left:50% !important;width:48px;height:48px;font-size:15px}
  .snapbar{font-size:11px;padding:14px 18px;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .half__d,.half__go{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   v01.06 · AKADÁLYMENTESSÉG ÉS A FELSŐ SÁV
   A sáv nem lebeg a lap fölött és nem keveri a színeket: a két fél
   tetején áll. A márkanév és a fő cím (h1) a krém félen sötét, a
   nyelvváltó asztalon a fekete félen világos, telefonon (ahol a
   krém fél van felül) sötét. Így minden felirat legalább 4,5:1.
   ═══════════════════════════════════════════════════════════ */
.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}
.top{position:absolute;mix-blend-mode:normal;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand lang" "q q";row-gap:10px;align-items:start;color:#F3F0EA}
.top .brand{grid-area:brand;color:#191713}
.top .brand__sub{opacity:1;color:#8A5A22}
.top__q{grid-area:q;justify-self:start;text-align:left;color:#191713;font-size:10.5px}
.top__q span{opacity:1;color:#6A6355}
.top .lang{grid-area:lang}
.lang a{opacity:1;display:inline-block;padding:10px 5px;margin:-10px -2px}
.lang a:not(.on){opacity:.8}
.about__imp{opacity:1}
.about__links a{padding:8px 0 5px;border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,linear-gradient(rgba(243,240,234,.25),rgba(243,240,234,.25)) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease),color .3s}
.about__links a:hover{background-size:100% 1px,100% 1px}
.about__cities a{display:inline-block;padding-block:5px}
/* a felső sáv (márkanév és fő cím) alatt marad hely, a kártya nem csúszik alá */
.half--eskuvo .half__pic{padding-top:clamp(116px,15vh,150px)}
@media (max-width:760px){
  .half--eskuvo .half__pic{padding-top:104px}
  .top .lang{color:#191713}
  .top__q span{display:inline;margin:0 .6em 0 0}
}

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

/* ═══ v01.06 · A ZSŰRI ÉS A DESIGN-LEKTOR JAVASLATAI ═══ */
/* az oldalra fektetett idő ("15:00 → 05:40") teljes erővel: 5:1 fölött */
.half__time{opacity:1}
/* az esküvői fél krém átmenete csak a kép alját fedje, a fotó maradjon ép */
.half--eskuvo::after{height:40%;background:linear-gradient(180deg,rgba(242,237,228,0) 0%,rgba(242,237,228,.9) 55%,var(--day) 100%)}
/* a "vagy" kör papírszín, nem tiszta fehér */
.seam{background:var(--paper)}
/* a "Ki vagyok" részben egy hangos szín: a narancs filctoll; a kicker csendes, a kiemelés a márka dőlt serifje */
.about__k{color:#A9A49C}
.mark{font-family:var(--serif);font-style:italic;font-weight:400}

/* ══ v01.07 · HOVER: a fejléc minden linkje válaszol ══ */
/* a logó link csak a szóképet fogja (eddig a fejléc teljes első oszlopát, 1295x77 px-t) */
.top .brand{justify-self:start}
.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__sub{transition:transform .4s var(--ease)}
.brand:hover .brand__name{background-size:100% 1px}
.brand:hover .brand__sub{transform:translateX(4px)}
/* 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),opacity .3s}
.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 */
.lang a:hover{opacity:1}
/* 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)}