/* Font disimpan lokal di /fonts (variable font: satu file mencakup semua ketebalan) */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/lora-italic-latin.woff2') format('woff2');
}

/* Palet mengikuti shukosudgama.my.id */
:root {
	--green: #1b7a3e;
	--green-dark: #145c2e;
	--green-mid: #239651;
	--green-light: #eaf6ee;
	--green-pale: #f4fbf6;
	--red: #c0392b;
	--text: #1a1f1c;
	--text-mid: #3d4840;
	--text-muted: #6b7570;
	--border: #dde8e1;
	--white: #ffffff;
	--font-main: 'Plus Jakarta Sans', sans-serif;
	--font-serif: 'Lora', serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-main); color: var(--text); background: #fafaf8; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.topbar { background: var(--green); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--white); }
/* Logo berlatar putih diberi bingkai putih agar tetap terbaca di atas hijau */
.brand-logo { height: 36px; width: auto; padding: 3px 5px; background: var(--white); border-radius: 6px; }
.topbar-link { font-size: 14px; font-weight: 500; color: var(--green-light); }
.topbar-link:hover { color: var(--white); }

.hero { padding: 96px 0 72px; }
.hero h1 { margin: 0; font-size: clamp(32px, 5vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.lead { max-width: 520px; margin: 14px 0 32px; font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.btn { display: inline-block; padding: 11px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); }
.btn-link { font-size: 15px; font-weight: 600; color: var(--green); }
.btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.services { padding-bottom: 96px; }
.section-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #ecece8; }
.service-list li { display: grid; grid-template-columns: 220px 1fr; align-items: baseline; gap: 24px; padding: 20px 0; border-bottom: 1px solid #ecece8; }
.service-list h3 { margin: 0; font-size: 16px; font-weight: 600; }
.service-list p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

.footer { padding: 28px 0; border-top: 1px solid #ecece8; font-size: 13px; color: var(--text-muted); }

@media (max-width: 640px) {
	.hero { padding: 64px 0 48px; }
	.service-list li { grid-template-columns: 1fr; gap: 4px; }
}