/* RBM Motion — hero beranda */

/* ---------- 1. Foto latar bergantian ---------- */
.product-content > .wp-block-cover .rbm-hero-bg-slide {
	transform: scale(1);
	/* saat keluar: pudar 1.6 dtk, lalu zoom dikembalikan setelah tak terlihat */
	transition: opacity 1.6s ease-in-out, transform 0s linear 1.6s;
}
.product-content > .wp-block-cover .rbm-hero-bg-slide.is-extra {
	opacity: 0;
}
.product-content > .wp-block-cover .rbm-hero-bg-slide.is-active {
	opacity: 1;
	transform: scale(1.08);
	/* saat tampil: zoom sangat pelan */
	transition: opacity 1.6s ease-in-out, transform 9s linear;
}

/* ---------- 2. Foto produk: masuk, lalu melayang pelan ---------- */
.product-content .banner-section .slider-for .right-img-box {
	position: relative;
}
.product-content .banner-section .slider-for .right-img-box figure {
	position: relative;
	z-index: 1;
}

/* cahaya oranye + cincin putus-putus di belakang produk */
.product-content .banner-section .slider-for .right-img-box::before,
.product-content .banner-section .slider-for .right-img-box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 0;
}
.product-content .banner-section .slider-for .right-img-box::before {
	width: min(440px, 85%);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(242, 87, 43, 0.5) 0%, rgba(242, 87, 43, 0) 70%);
}
.product-content .banner-section .slider-for .right-img-box::after {
	width: min(490px, 95%);
	aspect-ratio: 1;
	border: 2px dashed rgba(242, 87, 43, 0.6);
}

/* animasi hanya jalan di slide yang aktif, dan mulai ulang tiap slide berganti */
.product-content .banner-section .slider-for .slick-current .right-img-box figure {
	animation:
		rbmProdIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
		rbmFloat 4.5s ease-in-out 0.9s infinite;
}
.product-content .banner-section .slider-for .slick-current .right-img-box::after {
	animation: rbmSpin 28s linear infinite;
}

@keyframes rbmProdIn {
	from { opacity: 0; transform: translateY(44px) scale(0.86) rotate(-4deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes rbmFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@keyframes rbmSpin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Hormati pengaturan "kurangi gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {
	.product-content > .wp-block-cover .rbm-hero-bg-slide,
	.product-content > .wp-block-cover .rbm-hero-bg-slide.is-active {
		transform: none;
		transition: opacity 0.4s linear;
	}
	.product-content .banner-section .slider-for .slick-current .right-img-box figure,
	.product-content .banner-section .slider-for .slick-current .right-img-box::after {
		animation: none;
	}
}

/* ---------- 3. Foto beranda: muncul saat section terbuka + zoom saat hover ----------
   Otomatis untuk kartu kategori (.category-bg).
   Untuk foto lain: beri class "rbm-reveal" (muncul) dan/atau "rbm-zoom" (zoom hover)
   lewat Advanced > Additional CSS class(es) pada blok Image. */
.category-bg,
.rbm-reveal,
.rbm-zoom {
	overflow: hidden;
}

.category-bg .wp-block-cover__image-background,
.rbm-zoom img,
.rbm-reveal img {
	transition:
		clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1) var(--rbm-delay, 0s),
		scale 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rbm-delay, 0s),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* keadaan awal (hanya dipasang oleh JS, jadi tanpa JS foto tetap terlihat) */
.rbm-prep img {
	clip-path: inset(100% 0 0 0);
	scale: 1.2;
}
.rbm-prep .wp-block-cover__inner-container {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.7s ease calc(var(--rbm-delay, 0s) + 0.5s),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--rbm-delay, 0s) + 0.5s);
}

/* keadaan akhir: foto terbuka dari bawah ke atas sambil mengendap */
.rbm-prep.is-in img {
	clip-path: inset(0 0 0 0);
	scale: 1;
}
.rbm-prep.is-in .wp-block-cover__inner-container {
	opacity: 1;
	transform: none;
}

/* zoom saat hover (hanya perangkat dengan kursor) */
@media (hover: hover) and (pointer: fine) {
	.category-bg:hover .wp-block-cover__image-background,
	.rbm-zoom:hover img {
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.category-bg .wp-block-cover__image-background,
	.rbm-zoom img,
	.rbm-reveal img {
		transition: transform 0.3s linear;
	}
	.category-bg:hover .wp-block-cover__image-background,
	.rbm-zoom:hover img {
		transform: scale(1.03);
	}
}

/* ---------- 4. Halaman detail produk: zoom ala e-commerce ----------
   Foto membesar saat kursor di atasnya dan bergeser mengikuti gerak kursor.
   Otomatis untuk blok gambar ber-class "rbm-product-image". Tingkat zoom bisa diubah
   lewat --rbm-zoom-scale (default 2). */
figure.wp-block-image.rbm-product-image {
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
	figure.wp-block-image.rbm-product-image {
		cursor: zoom-in;
	}
	figure.wp-block-image.rbm-product-image img {
		transform-origin: var(--zx, 50%) var(--zy, 50%);
		transition:
			transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
			transform-origin 0.12s linear;
		will-change: transform;
	}
	figure.wp-block-image.rbm-product-image.is-zooming img {
		transform: scale(var(--rbm-zoom-scale, 2));
	}
}

@media (prefers-reduced-motion: reduce) {
	figure.wp-block-image.rbm-product-image img {
		transition: none;
	}
}

/* ---------- 5. Daftar misi: nomor bergaya bearing + garis penghubung ----------
   Pasang class "rbm-mission" pada blok List (bernomor atau berbullet, keduanya bisa) di halaman Tentang RBM.
   Warna dan ukuran bisa diubah lewat variabel di bawah. */
@property --rbm-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
@keyframes rbmRing {
	to { --rbm-a: 360deg; }
}

ol.rbm-mission,
ul.rbm-mission {
	--rbm-accent: #F2572B;
	--rbm-accent-2: #ff7a4d;
	--rbm-dark: #1a3e4a;
	--rbm-size: 56px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rbm-m;
}
ol.rbm-mission > li,
ul.rbm-mission > li {
	position: relative;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 2px 0 36px calc(var(--rbm-size) + 26px);
	min-height: var(--rbm-size);
	counter-increment: rbm-m;
}
ol.rbm-mission > li:not(:last-child),
ul.rbm-mission > li:not(:last-child) {
	min-height: calc(var(--rbm-size) + 52px);
}
ol.rbm-mission > li:last-child,
ul.rbm-mission > li:last-child {
	padding-bottom: 0;
}

/* judul singkat (teks tebal di awal poin) tampil di barisnya sendiri */
ol.rbm-mission > li > strong:first-child,
ul.rbm-mission > li > strong:first-child {
	display: block;
	margin-bottom: 2px;
	font-size: 1.08em;
}

/* nomor: cakram gelap dengan cincin bersegmen seperti bearing */
ol.rbm-mission > li::before,
ul.rbm-mission > li::before {
	content: counter(rbm-m);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--rbm-size);
	height: var(--rbm-size);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: calc(var(--rbm-size) * 0.36);
	font-weight: 700;
	line-height: 1;
	background:
		radial-gradient(circle closest-side, var(--rbm-dark) 0 72%, transparent 73%),
		repeating-conic-gradient(from var(--rbm-a), var(--rbm-accent) 0deg 12deg, var(--rbm-accent-2) 12deg 24deg);
	box-shadow: 0 6px 16px rgba(26, 62, 74, 0.22);
}

/* garis penghubung ke poin berikutnya */
ol.rbm-mission > li:not(:last-child)::after,
ul.rbm-mission > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--rbm-size) / 2 - 1px);
	top: calc(var(--rbm-size) + 6px);
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(var(--rbm-accent), rgba(242, 87, 43, 0.15));
	transform-origin: top;
}

/* keadaan awal (dipasang JS; tanpa JS daftar tampil normal) */
ol.rbm-mission.is-ready > li,
ul.rbm-mission.is-ready > li {
	opacity: 0;
	transform: translateX(-16px);
}
ol.rbm-mission.is-ready > li::before,
ul.rbm-mission.is-ready > li::before {
	transform: scale(0.5);
}
ol.rbm-mission.is-ready > li:not(:last-child)::after,
ul.rbm-mission.is-ready > li:not(:last-child)::after {
	transform: scaleY(0);
}

/* saat daftar terlihat: poin muncul berurutan, garis tumbuh ke poin berikutnya */
ol.rbm-mission.is-ready.is-in > li,
ul.rbm-mission.is-ready.is-in > li {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.6s ease calc(var(--i, 0) * 0.5s),
		transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 0.5s);
}
ol.rbm-mission.is-ready.is-in > li::before,
ul.rbm-mission.is-ready.is-in > li::before {
	transform: none;
	transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 0.5s + 0.05s);
}
ol.rbm-mission.is-ready.is-in > li:not(:last-child)::after,
ul.rbm-mission.is-ready.is-in > li:not(:last-child)::after {
	transform: none;
	transition: transform 0.5s ease-out calc(var(--i, 0) * 0.5s + 0.4s);
}
/* cincin berputar sangat pelan */
ol.rbm-mission.is-in > li::before,
ul.rbm-mission.is-in > li::before {
	animation: rbmRing 14s linear infinite;
}

@media (max-width: 600px) {
	ol.rbm-mission,
ul.rbm-mission { --rbm-size: 46px; }
}

/* ---------- 6. Nilai perusahaan: kartu dengan ikon garis yang "menggambar" dirinya ----------
   Dipasang lewat blok Custom HTML (<ul class="rbm-values"> ... </ul>) di halaman Tentang RBM. */
@keyframes rbmValuePing {
	0%   { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.6); }
}
@keyframes rbmWiggle {
	0%, 100% { transform: none; }
	25%      { transform: translateY(-3px) rotate(-6deg); }
	60%      { transform: translateY(-1px) rotate(5deg); }
}

ul.rbm-values {
	--rbm-accent: #F2572B;
	--rbm-dark: #1a3e4a;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr; /* satu kolom, berurutan dari atas ke bawah (G-R-I-P) */
	gap: 16px;
}
ul.rbm-values > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 20px 22px;
	list-style: none;
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 14px;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ikon: cakram gelap, goresan oranye */
ul.rbm-values .rbm-v-icon {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--rbm-dark);
	color: var(--rbm-accent);
	border: 1px solid rgba(242, 87, 43, 0.4);
}
ul.rbm-values .rbm-v-icon svg {
	width: 30px;
	height: 30px;
}
ul.rbm-values .rbm-v-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--rbm-accent);
	opacity: 0;
	pointer-events: none;
}

ul.rbm-values .rbm-v-title {
	display: block;
	margin-bottom: 2px;
	font-size: 1.05em;
	letter-spacing: 0.06em;
}
ul.rbm-values .rbm-v-desc {
	display: block;
	line-height: 1.5;
}

/* huruf awal tiap nilai ditonjolkan, sehingga terbaca G-R-I-P dari atas ke bawah */
ul.rbm-values .rbm-v-title::first-letter {
	color: var(--rbm-accent);
	font-size: 1.45em;
	font-weight: 800;
}

/* keadaan awal (dipasang JS; tanpa JS kartu tampil normal) */
ul.rbm-values.is-ready > li {
	opacity: 0;
}
ul.rbm-values.is-ready .rbm-v-title,
ul.rbm-values.is-ready .rbm-v-desc {
	opacity: 0;
	transform: translateY(14px);
}
ul.rbm-values.is-ready .rbm-v-icon svg path,
ul.rbm-values.is-ready .rbm-v-icon svg circle {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
}

/* saat terlihat: kartu muncul bergantian, ikon digambar, lalu teks menyusul */
ul.rbm-values.is-ready.is-in > li {
	opacity: 1;
	transition:
		opacity 0.6s ease calc(var(--i, 0) * 0.28s),
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}
ul.rbm-values.is-ready.is-in .rbm-v-icon svg path,
ul.rbm-values.is-ready.is-in .rbm-v-icon svg circle {
	stroke-dashoffset: 0;
	opacity: 1;
	transition:
		stroke-dashoffset 1s ease-in-out calc(var(--i, 0) * 0.28s + 0.15s),
		opacity 0.01s linear calc(var(--i, 0) * 0.28s + 0.15s);
}
ul.rbm-values.is-ready.is-in .rbm-v-title {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.6s ease calc(var(--i, 0) * 0.28s + 0.55s),
		transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 0.28s + 0.55s);
}
ul.rbm-values.is-ready.is-in .rbm-v-desc {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.6s ease calc(var(--i, 0) * 0.28s + 0.7s),
		transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 0.28s + 0.7s);
}
/* cincin oranye berdenyut sekali setelah ikon selesai digambar */
ul.rbm-values.is-ready.is-in .rbm-v-icon::after {
	animation: rbmValuePing 1.1s ease-out calc(var(--i, 0) * 0.28s + 1s) forwards;
}

/* hover: kartu naik sedikit, ikon bergoyang kecil */
@media (hover: hover) and (pointer: fine) {
	ul.rbm-values > li:hover {
		transform: translateY(-4px);
		border-color: var(--rbm-accent);
		box-shadow: 0 10px 24px rgba(26, 62, 74, 0.14);
	}
	ul.rbm-values > li:hover .rbm-v-icon svg {
		animation: rbmWiggle 0.6s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	ul.rbm-values > li:hover .rbm-v-icon svg {
		animation: none;
	}
}

/* ---------- 7. Karusel fokus-tengah (3 kolom gambar + teks) ----------
   Pasang class "rbm-carousel" pada blok Columns. Unsur tengah tampil penuh,
   dua unsur di samping lebih kecil, redup, dan sebagian tertutup unsur tengah.
   Tanpa JS (atau dengan "kurangi gerakan") tiga kolom tampil seperti biasa. */
.wp-block-columns.rbm-carousel.is-ready {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	padding-block: 12px;
	overflow-x: clip;
	/* warna latar kartu; ubah kalau latar section berbeda dari warna dasar tema */
	--rbm-card-bg: var(--wp--preset--color--base, #fff);
}
.wp-block-columns.rbm-carousel.is-ready > .wp-block-column {
	background: var(--rbm-card-bg);
	border: 1px solid rgba(128, 128, 128, 0.18);
	border-radius: 14px;
	overflow: hidden;
	grid-area: 1 / 1;
	align-self: start;
	justify-self: center;
	width: 50%;
	min-width: 0;
	margin: 0;
	will-change: transform, opacity;
}
.wp-block-columns.rbm-carousel.is-ready.is-animated > .wp-block-column {
	transition:
		transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1),
		opacity 0.9s ease,
		filter 0.9s ease,
		box-shadow 0.9s ease;
}
.wp-block-columns.rbm-carousel.is-ready.is-animated > .wp-block-column > :not(figure) {
	transition: opacity 0.6s ease;
}

/* teks diberi ruang di dalam kartu */
.wp-block-columns.rbm-carousel.is-ready > .wp-block-column > :not(figure) {
	padding-inline: 18px;
}
.wp-block-columns.rbm-carousel.is-ready > .wp-block-column > :last-child {
	padding-bottom: 18px;
}

/* foto seragam */
.rbm-carousel.is-ready figure.wp-block-image {
	border-radius: 0;
}
.rbm-carousel.is-ready figure.wp-block-image img {
	width: 100%;
}
/* zoom hover foto dimatikan di sini: gerak utamanya adalah karusel */
.wp-block-columns.rbm-carousel.is-ready .rbm-zoom:hover img {
	transform: none;
}

/* posisi: tengah, kiri, kanan */
.wp-block-columns.rbm-carousel.is-ready > .is-center {
	transform: translateX(0) scale(1);
	opacity: 1;
	filter: none;
	z-index: 3;
	box-shadow: 0 18px 40px rgba(26, 62, 74, 0.28);
}
.wp-block-columns.rbm-carousel.is-ready > .is-left {
	transform: translateX(-64%) scale(0.8);
	opacity: 0.55;
	filter: saturate(0.7);
	z-index: 2;
	cursor: pointer;
}
.wp-block-columns.rbm-carousel.is-ready > .is-right {
	transform: translateX(64%) scale(0.8);
	opacity: 0.55;
	filter: saturate(0.7);
	z-index: 2;
	cursor: pointer;
}
/* kalau ada lebih dari tiga unsur, sisanya disembunyikan di belakang */
.wp-block-columns.rbm-carousel.is-ready > .is-hidden {
	transform: translateX(0) scale(0.6);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 781px) {
	.wp-block-columns.rbm-carousel.is-ready > .wp-block-column {
		width: 86%;
		word-break: normal;
		overflow-wrap: break-word; /* kata hanya dipotong kalau satu kata saja sudah lebih lebar dari baris */
		hyphens: manual;
	}
	.wp-block-columns.rbm-carousel.is-ready > .is-left {
		transform: translateX(-68%) scale(0.78);
	}
	.wp-block-columns.rbm-carousel.is-ready > .is-right {
		transform: translateX(68%) scale(0.78);
	}
	.wp-block-columns.rbm-carousel.is-ready > .wp-block-column > :not(figure) {
		padding-inline: 14px;
	}
	.wp-block-columns.rbm-carousel.is-ready > .wp-block-column > :last-child {
		padding-bottom: 14px;
	}
	.wp-block-columns.rbm-carousel .is-service-description {
		font-size: 0.95rem;
		line-height: 1.55;
	}
	.wp-block-columns.rbm-carousel.is-ready > .is-left > :not(figure),
	.wp-block-columns.rbm-carousel.is-ready > .is-right > :not(figure) {
		opacity: 0;
	}
}

/* ---------- 8. Judul karusel: ikon sebagai bullet di samping judul ----------
   Ikon dipasang lewat CSS (tanpa mengubah isi halaman), jadi teks judul tetap bisa
   diedit biasa di editor. Urutan ikon mengikuti urutan kolom: 1 medali, 2 kotak paket, 3 label harga. */
.wp-block-columns.rbm-carousel .is-service-name {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.25;
}
.wp-block-columns.rbm-carousel .is-service-name::before {
	content: "";
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #1a3e4a;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	box-shadow: 0 0 0 3px rgba(242, 87, 43, 0.18);
}
.wp-block-columns.rbm-carousel > .wp-block-column:nth-child(1) .is-service-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2572B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14.2 7 22l5-3 5 3-1.5-7.8'/%3E%3Cpath d='M9.5 9l1.8 1.8L14.7 7.4'/%3E%3C/svg%3E");
}
.wp-block-columns.rbm-carousel > .wp-block-column:nth-child(2) .is-service-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2572B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}
.wp-block-columns.rbm-carousel > .wp-block-column:nth-child(3) .is-service-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2572B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E");
}

/* ikon "memantul" sebentar setiap kali kartunya sampai di tengah */
@keyframes rbmTitleIcon {
	from { transform: scale(0.55) rotate(-14deg); }
	to   { transform: none; }
}
.wp-block-columns.rbm-carousel.is-ready.is-animated > .is-center .is-service-name::before {
	animation: rbmTitleIcon 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@media (max-width: 781px) {
	.wp-block-columns.rbm-carousel .is-service-name {
		gap: 10px;
		font-size: 1.1rem !important; /* !important: mengalahkan ukuran huruf bawaan blok (medium) */
	}
	.wp-block-columns.rbm-carousel .is-service-name::before {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
		background-size: 19px 19px;
	}
}

/* ---------- 9. Layar HP: ikon dan jarak lebih ramping untuk misi & nilai perusahaan ---------- */
@media (max-width: 600px) {
	/* misi: nomor lebih kecil, teks mendapat lebih banyak lebar */
	ol.rbm-mission,
ul.rbm-mission {
		--rbm-size: 38px;
	}
	ol.rbm-mission > li,
ul.rbm-mission > li {
		padding-left: calc(var(--rbm-size) + 16px);
		padding-bottom: 30px;
	}
	ol.rbm-mission > li::before,
ul.rbm-mission > li::before {
		font-size: calc(var(--rbm-size) * 0.4);
	}

	/* nilai perusahaan: ikon, jarak, dan bantalan kartu dikecilkan */
	ul.rbm-values {
		gap: 12px;
	}
	ul.rbm-values > li {
		gap: 12px;
		padding: 16px 14px;
	}
	ul.rbm-values .rbm-v-icon {
		width: 44px;
		height: 44px;
	}
	ul.rbm-values .rbm-v-icon svg {
		width: 22px;
		height: 22px;
	}
}

/* ---------- 10. HP: jarak tepi kiri-kanan halaman Tentang RBM dipersempit ----------
   Berlaku hanya di halaman yang memuat daftar misi (.rbm-mission), jadi halaman lain tidak berubah.
   Ubah angka --rbm-edge untuk melebarkan (angka kecil) atau menyempitkan (angka besar) area konten. */
@media (max-width: 600px) {
	body:has(.rbm-mission) {
		--rbm-edge: 16px;
		--wp--style--root--padding-left: var(--rbm-edge);
		--wp--style--root--padding-right: var(--rbm-edge);
		--wp--custom--gap--horizontal: var(--rbm-edge);
	}
}

/* ---------- 11. HP: kartu kategori produk di beranda menampilkan foto utuh ----------
   Foto kategori berukuran 1080x1350 (rasio 4:5). Di HP kartu setinggi 550 px dengan lebar
   sempit, jadi foto terpotong di kiri-kanan. Di sini tinggi kartu mengikuti rasio foto.
   !important diperlukan karena tinggi 550 px tertulis langsung (inline) di blok Cover.
   Mau lebih pendek? Ganti 4 / 5 jadi 1 / 1 (kotak) atau 5 / 6. */
@media (max-width: 600px) {
	.wp-block-cover.category-bg {
		min-height: 0 !important;
		aspect-ratio: 4 / 5 !important;
	}
}

/* ---------- 12. Slide logo RBM di hero (animasi logo) ---------- */
/* RBM Logo Hero - animasi logo untuk slide hero (CSS + SVG)
   Warna brand: #F2572B. Tinggi slide bisa diatur lewat --rl-h (default 460px), misal:
   .rbm-logo-anim{--rl-h:600px}
   Kecepatan: ubah durasi/delay di blok "urutan animasi" (total sekitar 6 detik). */
.rbm-logo-anim,.rbm-logo-anim *{box-sizing:border-box}

/* ===== slide hero ===== */
.rbm-logo-anim{--fs:clamp(14px,3.4vmin,32px);isolation:isolate;position:relative;width:100%;height:100%;min-height:var(--rl-h,460px);overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,#0d1117 0%,#030406 70%)}
.rl-stars{position:absolute;inset:0}
.rl-stars i{position:absolute;border-radius:50%;background:#dfe9ee;opacity:.5}
.rl-stars i.t{background:#7fc4c0}
.rl-lockup{position:relative;display:flex;flex-direction:column;align-items:center;perspective:900px;transform:translateY(calc(var(--fs)*1.5))}
.rl-mark{position:relative;width:clamp(120px,36vmin,300px);aspect-ratio:1}
.rl-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rl-mark::before{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(242,87,43,.4) 0,rgba(242,87,43,.12) 35%,transparent 62%);opacity:0;z-index:-1;pointer-events:none}

.rl-name{position:relative;font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",Candara,sans-serif;line-height:1.2;margin-top:calc(var(--fs)*1.6);font-size:var(--fs);font-weight:500;letter-spacing:.34em;color:#f6f6f8;opacity:0;transform:translateY(calc(var(--fs)*3));white-space:nowrap;padding-left:.34em}

/* keadaan awal */
.rl-piece{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.rl-whole,.rl-depth-g{opacity:0}
.rl-orange,.rl-core,.rl-depth-o,.rl-shine{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-position:130% 0;mask-position:130% 0}
.rl-orange,.rl-core,.rl-depth-o{-webkit-mask-image:linear-gradient(90deg,#000 0 55%,transparent 60%);mask-image:linear-gradient(90deg,#000 0 55%,transparent 60%)}
.rl-shine{opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent 0 48%,#fff 60%,transparent 72%);mask-image:linear-gradient(90deg,transparent 0 48%,#fff 60%,transparent 72%)}

/* urutan animasi: jalan saat slide aktif (.slick-current) atau saat terlihat di layar (.rl-run, diatur JS) */
.rl-run .rl-piece,.slick-current .rl-piece{animation:rl-gather 2000ms cubic-bezier(.16,.84,.3,1) var(--d) both}
.rl-run .rl-pieces,.slick-current .rl-pieces{animation:rl-glow 3000ms linear both}
.rl-run .rl-whole,.slick-current .rl-whole{animation:rl-whole 3000ms linear both}
.rl-run .rl-orange,.slick-current .rl-orange{animation:rl-sweep 1400ms cubic-bezier(.45,0,.25,1) 3100ms both}
.rl-run .rl-core,.slick-current .rl-core{animation:rl-sweep 1400ms cubic-bezier(.45,0,.25,1) 3200ms both}
.rl-run .rl-shine,.slick-current .rl-shine{animation:rl-shine 1400ms cubic-bezier(.45,0,.25,1) 3100ms both}
.rl-run .rl-lockup,.slick-current .rl-lockup{animation:rl-lift 1100ms cubic-bezier(.7,0,.2,1) 4800ms both}
.rl-run .rl-name,.slick-current .rl-name{animation:rl-name 1100ms cubic-bezier(.7,0,.2,1) 4800ms both}
.rl-run .rl-depth-g,.slick-current .rl-depth-g{animation:rl-whole 3000ms linear both}
.rl-run .rl-depth-o,.slick-current .rl-depth-o{animation:rl-sweep 1400ms cubic-bezier(.45,0,.25,1) 3100ms both}
.rl-run .rl-mark::before,.slick-current .rl-mark::before{animation:rl-halo 1600ms ease 3300ms both,rl-pulse 3400ms ease-in-out 5000ms infinite alternate}
.rl-run .rl-mark,.slick-current .rl-mark{animation:rl-sway 9s ease-in-out 5800ms infinite}

@keyframes rl-gather{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s))}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rl-glow{0%{filter:drop-shadow(0 0 12px rgba(255,255,255,.85))}75%{filter:drop-shadow(0 0 5px rgba(255,255,255,.35))}100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}}
@keyframes rl-whole{0%,86%{opacity:0}100%{opacity:1}}
@keyframes rl-sweep{from{-webkit-mask-position:130% 0;mask-position:130% 0}to{-webkit-mask-position:0% 0;mask-position:0% 0}}
@keyframes rl-shine{0%{opacity:0;-webkit-mask-position:130% 0;mask-position:130% 0}12%{opacity:.9}80%{opacity:.9}100%{opacity:0;-webkit-mask-position:0% 0;mask-position:0% 0}}
@keyframes rl-lift{to{transform:none}}
@keyframes rl-halo{from{opacity:0}to{opacity:.8}}
@keyframes rl-pulse{from{opacity:.55}to{opacity:1}}
@keyframes rl-sway{0%,100%{transform:none}25%{transform:rotateY(9deg) rotateX(-3deg)}75%{transform:rotateY(-9deg) rotateX(3deg)}}
@keyframes rl-name{0%{opacity:0;letter-spacing:.6em}30%{opacity:1}100%{opacity:1;transform:none;letter-spacing:.34em}}

/* pengguna yang mematikan animasi: langsung tampil hasil akhir */
@media (prefers-reduced-motion:reduce){
  .rl-pieces{display:none}
  .rl-whole{opacity:1!important;animation:none!important}
  .rl-depth-g{opacity:1!important;animation:none!important}
  .rl-mark,.rl-mark::before{animation:none!important}
  .rl-mark::before{opacity:.8!important}
  .rl-orange,.rl-core,.rl-depth-o{-webkit-mask-position:0% 0!important;mask-position:0% 0!important;animation:none!important}
  .rl-shine{display:none}
  .rl-lockup,.rl-name{animation:none!important;transform:none!important;opacity:1!important}
}
/* ---------- Slide logo di slider foto latar hero ---------- */
.product-content > .wp-block-cover .rbm-logo-slide {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	/* tanpa z-index: urutan lapisan mengikuti posisi di HTML, jadi slide ini ada di belakang
	   lapisan gelap (transparansi), sama seperti foto latar lainnya */
}
/* posisi logo: naik ke bagian atas hero yang masih kosong.
   Atur jarak dari atas lewat --rl-top (misal .rbm-logo-slide{--rl-top:120px}) */
.product-content > .wp-block-cover .rbm-logo-slide .rbm-logo-anim {
	min-height: 0;
	align-items: start;
	padding-top: var(--rl-top, clamp(24px, 7vmin, 90px));
}
.product-content > .wp-block-cover .rbm-logo-slide .rl-mark {
	width: clamp(110px, 28vmin, 250px);
}
/* slide logo tidak ikut zoom pelan seperti foto */
.product-content > .wp-block-cover .rbm-hero-bg-slide.rbm-logo-slide.is-active {
	transform: none;
	transition: opacity 1.6s ease-in-out;
}
/* slide logo berperan sebagai latar: foto produk & teks banner tetap tampil di depannya */