/* ==========================================================================
   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;
  --gold-on-light: #946000; /* az arany sötétebb változata világos háttéren (cikkek, kategóriák): kontraszt kb. 5 : 1 */
  --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;
}

/* világos felületeken (cikkek, kategóriák) az arany gyűrű alig látszik: ott sötét a keret */
.post-layout :is(a, button, summary, [tabindex]):focus-visible,
.arch :is(a, button, summary, [tabindex]):focus-visible { outline-color: #0f172a; }

/* 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 { display: inline-flex; align-items: center; min-height: 44px; }
.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 25 px) */
.btn { font-size: 20px; }
.btn--primary { font-size: 40px; padding: 9px 16px; }          /* a kiemelt gomb 2x akkora, mint a többi (az eredetin is) */
.hero__actions .btn { line-height: 33px; }                     /* az eredeti gombmagasság: 53 px (kiemelt: 55 px) */
@media (min-width: 768px) { .btn--primary svg { width: 1em; height: 33px; } }   /* az ikon ne tolja magasabbra a kiemelt gombot (eredeti: 55 px) */

@media (max-width: 767px) {
  .btn { font-size: 16px; padding: 5px 16px; min-height: 44px; }
  .btn--primary { font-size: 25px; 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__secondary { display: flex; flex-wrap: wrap; gap: 20px; }   /* a két másodlagos gomb egy sorban (ha elfér) */

.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; érintőképernyőn (telefon, tablet) érintésre: a main.js
   az "is-tilted" osztályt kapcsolja a portrén, újabb érintésre vagy máshová koppintva visszaáll */
@media (hover: hover) {
  .portrait-wrap:hover { transform: scale(1.15) rotate(5deg); }
}
.portrait-wrap.is-tilted { 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: var(--gold);          /* a felirat arany, a fekete ikon mellett így kontrasztosabb */
  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: #000;                 /* az embléma fekete az arany négyzeten (kontraszt kb. 9 : 1; az eredeti fehér ikon csak kb. 2 : 1 volt) */
  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__secondary { flex-direction: column; align-items: flex-start; gap: 10px; }
  .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: 13px; 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 { justify-content: flex-start; }   /* a számok egy vonalban maradnak akkor is, ha egy felirat két sorba törik */
  .stat__label { font-size: 13px; letter-spacing: .04em; }
  .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: 4 / 3;                          /* a WP-oldal galériájával egyezően 4:3 minden nézetben */
  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; }
}

/* érintőképernyőn (telefon, tablet): amíg az ujjunk a képen van (main.js ráteszi az .is-touched osztályt),
   ugyanaz történik, mint egérrel hoverre: a kép elsötétül, kiszoomol, és megjelenik a felirata */
.strip__item, .travel__img { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; }
.strip__item.is-touched img { transform: scale(1); }
.strip__item.is-touched .strip__overlay { opacity: 1; }

/* belépő animáció (főoldali Rólam-sáv, a main.js 3b blokkja): a képek egyenként, lépcsőzve felcsúsznak és
   a képbe enyhén belezoomolnak (a nyugalmi 1,16-os nagyításra), amint a nézetbe érnek. Csak akkor rejti el
   őket, ha a szkript fut; a "backwards" kitöltés miatt a végén a normál (hover/érintés) szabályok veszik át. */
.js-ready .strip:not(.jg) .strip__item:not(.is-in) { opacity: 0; }
.js-ready .strip:not(.jg) .strip__item.is-in { animation: strip-in 1s cubic-bezier(.22, .7, .25, 1) backwards; }
.js-ready .strip:not(.jg) .strip__item.is-in img { animation: strip-zoom 1.7s cubic-bezier(.22, .7, .25, 1) backwards; animation-delay: inherit; }
@keyframes strip-in { from { opacity: 0; transform: translateY(36px); } }
@keyframes strip-zoom { from { transform: scale(1.5); } }

.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(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cert-intro a:hover { color: var(--gold-soft); }

.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 {
  position: relative;
  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; filter: sepia(.7) saturate(1.2) brightness(1.04) contrast(1.03); border-radius: inherit; }   /* a szűrő miatt saját lekerekítés kell, különben a sarkoknál kiszivárog a kép */
/* meleg, aranyos tónus a WP-oldal videójával egyezően: alul enyhe sötétítés, középen halvány arany derengés */
.video-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%), radial-gradient(at 50% 38%, rgba(220, 165, 74, .12), rgba(220, 165, 74, 0) 70%);
}
.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__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; margin-bottom: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.post-card__meta .post-card__date { margin: 0; }
.post-card__read { color: var(--muted); }
.post-card__read::before { content: "·"; margin-right: .6em; }
.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): a sor a teljes szélességet kihasználja (40 px oldalmargóval, mint a szerzői jogi sor):
   a logó a bal, a közösségi ikonok a jobb szél felé húzódnak, a menü (15 px) középen, egy sorban marad.
   (Az eredeti oldal láblécében a sor 1200 px-re volt szűkítve, és a nyelvváltó új sorba tört; ezt szándékosan módosítottuk.) */
.site-footer {
  background: var(--gold);
  color: var(--ink-dark);
  border-top: 1px solid #F0E6C5;
}
.site-footer__row.container {
  width: calc(100% - 80px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 30px;
  padding: 45px 0;
}
@media (min-width: 1300px) { .site-footer__row.container { column-gap: 60px; } }
.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; }
@media (min-width: 922px) { .footer-nav { flex-wrap: nowrap; white-space: nowrap; } }

.footer-social {
  display: flex;
  justify-content: flex-end;
  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; }
@media (max-width: 767px) {   /* telefonon az inline hivatkozások 44 px magas felületet kapnak, a sormagasság változatlan */
  .site-footer__copy a, .site-footer__copy .link-btn { display: inline-block; padding: 12px 4px; margin: -12px 0; }
}

/* 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: calc(20px + var(--cc-h, 0px) + var(--fab-lift, 0px));
  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, opacity .25s ease, visibility .25s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float.is-away { opacity: 0; visibility: hidden; transform: translateY(24px); pointer-events: none; }   /* lefelé görgetéskor visszahúzódik, felfelé görgetéskor előjön */
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }

/* "vissza a tetejére" gomb (main.js hozza létre): hosszabb görgetés után jelenik meg, a lábléc és a süti-banner fölött áll meg */
.to-top {
  position: fixed;
  right: 20px; bottom: calc(20px + var(--cc-h, 0px) + var(--fab-lift, 0px));
  z-index: 150;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  background: #0A0A0A;
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: transform .25s ease, opacity .25s ease, visibility .25s, box-shadow .25s ease;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { transform: scale(var(--shrink)); box-shadow: 0 0 16px rgba(var(--gold-rgb), .5); }
.to-top svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 767px) { .wa-float { left: 14px; } .to-top { right: 14px; } }
@media (prefers-reduced-motion: reduce) { .wa-float, .to-top { transition: none; } .to-top:hover, .to-top:focus-visible { transform: none; } }

/* 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, .portrait-wrap.is-tilted { 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, .strip__item.is-touched img { transform: none; }
  .travel__img:hover img, .travel__img.is-touched img { transform: none; }
  .lightbox img.slide-next, .lightbox img.slide-prev { animation: none; }
  .strip__overlay { transition: none; }
  .js-ready .strip .strip__item, .js-ready .strip .strip__item img { opacity: 1; animation: 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: row;          /* asztalon a három gomb egymás mellett (mint a WP-oldalon); tableten/telefonon egymás alatt */
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.btn--lg { font-size: 22px; padding: 8px 16px; }
@media (min-width: 1025px) and (max-width: 1279px) {      /* keskeny asztali ablak: a három gomb így is egy sorban marad */
  .pf-actions { gap: 12px; }
  .pf-actions .btn--lg { font-size: 19px; padding: 8px 14px; }
}

.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); }

/* érintőképernyőn (telefon, tablet) ugyanez az ujj alatt: a main.js ráteszi az .is-touched osztályt (lásd még .logos) */
.tool, .logos li { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; }
.tool img, .logos img { -webkit-user-drag: none; }
.tool.is-touched { z-index: 6; }
.tool.is-touched 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:focus-visible::after, .tool:focus-visible::before,
.tool.is-touched::after, .tool.is-touched::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) {                     /* érintőképernyőn a "ragadós" hover ne mutassa a buborékot: ott az .is-touched dönt */
  .tool:hover::after, .tool:hover::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
/* érintésre a felirat a felnagyított ikon FÖLÉ kerül (hogy ne takarja a logót) */
.tool.is-touched::after { bottom: calc(100% + 38px); transform: translate(calc(-50% + var(--tip-x, 0px)), 0); }
.tool.is-touched::before { bottom: calc(100% + 32px); }

.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)); }
}
.logos li.is-touched { z-index: 2; }
.logos li.is-touched 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; flex-direction: column; align-items: flex-start; }
  .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, .tool.is-touched img, .logos li.is-touched 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 jól láthatóan (50%-ra) 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(.5); }
@media (hover: hover) {
  .travel__img:hover img { transform: scale(var(--shrink)); filter: brightness(.5); }
}
.travel__img.is-touched img { transform: scale(var(--shrink)); filter: brightness(.5); }
.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: 70px 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 var(--frame-border);
  box-shadow: var(--frame-glow);
}
.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: 40px; }
  .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, transform .3s ease;
  overflow-wrap: anywhere;
}
.ct-mail:hover, .ct-mail:focus-visible { background-size: 100% 2px; transform: scale(var(--shrink)); }   /* aláhúzás + zsugorodás (shrink) */

/* 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: #000;                 /* fekete embléma az arany négyzeten (kontraszt kb. 9 : 1) */
  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: center; 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; padding-block: 8px; margin-top: 11px; }
  .ct-social { justify-content: center; gap: 19px 20px; max-width: calc(4 * 44px + 3 * 20px); margin-inline: auto; }   /* 4 ikon az első sorban, a többi alatta */
  .ct-social a { width: 44px; height: 44px; }
  .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, .ct-mail:hover, .ct-mail:focus-visible { 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: var(--gold-on-light);
}
.post__meta a { color: var(--gold-on-light); text-decoration: none; transition: color .2s ease; }
.post__content a { color: var(--gold-on-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }
.post__content a.author__btn { text-decoration: none; }
.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;
  display: flex; align-items: center;
  min-height: 44px;
  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;
  min-height: 44px;
  color: var(--gold-on-light);
  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: #6B645A; }
.widget__list--cats a { color: var(--gold-on-light); transition: color .2s ease; }
.widget__list--cats a:hover, .widget__list--cats a:focus-visible { color: #0f172a; }

/* kapcsolódó cikkek a cikk alatt (a tools/update-articles.ps1 építi) */
.related { margin: 2em 0 0; padding: 2em; background: #fff; }
.related__title { margin: 0 0 1em; font: 600 1.375em/1.3 "EB Garamond", Georgia, serif; color: #0f172a; }
.related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75em; }
.related-card__img { display: block; margin: 0 0 1em; overflow: hidden; }
.related-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.related-card__img:hover img { transform: scale(1.04); }
.related-card__title { margin: 0 0 .35em; font: 600 1.25em/1.3 "EB Garamond", Georgia, serif; color: #0f172a; }
.related-card__title a { color: inherit; text-decoration: none; transition: color .2s ease; }
.related-card__title a:hover, .related-card__title a:focus-visible { color: var(--gold-on-light); }
.related-card__meta { margin: 0 0 .6em; font-size: .875em; line-height: 1.4; color: #6B645A; }
.related-card__text { margin: 0; font-size: .9375em; line-height: 1.6; color: #4A4A4A; }
@media (max-width: 544px) { .related { padding: 2em 1em; } .related__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .related-card__img img { transition: none; } .related-card__img:hover img { transform: none; } }


/* ==========================================================================
   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: var(--gold-on-light); }
@media (max-width: 921px) { .arch-card__meta { margin-bottom: 1em; } }
.arch-card__meta a, .arch-card__more { color: var(--gold-on-light); 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; }
@media (max-width: 767px) { .arch-card__more { display: inline-block; padding: 12px 0; margin: -12px 0; } }   /* 44 px magas kattintható felület, a sormagasság változatlan */
.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__art   { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; color: var(--gold); }   /* arany vonalrajz: a „0” egy kameralencse (a WP-oldal 404-éhez) */
.nf__art-hl { stroke: var(--gold-soft); }
.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-block; vertical-align: top;
  margin: 0 0 -3px; padding-bottom: 3px;          /* az aláhúzás a szöveg alatt fut, a doboz magassága közben 30 px marad */
  font-size: 30px; line-height: 30px;
  transition: background-size .3s ease, transform .3s ease;
}
.nf .ct-mail:hover, .nf .ct-mail:focus-visible { transform: scale(var(--shrink)); }   /* hoverre zsugorodik (shrink) */
@media (prefers-reduced-motion: reduce) { .nf .ct-mail:hover, .nf .ct-mail:focus-visible { transform: none; } }
.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__art   { width: min(100%, 340px); }
  .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(1100px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 14px 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__copy { flex: 1 1 420px; min-width: 0; }
.cc__title { margin: 0 0 2px; font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--gold); }
.cc__text { margin: 0; font-size: 14px; line-height: 1.5; color: #E8E3D6; }
.cc__text a, .cc-dialog__link a { display: inline-block; padding: 12px 2px; margin: -12px 0; color: var(--gold-soft); text-underline-offset: 3px; }   /* 44 px magas kattintható felület, a sormagasság változatlan */
.cc__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cc__btn.btn { font-size: 16px; padding: 7px 20px; min-height: 44px; min-width: 140px; justify-content: center; }   /* Elutasítás és Elfogadás egyforma széles (egyenlő hangsúly) */
.cc__more {
  min-height: 44px;
  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: 12px 14px 8px; gap: 8px; }
  .cc__copy { flex-basis: 100%; }
  .cc__title { font-size: 16px; }
  .cc__text { font-size: 13.5px; line-height: 1.45; }
  .cc__actions { flex: 1 1 100%; gap: 4px 8px; }
  .cc__actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 10px; font-size: 15px; }
  .cc__more { flex: 0 0 auto; padding: 8px 6px; font-size: 14px; }
  .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; }
}


/* ==========================================================================
   20. LINKEDIN-KÁRTYA (portfólióoldal alja)
   Borítósáv + kör alakú portré (a LinkedIn-profil képe), név, szerep, kapszulák, szöveg, gomb.
   ========================================================================== */
.li-sec { padding: 25px 0 0; }
.li { overflow: hidden; text-align: center; }
.li__cover {
  height: 130px;
  border-bottom: 1px solid rgba(var(--gold-rgb), .35);
  background:
    radial-gradient(60% 140% at 85% 0%, rgba(var(--gold-rgb), .30), transparent 60%),
    radial-gradient(50% 120% at 10% 100%, rgba(var(--gold-rgb), .14), transparent 65%),
    linear-gradient(135deg, #1d1709, #0a0905);
}
.li__avatar {
  position: relative;
  display: block;
  width: 190px;
  aspect-ratio: 1;
  margin: -95px auto 0;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: #000;
  box-shadow: var(--frame-glow);
}
.li__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.li__body { padding: 22px 40px 40px; }
.li__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.li__eyebrow svg { width: 20px; height: 20px; fill: var(--gold); }
.li__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .35);
}
.li__name { margin-top: 14px; font-size: 20px; font-weight: 600; color: #fff; }
.li__role { font-size: 16px; color: var(--muted); }
.li__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.li__chips li { padding: 6px 14px; border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 999px; background: rgba(var(--gold-rgb), .07); font-size: 14px; color: var(--gold-soft); }
.li__text { max-width: 640px; margin: 14px auto 0; font-size: 17px; line-height: 1.6; color: #E6E0D3; }
.li .btn { margin-top: 26px; font-size: 24px; padding: 10px 22px; }
.li .btn svg { width: 1em; height: 1em; flex: none; fill: currentColor; }

@media (max-width: 767px) {
  .li__cover { height: 100px; }
  .li__avatar { width: 150px; margin-top: -75px; }
  .li__body { padding: 20px 20px 30px; }
  .li__title { font-size: 23px; }
  .li .btn { font-size: 17px; padding: 10px 14px; }
}


/* ==========================================================================
   23. UI-FEJLESZTÉSEK (2026-10-06) – mobil-első
   Visszaállítási pont: git tag "elotte-ui-fejlesztes" (ennek a szakasznak az eltávolítása + a HTML-ek eredeti állapota).
   ========================================================================== */

/* ikonok az emoji-k helyett (a sprite: book, mail, check-circle, smile) */
.inl-ico { display: inline-block; width: 1.05em; height: 1.05em; fill: var(--gold); vertical-align: -.15em; }
.pf-intro .pf-point { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.pf-point__ico { width: 24px; height: 24px; margin-top: .3em; fill: var(--gold); }
.ct-mail svg { display: inline-block; width: .85em; height: .85em; margin-right: .4em; vertical-align: -.08em; fill: currentColor; }

/* nyomásvisszajelzés érintőképernyőn (nincs hover, ezért az érintés pillanatában kis benyomódás jelez) */
a, button, summary { -webkit-tap-highlight-color: rgba(var(--gold-rgb), .16); }
@media (hover: none) {
  .btn, .social__link, .carousel__btn, .ct-submit, .to-top, .wa-float, .tl-more__sum, .nav__link { transition-duration: .12s; }
  .btn:active, .social__link:active, .carousel__btn:active, .ct-submit:active, .to-top:active, .wa-float:active, .tl-more__sum:active { transform: scale(.96); }
  .btn:active, .tl-more__sum:active { background: rgba(var(--gold-rgb), .22); }
  .post-card:active, .card:active, .arch-card:active, .related-card:active { transform: scale(.985); }
}

/* tablet: a főoldali közösségi ikonsor 4 elemmel egy sorban marad (768 px-en a Facebook egyedül a 2. sorba esett) */
@media (min-width: 768px) and (max-width: 1024px) {
  .social { flex-wrap: nowrap; gap: 10px; }
  .social__link { font-size: 17px; gap: 8px; }
}

/* cikk: a törzsszöveg bal széle egy vonalban a címmel és a dátumsorral */
.post__content { padding: 10px 0; }

/* cikk: "Röviden" összefoglaló doboz (tools/update-tldr.ps1) */
.post__tldr { margin: 1.7em 0 1.9em; padding: 1.1em 1.4em 1.2em; background: #FBF3DF; border-left: 4px solid var(--gold-on-light); border-radius: 0 8px 8px 0; }
.post__tldr-title { margin: 0 0 .55em; font: 700 .8em/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-on-light); }
.post__tldr ul { margin: 0; padding: 0; list-style: none; }
.post__tldr li { position: relative; margin: 0 0 .6em; padding-left: 1.4em; font-size: .95em; line-height: 1.55; color: #2A2A2A; }
.post__tldr li:last-child { margin-bottom: 0; }
.post__tldr li::before { content: ""; position: absolute; left: .15em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--gold-on-light); }

/* kulcsszámok: a felfutó számláló ne ugráljon */
.stat__num { font-variant-numeric: tabular-nums; }

/* idővonal: minden állásnál az első 2 felsorolás látszik, a többi a „Tovább / Kevesebb” gomb mögött (a WP-oldal gh-more mintájára),
   minden nézetben zárva indul; nyomtatáskor a main.js kinyitja */
.tl-more { margin-top: 10px; }
.tl-more__sum {
  display: inline-flex; align-items: center;
  box-sizing: border-box; min-height: 44px; padding: .3em .95em;
  border: 1px solid rgba(var(--gold-rgb), .6); border-radius: 8px;
  font-family: var(--font-body); font-size: 19px; line-height: 1.4; color: var(--gold);
  list-style: none; cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tl-more__sum::-webkit-details-marker { display: none; }
.tl-more__sum::after { content: ""; width: .42em; height: .42em; margin-left: .65em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .3s ease; }
.tl-more[open] > .tl-more__sum::after { transform: translateY(.05em) rotate(-135deg); }
.tl-more__close { display: none; }
.tl-more[open] .tl-more__open { display: none; }
.tl-more[open] .tl-more__close { display: inline; }
.tl-more > .tl-list { margin-top: 2px; }
.tl-more[open] > .tl-list { animation: tl-open .3s ease both; }
@keyframes tl-open { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) { .tl-more__sum:hover { transform: scale(.94); box-shadow: 0 0 14px rgba(var(--gold-rgb), .35); } }
@media (prefers-reduced-motion: reduce) { .tl-more__sum:hover { transform: none; } }
.tl-more__sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* mobilmenü: sötét takaró a tartalom fölött, X-szé alakuló hamburger, lépcsőzve belépő, nagy érintési felületű menüpontok */
.nav-backdrop { display: none; }
.nav-toggle svg path { transform-box: fill-box; transform-origin: center; transition: transform .3s ease, opacity .2s ease; }
@media (max-width: 921px) {
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
  .nav-backdrop.is-on { opacity: 1; visibility: visible; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__b1 { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__b2 { opacity: 0; transform: scaleX(.2); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__b3 { transform: translateY(-5px) rotate(-45deg); }
  .nav__list { padding-top: 4px; box-shadow: 0 22px 40px rgba(0, 0, 0, .7); }
  .nav__list li { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
  .nav__list li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
  .nav__list.is-open li { opacity: 1; transform: none; }
  .nav__list.is-open li:nth-child(2) { transition-delay: .04s; }
  .nav__list.is-open li:nth-child(3) { transition-delay: .08s; }
  .nav__list.is-open li:nth-child(4) { transition-delay: .12s; }
  .nav__list.is-open li:nth-child(5) { transition-delay: .16s; }
  .nav__link { display: flex; width: 100%; min-height: 56px; padding: 0 0 0 14px; border-left: 3px solid transparent; }
  .nav__link[aria-current="page"] { border-left-color: var(--gold); }
  .nav__link:hover, .nav__link:focus-visible { transform: none; background: rgba(var(--gold-rgb), .08); }
  body.nav-open .wa-float, body.nav-open .to-top { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* telefon */
@media (max-width: 767px) {
  /* a tanúsítványok vízszintesen csúsztatható sávban (a következő kártya kilátszik), alatta pontok jelzik a helyet */
  .card-grid { display: flex; gap: 14px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .card-grid::-webkit-scrollbar { display: none; }
  .card-grid > .card { flex: 0 0 82%; scroll-snap-align: start; }
  .js-ready .card-grid > .card.reveal { opacity: 1; transform: none; }       /* a jobbra lévő kártyák sosem érnének a nézetbe, ezért nem rejtjük el őket */
  .snap-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .snap-dots__dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(var(--gold-rgb), .3); transition: width .25s ease, background .25s ease; }
  .snap-dots__dot.is-active { width: 22px; background: var(--gold); }

  /* a főoldali fotósáv 2×2-es négyzetrácsban (4 egymás alatti kép helyett) */
  .strip:not(.jg) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .strip:not(.jg) .strip__item img { aspect-ratio: 4 / 3; }
  .strip:not(.jg) .strip__overlay { font-size: 15px; }

  /* gyártói logók két oszlopban */
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 30px; }
  .logos li { height: 84px; }
  .logos img { width: min(120px, 66%); }
  .logos img[alt="DSC"] { width: min(96px, 54%); }
  .logos li.is-touched img { transform: scale(1.45); }
}
/* ---- 5. Hero-kompozíció (a WP-oldal 6.42 a) pontjával egyezően) ----
   A közösségi ikonsor balra, a cím és a gombok bal szélére igazítva (eddig jobbra lebegett, a bal oldala üres volt).
   A vonalrajz-illusztráció asztalon és tableten halvány vízjel a portré oszlopának alján (nem foglal helyet);
   telefonon elmarad (ott a portré tölti ki az oszlopot), így a hero kb. 320 px-rel rövidebb. */
.social { justify-content: flex-start; gap: 14px 36px; }
.hero__side { position: relative; align-self: stretch; justify-content: flex-start; }
.portrait-wrap { position: relative; z-index: 1; }
.hero__illustration { position: absolute; z-index: 0; right: -8px; bottom: -24px; width: min(390px, 108%); opacity: .18; pointer-events: none; }
@media (max-width: 1100px) {
  .hero__illustration { right: 0; bottom: -10px; width: min(330px, 135%); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .social { gap: 12px 28px; }
}
@media (max-width: 767px) {
  .hero__illustration { display: none; }
  .hero__side { align-self: auto; }
  .social { gap: 20px 12px; }
}

/* ---- 6. Fénycsík (a WP-oldal 6.42 b) pontjával egyezően) ----
   Portré: egyszer betöltéskor, majd egérrel (érintőképernyőn a koppintással kiváltott "is-tilted" állapottal) újra.
   Cikk- és tanúsítványkártyák: egérrel hoverre; telefonon a cikkkártyákon egyszer, amikor a nézetbe úsznak.
   A fény a portré pirula-alakjára vágódik (a .portrait overflow:hidden + border-radius). Mozgáscsökkentésnél nincs. */
.portrait { position: relative; }
.portrait::after, .card::after, .post-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background-repeat: no-repeat; background-size: 260% 100%; background-position: 130% 0;
}
.portrait::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 236, 196, .5) 50%, transparent 62%); }
.card::after, .post-card::after { background-image: linear-gradient(105deg, transparent 40%, rgba(255, 226, 160, .2) 50%, transparent 60%); }
.card, .post-card { position: relative; }
@keyframes sweep-portrait { 0% { opacity: 0; background-position: 130% 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@keyframes sweep-portrait-again { 0% { opacity: 0; background-position: 130% 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }   /* külön név: így hoverre/koppintásra újraindul a betöltéskori után is */
@keyframes sweep-card { 0% { opacity: 0; background-position: 130% 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js-ready .portrait::after { animation: sweep-portrait 1.8s cubic-bezier(.4, 0, .2, 1) 1.1s 1 both; }
  .portrait-wrap.is-tilted .portrait::after { animation: sweep-portrait-again 1.4s cubic-bezier(.4, 0, .2, 1) 1 both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portrait-wrap:hover .portrait::after { animation: sweep-portrait-again 1.4s cubic-bezier(.4, 0, .2, 1) 1 both; }
  .card:hover::after, .post-card:hover::after { animation: sweep-card .9s ease-out 1 both; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .js-ready .post-card.is-visible::after { animation: sweep-card .9s ease-out .5s 1 both; }
}
@media print { .portrait::after, .card::after, .post-card::after { display: none !important; } }

/* --- UI-kör 2 (2026-10-09) ---------------------------------------------------------------- */

/* fő gomb (főoldali „My Portfolio”): tömör arany kitöltés, sötét felirat – ez legyen az egyértelmű fő lépés */
.btn--primary { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: var(--gold-soft); color: #1b1308; box-shadow: 0 0 18px rgba(var(--gold-rgb), .45); }
.btn--primary:hover, .btn--primary:focus-visible { background: linear-gradient(180deg, #F8DA9C, var(--gold-soft)); box-shadow: 0 0 26px rgba(var(--gold-rgb), .6); }
.btn--primary:active { background: var(--gold-soft); }

/* főoldali hero gombjai telefonon: teljes szélességű fő gomb, alatta két kisebb egyforma szélességű */
@media (max-width: 767px) {
  .hero__actions { align-items: stretch; }
  .hero__actions .btn--primary { justify-content: center; }
  .hero__secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
  .hero__secondary .btn { justify-content: center; text-align: center; gap: 8px; padding: 6px 10px; font-size: 15px; line-height: 1.25; }
}

/* portfólió bevezető pontjai telefonon: az ikon a szöveg sorában áll (a szöveg a teljes szélességet kapja) */
@media (max-width: 767px) {
  .pf-intro .pf-point { display: block; }
  .pf-point__ico { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .5em 0 0; vertical-align: -.18em; }
}

/* Rólam: az útikártyák telefonon két oszlopban (a 4 kártya két sorban, az oldal jóval rövidebb) */
@media (max-width: 767px) {
  .travel { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; gap: 0 12px; }
  .travel__item { margin-bottom: 32px; }
  .travel__img { width: 100%; }
  .travel__img img { width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; }
  .travel__title { margin-top: 14px; font-size: 15px; line-height: 1.3; }
  .travel__text { margin-top: 4px; font-size: 14px; line-height: 1.45; }
}

/* portfólió, Skillek és eszközök: alcímek a szoftverek és a gyártók fölött */
.pf-sub { display: flex; align-items: center; gap: 16px; margin: 49px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--gold-soft); }
.pf-sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .45), rgba(var(--gold-rgb), 0)); }
.pf-sub + .tools { margin-top: 24px; }
.pf-sub + .logos { margin-top: 4px; }
@media (max-width: 767px) {
  .pf-sub { margin-top: 40px; font-size: 18px; }
  .pf-sub + .tools { margin-top: 22px; }
  .pf-sub + .logos { margin-top: 16px; }
}

/* cikkek: záró felhívás a szerzői doboz előtt (tools/update-cta.ps1) */
.post-cta { margin: 2.2em 0 0; padding: 1.5em 1.6em 1.7em; text-align: center; border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 14px; background: linear-gradient(180deg, rgba(var(--gold-rgb), .11), rgba(var(--gold-rgb), .03)); }
.post__content .post-cta__title { margin: 0 0 .4em; font: 400 1.55em/1.25 "EB Garamond", Georgia, serif; color: #F6F0E2; }
.post__content .post-cta__text { margin: 0 auto 1.2em; max-width: 34em; line-height: 1.6; color: #D8D1C1; }
.post__content .post-cta__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 22px; border: 1px solid var(--gold-soft); border-radius: 10px; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #1b1308; font-family: var(--font-display); font-size: 16px; line-height: 1.2; text-decoration: none; transition: box-shadow .2s ease, transform .3s ease; }
.post__content .post-cta__btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
body.page-post .post__content .post-cta__btn:hover, body.page-post .post__content .post-cta__btn:focus-visible { color: #1b1308; box-shadow: 0 0 20px rgba(var(--gold-rgb), .5); transform: scale(var(--shrink)); }
@media (max-width: 544px) { .post-cta { padding: 1.3em 1em 1.5em; } }
@media (prefers-reduced-motion: reduce) { body.page-post .post__content .post-cta__btn:hover { transform: none; } }
@media print { .post-cta { display: none !important; } }

/* cikk- és kategóriaoldalak: sötét téma a krémszínű Astra-téma helyett (2026-10-09; nyomtatásban marad a világos) */
@media screen {
  body.page-post { --gold-on-light: var(--gold); background: #000; color: #E9E4D8; }
  body.page-post .post, body.page-post .widget, body.page-post .related, body.page-post .arch__head { background: #0F0C07; border: 1px solid rgba(var(--gold-rgb), .35); box-shadow: 0 0 18px rgba(var(--gold-rgb), .12); }
  body.page-post .arch-card { background: #0F0C07; border: 0; border-inline: 1px solid rgba(var(--gold-rgb), .35); border-bottom: 1px solid rgba(var(--gold-rgb), .22); }
  body.page-post .post__title, body.page-post .post__content > h2, body.page-post .author__name, body.page-post .widget__title, body.page-post .related__title,
  body.page-post .related-card__title, body.page-post .arch__title, body.page-post .arch-card__title, body.page-post .widget__list a { color: #F6F0E2; }
  body.page-post .post__meta a:hover, body.page-post .post__meta a:focus-visible, body.page-post .post__content a:hover, body.page-post .post__content a:focus-visible,
  body.page-post .widget__list--cats a:hover, body.page-post .widget__list--cats a:focus-visible, body.page-post .arch-card__meta a:hover, body.page-post .arch-card__more:hover,
  body.page-post .arch-card__meta a:focus-visible, body.page-post .arch-card__more:focus-visible { color: var(--gold-soft); }
  body.page-post .widget__list--cats a { color: var(--gold); }
  body.page-post .widget__list time, body.page-post .related-card__meta { color: #A9A08E; }
  body.page-post .related-card__text, body.page-post .arch__text, body.page-post .author__bio { color: #D4CDBD; }
  body.page-post .author__role { color: var(--gold); }
  body.page-post .author { background: rgba(var(--gold-rgb), .07); }
  body.page-post .post__tldr { background: rgba(var(--gold-rgb), .09); }
  body.page-post .post__tldr li { color: #EDE7D9; }
}

/* --- UI-kör 3 (2026-10-11) ---------------------------------------------------------------- */

/* tanúsítvány-sáv nyilai tableten/telefonon a kereten belül (korábban kilógtak a képernyőből) */
@media (max-width: 1024px) {
  .carousel__btn--prev { left: 6px; }
  .carousel__btn--next { right: 6px; }
}

/* okos fejléc (tableten és telefonon, ≤ 921 px): ragadós; lefelé görgetve elrejtőzik, felfelé görgetve előbukkan (main.js 1b).
   A html.smart-hdr osztályt a szkript állítja be: JS nélkül a fejléc marad a régi (nem ragad). ≥ 922 px-en nem változik semmi. */
@media (max-width: 921px) {
  html.smart-hdr .site-header,
  html.smart-hdr body.page-archive .site-header,
  html.smart-hdr body.page-404 .site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
  }
  html.smart-hdr body.hdr-stuck .site-header { box-shadow: 0 1px 0 rgba(220, 165, 74, .45); }     /* ragadós állapot: arany vonal a fejléc alatt */
  html.smart-hdr body.hdr-hidden .site-header { transform: translateY(-101%); box-shadow: none; }  /* -101%: a vonal sem lóg ki */
  html { scroll-padding-top: 84px; }                                                               /* horgonyra ugrásnál ne takarja a fejléc */
}
@media (prefers-reduced-motion: reduce) { html.smart-hdr .site-header { transition: none; } }

/* kapcsolati űrlap: a Küldés gomb tömör arany (mint a főoldali fő gomb), telefonon teljes szélességű; az e-mail cím balra a szöveggel */
.ct-submit { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: var(--gold-soft); color: #1b1308; box-shadow: 0 0 14px rgba(var(--gold-rgb), .3); }
.ct-submit:hover, .ct-submit:focus-visible { background: linear-gradient(180deg, #F8DA9C, var(--gold-soft)); box-shadow: 0 0 22px rgba(var(--gold-rgb), .5); }
@media (max-width: 767px) { .ct-submit { display: flex; width: 100%; justify-content: center; min-height: 48px; font-size: 17px; } }
@media (max-width: 1024px) { .ct-mail { text-align: left; } }

/* olvashatóbb apró szövegek (legalább 13 px) és nagyobb koppintási felületek */
.post-card__meta, .post-card__date { font-size: 13px; }
@media (max-width: 767px) {
  .stat__label { font-size: 14px; }
  .post__tldr-title { font-size: .9em; }
  .post__tldr li, .related-card__text { font-size: 1em; }
  .related-card__meta { font-size: .9em; }
  .post__meta a, .arch-card__meta a, .widget__list--cats a { display: inline-block; padding: 12px 0; margin: -12px 0; }   /* 44 px magas koppintható felület, a sormagasság változatlan */
}
.footer-social a { position: relative; }
.footer-social a::before { content: ""; position: absolute; inset: -9px; }   /* a lábléc ikonjainak kattintható felülete nagyobb, a kinézet változatlan */

/* főoldali hero tableten: a két másodlagos gomb egy sorban */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero__secondary { flex-wrap: nowrap; gap: 12px; }
  .hero__secondary .btn { font-size: 17px; padding: 8px 14px; white-space: nowrap; }
}

@media (min-width: 768px) { .snap-dots { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle svg path, .nav__list li, .nav-backdrop, .tl-more__sum, .tl-more__sum::after, .snap-dots__dot { transition: none; }
  .tl-more[open] > .tl-list { animation: none; }
}
@media print { .tl-more > .tl-more__sum, .nav-backdrop, .snap-dots { display: none !important; } }


/* ==========================================================================
   22. NYOMTATÁS
   Fehér lapra, fekete szöveggel: nincs fejléc, menü, gomb, lebegő elem, sütibanner, videó, űrlap és oldalsáv;
   a cikkekben a külső hivatkozások mellett kiírjuk a webcímet; a címek és a kártyák nem törnek ketté.
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  html, body { background: #fff !important; font-size: 11pt; line-height: 1.5; }
  body::after { display: none !important; }

  /* nem nyomtatandó: navigáció, gombok, lebegő elemek, banner, videó, űrlap, oldalsáv, ajánlók, díszek */
  .site-header, .skip-link, .nav-toggle, .wa-float, .to-top, .cc, .cc-backdrop, .cc-dialog, .lightbox,
  .site-footer__row, .video-frame, .section--video, .carousel__btn, .carousel__nav, .hero__actions, .hero__illustration,
  .hero::before, .brush, .btn, .more, .post-sidebar, .post-nav, .related, .author__btn, .ct-form-wrap, .ct-form,
  .ct-social, .li-sec, .pf-cta, .ab-cta, .cta, .social, .pf-more, .nf__actions, .strip__overlay, .section-head__num {
    display: none !important;
  }

  /* a belépő animációk miatt rejtett elemek is látszódjanak */
  .reveal, .fade-up, .js-ready .fade-up, .fade-up.is-visible { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .js-ready .strip .strip__item, .js-ready .strip .strip__item img { opacity: 1 !important; animation: none !important; }

  main, .container, .post-layout, .post-primary, .post, .arch { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  .post-layout { padding: 0 !important; }
  .post { padding: 0 !important; }
  .split, .split--pf, .ab-welcome, .ab-prio .container, .hero__grid { display: block !important; }
  .carousel__track { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8mm; overflow: visible !important; transform: none !important; }
  .carousel__slide { width: auto !important; flex: none !important; }

  /* a nagy címek és képek nyomtatható méretre */
  .hero__title, .pf-title, .ab-title, .ct-title { font-size: 26pt !important; line-height: 1.2 !important; }
  .hero__title em { font-size: 18pt !important; padding: 0 !important; margin: 0 !important; }
  .portrait-wrap, .ab-portrait, .ab-portrait__shape { width: 55mm !important; max-width: 55mm !important; margin: 0 0 6mm !important; transform: none !important; }
  .card-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6mm !important; }
  .card__img img, .carousel__slide img { width: 100% !important; transform: none !important; }
  .card__title { font-size: 10pt !important; line-height: 1.3 !important; }
  .post-list { display: block !important; }
  .post-card { display: grid !important; grid-template-columns: 55mm 1fr; gap: 5mm; margin: 0 0 6mm !important; border: 0 !important; }
  .post-card__body { padding: 0 !important; }
  .strip { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 3mm !important; border: 0 !important; }
  .strip__item img { transform: none !important; }
  .nf__art { width: 45mm !important; }
  .hero, .pf-hero, .ab-hero, .ct-hero, .arch { padding-top: 0 !important; padding-bottom: 4mm !important; }
  .section, .ct-section, .pf-section, .pf-section--first, .ab-section, .ab-welcome, .ab-quote-wrap, .nf__block { padding-top: 5mm !important; padding-bottom: 5mm !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  .section--sep::before, .section--sep::after, .ct-section::before, .ct-section::after { display: none !important; }
  .site-footer__row.container, .ct-section:has(.ct-social), .ct-section:has(.ct-form) { display: none !important; }   /* a lábléc-menü, az ikonsor és az űrlap (a fejlécükkel együtt) nem nyomtatandó */
  .nf { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
  .section-head::before, .section-head::after { display: none !important; }
  .ct-image img, .cta__img { max-height: 55mm; width: 100% !important; object-fit: cover; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  img, figure, .card, .post-card, .arch-card, .qual, .prio, .timeline > li, .travel__item, .stat, .ab-quote, .tool, table { break-inside: avoid; page-break-inside: avoid; }
  img { max-width: 100% !important; height: auto !important; }

  a { text-decoration: underline; }
  .post__content a[href^="http"]::after, .pf-intro a[href^="http"]::after, .cert-intro a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }

  /* lábléc: csak a szerzői jogi sor */
  .site-footer { border: 0 !important; margin-top: 1.5em; }
  .site-footer__copy { padding: .8em 0 0 !important; border-top: 1px solid #999 !important; text-align: left !important; font-size: 9.5pt !important; min-height: 0 !important; }
  .site-footer__copy .link-btn { display: none !important; }
}

/* --- Mobilmenü alja + főoldali Rólam „Tovább” (2026-10-12, a WP-oldal megoldásainak statikus változata) ------------------------ */

/* a mobilmenü alján (≤ 921 px): arany Kapcsolatfelvétel gomb + a közösségi ikonok sora (main.js 1c); asztalon rejtett */
.nav__extra { display: none; }
@media (max-width: 921px) {
  .nav__list li.nav__extra {
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    margin-top: 6px; padding: 24px 0 8px;
    border-top: 1px solid rgba(var(--gold-rgb), .35);
  }
  .nav__cta {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: min(100%, 320px); min-height: 54px; padding: 0 28px;
    border: 2px solid var(--gold-soft); border-radius: 10px;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    box-shadow: 0 0 18px rgba(var(--gold-rgb), .45);
    font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: #1b1308; text-decoration: none;
  }
  .nav__cta:active { background: var(--gold-soft); }
  .nav__cta:focus-visible, .nav__social a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
  .nav__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; width: 100%; max-width: 340px; }
  .nav__list .nav__social li { margin: 0; padding: 0; border: 0; opacity: 1; transform: none; transition: none; }
  .nav__social a {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 44px; height: 44px;
    border: 1.5px solid rgba(var(--gold-rgb), .6); border-radius: 10px;
    background: rgba(var(--gold-rgb), .08); color: var(--gold-soft);
  }
  .nav__social a:active { background: rgba(var(--gold-rgb), .28); }
  .nav__social svg { width: 21px; height: 21px; fill: currentColor; }
}
@media (max-width: 921px) and (max-height: 700px) { .nav__list li.nav__extra { gap: 16px; padding-top: 18px; } }
@media (max-width: 359px) { .nav__social { flex-wrap: wrap; justify-content: center; gap: 8px; } }   /* 320 px-en a 7 ikon nem fér egy sorba: két sorba törik, nem lóg ki */

/* főoldal, Rólam: telefonon (≤ 767 px) a bevezető második fele „Tovább / Kevesebb” mögé csukódik (main.js 1d); a gomb a Portfólió „Tovább” gombjának megjelenése */
.intro__more { display: none; }
@media (max-width: 767px) {
  html.js-ready .intro:not(.intro--open) .intro-rest { display: none; }
  .intro__more { display: block; margin-top: 14px; }
  .intro__btn {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; margin: 0; padding: 6px 19px;
    background: transparent; border: 1px solid rgba(var(--gold-rgb), .6); border-radius: 8px;
    color: var(--gold); font-family: var(--font-body); font-size: 19px; font-weight: 400; line-height: 1.2; cursor: pointer;
  }
  .intro__btn::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .65em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .3s ease; }
  .intro--open ~ .intro__more .intro__btn::after, .intro__btn[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); }
  .intro__btn:active { background: rgba(var(--gold-rgb), .22); }
  .intro__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .intro__off, .intro--open ~ .intro__more .intro__on { display: none; }
  .intro--open ~ .intro__more .intro__off { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .intro__btn::after { transition: none; } }
@media print { .intro .intro-rest { display: inline !important; } .intro__more, .nav__extra { display: none !important; } }

/* --- 404 gombok, Kapcsolat gyors gombok, cikk „Vissza a kategóriához” (2026-10-12, a WP-oldal F3–F5 elemeinek statikus változata) --- */

/* 404: Főoldal / Portfólió / Kapcsolat gombok egymás mellett, szűk kijelzőn tördelve */
.nf__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.nf__nav .btn { min-height: 44px; justify-content: center; }   /* tableten a 20 px-es felirat 42 px-es gombot adna */
@media (max-width: 767px) { .nf__nav { padding: 28px 10px; gap: 12px; } }
@media (max-width: 480px) { .nf__nav { flex-direction: column; align-items: center; } .nf__nav .btn { width: min(100%, 280px); } }   /* telefonon egymás alatt, azonos szélesen (nem 2+1 törés) */

/* Kapcsolat, telefonon (≤ 767 px): gyors elérés az oldal tetején – E-mail (arany, teljes szélesség) + WhatsApp + LinkedIn; ≥ 768 px-en rejtett */
.ct-quick { display: none; }
@media (max-width: 767px) {
  .ct-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
  .ct-quick .btn { width: 100%; box-sizing: border-box; justify-content: center; min-height: 52px; font-size: 17px; }
  .ct-quick .btn--gold {
    grid-column: 1 / -1;
    border-color: var(--gold-soft); color: #1b1308;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    box-shadow: 0 0 14px rgba(var(--gold-rgb), .3);
  }
  .ct-quick .btn--gold:hover, .ct-quick .btn--gold:focus-visible { background: linear-gradient(180deg, #F8DA9C, var(--gold-soft)); box-shadow: 0 0 22px rgba(var(--gold-rgb), .5); }
}

/* cikk: „‹ Kategória” visszalépés a kiemelt kép fölött (tools/update-articles.ps1 építi) */
.post-back { margin: 0 0 4px; }
.post-back a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-right: 14px;
  font-family: var(--font-display); font-size: 15px; line-height: 1.2; color: var(--gold-soft); text-decoration: none;
}
.post-back svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; margin-left: -4px; }
.post-back a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
@media (hover: hover) { .post-back a:hover { color: #fff; } }
@media print { .post-back, .ct-quick { display: none !important; } }
/* --- A csomag (2026-10-13, UX-átvilágítás 1-6. pont) ----------------------------------------------------------------- */

/* 1. Billentyűzetes fókuszgyűrű a sötét cikk- és kategóriaoldalakon: a világos témához írt sötét (#0f172a) gyűrű a sötét háttéren 1,09:1 volt (láthatatlan);
      most arany (9:1 körül). A láblécben a gyűrű marad sötét (arany sávon áll). */
body.page-post .post-layout :is(a, button, summary, [tabindex]):focus-visible,
body.page-post .arch :is(a, button, summary, [tabindex]):focus-visible { outline-color: var(--gold); }

/* 2. A cikkek törzsszövege tableten/telefonon (≤ 921 px): 16 px a 14,6 px helyett (a cím, a méta és a térközök változatlanok) */
@media screen and (max-width: 921px) {
  body.page-post .post__content > p,
  body.page-post .post__content > ul,
  body.page-post .post__content > ol { font-size: 16px; }
  body.page-post .post__tldr li { font-size: 15.5px; }
}

/* 3. 404 telefonon: a három gomb a magyarázat ELŐTT áll (a lap alján két képernyővel lejjebb voltak) */
@media (max-width: 767px) { .nf__block .nf__nav { order: -1; } }

/* 4. Szövegtördelés: a címek kiegyensúlyozva, a bekezdések árvasor nélkül (nem támogató böngészőben nincs hatás) */
:is(.post__title, .post__content > h2, .arch__title, .arch-card__title, .related__title, .related-card__title, .widget__title, .post-cta__title,
    .post-card__title, .cta__title, .card__title, .nf__sub, .nf__lead) { text-wrap: balance; }
:is(.post__content p, .post__content li, .prose p, .pf-intro, .cert-intro, .post-card__excerpt, .arch-card__text, .related-card__text,
    .post-cta__text, .author__bio, .tl-list li, .nf__text p) { text-wrap: pretty; }

/* 4b. Kártya-méta (főoldali cikkkártyák): a dátum és az olvasási idő külön-külön nem törik, és ha a kettő már nem fér egy sorba,
       az elválasztó „·” elmarad (korábban az új sor elejére került). A küszöb a legszélesebb dátummal számolt természetes szélesség + 6 px
       (HU 306 px, EN 259 px; 13 px, .1em betűköz). Container query nélküli böngészőben a régi viselkedés marad. */
.post-card__meta { container-type: inline-size; align-self: stretch; }   /* stretch: a tárolónak a kártya szövegoszlopa a szélessége (különben a tartalmi méret 0 lenne) */
.post-card__meta > * { white-space: nowrap; }
@container (max-width: 266px) { .post-card__read { margin-left: .4em; } .post-card__read::before { display: none; } }
@container (max-width: 312px) { html[lang^="hu"] .post-card__read { margin-left: .4em; } html[lang^="hu"] .post-card__read::before { display: none; } }

/* ==========================================================================
   B csomag (UX-átvilágítás 7, 8, 10, 11, 13. pont) – 2026-10-13
   ========================================================================== */

/* 11. Portfólió: ragadós gyorsugró-sáv (Tapasztalat · Skillek · Képesítések) ---------------------------------
   A sáv a <main> első eleme: az oldal tetején közvetlenül a fejléc alatt áll, görgetéskor ragad. Az asztali
   fejléc (≥ 922 px) a hero fölé lebeg (120 px), ezért ott a sáv 120 px-szel lejjebb kezdődik; a hero felső
   térköze a sáv magasságával csökken, így a cím ugyanott marad, ahol eddig volt. */
:root { --pf-bar: 60px; --pf-hdr: 81px; }
@media (max-width: 767px) { :root { --pf-bar: 56px; --pf-hdr: 70px; } }

.pf-main { display: flow-root; }            /* a sáv felső margója ne olvadjon össze a <main>/<body> margójával (különben a lebegő fejléc is lejjebb csúszna) */
.pf-jump {
  position: sticky; top: 0; z-index: 90;
  height: var(--pf-bar);
  margin-top: 120px;
  background: rgba(8, 6, 3, .94);
  transition: box-shadow .28s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pf-jump { background: rgba(8, 6, 3, .8); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
}
.pf-jump::after {                      /* arany hajszálvonal alul, mint a fejlécen; ragadós állapotban teljes szélességű */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .5) 14%, rgba(var(--gold-rgb), .5) 86%, rgba(var(--gold-rgb), 0));
}
.pf-jump.is-stuck { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .9); }
.pf-jump.is-stuck::after { background: rgba(var(--gold-rgb), .5); }
.pf-jump__in {
  display: flex; align-items: center; gap: 16px;
  width: min(var(--content), 100% - 2 * var(--gutter)); height: 100%; margin-inline: auto;
}
.pf-jump__lbl {
  flex: none;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--gold-rgb), .75);
}
.pf-jump__list { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pf-jump__list::-webkit-scrollbar { display: none; }
.pf-jump__list li { flex: none; }
.pf-jump a {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 18px;
  border: 1px solid rgba(var(--gold-rgb), .42); border-radius: 999px;
  background: rgba(var(--gold-rgb), .05);
  font-family: var(--font-display); font-size: 15px; line-height: 1; white-space: nowrap;
  color: var(--gold-soft); text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.pf-jump a b { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--gold); }
.pf-jump a:hover, .pf-jump a:focus-visible { background: rgba(var(--gold-rgb), .14); border-color: var(--gold); }
.pf-jump a[aria-current="location"] {  /* az éppen olvasott szakasz */
  background: rgba(var(--gold-rgb), .22); border-color: var(--gold); color: #FFF6DE;
  box-shadow: 0 0 14px rgba(var(--gold-rgb), .28);
}
.pf-jump a[aria-current="location"] b { color: var(--gold-soft); }

/* a hero felső térköze: a sáv helyét levonva a H1 az eddigi helyén marad */
@media (min-width: 922px) { .pf-hero { padding-top: 11px; } }
@media (min-width: 768px) and (max-width: 921px) { .pf-jump { margin-top: 0; } .pf-hero { padding-top: calc(163px - var(--pf-bar)); } }
@media (max-width: 767px) {
  .pf-jump { margin-top: 0; }
  .pf-hero { padding-top: calc(95px - var(--pf-bar)); }
  .pf-jump__in { width: calc(100% - 24px); gap: 0; }
  .pf-jump__lbl, .pf-jump a b { display: none; }       /* telefonon szám és felirat nélkül: a három gomb egy sorba fér */
  .pf-jump__list { flex: 1 1 auto; gap: 8px; }
  .pf-jump__list li { flex: 1 1 auto; }
  .pf-jump a { width: 100%; justify-content: center; height: 44px; padding: 0 10px; font-size: 14px; }
}
/* tableten/telefonon (okos fejléc, ≤ 921 px): amíg a fejléc látszik, a sáv alatta áll; ha a fejléc elrejtőzik, a sáv a képernyő tetejére csúszik */
@media (max-width: 921px) {
  html.smart-hdr body.hdr-stuck:not(.hdr-hidden) .pf-jump { top: var(--pf-hdr); }
  html.smart-hdr .pf-jump { transition: top .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease; }
}
@media (prefers-reduced-motion: reduce) { html.smart-hdr .pf-jump, .pf-jump, .pf-jump a { transition: none; } }
/* JS nélkül a böngésző természetes horgonyugrása: a cím a sáv alá kerül */
.pf-h2 { scroll-margin-top: calc(var(--pf-bar) + 24px); }
@media print { .pf-jump { display: none !important; } }

/* 7. Sorhossz asztalon: a hosszú bevezetők ~75 karakteres sorokra (mérve 1440 px-en: 88–121 karakter volt; a cikk 78) */
.pf-intro, .cert-intro, .prose p, .ab-welcome__text, .prio__text { max-width: 66ch; }
.cta__text { max-width: 70ch; margin-inline: auto; }

/* 10. Cikkoldal, ≤ 921 px: a "Latest Writing" lista elrejtve (a cikk alatt ott a "Related articles", ismétlés); a Categories marad */
@media (max-width: 921px) { .widget--latest { display: none; } }

/* 13. Kapcsolat, ≥ 768 px: a 3 gyors gomb (E-mail / WhatsApp / LinkedIn) a cím alatt, és alacsonyabb kép (~300 px),
   hogy az űrlap ne 1790 px-nél kezdődjön */
@media (min-width: 768px) {
  .ct-quick { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 30px; }
  .ct-quick .btn { min-height: 52px; font-size: 19px; }
  .ct-quick .btn--gold {
    border-color: var(--gold-soft); color: #1b1308;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    box-shadow: 0 0 14px rgba(var(--gold-rgb), .3);
  }
  .ct-quick .btn--gold:hover, .ct-quick .btn--gold:focus-visible { background: linear-gradient(180deg, #F8DA9C, var(--gold-soft)); box-shadow: 0 0 22px rgba(var(--gold-rgb), .5); }
  .ct-image { margin-top: 0; }
  .ct-image img { aspect-ratio: auto; height: clamp(200px, 24vw, 300px); }
}

/* ==========================================================================
   C csomag (UX-átvilágítás 12, 14, 15. pont) – 2026-10-13
   ========================================================================== */

/* 14. Okos fejléc asztalon (≥ 922 px) – eddig csak tableten/telefonon (≤ 921 px) volt (main.js 1b).
   A lebegő (absolute) fejléc fix lesz: az oldal tetején átlátszó, ugyanott áll, mint eddig; 10 px görgetés után tömör sötét háttér + arany vonal,
   alacsonyabb sáv (72 px, kisebb logó); lefelé görgetve elrejtőzik, felfelé görgetve előbukkan. A kategória- és a 404-oldalon a fejléc eddig is helyet foglalt:
   ott ragadós (sticky) és ugyanolyan magas marad, hogy a tartalom ne ugorjon. */
@media (min-width: 922px) {
  :root { --pf-hdr: 72px; }
  html.smart-hdr .site-header {
    position: fixed;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), background-color .25s ease, box-shadow .28s ease;
  }
  html.smart-hdr body.page-archive .site-header,
  html.smart-hdr body.page-404 .site-header { position: sticky; top: 0; }
  html.smart-hdr .site-header__inner { transition: min-height .25s ease; }
  html.smart-hdr .site-logo img { transition: width .25s ease; }
  html.smart-hdr body.hdr-stuck .site-header { background: rgba(8, 6, 3, .94); box-shadow: 0 1px 0 rgba(var(--gold-rgb), .45); }
  html.smart-hdr body.hdr-stuck:not(.page-archive):not(.page-404) .site-header__inner { min-height: 72px; }
  html.smart-hdr body.hdr-stuck:not(.page-archive):not(.page-404) .site-logo img { width: 200px; }
  html.smart-hdr body.hdr-hidden .site-header { transform: translateY(-101%); box-shadow: none; }
  html.smart-hdr body.hdr-stuck:not(.hdr-hidden) .pf-jump { top: var(--pf-hdr); }              /* Portfólió-sáv: a látszó fejléc alatt */
  html.smart-hdr .pf-jump { transition: top .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease; }
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (min-width: 922px) { html.smart-hdr body.hdr-stuck .site-header { background: rgba(8, 6, 3, .82); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } }
}
@media (min-width: 922px) and (prefers-reduced-motion: reduce) { html.smart-hdr .site-header, html.smart-hdr .site-header__inner, html.smart-hdr .site-logo img, html.smart-hdr .pf-jump { transition: none; } }

/* 12. Kategóriaoldal (A változat): ≥ 768 px-en két oszlop, egyforma magas kártyák, 3:2 képek; telefonon változatlan (egy oszlop).
   Az oldal 1440 px-en 4755 → ~2000 px magas lett. */
@media screen and (min-width: 768px) {
  body.page-archive .arch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
  body.page-archive .arch__head { grid-column: 1 / -1; }
  body.page-post.page-archive .arch-card {
    display: flex; flex-direction: column;
    padding: 1.5em 1.5em 1.3em;
    border: 1px solid rgba(var(--gold-rgb), .3); border-radius: 14px;
  }
  body.page-archive .arch-card__img { margin: 0 0 1.1em; border-radius: 10px; overflow: hidden; }
  body.page-archive .arch-card__img img { aspect-ratio: 3 / 2; object-fit: cover; }
  body.page-archive .arch-card__title { font-size: 1.4em; }
  body.page-archive .arch-card__text { flex: 1 1 auto; }
  body.page-archive .arch-card__foot { margin: 1.1em 0 0; }
}

/* páratlan számú cikknél (pl. 1 cikk a Generative AI kategóriában) az utolsó kártya teljes szélességű, vízszintes elrendezésű, nem marad üres a második oszlop */
@media screen and (min-width: 768px) {
  body.page-post.page-archive .arch-card:last-child:nth-child(even) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 2em; align-content: center; }
  body.page-archive .arch-card:last-child:nth-child(even) .arch-card__img { grid-row: 1 / span 4; margin: 0; align-self: stretch; }
  body.page-archive .arch-card:last-child:nth-child(even) .arch-card__img img { height: 100%; min-height: 200px; aspect-ratio: auto; }
  body.page-archive .arch-card:last-child:nth-child(even) :is(.arch-card__title, .arch-card__meta, .arch-card__text, .arch-card__foot) { grid-column: 2; }
  body.page-archive .arch-card:last-child:nth-child(even) .arch-card__title { align-self: end; }
  body.page-archive .arch-card:last-child:nth-child(even) .arch-card__foot { align-self: start; }
}

/* LinkedIn-megosztás a cikkek végén (tools/update-c-csomag.ps1): sima link a LinkedIn megosztó oldalára, külső szkript nélkül */
.post__content .post-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 1.3em 0 0; }
.post__content .post-share__lbl { font-size: .95em; color: #A9A08E; }
.post__content .post-share__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 1px solid rgba(var(--gold-rgb), .55); border-radius: 999px; background: rgba(var(--gold-rgb), .06);
  font-family: var(--font-display); font-size: 1em; line-height: 1.2; color: var(--gold-soft); text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post__content .post-share__btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.post__content .post-share__btn:hover, .post__content .post-share__btn:focus-visible { background: rgba(var(--gold-rgb), .16); border-color: var(--gold); box-shadow: 0 0 16px rgba(var(--gold-rgb), .3); color: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { .post__content .post-share__btn { transition: none; } }
@media print { .post-share { display: none !important; } }

/* ==========================================================================
   D csomag – oldalak alján a CTA-dobozok (.panel.cta) képe: „zoom-in” animáció hoverre
   ========================================================================== */
/* A kép lassan ráközelít, ha az egér a doboz BÁRMELY részén áll (kép, cím, szöveg, gomb), billentyűzettel is (a gombon álló fókusz),
   érintőképernyőn pedig az ujj alatt (main.js: .is-touched). A kép a doboz kerete mögött marad (a .cta overflow: hidden vágja);
   a szövegrész (.cta__body) a kép fölé kerül, hogy a nagyított kép ne lógjon rá. */
.cta__img { position: relative; z-index: 0; transform-origin: center; transition: transform .7s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.cta__body { position: relative; z-index: 1; }
@media (hover: hover) { .cta:hover .cta__img { transform: scale(1.08); } }
.cta:focus-within .cta__img, .cta.is-touched .cta__img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .cta__img { transition: none; } .cta:hover .cta__img, .cta:focus-within .cta__img, .cta.is-touched .cta__img { transform: none; } }

/* ==========================================================================
   E csomag – képek „zoom-in” hoverre (kapcsolat, Rólam, Portfólió, cikkkártyák, kategóriakártyák), LinkedIn-sor, kapcsolati kép aránya
   ========================================================================== */
/* A kép lassan (0,7 s) 1,08-szorosára nagyodik a saját keretén belül. Egérrel :hover, billentyűzettel :focus-within (kártyák),
   érintőképernyőn az ujj alatt (.is-touched, main.js touchSel). Csökkentett mozgásnál nincs animáció. */
.ct-image img, .ab-portrait__shape img, .pf-photos .frame img, .post-card__img img, .arch-card__img img {
  transition: transform .7s cubic-bezier(.2, .7, .2, 1); will-change: transform;
}
.post-card__img, .arch-card__img { overflow: hidden; }
@media (hover: hover) {
  .ct-image:hover img, .ab-portrait__shape:hover img, .pf-photos .frame:hover img,
  .post-card:hover .post-card__img img, .arch-card:hover .arch-card__img img { transform: scale(1.08); }
}
.ct-image.is-touched img, .ab-portrait__shape.is-touched img, .pf-photos .frame.is-touched img,
.post-card.is-touched .post-card__img img, .arch-card.is-touched .arch-card__img img,
.post-card:focus-within .post-card__img img, .arch-card:focus-within .arch-card__img img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .ct-image img, .ab-portrait__shape img, .pf-photos .frame img, .post-card__img img, .arch-card__img img { transition: none; }
  .ct-image:hover img, .ab-portrait__shape:hover img, .pf-photos .frame:hover img, .post-card:hover .post-card__img img, .arch-card:hover .arch-card__img img,
  .ct-image.is-touched img, .ab-portrait__shape.is-touched img, .pf-photos .frame.is-touched img, .post-card.is-touched .post-card__img img,
  .arch-card.is-touched .arch-card__img img, .post-card:focus-within .post-card__img img, .arch-card:focus-within .arch-card__img img { transform: none; }
}

/* Kategóriaoldal: a kártyák ugyanazt a hover-animációt kapják, mint a főoldali cikkkártyák: arany ragyogás + fénycsík (a főoldali „emelkedés” a .reveal miatt a gyakorlatban nem látszik, ezért itt sincs) */
.arch-card { position: relative; transition: box-shadow .25s ease; }
.arch-card:focus-within { box-shadow: 0 0 32px rgba(var(--gold-rgb), .40); }
@media (hover: hover) { .arch-card:hover { box-shadow: 0 0 32px rgba(var(--gold-rgb), .40); } }
.arch-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background-repeat: no-repeat; background-size: 260% 100%; background-position: 130% 0;
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 226, 160, .2) 50%, transparent 60%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .arch-card:hover::after { animation: sweep-card .9s ease-out 1 both; } }
@media (prefers-reduced-motion: reduce) { .arch-card { transition: none; } }
@media print { .arch-card::after { display: none !important; } }

/* Kapcsolat: a hero-kép arányát kevésbé szélesre (magasabbra) vettük: ≥ 768 px-en 3 : 1 (volt ~4 : 1), telefonon 3 : 2 (volt 2 : 1) */
@media (min-width: 768px) { .ct-image img { height: auto; aspect-ratio: 3 / 1; } }
@media (max-width: 767px) { .ct-image img { aspect-ratio: 3 / 2; object-position: 72% 50%; } }

/* LinkedIn-megosztás a cikk alján: szimmetrikus elrendezés – középre igazított felirat két oldalt hajszálvonallal, alatta a gomb;
   a CTA-doboz és a szerzői doboz felé egyforma a távolság */
.post__content .post-share { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin: 2.4em 0 0; }
.post__content .post-share__lbl { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; font-size: .85em; letter-spacing: .12em; text-transform: uppercase; }
.post__content .post-share__lbl::before, .post__content .post-share__lbl::after { content: ""; flex: 1 1 0; max-width: 150px; height: 1px; }
.post__content .post-share__lbl::before { background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .45)); }
.post__content .post-share__lbl::after { background: linear-gradient(270deg, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .45)); }
.post__content .post-share + .author { margin-top: 2.4em; }


/* ==========================================================================
   24. OLDALON BELÜLI KERESŐ (Pagefind)  –  assets/js/search.js, tools/build-search.ps1
   Fekete-arany "spotlight" panel: teljes képernyős takaró + üveghatású panel.
   Osztályok: srch-trigger (fejléc-gomb), srch (takaró), srch__* (alkatrészek).
   Betűk/színek a site változóiból (--gold, --gold-rgb, --muted, --font-*).
   ========================================================================== */

/* ---- fejléc-gomb ------------------------------------------------------- */
.srch-trigger {
  display: none;            /* JS nélkül nincs értelme: a .js-ready (main.js) mutatja */
   align-items: center; justify-content: center; gap: 10px;
  flex: none;
  height: 46px; min-width: 46px; margin-left: 10px; padding: 0 14px;
  border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 999px;
  background: radial-gradient(120% 140% at 30% 0%, rgba(var(--gold-rgb), .14), rgba(0, 0, 0, .55));
  color: var(--gold);
  font: 500 14px/1 var(--font-body);
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s ease, border-color .25s ease, box-shadow .3s ease, background .3s ease;
}
.js-ready .srch-trigger { display: inline-flex; }
.srch-trigger svg { width: 21px; height: 21px; flex: none; }
.srch-trigger__kbd {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 7px; border-radius: 6px;
  border: 1px solid rgba(var(--gold-rgb), .35);
  color: var(--muted); font: 500 11px/1 var(--font-body);
}
.srch-trigger:hover, .srch-trigger:focus-visible {
  transform: scale(var(--shrink, .9));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .25), 0 0 22px rgba(var(--gold-rgb), .35);
  background: radial-gradient(120% 140% at 30% 0%, rgba(var(--gold-rgb), .26), rgba(0, 0, 0, .6));
}
.srch-trigger:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
@media (max-width: 1180px) { .srch-trigger__kbd { display: none; } .srch-trigger { padding: 0; width: 46px; } .srch-trigger__lbl { display: none; } }
@media (max-width: 921px) {
  .srch-trigger { order: -1; margin: 0 4px 0 0; width: 48px; height: 48px; border-color: transparent; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
  .srch-trigger svg { width: 26px; height: 26px; }
  .srch-trigger:hover, .srch-trigger:focus-visible { transform: none; color: var(--gold); box-shadow: none; background: transparent; border-color: transparent; }
}

/* ---- takaró és panel --------------------------------------------------- */
html.srch-lock { overflow: hidden; }
.srch { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: center; align-items: flex-start; padding: 11vh 24px 24px; }
.srch[hidden] { display: none; }
.srch__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 0%, rgba(var(--gold-rgb), .10), transparent 70%), rgba(3, 2, 1, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0; transition: opacity .25s ease;
}
.srch.is-open .srch__backdrop { opacity: 1; }

.srch__panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(780px, 100%); max-height: min(76vh, 760px);
  border-radius: 20px;
  background: linear-gradient(180deg, #19150b 0%, #0d0b07 58%, #0a0906 100%);
  border: 1px solid rgba(var(--gold-rgb), .32);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .65), 0 0 70px rgba(var(--gold-rgb), .09), inset 0 1px 0 rgba(255, 233, 186, .07);
  overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(.985);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.srch.is-open .srch__panel { opacity: 1; transform: none; }
.srch__panel::before {            /* arany hajszál a panel tetején */
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .85), transparent);
}
.srch__panel::after {             /* halvány arany derengés a jobb felső sarokban */
  content: ""; position: absolute; right: -80px; top: -120px; width: 340px; height: 300px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .10), transparent);
}
.srch__panel > * { position: relative; z-index: 1; }

/* ---- beviteli sor ------------------------------------------------------ */
.srch__bar { display: flex; align-items: center; gap: 14px; padding: 0 20px 0 24px; height: 78px; flex: none; margin: 0; }
.srch__bar > svg { width: 26px; height: 26px; flex: none; color: var(--gold); }
.srch__input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: 0; padding: 0;
  color: #f6eedb; caret-color: var(--gold);
  font: 400 23px/1.2 var(--font-body); letter-spacing: .005em;
  -webkit-appearance: none; appearance: none;
}
.srch__input::placeholder { color: rgba(185, 179, 166, .7); }
.srch__input::-webkit-search-cancel-button, .srch__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.srch__clear, .srch__esc, .srch__cancel { flex: none; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-family: var(--font-body); }
.srch__clear { display: none; width: 34px; height: 34px; border-radius: 50%; padding: 0; transition: background .2s, color .2s; }
.srch__clear svg { width: 18px; height: 18px; margin: auto; display: block; }
.srch__clear:hover, .srch__clear:focus-visible { background: rgba(var(--gold-rgb), .16); color: var(--gold-soft); }
.srch.has-q .srch__clear { display: block; }
.srch__esc {
  padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(var(--gold-rgb), .32);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; transition: border-color .2s, color .2s;
}
.srch__esc:hover, .srch__esc:focus-visible { border-color: var(--gold); color: var(--gold-soft); }
.srch__cancel { display: none; font-size: 16px; color: var(--gold); padding: 10px 2px 10px 6px; }

.srch__progress {                  /* hajszálvonal a beviteli sor alatt, keresés közben fut rajta egy arany sáv */
  position: absolute; left: 0; right: 0; top: 77px; height: 1px; background: rgba(var(--gold-rgb), .16); overflow: hidden; z-index: 2;
}
.srch__progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; }
.srch.is-busy .srch__progress::after { opacity: 1; animation: srch-run .9s ease-in-out infinite; }
@keyframes srch-run { to { left: 100%; } }

/* ---- szűrőfülek -------------------------------------------------------- */
.srch__filters { display: none; gap: 8px; padding: 14px 24px 2px; flex: none; overflow-x: auto; scrollbar-width: none; }
.srch__filters::-webkit-scrollbar { display: none; }
.srch.has-results .srch__filters { display: flex; }
.srch__tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .26); background: rgba(var(--gold-rgb), .04);
  color: var(--muted); font: 500 13px/1 var(--font-body); letter-spacing: .02em;
  transition: background .2s, color .2s, border-color .2s;
}
.srch__tab b { font-weight: 600; font-size: 12px; color: var(--gold); }
.srch__tab:hover { border-color: rgba(var(--gold-rgb), .6); color: #fff; }
.srch__tab[aria-selected="true"] { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: var(--gold); color: var(--ink-dark); }
.srch__tab[aria-selected="true"] b { color: var(--ink-dark); }
.srch__tab:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* ---- tartalom ---------------------------------------------------------- */
.srch__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 14px; scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), .4) transparent; overscroll-behavior: contain; }
.srch__body::-webkit-scrollbar { width: 8px; }
.srch__body::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), .35); border-radius: 8px; }
.srch__meta { margin: 8px 12px 6px; font: 500 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(185, 179, 166, .85); }
.srch__meta em { font-style: normal; color: var(--gold-soft); text-transform: none; letter-spacing: .01em; font-size: 13px; }
.srch__list { list-style: none; margin: 0; padding: 0; }

.srch-item { margin: 0; opacity: 0; transform: translateY(8px); animation: srch-in .38s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes srch-in { to { opacity: 1; transform: none; } }
.srch-item a {
  position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) 28px; gap: 18px; align-items: center;
  padding: 12px 14px 12px 14px; border-radius: 14px; text-decoration: none; color: inherit;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.srch-item a::before {              /* arany jelzősáv a kijelölt találat bal szélén */
  content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); opacity: 0; transform: scaleY(.4); transition: opacity .2s, transform .25s;
}
.srch-item.is-active a, .srch-item a:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb), .11), rgba(var(--gold-rgb), .03)); border-color: rgba(var(--gold-rgb), .26); }
.srch-item.is-active a::before { opacity: 1; transform: none; }
.srch-item a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.srch-item__img { width: 104px; height: 70px; border-radius: 10px; overflow: hidden; background: #1a160d; border: 1px solid rgba(var(--gold-rgb), .3); transition: box-shadow .3s, border-color .3s; }
.srch-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.srch-item.is-active .srch-item__img { border-color: rgba(var(--gold-rgb), .7); box-shadow: 0 0 18px rgba(var(--gold-rgb), .28); }
.srch-item.is-active .srch-item__img img { transform: scale(1.07); }
.srch-item__top { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 10px; margin: 0 0 5px; font: 500 12px/1.3 var(--font-body); letter-spacing: .06em; color: rgba(185, 179, 166, .88); white-space: nowrap; overflow: hidden; }
.srch-item__top > span { flex: none; }
.srch-item__top > .is-kind { font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.srch-item__top > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 10px; vertical-align: middle; border-radius: 50%; background: rgba(var(--gold-rgb), .55); }
.srch-item__top > .is-cat { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.srch-item__title { margin: 0 0 4px; font: 500 21px/1.22 "EB Garamond", Georgia, serif; color: #fff; letter-spacing: .005em; }
.srch-item__txt { margin: 0; font: 400 14px/1.55 var(--font-body); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srch mark { background: rgba(var(--gold-rgb), .16); color: var(--gold-soft); border-radius: 4px; padding: 0 3px; margin: 0 -1px; box-shadow: inset 0 -1px 0 rgba(var(--gold-rgb), .55); }
.srch-item__title mark { background: transparent; color: var(--gold-soft); box-shadow: none; padding: 0; margin: 0; border-bottom: 2px solid rgba(var(--gold-rgb), .7); }
.srch-item__go { color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s; justify-self: end; }
.srch-item__go svg { width: 22px; height: 22px; display: block; }
.srch-item.is-active .srch-item__go { opacity: 1; transform: none; }

/* ---- kezdő állapot: témák + legújabb írások ----------------------------- */
.srch__hero { padding: 20px 14px 6px; }
.srch__hero h2 { margin: 0 0 6px; font: 400 26px/1.15 var(--font-display); color: #fff; letter-spacing: .01em; }
.srch__hero p { margin: 0; font: 400 14.5px/1.55 var(--font-body); color: var(--muted); max-width: 52ch; }
.srch__label { margin: 22px 14px 10px; font: 600 11px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px; }
.srch__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .4), transparent); }
.srch__chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 14px; }
.srch__chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .34); background: rgba(var(--gold-rgb), .05);
  color: #f1e6cc; font: 500 14px/1 var(--font-body); letter-spacing: .01em;
  transition: transform .25s ease, background .2s, border-color .2s, color .2s, box-shadow .25s;
}
.srch__chip::before { content: "#"; color: var(--gold); font-weight: 600; }
.srch__chip:hover, .srch__chip:focus-visible { background: rgba(var(--gold-rgb), .16); border-color: var(--gold); color: #fff; box-shadow: 0 0 16px rgba(var(--gold-rgb), .22); transform: translateY(-1px); }
.srch__chip:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.srch-item--compact a { grid-template-columns: 72px minmax(0, 1fr) 28px; padding: 9px 14px; gap: 16px; }
.srch-item--compact .srch-item__img { width: 72px; height: 48px; border-radius: 8px; }
.srch-item--compact .srch-item__title { font-size: 19px; margin: 0; }
.srch-item--compact .srch-item__top { margin-bottom: 2px; }

/* ---- nincs találat -------------------------------------------------------- */
.srch__empty { text-align: center; padding: 34px 22px 10px; }
.srch__empty svg { width: 64px; height: 64px; color: var(--gold); opacity: .9; margin: 0 auto 14px; display: block; }
.srch__empty h2 { margin: 0 0 8px; font: 400 24px/1.25 var(--font-display); color: #fff; word-break: break-word; }
.srch__empty p { margin: 0 auto 6px; max-width: 46ch; font: 400 14.5px/1.6 var(--font-body); color: var(--muted); }
.srch__empty a { color: var(--gold-soft); text-underline-offset: 3px; }
.srch__empty .srch__chips { justify-content: center; margin-top: 8px; }

/* ---- lábléc ---------------------------------------------------------------- */
.srch__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .28); font: 400 12.5px/1 var(--font-body); color: rgba(185, 179, 166, .9); }
.srch__hints { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.srch__hints span { display: inline-flex; align-items: center; gap: 7px; }
.srch kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(var(--gold-rgb), .35); background: rgba(var(--gold-rgb), .07); color: var(--gold-soft); font: 600 11px/1 var(--font-body); }
.srch__brand { letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; color: rgba(185, 179, 166, .6); }

/* ---- telefon: teljes képernyős lap ----------------------------------------- */
@media (max-width: 767px) {
  .srch { padding: 0; }
  .srch__panel { width: 100%; max-height: none; height: 100%; height: 100dvh; border-radius: 0; border: 0; transform: translateY(18px); }
  .srch__panel::before { left: 0; right: 0; }
  .srch__bar { height: 66px; padding: 0 14px 0 18px; gap: 10px; padding-top: env(safe-area-inset-top, 0); box-sizing: content-box; }
  .srch__bar > svg { width: 23px; height: 23px; }
  .srch__progress { top: calc(66px + env(safe-area-inset-top, 0px)); }
  .srch__input { font-size: 18px; }
  .srch__esc { display: none; }
  .srch__cancel { display: block; }
  .srch__filters { padding: 12px 16px 2px; }
  .srch__body { padding: 6px 6px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .srch__hero { padding: 16px 12px 4px; }
  .srch__hero h2 { font-size: 23px; }
  .srch__label, .srch__chips { margin-left: 12px; margin-right: 12px; padding: 0; }
  .srch__label { margin-top: 20px; }
  .srch__chips { padding: 0; gap: 8px; }
  .srch__chip { height: 44px; }
  .srch-item a { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 11px 10px; align-items: start; }
  .srch-item__go { display: none; }
  .srch-item__img { width: 76px; height: 56px; border-radius: 8px; }
  .srch-item__top > .is-cat, .srch-item__top > .is-rt { display: none; }
  .srch-item__title { font-size: 19px; }
  .srch-item__txt { font-size: 13.5px; -webkit-line-clamp: 3; }
  .srch-item--compact a { grid-template-columns: 64px minmax(0, 1fr); }
  .srch-item--compact .srch-item__img { width: 64px; height: 44px; }
  .srch__foot { display: none; }
  .srch__meta { margin-left: 10px; }
}
@media (max-width: 380px) { .srch-item a { grid-template-columns: 64px minmax(0, 1fr); } .srch-item__img { width: 64px; height: 48px; } }

/* ---- mozgáscsökkentés --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .srch__backdrop, .srch__panel, .srch-item, .srch-item a::before, .srch-item__img img, .srch-item__go, .srch__chip, .srch-trigger { transition: none !important; animation: none !important; }
  .srch-item { opacity: 1; transform: none; }
  .srch.is-busy .srch__progress::after { animation: none; left: 0; width: 100%; opacity: .5; }
}

/* a sütibanner ne takarja a keresőt */
.srch ~ .cc, body:has(.srch.is-open) .cc { visibility: hidden; }