/* ============================================================
   HomeFlix -- arculat es UI rendszer
   Minden onhordozo: rendszer-fontok, CSS-bol rajzolt boritok,
   nulla kulso keres.
   ============================================================ */

/* ---------- 1. TOKENEK ---------- */
:root {
  /* Alap: ejkek, nem fekete. A mufaj sotet, de a HomeFlix nem a Netflix
     fekete-piros parosat masolja: a hatter hideg kek-tinta, az egyetlen
     hangsulyszin meleg arany. */
  --bg:          #080B12;
  --surface-1:   #10151F;
  --surface-2:   #18202E;
  --surface-3:   #222C3E;
  --line:        #2C3648;
  --line-soft:   #1E2735;

  --text:        #F2F5FA;
  --text-dim:    #B6C0D0;
  --text-faint:  #8A93A3;

  /* Idoskala: EGYETLEN szinmenet (arany). Az ido sorrendi adat,
     ezert nem hue-val, hanem vilagossaggal es kitoltessel kodoljuk. */
  --now:         #FFC14D;
  --now-soft:    #E8B45C;
  --now-mute:    #B08A43;
  --now-tint:    rgba(255, 193, 77, .12);
  --now-line:    rgba(255, 193, 77, .38);

  /* Mar elerheto: zold-turkiz. Ez az egyetlen masodik allapotszin. */
  --live:        #4FD8A8;
  --live-tint:   rgba(79, 216, 168, .12);

  --danger:      #FF8B8B;

  --pad:         16px;
  --r-sm:        8px;
  --r-md:        14px;
  --r-lg:        22px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  /* A datumok es a visszaszamlalas MONOSPACE, tabularis szamokkal:
     ez a menetrend-tabla utalas, ez valasztja el a terméket a streamingtol. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --tabbar: 0px;
}

@media (min-width: 700px)  { :root { --pad: 28px; } }
@media (min-width: 1100px) { :root { --pad: 44px; } }

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--tabbar);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 750; letter-spacing: -.015em; }
p { margin: 0 0 .8em; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--now);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--now); color: #10151F; font-weight: 700;
  padding: 10px 16px; border-radius: var(--r-sm); transition: top .15s;
}
.skip:focus { top: 8px; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 3. LOGO ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo__mark { width: 28px; height: 28px; color: var(--now); flex: none; }
.logo__word {
  font-size: 20px; letter-spacing: -.035em; font-weight: 800;
  color: var(--text); white-space: nowrap;
}
.logo__word i { font-style: normal; font-weight: 450; color: var(--text-dim); }
/* A SZOMARK MOSTANTOL A CONFIGBOL JON, TEHAT A HOSSZA VALTOZO.
   Megmerve: a "StreamRadar" harom karakterrel hosszabb, mint a "HomeFlix"
   volt, es ettol egy VALODI 390 pixeles nezetablakban (iframe-mel merve, mert
   a headless Chrome nem megy 500 ala) a fejlec 394 pixel szeles lett: a
   fiok-gomb 4 pixellel kilogott, tehat MINDEN lap gorgetett vizszintesen.
   Nem a lap tortent el, hanem a nev lett hosszabb.

   A logo, a datum es a fiok-gomb flex:none, tehat nem zsugorodnak; a menu es
   a kereso itt mar rejtve van. Ezert a szomark betumerete csokken 430 alatt.
   440 pixelnyi tartalek a leghosszabb nevnek is eleg, es ez a keskeny savban
   ugyis a legkevesbe feltuno valtozas. */
@media (max-width: 429px) {
  .logo__word { font-size: 17px; }
  .logo { gap: 7px; }
  .logo__mark { width: 25px; height: 25px; }
}

/* ---------- 4. FEJLEC ---------- */
.top {
  position: sticky; top: 0; z-index: 90;
  background: rgba(8, 11, 18, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.top__in {
  display: flex; align-items: center; gap: 18px;
  padding: 12px var(--pad); max-width: 1520px; margin: 0 auto;
}
.top__nav { display: none; gap: 4px; margin-left: 6px; }
.top__nav a {
  padding: 7px 13px; border-radius: 999px; font-size: 14.5px;
  font-weight: 600; color: var(--text-dim);
}
.top__nav a:hover { color: var(--text); background: var(--surface-2); }
.top__nav a[aria-current="page"] { color: var(--bg); background: var(--now); }
.top__sp { margin-left: auto; }
.top__search {
  display: none; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; min-width: 210px;
}
.top__search input {
  background: none; border: 0; color: var(--text); font: inherit;
  font-size: 14px; width: 100%; outline: none;
}
/* a mezo sajat fokuszgyuruje ki van kapcsolva, ezert a keret veszi at:
   a fokusz kulonben lathatatlan lenne a keresodobozon */
.top__search:focus-within {
  outline: 3px solid var(--now); outline-offset: 3px;
  border-color: var(--now-line);
}
.top__search input::placeholder { color: var(--text-faint); }
.top__today {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--now); border: 1px solid var(--now-line);
  background: var(--now-tint); padding: 6px 12px; border-radius: 999px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.top__today b { color: var(--text); font-weight: 700; }

@media (min-width: 860px) {
  .top__nav { display: flex; }
}
/* A fejlec keresodoboza csak 1180 felett jelenik meg. 860 es 1180 kozott a
   helyet a FO MENU kapja: a kereso ugyanaz, mint a bongeszes lap sajat
   keresoje, a menupont viszont sehol maskor nem erheto el ilyen kozvetlenul.
   860 alatt eddig sem latszott. */
@media (min-width: 1180px) {
  .top__search { display: flex; }
}

/* A FEJLEC NEM FESZITHETI SZET A LAPOT.
   Megmerve a hetedik korben, a regresszio-merolap uj, 900 pixeles oszlopaval:
   900 pixeles nezetablakban a fejlec 1351 pixel szeles volt, tehat MINDEN lap
   451 pixelt gorgetett vizszintesen. A kontroll ugyanez a meres a kor eleji
   allapoton (5c59d67): 1245 pixel, 345 pixel tulnyulas -- vagyis a hiba nem a
   hetedik korben keletkezett, csak addig senki nem mert 860 es 1440 kozott.
   A fo menu 860 felett jelenik meg, tehat a tores savja 860-tol addig tartott,
   amig a fejlec el nem fert: a 1280 pixeles laptop-szelesseg is benne van.
   A hetedik kor hetedik menupontja (Kedvencek) 106 pixellel rontott rajta.

   A megoldas: a fejlec fix szelessegu elemei (logo, datum, fiok) nem
   zsugorodnak, a MENU es a kereso viszont igen, es a menu a sajat savjaban
   gorget. Ugyanaz a minta, mint a bongeszes szurosavjan (.filters).
   A min-width:0 nelkul ez nem mukodik: a flex-elem alapertelmezett minimuma a
   TARTALMA, tehat az overflow-x sosem jutna szohoz -- ugyanaz a csapda, ami az
   otodik korben a szint-tablazatot szetfeszitette. */
.logo, .top__today, .acct { flex: none; }
.top__nav {
  min-width: 0; flex: 0 1 auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.top__nav::-webkit-scrollbar { display: none; }
.top__nav a { flex: none; white-space: nowrap; }
.top__search { min-width: 0; flex: 0 1 210px; }
.top__search input { min-width: 0; }
/* Ahol a menu tenylegesen gorgethet, jelezzuk is: a jobb szel elhalvanyodik,
   kulonben nem latszik, hogy van meg menupont. A hatar 1440: megmerve ott fer
   ki mind a het menupont a keresovel, a datummal es a fiokkal egyutt, es
   feljebb a maszk mar csak feleslegesen halvanyitana. 1280-on meg NEM fer ki
   (az utolso menupont levagodik), ezert tart idaig. */
@media (min-width: 860px) and (max-width: 1439px) {
  .top__nav { mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
}

/* ---------- 5. ALSO SAV (mobil) ----------
   A savmenu tetelszama MOSTANTOL A SZINTTOL FUGG (2. es 8. pont): vendeg negy
   tetelt kap (Kezdolap, Bongeszes, Csomagok, Belepes), belepve otot. A
   `repeat(5, 1fr)` ezert rossz lett volna: a vendegnek egy URES otodik oszlopot
   hagyott volna a jobb szelen. A grid-auto-flow annyi oszlopot csinal,
   amennyi tetel van. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: rgba(12, 16, 24, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-soft);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 10px; font-size: 10.5px; font-weight: 650;
  color: var(--text-faint); letter-spacing: .01em;
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a[aria-current="page"] { color: var(--now); }
@media (min-width: 860px) { .tabbar { display: none; } body { --tabbar: 0px; } }
@media (max-width: 859px) { body { --tabbar: 66px; } }

/* A ragados fejlec ala ne csusszon be a fokuszalt vagy horgonyzott elem. */
#main, .card, .row, .ptile, .cal__e, .tl__day, .sec { scroll-margin-top: 84px; }

/* ---------- 6. ELRENDEZES ---------- */
.wrap { max-width: 1520px; margin: 0 auto; padding-inline: var(--pad); }
.sec { margin-top: 40px; }
.sec__head {
  display: flex; align-items: flex-end; gap: 14px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.sec__head h2 { font-size: clamp(19px, 2.6vw, 25px); }
.sec__head p { margin: 0; color: var(--text-faint); font-size: 14px; flex: 1 1 200px; }
@media (max-width: 700px) { .sec__head p { flex: 1 1 100%; order: 3; } }
.sec__more { font-size: 14px; font-weight: 650; color: var(--now); white-space: nowrap; }
.sec__more:hover { text-decoration: underline; }

.page-head { padding-top: 26px; }
.page-head h1 { font-size: clamp(26px, 5vw, 42px); }
.page-head .lead { color: var(--text-dim); max-width: 62ch; margin-top: 10px; font-size: 15.5px; }

/* ---------- 7. IDOBELYEG (a termek lelke) ----------
   Sorrendi adat -> egyetlen szinmenet, csokkeno hangerovel:
   MA = tomor kitoltes, HOLNAP = tint + vastag vonal, ... KESOBB = halk. */
.stamp {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: .055em; text-transform: uppercase;
  padding: 6px 10px; border-left: 3px solid transparent;
  background: var(--surface-1); color: var(--text-faint);
  white-space: nowrap; overflow: hidden;
}
.stamp__d { font-weight: 700; color: var(--text-dim); }
.stamp__c { margin-left: auto; font-size: 11px; letter-spacing: .03em; }

[data-state="now"]   .stamp { background: var(--now); color: #2A1C02; border-left-color: var(--now); }
[data-state="now"]   .stamp__d { color: #2A1C02; }
[data-state="now"]   .stamp__c { color: #4A3206; font-weight: 700; }

[data-state="tomorrow"] .stamp { background: var(--now-tint); border-left-color: var(--now); color: var(--now); }
[data-state="tomorrow"] .stamp__d { color: var(--now); }

[data-state="soon"]  .stamp { background: var(--surface-1); border-left-color: var(--now-soft); color: var(--now-soft); }
[data-state="soon"]  .stamp__d { color: var(--now-soft); }

[data-state="week"]  .stamp { border-left-color: var(--now-mute); color: var(--text-dim); }
[data-state="week"]  .stamp__d { color: var(--text-dim); }

[data-state="later"] .stamp { border-left-color: var(--line); color: var(--text-faint); }

[data-state="live"]  .stamp { background: var(--live-tint); border-left-color: var(--live); color: var(--live); }
[data-state="live"]  .stamp__d { color: var(--live); }

/* ---------- 8. PLATFORM CHIP ---------- */
.pchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 4px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; line-height: 1.5;
  color: hsl(var(--ph) var(--ps) 80%);
  background: hsl(var(--ph) var(--ps) 50% / .13);
  border: 1px solid hsl(var(--ph) var(--ps) 62% / .40);
  white-space: nowrap;
}
.pchip__m {
  font-family: var(--mono); font-weight: 800; font-size: 11px;
  letter-spacing: .02em;
  background: hsl(var(--ph) var(--ps) 66%); color: #0B0F16;
  border-radius: 999px; padding: 2px 6px; min-width: 26px; text-align: center;
}
.pchip--lg { font-size: 15px; padding: 5px 14px 5px 5px; }
.pchip--lg .pchip__m { font-size: 13px; padding: 4px 8px; min-width: 32px; }

/* ---------- 9. NYELVI JELZES ---------- */
.lang {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-dim); background: var(--surface-1); white-space: nowrap;
}
.lang::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.lang--szinkron { color: #86E3B8; border-color: rgba(79, 216, 168, .38); background: rgba(79, 216, 168, .10); }
.lang--magyar   { color: #86E3B8; border-color: rgba(79, 216, 168, .38); background: rgba(79, 216, 168, .10); }
.lang--felirat  { color: #BFD2EC; border-color: rgba(150, 180, 225, .34); background: rgba(150, 180, 225, .09); }
.lang--nincs    { color: var(--danger); border-color: rgba(255, 139, 139, .38); background: rgba(255, 139, 139, .10); }

/* ---------- 10. BORITO (CSS-bol rajzolva, nincs kepfajl) ---------- */
.poster {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(160deg, var(--a) 0%, #05070C 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; isolation: isolate;
}
.poster::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .85;
}
.poster::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(4, 6, 10, .94) 0%, rgba(4, 6, 10, .45) 42%, rgba(4, 6, 10, 0) 72%);
}
.poster > * { position: relative; z-index: 2; }

.poster__type {
  font-family: var(--mono); font-size: clamp(8px, 4.4cqi, 10px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--b, #fff); opacity: .95;
  margin-bottom: 5px; font-weight: 700;
}
.poster__title {
  font-size: clamp(12.5px, 10.5cqi, 22px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1; color: #fff; text-wrap: balance; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.poster__sub {
  font-size: clamp(9.5px, 5.2cqi, 12px); color: rgba(255, 255, 255, .72); margin-top: 3px;
}

/* motivumok: mufaj-fuggo geometria, mind CSS-gradiens */
.poster[data-motif="rings"]::before {
  background: repeating-radial-gradient(circle at 72% 24%,
    var(--b) 0 2px, transparent 2px 17px);
  opacity: .40;
}
.poster[data-motif="bands"]::before {
  background: repeating-linear-gradient(118deg,
    var(--b) 0 3px, transparent 3px 22px);
  opacity: .45;
}
.poster[data-motif="bars"]::before {
  background: repeating-linear-gradient(90deg,
    var(--b) 0 9px, transparent 9px 30px);
  opacity: .30;
  mask-image: linear-gradient(190deg, #000 5%, transparent 78%);
}
.poster[data-motif="grid"]::before {
  background:
    repeating-linear-gradient(0deg, var(--b) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--b) 0 1px, transparent 1px 26px);
  opacity: .38;
  mask-image: radial-gradient(ellipse at 50% 18%, #000 10%, transparent 85%);
}
.poster[data-motif="blobs"]::before {
  background:
    radial-gradient(circle at 24% 22%, var(--b) 0, transparent 38%),
    radial-gradient(circle at 82% 42%, var(--b) 0, transparent 30%),
    radial-gradient(circle at 48% 8%,  var(--b) 0, transparent 22%);
  opacity: .55;
}
.poster[data-motif="dots"]::before {
  background-image: radial-gradient(var(--b) 1.7px, transparent 1.8px);
  background-size: 15px 15px;
  opacity: .42;
  mask-image: linear-gradient(200deg, #000 0%, transparent 72%);
}
.poster[data-motif="wave"]::before {
  background:
    radial-gradient(140% 62% at 50% -18%, var(--b) 0, transparent 62%),
    radial-gradient(120% 48% at 12% 30%, var(--b) 0, transparent 55%);
  opacity: .46;
}
.poster[data-motif="shard"]::before {
  background: linear-gradient(118deg, var(--b) 0 46%, transparent 46.4%);
  opacity: .42;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 0 92%);
}

/* platform-jelzes a boriton (kis monogram sarok) */
.poster__mono {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font-family: var(--mono); font-weight: 800; font-size: 10.5px;
  padding: 3px 7px; border-radius: 6px;
  background: hsl(var(--ph) var(--ps) 66%); color: #0B0F16;
}

/* ---------- 11. KARTYA ---------- */
.card {
  display: block; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--line-soft);
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); border-color: var(--line); }
.card .poster { border-radius: 0; }
.card__meta { padding: 9px 10px 11px; }
.card__s { font-size: 12.5px; font-weight: 650; color: var(--text-dim); }
.card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

/* ---------- 12. SIN (vizszintes gorgetes) ---------- */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px var(--pad) 16px;
  margin-inline: calc(var(--pad) * -1);
  scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 46px), transparent 100%);
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }
@media (min-width: 560px)  { .rail { grid-auto-columns: 172px; gap: 14px; } }
@media (min-width: 900px)  { .rail { grid-auto-columns: 196px; gap: 16px; } }
@media (min-width: 1300px) { .rail { grid-auto-columns: 214px; } }

/* ---------- 13. HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface-1);
  min-height: 460px; display: flex; align-items: flex-end;
}
.hero__art { position: absolute; inset: 0; z-index: 0; }
.hero__art .poster {
  aspect-ratio: auto; height: 100%; padding: 0; border-radius: 0;
  container-type: normal;
}
.hero__art .poster__type,
.hero__art .poster__title,
.hero__art .poster__sub { display: none; }
.hero__art .poster::after {
  background:
    linear-gradient(to top, rgba(8, 11, 18, .97) 6%, rgba(8, 11, 18, .55) 46%, rgba(8, 11, 18, .15) 100%),
    linear-gradient(to right, rgba(8, 11, 18, .88) 0%, rgba(8, 11, 18, .1) 62%);
}
.hero__in {
  position: relative; z-index: 2; padding: 34px var(--pad) 32px;
  max-width: 1520px; margin: 0 auto; width: 100%;
}
.hero__body { max-width: 620px; }
.hero__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--now); font-weight: 700;
  margin-bottom: 12px;
}
.hero h1 {
  font-size: clamp(32px, 7.4vw, 62px); letter-spacing: -.035em;
  line-height: .98; text-wrap: balance;
}
.hero__sub { color: var(--text-dim); font-size: 15px; margin-top: 6px; }
.hero__p { color: var(--text-dim); margin-top: 14px; font-size: 15.5px; max-width: 54ch; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* nagy visszaszamlalo */
.count {
  display: inline-flex; align-items: stretch; gap: 1px; margin-top: 20px;
  border: 1px solid var(--now-line); border-radius: var(--r-md);
  background: var(--now-tint); overflow: hidden;
}
.count__box { padding: 9px 14px; text-align: center; min-width: 62px; }
.count__box + .count__box { border-left: 1px solid rgba(255, 193, 77, .22); }
.count__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(21px, 4.4vw, 30px); font-weight: 700; color: var(--now);
  line-height: 1.1; letter-spacing: -.02em;
}
.count__l {
  font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 650;
}
.count--live { border-color: rgba(79, 216, 168, .4); background: var(--live-tint); }
.count--live .count__n { color: var(--live); }

@media (min-width: 860px) { .hero { min-height: 580px; } .hero__in { padding-block: 60px 48px; } }

/* ---------- 14. GOMBOK ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.btn svg { width: 17px; height: 17px; }
.btn--p { background: var(--now); color: #241802; }
.btn--p:hover { background: #FFD37A; }
.btn--g { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn--g:hover { background: var(--surface-3); }
.btn--ghost { color: var(--text-dim); border-color: var(--line); }
.btn--ghost:hover { color: var(--text); background: var(--surface-1); }
.btn[aria-pressed="true"] {
  background: var(--live-tint); color: var(--live); border-color: rgba(79, 216, 168, .45);
}
.btn[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }

/* ---------- 15. PLATFORM CSEMPE ---------- */
.ptiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.ptile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: var(--r-md);
  background: linear-gradient(150deg, hsl(var(--ph) var(--ps) 44% / .20), hsl(var(--ph) var(--ps) 30% / .05));
  border: 1px solid hsl(var(--ph) var(--ps) 60% / .30);
  transition: border-color .15s, transform .15s;
}
.ptile:hover { transform: translateY(-3px); border-color: hsl(var(--ph) var(--ps) 66% / .7); }
.ptile__m {
  font-family: var(--mono); font-weight: 800; font-size: 14px;
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: hsl(var(--ph) var(--ps) 66%); color: #0B0F16;
}
.ptile__n { font-weight: 700; font-size: 15px; letter-spacing: -.015em; }
.ptile__c {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.ptile__c b { color: var(--now); font-weight: 700; }

/* ---------- 16. IDOVONAL ---------- */
.tl { margin-top: 24px; }
.tl__day { border-top: 1px solid var(--line-soft); }
.tl__day:first-child { border-top: 0; }
.tl__h {
  position: sticky; top: 56px; z-index: 30;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 0 11px;
  background: linear-gradient(to bottom, var(--bg) 72%, rgba(8, 11, 18, 0));
}
.tl__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4.6vw, 32px); font-weight: 700; letter-spacing: -.03em;
  color: var(--text);
}
.tl__w { font-size: 13px; color: var(--text-faint); text-transform: lowercase; }
.tl__badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; margin-left: auto;
}
.tl__badge--now { background: var(--now); color: #2A1C02; }
.tl__badge--tomorrow { background: var(--now-tint); color: var(--now); border: 1px solid var(--now-line); }
.tl__badge--rest { border: 1px solid var(--line); color: var(--text-faint); }
.tl__day--now .tl__n { color: var(--now); }

.tl__rows { display: grid; gap: 8px; padding-bottom: 20px; }
.row {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px;
  align-items: center; padding: 10px 12px 10px 10px;
  border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--line-soft); border-left: 3px solid var(--line);
  transition: background .15s, border-color .15s;
}
.row:hover { background: var(--surface-2); }
.row[data-state="now"]      { border-left-color: var(--now); }
.row[data-state="tomorrow"] { border-left-color: var(--now); }
.row[data-state="soon"]     { border-left-color: var(--now-soft); }
.row[data-state="week"]     { border-left-color: var(--now-mute); }
.row[data-state="live"]     { border-left-color: var(--live); }
.row__art { border-radius: 7px; overflow: hidden; }
.row__art .poster { padding: 5px; }
.row__art .poster__title, .row__art .poster__sub, .row__art .poster__type { display: none; }
.row__b { min-width: 0; }
.row__t { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.row__m {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px;
}
.row__time {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.row__k { font-size: 12.5px; color: var(--text-faint); }
@media (min-width: 760px) {
  .row { grid-template-columns: 58px 1fr auto; }
  .row__r { text-align: right; display: grid; gap: 4px; justify-items: end; }
}
.row__r { display: none; }
@media (min-width: 760px) { .row__r { display: grid; } }
.row__cd {
  font-family: var(--mono); font-size: 12.5px; color: var(--now-soft);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.row[data-state="later"] .row__cd { color: var(--text-faint); }
.row[data-state="live"] .row__cd { color: var(--live); }
.row[data-state="now"] .row__cd { color: var(--now); font-weight: 700; }

/* ---------- 17. HONAP NAPTAR ---------- */
.calbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
}
.calbar__t {
  font-size: 19px; font-weight: 750; letter-spacing: -.02em;
  min-width: 190px;
}
.seg {
  display: inline-flex; background: var(--surface-1);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px;
}
.seg button {
  padding: 6px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 650;
  color: var(--text-dim);
}
.seg button[aria-pressed="true"] { background: var(--now); color: #241802; }

.cal { margin-top: 16px; }
.cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); padding-bottom: 7px;
}
.cal__dow span { text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__c {
  min-height: 96px; border-radius: 10px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal__c--out { background: transparent; border-color: transparent; }
.cal__c--past { opacity: .55; }
.cal__c--past .cal__e { filter: saturate(.6); }
.cal__c--today { border-color: var(--now); background: var(--now-tint); }
.cal__n {
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-faint); font-weight: 650;
}
.cal__c--today .cal__n { color: var(--now); font-weight: 800; }
.cal__e {
  display: flex; align-items: center; gap: 5px; width: 100%;
  font-size: 10.5px; line-height: 1.25; text-align: left;
  color: var(--text-dim); padding: 3px 4px; border-radius: 5px;
  background: hsl(var(--ph) var(--ps) 50% / .16);
  border-left: 2px solid hsl(var(--ph) var(--ps) 64%);
  overflow: hidden;
}
.cal__e span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal__e b {
  font-family: var(--mono); font-size: 9px; font-weight: 800;
  color: hsl(var(--ph) var(--ps) 78%); flex: none;
}
.cal__more { font-size: 10px; color: var(--text-faint); padding-left: 4px; }
@media (max-width: 700px) {
  .cal__c { min-height: 62px; padding: 4px; }
  .cal__e { padding: 2px 3px; font-size: 0; gap: 0; border-left-width: 3px; }
  .cal__e span { display: none; }
  .cal__e b { font-size: 9px; }
}

/* ---------- 18. RACS + SZUROK ---------- */
.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  margin-top: 18px;
}
@media (min-width: 900px) { .grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); } }

.filters {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--pad) 12px;
  margin-inline: calc(var(--pad) * -1);
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) {
  .filters { mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%); }
}
.fchip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 650;
  background: var(--surface-1); border: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}
.fchip:hover { color: var(--text); }
.fchip[aria-pressed="true"] {
  background: hsl(var(--ph, 40) var(--ps, 90%) 62%); color: #0B0F16;
  border-color: transparent;
}
.fchip--all[aria-pressed="true"] { background: var(--now); color: #241802; }
.fchip__m { font-family: var(--mono); font-weight: 800; font-size: 11px; }

.rowbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 6px; color: var(--text-faint); font-size: 13.5px;
}
.rowbar__n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 19. CIMOLDAL ---------- */
.detail { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 980px) { .detail { grid-template-columns: 1fr 340px; gap: 42px; } }

.fact {
  display: grid; gap: 1px; border-radius: var(--r-md); overflow: hidden;
  background: var(--line-soft); border: 1px solid var(--line-soft);
}
.fact__r {
  display: grid; grid-template-columns: 128px 1fr; gap: 10px;
  padding: 12px 14px; background: var(--surface-1); font-size: 14.5px;
  align-items: baseline;
}
.fact__k {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 650;
}
.fact__v { color: var(--text); }
@media (max-width: 520px) { .fact__r { grid-template-columns: 1fr; gap: 3px; } }

/* A napi level SZEKCIO-KAPCSOLOI (nyolcadik kor).
   Nem a .fact__r-t hasznaljuk: annak 128 pixeles fix elso oszlopa van, es a
   panel egy 340 pixeles oldalsavban all -- a szekcionevek ott betunkent
   tordeltek ("MOSTANTO L MAGYARUL IS"). Itt a nev es a kapcsolo egy sorban
   all, a magyarazat alatta, teljes szelessegben. */
.szek {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.szek:first-child { border-top: 0; padding-top: 2px; }
.szek__t { flex: 1; min-width: 0; }
.szek__n { font-size: 14px; font-weight: 620; color: var(--text); line-height: 1.3; }
.szek__d { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; line-height: 1.45; }
.szek__b { flex: 0 0 auto; }

.panel {
  border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: var(--surface-1); padding: 18px;
}
.panel h3 { font-size: 16px; margin-bottom: 12px; }
.panel + .panel { margin-top: 16px; }

.eps { display: grid; gap: 1px; background: var(--line-soft); border-radius: 10px; overflow: hidden; }
.ep {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center; padding: 10px 12px; background: var(--surface-2);
  font-size: 14px;
}
.ep__n {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; min-width: 34px;
}
.ep__d {
  font-family: var(--mono); font-size: 12px; color: var(--now-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ep--past .ep__d { color: var(--live); }

.note {
  display: flex; gap: 10px; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--now-tint); border: 1px solid var(--now-line);
  font-size: 14px; color: var(--text-dim); line-height: 1.5;
}
.note svg { width: 18px; height: 18px; flex: none; color: var(--now); margin-top: 2px; }
.note--warn { background: rgba(255, 139, 139, .09); border-color: rgba(255, 139, 139, .36); }
.note--warn svg { color: var(--danger); }

.avail { display: grid; gap: 8px; }
.avail__r {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border-left: 3px solid hsl(var(--ph) var(--ps) 64%);
}
.avail__d {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}

/* ---------- 20. URES ALLAPOT ---------- */
.empty {
  text-align: center; padding: 52px 20px; border-radius: var(--r-lg);
  border: 1px dashed var(--line); color: var(--text-faint);
  margin-top: 20px;
}
.empty h3 { color: var(--text-dim); font-size: 17px; margin-bottom: 8px; }

/* ---------- 21. LABLEC ---------- */
.foot {
  margin-top: 64px; border-top: 1px solid var(--line-soft);
  padding: 30px var(--pad) 40px; color: var(--text-faint); font-size: 13.5px;
}
.foot__in { max-width: 1520px; margin: 0 auto; display: grid; gap: 18px; }
.foot__d { max-width: 60ch; line-height: 1.6; }
.foot__l { display: flex; flex-wrap: wrap; gap: 16px; }
.foot__l a:hover { color: var(--text-dim); }
@media (min-width: 860px) { .foot__in { grid-template-columns: 1fr auto; align-items: start; } }

/* ---------- 22. ARCULAT OLDAL ---------- */
.swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 16px; }
.sw { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface-1); }
.sw__c { height: 74px; }
.sw__b { padding: 9px 11px; font-size: 12px; }
.sw__n { font-weight: 700; font-size: 13px; }
.sw__h { font-family: var(--mono); color: var(--text-faint); font-size: 11.5px; }
.sw__r { font-family: var(--mono); font-size: 11.5px; color: var(--live); margin-top: 3px; }
.sw__r--warn { color: var(--now); }

.specimen { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 20px; background: var(--surface-1); margin-top: 16px; }
.specimen > * + * { margin-top: 14px; }
.demo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mono-demo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 26px; letter-spacing: -.02em; color: var(--now); }

/* ---------- 22. VALODI ADAT: BORITOKEP, HIANYZO ADAT, NEM TAMOGATOTT PLATFORM ----------
   A latvanytervben minden borito CSS-gradiens volt. Valodi adatnal a
   szolgaltatoi kep az elsodleges, es a gradienses borito marad a
   HELYETTESITO: ha nincs kep vagy nem tolt be, nem ures doboz latszik. */
.poster__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; background: var(--surface-1);
}
.poster--img::before { display: none; }          /* a motivum a kep alatt felesleges */
.hero__art .poster__img { object-position: center 22%; }

/* nyelvi allapot: a "nincs adat" NEM azonos a "nincs magyar" allitassal,
   ezert semleges szurke, nem piros */
.lang--ismeretlen {
  color: var(--text-faint); border-color: var(--line);
  background: var(--surface-2); border-style: dashed;
}

/* szolgaltato, amire nincs adatforrasunk: lathato, de nem tesz ugy mintha ures lenne */
.ptile--off {
  background: var(--surface-1); border-color: var(--line-soft); opacity: .62;
}
.ptile--off:hover { transform: none; border-color: var(--line); }
.ptile--off .ptile__m { background: var(--surface-3); color: var(--text-faint); }
.fchip--off { opacity: .55; }
.fchip--off .fchip__m { color: var(--text-faint); }

/* a leiras nyelvi forrasa: nem sugalljuk, hogy magyar szoveg */
.hero__psrc {
  display: block; margin-top: 8px; font-size: 12px; color: var(--text-faint);
  font-style: normal;
}
/* ---------- 23. FIOK: FEJLEC-CSEMPE, URLAP, TERV-ALLAPOT ----------
   A negyedik kor. Uj szint NEM vezetunk be: a terv-allapotok ugyanazt a ket
   kodolast hasznaljak, mint az ido (arany = most fut, zold = rendben van,
   piros = elakadt), es mindegyik mellett ott a SZO is, tehat szin nelkul is
   olvashato. */

.acct {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-1);
  font-size: 13px; font-weight: 650; color: var(--text-dim); white-space: nowrap;
}
.acct:hover { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.acct__i {
  font-family: var(--mono); font-weight: 800; font-size: 11px;
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--now); color: #241802;
}
.acct__t { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
.acct--anon .acct__i { background: var(--surface-3); color: var(--text-dim); }
@media (max-width: 520px) { .acct__t { display: none; } .acct { padding: 5px; } }

/* terv-allapot cimke: mindig szoveggel */
.plan {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--text-dim); background: var(--surface-1);
}
.plan--probaido { color: var(--now); border-color: var(--now-line); background: var(--now-tint); }
.plan--fizetett { color: var(--live); border-color: rgba(79, 216, 168, .4); background: var(--live-tint); }
.plan--ingyenes { color: var(--live); border-color: rgba(79, 216, 168, .4); background: var(--live-tint); }
.plan--lejart   { color: var(--danger); border-color: rgba(255, 139, 139, .4); background: rgba(255, 139, 139, .09); }

/* "hamarosan lekerul": a MASIK iranyu ido. Az erkezes aranyat nem veheti el,
   ezert nem arany, es nem is a kitoltes-skalan ul: sajat, kereten kivuli
   jelzes, sajat nyillal es KIIRT szoveggel. */
.leaving {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
  color: var(--danger); border: 1px solid rgba(255, 139, 139, .38);
  background: rgba(255, 139, 139, .10);
}
.leaving::before { content: "\2193"; font-weight: 800; }

/* urlap */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > label {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 650;
}
.field input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px; outline: none;
}
.field input:focus-visible { outline: 3px solid var(--now); outline-offset: 2px; border-color: var(--now-line); }
.field input::placeholder { color: var(--text-faint); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field__h { font-size: 12.5px; color: var(--text-faint); }
.form__err {
  display: none; gap: 9px; padding: 11px 13px; border-radius: var(--r-sm);
  background: rgba(255, 139, 139, .10); border: 1px solid rgba(255, 139, 139, .38);
  color: #FFC2C2; font-size: 14px;
}
.form__err[data-on="1"] { display: flex; }
.form__ok {
  display: none; gap: 9px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--live-tint); border: 1px solid rgba(79, 216, 168, .4);
  color: #A7EDD1; font-size: 14px;
}
.form__ok[data-on="1"] { display: flex; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ket hasab: belepes es regisztracio egymas mellett, mobilon egymas alatt */
.duo { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* haztartas tagsor */
.member {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 10px; background: var(--surface-2);
  border-left: 3px solid var(--line);
}
.member--owner { border-left-color: var(--now); }
.member--me    { background: var(--surface-3); }
.member__n { font-weight: 700; font-size: 14.5px; }
.member__e { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.member__r { margin-left: auto; font-size: 12px; color: var(--text-faint); }
.member__b { display: flex; gap: 6px; flex-wrap: wrap; }

/* ferohely-sav: hany hely van meg a haztartasban */
.slots { display: flex; gap: 6px; margin: 12px 0 4px; }
.slots i {
  flex: 1 1 0; height: 8px; border-radius: 99px; background: var(--surface-3);
}
.slots i[data-fill="tag"]   { background: var(--now); }
.slots i[data-fill="fuggo"] { background: var(--now-tint); box-shadow: inset 0 0 0 1px var(--now-line); }

/* meghivo link doboza: hosszu token, torjon */
.tokenbox {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  word-break: break-all; color: var(--text-dim);
  background: var(--bg); border: 1px dashed var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; margin-top: 8px;
}

/* zarolt fizetos felulet */
.lock {
  border-radius: var(--r-md); padding: 18px;
  background: rgba(255, 139, 139, .07); border: 1px solid rgba(255, 139, 139, .34);
}
.lock h3 { font-size: 17px; margin-bottom: 8px; color: var(--text); }
.lock p { color: var(--text-dim); font-size: 14.5px; margin-bottom: 10px; }

/* admin tabla */
.atable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.atable th, .atable td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.atable th {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 650;
}
.atable td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tablewrap { overflow-x: auto; margin-top: 16px; }

/* valodi boritokep mogott erosebb sotetites kell, kulonben a kep sajat
   tipografiaja versenyez a cimsorral */
.hero__art .poster--img::after {
  background:
    linear-gradient(to top, rgba(8, 11, 18, .985) 4%, rgba(8, 11, 18, .82) 38%, rgba(8, 11, 18, .42) 100%),
    linear-gradient(to right, rgba(8, 11, 18, .94) 0%, rgba(8, 11, 18, .38) 58%, rgba(8, 11, 18, .12) 100%);
}

/* =========================================================================
   OTODIK KOR: JOGOSULTSAGI SZINTEK, HIRDETOHELYEK, SUTI-HOZZAJARULAS
   ========================================================================= */

/* Zar-doboz. NEM hibauzenet: elmondja, mi ez es mi kell hozza. Ezert nem
   piros: a piros azt allitana, hogy valami elromlott. */
.lock {
  border: 1px solid var(--now-line); background: var(--now-tint);
  border-radius: var(--r-md); padding: 16px 18px;
}
.lock__t {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--now); font-weight: 700; margin-bottom: 6px;
}
.lock p { max-width: 58ch; }
[data-szint-zar][data-zarva] { display: block; }

/* Szint-tablazat. Keskeny nezetben is olvashato marad: a wrapper gorget,
   nem a lap.
   A min-width:0 NEM dísz. A .detail egy grid, es a grid-elem alapertelmezett
   min-width erteke `auto`, ami azt jelenti: ne legyen kisebb a tartalmanal.
   Igy a 460 pixeles tablazat a GRID-OSZLOPOT feszitette szet, es az
   overflow-x:auto soha nem jutott szohoz -- nem a wrapper gorgetett, hanem a
   LAP. Megmerve 390 pixelen: scrollWidth 530 vs innerWidth 390, 140 pixel
   tulnyulas. A min-width:0 engedi a grid-elemet a tartalom ala zsugorodni,
   es onnantol a wrapper gorget. */
.detail > * { min-width: 0; }
.panel { min-width: 0; }
/* A min-width:0 utan egy hosszu ertek (e-mail cim, datum) mar nem feszitene
   szet a panelt, de levaghatna. Ezert tordelheto: inkabb ket sor, mint egy
   levagott cim. */
.fact__v { overflow-wrap: anywhere; }
/* ---------- SZOLGALTATAS CSOMAGOK TABLAJA (szintek.php) ----------
   Ez a keszlet a 2a822a7-beli .szt tabla, valtozatlanul. Roland a kartyas
   elrendezes helyett ezt kerte vissza. A tablat MOST A SZERVER rendereli
   (api/_lap.php -> hf_szint_reszletezo()), de a stilus ugyanaz, ezert nincs
   uj osztalynev: egy atnevezes csak elrejtene, hogy ez a regi tabla.

   A .szt__wrap gorgeti a tablat 460 px alatt, es NEM a lapot: a min-width a
   tablan van, a tulcsordulas a burkolon. Enelkul a 390 px-es keszuleken az
   egesz oldal vizszintesen gorogne. */
.szt__wrap { overflow-x: auto; margin-top: 14px; }
.szt { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
.szt th, .szt td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
}
.szt thead th {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 650; white-space: nowrap;
}
.szt tbody th { font-weight: 500; color: var(--text-dim); }
.szt td { text-align: center; }
.szt__most { background: var(--surface-2); }
.szt thead .szt__most { color: var(--now); }
.szt thead .szt__most span {
  display: block; font-size: 10px; letter-spacing: .06em; color: var(--now);
  font-weight: 700; text-transform: none;
}
.szt__y { color: var(--live); font-weight: 650; }
.szt__n { color: var(--text-faint); }

/* Sajat szolgaltatas-reklam. Nincs suti, nincs kulso keres, nincs kep:
   szoveg plusz CSS. Ezert jelenhet meg hozzajarulas nelkul is. */
.promo {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--surface-2), var(--surface-1) 62%);
  padding: 18px 20px; margin-top: 22px;
}
.promo__l {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--now); font-weight: 700;
}
.promo__t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.promo__p { color: var(--text-dim); font-size: 14.5px; margin: 8px 0 14px; max-width: 60ch; }
.promo__n { color: var(--text-faint); font-size: 12px; margin: 12px 0 0; max-width: 66ch; }

/* Harmadik feles hirdetohely. Ez a doboz CSAK hozzajarulas utan keletkezik.
   Hozzajarulas nelkul a hely ures es rejtett, tehat ez a szabaly sem
   ervenyesul semmire. */
.ad {
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--surface-1); padding: 14px 16px; margin-top: 22px;
}
.ad__l {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.ad__b {
  margin-top: 10px; min-height: 90px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text-faint); font-family: var(--mono); font-size: 12.5px;
}
.ad__n { color: var(--text-faint); font-size: 12px; margin: 10px 0 0; max-width: 66ch; }
.ad__slot { margin-top: 10px; min-height: 90px; }
[data-hirdetes][hidden] { display: none; }

/* Suti-sav. Alul ul, nem takarja el a tartalmat, es nem modalis: a lap
   olvashato marad dontes nelkul is. A dontes kesobb is megvaltoztathato. */
.consent {
  position: fixed; left: 0; right: 0; bottom: var(--tabbar); z-index: 60;
  background: var(--surface-1); border-top: 1px solid var(--line);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
}
.consent__in {
  max-width: 1520px; margin: 0 auto; padding: 14px var(--pad);
  display: grid; gap: 12px;
}
@media (min-width: 860px) {
  .consent__in { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
}
.consent__t { font-weight: 700; font-size: 15px; }
.consent__p { color: var(--text-dim); font-size: 13.5px; margin: 5px 0 0; max-width: 88ch; }
.consent__b { display: flex; gap: 10px; flex-wrap: wrap; }
.consent__b .btn { flex: 1 1 auto; justify-content: center; }

/* Az ajanlas indoklasa a kartyan: MIERT kapta. Ha nem tudjuk megmondani,
   nem is irunk oda semmit. */
.card__why, .row .card__why {
  font-size: 11.5px; color: var(--now-mute); padding: 0 10px 10px;
  letter-spacing: .01em;
}
.row .card__why { padding: 0; grid-column: 2 / -1; }

/* Preferencia-jelolok. Ugyanaz a chip, mint a bongeszes szurojen. */
.prefbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prefbox .fchip { flex: 0 0 auto; }

/* =========================================================================
   HETEDIK KOR: SAJAT ERTEKELES (OT FOKOZAT) ES KEDVENCEK
   ========================================================================= */

/* A FORMA KULONBOZTET MEG, NEM A SZIN.
   Ot gomb, ot kulonbozo ikon: ket lefele mutato ekjel, egy lefele,
   vizszintes vonal, egy felfele, ket felfele. A projekt kimondott elve, hogy
   a platform-szin mellett is ott all a ketbetus monogram, mert szinlatas-
   zavarral a szinek osszecsusznak -- ugyanez all itt. A kivalasztott
   fokozat ezert NEM csak szint valt: keretet, hattert es meretet is.
   A gomb felirata (a fokozat neve) a .vh osztallyal a kepernyoolvasonak
   mindig ott van, latoknak a title es az alatta allo mondat mondja meg. */
.ert { margin: 0; }
.ert__row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ertb {
  flex: 1 1 0; min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface-1); color: var(--text-dim);
}
.ertb svg { width: 22px; height: 22px; }
.ertb:hover { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.ertb:disabled { opacity: .5; }

/* A megjelolt fokozat. A ketto vege kap sajat szint is, de a KERET es a
   kitoltes attol fuggetlenul jelzi, melyik all be: monokrom kepen is latszik. */
.ertb--on {
  border-color: var(--now); background: var(--now-tint); color: var(--now);
  box-shadow: inset 0 0 0 1px var(--now-line);
}
.ertb--on.ertb--nagyon-le, .ertb--on.ertb--le {
  border-color: rgba(255, 139, 139, .6); background: rgba(255, 139, 139, .12);
  color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255, 139, 139, .38);
}
.ertb--on.ertb--nagyon-fel, .ertb--on.ertb--fel {
  border-color: rgba(79, 216, 168, .6); background: var(--live-tint);
  color: var(--live); box-shadow: inset 0 0 0 1px rgba(79, 216, 168, .38);
}

/* "Ezt mondtad: Semleges" vs "Még nem értékelted ezt a címet."
   A ket allapot ket kulonbozo mondat, nem ugyanannak a halvanyabb valtozata. */
.ert__now { margin-top: 10px; font-size: 14px; color: var(--text-dim); }
.ert__now strong { color: var(--text); }
.ert__x {
  margin-top: 8px; font-size: 13px; color: var(--text-faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.ert__x:hover { color: var(--text); }
.ert__err { margin: 10px 0 0; font-size: 13px; color: var(--danger); }

/* Kedvenc gomb: a telt es az ures sziv mellett a FELIRAT is valtozik. */
.kedvb { width: 100%; justify-content: center; }

/* Egy tetel a kedvencek lapon: a szokasos sor, alatta a vezerlok.
   A vezerlok kulon dobozban allnak, mert a sor maga egy link, es linken
   belul a gomb ervenytelen jeloles. */
.ktetel {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 10px; margin-bottom: 12px; background: var(--surface-1);
}
.ktetel .row { background: none; border: 0; padding: 0; }
.ktetel__h { padding: 4px 2px 0; }
.ktetel__b {
  display: grid; gap: 12px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
}
@media (min-width: 700px) {
  .ktetel__b { grid-template-columns: 1fr 220px; align-items: start; }
}

/* Az ertekelesek fokozatonkent. MIND AZ OT csoport megjelenik, az ures is:
   igy latszik, hogy ot fokozat van, es hogy a Semleges egy VALASZTHATO
   fokozat, nem a "nem ertekeltem" masik neve. */
.ertcs { margin-bottom: 26px; }
.ertcs__f {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.ertcs__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-1); color: var(--text-dim);
}
.ertcs__i svg { width: 18px; height: 18px; }
.ertcs__i.ertb--nagyon-le, .ertcs__i.ertb--le { color: var(--danger); }
.ertcs__i.ertb--nagyon-fel, .ertcs__i.ertb--fel { color: var(--live); }
.ertcs__n {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--text-faint);
}
.ertcs__u { color: var(--text-faint); font-size: 13.5px; margin: 0 0 4px; }

/* ---------- 26. JOGI SZOVEG (adatvedelem, felhasznalasi feltetelek) ----------
   Tizedik kor. Hosszu, folyamatos olvasasra szant szoveg -- a tobbi lap
   rovid, racsos tartalommal dolgozik, ott ez a mertek nem all.

   A sorhossz 68ch. Nem esztetikai dontes: a jogi szoveget vegig kell olvasni,
   es egy 1500 pixel szeles bekezdesnel a szem elveszti a sor elejet. A
   .foot__d (60ch) es a .page-head .lead (62ch) ugyanezt az okot koveti. */
.jog { max-width: 68ch; padding-bottom: 20px; }
.jog h2 {
  font-size: 20px; margin: 38px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--line-soft); scroll-margin-top: 90px;
}
.jog h2:first-of-type { border-top: 0; padding-top: 0; }
.jog h3 { font-size: 16px; margin: 22px 0 6px; color: var(--text-dim); }
.jog p { margin: 0 0 12px; color: var(--text-dim); font-size: 15px; line-height: 1.72; }
.jog ul, .jog ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-dim); font-size: 15px; }
.jog li { margin-bottom: 7px; line-height: 1.66; }
.jog strong { color: var(--text); }
.jog .note { margin: 14px 0 18px; }
.jog table { margin: 12px 0 18px; }

/* A tartalomjegyzek. Nem dísz: mindket lap tobb kepernyonyi, es a
   felhasznalonak jellemzoen EGY kerdese van, nem az egesz szoveg kell. */
.jog__toc {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--surface-1); padding: 14px 18px; margin: 0 0 30px;
}
.jog__toc ol { margin: 0; padding-left: 20px; font-size: 14px; }
.jog__toc li { margin-bottom: 4px; }
.jog__toc a { color: var(--text-dim); }
.jog__toc a:hover { color: var(--now); }
.jog__frissult {
  font-family: var(--mono); font-size: 12.5px; color: var(--text-faint);
  letter-spacing: .03em; margin-bottom: 22px;
}

/* Uzemelteto cegadatai a jogi lapokon (5. pont). A ket hasab minmax(0,...),
   mert egy hosszu szekhely kulonben kifeszitene a .jog oszlopot. 520 px alatt
   egymas ala kerul: egy cimke plusz egy 40 karakteres cim nem fer ket hasabba
   egy 390 px szeles keszuleken. */
.jog__ceg {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-1); padding: 14px 18px; margin: 0 0 18px;
}
.jog__ceg dl {
  margin: 0; display: grid; gap: 6px 16px;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}
.jog__ceg dt { color: var(--text-faint); font-size: 13px; }
.jog__ceg dd {
  margin: 0; color: var(--text); font-size: 14.5px; overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .jog__ceg dl { grid-template-columns: 1fr; gap: 2px; }
  .jog__ceg dd { margin-bottom: 8px; }
}
/* A jogi lap oszlopa 68ch szeles, a szint-tabla min-widthje 460 px, tehat
   befer. A .szt__wrap gorgeti, ha megsem: a lap maga nem mozdul. */

/* ---------- 27. ADATAIM: KIKERES ES TORLES ----------
   A torles-doboz szandekosan NEM ugy nez ki, mint a tobbi panel. Egy
   visszafordithatatlan muveletnek nem szabad ugyanolyannak latszania, mint
   egy beallitas-mentesnek. */
.veszely {
  border: 1px solid rgba(255, 139, 139, .42); border-radius: var(--r-md);
  background: rgba(255, 139, 139, .05); padding: 18px;
}
.veszely h3 { color: var(--danger); font-size: 16px; margin-bottom: 10px; }
.btn--veszely {
  background: var(--danger); color: #1a0a0a; border-color: var(--danger);
  font-weight: 700;
}
.btn--veszely:disabled { opacity: .42; cursor: not-allowed; }

/* A kategoria-lista: mit tarolunk rolad, kategorianként hany sorral. */
.kat { display: grid; gap: 1px; background: var(--line-soft); border-radius: 10px; overflow: hidden; }
.kat__r { background: var(--surface-2); padding: 12px 14px; }
.kat__h { display: flex; align-items: baseline; gap: 10px; }
.kat__n { font-weight: 600; font-size: 14.5px; }
.kat__d {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--text-faint); flex: none;
}
.kat__m { color: var(--text-faint); font-size: 13px; margin: 4px 0 0; line-height: 1.55; }