:root {
  --malam: #3B2A20;
  --malam-dalam: #2A1D16;
  --bata: #B5412D;
  --terang: #F4EEE9;
  --teks: #2A1D16;
  --teks-terang: #F4EEE9;
  --redup: #D9C9BE;
  --garis: #D8C9BF;
  --judul: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --badan: 'Figtree', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--badan);
  font-size: 17px;
  line-height: 1.6;
  color: var(--teks);
  background: var(--terang);
}
h1, h2, h3 { font-family: var(--judul); line-height: 1.1; margin: 0; }
p { margin: 0; }

.bungkus { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.sempit details { max-width: 720px; }

.malam { background: var(--malam); color: var(--teks-terang); position: relative; overflow: hidden; }

/* layar pertama: ruang gelap dengan satu lingkaran cahaya lampu meja */
.lampu {
  position: absolute;
  width: 120vw; max-width: 900px; aspect-ratio: 1;
  right: -35%; top: -30%;
  background: radial-gradient(circle, rgba(255, 196, 120, .42) 0%, rgba(255, 196, 120, .14) 38%, rgba(255, 196, 120, 0) 66%);
  animation: nyala 1.6s ease-out both;
  pointer-events: none;
}
@keyframes nyala { from { opacity: 0; } to { opacity: 1; } }

.hero { position: relative; padding-top: 28px; padding-bottom: 64px; }
.nama { font-family: var(--judul); font-weight: 600; font-size: 18px; letter-spacing: .01em; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(2.6rem, 11.5vw, 6.2rem);
  letter-spacing: -.025em;
  margin-top: 72px;
}
.pembuka { max-width: 34em; margin-top: 24px; font-size: 1.1rem; color: var(--redup); }
.jam { margin-top: 16px; font-size: .95rem; color: var(--redup); }
.jam strong { color: var(--teks-terang); font-weight: 600; }

.tombol {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  margin-top: 32px;
  background: var(--bata); color: #fff;
  border: 2px solid #F0C9BB; border-radius: 999px;
  font-family: var(--badan); font-weight: 600; font-size: 1.05rem;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.tombol:hover { background: #9C3524; transform: translateY(-2px); }
.tombol:focus-visible, summary:focus-visible { outline: 3px solid #FFC478; outline-offset: 3px; }

section { padding: 72px 0; }
h2 { font-weight: 800; font-size: clamp(1.8rem, 6vw, 2.8rem); letter-spacing: -.02em; max-width: 14em; }

/* cara beli: urutan beneran, jadi diberi nomor */
.langkah { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px; counter-reset: l; }
.langkah li { counter-increment: l; padding-left: 64px; position: relative; max-width: 30em; }
.langkah li::before {
  content: counter(l);
  position: absolute; left: 0; top: -4px;
  font-family: var(--judul); font-weight: 800; font-size: 3rem; line-height: 1;
  color: var(--bata);
}
.langkah h3 { font-weight: 800; font-size: 1.35rem; }
.langkah p { margin-top: 6px; }

.daftar { margin: 40px 0 0; display: grid; gap: 0; }
.daftar div { padding: 20px 0; border-top: 1px solid rgba(244, 238, 233, .22); }
.daftar dt { font-family: var(--judul); font-weight: 800; font-size: 1.35rem; }
.daftar dd { margin: 6px 0 0; color: var(--redup); max-width: 34em; }

.tanya h2 { margin-bottom: 28px; max-width: 18em; }
details { border-top: 1px solid var(--garis); }
details:last-of-type { border-bottom: 1px solid var(--garis); }
summary {
  cursor: pointer; list-style: none;
  min-height: 56px; padding: 16px 40px 16px 0;
  font-weight: 600; position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--bata); transition: transform .2s;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding: 0 0 18px; max-width: 36em; }

.tutup { background: var(--malam-dalam); }
.tutup p { margin-top: 14px; color: var(--redup); }

.kaki { background: var(--malam-dalam); color: var(--redup); padding: 24px 0 32px; font-size: .9rem; border-top: 1px solid rgba(244, 238, 233, .12); }
.kaki .bungkus { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

@media (min-width: 860px) {
  body { font-size: 18px; }
  .hero { padding-top: 40px; padding-bottom: 110px; }
  .hero h1 { margin-top: 120px; }
  .langkah { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .langkah li { padding-left: 0; padding-top: 64px; }
  .langkah li::before { font-size: 4.5rem; top: -8px; }
  .daftar { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .daftar div { border-top: 1px solid rgba(244, 238, 233, .22); }
  section { padding: 104px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lampu { animation: none; }
  .tombol, summary::after { transition: none; }
}