:root{
  --red:#e03131;
  --bg:#271414;
  --active:#0d6efd;
}

/* Layout dasar */
*{ box-sizing:border-box; }
body{ margin:0; 
  font-family:system-ui, Arial, sans-serif; 
  color:#111; 
}

.vbd-containerall{ 
  max-width:1200px; 
  margin:10px auto; 
  padding:0 12px; }

.vbd-gallery{ 
  width:100%; }

/* Viewer (area atas) */
.vbd-viewer{
  position:relative;
  background:var(--bg);
  border-radius:15px 15px 0px 0px;
  overflow:hidden;
  aspect-ratio:16/9;
  width:100%;
  max-height:675px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Isi utama selalu tunduk ke viewer */
#vbd-mainSlot,
#vbd-mainSlot img,
#vbd-mainSlot video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* Tombol panah */
.vbd-nav{
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  width:34px; 
  height:34px; 
  border:none; 
  border-radius:50%;
  background:var(--red); 
  color:#fff; 
  font-size:18px;
  cursor:pointer; 
  opacity:.9; 
  display:grid; 
  place-items:center; 
  z-index:2;
}
.vbd-prev{ left:10px; }
.vbd-next{ right:10px; }
.vbd-nav:hover{ opacity:1; }

/* Tombol play/pause tengah */
.vbd-center-pp{
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%);
  width:64px; 
  height:64px; 
  border:none; 
  border-radius:50%;
  background:rgba(0,0,0,.45); 
  color:#fff; 
  font-size:22px;
  display:none; 
  z-index:3; 
  display:grid; 
  place-items:center; 
  line-height:1;
}

/* Thumbnail bar */
.vbd-thumbbar{
  margin-top:0px; 
  background:var(--bg); 
  border-radius:0px 0px 15px 15px;
  padding:10px; 
  display:flex; 
  gap:10px; 
  overflow-x:auto;
  scrollbar-width:thin; 
  justify-content:center;
}

.vbd-thumb{
  flex:0 0 auto; 
  width:110px; 
  height:70px; 
  border-radius:6px;
  overflow:hidden; 
  position:relative; 
  cursor:pointer; 
  outline:2px solid transparent;
}

.vbd-thumb img, .vbd-thumb video{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}

.vbd-thumb.badge::after{
  content:"VIDEO"; 
  position:absolute; 
  left:6px; 
  top:6px; 
  font-size:10px;
  background:var(--red); 
  color:#fff; 
  padding:2px 6px; 
  border-radius:10px;
}
.vbd-thumb.active{ 
  outline-color:var(--active); 
}

/* Lightbox */
.vbd-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:999;
}
.vbd-lightbox.show{ display:flex; }
.vbd-lightbox img{
  max-width:min(1200px,95vw); max-height:90vh; object-fit:contain;
  border-radius:12px; background:#000;
}
.vbd-lightbox-close{
  position:absolute; top:16px; right:16px; width:40px; height:40px;
  border:none; border-radius:50%; background:rgba(255,255,255,.15);
  color:#fff; font-size:18px; cursor:pointer;
}

/* Watermark */
/* Watermark overlay + garis diagonal */
.vbd-wm{
  position: absolute;
  inset: 0;
  z-index: 3;                 /* di atas video, tidak menutupi kontrol */
  pointer-events: none;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 14px;
  text-align: center;

  /* teks + sedikit kontras */
  color: rgba(255,255,255,.35);
  mix-blend-mode: overlay;

  /* GARIS-GARIS diagonal */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.18) 0 2px,
      rgba(255,255,255,0) 2px 60px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.08) 0 2px,
      rgba(0,0,0,0) 2px 60px
    );
}

/* --- Thumbnail video harus terlihat --- */
.vbd-thumb { background:#000; }               /* biar gak transparan */
.vbd-thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;                            /* jika frame belum tampil */
}




/* Fade effect */
@keyframes vbdFadeIn{ from{opacity:0} to{opacity:1} }
.vbd-fade-in{ animation:vbdFadeIn .35s ease both; }

/* Mobile */
@media (max-width:576px){
  .vbd-viewer{ max-height:360px; }
  .vbd-thumb{ width:90px; height:58px; }
}