/* ============================================================================
   KOZOS STILUSOK a harom termekoldalhoz (numerologia, tarot, alomfejtes)
   2026-10-13

   MIERT LETEZIK EZ A FAJL:
   A harom oldal kulon HTML, es kulon-kulon fejlodott. Emiatt szetcsusztak:
   a fejlec a numerologian ket savbol allt (markajelzes + gomb az egyikben,
   termekmenu a masikban, osszesen 123px), a tarotnal es az alomfejtesnel
   egyetlen 57px-es savbol. Atkattintaskor a fejlec megugrott, es a szem
   elvesztette a kapaszkodot. A betumeret es a tarolo-szelesseg is eltert.

   EZ A FAJL AZ EGYETLEN FORRAS a kozos megjelenesre. Ha valami itt valtozik,
   mindharom oldalon egyszerre valtozik: nem tudnak ujra szetcsuszni.
   A fejlec MARKUPJAT a js/navigacio.js allitja elo ugyanebbol az egy
   sablonbol, ezert szerkezetileg sem terhetnek el.

   AMIHEZ NEM NYUL: az urlapok, a fizetesi folyamat, a kovetesi esemenyek es a
   jogi szovegek stilusa az oldalak sajat <style> blokkjaban maradt.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. MERETSKALA
   A tarot es az alomfejtes oldal aranyait vesszuk at: ezek toltik ki jobban a
   helyet. A numerologia oldal eddig keskenyebb tarolot (32px belso margo) es
   kisebb cimeket hasznalt, ezert levegosebbnek, de uresebbnek hatott.
--------------------------------------------------------------------------- */
:root{
  /* Tarolo: a tarot/alom 24px-es belso margoja. A numerologia 32px volt. */
  --tarolo-max: 1120px;
  --tarolo-pad: 24px;

  /* Alapszoveg. Mindharom oldalon eddig is 19px/1.6 volt, itt rogzitjuk. */
  --szoveg-alap: 19px;
  --szoveg-sor: 1.6;

  /* Cimek. A felso ertek a tarot oldale (56px); a also ertek mobilon lep
     ervenybe, es SZANDEKOSAN visszafogott: a numerologia oldalon a cim alatti
     urlap a valodi belepesi pont, azt nem szabad a hajtas ala tolni. */
  --cim-nagy: clamp(32px, 6vw, 56px);
  --cim-kozep: clamp(26px, 3.2vw, 34px);
  --cim-kicsi: 22px;

  /* Szakaszok kozotti terkoz. A numerologian 120px volt: ettol a lap
     "szellos, de ures" benyomast keltett. A tarot/alom 54-62px kozott mozog;
     ez a kozos ertek a ketto kozott all, hogy a hosszu ertekesitesi oldal se
     valjon zsufoltta. */
  --szakasz-ter: 76px;

  /* A FEJLEC MAGASSAGA. Ez a fajl egyetlen legfontosabb erteke: ettol lesz a
     harom oldal fejlece pontosan egyforma. Barhol, ahol a fejlec magassagara
     szukseg van (pl. a hero teljes-kepernyos magassaganal), EZT kell hasznalni,
     nem beirt szamot. */
  --fejlec-magassag: 64px;
}

@media (max-width:680px){
  :root{
    --tarolo-pad: 20px;
    --szakasz-ter: 56px;
    /* Mobilon ket sorba tordel a fejlec (marka + gomb, alatta a menu), ezert
       magasabb. Mindharom oldalon UGYANENNYI. */
    --fejlec-magassag: 94px;
  }
}

/* ---------------------------------------------------------------------------
   2. KOZOS FEJLEC
   Felepitese mindharom oldalon azonos es ebben a sorrendben:
       marka (balra)  |  termekmenu  |  oldal sajat gombja (jobbra)
   A gomb az adott oldal sajat urlapjara gorget, ezert a hirdetesbol erkezot
   nem viszi el masik termekre. A szovege oldalankent kulonbozik, a HELYE es a
   MERETE nem.
--------------------------------------------------------------------------- */
.fejlec{
  position:sticky; top:0; z-index:60;
  height:var(--fejlec-magassag);
  background:rgba(7,12,30,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(201,169,97,.18);
}
.fejlec .fejlec-belso{
  max-width:var(--tarolo-max); margin:0 auto; padding:0 var(--tarolo-pad);
  height:100%;
  display:flex; align-items:center; gap:16px;
}

/* A KET SZELSO ZONA EGYFORMA SZELES (flex:1 1 0), ezert a menu PONTOSAN
   kozepen all — fuggetlenul attol, milyen hosszu az adott oldal gombszovege.
   Ez nem szepsegkerdes: "space-between" mellett a menu oldalankent 13px-et
   ugrott ("Kerd az elemzesed" vs "Fejtsd meg az almod"), es atkattintaskor ez
   latszott. Igy a harom oldalon minden ugyanott van. */
/* -----------------------------------------------------------------------
   MIERT ILYEN RESZLETES ES ILYEN ERES A KOVETKEZO HAROM SZABALY (2026-10-13)
   A fejlec harom KULONBOZO oldal sajat <style> blokkja MELLETT el. Azok a
   blokkok KESOBB toltodnek be, mint ez a fajl, tehat azonos eross?gu
   szelektornal OK nyernenek. Ket vedelem epult be:

   1. SZELEKTOR-EROSSEG: minden szabaly ".fejlec" ososztallyal kezdodik
      (pl. ".fejlec .fejlec-menu a"), igy egy oldal sajat ".fejlec-menu a"
      szabalya mar NEM tudja felulirni.

   2. SEMMI NEM OROKLODIK. Minden betu-tulajdonsag KI VAN IRVA: csalad,
      meret, vastagsag, dolt, sormagassag, betukoz, kisbetu/nagybetu,
      alahuzas, szin. Ami nincs kiirva, az az oldal body-jabol oroklodne —
      es a harom oldal body-ja kulonbozhet.

   3. CSAK PX. Semmi rem/em/%, mert azok az oldal gyoker- vagy
      body-betumeretetol fuggenenek.

   ENNEK VOLT VALODI OKA: az eles oldalon a numerologia menuje 11px/1.32px
   volt, a tarote 12px/1.2px — a harom felirat lathatoan kisebb volt a
   numerologian. Ez a blokk teszi lehetetlenne, hogy ez visszaterjen.
   ----------------------------------------------------------------------- */
.fejlec .fejlec-marka{
  display:flex; align-items:center; gap:9px;
  flex:1 1 0; min-width:0;
  font-family:'Cinzel',serif; font-size:14px; font-weight:400; font-style:normal;
  line-height:22px; letter-spacing:1.96px;
  text-transform:uppercase; text-decoration:none;
  color:#e6c98a; white-space:nowrap;
}
.fejlec .fejlec-marka svg{width:15px; height:15px; flex:0 0 auto;}
.fejlec .fejlec-gombhely{flex:1 1 0; min-width:0; display:flex; justify-content:flex-end;}

.fejlec .fejlec-menu{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.fejlec .fejlec-menu a{
  font-family:'Cinzel',serif; font-size:12px; font-weight:400; font-style:normal;
  line-height:19px; letter-spacing:1.2px;
  text-transform:uppercase; text-decoration:none;
  color:#cfc6ae;
  padding:8px 13px; border-bottom:2px solid transparent; white-space:nowrap;
}
.fejlec .fejlec-menu a:hover{color:#e6c98a;}
.fejlec .fejlec-menu a[aria-current="page"]{color:#e6c98a; border-bottom-color:#c9a961;}

.fejlec .fejlec-cta{
  flex:0 0 auto;
  font-family:'Cinzel',serif; font-size:12px; font-weight:400; font-style:normal;
  line-height:18px; letter-spacing:1.2px;
  text-transform:uppercase; white-space:nowrap;
  border:1px solid #c9a961; color:#e6c98a; background:none;
  padding:9px 18px; border-radius:2px; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.fejlec .fejlec-cta:hover{background:#c9a961; color:#070c1e;}

/* Mobil: ket sor. A marka es a gomb egy sorban, alatta a menu kozepen.
   A magassagot a --fejlec-magassag rogziti, igy itt sem ugrik meg semmi. */
/* Mobil: ket sor. A marka es a gomb egy sorban, alatta a menu kozepen.
   A magassagot a --fejlec-magassag rogziti, igy itt sem ugrik meg semmi.
   A szelektorok itt is ".fejlec"-kel kezdodnek, es a betumeretek px-ben
   allnak: lasd a fenti magyarazatot. */
@media (max-width:680px){
  .fejlec .fejlec-belso{
    flex-wrap:wrap; align-content:center; gap:0;
    padding:0 12px;
  }
  /* Mobilon a menu sajat sorba kerul, tehat nem kell kozepre kenyszeriteni a
     ket szelso zonaval: itt a marka a tartalma szerint keskeny, a gomb pedig
     jobbra zarva all. */
  .fejlec .fejlec-marka{
    flex:0 1 auto;
    font-size:13px; letter-spacing:1.3px; line-height:20px;
    gap:7px; padding:9px 0 5px;
  }
  .fejlec .fejlec-marka svg{width:13px; height:13px;}
  .fejlec .fejlec-gombhely{flex:1 1 auto;}
  .fejlec .fejlec-cta{font-size:10px; letter-spacing:.6px; line-height:15px; padding:7px 11px;}
  .fejlec .fejlec-menu{
    order:3; width:100%; justify-content:center; gap:0; padding-bottom:3px;
  }
  .fejlec .fejlec-menu a{
    font-size:11px; letter-spacing:.77px; line-height:17px; padding:5px 10px;
  }
}
/* Nagyon keskeny keszuleken (360px alatt) a hosszabb gombszoveg kiszorulna. */
@media (max-width:359px){
  .fejlec .fejlec-marka{font-size:11px; letter-spacing:.66px; line-height:17px;}
  .fejlec .fejlec-cta{font-size:9px; letter-spacing:.54px; line-height:14px; padding:6px 8px;}
  .fejlec .fejlec-menu a{font-size:10px; letter-spacing:.7px; line-height:15px; padding:5px 7px;}
}

/* A HORGONYOK a ragados fejlec ALA ne csusszanak.
   MIERT FONTOS: a Google Ads sitelinkjei horgonyokra mutatnak (#ajanlat,
   #velemenyek, #miert). Enelkul a hirdetesbol erkezo latogato ugy erkezne,
   hogy a celzott szakasz cime a fejlec mogott van. */
:where([id]) { scroll-margin-top: calc(var(--fejlec-magassag) + 16px); }

/* ---------------------------------------------------------------------------
   3. "NEZD MEG A TOBBIT IS" — a masik ket termek
   HELYE SZIGORU: a fo tartalom es az ingyenes elozetes UTAN, a lablec ELOTT.
   Nem kerulhet a fejlecbe, az urlap melle vagy a hero resze, mert akkor a
   hirdetesbol erkezot a megrendeles elott vinne el a termekrol.
--------------------------------------------------------------------------- */
.tovabbi{
  border-top:1px solid rgba(201,169,97,.16);
  padding:calc(var(--szakasz-ter) * .75) 0;
}
.tovabbi-belso{max-width:var(--tarolo-max); margin:0 auto; padding:0 var(--tarolo-pad);}
.tovabbi-cim{
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#8b7345; text-align:center;
  margin-bottom:22px;
}
.tovabbi-lista{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.tovabbi-elem{
  flex:1 1 300px; max-width:420px;
  display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(201,169,97,.22); padding:20px 22px;
  transition:border-color .3s ease;
}
.tovabbi-elem:hover{border-color:rgba(201,169,97,.5);}
.tovabbi-nev{
  display:block; font-family:'Cinzel',serif; font-size:17px;
  color:#e6c98a; margin-bottom:7px;
}
.tovabbi-leiras{
  display:block; font-size:16px; line-height:1.55; color:#8d96ad;
  margin-bottom:10px;
}
.tovabbi-ar{
  display:block; font-family:'Cinzel',serif; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:#c9a961;
}
@media (max-width:680px){
  .tovabbi-lista{flex-direction:column; gap:12px;}
  /* A "flex:1 1 300px" OSZLOPIRANYBAN a MAGASSAGRA vonatkozna, es a ket kartya
     300px magasra nyulna. Mobilon ezert a tartalom szabja meg a magassagot. */
  .tovabbi-elem{flex:0 0 auto; max-width:none; padding:17px 18px;}
  .tovabbi-nev{font-size:16px;}
  .tovabbi-leiras{font-size:15px;}
}