/* ==========================================================================
   Pro Relationship – Párkapcsolati Ji King
   Meleg papír, mély szilva és barack – a referenciakép (Betheme beauty5) párosa.
   Betűrendszer: Playfair Display (címek, idézetek) / Poppins (minden más)
   Referenciaszélesség: 1440 px, 1060 px tartalomszélességgel, bőséges levegővel.
   ========================================================================== */

/* Poppins (szöveg) és Playfair Display (címek) – a Google Fonts eredeti,
   magyarra is teljes latin + latin-ext metszetei, saját kiszolgálásból.
   A unicode-range miatt a böngésző csak azt tölti le, amire tényleg szükség van. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Színek – a referenciaképről levett páros:
       mély szilva #34252f + barack #fdb37e.
     A szilva a könyvborító színcsaládjában van (320°), csak letompítva –
     ezért keretezi a könyvet ahelyett, hogy versenyezne vele.
     A barack a hangsúly színe; világos alapon sötétebb fokozata kell,
     hogy a szöveg is átmenjen AA-n. Fekete nincs az oldalon. */
  --papir: #fdfaf6;        /* az oldal alapja: meleg papír */
  --feher: #ffffff;
  --homok: #f8f0e9;        /* az EGYETLEN halk sáv (vélemények) */
  --derengo: #fdf6ef;      /* a nyitó rész leheletnyi melegsége */
  --mely: #34252f;         /* a sötét blokk – mély szilva, nem fekete */

  --tinta: #34252f;        /* szöveg: ugyanaz a szilva, nem korom */
  --halvany: #6e6066;      /* másodlagos szöveg – AA minden világos alapon */
  --vonal: #e9e1e4;        /* hajszálvonal */

  --gomb: #34252f;         /* elsődleges gomb: mély szilva, fehér felirattal */
  --gomb-sotet: #241a21;
  --gomb-halvany: #f3eae2;
  --kicker-szin: #6e6066;
  --cimke-szin: #a35a2e;

  /* A barack négy fokozata. A sorrend számít: melyik min hány:1 kontrasztot ad.
     --kiemelo-vilagos KIZÁRÓLAG sötét alapon használható. */
  --kiemelo-vilagos: #fdb37e;  /* 8.2:1 a szilván – a referenciakép barackja */
  --kiemelo: #c2764a;          /* vonalak, ikonok, keretek világos alapon (3:1) */
  --kiemelo-szoveg: #a35a2e;   /* barack, ami szövegként is olvasható (AA, 5:1) */
  --kiemelo-halvany: #edd3be;  /* eltolt keretek, halk jelek */

  /* Régi nevek, hogy a meglévő szabályok ne törjenek – ugyanaz a barackcsalád */
  --arany: var(--kiemelo);
  --arany-szoveg: var(--kiemelo-szoveg);
  --arany-halvany: var(--kiemelo-halvany);

  /* Semleges díszítő árnyalatok – apró foltokban, sosem szekcióháttérként */
  --barack: #f6e7da;
  --barack-mely: #e6c8ab;
  --rozsa: #d2a07c;
  --orgona: #bda9b2;
  --zsalya: #f4efe8;
  --puder: #fdf6ef;

  /* Betűk */
  --cim: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --szoveg: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Méretek (a látványterv px-értékei reszponzívan) */
  /* Betűskála. A korábbi 96/80 px-es címsorok a „bemutatós” tartományban
     voltak: szépek egy képernyőképen, de görgetésre riasztóak. Az UI-szakma
     32–36 px-es h1-et ajánl tartalmi oldalra; egy értékesítő oldal hőse
     ennél nagyobb lehet, de a kettő között van a használható sáv.
     Itt a h1 56, a h2 42 px-en áll nagy képernyőn. */
  --t-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);         /* 36 → 56px */
  --t-h2: clamp(1.875rem, 1.5rem + 1.7vw, 2.625rem);      /* 30 → 42px */
  --t-h2-nagy: clamp(2rem, 1.6rem + 1.9vw, 3rem);         /* 32 → 48px */
  --t-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);      /* 20 → 26px */
  --t-kartya: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);/* 18 → 22px */
  --t-kicker: 0.8125rem;                                  /* 13px, ritkított nagybetűs */
  --t-idezet: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);    /* 20 → 28px */
  --t-bev: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* 18px */
  --t-alap: 1rem;                                          /* 16px, mint a példaoldalon */
  --t-kicsi: 0.9375rem;                                   /* 15px */
  --t-apro: 0.875rem;                                     /* 14px – mobilon is jól olvasható */

  /* Rács */
  --szel: min(66.25rem, 100% - 2.5rem);       /* 1060px, mint a példaoldalon */
  --kozep: min(52rem, 100% - 2.5rem);
  --keskeny: min(38rem, 100% - 2.5rem);
  --szakasz-y: clamp(3rem, 1.5rem + 4.5vw, 6.875rem);  /* 110px, mint a példaoldalon */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: var(--szoveg);
  font-size: var(--t-alap);
  font-weight: 400;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  /* clip, nem hidden: a hidden görgetőkonténerré tenné a body-t, és attól a
     görgetésvezérelt animációk befagynának. A clip ugyanúgy levágja a
     vízszintes kilógást, de nem hoz létre görgetőkonténert. */
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--gomb-sotet); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
blockquote, figure { margin: 0; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--gomb); outline-offset: 3px; border-radius: 4px; }

/* A példaoldal nyomdokán: nagy, vékony, nyugodt címek – nem félkövérek. */
h1, h2, h3, h4 { font-family: var(--cim); font-weight: 400; margin: 0 0 0.5em; letter-spacing: 0; text-wrap: balance; color: var(--tinta); }
h1 { line-height: 1.16; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
h4 { line-height: 1.35; }
h1 { font-size: var(--t-h1); line-height: 1.1; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }
em, .dolt { font-style: italic; }

/* Segédosztályok ---------------------------------------------------------- */
.szel { width: var(--szel); margin-inline: auto; }
.kozep { width: var(--kozep); margin-inline: auto; }
.keskeny { width: var(--keskeny); margin-inline: auto; }
.szakasz { padding-block: var(--szakasz-y); position: relative; }
.szakasz.fent0 { padding-top: 0; }
.sav-barack { background: var(--barack); }
.sav-feher { background: var(--feher); }
.kozepre { text-align: center; }
.rejtett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atugro { position: absolute; left: -9999px; top: 0; background: var(--feher); color: var(--tinta); padding: 0.75rem 1.25rem; z-index: 50; }
.atugro:focus { left: 0; }

.bevezeto { font-size: var(--t-bev); line-height: 1.85; color: var(--halvany); }
.kicsi { font-size: var(--t-kicsi); line-height: 1.6; color: var(--halvany); }
.apro { font-size: var(--t-apro); line-height: 1.6; color: var(--halvany); }
.kozepre .bevezeto { margin-inline: auto; }

/* Folió: oldalszám, mintaszám – ahogy a könyv lapjának szélén állna.
   Nem ritkított nagybetűs szemöldök: tényleges adat, ezért olvasható marad. */
.cimke { font-family: var(--cim); font-size: 0.9375rem; font-style: italic; color: var(--cimke-szin); }

/* A nyitó jelzése: a könyv jele, majd egy mondat – nem felirat a cím fölött */
.nyito__jel { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.5rem;
  font-size: 0.9375rem; color: var(--halvany); }

/* Dekoratív pasztell négyzetek */
.negyzetek { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.szakasz > .szel, .szakasz > .kozep, .szakasz > .keskeny { position: relative; z-index: 1; }
.negyzetek span { position: absolute; display: block; width: 1.75rem; height: 0.875rem; --jel: var(--arany); }
/* Ég ☰ – három folytonos vonal */
.negyzetek span { background-image: repeating-linear-gradient(to bottom, var(--jel) 0 2px, transparent 2px 6px); }
/* Föld ☷ – ugyanaz, középen megtörve */
.negyzetek span:nth-child(even) {
  background-image:
    linear-gradient(to right, transparent 0 41%, var(--tores, var(--papir)) 41% 59%, transparent 59% 100%),
    repeating-linear-gradient(to bottom, var(--jel) 0 2px, transparent 2px 6px);
}
@media (max-width: 60rem) { .negyzetek { display: none; } }

/* Gombok ------------------------------------------------------------------ */
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.85rem 1.9rem;
  border: 1.5px solid var(--gomb); border-radius: 999px;
  background: var(--gomb); color: #fff;
  font-family: var(--szoveg); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
/* Rávitelkor a tömör szilva gomb kivilágosodik: átvált a másik készlet
   elsődleges párosára – barack alap, szilva felirat. Ez szándékosan nagy
   ugrás. Korábban egy árnyalatnyit sötétedett (#34252f → #241a21), amit
   gyakorlatilag nem lehetett észrevenni, így a gomb halottnak hatott.
   A felirat ettől is olvasható marad: szilva barackon 8,2:1. */
.gomb:hover { background: var(--kiemelo-vilagos); border-color: var(--kiemelo-vilagos); color: var(--mely); }
.gomb:active { transform: translateY(1px); }
.gomb[disabled] { opacity: 0.6; cursor: progress; }
/* ---------------------------------------------------------------------------
   A gombrendszer: pontosan KÉT készlet, aszerint, min állnak.

   VILÁGOS alapon   elsődleges: tömör szilva, fehér felirattal        (.gomb)
                    másodlagos: üres, 1 px barack vonal, szilva felirat
                                – rávitelkor a vonal színére telik    (.gomb--korvonal)
   SÖTÉT alapon     elsődleges: tömör barack, szilva felirattal       (.gomb--vilagos)
                    másodlagos: üres, 1 px barack vonal, barack felirat
                                – rávitelkor barackra telik           (.gomb--vilagos.gomb--korvonal)

   Harmadik kombináció nincs. Ha új gomb kell, az egyik készletből válassz.
   --------------------------------------------------------------------------- */
.gomb--vilagos { background: var(--kiemelo-vilagos); color: var(--mely); border-color: var(--kiemelo-vilagos); }
/* Sötét alapon ugyanez fordítva nem megy – szilvára váltva eltűnne a sávban –,
   ezért itt a barack világosodik ki határozottan (#fdb37e → #ffdfc2).
   A korábbi #fcc79b túl közeli lépés volt. */
.gomb--vilagos:hover { background: #ffdfc2; border-color: #ffdfc2; color: var(--mely); }
.gomb--teljes { width: 100%; }
.gombsor { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; }
.szoveglink { font-weight: 500; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--arany); text-underline-offset: 0.3em; }

/* Fejléc ------------------------------------------------------------------ */
.fejlec { position: sticky; top: 0; z-index: 30; background: rgba(255, 253, 252, 0.88); backdrop-filter: saturate(1.1) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s, background-color 0.2s; }
.fejlec.gorgetve { border-bottom-color: var(--vonal); }
.fejlec__belso { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 6rem; }
/* A fejléc tartalomsávja 1060 px-nél sosem szélesebb, ezért az öt menüpont
   térköze nem lehet képernyőfüggő: ez az érték minden szélességen érvényes. */
.fejlec nav { display: flex; align-items: center; gap: 1.375rem; }
.fejlec nav a:not(.gomb) { color: var(--tinta); text-decoration: none; font-size: var(--t-apro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.fejlec nav a:not(.gomb):hover { color: var(--gomb); }
.fejlec .gomb { min-height: 2.75rem; padding: 0.5rem 1.375rem; font-size: 0.8125rem; }
/* 1088 px alatt tömörebb menü, 992 px alatt csak a logó és a vásárlás gomb marad */
/* Keskenyebb ablakon még ennél is szorosabban: ott a logó és a navigáció
   közti rés fogy el előbb. */
@media (max-width: 72rem) { .fejlec nav { gap: 1rem; } .fejlec nav a:not(.gomb) { font-size: 0.75rem; letter-spacing: 0.06em; } }
@media (max-width: 62rem) { .fejlec nav a:not(.gomb) { display: none; } .fejlec__belso { min-height: 4.75rem; } }

/* Logó */
.logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.logo svg { flex: none; width: 3.875rem; height: 2.5rem; }
.logo__nev { display: flex; flex-direction: column; line-height: 1; }
.logo__nev b { font-family: var(--cim); font-size: 1.8125rem; font-weight: 500; color: var(--tinta); white-space: nowrap; }
.logo__nev span { font-size: 0.5625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--halvany); margin-top: 5px; }
.logo--vilagos .logo__nev b { color: var(--puder); }
.logo--vilagos .logo__nev span { color: #d2a07c; }
@media (max-width: 30rem) {
  .logo svg { width: 2.625rem; height: 1.7rem; }
  .logo__nev b { font-size: 1.1875rem; }
  .logo__nev span { font-size: 0.4375rem; letter-spacing: 0.2em; }
  .fejlec__belso { gap: 0.75rem; }
  .fejlec .gomb { padding: 0.5rem 1rem; letter-spacing: 0.1em; }
}
@media (max-width: 22.5rem) {
  .logo__nev span { display: none; }
  .logo__nev b { font-size: 1.0625rem; }
  .fejlec .gomb { padding: 0.45rem 0.75rem; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .logo svg { width: 2.125rem; height: 1.37rem; }
  .fejlec__belso { gap: 0.5rem; }
}

/* Nyitó rész -------------------------------------------------------------- */
.nyito { position: relative; background: var(--derengo); overflow: hidden; padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) clamp(7rem, 4rem + 10vw, 12.5rem); }
.nyito__racs { display: grid; gap: clamp(2.5rem, 1rem + 6vw, 2.5rem); align-items: center; position: relative; z-index: 2; }
@media (min-width: 62rem) { .nyito__racs { grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; } }
.nyito h1 { margin-bottom: 1.625rem; }
/* A dőlt szedés innen a megrendelő kérésére került ki – ne tedd vissza. */
.nyito__alcim { margin: 0 0 1.375rem; font-family: var(--cim); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--gomb-sotet); }
.nyito .bevezeto { max-width: 35rem; margin-bottom: 2.125rem; }
.nyito__ar { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
/* A három biztosíték egy sorban álljon – a tördelés csak telefonon engedett.
   A sorköz ezért szűkül, a felirat pedig nem törhet szét. */
.nyito__biztositek { display: flex; flex-wrap: nowrap; gap: 0 clamp(0.875rem, 0.3rem + 1.4vw, 1.75rem);
  margin: 2.25rem 0 0; padding: 0; list-style: none; }
.nyito__biztositek li { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  font-size: clamp(0.8125rem, 0.72rem + 0.2vw, 0.875rem); color: var(--halvany); }
.nyito__biztositek svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--kiemelo); }
/* Telefonon nem fér el mind a három egy sorban, és a 2+1-es tördelés
   csúnya: ott inkább tiszta, egymás alatti lista legyen. */
@media (max-width: 48rem) {
  .nyito__biztositek { flex-direction: column; gap: 0.7rem; }
}

/* Könyv a körökön.
   A hexagram-jelek bele vannak égetve a borító PNG-jébe, ezért a kép méretét
   a díszítő gyűrű köti meg: ha a borító nagyobb lenne, a jelek vele nőnének,
   és kilépnének a körből. Egy próbálkozás megnagyobbította (és a jeleket
   CSS-be emelte) – visszavontuk. Ha mégis nagyobb könyv kell, előbb a kép
   kell díszítés nélkül, nem a méretet kell felhúzni. */
.nyito__konyv { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(20rem, 15rem + 22vw, 39rem); }
.nyito__konyv::before, .nyito__konyv::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.nyito__konyv::before { width: clamp(16rem, 38.9vw, 35rem); aspect-ratio: 1;
  background: var(--barack); opacity: 0.55; }
.nyito__konyv::after { width: var(--gyuru); aspect-ratio: 1; border: 1px solid var(--arany); opacity: 0.6; }
.nyito__konyv { --gyuru: clamp(17.7rem, 43vw, 38.75rem); }

/* Árcímke: a nyitóban ez az egyetlen árjelzés.
   Tömör barack, szilva felirattal – a gombrendszer sötét alapra szánt
   elsődleges párosa, 8,2:1 kontraszttal. A lila borítón ez a meleg folt a
   kiegészítő szín, és nem kever be új árnyalatot az oldalra.

   A helyét a BORÍTÓ dobozához méri, nem a gyűrűhöz: így a könyv bal alsó
   sarkához tartozik, és nem lebeg külön a körön. A 3D render alja a kép
   88%-ánál van, ezért a címke a 4,5%-nál ül: épp csak hozzáér a könyv alsó
   éléhez, és nem takarja a borító saját szövegét. */
.nyito__borito { position: relative; display: block; }
.nyito__arcimke { position: absolute; z-index: 2; margin: 0;
  left: 15%; bottom: 4.5%;
  background: var(--kiemelo-vilagos); color: var(--mely);
  font-family: var(--cim); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 500;
  line-height: 1; padding: 0.68em 1.05em; border-radius: 999px; white-space: nowrap; }
.nyito__arcimke span { font-family: var(--szoveg); font-size: 0.72em; font-weight: 400; }
/* Telefonon a borító kisebb, a címke viszont nem zsugorodik vele: ott
   arányosan nagyobbnak látszana, ezért külön visszavesszük. */
@media (max-width: 48rem) {
  .nyito__arcimke { left: 11%; bottom: 2%; font-size: 0.875rem; padding: 0.62em 0.95em; }
}

/* A kör a képpel együtt jobbra tolva: a gyűrű bal íve eddig a bekezdés
   sorvégeihez ért. Az eltolás nem a rácsot bontja meg, csak ezt a dobozt
   mozdítja, és a felső határt a jobb oldali margó szabja meg. */
@media (min-width: 62rem) {
  .nyito__konyv { translate: clamp(1rem, calc((100vw - 66.25rem) / 2 - 3.5rem), 4.5rem) 0; }
  /* A kör a saját középmagasságában a legszélesebb – épp ott, ahol a bevezető
     sorai futnak. Az eltolás egymagában nem elég: a sorok hosszát is meg kell
     fogni, különben a leghosszabb sor újra odaér az ívhez. 28 rem-nél a sor
     nagyjából 56 karakter, ami amúgy is kedvezőbb olvasási hossz. */
  .nyito .bevezeto, .nyito__alcim { max-width: 28rem; }
}
.nyito__konyv img { position: relative; width: clamp(17rem, 41.7vw, 37.5rem); height: auto; }

/* Hullám a nyitó rész alján */
.hullam { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; pointer-events: none; }
.hullam svg { display: block; width: 100%; height: clamp(4.5rem, 2rem + 8vw, 10.625rem); }

/* Miért más ez a könyv ----------------------------------------------------- */

/* Ismerős? ---------------------------------------------------------------- */
.ismeros { padding-top: 0; }
.ismeros__racs { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .ismeros__racs { grid-template-columns: 0.9fr 1.1fr; gap: 5.625rem; } }
.ismeros__kep { position: relative; }
.ismeros__kep img { width: 100%; height: clamp(22rem, 15rem + 22vw, 38.75rem); object-fit: cover; border-radius: 300px 300px 0 0; }
.ismeros__kep .negyzetek span:nth-child(1) { left: -26px; top: 60px; --jel: var(--rozsa); }
.ismeros__kep .negyzetek span:nth-child(2) { left: -58px; top: 110px; --jel: var(--orgona); }
.ismeros__kep .negyzetek { overflow: visible; }
.ismeros__lista { list-style: none; margin: 1.125rem 0 1.875rem; padding: 0; border-top: 1px solid var(--vonal); }
.ismeros__lista li { display: flex; gap: 1.125rem; align-items: baseline; padding: 1.125rem 0; border-bottom: 1px solid var(--vonal); font-size: var(--t-bev); line-height: 1.5; color: var(--tinta); }
.ismeros__idezet { margin: 1.625rem 0 0; font-family: var(--cim); font-style: italic; font-size: var(--t-idezet); line-height: 1.4; color: var(--tinta); }

/* CTA-szalag -------------------------------------------------------------- */
.cta-szalag { background: var(--mely); color: #fff; text-align: center; padding-block: clamp(4rem, 2.5rem + 4.5vw, 6.25rem); }
.cta-szalag h2 { color: #fff; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem); margin-bottom: 0.45em; }
.cta-szalag p { color: #ffffff; max-width: 35rem; margin: 0 auto 2.125rem; font-size: var(--t-alap); line-height: 1.7; }

/* Mi van a könyvben -------------------------------------------------------- */
.tartalom { overflow: hidden; }
.tartalom .negyzetek span:nth-child(1) { left: 0; top: 4.5rem; --jel: var(--rozsa); }
.tartalom .negyzetek span:nth-child(2) { left: 36px; top: 7rem; --jel: var(--arany-halvany); }
.tartalom .negyzetek span:nth-child(3) { right: 60px; bottom: 9rem; --jel: var(--orgona); }
.tartalom .negyzetek span:nth-child(4) { right: 20px; bottom: 6.5rem; --jel: var(--barack-mely); }
.tartalomjegyzek { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vonal); }
.tartalomjegyzek li { display: grid; grid-template-columns: 5.25rem 1fr; gap: 0 1.75rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--vonal); align-items: baseline; }
.tartalomjegyzek__oldal { font-family: var(--cim); font-size: 1.0625rem; font-style: italic;
  color: var(--arany-szoveg); white-space: nowrap; letter-spacing: 0.01em; }
.tartalomjegyzek h3 { font-family: var(--cim); font-size: var(--t-kartya); font-weight: 500; line-height: 1.2; margin: 0 0 0.3rem; }
.tartalomjegyzek p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--halvany); max-width: 34rem; }
@media (max-width: 34rem) {
  .tartalomjegyzek li { grid-template-columns: 1fr; gap: 0.35rem; }
  .tartalomjegyzek__oldal { font-size: 0.9375rem; }
}
/* Meditációs sáv: ráadás, nem ajánlat.
   Halk homokpanel barack oldalvonallal – látszik, hogy külön tétel, de nem
   versenyez a szakasz végén álló „Megveszem a könyvet” gombbal: a hívása
   szöveglink, nem gomb. */
.meditacio-sav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; background: var(--gomb-halvany); border-left: 2px solid var(--kiemelo); padding: 1.25rem 1.5rem; }
.meditacio-sav__szoveg { display: flex; align-items: center; gap: 1rem; }
.meditacio-sav__szoveg > svg { flex: none; width: 2.125rem; height: 2.125rem; color: var(--kiemelo); }
.meditacio-sav h3 { font-family: var(--szoveg); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; margin: 0; color: var(--tinta); }
.meditacio-sav span { font-size: var(--t-kicsi); color: var(--halvany); }
.meditacio-sav .szoveglink { font-size: var(--t-kicsi); }
@media (max-width: 30rem) { .meditacio-sav { padding: 1.125rem 1.25rem; } }

/* Érmedobás – egyetlen, kiemelkedő kártya ---------------------------------- */
.dobas { background: var(--papir); }
.dobas h2 { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); margin-bottom: 0.35em; }
.dobas .bevezeto { max-width: 30rem; margin-bottom: 1.75rem; }

/* Érmék */
.ermek { display: flex; gap: clamp(0.75rem, 3vw, 1.25rem); margin-bottom: 1.5rem; perspective: 900px; }
.erme-tok { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.erme-tok span { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--halvany); min-height: 1em; }
/* Kínai pénzérme: lapos karika, közepén négyzet alakú lyuk – ezzel vetnek
   a Ji Kinghez. A fej a sima hátlap, az írás a feliratos előlap. */
.erme { position: relative; width: clamp(3.25rem, 11vw, 4.25rem); height: clamp(3.25rem, 11vw, 4.25rem);
  display: grid; place-items: center; font-size: 0; color: var(--arany); }
.erme__rajz { width: 100%; height: 100%; }
.erme--iras { color: var(--tinta); }
.erme.porog { animation: porog 0.7s cubic-bezier(0.25, 0.7, 0.35, 1); }
@keyframes porog { 0% { transform: rotateY(0) translateY(0); } 45% { transform: rotateY(540deg) translateY(-16px); } 100% { transform: rotateY(1080deg) translateY(0); } }

.dobas__sor { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; }
.dobas__gomb .szam { font-size: 1rem; font-weight: 400; letter-spacing: 0.02em; opacity: 0.85; text-transform: none; }
.dobas__allapot { margin: 0; font-size: var(--t-kicsi); color: var(--halvany); min-height: 1.6em; flex: 1 1 12rem; }

/* A hexagram oszlopa */
.dobas__iv { position: relative; justify-self: center; width: min(21rem, 100%); background: var(--feher); border-radius: 160px 160px 24px 24px; padding: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) 1.5rem clamp(1.75rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.dobas__iv::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--arany-halvany); border-radius: 152px 152px 16px 16px; pointer-events: none; }
.dobas__vonalak { display: flex; justify-content: center; color: var(--arany); }
.dobas__vonalak .hexagram rect.ures { fill: var(--vonal); }
.dobas__vonalak .hexagram rect.valtozo { fill: var(--gomb); }
.dobas__felirat { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--halvany); margin: 0; }

/* Eredmény */
.dobas__eredmeny { margin-top: 1.5rem; padding-top: 1.375rem; border-top: 1px solid var(--vonal); }
.dobas__szam { margin: 0 0 0.25rem; font-size: var(--t-apro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--arany-szoveg); }
.dobas__nev { margin: 0 0 0.6rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.05; }
.dobas__eredmeny p { color: var(--halvany); font-size: 1rem; line-height: 1.65; }
.dobas__eredmeny .gombsor { margin-top: 1.25rem; }
.dobas__segitseg { color: var(--gomb-sotet) !important; }

/* Leggyakoribb minták ------------------------------------------------------ */

/* Belelapozás – igazi könyvoldalpár ---------------------------------------
   Két oldal egy gerinc két felén: a bal oldal belső éle sötétebb, a jobbé
   világosabb, középen a kötés árnyéka. A lapozás a gerincnél fordul el,
   mint a papír. Minden mozgás kattintásra indul, sosem magától. */
.lapozo { position: relative; margin-top: 2.5rem; background: none; }
.lapozo__konyv { position: relative; perspective: 2000px; cursor: grab; touch-action: pan-y; }
/* Könyvtábla: a lapok köré sötét szövettábla és egy aranyozott belső vonal.
   Nem árnyék és nem keret a lapon kívül – a tábla maga a könyv. A pseudo-elemek
   a lapok MÖGÖTT állnak (z-index: -1), így a lapozás geometriája nem változik. */
.lapozo__konyv::before {
  content: ''; position: absolute; inset: -14px -14px -14px -14px; z-index: -2;
  background: var(--kiemelo); border-radius: 4px; pointer-events: none;
}
.lapozo__konyv::after {
  content: ''; position: absolute; inset: -7px; z-index: -1;
  border: 1px solid var(--barack); border-radius: 2px; opacity: 0.85; pointer-events: none;
}
/* a gerinc: egy hajszálvonal a két lap között, és a lapok alsó éle halványan elválik */
@media (min-width: 40rem) {
  .lapozo__tukor { position: relative; }
  .lapozo__tukor::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px;
    background: linear-gradient(to bottom, transparent, rgba(52, 37, 47, 0.16) 12%, rgba(52, 37, 47, 0.16) 88%, transparent);
    pointer-events: none; z-index: 2;
  }
}
@media (max-width: 40rem) {
  .lapozo__konyv::before { inset: -8px; }
  .lapozo__konyv::after { inset: -4px; }
}
.lapozo__konyv--huzas { cursor: grabbing; user-select: none; }
.lapozo__konyv--huzas * { pointer-events: none; }

.lapozo__tukor { display: grid; }
.lapozo__tukor[hidden] { display: none; }
@media (min-width: 52rem) {
  .lapozo__tukor { grid-template-columns: 1fr 1fr; }
  /* a kötés: a lapok belső éle felé sötétedő papír */
  .lapozo__oldal--bal { background: linear-gradient(to right, var(--feher) 72%, #f5ece3 100%); }
  .lapozo__oldal--jobb { background: linear-gradient(to left, var(--feher) 72%, #f5ece3 100%); border-left: 1px solid var(--vonal); }
}
.lapozo__oldal {
  position: relative; background: var(--feher);
  padding: clamp(2rem, 1.25rem + 3.5vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 3.25rem) clamp(3.25rem, 2.5rem + 2vw, 4rem);
  min-height: clamp(20rem, 14rem + 18vw, 27rem);
}
/* oldalszám a külső alsó sarokban, ahogy a könyvben */
.lapozo__folio { position: absolute; bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-family: var(--cim); font-style: italic; font-size: 0.9375rem; color: var(--halvany); }
.lapozo__oldal--bal .lapozo__folio { left: clamp(1.5rem, 1rem + 3vw, 3.25rem); }
.lapozo__oldal--jobb .lapozo__folio { right: clamp(1.5rem, 1rem + 3vw, 3.25rem); }

.lapozo__fej { display: flex; gap: 1.125rem; align-items: center; margin-bottom: 1.5rem; }
.lapozo__fej .hexagram { color: var(--arany); flex: none; }
.lapozo__fej p { margin: 0 0 0.15rem; }
.lapozo__fej h3 { margin: 0; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); line-height: 1.25; }
.lapozo__oldal h4 { font-family: var(--cim); font-weight: 400; font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.3; margin: 0.35rem 0 1.125rem; color: var(--tinta); }
.lapozo__oldal p { line-height: 1.8; margin: 0 0 1rem; }
.lapozo__oldal ul, .lapozo__kerdesek { padding-left: 1.2rem; margin: 0; }
.lapozo__oldal li { margin-bottom: 0.8rem; line-height: 1.7; }
.lapozo__oldal li::marker { color: var(--arany); }
.lapozo__kerdesek { font-family: var(--cim); font-size: 1.0625rem; }

/* a munkafüzet üres sorai – ide ír az olvasó */
.lapozo__vonalak { display: block; margin-top: 1.5rem; height: 4.5rem;
  background: repeating-linear-gradient(to bottom, transparent 0 1.4rem, var(--vonal) 1.4rem calc(1.4rem + 1px)); }

/* az utolsó jobb oldal elhalványul: innen a könyvben folytatódik */
.lapozo__oldal--elhalo p:not(.lapozo__tovabb) { -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.15) 100%);
  mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.15) 100%); }
.lapozo__tovabb { font-family: var(--cim); font-style: italic; color: var(--arany-szoveg); font-size: 1rem; }

.motto { font-family: var(--cim); font-style: italic; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.5; margin: 0 0 1.25rem; padding-left: 1.25rem; border-left: 2px solid var(--arany); }
.mantra { text-align: center; font-family: var(--cim); font-style: italic;
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.45; margin: 1.5rem 0 0; color: var(--tinta); }

/* Lapozás: a lap a gerincnél fordul el */
/* Ahol nincs 3D lapozás (telefon, illetve csökkentett mozgás), ott
   a tartalom halkan áttűnik – nem ugrik. */
.lapozo__tukor[data-aktiv] { animation: lapAttunes 0.3s ease; }
@keyframes lapAttunes { from { opacity: 0; } to { opacity: 1; } }

/* Lapozó vezérlés */
.lapozo__labl { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.5rem, 1rem + 3vw, 3.25rem) 1.5rem; border-top: 1px solid var(--vonal); flex-wrap: wrap; }
.lapozo__pontok { display: flex; gap: 0.125rem; }
/* A két nyíl egymás mellett áll, ahogy a pontok is. (A lapozó CSS
   újraírásakor ez a sor kiesett, és a gombok blokk-szintűvé váltak.) */
.lapozo__nyilak { display: flex; align-items: center; gap: 0.6rem; }
.lapozo__pont { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.lapozo__pont::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--vonal); transition: background 0.2s, transform 0.2s; }
.lapozo__pont[aria-current='true']::before { background: var(--arany); transform: scale(1.25); }
.lapozo__nyil { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1.5px solid var(--vonal); border-radius: 50%; background: var(--feher); color: var(--tinta); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.lapozo__nyil:hover:not([disabled]) { border-color: var(--gomb); color: var(--gomb); }
.lapozo__nyil[disabled] { opacity: 0.35; cursor: default; }
.lapozo__nyil svg { width: 1.125rem; height: 1.125rem; }
.lapozo__szam { font-family: var(--cim); font-style: italic; font-size: 1rem; color: var(--halvany); }

/* A hatvannégy minta térképe ----------------------------------------------- */
/* A könyv 31. oldalán lévő hexagramtáblázat, de nem képként: minden cella egy
   minta a saját hat vonalával, és rá lehet koppintani. Ez a szakasz
   tartalomjegyzék és bizonyíték egyben – a teljesség maga az érv.
   Világos alapon áll, az érmedobás sötét sávja után. */
.terkep-sav {
  /* Halvány, pontozott világtérkép a szekció mögött: krémes fátyol fedi,
     így a rács és a szöveg olvasható marad. */
  background:
    linear-gradient(rgba(253, 250, 246, 0.86), rgba(253, 250, 246, 0.86)),
    url('/assets/img/terkep.webp') center / cover no-repeat;
  background-color: var(--papir);
}
.terkep-sav .terkep__fej { max-width: 40rem; margin-inline: auto; text-align: center; }
/* Keskenyebb, mint a keretes változat volt (46rem): keret nélkül a jelek
   között túl nagy lenne a levegő, és szétesne a rács. */
.terkep { margin-top: clamp(2rem, 1.25rem + 2.5vw, 3rem); max-width: 40rem; margin-inline: auto; }
/* Számozott rács. A korábbi változat minden cellára vitt egy keretet ÉS hat
   vonalat: 64 doboz és 384 vonal egy képernyőn, hierarchia nélkül – ettől
   volt zsúfolt. Most a szám adja a tájékozódást (hányas a 64-ből), a jel
   alatta halk aláírás, és a cellakeretek eltűnnek. A cella akkora, amekkora
   a tartalma: nincs kényszerített négyzet, így nem lesz üres tó a jelek
   körül. */
.terkep__racs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.25rem + 1vw, 1.125rem) clamp(0.25rem, 0.1rem + 0.6vw, 0.75rem); }
/* A hexagramm-tábla kerete a felette lévő boltív keretét követi: fehér, félig
   átlátszó felület, 1 px-es barack szegély, és belül egy második, behúzott vonal. */
.terkep__racs {
  position: relative;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem) clamp(0.75rem, 0.4rem + 1.6vw, 1.75rem);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #E2B99A;
  border-radius: 16px;
}
.terkep__racs::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #E2B99A;
  border-radius: 8px;
  pointer-events: none;
}
/* Telefonon négy oszlop: a nyolc oszlop 32 px-es mezőkre esne szét.
   A jel itt nagyobb, különben elveszne a széles hasábban. */
@media (max-width: 34rem) {
  .terkep__racs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .terkep__hx { width: 2.375rem; }
  .terkep__hx i { height: 3px; }
  .terkep__szam { font-size: 0.75rem; }
}
.terkep__cella {
  position: relative; display: grid; justify-items: center; gap: 0.3rem;
  border: 0; background: none; cursor: pointer; border-radius: 5px;
  padding: 0.5rem 0.25rem;
  transition: background-color 0.16s ease;
}
.terkep__szam { font-size: 0.6875rem; line-height: 1; color: var(--halvany);
  font-variant-numeric: tabular-nums; }
.terkep__hx { display: grid; width: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  gap: clamp(2px, 0.25vw, 3px); }
.terkep__hx i { display: block; height: clamp(2px, 0.25vw, 3px); background: var(--kiemelo); opacity: 0.5; }
.terkep__hx i.jin {
  background: linear-gradient(90deg, var(--kiemelo) 0 38%, transparent 38% 62%, var(--kiemelo) 62% 100%);
}
/* Keret nélkül a fókuszgyűrű az egyetlen jelzés billentyűzetnél – marad a
   globális outline, csak az egérhover kap halk alapot. */
.terkep__cella:hover, .terkep__cella:focus-visible { background: var(--gomb-halvany); }
.terkep__cella:focus-visible { outline-offset: 0; }
.terkep__cella:hover .terkep__hx i, .terkep__cella:focus-visible .terkep__hx i { opacity: 0.9; }
/* a szabadon olvashatók: teli vonal, kiemelt szám */
.terkep__cella[data-nyitott] .terkep__hx i { opacity: 1; }
.terkep__cella[data-nyitott] .terkep__szam { color: var(--kiemelo-szoveg); font-weight: 500; }
/* a kiválasztott */
.terkep__cella[aria-pressed='true'] { background: var(--gomb-halvany); }
.terkep__cella[aria-pressed='true'] .terkep__hx i { opacity: 1; }
.terkep__cella[aria-pressed='true'] .terkep__szam { color: var(--tinta); }

.terkep__labl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem;
  margin: 1.125rem 0 0; font-size: var(--t-apro); color: var(--halvany); }
.terkep__labl b { color: var(--kiemelo-szoveg); font-weight: 500; }

/* A minta felugró ablaka ---------------------------------------------------
   Natív <dialog>, mert az ingyen adja a fókuszcsapdát, az Escape-et és a
   legfelső réteget: így a ragadós fejléc és a mobil vásárlósáv fölé kerül,
   z-index-verseny nélkül. A lap korábban a térkép ALATT nyílt, ahol mobilon
   a képernyőn kívülre esett – ezért költözött középre.

   Asztalon lebegő ablak, telefonon alulról felcsúszó lap: ott a hüvelykujj
   az alsó harmadban van, és az ablak teteje nem szakad el a képernyő szélétől. */
.mintaablak {
  padding: 0; border: 0; background: none; color: var(--tinta);
  width: min(34rem, 100% - 2rem); max-width: none;
  max-height: min(84dvh, 44rem);
  margin: auto;                      /* asztalon középen */
  overflow: visible;
}
.mintaablak::backdrop { background: rgba(36, 26, 33, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .mintaablak[open] { animation: mintaBe 0.22s cubic-bezier(.2, .7, .35, 1) both; }
  .mintaablak[open]::backdrop { animation: mintaHatter 0.22s ease both; }
}
@keyframes mintaBe { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes mintaHatter { from { opacity: 0; } to { opacity: 1; } }

/* a belső doboz adja a papírt és a görgetést */
.mintaablak__torzs {
  background: var(--feher); border: 1px solid var(--vonal);
  padding: clamp(1.375rem, 1rem + 2vw, 2.25rem);
  overflow-y: auto; overscroll-behavior: contain;   /* a háttér ne görögjön vele */
  max-height: calc(min(84dvh, 44rem) - 4.5rem);
  -webkit-overflow-scrolling: touch;
}
/* A törzs csak a fókusz fogadására kattintható, gyűrűt ne rajzoljon köré:
   a nyitás ténye látszik az ablakból, és a Tab továbbra is a gombokat járja. */
.mintaablak__torzs:focus { outline: none; }

.mintaablak__bezarosor { position: absolute; right: 0; top: 0; z-index: 2; margin: 0; }
.mintaablak__bezar {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--vonal); border-radius: 50%; background: var(--feher);
  color: var(--tinta); cursor: pointer; margin: 0.625rem 0.625rem 0 0;
  transition: border-color 0.2s, color 0.2s;
}
.mintaablak__bezar:hover { border-color: var(--gomb); color: var(--gomb); }
.mintaablak__bezar svg { width: 1.125rem; height: 1.125rem; }

/* A bezáró gomb a jobb felső sarokban lebeg, ezért a fejnek ki kell kerülnie:
   a leghosszabb név 40 karakter, az két sorba törik, és enélkül a gomb alá futna. */
.mintaablak__fej { display: flex; align-items: flex-start; gap: 1rem; padding-right: 3.25rem; }
.mintaablak__jel { display: grid; gap: 4px; width: 2.75rem; flex: none; margin-top: 0.3rem; }
.mintaablak__jel i { display: block; height: 3px; background: var(--kiemelo); }
.mintaablak__jel i.jin { background: linear-gradient(90deg, var(--kiemelo) 0 38%, transparent 38% 62%, var(--kiemelo) 62% 100%); }
.mintaablak__szam { margin: 0; font-size: var(--t-apro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--kiemelo-szoveg); }
.mintaablak__nev { margin: 0.3rem 0 0; font-family: var(--cim); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.25; color: var(--tinta); }
.mintaablak__felismeres { margin: 1.125rem 0 0; font-family: var(--cim); font-style: italic;
  font-size: 1.0625rem; line-height: 1.5; color: var(--tinta); }
.mintaablak__felismeres[hidden], .mintaablak__szoveg[hidden] { display: none; }
.mintaablak__szoveg { margin: 0.875rem 0 0; line-height: 1.7; color: var(--tinta); }
.mintaablak__zar { margin: 0.875rem 0 0; font-size: var(--t-kicsi); line-height: 1.55; color: var(--halvany); }
.mintaablak__segitseg { margin: 0.875rem 0 0; font-size: var(--t-kicsi); line-height: 1.55; color: var(--kiemelo-szoveg); }
.mintaablak__segitseg[hidden] { display: none; }
.mintaablak__gomb { margin-top: 1.5rem; }

/* Léptető: a térkép celláit telefonon nehéz eltalálni, ezért az ablakból is
   lehet továbblépni a szomszéd mintára. */
.mintaablak__lepteto {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--feher); border: 1px solid var(--vonal); border-top: 0;
  padding: 0.5rem 0.75rem;
}
.mintaablak__nyil {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--vonal); border-radius: 50%; background: var(--feher);
  color: var(--tinta); cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.mintaablak__nyil:hover:not([disabled]) { border-color: var(--gomb); color: var(--gomb); }
.mintaablak__nyil[disabled] { opacity: 0.35; cursor: default; }
.mintaablak__nyil svg { width: 1.125rem; height: 1.125rem; }
.mintaablak__hol { font-family: var(--cim); font-style: italic; font-size: 0.9375rem; color: var(--halvany); }

/* Telefonon alulról felcsúszó lap, a képernyő aljára tapadva. */
@media (max-width: 40rem) {
  .mintaablak {
    width: 100%; max-height: 88dvh;
    margin: auto auto 0;                 /* alulra tapad */
  }
  .mintaablak__torzs {
    border-bottom: 0; max-height: calc(88dvh - 4.5rem);
    padding-bottom: 1.5rem;
  }
  .mintaablak__lepteto {
    border-bottom: 0;
    /* a telefonok alsó sávja (gesztussáv) alá ne csússzon a nyíl */
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
  @media (prefers-reduced-motion: no-preference) {
    .mintaablak[open] { animation-name: mintaFel; }
  }
  @keyframes mintaFel { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

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

/* Nagyított oldalpár ------------------------------------------------------- */
/* Amíg a réteg nyitva van, a lap mögötte nem görög. Csak a függőleges tengelyt
   zárjuk: a vízszintes marad clip, különben a body görgetőkonténerré válna. */
body.nincs-gorgetes { overflow-y: hidden; }
/* A lapozó szövegből épül, nem képből – a „nagyítás” itt azt jelenti, hogy a
   könyv tördelése nagyobb betűvel, zavaró környezet nélkül olvasható. A réteg
   nyitáskor az épp látható oldalpár másolatát kapja, záráskor kiürül: így sosem
   lóg a DOM-ban két példány ugyanabból a szövegből. */
.nagyito { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: clamp(0.75rem, 0.25rem + 2vw, 2.5rem); background: rgba(36, 26, 33, 0.93); }
.nagyito__panel { position: relative; width: min(72rem, 100%); max-height: 94vh; overflow: auto;
  background: var(--feher); border: 1px solid var(--vonal); }
.nagyito__bezar { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 3;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--vonal); border-radius: 50%; background: var(--feher);
  color: var(--tinta); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.nagyito__bezar:hover { border-color: var(--gomb); color: var(--gomb); }
.nagyito__bezar svg { width: 1.125rem; height: 1.125rem; }
.nagyito__labl { margin: 0; padding: 0.875rem 1.5rem 1.25rem; text-align: center;
  border-top: 1px solid var(--vonal); font-size: var(--t-kicsi); color: var(--halvany); }
.nagyito__labl kbd { font: inherit; border: 1px solid var(--vonal); border-radius: 4px; padding: 0.05em 0.4em; }
/* Nagyított tördelés: nagyobb betű, bővebb oldalmargó, magasabb hasáb. */
.nagyito .lapozo__oldal { min-height: 0; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem) clamp(3.5rem, 2.5rem + 2vw, 4.5rem); }
.nagyito .lapozo__oldal h3 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); }
.nagyito .lapozo__oldal h4 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.nagyito .lapozo__tukor { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .nagyito__panel { animation: nagyitoBe 0.25s ease both; }
}
@keyframes nagyitoBe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Slim e-mailes sáv a lapozó alatt */
@media (min-width: 56rem) { .reszlet-sav { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; } }

/* Teszt -------------------------------------------------------------------- */
.valaszok { display: grid; gap: 0.75rem; }
.valasz { text-align: left; width: 100%; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--tinta); background: var(--papir); border: 1.5px solid transparent; padding: 0.9375rem 1.25rem; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.valasz:hover { border-color: var(--gomb); background: var(--feher); }
.valasz[aria-pressed='true'] { border-color: var(--gomb); background: var(--gomb-halvany); }

/* Feliratkozás ------------------------------------------------------------- */
.urlap { margin-top: 2rem; padding: clamp(1.25rem, 1rem + 2vw, 2rem); background: var(--puder); }
.urlap h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); margin-bottom: 0.4rem; }
.urlap > p { color: var(--halvany); font-size: 1rem; }
.urlap__mezok { display: grid; gap: 0.9rem; margin: 1.25rem 0 1rem; }
@media (min-width: 40rem) { .urlap__mezok { grid-template-columns: 1fr 1.4fr; } }
.urlap label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
.urlap input[type='text'], .urlap input[type='email'] { width: 100%; font: inherit; font-size: 1rem; padding: 0.8rem 1.1rem; border: 1.5px solid var(--vonal); border-radius: 999px; background: var(--feher); color: var(--tinta); }
.urlap input:focus-visible { outline: 2px solid var(--gomb); outline-offset: 1px; border-color: transparent; }
.jelolo { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-apro); line-height: 1.5; color: var(--halvany); margin-bottom: 1.25rem; cursor: pointer; }
.jelolo input { margin-top: 0.1rem; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; accent-color: var(--gomb); flex: none; }
.urlap__uzenet { font-size: var(--t-kicsi); margin: 1rem 0 0; }
.urlap__uzenet.hiba { color: #9b2c3f; }
.siker { background: var(--zsalya); padding: 1.5rem 1.75rem; margin-top: 2rem; font-size: 1rem; }
.siker strong { font-family: var(--cim); font-size: 1.5rem; font-weight: 600; display: block; margin-bottom: 0.25rem; }
.kupon { display: inline-block; font-weight: 600; letter-spacing: 0.08em; background: var(--feher); border: 1px dashed var(--arany); padding: 0.1rem 0.6rem; color: var(--gomb-sotet); }

/* E-mailes feliratkozó sor (a lapozó alatt) */
.lead-urlap { margin: 0; padding: 0; background: none; }
.lead-urlap__sor { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lead-urlap input[type='email'] { flex: 1 1 13rem; min-height: 3.25rem; }
.lead-urlap .gomb { flex: none; }
.lead-urlap .jelolo { margin: 0.875rem 0 0; max-width: 32rem; }
.lead-urlap .urlap__uzenet { margin-top: 0.75rem; }
.lead-urlap .siker { margin-top: 0; }

/* Vélemények --------------------------------------------------------------- */
.velemeny { margin: 0; background: var(--feher); padding: 2.25rem 2.125rem; display: flex; flex-direction: column; gap: 1.125rem; }
.velemeny blockquote { quotes: '„' '”'; }
.velemeny blockquote::before { content: open-quote; }
.velemeny blockquote::after { content: close-quote; }
.velemeny blockquote { margin: 0; flex: 1; font-size: var(--t-alap); line-height: 1.7; color: var(--tinta); }
.velemeny figcaption { display: flex; align-items: center; gap: 0.75rem; font-family: var(--cim); font-size: 1.75rem; color: var(--tinta); }
.velemeny figcaption::before { content: ''; flex: none; width: 2rem; height: 1px; background: var(--arany); }
.velemeny:nth-child(2) figcaption::before { background: var(--orgona); }
.velemeny:nth-child(3) figcaption::before { background: var(--rozsa); }

/* Csomagok ----------------------------------------------------------------- */
.csomagok { position: relative; overflow: hidden; }
.csomagok .negyzetek span:nth-child(1) { right: 70px; top: 5rem; --jel: var(--rozsa); }
.csomagok .negyzetek span:nth-child(2) { right: 30px; top: 7.75rem; --jel: var(--orgona); }
.csomagok .negyzetek span:nth-child(3) { left: 0; bottom: 8rem; --jel: var(--arany-halvany); }
.csomagok__fej { max-width: 40rem; margin-inline: auto; text-align: center; }
.csomagok__racs { display: grid; gap: 1.75rem; margin: 3.75rem auto 0; max-width: 61.25rem; align-items: stretch; }
@media (min-width: 52rem) { .csomagok__racs { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
.csomag { position: relative; background: var(--feher); padding: clamp(2rem, 1.25rem + 2.5vw, 2.875rem) clamp(1.5rem, 1rem + 2.5vw, 2.75rem); display: flex; flex-direction: column; }
.csomag--kiemelt { }
.csomag__cimke { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: var(--gomb); color: #fff; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.5rem 1.125rem; border-radius: 999px; white-space: nowrap; }
.csomag h3 { font-size: clamp(2rem, 1.7rem + 1.4vw, 3.25rem); margin-bottom: 0.1rem; }
.csomag__alcim { color: var(--halvany); margin: 0; font-size: 1rem; }
.csomag__ar { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; margin: 1.375rem 0 1.625rem; padding: 1.375rem 0; border-top: 1px solid var(--vonal); border-bottom: 1px solid var(--vonal); }
.csomag__ar strong { font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem); font-weight: 300; line-height: 1; color: var(--tinta); }
.csomag__ar span { font-size: 0.875rem; color: var(--halvany); }
.csomag__ar s { color: var(--halvany); font-size: 1.125rem; }
.csomag ul { list-style: none; padding: 0; margin: 0 0 2rem; flex: 1; }
.csomag li { display: flex; gap: 0.875rem; align-items: baseline; font-size: 1rem; line-height: 1.55; color: var(--tinta); margin-bottom: 0.75rem; }
.csomag li::before { content: ''; flex: none; width: 1.125rem; height: 2px; transform: translateY(-0.35em); background: var(--arany); }
.csomag li.plusz::before { background: var(--gomb); }
.csomag--kiemelt li::before { background: var(--gomb); }
.csomag form { margin: 0; }
.kuponsav { font-size: 1rem; background: var(--feher); border: 1px dashed var(--arany); border-radius: 999px; padding: 0.85rem 1.5rem; margin: 2rem auto 0; max-width: 61.25rem; text-align: center; }
.garancia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.375rem; max-width: 61.25rem; margin: 2.75rem auto 0; text-align: left; }
.garancia svg { flex: none; width: 2.5rem; height: 2.5rem; color: var(--arany); }
.garancia p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--tinta); max-width: 40rem; }
.garancia strong { color: var(--gomb-sotet); }
.fizetes { margin: 1.5rem auto 0; max-width: 46rem; text-align: center; }

/* Szerző ------------------------------------------------------------------- */
.szerzo { overflow: hidden; }
.szerzo__racs { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .szerzo__racs { grid-template-columns: 0.85fr 1.15fr; gap: 6.25rem; } }
.szerzo__kep { position: relative; }
.szerzo__kep img { position: relative; width: 100%; height: clamp(24rem, 16rem + 24vw, 40rem); object-fit: cover; object-position: 50% 12%; border-radius: 300px 300px 0 0; }
.szerzo__kep .negyzetek { overflow: visible; }
.szerzo__kep .negyzetek span:nth-child(1) { right: -30px; top: -30px; --jel: var(--rozsa); }
.szerzo__kep .negyzetek span:nth-child(2) { right: -76px; top: 16px; --jel: var(--orgona); }
.szerzo h2 { font-size: clamp(2rem, 1.6rem + 2.4vw, 3.75rem); margin-bottom: 0.35em; }
/* A szerző idézete a bekezdések méretében szól, csak dőlt antikvával:
   így nem nyomja agyon az alatta következő szöveget. */
.szerzo__idezet { margin: 0 0 1.5rem; font-family: var(--cim); font-style: italic;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; color: var(--tinta); }
.szerzo__zaro { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--vonal); }
/* Aláírás: a szöveg alá simul, halvány szilvatinta, enyhén megdőlve */
.szerzo__alairas { margin: 2rem 0 0; line-height: 0; }
.szerzo__alairas img { display: block; width: min(15rem, 80%); height: auto; opacity: 0.9; transform: none; }

/* GYIK --------------------------------------------------------------------- */
.gyik { background: var(--papir); }
.gyik__lista { border-top: 1px solid var(--vonal); }
.gyik details { border-bottom: 1px solid var(--vonal); }
.gyik summary { cursor: pointer; list-style: none; padding: 1.625rem 3rem 1.625rem 0; position: relative; font-family: var(--szoveg); font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--tinta); }
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::before, .gyik summary::after { content: ''; position: absolute; right: 0.5rem; top: 50%; width: 1rem; height: 1.5px; background: var(--gomb); transition: transform 0.25s ease; }
.gyik summary::before { transform: rotate(90deg); }
.gyik details[open] summary::before { transform: rotate(0); }
.gyik details > div { padding-bottom: 1.625rem; margin-top: -0.5rem; color: var(--halvany); font-size: 1rem; line-height: 1.65; max-width: 38rem; }
.gyik details > div p:last-child { margin-bottom: 0; }

/* A nyitás-zárás kisimítása. A <details> magától pattan, nem csúszik; a
   ::details-content pszeudóelem magasságát viszont már lehet animálni, ha a
   böngésző az auto magasságra is enged átmenetet (interpolate-size).

   Ahol ezt a böngésző nem ismeri, ott a válasz ugyanúgy megnyílik, csak
   azonnal – nem marad rejtve semmi. Ezért nincs mögötte JavaScript: egy
   JS-es harmonika rosszabb, mert ha a szkript elhasal, a tartalom bennragad.
   A billentyűzetes kezelést a natív <summary> adja, azt nem bántjuk. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) {
    .gyik details::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 0.32s cubic-bezier(.3, .7, .4, 1), content-visibility 0.32s allow-discrete;
    }
    .gyik details[open]::details-content { block-size: auto; }
  }
}

/* Zárás -------------------------------------------------------------------- */
.zaras { display: grid; }
@media (min-width: 62rem) { .zaras { grid-template-columns: 1fr 1fr; } }
/* Az ajtó képe állva marad: kitölti a saját felét, és nem mozdul görgetésre.
   (Volt itt egy parallax kísérlet – kivettem: a kép elcsúszott a kerethez
   képest, és a szakasz rosszabbul állt össze, mint mozgás nélkül.) */
.zaras__keret { position: relative; display: block; overflow: clip;
  min-height: min(76vh, 38rem); }
.zaras__kep { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zaras__panel { position: relative; background: var(--derengo); display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.25rem, 1rem + 4vw, 7.5rem); }
.zaras__panel .negyzetek span:nth-child(1) { right: 60px; top: 4.375rem; --jel: var(--rozsa); }
.zaras__panel .negyzetek span:nth-child(2) { right: 20px; top: 7.25rem; --jel: #fff; --tores: var(--mely); }
.zaras__hexagram { color: var(--arany); margin-bottom: 1.625rem; }
.zaras__idezet { margin: 0 0 1.875rem; font-family: var(--cim); font-style: italic; font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.3; color: var(--tinta); }

/* Telefonon a záró szakasz megfordul: előbb a mondat, utána a kép.
   Asztalon a kettő egymás mellett van, ott a sorrend mindegy – egy hasábban
   viszont számít: a 608 px magas ajtófotó elé került a lezárás, és mire az
   olvasó a mondathoz ért, már elhagyta a döntési pontot. Most a mondat jön
   előbb, a fotó pedig a lábléc előtti csendes lezárás lett, alacsonyabban.

   A panel itt középre zárt: egy háromsoros záró gondolatnál a szimmetria
   nyugodtabb, mint a bal igazítás, és a gomb is a mondat tengelyébe kerül. */
@media (max-width: 61.9375rem) {
  .zaras__panel { order: 1; text-align: center; align-items: center;
    padding-block: clamp(3.25rem, 2rem + 7vw, 5rem); }
  /* A kép magassága a szélességet követi, nem fix sáv: fix magassággal
     táblagépen a négyzetes fotóból egy középső csík maradt, és az ajtó teteje-
     alja levágódott. A 4:3 arány mindenhol megtartja a kompozíciót, a felső
     korlát pedig megakadályozza, hogy széles képernyőn eluralja a lezárást. */
  .zaras__keret { order: 2; min-height: 0; height: min(75vw, 30rem); }
  /* a négyzetes fotóból széles sávot vágunk: a fókusz az ajtó nyílására
     kerüljön, ne a mennyezetre */
  .zaras__kep { object-position: center 40%; }
  .zaras__hexagram { width: 4.25rem; margin-bottom: 1.375rem; }
  .zaras__hexagram svg { width: 100%; height: auto; }
  .zaras__idezet { max-width: 19rem; margin-bottom: 1.5rem; text-wrap: balance; }
  .zaras__panel .bevezeto { max-width: 19rem; margin-bottom: 2rem; }
}

/* Lábléc ------------------------------------------------------------------- */
.lablec { background: var(--tinta); color: #d2a07c; padding-block: 4rem 3.375rem; font-size: 0.875rem; }
.lablec__belso { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: center; }
.lablec nav { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.lablec a, .lablec button { display: inline-block; padding: 0.35rem 0; color: #f6e7da; text-decoration: none; }
.lablec a:hover { text-decoration: underline; }
.lablec button { background: none; border: 0; padding: 0; color: #f6e7da; text-decoration: underline; text-underline-offset: 0.18em; font: inherit; cursor: pointer; }
.lablec__also { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: var(--t-apro); }
.lablec__also p { margin: 0; }

/* Mobil vásárlósáv --------------------------------------------------------- */
.vasarlosav { position: fixed; inset: auto 0.75rem 0.75rem; z-index: 25; background: var(--feher); border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 1.375rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; transform: translateY(150%); transition: transform 0.3s ease; margin-bottom: env(safe-area-inset-bottom); }
.vasarlosav.lathato { transform: translateY(0); }
.vasarlosav p { margin: 0; font-size: 0.8125rem; line-height: 1.25; color: var(--halvany); }
.vasarlosav strong { display: block; font-family: var(--cim); font-size: 1.125rem; font-weight: 600; color: var(--tinta); }
.vasarlosav .gomb { min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: var(--t-apro); flex: none; }
@media (min-width: 62rem) { .vasarlosav { display: none; } }

/* Süti-sáv ----------------------------------------------------------------- */
/* Ha a süti-sáv látszik, a mobil vásárlósáv fölécsúszik, hogy ne takarják egymást */
body:has(.suti:not([hidden])) .vasarlosav { transform: translateY(160%); }
.suti { position: fixed; z-index: 40; inset: auto 1rem 1rem; max-width: 30rem; background: var(--feher); padding: 1.5rem 1.6rem; font-size: var(--t-kicsi); line-height: 1.55; }
.suti p { margin-bottom: 1.1rem; }
.suti .gombsor { gap: 0.5rem; }
.suti .gomb { min-height: 2.6rem; padding: 0.5rem 1.2rem; font-size: var(--t-apro); }

/* Hexagram (JS-ből) -------------------------------------------------------- */
.hexagram rect { fill: currentColor; }
.hexagram rect.valtozo { fill: var(--gomb); }

/* Nyomtatás ---------------------------------------------------------------- */
@media print {
  .fejlec, .vasarlosav, .suti, .cta-szalag, .gomb { display: none !important; }
  body { background: #fff; }
}

/* --- Ismerős? lista: minden sor egy megnevezett minta --- */
.ismeros__lista li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.125rem 0; border-bottom: 1px solid var(--vonal); }
.ismeros__lista li > div { display: grid; gap: 0.25rem; }
.ismeros__lista p { margin: 0; font-size: var(--t-bev); line-height: 1.5; color: var(--tinta); }
.ismeros__hex { flex: none; margin-top: 0.3rem; color: var(--arany); }
.ismeros__nev { font-family: var(--cim); font-size: 1rem; font-style: italic; color: var(--arany-szoveg); }

/* --- Hármas értéksor a könyv szekcióban --- */
.erteksor { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.625rem 1.5rem; }
.erteksor li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-kicsi); font-weight: 500; color: var(--tinta); }
.erteksor svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--arany); }

/* --- Belelapozás a könyv szekcióban --- */
.lapozo-blokk { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.lapozo-blokk__cim { font-size: var(--t-kartya); font-weight: 500; text-align: center; margin: 0; }
.lapozo-blokk .lapozo { margin-top: 1.5rem; }

/* --- E-mail-sáv az érmedobás alatt --- */
.reszlet-sav { margin-top: clamp(2rem, 1.25rem + 2vw, 3rem); background: var(--feher); padding: clamp(1.25rem, 1rem + 1.5vw, 1.875rem) clamp(1.25rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 56rem) { .reszlet-sav { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; } }
.reszlet-sav p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--halvany); }
.reszlet-sav strong { color: var(--tinta); font-weight: 600; }

/* Mobilon a díszítő képek nem adnak hozzá, csak hosszítanak */
@media (max-width: 52rem) {
}

/* ---------------------------------------------------------------------------
   Kilépő ablak: a 10 leggyakoribb minta útmutatója
   --------------------------------------------------------------------------- */
.kilepo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: safe center; padding: 1rem; overflow-y: auto; }
.kilepo[hidden] { display: none; }
.kilepo__hatter { position: absolute; inset: 0; background: rgba(58, 43, 59, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: kilepoHatter 0.25s ease; }
.kilepo__panel {
  position: relative; width: min(38rem, 100%);
  background: var(--feher); background: radial-gradient(160% 120% at 10% 0%, var(--puder) 0%, var(--feher) 55%);
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);
  animation: kilepoBe 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kilepo__panel h2 { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem); line-height: 1.2; margin: 0 0 0.75rem; }
.kilepo__bev { font-size: var(--t-bev); line-height: 1.55; color: var(--halvany); margin: 0 0 1.25rem; }
.kilepo__mintak { list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem; display: grid; gap: 0.4rem 1.25rem; background: var(--feher); }
@media (min-width: 30rem) { .kilepo__mintak { grid-template-columns: 1fr 1fr; } }
.kilepo__mintak li { display: flex; gap: 0.5rem; align-items: baseline; font-size: var(--t-apro); line-height: 1.4; color: var(--tinta); }
.kilepo__mintak li::before { content: ''; flex: none; width: 6px; height: 6px; transform: translateY(-2px); background: var(--arany); }
.kilepo__bezar { position: absolute; top: 0.875rem; right: 0.875rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--feher); color: var(--halvany); cursor: pointer; transition: color 0.2s, transform 0.2s; }
.kilepo__bezar:hover { color: var(--gomb); transform: scale(1.06); }
.kilepo__bezar svg { width: 1.125rem; height: 1.125rem; }
.kilepo__nem { display: block; margin: 1rem auto 0; padding: 0.5rem 0.75rem; background: none; border: 0; font: inherit; font-size: var(--t-apro); color: var(--halvany); text-decoration: underline; cursor: pointer; }
.kilepo__nem:hover { color: var(--tinta); }
.kilepo .siker { margin: 0; }

@keyframes kilepoHatter { from { opacity: 0; } }
@keyframes kilepoBe { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .kilepo__hatter, .kilepo__panel { animation: none; }
}

/* Amíg a kilépő ablak nyitva van, a mobil vásárlósáv ne lógjon bele */
body:has(.kilepo:not([hidden])) .vasarlosav { transform: translateY(160%); }

/* Kis kijelzőn az ablak férjen ki görgetés nélkül */
@media (max-width: 30rem) {
  .kilepo__panel { padding: 1.5rem 1.25rem 1.25rem; }
  .kilepo__panel h2 { font-size: 1.625rem; }
  .kilepo__bev { margin-bottom: 1rem; }
  .kilepo__mintak { padding: 0.875rem 1rem; gap: 0.3rem; margin-bottom: 1.125rem; }
  .kilepo__mintak li { font-size: 0.8125rem; }
  .kilepo__nem { margin-top: 0.625rem; }
}

/* ===========================================================================
   A példaoldal szellősségének átvétele
   =========================================================================== */

/* A bevezető bekezdések a címbetűvel, középre zárva – ez adja a legnagyobb
   részét a "levegős" hatásnak, nem az üres hely. */
.kozepre .bevezeto,
.vezeto {
  font-family: var(--cim);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
  line-height: 1.5;
  color: var(--tinta);
  max-width: 34ch;
}
.kozepre .vezeto { margin-inline: auto; }

/* Gombok: a példaoldal apró, ritkított nagybetűs feliratot használ. */
.gomb { letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--t-apro); font-weight: 500; }

/* Kártyák: kevesebb doboz, több levegő. A keret és az árnyék csak ott marad,
   ahol tényleg elkülönülő tárgyat jelöl (csomagok, érmedobás, lapozó). */
.velemeny,
.elonyok__elem {
  background: none;
  border: 0;
  border-top: 1px solid var(--vonal);
  border-radius: 0;
  padding: 1.75rem 0 0;
}

/* Szekciófejek: nagyobb levegő a cím és a tartalom között. */
.csomagok__fej, .mintak__fej { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Finomhangolás: a nagy címek alatt nem kell ekkora rés, a szekciófejek pedig
   egységes levegőt kapnak. */
h1, h2 { margin-bottom: 0.5em; }
.csomagok__fej, .mintak__fej { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }

/* ===========================================================================
   Nyomdai jegyek – árnyék helyett
   A mélységet nem elmosódás adja, hanem egy rosszul passzoló második nyomat:
   vékony vonal, mögötte ugyanaz aranyban, néhány képponttal eltolva.
   =========================================================================== */
/* Jin–jang vonalpár: a könyv jelrendszere elválasztóként.
   A folytonos vonal a jang, a megtört a jin – ez a hatvannégy minta ábécéje. */
.vonalpar { display: flex; flex-direction: column; gap: 5px; width: 2.75rem; flex: none; --vonal-szin: var(--kiemelo); }
.vonalpar i { display: block; height: 2px; background: var(--vonal-szin); }
.vonalpar i.jin { background: linear-gradient(90deg, var(--vonal-szin) 0 40%, transparent 40% 60%, var(--vonal-szin) 60% 100%); }


/* A regiszter-keret azokon az elemeken, amelyek korábban árnyékkal emelkedtek ki.
   Vékony vonal a panel körül, és mögötte 7 px-cel elcsúsztatva egy második,
   barack keret – mint a nyomdai regiszterjel. Árnyék helyett ez emeli ki. */
.csomag, .reszlet-sav, .kilepo__panel, .suti {
  position: relative; z-index: 0; border: 1px solid var(--vonal);
}
.csomag::after, .reszlet-sav::after, .kilepo__panel::after, .suti::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--arany-halvany);
  transform: translate(7px, 7px); pointer-events: none;
}
.dobas__iv { border-radius: 160px 160px 0 0; }
.dobas__iv::before { border-radius: 152px 152px 0 0; }

@media (max-width: 40rem) {
  .csomag::after, .reszlet-sav::after,
  .kilepo__panel::after, .suti::after { transform: translate(4px, 4px); }
}

/* Dísz: a 64 minta táblázata a könyv 31. oldaláról.
   A dobás szakasz mögött, félig kifutva – ez a rendszer, amibe az érmék bekötnek. */
.dobas { position: relative; overflow: hidden; }
.tablazat-disz { position: absolute; left: -3.25rem; top: 50%; transform: translateY(-50%);
  width: 13.5rem; height: auto; opacity: 0.22; z-index: 0; pointer-events: none; }
.dobas > .szel { position: relative; z-index: 1; }
@media (max-width: 78rem) { .tablazat-disz { display: none; } }

/* ===========================================================================
   Képkeretek
   Egyetlen kép sem áll csupaszon. Mindegyik mögött ugyanaz az eltolt
   arany körvonal fut, mint a paneleknél – a téglalap alakúak ezen felül
   sarokjeleket és egy keskeny belső vonalat kapnak, az íves képek pedig
   egy második, kívülre rajzolt ívet. Ugyanaz a nyomdai gondolat
   háromféle alakra.
   =========================================================================== */
.kep { position: relative; z-index: 0; }
.kep picture, .kep img { position: relative; display: block; }

/* Eltolt külső vonal – a kép sziluettjét követi */
.kep::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--arany-halvany);
  transform: translate(14px, 14px);
  pointer-events: none;
}
.kep--iv::after { border-radius: 300px 300px 0 0; transform: translate(16px, 16px); }

/* Belső, a fotóra rajzolt hajszálvonal – a Betheme „beljebb kerettel” jegye */
.kep--keret::before {
  content: ''; position: absolute; inset: 15px; z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

/* Sarokjelek: két-két rövid aranyvonás átellenes sarkokon */
.kep__sarok { position: absolute; width: 30px; height: 30px; z-index: 2; pointer-events: none; }
.kep__sarok::before, .kep__sarok::after { content: ''; position: absolute; background: var(--arany); }
.kep__sarok::before { width: 30px; height: 1.5px; }
.kep__sarok::after { width: 1.5px; height: 30px; }
.kep__sarok--bf { left: -10px; top: -10px; }
.kep__sarok--bf::before, .kep__sarok--bf::after { left: 0; top: 0; }

@media (max-width: 48rem) {
  .kep::after { transform: translate(8px, 8px); }
  .kep--iv::after { transform: translate(9px, 9px); }
  .kep--keret::before { inset: 10px; }
  .kep__sarok { width: 20px; height: 20px; }
  .kep__sarok::before { width: 20px; }
  .kep__sarok::after { height: 20px; }
  .ismeros__kep img { height: clamp(16rem, 10rem + 24vw, 22rem); }
}

/* ===========================================================================
   Elkülönítés: a szerző és a GYIK ne ugyanaz a modul legyen kétszer
   =========================================================================== */
.szerzo { background: var(--homok); }
.szerzo__racs { gap: clamp(3rem, 2rem + 4vw, 6.5rem); }
.szerzo .kep::after { border-color: var(--arany); opacity: .55; }

.gyik { background: var(--papir); }
.gyik__fej { text-align: center; max-width: 34rem; margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.gyik__fej .bevezeto { margin: 0; }
.gyik__lista { max-width: 46rem; margin: 0 auto; }

/* Nyitó: az ár és a másodlagos út a gomb mellé */
.nyito__ar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Olvasható sorhossz: a hosszú bekezdések sehol ne fussanak szét */
.bevezeto, .szakasz > .kozep > p, .szakasz > .keskeny > p { max-width: 38rem; }
.kozepre .bevezeto, .gyik__fej .bevezeto, .csomagok__fej .bevezeto { margin-inline: auto; }

/* Lapozó mobilon: a két oldal egymás alá kerül, köztük a lapzárás vonala;
   a vezérlősor pedig egy sorban marad. */
@media (max-width: 52rem) {
  .lapozo__oldal--jobb { border-top: 1px solid var(--vonal); }
  .lapozo__oldal { padding-bottom: 2.75rem; }
  .lapozo__labl { flex-wrap: nowrap; gap: 0.5rem; padding-inline: 1rem; }
  /* 360 px alatt a vezérlők már nem férnek el egy sorban – a nagyítás gombbal
     együtt három kör és három pont áll a sorban. Ott az oldalszám lemegy a
     második sorba: a vezérlők maradnak egymás mellett és elég nagyok az
     érintéshez, csak a felirat költözik. */
  @media (max-width: 22.5rem) {
    .lapozo__labl { flex-wrap: wrap; justify-content: center; gap: 0.375rem 0.5rem; padding-inline: 0.625rem; }
    .lapozo__pont { width: 2rem; }
    .lapozo__nyil { width: 2.375rem; height: 2.375rem; }
    .lapozo__nyilak { gap: 0.25rem; }
    .lapozo__szam { order: 3; width: 100%; text-align: center; font-size: 0.8125rem; }
  }
  .lapozo__szam { font-size: 0.875rem; white-space: nowrap; }
  .lapozo__nyilak { gap: 0.375rem; }
  .lapozo__nyil { width: 2.5rem; height: 2.5rem; }
  .lapozo__pont { width: 2.25rem; height: 2.5rem; }
}

/* A Prémium csomag regiszter-kerete erősebb – ez az ajánlott út */
.csomag--kiemelt::after { border-color: var(--arany); }

/* ===========================================================================
   Sötét sávok: a referenciakép párosa – mély szilva alapon barack hangsúly.
   A barack világos fokozata (--kiemelo-vilagos) KIZÁRÓLAG itt használható:
   világos papíron megbukna a kontraszton.
   =========================================================================== */
.cta-szalag .szoveglink { color: var(--kiemelo-vilagos); }
.cta-szalag .szoveglink { text-decoration-color: var(--kiemelo-vilagos); }
.zaras__panel .negyzetek span:nth-child(2) { --jel: var(--kiemelo-vilagos); }
.lablec a:hover { color: var(--kiemelo-vilagos); }

/* A záró idézet hexagramja is a meleg hangsúlyt kapja */
.zaras__hexagram { color: var(--kiemelo); }

/* A sötét sáv címében a második tagmondat barack – a referenciakép fogása.
   Nem egy kiemelt szó, hanem a mondat másik fele: ez a kép ígérete. */
.cta-szalag h2 em { font-style: normal; color: var(--kiemelo-vilagos); }

/* ===========================================================================
   Elválasztó – EGYETLEN fajta az egész oldalon
   A kínai pénzérme (karika, négyzet alakú lyukkal), két oldalt hajszálvonallal.
   A vonal és az érme pontosan azonos színű: a halványítás a szülőn van.
   Ha új elválasztót tennél valahova, ezt használd; ne rajzolj másikat.
   =========================================================================== */
.elvalaszto {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  margin-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  /* a halványítás az EGÉSZ elemen van, nem külön a vonalon és az érmén –
     így a kettő színe pontosan azonos marad, bármelyiket is állítod */
  color: var(--kiemelo);
  opacity: 0.5;
}
.elvalaszto::before, .elvalaszto::after {
  content: ''; height: 1px; background: currentColor; flex: 1 1 0; max-width: 8rem;
}
.elvalaszto svg { width: 1.75rem; height: 1.75rem; flex: none; }


/* ===========================================================================
   GYIK: a 4. hexagram áll mögötte. A Ji Kingben ez a kérdezés jele –
   nem puszta dísz, hanem a szakasz tárgya.
   =========================================================================== */
.gyik { position: relative; overflow: hidden; }
.gyik > .kozep { position: relative; z-index: 1; }
.gyik__jel { position: absolute; right: clamp(1.5rem, 4vw, 5rem); top: 50%; transform: translateY(-50%);
  width: clamp(7rem, 11vw, 11rem); color: var(--kiemelo); opacity: 0.18; z-index: 0; pointer-events: none; }
.gyik__jel svg { width: 100%; height: auto; }
@media (max-width: 70rem) { .gyik__jel { display: none; } }

/* A nyitó/záró jel a GYIK soraiban is a könyv vonalaiból van */
.gyik summary::before, .gyik summary::after { background: var(--kiemelo); width: 1.125rem; }

/* ===========================================================================
   „Ismerős?” – a cím és a záró idézet teljes szélességben, középre.
   A kép és a mintalista marad két hasábban: azok együtt olvasandók.
   =========================================================================== */
.ismeros__fej { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.ismeros__fej .bevezeto { margin-inline: auto; }
.ismeros__idezet { text-align: center; max-width: 46rem;
  margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0 !important; }

/* ===========================================================================
   CTA-szalag: szellősebb. Nagyobb sortáv, több levegő a cím körül.
   =========================================================================== */
.cta-szalag { padding-block: clamp(5rem, 3rem + 6vw, 8.5rem); }
.cta-szalag h2 { line-height: 1.38; margin-bottom: 0.7em; max-width: 24ch; margin-inline: auto; }
.cta-szalag p { line-height: 1.9; margin-bottom: 2.75rem; }


/* Körvonalas gomb: ugyanaz az alak és méret, mint a tömör gombé, csak
   háttér nélkül, 2 px-es halk barack vonallal. A nyitóban ez a második,
   kockázatmentes út a vásárlás mellett. */
/* Körvonalas gomb világos alapon: a vonal és a felirat ugyanaz a szilva.
   Rávitelkor telik be – ott a mélyebb barack jön, nem a világosabb, mert
   azon a fehér felirat csak 3,5:1-et adna, a mélyebben 5,2:1-et. */
.gomb--korvonal {
  background: none;
  color: var(--tinta);
  border: 1px solid currentColor;
}
.gomb--korvonal:hover { background: var(--kiemelo-szoveg); border-color: var(--kiemelo-szoveg); color: #fff; }

/* Körvonalas gomb sötét alapon: ott a világos barack a vonal és a felirat –
   ugyanúgy currentColor, mint világos alapon, hogy a kettő ne tudjon elválni. */
.gomb--vilagos.gomb--korvonal { background: none; color: var(--kiemelo-vilagos); border-color: currentColor; }
.gomb--vilagos.gomb--korvonal:hover { background: var(--kiemelo-vilagos); color: var(--mely); }

/* ===========================================================================
   Vélemények – diszkrét körforgó
   Egyszerre egy vélemény, mind egyforma méretben. Magától vált, de megáll,
   ha az olvasó rámutat vagy belefókuszál – és nem mozog, ha a rendszer
   csökkentett mozgást kér.
   =========================================================================== */
.velemenyek { max-width: 40rem; margin: 0 auto; }
.velemenyek__ablak { position: relative; display: grid; }
/* minden lap ugyanabba a cellába kerül, így a magasság a leghosszabbhoz igazodik
   és nem ugrál váltáskor */
.velemeny { grid-area: 1 / 1; margin: 0; padding: 0; background: none; border: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.velemeny[hidden] { display: none; }
.velemeny[data-aktiv] { animation: velemenyBe 0.45s ease; }
@keyframes velemenyBe { from { opacity: 0; } to { opacity: 1; } }
.velemeny blockquote { margin: 0; font-family: var(--cim); font-style: italic;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.6; color: var(--tinta); }
.velemeny figcaption { display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-kicsi); color: var(--halvany); }
.velemeny figcaption::before { content: ''; width: 1.75rem; height: 1px; background: var(--kiemelo); }

/* Minden véleményhez a saját hexagramja tartozik, kis jelként az idézet fölött.
   Lapváltáskor a jel is vált, és egy pillanattal a szöveg után érkezik –
   ez viszi tovább a szemet, nem egy doboz. */
.velemeny__jel { display: block; width: 2.5rem; color: var(--kiemelo); opacity: 0.55;
  margin-bottom: 0.25rem; pointer-events: none; }
.velemeny__jel svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .velemeny[data-aktiv] .velemeny__jel { animation: velemenyJel 0.5s 0.12s ease both; }
}
@keyframes velemenyJel { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 0.55; transform: none; } }

/* A pontsor: az épp látható vélemény pontja sávvá nyílik, és a sáv a váltásig
   telik. Így látszik, hogy magától megy tovább – és meddig van még. */
.velemenyek__pontok { display: flex; justify-content: center; gap: 0.25rem; margin-top: 2.25rem; }
.velemenyek__pont { position: relative; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; }
.velemenyek__pont::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--vonal); transition: width 0.3s, height 0.3s, background 0.25s; }
.velemenyek__pont[aria-current='true']::before { width: 1.75rem; height: 2px; background: var(--kiemelo-halvany); }
.velemenyek__pont[aria-current='true']::after { content: ''; position: absolute;
  top: 50%; left: 50%; width: 1.75rem; height: 2px; margin: -1px 0 0 -0.875rem;
  border-radius: 999px; background: var(--kiemelo);
  transform-origin: left center; animation: velemenyToltes 7s linear forwards; }
/* megállítva: amíg az olvasó rámutat vagy belefókuszál, a sáv is áll */
.velemenyek[data-all] .velemenyek__pont[aria-current='true']::after { animation-play-state: paused; }
@keyframes velemenyToltes { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .velemenyek__pont[aria-current='true']::after { animation: none; transform: scaleX(1); }
}

/* ===========================================================================
   Ingyenes anyag – doboz a dobozban nélkül
   Fehér panel, bal szélén egy barack sáv. A beviteli mező nem doboz, hanem
   aláhúzott sor: így nincs második keret a panelen belül.
   =========================================================================== */
.reszlet-sav { background: var(--feher); border-color: var(--vonal);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem);
  gap: clamp(2rem, 1rem + 3vw, 4rem); border-left: 3px solid var(--kiemelo); }
.reszlet-sav::after { border-color: var(--kiemelo-halvany); }
@media (min-width: 56rem) { .reszlet-sav { grid-template-columns: 1fr 0.85fr; align-items: center; } }
.reszlet-sav__cimke { margin: 0 0 0.6rem; font-family: var(--cim); font-style: italic;
  font-size: 1.0625rem; color: var(--kiemelo-szoveg); }
.reszlet-sav h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); margin: 0 0 1.25rem; }
.reszlet-sav__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.reszlet-sav__lista li { display: flex; gap: 0.875rem; align-items: baseline; font-size: 1rem; line-height: 1.55; }
.reszlet-sav__lista li::before { content: ''; flex: none; width: 1.125rem; height: 2px;
  transform: translateY(-0.35em); background: var(--kiemelo); }
.reszlet-sav__lista strong { font-weight: 600; }

/* Aláhúzott beviteli sor – nem doboz */
.lead-urlap { display: grid; gap: 1.25rem; }
.lead-urlap .mezo { display: grid; gap: 0.35rem; }
.lead-urlap label[for] { font-size: var(--t-apro); color: var(--halvany); }
.lead-urlap input[type='email'] {
  width: 100%; font: inherit; font-size: 1.0625rem; padding: 0.55rem 0 0.6rem;
  border: 0; border-bottom: 1px solid var(--vonal); border-radius: 0;
  background: none; color: var(--tinta);
}
.lead-urlap input[type='email']::placeholder { color: #a79ea0; }
.lead-urlap input[type='email']:focus-visible { outline: 0; border-bottom-color: var(--kiemelo-szoveg); border-bottom-width: 2px; padding-bottom: calc(0.6rem - 1px); }
.lead-urlap .jelolo { font-size: var(--t-apro); line-height: 1.5; }
.lead-urlap .gomb { justify-self: start; }
.lead-urlap .gomb--teljes { width: auto; min-width: 14rem; }

/* ===========================================================================
   A hexagram mint dísz: halkabbra véve
   Ahol a jel pusztán díszítés (nem adat), ott épp csak dereng.
   =========================================================================== */
.tablazat-disz { opacity: 0.11; }
.gyik__jel { opacity: 0.1; }
.negyzetek span { opacity: 0.62; }
.zaras__hexagram { opacity: 0.22; }
.nyito__jel .vonalpar i { opacity: 0.7; }

/* ===========================================================================
   Lapozás: EGYETLEN lap fordul át, nem az oldalpár
   Egy igazi könyvben a jobb oldal emelkedik föl, a gerinc körül átfordul, és
   a hátoldala lesz az új bal oldal. A színpad három rétegből áll:
     .lapozo__also   – ami a lap alatt látszik (a megmaradó és a felfedett oldal)
     .lapozo__level  – maga a forduló lap, két arccal
     .lapozo__feny   – a papír fénye: a függőlegesnél a legerősebb
   A rétegeket a JS építi föl lapozáskor, és utána le is bontja.
   =========================================================================== */
.lapozo__also { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.lapozo__also > * { min-height: 0; }

.lapozo__level {
  position: absolute; top: 0; bottom: 0; width: 50%;
  transform-style: preserve-3d; will-change: transform;
}
.lapozo__level--jobb { left: 50%; transform-origin: left center; }
.lapozo__level--bal { left: 0; transform-origin: right center; }

.lapozo__lapoldal { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: var(--feher); }
.lapozo__lapoldal > * { position: absolute; inset: 0; }
.lapozo__lapoldal--hatul { transform: rotateY(180deg); }

/* A papír fénye. Nem árnyék: meleg, homokszínű réteg, ami a lap elfordulásával
   erősödik, és a vízszintesnél (csukva, illetve teljesen átfordulva) eltűnik. */
.lapozo__feny {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to left, rgba(52, 37, 47, 0.18), rgba(52, 37, 47, 0) 62%);
}
.lapozo__level--bal .lapozo__feny { background: linear-gradient(to right, rgba(52, 37, 47, 0.18), rgba(52, 37, 47, 0) 62%); }

/* A felemelt lap árnyéka a gerinc mentén, az alatta maradó oldalon.
   Nem UI-árnyék: ez a papír veti a papírra, ezért nincs elmosódott pereme,
   csak egy gerinctől kifelé halványuló sáv. */
.lapozo__gerincarny { position: absolute; top: 0; bottom: 0; width: 28%; opacity: 0; pointer-events: none; }
.lapozo__gerincarny--jobb { left: 50%; background: linear-gradient(to right, rgba(52, 37, 47, 0.22), rgba(52, 37, 47, 0)); }
.lapozo__gerincarny--bal { right: 50%; background: linear-gradient(to left, rgba(52, 37, 47, 0.22), rgba(52, 37, 47, 0)); }

/* ===========================================================================
   A középső ív: játék → lapozás → bizonyíték
   A három szakasz háttere és ritmusa is különbözik, hogy ne folyjanak egybe.
   =========================================================================== */

/* 1. Érmedobás – telt barack sáv, fehér blokkok, barack gomb.
      Elkülönül a papír alapú szakaszoktól és a lábléctől is. */
.dobas { background: #F2D6BF; color: var(--tinta); text-align: center;
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); }
.dobas__belso { display: flex; flex-direction: column; align-items: center; }
.dobas .kicker { color: var(--kiemelo-szoveg); font-weight: 600; letter-spacing: 0.2em; }
.dobas h2 { color: var(--mely); font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
  line-height: 1.3; margin-bottom: 0.4em; }
.dobas .bevezeto { color: var(--mely); opacity: 0.85; font-size: 1.125rem; max-width: 34rem; margin: 0 0 2.5rem; }
.dobas .ermek { justify-content: center; margin-bottom: 2rem; }
.dobas .erme { width: clamp(3.5rem, 12vw, 4.75rem); height: clamp(3.5rem, 12vw, 4.75rem); color: var(--kiemelo); }
.dobas .erme--iras { color: var(--mely); }
.dobas .erme-tok span { color: var(--halvany); }
.dobas__sor { justify-content: center; }
.dobas__gomb { background: var(--kiemelo-szoveg); border-color: var(--kiemelo-szoveg); color: #fff; font-size: 1rem; padding-inline: 2.2rem; }
.dobas__gomb:hover { background: var(--mely); border-color: var(--mely); color: #fff; }
/* fix méret: a címke a dobások során változik, de a gomb mérete ne ugráljon – a kezdő állapot szélessége a minimum */
.dobas__gomb { min-width: 19.6rem; }
.dobas__apro { margin: 0.9rem 0 0; font-size: var(--t-apro); color: var(--halvany); }
.dobas__allapot { margin: 0.9rem 0 0; color: var(--halvany); flex: none; text-align: center; }

/* Az ív: fehér kártya a barack sávon */
.dobas__iv { justify-self: center; margin-top: 1.75rem; background: #fff;
  border: 1px solid #E2B99A; }
.dobas__iv::before { border-color: #E2B99A; }
.dobas__iv::after { display: none; }
.dobas__vonalak { color: var(--kiemelo); }
.dobas__vonalak .hexagram rect.ures { fill: var(--kiemelo-halvany); }
.dobas__vonalak .hexagram rect.valtozo { fill: var(--kiemelo-szoveg); }
.dobas__felirat { color: var(--kiemelo-szoveg); font-weight: 600; }

.dobas__eredmeny { margin-top: 2.5rem; max-width: 36rem; }
.dobas__eredmeny p { color: rgba(255, 255, 255, 0.82); }
.dobas__szam { color: var(--kiemelo-vilagos) !important; }
.dobas__nev { color: #fff; }
.dobas__eredmeny .gombsor { justify-content: center; }
.dobas__segitseg { color: rgba(255, 255, 255, 0.7) !important; }

.dobas .tablazat-disz { filter: none; opacity: 0.12; }


/* 2. Belelapozás – halk homok, hogy elváljon a sötét sávtól és a papírtól */
.belelapozas-sav { background: var(--homok); }
.belelapozas__fej { text-align: center; max-width: 36rem; margin: 0 auto clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.belelapozas__fej .bevezeto { margin-inline: auto; }

/* 3. A tartalom mint bizonyíték – középre zárt, egyetlen hasáb */
.tartalom__fej { text-align: center; max-width: 36rem; margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.tartalom__fej .bevezeto { margin-inline: auto; }
/* A tartalomjegyzék mellé fotó kerül: ez volt az oldal leghosszabb, teljesen
   kép nélküli szakasza, és egyetlen keskeny hasábként futott a tetejétől az
   aljáig. A kavicsrács nem dísz: hatvannégy egyforma méretű, de mind más
   árnyalatú kő – pontosan az, amiről a szakasz szól.
   A blokk kilép a 832 px-es szövegsávból, hogy a lista ne szoruljon össze a
   kép mellett; a negatív margó csak annyi, amennyi hely van. */
.tartalom .tartalomjegyzek { max-width: 42rem; }
.tartalom__kep { margin: 0; }
.tartalom__kep figcaption { margin-top: 1rem; font-family: var(--cim); font-style: italic;
  font-size: 1rem; line-height: 1.5; color: var(--halvany); }
@media (max-width: 61.9375rem) {
  .tartalom .tartalomjegyzek { margin-inline: auto; }
  .tartalom__kep { max-width: 26rem; margin: 2.5rem auto 0; }
}
@media (min-width: 62rem) {
  .tartalom__racs {
    margin-inline: calc(-1 * max(0px, min(7.125rem, (100vw - 2.5rem - 52rem) / 2)));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.56fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: center;
  }
  .tartalom .tartalomjegyzek { margin-inline: 0; }
}
.tartalom .meditacio-sav { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); max-width: 42rem; margin-inline: auto; }
.tartalom__cta { text-align: center; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; }
.tartalom .reszlet-sav { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }

/* ===========================================================================
   Szakaszhatárok: halk hullám
   Ugyanaz a forma, mint a nyitó alján, csak laposabb. A szakasz alján ül,
   és a KÖVETKEZŐ szakasz színével van kitöltve – így olvad bele.
   =========================================================================== */
.hullam--halk svg { height: clamp(2.5rem, 1.5rem + 3vw, 5.625rem); }
.belelapozas-sav { position: relative; }
/* A könyvtükör kilép a 832 px-es szövegsávból: ez a termék bemutatása, nem
   illusztráció – nagyobb helyen a tördelés is olvasható marad. A negatív margó
   itt is csak annyi, amennyi hely tényleg van. */
@media (min-width: 62rem) {
  .belelapozas-sav .lapozo {
    margin-inline: calc(-1 * max(0px, min(7.125rem, (100vw - 2.5rem - 52rem) / 2)));
  }
  .belelapozas-sav .lapozo__oldal { min-height: clamp(22rem, 16rem + 14vw, 30rem); }
}

/* ===========================================================================
   A tartalom alatti vásárlási pont
   A magányos gomb elveszett a fehérben: kap egy alátámasztó sort, és alatta
   egy lefelé mutató jelzést az ingyenes anyagra. A nyíl mozgása lassú és
   csillapodó, csökkentett mozgásnál pedig áll.
   =========================================================================== */
.tartalom__cta { text-align: center; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; }
.tartalom__cta-alatt { margin: 0.9rem 0 0; font-size: var(--t-apro); color: var(--halvany); }
.lefele { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  margin-top: clamp(2rem, 1.25rem + 2vw, 3rem); text-decoration: none;
  font-size: var(--t-apro); color: var(--kiemelo-szoveg); }
.lefele span { text-decoration: underline; text-decoration-color: var(--kiemelo-halvany); text-underline-offset: 0.3em; }
.lefele svg { width: 1.5rem; height: 1.5rem; animation: nyilLe 2.4s ease-in-out infinite; }
.lefele:hover svg { animation-duration: 1.2s; }
@keyframes nyilLe {
  0%, 55%, 100% { transform: translateY(0); }
  70% { transform: translateY(7px); }
  85% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) { .lefele svg { animation: none; } }

/* ===========================================================================
   A háttérbe helyezett hexagramok közelebb a szöveghez nagy képernyőn
   =========================================================================== */
.tablazat-disz { left: clamp(-1rem, 1vw, 1.5rem); width: clamp(8rem, 11vw, 12rem); }
.dobas .tablazat-disz { left: clamp(-9rem, -6vw, -5rem); right: auto; width: 16rem; }
.gyik__jel { right: clamp(0.5rem, 2vw, 3rem); }
@media (max-width: 78rem) { .tablazat-disz { display: none; } }

/* ===========================================================================
   A nyitókép könyve: megpöccintett lap, aztán egérkövetés
   Két mozgás, és egyik sem fut magától a végtelenségig:

   1. Belépéskor egyszer megbillen, mint egy megpöccintett könyv. Csak akkor
      indul, amikor a kép tényleg megérkezett (a site.js teszi rá a .billen
      osztályt) – korábban akár üres helyen is lejátszódhatott.
   2. Utána a könyv követi az egeret az egész nyitó szakaszban, nem csak ha
      pont rámutatsz. Ettől él a kép, de csak akkor mozdul, ha az olvasó
      mozdul – magától semmi nem jár.

   Teljes körbefordulás nem lehet: a kép egyetlen nézetből készült 3D render,
   90 foknál a hátlapja a saját tükörképe lenne.
   =========================================================================== */
.nyito__konyv { perspective: 1600px; }
.nyito__konyv img { transform-style: preserve-3d; }
.nyito__konyv img.billen { animation: konyvBillen 2.4s cubic-bezier(.25,.6,.3,1) 1 both; }
@keyframes konyvBillen {
  0%   { transform: rotateY(0deg); }
  28%  { transform: rotateY(-19deg); }
  54%  { transform: rotateY(11deg); }
  76%  { transform: rotateY(-5deg); }
  90%  { transform: rotateY(2deg); }
  100% { transform: rotateY(0deg); }
}

/* Az egérkövetés csak asztalon és csak valódi mutatóval: érintőképernyőn
   nincs „lebegés”, ott a kép mozdulatlan marad. A --dx/--dy értéket a
   site.js írja, képkockánként legfeljebb egyszer. A késleltetést a transition
   adja: így a könyv lustán úszik az egér után, nem ugrál vele. */
@media (min-width: 62rem) and (pointer: fine) {
  .nyito__konyv img {
    will-change: transform;
    transition: transform 0.5s cubic-bezier(.22, .61, .36, 1);
    transform: rotateY(calc(var(--dx, 0) * 9deg)) rotateX(calc(var(--dy, 0) * -4.5deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nyito__konyv img { animation: none; transition: none; transform: none; will-change: auto; }
}

/* Az érmedobás vezérlése és a kirajzolódó hexagram egymás alatt áll, minden
   képernyőméreten: előbb az érmék és a gomb, alattuk az ív. Volt egy asztali
   változat, amiben az ív jobbra, az érmék mellé került – visszavontuk, mert
   a két elem így olvas össze egy mozdulattá: dobsz, és alatta nő a hexagram. */
.dobas__jatek { display: grid; justify-items: center; width: 100%; }
.dobas__vezerles { display: flex; flex-direction: column; align-items: center; }
.dobas__jatek .dobas__iv { margin-top: 2.5rem; }

/* A szakaszfejen belül az elválasztó szorosabban ül: a cím és az alatta álló
   bevezető összetartozik, nem szabad messzire szakítani őket egymástól. */
.belelapozas__fej .elvalaszto,
.tartalom__fej .elvalaszto,
.csomagok__fej .elvalaszto,
.velemenyek-sav .kozepre .elvalaszto,
.gyik__fej .elvalaszto { margin-block: clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem); }
.velemenyek-sav .kozepre .elvalaszto { margin-bottom: 0; }
/* az elválasztó és a vélemény jele ne érjen össze */
.velemenyek-sav .velemenyek { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }

/* Akik már olvasták – fotós háttér, parallax görgetéssel -------------------
   A kép a szekció saját háttere. Asztalon (egér, legalább 52rem) a háttér
   rögzített a képernyőhöz (background-attachment: fixed), így a szöveg
   gördül át rajta: ez a parallax. Érintőképernyőn a fixed háttér akadozik
   vagy figyelmen kívül marad, ezért ott sima görgetés van.
   Olvashatóság: a kép fölött halvány papírszín-fátyol áll, a vélemény pedig
   egy világos, enyhén átlátszó lapon ül – így a háttér a hangulatot adja,
   nem a szöveggel versenyez.
   A szekció nem tesz transzformációt a saját elemére, mert az a fixed
   háttért elrontaná. */
.velemenyek-sav {
  position: relative; isolation: isolate;
  background-color: var(--mely);
  background-image: image-set(url('/assets/img/szilva-csendelet.webp') type('image/webp'));
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
}
/* a fátyol: a kép a széleken és a szöveg mögött is lágyan elhalkul */
.velemenyek-sav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(52, 37, 47, 0.45), rgba(52, 37, 47, 0.78));
}
.velemenyek-sav > .szel { position: relative; z-index: 1; }

/* a vélemény lapja: a szöveg mindig tiszta alapra kerül */
.velemenyek-sav .velemenyek { position: relative; padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  background: rgba(253, 250, 246, 0.9); border: 1px solid rgba(233, 225, 228, 0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.velemenyek-sav .velemeny blockquote { color: var(--mely); }
.velemenyek-sav .velemeny figcaption { color: var(--kiemelo-szoveg); }
.velemenyek-sav .velemenyek__pontok { margin-top: 1.25rem; }
/* a sötét szilva-háttéren a fejléc és az elválasztó világos */
.velemenyek-sav h2, .velemenyek-sav .bevezeto { color: var(--feher); }
.velemenyek-sav .elvalaszto span, .velemenyek-sav .elvalaszto::before, .velemenyek-sav .elvalaszto::after { color: var(--kiemelo-vilagos); }
.velemenyek-sav .velemenyek__pont::before { background: var(--kiemelo-vilagos); }
.velemenyek-sav .velemenyek__pont[aria-current='true']::before { background: var(--kiemelo-vilagos); }
.velemenyek-sav .velemenyek__pont[aria-current='true']::after { background: var(--kiemelo-vilagos); }

/* asztalon rögzített háttér: ez adja a parallax-hatást */
@media (min-width: 52rem) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .velemenyek-sav { background-attachment: fixed; background-size: cover; background-position: center; }
}
/* érintőképernyőn és csökkentett mozgásnál a háttér a szöveggel gördül */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .velemenyek-sav { background-attachment: scroll; }
}

/* Az érmedobás eredménye – felugró ablak -----------------------------------
   Ugyanaz a lap, mint a térkép mintáinál (.mintaablak), csak két gombbal és
   a változó vonalak mondatával. Az ablak a dobás után nyílik, így a hexagram
   nem tolja le a dobás részt a képernyőről. */
.dobas-ablak .mintaablak__szoveg { color: var(--halvany); }
.dobas-ablak__valtozas { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.6;
  color: var(--kiemelo-szoveg); }
.dobas-ablak__gombok { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.dobas-ablak__gombok .gomb { flex: 1 1 auto; white-space: nowrap; }
@media (max-width: 40rem) { .dobas-ablak__gombok .gomb { flex-basis: 100%; } }
.dobas-ablak .mintaablak__szam { margin: 0 0 0.35rem; }
.dobas-ablak .mintaablak__nev { margin: 0 0 1rem; }
/* a vezérlősor a tábla alatt áll, nem ráfut */
.lapozo__labl { margin-top: 1.5rem; }

/* Kilépési ablak: a vibrálás oka, hogy a háttér görgetését tiltó beállítás
   eltünteti az oldal függőleges csúszkáját, így az egész oldal vízszintesen
   ugrik; közben az ablak saját, átfedő keretének is megjelent a csúszkája.
   Ezért: a főoldal csúszkájának helye mindig fenntartva marad, az ablak
   görgetése pedig láthatatlan csúszkával működik. */
html { scrollbar-gutter: stable; }
.kilepo { scrollbar-width: none; overscroll-behavior: contain; }
.kilepo::-webkit-scrollbar { display: none; }

/* ===========================================================================
   Dobj hatszor – asztali elrendezés: szöveg bal oldalon, a kirajzolódó
   hexagram jobb oldalon, külön hasábban. Telefonon marad az egymás alatti sor.
   =========================================================================== */
@media (min-width: 60rem) {
  .dobas__belso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 2rem + 4vw, 6rem); align-items: center;
    width: min(72rem, 100% - 2.5rem); max-width: 72rem; text-align: left; }
  .dobas__belso > .kicker { grid-column: 1; grid-row: 1; justify-self: start; }
  .dobas__belso > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0.4em; max-width: 16ch; font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.75rem); line-height: 1.3; }
  .dobas__belso > .bevezeto { grid-column: 1; grid-row: 3; margin: 0 0 2rem; max-width: 30rem; }
  .dobas__jatek { display: contents; }
  .dobas__vezerles { grid-column: 1; grid-row: 4; align-items: flex-start; }
  .dobas .ermek { justify-content: flex-start; margin: 0 0 1.5rem; gap: 1.5rem; }
  .dobas__sor { justify-content: flex-start; }
  .dobas__apro, .dobas__allapot { text-align: left; }
  .dobas__iv { grid-column: 2; grid-row: 1 / span 4; justify-self: center; align-self: center;
    margin-top: 0; width: min(24rem, 100%); }
}

/* Dobj hatszor – kiegyensúlyozott asztali arány: a hexagram-kártya a szöveges
   oszlop magasságához igazodik, üres állapotban vázlatos mintát mutat. */
@media (min-width: 60rem) {
  .dobas__belso { align-items: stretch; }
  .dobas__belso > .bevezeto { max-width: 26rem; }
  .dobas__belso > h2 { font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem); }
  .dobas__iv { align-self: stretch; width: 100%; max-width: 26rem; justify-self: end;
    min-height: 30rem; margin: 0; display: flex; flex-direction: column; justify-content: center;
    gap: 2.25rem; padding: 3rem 2rem 2.5rem; }
  .dobas__iv::after { display: block; content: 'A MINTÁD'; font-size: 0.75rem; letter-spacing: 0.22em;
    color: var(--kiemelo-szoveg); font-weight: 600; text-align: center; }
  .dobas__vonalak { min-height: 12rem; position: relative; width: 100%; justify-content: center; }
  .dobas__vonalak:empty::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 9.5rem; height: 11.4rem; opacity: 0.5;
    background: repeating-linear-gradient(180deg, var(--kiemelo-halvany) 0 0.9rem, transparent 0.9rem 1.9rem); }
  .dobas__felirat { order: 3; }
}

/* Eredményablak: a két gomb azonos magasságú, és a hexagram-kártya teteje
   a szöveg tetejével (a kicker sorával) egy vonalba kerül. */
.dobas-ablak__gombok .gomb { height: 3.5rem; box-sizing: border-box; padding-block: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
@media (min-width: 60rem) {
  .dobas__jatek .dobas__iv { margin-top: 0; }
}

/* Dobj hatszor – a boltív lejjebb húzva: középen a szöveges oszloppal, alja
   feljebb, háttere félig átlátszó fehér. */
@media (min-width: 60rem) {
  .dobas__iv { align-self: center; height: 23rem; min-height: 0; max-width: 26rem; width: 100%;
    padding: 2.5rem 2rem 2rem; background: rgba(255, 255, 255, 0.6);
    border-radius: 160px 160px 16px 16px; outline: none; margin: 0; }
  .dobas__iv::before { border-radius: 152px 152px 8px 8px; }
}



/* Dobj 6x – a "Dobj 6x." külön sorban, alatta a folytatás. A boltív a vázlat
   méretében (kb. 30 rem magas), kissé feljebb tolva. */
@media (min-width: 60rem) {
  .dobas__belso > h2 { max-width: 26ch; }
  .dobas__iv { align-self: center; height: 30rem; min-height: 0; transform: translateY(-1.25rem); }
}

/* Ismerős valamelyik? – asztali nézetben a kép pontosan a négy mintás lista
   magasságát veszi fel: a teteje és az alja a lista vonalaihoz igazodik. */
@media (min-width: 62rem) {
  .ismeros__racs { align-items: stretch; }
  .ismeros__kep { min-height: 0; }
  .ismeros__kep picture { position: absolute; inset: 0; display: block; }
  .ismeros__kep img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ismeros__racs > div:last-child { display: flex; flex-direction: column; justify-content: center; }
  .ismeros__lista { margin: 0; }
}

/* Eredményablak: a két gomb egy sorban, azonos felső vonalon. */
.dobas-ablak__gombok .gomb { margin-top: 0; }

/* A 64 minta – az elválasztó közelebb kerül a címhez és a bevezetőhöz. */
.terkep-sav .elvalaszto { margin-block: 1.125rem 1.25rem; }


/* ===== Hangulat-kiegészítés: szilva csendélet-sáv, Prémium kiemelés, szerzői
   kiegészítő kép. Szándékosan kevés elem, hogy az oldal ne legyen zsúfolt. ===== */

/* Prémium kiemelés: terrakotta címke, az Alap kártya keret-eltolás nélkül */
.csomag__cimke { background: var(--gomb); }
.csomag--kiemelt .csomag__ar strong { font-weight: 600; }
.csomag:not(.csomag--kiemelt)::after { display: none; }
@media (min-width: 52rem) {
  .csomag--kiemelt { transform: translateY(-0.75rem); }
}