/*
Theme Name: Elfath
Theme URI: https://makaronikeju.com/
Author: CV Elfath Averania Jaya
Description: Tema ringan khusus untuk ELFATH Makaroni Keju. Dibangun untuk kecepatan (tanpa jQuery, satu berkas CSS, tanpa page builder) dan SEO teknis yang bersih. Mempertahankan identitas brand: palet karamel-amber, Oswald untuk judul, Lato untuk teks.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elfath
Tags: custom-menu, featured-images, translation-ready, blog
*/

/* ==========================================================================
   0. Font — di-host sendiri (subset latin)
   --------------------------------------------------------------------------
   Tidak memakai fonts.googleapis.com: setiap host eksternal menambah
   DNS + TCP + TLS sebelum teks bisa tampil. Ketiga berkas ini total 68 KB
   dan dilayani dari domain yang sama, jadi ikut koneksi yang sudah terbuka.

   font-display: swap — teks langsung terbaca dengan font sistem,
   lalu ditukar begitu font brand selesai dimuat.
   ========================================================================== */

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/lato-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/lato-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Oswald adalah variable font: satu berkas melayani bobot 200–700. */
@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("assets/fonts/oswald-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Token desain
   ========================================================================== */

:root {
	/* Palet brand — diambil dari desain Divi yang lama agar identitas terjaga */
	--c-caramel: #c99872;
	--c-caramel-dark: #a97a55;
	--c-amber: #e09900;
	--c-amber-dark: #b87c00;
	--c-tan: #dca57d;
	--c-cream: #ffe8cc;
	--c-red: #e02b20;
	--c-red-dark: #b81f16;

	/* Netral */
	--c-ink: #2d3940;
	--c-body: #4a5560;
	--c-muted: #7a838c;
	--c-line: #e4e0da;
	--c-bg: #ffffff;
	--c-bg-soft: #faf6f1;

	/* Tipografi */
	--f-head: Oswald, "Arial Narrow", system-ui, sans-serif;
	--f-body: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

	/* Skala tipe — fluid, tidak butuh media query */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--t-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--t-h4: clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem);
	--t-h3: clamp(1.35rem, 1.22rem + 0.65vw, 1.75rem);
	--t-h2: clamp(1.6rem, 1.35rem + 1.25vw, 2.375rem);
	--t-h1: clamp(2rem, 1.6rem + 2vw, 3.25rem);

	/* Ritme spasi */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;

	/* Layout */
	--w-wide: 1180px;
	--w-text: 68ch;
	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-pill: 999px;

	--shadow-1: 0 1px 2px rgba(45, 57, 64, 0.06), 0 2px 8px rgba(45, 57, 64, 0.06);
	--shadow-2: 0 4px 12px rgba(45, 57, 64, 0.08), 0 12px 32px rgba(45, 57, 64, 0.08);

	--header-h: 76px;
}

/* ==========================================================================
   2. Reset ringkas
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-base);
	line-height: 1.65;
	color: var(--c-body);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--s-4);
	font-family: var(--f-head);
	font-weight: 600;
	line-height: 1.18;
	color: var(--c-ink);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5, h6 { font-size: var(--t-lg); }

p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 var(--s-5); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

p { max-width: var(--w-text); text-wrap: pretty; }

a {
	color: var(--c-caramel-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover { color: var(--c-amber-dark); }

/* Fokus keyboard yang jelas — aksesibilitas */
:focus-visible {
	outline: 3px solid var(--c-amber);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

img, picture, video, svg, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Cegah pergeseran layout: gambar selalu punya rasio sampai termuat */
img[width][height] { height: auto; }

ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--s-2); }

blockquote {
	margin-inline: 0;
	padding: var(--s-4) var(--s-5);
	border-left: 4px solid var(--c-amber);
	background: var(--c-bg-soft);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-size: var(--t-lg);
}

hr {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--s-7) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
}
th, td {
	padding: var(--s-3);
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}
th { font-family: var(--f-head); font-weight: 500; color: var(--c-ink); }

/* Tabel & blok lebar tidak boleh membuat halaman geser horizontal */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; }

/* ==========================================================================
   3. Utilitas layout
   ========================================================================== */

.wrap {
	width: min(100% - 2.5rem, var(--w-wide));
	margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2.5rem, 780px); }

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--soft { background: var(--c-bg-soft); }
.section--cream { background: var(--c-cream); }

.stack > * + * { margin-top: var(--s-4); }

.grid {
	display: grid;
	gap: var(--s-5);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.center { text-align: center; }
.center p { margin-inline: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--s-3) var(--s-4);
	background: var(--c-ink);
	color: #fff;
	border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
	left: 0; top: 0;
	color: #fff;
}

/* Judul section dengan garis aksen */
.section-title {
	margin-bottom: var(--s-6);
}
.section-title .eyebrow {
	display: block;
	font-family: var(--f-head);
	font-size: var(--t-sm);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-amber-dark);
	margin-bottom: var(--s-2);
}
.section-title h2 { margin-bottom: var(--s-3); }
.section-title p { color: var(--c-muted); }

/* ==========================================================================
   4. Tombol
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: 0.8em 1.6em;
	min-height: 44px; /* target sentuh */
	font-family: var(--f-head);
	font-size: var(--t-base);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--c-amber);
	color: #fff;
}
.btn--primary:hover { background: var(--c-amber-dark); color: #fff; }

.btn--cta {
	background: var(--c-red);
	color: #fff;
}
.btn--cta:hover { background: var(--c-red-dark); color: #fff; }

.btn--outline {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-caramel);
}
.btn--outline:hover { background: var(--c-caramel); color: #fff; }

.btn--ghost-light {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px);
}
.btn--ghost-light:hover { background: #fff; color: var(--c-ink); }

.btn--lg { padding: 1em 2.2em; font-size: var(--t-lg); }
.btn--block { display: flex; width: 100%; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-5);
}
.center .btn-row { justify-content: center; }

/* ==========================================================================
   5. Header & navigasi
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: var(--header-h);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	text-decoration: none;
	flex-shrink: 0;
}
.site-brand img { width: auto; height: 46px; }
.site-brand__text {
	font-family: var(--f-head);
	font-size: var(--t-lg);
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.1;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--c-ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.main-nav ul {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav li { margin: 0; }
.main-nav a {
	display: block;
	padding: var(--s-2) var(--s-3);
	font-family: var(--f-head);
	font-size: var(--t-sm);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--c-ink);
	text-decoration: none;
	border-radius: var(--r-sm);
	white-space: nowrap;
}
.main-nav a:hover { background: var(--c-cream); color: var(--c-ink); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	color: var(--c-amber-dark);
	font-weight: 500;
}

.header-cta { flex-shrink: 0; }

@media (max-width: 980px) {
	.nav-toggle { display: inline-flex; }
	.header-cta { display: none; }

	.main-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow-2);
		display: none;
	}
	.main-nav.is-open { display: block; }
	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--s-3) 1.25rem var(--s-5);
		width: min(100% - 2.5rem, var(--w-wide));
		margin-inline: auto;
	}
	.main-nav li + li { margin-top: 0; border-top: 1px solid var(--c-line); }
	.main-nav a {
		padding: var(--s-4) var(--s-2);
		font-size: var(--t-base);
	}
}

/* ==========================================================================
   6. Hero — statis, tanpa JavaScript (pengganti Smart Slider)
   ========================================================================== */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(420px, 62vh, 620px);
	background: var(--c-ink);
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(45, 57, 64, 0.82) 0%,
		rgba(45, 57, 64, 0.62) 45%,
		rgba(45, 57, 64, 0.28) 100%
	);
}

.hero__inner { padding-block: var(--s-8); }
.hero__content { max-width: 620px; color: #fff; }
.hero__content h1 { color: #fff; margin-bottom: var(--s-4); }
.hero__content p {
	font-size: var(--t-lg);
	color: rgba(255, 255, 255, 0.92);
	max-width: 52ch;
}
.hero__eyebrow {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	margin-bottom: var(--s-4);
	font-family: var(--f-head);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink);
	background: var(--c-amber);
	border-radius: var(--r-pill);
}

/* Pita kepercayaan di bawah hero */
.trust-bar {
	background: var(--c-ink);
	color: rgba(255, 255, 255, 0.9);
	padding-block: var(--s-4);
}
.trust-bar ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-4) var(--s-6);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--f-head);
	font-size: var(--t-sm);
	letter-spacing: 0.04em;
}
.trust-bar li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
}
.trust-bar svg { width: 18px; height: 18px; color: var(--c-amber); flex-shrink: 0; }

/* ==========================================================================
   7. Kartu
   ========================================================================== */

.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

.card__media { background: var(--c-bg-soft); }
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--s-5);
}
.card__title {
	font-size: var(--t-h4);
	margin-bottom: var(--s-2);
}
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-amber-dark); }
.card__meta {
	font-size: var(--t-xs);
	color: var(--c-muted);
	margin-bottom: var(--s-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--f-head);
}
.card__excerpt { font-size: var(--t-sm); margin-bottom: var(--s-4); }
.card__body .btn, .card__more { margin-top: auto; align-self: flex-start; }

.card__more {
	font-family: var(--f-head);
	font-size: var(--t-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--c-amber-dark);
}
.card__more::after { content: " \2192"; }
.card__more:hover { text-decoration: underline; }

/* Kartu produk (varian rasa) */
.product-card { text-align: center; }
.product-card .card__media img { aspect-ratio: 1 / 1; }
.product-card .card__body { padding: var(--s-4); align-items: center; }
.product-card .card__title { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.product-card__price {
	font-family: var(--f-head);
	color: var(--c-amber-dark);
	font-size: var(--t-lg);
}

/* Kartu fitur "kenapa Elfath" */
.feature {
	padding: var(--s-5);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}
.feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--s-4);
	background: var(--c-cream);
	border-radius: var(--r-md);
	color: var(--c-amber-dark);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.feature p { font-size: var(--t-sm); margin: 0; }

/* ==========================================================================
   8. Testimoni — grid, tanpa carousel JS
   ========================================================================== */

.testimonial {
	display: flex;
	flex-direction: column;
	padding: var(--s-5);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
}
.testimonial__quote {
	flex: 1;
	margin-bottom: var(--s-4);
	font-size: var(--t-lg);
	color: var(--c-ink);
	line-height: 1.5;
}
.testimonial__quote::before {
	content: "\201C";
	display: block;
	font-family: var(--f-head);
	font-size: 3rem;
	line-height: 0.7;
	color: var(--c-tan);
	margin-bottom: var(--s-2);
}
.testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
}
.testimonial__author img {
	width: 44px; height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.testimonial__name {
	font-family: var(--f-head);
	font-weight: 500;
	color: var(--c-ink);
	line-height: 1.2;
}
.testimonial__role { font-size: var(--t-xs); color: var(--c-muted); }

/* ==========================================================================
   9. FAQ — accordion pakai <details>, tanpa JavaScript
   ========================================================================== */

.faq { max-width: 820px; margin-inline: auto; }

.faq__item {
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: #fff;
	margin-bottom: var(--s-3);
	overflow: hidden;
}
.faq__item[open] { border-color: var(--c-tan); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	font-family: var(--f-head);
	font-size: var(--t-lg);
	font-weight: 500;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	flex-shrink: 0;
	width: 12px; height: 12px;
	border-right: 2px solid var(--c-amber-dark);
	border-bottom: 2px solid var(--c-amber-dark);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__q:hover { background: var(--c-bg-soft); }

.faq__a {
	padding: 0 var(--s-5) var(--s-5);
	font-size: var(--t-base);
}

/* ==========================================================================
   10. Blok CTA & pricelist
   ========================================================================== */

.cta-band {
	background: linear-gradient(120deg, var(--c-caramel) 0%, var(--c-amber) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	padding: var(--s-7) var(--s-6);
	text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.94); margin-inline: auto; }

.price-card {
	display: flex;
	flex-direction: column;
	padding: var(--s-6) var(--s-5);
	background: #fff;
	border: 2px solid var(--c-line);
	border-radius: var(--r-md);
	text-align: center;
}
.price-card--featured {
	border-color: var(--c-amber);
	box-shadow: var(--shadow-2);
	position: relative;
}
.price-card--featured::before {
	content: attr(data-badge);
	position: absolute;
	top: 0; left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--s-1) var(--s-3);
	background: var(--c-amber);
	color: #fff;
	font-family: var(--f-head);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--r-pill);
	white-space: nowrap;
}
.price-card__tier {
	font-family: var(--f-head);
	font-size: var(--t-h4);
	color: var(--c-ink);
	margin-bottom: var(--s-2);
}
.price-card__amount {
	font-family: var(--f-head);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: 600;
	color: var(--c-amber-dark);
	line-height: 1.1;
}
.price-card__unit { font-size: var(--t-sm); color: var(--c-muted); }
.price-card ul {
	list-style: none;
	padding: 0;
	margin: var(--s-4) 0 var(--s-5);
	font-size: var(--t-sm);
	text-align: left;
}
.price-card li {
	display: flex;
	gap: var(--s-2);
	padding: var(--s-2) 0;
	border-bottom: 1px solid var(--c-line);
}
.price-card li:last-child { border-bottom: 0; }
.price-card li::before { content: "\2713"; color: var(--c-amber); font-weight: 700; }
.price-card .btn { margin-top: auto; }

/* ==========================================================================
   11. Konten artikel & halaman
   ========================================================================== */

.page-hero {
	background: var(--c-bg-soft);
	border-bottom: 1px solid var(--c-line);
	padding-block: var(--s-7);
}
.page-hero h1 { margin-bottom: var(--s-3); }
.page-hero p { color: var(--c-muted); font-size: var(--t-lg); }

.breadcrumbs {
	font-size: var(--t-xs);
	color: var(--c-muted);
	margin-bottom: var(--s-3);
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-amber-dark); }

.entry-content { max-width: var(--w-text); }
.entry-content > * + * { margin-top: var(--s-5); }
.entry-content h2 { margin-top: var(--s-7); }
.entry-content h3 { margin-top: var(--s-6); }
.entry-content img { border-radius: var(--r-md); }
.entry-content figcaption {
	font-size: var(--t-xs);
	color: var(--c-muted);
	margin-top: var(--s-2);
	text-align: center;
}

/* Halaman lebar (landing) tidak dibatasi lebar teks */
.entry-content--wide { max-width: none; }

.entry-meta {
	font-family: var(--f-head);
	font-size: var(--t-sm);
	color: var(--c-muted);
	margin-bottom: var(--s-5);
}

.post-tags { margin-top: var(--s-6); }
.post-tags a {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	margin: 0 var(--s-2) var(--s-2) 0;
	font-size: var(--t-xs);
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	text-decoration: none;
	color: var(--c-body);
}
.post-tags a:hover { background: var(--c-cream); }

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: center;
	margin-top: var(--s-7);
	list-style: none;
	padding: 0;
}
.pagination li { margin: 0; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--s-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	text-decoration: none;
	font-family: var(--f-head);
	color: var(--c-ink);
}
.pagination .page-numbers:hover { background: var(--c-cream); }
.pagination .page-numbers.current {
	background: var(--c-amber);
	border-color: var(--c-amber);
	color: #fff;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	background: var(--c-ink);
	color: rgba(255, 255, 255, 0.72);
	padding-block: var(--s-8) var(--s-5);
	font-size: var(--t-sm);
}
.site-footer h2, .site-footer h3 {
	color: #fff;
	font-size: var(--t-lg);
	margin-bottom: var(--s-4);
}
.site-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.site-footer a:hover { color: var(--c-amber); text-decoration: underline; }

.footer-grid {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	padding-bottom: var(--s-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li + li { margin-top: var(--s-2); }

.footer-contact address {
	font-style: normal;
	line-height: 1.7;
}

.social-row {
	display: flex;
	gap: var(--s-3);
	margin-top: var(--s-4);
}
.social-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transition: background-color 0.18s ease;
}
.social-row a:hover { background: var(--c-amber); }
.social-row svg { width: 19px; height: 19px; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--s-5);
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.55);
}

/* Tombol WhatsApp mengambang */
.wa-float {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	background: #25d366;
	color: #fff;
	border-radius: 50%;
	box-shadow: var(--shadow-2);
	text-decoration: none;
}
.wa-float:hover { background: #1da851; color: #fff; }
.wa-float svg { width: 30px; height: 30px; }

/* ==========================================================================
   13. Formulir (WPForms & bawaan)
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"], textarea, select {
	width: 100%;
	padding: var(--s-3);
	min-height: 44px;
	font-family: inherit;
	font-size: var(--t-base);
	color: var(--c-ink);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
}
input:focus, textarea:focus, select:focus { border-color: var(--c-amber); }
label { font-family: var(--f-head); font-size: var(--t-sm); color: var(--c-ink); }

.wpforms-container .wpforms-submit,
button[type="submit"], input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8em 1.6em !important;
	min-height: 44px;
	font-family: var(--f-head) !important;
	font-size: var(--t-base) !important;
	background: var(--c-amber) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--r-pill) !important;
	cursor: pointer;
}
.wpforms-container .wpforms-submit:hover,
button[type="submit"]:hover, input[type="submit"]:hover { background: var(--c-amber-dark) !important; }

/* ==========================================================================
   14. Cetak
   ========================================================================== */

@media print {
	.site-header, .site-footer, .wa-float, .nav-toggle, .btn-row { display: none !important; }
	body { color: #000; font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   15. LAPISAN VISUAL — gradient, kedalaman, dan gerak
   --------------------------------------------------------------------------
   Semua efek di bawah murni CSS. Tidak ada library animasi, tidak ada
   JavaScript untuk paralaks. Total tambahan ±9 KB sebelum kompresi.

   Setiap animasi dimatikan otomatis oleh blok prefers-reduced-motion
   di bagian 2 — pengunjung yang sensitif gerak tetap mendapat situs statis.
   ========================================================================== */

:root {
	--grad-warm: linear-gradient(135deg, var(--c-amber) 0%, var(--c-caramel) 55%, var(--c-tan) 100%);
	--grad-deep: linear-gradient(150deg, #3a2a1c 0%, var(--c-ink) 60%, #1d2a30 100%);
	--grad-shine: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 48%, transparent 62%);
	--shadow-rgb: 201, 152, 114;
	--shadow-warm: 0 10px 30px rgba(var(--shadow-rgb), .18), 0 2px 8px rgba(var(--shadow-rgb), .12);
	--shadow-lift: 0 22px 48px rgba(var(--shadow-rgb), .26), 0 4px 12px rgba(var(--shadow-rgb), .14);
}

/* ---------- Keyframes ---------- */

@keyframes floaty {
	0%, 100% { transform: translateY(0) }
	50%      { transform: translateY(-14px) }
}

@keyframes meshFloat {
	0%   { transform: translate3d(0, 0, 0) scale(1) }
	100% { transform: translate3d(3%, -4%, 0) scale(1.12) }
}

@keyframes orbUp {
	0%   { transform: translateY(110%) scale(.7); opacity: 0 }
	12%  { opacity: .55 }
	88%  { opacity: .35 }
	100% { transform: translateY(-130%) scale(1.15); opacity: 0 }
}

@keyframes pulseGlow {
	0%, 100% { opacity: .45; transform: scale(1) }
	50%      { opacity: .8;  transform: scale(1.08) }
}

@keyframes shine {
	0%   { background-position: -180% 0 }
	100% { background-position: 180% 0 }
}

@keyframes scrollX {
	0%   { transform: translateX(0) }
	100% { transform: translateX(-50%) }
}

@keyframes revealUp {
	from { opacity: 0; transform: translateY(26px) }
	to   { opacity: 1; transform: none }
}

/* ---------- Pengungkap saat digulir ----------
   Memakai scroll-driven animation asli browser bila didukung
   (Chrome/Edge 115+). Browser lain memakai kelas .is-in dari
   IntersectionObserver kecil di app.js. Tanpa keduanya, konten
   tetap terlihat — tidak pernah ada teks yang hilang. */

.reveal { opacity: 0; animation: revealUp .7s cubic-bezier(.22,.8,.3,1) forwards; animation-play-state: paused }
.reveal.is-in { animation-play-state: running }
.reveal:nth-child(2) { animation-delay: .08s }
.reveal:nth-child(3) { animation-delay: .16s }
.reveal:nth-child(4) { animation-delay: .24s }

@supports (animation-timeline: view()) {
	.reveal {
		animation-play-state: running;
		animation-timeline: view();
		animation-range: entry 8% cover 26%;
		animation-fill-mode: both;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; animation: none !important; transform: none !important }
}

/* ---------- Hero: mesh gradient + orb mengambang ---------- */

.hero {
	background: var(--grad-deep);
	min-height: clamp(500px, 78vh, 760px);
}

/* Lapisan mesh yang bergerak sangat lambat — memberi kesan hidup tanpa mengganggu. */
.hero__mesh {
	position: absolute;
	inset: -18%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(42% 42% at 18% 24%, rgba(224,153,0,.34) 0%, transparent 62%),
		radial-gradient(38% 38% at 82% 18%, rgba(201,152,114,.30) 0%, transparent 60%),
		radial-gradient(46% 46% at 68% 82%, rgba(255,232,204,.22) 0%, transparent 66%);
	animation: meshFloat 20s ease-in-out infinite alternate;
	will-change: transform;
}

.hero::after {
	background: linear-gradient(100deg,
		rgba(29,42,48,.90) 0%,
		rgba(29,42,48,.68) 46%,
		rgba(29,42,48,.20) 100%);
}

/* Gelembung yang naik perlahan — 6 buah, murni CSS. */
.hero__orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none }
.hero__orbs span {
	position: absolute;
	bottom: -12%;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), rgba(224,153,0,.18) 60%, transparent 72%);
	animation: orbUp linear infinite;
}
.hero__orbs span:nth-child(1) { left:  8%; width: 46px; height: 46px; animation-duration: 17s; animation-delay: 0s }
.hero__orbs span:nth-child(2) { left: 24%; width: 22px; height: 22px; animation-duration: 13s; animation-delay: 2.5s }
.hero__orbs span:nth-child(3) { left: 46%; width: 62px; height: 62px; animation-duration: 21s; animation-delay: 1.2s }
.hero__orbs span:nth-child(4) { left: 63%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: 4s }
.hero__orbs span:nth-child(5) { left: 79%; width: 52px; height: 52px; animation-duration: 19s; animation-delay: 3s }
.hero__orbs span:nth-child(6) { left: 92%; width: 26px; height: 26px; animation-duration: 12s; animation-delay: 5.5s }

.hero__media img { transform: scale(1.04); filter: saturate(1.06) }

.hero__eyebrow {
	background: var(--grad-warm);
	box-shadow: 0 6px 18px rgba(224,153,0,.32);
	animation: pulseGlow 4.5s ease-in-out infinite;
}

.hero__content h1 {
	text-shadow: 0 2px 24px rgba(0,0,0,.32);
	letter-spacing: -0.02em;
}

/* Kata kunci disorot dengan gradient teks. */
.hero__content h1 .accent {
	background: linear-gradient(100deg, var(--c-amber) 0%, #ffd88a 50%, var(--c-amber) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shine 6s linear infinite;
}

/* Lekukan lembut di bawah hero. */
.hero__curve {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	z-index: 1;
	line-height: 0;
	pointer-events: none;
}
.hero__curve svg { width: 100%; height: clamp(40px, 6vw, 80px); display: block }
.hero__curve path { fill: var(--c-bg) }

/* ---------- Pita kepercayaan berjalan (marquee) ---------- */

.trust-bar {
	background: var(--grad-warm);
	color: #fff;
	overflow: hidden;
	padding-block: var(--s-3);
	--mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
}
.trust-bar__track {
	display: flex;
	width: max-content;
	animation: scrollX 32s linear infinite;
}
.trust-bar:hover .trust-bar__track { animation-play-state: paused }
.trust-bar ul {
	display: flex;
	gap: var(--s-6);
	padding: 0 var(--s-4);
	margin: 0;
	list-style: none;
	white-space: nowrap;
	font-family: var(--f-head);
	font-size: var(--t-sm);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.trust-bar li { display: flex; align-items: center; gap: var(--s-2); margin: 0 }
.trust-bar svg { color: #fff; opacity: .9 }

@media (prefers-reduced-motion: reduce) {
	.trust-bar__track { animation: none; width: 100%; justify-content: center }
	.trust-bar__track ul:nth-child(2) { display: none }
}

/* ---------- Kartu: kedalaman & sorotan ---------- */

.card, .feature, .testimonial, .price-card {
	position: relative;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-warm);
	border-color: rgba(var(--shadow-rgb), .14);
	transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
.card:hover, .feature:hover, .testimonial:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lift);
}

/* Garis aksen yang tumbuh saat disentuh. */
.card::after, .feature::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 3px; width: 0;
	background: var(--grad-warm);
	border-radius: 0 0 0 var(--r-lg);
	transition: width .4s cubic-bezier(.22,.8,.3,1);
}
.card:hover::after, .feature:hover::after { width: 100% }

.card__media { overflow: hidden }
.card__media img { transition: transform .5s cubic-bezier(.22,.8,.3,1) }
.card:hover .card__media img { transform: scale(1.06) }

/* Ikon fitur dengan gradient dan gerak halus. */
.feature__icon {
	background: var(--grad-warm);
	color: #fff;
	box-shadow: 0 8px 20px rgba(224,153,0,.28);
}
.feature:hover .feature__icon { animation: floaty 2.4s ease-in-out infinite }

/* Kartu produk: latar lembut supaya foto kemasan menonjol. */
.product-card .card__media {
	background: radial-gradient(70% 70% at 50% 40%, var(--c-cream) 0%, #fff 72%);
}

/* ---------- Judul section ---------- */

.section-title .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.section-title .eyebrow::before {
	content: "";
	width: 26px; height: 2px;
	background: var(--grad-warm);
	border-radius: 2px;
}
.center .section-title .eyebrow::after {
	content: "";
	width: 26px; height: 2px;
	background: var(--grad-warm);
	border-radius: 2px;
}

/* ---------- Latar section bergradasi ---------- */

.section--soft {
	background:
		radial-gradient(58% 58% at 12% 0%, rgba(255,232,204,.55) 0%, transparent 60%),
		radial-gradient(52% 52% at 92% 100%, rgba(201,152,114,.16) 0%, transparent 62%),
		var(--c-bg-soft);
}

.section--cream {
	background:
		radial-gradient(60% 60% at 82% 8%, rgba(224,153,0,.14) 0%, transparent 62%),
		var(--c-cream);
}

/* ---------- Pita CTA ---------- */

.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--grad-warm);
	box-shadow: var(--shadow-lift);
	border-radius: var(--r-lg);
}
.cta-band::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: radial-gradient(38% 38% at 22% 28%, rgba(255,255,255,.30) 0%, transparent 62%);
	animation: meshFloat 16s ease-in-out infinite alternate;
	pointer-events: none;
}
.cta-band > * { position: relative }

/* ---------- Tombol ---------- */

.btn { position: relative; overflow: hidden; isolation: isolate }
.btn--primary { background: var(--grad-warm); box-shadow: 0 8px 22px rgba(224,153,0,.30) }
.btn--primary:hover { box-shadow: 0 12px 28px rgba(224,153,0,.42) }
.btn--cta { box-shadow: 0 8px 22px rgba(224,43,32,.30) }

/* Kilau yang menyapu saat kursor lewat. */
.btn::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--grad-shine);
	background-size: 200% 100%;
	background-position: -180% 0;
	opacity: 0;
	transition: opacity .2s ease;
}
.btn:hover::before { opacity: .7; animation: shine 1.1s linear }

/* ---------- FAQ ---------- */

.faq__item {
	border-radius: var(--r-md);
	box-shadow: var(--shadow-warm);
	border-color: rgba(var(--shadow-rgb), .14);
	transition: box-shadow .3s ease, transform .3s ease;
}
.faq__item[open] { box-shadow: var(--shadow-lift); border-color: var(--c-amber) }
.faq__item[open] .faq__q { background: linear-gradient(90deg, var(--c-cream), transparent) }

/* ---------- Testimoni ---------- */

.testimonial::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--grad-warm);
	border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.testimonial { padding-left: calc(var(--s-5) + 4px) }

/* ---------- Header ---------- */

.site-header {
	background: rgba(255,255,255,.82);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(var(--shadow-rgb), .16);
	transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(var(--shadow-rgb), .16) }

.main-nav a { position: relative }
.main-nav a::after {
	content: "";
	position: absolute;
	left: var(--s-3); right: var(--s-3); bottom: 4px;
	height: 2px;
	background: var(--grad-warm);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.22,.8,.3,1);
}
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after { transform: scaleX(1) }

/* ---------- Kepala halaman dalam ---------- */

.page-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 12% 0%, rgba(255,232,204,.70) 0%, transparent 62%),
		radial-gradient(50% 60% at 88% 100%, rgba(201,152,114,.20) 0%, transparent 60%),
		var(--c-bg-soft);
	border-bottom: 1px solid rgba(var(--shadow-rgb), .14);
	padding-block: var(--s-8);
}
.page-hero h1 {
	background: linear-gradient(120deg, var(--c-ink) 0%, var(--c-caramel-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Footer ---------- */

.site-footer {
	position: relative;
	background: var(--grad-deep);
	overflow: hidden;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 60%;
	background: radial-gradient(50% 60% at 30% 0%, rgba(224,153,0,.16) 0%, transparent 64%);
	pointer-events: none;
}
.site-footer .wrap { position: relative }
.social-row a { transition: transform .3s cubic-bezier(.22,.8,.3,1), background-color .3s ease }
.social-row a:hover { transform: translateY(-4px) }

/* ---------- Tombol WhatsApp ---------- */

.wa-float {
	box-shadow: 0 10px 26px rgba(37,211,102,.42);
	animation: floaty 3.6s ease-in-out infinite;
}
.wa-float:hover { animation-play-state: paused; transform: scale(1.08) }

/* Gambar di dalam konten halaman. */
.entry-content .content-figure,
.entry-content figure {
	margin-inline: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-warm);
}
.entry-content figure img { border-radius: 0; width: 100% }

/* Section hasil migrasi tidak perlu padding ganda di dalam .entry-content. */
.entry-content > section.section { padding-block: var(--s-6) }
.entry-content > section.section:first-child { padding-top: 0 }

/* ==========================================================================
   16. HERO TANPA FOTO — gradient + gelembung terbang
   --------------------------------------------------------------------------
   Foto latar dihapus sepenuhnya. Latar kini murni gradient radial dari
   atas-tengah, seperti elfathmakaronikeju.com, dengan gelembung yang naik.

   Efek sampingnya bagus untuk kecepatan: elemen LCP berubah dari gambar
   244 KB menjadi teks, yang selalu lebih cepat tampil.
   ========================================================================== */

.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: clamp(560px, 88vh, 860px);
	padding-block: var(--s-9) var(--s-8);
	background: radial-gradient(120% 120% at 50% 0%,
		#2a1d12 0%,
		#4a3320 34%,
		var(--c-caramel-dark) 74%,
		var(--c-amber-dark) 100%);
	color: #fff;
}

/* Tidak ada lagi lapisan gelap untuk foto. */
.hero::after { content: none }

.hero__mesh {
	inset: 0;
	background:
		radial-gradient(40% 40% at 18% 22%, rgba(255,183,3,.26) 0%, transparent 62%),
		radial-gradient(36% 36% at 84% 16%, rgba(255,232,204,.20) 0%, transparent 60%),
		radial-gradient(48% 48% at 62% 88%, rgba(224,153,0,.24) 0%, transparent 66%),
		radial-gradient(30% 30% at 8% 76%, rgba(201,152,114,.22) 0%, transparent 64%);
	animation: meshFloat 22s ease-in-out infinite alternate;
}

.hero__inner { padding-block: 0; position: relative; z-index: 3 }

.hero__content {
	max-width: 860px;
	margin-inline: auto;
}

.hero__content h1 {
	font-size: clamp(2.4rem, 7.5vw, 4.75rem);
	line-height: 1.04;
	margin-bottom: var(--s-5);
}

.hero__content p {
	margin-inline: auto;
	max-width: 58ch;
	font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
}

.hero .btn-row { justify-content: center }

/* ---------- Gelembung terbang ----------
   14 gelembung dengan ukuran, posisi, kecepatan, dan jeda berbeda-beda
   supaya polanya tidak terlihat berulang. Semuanya satu elemen <span>
   tanpa gambar — biayanya nol permintaan HTTP. */

.hero__orbs span {
	background:
		radial-gradient(circle at 30% 28%,
			rgba(255,255,255,.78) 0%,
			rgba(255,232,204,.34) 38%,
			rgba(224,153,0,.16) 62%,
			transparent 74%);
	box-shadow: inset 0 0 18px rgba(255,255,255,.22);
	backdrop-filter: blur(1px);
}

.hero__orbs span:nth-child(1)  { left:  4%; width: 54px; height: 54px; animation-duration: 18s; animation-delay:  0s }
.hero__orbs span:nth-child(2)  { left: 12%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 3.4s }
.hero__orbs span:nth-child(3)  { left: 19%; width: 78px; height: 78px; animation-duration: 24s; animation-delay: 1.1s }
.hero__orbs span:nth-child(4)  { left: 27%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: 6.2s }
.hero__orbs span:nth-child(5)  { left: 35%; width: 44px; height: 44px; animation-duration: 20s; animation-delay: 2.3s }
.hero__orbs span:nth-child(6)  { left: 43%; width: 16px; height: 16px; animation-duration: 11s; animation-delay: 8s   }
.hero__orbs span:nth-child(7)  { left: 51%; width: 62px; height: 62px; animation-duration: 22s; animation-delay: 4.6s }
.hero__orbs span:nth-child(8)  { left: 58%; width: 26px; height: 26px; animation-duration: 14s; animation-delay: 1.8s }
.hero__orbs span:nth-child(9)  { left: 66%; width: 90px; height: 90px; animation-duration: 26s; animation-delay: 7.1s }
.hero__orbs span:nth-child(10) { left: 74%; width: 22px; height: 22px; animation-duration: 13s; animation-delay: 5.3s }
.hero__orbs span:nth-child(11) { left: 81%; width: 50px; height: 50px; animation-duration: 19s; animation-delay:  .7s }
.hero__orbs span:nth-child(12) { left: 88%; width: 34px; height: 34px; animation-duration: 16s; animation-delay: 9.4s }
.hero__orbs span:nth-child(13) { left: 94%; width: 68px; height: 68px; animation-duration: 23s; animation-delay: 3s   }
.hero__orbs span:nth-child(14) { left: 99%; width: 18px; height: 18px; animation-duration: 10s; animation-delay: 6.8s }

/* Gelembung besar bergoyang sedikit ke samping saat naik. */
@keyframes orbUpDrift {
	0%   { transform: translate(0, 110%) scale(.65); opacity: 0 }
	10%  { opacity: .6 }
	50%  { transform: translate(14px, -10%) scale(1) }
	90%  { opacity: .3 }
	100% { transform: translate(-10px, -130%) scale(1.2); opacity: 0 }
}
.hero__orbs span:nth-child(3n) { animation-name: orbUpDrift }

/* Layar kecil: kurangi jumlah gelembung agar tidak ramai dan hemat GPU. */
@media (max-width: 640px) {
	.hero__orbs span:nth-child(n+9) { display: none }
	.hero { min-height: clamp(480px, 78vh, 640px) }
}

@media (prefers-reduced-motion: reduce) {
	.hero__orbs { display: none }
}

/* ==========================================================================
   17. PERBAIKAN GELEMBUNG + LAPISAN KONVERSI
   --------------------------------------------------------------------------
   Bug: .hero__orbs dan .hero__mesh memakai z-index negatif, sementara
   .hero punya isolation:isolate — akibatnya keduanya tersembunyi di
   belakang background hero. Ditumpuk ulang dengan z-index positif.
   ========================================================================== */

.hero { isolation: auto }
.hero__mesh  { z-index: 1 }
.hero__orbs  { z-index: 2 }
.hero__inner { z-index: 3 }
.hero__curve { z-index: 4 }

/* ---------- Gelembung berkilau ---------- */

.hero__orbs span {
	background:
		radial-gradient(circle at 30% 26%,
			rgba(255,255,255,.95) 0%,
			rgba(255,255,255,.45) 12%,
			rgba(255,236,190,.28) 34%,
			rgba(224,153,0,.16) 58%,
			rgba(255,255,255,.10) 72%,
			transparent 78%);
	box-shadow:
		inset 0 0 22px rgba(255,255,255,.35),
		inset -6px -8px 18px rgba(224,153,0,.22),
		0 0 22px rgba(255,214,140,.30);
	border: 1px solid rgba(255,255,255,.30);
	backdrop-filter: blur(1.5px);
}

/* Titik kilau kecil di tiap gelembung — memberi kesan permukaan basah. */
.hero__orbs span::after {
	content: "";
	position: absolute;
	top: 16%; left: 22%;
	width: 26%; height: 22%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 55%, transparent 72%);
	filter: blur(.5px);
	animation: sparkle 3.2s ease-in-out infinite;
}
.hero__orbs span:nth-child(2n)::after { animation-delay: 1.1s }
.hero__orbs span:nth-child(3n)::after { animation-delay: 2.3s }

@keyframes sparkle {
	0%, 100% { opacity: .55; transform: scale(.9) }
	50%      { opacity: 1;   transform: scale(1.15) }
}

/* Lebih ramai: 14 → 22 gelembung. */
.hero__orbs span:nth-child(15) { left: 7%;  width: 38px; height: 38px; animation-duration: 17s; animation-delay: 2.1s }
.hero__orbs span:nth-child(16) { left: 16%; width: 58px; height: 58px; animation-duration: 21s; animation-delay: 7.4s }
.hero__orbs span:nth-child(17) { left: 31%; width: 24px; height: 24px; animation-duration: 13s; animation-delay: 4.2s }
.hero__orbs span:nth-child(18) { left: 47%; width: 72px; height: 72px; animation-duration: 25s; animation-delay: 9.1s }
.hero__orbs span:nth-child(19) { left: 55%; width: 32px; height: 32px; animation-duration: 15s; animation-delay: 6s   }
.hero__orbs span:nth-child(20) { left: 70%; width: 46px; height: 46px; animation-duration: 19s; animation-delay: 2.8s }
.hero__orbs span:nth-child(21) { left: 85%; width: 28px; height: 28px; animation-duration: 14s; animation-delay: 8.3s }
.hero__orbs span:nth-child(22) { left: 96%; width: 56px; height: 56px; animation-duration: 22s; animation-delay: 5s   }

@media (max-width: 640px) {
	.hero__orbs span:nth-child(n+13) { display: none }
}

/* ==========================================================================
   18. KOMPONEN KONVERSI
   ========================================================================== */

/* ---------- Pita sertifikasi ---------- */

.certs { background: #fff; border-block: 1px solid rgba(var(--shadow-rgb), .18) }
.certs__grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.cert {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4);
	border-radius: var(--r-md);
	background: linear-gradient(135deg, rgba(255,232,204,.55), rgba(255,255,255,0));
	border: 1px solid rgba(var(--shadow-rgb), .16);
	transition: transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease;
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-warm) }
.cert__badge {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--grad-warm);
	color: #fff;
	box-shadow: 0 6px 16px rgba(224,153,0,.32);
}
.cert__badge svg { width: 26px; height: 26px }
.cert__name {
	font-family: var(--f-head);
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.2;
}
.cert__desc { font-size: var(--t-xs); color: var(--c-muted); margin: 2px 0 0 }

/* ---------- Statistik / pencapaian ---------- */

.stats {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	text-align: center;
}
.stat__num {
	font-family: var(--f-head);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	background: var(--grad-warm);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.stat__label {
	margin-top: var(--s-2);
	font-size: var(--t-sm);
	color: var(--c-muted);
}

/* ---------- Langkah / timeline ---------- */

.steps { counter-reset: step; display: grid; gap: var(--s-5) }
.step {
	position: relative;
	display: flex;
	gap: var(--s-5);
	padding: var(--s-5);
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .16);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-warm);
}
.step::before {
	counter-increment: step;
	content: counter(step);
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--grad-warm);
	color: #fff;
	font-family: var(--f-head);
	font-size: var(--t-lg);
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(224,153,0,.30);
}
.step h3 { margin-bottom: var(--s-2); font-size: var(--t-h4) }
.step p { margin: 0; font-size: var(--t-sm) }

/* ---------- Kartu jaminan ---------- */

.guarantee {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-5);
	border-radius: var(--r-lg);
	background: rgba(255,255,255,.72);
	border: 1px solid rgba(var(--shadow-rgb), .18);
	backdrop-filter: blur(6px);
}
.guarantee svg { flex-shrink: 0; color: var(--c-amber-dark); width: 26px; height: 26px }
.guarantee h3 { font-size: var(--t-base); margin-bottom: var(--s-1) }
.guarantee p { font-size: var(--t-sm); margin: 0 }

/* ---------- Tabel margin reseller ---------- */

.margin-table { width: 100%; border-collapse: separate; border-spacing: 0 }
.margin-table th {
	background: var(--c-ink);
	color: #fff;
	font-family: var(--f-head);
	font-weight: 500;
	padding: var(--s-3);
	font-size: var(--t-sm);
}
.margin-table th:first-child { border-radius: var(--r-md) 0 0 0 }
.margin-table th:last-child  { border-radius: 0 var(--r-md) 0 0 }
.margin-table td {
	padding: var(--s-3);
	background: #fff;
	border-bottom: 1px solid rgba(var(--shadow-rgb), .16);
	font-size: var(--t-sm);
}
.margin-table tr:hover td { background: var(--c-cream) }
.margin-table .profit {
	font-family: var(--f-head);
	font-weight: 600;
	color: #1f7a45;
	white-space: nowrap;
}
.margin-table .tier { font-family: var(--f-head); color: var(--c-ink) }

/* ---------- Section gelap ---------- */

.section--dark {
	position: relative;
	overflow: hidden;
	background: radial-gradient(110% 110% at 50% 0%, #2a1d12 0%, #3d2a1a 45%, var(--c-ink) 100%);
	color: rgba(255,255,255,.86);
}
.section--dark h2, .section--dark h3 { color: #fff }
.section--dark .section-title p { color: rgba(255,255,255,.72) }
.section--dark .eyebrow { color: var(--c-amber) }
.section--dark::before {
	content: "";
	position: absolute;
	inset: -25%;
	background: radial-gradient(36% 36% at 22% 26%, rgba(224,153,0,.18) 0%, transparent 62%);
	animation: meshFloat 20s ease-in-out infinite alternate;
	pointer-events: none;
}
.section--dark > * { position: relative }

/* ---------- Toko resmi ---------- */

.store-cta {
	display: grid;
	gap: var(--s-5);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	padding: var(--s-7) var(--s-6);
	border-radius: var(--r-lg);
	background: var(--grad-warm);
	color: #fff;
	box-shadow: var(--shadow-lift);
	position: relative;
	overflow: hidden;
}
.store-cta::before {
	content: "";
	position: absolute; inset: -40%;
	background: radial-gradient(34% 34% at 26% 30%, rgba(255,255,255,.28) 0%, transparent 62%);
	animation: meshFloat 15s ease-in-out infinite alternate;
}
.store-cta > * { position: relative }
.store-cta h2 { color: #fff; margin-bottom: var(--s-2) }
.store-cta p { color: rgba(255,255,255,.94) }
.store-cta .btn--ghost-light { border-color: #fff }

/* ==========================================================================
   19. PERBAIKAN JARAK TEMPUH GELEMBUNG
   --------------------------------------------------------------------------
   Bug: translateY dengan satuan % mengacu ke tinggi elemen itu sendiri,
   bukan tinggi wadah. Gelembung 22px hanya menempuh ~53px, jadi tidak
   pernah naik melewati hero dan terpotong overflow:hidden di bawah.

   Perbaikan: jarak tempuh memakai vh supaya tidak bergantung pada
   ukuran gelembung — semua menempuh satu tinggi layar penuh.
   ========================================================================== */

.hero__orbs span {
	bottom: -160px;
	opacity: 0;
	will-change: transform, opacity;
}

@keyframes orbUp {
	0%   { transform: translateY(0) scale(.6);    opacity: 0 }
	8%   { opacity: .75 }
	80%  { opacity: .5 }
	100% { transform: translateY(-102vh) scale(1.2); opacity: 0 }
}

@keyframes orbUpDrift {
	0%   { transform: translate(0, 0) scale(.6);          opacity: 0 }
	8%   { opacity: .8 }
	50%  { transform: translate(26px, -52vh) scale(1) }
	80%  { opacity: .45 }
	100% { transform: translate(-18px, -102vh) scale(1.25); opacity: 0 }
}

/* Hero perlu jadi konteks pemotong, bukan wadah orb-nya, supaya
   gelembung bisa melintas penuh dari bawah ke atas. */
.hero { overflow: hidden }
.hero__orbs { overflow: visible; inset: 0 }

/* ==========================================================================
   20. GELEMBUNG → MAKARONI
   --------------------------------------------------------------------------
   Bentuk makaroni siku dibuat dari satu SVG data-URI: busur tebal dengan
   ujung membulat (stroke-linecap:round), ditambah busur tipis lebih gelap
   di dalamnya untuk memberi kesan lekuk tabung, dan dua elips di ujung
   sebagai lubang makaroni.

   Satu berkas SVG dipakai ulang oleh semua elemen — nol permintaan HTTP,
   dan warnanya sudah putih kekuningan lembut sesuai permintaan.
   ========================================================================== */

.hero__orbs span {
	/* Buang sisa tampilan gelembung. */
	border-radius: 0;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	background: none;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22 80 A34 34 0 1 1 78 80' stroke='%23fdf6e3' stroke-width='30'/%3E%3Cpath d='M22 80 A34 34 0 1 1 78 80' stroke='%23fffdf5' stroke-width='14'/%3E%3Cpath d='M28 74 A28 28 0 0 1 40 30' stroke='%23ffffff' stroke-width='6' opacity='.75'/%3E%3C/g%3E%3Cellipse cx='22' cy='80' rx='15' ry='13' fill='%23f2e3bd'/%3E%3Cellipse cx='78' cy='80' rx='15' ry='13' fill='%23f2e3bd'/%3E%3Cellipse cx='22' cy='80' rx='7' ry='6' fill='%23e6d2a4'/%3E%3Cellipse cx='78' cy='80' rx='7' ry='6' fill='%23e6d2a4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	filter: drop-shadow(0 3px 10px rgba(120, 80, 30, .22));
}

/* Kilau lembut menggantikan titik gelembung — lebih pas untuk permukaan pasta. */
.hero__orbs span::after {
	top: 22%; left: 26%;
	width: 20%; height: 14%;
	background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 60%, transparent 74%);
	filter: blur(1px);
	animation: sparkle 4s ease-in-out infinite;
}

/* Makaroni jatuh dengan sudut acak-acakan supaya tidak terlihat seragam. */

/* Rotasi ikut berputar pelan selama naik — makaroni terasa melayang,
   bukan sekadar bergeser. Nilai rotasi digabung di dalam keyframe
   supaya tidak menimpa transform translateY. */
@keyframes orbUp {
	0%   { transform: translateY(0) rotate(0deg) scale(.6);        opacity: 0 }
	8%   { opacity: .9 }
	80%  { opacity: .6 }
	100% { transform: translateY(-102vh) rotate(190deg) scale(1.15); opacity: 0 }
}

@keyframes orbUpDrift {
	0%   { transform: translate(0, 0) rotate(0deg) scale(.6);              opacity: 0 }
	8%   { opacity: .95 }
	50%  { transform: translate(26px, -52vh) rotate(-120deg) scale(1) }
	80%  { opacity: .55 }
	100% { transform: translate(-18px, -102vh) rotate(-250deg) scale(1.2); opacity: 0 }
}

/* Makaroni sedikit lebih besar dari gelembung agar bentuknya terbaca. */
.hero__orbs span:nth-child(1)  { width: 62px; height: 62px }
.hero__orbs span:nth-child(3)  { width: 92px; height: 92px }
.hero__orbs span:nth-child(7)  { width: 78px; height: 78px }
.hero__orbs span:nth-child(9)  { width: 104px; height: 104px }
.hero__orbs span:nth-child(13) { width: 84px; height: 84px }
.hero__orbs span:nth-child(16) { width: 72px; height: 72px }
.hero__orbs span:nth-child(18) { width: 88px; height: 88px }
.hero__orbs span:nth-child(22) { width: 70px; height: 70px }

/* Yang kecil dibuat tidak terlalu mungil supaya lekuknya masih terlihat. */
.hero__orbs span:nth-child(2),
.hero__orbs span:nth-child(6),
.hero__orbs span:nth-child(14),
.hero__orbs span:nth-child(17),
.hero__orbs span:nth-child(21) { width: 38px; height: 38px }

/* Rotasi per makaroni lewat custom property, dibaca dari dalam keyframe.
   Cara ini benar-benar berpengaruh, berbeda dengan aturan transform
   terpisah yang selalu dikalahkan oleh transform milik animasi. */
.hero__orbs span { --rot: 200deg; --tilt: 0deg }

.hero__orbs span:nth-child(3n+1) { --rot:  240deg; --tilt: -22deg }
.hero__orbs span:nth-child(3n+2) { --rot: -180deg; --tilt:  38deg }
.hero__orbs span:nth-child(3n)   { --rot:  300deg; --tilt: -55deg }
.hero__orbs span:nth-child(5n)   { --rot: -260deg; --tilt: 105deg }
.hero__orbs span:nth-child(7n)   { --rot:  160deg; --tilt: -85deg }

@keyframes orbUp {
	0%   { transform: translateY(0) rotate(var(--tilt)) scale(.6); opacity: 0 }
	8%   { opacity: .9 }
	80%  { opacity: .6 }
	100% { transform: translateY(-102vh) rotate(calc(var(--tilt) + var(--rot))) scale(1.15); opacity: 0 }
}

@keyframes orbUpDrift {
	0%   { transform: translate(0, 0) rotate(var(--tilt)) scale(.6); opacity: 0 }
	8%   { opacity: .95 }
	50%  { transform: translate(26px, -52vh) rotate(calc(var(--tilt) + var(--rot) * .5)) scale(1) }
	80%  { opacity: .55 }
	100% { transform: translate(-18px, -102vh) rotate(calc(var(--tilt) + var(--rot))) scale(1.2); opacity: 0 }
}

/* Jumlah makaroni dikurangi 22 → 9 agar terasa lebih lapang.
   Posisi disebar ulang supaya tidak menumpuk di satu sisi. */
.hero__orbs span:nth-child(1) { left:  6%; width: 64px; height: 64px; animation-duration: 21s; animation-delay: 0s   }
.hero__orbs span:nth-child(2) { left: 19%; width: 42px; height: 42px; animation-duration: 17s; animation-delay: 5.5s }
.hero__orbs span:nth-child(3) { left: 31%; width: 88px; height: 88px; animation-duration: 26s; animation-delay: 2.2s }
.hero__orbs span:nth-child(4) { left: 44%; width: 38px; height: 38px; animation-duration: 15s; animation-delay: 9s   }
.hero__orbs span:nth-child(5) { left: 56%; width: 72px; height: 72px; animation-duration: 23s; animation-delay: 3.8s }
.hero__orbs span:nth-child(6) { left: 68%; width: 46px; height: 46px; animation-duration: 18s; animation-delay: 12s  }
.hero__orbs span:nth-child(7) { left: 79%; width: 96px; height: 96px; animation-duration: 28s; animation-delay: 6.7s }
.hero__orbs span:nth-child(8) { left: 90%; width: 40px; height: 40px; animation-duration: 16s; animation-delay: 1.4s }
.hero__orbs span:nth-child(9) { left: 97%; width: 68px; height: 68px; animation-duration: 24s; animation-delay: 8.3s }

/* Ponsel: 5 saja. */
@media (max-width: 640px) {
	.hero__orbs span:nth-child(n+6) { display: none }
}

/* ==========================================================================
   21. LENGKUNG MAKARONI SETENGAH LINGKARAN + ANIMASI BAGIAN BAWAH
   --------------------------------------------------------------------------
   Lengkungan sebelumnya memakai large-arc-flag=1 sehingga busurnya ~249°,
   terlalu melingkar. Diganti radius 28 dengan large-arc-flag=0 dan jarak
   ujung 56 — tepat setengah lingkaran (180°).
   ========================================================================== */

.hero__orbs span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22 72 A28 28 0 0 1 78 72' stroke='%23fdf6e3' stroke-width='30'/%3E%3Cpath d='M22 72 A28 28 0 0 1 78 72' stroke='%23fffdf5' stroke-width='13'/%3E%3Cpath d='M30 68 A22 22 0 0 1 40 48' stroke='%23ffffff' stroke-width='5' opacity='.7'/%3E%3C/g%3E%3Cellipse cx='22' cy='72' rx='15' ry='13' fill='%23f2e3bd'/%3E%3Cellipse cx='78' cy='72' rx='15' ry='13' fill='%23f2e3bd'/%3E%3Cellipse cx='22' cy='72' rx='7' ry='6' fill='%23e6d2a4'/%3E%3Cellipse cx='78' cy='72' rx='7' ry='6' fill='%23e6d2a4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Makaroni dekoratif untuk section bawah — dipakai sebagai latar pseudo
   element, jadi tidak menambah satu pun elemen di HTML.
   -------------------------------------------------------------------------- */

:root {
	--mac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22 72 A28 28 0 0 1 78 72' stroke='%23fdf6e3' stroke-width='30'/%3E%3Cpath d='M22 72 A28 28 0 0 1 78 72' stroke='%23fffdf5' stroke-width='13'/%3E%3C/g%3E%3Cellipse cx='22' cy='72' rx='15' ry='13' fill='%23f2e3bd'/%3E%3Cellipse cx='78' cy='72' rx='15' ry='13' fill='%23f2e3bd'/%3E%3C/svg%3E");
}

@keyframes macFloat {
	0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)) }
	50%      { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 18deg)) }
}

@keyframes macSpin {
	from { transform: rotate(0deg) }
	to   { transform: rotate(360deg) }
}

/* ---------- Section gelap: dua makaroni melayang ---------- */

.section--dark::after {
	content: "";
	position: absolute;
	right: -40px; top: 8%;
	width: 190px; height: 190px;
	background: var(--mac) center/contain no-repeat;
	opacity: .07;
	--r: -24deg;
	animation: macFloat 9s ease-in-out infinite;
	pointer-events: none;
}
.section--dark .wrap::before {
	content: "";
	position: absolute;
	left: -70px; bottom: -30px;
	width: 150px; height: 150px;
	background: var(--mac) center/contain no-repeat;
	opacity: .06;
	--r: 140deg;
	animation: macFloat 11s ease-in-out infinite 1.5s;
	pointer-events: none;
}
.section--dark .wrap { position: relative }

/* Angka statistik berdenyut halus bergantian. */
.stats > div:nth-child(1) .stat__num { animation: pulseGlow 5s ease-in-out infinite }
.stats > div:nth-child(2) .stat__num { animation: pulseGlow 5s ease-in-out infinite 1.2s }
.stats > div:nth-child(3) .stat__num { animation: pulseGlow 5s ease-in-out infinite 2.4s }
.stats > div:nth-child(4) .stat__num { animation: pulseGlow 5s ease-in-out infinite 3.6s }

/* ---------- Pita sertifikasi: garis gradient berjalan ---------- */

.certs { position: relative; overflow: hidden }
.certs::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--c-amber), var(--c-caramel), var(--c-amber), transparent);
	background-size: 200% 100%;
	animation: shine 4s linear infinite;
}
.cert__badge { transition: transform .4s cubic-bezier(.22,.8,.3,1) }
.cert:hover .cert__badge { transform: rotate(-12deg) scale(1.08) }

/* ---------- Langkah: garis penghubung yang tumbuh ---------- */

.steps { position: relative }
.step { position: relative; overflow: hidden }
.step::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 4px; height: 0;
	background: var(--grad-warm);
	transition: height .6s cubic-bezier(.22,.8,.3,1);
}
.step:hover::after { height: 100% }
.step:hover { transform: translateX(6px) }
.step { transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease }
.step:hover { box-shadow: var(--shadow-lift) }

/* ---------- Kartu jaminan: ikon bergoyang saat disentuh ---------- */

.guarantee { transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease }
.guarantee:hover { transform: translateY(-5px); box-shadow: var(--shadow-warm) }
.guarantee svg { transition: transform .4s cubic-bezier(.22,.8,.3,1) }
.guarantee:hover svg { transform: scale(1.18) rotate(-8deg) }

/* ---------- Toko resmi: makaroni berputar pelan ---------- */

.store-cta::after {
	content: "";
	position: absolute;
	right: -50px; bottom: -60px;
	width: 220px; height: 220px;
	background: var(--mac) center/contain no-repeat;
	opacity: .16;
	animation: macSpin 40s linear infinite;
	pointer-events: none;
}

/* ---------- Footer: makaroni melayang + garis atas berkilau ---------- */

.site-footer::after {
	content: "";
	position: absolute;
	left: 6%; top: -40px;
	width: 170px; height: 170px;
	background: var(--mac) center/contain no-repeat;
	opacity: .05;
	--r: -30deg;
	animation: macFloat 12s ease-in-out infinite;
	pointer-events: none;
}
.site-footer .footer-grid { position: relative }

/* ---------- Pemisah bergelombang antar section ---------- */

.section--cream { position: relative }
.section--cream::after {
	content: "";
	position: absolute;
	left: -10%; right: -10%; bottom: -1px;
	height: 46px;
	background: radial-gradient(60% 100% at 50% 100%, var(--c-bg) 0%, transparent 72%);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.section--dark::after,
	.section--dark .wrap::before,
	.store-cta::after,
	.site-footer::after,
	.certs::before,
	.stat__num { animation: none !important }
}

/* Kartu produk tanpa foto: beri latar bermotif, bukan kotak kosong,
   supaya tetap rapi sampai fotonya diunggah. */
.product-card .card__media:empty {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	background:
		radial-gradient(70% 70% at 50% 40%, var(--c-cream) 0%, #fff 72%),
		var(--c-bg-soft);
	position: relative;
}
.product-card .card__media:empty::after {
	content: "";
	width: 56%; height: 56%;
	background: var(--mac) center/contain no-repeat;
	opacity: .35;
	--r: -14deg;
	animation: macFloat 7s ease-in-out infinite;
}

/* ==========================================================================
   22. HALAMAN TENTANG KAMI
   ========================================================================== */

.ab-hero .hero__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(224,153,0,.14);
	border: 1px solid rgba(224,153,0,.42);
	color: #ffe9c2;
	letter-spacing: .18em;
	animation: none;
	box-shadow: none;
}
.ab-hero h1 { font-size: clamp(2.5rem, 8vw, 5.4rem); line-height: 1.02 }

/* Butiran halus supaya gradient tidak terlihat rata. */
.ab-grain {
	position: absolute; inset: 0; z-index: 1; opacity: .05; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ab-scroll {
	position: absolute; bottom: 26px; left: 50%; z-index: 5;
	color: rgba(255,255,255,.75);
	animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
	0%, 100% { transform: translate(-50%, 0) }
	50%      { transform: translate(-50%, 10px) }
}

.ab-wave { display: block; width: 100%; height: auto; margin-top: -2px }
.ab-wave path { fill: var(--c-bg) }

/* ---------- Kisah ---------- */

.ab-story {
	display: grid; gap: var(--s-7); align-items: center;
	grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 860px) { .ab-story { grid-template-columns: 1fr } }

.ab-drop::first-letter {
	float: left;
	font-family: var(--f-head);
	font-size: 3.4em;
	line-height: .82;
	padding: .06em .12em 0 0;
	color: var(--c-amber-dark);
}

.ab-visual {
	position: relative;
	display: grid; place-items: center;
	min-height: 340px;
}
.ab-ring {
	position: absolute;
	border-radius: 50%;
	border: 2px dashed rgba(var(--shadow-rgb), .38);
}
.ab-ring.r1 { width: 300px; height: 300px; animation: macSpin 30s linear infinite }
.ab-ring.r2 { width: 220px; height: 220px; border-style: solid; border-color: rgba(224,153,0,.28); animation: macSpin 22s linear infinite reverse }
.ab-ring.r3 { width: 148px; height: 148px; border-color: rgba(var(--shadow-rgb), .5) }

.ab-mac {
	width: 120px; height: 120px;
	background: var(--mac) center/contain no-repeat;
	filter: drop-shadow(0 8px 20px rgba(120,80,30,.28));
	--r: -12deg;
	animation: macFloat 6s ease-in-out infinite;
}

.ab-chip {
	position: absolute;
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .5rem .9rem;
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .2);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-warm);
	font-family: var(--f-head);
	font-size: var(--t-xs);
	color: var(--c-ink);
	white-space: nowrap;
}
.ab-chip svg { color: var(--c-amber-dark) }
.ab-chip.c1 { top: 6%;  left: -4%;  animation: macFloat 5.5s ease-in-out infinite }
.ab-chip.c2 { top: 44%; right: -6%; animation: macFloat 6.5s ease-in-out infinite .8s }
.ab-chip.c3 { bottom: 8%; left: 4%; animation: macFloat 7s   ease-in-out infinite 1.6s }
@media (max-width: 520px) { .ab-chip { position: static; margin: .25rem } .ab-visual { gap: var(--s-3) } }

/* ---------- Visi & Misi ---------- */

.ab-vm {
	position: relative; overflow: hidden;
	padding: var(--s-6);
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .18);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-warm);
	transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
.ab-vm:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift) }
.ab-vm::after {
	content: "";
	position: absolute; right: -30px; bottom: -30px;
	width: 150px; height: 150px;
	background: var(--mac) center/contain no-repeat;
	opacity: .07;
	pointer-events: none;
}
.ab-vm__ic {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	margin-bottom: var(--s-4);
	border-radius: var(--r-md);
	background: var(--grad-warm);
	color: #fff;
	box-shadow: 0 8px 20px rgba(224,153,0,.28);
}
.ab-list { list-style: none; padding: 0; margin: 0 }
.ab-list li {
	display: flex; gap: .6rem; align-items: flex-start;
	padding: .55rem 0;
	border-bottom: 1px solid rgba(var(--shadow-rgb), .14);
	font-size: var(--t-sm);
}
.ab-list li:last-child { border-bottom: 0 }
.ab-list svg { flex-shrink: 0; color: var(--c-amber-dark); margin-top: .15em }

/* ---------- Perjalanan ---------- */

.ab-timeline {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
	padding-left: 58px;
}
.ab-timeline::before {
	content: "";
	position: absolute;
	left: 21px; top: 10px; bottom: 10px;
	width: 2px;
	background: linear-gradient(var(--c-caramel), var(--c-amber));
}
.ab-tl { position: relative; margin-bottom: var(--s-6) }
.ab-tl:last-child { margin-bottom: 0 }
.ab-tl__dot {
	position: absolute;
	left: -58px; top: 0;
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--grad-warm);
	color: #fff;
	box-shadow: 0 6px 16px rgba(224,153,0,.32);
	border: 3px solid var(--c-bg);
}
.ab-tl h3 { font-size: var(--t-h4); margin-bottom: var(--s-2) }
.ab-tl p { font-size: var(--t-sm); margin: 0 }

/* ---------- Statistik ---------- */

.ab-stats .stat__label { color: rgba(255,255,255,.72) }
.ab-stats .stats > div { position: relative }
.ab-stats .stats > div::after {
	content: "";
	display: block;
	width: 42px; height: 3px;
	margin: var(--s-3) auto 0;
	border-radius: 2px;
	background: var(--grad-warm);
}

/* ==========================================================================
   23. HALAMAN RESELLER
   ========================================================================== */

.rs-hero { min-height: clamp(520px, 82vh, 780px) }
.rs-hero h1 { font-size: clamp(2.2rem, 6.6vw, 4.4rem) }

.rs-microcopy {
	display: inline-flex; align-items: center; gap: .45rem;
	margin-top: var(--s-5);
	font-size: var(--t-sm);
	color: rgba(255,255,255,.82);
}
.rs-microcopy svg { color: var(--c-amber) }

.rs-proof {
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.16);
}
.rs-proof h3 { color: #fff }
.rs-proof p  { color: rgba(255,255,255,.74) }
.rs-proof svg { color: var(--c-amber) }

/* ---------- Pembalik risiko ---------- */

.rs-risk {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
	padding: var(--s-7) var(--s-6);
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .2);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-warm);
	position: relative;
	overflow: hidden;
}
.rs-risk::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: var(--grad-warm);
}
.rs-risk p { margin-inline: auto }
.rs-strong {
	margin-top: var(--s-4);
	font-family: var(--f-head);
	font-size: var(--t-lg);
	color: var(--c-ink);
}

/* ---------- Formulir ---------- */

.rs-form-grid {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: 1fr 1.05fr;
	align-items: start;
}
@media (max-width: 900px) { .rs-form-grid { grid-template-columns: 1fr } }

.rs-form-copy .eyebrow {
	display: inline-flex; align-items: center; gap: var(--s-2);
	font-family: var(--f-head);
	font-size: var(--t-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-amber-dark);
	margin-bottom: var(--s-2);
}
.rs-assure { margin-top: var(--s-5) }
.rs-assure li { font-size: var(--t-sm) }

.rs-alt {
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid rgba(var(--shadow-rgb), .2);
}
.rs-alt p { font-size: var(--t-sm); color: var(--c-muted); margin-bottom: var(--s-3) }

.rs-form-box {
	position: relative;
	padding: var(--s-6);
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .2);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lift);
}
.rs-form-box::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: var(--grad-warm);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.rs-form-box .wpforms-container { margin: 0 }
.rs-form-box .wpforms-field { padding: 0 0 var(--s-4) }
.rs-form-box .wpforms-submit-container { padding-top: 0 }
.rs-form-box .wpforms-submit { width: 100% }

/* ==========================================================================
   24. SUBMENU / DROPDOWN
   --------------------------------------------------------------------------
   Tema ini semula tidak punya gaya untuk .sub-menu sama sekali, sehingga
   anak menu ("List Toko" di bawah "Cara Pemesanan") ikut tercetak sebaris
   dan menumpuk. Di bawah: dropdown untuk desktop, accordion untuk ponsel.
   ========================================================================== */

.main-nav ul { list-style: none }
.main-nav li { position: relative }

/* Penanda panah pada item yang punya anak. */
.main-nav .menu-item-has-children > a { padding-right: calc(var(--s-3) + 14px) }
.main-nav .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: var(--s-3); top: 50%;
	width: 6px; height: 6px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	transition: transform .25s ease, opacity .25s ease;
}
.main-nav .menu-item-has-children:hover > a::before,
.main-nav .menu-item-has-children:focus-within > a::before { opacity: 1 }

/* ---------- Desktop: dropdown melayang ---------- */

@media (min-width: 981px) {
	.main-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 120;
		min-width: 220px;
		padding: var(--s-2);
		margin: 0;
		display: block;              /* tetap di DOM agar bisa dianimasikan */
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		background: #fff;
		border: 1px solid rgba(var(--shadow-rgb), .18);
		border-radius: var(--r-md);
		box-shadow: var(--shadow-lift);

		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .22s ease, transform .22s cubic-bezier(.22,.8,.3,1), visibility .22s;
	}

	/* Jembatan tak terlihat supaya kursor tidak "jatuh" saat turun. */
	.main-nav .menu-item-has-children::after {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 100%;
		height: 10px;
	}

	.main-nav .menu-item-has-children:hover > .sub-menu,
	.main-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-nav .menu-item-has-children:hover > a::before,
	.main-nav .menu-item-has-children:focus-within > a::before {
		transform: rotate(-135deg);
		margin-top: -1px;
	}

	.main-nav .sub-menu li { margin: 0 }
	.main-nav .sub-menu a {
		display: block;
		padding: var(--s-3);
		font-size: var(--t-sm);
		white-space: normal;
		border-radius: var(--r-sm);
	}
	.main-nav .sub-menu a::after { display: none }
	.main-nav .sub-menu a:hover { background: var(--c-cream) }

	/* Dropdown dekat tepi kanan dibuka ke kiri agar tidak terpotong. */
	.main-nav > ul > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0 }
}

/* ---------- Ponsel: accordion di dalam laci ---------- */

@media (max-width: 980px) {
	.main-nav .sub-menu {
		display: none;
		padding: 0 0 var(--s-3) var(--s-4);
		margin: 0;
		border-left: 2px solid var(--c-cream);
	}
	.main-nav .menu-item-has-children.is-open > .sub-menu { display: block }

	.main-nav .sub-menu li { border-top: 0 !important }
	.main-nav .sub-menu a {
		padding: var(--s-3) var(--s-2);
		font-size: var(--t-sm);
		color: var(--c-body);
	}

	/* Tombol buka/tutup terpisah dari tautan induk, supaya induknya
	   tetap bisa diklik menuju halamannya sendiri. */
	.main-nav .menu-item-has-children > a::before { display: none }
	.main-nav .sub-toggle {
		position: absolute;
		right: 0; top: 0;
		display: grid;
		place-items: center;
		width: 52px; height: 52px;
		padding: 0;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--c-line);
		color: var(--c-ink);
		cursor: pointer;
	}
	.main-nav .sub-toggle svg {
		width: 18px; height: 18px;
		transition: transform .25s ease;
	}
	.main-nav .menu-item-has-children.is-open > .sub-toggle svg { transform: rotate(180deg) }

	/* Sisakan ruang agar teks tidak tertimpa tombol. */
	.main-nav .menu-item-has-children > a { padding-right: 60px }

	/* Laci bisa digulir kalau menunya panjang. */
	.main-nav.is-open {
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ==========================================================================
   25. PERBAIKAN PASCA GO-LIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   25a. Makaroni hilang saat "reduce motion" aktif
   --------------------------------------------------------------------------
   Sebelumnya .hero__orbs disembunyikan total untuk pengguna yang mematikan
   animasi di sistem operasinya. Itu berlebihan: yang mengganggu adalah
   geraknya, bukan gambarnya. Sekarang makaroni tetap tampil, hanya diam.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hero__orbs { display: block !important }
	.hero__orbs span {
		animation: none !important;
		opacity: .55 !important;
		bottom: auto !important;
		top: 12%;
	}
	.hero__orbs span::after { animation: none !important; opacity: .7 }

	/* Sebarkan vertikal supaya tidak menumpuk di satu garis. */
	.hero__orbs span:nth-child(2)  { top: 58% }
	.hero__orbs span:nth-child(3)  { top: 30% }
	.hero__orbs span:nth-child(4)  { top: 72% }
	.hero__orbs span:nth-child(5)  { top: 20% }
	.hero__orbs span:nth-child(6)  { top: 66% }
	.hero__orbs span:nth-child(7)  { top: 42% }
	.hero__orbs span:nth-child(8)  { top: 24% }
	.hero__orbs span:nth-child(9)  { top: 60% }
}

/* Fallback @supports dihapus: minifier CSS membuang pembungkusnya,
   sehingga aturan di dalamnya berlaku tanpa syarat dan menimpa
   background-image makaroni. */

/* --------------------------------------------------------------------------
   25b. Lebar melebihi layar
   --------------------------------------------------------------------------
   Penyebabnya .section--cream::after yang memakai left/right -10% tanpa
   pemotong, sehingga mendorong lebar dokumen ke samping dan memunculkan
   gulir horizontal.
   -------------------------------------------------------------------------- */

.section--cream { overflow: hidden }

/* Pengaman menyeluruh: tidak ada yang boleh membuat halaman
   bergeser ke samping, apa pun penyebabnya. */
html, body { max-width: 100%; overflow-x: hidden }

/* Batasi lebar konten agar nyaman dibaca di laptop.
   1180px terlalu lebar untuk layar 1366px yang umum dipakai. */
:root { --w-wide: 1120px }

@media (min-width: 1400px) {
	:root { --w-wide: 1180px }
}

/* Beri napas kiri-kanan yang lebih lega di layar sedang. */
@media (min-width: 981px) and (max-width: 1399px) {
	.wrap { width: min(100% - 4rem, var(--w-wide)) }
}

/* --------------------------------------------------------------------------
   25c. Item menu tidak sejajar
   --------------------------------------------------------------------------
   "Cara Pemesanan" punya anak menu. Elemen <ul class="sub-menu"> di
   dalamnya ikut menjadi item flex dari <li>, sehingga tautan induknya
   terdorong ke atas. Perbaikannya: jadikan <li> itu flex-column dan
   keluarkan submenu dari alur normal.
   -------------------------------------------------------------------------- */

.main-nav > ul {
	align-items: stretch;
}

.main-nav > ul > li {
	display: flex;
	align-items: center;
}

.main-nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
}

@media (min-width: 981px) {
	/* Submenu benar-benar keluar dari alur, jadi tinggi <li> hanya
	   ditentukan tautannya sendiri. */
	.main-nav > ul > li > .sub-menu { position: absolute; top: 100% }
}

@media (max-width: 980px) {
	/* Di laci, <li> kembali menumpuk vertikal. */
	.main-nav > ul > li { display: block; position: relative }
	.main-nav > ul > li > a { display: block }
}

/* ==========================================================================
   26. HILANGKAN PENANDA PANAH DI MENU INDUK
   --------------------------------------------------------------------------
   Penanda dibuat dari border 2px pada kotak 6px yang diputar 45 derajat.
   Pada ukuran sekecil itu bentuknya terbaca sebagai kotak kecil, bukan
   panah — mengganggu, bukan membantu.

   Di desktop dropdown tetap terbuka saat kursor lewat, jadi penanda ini
   tidak dibutuhkan. Di ponsel tombol panahnya berupa SVG tersendiri dan
   memang berfungsi, jadi itu tetap dipertahankan.
   ========================================================================== */

.main-nav .menu-item-has-children > a::before { content: none !important }

/* Kembalikan ruang kanan yang tadinya disediakan untuk penanda. */
@media (min-width: 981px) {
	.main-nav .menu-item-has-children > a { padding-right: var(--s-3) }
}

/* ==========================================================================
   27. HALAMAN PRODUK
   ========================================================================== */

.pr-hero { min-height: clamp(420px, 62vh, 580px) }
.pr-hero .hero__content { max-width: 720px }
.pr-hero h1 { font-size: clamp(2.2rem, 6.5vw, 4rem) }

/* ---------- Perkenalan dengan makaroni melayang ---------- */

.pr-intro {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--s-6);
	align-items: center;
	max-width: 900px;
	margin-inline: auto;
	padding: var(--s-6);
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .18);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-warm);
}
@media (max-width: 700px) {
	.pr-intro { grid-template-columns: 1fr; text-align: center }
	.pr-intro__mac { margin-inline: auto }
}
.pr-intro .eyebrow {
	display: inline-block;
	font-family: var(--f-head);
	font-size: var(--t-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-amber-dark);
	margin-bottom: var(--s-2);
}
.pr-intro h2 { font-size: var(--t-h3) }
.pr-intro p { margin: 0 }

.pr-intro__mac {
	width: 160px; height: 160px;
	background: var(--mac) center/contain no-repeat;
	filter: drop-shadow(0 10px 24px rgba(120, 80, 30, .26));
	--r: -10deg;
	animation: macFloat 7s ease-in-out infinite;
}

/* ---------- Grid varian ---------- */

.pr-grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.pr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .16);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-warm);
	transition: transform .38s cubic-bezier(.22,.8,.3,1), box-shadow .38s ease;
}
.pr-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift) }

.pr-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: radial-gradient(76% 76% at 50% 38%, var(--c-cream) 0%, #fff 74%);
}
.pr-card__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: var(--s-4);
	transition: transform .5s cubic-bezier(.22,.8,.3,1);
}
.pr-card:hover .pr-card__media img { transform: scale(1.07) rotate(-2deg) }

.pr-card__media::before {
	content: "";
	position: absolute;
	right: -18%; bottom: -18%;
	width: 62%; height: 62%;
	background: var(--mac) center/contain no-repeat;
	opacity: 0;
	transform: rotate(-18deg) scale(.9);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22,.8,.3,1);
	pointer-events: none;
}
.pr-card:hover .pr-card__media::before {
	opacity: .16;
	transform: rotate(6deg) scale(1);
}

.pr-card__no {
	position: absolute;
	top: var(--s-3); left: var(--s-3);
	font-family: var(--f-head);
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--c-caramel);
	opacity: .55;
}

.pr-card__body { padding: var(--s-5); flex: 1 }
.pr-card__body h3 { font-size: var(--t-h4); margin-bottom: var(--s-2) }
.pr-card__body p { font-size: var(--t-sm); margin: 0; color: var(--c-body) }

.pr-card::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 3px; width: 0;
	background: var(--grad-warm);
	transition: width .45s cubic-bezier(.22,.8,.3,1);
}
.pr-card:hover::after { width: 100% }

@media (prefers-reduced-motion: reduce) {
	.pr-intro__mac { animation: none }
	.pr-card, .pr-card__media img, .pr-card__media::before { transition: none }
}

/* ==========================================================================
   28. PERBAIKAN KERAPIAN FOTO PRODUK
   --------------------------------------------------------------------------
   Foto varian tidak seragam: satu berukuran 600x400 (rasio 1,5) sementara
   delapan lainnya persegi, dan sebagian PNG berlatar transparan sedangkan
   sisanya JPG berlatar putih solid.

   Solusinya bukan memaksa crop — itu akan memotong kemasan. Yang dilakukan:
   samakan kotaknya, samakan latarnya jadi putih rata, dan batasi tinggi
   tampil foto supaya semuanya terlihat sebesar satu sama lain.
   ========================================================================== */

.pr-card__media {
	/* Putih rata, bukan gradient — agar tepi JPG berlatar putih tidak
	   terlihat sebagai kotak yang menonjol. */
	background: #fff;
	border-bottom: 1px solid rgba(var(--shadow-rgb), .10);
	padding: var(--s-5);
}

.pr-card__media img {
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	padding: 0;
	object-fit: contain;
	object-position: center;
	margin-inline: auto;
	/* Bayangan halus menyatukan foto berlatar putih dan transparan. */
	filter: drop-shadow(0 6px 14px rgba(120, 80, 30, .12));
}

/* Lingkaran krem lembut di belakang foto — jangkar visual yang membuat
   semua kartu terasa satu keluarga meski rasio fotonya berbeda. */
.pr-card__media::after {
	content: "";
	position: absolute;
	inset: 14%;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle, var(--c-cream) 0%, rgba(255,232,204,.35) 58%, transparent 72%);
	pointer-events: none;
}
.pr-card__media img { position: relative; z-index: 1 }

/* Makaroni samar tetap di lapisan paling belakang. */
.pr-card__media::before { z-index: 0 }

/* Beri sedikit ruang bernapas di atas nama varian. */
.pr-card__body { padding-top: var(--s-4) }

/* Di layar sempit, kartu tidak perlu terlalu tinggi. */
@media (max-width: 480px) {
	.pr-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) }
	.pr-card__media { padding: var(--s-4) }
	.pr-card__body { padding: var(--s-4) }
	.pr-card__body h3 { font-size: var(--t-base) }
	.pr-card__body p { font-size: var(--t-xs) }
}

/* ==========================================================================
   29. PITA BERJALAN DIPAKU DI BAWAH LAYAR
   --------------------------------------------------------------------------
   Sebelumnya pita ini ikut tergulir bersama halaman, sehingga hanya
   terlihat sebentar. Sekarang dipaku di dasar viewport agar poin-poin
   kepercayaan selalu terbaca sepanjang pengunjung menjelajah.

   Tiga hal yang harus ikut disesuaikan supaya tidak menutupi apa pun:
   tinggi pita dijadikan variabel, <body> diberi ruang bawah sebesar itu,
   dan tombol WhatsApp digeser naik.
   ========================================================================== */

:root { --trustbar-h: 46px }

.trust-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	padding-block: 0;
	height: var(--trustbar-h);
	display: flex;
	align-items: center;
	box-shadow: 0 -4px 18px rgba(45, 57, 64, .16);
	/* Sudut atas dibulatkan sedikit agar terasa sebagai lapisan,
	   bukan potongan yang menempel kaku. */
	border-radius: var(--r-md) var(--r-md) 0 0;
}

.trust-bar__track { align-items: center }

.trust-bar ul {
	align-items: center;
	font-size: var(--t-xs);
	letter-spacing: .08em;
}

.trust-bar svg { width: 15px; height: 15px }

/* Ruang di dasar halaman supaya footer tidak tertutup pita. */
body { padding-bottom: var(--trustbar-h) }

/* Tombol WhatsApp naik ke atas pita. */
.wa-float { bottom: calc(var(--trustbar-h) + 1rem) }

/* Jangkar #peta dan sejenisnya jangan berhenti di balik pita. */
html { scroll-padding-bottom: calc(var(--trustbar-h) + var(--s-4)) }

/* Layar pendek: pita dibuat lebih tipis agar tidak memakan ruang baca. */
@media (max-height: 560px) {
	:root { --trustbar-h: 38px }
	.trust-bar ul { font-size: 11px; gap: var(--s-4) }
}

@media (max-width: 640px) {
	:root { --trustbar-h: 42px }
	.trust-bar ul { gap: var(--s-5) }
}

/* Saat dicetak, pita tidak perlu ikut. */
@media print {
	.trust-bar { display: none !important }
	body { padding-bottom: 0 }
}

/* ==========================================================================
   30. PERBAIKAN: TEKS PITA TIDAK TERLIHAT
   --------------------------------------------------------------------------
   Bug dari bagian 29: .trust-bar dijadikan display:flex, sehingga
   .trust-bar__track menjadi flex item. Flex item menyusut secara bawaan
   (flex-shrink: 1), jadi width:max-content miliknya diperas sampai muat
   di lebar layar — dua <ul> di dalamnya ikut tergencet sampai teks hilang.

   Perbaikannya: kembalikan .trust-bar ke block, dan pastikan track serta
   isinya tidak boleh menyusut.
   ========================================================================== */

.trust-bar {
	display: block;
	/* Tinggi dijaga lewat padding + line-height, bukan height tetap,
	   agar isi tidak pernah terpotong. */
	height: auto;
	min-height: var(--trustbar-h);
	padding-block: 0;
}

.trust-bar__track {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	flex-shrink: 0;
	min-height: var(--trustbar-h);
	align-items: center;
}

.trust-bar ul {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	width: max-content;
	align-items: center;
	margin: 0;
	padding: 0 var(--s-4);
	list-style: none;
	white-space: nowrap;
}

.trust-bar li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-shrink: 0;
	margin: 0;
	white-space: nowrap;
	color: #fff;
	line-height: 1;
}

.trust-bar svg { flex-shrink: 0; color: #fff; opacity: .92 }


/* ==========================================================================
   31. HALAMAN LIST TOKO — SUASANA PUSAT PERBELANJAAN MALAM
   --------------------------------------------------------------------------
   Arah desain sengaja berbeda dari halaman lain. Palet indigo pekat dengan
   nyala amber menggantikan karamel-krem, sehingga halaman ini punya
   identitas sendiri tanpa keluar dari merek.

   Seluruh efek murni CSS: papan neon yang menyala berdenyut, lampu jalan
   berkelip, kabel lampu hias, dan ticker nama kota. Nol gambar, nol
   library, nol permintaan HTTP tambahan.
   ========================================================================== */

.tk {
	--tk-ink:    #0d1230;
	--tk-deep:   #141a3d;
	--tk-mid:    #1e2554;
	--tk-neon:   #ffc247;
	--tk-neon-2: #ff8a3d;
	--tk-cyan:   #6ee7f0;
	--tk-line:   rgba(255, 255, 255, .12);
	--tk-text:   rgba(255, 255, 255, .78);
}

/* ---------- Hero ---------- */

.tk-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(4.5rem, 11vw, 8rem) 0 clamp(3.5rem, 7vw, 5.5rem);
	background: var(--tk-ink);
	color: #fff;
	text-align: center;
}

/* Langit malam bergradasi dengan cahaya kota di kaki layar. */
.tk-hero__sky {
	position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(120% 90% at 50% 118%, rgba(255,194,71,.30) 0%, transparent 58%),
		radial-gradient(80% 70% at 12% 4%, rgba(110,231,240,.14) 0%, transparent 60%),
		linear-gradient(180deg, var(--tk-ink) 0%, var(--tk-deep) 52%, var(--tk-mid) 100%);
}

/* Pendar hangat yang bernapas — seperti cahaya etalase dari kejauhan. */
.tk-hero__glow {
	position: absolute;
	left: 50%; bottom: -28%;
	width: min(120%, 1100px); height: 62%;
	transform: translateX(-50%);
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(255,138,61,.34) 0%, transparent 70%);
	filter: blur(14px);
	animation: tkBreathe 7s ease-in-out infinite;
}
@keyframes tkBreathe {
	0%, 100% { opacity: .68; transform: translateX(-50%) scale(1) }
	50%      { opacity: 1;   transform: translateX(-50%) scale(1.08) }
}

/* Lampu jalan yang berkelip acak. */
.tk-lamps { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.tk-lamps span {
	position: absolute;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--tk-neon);
	box-shadow: 0 0 8px 2px rgba(255,194,71,.7);
	animation: tkTwinkle 4s ease-in-out infinite;
}
@keyframes tkTwinkle {
	0%, 100% { opacity: .18; transform: scale(.8) }
	50%      { opacity: .95; transform: scale(1.3) }
}
.tk-lamps span:nth-child(1)  { left:  6%; top: 22%; animation-delay: 0s }
.tk-lamps span:nth-child(2)  { left: 14%; top: 62%; animation-delay: .5s }
.tk-lamps span:nth-child(3)  { left: 22%; top: 34%; animation-delay: 1.1s }
.tk-lamps span:nth-child(4)  { left: 31%; top: 74%; animation-delay: 1.7s }
.tk-lamps span:nth-child(5)  { left: 39%; top: 18%; animation-delay: 2.3s }
.tk-lamps span:nth-child(6)  { left: 47%; top: 68%; animation-delay: 2.9s }
.tk-lamps span:nth-child(7)  { left: 56%; top: 28%; animation-delay: .8s }
.tk-lamps span:nth-child(8)  { left: 64%; top: 78%; animation-delay: 1.4s }
.tk-lamps span:nth-child(9)  { left: 72%; top: 40%; animation-delay: 2s }
.tk-lamps span:nth-child(10) { left: 80%; top: 20%; animation-delay: 2.6s }
.tk-lamps span:nth-child(11) { left: 88%; top: 64%; animation-delay: 3.2s }
.tk-lamps span:nth-child(12) { left: 95%; top: 36%; animation-delay: 3.8s }

.tk-hero__inner { position: relative; z-index: 2 }

.tk-badge {
	display: inline-block;
	padding: .5rem 1.1rem;
	margin-bottom: clamp(1.2rem, 3vw, 2rem);
	font-family: var(--f-head);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tk-neon);
	border: 1px solid rgba(255,194,71,.42);
	border-radius: var(--r-pill);
	background: rgba(255,194,71,.09);
	backdrop-filter: blur(3px);
}
.tk-badge--dark {
	color: var(--c-amber-dark);
	border-color: rgba(224,153,0,.4);
	background: rgba(224,153,0,.09);
}

/* ---------- Papan neon ---------- */

.tk-neon { margin: 0 0 clamp(1.2rem, 3vw, 1.8rem); line-height: 1.05 }

.tk-neon__line {
	display: block;
	font-family: var(--f-head);
	font-size: clamp(1.1rem, 2.6vw, 1.7rem);
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
	margin-bottom: .55rem;
}

/* Nyala neon dibuat dari beberapa lapis text-shadow, bukan gambar. */
.tk-neon__big {
	display: block;
	font-family: var(--f-head);
	font-size: clamp(2.6rem, 9vw, 6rem);
	font-weight: 600;
	letter-spacing: -.01em;
	color: #fff6e2;
	text-shadow:
		0 0 6px  rgba(255,194,71,.95),
		0 0 18px rgba(255,194,71,.75),
		0 0 42px rgba(255,138,61,.55),
		0 0 80px rgba(255,138,61,.35);
	animation: tkFlicker 6s infinite;
}

/* Kelip khas neon: mati sepersekian detik, lalu menyala penuh. */
@keyframes tkFlicker {
	0%, 100%      { opacity: 1 }
	42%, 44%      { opacity: 1 }
	43%           { opacity: .42 }
	43.6%         { opacity: .86 }
	78%           { opacity: .55 }
	78.8%         { opacity: 1 }
}

.tk-hero__lead {
	max-width: 60ch;
	margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
	color: var(--tk-text);
	font-size: clamp(1rem, 1.1vw + .8rem, 1.2rem);
}

/* ---------- Angka ringkas ---------- */

.tk-metrics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.4rem, 5vw, 3.6rem);
}
.tk-metrics div { display: flex; flex-direction: column; align-items: center }
.tk-metrics strong {
	font-family: var(--f-head);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 600;
	color: var(--tk-neon);
	line-height: 1;
	text-shadow: 0 0 16px rgba(255,194,71,.5);
}
.tk-metrics span {
	margin-top: .35rem;
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* ---------- Kabel lampu hias ---------- */

.tk-wire {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 4%;
	z-index: 2;
	border-bottom: 2px solid rgba(255,194,71,.22);
}
.tk-wire i {
	width: 6px; height: 6px;
	margin-bottom: -4px;
	border-radius: 50%;
	background: var(--tk-neon);
	box-shadow: 0 0 10px 2px rgba(255,194,71,.75);
	animation: tkBulb 2.4s ease-in-out infinite;
}
@keyframes tkBulb {
	0%, 100% { opacity: .25 }
	50%      { opacity: 1 }
}
.tk-wire i:nth-child(3n)   { animation-delay: .3s }
.tk-wire i:nth-child(3n+1) { animation-delay: .8s }
.tk-wire i:nth-child(4n)   { animation-delay: 1.3s }
@media (max-width: 640px) { .tk-wire i:nth-child(n+13) { display: none } }

/* ---------- Ticker nama kota ---------- */

.tk-ticker {
	background: var(--tk-mid);
	border-bottom: 1px solid var(--tk-line);
	overflow: hidden;
	--mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
}
.tk-ticker__track {
	display: flex;
	width: max-content;
	flex-shrink: 0;
	animation: scrollX 40s linear infinite;
}
.tk-ticker ul {
	display: flex;
	flex-shrink: 0;
	width: max-content;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	padding: .85rem clamp(.75rem, 2vw, 1.5rem);
	list-style: none;
}
.tk-ticker li {
	flex-shrink: 0;
	margin: 0;
	white-space: nowrap;
	font-family: var(--f-head);
	font-size: var(--t-sm);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}
.tk-ticker li::after { content: " ✦"; color: var(--tk-neon); opacity: .6 }

/* ---------- Badan daftar ---------- */

.tk-body {
	background: linear-gradient(180deg, var(--tk-mid) 0%, var(--tk-deep) 40%, var(--tk-ink) 100%);
	padding-block: clamp(3.5rem, 8vw, 6rem);
	color: var(--tk-text);
}

.tk-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.2rem) }
.tk-head h2 {
	color: #fff;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	margin-bottom: .6rem;
}
.tk-head p { color: var(--tk-text); margin-inline: auto; max-width: 62ch }

.tk-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Kartu kaca gelap dengan tepi yang menyala saat disentuh. */
.tk-card {
	position: relative;
	padding: clamp(1.3rem, 2.6vw, 1.9rem);
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
	border: 1px solid var(--tk-line);
	backdrop-filter: blur(6px);
	overflow: hidden;
	transition: transform .4s cubic-bezier(.22,.8,.3,1), border-color .4s ease, box-shadow .4s ease;
	animation-delay: var(--d, 0ms);
}
.tk-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255,194,71,.5);
	box-shadow: 0 20px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(255,194,71,.18) inset;
}

/* Sapuan cahaya yang melintas saat kursor lewat. */
.tk-card::before {
	content: "";
	position: absolute;
	top: -60%; left: -140%;
	width: 55%; height: 220%;
	background: linear-gradient(90deg, transparent, rgba(255,194,71,.18), transparent);
	transform: rotate(16deg);
	transition: left .75s cubic-bezier(.22,.8,.3,1);
	pointer-events: none;
}
.tk-card:hover::before { left: 160% }

.tk-card__num {
	position: absolute;
	top: 1rem; right: 1.15rem;
	font-family: var(--f-head);
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1;
	color: rgba(255,255,255,.06);
	letter-spacing: -.03em;
}

.tk-card header {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	flex-wrap: wrap;
	padding-bottom: .9rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--tk-line);
}
.tk-card h3 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.1rem, 1.9vw, 1.35rem);
}
.tk-card__count {
	font-family: var(--f-head);
	font-size: var(--t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tk-neon);
	opacity: .85;
}

.tk-card__cat {
	margin: 1rem 0 .55rem;
	font-family: var(--f-head);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}
.tk-card__cat:first-of-type { margin-top: 0 }

/* Nama outlet sebagai chip, bukan daftar bertitik — lebih padat dan rapi. */
.tk-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none }
.tk-chips li {
	margin: 0;
	padding: .34rem .7rem;
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(255,255,255,.8);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.09);
	border-radius: var(--r-pill);
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.tk-chips li:hover {
	background: rgba(255,194,71,.16);
	border-color: rgba(255,194,71,.45);
	color: #fff6e2;
	transform: translateY(-2px);
}

/* ---------- Kerja sama ---------- */

.tk-partner {
	background: var(--c-bg-soft);
	padding-block: clamp(3.5rem, 8vw, 6rem);
	color: var(--c-body);
}
.tk-partner__grid {
	display: grid;
	gap: clamp(1.8rem, 4vw, 3.2rem);
	grid-template-columns: 1fr 1.05fr;
	align-items: start;
}
@media (max-width: 900px) { .tk-partner__grid { grid-template-columns: 1fr } }
.tk-partner h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .7rem }

.tk-perks { list-style: none; padding: 0; margin: 1.5rem 0 0 }
.tk-perks li {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem 0;
	margin: 0;
	font-size: var(--t-sm);
	border-bottom: 1px solid rgba(var(--shadow-rgb), .14);
}
.tk-perks li:last-child { border-bottom: 0 }
.tk-perks svg { flex-shrink: 0; color: var(--c-amber-dark) }

.tk-formbox {
	position: relative;
	padding: clamp(1.4rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid rgba(var(--shadow-rgb), .2);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lift);
}
.tk-formbox::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg, var(--c-amber), var(--tk-neon-2));
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.tk-formbox .wpforms-container { margin: 0 }
.tk-formbox .wpforms-field { padding: 0 0 var(--s-4) }
.tk-formbox .wpforms-submit { width: 100% }

@media (prefers-reduced-motion: reduce) {
	.tk-hero__glow, .tk-lamps span, .tk-neon__big, .tk-wire i, .tk-ticker__track { animation: none !important }
	.tk-neon__big { opacity: 1 }
	.tk-card, .tk-card::before, .tk-chips li { transition: none !important }
}