/* =========================================================
 * YouTube Clean Preview
 * ======================================================= */
.youtube-clean-preview{
  appearance:none;
  border:0;
  padding:0;
  width:100%;
  height:100%;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:inherit;
  background:#101512;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.youtube-clean-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}

.youtube-clean-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.22));
  pointer-events:none;
}

.youtube-clean-preview__play{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#08794b,#054c31);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
  font-size:2.15rem;
  transition:transform .22s ease,box-shadow .22s ease;
}

.youtube-clean-preview__play i{
  transform:translateX(2px);
}

.youtube-clean-preview:hover img,
.youtube-clean-preview:focus-visible img{
  transform:scale(1.035);
  filter:saturate(1.05);
}

.youtube-clean-preview:hover .youtube-clean-preview__play,
.youtube-clean-preview:focus-visible .youtube-clean-preview__play{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}

.youtube-clean-preview__label{
  position:absolute;
  z-index:2;
  left:14px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .65rem;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.48);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:.75rem;
  font-weight:700;
}

@media(max-width:575.98px){
  .youtube-clean-preview__play{
    width:58px;
    height:58px;
    font-size:1.75rem;
  }

  .youtube-clean-preview__label{
    left:10px;
    bottom:9px;
    padding:.34rem .55rem;
    font-size:.68rem;
  }
}


/* =========================================================
 * YouTube Clean Preview V1.2 — wrapper rasio mandiri
 * ======================================================= */
.youtube-clean-ratio{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:18px;
  background:#101512;
}

/* Mematikan pseudo-element Bootstrap bila class lama belum sempat dibuang. */
.youtube-clean-ratio::before{
  display:none !important;
  content:none !important;
  padding:0 !important;
}

.youtube-clean-ratio > .youtube-clean-preview{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:inherit;
}

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

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