/* Situs YKBI, dasar tampilan sama dengan landing jadimurid: monokrom teduh dengan sentuhan cokelat kayu.
   Warna dan huruf ada di token.css, dipakai bersama dashboard dan aplikasi. */
:root {
  --lebar: 1200px;
  --tepi: 24px;
  --jarak: 80px;
  --tinggi-kepala: 72px;
}

@media (min-width: 768px) {
  :root { --jarak: 128px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--tinggi-kepala);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-isi);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 17px; }
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

h1, h2, h3 {
  color: var(--ink);
  font-family: var(--font-judul);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(48px, 7vw, 92px); line-height: 1.04; }
h1 em { color: var(--brown); font-style: italic; }
h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.1; }
h3 { font-size: 28px; line-height: 1.2; }

a { color: inherit; transition: color var(--transisi); }

:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}

.bagian--gelap :focus-visible,
.kaki :focus-visible { outline-color: var(--brown-light); }

.wadah {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--tepi);
}

.label {
  color: var(--brown);
  font-family: var(--font-isi);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.lewati {
  position: absolute;
  left: var(--tepi);
  top: -100px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
}
.lewati:focus { top: 12px; }

/* Tombol */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-isi);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transisi), border-color var(--transisi), color var(--transisi), transform 0.2s ease;
}
.tombol--utama { background: var(--ink); color: var(--bg); }
.tombol--utama:hover { background: var(--brown); border-color: var(--brown); color: var(--bg); }
.tombol--sekunder { background: transparent; color: var(--ink); }
.tombol--sekunder:hover { background: var(--ink); color: var(--bg); }
.tombol--kecil { padding: 10px 20px; font-size: 15px; }

/* Kepala halaman */
.kepala {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transisi);
}
.kepala--tergulir { border-bottom-color: var(--line); }

.kepala__isi {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tinggi-kepala);
}

.merek {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-judul);
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.merek__salib { color: var(--brown); flex: none; }

.navigasi { display: flex; align-items: center; gap: 8px; }

.navigasi__menu { display: flex; flex-wrap: wrap; }
.navigasi__menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.navigasi__menu a:hover { color: var(--brown); }

.navigasi__pemicu { display: none; }

@media (max-width: 767px) {
  /* Menu lipat hanya bila JavaScript aktif. Tanpa JavaScript menu tetap terbuka. */
  .js .navigasi__pemicu {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .navigasi__pemicu span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--transisi), opacity var(--transisi);
  }
  .navigasi__pemicu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .navigasi__pemicu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navigasi__pemicu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .js .navigasi__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--tepi) 16px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .js .navigasi__menu.terbuka { display: block; }
  .js .navigasi__menu a { padding-inline: 0; font-size: 16px; }
}

@media (min-width: 768px) {
  .navigasi { gap: 12px; }
}

/* Hero */
.hero { padding-block: 24px var(--jarak); }

.hero__isi { display: grid; gap: 24px; }

.hero__utama .label { margin-bottom: 12px; }

.hero__pengantar {
  max-width: 34em;
  font-size: 17px;
}

.hero__bawah {
  display: grid;
  justify-items: start;
  gap: 24px;
}

/* HP sempit: judul sedikit lebih kecil supaya kotak kelima tetap terlihat tanpa menggulir */
@media (max-width: 379px) {
  .hero h1 { font-size: 44px; }
}

/* Kotak kebutuhan: tindakan utama halaman, timbul dan bergerak supaya mengundang diklik.
   Gerak hanya memakai transform dan opacity agar ringan di HP. */
.kebutuhan { scroll-margin-top: 16px; }

h2.kebutuhan__judul {
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Petunjuk tertulis: pengunjung tidak perlu menebak bahwa kotak bisa ditekan dan untuk apa */
.kebutuhan__petunjuk {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--brown);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.kebutuhan__petunjuk svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  animation: tangan-tekan 1.6s ease-in-out infinite;
  animation-play-state: paused;
}
.kebutuhan.bergerak .kebutuhan__petunjuk svg { animation-play-state: running; }

@keyframes tangan-tekan {
  0%, 55%, 100% { transform: none; }
  25% { transform: translateY(3px) scale(0.92); }
}

.kebutuhan__kisi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.kebutuhan__kisi li:last-child { grid-column: 1 / -1; }

.kotak {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 68px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(22, 22, 22, 0.08),
    0 12px 20px -10px rgba(74, 50, 28, 0.45),
    inset 0 -3px 0 var(--cream);
  color: var(--ink);
  font-family: var(--font-isi);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color var(--transisi), color var(--transisi);
  animation: kotak-naik 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15) backwards;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}
/* Bayangan saat terangkat ada di lapisan sendiri: yang berubah hanya opacity, bukan box-shadow */
.kotak::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 28px -12px rgba(74, 50, 28, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.kotak__ikon {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--cream);
  border-radius: 50%;
  color: var(--brown);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color var(--transisi), color var(--transisi);
}
.kotak__ikon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.kotak__awal {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--transisi);
}
.kotak__isi {
  font-family: var(--font-judul);
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.kotak:focus-visible { transform: translateY(-4px); }
.kotak:focus-visible::after { opacity: 1; }

/* HP tidak punya kursor, jadi warna hitam muncul dengan dua cara lain:
   .sorot = kotak bergantian menghitam sendiri, .ditekan dan :active = saat diketuk */
.kotak.sorot {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-5px);
}
.kotak.sorot::after { opacity: 1; }
.kotak.sorot .kotak__ikon { transform: scale(1.12) rotate(-6deg); }
.kotak:active,
.kotak.ditekan {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(2px);
  transition-duration: 0.06s;
}
.kotak:active::after,
.kotak.ditekan::after { opacity: 0; }
.kotak.sorot .kotak__awal,
.kotak:active .kotak__awal,
.kotak.ditekan .kotak__awal { color: var(--on-dark-muted); }
.kotak.sorot .kotak__ikon,
.kotak:active .kotak__ikon,
.kotak.ditekan .kotak__ikon {
  background: var(--brown-light);
  color: var(--ink);
}

/* Hanya untuk perangkat bertetikus: di HP warna hover menempel setelah diketuk */
@media (hover: hover) {
  .kotak:hover {
    background: var(--ink);
    color: var(--bg);
    transform: translateY(-5px);
  }
  .kotak:hover::after { opacity: 1; }
  .kotak:hover .kotak__awal { color: var(--on-dark-muted); }
  .kotak:hover .kotak__ikon {
    background: var(--brown-light);
    color: var(--ink);
    transform: scale(1.12) rotate(-6deg);
  }
  .kotak:active { transform: translateY(2px); }
}

@keyframes kotak-naik {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 379px) {
  .kotak { min-height: 60px; padding: 8px 12px; }
  h2.kebutuhan__judul { font-size: 22px; }
  .kebutuhan__petunjuk { font-size: 14px; }
}

@media (min-width: 600px) {
  .kebutuhan__kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .kebutuhan__kisi li:last-child { grid-column: span 2; }
  .kotak { min-height: 84px; padding: 14px 16px; }
  .kotak__isi { font-size: 24px; }
  .kotak__ikon { top: 10px; right: 10px; width: 32px; height: 32px; }
  .kotak__ikon svg { width: 18px; height: 18px; }
}

/* Kartu dan tombol ikut merespons, seperlunya */
@media (hover: hover) {
  .kartu:hover { transform: translateY(-4px); }
  .kartu:hover::after { opacity: 1; }
  .tombol:hover { transform: translateY(-2px); }
  .tombol:active { transform: translateY(1px); }
}

.kutipan {
  padding-left: 24px;
  border-left: 2px solid var(--brown-soft);
}
.kutipan blockquote {
  color: var(--ink);
  font-family: var(--font-judul);
  font-size: 24px;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.kutipan figcaption { margin-top: 12px; }

@media (min-width: 768px) {
  .hero { padding-top: 48px; }
  .hero__pengantar { font-size: 18px; }
  .hero__bawah {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
  .hero__bawah .tombol { flex: none; }
}

@media (min-width: 1000px) {
  .hero__isi {
    /* Kolom kutipan cukup sempit supaya baris pertama judul tetap satu baris di ukuran terbesar */
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas:
      "utama kutipan"
      "kebutuhan kebutuhan"
      "bawah bawah";
    align-items: end;
    gap: 40px 48px;
  }
  .hero__utama { grid-area: utama; }
  .kutipan { grid-area: kutipan; }
  .kebutuhan { grid-area: kebutuhan; }
  .hero__bawah { grid-area: bawah; }
  .kebutuhan__kisi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kebutuhan__kisi li:last-child { grid-column: auto; }
  .kotak { min-height: 96px; padding: 16px 18px; }
  .kotak__isi { font-size: 26px; }
}

/* Foto lebar */
/* Label untuk gambar buatan AI, supaya tidak terbaca sebagai foto kegiatan asli */
.ilustrasi {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
}
.foto {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--photo-bg);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Wajah ada di bagian atas foto: saat terpotong, wajah dan meja tetap terlihat */
  object-position: center 30%;
}

/* Bagian umum */
.bagian { padding-block: var(--jarak); }

.bagian .label + h2 { margin-top: 20px; }

/* Tentang */
.tentang__kepala { display: grid; gap: 24px; }

.tiga-kolom {
  display: grid;
  gap: 40px;
  margin-top: 64px;
}
.tiga-kolom article {
  padding-top: 24px;
  border-top: 2px solid var(--brown);
}
.nomor {
  color: var(--brown);
  font-family: var(--font-judul);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tiga-kolom h3 { margin-top: 20px; }
.tiga-kolom h3 + p { margin-top: 12px; }

@media (min-width: 768px) {
  .tentang__kepala {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 64px;
  }
  .tiga-kolom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 80px;
  }
}

@media (min-width: 1000px) {
  .tiga-kolom { gap: 48px; }
}

/* Alur perjalanan */
.bagian--gelap {
  background: var(--ink);
  color: var(--on-dark-muted);
}
.bagian--gelap .label { color: var(--brown-light); }
.bagian--gelap h2,
.bagian--gelap h3 { color: var(--on-dark); }

.langkah {
  display: grid;
  gap: 32px;
  margin-top: 56px;
}
.langkah li {
  padding-top: 24px;
  border-top: 1px solid var(--brown-line-dark);
}
.langkah__minggu {
  color: var(--brown-light);
  font-size: 14px;
  font-weight: 600;
}
.langkah h3 { margin-top: 12px; }
.langkah h3 + p { margin-top: 12px; }

@media (min-width: 600px) {
  .langkah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .langkah { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; }
}

/* Kelompok */
.kartu-kartu {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}
.kartu {
  display: flex;
  flex-direction: column;
  padding: 32px;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kartu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 18px 28px -14px rgba(74, 50, 28, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.kartu h3 { font-size: 30px; }
.kartu h3 + p { margin-top: 12px; margin-bottom: 32px; }
.kartu__jadwal {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--brown);
  font-size: 14px;
  font-weight: 500;
}

@media (min-width: 900px) {
  .kartu-kartu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 72px;
  }
}

@media (min-width: 900px) {
  .kartu-kartu--dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ayat */
.ayat {
  padding-block: var(--jarak);
  background: var(--cream);
  border-block: 1px solid var(--cream-line);
  text-align: center;
}
.ayat blockquote {
  max-width: 24em;
  margin-inline: auto;
  color: var(--ink);
  font-family: var(--font-judul);
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.ayat figcaption { margin-top: 24px; }

/* Dialog pendaftaran: di HP memenuhi layar seperti halaman sendiri, di layar lebar kotak di tengah */
.daftar {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  border: 0;
  color: var(--text);
  overscroll-behavior: contain;
}
.daftar::backdrop { background: rgba(22, 22, 22, 0.6); }

/* Mengisi seluruh dialog di HP, supaya ketukan di ruang kosong tidak terbaca sebagai ketukan di luar */
.daftar__isi {
  min-height: 100%;
  padding: 0 var(--tepi) 40px;
}

/* Tombol Kembali menempel di atas, tetap terlihat saat formulir digulir (mis. keyboard HP terbuka) */
.daftar__atas {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: 8px;
  padding-block: 12px;
  background: var(--bg);
}
.daftar__kembali {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 18px 0 10px;
  background: var(--white);
  border: 1px solid var(--input-line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-isi);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transisi), border-color var(--transisi), color var(--transisi);
}
.daftar__kembali svg {
  flex: none;
  transition: transform var(--transisi);
}
.daftar__kembali:active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
@media (hover: hover) {
  .daftar__kembali:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
  }
  .daftar__kembali:hover svg { transform: translateX(-3px); }
}

.daftar h2 {
  margin-top: 12px;
  font-size: clamp(36px, 4.5vw, 44px);
}
/* Fokus awal dialog ada di judul agar dibacakan pembaca layar; bukan elemen yang bisa diisi */
.daftar h2:focus { outline: none; }

.daftar__pengantar { margin-top: 12px; margin-bottom: 32px; }

.formulir { display: grid; gap: 32px; }

@media (min-width: 600px) {
  .daftar {
    width: min(560px, calc(100% - 48px));
    height: fit-content;
    max-height: calc(100% - 48px);
    margin: auto;
    border-radius: 4px;
  }
  .daftar__isi { padding: 12px 40px 40px; }
}

.kolom label {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.kolom input,
.kolom select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--input-line);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-isi);
  font-size: 16px;
  transition: border-color var(--transisi);
  -webkit-appearance: none;
  appearance: none;
}
.kolom input::placeholder { color: var(--muted); opacity: 1; }
.kolom input:hover,
.kolom select:hover { border-bottom-color: var(--ink); }
.kolom [aria-invalid="true"] {
  border-bottom: 2px solid var(--ink);
}

.kolom__pilih { position: relative; }
.kolom__pilih select { padding-right: 28px; cursor: pointer; }
.kolom__pilih select:invalid { color: var(--muted); }
.kolom__pilih::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}

.kolom__bantuan {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.kolom__galat {
  margin-top: 8px;
  color: var(--brown);
  font-size: 14px;
  font-weight: 500;
}

.formulir .tombol { width: 100%; }

.formulir__status { color: var(--muted); font-size: 14px; }
.formulir__status:empty { display: none; }
.formulir__status a { color: var(--brown); }

/* Persetujuan data: wajib dicentang sebelum formulir terkirim */
.setuju {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.setuju input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--brown);
  cursor: pointer;
}

@media (min-width: 600px) {
  .formulir .tombol { width: auto; justify-self: start; }
}

/* Kolom jebakan robot: tidak terlihat. Bukan display:none, karena sebagian robot melewati kolom yang disembunyikan begitu. */
.jebakan {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Kotak terima kasih: dialog yang tadinya memenuhi layar HP mengecil menjadi kotak di tengah */
.daftar--terkirim {
  width: min(440px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100% - 32px);
  margin: auto;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(22, 22, 22, 0.28);
  animation: terkirim-muncul 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.daftar--terkirim .daftar__isi {
  min-height: 0;
  padding: 32px 24px 24px;
}
/* Kelas dialog menyembunyikan formulir dan isinya, kotak terkirim saja yang tampil */
.daftar--terkirim .daftar__isi > :not(.terkirim) { display: none; }

.terkirim {
  display: grid;
  justify-items: center;
  text-align: center;
}
.terkirim[hidden] { display: none; }
.terkirim__tanda {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--brown);
  border-radius: 50%;
  color: var(--white);
  animation: terkirim-tanda 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.1s backwards;
}
.terkirim h2 {
  margin-top: 20px;
  font-size: clamp(28px, 7.4vw, 32px);
  line-height: 1.15;
  text-wrap: balance;
}
.terkirim p { margin-top: 12px; }
.terkirim__berkat {
  color: var(--brown);
  font-family: var(--font-judul);
  font-size: 20px;
  font-style: italic;
}
.terkirim .tombol {
  width: 100%;
  margin-top: 24px;
}

@keyframes terkirim-muncul {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}
@keyframes terkirim-tanda {
  from { opacity: 0; transform: scale(0.5); }
}

@media (min-width: 600px) {
  .daftar--terkirim .daftar__isi { padding: 40px 40px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .daftar--terkirim,
  .terkirim__tanda { animation: none; }
}

/* Kaki halaman */
.kaki {
  padding-block: 40px;
  background: var(--ink);
  color: var(--on-dark-muted);
}
.kaki__isi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
}
.kaki__merek {
  color: var(--on-dark);
  font-family: var(--font-judul);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.kaki__tautan {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.kaki__tautan a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  text-decoration: none;
}
.kaki__tautan a:hover { color: var(--on-dark); text-decoration: underline; }

/* Baris khusus contoh untuk klien: hapus sebelum tayang */
.kaki__contoh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--brown-line-dark);
  font-size: 15px;
}
.kaki__contoh a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brown-light);
}
.kaki__contoh a:hover { color: var(--on-dark); }

/* Fade-in halus saat bagian muncul di layar */
.js .muncul {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .muncul.tampak {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .js .muncul { opacity: 1; transform: none; }
  .kotak,
  .kebutuhan__petunjuk svg { animation: none !important; }
}