/* Container / Section / Column R2 Slideshow Wrapper */
.r2-has-slideshow {
	position: relative !important;
	overflow: hidden !important;
}

/* Pastikan container yang belum memiliki widget tetap memiliki ruang/tinggi untuk menampilkan gambar */
.r2-has-slideshow:empty,
.r2-has-slideshow > .e-con-inner:empty,
.r2-has-slideshow > .elementor-container:empty {
	min-height: 450px !important;
}

/* Konten di dalam container selalu berada di atas slideshow dan tetap interaktif */
.r2-has-slideshow > .e-con-inner,
.r2-has-slideshow > .elementor-container,
.r2-has-slideshow > .elementor-widget-wrap,
.r2-has-slideshow > *:not(.r2-bg-slideshow):not(.elementor-background-overlay) {
	position: relative !important;
	z-index: 2 !important;
	background-color: transparent !important;
}

/* Background overlay tetap di atas slideshow tetapi di bawah konten teks/widget */
.r2-has-slideshow > .elementor-background-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

/* Sembunyikan slideshow default Elementor Pro yang kosong */
.r2-has-slideshow > .elementor-background-slideshow {
	display: none !important;
}

/* Wrapper Utama Slideshow R2 */
.r2-bg-slideshow {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Setiap Slide */
.r2-bg-slide {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
	will-change: transform, opacity;
}

/* Layer Gambar di dalam Slide: Mewarisi class selector bawaan Elementor agar kontrol Background Size & Position bekerja 100% */
.r2-bg-slide-inner,
.r2-bg-slideshow .elementor-background-slideshow__slide__image {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-repeat: no-repeat !important;
	background-size: cover;
	background-position: center center;
	transform: scale(1);
	transform-origin: center center;
	will-change: transform;
}

/* Efek Ken Burns (Zoom In / Zoom Out) */
@keyframes r2-ken-in {
	from { transform: scale(1); }
	to   { transform: scale(1.18); }
}
@keyframes r2-ken-out {
	from { transform: scale(1.18); }
	to   { transform: scale(1); }
}
.r2-ken-burns--in {
	animation-name: r2-ken-in !important;
	animation-timing-function: linear !important;
	animation-fill-mode: forwards !important;
}
.r2-ken-burns--out {
	animation-name: r2-ken-out !important;
	animation-timing-function: linear !important;
	animation-fill-mode: forwards !important;
}

/* ==========================================================================
 * DUKUNGAN ELEMENTOR EDITOR MODE
 * ========================================================================== */
.elementor-editor-active .r2-has-slideshow,
.elementor-editor-preview .r2-has-slideshow {
	position: relative !important;
}

.elementor-editor-active .r2-has-slideshow:empty,
.elementor-editor-active .r2-has-slideshow > .e-con-inner:empty,
.elementor-editor-active .r2-has-slideshow > .elementor-empty-view,
.elementor-editor-preview .r2-has-slideshow:empty,
.elementor-editor-preview .r2-has-slideshow > .e-con-inner:empty {
	min-height: 400px !important;
	background-color: transparent !important;
}

.elementor-editor-active .r2-has-slideshow > .elementor-element-overlay {
	z-index: 3 !important;
}

/* ==========================================================================
 * WIDGET GALLERY CLOUDFLARE R2
 * ========================================================================== */

/* Basic Gallery Flex Layout */
.elementor-image-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.elementor-image-gallery .gallery .gallery-item {
	box-sizing: border-box;
}

/* Kolom Basic Gallery 1 - 10 */
.elementor-image-gallery .gallery.gallery-columns-1 .gallery-item { width: 100%; max-width: 100%; }
.elementor-image-gallery .gallery.gallery-columns-2 .gallery-item { width: 50%; max-width: 50%; }
.elementor-image-gallery .gallery.gallery-columns-3 .gallery-item { width: 33.3333%; max-width: 33.3333%; }
.elementor-image-gallery .gallery.gallery-columns-4 .gallery-item { width: 25%; max-width: 25%; }
.elementor-image-gallery .gallery.gallery-columns-5 .gallery-item { width: 20%; max-width: 20%; }
.elementor-image-gallery .gallery.gallery-columns-6 .gallery-item { width: 16.6666%; max-width: 16.6666%; }
.elementor-image-gallery .gallery.gallery-columns-7 .gallery-item { width: 14.2857%; max-width: 14.2857%; }
.elementor-image-gallery .gallery.gallery-columns-8 .gallery-item { width: 12.5%; max-width: 12.5%; }
.elementor-image-gallery .gallery.gallery-columns-9 .gallery-item { width: 11.1111%; max-width: 11.1111%; }
.elementor-image-gallery .gallery.gallery-columns-10 .gallery-item { width: 10%; max-width: 10%; }

/* Default spacing hanya jika pengguna TIDAK memilih custom gap di panel Elementor */
.elementor-widget-image-gallery:not(.gallery-spacing-custom) .gallery,
.elementor-image-gallery:not(.gallery-spacing-custom) .gallery {
	margin: 0 -10px -10px 0;
}
.elementor-widget-image-gallery:not(.gallery-spacing-custom) .gallery .gallery-item,
.elementor-image-gallery:not(.gallery-spacing-custom) .gallery .gallery-item {
	padding: 0 10px 10px 0;
}

.elementor-image-gallery .gallery .gallery-icon {
	width: 100%;
}

.elementor-image-gallery .gallery .gallery-icon a {
	display: block;
	width: 100%;
	outline: none;
}

.elementor-image-gallery .gallery .gallery-icon img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.elementor-image-gallery .gallery .gallery-caption {
	word-break: break-word;
}

/* Responsif Layar Tablet dan Ponsel (Mobile) untuk Basic Gallery */
@media (max-width: 767px) {
	.elementor-image-gallery .gallery[class*="gallery-columns-"]:not(.gallery-columns-1) .gallery-item {
		width: 50% !important;
		max-width: 50% !important;
	}
}

@media (max-width: 480px) {
	.elementor-image-gallery .gallery.gallery-columns-1 .gallery-item,
	.elementor-image-gallery .gallery[class*="gallery-columns-"]:not(.gallery-columns-2) .gallery-item {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-image-gallery .gallery.gallery-columns-2 .gallery-item {
		width: 50% !important;
		max-width: 50% !important;
	}
}