/**
 * Background foto masjid (image_url) pada hero homepage — animasi Ken Burns halus.
 */
.mosque-hero-has-photo {
    position: relative;
    overflow: hidden;
}

.mosque-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mosque-hero-bg__image {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
    animation: mosqueHeroKenBurns 24s ease-in-out infinite alternate;
}

.mosque-hero-has-photo .fl-hero-overlay,
.mosque-hero-has-photo .nb-hero-overlay,
.mosque-hero-has-photo > [style*="position:absolute"][style*="inset:0"],
.mosque-hero-has-photo .ad-hero::before {
    z-index: 1;
}

.mosque-hero-has-photo .fl-hero-bottom,
.mosque-hero-has-photo .nb-hero-inner,
.mosque-hero-has-photo .nb-hero-stats,
.mosque-hero-has-photo .fs2-hero-left,
.mosque-hero-has-photo .fs2-hero-right,
.mosque-hero-has-photo .ad-hero-inner,
.mosque-hero-has-photo .container[style*="z-index:2"],
.mosque-hero-has-photo #hero .container {
    position: relative;
    z-index: 2;
}

/* Flexstart2: panel kiri semi-transparan di atas foto */
.fs2-hero.mosque-hero-has-photo .fs2-hero-left {
    background: linear-gradient(
        145deg,
        rgba(15, 12, 41, 0.92) 0%,
        rgba(48, 43, 99, 0.88) 45%,
        rgba(36, 36, 62, 0.85) 100%
    ) !important;
}

.fs2-hero.mosque-hero-has-photo .fs2-hero-cut {
    background: linear-gradient(145deg, rgba(15, 12, 41, 0.92) 0%, rgba(48, 43, 99, 0.88) 100%) !important;
}

.fs2-hero.mosque-hero-has-photo .fs2-hero-right {
    background: rgba(248, 249, 252, 0.97);
    position: relative;
    z-index: 2;
}

/* Adam: overlay gelap di atas foto */
.ad-hero.mosque-hero-has-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(26, 31, 78, 0.88) 0%,
        rgba(61, 71, 112, 0.8) 45%,
        rgba(31, 95, 91, 0.82) 100%
    );
    pointer-events: none;
}

.ad-hero.mosque-hero-has-photo .ad-circle {
    z-index: 1;
}

@keyframes mosqueHeroKenBurns {
    0% {
        transform: scale(1.04) translate(0, 0);
    }
    100% {
        transform: scale(1.12) translate(-1.2%, -0.8%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mosque-hero-bg__image {
        animation: none;
        inset: 0;
        transform: scale(1.05);
    }
}