/* Tampilan detail ala TikTok untuk layar mobile (potret). Desktop tidak berubah. */
.kd-sheet.kd-own { display: none; }
#kd-m, .kd-backdrop, .kd-sheet-bar { display: none; }

@media (max-width: 767px) {
  :root { --kd-nav: 64px; }
  html, body { overflow: hidden; height: 100%; overscroll-behavior: none; }
  footer { display: none !important; }

  /* header transparan di atas video */
  header { background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent) !important; backdrop-filter: none !important; box-shadow: none !important; }
  header > div { height: 3.5rem !important; }
  header input, header .relative.hidden { display: none !important; }

  main { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
  main > div > section:first-child { padding: 0 !important; height: 100dvh; position: relative; max-width: none; }
  main > div > section:first-child > .grid { display: block; height: 100%; gap: 0; }
  main > div > section:first-child > .grid > div:first-child { height: 100%; }

  /* pemutar memenuhi layar */
  #player-container { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; background: #000; touch-action: none; }
  #pl-video, #pl-img { width: 100%; height: 100%; }
  #pl-topbar { display: none !important; }
  /* info & tombol aksi asli disembunyikan; fungsinya dipakai lewat rail di bawah */
  main > div > section:first-child > .grid > div:first-child > div:not(#player-container) { display: none !important; }

  /* overlay */
  #kd-m { display: block; position: absolute; inset: 0; z-index: 20; pointer-events: none; color: #e1e2ec; }
  #kd-m > * { pointer-events: auto; }
  #kd-m .kd-shade { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); pointer-events: none; }
  #kd-m .kd-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 9999px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
  #kd-m .kd-play.show { opacity: 1; }
  #kd-m .kd-play span { font-size: 48px; }

  #kd-m .kd-rail { position: absolute; right: 8px; bottom: calc(var(--kd-nav) + 22px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
  #kd-m .kd-rail button { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: #fff; font: 600 11px/1.2 'Plus Jakarta Sans', sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.8); min-width: 48px; }
  #kd-m .kd-rail button .ic { width: 44px; height: 44px; border-radius: 9999px; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
  #kd-m .kd-rail button .ic span { font-size: 26px; }
  #kd-m .kd-rail button.on .ic span { color: #ff5167; }

  #kd-m .kd-info { position: absolute; left: 14px; right: 82px; bottom: calc(var(--kd-nav) + 22px); text-shadow: 0 1px 4px rgba(0,0,0,.9); }
  #kd-m .kd-info .t { font: 800 18px/1.25 'Plus Jakarta Sans', sans-serif; }
  #kd-m .kd-info .m { margin-top: 4px; font: 600 12px/1.3 'Plus Jakarta Sans', sans-serif; color: #ffb955; }
  #kd-m .kd-info .d { margin-top: 6px; font: 400 13px/1.4 'Plus Jakarta Sans', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #kd-m .kd-info .more { margin-top: 2px; font: 700 12px 'Plus Jakarta Sans', sans-serif; background: none; border: 0; color: #fff; padding: 2px 0; }

  #kd-m .kd-prog { position: absolute; left: 0; right: 0; bottom: var(--kd-nav); height: 22px; display: flex; align-items: flex-end; touch-action: none; }
  #kd-m .kd-prog .bar { width: 100%; height: 3px; background: rgba(255,255,255,.28); }
  #kd-m .kd-prog .fill { height: 100%; width: 0; background: #ff5167; }
  #kd-m .kd-prog.drag .bar { height: 8px; }

  /* mode layar penuh: hanya video + bilah progres */
  #kd-m .kd-exit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border-radius: 9999px; border: 0; background: rgba(0,0,0,.5); color: #fff; display: none; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .kd-clean #kd-m .kd-exit { display: flex; }
  .kd-clean #kd-m .kd-exit.show { opacity: 1; pointer-events: auto; }
  .kd-clean header, .kd-clean nav.fixed.bottom-0, .kd-clean #kd-m .kd-rail, .kd-clean #kd-m .kd-info, .kd-clean #kd-m .kd-shade { display: none !important; }
  .kd-clean #kd-m .kd-prog { bottom: env(safe-area-inset-bottom, 0px); }

  /* sheet (daftar episode, detail, pengaturan) */
  .kd-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s; display: block; }
  .kd-backdrop.open { opacity: 1; pointer-events: auto; }
  .kd-sheet { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 78dvh; overflow-y: auto; background: #191b23; border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .3s ease; padding: 0 16px calc(var(--kd-nav) / 2 + 16px) !important; margin: 0 !important; display: block !important; box-shadow: 0 -10px 40px rgba(0,0,0,.6); }
  .kd-sheet.open { transform: translateY(0); }
  .kd-sheet-bar { display: flex; position: sticky; top: 0; z-index: 2; background: #191b23; align-items: center; justify-content: space-between; padding: 14px 0 10px; font: 700 16px 'Plus Jakarta Sans', sans-serif; color: #e1e2ec; }
  .kd-sheet-bar button { background: #272a32; color: #e1e2ec; border: 0; border-radius: 9999px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
  .kd-sheet .kd-body > section { padding-left: 0 !important; padding-right: 0 !important; padding-top: 16px !important; padding-bottom: 8px !important; }
  .kd-sheet .kd-menu { display: flex; flex-direction: column; gap: 8px; }
  .kd-sheet .kd-menu button { display: flex; align-items: center; gap: 12px; background: #272a32; color: #e1e2ec; border: 0; border-radius: 14px; padding: 14px 16px; font: 600 14px 'Plus Jakarta Sans', sans-serif; text-align: left; }
  .kd-sheet [id^="ep-panel-"] { max-height: none !important; }

  /* animasi geser episode */
  @keyframes kd-up { from { transform: translateY(40px); opacity: .2; } to { transform: none; opacity: 1; } }
  @keyframes kd-down { from { transform: translateY(-40px); opacity: .2; } to { transform: none; opacity: 1; } }
  #pl-video.kd-up { animation: kd-up .28s ease; }
  #pl-video.kd-down { animation: kd-down .28s ease; }
}