/* PikoTV OTT — design system v2 (teal on deep dark). Hand-written CSS (no Tailwind),
   pure-Go stack. Dark is default; [data-theme="light"] on <html> switches to light.
   Class names / DOM structure are UNCHANGED from v1 — this is a token + skin pass
   (see web/analysis/ for the audit, system spec and plan).

   System summary:
   - color: content-first dark canvas; accent (teal) ONLY for focus/active/now/CTA
   - type:  vendored Inter Variable (/web/fonts, OFL) + fluid scale, tabular numerals
   - focus: one perfect state — ring for artwork/rows, solid accent fill for buttons
   - depth: elevation via fills + 4-step shadow scale; hairline borders only
   - motion: 120/200/320ms, one easing, prefers-reduced-motion honored             */

/* ---------- font ---------- */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/web/fonts/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* canvas + layers */
  --pk-bg: #000000;
  --pk-bg-deep: #000000;
  --pk-surface: #141921;
  --pk-elevated: #1d2430;
  --pk-popover: #202836;

  /* text */
  --pk-fg: #f4f6f8;
  --pk-fg-soft: #c9d1da;
  --pk-muted: #8b96a3;
  /* fixed "on artwork" inks (heroes/players sit on dark art in BOTH themes) */
  --pk-on-art: #f2f5f8;
  --pk-on-art-soft: #c9d1da;

  /* brand + status */
  --pk-accent: #1fb6c9;        /* PikoTV brand teal */
  --pk-accent-hi: #43d3e4;
  --pk-accent-fg: #03191e;     /* readable text on the accent */
  --pk-gold: var(--pk-accent); /* legacy alias used across the stylesheet */
  --pk-live: #ff5050;
  --pk-danger: #e25b5b;
  --pk-warn: #e8b450;

  /* lines + focus */
  --pk-border: rgba(255, 255, 255, 0.08);
  --pk-ring: rgba(31, 182, 201, 0.45);

  /* scrims (over artwork) */
  --pk-scrim-y: linear-gradient(180deg, rgba(10, 13, 17, 0) 55%, rgba(10, 13, 17, 0.55) 80%, var(--pk-bg) 100%);

  /* gradients + chrome */
  --pk-grad: linear-gradient(120deg, #2f86c9, #1fb6c9 52%, #34c08a);
  --pk-logo: url("/web/logo-dark.png");
  --pk-sidebar-bg: #000000;
  --pk-nav-hover: rgba(255, 255, 255, 0.06);
  --pk-fade: 10, 13, 17;       /* page-bg RGB for rail edge-fades */

  /* shadows (elevation) */
  --pk-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --pk-shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);
  --pk-shadow-4: 0 28px 80px rgba(0, 0, 0, 0.65);

  /* shape */
  --rad-s: 8px;
  --rad-m: 12px;
  --rad-l: 18px;

  /* rhythm */
  --pk-gutter: clamp(1.25rem, 3.5vw, 3rem);
  --pk-rail: 164px;            /* poster width */
  --pk-sidebar: 76px;
  --pk-sidebar-open: 232px;

  /* Sidebar row metrics, scaled to viewport HEIGHT so every entry stays visible.
     This is a short-and-wide problem, not a narrow one: the rail carries ~17
     entries (Search…Settings plus the profile row and Sign out), which need about
     910px at the comfortable size — but a 1080p screen at Windows' DEFAULT
     125%/150% display scaling reports only 864 / 720 CSS px, so the comfortable
     size overflows and the last entries (Main, Sign out) fall off the bottom.
     Scaling on vw would not have helped: those screens are wide, just not tall.
     The floors keep the click target usable; .pk-sidebar still scrolls as a last
     resort if a brand ever adds enough entries to defeat even the minimum. */
  --pk-nav-pad-y: clamp(0.28rem, 0.95vh, 0.62rem);
  --pk-nav-gap: clamp(0.08rem, 0.35vh, 0.25rem);
  --pk-nav-ico: clamp(18px, 2.4vh, 24px);
  --pk-side-pad-y: clamp(0.4rem, 1.1vh, 1rem);
  --pk-brand-h: clamp(28px, 3.9vh, 40px);
  --pk-brand-mb: clamp(0.3rem, 1.2vh, 1.1rem);
  --pk-brand-open-h: clamp(34px, 5.4vh, 60px);

  /* type scale */
  --fs-hero: clamp(2.1rem, 4.2vw, 3.6rem);
  --fs-h1: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h2: 1.18rem;
  --fs-body: 0.95rem;
  --fs-ui: 0.9rem;
  --fs-small: 0.8rem;
  --fs-micro: 0.72rem;

  /* motion */
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --pk-bg: #f4f6f9;
  --pk-bg-deep: #e8ecf2;
  --pk-surface: #ffffff;
  --pk-elevated: #e9edf3;
  --pk-popover: #ffffff;
  --pk-fg: #15191f;
  --pk-fg-soft: #3c4754;
  --pk-muted: #5c6672;
  --pk-accent: #0c93a6;
  --pk-accent-hi: #1fb6c9;
  --pk-accent-fg: #ffffff;
  --pk-live: #e0322f;
  --pk-danger: #c0392b;
  --pk-warn: #a87614;
  --pk-border: rgba(0, 0, 0, 0.10);
  --pk-ring: rgba(12, 147, 166, 0.40);
  --pk-scrim-y: linear-gradient(180deg, rgba(244, 246, 249, 0) 55%, rgba(244, 246, 249, 0.55) 80%, var(--pk-bg) 100%);
  --pk-logo: url("/web/logo-light.png");
  --pk-sidebar-bg: linear-gradient(180deg, #ffffff, #eef1f5);
  --pk-nav-hover: rgba(0, 0, 0, 0.06);
  --pk-fade: 244, 246, 249;
  --pk-shadow-2: 0 10px 30px rgba(23, 32, 44, 0.16);
  --pk-shadow-3: 0 18px 50px rgba(23, 32, 44, 0.20);
  --pk-shadow-4: 0 28px 80px rgba(23, 32, 44, 0.26);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--pk-bg);
  color: var(--pk-fg);
  font-family: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

a { color: inherit; text-decoration: none; }
img { display: block; }

/* Screen-reader-only text: page-level "Loading…" status lines stay announced but
   are never painted (owner 2026-09-26: "Ana Sayfa Bölümleri · Yükleniyor…" sat
   above the banner and pushed the page down while rails loaded). */
.pk-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- focus (one perfect state) ---------- */
/* Keyboard / spatial-nav focus only — pointer clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pk-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--pk-ring);
  border-radius: var(--rad-s);
}
.pk-btn:focus-visible,
.pk-seg-btn:focus-visible,
.pk-key:focus-visible {
  background: var(--pk-accent);
  color: var(--pk-accent-fg);
  outline-offset: 1px;
}

/* ---------- themed scrollbars (rails keep theirs hidden) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--pk-elevated) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--pk-elevated); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--pk-popover); }

/* ---------- buttons ---------- */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 42px;
  padding: 0.55rem 1.3rem;
  background: var(--pk-gold);
  color: var(--pk-accent-fg);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--rad-m);
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pk-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 18px var(--pk-ring); }
.pk-btn:active { transform: translateY(1px); }
.pk-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.pk-btn-block { width: 100%; justify-content: center; }
.pk-btn-lg { min-height: 50px; padding: 0.7rem 1.8rem; font-size: 1.02rem; }
.pk-btn svg { width: 20px; height: 20px; }

/* ---------- auth ---------- */
.pk-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(1100px 560px at 72% -8%, rgba(31, 182, 201, 0.14), transparent 60%),
    radial-gradient(900px 480px at 12% 108%, rgba(52, 192, 138, 0.07), transparent 55%),
    var(--pk-bg);
}
.pk-auth-card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem 2.25rem;
  background: var(--pk-popover);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-l);
  box-shadow: var(--pk-shadow-4);
}
.pk-auth-logo {
  height: 78px;
  width: 260px;
  max-width: 86%;
  margin: 0 auto 0.5rem;
  background: var(--pk-logo) center / contain no-repeat;
}
.pk-auth-sub { color: var(--pk-muted); text-align: center; margin: -0.4rem 0 0.5rem; font-size: var(--fs-body); }
.pk-auth-err {
  background: color-mix(in srgb, var(--pk-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pk-danger) 45%, transparent);
  color: var(--pk-danger);
  padding: 0.6rem 0.8rem;
  border-radius: var(--rad-s);
  font-size: var(--fs-ui);
}
.pk-input {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.95rem;
  background: var(--pk-elevated);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-m);
  color: var(--pk-fg);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pk-input:focus { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 4px var(--pk-ring); }
.pk-input::placeholder { color: var(--pk-muted); }

/* ---------- app shell ---------- */
.pk-app { min-height: 100vh; }

/* WASM-load splash: restyle go-app's built-in loader (#app-wasm-loader /
   .goapp-app-info, shown during the app.wasm download and removed on mount) to
   match the TV client's splash — deep background, branded PikoTV icon gently
   pulsing, and three pulsing accent dots below it. Always dark, like the TV. */
.goapp-app-info {
  background-color: var(--pk-bg-deep) !important;
  color: var(--pk-fg) !important;
  z-index: 9999 !important;
}
/* The full wordmark, like the TV splash (owner 2026-09-26: "Web client'da tam wayo logosu
   kullansın"): go-app's <img> carries the square app icon, so it is hidden and the brand logo
   (--pk-logo from identity.css, loaded in <head> before the wasm) is drawn in its place. */
.goapp-logo { display: none !important; }
.goapp-app-info::before {
  content: ""; display: block;
  width: min(300px, 60vw); aspect-ratio: 1100 / 258;
  background: var(--pk-logo) center / contain no-repeat;
}
.goapp-label { display: none !important; } /* hide the "{progress}%" text */
.goapp-app-info::after {
  content: ""; margin-top: 26px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pk-accent);
  box-shadow: -16px 0 var(--pk-accent), 16px 0 var(--pk-accent);
  animation: pkSplashDots 1.1s ease-in-out infinite;
}
@keyframes pkSplashDots { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.pk-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--pk-sidebar);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--pk-side-pad-y) 0.6rem;
  background: var(--pk-sidebar-bg);
  border-right: 1px solid var(--pk-border);
  z-index: 50;
  /* Horizontal clipping is what hides the labels while collapsed, so keep it —
     but never clip VERTICALLY: on a short window that silently swallowed the
     last nav item (Settings). Scrolls instead, with the bar hidden so the rail
     still looks flush. */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width 0.18s var(--ease);
}
/* Keyboard users get the same widened rail as the mouse: the labels are the
   only names shown now that the rail items carry no title tooltip. */
.pk-sidebar:hover, .pk-sidebar:focus-within { width: var(--pk-sidebar-open); box-shadow: var(--pk-shadow-3); }
/* override the global 8px scrollbar: the rail scrolls when it must, invisibly */
.pk-sidebar::-webkit-scrollbar { width: 0; height: 0; }

.pk-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: var(--pk-brand-h);
  margin: 0.3rem 0.5rem var(--pk-brand-mb);
  flex: 0 0 auto;
  overflow: hidden;
  /* The rail scrolls on short windows; the logo stays pinned instead of being
     scrolled out and shown half-clipped at the top edge. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pk-sidebar-bg);
}
.pk-brand-logo { height: calc(var(--pk-brand-h) - 2px); width: 36px; flex: 0 0 auto; object-fit: contain; transition: height 140ms var(--pk-ease, ease), width 140ms var(--pk-ease, ease); }
/* Expanded (hovered) sidebar: no wordmark text, so give the mark the room and
   show it large. Collapsed keeps the compact 36px square above. */
/* The taller logo would push the nav down and, since .pk-sidebar is
   overflow:hidden, clip Settings off the bottom. Reclaim it from the gap above
   Search — the big logo already separates itself visually, so the 1.1rem margin
   is redundant once expanded. */
.pk-sidebar:hover .pk-brand, .pk-sidebar:focus-within .pk-brand { height: var(--pk-brand-open-h); margin-top: 0; margin-bottom: 0; }
.pk-sidebar:hover .pk-brand-logo, .pk-sidebar:focus-within .pk-brand-logo { height: var(--pk-brand-open-h); width: auto; max-width: 168px; object-position: left center; }
.pk-brand-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pk-fg);
  white-space: nowrap;
}
.pk-brand-tv { color: var(--pk-accent); }
.pk-nav { display: flex; flex-direction: column; gap: var(--pk-nav-gap); }
.pk-nav-spacer { flex: 1; }

.pk-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: var(--pk-nav-pad-y) 0.7rem;
  border-radius: 10px;
  color: var(--pk-muted);
  white-space: nowrap;
  /* The label inherits body line-height (1.5), which made every row ~4px taller
     than its own icon for no visual gain. 1.2 still clears the descenders in
     every shipped script (incl. Arabic) and buys ~70px back across the rail. */
  line-height: 1.2;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 550;
  text-align: start;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pk-nav-item:hover { background: var(--pk-nav-hover); color: var(--pk-fg); }
.pk-nav-item.active { color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 10%, transparent); }
.pk-nav-item.active::before {
  content: "";
  position: absolute;
  left: -0.6rem; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pk-accent);
}
.pk-nav-item .pk-ico { width: var(--pk-nav-ico); height: var(--pk-nav-ico); flex: 0 0 var(--pk-nav-ico); }
.pk-nav-label { opacity: 0; transition: opacity 0.18s var(--ease); }
.pk-sidebar:hover .pk-nav-label, .pk-sidebar:focus-within .pk-nav-label { opacity: 1; }
.pk-signout { color: var(--pk-danger); }

.pk-main {
  margin-left: var(--pk-sidebar);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---------- hero ---------- */
.pk-hero {
  position: relative;
  min-height: 41vh; /* ~33% shorter than the previous 62vh */
  background-size: cover;
  /* anchor the crop to the top of the still (same as the TV client). A 16:9
     backdrop is much taller than the shortened hero, so a centred crop ate the
     top ~30% of the frame and beheaded the subjects. */
  background-position: center top;
  display: flex;
  align-items: flex-end;
}
/* bottom scrim so the hero melts into the rails (art + 90° scrim stay inline) */
.pk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pk-scrim-y);
  pointer-events: none;
  z-index: 0;
}
/* The copy stacks at the bottom of the banner; any reserved space (below) stays
   empty above the eyebrow, over the artwork. */
.pk-hero-inner {
  position: relative; z-index: 1;
  padding: 2.5rem var(--pk-gutter) var(--pk-hero-pad-b, 3.2rem);
  max-width: 760px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* At most two title lines (ellipsis after). line-height 1.2, not 1.05: the clamp
   clips at the title box, and below ~1.17 Inter's İ/Ö dots are cut on line one,
   line two loses its descenders and line three's dots show under line two. */
.pk-hero-title {
  font-size: var(--fs-hero);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  font-weight: 800;
  color: var(--pk-on-art);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* At most two subtitle / overview lines at every width. */
.pk-hero-overview {
  color: var(--pk-on-art-soft);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 1.4rem;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pk-hero-actions { display: flex; gap: 0.8rem; }
/* One chip row: a wrapped second row would make this banner taller than the next. */
.pk-hero-inner .pk-detail-meta { flex-wrap: nowrap; overflow: hidden; }
.pk-hero-inner .pk-detail-meta > * { white-space: nowrap; flex: none; }

/* One height for every slide (owner 2026-09-26: a 1-line and a 2-line title made
   the banner, and the whole page under it, jump on each slide change). The copy
   area is sized as if the title always took two lines, plus the tallest optional
   rows ANY slide of this carousel has (chips / subtitle / button, flagged by
   heroReserveClass), so no slide can be taller or shorter than another. Each
   term matches the rule it reserves: padding, eyebrow (0.72rem, ~1.2 line-height
   rounded up to 1.4) + 0.55rem, title 2 x 1.2 + 0.9rem, chip (0.8rem x 1.4 + 2 x
   3px) + 1rem, subtitle 2 x 1.55 + 1.4rem, .pk-btn-lg 52px. */
.pk-hero-carousel {
  --pk-hero-pad-b: 3.2rem;
  --pk-hero-meta-row: 0px;
  --pk-hero-sub-row: 0px;
  --pk-hero-act-row: 0px;
}
.pk-hero-carousel.pk-hero-has-meta { --pk-hero-meta-row: calc(var(--fs-small) * 1.4 + 6px + 1rem); }
.pk-hero-carousel.pk-hero-has-sub { --pk-hero-sub-row: calc(var(--fs-body) * 1.55 * 2 + 1.4rem); }
.pk-hero-carousel.pk-hero-has-act { --pk-hero-act-row: 52px; }
.pk-hero-carousel .pk-hero-inner {
  min-height: calc(2.5rem + var(--fs-micro) * 1.4 + 0.55rem + var(--fs-hero) * 1.2 * 2 + 0.9rem
    + var(--pk-hero-meta-row) + var(--pk-hero-sub-row) + var(--pk-hero-act-row) + var(--pk-hero-pad-b));
}

/* ---------- hero carousel (multi-banner) ---------- */
/* Wraps a single .pk-hero slide plus the overlaid arrows + dot indicators. */
.pk-hero-carousel { position: relative; }
.pk-hero-link { display: block; }
.pk-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--pk-border);
  background: color-mix(in srgb, var(--pk-popover) 80%, transparent);
  color: var(--pk-fg);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  z-index: 3;
  box-shadow: var(--pk-shadow-2);
}
.pk-hero-carousel:hover .pk-hero-arrow { opacity: 1; }
.pk-hero-arrow:hover { color: var(--pk-accent); }
.pk-hero-arrow svg { width: 24px; height: 24px; }
.pk-hero-arrow-l { left: 16px; }
.pk-hero-arrow-r { right: 16px; }
/* Slide indicators: thin horizontal line segments (bottom-right), the active one
   filling left->right over the 5s auto-advance. */
.pk-hero-dots {
  position: absolute;
  right: 32px;
  bottom: 26px;
  left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.pk-hero-dot {
  width: 42px; height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* the track */
.pk-hero-dot::before {
  content: "";
  display: block;
  width: 100%; height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pk-on-art) 32%, transparent);
  transition: background var(--t-fast) var(--ease);
}
.pk-hero-dot:hover::before { background: color-mix(in srgb, var(--pk-on-art) 60%, transparent); }
/* active: a brighter base + an accent fill that animates across over 5s (the
   auto-advance interval), restarting whenever the active slide changes. */
.pk-hero-dot.on::before { background: color-mix(in srgb, var(--pk-on-art) 30%, transparent); }
.pk-hero-dot.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  border-radius: 3px;
  background: var(--pk-accent);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  animation: pk-hero-fill 5s linear forwards;
}
@keyframes pk-hero-fill {
  from { transform: translateY(-50%) scaleX(0); }
  to   { transform: translateY(-50%) scaleX(1); }
}

/* ---------- rails ---------- */
.pk-rails { padding: 1.6rem var(--pk-gutter) 3rem; display: flex; flex-direction: column; gap: 2rem; }
.pk-rail-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  font-weight: 700;
}
/* thin rule fading right, after the title text */
.pk-rail-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--pk-border), transparent 70%);
}
.pk-rail-viewport { position: relative; }
.pk-rail-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px;            /* room for hover lift + focus ring */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pk-rail-track::-webkit-scrollbar { display: none; }
.pk-rail-arrow {
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  display: grid;
  place-items: center;
  border: none;
  color: var(--pk-fg);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 5;
  background: none;
}
/* circular button look inside the fade strip */
.pk-rail-arrow::before {
  content: "";
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pk-popover) 88%, transparent);
  border: 1px solid var(--pk-border);
  box-shadow: var(--pk-shadow-2);
  z-index: -1;
}
.pk-rail:hover .pk-rail-arrow, .pk-rail:focus-within .pk-rail-arrow { opacity: 1; }
.pk-rail-arrow:hover { color: var(--pk-accent); }
.pk-rail-arrow svg { width: 26px; height: 26px; }
.pk-rail-left { left: 0; background: linear-gradient(90deg, rgba(var(--pk-fade), 0.95), rgba(var(--pk-fade), 0)); }
.pk-rail-right { right: 0; background: linear-gradient(270deg, rgba(var(--pk-fade), 0.95), rgba(var(--pk-fade), 0)); }
[dir="rtl"] .pk-rail-left { left: auto; right: 0; background: linear-gradient(270deg, rgba(var(--pk-fade), 0.95), rgba(var(--pk-fade), 0)); }
[dir="rtl"] .pk-rail-right { right: auto; left: 0; background: linear-gradient(90deg, rgba(var(--pk-fade), 0.95), rgba(var(--pk-fade), 0)); }
[dir="rtl"] .pk-rail-arrow svg { transform: rotate(180deg); }
.pk-notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 70vh; text-align: center; }

/* ---------- poster cards ---------- */
.pk-card {
  flex: 0 0 var(--pk-rail);
  scroll-snap-align: start;
  border-radius: var(--rad-m);
  overflow: hidden;
  background: var(--pk-surface);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.pk-card:hover { transform: scale(1.04); box-shadow: var(--pk-shadow-2); z-index: 2; }
.pk-card:has(:focus-visible) { transform: scale(1.04); box-shadow: 0 0 0 2px var(--pk-accent), 0 0 0 7px var(--pk-ring), var(--pk-shadow-2); z-index: 2; }
.pk-card:has(:focus-visible) .pk-card-link:focus-visible { outline: none; box-shadow: none; }
.pk-card-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--pk-elevated); }
.pk-card-ph {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  text-align: center;
  color: var(--pk-muted);
  font-size: var(--fs-small);
  background: linear-gradient(110deg,
    var(--pk-elevated) 35%,
    color-mix(in srgb, var(--pk-elevated) 70%, var(--pk-popover)) 48%,
    var(--pk-elevated) 61%);
  background-size: 220% 100%;
  animation: pk-shimmer 1.8s var(--ease) infinite;
}
@keyframes pk-shimmer {
  0% { background-position: 110% 0; }
  100% { background-position: -110% 0; }
}
/* skeleton blocks (markup arrives in Phase B; class is ready) */
.pk-skel {
  border-radius: var(--rad-m);
  background: linear-gradient(110deg,
    var(--pk-surface) 35%,
    var(--pk-elevated) 48%,
    var(--pk-surface) 61%);
  background-size: 220% 100%;
  animation: pk-shimmer 1.8s var(--ease) infinite;
}

/* ---------- grids ---------- */
.pk-page-title {
  padding: 1.7rem var(--pk-gutter) 0.4rem;
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 750;
  letter-spacing: -0.015em;
}

/* ---------- search bar (Live + VOD) ---------- */
.pk-searchbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 var(--pk-gutter) 0.6rem;
  padding: 0.5rem 0.95rem;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-m);
  max-width: 520px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pk-searchbar:focus-within { border-color: var(--pk-accent); box-shadow: 0 0 0 4px var(--pk-ring); }
.pk-searchbar svg { width: 20px; height: 20px; color: var(--pk-muted); flex: 0 0 auto; }
.pk-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--pk-fg);
  font: inherit;
  font-size: 1rem;
}
.pk-search-input::placeholder { color: var(--pk-muted); }
.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pk-rail), 1fr));
  gap: 1rem;
  padding: 1rem var(--pk-gutter) 3rem;
}
.pk-grid .pk-card { flex: initial; }

/* ---------- channels ---------- */
.pk-chan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1rem var(--pk-gutter) 3rem;
}
.pk-chan {
  flex: 0 0 150px;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-m);
  /* tight padding so the logo — the thing people actually scan for — gets the
     tile rather than the margin */
  padding: 0.5rem 0.5rem 0.55rem;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pk-chan:hover { transform: translateY(-3px); border-color: var(--pk-ring); box-shadow: var(--pk-shadow-2); }
.pk-chan-logo {
  height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 0.45rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent);
  border-radius: var(--rad-s);
}
.pk-chan-logo img { max-height: 92px; max-width: 100%; object-fit: contain; }
.pk-chan-mono {
  width: 76px; height: 76px; font-size: 1.35rem;
  display: grid; place-items: center;
  background: var(--pk-elevated);
  border-radius: 10px;
  font-weight: 800;
  color: var(--pk-gold);
}
.pk-chan-name { text-align: center; font-size: var(--fs-ui); color: var(--pk-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-chan-grid .pk-chan { flex: initial; }

/* ---------- states ---------- */
.pk-loading, .pk-error, .pk-muted { padding: 1.5rem var(--pk-gutter); color: var(--pk-muted); }
.pk-error { color: var(--pk-danger); }

/* branded full-surface empty / error states: a centered icon medallion above a
   single message line (see stateBlock/emptyState/errorState in web/ui/cards.go).
   Standardizes every "nothing here" / "couldn't load" surface to one shape. */
.pk-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  min-height: 44vh;
  padding: 2rem var(--pk-gutter);
}
.pk-state-ico {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  color: var(--pk-muted);
}
.pk-state-ico svg { width: 32px; height: 32px; }
.pk-state-msg { margin: 0; color: var(--pk-muted); font-size: var(--fs-body); max-width: 32rem; line-height: 1.45; }
.pk-state-empty .pk-state-ico {
  color: var(--pk-accent);
  border-color: color-mix(in srgb, var(--pk-accent) 30%, transparent);
  background: color-mix(in srgb, var(--pk-accent) 8%, var(--pk-surface));
}
.pk-state-error .pk-state-ico {
  color: var(--pk-danger);
  border-color: color-mix(in srgb, var(--pk-danger) 40%, transparent);
  background: color-mix(in srgb, var(--pk-danger) 12%, var(--pk-surface));
}
.pk-panel {
  margin: 1rem var(--pk-gutter);
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-l);
  padding: 1.4rem;
  max-width: 560px;
}
.pk-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; }
.pk-row + .pk-row { border-top: 1px solid var(--pk-border); }
.pk-panel-title { margin: 0 0 0.5rem; font-size: var(--fs-h2); font-weight: 700; color: var(--pk-fg); }

/* self-service device list (Settings → Your devices) */
.pk-btn-sm { min-height: 0; padding: 0.4rem 0.9rem; font-size: var(--fs-small); flex: 0 0 auto; }
.pk-device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; }
.pk-device-row + .pk-device-row { border-top: 1px solid var(--pk-border); }
.pk-device-info { min-width: 0; }
.pk-device-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.pk-device-badge {
  font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 14%, transparent);
  border-radius: 999px; padding: 1px 8px;
}
.pk-device-meta { font-size: var(--fs-small); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-device-actions { margin-top: 0.8rem; }
.pk-seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: var(--pk-elevated);
  border: 1px solid var(--pk-border);
  border-radius: 10px;
  padding: 3px;
}
.pk-seg-btn {
  border: 0; background: transparent; color: var(--pk-fg);
  font: inherit; font-size: var(--fs-ui); font-weight: 550;
  padding: 0.4rem 0.85rem; border-radius: 7px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pk-seg-btn:hover { background: rgba(127, 127, 127, 0.18); }
/* Selected: a tick and an underline. The accent fill is focus's (above). */
.pk-seg-btn.active { box-shadow: inset 0 -2px 0 var(--pk-accent); font-weight: 700; }
.pk-seg-btn.active::before { content: "\2713\00a0"; color: var(--pk-accent); }

/* ---------- buttons (ghost) ---------- */
/* default: theme-aware (toolbars, panels) */
.pk-btn-ghost {
  background: var(--pk-elevated);
  color: var(--pk-fg);
  border: 1px solid var(--pk-border);
}
.pk-btn-ghost:hover { background: var(--pk-popover); filter: none; box-shadow: none; border-color: var(--pk-muted); }
/* on artwork (hero / banner / detail): translucent glass, fixed light ink */
.pk-hero-actions .pk-btn-ghost,
.pk-vbanner-actions .pk-btn-ghost,
.pk-detail-actions .pk-btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: var(--pk-on-art);
  border: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pk-hero-actions .pk-btn-ghost:hover,
.pk-vbanner-actions .pk-btn-ghost:hover,
.pk-detail-actions .pk-btn-ghost:hover { background: rgba(255, 255, 255, 0.26); }

/* ---------- poster hover play ---------- */
.pk-card { position: relative; }
.pk-card-link { display: block; position: relative; }
/* bottom gradient on hover, so overlaid affordances read on bright art */
.pk-card-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}
.pk-card:hover .pk-card-link::after { opacity: 1; }
.pk-card-play, .pk-card-info {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(8, 10, 13, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  z-index: 2;
}
.pk-card-play svg, .pk-card-info svg { width: 18px; height: 18px; }
.pk-card:hover .pk-card-play, .pk-card:hover .pk-card-info,
.pk-card:has(:focus-visible) .pk-card-play, .pk-card:has(:focus-visible) .pk-card-info { opacity: 1; transform: translateY(0); }
.pk-card-play:hover, .pk-card-info:hover { background: var(--pk-gold); color: var(--pk-accent-fg); border-color: transparent; }
.pk-card-play:focus-visible, .pk-card-info:focus-visible { opacity: 1; transform: none; background: var(--pk-gold); color: var(--pk-accent-fg); outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- watch shells ---------- */
.pk-watch {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  outline: none;
}
.pk-back {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 30;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease);
}
.pk-back:hover { background: rgba(0, 0, 0, 0.85); }
.pk-back svg { width: 22px; height: 22px; }

/* live split layout: player left, EPG right */
.pk-watch-live { background: var(--pk-bg-deep); }
.pk-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: 100vh;
}
@media (max-width: 900px) {
  .pk-live-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* ---------- player stage ---------- */
.pk-stage {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pk-stage-full { width: 100vw; height: 100vh; }
.pk-stage-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Client-side ad insertion (Google IMA) overlay — covers the video during an ad. */
.pk-ads { position: absolute; inset: 0; z-index: 10; display: none; background: #000; }
.pk-ads.on { display: block; }
.pk-ads > div, .pk-ads iframe, .pk-ads video { width: 100% !important; height: 100% !important; }
.pk-watch-live .pk-stage {
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
}
.pk-stage-mini {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rad-m);
  box-shadow: var(--pk-shadow-3);
}
/* top scrim for orientation while the controls are up (back button context) */
.pk-stage::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  z-index: 1;
}
body.pk-player-active .pk-stage::before { opacity: 1; }
.pk-stage-status {
  position: absolute;
  bottom: 5rem;
  padding: 0.55rem 1rem;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rad-s);
  color: #e6e6ea;
  font-size: var(--fs-ui);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* A failure has to be readable over any picture (owner 2026-09-28: "hata metni zor okunuyordu"): an opaque
   panel, white semibold text a step larger, the red only as the inline-start accent. */
.pk-stage-status.failed {
  color: #fff; background: rgba(12, 12, 16, 0.92); border-color: rgba(255, 138, 144, 0.35);
  border-inline-start: 4px solid #ff5a64; font-weight: 600; font-size: calc(var(--fs-ui) * 1.15);
  padding: 0.75rem 1.1rem; max-width: min(40rem, calc(100% - 2rem)); line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pk-vod-skip-wrap {
  position: absolute;
  inset-inline-end: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(9rem + env(safe-area-inset-bottom));
  z-index: 4;
  max-width: min(22rem, calc(100vw - 2.5rem));
}
.pk-vod-skip {
  min-height: 44px;
  padding: .65rem 1.1rem;
  color: #fff;
  background: rgba(0,0,0,.88);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  font-weight: 700;
}
.pk-vod-skip:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .pk-vod-skip-wrap { bottom: calc(11rem + env(safe-area-inset-bottom)); }
}

/* ---------- radio audio visualizer (decorative) ----------
   Radio is audio-only, so the <video> stage stays black. This overlays a purely
   cosmetic, looping animation — a glowing neon ring (concentric circles) centered
   over a horizontal, left-right-symmetric equalizer bar field. It is NOT driven by
   real audio (CSS keyframes only), so it can never affect playback. pointer-events
   stay off so the stage's controls/auto-hide keep working underneath. */
.pk-radio-viz {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* above the black video, below titlebar/controls */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, #11060f 0%, #07030a 55%, #000 100%);
}
/* symmetric equalizer bar field across the stage, centered vertically */
.pk-viz-bars {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.9vw, 9px);
  height: 46%;
  opacity: 0.92;
}
.pk-viz-bar {
  --i: 0;
  --w: 4;
  width: clamp(4px, 0.9vw, 11px);
  height: calc(14% + var(--w) * 9%);
  border-radius: 6px;
  background: linear-gradient(180deg, #7a5bff 0%, #c026d3 45%, #ff3b6b 100%);
  box-shadow: 0 0 10px rgba(192, 38, 211, 0.55), 0 0 22px rgba(122, 91, 255, 0.35);
  transform-origin: bottom center;
  animation: pk-viz-eq 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.13s);
}
@keyframes pk-viz-eq {
  0%   { transform: scaleY(0.28); opacity: 0.7; }
  100% { transform: scaleY(1);    opacity: 1; }
}
/* glowing neon ring: concentric circles + a soft core, centered over the bars */
.pk-viz-ring {
  position: relative;
  width: clamp(120px, 24vw, 280px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pk-viz-ring span {
  position: absolute;
  border-radius: 50%;
}
.pk-viz-ring1 {
  inset: 0;
  border: 3px solid rgba(122, 91, 255, 0.85);
  box-shadow: 0 0 26px rgba(122, 91, 255, 0.7), inset 0 0 26px rgba(122, 91, 255, 0.45);
  animation: pk-viz-pulse 2.6s ease-in-out infinite;
}
.pk-viz-ring2 {
  inset: 14%;
  border: 2px solid rgba(192, 38, 211, 0.85);
  box-shadow: 0 0 22px rgba(192, 38, 211, 0.7), inset 0 0 22px rgba(192, 38, 211, 0.4);
  animation: pk-viz-pulse 2.6s ease-in-out infinite;
  animation-delay: -0.5s;
}
.pk-viz-ring3 {
  inset: 28%;
  border: 2px solid rgba(255, 59, 107, 0.85);
  box-shadow: 0 0 20px rgba(255, 59, 107, 0.7), inset 0 0 20px rgba(255, 59, 107, 0.4);
  animation: pk-viz-pulse 2.6s ease-in-out infinite;
  animation-delay: -1s;
}
.pk-viz-core {
  inset: 42%;
  background: radial-gradient(circle, #ff5e9a 0%, #c026d3 45%, rgba(122, 91, 255, 0) 75%);
  box-shadow: 0 0 40px rgba(255, 59, 107, 0.6);
  animation: pk-viz-glow 1.8s ease-in-out infinite alternate;
}
@keyframes pk-viz-pulse {
  0%   { transform: scale(0.92); opacity: 0.65; }
  50%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0.65; }
}
@keyframes pk-viz-glow {
  0%   { opacity: 0.55; transform: scale(0.9); }
  100% { opacity: 1;    transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-viz-bar, .pk-viz-ring span, .pk-viz-core { animation: none; }
}

/* ---------- custom controls ---------- */
.pk-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1rem 0.8rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  z-index: 2;
}
/* Controls + cursor auto-hide: JS toggles body.pk-player-active on mouse-move
   over the video / key press, and removes it after ~3s idle. Keyboard focus on
   a control keeps them up. */
body.pk-player-active .pk-controls,
.pk-controls:focus-within { opacity: 1; pointer-events: auto; }
/* Back button stays visible + clickable (it sits outside the stage, so the
   stage's mouse-move would not reveal it). */
body:not(.pk-player-active) .pk-stage-full { cursor: none; }

.pk-seek {
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  margin: 0 0.4rem 0.7rem;
  transition: height var(--t-fast) var(--ease);
  /* A finger drag across the bar must scrub, not scroll the page. The
     compositor decides that before the touchmove handler runs, so the JS
     preventDefault alone cannot claim the gesture. */
  touch-action: none;
}
.pk-seek-buffered { position: absolute; top: 0; left: 0; height: 100%; background: rgba(255, 255, 255, 0.30); border-radius: 3px; }
.pk-seek-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--pk-gold); border-radius: 3px; }
.pk-seek-knob {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  background: var(--pk-accent-hi);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--pk-ring), 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.pk-seek:hover .pk-seek-knob { opacity: 1; }
/* Children must not swallow pointer events — the bar itself handles click/drag. */
.pk-seek > * { pointer-events: none; }
.pk-seek:hover { height: 7px; }
/* The bar is keyboard-operable (role=slider, arrows/PageUp/Home/End), so it must
   show where focus is and where the playhead is while being driven blind. Only
   :focus-visible, so a mouse click does not leave a ring behind. */
.pk-seek:focus { outline: none; }
.pk-seek:focus-visible {
  height: 7px;
  outline: 2px solid var(--pk-accent-hi);
  outline-offset: 4px;
}
.pk-seek:focus-visible .pk-seek-knob { opacity: 1; }

/* Seek-bar preview thumbnail (trick-play), shown while the pointer is over the
   bar. Parented to <body> and `fixed` so it escapes the control bar's stacking
   and clipping, and so go-app's diffing never sees it.

   Only the STATIC properties live here. Every per-hover value — the tile size,
   the sprite offset and the card's position — is an inline style written as
   computed pixels by initSeekPreview, because no static class can express a
   background offset that changes with the cursor. */
.pk-seek-preview {
  position: fixed;
  z-index: 200;
  display: none;
  padding: 4px;
  background: var(--pk-popover);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-m);
  box-shadow: var(--pk-shadow-3);
  /* It follows the cursor across the very control it describes, so it must never
     become the pointer target: swallowing a mousemove here would break the drag
     scrub the bar is in the middle of. */
  pointer-events: none;
}
.pk-seek-preview-img {
  display: block;
  border-radius: var(--rad-s);
  background-color: #000;
  background-repeat: no-repeat;
}
.pk-seek-preview-time {
  margin-top: 4px;
  text-align: center;
  color: var(--pk-fg);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

.pk-ctrl-row { display: flex; align-items: center; gap: 0.35rem; }
.pk-ctrl-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: none;
  color: #fff; cursor: pointer;
  border-radius: 10px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pk-ctrl-btn:hover { background: rgba(255, 255, 255, 0.15); }
.pk-ctrl-btn.on { color: var(--pk-gold); }
.pk-ctrl-btn svg { width: 22px; height: 22px; }
.pk-ctrl-spacer { flex: 1; }
.pk-time { color: #d6d6da; font-size: var(--fs-small); font-variant-numeric: tabular-nums; padding: 0 0.4rem; }

.pk-live-badge { width: auto !important; gap: 0.35rem; padding: 0 0.6rem; color: var(--pk-live) !important; }
.pk-live-badge .pk-live-txt { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.06em; }
.pk-live-badge.behind { color: #fff !important; opacity: 0.7; }

.pk-vol { display: flex; align-items: center; }
.pk-vol-range { width: 0; opacity: 0; transition: width var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); accent-color: var(--pk-accent); }
.pk-vol:hover .pk-vol-range { width: 80px; opacity: 1; margin-right: 0.4rem; }

/* track menus */
.pk-menu {
  position: absolute;
  right: 1rem; bottom: 4.2rem;
  min-width: 200px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: rgba(22, 26, 35, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rad-m);
  padding: 0.4rem;
  box-shadow: var(--pk-shadow-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pk-menu-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.07em; color: #9aa3ad; padding: 0.45rem 0.6rem; }
.pk-menu-item {
  display: block; width: 100%; text-align: start;
  padding: 0.55rem 0.7rem;
  background: none; border: none; color: #f4f6f8;
  border-radius: var(--rad-s); cursor: pointer; font: inherit; font-size: var(--fs-ui);
}
.pk-menu-item:hover { background: rgba(255, 255, 255, 0.08); }
.pk-menu-item.active { color: var(--pk-accent-hi); font-weight: 650; }
.pk-menu-item.disabled { color: #8b96a3; cursor: default; }

.pk-zap-hint {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
  pointer-events: none;
}

/* ---------- Shorts (portrait VOD) ---------- */
/* Browse: portrait 9:16 poster cards (the catalog cards default to 2:3) — in the
   genre rails and a genre's grid of the chip-row page (owner 2026-09-27), and in
   the old rails of a server without /shorts/rails. */
.pk-shorts .pk-card-img,
.pk-section-browse[data-section="shorts"] .pk-card-img,
.pk-section-browse[data-section="shorts"] .pk-skel-card { aspect-ratio: 9 / 16; }
/* Player: a centered, height-bound 9:16 stage instead of the 16:9 / full layouts,
   so the vertical (1080x1920) video sits centered with side letterboxing on a
   landscape window. The Shaka <video> + IMA ads overlay are reused verbatim, so
   only the stage box is reshaped — playback + ad rendering match VOD exactly. */
.pk-watch-shorts { display: grid; place-items: center; }
.pk-shorts-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}
.pk-stage-portrait {
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: var(--rad-m);
  overflow: hidden;
}
.pk-stage-portrait .pk-stage-video { width: 100%; height: 100%; object-fit: contain; }

/* ---------- EPG panel ---------- */
.pk-epg {
  background: var(--pk-surface);
  border-inline-start: 1px solid var(--pk-border);
  overflow-y: auto;
  padding: 1rem;
}
.pk-epg-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.4rem 0.2rem 0.8rem;
  border-bottom: 1px solid var(--pk-border);
  margin-bottom: 0.4rem;
  position: sticky; top: 0;
  background: var(--pk-surface);
  z-index: 2;
}
.pk-epg-logo { max-height: 40px; max-width: 80px; object-fit: contain; background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 2px 4px; }
.pk-epg-chan { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.pk-epg-date {
  position: sticky; top: 58px;
  background: var(--pk-surface);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pk-muted);
  padding: 0.7rem 0.2rem 0.35rem;
  z-index: 1;
}
.pk-epg-row { border-radius: var(--rad-s); transition: background var(--t-fast) var(--ease); }
.pk-epg-row.past { opacity: 0.5; }
.pk-epg-row.now { background: color-mix(in srgb, var(--pk-accent) 13%, transparent); box-shadow: inset 2px 0 0 var(--pk-accent); }
[dir="rtl"] .pk-epg-row.now { box-shadow: inset -2px 0 0 var(--pk-accent); }
.pk-epg-row.open { background: rgba(127, 127, 127, 0.10); }
.pk-epg-row.now.open { background: color-mix(in srgb, var(--pk-accent) 19%, transparent); }
.pk-epg-line { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.4rem; }
.pk-epg-time { color: var(--pk-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; min-width: 44px; }
.pk-epg-row.now .pk-epg-time { color: var(--pk-accent); font-weight: 650; }
.pk-epg-body { flex: 1; min-width: 0; }
.pk-epg-title { font-size: 0.92rem; }
.pk-epg-row.now .pk-epg-title { font-weight: 650; }
.pk-epg-sub { font-size: var(--fs-small); color: var(--pk-muted); }
.pk-epg-bar { height: 4px; background: rgba(127, 127, 127, 0.22); border-radius: 2px; margin-top: 0.5rem; overflow: hidden; }
.pk-epg-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pk-accent), var(--pk-accent-hi)); border-radius: 2px; }
.pk-epg-empty { color: var(--pk-muted); padding: 1rem 0.2rem; }
/* expand button + expanded detail */
.pk-epg-expand {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--pk-muted); padding: 2px; margin-top: 1px;
}
.pk-epg-expand:hover { color: var(--pk-fg); }
.pk-epg-expand svg { width: 16px; height: 16px; display: block; transition: transform 0.18s var(--ease); }
.pk-epg-row.open .pk-epg-expand svg { transform: rotate(180deg); }
.pk-epg-info { display: flex; gap: 0.7rem; padding: 0 0.4rem 0.7rem 0.4rem; }
.pk-epg-info-img { width: 72px; max-height: 100px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--pk-elevated); }
.pk-epg-info-text { flex: 1; min-width: 0; }
.pk-epg-cat { display: inline-block; font-size: var(--fs-micro); font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--pk-elevated); color: var(--pk-fg-soft); margin-bottom: 0.45rem; }
.pk-epg-meta { font-size: var(--fs-small); color: var(--pk-muted); margin: 0 0 0.5rem; }
.pk-epg-desc { font-size: var(--fs-small); color: var(--pk-fg); margin: 0 0 0.5rem; line-height: 1.5; }
.pk-epg-crew { font-size: 0.82rem; color: var(--pk-muted); margin: 0.2rem 0 0; }
.pk-epg-crew-label { color: var(--pk-fg); font-weight: 600; }
.pk-epg-remind {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.6rem; padding: 0.45rem 0.85rem;
  background: var(--pk-accent); color: var(--pk-accent-fg);
  border: none; border-radius: var(--rad-s); cursor: pointer; font: inherit; font-size: var(--fs-small); font-weight: 650;
}
.pk-epg-remind:hover { filter: brightness(1.08); }
.pk-epg-remind svg { width: 16px; height: 16px; }
.pk-epg-remind.done { background: transparent; color: var(--pk-accent); cursor: default; padding-left: 0; }

/* ---------- program guide (full EPG grid) ---------- */
.pk-guide {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - 150px);
  margin: 0 var(--pk-gutter) 2rem;
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-l);
  background: var(--pk-bg-deep);
}
.pk-guide-head {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--pk-surface);
  border-bottom: 1px solid var(--pk-border);
}
.pk-guide-corner {
  position: sticky;
  left: 0;
  z-index: 8;
  flex: 0 0 156px;
  width: 156px;
  padding: 0 0.7rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--fs-small);
  background: var(--pk-surface);
  border-right: 1px solid var(--pk-border);
}
.pk-guide-axis { position: relative; flex: 0 0 auto; height: 38px; }
.pk-guide-tick {
  position: absolute;
  top: 11px;
  padding-left: 6px;
  border-left: 1px solid var(--pk-border);
  height: 16px;
  font-size: var(--fs-small);
  color: var(--pk-muted);
  font-variant-numeric: tabular-nums;
}
.pk-guide-rows { position: relative; }
.pk-guide-row { display: flex; height: 64px; }
.pk-guide-chan {
  position: sticky;
  left: 0;
  z-index: 6;
  flex: 0 0 156px;
  width: 156px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.6rem;
  overflow: hidden;
  background: var(--pk-surface);
  border-right: 1px solid var(--pk-border);
  border-bottom: 1px solid var(--pk-border);
  color: var(--pk-fg);
}
.pk-guide-chan:hover { background: var(--pk-elevated); }
.pk-guide-logo { max-height: 30px; max-width: 44px; object-fit: contain; flex: 0 0 auto; background: rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 2px 3px; }
.pk-guide-chan-mono { font-weight: 700; font-size: var(--fs-small); color: var(--pk-muted); flex: 0 0 auto; }
.pk-guide-chan-name {
  font-size: 0.82rem; line-height: 1.15;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pk-guide-track { position: relative; flex: 0 0 auto; height: 64px; border-bottom: 1px solid var(--pk-border); }
.pk-guide-prog {
  position: absolute;
  top: 5px; bottom: 5px;
  z-index: 1;
  display: flex; gap: 4px;
  padding: 6px 9px;
  background: var(--pk-surface);
  border: none;
  border-right: 2px solid var(--pk-bg-deep);
  border-radius: var(--rad-s);
  color: var(--pk-fg);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.pk-guide-prog:hover { background: var(--pk-elevated); }
.pk-guide-prog.past { opacity: 0.45; }
.pk-guide-prog.now { background: color-mix(in srgb, var(--pk-accent) 20%, var(--pk-surface)); box-shadow: inset 2px 0 0 var(--pk-accent); cursor: pointer; }
a.pk-guide-prog.now:hover { background: color-mix(in srgb, var(--pk-accent) 32%, var(--pk-surface)); }
/* CATCH-UP. A replayable past programme was rendered with the class but no rule,
   so it looked exactly like a dead one: clickable, with nothing saying so. It is
   still dimmer than the present (it is over), but readable rather than 45%, and
   carries the same accent edge the now-airing block uses to mean "this plays". */
.pk-guide-prog.past.cu { opacity: 0.8; cursor: pointer; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--pk-accent) 70%, transparent); }
a.pk-guide-prog.past.cu:hover { opacity: 1; background: color-mix(in srgb, var(--pk-accent) 18%, var(--pk-surface)); }
.pk-guide-prog.past.cu .pk-guide-prog-time { color: var(--pk-accent-hi); }
.pk-guide-prog-body { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pk-guide-prog-time { display: block; font-size: var(--fs-micro); color: var(--pk-muted); font-variant-numeric: tabular-nums; }
.pk-guide-prog.now .pk-guide-prog-time { color: var(--pk-accent-hi); font-weight: 650; }
.pk-guide-prog-title { display: block; font-size: 0.84rem; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-guide-prog.now .pk-guide-prog-title { font-weight: 650; }
.pk-guide-remind {
  position: sticky; right: 6px; z-index: 2;
  align-self: flex-start; flex: 0 0 auto;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.5); border: none; border-radius: 6px;
  color: #fff; cursor: pointer; padding: 0;
  opacity: 0.5; transition: opacity var(--t-fast) var(--ease);
}
.pk-guide-prog:hover .pk-guide-remind { opacity: 1; }
.pk-guide-remind:hover { background: var(--pk-accent); color: var(--pk-accent-fg); }
.pk-guide-remind svg { width: 14px; height: 14px; }
.pk-guide-remind.on { opacity: 1; color: var(--pk-accent); }
/* The replay glyph must not hide at rest the way the remind bell does. Nested in
   a `.past` block its 0.5 compounds with that block's opacity (~0.22 effective),
   which is why catch-up read as unimplemented even though it worked. */
.pk-guide-remind.cu { opacity: 0.92; background: var(--pk-accent); color: var(--pk-accent-fg); }
.pk-guide-remind.cu:hover, .pk-guide-remind.cu:focus-visible { opacity: 1; }
.pk-guide-remind.cu:focus-visible { outline: 2px solid var(--pk-accent-hi); outline-offset: 2px; }
.pk-guide-nowline {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  z-index: 5;
  background: var(--pk-live);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pk-live) 70%, transparent);
  pointer-events: none;
}
.pk-guide-nowline::before {
  content: "";
  position: absolute;
  top: 0; left: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pk-live);
  box-shadow: 0 0 8px color-mix(in srgb, var(--pk-live) 80%, transparent);
}
/* hover info card (floating, fixed so it escapes the grid's scroll clipping) */
.pk-guide-tip {
  position: fixed;
  z-index: 200;
  width: 300px;
  max-width: 80vw;
  padding: 0.75rem 0.9rem;
  background: var(--pk-popover);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-m);
  box-shadow: var(--pk-shadow-3);
  color: var(--pk-fg);
  pointer-events: none;
  font-size: var(--fs-small);
}
/* Fixed box (not the image's own height): the card is placed before the image loads, so a late-growing
   image pushed the card's bottom off screen (Live list hover, 2026-09-26). */
.pk-guide-tip-img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--rad-s); margin-bottom: 0.5rem; display: block; background: var(--pk-surface); }
.pk-guide-tip-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.15rem; }
.pk-guide-tip-sub { font-size: 0.85rem; font-style: italic; color: var(--pk-fg-soft); margin-bottom: 0.15rem; }
.pk-guide-tip-time { color: var(--pk-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.pk-guide-tip-cat { display: inline-block; font-size: var(--fs-micro); font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--pk-elevated); color: var(--pk-fg-soft); margin-bottom: 0.45rem; }
.pk-guide-tip-meta { color: var(--pk-muted); font-size: 0.78rem; margin-bottom: 0.4rem; }
.pk-guide-tip-desc { color: var(--pk-fg); line-height: 1.45; margin-bottom: 0.4rem; }
.pk-guide-tip-cu { display: inline-block; font-size: var(--fs-micro); font-weight: 650; padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--pk-accent) 22%, transparent); color: var(--pk-accent-hi); margin-bottom: 0.4rem; }
.pk-guide-tip-crew { color: var(--pk-muted); font-size: 0.8rem; margin-top: 0.2rem; }
.pk-guide-tip-label { color: var(--pk-fg); font-weight: 600; }

/* ---------- Watch Now (Şimdi İzle) cards ---------- */
.pk-now-card {
  position: relative;
  flex: 0 0 288px;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
  border-radius: var(--rad-m);
  overflow: hidden;
  background: var(--pk-elevated);
  display: block;
  text-decoration: none;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.pk-now-card:hover { transform: scale(1.03); box-shadow: var(--pk-shadow-2); z-index: 2; }
.pk-now-card:focus-visible { outline: none; transform: scale(1.03); box-shadow: 0 0 0 2px var(--pk-accent), 0 0 0 7px var(--pk-ring), var(--pk-shadow-2); z-index: 2; }
.pk-now-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-now-logo {
  position: absolute; top: 8px; right: 8px;
  height: 28px; max-width: 56px; object-fit: contain;
  background: rgba(0, 0, 0, 0.55); border-radius: 6px; padding: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pk-now-when {
  position: absolute; top: 8px; left: 8px;
  font-size: var(--fs-micro); font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.6); border-radius: 6px; padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pk-now-grad {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem 0.75rem 0.65rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0));
}
.pk-now-title {
  color: #fff; font-size: 0.92rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-now-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.22); }
.pk-now-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pk-accent), var(--pk-accent-hi)); }

/* ---------- reminder cards (home "My Reminders" rail) ---------- */
.pk-rem-card {
  position: relative;
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex; align-items: center;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-m);
  overflow: hidden;
}
.pk-rem-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 2rem 0.7rem 0.8rem; flex: 1; min-width: 0; color: var(--pk-fg); text-decoration: none; }
.pk-rem-link:hover { background: var(--pk-elevated); }
.pk-rem-logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.pk-rem-ico { width: 40px; height: 40px; display: grid; place-items: center; color: var(--pk-accent); flex: 0 0 auto; }
.pk-rem-ico svg { width: 24px; height: 24px; }
.pk-rem-meta { min-width: 0; }
.pk-rem-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-rem-sub { font-size: var(--fs-small); color: var(--pk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-rem-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center; background: none; border: none; color: var(--pk-muted); cursor: pointer; border-radius: 6px; }
.pk-rem-x:hover { background: var(--pk-nav-hover); color: var(--pk-fg); }
.pk-rem-x svg { width: 16px; height: 16px; }

/* ---------- Canlı TV browser (categories + channel list + EPG) ---------- */
.pk-tv { display: flex; flex: 1; min-height: 0; }
.pk-tv-cats {
  flex: 0 0 210px; width: 210px;
  padding: 1.4rem 0.8rem;
  border-inline-end: 1px solid var(--pk-border);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.pk-tv-cat {
  text-align: start; background: none; border: none; cursor: pointer;
  color: var(--pk-muted); font: inherit; font-size: var(--fs-ui); font-weight: 550;
  padding: 0.5rem 0.85rem; border-radius: var(--rad-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pk-tv-cat:hover { background: var(--pk-nav-hover); color: var(--pk-fg); }
.pk-tv-cat.active { color: var(--pk-accent); font-weight: 700; background: color-mix(in srgb, var(--pk-accent) 10%, transparent); }
.pk-tv-list { flex: 1; min-width: 0; overflow-y: auto; padding: 0.6rem 0.6rem 2rem; }
.pk-tv-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.55rem 0.9rem; border-radius: var(--rad-m);
  color: var(--pk-fg); cursor: pointer; position: relative;
  transition: background var(--t-fast) var(--ease);
}
.pk-tv-row:hover { background: var(--pk-surface); }
.pk-tv-num {
  flex: 0 0 34px;
  min-height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pk-elevated);
  border-radius: 6px;
  color: var(--pk-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  font-weight: 650;
}
.pk-tv-logo { flex: 0 0 56px; height: 40px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border-radius: var(--rad-s); }
.pk-tv-logo img { max-height: 34px; max-width: 50px; object-fit: contain; }
.pk-tv-mono { font-weight: 700; color: var(--pk-muted); font-size: var(--fs-small); }
.pk-tv-name { flex: 0 0 190px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tv-epg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pk-tv-prog { display: flex; gap: 0.6rem; font-size: var(--fs-small); min-width: 0; align-items: baseline; }
.pk-tv-prog-time { flex: 0 0 42px; color: var(--pk-muted); font-variant-numeric: tabular-nums; }
.pk-tv-prog-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tv-prog.prev { opacity: 0.45; }
.pk-tv-prog.next { color: var(--pk-muted); }
.pk-tv-prog.now .pk-tv-prog-title { font-weight: 650; }
.pk-tv-prog.now .pk-tv-prog-time { color: var(--pk-accent); font-weight: 650; }
.pk-tv-prog.now .pk-tv-prog-time::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--pk-accent);
  vertical-align: 1px;
}
.pk-tv-play { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--pk-accent); font-weight: 600; }
.pk-tv-play svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .pk-tv-cats { flex-basis: 132px; width: 132px; }
  .pk-tv-name { flex-basis: 120px; }
  .pk-tv-num { display: none; }
}

/* ---------- channel-list overlay over the live player ---------- */
.pk-chan-toggle {
  position: absolute; top: 1rem; left: 4.6rem; z-index: 30;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%; color: #fff; cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease);
}
.pk-chan-toggle:hover { background: rgba(0, 0, 0, 0.85); }
.pk-chan-toggle svg { width: 22px; height: 22px; }
.pk-ch-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(4, 6, 9, 0.82);
  display: flex; flex-direction: column;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pk-ch-overlay-x {
  position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%; color: #fff; cursor: pointer;
}
.pk-ch-overlay-x svg { width: 22px; height: 22px; }
.pk-ch-overlay-inner { flex: 1; display: flex; min-height: 0; }
.pk-ch-overlay-inner .pk-tv-cats { background: transparent; border-inline-end-color: rgba(255, 255, 255, 0.12); }
.pk-ch-overlay .pk-tv-cat { color: rgba(255, 255, 255, 0.7); }
.pk-ch-overlay .pk-tv-cat:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.pk-ch-overlay .pk-tv-cat.active { color: #fff; background: color-mix(in srgb, var(--pk-accent) 28%, transparent); }
.pk-ovch-list {
  flex: 1; overflow-y: auto; padding: 1rem 1.2rem 2rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.5rem; align-content: start;
}
.pk-ovch {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.7rem; border-radius: var(--rad-m);
  background: rgba(255, 255, 255, 0.06); border: 1px solid transparent;
  color: #fff; cursor: pointer; font: inherit; text-align: start;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pk-ovch:hover { background: rgba(255, 255, 255, 0.14); }
/* Selected (the playing channel) is a tick on a lighter row; the frame and
   ring belong to keyboard focus alone (Kabul 2). */
.pk-ovch.on { background: rgba(255, 255, 255, 0.12); }
.pk-ovch-tick { margin-inline-start: auto; flex: 0 0 auto; color: var(--pk-accent); font-weight: 700; }
.pk-ovch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: transparent; box-shadow: 0 0 0 6px var(--pk-ring); }
.pk-ch-overlay:focus, .pk-ch-overlay:focus-visible { outline: none; box-shadow: none; }
.pk-ovch-num { width: 26px; text-align: end; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; font-size: var(--fs-small); flex: 0 0 auto; }
.pk-ovch-logo { width: 48px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255, 255, 255, 0.07); border-radius: 6px; }
.pk-ovch-logo img { max-height: 30px; max-width: 44px; object-fit: contain; }
.pk-ovch-mono { font-weight: 700; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }
.pk-ovch-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- VOD detail ---------- */
.pk-detail { position: relative; min-height: 100vh; }
.pk-detail-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
/* bottom blend so the detail page doesn't end on a hard backdrop edge */
.pk-detail-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--pk-scrim-y);
  pointer-events: none;
}
.pk-back-inline { position: absolute; }
.pk-detail-main {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 5rem);
  min-height: 100vh;
}
@media (max-width: 900px) { .pk-detail-main { grid-template-columns: 1fr; } }
.pk-detail-title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--pk-on-art);
  margin: 0 0 0.8rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.pk-detail-overview { color: var(--pk-on-art-soft); line-height: 1.6; margin-bottom: 1.5rem; max-width: 52ch; }
.pk-detail-actions { display: flex; gap: 0.8rem; }
.pk-detail-tagline { color: var(--pk-on-art-soft); opacity: 0.85; font-style: italic; margin: -0.3rem 0 0.9rem; }
.pk-detail-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.pk-rating {
  display: inline-flex; align-items: center;
  background: var(--pk-elevated);
  color: var(--pk-warn);
  font-weight: 800;
  font-size: var(--fs-small);
  padding: 3px 9px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.pk-meta-text {
  display: inline-flex; align-items: center;
  color: var(--pk-on-art-soft);
  font-weight: 600;
  font-size: var(--fs-small);
  background: rgba(255, 255, 255, 0.10);
  padding: 3px 9px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pk-detail-crew { color: var(--pk-on-art-soft); margin: 0 0 1.2rem; }
.pk-detail-label { color: var(--pk-muted); }
.pk-cast-section { margin-top: 1.6rem; }
.pk-cast-title { font-size: var(--fs-h2); margin: 0 0 0.8rem; color: var(--pk-on-art); }
.pk-cast-rail { display: flex; gap: 0.9rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; }
.pk-cast-rail::-webkit-scrollbar { display: none; }
.pk-cast { flex: 0 0 96px; text-align: center; }
.pk-cast-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--pk-elevated); margin: 0 auto 0.5rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.pk-cast-ph { display: grid; place-items: center; font-weight: 700; color: var(--pk-gold); }
.pk-cast-name { font-size: var(--fs-small); font-weight: 600; line-height: 1.25; color: var(--pk-on-art); }
.pk-cast-char { font-size: 0.78rem; color: var(--pk-muted); }

/* ===================== favorites + LCN ===================== */

/* ---- FavButton (heart + group picker popover) ---- */
.pk-fav { position: relative; flex: 0 0 auto; }
.pk-fav-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--pk-muted); border-radius: 50%;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pk-fav-btn:hover { color: var(--pk-fg); background: var(--pk-nav-hover); }
.pk-fav-btn.on { color: var(--pk-accent); }
.pk-fav-btn svg { width: 20px; height: 20px; }
.pk-fav-big .pk-fav-btn { width: 44px; height: 44px; }
.pk-fav-big .pk-fav-btn svg { width: 24px; height: 24px; }

.pk-fav-backdrop { position: fixed; inset: 0; z-index: 80; background: transparent; }
.pk-fav-pop {
  position: fixed; z-index: 90; top: 0; left: 0;
  visibility: hidden; /* shown by positionFavPopovers once placed (no corner flash) */
  width: 248px; max-width: 78vw;
  background: var(--pk-popover); border: 1px solid var(--pk-border);
  border-radius: var(--rad-m); box-shadow: var(--pk-shadow-3);
  padding: 0.6rem; text-align: start;
}
.pk-fav-pop-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--pk-muted); margin: 0.1rem 0.3rem 0.45rem; }
.pk-fav-pop-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pk-fav-grow {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.5rem 0.45rem; border: none; border-radius: var(--rad-s);
  background: transparent; color: var(--pk-fg); cursor: pointer;
  font-size: 0.92rem; text-align: start;
}
.pk-fav-grow:hover { background: var(--pk-nav-hover); }
.pk-fav-box {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--pk-border); display: grid; place-items: center;
  color: var(--pk-accent-fg); background: transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pk-fav-grow.on .pk-fav-box { background: var(--pk-accent); border-color: var(--pk-accent); }
.pk-fav-box svg { width: 14px; height: 14px; }
.pk-fav-gname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-fav-empty { color: var(--pk-muted); font-size: var(--fs-small); padding: 0.2rem 0.4rem 0.5rem; }
.pk-fav-new { display: flex; gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--pk-border); }
.pk-fav-new-input, .pk-fav-create-input, .pk-fav-rename {
  flex: 1; min-width: 0; background: var(--pk-elevated);
  border: 1px solid var(--pk-border); border-radius: var(--rad-s);
  color: var(--pk-fg); padding: 0.45rem 0.6rem; font-size: var(--fs-ui);
}
.pk-fav-new-input:focus, .pk-fav-create-input:focus, .pk-fav-rename:focus { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 3px var(--pk-ring); }
.pk-fav-add, .pk-fav-create-btn {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--pk-accent); color: var(--pk-accent-fg); border: none;
  border-radius: var(--rad-s); cursor: pointer;
}
.pk-fav-add svg, .pk-fav-create-btn svg { width: 18px; height: 18px; }

/* heart on a channel row — sits right after the channel name, always visible */
.pk-tv-row .pk-fav { flex: 0 0 auto; order: 0; }
.pk-tv-row .pk-fav-btn { width: 32px; height: 32px; }
.pk-tv-row .pk-fav-btn svg { width: 18px; height: 18px; }

/* heart on a poster card — top-right, always visible */
.pk-card .pk-fav { position: absolute; top: 6px; right: 6px; z-index: 3; }
.pk-card .pk-fav-btn { background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pk-card .pk-fav-btn:hover { background: rgba(0, 0, 0, 0.8); }
.pk-card .pk-fav-btn.on { color: var(--pk-accent-hi); }

/* heart on a channel tile (Home / history rails) — top-right corner */
.pk-chan { position: relative; }
.pk-chan-link { display: block; color: inherit; text-decoration: none; }
.pk-chan .pk-fav { position: absolute; top: 4px; right: 4px; z-index: 2; }
.pk-chan .pk-fav-btn { background: rgba(0, 0, 0, 0.45); color: #fff; }
.pk-chan .pk-fav-btn:hover { background: rgba(0, 0, 0, 0.75); }
.pk-chan .pk-fav-btn.on { color: var(--pk-accent-hi); }

/* heart in the live-watch EPG header (favorite the current channel) */
.pk-epg-head .pk-fav { margin-inline-start: auto; flex: 0 0 auto; }

/* heart in the hero / VOD-detail action bars (next to Play / Info) */
.pk-detail-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.pk-hero-actions { align-items: center; }
.pk-hero-actions .pk-fav-btn, .pk-detail-actions .pk-fav-btn { background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pk-hero-actions .pk-fav-btn:hover, .pk-detail-actions .pk-fav-btn:hover { background: rgba(255, 255, 255, 0.26); }
.pk-hero-actions .pk-fav-btn.on, .pk-detail-actions .pk-fav-btn.on { background: var(--pk-accent); color: var(--pk-accent-fg); }

/* direct "remind" bell on an upcoming EPG row in the live-watch panel */
.pk-epg-bell {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer; border-radius: 50%;
  color: var(--pk-muted); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pk-epg-bell:hover { color: var(--pk-accent); background: var(--pk-nav-hover); }
.pk-epg-bell.on { color: var(--pk-accent); }
.pk-epg-bell svg { width: 17px; height: 17px; }

/* ---- Live category favorites + toolbar ---- */
.pk-tv-wrap { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
.pk-tv-bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem var(--pk-gutter) 0.5rem; }
.pk-tv-bar-hint { color: var(--pk-muted); font-size: var(--fs-small); flex: 1; min-width: 0; }
.pk-tv-bar-actions { margin-inline-start: auto; display: flex; gap: 0.5rem; align-items: center; }
.pk-tv-cat-sep {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0.7rem 0.6rem 0.2rem; padding-top: 0.6rem;
  border-top: 1px solid var(--pk-border);
  color: var(--pk-muted); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.pk-tv-cat-sep svg { width: 14px; height: 14px; color: var(--pk-accent); }
.pk-tv-cat-fav { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.pk-tv-cat-cnt { color: var(--pk-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pk-tv-cat { display: flex; align-items: center; gap: 0.4rem; }

/* ---- LCN edit row ---- */
.pk-tv-rowedit { gap: 0.9rem; padding: 0.4rem 0.9rem; }
.pk-lcn-input {
  flex: 0 0 64px; width: 64px; text-align: center;
  background: var(--pk-elevated); border: 1px solid var(--pk-border);
  border-radius: var(--rad-s); color: var(--pk-fg); padding: 0.4rem 0.3rem;
  font: inherit;
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.pk-lcn-input:focus { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 3px var(--pk-ring); }
.pk-tv-name-edit { flex: 1; }

/* ---- small + icon buttons ---- */
.pk-btn-sm { min-height: 34px; padding: 0.35rem 0.95rem; font-size: 0.88rem; }
.pk-icbtn {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--pk-border); border-radius: var(--rad-s);
  color: var(--pk-muted); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pk-icbtn:hover { color: var(--pk-fg); background: var(--pk-nav-hover); }
.pk-icbtn svg { width: 17px; height: 17px; }
.pk-icbtn-danger:hover { color: var(--pk-danger); border-color: var(--pk-danger); }

/* ---- My List (favorites manager) ---- */
.pk-fav-page { display: flex; flex-direction: column; gap: 1rem; }
.pk-fav-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pk-fav-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--pk-surface); border: 1px solid var(--pk-border);
  color: var(--pk-fg); cursor: pointer; font-size: 0.92rem; font-weight: 550;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pk-fav-tab:hover { border-color: var(--pk-accent); }
.pk-fav-tab.active { font-weight: 700; box-shadow: inset 0 -2px 0 var(--pk-accent); }
.pk-fav-tab.active::before { content: "\2713"; color: var(--pk-accent); }
.pk-fav-tab-count { font-size: 0.78rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.pk-fav-create { display: inline-flex; gap: 0.4rem; align-items: center; }
.pk-fav-create-input { width: 150px; }
.pk-fav-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.pk-fav-head { display: flex; align-items: center; gap: 0.6rem; }
.pk-fav-gtitle { font-size: var(--fs-h2); margin: 0; flex: 0 0 auto; }
.pk-fav-sec { font-size: 0.95rem; color: var(--pk-muted); margin: 0.4rem 0 0; font-weight: 600; }
.pk-fav-chans { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.pk-fav-posters { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.pk-fav-item { position: relative; }
.pk-fav-item .pk-card { flex: 0 0 var(--pk-rail); }
.pk-fav-item-x {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6); color: #fff; border: none; border-radius: 50%; cursor: pointer;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.pk-fav-item:hover .pk-fav-item-x { opacity: 1; }
.pk-fav-item-x svg { width: 16px; height: 16px; }
.pk-fav-item .pk-fav { display: none; }
.pk-fav-blank { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 2.5rem 1rem; text-align: center; }
.pk-fav-blank svg { width: 40px; height: 40px; color: var(--pk-border); }
.pk-fav-blank .pk-muted { max-width: 460px; }

/* ===================== watch later + continue watching ===================== */

/* watch-later (bookmark) button — mirrors the heart styling */
.pk-wl { position: relative; flex: 0 0 auto; }
.pk-wl-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--pk-muted); border-radius: 50%;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pk-wl-btn:hover { color: var(--pk-fg); background: var(--pk-nav-hover); }
.pk-wl-btn.on { color: var(--pk-accent); }
.pk-wl-btn svg { width: 19px; height: 19px; }
.pk-wl-big .pk-wl-btn { width: 44px; height: 44px; }
.pk-wl-big .pk-wl-btn svg { width: 23px; height: 23px; }

/* Reveal the bookmark for hover, keyboard focus, saved state and write errors. */
.pk-card .pk-wl { position: absolute; top: 6px; left: 6px; z-index: 3; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.pk-card:hover .pk-wl, .pk-card:focus-within .pk-wl, .pk-card .pk-wl.open { opacity: 1; }
.pk-card .pk-wl:has(.pk-wl-btn.on), .pk-card .pk-wl:has([role="status"]) { opacity: 1; }
.pk-card .pk-wl-btn { background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pk-card .pk-wl-btn:hover { background: rgba(0, 0, 0, 0.8); }
.pk-card .pk-wl-btn.on { color: var(--pk-accent-hi); }
.pk-fav-item .pk-wl { display: none; } /* the My List manager uses its own × */

/* watch-later in the hero / detail action bars */
.pk-hero-actions .pk-wl-btn, .pk-detail-actions .pk-wl-btn { background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pk-hero-actions .pk-wl-btn:hover, .pk-detail-actions .pk-wl-btn:hover { background: rgba(255, 255, 255, 0.26); }
.pk-hero-actions .pk-wl-btn.on, .pk-detail-actions .pk-wl-btn.on { background: var(--pk-accent); color: var(--pk-accent-fg); }

/* continue-watching card: a resume progress bar pinned to the bottom of the poster */
.pk-cont .pk-card-link { position: relative; }
.pk-cont-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: rgba(0, 0, 0, 0.55);
}
.pk-cont-fill { height: 100%; background: linear-gradient(90deg, var(--pk-accent), var(--pk-accent-hi)); }
/* episode marker ("S1E30") — overlaid top-left so it can never move the bar or
   change the card box; the bottom corners stay clear for the hover play button */
.pk-cont-ep {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 2px 6px; border-radius: var(--rad-s);
  background: rgba(0, 0, 0, 0.62); color: rgba(255, 255, 255, 0.92);
  font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ===================== UX refinements batch ===================== */

/* #1 Home rails: no favorite hearts (favoriting happens on Movies/Series/Live) */
.pk-rails-home .pk-fav { display: none; }

/* #9 Live sort selector */
.pk-tv-sort { display: inline-flex; align-items: center; gap: 0.4rem; }
.pk-tv-sort-label { color: var(--pk-muted); font-size: var(--fs-small); }
.pk-select {
  background: var(--pk-surface); border: 1px solid var(--pk-border); color: var(--pk-fg);
  border-radius: var(--rad-s); padding: 0.4rem 0.55rem; font: inherit; font-size: var(--fs-small); cursor: pointer;
}
.pk-select:focus { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 3px var(--pk-ring); }

/* #4 Program Guide: highlight the currently-watched channel row */
.pk-guide-row.watching .pk-guide-chan { box-shadow: inset 3px 0 0 var(--pk-accent); background: var(--pk-elevated); }
.pk-guide-row.watching .pk-guide-chan-name { color: var(--pk-accent); font-weight: 700; }

/* #5/#6 VOD featured banner (follows hover; plays trailer after a dwell) */
.pk-vbanner {
  position: sticky; top: 0; z-index: 20; min-height: 42vh;
  background-color: var(--pk-bg);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; overflow: hidden;
}
.pk-vbanner::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--pk-scrim-y);
  pointer-events: none;
  z-index: 1;
}
.pk-vbanner-playing { background: #000; }
.pk-vbanner-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; }
.pk-vbanner-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 13, 17, .95), rgba(10, 13, 17, .45) 50%, rgba(10, 13, 17, .15));
}
.pk-vbanner-info { position: relative; z-index: 2; padding: 2rem var(--pk-gutter) 2.2rem; max-width: 700px; }
.pk-vbanner-title {
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  font-weight: 800;
  color: var(--pk-on-art);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.pk-vbanner-overview {
  color: var(--pk-on-art-soft);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pk-vbanner-actions { display: flex; gap: 0.7rem; align-items: center; }
.pk-rails-vod { padding-top: 1.2rem; }

/* #8 Settings: reorder / show-hide home rails */
.pk-railpref-hint { margin-top: -0.3rem; }
.pk-railpref-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.pk-railpref {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0.7rem; background: var(--pk-surface);
  border: 1px solid var(--pk-border); border-radius: var(--rad-m);
}
.pk-railpref-move { display: flex; flex-direction: column; gap: 2px; }
.pk-railpref-move .pk-icbtn { width: 28px; height: 22px; }
.pk-railpref-move .pk-icbtn svg { width: 14px; height: 14px; }
.pk-railpref-move .pk-icbtn:disabled { opacity: 0.35; cursor: default; }
.pk-railpref-name { flex: 1; min-width: 0; font-weight: 600; }
/* Drag to reorder: the whole row is the handle, so it must not look selectable. */
.pk-railpref { cursor: grab; user-select: none; }
.pk-railpref:active { cursor: grabbing; }
.pk-railpref.is-dragging { opacity: 0.45; }
.pk-railpref-move .pk-icbtn { cursor: pointer; }
@media (hover: none) { .pk-railpref { cursor: default; } }

/* toggle switch */
.pk-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.pk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-switch-track {
  width: 42px; height: 24px; border-radius: 999px; position: relative; display: inline-block;
  background: var(--pk-elevated); border: 1px solid var(--pk-border);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pk-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pk-muted); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pk-switch input:checked + .pk-switch-track { background: var(--pk-accent); border-color: var(--pk-accent); }
.pk-switch input:checked + .pk-switch-track .pk-switch-knob { transform: translateX(18px); background: #fff; }

/* --- Search (on-screen keyboard) --- */
.pk-search { display: flex; flex-direction: column; gap: 22px; min-height: calc(100vh - 120px); }
.pk-search-head { display: flex; align-items: center; gap: 14px; padding: 6px 4px 16px; border-bottom: 1px solid var(--pk-border); }
.pk-search-ico { color: var(--pk-muted); display: inline-flex; }
.pk-search-ico svg { width: 26px; height: 26px; }
.pk-search-q { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--pk-fg); font-size: 2rem; font-weight: 650; letter-spacing: .06em; padding: 4px 0; }
.pk-search-q::placeholder { color: var(--pk-muted); letter-spacing: normal; font-weight: 400; }

.pk-search-body { display: flex; gap: 40px; flex: 1; align-items: flex-start; flex-wrap: wrap; }
.pk-kb { flex: 1 1 460px; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.pk-kb-grid, .pk-kb-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.pk-kb-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.pk-key {
  appearance: none; border: 1px solid var(--pk-border); background: var(--pk-elevated);
  color: var(--pk-fg); border-radius: var(--rad-m); height: 52px; padding: 0; font-size: 1.05rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.08s var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pk-key:hover, .pk-key:focus-visible { background: var(--pk-accent); color: var(--pk-accent-fg); border-color: transparent; outline: none; box-shadow: 0 6px 18px var(--pk-ring); }
.pk-key:active { transform: translateY(1px); }
.pk-key-util { grid-column: span 4; font-size: 1.2rem; letter-spacing: .04em; }
.pk-key-act { height: 50px; letter-spacing: .08em; font-size: .95rem; }
.pk-key-go { background: var(--pk-accent); color: var(--pk-accent-fg); border-color: transparent; }
.pk-key-go:hover, .pk-key-go:focus-visible { box-shadow: 0 8px 22px var(--pk-ring); filter: brightness(1.06); }

.pk-search-panels { flex: 1 1 360px; display: flex; gap: 30px; }
.pk-search-col { flex: 1; min-width: 0; }
.pk-search-coltitle { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--pk-fg); }
.pk-search-seg { display: flex; margin: 0 0 14px; max-width: 100%; }
.pk-sug-list { display: flex; flex-direction: column; gap: 10px; }
.pk-sug {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--rad-m);
  padding: 12px 14px; color: var(--pk-fg); text-decoration: none; cursor: pointer; text-align: start;
  font: inherit; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pk-sug:hover, .pk-sug:focus-visible { background: var(--pk-elevated); border-color: var(--pk-accent); outline: none; }
.pk-sug-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sug-tag { flex: none; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 12%, transparent); border-radius: 999px; padding: 3px 9px; }
.pk-search-empty { color: var(--pk-muted); padding: 6px 2px; }

@media (max-width: 900px) {
  .pk-kb-grid, .pk-kb-row { grid-template-columns: repeat(6, 1fr); }
  .pk-key-util { grid-column: span 3; }
  .pk-search-panels { flex-direction: column; }
}

/* ===================== responsive (mobile web, CSS-only pass) =====================
   A bottom tab bar needs a markup change (Phase B); until then the sidebar slims
   down and spacing/type compress so phones get a usable, uncramped layout. */
@media (max-width: 768px) {
  :root {
    --pk-rail: 124px;
    --pk-gutter: 1rem;
  }
  /* phones: the sidebar yields to the bottom tab bar (see .pk-tabbar below) */
  .pk-sidebar { display: none; }
  .pk-main { margin-left: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)); }
  .pk-hero { min-height: 32vh; } /* ~33% shorter than the previous 48vh */
  .pk-hero-inner { --pk-hero-pad-b: 2rem; } /* padding + the carousel's reserved height */
  .pk-btn-lg { min-height: 44px; padding: 0.55rem 1.2rem; font-size: 0.95rem; }
  .pk-rails { gap: 1.5rem; padding-bottom: 2rem; }
  .pk-now-card { flex-basis: 240px; }
  .pk-rem-card { flex-basis: 250px; }
  .pk-guide { max-height: calc(100vh - 120px); }
  .pk-guide-corner, .pk-guide-chan { flex-basis: 120px; width: 120px; }
  .pk-guide-row, .pk-guide-track { height: 56px; }
  .pk-detail-main { padding: 4.5rem 1.25rem 2rem; }
  .pk-vbanner { min-height: 34vh; }
  .pk-auth-card { padding: 2rem 1.5rem; }
  .pk-menu { right: 0.5rem; left: 0.5rem; min-width: 0; }
}
/* Touch users swipe rails and can use the visible card actions directly. */
@media (hover: none) {
  .pk-rail-arrow { display: none; }
  .pk-card .pk-wl { opacity: 1; }
  .pk-card-play, .pk-card-info { opacity: 1; transform: none; background: rgba(8, 10, 13, 0.6); }
  .pk-sidebar:hover, .pk-sidebar:focus-within { width: var(--pk-sidebar); box-shadow: none; }
  .pk-sidebar:hover .pk-nav-label, .pk-sidebar:focus-within .pk-nav-label { opacity: 0; }
}

/* ===================== Phase B components ===================== */

/* eyebrow label above hero/detail titles */
.pk-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--pk-on-art-soft);
  opacity: 0.85;
  margin-bottom: 0.55rem;
}

/* metadata chips inside the hero / VOD banner (shared .pk-detail-meta row) */
.pk-hero-inner .pk-detail-meta { margin-bottom: 1rem; }
.pk-vbanner-info .pk-detail-meta { margin-bottom: 0.85rem; }

/* rail header count */
.pk-rail-count {
  font-size: var(--fs-micro);
  font-weight: 650;
  color: var(--pk-muted);
  background: var(--pk-elevated);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* what's-playing overlay on the player stage (shows with the controls) */
.pk-stage-titlebar {
  position: absolute;
  top: 1.1rem;
  left: 4.6rem;               /* clears the back button */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(60%, 560px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.pk-watch-live .pk-stage-titlebar { left: 8.6rem; }  /* clears back + channel-list buttons */
body.pk-player-active .pk-stage-titlebar { opacity: 1; }
.pk-stage-titlelogo {
  height: 40px; max-width: 64px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  padding: 3px 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pk-stage-titletext { min-width: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8); }
.pk-stage-title1 { color: #fff; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-stage-title2 { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* skeleton layout (shimmer base .pk-skel is defined with the cards) */
.pk-skel-page { padding-bottom: 1rem; }
.pk-skel-hero { height: 52vh; border-radius: 0; }
.pk-skel-banner { height: 38vh; border-radius: 0; }
.pk-skel-rail { margin-bottom: 0.4rem; }
.pk-skel-title { width: 200px; height: 22px; margin-bottom: 0.9rem; border-radius: 6px; }
.pk-skel-track { display: flex; gap: 14px; overflow: hidden; padding: 6px 2px; }
.pk-skel-card { flex: 0 0 var(--pk-rail); aspect-ratio: 2 / 3; }
.pk-skel-list { padding: 1.2rem var(--pk-gutter); display: flex; flex-direction: column; gap: 10px; }
.pk-skel-row { height: 64px; }

/* channel search in the Canlı TV column / live channel overlay (above Favorites) */
.pk-searchbar-side {
  margin: 0 0 0.7rem;
  max-width: none;
  padding: 0.45rem 0.8rem;
  flex: 0 0 auto;
}
.pk-searchbar-side .pk-search-input { font-size: 0.92rem; }
.pk-ch-overlay .pk-searchbar-side { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
.pk-ch-overlay .pk-searchbar-side .pk-search-input { color: #fff; }
.pk-ch-overlay .pk-searchbar-side .pk-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.pk-ch-overlay .pk-searchbar-side:focus-within { border-color: var(--pk-accent); }
.pk-ovch-empty { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.6); padding: 1rem 0.5rem; }

/* bottom tab bar (phones) — hidden on wide screens */
.pk-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  background: color-mix(in srgb, var(--pk-bg) 88%, transparent);
  border-top: 1px solid var(--pk-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px max(8px, env(safe-area-inset-left, 0)) calc(6px + env(safe-area-inset-bottom, 0)) max(8px, env(safe-area-inset-right, 0));
}
.pk-tab {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--pk-muted);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: color var(--t-fast) var(--ease);
}
.pk-tab svg, .pk-tab .pk-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.pk-tab.active { color: var(--pk-accent); }
.pk-tab-label { white-space: nowrap; }
.pk-mobile-menu-scrim { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; }
.pk-mobile-menu { width:min(100%,38rem); max-height:90vh; overflow-y:auto; overscroll-behavior:contain; padding:1.25rem max(1.25rem,env(safe-area-inset-right,0)) max(1.25rem,env(safe-area-inset-bottom,0)) max(1.25rem,env(safe-area-inset-left,0)); background:var(--pk-surface); color:var(--pk-fg); border-radius:1rem 1rem 0 0; box-shadow:var(--pk-shadow-3); }
.pk-mobile-menu-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.pk-mobile-menu-head h2 { margin:0; overflow-wrap:anywhere; }
.pk-mobile-menu-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.pk-mobile-menu-link { min-width:0; min-height:48px; display:flex; align-items:center; gap:.65rem; padding:.8rem; border:1px solid var(--pk-border); border-radius:.65rem; background:var(--pk-elevated); color:var(--pk-fg); text-align:start; font:inherit; text-decoration:none; cursor:pointer; }
.pk-mobile-menu-link.active { border-color:var(--pk-accent); color:var(--pk-accent); }
.pk-mobile-menu-link svg, .pk-mobile-menu-link .pk-avatar { width:24px; height:24px; flex:0 0 auto; }
.pk-mobile-menu-link span { min-width:0; overflow-wrap:anywhere; }
@media(max-width:360px) { .pk-mobile-menu-links { grid-template-columns:1fr; } }
@media (max-width: 768px) {
  .pk-tabbar { display: flex; }
  /* the fixed watch screens sit above the tab bar */
  .pk-watch { z-index: 100; }
}

/* ===================== motion preference ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pk-rail-track { scroll-behavior: auto; }
  .pk-card:hover, .pk-card:has(:focus-visible), .pk-now-card:hover { transform: none; }
}

/* --- Games (mini-game launcher grid) --- */
.pk-games-head { margin: 0 0 14px; }
.pk-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.pk-game {
  position: relative; display: flex; align-items: center; gap: 13px;
  text-align: start; cursor: pointer; font: inherit; color: var(--pk-fg);
  background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 14px;
  padding: 14px; padding-inline: 18px 16px; overflow: hidden;
  transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease;
}
.pk-game:hover, .pk-game:focus-visible {
  transform: translateY(-2px); outline: none;
  border-color: hsl(var(--g-hue, 200) 90% 60%);
  box-shadow: 0 10px 26px hsl(var(--g-hue, 200) 90% 50% / .28);
}
.pk-game-bar { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: hsl(var(--g-hue, 200) 90% 60%); box-shadow: 0 0 12px hsl(var(--g-hue, 200) 90% 60%); }
.pk-game-logo { flex: none; width: 42px; height: 42px; color: hsl(var(--g-hue, 200) 92% 66%); }
.pk-game-logo svg { width: 100%; height: 100%; display: block; }
.pk-game-meta { min-width: 0; flex: 1; padding-inline-end: 26px; }
.pk-game-num { position: absolute; inset-inline-end: 12px; top: 6px; font-size: 26px; font-weight: 800; opacity: .12; }
.pk-game-name { display: block; font-weight: 700; font-size: 1.04rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-game-tag { display: block; margin-top: 4px; color: var(--pk-muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .pk-game:hover, .pk-game:focus-visible { transform: none; } }

/* ============================================================
   Profiles — profile select screen, avatar picker, sidebar
   profile chip, Kids styling. (web/ui/profiles.go)
   ============================================================ */

/* full-screen select screen (shares the auth-screen backdrop) */
.pk-profiles {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 3rem 1.5rem;
  background:
    radial-gradient(1100px 560px at 72% -8%, rgba(31, 182, 201, 0.14), transparent 60%),
    radial-gradient(900px 480px at 12% 108%, rgba(52, 192, 138, 0.07), transparent 55%),
    var(--pk-bg);
}
.pk-profiles-logo {
  height: 46px;
  width: 200px;
  max-width: 70%;
  background: var(--pk-logo) center / contain no-repeat;
}
.pk-profiles-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  text-align: center;
  margin: 0;
}
.pk-profiles-err { margin: -0.4rem 0 0; }
.pk-profiles-loading { padding: 2rem; }

.pk-profile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  max-width: 880px;
  width: 100%;
}

/* one profile tile (avatar + name) */
.pk-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--pk-muted);
  transition: color 120ms ease;
}
.pk-profile-av {
  position: relative;
  width: clamp(96px, 14vw, 140px);
  aspect-ratio: 1;
  border-radius: var(--rad-l);
  overflow: hidden;
  border: 3px solid transparent;
  background: var(--pk-surface);
  box-shadow: var(--pk-shadow-2);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pk-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-profile:hover .pk-profile-av,
.pk-profile:focus-visible .pk-profile-av {
  transform: scale(1.05);
  border-color: var(--pk-accent);
  box-shadow: 0 0 0 3px var(--pk-ring), var(--pk-shadow-3);
}
.pk-profile:focus-visible { outline: none; }
.pk-profile:hover, .pk-profile:focus-visible { color: var(--pk-fg); }
.pk-profile-name {
  font-size: var(--fs-body);
  font-weight: 600;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* add-profile tile */
.pk-profile-addico {
  display: grid;
  place-items: center;
  color: var(--pk-muted);
  background: var(--pk-surface);
}
.pk-profile-addico svg { width: 40%; height: 40%; }
.pk-profile:hover .pk-profile-addico { color: var(--pk-accent); }

/* manage-mode pencil overlay */
.pk-profile-edit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 11, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 140ms ease;
}
.pk-profile-edit svg { width: 30%; height: 30%; }
.pk-profile:hover .pk-profile-edit,
.pk-profile:focus-visible .pk-profile-edit { opacity: 1; }

/* Kids badge + tile accent */
.pk-profile-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  background: var(--pk-accent);
  color: var(--pk-accent-fg);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.pk-profile-badge-sm { position: static; padding: 1px 6px; }
.pk-profile-kids .pk-profile-av { border-color: color-mix(in srgb, var(--pk-accent) 55%, transparent); }

.pk-profiles-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}
.pk-profiles-signout {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  color: var(--pk-muted);
  cursor: pointer;
  font-size: var(--fs-ui);
  padding: 0.5rem 0.7rem;
  border-radius: var(--rad-s);
}
.pk-profiles-signout:hover { color: var(--pk-danger); }
.pk-profiles-signout svg { width: 18px; height: 18px; }

/* ---- editor modal ---- */
.pk-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 8, 11, 0.66);
  backdrop-filter: blur(3px);
}
.pk-modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--pk-popover);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-l);
  box-shadow: var(--pk-shadow-4);
  padding: 1.4rem 1.5rem 1.6rem;
}
/* Multi-action EPG/decision dialogs keep their actions neutral until actual
   focus. A Play or Save action must not impersonate the focused Back button. */
/* The player's state layers (Retry / Restart, a held ad's Play, the progress
   notices) and the music queue follow the same rule: no action is filled
   before it has focus. */
.pk-epg-modal .pk-btn,
.pk-decision-modal .pk-btn,
.pk-g09-player-retry .pk-btn,
.pk-g09-progress-error .pk-btn,
.pk-music-queue .pk-btn {
  background: var(--pk-elevated);
  color: var(--pk-fg);
  border: 1px solid var(--pk-border);
  box-shadow: none;
}
.pk-epg-modal .pk-btn:focus,
.pk-epg-modal .pk-btn:focus-visible,
.pk-decision-modal .pk-btn:focus,
.pk-decision-modal .pk-btn:focus-visible,
.pk-g09-player-retry .pk-btn:focus,
.pk-g09-player-retry .pk-btn:focus-visible,
.pk-g09-progress-error .pk-btn:focus,
.pk-g09-progress-error .pk-btn:focus-visible,
.pk-music-queue .pk-btn:focus,
.pk-music-queue .pk-btn:focus-visible {
  background: var(--pk-accent);
  color: var(--pk-accent-fg);
  border-color: var(--pk-accent);
  outline: 2px solid var(--pk-fg);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--pk-ring);
}
.pk-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.pk-modal-head h2 { font-size: var(--fs-h2); font-weight: 700; margin: 0; }

.pk-profile-form { display: flex; flex-direction: column; gap: 1rem; }
.pk-profile-editrow { display: flex; align-items: center; gap: 1rem; }
.pk-avatar-lg {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: var(--rad-m);
  border: 2px solid var(--pk-accent);
}
.pk-profile-editrow .pk-input { flex: 1; }

.pk-profile-kidsrow {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}
.pk-profile-kidsrow input { margin-top: 0.25rem; width: 18px; height: 18px; accent-color: var(--pk-accent); }
.pk-profile-kidstext { display: flex; flex-direction: column; }
.pk-profile-kidslabel { font-weight: 600; }
.pk-profile-kidshint { font-size: var(--fs-small); }
.pk-profile-kidsnote { margin: -0.4rem 0 0; font-size: var(--fs-small); }

.pk-profile-pickhead { font-size: var(--fs-ui); font-weight: 600; color: var(--pk-muted); margin: 0.2rem 0 -0.3rem; }
.pk-profile-avloading { padding: 1.2rem; text-align: center; }

/* the 100-avatar picker */
.pk-avpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--pk-bg-deep);
  border-radius: var(--rad-m);
  border: 1px solid var(--pk-border);
}
.pk-avpick {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--rad-s);
  overflow: hidden;
  background: var(--pk-surface);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.pk-avpick:hover { transform: scale(1.06); }
.pk-avpick:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--pk-ring); }
/* The chosen avatar carries a tick badge; the frame and ring are focus's. */
.pk-avpick.active { position: relative; }
.pk-avpick.active::after { content: "\2713"; position: absolute; bottom: 3px; inset-inline-end: 3px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--pk-accent); color: var(--pk-accent-fg); font-size: 12px; font-weight: 700; line-height: 1; }

.pk-profile-modalbtns { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.2rem; }
.pk-profile-del { color: var(--pk-danger); justify-content: center; }
.pk-profile-del svg { width: 17px; height: 17px; }

/* ---- sidebar active-profile chip ---- */
.pk-profile-chip { gap: 0.7rem; }
.pk-profile-chipav {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  border: 1px solid var(--pk-border);
}
.pk-profile-chipname { font-weight: 600; }

/* ---- settings profile row ---- */
.pk-row-profile { gap: 0.8rem; }
.pk-profile-settinglink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--pk-fg);
  text-decoration: none;
  font-weight: 600;
}
.pk-profile-settingav { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; }
.pk-profile-managelink { color: var(--pk-accent); font-weight: 600; font-size: var(--fs-small); margin-left: 0.3rem; }
.pk-profile-settinglink:hover .pk-profile-managelink { text-decoration: underline; }

/* Kids shell tint (subtle): a brighter accent on the sidebar brand */
.pk-kids .pk-brand-tv { color: var(--pk-accent-hi); }

@media (max-width: 768px) {
  .pk-avatar-lg { width: 60px; height: 60px; }
  .pk-modal { padding: 1.1rem 1.1rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-profile-av, .pk-avpick { transition: none; }
  .pk-profile:hover .pk-profile-av, .pk-profile:focus-visible .pk-profile-av { transform: none; }
}

/* ---------- welcome / onboarding (M7) ---------- */
/* isolation: own stacking context so the fixed poster wall + scrim (negative
   z-index) render above the opaque html/body background instead of behind it. */
.pk-welcome { position: relative; isolation: isolate; min-height: 100vh; overflow-x: hidden; color: var(--pk-on-art); }
/* Cinematic poster wall: tilted columns of film posters scrolling slowly in
   alternating directions, behind a darkening + lightly-blurred scrim. */
.pk-welcome-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #0a0d12; }
.pk-poster-wall {
  position: absolute; top: -8%; left: -6%; right: -6%; bottom: -8%;
  display: flex; gap: 12px; justify-content: center;
  transform: rotate(-5deg) scale(1.18); transform-origin: center;
}
.pk-poster-col {
  flex: 0 0 auto; width: clamp(110px, 13vw, 190px);
  display: flex; flex-direction: column;
  animation: pk-scroll-up 84s linear infinite; will-change: transform;
}
.pk-poster-col:nth-child(even) { animation-name: pk-scroll-down; }
.pk-poster-col:nth-child(1) { animation-duration: 82s; }
.pk-poster-col:nth-child(2) { animation-duration: 106s; }
.pk-poster-col:nth-child(3) { animation-duration: 71s; }
.pk-poster-col:nth-child(4) { animation-duration: 118s; }
.pk-poster-col:nth-child(5) { animation-duration: 93s; }
.pk-poster-col:nth-child(6) { animation-duration: 77s; }
.pk-poster {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  margin-bottom: 12px; border-radius: 9px; opacity: 0.82;
  background: #11161d; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
@keyframes pk-scroll-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pk-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pk-poster-col { animation: none; } }
.pk-welcome-scrim {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 720px at 78% -12%, rgba(31,182,201,0.20), transparent 55%),
    radial-gradient(1000px 700px at 6% 112%, rgba(52,192,138,0.14), transparent 55%),
    linear-gradient(180deg, rgba(10,13,17,0.58), rgba(10,13,17,0.82));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.pk-welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--pk-gutter); }
.pk-welcome-logo { height: 40px; width: 150px; background: var(--pk-logo) left center / contain no-repeat; }
.pk-welcome-actions { display: flex; align-items: center; gap: 0.7rem; }
/* The welcome hero is always dark, so force the language picker (and its native
   dropdown popup) dark even when the app is in the light theme — otherwise the
   OS renders a white popup with a white hover row. */
.pk-lang { min-height: 40px; padding: 0.4rem 0.8rem; background: rgba(255,255,255,0.08); color: var(--pk-on-art); border: 1px solid var(--pk-border); border-radius: var(--rad-m); font: inherit; cursor: pointer; color-scheme: dark; }
.pk-lang option { background-color: #1d2430; color: #f4f6f8; }
.pk-lang option:checked { background-color: #2a3340; }
.pk-btn-ghost { background: transparent; color: var(--pk-on-art); border: 1px solid rgba(255,255,255,0.35); }
.pk-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.pk-btn-lg { min-height: 52px; padding: 0.8rem 2.2rem; font-size: 1.1rem; }
.pk-welcome-hero { text-align: center; padding: clamp(2.5rem, 11vh, 8rem) var(--pk-gutter) 3.5rem; max-width: 60rem; margin: 0 auto; }
.pk-welcome-title { font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.05; margin: 0 0 1rem; font-weight: 800; }
.pk-welcome-sub { font-size: clamp(1rem, 2.2vw, 1.35rem); color: var(--pk-on-art-soft); margin: 0 auto 2rem; max-width: 38rem; }
.pk-welcome-signin { margin-top: 1.2rem; color: var(--pk-on-art-soft); }
.pk-welcome-signin a { color: var(--pk-accent-hi); font-weight: 600; }
.pk-welcome-sec { max-width: 64rem; margin: 0 auto; padding: 2rem var(--pk-gutter); }
.pk-welcome-h2 { font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin: 0 0 1.4rem; }
.pk-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0.9rem; }
.pk-platform { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.1rem 0.6rem; background: rgba(255,255,255,0.05); border: 1px solid var(--pk-border); border-radius: var(--rad-m); font-size: var(--fs-ui); text-align: center; }
.pk-platform-ico { width: 30px; height: 30px; color: var(--pk-accent-hi); }
.pk-platform-ico svg { width: 30px; height: 30px; }
.pk-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.pk-faq-item { background: rgba(255,255,255,0.05); border: 1px solid var(--pk-border); border-radius: var(--rad-m); overflow: hidden; }
.pk-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: transparent; border: none; color: inherit; font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
.pk-faq-caret { color: var(--pk-accent-hi); font-size: 1.3rem; line-height: 1; }
.pk-faq-a { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--pk-on-art-soft); }
.pk-welcome-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; padding: 2.5rem var(--pk-gutter); border-top: 1px solid var(--pk-border); margin-top: 2rem; }
.pk-foot-link { color: var(--pk-on-art-soft); font-size: var(--fs-ui); }
.pk-foot-link:hover { color: var(--pk-accent-hi); }
.pk-foot-copy { color: var(--pk-muted); }

/* registration */
.pk-reg { min-height: 100vh; display: grid; place-items: start center; padding: 2.5rem 1.5rem; background: radial-gradient(1100px 560px at 72% -8%, rgba(31,182,201,0.14), transparent 60%), var(--pk-bg); }
.pk-reg-card { width: 100%; max-width: 44rem; background: var(--pk-elevated); border: 1px solid var(--pk-border); border-radius: var(--rad-l); padding: 2rem; box-shadow: var(--pk-shadow-3); }
.pk-reg-card .pk-auth-logo { height: 56px; margin-bottom: 1rem; }
.pk-reg-card .pk-welcome-h2 { text-align: start; }
.pk-reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; margin-bottom: 0.5rem; }
.pk-field { display: flex; flex-direction: column; gap: 0.3rem; }
.pk-field-lbl { font-size: 0.78rem; color: var(--pk-muted); }
.pk-reg-sub { margin: 1.2rem 0 0.5rem; font-size: 1rem; color: var(--pk-muted); }
.pk-captcha { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0; flex-wrap: wrap; }
.pk-captcha-img { height: 56px; border-radius: var(--rad-s); background: #fff; }
.pk-captcha-refresh { min-height: 40px; padding: 0.4rem 0.85rem; }
.pk-captcha .pk-input { flex: 1; min-width: 120px; }
.pk-reg-terms { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0; font-size: var(--fs-ui); color: var(--pk-muted); }
.pk-reg-terms a { color: var(--pk-accent); }

/* standalone faq page + settings legal */
.pk-faq-page { max-width: 48rem; margin: 0 auto; padding: 2rem var(--pk-gutter); }
.pk-legal-link { text-decoration: none; }
.pk-legal-link:hover { color: var(--pk-accent-hi); }

[dir="rtl"] .pk-welcome-logo { background-position: right center; }

/* ---------- series detail (seasons + episodes) ---------- */
.pk-series-main { max-width: 60rem; }
.pk-series-head { margin-bottom: 1.4rem; }
/* season selector reuses the .pk-tv-cat tab styling; lay it out as a wrapping row */
.pk-series-seasons {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.pk-series-seasons .pk-tv-cat { flex: 0 0 auto; }
.pk-series-empty { color: var(--pk-on-art-soft); padding: 1.2rem 0; }
.pk-ep-list { display: flex; flex-direction: column; gap: 0.7rem; }
.pk-ep {
  display: flex; align-items: stretch; gap: 0.9rem;
  padding: 0.6rem; border-radius: var(--rad-s);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--pk-border);
  text-decoration: none; color: var(--pk-on-art);
  transition: background 120ms ease, border-color 120ms ease;
}
.pk-ep:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--pk-accent); }
.pk-ep:focus-visible { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 2px var(--pk-ring); }
.pk-ep-thumb {
  flex: 0 0 auto; width: 132px; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 8px; background: var(--pk-surface);
}
.pk-ep-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--pk-muted); }
.pk-ep-thumb-ph svg { width: 28px; height: 28px; }
.pk-ep-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pk-ep-head { display: flex; align-items: center; gap: 0.55rem; }
.pk-ep-num {
  flex: 0 0 auto; min-width: 1.6rem;
  color: var(--pk-muted); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pk-ep-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-ep-lock {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-left: auto; flex: 0 0 auto;
  color: var(--pk-warn); font-size: var(--fs-small); font-weight: 700;
}
.pk-ep-lock svg { width: 14px; height: 14px; }
.pk-ep-meta { color: var(--pk-on-art-soft); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pk-ep-overview {
  color: var(--pk-on-art-soft); line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pk-ep-play {
  flex: 0 0 auto; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: var(--pk-on-art);
}
.pk-ep:hover .pk-ep-play { background: var(--pk-accent); color: var(--pk-accent-fg); }
.pk-ep-play svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .pk-ep-thumb { width: 92px; }
  .pk-ep-play { display: none; }
}

/* ===================== EPUB reader (/read/<id>) ===================== */
.pk-reader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--pk-bg);
  z-index: 50;
}
.pk-reader-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--pk-border);
  background: var(--pk-surface);
}
.pk-reader-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pk-reader-fbtn {
  min-width: 2.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--pk-border);
  border-radius: 6px;
  background: var(--pk-bg);
  color: var(--pk-fg);
  cursor: pointer;
  font-weight: 700;
}
.pk-reader-fbtn:hover { background: var(--pk-surface); }
.pk-reader-fbtn svg { width: 18px; height: 18px; display: block; }
/* Bookmarks dropdown (beside the chapter picker) */
.pk-reader-bm { position: relative; display: inline-flex; }
.pk-reader-bmlist {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 12rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 60;
}
.pk-reader-bmempty { padding: 0.6rem 0.75rem; color: var(--pk-muted); font-size: 0.9rem; }
.pk-reader-bmrow { display: flex; align-items: center; gap: 0.25rem; }
.pk-reader-bmjump {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--pk-fg);
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.pk-reader-bmjump:hover { background: var(--pk-bg); }
.pk-reader-bmdel {
  flex: 0 0 auto;
  padding: 0.35rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--pk-muted);
  line-height: 0;
  cursor: pointer;
}
.pk-reader-bmdel:hover { color: var(--pk-fg); background: var(--pk-bg); }
.pk-reader-bmdel svg { width: 16px; height: 16px; display: block; }
.pk-reader-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
}
.pk-reader-view {
  flex: 1;
  height: 100%;
  min-width: 0;
  background: #fff; /* epub content renders on a white page */
}
.pk-reader-nav {
  width: 3rem;
  flex: 0 0 3rem;
  border: none;
  background: transparent;
  color: var(--pk-muted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.pk-reader-nav:hover { color: var(--pk-fg); background: var(--pk-surface); }
/* Book card reading-progress bar */
.pk-book-progress {
  height: 4px;
  background: var(--pk-border);
  overflow: hidden;
}
.pk-book-progress-fill {
  height: 100%;
  background: var(--pk-accent);
}

/* ---------- watch party (TODO item d) ----------
   The panel reuses .pk-epg / .pk-epg-head / .pk-epg-list / .pk-epg-row wholesale,
   the way MusicWatch's lyrics panel and RadioWatch's station panel already do, so
   what follows is only the party's own additions — the third grid column, the
   presence dots, the chat rhythm and the states the panel has to be able to SAY. */
.pk-grid-party { grid-template-columns: minmax(0, 1fr) 360px 320px; }
@media (max-width: 1280px) {
  /* Two side panels do not fit next to a usable picture: the EPG yields first,
     because the party is the thing the viewer just opened. */
  .pk-grid-party { grid-template-columns: minmax(0, 1fr) 320px; }
  .pk-grid-party .pk-epg:not(.pk-party) { display: none; }
}
@media (max-width: 900px) {
  .pk-grid-party { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}
/* The VOD screen has no grid of its own until the panel opens. */
.pk-watch-vod .pk-live-grid { height: 100vh; }

/* The watch screens' Party entry sits in the stage's top-right corner, under
   the clock (.pk-stage-corner), not beside Back and the channel list. */
.pk-stage-corner .pk-party-toggle { position: relative; top: auto; left: auto; z-index: auto; }

/* The shell dock: the party's presence on every route that is NOT a watch
   screen. Those two render the panel inside their own grid; everywhere else it
   floats, so a viewer who joined by link before the host started anything — or
   who opened the guide mid-party — can still see the room, chat and leave.
   Fixed rather than absolute: the home and section pages scroll. */
.pk-party-dock {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
  max-height: min(80vh, 720px);
}
.pk-party-dock .pk-party {
  width: min(360px, calc(100vw - 2rem));
  max-height: min(80vh, 720px); overflow-y: auto;
  background: var(--pk-panel, var(--pk-bg));
  border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.pk-party-dockbtn {
  position: relative;
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--pk-accent); color: var(--pk-accent-fg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.pk-party-dockbtn svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  /* Clear of the mobile tab bar. */
  .pk-party-dock { bottom: 4.6rem; }
}

.pk-party-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--pk-accent); color: var(--pk-accent-fg);
  border-radius: 9px; font-size: 11px; font-weight: 700;
}
.pk-party { display: flex; flex-direction: column; }
.pk-party .pk-epg-head { justify-content: space-between; }
.pk-party-code {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.14em;
  color: var(--pk-accent); font-variant-numeric: tabular-nums;
}
.pk-party-close {
  background: none; border: 0; color: var(--pk-muted); cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
}
.pk-party-close:hover { background: rgba(127, 127, 127, 0.14); color: var(--pk-fg); }
.pk-party-close svg { width: 18px; height: 18px; }

/* The host's room controls. Small and quiet: ejecting someone is rare and
   should not read as a primary action next to the chat. */
.pk-party-lockrow { display: flex; flex-direction: column; gap: 0.3rem; }
.pk-party-kick {
  padding: 0.15rem 0.5rem; font-size: var(--fs-small); flex: 0 0 auto;
}
.pk-party-person { align-items: center; gap: 0.5rem; }

.pk-party-body, .pk-party-intro { display: flex; flex-direction: column; gap: 0.8rem; }
.pk-party .pk-epg-date { position: static; }
.pk-party-sub { color: var(--pk-muted); font-size: var(--fs-small); line-height: 1.5; }
.pk-party-label {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pk-muted);
}

/* Connection + failure. Quiet states are a muted line; a failure is bordered and
   carries its own way out, because a room the viewer cannot tell from a silent
   one is a room they keep talking to. */
.pk-party-note { color: var(--pk-muted); font-size: var(--fs-small); }
.pk-party-alert {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
  padding: 0.6rem 0.7rem; border-radius: var(--rad-s);
  background: color-mix(in srgb, #e0564a 15%, transparent);
  border: 1px solid color-mix(in srgb, #e0564a 40%, transparent);
  font-size: var(--fs-small); line-height: 1.45;
}
.pk-party-detail { color: var(--pk-muted); font-size: var(--fs-micro); }

.pk-party-join, .pk-party-composer, .pk-party-sharerow { display: flex; gap: 0.5rem; }
.pk-party-input, .pk-party-link { flex: 1; min-width: 0; }
.pk-party-link { font-size: var(--fs-micro); color: var(--pk-muted); }

.pk-party-sync {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
  padding: 0.7rem; border-radius: var(--rad-s);
  background: rgba(127, 127, 127, 0.09);
}
.pk-party-role { font-weight: 650; font-size: 0.92rem; }
.pk-party-why { color: var(--pk-muted); font-size: var(--fs-small); line-height: 1.45; }

.pk-party-people { display: flex; flex-direction: column; }
.pk-party-person { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.4rem; }
.pk-party-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--pk-muted); }
.pk-party-dot.insync { background: var(--pk-accent); }
.pk-party-dot.free { background: var(--pk-muted); }
.pk-party-dot.away { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pk-muted); }
.pk-party-dot.blocked { background: #e0564a; }
.pk-party-badge {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--pk-accent-fg); background: var(--pk-accent);
  padding: 1px 6px; border-radius: 999px;
}
.pk-party-note-sm { color: var(--pk-muted); font-size: var(--fs-micro); }

.pk-party-chat { display: flex; flex-direction: column; gap: 0.25rem; max-height: 34vh; overflow-y: auto; }
.pk-party-msg { font-size: 0.9rem; line-height: 1.45; padding: 0.15rem 0.2rem; word-break: break-word; }
.pk-party-msgwho { font-weight: 650; margin-inline-end: 0.4rem; }
.pk-party-msg.system { color: var(--pk-muted); font-size: var(--fs-small); font-style: italic; }
.pk-party-msg.reaction .pk-party-msgtext { font-size: 1.3rem; }

.pk-party-reacts { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.pk-party-react {
  background: rgba(127, 127, 127, 0.12); border: 0; cursor: pointer;
  border-radius: var(--rad-s); padding: 0.3rem 0.5rem; font-size: 1.15rem; line-height: 1;
  transition: background var(--t-fast) var(--ease);
}
.pk-party-react:hover { background: rgba(127, 127, 127, 0.24); }
.pk-party-leave { align-self: flex-start; margin-top: 0.3rem; }
/* The per-participant PIN prompt sits in the sync block but reads as a question
   rather than a status, so it gets the accent edge the EPG "now" row uses. */
.pk-party-pin { box-shadow: inset 2px 0 0 var(--pk-accent); }

/* ================================ Shop ================================
   Vertical product list (image left, title + description right), plus the
   full-screen image viewer. A row with a link is the click-through itself
   (new tab); the thumbnail button opens the viewer. */
.pk-shop { max-width: 900px; }
.pk-shop-list { display: flex; flex-direction: column; gap: 1rem; }
.pk-shop-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-l);
  padding: 0.9rem;
}
.pk-shop-row-linked { cursor: pointer; }
.pk-shop-row-linked:hover { border-color: var(--pk-accent); }
.pk-shop-thumbbtn {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--rad-m);
}
.pk-shop-thumb {
  width: 132px;
  height: 132px;
  object-fit: cover;
  display: block;
  border-radius: var(--rad-m);
  background: var(--pk-elevated);
}
.pk-shop-thumb-ph {
  display: grid;
  place-items: center;
  padding: 0.4rem;
  text-align: center;
  color: var(--pk-muted);
  font-size: 0.85rem;
  overflow: hidden;
}
.pk-shop-info { flex: 1; min-width: 0; }
.pk-shop-title { margin: 0 0 0.35rem; font-size: var(--fs-h3, 1.05rem); }
.pk-shop-desc {
  margin: 0;
  color: var(--pk-muted);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Now an <a> (the row's one keyboard-focusable link affordance), so the anchor
   defaults have to be neutralized to keep the hint look. */
.pk-shop-linkhint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  color: var(--pk-accent);
  font-size: 0.85rem;
  text-decoration: none;
}
.pk-shop-linkhint:focus-visible {
  outline: 2px solid var(--pk-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.pk-shop-linkhint svg { width: 15px; height: 15px; }

/* ---- image viewer overlay ---- */
.pk-shop-viewer {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--pk-popover);
  border: 1px solid var(--pk-border);
  border-radius: var(--rad-l);
  box-shadow: var(--pk-shadow-4);
  padding: 1.1rem 1.2rem 1.3rem;
}
.pk-shop-viewer-img {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: var(--rad-m);
  background: var(--pk-bg-deep);
}
.pk-shop-viewer-none {
  display: grid;
  place-items: center;
  height: 200px;
  color: var(--pk-muted);
}
.pk-shop-viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.8rem;
}
/* The hero arrows are absolutely positioned; in the viewer they sit in flow. */
.pk-shop-arrow { position: static; transform: none; }
.pk-shop-viewer-count { color: var(--pk-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .pk-shop-thumb { width: 96px; height: 96px; }
}

/* G09: catalog detail stays readable without a player or artwork. */
.pk-g09-detail { padding: 1.25rem clamp(1rem, 4vw, 3rem) 3rem; }
.pk-g09-detail .pk-back-inline { position: relative; margin-bottom: 1rem; }
.pk-g09-detail .pk-vod-detail-main { grid-template-columns: minmax(8rem,14rem) minmax(0,1fr); min-height: 0; padding: 2rem 0; align-items: start; }
.pk-vod-detail-poster { width: 100%; max-width: 14rem; }
.pk-g09-detail .pk-detail-overview { max-width: 75ch; overflow-wrap: anywhere; }
.pk-g09-detail .pk-ep-list { margin: 1.5rem 0; }
.pk-g09-detail .pk-ep { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.pk-g09-detail .pk-ep-body { flex: 1 1 15rem; min-width: 0; }
.pk-g09-detail .pk-ep-body p { white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-g09-detail [data-vod-card]:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.pk-wl [role=status] { display: block; max-width: 18rem; white-space: normal; font-size: .8rem; }
@media(max-width:600px) { .pk-g09-detail .pk-vod-detail-main { grid-template-columns: 1fr; } .pk-vod-detail-poster { max-width: 10rem; } }
.pk-g09-player-retry { position: absolute; inset-inline: 1rem; bottom: 7rem; z-index: 5; display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
.pk-g09-progress-error { position: absolute; inset-inline-end: 1rem; top: 4rem; z-index: 5; padding: .7rem; background: rgba(0,0,0,.8); color: white; }
.pk-cont-position { display: block; padding: .4rem; font-size: .85rem; overflow-wrap: anywhere; }
.pk-g09-detail .pk-detail-title { color: var(--pk-fg); text-shadow: none; }
.pk-g09-detail .pk-detail-overview, .pk-g09-detail .pk-detail-tagline, .pk-g09-detail .pk-meta-text { color: var(--pk-fg-soft); }
.pk-vod-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.pk-vod-grid .pk-card { width: 100%; min-width: 0; }

/* G10: type groups and ordinary controls work with keyboard or touch. */
.pk-g10-filters, .pk-g10-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.25rem; }
.pk-g10-filters [aria-pressed=true] { box-shadow: inset 0 -2px 0 var(--pk-accent); }
.pk-g10-filters [aria-pressed=true]::before { content: "\2713\00a0"; color: var(--pk-accent); }
.pk-g10-result-art { width: 4rem; height: 4rem; object-fit: contain; flex-shrink: 0; }
.pk-search .pk-sug { text-align: start; align-items: center; gap: .75rem; }
.pk-search .pk-sug p { margin: .3rem 0 0; white-space: normal; }
.pk-search-head { flex-wrap: wrap; gap: .5rem; }
.pk-search-q { min-width: 8rem; }
.pk-reader-native-document { width: 100%; height: calc(100vh - 5rem); border: 0; background: white; }
[data-search-target]:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 2px; }
@media(max-width:700px) { .pk-search-panels { grid-template-columns: 1fr; } .pk-search-head .pk-search-q { flex: 1 1 100%; } }

/* Shared named-list draft picker; kept outside decoder nodes. */
.pk-favorite-scrim { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.65); }
.pk-favorite-panel { width:36rem; max-width:100%; max-height:90vh; overflow:auto; padding:1.5rem; border-radius:1rem; background:var(--pk-popover); color:var(--pk-text); box-shadow:0 1rem 4rem rgba(0,0,0,.4); }
.pk-favorite-target { overflow-wrap:anywhere; margin-block:.5rem 1rem; }
.pk-favorite-choice { display:flex; align-items:center; gap:.75rem; width:100%; min-height:3rem; margin-block:.25rem; padding:.75rem; text-align:start; color:inherit; background:var(--pk-surface); border:1px solid transparent; border-radius:.5rem; }
.pk-favorite-choice[aria-checked="true"] { border-color:var(--pk-accent); }
.pk-favorite-choice:focus-visible { outline:3px solid var(--pk-accent); outline-offset:2px; }
.pk-favorite-new { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1rem; }
.pk-favorite-new label { width:100%; }
.pk-favorite-new input { min-width:0; flex:1; padding:.65rem; background:var(--pk-surface); color:inherit; border:1px solid currentColor; border-radius:.4rem; }
.pk-favorite-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.75rem; margin-block-start:1rem; }
.pk-favorite-panel button:disabled { opacity:.5; }
@media(max-width:600px) { .pk-favorite-scrim { align-items:flex-end; } .pk-favorite-panel { padding:1rem; max-height:85vh; } }

/* WAYO player: physical volume / centered transport / settings across clients. */
.pk-controls {container-type:inline-size;container-name:player-chrome;padding:3.5rem 4.5% 1.1rem;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.82) 55%,transparent);}
.pk-chrome-meta {display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:8px;direction:ltr;}
.pk-chrome-meta .pk-time {padding:0;font-size:13px;}
.pk-ctrl-row {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;direction:ltr;min-height:60px;}
.pk-ctrl-volume {justify-self:start;min-width:0;}
.pk-ctrl-transport,.pk-ctrl-settings {display:flex;align-items:center;gap:4px;}
.pk-ctrl-transport {justify-self:center;}
.pk-ctrl-settings {justify-self:end;}
.pk-ctrl-btn {width:44px;height:44px;border-radius:50%;border:2px solid transparent;}
.pk-ctrl-transport [data-transport="play"] {width:56px;height:56px;}
.pk-ctrl-transport [data-transport="play"] svg {width:28px;height:28px;}
.pk-ctrl-btn:focus-visible {outline:none;border-color:#fff;background:rgba(255,255,255,.12);}
.pk-ctrl-btn.on {color:#fff;background:rgba(255,255,255,.08);}
.pk-vol {gap:6px;}
.pk-vol-range,.pk-vol:hover .pk-vol-range {width:80px;opacity:1;margin:0;transition:none;}
.pk-volume-value {width:34px;font-size:12px;font-variant-numeric:tabular-nums;color:#ddd;}
.pk-menu {background:#000;border-color:#444;backdrop-filter:none;-webkit-backdrop-filter:none;max-width:min(360px,calc(100vw - 32px));}
.pk-menu-item:focus-visible {outline:2px solid #fff;outline-offset:-2px;background:rgba(255,255,255,.12);}
@media(max-width:760px){
 .pk-ctrl-row {grid-template-columns:1fr 1fr;row-gap:8px;}
 .pk-ctrl-transport {grid-column:1 / -1;grid-row:1;}
 .pk-ctrl-volume,.pk-ctrl-settings {grid-row:2;}
}
@media(max-width:480px){
 .pk-ctrl-row {grid-template-columns:1fr;gap:4px;}
 .pk-ctrl-volume {grid-row:2;justify-self:center;}
 .pk-ctrl-settings {grid-row:3;justify-self:center;}
}
@container player-chrome (max-width:760px){
 .pk-ctrl-row {grid-template-columns:1fr 1fr;row-gap:8px;}
 .pk-ctrl-transport {grid-column:1 / -1;grid-row:1;}
 .pk-ctrl-volume,.pk-ctrl-settings {grid-row:2;}
 .pk-vol-range,.pk-vol:hover .pk-vol-range {width:64px;}
}
@container player-chrome (max-width:480px){
 .pk-ctrl-row {grid-template-columns:1fr;gap:4px;}
 .pk-ctrl-volume {grid-row:2;justify-self:center;}
 .pk-ctrl-settings {grid-row:3;justify-self:center;}
}

#pk-stage[data-seek-feedback]::after {content:attr(data-seek-feedback);position:absolute;top:45%;left:75%;transform:translate(-50%,-50%);padding:20px 26px;border-radius:48px;background:rgba(0,0,0,.72);color:#fff;font-size:18px;z-index:5;pointer-events:none;}
#pk-stage[data-seek-direction="back"]::after {left:25%;}
#pk-stage[data-seek-direction="none"]::after {left:50%;max-width:calc(100% - 2rem);box-sizing:border-box;text-align:center;}

/* Buffering / seek wait: one spinner, over the picture and the controls' scrim
   (2), under the seek pill and the retry layer (5) and the ad layer (10). The
   global reduced-motion rule stops the rotation; the label is for assistive tech.
   The empty region is never display:none: a live region hidden that way leaves
   the accessibility tree, and its "Loading" would not be announced. */
.pk-stage-waiting {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3;}
.pk-stage-spinner {display:block;width:3rem;height:3rem;box-sizing:border-box;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:pk-stage-spin .9s linear infinite;}
.pk-stage-waiting-label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@keyframes pk-stage-spin {to {transform:rotate(360deg);}}

/* Menus must paint and receive clicks above the timeline, including the Close row. */
.pk-controls .pk-menu {z-index:10;bottom:calc(100% - 2rem);}
.pk-shortcuts {width:340px;max-height:min(72vh,540px);overflow-y:auto;color:#fff;}
.pk-shortcut-list {display:grid;gap:8px;padding:4px 12px;}
.pk-shortcut-row {display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;}
.pk-shortcut-row kbd {font:inherit;font-size:.85em;text-align:center;border:1px solid #555;border-radius:5px;padding:3px 6px;direction:ltr;}
.pk-shortcut-note {font-size:.8em;color:#bbb;padding:0 12px;line-height:1.4;}
/* A gesture row names the gesture in words above what it does. */
.pk-shortcut-gesture {grid-template-columns:1fr;gap:2px;}
.pk-shortcut-how {font-weight:650;font-size:.85em;color:#ddd;}

/* Previous/next item: at the outer ends of the transport group, set a little
   apart from the -10 / +10 seeks, and symmetric so Play stays centred. A
   disabled control looks disabled: its colour is set here, not by the UA. */
.pk-ctrl-transport [data-step="previous"] {margin-right:8px;}
.pk-ctrl-transport [data-step="next"] {margin-left:8px;}
.pk-ctrl-btn:disabled {opacity:.38;cursor:default;}
.pk-ctrl-btn:disabled:hover {background:none;}
/* The music queue marks the playing track with a tick. */
.pk-music-queue .pk-btn[aria-current="true"]::before {content:"\2713\00a0";color:var(--pk-accent);}

/* RTL: the programme guide is a time axis placed with physical offsets (like
   the transport row), so it stays left-to-right as a whole; the text inside
   each block keeps its own direction. */
[dir="rtl"] .pk-guide {direction:ltr;}
[dir="rtl"] .pk-guide :is(.pk-guide-prog-body,.pk-guide-chan) {unicode-bidi:plaintext;}

/* ---- player regions (PLAN visual target, Kabul 6) ----
   Top left the channel (number, logo, name); top right the date/time with Watch
   Party under it; above the time row what is on. All fade with the controls. */
.pk-stage-lcn {flex:none;color:#fff;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;text-shadow:0 1px 14px rgba(0,0,0,.8);}
.pk-stage-corner {position:absolute;z-index:2;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease);}
body.pk-player-active .pk-stage-corner,.pk-stage-corner:focus-within {opacity:1;pointer-events:auto;}
.pk-stage-clock {display:flex;align-items:baseline;gap:.45rem;color:#fff;font-weight:650;font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 14px rgba(0,0,0,.8);}
.pk-stage-date {color:rgba(255,255,255,.78);font-weight:500;font-size:var(--fs-small);}
.pk-stage:has(> .pk-stage-corner) > .pk-stage-titlebar {max-width:min(60%,560px,calc(100% - 20rem));}
.pk-stage-corner ~ .pk-g09-progress-error {top:7rem;}
.pk-stage-info {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;margin-bottom:6px;color:#fff;min-width:0;}
.pk-stage-info-now,.pk-stage-info-next {display:flex;align-items:center;gap:.6rem;min-width:0;}
.pk-stage-info-title {font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pk-stage-info-sub,.pk-stage-info-slot,.pk-stage-info-next {color:rgba(255,255,255,.78);font-size:var(--fs-small);white-space:nowrap;}
.pk-stage-info-slot {font-variant-numeric:tabular-nums;}
.pk-stage-info-nexttitle {overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pk-stage-info-label {font-weight:650;}
/* Broadcast progress: short, neutral and inert, so it never reads as the seek bar. */
.pk-stage-info-progress {flex:0 0 5rem;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;}
.pk-stage-info-fill {display:block;height:100%;background:rgba(255,255,255,.85);}
@media (max-width:600px) {
 .pk-stage-date {display:none;}
 .pk-stage:has(> .pk-stage-corner) > .pk-stage-titlebar {max-width:calc(100% - 13.5rem);}
}
/* The keyboard zap hint is chrome: shown with the controls, never on touch
   (it names arrow keys) and not in fullscreen, where it sat over the bar. */
.pk-zap-hint {opacity:0;transition:opacity var(--t-med) var(--ease);}
body.pk-player-active .pk-zap-hint {opacity:1;}
.pk-watch:fullscreen .pk-zap-hint {display:none;}
@media (pointer:coarse) { .pk-zap-hint {display:none;} }

/* Safe area: go-app sets viewport-fit=cover, so the player chrome keeps clear
   of notches, rounded corners and the home indicator itself. */
.pk-watch > .pk-back {top:max(1rem,env(safe-area-inset-top));left:max(1rem,env(safe-area-inset-left));}
.pk-watch > .pk-chan-toggle {top:max(1rem,env(safe-area-inset-top));left:calc(max(1rem,env(safe-area-inset-left)) + 3.6rem);}
.pk-stage-titlebar {top:max(1.1rem,env(safe-area-inset-top));left:calc(env(safe-area-inset-left) + 4.6rem);}
.pk-watch-live .pk-stage-titlebar {left:calc(env(safe-area-inset-left) + 8.6rem);}
.pk-controls {padding:3.5rem max(4.5%,env(safe-area-inset-right)) max(1.1rem,env(safe-area-inset-bottom)) max(4.5%,env(safe-area-inset-left));}

/* The dialog scrim a watch screen renders (PIN, EPG programme detail) had no
   rule at all: the dialog sat in the page flow below the 100vh grid, out of
   sight. Fixed over the screen, as .pk-modal-wrap is; inside a fullscreen
   .pk-watch it is painted too. */
.pk-watch .pk-modal-scrim {position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1.5rem;overflow-y:auto;background:rgba(6,8,11,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}

/* Fullscreen is the whole .pk-watch screen (playerFullscreen), so the layers
   it owns — PIN, Info, channel list, EPG detail, Party, LCN tuning — are
   painted as well. The stage fills the screen, the EPG/lyrics side panel
   leaves (as it did when only the stage went fullscreen), and an open Party
   panel overlays the picture. !important: the VOD grid's display is inline. */
.pk-watch:fullscreen {background:#000;}
.pk-watch:fullscreen .pk-live-grid {display:block !important;height:100%;}
.pk-watch:fullscreen .pk-live-grid > .pk-stage {width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;}
.pk-watch:fullscreen .pk-live-grid > .pk-epg:not(.pk-party) {display:none;}
.pk-watch:fullscreen .pk-live-grid > .pk-party {position:absolute;top:0;bottom:0;inset-inline-end:0;z-index:35;width:min(360px,100%);box-sizing:border-box;}
body:not(.pk-player-active) .pk-watch:fullscreen > :is(.pk-back,.pk-chan-toggle):not(:focus-visible) {opacity:0;pointer-events:none;}
/* The live screen's own status layers, outside the stage. In fullscreen the
   LCN tuning line moves under the channel identity: at bottom:5rem it sat under
   the control bar's scrim and volume. The EPG retry never had a place — it
   followed the 100vh grid, out of sight windowed and fullscreen alike. */
.pk-watch:fullscreen > .pk-stage-status {top:5rem;bottom:auto;left:max(1rem,env(safe-area-inset-left));z-index:6;}
.pk-watch > .pk-error[role="status"] {position:absolute;top:7rem;inset-inline-end:max(1rem,env(safe-area-inset-right));z-index:6;display:flex;align-items:center;gap:.75rem;max-width:calc(100% - 2rem);box-sizing:border-box;padding:.5rem .75rem;border-radius:var(--rad-s);background:rgba(0,0,0,.72);}
.pk-watch > .pk-error[role="status"] p {margin:0;}

/* Phone/tablet portrait (live, music, radio): the 16:9 picture is ~56vw tall,
   shorter than the stacked controls, which covered all of it and were clipped
   by the stage. Here the stage is a column — the picture, then the controls
   in flow on solid black, always shown because they cover nothing — and the
   layers that centre on the stage keep to the picture. Fullscreen keeps the
   overlay: the stage is the whole screen there. */
@media (max-width:900px) and (orientation:portrait) {
 .pk-watch-live:not(:fullscreen) .pk-stage {aspect-ratio:auto;max-height:none;flex-direction:column;justify-content:flex-start;}
 .pk-watch-live:not(:fullscreen) .pk-stage-video {flex:none;height:auto;aspect-ratio:16/9;}
 .pk-watch-live:not(:fullscreen) .pk-controls {position:relative;align-self:stretch;opacity:1;pointer-events:auto;background:#000;padding:.6rem max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));}
 .pk-watch-live:not(:fullscreen) .pk-controls .pk-menu {max-height:calc(56.25vw + 1.5rem);}
 .pk-watch-live:not(:fullscreen) :is(.pk-stage-waiting,.pk-radio-viz) {bottom:auto;height:56.25vw;}
 .pk-watch-live:not(:fullscreen) .pk-music-audio {bottom:auto !important;height:56.25vw;}
 .pk-watch-live:not(:fullscreen) #pk-stage[data-seek-feedback]::after {top:28.125vw;}
 .pk-watch-live:not(:fullscreen) .pk-stage-status {bottom:auto;top:calc(56.25vw - 3.5rem);}
 .pk-watch-live:not(:fullscreen) .pk-g09-player-retry {bottom:auto;top:calc(28.125vw - 1.5rem);}
}

/* Home toolbar: the Assistant entry and the idle "Edit Home rows" action share
   one row; the opened rail editor wraps onto a full-width row of its own. */
.pk-home-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem 2rem; }
.pk-home-toolbar > .pk-panel { flex: 1 1 100%; margin: 0; }
.pk-home-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
@media (max-width: 768px) { .pk-home-toolbar { padding: 0.75rem 1rem; } }

/* ---- Movies / Series: genre chips + genre rails (owner request 2026-09-27) ----
   The Search / Genre / Sort form is gone. Under the banner and the section title
   a chip row (Search, "Tümü", one chip per genre; "Tüm Türler" pinned at the
   end) scrolls in the shared rail viewport (hover arrows; a swipe on touch), and
   "Tümü" is one rail per genre whose title and "Tümünü Gör" open the genre list.
   The page's regions are always in the tree (go-app diffs by index) but take no
   box of their own, so the rails sit in .pk-rails' column exactly like Home's. */
.pk-g09-catalog-title { margin: 1.5rem 0 -0.9rem; }
.pk-vod-hero-slot, .pk-vod-status, .pk-vod-error, .pk-genre-rails, .pk-genre-saved,
.pk-genre-rail-list, .pk-genre-list-region, .pk-genre-list-body, .pk-genre-list-more,
.pk-genre-dialog-slot { display: contents; }
.pk-vod-browse [hidden] { display: none !important; }
.pk-genre-bar { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pk-genre-viewport { flex: 1 1 auto; min-width: 0; }
.pk-genre-viewport .pk-rail-track { gap: 0.55rem; padding: 4px 2px; scroll-snap-type: none; }
.pk-genre-bar:hover .pk-rail-arrow, .pk-genre-bar:focus-within .pk-rail-arrow { opacity: 1; }
.pk-genre-viewport .pk-rail-arrow { width: 44px; }
.pk-genre-viewport .pk-rail-arrow::before { width: 32px; height: 32px; }
.pk-genre-viewport .pk-rail-arrow svg { width: 20px; height: 20px; }
.pk-genre-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 40px; padding: 0.4rem 1rem; box-sizing: border-box;
  background: var(--pk-surface); color: var(--pk-fg);
  border: 1px solid var(--pk-border); border-radius: 999px;
  font: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pk-genre-chip:hover { background: var(--pk-nav-hover); border-color: var(--pk-muted); }
.pk-genre-chip:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
.pk-genre-chip.active { border-color: var(--pk-accent); box-shadow: inset 0 0 0 1px var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 16%, var(--pk-surface)); font-weight: 700; }
.pk-genre-chip svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pk-genre-search svg { color: var(--pk-accent); }
.pk-genre-more { flex: 0 0 auto; }
.pk-genre-more:disabled { opacity: 0.5; cursor: default; }
.pk-genre-chip .pk-genre-chev { width: 16px; height: 16px; flex-basis: 16px; }
[dir="rtl"] .pk-genre-chev { transform: scaleX(-1); }
.pk-genre-count { font-size: var(--fs-micro); font-weight: 650; color: var(--pk-muted); background: var(--pk-elevated); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.pk-genre-rail-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 0.9rem; }
.pk-genre-rail-head .pk-rail-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.pk-genre-rail-link { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; color: inherit; text-decoration: none; }
.pk-genre-rail-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-genre-rail-link .pk-genre-chev { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pk-muted); }
.pk-genre-rail-link:hover, .pk-genre-rail-link:hover .pk-genre-chev { color: var(--pk-accent); }
.pk-genre-seeall { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--fs-small); font-weight: 650; color: var(--pk-muted); text-decoration: none; white-space: nowrap; }
.pk-genre-seeall .pk-genre-chev { width: 16px; height: 16px; }
.pk-genre-seeall:hover, .pk-genre-seeall:focus-visible { color: var(--pk-accent); }
.pk-genre-rail-link:focus-visible, .pk-genre-seeall:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 3px; border-radius: 4px; }
.pk-genre-list-title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 -1rem; }
/* Genre rail cards are 16:9 (owner 2026-09-27, image 2; every client): backdrop
   (else poster) covering the card, title and "Genre • Year" on a dark gradient at
   the bottom. ~300px on desktop; ~70vw on a phone so the next card peeks. */
.pk-genre-rail { --pk-lcard: clamp(280px, 22vw, 320px); }
.pk-lcard {
  position: relative; flex: 0 0 var(--pk-lcard); scroll-snap-align: start;
  aspect-ratio: 16 / 9; border-radius: var(--rad-m); overflow: hidden; background: var(--pk-elevated);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.pk-lcard:hover { transform: scale(1.03); box-shadow: var(--pk-shadow-2); z-index: 2; }
.pk-lcard:has(:focus-visible) { transform: scale(1.03); box-shadow: 0 0 0 2px var(--pk-accent), 0 0 0 7px var(--pk-ring), var(--pk-shadow-2); z-index: 2; }
.pk-lcard-link { display: block; position: absolute; inset: 0; color: var(--pk-on-art); text-decoration: none; }
.pk-lcard-link:focus-visible { outline: none; }
.pk-lcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--pk-elevated); }
.pk-lcard-ph { background: linear-gradient(135deg, var(--pk-elevated), color-mix(in srgb, var(--pk-elevated) 60%, var(--pk-popover))); }
.pk-lcard-info {
  position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 2.4rem 0.85rem 0.7rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.55) 55%, transparent);
  text-align: start;
}
.pk-lcard-title { font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-lcard-meta { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-genre-modal { width: min(720px, 100%); }
.pk-genre-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
@media (max-width: 768px) {
  .pk-g09-catalog-title { margin-top: 1rem; }
  .pk-genre-bar { gap: 0.45rem; }
  .pk-genre-chip { min-height: 36px; padding: 0.35rem 0.8rem; }
  .pk-genre-rail-head { gap: 0.6rem; }
  .pk-genre-rail { --pk-lcard: 70vw; }
}
@media (prefers-reduced-motion: reduce) { .pk-lcard:hover, .pk-lcard:has(:focus-visible) { transform: none; } }

/* ---- Program Guide toolbar (owner screenshot 2026-09-25) ----
   The window range and the day/window steps share one wrapping row; the
   categories are the Movies/Series chip row under it (.pk-guide-chips, 2026-09-27;
   the search field is gone: "Ara" opens the Search page on programmes). */
.pk-guide-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.4rem var(--pk-gutter) 0.8rem; }
.pk-guide-range { margin-inline-start: auto; color: var(--pk-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-guide-daynav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 720px) {
  .pk-guide-range { margin-inline-start: 0; flex-basis: 100%; }
}
/* A phone in landscape (owner report 2026-09-26, TV Guide on Android): a tighter toolbar, the
   chips on their one scrolling row, and a grid that fills the viewport once the page is scrolled to it. */
@media (orientation: landscape) and (max-height: 520px) {
  .pk-guide-toolbar { gap: 0.4rem 0.6rem; margin-bottom: 0.4rem; }
  .pk-guide-range { margin-inline-start: 0; flex-basis: auto; }
  .pk-guide-chips { margin-bottom: 0.5rem; }
  .pk-guide { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin-bottom: 1rem; }
}

/* ---- Shorts side fill (owner request 2026-09-25) ----
   A blurred, dimmed copy of the playing frame fills the bars beside the 9:16
   stage (shorts_fill_js.go draws it into an 18x32 canvas). */
.pk-watch-shorts { position: relative; overflow: hidden; }
.pk-shorts-fill {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(36px) brightness(0.55) saturate(1.2); transform: scale(1.2);
  pointer-events: none;
}
.pk-watch-shorts > :not(.pk-shorts-fill) { position: relative; z-index: 1; }
.pk-watch-shorts > .pk-back { position: absolute; z-index: 3; }
.pk-stage-portrait { box-shadow: 0 0 60px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: reduce) { .pk-shorts-fill { display: none; } }

/* ---- Live player: hide/show the right-hand guide panel (owner request 2026-09-25) ---- */
.pk-epg-toggle {
  position: absolute; z-index: 30; width: 44px; height: 44px; display: grid; place-items: center;
  top: max(1rem, env(safe-area-inset-top)); left: calc(max(1rem, env(safe-area-inset-left)) + 7.2rem);
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%;
  color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease);
}
.pk-epg-toggle:hover { background: rgba(0, 0, 0, 0.85); }
.pk-epg-toggle[aria-pressed="false"] { color: var(--pk-accent); }
.pk-epg-toggle svg { width: 22px; height: 22px; }
.pk-live-grid.pk-epg-hidden { grid-template-columns: minmax(0, 1fr); }
.pk-grid-party.pk-epg-hidden { grid-template-columns: minmax(0, 1fr) 320px; }
.pk-epg-hidden > .pk-epg:not(.pk-party) { display: none; }
.pk-epg-hidden > .pk-stage { justify-self: center; width: min(100%, calc(100vh * 16 / 9)); }
body:not(.pk-player-active) .pk-watch:fullscreen > .pk-epg-toggle:not(:focus-visible) { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .pk-grid-party.pk-epg-hidden { grid-template-columns: 1fr; } }

/* ---- Game detail card (deep links from search/lists; 2026-09-25) ---- */
.pk-game-detail {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  margin: 2.5rem var(--pk-gutter); padding: 2rem 2.2rem; max-width: 880px;
  background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--rad-l);
  border-inline-start: 6px solid hsl(var(--g-hue, 200) 90% 60%);
  box-shadow: 0 18px 40px hsl(var(--g-hue, 200) 90% 40% / .18);
}
.pk-game-detail-logo { flex: none; width: 112px; height: 112px; color: hsl(var(--g-hue, 200) 92% 66%); }
.pk-game-detail-logo svg { width: 100%; height: 100%; display: block; }
.pk-game-detail-body { flex: 1 1 280px; min-width: 0; }
.pk-game-detail-title { margin: 0; font-size: var(--fs-h1); font-weight: 750; letter-spacing: -0.015em; }
.pk-game-detail-tag { margin: 0.4rem 0 1.4rem; color: var(--pk-muted); font-size: 1.05rem; }
.pk-game-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* ---- Shop page gutters + product detail card (owner screenshot 2026-09-25) ---- */
.pk-shop { padding: 1.7rem var(--pk-gutter) 2.5rem; max-width: calc(1100px + 2 * var(--pk-gutter)); box-sizing: border-box; }
.pk-shop > h1 { margin: 0 0 1rem; font-size: var(--fs-h1); font-weight: 750; letter-spacing: -0.015em; }
.pk-shop .pk-searchbar { margin-inline: 0; }
.pk-shop-back { margin-bottom: 1.2rem; }
.pk-shop-product {
  display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: 2rem; align-items: start;
  background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--rad-l); padding: 1.5rem;
}
.pk-shop-product-media {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--pk-border); border-radius: var(--rad-m);
  background: var(--pk-elevated); overflow: hidden; cursor: zoom-in;
}
.pk-shop-product-media:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 3px; }
.pk-shop-product-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pk-shop-product-ph { display: grid; place-items: center; height: 100%; padding: 1rem; color: var(--pk-muted); text-align: center; }
.pk-shop-product-info { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.pk-shop-product-title { margin: 0; font-size: var(--fs-h1); font-weight: 750; letter-spacing: -0.015em; line-height: 1.15; }
.pk-shop-product .pk-shop-description-full {
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto;
  color: var(--pk-fg); opacity: 0.88; font-size: 1.02rem; line-height: 1.55;
}
.pk-shop-product-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.pk-shop-product-actions .pk-btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .pk-shop-product { grid-template-columns: 1fr; } }

/* ---- Listelerim hub (lists redesign 2026-09-26, ottdoc Lists-Redesign-2026-09-26.md) ----
   One markup, two layouts. ≥ 720 px: the lists pane (280 px, Watch Later first)
   beside the selected list. < 720 px (and short landscape phones): two levels,
   .pk-lists[data-level] shows the hub overview or the list. Logical properties
   only, so Arabic mirrors the whole layout. No lift/scale animation; motion is
   limited to colour/opacity and switched off for prefers-reduced-motion. */
.pk-lists { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; min-height: 100vh; }
.pk-lists.is-standalone { display: block; }
.pk-lists.is-standalone .pk-lists-back { display: inline-grid; }
.pk-lists-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.pk-lists .pk-lists-only-narrow, .pk-lists .pk-lists-rail, .pk-lists .pk-lists-entry-ico, .pk-lists .pk-lists-entry-chev, .pk-lists .pk-lists-back { display: none; }

/* buttons */
.pk-lists-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 40px; padding: 0.45rem 0.95rem;
  border-radius: var(--rad-m); border: 1px solid var(--pk-border); background: var(--pk-elevated); color: var(--pk-fg);
  font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pk-lists-btn:hover { border-color: var(--pk-muted); }
.pk-lists-btn:disabled { opacity: 0.5; cursor: default; }
.pk-lists-btn svg { width: 18px; height: 18px; flex: none; }
.pk-lists-btn.is-danger { color: var(--pk-danger); }
.pk-lists-icon-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--pk-fg); cursor: pointer; text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.pk-lists-icon-btn:hover { background: var(--pk-nav-hover); }
.pk-lists-icon-btn:disabled { opacity: 0.45; cursor: default; }
.pk-lists-icon-btn svg { width: 20px; height: 20px; }
.pk-lists-icon-btn.is-danger { color: var(--pk-danger); }
.pk-btn.is-danger { background: var(--pk-danger); color: #fff; }

/* lists pane */
.pk-lists-pane {
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 0.9rem 2rem;
  border-inline-end: 1px solid var(--pk-border);
}
.pk-lists-pane-head { position: relative; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.6rem; }
.pk-lists-title { flex: 1; min-width: 0; margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 750; letter-spacing: -0.01em; }
.pk-lists-title:focus { outline: none; }
.pk-lists-pane-actions { display: flex; align-items: center; }
.pk-lists-entries { display: flex; flex-direction: column; gap: 0.2rem; }
.pk-lists-entry-head {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.4rem 0.6rem;
  border-radius: var(--rad-m); color: var(--pk-fg); text-decoration: none;
}
.pk-lists-entry-head:hover { background: var(--pk-nav-hover); }
.pk-lists-entry-head[aria-current="true"] { background: color-mix(in srgb, var(--pk-accent) 12%, transparent); }
.pk-lists-entry-head[aria-current="true"]::before {
  content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--pk-accent);
}
.pk-lists-collage {
  flex: none; width: 40px; height: 40px; border-radius: var(--rad-s); overflow: hidden; display: grid; place-items: center;
  background: var(--pk-elevated); color: var(--pk-muted);
}
.pk-lists-collage-img { width: 100%; height: 100%; object-fit: cover; }
.pk-lists-collage-ico svg, .pk-lists-entry-ico svg { width: 20px; height: 20px; }
.pk-lists-entry-ico, .pk-lists-row-ico { flex: none; color: var(--pk-accent); }
.pk-lists-row-ico { display: inline-grid; }
.pk-lists-row-ico svg { width: 20px; height: 20px; }
.pk-lists-entry-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-lists-entry-count {
  flex: none; min-width: 1.7rem; padding: 0 0.45rem; border-radius: 999px; line-height: 1.5rem; text-align: center;
  font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(127, 127, 127, 0.2); color: var(--pk-fg-soft);
}
.pk-lists-entry-chev svg { width: 18px; height: 18px; }
[dir="rtl"] .pk-lists-entry-chev svg, [dir="rtl"] .pk-lists-back svg { transform: scaleX(-1); }
.pk-lists-newtile {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 48px; margin-top: 0.5rem; padding: 0.5rem 0.8rem;
  border: 1.5px dashed var(--pk-border); border-radius: var(--rad-m); background: transparent; color: var(--pk-fg-soft);
  font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; text-align: start;
}
.pk-lists-newtile:hover { border-color: var(--pk-muted); color: var(--pk-fg); }
.pk-lists-newtile svg { width: 20px; height: 20px; }
.pk-lists-editlists { justify-content: flex-start; margin-top: 0.4rem; background: transparent; border-color: transparent; color: var(--pk-fg-soft); }
.pk-lists-editlists:hover { background: var(--pk-nav-hover); border-color: transparent; color: var(--pk-fg); }
.pk-lists-status { margin: 0.5rem 0; color: var(--pk-muted); font-size: var(--fs-small); }

/* list detail */
.pk-lists-detail { min-width: 0; padding: 1.4rem var(--pk-gutter) 3rem; box-sizing: border-box; }
.pk-lists-head { position: relative; display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; }
.pk-lists-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.pk-lists-detail-title { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-h1); font-weight: 750; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pk-lists-detail-title:focus { outline: none; }
.pk-lists-head-ico { display: inline-grid; color: var(--pk-accent); }
.pk-lists-head-ico svg { width: 24px; height: 24px; }
.pk-lists-head-sub { color: var(--pk-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pk-lists-contextbar {
  position: sticky; top: 0; z-index: 6; padding: 0.45rem 0.6rem; border-radius: var(--rad-m);
  background: color-mix(in srgb, var(--pk-accent) 14%, var(--pk-surface)); box-shadow: var(--pk-shadow-2);
}
.pk-lists-contextbar .pk-lists-detail-title, .pk-lists-contextbar .pk-lists-title { font-size: 1.15rem; }
.pk-lists-done { min-height: 40px; padding: 0.45rem 1.2rem; }

/* banners, hint, empty states */
.pk-lists-banner, .pk-lists-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem;
  border-radius: var(--rad-m); border: 1px solid var(--pk-border); background: var(--pk-surface);
}
.pk-lists-banner p, .pk-lists-hint p { flex: 1 1 16rem; margin: 0; font-size: var(--fs-ui); line-height: 1.4; }
.pk-lists-banner.is-warn { border-color: color-mix(in srgb, var(--pk-warn) 55%, transparent); background: color-mix(in srgb, var(--pk-warn) 10%, var(--pk-surface)); }
.pk-lists-banner.is-error { border-color: color-mix(in srgb, var(--pk-danger) 55%, transparent); background: color-mix(in srgb, var(--pk-danger) 10%, var(--pk-surface)); }
.pk-lists-hint { border-color: color-mix(in srgb, var(--pk-accent) 45%, transparent); background: color-mix(in srgb, var(--pk-accent) 8%, var(--pk-surface)); }
.pk-lists-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 3rem 1rem; }
.pk-lists-empty-ico {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--pk-accent);
  border: 1px solid color-mix(in srgb, var(--pk-accent) 30%, transparent); background: color-mix(in srgb, var(--pk-accent) 8%, var(--pk-surface));
}
.pk-lists-empty-ico svg { width: 32px; height: 32px; }
.pk-lists-empty-title { margin: 0.4rem 0 0; font-size: var(--fs-h2); font-weight: 700; }
.pk-lists-empty-body { margin: 0; max-width: 32rem; color: var(--pk-muted); line-height: 1.45; }
.pk-lists-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; }

/* toolbar: chips, sort, view */
.pk-lists-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 1.25rem; }
.pk-lists-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pk-lists-chips::-webkit-scrollbar { display: none; }
.pk-lists-chip {
  flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.3rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--pk-border); background: var(--pk-surface); color: var(--pk-fg);
  font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
}
.pk-lists-chip:hover { border-color: var(--pk-muted); }
.pk-lists-chip[aria-pressed="true"] { background: var(--pk-fg); border-color: var(--pk-fg); color: var(--pk-bg); }
.pk-lists-chip-count { opacity: 0.7; font-variant-numeric: tabular-nums; }
.pk-lists-tools { position: relative; display: flex; align-items: center; gap: 0.4rem; margin-inline-start: auto; }
.pk-lists-sortbtn svg:last-child { width: 14px; height: 14px; }
.pk-lists-viewtoggle { display: flex; }
.pk-lists-viewtoggle .pk-lists-icon-btn[aria-pressed="true"] { color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 14%, transparent); }

/* tiles (grid) and rows (list view) share the markup */
.pk-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.3rem 1rem; }
.pk-lists-section + .pk-lists-section { margin-top: 1.8rem; }
.pk-lists-section-title { margin: 0 0 0.75rem; font-size: var(--fs-h2); font-weight: 700; }
.pk-lists-item { position: relative; min-width: 0; }
.pk-lists-link { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--rad-m); }
.pk-lists-link:focus-visible { outline: none; box-shadow: none; }
.pk-lists-link:focus-visible .pk-lists-art { box-shadow: 0 0 0 2px var(--pk-accent), 0 0 0 6px var(--pk-ring); }
.pk-lists-link:hover .pk-lists-art { filter: brightness(1.08); }
.pk-lists-item.is-closed .pk-lists-link { opacity: 0.62; }
.pk-lists-art {
  position: relative; display: block; flex: none; width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--rad-m); background: var(--pk-surface); isolation: isolate;
  transition: filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pk-lists-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pk-lists-art-logo { background: var(--pk-elevated); }
.pk-lists-art-logo .pk-lists-art-img { inset: 0; margin: auto; width: 60%; height: 60%; object-fit: contain; }
.pk-lists-art-fill .pk-lists-art-img { object-fit: contain; }
.pk-lists-art-blur { position: absolute; inset: -12%; z-index: -1; background-size: cover; background-position: center; filter: blur(18px) brightness(0.6); }
.pk-lists-art-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: var(--pk-grad); }
.pk-lists-art-glyph svg { width: 34%; height: auto; }
.pk-lists-art-gone { background: var(--pk-elevated); }
.pk-lists-art-gone .pk-lists-art-glyph { background: none; color: var(--pk-muted); }
.pk-lists-badge {
  position: absolute; top: 0.45rem; inset-inline-start: 0.45rem; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em;
}
.pk-lists-badge-live { background: var(--pk-live); text-transform: uppercase; }
.pk-lists-badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pk-lists-lock { position: absolute; bottom: 0.55rem; inset-inline-end: 0.45rem; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; }
.pk-lists-lock svg { width: 15px; height: 15px; }
.pk-lists-progress { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.28); }
.pk-lists-progress-fill { display: block; height: 100%; background: var(--pk-accent); }
.pk-lists-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-lists-name { font-size: var(--fs-ui); font-weight: 650; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pk-lists-sub { font-size: var(--fs-small); color: var(--pk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-lists-sub bdi { unicode-bidi: isolate; }
.pk-lists-grid .pk-lists-progress-text { display: none; }
.pk-lists-more {
  position: absolute; top: 0.35rem; inset-inline-end: 0.35rem; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.66); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.pk-lists-more svg { width: 18px; height: 18px; }
.pk-lists-item:hover .pk-lists-more, .pk-lists-item:focus-within .pk-lists-more, .pk-lists-item.is-menu-open .pk-lists-more, .pk-lists-more:focus-visible { opacity: 1; }
.pk-lists-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.pk-lists-rows .pk-lists-item { min-height: 100px; padding: 0.5rem; padding-inline-end: 3.4rem; box-sizing: border-box; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--rad-m); }
.pk-lists-rows .pk-lists-link { flex-direction: row; align-items: center; gap: 0.9rem; }
.pk-lists-rows .pk-lists-art { width: 56px; height: 84px; aspect-ratio: auto; border-radius: var(--rad-s); }
.pk-lists-rows .pk-lists-badge, .pk-lists-rows .pk-lists-lock { display: none; }
.pk-lists-rows .pk-lists-name { -webkit-line-clamp: 1; }
.pk-lists-rows .pk-lists-more { top: 50%; transform: translateY(-50%); opacity: 1; width: 44px; height: 44px; background: transparent; color: var(--pk-fg); }
.pk-lists-rows .pk-lists-more:hover { background: var(--pk-nav-hover); }

/* menus: a popover here, a bottom sheet on narrow screens */
.pk-lists-menu-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; }
.pk-lists-menu {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 41; min-width: 230px; max-width: min(320px, calc(100vw - 32px));
  padding: 0.35rem; box-sizing: border-box; background: var(--pk-popover); color: var(--pk-fg);
  border: 1px solid var(--pk-border); border-radius: var(--rad-m); box-shadow: var(--pk-shadow-3);
}
.pk-lists-item .pk-lists-menu { top: 2.9rem; inset-inline-end: 0.35rem; }
.pk-lists-rows .pk-lists-item .pk-lists-menu { top: calc(50% + 1.5rem); }
.pk-lists-menu-title { display: none; }
.pk-lists-menu-item {
  display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 44px; padding: 0.5rem 0.7rem; border: 0;
  border-radius: var(--rad-s); background: none; color: inherit; font: inherit; font-size: var(--fs-ui); text-align: start; cursor: pointer;
}
.pk-lists-menu-item:hover { background: var(--pk-nav-hover); }
.pk-lists-menu-item:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: -2px; box-shadow: none; background: var(--pk-nav-hover); }
.pk-lists-menu-item:disabled { opacity: 0.45; cursor: default; }
.pk-lists-menu-item.is-danger { color: var(--pk-danger); }
.pk-lists-menu-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.pk-lists-menu-ico svg { width: 18px; height: 18px; }

/* edit mode */
.pk-lists-edithint { margin: 0 0 0.8rem; color: var(--pk-fg-soft); font-size: var(--fs-ui); }
.pk-lists-editlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pk-lists-erow {
  display: flex; align-items: center; gap: 0.4rem; min-height: 56px; padding: 0.35rem; box-sizing: border-box;
  background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--rad-m);
}
.pk-lists-erow.is-selected { border-color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 10%, var(--pk-surface)); }
.pk-lists-erow.is-lifted, .pk-lists-erow.is-dragging { outline: 2px solid var(--pk-accent); outline-offset: 2px; box-shadow: var(--pk-shadow-2); }
.pk-lists-erow.is-fixed { color: var(--pk-fg-soft); padding-inline: 0.75rem; gap: 0.75rem; }
.pk-lists.is-editing-lists { grid-template-columns: 360px minmax(0, 1fr); }
.pk-lists-editlist-groups .pk-lists-erow { padding-inline-start: 0.6rem; gap: 0.2rem; }
.pk-lists-editlist-groups .pk-lists-erow .pk-lists-entry-name { margin-inline-start: 0.3rem; }
.pk-lists-editlist-groups .pk-lists-erow .pk-lists-entry-count { margin-inline-end: 0.2rem; }
.pk-lists-editlist-groups .pk-lists-icon-btn { width: 40px; height: 40px; }
.pk-lists-editlist-groups .pk-lists-handle { width: 44px; height: 44px; flex-basis: 44px; }
.pk-lists-fixed { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-small); color: var(--pk-muted); }
.pk-lists-fixed svg { width: 14px; height: 14px; }
.pk-lists-erow-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.25rem;
  border: 0; border-radius: var(--rad-s); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.pk-lists-erow .pk-lists-art { width: 48px; height: 72px; aspect-ratio: auto; border-radius: var(--rad-s); }
.pk-lists-erow .pk-lists-badge, .pk-lists-erow .pk-lists-lock { display: none; }
.pk-lists-erow .pk-lists-name { -webkit-line-clamp: 1; }
.pk-lists-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid var(--pk-muted); border-radius: 6px; }
.pk-lists-check svg { width: 16px; height: 16px; }
.pk-lists-erow.is-selected .pk-lists-check { background: var(--pk-accent); border-color: var(--pk-accent); color: var(--pk-accent-fg); }
.pk-lists-handle {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--rad-s);
  background: none; color: var(--pk-muted); cursor: grab; touch-action: none;
}
.pk-lists-handle:hover { color: var(--pk-fg); background: var(--pk-nav-hover); }
.pk-lists-handle[aria-pressed="true"] { color: var(--pk-accent); background: color-mix(in srgb, var(--pk-accent) 14%, transparent); }
.pk-lists-erow.is-dragging .pk-lists-handle { cursor: grabbing; }
.pk-lists-handle svg { width: 22px; height: 22px; }
.pk-lists-editbar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem 0;
  background: var(--pk-bg); border-top: 1px solid var(--pk-border);
}
@media (min-width: 1200px) { .pk-lists-detail .pk-lists-editlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dialogs and the toast */
.pk-lists-scrim { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 1rem; background: rgba(6, 8, 11, 0.66); }
.pk-lists-dialog {
  width: min(440px, 100%); max-height: 90vh; overflow-y: auto; box-sizing: border-box; padding: 1.3rem 1.4rem;
  background: var(--pk-popover); color: var(--pk-fg); border: 1px solid var(--pk-border); border-radius: var(--rad-l); box-shadow: var(--pk-shadow-4);
}
.pk-lists-dialog-title { margin: 0 0 0.8rem; font-size: var(--fs-h2); font-weight: 750; }
.pk-lists-dialog-body p { margin: 0 0 0.8rem; line-height: 1.45; color: var(--pk-fg-soft); }
.pk-lists-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.pk-lists-nameform { display: flex; flex-direction: column; gap: 0.4rem; }
.pk-lists-nameform label { font-size: var(--fs-small); font-weight: 600; color: var(--pk-fg-soft); }
.pk-lists-field-msg { min-height: 1.2em; margin: 0; font-size: var(--fs-small); color: var(--pk-danger); }
.pk-lists-choice {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 48px; margin: 0 0 0.4rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--pk-border); border-radius: var(--rad-m); background: var(--pk-surface); color: var(--pk-fg); font: inherit; text-align: start; cursor: pointer;
}
.pk-lists-choice:hover { border-color: var(--pk-accent); }
.pk-lists-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 1rem;
  max-width: min(560px, calc(100vw - 2rem)); padding: 0.7rem 0.7rem 0.7rem 1.1rem; box-sizing: border-box;
  border-radius: var(--rad-m); background: var(--pk-popover); color: var(--pk-fg); border: 1px solid var(--pk-border); box-shadow: var(--pk-shadow-3);
}
[dir="rtl"] .pk-lists-toast { padding: 0.7rem 1.1rem 0.7rem 0.7rem; }
.pk-lists-toast-text { flex: 1; min-width: 0; font-size: var(--fs-ui); overflow-wrap: anywhere; }
.pk-lists-toast-btn { flex: none; min-height: 40px; padding: 0.4rem 0.9rem; border: 0; border-radius: var(--rad-s); background: transparent; color: var(--pk-accent); font: inherit; font-weight: 750; cursor: pointer; }
.pk-lists-toast-btn:hover { background: var(--pk-nav-hover); }

/* narrow: two levels (§5.1, §5.2, §5.5) */
@media (max-width: 719.98px), (orientation: landscape) and (max-height: 480px) {
  .pk-lists { display: block; min-height: 0; }
  .pk-lists[data-level="detail"] > .pk-lists-pane:not(.is-editing) { display: none; }
  .pk-lists[data-level="hub"] > .pk-lists-detail { display: none; }
  .pk-lists.is-editing[data-level="hub"] > .pk-lists-detail { display: block; }
  .pk-lists.is-editing > .pk-lists-pane { display: none; }
  .pk-lists-pane { position: static; max-height: none; overflow: visible; border: 0; padding: 1rem var(--pk-gutter) 1.5rem; gap: 0.9rem; }
  .pk-lists .pk-lists-only-narrow { display: block; }
  .pk-lists-collage { display: none; }
  .pk-lists .pk-lists-entry-ico, .pk-lists .pk-lists-entry-chev, .pk-lists .pk-lists-back { display: inline-grid; }
  .pk-lists-entries { gap: 1.1rem; }
  .pk-lists-entry-head { min-height: 48px; padding: 0.25rem 0; gap: 0.6rem; }
  .pk-lists-entry-head:hover, .pk-lists-entry-head[aria-current="true"] { background: none; }
  .pk-lists-entry-head[aria-current="true"]::before { display: none; }
  .pk-lists-entry-name { font-size: 1.05rem; font-weight: 700; }
  .pk-lists .pk-lists-rail { display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 4px; }
  .pk-lists-rail::-webkit-scrollbar { display: none; }
  .pk-lists-mini { flex: 0 0 96px; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; scroll-snap-align: start; color: inherit; text-decoration: none; }
  .pk-lists-mini.is-closed { opacity: 0.6; }
  .pk-lists-mini .pk-lists-art { border-radius: var(--rad-s); }
  .pk-lists-mini .pk-lists-badge { font-size: 0.62rem; padding: 1px 6px; top: 0.3rem; inset-inline-start: 0.3rem; }
  .pk-lists-mini-name { font-size: var(--fs-micro); color: var(--pk-fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-lists-mini:focus-visible { outline: none; box-shadow: none; }
  .pk-lists-mini:focus-visible .pk-lists-art { box-shadow: 0 0 0 2px var(--pk-accent), 0 0 0 5px var(--pk-ring); }
  .pk-lists-mini-add { justify-content: center; align-items: center; aspect-ratio: 2 / 3; flex-basis: 96px; border: 1.5px dashed var(--pk-border); border-radius: var(--rad-s); color: var(--pk-fg-soft); text-align: center; padding: 0.5rem; box-sizing: border-box; }
  .pk-lists-mini-add-ico svg { width: 24px; height: 24px; }
  .pk-lists-mini-add .pk-lists-mini-name { white-space: normal; }
  .pk-lists-editlists { justify-content: center; }
  .pk-lists-detail { padding: 0.6rem var(--pk-gutter) 2rem; }
  .pk-lists-head { flex-wrap: wrap; }
  .pk-lists-detail-title { font-size: 1.35rem; }
  .pk-lists-toolbar { gap: 0.5rem; }
  .pk-lists-chips { flex-basis: 100%; }
  .pk-lists-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.6rem; }
  .pk-lists-more { opacity: 1; width: 32px; height: 32px; }
  .pk-lists-menu-scrim { z-index: 9400; background: rgba(0, 0, 0, 0.45); }
  .pk-lists-menu, .pk-lists-item .pk-lists-menu, .pk-lists-rows .pk-lists-item .pk-lists-menu {
    position: fixed; inset-inline: 0; top: auto; bottom: 0; z-index: 9401; min-width: 0; max-width: none; max-height: 80vh; overflow-y: auto;
    padding: 0.4rem 0.6rem calc(0.8rem + env(safe-area-inset-bottom, 0)); border-radius: 16px 16px 0 0; transform: none;
  }
  .pk-lists-menu-title { display: block; padding: 0.7rem 0.7rem 0.4rem; font-weight: 700; color: var(--pk-muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-lists-menu-item { min-height: 48px; }
  .pk-lists-scrim { place-items: end center; padding: 0; }
  .pk-lists-dialog { width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0)); }
  .pk-lists-editbar { justify-content: space-between; }
  .pk-lists-editbar .pk-lists-btn { flex: 1 1 auto; padding-inline: 0.6rem; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .pk-lists-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* phones: the bottom tab bar (≤ 768 px) sits over the page foot */
@media (max-width: 768px) {
  .pk-lists-editbar { bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
  .pk-lists-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0)); }
}
@media (hover: none) { .pk-lists-more { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pk-lists-art, .pk-lists-more, .pk-lists-btn, .pk-lists-icon-btn { transition: none; }
  .pk-lists-link:hover .pk-lists-art { filter: none; }
  .pk-lists-rail { scroll-behavior: auto; scroll-snap-type: none; }
}

/* ---- subscriber assistant (2026-09-25) ---- */
/* Rail entry (assistantNavEntry): a button among the links; .pk-nav-item already
   resets button chrome. The sparkle carries the accent so the entry reads as a
   tool rather than a catalog section. The panel's own styles live in
   assistant.css, which loads with the panel. */
.pk-nav-assistant .pk-ico { color: var(--pk-accent); }
.pk-nav-assistant[aria-expanded="true"] { color: var(--pk-fg); background: var(--pk-nav-hover); }
/* Watch Party page (/party, the rail entry after Games): the existing panel card
   with page gutters, the party panel's own label/code/share styles reused. */
.pk-party-page { display: flex; flex-direction: column; gap: 0.9rem; }
.pk-party-page-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pk-party-page-heading { margin: 0.5rem 0 0; font-size: var(--fs-h2); font-weight: 700; }
.pk-party-page-code { display: flex; align-items: baseline; gap: 0.7rem; }
.pk-party-page-code .pk-party-code { font-size: 1.5rem; }
.pk-party-page .pk-party-share { display: flex; flex-direction: column; gap: 0.35rem; }
.pk-party-page-go { align-self: flex-start; }
/* ---- end subscriber assistant (2026-09-25) ---- */

/* ---- player resume prompt + detail idle trailer (2026-09-25) ---- */
/* Owner rule: continue-or-restart is asked at the player step (VodWatch
   resumeQuestion), never on the detail page. A small card centred over the
   stage, above its status/retry layers; the PIN and info dialogs stay on top.
   Like the player's other state layers, no action is filled before it has
   focus — "Continue from mm:ss" takes focus when the card opens. The detail
   page's idle trailer reuses the existing trailer host and needs no style. */
.pk-resume-ask {
  position: absolute; inset-inline: 1rem; top: 50%; transform: translateY(-50%); z-index: 6;
  width: fit-content; max-width: min(30rem, calc(100% - 2rem)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding: 1.1rem 1.3rem; background: rgba(0, 0, 0, 0.82); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--rad-m);
}
.pk-resume-ask-title { margin: 0; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.pk-resume-ask-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.pk-resume-ask .pk-btn { background: var(--pk-elevated); color: var(--pk-fg); border: 1px solid var(--pk-border); box-shadow: none; }
.pk-resume-ask .pk-btn:focus,
.pk-resume-ask .pk-btn:focus-visible {
  background: var(--pk-accent); color: var(--pk-accent-fg); border-color: var(--pk-accent);
  outline: 2px solid var(--pk-fg); outline-offset: 2px; box-shadow: 0 0 0 5px var(--pk-ring);
}
/* ---- end player resume prompt + detail idle trailer (2026-09-25) ---- */

/* ---- Guide: the no-data label stays in view (sweep 2026-09-26) ---- */
.pk-guide-nodata { position: sticky; left: 172px; display: inline-block; padding: 0 0.8rem; line-height: 64px; }
@media (max-width: 720px) { .pk-guide-nodata { left: 136px; line-height: 56px; } }
/* The red now-line runs UNDER the no-data label, never through its text (owner
   screenshot 2026-09-27, the same pattern as the Android guide): the label is a
   pill on the grid colour one layer above the line (z 5); the channel column
   (z 6, sticky at the start) still covers both when the grid scrolls. */
.pk-guide-nodata { z-index: 6; margin-top: 19px; padding: 0.15rem 0.7rem; line-height: 1.3; border-radius: 999px; background: var(--pk-bg-deep); }
@media (max-width: 720px) { .pk-guide-nodata { margin-top: 15px; line-height: 1.3; } }

/* ---- Sweep 2026-09-26: games grid gutters; readable shop "Open link" ---- */
.pk-games-grid { margin: 0 var(--pk-gutter) 2rem; }
.pk-shop-linkhint { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; font-weight: 650; cursor: pointer; }
.pk-shop-linkhint:hover { text-decoration: underline; }

/* ---- party voice + docked panel (2026-09-26) ---- */
/* Owner: the room's chat stays open on the right of the channel while in a
   room, and carries voice messages. On the live and VOD screens the party
   panel is a DOCKED column (partyDockedPanel): a flex column whose conversation
   takes the height left, the room's state above it and the composer pinned
   below. The viewer can collapse it to the slim edge tab (.pk-party-edge);
   under 900px it sits under the picture (the existing grid rules). */
.pk-party-top, .pk-party-foot { display: flex; flex-direction: column; gap: 0.8rem; }
.pk-party-foot { gap: 0.5rem; }
.pk-party-chat { overflow: visible; max-height: none; gap: 0.35rem; min-height: 0; }
/* column-reverse keeps the log pinned to the newest line with no script, and a
   viewer who scrolled back stays where they are. */
.pk-party-scroll {
  display: flex; flex-direction: column-reverse; min-height: 0;
  max-height: 34vh; overflow-y: auto; overscroll-behavior: contain;
}
.pk-party-log { display: flex; flex-direction: column; gap: 0.3rem; }
.pk-party-docked { display: flex; flex-direction: column; min-height: 0; max-height: 100vh; overflow: hidden; padding: 0.75rem 0.85rem; }
.pk-party-docked .pk-epg-head { flex: none; }
.pk-party-docked .pk-party-body { flex: 1 1 auto; min-height: 0; gap: 0.6rem; }
.pk-party-docked .pk-party-top { flex: 0 1 auto; max-height: 42%; overflow-y: auto; overscroll-behavior: contain; gap: 0.6rem; }
.pk-party-docked .pk-party-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 6rem; }
.pk-party-docked .pk-party-scroll { flex: 1 1 auto; max-height: none; }
.pk-party-docked .pk-party-foot { flex: none; }
.pk-party-docked .pk-party-person { padding: 0.25rem 0.3rem; }
.pk-party-docked .pk-party-sync { padding: 0.5rem 0.6rem; }
.pk-party-collapse svg { width: 20px; height: 20px; }
/* Leave lives in the panel head, beside the room code (always in view). */
.pk-party-headactions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.pk-party-headactions .pk-party-leave { margin: 0; padding: 0.25rem 0.65rem; font-size: var(--fs-small); }
[dir="rtl"] .pk-party-collapse svg, [dir="rtl"] .pk-party-edge > svg { transform: scaleX(-1); }
.pk-party-docked { min-width: 0; }
.pk-party-docked .pk-epg-chan { min-width: 0; flex: 1 1 auto; }
@media (max-width: 900px) {
  /* Stacked under the picture. minmax(0, …): a plain 1fr lets the panel's
     min-content (the invite link, the recorder bar) push the page sideways. */
  .pk-live-grid:has(> .pk-party-docked) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pk-party-docked { max-height: none; }
  .pk-party-docked .pk-party-top { max-height: 35%; }
  /* The VOD stage has no aspect of its own; stacked, it needs one. */
  .pk-watch-vod .pk-live-grid:has(> .pk-party-docked) > .pk-stage { aspect-ratio: 16 / 9; width: 100%; height: auto; }
}
/* Fullscreen keeps the column: the picture shrinks rather than being covered
   (the pre-room create/join panel still overlays, see the fullscreen rules). */
.pk-watch:fullscreen .pk-live-grid:has(> .pk-party-docked) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) min(340px, 40%); grid-template-rows: minmax(0, 1fr);
}
.pk-watch:fullscreen .pk-live-grid > .pk-party.pk-party-docked {
  position: relative; top: auto; bottom: auto; inset-inline-end: auto; width: auto; z-index: auto; max-height: 100%;
}

/* The collapsed dock: a slim tab on the screen's inline-end edge. */
.pk-party-edge {
  position: absolute; z-index: 31; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  width: 36px; min-height: 96px; padding: 0.6rem 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  background: rgba(0, 0, 0, 0.62); color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); border-inline-end: 0;
  border-start-start-radius: 12px; border-end-start-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease);
}
.pk-party-edge:hover { background: rgba(0, 0, 0, 0.85); }
.pk-party-edge:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
.pk-party-edge > svg { width: 20px; height: 20px; }
.pk-party-edge-count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-party-edge-unread {
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--pk-accent); color: var(--pk-accent-fg);
}

/* Voice bubbles: sender, play/pause, progress (painted by party-voice.js via
   --pk-pv-progress) and length. The viewer's own clips sit at the end. */
.pk-party-voice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.pk-party-voice.mine { align-items: flex-end; }
.pk-pv {
  display: flex; align-items: center; gap: 0.55rem; width: min(100%, 17rem); box-sizing: border-box;
  padding-block: 0.3rem; padding-inline: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(127, 127, 127, 0.14);
}
.pk-party-voice.mine .pk-pv { background: color-mix(in srgb, var(--pk-accent) 22%, transparent); }
.pk-pv-play {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--pk-accent); color: var(--pk-accent-fg);
}
.pk-pv-play svg { width: 16px; height: 16px; }
.pk-pv-play:disabled { opacity: 0.45; cursor: default; }
.pk-pv-play:focus-visible { outline: 2px solid var(--pk-fg); outline-offset: 2px; }
.pk-party-voice.loading .pk-pv-play { animation: pk-pv-pulse 1s ease-in-out infinite; }
@keyframes pk-pv-pulse { 50% { opacity: 0.55; } }
.pk-pv-bar { flex: 1; min-width: 3rem; height: 4px; border-radius: 2px; background: rgba(127, 127, 127, 0.3); overflow: hidden; }
.pk-pv-fill { height: 100%; width: calc(var(--pk-pv-progress, 0) * 100%); border-radius: 2px; background: var(--pk-accent); }
.pk-party-voice.mine .pk-pv-fill { background: var(--pk-fg); }
.pk-pv-dur { flex: none; font-size: var(--fs-micro); color: var(--pk-muted); font-variant-numeric: tabular-nums; }

/* Composer mic and the recorder bar that replaces the composer while recording:
   discard, a live dot, the timer, the level meter (--pk-pv-level from the mic,
   set by party-voice.js), the 1:00 limit and Send. */
.pk-party-mic, .pk-party-rec-send { flex: none; width: 40px; padding: 0; display: grid; place-items: center; }
.pk-party-mic svg, .pk-party-rec-send svg { width: 18px; height: 18px; }
.pk-party-rec-send[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.pk-party-rec {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem; border-radius: var(--rad-s);
  background: color-mix(in srgb, #e0564a 12%, transparent);
  border: 1px solid color-mix(in srgb, #e0564a 35%, transparent);
}
.pk-party-rec-cancel {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--pk-muted);
}
.pk-party-rec-cancel:hover { color: var(--pk-fg); background: rgba(127, 127, 127, 0.16); }
.pk-party-rec-cancel svg { width: 18px; height: 18px; }
.pk-party-rec-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e0564a; animation: pk-pv-blink 1.2s ease-in-out infinite; }
@keyframes pk-pv-blink { 50% { opacity: 0.25; } }
.pk-party-rec-time { min-width: 2.6rem; font-weight: 650; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.pk-party-rec-level { flex: 1; min-width: 2rem; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.25); overflow: hidden; }
.pk-party-rec-bar { display: block; height: 100%; width: calc(8% + var(--pk-pv-level, 0) * 92%); border-radius: 3px; background: #e0564a; transition: width 80ms linear; }
.pk-party-rec-limit { flex: none; font-size: var(--fs-micro); color: var(--pk-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  /* No moving meter: a steady "recording" bar and dot instead. */
  .pk-party-rec-dot, .pk-party-voice.loading .pk-pv-play { animation: none; }
  .pk-party-rec-bar { width: 100%; opacity: 0.45; transition: none; }
}

/* "Sending…" and the one error line with Retry. */
.pk-party-voice-note:not(:empty) { font-size: var(--fs-small); }
.pk-party-voice-err {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem;
  padding: 0.35rem 0.5rem; border-radius: var(--rad-s); font-size: var(--fs-small); line-height: 1.4;
  background: color-mix(in srgb, #e0564a 14%, transparent);
}
.pk-party-voice-err > span { flex: 1 1 auto; min-width: 0; }
.pk-party-voice-retry { padding: 0.15rem 0.6rem; font-size: var(--fs-small); }
.pk-party-voice-dismiss {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--pk-muted);
}
.pk-party-voice-dismiss svg { width: 14px; height: 14px; }
/* ---- end party voice + docked panel (2026-09-26) ---- */

/* ---- Rail brand: mark when collapsed, full wordmark when expanded (owner 2026-09-26) ---- */
.pk-brand-word { display: none; }
.pk-sidebar:hover .pk-brand-mark, .pk-sidebar:focus-within .pk-brand-mark { display: none; }
.pk-sidebar:hover .pk-brand-word, .pk-sidebar:focus-within .pk-brand-word { display: block; }
@media (hover: none) {
  /* The rail never widens on touch, so it keeps the square mark. */
  .pk-sidebar:hover .pk-brand-mark, .pk-sidebar:focus-within .pk-brand-mark { display: block; }
  .pk-sidebar:hover .pk-brand-word, .pk-sidebar:focus-within .pk-brand-word { display: none; }
}

/* ---- Rail: visible dark scrollbar, larger entries (owner 2026-09-26) ----
   The long menu scrolls with a thin dark bar instead of being squeezed to the
   window height, so the entries can use a larger type and fixed spacing. The
   sticky brand now covers the top edge, so scrolled items no longer peek above it. */
.pk-sidebar { scrollbar-width: thin; scrollbar-color: #2a3038 transparent; padding-top: 0; }
.pk-sidebar::-webkit-scrollbar { width: 6px; height: 0; }
.pk-sidebar::-webkit-scrollbar-track { background: transparent; }
.pk-sidebar::-webkit-scrollbar-thumb { background: #2a3038; border-radius: 999px; }
.pk-sidebar::-webkit-scrollbar-thumb:hover { background: #3b444f; }
.pk-brand { margin-top: 0; padding-top: var(--pk-side-pad-y); padding-bottom: 0.25rem; box-sizing: content-box; }
.pk-nav-item { font-size: 1.02rem; padding: 0.6rem 0.75rem; flex: 0 0 auto; }
.pk-nav-item .pk-ico { width: 22px; height: 22px; flex: 0 0 22px; }
@media (max-width: 900px) { .pk-nav-item { font-size: var(--fs-ui); padding: var(--pk-nav-pad-y) 0.7rem; } }

/* ---- Series detail: season buttons + episode table (owner 2026-09-26) ----
   Seasons are a horizontal row of buttons; each episode is a fixed-column row so a long title no longer
   pushes the thumbnail sideways ("ladder"). The title is text, only Play is a button. */
.pk-season-tabs { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 0.15rem 0.1rem 0.6rem; margin: 0.4rem 0 0.4rem; }
.pk-season-tabs::-webkit-scrollbar { display: none; }
.pk-season-tab { flex: 0 0 auto; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--pk-border); background: rgba(255, 255, 255, 0.05); color: var(--pk-on-art); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.pk-season-tab:hover { background: rgba(255, 255, 255, 0.10); }
.pk-season-tab.on { background: var(--pk-accent); border-color: var(--pk-accent); color: var(--pk-accent-fg); }
.pk-season-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pk-ring); }
.pk-g09-detail .pk-ep-table { display: flex; flex-direction: column; gap: 0.6rem; }
.pk-g09-detail .pk-ep { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; flex-wrap: nowrap; padding: 0.65rem 0.9rem 0.65rem 0.65rem; }
.pk-g09-detail .pk-ep.on { border-color: var(--pk-accent); }
.pk-g09-detail .pk-ep-cell-thumb { width: 10.5rem; }
.pk-g09-detail .pk-ep-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; }
.pk-g09-detail .pk-ep-thumb-ph svg { width: 26px; height: 26px; }
.pk-g09-detail .pk-ep-body { min-width: 0; gap: 0.3rem; }
.pk-g09-detail .pk-ep-head { margin: 0; font-size: 1.02rem; line-height: 1.3; min-width: 0; }
.pk-g09-detail .pk-ep-num { min-width: 0; font-weight: 700; color: var(--pk-muted); }
.pk-g09-detail .pk-ep-title { color: var(--pk-on-art); }
.pk-g09-detail .pk-ep-body p.pk-ep-overview { white-space: normal; overflow-wrap: anywhere; }
.pk-g09-detail .pk-ep-meta { display: flex; gap: 0.8rem; }
.pk-g09-detail .pk-ep-meta .pk-ep-lock { margin-left: 0; }
.pk-g09-detail .pk-ep-playbtn { min-width: 5.5rem; justify-content: center; }
@media (max-width: 700px) {
  .pk-g09-detail .pk-ep { grid-template-columns: 7rem minmax(0, 1fr) auto; grid-template-areas: "thumb body body" "thumb play fav"; row-gap: 0.5rem; }
  .pk-g09-detail .pk-ep-cell-thumb { grid-area: thumb; width: 7rem; align-self: start; }
  .pk-g09-detail .pk-ep-body { grid-area: body; }
  .pk-g09-detail .pk-ep-playbtn { grid-area: play; justify-self: start; }
  .pk-g09-detail .pk-ep > :last-child { grid-area: fav; }
}

/* ---- Live list: programme strip (owner 2026-09-26) ----
   The prev/now/next lines were bare <button>s with the browser's white borders ("Excel tablosu gibi").
   Now: the current programme as a soft card with its time range and a progress bar, the next one
   beside it; hover shows the guide's detail card (initLiveEPGHover). */
.pk-tv-list .pk-tv-epg { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.6rem; align-items: stretch; }
.pk-tv-epg .pk-tv-prog {
  appearance: none; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04);
  color: var(--pk-fg); font: inherit; text-align: start; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.25rem;
  min-width: 0; padding: 0.5rem 0.8rem; border-radius: 12px; opacity: 1;
  transition: background 120ms ease, border-color 120ms ease;
}
.pk-tv-epg .pk-tv-prog:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.10); }
.pk-tv-epg .pk-tv-prog:focus-visible { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 2px var(--pk-ring); }
.pk-tv-epg .pk-tv-prog.next { background: transparent; color: var(--pk-muted); }
.pk-tv-epg .pk-tv-prog.next:hover { background: rgba(255, 255, 255, 0.06); color: var(--pk-fg); }
.pk-tv-prog-head { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; font-size: var(--fs-small); color: var(--pk-muted); }
.pk-tv-prog-badge { flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pk-tv-prog.now .pk-tv-prog-badge { color: var(--pk-accent); }
.pk-tv-epg .pk-tv-prog-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pk-tv-epg .pk-tv-prog-title { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tv-prog.next .pk-tv-prog-title { font-weight: 500; }
.pk-tv-prog-bar { display: block; height: 3px; margin-top: 0.2rem; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pk-tv-prog-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--pk-accent); }
.pk-tv-noepg { align-self: center; font-size: var(--fs-small); }
@media (max-width: 760px) {
  .pk-tv-list .pk-tv-epg { grid-template-columns: minmax(0, 1fr); }
  .pk-tv-epg .pk-tv-prog.next { display: none; }
}

/* ---- party photos + videos (2026-09-26) ---- */
/* Owner: viewers send pictures and videos into the room; selecting one opens a
   full-screen viewer over the player. The composer gets an attach button and,
   while a picked file waits, a preview sheet (caption, progress, cancel);
   bubbles show the thumbnail (a poster with a play badge and the length for a
   video) or a placeholder / note; the overlay (.pk-pm-overlay) is drawn inside
   the party panel so it also covers a fullscreen watch screen. */
.pk-party-attach { flex: none; width: 40px; padding: 0; display: grid; place-items: center; }
.pk-pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.pk-party-attach svg { width: 19px; height: 19px; }

.pk-pm-sheet {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 0.55rem; border-radius: var(--rad-s);
  background: rgba(127, 127, 127, 0.12); border: 1px solid rgba(127, 127, 127, 0.22);
}
.pk-pm-sheet-top { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.pk-pm-preview-wrap { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #000; }
.pk-pm-preview { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-pm-badge {
  position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff;
}
.pk-pm-badge svg { width: 13px; height: 13px; }
.pk-pm-sheet-info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pk-pm-sheet-title { font-weight: 650; font-size: 0.92rem; }
.pk-pm-sheet-facts { color: var(--pk-muted); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.pk-pm-sheet-row { display: flex; align-items: center; gap: 0.45rem; }
.pk-pm-caption { flex: 1; min-width: 0; }
.pk-pm-send { flex: none; width: 40px; padding: 0; display: grid; place-items: center; }
.pk-pm-send svg { width: 18px; height: 18px; }
.pk-pm-progress { display: flex; align-items: center; gap: 0.55rem; }
.pk-pm-progress-bar { flex: 1; min-width: 3rem; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.28); overflow: hidden; }
.pk-pm-progress-fill { height: 100%; width: calc(var(--pk-pm-progress, 0) * 100%); background: var(--pk-accent); border-radius: 3px; transition: width 160ms linear; }
.pk-pm-progress-text { flex: none; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pk-pm-upcancel { flex: none; padding: 0.2rem 0.65rem; font-size: var(--fs-small); }

/* Bubbles. */
.pk-party-media { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.pk-party-media.mine { align-items: flex-end; }
.pk-pm-tile {
  position: relative; display: block; width: min(100%, 15rem); max-height: 17rem; box-sizing: border-box;
  padding: 0; border: 0; border-radius: 12px; overflow: hidden; color: inherit; font: inherit;
  background: rgba(127, 127, 127, 0.14);
}
.pk-pm-open { cursor: zoom-in; }
.pk-pm-open:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
.pk-pm-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-pm-thumb-wait {
  background: linear-gradient(100deg, rgba(127, 127, 127, 0.12) 30%, rgba(127, 127, 127, 0.28) 50%, rgba(127, 127, 127, 0.12) 70%);
  background-size: 250% 100%; animation: pk-pm-shimmer 1.3s linear infinite;
}
.pk-pm-thumb-broken { display: grid; place-items: center; color: var(--pk-muted); }
.pk-pm-thumb-broken svg, .pk-pm-note-tile svg { width: 26px; height: 26px; }
@keyframes pk-pm-shimmer { to { background-position: -150% 0; } }
.pk-pm-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pk-pm-play-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.pk-pm-play-icon svg { width: 20px; height: 20px; margin-inline-start: 2px; }
.pk-pm-dur {
  position: absolute; inset-inline-end: 0.4rem; bottom: 0.4rem; padding: 0.1rem 0.4rem; border-radius: 6px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: var(--fs-micro); font-weight: 650; font-variant-numeric: tabular-nums;
}
.pk-pm-wait { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 5.5rem; padding: 0.8rem; font-size: var(--fs-small); color: var(--pk-muted); }
.pk-pm-spin {
  flex: none; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  border: 2.5px solid rgba(127, 127, 127, 0.35); border-top-color: var(--pk-accent);
  animation: pk-pm-spin 0.9s linear infinite;
}
@keyframes pk-pm-spin { to { transform: rotate(360deg); } }
.pk-pm-note-tile { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.8rem; font-size: var(--fs-small); color: var(--pk-muted); }
.pk-pm-removed { font-size: var(--fs-small); font-style: italic; color: var(--pk-muted); }
.pk-pm-caption-text { max-width: min(100%, 15rem); font-size: 0.88rem; line-height: 1.4; word-break: break-word; }
.pk-pm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.pk-pm-delete {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: none; color: var(--pk-muted);
}
.pk-pm-delete:hover, .pk-pm-delete:focus-visible { color: var(--pk-fg); background: rgba(127, 127, 127, 0.16); }
.pk-pm-delete svg { width: 15px; height: 15px; }
.pk-pm-delete:disabled { opacity: 0.45; cursor: default; }
.pk-pm-confirm-text { font-size: var(--fs-small); }
.pk-pm-keep, .pk-pm-delete-yes { padding: 0.15rem 0.6rem; font-size: var(--fs-small); }
.pk-pm-delete-yes { background: #c8453a; color: #fff; }
.pk-pm-delete-err { font-size: var(--fs-micro); color: #e0564a; }

/* A file dragged over the panel. */
.pk-pm-drophint { display: none; }
.pk-party.pk-pm-dragover { position: relative; outline: 2px dashed var(--pk-accent); outline-offset: -6px; }
.pk-party.pk-pm-dragover > .pk-pm-drophint {
  display: grid; place-items: center; position: absolute; inset: 0; z-index: 5; padding: 1.5rem; text-align: center;
  font-weight: 650; pointer-events: none; background: color-mix(in srgb, var(--pk-accent) 16%, rgba(0, 0, 0, 0.55)); color: #fff;
}

/* The full-screen viewer. */
.pk-pm-overlay {
  position: fixed; inset: 0; z-index: 12500; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(4, 6, 9, 0.95); color: #fff; outline: none;
}
.pk-pm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
}
.pk-pm-who { min-width: 0; display: flex; align-items: baseline; gap: 0.7rem; }
.pk-pm-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-pm-count { flex: none; opacity: 0.72; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pk-pm-close, .pk-pm-nav {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.12); color: #fff; transition: background var(--t-fast) var(--ease);
}
.pk-pm-close:hover, .pk-pm-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.pk-pm-close:focus-visible, .pk-pm-nav:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
.pk-pm-close svg { width: 20px; height: 20px; }
.pk-pm-stage {
  position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden;
  padding: 0 clamp(3.6rem, 7vw, 5.5rem);
}
.pk-pm-stage.image { touch-action: none; cursor: zoom-in; }
.pk-pm-stage.image.zoomed { cursor: grab; }
.pk-pm-img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; will-change: transform;
}
.pk-pm-poster { width: min(100%, 480px); aspect-ratio: 16 / 9; object-fit: contain; opacity: 0.5; }
span.pk-pm-poster { background: rgba(255, 255, 255, 0.06); border-radius: 10px; }
.pk-pm-video { display: block; max-width: 100%; max-height: 100%; background: #000; border-radius: 8px; }
.pk-pm-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-size: var(--fs-small); font-variant-numeric: tabular-nums; pointer-events: none;
}
.pk-pm-loading .pk-pm-spin { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
.pk-pm-fail { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1rem; text-align: center; }
.pk-pm-fail svg { width: 34px; height: 34px; opacity: 0.7; }
.pk-pm-fail .pk-btn { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.pk-pm-nav { position: absolute; top: 50%; margin-top: -22px; z-index: 2; }
.pk-pm-nav.prev { inset-inline-start: max(0.8rem, env(safe-area-inset-left)); }
.pk-pm-nav.next { inset-inline-end: max(0.8rem, env(safe-area-inset-right)); }
.pk-pm-nav:disabled { opacity: 0.25; cursor: default; }
.pk-pm-nav svg { width: 22px; height: 22px; }
[dir="rtl"] .pk-pm-nav svg { transform: scaleX(-1); }
.pk-pm-caption-line {
  margin: 0; padding: 0.55rem 1.2rem max(1rem, env(safe-area-inset-bottom)); text-align: center;
  max-height: 22vh; overflow-y: auto; line-height: 1.45; word-break: break-word;
}
@media (max-width: 640px) {
  .pk-pm-stage { padding: 0; }
  .pk-pm-nav { width: 38px; height: 38px; margin-top: -19px; background: rgba(0, 0, 0, 0.45); }
  .pk-pm-video { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-pm-spin, .pk-pm-thumb-wait { animation: none; }
  .pk-pm-progress-fill, .pk-pm-close, .pk-pm-nav { transition: none; }
}

/* ===================== in-app inbox ("Mesajlar", contracts.inbox) =====================
   web/ui/inbox_view.go. Desktop: .pk-top-actions is a zero-height strip at the top of
   the main area and the envelope floats at its inline end (over the banner on most
   pages, so it wears the same dark glass as the player's round buttons). Phones
   (<= 768px, where the rail is gone): the strip becomes a sticky top bar with the brand
   logo and the envelope. The pop-up, the message dialog and the Delete-all
   confirmation share .pk-inbox-scrim. Everything uses logical sides for RTL. */
.pk-top-actions { position: relative; height: 0; z-index: 45; }
.pk-top-actions[hidden] { display: none; }
.pk-top-brand { display: none; }
.pk-inbox-btn {
  position: absolute; top: 0.85rem; inset-inline-end: 0.75rem; /* owner 2026-09-28: further to the edge */
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: var(--pk-on-art); background: rgba(10, 13, 17, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pk-inbox-btn svg { width: 22px; height: 22px; }
/* Search's header row runs to the inline end, right under the floating envelope (owner 2026-09-28: "TEMİZLE alanını
   zarf düğmesi örtüyor"): it keeps the envelope's width free there. Phones put the envelope in its own bar instead. */
@media (min-width: 769px) { body:has(#pk-inbox-btn) .pk-search-head { padding-inline-end: 64px; } }
.pk-inbox-btn:hover { background: rgba(10, 13, 17, 0.78); color: #fff; }
.pk-inbox-btn.active { color: var(--pk-accent); border-color: var(--pk-accent); }
.pk-inbox-badge {
  position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--pk-live); color: #fff; box-shadow: 0 0 0 2px var(--pk-bg);
  font-size: 0.7rem; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .pk-top-actions {
    position: sticky; top: 0; height: auto; min-height: 52px;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: calc(4px + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 4px max(1rem, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--pk-bg) 88%, transparent); border-bottom: 1px solid var(--pk-border);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .pk-top-brand { display: flex; align-items: center; min-width: 0; }
  .pk-top-brand img { height: 28px; width: auto; max-width: 150px; object-fit: contain; }
  .pk-inbox-btn {
    position: relative; top: auto; inset-inline-end: auto; width: 42px; height: 42px;
    color: var(--pk-fg); background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .pk-inbox-btn:hover { background: var(--pk-nav-hover); color: var(--pk-fg); }
}

/* pop-up + dialogs */
.pk-inbox-scrim {
  position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 1rem;
  background: rgba(6, 8, 11, 0.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.pk-inbox-pop {
  width: min(520px, 100%); max-height: min(86vh, 720px); display: flex; flex-direction: column; gap: 0.6rem;
  overflow: hidden; animation: pk-inbox-in var(--t-med) var(--ease);
}
.pk-inbox-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: var(--fs-small); font-weight: 700; }
.pk-inbox-kicker { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--pk-accent); }
.pk-inbox-kicker svg { width: 18px; height: 18px; }
.pk-inbox-count { color: var(--pk-muted); font-variant-numeric: tabular-nums; }
.pk-inbox-pop-title { margin: 0; font-size: var(--fs-h2); font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.pk-inbox-when { margin: 0; color: var(--pk-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.pk-inbox-pop-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--rad-m); background: var(--pk-elevated); flex: 0 0 auto; }
.pk-inbox-body {
  flex: 1 1 auto; min-height: 2.5rem; overflow-y: auto; overscroll-behavior: contain;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--pk-fg-soft); padding-inline-end: 0.25rem;
}
.pk-inbox-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; padding-top: 0.4rem; }
.pk-inbox-act svg { width: 16px; height: 16px; }
.pk-inbox .pk-btn-ghost, .pk-inbox-scrim .pk-btn-ghost { background: var(--pk-elevated); color: var(--pk-fg); border: 1px solid var(--pk-border); }
.pk-inbox .pk-btn-ghost:hover, .pk-inbox-scrim .pk-btn-ghost:hover { background: var(--pk-popover); border-color: var(--pk-muted); }
.pk-inbox .pk-btn-ghost.pk-inbox-danger, .pk-inbox-scrim .pk-btn-ghost.pk-inbox-danger { color: var(--pk-danger); }
.pk-inbox-scrim .pk-btn.pk-inbox-danger-fill { background: var(--pk-danger); color: #fff; }
.pk-inbox .pk-btn:focus-visible, .pk-inbox-scrim .pk-btn:focus-visible { background: var(--pk-accent); color: var(--pk-accent-fg); }
.pk-inbox-confirm h2 { margin: 0 0 0.5rem; font-size: var(--fs-h2); }
.pk-inbox-confirm p { margin: 0 0 1rem; color: var(--pk-fg-soft); }
@keyframes pk-inbox-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* the /inbox page */
.pk-inbox { padding: 1.7rem var(--pk-gutter) 3rem; max-width: calc(880px + 2 * var(--pk-gutter)); box-sizing: border-box; }
.pk-inbox-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.9rem; padding-inline-end: 3.5rem; }
.pk-inbox-h1 { margin: 0; font-size: var(--fs-h1); font-weight: 750; letter-spacing: -0.015em; }
.pk-inbox-sub { margin: 0; color: var(--pk-accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.pk-inbox-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pk-inbox-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pk-inbox-tools .pk-btn svg { width: 16px; height: 16px; }
.pk-inbox-status { min-height: 1.3em; margin: 0.4rem 0 0.5rem; color: var(--pk-muted); font-size: var(--fs-small); }
.pk-inbox-loading { color: var(--pk-muted); }
.pk-inbox-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pk-border); border-radius: var(--rad-l); background: var(--pk-surface); }
.pk-inbox-row { position: relative; display: flex; align-items: stretch; }
.pk-inbox-row + .pk-inbox-row { border-top: 1px solid var(--pk-border); }
.pk-inbox-open {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem; background: none; border: 0; border-radius: var(--rad-l); color: var(--pk-fg); font: inherit; text-align: start; cursor: pointer;
}
.pk-inbox-open:hover { background: var(--pk-nav-hover); }
.pk-inbox-dot { width: 10px; height: 10px; border-radius: 50%; }
.pk-inbox-row.unread .pk-inbox-dot { background: var(--pk-accent); }
.pk-inbox-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pk-inbox-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-inbox-row.unread .pk-inbox-title { font-weight: 800; }
.pk-inbox-snippet { color: var(--pk-muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-inbox-time { color: var(--pk-muted); font-size: var(--fs-small); white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.pk-inbox-row.unread .pk-inbox-time { color: var(--pk-fg-soft); font-weight: 650; }
.pk-inbox-kebab {
  flex: 0 0 auto; width: 44px; display: grid; place-items: center; background: none; border: 0;
  border-radius: var(--rad-m); color: var(--pk-muted); cursor: pointer;
}
.pk-inbox-kebab svg { width: 20px; height: 20px; }
.pk-inbox-kebab:hover, .pk-inbox-kebab[aria-expanded="true"] { color: var(--pk-fg); background: var(--pk-nav-hover); }
.pk-inbox-menu-scrim { position: fixed; inset: 0; z-index: 19; background: transparent; }
.pk-inbox-menu {
  position: absolute; top: calc(100% - 0.4rem); inset-inline-end: 0.5rem; z-index: 20; min-width: 12rem;
  display: flex; flex-direction: column; padding: 0.35rem; background: var(--pk-popover);
  border: 1px solid var(--pk-border); border-radius: var(--rad-m); box-shadow: var(--pk-shadow-3);
}
.pk-inbox-menu-item {
  display: block; width: 100%; padding: 0.6rem 0.8rem; background: none; border: 0; border-radius: var(--rad-s);
  color: var(--pk-fg); font: inherit; font-size: var(--fs-ui); text-align: start; cursor: pointer;
}
.pk-inbox-menu-item:hover, .pk-inbox-menu-item:focus-visible { background: var(--pk-elevated); }
.pk-inbox-menu-item.pk-inbox-danger { color: var(--pk-danger); }
.pk-inbox-more-btn { margin-top: 1rem; }
.pk-inbox-error { color: var(--pk-danger); }
@media (max-width: 768px) {
  .pk-inbox { padding-top: 1rem; }
  .pk-inbox-head { padding-inline-end: 0; }
  .pk-inbox-toolbar { flex-direction: column; align-items: stretch; }
  .pk-inbox-open { grid-template-columns: 10px minmax(0, 1fr); row-gap: 0.2rem; }
  .pk-inbox-time { grid-column: 2; }
  .pk-inbox-actions .pk-btn { flex: 1 1 auto; }
  .pk-inbox-scrim { align-items: end; padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-inbox-pop { animation: none; }
  .pk-inbox-btn { transition: none; }
}

/* ---- Music / Radio / Books / Live TV / Program Guide / Search: the Movies/Series
   chip row (owner request 2026-09-27) ----
   No search field on these pages any more; the chip row of Movies/Series
   (genre_chips.go) sits under the title: Ara, Tumu, one icon chip per genre or
   category, then "Tum Turler" / "Tum Kategoriler" pinned at the end. Music, Radio
   and Books reuse the Movies/Series page regions (.pk-vod-browse); a genre's list
   is the section's own cards in the poster grid. On Live TV the row sits under
   the toolbar (sort + channel numbers) and the channel list takes the full width;
   in the guide it sits under the date controls; in Search it is the type row. */
.pk-section-grid { margin: 0; }
.pk-live-chips { margin: 0 0.6rem 0.4rem; }
.pk-guide-chips { margin: 0 var(--pk-gutter) 1rem; }
.pk-search-types { padding: 0.8rem 1.25rem 0.2rem; }
.pk-genre-fav svg { color: var(--pk-live); }
.pk-tv-wrap .pk-genre-dialog-slot { display: contents; }
@media (max-width: 768px) {
  .pk-guide-chips { margin-inline: 1rem; }
  .pk-search-types { padding-inline: 1rem; }
}