@font-face { font-family: "Manrope"; src: url("/assets/Manrope.woff2") format("woff2"), url("/assets/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #0b0809; --bg2: #161015; --panel: #1c1419; --line: rgba(246, 244, 240, .12);
  --ink: #f6f4f0; --muted: #b3a6ab; --red: #b8234b; --red-2: #ff7f98; --good: #3ccf8e; --warn: #f5b841;
  /* Side gutters clear a landscape iPhone's notch (viewport-fit=cover). */
  --radius: 10px; --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right)); --card: clamp(118px, 13vw, 200px);
  --focus: 0 0 0 3px var(--ink), 0 0 0 6px var(--red);
  /* Artwork takes focus as light (docs/design.md): a white edge, a soft glow, a shadow under the lift. */
  --focus-art: 0 0 0 3px var(--ink), 0 0 26px rgba(246, 244, 240, .32), 0 14px 32px rgba(0, 0, 0, .6);
  /* Motion (docs/motion.md): strong curves; the built-in ones are too weak. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* 10-foot step (docs/design.md): TV browsers at 1600px+ scale every rem by 1.25 (16 -> 20px base).
   html.tv comes from the user agent (ui.js) for TV browsers that report a fine pointer. */
@media (min-width: 1600px) and (pointer: none), (min-width: 1600px) and (pointer: coarse) { html { font-size: 125%; } }
@media (min-width: 1600px) { html.tv { font-size: 125%; } }
/* A big screen with no hover (Android TV and Fire TV browsers, casting sticks) is a couch screen too;
   desktops always hover, so their type stays put. */
@media (min-width: 1800px) and (hover: none) { html { font-size: 125%; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
:focus { outline: none; }
:focus-visible, .episode:focus, .profile:focus { box-shadow: var(--focus); border-radius: var(--radius); }

/* ---------- icons (js/icons.js: 24px grid, 1.5px stroke, currentColor) ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.icon.solid { fill: currentColor; }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .7em 1.4em; border-radius: 8px; background: rgba(246, 244, 240, .16); font-weight: 700; font-size: 1rem; transition: background .15s, transform 160ms var(--ease-out); }
.btn:focus-visible { background: rgba(246, 244, 240, .28); }
.btn.primary { background: var(--ink); color: #111; }
.btn.primary:focus-visible { background: #fff; }
.btn .icon { margin-left: -.2em; }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
/* A detail page's rating choices (app.js): wraps like .row-btns, every choice a full target. */
.rate-group { display: flex; flex-wrap: wrap; gap: 12px; }
.rate-group > * { min-height: 44px; min-width: 44px; }
.field { width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font: inherit; font-size: 1.05rem; }
.field:focus { border-color: var(--ink); }
.field.pin { text-align: center; letter-spacing: .5em; font-size: 1.6rem; }
/* The access code: letters, spaced like a ticket code; the typed text is shown upper-case. */
.field.code { text-align: center; letter-spacing: .32em; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; }
.gate-hello { margin: 18px 0 22px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; text-align: center; }
.gate .btn:disabled { opacity: .7; cursor: progress; }
/* Seen once per device, so it can take half a second: the screen settles in, top to bottom. */
.gate-screen > * { animation: gate-rise 560ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.gate-screen > :nth-child(2) { animation-delay: 70ms; }
.gate-screen > :nth-child(3) { animation-delay: 140ms; }
@keyframes gate-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .gate-screen > * { animation: gate-fade 300ms ease both; }
  @keyframes gate-fade { from { opacity: 0; } }
}
.field-label { font-weight: 700; font-size: .9rem; color: var(--ink); text-align: left; justify-self: start; }
.msg { min-height: 1.2em; color: var(--red-2); margin: 10px 0 0; }

/* ---------- gate / profiles ---------- */
.center-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 28px; padding: var(--gutter); text-align: center;
  background: radial-gradient(1200px 600px at 50% 110%, rgba(112, 14, 48, .5), transparent 60%), var(--bg); }
/* Wordmark "HD Tuana": blackletter paths (the #wordmark symbol in index.html, scripts/brand-art.py),
   sized by font-size like the text logo it replaced, so every layout keeps its measures. */
.brand-mark { display: inline-flex; align-items: center; font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--ink); line-height: 1; }
.brand-mark .wm { display: block; height: 1.05em; width: calc(1.05em * 837 / 179); overflow: visible; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-mark.big { font-size: clamp(2.6rem, 9vw, 4.2rem); }
.brand-mark.small { font-size: 1.45rem; }
@media (max-width: 720px) { .brand-mark.small { font-size: 1.15rem; } }
.gate { width: min(380px, 90vw); display: grid; gap: 10px; }
.gate p { color: var(--muted); margin: 0 0 8px; }
.gate .btn { justify-content: center; margin-top: 6px; }
.center-screen h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; font-weight: 700; }
/* TV pairing: the code is read from across the room. */
.gate.pair { width: min(560px, 90vw); }
.center-screen .pair-title { font-size: clamp(1.4rem, 3vw, 2rem); }
.pair-code { margin: 8px 0 16px; font-size: clamp(2.6rem, 8vw, 4.5rem); font-weight: 800; letter-spacing: .12em; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.gate p.pair-code { color: var(--ink); }
.gate p.pair-code.waiting { color: var(--muted); opacity: .5; }
.gate.pair .msg { margin: 0; }
.profiles { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; justify-content: center; }
.profile { display: grid; gap: 12px; justify-items: center; color: var(--muted); font-size: 1.1rem; padding: 8px; border-radius: 14px; transition: color .15s, transform 200ms var(--ease-out); }
.profile img { width: clamp(96px, 12vw, 160px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.profile:focus-visible { color: var(--ink); transform: scale(1.05); }

/* PIN: native <dialog> (modal, inert background, Escape closes). */
.pin-dialog { width: min(360px, 92vw); margin: auto; border: 0; color: var(--ink); background: var(--panel); border-radius: 16px; padding: 28px; }
.pin-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pin-dialog form { display: grid; gap: 12px; justify-items: center; }
.pin-dialog h2 { margin: 0; }
.pin-dialog .field-label { justify-self: center; color: var(--muted); font-weight: 600; }
.pin-dialog .row-btns { margin-top: 6px; }
.modal-avatar { width: 88px; height: 88px; border-radius: 50%; }

/* ---------- top bar ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: clamp(12px, 2.5vw, 36px); padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px;
  background: linear-gradient(180deg, rgba(11, 8, 9, .92), rgba(11, 8, 9, 0)); transition: background-color .2s; }
.topbar.scrolled { background-color: rgba(11, 8, 9, .96); }
.brand { display: inline-flex; }
.topbar nav { display: flex; gap: clamp(10px, 2vw, 26px); overflow-x: auto; scrollbar-width: none; }
.topbar nav a { color: var(--muted); font-weight: 600; white-space: nowrap; padding: 10px 2px; }
.topbar nav a.active { color: var(--ink); }
/* Tablets (iPad portrait, small laptops): all six sections fit on one line, none cut off. */
@media (min-width: 721px) and (max-width: 1100px) {
  .topbar nav { gap: 10px; }
  .topbar nav a { font-size: .9rem; }
  .brand-mark.small { font-size: 1.25rem; }
}
@media (min-width: 721px) and (max-width: 820px) {
  .topbar { gap: 10px; }
  .topbar nav { gap: 7px; }
  .topbar nav a { font-size: .85rem; }
}
.nav-icon { display: none; }
.spacer { flex: 1; }
.icon-link { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.2rem; color: var(--muted); }
.icon-link.active { color: var(--ink); }
.back-link { margin-left: -10px; color: var(--ink); }
.me { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.me img { width: 34px; height: 34px; border-radius: 50%; display: block; }

/* ---------- hero & detail ---------- */
.page { padding-bottom: 64px; }
.hero, .detail { position: relative; min-height: min(78vh, 760px); display: flex; align-items: flex-end; padding: calc(120px + env(safe-area-inset-top)) var(--gutter) 48px; }
.hero-none { height: 80px; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; background-color: var(--bg2);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 8, 9, .92) 0%, rgba(11, 8, 9, .55) 45%, rgba(11, 8, 9, 0) 75%); }
/* No backdrop at TMDB: the poster itself, whole, on the right (app.js backdrop). */
.hero-bg.poster-bg { background-size: contain; background-repeat: no-repeat; background-position: right var(--gutter) top calc(80px + env(safe-area-inset-top)); }
.hero-body, .detail-body { position: relative; max-width: 640px; }
.hero h1, .detail h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin: 0 0 10px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.meta { color: var(--muted); font-weight: 600; margin: 6px 0; white-space: pre-wrap; }
/* Title art: a fixed box, so a logo that loads with the page moves nothing. Wide logos fill the
   width, tall ones the height; bottom-left keeps them on the text's edge. */
.title.has-logo { margin-bottom: 18px; line-height: 0; }
.title .logo { display: block; width: min(100%, 480px); height: clamp(72px, 15vh, 150px); object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55)); }
.title.fade .logo { animation: logo-in 300ms var(--ease-out); }
@keyframes logo-in { from { opacity: 0; } }
.ep-line { font-weight: 700; margin: 0 0 4px; font-size: 1.05rem; }
.meta-strip, .ends { text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.meta-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 1em; font-size: 1.05rem; white-space: normal; }
.cert { padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 5px; font-size: .8rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4; }
.stars { position: relative; display: inline-flex; color: rgba(246, 244, 240, .22); }
.stars-row { display: inline-flex; }
.stars .icon { width: 1.15em; height: 1.15em; stroke: none; vertical-align: 0; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--ink); }
.ends { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; margin: 12px 0 0; }
.ends .icon { width: 1.2em; height: 1.2em; }
.overview { font-size: 1.05rem; line-height: 1.55; color: #e8e1e3; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.genres { color: var(--muted); }
/* Height reserved: the language badges arrive after PlaybackInfo, without pushing the text down. */
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; min-height: 28px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(246, 244, 240, .12); font-size: .85rem; font-weight: 700; }
.badge .icon { width: 16px; height: 16px; }
.badge.good { background: rgba(60, 207, 142, .18); color: #9ff0c9; }
.badge.warn { background: rgba(245, 184, 65, .18); color: #ffd98a; }

/* ---------- rows & cards ---------- */
.row { margin: 26px 0 0; }
.row h2 { font-size: 1.25rem; margin: 0 var(--gutter) 10px; font-weight: 700; }
.row-link { display: inline-flex; align-items: center; gap: 2px; }
.row-link .icon { width: 1em; height: 1em; }
.track { display: flex; gap: 10px; overflow-x: auto; padding: 8px var(--gutter) 14px; scroll-padding: 0 var(--gutter); scrollbar-width: none; scroll-snap-type: x proximity; }
.track::-webkit-scrollbar { display: none; }
/* A mouse without a sideways wheel: a page back or on (ui.js scrollable). Hovering fine pointers
   only; remotes and touch screens never see them. */
.track-wrap { position: relative; }
.row-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .row-arrow:not([hidden]) { display: grid; place-items: center; position: absolute; top: 8px; bottom: 14px; z-index: 3; width: max(44px, var(--gutter));
    color: var(--ink); opacity: 0; transition: opacity .18s; cursor: pointer; }
  .row-arrow.prev { left: 0; background: linear-gradient(90deg, rgba(11, 8, 9, .85), transparent); }
  .row-arrow.next { right: 0; background: linear-gradient(270deg, rgba(11, 8, 9, .85), transparent); }
  .row-arrow.prev .icon { transform: rotate(180deg); }
  .row-arrow .icon { width: 32px; height: 32px; }
  .track-wrap:hover .row-arrow { opacity: 1; }
}
.card { position: relative; flex: 0 0 var(--card); display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius); scroll-snap-align: start; transition: transform 200ms var(--ease-out); }
.card.wide { flex-basis: calc(var(--card) * 1.9); }
.poster { position: relative; display: block; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.card.wide .poster { aspect-ratio: 16/9; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.broken .poster img { visibility: hidden; }
.card:focus-visible { box-shadow: none; transform: scale(1.06); z-index: 2; }
.card:focus-visible .poster { box-shadow: var(--focus-art); }
/* Titles: over the poster on hover/focus with a pointer; always shown under it on touch screens. */
.card-title { position: absolute; inset: auto 0 0 0; padding: 26px 10px 10px; border-radius: 0 0 var(--radius) var(--radius); font-size: .85rem; font-weight: 700;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); opacity: 0; transition: opacity .18s; pointer-events: none; }
.card.wide .card-title, .card:focus-visible .card-title { opacity: 1; }
.card.wide .card-title { padding-bottom: 16px; }
.card.broken .card-title { opacity: 1; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; background: none; border-radius: var(--radius); }
/* Turkish-dub mark: a small brand-red tag, top left, legible over any poster. */
.dub-mark { position: absolute; top: 8px; left: 8px; padding: 3px 6px 2px; border-radius: 5px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; line-height: 1; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.bar { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--red); }
/* Placeholders while a row or search answer loads: the poster's shape, no motion. */
.card.skel { pointer-events: none; }
.card.skel .poster { background: var(--panel); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card), 1fr)); gap: 14px; padding: 8px var(--gutter); }
.grid .card { flex: none; }
.grid .empty { grid-column: 1 / -1; padding: 12px 0; }
/* Fixed offsets clear the top bar, which grows by the status bar in the home-screen app (black-translucent). */
.page-title { margin: calc(96px + env(safe-area-inset-top)) var(--gutter) 10px; }
.empty { color: var(--muted); padding: 20px var(--gutter); }
.empty p { margin: 0 0 6px; }
.empty > p:first-child { color: var(--ink); font-weight: 700; }
.page-error { padding-top: calc(120px + env(safe-area-inset-top)); }
.search-bar { padding: calc(84px + env(safe-area-inset-top)) var(--gutter) 10px; }
.field.search { font-size: 1.4rem; padding: 18px 20px; }
.sub-head { font-size: 1.05rem; font-weight: 700; color: var(--muted); margin: 18px var(--gutter) 2px; }

@media (hover: hover) {
  .btn:hover { background: rgba(246, 244, 240, .28); }
  .btn.primary:hover { background: #fff; }
  .profile:hover { color: var(--ink); transform: scale(1.05); }
  .topbar nav a:hover, .icon-link:hover { color: var(--ink); }
  .card:hover { transform: scale(1.06); z-index: 2; }
  .card:hover .card-title { opacity: 1; }
  .episode:hover { background: rgba(246, 244, 240, .1); }
  .icon-btn:hover, .menu-item:hover { background: rgba(255, 255, 255, .12); }
}
@media (hover: none) {
  .card-title { position: static; padding: 0 2px; opacity: 1; background: none; font-weight: 600; font-size: .8rem; line-height: 1.3; color: #e8e1e3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card.wide .card-title { padding: 0 2px; }
}

/* ---------- seasons ---------- */
.seasons { padding: 0 var(--gutter); }
.season-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.tab { padding: 10px 16px; border-radius: 999px; background: rgba(246, 244, 240, .1); font-weight: 700; white-space: nowrap; }
.tab.active { background: var(--ink); color: #111; }
.episodes { display: grid; gap: 10px; }
.episode { position: relative; display: grid; grid-template-columns: minmax(120px, 240px) 1fr; gap: 16px; text-align: left; padding: 10px; border-radius: var(--radius); background: rgba(246, 244, 240, .04); }
.episode:focus { background: rgba(246, 244, 240, .1); }
.episode img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: var(--panel); }
.episode img.broken { visibility: hidden; }
.episode h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.episode p { margin: 0; color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- İndirilenler (RealDebrid gathering) ---------- */
.btn.small { min-height: 36px; padding: .45em 1em; font-size: .9rem; }
.btn.danger { background: var(--red); color: #fff; }
.spinner.small { width: 16px; height: 16px; border-width: 2px; }
.gather { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.gather-meta { color: var(--muted); font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gather-status { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gather-status.failed { color: #ffd98a; }
.ring { width: 24px; height: 24px; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.ring-track { stroke: rgba(246, 244, 240, .18); }
.ring-fill { stroke: var(--red); stroke-linecap: round; transition: stroke-dasharray .4s; }
.season-tools .gather { margin: 0; }
/* The answer arrives 0.2–4 s after paint: on detail pages and seasons the slot keeps its height
   (invisible while empty) so the bottom-anchored title and Play button never jump. */
.detail-body > .gather, .season-tools .gather { min-height: 44px; }
.detail-body > .gather[hidden], .season-tools .gather[hidden] { display: flex !important; visibility: hidden; }
/* That slot already spaces a movie's detail from the row below: no bottom padding on top of it. */
.detail.movie { padding-bottom: 0; }
.player-error .gather { justify-content: center; margin: 4px 0 16px; }
/* Nothing plays in this browser: İndir leads, one plain line under it says why. */
.gather-why { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .92rem; }
.no-copy { margin: 12px 0 4px; color: var(--muted); font-weight: 600; }
.dl-list { display: grid; gap: 8px; padding: 8px var(--gutter); max-width: 900px; }
.dl-row { display: flex; align-items: center; gap: 8px; border-radius: var(--radius); background: rgba(246, 244, 240, .04); padding-right: 8px; }
.dl-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px; text-align: left; border-radius: var(--radius); }
.dl-main:focus-visible { background: rgba(246, 244, 240, .08); }
.dl-poster { flex: none; width: 56px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: var(--panel); }
.dl-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-poster img.broken { visibility: hidden; }
.dl-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dl-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-sub { color: var(--muted); font-size: .85rem; }
.dl-bar { display: block; height: 3px; border-radius: 2px; background: rgba(246, 244, 240, .14); overflow: hidden; margin-top: 4px; }
.dl-bar > span { display: block; height: 100%; background: var(--red); transition: width .4s; }
.dl-row.ready .dl-bar > span { background: var(--good); }
.dl-status { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.dl-row.ready .dl-state { color: #9ff0c9; }
.dl-row.failed .dl-state { color: #ffd98a; }
.dl-pct { font-variant-numeric: tabular-nums; }
.dl-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.dl-ask { font-size: .88rem; color: var(--muted); }
.dl-empty { padding-left: 0; padding-right: 0; }
@media (hover: hover) { .dl-main:hover { background: rgba(246, 244, 240, .08); } }
@media (max-width: 720px) {
  .dl-row { flex-wrap: wrap; padding-right: 0; }
  .dl-actions { margin-left: auto; padding: 0 8px 8px; }
  .dl-row .dl-actions:has(.icon-btn:only-child) { margin: 0 4px 0 0; padding: 0; }
}

/* ---------- live tv ---------- */

/* ---------- player ---------- */
.player { position: fixed; inset: 0; z-index: 100; background: #000; cursor: none; }
.player.show-ui { cursor: default; }
/* Subtitles are the browser's own, laid out in the <video> box, not the picture. On an upright
   screen the film player (fitPicture) makes that box the picture plus a band of the black bar
   under it, so a letterboxed film's subtitles sit just under the picture, and it lifts them over
   the control bar while it shows. Unset (sideways, desktop, TV, live TV, before the size is known)
   the video fills the player. */
.player { --cue-font: clamp(18px, 2.6vw, 34px); }
.player.sub-s { --cue-font: clamp(15px, 2vw, 26px); }
.player.sub-l { --cue-font: clamp(24px, 3.5vw, 46px); }
.player-video { position: absolute; left: 0; top: var(--pic-top, 0px); width: 100%; height: var(--pic-h, 100%); object-fit: contain;
  object-position: 50% var(--pic-y, 50%); font-size: var(--cue-font); background: #000; }
.player-video::cue { font-family: "Manrope", sans-serif; font-size: var(--cue-font); background: rgba(0, 0, 0, .55); }
/* Two rules: one unknown pseudo-element in a selector list drops the whole rule. WebKit (as its own
   controls do) shortens the cue container; Chromium ignores that height but moves each cue. Native
   full screen and PiP size the container inline, so neither applies there. */
.player.show-ui .player-video::-webkit-media-text-track-container { height: calc(100% - var(--cue-lift, 0px)); }
.player.show-ui .player-video::-webkit-media-text-track-display { transform: translateY(calc(-1 * var(--cue-lift, 0px))); }
/* Subtitle looks (prefs.subStyle; the box above is "box"). iPhone's own full-screen player and a
   system caption style the viewer set win over these. */
.player.cue-shadow .player-video::cue { background: transparent; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 2px 6px rgba(0, 0, 0, .9); }
.player.cue-yellow .player-video::cue { color: #ffd60a; background: rgba(0, 0, 0, .85); }
/* Above the controls layer (both inset: 0): tap-to-play and the error card stay tappable while the
   controls show; the overlay itself lets taps through to them. */
.player-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.player-overlay > * { pointer-events: auto; grid-area: 1 / 1; }
.player-status { font-size: 1.2rem; color: var(--muted); padding: 12px 20px; border-radius: 10px; background: rgba(0, 0, 0, .5); pointer-events: none; }
.player-error { text-align: center; max-width: 520px; padding: 24px; }
.player-error p { color: var(--muted); }
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--ink); animation: spin .9s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-controls { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .25s; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 22%, transparent 70%, rgba(0, 0, 0, .8)); }
.player.show-ui .player-controls { opacity: 1; pointer-events: auto; }
.player-controls .top { display: flex; align-items: center; gap: 16px; padding: max(16px, env(safe-area-inset-top)) var(--gutter) 16px; }
.player-controls .bottom { padding: 0 var(--gutter) max(20px, env(safe-area-inset-bottom)); }
.player-title .pt-main, .live-label .pt-main { font-size: 1.3rem; font-weight: 800; }
.player-title .pt-sub, .live-label .pt-sub { color: var(--muted); }
.seekrow { position: relative; display: flex; align-items: center; gap: 12px; }
/* Above the thumb while it is dragged: the time there and the segment it falls in. */
.seek-bubble { position: absolute; bottom: calc(100% + 6px); left: 0; display: grid; justify-items: center; gap: 2px; padding: 6px 10px; border-radius: 8px;
  background: var(--panel); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); white-space: nowrap; pointer-events: none; transform: translateX(-50%);
  opacity: 0; transition: opacity 250ms ease; }
.seek-bubble.show { opacity: 1; transition-duration: 100ms; }
.sb-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-seg { color: var(--muted); font-size: .82rem; font-weight: 700; }
.seek { flex: 1; accent-color: var(--red); height: 24px; }
.time { font-variant-numeric: tabular-nums; color: #ddd; min-width: 60px; text-align: center; }
.buttons { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; font-size: 1.4rem; }
.icon-btn:focus-visible { background: rgba(255, 255, 255, .15); }
.buttons > .icon-btn { flex: none; }
.next-ep { background: var(--ink); color: #111; white-space: nowrap; }
/* Settings menu: opaque (no video bleeding through), the picture dimmed behind it. A panel above
   the control bar on wide screens, a bottom sheet on phones, a side sheet on phones held sideways. */
.player { touch-action: manipulation; }   /* no double-tap zoom: a double tap skips 10 s */
.menu-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .6); }
.player-menu { position: absolute; right: var(--gutter); bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 3; width: min(380px, 90vw); max-height: min(70vh, 560px);
  display: flex; flex-direction: column; background: var(--panel); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.menu-grab { display: none; }
.menu-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 4px 4px 16px; border-bottom: 1px solid var(--line); }
.menu-head h2 { flex: 1; margin: 0; font-size: 1.05rem; }
.menu-back { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; margin-left: -8px; padding: 0 8px; border-radius: 8px; font-weight: 800; font-size: 1.05rem; text-align: left; }
.menu-close { flex: none; color: var(--muted); }
.menu-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
/* More below: the last rows fade out instead of ending at a hard edge. */
.menu-body.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); }
.menu-body h3 { font-size: .85rem; color: var(--muted); margin: 14px 12px 6px; }
.menu-body h3 .h3-value { float: right; color: var(--ink); font-weight: 700; }   /* Altyazı zamanlaması: "0,5 sn erken" */
.menu-sizes[data-group="timing"] .menu-item { justify-content: center; }
.menu-row, .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; text-align: left; padding: 10px 12px; border-radius: 8px; }
.menu-row-label { font-weight: 700; flex: none; }
.menu-row-value { flex: 1; min-width: 0; text-align: right; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row .icon { color: var(--muted); }
.menu-item .icon { visibility: hidden; }
.menu-item[aria-checked="true"] { font-weight: 800; }
.menu-item[aria-checked="true"] .icon { visibility: visible; }
.menu-sizes { display: flex; gap: 4px; }
.menu-sizes .menu-item { flex: 1; gap: 6px; }
/* Solid, so the focused item reads from the couch and never looks like the selected (bold, checked) one. */
.menu-row:focus-visible, .menu-item:focus-visible, .menu-back:focus-visible { background: var(--ink); color: #111; box-shadow: none; }
.menu-row:focus-visible .icon, .menu-row:focus-visible .menu-row-value { color: #111; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .player-menu { left: 0; right: 0; bottom: 0; width: auto; max-height: 50vh; max-height: 50dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .menu-grab { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(246, 244, 240, .3); }
  .menu-head { min-height: 52px; }
}
@media (pointer: coarse) and (max-height: 500px) and (min-width: 721px) {
  .player-menu { left: auto; top: 0; width: min(380px, 50vw); max-height: none; border-radius: 16px 0 0 16px; padding-right: env(safe-area-inset-right); }
  .menu-grab { display: none; }
}
/* Error: a solid card on a dark scrim; the controls behind it go away. */
.player.failed .player-controls { display: none; }
.player.failed .player-overlay { background: rgba(0, 0, 0, .82); }
.player-error { background: var(--panel); border-radius: 16px; margin: 16px; }
.player-error h2 { margin: 0 0 8px; font-size: 1.3rem; }
.player-error .row-btns { justify-content: center; }
/* Up next: bottom right, above the controls, until picked, cancelled or counted down. */
.next-card { position: absolute; right: var(--gutter); bottom: calc(120px + env(safe-area-inset-bottom)); z-index: 2; width: min(360px, calc(100vw - 32px));
  padding: 16px 18px; border-radius: 14px; background: var(--panel); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.next-card p { margin: 0; }
.nc-kicker { color: var(--muted); font-size: .85rem; font-weight: 700; }
.nc-title { font-weight: 800; margin-top: 2px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-count { color: var(--muted); font-size: .9rem; margin-top: 6px !important; font-variant-numeric: tabular-nums; }
.next-card .row-btns { margin-top: 12px; }
@media (max-width: 720px) { .next-card { left: 16px; right: 16px; width: auto; bottom: calc(130px + env(safe-area-inset-bottom)); } }
/* Skip intro, recap or credits: bottom right above the control bar, seen with or without it. In
   200 ms (fade and scale from .96), out 250 ms; hidden, it is out of the focus order and unread. */
.skip-wrap { position: absolute; right: var(--gutter); bottom: calc(120px + env(safe-area-inset-bottom)); z-index: 2; }
.skip-pill { background: rgba(24, 17, 20, .92); color: var(--ink); border: 1px solid rgba(246, 244, 240, .5); box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: scale(.96); transition: opacity 250ms ease, transform 250ms ease, visibility 0s 250ms; }
.skip-pill.show { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
.skip-pill:focus-visible { background: var(--ink); color: #111; }
.player.failed .skip-wrap { display: none; }
/* "Kaldığın yer 23:14": the place kept while the transcode runs from the beginning, under the title;
   with the controls, and alone for a moment when it first shows (.peek). */
.place-line { position: absolute; left: var(--gutter); top: calc(88px + env(safe-area-inset-top)); z-index: 2; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 2 * var(--gutter)); padding: 8px 14px; border-radius: 10px; background: rgba(24, 17, 20, .82); font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s 200ms; }
.player.show-ui .place-line, .place-line.peek { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease-out), visibility 0s; }
.place-line { flex-wrap: wrap; row-gap: 8px; }
.place-line > * { white-space: nowrap; }
.place-line .btn { margin-right: -6px; }
.place-line[hidden], .player.failed .place-line { display: none; }
/* Remuxed in the page there is nothing AirPlay could send. */
.player.remuxing .airplay-btn { display: none; }
@media (hover: hover) { .skip-pill:hover { background: var(--ink); color: #111; } }
/* Double-tap skip: a brief mark on that side. */
.seek-ripple { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 96px; height: 96px; margin-top: -48px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); pointer-events: none; animation: ripple 700ms var(--ease-out) forwards; }
.seek-ripple.left { left: 12%; }
.seek-ripple.right { right: 12%; }
.seek-ripple .icon { width: 40px; height: 40px; }
@keyframes ripple { from { opacity: 0; transform: scale(.8); } 20% { opacity: 1; transform: scale(1); } to { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom)); z-index: 200; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, 20px); opacity: 0; background: var(--panel); padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-left: 3px solid var(--red); padding-right: 8px; }
.toast.sticky { padding-right: 8px; }
.toast-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; flex: none; color: var(--muted); }
.toast-close:focus-visible { color: var(--ink); }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .topbar { gap: 10px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
  /* Phones: the sections become a bottom tab bar (thumb reach, nothing cut off). */
  .topbar nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(11, 8, 9, .96); border-top: 1px solid var(--line);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .topbar nav a { display: grid; justify-items: center; gap: 3px; font-size: .68rem; padding: 4px 1px; text-align: center; flex: 1; min-width: 0; min-height: 48px; }
  .nav-icon { display: block; width: 22px; height: 22px; }
  .page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .hero, .detail { min-height: 62vh; padding-top: calc(96px + env(safe-area-inset-top)); padding-bottom: 32px; }
  .hero-none { height: calc(80px + env(safe-area-inset-top)); }
  .hero .overview { -webkit-line-clamp: 3; }
  .title .logo { height: 80px; width: min(100%, 320px); }
  /* Text spans the full width here: shade from the bottom as well, so it reads on bright art. */
  .hero-bg::after { background: linear-gradient(0deg, rgba(11, 8, 9, .95) 0%, rgba(11, 8, 9, .75) 55%, rgba(11, 8, 9, 0) 90%),
    linear-gradient(90deg, rgba(11, 8, 9, .6), rgba(11, 8, 9, 0) 80%); }
  .episode { grid-template-columns: 120px 1fr; }
  /* "Sonraki bölüm" floats above the seek bar: in the button row it pushed fullscreen off-screen. */
  .player-controls .bottom { position: relative; }
  .next-ep { position: absolute; right: var(--gutter); bottom: calc(100% + 8px); }
  /* The pill clears the seek bar, and "Sonraki bölüm" floating above it when that shows. */
  .skip-wrap { bottom: calc(130px + env(safe-area-inset-bottom)); }
  .player.next-shown .skip-wrap { bottom: calc(186px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .icon-btn { width: 44px; height: 44px; }
  /* Thumb-sized targets (44px). */
  .toast-close { width: 44px; height: 44px; }
  .btn.small { min-height: 44px; }
  .dl-actions { gap: 12px; }
  .tab { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not none: fades and colour changes stay (they explain what changed);
     movement goes (transforms apply at once). */
  * { transition-property: opacity, background-color, color, border-color !important; scroll-behavior: auto !important; }
  .card:hover, .card:focus-visible, .profile:hover, .profile:focus-visible { transform: none; }
  .spinner { animation-duration: 3s; }
  .seek-ripple { animation-name: fade-in-out; }
  .skip-pill, .skip-pill.show { transform: none; transition-property: opacity, visibility !important; }
}

/* Tap-to-play: shown only when a browser refuses to autoplay (iOS after async loading). */
.tap-play { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: rgba(184, 35, 75, .92); color: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.tap-play .icon { width: 56px; height: 56px; transform: translateX(3px); }
.tap-play small { position: absolute; margin-top: 190px; font-size: 1rem; color: var(--ink); white-space: nowrap; }
.tap-play:focus-visible { box-shadow: var(--focus); }

/* ---------- profile settings (js/settings.js) ---------- */
.settings { max-width: 760px; margin: 0 auto; padding: calc(96px + env(safe-area-inset-top)) var(--gutter) 48px; display: grid; gap: 28px; }
.set-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.set-head .page-title { margin: 0 0 4px; }
.set-head p { margin: 0; }
.set-avatar { width: 84px; height: 84px; border-radius: 16px; }
.set-saved { position: fixed; top: calc(76px + env(safe-area-inset-top)); left: 50%; z-index: 25; margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--panel); color: var(--good);
  font-weight: 700; font-size: .9rem; opacity: 0; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.set-saved.show { opacity: 1; transform: translate(-50%, 0); }
.set-group h2 { margin: 0 0 4px; font-size: 1.15rem; }
.set-hint { margin: 0 0 12px; color: var(--muted); }
.set-group h2 + .set-opts { margin-top: 12px; }
.set-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.set-opt, .set-switch { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line);
  color: var(--ink); transition: border-color .15s, background .15s; }
/* Chosen: filled, with a check. The check's room is kept when unchosen, so nothing reflows. */
.set-opt[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: #111; }
.set-opt[aria-checked="true"] .set-opt-sub { color: #4d4447; }
.set-opt-label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.set-opt-label .icon { stroke-width: 2.5; visibility: hidden; }
.set-opt[aria-checked="true"] .set-opt-label .icon { visibility: visible; }
.set-group > .btn { margin-top: 12px; }
/* Televizyonu bağla: the code field and its button on one line, wrapping on narrow phones. */
.tv-link-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.tv-link-form .tv-code { width: min(240px, 100%); flex: 0 1 240px; letter-spacing: .25em; }
.tv-msg { margin: 10px 0 0; min-height: 1.35em; }
.tv-msg.bad { color: var(--red-2); }
/* Genres: wide enough for "Bilim kurgu" on one line with its check. */
.set-opts.chips, .set-opts.compact.chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.set-opt-sub { color: var(--muted); font-size: .88rem; line-height: 1.35; }
.set-switch { width: 100%; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.set-switch-text { display: grid; gap: 4px; }
.set-knob { position: relative; width: 48px; height: 28px; border-radius: 999px; background: rgba(246, 244, 240, .2); transition: background .2s; }
.set-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.set-switch[aria-checked="true"] .set-knob { background: var(--good); }
.set-switch[aria-checked="true"] .set-knob::after { transform: translateX(20px); }
/* Full width, fixed height (an aspect-ratio with a max-height would narrow it). */
.set-sample { margin-top: 12px; display: grid; place-items: end center; width: 100%; height: clamp(110px, 22vw, 160px); border-radius: 12px; padding: 16px;
  background: linear-gradient(180deg, #2b2025, #0e0a0c); }
.set-sample span { background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 4px; }
.set-sample.sub-s span { font-size: 15px; }
.set-sample.sub-m span { font-size: 20px; }
.set-sample.sub-l span { font-size: 27px; }
.set-sample.cue-shadow span { background: transparent; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 2px 6px rgba(0, 0, 0, .9); }
.set-sample.cue-yellow span { color: #ffd60a; background: rgba(0, 0, 0, .85); }
.set-note { margin: 0; font-size: .9rem; }
.me.active img { box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 720px) {
  .set-head { grid-template-columns: auto 1fr; }
  .set-head .btn { grid-column: 1 / -1; justify-self: start; }
  .set-avatar { width: 64px; height: 64px; }
  .set-opts { grid-template-columns: 1fr; gap: 8px; }
  .set-opts.compact { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
}

/* ---------- Listem tools ---------- */
.list-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: calc(96px + env(safe-area-inset-top)) var(--gutter) 10px; }
.list-head .page-title { margin: 0; }
.list-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 8px 16px; border-radius: 999px; background: rgba(246, 244, 240, .1); color: var(--muted); font: inherit; font-weight: 700; font-size: .92rem; border: 0; }
.chip[aria-pressed="true"] { background: var(--ink); color: #111; }
.chip.select { appearance: none; -webkit-appearance: none; padding-right: 32px; color: var(--ink);
  background: rgba(246, 244, 240, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8a4b3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
.chip.select option { background: var(--panel); color: var(--ink); }
/* Phones: 44px chips, and 16px text so iOS does not zoom into the sort select. After the base rule, or it loses. */
@media (max-width: 720px) { .chip { min-height: 44px; font-size: 1rem; } }
.remove-mark { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(11, 8, 9, .82); color: var(--ink); }
.remove-mark .icon { width: 18px; height: 18px; }
.grid.editing .card .poster img { opacity: .7; }
.card.removable { text-align: left; color: var(--ink); }
.card.removable:focus-visible .remove-mark, .card.removable:hover .remove-mark { background: var(--red); }

/* İndirilenler summary line */
.dl-summary { margin: -4px var(--gutter) 14px; min-height: 1.2em; font-weight: 600; }

/* İndirilenler ready notice: toast action and the count on the nav link */
.toast { width: max-content; }   /* left: 50% alone shrinks it to half the screen on phones */
.toast-action { flex: none; min-height: 44px; padding: 8px 18px; border-radius: 8px; background: var(--ink); color: #111; font-weight: 800; }
.toast-action:focus-visible { background: #fff; }
.nav-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: .7rem; font-weight: 800; line-height: 1; vertical-align: 1px; }
@media (max-width: 720px) {
  .topbar nav a { position: relative; }
  .nav-dot-box { position: absolute; top: 0; left: calc(50% + 6px); }
  .nav-dot { margin-left: 0; }
}

/* ---------- watching state: row edit (Continue Watching, Next Up), İzlendi, season tools ---------- */
.row-head { display: flex; align-items: center; gap: 12px; margin: 0 var(--gutter) 10px; }
.row-head h2 { margin: 0; }
.track.editing .card .poster img { opacity: .7; }
.track .remove-mark { width: 40px; height: 40px; }
.btn.seen .icon { opacity: .45; }
.btn.seen[aria-pressed="true"] .icon { opacity: 1; color: var(--good); stroke-width: 2.5; }
.seen-mark { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 8px; border-radius: 50%; background: var(--good); color: #111; vertical-align: -.2em; }
.seen-mark .icon { width: .85em; height: .85em; stroke-width: 3; vertical-align: 0; }
/* One button size and one baseline: "Sezonu izlendi olarak işaretle" next to "Sezonu indir". */
.season-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 4px 0 12px; }

/* ---------- motion (docs/motion.md) ---------- */
/* Remote focus answers the key at once: the focused card and profile scale up without a
   transition (a D-pad hop is the most frequent action in the app), and the one left behind
   eases back. Pointer hover keeps the 200 ms ease-out from the base rules. */
.card:focus-visible, .card:focus-visible .card-title, .profile:focus-visible { transition: none; }
/* Press feedback for taps and clicks: the interface heard it. */
.icon-btn, .chip, .tab, .toast-action { transition: transform 160ms var(--ease-out); }
.btn:active, .icon-btn:active, .chip:active, .tab:active, .toast-action:active { transform: scale(0.97); }
.poster { transition: transform 160ms var(--ease-out); }
.card:active .poster { transform: scale(0.97); }
/* Player controls appear with the key press that asks for them; the idle hide fades (.25s). */
.player.show-ui .player-controls { transition: opacity 100ms var(--ease-out); }
/* PIN dialog: enters instead of teleporting over the picker. Centred, so it scales from the centre. */
.pin-dialog[open] { animation: pop-in 200ms var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-in-out { 20% { opacity: 1; } from, to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin-dialog[open] { animation-name: fade-in; } }

/* ---------- Karamel, the pixel puppy (js/pets.js): rare moments only, never over the player ---------- */
.pets { position: fixed; left: 0; right: 0; bottom: var(--pet-ground, calc(14px + env(safe-area-inset-bottom))); height: 0; z-index: 40; pointer-events: none; }
.pet { position: absolute; left: 0; bottom: 0; transform-origin: 22% 100%; will-change: transform; }
.pet-nap { left: auto; right: max(24px, var(--gutter)); pointer-events: auto; cursor: pointer; }
.pet-corner { left: var(--gutter); }
.pet-sprite { background-repeat: no-repeat; image-rendering: pixelated; animation: pet-frames var(--fps, 360ms) steps(2) infinite; }
.pet-sprite.flip { transform: scaleX(-1); }
.pet-sprite.still { animation: none; }
/* Asleep: one frame that breathes. */
.pet-sprite.still.breathe { transform-origin: 50% 100%; animation: pet-breathe 2.8s ease-in-out infinite; }
@keyframes pet-breathe { 50% { transform: scaleY(1.06); } }
@keyframes pet-frames { to { background-position-x: var(--sheet); } }
/* Tuana's black dress on a black page: a faint light edge keeps her outline. */
.pet-glow { filter: drop-shadow(0 0 1px rgba(246, 244, 240, .5)); }
.pet-plush { position: absolute; bottom: 0; }
.pet-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 5px 10px; white-space: nowrap;
  font: 800 .8rem/1.2 Manrope, system-ui, sans-serif; color: #0b0809; background: #f6f4f0;
  box-shadow: 0 -3px 0 #3a1020, 0 3px 0 #3a1020, -3px 0 0 #3a1020, 3px 0 0 #3a1020; }
.pet-corner .pet-bubble { left: 70%; }
.pet-heart { position: absolute; left: 62%; bottom: 70%; transform: translate(-50%, 0); }
.pet-z { position: absolute; right: 12px; bottom: 90%; font: 800 1rem Manrope, system-ui, sans-serif; color: #f6f4f0;
  animation: pet-z 2.4s ease-out infinite; }
@keyframes pet-z { from { transform: translate(0, 6px); opacity: 0; } 30% { opacity: .9; } to { transform: translate(10px, -26px); opacity: 0; } }
.pet-loading { display: inline-block; vertical-align: middle; margin-right: 12px; }
.player-status:has(.pet-loading) { display: flex; align-items: center; }
@media (max-width: 720px) { .pets { --pet-ground: calc(72px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .pet-sprite, .pet-sprite.still.breathe, .pet-z { animation: none; } }

/* ---------- welcome (app.js welcome): a note from Yağız, once per device ---------- */
.welcome { position: fixed; right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 45; display: flex; gap: 14px; align-items: flex-start;
  width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 16px 16px 16px 14px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--red); box-shadow: 0 18px 48px rgba(0, 0, 0, .55); animation: welcome-in 420ms var(--ease-out) both; }
.welcome h2 { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: -.01em; }
.welcome p { margin: 0 0 8px; color: var(--muted); line-height: 1.45; font-size: .95rem; }
.welcome .welcome-label { margin-bottom: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red-2); }
.welcome-body { flex: 1; min-width: 0; }
.welcome-end { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.welcome .welcome-sign { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.3; }
.welcome .btn { min-height: 44px; padding: .5em 1.4em; }
.welcome-pup { flex: none; padding-top: 2px; }
.welcome-pup .pet-loading { margin: 0; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes welcome-fade { from { opacity: 0; } }
@media (max-width: 720px) { .welcome { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .welcome { animation: welcome-fade 300ms ease both; } }