/* ==========================================================================
   Mix-D — Design System (storefront publik)
   Sumber aturan visual: design-system.md
   Mobile-first. Semua nilai dasar = mobile, di-override ke breakpoint besar.
   ========================================================================== */

:root {
	/* ---- Brand ---- */
	--brand-500: #F9531E;
	--brand-600: #DC4413;
	--brand-700: #B7360C;
	--brand-100: #FFE3D8;
	--brand-50:  #FFF3EE;

	/* ---- Neutral ---- */
	--neutral-0:   #FFFFFF;
	--neutral-50:  #F8F9FA;
	--neutral-100: #EEF1F4;
	--neutral-200: #E2E6EA;
	--neutral-300: #CBD1D8;
	--neutral-400: #AEB5BE;
	--neutral-500: #8A919E;
	--neutral-600: #5C6470;
	--neutral-900: #14171B;
	--neutral-950: #0A0B0D;

	/* ---- Semantic ---- */
	--success:    #17A34A;
	--success-bg: #E7F6EC;
	--warning:    #B4790A;
	--warning-bg: #FDF3DC;
	--danger:     #D93A2B;
	--danger-bg:  #FDECEA;

	/* ---- Dark surface ---- */
	--dark-bg:          #0A0B0D;
	--dark-surface:     #16191D;
	--dark-border:      rgba(255,255,255,.10);
	--dark-text:        #F2F4F6;
	--dark-text-muted:  rgba(242,244,246,.62);

	/* ---- Type ---- */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	/* ---- Radius ---- */
	--radius-xs:   6px;
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-2xl:  32px;
	--radius-full: 9999px;

	/* ---- Shadows ---- */
	--shadow-xs:     0 1px 2px rgba(16,24,40,.06);
	--shadow-sm:     0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
	--shadow-md:     0 4px 12px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.04);
	--shadow-lg:     0 12px 28px rgba(16,24,40,.10), 0 4px 8px rgba(16,24,40,.05);
	--shadow-xl:     0 28px 60px rgba(16,24,40,.13), 0 8px 16px rgba(16,24,40,.06);
	--shadow-nav:    0 6px 24px rgba(16,24,40,.10), 0 1px 0 rgba(255,255,255,.6) inset;
	--shadow-brand:  0 6px 16px rgba(249,83,30,.28);

	/* ---- Motion ---- */
	--ease-out:   cubic-bezier(.16,1,.3,1);
	--dur-fast:   140ms;
	--dur-base:   200ms;
	--dur-slow:   320ms;

	/* ---- Layout ---- */
	--container-max: 1200px;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Cegah scroll horizontal akibat lebar viewport termasuk scrollbar (vw/100vw) */
html, body {
	overflow-x: clip;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

a {
	-webkit-tap-highlight-color: transparent;
}

/* Tabular numbers untuk harga/angka */
.tnum {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Section header (eyebrow pill + judul + subcopy) — pola DS
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--neutral-950);
	color: #fff;
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: .4rem .8rem;
	border-radius: var(--radius-full);
}

.eyebrow svg {
	width: .8rem;
	height: .8rem;
	flex: none;
}

/* Subcopy di bawah heading: body, neutral-600, max 58ch */
.section-sub {
	max-width: 58ch;
	margin-inline: auto;
	color: var(--neutral-600);
	line-height: 1.6;
}

/* ==========================================================================
   Button
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out,
		color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out,
		transform 100ms ease-out;
}

.btn:active {
	transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.btn:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
}

.btn-sm { height: 2rem;  padding-inline: .875rem; font-size: .75rem; }
.btn-md { height: 2.5rem; padding-inline: 1.25rem; font-size: .8125rem; }
.btn-lg { height: 3rem;  padding-inline: 1.75rem; font-size: .875rem; }

/* Primary — CTA utama (oranye) */
.btn-primary {
	background: var(--brand-500);
	color: #fff;
	box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
	background: var(--brand-600);
	box-shadow: var(--shadow-brand);
}
.btn-primary:active {
	box-shadow: none;
}

/* Dark — CTA netral gelap di atas latar terang */
.btn-dark {
	background: var(--neutral-950);
	color: #fff;
}
.btn-dark:hover { background: #22262B; }
.btn-dark:active { box-shadow: none; }

/* Secondary — aksi sekunder */
.btn-secondary {
	background: #fff;
	color: var(--neutral-900);
	border-color: var(--neutral-200);
}
.btn-secondary:hover { background: var(--neutral-50); }
.btn-secondary:active { box-shadow: none; }

/* WhatsApp — aksen hijau khusus brand WA (keputusan: dipertahankan) */
.btn-wa {
	background: #16a34a;
	color: #fff;
}
.btn-wa:hover { background: #15803d; }
.btn-wa:active { box-shadow: none; }

/* Icon button — tombol bundar */
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--neutral-900);
	border: 1px solid var(--neutral-200);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out,
		box-shadow var(--dur-fast) ease-out, transform 100ms ease-out;
}
.btn-icon:hover {
	background: var(--neutral-50);
	border-color: var(--neutral-300);
}
.btn-icon:active { transform: translateY(1px); }
.btn-icon:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.btn-icon { width: 2.25rem; height: 2.25rem; }
}

/* CTA utama full-width di mobile (max 320px) */
@media (max-width: 767px) {
	.btn-full-sm {
		width: 100%;
		max-width: 20rem;
	}
}

/* ==========================================================================
   Form
   ========================================================================== */

.label {
	display: block;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--neutral-900);
	margin-bottom: .375rem;
}

.input {
	display: block;
	width: 100%;
	background: #fff;
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius-sm);
	padding: .625rem .875rem;
	font-size: 1rem; /* >= 16px di mobile agar iOS tidak zoom */
	line-height: 1.4;
	color: var(--neutral-900);
	transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
}

.input::placeholder { color: var(--neutral-500); }

.input:hover { border-color: var(--neutral-400); }

.input:focus {
	outline: none;
	border-color: var(--brand-500);
	box-shadow: 0 0 0 3px rgba(249,83,30,.16);
}

.input:disabled {
	background: var(--neutral-50);
	color: var(--neutral-500);
	cursor: not-allowed;
}

@media (min-width: 768px) {
	.input { font-size: .9375rem; }
}

.input-inline {
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

.form-error {
	display: block;
	margin-top: .375rem;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--danger);
}

/* Checkbox */
.checkbox {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: var(--radius-xs);
	accent-color: var(--brand-500);
}

/* ==========================================================================
   Card
   ========================================================================== */

/* Light card (default) */
.card {
	background: #fff;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.card-pad {
	padding: 1.25rem; /* 20px mobile */
}
@media (min-width: 768px)  { .card-pad { padding: 1.5rem; } }
@media (min-width: 1024px) { .card-pad { padding: 1.75rem; } }

/* Kartu besar — radius-xl (24px) di desktop, radius-lg (16px) di mobile */
.card-xl {
	border-radius: var(--radius-lg);
}
@media (min-width: 1024px) {
	.card-xl { border-radius: var(--radius-xl); }
}

/* Kartu produk / mocksup */
.card-product {
	background: #fff;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	transition: transform var(--dur-base) ease-out, box-shadow var(--dur-base) ease-out,
		border-color var(--dur-fast) ease-out;
}
.card-product:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	border-color: var(--neutral-300);
}

/* ==========================================================================
   Kartu kategori
   ========================================================================== */

.category-card {
	background: #fff;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-base) ease-out, box-shadow var(--dur-base) ease-out,
		border-color var(--dur-fast) ease-out;
}
.category-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	border-color: var(--neutral-300);
}

/* ==========================================================================
   Navigation — navbar pill
   ========================================================================== */

.nav-pill {
	background: rgba(255,255,255,.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.7);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-nav);
}

.nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: .5rem .75rem;
	border-radius: var(--radius-full);
	font-size: .8125rem;
	font-weight: 500;
	color: var(--neutral-600);
	transition: color var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out;
}
.nav-link:hover { color: var(--neutral-900); background: var(--neutral-50); }
.nav-link:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
}
.nav-link.is-active { color: var(--neutral-900); }
.nav-link.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: .14rem;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: var(--radius-full);
	background: var(--brand-500);
}

/* ==========================================================================
   Mobile menu (full-screen sheet)
   ========================================================================== */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu { transition: none; }
}

.mobile-menu.is-open {
	transform: none;
	visibility: visible;
}

.mnav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0 .25rem;
	border-bottom: 1px solid var(--neutral-200);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--neutral-900);
	transition: color var(--dur-fast) ease-out;
}
.mnav-link:hover { color: var(--brand-600); }
.mnav-link.is-active { color: var(--brand-600); }
.mnav-link:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
}

body.no-scroll {
	overflow: hidden;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
	margin-top: 2rem;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .625rem;
	border-radius: var(--radius-sm);
	background: #fff;
	border: 1px solid var(--neutral-200);
	color: var(--neutral-600);
	font-size: .875rem;
	font-weight: 500;
	transition: background-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out,
		border-color var(--dur-fast) ease-out;
}

.pagination a:hover {
	background: var(--neutral-50);
	border-color: var(--neutral-300);
	color: var(--neutral-900);
}

.pagination .pagination-current {
	background: var(--neutral-950);
	border-color: var(--neutral-950);
	color: #fff;
}

.pagination li.disabled a {
	opacity: .45;
	pointer-events: none;
}

/* ==========================================================================
   Scroll-to-top
   ========================================================================== */

.wa-fab {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-full);
	background: #16a34a;
	color: #fff;
	box-shadow: 0 8px 20px rgba(22,163,74,.35);
	transition: transform 100ms ease-out, background-color var(--dur-fast) ease-out;
}
.wa-fab:hover { background: #15803d; transform: translateY(-2px); }
.wa-fab:active { transform: translateY(0); }
.wa-fab:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

@media (min-width: 768px) {
	.wa-fab { width: 3.5rem; height: 3.5rem; }
}

.scroll-top {
	position: fixed;
	right: 1rem;
	bottom: 5rem;
	z-index: 150;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--neutral-900);
	border: 1px solid var(--neutral-200);
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) ease-out, visibility var(--dur-base);
}
.scroll-top:hover { background: var(--neutral-50); }
.scroll-top:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.scroll-top.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero reveal (sekali, saat load)
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease-out, transform .5s ease-out;
}
.reveal.is-loaded {
	opacity: 1;
	transform: none;
}

/* Hero full-bleed di desktop: selebar & setinggi viewport, di belakang navbar */
@media (min-width: 1024px) {
	.hero-fullscreen {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-top: -6.5rem;
		border-radius: 0;
	}
}

/* ==========================================================================
   Hero slider (Swiper)
   ========================================================================== */

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
	height: 100%;
}

.hero-swiper .hero-nav {
	position: absolute;
	top: 50%;
	left: auto;
	right: auto;
	margin-top: 0;
	transform: translateY(-50%);
	z-index: 10;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	background: transparent;
	color: #fff;
	mix-blend-mode: difference;
	cursor: pointer;
	transition: transform 100ms ease-out;
}
.hero-swiper .hero-nav:hover { transform: translateY(-50%) scale(1.15); }
.hero-swiper .hero-nav:active { transform: translateY(-50%) scale(.9); }
.hero-swiper .hero-nav:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
}
.hero-swiper .hero-nav::after { display: none; }
.hero-swiper .hero-nav-prev { left: .375rem; }
.hero-swiper .hero-nav-next { right: .375rem; }

@media (min-width: 768px) {
	.hero-swiper .hero-nav { width: 2.25rem; height: 2.25rem; }
	.hero-swiper .hero-nav-prev { left: .75rem; }
	.hero-swiper .hero-nav-next { right: .75rem; }
}

.hero-swiper .hero-pagination {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
}
.hero-swiper .hero-pagination .swiper-pagination-bullet {
	width: .625rem;
	height: .625rem;
	background: rgba(255,255,255,.5);
	opacity: 1;
	transition: background-color var(--dur-fast) ease-out;
}
.hero-swiper .hero-pagination .swiper-pagination-bullet-active { background: #fff; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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