/* =========================================================
 * Video Spacing Definitive Fix V1.3
 * Menghapus perhitungan rasio ganda Bootstrap secara paksa.
 * ======================================================= */

/*
 * Berlaku walaupun wrapper masih mempunyai:
 * .ratio, .ratio-16x9, .video-ratio, atau .youtube-clean-ratio.
 */
.video-ratio,
.video-ratio.ratio,
.ratio.video-ratio,
.youtube-clean-ratio,
.ratio.youtube-clean-ratio {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 18px;
  background: #101512;
}

/* Ini adalah sumber ruang kosong setinggi satu video. */
.video-ratio::before,
.video-ratio.ratio::before,
.ratio.video-ratio::before,
.youtube-clean-ratio::before,
.ratio.youtube-clean-ratio::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Semua isi media harus memenuhi kotak 16:9 yang sama. */
.video-ratio > iframe,
.video-ratio > .youtube-clean-preview,
.youtube-clean-ratio > iframe,
.youtube-clean-ratio > .youtube-clean-preview {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none;
  border: 0 !important;
  border-radius: inherit;
}

.video-ratio > .youtube-clean-preview img,
.youtube-clean-ratio > .youtube-clean-preview img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Jarak normal antara thumbnail dan judul video. */
.video-ratio + h1,
.video-ratio + h2,
.video-ratio + h3,
.video-ratio + h4,
.video-ratio + h5,
.video-ratio + h6,
.youtube-clean-ratio + h1,
.youtube-clean-ratio + h2,
.youtube-clean-ratio + h3,
.youtube-clean-ratio + h4,
.youtube-clean-ratio + h5,
.youtube-clean-ratio + h6 {
  margin-top: 1rem !important;
}

/* Pengaman tambahan untuk kolom video beranda. */
.section .row > [class*="col-"] > .video-ratio,
.section .row > [class*="col-"] > .youtube-clean-ratio {
  flex: none !important;
}

@media (max-width: 575.98px) {
  .video-ratio,
  .youtube-clean-ratio {
    border-radius: 14px;
  }
}