/* A tévé alkalmazásának stílusa (tv/index.html). Régi tévé-böngészőre: CSS-változó, grid és flex-gap nélkül, a méretek
rem-ben (a rem a képernyő szélességének 1%-a); a színek a frontend/public/tokens.css tokenjei, kézzel, értékként. */
html { font-size: 1vw; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #07080a; color: #dfe3ea; } /* OLED: nincs tiszta fehér álló szöveg */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.5rem; line-height: 1.35;
-webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { display: block; border: 0; }
.f { outline: none; }
/* kép háttérként (background-size: cover): object-fit nélküli régi böngészőben sem torzul */
.im { width: 100%; height: 100%; background-color: transparent; background-position: center; background-repeat: no-repeat;
-webkit-background-size: cover; background-size: cover; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; }
.im.on { opacity: 1; } /* a kép a betöltése (és kibontása) után úszik be */
/* a képernyőn kívül betöltött kép áttűnés nélkül (a régi motoron az áttűnés idejére minden kép külön réteg lenne) */
.im.now { -webkit-transition: none; transition: none; }
svg { display: block; }
#sink { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; outline: none; }
.fx { display: -webkit-box; display: -webkit-flex; display: flex; }
.mid { -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.col { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
.grow { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 0; min-width: 0; } /* width: 0 – a régi -webkit-box is a maradék helyet ossza ki, ne a szöveg szélességét */
.none { -webkit-box-flex: 0; -webkit-flex: none; flex: none; }
.screen { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #07080a; }
/* az RTL-színek nem állandó csíkként (OLED-beégés), hanem mozgó elemként: induláskor / képernyőváltáskor egy rövid söprés */
.stripe { position: fixed; left: 0; right: 0; top: 0; height: 0.25rem; z-index: 5; opacity: 0; pointer-events: none; background: #3e63ff;
background-image: -webkit-linear-gradient(left, #3e63ff, #19c3f0 52%, #a24dff); background-image: linear-gradient(90deg, #3e63ff, #19c3f0 52%, #a24dff);
-webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
@-webkit-keyframes tvSweep { 0% { opacity: 0; -webkit-transform: scaleX(0.15); } 25% { opacity: 1; } 70% { opacity: 1; -webkit-transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(1); } }
@keyframes tvSweep { 0% { opacity: 0; transform: scaleX(0.15); } 25% { opacity: 1; } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.stripe.go { -webkit-animation: tvSweep 1.4s ease-out; animation: tvSweep 1.4s ease-out; }
/* tétlen elsötétítés (3 perc gombnyomás nélkül, ha nem megy videó): egy fekete réteg; bármilyen gombra azonnal vissza */
#dim { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 90; background: #000000; opacity: 0; pointer-events: none; }
#dim.on { opacity: 0.65; -webkit-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; }
#dim.on.black { opacity: 1; } /* 15 perc tétlenség után teljesen fekete (a tévé képernyővédője is bekapcsolhat) */
.fill { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.logo { width: 7.4rem; height: 1.08rem; }
.muted { color: #b3b8c3; }
.faint { color: #828899; }
.ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ico { display: inline-block; vertical-align: -0.12em; width: 1em; height: 1em; margin-right: 0.45em; }
.ico svg { width: 100%; height: 100%; }
/* gombok, chipek: a fókuszált fehér, sötét felirattal (messziről is egyértelmű) */
.btn { display: inline-block; vertical-align: middle; margin: 0 1rem 1rem 0; padding: 1rem 2rem; border-radius: 0.8rem; background: #22252d;
color: #f1f3f7; font-size: 1.45rem; font-weight: 700; white-space: nowrap; -webkit-transition: -webkit-transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn.main { background: #e6eaf2; color: #0b0d12; }
.btn.is-f { background: #ffffff; color: #0b0d12; box-shadow: 0 0 0 0.25rem #8c9eea; -webkit-transform: scale(1.04); transform: scale(1.04); }
/* élesített törlő gomb (második OK-ra fut): piros, csak amíg vár */
.btn.arm { background: #3b1d22; color: #fecaca; }
.btn.arm.is-f { background: #fecaca; color: #3b0a0e; box-shadow: 0 0 0 0.25rem #f87171; }
.chip { display: inline-block; vertical-align: middle; margin-right: 0.8rem; padding: 0.7rem 1.5rem; border-radius: 2rem; background: #1a1d24;
color: #b3b8c3; font-size: 1.3rem; font-weight: 600; white-space: nowrap; }
/* nem fő évad (bemutatkozó, így készült…): halványabb, csak körvonal (a kijelölt / fókuszált a megszokott) */
.chip.extra { color: #828899; background: none; box-shadow: inset 0 0 0 1px rgba(200, 212, 255, 0.14); }
.chip.is-on { color: #ffffff; background: #2c3454; }
.chip.is-f { background: #ffffff; color: #0b0d12; }
/* az évad minden része megvan a szerveren: zöld letöltés-ikon a név után */
.chip .done { display: none; margin-left: 0.55rem; color: #48b755; font-style: normal; font-weight: 800; }
.chip.is-done .done { display: inline; }
.chip .done svg { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.17em; stroke-width: 2.6; }
.chip.is-f .done { color: #1f8a3b; }
/* oldalsáv */
.side { position: absolute; left: 0; top: 0; bottom: 0; width: 18.5rem; padding: 3.4rem 1.1rem 2rem; background: #0b0d11; border-right: 1px solid rgba(200, 212, 255, 0.07); }
/* a logó nagyobb, levegősen; álló elem, ezért tompítva (OLED: az RTL-színek ne égjenek be) */
.side-logo { margin: 0 0 3.2rem 1.1rem; color: #828899; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.02em; }
.side-logo .logo { width: 12.6rem; height: 1.84rem; opacity: 0.72; }
.side-logo span { display: block; margin-top: 0.9rem; opacity: 0.8; }
.item { position: relative; padding: 1rem 1.1rem; margin-bottom: 0.35rem; border-radius: 0.8rem; color: #9aa0ad; font-size: 1.4rem; font-weight: 600; }
.item svg { width: 1.8rem; height: 1.8rem; margin-right: 1.1rem; }
.item.is-on { color: #dfe3ea; background: rgba(140, 158, 234, 0.12); }
/* a választott szakasz jele: vékony függőleges RTL-színátmenet (a választással együtt mozog) */
.item.is-on:before { content: ""; position: absolute; left: 0.3rem; top: 1rem; bottom: 1rem; width: 0.3rem; border-radius: 0.2rem;
background-image: -webkit-linear-gradient(top, #3e63ff, #19c3f0 52%, #a24dff); background-image: linear-gradient(180deg, #3e63ff, #19c3f0 52%, #a24dff); }
.item.is-f { color: #0b0d12; background: #e6eaf2; }
.count { margin-left: auto; min-width: 2rem; padding: 0 0.55rem; border-radius: 1rem; background: #8c9eea; color: #0b0d12; font-size: 1.1rem; font-weight: 800; text-align: center; }
.side-foot { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 2rem; }
.avatar { width: 1.8rem; height: 1.8rem; margin-right: 1.1rem; border-radius: 50%; background: #8c9eea; color: #0b0d12; font-size: 0.85rem; font-weight: 800; line-height: 1.8rem; text-align: center; }
/* az oldalsáv a műsoroldal / rács fölött (a bal szélről balra lépve): a lap elsötétül alatta */
#peek { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 15; background: rgba(4, 5, 6, 0.6); }
#peek .side { box-shadow: 1rem 0 3rem rgba(0, 0, 0, 0.6); }
/* tartalom: függőlegesen gördülő lap, benne blokkok (cím + vízszintesen gördülő sor) */
.content { position: absolute; left: 18.5rem; top: 0; right: 0; bottom: 0; }
.viewport { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
/* jobbra ugyanannyi margó, mint balra (2,6rem): a kinagyított (scale 1.05) és kerettel kiemelt kártya is bőven elfér,
és a tévé képszéle se vágja le; ennél több üres sáv nem marad (a rácsok oszlopai a tv.js fit()-jéből) */
.page { position: relative; padding: 2.8rem 2.6rem 8rem 2.6rem; -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* ritmus: a sorok között egyforma, bő térköz; a címek tömörebbek, a feliratok halkabbak */
.block { position: relative; margin-bottom: 2.1rem; }
h1 { margin: 0 0 1.2rem; font-size: 2.8rem; font-weight: 800; letter-spacing: -0.028em; line-height: 1.08; color: #e9ecf2; }
h2 { margin: 0 0 0.1rem; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.012em; color: #e3e6ed; }
.hint { margin-left: 1.2rem; color: #828899; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
.hint.p, .pointer .hint.k { display: none; }
.pointer .hint.p { display: inline; }
/* a sor a képernyő jobb széléig fut (a lap jobb margóján át): a következő kártya ott kilóg, a fókuszált a reveal() miatt
mindig a látható részen belül marad (5% hellyel) */
.strip { position: relative; overflow: hidden; margin: 0 -2.6rem 0 -1rem; padding: 1rem 0 1rem 1rem; }
.track { position: relative; white-space: nowrap; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.track.on, .viewport > .page { will-change: transform; } /* csak a mozgó tárolók (a fókuszált sor, a lap) kapnak saját réteget */
/* a lap sorai is saját rétegen: a régi tévé-motor (a Chromium 94 előtti, pl. a webOS 5-é) a fókusz nagyításának / a sor
görgetésének ideje alatt minden utána rajzolt elemet külön rétegre tenne („assumed overlap”) – a Kategóriákon lépésenként
~170 réteget, újrarajzolva. Így csak a mozgó sor rajzolódik újra (a kinézet ugyanaz). */
.page .block, .page .grid-row { will-change: transform; }
.empty { margin: 2rem 0; color: #b3b8c3; font-size: 1.5rem; }
/* plakát / széles kártya */
.card { position: relative; display: inline-block; vertical-align: top; width: 10.6rem; margin-right: 1.2rem; white-space: normal; }
/* a plakát háttere (kép nélkül is igényes): finom, hideg színátmenet */
.pic { position: relative; height: 14.1rem; border-radius: 0.8rem; overflow: hidden; background: #161922;
background-image: -webkit-linear-gradient(top left, #1f2432, #12151c 70%); background-image: linear-gradient(160deg, #1f2432, #12151c 70%);
-webkit-transition: -webkit-transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pic .alt { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; overflow: hidden; max-height: 10rem; color: #c9cdd6; font-size: 1.3rem;
font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; word-wrap: break-word; overflow-wrap: break-word; }
.pic .alt:before { content: ""; display: block; width: 2.2rem; height: 0.18rem; margin-bottom: 0.8rem; border-radius: 0.1rem; background: #3a4258; }
/* a felirat helye állandó (2, a széles kártyán 3 sor): egy sor kártyái egyforma magasak, a frissülő felirat nem mozdít semmit */
.cap { margin-top: 0.75rem; height: 2.7rem; overflow: hidden; color: #a9aebb; font-size: 1.1rem; font-weight: 500; line-height: 1.35rem; -webkit-line-clamp: 2; }
.cap b, .cap span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cap b { color: #e6eaf2; }
/* a fókuszált kártya kiemelkedik: nagyítás, mély puha árnyék, a peremén vékony fehér keret és enyhe fény (a többi nyugodt) */
.card.is-f .pic { box-shadow: 0 0 0 0.25rem #ffffff, 0 1.4rem 2.6rem rgba(0, 0, 0, 0.75); -webkit-transform: scale(1.05); transform: scale(1.05); }
.card.is-f .pic:after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 50%; pointer-events: none;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)); }
.card.is-f .cap, .card.is-f .cap b { color: #ffffff; }
.card.wide { width: 19rem; }
.card.wide .pic { height: 10.7rem; }
.card.wide .cap { height: 4.05rem; }
.cap .left { color: #aab8f5; overflow: visible; text-overflow: clip; }
.tag { position: absolute; right: 0.5rem; top: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 0.5rem; background: rgba(7, 8, 10, 0.85); color: #ffffff; font-size: 1rem; font-weight: 700; }
.tag.ok { background: #48b755; color: #06140a; }
/* a Nézhető most jelvényei (nem az elérhetőség): „3 új” – meg nem nézett részek; „✓ Megnézve” halványan */
.tag.cnt { left: 0.5rem; right: auto; background: #8c9eea; color: #0b0d12; }
.tag.seen { left: 0.5rem; right: auto; background: rgba(7, 8, 10, 0.78); color: #b3b8c3; font-weight: 600; }
.hold-hint { margin: 0 0 0.6rem; display: block; }
.tag.live { left: 0.5rem; right: auto; background: #e6eaf2; color: #0b0d12; }
/* kategória- / műfajcsempe: balra a név és a darabszám, jobbra a kategória első plakátjai egymásra csúsztatva (állandó
színcsík nincs – OLED) */
.tile { position: relative; overflow: hidden; display: inline-block; vertical-align: top; width: 17.8rem; height: 7.6rem; margin-right: 1.2rem;
border-radius: 0.9rem; background: #161922; white-space: normal; -webkit-transition: -webkit-transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tile .tx { position: absolute; left: 1.5rem; top: 1.45rem; right: 8.4rem; }
.tile b { display: block; color: #e6eaf2; font-size: 1.6rem; font-weight: 700; }
.tile span { display: block; margin-top: 0.4rem; color: #828899; font-size: 1.15rem; }
.tile .stack { position: absolute; top: 1.1rem; right: 1.1rem; width: 7.2rem; height: 7rem; }
.tile .stack .im { position: absolute; top: 0; width: 4rem; height: 6rem; border-radius: 0.45rem; background-color: #232733;
box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.6); }
.tile .stack .im:nth-child(1) { right: 3.2rem; top: 0.9rem; }
.tile .stack .im:nth-child(2) { right: 1.6rem; top: 0.45rem; }
.tile .stack .im:nth-child(3) { right: 0; }
.tile .stack .im.on:nth-child(1) { opacity: 0.5; }
.tile .stack .im.on:nth-child(2) { opacity: 0.75; }
.tile.is-f { background: #ffffff; box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.7); -webkit-transform: scale(1.04); transform: scale(1.04); }
.tile.is-f b, .tile.is-f span { color: #0b0d12; }
.lite .tile.is-f { -webkit-transform: none; transform: none; }
.tiles-h { margin-top: 1.6rem; }
.card.more .pic { padding: 1.2rem; background: #12151c; color: #e6eaf2; font-size: 1.4rem; font-weight: 700; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.45rem; background: rgba(255, 255, 255, 0.3); }
.bar b { display: block; height: 100%; background: #8c9eea; }
.grid-row { margin: 0 0 0.6rem -1rem; padding: 1rem 0 0 1rem; white-space: nowrap; }
/* részlista sorai (műsoroldal, letöltések): minden sor egyforma magas (a képé) – a fókusz nem nyitja ki, így a hosszú lista
lépkedéskor nem rendeződik át (a teljes leírás a hosszan nyomott OK párbeszédében) */
.ep { margin: 0 0 0.6rem -1rem; padding: 0.9rem 1rem; border-radius: 1rem; }
.ep.is-f { background: #191c23; box-shadow: 0 0 0 0.25rem #ffffff; }
.ep-pic { position: relative; width: 14rem; height: 7.9rem; margin-right: 1.6rem; border-radius: 0.6rem; overflow: hidden; background: #161922; }
.ep-title { font-size: 1.5rem; font-weight: 700; word-wrap: break-word; overflow-wrap: break-word; }
.ep-sub { margin-top: 0.2rem; color: #aab8f5; font-size: 1.15rem; font-weight: 600; }
.ep-desc { margin-top: 0.3rem; max-height: 3.1rem; color: #9aa0ad; font-size: 1.15rem; line-height: 1.55rem; -webkit-line-clamp: 2; }
.pill { min-width: 13rem; margin-left: 1.6rem; padding: 0.7rem 1.2rem; border-radius: 0.7rem; background: #1d2028; color: #e6eaf2;
font-size: 1.25rem; font-weight: 700; white-space: nowrap; text-align: center; }
.pill.go { background: #2c3454; color: #ffffff; }
.pill.wait { background: #14161c; color: #b3b8c3; }
.ep.is-f .pill { background: #ffffff; color: #0b0d12; }
.ep.is-f .ep-desc { color: #c9cdd6; }
.ep.is-now { background: rgba(140, 158, 234, 0.12); }
.ep.miss .ep-pic, .ep.miss .ep-title { opacity: 0.55; }
.chip.off { color: #828899; background: none; box-shadow: inset 0 0 0 1px rgba(200, 212, 255, 0.14); }
/* műsoroldal */
/* műsoroldal: a műsor képe jobb felül, balra és lefelé elhalványulva (visszafogottan) */
.hero { position: absolute; z-index: -1; right: 0; top: 0; width: 68rem; height: 38.25rem; }
.hero .im { opacity: 0.62; }
.hero i { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
background-image: -webkit-linear-gradient(left, #07080a, rgba(7, 8, 10, 0.55) 40%, rgba(7, 8, 10, 0) 75%), -webkit-linear-gradient(bottom, #07080a 8%, rgba(7, 8, 10, 0) 60%);
background-image: linear-gradient(90deg, #07080a, rgba(7, 8, 10, 0.55) 40%, rgba(7, 8, 10, 0) 75%), linear-gradient(0deg, #07080a 8%, rgba(7, 8, 10, 0) 60%); }
.prog .page { padding: 4.2rem 2.6rem 10rem 5.6rem; }
.head { min-height: 21rem; max-width: 54rem; }
.head h1 { margin-bottom: 1rem; font-size: 3.6rem; letter-spacing: -0.032em; }
.meta { margin: 0 0 1rem; color: #9fa5b2; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em; }
.desc { max-height: 5.9rem; margin: 0 0 1.6rem; color: #c9cdd6; font-size: 1.35rem; line-height: 1.95rem; -webkit-line-clamp: 3; }
.film-state { margin: 0 0 1rem; color: #aab8f5; font-size: 1.25rem; font-weight: 600; }
.seasons { margin-bottom: 0.8rem; }
/* film / önálló videó: a kép a teljes szélességben és magasabban, alatta a teljes leírás, az adatok és a Hasonlók */
.film .hero { left: 0; width: auto; height: 50rem; }
.film .hero .im { opacity: 0.5; }
.film .hero i { background-image: -webkit-linear-gradient(left, #07080a 4%, rgba(7, 8, 10, 0.72) 38%, rgba(7, 8, 10, 0.1) 75%), -webkit-linear-gradient(bottom, #07080a 4%, rgba(7, 8, 10, 0) 55%);
background-image: linear-gradient(90deg, #07080a 4%, rgba(7, 8, 10, 0.72) 38%, rgba(7, 8, 10, 0.1) 75%), linear-gradient(0deg, #07080a 4%, rgba(7, 8, 10, 0) 55%); }
.film .head { min-height: 0; max-width: 62rem; padding-top: 5rem; }
.film .desc.clamp { max-height: 15.6rem; -webkit-line-clamp: 8; }
.facts { margin: 0.4rem 0 2.6rem; }
.fact { display: inline-block; vertical-align: top; margin: 0 3.6rem 1rem 0; }
.fact span { display: block; color: #828899; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.fact b { display: block; margin-top: 0.3rem; color: #dfe3ea; font-size: 1.4rem; font-weight: 600; }
/* belépés */
#login { padding: 4.6rem 7rem; background-image: -webkit-radial-gradient(50% -10%, ellipse, rgba(90, 125, 255, 0.14), rgba(90, 125, 255, 0) 60%);
background-image: radial-gradient(ellipse at 50% -10%, rgba(90, 125, 255, 0.14), rgba(90, 125, 255, 0) 60%); }
/* a lehető legegyszerűbb elrendezés (úsztatás, flex nélkül): a 2016-os Samsung régi WebKitje is ugyanígy rajzolja */
.login-row { margin-top: 3.4rem; overflow: hidden; } /* logó nincs rajta (Levi) */
.qr { float: left; width: 22rem; margin-right: 6rem; color: #b3b8c3; font-size: 1.35rem; text-align: center; }
.login-text { overflow: hidden; }
.qr img { width: 22rem; height: 22rem; margin-bottom: 1.3rem; border-radius: 1.2rem; background: #ffffff; }
.big { margin: 0 0 2.4rem; font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; margin: 0 0 1.6rem; padding-left: 4rem; color: #b3b8c3; font-size: 1.75rem; }
.steps li b { color: #ffffff; }
.steps .n { float: left; margin: 0.1rem 0 0 -4rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #8c9eea; color: #0b0d12;
font-size: 1.4rem; font-weight: 800; line-height: 2.6rem; text-align: center; }
.code { margin: 0.4rem 0 0; color: #ffffff; font-size: 7rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; }
.code.small { font-size: 4.4rem; }
.acc-qr { width: 14rem; height: 14rem; margin-right: 2.4rem; border-radius: 0.8rem; background: #ffffff; }
.login-msg { margin-top: 2.6rem; color: #fde68a; font-size: 1.4rem; }
.login-foot { position: absolute; left: 7rem; right: 7rem; bottom: 3.6rem; color: #828899; font-size: 1.25rem; }
/* keresés: saját billentyűzet (minden tévén ugyanúgy működik) */
.kb { position: absolute; left: 2.6rem; top: 2.8rem; width: 26.2rem; }
.query { height: 4.2rem; margin: 0 0 1.2rem; padding: 0 1.2rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.08); font-size: 1.8rem; font-weight: 700; line-height: 4.2rem; }
.query i { color: #828899; font-style: normal; font-weight: 500; }
.key { display: inline-block; width: 3.9rem; height: 3.9rem; margin: 0 0.4rem 0.4rem 0; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.07);
color: #e6eaf2; font-size: 1.6rem; font-weight: 700; line-height: 3.9rem; text-align: center; vertical-align: top; }
.key.wide { width: 12.6rem; font-size: 1.3rem; }
.key.is-f { background: #ffffff; color: #0b0d12; }
.results { position: absolute; left: 31rem; top: 0; right: 0; bottom: 0; }
.results .page { padding-left: 1rem; }
/* lejátszó: teljes képernyős fekete réteg (a videó saját vezérlői, keret és szürke sáv nélkül) */
#player { background: #000000; z-index: 20; }
#video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000000; object-fit: contain; }
#video::cue { font-size: 2.4rem; line-height: 1.3; color: #ffffff; background: rgba(0, 0, 0, 0.62); }
/* a feliratot a lejátszó rajzolja: a vezérlők fölé emelkedik, amíg azok látszanak (csak transform) */
.p-subs { position: absolute; left: 8%; right: 8%; bottom: 4.5rem; text-align: center; pointer-events: none;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.p-subs span { padding: 0.15em 0.45em; background: rgba(0, 0, 0, 0.62); color: #ffffff; font-size: 2.4rem; line-height: 1.5;
white-space: pre-line; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p-top { position: absolute; left: 0; right: 0; top: 0; padding: 2.6rem 4.5rem 5rem;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); }
.p-top small { display: block; color: #aab8f5; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.p-top b { display: block; margin-top: 0.2rem; font-size: 2.6rem; font-weight: 750; letter-spacing: -0.02em; }
.p-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 6rem 4.5rem 2.2rem;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); }
.rail { position: relative; height: 2.6rem; padding: 0 0.2rem; border-radius: 1rem; }
.line { position: absolute; left: 0; right: 0; top: 50%; height: 0.5rem; margin-top: -0.25rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.28); }
.line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 1rem; background: #8c9eea; background-image: -webkit-linear-gradient(left, #3e63ff, #19c3f0 52%, #a24dff); background-image: linear-gradient(90deg, #3e63ff, #19c3f0 52%, #a24dff); }
.knob { position: absolute; top: 50%; width: 1.7rem; height: 1.7rem; margin: -0.85rem 0 0 -0.85rem; border-radius: 50%; background: #ffffff; }
.rail.is-f .line { height: 0.8rem; margin-top: -0.4rem; }
.rail.is-f .knob { box-shadow: 0 0 0 0.3rem rgba(140, 158, 234, 0.75); }
.times { -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 0.4rem 0 1.4rem; color: #e6eaf2; font-size: 1.35rem; }
.p-btns .btn { margin-bottom: 0; background: rgba(30, 33, 41, 0.86); }
.p-btns .btn.is-f { background: #ffffff; }
.p-hint { margin-top: 1.2rem; color: #9aa0ad; font-size: 1.1rem; }
.p-hint b { display: inline-block; margin: 0 0.3rem 0 1.4rem; padding: 0 0.5rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0.35rem; color: #ffffff; font-weight: 700; }
.p-hint b:first-child { margin-left: 0; }
.center { position: absolute; left: 20%; right: 20%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; }
.badge { display: inline-block; padding: 1.3rem 2.4rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.75); color: #ffffff; font-size: 2rem; font-weight: 700; }
.badge small { display: block; margin-top: 0.4rem; color: #b3b8c3; font-size: 1.3rem; font-weight: 500; }
.flash { position: absolute; top: 50%; width: 8rem; height: 8rem; margin-top: -4rem; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #ffffff;
font-size: 2.2rem; font-weight: 800; line-height: 8rem; text-align: center; }
.flash.l { left: 12rem; }
.flash.r { right: 12rem; }
.p-card { position: absolute; right: 4.5rem; bottom: 4rem; width: 46rem; padding: 2.4rem 2.6rem 1.4rem; border-radius: 1.2rem; background: #121419;
box-shadow: 0 0 0 1px rgba(200, 212, 255, 0.14); }
.has-card .p-bottom { display: none; } /* a kártya (Folytatod? / Következő rész) alatt a vezérlősor nem kell */
.p-card small { display: block; color: #aab8f5; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.p-card h3 { margin: 0.3rem 0 1.6rem; font-size: 1.9rem; font-weight: 700; }
/* a lejátszó oldalpanelje: Részek / Infó, Felirat és hang (a kép jobb oldalán; a videó közben megy tovább) */
.p-panel { position: absolute; z-index: 3; right: 0; top: 0; bottom: 0; width: 60rem; background: rgba(12, 14, 19, 0.97);
box-shadow: -1px 0 0 rgba(200, 212, 255, 0.12); }
.pp-head { position: absolute; left: 0; right: 0; top: 0; height: 7.4rem; padding: 2.6rem 3rem 0 3rem; white-space: nowrap; }
.pp-head .pback { float: right; margin: -0.3rem 0 0; }
.pp-title { display: inline-block; font-size: 1.9rem; font-weight: 700; }
.pp-body { position: absolute; left: 0; right: 0; top: 7.4rem; bottom: 0; }
.p-panel .page { padding: 0.6rem 3rem 6rem 3rem; }
.p-panel h1 { font-size: 2.4rem; }
.p-panel h2 { margin-top: 1.2rem; }
.pp-row { margin: 0.8rem 0 1rem; white-space: normal; }
.pp-row .chip { margin-bottom: 0.8rem; }
.pp-desc { max-height: 15.6rem; -webkit-line-clamp: 8; }
.p-panel .ep-pic { width: 11rem; height: 6.2rem; margin-right: 1.2rem; }
.p-panel .ep-title { font-size: 1.35rem; }
.p-panel .pill { min-width: 9.5rem; margin-left: 1rem; font-size: 1.15rem; }
.p-panel .ep-desc { display: none; }
.p-panel .ep.is-f .ep-desc { display: block; max-height: 1.55rem; -webkit-line-clamp: 1; } /* (egy sor: a kép magasságán belül marad) */
.p-thumb { position: absolute; bottom: 3.4rem; border-radius: 0.5rem; background-color: #000000; background-repeat: no-repeat;
box-shadow: 0 0 0 0.2rem #ffffff; }
.p-thumb b { position: absolute; left: 50%; bottom: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 0.4rem; background: rgba(0, 0, 0, 0.75);
color: #ffffff; font-size: 1.2rem; font-weight: 700; white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
/* párbeszéd, értesítés, töltés */
#dialog { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 40; background: rgba(4, 5, 6, 0.8); }
.dlg { position: absolute; left: 50%; top: 50%; width: 54rem; margin-left: -27rem; padding: 3rem 3rem 2rem; border-radius: 1.4rem; background: #121419;
box-shadow: 0 0 0 1px rgba(200, 212, 255, 0.14); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.dlg h3 { margin: 0 0 0.8rem; font-size: 2rem; }
.dlg p { margin: 0 0 2rem; color: #b3b8c3; font-size: 1.4rem; }
.dlg.wide { width: 70rem; margin-left: -35rem; }
.dlg .text { max-height: 30rem; margin: 0 0 2rem; overflow: hidden; color: #e6eaf2; font-size: 1.5rem; line-height: 2.2rem; white-space: pre-line; }
#toast { position: fixed; left: 50%; bottom: 4rem; z-index: 60; max-width: 70rem; padding: 1.1rem 2rem; border-radius: 1rem; background: #e6eaf2; color: #0b0d12;
font-size: 1.4rem; font-weight: 700; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#toast.err { background: #fecaca; }
#keyhint { position: fixed; left: 0; right: 0; bottom: 1.4rem; z-index: 60; color: #828899; font-size: 1.15rem; text-align: center; }
#notice { padding: 8rem; }
#notice p { max-width: 60rem; color: #b3b8c3; font-size: 1.6rem; }
#notice a { color: #aab8f5; }
.tiny.is-f, .tiny:focus { border-color: #ffffff; color: #ffffff; }
.tiny { margin-top: 4rem; padding: 0.6rem 1.2rem; border: 1px solid rgba(200, 212, 255, 0.2); border-radius: 0.6rem; background: none; color: #828899; font: inherit; font-size: 1.1rem; }
/* mutató-mód (a nyilak egérkurzort mozgatnak, pl. régi Samsung; LG Magic Remote, egér): natív görgetés a transform helyett,
lapozógombok a sorok szélén, Vissza gomb a képernyő sarkában. Az elrendezés ugyanaz, mint gombokkal (a váltás semmit nem
mozdít): ami itt megjelenik, az a tartalom fölött lebeg, a görgetősáv is (overlay) */
.sbox { position: relative; }
.pg { display: none; position: absolute; z-index: 2; top: 1rem; bottom: 1rem; width: 4.4rem; border-radius: 0.8rem; background: rgba(7, 8, 10, 0.85);
color: #ffffff; font-size: 3.4rem; font-weight: 700; text-align: center; }
.pg span { position: absolute; left: 0; right: 0; top: 50%; margin-top: -2.2rem; line-height: 4.4rem; }
.pg.l { left: -1rem; }
.pg.r { right: -2.6rem; }
.rm { display: none; position: absolute; z-index: 2; right: 0.5rem; top: 0.5rem; width: 3.2rem; height: 3.2rem; border-radius: 50%;
background: rgba(7, 8, 10, 0.85); color: #ffffff; font-size: 2rem; font-weight: 700; line-height: 3.2rem; text-align: center; }
.rm:hover { background: #ffffff; color: #0b0d12; }
.pback { display: none; }
/* a műsoroldal / rács Vissza gombja: a képernyő jobb felső sarkában, a lappal nem gördül */
.back-row { position: absolute; z-index: 3; top: 2rem; right: 2.6rem; }
.back-row .btn { margin: 0; }
.pointer .pg, .pointer .card:hover .rm, .pointer .card.is-f .rm { display: block; }
.pointer .pback { display: inline-block; }
.pointer .viewport { overflow-x: hidden; overflow-y: auto; overflow-y: overlay; }
.pointer .strip { overflow-x: auto; overflow-y: hidden; }
.pointer .strip::-webkit-scrollbar { display: none; }
.pointer .viewport::-webkit-scrollbar { width: 0.8rem; }
.pointer .viewport::-webkit-scrollbar-thumb { border-radius: 0.4rem; background: rgba(200, 212, 255, 0.25); }
.pointer .page, .pointer .track { -webkit-transition: none; transition: none; -webkit-transform: none !important; transform: none !important; }
.pointer .dlg .text { overflow-y: auto; }
.p-top .pback { float: right; margin: 0; }
/* mozgás: csak transform és opacity, egy görbe (gyors indulás, lágy megállás), rugózás nélkül */
@-webkit-keyframes tvIn { from { opacity: 0; -webkit-transform: translate3d(0, 1.2rem, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } }
@keyframes tvIn { from { opacity: 0; transform: translate3d(0, 1.2rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@-webkit-keyframes tvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tvFade { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes tvSide { from { opacity: 0; -webkit-transform: translate3d(3rem, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } }
@keyframes tvSide { from { opacity: 0; transform: translate3d(3rem, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@-webkit-keyframes tvPeek { from { opacity: 0; -webkit-transform: translate3d(-4rem, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } }
@keyframes tvPeek { from { opacity: 0; transform: translate3d(-4rem, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@-webkit-keyframes tvDlg { from { opacity: 0; -webkit-transform: translate3d(0, -46%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); } }
@keyframes tvDlg { from { opacity: 0; transform: translate3d(0, -46%, 0); } to { opacity: 1; transform: translate3d(0, -50%, 0); } }
@-webkit-keyframes tvToast { from { opacity: 0; -webkit-transform: translate3d(-50%, 1rem, 0); } to { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); } }
@keyframes tvToast { from { opacity: 0; transform: translate3d(-50%, 1rem, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }
.screen, .p-card { -webkit-animation: tvIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); animation: tvIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#peek .side { -webkit-animation: tvPeek 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); animation: tvPeek 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#player, #pUi, #dialog, #peek, #keyhint { -webkit-animation: tvFade 0.18s ease-out; animation: tvFade 0.18s ease-out; }
.dlg { -webkit-animation: tvDlg 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); animation: tvDlg 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.p-panel { -webkit-animation: tvSide 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); animation: tvSide 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#toast { -webkit-animation: tvToast 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); animation: tvToast 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* nyomva tartott nyíl: a görgetés rövid és egyenletes, hogy a fókusz ne maradjon le a gomb mögött */
.fast .page, .fast .track { -webkit-transition-duration: 0.09s; transition-duration: 0.09s; -webkit-transition-timing-function: linear; transition-timing-function: linear; }
/* takarékos mód (lassú / régi tévé, vagy a rendszer kéri): azonnali görgetés, nagyítás és animáció nélkül */
.lite *, .lite .screen, .lite #player { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }
.lite .card.is-f .pic, .lite .btn.is-f { -webkit-transform: none; transform: none; }
.lite .card.is-f .pic { box-shadow: 0 0 0 0.25rem #ffffff; } /* (régi motoron árnyék és fény nélkül: gyors) */
.lite .card.is-f .pic:after { display: none; }
.lite .tile.is-f { box-shadow: none; }
.lite .track.on, .lite .viewport > .page, .lite .page .block, .lite .page .grid-row { will-change: auto; }
/* betöltés: forgó gyűrű (felirat nélkül) – a lejátszó és a függő indítás közepén (.mid), a képernyőkön a tartalom helyén
(.inl); csak transform, takarékos módban is forog (olcsó, és jelzi, hogy nem fagyott le) */
.spin { width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0.36rem solid rgba(255, 255, 255, 0.14); border-top-color: #e6eaf2;
-webkit-animation: tvSpin 0.85s linear infinite; animation: tvSpin 0.85s linear infinite; }
.spin.mid { position: fixed; left: 50%; top: 50%; z-index: 60; margin: -2.3rem 0 0 -2.3rem; }
.spin.inl { margin: 8rem auto 0; }
.lite .spin { -webkit-animation: tvSpin 1.1s linear infinite !important; animation: tvSpin 1.1s linear infinite !important; }
@-webkit-keyframes tvSpin { to { -webkit-transform: rotate(360deg); } }
@keyframes tvSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }