/* ==========================================================================
   Hero slider beranda
   - Tinggi hero = setinggi layar di bawah header (420–1200px); titik fokus foto per slide menjaga pisau utuh.
   - Foto perlahan mendekat (zoom 1 → 1.08) selama slide aktif, lalu bergeser ke atas.
   - Indikator kiri: satu garis tipis; segmen aktif terang (tanpa animasi loading).
   - Autoplay berputar terus (loop) setiap 8 detik.
   - ≤900px: teks di atas, foto utuh di bawah.
   - Titik fokus foto per slide dipilih agar pisau utuh dari layar laptop pendek (≈1360×615) sampai 1920×1080.
   ========================================================================== */
.cx-hero.cx-hero--slider {
	--cx-slide-duration: 1100ms;
	--cx-slide-interval: 8000ms;
	--cx-zoom-duration: 9.1s;
	--cx-header-h: 122px;
	position: relative;
	display: flex;
	/* Setinggi layar (sisa di bawah header). */
	--cx-hero-h: clamp(420px, calc(100svh - var(--cx-header-h)), 1200px);
	/* Foto dibuat dengan bagian atas gelap untuk judul, pisau di bawah:
	   titik tengah blok teks ≈36% tinggi hero (area di atas pisau). */
	align-items: center;
	height: var(--cx-hero-h);
	min-height: 0;
	padding: 0 0 calc(var(--cx-hero-h) * .28);
	background: #191816;
	isolation: isolate;
	overflow: hidden;
}
.admin-bar .cx-hero.cx-hero--slider { --cx-header-h: 154px; }

/* Slide & gerak kamera */
.cx-slider__track { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.cx-slider__slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; transform: translate3d(0, 100%, 0); }
.cx-slider__slide.is-active { visibility: visible; transform: translate3d(0, 0, 0); z-index: 1; }
.cx-slider__slide.is-leaving { visibility: visible; transform: translate3d(0, -100%, 0); }
.is-ready .cx-slider__slide { transition: transform var(--cx-slide-duration) cubic-bezier(.65, 0, .25, 1); }
.cx-slider__slide picture { display: block; width: 100%; height: 100%; }
.cx-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bagian atas foto (gelap) untuk teks, pisau di bawah tetap utuh. */
	object-position: 50% 45%;
	/* Kamera mendekat ke arah pisau, bukan ke tengah foto. */
	transform-origin: 50% 72%;
	will-change: transform;
}
/* Posisi pisau berbeda di tiap foto: titik fokus menjaga pisau utuh di layar lebar-pendek
   (laptop ≈1360×615) dan tetap di bawah teks pada layar biasa. */
.cx-slider__slide img { object-fit: cover; object-position: var(--cx-pos-x, 50%) var(--cx-pos-y, 45%); }
/* Pengaturan dari widget Elementor "Hero Slider" (template-parts/sections/hero.php):
   --cx-hero-h (tinggi), --cx-pos-x/-y/-y-m (per slide), --cx-m-img (tinggi foto ≤900px),
   --cx-overlay (kegelapan lapisan), .cx-hero--nozoom (tanpa efek zoom). */
.cx-hero--nozoom .cx-slider__slide img { animation: none !important; transform: none !important; }
.is-ready .cx-slider__slide:is(.is-active, .is-leaving) img { animation: cx-camera-approach var(--cx-zoom-duration) linear both; }

.cx-hero--slider::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(15, 14, 12, .62), rgba(15, 14, 12, .18) 55%, rgba(15, 14, 12, 0)),
		linear-gradient(180deg, rgba(15, 14, 12, .35), rgba(15, 14, 12, 0) 45%);
	opacity: var(--cx-overlay, 1);
}

/* Teks */
.cx-hero--slider .cx-hero__grid { width: 100%; padding-left: max(80px, 6vw); padding-right: 48px; }
.cx-hero--slider .cx-hero__copy { text-align: left; margin: 0; max-width: 680px; }
.cx-hero--slider .cx-eyebrow { justify-content: flex-start; font-size: 13px; font-weight: 500; letter-spacing: .16em; margin-bottom: 18px; }
.cx-hero--slider .cx-eyebrow::before { display: none; }
.cx-hero--slider .cx-hero__title { font-size: clamp(34px, 4.1vw, 58px); font-weight: 500; line-height: 1.14; letter-spacing: -.015em; margin-bottom: 20px; text-wrap: balance; }
.cx-hero--slider .cx-hero__text { font-size: 16px; line-height: 1.7; max-width: 34em; margin: 0 0 28px; color: #f1ede4; }
.cx-hero--slider .cx-hero__actions { justify-content: flex-start; }
.cx-hero--slider .cx-btn { font-size: 14px; min-height: 50px; padding: 0 26px; border-radius: 99px; }
.cx-hero--slider .cx-btn--ink { background: #fff; border-color: #fff; color: #1c1b18; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55); }
.cx-hero--slider .cx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.cx-hero--slider .cx-btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.is-ready .cx-hero__copy { animation: cx-slider-copy-in .8s ease-out both; }

/* Indikator kiri — satu garis tipis, segmen aktif terang */
.cx-slider__dots {
	position: absolute;
	left: 16px;
	/* Posisi & tinggi disamakan dengan blok teks oleh slider.js (--cx-copy-y / --cx-copy-h). */
	top: var(--cx-copy-y, 25%);
	display: flex;
	flex-direction: column;
	height: var(--cx-copy-h, 184px);
	z-index: 3;
}
.cx-slider__dot { flex: 1; width: 18px; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; position: relative; }
.cx-slider__dot::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px; width: 1.5px; background: rgba(255, 255, 255, .35); transition: background-color .3s; }
.cx-slider__dot span { position: absolute; top: 0; bottom: 0; left: 7.25px; width: 3px; background: #fff; border-radius: 3px; opacity: 0; }
.cx-slider__dot.is-active::before { background: rgba(255, 255, 255, .5); }
.cx-slider__dot span { transition: opacity .4s ease; }
.cx-slider__dot.is-active span { opacity: 1; }
.cx-slider__dot:hover::before { background: rgba(255, 255, 255, .75); }
.cx-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Navigasi kiri–kanan di pojok kanan bawah slider (tombol WA tersembunyi selama slider terlihat). */
.cx-slider__controls {
	position: absolute;
	right: max(28px, calc((100% - var(--container, 1240px)) / 2 + 24px));
	bottom: clamp(20px, 4vh, 36px);
	display: flex;
	gap: 10px;
	z-index: 3;
	color: #fff;
}
.cx-slider__controls button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	color: #fff;
	background: rgba(20, 19, 17, .35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.cx-slider__controls button svg { width: 18px; height: 18px; }
.cx-slider__controls button:hover { background: #fff; color: #1c1b18; border-color: #fff; }
.cx-slider__controls button:active { transform: scale(.94); }
.cx-slider__controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Zoom tetap berjalan saat kursor di atas slider; hanya pergantian slide yang dijeda (slider.js). */

/* ---------- Desktop: ukuran mengikuti bingkai hero (container query) ---------- */
@media (min-width: 901px) {
	.cx-hero.cx-hero--slider { container: cxhero / size; }
	/* Teks mengecil di layar pendek agar tetap di atas pisau. */
	.cx-hero--slider .cx-hero__title { font-size: clamp(36px, min(4.6vw, 10.5cqh), 68px); margin-bottom: clamp(14px, 3cqh, 22px); }
	.cx-hero--slider .cx-eyebrow { margin-bottom: clamp(12px, 2.8cqh, 20px); }
	.cx-hero--slider .cx-hero__text { margin-bottom: clamp(20px, 4.4cqh, 30px); }
}

/* ---------- Tombol WhatsApp melayang (beranda) ----------
   Disembunyikan selama slider terlihat (dan saat scroll kembali mendekati slider,
   tombol tersedot masuk lubang). Saat slider terlewati, tombol "ditarik keluar dari
   lubang sempit" (pipih & memanjang), lalu mendarat seperti balon berisi air: tertekan,
   memantul, dan bergoyang mereda. Bayangan di bawahnya melebar seperti mulut lubang. */
.cx-wa-float--after-hero { transform-origin: 50% 100%; }
.cx-wa-float--after-hero::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 46px;
	height: 10px;
	margin-left: -23px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(10, 30, 18, .38), rgba(10, 30, 18, 0));
	z-index: -1;
	pointer-events: none;
}
.cx-wa-float--after-hero.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.cx-wa-float--after-hero.is-hidden::before { transform: scaleX(.2); opacity: 0; }
.cx-wa-float--after-hero.is-popping { animation: cx-wa-pop 1.25s cubic-bezier(.2, .8, .3, 1) both; }
.cx-wa-float--after-hero.is-popping::before { animation: cx-wa-hole 1.25s ease-out both; }
.cx-wa-float--after-hero.is-popping .cx-icon { animation: cx-wa-icon 1.25s ease-out both; }
/* Keluar: tertekan sebentar, memanjang ke atas, lalu tersedot masuk ke lubang. */
.cx-wa-float--after-hero.is-leaving { pointer-events: none; animation: cx-wa-suck .7s cubic-bezier(.5, 0, .75, .3) both; }
.cx-wa-float--after-hero.is-leaving::before { animation: cx-wa-hole-close .7s ease-in both; }
.cx-wa-float--after-hero.is-leaving .cx-icon { animation: cx-wa-icon-out .7s ease-in both; }

@keyframes cx-wa-pop {
	0%   { opacity: 0; transform: translateY(85%) scale(.28, 1.45); }  /* terjepit di lubang */
	22%  { opacity: 1; transform: translateY(-34%) scale(.72, 1.32); } /* tertarik keluar, memanjang */
	38%  { transform: translateY(0) scale(1.28, .72); }               /* mendarat, tertekan */
	50%  { transform: translateY(-6%) scale(.86, 1.16); }             /* memantul */
	62%  { transform: translateY(0) scale(1.1, .9); }                 /* goyangan balon air */
	74%  { transform: scale(.95, 1.05); }
	86%  { transform: scale(1.03, .97); }
	100% { opacity: 1; transform: none; }
}
@keyframes cx-wa-suck {
	0%   { opacity: 1; transform: none; }
	25%  { transform: scale(1.14, .86); }                               /* bersiap, tertekan */
	50%  { transform: translateY(-16%) scale(.82, 1.22); }              /* memanjang ke atas */
	100% { opacity: 0; transform: translateY(90%) scale(.22, 1.5); }    /* tersedot ke lubang */
}
@keyframes cx-wa-hole-close {
	0%   { transform: scaleX(1); opacity: 1; }
	25%  { transform: scaleX(1.2); }
	100% { transform: scaleX(.1); opacity: 0; }
}
@keyframes cx-wa-icon-out {
	0%, 30% { opacity: 1; transform: none; }
	60%     { opacity: 0; transform: scale(.5); }
	100%    { opacity: 0; }
}
@keyframes cx-wa-hole {
	0%   { transform: scaleX(.15); opacity: .9; }
	38%  { transform: scaleX(1.25); opacity: 1; }
	62%  { transform: scaleX(.92); }
	100% { transform: scaleX(1); opacity: 1; }
}
@keyframes cx-wa-icon {
	0%, 25% { opacity: 0; transform: scale(.4); }
	45%     { opacity: 1; transform: scale(1.15); }
	70%     { transform: scale(.96); }
	100%    { opacity: 1; transform: none; }
}

@keyframes cx-camera-approach { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes cx-slider-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Posisi teks & garis slide (widget Elementor › Posisi teks & garis), desktop saja.
   Bawaan: teks di area gelap atas, garis mengikuti tinggi & posisi teks (slider.js). */
@media (min-width: 901px) {
	.cx-hero--slider .cx-hero__copy { position: relative; top: var(--cx-copy-shift, 0px); }
	.cx-hero.cx-hero--slider.cx-hero--copy-center { padding-bottom: 0; }
	.cx-hero.cx-hero--slider.cx-hero--copy-bottom { align-items: flex-end; padding-bottom: 96px; }
	.cx-hero--dots-top .cx-slider__dots { top: 48px; height: var(--cx-dots-h, 184px); }
	.cx-hero--dots-center .cx-slider__dots { top: 50%; height: var(--cx-dots-h, 184px); transform: translateY(-50%); }
	.cx-hero--dots-bottom .cx-slider__dots { top: auto; bottom: 48px; height: var(--cx-dots-h, 184px); }
}

/* Layar lebar (mis. zoom browser 80–90%): container ikut melebar (refined.css) dan judul
   muat satu baris, jadi blok teks lebih pendek dan tetap di atas pisau. */
@media (min-width: 1400px) {
	.cx-hero--slider .cx-hero__copy { max-width: 1120px; }
	.cx-hero--slider .cx-hero__title br { display: none; }
}

/* Tablet & mobile (≤900px): pisau memenuhi lebar foto, jadi teks ditaruh di atas
   dan foto ditampilkan utuh di bawah (tidak terpotong, tidak tertimpa teks). */
@media (max-width: 900px) {
	.cx-hero.cx-hero--slider { container: none; height: auto; padding: 48px 0 0; flex-direction: column; align-items: stretch; }
	.cx-hero--slider .cx-hero__grid { padding-left: 56px; padding-right: 24px; }
	.cx-hero--slider .cx-hero__title { font-size: clamp(30px, 5.4vw, 46px); }
	.cx-slider__track { top: auto; height: var(--cx-m-img, 66vw); }
	.cx-slider__slide picture { position: static; width: 100%; height: 100%; aspect-ratio: auto; }
	.cx-slider__slide img { object-fit: cover; object-position: var(--cx-pos-x, 50%) var(--cx-pos-y-m, 60%); transform-origin: 50% 62%; -webkit-mask-image: none; mask-image: none; }
	.cx-hero--slider::after { background: linear-gradient(180deg, #191816 0, #191816 calc(100% - var(--cx-m-img, 66vw)), rgba(25, 24, 22, 0) calc(100% - var(--cx-m-img, 66vw) + 80px), rgba(15, 14, 12, .35) 100%); }
	.cx-hero--slider .cx-hero__copy { padding-bottom: calc(var(--cx-m-img, 66vw) + 24px); }
	.cx-slider__dots { left: 14px; }
	.cx-slider__controls { right: 24px; bottom: 20px; }
}
@media (max-width: 640px) {
	.cx-hero.cx-hero--slider { padding-top: 40px; }
	.cx-hero--slider .cx-hero__grid { padding-left: 44px; padding-right: 18px; }
	.cx-hero--slider .cx-hero__title { font-size: clamp(30px, 8vw, 40px); }
	.cx-hero--slider .cx-hero__text { font-size: 13.5px; margin-bottom: 22px; }
	.cx-hero--slider .cx-hero__actions { gap: 10px; flex-wrap: wrap; }
	.cx-hero--slider .cx-hero__actions .cx-btn { flex: 0 1 auto; padding: 0 16px; }
	.cx-slider__dots { left: 10px; }
	.cx-slider__controls { right: 30px; bottom: 16px; gap: 8px; }
	.cx-slider__controls button { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.cx-slider__slide, .cx-slider__slide img, .cx-hero__copy { animation: none !important; transition: none !important; }
	.cx-wa-float--after-hero, .cx-wa-float--after-hero::before, .cx-wa-float--after-hero .cx-icon { animation: none !important; transition: opacity .2s !important; }
}