/* ---------- Keşfet (js/discover.js) and the Platformlar strip on Filmler and Diziler; tokens from app.css :root ---------- */
.dc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 var(--gutter); }
/* 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(246, 244, 240, .08); }
.dc-seg .chip { background: none; }
.dc-seg .chip[aria-pressed="true"] { background: var(--ink); color: #111; }
.dc-chip { flex: none; white-space: nowrap; }

/* 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(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding-top: 2px; }
/* 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(--gutter) 2px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.dc-chips::-webkit-scrollbar { display: none; }
/* Service logos: one tile for all (each brand's own colour stays inside it); the chosen one fills
   white, the rest step back. */
.chip.dc-logo { display: grid; place-items: center; width: 52px; height: 52px; min-height: 0; padding: 6px; border-radius: 12px; overflow: hidden; background: rgba(246, 244, 240, .1); }
.chip.dc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; opacity: .7; transition: opacity .15s ease; }
.chip.dc-logo[aria-pressed="true"] { background: var(--ink); }
.chip.dc-logo[aria-pressed="true"] img, .chip.dc-logo:focus-visible img { opacity: 1; }
.chip.dc-logo:focus-visible { border-radius: 12px; }

.dc-grid { padding-top: 16px; }
.dc-grid .card { scroll-margin: 120px 0; }
.dc-note { text-align: center; }
.dc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 18px var(--gutter) 0; }

/* 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); }

@media (hover: hover) {
  .chip.dc-logo:hover img { opacity: 1; }
}
@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-bar { display: block; }
  .dc-filters { display: flex; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; margin: 10px calc(-1 * var(--gutter)) 0;
    padding: 2px var(--gutter); scroll-padding: 0 var(--gutter); 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 { width: 46px; height: 46px; min-height: 0; padding: 5px; }
  .dc-grid { --card: 96px; gap: 10px; }   /* three posters across on a 360 px phone */
}

/* ---------- 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(246, 244, 240, .08); color: var(--muted); }
.ep-seen .icon { width: 20px; height: 20px; stroke-width: 3; }
.ep-seen[aria-pressed="true"] { background: var(--good); color: #111; }
/* 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; }