/*
 * Utility class untuk halaman Elementor (Free, tanpa Custom CSS per widget).
 * Dipasang lewat Advanced → CSS Classes. Daftar class & pemakaiannya: CLAUDE.md.
 *
 * Aturan: hanya untuk hal yang TIDAK bisa diatur dari panel Elementor Free.
 * Warna, padding, radius, shadow, posisi, entrance animation, dan jumlah kolom
 * tetap diatur di panel.
 *
 * Breakpoint mengikuti default Elementor: tablet ≤1024px, mobile ≤767px.
 */

:root {
	--kz-orange: #F28C28;
	--kz-orange-ink: #B5570B;
	--kz-orange-50: #FFF1E0;
	--kz-cream: #FFF8EC;
	--kz-line: #F3E6D2;
	--kz-green: #5A8F29;
	--kz-gold: #FFC857;
	--kz-brown: #3A281D;
	--kz-brown-900: #2A1C14;
	--kz-muted: #6E5D50;
	--kz-orange-600: #D96F12;
	--kz-green-600: #4B7A22;
	--kz-green-700: #3E6619;
	--kz-radius: 14px;
	--kz-shadow: 0 6px 24px rgba(58, 40, 29, .08);
	--kz-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Aksen warna di sebagian teks heading ----------
 * Tulis di teks Heading: Supplier untuk <span class="kz-accent">Bisnis Kuliner</span>
 */
.kz-accent { color: var(--kz-orange-ink); }
.kz-accent-light { color: var(--kz-orange); } /* di atas background gelap */
.kz-accent-gold { color: var(--kz-gold); }

/* ---------- Background hero (gradient 3 warna) ----------
 * Container. Background di panel dibiarkan kosong.
 */
.kz-bg-hero {
	background-image: linear-gradient(115deg, var(--kz-cream) 0%, #fff 55%, var(--kz-orange-50) 100%);
}

/* ---------- Garis pemisah antar item ----------
 * Container (flex/grid). Berlaku untuk item langsung di dalamnya, boxed maupun full width.
 * kz-divided       : garis kiri di tiap item kecuali yang pertama
 * kz-divided-2     : tablet & mobile 2 kolom, item awal baris tanpa garis kiri
 * kz-divided-rows  : tablet & mobile, garis atas mulai baris ke-2 (layout 2 kolom)
 * kz-divided-1     : mobile 1 kolom, garis kiri diganti garis atas
 */
:is(.kz-divided, .kz-divided > .e-con-inner) > .elementor-element + .elementor-element {
	border-left: 1px solid var(--kz-line);
}

@media (max-width: 1024px) {
	:is(.kz-divided-2, .kz-divided-2 > .e-con-inner) > .elementor-element:nth-child(odd of .elementor-element) {
		border-left: 0;
	}

	:is(.kz-divided-rows, .kz-divided-rows > .e-con-inner) > .elementor-element:nth-child(n+3 of .elementor-element) {
		border-top: 1px solid var(--kz-line);
	}
}

@media (max-width: 767px) {
	:is(.kz-divided-1, .kz-divided-1 > .e-con-inner) > .elementor-element + .elementor-element {
		border-left: 0;
		border-top: 1px solid var(--kz-line);
	}
}

/* ---------- Aspect ratio ----------
 * Container: tinggi mengikuti lebar (untuk komposisi gambar absolute).
 * Image widget: gambar dipotong (cover) ke rasio tersebut.
 */
.kz-ratio-1-1 { --kz-ratio: 1 / 1; }
.kz-ratio-4-3 { --kz-ratio: 4 / 3; }
.kz-ratio-3-4 { --kz-ratio: 3 / 4; }
.kz-ratio-5-4 { --kz-ratio: 5 / 4; }
.kz-ratio-10-9 { --kz-ratio: 10 / 9; }
.kz-ratio-10-7 { --kz-ratio: 10 / 7; }

.e-con[class*="kz-ratio-"] {
	aspect-ratio: var(--kz-ratio);
}

.elementor-widget-image[class*="kz-ratio-"] img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--kz-ratio);
	object-fit: cover;
}

/* Image yang diberi Link dibungkus <a> inline; tanpa ini widget hanya setinggi
   satu baris teks dan gambarnya meluber menimpa elemen lain. */
.elementor-widget-image[class*="kz-ratio-"] a {
	display: block;
}

/* ---------- Gambar cutout ---------- */
.kz-drop-shadow img {
	filter: drop-shadow(0 18px 28px rgba(80, 40, 10, .22));
}

/* Pada widget itu sendiri, supaya tetap nge-blend walau widget punya animasi/transform. */
.kz-blend-multiply {
	mix-blend-mode: multiply;
}

/* Melayang pelan terus-menerus. Animasi di img, jadi entrance animation widget tetap jalan. */
@keyframes kz-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -6px; }
}

.kz-float img { animation: kz-float 6s ease-in-out infinite; }
.kz-float-d2 img { animation-delay: -2s; }
.kz-float-d3 img { animation-delay: -4s; }

/* ---------- Efek hover kartu (hover parent → child) ----------
 * kz-hover-card : container kartu (pemicu hover)
 * kz-swap       : container area gambar (jadi acuan posisi & memotong isi)
 * kz-swap-alt   : Image kedua (foto kemasan), menutup penuh kz-swap, muncul bergantian otomatis & saat hover
 * kz-swap-tag   : widget label (mis. "Kemasan 5 kg"), muncul saat hover; posisinya diatur di panel
 * kz-tilt       : Image cutout, miring & membesar saat kartu di-hover
 */
/* .e-con.kz-swap: harus menang dari `.e-con { overflow: var(--overflow) }` Elementor,
   yang dimuat setelah file ini. */
.kz-swap,
.e-con.kz-swap {
	position: relative;
	overflow: hidden;
}

.kz-swap .elementor-element.kz-swap-alt {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity .35s var(--kz-ease);
}

/* Dua class: harus menang dari `.elementor img { height: auto }`. */
.kz-swap .kz-swap-alt img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 85%;
}

.kz-swap .elementor-element.kz-swap-tag {
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s var(--kz-ease);
}

.kz-hover-card:is(:hover, :focus-within) .kz-swap .elementor-element:is(.kz-swap-alt, .kz-swap-tag) {
	opacity: 1;
}

/* Ganti otomatis: cutout dan foto kemasan bergantian dengan kecepatan & waktu yang sama
   di semua kartu (di HP tidak ada hover). Saat kartu di-hover, siklus berhenti dan
   foto kemasan langsung tampil lewat rule di atas. */
@keyframes kz-swap-cycle {
	0%, 42% { opacity: 0; }
	50%, 92% { opacity: 1; }
	100% { opacity: 0; }
}

.kz-swap .elementor-element:is(.kz-swap-alt, .kz-swap-tag) {
	animation: kz-swap-cycle 6s ease-in-out infinite;
}

.kz-hover-card:is(:hover, :focus-within) .kz-swap .elementor-element:is(.kz-swap-alt, .kz-swap-tag) {
	animation: none;
}

.kz-tilt img {
	transition: rotate .5s var(--kz-ease), scale .5s var(--kz-ease);
}

.kz-hover-card:is(:hover, :focus-within) .kz-tilt img {
	rotate: 8deg;
	scale: 1.04;
}

/* Zoom foto saat container di-hover (caption overlay tidak menghalangi). Overflow: Hidden diatur di panel. */
.kz-zoom img {
	transition: scale .5s var(--kz-ease);
}

.kz-zoom:hover img {
	scale: 1.04;
}

/* Icon Box: ikon membesar saat widget atau kartu kz-hover-card di atasnya di-hover. */
.kz-pop-icon .elementor-icon {
	transition: scale .25s var(--kz-ease);
}

.kz-pop-icon:hover .elementor-icon,
.kz-hover-card:hover .kz-pop-icon .elementor-icon {
	scale: 1.1;
}

/* ---------- Galeri geser di mobile ----------
 * Container grid/flex. Di mobile jadi satu baris yang bisa di-swipe (scroll-snap),
 * tiap item selebar 62%. Gap tetap dari panel.
 */
@media (max-width: 767px) {
	.e-con-full.kz-snap-mobile,
	.e-con-boxed.kz-snap-mobile > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 6px;
	}

	.e-con-full.kz-snap-mobile::-webkit-scrollbar,
	.e-con-boxed.kz-snap-mobile > .e-con-inner::-webkit-scrollbar {
		display: none;
	}

	.e-con-full.kz-snap-mobile > .elementor-element,
	.e-con-boxed.kz-snap-mobile > .e-con-inner > .elementor-element {
		flex: 0 0 62% !important;
		width: 62% !important;
		max-width: 62% !important;
		scroll-snap-align: start;
	}
}

/* ---------- Button widget ---------- */

/* Ikon (posisi After) bergeser saat hover, tombol sedikit mengecil saat ditekan. */
.kz-btn-arrow .elementor-button-icon {
	transition: translate .18s var(--kz-ease);
}

.kz-btn-arrow .elementor-button:hover .elementor-button-icon {
	translate: 3px 0;
}

.kz-btn-arrow .elementor-button:active {
	scale: .97;
}

/* Cincin berdenyut di sekeliling tombol. Bentuk ikut radius tombol.
 * Di widget Elementor, cincin dipasang di .elementor-button di dalamnya; di elemen
 * biasa (mis. tombol WA mengambang dari inc/wa-float.php) di elemen itu sendiri.
 */
@keyframes kz-pulse {
	0% { opacity: .55; scale: 1; }
	100% { opacity: 0; scale: 1.6; }
}

:is(.kz-pulse .elementor-button, .kz-pulse:not(.elementor-element)) {
	position: relative;
	overflow: visible;
}

:is(.kz-pulse .elementor-button, .kz-pulse:not(.elementor-element))::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--kz-green);
	pointer-events: none;
	animation: kz-pulse 2.4s ease-out infinite;
}

:is(.kz-pulse .elementor-button, .kz-pulse:not(.elementor-element)):hover::after {
	animation: none;
	opacity: 0;
}

/* ---------- Kartu yang difilter [krezzna_product_filter] ----------
 * Kartu diberi class kz-cat-<slug>. JS memasang atribut hidden; display dari
 * container Elementor mengalahkan [hidden] bawaan browser, jadi dipaksa di sini.
 */
[class*="kz-cat-"][hidden] {
	display: none !important;
}

@keyframes kz-fade {
	from { opacity: 0; scale: .97; }
	to { opacity: 1; scale: 1; }
}

.kz-fade {
	animation: kz-fade .25s var(--kz-ease);
}

/* ---------- Kurangi gerakan ---------- */
@media (prefers-reduced-motion: reduce) {
	.kz-float img,
	.kz-float-d2 img,
	.kz-float-d3 img,
	:is(.kz-pulse .elementor-button, .kz-pulse:not(.elementor-element))::after,
	.kz-fade,
	.kz-swap .elementor-element:is(.kz-swap-alt, .kz-swap-tag) {
		animation: none;
	}

	.kz-swap .elementor-element.kz-swap-alt,
	.kz-swap .elementor-element.kz-swap-tag,
	.kz-tilt img,
	.kz-zoom img,
	.kz-pop-icon .elementor-icon,
	.kz-btn-arrow .elementor-button-icon {
		transition: none;
	}
}