/* ==========================================================================
   Homepage bento (light) — 2026-11-05.
   Loaded ONLY by pages/home.php ($homeBento = true → <body class="hb">).
   Rules that restyle shared markup (header, footer, dropdowns, search,
   bottom nav, modal) are scoped under body.hb; the rest use homepage-only
   .hb-* classes. Every other page keeps the dark theme from style.min.css.
   Rollback: git tag frontend-pre-bento-20261105-1501, or the VPS tarball
   /root/backups/lk21-frontend/public_html-pre-bento-20261105-1501.tgz.
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans/latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.hb {
  /* Re-point the global dark tokens so legacy components (dropdowns, search
     suggest, ads, a11y panel, bottom nav) turn light without per-rule work. */
  --primary: #c63c16;
  --primary-dark: #a8320f;
  --bg-dark: #f2f4f7;
  --bg-card: #ffffff;
  --bg-hover: #eef1f5;
  --text: #192333;
  --text-muted: #5b6573;
  --border: #e1e5eb;

  --hb-bg: #f2f4f7;
  --hb-paper: #ffffff;
  --hb-ink: #192333;
  --hb-muted: #5b6573;
  --hb-line: #e1e5eb;
  --hb-orange: #fb633b;
  --hb-orange-ink: #c63c16;
  --hb-blue: #395aea;
  --hb-navy: #13233a;
  --hb-r: 22px;
  --hb-display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --hb-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  background: var(--hb-bg);
  color: var(--hb-ink);
  font-family: var(--hb-body);
  -webkit-font-smoothing: antialiased;
}
body.hb .container { width: auto; max-width: 1360px; margin: 0 auto; padding: 14px 28px 32px; }
body.hb a:focus-visible, body.hb button:focus-visible, body.hb summary:focus-visible,
body.hb input:focus-visible { outline: 3px solid var(--hb-blue); outline-offset: 3px; border-radius: 8px; }

/* ---------- Header (markup from includes/header.php, restyled) ---------- */
body.hb .header {
  background: rgba(255,255,255,.94); border: 1px solid var(--hb-line); border-radius: 20px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 18px; margin-bottom: 18px; position: sticky; top: 10px; z-index: 1000;
  box-shadow: 0 6px 24px rgba(19,35,58,.05);
}
body.hb .header .logo {
  background: none; -webkit-text-fill-color: var(--hb-ink); color: var(--hb-ink);
  font-family: var(--hb-display); font-weight: 700; letter-spacing: -1px; font-size: 1.7rem;
  display: inline-flex; align-items: center; gap: 8px;
}
body.hb .header .logo::before {
  content: ''; width: 34px; height: 34px; border-radius: 10px; background: var(--hb-orange);
  transform: rotate(-7deg); flex: none;
}
body.hb .header .logo .logo-time { display: none; }
body.hb .header .logo .logo-cc { -webkit-text-fill-color: var(--hb-muted); }
body.hb .nav-links { gap: 6px; align-items: center; }
body.hb .nav-links > a, body.hb .nav-links .dropdown-toggle {
  color: #344052; font-weight: 600; font-size: .92rem; padding: 9px 12px; border-radius: 10px;
}
body.hb .nav-links > a::after, body.hb .nav-links .dropdown-toggle::after { display: none; }
body.hb .nav-links > a:hover, body.hb .nav-links > a.active,
body.hb .dropdown:hover .dropdown-toggle { color: var(--hb-orange-ink); background: #fff1ec; }
body.hb .dropdown-menu { background: #fff; border: 1px solid var(--hb-line); border-radius: 14px; box-shadow: 0 18px 50px rgba(19,35,58,.14); }
body.hb .dropdown-menu a { color: var(--hb-ink); }
body.hb .dropdown-menu a:hover { background: #f4f6f9; color: var(--hb-orange-ink); }
body.hb .header-search { background: #f4f6f9; border: 1px solid var(--hb-line); border-radius: 14px; }
body.hb .header-search:focus-within { border-color: var(--hb-blue); background: #fff; }
body.hb .header-search input { color: var(--hb-ink); }
body.hb .header-search input::placeholder { color: #6b7482; }
body.hb .search-submit { background: var(--hb-navy) !important; color: #fff !important; border-radius: 10px !important; }
body.hb .search-suggest { background: #fff !important; border-color: var(--hb-line) !important; color: var(--hb-ink); box-shadow: 0 18px 50px rgba(19,35,58,.14); }
body.hb .search-suggest .ss-title { color: var(--hb-ink) !important; }
body.hb .search-suggest .ss-meta, body.hb .search-suggest .ss-note { color: var(--hb-muted) !important; }
body.hb .search-suggest .ss-row:hover { background: #f4f6f9 !important; }
body.hb .koleksi-nav-link, body.hb .tg-nav-link { color: #344052 !important; }

/* Mobile bottom nav (bottom-nav.min.css, sitewide) — light on the homepage. */
body.hb .bottom-nav { background: rgba(255,255,255,.97) !important; border-top: 1px solid var(--hb-line); box-shadow: 0 -8px 24px rgba(19,35,58,.06); }
body.hb .bottom-nav-item { color: #4a5462 !important; }
body.hb .bottom-nav-item.active, body.hb .bottom-nav-item:hover { color: var(--hb-orange-ink) !important; }

/* ---------- Shared bits ---------- */
.hb-ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hb-sec { margin: 0 0 40px; scroll-margin-top: 110px; }
.hb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.hb-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 26px/1.15 var(--hb-display); letter-spacing: -.9px; color: var(--hb-ink); }
.hb-title .hb-ic { color: var(--hb-orange); width: 22px; height: 22px; }
.hb-sub { margin: 6px 0 0; color: var(--hb-muted); font-size: .95rem; }
.hb-more { display: inline-flex; align-items: center; gap: 4px; color: var(--hb-ink); font-weight: 600; font-size: .9rem; text-decoration: none; padding: 8px 4px; }
.hb-more:hover { color: var(--hb-orange-ink); }
.hb-tabs { display: flex; gap: 4px; background: #e6eaf0; border-radius: 12px; padding: 4px; }
.hb-tab { border: 0; background: transparent; color: #4a5462; font: 600 .86rem var(--hb-body); padding: 9px 14px; border-radius: 9px; cursor: pointer; min-height: 40px; }
.hb-tab[aria-selected="true"] { background: #fff; color: var(--hb-ink); box-shadow: 0 2px 8px rgba(19,35,58,.08); }
.hb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; }

/* ---------- Intro ---------- */
.hb-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 22px; }
.hb-intro h1 { margin: 0 0 8px; font: 600 clamp(26px, 3.2vw, 38px)/1.12 var(--hb-display); letter-spacing: -1.4px; color: var(--hb-ink); max-width: 36ch; text-wrap: balance; }
.hb-intro h1 .hb-star { color: var(--hb-orange); margin-left: 6px; }
.hb-lead { margin: 0; color: var(--hb-muted); font-size: 1rem; line-height: 1.55; max-width: 64ch; }
.hb-lead strong { color: var(--hb-ink); }
.hb-intro-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
/* Skin switch (Bento | Krayon). Krayon restyles it in home-crayon.css. */
.hb-skin { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--hb-line); border-radius: 12px; padding: 4px; }
.hb-skin[hidden] { display: none; }
.hb-skin > span { color: var(--hb-muted); font-size: .78rem; padding: 0 6px 0 8px; }
.hb-skin button { border: 0; background: transparent; color: #4a5462; font: 600 .84rem var(--hb-body); padding: 7px 12px; border-radius: 9px; cursor: pointer; min-height: 36px; }
.hb-skin button[aria-pressed="true"] { background: var(--hb-navy); color: #fff; }
html.a11y-on .hb-skin { display: none; }
.hb-note { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hb-line); border-radius: 16px; padding: 12px 16px; flex: none; }
.hb-note-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff1ec; color: var(--hb-orange-ink); display: grid; place-items: center; }
.hb-note b { display: block; font-family: var(--hb-display); font-size: 1.25rem; letter-spacing: -.5px; }
.hb-note span { color: var(--hb-muted); font-size: .82rem; }

/* ---------- Hero bento ---------- */
.hb-hero-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 16px; margin-bottom: 26px; }
.hb-hero { position: relative; min-height: 440px; border-radius: var(--hb-r); overflow: hidden; background: var(--hb-navy); color: #fff; isolation: isolate; display: flex; align-items: flex-end; }
.hb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hb-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,24,40,.94) 0%, rgba(13,24,40,.72) 42%, rgba(13,24,40,.05) 78%), linear-gradient(0deg, rgba(13,24,40,.75) 0%, rgba(13,24,40,0) 45%); }
.hb-hero-body { padding: clamp(22px, 3.4vw, 40px); max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.hb-hero-kicker { align-self: flex-start; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.hb-hero-logo { width: min(330px, 78%); height: auto; display: block; }
.hb-hero h2 { margin: 0; font: 700 clamp(30px, 4vw, 50px)/1.02 var(--hb-display); letter-spacing: -1.8px; }
.hb-hero h2 a { color: inherit; text-decoration: none; }
.hb-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-meta span { background: rgba(255,255,255,.14); padding: 5px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.hb-meta .hb-rt { background: #ffd34d; color: #2a2100; }
.hb-hero p { margin: 0; color: #e3e8f0; font-size: .98rem; line-height: 1.55; max-width: 46ch; }
.hb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 14px; font: 700 .98rem var(--hb-body); text-decoration: none; border: 0; cursor: pointer; }
.hb-btn-primary { background: var(--hb-orange-ink); color: #fff; }
.hb-btn-primary:hover { background: #a8320f; color: #fff; }
.hb-btn-ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.hb-btn-ghost:hover { background: rgba(255,255,255,.22); }
.hb-btn-dark { background: var(--hb-navy); color: #fff; }

.hb-side { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.hb-live { background: #fff; border: 1px solid var(--hb-line); border-radius: var(--hb-r); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.hb-live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-live-head h2 { margin: 0; display: flex; gap: 8px; align-items: center; font: 600 1.25rem var(--hb-display); letter-spacing: -.6px; }
.hb-live-head h2 .hb-ic { color: var(--hb-orange); }
.hb-live-dot { display: inline-flex; align-items: center; gap: 6px; color: #b4231a; font-weight: 700; font-size: .8rem; }
.hb-live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e5372b; animation: hbPulse 1.6s ease-in-out infinite; }
@keyframes hbPulse { 50% { opacity: .3; } }
.hb-live > p { margin: 0; color: var(--hb-muted); font-size: .88rem; }
.hb-screen { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 104px; padding: 14px; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: var(--hb-navy) var(--hb-bg-img, none) center/cover no-repeat; isolation: isolate; }
.hb-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,24,40,.9), rgba(13,24,40,.25)); }
.hb-screen small { font-size: .75rem; color: #ffd0c2; font-weight: 700; }
.hb-screen strong { font: 600 1.05rem/1.2 var(--hb-display); }
.hb-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hb-mode { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: #f4f6f9; color: var(--hb-ink); text-decoration: none; min-height: 52px; }
.hb-mode b { font-size: .8rem; }
.hb-mode span { font-size: .72rem; color: var(--hb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-mode:hover { background: #fff1ec; }

.hb-mood { position: relative; overflow: hidden; background: #e4eaff; border: 1px solid #d6dff9; border-radius: var(--hb-r); padding: 20px; display: flex; flex-direction: column; gap: 6px; isolation: isolate; text-decoration: none; color: var(--hb-ink); }
.hb-mood .hb-pill { align-self: flex-start; background: #fff; color: #3346a8; }
.hb-mood h3 { margin: 6px 0 0; font: 600 1.45rem/1.12 var(--hb-display); letter-spacing: -.7px; max-width: 13ch; }
.hb-mood p { margin: 0; color: #4b5778; font-size: .86rem; max-width: 28ch; }
.hb-mood .hb-more { margin-top: auto; padding: 0; color: #2b3ea0; }
.hb-mood-emoji { position: absolute; right: -6px; bottom: -14px; font-size: 92px; line-height: 1; z-index: -1; transform: rotate(-10deg); opacity: .95; }

/* ---------- Quick nav ---------- */
.hb-quick { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 30px; padding-bottom: 2px; }
.hb-quick::-webkit-scrollbar { display: none; }
.hb-quick > span { color: var(--hb-muted); font-size: .82rem; white-space: nowrap; margin-right: 2px; }
.hb-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid #d6dbe3; background: #fff; color: #2c3746; border-radius: 10px; padding: 9px 13px; font-size: .86rem; font-weight: 600; text-decoration: none; min-height: 40px; }
.hb-chip:hover { border-color: var(--hb-orange); color: var(--hb-orange-ink); }
.hb-chip.is-hot { background: var(--hb-navy); color: #fff; border-color: var(--hb-navy); }

/* ---------- Poster cards ---------- */
.hb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.hb-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
.hb-rail > * { scroll-snap-align: start; }
.hb-card { min-width: 0; }
.hb-card a { display: flex; flex-direction: column; gap: 8px; color: var(--hb-ink); text-decoration: none; }
.hb-poster { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: #dde2ea; }
.hb-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hb-card a:hover .hb-poster img { transform: scale(1.04); }
.hb-badge { position: absolute; top: 8px; left: 8px; background: rgba(19,35,58,.86); color: #ffd34d; font-weight: 700; font-size: .75rem; padding: 3px 8px; border-radius: 7px; }
.hb-badge-r { left: auto; right: 8px; color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.hb-flag { top: auto; left: auto; right: 6px; bottom: 6px; background: rgba(19,35,58,.86); backdrop-filter: none; letter-spacing: .3px; font-size: .7rem; padding: 2px 6px; }
.hb-card-t { margin: 0; font: 600 .95rem/1.25 var(--hb-body); color: var(--hb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-card-m { color: var(--hb-muted); font-size: .8rem; margin-top: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-card a:hover .hb-card-t { color: var(--hb-orange-ink); }

.hb-rank a { position: relative; }
.hb-rank-n { position: absolute; left: -4px; bottom: 54px; z-index: 2; font: 700 66px/0.8 var(--hb-display); letter-spacing: -4px; color: #fff; -webkit-text-stroke: 2px var(--hb-ink); paint-order: stroke fill; pointer-events: none; }
.hb-rank:nth-child(-n+3) .hb-rank-n { color: var(--hb-orange); -webkit-text-stroke-color: #fff; }

/* ---------- Monthly (series / drama) ---------- */
.hb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
.hb-month { background: #e8ecf2; border: 1px solid #dde3eb; border-radius: var(--hb-r); padding: 22px; min-width: 0; }
.hb-month.is-drama { background: #efebf5; border-color: #e5dfee; }
.hb-month .hb-title { font-size: 1.3rem; }
.hb-month .hb-head { margin-bottom: 14px; align-items: center; }
.hb-mini-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.hb-mini { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--hb-ink); min-width: 0; }
.hb-mini .hb-poster { border-radius: 12px; }
.hb-mini b { font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-mini span { font-size: .75rem; color: var(--hb-muted); }
.hb-mini .hb-badge { color: #fff; background: var(--hb-orange-ink); }

/* ---------- Film terbaru filter ---------- */
.hb-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 18px; }
.hb-filter button { border: 1px solid #d6dbe3; background: #fff; color: #3a4554; border-radius: 9px; padding: 8px 13px; font: 600 .84rem var(--hb-body); cursor: pointer; min-height: 38px; }
.hb-filter button[aria-pressed="true"] { background: var(--hb-orange-ink); border-color: var(--hb-orange-ink); color: #fff; }
.hb-card.is-off { display: none; }

/* ---------- Rilis terbaru (dated list) ---------- */
.hb-dated { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hb-drow { display: grid; grid-template-columns: 52px 46px minmax(0, 1fr); gap: 12px; align-items: center; background: #fff; border: 1px solid var(--hb-line); border-radius: 16px; padding: 10px; text-decoration: none; color: var(--hb-ink); }
.hb-drow:hover { border-color: #f6b8a5; }
.hb-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 12px; background: #fff1ec; color: var(--hb-orange-ink); }
.hb-date b { font: 700 1.3rem/1 var(--hb-display); }
.hb-date span { font-size: .7rem; font-weight: 700; margin-top: 3px; }
.hb-drow img { width: 46px; height: 69px; border-radius: 8px; object-fit: cover; background: #dde2ea; }
.hb-drow h3 { margin: 0 0 3px; font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-drow p { margin: 0; color: var(--hb-muted); font-size: .78rem; }
.hb-dated-more { display: none; }

/* ---------- Rekomendasi ---------- */
.hb-rec { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.hb-feature { position: relative; min-height: 300px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-decoration: none; isolation: isolate; background: var(--hb-navy); }
.hb-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hb-feature::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,24,40,.92) 0%, rgba(13,24,40,.15) 65%); }
.hb-feature div { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.hb-feature .hb-pill { align-self: flex-start; background: #fff; color: var(--hb-ink); }
.hb-feature h3 { margin: 0; font: 600 1.9rem/1.05 var(--hb-display); letter-spacing: -1px; }
.hb-feature p { margin: 0; color: #dfe5ee; font-size: .9rem; max-width: 46ch; line-height: 1.5; }
.hb-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hb-line); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--hb-ink); }
.hb-tile .hb-tile-img { aspect-ratio: 4 / 3; overflow: hidden; background: #dde2ea; }
.hb-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.hb-tile div:last-child { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.hb-tile h3 { margin: 0; font-size: 1rem; }
.hb-tile p { margin: 0; color: var(--hb-muted); font-size: .82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hb-tile:hover h3 { color: var(--hb-orange-ink); }

/* ---------- Keluarga banner ---------- */
.hb-family { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: center; background: #d8e8e8; border-radius: var(--hb-r); padding: 30px 32px; margin-bottom: 20px; }
.hb-family::before { content: ''; position: absolute; width: 420px; height: 420px; right: 60px; top: -120px; border-radius: 50%; border: 1px solid #b6d0ce; box-shadow: 0 0 0 37px rgba(201,222,222,.5), 0 0 0 74px rgba(201,222,222,.3); z-index: -1; }
.hb-family .hb-pill { background: #fff; color: #1f5a57; }
.hb-family h2 { margin: 10px 0 8px; font: 600 2.2rem/1.04 var(--hb-display); letter-spacing: -1.2px; }
.hb-family h2 em { font-style: normal; color: #1f6f6a; }
.hb-family p { margin: 0 0 16px; color: #3b5856; max-width: 38ch; line-height: 1.5; }
.hb-stack { display: flex; justify-content: center; }
.hb-stack a { width: 31%; max-width: 150px; margin: 0 -14px; border-radius: 14px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 14px 34px rgba(19,35,58,.18); aspect-ratio: 2 / 3; background: #dde2ea; }
.hb-stack a:nth-child(1) { transform: rotate(-8deg) translateY(10px); }
.hb-stack a:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.hb-stack a:nth-child(3) { transform: rotate(8deg) translateY(10px); }
.hb-stack img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Genre tabs ---------- */
.hb-gtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.hb-gtabs::-webkit-scrollbar { display: none; }
.hb-gtab { white-space: nowrap; border: 1px solid #d6dbe3; background: #fff; color: #3a4554; border-radius: 10px; padding: 9px 15px; font: 600 .86rem var(--hb-body); cursor: pointer; min-height: 40px; }
.hb-gtab[aria-selected="true"] { background: #e3e9ff; border-color: #c6d2fb; color: #253aa3; }
.hb-gpanel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Tab panels are all visible without JS; the inline script adds .hb-js on
   <html> before the panels parse, so inactive ones hide with no flash. */
.hb-js .hb-panel:not(.is-on) { display: none; }
.hb-gpanel { scroll-margin-top: 120px; }

/* ---------- Bottom discovery ---------- */
.hb-disc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-bottom: 40px; }
.hb-box { background: #fff; border: 1px solid var(--hb-line); border-radius: 20px; padding: 22px; min-width: 0; }
.hb-box h2 { margin: 0 0 4px; font: 600 1.3rem var(--hb-display); letter-spacing: -.6px; }
.hb-box > p { margin: 0 0 12px; color: var(--hb-muted); font-size: .86rem; }
.hb-added { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #edf0f4; text-decoration: none; color: var(--hb-ink); }
.hb-added:first-of-type { border-top: 0; }
.hb-added img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #dde2ea; flex: none; }
.hb-added b { display: block; font-size: .92rem; }
.hb-added span { color: var(--hb-muted); font-size: .78rem; }
.hb-added:hover b { color: var(--hb-orange-ink); }
.hb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-tags a { border: 1px solid #dfe3ea; border-radius: 999px; padding: 8px 13px; font-size: .84rem; font-weight: 600; color: #2c3746; text-decoration: none; background: #f8f9fb; }
.hb-tags a:first-child { background: #fff1ec; border-color: #fbd3c6; color: var(--hb-orange-ink); }
.hb-tags a:hover { border-color: var(--hb-orange); }

/* ---------- Full list ---------- */
.hb-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 14px; }
.hb-grid-8 .hb-card-t { font-size: .86rem; }

/* ---------- FAQ + about ---------- */
.hb-info { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; padding: 32px 0 10px; border-top: 1px solid var(--hb-line); margin-bottom: 10px; }
.hb-info h2 { margin: 0 0 14px; font: 600 1.6rem var(--hb-display); letter-spacing: -.8px; }
.hb-faq details { border-bottom: 1px solid #dfe4eb; padding: 14px 0; }
.hb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.hb-faq summary::-webkit-details-marker { display: none; }
.hb-faq summary h3 { margin: 0; font: 600 1rem/1.4 var(--hb-body); color: var(--hb-ink); }
.hb-faq summary .hb-ic { transition: transform .2s; color: var(--hb-orange-ink); }
.hb-faq details[open] summary .hb-ic { transform: rotate(45deg); }
.hb-faq details > div { margin-top: 10px; color: #3e4856; font-size: .94rem; line-height: 1.7; }
.hb-faq details > div a { color: var(--hb-orange-ink); }
.hb-about { color: #3e4856; font-size: .95rem; line-height: 1.7; }
.hb-about a { color: var(--hb-orange-ink); }
.hb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hb-stats div { background: #fff; border: 1px solid var(--hb-line); border-radius: 16px; padding: 14px; }
.hb-stats b { display: block; font: 700 1.45rem var(--hb-display); letter-spacing: -.8px; color: var(--hb-ink); }
.hb-stats span { color: var(--hb-muted); font-size: .78rem; }

/* ---------- Ads keep breathing room ---------- */
body.hb .hb-ad { margin: 0 0 28px; }
body.hb .hb-ad:empty { display: none; }

/* ---------- Trailer modal ---------- */
body.hb .tf-trailer-modal { position: fixed; inset: 0; background: rgba(12,26,48,.78); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; backdrop-filter: blur(6px); }
body.hb .tf-trailer-modal.is-open { display: flex; }
body.hb .tf-trailer-modal-box { position: relative; width: 100%; max-width: 900px; background: #0a0f1a; border-radius: 18px; overflow: hidden; }
body.hb .tf-trailer-modal-title { padding: 14px 20px; padding-right: 100px; color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hb .tf-trailer-modal-close { position: absolute; top: 8px; right: 12px; background: rgba(255,255,255,.12); color: #fff; border: 0; padding: 7px 14px; border-radius: 999px; font-weight: 700; cursor: pointer; }
body.hb .tf-trailer-modal-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }

/* ---------- Accessibility mode (html.a11y-on, opt-in) ----------
   style.min.css forces the header, dropdowns and search suggest to #0e0e18
   and footer text/links to light colours (!important). Follow its dark
   high-contrast scheme there instead of fighting it, so nothing ends up
   dark-on-dark or light-on-white. */
html.a11y-on body.hb .header .logo { color: #fff; -webkit-text-fill-color: #fff; }
html.a11y-on body.hb .nav-links > a, html.a11y-on body.hb .nav-links .dropdown-toggle,
html.a11y-on body.hb .dropdown-menu a, html.a11y-on body.hb .koleksi-nav-link,
html.a11y-on body.hb .tg-nav-link { color: #fff !important; background: transparent; }
html.a11y-on body.hb .header-search { background: #1a1a2e; border-color: #8a8aa8; }
html.a11y-on body.hb .header-search input { color: #fff; }
html.a11y-on body.hb .header-search input::placeholder { color: #d3d3de; }
html.a11y-on body.hb .search-suggest { background: #0e0e18 !important; }
html.a11y-on body.hb .search-suggest .ss-title { color: #fff !important; }
html.a11y-on body.hb .search-suggest .ss-meta, html.a11y-on body.hb .search-suggest .ss-note { color: #d3d3de !important; }
html.a11y-on body.hb .footer { background: #0e0e18; border-color: #3a3a55; color: #fff; }
html.a11y-on body.hb .footer-brand .logo, html.a11y-on body.hb .footer-col h4 { color: #fff; -webkit-text-fill-color: #fff; }
html.a11y-on body.hb .footer-disclaimer, html.a11y-on body.hb .footer-a11y { background: #1a1a2e !important; border-color: #3a3a55 !important; }
html.a11y-on body.hb .footer-disclaimer .fd-text strong, html.a11y-on body.hb .footer-a11y strong { color: #fff; }
html.a11y-on body.hb .footer-social a { background: #1a1a2e !important; color: #fff !important; }
html.a11y-on body.hb .bottom-nav { background: #0e0e18 !important; }
html.a11y-on body.hb .bottom-nav-item { color: #fff !important; }

/* ---------- Footer (markup from includes/footer.php, restyled) ---------- */
body.hb .footer { background: #fff; border: 1px solid var(--hb-line); border-radius: 22px; color: var(--hb-ink); margin: 30px auto 0; max-width: 1304px; }
body.hb .footer-brand .logo { color: var(--hb-ink); -webkit-text-fill-color: var(--hb-ink); background: none; font-family: var(--hb-display); letter-spacing: -1px; }
body.hb .footer-col h4 { color: var(--hb-ink); text-transform: none; letter-spacing: -.2px; font-family: var(--hb-display); }
body.hb .footer-disclaimer { background: #f6f7f9 !important; border-color: var(--hb-line) !important; color: #3e4856 !important; }
body.hb .footer-disclaimer .fd-text strong { color: var(--hb-ink); }
body.hb .footer-disclaimer .fd-badge { color: #1d4ed8; background: #e8efff; border-color: #bfd0fb; }
body.hb .footer-disclaimer .fd-text a { color: var(--hb-orange-ink); background: #fff1ec; border-color: #fbd3c6; }
body.hb .footer-a11y { color: #3e4856; background: #eef2ff; border-color: #d6defa; }
body.hb .footer-a11y strong { color: var(--hb-ink); }
body.hb .footer-a11y a { color: var(--hb-orange-ink); }
body.hb .footer-social a { background: #f2f4f7 !important; color: var(--hb-ink) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hb-grid-8 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hb-rail { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
  .hb-dated { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  body.hb .container { padding: 10px 18px 28px; }
  .hb-hero-grid { grid-template-columns: 1fr; }
  .hb-side { grid-template-columns: 1.2fr 1fr; grid-template-rows: none; }
  .hb-duo, .hb-disc, .hb-info { grid-template-columns: 1fr; }
  .hb-info { gap: 28px; }
  .hb-rec { grid-template-columns: 1fr 1fr; }
  .hb-feature { grid-column: 1 / -1; }
  .hb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hb-grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hb-rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; }
  .hb-intro { align-items: flex-start; flex-direction: column; }
  .hb-intro-side { align-items: flex-start; }
}
@media (max-width: 640px) {
  html.hb-js .hb-dated:not(.is-open) .hb-drow:nth-child(n+9) { display: none; }
  html.hb-js .hb-dated-more { display: flex; justify-content: center; width: 100%; margin-top: 12px; background: #fff; color: var(--hb-ink); border: 1px solid var(--hb-line); }
  body.hb .container { padding: 8px 14px 96px; }
  body.hb .header { top: 6px; border-radius: 16px; padding: 10px 12px; flex-wrap: wrap; gap: 10px; }
  body.hb .header-search { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
  body.hb .header .logo { font-size: 1.45rem; }
  body.hb .header .logo::before { width: 28px; height: 28px; border-radius: 8px; }
  .hb-intro { margin-top: 2px; }
  .hb-intro h1 { font-size: 26px; letter-spacing: -1px; }
  .hb-lead { font-size: .93rem; }
  .hb-note { display: none; }
  .hb-hero { min-height: 480px; }
  .hb-hero::after { background: linear-gradient(0deg, rgba(13,24,40,.97) 0%, rgba(13,24,40,.7) 48%, rgba(13,24,40,.05) 80%); }
  .hb-hero-img { object-position: 65% center; }
  .hb-side { grid-template-columns: 1fr; }
  .hb-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-title { font-size: 22px; }
  .hb-grid, .hb-grid-8 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .hb-grid-8 .hb-card:nth-child(n+19) { display: none; }
  .hb-rail { grid-auto-columns: 40%; gap: 12px; }
  .hb-rank-n { font-size: 54px; bottom: 50px; }
  .hb-card-t { font-size: .86rem; }
  .hb-dated { grid-template-columns: 1fr; }
  .hb-rec { grid-template-columns: 1fr; }
  .hb-feature { min-height: 260px; }
  .hb-tile { flex-direction: row; }
  .hb-tile .hb-tile-img { aspect-ratio: auto; width: 40%; min-height: 128px; flex: none; }
  .hb-tile div:last-child { padding: 12px 14px; min-width: 0; }
  .hb-family { grid-template-columns: 1fr; padding: 24px 20px; }
  .hb-family h2 { font-size: 1.8rem; }
  .hb-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hb-stats b { font-size: 1.15rem; }
}
/* Top 20 hover-expand panel (#hbPop, positioned by JS over the hovered
   poster; desktop + mouse only). */
.hb-pop { position: absolute; z-index: 60; display: block; overflow: hidden; border-radius: 16px; background: #0d1626; color: #fff; text-decoration: none; box-shadow: 0 18px 50px rgba(13,22,38,.45); opacity: 0; visibility: hidden; transform: scale(.94); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; pointer-events: none; }
.hb-pop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; pointer-events: auto; }
.hb-pop-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.hb-pop.no-bd .hb-pop-bg { filter: blur(18px) brightness(.6); transform: scale(1.15); }
.hb-pop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,24,.35) 0%, rgba(10,14,24,.72) 40%, rgba(10,14,24,.8) 100%); }
.hb-pop-t, .hb-pop-m, .hb-pop-s { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hb-pop-poster { position: absolute; z-index: 2; left: 14px; top: 14px; bottom: 14px; height: calc(100% - 28px); width: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.hb-pop-body { position: absolute; z-index: 2; top: 16px; bottom: 16px; right: 18px; left: calc(32px + (var(--pop-h, 300px) - 28px) * 2 / 3); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hb-pop-t { font: 700 1.25rem/1.15 var(--hb-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-pop-m { font-size: .8rem; font-weight: 600; color: #ffd34d; }
.hb-pop-s { font-size: .82rem; line-height: 1.5; color: #d9e0ea; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.hb-pop-tr { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--hb-orange-ink); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; transition: transform .15s; }
.hb-pop-tr:hover { transform: scale(1.05); }
.hb-pop-tr[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hb-pop, .hb-pop.is-on { transition: none; transform: none; } }

/* Hover for the pills that had none (Top 20 / mood tabs, genre filter, skin
   switch, dark button, the highlighted quick chip, footer DMCA link).
   Pointer devices only, so a tap on a phone does not leave a stuck state. */
.hb-tab, .hb-gtab, .hb-filter button, .hb-skin button, .hb-btn-dark, .hb-chip { transition: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s, filter .15s; }
@media (hover: hover) {
  .hb-tab:not([aria-selected="true"]):hover { background: rgba(255,255,255,.75); color: var(--hb-ink); }
  .hb-gtab:not([aria-selected="true"]):hover, .hb-filter button:not([aria-pressed="true"]):hover { border-color: var(--hb-orange); color: var(--hb-orange-ink); }
  .hb-skin button:not([aria-pressed="true"]):hover { background: #f2f4f7; color: var(--hb-ink); }
  .hb-btn-dark:hover, .hb-chip.is-hot:hover { filter: brightness(1.2); }
  body.hb .footer-disclaimer .fd-text a:hover { background: #fde2d8; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-live-dot::before { animation: none; }
  .hb-poster img, .hb-faq summary .hb-ic { transition: none; }
}