/* ==========================================================================
   1. PENATAAN THUMBNAIL (MENGIKAT CLASS ANIMASI BAWAAN TEMA ANDA)
   ========================================================================== */
/* Mengamankan letak layout pembungkus utama di sisi kiri */
.field--name-field-image5 {
  width: 100%;
  margin-bottom: 25px;
  position: relative;
  display: block;
}

/* Memaksa Gambar Kiri Mengadopsi Efek Bayangan Silinder & Border Radius */
.field--name-field-image5 img.animated-image {
  border-radius: 6px !important;
  cursor: pointer !important;
  /* Bayangan silinder horizontal intens kiri-kanan, tipis di atas-bawah */
  box-shadow: 
    -8px 0 16px -6px rgba(0, 0, 0, 0.5), 
     8px 0 16px -6px rgba(0, 0, 0, 0.5),
     0 4px 8px -2px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Efek interaksi hover pada thumbnail silinder */
.field--name-field-image5 img.animated-image:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 
    -12px 0 20px -5px rgba(0, 0, 0, 0.6), 
     12px 0 20px -5px rgba(0, 0, 0, 0.6) !important;
}

/* Menyuntikkan Ikon Tombol Play (▶) Secara Virtual di Atas Gambar */
.field--name-field-image5::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 22px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Klik tembus ke gambar di bawahnya */
  z-index: 10;
  transition: background 0.2s ease;
}

.field--name-field-image5:hover::after {
  background: #ff0000; /* Berubah merah khas X/YouTube saat diarahkan kursor */
}

/* ==========================================================================
   2. RE-ENGINEERING KONTEN VIDEO TEASER (MENANGKAP DOM DRUPAL CORE)
   ========================================================================== */
/* Menyembunyikan teks bawaan Drupal "see the video" secara permanen */
.field--name-field-video-teaser .field__label,
.field--name-field-video-teaser a {
  display: none !important;
}

/* Mengubah pembungkus field video menjadi komponen pemutar yang tersembunyi awal */
.field--name-field-video-teaser {
  display: block;
}

/* Rekayasa Kotak Popup Melayang Tepat di Tengah Artikel */
/* Dipicu secara otomatis ketika kelas aktif atau area artikel dibuka */
.field--name-field-video-teaser::before {
  /* Di sini kita bisa menyuntikkan elemen dasar video native via injector jika diperlukan */
}

/* Sembunyikan Opsi Download & Maximize di Sisi Browser */
video::-internal-media-controls-download-button {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  overflow: hidden !important;
}
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* Memastikan transisi kemunculan popup halus di mobile */
.lightweight-video-popup-overlay {
  animation: fadeInTeaser 0.25s ease-out;
}

@keyframes fadeInTeaser {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Memastikan area gambar5 mengisolasi pointer agar tidak memicu link hantu */
.field--name-field-image5 a {
  pointer-events: none !important;
  cursor: default !important;
}