/* ==========================================================================
   Gredex – új weboldal prototípus
   A designrendszer a meglévő, bevált Lovable-landolókból kinyerve (2026.07.31)
   ========================================================================== */

:root {
  /* Színek – a landolók CSS-változóiból */
  --bg:            #ffffff;
  --fg:            #262626;
  --cta:           #d41111;
  --cta-hover:     #b30f0f;
  --accent:        #ec1313;
  --secondary:     #efedea;
  --muted:         #ededed;
  --muted-fg:      #666666;
  --section-grey:  #2b2b2b;
  --border:        #e0e0e0;

  --radius:        0.75rem;
  --radius-sm:     0.5rem;

  --font-heading: "Playfair Display", Georgia, serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap:  1400px;   /* a landolon mert ertek (2026-08-04) */
  --gap:   1.5rem;
  --sect:  5rem;

  /* ---------- Szöveg fotón ----------
     Fehér szöveg fotón csak akkor olvasható, ha alatta a kép biztosan sötét.
     Korábban minden helyen más gradiens volt, és a világos fotóknál (például
     a redőnykártya medencés képénél) a cím beleolvadt a háttérbe.

     Két dolog kell hozzá, mert egyik sem elég önmagában:
     1. Lefelé erősödő sötétítés. Sok lépcsőben, mert két stoppal a gradiens
        pereme látható sávot húz a képre.
     2. Finom szövegárnyék. Ez azt az esetet fogja meg, amikor egy betű mögé
        épp egy csillanás vagy világos részlet esik.

     A lépcsők nem érzésre vannak beállítva, de az első változat túl sötét volt:
     a legfényesebb PIXELRE terveztem, és a gradienst a kártya tetejéig vittem.
     Emiatt a fotókból alig látszott valami.

     Ezért megmértem a képeket ott, ahol a szöveg van (vászonra rajzolva,
     ugyanabban a kivágásban, mint a kártyán). Az eredmény:
       átlagos világosság a szöveg sávjában:   0,03 - 0,43
       legfényesebb pixel ugyanott:            0,51 - 1,00
       ehhez szükséges sötétítés:              0,37 - 0,54
       amit az első változat alkalmazott:      0,62 - 0,84

     A mostani görbe az ÁTLAGRA méretezett, tartalékkal, nem a legfényesebb
     pixelre. Az egy-két csillanást a szövegárnyék fogja meg, ami a betűk
     körül dolgozik, tehát nem tompítja a képet.

     A lépcsők PIXELBEN vannak, nem százalékban. Ez a második javítás: a
     százalékos változat elbukott a „Nem használható a teraszom" kártyán,
     4,0-es kontraszttal. Az ok, hogy szűkebb nézetben a cím és a leírás is
     két sorba tördel, tehát a szövegblokk feljebb kezdődik, a százalékos
     gradiens viszont erről nem tud. A szövegblokk magassága ellenben
     pixelben nagyjából állandó: cím és leírás plusz a belső margó, körülbelül
     120-140 px. Pixelalapon tehát mindig ott van a sötétítés, ahol a szöveg,
     a kártya magasságától függetlenül. */
  --scrim-alul: linear-gradient(to top,
      rgba(0,0,0,.88) 0px,   rgba(0,0,0,.76) 35px,  rgba(0,0,0,.62) 70px,
      rgba(0,0,0,.45) 105px, rgba(0,0,0,.26) 140px, rgba(0,0,0,.10) 175px,
      rgba(0,0,0,0)   210px);
  /* Szoros haló a betűk körül. Ez váltja ki a nehéz sötétítést: helyben ad
     kontrasztot, a fotó többi részét viszont nem érinti. */
  --szoveg-arnyek: 0 1px 2px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.65);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1; }   /* landolo: 60px/60px */
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); line-height: 1.11; }  /* landolo: 36px/40px */
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }
a  { color: inherit; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
/* Keskenyebb szovegoszlop hosszabb prozahoz (Rolunk-lapok) */
.wrap.narrow { max-width: 48rem; }
.section { padding-block: var(--sect); }
.section--grey  { background: var(--secondary); }
.section--dark  { background: var(--section-grey); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.lead { font-size: 1.1rem; color: var(--muted-fg); max-width: 62ch; }
.section--dark .lead { color: rgba(255,255,255,.9); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  /* A landolo gombja: 18px, 600 vastagsag, 10px lekerekites, 24/40 belso margo.
     A bongeszoben mert ertekek, nem erzesre allitva. */
  font-family: var(--font-body); font-weight: 600; font-size: 1.125rem;
  padding: 1.5rem 2.5rem; border-radius: 10px; line-height: 1.55;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.btn--cta     { background: var(--cta); color: #fff; }
.btn--cta:hover { background: var(--cta-hover); }
.btn--ghost   { background: transparent; color: var(--fg); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--light   { background: #fff; color: var(--cta); }
.btn--sm      { padding: .6rem 1.1rem; font-size: .9rem; line-height: 1.4; }

/* ---------- Fejléc ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* A hézag szűkebb az eredetinél: a logó, a menü és a gombok együtt 1200 px-be
   kell hogy beférjenek, és a 20 px-es hézagok ebből 40-et vittek el. */
/* A fejlec sava szelesebb, mint a laptorzs. Muszaj: a tizelemu menu, a
   telefonszam es a ket gomb egyutt 1551 px-t ker, a torzs viszont 1400.
   A „Belepes partnereknek" cimke ebbol 205 px, a telefonszam 137. Igy
   1600 px-tol minden kifer; ez alatt a telefonszam esik ki a fejlecbol, de
   nem a lapról, mert a lablecben es a mobilsavon ott marad. 1400 alatt
   pedig ugyis a hamburger menu jon. */
.header .wrap { max-width: 1560px; }
@media (max-width: 1600px) { .header .tel-link { display: none; } }

/* 2026-08-06, Emese: a partnerlapon (es minden lapon) 1400 px alatt eltunt a
   vizszintes menu, csak a hamburger maradt, es egy 1280-1366 px-es ablakban ez
   ugy hat, mintha nem is lenne menusor. Ket lepcsot iktatunk be a hamburger
   elott, mert a helyet a ket leghosszabb elem viszi el:
     1500 px alatt a „Belepes partnereknek" cimke rovidul „Belepes"-re (-115 px)
     ugyanitt szukebb menuhezag, kisebb logo, szukebb gombmargo (-78 px)
   Playwright-tal merve a fejlec tartalma igy 1239 px (index) es 1231 px
   (partnerek), tehat 1300 px-es ablakban meg kifer vizszintes gordules nelkul.
   A hamburger torespontja ezert 1400-rol 1300-ra megy. */
@media (max-width: 1500px) {
  /* A kesobbi .header__actions .btn .long2 { display: inline } ugyanilyen erosen
     celoz, es sorrendben utana all, ezert itt eggyel erosebb szelektor kell. */
  .header .header__actions .btn .long2 { display: none; }
  .header .nav { gap: .5rem; }
  .header .nav a { font-size: .78rem; }
  .header .logo img { height: 42px; }
  .header__actions .btn--sm { padding-inline: .6rem; }
}

/* ---------- SZAKASZNAV: lapon beluli horgonysav a fejlec alatt ----------
   Miert kell sajat elem? A fejleci .nav tartalmat a nav.js MINDEN lapon
   felulirja a kozponti menuvel, tehat lapon beluli horgonyokat nem lehet
   bele irni: a partnerlap eredeti, kezzel irt szakaszmenuje pontosan ezert
   tunt el. Ez a sav kulon osztaly (.szakasznav), a nav.js nem nyul hozza.
   Mobilon vizszintesen gordul (a hat cimke nem fer ki egy sorba), ezert nem
   tornek sorba es nem tolik le a herot. */
.szakasznav {
  position: sticky; top: 74px; z-index: 45;
  background: var(--secondary); border-bottom: 1px solid var(--border);
}
.szakasznav__inner {
  display: flex; gap: .3rem; align-items: center;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-block: .45rem;
}
.szakasznav__inner::-webkit-scrollbar { display: none; }
.szakasznav a {
  flex: 0 0 auto; padding: .45rem .85rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--muted-fg); white-space: nowrap;
}
.szakasznav a:hover { color: var(--fg); background: rgba(0,0,0,.06); }
.szakasznav a[aria-current="true"] { background: var(--cta); color: #fff; }
.szakasznav__cta { margin-left: auto; }
.szakasznav__cta a { background: var(--cta); color: #fff; }
.szakasznav__cta a:hover { background: var(--cta); color: #fff; filter: brightness(.92); }
/* Nyitott hamburger menu alatt a ket sav egymasra csuszna */
body.nav-open .szakasznav { display: none; }
@media (max-width: 900px) {
  .szakasznav__inner { padding-inline: 1rem; }
  /* Mobilon a CTA nem tapad jobbra: a gordulo sav vegen all, kulonben
     kiszoritja a tobbi cimket a lathato savbol. */
  .szakasznav__cta { margin-left: .3rem; }
}
/* A partnerlap melykek temajan a vilagos szurke sav nem mukodne */
body[data-cat="partner"] .szakasznav { background: #0c1524; border-bottom-color: #2d4260; }
body[data-cat="partner"] .szakasznav a { color: #bccadb; }
body[data-cat="partner"] .szakasznav a:hover { color: #fff; background: #1b2b42; }
.header__bar { display: flex; align-items: center; gap: .6rem; min-height: 74px; }
/* Logó: a Gredex saját arculati logója. A magasságot a szlogen olvashatósága szabja meg:
   a kép alsó harmada a „Grédics innovatív árnyékolók" sor, ami 40px alatt már olvashatatlan. */
.logo { display: block; flex-shrink: 0; line-height: 0; text-decoration: none; }
.logo img { height: 46px; width: auto; display: block; }
/* Sötét háttéren a szürke „EX" és a szlogen elveszne, ezért fehér sziluett. */
.footer .logo img { height: 40px; filter: brightness(0) invert(1); }
@media (max-width: 560px) { .logo img { height: 38px; } }
.nav { display: flex; gap: .66rem; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; font-weight: 500; font-size: .8rem; color: var(--muted-fg); white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--fg); }
.header__actions { display: flex; gap: .3rem; align-items: center; flex-shrink: 0; }
.header__actions .btn--sm { padding-inline: .7rem; }
/* „Belépés partnereknek" kiirva 17 px-szel tobbet kert, mint amennyi a
   laptorzsben (1400 px) volt. A hezagokbol es a gombok belso margojabol
   annyit nyertunk vissza, hogy 1400-nal eppen kifer. Halon: 1440 alatt a
   fejlec telefonszama kiesik, igy a szukebb savban sincs vizszintes gordules.
   A telefonszam nem tunik el a lapról, a lablecben es a mobilsavon ott van. */
/* A partner-belépés vizuálisan elkülönül a lakossági navigációtól */
.nav__partner { padding-left: .66rem; border-left: 1px solid var(--border); }
.tel-link { font-weight: 700; text-decoration: none; white-space: nowrap; font-size: .9rem; }
.burger { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; }

/* ---------- Lenyíló menü ---------- */
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: .25rem; }
.caret { font-size: .7em; opacity: .6; }

.submenu {
  position: absolute; top: 100%; left: -1rem; z-index: 60;
  padding-top: .6rem; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.submenu__inner {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.13);
  padding: .5rem; min-width: 268px; display: grid; gap: 1px;
}
.submenu a {
  display: flex; align-items: center; gap: .5rem; justify-content: space-between;
  padding: .55rem .8rem; border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--fg); white-space: nowrap;
}
.submenu__fo {
  font-weight: 700; border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: .2rem;
}
.submenu a:hover { background: var(--secondary); color: var(--cta); }
.submenu a em {
  font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cta);
  border: 1px solid var(--cta); border-radius: 999px; padding: 0 .4em;
}
.nav__item.has-kids:hover .submenu,
.nav__item.has-kids:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }

/* ---------- A fejléc sora sosem csordulhat túl ----------
   A fejléc a laptörzs szélességét követi, tehát a logónak, a menünek és a
   gomboknak együtt 1200 px-be kell beférnie. Megmérve:
     logó 155  +  menü 815  +  gombok 237...461  =  1207...1431
   Vagyis kilenc menüponttal a teljes betűmérettel NEM fér ki.

   Korábban ezt lépcsőzetes töréspontok kezelték, de mind „max-width" volt,
   tehát csak 1340 px ALATT húzták össze a menüt. 1340 fölött semmi nem
   akadályozta a túlcsordulást: 1700 px-en a lap vízszintesen gördült, és az
   Árajánlatkérés gomb kifutott a képernyőről. Épp a nagy monitorokon, tehát
   ott, ahol az ügyfél nézni fogja.

   Ezért a tömörebb méret nem töréspont, hanem alapállapot.

   A számítás, amivel a méretek beállnak (mért értékekből):
     belső margó 40 + logó 155 + hézag 14 + menü 720 + hézag 14 + gombok 239
     = 1182,  vagyis 18 px tartalék az 1200-hoz.
   A logót nem lehet kisebbre venni: 40 px alatt a szlogen olvashatatlan. */
.nav { gap: .7rem; }
.nav a { font-size: .86rem; }
.nav__partner { padding-left: .7rem; }

/* A telefonszám a láblécben, a ragadós mobilsávban és mind a három
   bemutatóterem kártyáján is ott van. A fejlécben nincs rá hely: 461 px-re
   nőne tőle a gombsáv, ami önmagában kiveri a menüt. */

/* „Belépés partnereknek" -> „Belépés". A partneroldalra a menüből is el lehet
   jutni, a gomb szerepe így is világos. */
/* A gomb korabban csak annyit mondott: „Belepes". Ez a lakossagi latogatonak
   felrevezeto, mert azt hiheti, neki is van fiokja. Most „Partnerbelepes".
   Miert nem „Belepes partnereknek", ahogy elsore kertuk? Mert nem fer be:
   a tizelemu menuvel a fejlecnek 1451 px kellene, a laptorzs viszont 1400.
   Az egybeirt valtozat 57 px-t sporol, es ugyanugy egyertelmu. A menuben
   amugy is ott a „Partnereknek" pont, tehat a felfedezes utja megvan. */
.header__actions .btn .long2 { display: inline; }
/* A cimke egy flex-gyerek, hogy a .btn hezaga ne vagja ket szora. */
.header__actions .btn .belepes { white-space: nowrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  color: #fff; overflow: hidden;
  background: #333 center/cover no-repeat;
}
/* A hős szövege balra, függőlegesen középre kerül, ezért itt oldalirányú
   sötétítés kell, nem alulról felfelé erősödő. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.55) 45%,
                                     rgba(0,0,0,.34) 75%, rgba(0,0,0,.18) 100%);
}
/* A szöveg korábban a lap közepére csúszott, pont a sötétítés legvilágosabb
   sávjába, és ott olvashatatlan volt. Két dolog együtt okozta:

   1. A max-width: 720px magára a .wrap elemre került, a .wrap pedig
      automatikus margóval középre igazít.
   2. A .hero flex-tároló, a szövegblokk tehát flex-elem. Az ilyen elem a
      TARTALMÁHOZ méretezi magát, nem a max-width-hez, ezért 760 px széles
      lett, és az automatikus margó ezt a 760-at tette középre.

   A width: 100% kell ahhoz, hogy a flex-elem kitöltse a sávot; onnantól a
   max-width a szokott laptörzs-szélességre fogja, tehát a szöveg a lap többi
   szakaszával egy vonalban kezdődik, a bal oldali sötét részen. */
.hero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap); padding-block: 4rem;
}
.hero__inner > * { max-width: 720px; }
.hero h1 { color: #fff; text-shadow: var(--szoveg-arnyek); }
.hero p  { font-size: 1.15rem; color: rgba(255,255,255,.94); max-width: 56ch; text-shadow: var(--szoveg-arnyek); }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
/* A hős alatti szócímkék. Ezek a vásárló keresőszavai, ezért egy szinttel
   mélyebbre mennek, mint a menü: a menü kategóriákat rendez, ez a lista
   viszont azokat a szavakat mutatja, amiket a Google keresőbe beírnak.
   Kattinthatóak, mert aki „pergolát" lát és pergolát keres, arra rá is akar
   menni. Korábban élettelen <span>-ek voltak. */
.chip {
  display: inline-block; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: .35rem .8rem; border-radius: 999px; font-size: .85rem;
  transition: background .2s ease, border-color .2s ease;
}
a.chip:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.55); }
a.chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.badge-promo {
  display: inline-block; background: var(--cta); color: #fff;
  font-weight: 700; padding: .35rem .9rem; border-radius: 999px;
  font-size: .9rem; margin-bottom: 1rem;
}

/* ---------- Bizalmi sáv ---------- */
.trustbar { background: var(--fg); color: #fff; }
.trustbar ul {
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center;
  list-style: none; margin: 0; padding: 1.1rem 0; font-size: .95rem; font-weight: 500;
}
.trustbar li::before { content: "✓ "; color: var(--cta); font-weight: 700; }

/* ---------- Kártyák ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem; display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .4rem; }
/* 2026.08.15: a kártyacím h3-rol h2-re valtott (cimsorugras a h1 utan). A h2
   alapmerete nagyobb, ezert itt visszaadjuk a MERT, mai erteket: 1.2rem betu,
   .4rem also terkoz. A latvany igy valtozatlan, csak a szerkezet lett helyes. */
.card h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.card p  { color: var(--muted-fg); font-size: .96rem; margin-bottom: 0; }
.card__ico { font-size: 1.6rem; margin-bottom: .8rem; }

/* Kategóriakártya – a főoldal fő navigációs eleme */
.cat {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 260px; display: flex; align-items: flex-end;
  color: #fff; text-decoration: none;
  background: var(--section-grey) center/cover no-repeat;
}
.cat::after { content: ""; position: absolute; inset: 0; background: var(--scrim-alul); }
.cat__body { position: relative; z-index: 1; padding: 1.4rem; }
.cat__body h3 { color: #fff; margin-bottom: .2rem; font-size: 1.35rem; text-shadow: var(--szoveg-arnyek); }
.cat__body p  { color: rgba(255,255,255,.94); font-size: .9rem; margin: 0; text-shadow: var(--szoveg-arnyek); }
.cat:hover .cat__body h3 { text-decoration: underline; }

/* Probléma szerinti belépés */
.problem {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem; text-decoration: none; display: block; background: #fff;
  transition: border-color .15s ease;
}
.problem:hover { border-color: var(--cta); }
.problem strong { display: block; margin-bottom: .2rem; }
.problem span { color: var(--muted-fg); font-size: .92rem; }

/* ---------- Fotósáv ----------
   Teljes szélességű levegővétel a hosszú lapok közepén. Nem dekoráció: egy
   állítást visz, és láthatóvá teszi, hogy új fejezet kezdődik. */
.szalag {
  position: relative; overflow: hidden; color: #fff;
  background: var(--fg) center/cover no-repeat;
}
.szalag::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.14) 100%);
}
.szalag__inner {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin-inline: auto; padding: 4.5rem 1.25rem;
}
.szalag__inner > * { max-width: 46rem; }
.szalag strong, .szalag h2 {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin-bottom: .6rem;
  text-shadow: var(--szoveg-arnyek);
}
.szalag p { margin: 0; font-size: 1.12rem; color: rgba(255,255,255,.94); text-shadow: var(--szoveg-arnyek); }

/* ---------- CTA-hierarchia ----------
   Korabban minden gomb piros volt: a redony lapon husz darab. Ha minden gomb
   elsodleges, akkor egyik sem az. Ezert a lap torzseben MINDEN CTA masodlagos,
   korvonalas lesz, es csak negy helyen marad piros: a fejlecben, a mobilsavon,
   a hosben es az urlap kuldes gombjan. A sutisav gombjai szandekosan maradnak
   azonos sulyuak, ahogy a hozzajarulasnal kell.
   Megfordítva csinaltam, nem szakaszra szurve, mert tobb CTA sima
   <div class="wrap center"> blokkban ul, szakaszon kivul, es azokat egy
   .section-alapu szabaly nem erte volna el. */
.btn--cta { background: transparent; color: var(--fg); border-color: var(--border); }
.btn--cta:hover { background: transparent; border-color: var(--fg); }

.header .btn--cta, .mobilebar .btn--cta, .hero .btn--cta,
.suti-sav .btn--cta, .suti-ablak .btn--cta,
#arajanlatkeres button[type="submit"], #jelentkezes button[type="submit"] {
  background: var(--cta); color: #fff; border-color: transparent;
}
.header .btn--cta:hover, .mobilebar .btn--cta:hover, .hero .btn--cta:hover,
.suti-sav .btn--cta:hover, .suti-ablak .btn--cta:hover,
#arajanlatkeres button[type="submit"]:hover, #jelentkezes button[type="submit"]:hover {
  background: var(--cta-hover); border-color: transparent;
}

/* Sotet szakaszon a masodlagos gomb feher korvonalas, kulonben lathatatlan. */
.section--dark .btn--cta, .section--dark .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.55);
}
.section--dark .btn--cta:hover, .section--dark .btn--ghost:hover { border-color: #fff; }

/* A heró ugyanaz az eset, mint a .section--dark: sötétített fotó, fehér
   szöveg. A szellemgomb alapszíne viszont var(--fg), tehát sötétszürke, és
   ott olvashatatlan. 2026.08.14-ig ez nem látszott, mert az egyetlen ilyen
   gomb (garázskapu, „Paneltípusok") tömör fekete heróra került, ahol a
   sötétszürke felirat egyszerűen eltűnt. Amikor a heró képet kapott, kiderült.
   A szabály itt áll, nem a lapon, hogy a következő heró-szellemgomb is jó
   legyen. */
.hero .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.55);
}
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Akciós cím. Csak világos háttéren használjuk: a márkapiros fehéren 5,9:1,
   sötétített fotón viszont 1,6:1 lenne, tehát ott olvashatatlan. */
.cim--akcio { color: var(--cta); }

/* ---------- Partneri arculat ----------
   Ez a lap más közönségnek szól, és az első pillanatban látszania kell.
   Két korábbi kísérlet nem vált be: a teljesen sötét változat komor volt, a
   szürke felszín pedig túl közel maradt a fehér lakossági lapokhoz.
   Most mélykék a felszín, fehér boxokkal: a mélykék a szakmai, kereskedői
   hang klasszikus színe, a fehér kártyák pedig kiemelkednek rajta, tehát a
   lap nem komor, mert a tartalom világos felületen áll. A márkapiros
   megmarad, de csak az elsődleges gombon, így nem hígul. */
body[data-cat="partner"] {
  --bg:            #142033;
  --fg:            #f2f5f9;
  --secondary:     #1b2b42;
  --section-grey:  #0c1524;
  --muted:         #24354e;
  --muted-fg:      #bccadb;
  --border:        #2d4260;
}
body[data-cat="partner"] .card,
body[data-cat="partner"] details.deep,
body[data-cat="partner"] .field input,
body[data-cat="partner"] .field select,
body[data-cat="partner"] .field textarea {
  background: #fff; color: #1b2430; border-color: #d6dce4;
}
body[data-cat="partner"] .card h3,
body[data-cat="partner"] details.deep > summary { color: #131c28; }
body[data-cat="partner"] .card p,
body[data-cat="partner"] details.deep > div { color: #4a5566; }
body[data-cat="partner"] .card .stat__n { color: var(--cta); }
body[data-cat="partner"] .footer { background: #0c1524; }
body[data-cat="partner"] .szalag { background-color: #0c1524; }
body[data-cat="partner"] .trustbar { background: #0c1524; }
body[data-cat="partner"] .header { background: rgba(20,32,51,.97); border-bottom-color: #2d4260; }
body[data-cat="partner"] .logo img { filter: brightness(0) invert(1); }
body[data-cat="partner"] .btn--ghost { color: var(--fg); border-color: #3a5175; }
body[data-cat="partner"] .btn--ghost:hover { border-color: var(--fg); }
/* ...de a lap FEHÉR felületein nem. A --fg a mélykék felszínhez világos, és
   a fehér kártyán meg a sütisávban ettől fehér felirat állt fehér háttéren:
   1,09 : 1, hét gombon. A fehér felületek ugyanazok, amiknek fentebb a
   hátterét is állítjuk, plusz a sütisáv és a sütiablak, ami mindig fehér. */
body[data-cat="partner"] .card .btn--ghost,
body[data-cat="partner"] details.deep .btn--ghost,
body[data-cat="partner"] .suti-sav .btn--ghost,
body[data-cat="partner"] .suti-ablak .btn--ghost { color: #1b2430; border-color: #cbd4e0; }
body[data-cat="partner"] .card .btn--ghost:hover,
body[data-cat="partner"] details.deep .btn--ghost:hover,
body[data-cat="partner"] .suti-sav .btn--ghost:hover,
body[data-cat="partner"] .suti-ablak .btn--ghost:hover { border-color: #1b2430; }

/* A sütisáv és a sütiablak háttere MINDIG fehér, a szövegszínt viszont a
   body-tól örökli. A partnerlapon a --fg világos, tehát fehér felirat állt
   fehér sávon (1,09 : 1), mindhárom szövegén. A sáv minden látogatónak
   megjelenik. */
body[data-cat="partner"] .suti-sav,
body[data-cat="partner"] .suti-ablak,
body[data-cat="partner"] .suti-sav a,
body[data-cat="partner"] .suti-ablak a { color: #1b2430; }

/* A szakasznav piros CTA-ján a partner-téma halványkék betűszíne nyert a
   .szakasznav__cta fehérje felett (erősebb szelektor, később áll): 3,24 : 1
   a márkapiroson. A piros gombon fehér kell. */
body[data-cat="partner"] .szakasznav__cta a { color: #fff; }
body[data-cat="partner"] .submenu__inner { background: #1b2b42; }
body[data-cat="partner"] .mobilebar { background: rgba(20,32,51,.97); border-top-color: #2d4260; }

/* ---------- Halk kártya ----------
   Ugyanaz a doboz, mint a .card, csak a lap felszínének színén áll, szaggatott
   szegéllyel: kiemelt megjegyzésre és helytartóra használjuk.
   Miért kell rá külön osztály? Mert korábban inline stílussal készült
   (background:var(--secondary)), az inline háttér pedig felülírja a témák
   szabályait. A partnerlap sötét témáján ettől mélykék lett a doboz, a
   szövegszín viszont a fehér kártyához tartozó majdnem fekete maradt:
   kontraszt 1,2:1. Osztályként a téma tudja javítani. */
.card--halk { background: var(--secondary); border-style: dashed; }

/* A partnerlapon a doboz szándékosan NEM fehér: ez különbözteti meg a lap
   többi kártyájától. Ezért itt nem a hátteret világosítjuk, hanem a szöveget. */
body[data-cat="partner"] .card--halk { background: #1b2b42; border-color: #3a5175; }
body[data-cat="partner"] .card--halk h3 { color: #fff; }
body[data-cat="partner"] .card--halk p  { color: #ccd7e6; }
body[data-cat="partner"] .card--halk b  { color: #fff; }

/* ---------- Számláló ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; }
.stat__n { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--cta); line-height: 1; }
.stat__l { color: var(--muted-fg); font-size: .95rem; margin-top: .3rem; }

/* ---------- Lenyitható szakmai tartalom ---------- */
details.deep {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1rem 1.2rem; margin-bottom: .75rem; background: #fff;
}
details.deep > summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
details.deep > summary::-webkit-details-marker { display: none; }
details.deep > summary::after { content: "+"; color: var(--cta); font-size: 1.3rem; line-height: 1; }
details.deep[open] > summary::after { content: "–"; }
details.deep > div { padding-top: .9rem; color: var(--muted-fg); }

/* ---------- Űrlap ---------- */
.form { display: grid; gap: 1rem; max-width: 640px; min-width: 0; }
.form--2 { grid-template-columns: 1fr 1fr; }
/* min-width:0 kell, különben a mezők saját minimális szélessége szétfeszíti a rácsot */
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--fg);
  width: 100%; min-width: 0; max-width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
/* A jelölőnégyzetes sorok: a jogi jelölő és a partnerlap termékcsoportjai.
   MIÉRT ENNYI VISSZAÁLLÍTÁS: a .field szabályai (oszlopirány, width:100%,
   fehér háttér, keret, belső margó) a szövegmezőkre valók, de a böngésző a
   jelölőnégyzetre is ráhúzza őket, mert az is <input>. Enélkül a négyzet 640
   képpont széles sávvá nyúlik, és a felirata FÖLÉ kerül külön sorba. */
.check { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; font-size: .9rem; line-height: 1.7; }
/* a line-height nem esztétika: 14,4px x 1,7 = 24,5px, és a WCAG 2.5.8 (AA)
   24x24 képpontot vár el érintőfelülettől. Enélkül 23,8 volt. */
.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;   /* 13px helyett: mobilon is eltalálható */
  margin: .15rem 0 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  accent-color: var(--cta);
}
.form-note { font-size: .9rem; color: rgba(255,255,255,.85); }

/* ---------- Lábléc ---------- */
.footer { background: var(--fg); color: #fff; padding-block: 3.5rem 2rem; }
.footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer h3 { font-family: var(--font-body); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-bottom: .9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.5rem; padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.6);
}

/* ---------- Referenciagaléria ----------
   Elkészült munkák fotói. Nem díszítés: az árnyékolás olyan termék, amit a
   vásárló látni akar a helyén, mielőtt árat kér.

   2026.08.18, Emese: „legyenek felőlem kicsik a képek, ha ez helytakarékos,
   de ne legyenek levágva." Eddig fix, 180 px magas rácscellák álltak itt, és
   az object-fit: cover a kép közepét mutatta, a többit eldobta. A galéria 34
   fájljából több négyzetes (646 x 646) vagy álló (864 x 1184) — azokból
   látszott a legkevesebb.

   Ezért hasáb, nem rács: minden kép a SAJÁT arányában, egészben áll, a
   hasábok magasságát a képek adják. A break-inside: avoid tartja meg, hogy
   egy kép ne szakadjon két hasáb közé.

   A g--wide és a g--tall rácsnyújtó szabályok voltak; itt értelmüket
   vesztették. Az osztályok a lapokon maradnak, mert ártalmatlanok — és így
   egyetlen lap bájtja sem változik ezért a javításért. */
.gallery { columns: 4; column-gap: .75rem; }
.gallery figure {
  margin: 0 0 .75rem;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  overflow: hidden; border-radius: var(--radius-sm); position: relative;
}
.gallery img {
  width: 100%; height: auto; display: block;
  transition: transform .4s ease; cursor: zoom-in;
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery img:focus-visible { outline: 3px solid var(--cta); outline-offset: -3px; }
/* Képfelirat a galériában NINCS (Emese, 2026.08.18): a referenciafotók
   szöveges leírása lehet téves, és a saját referencialapunkon olvasott hibás
   terméknév rosszabb, mint a néma kép. Az alt attribútum marad. Ha valaha
   mégis kell felirat, a szabályt a javitas-128.js-ből lehet visszahozni —
   de akkor a felirat legyen HITELESÍTETT, ne feltételezés.
*/

/* Mobilon is KÉT hasáb, nem egy: hasábonként egyetlen egész kép mellett a
   26 fotós referencialap 6000 px hosszú lenne. Két hasábban a kép ~180 px
   széles bélyeg — kicsi, de teljes, és egy koppintásra megnyílik. */
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 480px) { .gallery { columns: 2; } }

/* ---------- Nagyító ----------
   A hasábban a kép kicsi; aki a részletet akarja látni, rákattint. A rátét a
   sütisáv modálja (z-index 210) FÖLÖTT áll, hogy ne kerüljön alá, de az
   „ugrás a tartalomra" link (1000) alatt marad. A viselkedést a nav.js adja. */
.nagyito {
  position: fixed; inset: 0; z-index: 220;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, .88);
}
.nagyito img {
  max-width: 100%; max-height: 80vh; width: auto; height: auto;
  display: block; border-radius: var(--radius-sm);
}
.nagyito__zar {
  position: absolute; top: .75rem; right: .75rem;
  width: 2.75rem; height: 2.75rem; line-height: 1; font-size: 1.6rem;
  color: #fff; background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
  cursor: pointer;
}
.nagyito__zar:hover, .nagyito__zar:focus-visible { background: rgba(0, 0, 0, .85); }

/* Képes problémakártya. A szöveges változat megmarad ott, ahol nincs fotó. */
.problem--img {
  position: relative; overflow: hidden; border: 0; min-height: 175px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem; color: #fff;
}
.problem--img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; transition: transform .4s ease;
}
/* Sötétítés nélkül a fehér szöveg olvashatatlan a világos fotókon. */
.problem--img::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--scrim-alul);
}
.problem--img strong, .problem--img span { position: relative; z-index: 2; text-shadow: var(--szoveg-arnyek); }
.problem--img strong { color: #fff; }
.problem--img span { color: rgba(255,255,255,.85); }
.problem--img:hover img { transform: scale(1.06); }

/* Problemakartya fotoval. A szoveg NEM a fotora kerul, hanem ala.
   Igy a foto teljes egeszeben latszik, nem kell sotetiteni, a szoveg pedig
   feher hatteren all, tehat a kontraszt fotofuggetlenul rendben van.
   A ket ketfele vivo kartya (hoseg, elsotetites) maga nem hivatkozas: ket
   kulon lapra visz, es ha az egesz panel kattinthato lenne, onkenyesen
   kiemelne az egyik utat a masik rovasara. */
.problem--foto {
  padding: 0; overflow: hidden; background: #fff; color: var(--fg);
  display: flex; flex-direction: column; text-decoration: none;
}
.problem__kep { aspect-ratio: 16 / 10; overflow: hidden; background: var(--muted); }
.problem__kep img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.problem--foto:hover .problem__kep img { transform: scale(1.05); }
.problem--utak { cursor: default; }
.problem--utak:hover .problem__kep img { transform: none; }
.problem__torzs { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.problem--foto strong { color: var(--fg); margin-bottom: .15rem; }
.problem__linkek { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.problem__linkek a, .problem .problem__gomb {
  flex: 1 1 7.5rem; text-align: center; text-decoration: none; display: block;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600; color: var(--fg);
  background: #fff; border: 1px solid var(--border);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.problem__linkek a:hover, .problem__linkek a:focus-visible,
.problem--foto:hover .problem__gomb { background: var(--cta); border-color: var(--cta); color: #fff; }

/* Termékkártya fotóval. A kártya tetejére kerül a kép, a szöveg alá. */
.card__img { margin: -1.4rem -1.4rem 1rem; overflow: hidden; }
.card__img img { width: 100%; height: 190px; object-fit: cover; display: block; }

/* ---------- Termékoldal (2. fázis) ----------
   A termékoldal nem landoló: mélyebben van a szerkezetben, és a látogató már
   tudja, mit keres. Ezért a fejrésze alacsonyabb, és van morzsanavigáció. */
.hero--sm { min-height: 0; padding-block: 3.5rem 3rem; }
.hero--sm h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }

/* A morzsa is fotón van, ezért ugyanazt a kezelést kapja, mint a többi
   fotóra tett szöveg: majdnem tömör fehér és finom árnyék. */
.breadcrumb { font-size: .9rem; color: rgba(255,255,255,.94); margin-bottom: .6rem; text-shadow: var(--szoveg-arnyek); }
.breadcrumb a { color: #fff; text-decoration: underline; }
.breadcrumb a:hover { color: #fff; }

/* Műszaki adattábla. Két hasáb, mert a mobil nézetben a több oszlop
   olvashatatlanul összenyomódna. */
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 1rem; }
.spec th, .spec td { border-bottom: 1px solid var(--border); padding: .7rem .2rem; text-align: left; vertical-align: top; }
.spec th { width: 38%; font-weight: 600; color: var(--muted-fg); }
/* overflow-wrap kell: a hosszú, kötőjel nélküli műszaki értékek szétfeszítenék a táblát */
.spec td { overflow-wrap: anywhere; }

.list { margin: 1rem 0 1.5rem; padding-left: 1.3rem; display: grid; gap: .6rem; line-height: 1.7; }
.list li::marker { color: var(--cta); }

@media (max-width: 560px) {
  .spec th { width: 45%; }
}

/* ---------- Ragadós mobil CTA-sáv ---------- */
.mobilebar { display: none; }

/* ---------- Prototípus-jelölések (élesben nem lesz) ---------- */
.proto-flag {
  background: #fffbe6; border: 1px dashed #d9a800; color: #6b5200;
  padding: .5rem .8rem; border-radius: var(--radius-sm);
  font-size: .82rem; margin: .5rem 0;
}
/* Soron belüli dummy-jelölés */
.proto-inline {
  background: #fffbe6; color: #6b5200; border: 1px solid #d9a800;
  border-radius: 4px; padding: 0 .3em; font-size: .82em; font-weight: 700;
  /* nowrap NEM kell: a hosszú jelölések szétfeszítenék a mobil nézetet */
  overflow-wrap: anywhere;
}
.section--dark .proto-inline { background: #fff3c4; }

/* ---------- Reszponzív ---------- */
/* A vízszintes menü 1150px alatt nem fér ki tisztán -> hamburger.
   A menü ilyenkor nem eltűnik, hanem lenyílik a fejléc alatt. */
/* 1250 px alatt a vízszintes menü a tömörített mérettel sem fér ki
   (1182 px kell neki, és 1250-nél már csak 1236 a hely), ezért itt átvesszük
   a hamburgerre. Korábban 1150 volt a határ, és 1150 és 1250 között a lap
   vízszintesen gördült. */
/* A torespont 1250-rol 1380-ra nott: a hosszabb „Partnerbelepes" gombbal a
   tizelemu menu 1364 px-t kert, a 1366 px-es laptopon ez hajszalra kifert, a
   1280-1360 savban viszont vizszintesen gordult a fejlec. Inkabb ott mar a
   hamburger menu jon, mint egy tulcsordulo fejlec. */
@media (max-width: 1300px) {
  .burger { display: block; margin-left: auto; order: 3; }
  .nav {
    display: none; order: 4; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--border); margin: 0;
    max-height: 70vh; overflow-y: auto; padding-bottom: .5rem;
  }
  body.nav-open .nav { display: flex; }
  .header__bar { flex-wrap: wrap; }

  .nav__item > a { padding: .8rem .2rem; justify-content: space-between; font-size: 1rem; }
  .nav__partner { padding-left: 0; border-left: 0; border-top: 2px solid var(--cta); margin-top: .3rem; }
  .nav__partner > a { color: var(--cta); font-weight: 700; }

  /* alpontok: kattintásra nyílnak, nem hoverre */
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding: 0; display: none;
  }
  .nav__item.open .submenu { display: block; }
  .nav__item.has-kids:hover .submenu { display: none; }
  .nav__item.has-kids.open:hover .submenu { display: block; }
  .submenu__inner { border: 0; box-shadow: none; padding: 0 0 .5rem .8rem; min-width: 0; }
  .submenu a { white-space: normal; }
  .nav__item.open > a .caret { transform: rotate(180deg); }
}

@media (max-width: 900px) {
  :root { --sect: 3.25rem; }
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 60vh; }
  /* Mobilon a hős szövege a teljes szélességet elfoglalja, tehát az oldalirányú
     sötétítés jobb szélén már olvashatatlan lenne. Itt egyenletes sötétítés kell,
     mert a szöveg függőlegesen középen van, nem alul. */
  .hero::after {
    background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.72) 100%);
  }
  body { padding-bottom: 68px; }

  .mobilebar {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--border); padding: .6rem;
  }
  .mobilebar .btn { justify-content: center; width: 100%; }
}
/* Mobilon a fejlécben csak egy gomb fér ki. A partneri belépés a hamburger
   menüben és a láblécben marad elérhető, a lakossági CTA a fontosabb. */
@media (max-width: 780px) {
  .header__actions .btn--ghost { display: none; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .form--2 { grid-template-columns: 1fr; }
  .trustbar ul { gap: .8rem 1.2rem; font-size: .85rem; }
  .logo { font-size: 1.3rem; }
}

/* ==========================================================================
   LANDOLÓ-SZAKASZOK
   A négy meglévő Lovable-landoló felépítése: kép az egyik oldalon, szöveg a
   másikon, alatta ikonos kártyák, végül piros gomb. A képoldal szakaszonként
   váltakozik (.lsec--rev), mert a landolókon is így van.
   ========================================================================== */

.lsec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  /* 2026.09.10: "center" helyett "stretch". Emese kérése a redőnyös blokkra:
     "csökkentsd le a kép méretét, csak amennyi a szöveg mellett indokolt".
     A kép eddig FIX 4:3 volt, tehát a szövegoszloptól függetlenül magas —
     a javitas-164 után a redőnyös blokk szövege rövidebb lett, és a kép
     kilógott alatta. Stretch + height:100% mellett a kép PONTOSAN olyan
     magas, mint a szöveg, se több, se kevesebb. Ahol a szöveg magasabb
     (belteri, terasz), ott a kép nő — az is helyes. */
  align-items: stretch;
}
.lsec__img { min-height: 100%; }
.lsec__img img {
  width: 100%;
  height: 100%;
  /* aspect-ratio helyett a sor magassága szabja meg; a min-height csak
     alsó korlát, hogy egy nagyon rövid szöveg mellett se lapuljon sávvá. */
  min-height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.lsec__txt h2 { margin-top: 0; }
/* Fordított szakasz: a rácsban a szöveg áll elöl, ezért a HTML-ben is
   előbb szerepel. Így a felolvasó és a mobil sorrend is helyes marad,
   nem CSS-sel cserélünk oszlopot. */

.fcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.75rem;
}
.fcards--4 { grid-template-columns: repeat(4, 1fr); }

.fcard {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.section--grey .fcard { background: #fff; }
.fcard h3 { font-size: .875rem; line-height: 1.43; margin: 0 0 .35rem;
            font-family: var(--font-body); font-weight: 600; }  /* landolo: 14px/20px */
.fcard p  { font-size: .9rem; margin: 0; color: var(--muted-fg); line-height: 1.55; }

/* Az ikon halványpiros csempén ül, ahogy a landolókon. A készlet saját,
   egyvonalas rajz: nem vettem át idegen ikonfájlt. */
.fico {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  padding: .55rem;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: rgba(212, 17, 17, .08);
  color: var(--cta);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero-jelvények: a landolók pill alakú sávja a gomb alatt. */
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip--ok::before { content: "✓"; margin-right: .4rem; font-weight: 700; }

@media (max-width: 900px) {
  .lsec { grid-template-columns: 1fr; gap: 2rem; }
  /* Fordított szakasznál egy hasábban a kép kerüljön a szöveg elé, hogy
     minden szakasz ugyanúgy induljon. */
  .lsec--rev .lsec__img { order: -1; }
  .fcards, .fcards--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VÁLTOZAT-RÉSZLETEK A KÁRTYÁN
   A műszaki adat ott nyílik, ahol a változat áll, nem a lap alján. Csukott
   állapotban ugyanúgy néz ki, mint a korábbi "Részletek" gomb, hogy a kártya
   megszokott képe ne változzon.
   ========================================================================== */

details.kreszlet { margin-top: 1rem; align-self: flex-start; width: 100%; }
details.kreszlet > summary {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  padding: .6rem 1.1rem; line-height: 1.4;
  border: 2px solid var(--border); border-radius: 10px;
  cursor: pointer; list-style: none; color: var(--fg);
  transition: border-color .15s ease;
}
details.kreszlet > summary::-webkit-details-marker { display: none; }
details.kreszlet > summary::after {
  content: "▾"; color: var(--cta); font-size: .95rem; line-height: 1;
  transition: transform .18s ease;
}
details.kreszlet[open] > summary::after { transform: rotate(180deg); }
details.kreszlet > summary:hover { border-color: var(--fg); }
details.kreszlet > summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

.kreszlet__body {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .92rem; color: var(--muted-fg); line-height: 1.6;
}
.kreszlet__body p:last-child { margin-bottom: 0; }
/* A lenyíló eredeti címsora kis címkeként megmarad: enélkül elveszne az az
   információ, hogy a blokk pontosan miről szól (pl. "beépítés és
   helykialakítás"). */
.kreszlet__cim {
  font-weight: 600; color: var(--fg); font-size: .95rem; margin-bottom: .6rem;
}
/* A műszaki tábla szűk kártyában is olvasható marad. */
.kreszlet__body .spec { font-size: .88rem; margin-top: .8rem; }
.kreszlet__body .spec th { width: 45%; }

/* Ha a menüből horgonnyal érkezik valaki, a kártya kap egy rövid kiemelést,
   különben egy hosszú lapon nem látszik, melyik nyílt ki. */
details.kreszlet:target > summary,
.card--talalt details.kreszlet > summary { border-color: var(--cta); }


/* ===== Süti-hozzájárulás =================================================
   Az elfogadás és az elutasítás gombja SZÁNDÉKOSAN azonos méretű és
   hangsúlyú. Ez jogi követelmény, ne "javítsuk" ki. */
.suti-sav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 2px solid var(--fg);
  box-shadow: 0 -6px 24px rgba(0,0,0,.14);
  padding: 1rem 1.25rem; display: flex; gap: 1.25rem; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.suti-sav__szoveg { max-width: 52rem; }
.suti-sav__szoveg p { margin: .3rem 0 0; font-size: .9rem; }
.suti-sav__gombok { display: flex; gap: .5rem; flex-wrap: wrap; }
.suti-sav__gombok .btn { min-width: 11rem; justify-content: center; }

.suti-fedes {
  position: fixed; inset: 0; z-index: 210; background: rgba(10,18,32,.55);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.suti-ablak {
  background: #fff; border-radius: 12px; padding: 1.5rem; max-width: 34rem;
  width: 100%; max-height: 86vh; overflow: auto;
}
.suti-ablak h2 { margin-top: 0; }
.suti-sor { border-top: 1px solid var(--line, #e3e8f0); padding: .8rem 0; }
.suti-sor p { margin: .35rem 0 0 1.6rem; font-size: .88rem; color: #55637a; }
.suti-jog { font-size: .85rem; color: #55637a; }
.suti-ablak__gombok { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* A hozzájárulásig ez áll a beágyazott térkép helyén. */
.suti-zar {
  margin-top: 1rem; padding: 1.5rem 1.25rem; border: 1px dashed #9fb0c9;
  border-radius: 8px; background: #eef2f8; text-align: center;
}
.suti-zar p { margin: 0 0 .8rem; font-size: .88rem; color: #4a5a73; }

@media (max-width: 640px) {
  .suti-sav { flex-direction: column; align-items: stretch; }
  .suti-sav__gombok .btn { width: 100%; }
}


/* ============================================================================
   KATALÓGUS-BORÍTÓK
   A kép a kiadvány első oldala. A gerincet, a lapéleket és a vetett árnyékot
   CSS rajzolja, ezért nem kell külön mockup képet készíteni: elég a sima
   oldalkép, a katalógusszerű hatás magától rákerül. Ha egy kiadvány frissül,
   csak a JPG-t kell cserélni.
   ========================================================================= */
.katkartya { display: flex; flex-direction: column; }

.katborito { margin: 0 0 1.15rem; }

.katborito a { display: block; position: relative; text-decoration: none; line-height: 0; }

.katborito img {
  display: block; width: 100%; height: auto; background: #fff;
  border-radius: 1px 3px 3px 1px;
  /* A négy halvány réteg a lapélek illúziója, az utolsó a vetett árnyék */
  box-shadow:
    2px 1px 0 -1px #fbfbfb,
    4px 2px 0 -1px #f1f1f1,
    6px 3px 0 -1px #e7e7e7,
    8px 4px 0 -1px #dcdcdc,
    11px 15px 28px -7px rgba(18, 18, 24, .30);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* A gerinc: sötétedés a bal szélen, egy világos csíkkal, ami a hajtást adja */
.katborito a::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 14px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.32) 0,
    rgba(0,0,0,.14) 36%,
    rgba(255,255,255,.24) 70%,
    rgba(255,255,255,0) 100%);
  border-radius: 1px 0 0 1px; pointer-events: none; z-index: 2;
}

/* Halvány fénycsík, hogy a papír ne legyen teljesen matt */
.katborito a::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.15) 0, rgba(255,255,255,0) 34%);
  border-radius: 1px 3px 3px 1px; pointer-events: none; z-index: 2;
}

.katborito a:hover img,
.katborito a:focus-visible img {
  transform: translateY(-5px) rotate(-.4deg);
  box-shadow:
    2px 1px 0 -1px #fbfbfb,
    4px 2px 0 -1px #f1f1f1,
    6px 3px 0 -1px #e7e7e7,
    8px 4px 0 -1px #dcdcdc,
    14px 22px 38px -8px rgba(18, 18, 24, .34);
}

.katborito a:focus-visible { outline: 3px solid var(--cta, #c8102e); outline-offset: 4px; }

/* A magazin fekvő elrendezésben áll, kép balra, szöveg jobbra */
.katmagazin { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 640px) {
  .katmagazin { grid-template-columns: 1fr; gap: 1.2rem; }
  .katmagazin .katborito { max-width: 200px; }
}

/* Aki csökkentett mozgást kért, annak nem billen a borító */
/* ---------- content-visibility: a hajtás alatti szakaszok később renderelnek ----
   A böngésző csak akkor rendereli a szakaszt, amikor a közelébe érünk. A hosszú
   termékoldalakon 14-23 szakasz van, amiből betöltéskor egy-kettő látszik.
   Mérve (mobil, 390 px, három betöltés átlaga): a load esemény
   redony-zsaluzia 61 -> 33 ms, szunyoghalok 43 -> 23 ms, partnerek 42 -> 20 ms.

   A contain-intrinsic-size az AUTO kulcsszóval áll: a böngésző megjegyzi a
   valódi magasságot, amint egyszer renderelte a szakaszt. Enélkül a
   görgetősáv a becsült 900 px-ekkel dolgozna végig, és ugrálna.
   Kimérve: a redony-zsaluzia lap betöltéskor 27237 px, végiggörgetés után
   pontosan 30407 px, vagyis a valódi érték.

   A horgonyokat KÜLÖN ellenőriztem, mert 24 horgonyos átirányítás fut az
   oldalon: mind a három hosszú lapon minden horgony a viewport tetejére
   visz, 40 px-en belül. A böngésző az ugrás előtt rendereli a célt.

   A .hero szándékosan kimarad: az mindig a hajtás fölött van. */
.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Nyomtatásnál MINDEN renderelődjön: a content-visibility: auto egyébként
   kihagyhatja a nem látott szakaszokat a nyomtatási képből. */
@media print {
  .section { content-visibility: visible; }
  /* A nagyító rátét sosem való a nyomtatási képbe. */
  .nagyito { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .katborito img { transition: none; }
  .katborito a:hover img, .katborito a:focus-visible img { transform: none; }
  .gallery img { transition: none; }
  .gallery figure:hover img { transform: none; }
}


/* ============================================================================
   SPAMCSAPDA
   Rejtett mező az űrlapokban. Az automata kitöltők minden mezőt kitöltenek,
   az ember viszont nem látja, mert ez a szabály elrejti. Ha a szerver kitöltve
   kapja meg, a beküldés eldobható.
   FONTOS: nem display:none, mert néhány bot pont arra szűr. A pozicionálás és
   a nulla magasság ugyanúgy elrejti, de kevésbé árulkodó.
   ========================================================================= */
.csapda {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================================
   BLOGCIKK
   A cikklapokat a blog-cikkek-generalas.js állítja elő a régi WordPress
   szövegéből. Itt csak az kap szabályt, ami a többi lapon nincs.
   ========================================================================= */
.cikk .breadcrumb { color: var(--muted-fg); text-shadow: none; }
.cikk .breadcrumb a { color: var(--muted-fg); }
.cikk .datum { color: var(--muted-fg); font-size: .95rem; margin-bottom: 1.2rem; }
.cikk figure { margin: 1.6rem 0; }
.cikk figure img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
}
.cikk p { line-height: 1.75; }
.cikk h2 { margin-top: 2.2rem; }
.cikk h3 { margin-top: 1.6rem; }
/* A bloglista kártyáin a kiemelt kép ugyanúgy viselkedik, mint a
   termékkártyákon: a .card__img szabály már megvan, ezt nem ismételjük. */

/* ============================================================================
   ŰRLAP: NEM KÖTELEZŐ RÉSZ
   A partnerjelentkezésen a kötelező kör hat mező, a többi ebben az
   összecsukható blokkban van. Miért: a rövid űrlapot többen töltik ki, az adat
   viszont nem veszik el, mert aki ráér, kinyitja.
   ========================================================================= */
.form details.tovabbi {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm);
  padding: 0 1rem;
}
.form details.tovabbi > summary {
  cursor: pointer; padding: .85rem 0; font-weight: 600; font-size: .96rem;
}
.form details.tovabbi > summary:hover { color: var(--cta); }
.form details.tovabbi .tovabbi__belso { max-width: none; padding: .2rem 0 1.1rem; }

/* „Ugrás a tartalomra" (2026.08.15). Nem eltüntetjük, hanem KIVISSZÜK a
   képernyő fölé: a display:none-t a képernyőolvasó is kihagyná, így viszont
   fókuszba kerülve visszajön. Ezért nem visibility és nem display. */
.ugras-tartalomra {
  position: absolute; left: .5rem; top: -3rem; z-index: 1000;
  background: var(--section-grey); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 .4rem .4rem;
  font-weight: 700; text-decoration: none;
  transition: top .15s ease-in-out;
}
.ugras-tartalomra:focus { top: 0; }

/* Partnerlogók sávja (2026.08.15). A képek 320 x 110 pixelesek, a lapon
   feleakkorán jelennek meg — így éles marad retina kijelzőn is. Az
   object-fit: contain azért kell, hogy egy esetleges eltérő arányú új logó
   se nyúljon meg, hanem beleférjen a dobozba. */
.logosav {
  list-style: none; margin: 2.5rem auto 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(6, 1fr); align-items: center;
  gap: 1.5rem 1rem;
  /* EGY vilagos panel, nem hat kulon feher doboz. A partnerlapon sotet a
     hatter, es a logok feher hatteru PNG-k: kulon-kulon hat feher teglalap
     lenne beloluk. Igy egyetlen szandekos savnak latszanak, a markaszinek
     pedig valtozatlanok maradnak (az atszinezes a legtobb gyartonal tiltott). */
  background: #fff; border-radius: var(--radius); padding: 1.75rem 2rem;
}
.logosav img { width: 100%; max-width: 160px; height: 55px; object-fit: contain; display: block; margin: 0 auto; }
@media (max-width: 1000px) { .logosav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .logosav { grid-template-columns: repeat(2, 1fr); padding: 1.25rem 1rem; }
  .logosav img { width: 122px; height: 42px; }
}


/* ---------- VÉLEMÉNYCSÚSZKA ----------
   Emese 2026.08.18: „a vélemények legyenek inkább ilyen csúszkán h egyik után
   beuszik a másik vagy ilyesmi partnereknél és a b2c is."
   Az alap a CSS scroll-snap, NEM a JavaScript: ha a nav.js nem fut le, akkor
   is egy ujjal húzható sáv marad, minden vélemény olvasható, és a kereső is
   mindet látja. A nyilakat, a pöttyöket és az automatikus léptetést a nav.js
   teszi hozzá futáskor — ezért nincs rájuk jelölés a lapok forrásában. */
.csuszka { position: relative; }
.csuszka__sav {
  display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: .25rem;
}
.csuszka__sav::-webkit-scrollbar { display: none; }
/* Három kártya látszik egyszerre, ugyanolyan szélesen, mint a grid--3-ban. */
.csuszka__sav > * { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); scroll-snap-align: start; }

.csuszka__nyil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--fg);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.csuszka__nyil:hover { border-color: var(--fg); }
.csuszka__nyil--vissza { left: -1.2rem; }
.csuszka__nyil--elore { right: -1.2rem; }
.csuszka__nyil[disabled] { opacity: .3; cursor: default; box-shadow: none; }

.csuszka__pottyok { display: flex; gap: .45rem; justify-content: center; margin-top: 1.4rem; }
.csuszka__potty {
  width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 99px;
  background: var(--border); cursor: pointer; transition: width .2s, background .2s;
}
.csuszka__potty[aria-current="true"] { background: var(--cta); width: 1.5rem; }

/* Sötét szakaszon (partnerlap) a fehér gomb és a világos pötty vakít. */
.section--dark .csuszka__nyil {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.45);
}
.section--dark .csuszka__nyil:hover { border-color: #fff; }
.section--dark .csuszka__potty { background: rgba(255,255,255,.35); }
.section--dark .csuszka__potty[aria-current="true"] { background: #fff; }

@media (max-width: 900px) {
  .csuszka__sav > * { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 560px) {
  /* Egy kártya egy képernyőn, és nyíl helyett ujjal húzás: a nyílgomb ekkora
     kijelzőn a kártya szövegére lógna rá. */
  .csuszka__sav > * { flex-basis: 100%; }
  .csuszka__nyil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .csuszka__sav { scroll-behavior: auto; }
  .csuszka__potty { transition: none; }
}


/* ---------- KÁRTYAKÉP ----------
   Emese 2026.08.18: „képeket inkább a Mit vehetsz fel a kínálatodba panelekre".
   A kép a kártya tetején, a széléig kifutva: a .card belső térköze 1.6rem,
   ezért a burok negatív margóval lóg ki alóla. A magasság FIX, hogy a kép
   betöltése ne tolja el a lapot, és hogy a panelek egy sorban egyforma
   ritmusúak legyenek. */
.card__kep {
  margin: -1.6rem -1.6rem 1.2rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; background: var(--section-grey);
}
.card__kep img { display: block; width: 100%; height: 190px; object-fit: cover; }
@media (max-width: 560px) { .card__kep img { height: 165px; } }


/* ---------- KAPCSOLATTARTÓ KÁRTYA ----------
   Emese 2026.08.18: „ne fekvő hanem álló kép legyen, mert igazolványkép kerül
   majd a helyére, és nem is ilyen hatalmas". A kép ezért NEM a kártya tetején
   végigfutó sáv, hanem a név mellett álló, igazolványkép-arányú (3:4) kis kép.
   A Gredex a szerkesztőből erre tölti fel az arcképet; az object-fit: cover
   miatt a portré akkor is jól áll benne, ha nem pont 3:4. */
.kkart { display: flex; gap: 1.1rem; align-items: flex-start; }
.kkart h3 { margin-bottom: .3rem; }
.kkart p { margin-bottom: .35rem; }
.arckep {
  flex: 0 0 auto; width: 108px; height: 144px; object-fit: cover;
  border-radius: var(--radius); background: var(--section-grey);
}
@media (max-width: 420px) { .arckep { width: 88px; height: 117px; } }

/* Egy kártya a rács TELJES szélességében. Emese 2026.08.18: a Sales Kalkulátor
   panel „legyen az első panel, és a képernyő teljes hosszában. mobilon csak
   simán az első csempe" — mobilon nincs is mit tenni, mert a rács ott egy
   hasábos, tehát a teljes szélesség egy csempével egyenlő. */
.card--teljes { grid-column: 1 / -1; }


/* Hármas csempesor. Az árak és az érvek szakasz 6, illetve 5 elemet mutat:
   kettes rácsban túl szélesek, négyesben túl szűkek a csempék. A törésponti
   viselkedést a meglévő .fcards szabályok adják, ezt nem kell megismételni. */
.fcards--3 { grid-template-columns: repeat(3, 1fr); }

/* Terméknév a csempesor fölött. A .fcard h3 szándékosan kicsi (14 px), ezért a
   blokkcímnek saját méret kell, különben a csempék címei elnyomnák. */
.termekcim { font-size: 1.15rem; margin: 2.25rem 0 0; }
.termekcim + .fcards { margin-top: .9rem; }

/* ---------- OSZTOTT KÁRTYA: fél kép, fél szöveg ----------
   Emese 2026.09.15: „kalkulátor legyen egy nagy osztott box, a fele kép a
   másikfele a szöveg". A teljes szélességű kártyán a 190 px magas fejlécsáv
   egy 5,8:1-es dobozt adott, ami a kép felét levágta. Itt a kép a kártya bal
   felét kapja, teljes magasságban; a szöveg a jobbat. 700 px alatt egymás alá
   kerülnek, különben mind a kettő olvashatatlanul keskeny lenne. */
.card--osztott {
  display: grid; grid-template-columns: 5fr 6fr; align-items: stretch;
  padding: 0; overflow: hidden;
}
.card--osztott .card__kep {
  margin: 0; border-radius: var(--radius) 0 0 var(--radius); height: 100%;
}
.card--osztott .card__kep img { height: 100%; min-height: 250px; }
.card--osztott .card__szoveg {
  padding: 1.6rem; display: flex; flex-direction: column;
}
@media (max-width: 700px) {
  .card--osztott { grid-template-columns: 1fr; }
  .card--osztott .card__kep { border-radius: var(--radius) var(--radius) 0 0; }
  .card--osztott .card__kep img { height: 190px; min-height: 0; }
}