/* Koberplay: the Kober Mie look (kobermie.com) over the shared Tanah Lima styles.
   Cream pages, Kober red, Fredoka headings with Poppins text; the video player stays dark.
   Loaded after app.css on koberplay.com only. */
:root, :root[data-tema] {
  --bg: #fffcf5;
  --bg-rgb: 255, 252, 245;
  --bg-image: none;
  --surface: #ffffff;
  --surface-2: #f5eee2;
  --hover: #ebe1d0;
  --line: #ece1cf;
  --text: #262626;
  --soft: #4b4b4b;
  --muted: #737373;
  --faint: #a39d93;
  --accent: #ec1313;
  --accent-soft: rgba(236, 19, 19, .1);
  --accent-text: #d40f0f;
  --btn: #ec1313;
  --btn-hover: #c80e0e;
  --btn-ink: #ffffff;
  --gold: #df7a00;
  --ok: #15994b;
  --card-radius: 14px;
  --radius: 18px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Poppins", system-ui, sans-serif;
  --kb-red: #ec1313;
  --kb-red-dark: #a80c0c;
  --kb-gold: #ffc21a;
  --kb-ink: #262626;
  color-scheme: light;
}
body { font-size: 14.5px; }
h1, h2, h3, .page-title { font-family: var(--display); font-weight: 600; letter-spacing: 0; }

/* ---------- Header & tab bar: white, like kobermie.com ---------- */
.top, .top.solid { background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-bottom: 0; box-shadow: 0 2px 14px rgba(70, 25, 0, .07); }
.logo img { display: block; height: 40px; width: auto; }
@media (min-width: 768px) { .logo img { height: 46px; } }
.nav { color: var(--soft); font-weight: 500; font-size: 15px; }
.nav a.on, .nav a:hover { color: var(--kb-red); }
.icon-btn:hover { background: rgba(38, 38, 38, .06); }
.tabs { background: rgba(255, 255, 255, .97); box-shadow: 0 -2px 14px rgba(70, 25, 0, .06); }
.tabs a { color: #a19a90; font-weight: 500; }
.tabs a.on { color: var(--kb-red); }

/* ---------- Buttons, chips, cards ---------- */
.btn { font-weight: 600; }
.btn.primary { box-shadow: 0 6px 16px rgba(236, 19, 19, .25); }
.btn.ghost { background: rgba(38, 38, 38, .07); color: var(--text); backdrop-filter: none; }
.btn.ghost:hover { background: rgba(38, 38, 38, .12); }
.chip { background: rgba(38, 38, 38, .06); color: var(--soft); font-weight: 500; }
button.chip.on, .ranges button.on, .seg button.on { background: var(--kb-red); color: #fff; }
.poster { box-shadow: 0 6px 16px rgba(90, 30, 0, .12); }
.card:hover .poster { box-shadow: 0 16px 30px rgba(120, 30, 0, .22); }
.poster .badge { background: rgba(255, 255, 255, .92); color: var(--text); }
/* "BARU" sits bottom-right: the posters carry their title at the top. */
.poster .badge.new { top: auto; left: auto; right: 8px; bottom: 8px; background: var(--kb-red); color: #fff; }
.card h3 { font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.row { margin-top: 30px; }
.row-head h2 { font-family: var(--display); font-weight: 600; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.row-head h2::before { content: ""; width: 6px; height: 18px; border-radius: 3px; background: var(--kb-red); }
.row-head a { color: var(--kb-red); font-weight: 500; }
.searchbox { background: #fff; box-shadow: 0 2px 10px rgba(70, 25, 0, .05); }
.detail-bg { opacity: .32; }
.detail-meta b { color: var(--kb-red); }
.tagline { color: var(--kb-red-dark); font-family: var(--display); font-weight: 600; font-size: 17px; }
.ep { font-family: var(--display); font-weight: 600; }
.sheet { box-shadow: 0 -10px 30px rgba(60, 20, 0, .15); }

/* Kober instead of the generic icons: hints, empty pages, the lock screen, the end card. */
.hint svg.i { display: none; }
.hint::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; }
.empty { border: 0; background: #fff; box-shadow: 0 8px 24px rgba(70, 25, 0, .08); }
.empty svg.i { display: none; }
.empty::before { content: ""; display: block; width: 120px; height: 120px; margin: 0 auto 12px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; animation: kb-float 3.4s ease-in-out infinite; }
.gate-box .lock { width: 112px; height: 112px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; border-radius: 0; animation: kb-float 3.4s ease-in-out infinite; }
.gate-box .lock svg { display: none; }
.endcard h3::before { content: ""; display: block; width: 92px; height: 92px; margin: 0 auto 10px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; }
.footer { color: var(--muted); }
.footer nav a { color: var(--soft); }
.kb-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; font-weight: 500; color: var(--soft); }
.kb-foot img { width: 34px; height: 34px; }
.kb-foot a { color: var(--kb-red); font-weight: 600; }

/* ---------- The player stays dark (video), whatever the page colours are ---------- */
.player {
  --bg: #141414; --bg-rgb: 20, 20, 20; --surface: #1c1c1c; --surface-2: #2a2a2a; --hover: #3a3a3a; --line: #333333;
  --text: #ffffff; --soft: #d2d2d2; --muted: #a3a3a3; --faint: #6d6d6d; --accent-text: #ff6b6b; --gold: #ffc21a;
  color: var(--text); color-scheme: dark;
}
.player .btn.ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.player .chip { background: rgba(255, 255, 255, .12); color: var(--soft); }
.player .poster .badge { background: rgba(20, 20, 20, .78); color: #fff; }
.player .tagline { color: var(--kb-gold); }

/* ---------- Home: Kober presents the featured dramas on a red stage ---------- */
.kb-hero { position: relative; padding-top: var(--header-h); }
.kb-stage {
  --rx: 34%; --ry: 62%;
  position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y;
  height: clamp(370px, 108vw, 480px);
  background: radial-gradient(120% 90% at 30% 40%, #ff5b3a 0%, #ec1313 45%, #a10b0b 100%);
  border-radius: 0 0 28px 28px;
}
.kb-rays {
  position: absolute; z-index: -1; left: calc(var(--rx) - 110vmax); top: calc(var(--ry) - 110vmax); width: 220vmax; height: 220vmax;
  background: repeating-conic-gradient(rgba(255, 255, 255, .1) 0deg 8deg, rgba(255, 255, 255, 0) 8deg 16deg);
  animation: kb-spin 90s linear infinite;
}
.kb-mascot { position: absolute; z-index: 2; left: -9%; bottom: -5%; height: 72%; aspect-ratio: 916 / 749; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kb-mascot img { width: 100%; height: 100%; transform-origin: 50% 100%; filter: drop-shadow(0 14px 22px rgba(90, 0, 0, .35));
  animation: kb-rise .9s cubic-bezier(.2, 1.3, .4, 1) both, kb-float 3.6s ease-in-out .9s infinite; }
.kb-mascot.hop img { animation: kb-hop .6s cubic-bezier(.3, 1.5, .5, 1), kb-float 3.6s ease-in-out .6s infinite; }
.kb-mascot:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 30px; }
.kb-bubble {
  position: absolute; z-index: 4; top: 16px; right: 4%; max-width: min(60%, 320px); margin: 0; padding: 10px 14px;
  border-radius: 18px; background: #fff; color: var(--kb-ink); font: 600 15px/1.3 var(--display);
  box-shadow: 0 10px 24px rgba(90, 0, 0, .3); transform-origin: 20% 120%;
}
.kb-bubble b { color: var(--kb-red); font-weight: 700; }
.kb-bubble::after { content: ""; position: absolute; left: 20px; bottom: -13px; width: 26px; height: 15px; background: #fff; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.kb-bubble.pop { animation: kb-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.kb-posters { position: absolute; z-index: 3; right: 5%; bottom: 9%; width: 38%; max-width: 240px; aspect-ratio: 3 / 4; transform: rotate(4deg); }
.kb-poster {
  position: absolute; inset: 0; overflow: hidden; border: 4px solid #fff; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 40px rgba(90, 0, 0, .45); opacity: 0; transform: translateX(22px) rotate(4deg) scale(.95);
  transition: opacity .45s, transform .45s; pointer-events: none;
}
.kb-poster.on { opacity: 1; transform: none; pointer-events: auto; }
.kb-poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.kb-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font: 700 18px/1.15 var(--display); color: #fff; background: linear-gradient(160deg, #ff6a3d, #b30d0d); }
.kb-play { position: absolute; right: 9px; bottom: 9px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--kb-red); color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.kb-play svg.i { width: 17px; height: 17px; margin-left: 2px; }
.kb-dots { position: absolute; z-index: 4; right: 5%; bottom: 2.6%; width: 38%; max-width: 240px; display: flex; justify-content: center; gap: 6px; }
.kb-dots button { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .45); transition: width .3s, background .3s; }
.kb-dots button.on { width: 24px; background: #fff; }
.kb-info { position: relative; z-index: 3; padding: 18px var(--gutter) 0; }
.kb-slide { display: none; }
.kb-slide.on { display: block; animation: kb-fade .45s ease; }
.kb-info .chip { background: var(--accent-soft); color: var(--accent-text); }
.kb-title { margin: 8px 0 4px; font: 700 clamp(26px, 6.8vw, 32px)/1.1 var(--display); color: var(--kb-ink); text-wrap: balance; }
.kb-tagline { margin: 0 0 6px; color: var(--soft); font-weight: 500; }
.kb-meta { margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
.kb-meta b { color: var(--kb-red); font-weight: 600; }
.kb-actions { display: flex; gap: 10px; }
.kb-actions .btn { flex: 1; max-width: 220px; }
@media (min-width: 600px) and (max-width: 899px) { .kb-mascot { left: 3%; } }

@media (min-width: 900px) {
  .kb-stage { --rx: 58%; --ry: 70%; height: min(80vh, 620px); min-height: 520px; border-radius: 0 0 44px 44px; }
  .kb-mascot { left: 37%; height: 88%; bottom: -4%; }
  .kb-posters, .kb-dots { right: var(--gutter); width: clamp(190px, 17vw, 250px); max-width: none; }
  .kb-posters { bottom: 14%; }
  .kb-dots { bottom: 5%; }
  .kb-bubble { top: 26px; right: calc(var(--gutter) + 10px); max-width: 320px; font-size: 17px; padding: 12px 18px; }
  .kb-bubble::after { left: 26px; }
  .kb-info { position: absolute; left: var(--gutter); bottom: 72px; width: min(36vw, 500px); padding: 0; color: #fff; }
  .kb-info .chip { background: rgba(255, 255, 255, .18); color: #fff; }
  .kb-title { color: #fff; font-size: clamp(38px, 4vw, 56px); text-shadow: 0 3px 0 rgba(120, 0, 0, .35); }
  .kb-tagline { color: #ffe4dc; font-size: 17px; }
  .kb-meta { color: #ffd3c9; }
  .kb-meta b { color: var(--kb-gold); }
  .kb-actions .btn.primary { background: #fff; color: var(--kb-red); box-shadow: 0 8px 20px rgba(90, 0, 0, .3); }
  .kb-actions .btn.primary:hover { background: var(--kb-gold); color: var(--kb-ink); }
  .kb-actions .btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; }
  .kb-actions .btn.ghost:hover { background: rgba(255, 255, 255, .26); }
}

/* Kober peeks up from behind the tab bar once the stage has scrolled away (home only). */
.kb-buddy { position: fixed; z-index: 39; right: 6px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) - 26px); width: 104px; transform: translateY(130%); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.kb-buddy.on { transform: none; }
.kb-buddy button { display: block; width: 100%; padding: 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.kb-buddy img { width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 -2px 10px rgba(90, 0, 0, .25)); animation: kb-float 3.2s ease-in-out infinite; }
.kb-buddy.hop img { animation: kb-hop .6s cubic-bezier(.3, 1.5, .5, 1); }
.kb-tip {
  position: absolute; right: 78px; bottom: 58px; width: max-content; max-width: 200px; padding: 8px 12px;
  border-radius: 16px 16px 4px 16px; background: #fff; color: var(--kb-ink); font: 600 13.5px/1.3 var(--display);
  box-shadow: 0 8px 22px rgba(60, 20, 0, .2); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: right bottom; transition: opacity .25s, transform .25s;
}
.kb-tip b { color: var(--kb-red); }
.kb-buddy.talk .kb-tip { opacity: 1; transform: none; }
@media (min-width: 768px) { .kb-buddy { right: 20px; bottom: -22px; width: 140px; } .kb-tip { right: 110px; bottom: 80px; } }

@keyframes kb-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1.2deg); } }
@keyframes kb-rise { from { transform: translateY(45%) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kb-hop { 0% { transform: none; } 30% { transform: translateY(-24px) scale(1.04, .97); } 62% { transform: translateY(0) scale(.98, 1.02); } 100% { transform: none; } }
@keyframes kb-pop { from { transform: scale(.7); opacity: 0; } }
@keyframes kb-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes kb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kb-rays, .kb-mascot img, .kb-buddy img, .empty::before, .gate-box .lock { animation: none !important; }
}