/* ══ MÁRKASZÍNEK — KÖZÖS TOKENEK (2026-10-24, a user: „Ha még nincs tokenizálva a rendszer, akkor tedd meg.”) ══
   Minden ismétlődő szín innen jön; ez a fájl minden lapon betölt (nyilvános és belső).
   Egy szín átírása itt az egész rendszeren átvezeti. A témafüggő jelentéseket (--bg, --text, --accent…)
   továbbra is a design.css / arculat-a.css adja; ezek a nyers márkaszínek, témától függetlenül. */
:root {
  --m-lime: #c9ff35;     /* a márka lime-ja */
  --m-lime-vilagos: #d8ff6b; /* lime hover */
  --m-lime-sotet: #9dcf35; /* lime árnyék / szegély */
  --m-fekete: #0f1113;   /* az A arculat fekete alapja */
  --m-fekete-mely: #0a0a0a; /* világos téma fekete tintája */
  --m-fekete-tiszta: #000; /* tiszta fekete */
  --m-tinta: #0a0f16;    /* betű lime felületen */
  --m-feher: #fff;       /* fehér */
  --m-feher-tort: #f3f5f8; /* törtfehér szöveg sötéten */
  --m-szurke-felulet: #202327; /* sötét hover-felület */
  --m-szurke-hover: #1a1d24; /* sötét sáv hover */
  --m-szurke-halk: #a3acb8; /* halk menüszöveg */
  --m-pala: #94a3b8;     /* palaszürke */
  --m-magenta: #fb23c2;  /* a márka magentája */
  --m-magenta-kozep: #d81ba6; /* magenta hover */
  --m-magenta-mely: #c4128f; /* mély magenta */
  --m-magenta-gomb: #b0107f; /* magenta gomb (fehér betűvel AA) */
  --m-magenta-sotet: #8c0c65; /* magenta gomb hover */
  --m-navy-kartya: #0d2137; /* a régi navy kártya */
  --m-piros-halvany: #fca5a5; /* hibaszöveg sötéten */
  --m-piros-halo: #fecaca; /* hiba-háttér */
  --m-borostyan: #f0a020; /* figyelmeztetés */
  --m-zold-mely: #0f7a5f; /* mély zöld (siker) */

  /* 2026-11-09, teljes tokenizálás (a user: „menjen a teljes tokenizálás”): a lapok saját stílusaiban
     beégetett színek is innen jönnek. A szinte azonos árnyalatok (szemmel megkülönböztethetetlenek) egy tokenre
     kerültek. Kivétel szándékosan: levelek, QR-kód, zászlók, a rajzolt előnézetek és a haj/szem/bőr színmintái. */
  --m-sotet-sav: #131518;      /* sötét sáv, mélyebb háttér */
  --m-sotet-doboz: #17191d;    /* sötét doboz (kártya) */
  --m-sotet-aktiv: #272a30;    /* kijelölt fül / gomb sötéten */
  --m-sotet-vonal: #2d333f;    /* vonal sötéten */
  --m-sotet-vonal-2: #3a4048;  /* erősebb vonal sötéten */
  --m-szurke-kozep: #7c8591;   /* középszürke (kikapcsolt jel, felirat) */
  --m-szurke-sotet: #55585e;   /* halk szöveg világos alapon */
  --m-szurke-csendes: #b3bcc7; /* csendes szöveg sötéten */
  --m-szurke-vilagos: #d5dbe3; /* világos szöveg sötéten */
  --m-vilagos-alap: #f4f5ef;   /* világos téma alapja */
  --m-vilagos-sav: #ebebe5;    /* világos sáv */
  --m-vilagos-vonal: #d9d9d2;  /* vonal világosban */
  --m-lime-ink: #3d5c08;       /* lime szöveg világos alapon */
  --m-lime-kozep: #8ab926;     /* középlime (sáv, gradiens) */
  --m-lime-eros: #9fe000;      /* lime gradiens vége */
  --m-lime-mely: #1d2510;      /* lime-ba hajló sötét alap */
  --m-lime-vonal: #3c4a1c;     /* lime-os vonal sötéten */
  --m-lime-vonal-2: #5b6b33;   /* lime-os vonal, rámutatás */
  --m-lime-halo: #eef8d6;      /* halvány lime alap világosban */
  --m-magenta-vilagos: #ff4fd0; /* világos magenta (hover, szöveg sötéten) */
  --m-magenta-halvany: #ff8ad8; /* halvány magenta hibaszöveg sötéten */
  --m-piros: #e5484d;          /* piros jel */
  --m-piros-vilagos: #ff6b6f;  /* piros szöveg sötéten */
  --m-piros-mely: #b3261e;     /* piros gomb, szöveg világosban */
  --m-piros-sotet: #8f1e17;    /* piros gomb hover */
  --m-borostyan-mely: #b3730a; /* borostyán szöveg világosban */
  --m-borostyan-sotet: #7d5400; /* borostyán gomb */
  --m-cian: #38bdf8;           /* cián jel */
  --m-kek: #4f8cff;            /* kék jel */
  --m-lila: #9b6bff;           /* lila jel */

  /* A gyakori átlátszó változatokhoz: rgba(var(--m-lime-rgb), .35) */
  --m-lime-rgb: 201,255,53;
  --m-magenta-rgb: 251,35,194;
  --m-feher-rgb: 255,255,255;
  --m-fekete-rgb: 15,17,19;
  --m-fekete-tiszta-rgb: 0,0,0;
}

/* ============================================================
   BETŰ-SKÁLA — A PROJEKT EGYETLEN MÉRETRENDJE (2026-09-19)

   🔬 MÉRVE, mielőtt kitaláltam volna: a két stíluslapban
   497 helyre volt BEÉGETVE a betűméret, változó nélkül —
   a műhelyben 336, a nyilvános oldalon 161. Nyolcféle méret
   szorongott 9,5 és 14 pixel között. Ezért nem volt rend, és
   ezért nem mozdult semmi, amikor a `--fs-body` tokent
   állítottam: a komponensek nem abból dolgoztak.

   Ez a hét lépcső a MOSTANI értékekből nőtt ki, sávosan és
   FELFELÉ kerekítve, mert a panasz az volt, hogy apró és
   olvashatatlan. A régi értékek sávjai:
       9,5 - 11,5  →  t-0
       12  - 13    →  t-1
       13,5 - 15   →  t-2
       15,5 - 17   →  t-3
       18  - 20    →  t-4
       21  - 26    →  t-5
       27 +        →  t-6
   ============================================================ */
:root{
  --t-0: 11.5px;   /* mono címkék, jelvények */
  --t-1: 13px;     /* meta, lábjegyzet */
  --t-2: 15px;     /* másodlagos szöveg */
  --t-3: 16.5px;   /* szövegtörzs */
  --t-4: 19px;     /* kártyacím */
  --t-5: 24px;     /* szakaszcím */
  --t-6: 32px;     /* lapcím */
}

/* ============================================================
   weblockai — ARCULAT-RÉTEG (2026-09-19)

   Mit csinál: a két meglévő stíluslap (landing.css a nyilvános
   oldalakon, design.css a műhelyben) FÖLÉ ül, és csak azt javítja,
   ami mérve hibás volt. A színvilág marad: sötét alap, lime,
   magenta, cián.

   🔴 MIÉRT KELLETT (mérve 2026-09-19, az ÉLŐ oldalon):
   1. A főcím sorköze 1,08-szoros volt (31 px betű, 33,48 px sor).
      Ekkora betűnél a sorok fizikailag összeérnek — a user szava:
      „egymáson vannak a karakterek". Itt 1,18-ra állítjuk, és a
      -0,025em betűtávolságot is lazítjuk, mert az is összetolja.
   2. A `--lp-dim` (#6c7f96) a kártyán 4,45:1 kontrasztot adott, a
      4,5-ös minimum ALATT. A user szava: „halványak". Az új érték
      (#aebfd2) ugyanaz a hideg kékesszürke, de 9,7:1 a kártyán.
   3. A sarkok 4 px-esek voltak. A user szava: „túl szögletes".
      10, 14 és 18 px-re nyitva. Pirula (999 px) továbbra sincs.

   ⚠️ Az `!important` itt SZÁNDÉKOS és ideiglenes: a két meglévő
   stíluslap együtt 500 KB, és a javításnak azok szabályai fölött
   kell nyernie. Ahogy egy lap átáll az új arculatra, az adott
   szabály innen kikerül.
   ============================================================ */

:root{
  /* ── lágyabb geometria, mindkét stíluslapnak ── */
  --lp-r:    10px;
  --lp-r-lg: 14px;
  --lp-r-xl: 18px;
  /* 🔑 2026-09-29, a user jóváhagyásával: a Műhely sarkai a szabály szerint
     (kis elem max 4 px, kártya 8, nagy panel 10). Eddig 10/14/18 volt.
     A nyilvános oldalak a `--lp-r*` változókat használják, azokat ez nem érinti. */
  --r:       4px;
  --r-lg:    8px;
  --r-xl:    10px;

  /* ── olvasható másodlagos szürke a sötét oldalon ──
     régi: #6c7f96 (4,45 a kártyán, BUKIK) · új: 9,7 a kártyán */
  --lp-dim: #aebfd2;

  /* ── a magenta szerepe: jelzés, nem felirat-háttér ──
     fehér szöveg magentán 3,43 = bukás, ezért a jelvényekre
     sötét felirat jár. */
  --magenta-ink: #0f1113;
}

/* ══ TIPOGRÁFIA — a sorok ne érjenek össze ══ */
h1, h2, h3{
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
}
h2, h3{
  line-height: 1.28 !important;
}

/* nagyon nagy címnél még több levegő kell */
@media (min-width: 900px){
  h1{ line-height: 1.16 !important; }
}

/* ══ SZÖVEGTÖRZS — a nyilvános oldalon ══ */
body.lp, .lp-szoveg{
  line-height: 1.7;
}

/* ══ A KIEMELÉS FÉNYCSÍKJA ══
   Mérve 2026-09-19, 375 px szélességen: a csík `bottom: 0.08em`-en ült,
   ami pontosan a lelógó betűk sávja. A magyar szövegben ez folyton
   előjön („végigvezetjük", „gyorsan", „így"), és átvágja a betűt.
   Lejjebb visszük a sorköz aljára, és picit erősítjük, mert távolabbról
   halványabbnak látszana. */
.lp-kiemel::after{
  bottom: -0.14em !important;
  height: 0.075em !important;
  opacity: .5 !important;
}

/* ══ MAGENTA JELVÉNY — sötét felirattal, mérve 5,9 ══ */

/* ══ FÓKUSZ — billentyűzettel is látszódjon ══ */
:focus-visible{
  outline: 2px solid var(--lime, var(--m-lime));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ============================================================
   NYITÓLAP — LEVEGŐ ÉS REND (2026-09-19)

   A user: „nem átláthatóak az oldalak és a tartalom".
   Mérve, mi okozta: a nyitó képernyőn HAT elem áll egymás alatt
   (címke, cím, cédula, alcím, nyitva-sáv, nyíl), és mobilon a hat
   lépés közt csak 20-34 px hely van. Asztalon a lépések közti hely
   már jó volt (120-300 px), tehát csak a szűk helyeket tágítjuk.
   A TARTALOMHOZ NEM NYÚLUNK, csak a térközhöz és a súlyokhoz.
   ============================================================ */

/* ── a nyitó: több levegő, és egyetlen fő üzenet ── */
/* 2026-09-28: a user „a menü alatt sok a légrés” → a felső párna 150-ről 64 px-re */
.lp-hero{ padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 6vw, 96px) !important; }
.lp-hero .lp-kis{ margin-bottom: 26px !important; }
.lp-hero-cim{ margin-bottom: 0 !important; }
.lp-hero .lp-alcim{ margin-bottom: 0 !important; }

/* ── a hat lépés: mobilon dupla annyi hely, és olvashatóbb szöveg ── */
@media (max-width: 999px){
  .film-bal{ gap: clamp(44px, 9vw, 72px) !important; }
}
.lepes{ max-width: 52ch !important; }
.lepes h2{ margin-bottom: 14px !important; }
.lepes p{
  font-size: clamp(16px, 0.95rem + 0.3vw, 17.5px) !important;
  line-height: 1.7 !important;
}
.lepes-jel{ margin-bottom: 16px !important; }

/* ── a szakaszok közti ritmus ── */
.film-szek{ padding: clamp(46px, 6vw, 88px) 0 clamp(64px, 9vw, 120px) !important; }

/* ============================================================
   ALOLDALAK — EGYSÉGES SZÖVEGMÉRET ÉS LEVEGŐ (2026-09-19)

   Mérve mind a 9 nyilvános lapon, 375 px-en: vízszintes kilógás
   SEHOL nincs, viszont a szövegméret lapról lapra ugrált
   (13 · 13,5 · 14 · 14,5 · 15,5 · 16,1 · 17,1 px). Ettől tűnik
   rendezetlennek a lap, pedig a szerkezet rendben van.

   🔑 Nem húzunk mindent 17-re: ezek kártyákban ülnek, és a
   szétfeszítenék. Alsó HATÁRT adunk nekik, és tisztességes sorközt.

   A cím és az utána jövő bekezdés közt MINDEN aloldalon 0 px volt
   a távolság (mérve). A nyitólap hőscíme kivétel, annak saját
   ritmusa van.
   ============================================================ */

/* másodlagos szövegek kártyákon: legalább 15,5 px */
.ar-kinek,
.hg-mit,
.hg-ki,
.tb-link p,
.hg-h-elem p{
  font-size: var(--t-3) !important;
  line-height: 1.65 !important;
}

/* lábjegyzet és apró szöveg: kicsi marad, de nem 13 px */
.ar-labjegyzet,
.lp-apro{
  font-size: var(--t-2) !important;
  line-height: 1.6 !important;
}

/* levegő a lapcím alá.
   🔴 Mérve: az ALOLDALAK címe is `lp-hero-cim` osztályt visel, ezért az
   előző, „a hőscímet kihagyjuk" szabály egyetlen lapon sem fogott. Most
   fordítva: mindenki kap levegőt, és a NYITÓLAP hőscíme (`lp-hero-sz`)
   az egyetlen kivétel, mert ott a cédula adja a ritmust. */
.lp-hero-cim{
  margin-bottom: clamp(16px, 2.6vw, 26px) !important;
}

/* a vezető bekezdés és az alcím sorköze */
.lp-vezeto,
.lp-alcim{
  line-height: 1.68 !important;
}

/* ============================================================
   MŰHELY — A BELSŐ FELÜLET (2026-09-19)

   A `design.css` színei mérve rendben vannak, ezért azokhoz nem
   nyúlunk. Két hely maradt, ahol a sorköz és a betűtávolság
   ugyanúgy összetolja a szöveget, mint a nyilvános oldalon volt:
   a lapcím (`.head h1`, 1,15) és a kártyacím (`.dont-cim`, 1,15),
   mindkettő -0,03em betűtávolsággal.

   ⚠️ A műhely belépés mögött van, ezt a két javítást KÓDBÓL
   írom, nem láttam működés közben. Ha valami elcsúszik, ez a
   két szabály törlendő először.
   ============================================================ */

.head h1,
.dont-cim{
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
}

/* a logó egysoros, azt békén hagyjuk (`.brand`, 1,05) */

/* ============================================================
   MŰHELY — MÉRETREND (2026-09-19)

   🔬 MÉRVE az éles stíluslappal (másolaton, mert a lap belépés
   mögött van). Ezt találtam:

     lapcím        22,6 px
     szakaszcím    15 px
     súgószöveg    15 px
     szövegtörzs   15 px
     mezőfelirat   13,5 px
     mező          14 px
     prompt        12,5 px

   🔴 A BAJ: nincs méretrend. A lapcímtől a szövegtörzsig hét
   pontnyi a teljes tartomány, és a szakaszcím PONTOSAN akkora,
   mint a súgó meg a törzs. Ezért nem vezeti a szem: minden
   egyformán fontosnak látszik. Ez a „nem átlátható" mérhető oka.

   ✅ Amit csinálunk: szétnyitjuk a rendet. A cím nagyobb lesz,
   a szakaszcím kiemelkedik a törzsből, a súgó visszalép, a
   mezők kényelmesebbek.

   🔑 A user kérése: „a promptok betűtípusa maradjon ilyen, max
   lehetne picit nagyobb" → a JetBrains Mono MARAD, 12,5 → 14 px.
   ============================================================ */

:root{
  --fs-body: 16px;          /* 15 → 16 */
  --fs-lapcim: clamp(26px, 1.2rem + 0.9vw, 34px);   /* 21-28 → 26-34 */
  --fs-h2: clamp(19px, 1rem + 0.3vw, 22px);         /* 18-21 → 19-22 */
  --fs-h3: 17.5px;
}

/* a szakaszcím emelkedjen ki a törzsből */
.sec-label{
  font-size: var(--t-3) !important;
  padding: 13px var(--s4) !important;
}

/* a súgó lépjen vissza: kisebb és halkabb, mint a törzs */
.sec-hint{
  font-size: var(--t-2) !important;
  line-height: 1.65 !important;
}

/* mezők: kényelmesebb felirat és beviteli szöveg */
.field label{ font-size: var(--t-2) !important; }
.field input,
.field select,
.field textarea,
.wlai-select{
  font-size: var(--t-3) !important;
}

/* 🔑 A PROMPT — a betűtípus marad, csak nagyobb és levegősebb */
.out textarea{
  font-size: var(--t-2) !important;
  line-height: 1.75 !important;
}
.out-head b,
.out-head em{ font-size: var(--t-0) !important; }

/* ============================================================
   MŰHELY — REND ÉS OLVASHATÓSÁG (2026-09-19, elfogadva)

   A user: „nem a dobozokkal volt bajom, hanem azzal, hogy
   olvashatatlan és rendezetlen minden. A régi kék színei nagyon
   jók, a prompt lime színe szar."

   ➡️ A kék világ ÉRINTETLEN (lap #071523, kártya #0D2137,
      szöveg #EEF4FA), a dobozok maradnak. Csak a rend változik.

   ⚠️ A műhelynek VAN témaváltója (sötét/világos), ezért a
      színeket a rendszer saját változóival írjuk, nem beégetve.
      Egyetlen kivétel a prompt szövege, ami csak sötétben volt
      lime — azt csak sötét témában cseréljük.
   ============================================================ */

/* ── 1. A szakaszcím legyen valódi cím ── */
.sec-label{
  font-size: var(--t-4) !important;
  padding: 15px 20px !important;
  letter-spacing: -0.01em !important;
}
.sec-hint{
  font-size: var(--t-3) !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}

/* ── 2. A kártyák kapjanak belső levegőt, és legyen köztük hely ── */
.sec{
  padding: 4px 20px 22px !important;
  margin-bottom: 30px !important;
}

/* ── 3. A mezőfelirat ránézésre különüljön el a tartalomtól ── */
.field{ margin-bottom: 20px !important; }
.field label{
  display: block !important;
  font-size: var(--t-1) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
}
.field input,
.field select,
.field textarea,
.wlai-select{
  width: 100% !important;
  font-size: var(--t-3) !important;
  padding: 13px 15px !important;
  border-radius: var(--r) !important;
  background: var(--bg-sunken) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text) !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--cyan, #35e0ff) !important;
  outline: none !important;
}

/* ── 4. A prompt: a lime megy, a kék világ marad ──
   📏 Mérve a kártyán (#0D2137): lime 13,8 · lágy kékesfehér 13,1.
   Nem az olvashatóság volt a baj, hanem hogy telített zöld egy
   hosszú angol szövegen fárasztó. A lime NEM tűnik el: ott marad
   a doboz címkéjén és a másoló gombon, jelölőnek. */
.out{ border-radius: var(--r-lg) !important; margin-bottom: 44px !important; }
.out textarea{
  font-size: var(--t-2) !important;
  line-height: 1.8 !important;
  padding: 22px !important;
  min-height: 250px !important;
}
:root[data-theme="dark"] .out textarea{ color: #DCE8F5 !important; }
.out-head{ padding: 15px 20px !important; }
.out-head b{ color: var(--accent, var(--m-lime)) !important; font-size: var(--t-1) !important; letter-spacing: .14em !important; }
.out-foot{ padding: 16px 20px !important; }
.out-note{ font-size: var(--t-2) !important; line-height: 1.7 !important; }

/* ============================================================
   MŰHELY FŐOLDAL — A CSEMPÉK (2026-09-19)

   🔴 Ez az a lap, amit belépés után ELŐSZÖR látsz, és eddig
   egyetlen javításom sem érintette: más elemekből áll
   (`tile`, `dont`, `eszk-fej`), mint a szerszám-lapok
   (`sec`, `field`, `out`). Ezért nem látszott semmi.

   📏 MÉRVE az éles stíluslappal:
     csempe neve        17,5 px
     csempe leírása     13,5 px / 1,45 sorköz
     lépés-felirat      10,5 px
     szakaszcím (h2)    19 px
     alatta a mondat    13,5 px
     csempék közti hely 12 px

   🔴 A BAJ ugyanaz, mint mindenhol: a szakaszcím (19) és a
   csempe neve (17,5) között másfél pont a különbség, a leírás
   meg 13,5 px szűk sorközzel. Nincs rend, és apró a szöveg.
   ============================================================ */

/* a szakaszcím emelkedjen ki a csempék nevéből */
.eszk-fej h2{
  font-size: var(--t-5) !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}
.eszk-fej p{
  font-size: var(--t-3) !important;
  line-height: 1.65 !important;
}

/* a csempe: nagyobb név, olvasható leírás, levegő */
.tiles{ gap: 18px !important; }
.tile{ padding: 20px !important; border-radius: var(--r-lg) !important; }
.tile-name{
  font-size: var(--t-4) !important;
  line-height: 1.3 !important;
}
.tile-desc{
  font-size: var(--t-2) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
  /* 🔴 A leírás KÉT sorra volt vágva (`-webkit-line-clamp: 2`). A nagyobb
     betűbe már nem fért bele a mondat, és félbevágva jelent meg
     („a megadot…"). Három sor: a mondat kifér, a csempe alig nő. */
  -webkit-line-clamp: 3 !important;
}
.tile-lepes{
  font-size: var(--t-0) !important;
  letter-spacing: .1em !important;
  margin-bottom: 7px !important;
}

/* a folytatás-doboz és az új videó doboz */
.dont-cim{ font-size: var(--t-5) !important; line-height: 1.25 !important; }
.dont-uj-cim{ font-size: var(--t-4) !important; }
.dont-uj-mit,
.dont-elso-mit{ font-size: var(--t-3) !important; line-height: 1.65 !important; }
.dont-cimke{ font-size: var(--t-0) !important; letter-spacing: .1em !important; }

/* ============================================================
   MŰHELY — A HALVÁNY SZÜRKÉK (2026-09-19)

   A user, sokadszor: „ugyanazok a halvány szürke betűk".
   📏 Mérve a sötét témában, a kártyán (#0d2137):
       --text        #eef4fa   14,7   rendben
       --text-muted  #a3b6cb    7,8   átmegy, DE fakó 15 px-en
       --text-dim    #8fa3ba    6,3   átmegy, DE fakó

   🔑 A szabvány nem minden: 7,8 „megfelel", és mégis fakónak
   látszik, mert alacsony telítettségű kékesszürke, kis méretben.
   A user szeme a mérvadó, nem a küszöb.
   ============================================================ */

:root[data-theme="dark"]{
  --text-muted: #cfdcea;   /* 7,8 → 11,7 a kártyán */
  --text-dim:   #b8c9dc;   /* 6,3 →  9,6 a kártyán */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --text-muted: #cfdcea;
    --text-dim:   #b8c9dc;
  }
}

/* ============================================================
   BETŰTÍPUS — A TELJES RENDSZERBEN (2026-09-19, elfogadva)

   A user: „szar betűtípussal". Négy párosítást nézett végig a
   választón, és az ajánlásomat fogadta el:

     CÍMEK   → Plus Jakarta Sans   (van jelleme, de tiszta)
     SZÖVEG  → Inter               (felületre tervezték, 13-15 px-en
                                     is éles, a magyar ő és ű
                                     kettős vesszője rendben marad)
     PROMPT  → JetBrains Mono      (VÁLTOZATLAN, a user kérése)

   ⚠️ A `landing.css` 14 helyen írja ki a 'Bricolage Grotesque'-ot
   és 6 helyen az 'IBM Plex Sans'-t közvetlenül, nem változóból.
   Ezért itt felül kell írni őket, nem elég a tokent cserélni.
   ============================================================ */

/* ── a műhely: változókon keresztül megy ── */
:root{
  --font-fo:  'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-szo: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
  /* --font-gep (JetBrains Mono) SZÁNDÉKOSAN érintetlen */
}

/* ── a nyilvános oldal: közvetlen deklarációk, felül kell írni ── */
/* 🔴 A `body.lp` (két osztály-szintű szelektor) erősebb, mint a puszta
   `body`, ezért azt NÉV SZERINT is felül kell írni, különben minden
   elem, aminek nincs saját szabálya, a régi betűt örökli. Mérve. */
body, body.lp, .lp-alcim, .lp-vezeto, .lp-apro, p, li, td, th, input, select, textarea, button, .lp-btn, .lp-btn2, .lp-link, .btn, .copy-btn, .tool-btn, .ai-btn, .auth-btn, .dont-gomb, .tile-soon-tag{
  font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
}
h1, h2, h3, h4, .lp-hero-cim, .jel, .logo, .brand, .tile-name, .dont-cim, .dont-uj-cim, .sec-label, .head h1{
  font-family: 'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* a monospace MINDENHOL marad, ahol eddig is volt */
.out textarea, .lp-kis, .cimke, .lepes-jel, .tile-lepes, .ido,
code, pre, kbd, samp{
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ============================================================
   MŰHELY — A VILÁGOS TÉMA HALK SZÖVEGEI (2026-09-19)

   🔴 A korábbi javításom CSAK a sötét témára vonatkozott. Ha a
   felhasználó világos témát használ (a `hgf-theme` a böngésző
   tárolójában), abból semmit nem látott.

   📏 Mérve a fehér kártyán:
       --text-muted  #56637a   6,07   fakó
       --text-dim    #626f85   5,08   fakó
   A lap szürkés hátterén (#f3f6fa) még rosszabb: 5,6 és 4,69.

   Az alábbi értékek ugyanaz a hideg kékesszürke, csak sötétebbek.
   ⚠️ Ez a bare `:root`, tehát a VILÁGOS témára hat. A sötét téma
   értékeit a fenti, nagyobb fajsúlyú szabály adja.
   ============================================================ */

:root{
  --text-muted: #3d4a60;   /* 6,07 → 8,95 a kártyán */
  --text-dim:   #46536a;   /* 5,08 → 7,76 a kártyán */
}

/* ============================================================
   A LOGÓ BETŰJE: ANTON (2026-09-28, a user választása)
   A logó (lime „weblock” + magenta „ai”) marad, csak a betű új:
   keskeny filmplakát-betű. CSAK a logóra: a lap szövegei maradnak.
   🔑 Saját szerverről (`assets/fonts/`), nem a Google-ről. Egy
      vastagsága van, ezért a `font-weight` 400, különben a böngésző
      műfélkövért rajzolna rá.
   ============================================================ */
@font-face{
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.brand, .lp-logo, .brand .brand-fo, .brand .brand-ai, .lp-logo b, .oldalsav .sav-brand::after{
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
}
.brand, .lp-logo{ letter-spacing: 0.005em; }

/* A LOGÓ JELE: csapó, aminek a teste lejátszás gomb (2026-09-28, a user: „C”).
   CSAK CSS: minden lapon megjelenik, ahol a logó van (menü, nyilvános lapok,
   belépés), a PHP-hoz nem kell nyúlni. Keskeny ikon-módban a jel marad, az
   „ai” betűk helyett. */
.brand, .lp-logo{ display: inline-flex; align-items: center; }
.brand::before, .lp-logo::before{
  content: ''; flex-shrink: 0;
  width: 1.05em; height: 1.05em; margin-right: 0.3em;
  background: url('/assets/logo-jel.svg') center / contain no-repeat;
}
/* A „STUDIO” felirat a név alatt, két vékony lime vonal között (2026-10-31, a user: „E”).
   A sor a név szélességére nyúlik (a szülő oszlop a legszélesebb gyerekéhez igazodik). */
.lp-logo-nev{ display: flex; flex-direction: column; line-height: 1; }
.lp-logo-s{
  display: flex; align-items: center; justify-content: center; gap: .5em;
  margin-top: .2em; font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400;
  font-size: max(.3em, 9px); letter-spacing: .5em; text-transform: uppercase; line-height: 1;
  color: #c9ff35; -webkit-text-fill-color: #c9ff35; text-shadow: none;
}
.lp-logo-s::before, .lp-logo-s::after{ content: ''; flex: 1; height: 2px; background: #c9ff35; opacity: .7; }
.lp-logo-s::after{ margin-left: -.5em; }
.brand .lp-logo-s{ margin-top: .15em; }
@media (min-width: 1024px) and (max-width: 1279px){
  .oldalsav .sav-brand::before{ width: 30px; height: 30px; margin-right: 0; }
  .oldalsav .sav-brand::after{ content: none; }
  .oldalsav .lp-logo-s{ display: none; }
}

/* ══ IZZÁS (neon glow) + NYOMHATÓ GOMB (2026-11-11, a user: „Javasolj hogy hova kerüljön lime és hova magenta. Elfogadom”) ══
   Magenta izzás = „figyelj, ez különleges”: csak a fizetéskérő ablak (_kirakat.php), a lime gombja is izzik.
   Lime izzás = „ezt nyomd meg”: a kiemelt csomag (vasarlas/index.php). A nyilvános lapokon magenta izzás NEM kerül.
   A fő (lime) gomb mindenhol nyomható gomb, izzás nélkül. Levétel: az `izzas` osztály kivétele, illetve ez a blokk. */
.izzas{ --izzas-rgb: var(--m-magenta-rgb); --izzas-belso: .5; }
.izzas--lime{ --izzas-rgb: var(--m-lime-rgb); --izzas-belso: .2; }
:root:root:root .izzas{
  border: 1px solid rgba(var(--izzas-rgb), .95) !important; border-top-color: rgba(var(--m-feher-rgb), .5) !important; border-radius: 4px;
  background-image: radial-gradient(120% 95% at 15% 120%, rgba(var(--izzas-rgb), var(--izzas-belso)), transparent 65%),
    radial-gradient(80% 60% at 100% 0%, rgba(var(--m-feher-rgb), .05), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .16), 0 0 0 1px rgba(var(--izzas-rgb), .35), 0 0 16px rgba(var(--izzas-rgb), .5),
    0 0 48px rgba(var(--izzas-rgb), .3), 0 0 110px rgba(var(--izzas-rgb), .15) !important;
}
:root:root:root[data-theme="light"] .izzas{
  background-image: none; border-top-color: rgba(var(--izzas-rgb), .95) !important;
  box-shadow: 0 0 0 1px rgba(var(--izzas-rgb), .35), 0 0 18px rgba(var(--izzas-rgb), .35) !important;
}
dialog.izzas::backdrop{ background: rgba(var(--m-fekete-tiszta-rgb), .72); backdrop-filter: blur(3px); }
:root:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo){
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), inset 0 -2px 0 rgba(var(--m-fekete-tiszta-rgb), .18), 0 3px 0 var(--m-lime-kozep) !important;
  transition: transform .08s ease, box-shadow .08s ease;
}
:root:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo):not(:disabled):active{
  transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .4), 0 1px 0 var(--m-lime-kozep) !important;
}
:root:root:root[data-theme="light"] :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo){
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), 0 3px 0 var(--m-fekete) !important;
}
:root:root:root:not([data-theme="light"]) .izzas .wg--fo{
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), inset 0 -2px 0 rgba(var(--m-fekete-tiszta-rgb), .18), 0 3px 0 var(--m-lime-kozep),
    0 0 22px rgba(var(--m-lime-rgb), .55) !important;
}
@media (prefers-reduced-motion: reduce){ :root:root:root :is(.wg--fo, .btn--lime, .btn--primary){ transition: none; } }