/* Homepage hero: foto tampil UTUH tanpa potongan (contain + tinggi mengikuti gambar). */
.home-carousel,
.home--d .home-carousel {
  --home-banner-fill: #120810;
  position: relative;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  padding-bottom: 0 !important;
  transform: none !important;
  overflow: hidden;
  background-color: var(--home-banner-fill);
  background-image: linear-gradient(180deg, #1a0a14 0%, #0a0612 48%, #160812 100%);
}

.home-carousel .slick-slider,
.home-carousel .slick-slider.slick-initialized,
.home-carousel .banner-slider {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  background: transparent;
}

.home-carousel .slick-slider .slick-list,
.home-carousel .slick-slider .slick-track,
.home-carousel .slick-slider .slick-slide,
.home-carousel .slick-slider .slick-slide > div,
.home-carousel .slick-slider .banner-slide-frame,
.home-carousel .slick-slider .slick-slide a {
  height: auto !important;
  min-height: 0 !important;
}

.home-carousel .slick-slider .slick-slide > div,
.home-carousel .slick-slider .banner-slide-frame,
.home-carousel .slick-slider .slick-slide a {
  display: block !important;
  width: 100%;
  line-height: 0;
  background-color: var(--home-banner-fill);
}

/* Skeleton saat refresh: frame punya tinggi + shimmer agar tidak terlihat transparan/bug. */
.home-carousel .banner-slide-frame {
  position: relative;
  min-height: 180px;
  background-color: #1a0a14;
  background-image: linear-gradient(100deg, #1a0a14 30%, #2a1424 50%, #1a0a14 70%);
  background-size: 200% 100%;
  animation: home-banner-shimmer 1.2s linear infinite;
}
@media (max-width: 768px) {
  .home-carousel .banner-slide-frame {
    min-height: 120px;
  }
}
@keyframes home-banner-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.home-carousel .slick-slider .slick-slide img,
.home-carousel .slick-slider img.slide,
.home-carousel .slick-slider .slide {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  pointer-events: none;
  position: relative;
  z-index: 1;
  background-color: var(--home-banner-fill);
  /* Fade-in halus saat gambar selesai load, menutup shimmer. */
  animation: home-banner-fadein .4s ease;
}
@keyframes home-banner-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.home-carousel .slick-slider .slick-dots {
  bottom: 8px;
  z-index: 2;
}