.vbd-thumbbar-top{
  position:relative;
}
/* ======================== */
/*  VIDEO BERANDA FRONT CSS */
/* ======================== */

/* Layout dasar */
.vbd-viewer{
  background:transparent !important;
  position:relative;
  isolation:isolate;
}
#vbd-mainSlot,
#vbd-mainSlot img,
#vbd-mainSlot video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:1;
}
.vbd-thumbbar-bottom{
  background:transparent !important;
  margin-top:0;
  border-radius:0 0 15px 15px;
  padding:10px;
  display:flex;
  gap:14px;
  overflow-x:auto;
  scrollbar-width:thin;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:130px;
  box-sizing:border-box;
}

/* ================= NAV BUTTONS ================= */
#vbd-btnPrev, #vbd-btnNext{
  position:absolute;
  top:50%;
  transform:translateY(-50%) scale(1);
  width:52px; height:52px;
  border:none; border-radius:50%;
  background:transparent !important; box-shadow:none;
  z-index:1002 !important;
  cursor:pointer; line-height:0; color:transparent !important;
  -webkit-appearance:none; appearance:none;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  backface-visibility:hidden; outline:none;
}
#vbd-btnPrev::before, #vbd-btnNext::before{ content:none !important; }
#vbd-btnPrev::after, #vbd-btnNext::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:18px;
  border-top:3px solid #fff; border-left:3px solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
#vbd-btnNext::after{ transform: translate(-50%,-50%) rotate(135deg); }
#vbd-btnPrev:hover, #vbd-btnNext:hover,
#vbd-btnPrev:focus-visible, #vbd-btnNext:focus-visible{
  background-color:#ac0d0db7 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.18);
  transform: translateY(-50%) scale(1.06);
}
#vbd-btnPrev:active, #vbd-btnNext:active{
  transform: translateY(-50%) scale(0.96);
  box-shadow:0 6px 14px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.16);
}
#vbd-btnPrev{ left:auto !important; right:auto !important; }
#vbd-btnNext{ left:auto !important; right:auto !important; }
#vbd-btnPrev, #vbd-btnNext{ opacity:0; visibility:hidden; pointer-events:auto; }
.vbd-ui-show #vbd-btnPrev, .vbd-ui-show #vbd-btnNext{ opacity:1; visibility:visible; pointer-events:auto; }

/* ================= THUMBNAIL ================= */
.vbd-thumb{
  z-index:0;
  width:140px; height:88px;
  flex:0 0 auto;
  position:relative;
  border-radius:12px;
  background:transparent !important;
  border:0 !important; outline:0 !important; padding:0 !important;
  line-height:0;
  transform: translateZ(0) scale(1);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
  overflow:visible; /* biar glow luar terlihat */
}
/* pembungkus: clip ring/glow di dalam radius */
.vbd-thumb-wrap{\n  display:block;\n
  position:relative;
  width:100%; height:100%;
  border-radius:12px;
  overflow:hidden;
}
/* media selalu di bawah efek */
.vbd-thumb-wrap > img,
.vbd-thumb-wrap > video{
  position:relative;
  z-index:1; /* di bawah efek */
  border-radius:12px;
  width:100% !important; height:100% !important; display:block;
  object-fit:cover !important; object-position:center center !important;
  background:transparent !important; border:0; margin:0; padding:0;
  transform: translateZ(0) scale(1);
  transition: transform .35s ease;
}
/* overlay hover existing -> letakkan di bawah efek */
.vbd-thumb::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  z-index:0; pointer-events:none; opacity:0;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 55%),
    linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  transition: opacity .25s ease;
}
/* LAYER EFEK AKTIF -> di atas media & overlay */
.vbd-thumb-fx{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:2;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0); /* default tak terlihat */
  transition: box-shadow .25s ease, opacity .25s ease;
}

.vbd-thumb:hover, .vbd-thumb:focus-visible{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
}
.vbd-thumb:hover::before, .vbd-thumb:focus-visible::before{ opacity:1; }
.vbd-thumb:hover .vbd-thumb-wrap > img,
.vbd-thumb:hover .vbd-thumb-wrap > video,
.vbd-thumb:focus-visible .vbd-thumb-wrap > img,
.vbd-thumb:focus-visible .vbd-thumb-wrap > video{ transform: scale(1.08); }

/* label VIDEO */
.vbd-thumb.badge::after{
  content:"VIDEO";
  position:absolute; left:8px; top:8px; z-index:3; /* di atas semuanya */
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding:0 10px; line-height:1;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  color:#fff; background:rgba(0,0,0,.72);
  border-radius:6px; backdrop-filter:blur(2px);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ============ Active thumb: GLOW MERAH modern ============ */
.vbd-thumb.is-active{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 6px rgba(220,20,60,.16), 0 2px 8px rgba(0,0,0,.12);
  position:relative;
}
.vbd-thumb.is-active .vbd-thumb-fx{
  border-radius:inherit;
  box-shadow: inset 0 0 0 1.2px rgba(250, 62, 62, 0.897);
}
.vbd-thumb.is-active::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: 0 4px 12px rgba(255, 90, 90, .18), 0 0 0 1px rgba(255, 90, 90, .28);
  opacity:1;
  z-index:-1;
}
.vbd-thumb.is-active .vbd-thumb-wrap > img,
.vbd-thumb.is-active .vbd-thumb-wrap > video{ transform: scale(1.01); }

/* ================= LIGHTBOX (container) ================= */ (container) ================= */
.vbd-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:990;
}
.vbd-lightbox.show{ display:flex; }

/* X bawaan lightbox (kanan atas; posisi final diatur JS agar ikut bounding media) */
.vbd-lightbox-close{
  position:absolute;
  top:16px; left:50%;
  width:48px; height:48px;
  border:none; border-radius:12px;
  background:rgba(0,0,0,.78); color:#fff;
  font-size:22px; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  z-index:2005; /* di atas image (992) & jaring (1000) */
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.vbd-lightbox-close:hover{ transform:translateY(-1px); background:rgba(0,0,0,.88); }
.vbd-lightbox-close:focus-visible{ outline:2px solid #cc0a0a; outline-offset:2px; }

/* ================= JARING (VIEWER) ================= */
.vbd-wm-x{
  position:absolute;
  left:var(--hx,0); top:var(--hy,0);
  width:var(--hw,100%); height:var(--hh,100%);
  pointer-events:none; user-select:none;
  z-index:942;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 1.2px, rgba(0,0,0,0) 1.2px 120px);
  background-repeat:repeat; background-position:0 0;
}

/* ================= WATERMARK TEXT (VIEWER) ================= */
.vbd-wm{
  position:absolute;
  left:var(--hx,0); top:var(--hy,0);
  width:var(--hw,100%); height:var(--hh,100%);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; user-select:none;
  text-align:center; z-index:1003;
  font-weight:600; letter-spacing:.08em;
  font-size:clamp(12px, 1.8vw, 18px);
  color:rgba(255, 255, 255, 0.61);
  text-shadow:0 1px 2px rgba(0,0,0,.28), 0 0 1px rgba(0,0,0,.22);
  mix-blend-mode:overlay;
}

/* ================= SHARE ================= */
.vbd-share{
  position:absolute; top:10px; right:10px; /* di-override JS agar ikut padX/padY media */
  display:flex; flex-direction:column; gap:8px;
  z-index:1003; overflow:visible;
}
.vbd-share-btn, .vbd-copy-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:none; border-radius:10px;
  background:rgba(0,0,0,.55); color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .2s, background-color .2s, box-shadow .2s;
}
.vbd-share-btn:hover, .vbd-copy-btn:hover{
  transform: translateY(-1px);
  background:rgba(0,0,0,.7);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.vbd-share-btn i, .vbd-copy-btn i{ font-size:18px; line-height:1; }
/* auto-hide bersama nav */
.vbd-viewer:not(.vbd-ui-show) .vbd-share{
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s, visibility .2s;
}
.vbd-viewer.vbd-ui-show .vbd-share{
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Share Box */
.vbd-sharebox{
  position:absolute; top:58px; right:10px; /* di-override JS */
  min-width: clamp(240px, 30vw, 360px);
  background:#111; color:#fff;
  border-radius:12px; padding:12px; z-index:1003;
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25);
  display:none;
}
.vbd-sharebox.show{ display:block; }
.vbd-sharebox-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px;
}
.vbd-sharebox-title{ font-size:14px; font-weight:700; letter-spacing:.3px; }
.vbd-sharebox-close{
  width:32px; height:32px; border:none; border-radius:8px; background:#222; color:#fff; cursor:pointer;
}
.vbd-sharebox-body{ display:flex; gap:8px; }
.vbd-sharebox input{
  flex:1; min-width:0; border:1px solid #333; background:#000; color:#eee;
  border-radius:8px; padding:10px 12px; font-size:13px;
}
.vbd-sharebox .btn-copy{
  flex:0 0 auto; min-width:80px;
  border:none; border-radius:8px; background:#2a7; color:#fff;
  font-weight:700; cursor:pointer; padding:10px 12px;
}
.vbd-sharebox .btn-copy.copied{ background:#2a7a2a; }

/* Tooltip */
.vbd-tip{ position:relative; pointer-events:auto; }
.vbd-tip[data-tip]::after{
  content: attr(data-tip);
  position:absolute; top:50%; right:110%;
  transform: translateY(-50%) translateX(4px);
  background:#000; color:#fff; font-size:12px; line-height:1.2;
  padding:6px 8px; border-radius:6px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none; z-index:1005;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
.vbd-tip[data-tip]::before{
  content:""; position:absolute; top:50%; right:100%;
  transform: translateY(-50%);
  border:6px solid transparent; border-left-color:#000;
  opacity:0; visibility:hidden; pointer-events:none; z-index:1005;
  transition: opacity .15s ease, visibility .15s ease;
}
.vbd-tip:hover::after, .vbd-tip:focus-visible::after,
.vbd-tip:hover::before, .vbd-tip:focus-visible::before{
  opacity:1; visibility:visible;
}
.vbd-tip:hover::after, .vbd-tip:focus-visible::after{
  transform: translateY(-50%) translateX(0);
}

/* ===== Tombol Close khusus viewer (mode 2/3 bila dipakai di viewer) ===== */
.vbd-close{
  position: absolute; /* posisinya diatur JS mengikuti media */
  top: 10px; left: auto; /* akan di-override JS */
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px;
  background: rgba(0,0,0,.70); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 1005; /* di atas share (1003) dan nav (1002) */
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.vbd-close:hover{ transform: translateY(-1px); background: rgba(0,0,0,.82); box-shadow: 0 6px 16px rgba(0,0,0,.30); }
.vbd-close:focus-visible{ outline: 2px solid #cc0a0a; outline-offset: 2px; }
.vbd-viewer:not(.vbd-ui-show) .vbd-close{ opacity: 1; visibility: visible; }

/* Close dalam LIGHTBOX: lightbox sudah punya X sendiri */
.vbd-lightbox .vbd-close{ display:none; }

/* ================= FULLSCREEN TWEAKS ================= */
.vbd-viewer:fullscreen, .vbd-viewer:-webkit-full-screen { background:#000; }
.vbd-viewer:fullscreen #vbd-mainSlot, .vbd-viewer:-webkit-full-screen #vbd-mainSlot { width:100%; height:100%; }
#vbd-fsToggle i { font-size:16px; }

/* ===================== LIGHTBOX WRAPPER ===================== */
.vbd-lbbox{
  position:relative;
  display:inline-block;
  line-height:0;
}
.vbd-lbbox img, .vbd-lbbox video{
  display:block;
  max-width:min(1200px,95vw);
  max-height:90vh;
  object-fit:contain;
  border-radius:12px;
  background:#000;
}

/* Watermark text tetap full wrapper */
.vbd-lbbox .vbd-wm-lb{
  position:absolute;
  left:var(--hx,0); top:var(--hy,0);
  width:var(--hw,100%); height:var(--hh,100%);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; text-align:center; z-index:1002;
  font-weight:600; letter-spacing:.08em;
  font-size:clamp(12px, 1.6vw, 18px);
  color:rgba(255,255,255,.32);
  text-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/* Jaring di lightbox: hormati variabel --hx/--hy/--hw/--hh */
.vbd-lbbox .vbd-wm-x-lb{
  position:absolute;
  left:var(--hx,0); top:var(--hy,0);
  width:var(--hw,100%); height:var(--hh,100%);
  pointer-events:none; z-index:999;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 1.2px, rgba(0,0,0,0) 1.2px 120px);
  background-repeat:repeat; background-position:0 0;
}

.vbd-lbbox .vbd-wm-x-lb,
.vbd-lbbox .vbd-wm-lb{
  user-select:none;
}

/* ===================== Anti-download (deterrent) ===================== */
.vbd-protect{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  user-drag:none;
}
.vbd-lightbox, .vbd-viewer{ -webkit-touch-callout:none; }

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

@media (max-width:576px){
  .vbd-viewer{ max-height:360px; }
  .vbd-thumb{
  z-index:0; width:100px; height:62px; border-radius:10px; }
  .vbd-thumb.badge::after{
    height:18px; padding:0 8px; font-size:10px; left:6px; top:6px; border-radius:5px;
  }
  .vbd-sharebox{ min-width: clamp(220px, 80vw, 320px); }
  .vbd-share{ overflow:visible; }
  .vbd-tip[data-tip]::after{
    right: calc(100% + 8px); left:auto; top:50%; bottom:auto;
    transform: translateY(-50%);
    display:inline-flex; align-items:center;
    padding:6px 8px; font-size:11px; white-space:nowrap; min-width:max-content;
    writing-mode: horizontal-tb; text-orientation: mixed; max-width:none;
  }
  .vbd-tip[data-tip]::before{
    right:100%; left:auto; top:50%; bottom:auto; transform: translateY(-50%);
    border:6px solid transparent; border-left-color:#000; border-top-color:transparent;
  }
}

/* Hormati preferensi reduced motion */
@media (prefers-reduced-motion: reduce){
  #vbd-btnPrev, #vbd-btnNext,
  .vbd-thumb, .vbd-thumb::before,
  .vbd-thumb-wrap > img, .vbd-thumb-wrap > video,
  .vbd-thumb.badge::after,
  .vbd-share, .vbd-share-btn, .vbd-copy-btn, .vbd-sharebox{
    transition:none !important;
  }
}

/* Kompatibilitas webkit */
video::-webkit-media-controls-pip-button{ display:none !important; }
video::-webkit-media-controls-enclosure { overflow:hidden; }
video::-webkit-media-controls-overlay-play-button{ display:none !important; }

video::-webkit-media-controls-fullscreen-button{ display:none !important; }

.vbd-thumb.is-active{ z-index:5; }