/* ---------- Keşfet (js/discover.js), Listem's grid and head (app.js pageList), İndirilenler's TV place
   (downloads.js), and the Platformlar strip on Filmler and Diziler; tokens from app.css :root ---------- */
/* Where these pages' content starts: the gutter, and on a TV the safe area's edge (96) plus a ring and a
   lifted card's growth, so a focused card's ring stays inside x 96..1824 (as detail.css --inset). */
:root { --dc-x: var(--gutter); }
html.tv { --dc-x: calc(var(--m) + var(--ring-out) + 8px); }

/* The head: the title, then its line in the italic deck face beside it (under it on a phone). A service
   puts its logo first. */
.dc-head, .list-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 2px; }
.dc-head { margin: calc(96px + env(safe-area-inset-top)) var(--dc-x) 20px; }
.dc-head .page-title, .list-title .page-title { margin: 0; }
.dc-head-logo { align-self: center; width: 56px; height: 56px; border-radius: var(--r2); object-fit: cover; background: var(--panel-2); }
.dc-deck { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-deck); line-height: 1.3; color: var(--ink-2); }

.dc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 var(--dc-x); }
/* Two-way choices (films or series, the sort) sit in one pill; the chosen one is filled. */
.dc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(244, 239, 230, .08); }
.dc-seg .chip { background: none; }
.dc-seg .chip[aria-pressed="true"] { background: var(--ink); color: var(--ink-inv); }
.dc-chip { flex: none; white-space: nowrap; }
a.dc-chip { display: inline-flex; align-items: center; }

/* The filters: on a wide screen their box adds nothing (the sort, Yerli and Türkçe dublajlı sit beside
   films or series; services and genres take a full-width line each, bleeding to the screen's edges). */
.dc-filters { display: contents; }
.dc-filters > .dc-chips { flex: 0 0 calc(100% + 2 * var(--dc-x)); margin: calc(-1 * var(--ring-out)) calc(-1 * var(--dc-x)); padding-top: calc(2px + var(--ring-out)); }
/* Services and genres scroll sideways (touch and remote); the gutter stays inside the scroller. */
.dc-chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 12px var(--dc-x) calc(2px + var(--ring-out)); margin-bottom: calc(-1 * var(--ring-out)); scroll-padding: 0 var(--dc-x); scrollbar-width: none; }
.dc-chips::-webkit-scrollbar { display: none; }
/* A service: its logo and its name; pressed, the pill fills. */
.chip.dc-logo { display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; }
.chip.dc-logo img { width: 32px; height: 32px; border-radius: var(--r1); object-fit: cover; display: block; flex: none; }
.chip.dc-logo[aria-pressed="true"] { background: var(--ink); color: var(--ink-inv); }

/* The grid: posters with their fact line and a title of two lines at most, under the picture on every
   device (the fact first: "Film, 2023"). */
.dc-grid, .list-head ~ .grid { grid-template-columns: repeat(auto-fill, minmax(var(--w-poster), 1fr)); column-gap: var(--card-gap); row-gap: 32px; padding: 16px var(--dc-x) 0; align-items: start; }
.dc-grid .card, .list-head ~ .grid .card { scroll-margin: 120px 0; gap: 0; }
.card-fact { display: block; margin-top: 12px; font-size: var(--fs-detail); font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-grid .card-title, .list-head ~ .grid .card:not(.removable) .card-title { position: static; opacity: 1; padding: 0; margin-top: 2px; background: none; border-radius: 0;
  font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-note { text-align: center; }
/* An empty Listem or İndirilenler: its one way on sits clear of the text (a ring drew over it). */
.list-head ~ .grid .empty .btn, .dl-empty .btn { margin-top: 18px; }
.dc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 18px var(--dc-x) 0; }

/* ---- the front: Platformlar, the doors, the genres ---- */
.dc-land { --tile-w: 400px; --tile-pad: 20px; --tile-mark: 48px; --tile-name: 24px; --tile-gap: 14px; --strip-gap: 14px; --strip-p: 110px;
  padding-bottom: 24px; }
.dc-row { margin-top: 40px; }
.dc-row:first-child { margin-top: 8px; }
.dc-row-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; margin: 0 var(--dc-x) 4px; }
.dc-row .dc-row-head h2 { margin: 0; }
.dc-row-sub { margin: 0; font-size: var(--fs-detail); font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.dc-row .track { gap: var(--card-gap); padding-left: var(--dc-x); padding-right: var(--dc-x); scroll-padding: 0 var(--dc-x); }
/* A tile: the brand's colour, its logo and name over three of its posters (w185, 2:3). */
.card.dc-tile { flex: 0 0 var(--tile-w); }
.dc-art { position: relative; display: block; border-radius: var(--r2); overflow: hidden; background: var(--panel-2); }
.dc-tile .dc-art { display: flex; flex-direction: column; gap: var(--tile-gap); padding: var(--tile-pad); background: var(--tint, var(--panel-2)); }
.dc-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dc-mark { flex: none; width: var(--tile-mark); height: var(--tile-mark); border-radius: var(--r2); object-fit: cover; background: var(--bg); }
.dc-mark.none { display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; font-size: calc(var(--tile-mark) * .38); letter-spacing: .06em; }
.dc-brand-t { display: flex; flex-direction: column; min-width: 0; }
.dc-name { font-family: var(--serif); font-weight: 500; font-size: var(--tile-name); line-height: 1.15; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sub { margin-top: 2px; font-size: var(--fs-detail); font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-strip { display: flex; gap: var(--strip-gap); }
.dc-strip-p { flex: none; width: var(--strip-p); height: calc(var(--strip-p) * 1.5); border-radius: var(--r1); overflow: hidden; background: rgba(244, 239, 230, .08); }
.dc-strip-p img, .dc-door-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Each service's own colour, dark enough for ink on it. */
.dc-tile[data-svc="netflix"] { --tint: #2c0c0f; }
.dc-tile[data-svc="disney"] { --tint: #0f1a3a; }
.dc-tile[data-svc="prime"] { --tint: #0b2230; }
.dc-tile[data-svc="apple"] { --tint: #232225; }
.dc-tile[data-svc="hbo"] { --tint: #1d1238; }
.dc-tile[data-svc="tod"] { --tint: #261238; }
.dc-tile[data-svc="tvplus"] { --tint: #2b2410; }
.dc-tile[data-svc="dijital"] { --tint: #2e1c16; }
/* A door: one picture, its name in the title face on a shade dark enough to read over any picture. */
.dc-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); padding: 12px var(--dc-x) 0; }
.dc-doors.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card.dc-door { flex: none; }
.dc-door .dc-art { height: var(--door-h, 174px); }
.dc-door-pic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.dc-door-pic::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(0deg, rgba(18, 16, 14, .94) 0%, rgba(18, 16, 14, .62) 38%, rgba(18, 16, 14, .08) 78%),
    linear-gradient(90deg, rgba(18, 16, 14, .55) 0%, rgba(18, 16, 14, 0) 60%); }
.dc-door-name { position: absolute; left: var(--tile-pad); right: var(--tile-pad); bottom: calc(var(--tile-pad) - 4px); font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-row); line-height: 1.15; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-genre-chips { flex-wrap: wrap; overflow: visible; padding-top: 12px; }
/* Tiles and doors take the cream ring on their picture; off the TV they lift like any card. */
.card.dc-tile:focus-visible, .card.dc-door:focus-visible { box-shadow: none; }
.dc-tile:focus-visible .dc-art, .dc-door:focus-visible .dc-art { box-shadow: var(--focus-art); }

/* Platformlar on Filmler and Diziler: a wide tile per service, its logo over its name. */
.card.service { flex-basis: calc(var(--card) * 1.3); }
.card.service .poster { aspect-ratio: 16/9; display: grid; place-content: center; justify-items: center; gap: 8px; }
.card.service img { width: clamp(40px, 28%, 64px); height: auto; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.service-name { font-weight: 700; font-size: .9rem; color: var(--ink); }

/* ---- TV (1920 x 1080): the §1.12 TV column, everything inside the safe area ---- */
html.tv .dc-head, html.tv .list-head { margin-top: 140px; }
html.tv .dc-head .page-title, html.tv .list-title .page-title { margin: 0; }
html.tv .list-head { margin-left: var(--dc-x); margin-right: var(--dc-x); }
html.tv .dc-head-logo { width: 80px; height: 80px; }
html.tv .chip.dc-chip, html.tv .dc-seg .chip, html.tv .list-bar .chip { min-height: 60px; padding: 0 24px; font-size: 28px; }
html.tv .dc-chips { gap: 12px; }
html.tv .chip.dc-logo { padding: 0 20px 0 8px; gap: 10px; }
html.tv .chip.dc-logo img { width: 44px; height: 44px; }
/* Sideways strips clip at the safe area's edges (x 96..1824) and pad by a ring inside them. */
html.tv .dc-filters > .dc-chips { flex-basis: calc(100% + 2 * (var(--dc-x) - var(--m))); margin-left: calc(var(--m) - var(--dc-x)); margin-right: calc(var(--m) - var(--dc-x)); }
html.tv .dc-chips, html.tv .dc-row .track { padding-left: calc(var(--dc-x) - var(--m)); padding-right: calc(var(--dc-x) - var(--m)); scroll-padding: 0 calc(var(--dc-x) - var(--m)); }
html.tv .dc-row .track { margin-left: var(--m); margin-right: var(--m); }
html.tv .dc-genre-chips { margin: 0 var(--m); }
/* Six posters across: 6 x 254 and five 34 px gaps fill x 114..1806. */
html.tv .dc-grid, html.tv .list-head ~ .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 34px; row-gap: 44px; }
html.tv .dc-grid .card, html.tv .list-head ~ .grid .card { scroll-margin: 150px 0 90px; }
/* The front: Platformlar's tiles (three and the next one's edge), then four doors, on one screen. */
html.tv .dc-land { --tile-w: 500px; --tile-pad: 28px; --tile-mark: 64px; --tile-name: 36px; --tile-gap: 18px; --strip-gap: 30px; --strip-p: 128px; --door-h: 200px; }
html.tv .dc-row { margin-top: 36px; }
html.tv .dc-row:first-child { margin-top: 10px; }
html.tv .dc-row-sub { font-size: var(--fs-tv-min); }
html.tv .dc-row.dc-genres { margin-top: 64px; }   /* starts under the band: no sliver of its heading at rest */
/* A TV lifts no tile or door (a 500 px tile would grow past the safe area): the ring alone. */
html.tv .card.dc-tile:focus-visible, html.tv .card.dc-door:focus-visible { transform: none; }
/* The last row scrolls clear of the band below. */
html.tv .dc-foot, html.tv .list-head ~ .grid, html.tv .dl-page .dl-list { padding-bottom: 80px; }
/* An empty page reads from the couch: the TV's body and detail sizes, the button clear of the text. */
html.tv .list-head ~ .grid .empty p, html.tv .dl-empty p { font-size: var(--fs-detail); }
html.tv .list-head ~ .grid .empty > p:first-child, html.tv .dl-empty > p:first-child { font-size: var(--fs-body); }
/* İndirilenler: the list at the safe area's edge too. */
html.tv .dl-page .page-title, html.tv .dl-page .dl-summary { margin-left: var(--dc-x); margin-right: var(--dc-x); }
html.tv .dl-page .page-title { margin-top: 140px; }
html.tv .dl-page .dl-list { padding-left: var(--dc-x); padding-right: var(--dc-x); }
/* Below y 1026 nothing shows: a band of the page's colour under these pages, as the top bar is over them
   once they scroll (a TV crops its edges; a card half under the screen's edge reads as broken). */
html.tv main.dc-page::after, html.tv .list-head ~ .grid::after, html.tv .dl-page::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 54px; z-index: 15; background: var(--bg); pointer-events: none; }

@media (hover: hover) {
  .chip.dc-logo:hover { color: var(--ink); }
}
@media (max-width: 720px) {
  /* A phone: films or series on one line, then every filter in one sideways scroller (five stacked
     rows of controls pushed the first poster below half the screen). */
  .dc-head { align-items: center; column-gap: 14px; margin-top: calc(84px + env(safe-area-inset-top)); }
  .dc-head-logo { width: 44px; height: 44px; }
  .dc-deck { flex-basis: 100%; margin-top: 4px; }
  .list-title { display: block; }
  .dc-bar { display: block; }
  .dc-filters { display: flex; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; margin: 10px calc(-1 * var(--dc-x)) 0;
    padding: 2px var(--dc-x); scroll-padding: 0 var(--dc-x); scrollbar-width: none; }
  .dc-filters::-webkit-scrollbar { display: none; }
  .dc-filters > * { flex: none; }
  .dc-filters > .dc-chips { flex: none; margin: 0; padding: 0; overflow: visible; }
  .chip.dc-logo { padding-right: 14px; }
  .dc-grid, .list-head ~ .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 22px; }   /* three posters across on a 360 px phone */
  .card-fact { margin-top: 8px; font-size: 13px; }
  .dc-grid .card-title, .list-head ~ .grid .card:not(.removable) .card-title { font-size: 15px; }
  .dc-land { --tile-w: 280px; --tile-pad: 16px; --tile-mark: 40px; --tile-name: 20px; --tile-gap: 12px; --strip-gap: 10px; --strip-p: 76px; }
  .dc-row { margin-top: 32px; }
  .dc-doors, .dc-doors.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dc-doors.n3 .dc-door:last-child { grid-column: 1 / -1; }
  .dc-door .dc-art { height: 100px; }
  .dc-door-name { font-size: 20px; white-space: normal; }
}

/* ---------- Home's rows, search and the detail page's extras (js/app.js) ---------- */
/* Senin için: why a title is there, one muted line under its card (width 0 and min-width 100%: a
   long seed title is cut, never widens the card). Only the seed's title is cut; the words around it
   ("gibi", "Like") stay whole, their spaces kept (pre). */
.card-why { display: flex; width: 0; min-width: 100%; padding: 0 2px; color: var(--muted); font-size: .8rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.card-why .why-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-why .why-fixed { flex: none; white-space: pre; }
/* "Tümü" ends a linked row for remotes and keyboards: a poster-sized tile. */
.card.more-tile .poster { display: grid; place-items: center; color: var(--ink); font-weight: 700; font-size: 1.05rem; }
/* A chip in a row's head that is a link (Senin için's "Önerileri ayarla"). */
.row-head a.chip { display: inline-flex; align-items: center; text-decoration: none; }
/* A typo's results: their heading, then the link that searches the words as typed. */
.search-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px var(--gutter) 2px; }
.search-fix .sub-head { margin: 0; color: var(--ink); }
/* An episode and its İzlendi check, its own stop one Right away; filled once watched. A long press
   offers "Buraya kadar izledim": no callout or text selection under the finger. */
.episode-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ep-seen { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(244, 239, 230, .08); color: var(--muted); }
.ep-seen .icon { width: 20px; height: 20px; stroke-width: 3; }
.ep-seen[aria-pressed="true"] { background: var(--good); color: var(--ink-inv); }
/* A one-question dialog (askTo): the action and Vazgeç. */
.ask-dialog { width: min(420px, 92vw); margin: auto; border: 0; padding: 24px; color: var(--ink); background: var(--panel); border-radius: 16px; }
.ask-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.ask-dialog h2 { margin: 0 0 16px; font-size: 1.15rem; }