/* =============================================================================
   mxfoto — a magazin stíluslapja
   =============================================================================
   Egyetlen fájl, nincs build lépés, nincs npm. Amit itt látsz, az fut.

   A MOZGÁS FILOZÓFIÁJA
   --------------------
   Az animációk itt nem JavaScriptből jönnek, hanem a böngésző saját
   görgetés-idővonalából (`animation-timeline`). Ez három dolgot ad:

     1. a fő szálat nem terheli semmi — a görgetés akkor is selymes marad,
        ha ötven kártya animálódik egyszerre
     2. nincs betöltendő könyvtár, tehát nincs mit várni
     3. ahol a böngésző nem ismeri, ott egyszerűen elmarad; a tartalom
        látszik, semmi nem törik el

   Ahol a böngésző nem tudja, ott egy apró IntersectionObserver ugrik be
   (magazine.js) — de csak ott.

   MINDEN MOZGÁS KIKAPCSOLHATÓ: aki a rendszerében csökkentett mozgást kért,
   az statikus oldalt kap. Ez nem opció, hanem a fájl legvégén kötelező blokk.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Betűtípusok
   --------------------------------------------------------------------------
   SAJÁT KISZOLGÁLÁS, nem Google Fonts hivatkozás. Így nincs külső kérés
   (se késleltetés, se adatvédelmi kérdés), és a fájlok a mi
   gyorsítótárazási szabályaink alá esnek.

   Mindkettő VÁLTOZÓ betű: egyetlen fájl viszi az összes vastagságot
   400-tól 800-ig. Külön fájlokkal ez öt-hat letöltés lenne.

   A latin-ext készlet NEM elhagyható: a magyar `ő` és `ű` abban van, nem
   az alap latinban. Enélkül a böngésző más betűvel pótolná őket, és a
   szövegben látszana a törés.

   Archivo      — címek és felület. Szűk, magas x-magasságú groteszk;
                  nagy méretben feszes, kis méretben olvasható.
   Source Serif — cikkszöveg. Képernyőre tervezett szerifes betű, nem egy
                  nyomdai klasszikus digitalizálása.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    /* swap: a szöveg azonnal látszik a tartalék betűvel, majd lecserélődik.
       Egy hírportálon az olvashatóság előbbre való, mint a betűhűség. */
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Source Serif";
    src: url("/fonts/serif-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Serif";
    src: url("/fonts/serif-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   1. Alapértékek
   -------------------------------------------------------------------------- */
:root {
    /* --- Színek ---------------------------------------------------------
       Sötét alap, mert ez fotómagazin: a képek világítanak a sötét lapon.

       A szürkék hidegek (kékes árnyalatúak), a szöveg viszont MELEG
       törtfehér. Ez a kis hőmérséklet-különbség az, amitől a lap nem
       "fekete-fehér weboldalnak", hanem nyomtatott felületnek hat.
       Tiszta #fff sötét alapon vibrál és fárasztja a szemet. */
    --hatter:        #0a0a0d;
    --panel:         #101015;
    --panel-vilagos: #17171e;
    --szoveg:        #ece9e3;
    --halvany:       #8b8b96;
    --halvanyabb:    #5f5f6a;
    --vonal:         #22222b;
    --vonal-eros:    #34343f;

    /* EGY kiemelőszín, és SZŰKEN használva: rovatcímke, aktív menüpont,
       hover. Sehol máshol. Az első változat gombra, számra, keretre és
       ikonra is ezt tette — attól lett vásári.
       A narancs a motorsport jelzőszíne (pályabírói zászló, kúp). */
    --jel:           #ff4b1f;
    --jel-halvany:   #ff8b6a;

    /* --- Betűk --------------------------------------------------------- */
    --cim-betu:    "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --szoveg-betu: "Source Serif", Georgia, "Times New Roman", serif;
    --ui-betu:     "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* --- Méretek --------------------------------------------------------
       A clamp() folyamatosan skáláz: nincsenek ugráló töréspontok, és
       mobilon sem lesz olvashatatlanul apró vagy óriási. */
    --meret-ora:    clamp(2.8rem, 9.5vw, 8rem);
    --meret-focim:  clamp(2.1rem, 5vw, 3.8rem);
    --meret-cim:    clamp(1.35rem, 2.2vw, 1.75rem);
    --meret-kartya: clamp(1.1rem, 1.5vw, 1.4rem);

    --keret:  min(1440px, 100% - 3rem);

    /* Szinte szögletes. A lekerekítés webalkalmazást idéz, a szerkesztőségi
       felület pedig éles vonalakból és vonalzókból épül. 3px annyi, hogy a
       kép széle ne legyen borotvaéles, de ne is legyen "kártya". */
    --sugar:  3px;

    /* Egységes lendület. Rövidebb, mint az első változatban: a hosszú,
       rugózó átmenet az, ami sablonos hatást kelt. */
    --lendulet: cubic-bezier(.2, .7, .3, 1);

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* A ragadós fejléc alá horgonyzáskor ne csússzon be a cím. */
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--hatter);
    color: var(--szoveg);
    font-family: var(--szoveg-betu);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* A betűköz a MÉRETTEL fordítva arányos: minél nagyobb a szöveg, annál
   szorosabbra kell húzni, különben szétesik. Ez a szabály az, amitől egy
   nagy cím "szedettnek" hat, és nem felnagyított kisbetűnek. Az egyetlen
   fix betűköz minden méretre az egyik legárulkodóbb amatőr jel. */
h1, h2, h3 {
    font-family: var(--cim-betu);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
}
h1 { letter-spacing: -0.035em; font-weight: 800; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.015em; }

/* A folyó szöveg tördelése: a `pretty` megakadályozza, hogy egyetlen szó
   maradjon az utolsó soron (árva sor). Csak bekezdésre való, címre a
   `balance` a helyes. */
p { text-wrap: pretty; }

/* Billentyűzetes navigáció: a fókusz mindig látszódjon, mindenhol. */
:focus-visible {
    outline: 2px solid var(--jel);
    outline-offset: 3px;
    border-radius: 3px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--jel);
    color: #fff;
    padding: .75rem 1.25rem;
    font-family: var(--ui-betu);
}
.skip:focus { left: 0; }

/* -----------------------------------------------------------------------------
   2. Fejléc
   -------------------------------------------------------------------------- */
.fej {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Áttetsző, elmosott háttér: a kép átdereng alatta, de a szöveg olvasható.
       A `saturate` visszaadja azt a színt, amit az elmosás elvenne. */
    background: color-mix(in srgb, var(--hatter) 72%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--vonal);
}

.fej__belso {
    width: var(--keret);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-block: 1rem;
}

.logo {
    font-family: var(--cim-betu);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.06em;
    text-decoration: none;
    flex-shrink: 0;
}
.logo__mx   { color: var(--jel); }
.logo__foto { color: var(--szoveg); }

.menu {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }

.menu__elem {
    font-family: var(--ui-betu);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--halvany);
    white-space: nowrap;
    padding-block: .35rem;
    position: relative;
    transition: color .25s var(--lendulet);
}
.menu__elem:hover,
.menu__elem--aktiv { color: var(--szoveg); }

/* Aláhúzás, ami a közepéből nő ki. A `scaleX` a szélességet nem számolja
   újra, ezért nem okoz újratördelést — ez a lényeg, nem a látvány. */
.menu__elem::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--jel);
    transform: scaleX(0);
    transition: transform .3s var(--lendulet);
}
.menu__elem:hover::after,
.menu__elem--aktiv::after { transform: scaleX(1); }

.kereses { flex-shrink: 0; }
.kereses__cimke {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.kereses__mezo {
    background: var(--panel-vilagos);
    border: 1px solid var(--vonal);
    border-radius: 999px;
    color: var(--szoveg);
    font-family: var(--ui-betu);
    font-size: .875rem;
    padding: .5rem 1rem;
    width: 10rem;
    transition: width .35s var(--lendulet), border-color .25s;
}
.kereses__mezo:focus { width: 15rem; border-color: var(--jel); outline: none; }

/* -----------------------------------------------------------------------------
   3. Nyitó (vezető cikk)
   -------------------------------------------------------------------------- */
/* A kép és a szöveg EGYMÁSRA a rácsban, nem negatív z-indexszel.
   ---------------------------------------------------------------------------
   Az első változat `z-index: -2`-t, `isolation: isolate`-et és két egymásra
   rakott színátmenetet használt — és a nyitókép egyszerűen nem látszott.
   Ezt a fajta hibát nem lehet fejben végigkövetni, mert négy CSS-szabály
   együttállásán múlik.

   Így viszont triviális: mindkét gyerek UGYANABBA a rácscellába kerül, a
   szöveg fölé, és nincs mit elrontani. Egy rétegezésnek egy sorból
   érthetőnek kell lennie. */
.nyito {
    position: relative;
    display: grid;
    /* `svh` és nem `vh`: mobilon a `vh` a böngészősáv miatt túlnyúlik, és a
       nyitókép alja levágódik. */
    min-height: min(74svh, 720px);
    overflow: hidden;
}

.nyito > * { grid-area: 1 / 1; }

.nyito__kepdoboz {
    position: relative;
    overflow: hidden;
}

.nyito__kep {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Enyhén nagyítva indul, hogy a parallax mozgásnál ne látszódjon a széle. */
    transform: scale(1.08);
}

/* Sötétítés a kép alján. Enélkül egy világos fotón olvashatatlan a cím —
   és pont a legjobb képek a világosak. */
/* A sötétítés a KÉPDOBOZON belül van, nem a nyitón: így pontosan a képet
   fedi, és nem kell z-indexszel a szöveg alá tuszkolni. */
.nyito__kepdoboz::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--hatter) 0%, rgba(10,10,13,.72) 26%, transparent 68%),
        linear-gradient(to right, rgba(0,0,0,.55) 0%, transparent 62%);
}

.nyito__szoveg {
    position: relative;
    align-self: end;
    width: var(--keret);
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 4rem);
    max-width: 62rem;
}

.nyito__cim {
    font-size: var(--meret-ora);
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-block: 1rem 1.25rem;
}
.nyito__cim a { text-decoration: none; }

.nyito__felvezeto {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: #d6d4ce;
    max-width: 44rem;
    margin: 0 0 2rem;
}

/* Görgetésjelzés: egy szó és egy lüktető vonal. */
.nyito__jelzes {
    position: absolute;
    right: max(1.5rem, calc((100% - var(--keret)) / 2));
    bottom: 2rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--ui-betu);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--halvany);
}
.nyito__vonal {
    width: 3rem;
    height: 1px;
    background: linear-gradient(to right, var(--jel), transparent);
    animation: huzodik 2.4s var(--lendulet) infinite;
}
@keyframes huzodik {
    0%, 100% { transform: scaleX(.4); opacity: .4; transform-origin: left; }
    50%      { transform: scaleX(1);  opacity: 1;  transform-origin: left; }
}

/* -----------------------------------------------------------------------------
   4. Gomb és címke
   -------------------------------------------------------------------------- */
/* A gomb szögletes és fehér, nem lekerekített és narancs.
   Az első változat pirulára tett élénk narancsot, alá színes fényudvart —
   ez a három együtt az, amitől egy felület sablonnak látszik. Egy
   szerkesztőségi lapon a fő hívás a legnagyobb kontrasztú elem, nem a
   legszínesebb. */
.gomb {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: var(--szoveg);
    color: var(--hatter);
    font-family: var(--ui-betu);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    padding: .95rem 1.6rem;
    border: 1px solid var(--szoveg);
    transition: background .25s var(--lendulet), color .25s var(--lendulet);
}
.gomb:hover {
    background: transparent;
    color: var(--szoveg);
}
.gomb__nyil { transition: transform .25s var(--lendulet); }
.gomb:hover .gomb__nyil { transform: translateX(3px); }

.cimke {
    display: inline-block;
    font-family: var(--ui-betu);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--jel);
    text-decoration: none;
}
.cimke--vilagit {
    background: color-mix(in srgb, var(--jel) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--jel) 35%, transparent);
    padding: .35rem .85rem;
    border-radius: 999px;
}

/* -----------------------------------------------------------------------------
   5. Sávok és rács
   -------------------------------------------------------------------------- */
.sav {
    width: var(--keret);
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 6rem);
}

/* Sávcím. A vonal SZILÁRD, nem elhalványuló színátmenet: a szerkesztőségi
   vonalzó egy határvonal, nem egy effekt. Az elhalványuló vonal az egyik
   leggyakoribb sablon-jel. */
.sav__cim {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    font-size: var(--meret-cim);
    font-weight: 600;
    margin-bottom: 2.25rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.sav__cim::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vonal-eros);
    /* A vonal a betűk alapvonalára üljön, ne a doboz közepére. */
    transform: translateY(-.35em);
}

.racs {
    display: grid;
    /* auto-fill + minmax: a törésponotokat a tartalom adja, nem media query.
       Egy oszlop sosem lesz keskenyebb 20rem-nél, tehát a kép mindig olvasható. */
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
}
.racs--harmas {
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
}

/* -----------------------------------------------------------------------------
   6. Kártya
   -------------------------------------------------------------------------- */
.kartya__link {
    text-decoration: none;
    display: block;
}

.kartya__kepdoboz {
    position: relative;
    overflow: hidden;
    border-radius: var(--sugar);
    background: var(--panel-vilagos);
    /* Egységes arány: enélkül a különböző méretű fotók szétszabdalnák a
       rácsot, és a sorok nem futnának egy vonalban. */
    aspect-ratio: 3 / 2;
}

.kartya__kep {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--lendulet), filter .5s;
    /* Alapból egy hajszállal visszafogott, hoverre kinyílik. Ettől lesz a
       rács nyugodt, és a kiválasztott elem élő. */
    filter: saturate(.92) contrast(1.02);
}
.kartya__link:hover .kartya__kep {
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.05);
}

.kartya__kep--nincs {
    display: grid;
    place-items: center;
    font-family: var(--cim-betu);
    font-size: 4rem;
    font-weight: 900;
    color: var(--vonal);
    background: var(--panel);
}

.kartya__szoveg { padding-top: 1.15rem; }

.kartya__cim {
    font-size: var(--meret-kartya);
    margin-block: .5rem .5rem;
    letter-spacing: -0.025em;
    /* Háromsoros vágás: egy hosszú cím különben szétnyomná a sort. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s;
}
.kartya__link:hover .kartya__cim { color: var(--jel-halvany); }

.kartya__felvezeto {
    color: var(--halvany);
    font-size: .95rem;
    line-height: 1.6;
    margin-block: .5rem;
}

.kartya__datum {
    font-family: var(--ui-betu);
    font-size: .78rem;
    color: var(--halvany);
    letter-spacing: .04em;
}

.kartya--nagy .kartya__kepdoboz { aspect-ratio: 4 / 3; }

/* -----------------------------------------------------------------------------
   7. Rovatszalag (futó sor)
   -------------------------------------------------------------------------- */
.szalag {
    border-block: 1px solid var(--vonal);
    padding-block: 1.5rem;
    overflow: hidden;
    background: var(--panel);
}

.szalag__futo {
    display: flex;
    gap: 3rem;
    width: max-content;
    /* A tartalmat kétszer írjuk ki, és pontosan a feléig futunk — így az
       ugrás a kiindulóponthoz észrevehetetlen. */
    animation: fut 40s linear infinite;
}
.szalag:hover .szalag__futo { animation-play-state: paused; }

@keyframes fut {
    to { transform: translateX(-50%); }
}

.szalag__elem {
    font-family: var(--cim-betu);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--vonal);
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    transition: color .3s var(--lendulet);
}
.szalag__elem:hover { color: var(--jel); }

.szalag__db {
    font-size: .8rem;
    font-family: var(--ui-betu);
    color: var(--halvany);
    letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   8. Cikkoldal
   -------------------------------------------------------------------------- */
.halado {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 3px;
    z-index: 60;
    pointer-events: none;
}
.halado__csik {
    display: block;
    height: 100%;
    background: linear-gradient(to right, var(--jel), var(--jel-halvany));
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.cikk {
    width: var(--keret);
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.cikk__fej {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.cikk__cim {
    font-size: var(--meret-focim);
    margin-block: 1.25rem;
}

.cikk__felvezeto {
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    color: #cfcdc7;
    line-height: 1.6;
}

.cikk__meta {
    font-family: var(--ui-betu);
    font-size: .82rem;
    color: var(--halvany);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
}

.cikk__borito {
    margin: clamp(2rem, 5vw, 3.5rem) 0;
}
.cikk__borito img {
    width: 100%;
    border-radius: var(--sugar);
}
.cikk__borito figcaption {
    font-family: var(--ui-betu);
    font-size: .8rem;
    color: var(--halvany);
    margin-top: .75rem;
    text-align: center;
}

/* --- A szövegtörzs ---------------------------------------------------------
   A mérték (sorhossz) 46rem: ez nagyjából 70-80 karakter, amit a szem egy
   szemmozdulattal követni tud. Szélesebb sornál az olvasó eltéved a
   sorváltásnál — ez a tipográfia egyik legrégebbi mérése, és igaz maradt. */
.cikk__szoveg {
    max-width: 46rem;
    margin-inline: auto;
    font-size: 1.15rem;
    line-height: 1.8;
}
.cikk__szoveg p { margin-block: 1.5rem; }

.cikk__szoveg a {
    color: var(--jel-halvany);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

/* A szövegben lévő képek KILÓGNAK a szövegoszlopból. Ez fotómagazin: a kép
   nem illusztráció, hanem tartalom. */
.cikk__szoveg img {
    width: 100%;
    border-radius: var(--sugar);
    margin-block: 2rem;
}
.cikk__szoveg figure { margin-inline: 0; }
.cikk__szoveg figcaption {
    font-family: var(--ui-betu);
    font-size: .8rem;
    color: var(--halvany);
    text-align: center;
}

.cikk__szoveg iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--sugar);
    margin-block: 2rem;
}

.cikk__szoveg blockquote {
    margin-inline: 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--jel);
    font-size: 1.3rem;
    line-height: 1.5;
    color: #e6e4de;
}

/* -----------------------------------------------------------------------------
   9. Rovatfej, lapozó, üres állapot
   -------------------------------------------------------------------------- */
.rovatfej {
    width: var(--keret);
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 5.5rem) 0;
    border-bottom: 1px solid var(--vonal);
    padding-bottom: 2rem;
}
.rovatfej__cim {
    font-size: var(--meret-ora);
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}
.rovatfej__leiras { color: var(--halvany); max-width: 44rem; }
.rovatfej__db {
    font-family: var(--ui-betu);
    font-size: .8rem;
    color: var(--jel);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ures { color: var(--halvany); }

.lapozo { margin-top: 4rem; font-family: var(--ui-betu); }
.lapozo svg { width: 1rem; height: 1rem; }

/* -----------------------------------------------------------------------------
   10. Lábléc
   -------------------------------------------------------------------------- */
.lablec {
    border-top: 1px solid var(--vonal);
    background: var(--panel);
    margin-top: 4rem;
}
.lablec__belso {
    width: var(--keret);
    margin-inline: auto;
    padding-block: 3.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}
.lablec__cim {
    font-family: var(--cim-betu);
    font-weight: 900;
    font-size: 1.75rem;
    letter-spacing: -0.05em;
    margin: 0;
}
.lablec__alcim { color: var(--halvany); margin: .25rem 0 0; font-size: .95rem; }
.lablec__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-family: var(--ui-betu);
    font-size: .875rem;
}
.lablec__menu a { color: var(--halvany); text-decoration: none; transition: color .25s; }
.lablec__menu a:hover { color: var(--jel); }

/* =============================================================================
   11. MOZGÁS — görgetéshez kötött animációk
   =============================================================================
   Ezek csak ott futnak, ahol a böngésző ismeri az `animation-timeline`-t.
   Máshol a `magazine.js` old meg ugyanennyit IntersectionObserverrel.
   ========================================================================== */
@keyframes felbukkan {
    from { opacity: 0; transform: translateY(2.5rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes parallax {
    /* A nyitókép lassabban mozog, mint a lap — ettől lesz mélysége. */
    to { transform: scale(1.08) translateY(12%); }
}

@keyframes halad {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* A FELBUKKANÁS NEM ITT VAN, HANEM A JAVASCRIPTBEN — szándékosan.
   ---------------------------------------------------------------------------
   Először a görgetés-idővonalra (`animation-timeline: view()`) bíztam, mert
   az nem terheli a fő szálat. Csakhogy annak az animációnak a kiindulópontja
   `opacity: 0`, és ha az idővonal bármiért nem fut végig, a tartalom
   LÁTHATATLAN MARAD. Pontosan ez történt, amikor a kártyákra
   `content-visibility: auto` került.

   A görgetés-idővonal ott maradt, ahol a hibás működés nem tüntet el semmit:
   a nyitókép parallaxánál és az olvasási haladásjelzőnél. Ha azok nem
   futnak, a kép állva marad és a csík nem mozdul — a lap olvasható. */

@supports (animation-timeline: scroll()) {
    .nyito__kep {
        animation: parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100svh;
    }

    .halado__csik {
        animation: halad linear both;
        animation-timeline: scroll(root block);
    }
}

/* Ha nincs görgetés-idővonal, a JS ezt az osztályt teszi a <html>-re,
   és az IntersectionObserver kapcsolja a `.lathato`-t. Enélkül — se JS,
   se támogatás — minden látszik, ahogy kell. */
.js-mozgas .kartya,
.js-mozgas .sav__cim {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity .7s var(--lendulet), transform .7s var(--lendulet);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js-mozgas .kartya.lathato,
.js-mozgas .sav__cim.lathato {
    opacity: 1;
    transform: none;
}

/* =============================================================================
   12. Oldalak közti átmenet
   =============================================================================
   A böngésző a régi oldalt átúsztatja az újba, és az azonos
   `view-transition-name`-ű elemeket összemorfolja — nálunk a borítóképet.
   Kattintasz egy kártyán, és a kép "felnő" a cikk borítójává.
   JavaScript nélkül.
   ========================================================================== */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: .25s var(--lendulet) both kihalvanyul;
}
::view-transition-new(root) {
    animation: .35s var(--lendulet) both felbukkan-finom;
}

@keyframes kihalvanyul { to { opacity: 0; } }
@keyframes felbukkan-finom {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

/* =============================================================================
   13. Csökkentett mozgás
   =============================================================================
   Aki a rendszerében ezt kérte, annak vesztibuláris oka lehet rá. Nem
   "szebb kevesebb animációval" kérdés — az erős mozgás rosszullétet okozhat.
   Ezért ez a blokk a fájl végén van: mindent felülír.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* A felbukkanó elemek maradjanak egyszerűen láthatók. */
    .js-mozgas .kartya,
    .js-mozgas .sav__cim { opacity: 1; transform: none; }

    /* A futó szalag megáll — ez a legzavaróbb mozgás a lapon. */
    .szalag__futo { animation: none; }

    @view-transition { navigation: none; }
}

/* -----------------------------------------------------------------------------
   14. Kisebb képernyők
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
    :root { --keret: calc(100% - 2rem); }

    .fej__belso { gap: 1rem; }
    .kereses__mezo { width: 7rem; }
    .kereses__mezo:focus { width: 10rem; }
    .nyito__jelzes { display: none; }
    .cikk__fej { text-align: left; }
    .cikk__meta { justify-content: flex-start; }
}

/* -----------------------------------------------------------------------------
   15. Lapozó
   -------------------------------------------------------------------------- */
.lap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--vonal);
    padding-top: 2rem;
}
.lap__elem {
    font-family: var(--ui-betu);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    padding: .7rem 1.4rem;
    border: 1px solid var(--vonal);
    border-radius: 999px;
    transition: border-color .25s var(--lendulet), color .25s;
}
.lap__elem:hover { border-color: var(--jel); color: var(--jel); }
.lap__elem--tiltott { opacity: .35; pointer-events: none; }
.lap__allas {
    font-family: var(--ui-betu);
    font-size: .8rem;
    letter-spacing: .15em;
    color: var(--halvany);
}

/* =============================================================================
   16. FORMA — mozaik, konténerlekérdezés, galéria, nagyító
   =============================================================================
   A fenti részek a tipográfiát és a mozgást rendezték; innentől a SZERKEZET
   következik — ez adja a lapnak a karakterét.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   16.1 Sávcím sorszámmal
   --------------------------------------------------------------------------
   A nagy, halvány sorszám a magazinok régi fogása: tagolja a lapot, és
   megmondja az olvasónak, hol tart. Az attr() a Blade-ből jövő `data-szam`
   értéket veszi át, tehát új sávnál a CSS-t nem kell bővíteni.
   -------------------------------------------------------------------------- */
.sav__cim { position: relative; }

.sav__cim::before {
    content: attr(data-szam);
    font-family: var(--ui-betu);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--jel);
    position: absolute;
    top: -1.5rem;
    left: 0;
}
.sav__cim[data-szam] { margin-top: 1.5rem; }

/* -----------------------------------------------------------------------------
   16.2 Mozaik
   --------------------------------------------------------------------------
   Nem egyforma dobozok: az első elem két oszlopot és két sort foglal. Egy
   magazin attól magazin, hogy látszik rajta, mi a fontosabb.

   A `grid-auto-flow: dense` engedi a kisebb elemeket a keletkező résekbe
   csúszni, tehát nem marad üres lyuk a rácsban.
   -------------------------------------------------------------------------- */
.mozaik {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    grid-auto-flow: dense;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 900px) {
    .mozaik { grid-template-columns: repeat(3, 1fr); }
    .mozaik__fo { grid-column: span 2; grid-row: span 2; }
}

/* -----------------------------------------------------------------------------
   16.3 Konténerlekérdezés a kártyán
   --------------------------------------------------------------------------
   A kártya ahhoz igazodik, milyen SZÉLES ő maga — nem ahhoz, mekkora a
   képernyő. A mozaiknál látszik: ugyanaz a kártya a nagy helyen nagyobb
   címet és felvezetőt kap, a kis helyen tömöret, és ehhez egyetlen sor
   kódot sem kell máshol írni.

   Media query-vel ez nem megoldható: az a képernyőt méri, nem az elemet.
   -------------------------------------------------------------------------- */
.kartya {
    container-type: inline-size;
    container-name: kartya;
}

/* ITT VOLT `content-visibility: auto`, ÉS EZ HIBA VOLT.
   ---------------------------------------------------------------------------
   Papíron jó ötlet: a böngésző kihagyhatja a képernyőn kívüli kártyák
   feldolgozását, ami 571 cikknél valódi nyereség lenne.

   A gyakorlatban viszont a felbukkanó animációval együtt ELTÜNTETTE a
   cikkeket. A kártya `opacity: 0`-ról indult, és csak akkor ért volna el
   1-ig, ha a görgetés-idővonal végigfut rajta — de a kihagyott tartalomnál
   ez nem történt meg. A kártya nulla átlátszóságon ragadt.

   A tanulság általánosabb ennél az egy tulajdonságnál: DÍSZÍTÉS SOHA NE
   TUDJA ELREJTENI A TARTALMAT. Ezért került a felbukkanás a
   JavaScriptbe (lásd lentebb és magazine.js): ott a hibás működés
   legrosszabb esete az, hogy nincs animáció — nem az, hogy nincs cikk. */

@container kartya (min-width: 30rem) {
    .kartya__cim { font-size: clamp(1.4rem, 3.5cqi, 2.2rem); }
    .kartya__szoveg { padding-top: 1.5rem; }
    .kartya__felvezeto { font-size: 1.05rem; }
}

@container kartya (max-width: 18rem) {
    .kartya__cim { font-size: 1rem; -webkit-line-clamp: 2; line-clamp: 2; }
    .kartya__felvezeto { display: none; }
}

/* A mozaik nagy eleme magasabb képet kap, hogy kitöltse a két sort. */
.mozaik__fo .kartya__link { display: flex; flex-direction: column; height: 100%; }
.mozaik__fo .kartya__kepdoboz { aspect-ratio: 16 / 11; flex: 1; }

/* -----------------------------------------------------------------------------
   16.4 Rovatcímke a képen
   --------------------------------------------------------------------------
   A címke a képre ül, nem a kép alá: így a szövegblokk egyetlen tömör egység
   marad (cím + dátum), és a kártyák alja egy vonalban fut.
   -------------------------------------------------------------------------- */
.kartya__kepdoboz { position: relative; }

.kartya__rovat {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    font-family: var(--ui-betu);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fff;
    padding: .3rem .7rem;
    border-radius: 999px;
    /* Elmosott üveg a kép fölött: a címke minden fotón olvasható marad,
       akár világos, akár sötét van alatta. */
    background: rgba(10, 10, 12, .55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .14);
    transform: translateY(.4rem);
    opacity: 0;
    transition: transform .4s var(--lendulet), opacity .4s var(--lendulet);
}
.kartya__link:hover .kartya__rovat,
.kartya__link:focus-visible .kartya__rovat { transform: none; opacity: 1; }

/* Érintőképernyőn nincs hover — ott mindig látszódjon. */
@media (hover: none) {
    .kartya__rovat { transform: none; opacity: 1; }
}

/* -----------------------------------------------------------------------------
   16.5 Galéria
   --------------------------------------------------------------------------
   Vízszintesen görgethető képsáv ütközőpontokkal: a görgetés minden képnél
   megáll, nem lehet két kép közé beragadni.
   -------------------------------------------------------------------------- */
.sav--teljes { width: 100%; }
.sav--teljes > .sav__cim { width: var(--keret); margin-inline: auto; }

.galeria {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Az első és az utolsó kép is a keret vonalára álljon be. */
    scroll-padding-inline: max(1.5rem, calc((100% - var(--keret)) / 2));
    padding-inline: max(1.5rem, calc((100% - var(--keret)) / 2));
    padding-block: .5rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--vonal) transparent;
}

.galeria__elem {
    margin: 0;
    flex: 0 0 auto;
    width: clamp(15rem, 32vw, 26rem);
    scroll-snap-align: start;
}

.galeria__gomb {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--sugar);
    overflow: hidden;
    width: 100%;
}

.galeria__gomb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s var(--lendulet), filter .4s;
    filter: saturate(.9);
}
.galeria__gomb:hover img,
.galeria__gomb:focus-visible img { transform: scale(1.05); filter: saturate(1.1); }

.galeria__elem figcaption {
    font-family: var(--ui-betu);
    font-size: .78rem;
    color: var(--halvany);
    margin-top: .6rem;
    /* Egy sor: a képek alja így egy vonalban marad. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   16.6 Képnagyító (natív dialog)
   -------------------------------------------------------------------------- */
.nagyito {
    border: 0;
    padding: 0;
    background: none;
    max-width: 100vw;
    max-height: 100dvh;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* A ::backdrop egy valódi böngészőréteg a párbeszédablak mögött — nem egy
   pozicionált div, amit nekünk kellene kezelni. */
.nagyito::backdrop {
    background: rgba(4, 4, 6, .88);
    backdrop-filter: blur(18px);
}

.nagyito__kepdoboz {
    margin: 0;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 3rem);
}

.nagyito__kep {
    max-width: min(96vw, 1600px);
    max-height: 82dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.nagyito__felirat {
    font-family: var(--ui-betu);
    font-size: .85rem;
    color: var(--halvany);
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
}

.nagyito__bezar,
.nagyito__lep {
    position: fixed;
    z-index: 2;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    backdrop-filter: blur(10px);
    transition: background .25s, transform .25s var(--lendulet);
}
.nagyito__bezar:hover,
.nagyito__lep:hover { background: var(--jel); transform: scale(1.08); }

.nagyito__bezar {
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.6rem;
    line-height: 1;
}

.nagyito__lep {
    top: 50%;
    translate: 0 -50%;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 2rem;
    line-height: 1;
}
.nagyito__lep--elozo     { left: 1.25rem; }
.nagyito__lep--kovetkezo { right: 1.25rem; }

/* A cikkszövegben a nagyítható kép jelezze magát. */
.nagyithato { cursor: zoom-in; }

.nagyito[open]            { animation: nagyito-be .3s var(--lendulet); }
.nagyito[open]::backdrop  { animation: hatter-be .3s ease; }

@keyframes nagyito-be {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes hatter-be {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   16.7 Kisebb képernyők
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
    .nagyito__lep { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
    .nagyito__lep--elozo     { left: .5rem; }
    .nagyito__lep--kovetkezo { right: .5rem; }
    .galeria__elem { width: 78vw; }
}

/* -----------------------------------------------------------------------------
   16.8 Csökkentett mozgás — az itt hozzáadott részekre is
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .kartya__rovat { transform: none; opacity: 1; }
    .galeria { scroll-behavior: auto; }
    .nagyito[open],
    .nagyito[open]::backdrop { animation: none; }
}

/* =============================================================================
   17. Szerkesztőfelület
   =============================================================================
   Ugyanaz a paletta és ugyanazok a betűk, mint a magazinon — de más a dolga:
   sűrű, gyors, munkára való. Nincs animáció, nincs nyitókép, nincs galéria.
   Egy szerkesztő naponta órákat tölt itt; a látványosság itt teher lenne.
   ========================================================================== */

.admin,
.belepes {
    font-family: var(--ui-betu);
    font-size: .95rem;
    line-height: 1.6;
}

.rejtett {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* --- Fejléc ---------------------------------------------------------------- */
.admin__fej {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--vonal);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin__menu { display: flex; gap: 1.5rem; flex: 1; }
.admin__menu a {
    color: var(--halvany);
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
}
.admin__menu a:hover { color: var(--jel); }

.admin__kilepes { display: flex; align-items: center; gap: 1rem; }
.admin__ki { color: var(--halvany); font-size: .85rem; }

.admin__torzs {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1600px;
    margin-inline: auto;
}

.admin__cimsor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.admin__cimsor h1 { font-size: 1.6rem; }
.admin__db {
    font-size: .8rem;
    font-weight: 600;
    color: var(--jel);
    vertical-align: middle;
    margin-left: .5rem;
}

/* --- Üzenetek -------------------------------------------------------------- */
.uzenet {
    border-left: 3px solid var(--jel);
    background: color-mix(in srgb, var(--jel) 8%, transparent);
    padding: .85rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0 6px 6px 0;
}
.uzenet--hiba {
    border-left-color: #ff3b3b;
    background: color-mix(in srgb, #ff3b3b 10%, transparent);
}
.uzenet ul { margin: .5rem 0 0; padding-left: 1.25rem; }

/* --- Táblázat -------------------------------------------------------------- */
.tabla {
    width: 100%;
    border-collapse: collapse;
}
.tabla th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--halvany);
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--vonal);
}
.tabla td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--vonal);
    vertical-align: middle;
}
.tabla tr:hover td { background: var(--panel); }

.tabla__kep { width: 72px; }
.tabla__kep img { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; }
.tabla__nincskep { color: var(--vonal); }

.tabla__cim { font-weight: 600; text-decoration: none; }
.tabla__cim:hover { color: var(--jel); }
.tabla__halk { color: var(--halvany); font-size: .85rem; }

.allapot {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.allapot--piszkozat { color: var(--halvany); }
.allapot--idozitett { color: var(--jel); }

/* --- Űrlap ----------------------------------------------------------------- */
.urlap__racs {
    display: grid;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 1100px) {
    .urlap__racs { grid-template-columns: minmax(0, 1fr) 22rem; }
    /* A beállítások oszlopa görgetéskor a helyén marad: hosszú szövegnél
       a Mentés gomb így mindig kéznél van. */
    .urlap__oldal { position: sticky; top: 6rem; }
}

.mezo { display: block; margin-bottom: 1.25rem; }
.mezo__cimke {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--halvany);
    margin-bottom: .4rem;
}
.mezo__sugo {
    display: block;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--halvany);
    font-size: .78rem;
    margin-top: .15rem;
}

.mezo__be {
    width: 100%;
    background: var(--panel-vilagos);
    border: 1px solid var(--vonal);
    border-radius: 8px;
    color: var(--szoveg);
    font-family: inherit;
    font-size: .95rem;
    padding: .7rem .9rem;
    transition: border-color .2s;
}
.mezo__be:focus { border-color: var(--jel); outline: none; }
.mezo__be--nagy { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.mezo__be--kod {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    font-size: .85rem;
    line-height: 1.6;
    /* Függőlegesen átméretezhető, vízszintesen nem: az utóbbi szétverné
       az elrendezést. */
    resize: vertical;
}

.pipa {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    cursor: pointer;
}
.pipa input { accent-color: var(--jel); width: 1.05rem; height: 1.05rem; }

.doboz {
    background: var(--panel);
    border: 1px solid var(--vonal);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.doboz__cim {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--halvany);
    margin-bottom: 1rem;
}

.urlap__gombok { margin-top: 1rem; }
.urlap__gombok .gomb { width: 100%; justify-content: center; }

.gomb--halk {
    background: transparent;
    border: 1px solid var(--vonal);
    color: var(--szoveg);
}
.gomb--halk:hover { border-color: var(--jel); color: var(--jel); box-shadow: none; }

.gomb--veszely {
    background: transparent;
    border: 1px solid #ff3b3b;
    color: #ff6b6b;
}
.gomb--veszely:hover { background: #ff3b3b; color: #fff; box-shadow: none; }

/* --- Borító és képválasztó -------------------------------------------------- */
.borito img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: .5rem;
}

.kepvalaszto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .4rem;
    margin-top: .75rem;
    max-height: 22rem;
    overflow-y: auto;
}
.kepvalaszto__elem { cursor: pointer; position: relative; display: block; }
.kepvalaszto__elem img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid transparent;
    transition: border-color .15s;
}
/* A rádiógombot elrejtjük, de NEM display:none-nal — az kivenné a
   billentyűzetes sorrendből is. Így fókuszálható marad. */
.kepvalaszto__elem input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.kepvalaszto__elem input:checked + img { border-color: var(--jel); }
.kepvalaszto__elem input:focus-visible + img { outline: 2px solid var(--jel); outline-offset: 2px; }

.kepkereso {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    max-width: 34rem;
}
.kepkereso .mezo { flex: 1; margin-bottom: 0; }

.torles { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--vonal); }

/* --- Belépés --------------------------------------------------------------- */
.belepes {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 1.5rem;
}
.belepes__doboz {
    width: min(24rem, 100%);
    background: var(--panel);
    border: 1px solid var(--vonal);
    border-radius: 16px;
    padding: 2.5rem;
}
.belepes__cim { font-size: 1.3rem; margin-block: 1.25rem 1.75rem; }
.belepes__gomb { width: 100%; justify-content: center; margin-top: 1.25rem; }
.belepes__sugo {
    color: var(--halvany);
    font-size: .78rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vonal);
}
.belepes__sugo code {
    font-family: ui-monospace, Consolas, monospace;
    color: var(--jel-halvany);
}

/* =============================================================================
   18. A cikkek átalakított tartalma
   =============================================================================
   Ezek az elemek a WordPress rövidkódjaiból és beágyazásaiból születnek az
   importáláskor (lásd app/Services/WordPress/ContentConverter.php).
   ========================================================================== */

/* --- Galéria a cikkben ------------------------------------------------------
   203 cikkben a galéria MAGA a tartalom — ez fotós oldal. Ezért kilóg a
   szövegoszlopból: a szöveg 46rem széles, a képek a teljes keretet kapják.

   A `--i` nélkül is működik: itt nincs lépcsőzetes belépés, mert egy
   negyven képes fotóriportnál az már zavaró lenne, nem hatásos. */
.cikk-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: .75rem;
    margin-block: 2.5rem;
    /* Kitörés a szövegoszlopból a teljes keretszélességig. */
    width: var(--keret);
    max-width: 100vw;
    margin-inline: calc(50% - var(--keret) / 2);
}

.cikk-galeria figure { margin: 0; }

.cikk-galeria img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform .5s var(--lendulet), filter .3s;
    filter: saturate(.92);
}
.cikk-galeria img:hover {
    transform: scale(1.03);
    filter: saturate(1.08);
}

.cikk-galeria figcaption {
    font-family: var(--ui-betu);
    font-size: .75rem;
    color: var(--halvany);
    margin-top: .4rem;
}

/* Kétképes galériánál a rács ne feszítse szét a képeket a fél lapon. */
.cikk-galeria[data-db="1"] { grid-template-columns: 1fr; }
.cikk-galeria[data-db="2"] { grid-template-columns: repeat(2, 1fr); }

/* --- Beágyazott videó ------------------------------------------------------
   173 cikkben van videó. A WordPress csupasz címet tárolt, és futásidőben
   csinált belőle lejátszót — mi importáláskor tesszük ugyanezt.

   Az arány a burkolón van, nem az iframe-en: így a hely már a betöltés
   előtt megvan, és nem ugrik a lap. */
.beagyazott {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block: 2.5rem;
    border-radius: var(--sugar);
    overflow: hidden;
    background: var(--panel-vilagos);
}
.beagyazott iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Képaláírásos kép ([caption]) ------------------------------------------ */
.cikk-kep { margin-inline: 0; margin-block: 2rem; }
.cikk-kep img { width: 100%; border-radius: var(--sugar); }
.cikk-kep figcaption {
    font-family: var(--ui-betu);
    font-size: .8rem;
    color: var(--halvany);
    margin-top: .6rem;
    text-align: center;
}

/* --- Külső hivatkozás (Facebook, Instagram, X) ------------------------------
   Ezeket szándékosan nem ágyazzuk be: a beágyazásuk a saját JavaScriptjüket
   és nyomkövetőiket hozná magával minden olvasóra. */
.kulso {
    margin-block: 2rem;
}
.kulso a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ui-betu);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    padding: .7rem 1.2rem;
    border: 1px solid var(--vonal);
    border-radius: 999px;
    transition: border-color .25s, color .25s;
}
.kulso a:hover { border-color: var(--jel); color: var(--jel); }

/* --- Kisebb képernyők ------------------------------------------------------ */
@media (max-width: 900px) {
    .cikk-galeria {
        width: auto;
        margin-inline: 0;
        grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cikk-galeria img:hover { transform: none; }
}

/* --- Címkék a cikk végén ---------------------------------------------------- */
.cimkesor {
    max-width: 46rem;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--vonal);
}
.cimkesor__cim {
    font-family: var(--ui-betu);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--halvany);
    margin-bottom: .9rem;
}
.cimkesor__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.cimkesor__lista a {
    display: inline-block;
    font-family: var(--ui-betu);
    font-size: .8rem;
    text-decoration: none;
    padding: .35rem .85rem;
    border: 1px solid var(--vonal);
    border-radius: 999px;
    transition: border-color .25s, color .25s;
}
.cimkesor__lista a:hover { border-color: var(--jel); color: var(--jel); }

/* =============================================================================
   19. Hírfolyam
   =============================================================================
   Ez a rész hiányzott a lapról, és emiatt látszott az egész fotógalériának.
   A hírportál gerince egy SZÖVEGES lista: dátum, cím, felvezető — a kép
   csak egy kis bélyeg a szélen.
   ========================================================================== */

.folyam {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 1000px) {
    /* A hírfolyam kapja a helyet, az oldalsáv a maradékot. A 22rem nem
       véletlen: ennyi kell egy olvasható videócímhez két sorban. */
    .folyam { grid-template-columns: minmax(0, 1fr) 22rem; }
}

/* --- Egy hírsor ------------------------------------------------------------ */
.hirlista {
    display: flex;
    flex-direction: column;
}

.hirsor {
    border-bottom: 1px solid var(--vonal);
}
.hirsor:first-child { border-top: 1px solid var(--vonal); }

.hirsor__link {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    padding-block: 1.5rem;
    text-decoration: none;
    /* A teljes sor kattintható, nem csak a cím: egy hírlistában az
       olvasó a sorra céloz, nem a betűkre. */
}

.hirsor__link:hover .hirsor__cim { color: var(--jel-halvany); }
.hirsor__link:hover .hirsor__kep img { transform: scale(1.05); }

.hirsor__szoveg { min-width: 0; }

.hirsor__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-family: var(--ui-betu);
    font-size: .78rem;
    color: var(--halvany);
}
.hirsor__pont { opacity: .5; }
.hirsor__rovat { color: var(--jel); font-weight: 600; }

.hirsor__cim {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.2;
    margin: 0 0 .5rem;
    transition: color .25s var(--lendulet);
}

.hirsor__felvezeto {
    margin: 0;
    color: var(--halvany);
    font-size: .95rem;
    line-height: 1.6;
    /* Két sor: a lista ritmusa fontosabb, mint a teljes felvezető. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hirsor__kep {
    flex: 0 0 10rem;
    border-radius: 8px;
    overflow: hidden;
}
.hirsor__kep img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s var(--lendulet);
}

@media (max-width: 620px) {
    /* Kis kijelzőn a bélyegkép elveszi a helyet a címtől. */
    .hirsor__kep { flex-basis: 6rem; }
    .hirsor__felvezeto { display: none; }
}

/* --- A jelleg jelölése ------------------------------------------------------
   Nem díszítés: az olvasó ebből tudja előre, hogy szövegre, fotósorozatra
   vagy videóra kattint. */
.jelleg {
    font-family: var(--ui-betu);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.jelleg--galeria { color: #6fd3ff; }
.jelleg--video   { color: #ffcf3f; }

/* A képre helyezett változat: mindig látszik, elmosott háttérrel, hogy
   bármilyen fotón olvasható maradjon. */
.jelleg--kepen {
    position: absolute;
    right: .75rem;
    top: .75rem;
    background: rgba(10, 10, 12, .6);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, .18);
}

/* --- Videó-oldalsáv -------------------------------------------------------- */
.sav__cim--kicsi { font-size: 1.1rem; margin-bottom: 1.5rem; }

.videolista {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.videoelem {
    text-decoration: none;
    display: block;
}

.videoelem__kep {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .6rem;
}
.videoelem__kep img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s var(--lendulet);
}
.videoelem:hover .videoelem__kep img { transform: scale(1.05); }

/* Lejátszás jel: enélkül a videós bejegyzés semmiben nem különbözne
   egy képtől. */
.videoelem__jel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
    transition: background .3s;
}
.videoelem:hover .videoelem__jel { background: rgba(0, 0, 0, .1); }

.videoelem__cim {
    font-family: var(--cim-betu);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s;
}
.videoelem:hover .videoelem__cim { color: var(--jel-halvany); }

@media (prefers-reduced-motion: reduce) {
    .hirsor__link:hover .hirsor__kep img,
    .videoelem:hover .videoelem__kep img { transform: none; }
}

/* --- Váltó a hírek / sorozatok / videók között ------------------------------ */
.valto {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}
.valto__elem {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ui-betu);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    padding: .5rem 1rem;
    border: 1px solid var(--vonal);
    border-radius: 999px;
    color: var(--halvany);
    transition: border-color .25s, color .25s;
}
.valto__elem:hover { border-color: var(--jel); color: var(--jel); }
.valto__elem--aktiv {
    color: var(--szoveg);
    border-color: var(--jel);
    background: color-mix(in srgb, var(--jel) 12%, transparent);
}
.valto__db { font-size: .72rem; opacity: .7; }

/* =============================================================================
   20. Szerkesztőségi finomítás
   =============================================================================
   Ez a blokk nem új funkciót hoz, hanem a MEGMUNKÁLÁST. Az előző változat
   működött, de sablonnak látszott. Négy dolgon múlt:

     1. rendszerbetű — egy magazin identitása a betűje (megoldva a 0. blokkban)
     2. mindenhol lekerekítés és színes fényudvar — webalkalmazás-jelek
     3. a kiemelőszín mindenre rákerült, így semmit nem emelt ki
     4. minden szöveg ugyanazzal a betűközzel és súllyal ment

   Amit itt látsz, az nagyrészt tipográfia: méretarányok, betűköz, alapvonal,
   szám-alakok. Ez az a réteg, amit nem lehet effektekkel pótolni.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   20.1 Számok
   --------------------------------------------------------------------------
   A dátumok, képszámok és lapszámok TÁBLÁZATOS számalakot kapnak: minden
   számjegy azonos szélességű, tehát a listában egymás alatt a dátumok
   pontosan illeszkednek. Arányos számokkal a hasáb széle recés lesz — ez
   apró, de a szem észreveszi.
   -------------------------------------------------------------------------- */
time,
.kartya__datum,
.hirsor__meta,
.valto__db,
.szalag__db,
.lap__allas,
.cikk__meta {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* -----------------------------------------------------------------------------
   20.2 Fejléc
   --------------------------------------------------------------------------
   A szóvédjegy kisebb, a menü apró kapitálisokkal. Egy hírportál fejléce
   nem hirdetőtábla: az olvasó a tartalomért jött, a fejléc csak eligazít.
   -------------------------------------------------------------------------- */
.fej__belso { padding-block: .9rem; gap: 2.5rem; }

.logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.05em;
}

.menu { gap: 1.75rem; }

.menu__elem {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding-block: .5rem;
}

/* Az aláhúzás a menüpont ALATT, hajszálvékonyan, és balról nő ki — nem a
   közepéből. A középről kinyíló vonal díszes; a balról induló olvasási
   irányt követ. */
.menu__elem::after {
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
}
.menu__elem:hover::after,
.menu__elem--aktiv::after { transform: scaleX(1); }

/* A kereső csak egy hajszálvonal, nem doboz. Ez a legkevesebb felület,
   amivel egy beviteli mező még felismerhető. */
.kereses__mezo {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--vonal-eros);
    border-radius: 0;
    padding: .4rem .1rem;
    width: 8rem;
    font-size: .8rem;
    letter-spacing: .02em;
}
.kereses__mezo:focus {
    width: 13rem;
    border-bottom-color: var(--jel);
}
.kereses__mezo::placeholder { color: var(--halvanyabb); }

/* -----------------------------------------------------------------------------
   20.3 Nyitó
   --------------------------------------------------------------------------
   A cím nagyobb és szorosabb, a felvezető keskenyebb hasábban. A sötétítés
   erősebb alul: a nagy, világos fotókon eddig alig volt olvasható a cím.
   -------------------------------------------------------------------------- */
/* A nyitó magassága a 20. blokk elején van beállítva (74svh / 720px).
   Korábban itt egy 88svh-s felülírás állt — ez volt az egyik oka annak,
   hogy a lap teteje egy majdnem üres, képernyőnyi folt volt. */

.nyito__cim {
    font-size: var(--meret-ora);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .95;
    margin-block: 1.25rem 1.5rem;
    max-width: 18ch;
}

.nyito__felvezeto {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: #cdcac4;
    max-width: 46ch;
    margin-bottom: 2.25rem;
}

/* -----------------------------------------------------------------------------
   20.4 Címkék
   --------------------------------------------------------------------------
   Szögletes, nem pirula. Egy rovatjelölés a nyomtatott lapon is négyszög.
   -------------------------------------------------------------------------- */
.cimke {
    font-size: .68rem;
    letter-spacing: .18em;
    font-weight: 600;
}
.cimke--vilagit {
    border-radius: 0;
    border-color: var(--jel);
    background: transparent;
    padding: .4rem .8rem;
}

.jelleg,
.kartya__rovat,
.cimkesor__lista a,
.valto__elem,
.lap__elem,
.kulso a {
    border-radius: 0;
}

/* -----------------------------------------------------------------------------
   20.5 Kártyák és képek
   --------------------------------------------------------------------------
   A hover finomabb: 6% nagyítás helyett 2,5%. A nagy ugrás játékosnak hat,
   a kicsi élőnek. Ugyanez a különbség egy kattanás és egy csattanás között.
   -------------------------------------------------------------------------- */
.kartya__kepdoboz,
.hirsor__kep,
.videoelem__kep,
.galeria__gomb,
.cikk__borito img,
.cikk-galeria img {
    border-radius: var(--sugar);
}

.kartya__link:hover .kartya__kep { transform: scale(1.025); }
.hirsor__link:hover .hirsor__kep img,
.videoelem:hover .videoelem__kep img,
.galeria__gomb:hover img { transform: scale(1.03); }
.cikk-galeria img:hover { transform: none; opacity: .85; }

.kartya__cim {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.18;
}

.kartya__datum,
.hirsor__meta {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   20.6 Hírfolyam
   -------------------------------------------------------------------------- */
.hirsor__cim {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.hirsor__felvezeto {
    font-family: var(--szoveg-betu);
    font-size: 1rem;
    color: #a5a29c;
}

.hirsor__link { padding-block: 1.75rem; }

/* -----------------------------------------------------------------------------
   20.7 Cikkoldal
   --------------------------------------------------------------------------
   Itt a legfontosabb a szöveg minősége. Nagyobb betű, tágabb sorköz,
   szűkebb hasáb — ez a három együtt teszi olvashatóvá a hosszú anyagot.
   -------------------------------------------------------------------------- */
.cikk__cim { letter-spacing: -.04em; line-height: 1; }

.cikk__felvezeto {
    font-family: var(--szoveg-betu);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    color: #c8c5bf;
    max-width: 40ch;
    margin-inline: auto;
}

.cikk__meta {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vonal);
    max-width: 40ch;
    margin-inline: auto;
}

.cikk__szoveg {
    font-size: 1.2rem;
    line-height: 1.72;
    max-width: 38rem;
}

/* Iniciálé: az első bekezdés első betűje. Ez az egyik legrégebbi
   szerkesztőségi jel — megmondja a szemnek, hol kezdődik a szöveg.
   A `::first-letter` csak akkor él, ha a bekezdés tényleg szöveggel
   kezdődik; képpel induló cikknél magától elmarad. */
.cikk__szoveg > p:first-child::first-letter {
    float: left;
    font-family: var(--cim-betu);
    font-weight: 800;
    font-size: 3.6em;
    line-height: .82;
    margin: .06em .12em 0 0;
    color: var(--szoveg);
}

.cikk__szoveg h2,
.cikk__szoveg h3 {
    margin-block: 2.5rem 1rem;
    letter-spacing: -.02em;
}

.cikk__szoveg blockquote {
    border-left: 0;
    padding-left: 0;
    margin-block: 2.5rem;
    font-family: var(--cim-betu);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -.025em;
    color: var(--szoveg);
    /* A vonal FÖLÖTTE van, nem mellette: így a kiemelt mondat nem
       "beljebb kezdődik", hanem külön blokként áll meg. */
    border-top: 2px solid var(--jel);
    padding-top: 1.5rem;
}

/* -----------------------------------------------------------------------------
   20.8 Rovatfej
   -------------------------------------------------------------------------- */
.rovatfej { border-bottom: 1px solid var(--vonal-eros); }

.rovatfej__cim {
    letter-spacing: -.045em;
    line-height: .95;
    font-weight: 800;
}

.rovatfej__db {
    font-size: .7rem;
    letter-spacing: .2em;
    margin-bottom: .5rem;
}

.rovatfej__leiras {
    font-family: var(--szoveg-betu);
    font-size: 1.05rem;
    color: var(--halvany);
}

/* -----------------------------------------------------------------------------
   20.9 Rovatszalag
   --------------------------------------------------------------------------
   Körvonalas betű tömör helyett: így a szalag háttérré válik, nem
   versenyez a tartalommal. Hoverre töltődik ki.
   -------------------------------------------------------------------------- */
.szalag { background: transparent; border-color: var(--vonal); }

.szalag__elem {
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--vonal-eros);
    transition: color .3s var(--lendulet), -webkit-text-stroke-color .3s;
}
.szalag__elem:hover { color: var(--jel); }

/* A körvonalas írásmód CSAK ott, ahol a böngésző tudja.
   A `color: transparent` a körvonal nélkül LÁTHATATLAN szöveget adna —
   és ez pontosan az a hiba, ami a kártyákat egyszer már eltüntette.
   Támogatás nélkül a szalag tömör, halvány betűvel jelenik meg: nem
   ugyanaz a látvány, de olvasható. */
@supports (-webkit-text-stroke: 1px currentColor) {
    .szalag__elem {
        color: transparent;
        -webkit-text-stroke: 1px var(--vonal-eros);
    }
    .szalag__elem:hover {
        color: var(--jel);
        -webkit-text-stroke-color: var(--jel);
    }
    .szalag__db { -webkit-text-stroke: 0; }
}

.szalag__db { color: var(--halvanyabb); }

/* -----------------------------------------------------------------------------
   20.10 Lábléc
   -------------------------------------------------------------------------- */
.lablec { background: transparent; border-top: 1px solid var(--vonal-eros); }
.lablec__cim { letter-spacing: -.05em; }
.lablec__menu a {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   20.11 Kisebb képernyők
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
    .cikk__szoveg { font-size: 1.1rem; }
    .cikk__szoveg > p:first-child::first-letter { font-size: 3.1em; }
    .fej__belso { gap: 1.25rem; }
    .kereses__mezo { width: 6rem; }
    .kereses__mezo:focus { width: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kartya__link:hover .kartya__kep,
    .hirsor__link:hover .hirsor__kep img,
    .videoelem:hover .videoelem__kep img,
    .galeria__gomb:hover img { transform: none; }
}

/* -----------------------------------------------------------------------------
   20.12 Ikonok
   --------------------------------------------------------------------------
   Beágyazott SVG, körvonalas rajzolással. Egy közös szabály állítja a
   vonalvastagságot: így az ikonok optikai súlya egyezik a betűkével, és
   nem lóg ki az egyik a többi közül.
   -------------------------------------------------------------------------- */
.nagyito__bezar svg,
.nagyito__lep svg,
.videoelem__jel svg {
    width: 1.4em;
    height: 1.4em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A lejátszás-háromszög tömör, a körvonal nem — enélkül a kis méretű
   háromszög belseje "kilyukadna". */
.videoelem__jel svg .tomor { fill: currentColor; stroke: none; }

.videoelem__jel {
    font-size: 1.9rem;
    background: linear-gradient(to top, rgba(0,0,0,.45), transparent 60%);
}
.videoelem__jel svg { filter: drop-shadow(0 1px 6px rgba(0,0,0,.55)); }

/* =============================================================================
   21. Javítás a lerenderelt kép alapján
   =============================================================================
   Az eddigi dizájndöntéseket CSS-ből következtettem ki — a lapot magát nem
   láttam. Amikor végre lerendereltem és megnéztem, hat dolog azonnal
   látszott, amit elméletből nem vettem észre:

     1. a nyitókép NEM JELENT MEG (negatív z-index + isolation együttállása)
     2. a nyitó cím akkora volt, hogy két sorba tört és uralta a képernyőt
     3. hatalmas holt terek a szakaszok között
     4. a hírsorok soványak: apró bélyegkép, sok üresség
     5. a videó-oldalsáv KÉPEI nagyobbak voltak, mint a fő hasáb képei —
        vagyis a mellékszereplő nyomta el a főszereplőt
     6. a "01" sorszám elárvultan lebegett a szakaszcím fölött

   A tanulság nem CSS-technikai: dizájnt nem lehet kód olvasásával
   ellenőrizni. A lapot meg kell nézni.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   21.1 A nyitó cím mérete
   --------------------------------------------------------------------------
   8rem-ről 5rem-re. A korábbi méret 1440 pixel széles képernyőn is két
   sorba törte a címet, és a tördelés a szó közepén esett. A nyitó attól
   erős, hogy a cím EGY levegővétel, nem attól, hogy nagy.
   -------------------------------------------------------------------------- */
:root {
    --meret-ora: clamp(2.4rem, 5.2vw, 4.6rem);
}

.nyito__cim {
    line-height: 1;
    letter-spacing: -.035em;
    max-width: 22ch;
    margin-block: 1rem 1.1rem;
}

.nyito__felvezeto { margin-bottom: 1.75rem; }

/* -----------------------------------------------------------------------------
   21.2 Függőleges ritmus
   --------------------------------------------------------------------------
   A szakaszok közti térköz a felére. A sok levegő nem elegancia, ha nincs
   mi között tartani — üres lapot csinál.
   -------------------------------------------------------------------------- */
.sav { padding-block: clamp(2.5rem, 4vw, 3.75rem); }
.sav__cim { margin-bottom: 1.75rem; }
.lablec { margin-top: 2.5rem; }
.lablec__belso { padding-block: 2.5rem; }
.szalag { padding-block: 1.1rem; }

/* -----------------------------------------------------------------------------
   21.3 Szakaszcím sorszámmal
   --------------------------------------------------------------------------
   A sorszám a címmel EGY sorba kerül, nem fölé lebeg. Így a "01" a cím
   része lesz, ahogy egy nyomtatott lapon is: [01] FRISS HÍREK ————————
   -------------------------------------------------------------------------- */
.sav__cim[data-szam] { margin-top: 0; }

.sav__cim::before {
    position: static;
    font-size: .7rem;
    letter-spacing: .12em;
    padding: .3rem .5rem;
    border: 1px solid var(--jel);
    color: var(--jel);
    align-self: center;
    line-height: 1;
}

/* -----------------------------------------------------------------------------
   21.4 Hírsorok
   --------------------------------------------------------------------------
   Nagyobb bélyegkép (10rem → 14rem), szorosabb sorok. Így a lista sűrű
   lesz, és a kép is elég nagy ahhoz, hogy lássam, mi van rajta.
   -------------------------------------------------------------------------- */
.hirsor__link {
    padding-block: 1.3rem;
    gap: 2rem;
}
.hirsor__kep { flex-basis: 14rem; }
.hirsor__cim { font-size: clamp(1.15rem, 1.7vw, 1.45rem); margin-bottom: .35rem; }
.hirsor__meta { margin-bottom: .4rem; }
.hirsor__felvezeto { font-size: .98rem; line-height: 1.5; }

/* -----------------------------------------------------------------------------
   21.5 Videó-oldalsáv
   --------------------------------------------------------------------------
   Vízszintes sorok, kis bélyegképpel — nem egymás alá tornyozott nagy
   képek. A mellékszereplőnek mellékszereplőnek kell látszania.
   -------------------------------------------------------------------------- */
.folyam__oldal { padding-left: clamp(0px, 2vw, 2rem); border-left: 1px solid var(--vonal); }

@media (max-width: 999px) {
    .folyam__oldal { padding-left: 0; border-left: 0; border-top: 1px solid var(--vonal); padding-top: 2rem; }
}

.videolista { gap: 1rem; }

.videoelem {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}
.videoelem__kep {
    flex: 0 0 7.5rem;
    margin-bottom: 0;
}
.videoelem__jel { font-size: 1.1rem; }
.videoelem__cim { font-size: .85rem; line-height: 1.25; }

/* -----------------------------------------------------------------------------
   21.6 Egyetlen kiemelőszín
   --------------------------------------------------------------------------
   A "VIDEÓ" jelölés sárga volt, a rovatnév narancs — két élénk szín
   egymás mellett, egy sorban. Két kiemelőszín kioltja egymást: egyik sem
   emel ki semmit. A jelleg-címke innentől semleges, a szín marad a
   rovaté.
   -------------------------------------------------------------------------- */
.jelleg {
    color: var(--halvany);
    border-color: var(--vonal-eros);
    font-size: .62rem;
    padding: .18rem .45rem;
}
.jelleg--galeria,
.jelleg--video { color: var(--halvany); }

.hirsor__link:hover .jelleg { color: var(--szoveg); border-color: var(--halvany); }

/* A képre helyezett változat világos marad: sötét fotón a halvány szürke
   olvashatatlan lenne. */
.jelleg--kepen { color: #fff; border-color: rgba(255,255,255,.3); }

/* -----------------------------------------------------------------------------
   21.7 Fejléc
   -------------------------------------------------------------------------- */
.logo { font-size: 1.5rem; }
.logo__mx { color: var(--jel); }

/* A kereső jobbra tapadjon, ne lógjon el a menütől. */
.kereses { margin-left: auto; }

/* -----------------------------------------------------------------------------
   21.8 Két hiba, ami csak a renderelt képen látszott
   -------------------------------------------------------------------------- */

/* a) A sorszám-doboz üresen is kirajzolódott.
      A `::before` a data-szam nélküli szakaszcímeken (pl. "VIDEÓK") egy üres,
      körvonalas négyszöget tett a cím elé. A szabálynak a MEGLÉTHEZ kell
      kötődnie, nem az elemhez. */
.sav__cim::before { content: none; }
.sav__cim[data-szam]::before { content: attr(data-szam); }

/* b) A hírsorok felül igazodtak.
      Ahol nincs felvezető szöveg (43 cikknél nincs), ott a két-három soros
      szövegblokk a 9 rem magas bélyegkép tetejéhez tapadt, és alatta
      tenyérnyi üresség maradt. Középre igazítva a sor akkor is összeáll,
      ha csak cím van benne. */
.hirsor__link { align-items: center; }

/* -----------------------------------------------------------------------------
   21.9 Sűrűbb hírlista, alacsonyabb nyitó
   --------------------------------------------------------------------------
   A második renderelésen látszott: a bélyegkép MAGASABB volt, mint a
   mellette álló szöveg, ezért a sor magasságát a kép szabta meg, és a
   cím körül tenyérnyi üresség maradt. Egy hírlista sorát a SZÖVEGNEK kell
   meghatároznia — a kép csak kíséret.
   -------------------------------------------------------------------------- */
.hirsor__kep { flex-basis: 9.5rem; }
.hirsor__link { padding-block: 1.05rem; gap: 1.5rem; }
.hirsor__cim { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.hirsor__felvezeto { font-size: .92rem; }

/* A nyitó egy hajszállal alacsonyabb: így a hírfolyam első sora már a
   görgetés legelején felsejlik, és a lap nem "egy képpel" kezdődik. */
.nyito { min-height: min(66svh, 620px); }

/* A cikkoldal fejlécében a dátumsor egy sorba férjen. Korábban a 40ch-s
   szélesség két sorba törte, és az "6 PERC OLVASÁS" külön sorba került. */
.cikk__meta { max-width: 60ch; }

/* =============================================================================
   22. Mobil
   =============================================================================
   A telefonos nézetet eddig egyáltalán nem néztem meg — csak feltételeztem,
   hogy a `clamp()` és az `auto-fill` elintézi. Nem intézte el: 420 pixeles
   szélességen a fejléc, a nyitócím és a hírsorok képei mind kilógtak a
   képernyőről, a `body { overflow-x: hidden }` pedig nem görgethetővé tette
   őket, hanem LEVÁGTA.

   A `clamp()` alsó határa nem "mobilbarát méret" — a clamp alja azt jelenti,
   ennél kisebb SOHA nem lesz. Ha az alsó határ 2,4rem, akkor a telefon is
   2,4rem-et kap, akkor is, ha nem fér ki.
   ========================================================================== */

/* A hosszú magyar összetett szavak ("összefoglaló", "bringaverseny") a
   címekben nem férnek ki keskeny képernyőn. Tördelni engedjük őket, mert a
   levágott cím rosszabb, mint az elválasztott. */
.nyito__cim,
.cikk__cim,
.kartya__cim,
.hirsor__cim,
.rovatfej__cim,
.videoelem__cim {
    overflow-wrap: break-word;
}

@media (max-width: 700px) {
    :root {
        /* A nagy méretek alsó határa lejjebb: a telefon a clamp alját kapja. */
        --meret-ora:   clamp(1.75rem, 8vw, 2.6rem);
        --meret-focim: clamp(1.6rem, 7vw, 2.4rem);
        --meret-cim:   1.15rem;
        --keret: calc(100% - 2rem);
    }

    /* A fejléc két sorba tördelődik: fent a védjegy és a kereső, alatta a
       menü. Egy sorba préselve a kereső kitolta a menüt a képernyőről. */
    .fej__belso {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .5rem 1rem;
        align-items: center;
    }
    .logo { grid-column: 1; }
    .kereses { grid-column: 2; justify-self: end; margin-left: 0; }
    .menu {
        grid-column: 1 / -1;
        gap: 1.1rem;
        /* Vízszintesen görgethető, de a görgetősáv nélkül. */
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: .15rem;
    }
    .menu__elem { scroll-snap-align: start; font-size: .68rem; letter-spacing: .1em; }

    .kereses__mezo { width: 6.5rem; }
    .kereses__mezo:focus { width: 8.5rem; }

    /* A hírsor képe kisebb, és a szövegnek engedjük, hogy zsugorodjon.
       A `min-width: 0` nélkül a flex elem a TARTALMA minimális méretét
       tartja, és kitolja a sort a képernyőről — ez a leggyakoribb oka
       annak, hogy egy flex elrendezés mobilon "kilóg". */
    .hirsor__link { gap: 1rem; padding-block: .9rem; }
    .hirsor__szoveg { min-width: 0; flex: 1; }
    .hirsor__kep { flex: 0 0 5.5rem; }

    .nyito { min-height: min(60svh, 460px); }
    .nyito__szoveg { padding-block: 1.5rem; }
    .gomb { padding: .8rem 1.2rem; font-size: .75rem; }

    .folyam { gap: 2rem; }
    .videoelem__kep { flex-basis: 6rem; }

    .cikk__fej { text-align: left; }
    .cikk__meta { justify-content: flex-start; margin-inline: 0; }
    .cikk__felvezeto { margin-inline: 0; max-width: none; }
}

/* -----------------------------------------------------------------------------
   22.1 Iniciálé rövid első bekezdésnél
   --------------------------------------------------------------------------
   A háromsoros iniciálé kilógott a rövid nyitóbekezdésből, és a KÖVETKEZŐ
   bekezdést tolta beljebb — mintha az lenne behúzva. Két sorra vettem
   vissza, és a bekezdés önálló blokk-környezetet kap (`flow-root`), így a
   lebegtetés nem szivárog ki belőle.
   -------------------------------------------------------------------------- */
.cikk__szoveg > p:first-child { display: flow-root; }

.cikk__szoveg > p:first-child::first-letter {
    font-size: 2.7em;
    line-height: .86;
    margin: .04em .1em 0 0;
}

@media (max-width: 700px) {
    .cikk__szoveg > p:first-child::first-letter { font-size: 2.4em; }
}

/* -----------------------------------------------------------------------------
   22.2 Vízszintes túlcsordulás elleni védelem
   --------------------------------------------------------------------------
   A `min-width: 0` az, ami hiányzik a legtöbb "mobilon kilóg" esetnél.
   Alapértelmezésben egy flex- és rácselem NEM zsugorodik a tartalma
   legkisebb mérete alá — egy hosszú szó vagy egy fix szélességű kép
   szétfeszíti a sort, és a szülő már nem tudja visszafogni.

   A `overflow-x: clip` a html-en pedig a végső fék: ha valami mégis
   szélesebb, azt levágja ahelyett, hogy az egész lapot oldalra
   tolhatóvá tenné. A `clip` és nem `hidden`: a `hidden` görgethető
   dobozt csinál, a `clip` nem.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }

.folyam,
.folyam__fo,
.folyam__oldal,
.hirlista,
.hirsor,
.hirsor__link,
.hirsor__szoveg,
.videoelem,
.videoelem__cim,
.menu,
.mozaik,
.racs { min-width: 0; }

/* A keret sosem lehet szélesebb a rendelkezésre álló helynél. */
.fej__belso,
.sav,
.rovatfej,
.cikk,
.nyito__szoveg,
.lablec__belso { max-width: 100%; }


/* =============================================================================
   23. Cikkoldal — újratervezés
   =============================================================================
   Amit a lerenderelt éles oldalon láttam, és amit ez a blokk javít:

     1. a szöveg egy keskeny oszlop volt egy hatalmas ÜRES felület közepén
     2. a galéria bejelentés nélkül állt egy szövegfal alatt — nem látszott
        galériának, csak egymás mellé rakott képeknek
     3. a szövegtörzs képei nyers <img>-ként ültek, eredeti méretükben,
        balra igazítva, keret és felirat nélkül
     4. sehol egy ikon: a dátum, az olvasási idő és a szerző egy szürke
        szövegsorban futott össze
   ========================================================================== */

/* -----------------------------------------------------------------------------
   23.1 Ikonok
   --------------------------------------------------------------------------
   Egy közös szabály, hogy minden ikon optikai súlya egyezzen a betűkével.
   A `currentColor` miatt az ikon magától követi a környezete színét — a
   hover-állapotot sem kell külön kezelni.
   -------------------------------------------------------------------------- */
.ikon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.125em;
}

/* -----------------------------------------------------------------------------
   23.2 A cikk két hasábja
   --------------------------------------------------------------------------
   Bal oldalt ragadós adatsáv, jobbra a szöveg. Az adatsáv nem díszítés: a
   dátum, az olvasási idő, a szerző és a címkék eddig is ott voltak, csak
   egy sorba préselve. Így kapnak helyet, és a lap két oldala egyensúlyba
   kerül — ettől szűnik meg az "üres pusztaság" érzés.
   -------------------------------------------------------------------------- */
.cikk__torzs {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 1000px) {
    .cikk__torzs {
        grid-template-columns: 15rem minmax(0, 1fr);
        align-items: start;
    }
    .cikk__sav {
        position: sticky;
        top: 6rem;
        /* A jobb szélén hajszálvonal: ez választja el a szövegtől, nem egy
           háttérszín. A szerkesztőségi felület vonalakból épül. */
        border-right: 1px solid var(--vonal);
        padding-right: 2rem;
    }
}

/* A szöveg innentől nem középre igazított oszlop, hanem a saját hasábjában
   balra zárt — így a bal oldali sáv és a szöveg egy vonalban indul. */
.cikk__torzs .cikk__szoveg { margin-inline: 0; max-width: 42rem; }

/* --- Adatsor --- */
.adatsor { margin: 0; display: grid; gap: 1.1rem; }
.adatsor__elem { display: grid; gap: .15rem; }

.adatsor dt {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ui-betu);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--halvanyabb);
}
.adatsor dd {
    margin: 0;
    font-family: var(--ui-betu);
    font-size: .92rem;
    color: var(--szoveg);
}
.adatsor dd a { color: var(--jel); text-decoration: none; font-weight: 600; }
.adatsor dd a:hover { text-decoration: underline; }

.cikk__sav-cimkek {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vonal);
}
.cikk__sav-cim {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ui-betu);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--halvanyabb);
    margin: 0 0 .8rem;
}

/* A cikk végi címkesor feleslegessé vált: a sávban van. */
.cikk .cimkesor { display: none; }

/* -----------------------------------------------------------------------------
   23.3 Galéria — bejelentve
   --------------------------------------------------------------------------
   Eddig a rövidkódból egy néma képrács lett. Most kap fejlécet, és a
   képszám a `data-db` attribútumból jön — tehát a CSS-t nem kell bővíteni,
   és nem kell újraimportálni sem.
   -------------------------------------------------------------------------- */
.cikk-galeria {
    /* A rács a szövegoszlopnál szélesebb: a fotó a tartalom, nem illusztráció. */
    width: min(76rem, 92vw);
    margin-inline: calc(50% - min(38rem, 46vw));
    margin-block: 3.5rem;
    position: relative;
    padding-top: 3rem;
}

.cikk-galeria::before {
    content: attr(data-db) " kép a galériában";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--vonal-eros);
    font-family: var(--ui-betu);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--jel);
}

/* Az első kép nagyobb: egy sorozatnak van nyitóképe. */
@media (min-width: 800px) {
    .cikk-galeria { grid-template-columns: repeat(4, 1fr); }
    .cikk-galeria figure:first-child { grid-column: span 2; grid-row: span 2; }
    .cikk-galeria figure:first-child img { aspect-ratio: 1; }
}

.cikk-galeria figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--sugar);
    background: var(--panel);
}

.cikk-galeria img {
    display: block;
    transition: transform .6s var(--lendulet), opacity .3s;
}

/* Nagyító jel a képen: ettől derül ki, hogy kattintható. Eddig semmi nem
   jelezte, hogy a kép megnyitható. */
.cikk-galeria figure::after {
    content: "";
    position: absolute;
    inset: auto .6rem .6rem auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(10, 10, 12, .65) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 1.05rem no-repeat;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(.4rem);
    transition: opacity .3s var(--lendulet), transform .3s var(--lendulet);
    pointer-events: none;
}
.cikk-galeria figure:hover::after { opacity: 1; transform: none; }
.cikk-galeria figure:hover img { transform: scale(1.04); }

@media (hover: none) {
    .cikk-galeria figure::after { opacity: .85; transform: none; }
}

/* -----------------------------------------------------------------------------
   23.4 A szövegtörzs képei
   --------------------------------------------------------------------------
   Eddig nyers <img> volt: eredeti méretben, balra igazítva, keret nélkül —
   "csak odarakva". Most kitölti a mértéket, saját dobozt kap, és jelzi,
   hogy nagyítható.
   -------------------------------------------------------------------------- */
.cikk__szoveg > img,
.cikk__szoveg > p > img,
.cikk__szoveg > figure > img {
    width: 100%;
    height: auto;
    border-radius: var(--sugar);
}

.cikk__szoveg > p:has(> img:only-child) {
    margin-block: 2.5rem;
}

.cikk__szoveg img {
    transition: transform .5s var(--lendulet), filter .3s;
}
.cikk__szoveg img:hover { filter: brightness(1.06); }

/* -----------------------------------------------------------------------------
   23.5 Szövegtipográfia
   -------------------------------------------------------------------------- */
.cikk__felvezeto {
    margin-inline: 0;
    max-width: 42rem;
    text-align: left;
}

.cikk__fej { text-align: left; max-width: 58rem; margin-inline: 0; }

/* A bekezdések közti térköz nagyobb, a sorköz tágabb: hosszú anyagnál ez
   dönti el, hogy az olvasó végigmegy-e rajta. */
.cikk__szoveg p { margin-block: 1.6rem; }

.cikk__szoveg a {
    color: var(--szoveg);
    text-decoration-color: var(--jel);
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
    transition: color .2s;
}
.cikk__szoveg a:hover { color: var(--jel); }

/* -----------------------------------------------------------------------------
   23.6 Mozgás: a képek felúsznak görgetéskor
   --------------------------------------------------------------------------
   Csak ott, ahol a hibás működés nem tüntet el semmit: a `js-mozgas`
   osztályt a JavaScript teszi fel, és le is tudja venni.
   -------------------------------------------------------------------------- */
.js-mozgas .cikk-galeria figure,
.js-mozgas .cikk__szoveg > p:has(> img) {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s var(--lendulet), transform .6s var(--lendulet);
}
.js-mozgas .cikk-galeria figure.lathato,
.js-mozgas .cikk__szoveg > p.lathato { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-mozgas .cikk-galeria figure,
    .js-mozgas .cikk__szoveg > p:has(> img) { opacity: 1; transform: none; }
    .cikk-galeria figure:hover img { transform: none; }
}

/* -----------------------------------------------------------------------------
   23.7 Kisebb képernyők
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
    .cikk__sav {
        border-bottom: 1px solid var(--vonal);
        padding-bottom: 1.5rem;
    }
    .adatsor {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        gap: 1rem 1.5rem;
    }
    .cikk-galeria {
        width: auto;
        margin-inline: 0;
        grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr));
    }
    .cikk-galeria figure:first-child { grid-column: auto; grid-row: auto; }
}

/* -----------------------------------------------------------------------------
   23.8 A cikk hasábjainak vízszintes középre igazítása
   --------------------------------------------------------------------------
   Az első változatban a rács a keret bal széléhez tapadt (15rem sáv +
   42rem szöveg egy 76rem-es keretben), és jobb oldalt 19rem üresen maradt.
   A `justify-content: center` a KÉT HASÁBOT EGYÜTT igazítja középre —
   nem külön-külön, ami szétcsúsztatná őket.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
    .cikk__torzs {
        grid-template-columns: 15rem minmax(0, 42rem);
        justify-content: center;
    }
}

/* A cím és a felvezető ugyanarra a szélességre igazodik, mint a rács
   (15rem + 4rem hézag + 42rem = 61rem), így egy vonalban indulnak. */
.cikk__fej {
    max-width: 61rem;
    margin-inline: auto;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   23.9 A galéria rácsa: egységes arányok, tömör kitöltés
   --------------------------------------------------------------------------
   A lerenderelt lapon látszott, hogy a képek eredeti aránya különbözik
   (álló és fekvő vegyesen), ezért a sorok nem futottak egy vonalban, és a
   rács jobb alsó sarkában lyuk maradt.

   Két szabály oldja meg:
     - minden kép AZONOS arányra vágva (a nyitókép négyzetes, a többi 3:2)
     - `grid-auto-flow: dense`: a kisebb elemek visszacsúsznak a keletkező
       résekbe, ahelyett hogy sorban haladnának tovább
   -------------------------------------------------------------------------- */
.cikk-galeria {
    grid-auto-flow: dense;
    gap: .6rem;
}

.cikk-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

@media (min-width: 800px) {
    .cikk-galeria figure:first-child img { aspect-ratio: 1; }
}

/* Egy-két képnél a nagy nyitókép értelmetlen lenne. */
.cikk-galeria[data-db="1"] figure:first-child,
.cikk-galeria[data-db="2"] figure:first-child,
.cikk-galeria[data-db="3"] figure:first-child { grid-column: auto; grid-row: auto; }
.cikk-galeria[data-db="1"] figure:first-child img,
.cikk-galeria[data-db="2"] figure:first-child img,
.cikk-galeria[data-db="3"] figure:first-child img { aspect-ratio: 3 / 2; }

/* -----------------------------------------------------------------------------
   23.10 A galéria: egyenrangú rács
   --------------------------------------------------------------------------
   A 2x2-es nyitókép jól nézett ki papíron, de a lerenderelt lapon lyukat
   hagyott: hét kép egy négyoszlopos rácsban, ahol az első négy cellát
   foglal, nem jön ki egészre — a jobb alsó sarok üresen maradt.

   Egy tetszőleges darabszámú galériánál a rács kitöltése csak akkor
   garantált, ha minden elem egyforma. A galéria identitását nem a
   mozaik adja, hanem a fejléc, a képszám és a nagyító jel.

   (A mozaik akkor jönne vissza, ha a darabszámhoz igazítanánk a
   nyitókép méretét — az viszont a szerverre tartozó logika lenne, nem
   CSS-re, és nem ér annyit.)
   -------------------------------------------------------------------------- */
@media (min-width: 800px) {
    .cikk-galeria {
        grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    }
    .cikk-galeria figure:first-child {
        grid-column: auto;
        grid-row: auto;
    }
    .cikk-galeria figure:first-child img { aspect-ratio: 3 / 2; }
}

/* -----------------------------------------------------------------------------
   23.11 A szövegbe ágyazott képek kitörnek a hasábból
   --------------------------------------------------------------------------
   Egy fotómagazinban a kép nem illusztrálja a szöveget, hanem a tartalom
   része. Eddig a 42rem-es szövegoszlopba volt beszorítva; most szélesebb,
   mint a szöveg, de nem teljes szélességű — így látszik, hogy a cikkhez
   tartozik, nem egy külön sáv.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
    .cikk__szoveg > p:has(> img:only-child),
    .cikk__szoveg > figure {
        width: 52rem;
        max-width: none;
        margin-inline: -5rem;
    }
}

.cikk__szoveg > p:has(> img:only-child) img,
.cikk__szoveg > figure img {
    width: 100%;
    height: auto;
    border-radius: var(--sugar);
}

/* A kép alatti dőlt idézet (a régi oldalon így jelölték a nyilatkozatokat)
   kapjon rendes kiemelést, ne csak dőlt szöveg legyen. */
.cikk__szoveg p > em:only-child,
.cikk__szoveg p > i:only-child {
    display: block;
    font-style: normal;
    font-family: var(--cim-betu);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--szoveg);
    border-left: 2px solid var(--jel);
    padding-left: 1.25rem;
}

/* =============================================================================
   24. Címlap — újratervezés
   =============================================================================
   Amit a lerenderelt éles címlapon láttam:

     1. tizennégy TELJESEN EGYFORMA hírsor egymás alatt — nincs ritmus,
        semmi nem tűnt fontosabbnak a másiknál
     2. a jobb oldal a lista feléig üresen állt: négyelemű videósáv egy
        tizennégy soros lista mellett
     3. a futó rovatszalag körvonalas betűkkel alig látszott — dísznek
        szánt megoldás volt, de zajnak hatott
     4. a rövid című soroknál tenyérnyi üres tér maradt a cím és a kép közt
   ========================================================================== */

/* -----------------------------------------------------------------------------
   24.1 Kiemelt hármas
   --------------------------------------------------------------------------
   A vezető cikk után három nagy képes kártya. Ez adja a lap ritmusát: az
   olvasó látja, mi a nap három anyaga, mielőtt a folyó listába kerülne.
   -------------------------------------------------------------------------- */
.sav--kiemelt {
    padding-top: clamp(2rem, 3.5vw, 3rem);
    padding-bottom: 0;
}

.sav--kiemelt .kartya__cim { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }

/* -----------------------------------------------------------------------------
   24.2 Hírsorok: kevesebb üres tér
   --------------------------------------------------------------------------
   A szöveg kapja a helyet, a kép fix szélességű. Eddig a `space-between`
   a két végébe lökte őket, és rövid címnél a sor közepe kiürült.
   -------------------------------------------------------------------------- */
.hirsor__link { justify-content: flex-start; gap: 1.25rem; }
.hirsor__szoveg { flex: 1; min-width: 0; }
.hirsor__kep { flex: 0 0 8.5rem; order: 2; }

/* Sorszám a hírfolyamban: a lista ettől lesz lista, nem halom.
   A `counter` a CSS-é, nem kell hozzá a szerverről semmit átadni. */
.hirlista { counter-reset: hir; }
.hirsor { counter-increment: hir; }

.hirsor__link::before {
    content: counter(hir, decimal-leading-zero);
    flex: 0 0 auto;
    align-self: flex-start;
    font-family: var(--ui-betu);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--halvanyabb);
    padding-top: .35rem;
    min-width: 1.6rem;
}
.hirsor__link:hover::before { color: var(--jel); }

.folyam__tovabb { margin-top: 2rem; }

/* -----------------------------------------------------------------------------
   24.3 Oldalsáv: dobozok, amik kitöltik a hasábot
   -------------------------------------------------------------------------- */
.oldaldoboz + .oldaldoboz {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vonal);
}

.oldaldoboz__cim {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ui-betu);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--halvany);
    margin-bottom: 1.25rem;
}
.oldaldoboz__cim .ikon { color: var(--jel); }

.rovatlista { list-style: none; margin: 0; padding: 0; }
.rovatlista li + li { border-top: 1px solid var(--vonal); }

.rovatlista a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    text-decoration: none;
    font-family: var(--ui-betu);
    font-size: .92rem;
    font-weight: 600;
    transition: color .2s;
}
.rovatlista a:hover { color: var(--jel); }
.rovatlista__db {
    font-size: .75rem;
    font-weight: 500;
    color: var(--halvanyabb);
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   24.4 Rovatkártyák
   --------------------------------------------------------------------------
   A futó szalag helyett. Egy kép többet mond a rovatról, mint a neve:
   a "Háttérkép" rovatnál rögtön látszik, mire számíthat az olvasó.
   -------------------------------------------------------------------------- */
.rovatracs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: .75rem;
}

.rovatkartya {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sugar);
    background: var(--panel-vilagos);
    text-decoration: none;
}

.rovatkartya img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Alapból visszafogott, hoverre kinyílik: a kártya háttér, nem főszereplő. */
    filter: grayscale(.55) brightness(.65);
    transition: transform .6s var(--lendulet), filter .4s;
}
.rovatkartya:hover img {
    transform: scale(1.05);
    filter: grayscale(0) brightness(.8);
}

.rovatkartya__szoveg {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem;
    display: grid;
    gap: .15rem;
    background: linear-gradient(to top, rgba(8,8,10,.9), transparent);
}
.rovatkartya__nev {
    font-family: var(--cim-betu);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}
.rovatkartya__db {
    font-family: var(--ui-betu);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--halvany);
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   24.5 Kisebb képernyők
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .hirsor__kep { flex-basis: 5.5rem; }
    .hirsor__link::before { display: none; }
    .rovatracs { grid-template-columns: repeat(2, 1fr); }
}

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

/* -----------------------------------------------------------------------------
   25. Szerkesztő: képfeltöltő gombok
   -------------------------------------------------------------------------- */
.kepbeszuro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: .6rem 0;
}

.kepbeszuro__gomb {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ui-betu);
    font-size: .78rem;
    font-weight: 600;
    padding: .5rem .9rem;
    border: 1px solid var(--vonal-eros);
    border-radius: var(--sugar);
    cursor: pointer;
    color: var(--szoveg);
    transition: border-color .2s, color .2s;
}
.kepbeszuro__gomb:hover { border-color: var(--jel); color: var(--jel); }
.kepbeszuro__gomb .ikon { width: 1.05em; height: 1.05em; }

.kepbeszuro__gomb:has(input:disabled) { opacity: .5; pointer-events: none; }

.kepbeszuro__allapot {
    font-family: var(--ui-betu);
    font-size: .78rem;
    color: var(--halvany);
}
.kepbeszuro__allapot--hiba { color: #ff6b6b; }

/* =============================================================================
   26. Modern galéria — igazított sorok (justified layout)
   =============================================================================
   A korabbi egyenrangu racs (minden kep azonos meretben) rendezett volt, de
   ujsagszeru. A modern fotos oldalak - Flickr, Google Fotok, Unsplash -
   IGAZITOTT sorokat hasznalnak: minden kep az EREDETI aranya szerint kap
   szelesseget, es a sorok pontosan kitoltenek. Ettol lesz "fotogaleria"
   erzese, nem "kep-tablazate".

   A technika tiszta CSS, JavaScript nelkul: flexbox, ahol minden elem
   novekedese (flex-grow) es alapszelessege a kep aranyaval (--r) aranyos.
   A sormagassag fix, a szelesseg igazodik - egy adott soron belul minden
   kep ugyanolyan magas, es egyutt kitoltik a szelesseget.
   ========================================================================== */
.cikk-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    /* A grid-orokseg (18/23.9/23.10 szakasz) itt mar nem szamit: flex a
       megjelenites-tipus, a grid-* tulajdonsagokat a bongeszo figyelmen
       kivul hagyja. */
}

.cikk-galeria figure {
    --r: 1.5;
    --sor: 17rem;              /* cel-sormagassag asztali gepen */
    margin: 0;
    height: var(--sor);
    flex-grow: var(--r);
    flex-basis: calc(var(--r) * var(--sor));
    position: relative;
    overflow: hidden;
    border-radius: var(--sugar);
    background: var(--panel);
}

.cikk-galeria img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .6s var(--lendulet), filter .4s;
    filter: saturate(.94);
}
.cikk-galeria figure:hover img { transform: scale(1.06); filter: saturate(1.08); }

/* A nagyito jel (::after) a 23.3 szakaszbol orokli a stilust, csak a
   pozicionalast biztositjuk ujra a flex-elemen. */
.cikk-galeria figure::after { z-index: 1; }

@media (max-width: 900px)  { .cikk-galeria figure { --sor: 12rem; } }
@media (max-width: 560px)  { .cikk-galeria figure { --sor: 9rem;  } }

/* Egy-ket kepnel az igazitas ertelmetlen: alljanak sima, teljes szeles
   kepkent, ne nyuljanak torz aranyra. */
.cikk-galeria[data-db="1"] figure,
.cikk-galeria[data-db="2"] figure {
    height: auto;
    flex-basis: calc(50% - .25rem);
}
.cikk-galeria[data-db="1"] figure { flex-basis: 100%; }
.cikk-galeria[data-db="1"] figure img,
.cikk-galeria[data-db="2"] figure img { height: auto; aspect-ratio: var(--r); }

@media (prefers-reduced-motion: reduce) {
    .cikk-galeria figure:hover img { transform: none; }
}