/* Tudastar - kozos kinezet a listaoldalnak es a cikkeknek.
   UJ CIKKNEL: eleg erre a fajlra hivatkozni, sajat stilus nem kell. */

:root{
  --zold:#22B573; --zold-sotet:#199a60;
  --sotet:#102a2a; --szurke:#52706a; --halvany:#718984;
  --vonal:#e2ebe7; --hatter:#f5faf8;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  color:var(--sotet); background:var(--hatter);
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;line-height:1.75}

header{height:76px;background:#fff;border-bottom:1px solid #e6eeeb;display:flex;align-items:center;
  padding:0 max(24px,calc((100vw - 1120px)/2))}
.brand{display:flex;align-items:center;gap:10px;color:var(--sotet);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.025em;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.brand span{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#34d399,#16a36a);box-shadow:0 8px 20px rgba(34,181,115,.2);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;flex:0 0 auto}

.wrap{max-width:740px;margin:0 auto;padding:40px 24px 80px}

.vissza{display:inline-flex;align-items:center;gap:8px;background:var(--zold);color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;line-height:1.55;padding:10px 16px;border-radius:10px;margin-bottom:28px}
.vissza:hover{background:var(--zold-sotet)}
.vissza svg{width:16px;height:16px;flex:none}
.vissza-alul{margin:44px 0 0}

.cimke{color:var(--zold);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
h1{font-size:36px;line-height:1.111;font-weight:800;letter-spacing:-.025em;margin:0 0 14px}
@media(min-width:640px){h1{font-size:44px;line-height:1.08}}
.datum{color:var(--halvany);font-size:14px;margin:0 0 36px;padding-bottom:24px;border-bottom:1px solid var(--vonal)}

article h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:40px 0 12px;line-height:1.25}
/* Sorkizart, ugyanaz a minta, mint a Rolam oldalon.
   A hyphens:auto KOTELEZO mellette: elvalasztas nelkul a hosszu magyar szavak
   csunya lyukakat hagynanak a sorokban, kulonosen mobilon. */
article p{font-size:17px;margin:0 0 18px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
article strong{font-weight:700}

/* Cikkbeli felsorolas. Az elso cikkben nem volt ra szukseg, az elofizetes-cikk
   hozta be. Ugyanakkora betu, mint a bekezdes, hogy ne torjon ki a szovegbol. */
article ul{margin:0 0 18px;padding-left:22px}
article li{font-size:17px;margin:0 0 10px}

/* Koltseglista - pelda tetelek osszeggel, feher kartyan.
   Az utolso sor az osszesites: vastag, es nincs alatta vonal. */
.koltseglista{list-style:none;background:#fff;border:1px solid var(--vonal);border-radius:16px;
  padding:4px 24px;margin:28px 0}
.koltseglista li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:13px 0;margin:0;border-bottom:1px solid var(--vonal);font-size:16px;line-height:1.5}
.koltseglista li:last-child{border-bottom:none;font-weight:800}
.koltseglista .ossz{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Kiemelt mondat - a cikk gerince. Cikkenkent legfeljebb egy. */
/* Cikkbeli kep. A width/height attributum a HTML-ben is ott van, hogy a
   bongeszo betoltes elott lefoglalja a helyet es ne ugorjon a szoveg. */
.cikk-kep{margin:28px 0;padding:0}
.cikk-kep img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--vonal)}
.cikk-kep figcaption{color:var(--halvany);font-size:14px;line-height:1.5;margin-top:10px;text-align:left}

/* A kiemelt mondat NEM sorkizart: rovid szoveg ket sorra torve csunyan
   szetfeszulne. Balra zart marad. */
.kiemelt{border-left:4px solid var(--zold);background:#fff;border-radius:0 12px 12px 0;
  padding:20px 24px;margin:28px 0;font-size:19px;font-weight:700;line-height:1.55;
  text-align:left;hyphens:none}

.zaras{background:#fff;border:1px solid var(--vonal);border-radius:16px;padding:24px 26px;margin-top:40px}
.zaras h2{margin-top:0}
.zaras p:last-child{margin-bottom:0}

/* Listaoldal */
.lista{list-style:none;padding:0;margin:0}
.lista li{margin:0 0 16px}
.lista a{display:block;background:#fff;border:1px solid var(--vonal);border-radius:16px;padding:22px 24px;
  text-decoration:none;color:var(--sotet)}
.lista a:hover{border-color:var(--zold)}
.lista h2{font-size:20px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em;line-height:1.3}
.lista p{color:var(--szurke);font-size:15px;margin:0}

.bevezeto{color:var(--szurke);font-size:18px;margin:0 0 36px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}

@media(max-width:420px){
  header{padding:0 18px}
  .wrap{padding:28px 18px 60px}
  article p{font-size:16px}
  article li{font-size:16px}
  /* Keskeny kijelzon a tetel neve es az osszeg egymas ala kerul, kulonben
     a hosszabb megnevezes osszenyomna az osszeget. */
  .koltseglista{padding:4px 18px}
  .koltseglista li{flex-direction:column;gap:2px;align-items:flex-start}
  .koltseglista .ossz{color:var(--szurke)}
  .koltseglista li:last-child .ossz{color:inherit}
}

/* MOBILON a mélyebb, "neonos" M (Evelin választása, 2026-08-21): telítettebb zöld
   végszín és világoszöld, erősebb árnyék. Asztalin marad a halványabb mérce. */
@media(max-width:640px){
  .brand span{border-radius:12px;font-size:18px;
    background:linear-gradient(to bottom right,#34d399,#059669);
    box-shadow:0 10px 15px -3px rgba(167,243,208,.7),0 4px 6px -4px rgba(167,243,208,.7)}
}

/* Alcim a cikkben. Az ev vegi zaras cikk hozta be: ott a "negy hiba" szakasz
   negy kis alfejezetre bomlik, azokat kell elvalasztani a h2-tol. Kisebb es
   nem all olyan tavol a szovegtol, mint a h2. */
article h3{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:28px 0 10px;line-height:1.3}

/* Ellenorzolista - feher kartyan, pipa jellel. A pontok kerdesek, ezert nincs
   szamozas: nem sorrend, hanem atnezni valo lista. A ::before a pipa, a
   list-style ezert ki van kapcsolva. */
.ellenorzo{list-style:none;background:#fff;border:1px solid var(--vonal);border-radius:16px;
  padding:8px 24px;margin:28px 0}
.ellenorzo li{position:relative;padding:14px 0 14px 30px;margin:0;
  border-bottom:1px solid var(--vonal)}
.ellenorzo li:last-child{border-bottom:none}
.ellenorzo li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:7px;
  border-left:2.5px solid var(--zold);border-bottom:2.5px solid var(--zold);
  transform:rotate(-45deg)}

/* Jogi/tajekoztato zaro megjegyzes a cikk vegen. Kisebb es halvanyabb, mint a
   szoveg, mert nem resze a cikknek, csak kell. */
.megjegyzes{font-size:15px;color:var(--halvany);line-height:1.6;margin:24px 0 0;
  text-align:left;hyphens:none}