/* ==========================================================================
   style.v2.css
   Satu-satunya file CSS "custom" di situs ini, dimuat SETELAH Tailwind CDN
   di header.html. Isinya HANYA hal-hal yang tidak bisa/tidak efisien
   diekspresikan lewat utility class Tailwind:
     - Token warna dasar sebagai CSS var (dipakai juga oleh JS & style ini)
     - Komponen dengan banyak state turunan (:hover di dalam .group,
       animasi @keyframes, dsb) -- video-card, playlist, player audio/video
     - Override tampilan Video.js (elemen milik library pihak ketiga,
       tidak bisa distyle langsung lewat class Tailwind di HTML)
     - Sisa layout lama yang masih dipakai lintas halaman (container-wrap,
       tombol "kembali ke atas", dsb)

   MIGRASI DARI BOOTSTRAP (ringkasan, lihat juga catatan di chat):
     - bootstrap.css & style.css (lama) SUDAH TIDAK DIPAKAI LAGI. Semua
       kelas Bootstrap yang dulu dipinjam di watch.html/watch1.html/
       listen.html/video-card.html/video-card-playlist.html
       (row, col-*, offset-*, nav/nav-tabs/nav-link, tab-content/tab-pane/
       fade, badge, btn/btn-primary/btn-link, d-flex, d-inline-block,
       justify-content-center, small, text-muted) SUDAH DIGANTI dengan
       utility Tailwind langsung di HTML, ATAU (kalau memang perlu look
       konsisten + banyak state) jadi kelas custom di file ini (wv-tabs,
       wv-badge, wv-pagination, dst).
     - Kelas "mb-*", "pb-*", "px-*", "py-*", "my-0", "text-center",
       "sr-only" SENGAJA DIBIARKAN apa adanya di HTML lama -- nama kelas
       itu juga valid sebagai utility Tailwind bawaan (walau skala
       spacing-nya sedikit beda dari Bootstrap), jadi otomatis tetap
       jalan tanpa bootstrap.css.
   ========================================================================== */

/* ----- 1. Design tokens (disinkronkan dengan tailwind.config di header.html) ----- */
:root{
  /* Tone navy/teal, disamakan dengan referensi Lovable dan warna brand BaDeNo
     (#174A97 / #0B8D9B / #BB095F).
     PENTING: nilai di bawah ini format "R G B" (channel, tanpa rgb()/#),
     BUKAN hex lagi -- supaya bisa dipakai bareng oleh:
       1) Tailwind config (colors: 'wv-primary': 'rgb(var(--wv-primary) / <alpha-value>)')
       2) CSS custom di file ini, WAJIB dibungkus rgb(var(--wv-x)), mis.
          background:rgb(var(--wv-primary)); border-color:rgb(var(--wv-line) / .5);
     Ganti warna brand = ganti angka di sini SAJA, tidak ada HTML/CSS lain yang
     perlu disentuh. Dark mode = override angka yang sama di .dark di bawah. */
  --wv-ink:24 33 46;
  --wv-ink-soft:91 100 114;
  --wv-line:222 227 238;
  --wv-surface:255 255 255;
  --wv-sunken:242 245 251;
  --wv-primary:31 67 144;
  --wv-primary-dark:21 47 102;
  --wv-primary-darker:15 33 71;
  --wv-primary-soft:232 237 250;
  --wv-accent:11 141 155;
  --wv-accent-dark:8 107 118;
  --wv-accent-soft:225 243 244;
  --wv-rose:187 9 95;
  --wv-font-display:'Playfair Display', Georgia, serif;
  --wv-radius-lg:14px;
  --wv-radius-md:10px;
  --wv-radius-sm:8px;
  --wv-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --wv-shadow-card:0 1px 2px rgba(15,23,42,.05),0 8px 20px -6px rgba(15,23,42,.10);
  --wv-shadow-card-hover:0 14px 30px -10px rgba(15,23,42,.20);
}

/* Dark mode: cukup override angka RGB di sini. TIDAK ADA class HTML yang
   perlu berubah -- semua bg-wv- */
.dark{
  --wv-ink:236 240 246;
  --wv-ink-soft:163 172 189;
  --wv-line:47 58 79;
  --wv-surface:22 29 41;
  --wv-sunken:16 21 31;
  --wv-primary:96 138 224;
  --wv-primary-dark:140 172 235;
  --wv-primary-darker:140 172 235;
  --wv-primary-soft:31 47 82;
  --wv-accent:45 191 205;
  --wv-accent-dark:94 214 226;
  --wv-accent-soft:15 47 51;
  --wv-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --wv-shadow-card:0 1px 2px rgba(0,0,0,.3),0 8px 20px -6px rgba(0,0,0,.45);
  --wv-shadow-card-hover:0 14px 30px -10px rgba(0,0,0,.55);
}

/* ----- 1b/1c DIHAPUS (migrasi Tailwind): Hero index.html, section-head, dan
   wv-home-card sekarang ditulis langsung sebagai utility Tailwind di
   index.html & video-resource-card.html (statis, cuma dipakai 1-2 tempat,
   tidak ada state kompleks yang butuh CSS terpisah). Warna & radius tetap
   ambil dari token yang sama (bg-wv-primary, rounded-wv-lg, dst), jadi kalau
   token di :root berubah, tampilan ikut berubah tanpa sentuh file ini. -----*/

/* ----- 1d. Kartu resource audio (listen/index) -- warna WAJIB dari rgb(var(--wv-accent))
   di :root, BUKAN dari Tailwind color-utility (bg-wv-accent-soft dsb), karena
   utility itu di-compile lewat build Tailwind terpisah (app.css) yang gampang
   telat sinkron kalau token di :root berubah (kejadian: :root sudah teal,
   tapi kartu masih oren karena build lama). Class custom = satu sumber pasti. ----- */
.wv-listen-card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.wv-listen-card:hover{ border-color:rgb(var(--wv-accent))!important; }
.wv-listen-card-icon{ background:rgb(var(--wv-accent-soft))!important; color:rgb(var(--wv-accent))!important; }
.wv-listen-card-cta{ color:rgb(var(--wv-accent))!important; }
/* Band lebar penuh untuk section Dengar (di dalam .container-wrap yang
   max-width 1060px), dibuat "lepas" dari batas kontainer dengan trik
   negative-margin + 100vw supaya tetap full-bleed seperti referensi. */
.wv-home-band{ background:rgb(var(--wv-sunken)); width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.wv-home-band-inner{ max-width:1140px; margin:0 auto; padding:64px 15px; }

@media (max-width:600px){
  .wv-home-band-inner{ padding:44px 15px; }
}

/* ----- 2. Layout dasar (dulu di style.css, masih dipakai index/watch/watch1/listen) ----- */
.container-wrap{ max-width:1060px; margin:0 auto 1em; background:#fff; }
@media screen and (max-width:768px){ .container-wrap{ width:100%; margin-bottom:0; } }

/* Jarak antara nav sticky dan konten -- berlaku di semua halaman karena
   #fh5co-main-content dibuka sekali di header.html */
#fh5co-main-content{
  display:block;
  padding-top:28px;
}
@media (max-width:600px){
  #fh5co-main-content{ padding-top:18px; }
}
#fh5co-sermon{ padding:2em 1em; clear:both; }

/* hr pemisah tipis, cuma tampil di layar sempit (perilaku asli dipertahankan) */
.hr-top{ display:none; }
@media (max-width:500px){ .hr-top{ display:block; } }

.fh5co-loader{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; background:url(../images/loader.gif) center no-repeat #fff; }

/* Tombol kembali-ke-atas / WA -- posisi & transisi dasar (warna/bentuknya
   sendiri sudah diatur lewat utility Tailwind ber-prefix "!" di footer.html) */
.gototop, .gototop2{ position:fixed; bottom:30px; z-index:999; opacity:0; visibility:hidden; transition:2s; }
.gototop{ right:30px; }
.gototop2{ left:30px; }
.gototop.active, .gototop2.active{ opacity:1; visibility:visible; }
.gototop a, .gototop2 a{ width:50px; height:50px; display:table; text-align:center; }
.gototop a i, .gototop2 a i{ height:50px; display:table-cell; vertical-align:middle; }
.gototop a:hover, .gototop a:focus, .gototop2 a:hover, .gototop2 a:focus{ text-decoration:none; outline:none; }

/* ----- 3. Navigasi daftar resource (pill) -- dipakai watch.html, watch1.html, listen.html ----- */
.wv-resource-nav{ margin:4px auto 32px; max-width:980px; padding:0 15px; }
.wv-resource-nav-inner{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.wv-pill{ display:inline-flex; align-items:center; padding:6px 16px; border-radius:999px; border:1px solid rgb(var(--wv-line)); background:rgb(var(--wv-surface)); color:rgb(var(--wv-ink-soft)); font-size:13px; font-weight:500; text-decoration:none; transition:all .15s ease; white-space:nowrap; }
.wv-pill:hover{ border-color:rgb(var(--wv-primary)); color:rgb(var(--wv-primary-dark)); text-decoration:none; background:rgb(var(--wv-primary-soft)); }
.wv-pill-active{ background:rgb(var(--wv-primary)); border-color:rgb(var(--wv-primary)); color:#fff; font-weight:600; }

/* ----- 4. Filter bar (cari + dropdown ayat) -- watch.html (JS live-filter)
   & watch1.html (form GET, reload halaman). Markup beda tag (<div>/<form>)
   tapi sama-sama pakai class "wv-filter-bar" jadi cukup 1 aturan. ----- */
.wv-filter-bar{ display:flex; align-items:stretch; background:rgb(var(--wv-surface)); border:1px solid rgb(var(--wv-line)); border-radius:var(--wv-radius-lg); box-shadow:var(--wv-shadow-sm); overflow:hidden; }
.wv-filter-field{ display:flex; align-items:center; gap:8px; padding:0 14px; }
.wv-filter-search{ flex:1 1 auto; }
.wv-filter-search svg{ flex:0 0 auto; color:rgb(var(--wv-ink-soft)); opacity:.55; }
.wv-input{ border:0!important; outline:none; box-shadow:none!important; padding:12px 0; font-size:14px; width:100%; background:transparent; }
.wv-filter-divider{ width:1px; background:rgb(var(--wv-line)); margin:8px 0; flex:0 0 auto; }
.wv-filter-select{ flex:0 0 auto; }
.wv-select{ border:0!important; outline:none; box-shadow:none!important; background:transparent; padding:12px 4px; font-size:14px; min-width:150px; max-width:220px; color:rgb(var(--wv-ink)); }
.wv-filter-reset{ flex:0 0 auto; display:flex; align-items:center; gap:6px; border:0; border-left:1px solid rgb(var(--wv-line)); background:rgb(var(--wv-sunken)); color:rgb(var(--wv-ink-soft)); font-size:13px; font-weight:600; padding:0 18px; cursor:pointer; transition:background .15s ease,color .15s ease; text-decoration:none; }
.wv-filter-reset:hover{ background:rgb(var(--wv-primary-soft)); color:rgb(var(--wv-primary-dark)); text-decoration:none; }
#video-filter-count{ text-align:center; margin-top:10px; }

@media (max-width:767px){
  .wv-filter-bar{ flex-direction:column; border-radius:var(--wv-radius-md); }
  .wv-filter-divider{ width:auto; height:1px; margin:0 14px; }
  .wv-filter-search, .wv-filter-select{ padding:10px 14px; }
  .wv-select{ max-width:none; }
  .wv-filter-reset{ border-left:0; border-top:1px solid rgb(var(--wv-line)); justify-content:center; padding:12px; }
}

/* Versi ringkas filter bar di dalam panel playlist watch.html (stack vertikal) */
.wv-watch-playlist-panel .wv-filter-bar{ flex-direction:column; width:100%; border:0; border-top:1px solid rgb(var(--wv-line)); border-bottom:1px solid rgb(var(--wv-line)); border-radius:0; box-shadow:none; margin-top:12px; }
.wv-watch-playlist-panel .wv-filter-divider{ width:auto; height:1px; margin:0 14px; }
.wv-watch-playlist-panel .wv-filter-field{ width:100%; box-sizing:border-box; }
.wv-watch-playlist-panel .wv-filter-search,
.wv-watch-playlist-panel .wv-filter-select{ padding:10px 14px; flex:none; }
.wv-watch-playlist-panel .wv-filter-search input,
.wv-watch-playlist-panel .wv-filter-select select{ width:100%; }
.wv-watch-playlist-panel .wv-filter-reset{ width:100%; border-left:0; border-top:1px solid rgb(var(--wv-line)); justify-content:center; padding:10px; }
.wv-watch-playlist-panel #video-filter-count{ padding:8px 14px 0; margin-top:0; }

/* ----- 5. Tab bahasa + badge jumlah -- pengganti Bootstrap nav-tabs/badge.
   Dipakai watch.html (tab client-side, lihat script.watch.js) dan
   watch1.html (tab = link biasa, tanpa JS, cukup styling). ----- */
.wv-tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid rgb(var(--wv-line)); }
.wv-tab{ display:inline-flex; align-items:center; border:0; border-bottom:2px solid transparent; color:rgb(var(--wv-ink-soft)); font-weight:600; font-size:14px; padding:10px 4px; margin-right:24px; background:transparent; text-decoration:none; cursor:pointer; }
.wv-tab:hover{ color:rgb(var(--wv-primary-dark)); text-decoration:none; }
.wv-tab.active{ color:rgb(var(--wv-primary-dark)); border-bottom-color:rgb(var(--wv-primary)); }
.wv-badge{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:rgb(var(--wv-sunken)); color:rgb(var(--wv-ink-soft)); margin-left:4px; }
.wv-tab.active .wv-badge{ background:rgb(var(--wv-primary-soft)); color:rgb(var(--wv-primary-dark)); }

.wv-watch-playlist-panel .wv-tabs{ margin:0; padding:2px 10px 0; }
.wv-watch-playlist-panel .wv-tab{ margin-right:14px; padding:8px 2px; font-size:13px; }

/* ----- 6. Pagination -- watch1.html (pengganti bootstrap pagination) ----- */
.wv-pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:36px 0 8px; }
.wv-page-link{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:var(--wv-radius-sm); border:1px solid rgb(var(--wv-line)); background:rgb(var(--wv-surface)); color:rgb(var(--wv-ink-soft)); font-size:13px; font-weight:600; text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.wv-page-link:hover{ border-color:rgb(var(--wv-primary)); color:rgb(var(--wv-primary-dark)); text-decoration:none; background:rgb(var(--wv-primary-soft)); }
.wv-page-link-active{ background:rgb(var(--wv-primary)); border-color:rgb(var(--wv-primary)); color:#fff; }
.wv-page-link-active:hover{ background:rgb(var(--wv-primary-dark)); border-color:rgb(var(--wv-primary-dark)); color:#fff; }

/* ----- 7. Kartu video (grid) -- video-card.html, dipakai watch.html & watch1.html ----- */
.video-card-col{ display:flex; }
.wv-card{ display:flex; flex-direction:column; width:100%; background:rgb(var(--wv-surface)); border:1px solid rgb(var(--wv-line)); border-radius:var(--wv-radius-lg); box-shadow:var(--wv-shadow-card); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.wv-card:hover{ transform:translateY(-4px); box-shadow:var(--wv-shadow-card-hover); }

.wv-thumb-link{ display:block; }
.wv-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:rgb(var(--wv-sunken)); }
.wv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.wv-card:hover .wv-thumb img{ transform:scale(1.05); }
.wv-thumb-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%); opacity:0; transition:opacity .18s ease; }
.wv-card:hover .wv-thumb-overlay{ opacity:1; }
.wv-play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; color:rgb(var(--wv-primary-dark)); font-size:17px; opacity:0; transition:opacity .18s ease, transform .18s ease; box-shadow:0 6px 16px rgba(0,0,0,.2); }
.wv-card:hover .wv-play-btn{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.wv-verse-badge{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(20,26,18,.72); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; letter-spacing:.02em; }

.wv-body{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.wv-title{ font-size:14px; margin:0 0 12px; line-height:1.45; min-height:2.9em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:rgb(var(--wv-ink)); font-weight:600; }
.wv-actions{ display:flex; gap:8px; margin-top:auto; }
.wv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:var(--wv-radius-sm); font-size:13px; font-weight:600; padding:8px 14px; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.wv-btn-play{ flex:1; background:rgb(var(--wv-primary)); color:#fff; }
.wv-btn-play:hover{ background:rgb(var(--wv-primary-dark)); color:#fff; text-decoration:none; }
.wv-btn-icon{ flex:0 0 auto; width:38px; padding:0; border:1px solid rgb(var(--wv-line)); color:rgb(var(--wv-ink-soft)); background:rgb(var(--wv-surface)); }
.wv-btn-icon:hover{ border-color:rgb(var(--wv-primary)); color:rgb(var(--wv-primary-dark)); background:rgb(var(--wv-primary-soft)); text-decoration:none; }

/* Highlight kartu yang sedang diputar (dipasang lewat JS di watch.html) */
.wv-card.wv-card-playing{ box-shadow:0 0 0 2px rgb(var(--wv-primary)), var(--wv-shadow-card); }
.wv-card.wv-card-playing .wv-thumb-overlay{ opacity:1; }
.wv-card.wv-card-playing .wv-play-btn{ opacity:1; transform:translate(-50%,-50%) scale(1); background:rgb(var(--wv-primary)); color:#fff; }

/* ----- 8. Layout 2 kolom ala YouTube (player + panel playlist) -- HANYA watch.html ----- */
.wv-watch-layout{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.wv-watch-main{ width:100%; min-width:0; }
.wv-watch-playlist-panel{ width:100%; background:rgb(var(--wv-surface)); border:1px solid rgb(var(--wv-line)); border-radius:var(--wv-radius-lg); box-shadow:var(--wv-shadow-card); overflow:hidden; }

.wv-playlist-panel-head{ padding:14px 16px 0; }
.wv-playlist-panel-title{ font-size:13px; font-weight:700; color:rgb(var(--wv-ink)); margin:0 0 2px; }
.wv-playlist-panel-count{ font-size:12px; color:rgb(var(--wv-ink-soft)); }

.wv-playlist-scroll{ overflow-y:auto; padding:8px; }
.wv-playlist-scroll [id^="series-"]{ display:flex; flex-direction:column; gap:2px; }

.wv-playlist-col{ width:100%; flex:none; padding:0; }
.wv-playlist-item{ flex-direction:row; align-items:stretch; border:1px solid transparent; border-radius:var(--wv-radius-md); box-shadow:none; }
.wv-playlist-item:hover{ transform:none; box-shadow:none; background:rgb(var(--wv-sunken)); }
.wv-playlist-item.wv-card-playing{ background:rgb(var(--wv-primary-soft)); box-shadow:none; }

.wv-playlist-thumb-link{ flex:0 0 auto; display:block; padding:8px 0 8px 8px; }
.wv-playlist-thumb{ position:relative; width:130px; aspect-ratio:16/9; border-radius:var(--wv-radius-sm); }
.wv-playlist-index{ position:absolute; top:6px; left:6px; z-index:2; background:rgba(20,26,18,.72); color:#fff; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; }
.wv-playlist-item.wv-card-playing .wv-playlist-index{ display:none; }
.wv-playlist-play-btn{ width:34px; height:34px; }
.wv-playlist-item.wv-card-playing .wv-playlist-play-btn{ display:none; }
.wv-playlist-badge{ top:auto; bottom:6px; left:6px; font-size:10px; padding:2px 8px; }

.wv-playlist-eq{ display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); align-items:flex-end; gap:3px; height:16px; }
.wv-playlist-item.wv-card-playing .wv-playlist-eq{ display:flex; }
.wv-playlist-eq span{ width:3px; background:rgb(var(--wv-primary)); border-radius:2px; animation:wv-eq-bounce 1s ease-in-out infinite; }
.wv-playlist-eq span:nth-child(1){ height:6px; animation-delay:-.2s; }
.wv-playlist-eq span:nth-child(2){ height:14px; animation-delay:-.6s; }
.wv-playlist-eq span:nth-child(3){ height:9px; animation-delay:-.9s; }
@keyframes wv-eq-bounce{ 0%,100%{ height:4px; } 50%{ height:14px; } }

.wv-playlist-body{ flex:1 1 auto; min-width:0; padding:8px 10px 8px 12px; flex-direction:row; align-items:center; gap:8px; }
.wv-playlist-title{ font-size:13px; line-height:1.4; min-height:0; -webkit-line-clamp:2; margin:0; flex:1 1 auto; }
.wv-playlist-item.wv-card-playing .wv-playlist-title{ color:rgb(var(--wv-primary-dark)); }
.wv-playlist-dl{ flex:0 0 auto; width:32px; height:32px; padding:0; border:0; color:rgb(var(--wv-ink-soft)); background:transparent; }
.wv-playlist-dl:hover{ color:rgb(var(--wv-primary-dark)); background:rgb(var(--wv-primary-soft)); }

@media (min-width:992px){
  .wv-watch-layout{ flex-direction:row; }
  .wv-watch-main{ flex:1 1 64%; min-width:0; position:sticky; top:20px; }
  .wv-watch-playlist-panel{ flex:0 0 36%; max-width:420px; position:sticky; top:20px; }
  .wv-playlist-scroll{ max-height:460px; }
}

/* ----- 9. Player video "Sedang Diputar" -- HANYA watch.html ----- */
.wv-watch-player-wrap{ background:rgb(var(--wv-ink)); border-radius:var(--wv-radius-lg); overflow:hidden; box-shadow:var(--wv-shadow-card); }
.wv-watch-now-playing{ padding:16px 20px 10px; }
.wv-watch-np-label{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:4px; }
.wv-watch-np-title{ display:block; font-size:15px; font-weight:700; color:#fff; }

.wv-watch-stage{ position:relative; width:100%; background:#000; }
.wv-watch-stage-yt-ratio{ position:relative; width:100%; padding-top:56.25%; }
.wv-watch-stage-yt-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.wv-watch-stage-native .video-js{ width:100%!important; }
.wv-watch-stage-native .vjs-control-bar{ background:rgba(20,26,18,.86); }
.wv-watch-stage-native .vjs-big-play-button{ background:rgb(var(--wv-primary) / .85); border:0; border-radius:50%; width:64px; height:64px; line-height:64px; top:50%; left:50%; margin:-32px 0 0 -32px; }
.wv-watch-stage-native .vjs-big-play-button .vjs-icon-placeholder:before{ line-height:64px; }
.wv-watch-stage-native .vjs-play-progress{ background-color:rgb(var(--wv-primary)); }
.wv-watch-stage-native .vjs-volume-level{ background-color:rgb(var(--wv-primary)); }
.wv-watch-stage-native .vjs-menu-button-popup .vjs-menu-content{ background:#2b3327; }
.wv-watch-stage-native .vjs-menu li.vjs-selected{ background:rgb(var(--wv-primary)); color:#fff; }

.wv-watch-stage-empty{ position:relative; width:100%; padding-top:38%; }
.wv-watch-stage-empty-inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.45); text-align:center; padding:20px; }
.wv-watch-stage-empty-inner i{ font-size:32px; opacity:.5; }
.wv-watch-stage-empty-inner span{ font-size:13px; }

.wv-watch-stage-preview{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; margin:0; cursor:pointer; background:#000; }
.wv-watch-stage-preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.wv-watch-stage-preview-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.75) 100%); }
.wv-watch-stage-preview-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgb(var(--wv-primary) / .9); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; transition:transform .15s ease, background .15s ease; }
.wv-watch-stage-preview:hover .wv-watch-stage-preview-play{ transform:translate(-50%,-50%) scale(1.08); background:rgb(var(--wv-primary)); }
.wv-watch-stage-preview-title{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; font-size:13px; font-weight:600; color:#fff; text-align:left; }

.wv-watch-download-row{ padding:14px 20px 18px; }
.wv-watch-download-btn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:7px 14px; border-radius:999px; text-decoration:none; transition:background-color .15s ease,border-color .15s ease; }
.wv-watch-download-btn:hover{ background-color:rgb(var(--wv-primary)); border-color:rgb(var(--wv-primary)); color:#fff; text-decoration:none; }

@media (max-width:600px){
  .wv-watch-now-playing{ padding:14px 16px 6px; }
  .wv-watch-download-row{ padding:12px 16px 16px; }
}

/* ----- 10. DIHAPUS (migrasi Tailwind): wv-detail-card/wv-detail-desc sekarang
   utility Tailwind langsung di listen.html (statis, cuma 1 tempat). -----*/

@media (max-width:767px){ .wv-pill{ font-size:12px; padding:6px 13px; } }

/* ----- 11. Player audio (playlist) -- listen.html ----- */
.wv-player-wrap{ margin-top:22px; border-radius:var(--wv-radius-md); overflow:hidden; box-shadow:var(--wv-shadow-sm); background:rgb(var(--wv-ink)); }

.wv-now-playing{ display:flex; align-items:center; gap:14px; padding:16px 20px 6px; }
.wv-np-art{ flex:0 0 auto; width:52px; height:52px; border-radius:10px; background:linear-gradient(145deg,rgb(var(--wv-primary)),rgb(var(--wv-primary-dark))); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.35); }
.wv-np-art svg{ width:26px; height:26px; }
.wv-np-art .wv-bar{
  transform-origin:bottom;
  animation:wv-bar-anim 1.1s ease-in-out infinite;
  animation-play-state:paused;
}
.wv-player-wrap.wv-is-playing .wv-np-art .wv-bar{ animation-play-state:running; }
.wv-np-art .wv-bar:nth-child(1){ animation-delay:-.9s; }
.wv-np-art .wv-bar:nth-child(2){ animation-delay:-.5s; }
.wv-np-art .wv-bar:nth-child(3){ animation-delay:-.2s; }
.wv-np-art .wv-bar:nth-child(4){ animation-delay:-.7s; }
@keyframes wv-bar-anim{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.wv-np-body{ min-width:0; flex:1; }
.wv-np-label{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:2px; }
.wv-np-title{ display:block; font-size:15px; font-weight:700; color:#fff; min-height:1.3em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-np-meta{ display:block; font-size:12px; color:rgba(255,255,255,.5); margin-top:1px; }
@media (max-width:767px){ .wv-now-playing{ padding:14px 16px 4px; } }

/* -- Video.js dipakai audio-only ------------------------------------------
   FIX:
   1. Jangan gunakan height:auto pada .video-js karena audioOnlyMode()
      Video.js membutuhkan tinggi container agar control-bar tidak menimpa
      header "Sedang Diputar".
   2. Control bar dibuat sebagai satu baris desktop yang stabil.
   3. Tombol Play dipaksa menjadi tombol lingkaran yang benar-benar terlihat.
   4. Mobile: progress bar turun ke baris kedua.
--------------------------------------------------------------------------- */
.wv-player-wrap .video-js{
  width:100%!important;
  background:transparent;
  font-family:inherit;
  box-sizing:border-box;
}

.wv-player-wrap .video-js{
  height:58px!important;
  min-height:58px!important;
}

.wv-player-wrap .video-js .vjs-tech,
.wv-player-wrap .video-js .vjs-poster,
.wv-player-wrap .video-js .vjs-loading-spinner,
.wv-player-wrap .video-js .vjs-big-play-button{
  display:none!important;
}

/* Control bar: sekarang berada di dalam area Video.js yang punya tinggi nyata. */
.wv-player-wrap .vjs-control-bar{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-wrap:nowrap;
  align-items:center;
  width:100%;
  height:58px;
  min-height:58px;
  box-sizing:border-box;
  background:rgb(var(--wv-ink));
  opacity:1!important;
  visibility:visible!important;
  padding:10px 14px;
  gap:6px;
}

.wv-player-wrap .vjs-control-bar > div:empty{
  display:none;
}

.wv-player-wrap .vjs-control{
  width:32px;
  height:38px;
  flex:0 0 auto;
  box-sizing:border-box;
}

.wv-player-wrap .vjs-button{
  display:flex!important;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:rgba(255,255,255,.75);
  transition:background-color .15s ease,color .15s ease;
}

.wv-player-wrap .vjs-button > .vjs-icon-placeholder{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.wv-player-wrap .vjs-button > .vjs-icon-placeholder:before{
  position:static!important;
  display:block;
  line-height:1!important;
  font-size:16px;
}

.wv-player-wrap .vjs-button:hover{
  background-color:rgba(255,255,255,.12);
  color:#fff;
}

.wv-player-wrap .vjs-button:focus{
  outline:none;
  box-shadow:0 0 0 2px rgb(var(--wv-primary));
}

/* PLAY: jangan biarkan Video.js/Tailwind membuat tombolnya collapse. */
.wv-player-wrap .vjs-play-control{
  order:0;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  margin:0 2px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgb(var(--wv-primary))!important;
  color:#fff!important;
  overflow:hidden;
}

.wv-player-wrap .vjs-play-control:hover{
  background:rgb(var(--wv-primary-dark))!important;
}

.wv-player-wrap .vjs-play-control .vjs-icon-placeholder{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
}

.wv-player-wrap .vjs-play-control .vjs-icon-placeholder:before{
  position:static!important;
  line-height:1!important;
  font-size:16px!important;
  margin:0!important;
}

/* Progress */
.wv-player-wrap .vjs-progress-control{
  order:1;
  flex:1 1 auto!important;
  min-width:80px;
  width:auto;
  height:38px!important;
  display:flex;
  align-items:center;
  padding:0 6px;
  box-sizing:border-box;
}

.wv-player-wrap .vjs-progress-holder{
  width:100%;
  height:6px;
  margin:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}

.wv-player-wrap .vjs-load-progress{
  background:rgba(255,255,255,.20);
  border-radius:999px;
}

.wv-player-wrap .vjs-load-progress div{
  background:rgba(255,255,255,.28);
}

.wv-player-wrap .vjs-play-progress{
  background-color:rgb(var(--wv-primary));
  border-radius:999px;
}

.wv-player-wrap .vjs-play-progress:before{
  color:#fff;
  font-size:12px;
  top:-3px;
}

/* Waktu */
.wv-player-wrap .vjs-time-control{
  order:2;
  width:auto;
  height:38px;
  color:rgba(255,255,255,.60);
  font-size:12px;
  padding:0 3px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wv-player-wrap .vjs-remaining-time{
  display:none;
}

/* Kecepatan */
.wv-player-wrap .vjs-playback-rate{
  order:3;
  width:38px;
  height:38px;
  margin:0;
}

.wv-player-wrap .vjs-playback-rate .vjs-playback-rate-value{
  font-size:12px;
  line-height:38px;
  color:rgba(255,255,255,.75);
}

/* Menu */
.wv-player-wrap .vjs-menu-button-popup .vjs-menu{
  bottom:100%;
}

.wv-player-wrap .vjs-menu-button-popup .vjs-menu-content{
  background:#2b3327;
  border-radius:var(--wv-radius-sm);
  overflow:hidden;
  box-shadow:var(--wv-shadow-card);
}

.wv-player-wrap .vjs-menu li{
  color:rgba(255,255,255,.75);
  padding:8px 14px;
  font-size:13px;
  text-align:left;
}

.wv-player-wrap .vjs-menu li.vjs-selected{
  background:rgb(var(--wv-primary));
  color:#fff;
}

.wv-player-wrap .vjs-menu li:hover,
.wv-player-wrap .vjs-menu li:focus{
  background:rgba(255,255,255,.1);
  color:#fff;
}

/* Volume */
.wv-player-wrap .vjs-volume-panel{
  order:4;
  width:38px;
  height:38px;
  margin-left:0;
}

.wv-player-wrap .vjs-volume-bar{
  background:rgba(255,255,255,.15);
  border-radius:999px;
}

.wv-player-wrap .vjs-volume-level{
  background:rgb(var(--wv-primary));
  border-radius:999px;
}

.wv-player-wrap .vjs-volume-panel .vjs-volume-control{
  background:#2b3327;
  border-radius:var(--wv-radius-sm);
  box-shadow:var(--wv-shadow-card);
}

/* Header "Sedang Diputar" diberi ruang yang cukup agar meta tidak tertimpa. */
.wv-player-wrap .wv-now-playing{
  min-height:82px;
  box-sizing:border-box;
  padding:14px 20px 12px;
}

.wv-player-wrap .wv-np-body{
  min-width:0;
  overflow:hidden;
}

.wv-player-wrap .wv-np-title{
  line-height:1.35;
}

.wv-player-wrap .wv-np-meta{
  line-height:1.3;
}

/* Mobile */
@media (max-width:600px){
  .wv-player-wrap .wv-now-playing{
    min-height:78px;
    padding:12px 14px 10px;
  }

  .wv-player-wrap .wv-np-art{
    width:46px;
    height:46px;
  }

  .wv-player-wrap .video-js{
    height:82px!important;
    min-height:82px!important;
  }

  .wv-player-wrap .vjs-control-bar{
    flex-wrap:wrap;
    align-content:center;
    height:82px;
    min-height:82px;
    padding:8px 10px 10px;
    gap:2px 5px;
  }

  .wv-player-wrap .vjs-progress-control{
    flex-basis:100%!important;
    width:100%!important;
    order:10;
    height:18px!important;
    min-height:18px!important;
    margin-top:2px;
    padding:0;
  }

  .wv-player-wrap .vjs-progress-holder{
    height:5px;
  }

  .wv-player-wrap .vjs-volume-panel{
    margin-left:auto;
  }

  .wv-download-row{
    padding-left:14px;
    padding-right:14px;
  }
}
.wv-download-row{ padding:0 20px 14px; }
.wv-download-btn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:7px 14px; border-radius:999px; text-decoration:none; transition:background-color .15s ease,border-color .15s ease; }
.wv-download-btn:hover{ background-color:rgb(var(--wv-primary)); border-color:rgb(var(--wv-primary)); color:#fff; text-decoration:none; }

.wv-group-nav{ display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 14px; background:rgb(var(--wv-ink)); }
.wv-group-chip{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:rgba(255,255,255,.75); font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
.wv-group-chip:hover, .wv-group-chip:focus{ background-color:rgb(var(--wv-primary)); border-color:rgb(var(--wv-primary)); color:#fff; outline:none; text-decoration:none; }
.wv-group-chip.wv-chip-active{ background-color:rgb(var(--wv-primary)); border-color:rgb(var(--wv-primary)); color:#fff; }

.wv-playlist-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px; background:rgb(var(--wv-surface)); border-bottom:1px solid rgb(var(--wv-line)); }
.wv-playlist-count{ font-size:12px; color:rgb(var(--wv-ink-soft)); white-space:nowrap; }
.wv-playlist-count b{ color:rgb(var(--wv-ink)); font-weight:700; }
.wv-search-wrap{ position:relative; flex:1; max-width:220px; }
.wv-search-input{ width:100%; font-size:13px; padding:7px 12px 7px 30px; border-radius:999px; border:1px solid rgb(var(--wv-line)); background:rgb(var(--wv-sunken)); color:rgb(var(--wv-ink)); }
.wv-search-input:focus{ outline:none; border-color:rgb(var(--wv-primary)); background:#fff; }
.wv-search-wrap svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:rgb(var(--wv-ink-soft)); pointer-events:none; }
@media (max-width:767px){ .wv-playlist-toolbar{ padding:10px 14px; flex-wrap:wrap; } .wv-search-wrap{ max-width:none; flex-basis:100%; order:2; } }

.wv-playlist{ list-style:none; margin:0; padding:6px; background:rgb(var(--wv-surface)); border-radius:0 0 var(--wv-radius-md) var(--wv-radius-md); max-height:420px; overflow-y:auto; font-size:14px; scrollbar-width:thin; scrollbar-color:rgb(var(--wv-line)) transparent; }
.wv-playlist::-webkit-scrollbar{ width:8px; }
.wv-playlist::-webkit-scrollbar-track{ background:transparent; }
.wv-playlist::-webkit-scrollbar-thumb{ background-color:rgb(var(--wv-line)); border-radius:999px; }
.wv-playlist::-webkit-scrollbar-thumb:hover{ background-color:rgb(var(--wv-primary)); }

.wv-group-header{ position:sticky; top:0; z-index:2; background:rgb(var(--wv-surface)); padding:10px 8px 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--wv-ink-soft)); }
.wv-group-header::after{ content:""; display:block; height:1px; background:rgb(var(--wv-line)); margin-top:6px; }
.wv-group-header.wv-hidden{ display:none; }

.wv-track{ display:flex; align-items:center; gap:12px; border-radius:var(--wv-radius-sm); border-left:3px solid transparent; margin:2px 0; padding:10px 14px; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
.wv-track:hover{ background-color:rgb(var(--wv-sunken)); border-left-color:rgb(var(--wv-primary)); transform:translateX(1px); }
.wv-track:focus-visible{ outline:2px solid rgb(var(--wv-primary)); outline-offset:-2px; }
.wv-track.wv-current{ background-color:rgb(var(--wv-primary-soft)); border-left-color:rgb(var(--wv-primary)); color:rgb(var(--wv-primary-dark)); font-weight:600; }
.wv-track.wv-current .wv-track-num{ display:none; }
.wv-track.wv-current .wv-track-indicator{ display:flex; }
.wv-track.wv-hidden{ display:none; }

.wv-track-num{ flex:0 0 auto; width:20px; text-align:center; color:rgb(var(--wv-ink-soft)); font-size:12px; font-variant-numeric:tabular-nums; }

.wv-track-indicator{ display:none; flex:0 0 auto; width:20px; align-items:flex-end; justify-content:center; gap:2px; height:14px; }
.wv-eq{ width:3px; background:rgb(var(--wv-primary-dark)); border-radius:2px; height:4px; }
.wv-track.wv-current.wv-playing .wv-eq{ animation:wv-eq-anim .9s ease-in-out infinite; background:rgb(var(--wv-primary)); }
.wv-eq:nth-child(1){ animation-delay:0s; }
.wv-eq:nth-child(2){ animation-delay:.2s; }
.wv-eq:nth-child(3){ animation-delay:.35s; }
@keyframes wv-eq-anim{ 0%,100%{ height:4px; } 50%{ height:13px; } }
@media (prefers-reduced-motion:reduce){ .wv-eq, .wv-np-art .wv-bar{ animation:none!important; } }

.wv-track-title{ flex:1; min-width:0; color:rgb(var(--wv-ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-track-download{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; color:rgb(var(--wv-ink-soft)); opacity:.6; border-radius:50%; text-decoration:none; transition:opacity .15s ease,background-color .15s ease,color .15s ease; }
.wv-track-download:hover{ opacity:1; color:rgb(var(--wv-primary)); background:rgb(var(--wv-sunken)); }

.wv-empty-state{ text-align:center; color:rgb(var(--wv-ink-soft)); padding:32px 0 8px; }
.wv-empty-search{ text-align:center; color:rgb(var(--wv-ink-soft)); font-size:13px; padding:28px 0; display:none; }

/* ----- 12. DIHAPUS: .wv-audio-card (kartu preview audio lama) sudah digantikan
   audio-resource-card.html (.wv-listen-card, lihat section 1d) dan TIDAK
   dipakai lagi di index.html/listen.html manapun -- dead code, aman dibuang.
   Kalau ternyata masih dipakai di watch1.html/halaman lain yang tidak ikut
   di-review di sini, cukup copy balik dari git history. -----*/

/* ----- 13. Lain-lain (dipertahankan dari style.css lama, masih relevan) ----- */
.popup-youtube:focus, .popup-youtube:active{ text-decoration:none; }

/* ==========================================================================
   PLAYER FINAL POLISH v2
   - Play icon benar-benar center secara visual
   - Volume/speaker tidak menempel ke tepi
   - Download button memiliki jarak yang seimbang
   ========================================================================== */

/* Area control bar */
.wv-player-wrap .vjs-control-bar{
  padding-left:18px!important;
  padding-right:18px!important;
  gap:8px!important;
}

/* Tombol PLAY */
.wv-player-wrap .vjs-play-control{
  position:relative!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  margin:0 4px 0 0!important;
  padding:0!important;
  line-height:38px!important;
}

.wv-player-wrap .vjs-play-control .vjs-icon-placeholder,
.wv-player-wrap .vjs-play-control .vjs-icon-placeholder:before{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.wv-player-wrap .vjs-play-control .vjs-icon-placeholder:before{
  font-size:15px!important;
}

/* Progress sedikit lebih dekat ke Play, tapi tetap lega */
.wv-player-wrap .vjs-progress-control{
  padding-left:3px!important;
  padding-right:5px!important;
}

/* Speaker / volume */
.wv-player-wrap .vjs-volume-panel{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  margin:0 0 0 4px!important;
}

.wv-player-wrap .vjs-volume-panel .vjs-volume-control{
  margin-bottom:2px;
}

.wv-player-wrap .vjs-volume-panel .vjs-mute-control{
  width:38px!important;
  height:38px!important;
  padding:0!important;
}

/* Download area */
.wv-player-wrap .wv-download-row{
  padding:10px 20px 16px!important;
  margin:0!important;
}

.wv-player-wrap .wv-download-btn{
  margin:0!important;
}

/* Mobile */
@media (max-width:600px){
  .wv-player-wrap .vjs-control-bar{
    padding-left:12px!important;
    padding-right:12px!important;
    gap:5px!important;
  }

  .wv-player-wrap .vjs-play-control{
    margin-right:2px!important;
  }

  .wv-player-wrap .vjs-volume-panel{
    margin-left:auto!important;
    margin-right:0!important;
  }

  .wv-player-wrap .wv-download-row{
    padding:9px 14px 15px!important;
  }
}

.wv-player-wrap .vjs-volume-panel .vjs-mute-control .vjs-icon-placeholder:before{
  transform: translateY(10px);
}


/* =========================================================
   FIX SPEED MENU - tetap di posisi asli Video.js
   ========================================================= */

.wv-player-wrap {
  overflow: visible !important;
}

.wv-player-wrap .vjs-control-bar {
  position: relative !important;
  z-index: 20 !important;
}

.wv-player-wrap .vjs-playback-rate {
  position: relative !important;
  z-index: 100 !important;
}

.wv-player-wrap .vjs-playback-rate .vjs-menu {
  z-index: 9999 !important;
  margin-bottom: 8px !important;
}

.wv-player-wrap .vjs-playback-rate .vjs-menu-content {
  z-index: 10000 !important;
}

.new-tab[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 0px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}