/* ---------- Home (js/home.js): round 4 S1a, the lite layout on every device ----------
   The hero as a decision, Bu akşam, Kaldığın yerden's when-lines, and on a TV the rows at a fixed
   height under a hero that describes the card the remote rests on (design-language §1.12
   tvHomeRowsY lite: 600, posters 480). The title block a title's page shares stays in app.css. */
.hero-none { height: 80px; }

/* ----- the hero: why this title, what it is, what pressing plays ----- */
.hero.decide { display: block; min-height: 0; height: 540px; padding: 0; overflow: hidden; }
.hero.decide .hero-art { position: absolute; top: 0; right: 0; width: 74%; height: 100%; background: var(--bg); }
.hero-art img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Words sit on the dark left and bottom edges: the picture fades into the page there, no mask. */
.hero-art::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(18, 16, 14, .82) 20%, rgba(18, 16, 14, .3) 46%, rgba(18, 16, 14, 0) 62%),
    linear-gradient(0deg, var(--bg) 0%, rgba(18, 16, 14, .6) 22%, rgba(18, 16, 14, 0) 48%); }
.hero.decide .hero-body { position: absolute; left: var(--m); bottom: 28px; width: min(720px, 58%); max-width: none; }
/* The eyebrow (and its "new" dot) is the title page's (detail.css): Home adds wrapping and room under it. */
.hero.decide .eyebrow, .hero-cap .eyebrow { flex-wrap: wrap; line-height: 1.3; margin-bottom: 8px; }
.eyebrow .cert { color: var(--ink-2); border-color: var(--ink-3); font-size: .78em; font-weight: 700; padding: 0 .4em; line-height: 1.5; }
.hero.decide h1 { font-size: var(--fs-title); margin: 0 0 4px; }
.hero.decide .title.has-logo { margin-bottom: 12px; }
.hero.decide .title .logo { width: min(100%, 440px); height: 120px; }
/* One sentence of the synopsis: the decision, not the summary (the title's page has all of it). */
.hero.decide .deck { margin: 0; max-width: 34em; font-size: var(--fs-body); line-height: 1.4; color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero.decide .row-btns { margin-top: 22px; gap: 14px; flex-wrap: nowrap; }
.hero.decide .btn { min-height: var(--h-btn); padding: 0 1.2em; border-radius: 999px; font-size: var(--fs-button); line-height: 1.2; background: rgba(244, 239, 230, .14); white-space: nowrap; }
.hero.decide .btn.primary { padding: 6px 1.5em 6px 1.1em; background: var(--ink); color: var(--ink-inv); }
.hero.decide .btn.primary:focus-visible { background: var(--focus-c); }
.btn-words { display: flex; flex-direction: column; align-items: flex-start; }
.btn-sub { font-size: .8em; font-weight: 500; opacity: .78; font-variant-numeric: tabular-nums; }

/* ----- rows: Home's own measure (§1.12 margin, card gap, row gap, wide card, poster) ----- */
.page.home .row { margin-top: var(--row-gap); }
.page.home > .hero.decide + .row { margin-top: 20px; }
.page.home .row h2 { margin: 0 var(--m) 14px; }
.page.home .row-head { margin: 0 var(--m) 14px; }
.page.home .row-head h2 { margin: 0; }
.page.home .row.tonight .row-head { align-items: baseline; gap: 20px; }
.row-note { color: var(--ink-2); font-size: var(--fs-detail); font-weight: 500; font-variant-numeric: tabular-nums; }
.page.home .track { gap: var(--card-gap); padding-left: var(--m); padding-right: var(--m); scroll-padding: 0 var(--m); }
.page.home .card { flex: 0 0 var(--w-poster); width: var(--w-poster); min-width: 0; gap: 0; }
.page.home .card.wide { flex: 0 0 var(--w-wide); width: var(--w-wide); }
.page.home .card .poster { border-radius: var(--r2); }
.page.home .card.wide .poster { height: calc(var(--w-wide) * .5625); padding-top: 0; }
.page.home .card:not(.wide) .poster { height: calc(var(--w-poster) * 1.5); padding-top: 0; }
.page.home .card .poster img { position: absolute; top: 0; left: 0; }
/* A wide card's placeholder holds the room of the words under it too (title and line): no shift when
   the row fills. */
.page.home .card.skel.wide::after { content: ""; display: block; height: calc(18px + 1.25 * var(--fs-button) + 1.3 * var(--fs-detail)); }
/* Wide cards: the words under the picture, on every device (name, then what and when). */
.page.home .card.wide .card-title { position: static; opacity: 1; background: none; padding: 0; margin-top: 14px; border-radius: 0;
  font-size: var(--fs-button); font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.card-eyebrow { margin-top: 12px; font-size: var(--fs-detail); font-weight: 600; line-height: 1.3; color: var(--ink-3); }
.card-eyebrow + .card-title { margin-top: 2px !important; }
.card-sub { margin-top: 4px; font-size: var(--fs-detail); line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* On the picture: how much is left (or "Sıradaki bölüm") over a shade, then the bar. */
.page.home .card.wide .poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 9, 8, .82), rgba(10, 9, 8, 0)); opacity: 0; }
.page.home .card.wide .poster.shaded::after { opacity: 1; }
/* No text-shadow: the shade under it carries the contrast, and a blurred shadow repaints with every lift. */
.in-art { position: absolute; left: 14px; right: 14px; bottom: 20px; z-index: 1; font-size: var(--fs-detail); font-weight: 700; line-height: 1.2; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.page.home .card.wide .bar { left: 14px; right: 14px; bottom: 10px; height: 4px; z-index: 1; background: rgba(244, 239, 230, .3); }
.page.home .card.wide .bar > span { background: var(--ink); }
.page.home .card.wide .bar.live > span { background: var(--live); }

/* ----- Bu akşam's tiles: one chip rule, the channel's plate top left, CANLI top right ----- */
.chip-new, .chip-live { position: absolute; top: 12px; z-index: 2; padding: 3px 9px 2px; border-radius: var(--r1); font-size: var(--fs-detail); font-weight: 700; line-height: 1.25; }
.chip-new { left: 12px; background: var(--new); color: var(--ink-inv); }
.chip-live { right: 12px; background: var(--red); color: #fff; letter-spacing: .06em; }
.hero-cap .chip-live, .eyebrow .chip-live { position: static; font-size: .85em; }
.plate { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; height: 40px; padding: 4px 10px 4px 4px; border-radius: var(--r1);
  background: var(--panel-1); color: var(--ink); font-weight: 700; font-size: var(--fs-detail); font-variant-numeric: tabular-nums; }
.plate .lv-logo { width: 54px; height: 32px; border-radius: 4px; }
.plate b { font-weight: 700; }
.tile-match .pitch, .tile-news .tint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.tile-match .pitch { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 30px;
  background: radial-gradient(ellipse at 50% 120%, rgba(60, 207, 142, .18), rgba(60, 207, 142, 0) 60%), linear-gradient(180deg, #1d3426, var(--cat-spor)); }
.tile-match .pitch b { font-family: var(--serif); font-weight: 500; font-size: calc(var(--fs-title) * .8); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tile-match .pitch span { margin-top: 2px; font-size: var(--fs-detail); color: var(--ink-2); }
.tile-news .tint { background: radial-gradient(ellipse at 70% 0%, rgba(120, 150, 200, .22), rgba(120, 150, 200, 0) 55%), linear-gradient(180deg, #223047, var(--cat-haber)); }
/* Match and channel tiles don't lift (§1.12 focus noScale): the ring says where the remote is. */
.page.home .card.tile-live:focus-visible { transform: none; }
.page.home .lv-cart .lv-badge { left: auto; right: 8px; }

/* ----- desktop: the rows start under the hero, the first row's words above the fold ----- */
@media (min-width: 721px) {
  html:not(.tv) .hero.decide { height: 540px; }
}

/* ----- phone: a shorter hero, so the first Bu akşam card shows above the tab bar ----- */
@media (max-width: 720px) {
  html:not(.tv) .hero.decide { height: auto; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: calc(84px + env(safe-area-inset-top)) var(--m) 4px; }
  html:not(.tv) .hero.decide .hero-art { width: 100%; height: 330px; }
  html:not(.tv) .hero-art::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(18, 16, 14, .55) 40%, rgba(18, 16, 14, 0) 75%); }
  html:not(.tv) .hero.decide .hero-body { position: relative; left: auto; bottom: auto; width: auto; }
  html:not(.tv) .hero.decide .title .logo { height: 84px; width: min(100%, 300px); }
  /* Side by side while the label fits; a long one ("Devam et: 3. Sezon 30. Bölüm") takes the line and
     the second button goes under it, full width. */
  html:not(.tv) .hero.decide .row-btns { margin-top: 16px; gap: 10px; flex-wrap: wrap; }
  html:not(.tv) .hero.decide .btn { flex: 1 1 auto; justify-content: center; padding: 0 1em; }
  html:not(.tv) .hero.decide .btn.primary { min-width: 0; justify-content: flex-start; padding: 6px 1.2em 6px .9em; }
  html:not(.tv) .hero.decide .btn-words { min-width: 0; }
  html:not(.tv) .hero.decide .btn-words > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .page.home > .hero.decide + .row { margin-top: 18px; }
}

/* ----- TV: the shelf (home.js shelf). The hero is fixed; the row the remote is on puts its heading
   at y 600 (posters 480); the rows above it go under the opaque shade, which moves up 120 px for a row
   of posters (a transform: nothing repaints). Words and picture change 400 ms after the last key. ----- */
html.tv .page.home.tv-shelf { padding-top: 460px; padding-bottom: 520px; }
html.tv .tv-shelf > .hero.decide { position: fixed; top: 0; left: 0; right: 0; height: 590px; z-index: 6; overflow: visible; background: none; }
html.tv .tv-shelf > .shelf-shade { position: fixed; top: 0; left: 0; right: 0; height: 590px; z-index: 5; background: var(--bg); will-change: transform; }
html.tv .tv-shelf > .shelf-shade.at-poster { transform: translateY(-120px); }
/* One row shows at a time: 140 px between rows puts the next one's heading below the screen (a cut
   line of text there would sit outside y 1026, the overscan edge), at no cost. */
html.tv .page.home.tv-shelf .row { margin-top: 140px; }
/* While keys come, picture and words dim to .35 under one dark scrim, a layer of its own (home.js
   shelf): a composite. At the rest the hero repaints once and the scrim fades out over 200 ms. */
html.tv .tv-shelf .hero-art { width: 1500px; height: 470px; }
html.tv .tv-shelf .hero-art.none img { visibility: hidden; }
.hero-dim { position: absolute; top: 0; left: 0; right: 0; height: 470px; background: var(--bg); opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 200ms var(--ease-out); }
.hero-dim.dim { opacity: .65; transition: none; }
/* At rest the words sit low, their button 80 px over the first row; the hero's own words and the
   card's (the caption, from y 150) never show together. */
html.tv .tv-shelf .hero-body { left: var(--m); top: auto; bottom: 70px; width: 1100px; }
html.tv .tv-shelf > .hero.browsing .hero-body { opacity: 0; }
html.tv .tv-shelf .hero.decide .deck { -webkit-line-clamp: 1; }
/* The card's words: in the hero, shown while a row has the remote. */
.hero-cap { display: none; }
html.tv .tv-shelf > .hero.browsing .hero-cap { display: block; position: absolute; left: var(--m); top: 150px; width: 1180px; }
.hero-cap .cap-title { font-family: var(--serif); font-weight: 500; font-size: 80px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-cap .cap-title.has-logo { line-height: 0; margin-bottom: 14px; }
.hero-cap .cap-title .logo { display: block; height: 120px; width: auto; max-width: 520px; object-fit: contain; object-position: left bottom; }
.hero-cap .deck { margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.hero-cap .facts { margin: 10px 0 0; font-size: var(--fs-detail); line-height: 1.3; color: var(--ink-2); white-space: pre; font-variant-numeric: tabular-nums; }
.hero-cap .ok { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: var(--fs-detail); font-weight: 600; line-height: 1.3; }
.hero-cap .ok kbd { padding: 2px 8px; border: 2px solid var(--ink); border-radius: var(--r1); font: inherit; font-weight: 700; font-size: .85em; }
.hero-cap.at-poster .ok { display: none; }
/* The cards: the hero says their names on a TV, so posters show the picture alone (names kept for
   screen readers); the words under a wide card stay. */
html.tv .tv-shelf .card:not(.wide) .card-title, html.tv .tv-shelf .card:not(.wide) .card-why {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 1; }
html.tv .tv-shelf .card-eyebrow { display: none; }
/* The top bar stays a scrim over the hero's picture when the page moves under it. */
html.tv .topbar.shelf.scrolled { background-color: transparent; }
html.tv .topbar.shelf.scrolled::after { opacity: 0; }