/* ---------- Keşfet (js/discover.js) and Home's Platformlar strip; 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; }

/* Services and genres scroll sideways (touch and remote); the gutter stays inside the scroller. */
.dc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gutter) 2px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.dc-chips::-webkit-scrollbar { display: none; }
/* Service logos: square tiles; the chosen one gets a ring, the rest step back. */
.chip.dc-logo { display: grid; place-items: center; width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--panel); }
.chip.dc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .7; transition: opacity .15s ease; }
.chip.dc-logo[aria-pressed="true"] { background: var(--panel); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px 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; justify-content: center; padding: 18px var(--gutter) 0; }

/* Platformlar on Home: 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) {
  .dc-bar { gap: 8px; }
  .chip.dc-logo { width: 46px; height: 46px; min-height: 0; }
  .dc-grid { --card: 96px; gap: 10px; }   /* three posters across on a 360 px phone */
}