:root { --kun: #FFD60A; --hit: #111111; --krem: #FFFBEA; --teks: #1A1A1A; --abu: #555; }
* { box-sizing: border-box; margin: 0; }
body { font: 400 17px/1.6 'Figtree', system-ui, sans-serif; background: var(--krem); color: var(--teks); }
h1, h2, h3, .merek { font-family: 'Bricolage Grotesque', Georgia, serif; font-weight: 700; line-height: 1.1; }
.atas { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; max-width: 960px; margin: auto; gap: 12px; }
.merek { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.logo-agency { height: 40px; width: auto; display: block; border-radius: 8px; }
.logo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--hit); flex: none; display: block; }
.logo img { width: 132%; max-width: none; height: auto; margin: -16% 0 0 -16%; display: block; }
.tombol { display: inline-block; background: var(--kun); color: var(--hit); font-weight: 700; padding: 14px 26px; border-radius: 999px; text-decoration: none; border: 2px solid var(--hit); transition: transform .15s; text-align: center; }
.tombol:hover { transform: translateY(-2px); }
.tombol:focus-visible { outline: 3px solid var(--hit); outline-offset: 3px; }
.tombol.kecil { padding: 8px 16px; font-size: .9rem; }
.hero { background: var(--kun); color: var(--hit); padding: 64px 20px 72px; }
.hero > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero .label { font-weight: 700; margin-bottom: 16px; letter-spacing: .02em; }
h1 { font-size: clamp(2.2rem, 8vw, 4rem); margin-bottom: 20px; }
h1 em { font-style: normal; background: var(--hit); color: var(--kun); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .isi { font-size: 1.15rem; margin-bottom: 28px; }
.hero > .tombol { display: table; background: var(--hit); color: var(--kun); margin-left: max(0px, calc((100% - 760px) / 2)); margin-right: 0; }
.hero .kecil-teks { margin-top: 14px; font-size: .9rem; }
.blok { padding: 64px 20px; max-width: 960px; margin: auto; }
.blok.gelap { max-width: none; background: var(--hit); color: var(--krem); }
.dalam { max-width: 960px; margin: auto; }
h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); margin-bottom: 28px; }
.gelap h2 { color: var(--kun); margin-bottom: 12px; }
.pengantar { margin-bottom: 28px; max-width: 620px; }
.kartu-daftar, .langkah { list-style: none; padding: 0; display: grid; gap: 16px; }
.kartu-daftar li, .langkah li { background: #fff; border-left: 6px solid var(--kun); box-shadow: 0 0 0 1px #E8DFB8; padding: 18px 20px; border-radius: 8px; display: grid; gap: 4px; }
.kartu-daftar b, .langkah b { font-family: 'Bricolage Grotesque', serif; font-size: 1.2rem; }
small { font-size: 1rem; color: var(--abu); }
.langkah { counter-reset: n; }
.langkah li { counter-increment: n; }
.langkah b::before { content: counter(n) ". "; }
.paket { display: grid; gap: 16px; }
.kartu { background: var(--krem); color: var(--teks); padding: 24px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.kartu h3 { font-size: 1.5rem; }
.harga { font: 700 1.9rem/1.1 'Bricolage Grotesque', serif; }
.harga span { font: 400 1rem 'Figtree', sans-serif; color: var(--abu); }
.harga3 { font-size: .95rem; background: var(--kun); padding: 6px 10px; border-radius: 8px; }
.kartu ul { padding-left: 1.1em; display: grid; gap: 4px; flex: 1; }
.tanpa { color: var(--abu); font-size: .95rem; }
.kartu .tombol { margin-top: 8px; }
.catatan { margin-top: 20px; color: #D8D2B0; font-size: .95rem; }
.penutup { background: var(--kun); color: var(--hit); text-align: center; padding: 72px 20px; }
.penutup p { margin: 0 auto 28px; max-width: 480px; }
.penutup .tombol { background: var(--hit); color: var(--kun); }
footer { text-align: center; padding: 24px 20px; font-size: .85rem; color: var(--abu); }
@media (min-width: 720px) { .paket { grid-template-columns: repeat(3, 1fr); } .kartu-daftar, .langkah { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tombol { transition: none; } }