/* =========================================================
   KPlay theme stylesheet — dark "luxury" video catalog UI.
   Organized top to bottom in the order components appear on
   the page: base > layout utils > navbar > hero > search >
   stats/desc > sections/cards > cast > footer > bottom-nav >
   single-video player > comments > misc pages.
   ========================================================= */

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kplay-bg-primary);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(201,162,39,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(231,180,184,0.03) 0%, transparent 50%);
  color: var(--kplay-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

html { scrollbar-color: var(--kplay-accent-gold) var(--kplay-bg-secondary); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kplay-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--kplay-accent-gold); border-radius: 10px; border: 2px solid var(--kplay-bg-secondary); }
::-webkit-scrollbar-thumb:hover { background: var(--kplay-accent-gold-light); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

.site-main { display: block; min-height: 40vh; }

/* ---------- Layout utilities ---------- */
.kp-container { max-width: 1280px; margin: 0 auto; padding: 0 0.5rem; }
.kplay-full-width .kp-container { max-width: 100%; }
.kp-main-content { padding-top: 1.75rem; padding-bottom: 3rem; display: flex; flex-direction: column; gap: 2.25rem; }
@media (max-width: 640px) {
  /* The 2.25rem gap between every section reads fine on desktop's wider
     canvas, but on a narrow viewport it makes small, closely-related
     blocks (archive count line -> description box, in particular) look
     like they're floating apart instead of grouped together. */
  .kp-main-content { padding-top: 1rem; padding-bottom: 2rem; gap: 1.35rem; }
}

.grid { display: grid; gap: 0.5rem; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) {
  .sm-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .lg-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .lg-cols-dynamic { grid-template-columns: repeat(var(--kplay-grid-cols, 4), 1fr); }
  /* Related-videos grid sits in the narrower main column of the single
     video page (kp-video-layout is 2fr/1fr, shared with a sidebar) —
     using the homepage's --kplay-grid-cols (up to 6 for portrait) here
     made every card tiny. Cap it independently of that global setting. */
  .related-grid { grid-template-columns: repeat(4, 1fr); }
}

.section-title {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 1.2rem; color: var(--kplay-text-primary);
  padding-left: 1rem; border-left: 2px solid var(--kplay-accent-gold);
  text-transform: uppercase; letter-spacing: 2px;
}
.section-title span { color: var(--kplay-accent-gold-light); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; }
.section-head .section-title { margin-bottom: 0; }
.archive-desc { color: var(--kplay-text-secondary); font-size: 0.85rem; margin: -1.25rem 0 1rem; }
.kp-breadcrumbs { font-size: 0.8rem; color: var(--kplay-text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; letter-spacing: 0.5px; }
.kp-breadcrumbs a { color: var(--kplay-accent-gold-light); }
.kp-breadcrumbs a:hover { color: var(--kplay-accent-rose); }
.kp-breadcrumb-sep { opacity: 0.5; }
.kp-breadcrumb-current { color: var(--kplay-text-secondary); }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 110;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kplay-border-gold);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { max-height: 76px; width: auto; }
@media (max-width: 640px) {
  .nav-logo img { max-height: 54px; }
}
.nav-logo-text {
  font-size: 1.4rem; font-weight: 800; letter-spacing: 0.5px;
  background: var(--kplay-gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--kplay-border-gold); color: var(--kplay-accent-gold);
  font-size: 1.2rem; padding: 0.5rem 0.8rem; border-radius: 8px; transition: background .2s, color .2s, transform .2s;
}
.nav-toggle:hover, .nav-toggle.active { background: var(--kplay-gradient-gold); border-color: transparent; color: #171200; transform: scale(1.05); }
.nav-close { display: none; }

/* Desktop: lets .nav-links-wrap shrink to whatever room is left between the
   logo and .nav-actions (search + favorite), instead of pushing them out of
   the navbar when there are a lot of menu items (e.g. many kategori links).
   min-width:0 is what actually allows a flex child to shrink below its
   content's natural width — without it flex items refuse to shrink past
   their content size no matter what else is set here. */
.nav-links-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
/* The menu itself stays a single row that never wraps or scrolls; items
   that don't fit are moved by JS (initPriorityNav, kplay.js) into the
   "Lainnya" dropdown instead of being scroll-hidden off-screen where a
   visitor would never notice they exist. overflow:hidden here just hides
   the brief flash of an item before JS measures and relocates it. */
.nav-links {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: nowrap; overflow: visible;
  min-width: 0;
}
/* Applied only for the instant initPriorityNav() (kplay.js) is re-measuring
   item widths — everything is briefly put back in one row to get an
   accurate offsetWidth reading before overflow items are moved into
   "Lainnya". Without this, that intermediate frame is visible on desktop
   as menu items momentarily overlapping the search box/logo. */
.nav-links.nav-links-measuring { visibility: hidden; }
.nav-links li { display: flex; align-items: center; flex-shrink: 0; position: relative; }
.nav-links a {
  font-size: 0.85rem; font-weight: 500; color: var(--kplay-text-secondary);
  padding: 0.4rem 0.9rem; border-radius: 10px; transition: all .3s ease;
  white-space: nowrap; letter-spacing: 0.5px;
}
.nav-links a:hover, .nav-links .current-menu-item > a {
  color: var(--kplay-accent-gold-light);
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(231,180,184,0.08));
}
.mobile-auth { display: none; }

/* Submenu toggle button — injected by initSubmenus() (kplay.js) next to
   any nav item that has children, on both desktop dropdown and mobile
   accordion. Kept as its own button (not the parent link) so the parent
   link still just navigates normally on click/tap. */
.submenu-toggle {
  display: flex; align-items: center; justify-content: center; background: transparent; border: none;
  color: inherit; font-size: 0.6rem; padding: 0.3rem; cursor: pointer; flex-shrink: 0; transition: transform .2s ease;
}
li.is-open > .submenu-toggle, li.is-open > .nav-links-item-inner > .submenu-toggle { transform: rotate(180deg); }

/* Desktop dropdown submenu — click-toggled via .is-open (added by JS),
   not hover-based, so behaviour is identical on trackpad, mouse and
   touch-capable laptop/tablet screens instead of relying on :hover. */
.sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 190px;
  background: var(--kplay-bg-card-solid); border: 1px solid var(--kplay-border-gold); border-radius: var(--kplay-radius);
  box-shadow: var(--kplay-shadow-card); padding: 0.4rem; list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; z-index: 60;
}
li.menu-item-has-children.is-open > .sub-menu {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
}
.sub-menu li { width: 100%; }
.sub-menu a {
  display: block; width: 100%; padding: 0.55rem 0.8rem; border-radius: 8px;
  font-size: 0.85rem; font-weight: 500; color: var(--kplay-text-secondary); white-space: nowrap;
}
.sub-menu a:hover, .sub-menu .current-menu-item > a { color: var(--kplay-accent-gold-light); background: rgba(201,162,39,0.12); }

/* "Lainnya" overflow dropdown — holds whichever nav-links items don't fit
   the available width. Hidden entirely (not just empty) until JS finds at
   least one item to move into it, so it never flashes empty on load. */
.nav-more { position: relative; flex-shrink: 0; display: none; }
.nav-more.has-overflow { display: block; }
.nav-more-toggle {
  display: flex; align-items: center; gap: 0.3rem; background: transparent; border: none;
  color: var(--kplay-text-secondary); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.5px;
  padding: 0.4rem 0.9rem; border-radius: 10px; white-space: nowrap; transition: all .2s ease;
}
.nav-more-toggle:hover, .nav-more.is-open .nav-more-toggle {
  color: var(--kplay-accent-gold-light);
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(231,180,184,0.08));
}
.nav-more-caret { font-size: 0.7rem; transition: transform .2s ease; }
.nav-more.is-open .nav-more-caret { transform: rotate(180deg); }
.nav-more-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 180px;
  background: var(--kplay-bg-card-solid); border: 1px solid var(--kplay-border-gold); border-radius: var(--kplay-radius);
  box-shadow: var(--kplay-shadow-card); padding: 0.4rem; list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; z-index: 60;
}
.nav-more.is-open .nav-more-dropdown {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
}
.nav-more-dropdown li { width: 100%; }
.nav-more-dropdown a {
  display: block; width: 100%; padding: 0.55rem 0.8rem; border-radius: 8px;
  font-size: 0.85rem; font-weight: 500; color: var(--kplay-text-secondary); white-space: nowrap;
}
.nav-more-dropdown a:hover, .nav-more-dropdown .current-menu-item > a {
  color: var(--kplay-accent-gold-light); background: rgba(201,162,39,0.12);
}

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-fav-link {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1rem; color: var(--kplay-accent-rose);
  border: 1px solid var(--kplay-border-gold); border-radius: 999px; padding: 0.35rem 0.8rem; font-weight: 600;
}
.nav-fav-count {
  background: var(--kplay-accent-gold); color: #171200; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.nav-fav-count:empty, .nav-fav-count[data-zero] { background: rgba(255,255,255,0.12); color: var(--kplay-text-muted); }

/* Desktop navbar search: a small always-visible input, no click-to-reveal.
   .nav-actions is already display:none under 768px (see below), so this
   never needs its own mobile media query — mobile search stays on the
   hero/archive search bars (searchform.php) instead. */
.nav-search {
  display: flex; align-items: center; gap: 0.5rem; width: 260px; flex-shrink: 0;
  background: var(--kplay-bg-card); border: 1px solid var(--kplay-border-gold); border-radius: 999px;
  padding: 0.55rem 1.1rem; transition: border-color .2s ease, box-shadow .2s ease, width .2s ease;
}
.nav-search:focus-within { border-color: var(--kplay-accent-gold); box-shadow: 0 4px 16px rgba(201,162,39,0.15); width: 300px; }
.nav-search-icon { font-size: 1rem; opacity: 0.7; flex-shrink: 0; line-height: 1; }
.nav-search-input {
  flex: 1; min-width: 0; background: transparent; border: none; padding: 0;
  font-size: 0.92rem; color: var(--kplay-text-primary);
}
.nav-search-input::placeholder { color: var(--kplay-text-muted); }
.nav-search-input:focus { outline: none; }
.btn-login {
  background: var(--kplay-gradient-gold); color: #171200 !important; font-weight: 700; font-size: 0.85rem;
  padding: 0.5rem 1.5rem; border-radius: 10px; white-space: nowrap; transition: box-shadow .2s, transform .2s;
}
.btn-login:hover { box-shadow: 0 6px 30px rgba(212,175,55,0.4); transform: translateY(-2px); }
.nav-overlay { display: none; }

/* Mobile + tablet share the hamburger/drawer nav (bumped from 768px so
   tablets don't fall into the desktop priority-nav row, which has no room
   left for logo + links + search + favorite once a "Lainnya" dropdown is
   added too). --kplay-navbar-h is set by JS (initPriorityNav, kplay.js)
   from the navbar's real rendered height, since that height itself varies
   by breakpoint (logo shrinks under 640px) — a hardcoded px offset here
   would drift out of sync with the logo and clip/gap against it. */
@media (max-width: 1024px) {
  body.kp-menu-open { overflow: hidden; }
  .nav-toggle { display: block; }
  .navbar-inner { flex-wrap: wrap; position: relative; }
  .nav-links-wrap {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: var(--kplay-navbar-h, 60px); left: 0; right: 0; bottom: auto; width: 100vw;
    height: calc(100dvh - var(--kplay-navbar-h, 60px) - env(safe-area-inset-bottom, 0px));
    background: rgba(6,6,10,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    padding: 0; border: none; border-radius: 0 0 16px 16px; box-shadow: none;
    visibility: hidden; opacity: 0; transform: translateX(-100%); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
    z-index: 101; overflow-y: auto;
  }
  .nav-links-wrap.is-open {
    visibility: visible; opacity: 1; transform: translateX(0); pointer-events: auto;
    transition: opacity .3s ease, transform .3s ease, visibility 0s 0s;
  }
  .nav-close { display: flex; align-self: flex-end; align-items: center; justify-content: center; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.2rem; padding: 0.75rem 1rem 0.4rem; }
  .nav-close:hover { color: var(--kplay-accent-gold); }
  /* Undo the desktop priority-nav treatment above — the mobile drawer is
     already a full-width vertical list showing every item, so nothing
     needs to be measured or collapsed into "Lainnya" here. Kept compact:
     smaller padding/font than before so long menus (with submenus) don't
     turn the drawer into an oversized list. */
  /* flex-wrap must stay "nowrap" here: in a column-direction flex
     container, "wrap" doesn't reflow text — it starts a second COLUMN
     once content is taller than .nav-links-wrap, pushing the rest of the
     menu (and everything after it, incl. .mobile-auth) sideways off the
     100vw drawer instead of just letting it scroll. That's what was
     hiding menu items and shoving the Favorit block out of place once
     submenus made the list taller. Overflow is handled by
     .nav-links-wrap's own overflow-y:auto above. */
  .nav-links { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; width: 100%; overflow: visible; }
  .nav-links li { width: 100%; flex-shrink: 0; flex-wrap: wrap; align-items: stretch; }
  .nav-links li.menu-item-has-children { align-items: center; }
  .nav-links a {
    flex: 1; min-width: 0; padding: 0.7rem 1.1rem; border-radius: 0; font-size: 0.92rem; font-weight: 600;
    color: var(--kplay-text-primary); border-bottom: 1px solid rgba(255,255,255,0.08); background: none;
  }
  .nav-links a:hover, .nav-links .current-menu-item > a { background: rgba(201,162,39,0.15); border-color: rgba(255,255,255,0.12); color: var(--kplay-accent-gold-light); }
  .nav-links .submenu-toggle { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.65rem; }
  .nav-more { display: none !important; }

  /* Accordion submenu: collapses to 0 height instead of the desktop
     absolutely-positioned dropdown, so it pushes the rest of the list
     down rather than floating over it. */
  .sub-menu {
    position: static; width: 100%; max-height: 0; overflow: hidden;
    visibility: visible; opacity: 1; transform: none; border: none; box-shadow: none;
    background: rgba(255,255,255,0.03); padding: 0; margin: 0; gap: 0;
    transition: max-height .25s ease;
  }
  li.menu-item-has-children.is-open > .sub-menu { max-height: 800px; }
  .sub-menu a { padding: 0.65rem 1.1rem 0.65rem 2rem; font-size: 0.85rem; font-weight: 500; border-bottom-color: rgba(255,255,255,0.05); }

  /* margin-top:auto only pushes this to the bottom when the menu is short
     enough to leave leftover space in the drawer; once the list overflows
     (e.g. several items with open submenus) auto stops applying and this
     was rendering directly after the last menu item, which read as
     "offset" since its position kept jumping depending on menu length.
     A fixed margin keeps it in the same visual spot relative to the menu
     either way — reachable by scrolling down, same as any other item. */
  .mobile-auth { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; padding: 1.1rem; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; }
  .mobile-auth a { flex: 1; text-align: center; padding: 0.55rem; border-radius: 8px; font-weight: 600; font-size: 0.85rem; }
  .mobile-signup { border: 1px solid var(--kplay-border-gold); }
  .mobile-login { background: var(--kplay-gradient-gold); color: #171200; }
  .nav-actions { display: none; }
  .nav-overlay.is-open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;
  }
}

@media (max-width: 480px) {
  .nav-links a { padding: 0.6rem 0.9rem; font-size: 0.88rem; }
  .sub-menu a { padding: 0.55rem 0.9rem 0.55rem 1.7rem; font-size: 0.82rem; }
}

/* ---------- Hero slider ---------- */
.hero-banner { position: relative; width: 100%; aspect-ratio: 21/8; min-height: 380px; max-height: 560px; overflow: hidden; background: #0a0a0a; }
.hero-slider { position: relative; width: 100%; height: 100%; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; display: flex; align-items: stretch; }
.hero-slide.active { opacity: 1; }
.hero-bg-blur { position: absolute; inset: -20px; background-size: cover; background-position: right top; filter: blur(2px) brightness(0.35) saturate(1.2); transform: scale(1.08); z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(5,5,10,0.92) 0%, rgba(5,5,10,0.6) 55%, rgba(5,5,10,0.15) 100%),
    linear-gradient(to top, rgba(5,5,10,0.7) 0%, transparent 50%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 270px; gap: 2.5rem; align-items: center; height: 100%; }

.hero-left { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding: 2rem 0; }
.hero-labels { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hero-badge, .hero-label-quality {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  padding: 0.28rem 0.7rem; border-radius: 20px;
}
.hero-badge { background: var(--kplay-gradient-gold); color: #171200; letter-spacing: 1.5px; }
.hero-label-quality { background: rgba(108,63,197,0.25); border: 1px solid rgba(108,63,197,0.5); color: #a78bfa; }
.hero-title {
  font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 800; color: #fff; line-height: 1.35; margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-desc {
  color: rgba(255,255,255,0.65); font-size: 0.85rem; line-height: 1.65; max-width: 500px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-meta-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hero-meta-pill {
  font-size: 0.72rem; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1); padding: 0.2rem 0.55rem; border-radius: 20px;
}
.hero-genre-pill {
  font-size: 0.72rem; color: var(--kplay-accent-gold-light); background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.25); padding: 0.2rem 0.55rem; border-radius: 20px; transition: background .2s ease;
}
.hero-genre-pill:hover { background: rgba(212,175,55,0.2); color: var(--kplay-accent-gold-light); }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 0.25rem; }
.btn-watch, .btn-watch-outline { display: inline-flex; align-items: center; padding: 0.65rem 1.4rem; border-radius: 8px; font-weight: 700; font-size: 0.9rem; }
.btn-watch { gap: 0.5rem; background: var(--kplay-gradient-gold); color: #171200; transition: transform .2s, box-shadow .2s; }
.btn-watch:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,175,55,0.45); color: #171200; }
.btn-watch-outline { gap: 0.4rem; background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.65rem 1.25rem; transition: background .2s, border-color .2s; }
.btn-watch-outline:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); color: #fff; }

.hero-right { display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; height: 100%; }
.hero-poster-frame { position: relative; width: 230px; flex-shrink: 0; }
.hero-poster-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; display: block; position: relative; z-index: 2; box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.15); }
.hero-poster-glow { position: absolute; inset: -8px; border-radius: 14px; background: linear-gradient(135deg, rgba(108,63,197,0.5), rgba(233,30,140,0.35)); filter: blur(20px); z-index: 1; opacity: 0.75; }
.hpf-corner { position: absolute; width: 18px; height: 18px; z-index: 3; pointer-events: none; }
.hpf-corner.tl { top: -6px; left: -6px; border-top: 2px solid var(--kplay-accent-gold); border-left: 2px solid var(--kplay-accent-gold); border-radius: 3px 0 0 0; }
.hpf-corner.tr { top: -6px; right: -6px; border-top: 2px solid var(--kplay-accent-gold); border-right: 2px solid var(--kplay-accent-gold); border-radius: 0 3px 0 0; }
.hpf-corner.bl { bottom: -6px; left: -6px; border-bottom: 2px solid var(--kplay-accent-gold); border-left: 2px solid var(--kplay-accent-gold); border-radius: 0 0 0 3px; }
.hpf-corner.br { bottom: -6px; right: -6px; border-bottom: 2px solid var(--kplay-accent-gold); border-right: 2px solid var(--kplay-accent-gold); border-radius: 0 0 3px 0; }

.hero-dots { position: absolute; bottom: 14px; left: 2rem; display: flex; gap: 8px; z-index: 5; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; border: none; transition: all .3s ease; }
.hero-dot.active { background: var(--kplay-accent-gold); width: 24px; border-radius: 4px; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.12); color: #fff;
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: all .2s ease; opacity: 0;
}
.hero-banner:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: rgba(212,175,55,0.3); border-color: var(--kplay-accent-gold); }
.hero-arrow-prev { left: 1rem; }
.hero-arrow-next { right: 1rem; }
.section-see-all {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2px; color: var(--kplay-text-primary);
  background: var(--kplay-gradient-card, var(--kplay-bg-card)); border: 1px solid var(--kplay-border-gold);
  border-radius: 999px; padding: 0.45rem 1rem; transition: all .25s ease;
}
.section-see-all:hover {
  background: var(--kplay-gradient-gold); color: #171200; border-color: transparent;
  box-shadow: 0 4px 15px rgba(201,162,39,0.25);
}
.section-see-all-below { display: table; width: fit-content; margin: 1.25rem auto 0; }
.hero-see-all {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  font-size: 0.78rem; font-weight: 700; color: #171200; background: var(--kplay-gradient-gold);
  border: 1px solid transparent; border-radius: 999px;
  padding: 0.5rem 1.1rem; box-shadow: 0 4px 16px rgba(201,162,39,0.4); transition: all .2s ease;
}
.hero-see-all:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,162,39,0.55); color: #171200; }
@media (max-width: 900px) {
  .hero-see-all { font-size: 0.72rem; padding: 0.45rem 0.9rem; }
}
@media (max-width: 640px) {
  .hero-see-all { top: 0.75rem; right: 0.75rem; font-size: 0.62rem; padding: 0.35rem 0.7rem; }
}

@media (max-width: 900px) {
  .hero-banner { aspect-ratio: 16/7; min-height: 300px; }
  .hero-inner { grid-template-columns: 1fr 180px; gap: 1.5rem; padding: 0 1.25rem; }
  .hero-poster-frame { width: 180px; }
  /* Compact CTA — a long title pushes these down, and on tablet's shorter
     hero height there's much less spare room than desktop to absorb that. */
  .hero-cta { gap: 0.5rem; margin-top: 0.15rem; }
  .btn-watch, .btn-watch-outline { padding: 0.5rem 1rem; font-size: 0.78rem; border-radius: 6px; }
}
@media (max-width: 640px) {
  .hero-banner { aspect-ratio: unset; height: 480px; min-height: unset; max-height: none; }
  .hero-slider { height: 100%; min-height: 480px; }
  .hero-slide { min-height: 480px; }
  .hero-bg-blur { inset: 0; transform: none; background-position: right center; }
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 1.5rem 1rem 3rem; gap: 1.25rem; align-items: start; }
  .hero-left { gap: 0.5rem; padding: 0; }
  .hero-right { order: -1; height: auto; padding: 0; justify-content: flex-start; }
  .hero-poster-frame { width: 130px; }
  .hero-title { font-size: 1.2rem; -webkit-line-clamp: 4; }
  .hero-desc { display: none; }
  .hero-dots { left: 50%; transform: translateX(-50%); }
  .hero-arrow { display: none; }
  /* Even tighter than the tablet override above — this is the height-
     constrained (fixed 480px) breakpoint where a 4-line-clamped title
     eats the most space, so the buttons need to stay as small as
     possible to avoid getting shoved past the hero's bottom edge. */
  .hero-cta { gap: 0.4rem; margin-top: 0.1rem; }
  .btn-watch, .btn-watch-outline { padding: 0.42rem 0.8rem; font-size: 0.7rem; gap: 0.3rem; border-radius: 6px; }
}

/* ---------- Search ---------- */
.search-bar-container { max-width: 600px; margin: 0 auto 1rem; }
.search-bar { display: flex; align-items: center; background: var(--kplay-gradient-card, var(--kplay-bg-card)); border: 1px solid var(--kplay-border-gold); border-radius: 50px; padding: 0.4rem; transition: border-color .3s, box-shadow .3s; }
.search-bar:focus-within { border-color: var(--kplay-accent-gold); box-shadow: 0 4px 20px rgba(201,162,39,0.15); }
.search-icon { color: var(--kplay-text-muted); padding: 0 0.8rem; font-size: 1rem; }
.search-input { flex: 1; background: none; border: none; outline: none; color: var(--kplay-text-primary); padding: 0.5rem; font-size: 0.9rem; }
.search-input::placeholder { color: var(--kplay-text-muted); }
.search-btn { background: var(--kplay-gradient-gold); color: #171200; font-weight: 600; border: none; padding: 0.6rem 1.2rem; border-radius: 25px; font-size: 0.85rem; transition: box-shadow .3s; }
.search-btn:hover { box-shadow: 0 4px 15px rgba(201,162,39,0.3); }

/* ---------- Ads: top banner grid + in-feed ad code ---------- */
.banner-grid-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.banner-ads { position: relative; overflow: hidden; border-radius: var(--kplay-radius); grid-column: span 1; }
.banner-ads-full { grid-column: 1 / -1; }
.banner-ads img { width: 100%; height: auto; display: block; border-radius: var(--kplay-radius); }
.banner-ads-code { display: flex; align-items: center; justify-content: center; min-height: 90px; background: var(--kplay-bg-card); overflow: hidden; }
@media (max-width: 768px) {
  .banner-grid-wrapper { grid-template-columns: 1fr; gap: 0.75rem; }
  .banner-ads { grid-column: 1 / -1; }
}
.banner-card { border-radius: var(--kplay-radius); overflow: hidden; background: var(--kplay-bg-card); display: flex; align-items: center; justify-content: center; min-height: 169px; }
.banner-card-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ad-zone-sidebar { display: flex; align-items: center; justify-content: center; text-align: center; overflow-x: auto; }

/* ---------- Stats / description ---------- */
.stats-row .stat-box, .stat-box {
  background: var(--kplay-gradient-card, var(--kplay-bg-card)); border: 1px solid var(--kplay-border-gold);
  border-radius: var(--kplay-radius); padding: 1.3rem 1.5rem; text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.stat-box:hover { border-color: var(--kplay-accent-gold); box-shadow: var(--kplay-shadow-hover); transform: translateY(-4px); }
.stat-number {
  font-size: 1.9rem; font-weight: 700; background: var(--kplay-gradient-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 0.7rem; color: var(--kplay-text-secondary); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.desc-box { background: var(--kplay-gradient-card, var(--kplay-bg-secondary)); border: 1px solid rgba(212,175,55,0.12); border-radius: var(--kplay-radius); padding: 0.85rem 1.1rem; color: var(--kplay-text-secondary); font-size: 0.8rem; line-height: 1.6; }
.desc-box p { margin: 0; }
@media (max-width: 640px) {
  .desc-box { padding: 0.65rem 0.85rem; font-size: 0.76rem; line-height: 1.55; border-radius: 10px; }
  .archive-desc { margin: -0.75rem 0 0; font-size: 0.8rem; }
}
.kplay-seo-title { font-size: 1rem; font-weight: 600; color: var(--kplay-text-secondary); margin: 0 0 -0.5rem; }
@media (max-width: 420px) {
  .stats-row.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-row .stat-box { padding: 1rem 0.75rem; }
  .stats-row .stat-number { font-size: 1.5rem; }
}

/* ---------- Tabs (trending / genre) ---------- */
.trending-grid.is-loading { opacity: 0.4; pointer-events: none; transition: opacity .2s ease; }
.grid.is-loading { opacity: 0.4; pointer-events: none; transition: opacity .2s ease; }

.kplay-load-more-btn {
  display: block; margin: 1.5rem auto 0; background: var(--kplay-gradient-card, var(--kplay-bg-card));
  color: var(--kplay-text-primary); border: 1px solid var(--kplay-border-gold); border-radius: 999px;
  padding: 0.6rem 1.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; transition: all .25s ease;
}
.kplay-load-more-btn:hover:not(:disabled) {
  background: var(--kplay-gradient-gold); color: #171200; border-color: transparent; box-shadow: 0 4px 15px rgba(201,162,39,0.25);
}
.kplay-load-more-btn:disabled { opacity: 0.6; cursor: default; }
.trending-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.trending-tab {
  background: transparent; color: var(--kplay-text-secondary); border: 1px solid var(--kplay-border-gold);
  border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3px; transition: all .3s ease;
}
.trending-tab:hover { border-color: var(--kplay-accent-gold); color: var(--kplay-text-primary); }
.trending-tab.active {
  background: var(--kplay-gradient-gold); color: #171200; font-weight: 600; border-color: transparent;
  box-shadow: 0 4px 15px rgba(201,162,39,0.25);
}

.genre-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
.genre-tabs::-webkit-scrollbar { display: none; }
.genre-tab {
  background: var(--kplay-gradient-card, var(--kplay-bg-card)); color: var(--kplay-text-secondary);
  border: 1px solid rgba(212,175,55,0.15); border-radius: 24px; padding: 0.4rem 1.1rem; font-size: 0.75rem;
  white-space: nowrap; letter-spacing: 0.5px; transition: all .3s ease;
}
.genre-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
.genre-tags::-webkit-scrollbar { display: none; }
.genre-tag {
  display: inline-block; background: var(--kplay-gradient-card, var(--kplay-bg-card)); color: var(--kplay-text-secondary);
  border: 1px solid rgba(212,175,55,0.15); border-radius: 24px; padding: 0.35rem 1rem; font-size: 0.72rem;
  white-space: nowrap; letter-spacing: 0.3px; cursor: pointer; transition: all .3s ease; user-select: none;
}
.genre-tag:hover, .genre-tag.active {
  background: var(--kplay-gradient-gold); color: #171200; border-color: transparent; box-shadow: 0 4px 15px rgba(201,162,39,0.25);
}

a.genre-tab:hover, .genre-tab:hover, .genre-tab.active {
  background: var(--kplay-gradient-gold); color: #171200; border-color: transparent; box-shadow: 0 4px 20px rgba(201,162,39,0.25);
}
.trending-grid[hidden] { display: none; }

/* ---------- Video cards ---------- */
.video-card {
  position: relative; display: flex; flex-direction: column; background: var(--kplay-bg-card); border-radius: var(--kplay-radius);
  overflow: hidden; border: 1px solid rgba(201,162,39,0.08); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.video-card .thumb { flex-shrink: 0; }
.video-card:hover { transform: translateY(-6px); box-shadow: var(--kplay-shadow-hover); border-color: var(--kplay-border-gold); }
/* Positioning context for the badges + favorite button below — anchoring
   them here (instead of .video-card) keeps them pinned to the thumbnail
   itself regardless of how tall the title/meta below it ends up being. */
.thumb-wrap { position: relative; flex-shrink: 0; }
.video-card .thumb {
  width: 100%; height: auto; aspect-ratio: var(--kplay-thumb-ratio, 16/10); object-fit: cover;
  object-position: top center; background: var(--kplay-bg-card-solid); transition: filter .4s ease;
}
.video-card:hover .thumb { filter: brightness(1.05); }
.badge-new {
  position: absolute; top: 0; left: 0; z-index: 3; overflow: hidden;
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 60%, #9b2c2c 100%); color: #fff;
  font-size: 0.6rem; font-weight: 800; padding: 0.3rem 0.9rem 0.3rem 0.55rem; border-radius: 0 0 12px 0; letter-spacing: 2px; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(229,62,62,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  border-bottom: 2px solid rgba(255,255,255,0.15); border-right: 2px solid rgba(255,255,255,0.15);
  animation: kplayBadgeGlow 2.5s ease-in-out infinite;
}
.badge-new::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: kplayBadgeShine 3s ease-in-out infinite;
}
@keyframes kplayBadgeGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(229,62,62,0.5), inset 0 1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 3px 20px rgba(229,62,62,0.75), inset 0 1px 0 rgba(255,255,255,0.25); }
}
@keyframes kplayBadgeShine {
  0%, 70%, 100% { left: -100%; }
  85% { left: 100%; }
}
.badge-uncen {
  position: absolute; top: 0; right: 0; z-index: 3; overflow: hidden;
  background: linear-gradient(135deg, #38b2ac 0%, #2c7a7b 60%, #234e52 100%); color: #fff;
  font-size: 0.55rem; font-weight: 800; padding: 0.3rem 0.55rem 0.3rem 0.9rem; border-radius: 0 0 0 12px; letter-spacing: 2px; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(56,178,172,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  border-bottom: 2px solid rgba(255,255,255,0.15); border-left: 2px solid rgba(255,255,255,0.15);
  animation: kplayBadgeGlowTeal 2.5s ease-in-out infinite;
}
.badge-uncen::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: kplayBadgeShine 4s ease-in-out infinite;
}
@keyframes kplayBadgeGlowTeal {
  0%, 100% { box-shadow: 0 3px 12px rgba(56,178,172,0.5), inset 0 1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 3px 20px rgba(56,178,172,0.75), inset 0 1px 0 rgba(255,255,255,0.25); }
}
.badge-hot {
  position: absolute; bottom: 0; left: 0; z-index: 3; overflow: hidden;
  background: linear-gradient(135deg, #ff9a3c 0%, #ff5e3a 55%, #d1451f 100%); color: #fff;
  font-size: 0.52rem; font-weight: 800; padding: 0.2rem 0.65rem 0.2rem 0.45rem; border-radius: 0 10px 0 0; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 -3px 12px rgba(255,94,58,0.5), inset 0 -1px 0 rgba(255,255,255,0.25);
  border-top: 2px solid rgba(255,255,255,0.15); border-right: 2px solid rgba(255,255,255,0.15);
  animation: kplayBadgeGlowHot 2.5s ease-in-out infinite;
}
.badge-hot::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: kplayBadgeShine 3.5s ease-in-out infinite;
}
@keyframes kplayBadgeGlowHot {
  0%, 100% { box-shadow: 0 -3px 12px rgba(255,94,58,0.5), inset 0 -1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 -3px 20px rgba(255,94,58,0.75), inset 0 -1px 0 rgba(255,255,255,0.25); }
}
/* Portrait cards only (see kplay_video_card()) — badge-hot's normal
   bottom-left spot collides with the portrait info bar (HD/views/
   duration) that also lives there, so BARU + HOT stack in this top-left
   flex column instead: small tags hanging off the corner, same idea as a
   price/sale ribbon on a product photo, clear of everything below them.
   Flex (not a fixed top offset) so HOT rides straight up to the corner
   by itself once BARU is gone — new-badge expiry, or the video was never
   new to begin with — with no leftover empty gap above it either way. */
.thumb-badges-topleft { position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.thumb-badges-topleft .badge-new,
.thumb-badges-topleft .badge-hot-top { position: static; }
.badge-hot-top {
  border-radius: 0 20px 20px 0;
  border-top: none; border-bottom: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 3px 12px rgba(255,94,58,0.5), inset 0 -1px 0 rgba(255,255,255,0.25);
  animation: kplayBadgeGlowHotTop 2.5s ease-in-out infinite;
}
@keyframes kplayBadgeGlowHotTop {
  0%, 100% { box-shadow: 0 3px 12px rgba(255,94,58,0.5), inset 0 -1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 3px 20px rgba(255,94,58,0.75), inset 0 -1px 0 rgba(255,255,255,0.25); }
}
.fav-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s, color .15s, transform .15s;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn.is-fav { background: var(--kplay-accent-rose-gold); color: #fff; border-color: transparent; }
.fav-btn-below-player {
  position: static; width: auto; height: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--kplay-bg-card); border: 1px solid var(--kplay-accent-gold); color: var(--kplay-text-primary);
  border-radius: 999px; padding: 0.55rem 1.2rem; font-size: 0.82rem; font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.fav-btn-below-player:hover { background: rgba(212,175,55,0.1); }
.fav-btn-below-player .fav-heart-icon { color: var(--kplay-accent-rose-gold); }
.fav-btn-below-player svg { width: 16px; height: 16px; flex-shrink: 0; }
.fav-btn-below-player.is-fav { background: var(--kplay-accent-rose-gold); color: #fff; border-color: transparent; }
.fav-btn-below-player.is-fav .fav-heart-icon { color: #fff; }
.fav-btn-below-player .fav-global-count { color: var(--kplay-accent-gold-light); opacity: 1; font-weight: 700; }
.fav-btn-below-player.is-fav .fav-global-count { color: #fff; }
@media (max-width: 640px) {
  .fav-btn-below-player { padding: 0.45rem 0.9rem; font-size: 0.75rem; gap: 0.4rem; }
  .fav-btn-below-player svg { width: 14px; height: 14px; }
}
.fav-btn.is-fav .fav-heart-icon path { fill: currentColor; }
.fav-global-count { opacity: 0.7; font-weight: 500; }
.fav-global-count[data-zero] { display: none; }

.card-body { flex: 1; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; background: linear-gradient(180deg, rgba(26,26,26,0.98) 0%, var(--kplay-bg-card) 100%); }
.card-title {
  font-size: 0.8rem; font-weight: 500; line-height: 1.3; min-height: calc(1.3em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0; font-size: 0.65rem; color: var(--kplay-accent-gold-light); margin-top: 0.5rem; }
.card-meta span { white-space: nowrap; }
.card-meta span:not(:first-child)::before { content: '|'; margin: 0 0.5rem; color: var(--kplay-text-muted); }
@media (max-width: 480px) {
  .card-meta { font-size: 0.6rem; }
}
.card-info { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.4rem; font-size: 0.7rem; color: var(--kplay-text-muted); }
.card-info .rating { color: var(--kplay-accent-gold-light); font-weight: 600; }
.card-info .year { color: var(--kplay-text-secondary); margin-right: auto; margin-left: 0.75rem; }
.card-info .views { display: flex; align-items: center; gap: 0.2rem; color: var(--kplay-accent-rose-gold); }

/* ---------- Portrait thumbnail card (KPlay → Umum → Rasio Aspek Thumbnail: 3:4) ----------
   Denser layout: HD/views/duration live on the thumbnail itself instead of
   a separate meta row, so the card stays compact at portrait proportions. */
.video-card-portrait .thumb-wrap { position: relative; flex-shrink: 0; }
.video-card-portrait .thumb { aspect-ratio: 3/4; height: auto; }
.video-card-portrait .thumb-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.5rem 0.5rem 0.4rem; font-size: 0.65rem; font-weight: 600; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
}
.video-card-portrait .thumb-overlay-row { display: flex; align-items: center; gap: 0.5rem; }
.video-card-portrait .thumb-badge-hd {
  background: var(--kplay-gradient-gold); color: #171200; font-weight: 800; font-size: 0.6rem;
  padding: 0.1rem 0.4rem; border-radius: 4px; letter-spacing: 0.5px; flex-shrink: 0;
}
.video-card-portrait .thumb-views, .video-card-portrait .thumb-duration { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.video-card-portrait .thumb-country {
  color: rgba(255,255,255,0.75); font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.video-card-portrait .thumb-duration { margin-left: auto; flex-shrink: 0; }
.card-body-portrait { padding: 0.6rem 0.7rem; }
.card-body-portrait .card-title { min-height: 0; -webkit-line-clamp: 2; font-size: 0.78rem; }
@media (max-width: 480px) {
  .video-card-portrait .thumb-overlay { font-size: 0.6rem; padding: 1.2rem 0.4rem 0.35rem; gap: 0.2rem; }
  .video-card-portrait .thumb-overlay-row { gap: 0.35rem; }
  .video-card-portrait .thumb-badge-hd { font-size: 0.55rem; padding: 0.08rem 0.35rem; }
  .card-body-portrait { padding: 0.5rem 0.6rem; }
  .card-body-portrait .card-title { font-size: 0.72rem; }
}

/* ---------- Cast row ---------- */
.artis-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
.artis-row::-webkit-scrollbar { display: none; }
.artis-card { flex-shrink: 0; width: 120px; text-align: left; transition: transform .25s ease; }
.artis-card:hover { transform: translateY(-4px); }
.artis-img-wrap { position: relative; width: 120px; height: 150px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(212,175,55,0.2); background: rgba(255,255,255,0.04); }
.artis-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s ease; }
.artis-card:hover .artis-img-wrap img { transform: scale(1.06); }
.artis-info { padding: 0.4rem 0.25rem 0; }
.artis-name { font-size: 0.72rem; font-weight: 600; color: var(--kplay-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.artis-count { font-size: 0.65rem; color: var(--kplay-accent-gold-light); margin-top: 0.1rem; }

.cast-profile-head { display: flex; align-items: center; gap: 1.25rem; }
.cast-profile-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kplay-border-gold); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, var(--kplay-bg-secondary) 0%, #0d0d0d 100%); border-top: 1px solid var(--kplay-border-gold); margin-top: 2rem; padding: 2.5rem 0 1rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand { margin-bottom: 0.75rem; }
.footer-brand img { max-height: 64px; width: auto; }
.footer-desc { color: var(--kplay-text-secondary); font-size: 0.75rem; line-height: 1.7; margin-top: 0.6rem; max-width: 40ch; }
.footer-col h4 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--kplay-accent-gold-light); margin: 0 0 0.8rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col a { color: var(--kplay-text-secondary); font-size: 0.75rem; transition: color .3s, padding-left .3s; }
.footer-col a:hover { color: var(--kplay-accent-gold-light); padding-left: 5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.25rem; font-size: 0.7rem; color: var(--kplay-text-muted); display: flex; align-items: center; justify-content: center; gap: 0.75rem; position: relative; }
.rtaLink { display: inline-flex; opacity: 0.85; transition: opacity .2s ease; margin-left: auto; }
.rtaLink:hover { opacity: 1; }
.rta { display: flex; }
.rta-fallback-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 20px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px;
  background: #b00; color: #fff; border-radius: 2px;
}
@media (max-width: 640px) {
  .footer-bottom { flex-wrap: wrap; justify-content: center; }
  .rtaLink { margin-left: 0; }
}

/* ---------- Quick access / bottom nav (mobile) ---------- */
.quick-access { position: fixed; right: 1rem; bottom: 5rem; z-index: 60; }
.quick-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--kplay-gradient-gold); color: #171200; border: none; font-size: 1.1rem; box-shadow: var(--kplay-shadow-card); }
@media (max-width: 640px) {
  .quick-access { bottom: 20px; right: 20px; }
  .quick-btn { width: 44px; height: 44px; font-size: 1rem; }
}

.bottom-nav { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav {
    display: flex; align-items: stretch; justify-content: space-around;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(8,8,12,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(212,175,55,0.2); box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  }
  .quick-access { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 1rem); }
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px 4px;
  background: none; border: none; color: rgba(255,255,255,0.45); font-size: 0.65rem; position: relative; transition: color .2s, transform .2s;
}
.bottom-nav-item::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 20px; height: 2px; border-radius: 0 0 3px 3px; background: var(--kplay-accent-gold); transition: transform .25s ease;
}
.bottom-nav-item:active { transform: scale(0.88); }
.bottom-nav-item.active { color: var(--kplay-accent-gold-light); }
.bottom-nav-item.active::before { transform: translateX(-50%) scaleX(1); }
.bni-icon { width: 22px; height: 22px; position: relative; display: flex; align-items: center; justify-content: center; }
.bni-icon svg { width: 100%; height: 100%; }
.bni-label { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; }

/* Center "Video" item — elevated pill, like the reference's "Terbaru" */
.bottom-nav-center {
  position: relative; top: -10px; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--kplay-gradient-gold); color: #171200 !important; box-shadow: 0 4px 16px rgba(212,175,55,0.45);
  padding: 0; margin: 0 8px; border: 2px solid rgba(255,255,255,0.15); transition: transform .2s ease, box-shadow .2s ease;
}
.bottom-nav-center::before { display: none; }
.bottom-nav-center .bni-label { font-size: 0.5rem; color: #171200; font-weight: 700; }
.bottom-nav-center:active { transform: scale(0.9); box-shadow: 0 2px 8px rgba(212,175,55,0.3); }
.bni-fav-count {
  position: absolute; top: -6px; right: -10px; background: var(--kplay-accent-gold); color: #171200;
  border-radius: 999px; font-size: 0.55rem; font-weight: 800; min-width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}

.bottom-search-overlay { display: none; position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,0.75); padding: 1.25rem; }
.bottom-search-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; }
.bottom-search-box { width: 100%; max-width: 480px; margin-top: 3rem; }
.bottom-search-form { display: flex; align-items: center; background: var(--kplay-bg-card); border: 1px solid var(--kplay-border-gold); border-radius: 999px; padding: 0.6rem 1rem; gap: 0.5rem; }
.bottom-search-form input { flex: 1; background: none; border: none; outline: none; color: #fff; }
.bsf-close { background: none; border: none; color: #fff; font-size: 1rem; }

/* ---------- Single video page ---------- */
.kp-single-video { gap: 1.5rem; }
.kp-video-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.kp-video-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
/* The Detail tab-panel's own bottom padding plus the flex gap above
   compounded into a big empty band before "Video Terkait" — pull it in. */
.kp-video-main > section { margin-top: -0.6rem; }
.kp-video-main > section .section-title { margin-bottom: 0.75rem; }
.kp-video-sidebar { min-width: 0; }
.kp-sidebar-sticky { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) {
  .kp-video-layout { grid-template-columns: 2fr 1fr; }
  .kp-sidebar-sticky { position: sticky; top: 84px; }
}
.sidebar-box { background: var(--kplay-gradient-card, var(--kplay-bg-card)); border: 1px solid rgba(212,175,55,0.1); border-radius: var(--kplay-radius); padding: 1rem; }
.sidebar-box h4 { font-size: 0.8rem; font-weight: 700; margin: 0 0 0.8rem; text-transform: uppercase; color: var(--kplay-accent-gold-light); letter-spacing: 1.5px; }
.sidebar-box .grid-cols-2 { gap: 0.75rem; }
.sidebar-cta {
  display: block; text-align: center; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 700;
  background: var(--kplay-gradient-gold); color: #171200; transition: opacity .2s ease;
}
.sidebar-cta:hover { opacity: 0.88; }
/* Player box wraps a pasted <iframe> embed code — sized purely with CSS
   (aspect-ratio + width:100%) so it scales identically on mobile/desktop
   regardless of the width/height attributes on the embed code itself. */
.player-container { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.player-wrapper {
  position: relative; aspect-ratio: 16/9; background: #000; border-radius: 12px;
  border: 1px solid rgba(108,63,197,0.3); overflow: hidden;
}
.player-embed iframe, .player-embed video, .player-embed embed, .player-embed object {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.player-empty { background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.player-empty::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
.player-empty-msg { position: relative; text-align: center; color: #fff; padding: 0 1rem; }
.player-empty-msg a { color: var(--kplay-accent-gold-light); text-decoration: underline; }
.player-hint { font-size: 0.75rem; color: var(--kplay-text-muted); margin-top: -1rem; }

@media (max-width: 640px) {
  .player-wrapper { border-radius: 8px; }
  .player-hint { font-size: 0.7rem; }
}

.video-info-box { background: linear-gradient(135deg, rgba(108,63,197,0.15), rgba(233,30,140,0.08)); border: 1px solid rgba(108,63,197,0.3); border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.video-info-top { display: flex; gap: 1rem; }
.video-info-poster { width: 100px; border-radius: 8px; aspect-ratio: 2/3; object-fit: cover; flex-shrink: 0; }
.video-info-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
.info-row-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.75rem; color: var(--kplay-text-secondary); }
.share-bar { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.share-label { font-size: 0.68rem; font-weight: 600; color: var(--kplay-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 8px;
  font-size: 0.75rem; font-weight: 600; color: #fff; transition: all .3s ease; text-transform: uppercase; letter-spacing: 0.5px;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.share-btn-icon { width: 14px; height: 14px; flex-shrink: 0; }
.share-fb { background: #1877f2; border: 1px solid #1877f2; }
.share-wa { background: #25d366; border: 1px solid #25d366; }
.share-tg { background: #229ed9; border: 1px solid #229ed9; }
.share-tw { background: #000000; border: 1px solid #000000; }
.share-copy { background: transparent; border: 1px solid var(--kplay-border-gold); color: var(--kplay-accent-gold-light); }
.share-copy:hover { background: var(--kplay-accent-gold); border-color: var(--kplay-accent-gold); color: #171200; }

@media (max-width: 640px) {
  .share-buttons { gap: 0.5rem; }
  .share-btn {
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    align-items: center; justify-content: center; gap: 0;
  }
  .share-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .share-btn-icon { width: 15px; height: 15px; }
}

.video-info-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.85rem; }
.star-rating { display: flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; }
.star-rating .star { color: #454545; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: color .15s ease, transform .1s ease; }
.star-rating .star.is-active, .star-rating .star.is-hover { color: var(--kplay-accent-gold); }
.star-rating:not(.is-rated) .star:hover { transform: scale(1.12); }
.star-rating.is-rated .star { cursor: default; }
@media (max-width: 640px) {
  .star-rating { gap: 0.15rem; }
  .star-rating .star { font-size: 1rem; }
  .star-rating .rating-value { font-size: 0.85rem; }
  .star-rating.is-rated::after { width: 13px; height: 13px; font-size: 0.58rem; }
}
.star-rating.is-rated::after {
  content: "✓";
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 0.3rem;
  font-size: 0.65rem; line-height: 1; color: #171200;
  background: var(--kplay-accent-gold); border-radius: 50%; flex-shrink: 0;
}
.rating-value { margin-left: 0.4rem; font-weight: 700; }
.rating-count { margin-left: 0.3rem; font-size: 0.72rem; color: var(--kplay-text-muted); }
.views-line { font-size: 0.75rem; color: var(--kplay-text-muted); }

.detail-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(212,175,55,0.15); overflow-x: auto; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab { flex-shrink: 0; }
.detail-tab {
  background: none; border: none; color: var(--kplay-text-secondary); font-weight: 600; font-size: 0.85rem;
  padding: 0.7rem 1.5rem; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: all .4s ease;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.detail-tab:hover, .detail-tab.active { color: var(--kplay-accent-gold-light); border-color: var(--kplay-accent-gold); }
.detail-tab-content { display: none; }
.detail-tab-content.active { display: block; }
.tab-panel { padding-top: 0.75rem; }
.vod-desc { color: var(--kplay-text-secondary); font-size: 0.9rem; line-height: 1.7; }
.vod-desc.is-collapsible { max-height: 4.8em; overflow: hidden; position: relative; }
.vod-desc.is-collapsible::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(to bottom, transparent, var(--kplay-bg-primary));
  pointer-events: none;
}
.vod-desc.is-expanded { max-height: none; overflow: visible; }
.vod-desc.is-expanded::after { display: none; }
/* Inside .desc-box (tag/genre archive descriptions) the container's own
   background differs from the page background the fade defaults to —
   match it so the fade doesn't leave a visible seam. */
.desc-box .vod-desc.is-collapsible::after { background: linear-gradient(to bottom, transparent, var(--kplay-bg-secondary)); }
.vod-readmore-btn {
  margin-top: 0.5rem; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--kplay-accent-gold); font-size: 0.82rem; font-weight: 600;
}
.vod-readmore-btn:hover { color: var(--kplay-accent-gold-light); text-decoration: underline; }
.info-table { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.info-row-item { display: flex; gap: 0.75rem; font-size: 0.82rem; flex-wrap: wrap; }
.info-label { color: var(--kplay-text-muted); min-width: 90px; }
.info-value { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-pill { background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.2); border-radius: 20px; padding: 0.35rem 0.8rem; font-size: 0.7rem; color: var(--kplay-accent-gold-light); transition: all .2s; }
.tag-pill:hover { background: var(--kplay-accent-gold); border-color: var(--kplay-accent-gold); color: #171200; }

/* ---------- Comments (Artalk) ---------- */
.comments-section { background: var(--kplay-bg-card); border: 1px solid var(--kplay-border-gold); border-radius: var(--kplay-radius); padding: 0.75rem 0.9rem; margin-top: 0.75rem; }
.comments-title { font-size: 0.92rem; font-weight: 700; color: var(--kplay-text-primary); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(201,162,39,0.15); }
.kplay-comment-warning {
  background: rgba(212,175,55,0.08); border-left: 3px solid var(--kplay-accent-gold); border-radius: 8px;
  padding: 0.55rem 0.7rem; color: var(--kplay-text-secondary); font-size: 0.78rem; line-height: 1.5; margin-bottom: 0.65rem;
}
.kplay-comment-warning strong { display: block; margin-bottom: 0.2rem; color: var(--kplay-accent-gold-light); }
@media (max-width: 640px) {
  .comments-section { padding: 0.6rem 0.65rem; margin-top: 0.6rem; }
  .comments-title { font-size: 0.85rem; margin-bottom: 0.5rem; padding-bottom: 0.4rem; }
  .kplay-comment-warning { padding: 0.45rem 0.55rem; font-size: 0.72rem; margin-bottom: 0.5rem; }
}

/* Artalk theme override — pull its CSS vars from KPlay's own palette so it
   matches whatever accent color is set in KPlay → Design. */
.kplay-artalk-box .artalk {
  --at-color-bg: var(--kplay-bg-card) !important;
  --at-color-bg-grey: var(--kplay-bg-secondary) !important;
  --at-color-bg-grey2: var(--kplay-bg-card-solid, var(--kplay-bg-secondary)) !important;
  --at-color-font: var(--kplay-text-primary) !important;
  --at-color-font-2: var(--kplay-text-secondary) !important;
  --at-color-border: var(--kplay-border-gold) !important;
  --at-color-main: var(--kplay-accent-gold) !important;
  --at-color-btn-bg: var(--kplay-bg-secondary) !important;
}
.kplay-artalk-box .atk-main-editor .atk-link { display: none !important; }
.kplay-artalk-box .atk-copyright { display: none !important; }
.kplay-artalk-box .atk-send-btn { background: var(--kplay-gradient-gold) !important; color: #171200 !important; border: none !important; font-weight: 700 !important; }

/* Best-effort compacting of Artalk's own default spacing (generous
   padding/avatar sizes meant for a full-page comment section, not a
   secondary block under a video player). These target Artalk's own
   class names, not ours — if a future Artalk version renames them these
   rules just become inert instead of breaking anything, so it's safe to
   list more than strictly necessary. !important matches the convention
   already used above: Artalk.css loads after kplay.css (its <link> tag
   is injected inline in comments.php, later in the DOM than wp_head),
   so equal-specificity rules would otherwise lose to it. */
.kplay-artalk-box .atk-main-editor { margin-bottom: 0.5rem !important; }
.kplay-artalk-box .atk-main-editor textarea { min-height: 52px !important; padding: 0.4rem 0.6rem !important; font-size: 0.82rem !important; }
.kplay-artalk-box .atk-list-comment,
.kplay-artalk-box .atk-comment { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.kplay-artalk-box .atk-comment .atk-comment { padding-left: 0.5rem !important; }
.kplay-artalk-box .atk-avatar { width: 26px !important; height: 26px !important; }
.kplay-artalk-box .atk-comment-content,
.kplay-artalk-box .atk-content { font-size: 0.81rem !important; line-height: 1.5 !important; }
.kplay-artalk-box .atk-comment-header,
.kplay-artalk-box .atk-header { margin-bottom: 0.15rem !important; gap: 0.3rem !important; }
@media (max-width: 640px) {
  .kplay-artalk-box .atk-avatar { width: 22px !important; height: 22px !important; }
  .kplay-artalk-box .atk-main-editor textarea { min-height: 44px !important; font-size: 0.78rem !important; }
  .kplay-artalk-box .atk-comment .atk-comment { padding-left: 0.4rem !important; }
}

/* "Lihat Lagi" — comments past the first 3 (see the MutationObserver in
   inc/comments.php) stay clipped behind a fade-out overlay until that
   button is clicked, same visual idea as the synopsis "Baca Lengkap"
   collapse (.vod-desc.is-collapsible above). !important on the two collapse
   properties for the same reason as the Artalk overrides below — Artalk's
   own CSS loads after ours and might otherwise set overflow/max-height
   itself on this exact element. */
.kplay-artalk-box .kplay-comments-collapsed {
  overflow: hidden !important; position: relative !important; transition: max-height .3s ease;
}
.kplay-artalk-box .kplay-comments-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em;
  background: linear-gradient(to bottom, transparent, var(--kplay-bg-card)); pointer-events: none;
}
.kplay-comments-more-btn {
  display: block; margin: -1.4rem auto 0; position: relative; z-index: 1;
  background: var(--kplay-gradient-card, var(--kplay-bg-card));
  color: var(--kplay-text-primary); border: 1px solid var(--kplay-border-gold); border-radius: 999px;
  padding: 0.5rem 1.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; transition: all .25s ease;
}
.kplay-comments-more-btn:hover {
  background: var(--kplay-gradient-gold); color: #171200; border-color: transparent;
  box-shadow: 0 4px 15px rgba(201,162,39,0.25);
}

/* ---------- Misc pages ---------- */
.kp-404 { text-align: center; padding: 3rem 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kp-404-code { font-size: 5rem; font-weight: 800; background: var(--kplay-gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.kp-404-text { color: var(--kplay-text-secondary); }
.kp-pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.kp-pagination .page-numbers { padding: 0.45rem 0.85rem; border-radius: 8px; background: var(--kplay-bg-card); color: var(--kplay-text-secondary); font-size: 0.85rem; }
.kp-pagination .page-numbers.current { background: var(--kplay-gradient-gold); color: #171200; font-weight: 700; }

.favorites-empty { display: none; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 0; color: var(--kplay-text-secondary); text-align: center; }
.favorites-empty:not([hidden]) { display: flex; }
.favorites-loading { text-align: center; color: var(--kplay-text-muted); padding: 2rem 0; }
.favorites-loading[hidden] { display: none; }