.home-hero-image { display: block; width: 100%; height: auto; }

@media (max-width: 767.98px) {
    .home-hero-container { max-width: 100%; padding-inline: 8px; }
    .home-hero-carousel { padding-bottom: 44px; border-radius: 16px; background: var(--hijaumuda, #f1f5f9); }
    .home-hero-carousel .carousel-inner { border-radius: 16px 16px 0 0 !important; box-shadow: none; }
    .home-hero-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; }
    /* Reuse the same cached artwork as a quiet backdrop; the sharp image stays uncropped. */
    .home-hero-media::before { content: ''; position: absolute; inset: -16px; z-index: -1; background: var(--home-hero-art) center / cover no-repeat; filter: blur(14px); opacity: .28; }
    .home-hero-media > a, .home-hero-media .home-hero-image { z-index: 1; }
    .home-hero-media > a { display: block; position: absolute; inset: 0; }
    .home-hero-media .home-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .home-hero-carousel .carousel-control-prev,
    .home-hero-carousel .carousel-control-next { top: auto; bottom: 0; width: 44px; height: 44px; opacity: 1; color: var(--hijau); }
    .home-hero-carousel .carousel-control-prev { left: 4px; }
    .home-hero-carousel .carousel-control-next { right: 4px; }
    .home-hero-carousel .carousel-control-prev-icon,
    .home-hero-carousel .carousel-control-next-icon { width: 20px; height: 20px; background-color: var(--hijau) !important; background-image: none; border: 0 !important; border-radius: 0 !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
    .home-hero-carousel .carousel-control-next-icon { transform: rotate(180deg); }
    .home-hero-carousel .carousel-indicators { left: 52px; right: 52px; bottom: 0; height: 44px; margin: 0; padding: 0; align-items: center; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .home-hero-carousel.carousel .carousel-indicators button { display: flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 44px; margin: 0; border: 0; background: transparent !important; opacity: 1; }
    .home-hero-carousel .carousel-indicators button:first-child { margin-left: auto; }
    .home-hero-carousel .carousel-indicators button:last-child { margin-right: auto; }
    .home-hero-carousel .carousel-indicators button::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 99px; background: var(--hijau); opacity: .35; }
    .home-hero-carousel .carousel-indicators button.active::after { width: 16px; opacity: 1; }
    .home-hero-carousel button:focus-visible { outline: 2px solid var(--hijau); outline-offset: -3px; }
}
@media (max-width: 767.98px) and (orientation: landscape) {
    .home-hero-media { aspect-ratio: 16 / 9; max-height: 60svh; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-carousel .carousel-item { transition: none; }
}