/* Naptudat – custom styles layered on top of Tailwind CDN */

:root {
  --accent-50: #FFF4EE;
  --accent-100: #FFE8DB;
  --accent-200: #FFD1B8;
  --accent-300: #FFAC94;
  --accent-400: #FF9A65;
  --accent-500: #FF7A3D;
  --accent-600: #FF5C14;
  --accent-700: #E04800;
  --accent-800: #B83B00;
  --accent-900: #8F2E00;
  --cream-50:  #FFFBF5;
  --cream-100: #FFF8F0;
  --cream-200: #FFEFDC;
  --cream-300: #FFE4C4;
  --shadow-glow: 0 0 20px rgba(255, 122, 61, 0.25);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream-100);
  color: #1c1917; /* stone-900 */
}

h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); }

.gradient-text {
  background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-card);
}

.section-padding { padding: 4rem 1rem; }
@media (min-width: 768px) { .section-padding { padding: 6rem 2rem; } }

/* Tömör szekció: fele akkora térköz. Ott használjuk, ahol két blokk
   gondolatilag összetartozik - a 6rem ilyenkor szétszakítja őket, és az
   oldal indokolatlanul hosszúra nyúlik. */
.szekcio-tomor { padding: 2.5rem 1rem; }
@media (min-width: 768px) { .szekcio-tomor { padding: 3.5rem 2rem; } }

.container-narrow { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* ===== Gombok 2.0 =====
   A `transition: all` helyett konkrét tulajdonságok: az `all` a nem szándékolt
   változásokat is animálja, és fölöslegesen dolgoztatja a böngészőt. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem; border-radius: 9999px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); letter-spacing: 0.01em;
  transition: box-shadow .18s ease, filter .18s ease,
              transform .18s ease, background-color .18s ease,
              border-color .18s ease;
}
/* A fókuszgyűrű billentyűzetes navigációnál mindig látszik. */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFBF5, 0 0 0 4.5px rgba(255,122,61,.6);
}
html[data-tema="sotet"] .btn:focus-visible {
  box-shadow: 0 0 0 2px #1c1917, 0 0 0 4.5px rgba(255,154,101,.7);
}
.btn-primary {
  background: linear-gradient(180deg, #FF8A50, #FF5C14);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(255,92,20,.3);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
              0 4px 14px rgba(255,92,20,.4),
              0 0 20px rgba(255,122,61,.3);
}
.btn-primary:active { transform: translateY(1px) scale(.985); filter: brightness(.97); }
.btn-outline {
  background: transparent;
  color: #E04800;
  border: 1.5px solid rgba(224,72,0,.4);
}
.btn-outline:hover { background: #FFF4EE; border-color: #FF7A3D; }
.btn-outline:active { background: #FFE8DB; }
.btn-ghost { background: transparent; color: #57534e; }
.btn-ghost:hover { background: #FFF8F0; color: #B83B00; }
.btn-ghost:active { background: #FFEFDC; }
html[data-tema="sotet"] .btn-outline { color: #FF9A65; border-color: rgba(255,154,101,.4); }
html[data-tema="sotet"] .btn-outline:hover { background: rgba(255,122,61,.1); }
html[data-tema="sotet"] .btn-ghost:hover { background: rgba(255,122,61,.08); color: #FFAC94; }

.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* ===== Kártya 2.0 =====
   Halk felső fényél + meleg gradiens, hoverre nem ugrik: csak a mélység
   és a keret erősödik. Az `overflow: hidden` megmaradt az eredetiből - a
   kártyákban borítóképek ülnek, enélkül kilógnának a lekerekített sarkon. */
.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFBF5 0%, #FFFFFF 24%);
  /* A keretvastagság és a sugár változóban: a futófény gyűrűjének pontosan
     ezekből kell számolnia, különben elcsúszik a doboz kerete mellett.
     Lásd a „Futófény" szakaszt lent. */
  --keret: 1px;
  --sugar: 1.25rem;
  border: var(--keret) solid rgba(224, 72, 0, .08);
  border-radius: var(--sugar);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 20px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  border-color: rgba(224, 72, 0, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 8px 28px rgba(0,0,0,.08),
              0 0 24px rgba(255,122,61,.14);
}
.card--kiemelt {
  background: linear-gradient(160deg, #FFF8F0 0%, #FFFFFF 55%);
  border-color: rgba(255, 122, 61, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 20px rgba(0,0,0,.06),
              0 0 20px rgba(255,122,61,.12);
}
.card--zarolt {
  background: #FFFDF9;
  border: 1px dashed rgba(224, 72, 0, .25);
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.card--zarolt .zarolt-tartalom { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }

html[data-tema="sotet"] .card {
  background: linear-gradient(180deg, #2a2320 0%, #292524 30%);
  border-color: rgba(255, 154, 101, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.35);
}
html[data-tema="sotet"] .card:hover {
  border-color: rgba(255, 154, 101, .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              0 8px 28px rgba(0,0,0,.45),
              0 0 24px rgba(255,122,61,.12);
}
html[data-tema="sotet"] .card--kiemelt {
  background: linear-gradient(160deg, #322722 0%, #292524 55%);
  border-color: rgba(255, 122, 61, .35);
}

.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem; border-radius: 9999px;
  background: var(--accent-50); color: var(--accent-700);
  font-size: 0.8125rem; font-weight: 500;
  border: 1px solid var(--accent-100);
}

.pill {
  display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500;
  background: var(--accent-50); color: var(--accent-700);
}

.prose-content p { margin: 0 0 1rem 0; line-height: 1.75; }
.prose-content strong { font-weight: 600; color: #1c1917; }
.prose-content em { font-style: italic; }
.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; font-family: var(--font-display); }
.prose-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; font-family: var(--font-display); }
.prose-content a { color: var(--accent-600); text-decoration: underline; }
.prose-content ul, .prose-content ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.prose-content li { margin-bottom: 0.35rem; }

/* Kepek a cikk torzseben.
   A szerkesztobol sajat meret johet (width/height attributumkent), azt
   tiszteletben tartjuk. A max-width viszont gondoskodik rola, hogy telefonon
   se logjon ki a hasabbol, a height: auto pedig ilyenkor is megtartja az
   aranyokat - kulonben a fix magassag ossze-vissza nyujtana a kepet. */
.prose-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  margin: 1.75rem 0;
}

/* Kiemelt doboz a cikkekben.
   Szandekosan <blockquote>-ra kotve, nem sajat osztalyra: a Filament
   szovegszerkesztoje az idezet gombbal ilyet szur be, es mentéskor meg is
   tartja - egy egyedi <div class="..."> ezzel szemben elveszne. Igy a szerzo
   az adminban is tud kiemelt dobozt keszíteni, kod nelkul.
   Ugyanaz a megjelenes, mint a .highlight-box elemnek. */
.prose-content blockquote {
  background: linear-gradient(135deg, var(--accent-50) 0%, var(--cream-200) 100%);
  border-left: 4px solid var(--accent-500);
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  margin: 2rem 0;
}
.prose-content blockquote > :last-child { margin-bottom: 0; }
.prose-content blockquote p { font-size: 1rem; }

/* ===== Highlight-box 2.0 =====
   A tömör bal szegély helyett lekerekített gradiens-lénia, és egy halvány
   idézőjel a háttérben. A `margin: 2rem 0` az eredetiből maradt: enélkül a
   doboz hozzátapadna a szomszédos bekezdésekhez. */
.highlight-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFFFFF 70%);
  border: 1px solid rgba(224,72,0,.1);
  border-left: none;
  border-radius: 1.125rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 20px rgba(0,0,0,.05);
  padding: 1.875rem 2.125rem 1.625rem;
  margin: 2rem 0;
}
.highlight-box::before {
  content: "";
  position: absolute;
  left: 0; top: 1rem; bottom: 1rem;
  width: 3px; border-radius: 99px;
  background: linear-gradient(180deg, #FFD1B8, #FF7A3D, #FFD1B8);
}
.highlight-box::after {
  content: "\201D";
  position: absolute;
  top: -1.2rem; right: .4rem;
  font: 800 8rem/1 'Poppins', sans-serif;
  color: #FFEFDC;
  pointer-events: none; user-select: none;
  /* A díszítő idézőjel a SZÖVEG MÖGÉ kerül. Pozicionált elemként korábban
     a tartalom fölé festődött, és a hosszabb idézetek utolsó szavaiba
     belelógott. */
  z-index: 0;
}
/* Minden tartalom a dísz fölött. Nem csak az idézet és a forrás: a
   highlight-boxot a cikkszövegek is használják, és ott bármi lehet benne. */
.highlight-box > * { position: relative; z-index: 1; }
html[data-tema="sotet"] .highlight-box {
  background: linear-gradient(135deg, #322722 0%, #292524 70%);
  border-color: rgba(255,154,101,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.35);
}
html[data-tema="sotet"] .highlight-box::after { color: rgba(255,122,61,.1); }

/* Az idézet szövege és a forrás-sor. A prototípusban inline stílussal volt;
   a forrás-sor zárja le az idézetet - enélkül a doboz „lebegve” ér véget. */
.idezet-szoveg {
  position: relative;
  font: 600 italic 18px/1.55 var(--font-display);
  color: #292524;
  margin: 0 0 .75rem;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .idezet-szoveg { font-size: 20px; }
}
.idezet-forras {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  font-size: 13px; color: #a8a29e;
}
.idezet-forras::before {
  content: "";
  width: 16px; height: 1px; flex-shrink: 0;
  background: #FFAC94;
}
/* Középre igazított idézetnél a lénia mindkét oldalon ott van. */
.highlight-box.text-center .idezet-forras { justify-content: center; }
.highlight-box.text-center .idezet-forras::after {
  content: "";
  width: 16px; height: 1px; flex-shrink: 0;
  background: #FFAC94;
}
html[data-tema="sotet"] .idezet-szoveg { color: #FFF8F0; }

/* ===== Szekció-mélység =====
   A .section-padding mellé tehető. A fénykör és a szemcse is CSS - nulla
   plusz hálózati kérés, tehát az LCP-t nem érinti. */
.szekcio-feny {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.szekcio-feny::before {
  content: "";
  position: absolute; z-index: -1;
  top: -120px; left: -80px;
  width: 420px; height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,154,101,.16) 0%, rgba(255,154,101,0) 70%);
  pointer-events: none;
}
.szekcio-feny--jobb::before { left: auto; right: -80px; top: auto; bottom: -140px; }
.szekcio-feny::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
html[data-tema="sotet"] .szekcio-feny::before {
  background: radial-gradient(circle, rgba(255,122,61,.08) 0%, rgba(255,122,61,0) 70%);
}

/* Napkorong-elválasztó: két szekció közé tehető <div class="nap-elvalaszto"> */
.nap-elvalaszto {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,172,148,0), rgba(255,122,61,.4), rgba(255,172,148,0));
}
.nap-elvalaszto::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 99px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  /* A gyűrű vágja el a vonalat a napkorong körül, ezért a háttérrel azonos
     színűnek kell lennie. Az oldal alap háttere cream-100 (#FFF8F0); ha az
     elválasztó más hátterű sávra kerül, elég a --nap-hatter felülírása.
     (Alapértelmezés: az oldal háttere, cream-100.) */
  box-shadow: 0 0 0 7px var(--nap-hatter, #FFF8F0), 0 0 8px 7px rgba(255,122,61,.35);
}
html[data-tema="sotet"] .nap-elvalaszto::after {
  box-shadow: 0 0 0 7px var(--nap-hatter, #1c1917), 0 0 8px 7px rgba(255,122,61,.25);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .nav-link { transition: none; }
  .btn-primary:active { transform: none; }
}

.floating-shape {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 10s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.05); }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb { background: var(--accent-300); border-radius: 6px; border: 2px solid var(--cream-100); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-500); }

/* Nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 240, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 215, 184, 0.4);
}
.nav-link {
  color: #44403c; font-weight: 500; font-size: 0.9375rem;
  padding: 0.5rem 0.25rem; position: relative; transition: color 0.2s;
}
.nav-link:hover { color: var(--accent-600); }
.nav-link::after {
  content: ""; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--accent-500); border-radius: 2px;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--accent-700); }
.nav-link.active::after { width: 100%; }

/* Footer */
.site-footer {
  background: #1c1917; color: #d6d3d1;
  padding: 4rem 1rem 2rem;
}
.site-footer h4 { color: white; font-weight: 600; margin-bottom: 1rem; font-family: var(--font-display); }
.site-footer a { color: #d6d3d1; transition: color 0.2s; }
.site-footer a:hover { color: var(--accent-400); }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: white;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
/* A Tailwind preflight nullázza a mezők belső margóját (`textarea { padding: 0 }`),
   és a tailwind.css szándékosan a style.css UTÁN tölt be. Az inputokat ez nem
   érinti, mert azok attribútum-szelektorral vannak írva fent (0,1,1), ami erősebb
   a preflight elem-szelektoránál (0,0,1) - a textarea és a select viszont csupasz
   elemnév volt, azonos erővel, így a később betöltött preflight nyert, és a szöveg
   a doboz sarkába tapadt. A :not([hidden]) csak azért van itt, hogy megemelje a
   szelektor erejét; minden látható mezőre illeszkedik. */
textarea:not([hidden]), select:not([hidden]) {
  padding: 0.75rem 1rem;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.12);
}

/* Hiányzó vagy hibás mező jelölése - a natív alert() helyett.
   Két osztálynyi specificitás kell, hogy az input[type="…"] fölé kerüljön. */
.field-invalid.field-invalid {
  border-color: #fca5a5;
  background: #fffbfb;
}
.field-invalid.field-invalid:focus {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

/* Utility */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Aurora backdrop for hero */
.aurora {
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  overflow: hidden;
}
.aurora::before, .aurora::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: aurora-drift 14s ease-in-out infinite;
}
.aurora::before {
  background: radial-gradient(circle, var(--accent-200), transparent);
  top: -10%; left: -10%;
}
.aurora::after {
  background: radial-gradient(circle, var(--cream-300), transparent);
  bottom: -20%; right: -10%;
  animation-delay: -7s;
}
@keyframes aurora-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.08); }
}

/* Marquee-style gradient divider */
.gradient-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-300), transparent);
}

/* --- Blogposzt: tartalomjegyzék és horgonyok --- */

/* A ragadós fejléc alá csúszna a címsor, amikor a tartalomjegyzékből ugrunk rá. */
.blog-cimsor { scroll-margin-top: 6.5rem; }

/* Az éppen olvasott szakasz kiemelése a jegyzékben. */
.jegyzek-link.aktiv {
  color: var(--accent-600);
  font-weight: 500;
}

/* Nagy képernyőn a jegyzék mindig nyitva - ott van hely neki.
   Kisebb kijelzőn nyitható-csukható marad, hogy ne tolja le a szöveget. */
@media (min-width: 1280px) {
  .blog-jegyzek details > summary { pointer-events: none; }
}

/* --- Blogposzt: kiemelt dobozok eszközsora --- */
.blog-doboz-eszkozok {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(120, 113, 108, 0.12);
}
.blog-doboz-gomb {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #78716C;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(120, 113, 108, 0.18);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.blog-doboz-gomb:hover {
  color: var(--accent-600);
  border-color: var(--accent-300);
  background: #fff;
}
.blog-doboz-gomb.kesz { color: #16A34A; border-color: #86EFAC; }

/* ---------------------------------------------------------------------------
   Sötét mód

   Az oldal színei nagyrészt Tailwind-osztályokból jönnek, nem változókból,
   ezért itt a ténylegesen használt felületeket írjuk felül - nem az egész
   rendszert. A `data-tema="sotet"` a <html>-en ül, hogy a váltás egyszerre
   érjen mindent, és ne villanjon fel a világos háttér.

   A fejléc és a lábléc eleve sötét, azokhoz nem kell nyúlni.
--------------------------------------------------------------------------- */
html[data-tema="sotet"] {
  --cream-50:  #1C1917;
  --cream-100: #1C1917;
  --cream-200: #292524;
  --cream-300: #292524;
  color-scheme: dark;
}
html[data-tema="sotet"] body { background: #1C1917; }

html[data-tema="sotet"] .bg-cream-50,
html[data-tema="sotet"] .bg-cream-100,
html[data-tema="sotet"] .bg-white { background-color: #1C1917 !important; }

html[data-tema="sotet"] .card,
html[data-tema="sotet"] .glass-card { background: #292524; border-color: #44403C; }

html[data-tema="sotet"] .text-stone-800,
html[data-tema="sotet"] .text-stone-700 { color: #E7E5E4 !important; }
html[data-tema="sotet"] .text-stone-600,
html[data-tema="sotet"] .text-stone-500 { color: #A8A29E !important; }
html[data-tema="sotet"] .text-stone-400 { color: #78716C !important; }

html[data-tema="sotet"] .border-stone-200,
html[data-tema="sotet"] .border-stone-100 { border-color: #44403C !important; }

html[data-tema="sotet"] .prose-content { color: #D6D3D1; }
html[data-tema="sotet"] .prose-content h2,
html[data-tema="sotet"] .prose-content h3,
html[data-tema="sotet"] .prose-content strong { color: #F5F5F4; }
html[data-tema="sotet"] .prose-content blockquote {
  background: #292524;
  border-color: var(--accent-500);
  color: #E7E5E4;
}
html[data-tema="sotet"] .blog-doboz-gomb {
  background: rgba(255,255,255,.05);
  border-color: #57534E;
  color: #A8A29E;
}
html[data-tema="sotet"] .blog-doboz-gomb:hover { background: rgba(255,255,255,.1); color: var(--accent-400); }

html[data-tema="sotet"] .megoszt-gomb {
  background: #292524;
  border-color: #44403C;
  color: #A8A29E;
}
html[data-tema="sotet"] input,
html[data-tema="sotet"] textarea,
html[data-tema="sotet"] select { background: #292524; border-color: #57534E; color: #E7E5E4; }

/* A téma-kapcsoló gomb. */
.tema-valto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  color: #78716C;
  transition: background .18s, color .18s;
}
.tema-valto:hover { background: rgba(120,113,108,.12); color: var(--accent-600); }
html[data-tema="sotet"] .tema-valto { color: #A8A29E; }
.tema-valto .ikon-sotet { display: none; }
html[data-tema="sotet"] .tema-valto .ikon-vilagos { display: none; }
html[data-tema="sotet"] .tema-valto .ikon-sotet { display: block; }

/* --- Lábléc --- */
.site-footer h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A8A29E;
  margin-bottom: 1.25rem;
}

/* A linkek finoman jobbra lépnek - annyira, hogy érezhető legyen, de ne ugráljon.
   A `font: inherit` a Cookie beállítások miatt kell: az <button>, és a gombok
   nem öröklik a betűtípust a szülőtől, ezért enélkül elütött a szomszédaitól. */
.lablec-link {
  display: inline-block;
  font: inherit;
  text-align: left;
  color: #A8A29E;
  transition: color .18s ease, transform .18s ease;
}
.lablec-link:hover {
  color: #fff;
  transform: translateX(3px);
}

/* A lábléc hírlevél-mezője a sötét háttéren ül, ezért kell felülírni a
   globális input-stílust (fehér háttér, szürke keret). */
#lablec-hirlevel input[type="email"] {
  box-shadow: none;
}
#lablec-hirlevel input[type="email"]:focus {
  border-color: transparent;
  box-shadow: none;
}

/* Vissza a tetejére: csak görgetés után úszik be. */
#fel-gomb.lathato {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* A fizetési jelvények egységes kártyaformában. */
.fizetes-jelveny {
  display: inline-flex;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  opacity: .85;
  transition: opacity .18s ease;
}
.fizetes-jelveny:hover { opacity: 1; }


/* ============================================================================
   DESIGN 2026 - Claude Design handoff beépítése
   Forrás: design-csomag/Naptudat redesign projekt/design_handoff_naptudat/
   A körök sorrendben követik egymást; ahol egy későbbi kör ugyanazt a
   szelektort érinti, ott szándékosan felülírja a korábbit.
   ============================================================================ */


/* ---------- 2. kör ---------- */
/* ===== CSS a style.css-be - lista-kártya ===== */
/* ===== Tartalom-lista kártya (a .card 2.0-ra épül) ===== */
.lista-borito {
  position: relative;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(160deg, #FFE8DB 0%, #FFF4EE 60%, #FFF8F0 100%);
}
.lista-borito::before {              /* napfelkelte-fénykör */
  content: "";
  position: absolute;
  bottom: -90px; left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.35) 0%, rgba(255,122,61,0) 70%);
}
.lista-borito::after {               /* napkorong */
  content: "";
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 18px rgba(255,92,20,.5);
}
.lista-datum {
  position: absolute; top: .875rem; left: 1rem;
  font-size: 11.5px; font-weight: 600; color: #B83B00;
  background: rgba(255,251,245,.85);
  border: 1px solid rgba(255,209,184,.8);
  padding: 6px 11px; border-radius: 99px;
  backdrop-filter: blur(4px);
}
html[data-tema="sotet"] .lista-borito {
  background: linear-gradient(160deg, #322722 0%, #2a2320 100%);
}
html[data-tema="sotet"] .lista-datum {
  color: #FFAC94; background: rgba(28,25,23,.7);
  border-color: rgba(255,154,101,.25);
}

/* ===== CSS a style.css-be - jelvények ===== */
/* ===== Jelvény-rendszer (.badge bővítése) ===== */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 99px;
}
.badge::before {                     /* jelentés-pötty */
  content: ""; width: 7px; height: 7px; border-radius: 99px;
  background: currentColor; opacity: .7;
}
.badge--ingyenes { color: #57534e; background: #fff; border: 1px solid #e7e5e4; }
.badge--email   { color: #B83B00; background: #FFF4EE; border: 1px solid #FFD1B8; }
.badge--tag {
  color: #fff;
  background: linear-gradient(135deg, #B83B00, #8F2E00);
}
.badge--uj {
  color: #fff;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 2px 8px rgba(255,92,20,.3);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
.badge--uj::before, .badge--tag::before { display: none; }
.badge--kiemelt {
  color: #B83B00; background: #FFF4EE; border: 1px solid #FFD1B8;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
.badge--kiemelt::before {
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 6px rgba(255,122,61,.6);
  opacity: 1;
  animation: badge-pulzus 3s ease-in-out infinite;
}
@keyframes badge-pulzus {
  0%, 100% { opacity: .5 }
  50% { opacity: 1 }
}
html[data-tema="sotet"] .badge--ingyenes { color: #a8a29e; background: #292524; border-color: #44403c; }
html[data-tema="sotet"] .badge--email { color: #FFAC94; background: rgba(255,122,61,.08); border-color: rgba(255,154,101,.3); }

/* ===== CSS + vanilla JS - lejátszó ===== */
/* ===== Lejátszó ===== */
.lejatszo {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(180deg, #FFF8F0, #FFFBF5);
  border: 1px solid #FFEFDC;
  border-radius: 1rem;
  padding: .875rem 1.125rem;
}
.lejatszo-play {
  width: 44px; height: 44px; border-radius: 99px;
  background: linear-gradient(180deg, #FF8A50, #FF5C14);
  border: none; color: #fff; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 10px rgba(255,92,20,.35);
  transition: box-shadow .18s ease, filter .18s ease;
}
.lejatszo-play:hover { filter: brightness(1.06); }
.lejatszo-sav { width: 3px; border-radius: 2px; background: #FFD1B8; transition: background .3s ease; }
.lejatszo-sav.jatszott { background: #FF7A3D; }
html[data-tema="sotet"] .lejatszo {
  background: linear-gradient(180deg, #2a2320, #292524);
  border-color: rgba(255,154,101,.14);
}
html[data-tema="sotet"] .lejatszo-sav { background: #44403c; }
html[data-tema="sotet"] .lejatszo-sav.jatszott { background: #FF7A3D; }

/* Vanilla JS (a meglévo audio elemre kötve, ~kb. ennyi): */
/*
const audio = doboz.querySelector('audio');
const savok = doboz.querySelectorAll('.lejatszo-sav');
audio.addEventListener('timeupdate', () => {
  const arany = audio.currentTime / audio.duration;
  savok.forEach((s, i) =>
    s.classList.toggle('jatszott', i / savok.length < arany));
});
*/

/* A designcsomag a fenti három osztályt adja meg; a prototípusban a többi
   darab inline stílussal szerepelt. Ezek itt a class-rendszerbe átemelve -
   a képernyőn látott értékekkel (44px gomb, 36px sávmező, 2px rés). */
.lejatszo-play { display: grid; place-items: center; flex-shrink: 0; }
.lejatszo-play:active { filter: brightness(.97); }
.lejatszo-play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFF8F0, 0 0 0 4.5px rgba(255,122,61,.6);
}
.lejatszo--szol .lejatszo-play {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
              0 4px 14px rgba(255,92,20,.45),
              0 0 20px rgba(255,122,61,.3);
}
.lejatszo-savok {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 2px;
  height: 36px; cursor: pointer;
  border-radius: 4px;
}
/* A sávok soha ne zsugorodjanak: flex-gyerekként alapból `flex-shrink: 1`,
   és ha akár egy pixellel többet számol a JS, mint amennyi kifér, mind a
   30-40 sáv nullára húzódna - vagyis eltűnne a hullám. */
.lejatszo-sav { flex-shrink: 0; }
.lejatszo-savok:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,122,61,.45);
}
.lejatszo-ido { flex-shrink: 0; text-align: right; }
.lejatszo-ido-eltelt {
  font: 600 13px/1.2 var(--font-display);
  color: #B83B00;
  font-variant-numeric: tabular-nums;
}
.lejatszo-ido-hatra {
  font-size: 11.5px; color: #a8a29e;
  font-variant-numeric: tabular-nums;
}
html[data-tema="sotet"] .lejatszo-play:focus-visible {
  box-shadow: 0 0 0 2px #292524, 0 0 0 4.5px rgba(255,154,101,.7);
}
html[data-tema="sotet"] .lejatszo-ido-eltelt { color: #FFAC94; }
@media (prefers-reduced-motion: reduce) {
  .lejatszo-sav { transition: none; }
}
/* Szűk mobilon a hátralévő idő elfér a sáv alatt is, de a sávmező marad a
   fő elem: a gomb és az idő zsugorodik előbb. */
@media (max-width: 420px) {
  .lejatszo { gap: .625rem; padding: .75rem .875rem; }
  .lejatszo-savok { height: 30px; }
}

/* ===== CSS a style.css-be - email-kapu ===== */
/* ===== Email-kapu sáv ===== */
.email-kapu {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .875rem;
  background: linear-gradient(135deg, #FFF4EE, #FFF8F0 70%);
  border: 1px solid #FFD1B8;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}
.email-kapu::before {
  content: "";
  position: absolute; top: -60px; right: -40px;
  width: 180px; height: 180px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,154,101,.2), rgba(255,154,101,0) 70%);
  pointer-events: none;
}
/* Fizetős tartalom sávja. A designcsomag csak az email-kaput adja meg, de a
   meditációlistában a megvásárolható elemeknek is kell egy sáv - a zárolt
   állapot nyelvét a .card--zarolt-tól veszi át (szaggatott meleg keret,
   halványabb fény), hogy a látogató ránézésre megkülönböztesse a kettőt. */
.email-kapu--zarolt {
  background: linear-gradient(135deg, #FFFDF9, #FFFFFF 70%);
  border: 1px dashed rgba(224,72,0,.25);
}
.email-kapu--zarolt::before {
  background: radial-gradient(circle, rgba(255,154,101,.12), rgba(255,154,101,0) 70%);
}
.email-kapu-ikon {
  width: 38px; height: 38px; border-radius: .75rem;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(160deg, #FFE8DB, #FFD1B8);
  color: #B83B00;
}
.email-kapu--zarolt .email-kapu-ikon {
  background: linear-gradient(160deg, #FFF4EE, #FFE8DB);
}
.email-kapu-szoveg { flex: 1; position: relative; min-width: 0; }
.email-kapu-cim {
  font: 600 14px/1.3 var(--font-display);
  color: #1c1917;
}
.email-kapu-alcim { font-size: 13px; color: #78716c; margin-top: 2px; }
html[data-tema="sotet"] .email-kapu--zarolt {
  background: linear-gradient(135deg, #292524, #1c1917 70%);
  border-color: rgba(255,154,101,.2);
}
html[data-tema="sotet"] .email-kapu-ikon {
  background: linear-gradient(160deg, #3a2b22, #322722);
  color: #FFAC94;
}
html[data-tema="sotet"] .email-kapu-cim { color: #FFF8F0; }
html[data-tema="sotet"] .email-kapu-alcim { color: #a8a29e; }
/* Mobilon a gomb a szöveg alá kerül, teljes szélességben. */
@media (max-width: 560px) {
  .email-kapu { flex-wrap: wrap; }
  .email-kapu > .btn { width: 100%; }
}

/* ===== Modál ===== */
.modal-kartya {
  background: #fff;
  border: 1px solid rgba(224,72,0,.08);
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.12), 0 0 24px rgba(255,122,61,.08);
  overflow: hidden;
}
.modal-fejlec {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFE8DB, #FFF4EE);
  padding: 1.375rem 1.625rem 1.125rem;
}
.modal-fejlec::before {
  content: "";
  position: absolute; bottom: -70px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.25), rgba(255,122,61,0) 70%);
}
/* A prototípusban a modál méretei és belső tipográfiája inline stílussal
   szerepeltek; itt a class-rendszerbe átemelve. A 400px a designcsomag
   mérete. A belső térközök egy hajszállal szűkebbek a prototípusnál, hogy a
   modál laptopképernyőn is elférjen görgetés nélkül. */
.modal-kartya {
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.modal-fejlec { padding: 1.125rem 1.375rem 1rem; }
.modal-fejlec-sor {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem;
}
.modal-cim { font: 700 18px/1.25 var(--font-display); color: #1c1917; }
.modal-alcim { font-size: 13px; font-weight: 600; color: #B83B00; margin-top: 2px; }
.modal-torzs { padding: 1.125rem 1.375rem 1.25rem; }
.modal-cimke {
  display: block;
  font: 600 12.5px/1 var(--font-display);
  color: #57534e; margin-bottom: .4375rem;
}
.modal-apro {
  font-size: 12px; line-height: 1.5;
  color: #a8a29e; text-align: center;
  margin-top: .75rem;
}
.modal-apro a { color: #B83B00; text-decoration: underline; }
html[data-tema="sotet"] .modal-cim { color: #FFF8F0; }
html[data-tema="sotet"] .modal-alcim { color: #FFAC94; }
html[data-tema="sotet"] .modal-cimke { color: #d6d3d1; }
html[data-tema="sotet"] .modal-apro a { color: #FFAC94; }

/* A napfény-fejléc bezáró gombja - a prototípusban inline stílussal szerepelt. */
.modal-bezar {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center; flex-shrink: 0;
  border: none; cursor: pointer;
  background: rgba(255,251,245,.7); color: #57534e;
  transition: background .18s ease;
}
.modal-bezar:hover { background: #fff; }
.modal-bezar:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,122,61,.5); }
html[data-tema="sotet"] .modal-bezar { background: rgba(28,25,23,.5); color: #d6d3d1; }
html[data-tema="sotet"] .modal-bezar:hover { background: #1c1917; }

/* ===== Űrlapmező ===== */
.mezo {
  width: 100%;
  padding: .875rem 1rem;
  border: 1.5px solid #FFEFDC;
  background: #FFFBF5;
  border-radius: .75rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mezo:focus {
  outline: none;
  border-color: #FF7A3D;
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(255,122,61,.18);
}
html[data-tema="sotet"] .email-kapu {
  background: linear-gradient(135deg, #322722, #292524 70%);
  border-color: rgba(255,154,101,.25);
}
html[data-tema="sotet"] .modal-kartya { background: #292524; }
html[data-tema="sotet"] .modal-fejlec { background: linear-gradient(160deg, #3a2b22, #322722); }
html[data-tema="sotet"] .mezo {
  background: #1c1917; border-color: #44403c; color: #FFF8F0;
}
html[data-tema="sotet"] .mezo:focus { border-color: #FF7A3D; }

/* ---------- 3. kör ---------- */
/* ===== CSS + 3 sor JS - fejléc ===== */
/* ===== Fejléc 2.0 (.site-header bővítése) ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 251, 245, .75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 209, 184, 0);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.gorgetett {
  border-bottom-color: rgba(255, 209, 184, .4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}
/* JS (3 sor, defer): */
/* const h = document.querySelector('.site-header');
   addEventListener('scroll', () =>
     h.classList.toggle('gorgetett', scrollY > 8), {passive:true}); */

.nav-link {
  position: relative;
  padding: .5625rem .8125rem;
  border-radius: .625rem;
  font-weight: 500; color: #44403c;
  transition: color .18s ease, background-color .18s ease;
}
.nav-link:hover { color: #B83B00; background: rgba(255,232,219,.5); }
.nav-link.aktiv, .nav-link.active {
  color: #B83B00; font-weight: 600;
  background: rgba(255,232,219,.5);
  box-shadow: inset 0 -2px 0 #FF7A3D;
}
.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFBF5, 0 0 0 4px rgba(255,122,61,.6);
}

/* Ikon-kapszula (fiók + kosár) */
.ikon-csoport {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255,244,238,.7);
  border: 1px solid rgba(255,209,184,.5);
  border-radius: 99px;
}
.ikon-csoport a {
  width: 32px; height: 32px; border-radius: 99px;
  display: grid; place-items: center; color: #57534e;
  transition: background .18s ease, color .18s ease;
}
.ikon-csoport a:hover { background: #fff; color: #B83B00; }

/* Lenyíló */
.lenyilo {
  background: rgba(255,251,245,.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,209,184,.5);
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.1), 0 0 20px rgba(255,122,61,.06);
  padding: .625rem;
}
.lenyilo a { display:flex; align-items:center; gap:.75rem;
  padding:.625rem .75rem; border-radius:.6875rem;
  transition: background .18s ease; }
.lenyilo a:hover { background:#FFF4EE; }

html[data-tema="sotet"] .site-header { background: rgba(28,25,23,.75); }
html[data-tema="sotet"] .site-header.gorgetett { border-bottom-color: rgba(255,154,101,.2); }
html[data-tema="sotet"] .nav-link { color: #d6d3d1; }
/* Figyelem: a vessző után MEG KELL ismételni a html[data-tema="sotet"] előtagot.
   Enélkül a `.nav-link.active` önálló szelektorrá válik, és a sötét mód halvány
   színeit világos módban is megkapja - olvashatatlan narancs szöveg narancs
   háttéren. */
html[data-tema="sotet"] .nav-link:hover,
html[data-tema="sotet"] .nav-link.aktiv,
html[data-tema="sotet"] .nav-link.active { color: #FFAC94; background: rgba(255,122,61,.1); }
html[data-tema="sotet"] .lenyilo { background: rgba(41,37,36,.95); border-color: rgba(255,154,101,.2); }
html[data-tema="sotet"] .lenyilo a:hover { background: rgba(255,122,61,.08); }

/* ===== CSS a style.css-be - hero ===== */
/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFF4EE 0%, #FFF8F0 45%, #FFFBF5 100%);
}
.hero::before {                       /* napfelkelte-fénykör */
  content: "";
  position: absolute; z-index: -1;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 560px; height: 560px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,154,101,.28) 0%, rgba(255,154,101,0) 65%);
  pointer-events: none;
}
.hero::after {                        /* szemcse */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #B83B00;
  background: rgba(255,251,245,.8);
  border: 1px solid #FFD1B8;
  padding: .5rem .9375rem; border-radius: 99px;
  backdrop-filter: blur(4px);
}
.hero-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 8px rgba(255,122,61,.7);
  animation: eyebrow-pulzus 3.5s ease-in-out infinite;
}
@keyframes eyebrow-pulzus {
  0%, 100% { opacity: .5 }
  50% { opacity: 1 }
}
/* a kulcsszó kiemelése (a meglévő .gradient-text finomítása) */
.gradient-text {
  background: linear-gradient(120deg, #FF7A3D 0%, #E04800 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
html[data-tema="sotet"] .hero {
  background: linear-gradient(180deg, #292524 0%, #1c1917 100%);
}
html[data-tema="sotet"] .hero::before {
  background: radial-gradient(circle, rgba(255,122,61,.14) 0%, rgba(255,122,61,0) 65%);
}
html[data-tema="sotet"] .hero-eyebrow {
  color: #FFAC94; background: rgba(28,25,23,.7);
  border-color: rgba(255,154,101,.3);
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow::before { animation: none; }
}

/* ===== CSS + vanilla JS - hírlevél-blokk ===== */
/* ===== Hírlevél-záróblokk ===== */
.hirlevel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2a2320 0%, #1c1917 100%);
  border-radius: 1.25rem;
  text-align: center;
}
.hirlevel::before {
  content: "";
  position: absolute; top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 380px; height: 380px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.22) 0%, rgba(255,122,61,0) 65%);
  pointer-events: none;
}
.hirlevel-mezo {
  display: inline-flex; align-items: center;
  background: rgba(255,251,245,.08);
  border: 1px solid rgba(255,154,101,.3);
  border-radius: 99px;
  padding: 5px 5px 5px 20px;
  transition: border-color .18s ease;
}
.hirlevel-mezo:focus-within { border-color: #FF7A3D; }
.hirlevel-mezo input {
  background: transparent; border: none; outline: none;
  color: #FFF8F0; min-width: 12rem;
}
.hirlevel-siker {
  display: inline-flex; align-items: center; gap: .625rem;
  background: rgba(255,122,61,.12);
  border: 1px solid rgba(255,154,101,.4);
  border-radius: 99px;
  padding: .8125rem 1.375rem;
  color: #FFEFDC; font-weight: 600;
}
/* JS: a form submitjében a mezőt elrejted, a .hirlevel-siker-t
   megjeleníted (display csere) - nincs újratöltés, nincs alert. */

/* Az 5. kör globális `input[type="email"]` szabálya (keret, krém háttér,
   sarok) lentebb van a fájlban, és a `.hirlevel-mezo input` (0,1,1)
   ugyanolyan erős, tehát a későbbi nyerne - a mező visszakapná a világos
   dobozt a sötét kártyán belül. Az attribútum kiírásával (0,1,2) marad
   átlátszó. Ugyanezért kell a fókuszgyűrűt is némítani: a keretet a
   kapszula rajzolja a :focus-within-nel. */
.hirlevel-mezo input[type="email"] {
  background: transparent; border: none; box-shadow: none;
  color: #FFF8F0; padding: 0; min-width: 11rem;
}
.hirlevel-mezo input[type="email"]:focus {
  background: transparent; border: none; box-shadow: none;
}
.hirlevel-mezo input[type="email"]::placeholder { color: #78716c; }
.hirlevel-cim { font: 700 23px/1.3 var(--font-display); color: #FFF8F0; margin: 0; }
.hirlevel-szoveg {
  font-size: 14px; line-height: 1.65; color: #a8a29e;
  margin: 0 auto; max-width: 44ch;
}
.hirlevel-ikon {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  color: #fff;
  box-shadow: 0 0 24px rgba(255,122,61,.45);
}
.hirlevel-apro { font-size: 12px; color: #78716c; margin: 0; }
.hirlevel-pipa {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  color: #fff;
}
.hirlevel-mezo .btn:focus-visible {
  box-shadow: 0 0 0 2px #1c1917, 0 0 0 4px rgba(255,154,101,.7);
}

/* ---------- 4. kör ---------- */
/* ===== CSS a style.css-be - prose-content ===== */
/* ===== .prose-content 2.0 - a meglévő szabályok felülírása ===== */
.prose-content {
  font-size: 1.09375rem;      /* 17.5px */
  line-height: 1.8;
  color: #292524;
}
.prose-content p {
  margin: 0 0 1.375rem;
  max-width: 68ch;
  text-wrap: pretty;
}
.prose-content h2 {
  font-size: 1.5625rem;       /* 25px */
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 2.75rem 0 1rem;     /* előtte sok, utána kevés */
  text-wrap: balance;
}
.prose-content h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.375rem 0 .875rem;
  display: flex; align-items: center; gap: .75rem;
}
.prose-content h3::before {   /* halk napkorong-pötty */
  content: "";
  width: 5px; height: 5px; border-radius: 99px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  flex-shrink: 0;
}
.prose-content > *:first-child { margin-top: 0; }
.prose-content li { margin-bottom: .5rem; line-height: 1.75; max-width: 66ch; }
.prose-content em { color: #57534e; }
.prose-content a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

/* Mobilon kicsit kisebb, de a sortáv marad */
@media (max-width: 640px) {
  .prose-content { font-size: 1.0625rem; }   /* 17px */
  .prose-content h2 { font-size: 1.375rem; margin-top: 2.25rem; }
}
html[data-tema="sotet"] .prose-content { color: #D6D3D1; }
html[data-tema="sotet"] .prose-content em { color: #a8a29e; }

/* ===== CSS a style.css-be - kiemelt dobozok ===== */
/* ===== Kiemelt dobozok - három szerep ===== */
/* 1. Idézet: a blockquote alap marad, csak szebb */
.prose-content blockquote, .highlight-box {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFFFFF 70%);
  border: 1px solid rgba(224,72,0,.1);
  border-left: none;
  border-radius: 1.125rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 20px rgba(0,0,0,.05);
  padding: 1.625rem 1.875rem 1.375rem;
  margin: 2.25rem 0;
}
.prose-content blockquote::before, .highlight-box::before {
  content: "";
  position: absolute; left: 0; top: 1rem; bottom: 1rem;
  width: 3px; border-radius: 99px;
  background: linear-gradient(180deg, #FFD1B8, #FF7A3D, #FFD1B8);
}
.prose-content blockquote::after, .highlight-box::after {
  content: "\201D";
  position: absolute; top: -1.25rem; right: .5rem;
  font: 800 8rem/1 'Poppins', sans-serif;
  color: #FFEFDC; pointer-events: none; user-select: none;
  /* A dísz a tartalom MÖGÉ. Ez a szabály a fentebbi, azonos célú
     definíciónál később áll, tehát ez az érvényes - a z-indexnek itt is
     ott kell lennie, különben visszatér a hiba. */
  z-index: 0;
}
.prose-content blockquote > *, .highlight-box > * { position: relative; z-index: 1; }
.prose-content blockquote p { position: relative; font-size: 1.0625rem; font-style: italic; font-weight: 600; }

/* 2. Gyakorlat-doboz */
.highlight-box--gyakorlat {
  background: linear-gradient(160deg, #FFF4EE, #FFFFFF 60%);
  border: 1px solid rgba(255,122,61,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 20px rgba(0,0,0,.05),
              0 0 18px rgba(255,122,61,.1);
}
.highlight-box--gyakorlat::before,
.highlight-box--gyakorlat::after { display: none; }
.doboz-cimke {
  display: inline-flex; align-items: center; gap: .625rem;
  font: 600 11px/1 'Poppins', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #B83B00; margin-bottom: .875rem;
}
.doboz-cimke span {
  width: 26px; height: 26px; border-radius: 9px;
  background: linear-gradient(160deg, #FFE8DB, #FFD1B8);
  display: grid; place-items: center; font-size: 13px;
}
/* a meglévő .blog-doboz-gomb.kesz zöldjét cseréld a márkaszínre: */
.blog-doboz-gomb.kesz { color: #E04800; border-color: #FFAC94; background: #FFF4EE; }

/* 3. Jegyzet-doboz */
.highlight-box--jegyzet {
  background: #FFFDF9;
  border: 1px dashed rgba(224,72,0,.25);
  box-shadow: none;
  display: flex; gap: .875rem;
}
.highlight-box--jegyzet::before,
.highlight-box--jegyzet::after { display: none; }

html[data-tema="sotet"] .prose-content blockquote,
html[data-tema="sotet"] .highlight-box {
  background: linear-gradient(135deg, #322722 0%, #292524 70%);
  border-color: rgba(255,154,101,.16);
}
html[data-tema="sotet"] .prose-content blockquote::after,
html[data-tema="sotet"] .highlight-box::after { color: rgba(255,122,61,.1); }
html[data-tema="sotet"] .highlight-box--jegyzet { background: rgba(255,255,255,.03); }

/* ===== CSS + vanilla JS - olvasási segédek ===== */
/* ===== Olvasási haladásjelző ===== */
.olvasas-sav {
  position: fixed; left: 0; right: 0;
  top: 4.5rem;                /* a ragadós fejléc alja */
  height: 3px; z-index: 49;
  background: transparent;
  pointer-events: none;
}
.olvasas-sav i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #FFAC94, #FF5C14);
  border-radius: 0 99px 99px 0;
  box-shadow: 0 0 8px rgba(255,122,61,.5);
  transition: width .1s linear;
}
/* JS (5 sor, defer, passive):
const sav = document.querySelector('.olvasas-sav i');
const cikk = document.querySelector('.prose-content');
addEventListener('scroll', () => {
  const teto = cikk.offsetTop, mag = cikk.offsetHeight - innerHeight;
  sav.style.width = Math.min(100, Math.max(0, (scrollY - teto) / mag * 100)) + '%';
}, { passive: true }); */

/* ===== Tartalomjegyzék ===== */
.jegyzek-link {
  position: relative;
  display: block;
  font-size: 12.5px; line-height: 1.5;
  color: #78716c;
  padding: .4375rem .625rem .4375rem .875rem;
  border-radius: .5rem;
  transition: color .18s ease, background-color .18s ease;
}
.jegyzek-link::before {
  content: "";
  position: absolute; left: 0; top: .4375rem; bottom: .4375rem;
  width: 2px; border-radius: 99px;
  background: transparent;
  transition: background .2s ease;
}
.jegyzek-link:hover { background: #FFF4EE; color: #B83B00; }
.jegyzek-link.aktiv {
  color: #B83B00; font-weight: 600;
  background: #FFF4EE;
}
.jegyzek-link.aktiv::before {
  background: linear-gradient(180deg, #FFAC94, #FF5C14);
}

/* ===== Megosztó-kapszula ===== */
.megoszt-oszlop {
  display: flex; flex-direction: column; gap: 4px;
  background: #FFF8F0; border: 1px solid #FFEFDC;
  border-radius: 99px; padding: 6px;
  height: fit-content;
  position: sticky; top: 7rem;
}
.megoszt-gomb {
  width: 28px; height: 28px; border-radius: 99px;
  display: grid; place-items: center;
  color: #78716c; background: transparent; border: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.megoszt-gomb:hover { background: #fff; color: #E04800; }
html[data-tema="sotet"] .megoszt-oszlop { background: #292524; border-color: #44403C; }
html[data-tema="sotet"] .megoszt-gomb:hover { background: #1c1917; color: #FF9A65; }
html[data-tema="sotet"] .jegyzek-link.aktiv { background: rgba(255,122,61,.1); color: #FFAC94; }

/* ---------- 5. kör ---------- */
/* ===== CSS a style.css-be - űrlapok ===== */
/* ===== Mezők 2.0 - a meglévő globális input-szabályok frissítése ===== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], textarea, select {
  border: 1.5px solid #FFEFDC;
  background: #FFFBF5;
  border-radius: .75rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #FF7A3D;
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(255, 122, 61, .18);
}

/* Hibás mező - a meglévő .field-invalid marad, csak melegebb hangon */
.field-invalid.field-invalid { border-color: #fca5a5; background: #fffbfb; }
.mezo-hiba {
  display: flex; align-items: center; gap: .375rem;
  font-size: 12.5px; color: #dc2626; margin-top: .375rem;
}
.mezo-hiba::before {
  content: "!";
  width: 14px; height: 14px; border-radius: 99px;
  background: #fee2e2; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}

/* Egyedi checkbox (a natív input rejtve, a span a doboz) */
.pipa {
  width: 19px; height: 19px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px; color: #fff;
  background: #fff; border: 1.5px solid #e7e5e4;
  transition: background .18s ease, border-color .18s ease;
}
input:checked + .pipa {
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  border-color: transparent;
}
input:focus-visible + .pipa {
  box-shadow: 0 0 0 3px rgba(255,122,61,.25);
}

/* Gomb töltés-állapot (JS: gomb.classList.add('toltes')) */
.btn .porgo { display: none; }
.btn.toltes { pointer-events: none; opacity: .85; }
.btn.toltes .porgo {
  display: inline-block;
  width: 15px; height: 15px; border-radius: 99px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: btn-porog .7s linear infinite;
}
@keyframes btn-porog { to { transform: rotate(360deg); } }

/* Siker-panel */
.urlap-siker {
  display: flex; flex-direction: column; align-items: center; gap: .875rem;
  text-align: center; padding: 2rem 0;
}
.urlap-siker .korong {
  width: 60px; height: 60px; border-radius: 99px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  display: grid; place-items: center;
  color: #fff; font-size: 24px;
  box-shadow: 0 0 24px rgba(255,122,61,.45);
}
html[data-tema="sotet"] input, html[data-tema="sotet"] textarea,
html[data-tema="sotet"] select {
  background: #292524; border-color: #44403C; color: #E7E5E4;
}
html[data-tema="sotet"] input:focus, html[data-tema="sotet"] textarea:focus {
  border-color: #FF7A3D; background: #1c1917;
}

/* ===== CSS a style.css-be - üres állapot ===== */
/* ===== Üres állapot ===== */
.ures-allapot {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .875rem; text-align: center;
  padding: 2.75rem 2rem;
}
/* Halk fénykör felül - SZÁNDÉKOSAN ::after, nem ::before.
   Az üres állapot doboza egyben .card is, a futófény gyűrűje pedig a
   .card::before-on ül. Egy elemnek egy ::before-ja van: a két szabály
   összeolvadt, és a gyűrű megörökölte innen a 320px-es méretet meg a
   translateX(-50%)-ot - ettől a keret helyett egy elcsúszott függőleges
   csík látszott a doboz belsejében. */
.ures-allapot::after {
  content: "";
  position: absolute; top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 320px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,154,101,.16), rgba(255,154,101,0) 70%);
  pointer-events: none;
}
.ures-ikon {
  position: relative;
  width: 56px; height: 56px; border-radius: 99px;
  background: linear-gradient(160deg, #FFE8DB, #FFD1B8);
  border: 1px solid #FFD1B8;
  display: grid; place-items: center;
  color: #B83B00;
}
.ures-ikon::before {                 /* lélegző glow */
  content: "";
  position: absolute; inset: -9px; border-radius: 99px;
  background: radial-gradient(circle, rgba(255,122,61,.2), rgba(255,122,61,0) 70%);
  animation: ures-lelegzet 4s ease-in-out infinite;
}
@keyframes ures-lelegzet {
  0%, 100% { transform: scale(1); opacity: .7 }
  50% { transform: scale(1.1); opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .ures-ikon::before { animation: none; }
}
html[data-tema="sotet"] .ures-ikon {
  background: linear-gradient(160deg, #322722, #3a2b22);
  border-color: rgba(255,154,101,.25);
  color: #FFAC94;
}

/* ===== Hogyan zajlik egy privát üzenetközvetítés?+ ===== */
/* ===== GYIK-kártya (natív details/summary, nulla JS) ===== */
.gyik-kartya {
  background: linear-gradient(180deg, #FFFBF5, #fff 30%);
  --keret: 1px;
  --sugar: 1rem;
  border: var(--keret) solid rgba(224,72,0,.08);
  border-radius: var(--sugar);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gyik-kartya[open] {
  border-color: rgba(255,122,61,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 16px rgba(0,0,0,.05),
              0 0 16px rgba(255,122,61,.08);
}
.gyik-kartya summary {
  list-style: none;
  display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
  cursor: pointer;
  padding: 1.125rem 1.375rem;
  font: 600 15px/1.4 'Poppins', sans-serif;
}
.gyik-kartya summary::-webkit-details-marker { display: none; }
.gyik-plusz {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 99px;
  background: #FFF4EE; border: 1px solid #FFD1B8;
  display: grid; place-items: center;
  color: #E04800; font-size: 14px;
  transition: transform .25s ease;
}
.gyik-kartya[open] .gyik-plusz { transform: rotate(45deg); }
.gyik-kartya > p { margin: 0; padding: 0 1.375rem 1.125rem; line-height: 1.7; color: #57534e; }
/* Sima nyitás-animáció (Chrome 129+, máshol azonnal nyílik - nem törik) */
.gyik-kartya::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.gyik-kartya[open]::details-content { block-size: auto; }
html[data-tema="sotet"] .gyik-kartya {
  background: #292524; border-color: #44403C;
}
html[data-tema="sotet"] .gyik-kartya[open] { border-color: rgba(255,154,101,.3); }
html[data-tema="sotet"] .gyik-kartya > p { color: #A8A29E; }

/* ---------- 6. kör ---------- */
/* ===== CSS a style.css-be - termékkártya ===== */
/* ===== Termékkártya ===== */
.termek-foto { position: relative; overflow: hidden; }
.termek-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.card:hover .termek-foto img { transform: scale(1.04); }

.termek-jelveny {          /* fotón ülő chip */
  position: absolute;
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 11.5px; font-weight: 600; color: #B83B00;
  background: rgba(255,251,245,.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,209,184,.7);
  padding: .375rem .6875rem; border-radius: 99px;
}
.kedvenc-gomb {
  position: absolute; top: .75rem; right: .75rem;
  width: 36px; height: 36px; border-radius: 99px;
  border: 1px solid rgba(255,209,184,.7);
  background: rgba(255,251,245,.9);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: #a8a29e; cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.kedvenc-gomb:hover { background: #fff; transform: scale(1.08); }
.kedvenc-gomb.aktiv { color: #FF5C14; }

.ar-sor { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.ar-regi { color: #a8a29e; text-decoration: line-through; font-size: 13.5px; }
.ar-kedvezmeny {
  font: 600 11px/1 'Poppins', sans-serif;
  color: #B83B00; background: #FFF4EE;
  border: 1px solid #FFD1B8;
  padding: .3125rem .625rem; border-radius: 99px;
}
html[data-tema="sotet"] .termek-jelveny,
html[data-tema="sotet"] .kedvenc-gomb {
  background: rgba(28,25,23,.8); border-color: rgba(255,154,101,.3);
}

/* ===== CSS a style.css-be - kurzus + workshop ===== */
/* ===== Naptárlapka (workshop fotóján) ===== */
.datum-lapka {
  position: absolute; top: .875rem; left: .875rem;
  background: rgba(255,251,245,.95);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,209,184,.7);
  border-radius: .875rem;
  padding: .5rem .875rem;
  text-align: center;
}
.datum-lapka .honap {
  font: 600 10px/1 'Poppins', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #B83B00;
}
.datum-lapka .nap { font: 800 22px/1.1 'Poppins', sans-serif; color: #1c1917; }
.datum-lapka .ido { font-size: 10.5px; color: #78716C; }

/* ===== Kapacitás-sáv ===== */
.kapacitas { height: 5px; border-radius: 99px; background: #FFEFDC; overflow: hidden; }
.kapacitas i {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #FFAC94, #FF5C14);
  transition: width .4s ease;
}

/* ===== Lecke-előnézet sor (kurzuskártya) ===== */
.lecke-sor {
  display: flex; align-items: center; gap: .625rem;
  font-size: 13px; color: #44403C;
}
.lecke-sor .sorszam {
  width: 20px; height: 20px; border-radius: 99px;
  background: #FFF4EE; border: 1px solid #FFD1B8;
  display: grid; place-items: center;
  font-size: 10px; color: #E04800; flex-shrink: 0;
}
.lecke-sor .idotartam { margin-left: auto; font-size: 12px; color: #a8a29e; }
html[data-tema="sotet"] .datum-lapka { background: rgba(28,25,23,.85); border-color: rgba(255,154,101,.3); }
html[data-tema="sotet"] .datum-lapka .nap { color: #FFF8F0; }
html[data-tema="sotet"] .kapacitas { background: #44403C; }
html[data-tema="sotet"] .lecke-sor { color: #D6D3D1; }
html[data-tema="sotet"] .lecke-sor .sorszam { background: rgba(255,122,61,.1); border-color: rgba(255,154,101,.3); }
/* ---------- Kiegészítés a 4. körhöz ----------
   A Tailwind preflight nullázza a listajeleket (`ul, ol { list-style: none }`),
   és a prose-content 2.0 nem állította vissza - a felsorolások jel nélkül,
   olvashatatlanul futottak. Sima pötty helyett halk narancs pont, ami a
   szöveg első sorának közepére igazodik. */
.prose-content ul { list-style: none; padding-left: 1.5rem; }
.prose-content ul > li { position: relative; }
.prose-content ul > li::before {
  content: "";
  position: absolute;
  left: -1.05rem; top: .72em;
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--accent-400);
}
.prose-content ol { list-style: decimal; padding-left: 1.5rem; }
.prose-content ol > li::marker { color: var(--accent-600); font-weight: 600; }
html[data-tema="sotet"] .prose-content ul > li::before { background: var(--accent-500); }

/* ============================================================================
   Futófény - a designrendszer visszatérő hover-effektje

   Egy forgó conic-gradient, amit maszk vág vékony gyűrűvé: hoverre végigfut
   egy fénypont a kártya keretén. A @property teszi animálhatóvá a szöget -
   enélkül a böngésző nem tud egy egyéni tulajdonságot fokozatosan léptetni.

   A referencia külön wrapper elemet (.futofeny-kartya + .futofeny-belso)
   használ; itt közvetlenül a .card-ra tettem, hogy ne kelljen minden kártya
   köré egy plusz div.

   MIÉRT NEM `border-radius: inherit`:
   Az abszolút pozicionált gyermek a PADDING-dobozhoz igazodik, nem a
   keret-dobozhoz. A kártyának 1px kerete van, tehát a gyűrű eleve 1px-szel
   beljebb ül - ha közben a KÜLSŐ sugarat örökölné, a sarkokon a két ív
   szétnyílna, és a fénycsík láthatóan elcsúszna a keret mellett. Ez a
   hatás egyenes szakaszon alig látszik, a lekerekítéseknél viszont nagyon.
   A `--sugar - --keret` a padding-doboz tényleges sugara, tehát a gyűrű
   pontosan a kereten belül fut végig.

   A negatív inset (ami a keret-dobozt fedné) nem járható út: a .card
   `overflow: hidden`-je levágná - arra viszont a termékképek nagyításához
   szükség van.
   ============================================================================ */
@property --szog {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes futofeny { to { --szog: 360deg; } }

.card, .gyik-kartya { position: relative; }

/* A kártyák nagy részén a sugarat Tailwind-osztály írja felül (rounded-2xl,
   rounded-3xl…). A CSS nem tudja kiolvasni a kiszámított border-radiust egy
   calc()-ba, ezért a változót ilyenkor kézzel igazítjuk - enélkül a gyűrű a
   .card alapértelmezett 1.25rem-jével számolna, és a sarkokon elválna a
   tényleges kerettől. A Tailwind-értékek: lg .5 · xl .75 · 2xl 1 · 3xl 1.5 rem. */
.card.rounded-lg  { --sugar: .5rem; }
.card.rounded-xl  { --sugar: .75rem; }
.card.rounded-2xl { --sugar: 1rem; }
.card.rounded-3xl { --sugar: 1.5rem; }
.card.rounded-full { --sugar: 9999px; }

.card::before,
.gyik-kartya::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: calc(var(--sugar, 1.25rem) - var(--keret, 1px));
  padding: 1.5px;
  background: conic-gradient(from var(--szog),
    rgba(255,122,61,0) 0deg,
    rgba(255,122,61,0) 300deg,
    #FFAC94 330deg,
    #FF5C14 350deg,
    rgba(255,122,61,0) 360deg);
  /* A maszk kivágja a doboz belsejét, így csak a keret marad látható. */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.card:hover::before,
.gyik-kartya:hover::before,
.gyik-kartya[open]::before {
  opacity: 1;
  animation: futofeny 2.4s linear infinite;
}

/* A kártya tartalma a fénygyűrű fölött marad. */
.card > *, .gyik-kartya > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .card::before, .gyik-kartya::before { animation: none !important; }
}

/* A menüpont aktív állapotát a Fejléc 2.0 háttérrel jelöli, nem aláhúzással.
   A régi ::after vonal ezzel együtt jelenve meg zavaros volt: narancs háttér
   ALATT egy vastag narancs vonal. Az aláhúzást kivesszük. */
.nav-link::after { display: none; }

/* Az aktív menüpont belső alsó vonala (inset 0 -2px) a lekerekített doboz
   alján kilógott, és a háttérrel együtt túl hangos volt. A háttér-jelölés
   önmagában tisztább - ez a designrendszer fő jelzése, a vonal csak ráadás volt. */
.nav-link.aktiv, .nav-link.active { box-shadow: none; }

/* ---------- 9. kör ---------- */
/* ===== Belépés és regisztráció =====
   A 9. kör designfájlja nem hozott kész CSS-blokkot (a prototípus végig
   inline stílusokkal dolgozott), ezért ez a szakasz a képernyőn látott
   értékekből készült: 24px sarok, .85fr/1fr osztás, sötét bal panel. */
.auth-kartya {
  display: grid;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(224,72,0,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
}
@media (min-width: 768px) {
  .auth-kartya { grid-template-columns: .85fr 1fr; }
}
.auth-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #241f1c, #1c1917);
  padding: 2.5rem 2.125rem;
  display: flex; flex-direction: column;
  min-height: 420px;
}
.auth-panel::before {
  content: "";
  position: absolute; top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 320px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.2), rgba(255,122,61,0) 65%);
  pointer-events: none;
}
.auth-marka {
  position: relative;
  display: flex; align-items: center; gap: .5625rem;
  font: 700 15px/1 var(--font-display); color: #FFF8F0;
}
.auth-idezet { position: relative; margin-top: auto; padding-top: 2rem; }
.auth-idezet p {
  font: 600 italic 17px/1.6 var(--font-display);
  color: #FFEFDC; margin: 0 0 .75rem; text-wrap: pretty;
}
.auth-idezet span { font-size: 12.5px; color: #a8a29e; }
.auth-urlap {
  background: linear-gradient(180deg, #FFFBF5, #fff 24%);
  padding: 2.5rem 2.375rem;
}
.auth-cim { font: 700 21px/1.3 var(--font-display); color: #1c1917; margin: 0 0 .25rem; }
.auth-alcim { font-size: 13.5px; color: #78716c; margin: 0 0 1.5rem; }
.auth-cimke {
  display: block;
  font: 600 12.5px/1 var(--font-display);
  color: #57534e; margin-bottom: .5rem;
}
.auth-labjegyzet { font-size: 12.5px; color: #a8a29e; text-align: center; }

/* Jelszó-mező a szem-ikonnal. A globális input-szabály padding-rövidítése
   korábbi a fájlban, ezért ez a (0,1,1) szelektor felülírja a jobb oldali
   térközt - így az ikon nem lóg bele a szövegbe. */
.jelszo-mezo { position: relative; }
.jelszo-mezo input { padding-right: 2.875rem; }
.jelszo-mutat {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: .5625rem;
  border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center;
  color: #a8a29e; transition: color .18s ease;
}
.jelszo-mutat:hover { color: #B83B00; }
.jelszo-mutat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,122,61,.3);
}

/* Jelszó-erősség: nyugodt jelzés, nem korhol. */
.ero-savok { display: flex; gap: 5px; margin-top: .75rem; }
.ero-sav {
  flex: 1; height: 4px; border-radius: 99px;
  background: #FFEFDC; transition: background .3s ease;
}
.ero-sav.szint-1 { background: #f87171; }
.ero-sav.szint-2 { background: #fb923c; }
.ero-sav.szint-3 { background: #FF7A3D; }
.ero-sav.szint-4 { background: #16a34a; }
.ero-sor {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-top: .5rem; min-height: 1.125rem;
}
.ero-felirat { font-size: 12px; font-weight: 600; color: #a8a29e; transition: color .3s ease; }
.ero-felirat.szint-1 { color: #dc2626; }
.ero-felirat.szint-2 { color: #ea580c; }
.ero-felirat.szint-3 { color: #B83B00; }
.ero-felirat.szint-4 { color: #16a34a; }
.ero-tipp { font-size: 11.5px; color: #a8a29e; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .ero-sav, .ero-felirat { transition: none; }
}

/* ===== Pénztár - rendelés-összegzés =====
   A fizetés Stripe Checkout átirányítással megy (a kártyaadatokat a Stripe
   oldala kéri), így az összegzés az, ami a mi kezünkben van: ez kapja meg a
   márka ruháját, hogy a konverzió utolsó lépése ne legyen idegen. */
.osszegzes {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFF8F0, #fff 55%);
  border: 1px solid rgba(255,122,61,.28);
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 20px rgba(0,0,0,.06),
              0 0 20px rgba(255,122,61,.12);
  padding: 1.75rem;
}
.osszegzes::before {
  content: "";
  position: absolute; top: -70px; right: -50px;
  width: 200px; height: 200px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.15), rgba(255,122,61,0) 70%);
  pointer-events: none;
}
.osszegzes > * { position: relative; }
.osszegzes-kicsi {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase;
  color: #B83B00;
}
.osszegzes-valaszto {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, rgba(255,209,184,0), rgba(255,209,184,.9), rgba(255,209,184,0));
}
.osszegzes-vegosszeg { font: 800 24px/1 var(--font-display); color: #1c1917; }
.osszegzes-cimke { font: 600 15px/1 var(--font-display); color: #57534e; }

/* Nyugtázó sáv az űrlapok fölött (pl. „elküldtük a linket"). Nem hiba és nem
   ünneplés - csak visszajelzés, ezért a meleg semleges hangot kapja. */
.urlap-uzenet {
  display: flex; align-items: flex-start; gap: .625rem;
  background: linear-gradient(135deg, #FFF4EE, #FFF8F0 70%);
  border: 1px solid #FFD1B8;
  border-radius: .875rem;
  padding: .875rem 1rem;
  font-size: 13.5px; line-height: 1.6; color: #57534e;
}
.urlap-uzenet::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  margin-top: .4375rem;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
}

/* ===== Könyvborító =====
   Álló, könyv-arányú kép mélységgel. Ha nincs feltöltött borító, meleg
   helykitöltő áll be - nem üres szürke doboz. */
.konyv-borito {
  width: 86px; height: 126px;
  border-radius: .5rem; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  background: linear-gradient(160deg, #FFE8DB, #FFF4EE);
}
.konyv-borito img { width: 100%; height: 100%; object-fit: cover; display: block; }
.konyv-borito-ures {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #E04800;
}
.konyv-borito--kicsi { width: 44px; height: 64px; border-radius: .375rem; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.konyv-borito--nagy { width: 128px; height: 188px; }

/* ===== Élő alkalom doboz =====
   Napfelkelte-kártya a következő élő üzenetközvetítéshez. A .card-nál
   hangosabb: ez az oldal egyetlen időhöz kötött eleme, szem előtt kell
   lennie - de a paletta és a mintázat ugyanaz. */
.elo-alkalom {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFF4EE 0%, #FFF8F0 55%, #FFFBF5 100%);
  border: 1px solid rgba(255,122,61,.28);
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 20px rgba(0,0,0,.06),
              0 0 24px rgba(255,122,61,.12);
  padding: 1.75rem 1.875rem;
}
.elo-alkalom::before {
  content: "";
  position: absolute; top: -90px; right: -60px;
  width: 260px; height: 260px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.18), rgba(255,122,61,0) 70%);
  pointer-events: none;
}
.elo-alkalom > * { position: relative; }
.elo-alkalom-fej {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem;
  margin-bottom: .875rem;
}
.elo-jelzo {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 11px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase;
  color: #B83B00;
}
.elo-pont {
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  flex-shrink: 0;
}
/* Csak akkor lüktet, amikor tényleg megy az adás. */
.elo-jelzo--most .elo-pont {
  box-shadow: 0 0 0 0 rgba(255,92,20,.55);
  animation: elo-lukteto 2s ease-out infinite;
}
@keyframes elo-lukteto {
  70% { box-shadow: 0 0 0 10px rgba(255,92,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,92,20,0); }
}
.elo-platform {
  font-size: 12px; font-weight: 600; color: #B83B00;
  background: #FFF4EE; border: 1px solid #FFD1B8;
  padding: 4px 11px; border-radius: 999px;
}
.elo-alkalom-cim {
  font: 700 21px/1.3 var(--font-display);
  color: #1c1917; margin: 0 0 .5rem;
}
.elo-alkalom-idopont {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font: 600 15px/1.4 var(--font-display);
  color: #57534e; margin: 0;
}
.elo-hossz { font-weight: 400; font-size: 13.5px; color: #a8a29e; }
.elo-visszaszamlalo {
  font-size: 13.5px; color: #B83B00; font-weight: 600;
  margin: .5rem 0 0;
}
.elo-alkalom-leiras {
  font-size: 14.5px; line-height: 1.65; color: #57534e;
  margin: .875rem 0 0; max-width: 68ch;
}
/* Egy sor: a cselekvés balra, a naptárgombok a doboz jobb széléhez tolva.
   Korábban két sorban álltak, ami kétszer akkora helyet foglalt anélkül,
   hogy bármit hozzátett volna. */
.elo-alkalom-gombok {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem 1rem; margin-top: 1.25rem;
}
.naptar-gombok {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-left: auto;
}
.naptar-cimke { font-size: 12.5px; color: #a8a29e; }
.naptar-gomb {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 12.5px; font-weight: 600; color: #57534e;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(224,72,0,.18);
  border-radius: 999px;
  padding: .4375rem .75rem;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.naptar-gomb:hover { background: #fff; border-color: #FF7A3D; color: #B83B00; }
.naptar-gomb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFF8F0, 0 0 0 4px rgba(255,122,61,.6);
}
@media (max-width: 560px) {
  .elo-alkalom { padding: 1.375rem 1.25rem; }
  .elo-alkalom-gombok > .btn { width: 100%; }
  /* Keskeny kijelzőn a jobbra tolás értelmetlen: nincs mihez képest. */
  .naptar-gombok { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .elo-jelzo--most .elo-pont { animation: none; }
}

/* ===== Csoportos üzenetközvetítés: két hasáb =====
   A személyes és az online forma egymás mellett. A hasábfej halványabb,
   mint a kártyák - a szem a konkrét időpontokra essen, ne a címkékre. */
.hasab { display: flex; flex-direction: column; gap: .875rem; }
.hasab-fej { margin-bottom: .25rem; }
.hasab-jelzo {
  display: inline-flex; align-items: center; gap: .4375rem;
  font: 600 11px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase;
  padding: .375rem .6875rem; border-radius: 999px;
  margin-bottom: .625rem;
}
.hasab-jelzo--szemelyes { color: #B83B00; background: #FFE8DB; }
.hasab-jelzo--online { color: #0369a1; background: #e0f2fe; }
.hasab-cim {
  font: 700 19px/1.35 var(--font-display);
  color: #1c1917; margin: 0 0 .4375rem;
}
.hasab-leiras {
  font-size: 14.5px; line-height: 1.65; color: #57534e; margin: 0;
}

.alkalom-kartya {
  background: #fff;
  border: 1px solid #f5f5f4;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  padding: 1.25rem 1.375rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.alkalom-kartya:hover {
  border-color: rgba(255,122,61,.35);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.alkalom-kartya-datum {
  display: flex; align-items: center; gap: .4375rem; flex-wrap: wrap;
  font: 600 13.5px/1.4 var(--font-display);
  color: #B83B00; margin: 0 0 .375rem;
}
.alkalom-kartya-cim {
  font: 700 16.5px/1.4 var(--font-display);
  color: #1c1917; margin: 0 0 .375rem;
}
.alkalom-kartya-hely {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 13px; color: #78716c; margin: 0;
}
.alkalom-kartya-leiras {
  font-size: 14px; line-height: 1.6; color: #57534e; margin: .5rem 0 0;
}
.alkalom-kartya-lab {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
  margin-top: 1rem;
}

/* Üres hasáb: nem hagyjuk némán. Aki most nézi, annak is legyen mit tennie. */
.hasab-ures {
  border: 1px dashed rgba(224,72,0,.25);
  border-radius: 1rem;
  padding: 1.5rem 1.375rem;
  text-align: center;
  background: linear-gradient(135deg, #FFFBF5, #fff 70%);
}
.hasab-ures p { font-size: 14.5px; color: #57534e; margin: 0; }
.hasab-ures-apro { font-size: 13px !important; color: #a8a29e !important; margin-top: .375rem !important; }

.info-kartya {
  background: #FFFBF5;
  border: 1px solid #FFEFDC;
  border-radius: 1rem;
  padding: 1.25rem;
}
.info-kartya h3 {
  font: 700 15px/1.4 var(--font-display);
  color: #1c1917; margin: 0 0 .4375rem;
}
.info-kartya p {
  font-size: 13.5px; line-height: 1.65; color: #57534e; margin: 0;
}

/* A hírlevél-pipa a jelentkezés modálban. Külön áll a kötelező mezőktől:
   az alkalomra jelentkezés és a folyamatos megkeresés nem ugyanaz. */
.jel-pipa {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: 13px; line-height: 1.5; color: #57534e;
  cursor: pointer; padding-top: .125rem;
}
.jel-pipa input {
  width: 1rem; height: 1rem; margin-top: .125rem;
  accent-color: #FF7A3D; flex-shrink: 0;
}

/* ===== Naplózási kérdés =====
   Csendes doboz a havi téma alján: ez az, amit a tag magával visz a hétre.
   Szándékosan nem kiabál - a kérdés a hangsúlyos, nem a keret. */
.naplo-kerdes {
  position: relative;
  background: linear-gradient(135deg, #FFF8F0, #FFFBF5 70%);
  border: 1px dashed rgba(224,72,0,.28);
  border-radius: 1rem;
  padding: 1.375rem 1.625rem;
}
.naplo-kerdes-cimke {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase;
  color: #B83B00; margin-bottom: .625rem;
}
.naplo-kerdes-szoveg {
  font: 600 italic 17px/1.6 var(--font-display);
  color: #292524; margin: 0; text-wrap: pretty;
}
html[data-tema="sotet"] .naplo-kerdes {
  background: linear-gradient(135deg, #322722, #292524 70%);
  border-color: rgba(255,154,101,.3);
}
html[data-tema="sotet"] .naplo-kerdes-szoveg { color: #FFF8F0; }

/* ===== Szavazó gomb („engem is érdekel") =====
   Nem lájk: a szív itt azt jelenti, hogy valakinek ugyanaz a kérdése.
   Aktív állapotban kitöltött, hogy egy pillantással látszódjon. */
.szavazo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 52px; padding: .5rem .375rem;
  border: 1px solid rgba(224,72,0,.18);
  border-radius: .875rem;
  background: rgba(255,255,255,.7);
  color: #78716c; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.szavazo:hover { background: #FFF4EE; border-color: #FF7A3D; color: #B83B00; }
.szavazo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFBF5, 0 0 0 4px rgba(255,122,61,.6);
}
.szavazo--aktiv {
  background: #FFF4EE; border-color: #FFD1B8; color: #E04800;
}
.szavazo--tiltott { cursor: default; opacity: .6; }
.szavazo--tiltott:hover { background: rgba(255,255,255,.7); border-color: rgba(224,72,0,.18); color: #78716c; }
.szavazo-szam { font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
html[data-tema="sotet"] .szavazo { background: rgba(41,37,36,.7); border-color: rgba(255,154,101,.2); color: #a8a29e; }
html[data-tema="sotet"] .szavazo--aktiv { background: rgba(255,122,61,.12); color: #FFAC94; }

/* ===== Privát jegyzet =====
   A jegyzetmező bármelyik anyag alatt megjelenhet. Halkabb, mint a tartalom,
   amihez tartozik: nem versenyez vele, csak ott van, ha kell. */
.jegyzet-doboz {
  background: linear-gradient(180deg, #FFFBF5, #fff 30%);
  border: 1px solid rgba(224,72,0,.12);
  border-radius: 1rem;
  padding: 1rem 1.125rem 1.125rem;
  margin-top: 1.5rem;
}
.jegyzet-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .625rem;
}
.jegyzet-cimke {
  display: inline-flex; align-items: center; gap: .4375rem;
  font: 600 12.5px/1 var(--font-display); color: #57534e;
}
.jegyzet-allapot { font-size: 12px; color: #a8a29e; }
.jegyzet-allapot--kesz { color: #16a34a; }
.jegyzet-allapot--hiba { color: #dc2626; }
.jegyzet-doboz textarea {
  min-height: 6.5rem;
  line-height: 1.65;
  resize: vertical;
}
.jegyzet-lab {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem; margin-top: .625rem;
}
.jegyzet-sugo { font-size: 12px; color: #a8a29e; }
.jegyzet-sugo a { color: #B83B00; font-weight: 600; }
.jegyzet-masol {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 12.5px; font-weight: 600; color: #57534e;
  background: transparent; border: none; cursor: pointer;
  padding: .25rem; border-radius: .5rem;
  transition: color .18s ease;
}
.jegyzet-masol:hover { color: #B83B00; }

/* ===== Jegyzetlap (Privát jegyzeteim) ===== */
.jegyzet-osszesites { font-size: 13px; color: #a8a29e; }
.jegyzet-eszkozok { display: flex; flex-wrap: wrap; gap: .5rem; }
.jegyzet-kartya { transition: box-shadow .2s ease, border-color .2s ease; }
.jegyzet-kartya--kituzott {
  border-color: rgba(255,122,61,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 20px rgba(0,0,0,.06),
              0 0 20px rgba(255,122,61,.12);
}
.jegyzet-ikon {
  width: 36px; height: 36px; border-radius: .75rem;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #FFF4EE, #FFE8DB);
  color: #E04800;
}
.jegyzet-forras {
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase;
  color: #B83B00; margin-bottom: .25rem;
}
.jegyzet-cim { font: 600 15.5px/1.35 var(--font-display); color: #1c1917; }
.jegyzet-cim--link { transition: color .18s ease; }
.jegyzet-cim--link:hover { color: #E04800; }
.jegyzet-datum { font-size: 12px; color: #a8a29e; margin-top: .1875rem; }
.jegyzet-muveletek { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.jegyzet-muvelet {
  width: 32px; height: 32px; border-radius: .625rem;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  color: #a8a29e;
  transition: background .18s ease, color .18s ease;
}
.jegyzet-muvelet:hover { background: #FFF4EE; color: #B83B00; }
.jegyzet-muvelet--aktiv { color: #E04800; }
.jegyzet-muvelet--torles:hover { background: #fef2f2; color: #dc2626; }
.jegyzet-muvelet:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFBF5, 0 0 0 4px rgba(255,122,61,.6);
}
.jegyzet-szoveg {
  white-space: pre-wrap;
  font-size: 15px; line-height: 1.7; color: #44403c;
  margin: 0;
}
html[data-tema="sotet"] .jegyzet-doboz {
  background: linear-gradient(180deg, #2a2320, #292524 30%);
  border-color: rgba(255,154,101,.14);
}
html[data-tema="sotet"] .jegyzet-cim { color: #FFF8F0; }
html[data-tema="sotet"] .jegyzet-szoveg { color: #d6d3d1; }

/* Nyomtatás: csak a jegyzetek maradnak a lapon - se menü, se gombok.
   Aki kinyomtatja, az olvasni akarja, nem kattintani. */
@media print {
  body { background: #fff; }

  /* A portál kerete nem tartozik a papírra. A `.portal-oldalsav` a menü
     átépítése előtti név - bent hagyva, hogy egy régi oldal se boruljon;
     az élő osztály a `.portal-aside` és a `.portal-topbar`. */
  .portal-oldalsav, .portal-aside, .portal-topbar, .portal-fejlec,
  .site-header, .site-footer,
  .jegyzet-eszkozok, .jegyzet-muveletek, #fel-gomb, #portal-nincs-talalat { display: none !important; }

  /* Az oldalsáv helyét a fő tartalom rácsban kapja - nyomtatásban a doboz
     így a teljes szélességet kapja, nem marad üres bal hasáb. */
  .portal, .portal-main { display: block !important; }

  .jegyzetlap { max-width: none; }
  .jegyzet-kartya {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #e7e5e4 !important;
    background: #fff !important;
  }
  .jegyzet-szoveg { color: #000; }
  a[href]::after { content: ""; }

  /* ---- Napló ---- */

  /* Ami csak a szerkesztéshez kell: léptető nyilak, hangulatpöttyök,
     szószámláló, mentés-visszajelzés, sorozatsáv. */
  .naplo-nap-valto, .hangulat, .naplo-jelzok, .sorozat-sav { display: none !important; }

  /* A textarea a saját dobozára vág: egy hosszabb lap alja egyszerűen
     lemaradna a papírról. Nyomtatáskor helyette a tükörelem megy ki, ami
     annyi helyet foglal, amennyi a szöveg. */
  [data-naplo-mezo] { display: none !important; }
  .naplo-nyomtatott {
    display: block !important;
    white-space: pre-wrap;
    font-size: 11pt; line-height: 1.6; color: #000;
    border: 0; padding: 0;
  }

  .card, .card--kiemelt {
    box-shadow: none !important;
    border: 1px solid #e7e5e4 !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .card::before { display: none !important; }   /* futófény nem kell papírra */

  /* ---- Melyik hasáb megy papírra ----
     A böngésző mindig az EGÉSZ lapot nyomtatja, a naplóban viszont két
     különálló dolog van egymás mellett. A testre tett osztály dönti el,
     melyik kell - a másik hasáb ilyenkor eltűnik. Osztály nélkül (pl.
     Ctrl+P) minden megy, ahogy eddig. */
  .naplo-racs { display: block !important; }
  body.nyomtat-napi .naplo-hasab:last-child,
  body.nyomtat-havi .naplo-hasab:first-child,
  body.nyomtat-havi .naplo-bevezeto,
  body.nyomtat-napi .naplo-hasab-cim,
  body.nyomtat-havi .naplo-hasab-cim { display: none !important; }

  /* Az „Mi is ez?" infóboxok papíron nem kellenek, se a naplóban, se a havi
     téma lapján: a kinyomtatott lapon a saját szöveg a tartalom, nem az,
     hogy mi ez a felület. */
  .hts-mirol { display: none !important; }

  /* A statisztika a képernyőn biztatás, papíron zaj. A „0 napja írsz" és a
     „2 277 leírt karakter" nem az, amit a tag visszaolvasni akar, viszont
     egy egész oldalt elvitt: a doboz után a következő hónap szakasza
     `break-inside: avoid` miatt átcsúszott a második oldalra, és az első
     félig üresen maradt. Papírra a kérdés és a válasz megy. */
  .naplo-osszegzes { display: none !important; }

  /* Csak a kiválasztott hónap megy papírra. A jelölést a nyomtatás gombja
     teszi rá közvetlenül nyomtatás előtt, és utána le is veszi. Jelölés
     nélkül (pl. sima Ctrl+P) minden szakasz megy, ahogy eddig. */
  body.nyomtat-havi .naplo-honap:not(.naplo-honap--nyomtatando) { display: none !important; }

  /* A havi kérdések papíron: a szerkesztőmező helyett a leírt válasz. */
  .hnaplo-nyito, .hnaplo-lab { display: none !important; }
  .hnaplo-mezo textarea {
    border: 0 !important; padding: 0 !important; resize: none;
    min-height: 0; height: auto; font-size: 11pt; color: #000;
    background: #fff !important;
  }
  .naplo-honap, .naplo-kerdes-doboz {
    break-inside: avoid;
    border: 1px solid #e7e5e4 !important;
    background: #fff !important;
  }
  .naplo-kerdes-varakozik, .naplo-kerdes-most { border: .5pt solid #e7e5e4; }
}

/* ===== Barát meghívása ===== */
.meghivo-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
}
.meghivo-link input[type="text"] {
  flex: 1; min-width: 14rem;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.meghivo-kod {
  font-family: var(--font-display);
  letter-spacing: .12em;
  color: #B83B00;
  background: #FFF4EE;
  border: 1px solid #FFD1B8;
  padding: 2px 9px;
  border-radius: .5rem;
}
.meghivo-lepesek {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.125rem;
}
.meghivo-lepesek li { display: flex; align-items: flex-start; gap: .875rem; }
.meghivo-szam {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
  font: 700 13px/1 var(--font-display); color: #fff;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 2px 8px rgba(255,92,20,.3);
}

/* Meghívó-promó a vezérlőpulton. Sötét kártya, mint a hírlevél-záróblokk -
   így elüt a szekció-kártyák sorától, de nem idegen a rendszerben. */
.meghivo-promo {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  background: linear-gradient(160deg, #2a2320 0%, #1c1917 100%);
  border-radius: 1.25rem;
  padding: 1.375rem 1.625rem;
  margin-bottom: 1.75rem;
  transition: box-shadow .2s ease;
}
.meghivo-promo::before {
  content: "";
  position: absolute; top: -110px; right: -40px;
  width: 300px; height: 300px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.22), rgba(255,122,61,0) 65%);
  pointer-events: none;
}
.meghivo-promo:hover { box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 0 24px rgba(255,122,61,.14); }
.meghivo-promo > * { position: relative; }
.meghivo-promo-ikon {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 24px rgba(255,122,61,.45);
}
.meghivo-promo-cim { font: 700 17px/1.3 var(--font-display); color: #FFF8F0; margin: 0; }
.meghivo-promo-szoveg { font-size: 13.5px; line-height: 1.6; color: #a8a29e; margin: .25rem 0 0; max-width: 60ch; }
.meghivo-promo-gomb {
  flex-shrink: 0;
  font: 600 13.5px/1 var(--font-display); color: #FFEFDC;
  background: rgba(255,122,61,.16);
  border: 1px solid rgba(255,154,101,.4);
  border-radius: 999px;
  padding: .75rem 1.25rem;
  transition: background .18s ease;
}
.meghivo-promo:hover .meghivo-promo-gomb { background: rgba(255,122,61,.28); }

/* ===== Napló ===== */
.sorozat-sav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  background: linear-gradient(135deg, #FFF4EE, #FFF8F0 70%);
  border: 1px solid #FFD1B8;
  border-radius: 1rem;
  padding: 1rem 1.375rem;
}
.sorozat-elem { display: flex; align-items: baseline; gap: .5rem; }
.sorozat-szam { font: 800 24px/1 var(--font-display); color: #E04800; }
.sorozat-cimke { font-size: 13.5px; color: #57534e; }
.sorozat-valaszto { width: 1px; height: 24px; background: #FFD1B8; }
/* A kihagyott nap nem büntet: a sorozat pihen, nem nullázódik. */
.sorozat-pihen {
  width: 100%; margin: 0;
  font-size: 13px; color: #a8a29e;
}
.naplo-nap-valto { display: inline-flex; align-items: center; gap: .375rem; }
.naplo-datum {
  font: 600 13px/1 var(--font-display); color: #57534e;
  min-width: 5.5rem; text-align: center;
}
.naplo-lepteto {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  color: #78716c;
  border: 1px solid rgba(224,72,0,.18);
  background: rgba(255,255,255,.7);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.naplo-lepteto:hover { background: #FFF4EE; color: #B83B00; border-color: #FF7A3D; }
.naplo-lepteto--tiltott { opacity: .35; pointer-events: none; }
.naplo-kerdes-nagy {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #FFD1B8, #FF7A3D, #FFD1B8) 1;
  padding-left: 1.125rem;
  margin-bottom: 1.25rem;
}
.naplo-kerdes-nagy p {
  font: 600 italic 19px/1.55 var(--font-display);
  color: #292524; margin: 0; text-wrap: pretty;
}
.naplo-kerdes-forras {
  display: inline-block; margin-top: .5rem;
  font-size: 12px; color: #a8a29e;
}
/* A napi üzenet a naplóban. Nem a kérdés, és nem a tag szövege: a harmadik
   dolog a lapon, ezért saját, halk doboza van. Korábban az idézet a
   szerkesztőmezőbe került, és összekeveredett a kettővel. */
.naplo-napi {
  background: #FFF4EA;
  border: 1px solid #FFE0CC;
  border-radius: 12px;
  padding: .9rem 1.05rem 1rem;
  margin-bottom: 1.1rem;
}
.naplo-napi-cimke {
  display: block;
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase;
  color: #C2410C; margin-bottom: .45rem;
}
.naplo-napi-szoveg {
  font: 600 italic 15.5px/1.6 var(--font-display);
  color: #44403C; margin: 0; text-wrap: pretty;
}
.naplo-napi-forras {
  display: inline-block; margin-top: .4rem;
  font-size: 11.5px; color: #a8a29e;
}
.naplo-napi-sugo {
  margin: .65rem 0 0;
  font-size: 12.5px; line-height: 1.5; color: #8a817c;
}

#naplo-mezo { min-height: 14rem; line-height: 1.75; resize: vertical; }
/* Csak nyomtatáskor látszik - a @media print kapcsolja be. Képernyőn a
   textarea a szerkesztőfelület, papíron viszont az levágná a szöveg alját. */
.naplo-nyomtatott { display: none; }

.naplo-lab {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; margin-top: .875rem;
}
.naplo-jelzok { display: flex; align-items: center; gap: .875rem; }
.naplo-szavak { font-size: 12.5px; color: #a8a29e; font-variant-numeric: tabular-nums; }
.naplo-regi-kerdes {
  font: 600 italic 14px/1.55 var(--font-display);
  color: #78716c; margin: 0 0 .625rem;
}

/* Hangulat-választó: öt pont, nem ötfokú osztályzat. */
.hangulat { display: flex; align-items: center; gap: .5rem; }
.hangulat-cimke { font-size: 12.5px; color: #a8a29e; margin-right: .125rem; }
.hangulat-pont {
  width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--pont-szin); background: transparent;
  cursor: pointer; padding: 0;
  transition: background .18s ease, transform .18s ease;
}
.hangulat-pont:hover { transform: scale(1.15); }
.hangulat-pont--aktiv { background: var(--pont-szin); }
.hangulat-pont:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,122,61,.35);
}
.hangulat-jelzo {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 12px; color: #57534e;
}
.hangulat-jelzo::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--pont-szin);
}
@media (prefers-reduced-motion: reduce) {
  .hangulat-pont:hover { transform: none; }
}
html[data-tema="sotet"] .sorozat-sav {
  background: linear-gradient(135deg, #322722, #292524 70%);
  border-color: rgba(255,154,101,.25);
}
html[data-tema="sotet"] .naplo-kerdes-nagy p { color: #FFF8F0; }

/* ===== Utam - szintek, jelvények, fénypontok ===== */
.szint-pont {
  font: 800 32px/1 var(--font-display);
  color: #E04800;
  font-variant-numeric: tabular-nums;
}
.szint-sav {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: #FFEFDC;
}
.szint-sav-kitolt {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 12px rgba(255,92,20,.4);
  transition: width .4s ease;
}
.szintsor {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.szintsor-elem {
  flex: 1 1 8rem; min-width: 7rem;
  display: flex; flex-direction: column; gap: .1875rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(224,72,0,.1);
  background: rgba(255,255,255,.5);
}
.szintsor-elem--elert {
  border-color: rgba(255,122,61,.35);
  background: linear-gradient(160deg, #FFF4EE, #FFF8F0);
}
.szintsor-pont {
  width: 9px; height: 9px; border-radius: 999px;
  background: #FFD1B8;
}
.szintsor-elem--elert .szintsor-pont {
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 8px rgba(255,92,20,.45);
}
.szintsor-nev { font: 600 13px/1.2 var(--font-display); color: #57534e; }
.szintsor-elem--elert .szintsor-nev { color: #1c1917; }
.szintsor-kell { font-size: 11.5px; color: #a8a29e; font-variant-numeric: tabular-nums; }

/* Jelvény: a meg nem szerzett is látszik - cél, nem titok. */
.jelveny {
  position: relative;
  display: flex; align-items: flex-start; gap: .875rem;
  padding: 1.125rem 1.25rem;
  border-radius: 1rem;
  border: 1px dashed rgba(224,72,0,.22);
  background: #FFFDF9;
}
.jelveny-ikon {
  width: 38px; height: 38px; border-radius: .75rem; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff; border: 1px solid #FFEFDC; color: #a8a29e;
}
.jelveny-nev { font: 600 14.5px/1.3 var(--font-display); color: #78716c; }
.jelveny-leiras { font-size: 12.5px; line-height: 1.55; color: #a8a29e; margin: .25rem 0 0; }
.jelveny--megvan {
  border: 1px solid rgba(255,122,61,.3);
  background: linear-gradient(160deg, #FFF8F0, #fff 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 16px rgba(0,0,0,.05);
}
.jelveny--megvan .jelveny-ikon {
  background: linear-gradient(160deg, #FFE8DB, #FFD1B8);
  border-color: #FFD1B8; color: #E04800;
}
.jelveny--megvan .jelveny-nev { color: #1c1917; }
.jelveny--megvan .jelveny-leiras { color: #57534e; }
.jelveny-pipa {
  position: absolute; top: .875rem; right: 1rem;
  color: #16a34a;
}

.pont-szabalyok {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .625rem;
}
.pont-szabalyok li { display: flex; align-items: center; gap: .75rem; }
.pont-ertek {
  min-width: 3.25rem; text-align: center; flex-shrink: 0;
  font: 700 13px/1 var(--font-display);
  color: #B83B00; background: #FFF4EE;
  border: 1px solid #FFD1B8; border-radius: 999px;
  padding: .375rem .5rem;
  font-variant-numeric: tabular-nums;
}
.pont-sor {
  display: flex; align-items: center; gap: .875rem;
  background: #fff;
  border: 1px solid rgba(224,72,0,.08);
  border-radius: .875rem;
  padding: .75rem 1rem;
}
html[data-tema="sotet"] .jelveny { background: #292524; border-color: rgba(255,154,101,.18); }
html[data-tema="sotet"] .jelveny--megvan { background: linear-gradient(160deg, #322722, #292524 60%); }
html[data-tema="sotet"] .jelveny--megvan .jelveny-nev { color: #FFF8F0; }
html[data-tema="sotet"] .pont-sor { background: #292524; border-color: rgba(255,154,101,.14); }
html[data-tema="sotet"] .szintsor-elem { background: rgba(41,37,36,.5); }

/* ===== Napi üzenet ===== */
.napi-uzenet { position: relative; }

/* A zárt kártya: napkorong-motívum, hívogató, de csendes. */
.napi-hat {
  position: relative; overflow: hidden;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  background: linear-gradient(160deg, #FFE8DB 0%, #FFF4EE 55%, #FFF8F0 100%);
  border: 1px solid #FFD1B8;
  border-radius: 1.25rem;
  padding: 2.25rem 1.5rem 2rem;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.napi-hat:hover {
  border-color: #FF7A3D;
  box-shadow: 0 8px 28px rgba(0,0,0,.07), 0 0 28px rgba(255,122,61,.18);
}
.napi-hat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFBF5, 0 0 0 4.5px rgba(255,122,61,.6);
}
.napi-korong {
  width: 46px; height: 46px; border-radius: 999px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  box-shadow: 0 0 26px rgba(255,92,20,.5);
  margin-bottom: .5rem;
  animation: napi-lelegzet 5s ease-in-out infinite;
}
@keyframes napi-lelegzet {
  0%, 100% { transform: scale(1); opacity: .88 }
  50% { transform: scale(1.07); opacity: 1 }
}
.napi-hat-cim { font: 700 17px/1.3 var(--font-display); color: #1c1917; }
.napi-hat-alcim { font-size: 13.5px; color: #78716c; }

/* A kinyílt lap. */
.napi-lap {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFBF5, #fff 24%);
  border: 1px solid rgba(255,122,61,.28);
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 20px rgba(0,0,0,.06),
              0 0 22px rgba(255,122,61,.12);
  padding: 1.75rem 1.875rem;
}
.napi-lap::before {
  content: "";
  position: absolute; top: -80px; right: -50px;
  width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,61,.16), rgba(255,122,61,0) 70%);
  pointer-events: none;
}
.napi-lap > * { position: relative; }
.napi-lap--erkezik { animation: napi-erkezik .45s ease-out; }
@keyframes napi-erkezik {
  from { opacity: 0; transform: translateY(8px) }
  to { opacity: 1; transform: none }
}
.napi-lap-fej {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .75rem; margin-bottom: 1rem;
}
.napi-cimke {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase; color: #B83B00;
}
.napi-datum { font-size: 12.5px; color: #a8a29e; }
.napi-szoveg {
  font: 600 italic 20px/1.6 var(--font-display);
  color: #292524; margin: 0; text-wrap: pretty;
}
.napi-regi-szoveg {
  font: 600 italic 16px/1.6 var(--font-display);
  color: #44403c; margin: 0; text-wrap: pretty;
}
.napi-forras { font-size: 12.5px; color: #a8a29e; margin: .875rem 0 0; }
.napi-eszkozok { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
html[data-tema="sotet"] .napi-hat {
  background: linear-gradient(160deg, #322722, #2a2320 60%);
  border-color: rgba(255,154,101,.25);
}
html[data-tema="sotet"] .napi-hat-cim { color: #FFF8F0; }
html[data-tema="sotet"] .napi-szoveg { color: #FFF8F0; }
@media (prefers-reduced-motion: reduce) {
  .napi-korong { animation: none; }
  .napi-lap--erkezik { animation: none; }
}

/* ===== Hibaoldal (404) =====
   Napfelkelte-kártya: a hiba is a márka terében történjen, ne egy csupasz
   szerverüzenet fogadja azt, aki eltévedt. */
.hiba-lap {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFF4EE, #FFF8F0);
  border: 1px solid #FFEFDC;
  border-radius: 1.375rem;
  padding: 4rem 2.5rem 3.5rem;
  text-align: center;
}
.hiba-lap::before {
  content: "";
  position: absolute; top: -140px; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 400px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,154,101,.25), rgba(255,154,101,0) 65%);
  pointer-events: none;
}
.hiba-lap > * { position: relative; }
.hiba-szam {
  font: 800 72px/1 var(--font-display);
  background: linear-gradient(120deg, #FFAC94, #FF5C14);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: .5rem;
}
.hiba-cim {
  font: 700 24px/1.3 var(--font-display);
  color: #1c1917; margin: 0 0 .625rem;
}
.hiba-szoveg {
  font-size: 14.5px; line-height: 1.7; color: #78716c;
  margin: 0 auto 1.75rem; max-width: 44ch;
}
.hiba-idezet {
  margin: 0 auto 1.75rem; max-width: 52ch;
  padding: 1.375rem 1.625rem;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(224,72,0,.1);
  border-radius: 1rem;
}
.hiba-idezet blockquote {
  font: 600 italic 17px/1.6 var(--font-display);
  color: #292524; margin: 0; text-wrap: pretty;
}
.hiba-idezet figcaption {
  font-size: 12.5px; color: #a8a29e; margin-top: .625rem;
}
.hiba-gombok {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
.hiba-tipp { font-size: 12.5px; color: #a8a29e; margin: 1.125rem 0 0; }
.hiba-tipp a { color: #B83B00; font-weight: 600; }

/* Visszaszámláló: látható, és megállítható. */
.hiba-visszaszamlalo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .875rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(224,72,0,.1);
}
.hiba-korgyuru { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.hiba-korgyuru svg { transform: rotate(-90deg); }
.hiba-korgyuru-alap { stroke: #FFEFDC; }
.hiba-korgyuru-kitolt { stroke: #FF7A3D; transition: stroke-dashoffset 1s linear; }
.hiba-korgyuru-szam {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 12px/1 var(--font-display); color: #B83B00;
  font-variant-numeric: tabular-nums;
}
.hiba-visszaszamlalo-szoveg { font-size: 13.5px; color: #78716c; margin: 0; }
.hiba-megallit {
  font: 600 13px/1 var(--font-display); color: #57534e;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(224,72,0,.2);
  border-radius: 999px;
  padding: .5625rem 1rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.hiba-megallit:hover { background: #fff; border-color: #FF7A3D; color: #B83B00; }
.hiba-megallit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFF8F0, 0 0 0 4px rgba(255,122,61,.6);
}
.hiba-visszaszamlalo--megallt .hiba-korgyuru { opacity: .35; }
@media (max-width: 560px) {
  .hiba-lap { padding: 2.75rem 1.25rem 2.5rem; }
  .hiba-szam { font-size: 58px; }
  .hiba-gombok > .btn { width: 100%; }
}
html[data-tema="sotet"] .hiba-lap {
  background: linear-gradient(180deg, #322722, #292524);
  border-color: rgba(255,154,101,.18);
}
html[data-tema="sotet"] .hiba-cim { color: #FFF8F0; }
html[data-tema="sotet"] .hiba-idezet {
  background: rgba(28,25,23,.4);
  border-color: rgba(255,154,101,.16);
}
html[data-tema="sotet"] .hiba-idezet blockquote { color: #FFF8F0; }

/* ===== Felismerés-blokk =====
   A látogatónak magára kell ismernie, mielőtt bármit kínálunk. Nem fájdalmat
   közlünk: minden sor egy csendes felismerés, ezért halk a keret és nincs
   figyelmeztető szín. */
.felismeres {
  display: flex; flex-direction: column; gap: .875rem;
  max-width: 60ch; margin: 0 auto;
}
.felismeres-sor {
  position: relative;
  margin: 0; padding: .875rem 1.125rem .875rem 2.5rem;
  font-size: 16px; line-height: 1.65; color: #57534e;
  background: linear-gradient(135deg, #FFF8F0, #FFFBF5 70%);
  border: 1px solid #FFEFDC;
  border-radius: .875rem;
  text-wrap: pretty;
}
.felismeres-sor::before {
  content: "";
  position: absolute; left: 1.125rem; top: 1.5rem;
  width: 7px; height: 7px; border-radius: 999px;
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
}

/* ===== Kedvezményes első hónap =====
   Az az ár kap hangsúlyt, amit a látogató MOST fizet - a teljes ár
   közvetlenül alatta, nem apró betűvel. A meglepetés bizalmat rombol. */
.elso-honap {
  position: relative; overflow: hidden;
  text-align: center;
  background: linear-gradient(160deg, #FFF4EE, #FFF8F0 60%);
  border: 1px solid #FFD1B8;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem 1.75rem;
  margin-top: 2rem;
}
.elso-honap::before {
  content: "";
  position: absolute; top: -90px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 260px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,154,101,.22), rgba(255,154,101,0) 70%);
  pointer-events: none;
}
.elso-honap > * { position: relative; }
.elso-honap-cimke {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
}
.elso-honap-ar {
  font: 800 40px/1.1 var(--font-display);
  background: linear-gradient(120deg, #FF9A65, #FF5C14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: .625rem 0 .375rem;
}
.elso-honap-utana { font-size: 14.5px; color: #57534e; margin: 0; }

/* ===== Vélemények ===== */
.velemeny-monogram {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
  font: 700 16px/1 var(--font-display); color: #E04800;
  background: linear-gradient(160deg, #FFE8DB, #FFD1B8);
}
html[data-tema="sotet"] .felismeres-sor {
  background: linear-gradient(135deg, #322722, #292524 70%);
  border-color: rgba(255,154,101,.16); color: #d6d3d1;
}
html[data-tema="sotet"] .elso-honap {
  background: linear-gradient(160deg, #322722, #292524 60%);
  border-color: rgba(255,154,101,.25);
}

/* ===== Hazatérés: mit tartalmaz =====
   Rács és nem egymás alatti kártyák: nyolc teljes szélességű doboz kétszer
   olyan hosszúra nyújtja az oldalt, mint amennyi tartalom van benne. A
   számozás is elmaradt - az elemek párhuzamosak, nem egymás után jönnek. */
.tartalom-csoport { margin-top: 2.5rem; }
.tartalom-csoport:first-child { margin-top: 0; }
.tartalom-csoport-fej {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 1rem;
}
.tartalom-csoport-cim {
  font: 700 13px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #B83B00;
  white-space: nowrap;
}
.tartalom-csoport-vonal {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(224,72,0,.28), rgba(224,72,0,0));
}
.tartalom-racs {
  display: grid; grid-template-columns: 1fr; gap: .75rem;
}
@media (min-width: 640px) { .tartalom-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tartalom-racs { grid-template-columns: repeat(3, 1fr); } }
.tartalom-kartya {
  background: #fff;
  border: 1px solid #f5f5f4;
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tartalom-kartya:hover {
  border-color: rgba(255,122,61,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.tartalom-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  background: #FFF4EE; color: #E04800; margin-bottom: .625rem;
}
.tartalom-kartya h3 {
  font: 600 15px/1.35 var(--font-display);
  color: #1c1917; margin: 0 0 .3125rem;
}
.tartalom-kartya p {
  font-size: 13.5px; line-height: 1.55; color: #57534e; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tartalom-kartya:hover { transform: none; }
}

html[data-tema="sotet"] .tartalom-kartya { background: #292524; border-color: #3f3a37; }
html[data-tema="sotet"] .tartalom-kartya h3 { color: #f5f5f4; }
html[data-tema="sotet"] .tartalom-kartya p { color: #a8a29e; }
html[data-tema="sotet"] .tartalom-ikon { background: #3a2c24; color: #FF9A65; }

/* ===== Felvétel-kérés a naptárgombok mellett =====
   Halkabb, mint a jelentkezés gomb - nem versenyezni akar vele, hanem
   elkapni azt, aki épp lemondana a részvételről. Eddig ő nyom nélkül
   elveszett. */
.felvetel-hivo {
  margin: 1rem 0 0;
  padding-top: .875rem;
  border-top: 1px dashed rgba(224,72,0,.2);
  font-size: 13.5px; color: #78716c;
}
.felvetel-hivo-gomb {
  background: none; border: none; padding: 0;
  font: inherit; font-weight: 600; color: #B83B00;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.felvetel-hivo-gomb:hover { color: #E04800; }
.felvetel-hivo-gomb:focus-visible {
  outline: none; border-radius: .25rem;
  box-shadow: 0 0 0 2px #FFF8F0, 0 0 0 4px rgba(255,122,61,.6);
}
.jel-pipa-apro { display: block; font-size: 12px; color: #a8a29e; margin-top: .125rem; }

html[data-tema="sotet"] .felvetel-hivo { color: #a8a29e; border-top-color: rgba(255,154,101,.2); }
html[data-tema="sotet"] .felvetel-hivo-gomb { color: #FF9A65; }

/* ===== Ajánlom a barátomnak (havi téma) =====
   Halkabb, mint a fő tartalom: ez nem feladat, hanem lehetőség. Ha
   ugyanolyan hangsúlyos lenne, mint a hónap útja, elvonná róla a figyelmet. */
.ajanlas-doboz {
  background: linear-gradient(135deg, #FFFBF5, #fff 70%);
  border: 1px dashed rgba(224,72,0,.28);
  border-radius: 1rem;
  padding: 1.5rem 1.375rem;
}
.ajanlas-cim {
  font: 700 17px/1.35 var(--font-display);
  color: #1c1917; margin: 0 0 .375rem;
}
.ajanlas-leiras {
  font-size: 14px; line-height: 1.6; color: #57534e; margin: 0 0 1.125rem;
  max-width: 60ch;
}
.ajanlas-urlap { display: flex; flex-direction: column; gap: .875rem; max-width: 34rem; }
.ajanlas-cimke {
  display: block; font-size: 13px; font-weight: 600;
  color: #44403c; margin-bottom: .375rem;
}
.ajanlas-apro { font-size: 12px; color: #a8a29e; font-weight: 400; }
.ajanlas-hiba { font-size: 13px; color: #dc2626; margin-top: .375rem; }
.ajanlas-uzenet {
  font-size: 14px; color: #15803d;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: .625rem; padding: .625rem .875rem; margin-bottom: 1rem;
}
.ajanlas-urlap button { align-self: flex-start; }

html[data-tema="sotet"] .ajanlas-doboz { background: #292524; border-color: rgba(255,154,101,.25); }
html[data-tema="sotet"] .ajanlas-cim { color: #f5f5f4; }
html[data-tema="sotet"] .ajanlas-leiras { color: #a8a29e; }

/* ===== Videó-keret =====
   Arányos doboz, hogy a beágyazott videó ne ugráltassa az elrendezést
   betöltés közben (ez a CLS egyik leggyakoribb oka). */
.video-keret {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #1c1917;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.video-keret iframe,
.video-keret video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  display: block;
}

/* ============================================================================
   Menü-legördülők
   A korábbi változat sima szöveges lista volt: minden elem egyforma súllyal,
   magyarázat nélkül. Egy „Csoportos Üzenetközvetítés" feliratról nem derül ki,
   hogy személyesen VAGY online is van - pedig épp ez a döntési szempont.
   Ezért ikon + egysoros magyarázat került mindegyik mögé.
   ============================================================================ */
.menu-panel {
  min-width: 19rem;
  background: #fff;
  border: 1px solid #f5f5f4;
  border-radius: 1.125rem;
  box-shadow: 0 12px 34px rgba(28,25,23,.11), 0 2px 6px rgba(28,25,23,.05);
  padding: .5rem;
}
/* Nyíl a gomb felé: enélkül a panel „lebeg", nem tartozik sehova.
   A `top` NEGATÍV: a rombusznak a panel FÖLÉ kell kilógnia. Pozitív
   értékkel a panelen belülre kerül, rá az első menüpont szövegére -
   pontosan ez történt az első változatban.
   A z-index: -1 miatt a panel háttere eltakarja az alsó felét, tehát
   csak a kilógó csúcs látszik. */
.menu-panel::before {
  content: "";
  position: absolute; top: -.3125rem; left: 50%;
  width: .625rem; height: .625rem;
  transform: translateX(-50%) rotate(45deg);
  background: #fff;
  border-left: 1px solid #f5f5f4;
  border-top: 1px solid #f5f5f4;
  border-radius: .125rem 0 0 0;
  z-index: -1;
}
.menu-elem {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem .75rem;
  border-radius: .875rem;
  transition: background .16s ease;
}
.menu-elem:hover { background: #FFF4EE; }
.menu-elem-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex-shrink: 0;
  border-radius: .625rem;
  background: #FFF4EE; color: #E04800;
  transition: background .16s ease, color .16s ease;
}
.menu-elem:hover .menu-elem-ikon { background: #FFE8DB; }
.menu-elem-cim {
  font: 600 .9375rem/1.3 var(--font-display);
  color: #292524;
}
.menu-elem:hover .menu-elem-cim { color: #B83B00; }
.menu-elem-leiras {
  font-size: .75rem; line-height: 1.4; color: #a8a29e; margin-top: .0625rem;
}
.menu-elem.aktiv { background: #FFF4EE; }
.menu-elem.aktiv .menu-elem-cim { color: #B83B00; }
.menu-elem.aktiv .menu-elem-ikon { background: #FFE8DB; }

/* Kiemelt menüpont: a tagság. Nem link-szín, hanem saját kapszula - ez a
   legfontosabb út az oldalon, és a menüben is annak kell látszania. */
.nav-kiemelt {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .875rem;
  border-radius: 999px;
  font: 600 .9375rem/1 var(--font-display);
  color: #B83B00;
  background: #FFF4EE;
  border: 1px solid rgba(224,72,0,.16);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.nav-kiemelt:hover { background: #FFE8DB; border-color: rgba(224,72,0,.32); color: #E04800; }
.nav-kiemelt.active { background: #FFE8DB; border-color: rgba(224,72,0,.4); }

html[data-tema="sotet"] .menu-panel { background: #292524; border-color: #3f3a37; }
html[data-tema="sotet"] .menu-panel::before { background: #292524; border-color: #3f3a37; }
html[data-tema="sotet"] .menu-elem:hover { background: #3a2c24; }
html[data-tema="sotet"] .menu-elem-cim { color: #f5f5f4; }
html[data-tema="sotet"] .menu-elem-ikon { background: #3a2c24; color: #FF9A65; }
html[data-tema="sotet"] .nav-kiemelt { background: #3a2c24; color: #FF9A65; border-color: rgba(255,154,101,.25); }

/* A portál oldalsávjának összecsukó gombja - a márkanév mellett.
   Összecsukott állapotban a logó alá kerül, hogy 4,5rem szélességben is
   elférjen, és ne szoruljon ki a keskeny sávból. */
.portal-osszehuz {
  width: 2rem; height: 2rem; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: .5rem;
  color: #a8a29e;
  transition: background .16s ease, color .16s ease;
}
.portal-osszehuz:hover { background: rgba(255,255,255,.07); color: #fff; }
.portal-osszehuz:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #1c1917, 0 0 0 4px rgba(255,122,61,.6);
}

/* ===== Zárolt rész: mini belépő-oldal a portálon belül =====
   A fókusz a csatlakozáson van, de a bal hasáb elmondja, MIÉRT - enélkül
   csak egy fizetési űrlap lenne egy fal mögött. */
.zarolt-racs {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  max-width: 62rem; margin: 0 auto; padding: 1rem 0 2rem;
}
@media (min-width: 900px) {
  .zarolt-racs { grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
}
.zarolt-lakat-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px;
  background: #FFF4EE; color: #E04800; margin-bottom: 1.25rem;
}
.zarolt-cim {
  font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-display);
  color: #1c1917; margin: 0 0 .875rem;
}
.zarolt-bevezeto {
  font-size: 1.0625rem; line-height: 1.7; color: #57534e; margin: 0 0 1.5rem;
}

.zarolt-tema {
  background: linear-gradient(160deg, #FFF4EE, #FFFBF5 70%);
  border: 1px solid rgba(255,122,61,.24);
  border-radius: 1rem; padding: 1.125rem 1.25rem; margin-bottom: 1.5rem;
}
.zarolt-tema-cimke {
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase; color: #B83B00;
  margin-bottom: .5rem;
}
.zarolt-tema-cim { font: 700 1.0625rem/1.35 var(--font-display); color: #1c1917; }
.zarolt-tema-mondat { font-size: 14px; line-height: 1.6; color: #57534e; margin: .375rem 0 0; font-style: italic; }

.zarolt-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .875rem; }
.zarolt-lista li { display: flex; gap: .75rem; align-items: flex-start; }
.zarolt-lista-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  border-radius: .5rem; background: #FFF4EE; color: #E04800; margin-top: .0625rem;
}
.zarolt-lista strong { display: block; font: 600 14.5px/1.4 var(--font-display); color: #292524; }
.zarolt-lista-leiras { display: block; font-size: 13px; line-height: 1.5; color: #78716c; margin-top: .0625rem; }

.zarolt-vissza {
  font-size: 14px; line-height: 1.6; color: #57534e;
  border-left: 3px solid rgba(255,122,61,.35); padding-left: .875rem; margin: 0;
}

.zarolt-doboz {
  background: #fff; border: 1px solid #f5f5f4; border-radius: 1.25rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.07);
  padding: 1.5rem 1.375rem;
  position: sticky; top: 5rem;
}
.zarolt-cimke {
  display: block; font-size: 13px; font-weight: 600; color: #44403c; margin-bottom: .375rem;
}
.zarolt-zart-mezo { background: #fafaf9 !important; color: #78716c !important; cursor: not-allowed; }
.zarolt-apro { font-size: 11.5px; line-height: 1.5; color: #a8a29e; margin: .375rem 0 0; }
.zarolt-pipa {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: 13px; line-height: 1.5; color: #57534e; cursor: pointer;
}
.zarolt-pipa input { width: 1rem; height: 1rem; margin-top: .125rem; accent-color: #FF7A3D; flex-shrink: 0; }
.zarolt-pipa a { color: #B83B00; text-decoration: underline; }
.zarolt-hiba { font-size: 13px; color: #dc2626; text-align: center; margin: 0; }
.zarolt-teves { font-size: 12.5px; color: #a8a29e; text-align: center; margin: 1rem 0 0; }
.zarolt-teves a { color: #B83B00; font-weight: 600; }

/* ============================================================================
   „Hamarosan elkészül" réteg
   Az oldal alatta rendesen megvan, csak elmosva látszik - így a tartalom a
   HTML-ben marad, a látogató mégis az üzenetet kapja.
   ============================================================================ */
.keszul-reteg {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(255, 248, 240, .72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  overflow-y: auto;
}
/* Ha a böngésző nem tud backdrop-filtert, tömörebb háttér lép a helyére -
   enélkül a félkész oldal olvashatóan átütne. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .keszul-reteg { background: rgba(255, 248, 240, .97); }
}

.keszul-doboz {
  width: 100%; max-width: 30rem;
  background: #fff;
  border: 1px solid rgba(224,72,0,.14);
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(28,25,23,.16), 0 0 40px rgba(255,122,61,.10);
  padding: 2.5rem 2rem;
  text-align: center;
  margin: auto;
}
.keszul-logo { width: 3.25rem; height: 3.25rem; margin: 0 auto 1.25rem; display: block; }
.keszul-cim {
  font: 800 clamp(1.5rem, 5vw, 1.875rem)/1.2 var(--font-display);
  color: #1c1917; margin: 0 0 .875rem;
}
.keszul-szoveg {
  font-size: 15px; line-height: 1.7; color: #57534e;
  margin: 0 0 .75rem; max-width: 24rem; margin-left: auto; margin-right: auto;
}
.keszul-halk { font-size: 13.5px; color: #a8a29e; margin-bottom: 1.75rem; }
.keszul-halk a { color: #B83B00; font-weight: 600; }

.keszul-urlap {
  border-top: 1px dashed rgba(224,72,0,.2);
  padding-top: 1.25rem;
}
.keszul-cimke {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #a8a29e; margin-bottom: .625rem;
}
.keszul-sor { display: flex; gap: .5rem; }
.keszul-sor input {
  flex: 1; min-width: 0;
  padding: .625rem .875rem !important;
  border-radius: .75rem !important;
  font-size: 14px !important;
}
.keszul-sor .btn { flex-shrink: 0; padding: .625rem 1.125rem; }
.keszul-hiba { font-size: 13px; color: #dc2626; margin: .625rem 0 0; }

@media (max-width: 420px) {
  .keszul-doboz { padding: 2rem 1.375rem; }
  .keszul-sor { flex-direction: column; }
  .keszul-sor .btn { width: 100%; }
}

/* Feliratkozás a „hamarosan" rétegen. Ez a fő cselekvés - a fejlesztői
   belépés alatta, halkabban. */
.keszul-ertesites { margin-bottom: 1.5rem; }
.keszul-visszajelzes {
  font-size: 13.5px; margin: .625rem 0 0; font-weight: 500;
}
.keszul-siker { color: #15803d; }
.keszul-apro {
  font-size: 11.5px; line-height: 1.5; color: #a8a29e; margin: .625rem 0 0;
}
.keszul-apro a { color: #B83B00; text-decoration: underline; }
.keszul-reteg .hidden { display: none !important; }

/* ===== „Hamarosan elérhető" egy oldalszakaszra =====

   Nem az egész oldalt takarja, csak egy listát: látszik, hogy van ott
   valami, de nem lehet vele mit kezdeni. A homályosítás LÁTVÁNY - a
   tényleges zár szerveroldalon van (a kontroller ilyenkor semmit nem old
   fel, tehát a hangfájlok útja a forrásba se kerül bele). */
.keszul-burok { position: relative; }

.keszul-elonezet {
  filter: blur(7px);
  /* Kattintani, jelölni, tabbal odaérni sem lehet. */
  pointer-events: none;
  user-select: none;
  /* Egy egész oldalnyi homályos tartalom fölött a fedés elveszne, ezért az
     előnézet elfogy - a maszk alul elhalványítja, nem éles vágással. */
  max-height: 30rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 52%, transparent 96%);
  mask-image: linear-gradient(#000 52%, transparent 96%);
}

.keszul-fedes {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.keszul-fedes-kartya {
  max-width: 30rem; text-align: center;
  background: rgba(255, 251, 245, .93);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 209, 184, .8);
  border-radius: 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
  padding: 2rem 1.75rem;
}
.keszul-fedes-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 99px; margin-bottom: .875rem;
  background: linear-gradient(160deg, #FFE8DB, #FFD1B8);
  border: 1px solid #FFD1B8; color: #B83B00;
}
/* A doboz csak az ikonból és ebből az egy sorból áll - alsó margó nem kell,
   a doboz saját belső tere adja a levegőt. */
.keszul-fedes-cim {
  font: 700 1.35rem/1.25 var(--font-display);
  color: #292524; margin: 0;
}

html[data-tema="sotet"] .keszul-fedes-kartya {
  background: rgba(41, 37, 36, .93);
  border-color: rgba(255, 154, 101, .22);
}
html[data-tema="sotet"] .keszul-fedes-cim { color: #f5f5f4; }

@media (max-width: 640px) {
  .keszul-elonezet { max-height: 24rem; }
  .keszul-fedes-kartya { padding: 1.5rem 1.25rem; }
}

/* ============================================================================
   „Így néz ki belülről" - interaktív előnézet a Belső Kör oldalon

   Bal oldalt a kapcsolók, jobb oldalt egy MEGRAJZOLT felület: nem
   képernyőfotó, hanem HTML és CSS. Így minden kijelzőn éles, magától követi
   a designrendszert, és nem kell újrafotózni, ha odabent változik valami.

   Az `mk-` előtagú osztályok csak ezen a rajzon élnek - szándékosan nem a
   valódi tudástár osztályai, hogy a kettő külön fejlődhessen.
   ============================================================================ */

.belulrol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .belulrol { grid-template-columns: 19rem 1fr; gap: 1.75rem; }
}

/* ---- Bal sáv ---- */

.belulrol-sav { display: flex; flex-direction: column; gap: .5rem; }

/* Mobilon vízszintesen görgethető, hogy ne toljon le mindent a rajz alá. */
@media (max-width: 899px) {
  .belulrol-sav {
    flex-direction: row; overflow-x: auto; padding-bottom: .5rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .belulrol-elem { flex: 0 0 15rem; scroll-snap-align: start; }
}

.belulrol-elem {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; text-align: left;
  padding: .8125rem .9375rem;
  background: #fff;
  border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 1rem;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.belulrol-elem:hover { border-color: rgba(255, 122, 61, .38); transform: translateY(-1px); }
.belulrol-elem:focus-visible { outline: 2px solid #FF7A3D; outline-offset: 2px; }

.belulrol-elem--aktiv {
  border-color: rgba(255, 122, 61, .55);
  background: linear-gradient(135deg, #FFF8F0 0%, #fff 60%);
  box-shadow: 0 6px 22px rgba(255, 122, 61, .16);
}

.belulrol-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem; flex-shrink: 0;
  background: #FFF4EE; color: #B83B00;
  border: 1px solid rgba(255, 209, 184, .8);
  transition: background .18s ease, color .18s ease;
}
.belulrol-elem--aktiv .belulrol-ikon {
  background: linear-gradient(160deg, #FF7A3D, #FF5C14); color: #fff; border-color: transparent;
}

.belulrol-szoveg { display: flex; flex-direction: column; min-width: 0; }
.belulrol-cim { font: 600 .9375rem/1.3 var(--font-display); color: #292524; }
.belulrol-alcim { font-size: .75rem; color: #78716c; line-height: 1.4; margin-top: .0625rem; }

/* ---- A rajzolt ablak ---- */

.belulrol-keret {
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .09);
}

.belulrol-fejlec {
  display: flex; align-items: center; gap: .375rem;
  padding: .625rem .875rem;
  background: #FDF6EE;
  border-bottom: 1px solid rgba(224, 72, 0, .08);
}
.belulrol-pont { width: .625rem; height: .625rem; border-radius: 99px; display: inline-block; }
.belulrol-pont--piros { background: #FF6058; }
.belulrol-pont--sarga { background: #FFBD2E; }
.belulrol-pont--zold { background: #28CA42; }
.belulrol-cimsor {
  flex: 1; text-align: center; font-size: .75rem; color: #a8a29e;
  margin-right: 2.25rem;
}

.belulrol-vaszon {
  padding: 1.125rem;
  background: linear-gradient(180deg, #FFFDFA 0%, #fff 40%);
  min-height: 22rem;
}
@media (min-width: 900px) { .belulrol-vaszon { padding: 1.5rem; min-height: 26rem; } }

.belulrol-panel { display: none; }
.belulrol-panel--aktiv { display: block; animation: belulrolBe .32s ease both; }
@keyframes belulrolBe {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .belulrol-panel--aktiv { animation: none; }
}

.belulrol-labjegyzet {
  text-align: center; font-size: .8125rem; color: #a8a29e; margin: 1.25rem 0 0;
}

/* ---- A rajz belső elemei ---- */

.mk-koszones { font: 700 1.25rem/1.25 var(--font-display); color: #292524; margin: 0 0 .125rem; }
.mk-halvany { color: #a8a29e; }
.mk-kicsi { font-size: .75rem; }
.mk-nagyobb { font-size: 1.0625rem; }
.mk-eros { font-weight: 600; color: #292524; }
.mk-nyul { flex: 1; min-width: 0; }
.mk-egyseg { font-size: .875rem; font-weight: 400; color: #a8a29e; }

.mk-cimke {
  font: 600 .625rem/1 var(--font-display); letter-spacing: .1em;
  text-transform: uppercase; color: #B83B00; margin-bottom: .375rem;
}
.mk-cimke--kozep { margin: 1rem 0 .5rem; }

.mk-fejcim { font: 800 1.5rem/1.15 var(--font-display); color: #292524; margin: 0 0 .25rem; }

.mk-kartya {
  background: #fff; border: 1px solid #f0ebe4; border-radius: .875rem;
  padding: .875rem; margin-bottom: .625rem;
}
.mk-kartya--hangsulyos {
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 65%);
  border-color: rgba(255, 122, 61, .25);
}
.mk-kartya--sor { display: flex; align-items: center; gap: .625rem; }
.mk-kartya--idezet {
  font-style: italic; color: #57534e; font-size: .875rem;
  border-left: 3px solid #FF7A3D; border-radius: .25rem .875rem .875rem .25rem;
}
.mk-forras { display: block; font-style: normal; font-size: .6875rem; color: #a8a29e; margin-top: .375rem; }

.mk-ketto { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }

.mk-sor { display: flex; align-items: center; gap: .625rem; }
.mk-sor--koz { justify-content: space-between; margin-bottom: .375rem; }

.mk-lejatszo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 99px; flex-shrink: 0;
  background: linear-gradient(160deg, #FF7A3D, #FF5C14); color: #fff;
  padding-left: .125rem;
}
.mk-lejatszo.halvany { background: #FFE8DB; color: #B83B00; }

.mk-hullam { display: flex; align-items: center; gap: 2px; height: 1.75rem; margin-top: .5rem; }
.mk-hullam span { flex: 1; background: #FFD1B8; border-radius: 99px; min-width: 2px; }
.mk-hullam--vekony { height: 1.125rem; margin-top: .25rem; }

.mk-szam { font: 800 1.5rem/1 var(--font-display); color: #292524; margin-bottom: .375rem; }

.mk-sav { height: .375rem; border-radius: 99px; background: #F5EDE4; overflow: hidden; margin-bottom: .375rem; }
.mk-sav span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF7A3D, #FF5C14); }
.mk-sav--vekony { height: .25rem; margin-top: .625rem; }

.mk-pottyok { display: flex; gap: .25rem; margin-bottom: .375rem; }
.mk-pottyok span { width: .5rem; height: .5rem; border-radius: 99px; background: #F5EDE4; }
.mk-pottyok span.tele { background: #FF7A3D; }

.mk-jelvny {
  font-size: .6875rem; font-weight: 600; color: #B83B00;
  background: #FFF4EE; border: 1px solid rgba(255, 209, 184, .9);
  padding: .1875rem .5rem; border-radius: 99px;
}
.mk-jelvny--elo { color: #166534; background: #dcfce7; border-color: #bbf7d0; }

.mk-lepesek { display: flex; flex-direction: column; gap: .375rem; margin: .5rem 0; }
.mk-lepes { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #78716c; }
.mk-lepes span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; border-radius: 99px; flex-shrink: 0;
  font-size: .625rem; font-weight: 700;
  background: #F5EDE4; color: #a8a29e;
}
.mk-lepes.kesz { color: #292524; }
.mk-lepes.kesz span { background: linear-gradient(160deg, #FF7A3D, #FF5C14); color: #fff; }

.mk-kerdes { font: 600 italic .9375rem/1.5 var(--font-display); color: #292524; margin-bottom: .625rem; }

.mk-mezo {
  background: #fff; border: 1px solid #E7E0D8; border-radius: .625rem;
  padding: .625rem .75rem; font-size: .8125rem; color: #57534e;
  line-height: 1.6; min-height: 4.5rem; margin-bottom: .5rem;
}
.mk-kurzor {
  display: inline-block; width: 1px; height: .875rem; background: #FF7A3D;
  vertical-align: -2px; margin-left: 1px; animation: mkVillan 1.1s steps(2, start) infinite;
}
@keyframes mkVillan { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-kurzor { animation: none; } }

.mk-hangulat { display: inline-flex; gap: .3125rem; }
.mk-hangulat span {
  width: .75rem; height: .75rem; border-radius: 99px;
  border: 1.5px solid #E7E0D8; display: inline-block;
}
.mk-hangulat span.tele { background: #FF7A3D; border-color: #FF7A3D; }

.mk-lista { display: flex; flex-direction: column; gap: .375rem; }
.mk-tetel {
  display: flex; align-items: center; gap: .5rem; justify-content: space-between;
  background: #fff; border: 1px solid #f0ebe4; border-radius: .625rem;
  padding: .5rem .75rem; font-size: .8125rem; color: #57534e;
}

.mk-fulek { display: flex; gap: .375rem; margin-bottom: .75rem; flex-wrap: wrap; }
.mk-fulek span {
  font-size: .75rem; color: #78716c; padding: .3125rem .6875rem;
  border-radius: 99px; background: #F7F1EA;
}
.mk-fulek span.tele { background: linear-gradient(160deg, #FF7A3D, #FF5C14); color: #fff; }

.mk-visszaszamlalo { display: flex; gap: 1.125rem; margin: .75rem 0; }
.mk-visszaszamlalo span { font-size: .625rem; color: #a8a29e; text-align: center; }
.mk-visszaszamlalo b {
  display: block; font: 800 1.125rem/1 var(--font-display); color: #292524; margin-bottom: .125rem;
}

.mk-gomb {
  display: inline-block; font-size: .8125rem; font-weight: 600; color: #fff;
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  padding: .5rem 1rem; border-radius: 99px;
}

.mk-pipa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; border-radius: 99px; flex-shrink: 0;
  background: #F5EDE4; color: transparent;
}
.mk-pipa.tele { background: #dcfce7; color: #166534; }

html[data-tema="sotet"] .belulrol-elem { background: #292524; border-color: rgba(255, 154, 101, .14); }
html[data-tema="sotet"] .belulrol-elem--aktiv { background: linear-gradient(135deg, #322722 0%, #292524 60%); }
html[data-tema="sotet"] .belulrol-cim { color: #f5f5f4; }

/* A „Talán ismerős" lista panelben, a bevezető mellett.

   Korábban egy teljes szélességű szekció volt, saját gradiens háttérrel.
   A két hasábos elrendezésben a háttér a panelre költözött - így megmarad
   a vizuális elkülönülés anélkül, hogy a fél oldalt beszínezné. */
.felismeres-panel {
  background: linear-gradient(160deg, #FFF4EE 0%, #FFF8F0 55%, #fff 100%);
  border: 1px solid rgba(255, 209, 184, .75);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 34px rgba(255, 122, 61, .1);
}
@media (min-width: 768px) {
  .felismeres-panel { padding: 2rem 1.875rem; }
  /* A jobb hasáb optikailag akkor ül jól, ha a szöveg első sorával
     kezdődik - nem a szekció tetejével. */
  .felismeres-panel { margin-top: .25rem; }
}

html[data-tema="sotet"] .felismeres-panel {
  background: linear-gradient(160deg, #322722 0%, #292524 60%);
  border-color: rgba(255, 154, 101, .2);
}

/* ============================================================================
   Vezetett önfelismerés - a módszer bemutató oldala

   A központi elem a kérdés-létra: az első két kérdés olvasható, onnantól
   elmosva. Nem trükk - a folyamat tényleg személyre szabott onnantól, tehát
   leírni sem lehetne. A homály ezt teszi láthatóvá.
   ============================================================================ */

/* ---- A négy szó a fejlécben ---- */

.vo-negy {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.vo-negy-elem {
  font: 600 .8125rem/1 var(--font-display);
  letter-spacing: .04em;
  color: #B83B00;
  background: #FFF4EE;
  border: 1px solid rgba(255, 209, 184, .9);
  padding: .5rem .875rem;
  border-radius: 99px;
}

/* ---- A módszer neve panelben ---- */

.vo-panel {
  background: linear-gradient(160deg, #FFF4EE 0%, #FFF8F0 55%, #fff 100%);
  border: 1px solid rgba(255, 209, 184, .75);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 34px rgba(255, 122, 61, .1);
}
@media (min-width: 768px) { .vo-panel { padding: 2rem 1.875rem; margin-top: .25rem; } }

.vo-panel-nev {
  font: 800 1.5rem/1.2 var(--font-display);
  color: #292524;
  margin: 0 0 .75rem;
}

/* ---- A kérdés-létra ---- */

.vo-letra {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .625rem;
}

.vo-lepcso {
  display: flex; align-items: center; gap: .875rem;
  background: #fff;
  border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 1rem;
  padding: .9375rem 1.125rem;
}

/* Minden lépcső egy hajszállal beljebb kezdődik: a szem így látja, hogy
   lefelé haladunk, nem oldalra. Mobilon nincs behúzás - ott a szélesség
   fontosabb, mint a metafora. */
@media (min-width: 640px) {
  .vo-lepcso:nth-child(2) { margin-left: 1.25rem; }
  .vo-lepcso:nth-child(3) { margin-left: 2.5rem; }
  .vo-lepcso:nth-child(4) { margin-left: 3.75rem; }
  .vo-lepcso:nth-child(5) { margin-left: 5rem; }
  .vo-lepcso:nth-child(6) { margin-left: 6.25rem; }
}

.vo-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 99px; flex-shrink: 0;
  font: 700 .8125rem/1 var(--font-display);
  background: #FFF4EE; color: #B83B00;
  border: 1px solid rgba(255, 209, 184, .9);
}

.vo-kerdes { font-size: .9375rem; line-height: 1.5; color: #44403c; }

.vo-lepcso--zart { background: #FFFDFA; }

/* A homály a lényeg: látszik, hogy van ott kérdés, de nem olvasható.
   A user-select tiltás nem védelem - csak megakadályozza, hogy a
   kijelölés véletlenül elárulja a szöveget. */
.vo-homaly {
  filter: blur(4.5px);
  user-select: none;
  color: #78716c;
}

.vo-lepcso--felismeres {
  background: linear-gradient(135deg, #FFF4EE 0%, #fff 70%);
  border-color: rgba(255, 122, 61, .45);
  box-shadow: 0 8px 26px rgba(255, 122, 61, .14);
}
.vo-lepcso--felismeres .vo-szam {
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  color: #fff; border-color: transparent;
}
.vo-lepcso--felismeres .vo-kerdes {
  font-family: var(--font-display); font-weight: 700; color: #292524;
}

.vo-megjegyzes {
  margin: 1.75rem 0 0; text-align: center;
  font-size: .9375rem; line-height: 1.7; color: #57534e;
}

/* ---- A négy lépés kártyái ---- */

.vo-lepes {
  position: relative;
  background: #fff;
  border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vo-lepes:hover {
  border-color: rgba(255, 122, 61, .4);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 122, 61, .12);
}
.vo-lepes-szam {
  display: block;
  font: 800 1.75rem/1 var(--font-display);
  background: linear-gradient(135deg, #FF7A3D, #FF5C14);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: .625rem;
}
.vo-lepes h3 {
  font: 700 1.0625rem/1.3 var(--font-display);
  color: #292524; margin: 0 0 .5rem;
}
.vo-lepes p { font-size: .875rem; line-height: 1.65; color: #78716c; margin: 0; }

/* ---- Záró doboz ---- */

.vo-cta {
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 60%);
  border: 1px solid rgba(255, 209, 184, .8);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 14px 40px rgba(255, 122, 61, .1);
}
@media (min-width: 768px) { .vo-cta { padding: 2.75rem 2.5rem; } }

.vo-hirlevel {
  border-top: 1px solid rgba(224, 72, 0, .1);
  padding-top: 1.5rem;
  max-width: 26rem; margin: 0 auto;
}
.vo-sor { display: flex; gap: .5rem; flex-wrap: wrap; }
.vo-sor input { flex: 1; min-width: 12rem; }

html[data-tema="sotet"] .vo-panel,
html[data-tema="sotet"] .vo-cta {
  background: linear-gradient(160deg, #322722 0%, #292524 60%);
  border-color: rgba(255, 154, 101, .2);
}
html[data-tema="sotet"] .vo-lepcso { background: #292524; border-color: rgba(255, 154, 101, .14); }
html[data-tema="sotet"] .vo-lepes { background: #292524; border-color: rgba(255, 154, 101, .14); }
html[data-tema="sotet"] .vo-panel-nev,
html[data-tema="sotet"] .vo-lepes h3 { color: #f5f5f4; }
html[data-tema="sotet"] .vo-kerdes { color: #d6d3d1; }

/* ---- Vezetett önfelismerés: a hat szakasz és a rejtett lépések ---- */

.vo-szakaszok {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vo-szakaszok { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .vo-szakaszok { grid-template-columns: repeat(3, 1fr); } }

.vo-szakasz {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 209, 184, .8);
  border-radius: .875rem;
  padding: .625rem .875rem;
}
.vo-szakasz-szam {
  font: 700 .75rem/1 var(--font-display);
  color: #FF5C14; letter-spacing: .04em;
  min-width: 1.5rem;
}
.vo-szakasz-cim { font: 600 .875rem/1.3 var(--font-display); color: #292524; }
.vo-szakasz-alcim { font-size: .75rem; color: #a8a29e; width: 100%; padding-left: 2rem; }

/* A lépcső behúzása négy fok után megáll: tizenhárom sornál a folytatás
   már kifutna a képernyőről, és pont a kérdéseket nyomná össze. */
@media (min-width: 640px) {
  .vo-lepcso:nth-child(n + 6) { margin-left: 5rem; }
}

/* Rejtett kérdés: elmosott sávok, nem kitalált szöveg. Ami a forrásban
   van, az legyen igaz - itt tehát nincs mit elolvasni. */
.vo-savok {
  display: flex; flex-direction: column; gap: .3125rem; flex: 1;
  filter: blur(3px);
  user-select: none;
}
.vo-savok span {
  display: block; height: .5rem; border-radius: 99px;
  background: linear-gradient(90deg, #E7E0D8, #F3ECE4);
}

/* A rejtett sorok laposabbak: nyolc teli magasságú doboz elnyomná a két
   olvasható kérdést, pedig azok a lényegesek. */
.vo-lepcso--zart { padding-top: .625rem; padding-bottom: .625rem; }
.vo-lepcso--zart .vo-szam { opacity: .55; }

.vo-lepcso--meditacio {
  background: linear-gradient(135deg, #F3F0FF 0%, #fff 70%);
  border-color: rgba(139, 122, 255, .35);
  box-shadow: 0 8px 26px rgba(139, 122, 255, .12);
}
.vo-lepcso--meditacio .vo-szam {
  background: linear-gradient(160deg, #9B8BFF, #7C6BF0);
  color: #fff; border-color: transparent;
}
.vo-lepcso--meditacio .vo-kerdes {
  font-family: var(--font-display); font-weight: 700; color: #292524;
}

html[data-tema="sotet"] .vo-szakasz { background: rgba(41, 37, 36, .7); border-color: rgba(255, 154, 101, .2); }
html[data-tema="sotet"] .vo-szakasz-cim { color: #f5f5f4; }
html[data-tema="sotet"] .vo-savok span { background: linear-gradient(90deg, #44403c, #57534e); }
html[data-tema="sotet"] .vo-lepcso--meditacio { background: linear-gradient(135deg, #2e2a3d 0%, #292524 70%); }

/* A Vezetett önfelismerés kiemelője a Belső Kör oldalon.

   A bal hasáb korábban a jobb oldali panelnél hamarabb ért véget, és alatta
   üres sáv maradt. Ez a doboz tölti ki - nem töltelékkel, hanem azzal, ami
   a tagságot ténylegesen megkülönbözteti. */
.vo-kiemelo {
  margin-top: 2rem;
  background: #fff;
  border: 1px solid rgba(255, 122, 61, .3);
  border-left: 3px solid #FF7A3D;
  border-radius: .5rem 1.25rem 1.25rem .5rem;
  padding: 1.5rem 1.375rem;
  box-shadow: 0 8px 28px rgba(255, 122, 61, .09);
}

.vo-kiemelo-cimke {
  display: block;
  font: 600 .625rem/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase;
  color: #B83B00; margin-bottom: .5rem;
}
.vo-kiemelo-cim {
  font: 800 1.375rem/1.2 var(--font-display);
  color: #292524; margin: 0 0 .75rem;
}
.vo-kiemelo-szoveg {
  font-size: .9375rem; line-height: 1.7; color: #57534e; margin: 0 0 .75rem;
}
.vo-kiemelo-link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .875rem; font-weight: 600; color: #B83B00;
  transition: gap .18s ease, color .18s ease;
}
.vo-kiemelo-link:hover { gap: .625rem; color: #FF5C14; }

html[data-tema="sotet"] .vo-kiemelo {
  background: #292524; border-color: rgba(255, 154, 101, .28);
}
html[data-tema="sotet"] .vo-kiemelo-cim { color: #f5f5f4; }
html[data-tema="sotet"] .vo-kiemelo-szoveg { color: #d6d3d1; }

/* ============================================================================
   E hónap útja - két hasábos elrendezés

   Balra a mostani hónap (ez a munka), jobbra az archívum és a javaslatok
   (ez a tájékozódás). Korábban minden egymás alatt futott, és a korábbi
   hónapokig háromszor kellett görgetni.
   ============================================================================ */

.ht-racs { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) { .ht-racs { grid-template-columns: 1fr 20rem; gap: 1.5rem; } }

.ht-fo { display: flex; flex-direction: column; gap: 1.25rem; }
.ht-oldal { display: flex; flex-direction: column; gap: 1rem; }

/* ---- A hónap fő kártyája ---- */

.ht-hero { padding: 1.5rem; }
@media (min-width: 768px) { .ht-hero { padding: 1.875rem; } }

.ht-hero-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .875rem;
}
.ht-honap {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase; color: #B83B00;
}
.ht-nap-jelzo {
  font-size: 12px; font-weight: 600; color: #B83B00;
  background: #FFF4EE; border: 1px solid rgba(255, 209, 184, .9);
  padding: .1875rem .625rem; border-radius: 99px;
}

.ht-cim { font: 800 1.75rem/1.15 var(--font-display); color: #292524; margin: 0 0 .5rem; }
@media (min-width: 768px) { .ht-cim { font-size: 2rem; } }

.ht-kulcsmondat {
  font: 500 italic 1.0625rem/1.5 var(--font-display);
  color: #57534e; margin: 0 0 .875rem;
}
.ht-bevezeto { color: #78716c; line-height: 1.7; margin: 0 0 1.25rem; max-width: 42rem; }

/* ---- Haladás ---- */

.ht-haladas { margin-bottom: 1.25rem; }
.ht-haladas-sav {
  height: .5rem; border-radius: 99px; background: #F5EDE4;
  overflow: hidden; margin-bottom: .875rem;
}
.ht-haladas-sav span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #FF5C14);
  transition: width .4s ease;
}
.ht-mai {
  background: #FFFDFA; border: 1px solid rgba(224, 72, 0, .12);
  border-left: 3px solid #FF7A3D;
  border-radius: .375rem .875rem .875rem .375rem;
  padding: .75rem .9375rem;
}
.ht-mai-cimke {
  display: block; font: 600 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
  margin-bottom: .3125rem;
}
.ht-mai p { margin: 0; font-size: .9375rem; line-height: 1.6; color: #44403c; }

/* ---- Idézet ---- */

.ht-idezet {
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 65%);
  border: 1px solid rgba(255, 209, 184, .8);
  border-radius: 1rem; padding: 1.25rem 1.375rem; text-align: center;
}
.ht-idezet p {
  font: 500 italic 1.0625rem/1.6 var(--font-display);
  color: #44403c; margin: 0 0 .5rem;
}
.ht-idezet cite { font-size: 12px; color: #a8a29e; font-style: normal; }

/* ---- Jobb hasáb ---- */

.ht-doboz {
  background: #fff; border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 1rem; padding: 1.125rem;
}
.ht-doboz-cim {
  font: 700 .9375rem/1.3 var(--font-display); color: #292524; margin: 0 0 .5rem;
}
.ht-doboz-leiras { font-size: .8125rem; line-height: 1.6; color: #a8a29e; margin: 0 0 .875rem; }
.ht-ures { font-size: .8125rem; color: #a8a29e; margin: 0; }

.ht-archiv-elem {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .25rem; border-bottom: 1px solid #f5f0ea;
  transition: color .16s ease;
}
.ht-archiv-elem:last-child { border-bottom: 0; }
.ht-archiv-elem:hover { color: #B83B00; }
.ht-archiv-honap {
  font-size: 11px; font-weight: 600; color: #a8a29e;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.ht-archiv-cim {
  flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; color: #44403c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ht-archiv-elem:hover .ht-archiv-cim { color: #B83B00; }

/* ---- Téma-javaslat ---- */

.ht-javaslat-urlap { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.ht-javaslat-urlap input,
.ht-javaslat-urlap textarea { font-size: .875rem; }

.ht-siker {
  font-size: .8125rem; color: #166534; background: #dcfce7;
  border: 1px solid #bbf7d0; border-radius: .5rem;
  padding: .5rem .75rem; margin: 0 0 .75rem;
}
.ht-hiba { font-size: .75rem; color: #dc2626; margin: 0; }

.ht-javaslatok {
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 1px solid #f5f0ea; padding-top: .875rem;
}
.ht-javaslat { display: flex; align-items: flex-start; gap: .625rem; }

.ht-szavazat {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .0625rem; flex-shrink: 0;
  min-width: 2.125rem; padding: .3125rem .25rem;
  border: 1px solid rgba(224, 72, 0, .14); border-radius: .5rem;
  background: #fff; color: #a8a29e;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.ht-szavazat:hover { border-color: rgba(255, 122, 61, .45); color: #B83B00; }
.ht-szavazat--enyem {
  background: #FFF4EE; border-color: rgba(255, 122, 61, .5); color: #B83B00;
}
.ht-szavazat--nezo { cursor: default; }

.ht-javaslat-szoveg { flex: 1; min-width: 0; }
.ht-javaslat-cim { font-size: .8125rem; font-weight: 600; color: #292524; line-height: 1.4; }
.ht-javaslat-indok { font-size: 12px; line-height: 1.5; color: #a8a29e; margin: .125rem 0 0; }
.ht-javaslat-szerzo { font-size: 11px; color: #c4bdb5; }

html[data-tema="sotet"] .ht-doboz { background: #292524; border-color: rgba(255, 154, 101, .14); }
html[data-tema="sotet"] .ht-cim,
html[data-tema="sotet"] .ht-doboz-cim,
html[data-tema="sotet"] .ht-javaslat-cim { color: #f5f5f4; }
html[data-tema="sotet"] .ht-mai { background: #322722; border-color: rgba(255, 154, 101, .18); }
html[data-tema="sotet"] .ht-idezet { background: linear-gradient(160deg, #322722 0%, #292524 65%); }
html[data-tema="sotet"] .ht-szavazat { background: #292524; }

/* ============================================================================
   Egy hónap témája - füles elrendezés

   Az anyag eddig egyetlen hosszú lapon futott: tanítás, gyakorlat, kérdés,
   videó, meditáció, munkafüzet, mind egymás alatt. Fülekre bontva bármelyik
   egy kattintásra van, és a lap teteje mindig ugyanaz marad.
   ============================================================================ */

.hts-fejlec {
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 60%);
  border: 1px solid rgba(255, 209, 184, .8);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .hts-fejlec { padding: 1.875rem; } }

.hts-fejlec-sor {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .625rem;
}
.hts-honap {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase; color: #B83B00;
}
.hts-nap {
  font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  padding: .1875rem .625rem; border-radius: 99px;
}
.hts-lezart { font-size: 12px; color: #a8a29e; }

.hts-cim { font: 800 1.625rem/1.15 var(--font-display); color: #292524; margin: 0 0 .5rem; }
@media (min-width: 768px) { .hts-cim { font-size: 2rem; } }

.hts-kulcsmondat {
  font: 500 italic 1.0625rem/1.5 var(--font-display);
  color: #57534e; margin: 0 0 .75rem;
}
.hts-bevezeto { color: #78716c; line-height: 1.7; margin: 0; max-width: 44rem; }

.hts-sav {
  height: .375rem; border-radius: 99px; background: rgba(224, 72, 0, .1);
  overflow: hidden; margin-top: 1.125rem;
}
.hts-sav span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #FF5C14);
}

.hts-borito { margin-top: 1.25rem; border-radius: .875rem; overflow: hidden; }
.hts-borito img { width: 100%; height: auto; display: block; }

/* ---- Fülsáv ---- */

.hts-fulsav {
  display: flex; gap: .375rem; margin-bottom: 1rem;
  overflow-x: auto; padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hts-fulsav::-webkit-scrollbar { display: none; }

.hts-ful {
  display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0;
  padding: .5rem .875rem;
  font: 600 .875rem/1 var(--font-display);
  color: #78716c; background: #fff;
  border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 99px; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.hts-ful:hover { border-color: rgba(255, 122, 61, .4); color: #B83B00; }
.hts-ful:focus-visible { outline: 2px solid #FF7A3D; outline-offset: 2px; }

.hts-ful--aktiv {
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  border-color: transparent; color: #fff;
}
.hts-ful-szam {
  font-size: 11px; font-weight: 700; line-height: 1;
  background: rgba(224, 72, 0, .1); color: #B83B00;
  padding: .125rem .3125rem; border-radius: 99px;
}
.hts-ful--aktiv .hts-ful-szam { background: rgba(255, 255, 255, .26); color: #fff; }

/* ---- Lapok ---- */

.hts-lapok {
  background: #fff;
  border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
@media (min-width: 768px) { .hts-lapok { padding: 1.875rem; } }

.hts-lap { display: none; }
.hts-lap--aktiv { display: block; animation: htsBe .26s ease both; }
@keyframes htsBe { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hts-lap--aktiv { animation: none; } }

.hts-alcim {
  font: 700 1rem/1.3 var(--font-display); color: #292524;
  margin: 1.75rem 0 .75rem;
}
.hts-lap > .hts-alcim:first-child { margin-top: 0; }
.hts-anyag-cim { color: #78716c; margin: 0 0 .75rem; }

/* Hónap könyve a havi téma fülei között. Borító balra, szöveg mellette;
   keskeny kijelzőn egymás alá fordul. */
.hts-konyv { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.hts-konyv-torzs { flex: 1 1 16rem; min-width: 0; }
.hts-konyv-szerzo { font-size: .8125rem; color: #a8a29e; margin: 0 0 .65rem; }
.hts-konyv-ajanlo {
  font-style: italic; line-height: 1.7; color: #57534e;
  margin: 0 0 .85rem; text-wrap: pretty;
}
.hts-konyv-jelzes {
  display: inline-block; margin-bottom: .9rem;
  font-size: 12px; color: #a8a29e;
}

/* ---- Kiemelt idézet a tanítás fölött ---- */

.hts-idezet-kiemelt {
  background: linear-gradient(160deg, #FFF4EE 0%, #fff 70%);
  border-left: 3px solid #FF7A3D;
  border-radius: .375rem 1rem 1rem .375rem;
  padding: 1.125rem 1.25rem; margin-bottom: 1.5rem;
}
.hts-idezet-kiemelt p {
  font: 500 italic 1.0625rem/1.6 var(--font-display);
  color: #44403c; margin: 0 0 .375rem;
}
.hts-idezet-kiemelt cite { font-size: 12px; color: #a8a29e; font-style: normal; }

/* ---- Gyakorlat ---- */

/* A blokk fejléce sötétebb sávot kap. Egy fülön belül három blokk állhat
   (A sáv, B sáv, munkafüzet), és lapos háttéren nem látszott, hol ér véget
   az egyik és hol kezdődik a másik. */
.hts-gyakorlat-fej {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: -1.125rem -1.25rem 1.125rem;
  padding: .75rem 1.25rem;
  background: linear-gradient(100deg, #FFEDE2, #FFF6F0);
  border-bottom: 1px solid rgba(224, 72, 0, .16);
  border-radius: .875rem .875rem 0 0;
  scroll-margin-top: 5rem;
}
.hts-gyakorlat-cim { font: 700 1.0625rem/1.3 var(--font-display); color: #1c1917; }

/* A horgony a sáv jobb szélén ül, és csak rámutatásnál erősödik: legyen
   megtalálható, de ne vonja el a figyelmet a címről. */
.hts-horgony {
  margin-left: auto; padding: 0 .3rem;
  font: 700 1rem/1 var(--font-display); color: rgba(224, 72, 0, .35);
  text-decoration: none; transition: color .15s ease;
}
.hts-horgony:hover, .hts-horgony:focus-visible { color: #E04800; }

/* Ugrósáv a fül tetején. Csak akkor jelenik meg, ha tényleg több blokk van:
   egyetlen elemhez nem kell navigáció. */
.hts-blokkugras {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-bottom: 1.25rem;
}
.hts-blokkugras-elem {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 99px;
  border: 1px solid rgba(224, 72, 0, .2); background: #fff;
  font: 600 .8125rem/1 var(--font-display); color: #B83B00; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.hts-blokkugras-elem::before { content: '#'; opacity: .5; }
.hts-blokkugras-elem:hover { background: #FFF4EE; border-color: #E04800; }
.hts-blokkugras-elem:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .35); }

/* A blokk maga: keret és háttér, hogy a sötétebb fejléc alá tartozzon. */
.hts-gyakorlatsav {
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: .875rem;
  padding: 1.125rem 1.25rem;
  background: #fff;
  scroll-margin-top: 4.5rem;
}
.hts-gyakorlatsav--masodik { margin-top: 1.5rem; }
.hts-jelvny {
  font-size: 11.5px; font-weight: 600; color: #B83B00;
  background: #FFF4EE; border: 1px solid rgba(255, 209, 184, .9);
  padding: .1875rem .5rem; border-radius: 99px;
}

/* Napról napra. Ez eddig sehol nem jelent meg a tagoknak, pedig ez mondja
   meg, hogy MA mit kell csinálni. */
.hts-napok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }

.hts-nap-elem {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .6875rem .875rem;
  background: #fff; border: 1px solid #f0ebe4; border-radius: .75rem;
}
.hts-nap-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: 99px; flex-shrink: 0;
  font: 700 12px/1 var(--font-display);
  background: #F5EDE4; color: #a8a29e;
}
.hts-nap-szoveg { flex: 1; font-size: .875rem; line-height: 1.6; color: #57534e; }

.hts-nap-elem--mogott { opacity: .62; }
.hts-nap-elem--mogott .hts-nap-szam { background: #FFE8DB; color: #B83B00; }

.hts-nap-elem--mai {
  background: linear-gradient(135deg, #FFF4EE 0%, #fff 70%);
  border-color: rgba(255, 122, 61, .45);
  box-shadow: 0 6px 20px rgba(255, 122, 61, .12);
}
.hts-nap-elem--mai .hts-nap-szam {
  background: linear-gradient(160deg, #FF7A3D, #FF5C14); color: #fff;
}
.hts-nap-elem--mai .hts-nap-szoveg { color: #292524; font-weight: 500; }
.hts-nap-ma {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; flex-shrink: 0;
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  padding: .1875rem .4375rem; border-radius: 99px;
}

/* ---- Napló ---- */


/* ---- Kísérők ---- */

.hts-idezetek { display: flex; flex-direction: column; gap: .75rem; }
.hts-idezet {
  margin: 0; background: #FFFDFA;
  border: 1px solid #f0ebe4; border-left: 3px solid #FFD1B8;
  border-radius: .375rem .875rem .875rem .375rem;
  padding: 1rem 1.125rem;
}
.hts-idezet blockquote {
  margin: 0 0 .375rem; border: 0; padding: 0;
  font: 500 italic 1rem/1.6 var(--font-display); color: #44403c;
}
.hts-idezet figcaption { font-size: 12px; color: #a8a29e; }

.hts-logion {
  margin-top: 1.25rem; padding: 1.125rem 1.25rem;
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 65%);
  border: 1px solid rgba(255, 209, 184, .8); border-radius: 1rem;
}
.hts-logion p { margin: 0 0 .5rem; line-height: 1.7; color: #44403c; }
.hts-logion cite { font-size: 12px; color: #a8a29e; font-style: normal; }

html[data-tema="sotet"] .hts-fejlec,
html[data-tema="sotet"] .hts-logion { background: linear-gradient(160deg, #322722 0%, #292524 60%); border-color: rgba(255,154,101,.2); }
html[data-tema="sotet"] .hts-lapok,
html[data-tema="sotet"] .hts-ful,
html[data-tema="sotet"] .hts-nap-elem,
html[data-tema="sotet"] .hts-idezet { background: #292524; border-color: rgba(255,154,101,.14); }
html[data-tema="sotet"] .hts-cim,
html[data-tema="sotet"] .hts-alcim,
html[data-tema="sotet"] .hts-gyakorlat-cim { color: #f5f5f4; }
html[data-tema="sotet"] .hts-nap-szoveg { color: #d6d3d1; }

/* ============================================================================
   Vezetett önfelismerés a havi témában

   Egy kérdés egy képernyőn. Nem lista: a módszer lényege, hogy egyszerre
   egy kérdéssel vagy dolgod - ha mind a nyolc egyszerre látszik, az elme
   előre szalad, és a válaszok felszínesek maradnak.
   ============================================================================ */

/* ---- „Mi is az a vezetett önfelismerés röviden?" ----
   Nyitható blokk a kérdések fölött. Aki először jár itt, annak nyitva
   érkezik; aki már válaszolt, annak csukva, mert tizenkét kérdésnél a
   bemutatás másodszorra már csak út a kérdés előtt.
   A <summary> saját nyíljelét levesszük, és sajátot rakunk helyette, mert
   a böngészők alapértelmezett háromszöge mindegyikben máshogy néz ki. */
.hts-mirol {
  margin: 0 0 1.125rem; padding: .875rem 1.125rem;
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: .875rem; background: #FFFBF5;
}
.hts-mirol-fej {
  display: flex; align-items: center; gap: .5rem;
  font: 600 .875rem/1.4 var(--font-display);
  color: #B83B00; cursor: pointer; list-style: none;
}
.hts-mirol-fej::-webkit-details-marker { display: none; }
.hts-mirol-fej::after {
  content: ''; flex: none; margin-left: auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transform-origin: center;
  transition: transform .18s ease;
}
.hts-mirol[open] > .hts-mirol-fej::after { transform: rotate(-135deg); }
.hts-mirol-fej:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .4); border-radius: .375rem;
}
/* Az „i" jelvény a fejlécben. Nem a szöveg része, hanem az, ami egy
   pillantás alatt megmondja, hogy ez tájékoztatás, nem teendő. */
.hts-mirol-ikon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; border-radius: 99px;
  background: #FFF4EE; border: 1px solid rgba(255, 209, 184, .9);
  color: #E04800;
}
html[data-tema="sotet"] .hts-mirol-ikon {
  background: #2a2422; border-color: #3a2f2a; color: #FF9A65;
}
.hts-mirol-test { margin-top: .75rem; }
/* A minta megnyitója a bekezdések alatt. A gombnak magának alig van margója
   (a lépésen belül szorosan ül a bevezető alatt), itt viszont kell fölé
   levegő, különben rátapad az utolsó bekezdésre. */
.hts-mirol-test .onf-minta-nyit { margin-top: 1rem; }
.hts-mirol-test > p {
  margin: 0 0 .75rem; font-size: .875rem; line-height: 1.7; color: #57534e;
  max-width: 44rem;
}
.hts-mirol-test > p:last-of-type { margin-bottom: 0; }
/* A négy szó a nyitóoldalon középre zárt, itt panelben balra: ott hajtás
   fölötti dísz, itt egy bekezdés folytatása. */
.hts-mirol .vo-negy { justify-content: flex-start; margin-top: .875rem; }
/* A napló bevezetője a boxon belül: a saját tipográfiáját megtartja, csak az
   alsó margóját nem, mert azt a box paddingje adja. */
.hts-mirol .naplo-bevezeto { margin-bottom: 0; }
html[data-tema="sotet"] .hts-mirol { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .hts-mirol-fej { color: #FF9A65; }
html[data-tema="sotet"] .hts-mirol-test > p { color: #d6d3d1; }
html[data-tema="sotet"] .hts-mirol .vo-negy-elem {
  background: #2a2422; border-color: #3a2f2a; color: #FF9A65;
}

.onf-fej {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .875rem;
}
.onf-leiras { font-size: .875rem; line-height: 1.65; color: #78716c; margin: 0; max-width: 34rem; }
/* „2/12 kitöltve". A szó nélkül ugyanolyan törtnek látszott, mint a lépés
   fejlécében a „1 / 12", és a kettő mást jelent: az egyik azt, hányra
   válaszoltál, a másik azt, hányadiknál jársz. */
.onf-szamlalo-szo { margin-left: .3125rem; font-weight: 600; opacity: .75; }
/* Keskeny kijelzőn a szó nem fér el a cím mellett; ott a szám marad. */
@media (max-width: 420px) { .onf-szamlalo-szo { display: none; } }

.onf-szamlalo {
  flex-shrink: 0; font: 700 .8125rem/1 var(--font-display);
  color: #B83B00; background: #FFF4EE;
  border: 1px solid rgba(255, 209, 184, .9);
  padding: .375rem .625rem; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}

.onf-sav {
  height: .3125rem; border-radius: 99px; background: #F5EDE4;
  overflow: hidden; margin-bottom: 1.5rem;
}
.onf-sav span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #FF5C14);
  transition: width .35s ease;
}

.onf-lepes { display: none; }
.onf-lepes--aktiv { display: block; animation: onfBe .26s ease both; }
@keyframes onfBe { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onf-lepes--aktiv { animation: none; } }

.onf-lepes-fej { display: flex; align-items: baseline; gap: .375rem; margin-bottom: .875rem; }
.onf-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 99px;
  font: 700 .875rem/1 var(--font-display); color: #fff;
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
}
.onf-osszes { font-size: .8125rem; color: #a8a29e; font-variant-numeric: tabular-nums; }

.onf-kerdes {
  font: 600 1.125rem/1.5 var(--font-display); color: #292524; margin: 0 0 .375rem;
}
@media (min-width: 768px) { .onf-kerdes { font-size: 1.25rem; } }

.onf-segitseg { font-size: .875rem; line-height: 1.6; color: #a8a29e; margin: 0 0 1rem; }

.onf-mezo {
  width: 100%; resize: vertical; min-height: 8rem;
  font-size: .9375rem; line-height: 1.7;
}

.onf-lab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .875rem;
}
.onf-allapot { font-size: 12px; color: #a8a29e; min-height: 1em; }
.onf-gombok { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---- Összegzés ---- */

.onf-osszegzes-lista { display: flex; flex-direction: column; gap: 1rem; }
.onf-osszegzes-elem {
  border-left: 3px solid #FFD1B8; padding-left: 1rem;
  page-break-inside: avoid;
}
.onf-osszegzes-kerdes {
  font: 600 .9375rem/1.5 var(--font-display); color: #B83B00; margin-bottom: .375rem;
}
/* A saját szöveg sortöréseit meg kell tartani - enélkül egy bekezdésbe
   folyna össze minden, amit a tag külön sorba írt. */
.onf-osszegzes-valasz {
  white-space: pre-wrap; font-size: .9375rem; line-height: 1.7; color: #57534e;
}
.onf-osszegzes-valasz:empty::before {
  content: '- erre még nem válaszoltál -';
  color: #c4bdb5; font-style: italic;
}

.onf-zaro {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid #f0ebe4;
}
.onf-zaro p { font-size: .875rem; line-height: 1.7; color: #78716c; margin: 0 0 1rem; }
/* Az első sor felvezetés, a következő bekezdés hozzá tartozik: kisebb köz,
   hogy egy gondolatnak látsszon, ne két különállónak. */
/* Az összegzés blokkjának fejléce: a cím és a másolás gomb egy sorban. */
.onf-osszegzes-fej {
  display: flex; align-items: baseline; justify-content: space-between; gap: .875rem;
}
/* A gomb halkabb, mint az írásnál: itt olvasni jött a tag, nem dolgozni. */
.onf-jk-masol--halk { border-color: transparent; }
.onf-jk-masol--halk:hover:not(:disabled) { border-color: #e7e5e4; }

/* Papíron a gomb nem kell: a kinyomtatott lapon nincs mit kattintani. */
@media print { .onf-jk-masol { display: none !important; } }

/* A gombnevek a leírásban. Nem kiemelés, hanem hivatkozás: a tag ezeket
   keresi majd a lap alján, ezért kell, hogy szó szerint felismerje őket. */
.onf-gombnev { font-weight: 600; color: #44403c; }
html[data-tema="sotet"] .onf-gombnev { color: #e7e5e4; }

.onf-zaro p:first-child { margin-bottom: .5rem; }
/* A kiemelés sötétebb, különben a halk szürkében el sem különülne. */
.onf-zaro strong { color: #292524; font-weight: 600; }
html[data-tema="sotet"] .onf-zaro strong { color: #f5f5f4; }

/* Nyomtatásnál csak az összegzés kell: a fülek, a kérdés-lépcsők és a
   portál kerete nem. */
/* A havi téma nyomtatása a fájl végén, `body[data-nyomtat]` alapján. */

html[data-tema="sotet"] .onf-kerdes { color: #f5f5f4; }
html[data-tema="sotet"] .onf-osszegzes-valasz { color: #d6d3d1; }

/* ---- Napi pipa a havi gyakorlathoz ---- */

.hts-napok-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 .75rem;
}
.hts-napok-jelzok { display: flex; gap: .375rem; flex-wrap: wrap; }
.hts-jelvny--sorozat {
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  color: #fff; border-color: transparent;
}

.hts-napok-apro { font-size: 12px; color: #a8a29e; margin: .875rem 0 0; line-height: 1.6; }

/* A pipa MAGA a sorszám: nincs külön jelölőnégyzet, ami elvinné a helyet.
   Alap állapotban a szám látszik, kipipálva a pipa veszi át. */
.hts-nap-pipa {
  position: relative; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 99px;
  background: #F5EDE4; color: #a8a29e;
  border: 1.5px solid transparent;
  font: 700 12px/1 var(--font-display);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.hts-nap-pipa:hover { border-color: rgba(255, 122, 61, .5); transform: scale(1.06); }
.hts-nap-pipa:focus-visible { outline: 2px solid #FF7A3D; outline-offset: 2px; }
.hts-nap-pipa:disabled { opacity: .6; cursor: wait; }

.hts-nap-pipajel { display: none; }

.hts-nap-elem--kesz .hts-nap-pipa {
  background: #16a34a; color: #fff; border-color: transparent;
}
.hts-nap-elem--kesz .hts-nap-szamjegy { display: none; }
.hts-nap-elem--kesz .hts-nap-pipajel { display: block; }

/* A kipipált nap nem halványul el: pont az a jutalom, hogy LÁTSZIK. A
   szöveg viszont visszahúzódik, mert azt már elolvasta. */
.hts-nap-elem--kesz {
  background: #F6FBF7; border-color: rgba(22, 163, 74, .25);
}
.hts-nap-elem--kesz .hts-nap-szoveg { color: #78716c; }

/* A mai nap kipipálva is marad narancs keretes: ott áll, ahol tart. */
.hts-nap-elem--mai.hts-nap-elem--kesz {
  border-color: rgba(255, 122, 61, .45);
  background: linear-gradient(135deg, #F6FBF7 0%, #FFF8F0 100%);
}

/* A mögötte lévő, de kipipált nap nem halvány - az elvégzett munka
   nem lehet halványabb, mint az elmulasztott. */
.hts-nap-elem--mogott.hts-nap-elem--kesz { opacity: 1; }

html[data-tema="sotet"] .hts-nap-elem--kesz { background: #1f2b22; border-color: rgba(22, 163, 74, .3); }
html[data-tema="sotet"] .hts-nap-pipa { background: #3a3330; }

/* ---- Hónap végi visszatekintés ---- */

.vt-fut {
  font-size: .8125rem; color: #B83B00; background: #FFF4EE;
  border: 1px solid rgba(255, 209, 184, .9); border-radius: .625rem;
  padding: .625rem .875rem; margin: 0 0 1.25rem;
}

.vt-szamok {
  display: grid; gap: .625rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .vt-szamok { grid-template-columns: repeat(5, 1fr); } }

.vt-szam {
  text-align: center; padding: .875rem .5rem;
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 70%);
  border: 1px solid rgba(255, 209, 184, .8); border-radius: .875rem;
}
.vt-szam-ertek {
  display: block; font: 800 1.375rem/1 var(--font-display); color: #292524;
  font-variant-numeric: tabular-nums; margin-bottom: .25rem;
}
.vt-szam-per { font-size: .875rem; font-weight: 500; color: #a8a29e; }
.vt-szam-cimke { font-size: 11px; color: #78716c; line-height: 1.3; }

/* A visszatérő szó. Nem elemzés, csak tükör - a jelentését a tag adja meg,
   nem mi. Ezért nincs mellette értelmezés. */
.vt-szo {
  background: linear-gradient(160deg, #FFF4EE 0%, #fff 70%);
  border-left: 3px solid #FF7A3D;
  border-radius: .375rem 1rem 1rem .375rem;
  padding: 1.125rem 1.25rem; margin-bottom: 1.5rem; text-align: center;
}
.vt-szo-cimke {
  display: block; font: 600 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
}
.vt-szo-ertek {
  display: block; font: 800 1.75rem/1.2 var(--font-display);
  color: #292524; margin: .375rem 0 .25rem;
}
.vt-szo-db { font-size: 12px; color: #a8a29e; }

.vt-naplok { display: flex; flex-direction: column; gap: 1rem; }
.vt-naplo { border-left: 3px solid #FFD1B8; padding-left: 1rem; page-break-inside: avoid; }
.vt-naplo-fej { margin-bottom: .375rem; }
.vt-naplo-datum {
  font: 700 .8125rem/1 var(--font-display); color: #B83B00;
  font-variant-numeric: tabular-nums; margin-right: .5rem;
}
.vt-naplo-kerdes { font-size: 12px; font-style: italic; color: #a8a29e; }
/* A tag sortöréseit meg kell tartani. */
.vt-naplo-szoveg {
  white-space: pre-wrap; font-size: .9375rem; line-height: 1.7; color: #57534e; margin: 0;
}

.vt-ures { font-size: .9375rem; line-height: 1.7; color: #a8a29e; }

/* A hónap összegzése. Elválasztó vonal fölötte: eddig a rendszer mutatott
   valamit, innentől a tag mond valamit. Alatta a saját naplólapjai jönnek,
   ezért kell alul is levegő. */
.vt-osszegzes {
  margin: 1.75rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0ebe4;
}
.vt-osszegzes .hts-alcim { margin-bottom: .35rem; }
.vt-osszegzes-kerdes {
  font: 600 italic 1.0625rem/1.55 var(--font-display);
  color: #44403c; margin: 0 0 .9rem; text-wrap: pretty;
}

.vt-zaro { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #f0ebe4; }
.vt-zaro p { font-size: .875rem; line-height: 1.7; color: #78716c; margin: 0 0 1rem; }

html[data-tema="sotet"] .vt-szam,
html[data-tema="sotet"] .vt-szo { background: linear-gradient(160deg, #322722 0%, #292524 70%); border-color: rgba(255,154,101,.2); }
html[data-tema="sotet"] .vt-szam-ertek,
html[data-tema="sotet"] .vt-szo-ertek { color: #f5f5f4; }
html[data-tema="sotet"] .vt-naplo-szoveg { color: #d6d3d1; }

/* ---- Kérdés–válasz a havi témához ---- */

.kv-urlap-doboz {
  background: linear-gradient(160deg, #FFF8F0 0%, #fff 65%);
  border: 1px solid rgba(255, 209, 184, .8);
  border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.75rem;
}
.kv-urlap-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.kv-leiras { font-size: .875rem; line-height: 1.65; color: #78716c; margin: 0 0 1rem; }

.kv-urlap { display: flex; flex-direction: column; gap: .75rem; }
.kv-urlap textarea { font-size: .9375rem; }
.kv-urlap-lab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.kv-nevtelen {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: #78716c; cursor: pointer;
}

.kv-siker {
  font-size: .8125rem; color: #166534; background: #dcfce7;
  border: 1px solid #bbf7d0; border-radius: .5rem;
  padding: .625rem .875rem; margin: 0 0 .875rem; line-height: 1.6;
}
.kv-hiba {
  font-size: .8125rem; color: #b91c1c; background: #fee2e2;
  border: 1px solid #fecaca; border-radius: .5rem;
  padding: .625rem .875rem; margin: 0 0 .875rem; line-height: 1.6;
}
.kv-ures { font-size: .9375rem; line-height: 1.7; color: #a8a29e; margin: 0; }

.kv-lista { display: flex; flex-direction: column; gap: .875rem; }

.kv-elem {
  background: #fff; border: 1px solid #f0ebe4;
  border-radius: .875rem; padding: 1rem 1.125rem;
}
.kv-elem--valaszolt { border-color: rgba(255, 122, 61, .3); }
.kv-elem--masok { background: #FFFDFA; }

.kv-szerzo {
  font: 600 11px/1 var(--font-display); letter-spacing: .06em;
  text-transform: uppercase; color: #a8a29e; margin-bottom: .375rem;
}
.kv-kerdes {
  font: 600 .9375rem/1.6 var(--font-display); color: #292524; margin: 0;
}

/* A válasz beljebb és más háttéren: a kérdés és a válasz két hang, és a
   szemnek is látnia kell, hol vált. */
.kv-valasz {
  margin-top: .875rem; padding: .875rem 1rem;
  background: linear-gradient(160deg, #FFF4EE 0%, #fff 75%);
  border-left: 3px solid #FF7A3D;
  border-radius: .375rem .75rem .75rem .375rem;
}
.kv-valasz-cimke {
  display: block; font: 600 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
  margin-bottom: .5rem;
}
.kv-valasz p { margin: 0; font-size: .9375rem; line-height: 1.7; color: #44403c; white-space: pre-wrap; }
.kv-elo-jelzes { font-style: italic; color: #78716c !important; }

.kv-var {
  display: inline-block; margin-top: .625rem;
  font-size: 11.5px; font-weight: 600; color: #a8a29e;
  background: #F7F1EA; padding: .1875rem .5rem; border-radius: 99px;
}

html[data-tema="sotet"] .kv-urlap-doboz,
html[data-tema="sotet"] .kv-valasz { background: linear-gradient(160deg, #322722 0%, #292524 70%); border-color: rgba(255,154,101,.2); }
html[data-tema="sotet"] .kv-elem { background: #292524; border-color: rgba(255,154,101,.14); }
html[data-tema="sotet"] .kv-kerdes { color: #f5f5f4; }
html[data-tema="sotet"] .kv-valasz p { color: #d6d3d1; }

/* ---- Hangdiktálás: „Írom" / „Mondom" ---- */

.diktal-sav {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .625rem;
}
.diktal-mod {
  font: 600 12px/1 var(--font-display); color: #B83B00;
  background: #FFF4EE; border: 1px solid rgba(255, 209, 184, .9);
  padding: .375rem .6875rem; border-radius: 99px;
}
.diktal-vagy { font-size: 11.5px; color: #c4bdb5; }

.diktal-gomb {
  display: inline-flex; align-items: center; gap: .375rem;
  font: 600 12px/1 var(--font-display); color: #78716c;
  background: #fff; border: 1px solid rgba(224, 72, 0, .14);
  padding: .375rem .6875rem; border-radius: 99px; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.diktal-gomb:hover { border-color: rgba(255, 122, 61, .45); color: #B83B00; }
.diktal-gomb:focus-visible { outline: 2px solid #FF7A3D; outline-offset: 2px; }

/* Felvétel közben: piros, és lüktet - hogy senki ne felejtse bekapcsolva. */
.diktal-gomb--aktiv {
  background: #dc2626; border-color: #dc2626; color: #fff;
  animation: diktalLuktet 1.6s ease-in-out infinite;
}
@keyframes diktalLuktet {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
  50% { box-shadow: 0 0 0 .375rem rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .diktal-gomb--aktiv { animation: none; } }

.diktal-allapot { font-size: 11.5px; color: #a8a29e; }

.diktal-sugo {
  font-size: 11.5px; line-height: 1.6; color: #a8a29e;
  margin: -.25rem 0 .625rem;
}

html[data-tema="sotet"] .diktal-gomb { background: #292524; border-color: rgba(255, 154, 101, .16); }

/* ============================================================================
   A hónap négy szakasza - haladássáv

   Ami mögöttünk van, az pipát kap; ami most fut, az kiemelve; ami még nem
   jött el, az halvány. A halványítás NEM tiltás: a tag bármikor
   előreugorhat, csak lássa, hol tart a közös menet.
   ============================================================================ */

.szsav {
  display: grid; gap: .5rem; margin-bottom: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .szsav { grid-template-columns: repeat(4, 1fr); gap: .625rem; } }

.szsav-elem {
  position: relative;
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem .875rem;
  background: #fff; border: 1px solid rgba(224, 72, 0, .1);
  border-radius: .875rem;
  transition: border-color .18s ease, transform .18s ease, opacity .18s ease;
}
a.szsav-elem:hover { border-color: rgba(255, 122, 61, .45); transform: translateY(-1px); }
a.szsav-elem:focus-visible { outline: 2px solid #FF7A3D; outline-offset: 2px; }

/* Összekötő vonal a szakaszok között - a szem így látja, hogy ez egy menet,
   nem négy különálló doboz. Csak asztali nézetben, ahol egy sorban állnak. */
@media (min-width: 700px) {
  .szsav-elem:not(:last-child)::after {
    content: ''; position: absolute; right: -.625rem; top: 50%;
    width: .625rem; height: 2px; background: #F0EBE4;
  }
  .szsav-elem--mogott:not(:last-child)::after { background: #FFD1B8; }
}

.szsav-jel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: 99px; flex-shrink: 0;
  font: 700 12px/1 var(--font-display);
  background: #F5EDE4; color: #a8a29e;
}

.szsav-szoveg { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.szsav-cim { font: 600 .8125rem/1.3 var(--font-display); color: #292524; }
.szsav-nap { font-size: 11px; color: #a8a29e; font-variant-numeric: tabular-nums; }

/* Mögöttünk: kész, de nem halvány - az elvégzett szakasz nem lehet
   halványabb, mint az, ami még el sem jött. */
.szsav-elem--mogott { border-color: rgba(22, 163, 74, .25); background: #F6FBF7; }
.szsav-elem--mogott .szsav-jel { background: #16a34a; color: #fff; }

/* Most itt: ez a hangsúly. */
.szsav-elem--aktiv {
  border-color: rgba(255, 122, 61, .55);
  background: linear-gradient(135deg, #FFF8F0 0%, #fff 65%);
  box-shadow: 0 6px 22px rgba(255, 122, 61, .16);
}
.szsav-elem--aktiv .szsav-jel {
  background: linear-gradient(160deg, #FF7A3D, #FF5C14); color: #fff;
}
.szsav-most {
  position: absolute; top: -.5rem; right: .625rem;
  font: 700 9.5px/1 var(--font-display); letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(160deg, #FF7A3D, #FF5C14);
  padding: .1875rem .4375rem; border-radius: 99px;
}

/* Előttünk: halvány, de olvasható. Nem elrejtve - a tag lássa, mi vár rá. */
.szsav-elem--elott { opacity: .5; background: #FDFCFA; border-style: dashed; }

.szsav-leiras {
  font-size: .875rem; line-height: 1.65; color: #78716c;
  margin: 0 0 1.25rem; padding-left: .875rem;
  border-left: 3px solid #FF7A3D;
}

html[data-tema="sotet"] .szsav-elem { background: #292524; border-color: rgba(255, 154, 101, .14); }
html[data-tema="sotet"] .szsav-elem--mogott { background: #1f2b22; }
html[data-tema="sotet"] .szsav-elem--aktiv { background: linear-gradient(135deg, #322722 0%, #292524 65%); }
html[data-tema="sotet"] .szsav-cim { color: #f5f5f4; }

/* ============================================================
   ÉRTESÍTÉSEK - a portál harangja és az „Új” jelzés
   ============================================================ */

/* ---- „Új” a Kérdés–válasz fülön ----
   Nem szám, hanem szó: nem az számít, hány válasz jött, hanem hogy jött.
   A lüktetés két másodpercig fut, aztán megáll - a folyamatos villogás
   pár perc után zavaró lenne egy olyan oldalon, ahol írni akar az ember. */
.hts-ful-uj {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1;
  text-transform: uppercase;
  background: #E04800; color: #fff;
  padding: .1875rem .375rem; border-radius: 99px;
  box-shadow: 0 0 0 0 rgba(224, 72, 0, .5);
  animation: hts-uj-lukte 1.6s ease-out 2;
}
.hts-ful--aktiv .hts-ful-uj { background: #fff; color: #E04800; box-shadow: none; animation: none; }

@keyframes hts-uj-lukte {
  0%   { box-shadow: 0 0 0 0 rgba(224, 72, 0, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(224, 72, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 72, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hts-ful-uj { animation: none; }
}

/* ---- A harang ---- */
.ert-gomb {
  position: relative;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .5rem; color: #78716c;
  transition: background-color .15s, color .15s;
}
.ert-gomb:hover { background: #f5f5f4; color: #292524; }

/* A számláló a harang sarkán. Kilencnél megáll: a pontos szám nem
   segít, a hely viszont elfogy. */
.ert-pont {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  background: #E04800; color: #fff;
  border: 2px solid #fff; border-radius: 99px;
}

.ert-lap {
  position: absolute; right: 0; top: 100%; margin-top: .5rem;
  width: 20.5rem; max-width: calc(100vw - 2rem);
  background: #fff; border: 1px solid #f5f5f4; border-radius: 1rem;
  box-shadow: 0 10px 40px -10px rgba(41, 37, 36, .22);
  overflow: hidden; z-index: 30;
}

.ert-fej {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem .875rem; border-bottom: 1px solid #f5f5f4;
}
.ert-cim { font-weight: 600; font-size: .8125rem; color: #292524; }
.ert-mind {
  font-size: .6875rem; font-weight: 600; color: #E04800;
  padding: .1875rem .375rem; border-radius: .375rem;
}
.ert-mind:hover { background: rgba(224, 72, 0, .08); }

.ert-elem {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .6875rem .875rem;
  border-bottom: 1px solid #fafaf9;
  transition: background-color .15s;
}
.ert-elem:last-child { border-bottom: 0; }
.ert-elem:hover { background: #fafaf9; }

/* Az olvasatlan bal oldalán narancs csík. Nem külön „olvasatlan” felirat:
   a lista így egy pillantással átfutható. */
.ert-elem--uj { background: rgba(255, 122, 61, .05); box-shadow: inset 3px 0 0 #FF7A3D; }
.ert-elem--uj:hover { background: rgba(255, 122, 61, .09); }

.ert-ikon {
  flex: none; width: 1.75rem; height: 1.75rem; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: .5rem;
  background: #f5f5f4; color: #57534e;
}
.ert-ikon--valasz   { background: rgba(224, 72, 0, .1);   color: #B83B00; }
.ert-ikon--sorsolas { background: rgba(202, 138, 4, .12); color: #A16207; }
.ert-ikon--workshop { background: rgba(13, 148, 136, .1); color: #0F766E; }
.ert-ikon--elo      { background: rgba(79, 70, 229, .1);  color: #4338CA; }
.ert-ikon--podcast  { background: rgba(219, 39, 119, .1); color: #BE185D; }

.ert-szoveg { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.ert-elem-cim {
  font-size: .8125rem; font-weight: 600; color: #292524; line-height: 1.35;
}
.ert-elem-leiras {
  font-size: .75rem; color: #78716c; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.ert-elem-ido { font-size: .6875rem; color: #a8a29e; margin-top: .0625rem; }

.ert-ures { padding: 1rem .875rem; font-size: .8125rem; color: #78716c; line-height: 1.55; }

/* ---- Sötét téma ---- */
html[data-tema="sotet"] .ert-lap { background: #1c1917; border-color: #292524; }
html[data-tema="sotet"] .ert-fej { border-bottom-color: #292524; }
html[data-tema="sotet"] .ert-cim,
html[data-tema="sotet"] .ert-elem-cim { color: #f5f5f4; }
html[data-tema="sotet"] .ert-elem { border-bottom-color: #231f1d; }
html[data-tema="sotet"] .ert-elem:hover { background: #231f1d; }
html[data-tema="sotet"] .ert-elem--uj { background: rgba(255, 122, 61, .09); }
html[data-tema="sotet"] .ert-ikon { background: #292524; color: #d6d3d1; }
html[data-tema="sotet"] .ert-gomb:hover { background: #292524; color: #f5f5f4; }
html[data-tema="sotet"] .ert-pont { border-color: #1c1917; }

/* ============================================================
   FIÓKOM - profil, biztonság, adatok
   ============================================================ */

/* ---- Avatar ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; object-fit: cover; flex: none;
  font-family: var(--font-display, inherit); font-weight: 700; color: #fff;
  line-height: 1;
}
.avatar--kicsi { width: 2rem; height: 2rem; font-size: .75rem; }
.avatar--nagy  { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }

/* ---- Oldalsáv: én ---- */
/* ---- Téma-szűrősáv a portálon ---- */
/* A nyilvános oldalon Tailwind-osztályokból áll ugyanez; itt saját osztály,
   mert a portál sötét oldalsávos kerete más alapon ül, és a csipeknek is
   követniük kell a világos/sötét témát. */
.portal-temasav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.5rem;
}
.portal-tema {
  display: inline-flex; align-items: center;
  padding: .4375rem .875rem; border-radius: 9999px;
  background: #fff; border: 1px solid #e7e5e4;
  font-size: .8125rem; font-weight: 500; color: #57534e;
  transition: border-color .15s, background .15s, color .15s;
}
.portal-tema:hover { border-color: var(--accent-400); color: #292524; }
.portal-tema:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.portal-tema--aktiv {
  background: var(--accent-500); border-color: var(--accent-500); color: #fff;
  box-shadow: 0 4px 14px rgba(255, 122, 61, .28);
}
.portal-tema--aktiv:hover { color: #fff; }

html[data-tema="sotet"] .portal-tema { background: #1c1917; border-color: #292524; color: #a8a29e; }
html[data-tema="sotet"] .portal-tema:hover { color: #f5f5f4; }
html[data-tema="sotet"] .portal-tema--aktiv { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }

/* Lejárt elem a portál listáiban. Nem rejtjük el - abból látszik, hogy
   tényleg futnak alkalmak -, de hátrébb lép a sorban és halványabb.
   Hover-re visszaerősödik: aki rákattintana, olvasni is tudja, mire. */
.portal-lejart { opacity: .55; transition: opacity .2s ease; }
.portal-lejart:hover, .portal-lejart:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .portal-tema, .portal-lejart { transition: none; }
}

.portal-en {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: .75rem;
  transition: background-color .15s;
}
.portal-en:hover { background: rgba(255, 255, 255, .06); }
.portal-en-nev {
  display: block; font-size: .8125rem; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-en-sor { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; }
.portal-szint { font-size: .6875rem; font-weight: 600; color: #FFB088; }
.portal-pont {
  font-size: .625rem; font-weight: 700; color: #a8a29e;
  background: rgba(255, 255, 255, .07); padding: .0625rem .3125rem; border-radius: 99px;
}
.portal-sorozat {
  display: inline-flex; align-items: center; gap: .125rem;
  font-size: .625rem; font-weight: 700; color: #FF7A3D;
}
.portal-szintsav {
  display: block; height: 2px; margin-top: .375rem; border-radius: 99px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
.portal-szintsav > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #FFB088);
}

/* ---- Fiókom rács ---- */
.fiok-racs { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) {
  .fiok-racs { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; }
}
.fiok-fo, .fiok-oldal { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (min-width: 1024px) {
  .fiok-oldal { position: sticky; top: calc(var(--portal-fejlec-magassag) + 1rem); }
}

.fiok-doboz { padding: 1.25rem 1.375rem; }
.fiok-cim {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: var(--font-display, inherit); font-weight: 600;
  font-size: 1rem; color: #292524; margin-bottom: .375rem;
}
.fiok-cim-szam {
  font-size: .6875rem; font-weight: 700;
  background: rgba(224, 72, 0, .1); color: #B83B00;
  padding: .125rem .375rem; border-radius: 99px;
}
.fiok-leiras { font-size: .8125rem; color: #78716c; line-height: 1.6; margin-bottom: 1rem; }
.fiok-apro { font-size: .75rem; color: #a8a29e; line-height: 1.55; }
.fiok-apro a { color: #E04800; text-decoration: underline; }

.fiok-uzenet {
  background: rgba(13, 148, 136, .08); color: #0F766E;
  border: 1px solid rgba(13, 148, 136, .18);
  padding: .75rem 1rem; border-radius: .75rem; font-size: .8125rem;
}
.fiok-uzenet--hiba {
  background: rgba(220, 38, 38, .07); color: #B91C1C; border-color: rgba(220, 38, 38, .18);
}

/* ---- Űrlapok ---- */
.fiok-urlap { display: flex; flex-direction: column; gap: .875rem; }
.fiok-mezo { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }
.fiok-mezo > label { font-size: .75rem; font-weight: 600; color: #57534e; }
.fiok-mezo input {
  width: 100%; padding: .5625rem .75rem; font-size: .875rem;
  background: #fafaf9; border: 1px solid #e7e5e4; border-radius: .625rem;
  color: #292524; transition: border-color .15s, background-color .15s;
}
.fiok-mezo input:focus {
  outline: none; background: #fff; border-color: #FF7A3D;
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .12);
}
.fiok-mezo-par { display: grid; gap: .875rem; }
@media (min-width: 640px) { .fiok-mezo-par { grid-template-columns: 1fr 1fr; } }

.fiok-hiba { font-size: .75rem; color: #DC2626; }
.fiok-gombsor { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.fiok-link-gomb {
  font-size: .8125rem; color: #78716c; text-decoration: underline;
  text-underline-offset: 2px; transition: color .15s;
}
.fiok-link-gomb:hover { color: #DC2626; }

/* ---- Profilkép ---- */
.fiok-kep-sor { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fiok-kep-elonezet { flex: none; }
.fiok-kep-vezerlo { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.fiok-kep-vezerlo label { cursor: pointer; align-self: flex-start; }

/* ---- Kapcsoló ---- */
.fiok-kapcsolo { display: flex; align-items: flex-start; gap: .625rem; cursor: pointer; }
.fiok-kapcsolo strong { display: block; font-size: .8125rem; font-weight: 600; color: #292524; }
.fiok-kapcsolo .fiok-apro { display: block; margin-top: .125rem; }

/* ---- Tagság állapot ---- */
.fiok-allapot {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; font-weight: 600;
  padding: .25rem .625rem; border-radius: 99px; margin-bottom: .625rem;
}
.fiok-allapot--aktiv { background: rgba(22, 163, 74, .1); color: #15803D; }

/* ---- Veszélyzóna ----
   Halvány piros keret, nem tömör piros doboz: a törlés lehetősége legyen
   megtalálható, de ne kiabáljon rá arra, aki csak a nevét jött átírni. */
.fiok-doboz--veszely { border-color: rgba(220, 38, 38, .22); }
.fiok-doboz--veszely .fiok-cim { color: #B91C1C; }

.fiok-veszely-nyilo { margin-top: 1rem; }
.fiok-veszely-nyilo > summary {
  cursor: pointer; font-size: .8125rem; font-weight: 600; color: #B91C1C;
  list-style: none; display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem; border-radius: .5rem;
  border: 1px solid rgba(220, 38, 38, .25); transition: background-color .15s;
}
.fiok-veszely-nyilo > summary::-webkit-details-marker { display: none; }
.fiok-veszely-nyilo > summary:hover { background: rgba(220, 38, 38, .06); }
.fiok-veszely-nyilo[open] > summary { margin-bottom: 1rem; }

.btn-veszely {
  background: #DC2626; color: #fff; border: 1px solid #DC2626;
  align-self: flex-start;
}
.btn-veszely:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }

.fiok-kilepes { padding-top: .25rem; }
.fiok-kilepes button { font-size: .8125rem; color: #78716c; }
.fiok-kilepes button:hover { color: #E04800; }

/* ---- Jobb hasáb: szint ---- */
.fiok-szint { padding: 1.25rem 1.375rem; }
.fiok-szint-fej { display: flex; align-items: center; gap: .875rem; margin-bottom: .875rem; }
.fiok-szint-nev {
  font-family: var(--font-display, inherit); font-weight: 700;
  font-size: 1.0625rem; color: #292524;
}
.fiok-szint-pont { font-size: .8125rem; color: #E04800; font-weight: 600; }
.fiok-szandek {
  font-size: .8125rem; font-style: italic; color: #57534e; line-height: 1.6;
  padding: .625rem .75rem; margin-bottom: .875rem;
  background: rgba(255, 122, 61, .06); border-left: 2px solid #FF7A3D;
  border-radius: 0 .5rem .5rem 0;
}
.fiok-szintsav {
  height: 5px; border-radius: 99px; background: #f5f5f4;
  overflow: hidden; margin-bottom: .5rem;
}
.fiok-szintsav > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #E04800);
}

/* ---- Számok ---- */
.fiok-szamok { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; }
.fiok-szam {
  display: flex; flex-direction: column; gap: .0625rem;
  padding: .625rem .75rem; background: #fafaf9; border-radius: .625rem;
}
.fiok-szam-ertek {
  font-family: var(--font-display, inherit); font-weight: 700;
  font-size: 1.25rem; color: #292524; line-height: 1.1;
}
.fiok-szam-cimke { font-size: .6875rem; color: #a8a29e; }

.fiok-sorozat {
  display: flex; align-items: center; gap: .375rem;
  font-size: .8125rem; color: #B83B00; margin-top: .75rem;
}

/* ---- Jelvények ---- */
.fiok-jelvenyek { display: flex; flex-wrap: wrap; gap: .375rem; }
.fiok-jelveny {
  display: inline-flex; align-items: center; gap: .3125rem;
  font-size: .6875rem; font-weight: 600; color: #B83B00;
  background: rgba(224, 72, 0, .08); padding: .25rem .5rem; border-radius: 99px;
}
.fiok-tovabb {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .875rem;
  font-size: .75rem; font-weight: 600; color: #E04800;
}
.fiok-tovabb:hover { text-decoration: underline; }

.fiok-adatsor { font-size: .8125rem; color: #292524; margin-bottom: .3125rem; }
.fiok-adatsor > span { color: #a8a29e; display: inline-block; min-width: 5.5rem; }

/* ---- Sötét téma ---- */
html[data-tema="sotet"] .fiok-cim,
html[data-tema="sotet"] .fiok-szint-nev,
html[data-tema="sotet"] .fiok-szam-ertek,
html[data-tema="sotet"] .fiok-adatsor,
html[data-tema="sotet"] .fiok-kapcsolo strong { color: #f5f5f4; }
html[data-tema="sotet"] .fiok-mezo input { background: #1c1917; border-color: #292524; color: #f5f5f4; }
html[data-tema="sotet"] .fiok-mezo input:focus { background: #231f1d; }
html[data-tema="sotet"] .fiok-mezo > label { color: #d6d3d1; }
html[data-tema="sotet"] .fiok-szam { background: #231f1d; }
html[data-tema="sotet"] .fiok-szintsav { background: #292524; }
html[data-tema="sotet"] .fiok-szandek { color: #d6d3d1; background: rgba(255, 122, 61, .1); }

/* ============================================================
   NAPI PIPA - hogy látszódjon: ide kattintani kell
   ============================================================ */

.hts-napok-tipp {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; color: #a8a29e; margin: -.25rem 0 .625rem;
}

/* A be nem pipált kör szaggatott gyűrűt kap. A tömör szürke korong
   sorszámnak látszott, nem üres helynek - a szaggatott perem az, ami
   „ide még kerül valami"-t mond. */
.hts-nap-elem--pipalhato .hts-nap-pipa {
  border-style: dashed;
  border-color: #d6d3d1;
  background: transparent;
  color: #a8a29e;
}

.hts-nap-elem--pipalhato { cursor: pointer; }
.hts-nap-elem--pipalhato:hover {
  border-color: rgba(255, 122, 61, .45);
  background: rgba(255, 122, 61, .04);
}
.hts-nap-elem--pipalhato:hover .hts-nap-pipa {
  border-color: #FF7A3D; border-style: solid;
  background: rgba(255, 122, 61, .1); color: #E04800;
}

/* Fölé húzva előbukkan a pipa a szám helyén: megmutatja, mi történne. */
.hts-nap-elem--pipalhato:hover:not(.hts-nap-elem--kesz) .hts-nap-szamjegy { display: none; }
.hts-nap-elem--pipalhato:hover:not(.hts-nap-elem--kesz) .hts-nap-pipajel { display: block; opacity: .55; }

/* Bepipálva visszatér a tömör zöld - ott már nincs mit hívogatni. */
.hts-nap-elem--kesz.hts-nap-elem--pipalhato .hts-nap-pipa {
  border-style: solid; background: #16a34a; color: #fff; border-color: transparent;
}
.hts-nap-elem--kesz.hts-nap-elem--pipalhato:hover .hts-nap-pipa {
  background: #15803d; border-color: transparent;
}
.hts-nap-elem--kesz.hts-nap-elem--pipalhato:hover { background: rgba(22, 163, 74, .06); }
.hts-nap-elem--kesz .hts-nap-pipajel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hts-nap-pipa:hover { transform: none; }
}

html[data-tema="sotet"] .hts-nap-elem--pipalhato .hts-nap-pipa { border-color: #44403c; color: #78716c; }
html[data-tema="sotet"] .hts-nap-elem--pipalhato:hover { background: rgba(255, 122, 61, .07); }

/* ============================================================
   HAVI TÉMA - két hasáb
   ============================================================ */

.hts-racs { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) {
  .hts-racs { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.5rem; }
}
.hts-fo { min-width: 0; }
.hts-oldal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 1100px) {
  .hts-oldal { position: sticky; top: calc(var(--portal-fejlec-magassag) + 1rem); }
}

.hts-oldal-doboz {
  background: #fff; border: 1px solid #f5f5f4; border-radius: 1rem;
  padding: 1rem 1.125rem;
}
.hts-oldal-cim {
  font-family: var(--font-display, inherit); font-weight: 600;
  font-size: .875rem; color: #292524; margin-bottom: .625rem;
}

/* Hol tartok: a nap és a pipák egy helyen, mindig látható módon. */
.hts-allas-nap {
  font-family: var(--font-display, inherit); font-weight: 800;
  font-size: 1.75rem; color: #E04800; line-height: 1;
}
.hts-allas-nap span { font-size: .875rem; color: #a8a29e; font-weight: 600; }
.hts-allas-cimke { font-size: .75rem; color: #78716c; margin-bottom: .75rem; }

.hts-allas-sav {
  height: 6px; border-radius: 99px; background: #f5f5f4;
  overflow: hidden; margin-bottom: .5rem;
}
.hts-allas-sav > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #E04800);
}

.hts-allas-sorok { display: flex; flex-direction: column; gap: .375rem; margin-top: .75rem; }
.hts-allas-sor {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .75rem; color: #78716c;
}
.hts-allas-sor strong { color: #292524; font-weight: 700; }

/* Ugrás a fülekre az oldalsávból. */
.hts-oldal-ugrasok { display: flex; flex-direction: column; gap: .125rem; }
.hts-oldal-ugras {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4375rem .5rem; border-radius: .5rem;
  font-size: .8125rem; color: #57534e; transition: background-color .15s, color .15s;
}
.hts-oldal-ugras:hover { background: #fafaf9; color: #E04800; }
.hts-oldal-ugras-jel {
  font-size: .625rem; font-weight: 700; color: #a8a29e;
  background: #f5f5f4; padding: .0625rem .3125rem; border-radius: 99px;
}
.hts-oldal-ugras-uj {
  font-size: .5625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: #E04800; color: #fff; padding: .0625rem .3125rem; border-radius: 99px;
}

.hts-oldal-idezet {
  font-size: .8125rem; font-style: italic; color: #57534e; line-height: 1.65;
}
.hts-oldal-idezet cite {
  display: block; margin-top: .375rem; font-style: normal;
  font-size: .6875rem; color: #a8a29e;
}

html[data-tema="sotet"] .hts-oldal-doboz { background: #1c1917; border-color: #292524; }
html[data-tema="sotet"] .hts-oldal-cim,
html[data-tema="sotet"] .hts-allas-sor strong { color: #f5f5f4; }
html[data-tema="sotet"] .hts-allas-sav { background: #292524; }
html[data-tema="sotet"] .hts-oldal-ugras:hover { background: #231f1d; }
html[data-tema="sotet"] .hts-oldal-ugras-jel { background: #292524; color: #d6d3d1; }

/* Letelt gyakorlat: a narancs jelző zöldre vált. Nem sürgetés többé,
   hanem visszajelzés - a 21 nap megvolt. */
.ht-nap-jelzo--letelt { background: #16a34a; }

/* A szakasz, aminek a füle még nincs meg. Nem tiltás - jelzés, hogy oda
   most nincs hova kattintani. Enélkül a sáv élő linknek látszott, és
   kattintásra nem történt semmi. */
.szsav-elem--keszul { cursor: default; opacity: .72; }
.szsav-keszul {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #a8a29e; background: #f5f5f4;
  padding: .125rem .375rem; border-radius: 99px; white-space: nowrap;
}
html[data-tema="sotet"] .szsav-keszul { background: #292524; color: #a8a29e; }
/* ============================================================
   NYOMTATÁS: VEZETETT ÖNFELISMERÉS
   ============================================================

   A korábbi szabály `.hts-lap { display: block !important }`-et írt, ami
   MINDEN fület láthatóvá tett - a hónap üzenetét, a huszonegy napot, a
   kísérőket is. Ezért lett a nyomtatási kép tizenhárom oldal ahelyett,
   hogy a kérdéseket és a válaszokat vitte volna papírra.

   Most a nyomtatás gombja megjelöli a törzset (`body[data-nyomtat]`), és
   csak az a rész megy ki, amit tényleg kértek. */

.onf-nyomtat-fej { display: none; }

@media print {

  /* ---- Amikor az önfelismerést nyomtatjuk ---- */
  body[data-nyomtat="onfelismeres"] .hts-fejlec,
body[data-nyomtat="onfelismeres"] .hts-hero,
body[data-nyomtat="onfelismeres"] .portal-fejlec,
  body[data-nyomtat="onfelismeres"] .szsav,
  body[data-nyomtat="onfelismeres"] .szsav-leiras,
  body[data-nyomtat="onfelismeres"] .hts-fulsav,
  body[data-nyomtat="onfelismeres"] .hts-oldal,
  body[data-nyomtat="onfelismeres"] .jegyzetdoboz,
  body[data-nyomtat="onfelismeres"] .jegyzet-doboz,
  body[data-nyomtat="onfelismeres"] .email-kapu,
  body[data-nyomtat="onfelismeres"] .onf-fej,
  body[data-nyomtat="onfelismeres"] .onf-sav,
  body[data-nyomtat="onfelismeres"] .onf-lepes:not(.onf-osszegzes),
  body[data-nyomtat="onfelismeres"] .onf-zaro,
  body[data-nyomtat="onfelismeres"] .hts-lap:not([data-hts-lap="onfelismeres"]) {
    display: none !important;
  }

  /* A cél-lap akkor is menjen ki, ha épp rejtett fülön áll. */
  body[data-nyomtat="onfelismeres"] .hts-lap[data-hts-lap="onfelismeres"] {
    display: block !important;
  }
  body[data-nyomtat="onfelismeres"] .hts-lap[data-hts-lap="onfelismeres"][hidden] {
    display: block !important;
  }
  body[data-nyomtat="onfelismeres"] .onf-osszegzes {
    display: block !important;
  }

  /* A rács nem kell papíron: egy hasáb, teljes szélesség. */
  body[data-nyomtat="onfelismeres"] .hts-racs,
  body[data-nyomtat="onfelismeres"] .hts-fo {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* ---- A papír fejléce ---- */
  body[data-nyomtat="onfelismeres"] .onf-nyomtat-fej {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 8pt;
    margin-bottom: 16pt;
    border-bottom: 1.5pt solid #E04800;
  }
  body[data-nyomtat="onfelismeres"] .onf-nyomtat-fej strong {
    display: block;
    font-size: 13pt;
    color: #E04800;
  }
  body[data-nyomtat="onfelismeres"] .onf-nyomtat-fej span {
    font-size: 9pt;
    color: #57534e;
  }

  /* ---- A kérdések és a válaszok ---- */
  body[data-nyomtat="onfelismeres"] .hts-alcim {
    font-size: 12pt;
    margin: 0 0 12pt;
  }

  body[data-nyomtat="onfelismeres"] .onf-osszegzes-elem {
    /* Egy kérdés ne szakadjon ketté két lap között. */
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14pt;
    padding-left: 10pt;
    border-left: 2pt solid #FFD9C4;
  }
  body[data-nyomtat="onfelismeres"] .onf-osszegzes-kerdes {
    font-size: 10.5pt;
    font-weight: 700;
    color: #B83B00;
    margin-bottom: 4pt;
  }
  body[data-nyomtat="onfelismeres"] .onf-osszegzes-valasz {
    font-size: 10.5pt;
    line-height: 1.55;
    color: #1c1917;
    white-space: pre-wrap;
  }

  /* Az üres válasz papíron vonal legyen, ne semmi: kézzel is
     befejezhető, ha valaki kinyomtatva viszi magával. */
  body[data-nyomtat="onfelismeres"] .onf-osszegzes-valasz:empty::after {
    content: "";
    display: block;
    height: 34pt;
    border-bottom: .5pt dashed #d6d3d1;
  }

  @page { margin: 16mm 14mm; }
}

/* ============================================================
   RAGADÓ OLDALSÁVOK - a fix fejléc alá csúsztak
   ============================================================

   A portál felső sávja `sticky top-0`, magassága 4rem. A jobb hasáb
   viszont `top: 1.5rem`-mel tapadt, vagyis a fejléc ALÁ került: görgetés
   közben a doboz teteje (a címe és a felső pereme) eltűnt mögötte, és
   csak az oldal legtetején látszott egyben.

   Ezért a tapadási pont a fejléc magassága + egy kis levegő. A magasság
   változóban van, hogy egy helyen legyen igazítható. */
:root { --portal-fejlec-magassag: 4rem; }

/* A tapadási pontot a saját szabályuknál állítjuk, feljebb. */

/* ============================================================
   FÜLSÁV - tördeljen, ne vágja le a végét
   ============================================================

   A sáv `overflow-x: auto` volt, elrejtett görgetősávval: a kilencedik
   fül félbevágva lógott ki, és semmi nem jelezte, hogy görgetni lehet.
   Széles képernyőn ezért inkább tördel - két sorban minden látszik. */
@media (min-width: 640px) {
  .hts-fulsav { flex-wrap: wrap; overflow-x: visible; row-gap: .375rem; }
  .hts-ful { flex-shrink: 1; }
}

/* Telefonon marad a vízszintes görgetés (tördelve túl sok helyet enne),
   de a jobb szélen egy halvány elhalványulás jelzi, hogy van még. */
@media (max-width: 639px) {
  .hts-fulsav-keret { position: relative; }
  .hts-fulsav-keret::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: .25rem;
    width: 2rem; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 247, 240, 0), rgba(255, 247, 240, .95));
  }
}
html[data-tema="sotet"] .hts-fulsav-keret::after {
  background: linear-gradient(90deg, rgba(28, 25, 23, 0), rgba(28, 25, 23, .95));
}

/* ---- A logion értelmezése ----
   A logion dobozához kapcsolódik, de nem annak a folytatása: az idézet
   régi és idegen, az értelmezés mai és a sajátunk. Ezért nem közös
   dobozban ülnek - a kettőt egy bal oldali vonal köti össze, és a
   címke mondja meg, ki beszél. */

/* ---- Logion: saját lap a havi témában ----
   Eddig a Kísérők alatt lakott, egy idézet a sok közül. Önálló tanítás:
   mondat, értelmezés, gyakorlat - ezért kapott saját lapot és ritmust. */
.hts-logion-bevezeto {
  margin: 0 0 .25rem; font-size: .9375rem; line-height: 1.7; color: #78716c;
}
.hts-logion-forditas {
  margin: 0; font-size: 1.0625rem; line-height: 1.75; color: #44403c; font-style: italic;
}

/* A szakaszok azonos ritmusban, bal oldali halk vonallal: a szem így
   végigfut rajtuk, és látja, hol kezdődik új gondolat. */
.hts-logion-blokk {
  margin: 1.5rem 0 0 1.125rem;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid rgba(224, 72, 0, .18);
}

/* A gyakorlat kiemelve. Ez az egyetlen rész, ami holnap reggel
   megcsinálható; a többi megérteni való, ez megélni. */
.hts-logion-gyakorlat {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.375rem;
  background: linear-gradient(135deg, var(--accent-50) 0%, var(--cream-200) 100%);
  border: 1px solid var(--accent-200);
  border-radius: 1rem;
}

/* A rövid mondatok a lap alján, egymás alatt, nagyobb betűvel: ezekkel
   marad az olvasó, amikor becsukja a lapot. */
.hts-logion-mondatok {
  display: flex; flex-direction: column; gap: .625rem;
  margin: 1.75rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid #f0edea;
}
.hts-logion-mondatok p {
  margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.55; color: var(--accent-700);
}
.hts-logion-mondatok p::before { content: "„"; }
.hts-logion-mondatok p::after { content: "”"; }

html[data-tema="sotet"] .hts-logion-bevezeto { color: #a8a29e; }
html[data-tema="sotet"] .hts-logion-forditas { color: #d6d3d1; }
html[data-tema="sotet"] .hts-logion-blokk { border-left-color: rgba(255,154,101,.25); }
html[data-tema="sotet"] .hts-logion-gyakorlat { background: #231f1d; border-color: #3a2a20; }
html[data-tema="sotet"] .hts-logion-mondatok { border-top-color: #292524; }
html[data-tema="sotet"] .hts-logion-mondatok p { color: var(--accent-400); }
.hts-logion-ertelmezes {
  margin: -.25rem 0 0 1.125rem;
  padding: 1rem 0 .25rem 1.25rem;
  border-left: 2px solid rgba(224, 72, 0, .22);
}
.hts-logion-cimke {
  display: inline-block; margin-bottom: .5rem;
  font: 700 10px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #E04800;
}
.hts-logion-ertelmezes .prose-content,
.hts-logion-blokk .prose-content,
.hts-logion-gyakorlat .prose-content { font-size: 15px; line-height: 1.72; color: #44403c; }
.hts-logion-ertelmezes .prose-content p,
.hts-logion-blokk .prose-content p,
.hts-logion-gyakorlat .prose-content p { margin: 0 0 .875rem; }
.hts-logion-ertelmezes .prose-content p:last-child,
.hts-logion-blokk .prose-content p:last-child,
.hts-logion-gyakorlat .prose-content p:last-child { margin-bottom: 0; }
.hts-logion-ertelmezes .prose-content blockquote {
  margin: .875rem 0; padding-left: .875rem;
  border-left: 2px solid rgba(224, 72, 0, .3);
  font-style: italic; color: #57534e;
}

html[data-tema="sotet"] .hts-logion-ertelmezes .prose-content,
html[data-tema="sotet"] .hts-logion-blokk .prose-content,
html[data-tema="sotet"] .hts-logion-gyakorlat .prose-content { color: #d6d3d1; }
html[data-tema="sotet"] .hts-logion-ertelmezes .prose-content blockquote { color: #a8a29e; }

/* ============================================================
   AZ ELŐREVETÍTETT JÖVŐKÉP
   ============================================================

   Bal oldalon az írás, jobb oldalon ugyanaz - de már nem szerkesztő
   mezőként, hanem lapként. A kettő azért van egymás mellett, mert az
   írásmód és az olvasásmód nem ugyanaz: amíg a kurzor villog, szöveget
   gépelsz; a jobb oldali lapon viszont már látod, mi lett belőle. */


/* Egy záró szöveg blokkja: fejléc a címmel, a magyarázattal és a
   minta-linkkel, alatta az író- és a tükörmező. Kettő van belőlük, ezért
   kap keretet: enélkül egybefolyna a két munka. */
.onf-jk-mezo {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem 1.125rem;
  background: #fafaf9;
  border: 1px solid #f0edea;
  border-radius: 1rem;
}
.onf-jk-mezo + .onf-jk-mezo { margin-top: 1rem; }

.onf-jk-mezo-fej {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .875rem;
  margin-bottom: .875rem;
}
.onf-jk-mezo-fej h5 {
  margin: 0 0 .1875rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #1c1917;
}
.onf-jk-mezo-fej p { margin: 0; font-size: .8125rem; line-height: 1.55; color: #78716c; }

/* A minta-link a mező mellett áll, mert itt merül fel a kérdés, hogy
   „ezt hogyan is kell?". A saját szakaszára nyitja meg az ablakot. */
.onf-jk-minta-link {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .3125rem .625rem;
  background: var(--accent-50); border: 1px solid var(--accent-200); border-radius: 9999px;
  cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent-700);
  transition: background .15s, border-color .15s;
}
.onf-jk-minta-link:hover { background: var(--accent-100); border-color: var(--accent-400); }
.onf-jk-minta-link:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

/* A két gomb egy csoportban: a másolás halkabb, mert az a ritkább művelet. */
.onf-jk-mezo-gombok { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; }

.onf-jk-masol {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .3125rem .625rem;
  background: transparent; border: 1px solid #e7e5e4; border-radius: 9999px;
  cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: #78716c;
  transition: background .15s, border-color .15s, color .15s;
}
.onf-jk-masol:hover:not(:disabled) { background: #f5f5f4; border-color: #d6d3d1; color: #44403c; }
.onf-jk-masol:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.onf-jk-masol:disabled { opacity: .4; cursor: default; }
/* A visszajelzés zöld, nem narancs: ez nem a márka hangja, hanem egy
   megtörtént dolog nyugtázása. */
.onf-jk-masol--kesz { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }

html[data-tema="sotet"] .onf-jk-masol { border-color: #292524; color: #a8a29e; }
html[data-tema="sotet"] .onf-jk-masol:hover:not(:disabled) { background: #231f1d; color: #e7e5e4; }
html[data-tema="sotet"] .onf-jk-masol--kesz { background: #14261a; border-color: #1f3d28; color: #4ade80; }

/* A blokkon belül a rács már nem kap külső margót: a keret adja a levegőt. */
.onf-jk-mezo .onf-jovokep-racs { margin: 0; }

html[data-tema="sotet"] .onf-jk-mezo { background: #1c1917; border-color: #292524; }
html[data-tema="sotet"] .onf-jk-mezo-fej h5 { color: #f5f5f4; }
html[data-tema="sotet"] .onf-jk-mezo-fej p { color: #a8a29e; }
html[data-tema="sotet"] .onf-jk-minta-link { background: #231f1d; border-color: #3a2a20; color: var(--accent-500); }

@media (max-width: 480px) {
  /* Keskeny kijelzőn a link a cím alá kerül, hogy a cím ne törjön szét. */
  .onf-jk-mezo-fej { flex-direction: column; gap: .625rem; }
}
.onf-jovokep-racs {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .onf-jovokep-racs { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.onf-jovokep-iras,
.onf-jovokep-kep { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }

.onf-jovokep-cimke {
  font: 700 10px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #a8a29e;
}

.onf-jovokep-iras textarea {
  width: 100%;
  min-height: 18rem;
  padding: 1rem 1.125rem;
  font: 400 15px/1.72 inherit;
  color: #292524;
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: .875rem;
  resize: vertical;
  transition: border-color .15s, background-color .15s;
}
.onf-jovokep-iras textarea:focus {
  outline: none;
  background: #fff;
  border-color: #FF7A3D;
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .12);
}

/* A jobb oldali lap: ugyanaz a szöveg, de már nem eszköz, hanem eredmény.
   Ezért van papírszerű háttere és bal oldali narancs pereme. */
.onf-jovokep-lap {
  min-height: 18rem;
  padding: 1rem 1.125rem;
  font-size: 15px;
  line-height: 1.72;
  color: #44403c;
  background: linear-gradient(160deg, rgba(255, 122, 61, .05), rgba(255, 122, 61, .02));
  border: 1px solid rgba(224, 72, 0, .14);
  border-left: 3px solid #FF7A3D;
  border-radius: .875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Üresen ne legyen néma fehér doboz - mondja meg, mi lesz benne. */
.onf-jovokep-lap:empty::before {
  content: "Amint írni kezdesz, itt jelenik meg.";
  color: #a8a29e;
  font-style: italic;
}

/* A záró lépés jele: nem sorszám, hanem nap - a kérdések után ez már
   nem a hányadik, hanem az, ami összeáll. */
.onf-szam--zaro {
  background: linear-gradient(160deg, #FF7A3D, #E04800);
  color: #fff;
}

/* ---- Az összegzésben ---- */
.onf-osszegzes-jovokep {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f5f5f4;
}

/* A visszatekintés kiemelve. Ez a lap célja: minden más ide vezetett, és
   ha valaki fél év múlva előveszi a kinyomtatott összegzést, ezt akarja
   újraolvasni. Meleg alap, saját keret, a felső vonal helyett - a többi
   blokknak a vonal marad, hogy a kiemelés kiemelés maradjon. */
.onf-osszegzes-jovokep[data-onf-szoveg-blokk="visszatekintes"] {
  padding: 1.25rem 1.375rem;
  background: linear-gradient(135deg, var(--accent-50) 0%, var(--cream-200) 100%);
  border: 1px solid var(--accent-200);
  border-radius: 1rem;
}
.onf-osszegzes-jovokep[data-onf-szoveg-blokk="visszatekintes"] .onf-osszegzes-kerdes {
  color: var(--accent-700);
}

html[data-tema="sotet"] .onf-osszegzes-jovokep[data-onf-szoveg-blokk="visszatekintes"] {
  background: #231f1d; border-color: #3a2a20;
}
html[data-tema="sotet"] .onf-osszegzes-jovokep[data-onf-szoveg-blokk="visszatekintes"] .onf-osszegzes-kerdes {
  color: var(--accent-500);
}

html[data-tema="sotet"] .onf-jovokep-iras textarea {
  background: #1c1917; border-color: #292524; color: #f5f5f4;
}
html[data-tema="sotet"] .onf-jovokep-iras textarea:focus { background: #231f1d; }
html[data-tema="sotet"] .onf-jovokep-lap {
  color: #d6d3d1;
  background: linear-gradient(160deg, rgba(255, 122, 61, .09), rgba(255, 122, 61, .03));
}
html[data-tema="sotet"] .onf-osszegzes-jovokep { border-top-color: #292524; }

/* Nyomtatáskor a jövőkép is menjen ki - a tükörlap, nem a szerkesztő mező. */
@media print {
  body[data-nyomtat="onfelismeres"] .onf-osszegzes-jovokep {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-top: 14pt;
    padding-top: 10pt;
    border-top: .75pt solid #e7e5e4;
  }

  /* Papíron a hátteret a böngésző alapból nem nyomtatja ki, keretet viszont
     igen - a visszatekintés így is kiemelve marad a kinyomtatott lapon. */
  body[data-nyomtat="onfelismeres"] .onf-osszegzes-jovokep[data-onf-szoveg-blokk="visszatekintes"] {
    padding: 10pt 12pt;
    border: 1pt solid #E04800;
    border-radius: 6pt;
  }
}

/* ---- A jövőkép fölötti áttekintés ----
   Amit a tag a kérdésekre írt, kéznél van, amikor a jövőképet fogalmazza.
   Halványabb, mint az alatta lévő írófelület: ez már megvan, az még nincs.
   Nyitva indul, de összecsukható - ha a gondolat megvan, csak a helyet enné. */

.onf-jk-attek {
  margin: 1rem 0 .25rem;
  background: #fafaf9;
  border: 1px solid #f0edea;
  border-radius: .875rem;
  overflow: hidden;
}

.onf-jk-attek > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem;
  cursor: pointer; list-style: none;
  font: 700 10px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #78716c;
  transition: color .15s;
}
.onf-jk-attek > summary::-webkit-details-marker { display: none; }
.onf-jk-attek > summary:hover { color: #E04800; }
.onf-jk-attek > summary:focus-visible { outline: 2px solid #FF7A3D; outline-offset: -2px; }

.onf-jk-attek-jel { display: flex; transition: transform .18s ease; color: #a8a29e; }
.onf-jk-attek[open] .onf-jk-attek-jel { transform: rotate(180deg); }

.onf-jk-attek-lista {
  display: flex; flex-direction: column; gap: .875rem;
  padding: 0 1rem 1rem;
}

.onf-jk-attek-elem {
  padding-left: .75rem;
  border-left: 2px solid #e7e5e4;
}
.onf-jk-attek-kerdes {
  font-size: 13px; font-weight: 600; color: #78716c;
  margin-bottom: .1875rem;
}
.onf-jk-attek-valasz {
  font-size: 13.5px; line-height: 1.6; color: #44403c;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.onf-jk-attek-valasz--ures { color: #a8a29e; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .onf-jk-attek-jel { transition: none; }
}

html[data-tema="sotet"] .onf-jk-attek { background: #1c1917; border-color: #292524; }
html[data-tema="sotet"] .onf-jk-attek-elem { border-left-color: #292524; }
html[data-tema="sotet"] .onf-jk-attek-valasz { color: #d6d3d1; }
html[data-tema="sotet"] .onf-jk-attek-kerdes { color: #a8a29e; }

/* A jövőkép bevezetője. Több bekezdés, nem egy sornyi súgó: ez vezeti rá a
   tagot arra, mit is csinál most, ezért olvasható méret, nem apró szürke. */
.onf-jk-bevezeto {
  display: flex; flex-direction: column; gap: .75rem;
  margin: 0 0 1.25rem;
  font-size: .9375rem; line-height: 1.7; color: #57534e;
}
.onf-jk-bevezeto p { margin: 0; }

/* A négy kérdés kiemelve áll, nem folyó szövegként: ezeken egyesével kell
   végigmenni, és így látszik, hogy négy kérdés, nem egy mondat. */
.onf-jk-bevezeto-kerdesek {
  padding-left: .875rem;
  border-left: 2px solid var(--accent-200);
  color: #78716c; font-style: italic;
}

/* A tényleges utasítás. Ez az egy mondat mondja meg, mit írjon a mezőbe,
   ezért nem szabad elvesznie a bevezető többi bekezdése között. */
.onf-jk-bevezeto-zaro { font-weight: 600; color: #292524; }

html[data-tema="sotet"] .onf-jk-bevezeto { color: #a8a29e; }
html[data-tema="sotet"] .onf-jk-bevezeto-kerdesek { color: #78716c; }
html[data-tema="sotet"] .onf-jk-bevezeto-zaro { color: #f5f5f4; }

/* A négy mozzanat: olvasd el, hunyd be a szemed, lásd magad előtt, érezd át.
   Nem felsorolás, hanem menet - ezért egymás alatt, halk narancs ponttal,
   nem sorszámmal: a sorrend számít, a számozás viszont iskolás lenne
   ilyen rövid mondatoknál. */
.onf-jk-lepessor {
  display: flex; flex-direction: column; gap: .375rem;
  margin: -.125rem 0 .125rem; padding: 0 0 0 .25rem;
  list-style: none;
}
.onf-jk-lepessor li {
  display: flex; align-items: baseline; gap: .625rem;
  color: #44403c;
}
.onf-jk-lepessor li::before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-500);
  transform: translateY(-2px);
}

/* A záró négy szó. Ez a szakasz aláírása: külön áll, vékony vonal fölötte,
   hogy a szem megálljon rajta, mielőtt az írómezőhöz ér. */
.onf-jk-bevezeto .onf-jk-zarosor {
  margin-top: .375rem; padding-top: .875rem;
  border-top: 1px solid #f0edea;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--accent-700); letter-spacing: .01em;
}

html[data-tema="sotet"] .onf-jk-lepessor li { color: #d6d3d1; }
html[data-tema="sotet"] .onf-jk-zarosor { border-top-color: #292524; color: var(--accent-500); }

/* ---- A kidolgozott minta: nyitógomb és felugró ablak ---- */

/* A gomb nem sima link: ez egy ajánlat, nem egy művelet, ezért kártya
   formájú és a szövegével együtt mondja el, mit kapsz odabent. */
.onf-minta-nyit {
  display: flex; align-items: center; gap: .875rem; width: 100%;
  margin: 0 0 .25rem;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, var(--accent-50) 0%, var(--cream-200) 100%);
  border: 1px solid var(--accent-200); border-radius: .875rem;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.onf-minta-nyit:hover {
  border-color: var(--accent-400);
  box-shadow: 0 6px 18px rgba(224,72,0,.1);
  transform: translateY(-1px);
}
.onf-minta-nyit:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

.onf-minta-nyit-ikon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .625rem;
  background: var(--accent-500); color: #fff;
}
.onf-minta-nyit-szoveg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.onf-minta-nyit-szoveg strong {
  font: 700 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-700);
}
.onf-minta-nyit-szoveg > span { font-size: .8125rem; line-height: 1.5; color: #57534e; }
.onf-minta-nyit-jel { flex-shrink: 0; display: flex; color: var(--accent-600); }

html[data-tema="sotet"] .onf-minta-nyit { background: #231f1d; border-color: #3a2a20; }
html[data-tema="sotet"] .onf-minta-nyit-szoveg > span { color: #a8a29e; }

/* Az ablak. Natív dialog: a fókuszcsapdát, az Escape-et és a felső réteget
   a böngésző adja, nem kell utánaépíteni. A display csak nyitva flex, mert
   a zárt állapot display: none-ját felülírná. */
.onf-minta {
  width: min(46rem, calc(100vw - 1.5rem));
  max-height: min(86vh, 54rem);
  padding: 0; border: 1px solid rgba(224,72,0,.12); border-radius: 1.25rem;
  background: #fff; color: #44403c;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  overflow: hidden;
}
.onf-minta[open] { display: flex; flex-direction: column; }
.onf-minta::backdrop { background: rgba(28,25,23,.6); }

.onf-minta-fej {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem 1.125rem;
  background: linear-gradient(160deg, var(--accent-100), var(--accent-50));
  border-bottom: 1px solid var(--accent-200);
}
.onf-minta-cimke {
  display: inline-block; margin-bottom: .375rem;
  font: 700 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-700);
}
.onf-minta-fej h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #1c1917;
}
.onf-minta-fej > div > p { margin: .125rem 0 0; font-size: .8125rem; color: #78716c; }

.onf-minta-bezar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.7); border: 1px solid var(--accent-200);
  color: #78716c; cursor: pointer;
  transition: background .15s, color .15s;
}
.onf-minta-bezar:hover { background: #fff; color: var(--accent-700); }
.onf-minta-bezar:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

.onf-minta-torzs { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 1.375rem 1.5rem 1.5rem; }

.onf-minta-eligazito {
  margin: 0 0 1rem; font-size: .8125rem; line-height: 1.6; color: #a8a29e;
}

/* A vágymondat, amiből az egész kör indul. */
.onf-minta-vagy {
  margin: 0 0 1.75rem; padding: .875rem 1.125rem;
  background: var(--accent-50); border-left: 3px solid var(--accent-500);
  border-radius: .75rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #292524;
}
.onf-minta-vagy::before { content: "„"; }
.onf-minta-vagy::after { content: "”"; }

/* A három szakasz. A szám azért van itt, mert a minta tényleg három
   egymásra épülő lépés, és a tag ugyanezt a hármat járja majd végig. */
.onf-minta-szakasz {
  display: flex; align-items: center; gap: .625rem;
  margin: 2rem 0 .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #1c1917;
}
.onf-minta-szakasz:first-of-type { margin-top: 0; }
.onf-minta-szakasz > span {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-500); color: #fff;
  font-size: 11px; font-weight: 700;
}

.onf-minta-lista {
  display: flex; flex-direction: column; gap: 1rem;
  margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: minta;
}
.onf-minta-lista li { counter-increment: minta; padding-left: 1.75rem; position: relative; }
.onf-minta-lista li::before {
  content: counter(minta) ".";
  position: absolute; left: 0; top: 0;
  font-size: .8125rem; font-weight: 700; color: var(--accent-500);
  font-variant-numeric: tabular-nums;
}
.onf-minta-kerdes { margin: 0 0 .3125rem; font-size: .9375rem; font-weight: 600; color: #292524; }
.onf-minta-valasz {
  margin: 0; padding-left: .75rem; border-left: 2px solid var(--accent-200);
  font-size: .9375rem; line-height: 1.65; color: #57534e;
}

.onf-minta-szoveg { display: flex; flex-direction: column; gap: .875rem; margin-top: .25rem; }
.onf-minta-szoveg p { margin: 0; font-size: .9375rem; line-height: 1.75; color: #44403c; }

/* A múlt idejű változat halványan más alapon áll: ez már nem terv, hanem
   megélt állapot, és a szemnek is látnia kell, hogy átléptünk valahova. */
.onf-minta-szoveg--zaro {
  padding: 1.125rem 1.25rem; border-radius: .875rem;
  background: var(--accent-50); border: 1px solid var(--accent-100);
}

.onf-minta-lab {
  flex-shrink: 0; display: flex; justify-content: flex-end;
  padding: .875rem 1.5rem; border-top: 1px solid #f0edea; background: #fafaf9;
}

html[data-tema="sotet"] .onf-minta { background: #1c1917; color: #d6d3d1; border-color: #292524; }
html[data-tema="sotet"] .onf-minta-fej { background: #231f1d; border-bottom-color: #3a2a20; }
html[data-tema="sotet"] .onf-minta-fej h2 { color: #f5f5f4; }
html[data-tema="sotet"] .onf-minta-bezar { background: rgba(0,0,0,.25); border-color: #3a2a20; color: #a8a29e; }
html[data-tema="sotet"] .onf-minta-vagy { background: #231f1d; color: #f5f5f4; }
html[data-tema="sotet"] .onf-minta-szakasz { color: #f5f5f4; }
html[data-tema="sotet"] .onf-minta-kerdes { color: #e7e5e4; }
html[data-tema="sotet"] .onf-minta-valasz { color: #a8a29e; border-left-color: #3a2a20; }
html[data-tema="sotet"] .onf-minta-szoveg p { color: #d6d3d1; }
html[data-tema="sotet"] .onf-minta-szoveg--zaro { background: #231f1d; border-color: #3a2a20; }
html[data-tema="sotet"] .onf-minta-lab { background: #171412; border-top-color: #292524; }

@media (prefers-reduced-motion: reduce) {
  .onf-minta-nyit { transition: none; }
  .onf-minta-nyit:hover { transform: none; }
}

/* Papíron sem a gomb, sem az ablak nem jelenik meg: az összegzés a tag saját
   szövegéről szól, egy idegen minta ott csak elvinné a figyelmet. */
@media print {
  .onf-minta-nyit, .onf-minta { display: none !important; }
}

/* A kérdés és a hozzá tartozó szerkesztés gomb egy sorban. A gomb nem
   zsugorodik: hosszú kérdésnél a szöveg tördelődjön, ne a gomb felirata. */
.onf-jk-attek-sor {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  margin-bottom: .1875rem;
}
.onf-jk-attek-sor .onf-jk-attek-kerdes { margin-bottom: 0; }

.onf-jk-attek-szerk {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .0625rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: #a8a29e;
  transition: color .15s;
}
.onf-jk-attek-szerk:hover { color: var(--accent-700); }
.onf-jk-attek-szerk:focus-visible {
  outline: 2px solid var(--accent-500); outline-offset: 2px; border-radius: .25rem;
}

html[data-tema="sotet"] .onf-jk-attek-szerk { color: #78716c; }
html[data-tema="sotet"] .onf-jk-attek-szerk:hover { color: var(--accent-500); }

/* Nyomtatáskor nem kell: az összegzés amúgy is tartalmazza a válaszokat,
   itt csak megkettőzné őket a papíron. */
@media print {
  .onf-jk-attek { display: none !important; }
}

/* A diktálás hibaüzenete. Az állapot rendes esetben halk („Hallgatlak…"),
   de ha valami nem megy, azt látni kell - különben a tag azt hiszi,
   a gomb csak lassú. */
.diktal-allapot--baj { color: #B91C1C; font-weight: 600; }
html[data-tema="sotet"] .diktal-allapot--baj { color: #FCA5A5; }

/* ---- „E hónap útja" a menüben ----
   A portál gerince: minden más anyag ehhez kapcsolódik. A menüben eddig
   ugyanolyan sor volt, mint a többi tizenhárom.

   Szaggatott keret, nem tömör kiemelés: a tömör folt aktív állapotnak
   látszana, és összekeveredne azzal a jelöléssel, ami azt mutatja, hol
   állsz épp. A szaggatott vonal mást mond - „ide tarts", nem „itt vagy". */
.portal-link--kiemelt {
  border: 1px dashed rgba(255, 122, 61, .45);
  color: #FFB088 !important;
}
.portal-link--kiemelt:hover {
  border-color: rgba(255, 122, 61, .8);
  background: rgba(255, 122, 61, .08) !important;
  color: #fff !important;
}

/* Ha épp ott állsz, a tömör aktív jelölés viszi - a szaggatott perem
   ilyenkor csak zajt adna hozzá. */
.portal-link--kiemelt.bg-accent-500\/15 {
  border-color: transparent;
  color: #FFB088 !important;
}

/* ============================================================
   AZ E HAVI TÉMA A /belso-kor OLDALON
   ============================================================
   Érdeklődésfelkeltés, nem tartalomjegyzék. Egy hónap neve, egy mondat,
   amiben magára ismer, és négy sor arról, mi vár rá. Ennyi. */

.hteaser {
  padding: 3.5rem 0;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 122, 61, .09) 0%, rgba(255, 122, 61, 0) 58%),
    #fffdfb;
  border-top: 1px solid rgba(224, 72, 0, .08);
  border-bottom: 1px solid rgba(224, 72, 0, .08);
}
@media (min-width: 768px) { .hteaser { padding: 4.5rem 0; } }

.hteaser-fej { text-align: center; margin-bottom: 2.25rem; }

.hteaser-eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: #E04800;
  padding: .375rem .75rem;
  background: rgba(224, 72, 0, .08);
  border-radius: 99px;
  margin-bottom: .875rem;
}

.hteaser-cim {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 1.875rem);
  line-height: 1.2;
  color: #57534e;
  margin: 0;
}

/* A téma neve viszi a súlyt - a „E havi téma:" csak felvezetés. */
.hteaser-nev {
  display: inline-block;
  font-weight: 800;
  color: #1c1917;
  background: linear-gradient(180deg, transparent 62%, rgba(255, 122, 61, .28) 62%);
  padding: 0 .125rem;
}

.hteaser-kulcsmondat {
  font-size: clamp(.9375rem, 2.2vw, 1.0625rem);
  font-style: italic;
  color: #78716c;
  margin: .875rem auto 0;
  max-width: 34ch;
  line-height: 1.55;
}

/* ---- Két hasáb ---- */
.hteaser-racs { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) {
  .hteaser-racs { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
}

/* A felismerés nagyobb és sötétebb: ez az a mondat, amiben magára ismer,
   és ha ez nem fog, a többit el sem olvassa. */
.hteaser-felismeres {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  line-height: 1.45;
  color: #1c1917;
  margin: 0 0 .875rem;
  padding-left: 1rem;
  border-left: 3px solid #FF7A3D;
}

.hteaser-igeret {
  font-size: .9375rem;
  line-height: 1.72;
  color: #57534e;
  margin: 0;
}

.hteaser-honap {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-top: 1.125rem;
  font-size: .75rem; font-weight: 600;
  color: #a8a29e;
}

/* ---- Mi van benne ---- */
.hteaser-elemek {
  display: flex; flex-direction: column; gap: .5rem;
}

.hteaser-elem {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: .875rem;
  box-shadow: 0 1px 2px rgba(41, 37, 36, .03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hteaser-elem:hover {
  transform: translateY(-1px);
  border-color: rgba(224, 72, 0, .28);
  box-shadow: 0 6px 20px -8px rgba(224, 72, 0, .22);
}

.hteaser-elem-jel {
  flex: none;
  width: 1.375rem; height: 1.375rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: linear-gradient(160deg, #FF7A3D, #E04800);
  color: #fff;
}

.hteaser-elem-cim {
  font-size: .875rem;
  font-weight: 500;
  color: #292524;
  line-height: 1.4;
}

.hteaser-lab {
  text-align: center;
  margin: 2rem 0 0;
  font-size: .8125rem;
  color: #a8a29e;
}

@media (prefers-reduced-motion: reduce) {
  .hteaser-elem { transition: none; }
  .hteaser-elem:hover { transform: none; }
}

html[data-tema="sotet"] .hteaser {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 122, 61, .11) 0%, rgba(255, 122, 61, 0) 58%),
    #1c1917;
  border-color: rgba(255, 122, 61, .14);
}
html[data-tema="sotet"] .hteaser-cim { color: #a8a29e; }
html[data-tema="sotet"] .hteaser-nev { color: #f5f5f4; }
html[data-tema="sotet"] .hteaser-felismeres { color: #f5f5f4; }
html[data-tema="sotet"] .hteaser-igeret { color: #d6d3d1; }
html[data-tema="sotet"] .hteaser-elem { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .hteaser-elem-cim { color: #f5f5f4; }



/* ============================================================
   NYILVÁNOS HAVI TÉMA (/havi-tema)
   ============================================================

   Két hasáb: balra a szöveg, jobbra a kártyák - ugyanaz a szerkezet,
   mint a /belso-kor blokkjában. Egy hosszú, egyhasábos oszlopban minden
   elem egyforma súlyt kap, és a szem nem találja meg, hol kezdjen.

   Nincs borítókép és nincs véleménygyűjtés, amiből építkezni lehetne;
   négy tagnál a „csatlakozz a többiekhez" ártana. Ezért a lap
   tipográfiából, ritmusból és a valódi tartalomból dolgozik. */

/* ---- Fejléc ---- */
.hm-hero {
  padding: 3.25rem 0 2.5rem;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(255, 122, 61, .14) 0%, rgba(255, 122, 61, 0) 60%),
    #fffdfb;
}
@media (min-width: 768px) { .hm-hero { padding: 4.5rem 0 3rem; } }

.hm-elo {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 12px/1 var(--font-display);
  color: #15803D; background: rgba(22, 163, 74, .1);
  padding: .4375rem .8125rem; border-radius: 99px; margin-bottom: 1.125rem;
}
.hm-elo-pont {
  width: 7px; height: 7px; border-radius: 99px; background: #16a34a;
  animation: hm-lukte 2.4s ease-in-out infinite;
}
@keyframes hm-lukte {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
  50% { opacity: .75; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

.hm-honap {
  display: block; font: 700 11px/1 var(--font-display);
  letter-spacing: .16em; text-transform: uppercase; color: #a8a29e;
  margin-bottom: .875rem;
}
.hm-cim {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 8vw, 4rem); line-height: 1;
  letter-spacing: -.03em; color: #1c1917; margin: 0;
}
.hm-kulcs {
  font-size: clamp(1rem, 2.4vw, 1.25rem); font-style: italic;
  color: #78716c; margin: .875rem auto 0; max-width: 32ch; line-height: 1.5;
}

/* ---- Blokkok és a két hasáb ---- */
.hm-blokk { padding: 3rem 0; }
@media (min-width: 768px) { .hm-blokk { padding: 4rem 0; } }
.hm-blokk--halvany { background: #FFF7F0; }

.hm-racs { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .hm-racs { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; }
}
.hm-bal, .hm-jobb { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

.hm-mini-cimke {
  display: block; font: 700 10.5px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: #E04800;
  margin-bottom: .625rem;
}
.hm-mini-cimke--vilagos { color: #FFB088; }

/* ---- Bal hasáb: szöveg ---- */
.hm-felismeres {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1875rem, 2.9vw, 1.5rem); line-height: 1.4;
  color: #1c1917; margin: 0;
  padding-left: 1.125rem; border-left: 3px solid #FF7A3D;
}
.hm-igeret { font-size: 1rem; line-height: 1.75; color: #57534e; margin: 0; }
.hm-leiras p { font-size: 1rem; line-height: 1.8; color: #44403c; margin: 0 0 1rem; }
.hm-leiras p:last-child { margin-bottom: 0; }

.hm-datum {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .75rem; font-weight: 600; color: #a8a29e;
}

/* ---- Jobb hasáb: a gyakorlat ----
   A szám és a cím EGY sorban. Külön dobozban, egymás alatt a nagy narancs
   négyzet magára maradt, és a szem nem tudta, hova tartozik. */
.hm-gyakorlat {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid rgba(224, 72, 0, .14);
  border-radius: 1.125rem; padding: 1.125rem 1.25rem;
}
.hm-gyakorlat-jelveny {
  flex: none; width: 3.75rem; height: 3.75rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: .875rem;
  background: linear-gradient(160deg, #FF7A3D, #E04800); color: #fff;
}
.hm-gyakorlat-jelveny strong {
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1;
}
.hm-gyakorlat-jelveny span {
  font-size: .5625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; opacity: .9; margin-top: .0625rem;
}
.hm-gyakorlat-szoveg { min-width: 0; }
.hm-gyakorlat-szoveg .hm-mini-cimke { margin-bottom: .25rem; }
.hm-gyakorlat-cim {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.125rem; line-height: 1.25; color: #1c1917; margin: 0;
}
.hm-gyakorlat-ido {
  display: block; font-size: .8125rem; font-weight: 600;
  color: #E04800; margin-top: .25rem;
}

/* ---- Jobb hasáb: kártyák ---- */
.hm-kartyak { display: flex; flex-direction: column; gap: .5rem; }
.hm-kartyak .hm-mini-cimke { margin-bottom: .125rem; }

.hm-kartya {
  display: flex; align-items: flex-start; gap: .75rem;
  background: #fff; border: 1px solid rgba(224, 72, 0, .12);
  border-radius: .875rem; padding: .875rem 1rem;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hm-kartya:hover {
  transform: translateY(-1px);
  border-color: rgba(224, 72, 0, .28);
  box-shadow: 0 8px 22px -10px rgba(224, 72, 0, .25);
}
.hm-kartya-jel {
  flex: none; width: 1.375rem; height: 1.375rem; margin-top: .0625rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: linear-gradient(160deg, #FF7A3D, #E04800); color: #fff;
}
.hm-kartya-szoveg { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.hm-kartya-cim { font-size: .9375rem; font-weight: 500; color: #292524; line-height: 1.4; }
.hm-kartya-leiras { font-size: .8125rem; color: #78716c; line-height: 1.55; }

/* ---- Idézet-sáv ---- */
.hm-idezet-sav {
  padding: 3.25rem 0; text-align: center;
  background: linear-gradient(160deg, #2b1a12 0%, #1c1917 70%);
}
.hm-idezet {
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: clamp(1.1875rem, 3.4vw, 1.625rem); line-height: 1.5;
  color: #fff; margin: 0 auto; max-width: 32ch; border: 0; padding: 0;
}
.hm-idezet-forras {
  display: block; margin-top: .875rem; font-size: .8125rem;
  font-style: normal; color: #a8a29e;
}

/* ---- Alcímek ---- */
.hm-alcim {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.625rem); line-height: 1.2;
  color: #1c1917; margin: 0;
}
.hm-alcim--kozep { text-align: center; }
.hm-alcim-alatt {
  font-size: .9375rem; color: #78716c; line-height: 1.65; margin: .5rem 0 0;
}
.hm-alcim--kozep + .hm-alcim-alatt { text-align: center; max-width: 44ch; margin: .5rem auto 1.75rem; }

/* ---- Idővonal ---- */
.hm-idovonal { list-style: none; margin: .5rem 0 0; padding: 0; }
.hm-lepes { display: flex; gap: 1rem; padding: 0 0 1.5rem; position: relative; }
.hm-lepes:last-child { padding-bottom: 0; }
.hm-lepes:not(:last-child)::before {
  content: ""; position: absolute; left: 1.0625rem; top: 2.375rem; bottom: .25rem;
  width: 2px; background: rgba(224, 72, 0, .16);
}
.hm-lepes--mogott:not(:last-child)::before { background: rgba(22, 163, 74, .3); }

.hm-lepes-jel {
  flex: none; position: relative; z-index: 1;
  width: 2.125rem; height: 2.125rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px; font: 700 .8125rem/1 var(--font-display);
  background: #fff; color: #a8a29e; border: 2px solid rgba(224, 72, 0, .18);
}
.hm-lepes--mogott .hm-lepes-jel { background: #16a34a; color: #fff; border-color: transparent; }
.hm-lepes--most .hm-lepes-jel {
  background: linear-gradient(160deg, #FF7A3D, #E04800); color: #fff;
  border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 122, 61, .18);
}
.hm-lepes-torzs { padding-top: .1875rem; min-width: 0; }
.hm-lepes-fej { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hm-lepes-cim {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: #1c1917; margin: 0;
}
.hm-most-cimke {
  font: 700 9.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(224, 72, 0, .1); color: #B83B00;
  padding: .25rem .4375rem; border-radius: 99px;
}
.hm-lepes-nap { display: block; font-size: .75rem; color: #a8a29e; margin-top: .0625rem; }
.hm-lepes-leiras { font-size: .875rem; line-height: 1.6; color: #78716c; margin: .375rem 0 0; }

/* ---- Ami a témán túl jár ---- */
.hm-tovabbi-doboz {
  background: #fff; border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.125rem; padding: 1.25rem 1.375rem;
  display: flex; flex-direction: column; gap: .875rem;
}
.hm-tovabbi { display: flex; align-items: flex-start; gap: .6875rem; }
.hm-pipa {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px; background: rgba(22, 163, 74, .12); color: #15803D;
}
.hm-tovabbi strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; color: #1c1917;
}
.hm-tovabbi-leiras {
  display: block; font-size: .8125rem; line-height: 1.55;
  color: #78716c; margin-top: .0625rem;
}

/* ---- Ajánlat a hasáb alján ---- */
.hm-ajanlat {
  background: linear-gradient(160deg, #2b1a12 0%, #1c1917 70%);
  border-radius: 1.125rem; padding: 1.375rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center;
}
.hm-ajanlat-ar { display: flex; flex-direction: column; gap: .125rem; }
.hm-ajanlat-ar strong {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.75rem; line-height: 1; color: #fff;
}
.hm-ajanlat-ar span { font-size: .75rem; color: #a8a29e; }
.hm-ajanlat-gomb { width: 100%; justify-content: center; }
.hm-ajanlat-apro { font-size: .6875rem; color: #a8a29e; line-height: 1.5; }

/* ---- Csatlakozás ---- */
.hm-cta {
  padding: 3.5rem 0; text-align: center;
  background: linear-gradient(160deg, #2b1a12 0%, #1c1917 70%);
}
.hm-cta-cim {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.25rem); line-height: 1.15;
  color: #fff; margin: 0 0 .875rem;
}
.hm-cta-szoveg {
  font-size: 1rem; line-height: 1.75; color: #d6d3d1;
  margin: 0 auto 1.875rem; max-width: 46ch;
}
.hm-cta-apro { font-size: .8125rem; color: #a8a29e; margin: 1rem 0 0; }
.hm-cta-masodik { display: inline-block; margin-top: 1.25rem; font-size: .8125rem; color: #FFB088; }
.hm-cta-masodik:hover { text-decoration: underline; }

/* ---- Korábbi hónapok ---- */
.hm-korabbiak { display: grid; gap: .875rem; }
@media (min-width: 700px) { .hm-korabbiak { grid-template-columns: repeat(3, 1fr); } }
.hm-korabbi {
  display: flex; flex-direction: column; gap: .25rem;
  background: #fff; border: 1px solid rgba(224, 72, 0, .1);
  border-radius: 1rem; padding: 1.125rem 1.25rem;
}
.hm-korabbi-honap {
  font: 700 10px/1 var(--font-display); letter-spacing: .1em;
  text-transform: uppercase; color: #E04800;
}
.hm-korabbi-cim {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #1c1917;
}
.hm-korabbi-kulcs { font-size: .8125rem; color: #a8a29e; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .hm-elo-pont { animation: none; }
  .hm-kartya { transition: none; }
  .hm-kartya:hover { transform: none; }
}

/* ---- Sötét téma ---- */
html[data-tema="sotet"] .hm-hero {
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(255, 122, 61, .16) 0%, rgba(255, 122, 61, 0) 60%),
    #1c1917;
}
html[data-tema="sotet"] .hm-cim,
html[data-tema="sotet"] .hm-alcim,
html[data-tema="sotet"] .hm-felismeres,
html[data-tema="sotet"] .hm-gyakorlat-cim,
html[data-tema="sotet"] .hm-kartya-cim,
html[data-tema="sotet"] .hm-lepes-cim,
html[data-tema="sotet"] .hm-tovabbi strong,
html[data-tema="sotet"] .hm-korabbi-cim { color: #f5f5f4; }
html[data-tema="sotet"] .hm-blokk--halvany { background: #231f1d; }
html[data-tema="sotet"] .hm-gyakorlat,
html[data-tema="sotet"] .hm-kartya,
html[data-tema="sotet"] .hm-tovabbi-doboz,
html[data-tema="sotet"] .hm-korabbi,
html[data-tema="sotet"] .hm-lepes-jel { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .hm-leiras p,
html[data-tema="sotet"] .hm-igeret { color: #d6d3d1; }

/* A második gyakorlat-sáv elválasztása. Nem külön fül: a kettő ugyanannak
   a hónapnak a két oldala, csak az egyik elméleti, a másik mozgásbeli.
   FIGYELEM: a `.hts-sav` NEM ez - az a hónap 6 px magas haladássávja,
   overflow:hidden-nel. Ezért kapott a gyakorlat-sáv saját nevet: egy
   ütközés az egész panelt levágta.

   A felső vonal és a nagy térköz innen KIKERÜLT: mióta minden sávnak saját
   kerete és sötétebb fejléce van, a vonal még egy elválasztást rajzolt a
   keret mellé, a plusz belső tér pedig elszakította a fejlécet a doboz
   tetejétől. */
.hts-gyakorlatsav--masodik { margin-top: 1.5rem; }

/* ---- A hónap naplókérdései ----
   Négy kérdés egymás alatt, hétre egy. A dobozoknak korábban NEM volt
   alapszabálya - csak a kiemelt változatnak -, ezért keret és belső tér
   nélkül egymásra folytak: a következő hét címkéje az előző kérdés utolsó
   sorára tapadt. */
.naplo-kerdesek {
  display: grid; gap: .75rem; margin-bottom: 1.25rem;
}
.naplo-kerdes-doboz {
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  background: #fff;
}
/* A címke három eleme egy sorban, de saját térrel: „2. HÉT", a napok
   intervalluma és az állapotjelző. Kis kijelzőn tördelődik. */
.naplo-kerdes-cimke {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: .625rem;
}
.naplo-kerdes-het {
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
}
.naplo-kerdes-nap {
  font: 400 11.5px/1 var(--font-body, inherit); color: #a8a29e;
  text-transform: none; letter-spacing: 0;
}
.naplo-kerdes-most,
.naplo-kerdes-varakozik {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .4375rem; border-radius: 99px;
}
.naplo-kerdes-most { background: rgba(224, 72, 0, .12); color: #B83B00; }
.naplo-kerdes-varakozik { background: #f5f5f4; color: #a8a29e; }

/* A most futó hét kérdése. */
.naplo-kerdes-doboz--most {
  border-color: rgba(224, 72, 0, .3);
  background: linear-gradient(160deg, rgba(255, 122, 61, .07), rgba(255, 122, 61, .02));
}
/* Ami még nem jött el: halvány, de olvasható és nem elrejtett. Aki előre
   akar nézni, nézzen - csak lássa, hogy még nem itt tartunk. */
.naplo-kerdes-doboz--jovo { background: #fafaf9; }
.naplo-kerdes-doboz--jovo .naplo-kerdes-szoveg { color: #78716c; }
.naplo-kerdes-doboz--jovo .naplo-kerdes-het { color: #a8a29e; }

html[data-tema="sotet"] .naplo-kerdes-doboz { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .naplo-kerdes-doboz--most {
  background: linear-gradient(160deg, rgba(255, 122, 61, .11), rgba(255, 122, 61, .04));
}
html[data-tema="sotet"] .naplo-kerdes-doboz--jovo { background: #1c1917; }
html[data-tema="sotet"] .naplo-kerdes-varakozik { background: #292524; color: #a8a29e; }

/* ============================================================
   KERESÉS A BELSŐ KÖRBEN
   ============================================================ */

/* ---- Villámtalálatok a fejlécben ---- */
.kereso-lap {
  position: absolute; top: 100%; right: 0; margin-top: .5rem;
  width: 24rem; max-width: calc(100vw - 2rem); max-height: 26rem;
  overflow-y: auto; z-index: 40;
  background: #fff; border: 1px solid #f0edea; border-radius: 1rem;
  box-shadow: 0 12px 40px -12px rgba(41, 37, 36, .25);
  padding: .5rem;
}
.kereso-lap[hidden] { display: none; }

.kereso-lap-csoport { padding: .25rem 0; }
.kereso-lap-cimke {
  display: block; padding: .375rem .625rem .25rem;
  font: 700 10px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #a8a29e;
}

.kereso-talalat {
  display: flex; flex-direction: column; gap: .125rem;
  padding: .5rem .625rem; border-radius: .625rem;
  transition: background-color .12s;
}
.kereso-talalat:hover { background: #fafaf9; }
.kereso-talalat-cim { font-size: .875rem; font-weight: 500; color: #292524; line-height: 1.35; }
.kereso-talalat-reszlet {
  font-size: .75rem; color: #a8a29e; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}

.kereso-lap-mind {
  display: block; margin-top: .375rem; padding: .625rem;
  text-align: center; border-top: 1px solid #f5f5f4;
  font-size: .8125rem; font-weight: 600; color: #E04800;
}
.kereso-lap-mind:hover { background: rgba(224, 72, 0, .06); border-radius: .625rem; }
.kereso-lap-ures { padding: 1rem .75rem; font-size: .8125rem; color: #a8a29e; }

/* ---- A teljes találati oldal ---- */
.ker-lap { display: flex; flex-direction: column; gap: 1.5rem; max-width: 46rem; }

.ker-urlap {
  display: flex; align-items: center; gap: .625rem; position: relative;
  background: #fff; border: 1px solid #e7e5e4; border-radius: .875rem;
  padding: .375rem .375rem .375rem 2.5rem;
}
.ker-ikon {
  position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
  color: #a8a29e; display: flex;
}
.ker-urlap input {
  flex: 1; border: 0; background: transparent; padding: .5rem 0;
  font-size: 1rem; color: #292524; min-width: 0;
}
.ker-urlap input:focus { outline: none; }

.ker-utmutato { font-size: .9375rem; line-height: 1.7; color: #78716c; max-width: 52ch; }
.ker-osszeg { font-size: .9375rem; color: #57534e; }
.ker-osszeg strong { color: #E04800; }

.ker-csoport { display: flex; flex-direction: column; gap: .5rem; }
.ker-csoport-cim {
  display: flex; align-items: center; gap: .4375rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; color: #292524; margin: 0;
}
.ker-csoport-szam {
  font-size: .6875rem; font-weight: 700;
  background: rgba(224, 72, 0, .1); color: #B83B00;
  padding: .125rem .375rem; border-radius: 99px;
}

.ker-talalatok { display: flex; flex-direction: column; gap: .5rem; }
.ker-talalat {
  display: flex; flex-direction: column; gap: .1875rem;
  background: #fff; border: 1px solid #f0edea; border-radius: .875rem;
  padding: .875rem 1rem;
  transition: border-color .15s, transform .12s;
}
.ker-talalat:hover { border-color: rgba(224, 72, 0, .28); transform: translateX(2px); }
.ker-talalat-cim { font-size: .9375rem; font-weight: 600; color: #292524; }
.ker-talalat-reszlet { font-size: .8125rem; color: #78716c; line-height: 1.55; }
.ker-talalat-meta { font-size: .6875rem; color: #a8a29e; }

@media (prefers-reduced-motion: reduce) {
  .ker-talalat { transition: none; }
  .ker-talalat:hover { transform: none; }
}

html[data-tema="sotet"] .kereso-lap,
html[data-tema="sotet"] .ker-urlap,
html[data-tema="sotet"] .ker-talalat { background: #1c1917; border-color: #292524; }
html[data-tema="sotet"] .kereso-talalat:hover { background: #231f1d; }
html[data-tema="sotet"] .kereso-talalat-cim,
html[data-tema="sotet"] .ker-talalat-cim,
html[data-tema="sotet"] .ker-csoport-cim,
html[data-tema="sotet"] .ker-urlap input { color: #f5f5f4; }
html[data-tema="sotet"] .kereso-lap-mind { border-top-color: #292524; }

/* ===== Naplókérdés magyarázata =====
   Egy-két mondat arról, hogyan érdemes nekifogni. Halkabb és kisebb, mint a
   kérdés: információ, nem felszólítás. Kétféle helyen fordul elő - a havi téma
   kérdésdobozában és a naplólap nagy kérdésénél -, mindkettőnél ugyanaz a hang. */
.naplo-kerdes-magyarazat {
  margin: .5rem 0 0; max-width: 62ch;
  font: 400 italic 13.5px/1.6 var(--font-body, inherit);
  color: #78716c; text-wrap: pretty;
}
/* A .naplo-kerdes-nagy p szabálya nagy, félkövér display-betűt ad minden
   bekezdésnek - a magyarázatot ez alól ki kell venni. */
.naplo-kerdes-nagy p.naplo-kerdes-magyarazat {
  font: 400 italic 13.5px/1.6 var(--font-body, inherit);
  color: #78716c; margin-top: .5rem;
}
html[data-tema="sotet"] .naplo-kerdes-magyarazat,
html[data-tema="sotet"] .naplo-kerdes-nagy p.naplo-kerdes-magyarazat { color: #b9aca3; }

/* ---- Nyilvános havi téma: a második gyakorlat-sáv ----
   A mozgásbeli gyakorlat az elméleti mellé kerül, nem helyette. Hogy a két
   doboz ne nézzen ki egymás másolatának, a jelvény melegebb aranyra vált -
   ugyanaz a napfelkelte-paletta, csak egy fokkal odébb. */
.hm-gyakorlat--mozgas .hm-gyakorlat-jelveny {
  background: linear-gradient(160deg, #FFC46B, #E08900);
}
.hm-gyakorlat--mozgas .hm-gyakorlat-ido { color: #B36B00; }
.hm-gyakorlat--mozgas .hm-mini-cimke { color: #B36B00; }
.hm-gyakorlat--mozgas { border-color: rgba(224, 137, 0, .18); }
html[data-tema="sotet"] .hm-gyakorlat--mozgas { border-color: #292524; }
html[data-tema="sotet"] .hm-gyakorlat--mozgas .hm-gyakorlat-ido,
html[data-tema="sotet"] .hm-gyakorlat--mozgas .hm-mini-cimke { color: #E8A83C; }

/* ---- Betekintő lábjegyzet: a továbbvezető link ----
   Ez az egyetlen kattintható dolog a blokk alján, de a lábjegyzet halvány
   szürkéjét örökölte, és beleolvadt a mellette álló mondatba. Kövéren,
   aláhúzva és a hangsúlyszínben viszi a szemet tovább. */
.hteaser-tovabb {
  font-weight: 700;
  color: #E04800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(224, 72, 0, .42);
  transition: color .18s ease, text-decoration-color .18s ease;
}
.hteaser-tovabb:hover,
.hteaser-tovabb:focus-visible {
  color: #B83B00;
  text-decoration-color: currentColor;
}
/* A magyarázó mondat külön sorba kerül: így a link nem folyik bele. */
.hteaser-lab .hteaser-tovabb { display: inline-block; margin-bottom: .375rem; }
.hteaser-lab > span { display: block; }
html[data-tema="sotet"] .hteaser-tovabb { color: #FF9A65; text-decoration-color: rgba(255, 154, 101, .45); }
html[data-tema="sotet"] .hteaser-tovabb:hover,
html[data-tema="sotet"] .hteaser-tovabb:focus-visible { color: #FFB88C; }

/* ---- Letöltés-hivatkozás a havi téma paneljeiben ----
   Nem gomb: a lejátszó a főszereplő, ez a mellette álló lehetőség. */
.hts-letoltes {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-top: .875rem;
  font: 600 13px/1 var(--font-display);
  color: #B83B00; text-decoration: none;
  padding: .5rem .875rem; border-radius: 99px;
  border: 1px solid rgba(224, 72, 0, .22);
  background: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.hts-letoltes:hover,
.hts-letoltes:focus-visible { background: #FFF4EE; border-color: #FF7A3D; }
html[data-tema="sotet"] .hts-letoltes { background: #231f1d; border-color: #292524; color: #FF9A65; }

/* ---- Gyakorlat A / B: a napok rácsa ----
   Ez az egyetlen hely, ahol a tag bepipálja a napot - a napi útmutatás
   listája (ha van) csak kiegészítés. A rács azért kell, mert a „0/21"
   számláló addig olyat ígért, amit sehol nem lehetett bepipálni. */
.hts-racspipa {
  margin-top: 1rem; padding: 1rem 1.125rem;
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: 1rem; background: #FFFBF5;
}
.hts-racspipa-fej {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: .875rem;
}
.hts-racspipa-cimke {
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
  margin-right: auto;
}
/* Automatikus oszlopszám: 21 és 10 napnál is kitölti a sort, telefonon
   pedig magától kevesebb fér egy sorba - fix rácsnál vagy szétesne, vagy
   túlcsordulna. */
.hts-racspipa-napok {
  display: grid; gap: .375rem;
  grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
}
.hts-racspipa-nap {
  aspect-ratio: 1; min-height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(224, 72, 0, .18);
  border-radius: .625rem; background: #fff;
  font: 600 13px/1 var(--font-display); color: #78716c;
  cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.hts-racspipa-nap:hover { border-color: #FF7A3D; color: #B83B00; }
.hts-racspipa-nap:active { transform: scale(.94); }
.hts-racspipa-nap:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .4);
}
.hts-racspipa-nap--kesz {
  background: linear-gradient(160deg, #FF8A50, #E04800);
  border-color: #E04800; color: #fff;
}
.hts-racspipa-nap[disabled] { opacity: .55; cursor: default; }
.hts-racspipa-tipp {
  margin: .75rem 0 0; font-size: 12px; color: #a8a29e;
}
/* Alatta levegő, ha jön még valami.
   A rácsnak volt margin-topja, margin-bottomja viszont nem, és utána vagy
   a `.video-keret` áll (annak egyáltalán nincs margója), vagy a
   `.prose-content`, aminek az első bekezdése `margin-top: 0`. Így a
   beírt leírás ráfekült a doboz aljára.
   A `:not(:last-child)` azért kell, mert a rács lehet az utolsó elem is
   (nincs videó, nincs leírás, nincs napi lépés) - ott a sáv saját
   paddingje adja a zárást, és egy margó csak holt teret nyitna.
   A következő elem felső margójával (pl. `.hts-napok-fej` 1.75rem) ez
   összeolvad, nem adódik össze, tehát nem lesz dupla rés. */
.hts-racspipa:not(:last-child) { margin-bottom: 1.25rem; }
/* A sáv rövid neve („Gyakorlat A") a cím ELŐTT, halkabban: a cím a
   gyakorlaté, ez csak megmondja, melyikről van szó. */
.hts-gyakorlat-rovid {
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: linear-gradient(160deg, #FF8A50, #E04800);
  padding: .3125rem .5rem; border-radius: 99px;
  margin-right: .125rem;
}
html[data-tema="sotet"] .hts-racspipa { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .hts-racspipa-nap { background: #1c1917; border-color: #292524; color: #d6d3d1; }

/* ---- Tagolt betekintő-szöveg ----
   Amit az adminban felsorolásnak írunk, az felsorolás legyen; aminek címe
   van, annak látszódjon a címe. A jelölő nem korong, hanem a napfelkelte
   színében álló vonás - ugyanaz a nyelv, mint a lap többi részén. */
.tg-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tg-lista li { position: relative; padding-left: 1.375rem; }
.tg-lista li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .5rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #FF7A3D, #E04800);
}
.tg-cimkes { margin: 0 0 .75rem; }
.tg-cimkes:last-child { margin-bottom: 0; }
.tg-cimkes strong { color: #292524; font-weight: 700; }
.tg-cimkes strong::after { content: ""; display: inline-block; width: .25rem; }
html[data-tema="sotet"] .tg-cimkes strong { color: #f5f5f4; }

/* A tagolt blokkok saját bekezdés-közeit hozzák, ezért a burkoló felső és
   alsó margóját el kell venni - különben duplán szellős lesz. */
.hm-felismeres > :first-child,
.hm-igeret > :first-child,
.hteaser-felismeres > :first-child,
.hteaser-igeret > :first-child,
.hm-leiras > :first-child { margin-top: 0; }
.hm-felismeres > :last-child,
.hm-igeret > :last-child,
.hteaser-felismeres > :last-child,
.hteaser-igeret > :last-child,
.hm-leiras > :last-child { margin-bottom: 0; }

/* ---- Szerkesztőből jövő betekintő-szöveg ----
   A mezők mostantól formázhatók az adminban: félkövér, dőlt, felsorolás,
   a bővebb leírásban címsor is. A megjelenés a doboz saját tipográfiáját
   követi - a szerkesztő nem hozhat magával idegen méreteket. */
.hm-felismeres p, .hm-igeret p,
.hteaser-felismeres p, .hteaser-igeret p { margin: 0 0 .625rem; }
.hm-felismeres p:last-child, .hm-igeret p:last-child,
.hteaser-felismeres p:last-child, .hteaser-igeret p:last-child { margin-bottom: 0; }

.hm-felismeres ul, .hm-igeret ul,
.hteaser-felismeres ul, .hteaser-igeret ul,
.hm-leiras ul, .hm-leiras ol {
  margin: .5rem 0; padding-left: 1.25rem;
}
.hm-felismeres li, .hm-igeret li,
.hteaser-felismeres li, .hteaser-igeret li,
.hm-leiras li { margin-bottom: .3125rem; }

/* A „Bővebb leírás" címsorai. Kisebbek, mint a lap saját alcímei: ezek a
   szövegen BELÜL tagolnak, nem a lapot osztják szakaszokra. */
.hm-leiras h2, .hm-leiras h3 {
  font-family: var(--font-display); font-weight: 700; color: #1c1917;
  line-height: 1.3; margin: 1.5rem 0 .5rem;
}
.hm-leiras h2 { font-size: 1.25rem; }
.hm-leiras h3 { font-size: 1.0625rem; }
.hm-leiras h2:first-child, .hm-leiras h3:first-child { margin-top: 0; }
.hm-leiras blockquote {
  margin: 1rem 0; padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid #FF7A3D; color: #57534e; font-style: italic;
}
.hm-leiras a, .hm-igeret a, .hm-felismeres a,
.hteaser-igeret a, .hteaser-felismeres a {
  color: #B83B00; text-decoration: underline; text-underline-offset: .18em;
}
html[data-tema="sotet"] .hm-leiras h2,
html[data-tema="sotet"] .hm-leiras h3 { color: #f5f5f4; }

/* ============================================================
   NAPLÓ: KÉT HASÁB
   Balra a napi napló, jobbra a hónap témájának naplója. A kettő más
   ritmusban jár - napra egy lap, illetve hétre egy kérdés -, és egymás
   mellett rögtön látszik, hogy két külön dolog.
   ============================================================ */
.naplo-racs { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 1100px) {
  /* A napi napló kap több helyet: abban íródik a több szöveg. */
  .naplo-racs { grid-template-columns: 1.15fr 1fr; gap: 2rem; }
}
.naplo-hasab { min-width: 0; }
.naplo-hasab-cim {
  display: flex; align-items: center; gap: .5rem;
  font: 700 1rem/1.2 var(--font-display); color: #292524;
  margin: 0 0 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid rgba(224, 72, 0, .12);
}
.naplo-hasab-cim svg { color: #B83B00; flex-shrink: 0; }
.naplo-hasab-alcim {
  margin-left: auto;
  font: 400 11.5px/1 var(--font-body, inherit); color: #a8a29e;
}

/* ---- Egy hónap a jobb hasábban ---- */
.naplo-honap {
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.125rem; padding: 1.125rem;
  background: #fff; margin-bottom: 1rem;
}
.naplo-honap--futo { border-color: rgba(224, 72, 0, .3); }
.naplo-honap-fej {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: .875rem;
}
.naplo-honap-nev {
  display: block;
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
  margin-bottom: .25rem;
}
.naplo-honap-cim {
  font: 600 .9375rem/1.3 var(--font-display); color: #292524; text-decoration: none;
}
.naplo-honap-cim:hover { color: #B83B00; text-decoration: underline; }
.naplo-honap-szam {
  flex-shrink: 0; font: 600 12px/1 var(--font-display); color: #78716c;
  background: #FFF4EE; border-radius: 99px; padding: .3125rem .5rem;
  font-variant-numeric: tabular-nums;
}

/* ---- A válaszmező a kérdés alatt ---- */
.hnaplo { margin-top: .875rem; }
.hnaplo-nyito {
  display: inline-flex; align-items: center; gap: .4375rem;
  font: 600 12.5px/1 var(--font-display); color: #B83B00;
  background: #fff; border: 1px solid rgba(224, 72, 0, .22);
  border-radius: 99px; padding: .5rem .875rem; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.hnaplo-nyito:hover { background: #FFF4EE; border-color: #FF7A3D; }
.hnaplo-mezo textarea {
  width: 100%; min-height: 7rem; resize: vertical;
  border: 1px solid rgba(224, 72, 0, .2); border-radius: .875rem;
  padding: .75rem .875rem; font-size: .9375rem; line-height: 1.7;
  background: #fff; color: #292524;
}
.hnaplo-mezo textarea:focus {
  outline: none; border-color: #FF7A3D;
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .18);
}
.hnaplo-lab {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .5rem;
}
.hnaplo-allapot { font-size: 12px; color: #a8a29e; }

/* Lezárt hét: a válasz olvasható marad, csak nem szerkeszthető. */
.hnaplo-lezart {
  margin-top: .875rem; padding: .75rem .875rem;
  background: #fafaf9; border-radius: .875rem;
  border-left: 3px solid rgba(224, 72, 0, .25);
}
.hnaplo-lezart-cimke {
  display: block; font: 700 9.5px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #a8a29e;
  margin-bottom: .375rem;
}
.hnaplo-lezart p { margin: 0; font-size: .9375rem; line-height: 1.7; color: #44403c; white-space: pre-line; }

.naplo-kerdes-kesz {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(22, 163, 74, .1); color: #15803d;
  padding: .25rem .4375rem; border-radius: 99px;
}

html[data-tema="sotet"] .naplo-honap { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .naplo-honap-cim { color: #f5f5f4; }
html[data-tema="sotet"] .naplo-honap-szam { background: #292524; color: #d6d3d1; }
html[data-tema="sotet"] .hnaplo-nyito,
html[data-tema="sotet"] .hnaplo-mezo textarea { background: #1c1917; border-color: #292524; color: #f5f5f4; }
html[data-tema="sotet"] .hnaplo-lezart { background: #1c1917; }
html[data-tema="sotet"] .hnaplo-lezart p { color: #d6d3d1; }

/* ============================================================
   SZÍVKÖR: A ZÁROLT KAPU
   A háttérben egy elhomályosított vezérlőpult-váz - nem valódi tartalom,
   csak a forma. Legyen mit nézni a lakat mögött, de ne ígérjünk
   konkrétumot, ami nincs.
   ============================================================ */
/* A váz és a tábla EGY rácscellában ül egymáson. Korábban a tábla abszolút
   pozícióval lebegett a váz fölött - amint a szövege hosszabb lett, mint a
   váz, kilógott belőle és elcsúszottnak látszott. Így a doboz mindig a
   magasabbikhoz igazodik. */
.szk-zar { display: grid; }
.szk-zar > * { grid-area: 1 / 1; }

/* A díszlet halk. Fél átlátszóságnál és enyhe elmosásnál még kivehető
   formái voltak, és a tábla körül úgy látszott, mintha átütne a szövegen.
   Most erősebben elmosva és jóval halványabban: a szemnek csak annyit
   mond, hogy „van itt valami", a figyelmet nem viszi el. */
.szk-vaz {
  display: grid; gap: .875rem;
  grid-template-columns: 1fr 1fr;
  filter: blur(9px); opacity: .26;
  pointer-events: none; user-select: none;
}
@media (min-width: 1100px) { .szk-vaz { grid-template-columns: repeat(3, 1fr); } }

/* Telefonon a díszlet elmarad: egymás alatt hat kártya méteres lapot csinál,
   és elmosódva úgysem mond semmit. Ott csak a tábla van. */
@media (max-width: 640px) { .szk-vaz { display: none; } }

.szk-vaz-kartya {
  background: #fff; border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.125rem; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .625rem;
  /* Ne nyúljanak a tábla magasságára: attól a díszlet üres dobozoknak
     látszana, nem tartalomnak. */
  align-self: start;
}
.szk-vaz-ikon {
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  background: linear-gradient(160deg, #FFD1B8, #FFAC94);
}
.szk-vaz-sor { height: .625rem; border-radius: 99px; background: #F5F0EA; }
.szk-vaz-sor--cim { height: .875rem; width: 70%; background: #FFE4D3; }
.szk-vaz-sor--rovid { width: 45%; }

/* A tábla a váz FÖLÖTT ül, középen. Saját háttérrel, hogy a mögötte lévő
   elmosódás ne tegye olvashatatlanná a szöveget. */
.szk-tabla {
  /* A rácscellában középre: vízszintesen és függőlegesen is. Ha a tábla a
     magasabb, a cella hozzá nő - nem lóg ki sehol. */
  place-self: center;
  width: min(32rem, 100%);
  /* Tömör fehér, és egy fehér gyűrű a széle körül: ettől válik el a
     mögötte lévő elmosódástól, és nem látszik áttetszőnek. */
  background: #fff; border: 1px solid rgba(224, 72, 0, .16);
  border-radius: 1.375rem; padding: 1.75rem 1.625rem;
  box-shadow:
    0 0 0 .5rem rgba(255, 255, 255, .92),
    0 20px 52px rgba(28, 25, 23, .13);
  text-align: center;
}
.szk-lakat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 99px;
  background: #FFF4EE; color: #B83B00; margin-bottom: .875rem;
}
.szk-tabla-cim {
  font: 700 1.125rem/1.35 var(--font-display); color: #1c1917;
  margin: 0 0 .625rem; text-wrap: balance;
}
.szk-tabla-szoveg {
  margin: 0 0 1.125rem; font-size: .9375rem; line-height: 1.65; color: #57534e;
}
.szk-hatra {
  display: flex; align-items: baseline; justify-content: center; gap: .4375rem;
  margin-bottom: .75rem;
}
.szk-hatra strong {
  font: 800 1.75rem/1 var(--font-display); color: #E04800;
  font-variant-numeric: tabular-nums;
}
.szk-hatra span { font-size: .875rem; color: #78716c; }

.szk-sav {
  height: .375rem; border-radius: 99px; background: rgba(224, 72, 0, .1);
  overflow: hidden; margin-bottom: .875rem;
}
.szk-sav span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #FF5C14);
}
/* Ugyanaz a halk szürke, mint a „nap van hátra" felirat: eggyel kevesebb
   szín a kártyán, és olvashatóbb is, mint a korábbi világos tónus. */
.szk-tabla-apro { margin: 0; font-size: .8125rem; color: #78716c; line-height: 1.55; }

/* ---- Megnyílt állapot ---- */
.szk-nyitva {
  background: linear-gradient(160deg, #FFF4EE, #fff 65%);
  border: 1px solid rgba(224, 72, 0, .18);
  border-radius: 1.375rem; padding: 2rem 1.75rem; text-align: center;
}
.szk-nyitva-jel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 99px;
  background: linear-gradient(160deg, #FF8A50, #E04800); color: #fff;
  margin-bottom: .875rem;
}
.szk-nyitva-cim {
  font: 700 1.25rem/1.3 var(--font-display); color: #1c1917; margin: 0 0 .625rem;
}
.szk-nyitva-szoveg {
  margin: 0 auto 1.25rem; max-width: 34rem;
  font-size: .9375rem; line-height: 1.7; color: #57534e;
}

html[data-tema="sotet"] .szk-vaz-kartya { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .szk-vaz-sor { background: #292524; }
html[data-tema="sotet"] .szk-tabla {
  background: #231f1d; border-color: #292524;
  /* Sötét témában a fehér gyűrű világítana; itt a lap saját háttere az,
     ami elválasztja a táblát a mögötte lévő elmosódástól. */
  box-shadow:
    0 0 0 .5rem rgba(28, 25, 23, .9),
    0 20px 52px rgba(0, 0, 0, .45);
}
html[data-tema="sotet"] .szk-tabla-cim { color: #f5f5f4; }
html[data-tema="sotet"] .szk-nyitva { background: linear-gradient(160deg, #322722, #231f1d 65%); border-color: #292524; }
html[data-tema="sotet"] .szk-nyitva-cim { color: #f5f5f4; }

/* ---- A napló bevezetője ----
   Hosszabb, mint egy listaoldal egysoros leírása, és van benne egy mondat,
   ami a bizalomról szól - az kap keretet. A szöveghasáb szűk marad: a
   folyószöveg 65 karakter körül olvasható a legkönnyebben. */
.naplo-bevezeto { max-width: 44rem; margin-bottom: 1.75rem; }
.naplo-bevezeto p {
  margin: 0 0 .75rem; color: #57534e;
  font-size: .9375rem; line-height: 1.75; text-wrap: pretty;
}
.naplo-bevezeto p:last-child { margin-bottom: 0; }
.naplo-bevezeto-elso {
  font: 600 1.0625rem/1.5 var(--font-display) !important;
  color: #292524 !important;
}
.naplo-bevezeto-kiemelt {
  background: linear-gradient(160deg, #FFF4EE, #FFFBF5 70%);
  border-left: 3px solid #FF7A3D;
  border-radius: .375rem .875rem .875rem .375rem;
  padding: .75rem 1rem; color: #44403c !important;
}
html[data-tema="sotet"] .naplo-bevezeto-elso { color: #f5f5f4 !important; }
html[data-tema="sotet"] .naplo-bevezeto-kiemelt {
  background: linear-gradient(160deg, #322722, #231f1d 70%); color: #d6d3d1 !important;
}

/* ---- Napló: összegzés a lap tetején ----
   Nem teljesítménytábla: nincs benne cél és nincs „hátralévő" szám, csak
   az, ami már összegyűlt. A számok automatikusan tördelődnek, mert egy
   kezdő tagnál kettő áll itt, egy réginél öt. */
.naplo-osszegzes {
  background: linear-gradient(135deg, #FFF4EE, #FFF8F0 70%);
  border: 1px solid #FFD1B8;
  border-radius: 1.125rem;
  padding: 1.125rem 1.375rem;
  margin-bottom: 1.75rem;
}
.naplo-osszegzes-racs {
  display: grid; gap: .875rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.naplo-stat { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.naplo-stat-szam {
  font: 800 1.5rem/1 var(--font-display); color: #E04800;
  font-variant-numeric: tabular-nums;
}
.naplo-stat-cimke { font-size: 12.5px; line-height: 1.35; color: #57534e; }

.naplo-osszegzes-lab {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  margin: 1rem 0 0; padding-top: .875rem;
  border-top: 1px solid rgba(224, 72, 0, .12);
}
.naplo-pihen { font-size: 13px; color: #a8a29e; }

/* A hasáb alján jobbra záró eszközsor - a bal hasábban balra marad. */
.jegyzet-eszkozok--jobbra { justify-content: flex-end; margin-top: 1rem; }

html[data-tema="sotet"] .naplo-osszegzes {
  background: linear-gradient(135deg, #322722, #292524 70%);
  border-color: rgba(255, 154, 101, .25);
}
html[data-tema="sotet"] .naplo-stat-cimke { color: #d6d3d1; }

/* A Szívkör táblájának szövege több bekezdés, a záró párvers pedig kiemelve:
   az mondja meg, milyen szellemben működik a kör. */
.szk-tabla-szoveg p { margin: 0 0 .75rem; }
.szk-tabla-szoveg p:last-child { margin-bottom: 0; }
/* A záró mondat kiemelt marad, de nem színnel: dőlt szedés, nagyobb súly
   és egy elválasztó vonal fölötte. A narancs korábban versenyzett a hátralévő
   napok számával, és a kis kártyán így hat különböző betűszín volt. */
.szk-parvers {
  font: 600 italic .9375rem/1.7 var(--font-display);
  color: #44403c; margin-top: 1rem !important;
  padding-top: .875rem; border-top: 1px solid rgba(224, 72, 0, .14);
}
html[data-tema="sotet"] .szk-parvers { color: #e7e5e4; }

/* ---- Beágyazott Spotify-lejátszó ----
   A Spotify a saját dobozát hozza magával, ezért itt csak a hely és a
   lekerekítés a mi dolgunk. A 12px-es sugár a Spotify beágyazásának saját
   sarkával egyezik - enélkül egy hajszálnyi fehér csík látszik a széleken. */
.spotify-keret {
  margin-top: .875rem;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.spotify-keret--nagy { margin-top: 1.25rem; }
.spotify-keret iframe { display: block; border: 0; }

/* ============================================================
   SORSOLÁS: A NYERTES LAPJA
   ============================================================ */
.nyer {
  max-width: 34rem; margin: 0 auto; text-align: center;
  background: linear-gradient(160deg, #FFF4EE, #fff 62%);
  border: 1px solid rgba(224, 72, 0, .18);
  border-radius: 1.375rem; padding: 2.25rem 1.75rem;
}
.nyer--nincs { background: #fff; border-color: rgba(224, 72, 0, .1); }
.nyer-jel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 99px;
  background: linear-gradient(160deg, #FF8A50, #E04800); color: #fff;
  margin-bottom: 1rem;
}
.nyer-jel--halk { background: #F5F0EA; color: #a8a29e; }
.nyer-honap {
  display: block; font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
  margin-bottom: .5rem;
}
.nyer-cim {
  font: 800 1.625rem/1.25 var(--font-display); color: #1c1917;
  margin: 0 0 .75rem; text-wrap: balance;
}
.nyer-szoveg {
  margin: 0 auto 1.5rem; max-width: 28rem;
  font-size: .9375rem; line-height: 1.7; color: #57534e;
}

/* A kód a lap főszereplője - ezért nagy, monospace és másolható. */
.nyer-kupon {
  background: #fff; border: 1px dashed rgba(224, 72, 0, .35);
  border-radius: 1rem; padding: 1.125rem 1rem; margin-bottom: 1.5rem;
}
.nyer-kupon-cimke {
  display: block; font: 700 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #a8a29e;
  margin-bottom: .625rem;
}
.nyer-kod {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 1.375rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .06em; color: #E04800;
  background: #FFF4EE; border: 1px solid rgba(224, 72, 0, .22);
  border-radius: .75rem; padding: .75rem 1rem; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.nyer-kod:hover { background: #FFE4D3; border-color: #FF7A3D; }
.nyer-kod:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .4); }
.nyer-kupon-allapot {
  margin: .75rem 0 0; font-size: 12.5px; line-height: 1.55; color: #78716c;
}
.nyer-kupon-allapot--kesz { color: #15803d; }
.nyer-kupon-allapot--lejart { color: #b45309; }
.nyer-gomb { margin-bottom: 1.125rem; }
.nyer-apro { margin: 0; font-size: 12px; line-height: 1.55; color: #a8a29e; }

html[data-tema="sotet"] .nyer {
  background: linear-gradient(160deg, #322722, #231f1d 62%); border-color: #292524;
}
html[data-tema="sotet"] .nyer-cim { color: #f5f5f4; }
html[data-tema="sotet"] .nyer-kupon { background: #1c1917; }
html[data-tema="sotet"] .nyer-kod { background: #231f1d; border-color: #292524; color: #FF9A65; }

/* ============================================================
   KIHÍVÁS
   A nyitott kapu: ingyenes regisztrációval is elérhető.
   ============================================================ */
.kiv-ures {
  max-width: 30rem; margin: 2rem auto; text-align: center;
  background: #fff; border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.25rem; padding: 2.25rem 1.75rem;
}
.kiv-ures-jel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 99px;
  background: #FFF4EE; color: #B83B00; margin-bottom: 1rem;
}
.kiv-ures-cim { font: 700 1.1875rem/1.3 var(--font-display); color: #1c1917; margin: 0 0 .625rem; }
.kiv-ures-szoveg { margin: 0 auto 1.25rem; max-width: 24rem; font-size: .9375rem; line-height: 1.7; color: #57534e; }

/* ---- Fejléc ---- */
.kiv-fej {
  display: grid; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem;
}
@media (min-width: 800px) { .kiv-fej { grid-template-columns: 1fr auto; } }
.kiv-cimke {
  display: inline-block; font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
  background: #FFF4EE; padding: .375rem .625rem; border-radius: 99px;
  margin-bottom: .625rem;
}
.kiv-cim { font: 800 1.625rem/1.2 var(--font-display); color: #1c1917; margin: 0 0 .625rem; text-wrap: balance; }
.kiv-igeret { margin: 0; font-size: 1rem; line-height: 1.65; color: #57534e; max-width: 36rem; }
.kiv-tarsak {
  display: inline-flex; align-items: center; gap: .375rem;
  margin: .875rem 0 0; font-size: 12.5px; color: #B83B00; font-weight: 600;
}
.kiv-borito { border-radius: 1.125rem; overflow: hidden; max-width: 16rem; }
.kiv-borito img { display: block; width: 100%; height: auto; }

/* ---- Csatlakozás ---- */
.kiv-bevezeto { margin-bottom: 1.25rem; }
.kiv-belep-doboz {
  background: linear-gradient(160deg, #FFF4EE, #fff 65%);
  border: 1px solid rgba(224, 72, 0, .2);
  border-radius: 1.25rem; padding: 1.5rem; text-align: center;
}
.kiv-belep-szoveg { margin: 0 auto 1.125rem; max-width: 30rem; font-size: .9375rem; line-height: 1.7; color: #57534e; }
.kiv-belep-apro { margin: .875rem 0 0; font-size: 12.5px; color: #a8a29e; }

/* ---- Haladás ---- */
.kiv-allas {
  background: #fff; border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.125rem; padding: 1.125rem 1.25rem; margin-bottom: 1.25rem;
}
.kiv-allas-sor { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: .875rem; }
.kiv-stat { display: flex; align-items: baseline; gap: .375rem; }
.kiv-stat-szam {
  font: 800 1.5rem/1 var(--font-display); color: #E04800;
  font-variant-numeric: tabular-nums;
}
.kiv-stat-cimke { font-size: 12.5px; color: #57534e; }
.kiv-sav { height: .4375rem; border-radius: 99px; background: rgba(224, 72, 0, .1); overflow: hidden; }
.kiv-sav span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #FF7A3D, #FF5C14);
  transition: width .3s ease;
}

/* ---- A mai lépés ---- */
.kiv-ma {
  background: linear-gradient(160deg, #FFF8F0, #fff 70%);
  border-left: 3px solid #FF7A3D;
  border-radius: .375rem 1.125rem 1.125rem .375rem;
  padding: 1.25rem 1.375rem; margin-bottom: 1.25rem;
}
.kiv-ma-cimke {
  display: block; font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00; margin-bottom: .5rem;
}
.kiv-ma-cim { font: 700 1.0625rem/1.3 var(--font-display); color: #1c1917; margin: 0 0 .5rem; }
.kiv-ma-szoveg { margin: 0 0 .875rem; font-size: .9375rem; line-height: 1.7; color: #44403c; white-space: pre-line; }

/* ---- A napok rácsa ---- */
.kiv-alcim { font: 700 1rem/1.3 var(--font-display); color: #292524; margin: 0 0 .875rem; }
.kiv-napok-doboz {
  background: #fff; border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.125rem; padding: 1.25rem; margin-bottom: 1.25rem;
}
.kiv-napok {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
}
.kiv-nap {
  aspect-ratio: 1; min-height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(224, 72, 0, .18);
  border-radius: .75rem; background: #fff;
  font: 700 14px/1 var(--font-display); color: #78716c;
  cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.kiv-nap:hover:not(:disabled) { border-color: #FF7A3D; color: #B83B00; }
.kiv-nap:active:not(:disabled) { transform: scale(.94); }
.kiv-nap:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .4); }
.kiv-nap--kesz {
  background: linear-gradient(160deg, #FF8A50, #E04800);
  border-color: #E04800; color: #fff;
}
/* Ami még nem jött el: halvány, de látszik - a szem tudja, meddig tart. */
.kiv-nap--zarva { background: #fafaf9; border-style: dashed; color: #d6d3d1; cursor: not-allowed; }

/* A mai nap. Eddig ugyanúgy nézett ki, mint egy elmaradt: pedig más a
   dolgunk velük. A gyűrű nem hangos, csak megtalálható. */
.kiv-nap--ma:not(.kiv-nap--kesz) {
  border-color: #E04800; border-width: 2px; color: #B83B00;
  box-shadow: 0 0 0 3px rgba(224, 72, 0, .1);
}
/* Ami elmaradt, de pótolható: halk figyelmeztetés, nem szemrehányás. */
.kiv-nap--potolhato { background: #FFFBF5; border-style: dashed; border-color: rgba(224, 72, 0, .3); }

.kiv-jelmagyarazat {
  display: flex; flex-wrap: wrap; gap: .25rem .875rem;
  margin-top: .875rem; font-size: 11.5px; color: #a8a29e;
}
.kiv-jelmagyarazat span { display: inline-flex; align-items: center; gap: .3rem; }
.kiv-pont {
  width: .6rem; height: .6rem; border-radius: .2rem; flex: none;
  border: 1px solid rgba(224, 72, 0, .18); background: #fff;
}
.kiv-pont--kesz { background: linear-gradient(160deg, #FF8A50, #E04800); border-color: #E04800; }
.kiv-pont--ma { border: 2px solid #E04800; }
.kiv-pont--potolhato { background: #FFFBF5; border-style: dashed; border-color: rgba(224, 72, 0, .3); }
.kiv-pont--zarva { background: #fafaf9; border-style: dashed; border-color: #e7e5e4; }

.kiv-napok-tipp { margin: .875rem 0 0; font-size: 12px; color: #a8a29e; line-height: 1.55; }
.kiv-hiba { margin: .625rem 0 0; font-size: 12.5px; color: #b91c1c; }

/* ---- Mérföldkő ----
   A haladássáv magában halk. A negyed, a fele és a háromnegyed olyan pont,
   ahol érdemes kimondani, hogy megvan: ezek a lemorzsolódás pontjai is. */
.kiv-merfoldko {
  margin: .75rem 0 0; padding: .5rem .75rem;
  border-radius: .625rem;
  background: rgba(224, 72, 0, .07);
  font: 600 .8125rem/1.5 var(--font-display); color: #B83B00;
}
@keyframes kiv-merfoldko-be {
  from { opacity: 0; transform: translateY(-.35rem); }
  to { opacity: 1; transform: none; }
}
.kiv-merfoldko--be { animation: kiv-merfoldko-be .32s ease both; }
@media (prefers-reduced-motion: reduce) { .kiv-merfoldko--be { animation: none; } }

/* ---- A mai nap pipálása a lépés alól ----
   Aki most olvasta el, mi a dolga, annak ne kelljen lejjebb görgetnie. */
.kiv-ma-pipa {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .25rem; padding: .5rem 1rem;
  border: 1px solid #E04800; border-radius: .625rem;
  background: #fff; color: #B83B00;
  font: 600 .875rem/1 var(--font-display); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kiv-ma-pipa::before { content: '○'; font-size: .9em; }
.kiv-ma-pipa:hover { background: #E04800; color: #fff; }
.kiv-ma-pipa:hover::before { content: '●'; }
.kiv-ma-pipa:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .4); }

/* Ahol a naphoz nincs feltöltött útmutatás: ugyanaz a doboz, halkabban. */
.kiv-ma--ures { background: #fffdfb; border-left-color: rgba(224, 72, 0, .35); }

/* ---- A vége ---- */
.kiv-kesz {
  background: linear-gradient(160deg, #FFF4EE, #fff 62%);
  border: 1px solid rgba(224, 72, 0, .22);
  border-radius: 1.25rem; padding: 1.75rem 1.5rem; margin-bottom: 1.25rem; text-align: center;
}
.kiv-kesz-jel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 99px;
  background: linear-gradient(160deg, #FF8A50, #E04800); color: #fff; margin-bottom: .875rem;
}
.kiv-kesz-cim { font: 800 1.375rem/1.25 var(--font-display); color: #1c1917; margin: 0 0 .5rem; }
.kiv-kesz-szam {
  margin: 0 0 1rem; font-size: .8125rem; color: #78716c;
  font-variant-numeric: tabular-nums;
}
.kiv-kesz-szoveg { margin: 0 auto 1.25rem; max-width: 32rem; text-align: left; }

/* ---- Megosztás ----
   A gomb nem posztol semmit: a Facebook saját ablakát nyitja meg, ahol a
   szöveget a tag hagyja jóvá. A link másolása azoknak van, akik máshova
   viszik. */
.kiv-oszt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; margin: 0 0 1.25rem;
  padding-top: 1.125rem; border-top: 1px solid rgba(224, 72, 0, .14);
}
.kiv-oszt-cim { font-size: .8125rem; color: #78716c; margin-right: .25rem; }
.kiv-oszt-gomb {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem; border-radius: .625rem;
  border: 1px solid rgba(224, 72, 0, .25); background: #fff; color: #B83B00;
  font: 600 .8125rem/1 var(--font-display); cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kiv-oszt-gomb:hover { background: rgba(224, 72, 0, .07); border-color: #E04800; }
.kiv-oszt-gomb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .4); }
.kiv-oszt-gomb--fb { background: #1877F2; border-color: #1877F2; color: #fff; }
.kiv-oszt-gomb--fb:hover { background: #0f63d1; border-color: #0f63d1; color: #fff; }
.kiv-oszt-jelzes { font-size: .75rem; color: #15803d; }

.kiv-anyagok { margin-bottom: 1.25rem; }
.kiv-tovabb {
  border-top: 1px solid rgba(224, 72, 0, .12); padding-top: 1.125rem;
  font-size: .875rem; line-height: 1.7; color: #78716c;
}
.kiv-tovabb a { color: #B83B00; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }

html[data-tema="sotet"] .kiv-ures,
html[data-tema="sotet"] .kiv-allas,
html[data-tema="sotet"] .kiv-napok-doboz { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .kiv-cim,
html[data-tema="sotet"] .kiv-ures-cim,
html[data-tema="sotet"] .kiv-kesz-cim,
html[data-tema="sotet"] .kiv-ma-cim { color: #f5f5f4; }
html[data-tema="sotet"] .kiv-nap { background: #1c1917; border-color: #292524; color: #d6d3d1; }
html[data-tema="sotet"] .kiv-nap--zarva { background: #1c1917; color: #57534e; }
html[data-tema="sotet"] .kiv-belep-doboz,
html[data-tema="sotet"] .kiv-kesz { background: linear-gradient(160deg, #322722, #231f1d 65%); border-color: #292524; }
html[data-tema="sotet"] .kiv-ma { background: linear-gradient(160deg, #322722, #231f1d 70%); }

/* ---- Árfigyelés: „szólj, ha olcsóbb lesz" ----
   Halk gomb, ami csak kattintásra nyit mezőt. Egy állandóan látszó e-mail
   mező a termék mellett hírlevél-csapdának néz ki - így a látogató maga
   kéri, és az egészen más. */
.arfig { margin-top: .875rem; }
.arfig-gomb {
  display: inline-flex; align-items: center; gap: .4375rem;
  font: 600 13px/1 var(--font-display); color: #B83B00;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  transition: color .18s ease;
}
.arfig-gomb:hover { color: #E04800; text-decoration: underline; text-underline-offset: .2em; }
.arfig-urlap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.arfig-urlap input {
  flex: 1 1 12rem; min-width: 0;
  border: 1px solid rgba(224, 72, 0, .22); border-radius: .625rem;
  padding: .5rem .75rem; font-size: .875rem;
}
.arfig-urlap input:focus {
  outline: none; border-color: #FF7A3D; box-shadow: 0 0 0 3px rgba(255, 122, 61, .18);
}
.arfig-uzenet {
  margin: .625rem 0 0; font-size: 12.5px; line-height: 1.55; color: #15803d;
}
.arfig-uzenet--hiba { color: #b91c1c; }

/* ============================================================
   TERMÉKOLDAL: BIZALMI BLOKK
   A minta zöld-lila palettája egy másik márkáé. Nálunk a napfelkelte
   színei viszik - ugyanaz a funkció, a saját nyelvünkön.
   ============================================================ */
.tbiz { margin-top: 3.5rem; }
.tbiz-racs { display: grid; gap: 1rem; }
@media (min-width: 800px) { .tbiz-racs { grid-template-columns: 1fr 1fr; } }

.tbiz-doboz {
  background: #fff; border: 1px solid rgba(224, 72, 0, .14);
  border-radius: 1.25rem; padding: 1.5rem;
}
.tbiz-doboz--kerdes { background: linear-gradient(160deg, #FFF4EE, #fff 68%); }
.tbiz-cim {
  display: flex; align-items: center; gap: .625rem;
  font: 700 1.0625rem/1.3 var(--font-display); color: #1c1917; margin: 0 0 .875rem;
}
.tbiz-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem; flex-shrink: 0;
  background: #FFF4EE; color: #B83B00;
}
.tbiz-doboz--kerdes .tbiz-ikon { background: #fff; }

.tbiz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tbiz-lista li {
  position: relative; padding-left: 1.5rem;
  font-size: .9375rem; line-height: 1.55; color: #57534e;
}
/* Pipa a felsorolás elé - a jelölő maga is állítás: „ez megvan". */
.tbiz-lista li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: .5rem; height: .3125rem;
  border-left: 2px solid #E04800; border-bottom: 2px solid #E04800;
  transform: rotate(-45deg);
}
.tbiz-szoveg { margin: 0 0 1.125rem; font-size: .9375rem; line-height: 1.7; color: #57534e; }
.tbiz-gomb { display: inline-flex; align-items: center; gap: .5rem; }

/* ---- „Miért működik egy szimbólum" ---- */
.tbiz-tudas {
  margin-top: 1rem;
  background: #FFFBF5; border: 1px solid rgba(224, 72, 0, .14);
  border-radius: 1.25rem; padding: 1.5rem;
}
.tbiz-tudas-cimke {
  display: inline-flex; align-items: center; gap: .4375rem;
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #B83B00;
  margin-bottom: .875rem;
}
.tbiz-tudas p {
  margin: 0 0 .75rem; max-width: 46rem;
  font-size: .9375rem; line-height: 1.75; color: #57534e;
}
.tbiz-tudas p:last-child { margin-bottom: 0; }
.tbiz-tudas strong { color: #292524; }

html[data-tema="sotet"] .tbiz-doboz,
html[data-tema="sotet"] .tbiz-tudas { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .tbiz-cim { color: #f5f5f4; }
html[data-tema="sotet"] .tbiz-doboz--kerdes { background: linear-gradient(160deg, #322722, #231f1d 68%); }

/* ===========================================================================
   ÉRZÉKELÉS-GYAKORLÓ  (.erz-*)
   ---------------------------------------------------------------------------
   Tíz lap, három lépés: húzás, tipp, feloldás. A felület szándékosan csendes -
   se pontszám-ünneplés, se piros X. A gyakorlat lényege a figyelem, és minden
   vizuális zaj pont abból vesz el.

   Az öt elem színe CSS-változóként érkezik (--elem-szin, --elem-keret), a
   PHP-modellből. A KERET NEM DÍSZ: a Levegő fehér korongja e nélkül
   láthatatlan lenne a világos kártyán. Ezért minden korong kap gyűrűt -
   így nem a fehér lóg ki a sorból, hanem mind az öt egyforma.
   ======================================================================== */

.erz-bevezeto {
  max-width: 46rem;
  margin: 0 0 1.75rem;
}
.erz-bevezeto p {
  margin: 0 0 .7rem;
  color: #57534e;
  line-height: 1.75;
}
.erz-bevezeto-elso {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #1c1917 !important;
}
.erz-bevezeto-kiemelt {
  margin-top: 1rem !important;
  padding: .8rem 1rem;
  border-left: 3px solid var(--accent-500);
  border-radius: 0 .6rem .6rem 0;
  background: var(--cream-100);
  font-size: .93rem;
}

/* ---- Statisztika ---- */
.erz-stat {
  margin-bottom: 1.75rem;
  padding: 1.4rem;
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: var(--sugar, 1.25rem);
  background: var(--cream-50);
}
.erz-stat-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.1rem;
}
.erz-stat-elem {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.erz-stat-szam {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-700);
  font-variant-numeric: tabular-nums;
}
.erz-stat-cimke {
  font-size: .82rem;
  color: #78716c;
  line-height: 1.4;
}
.erz-stat-cimke em {
  display: block;
  font-style: normal;
  font-size: .76rem;
  opacity: .8;
}

/* ---- Kalibráció ----
   A legfontosabb tábla az egészben: nem az számít, mennyit talál el valaki,
   hanem hogy tudja-e ELŐRE, mikor fog. Csak elég adat felett jelenik meg. */
.erz-kalibracio {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(224, 72, 0, .12);
}
.erz-kalibracio-cimke {
  display: block;
  margin-bottom: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a8a29e;
}
.erz-kalib-tabla {
  width: 100%;
  max-width: 26rem;
  border-collapse: collapse;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.erz-kalib-tabla th {
  padding: .3rem .5rem;
  font-size: .74rem;
  font-weight: 600;
  text-align: right;
  color: #a8a29e;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.erz-kalib-tabla td {
  padding: .38rem .5rem;
  text-align: right;
  color: #44403c;
  border-top: 1px solid rgba(120, 113, 108, .12);
}
.erz-kalib-tabla td:first-child {
  text-align: left;
  font-weight: 600;
  color: #1c1917;
}
.erz-kalib-tabla tr:first-child td { border-top: 0; }
.erz-kalibracio-szoveg {
  margin: .8rem 0 0;
  font-size: .88rem;
  line-height: 1.65;
  color: #57534e;
}

/* ---- A gyakorló kártya ---- */
.erz-lap {
  padding: 1.6rem;
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: var(--sugar, 1.25rem);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.erz-fej {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.erz-hely {
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 600;
  color: #78716c;
  font-variant-numeric: tabular-nums;
}
.erz-sav {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: rgba(224, 72, 0, .12);
  overflow: hidden;
}
.erz-sav > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-500);
  transition: width .4s ease;
}

/* ---- 1. lépés: húzás ---- */
.erz-huzas {
  padding: 2.2rem 1rem;
  text-align: center;
}
.erz-utmutato {
  margin: 0 0 1.2rem;
  font-size: .95rem;
  line-height: 1.7;
  color: #57534e;
}

/* ---- 2. lépés: tipp ---- */
.erz-urlap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.erz-mezo {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.erz-mezo label,
.erz-cimke {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #78716c;
}
.erz-cimke em {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .75;
}
.erz-mezo input[type="text"] {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid rgba(120, 113, 108, .25);
  border-radius: .7rem;
  background: var(--cream-50);
  font-family: inherit;
  font-size: 1rem;
  color: #1c1917;
}
.erz-mezo input[type="text"]:focus {
  outline: 2px solid var(--accent-400);
  outline-offset: 1px;
  border-color: transparent;
}
.erz-sugo {
  margin: 0;
  font-size: .8rem;
  color: #a8a29e;
}

.erz-valasztok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .6rem;
}
.erz-valasztok--biztos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 22rem;
}
.erz-valaszto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .85rem .5rem;
  border: 1px solid rgba(120, 113, 108, .22);
  border-radius: .85rem;
  background: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  color: #44403c;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.erz-valaszto:hover { border-color: var(--accent-300); }
.erz-valaszto:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}
.erz-valaszto.is-valasztva {
  border-color: var(--accent-500);
  background: var(--accent-50);
  color: var(--accent-900);
  transform: translateY(-1px);
}
.erz-jel {
  display: block;
  color: #57534e;
}
.erz-valaszto.is-valasztva .erz-jel { color: var(--accent-700); }

/* A korong: a szín MAGA az elem. Ezért nagy, és ezért van gyűrűje - a
   fehér Levegő e nélkül nem létezne a képernyőn. */
.erz-valaszto--elem { flex-direction: row; flex-wrap: wrap; }
.erz-pont {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--elem-szin, #d6d3d1);
  box-shadow: inset 0 0 0 1.5px var(--elem-keret, rgba(0, 0, 0, .18));
}
.erz-valaszto--elem em {
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: .76rem;
  color: #a8a29e;
}
.erz-valaszto--elem.is-valasztva em { color: var(--accent-700); }

.erz-lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .4rem;
}
/* A passz nem lemondás, hanem teljes értékű válasz - ezért gomb, nem link. */
.erz-passz {
  padding: .6rem 1.1rem;
  border: 1px solid rgba(120, 113, 108, .25);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: #78716c;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.erz-passz:hover { border-color: #a8a29e; color: #44403c; }
.erz-hiba {
  margin: 0;
  font-size: .88rem;
  color: #b91c1c;
}

/* ---- 3. lépés: feloldás ---- */
.erz-feloldas { text-align: center; padding: 1rem 0 .4rem; }
.erz-feloldas-cimke {
  display: block;
  margin-bottom: .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a8a29e;
}
.erz-feloldas-lap {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  border: 1px solid rgba(224, 72, 0, .16);
  border-radius: 1rem;
  background: var(--cream-50);
}
.erz-feloldas-jel { display: block; color: #44403c; }
.erz-feloldas-lap > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
}
.erz-feloldas-nev {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1c1917;
}
.erz-feloldas-elem {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 600;
  color: #57534e;
}
.erz-feloldas-eredmeny {
  max-width: 30rem;
  margin: 1.1rem auto 1.3rem;
  font-size: .95rem;
  line-height: 1.7;
  color: #57534e;
}
/* Két fokozat, nem több. Nincs külön „rossz" szín: a tévesztés nem hiba. */
.erz-feloldas-eredmeny--fel { color: var(--accent-700); font-weight: 600; }
.erz-feloldas-eredmeny--teli {
  color: var(--accent-800);
  font-weight: 700;
  font-size: 1.02rem;
}

/* ---- Indítás ---- */
.erz-inditas {
  padding: 2rem 1.6rem;
  border: 1px dashed rgba(224, 72, 0, .28);
  border-radius: var(--sugar, 1.25rem);
  background: var(--cream-50);
  text-align: center;
}
.erz-inditas p {
  max-width: 30rem;
  margin: 0 auto 1.2rem;
  line-height: 1.7;
  color: #57534e;
}

/* ---- Az előző kör ---- */
.erz-elozo { margin-top: 2.5rem; }
.erz-alcim {
  margin: 0 0 .9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c1917;
}
.erz-sorok {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.erz-sor {
  display: grid;
  grid-template-columns: 1.8rem minmax(5rem, 1fr) minmax(7rem, auto) minmax(7rem, auto);
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(120, 113, 108, .14);
  border-radius: .7rem;
  background: var(--cream-50);
  font-size: .86rem;
}
.erz-sor--passz { opacity: .6; }
.erz-sor-hely {
  font-weight: 700;
  color: #a8a29e;
  font-variant-numeric: tabular-nums;
}
.erz-sor-szo { color: #57534e; font-style: italic; }
.erz-sor-jelzo { color: #78716c; }
.erz-sor-jelzo em { font-style: normal; opacity: .65; }
.erz-sor-jelzo--jo { color: var(--accent-700); font-weight: 700; }

@media (max-width: 640px) {
  .erz-lap { padding: 1.1rem; }
  .erz-sor {
    grid-template-columns: 1.6rem 1fr;
    row-gap: .3rem;
  }
  .erz-sor-jelzo { grid-column: 2; }
  .erz-lab { flex-direction: column-reverse; align-items: stretch; }
  .erz-lab .btn { width: 100%; }
}

/* ---- Sötét mód ----
   A korongok színe NEM változik: az öt elem ugyanaz marad. Csak a felületek
   és a szövegek fordulnak - a fehér Levegő pedig sötét háttéren végre
   magától is látszik, a gyűrű ott már csak finom keret. */
html[data-tema="sotet"] .erz-lap { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .erz-stat,
html[data-tema="sotet"] .erz-inditas,
html[data-tema="sotet"] .erz-feloldas-lap,
html[data-tema="sotet"] .erz-bevezeto-kiemelt,
html[data-tema="sotet"] .erz-sor { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .erz-valaszto { background: #1c1917; border-color: #3a3330; color: #d6d3d1; }
html[data-tema="sotet"] .erz-valaszto.is-valasztva {
  background: rgba(255, 122, 61, .14);
  border-color: var(--accent-500);
  color: #ffd1b8;
}
html[data-tema="sotet"] .erz-jel { color: #a8a29e; }
html[data-tema="sotet"] .erz-valaszto.is-valasztva .erz-jel,
html[data-tema="sotet"] .erz-valaszto--elem.is-valasztva em { color: var(--accent-400); }
html[data-tema="sotet"] .erz-mezo input[type="text"] { background: #1c1917; border-color: #3a3330; color: #f5f5f4; }
html[data-tema="sotet"] .erz-bevezeto-elso,
html[data-tema="sotet"] .erz-alcim,
html[data-tema="sotet"] .erz-feloldas-nev,
html[data-tema="sotet"] .erz-kalib-tabla td:first-child { color: #f5f5f4; }
html[data-tema="sotet"] .erz-bevezeto p,
html[data-tema="sotet"] .erz-utmutato,
html[data-tema="sotet"] .erz-inditas p,
html[data-tema="sotet"] .erz-feloldas-eredmeny,
html[data-tema="sotet"] .erz-kalibracio-szoveg,
html[data-tema="sotet"] .erz-kalib-tabla td { color: #d6d3d1; }
html[data-tema="sotet"] .erz-feloldas-jel { color: #d6d3d1; }
html[data-tema="sotet"] .erz-stat-szam,
html[data-tema="sotet"] .erz-sor-jelzo--jo,
html[data-tema="sotet"] .erz-feloldas-eredmeny--fel,
html[data-tema="sotet"] .erz-feloldas-eredmeny--teli { color: var(--accent-400); }

/* ---- Halk jelzés a menüsor végén („hamarosan") ----
   Nem lakat: az mást jelent. A lakat azt mondja, „ez nem a tiéd"; ez azt,
   hogy „ez még nincs kész". A kettőt nem szabad összemosni, mert a tag
   ebből tudja, kell-e tennie valamit. */
.portal-jelzo {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(255, 122, 61, .16);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #ffac94;
  white-space: nowrap;
}
/* Összecsukott sávban a címke is eltűnik - a jelzőnek ott nincs helye. */
.portal-sav--tomor .portal-jelzo { display: none; }

/* ---- Számjelzés a menüpont végén ----
   Ahol vár valami, ott egy szám áll: hány kérdésre nem válaszoltál, mire
   jött válasz, mi érkezett azóta. Tizenhárom egyforma sorból a szem nem
   választ, egy szám viszont odahív.

   Tömör, telt narancs, nem halvány folt: ez az egyetlen elem a menüben,
   aminek szabad kiabálnia, mert cselekvést kér. */
.portal-szam {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0 .3125rem;
  height: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  /* Áttetsző alap, nem tömör narancs: a menü halk felület, egy telt folt
     minden során magára rántaná a figyelmet, és a tizenhárom sor közül
     éppen a különbséget nem lehetne meglátni. Ugyanaz a súly, mint a
     „hamarosan" jelzőé. */
  background: rgba(255, 122, 61, .16);
  color: #ffac94;
  font: 700 .625rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Az aktív soron a háttér már narancsos, ott egy fokkal erősebb kell,
   különben beleolvadna. */
.portal-link.bg-accent-500\/15 .portal-szam { background: rgba(255, 122, 61, .3); color: #ffd1b8; }

/* Összecsukott sávban a felirat eltűnik, de a „vár rád valami" jelzés kell:
   a szám ponttá zsugorodik az ikon jobb felső sarkában. */
.portal[data-collapsed="true"] .portal-szam {
  position: absolute; top: .375rem; right: .625rem;
  min-width: .5rem; height: .5rem; padding: 0;
  font-size: 0;
  /* Ekkora pontnál az áttetsző alap eltűnne, ezért itt telt szín. */
  background: var(--accent-400); box-shadow: 0 0 0 2px #1c1917;
}
@media (max-width: 1023px) {
  /* Mobilon a kicsúszó menü mindig teljes szélességű, ott a szám is az. */
  .portal[data-collapsed="true"] .portal-szam {
    position: static; min-width: 1.25rem; height: 1.25rem;
    padding: 0 .3125rem; font-size: .625rem;
    background: rgba(255, 122, 61, .16); box-shadow: none;
  }
}

/* ---- „Jelfogó - készül" lap az érzékelés-gyakorló helyén ----
   A portál fő területe teljes szélességű, a többi oldal rácsokkal tölti ki.
   Egyetlen keskeny hasáb ezért elárvul balra, és mellette marad egy üres
   sáv - pontosan ez látszott elcsúszásnak.

   A megoldás nem középre igazítás, hanem szerkezet: balra a bemutatkozás,
   jobbra a tartalom. A hely így nem üres, hanem dolgozik. Keskeny
   képernyőn a kettő egymás alá kerül, olvasható sorrendben. */
.jf {
  display: grid;
  gap: 1.6rem;
  max-width: 74rem;
  padding: 2.4rem;
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: var(--sugar, 1.25rem);
  background: var(--cream-50);
}

/* A két hasáb csak akkor nyílik szét, ha tényleg van rá hely. A 4,5rem-es
   összecsukott menüsávnál még több marad, tehát ez a szűkebb eset. */
@media (min-width: 1160px) {
  .jf {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    /* Nulla oszlopköz: a távolságot a két hasáb belső tere adja, így az
       elválasztó vonal pontosan félúton áll. Egy `gap` mellé tett border
       mindig az egyik oldalhoz tapadna. */
    column-gap: 0;
    row-gap: 2rem;
    padding: 2.8rem 3rem;
  }
  .jf-bal { padding-right: 2.75rem; }
  .jf-jobb {
    padding-left: 2.75rem;
    border-left: 1px solid rgba(224, 72, 0, .14);
  }
  .jf-labjegyzet { grid-column: 1 / -1; }
}

/* ---- Bal hasáb: a bemutatkozás ---- */
.jf-cimke {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .22rem .65rem;
  border-radius: 999px;
  background: var(--accent-100);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-800);
}
.jf-cim {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #1c1917;
}
.jf-alcim {
  margin: .45rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.jf-vezeto {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(224, 72, 0, .14);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #44403c;
}
.jf-vezeto em { font-style: italic; color: #1c1917; }

/* A név magyarázata: ez a lap legjobb mondata - egy szó, ami elmondja az
   egész módszert. Ezért kap saját felületet, nem folyik bele a szövegbe. */
.jf-nev {
  max-width: 34rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--accent-500);
  border-radius: 0 .6rem .6rem 0;
  background: var(--cream-100);
}
.jf-nev p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: #57534e;
}

/* ---- Jobb hasáb: a tartalom ---- */
.jf-alcim2 {
  margin: 0 0 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a8a29e;
}

/* Sorok, nem hasábok. A sorszám nem dísz: ez egy felépülő sorrend, a
   figyelemtartástól a saját jelzés megtalálásáig. */
.jf-sor {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-top: 1px solid rgba(120, 113, 108, .12);
}
.jf-sor:first-of-type { border-top: 0; padding-top: 0; }
.jf-sorszam {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent-500);
  font-variant-numeric: tabular-nums;
}
.jf-sor > div {
  max-width: 36rem;
  font-size: .92rem;
  line-height: 1.65;
  color: #57534e;
}
.jf-sor strong {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #1c1917;
}
.jf-sor em { font-style: italic; }

.jf-pakli {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(224, 72, 0, .14);
}
.jf-pakli p {
  max-width: 36rem;
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: #57534e;
}

/* Az öt korong: ez a pakli arca. A fehér Levegő miatt MINDEGYIK kap
   gyűrűt - így nem az egyik lóg ki a sorból, hanem egységes a készlet. */
.jf-elemek {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.5rem;
  margin: 1.5rem 0;
}
.jf-elem {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.jf-korong {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--szin);
  box-shadow: inset 0 0 0 1.5px var(--keret);
}
.jf-elem-nev {
  font-size: .88rem;
  font-weight: 600;
  color: #44403c;
}
.jf-tovabb {
  font-size: .9rem !important;
  color: #78716c !important;
}

.jf-labjegyzet {
  max-width: 40rem;
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(224, 72, 0, .14);
  font-size: .88rem;
  line-height: 1.6;
  color: #a8a29e;
}

@media (max-width: 640px) {
  .jf { padding: 1.4rem; }
  .jf-sor { grid-template-columns: 1.8rem 1fr; gap: .7rem; }
  .jf-elemek { gap: .8rem 1.1rem; }
}

/* ---- Sötét mód ----
   Az öt korong színe NEM változik: az öt minőség ugyanaz marad. Csak a
   felületek és a szövegek fordulnak - a fehér Levegő pedig sötét háttéren
   végre magától is látszik. */
html[data-tema="sotet"] .jf { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .jf-nev { background: #1c1917; }
html[data-tema="sotet"] .jf-cim,
html[data-tema="sotet"] .jf-sor strong,
html[data-tema="sotet"] .jf-vezeto em { color: #f5f5f4; }
html[data-tema="sotet"] .jf-vezeto,
html[data-tema="sotet"] .jf-sor > div,
html[data-tema="sotet"] .jf-pakli p,
html[data-tema="sotet"] .jf-nev p,
html[data-tema="sotet"] .jf-elem-nev { color: #d6d3d1; }
html[data-tema="sotet"] .jf-cimke { background: rgba(255, 122, 61, .16); color: var(--accent-300); }
html[data-tema="sotet"] .jf-alcim,
html[data-tema="sotet"] .jf-sorszam { color: var(--accent-400); }
html[data-tema="sotet"] .jf-sor { border-top-color: rgba(214, 211, 209, .1); }
html[data-tema="sotet"] .jf-jobb,
html[data-tema="sotet"] .jf-vezeto,
html[data-tema="sotet"] .jf-pakli,
html[data-tema="sotet"] .jf-labjegyzet { border-color: #332d29; }

/* ---- Privát jegyzet a kör alatt ----
   A jegyzetdoboz saját stílusa máshonnan jön (.jegyzet-doboz); itt
   csak a keret és a felhívás kap helyet. */
.erz-jegyzet { margin-top: 2.5rem; }
.erz-jegyzet-vezeto {
  max-width: 34rem;
  margin: -.4rem 0 1rem;
  font-size: .9rem;
  line-height: 1.65;
  color: #78716c;
}
html[data-tema="sotet"] .erz-jegyzet-vezeto { color: #a8a29e; }

/* ---- A korong mintázata ----
   Ugyanaz az öt kitöltés, mint a fizikai paklin: aki a dobozzal a kezében
   ül le a géphez, ugyanazt látja.

   Nem díszítés. Szürkeárnyalatban a Víz, a Föld és az Éter világossága
   majdnem azonos, a piros-barna pár pedig színtévesztésnél összecsúszik.
   Mintázat nélkül a pakli egy részüknek használhatatlan lenne.

   A rajz a gyűrű színével készül, tehát a korong egyetlen tárgy marad,
   nem lesz belőle második ábra a lapon. */
.erz-pont { position: relative; overflow: hidden; }
.erz-pont::after { content: ""; position: absolute; inset: 0; }

/* Tűz: tömör. Nincs mintázat - ez a legtelítettebb. */

/* Víz: három vízszintes vonal. A víz vízszintes. */
.erz-pont[data-elem="viz"]::after {
  background: linear-gradient(
    to bottom,
    transparent 24%, var(--elem-keret) 24%, var(--elem-keret) 34%,
    transparent 34%, transparent 45%, var(--elem-keret) 45%,
    var(--elem-keret) 55%, transparent 55%, transparent 66%,
    var(--elem-keret) 66%, var(--elem-keret) 76%, transparent 76%
  );
}

/* Levegő: üres, csak a gyűrű. A levegő az, ami nincs ott. */

/* Föld: sűrű pöttyözés. Szemcsés, mint a talaj. */
.erz-pont[data-elem="fold"]::after {
  background-image: radial-gradient(var(--elem-keret) 24%, transparent 26%);
  background-size: 4px 4px;
  background-position: 1px 1px;
}

/* Éter: koncentrikus gyűrű. A köz, ami körbevesz. */
.erz-pont[data-elem="eter"]::after {
  inset: 24%;
  border: 1.5px solid var(--elem-keret);
  border-radius: 999px;
}

/* ---- A feloldás korongja ----
   Ugyanaz a komponens, mint a választógomboknál, csak kisebb. Korábban
   pszeudoelem adta; azon nem lehetett volna mintázat. */
.erz-feloldas-elem .erz-pont {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   NYILVÁNOS KIHÍVÁS-OLDAL

   A portál kihívás-lapja bejelentkezés mögött van, tehát egy megosztott link
   ott a belépőt adja. Ez a lap az, amit megosztani érdemes: nem a
   bejelentkezésről szól, hanem arról, mibe csatlakozik az ember.
   --------------------------------------------------------------------------- */
.kny-fej { padding: 3.5rem 0 2.75rem; background: linear-gradient(165deg, #FFF4EC 0%, #fff 72%); }
.kny-fej-racs { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .kny-fej-racs { grid-template-columns: 1.25fr .85fr; } }

.kny-cimke {
  display: inline-block; margin-bottom: .875rem;
  padding: .3rem .75rem; border-radius: 99px;
  background: rgba(224, 72, 0, .1); color: #B83B00;
  font: 700 11.5px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase;
}
.kny-cim { font: 800 clamp(1.875rem, 4.5vw, 2.75rem)/1.12 var(--font-display); color: #1c1917; margin: 0 0 .875rem; }
.kny-igeret { font-size: 1.0625rem; line-height: 1.7; color: #57534e; margin: 0 0 1.5rem; max-width: 42ch; }

/* A számok. „Néhány perc" senkinek nem mond semmit, egy szám igen. */
.kny-tenyek { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-bottom: 1.75rem; }
.kny-teny { display: flex; flex-direction: column; gap: .1rem; }
.kny-teny-szam {
  font: 800 1.75rem/1 var(--font-display); color: #E04800;
  font-variant-numeric: tabular-nums;
}
.kny-teny-cimke { font-size: .8125rem; color: #78716c; }

.kny-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.kny-belepes { font-size: .875rem; color: #78716c; text-decoration: underline; text-underline-offset: 3px; }
.kny-belepes:hover { color: #B83B00; }
.kny-apro { font-size: .8125rem; line-height: 1.65; color: #a8a29e; margin: 0; max-width: 46ch; }

.kny-borito img { width: 100%; height: auto; border-radius: 1.25rem; display: block; }

.kny-szakasz { padding: 2.75rem 0; }
.kny-szakasz--halvany { background: #FFFBF7; }
.kny-bevezeto { max-width: 42rem; font-size: 1rem; line-height: 1.8; }
.kny-alcim { font: 700 1.375rem/1.25 var(--font-display); color: #1c1917; margin: 0 0 1.5rem; }

/* Három lépés. Aki eddig eljutott, azt már nem a téma érdekli, hanem hogy
   mibe kerül neki: idő, pénz, kötelezettség. */
.kny-lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 780px) { .kny-lepesek { grid-template-columns: repeat(3, 1fr); } }
.kny-lepesek li { display: flex; gap: .875rem; align-items: flex-start; }
.kny-lepes-szam {
  flex: none; width: 2rem; height: 2rem; border-radius: 99px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #FF8A50, #E04800); color: #fff;
  font: 800 .9375rem/1 var(--font-display);
}
.kny-lepesek h3 { font: 700 1rem/1.3 var(--font-display); color: #292524; margin: .2rem 0 .35rem; }
.kny-lepesek p { font-size: .9375rem; line-height: 1.65; color: #57534e; margin: 0; }

.kny-zaras { padding: 3rem 0 3.5rem; text-align: center; background: linear-gradient(165deg, #fff, #FFF4EC); }
.kny-zaras-cim { font: 800 clamp(1.5rem, 3.5vw, 2rem)/1.2 var(--font-display); color: #1c1917; margin: 0 0 .75rem; }
.kny-zaras-szoveg { font-size: 1rem; line-height: 1.7; color: #57534e; margin: 0 auto 1.75rem; max-width: 34ch; }

.kny-ures { padding: 4rem 0; text-align: center; }
.kny-ures h1 { font: 800 1.75rem/1.2 var(--font-display); color: #1c1917; margin: 0 0 .75rem; }
.kny-ures p { font-size: 1rem; line-height: 1.7; color: #57534e; margin: 0 auto 1.5rem; max-width: 40ch; }

/* A gyakorlat-blokkok sötét témában. A világos krém fejléc ott olvashatatlan
   lenne, ezért a sáv is sötétebb, csak épp a másik irányba. */
html[data-tema="sotet"] .hts-gyakorlatsav { background: #1c1917; border-color: rgba(255, 122, 61, .18); }
html[data-tema="sotet"] .hts-gyakorlat-fej {
  background: linear-gradient(100deg, rgba(224, 72, 0, .18), rgba(224, 72, 0, .07));
  border-bottom-color: rgba(255, 122, 61, .2);
}
html[data-tema="sotet"] .hts-gyakorlat-cim { color: #f5f5f4; }
html[data-tema="sotet"] .hts-blokkugras-elem { background: #292524; border-color: rgba(255, 122, 61, .25); color: #FF9C6B; }
html[data-tema="sotet"] .hts-blokkugras-elem:hover { background: #44403c; border-color: #FF7A3D; }
html[data-tema="sotet"] .hts-horgony { color: rgba(255, 122, 61, .4); }
html[data-tema="sotet"] .hts-horgony:hover { color: #FF9C6B; }

/* A betekintő elemlistája hatnál több tételnél.

   Tizennégy elem a négy méretében kétszer olyan hosszú hasábot adna, mint a
   bal oldali szöveg. Szűkebb sor, kisebb jel, két hasáb szélesebb kijelzőn:
   ugyanaz a lista, csak elolvasható marad egy pillantásra. */
.hteaser-elemek--suru { gap: .375rem; }
.hteaser-elemek--suru .hteaser-elem {
  padding: .5rem .75rem;
  border-radius: .625rem;
  font-size: .875rem;
}
.hteaser-elemek--suru .hteaser-elem-jel { width: 1.25rem; height: 1.25rem; }
.hteaser-elemek--suru .hteaser-elem-jel svg { width: 10px; height: 10px; }
@media (min-width: 1100px) {
  .hteaser-elemek--suru { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem .5rem; }
}

/* Hol olvasható a hónap könyve.

   Egy könyvajánló, ami nem mondja meg, hol lehet hozzájutni, félkész: a tag
   elolvassa, hogy érdemes, aztán neki kell utána keresnie. */
.konyv-forras {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem; padding: .45rem .85rem;
  border: 1px solid rgba(224, 72, 0, .25); border-radius: .625rem;
  background: #fff; color: #B83B00;
  font: 600 .8125rem/1 var(--font-display); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.konyv-forras:hover { background: #FFF4EE; border-color: #E04800; }
.konyv-forras:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 122, 61, .35); }
html[data-tema="sotet"] .konyv-forras { background: #292524; border-color: rgba(255, 122, 61, .3); color: #FF9C6B; }
html[data-tema="sotet"] .konyv-forras:hover { background: #44403c; }

/* A hónap könyve: elemzés és idézetek egymás mellett.

   Az elemzés korábban a teljes szélességet elfoglalta, az idézetek meg alá
   kerültek. Két baj volt vele: a sorok hosszabbak lettek, mint amit
   kényelmes olvasni, a jobb oldalon pedig üresen állt a hely. Az idézetek
   pont ide valók, mert olvasás közben is szemben vannak. */
.konyv-racs { display: grid; gap: 1.75rem; }
@media (min-width: 1000px) {
  .konyv-racs { grid-template-columns: minmax(0, 1.55fr) minmax(15rem, .95fr); gap: 2.25rem; }
  /* Az idézetek követik a görgetést, amíg van hely: hosszú elemzésnél így
     nem szakadnak el a szövegtől. */
  .konyv-idezetek { position: sticky; top: 1.5rem; }
}
.konyv-racs--egy { grid-template-columns: 1fr; }

.konyv-idezetek { display: flex; flex-direction: column; gap: .875rem; min-width: 0; }
.konyv-idezetek-cim {
  font: 700 .9375rem/1.3 var(--font-display); color: #292524; margin: 0;
}
.konyv-idezetek .highlight-box { padding: .875rem 1rem; }
.konyv-idezetek .idezet-szoveg { font-size: .9375rem; line-height: 1.6; }
.konyv-forras--oldal { align-self: flex-start; margin-top: .25rem; }

/* A diktálás sávja és súgója rejtve indul: a szkript veszi elő, ha a
   böngésző tényleg tudja a beszédfelismerést. A Brave-felismerés aszinkron,
   ezért fordított sorrendben kivillantak volna, aztán eltűnnek. */
.diktal-rejtve { display: none !important; }

/* ===== Fizetőoldal: az ajánlat kártyája ===== */
/* A kártya maga a kattintható felület, ezért jelezze is magát. A pipa a
   globális `.pipa` mintát használja, nem nyers checkboxot. */
.fiz-ajanlat { transition: border-color .18s ease, background .18s ease; }
.fiz-ajanlat:hover { border-color: #FFD9BE; }
.fiz-ajanlat:has(.fiz-ajandek:checked) { border-color: #FF7A3D; background: #FFFBF5; }

/* ===== Fizetőoldal: hozzájárulás („Ha többet ért neked") ===== */
/* Pasztillák, nem legördülő: három összeg egy pillantásra látszik. A natív
   rádiómező rejtve, a span a látható gomb - ugyanaz az elv, mint a `.pipa`-nál. */
.fiz-tipp { cursor: pointer; }
.fiz-tipp > span {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid #FFEFDC;
  background: #FFFBF5;
  font-size: .875rem;
  font-weight: 600;
  color: #57534e;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.fiz-tipp:hover > span { border-color: #FFD9BE; }
.fiz-tipp > input:checked + span {
  background: linear-gradient(135deg, #FF9A65, #FF5C14);
  border-color: transparent;
  color: #fff;
}
.fiz-tipp > input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .25);
}

/* ===== Foglalási űrlap: kuponmező ===== */
/* A nyitó egy halk szöveglink, nem gomb: a kupon a kivétel, nem a szabály. */
.bf-kupon-nyit {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: .8125rem;
  color: #78716c;
  text-decoration: underline;
  text-decoration-color: #d6d3d1;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.bf-kupon-nyit:hover { color: #44403c; text-decoration-color: #a8a29e; }

/* A kód rövid, a mező se legyen szélesebb, mint amennyi kell. Fix szélesség,
   hogy a visszajelzés MELLETTE férjen el, ne alatta. */
.bf-kupon { width: 10.5rem; max-width: 100%; flex: none; }

/* A `text-transform: uppercase` a helykitöltőt is kiabálóssá tette
   („A KAPOTT KÓD”). A beírt kód maradjon nagybetűs, a helykitöltő ne. */
input.uppercase::placeholder { text-transform: none; }

/* ---- Szívkör: emlékeztető ----
   Gomb, nem jelölőnégyzet: egy kattintás, azonnali mentés, nincs külön
   „Mentés". Egy pipához amúgy is kellene egy második kattintás, ami ennél a
   döntésnél semmit nem ad. */
.szk-emlek { margin-top: 1.25rem; }

.szk-emlek-uzenet {
  margin: 0 0 .75rem; padding: .625rem .875rem;
  background: rgba(22, 163, 74, .08); border-left: 2px solid #16a34a;
  border-radius: .5rem; font-size: .8125rem; color: #15803d; line-height: 1.55;
}

.szk-emlek-gomb {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%;
  padding: .9375rem 1rem; border-radius: .875rem; text-align: left;
  background: #fff; border: 1px solid #e7e5e4; cursor: pointer;
  transition: border-color .15s, background .15s;
  font: inherit; color: inherit;
}
.szk-emlek-gomb:hover { border-color: rgba(224, 72, 0, .35); background: #FFFBF8; }

.szk-emlek-pipa {
  flex: none; width: 1.375rem; height: 1.375rem; margin-top: .0625rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .4375rem; border: 1.5px solid #d6d3d1; background: #fff;
  font-size: .8125rem; font-weight: 800; color: #fff;
}

.szk-emlek-szoveg { display: grid; gap: .1875rem; min-width: 0; }
.szk-emlek-cim { font-weight: 600; font-size: .9375rem; color: #292524; }
.szk-emlek-alcim { font-size: .8125rem; color: #a8a29e; line-height: 1.55; }

.szk-emlek-gomb--kert { border-color: rgba(22, 163, 74, .32); background: rgba(22, 163, 74, .05); }
.szk-emlek-gomb--kert:hover { border-color: rgba(22, 163, 74, .5); background: rgba(22, 163, 74, .08); }
.szk-emlek-gomb--kert .szk-emlek-pipa { background: #16a34a; border-color: #16a34a; }
.szk-emlek-gomb--kert .szk-emlek-cim { color: #15803d; }

/* A Szívkör emlékeztető a zárolt kártyán BELÜL áll, a záró mondat alatt.
   A kártya szövege középre igazított, a doboz viszont olvasható sorokból
   áll, ezért balra rendezzük, és egy halvány vonal választja el. */
.szk-tabla .szk-emlek {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid #f0edea; text-align: left;
}
.szk-tabla .szk-emlek-uzenet { text-align: left; }

/* ---- Nyomtatás: melyik hónapot ----
   A „Nyomtatás" gomb melletti legördülő. Azért kell, mert a havi naplóban
   annyi szakasz van, ahány hónapnak volt kérdése, és a nyomtatás eddig
   mindet kivitte - három hónapnál három oldal, jórészt üresen. */
.naplo-nyomtat-valaszto {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-right: .25rem;
}
.naplo-nyomtat-valaszto-cimke {
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #a8a29e;
}
.naplo-nyomtat-valaszto select {
  font: 600 12.5px/1 var(--font-display); color: #57534e;
  background: #fff; border: 1px solid #e7e5e4;
  border-radius: .5rem; padding: .375rem .5rem; cursor: pointer;
}
.naplo-nyomtat-valaszto select:focus-visible {
  outline: none; border-color: #FF7A3D;
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .3);
}
html[data-tema="sotet"] .naplo-nyomtat-valaszto select {
  background: #231f1d; border-color: #292524; color: #d6d3d1;
}

/* ---- A napló két útja: gépelés vagy kézírás ----
   A kézírásos nem alárendelt változat, hanem ugyanannak a négy kérdésnek a
   másik fele, ezért egy sorban áll a naplóval. Telefonon a két gomb
   egymás alá kerül, mert egymás mellett a hosszabb feliratú kilógna. */
.naplo-utak { display: flex; flex-wrap: wrap; gap: .625rem; }
.naplo-utak-szoveg {
  margin: .875rem 0 0; max-width: 42rem;
  font-size: .8125rem; line-height: 1.7; color: #a8a29e;
}
html[data-tema="sotet"] .naplo-utak-szoveg { color: #a8a29e; }

/* Több munkafüzet egy szakaszban: a másodiktól csak levegő kell.
   Belső elválasztó vonal nem kell hozzá, mert az `.email-kapu` maga is
   keretes doboz - két vonal egymás mellett csak zajt csinálna. */
.email-kapu--tovabbi { margin-top: .75rem; }

/* ---- Letölthető munkafüzetek hónapok szerint ----
   A tagi tartalmak lapján, a kártyarács alatt. Hónaponként egy blokk, benne
   annyi sor, ahány füzet van - a legtöbb hónapnál kettő. */
.mf-honapok { display: grid; gap: .875rem; }
.mf-honap {
  background: #fff; border: 1px solid #f5f5f4;
  border-radius: 1rem; padding: 1rem 1.125rem;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.mf-honap-fej {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-bottom: .75rem;
}
.mf-honap-nev {
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #B83B00;
}
.mf-honap-cim {
  font: 600 .9375rem/1.4 var(--font-display); color: #44403c;
  text-decoration: none;
}
.mf-honap-cim:hover { color: var(--accent-600); }

/* Két hasáb, ahol elfér: egy hónapnak jellemzően két füzete van, és azok
   egymás mellett egy sort adnak ki, nem kettőt. */
.mf-lista { display: grid; gap: .5rem; }
@media (min-width: 640px) { .mf-lista { grid-template-columns: 1fr 1fr; } }

.mf-elem {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .75rem;
  background: #FFFBF5; border: 1px solid rgba(224, 72, 0, .12);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.mf-elem:hover { border-color: #FF7A3D; background: #FFF4EE; }
.mf-elem-ikon {
  flex: none; width: 2rem; height: 2rem; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  background: #FFF4EE; color: #E04800;
}
.mf-elem-szoveg { min-width: 0; }
.mf-elem-cim {
  display: block; font: 600 .8125rem/1.4 var(--font-display); color: #44403c;
}
.mf-elem-alcim { display: block; font-size: .75rem; color: #a8a29e; }

html[data-tema="sotet"] .mf-honap { background: #1c1917; border-color: #292524; }
html[data-tema="sotet"] .mf-honap-cim { color: #e7e5e4; }
html[data-tema="sotet"] .mf-elem { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .mf-elem:hover { background: #2a2422; border-color: #E04800; }
html[data-tema="sotet"] .mf-elem-ikon { background: #2a2422; color: #FF9A65; }
html[data-tema="sotet"] .mf-elem-cim { color: #e7e5e4; }

/* ---- Alszűrő sáv: címkék a kategórián belül ----
   Halkabb, mint a fölötte lévő kategóriasáv, és egy felirat vezeti be.
   Enélkül két egyforma gombsor állna egymás alatt, és nem derülne ki,
   hogy a második a másodiknak van alárendelve. */
.portal-temasav--alszuro {
  margin-top: -.375rem; padding-left: .125rem;
  align-items: center;
}
.portal-temasav--alszuro .portal-tema {
  font-size: .75rem; padding-top: .3125rem; padding-bottom: .3125rem;
}
.alszuro-cimke {
  font: 700 10px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: #a8a29e;
  margin-right: .125rem;
}

/* „A számla magánszemély nevére megy."
   KATA-s vállalkozásként ez nem apróbetű, hanem a fizetés feltétele, ezért
   a gomb fölött áll, nem a lábjegyzetben. Halk, de nem elrejtett: keretes
   doboz, hogy a szem megakadjon rajta, viszont ne versenyezzen a gombbal. */
.magan-szamla {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1rem 0 0;
  padding: .7rem .85rem;
  background: #FFF7F1;
  border: 1px solid rgba(224, 72, 0, .16);
  border-radius: .75rem;
  font-size: 13px; line-height: 1.55; color: #57534e;
  text-align: left;
}
.magan-szamla svg { flex-shrink: 0; margin-top: .15rem; color: #C2410C; }
.magan-szamla a { color: #C2410C; text-decoration: underline; }
.magan-szamla a:hover { color: #9A3412; }
.magan-szamla--halk {
  background: transparent;
  border-color: #efe9e2;
  font-size: 12px; color: #78716c;
}
.magan-szamla--halk svg { color: #a8a29e; }

html[data-tema="sotet"] .magan-szamla {
  background: #2a211c; border-color: rgba(255, 154, 101, .22); color: #d6d3d1;
}
html[data-tema="sotet"] .magan-szamla--halk { background: transparent; border-color: #3a3330; }
html[data-tema="sotet"] .magan-szamla a { color: #FF9A65; }

/* A magánszemély-nyilatkozat a számlás doboz alatt. A böngésző natívan
   kikényszeríti, ezért nem kell hozzá JS. */
.magan-szamla-nyil {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .5rem; padding: 0 .1rem;
  font-size: 13px; line-height: 1.5; color: #57534e; cursor: pointer;
}
.magan-szamla-nyil input { margin-top: .2rem; flex-shrink: 0; accent-color: #E04800; }
html[data-tema="sotet"] .magan-szamla-nyil { color: #d6d3d1; }

/* Logion: felmerülő kérdések. Lenyitható, mert nyolc kérdés kinyitva
   hosszabb, mint maga az értelmezés, és a tag a sajátját keresi. */
.lg-kerdesek { display: grid; gap: .5rem; }
.lg-kerdes {
  border: 1px solid #f0ebe4; border-radius: .75rem;
  background: #fff; overflow: hidden;
}
.lg-kerdes > summary {
  list-style: none; cursor: pointer;
  padding: .75rem .95rem;
  font: 600 14.5px/1.5 var(--font-display); color: #44403c;
  display: flex; align-items: flex-start; gap: .55rem;
}
.lg-kerdes > summary::-webkit-details-marker { display: none; }
.lg-kerdes > summary::before {
  content: "+"; flex-shrink: 0;
  font-weight: 700; color: #E04800; line-height: 1.35;
}
.lg-kerdes[open] > summary::before { content: "–"; }
.lg-kerdes > summary:hover { background: #FFF8F0; }
.lg-kerdes > p {
  margin: 0; padding: 0 .95rem .9rem 2.1rem;
  font-size: 14px; line-height: 1.7; color: #57534e;
}

/* Logion: összegzés. A lap utolsó blokkja, ezért elválasztó vonal fölötte. */
.hts-logion-osszegzes {
  margin-top: 1.75rem; padding-top: 1.35rem;
  border-top: 1px solid #f0ebe4;
}

html[data-tema="sotet"] .lg-kerdes { background: #231f1d; border-color: #292524; }
html[data-tema="sotet"] .lg-kerdes > summary { color: #e7e5e4; }
html[data-tema="sotet"] .lg-kerdes > summary:hover { background: #2a2421; }
html[data-tema="sotet"] .lg-kerdes > p { color: #d6d3d1; }
html[data-tema="sotet"] .hts-logion-osszegzes { border-color: #292524; }

/* Önálló, tételszerű mondat a blogposztban. Nem idézet és nem kiemelt doboz:
   a szerző saját összegző mondata, ami a bekezdések közül kiemelkedik, de nem
   versenyez a kiemelt dobozzal. Két ilyen egy poszton belül még ritmust ad,
   négy már zajt csinálna. */
.blog-tetel {
  margin: 1.75rem 0;
  padding-left: 1.125rem;
  border-left: 3px solid #FFD1B8;
  font-size: 1.0625rem; line-height: 1.7; color: #44403c;
  text-wrap: pretty;
}
html[data-tema="sotet"] .blog-tetel { color: #e7e5e4; border-left-color: rgba(255,154,101,.4); }

/* ============================================================
   ESEMÉNYNAPTÁR ("enap")
   ============================================================
   Eddig három lapon szóródott szét, ami dátumhoz kötött. Itt egy rács
   mutatja, MELYIK napon van valami, és egy lista azt, hogy MI.

   A típusok színe egy helyen dől el, és az egész lapon ugyanaz: a naptár
   pontja, a lista bal szegélye és a címke is ebből él. Egy típus egy szín -
   így a rácsból a listába átnézve nem kell újra megfejteni semmit.

   A paletta a márka narancsából indul, és onnan tér el annyira, hogy a négy
   típus elváljon. Nem szivárvány: négy szomszédos hangszín. */
:root {
  /* Az üzenetközvetítés narancsa egy fokkal mélyebb a márkáénál. Ez a
     szín nemcsak pontként áll a rácsban, hanem FEHÉR BETŰ alatt is a
     típusjelvényen - ott az #E04800 csak 4,1 kontrasztot adott, a
     követelmény 4,5. A #CC4100 ugyanaz a narancs, csak olvasható. */
  --enap-uzenet: #CC4100;     /* üzenetközvetítés - a márka narancsa */
  --enap-workshop: #B45309;   /* workshop - mélyebb, földesebb */
  --enap-meditacio: #0E7490;  /* meditáció - hűvös, csendes */
  --enap-kurzus: #6D28D9;     /* online kurzus - a legtávolabbi */
  --enap-egyeb: #78716C;      /* egyéb - a semleges kő */
}

/* ---- Fejléc ---- */
.enap-fej {
  padding: 3rem 0 2rem;
  background:
    radial-gradient(110% 90% at 15% 0%, rgba(255, 122, 61, .1) 0%, rgba(255, 122, 61, 0) 60%),
    var(--cream-50, #fffbf5);
  border-bottom: 1px solid rgba(224, 72, 0, .08);
}
@media (min-width: 768px) { .enap-fej { padding: 4rem 0 2.5rem; } }

.enap-cimke {
  display: block;
  font: 700 .6875rem/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  /* Egy fokkal sötétebb narancs, mint amit elsőre írtam: 11 pixeles,
     ritkított nagybetűnél az accent-700 csak 4,0 kontrasztot adott a krémen,
     a követelmény 4,5. Az accent-800 ugyanaz a szín, csak olvasható. */
  color: var(--accent-800, #b83b00);
  margin-bottom: .75rem;
}
.enap-cim {
  margin: 0 0 .875rem;
  font: 800 1.875rem/1.2 var(--font-display);
  color: var(--stone-800, #292524);
  text-wrap: balance;
}
@media (min-width: 768px) { .enap-cim { font-size: 2.5rem; } }

.enap-bevezeto {
  margin: 0;
  max-width: 56ch;
  font-size: 1rem; line-height: 1.7;
  color: var(--stone-600, #57534e);
}

.enap-torzs { padding: 2rem 0 4rem; }

/* ---- Szűrők. Tördelődnek, nem oldalra görögnek. ---- */
.enap-szuro {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
}

.enap-pirula {
  display: inline-flex; align-items: center; gap: .4375rem;
  /* 44 px érintési felület telefonon. Mérve is: 2.5rem csak 40-et adott. */
  padding: .5rem .875rem;
  min-height: 2.75rem;
  border: 1.5px solid rgba(224, 72, 0, .16);
  border-radius: 999px;
  background: #fff;
  font: 600 .8125rem/1 var(--font-display);
  color: var(--stone-600, #57534e);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.enap-pirula:hover { border-color: rgba(224, 72, 0, .4); color: var(--stone-800, #292524); }

.enap-pirula--aktiv {
  border-color: var(--stone-800, #292524);
  background: var(--stone-800, #292524);
  color: #fff;
}
.enap-pirula--aktiv:hover { color: #fff; }

/* Az aktív piruláé a típus színe: így a szűrés állapota is beszél. */
.enap-pirula--uzenet.enap-pirula--aktiv { border-color: var(--enap-uzenet); background: var(--enap-uzenet); }
.enap-pirula--workshop.enap-pirula--aktiv { border-color: var(--enap-workshop); background: var(--enap-workshop); }
.enap-pirula--meditacio.enap-pirula--aktiv { border-color: var(--enap-meditacio); background: var(--enap-meditacio); }
.enap-pirula--kurzus.enap-pirula--aktiv { border-color: var(--enap-kurzus); background: var(--enap-kurzus); }
.enap-pirula--ingyenes.enap-pirula--aktiv { border-color: #15803d; background: #15803d; }
.enap-pirula--aktiv .enap-pont { background: rgba(255, 255, 255, .85); }

.enap-pont {
  width: .4375rem; height: .4375rem;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--enap-egyeb);
}
.enap-pont--uzenet { background: var(--enap-uzenet); }
.enap-pont--workshop { background: var(--enap-workshop); }
.enap-pont--meditacio { background: var(--enap-meditacio); }
.enap-pont--kurzus { background: var(--enap-kurzus); }

/* ---- A naptár rácsa ---- */
.enap-racs-doboz {
  margin-bottom: 2.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .03);
}
@media (min-width: 768px) { .enap-racs-doboz { padding: 1.75rem; } }

.enap-racs-fej {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.25rem;
}
.enap-honap {
  margin: 0;
  font: 700 1.25rem/1 var(--font-display);
  color: var(--stone-800, #292524);
}

.enap-leptet { display: flex; align-items: center; gap: .375rem; }

/* A léptetők és a „Mai hónap" 44 pixelesek: ez a legkisebb felület, amit
   egy hüvelykujj biztosan eltalál. Korábban 36 volt - szebbnek tűnt, de
   telefonon mellé lehetett nyúlni. */
.enap-nyil {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(224, 72, 0, .16);
  border-radius: .625rem;
  background: #fff;
  color: var(--stone-600, #57534e);
  transition: border-color .15s ease, color .15s ease;
}
.enap-nyil:hover { border-color: var(--accent-500, #ff7a3d); color: var(--accent-700, #e04800); }

.enap-ma {
  padding: 0 .875rem;
  height: 2.75rem;
  display: inline-flex; align-items: center;
  border-radius: .625rem;
  background: var(--cream-100, #fff8f0);
  font: 600 .75rem/1 var(--font-display);
  color: var(--accent-800, #b83b00);
  text-decoration: none;
}
.enap-ma:hover { background: var(--cream-200, #ffefdc); }

.enap-napnevek,
.enap-racs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .375rem;
}
.enap-napnevek {
  margin-bottom: .5rem;
  text-align: center;
}
.enap-napnevek span {
  font: 700 .6875rem/1 var(--font-display);
  letter-spacing: .06em; text-transform: uppercase;
  /* A hét napjainak rövidítése nem dísz: a „SZE" és a „CS" mondja meg,
     melyik oszlopban keressünk. A korábbi stone-400 ehhez 2,5 kontraszt
     volt a fehéren - olvashatatlanul kevés. */
  color: var(--stone-500, #78716c);
  padding: .25rem 0;
}

/* A nap. Négyzet, hogy a rács ne csúszkáljon, ha egy hónap hat sorba fut. */
.enap-nap {
  position: relative;
  aspect-ratio: 1;
  min-height: 2.75rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1875rem;
  border: 1px solid transparent;
  border-radius: .625rem;
  background: var(--cream-50, #fffbf5);
}
.enap-nap-szam {
  font: 600 .875rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--stone-700, #44403c);
}

/* A szomszéd hónap napjai: ott vannak, de nem hívnak.
   Egy fokkal láthatóbbak lettek (stone-300 -> stone-400), mert az előző
   érték 1,5 kontrasztnál járt, ami gyengébb látással már nem szám, csak
   folt. Teljes 4,5-re nem vittem: ezek a mezők nem kattinthatók, és ha
   ugyanolyan erősek lennének, mint a hónap napjai, elveszne, hol kezdődik
   a hónap - márpedig a rács pont ezt mutatja. */
.enap-nap--kivul { background: transparent; }
.enap-nap--kivul .enap-nap-szam { color: var(--stone-400, #a8a29e); }

/* Ma. Keret, nem szín: a van-esemény jelzés a szín, és a kettőt nem
   szabad összemosni. */
.enap-nap--ma {
  border-color: var(--accent-500, #ff7a3d);
  border-width: 2px;
}
.enap-nap--ma .enap-nap-szam { color: var(--accent-800, #b83b00); font-weight: 800; }

/* Van esemény: kattintható. A kurzor és a hover is ezt mondja. */
.enap-nap--van {
  cursor: pointer;
  background: #fff;
  border-color: rgba(224, 72, 0, .18);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.enap-nap--van:hover {
  border-color: var(--accent-500, #ff7a3d);
  box-shadow: 0 2px 10px rgba(224, 72, 0, .1);
  transform: translateY(-1px);
}
.enap-nap--van:focus-visible {
  outline: 2px solid var(--accent-600, #ff5c14);
  outline-offset: 2px;
}
.enap-nap--valasztott {
  border-color: var(--accent-600, #ff5c14);
  box-shadow: inset 0 0 0 1px var(--accent-600, #ff5c14);
}

/* Kattintás olyan napra, ami a listában nincs benne (elmúlt nap, vagy hat
   hónapon túli): halk keret. Nem hiba, csak nincs hova vinni. */
.enap-nap--nincs-lista { border-color: var(--stone-300, #d6d3d1); background: var(--cream-100, #fff8f0); }

.enap-pontok {
  display: flex; align-items: center; justify-content: center;
  gap: .1875rem;
  min-height: .4375rem;
}
.enap-tobb {
  font: 700 .5625rem/1 var(--font-display);
  color: var(--stone-500, #78716c);
}

.enap-ures-honap {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(224, 72, 0, .08);
  font-size: .8125rem;
  color: var(--stone-500, #78716c);
}

/* ---- A lista ---- */
.enap-alcim {
  margin: 0 0 1.25rem;
  font: 700 1.375rem/1.2 var(--font-display);
  color: var(--stone-800, #292524);
}

/* A lista hónapcímei és a dátumbélyeg apró szövegei stone-500-ra mentek
   a stone-400 helyett. Mind a kettő INFORMÁCIÓ - melyik hónapban, melyik
   napon -, nem háttérdísz, és 10-12 pixelen a világosabb kő csak 2,5
   kontrasztot adott. */
.enap-lista-honap {
  margin: 1.75rem 0 .875rem;
  font: 700 .75rem/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-500, #78716c);
}
.enap-lista-honap:first-of-type { margin-top: 0; }

.enap-lista { display: grid; gap: .875rem; }

.enap-elem {
  display: flex;
  gap: 1.125rem;
  padding: 1.125rem;
  /* A bal szegély adja a típus színét: egy pillantásból látszik, mi ez,
     anélkül hogy a címkét el kellene olvasni. */
  border: 1px solid rgba(224, 72, 0, .1);
  border-left: 3px solid var(--enap-egyeb);
  border-radius: .875rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.enap-elem:hover { box-shadow: 0 2px 14px rgba(0, 0, 0, .05); }
.enap-elem--uzenet { border-left-color: var(--enap-uzenet); }
.enap-elem--workshop { border-left-color: var(--enap-workshop); }
.enap-elem--meditacio { border-left-color: var(--enap-meditacio); }
.enap-elem--kurzus { border-left-color: var(--enap-kurzus); }

/* A rácsból ide görgetve: rövid kiemelés, mert a szem nem találja meg
   magától, melyik elemhez érkezett. */
.enap-elem--talalt {
  border-color: var(--accent-500, #ff7a3d);
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .16);
}

.enap-datum {
  flex: 0 0 3.5rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-top: .125rem;
}
.enap-datum-nap {
  font: 800 1.5rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--stone-800, #292524);
}
.enap-datum-honapnev {
  font: 700 .625rem/1.4 var(--font-display);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--stone-500, #78716c);
}
.enap-datum-hetnap {
  margin-top: .1875rem;
  font-size: .625rem;
  color: var(--stone-500, #78716c);
}

.enap-torzs-elem { min-width: 0; flex: 1 1 auto; }

.enap-fejsor {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: .4375rem;
}

.enap-tipus {
  padding: .125rem .4375rem;
  border-radius: 999px;
  font: 700 .625rem/1.5 var(--font-display);
  letter-spacing: .03em;
  color: #fff;
  background: var(--enap-egyeb);
}
.enap-tipus--uzenet { background: var(--enap-uzenet); }
.enap-tipus--workshop { background: var(--enap-workshop); }
.enap-tipus--meditacio { background: var(--enap-meditacio); }
.enap-tipus--kurzus { background: var(--enap-kurzus); }

.enap-jel {
  display: inline-flex; align-items: center; gap: .1875rem;
  padding: .125rem .4375rem;
  border-radius: 999px;
  font: 700 .625rem/1.5 var(--font-display);
}
.enap-jel--ingyenes { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.enap-jel--visszatero { background: var(--cream-100, #fff8f0); border: 1px solid rgba(224, 72, 0, .14); color: var(--stone-500, #78716c); }

.enap-elem-cim {
  margin: 0 0 .375rem;
  font: 700 1.0625rem/1.35 var(--font-display);
}
.enap-elem-cim a { color: var(--stone-800, #292524); text-decoration: none; }
.enap-elem-cim a:hover { color: var(--accent-700, #e04800); }

.enap-elem-leiras {
  margin: 0 0 .625rem;
  max-width: 62ch;
  font-size: .875rem; line-height: 1.55;
  color: var(--stone-500, #78716c);
}

.enap-meta {
  display: flex; flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-bottom: .875rem;
}
.enap-meta-elem {
  display: inline-flex; align-items: center; gap: .3125rem;
  font-size: .8125rem;
  color: var(--stone-500, #78716c);
  font-variant-numeric: tabular-nums;
}

.enap-gombok { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; }

/* A „Megnézem" a site-wide .btn-sm méretét örökli, ami 37 pixel magas.
   Itt felvisszük 44-re. Csak itt: a .btn-sm az egész oldalon használatban
   van, és azt egy naptár-átvizsgálás közben nem írjuk át. */
.enap-gombok .btn { min-height: 2.75rem; }

@media (max-width: 520px) {
  /* Telefonon a dátum a cím FÖLÉ kerül: egymás mellett a szöveg két szóra
     szorulna össze. */
  .enap-elem { flex-direction: column; gap: .75rem; }
  .enap-datum {
    flex: none;
    flex-direction: row; align-items: baseline;
    gap: .375rem;
  }
  .enap-datum-nap { font-size: 1.25rem; }
  .enap-datum-hetnap { margin-top: 0; }
}

.enap-ures {
  padding: 2rem 1.25rem;
  border: 1px dashed rgba(224, 72, 0, .24);
  border-radius: .875rem;
  background: var(--cream-50, #fffbf5);
  text-align: center;
}
.enap-ures p { margin: 0; font-size: .9375rem; color: var(--stone-500, #78716c); }
.enap-ures a { color: var(--accent-700, #e04800); text-decoration: underline; }

/* ---- Naptáramba ----
   Halk, nem gomb-külsejű: ez nem a lap fő cselekvése. Az esemény
   megnyitása az; ez csak kényelem annak, aki már eldöntötte, hogy ott lesz.
   Egy narancs gomb itt elvinné a figyelmet a jelentkezésről. */
.ement { position: relative; }

.ement-nyito {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .75rem;
  /* Halk, de nem kicsi: a visszafogottság a színé és a keretéé, nem a
     méreté. 44 px, hogy telefonon is el lehessen találni. */
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: 600 .8125rem/1 var(--font-display);
  color: var(--stone-500, #78716c);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ement-nyito:hover {
  color: var(--stone-800, #292524);
  border-color: rgba(224, 72, 0, .18);
  background: var(--cream-50, #fffbf5);
}
.ement-nyito:focus-visible { outline: 2px solid var(--accent-600, #ff5c14); outline-offset: 2px; }

.ement-lap {
  position: absolute;
  left: 0; top: calc(100% + .375rem);
  z-index: 20;
  min-width: 14rem;
  padding: .375rem;
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
}
.ement-lap[hidden] { display: none; }

.ement-elem {
  display: block;
  padding: .5rem .625rem;
  border-radius: .5rem;
  font-size: .8125rem;
  color: var(--stone-700, #44403c);
  text-decoration: none;
}
.ement-elem:hover { background: var(--cream-100, #fff8f0); color: var(--accent-700, #e04800); }
.ement-apro {
  display: block;
  font-size: .6875rem;
  color: var(--stone-400, #a8a29e);
}

/* ---- Hamarosan induló kurzusok ---- */
.enap-kurzusok { margin-top: 3rem; }

.enap-siker {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: .75rem;
  background: #f0fdf4;
  font-size: .875rem;
  color: #15803d;
}

.enap-kurzus {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(109, 40, 217, .18);
  border-radius: 1rem;
  background: #fff;
}
@media (min-width: 820px) {
  .enap-kurzus { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

.enap-kurzus-cim {
  margin: .5rem 0 .375rem;
  font: 700 1.1875rem/1.3 var(--font-display);
  color: var(--stone-800, #292524);
}
.enap-kurzus-leiras {
  margin: 0 0 .625rem;
  font-size: .875rem; line-height: 1.6;
  color: var(--stone-500, #78716c);
}
.enap-kurzus-mikor {
  margin: 0;
  font-size: .8125rem;
  color: var(--stone-600, #57534e);
}
.enap-kurzus-mikor strong { color: var(--stone-800, #292524); }

.enap-erdekel {
  padding: 1rem;
  border-radius: .75rem;
  background: var(--cream-50, #fffbf5);
  border: 1px solid rgba(224, 72, 0, .1);
}
.enap-erdekel-cim {
  margin: 0 0 .25rem;
  font: 700 .9375rem/1.3 var(--font-display);
  color: var(--stone-800, #292524);
}
.enap-erdekel-szoveg {
  margin: 0 0 .75rem;
  font-size: .8125rem; line-height: 1.55;
  color: var(--stone-500, #78716c);
}
.enap-erdekel-szoveg strong { color: var(--accent-700, #e04800); }

.enap-erdekel-sor { display: flex; flex-wrap: wrap; gap: .5rem; }
.enap-erdekel-sor input {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(224, 72, 0, .2);
  border-radius: .5rem;
  background: #fff;
  font-size: .875rem;
}
.enap-erdekel-sor input:focus {
  outline: none;
  border-color: var(--accent-500, #ff7a3d);
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .14);
}

.enap-hiba {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: #b91c1c;
}
.enap-erdekel-apro {
  margin: .625rem 0 0;
  font-size: .6875rem; line-height: 1.5;
  color: var(--stone-400, #a8a29e);
}

/* ---- Naptár és a kiválasztott nap, egymás mellett ----
   A rács önmagában csak annyit mond, hogy VAN valami azon a napon. Azt,
   hogy MI, el kell tudni olvasni anélkül, hogy a használó elhagyná a
   naptárat - ezért a rács kisebb lett, és mellé került a nap panelje. */
.enap-ketto {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  /* A rács keskenyebb: hét oszlop négyzetes napokkal elfér 25.5rem-ben,
     és a maradék helyet a panel kapja - ott van a szöveg.

     Miért pont 25.5: ebből a kártya belső tere és a hat hézag levonása
     után napokként 45 pixel marad. 24rem-mel 41 volt, ami egérrel még
     jó, de egy táblagépen már az ujj alatt kicsi. */
  .enap-ketto { grid-template-columns: minmax(0, 25.5rem) minmax(0, 1fr); }

  /* A rács napjai kisebbek: a naptár itt már nem a lap főszereplője,
     hanem a választó hozzá.

     Ez a zsugorítás KIZÁRÓLAG ide tartozik. Korábban töréspont nélkül
     állt, így telefonon és táblagépen is 36 pixeles nap mezőket csinált,
     pedig ott nincs egér, és ott van a legnagyobb szükség a felületre.
     Kétszáz pixelnyi hely alatt a rács egyébként is teljes szélességű. */
  .enap-ketto .enap-nap { min-height: 2.25rem; }
  .enap-ketto .enap-nap-szam { font-size: .8125rem; }
}

.enap-ketto .enap-racs-doboz { margin-bottom: 0; }

@media (max-width: 899px) {
  /* Egy hasábban a rács a teljes szélességet megkapná, és mivel a nap
     mezője négyzet, egy 768 pixeles táblagépen kétszáz pixeles kockák
     lennének belőle: a naptár elfoglalná az egész képernyőt, és alig
     mondana valamit.

     Egy hónap rácsa nem lesz jobb attól, hogy nagyobb. 26rem-ben a hét
     nap kényelmes, 46 pixel körüli mező, és középre állítva nem lóg el
     a lap egyik oldalára. Telefonon ez a korlát nem aktív, ott a lap
     amúgy is keskenyebb.

     A width: 100% nem felesleges, és a középre állítás sem margin: auto.
     Ez a doboz RÁCS-ELEM: az automatikus oldalmargó egy rács-elemet a
     tartalmához zsugorít, nem a helyére igazít - mérve 192 pixelre ment
     össze, és a napok 24 pixel szélesek lettek. A justify-self állítja a
     helyére, a width: 100% pedig kitölteti a korlátig. */
  .enap-ketto .enap-racs-doboz {
    width: 100%;
    max-width: 26rem;
    justify-self: center;
  }
}

/* A kiválasztott nap: tömör narancs keret ÉS halvány alap. A rácsban ez
   az egyetlen erős jelzés - abból kell látszania, melyik napot olvassuk
   épp a jobb oldalon. */
.enap-nap--valasztott {
  border-color: var(--accent-600, #ff5c14) !important;
  border-width: 2px;
  background: var(--accent-50, #fff4ee);
}

/* ---- A nap panelje ---- */
.enap-nappanel {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid rgba(224, 72, 0, .12);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .03);
}
@media (min-width: 768px) { .enap-nappanel { padding: 1.5rem; } }

.enap-nappanel-fej {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid rgba(224, 72, 0, .1);
}
.enap-nappanel-datum {
  font: 800 1.375rem/1 var(--font-display);
  color: var(--stone-800, #292524);
}
.enap-nappanel-hetnap {
  font-size: .875rem;
  color: var(--stone-500, #78716c);
}
.enap-nappanel-hetnap strong { color: var(--accent-700, #e04800); }

.enap-nappanel-ures { text-align: center; padding: 1.5rem .5rem; }
.enap-nappanel-cim {
  margin: 0 0 .5rem;
  font: 700 1.0625rem/1.3 var(--font-display);
  color: var(--stone-700, #44403c);
}
.enap-nappanel-ures p {
  margin: 0;
  font-size: .875rem; line-height: 1.6;
  color: var(--stone-500, #78716c);
}

/* Egy esemény a panelen. Ugyanaz a nyelv, mint a lenti listában: bal
   szegély adja a típus színét. */
.enap-napesemeny {
  padding: 1rem 1.125rem;
  border: 1px solid rgba(224, 72, 0, .1);
  border-left: 3px solid var(--enap-egyeb);
  border-radius: .75rem;
  background: var(--cream-50, #fffbf5);
}
.enap-napesemeny + .enap-napesemeny { margin-top: .75rem; }
.enap-napesemeny--uzenet { border-left-color: var(--enap-uzenet); }
.enap-napesemeny--workshop { border-left-color: var(--enap-workshop); }
.enap-napesemeny--meditacio { border-left-color: var(--enap-meditacio); }
.enap-napesemeny--kurzus { border-left-color: var(--enap-kurzus); }

.enap-napesemeny-cim {
  margin: 0 0 .375rem;
  font: 700 1.0625rem/1.35 var(--font-display);
}
.enap-napesemeny-cim a { color: var(--stone-800, #292524); text-decoration: none; }
.enap-napesemeny-cim a:hover { color: var(--accent-700, #e04800); }

.enap-napesemeny-leiras {
  margin: 0 0 .625rem;
  font-size: .875rem; line-height: 1.55;
  color: var(--stone-500, #78716c);
}

/* Elmúlt alkalom: ott van, de nem hív. A naptárban a múlt is érdekes -
   abból látszik, hogy itt rendszeresen történik valami. */
.enap-jel--elmult {
  background: var(--cream-100, #fff8f0);
  border: 1px solid rgba(120, 113, 108, .2);
  color: var(--stone-500, #78716c);
}


/* ---- Eseménynaptár: pótlások ----
   Ellenőrzéssel derült ki, hogy a lapon használt három osztályra nem volt
   szabály. Kettő csak visszaesett az alapértelmezésre, a harmadiknak
   viszont (az aktív „Egyéb" szűrő) a semleges sötét maradt, miközben a
   többi típus a saját színét kapja. */
.enap-lista-doboz { margin-bottom: 1rem; }

.enap-pont--egyeb { background: var(--enap-egyeb); }
.enap-pirula--egyeb.enap-pirula--aktiv {
  border-color: var(--enap-egyeb);
  background: var(--enap-egyeb);
}

/* ---- Eseménynaptár telefonon ----
   Hét oszlop egy naptárban nem kérdés: a hét hét napból áll, és a hely
   hetedére oszlik. A kártya belső terét és a rács hézagát ezért
   szűkítjük: a legkisebb elterjedt kijelzőn (360 px) így is kijön a
   44 pixeles mező - mérve 43,7 × 44.

   Az aspect-ratio itt kikapcsol. Négyzetre kényszerítve a magasság a
   szélességet követné lefelé; így viszont a szélesség annyi, amennyi
   belefér, a magasságot pedig az alap .enap-nap 44-en tartja. */
@media (max-width: 480px) {
  .enap-racs-doboz { padding: .875rem; border-radius: 1rem; }
  .enap-napnevek,
  .enap-racs { gap: .25rem; }
  /* Négyzet helyett „ami belefér szélességben, 44 magasan". */
  .enap-nap { aspect-ratio: auto; }

  /* A hónap neve és a léptető egymás alá: egy sorban a „2026. szeptember"
     mellett a három gombnak nem marad hely. */
  .enap-racs-fej { flex-direction: column; align-items: stretch; gap: .625rem; }
  .enap-leptet { justify-content: space-between; }

  .enap-nappanel { padding: 1rem; border-radius: 1rem; }
  .enap-nappanel-datum { font-size: 1.25rem; }

  /* A szűrőpirulák két sorba tördelődnek; a betű egy fokkal kisebb, hogy
     ne négy sor legyen belőlük. */
  .enap-pirula { padding: .4375rem .6875rem; font-size: .75rem; }
  .enap-pirula--halk { padding: .3125rem .5625rem; }

  .enap-cim { font-size: 1.5rem; }
  .enap-fej { padding: 2rem 0 1.5rem; }
}

/* A naptárba mentés lenyílója ne lógjon ki a képernyőről.

   Itt korábban jobbra igazítás állt. Az akkor volt jó, amikor a nyitó
   doboz a kártya teljes szélességét felvette - amióta a gombhoz simul,
   a jobbra igazítás a panel BAL szélét vitte le a képernyőről: telefonon
   a „Google Naptár" fele kilógott. A gomb bal széléhez igazodik, és a
   képernyőnél nem lehet szélesebb. */
@media (max-width: 560px) {
  .ement-lap {
    left: 0;
    right: auto;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
  }
}

/* A nap panelje. A böngésző a [hidden] elemet alapból elrejti, de itt
   kimondjuk: ez a rejtés a naptár működésének a lényege, nem ráhagyás. */
.enap-nappanel-lap { display: block; }
.enap-nappanel-lap[hidden] { display: none; }

/* ===================================================================
   VÁRÓLISTA ("vlista")

   Ott áll, ahol egyébként a vásárlás gombja lenne, amíg a fizetés
   szünetel. Nem hirdetés és nem hibaüzenet: egy nyugodt doboz két
   mezővel. Halvány krém alap, nem narancs - a figyelem maradjon a
   terméken, ez csak a következő lépés.
   =================================================================== */

.vlista {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(224, 72, 0, .14);
  border-radius: 1rem;
  background: var(--cream-50, #fffbf5);
}
@media (min-width: 768px) { .vlista { padding: 1.5rem; } }

.vlista-cim {
  margin: 0 0 .375rem;
  font: 700 1rem/1.3 var(--font-display);
  color: var(--stone-800, #292524);
}

.vlista-szoveg {
  margin: 0 0 1rem;
  font-size: .875rem; line-height: 1.6;
  color: var(--stone-600, #57534e);
}

/* Egymás alatt telefonon, egymás mellett attól, hogy elférnek. A két mező
   egyforma széles: egyik sem fontosabb a másiknál. */
.vlista-mezok {
  display: grid;
  gap: .75rem;
  margin-bottom: .875rem;
}
@media (min-width: 560px) {
  .vlista-mezok { grid-template-columns: 1fr 1fr; }
}

.vlista-mezo label {
  display: block;
  margin-bottom: .3125rem;
  font: 600 .75rem/1 var(--font-display);
  color: var(--stone-600, #57534e);
}
.vlista-mezo input {
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(224, 72, 0, .18);
  border-radius: .625rem;
  background: #fff;
  font-size: 1rem;
  color: var(--stone-800, #292524);
}
/* A betűméret telefonon 16 px marad. Kisebbnél az iOS ráközelít a mezőre,
   és a lap elcsúszik - az pedig úgy néz ki, mintha elromlott volna. */
.vlista-mezo input::placeholder { color: var(--stone-400, #a8a29e); }
.vlista-mezo input:focus {
  outline: 2px solid var(--accent-600, #ff5c14);
  outline-offset: 1px;
  border-color: transparent;
}

.vlista-pipa {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-bottom: 1rem;
  font-size: .8125rem; line-height: 1.5;
  color: var(--stone-600, #57534e);
  cursor: pointer;
}
.vlista-pipa input {
  flex: 0 0 auto;
  width: 1.125rem; height: 1.125rem;
  margin-top: .125rem;
  accent-color: var(--accent-600, #ff5c14);
}
.vlista-pipa a { color: var(--accent-800, #b83b00); text-decoration: underline; }

.vlista-urlap .btn { min-height: 2.75rem; }

.vlista-apro {
  margin: .75rem 0 0;
  font-size: .75rem; line-height: 1.5;
  color: var(--stone-500, #78716c);
}

.vlista-hiba {
  margin: .3125rem 0 0;
  font-size: .75rem;
  color: #b91c1c;
}

/* A visszajelzés. Zöld, mert sikerült - és marad a doboz helyén, hogy a
   szem oda térjen vissza, ahova az űrlapot küldte. */
.vlista-kesz {
  display: flex; align-items: flex-start; gap: .5rem;
  color: #15803d;
  font-size: .9375rem; line-height: 1.5;
}
.vlista-kesz svg { flex: 0 0 auto; margin-top: .125rem; }

/* ---- „Most nem vásárolható" jelzés ----
   A gomb helyén álló nyugodt mondat. Nem piros és nem figyelmeztetés:
   nem történt hiba, csak még nincs itt az ideje. */
.nemvehet {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  border: 1px dashed rgba(224, 72, 0, .3);
  border-radius: .75rem;
  background: var(--cream-100, #fff8f0);
  font: 600 .875rem/1.3 var(--font-display);
  color: var(--accent-800, #b83b00);
}
.nemvehet svg { flex: 0 0 auto; }

/* ---- „A hónap útja" kártya az oldalsávban ----
   A portál gerince. Eddig ugyanolyan sor volt, mint a többi tizenkilenc,
   és a szem nem talált rá. Három dolgot mond meg egy pillantás alatt:
   melyik hónap, hol tartasz benne, és mi a mai dolgod.

   Szaggatott perem, amíg nem ott állsz - ugyanaz a nyelv, mint a régi
   kiemelt soron; telikeret és narancs alap, ha igen. */
.portal-honap {
  position: relative;
  display: block;
  padding: .625rem .75rem .6875rem;
  border: 1px dashed rgba(255, 122, 61, .45);
  border-radius: .75rem;
  color: #FFB088;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.portal-honap:hover {
  border-color: rgba(255, 122, 61, .8);
  background: rgba(255, 122, 61, .08);
}
.portal-honap--aktiv {
  border-style: solid;
  border-color: transparent;
  background: rgba(255, 122, 61, .15);
}
/* Az aktív sor bal oldali narancs füle, ugyanúgy, mint a sima menüsoroknál. */
.portal-honap--aktiv::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.5rem;
  border-radius: 0 999px 999px 0;
  background: var(--accent-500);
}

.portal-honap-fej { display: flex; align-items: center; gap: .625rem; }

.portal-honap-ikon {
  flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .5rem;
  background: rgba(255, 122, 61, .18);
  color: var(--accent-400);
}

.portal-honap-szoveg { min-width: 0; flex: 1 1 auto; }

.portal-honap-cim {
  display: block;
  font: 700 .8125rem/1.2 var(--font-display);
  color: #fff;
}
/* A hónap és a téma neve: halk, de olvasható - nem #A8A29E, mert azon a
   sötét alapon a kontraszt 4.5:1 alá esik. */
.portal-honap-alcim {
  display: block;
  margin-top: .0625rem;
  font-size: .6875rem; line-height: 1.3;
  color: #c7bfb8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.portal-honap-szam {
  flex: 0 0 auto;
  font: 700 .6875rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-400);
}

/* Haladássáv: a SAJÁT pipák aránya, nem az eltelt idő. */
.portal-honap-sav {
  display: block;
  height: 3px;
  margin: .5rem 0 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.portal-honap-sav > span {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--accent-500);
}

.portal-honap-ma {
  display: block;
  margin-top: .4375rem;
  font-size: .6875rem; line-height: 1.3;
  color: #c7bfb8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Összecsukott sávban csak az ikon marad: a .portal-label elemeket ugyanaz
   a szabály rejti el, mint a menüsorok feliratát, a kártya pedig a sima
   menüsor méretére húzódik össze. */
.portal[data-collapsed="true"] .portal-honap {
  padding: .5rem 0;
  text-align: center;
}
.portal[data-collapsed="true"] .portal-honap-fej { justify-content: center; gap: 0; }
.portal[data-collapsed="true"] .portal-honap--aktiv::before { height: 1.25rem; }



/* ============================================================
   TARTALOMTÁR ("tt")
   ============================================================
   Öt külön lap volt. Két szűrő: típus (darabszámmal) és téma.

   A pirulák TÖRDELŐDNEK, nem oldalra görögnek: telefonon egy
   elgörgethető sáv hátulja nem létezik a használó számára. */
.tt-szuro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.tt-szuro--tema {
  padding-top: .875rem;
  border-top: 1px solid rgba(224, 72, 0, .1);
  margin-bottom: 1.25rem;
}

.tt-szuro-cimke {
  font: 700 .625rem/1 var(--font-display);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--stone-400, #a8a29e);
  margin-right: .25rem;
}

.tt-pirula {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  /* 44 px érintési felület. A megjegyzés korábban ezt állította, az érték
     viszont 2.25rem volt - vagyis 36 px. Megmérve derült ki. */
  padding: .4375rem .875rem;
  min-height: 2.75rem;
  border: 1.5px solid rgba(224, 72, 0, .16);
  border-radius: 999px;
  background: #fff;
  font: 600 .8125rem/1 var(--font-display);
  color: var(--stone-600, #57534e);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tt-pirula:hover { border-color: rgba(224, 72, 0, .4); color: var(--stone-800, #292524); }

.tt-pirula--aktiv {
  border-color: var(--accent-500, #ff7a3d);
  background: var(--accent-500, #ff7a3d);
  color: #fff;
}
.tt-pirula--aktiv:hover { color: #fff; }

/* A témapirulák halkabbak: a típus az elsődleges szűrő.

   A magasságuk viszont ugyanaz a 44 px. A halkítás a betűé és a peremé,
   nem a mérete: egy 32 pixeles pirulát telefonon nem lehet eltalálni, és
   a téma pont az, amire a tag a legtöbbször rákattint. */
.tt-pirula--halk {
  padding: .3125rem .75rem;
  min-height: 2.75rem;
  border-width: 1px;
  font-size: .75rem;
}

.tt-db {
  font-variant-numeric: tabular-nums;
  font-size: .6875rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: rgba(224, 72, 0, .1);
  color: var(--accent-700, #9a3412);
}
.tt-pirula--aktiv .tt-db { background: rgba(255, 255, 255, .25); color: #fff; }

/* A TAGI ANYAG szaggatott peremet kap.

   Ez az, amiért valaki fizet; a másik négy típus részben nyilvános. Ugyanaz
   a jelölés, mint a menüben „A hónap útja" kártyáján - egy nyelv az egész
   felületen, nem minden felületen külön ötlet.

   Aktív állapotban tömör: ha épp azt nézed, a szaggatott perem már nem
   megkülönböztet, csak zajt ad a telt narancs háttérhez. */
.tt-pirula--tagi {
  border-style: dashed;
  border-color: rgba(224, 72, 0, .55);
  color: var(--accent-800, #b83b00);
}
.tt-pirula--tagi:hover {
  border-color: var(--accent-600, #ff5c14);
  color: var(--accent-800, #b83b00);
}
.tt-pirula--tagi.tt-pirula--aktiv {
  border-style: solid;
  color: #fff;
}

/* ---- Keresés ----
   A tár tetején, a szűrők FÖLÖTT: aki tudja, mit keres, ne a pirulák
   között kezdje. A mező teljes szélességű - egy keskeny keresődoboz azt
   üzeni, hogy rövid szavakra számítunk. */
.tt-kereso {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

/* Az ikon és a törlés gomb ehhez a dobozhoz igazodik, nem az űrlaphoz.
   Enélkül telefonon, ahol a gomb a mező alá tördelődik, az ikon a két sor
   közé csúszott - az űrlap közepére, nem a mezőébe. */
.tt-kereso-mezodoboz {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  min-width: 0;
}

.tt-kereso-ikon {
  position: absolute;
  left: .875rem;
  display: inline-flex;
  color: var(--stone-400, #a8a29e);
  pointer-events: none;
}

.tt-kereso-mezo {
  flex: 1 1 auto;
  min-width: 0;
  /* A bal oldali hely az ikoné, a jobb a törlés gombé. */
  padding: .625rem 2.75rem .625rem 2.75rem;
  min-height: 2.75rem;
  border: 1.5px solid rgba(224, 72, 0, .16);
  border-radius: 999px;
  background: #fff;
  /* 16 px: ennél kisebbnél az iOS ráközelít a mezőre, és a lap elcsúszik -
     az pedig úgy néz ki, mintha elromlott volna. */
  font-size: 1rem;
  color: var(--stone-800, #292524);
}
.tt-kereso-mezo::placeholder { color: var(--stone-400, #a8a29e); }
.tt-kereso-mezo:focus {
  outline: 2px solid var(--accent-600, #ff5c14);
  outline-offset: 1px;
  border-color: transparent;
}
/* A böngésző saját törlés-keresztje a type="search" mezőn: a sajátunk van
   helyette, ami JS nélkül is működik (link, nem gomb). */
.tt-kereso-mezo::-webkit-search-cancel-button { display: none; }

.tt-kereso-torles {
  position: absolute;
  right: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 999px;
  color: var(--stone-500, #78716c);
  text-decoration: none;
}
.tt-kereso-torles:hover { background: rgba(224, 72, 0, .08); color: var(--accent-800, #b83b00); }

.tt-kereso-gomb {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1.5px solid rgba(224, 72, 0, .16);
  border-radius: 999px;
  background: #fff;
  font: 600 .8125rem/1 var(--font-display);
  color: var(--stone-600, #57534e);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tt-kereso-gomb:hover { border-color: rgba(224, 72, 0, .4); color: var(--stone-800, #292524); }

/* Hálózati hiba: a mező egy pillanatra jelez, hogy nem némán bukott el. */
.tt-kereso--hiba .tt-kereso-mezo { border-color: #dc2626; }

.tt-kereso-sugo {
  margin: 0 0 1.25rem;
  padding-left: .875rem;
  font-size: .75rem;
  color: var(--stone-500, #78716c);
}

/* Telefonon a gomb a mező ALÁ kerül: egymás mellett a mezőnek alig
   maradna hely, és a keresés a mezőről szól, nem a gombról. */
@media (max-width: 560px) {
  .tt-kereso { flex-wrap: wrap; }
  .tt-kereso-mezodoboz { flex: 1 1 100%; }
  .tt-kereso-gomb { flex: 1 1 100%; }
}

/* Amíg a találatok cserélődnek, halványulnak. Nem pörgő kerék: negyed
   másodpercről van szó, és egy felvillanó kerék zavaróbb a halványodásnál. */
[data-tt-talalatok][aria-busy="true"] { opacity: .55; transition: opacity .12s ease; }

/* A hónap-pirulán a téma neve: halkabban, mint a hónap. A hónap az
   azonosító („2026. augusztus"), a téma a kapaszkodó („Jelenlét") - aki a
   dátumot nem tudja fejből, az a témát keresi. */
.tt-pirula-tema {
  color: var(--stone-500, #78716c);
  font-weight: 500;
}
.tt-pirula-tema::before { content: "· "; }
.tt-pirula--aktiv .tt-pirula-tema { color: rgba(255, 255, 255, .85); }

.tt-megjegyzes,
.tt-talalat {
  margin: 0 0 1rem;
  font-size: .8125rem;
  color: var(--stone-500, #78716c);
}
.tt-talalat { font-weight: 600; }

/* ============================================================
   MUNKAFÜZET-KÁRTYA ("fkart")

   A füzet nem olvasnivaló, hanem letöltés - és ez ránézésre látszódjon.
   Nincs borítóképe és nincs kivonata, így egy sima tartalom-kártyába
   öltöztetve csak egy üres kép fölötti cím lenne belőle.

   Szaggatott perem, mint a „Tagi tartalmak" pirulán és „A hónap útja"
   kártyáján: egy nyelv arra, ami a tagságé.
   ============================================================ */

.fkart {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.125rem;
  border: 1.5px dashed rgba(224, 72, 0, .35);
  border-radius: 1rem;
  background: var(--cream-50, #fffbf5);
}

.fkart-fej {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}

.fkart-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  flex: 0 0 auto;
  border-radius: .625rem;
  background: var(--accent-100, #ffe8db);
  color: var(--accent-800, #b83b00);
}

.fkart-cimke {
  font: 700 .6875rem/1 var(--font-display);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-800, #b83b00);
}

.fkart-cim {
  margin: 0 0 .375rem;
  font: 700 .9375rem/1.35 var(--font-display);
  color: var(--stone-800, #292524);
}

.fkart-alcim {
  margin: 0 0 1rem;
  font-size: .8125rem; line-height: 1.55;
  color: var(--stone-600, #57534e);
}

/* A gomb a kártya ALJÁRA kerül, akármilyen hosszú a cím: egy rácsban a
   gombok egy vonalban legyenek, különben lépcsőzik a sor. */
.fkart-gomb {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem;
}

/* Nem tagnak: látja, hogy van füzet, de nem viszi el. */
.fkart--zart { opacity: .75; }
.fkart-zar {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem;
  font: 600 .75rem/1 var(--font-display);
  color: var(--stone-500, #78716c);
  text-decoration: none;
}
.fkart-zar:hover { color: var(--accent-800, #b83b00); }



/* ===================================================================
   VÁLLALATOKNAK ("vall", "vnav", "vcikk", "vkapcsolat")

   Ugyanaz a márka, másik hangfekvés. Az oldal többi része krémen ül,
   meleg és közeli; ez a szakasz vezérigazgatóknak szól, akik ÁTFUTJÁK a
   lapot. Ezért: fehér alap, nagyobb levegő, feszesebb tipográfia, semmi
   lebegő folt és semmi spirituális képi utalás.

   A narancs megmarad, de keveset kap: a jelzésé, nem a háttéré.
   =================================================================== */



/* ---- A szakasz alapja ---- */
.vall { background: #fff; color: var(--stone-700, #44403c); }
.vall p { line-height: 1.75; }

.vall-hero { padding: 4.5rem 0 3rem; }
@media (min-width: 768px) { .vall-hero { padding: 6rem 0 4rem; } }
.vall-hero--kicsi { padding: 3rem 0 2rem; }

.vall-cimke {
  display: inline-block;
  margin-bottom: 1.25rem;
  font: 700 .6875rem/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-800, #b83b00);
}

/* A cím nagy, de nem kiabál. A tördelés kézzel van megadva a nézetben,
   mert a két mondat KÜLÖN sorban mond mást, mint egyben. */
.vall-cim {
  margin: 0 0 1.5rem;
  font: 700 2.125rem/1.15 var(--font-display);
  letter-spacing: -.02em;
  color: var(--stone-900, #1c1917);
  text-wrap: balance;
}
@media (min-width: 768px) { .vall-cim { font-size: 3.25rem; } }
.vall-cim--kicsi { font-size: 1.875rem; }
@media (min-width: 768px) { .vall-cim--kicsi { font-size: 2.5rem; } }

.vall-bevezeto {
  margin: 0;
  max-width: 44rem;
  font-size: 1.0625rem;
  color: var(--stone-600, #57534e);
}
@media (min-width: 768px) { .vall-bevezeto { font-size: 1.125rem; } }

.vall-gombok {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 2rem;
}
.vall-gomb-halk {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  font: 600 .9375rem/1 var(--font-display);
  color: var(--stone-700, #44403c);
  text-decoration: none;
}
.vall-gomb-halk:hover { color: var(--accent-800, #b83b00); }

/* ---- Számok forrással ----
   A lap elején, mert egy vezető itt dönti el, hogy ez a probléma létezik-e
   nála is. A forrás alatta: az adatnál az a következő kérdés. */
.vall-szamok {
  padding: 2.5rem 0;
  border-top: 1px solid #ecebe9;
  border-bottom: 1px solid #ecebe9;
  background: #fafaf9;
}
.vall-szamok-racs {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .vall-szamok-racs { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.vall-szam-ertek {
  display: block;
  margin-bottom: .5rem;
  font: 700 2.5rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--stone-900, #1c1917);
}
.vall-szam p { margin: 0; font-size: .9375rem; color: var(--stone-600, #57534e); }
.vall-forras {
  margin: 2rem 0 0;
  font-size: .8125rem; line-height: 1.6;
  color: var(--stone-500, #78716c);
}

/* ---- Szakaszok ---- */
.vall-szekcio { padding: 3.5rem 0; }
@media (min-width: 768px) { .vall-szekcio { padding: 5rem 0; } }
.vall-szekcio--halvany { background: #fafaf9; border-top: 1px solid #ecebe9; border-bottom: 1px solid #ecebe9; }

.vall-cim2 {
  margin: 0 0 1.25rem;
  font: 700 1.5rem/1.25 var(--font-display);
  letter-spacing: -.015em;
  color: var(--stone-900, #1c1917);
}
@media (min-width: 768px) { .vall-cim2 { font-size: 1.875rem; } }
.vall-cim2--kozep { margin-top: 2.75rem; }

.vall-alcim {
  margin: -.5rem 0 2rem;
  font-size: .9375rem;
  color: var(--stone-500, #78716c);
}
.vall-alcim--kozep { text-align: center; max-width: 36rem; margin-left: auto; margin-right: auto; }

.vall-vezeto { margin: 0 0 1.5rem; font-size: 1.0625rem; color: var(--stone-700, #44403c); }

/* A négy kérdés. Felsorolás, de szám és pötty nélkül: a bal oldali vonal
   összefogja őket, anélkül hogy sorrendet sugallna. */
.vall-kerdesek { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.125rem; }
.vall-kerdesek li {
  padding-left: 1.25rem;
  border-left: 2px solid #ecebe9;
  font-size: 1rem; line-height: 1.7;
  color: var(--stone-600, #57534e);
}
.vall-kerdes--kiemelt {
  border-left-color: var(--accent-600, #ff5c14) !important;
  color: var(--stone-800, #292524) !important;
  font-weight: 500;
}

.vall-zaras, .vall-kiemelt-sor {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid #ecebe9;
  font-size: 1.0625rem;
  color: var(--stone-800, #292524);
  font-weight: 500;
}



/* ---- A kiemelt állítás ----
   Sötét sáv: a lap egyetlen pontja, ahol megáll a szem. Egy ilyen van,
   mert kettő már nem kiemelés, hanem minta. */
.vall-idezet-sav { padding: 3.5rem 0; background: var(--stone-900, #1c1917); }
@media (min-width: 768px) { .vall-idezet-sav { padding: 5rem 0; } }
.vall-idezet {
  margin: 0;
  font: 500 1.375rem/1.5 var(--font-display);
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
@media (min-width: 768px) { .vall-idezet { font-size: 1.875rem; } }

/* ---- Előadástémák ----
   Számozva, mert hatról van szó, és a szám segít visszahivatkozni rá egy
   beszélgetésben. */
.vall-temak { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .vall-temak { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
.vall-tema { display: flex; gap: 1rem; align-items: flex-start; }
.vall-tema-szam {
  flex: 0 0 auto;
  font: 700 .8125rem/1.6 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-600, #ff5c14);
}
.vall-tema h3 {
  margin: 0 0 .3125rem;
  font: 600 1rem/1.35 var(--font-display);
  color: var(--stone-900, #1c1917);
}
.vall-tema p { margin: 0; font-size: .875rem; color: var(--stone-500, #78716c); }

/* ---- Cikkek ---- */
.vall-fejsor { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vall-cikkek { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .vall-cikkek { grid-template-columns: repeat(3, 1fr); } }

.vcikk {
  display: flex; flex-direction: column;
  height: 100%;
  border: 1px solid #ecebe9;
  border-radius: .875rem;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.vcikk:hover { border-color: #d6d3d1; transform: translateY(-2px); }
.vcikk-kep { display: block; aspect-ratio: 16 / 9; background: #f1f0ef; }
.vcikk-kep img { width: 100%; height: 100%; object-fit: cover; }
.vcikk-torzs { display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem; }
.vcikk-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
  font-size: .75rem;
  color: var(--stone-500, #78716c);
}
.vcikk-cimke {
  padding: .125rem .4375rem;
  border-radius: .375rem;
  background: #f1f0ef;
  font-weight: 600;
  color: var(--stone-600, #57534e);
}
.vcikk-cim {
  font: 600 1rem/1.35 var(--font-display);
  color: var(--stone-900, #1c1917);
}
.vcikk-kivonat { font-size: .875rem; line-height: 1.6; color: var(--stone-500, #78716c); }

/* ---- Témaszűrő a bloglistán ---- */
.vall-temaszuro { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.vall-pirula {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: 0 .875rem;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  background: #fff;
  font: 500 .8125rem/1 var(--font-body);
  color: var(--stone-600, #57534e);
  text-decoration: none;
}
.vall-pirula:hover { border-color: #d6d3d1; color: var(--stone-800, #292524); }
.vall-pirula--aktiv {
  border-color: var(--stone-800, #292524);
  background: var(--stone-800, #292524);
  color: #fff;
}

.vall-ures {
  padding: 2.5rem 1.25rem;
  border: 1px dashed #e7e5e4;
  border-radius: .875rem;
  text-align: center;
  color: var(--stone-500, #78716c);
}
.vall-ures a { color: var(--accent-800, #b83b00); text-decoration: underline; }

.vall-lapozo { margin-top: 2.5rem; }
.vall-vissza {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--stone-500, #78716c);
  text-decoration: none;
}
.vall-vissza:hover { color: var(--accent-800, #b83b00); }

/* ---- Cikklap ---- */
.vcikklap-fej { margin-bottom: 2rem; }
.vcikklap-cim {
  margin: .75rem 0 1rem;
  font: 700 2rem/1.2 var(--font-display);
  letter-spacing: -.02em;
  color: var(--stone-900, #1c1917);
  text-wrap: balance;
}
@media (min-width: 768px) { .vcikklap-cim { font-size: 2.75rem; } }
.vcikklap-kivonat { margin: 0; font-size: 1.0625rem; color: var(--stone-600, #57534e); }
.vcikklap-kep { width: 100%; border-radius: .875rem; margin-bottom: 2rem; }
.vcikklap-torzs { color: var(--stone-700, #44403c); }

/* ---- Kapcsolat ---- */
.vall-kapcsolat {
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid #ecebe9;
  background: #fafaf9;
}
@media (min-width: 768px) { .vall-kapcsolat { padding: 5rem 0 6rem; } }
.vall-kapcsolat .vall-cim2 { text-align: center; margin-top: 0; }

.vkapcsolat { display: grid; gap: 1rem; }
.vkapcsolat-sor { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .vkapcsolat-sor { grid-template-columns: 1fr 1fr; } }

.vkapcsolat-mezo label {
  display: block;
  margin-bottom: .375rem;
  font: 600 .8125rem/1 var(--font-display);
  color: var(--stone-700, #44403c);
}
.vkapcsolat-opcionalis { font-weight: 400; color: var(--stone-400, #a8a29e); }
.vkapcsolat-mezo input,
.vkapcsolat-mezo textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .625rem .875rem;
  border: 1px solid #e7e5e4;
  border-radius: .625rem;
  background: #fff;
  /* 16 px: ennél kisebbnél az iOS ráközelít a mezőre, és a lap elcsúszik. */
  font-size: 1rem;
  color: var(--stone-800, #292524);
}
.vkapcsolat-mezo textarea { line-height: 1.6; resize: vertical; }
.vkapcsolat-mezo input:focus,
.vkapcsolat-mezo textarea:focus {
  outline: 2px solid var(--stone-800, #292524);
  outline-offset: 1px;
  border-color: transparent;
}

.vkapcsolat-pipa {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8125rem; line-height: 1.5;
  color: var(--stone-600, #57534e);
  cursor: pointer;
}
.vkapcsolat-pipa input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: .125rem; accent-color: var(--accent-600, #ff5c14); }
.vkapcsolat-pipa a { color: var(--accent-800, #b83b00); text-decoration: underline; }

.vkapcsolat-gomb { min-height: 2.75rem; justify-self: start; }
.vkapcsolat-hiba { margin: .3125rem 0 0; font-size: .75rem; color: #b91c1c; }
.vkapcsolat-kesz {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: 1rem 1.125rem;
  border: 1px solid #bbf7d0;
  border-radius: .75rem;
  background: #f0fdf4;
  color: #15803d;
  font-size: .9375rem; line-height: 1.5;
}
.vkapcsolat-kesz svg { flex: 0 0 auto; margin-top: .125rem; }

.vall-alairas {
  margin: 2.5rem 0 0;
  text-align: center;
  font: 600 .9375rem/1.6 var(--font-display);
  color: var(--stone-800, #292524);
}
.vall-alairas span { font-weight: 400; font-size: .8125rem; color: var(--stone-500, #78716c); }

/* ---- A főoldali sáv ----
   Halkan, lent: a főoldal fő közönsége nem a vezérigazgató. Ennek a
   sávnak az a dolga, hogy aki ismer egy céget, TOVÁBBKÜLDJE - nem az,
   hogy megszólítsa a vezetőt. */
.vall-sav {
  padding: 2.5rem 0;
  border-top: 1px solid rgba(224, 72, 0, .1);
  background: #fff;
}
.vall-sav-doboz {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
}
.vall-sav-cimke {
  display: block;
  margin-bottom: .25rem;
  font: 700 .6875rem/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-800, #b83b00);
}
.vall-sav-cim { margin: 0 0 .25rem; font: 700 1.125rem/1.3 var(--font-display); color: var(--stone-800, #292524); }
.vall-sav p { margin: 0; font-size: .9375rem; color: var(--stone-600, #57534e); max-width: 40rem; }
.vall-sav-gomb {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--stone-800, #292524);
  border-radius: 999px;
  font: 600 .875rem/1 var(--font-display);
  color: var(--stone-800, #292524);
  text-decoration: none;
  white-space: nowrap;
}
.vall-sav-gomb:hover { background: var(--stone-800, #292524); color: #fff; }





/* ---- „Mit visznek magukkal" ----
   Három doboz, keret nélkül, bal oldali narancs vonallal. Nem kártya: a
   kártya zárt egységet sugall, ez viszont HÁROM RÉSZE ugyanannak a
   válasznak. A vonal összefogja őket anélkül, hogy dobozokra tördelné. */
.vall-hozadek { display: grid; gap: 1.5rem; margin-bottom: 1.75rem; }
@media (min-width: 720px) { .vall-hozadek { gap: 1.75rem; } }

.vall-hozadek-elem {
  padding-left: 1.125rem;
  border-left: 2px solid var(--accent-500, #ff7a3d);
}
.vall-hozadek-elem h3 {
  margin: 0 0 .375rem;
  font: 600 1.0625rem/1.3 var(--font-display);
  color: var(--stone-900, #1c1917);
}
.vall-hozadek-elem p {
  margin: 0;
  font-size: .9375rem;
  color: var(--stone-600, #57534e);
}

.vall-hozadek-zaras {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid #ecebe9;
  font-size: .9375rem;
  color: var(--stone-500, #78716c);
}

/* A bevezető második sora: ez mondja meg, MI EZ konkrétan (előadás,
   workshop), miután az első a kérdést tette fel. Halkabb az elsőnél -
   a kérdés a főszereplő, ez a magyarázat. */
.vall-bevezeto--masodik {
  margin-top: 1rem;
  font-size: .9375rem;
  color: var(--stone-500, #78716c);
}
@media (min-width: 768px) { .vall-bevezeto--masodik { font-size: 1rem; } }

/* A forrás linkje legyen látható linknek: egy vezető az adatnál a
   forrást keresi, és ha nem látszik kattinthatónak, nem is próbálja. */
.vall-forras a {
  color: var(--accent-800, #b83b00);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vall-forras a:hover { color: var(--accent-600, #ff5c14); }

/* ---- Az AI-tudatosság három szintje ----
   Lépcső, nem rács: a három pont EGYMÁSRA ÉPÜL. Előbb érteni kell az
   eszközt, utána lehet ítéletet alkotni a használatáról, és csak azután
   lehet szervezeti szinten felelősen bevezetni. A számozás itt
   információ, nem díszítés.

   AZ ELSŐ VÁLTOZAT TÚL LEVEGŐS VOLT: két rem hézag a szintek között, és
   a szakasz a szokásos öt rem belső teret kapta - a három rövid mondat
   elveszett a fehérben. Most feleannyi.

   A vonal EGYBEFÜGGŐ, nem három szakasz: egy úton fut végig a fénycsík,
   és a folyamatos vonal pontosan azt mondja, amit a tartalom. */
.vall-lepcso {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.vall-lepcso-elem {
  display: flex;
  gap: 1rem;
  padding: 0 0 1.125rem 0;
}
.vall-lepcso-elem:last-child { padding-bottom: 0; }

/* A vonal a számok KÖZEPÉTŐL a számok közepéig fut: felül és alul
   ugyanannyit hagyunk ki, amennyi a szám sugara. */
.vall-lepcso-vonal {
  position: absolute;
  left: 1.09375rem;
  top: 1.125rem;
  /* Tartalek JS nelkul. A pontos magassagot a vallalati-nav.js meri meg:
     az also szam KOZEPEIG kell ernie, es az utolso lepcsofok szovege
     magasabb, mint maga a szam - ezert a lista alja lejjebb van, mint
     ahol a vonalnak veget kell ernie. Ha a `height` meg van adva, az
     felulirja ezt a `bottom`-ot. */
  bottom: 1.125rem;
  width: 1px;
  background: #e7e5e4;
  /* A fénycsík ebben a sávban mozog; ami kilóg, az nem látszik. */
  overflow: hidden;
}

/* A FÉNYCSÍK. Egy rövid, halványuló szakasz, ami végigfut a vonalon -
   a mozgás azt sugallja, hogy ez egy ÚT, amin végig kell menni.

   Az `top` animálása itt rendben van: egyetlen, egy pixel széles elem
   mozog a lapon, és a transform helyett azért ez, mert a százalékos
   transform az elem SAJÁT magasságához igazodna, nem a vonaléhoz. */
.vall-lepcso-vonal::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 3.25rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 122, 61, 0) 0%,
    var(--accent-500, #ff7a3d) 50%,
    rgba(255, 122, 61, 0) 100%
  );
  animation: vall-fenycsik 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes vall-fenycsik {
  0%   { top: -3.25rem; }
  /* A szünet a végén: a csík leér, és egy pillanatra megáll, mielőtt
     újraindulna. Megállás nélkül a mozgás nyugtalan csíkozássá válna. */
  70%  { top: 100%; }
  100% { top: 100%; }
}

/* Aki kikapcsolta a mozgást, annak nem fut. A vonal marad, mert az
   nem animáció, hanem szerkezet. */
@media (prefers-reduced-motion: reduce) {
  .vall-lepcso-vonal::after { animation: none; display: none; }
}

.vall-lepcso-szam {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  background: #fff;
  font: 700 .875rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-800, #b83b00);
}

.vall-lepcso-elem h3 {
  margin: .4375rem 0 .125rem;
  font: 600 1.0625rem/1.3 var(--font-display);
  color: var(--stone-900, #1c1917);
}
.vall-lepcso-elem p {
  margin: 0;
  font-size: .9375rem;
  color: var(--stone-500, #78716c);
}

/* Tömörebb szakasz: ahol a tartalom három rövid mondat, ott az öt rem
   belső tér csak üres fehéret ad. */
.vall-szekcio--tomor { padding: 2.5rem 0; }
@media (min-width: 768px) { .vall-szekcio--tomor { padding: 3.25rem 0; } }
.vall-szekcio--tomor .vall-cim2 { margin-bottom: .5rem; }
.vall-szekcio--tomor .vall-alcim { margin: 0 0 1.5rem; }



/* ===================================================================
   A VÁLLALATI SZAKASZ NAVIGÁCIÓJA

   Harmadik nekifutás, és érdemes leírni, miért.

   1. Halk fehér sáv volt a krémszínű fejléc alatt - Dániel észre sem
      vette, a Blogot alig találta meg.
   2. Lett helyette telt fekete, 64 pixel magas sáv. Azt már látta, de
      „fura a felső menüsorral együtt": egy kemény fekete tábla ült
      közvetlenül egy puha krémszínű sáv alatt.
   3. Most: KESKENYEBB (48 px) és MELEGEBB sötét (#292524, nem #1c1917).

   Ami a harmóniát adja, az nem a színegyezés - két egymás fölötti sáv
   sosem lesz ugyanaz az anyag -, hanem az ARÁNY és az IGAZÍTÁS. Ez a sáv
   ugyanazt a .container-narrow rácsot használja, mint a fejléc, tehát a
   „Vállalatoknak" a logóval, a gomb pedig a fejléc gombjával egy
   vonalban áll. És alacsonyabb a fejlécnél, tehát alárendelt - ami igaz
   is: ez a szakasz navigációja, nem az oldalé.
   =================================================================== */

.vnav {
  background: #292524;
}

.vnav-sor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  /* 52 px. Keskenyebb a 64-nel, de egy 44 px-es gombot meg elbir:
     negy pixel marad felette-alatta. 48-ban a gomb vagy osszeszorulna,
     vagy az erintofelulet csokkenne 36-ra - azt mertuk is. */
  min-height: 3.25rem;
  flex-wrap: wrap;
}

/* A szakasz neve, egy narancs ponttal. A pont nem dísz: egy sötét sávban
   a bal szél magában üresnek hat, és a szem nem tudja, hol kezdődik. */
.vnav-marka {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.25rem;
  font: 700 .9375rem/1 var(--font-display);
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
}
.vnav-marka-pont {
  width: .375rem; height: .375rem;
  border-radius: 999px;
  background: var(--accent-500, #ff7a3d);
}

.vnav-linkek {
  display: flex; align-items: center; gap: .125rem; flex-wrap: wrap;
  /* A fülek a jobb szél felé, a márka és a gomb közé. */
  flex: 1 1 auto; justify-content: flex-end;
}

/* A fülek. Az aktívat NEM háttérrel jelöljük, hanem alávonallal: egy
   sötét sávban a telt háttér nehéz, a vonal viszont pontosan annyit
   mond, amennyit kell. */
.vnav-link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 3.25rem;
  padding: 0 .75rem;
  font: 500 .875rem/1 var(--font-body);
  color: #b8b0a9;
  text-decoration: none;
  transition: color .15s ease;
}
.vnav-link:hover { color: #fff; }

.vnav-link--aktiv { color: #fff; font-weight: 600; }
.vnav-link--aktiv::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: 0;
  height: 2px;
  background: var(--accent-500, #ff7a3d);
}

.vnav-cta {
  display: inline-flex; align-items: center;
  /* 44 px erintofelulet. A savot inkabb magasabbra vesszuk, mint hogy
     a hüvelykujj mellenyúljon. */
  min-height: 2.75rem;
  padding: 0 .9375rem;
  margin-left: .5rem;
  border-radius: 999px;
  background: var(--accent-600, #ff5c14);
  font: 600 .875rem/1 var(--font-display);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s ease;
}
.vnav-cta:hover { background: var(--accent-500, #ff7a3d); color: #fff; }

/* ---- Ragad, a főfejléc alatt ----
   A --vnav-top értéket a vallalati-nav.js méri: a főfejléc maga is ragad,
   és a magassága 73 és 79 pixel között változik a képernyő szélességétől
   függően. A 74px tartalék arra, ha a szkript nem fut le.

   A z-index 49: eggyel a főfejléc (50) alatt - ha a kettő összeérne, a
   globális navigációé az elsőbbség.

   Telefonon nem ragad: ott a sáv két soros, ami a fejléccel együtt egy
   800 pixel magas kijelző ötödét foglalná el állandóan. */
@media (min-width: 768px) {
  .vnav {
    position: sticky;
    top: var(--vnav-top, 74px);
    z-index: 49;
  }
}

/* ---- A horgonyok ne csússzanak a ragadó sávok alá ----
   A #temak és a #kapcsolat ugyanezen a lapon van. Enélkül a ráugrás a
   szakasz tetejét a fejléc és a navigáció alá vitte - Dániel épp ezt
   látta: a szakasz első sora félig takarva.

   A --vall-ragad a két ragadó sáv EGYÜTTES magassága, szintén mérve.
   Mobilon csak a fejléc számít, mert ott a sáv nem ragad. */
.vall [id] { scroll-margin-top: calc(var(--vall-ragad, 80px) + 1.25rem); }

/* Telefonon két sor: fent a szakasz neve és a cselekvés gombja, alattuk
   a fülek. Így a gomb nem marad egyedül egy sorban, üres hellyel maga
   mellett, és a füleknek is jut a teljes szélesség. */
@media (max-width: 640px) {
  .vnav-sor { padding-top: .5rem; padding-bottom: .375rem; gap: .25rem 1rem; }
  /* A márka és a gomb együtt 390 px-en csak akkor fér egy sorba, ha
     mindkettő egy fokkal kisebb. */
  .vnav-marka { order: 1; min-height: 2.75rem; font-size: .9375rem; gap: .375rem; }
  .vnav-cta { order: 2; margin-left: auto; padding: 0 .8125rem; font-size: .8125rem; }
  .vnav-linkek { order: 3; flex: 1 1 100%; justify-content: flex-start; margin-left: -.75rem; }
  .vnav-link { min-height: 2.75rem; padding: 0 .75rem; }
}

/* ---- A négy terület ----
   Az ikon a cím MELLETT áll, nem fölötte. Fölötte minden elem négy sor
   magas volt (ikon, hézag, cím, leírás), és a négy terület között akkora
   üres hely maradt, hogy a szem nem kötötte össze őket - Dániel pontosan
   ezt kifogásolta: „rettentő sok a szabad hely".

   Egymás mellett két sor az egész. Ráadásul ugyanaz a vizuális nyelv,
   mint a lépcsőnél lent: jel balra, szöveg jobbra. */
.vall-teruletek {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .vall-teruletek { grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; }
}

.vall-terulet { display: flex; gap: .875rem; align-items: flex-start; }

.vall-terulet-ikon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.125rem; height: 2.125rem;
  border-radius: .5rem;
  background: #f1f0ef;
  color: var(--stone-700, #44403c);
}

.vall-terulet h3 {
  margin: .25rem 0 .1875rem;
  font: 600 1rem/1.25 var(--font-display);
  color: var(--stone-900, #1c1917);
}
.vall-terulet p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--stone-500, #78716c);
}

/* ---- A lépcső sorközei tömörebbek ----
   A szintek közötti hézag 1,125 rem-ről 0,75-re, a cím és a leírás
   közötti levegő pedig minimálisra. A három rövid mondat így egy
   blokként olvasódik - ez egy út, nem három különálló bekezdés. */
.vall-lepcso-elem { padding-bottom: .75rem; }
.vall-lepcso-elem h3 { margin: .3125rem 0 .0625rem; line-height: 1.25; }
.vall-lepcso-elem p { line-height: 1.5; }

/* ===================================================================
   VÁLLALATI CIKKLAP

   Más olvasó, más tempó. A naptudat-blogot valaki este olvassa, egy
   csésze tea mellett. Ezt a lapot egy döntéshozó nyitja meg két
   megbeszélés között, és harminc másodperce van eldönteni, hogy
   érdemes-e rászánnia tizenkettőt.

   Ebből három dolog következik:

   1. A SORHOSSZ nem alku tárgya. 66 karakter körül tartjuk, és a
      jegyzék KIÜL a szöveg mellé - nem szűkíti.
   2. A DÍSZ elmarad. A `.prose-content` a spirituális blog nyelvét
      beszéli: napkorong-pötty a címsor előtt, narancs színátmenetes
      idézetdoboz idézőjelekkel. Itt mindezt visszavesszük - nem azért,
      mert rossz, hanem mert másról szól.
   3. A SZÁM kiemelve. Ebben a cikkben öt kutatási adat van, és a
      lap hitelessége rajtuk áll. Aki átfutja, azokat lássa meg.
   =================================================================== */

.vall-cikklap { padding-top: 2.5rem; }
.vcikklap-keret { position: relative; }

/* ---- A cikk törzse ---- */
.vcikklap-torzs {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--stone-700, #44403c);
}
.vcikklap-torzs p { margin: 0 0 1.25rem; max-width: 60ch; }
.vcikklap-torzs > *:first-child { margin-top: 0; }

/* A címsor fölött halk vonal. Hosszú szövegben ez mondja meg a szemnek,
   hogy új gondolat kezdődik - erősebben, mint a betűméret egymagában. */
.vcikklap-torzs h2 {
  position: relative;
  margin: 3rem 0 1rem;
  padding-top: 1.75rem;
  font: 700 1.5rem/1.3 var(--font-display);
  letter-spacing: -.015em;
  color: var(--stone-900, #1c1917);
}
.vcikklap-torzs h2::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--accent-500, #ff7a3d);
}
@media (min-width: 768px) { .vcikklap-torzs h2 { font-size: 1.75rem; } }

/* A `.prose-content` napkorong-pöttye a h3 elé való - itt nem. */
.vcikklap-torzs h3 {
  margin: 2rem 0 .625rem;
  padding-left: 0;
  font: 600 1.1875rem/1.35 var(--font-display);
  color: var(--stone-900, #1c1917);
}
.vcikklap-torzs h3::before { content: none; }

/* A kiemelt szó sötét, nem narancs: egy adatnál a szín nem erősít,
   a kontraszt igen. */
.vcikklap-torzs strong { font-weight: 650; color: var(--stone-900, #1c1917); }
.vcikklap-torzs em { font-style: italic; color: var(--stone-600, #57534e); }

.vcikklap-torzs a {
  color: var(--accent-700, #d94a00);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  background: none;
}
.vcikklap-torzs a:hover { color: var(--accent-800, #b83b00); }

/* ---- Felsorolás: sima pont, nem napkorong ---- */
.vcikklap-torzs ul { list-style: none; padding-left: 1.125rem; margin: 0 0 1.25rem; }
.vcikklap-torzs ul > li { position: relative; max-width: 58ch; margin-bottom: .5rem; }
.vcikklap-torzs ul > li::before {
  content: "";
  position: absolute; left: -1.125rem; top: .75em;
  width: .3125rem; height: .3125rem;
  border-radius: 999px;
  background: var(--stone-300, #d6d3d1);
  transform: none;
}
.vcikklap-torzs ol { padding-left: 1.375rem; margin: 0 0 1.25rem; }
.vcikklap-torzs ol > li { max-width: 58ch; margin-bottom: .625rem; }

/* ===================================================================
   AZ ÜZENETEK KIEMELÉSE

   A cikkben háromféle kiemelendő van, és SZÁNDÉKOSAN háromféleképpen
   néznek ki. Ha mindhárom ugyanazt a dobozt kapná, az olvasó három
   egyforma hangsúlyt látna, és egyiket sem venné komolyan.
   =================================================================== */

/* 1. A FŐ ÁLLÍTÁS. Ez a cikk gerince - a mondat, amit az olvasó
      magával visz. Nincs doboz: nagyobb betű, bal oldali narancs
      vonal, levegő körülötte. A súlyt a méret adja, nem a háttér. */
.vcikklap-torzs .vkiemelt {
  margin: 2.25rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--accent-500, #ff7a3d);
  max-width: 54ch;
  font: 600 1.1875rem/1.6 var(--font-display);
  letter-spacing: -.01em;
  color: var(--stone-900, #1c1917);
}
@media (min-width: 768px) { .vcikklap-torzs .vkiemelt { font-size: 1.3125rem; } }

/* 2. AZ IDÉZET. Amit egy vendég vagy egy vezető MOND. Halk doboz,
      dőlt betű, semmi narancs - egy idézet nem állítás, hanem adat
      arról, hogyan gondolkodik valaki. */
.vcikklap-torzs blockquote {
  margin: 1.75rem 0;
  padding: 1.125rem 1.375rem;
  border: 0;
  border-left: 2px solid var(--stone-200, #e7e5e4);
  border-radius: 0 .5rem .5rem 0;
  background: #fafaf9;
  max-width: 56ch;
}
.vcikklap-torzs blockquote::before,
.vcikklap-torzs blockquote::after { content: none; }
.vcikklap-torzs blockquote p {
  margin: 0;
  font: italic 400 1rem/1.7 var(--font-body);
  color: var(--stone-600, #57534e);
}
.vcikklap-torzs blockquote p + p { margin-top: .75rem; }

/* ---- A források ----
   Számozott, kicsi, és minden tételhez tartozik egy élő hivatkozás.
   Ez nem díszítés: a cikk négy kutatásra hivatkozik, és aki vezetőként
   döntést hoz, utána akar nézni. Ha nem tud, az állítás sem ér semmit. */
.vcikklap-torzs .vforrasok {
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid #ecebe9;
}
.vcikklap-torzs .vforrasok h2 {
  margin: 0 0 1rem;
  padding-top: 0;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stone-500, #78716c);
}
.vcikklap-torzs .vforrasok h2::before { content: none; }
.vcikklap-torzs .vforrasok ol { padding-left: 1.25rem; }
.vcikklap-torzs .vforrasok li {
  margin-bottom: .75rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--stone-500, #78716c);
}
.vcikklap-torzs .vforrasok li strong { color: var(--stone-700, #44403c); font-weight: 600; }

/* ===================================================================
   A GYORS SÁV (tartalomjegyzék)

   KIS KÉPERNYŐN a szöveg fölött áll, összecsukva: ott nem ugrópont,
   hanem az „ez miről szól" kérdésre felel.

   NAGY KÉPERNYŐN kiül a szöveg mellé jobbra, és ragad. Azért kiül és
   nem mellé szorul, mert a sorhossz a hosszú olvasás feltétele - egy
   jegyzékért nem adjuk fel.
   =================================================================== */

.vcikk-jegyzek {
  margin: 0 0 2rem;
  padding: 1rem 1.125rem;
  border: 1px solid #ecebe9;
  border-radius: .75rem;
  background: #fafaf9;
}

.vcikk-jegyzek-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  font: 600 .6875rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone-400, #a8a29e);
}
.vcikk-jegyzek-fej::-webkit-details-marker { display: none; }
.vcikk-jegyzek-nyil { width: .875rem; height: .875rem; transition: transform .2s ease; }
.vcikk-jegyzek details[open] .vcikk-jegyzek-nyil { transform: rotate(180deg); }

.vcikk-jegyzek-lista {
  list-style: none;
  margin: .875rem 0 0;
  padding: 0 0 0 .875rem;
  border-left: 1px solid var(--stone-200, #e7e5e4);
}
.vcikk-jegyzek-lista li { margin: 0 0 .5rem; max-width: none; }
.vcikk-jegyzek-lista li::before { content: none; }

.vcikk-jegyzek-link {
  display: block;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--stone-500, #78716c);
  text-decoration: none;
  transition: color .15s ease;
}
.vcikk-jegyzek-link:hover { color: var(--accent-700, #d94a00); }
.vcikk-jegyzek-link--al { padding-left: .75rem; font-size: .78125rem; }

/* Az aktív szakasz. A szín egymagában kevés volna egy halvány
   listában, ezért vastagabb is - két jel, nem egy. */
.vcikk-jegyzek-link--aktiv {
  color: var(--stone-900, #1c1917);
  font-weight: 600;
}

.vcikk-jegyzek-cta {
  display: none;
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--stone-200, #e7e5e4);
  font: 600 .8125rem/1.3 var(--font-display);
  color: var(--accent-700, #d94a00);
  text-decoration: none;
}
.vcikk-jegyzek-cta:hover { color: var(--accent-800, #b83b00); }

/* ---- Nagy képernyőn kiül a szöveg mellé ----
   1280 px az a szélesség, ahol a 768 pixeles szövegoszlop mellett
   marad 256 pixel - abba fér be egy 13 rem-es sáv és a hézag. */
@media (min-width: 1280px) {
  .vcikk-jegyzek {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 1.75rem;
    width: 13rem;
    padding: 0;
    border: 0;
    background: none;
  }
  .vcikk-jegyzek-ragad {
    position: sticky;
    /* A két ragadó sáv alja (a vallalati-nav.js méri), plusz levegő. */
    top: calc(var(--vall-ragad, 80px) + 1.5rem);
  }
  .vcikk-jegyzek-fej { cursor: default; }
  .vcikk-jegyzek-nyil { display: none; }
  .vcikk-jegyzek-cta { display: block; }
}

/* ---- A cikk lába ---- */
.vcikklap-lab {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ecebe9;
}
.vcikklap-alairas {
  margin: 0;
  font: 600 .9375rem/1.4 var(--font-display);
  color: var(--stone-700, #44403c);
}
.vcikklap-mottó {
  margin: .25rem 0 0;
  font-size: .875rem;
  color: var(--stone-400, #a8a29e);
}

/* ---- A felvezető ----
   A cím alatti mondat eddig pontosan úgy nézett ki, mint a törzsszöveg:
   ugyanaz a 17 pixel, ugyanaz a szín. Így nem felvezető volt, hanem az
   első bekezdés - a szem átsiklott rajta.

   Nagyobb, világosabb és ritkább sorközű. Ez az a két sor, ami eldönti,
   hogy valaki elolvassa-e a maradék tizenegy percet. */
.vcikklap-kivonat {
  margin: 0;
  max-width: 54ch;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--stone-500, #78716c);
}
@media (min-width: 768px) { .vcikklap-kivonat { font-size: 1.25rem; } }

/* ---- A jegyzék érintőfelületei ----
   Mérve: a „Ebben a cikkben" összecsukó 14 pixel magas volt, a
   jegyzéklinkek 32. Ujjal mindkettő eltalálhatatlan - a hüvelykujj
   érintkezési felülete 40-50 pixel.

   A 44 pixel ott kötelező, ahol UJJAL nyúlnak hozzá: a kártya alakban
   (1280 alatt), és minden érintőképernyőn, méretre való tekintet nélkül.
   A nagy képernyős oldalsávban marad a tömör forma - ott egér mutat rá,
   és hat darab 44 pixeles sor fölöslegesen nyújtaná meg a sávot. */
@media (max-width: 1279.98px), (pointer: coarse) {
  .vcikk-jegyzek-fej {
    min-height: 2.75rem;
    margin: -1rem -1.125rem;
    padding: 0 1.125rem;
  }
  .vcikk-jegyzek-lista { margin-top: 1.375rem; }
  .vcikk-jegyzek-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .25rem 0;
  }
  .vcikk-jegyzek-cta { min-height: 2.75rem; display: flex; align-items: center; }
}

/* ---- A cikkrács kevés cikknél ----
   A hármas rács akkor szép, ha van három cikk. Eggyel a kártya a sor
   bal harmadában ül, mellette két üres harmad - úgy néz ki, mintha
   valami nem töltődött volna be.

   Ezért a rács ALKALMAZKODIK a darabszámhoz. Ez nem ideiglenes
   mankó: két cikknél is jobb a kettes rács, mint egy üres harmad.
   Háromtól magától visszaáll a hármas. */
@media (min-width: 720px) {
  .vall-cikkek:has(> :only-child) { grid-template-columns: minmax(0, 32rem); }
  .vall-cikkek:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}