/*!
 * Prime Competition — landing page publik.
 *
 * Bahasa visualnya mengikuti zavapos.com: hero gelap dengan judul besar
 * yang satu katanya beraksen merah, mockup layar HP mengambang dengan
 * kartu-kartu kecil, ikon samar melayang di latar, dan isi yang muncul
 * bertahap saat digulir. Semua gerak dikerjakan CSS; JavaScript hanya
 * memasang kelas .is-in saat elemen masuk layar (landing.js).
 *
 * Semua animasi mati di bawah prefers-reduced-motion — gerak itu hiasan,
 * bukan informasi, jadi tidak ada yang hilang saat dimatikan.
 */

/* --- Bilah navigasi ------------------------------------------------------- */
.lp-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	padding-block: var(--sp-3);
	background: rgba(26, 26, 26, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp-nav.is-scrolled { border-bottom-color: var(--ink-800); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }

/*
 * flex: none wajib di sini. Logo SVG tidak punya lebar intrinsik dalam
 * piksel, jadi sebagai flex item yang boleh menyusut ia runtuh ke lebar 0
 * dan logonya hilang sama sekali — bukan sekadar mengecil.
 */
.lp-nav__brand { display: flex; align-items: center; flex: none; min-height: var(--tap); }
.lp-nav__brand img { height: 36px; width: auto; max-width: 220px; }
.lp-nav__brand span { color: #FFFFFF; font-weight: 700; font-size: 1.0625rem; }
.lp-nav__brand:hover { text-decoration: none; }

.lp-nav__links { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.lp-nav__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-inline: var(--sp-3);
	color: var(--ink-300);
	font-weight: 500;
	border-radius: var(--r-md);
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lp-nav__links a:hover { color: #FFFFFF; background: var(--ink-800); text-decoration: none; }
.lp-nav__links a.btn { color: #FFFFFF; margin-left: var(--sp-2); }
.lp-nav__links a.btn:hover { background: var(--brand-700); }

@media (max-width: 700px) {
	/* Di layar sempit, tautan bagian disembunyikan dan hanya tombol
	   portal siswa yang bertahan — daftar tautan yang membungkus dua baris
	   menghabiskan setengah layar sebelum isi apa pun terlihat. */
	.lp-nav__links a:not(.btn) { display: none; }
}

/* --- Hero ------------------------------------------------------------------ */
.lp-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--sp-7), 8vw, 6rem);
	background:
		radial-gradient(900px 520px at 78% 12%, rgba(184, 30, 51, 0.32), transparent 62%),
		radial-gradient(600px 400px at 6% 90%, rgba(184, 30, 51, 0.16), transparent 60%),
		var(--ink-900);
}

/* Kisi halus, seperti kertas ujian. Sangat tipis supaya tidak bersaing
   dengan teks. */
.lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
	pointer-events: none;
}

/* Ikon samar yang melayang pelan di latar — trofi, buku, medali. */
.lp-float {
	position: absolute;
	color: rgba(244, 124, 140, 0.16);
	font-size: var(--fs, 2.5rem);
	pointer-events: none;
	animation: lpDrift var(--spd, 18s) ease-in-out infinite;
	animation-delay: var(--dl, 0s);
	z-index: 0;
}
@keyframes lpDrift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
	50%      { transform: translate3d(0, -22px, 0) rotate(5deg); }
}

.lp-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--sp-7);
	align-items: center;
}

.lp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px var(--sp-3) 6px 6px;
	margin-bottom: var(--sp-5);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--ink-200);
	font: var(--text-label);
	font-weight: 600;
}
.lp-hero__eyebrow b {
	padding: 3px var(--sp-2);
	border-radius: var(--r-pill);
	background: var(--brand-600);
	color: #FFFFFF;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lp-hero__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(2.25rem, 5.6vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #FFFFFF;
	max-width: 15ch;
	text-wrap: balance;
}
/* Kata beraksen. brand-300, bukan brand-600: di atas ink-900 kontrasnya
   6,72 (AA), sementara brand-600 hanya 2,71. */
.lp-hero__title em {
	font-style: normal;
	color: var(--brand-300);
	background: linear-gradient(90deg, var(--brand-300), #FF9AA8);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lp-hero__lead {
	margin-top: var(--sp-5);
	max-width: 50ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-300);
}

.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.lp-hero__cta .btn--hero {
	width: auto;
	padding-inline: var(--sp-6);
	box-shadow: 0 10px 30px rgba(184, 30, 51, 0.35);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp-hero__cta .btn--hero:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(184, 30, 51, 0.45); }
.lp-hero__cta .btn--ghost-dark {
	min-height: 52px;
	padding-inline: var(--sp-5);
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--r-md);
	font-weight: 600;
}
.lp-hero__cta .btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; text-decoration: none; }

.lp-hero__facts {
	display: flex;
	gap: var(--sp-6);
	flex-wrap: wrap;
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-fact__value {
	display: block;
	font-weight: 700;
	font-size: 1.375rem;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.lp-fact__label { display: block; margin-top: 2px; font: var(--text-label); color: var(--ink-400); }

/* Urutan kemunculan hero: badge → judul → kalimat → tombol → fakta. */
.lp-hero__text > * { animation: lpRise 700ms var(--ease) both; }
.lp-hero__text > :nth-child(1) { animation-delay: 60ms; }
.lp-hero__text > :nth-child(2) { animation-delay: 160ms; }
.lp-hero__text > :nth-child(3) { animation-delay: 260ms; }
.lp-hero__text > :nth-child(4) { animation-delay: 360ms; }
.lp-hero__text > :nth-child(5) { animation-delay: 460ms; }
@keyframes lpRise {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

/* --- Mockup layar ujian ---------------------------------------------------- */
.lp-mock { position: relative; justify-self: center; width: min(100%, 340px); animation: lpRise 800ms var(--ease) 300ms both; }

.lp-phone {
	position: relative;
	margin-inline: auto;
	width: 270px;
	aspect-ratio: 9 / 18.6;
	padding: 10px;
	background: #0E0E0E;
	border-radius: 40px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		0 40px 80px rgba(0, 0, 0, 0.55),
		0 0 90px rgba(184, 30, 51, 0.18);
	animation: lpHover 6s ease-in-out infinite;
}
@keyframes lpHover {
	0%, 100% { transform: translateY(0) rotate(-1.2deg); }
	50%      { transform: translateY(-12px) rotate(-0.4deg); }
}
.lp-phone::before {   /* poni kamera */
	content: "";
	position: absolute;
	top: 14px; left: 50%;
	width: 88px; height: 22px;
	transform: translateX(-50%);
	background: #0E0E0E;
	border-radius: var(--r-pill);
	z-index: 3;
}
.lp-screen {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 31px;
	background: var(--ink-50);
	color: var(--ink-900);
	display: flex;
	flex-direction: column;
	font-size: 11px;
}

.lp-screen__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 34px 14px 10px;
	background: var(--ink-900);
	color: #FFFFFF;
}
.lp-screen__timer { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.lp-screen__sync { font-size: 9px; color: #4ADE80; font-weight: 600; }

.lp-screen__body { padding: 12px 12px 0; }
.lp-screen__q { padding: 12px; background: #FFFFFF; border-radius: 12px; box-shadow: var(--shadow-sm); }
.lp-screen__no { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-500); }
.lp-screen__text { margin-top: 6px; font-size: 12px; line-height: 1.45; font-weight: 500; }

.lp-screen__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 9px 10px;
	background: #FFFFFF;
	border: 1.5px solid var(--ink-200);
	border-radius: 10px;
	font-size: 11px;
}
.lp-screen__opt b {
	display: grid; place-items: center;
	width: 20px; height: 20px;
	border: 1.5px solid var(--ink-300);
	border-radius: 50%;
	font-size: 9px;
	color: var(--ink-600);
}
.lp-screen__opt.is-on { border-color: var(--brand-600); background: var(--brand-50); font-weight: 600; }
.lp-screen__opt.is-on b { background: var(--brand-600); border-color: var(--brand-600); color: #FFFFFF; }
/* Pilihan “diketuk” berulang, meniru jari peserta. */
.lp-screen__opt:nth-child(3) { animation: lpTap 5s ease-in-out infinite; }
@keyframes lpTap {
	0%, 30%, 100% { border-color: var(--ink-200); background: #FFFFFF; }
	40%, 90%      { border-color: var(--brand-600); background: var(--brand-50); }
}

.lp-screen__nav {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 6px;
	padding: 10px 12px 14px;
	background: #FFFFFF;
	border-top: 1px solid var(--ink-200);
}
.lp-screen__nav span {
	display: grid; place-items: center;
	min-height: 30px;
	border-radius: 8px;
	font-size: 10px; font-weight: 600;
	border: 1px solid var(--ink-200);
	color: var(--ink-600);
}
.lp-screen__nav span:last-child { background: var(--brand-gradient); color: #FFFFFF; border: 0; }

/* Kartu kecil yang mengambang di sekitar HP. */
.lp-callout {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(33, 33, 33, 0.92);
	border: 1px solid var(--ink-700);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	color: #FFFFFF;
	font-size: 12px;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	animation: lpFloatY var(--spd, 5s) ease-in-out infinite;
	animation-delay: var(--dl, 0s);
	z-index: 2;
}
.lp-callout i {
	display: grid; place-items: center;
	width: 30px; height: 30px; flex: none;
	border-radius: 9px;
	background: rgba(244, 124, 140, 0.18);
	color: var(--brand-300);
	font-size: 13px;
}
.lp-callout small { display: block; color: var(--ink-400); font-size: 10px; margin-top: 1px; }
.lp-callout b { display: block; font-weight: 600; }
.lp-callout--tl { top: 6%;  left: -14%; }
.lp-callout--r  { top: 46%; right: -18%; }
.lp-callout--bl { bottom: 8%; left: -8%; }
@keyframes lpFloatY {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

@media (max-width: 960px) {
	.lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.lp-hero__title { max-width: none; }
	.lp-mock { margin-top: var(--sp-4); }
	.lp-callout--tl { left: 0; }
	.lp-callout--r  { right: 0; }
	.lp-callout--bl { left: 0; }
}
@media (max-width: 420px) {
	.lp-phone { width: 236px; }
	.lp-callout { font-size: 11px; padding: 8px 11px; }
}

/* --- Pita fakta di bawah hero ------------------------------------------- */
.lp-strip { background: var(--ink-950); border-block: 1px solid var(--ink-800); }
.lp-strip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--sp-4);
	padding-block: var(--sp-5);
}
.lp-strip__item { display: flex; align-items: center; gap: var(--sp-3); color: #FFFFFF; }
.lp-strip__item i {
	display: grid; place-items: center;
	width: 40px; height: 40px; flex: none;
	border-radius: var(--r-md);
	background: rgba(244, 124, 140, 0.14);
	color: var(--brand-300);
}
.lp-strip__item b { display: block; font-size: 1.0625rem; }
.lp-strip__item small { display: block; font: var(--text-label); color: var(--ink-400); }

/* --- Bagian isi ------------------------------------------------------------ */
.lp-section { padding-block: clamp(var(--sp-7), 7vw, 5.5rem); background: var(--surface); }
.lp-section--tint { background: var(--ink-50); }

.lp-section__head { max-width: 640px; margin-bottom: var(--sp-6); }
.lp-kicker {
	display: inline-block;
	margin-bottom: var(--sp-3);
	font: var(--text-label);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-600);
}
.lp-section__title {
	font: var(--text-h1);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.lp-section__lead { margin-top: var(--sp-3); color: var(--ink-600); font-size: 1.0625rem; line-height: 1.65; }

/* --- Keunggulan: tiga kartu besar ----------------------------------------- */
.lp-features { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-feature {
	position: relative;
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lp-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.lp-feature__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	margin-bottom: var(--sp-4);
	border-radius: var(--r-md);
	background: var(--brand-gradient);
	color: #FFFFFF;
	font-size: 1.25rem;
	box-shadow: 0 8px 20px rgba(184, 30, 51, 0.28);
}
.lp-feature__tag { font: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-600); }
.lp-feature h3 { margin-top: var(--sp-2); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.lp-feature p { margin-top: var(--sp-3); color: var(--ink-600); line-height: 1.65; }
.lp-feature__quote {
	margin-top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink-50);
	border-left: 3px solid var(--brand-600);
	border-radius: var(--r-sm);
	font: var(--text-label);
	color: var(--ink-600);
}

/* --- Hadiah ------------------------------------------------------------------ */
.lp-list { display: grid; gap: var(--sp-3); }
.lp-list li { display: flex; gap: var(--sp-3); align-items: flex-start; line-height: 1.6; }
.lp-list li i { margin-top: 4px; flex: none; color: var(--brand-600); }
.lp-prize { border-top: 4px solid var(--brand-600); }
.lp-prize h3 i { color: var(--brand-600); }

/* --- Jadwal ------------------------------------------------------------------- */
.lp-schedule {
	position: relative;
	overflow: hidden;
	border-top: 3px solid var(--brand-600);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp-schedule:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lp-schedule p { margin-top: var(--sp-2); }
.lp-schedule__day {
	position: absolute;
	right: var(--sp-4);
	top: var(--sp-3);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: var(--brand-50);
	letter-spacing: -0.04em;
	pointer-events: none;
}

/* --- Alur: garis waktu ------------------------------------------------------- */
.lp-steps {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	counter-reset: step;
}
.lp-step {
	position: relative;
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lp-step:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.lp-step__num {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--brand-gradient);
	color: #FFFFFF;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(184, 30, 51, 0.28);
}
.lp-step h3 i { color: var(--brand-600); }

.lp-bank { border-left: 4px solid var(--brand-600); }

/* --- Formulir --------------------------------------------------------------- */
.lp-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.lp-fieldset + .lp-fieldset { padding-top: var(--sp-5); border-top: 1px solid var(--ink-200); }
.lp-fieldset legend { padding: 0; margin-bottom: var(--sp-4); }

/* --- Autocomplete sekolah --------------------------------------------------- */
.lp-combo { position: relative; }
.lp-combo__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	z-index: 20;
	max-height: 280px;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--ink-300);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
}
.lp-combo__item {
	display: block;
	width: 100%;
	min-height: var(--tap);
	padding: var(--sp-3);
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ink-100);
	cursor: pointer;
	line-height: 1.4;
}
.lp-combo__item:last-child { border-bottom: 0; }
.lp-combo__item:hover,
.lp-combo__item.is-active { background: var(--brand-50); }
.lp-combo__item strong { display: block; font-weight: 600; }
.lp-combo__item span { font: var(--text-label); color: var(--ink-600); }
.lp-combo__empty { padding: var(--sp-4); color: var(--ink-600); font: var(--text-label); }

/*
 * Baris "Mencari…" diberi titik berputar.
 *
 * Tulisan diam bisa terbaca sebagai hasil — "Mencari…" yang tidak
 * bergerak selama setengah detik tampak seperti daftar berisi satu
 * baris. Titik yang berputar menjawab pertanyaan yang sebenarnya:
 * apakah ini masih berjalan atau sudah berhenti.
 */
.lp-combo__empty.is-busy { display: flex; align-items: center; gap: var(--sp-3); }
.lp-combo__empty.is-busy::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border: 2px solid var(--ink-300);
	border-top-color: var(--brand-600, var(--ink-700));
	border-radius: 50%;
	animation: lp-spin 0.7s linear infinite;
}

@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Yang menyetel sistemnya untuk mengurangi gerak tidak diberi putaran;
   tulisannya sendiri sudah menyampaikan isinya. */
@media (prefers-reduced-motion: reduce) {
	.lp-combo__empty.is-busy::before { animation: none; }
}

/* --- Pilihan kategori lomba --------------------------------------------------
   Centang, bukan satu pilihan: satu siswa boleh mengambil beberapa
   kategori sekaligus tanpa mengisi formulirnya berkali-kali. Tiap baris
   setinggi target sentuh penuh — formulir ini paling sering dibuka di HP,
   sambil berdiri. */
.lp-picks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-2);
	margin-top: var(--sp-2);
}

.lp-pick label {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	min-height: var(--tap);
	padding: var(--sp-3);
	background: var(--surface);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	cursor: pointer;
	line-height: 1.4;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lp-pick label:hover { border-color: var(--brand-600); }
.lp-pick input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.lp-pick strong { display: block; font-weight: 600; }
.lp-pick__sub { display: block; font: var(--text-label); color: var(--ink-600); }

/* Kuota penuh atau sudah diambil NISN ini. Tetap terlihat, tidak
   dihilangkan: kategori yang hilang diam-diam membuat pendaftar mengira
   formulirnya rusak. */
.lp-pick.is-off label {
	background: var(--ink-50);
	cursor: not-allowed;
	opacity: 0.6;
}
.lp-pick.is-off label:hover { border-color: var(--ink-200); }

.lp-picks__empty {
	margin-top: var(--sp-3);
	padding: var(--sp-4);
	background: var(--ink-50);
	border-radius: var(--r-md);
	color: var(--ink-600);
	font: var(--text-label);
	text-align: center;
}

/* Ajakan utama di halaman "formulir terkirim". Dipisahkan dari isi kartu
   dengan garis supaya terbaca sebagai langkah berikutnya, bukan sebagai
   catatan kaki. */
.lp-done__cta {
	margin-top: var(--sp-5);
	padding-top: var(--sp-5);
	border-top: 1px dashed var(--ink-200);
}

/* Muncul hanya saat batas kategori per siswa tersentuh. Warnanya kuning,
   bukan merah: ini keterangan, bukan kesalahan pendaftar. */
.lp-picks__limit {
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	background: var(--warn-soft);
	border-left: 3px solid var(--warn);
	border-radius: var(--r-sm);
	font: var(--text-label);
	line-height: 1.5;
}

.lp-picks__total {
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	background: var(--brand-50);
	border-left: 3px solid var(--brand-600);
	border-radius: var(--r-sm);
	font-weight: 600;
}

/* --- FAQ -------------------------------------------------------------------- */
.lp-faq {
	background: var(--surface);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease);
}
.lp-faq:hover { border-color: var(--ink-300); }
.lp-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--tap);
	padding: var(--sp-4);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary i { flex: none; color: var(--brand-600); transition: transform var(--dur) var(--ease); }
.lp-faq[open] summary i { transform: rotate(180deg); }
.lp-faq[open] summary { border-bottom: 1px solid var(--ink-200); }
.lp-faq__body { padding: var(--sp-4); color: var(--ink-600); line-height: 1.7; }

/* --- Pita ajakan sebelum footer ---------------------------------------------- */
.lp-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--sp-7);
	background: var(--brand-gradient);
	color: #FFFFFF;
	text-align: center;
}
.lp-cta::after {
	content: "";
	position: absolute;
	inset: auto -10% -60% auto;
	width: 520px; height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 66%);
	pointer-events: none;
}
.lp-cta__title { position: relative; font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.lp-cta p { position: relative; margin-top: var(--sp-3); color: rgba(255, 255, 255, 0.86); }
.lp-cta .btn { position: relative; margin-top: var(--sp-5); background: #FFFFFF; color: var(--brand-700); font-weight: 700; }
.lp-cta .btn:hover { background: var(--brand-50); color: var(--brand-800); }

/* --- Footer ------------------------------------------------------------------ */
.lp-footer { padding-block: var(--sp-7) var(--sp-6); background: var(--ink-950); }
.lp-footer a { color: var(--brand-300); }
.lp-footer li { display: flex; align-items: center; gap: var(--sp-2); line-height: 1.8; }
.lp-footer li i { color: var(--brand-300); width: 16px; text-align: center; }
.lp-footer__legal {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--ink-800);
	font: var(--text-label);
	color: var(--ink-400);
}

/* --- Kemunculan saat digulir -------------------------------------------------- */
/*
 * Elemen ber-data-reveal dimulai transparan dan sedikit di bawah, lalu
 * naik saat masuk layar (kelas .is-in dipasang landing.js). Tanpa
 * JavaScript, kelas .no-js di <html> tidak pernah dicabut dan semuanya
 * langsung terlihat — halaman tidak boleh kosong hanya karena skripnya
 * gagal dimuat di jaringan lokasi yang buruk.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 600ms var(--ease), transform 600ms var(--ease);
	transition-delay: var(--rd, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --- Halaman konfirmasi ------------------------------------------------------ */
.lp-done { padding-block: var(--sp-7); background: var(--ink-50); min-height: 100dvh; }
.lp-done__badge {
	display: grid;
	place-items: center;
	width: 72px; height: 72px;
	margin: 0 auto var(--sp-5);
	border-radius: 50%;
	background: var(--ok-soft);
	color: var(--ok);
	font-size: 2rem;
}
.lp-regno {
	display: block;
	padding: var(--sp-4);
	margin-block: var(--sp-4);
	background: var(--ink-900);
	color: #FFFFFF;
	border-radius: var(--r-md);
	text-align: center;
	font-weight: 700;
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

@media (max-width: 560px) {
	.lp-section { padding-block: var(--sp-6); }
}

/* --- Tanpa gerak ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lp-float, .lp-phone, .lp-callout, .lp-screen__opt:nth-child(3),
	.lp-hero__text > *, .lp-mock { animation: none !important; }
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.lp-feature, .lp-schedule, .lp-step, .lp-hero__cta .btn--hero { transition: none; }
}