/* ==========================================================================
   Override tampilan landing — palet gaya Alfamart (merah + kuning)
   Dipasang setelah CSS build; selector diprefiks "html" + kelas scope svelte
   agar menang cascade (CSS landing di-load dinamis SETELAH file ini).
   ========================================================================== */

/* 1. Palet brand global (dipakai tombol, nav aktif, logo, CTA) ------------ */
:root {
	--brand: #e4002b;        /* merah Alfamart */
	--brand-teal: #b3001b;   /* merah gelap (hover/aksen teks — tetap terbaca) */
	--brand-soft: #fdeaea;   /* merah muda untuk state aktif */
	--accent: #e4002b;
}

/* 2. Hero journey (sebelumnya teal gelap #123b3b) ------------------------ */
html .media-frame.svelte-1b8dde8 {
	background: #52000c;
}
html .shade.svelte-1b8dde8 {
	background:
		linear-gradient(90deg, #2b0006ea 0%, #2b0006b0 35%, #2b000622 70%, #2b000610),
		linear-gradient(#2b000655, #0000 32%, #2b000666);
}
html .caption.svelte-1b8dde8 .eyebrow {
	color: #ffe9b0;
}
/* CTA hero: tombol kuning Alfamart dengan teks merah gelap */
html .primary-action.svelte-1b8dde8 {
	color: #8f0018;
	background: #ffd200;
}
html .primary-action.svelte-1b8dde8:hover {
	background: #ffe566;
}
html .hero-pillars.svelte-1b8dde8 {
	color: #ffe3d9;
}
html .hero-pillars.svelte-1b8dde8 span:where(.svelte-1b8dde8):before {
	background: #ffd200;
}

/* 3. Landing: intro & solusi --------------------------------------------- */
html .intro.svelte-1uha8ag h2 {
	color: #8a5252; /* merah muda berdebu, menggantikan teal #6b8582 */
}
html .solution-detail.svelte-1uha8ag {
	background: #fdecec; /* menggantikan #edf7f5 */
}
html .steps.svelte-1uha8ag li > span {
	color: #c98a8a; /* menggantikan #88aaa5 */
}

/* 4. Section ekosistem (sebelumnya #006c67) ------------------------------ */
html .ecosystem.svelte-1uha8ag {
	background: #e4002b;
}
html .ecosystem.svelte-1uha8ag .eyebrow {
	color: #ffe08a;
}
html .ecosystem-grid.svelte-1uha8ag a > span:first-child {
	color: #ffd9a8;
}
html .ecosystem-grid.svelte-1uha8ag a:hover .arrow {
	color: #ffd54a;
}

/* 5. Closing CTA & footer (sebelumnya #f3f8f6 / #005b57) ----------------- */
html .closing.svelte-1uha8ag {
	background: #fdf1f1;
}
html .cta.svelte-1uha8ag:hover {
	background: #b3001b;
}
html .landing-footer.svelte-1uha8ag {
	background: #b3001b;
}
html .footer-main.svelte-1uha8ag p span,
html .footer-main.svelte-1uha8ag > a:last-child {
	color: #ffe0e0;
}
html .footer-bottom.svelte-1uha8ag {
	color: #ffd0d0;
}

/* 6. Menu mobile: nav terbuka (#005b57) ---------------------------------- */
html nav.open.svelte-1uha8ag {
	background: #b3001b;
}

/* 7. Mobile (<=700px): gradasi hero ikut merah --------------------------- */
@media (width <= 700px) {
	html .shade.svelte-1b8dde8 {
		background:
			linear-gradient(90deg, #2b0006bd, #2b000677),
			linear-gradient(#2b000666, #0000);
	}
}