/* ==========================================================================
   Dr. Kávássy Emese – egyedi stílusok
   Itt csak azok az elemek szerepelnek, amiket Tailwind osztályokkal
   körülményes lenne leírni (színátmenetek, ismétlődő kártya stílusok).
   A színek központi helye: assets/js/tailwind.config.js
   ========================================================================== */

:root {
  --cream: #f9f7f2;
  --shell: #f8f7f4;
  --brown: #5b4217;
  --navy:  #1b2a44;
  --gold:  #e7ac42;
  --gold-light: #ffca69;
  --gold-deep:  #efba5a;
  --sand:  #c2af98;
  --ink:   #474544;
  --slate: #2f4858;
  /* Kártyakeret – halványabb, mint a --sand, mert az árnyék lekerült róluk */
  --card-border: #e8e0d4;
}

html { scroll-behavior: smooth;
  /* A horgonyra ugrasnal a celszakasz ne bujjon a fix fejlec ala. */
  scroll-padding-top: 100px; }


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* --- Hero fotó nagyítása ------------------------------------------------
   A --hero-zoom az EGYETLEN szám, amit át kell írni, ha közelebb vagy
   távolabb szeretnéd a képet:
     1     = eredeti méret (a kép pont kitölti a hero-t)
     1.8   = 80%-kal ráközelítve   <-- jelenleg ez van beállítva
     1.4   = 40%-kal ráközelítve
   A --hero-pont azt mondja meg, a kép melyik része maradjon látható
   nagyításkor ("center center", "center top", "left center", stb.). */
.hero-img {
  --hero-zoom: 1.05;
  --hero-pont: center center;
  transform: scale(var(--hero-zoom));
  transform-origin: var(--hero-pont);
}

/* Sötétítő réteg, hogy a fehér szöveg olvasható legyen a fotón */
.hero-overlay {
  background-image:
    /* 1) sargas fatyol alulrol felfele – a Figma szerinti ertekek */
    linear-gradient(180deg, rgba(102, 102, 102, 0) 32%, rgba(220, 231, 66, 0.2) 98%),
    /* 2) egyenletes sotetites, hogy a feher szoveg olvashato maradjon */
    /*linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);*/
	linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* --------------------------------------------------------------------------
   JOGTERÜLET ALOLDALAK  (jogterulet-*.html)
   Figma: "jogterulet_site" (349:635)
   -------------------------------------------------------------------------- */

/* Az aloldalak hero-ja NEM a főoldal sárgás fátylát használja, hanem
   egy 90%-os sötétkék réteget – így a fehér cím jól olvasható marad. */
.jog-hero-overlay { background-color: rgba(27, 42, 68, 0.9); }

/* "Főoldal > Munkajog" morzsamenü */
.jog-breadcrumb {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.jog-breadcrumb a { color: inherit; text-decoration: none; }
.jog-breadcrumb a:hover { text-decoration: underline; }
.jog-breadcrumb span { opacity: .75; }

/* A fehér kártya szövegtörzse: félkövér alcímek + felsorolások.
   A méretek a Figma szerint: 18px / 26px sortáv, #474544. */
.jog-body {
  font-size: 18px;
  line-height: 26px;
  color: var(--ink);
}
.jog-body h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--ink);
}
.jog-body h3 + ul { margin-top: 0; }
.jog-body ul {
  list-style: disc;
  padding-left: 27px;
}
.jog-body li { margin: 0; }
/* 26px üres sor a blokkok között – a Figmában is egy üres bekezdés van ott */
.jog-body > * + h3 { margin-top: 26px; }

/* Sorkizárás csak ott, ahol elég széles a hasáb (a főoldalon is így van) */
@media (min-width: 768px) {
  .jog-body { text-align: justify; }
}

/* --- Jogterulet aloldal: szakaszok es a peldakerdesek -------------------
   A szamozas automatikus (CSS counter), igy nem tud elcsuszni, ha egy
   szakaszt beszursz vagy kiveszel. */
.jog-body { counter-reset: jog-szakasz; }
.jog-body h3 { counter-increment: jog-szakasz; }
.jog-body h3::before {
  content: counter(jog-szakasz) ". ";
  color: var(--gold);
  font-weight: 700;
}

/* Peldakerdesek a felsorolas utan: arany bal szegely + dolt szedes.
   Igy latszik, hogy ezek "ez az on helyzete?" tipusu felvetesek,
   nem pedig a szakasz folytatasa. */
/* A Grav a peldakerdeseket markdown idezetkent (`> ...`) kapja, a statikus
   HTML pedig .jog-kerdes osztallyal – ezert mindketto ugyanigy nez ki. */
.jog-kerdes,
.jog-body blockquote {
  margin-top: 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--gold);
  font-style: italic;
  font-size: 17px;
  line-height: 26px;
  color: var(--ink);
  text-align: left;   /* dolt sorkizart nehezen olvashato */
}
/* A zaro bekezdes: kis levegot kap, es nem dolt. */
.jog-body blockquote > p { margin: 0; }
.jog-body blockquote > p + p { margin-top: 8px; }
.jog-zaras { margin-top: 32px; font-weight: 500; }

/* --- Lablec: kamarai tajekoztato es jogi linkek ------------------------ */
.footer-kamara {
  /* Lora (talpas), mint a honlap tobbi szovege. A lablec FELSO soraban all,
     a logotol JOBBRA (lasd index.html / footer.html.twig). */
  font-family: 'Lora', Georgia, serif;
  font-size: 13px;
  line-height: 1.7;
  /* TELJES szelesseg: a szoveg a lablec sajat soraban all, a logo/elerhetoseg
     sor ALATT. Igy 1920px-es kepernyon (1280px tartalomszelesseg) ket sorba fer.
     Sorkizart + automatikus elvalasztas: az elvalasztas nelkul a hosszu
     kamarai URL miatt lyukas sorkozok keletkeznenek. */
  max-width: none;
  /* Keskeny kijelzon BALRA igazitott: ott a sorkizaras csunya, lyukas
     sorkozoket csinal, mert a hosszu kamarai URL nem tud tordelni.
     Sorkizart csak 1024px felett, ahol mar eleg szeles a sor. */
  text-align: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: rgba(249, 247, 242, 0.75);
}
@media (min-width: 1024px) {
  .footer-kamara {
    text-align: justify;
    text-align-last: left;   /* az utolso sort NE huzza szet */
  }
}
.footer-kamara a { color: var(--gold); text-decoration: underline; }
.footer-kamara a:hover { color: var(--goldlight); }
.footer-linkek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}
.footer-linkek a { color: rgba(249, 247, 242, 0.85); text-decoration: none; }
.footer-linkek a:hover { color: var(--gold); text-decoration: underline; }
.footer-linkek span { color: rgba(249, 247, 242, 0.3); }

/* ==========================================================================
   KAPCSOLATFELVETEL SZEKCIO
   Figma: 612:582 ("Tudástár" nevu frame, de a tartalma Kapcsolatfelvetel)
   Balra a fotó arany kerettel, jobbra egy feher kartya az elerhetosegekkel.
   Nagy kepernyon a kartya ratolodik a fotora (lasd az xl:-ml-12-t a HTML-ben).
   ========================================================================== */

/* A foto: 10px arany keret, mint a Figmaban. */
/* A foto kerete. Az arany keret ES a lekerekites ITT van, nem a kepen –
   igy a nagyitas (lentebb) csak a fotot nagyitja, a keretet nem. */
.kapcsolat-kep-keret {
  width: 470px;
  max-width: 100%;
  aspect-ratio: 470 / 580;
  overflow: hidden;                 /* a kilogo, nagyitott kepreszt levagja */
  border: 10px solid var(--gold);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
/* Maga a foto. A nagyitas merteke a --kapcsolat-zoom:
   1 = eredeti, 1.15 = 15%-kal nagyitva. A --kapcsolat-pont azt allitja,
   MIRE nagyitson (pl. "center top", ha a fejre kell kozeliteni).
   Ugyanaz a minta, mint a hero kepnel (.hero-img). */
.kapcsolat-kep {
  --kapcsolat-zoom: 1.15;
  --kapcsolat-pont: center center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--kapcsolat-zoom));
  transform-origin: var(--kapcsolat-pont);
}

/* A feher kartya. */
.kapcsolat-kartya {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 551px;
  max-width: 100%;
  padding: 36px 32px;
  border: 1px solid rgba(231, 172, 66, 0.15);
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.08);
}
.kapcsolat-kartya-cim {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.72px;
  color: var(--navy);
}
@media (min-width: 768px) { .kapcsolat-kartya-cim { font-size: 36px; } }

/* Egy elerhetoseg-sor: kerek ikon + cimke/ertek. */
.kapcsolat-sor {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.kapcsolat-ikon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(231, 172, 66, 0.15);
  border-radius: 999px;
  background-color: var(--shell);
  color: var(--gold);          /* az SVG fill="currentColor" */
}
.kapcsolat-ikon svg { width: 20px; height: 20px; }
.kapcsolat-cimke {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.36px;
  color: var(--gold);
}
.kapcsolat-ertek {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
}
a.kapcsolat-ertek:hover { color: var(--brown); text-decoration: underline; }
.kapcsolat-valaszto { width: 100%; height: 1px; background-color: rgba(231, 172, 66, 0.15); }

/* LinkedIn gomb – csak akkor latszik, ha van URL (lasd content.py). */
.linkedin-gomb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 48px;
  border: 1px solid #e2e0dc;
  border-radius: 24px;
  color: #0a66c2;                /* LinkedIn markaszin */
  transition: border-color .2s ease, background-color .2s ease;
}
.linkedin-gomb:hover { border-color: var(--gold); background-color: var(--shell); }
.linkedin-gomb svg { width: 32px; height: 32px; }

/* --- Szekcio-fatylak ---------------------------------------------------
   Ezek szandekosan sima CSS-ben vannak (nem Tailwind osztalykent), hogy
   pontosan annyira legyenek erosek, amennyire a Figma terv eloirja,
   fuggetlenul attol, hogyan toltodik be a Tailwind.
   Az atlatszatlansagot az rgba() utolso szama allitja (0.95 = 95%). */

/* "Hogyan dolgozhatunk együtt?" – 95%-os sotetkek */
.hogyan-overlay { background-color: rgba(27, 42, 68, 0.95); }


/* Bemutatkozás kártya háttere: fehérből az oldal háttérszínébe */
.bemutatkozas-bg {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--shell) 100%);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
}

/* Arany színátmenetes szöveg ("Bemutatkozás" címsor) */
.text-gradient-gold {
  background-image: linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Arany aláhúzás a kiemelt szó alatt ("Miben tudok segíteni?")
   A szöveg barna marad – így olvasható (9.39-es kontraszt az arany 2.02
   helyett) –, a kiemelést az arany vonal adja. */
/* Kiemelt szo a szekciocimekben ("Miben tudok SEGÍTENI?", "Mire SZÁMÍTHAT?").
   Jelenleg SZINKIEMELES: a szo aranyszinu lesz.

   Ha megis arany ALAHUZAS kell (a szo marad barna, alatta arany vonal),
   kommenteld ki ezt a szabalyt, es vedd ki a kommentbol az alatta levot. */
.accent-gold {
  color: var(--gold);
}

/* Alternativa – arany alahuzas:
.accent-gold {
  color: inherit;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 3px;
  padding-bottom: 2px;
}
*/

/* Felső menü hivatkozásai */
.nav-link {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--gold); }


/* --------------------------------------------------------------------------
   GOMBOK
   -------------------------------------------------------------------------- */

/* Arany, kitöltött gomb
   Egyszínű arany, színátmenet nélkül – letisztultabb, "komolyabb" hatás.
   A barna felirat az egyszínű aranyon 4.64-es kontrasztot ad, ami megfelel
   a WCAG AA követelménynek. */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background-color: var(--gold);
  background-image: none;
  box-shadow: 0 1px 2px rgba(91, 66, 23, 0.12);
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.32px;
  color: var(--brown);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-gold:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}
.btn-gold:active { background-color: var(--gold); }

/* Áttetsző, fehér keretes gomb (hero – "Kapcsolatfelvétel") */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: transparent;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.32px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(0); }


/* --------------------------------------------------------------------------
   ISMÉTLŐDŐ ELEMEK
   -------------------------------------------------------------------------- */

/* 40 px-es arany elválasztó vonal a címsorok alatt */
.rule {
  display: block;
  width: 40px;
  height: 0;
  border-top: 1px solid var(--gold);
  margin: 4px 0;
}

/* --- Jogterület kártya ---
   Balra igazított tartalom (nem középre), keret árnyék nélkül – ez adja a
   letisztultabb, kevésbé "sablonos" hatást. */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 24px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background-color: #ffffff;
  height: 100%;
  transition: border-color .2s ease;
}
.service-card:hover { border-color: var(--gold); }
.service-title {
  width: 100%;
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--navy);
}
/* "HR támogatás", "Üzleti jog", ... – a kártyacím alatti alcím.
   Szürke (grey/500), nem sötétkék: így a kártyacím marad a hangsúlyos elem. */
.service-lead {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.service-text {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--ink);
}

/* --- "Hogyan dolgozhatunk együtt?" kártya --- */
/* Ezek a kártyák a fotó fölött ülnek, ezért MEGTARTJÁK az árnyékot:
   az választja el őket a háttértől. A tartalmuk szándékosan KÖZÉPRE
   igazított maradt (a többi kártya balra rendez). */
.highlight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 20px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
  height: 100%;
}
.highlight-title {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.24px;
  color: var(--brown);
}
.highlight-text {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--ink);
}

/* --- Értékeim elem --- */
.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 278px;
  max-width: 100%;
}
.value-title {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.4px;
  color: #4a5a7a;
}
.value-text {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.32px;
  color: var(--brown);
}


/* --- Lábléc elérhetőségek: EGY sorban, ikonokkal ---------------------
   A korabbi cimke+ertek (contact-label / contact-value) parok helyett egy
   tomor sor: ikon + ertek. Igy a lablec sokkal alacsonyabb. Szuk kijelzon
   a flex-wrap tordeli oket egymas ala. */
.footer-elerhetosegek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* fuggoleges hezag (tordeleskor) | vizszintes hezag a tetelek kozott */
  gap: 10px 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--cream);
}
.footer-elerhetosegek > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: color .2s ease;
}
.footer-elerhetosegek svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}
.footer-elerhetosegek a:hover { color: var(--gold); }


/* --------------------------------------------------------------------------
   VÍZSZINTESEN GÖRGETHETŐ KÁRTYASOROK
   -------------------------------------------------------------------------- */
.carousel-track {
  display: flex;
  align-items: stretch;
  justify-content: safe center;
  gap: 24px;
  flex: 1 1 0%;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* A belso margo azert ekkora, hogy a KOZEPEN allo, kisse felnagyitott
     kartya (lasd .kartya-kozepen) ne vagodjon le: az `overflow-x: auto`
     miatt a fuggoleges ES a vizszintes tullogas is levagodik.
     A VIZSZINTES 14px azert kell, mert a nagyitas a kartya kozepebol nő ki,
     igy az ELSO es UTOLSO kartya ~2,5%-kal tullog - a gorgetes viszont nem
     tud 0 ala, illetve a vegen tul menni, tehat ott levagodna. */
  /* A 10%-os nagyitas a kartya KOZEPEBOL no ki, tehat minden oldalon
     a kartya meretenek 5%-aval log tul. Egy ~450px magas / ~365px szeles
     kartyanal ez ~22px fuggolegesen es ~18px vizszintesen. */
  padding: 26px 20px 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: center; }

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--gold);
  background: transparent;
  transition: background-color .2s ease, opacity .2s ease;
}
.carousel-arrow:hover { background-color: rgba(231, 172, 66, 0.12); }
.carousel-arrow[disabled] { opacity: .3; cursor: default; }

/* Csomag kártya – Figma: 350.667 × 576 */
.package-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 351px;
  max-width: 85vw;
  /* NINCS fix magassag. A .carousel-track "align-items: stretch"-e miatt
     minden kartya a LEGMAGASABB tartalmahoz igazodik, igy egyforma magasak
     maradnak, de nincs alattuk ures hely. (A Figma 576px-et irt elo, de az
     a rovidebb minta-szoveghez keszult - a valodi szoveggel 170-240px
     uresen maradt minden kartya aljan.) */
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background-color: var(--cream);
}
.package-title {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--brown);
}
.package-text {
  width: 100%;
  text-align: justify;
  /* Elvalasztas: sorkizart szoveg keskeny hasabban csunya szokozlyukakat
     csinal, az elvalasztas ezt megszunteti. A magyar szabalyok azert
     mukodnek, mert az <html lang="hu">. Ha nem kell, torold ezt a ket sort. */
  -webkit-hyphens: auto;
  hyphens: auto;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   VÁLTOZATOS TÉRKÖZÖK (nagy képernyőn)
   Több levegő a szekcióhatárokon, mint a kártyákon belül. Ettől lesz
   "drágább" a hatás. Csak 1280 px felett, kisebb kijelzőn a levegő pazarlás.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #szakteruleteim { padding-top: 120px; padding-bottom: 120px; }
  #ertekeim       { padding-top: 120px; padding-bottom: 120px; }
}


/* --------------------------------------------------------------------------
   FINOM ANIMÁCIÓ: szekciók halványan beúsznak görgetéskor
   (kikapcsolható: töröld ezt a blokkot és az app.js 3. szakaszát)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Oldalról beúszás – a Bemutatkozás szövege balról, a fotó jobbról.
   A távolságot a translateX értéke állítja (most 48px / -48px).
   A .bemutatkozas-bg kártyán van overflow:hidden, ezért a mozgás
   nem okoz vízszintes görgetősávot. */
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }

.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Betöltéskor induló beúszás – a fejléc és a hero szöveg használja.
   Itt SZÁNDÉKOSAN tiszta CSS-animáció van, nem JavaScript: ezek az oldal
   legfontosabb elemei (főcím, menü), ezért akkor is látszaniuk kell, ha a
   JS nem fut le. A távolságot a translateX, az időt az .8s/.9s állítja. */
@keyframes float-in-left {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}
@keyframes float-in-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}
@keyframes float-in-top {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: none; }
}
@keyframes float-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Hero szöveg – balról, egyben */
.hero-in { animation: float-in-left .9s ease both; }

/* Fejléc: a logó ÉS a menü (kis képernyőn a hamburger) egyaránt FELÜLRŐL
   ereszkedik le. A távolságot a float-in-top translateY értéke állítja. */
.header-in { animation: float-in-top .8s ease both; }

/* Jogterület aloldalak hero-címe – középre igazított, ezért alulról úszik fel */
.jog-hero-in { animation: float-in-up .9s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-left,
  .reveal-right { opacity: 1; transform: none; transition: none; }
  .hero-in,
  .header-in,
  .jog-hero-in { animation: none; }
  .carousel-track { scroll-behavior: auto; }
}


/* --- Jogi aloldalak tablazata (Impresszum, Suti szabalyzat) ------------
   A keret azert kell, hogy szuk kijelzon a tablazat OLDALRA gorgetheto
   legyen, ne pedig szetfeszitse az oldalt. */
.jogi-tabla-keret { width: 100%; overflow-x: auto; margin: 6px 0 2px; }
.jogi-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}
.jogi-tabla th {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 2px solid rgba(231, 172, 66, 0.35);
  padding: 8px 14px 8px 0;
  white-space: nowrap;
}
.jogi-tabla td {
  border-bottom: 1px solid rgba(27, 42, 68, 0.10);
  padding: 10px 14px 10px 0;
  vertical-align: top;
}
.jogi-tabla tr:last-child td { border-bottom: none; }
.jogi-tabla-cimke { font-weight: 600; color: var(--slate); white-space: nowrap; }
.jogi-tabla a { color: var(--gold); text-decoration: underline; }
.jogi-tabla code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  background: rgba(27, 42, 68, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

/* A jogi oldalakon a torzsszoveg linkjei legyenek lathatoak. */
.jog-body a { color: var(--gold); text-decoration: underline; }
.jog-body a:hover { color: var(--brown); }


/* --- Kapcsolatfelvetel szekcio hattere ---------------------------------
   Hatterkep + majdnem atlatszatlan feher reteg, hogy a kep csak finoman
   sejljen at. Ha erosebben latszodjon, csokkentsd a 0.95-ot (pl. 0.88).
   Ha egyaltalan ne latszodjon, allitsd 1-re. */
.kapcsolat-overlay { background-color: rgba(255, 255, 255, 0.95); }


/* --- RAGADOS FEJLEC -----------------------------------------------------
   A logo es a menu mindig a kepernyo tetejen marad. Azert `fixed` es nem
   `sticky`: a hero konteneren `overflow-hidden` van (a nagyitott hatterkep
   levagasa miatt), az pedig ELRONTJA a sticky-t. Emiatt a fejlec a <body>
   kozvetlen gyereke lett, a heroban pedig `pt-[100px]` tartja a helyet. */
.fejlec {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Gorgetes kozben hatteret kap. Enelkul a FEHER menuszoveg olvashatatlan
   lenne a vilagos tartalom folott. A JS teszi ra (app.js), 40px gorgetes
   utan. A hero tetejen szandekosan atlatszo, hogy a kep ervenyesuljon. */
.fejlec-tapad {
  background-color: rgba(27, 42, 68, 0.95);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}


/* --- Legordulo almenu a fomenuben (Jogteruletek) ------------------------
   Egeraatvitelre ES billentyuzetes fokuszra is kinyilik (:focus-within),
   igy Tab-bal is elerheto. NINCS JavaScript mogotte.
   A .nav-legordulo a fejlec teljes magassagat elfoglalja, hogy a mutato
   utkozben (a menupont es a lenyilo doboz kozott) ne vesszen el a hover. */
.nav-legordulo {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.nav-legordulo > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.nav-legordulo:hover .nav-chevron,
.nav-legordulo:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-almenu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 268px;
  padding: 8px;
  border-radius: 16px;
  background-color: var(--cream);
  border: 1px solid var(--sand);
  box-shadow: 0 18px 40px rgba(27, 42, 68, 0.18);
  /* Rejtve, de a DOM-ban marad, hogy a keresok es a felolvasok lassak. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.nav-legordulo:hover .nav-almenu,
.nav-legordulo:focus-within .nav-almenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-almenu a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--brown);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav-almenu a:hover,
.nav-almenu a:focus-visible { background-color: rgba(231, 172, 66, 0.16); }
.nav-almenu-alcim {
  display: block;
  margin-top: 2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--ink);
}

/* Mobilon (hamburger menu) nincs lenyilas: a jogteruletek egyszeruen
   behuzva, a "Jogterületek" pont ALATT jelennek meg. */
.mobil-almenu {
  margin: 10px 0 2px 0;
  padding-left: 14px;
  border-left: 2px solid rgba(231, 172, 66, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}
.mobil-almenu a { color: var(--ink); text-decoration: none; }
.mobil-almenu a:hover { color: var(--gold); }


/* --- A karusszelben KOZEPEN allo kartya kiemelese -----------------------
   A JS (app.js) teszi ra a .kartya-kozepen osztalyt arra a kartyara, amelyik
   eppen legkozelebb van a sav kozepehez.

   FIGYELEM: itt a kulonallo `scale` tulajdonsagot hasznaljuk, NEM a
   `transform: scale()`-t. A beuszo animacio (.reveal) ugyanis a `transform`-ot
   hasznalja, es a ketto felulirna egymast. A `scale` kulon tulajdonsag, ezert
   a ketto bekesen megfer egymas mellett.

   A nagyitas merteke alabb allithato (1 = nincs nagyitas). */
.package-card {
  scale: 1;
  transition: scale .3s ease, box-shadow .3s ease;
}
.kartya-kozepen {
  scale: 1.10;
  position: relative;
  z-index: 1;                       /* az arnyeka a szomszedok FOLE keruljon */
  box-shadow: 0 14px 34px rgba(27, 42, 68, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .package-card { transition: none; }
}


/* --- Karusszel MOBILON -------------------------------------------------
   PROBLEMA volt: a sor felepitese [nyil 44px][sav][nyil 44px]. 390px-es
   kepernyon a ket nyil + hezagok ~104px-et elvettek, igy a savnak csak 214px
   maradt, a kartya viszont 85vw = 331px szeles volt -> MINDKET oldalan
   levagodott, olvashatatlanul.

   Megoldas 768px alatt:
   1. a nyilakat elrejtjuk - erintokepernyon ugyis ujjal huzva gorgetheto
      (a sav scroll-snap-es), igy a sav a teljes szelesseget megkapja;
   2. a kartya szelessege a SAVHOZ igazodik (%), nem a kepernyohoz (vw).
      A 86% azert kell, hogy a kovetkezo kartya szele kilatsszon - ez jelzi
      a felhasznalonak, hogy oldalra lehet huzni. */
@media (max-width: 767px) {
  .carousel-arrow { display: none; }

  /* MOBILON NINCS NAGYITAS. Egyszerre ugyis csak EGY kartya latszik, tehat
     nincs mihez kepest kiemelni - viszont a nagyitas itt kart okozna:
     a keskeny kepernyon a szoveg sokkal tobb sorba tordel, a kartya 800-900px
     magas lesz, es a 10%-os nagyitas fuggolegesen 40-45px-szel logna tul,
     amit az `overflow-x: auto` levagna. (Lemerve: 320px-en 13px felul, 9px
     alul vagodott le.) A nagyitas 768px felett ervenyes. */
  .kartya-kozepen { scale: 1; }

  /* A nagyitas hianyaban a savnak nem kell szeles oldalso margo, igy a
     kartya szelesebb lehet. */
  .carousel-track { padding: 16px 8px 24px; }

  .package-card {
    /* A savhoz igazodik, nem a kepernyohoz (korabban 85vw volt, ami
       szelesebb volt a savnal, ezert levagodott). */
    width: 92%;
    max-width: none;
    /* Kisebb belso margo: mobilon minden pixel szamit a szovegnek. */
    padding: 18px;
  }
}


/* --- "ÚJ" cimke a csomagkartya cime mellett ----------------------------
   A content.py-ban a csomag harmadik eleme kapcsolja be (True/False). */
.uj-cimke {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--gold);
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.8px;
  line-height: 1.5;
  white-space: nowrap;
  /* a cim betumeretetol fuggetlen maradjon */
  text-transform: none;
}

/* ==========================================================================
   NYITOANIMACIO (intro)
   --------------------------------------------------------------------------
   Sotetkek teljes kepernyos reteg, amin az arany logo SZAKASZONKENT
   kirajzolodik, majd a reteg elhalvanyul es felfedi az oldalt.

   HOGYAN? A logo PNG - vektoros forras nincs, tehat igazi vonalrajz
   (stroke-dashoffset) nem lehetseges. Ehelyett a `tools/split-logo.py`
   szetszedte a kepet a HAROM kulonallo alakzatara (kulso keret + az "S" felso
   es also ive), mindegyiket UGYANAKKORA vaszonra, igy egymasra helyezve
   pontosan illeszkednek. Ezutan mindharmat kulon fedjuk fel:
     1. keret  -> korbeforgo maszk (conic-gradient), mintha korberajzolnank
     2-3. ivek -> fentrol lefele halado feltakaras, mint egy tollvonas

   IDOZITES: lasd a lenti animation-delay ertekeket. A teljes rajzolas ~1,25 s (mindharom szakasz egyszerre);
   az app.js HOSSZ_MS erteke ennel nagyobb legyen.
   ========================================================================== */

/* A maszk szoget animalni csak regisztralt tulajdonsaggal lehet. Ha a bongeszo
   nem ismeri a @property-t, a keret egyben jelenik meg - az is elfogadhato. */
@property --intro-szog {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy);
  transition: opacity .55s ease;
}

/* A logo merete EGY helyen allithato. A clamp: mobilon sem lesz tul nagy,
   nagy kepernyon sem tul kicsi. */
/* CSAK A JEL, nevjel nelkul (a megrendelo kerese).
   Ha a szoveg megis kell: a markupba vissza kell tenni az
   <img class="intro-szoveg"> sort, ide pedig egy magassag-szabalyt es az
   .intro-ra egy gap-et. A nagy felbontasu nevjel megvan
   (assets/img/logo-wordmark-large.png, a tools/build-wordmark.py allitja elo). */
.intro-logo {
  position: relative;
  width: clamp(128px, 22vw, 187px);
  /* A forraskep aranya (497x640). Ha a logo cserelodik, a
     tools/split-logo.py kiirja az uj erteket. */
  aspect-ratio: 497 / 640;
}

.intro-resz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* MINDHAROM SZAKASZ EGYSZERRE indul es egyszerre is er veget (azonos
   idotartam, nincs keslelteteés) - a megrendelo igy kerte. Ha megis
   egymas utan kellene, adj animation-delay-t a 2. es 3. resznek. */

/* 1) KULSO KERET - korberajzolas felulrol indulva */
.intro-resz-1 {
  --intro-szog: 0deg;
  -webkit-mask-image: conic-gradient(from -90deg, #000 var(--intro-szog), transparent 0);
          mask-image: conic-gradient(from -90deg, #000 var(--intro-szog), transparent 0);
  animation: intro-keret 1.25s ease-in-out forwards;
}

/* 2-3) AZ "S" KET IVE - fentrol lefele feltakarva, mint egy tollvonas.
   A clip-path-hoz nem kell @property, minden mai bongeszo tudja.

   FONTOS: a vagas NEM a teljes vaszonmagassagon fut vegig, hanem PONTOSAN
   az adott iv savjaban! Korabban 100%-tol 0%-ig ment, de a felso iv csak a
   vaszon 17-50%-a kozott van - igy a tenyleges felfedes az idotartam
   harmadaban lezajlott, a tobbi ido alatt nem tortent semmi. Ettol tuntek
   az ivek kapkodonak a keret mellett.
   A szazalekok a kep tenyleges meretebol szamolva (497x640):
     felso iv -> ALSO vagas 83,0% -> 50,0%  (fentrol lefele)
     also iv  -> FELSO vagas 82,5% -> 49,5%  (alulrol felfele)
   Ezeket a tools/split-logo.py szamolja ki es irja ki futaskor.                        */
.intro-resz-2,
.intro-resz-3 {
  animation-duration: 1.25s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
/* A felso iv FENTROL lefele, az also iv ALULROL felfele rajzolodik ki -
   igy a ket vonas egymas fele halad, ami dinamikusabb hatast kelt.
   Ezert a felso iv az ALSO vagast (inset 3. erteke), az also iv pedig a
   FELSO vagast (inset 1. erteke) animalja. */
.intro-resz-2 {
  clip-path: inset(0 0 83.0% 0);      /* felulrol nyilik */
  animation-name: intro-iv-felso;
}
.intro-resz-3 {
  clip-path: inset(82.5% 0 0 0);      /* alulrol nyilik */
  animation-name: intro-iv-also;
}

@keyframes intro-keret    { to { --intro-szog: 360deg; } }
@keyframes intro-iv-felso { to { clip-path: inset(0 0 50.0% 0); } }
@keyframes intro-iv-also  { to { clip-path: inset(49.5% 0 0 0); } }

/* A JS ezt teszi ra a vegen: elhalvanyul, aztan kikerul a DOM-bol. */
.intro.intro-kesz { opacity: 0; pointer-events: none; }

/* Amig az intro lathato, ne lehessen gorgetni. */
html.intro-aktiv, html.intro-aktiv body { overflow: hidden; }

/* A hero es a fejlec beuszasa VARJON meg, amig az intro tart - kulonben
   mar lefutna a takaras mogott, es a felfedeskor statikus kepet latnank. */
html.intro-aktiv .hero-in,
html.intro-aktiv .header-in { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}