/* =================================================================
   Medialis v3 — Video Story  v13 (Instagram Reels exact)
   Struktur popup (z dari bawah ke atas):
     z:1   .mvs-popup__video-wrap  — iframe fullscreen
     z:5   .mvs-popup__grad-*      — gradien dekorasi, pointer-events:none
     z:10  .mvs-popup__topbar      — close + counter
     z:10  .mvs-popup__sidebar     — like / komentar / share
     z:20  .mvs-popup__sheet       — info panel dari bawah (sheet)
   ================================================================= */

/* ── Variables ───────────────────────────────────────────────── */
:root {
  --mvs-accent : var(--cp, #e63946);
  --mvs-ease   : cubic-bezier(.4,0,.2,1);
  --mvs-r-card : 10px;
  --mvs-r-popup: 14px;
  --mvs-peek   : 190px;   /* tinggi sheet saat mode peek */
}

/* ================================================================
   HALAMAN VIDEO STORY
   ================================================================ */
.mvs-page { background: var(--cb, #f5f5f5); min-height: 80vh; }

.mvs-page__hero {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  color: #fff;
  padding: 40px 20px 32px;
}
.mvs-page__hero-inner { max-width: 960px; margin: 0 auto; }
.mvs-page__title {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(22px, 4vw, 34px); font-weight: 900;
  margin: 0 0 8px; font-family: var(--fd, Georgia, serif);
}
.mvs-page__desc { font-size: 14px; opacity: .7; margin: 0; }
.mvs-page__wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }

/* Filter tabs */
.mvs-page__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.mvs-filter-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: 100px;
  border: 1.5px solid var(--cbdr, #ddd);
  background: transparent; font-size: 13px; font-weight: 600;
  color: var(--ctxt, #333); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: all .2s var(--mvs-ease);
}
.mvs-filter-tab--active,
.mvs-filter-tab:hover {
  background: var(--mvs-accent); border-color: var(--mvs-accent); color: #fff;
}
.mvs-filter-tab__count {
  background: rgba(0,0,0,.15); border-radius: 100px; padding: 1px 6px; font-size: 11px;
}

.mvs-page__empty {
  text-align: center; padding: 60px 20px; color: var(--cmut, #888);
  display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px;
}
.mvs-page__loadmore-wrap { text-align: center; margin-top: 32px; }
.mvs-page__loadmore {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 28px; border-radius: 100px;
  border: 1.5px solid var(--cbdr, #ddd); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--ctxt, #333);
  cursor: pointer; transition: all .2s var(--mvs-ease);
}
.mvs-page__loadmore:hover { border-color: var(--mvs-accent); color: var(--mvs-accent); }
.mvs-page__loadmore.mvs-loading { opacity: .6; pointer-events: none; }

/* ================================================================
   GRID KARTU
   ================================================================ */
.mvs-grid          { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mvs-grid--page    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mvs-grid--sm      { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .mvs-grid--page { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mvs-grid--page { grid-template-columns: repeat(4, 1fr); } }

.mvs-card {
  display: flex; flex-direction: column;
  background: var(--cbg, #fff); border-radius: var(--mvs-r-card);
  overflow: hidden; border: none; padding: 0;
  cursor: pointer; text-align: left;
  transition: transform .2s var(--mvs-ease), box-shadow .2s var(--mvs-ease);
  -webkit-tap-highlight-color: transparent;
}
.mvs-card:hover  { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.15); }
.mvs-card:active { transform: scale(.97); }

.mvs-card__thumb {
  position: relative; width: 100%; aspect-ratio: 9/16;
  background: #1e1e2e; overflow: hidden;
  border-radius: var(--mvs-r-card) var(--mvs-r-card) 0 0;
}
.mvs-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s;
}
.mvs-card:hover .mvs-card__thumb img { transform: scale(1.04); }
.mvs-card__thumb-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.mvs-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s var(--mvs-ease);
}
.mvs-card:hover .mvs-card__overlay,
.mvs-card:focus .mvs-card__overlay { opacity: 1; }
.mvs-card__play-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.5);
}

.mvs-card__plat {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 700; padding: 3px 7px;
  border-radius: 4px; color: #fff; line-height: 1.4;
  backdrop-filter: blur(4px);
}
.mvs-card__plat--yt { background: rgba(255,0,0,.8); }
.mvs-card__plat--ig { background: rgba(193,53,132,.8); }
.mvs-card__plat--tt { background: rgba(0,0,0,.8); }
.mvs-card__plat--fb { background: rgba(24,119,242,.8); }

.mvs-card__body {
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.mvs-card__cat  {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mvs-accent);
}
.mvs-card__title {
  font-size: 13px; font-weight: 700; line-height: 1.4;
  color: var(--ctxt, #222); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mvs-card__date { font-size: 11px; color: var(--cmut, #888); margin-top: 2px; }

/* ================================================================
   POPUP — Instagram Reels (portrait fullscreen)
   ================================================================ */
.mvs-popup {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: stretch; justify-content: center;
}
.mvs-popup.is-open { display: flex; animation: mvs-fadein .18s ease forwards; }
@keyframes mvs-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Backdrop */
.mvs-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.94); backdrop-filter: blur(8px);
}

/* Stage */
.mvs-popup__stage {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; height: 100dvh;
  background: #000; overflow: hidden;
}
@media (min-width: 520px) {
  .mvs-popup__stage {
    max-width: 400px; margin: auto;
    height: min(96dvh, 820px);
    border-radius: var(--mvs-r-popup);
    box-shadow: 0 28px 90px rgba(0,0,0,.8);
  }
  .mvs-popup__backdrop { cursor: pointer; }
}

/* ── ① VIDEO fullscreen ────────────────────────────────────── */
/*
 * overflow:hidden — memotong header "KOMPASTV" dan footer
 * "Lihat lainnya di Instagram" yang selalu dirender oleh embed platform.
 *
 * Instagram embed: iframe-nya sendiri render header akun (~60px) dan
 * footer (~55px). Kita crop dengan menggeser iframe naik dan melebarkan
 * tingginya supaya bagian tengah (video actual) mengisi penuh.
 *
 * Nilai crop dikalibrasi dari screenshot nyata:
 *   .is-instagram → crop top ~13%, total height ~126%
 *   YouTube       → fullscreen bersih, tidak perlu crop
 */
.mvs-popup__video-wrap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: #000; z-index: 1;
  overflow: hidden;
}
.mvs-popup__video-wrap iframe {
  position: absolute;
  left: 0; width: 100%;
  top: 0; height: 100%;
  border: none;
}

/* Instagram: crop header akun + footer "Lihat di Instagram" */
.mvs-popup__video-wrap.is-instagram iframe {
  top: -13%;
  height: 126%;
}

/* YouTube Shorts juga punya padding atas — crop sedikit */
.mvs-popup__video-wrap.is-youtube iframe {
  top: -6%;
  height: 112%;
}

/* TikTok embed punya padding UI kecil */
.mvs-popup__video-wrap.is-tiktok iframe {
  top: -4%;
  height: 108%;
}

/* ── ② Gradien dekorasi ─────────────────────────────────────── */
.mvs-popup__grad-top {
  position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 5;
  background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, transparent 100%);
  pointer-events: none;
}
.mvs-popup__grad-bot {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--mvs-peek, 190px) + 80px); z-index: 5;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 55%, transparent 100%);
  pointer-events: none;
}

/* ── ③ Topbar ───────────────────────────────────────────────── */
.mvs-popup__topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 0;
  pointer-events: none;
}
.mvs-popup__topbar > * { pointer-events: auto; }

.mvs-popup__close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .18s, transform .18s;
}
.mvs-popup__close:hover { background: rgba(0,0,0,.8); transform: scale(1.1); }

.mvs-popup__counter {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.35); padding: 4px 10px;
  border-radius: 100px; backdrop-filter: blur(4px);
}

/* ── ④ Sidebar kanan ────────────────────────────────────────── */
/*
 * Sidebar berada di zona aman — di atas sheet (info panel).
 * bottom = tinggi sheet peek + gap kecil.
 * Saat sheet expanded, sidebar geser naik via JS class .sidebar-up
 */
.mvs-popup__sidebar {
  position: absolute; right: 12px; z-index: 10;
  bottom: calc(var(--mvs-peek, 190px) + 16px);
  display: flex; flex-direction: column; gap: 22px; align-items: center;
  transition: bottom .32s var(--mvs-ease);
}
/* Saat sheet expanded, sidebar naik supaya tidak ketutupan */
.mvs-popup__stage.sheet-expanded .mvs-popup__sidebar {
  bottom: calc(72% + 16px);
}

.mvs-popup__side-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; color: #fff; cursor: pointer; padding: 0;
  text-decoration: none;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.8));
  transition: transform .18s var(--mvs-ease);
  -webkit-tap-highlight-color: transparent;
}
.mvs-popup__side-btn:hover { transform: scale(1.15); }
.mvs-popup__side-btn svg  { display: block; }
.mvs-popup__side-btn.liked svg { fill: #ff3b30; stroke: #ff3b30; }
.mvs-popup__side-label {
  font-size: 11px; font-weight: 700; color: #fff; line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  min-height: 13px; /* jaga tinggi tetap stabil saat teks kosong */
}

/* ── ⑤ Sheet info dari bawah ────────────────────────────────── */
/*
 * Mode peek  : tinggi = --mvs-peek, overflow hidden, hanya tampilkan
 *              author + judul + hint "ketuk untuk baca"
 * Mode expanded: tinggi 72%, overflow-y scroll, artikel penuh tampil
 *
 * Cara collapse: tap di artikel, swipe bawah, atau tap handle
 * Cara expand  : tap judul / hint / handle, swipe atas
 */
.mvs-popup__sheet {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  height: var(--mvs-peek, 190px);
  overflow: hidden;
  transition: height .32s var(--mvs-ease);
  /* Pastikan sheet tidak menerima pointer saat area di atas sheet diklik */
  pointer-events: auto;
}
.mvs-popup__sheet.expanded {
  height: 72%;
}
.mvs-popup__sheet.expanded .mvs-popup__sheet-body {
  overflow-y: auto;
}

/* Gradien di belakang teks sheet */
.mvs-popup__sheet-grad {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.55) 20%,
    rgba(0,0,0,.90) 50%,
    rgba(0,0,0,.98) 100%
  );
}

/* Scrollable body */
.mvs-popup__sheet-body {
  position: relative; z-index: 1;
  height: 100%; overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 32px;
  display: flex; flex-direction: column; gap: 0;
  box-sizing: border-box;
}

/* Drag handle */
.mvs-popup__handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.3);
  margin: 0 auto 14px;
  flex-shrink: 0; cursor: pointer;
  transition: background .2s;
}
.mvs-popup__handle:hover { background: rgba(255,255,255,.6); }

/* Author row */
.mvs-popup__author-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; flex-shrink: 0;
}
.mvs-popup__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mvs-accent);
  border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; overflow: hidden;
  font-size: 14px; font-weight: 700;
}
.mvs-popup__avatar img { width: 100%; height: 100%; object-fit: cover; }

.mvs-popup__author-meta { flex: 1; min-width: 0; }
.mvs-popup__channel {
  font-size: 13px; font-weight: 700; color: #fff; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 4px;
}

/* Centang biru verifikasi */
.mvs-popup__verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #1877f2; flex-shrink: 0;
}
.mvs-popup__verified svg { width: 8px; height: 8px; }

.mvs-popup__date {
  font-size: 11px; color: rgba(255,255,255,.6); margin: 2px 0 0;
}

/* Platform pill */
.mvs-popup__plat-pill {
  font-size: 10px; font-weight: 700; padding: 4px 9px;
  border-radius: 100px; color: #fff; flex-shrink: 0;
  backdrop-filter: blur(4px); white-space: nowrap;
}
.mvs-popup__plat-pill--yt  { background: rgba(255,0,0,.8); }
.mvs-popup__plat-pill--ig  { background: rgba(193,53,132,.8); }
.mvs-popup__plat-pill--tt  { background: rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.2); }
.mvs-popup__plat-pill--fb  { background: rgba(24,119,242,.8); }
.mvs-popup__plat-pill--def { background: rgba(255,255,255,.15); }

/* Judul */
.mvs-popup__title {
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.4;
  margin: 0 0 8px; font-family: var(--fd, Georgia, serif);
  text-shadow: 0 1px 6px rgba(0,0,0,.6); flex-shrink: 0;
  cursor: pointer;
}

/* Peek hint */
.mvs-popup__peek-hint {
  font-size: 12px; color: rgba(255,255,255,.5); margin: 0;
  flex-shrink: 0; cursor: pointer;
}
.mvs-popup__sheet.expanded .mvs-popup__peek-hint { display: none; }

/* Artikel — hanya tampil saat expanded */
.mvs-popup__article { display: none; margin: 10px 0 0; flex: 1; }
.mvs-popup__sheet.expanded .mvs-popup__article { display: block; }
.mvs-popup__article p {
  font-size: 13px; line-height: 1.75;
  color: rgba(255,255,255,.88); margin: 0 0 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  /* Teks bisa diseleksi/copy */
  user-select: text; -webkit-user-select: text;
}
.mvs-popup__article p:last-child { margin-bottom: 0; }

/* Readmore — hanya tampil saat expanded */
.mvs-popup__readmore {
  display: none; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
  margin-top: 18px; padding: 10px 20px;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 100px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
  transition: background .18s, border-color .18s;
  flex-shrink: 0; align-self: flex-start;
}
.mvs-popup__sheet.expanded .mvs-popup__readmore { display: inline-flex; }
.mvs-popup__readmore:hover {
  background: var(--mvs-accent); border-color: var(--mvs-accent);
}

/* ── Loading spinner ────────────────────────────────────────── */
.mvs-popup__loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #000; transition: opacity .3s;
}
.mvs-popup__loading.hidden { opacity: 0; pointer-events: none; }
.mvs-popup__spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #fff; border-radius: 50%;
  animation: mvs-spin .8s linear infinite;
}
@keyframes mvs-spin { to { transform: rotate(360deg); } }

/* ── Nav arrows (desktop) ───────────────────────────────────── */
.mvs-popup__nav {
  position: absolute; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .18s, transform .18s;
}
.mvs-popup__nav:hover { background: rgba(255,255,255,.28); transform: scale(1.08); }
.mvs-popup__nav--prev { top: 40%; left: 8px;  transform: translateY(-50%); }
.mvs-popup__nav--next { top: 40%; right: 8px; transform: translateY(-50%); }
.mvs-popup__nav--prev:hover { transform: translateY(-50%) scale(1.08); }
.mvs-popup__nav--next:hover { transform: translateY(-50%) scale(1.08); }
.mvs-popup__nav:disabled { opacity: .2; pointer-events: none; }

/* ── Slide animations ───────────────────────────────────────── */
.mvs-popup__stage.slide-up {
  animation: mvs-slide-up .28s var(--mvs-ease) forwards;
}
.mvs-popup__stage.slide-down {
  animation: mvs-slide-down .28s var(--mvs-ease) forwards;
}
@keyframes mvs-slide-up {
  from { transform: translateY(32px); opacity: .15; }
  to   { transform: none; opacity: 1; }
}
@keyframes mvs-slide-down {
  from { transform: translateY(-32px); opacity: .15; }
  to   { transform: none; opacity: 1; }
}

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] .mvs-card            { background: #1e1e2e; }
[data-theme="dark"] .mvs-card__title     { color: #f0f0f0; }
[data-theme="dark"] .mvs-filter-tab      { border-color: #333; color: #ccc; }
[data-theme="dark"] .mvs-page__loadmore  { border-color: #333; color: #ccc; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .mvs-grid            { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mvs-popup__title    { font-size: 14px; }
  .mvs-popup__sheet-body { padding: 10px 14px 24px; }
}