/* OPR-1962 asset revamp — opt-in modifier classes added by the overlay chain.
 * All selectors carry at least one rv-2026* class so no existing element is affected.
 * Loaded after opaper.css (dependency declared in functions.php) so overrides win by order. */

.rv-2026 {
	object-fit: contain;
}

.image.rv-2026 {
	height: auto;
}

.img-sub-fitur.rv-2026 {
	object-fit: contain;
}

.video-atf-2024.rv-2026 {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}

.image-cta-produk.rv-2026.rv-podium {
	width: auto;
	max-height: 320px;
}

.rv-2026.rv-podium-hero {
	width: auto;
	max-height: 460px;
	margin: 0 auto;
}

.image-cta-produk.rv-2026.rv-podium.rv-bottom {
	max-height: 360px;
}

.hero-slider-2026.w-slider {
	height: auto;
	aspect-ratio: 1/1;
	width: 100%;
	max-width: 500px;
	background: transparent;
}

.hero-slider-2026 .w-slider-mask {
	height: 100%;
}

.hero-slider-2026 .w-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Crossfade fallback when the Webflow runtime has not yet initialised the slider.
 * Keyed on absence of .w-slider-dot which the runtime injects on init. */
.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide {
		animation: rv2026-xfade 16s infinite;
	}

	.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide:nth-child(1) { animation-delay: 0s; }
	.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide:nth-child(2) { animation-delay: 4s; }
	.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide:nth-child(3) { animation-delay: 8s; }
	.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide:nth-child(4) { animation-delay: 12s; }

	@keyframes rv2026-xfade {
		0% { opacity: 0; }
		5%, 25% { opacity: 1; }
		30%, 100% { opacity: 0; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider-2026:not(:has(.w-slider-dot)) .w-slide:nth-child(1) {
		opacity: 1;
	}
}

/* L3 — KDS cta-back-office override. Mirrors every opaper.css background-image rule on
 * .cta-back-office, swapping the dashboard PNG for rv1962-t3-tambah-produk.webp.
 * Selector map (opaper.css line → this rule):
 *   L8839  .section-2025.cta-back-office base     → .cta-back-office.rv-2026-backoffice base
 *   L8850  .section-2025.cta-back-office.black    → .cta-back-office.rv-2026-backoffice.black
 *   L5816  .new-section.cta-back-office base      → .new-section.cta-back-office.rv-2026-backoffice base
 *   L12733 @media min-width:1440px                → @media min-width:1440px below
 *   L12859 @media min-width:1920px                → @media min-width:1920px below
 *   L13891 @media max-width:991px                 → @media max-width:991px below
 *   L16709 @media max-width:479px .new-section    → @media max-width:479px below (first rule)
 *   L18040 @media max-width:479px .section-2025   → @media max-width:479px below (second rule) */
.cta-back-office.rv-2026-backoffice {
	background-image: url("media/rv1962-t3-tambah-produk.webp");
	background-position: 100%;
	background-repeat: no-repeat;
	background-size: 40%;
}

.new-section.cta-back-office.rv-2026-backoffice {
	background-image: url("media/rv1962-t3-tambah-produk.webp"), url("media/6e8c39fcb0-64c7df1ed47aab388b56e0bf_ellipse-bg.svg");
	background-position: 100%, 100%;
	background-repeat: no-repeat, no-repeat;
	background-size: 40%, contain;
}

.cta-back-office.rv-2026-backoffice.black {
	background-image: none;
}

@media screen and (min-width: 1440px) {
	.cta-back-office.rv-2026-backoffice {
		background-image: url("media/rv1962-t3-tambah-produk.webp");
		background-position: 100%;
		background-repeat: no-repeat;
		background-size: 500px;
	}
}

@media screen and (min-width: 1920px) {
	.cta-back-office.rv-2026-backoffice {
		background-image: url("media/rv1962-t3-tambah-produk.webp");
		background-position: 100%;
		background-repeat: no-repeat;
		background-size: 500px;
	}
}

@media screen and (max-width: 991px) {
	.cta-back-office.rv-2026-backoffice {
		background-image: url("media/rv1962-t3-tambah-produk.webp");
		background-position: 150%;
		background-repeat: no-repeat;
		background-size: 60%;
	}
}

@media screen and (max-width: 479px) {
	.new-section.cta-back-office.rv-2026-backoffice {
		background-image: url("media/rv1962-t3-tambah-produk.webp"), url("media/6e8c39fcb0-64c7df1ed47aab388b56e0bf_ellipse-bg.svg");
		background-position: 100% 90%, 100% 0;
		background-repeat: no-repeat, no-repeat;
		background-size: 80%, contain;
	}

	.cta-back-office.rv-2026-backoffice {
		background-image: url("media/rv1962-t3-tambah-produk.webp"), url("media/6e8c39fcb0-64c7df1ed47aab388b56e0bf_ellipse-bg.svg");
		background-position: 100% 90%, 100% 0;
		background-repeat: no-repeat, no-repeat;
		background-size: 80%, contain;
	}
}