/* ==========================================================================
   My webpage – közös stíluslap
   Az összes oldal ezt tölti be, ezért itt él minden szín, betű és komponens.

   Tartalom
   1. Változók (színek, betűk)       7. Szekciók és szellemszámok
   2. Alapok                          8. Galéria-sáv, tanúsítvány-kártyák
   3. Fejléc és menü                  9. Karusszel
   4. Gombok                         10. Videó
   5. Hero                           11. Cikkkártyák és kapcsolat-kártya
   6. Kulcsszámok sáv                12. Lábléc, lebegő elemek, lightbox
   ========================================================================== */



/* 0. BETŰTÍPUSOK (helyben tárolva: a látogató böngészője nem tölt le semmit a Google-től, ez GDPR-barát)
   A fájlok az assets/fonts mappában vannak; mind SIL Open Font License (OFL) alatti, szabadon használható.
   Aclonica (címek, gombok) · IBM Plex Sans (szöveg, 300–700) · EB Garamond (cikkcímek, 400–600).
   A "latin-ext" fájl az ő és ű betűket tartalmazza, a böngésző csak akkor tölti le, ha az oldalon ilyen betű van.
   ------------------------------------------------------------------------ */
@font-face { font-family: "Aclonica"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/aclonica-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Aclonica"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/aclonica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }



/* 1. VÁLTOZÓK
   Ha egy színt át akarsz írni az egész oldalon, itt kell megtenni. */
:root {
  --gold:        #DCA54A;
  --gold-soft:   #F0C87A;   /* gombszöveg, számok */
  --gold-rgb:    220, 165, 74;
  --ink-dark:    #141004;   /* sötét szöveg arany háttéren */
  --muted:       #B9B3A6;   /* halvány szöveg sötét háttéren */
  --panel-a:     #15120B;   /* kártyák háttere, színátmenet eleje */
  --panel-b:     #0D0C09;   /* ... és vége */

  --font-display: "Aclonica", sans-serif;
  --font-body:    "IBM Plex Sans", sans-serif;

  --frame-border: rgba(var(--gold-rgb), .6);                                     /* képkeretek arany vonala */
  --frame-glow: 0 0 22px rgba(var(--gold-rgb), .26), 0 0 7px rgba(var(--gold-rgb), .32);   /* ... és a derengésük */
  --shrink: .9;            /* hoverre ennyire zsugorodnak a gombok, menüpontok */
  --content: 1200px;        /* a tartalomsáv szélessége */
  --gutter: 25px;           /* oldalsó margó tableten (mobilon 24 px, lásd lent) */
}
@media (max-width: 767px) { :root { --gutter: 24px; } }


/* 2. ALAPOK
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, p { margin: 0; }

.container {
  width: min(var(--content), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* csak képernyőolvasónak és keresőnek látható */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--gold);
  color: #000;
  font-family: var(--font-display);
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* billentyűzetes fókusz: vastag arany gyűrű */
:is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* film-szemcse az egész oldalon (az eredeti oldal 6.11 szabálya) */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .85;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* belépő animáció: csak akkor rejt el bármit, ha a JavaScript biztosan fut */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.js-ready .reveal.is-visible { opacity: 1; transform: none; }

/* szekciócímek (szellemszám + "01." + cím): lentről felfelé úsznak be, 2 s alatt,
   az eredeti oldal "fadeInUp" animációja. A .js-ready osztályt a main.js teszi fel,
   így ha a szkript nem töltődik be, a tartalom nem marad láthatatlan. */
.js-ready .fade-up { opacity: 0; }
.js-ready .fade-up.is-visible { animation: fade-up 2s both; }

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: none; }
}

/* görgetés-jelző csík az oldal tetején */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: 100%; height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}


/* 3. FEJLÉC ÉS MENÜ
   A fejléc a hero FÖLÉ van téve (position: absolute), átlátszó háttérrel.
   ------------------------------------------------------------------------ */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

.site-header::after {            /* hajszálvonal a fejléc alatt */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: min(var(--content), 88%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5), transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 120px;
}

.site-logo img { width: 270px; height: auto; }

.nav { display: flex; align-items: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  transition: color .25s ease, transform .3s ease;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--gold); transform: scale(var(--shrink)); }
.nav__link[aria-current="page"] { color: var(--gold); }

.flag { width: 16px; height: 11px; flex: none; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.nav-toggle svg { width: 28px; height: 28px; margin: auto; }

/* telefon és tablet: hamburger-menü (az eredeti oldal is 922 px alatt vált) */
@media (max-width: 921px) {
  /* tableten és telefonon (mint az eredetin) a fejléc fekete sáv, ami helyet foglal: nem lebeg a hero fölött */
  .site-header { position: relative; background: #000; }
  .site-header::after { display: none; }
  .site-header__inner { min-height: 81px; }
  .site-logo img { width: 200px; }
  .nav-toggle { display: block; }

  .nav__list {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: #000;
    border-bottom: 1px solid rgba(var(--gold-rgb), .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__list.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 14px 0; font-size: 22px; }
}


/* telefon: alacsonyabb fejléc-sáv (70 px, mint az eredetin) és kisebb logó */
@media (max-width: 767px) {
  .site-header__inner { min-height: 70px; }
  .site-logo img { width: 170px; }
}


/* 4. GOMBOK
   Minden gomb körvonalas, arany keretes; hoverre kisebb lesz és "világít".
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  background: rgba(var(--gold-rgb), .08);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--gold-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .3s ease;
}
.btn:hover, .btn:focus-visible {
  background: rgba(var(--gold-rgb), .16);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), .35);
  transform: scale(var(--shrink));
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

.btn--primary {
  border-width: 2px;
  background: rgba(var(--gold-rgb), .18);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), .22);
  font-size: 40px;
  padding: 9px 18px;
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: rgba(var(--gold-rgb), .28);
  box-shadow: 0 0 22px rgba(var(--gold-rgb), .45);
}

.btn--small { font-size: 15px; padding: 9px 18px; }

/* a gombok mérete az eredeti oldalon: asztali/tablet 20 px (kiemelt 40 px), mobil 16 px (kiemelt 28 px) */
.btn { font-size: 20px; }

@media (max-width: 767px) {
  .btn { font-size: 16px; padding: 5px 16px; min-height: 44px; }
  .btn--primary { font-size: 28px; padding: 5px 16px; }
  .btn--small { font-size: 15px; padding: 5px 18px; }
}


/* 5. HERO
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;            /* a derengés (::before) a tartalom mögé kerül */
  padding: 176px 0 20px;
  background: #000;
}

/* arany derengés a háttérben (az eredeti oldal 6.9 szabálya) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 64% at 74% 44%,
      rgba(var(--gold-rgb), .24) 0%,
      rgba(var(--gold-rgb), .132) 40%,
      rgba(var(--gold-rgb), 0) 78%),
    radial-gradient(72% 84% at 8% 26%,
      rgba(var(--gold-rgb), .096) 0%,
      rgba(var(--gold-rgb), 0) 70%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  column-gap: 0;
  align-items: center;
}

/* Betűméretek, mint az eredeti oldalon: asztali 100/76 px, tablet 65/45 px, mobil 40/30 px.
   (A min(..., vw) csak védelem, hogy a leghosszabb szó keskeny ablakban se lógjon ki.) */
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(100px, 6.9vw);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(var(--gold-rgb), .22);
}

/* a kiemelt rész: dőlt, két "ecsetvonással" fent és lent */
.hero__title em {
  position: relative;
  display: inline-block;
  margin: .18em 0 .1em;
  padding: .06em 0 .1em;
  font-size: min(76px, 5.25vw);
  line-height: 1.2;
  font-style: italic;
  color: var(--gold);
}
/* a két "ecsetvonás" (inline SVG). Az animáció: a vonal balról jobbra
   "megrajzolódik", egy ideig áll, majd elhalványul és újrakezdődik. */
.brush {
  position: absolute;
  left: 0;
  width: 100%;
  height: 14px;
  overflow: visible;
  pointer-events: none;
}
.brush--top { top: 0; }
.brush--bottom { bottom: 0; }
.brush path {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;        /* a path pathLength="1" miatt: 1 = a teljes vonalhossz */
  stroke-dashoffset: 0;
}
.brush--bottom path { stroke-width: 7; }

.brush path { animation: brush-draw 7s ease-in-out infinite both; }
.brush--bottom path { animation-delay: .6s; }

@keyframes brush-draw {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  16%  { stroke-dashoffset: 0; }
  86%  { stroke-dashoffset: 0; opacity: 1; }
  96%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 36px;
}

.hero__side { display: flex; flex-direction: column; align-items: center; gap: 36px; }

/* a portré: lekerekített doboz + arany halo */
.portrait {
  border-radius: 37.5% / 30%;      /* az eredeti "függőleges pirula" maszkja (80x100-as téglalap, 30-as sarok) */
  overflow: hidden;
  filter: none;
}
.portrait-wrap {
  width: 320px;
  max-width: 100%;
  filter: drop-shadow(0 0 16px rgba(var(--gold-rgb), .40))
          drop-shadow(0 0 52px rgba(var(--gold-rgb), .24));
  transition: transform .5s ease;
}
/* hoverre 15%-kal nagyobb és 5 fokkal elfordul (csak egérrel; érintőképernyőn nem ragad be) */
@media (hover: hover) {
  .portrait-wrap:hover { transform: scale(1.15) rotate(5deg); }
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.hero__illustration { width: 300px; max-width: none; }

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.social__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  transition: transform .3s ease;
}
.social__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--gold);
  color: #fff;                 /* az embléma fehér az arany négyzeten, mint az eredetin */
  transition: box-shadow .25s ease;
}
.social__icon svg { width: 22px; height: 22px; fill: currentColor; }
/* hoverre az ikon és a felirat együtt zsugorodik, az ikon "világít" */
.social__link:hover, .social__link:focus-visible { transform: scale(var(--shrink)); }
.social__link:hover .social__icon, .social__link:focus-visible .social__icon { box-shadow: 0 0 16px rgba(var(--gold-rgb), .5); }

/* kisebb laptop és tablet: két oszlop marad (64% / 36%), a portré az oszlop 80%-a */
@media (max-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); }
  .portrait-wrap { width: 80%; }
  .hero__illustration { align-self: flex-end; }
}

@media (max-width: 1024px) {
  .hero { padding-top: 157px; }
  .hero__title { font-size: 65px; }
  .hero__title em { font-size: 45px; padding: 10px 0 11px; margin: 8px 0 4px; }
  .social { justify-content: space-between; gap: 18px 20px; }
  .social__link { font-size: 20px; gap: 14px; }
}

/* telefon: egy oszlop – főcím, gombok, portré, ikonkollázs, közösségi hivatkozások */
@media (max-width: 767px) {
  .hero { padding-top: 98px; }
  .hero > .container { width: min(var(--content), 100% - 30px); }
  .hero__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .hero__title { font-size: min(40px, calc((100vw - 30px) / 9)); }
  .hero__title em { font-size: min(30px, calc((100vw - 34px) / 11.6)); padding: 9px 0 10px; margin: 6px 0 3px; }
  .hero__actions { gap: 10px; margin-top: 26px; }
  .hero__side { gap: 24px; }
  .portrait-wrap { width: min(272px, 70vw); }
  .hero__illustration { align-self: center; width: 300px; max-width: 100%; }
  .social {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
    margin-top: 28px;
  }
  .social__link { font-size: 18px; gap: 10px; }
}


/* 6. KULCSSZÁMOK SÁV
   ------------------------------------------------------------------------ */
.panel {
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--frame-border);
  border-radius: 22px;
  box-shadow: var(--frame-glow);
}

.stats { margin-top: 56px; padding: 34px 40px 30px; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(var(--gold-rgb), .22);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 12px;
  text-align: center;
}
.stat + .stat { border-left: 1px solid rgba(var(--gold-rgb), .22); }

.stat__num {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1;
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(240, 200, 122, .25);
  white-space: nowrap;
}
.stat__label {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
}
.stats__areas { font-size: 16px; line-height: 1.5; color: var(--gold); }
.stats__creds { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1024px) {
  .stats { padding: 28px 24px 26px; }
  .stat__num { font-size: 36px; }
  .stat--wide .stat__num { font-size: 26px; line-height: 36px; }
  .stat__label { font-size: 12px; letter-spacing: .06em; }
  .stats__foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(var(--gold-rgb), .22); }
  .stat__num { font-size: 34px; }
  .stat--wide .stat__num { font-size: 24px; line-height: 34px; }
  .stat__label { font-size: 11px; }
  .stats__areas { font-size: 15px; }
}


/* 7. SZEKCIÓK ÉS SZELLEMSZÁMOK
   ------------------------------------------------------------------------ */
.section {
  position: relative;
  padding: 100px 0 90px;
}

/* hajszálvonal a szekció tetején (az eredeti oldal "gh-sep" osztálya) */
.section--sep::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(var(--content), 88%);
  height: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5), transparent);
}

.split {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 0;
}

.section-head { position: relative; isolation: isolate; align-self: start; padding-top: 14px; }

/* a nagy, körvonalas háttérszám */
.section-head::before {
  content: attr(data-n);
  position: absolute;
  left: -10px; top: -24px;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(90px, 12vw, 190px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--gold-rgb), .30);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.section-head__num {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 255, 255, .35);
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .4);
}

.split__main { padding-top: 40px; }

.prose p + p { margin-top: 28px; }
.prose p { color: #fff; font-size: 18px; }
.prose .prose__note { font-size: 16px; line-height: 1.9; }
.section-intro { padding-top: 30px; font-size: 18px; }
.prose a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.rule {
  height: 1px;
  margin: 28px 0 24px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .35), transparent);
}

/* tablet: a bal oszlop a képernyő ~25%-a (768 px-en 192, 1024 px-en 256 px), mint az eredetin */
@media (max-width: 1024px) {
  .split { grid-template-columns: clamp(170px, 25vw, 260px) minmax(0, 1fr); }
  .section-head__title { font-size: 32px; }
  .section-intro { padding-top: 6px; }
}

@media (max-width: 767px) {
  .section { padding: 72px 0 64px; }
  .split { grid-template-columns: 1fr; row-gap: 28px; }
  .split__main, .section-intro { padding-top: 0; }
  .section-head::before {
    font-size: 76px;
    top: -16px;
    -webkit-text-stroke-width: 1px;
  }
  .section-head__num { font-size: 28px; }
  .section-head__title { font-size: 30px; }
  .prose p { font-size: 20px; }
  .prose .prose__note { font-size: 18px; }
  .section-intro { font-size: 18px; }
}


/* 8. GALÉRIA-SÁV ÉS TANÚSÍTVÁNY-KÁRTYÁK
   ------------------------------------------------------------------------ */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 40px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--frame-border);
  box-shadow: var(--frame-glow);
  background: #000;
}
.strip__item {
  position: relative;
  display: block;
  padding: 0; border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.strip__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: scale(1.16);                       /* nyugalmi állapotban kicsit nagyított (mint az eredeti galéria) */
  transition: transform .8s ease;
}
/* hoverre (és fókuszra) a kép kiszoomol az eredeti méretre, a fekete réteg és a felirat előjön */
.strip__item:focus-visible img { transform: scale(1); }
@media (hover: hover) {
  .strip__item:hover img { transform: scale(1); }
}

/* hoverre (és billentyűzetes fókuszra) a kép elsötétül, és kiírja a feliratát –
   az eredeti oldal galériájának 50%-os fekete rétege, középen fehér szöveggel */
.strip__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.strip__item:focus-visible .strip__overlay { opacity: 1; }
@media (hover: hover) {
  .strip__item:hover .strip__overlay { opacity: 1; }
}

.more { margin-top: 24px; }

/* a galéria: asztalon 4 egymás mellett, keskenyebb tableten 2×2, telefonon egymás alatt */
@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .strip { grid-template-columns: 1fr; }
}

/* a "Tanúsítványok" fejléc: szám, cím és érem egy sorban */
.cert-head {
  position: relative;
  display: grid;
  grid-template-columns: 300px 640px auto;
  align-items: start;
}
.cert-head .section-head__title { padding-top: 6px; }
.cert-head__medal { width: 72px; height: auto; }

.cert-intro { margin-top: 48px; color: #fff; }
.cert-intro a { color: var(--muted); text-decoration: none; }
.cert-intro a:hover { color: var(--gold); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 48px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 14px;
  background: #0A0A0A;
  border: 1px solid rgba(var(--gold-rgb), .30);
  border-radius: 10px;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover, .card:focus-within {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 16px 36px rgba(0, 0, 0, .6);
}
.card__img { overflow: hidden; border-radius: 6px; }
.card__img img {
  width: 100%;
  filter: brightness(.82) saturate(.85);
  transition: filter .4s ease, transform .4s ease;
}
.card:hover .card__img img, .card:focus-within .card__img img { filter: none; transform: scale(1.04); }
.card__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--gold);
}

@media (max-width: 1024px) {
  .cert-head { grid-template-columns: clamp(170px, 25vw, 260px) minmax(0, 1fr) 120px; }
  .cert-head__medal { margin-left: 12px; width: 60px; }
  .card-grid { gap: 50px 24px; }
}

@media (max-width: 767px) {
  .cert-head { grid-template-columns: 1fr auto; row-gap: 16px; }
  .cert-head .section-head { grid-column: 1 / -1; }
  .cert-head__medal { margin-left: 0; width: 48px; grid-row: 2; grid-column: 2; }
  .cert-head .section-head__title { grid-row: 2; grid-column: 1; padding-top: 0; }
  .cert-intro { margin-top: 28px; }
  .card-grid { grid-template-columns: 1fr; gap: 50px; }
  .card__title { font-size: 20px; }
}


/* 9. KARUSSZEL (vízszintesen görgethető, ujjal is húzható)
   ------------------------------------------------------------------------ */
.carousel {
  --gap: 40px;                 /* kártyák közti hézag */
  --pad: 40px;                 /* a sáv belső széle */
  position: relative;
  margin-top: 56px;
  padding: 20px 0;
}
.carousel__track {
  position: relative;
  display: flex;
  gap: var(--gap);
  padding: 0 var(--pad);
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--pad);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);   /* 3 kártya + 2 térköz pontosan kitölti a sávot */
  scroll-snap-align: start;
}
.carousel__slide a { display: block; }
.carousel__slide img {
  width: 100%;
  aspect-ratio: 325 / 230;
  object-fit: cover;
  background: #fff;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: rgba(0, 0, 0, .75);
  color: var(--gold-soft);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, opacity .2s ease;
}
.carousel__btn:hover { background: rgba(var(--gold-rgb), .25); }
.carousel__btn[disabled] { opacity: .3; cursor: default; }
.carousel__btn svg { width: 22px; height: 22px; fill: currentColor; }
.carousel__btn--prev { left: -22px; }
.carousel__btn--next { right: -22px; }

.center { display: flex; justify-content: center; margin-top: 40px; }

/* tableten 2, telefonon 1 kártya látszik egyszerre (az eredeti oldalon is), 10 px hézaggal */
@media (max-width: 1024px) {
  .carousel { --gap: 10px; --pad: 20px; }
  .carousel__slide { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 767px) {
  .carousel__slide { flex-basis: 100%; }
  .carousel__btn--prev { left: -8px; }
  .carousel__btn--next { right: -8px; }
}


/* 10. VIDEÓ
   ------------------------------------------------------------------------ */
.video-frame {
  width: min(880px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--frame-border);
  border-radius: 22px;
  box-shadow: var(--frame-glow);
  background: #000;
}
.video-frame video { width: 100%; aspect-ratio: 880 / 377; object-fit: cover; }
.section--video { padding-top: 0; }

/* telefonon a videó az egész képernyőszélességet kitölti, mint az eredeti oldalon */
@media (max-width: 767px) {
  .container--bleed { width: 100%; }
  .container--bleed .video-frame { border-radius: 0; border-inline: 0; box-shadow: none; }
}


/* 11. CIKKKÁRTYÁK ÉS KAPCSOLAT-KÁRTYA
   ------------------------------------------------------------------------ */
.post-list { display: grid; gap: 36px; margin: 32px 0 0; padding: 0; list-style: none; }

.post-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--frame-border);
  border-radius: 22px;
  box-shadow: var(--frame-glow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover, .post-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 0 32px rgba(var(--gold-rgb), .40);
}
.post-card__img { display: block; min-height: 240px; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }

.post-card__body { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 28px 28px; }
.post-card__date {
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.post-card__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
}
.post-card__title a { text-decoration: none; }
.post-card__excerpt { margin-bottom: 14px; font-size: 15px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1024px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card__img { min-height: 0; aspect-ratio: 2.4 / 1; }
}
@media (max-width: 767px) {
  .post-card__body { padding: 20px; }
  .post-card__title { font-size: 19px; }
}

/* "Küldj üzenetet" kártya */
.cta { overflow: hidden; text-align: center; }
.cta__img { width: 100%; height: 200px; object-fit: cover; }
.cta__body { padding: 34px 40px 36px; background: #000; }
.cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--gold);
}
.cta__text { max-width: 1020px; margin: 18px auto 20px; font-size: 18px; }

@media (max-width: 767px) {
  .cta__body { padding: 26px 20px; }
  .cta__title { font-size: 22px; }
  .cta__text { font-size: 16px; }
}


/* 12. LÁBLÉC, LEBEGŐ ELEMEK, LIGHTBOX
   ------------------------------------------------------------------------ */
/* Asztali nézet (922 px fölött): az eredeti oldal láblécének mért értékei —
   három oszlop 1 : 2 : 1 arányban (az oszlopköz 10 / 60 / 200 px a szélességtől függően),
   a logó balra, a menü középen (15 px, az utolsó elem — a nyelvváltó — sorba törik), a közösségi ikonok balra zárva. */
.site-footer {
  background: var(--gold);
  color: var(--ink-dark);
  border-top: 1px solid #F0E6C5;
}
.site-footer__row.container {
  width: min(1200px, 100% - 80px);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 45px 0;
}
@media (min-width: 1024px) { .site-footer__row.container { column-gap: 60px; } }
@media (min-width: 1300px) { .site-footer__row.container { column-gap: 200px; } }
.site-footer__logo { width: 64px; height: 64px; border-radius: 50%; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0; padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 26.4px;
}
.footer-nav a {
  display: flex;
  padding: 0 5px 0 12px;
  color: #000;
  text-decoration: none;
  transition: color .2s linear;
}
.footer-nav a:hover, .footer-nav a[aria-current="page"] {
  color: var(--ink-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.footer-nav .flag { align-self: center; margin-right: .3em; }

.footer-social {
  display: flex;
  justify-content: flex-start;
  gap: 11px;
  margin: 0; padding: 0;
  list-style: none;
}
.footer-social a { display: block; border-radius: 50%; color: var(--ink-dark); }
.footer-social a:hover { outline: 2px solid var(--ink-dark); outline-offset: 3px; }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }

.site-footer__copy.container {
  width: auto;
  margin: 0;
  min-height: 51px;
  padding: 10px 40px;
  border-top: 1px solid #F0E6C5;
  text-align: center;
  font-size: 16px;
  line-height: 26.4px;
}
.site-footer__copy a {
  color: var(--ink-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .2s linear;
}
.site-footer__copy a:hover { text-decoration-thickness: 2px; }

/* a lábléc belső gyűrűje is sötét (arany háttéren) */
.site-footer :is(a, button):focus-visible { outline-color: var(--ink-dark); }

/* tablet álló helyzet és telefon (921 px alatt): a lábléc egy oszlopba rendeződik, az érintési felületek legalább 44 px-esek */
@media (max-width: 921px) {
  .site-footer__row.container { width: min(var(--content), 100% - 2 * var(--gutter)); grid-template-columns: 1fr; justify-items: center; gap: 20px; padding: 32px 0 24px; }
  .footer-nav { gap: 0 12px; line-height: 1.7; }
  .footer-nav a { align-items: center; min-height: 44px; padding: 0 6px; }
  .footer-nav .flag { margin-right: 6px; }
  .footer-social { justify-content: center; gap: 4px; }
  .footer-social a { padding: 13px; }
  .footer-social svg { width: 18px; height: 18px; }
  .site-footer__copy.container { min-height: 0; padding: 14px var(--gutter) 18px; font-size: 16px; line-height: 1.5; }
}

/* lebegő WhatsApp-gomb, bal alul */
.wa-float {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 150;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #128C7E;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }

/* lightbox (a galéria képeinek nagyítása) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .96);
}
.lightbox.is-open { display: flex; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox img {
  max-height: 82vh;
  margin: 0 auto;
  border: 1px solid var(--frame-border);
  border-radius: 10px;
  box-shadow: var(--frame-glow);
}
.lightbox figcaption { margin-top: 12px; font-family: var(--font-display); color: var(--gold-soft); }
.lightbox__count { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 14px; color: var(--muted); }

/* lapozó nyilak a nagyított képeknél */
.lightbox__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: var(--gold-soft);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease;
}
.lightbox__nav:hover { background: rgba(var(--gold-rgb), .25); }
.lightbox__nav svg { width: 26px; height: 26px; fill: currentColor; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

/* kép-csere: balról/jobbról csúszik be, a lapozás irányától függően */
.lightbox img.slide-next { animation: lb-slide-next .35s ease both; }
.lightbox img.slide-prev { animation: lb-slide-prev .35s ease both; }
@keyframes lb-slide-next { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes lb-slide-prev { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .lightbox { padding: 12px; }
  .lightbox__nav { top: auto; bottom: 20px; transform: none; width: 48px; height: 48px; }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
  .lightbox img { max-height: 70vh; }
}
.lightbox__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 48px; height: 48px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: var(--gold-soft);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .card__img img, .post-card, .strip__item img, .wa-float, .social__link, .nav__link, .portrait-wrap { transition: none !important; }
  .btn:hover, .card:hover, .post-card:hover, .wa-float:hover, .social__link:hover, .nav__link:hover, .portrait-wrap:hover { transform: none; }
  .brush path { animation: none !important; }
  .js-ready .fade-up { opacity: 1; }
  .js-ready .fade-up.is-visible { animation: none; }
  .strip__item img, .travel__img img { transition: none; }
  .strip__item:hover img { transform: none; }
  .travel__img:hover img { transform: none; }
  .lightbox img.slide-next, .lightbox img.slide-prev { animation: none; }
  .strip__overlay { transition: none; }
}


/* ==========================================================================
   13. PORTFÓLIÓ OLDAL
   Méretek az eredeti oldalról mérve (asztali / tablet / mobil).
   ========================================================================== */

/* oldalcím és gombok --------------------------------------------------- */
.pf-hero { position: relative; padding: 191px 0 20px; }

.pf-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 110px;
  line-height: 152px;
  color: #fff;
}

.pf-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.btn--lg { font-size: 22px; padding: 8px 16px; }

.pf-intro {
  margin-top: 66px;
  padding-inline: 10px;
  font-size: 19px;
  line-height: 1.7;
}
.pf-intro p + p { margin-top: 19px; }
.pf-intro a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* a két fotó egymás mellett, keretben ------------------------------------ */
.pf-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  padding-inline: 30px;
}
.frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--frame-border);
  border-radius: 22px;
  box-shadow: var(--frame-glow);
}
.frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* szekciók: bal oldalt a szám, jobb oldalt a cím és a tartalom ------------- */
.pf-section { padding: 60px 0 70px; }
.pf-section--first { padding-top: 100px; }
.split--pf { grid-template-columns: clamp(170px, 25.5vw, 325px) minmax(0, 1fr); }
.split--pf .section-head { padding-left: 50px; padding-top: 6px; }
.split--pf > div:last-child { padding-right: 40px; }      /* az eredeti oldal tartalma jobb oldalt keskenyebb */

.pf-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 52px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .4);
}

/* szakmai idővonal (az eredeti oldal 6.5 szabálya) -------------------------- */
.timeline {
  --gutter: 34px;
  --rail: 7px;
  position: relative;
  margin-top: 20px;
  margin-right: 10px;
  padding-left: var(--gutter);
}
.timeline::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 10px;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, rgba(var(--gold-rgb), .55) 24px,
              rgba(var(--gold-rgb), .55) calc(100% - 90px), transparent 100%);
}
.tl-item { position: relative; }
.tl-item::before {                                  /* az állomás karikája */
  content: "";
  position: absolute;
  left: calc(var(--rail) - var(--gutter));
  top: 8px;
  box-sizing: border-box;
  width: 9px; height: 9px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 5px #000;                       /* kivágja a vonalat a karika körül */
  transform: translateX(-50%);
}
.tl-item + .tl-item { margin-top: 54px; }
.tl-item + .tl-item::after {                        /* hajszálvonal az elemek között */
  content: "";
  position: absolute;
  top: -27px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5), transparent);
}

.tl-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
}
.tl-title { flex: 1 1 0; min-width: 12ch; font-size: 22px; font-weight: 600; line-height: 26.4px; color: #fff; }
.tl-date {
  font-size: 19px;
  line-height: 26.4px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, .35);
  white-space: nowrap;
}
.tl-company { margin-top: 10px; font-size: 19px; line-height: 1.7; color: #8D8D8D; }
.tl-list { margin: 6px 0 0; padding: 0; list-style: none; }
.tl-list li { margin-top: 19px; font-size: 19px; line-height: 1.7; }
.tl-list li::before { content: "• "; }
.tl-note { margin-top: 10px; font-size: 19px; line-height: 1.7; }
.tl-note a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* készségek, eszközök, gyártói logók ---------------------------------------- */
.skills {
  display: grid;
  grid-template-columns: 259px 259px;
  margin-top: 20px;
}
.skill-list {
  margin: 0; padding: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 26.4px;
  list-style: none;
}
.skill-list li { position: relative; padding: 3.3px 0 3.3px 25px; margin-bottom: 6.6px; }
.skill-list li::before {                            /* nagyobb, fehér pötty */
  content: "";
  position: absolute; left: 3px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  margin-top: 49px;
}
.tool { position: relative; display: block; width: 58px; height: 58px; }
.tool img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }

/* hoverre az eszközikon kétszeresére nő (mint az eredeti oldalon) */
@media (hover: hover) {
  .tool:hover { z-index: 6; }
  .tool:hover img { transform: scale(2); }
}
.tool:focus-visible { z-index: 6; }
.tool:focus-visible img { transform: scale(2); }

/* az eszköz nevét mutató buborék hoverre és fókuszra (az eredeti oldal "data-tip" szabálya) */
.tool::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  padding: 6px 12px; border-radius: 6px;
  background: var(--gold); color: #000;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s; z-index: 5;
}
.tool::before {
  content: "";
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translate(-50%, 6px);
  border: 6px solid transparent;
  border-top-color: var(--gold); border-bottom: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s; z-index: 5; pointer-events: none;
}
.tool:hover::after, .tool:hover::before,
.tool:focus-visible::after, .tool:focus-visible::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 41px 0 0;
  padding: 0;
  list-style: none;
}
.logos li { position: relative; display: grid; place-items: center; height: 157px; }
.logos img {
  width: min(150px, 78%); max-height: 78%; height: auto;
  transition: transform .3s ease, filter .3s ease;
}

.logos img[alt="DSC"] { width: min(117px, 61%); }       /* az eredetin a DSC logó kisebb, mint a többi */

/* hoverre a gyártói logó 1,7-szeresére nő, enyhe árnyékkal (mint az eredeti oldalon) */
@media (hover: hover) {
  .logos li:hover { z-index: 2; }
  .logos li:hover img { transform: scale(1.7); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
}

/* képesítések -------------------------------------------------------------- */
.quals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.qual {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(var(--gold-rgb), .35);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
}
.qual__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px; height: 52px;
  border: 1.5px solid rgba(var(--gold-rgb), .55);
  border-radius: 50%;
  background: rgba(var(--gold-rgb), .08);
  color: var(--gold);
}
.qual__icon svg { width: 22px; height: 22px; fill: currentColor; }
.qual__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.3; color: var(--gold-soft); }
.qual__text { font-size: 16px; line-height: 1.6; color: #E6E0D3; }

.pf-more { margin-top: 60px; }
.pf-more .btn { font-size: 26px; }
.btn__medal { width: .75em; height: auto; flex: none; }

.pf-cta { padding: 25px 0 100px; }

/* tablet ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pf-hero { padding-top: 163px; }
  .pf-title { font-size: 80px; line-height: 86px; }
  .pf-actions { margin-top: 17px; }
  .pf-intro { margin-top: 22px; }
  .split--pf .section-head { padding-left: 42px; }
  .split--pf > div:last-child { padding-right: 32px; }
  .timeline { margin-right: 10px; }
  .logos li { height: 97px; }
  .quals { grid-template-columns: 1fr; gap: 16px; }
  .qual { flex-direction: row; align-items: flex-start; gap: 18px; padding: 20px 22px; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .pf-h2 { font-size: 36px; line-height: 46.8px; }
  .skills { grid-template-columns: 247px 247px; }
  .skill-list { font-size: 14.6px; line-height: 24px; }
}

/* telefon ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .pf-hero { padding-top: 95px; }
  .pf-title { font-size: min(45px, 11vw); line-height: 54px; }
  .pf-actions { margin-top: 5px; gap: 10px; }
  .btn--lg { font-size: 16px; padding: 6px 16px; }
  .pf-intro { margin-top: 48px; padding-inline: 0; font-size: 20px; line-height: 34px; }
  .pf-photos { grid-template-columns: 1fr; gap: 21px; padding-inline: 20px; }

  .pf-section { padding: 60px 0 50px; }
  .pf-section--first { padding-top: 70px; }
  .split--pf { grid-template-columns: 1fr; row-gap: 12px; }
  .split--pf .section-head { padding-left: 0; }
  .split--pf > div:last-child { padding-right: 0; }
  .timeline { margin-right: 0; }
  .pf-h2 { font-size: 30px; line-height: 39px; }

  .tl-head { flex-direction: column; gap: 4px; }
  .tl-head--inline { flex-direction: row; justify-content: space-between; }
  .tl-title { font-size: 20px; line-height: 24px; }
  .tl-date { font-size: 20px; line-height: 24px; }
  .tl-company, .tl-list li, .tl-note { font-size: 20px; line-height: 34px; }

  .skills { grid-template-columns: 1fr; }
  .skill-list { font-size: 14.6px; line-height: 24px; }
  .tools { gap: 42px 44px; margin-top: 45px; max-width: 330px; }
  .logos { grid-template-columns: 1fr; gap: 20px; }
  .logos img { width: min(130px, 40%); }
  .qual { padding: 18px 16px; gap: 14px; }
  .qual__icon { width: 44px; height: 44px; }
  .qual__icon svg { width: 18px; height: 18px; }
  .qual__title { font-size: 17px; }
  .qual__text { font-size: 15px; }
  .pf-more { display: flex; justify-content: center; }
  .pf-more .btn { font-size: 22px; }
  .pf-cta { padding: 20px 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .tool::after, .tool::before, .tool img, .logos img { transition: none; }
  .tool:hover img, .tool:focus-visible img, .logos li:hover img { transform: none; }
}


/* ==========================================================================
   14. RÓLAM OLDAL
   Méretek az eredeti oldalról mérve (asztali / tablet / mobil).
   ========================================================================== */

/* oldalcím és portré-panel ------------------------------------------------ */
.ab-hero { padding: 190px 0 0; }

.ab-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 100px;
  line-height: 160px;
  color: #fff;
}

/* a portré egy nagy panelben, "függőleges pirula" alakú maszkkal (arány 4:5) */
.ab-portrait {
  margin: 80px 0 0;
  padding-block: 5%;                         /* a százalék a panel szélességére vonatkozik */
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--frame-border);
  border-radius: 22px;
  box-shadow: var(--frame-glow);
}
.ab-portrait__shape {
  width: 80%;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 37.5% / 30%;
}
.ab-portrait__shape img { width: 100%; height: 100%; object-fit: cover; }

/* üdvözlés ----------------------------------------------------------------- */
.ab-welcome {
  display: grid;
  grid-template-columns: clamp(170px, 23.4vw, 300px) minmax(0, 1fr);
  padding: 80px 0 60px;
}
.ab-welcome__title {
  font-family: var(--font-display);
  font-weight: 700;                          /* az eredetin is vastagabb */
  font-size: 40px;
  line-height: 52px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .4);
}
.ab-welcome__text { margin-bottom: 28px; font-size: 19px; line-height: 1.7; }

/* közös: szekciócímek a Rólam oldalon ------------------------------------- */
.ab-section { padding: 100px 0 90px; }
.ab-section .section-head { padding-left: 10px; }
.ab-section .section-head__num { font-size: 40px; line-height: 40px; }

/* földgömbös, középre igazított mondat (az eredeti oldal "gh-globe" osztálya) */
.globe-text {
  text-align: center;
  font-size: 19px;
  line-height: 1.7;
}
.globe-text::before {
  content: "";
  display: block;
  width: 20px; height: 20px;
  margin: 0 auto 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCA54A' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M4.7 7h14.6M4.7 17h14.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ab-photos .globe-text { margin-top: 22px; }
.ab-photos .globe-text--after { margin-top: 20px; }

/* egyenletes sormagasságú ("justified") galéria ------------------------------
   A kártyák szélessége a képarányukkal arányos, ezért minden sor egyforma magas
   és kitölti a szélességet. A --row az "ideális sormagasság". */
.jg {
  --row: 215px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--frame-border);
  border-radius: 22px;
  box-shadow: var(--frame-glow);
}
.jg li {
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));
  min-width: 0;
}
.jg .strip__item { width: 100%; height: 100%; }
.jg .strip__item img { width: 100%; height: 100%; aspect-ratio: var(--ar); }

/* ha a szkript kiszámolta a sorokat (main.js), az elemek fix méretet kapnak, és balra zárnak */
.jg.is-justified { gap: 3px; }
.jg.is-justified li { flex: none; }
.jg.is-justified .strip__item img { aspect-ratio: auto; }

/* útikártyák ---------------------------------------------------------------- */
.travel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 14px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}
.travel__item { text-align: center; }
.travel__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 450px;
  margin-inline: auto;
  padding: 0; border: 0;
  background: none;
  cursor: zoom-in;
}
/* a kép maga kapja a lekerekítést és a derengést, így a hover-zsugorodásnál együtt mozognak */
.travel__img img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 22px rgba(255, 255, 255, .28);
  transition: transform .3s ease, filter .3s ease;
}
/* hoverre (és fókuszra) a kép kicsit elsötétül, és zsugorodik (shrink, mint a többi hatás az oldalon) */
.travel__img:focus-visible img { transform: scale(var(--shrink)); filter: brightness(.75); }
@media (hover: hover) {
  .travel__img:hover img { transform: scale(var(--shrink)); filter: brightness(.75); }
}
.travel__title {
  margin-top: 23px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, .45);
}
.travel__text {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 26px;
  color: var(--gold);
}
.ab-photos .jg--second { margin-top: 85px; }

/* prioritások --------------------------------------------------------------- */
.ab-prio .container { display: grid; grid-template-columns: clamp(170px, 23.4vw, 300px) minmax(0, 1fr); }
.ab-prio__intro { font-size: 19px; line-height: 1.7; padding-top: 4px; }
.prio-list { margin: 30px 0 0; padding: 0; list-style: none; }
.prio {
  position: relative;
  padding: 24px 0 22px;
}
.prio::before {                                  /* hajszálvonal minden prioritás fölött */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5), transparent);
}
.prio__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 41.6px;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(var(--gold-rgb), .35);
}
.prio__text {
  font-size: 19px;
  line-height: 26.4px;
  text-shadow: 0 0 12px rgba(255, 255, 255, .35);
}

/* idézet --------------------------------------------------------------------- */
.ab-quote-wrap { padding: 130px 0 0; }
.ab-quote {
  display: grid;
  grid-template-columns: 319px minmax(0, 1fr);
  column-gap: 60px;
  margin: 0;
  padding: 0 60px 0 41px;
  background: #000;
  border: 1px solid rgba(240, 225, 200, .6);
  box-shadow: 0 0 22px rgba(255, 235, 200, .28);
}
.ab-quote__img {                                  /* a portré kilóg a doboz tetején */
  width: 100%;
  margin: -38px 0 41px;
  aspect-ratio: 319 / 417;
  object-fit: cover;
}
.ab-quote__body { padding: 54px 0 44px; }
.ab-quote__mark { display: block; width: 26px; height: 24px; margin-bottom: 26px; fill: #fff; }
.ab-quote blockquote { margin: 0; }
.ab-quote p { font-size: 19px; line-height: 26.4px; }
.ab-quote footer { margin-top: 26px; }
.ab-quote__name { font-size: 16px; font-weight: 600; line-height: 24px; color: #8D8D8D; }
.ab-quote__job { font-size: 14px; line-height: 1.2; color: var(--gold); }

.ab-cta { padding: 90px 0 100px; }

/* tablet --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ab-hero { padding-top: 148px; }
  .ab-title { font-size: 80px; line-height: 116px; }
  .ab-welcome__title { font-size: 29px; line-height: 37.7px; }
  .ab-section .section-head__title { font-size: 34px; line-height: 44.2px; }
  .ab-prio .section-head__title { font-size: 34px; }
  .travel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; }
  .travel__item { margin-bottom: 48px; }
  .ab-photos .jg--second { margin-top: 40px; }
  .ab-quote { grid-template-columns: 272px minmax(0, 1fr); column-gap: 40px; padding-right: 40px; }
  .ab-quote__img { margin-top: -30px; margin-bottom: 33px; }
  .ab-quote p { line-height: 24px; }
  .ab-quote__body { padding-top: 40px; }
}
@media (max-width: 1024px) {
  .jg { --row: 190px; }
}
@media (max-width: 900px) {
  .jg { --row: 150px; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .prio__title { font-size: 28px; line-height: 36.4px; }
  .prio__text { line-height: 24px; }
}

/* telefon -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ab-hero { padding-top: 90px; }
  .ab-title { font-size: min(38px, 10vw); line-height: 65px; }
  .ab-portrait { margin-top: 30px; }

  .ab-welcome { grid-template-columns: 1fr; row-gap: 24px; padding: 60px 0 50px; }
  .ab-welcome__text { font-size: 20px; line-height: 34px; }

  .ab-section { padding: 60px 0 60px; }
  .ab-section .section-head { padding-left: 0; }
  .ab-section .section-head__num { font-size: 30px; line-height: 30px; }
  .ab-section .section-head__title { font-size: 30px; line-height: 39px; }
  .globe-text { font-size: 20px; line-height: 34px; }

  .travel { grid-template-columns: 1fr; margin-inline: calc(-1 * var(--gutter)); gap: 0; }
  .travel__item { margin-bottom: 45px; }
  .travel__img { height: auto; }
  .travel__img img { width: min(100%, 390px); height: auto; aspect-ratio: auto; }

  .ab-prio .container { grid-template-columns: 1fr; row-gap: 20px; }
  .ab-prio__intro { font-size: 20px; line-height: 34px; padding-top: 0; }
  .prio__title { font-size: 24px; line-height: 31.2px; }
  .prio__text { font-size: 20px; line-height: 24px; }

  .ab-quote-wrap { padding-top: 70px; }
  .ab-quote { grid-template-columns: 1fr; padding: 0 28px 28px; }
  .ab-quote__img { width: 195px; justify-self: center; margin: -22px 0 24px; }
  .ab-quote__body { padding: 0; }
  .ab-quote p { font-size: 20px; line-height: 32px; }

  .ab-cta { padding: 60px 0 60px; }
}


/* ==========================================================================
   15. KAPCSOLAT OLDAL
   Méretek az eredeti oldalról mérve (asztali / tablet / mobil).
   ========================================================================== */

.ct-hero { padding: 190px 0 0; }
.ct-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 112px;
  line-height: 156.8px;
  color: #fff;
}
.ct-image { margin: 21px 0 0; }
.ct-image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* sorok: bal oldalt a cím, jobb oldalt a tartalom ---------------------------- */
.ct-row {
  display: grid;
  grid-template-columns: clamp(170px, 25vw, 300px) minmax(0, 1fr);
  column-gap: 0;
}
.ct-section { position: relative; padding: 60px 0; }
.ct-section--first { padding: 60px 0 60px; }
.ct-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 52px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .4);
}
.ct-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 41.6px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .4);
}
.ct-text { font-size: 19px; line-height: 1.7; }

/* az e-mail-cím a szöveg alatt (balról kifutó arany aláhúzás hoverre) */
.ct-mail {
  display: inline-block;
  margin-top: 19px;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 25px;
  color: var(--gold);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size .3s ease;
  overflow-wrap: anywhere;
}
.ct-mail:hover, .ct-mail:focus-visible { background-size: 100% 2px; }

/* közösségi ikonok: arany négyzetek, fehér emblémával ----------------------- */
.ct-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0; padding: 0;
  list-style: none;
}
.ct-social a {
  display: grid;
  place-items: center;
  width: 55px; height: 55px;
  border-radius: 10%;
  background: var(--gold);
  color: #fff;
  transition: transform .3s ease, box-shadow .25s ease;
}
.ct-social svg { width: 23px; height: 23px; fill: currentColor; }
.ct-social a:hover, .ct-social a:focus-visible { transform: scale(var(--shrink)); box-shadow: 0 0 16px rgba(var(--gold-rgb), .5); }

/* űrlap ------------------------------------------------------------------------ */
.ct-intro { margin: 0 0 56px; }
.ct-form-row { align-items: start; }
.ct-form-row .ct-h3 { padding-top: 6px; }
.ct-form-wrap { display: flex; justify-content: center; }
.ct-form { width: min(600px, 100%); }

.ct-field { margin: 0 0 24px; }
.ct-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gold);
}
.ct-field .req { color: #F87171; }

.ct-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--gold);
  background: rgba(var(--gold-rgb), .02);
  border: 1px solid rgba(var(--gold-rgb), .55);
  border-radius: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.ct-input { min-height: 118px; resize: vertical; }
.ct-input::placeholder { color: rgba(var(--gold-rgb), .5); }
.ct-input:focus { border-color: rgba(var(--gold-rgb), .65); }       /* a fókuszgyűrűt az oldal közös arany szabálya adja */
/* hibás mező: az eredeti űrlap piros kerete (és a fókusz-gyűrű is pirosra vált) */
.ct-input[aria-invalid="true"] { border-color: rgba(220, 38, 38, .65); }
.ct-input[aria-invalid="true"]:focus { border-color: rgba(220, 38, 38, .65); }

/* a hibaüzenet a mező alatt: 12 px-es, piros (az eredeti oldal mért értékei) */
.ct-error { display: block; min-height: 16px; margin-top: 0; font-size: 12px; line-height: 16px; color: #F87171; }
.ct-error:empty { min-height: 16px; }               /* a hely mindig foglalt, hogy a hiba megjelenésekor ne ugorjon az elrendezés */

.ct-field + .ct-note { margin-top: -14px; }                  /* az utolsó mező hibasávja után szorosabb a tájékoztató */
.ct-note { margin: 0 0 10px; font-size: 14px; line-height: 21px; color: rgba(var(--gold-rgb), .78); }

.ct-submit {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  color: var(--gold-soft);
  background: rgba(var(--gold-rgb), .08);
  border: 1px solid var(--gold);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .3s ease;
}
.ct-submit:hover, .ct-submit:focus-visible {
  background: rgba(var(--gold-rgb), .16);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), .35);
  transform: scale(var(--shrink));
}
.ct-submit[disabled] { opacity: .6; cursor: progress; transform: none; }

/* a méz-csapda mező: emberek nem látják, a robotok kitöltik */
.ct-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* az űrlap alatti visszajelzés (siker / hiba) */
.ct-status {
  margin-top: 22px;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid rgba(var(--gold-rgb), .55);
  border-radius: 10px;
  background: rgba(var(--gold-rgb), .08);
  color: var(--gold-soft);
}
.ct-status:empty { display: none; }
.ct-status[data-state="error"], .ct-status[data-state="invalid"], .ct-status[data-state="rate"] {
  border-color: #F87171;
  background: rgba(248, 113, 113, .08);
  color: #FCA5A5;
}

.ct-cta-space { padding-bottom: 100px; }

/* tablet ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .ct-hero { padding-top: 150px; }
  .ct-title { font-size: 80px; line-height: 112px; }
  .ct-image { margin-top: 31px; }
  .ct-h2 { font-size: 26px; line-height: 33.8px; }
  .ct-h3 { font-size: 26px; line-height: 33.8px; }
  .ct-section { padding: 50px 0; }
  .ct-mail { display: block; text-align: center; font-size: 30px; line-height: 30px; margin-top: 21px; }
  .ct-social { flex-wrap: wrap; justify-content: flex-start; gap: 30px 85px; }
  .ct-intro { margin-bottom: 48px; }
  .ct-form-row { display: block; }
  .ct-form-row .ct-h3 { font-size: 32px; line-height: 41.6px; margin-bottom: 20px; }
  .ct-form-wrap { justify-content: center; }
  .ct-form { width: min(661px, 100%); }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .ct-form-row .ct-h3 { font-size: 28px; line-height: 36.4px; }
  .ct-form { width: min(405px, 100%); }
}

/* telefon ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ct-hero { padding-top: 90px; }
  .ct-title { font-size: min(38px, 10vw); line-height: 53.2px; }
  .ct-image { margin-top: 21px; }
  .ct-row { grid-template-columns: 1fr; row-gap: 14px; }
  .ct-section { padding: 40px 0; }
  .ct-h2 { font-size: 26px; line-height: 33.8px; }
  .ct-h3 { font-size: 26px; line-height: 33.8px; }
  .ct-text { font-size: 19px; line-height: 32.3px; }
  .ct-mail { font-size: 19px; line-height: 19px; margin-top: 19px; }
  .ct-social { justify-content: center; gap: 19px 20px; }
  .ct-social a { width: 40px; height: 40px; }
  .ct-social svg { width: 18px; height: 18px; }
  .ct-intro { margin-bottom: 40px; }
  .ct-form-row .ct-h3 { font-size: 24px; line-height: 31.2px; margin-bottom: 6px; }
  .ct-form { width: 100%; }
  .ct-cta-space { padding-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-social a, .ct-submit, .ct-mail { transition: none; }
  .ct-social a:hover, .ct-submit:hover { transform: none; }
}


/* ==========================================================================
   16. CIKK OLDAL  (blog/*.html és hu/blog/*.html)
   Az eredeti oldal bejegyzés-sablonja: krém háttér, fehér cikkoszlop + fehér oldalsáv-dobozok.
   Mért értékek (1440 / 1024 / 768 / 390 px) az eredeti oldalról:
     - 922 px fölött: cikk 70 %, oldalsáv 30 %, egymás mellett; alatta egymás alatt.
     - A betűméret 921 px alatt 91,2 %-ra csökken (14,592 px), ezért a méretek em-ben vannak megadva.
     - A cikk belső margója: 5,34em 6,67em  >  (1200 px alatt) 3,34em 2,4em  >  (921 alatt) 1,5em 2,14em  >  (544 alatt) 1,5em 1em.
   A cím és az alcímek EB Garamond betűvel készülnek (a cikkoldalak <head>-jében külön töltődik be).
   ========================================================================== */
body.page-post {
  background: #FAF5E5;
  color: #4A4A4A;
  font-size: 16px;
  line-height: 1.7;
}
@media (max-width: 921px) { body.page-post { font-size: 14.592px; } }

/* fejléc: ezen az oldalon (mint az eredetin) tömör, majdnem fekete sáv, alatta arany hajszálvonal */
body.page-post .site-header {
  background: #0B0B0B;
  border-bottom: 1px solid rgba(var(--gold-rgb), .35);
}
body.page-post .site-header::after { display: none; }
body.page-post .site-header__inner { min-height: 88px; }
@media (max-width: 921px) { body.page-post .site-header__inner { min-height: 81px; } }
@media (max-width: 767px) { body.page-post .site-header__inner { min-height: 70px; } }

/* kétoszlopos elrendezés ---------------------------------------------------------- */
.post-layout {
  display: flex;
  width: min(1240px, 100%);
  margin-inline: auto;
  padding: 0 20px;
}
.post-primary {
  flex: 0 0 70%;
  max-width: 70%;
  min-width: 0;
  margin: 4em 0;                  /* a fejléc fölé lóg: az eredetin is a fejléc alá csúszik a cikk teteje */
}
.post-sidebar {
  flex: 0 0 30%;
  max-width: 30%;
  min-width: 0;
  padding-left: 30px;
  margin: 4em 0 2.5em;
}
@media (max-width: 921px) {
  .post-layout { display: block; }
  .post-primary { max-width: none; margin: 0; }
  .post-sidebar { max-width: none; padding-left: 0; margin: 4em 0 2.5em; }
}
@media (max-width: 544px) {
  .post-layout { padding: 0 .54em; }
}

/* cikk (fehér lap) ------------------------------------------------------------------- */
.post {
  padding: 5.34em 6.67em;
  background: #fff;
}
@media (max-width: 1200px) { .post { padding: 3.34em 2.4em; } }
@media (max-width: 921px)  { .post { padding: 1.5em 2.14em; } }
@media (max-width: 544px)  { .post { padding: 1.5em 1em; } }

.post__thumb { margin: 0 0 2em; }
.post__thumb img { display: block; width: 100%; height: auto; }

.post__title {
  margin: 0 0 10px;
  font: 400 36px/1.2 "EB Garamond", Georgia, serif;
  color: #0f172a;
}
@media (max-width: 921px) { .post__title { font-size: 2em; } }
@media (max-width: 544px) { .post__title { font-size: 1.75em; } }

.post__meta {
  margin: 0;
  font-size: 1em;
  line-height: 1.45;
  color: #D09A40;
}
.post__meta a, .post__content a { color: #D09A40; text-decoration: none; transition: color .2s ease; }
.post__meta a:hover, .post__content a:hover,
.post__meta a:focus-visible, .post__content a:focus-visible { color: #0f172a; }

/* a cikk szövege */
.post__content { padding: 10px; }
.post__content > p { margin: 0 0 1em; }
.post__content > h2 {
  margin: 1.6em 0 .5em;
  font: 600 26px/1.25 "EB Garamond", Georgia, serif;
  color: #0f172a;
}
@media (max-width: 1024px) { .post__content > h2 { font-size: 24px; } }
@media (max-width: 767px)  { .post__content > h2 { font-size: 22px; } }
.post__content > ul, .post__content > ol { margin: 0 0 1.5em 3em; padding: 0; }
.post__content strong { font-weight: 700; }

/* szerzői doboz a cikk végén */
.author {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: calc(60px + 1em) 0 8px;          /* 60 px + az utolsó bekezdés alsó margója (1em), mint az eredetin */
  padding: 22px 24px;
  background: #FAF5E5;
  border: 1px solid rgba(208, 154, 64, .5);
  border-radius: 14px;
}
.author__img {
  flex: 0 0 96px;
  width: 96px; height: 96px;
  border: 2px solid #D09A40;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}
.author__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.author__name {
  margin: 0 0 2px;
  font: 400 26px/1.2 "EB Garamond", Georgia, serif;
  color: #0f172a;
}
.author__role {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a5a1c;
}
.author__bio { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: #3a3a3a; }
.post__content .author__btn {
  align-self: flex-start;
  padding: 10px 18px;
  background: #0a0a0a;
  color: #F0C87A;
  border: 1px solid #D09A40;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  transition: color .28s ease, border-color .28s ease;
}
.post__content .author__btn:hover, .post__content .author__btn:focus-visible { color: #F0C87A; border-color: #F0C87A; }
@media (max-width: 520px) {
  .author { flex-direction: column; padding: 20px 18px; }
}

/* előző / következő cikk */
.post-nav { padding-top: 2em; }
.post-nav__links { display: flex; }
.post-nav__prev, .post-nav__next { flex: 0 0 50%; max-width: 50%; }
.post-nav__next { margin-left: auto; text-align: right; }
.post-nav a {
  display: block;
  padding-bottom: .4167em;
  line-height: 2.1458;
  color: #D09A40;
  text-decoration: none;
}
@media (max-width: 921px) {
  .post-nav { padding-top: 1.5em; }
  .post-nav a { padding-bottom: .4838em; line-height: 2.1277; }
}
@media (max-width: 544px) {
  .post-nav__links { display: block; }
  .post-nav__prev, .post-nav__next { max-width: none; text-align: left; }
  .post-nav__prev { margin-bottom: 1em; }
}

/* oldalsáv ------------------------------------------------------------------------------ */
.widget { margin: 0 0 2em; padding: 2em; background: #fff; }
.widget:last-child { margin-bottom: 0; }
@media (max-width: 921px) { .widget:last-child { margin-bottom: 2em; } }
@media (max-width: 544px) { .widget { margin-bottom: 1.5em; padding: 2em 1em; } .widget:last-child { margin-bottom: 1.5em; } }

.widget__title {
  margin: 0;
  font: 600 1.375em/1.3 "EB Garamond", Georgia, serif;
  color: #0f172a;
}
.widget__list { margin: 0; padding: 0; list-style: none; }
.widget__list > li { margin: 0 0 .25em; line-height: 2; }
.widget__list a { color: #0f172a; text-decoration: none; }
.widget__list time { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #8A8278; }
.widget__list--cats a { color: #D09A40; transition: color .2s ease; }
.widget__list--cats a:hover, .widget__list--cats a:focus-visible { color: #0f172a; }


/* ==========================================================================
   17. KATEGÓRIA-OLDAL  (category/*.html és hu/kategoria/*.html)
   Az eredeti oldal kategória-archívuma: oldalsáv nélkül, fehér leíró-doboz a cím alatt, alatta
   kártyák egymás alatt (nagy kép, cím, "kategória / szerző", kivonat, "Read More »").
   A fejléc itt (az egyes cikkekkel ellentétben) helyet foglal, nem lóg rá a tartalomra.
   ========================================================================== */
body.page-archive .site-header { position: relative; }

.arch {
  width: min(1240px, 100%);
  margin: 4em auto;
  padding: 0 20px;
}
@media (max-width: 921px) { .arch { margin: 0 auto; padding: 4em 20px; } }
@media (max-width: 544px) { .arch { padding: 4em .54em; } }

.arch__head { padding: 3em; background: #fff; }
.arch__title {
  margin: 0 0 10px;
  font: 400 2.5em/1.4 "EB Garamond", Georgia, serif;
  color: #0f172a;
}
.arch__title:only-child { margin-bottom: .1em; }
.arch__text { margin: 0; font-size: 1.4286em; font-weight: 300; line-height: 1.65; color: #4A4A4A; }

.arch-card {
  padding: 5.34em 6.67em;
  background: #fff;
  border-bottom: 1px solid #ddd;
}
@media (max-width: 1200px) { .arch-card { padding: 3.34em 2.4em; } }
@media (max-width: 921px)  { .arch-card { padding: 1.5em 2.14em; } }
@media (max-width: 544px)  { .arch-card { padding: 1.5em 1em; } }

.arch-card__img { display: block; margin: 0 0 1.5em; }
.arch-card__img img { display: block; width: 100%; height: auto; }
.arch-card__title {
  margin: 0 0 .2em;
  font: 400 1.625em/1.3 "EB Garamond", Georgia, serif;
  color: #0f172a;
}
.arch-card__title a { color: inherit; text-decoration: none; }
.arch-card__meta { margin: 0 0 1.2em; line-height: 1.45; color: #D09A40; }
@media (max-width: 921px) { .arch-card__meta { margin-bottom: 1em; } }
.arch-card__meta a, .arch-card__more { color: #D09A40; text-decoration: none; transition: color .2s ease; }
.arch-card__meta a:hover, .arch-card__more:hover,
.arch-card__meta a:focus-visible, .arch-card__more:focus-visible { color: #0f172a; }
.arch-card__text { margin: 0; line-height: 1.65; }
.arch-card__foot { margin: 1.5em 0 .8em; line-height: 1.65; }


/* ==========================================================================
   18. 404-ES OLDAL  (404.html és hu/404.html)
   Az eredeti egyedi hibaoldal mért értékei: fekete háttér, arany cím, a „Don't Panic” kép, szöveg, e-mail-cím, főoldal-gomb.
   A fejléc itt nem lóg a tartalom fölé, nincs alatta hajszálvonal.
   ========================================================================== */
body.page-404 .site-header { position: relative; }
body.page-404 .site-header::after { display: none; }
body.page-404 .site-header__inner { min-height: 88px; }
@media (max-width: 921px) { body.page-404 .site-header__inner { min-height: 81px; } }
@media (max-width: 767px) { body.page-404 .site-header__inner { min-height: 70px; } }

.nf {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: 110px 0 100px;
  text-align: center;
}
.nf__title { font-family: var(--font-display); font-size: 60px; font-weight: 600; line-height: 1.4; color: var(--gold); }
.nf__sub   { font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1.3; color: #fff; }
.nf__block { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.nf__box   { padding: 10px; line-height: 1; }
.nf__box--btn { padding: 40px; }
.nf__img   { width: 15%; height: auto; margin-inline: auto; }
.nf__lead  { font-family: var(--font-display); font-size: 25px; line-height: 1.7; }
.nf__text  { display: flow-root; font-size: 18px; line-height: 1.7; }
.nf__text p { margin: 0 0 18px; }
.nf .ct-mail { display: inline; margin-top: 0; padding-bottom: 0; font-size: 30px; line-height: 30px; }
.nf .btn { padding: 10px 16px; border-width: 1px; font-size: 25px; line-height: 1; min-height: 0; }

@media (max-width: 1024px) {
  .nf { padding: 80px 0; }
  .nf__title { font-size: 45px; }
  .nf__sub   { font-size: 40px; line-height: 1.3; }
  .nf__lead  { font-size: 20px; }
  .nf .btn   { font-size: 20px; }
}
@media (max-width: 767px) {
  .nf { width: calc(100% - 30px); padding: 40px 0 100px; }
  .nf__title { font-size: 30px; }
  .nf__sub   { font-size: 22px; }
  .nf__img   { width: 38%; }
  .nf__lead  { font-size: 18px; }
  .nf .ct-mail { font-size: 19px; line-height: 19px; }
  .nf .btn   { font-size: 24px; }
}


/* ==========================================================================
   19. SÜTI-BANNER ÉS -BEÁLLÍTÁSOK  (a felületet az assets/js/consent.js építi)
   Az „Elutasítom” és az „Elfogadom” gomb egyforma megjelenésű (nincs rávezető kialakítás).
   ========================================================================== */
.cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  pointer-events: none;
}
.cc__box {
  width: min(760px, 100%);
  padding: 20px 24px 22px;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--frame-border);
  border-radius: 14px;
  box-shadow: var(--frame-glow), 0 12px 40px rgba(0, 0, 0, .6);
  color: #fff;
  pointer-events: auto;
  animation: cc-in .35s ease both;
}
@keyframes cc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cc__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--gold); }
.cc__text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #E8E3D6; }
.cc__text a, .cc-dialog__link a { color: var(--gold-soft); text-underline-offset: 3px; }
.cc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cc__btn.btn { font-size: 16px; padding: 7px 20px; min-height: 44px; }
.cc__more {
  padding: 8px 4px;
  background: none; border: 0;
  font: inherit; font-size: 15px;
  color: var(--gold-soft);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.cc__more:hover { color: #fff; }

.cc-backdrop { position: fixed; inset: 0; z-index: 700; background: rgba(0, 0, 0, .7); }
.cc-dialog {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 701;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--frame-border);
  border-radius: 14px;
  box-shadow: var(--frame-glow), 0 12px 40px rgba(0, 0, 0, .7);
  color: #fff;
}
.cc-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cc-dialog__title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--gold); }
.cc-dialog__x { width: 44px; height: 44px; background: none; border: 0; font-size: 30px; line-height: 1; color: #fff; cursor: pointer; }
.cc-dialog__x:hover { color: var(--gold); }
.cc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(var(--gold-rgb), .25); }
.cc-row__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--gold-soft); }
.cc-row__text { margin: 0; font-size: 14px; line-height: 1.6; color: #D8D2C4; }
.cc-row__fixed { flex: none; padding-top: 2px; font-size: 14px; color: var(--muted); }
.cc-switch { position: relative; flex: none; display: inline-block; width: 52px; height: 30px; margin-top: 2px; }
.cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-switch__track { position: absolute; inset: 0; background: #3a3426; border: 1px solid var(--frame-border); border-radius: 999px; pointer-events: none; transition: background .2s ease; }
.cc-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .2s ease; }
.cc-switch input:checked + .cc-switch__track { background: var(--gold); }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(22px); background: var(--ink-dark); }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.cc-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; padding-top: 16px; border-top: 1px solid rgba(var(--gold-rgb), .25); }
.cc-dialog__link { margin: 14px 0 0; font-size: 14px; }

/* a lábléc „Süti-beállítások” hivatkozása (gomb, de hivatkozásnak látszik) */
.link-btn {
  padding: 0; background: none; border: 0;
  font: inherit; color: var(--ink-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
  transition: text-decoration-thickness .2s linear;
}
.link-btn:hover { text-decoration-thickness: 2px; }

@media (max-width: 767px) {
  .cc { padding: 0 8px 8px; }
  .cc__box { padding: 16px 16px 18px; }
  .cc__title { font-size: 18px; }
  .cc__actions .btn { flex: 1 1 130px; justify-content: center; }
  .cc__more { flex: 1 1 100%; text-align: center; }
  .cc-dialog { padding: 18px 16px 16px; }
  .cc-dialog__actions .btn { flex: 1 1 130px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc__box { animation: none; }
  .cc-switch__track, .cc-switch__track::after { transition: none; }
}