/* ==========================================================================
   Kaffah Pro — halaman profil publik (landing).
   Tema terang modern premium: latar gading bersih, hijau zamrud sebagai aksen,
   emas sebagai garis halus dan tombol utama.
   Berkas ini hanya dipakai landing.html, tidak mengubah dashboard pengguna.
   ========================================================================== */

:root {
  --zamrud: #0E6F63;
  --zamrud-tua: #0A4A43;
  --zamrud-lembut: #EDF5F2;
  --emas: #B08A2E;
  --emas-terang: #D9B85F;
  --emas-pucat: #F0E4C4;
  --gading: #FBF9F5;
  --gading-2: #F5F0E6;
  --putih: #FFFFFF;
  --tinta: #1B2321;
  --redup: #5A635F;
  --redup-muda: #8A938E;
  --garis: #E9E2D5;
  --garis-kuat: #DCD3C1;
  --gelap: #16211F;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --arab: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", "Segoe UI", serif;
  --wadah: 1180px;
  --radius: 18px;
  --bayang-lembut: 0 10px 30px rgba(27, 35, 33, 0.06);
  --bayang-naik: 0 18px 40px rgba(27, 35, 33, 0.1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--gading);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
em { font-style: normal; }

:focus-visible {
  outline: 3px solid rgba(14, 111, 99, 0.45);
  outline-offset: 3px;
}

.lewati {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--zamrud);
  color: #FFFFFF;
  border-radius: 0 0 12px 0;
  font-weight: 700;
}
.lewati:focus {
  left: 0;
}

.wadah {
  width: 100%;
  max-width: var(--wadah);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
}

/* ------------------------------------------------------------------ kepala */
.kepala {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 245, 0.92);
  border-bottom: 1px solid var(--garis);
  backdrop-filter: blur(12px);
}
.kepala--gulir {
  box-shadow: 0 10px 28px rgba(27, 35, 33, 0.08);
}
.kepala__isi {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}

.merek {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.merek__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.merek__nama {
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: 0.01em;
  color: var(--tinta);
  white-space: nowrap;
}

.kepala__tombol {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 10px 9px;
  border: 1px solid var(--garis-kuat);
  border-radius: 12px;
  background: var(--putih);
  cursor: pointer;
}
.kepala__garis {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--tinta);
  border-radius: 2px;
}

.navigasi {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 0.93rem;
}
.navigasi > a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--redup);
  transition: background 0.2s ease, color 0.2s ease;
}
.navigasi > a:hover {
  color: var(--zamrud-tua);
  background: var(--zamrud-lembut);
}
.navigasi__aksi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

/* ------------------------------------------------------------------ tombol */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, color 0.18s ease;
}
.tombol--besar {
  padding: 14px 26px;
  font-size: 0.98rem;
}
.tombol--emas {
  background: linear-gradient(135deg, var(--emas-terang), var(--emas));
  color: #241F12;
  box-shadow: 0 8px 22px rgba(176, 138, 46, 0.24);
}
.tombol--emas:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(176, 138, 46, 0.3);
}
.tombol--hijau {
  background: linear-gradient(135deg, #12796C, var(--zamrud-tua));
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(10, 74, 67, 0.22);
}
.tombol--hijau:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(10, 74, 67, 0.28);
}
.tombol--garis {
  border-color: var(--garis-kuat);
  color: var(--tinta);
  background: var(--putih);
}
.tombol--garis:hover {
  border-color: var(--zamrud);
  color: var(--zamrud-tua);
}
.tombol--halus {
  border-color: var(--garis-kuat);
  color: var(--tinta);
  background: transparent;
}
.tombol--halus:hover {
  border-color: var(--zamrud);
  color: var(--zamrud-tua);
}
.aksi-tengah {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 7vw, 92px) 0 clamp(52px, 7vw, 96px);
  background:
    radial-gradient(920px 500px at 88% -12%, rgba(14, 111, 99, 0.11), transparent 62%),
    radial-gradient(760px 420px at 2% 4%, rgba(176, 138, 46, 0.1), transparent 60%),
    linear-gradient(180deg, #FDFCF9 0%, var(--gading) 58%, var(--gading-2) 100%);
  color: var(--tinta);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23B08A2E' stroke-opacity='0.13' stroke-width='1'%3E%3Cpath d='M75 9 93 39 127 39 110 66 127 93 93 93 75 123 57 93 23 93 40 66 23 39 57 39Z'/%3E%3Ccircle cx='75' cy='66' r='13'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.hero__isi {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.84fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}

.arab {
  font-family: var(--arab);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  color: #7A5F16;
  letter-spacing: 0.01em;
  line-height: 2;
  margin-bottom: 14px;
  text-align: left;
}
.arab--kecil {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  text-align: center;
  margin-bottom: 14px;
}

.lencana {
  display: inline-block;
  padding: 6px 15px;
  border: 1px solid var(--garis-kuat);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--zamrud-tua);
  background: var(--putih);
  box-shadow: var(--bayang-lembut);
  margin-bottom: 20px;
}

.hero__judul {
  font-family: var(--serif);
  font-size: clamp(2.05rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--tinta);
}
.hero__judul em {
  color: var(--zamrud);
  position: relative;
  white-space: nowrap;
}

.hero__ket {
  margin-top: 20px;
  max-width: 60ch;
  color: var(--redup);
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
}

.hero__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero__aksi--tengah {
  justify-content: center;
}

.hero__catatan {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 0.88rem;
  color: var(--redup-muda);
}
.hero__catatan--tengah {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.angka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--garis);
}
.angka__butir dt {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--redup-muda);
}
.angka__butir dd {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  color: var(--zamrud-tua);
  line-height: 1.25;
}
.angka__butir dd span {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--redup-muda);
  letter-spacing: 0.02em;
}
.angka__kaki {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--redup-muda);
}
.angka__kaki--tengah {
  text-align: center;
  margin-top: 22px;
  color: var(--redup);
}

/* banner pada kartu hero pertama */
.hero__kartu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.banner {
  width: 100%;
  max-width: 540px;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(176, 138, 46, 0.42);
  background: var(--zamrud-tua);
  box-shadow: 0 22px 50px rgba(27, 35, 33, 0.16);
}
.banner__gambar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pilar-cepat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 540px;
}
.pilar-cepat li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--putih);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--tinta);
  box-shadow: 0 4px 14px rgba(27, 35, 33, 0.05);
}
.pilar-cepat li::before {
  content: "";
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--emas);
  border-radius: 1px;
}
.pilar-cepat__kaki {
  max-width: 46ch;
  text-align: center;
  font-size: 0.8rem;
  color: var(--redup-muda);
}

/* ----------------------------------------------------------------- bagian */
.bagian {
  padding: clamp(56px, 7vw, 100px) 0;
}
.bagian--krem {
  background: var(--gading-2);
}
.bagian--aksen {
  background: linear-gradient(180deg, var(--zamrud-lembut), #F7FAF9);
}

.judul-kecil {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emas);
  margin-bottom: 12px;
}
.judul-bagian {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-weight: 600;
  max-width: 26ch;
  color: var(--tinta);
}
.ket-bagian {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--redup);
}

.kisi {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(26px, 3.5vw, 42px);
}
.kisi--pilar {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.kisi--paket {
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  align-items: stretch;
}
.kisi--konten {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

/* ------------------------------------------------------------------ pilar */
.pilar {
  position: relative;
  padding: 26px 24px 24px;
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang-lembut);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pilar::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--emas), transparent);
}
.pilar:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 111, 99, 0.3);
  box-shadow: var(--bayang-naik);
}
.pilar h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--zamrud-tua);
  margin-bottom: 8px;
}
.pilar p {
  font-size: 0.94rem;
  color: var(--redup);
}

/* -------------------------------------------------------------- keunggulan */
.unggul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(26px, 3.5vw, 42px);
}
.unggul li {
  padding: 24px 22px 22px;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang-lembut);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.unggul li:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 138, 46, 0.4);
  box-shadow: var(--bayang-naik);
}
.unggul__nomor {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--emas);
  margin-bottom: 8px;
}
.unggul h3 {
  font-size: 1.02rem;
  line-height: 1.42;
  margin-bottom: 8px;
  color: var(--tinta);
}
.unggul p {
  font-size: 0.91rem;
  color: var(--redup);
}

/* ------------------------------------------------------------------ modul */
.modul {
  columns: 340px 3;
  column-gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(26px, 3.5vw, 40px);
}
.modul__butir {
  break-inside: avoid;
  margin-bottom: clamp(12px, 1.6vw, 18px);
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modul__butir[open] {
  border-color: rgba(14, 111, 99, 0.3);
  box-shadow: var(--bayang-lembut);
}
.modul__butir summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 16px 44px 16px 19px;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.modul__butir summary::-webkit-details-marker {
  display: none;
}
.modul__butir summary::after {
  content: "+";
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--emas);
}
.modul__butir[open] summary::after {
  content: "\2212";
}
.modul__butir summary:hover {
  background: rgba(14, 111, 99, 0.04);
}
.modul__nama {
  font-family: var(--serif);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--zamrud-tua);
}
.modul__ket {
  font-size: 0.81rem;
  color: var(--redup-muda);
}
.modul__butir ul {
  padding: 0 20px 6px 36px;
  list-style: disc;
  display: grid;
  gap: 7px;
}
.modul__butir li {
  font-size: 0.92rem;
  color: #3A423F;
}
.modul__butir li::marker {
  color: var(--emas);
}
.modul__angka {
  color: var(--redup-muda);
  font-size: 0.85rem;
}
.modul__tanda {
  margin: 4px 20px 16px 36px;
  padding: 9px 13px;
  border-left: 2px solid var(--emas);
  background: rgba(176, 138, 46, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  color: #6B551F;
}

/* ------------------------------------------------------------------- alur */
.alur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(194px, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(26px, 3.5vw, 42px);
}
.alur__langkah {
  position: relative;
  padding: 24px 20px;
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang-lembut);
}
.alur__langkah::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--emas), transparent);
  border-radius: 2px;
}
.alur__nomor {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 999px;
  border: 1px solid rgba(176, 138, 46, 0.5);
  background: rgba(176, 138, 46, 0.1);
  font-family: var(--serif);
  font-size: 0.92rem;
  color: #7A5F16;
}
.alur h3 {
  font-size: 0.99rem;
  margin-bottom: 6px;
  color: var(--tinta);
}
.alur p {
  font-size: 0.89rem;
  color: var(--redup);
}

/* ---------------------------------------------------------------- segmen */
.segmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(24px, 3vw, 36px);
}
.segmen li {
  padding: 18px 20px;
  border: 1px solid var(--garis);
  border-left: 2px solid var(--emas);
  border-radius: 0 12px 12px 0;
  background: var(--putih);
  box-shadow: 0 6px 18px rgba(27, 35, 33, 0.04);
}
.segmen strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--zamrud-tua);
  margin-bottom: 4px;
}
.segmen span {
  font-size: 0.89rem;
  color: var(--redup);
}

/* ------------------------------------------------------------------ paket */
.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang-lembut);
  color: var(--tinta);
}
.paket--utama {
  border-color: rgba(176, 138, 46, 0.55);
  background: linear-gradient(180deg, #FFFDF7, var(--putih));
  box-shadow: 0 20px 44px rgba(27, 35, 33, 0.1);
}
.paket__pita {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--emas-terang), var(--emas));
  color: #241F12;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.paket h3 {
  font-family: var(--serif);
  font-size: 1.36rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--tinta);
}
.paket__ket {
  font-size: 0.87rem;
  color: var(--redup-muda);
  margin-bottom: 16px;
}
.paket__daftar {
  display: grid;
  gap: 9px;
  font-size: 0.92rem;
  color: #3A423F;
}
.paket__daftar li {
  position: relative;
  padding-left: 20px;
}
.paket__daftar li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--zamrud);
  border-radius: 1px;
}
.paket__tanda {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--garis);
  font-size: 0.83rem;
  color: var(--redup-muda);
}
.paket__catatan {
  margin-top: 28px;
  max-width: 70ch;
  font-size: 0.89rem;
  color: var(--redup);
}

/* ----------------------------------------------------------- kotak angka */
.kotak-angka {
  padding: 24px 20px;
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--bayang-lembut);
}
.kotak-angka strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.95rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--zamrud-tua);
}
.kotak-angka span {
  display: block;
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--redup);
}

/* ----------------------------------------------------------- segera hadir */
.segera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(24px, 3vw, 36px);
}
.segera li {
  padding: 18px 20px;
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(27, 35, 33, 0.04);
}
.segera strong {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--zamrud-tua);
  margin-bottom: 4px;
}
.segera span {
  font-size: 0.89rem;
  color: var(--redup);
}
.segera__catatan {
  margin-top: 16px;
  font-size: 0.89rem;
  color: var(--redup);
}

/* ---------------------------------------------------------------- penutup */
.penutup {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 92px) 0;
  text-align: center;
  color: var(--tinta);
  background:
    radial-gradient(760px 400px at 50% -10%, rgba(176, 138, 46, 0.16), transparent 62%),
    linear-gradient(180deg, var(--gading-2), #FBF7EE);
  border-top: 1px solid var(--garis);
}
.penutup::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23B08A2E' stroke-opacity='0.14' stroke-width='1'%3E%3Ccircle cx='65' cy='65' r='46'/%3E%3Ccircle cx='65' cy='65' r='27'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 130px 130px;
}
.penutup__isi {
  position: relative;
  z-index: 1;
}
.penutup__judul {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3.1vw, 2.4rem);
  font-weight: 600;
  line-height: 1.18;
  margin-bottom: 12px;
  color: var(--tinta);
}
.penutup__ket {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--redup);
}

/* -------------------------------------------------------------------- kaki */
.kaki {
  background: var(--gelap);
  color: rgba(251, 249, 245, 0.74);
  padding: clamp(34px, 4.5vw, 52px) 0 30px;
}
.kaki__isi {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 38px);
  align-items: start;
}
.kaki__merek {
  display: flex;
  gap: 13px;
  align-items: center;
}
.kaki__nama {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: #FFFFFF;
}
.kaki__tagline {
  font-size: 0.85rem;
  color: rgba(251, 249, 245, 0.55);
}
.kaki__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.89rem;
}
.kaki__nav a {
  color: rgba(251, 249, 245, 0.78);
}
.kaki__nav a:hover {
  color: var(--emas-terang);
}
.kaki__catatan {
  display: grid;
  gap: 5px;
  font-size: 0.81rem;
  color: rgba(251, 249, 245, 0.5);
}
.kaki__hak {
  margin-top: 8px;
  color: rgba(251, 249, 245, 0.4);
}

/* --------------------------------------------------------- animasi lembut */
.akan-muncul {
  opacity: 0;
  transform: translateY(16px);
}
.akan-muncul--tampil {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* -------------------------------------------------------------- responsif */
@media (min-width: 1120px) {
  .kisi--pilar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .modul {
    columns: 320px 2;
  }
}

@media (max-width: 1024px) {
  .hero__isi {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__kartu {
    order: 0;
  }
  .banner {
    max-width: 100%;
  }
  .kaki__isi {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .kepala__tombol {
    display: block;
  }
  .navigasi {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px clamp(18px, 4vw, 40px) 20px;
    background: var(--gading);
    border-bottom: 1px solid var(--garis);
    box-shadow: 0 22px 38px rgba(27, 35, 33, 0.12);
  }
  .navigasi--buka {
    display: flex;
  }
  .navigasi > a {
    padding: 12px 4px;
    border-radius: 8px;
    border-bottom: 1px solid var(--garis);
    color: var(--tinta);
  }
  .navigasi__aksi {
    flex-direction: column;
    align-items: stretch;
    margin: 12px 0 0;
    gap: 10px;
  }
  .angka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .hero__judul em {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 74px;
  }
  .kepala__isi {
    min-height: 64px;
  }
  .bagian {
    padding: 52px 0;
  }
  .hero {
    padding: 36px 0 52px;
  }
  .hero__judul {
    font-size: clamp(1.85rem, 7.3vw, 2.3rem);
  }
  .hero__ket {
    margin-top: 15px;
    font-size: 0.97rem;
  }
  .lencana {
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    padding: 6px 11px;
    margin-bottom: 15px;
  }
  .hero__aksi {
    margin-top: 22px;
  }
  .hero__aksi .tombol {
    width: 100%;
  }
  .hero__catatan {
    font-size: 0.84rem;
  }
  .angka {
    margin-top: 26px;
    padding-top: 18px;
    gap: 14px 10px;
  }
  .angka__butir dd {
    font-size: 1.38rem;
  }
  .banner {
    border-radius: 16px;
  }
  .pilar-cepat li {
    font-size: 0.76rem;
    padding: 5px 11px;
  }
  .judul-bagian {
    font-size: clamp(1.5rem, 6.3vw, 1.95rem);
  }
  .ket-bagian {
    margin-top: 12px;
    font-size: 0.95rem;
  }
  .kisi {
    margin-top: 24px;
  }
  .kisi--konten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kotak-angka {
    padding: 18px 12px;
  }
  .kotak-angka span {
    font-size: 0.8rem;
  }
  .pilar {
    padding: 22px 20px 20px;
  }
  .modul {
    columns: 1;
  }
  .modul__butir summary {
    padding: 15px 42px 15px 17px;
  }
  .modul__butir ul {
    padding-left: 30px;
    padding-right: 16px;
  }
  .modul__tanda {
    margin-left: 30px;
    margin-right: 16px;
  }
  .penutup {
    padding: 52px 0;
  }
  .kaki {
    padding: 32px 0 26px;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 16px;
  }
  .merek__logo {
    width: 36px;
    height: 36px;
  }
  .merek__nama {
    font-size: 1.06rem;
  }
  .hero__aksi {
    flex-direction: column;
    align-items: stretch;
  }
  .tombol {
    width: 100%;
  }
  .kisi--konten {
    grid-template-columns: minmax(0, 1fr);
  }
  .paket__pita {
    left: 18px;
  }
}

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

/* ------------------------------------------ tata letak isi hero berbasis area */
.hero__isi {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.84fr);
  grid-template-areas:
    "teks kartu"
    "ajakan kartu"
    "angka kartu";
  column-gap: clamp(30px, 5vw, 60px);
  row-gap: 0;
  align-items: start;
}
.hero__teks { grid-area: teks; }
.hero__ajakan { grid-area: ajakan; }
.hero__kartu {
  grid-area: kartu;
  align-self: center;
}
.hero__angka { grid-area: angka; }

@media (max-width: 1024px) {
  .hero__isi {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "teks"
      "ajakan"
      "kartu"
      "angka";
  }
  .hero__kartu {
    align-self: stretch;
    margin-top: 24px;
  }
  .hero__angka {
    margin-top: 22px;
  }
}

@media (max-width: 720px) {
  .hero__kartu {
    margin-top: 20px;
  }
  .hero__angka {
    margin-top: 18px;
  }
  .hero__angka .angka {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------- palet */
:root {
  --t1-bg: #E7F1EC;  --t1-bd: #CBE0D5;  --t1-ak: #0E6F63;
  --t2-bg: #F8EFDC;  --t2-bd: #E9D9B7;  --t2-ak: #97711E;
  --t3-bg: #E8F0F2;  --t3-bd: #CFDFE3;  --t3-ak: #2A6B77;
  --t4-bg: #FBF2E6;  --t4-bd: #EBDCC5;  --t4-ak: #A0653F;
  --t5-bg: #EEF3E7;  --t5-bd: #DBE4CC;  --t5-ak: #567539;
  --t6-bg: #EAEEF6;  --t6-bd: #D3DBEA;  --t6-ak: #34507E;
}

body {
  background: #F8F5EE;
}

/* ------------------------------------------------------ kepala menu premium */
.kepala {
  background:
    linear-gradient(180deg, rgba(251, 248, 240, 0.97), rgba(238, 244, 241, 0.94));
  border-bottom: 1px solid rgba(176, 138, 46, 0.3);
  box-shadow: 0 6px 20px rgba(27, 35, 33, 0.05);
}
.kepala::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #B08A2E, #E7C873 34%, #0E6F63 72%, #B08A2E);
}
.navigasi > a:hover {
  background: rgba(14, 111, 99, 0.1);
}
.navigasi--buka {
  background:
    linear-gradient(180deg, #FBF8F0, #EFF5F2);
}

/* --------------------------------------------------------- latar per bagian */
.hero {
  background:
    radial-gradient(900px 480px at 88% -14%, rgba(14, 111, 99, 0.12), transparent 62%),
    radial-gradient(720px 400px at 0% 4%, rgba(176, 138, 46, 0.13), transparent 60%),
    linear-gradient(180deg, #FDFBF5 0%, #F7F4EA 55%, #EEF4F1 100%);
}
#pilar {
  background: linear-gradient(180deg, #FAF7EE, #F5F2E7);
}
#keunggulan {
  background: linear-gradient(180deg, #E7F1EC, #F2F7F3);
}
#fitur {
  background: linear-gradient(180deg, #F8F1E3, #FBF6EC);
}
#membaca {
  background: linear-gradient(180deg, #E8F0F2, #F3F7F7);
}
#untuk-siapa {
  background: linear-gradient(180deg, #FBF6EC, #F6F2E6);
}
#paket {
  background: linear-gradient(180deg, #F6EDDA, #FBF5E8);
}
#konten {
  background: linear-gradient(180deg, #F8F5EC, #EFF4F0);
}
#segera {
  background: linear-gradient(180deg, #EDF3E9, #F6F7EF);
}
.penutup {
  background:
    radial-gradient(720px 380px at 50% -12%, rgba(176, 138, 46, 0.2), transparent 62%),
    linear-gradient(180deg, #F4EDDD, #FBF7EE);
}

/* --------------------------------------------- kartu pilar: lima warna khas */
.pilar:nth-child(5n+1) { background: var(--t1-bg); border-color: var(--t1-bd); }
.pilar:nth-child(5n+2) { background: var(--t2-bg); border-color: var(--t2-bd); }
.pilar:nth-child(5n+3) { background: var(--t3-bg); border-color: var(--t3-bd); }
.pilar:nth-child(5n+4) { background: var(--t4-bg); border-color: var(--t4-bd); }
.pilar:nth-child(5n+5) { background: var(--t5-bg); border-color: var(--t5-bd); }

.pilar:nth-child(5n+1) h3 { color: var(--t1-ak); }
.pilar:nth-child(5n+2) h3 { color: var(--t2-ak); }
.pilar:nth-child(5n+3) h3 { color: var(--t3-ak); }
.pilar:nth-child(5n+4) h3 { color: var(--t4-ak); }
.pilar:nth-child(5n+5) h3 { color: var(--t5-ak); }

.pilar:nth-child(5n+1)::before { background: linear-gradient(90deg, var(--t1-ak), transparent); }
.pilar:nth-child(5n+2)::before { background: linear-gradient(90deg, var(--t2-ak), transparent); }
.pilar:nth-child(5n+3)::before { background: linear-gradient(90deg, var(--t3-ak), transparent); }
.pilar:nth-child(5n+4)::before { background: linear-gradient(90deg, var(--t4-ak), transparent); }
.pilar:nth-child(5n+5)::before { background: linear-gradient(90deg, var(--t5-ak), transparent); }

.pilar:nth-child(5n+2) p,
.pilar:nth-child(5n+4) p { color: #5E5344; }
.pilar:hover {
  border-color: rgba(14, 111, 99, 0.4);
  box-shadow: var(--bayang-naik);
}

/* ------------------------------------------ kartu unggulan: giliran enam warna */
.unggul li:nth-child(6n+1) { background: var(--t1-bg); border-color: var(--t1-bd); }
.unggul li:nth-child(6n+2) { background: var(--t2-bg); border-color: var(--t2-bd); }
.unggul li:nth-child(6n+3) { background: var(--t3-bg); border-color: var(--t3-bd); }
.unggul li:nth-child(6n+4) { background: var(--t4-bg); border-color: var(--t4-bd); }
.unggul li:nth-child(6n+5) { background: var(--t5-bg); border-color: var(--t5-bd); }
.unggul li:nth-child(6n)   { background: var(--t6-bg); border-color: var(--t6-bd); }

.unggul li:nth-child(6n+1) .unggul__nomor { color: var(--t1-ak); }
.unggul li:nth-child(6n+2) .unggul__nomor { color: var(--t2-ak); }
.unggul li:nth-child(6n+3) .unggul__nomor { color: var(--t3-ak); }
.unggul li:nth-child(6n+4) .unggul__nomor { color: var(--t4-ak); }
.unggul li:nth-child(6n+5) .unggul__nomor { color: var(--t5-ak); }
.unggul li:nth-child(6n)   .unggul__nomor { color: var(--t6-ak); }

.unggul li:hover {
  border-color: rgba(14, 111, 99, 0.4);
}

/* ----------------------------------------------- kartu modul: enam warna khas */
.modul__butir:nth-child(6n+1) { background: var(--t1-bg); border-color: var(--t1-bd); }
.modul__butir:nth-child(6n+2) { background: var(--t2-bg); border-color: var(--t2-bd); }
.modul__butir:nth-child(6n+3) { background: var(--t3-bg); border-color: var(--t3-bd); }
.modul__butir:nth-child(6n+4) { background: var(--t4-bg); border-color: var(--t4-bd); }
.modul__butir:nth-child(6n+5) { background: var(--t5-bg); border-color: var(--t5-bd); }
.modul__butir:nth-child(6n)   { background: var(--t6-bg); border-color: var(--t6-bd); }

.modul__butir:nth-child(6n+1) .modul__nama { color: var(--t1-ak); }
.modul__butir:nth-child(6n+2) .modul__nama { color: var(--t2-ak); }
.modul__butir:nth-child(6n+3) .modul__nama { color: var(--t3-ak); }
.modul__butir:nth-child(6n+4) .modul__nama { color: var(--t4-ak); }
.modul__butir:nth-child(6n+5) .modul__nama { color: var(--t5-ak); }
.modul__butir:nth-child(6n)   .modul__nama { color: var(--t6-ak); }

.modul__butir:nth-child(6n+1) summary::after { color: var(--t1-ak); }
.modul__butir:nth-child(6n+2) summary::after { color: var(--t2-ak); }
.modul__butir:nth-child(6n+3) summary::after { color: var(--t3-ak); }
.modul__butir:nth-child(6n+4) summary::after { color: var(--t4-ak); }
.modul__butir:nth-child(6n+5) summary::after { color: var(--t5-ak); }
.modul__butir:nth-child(6n)   summary::after { color: var(--t6-ak); }

.modul__butir summary:hover {
  background: rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------ langkah alur: lima warna */
.alur__langkah:nth-child(5n+1) { background: var(--t1-bg); border-color: var(--t1-bd); }
.alur__langkah:nth-child(5n+2) { background: var(--t2-bg); border-color: var(--t2-bd); }
.alur__langkah:nth-child(5n+3) { background: var(--t3-bg); border-color: var(--t3-bd); }
.alur__langkah:nth-child(5n+4) { background: var(--t4-bg); border-color: var(--t4-bd); }
.alur__langkah:nth-child(5n+5) { background: var(--t5-bg); border-color: var(--t5-bd); }

.alur__langkah:nth-child(5n+1)::before { background: linear-gradient(90deg, var(--t1-ak), transparent); }
.alur__langkah:nth-child(5n+2)::before { background: linear-gradient(90deg, var(--t2-ak), transparent); }
.alur__langkah:nth-child(5n+3)::before { background: linear-gradient(90deg, var(--t3-ak), transparent); }
.alur__langkah:nth-child(5n+4)::before { background: linear-gradient(90deg, var(--t4-ak), transparent); }
.alur__langkah:nth-child(5n+5)::before { background: linear-gradient(90deg, var(--t5-ak), transparent); }

.alur__langkah:nth-child(5n+1) .alur__nomor { color: var(--t1-ak); border-color: var(--t1-bd); background: rgba(255, 255, 255, 0.55); }
.alur__langkah:nth-child(5n+2) .alur__nomor { color: var(--t2-ak); border-color: var(--t2-bd); background: rgba(255, 255, 255, 0.55); }
.alur__langkah:nth-child(5n+3) .alur__nomor { color: var(--t3-ak); border-color: var(--t3-bd); background: rgba(255, 255, 255, 0.55); }
.alur__langkah:nth-child(5n+4) .alur__nomor { color: var(--t4-ak); border-color: var(--t4-bd); background: rgba(255, 255, 255, 0.55); }
.alur__langkah:nth-child(5n+5) .alur__nomor { color: var(--t5-ak); border-color: var(--t5-bd); background: rgba(255, 255, 255, 0.55); }

/* ----------------------------------------------- segmen pengguna: enam warna */
.segmen li:nth-child(6n+1) { background: var(--t1-bg); border-color: var(--t1-bd); border-left-color: var(--t1-ak); }
.segmen li:nth-child(6n+2) { background: var(--t2-bg); border-color: var(--t2-bd); border-left-color: var(--t2-ak); }
.segmen li:nth-child(6n+3) { background: var(--t3-bg); border-color: var(--t3-bd); border-left-color: var(--t3-ak); }
.segmen li:nth-child(6n+4) { background: var(--t4-bg); border-color: var(--t4-bd); border-left-color: var(--t4-ak); }
.segmen li:nth-child(6n+5) { background: var(--t5-bg); border-color: var(--t5-bd); border-left-color: var(--t5-ak); }
.segmen li:nth-child(6n)   { background: var(--t6-bg); border-color: var(--t6-bd); border-left-color: var(--t6-ak); }

.segmen li:nth-child(6n+1) strong { color: var(--t1-ak); }
.segmen li:nth-child(6n+2) strong { color: var(--t2-ak); }
.segmen li:nth-child(6n+3) strong { color: var(--t3-ak); }
.segmen li:nth-child(6n+4) strong { color: var(--t4-ak); }
.segmen li:nth-child(6n+5) strong { color: var(--t5-ak); }
.segmen li:nth-child(6n)   strong { color: var(--t6-ak); }

/* ---------------------------------------------------- kartu paket: tiga rasa */
.paket {
  background: var(--t6-bg);
  border-color: var(--t6-bd);
}
.paket:nth-child(2) {
  background: linear-gradient(180deg, #E9F3EE, #F4F9F6);
  border-color: rgba(176, 138, 46, 0.6);
  box-shadow: 0 22px 46px rgba(27, 35, 33, 0.11);
}
.paket:nth-child(3) {
  background: var(--t4-bg);
  border-color: var(--t4-bd);
}
.paket:nth-child(1) h3 { color: var(--t6-ak); }
.paket:nth-child(2) h3 { color: var(--t1-ak); }
.paket:nth-child(3) h3 { color: var(--t4-ak); }
.paket:nth-child(2) .paket__daftar li::before { background: var(--t1-ak); }
.paket:nth-child(3) .paket__daftar li::before { background: var(--t4-ak); }

/* ------------------------------------------------- kotak angka: empat warna */
.kotak-angka:nth-child(4n+1) { background: var(--t1-bg); border-color: var(--t1-bd); }
.kotak-angka:nth-child(4n+2) { background: var(--t2-bg); border-color: var(--t2-bd); }
.kotak-angka:nth-child(4n+3) { background: var(--t3-bg); border-color: var(--t3-bd); }
.kotak-angka:nth-child(4n+4) { background: var(--t5-bg); border-color: var(--t5-bd); }

.kotak-angka:nth-child(4n+1) strong { color: var(--t1-ak); }
.kotak-angka:nth-child(4n+2) strong { color: var(--t2-ak); }
.kotak-angka:nth-child(4n+3) strong { color: var(--t3-ak); }
.kotak-angka:nth-child(4n+4) strong { color: var(--t5-ak); }

/* -------------------------------------------------- segera hadir: empat warna */
.segera li:nth-child(4n+1) { background: var(--t2-bg); border-color: var(--t2-bd); }
.segera li:nth-child(4n+2) { background: var(--t4-bg); border-color: var(--t4-bd); }
.segera li:nth-child(4n+3) { background: var(--t5-bg); border-color: var(--t5-bd); }
.segera li:nth-child(4n+4) { background: var(--t3-bg); border-color: var(--t3-bd); }

.segera li:nth-child(4n+1) strong { color: var(--t2-ak); }
.segera li:nth-child(4n+2) strong { color: var(--t4-ak); }
.segera li:nth-child(4n+3) strong { color: var(--t5-ak); }
.segera li:nth-child(4n+4) strong { color: var(--t3-ak); }

/* ------------------------------------------------------- rincian kecil kartu */
.modul__butir[open] {
  border-color: rgba(14, 111, 99, 0.35);
  box-shadow: 0 14px 30px rgba(27, 35, 33, 0.08);
}
.modul__tanda {
  background: rgba(255, 255, 255, 0.6);
}
.segmen li,
.segera li,
.kotak-angka,
.alur__langkah,
.unggul li,
.pilar,
.modul__butir,
.paket {
  background-clip: padding-box;
}

/* ------------------------------------------------------------ mode layar HP */
@media (max-width: 720px) {
  .kepala {
    background: linear-gradient(180deg, #FBF8F0, #EEF4F1);
  }
  .navigasi--buka {
    background: linear-gradient(180deg, #FBF8F0, #EFF5F2);
  }
  .pilar:hover,
  .unggul li:hover {
    transform: none;
  }
}

/* ================================================================ hero final
   Susunan akhir isi hero. Di layar besar: teks dan ajakan di kiri, gambar di
   kanan atas dengan ciri di bawahnya. Di layar HP: gambar paling atas.
   ======================================================================== */
.hero__isi {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.84fr);
  grid-template-areas:
    "teks   gambar"
    "ajakan ciri"
    "angka  ciri";
  column-gap: clamp(28px, 4.6vw, 56px);
  row-gap: 0;
  align-items: start;
}
.hero__teks { grid-area: teks; }
.hero__ajakan { grid-area: ajakan; }
.hero__angka { grid-area: angka; }
.hero__gambar {
  grid-area: gambar;
  width: 100%;
  max-width: 540px;
  justify-self: end;
}
.hero__ciri {
  grid-area: ciri;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 540px;
  justify-self: end;
  margin-top: 14px;
}
.hero__ciri .pilar-cepat {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .hero__isi {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "gambar"
      "teks"
      "ajakan"
      "ciri"
      "angka";
  }
  .hero__gambar {
    max-width: 100%;
    justify-self: stretch;
  }
  .hero__ciri {
    max-width: 100%;
    justify-self: stretch;
    margin-top: 18px;
  }
  .hero__teks {
    margin-top: 24px;
  }
  .hero__angka {
    margin-top: 22px;
  }
}

@media (max-width: 720px) {
  .hero__teks {
    margin-top: 20px;
  }
  .hero__ciri {
    margin-top: 16px;
  }
  .hero__angka {
    margin-top: 18px;
  }
  .hero__angka .angka {
    margin-top: 0;
  }
}
/* ================================================== pita warna per bagian
   Tiap bagian memudar ke warna dasar yang sama di awal dan akhir, sehingga
   pergantian warna tidak menimbulkan garis sambungan yang kasar.
   ======================================================================== */
.hero {
  background:
    radial-gradient(900px 480px at 88% -14%, rgba(14, 111, 99, 0.12), transparent 62%),
    radial-gradient(720px 400px at 0% 4%, rgba(176, 138, 46, 0.13), transparent 60%),
    linear-gradient(180deg, #FDFBF5 0%, #F8F5EE 100%);
}
#pilar {
  background: linear-gradient(180deg, #F8F5EE 0%, #F3EFE2 20%, #F3EFE2 80%, #F8F5EE 100%);
}
#keunggulan {
  background: linear-gradient(180deg, #F8F5EE 0%, #E7F1EC 20%, #E7F1EC 80%, #F8F5EE 100%);
}
#fitur {
  background: linear-gradient(180deg, #F8F5EE 0%, #F8F1E3 20%, #F8F1E3 80%, #F8F5EE 100%);
}
#membaca {
  background: linear-gradient(180deg, #F8F5EE 0%, #E8F0F2 20%, #E8F0F2 80%, #F8F5EE 100%);
}
#untuk-siapa {
  background: linear-gradient(180deg, #F8F5EE 0%, #FBF6EC 20%, #FBF6EC 80%, #F8F5EE 100%);
}
#paket {
  background: linear-gradient(180deg, #F8F5EE 0%, #F6EDDA 20%, #F6EDDA 80%, #F8F5EE 100%);
}
#konten {
  background: linear-gradient(180deg, #F8F5EE 0%, #EFF4F0 20%, #EFF4F0 80%, #F8F5EE 100%);
}
#segera {
  background: linear-gradient(180deg, #F8F5EE 0%, #EDF3E9 20%, #EDF3E9 80%, #F8F5EE 100%);
}
.penutup {
  background:
    radial-gradient(720px 380px at 50% -12%, rgba(176, 138, 46, 0.2), transparent 62%),
    linear-gradient(180deg, #F8F5EE 0%, #F4EDDD 100%);
}
/* ============================================ susunan akhir hero (versi 3)
   Kanan: gambar lalu angka isi konten tepat di bawahnya.
   Kiri: judul, ajakan, dan tombol. Pill lima pilar diletakkan di akhir hero.
   ======================================================================== */
.hero__isi {
  grid-template-areas:
    "teks   gambar"
    "ajakan angka"
    "ciri   ciri";
  align-items: start;
}
.hero__teks { grid-area: teks; }
.hero__ajakan { grid-area: ajakan; }
.hero__gambar { grid-area: gambar; }
.hero__ciri { grid-area: ciri; }

.hero__angka {
  grid-area: angka;
  justify-self: end;
  width: 100%;
  max-width: 540px;
  margin-top: 16px;
}
.hero__angka .angka {
  margin-top: 0;
  padding-top: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.hero__ciri {
  max-width: none;
  justify-self: stretch;
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .hero__isi {
    grid-template-areas:
      "gambar"
      "angka"
      "teks"
      "ajakan"
      "ciri";
  }
  .hero__gambar,
  .hero__angka {
    max-width: 100%;
    justify-self: stretch;
  }
  .hero__angka {
    margin-top: 14px;
  }
  .hero__teks {
    margin-top: 22px;
  }
  .hero__ciri {
    margin-top: 22px;
  }
}

@media (max-width: 720px) {
  .hero__angka .angka {
    gap: 14px 12px;
  }
  .hero__ciri {
    margin-top: 20px;
  }
}
/* ================================= keterangan gambar (caption) pada banner
   Angka isi konten dibaca sebagai keterangan gambar, menempel di dalam bingkai
   banner, bukan kotak terpisah yang menggantung di bawahnya.
   ======================================================================== */
.banner__ket {
  display: grid;
  gap: 9px;
  padding: 14px 16px 15px;
  background: var(--putih);
  border-top: 1px solid rgba(176, 138, 46, 0.3);
}
.banner__angka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}
.banner__angka dt {
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--redup-muda);
  line-height: 1.3;
}
.banner__angka dd {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.15;
  color: var(--t1-ak);
}
.banner__angka dd span {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--redup-muda);
}
.banner__catatan {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--garis);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--redup-muda);
}

/* ------------------------------- hero: gambar menempati dua baris, jarak rapat */
.hero__isi {
  grid-template-areas:
    "teks   gambar"
    "ajakan gambar"
    "ciri   ciri";
  align-items: start;
}
.hero__gambar {
  grid-area: gambar;
  align-self: start;
}
.hero__teks { grid-area: teks; }
.hero__ajakan { grid-area: ajakan; }
.hero__ciri { grid-area: ciri; }
.hero__ciri {
  margin-top: 26px;
}

@media (max-width: 1024px) {
  .hero__isi {
    grid-template-areas:
      "gambar"
      "teks"
      "ajakan"
      "ciri";
  }
  .hero__gambar {
    align-self: stretch;
  }
  .hero__teks {
    margin-top: 22px;
  }
  .hero__ciri {
    margin-top: 22px;
  }
}

@media (max-width: 720px) {
  .banner__ket {
    padding: 12px 13px 13px;
  }
  .banner__angka {
    gap: 8px 10px;
  }
  .banner__angka dd {
    font-size: 1.06rem;
  }
  .hero__ciri {
    margin-top: 20px;
  }
}

@media (max-width: 420px) {
  .banner__angka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

/* lencana di bagian kedua */
.bagian .lencana {
  margin-bottom: 14px;
}
/* ------------------------------------- rapatkan jarak bawah hero dan bagian 2 */
.hero {
  padding-bottom: clamp(34px, 4.4vw, 60px);
}
.hero__ciri {
  margin-top: 24px;
}
#pilar {
  padding-top: clamp(42px, 5vw, 74px);
}
@media (max-width: 1024px) {
  .hero__ciri {
    margin-top: 20px;
  }
}
/* ================================ keterangan gambar bergaya premium mewah
   Nilai memakai huruf serif tebal, label huruf kecil berjarak, pemisah garis
   emas tipis, dan catatan di baris bawah dengan huruf lebih tenang.
   ======================================================================== */
.banner__ket {
  display: grid;
  gap: 13px;
  padding: 16px 20px 16px;
  background: linear-gradient(180deg, #FFFDF9 0%, #F8F4EA 100%);
  border-top: 1px solid rgba(176, 138, 46, 0.34);
}
.banner__judul {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--emas);
  line-height: 1;
}
.banner__angka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  gap: 0;
}
.banner__butir {
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid rgba(176, 138, 46, 0.24);
}
.banner__butir:first-child {
  padding-left: 0;
  border-left: 0;
}
.banner__butir:last-child {
  padding-right: 0;
}
.banner__angka dt {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B8378;
  line-height: 1.35;
}
.banner__angka dd {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--zamrud-tua);
}
.banner__angka dd span {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A9184;
}
.banner__catatan {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(176, 138, 46, 0.2);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: #7C7469;
}

@media (max-width: 520px) {
  .banner__ket {
    padding: 14px 16px 15px;
    gap: 12px;
  }
  .banner__angka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .banner__butir {
    padding: 0;
    border-left: 0;
  }
  .banner__butir:nth-child(even) {
    border-left: 1px solid rgba(176, 138, 46, 0.24);
    padding-left: 14px;
  }
  .banner__angka dd {
    font-size: 1.4rem;
  }
}

@media (max-width: 360px) {
  .banner__angka {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .banner__butir:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }
}
/* keterangan gambar tetap dua kolom sampai layar sangat sempit */
@media (max-width: 340px) {
  .banner__angka {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .banner__butir:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }
}
/* ====================== keterangan gambar: tetap dua kolom di HP sempit
   Menggantikan aturan satu kolom sebelumnya agar keterangan tidak memanjang.
   ======================================================================== */
@media (max-width: 380px) {
  .banner__angka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .banner__butir {
    padding: 0;
    border-left: 0;
  }
  .banner__butir:nth-child(even) {
    border-left: 1px solid rgba(176, 138, 46, 0.24);
    padding-left: 10px;
  }
  .banner__angka dt {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
  }
  .banner__angka dd {
    font-size: 1.32rem;
  }
}
/* ================================================= animasi premium dan humanis
   Semua gerak memakai lengkung lembut, jarak pendek, dan waktu panjang supaya
   terasa tenang dan mahal. Tidak ada gerak yang berulang mengganggu, dan semua
   dimatikan bila pengunjung memilih kurangi gerak.
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* masuk pertama pada hero, berurutan halus */
  .hero__teks {
    animation: heroMasuk 0.95s cubic-bezier(0.16, 0.84, 0.3, 1) 0.04s both;
  }
  .hero__ajakan {
    animation: heroMasuk 0.95s cubic-bezier(0.16, 0.84, 0.3, 1) 0.18s both;
  }
  .hero__gambar {
    animation: heroGambar 1.1s cubic-bezier(0.16, 0.84, 0.3, 1) 0.1s both;
  }
  .hero__ciri {
    animation: heroMasuk 0.95s cubic-bezier(0.16, 0.84, 0.3, 1) 0.3s both;
  }

  /* muncul saat digulir */
  .akan-muncul {
    opacity: 0;
  }
  .akan-muncul--tampil {
    animation: munculLembut 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  :is(.unggul > li, .kisi > *, .modul__butir, .alur__langkah, .segmen > li, .segera > li).akan-muncul--tampil:nth-child(2) {
    animation-delay: 0.05s;
  }
  :is(.unggul > li, .kisi > *, .modul__butir, .alur__langkah, .segmen > li, .segera > li).akan-muncul--tampil:nth-child(3) {
    animation-delay: 0.1s;
  }
  :is(.unggul > li, .kisi > *, .modul__butir, .alur__langkah, .segmen > li, .segera > li).akan-muncul--tampil:nth-child(4) {
    animation-delay: 0.15s;
  }
  :is(.unggul > li, .kisi > *, .modul__butir, .alur__langkah, .segmen > li, .segera > li).akan-muncul--tampil:nth-child(5) {
    animation-delay: 0.2s;
  }
  :is(.unggul > li, .kisi > *, .modul__butir, .alur__langkah, .segmen > li, .segera > li).akan-muncul--tampil:nth-child(6) {
    animation-delay: 0.25s;
  }

  /* isi modul yang dibuka ikut mengalir masuk */
  .modul__butir[open] > ul,
  .modul__butir[open] > .modul__tanda {
    animation: isiMuncul 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* kilau emas tipis saat tombol utama disentuh */
  .tombol--emas,
  .tombol--hijau {
    position: relative;
    overflow: hidden;
  }
  .tombol--emas::after,
  .tombol--hijau::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
  }
  .tombol--emas:hover::after,
  .tombol--hijau:hover::after {
    animation: kilauLembut 0.9s ease;
  }

  /* kepala menu berubah tenang saat halaman digulir */
  .kepala {
    transition: background 0.45s ease, box-shadow 0.45s ease;
  }
  .kepala--gulir {
    background: linear-gradient(180deg, rgba(252, 250, 244, 0.99), rgba(240, 246, 243, 0.97));
  }

  /* cahaya hijau yang bernapas sangat halus, hanya di layar lebar */
  @media (min-width: 1024px) {
    .hero::after {
      content: "";
      position: absolute;
      inset: -25% -15% auto -15%;
      height: 130%;
      pointer-events: none;
      background: radial-gradient(closest-side, rgba(14, 111, 99, 0.07), transparent 72%);
      animation: napasHalus 22s ease-in-out infinite;
    }
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* gambar banner membesar sangat sedikit saat kursor mendekat */
  .banner__gambar {
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .banner:hover .banner__gambar {
    transform: scale(1.018);
  }
  .pilar-cepat li {
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  }
  .pilar-cepat li:hover {
    transform: translateY(-2px);
    border-color: rgba(176, 138, 46, 0.5);
    box-shadow: 0 8px 18px rgba(27, 35, 33, 0.07);
  }
  .modul__butir {
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.32s ease, border-color 0.32s ease;
  }
  .modul__butir:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(27, 35, 33, 0.07);
  }
  .paket {
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.32s ease;
  }
  .paket:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(27, 35, 33, 0.1);
  }
}

@keyframes heroMasuk {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroGambar {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes munculLembut {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes isiMuncul {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kilauLembut {
  0% {
    opacity: 0;
    left: -70%;
  }
  25% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    left: 125%;
  }
}
@keyframes napasHalus {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate3d(2%, -1.5%, 0) scale(1.06);
    opacity: 1;
  }
}

/* bila pengunjung memilih kurangi gerak, semuanya tampil tenang tanpa animasi */
@media (prefers-reduced-motion: reduce) {
  .akan-muncul {
    opacity: 1;
    transform: none;
  }
  .hero__teks,
  .hero__ajakan,
  .hero__gambar,
  .hero__ciri,
  .akan-muncul--tampil,
  .modul__butir[open] > ul,
  .modul__butir[open] > .modul__tanda {
    animation: none;
  }
}
/* ---------------------------------- rapatkan jeda hero ke bagian kedua (akhir) */
.hero {
  padding-bottom: clamp(26px, 3.2vw, 46px);
}
.hero::before {
  opacity: 0.4;
}
.hero__ciri {
  margin-top: 22px;
}
#pilar {
  padding-top: clamp(32px, 3.8vw, 58px);
}
@media (max-width: 720px) {
  .hero {
    padding-bottom: 30px;
  }
  .hero__ciri {
    margin-top: 18px;
  }
  #pilar {
    padding-top: 34px;
  }
}
/* =============================== animasi mandiri per elemen (lebih hidup)
   Setiap bagian teks bergerak sendiri dengan waktunya masing-masing: judul
   seperti tirai terbuka, kata kunci bergaris emas, keterangan gambar muncul
   satu per satu, angka naik bertahap, dan pill lima pilar bermunculan.
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero__judul {
    animation: judulTirai 1.05s cubic-bezier(0.16, 0.84, 0.3, 1) 0.1s both;
  }
  .hero__judul em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.02em;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--emas), var(--emas-terang), rgba(176, 138, 46, 0));
    transform: scaleX(0);
    transform-origin: left center;
    animation: garisEmas 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s both;
  }
  .hero__ket {
    animation: naikHalus 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.34s both;
  }

  .banner__judul {
    animation: labelMuncul 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
  }
  .banner__butir {
    animation: butirMuncul 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .banner__butir:nth-child(1) { animation-delay: 0.62s; }
  .banner__butir:nth-child(2) { animation-delay: 0.72s; }
  .banner__butir:nth-child(3) { animation-delay: 0.82s; }
  .banner__butir:nth-child(4) { animation-delay: 0.92s; }

  .banner__angka dd {
    animation: nilaiMuncul 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .banner__butir:nth-child(1) dd { animation-delay: 0.7s; }
  .banner__butir:nth-child(2) dd { animation-delay: 0.8s; }
  .banner__butir:nth-child(3) dd { animation-delay: 0.9s; }
  .banner__butir:nth-child(4) dd { animation-delay: 1s; }

  .banner__catatan {
    animation: naikHalus 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 1.12s both;
  }

  .pilar-cepat li {
    animation: pilMuncul 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .pilar-cepat li:nth-child(1) { animation-delay: 0.5s; }
  .pilar-cepat li:nth-child(2) { animation-delay: 0.57s; }
  .pilar-cepat li:nth-child(3) { animation-delay: 0.64s; }
  .pilar-cepat li:nth-child(4) { animation-delay: 0.71s; }
  .pilar-cepat li:nth-child(5) { animation-delay: 0.78s; }
  .pilar-cepat__kaki {
    animation: naikHalus 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.88s both;
  }

  /* kilau cahaya melintas sekali pada gambar banner */
  .banner {
    position: relative;
  }
  .banner::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -45%;
    width: 35%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-16deg);
    opacity: 0;
    animation: kilauBanner 1.5s ease 1.5s both;
  }
}

@keyframes judulTirai {
  from {
    opacity: 0;
    clip-path: inset(0 0 42% 0);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@keyframes garisEmas {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes naikHalus {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes labelMuncul {
  from {
    opacity: 0;
    letter-spacing: 0.38em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.24em;
  }
}
@keyframes butirMuncul {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nilaiMuncul {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pilMuncul {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kilauBanner {
  0% {
    opacity: 0;
    left: -45%;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 118%;
  }
}
/* ==================== keterangan isi konten: versi tahan lama dan profesional
   Tidak lagi memakai jumlah kecil yang mudah berubah. Setiap butir memuat
   keterangan inti dan satu baris penjelas, sehingga tetap relevan saat konten
   terus bertambah.
   ======================================================================== */
.banner__angka {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.banner__butir {
  padding: 0 0 0 13px;
  border-left: 1px solid rgba(176, 138, 46, 0.32);
}
.banner__angka dt {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}
.banner__angka dd {
  margin: 5px 0 0;
  font-size: 1.14rem;
  line-height: 1.2;
  color: var(--zamrud-tua);
}
.banner__nilai {
  display: inline;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.52rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--zamrud-tua);
}
.banner__rinci {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 1.45;
  color: #8B8378;
}

@media (max-width: 380px) {
  .banner__angka {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 0;
  }
  .banner__butir {
    padding-left: 11px;
  }
  .banner__nilai {
    font-size: 1.4rem;
  }
}
/* koreksi kekhususan: aturan lama "dd span" masih lebih kuat, jadi ditimpa */
.banner__angka dd .banner__nilai {
  display: inline;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.52rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  text-transform: none;
  color: var(--zamrud-tua);
}
.banner__angka dd .banner__rinci {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.45;
  text-transform: none;
  color: #8B8378;
}
@media (max-width: 380px) {
  .banner__angka dd .banner__nilai {
    font-size: 1.4rem;
  }
}
/* ------------------------------ kotak konten berisi kata, bukan angka besar */
#konten .kotak-angka strong {
  font-size: clamp(1.12rem, 1.6vw, 1.36rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
#konten .kotak-angka span {
  font-size: 0.86rem;
  line-height: 1.5;
}
#konten .kotak-angka {
  padding: 22px 20px;
  text-align: left;
}
/* =============================== ikon islami pada menu kepala dan ornamen */
.navigasi > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-ikon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--emas);
  transition: color 0.25s ease, transform 0.25s ease;
}
.navigasi > a:hover .nav-ikon {
  color: var(--zamrud);
  transform: translateY(-1px);
}
.navigasi--buka .nav-ikon {
  width: 19px;
  height: 19px;
}

/* garis ornamen penutup bagian hero */
.ornamen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  color: var(--emas);
}
.ornamen__garis {
  flex: 1 1 auto;
  max-width: 170px;
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 138, 46, 0), rgba(176, 138, 46, 0.6));
}
.ornamen__garis--kanan {
  background: linear-gradient(270deg, rgba(176, 138, 46, 0), rgba(176, 138, 46, 0.6));
}
.ornamen__bintang {
  display: grid;
  place-items: center;
  color: var(--emas);
}
.ornamen__bintang svg {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .ornamen__garis {
    animation: ornamenTarik 1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.05s both;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .ornamen__garis--kanan {
    transform-origin: right center;
  }
  .ornamen__bintang {
    animation: naikHalus 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.15s both;
  }
}

@keyframes ornamenTarik {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 980px) {
  .navigasi > a {
    gap: 10px;
  }
  .nav-ikon {
    width: 19px;
    height: 19px;
  }
}
/* ------------------------------------------ koreksi ukuran ikon dan ornamen */
.nav-ikon {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}
.ornamen {
  width: 100%;
  max-width: 430px;
  margin: 24px auto 0;
}
.ornamen__garis {
  max-width: none;
}
@media (max-width: 720px) {
  .ornamen {
    max-width: 300px;
    margin-top: 20px;
  }
  .nav-ikon {
    width: 19px;
    height: 19px;
  }
}
/* ------------------- pastikan keterangan tetap dua kolom pada HP 341-380 px */
@media (min-width: 341px) and (max-width: 380px) {
  .banner__angka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .banner__butir {
    padding: 0;
    border-left: 0;
  }
  .banner__butir:nth-child(even) {
    border-left: 1px solid rgba(176, 138, 46, 0.24);
    padding-left: 10px;
  }
}
/* ================================================ judul hero bergaya mewah
   Baris pembuka kecil berjarak huruf lebar, lalu baris utama dengan huruf
   serif besar. Kata kunci memakai emas bergradasi yang bergerak sangat halus.
   ======================================================================== */
.hero__judul {
  font-size: inherit;
  line-height: 1.1;
  letter-spacing: normal;
}
.hero__judul-atas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(10px, 1.3vw, 16px);
  font-family: var(--sans);
  font-size: clamp(0.74rem, 1vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #97761F;
}
.hero__judul-atas::after {
  content: "";
  flex: 1 1 auto;
  max-width: 140px;
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 138, 46, 0.55), rgba(176, 138, 46, 0));
}
.hero__judul-utama {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.45rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--tinta);
  text-wrap: balance;
}
.hero__judul-utama em {
  font-style: italic;
  color: #A9801F;
  white-space: nowrap;
}
.hero__judul-utama em::after {
  content: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__judul-utama em {
    background-image: linear-gradient(100deg, #8E6A18 0%, #E3C06A 38%, #B98F2C 62%, #8E6A18 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__judul-utama em {
      animation: kilauEmasJudul 11s ease-in-out infinite;
    }
  }
}
@keyframes kilauEmasJudul {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (max-width: 720px) {
  .hero__judul-atas {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    gap: 10px;
    margin-bottom: 10px;
  }
  .hero__judul-atas::after {
    max-width: 80px;
  }
  .hero__judul-utama {
    font-size: clamp(1.85rem, 7.1vw, 2.3rem);
    line-height: 1.14;
  }
}
/* bobot huruf judul: baris utama lebih tenang, kata kunci lebih tegas */
.hero__judul-utama {
  font-weight: 500;
}
.hero__judul-utama em {
  font-weight: 600;
}
/* ================================================== tombol utama bergaya mewah
   Emas dengan sorot cahaya dalam, cincin tipis, dan ikon yang bergeser halus.
   Tombol garis memakai bingkai emas tipis dengan latar gading.
   ======================================================================== */
.tombol {
  position: relative;
  letter-spacing: 0.015em;
}
.tombol--besar {
  min-height: 54px;
  padding: 15px 28px;
  gap: 10px;
  font-size: 0.97rem;
  font-weight: 600;
}
.tombol__ikon {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tombol--emas:hover .tombol__ikon {
  transform: translateX(3px);
}
.tombol--garis:hover .tombol__ikon {
  transform: translateY(2px);
}

.tombol--emas {
  background: linear-gradient(135deg, #F2DA93 0%, #DCB550 42%, #B8912F 100%);
  border: 1px solid rgba(255, 250, 235, 0.5);
  color: #2C2513;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(120, 88, 15, 0.28),
    0 12px 28px rgba(176, 138, 46, 0.28);
}
.tombol--emas:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(120, 88, 15, 0.3),
    0 18px 36px rgba(176, 138, 46, 0.36);
}
.tombol--emas:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 18px rgba(176, 138, 46, 0.24);
}

.tombol--garis {
  background: rgba(255, 253, 247, 0.9);
  border: 1px solid rgba(176, 138, 46, 0.45);
  color: #2A3330;
  box-shadow: 0 8px 22px rgba(27, 35, 33, 0.06);
}
.tombol--garis:hover {
  border-color: var(--emas);
  color: #7A5F16;
  background: #FFFDF7;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(27, 35, 33, 0.1);
}

.tombol--hijau {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 24px rgba(10, 74, 67, 0.22);
}

.hero__aksi {
  gap: 14px;
}

@media (max-width: 720px) {
  .tombol--besar {
    min-height: 52px;
    padding: 14px 22px;
    font-size: 0.94rem;
  }
}
/* ============================================ animasi mandiri tiap kata judul
   Setiap kata naik dan muncul sendiri, kata kunci emas mendapat garis tipis
   yang tumbuh, lalu kilau emas bergerak sangat halus tanpa henti.
   ======================================================================== */
.hero__judul {
  animation: none;
}
.hero__judul-utama .kata {
  display: inline-block;
  margin-right: 0.26em;
}
.hero__judul-utama .kata:last-child {
  margin-right: 0;
}
.hero__judul-utama .kata--emas em {
  position: relative;
}
.hero__judul-utama .kata--emas em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--emas), rgba(176, 138, 46, 0.15));
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__judul-atas {
    animation: naikHalus 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
  }
  .hero__judul-utama .kata {
    animation: kataNaik 0.9s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  }
  .hero__judul-utama .kata:nth-child(1) { animation-delay: 0.2s; }
  .hero__judul-utama .kata:nth-child(2) { animation-delay: 0.32s; }
  .hero__judul-utama .kata:nth-child(3) { animation-delay: 0.44s; }
  .hero__judul-utama .kata:nth-child(4) { animation-delay: 0.56s; }
  .hero__judul-utama .kata:nth-child(5) { animation-delay: 0.68s; }

  .hero__judul-utama .kata--emas em::after {
    animation: garisEmas 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero__judul-utama .kata:nth-child(1) em::after { animation-delay: 0.55s; }
  .hero__judul-utama .kata:nth-child(2) em::after { animation-delay: 0.7s; }
}

@keyframes kataNaik {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  .hero__judul-utama .kata {
    margin-right: 0.2em;
  }
}

/* ===================================== penyempurnaan khusus judul hero
   Hanya menyentuh kata di judul. Tata letak lain tidak diubah.
   ======================================================================== */
.hero__judul-utama .kata {
  display: inline-block;
  margin-right: 0.25em;
}
.hero__judul-utama .kata:last-child {
  margin-right: 0;
}
.hero__judul-utama .kata--emas em {
  font-weight: 600;
  font-style: italic;
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama .kata {
    animation: kataAngkatHalus 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero__judul-utama .kata:nth-child(1) { animation-delay: 0.12s; }
  .hero__judul-utama .kata:nth-child(2) { animation-delay: 0.22s; }
  .hero__judul-utama .kata:nth-child(3) { animation-delay: 0.32s; }
  .hero__judul-utama .kata:nth-child(4) { animation-delay: 0.42s; }
  .hero__judul-utama .kata:nth-child(5) { animation-delay: 0.52s; }

  .hero__judul-utama .kata--emas em {
    animation: kilauSekali 1.6s ease 0.8s both;
  }
  .hero__judul-utama .kata--emas em::after {
    animation: garisEmas 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero__judul-utama .kata:nth-child(1) em::after { animation-delay: 0.55s; }
  .hero__judul-utama .kata:nth-child(2) em::after { animation-delay: 0.65s; }
}

@keyframes kataAngkatHalus {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kilauSekali {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
/* --------------------------- judul: tanpa garis bawah, gerak tirai per kata */
.hero__judul-utama .kata--emas em::after {
  content: none;
}
.hero__judul-utama em {
  font-size: 0.99em;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama .kata {
    animation-name: kataTirai;
    animation-duration: 0.85s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
  }
}

@keyframes kataTirai {
  from {
    opacity: 0;
    transform: translateY(0.42em);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}
/* ===================== judul: timbul dengan pantulan cahaya (tanpa gerak) */
@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama .kata {
    animation-name: kataTimbul;
    animation-duration: 0.75s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
  }
  .hero__judul-utama .kata:nth-child(1) { animation-delay: 0.1s; }
  .hero__judul-utama .kata:nth-child(2) { animation-delay: 0.18s; }
  .hero__judul-utama .kata:nth-child(3) { animation-delay: 0.26s; }
  .hero__judul-utama .kata:nth-child(4) { animation-delay: 0.34s; }
  .hero__judul-utama .kata:nth-child(5) { animation-delay: 0.42s; }

  .hero__judul-utama .kata--emas em {
    animation-name: pantulanEmas;
    animation-duration: 1.6s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-fill-mode: both;
  }
  .hero__judul-utama .kata:nth-child(1) em { animation-delay: 0.3s; }
  .hero__judul-utama .kata:nth-child(2) em { animation-delay: 0.44s; }
}

@keyframes kataTimbul {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pantulanEmas {
  0% { background-position: -140% 50%; }
  100% { background-position: 140% 50%; }
}
/* ================== menu kepala: huruf lebih tegas dan mudah dibaca */
.navigasi {
  font-size: 0.95rem;
  font-weight: 600;
}
.navigasi > a {
  color: #2F3A36;
  letter-spacing: 0.005em;
  padding: 9px 13px;
  line-height: 1.25;
}
.navigasi > a:hover {
  color: var(--zamrud-tua);
  background: rgba(14, 111, 99, 0.09);
}
.nav-ikon {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
  color: #A9801F;
}
.navigasi > a:hover .nav-ikon {
  color: var(--zamrud);
}
@media (max-width: 980px) {
  .navigasi {
    font-size: 0.98rem;
  }
  .navigasi > a {
    padding: 13px 4px;
    color: #22302C;
  }
}
/* ruang sempit 981-1120 px: rapatkan menu agar tidak meluber */
@media (min-width: 981px) and (max-width: 1120px) {
  .navigasi {
    font-size: 0.9rem;
    gap: 2px;
  }
  .navigasi > a {
    padding: 8px 9px;
    gap: 6px;
  }
  .nav-ikon {
    width: 16px;
    height: 16px;
  }
  .navigasi__aksi {
    gap: 8px;
    margin-left: 6px;
  }
  .navigasi__aksi .tombol {
    padding: 9px 14px;
    font-size: 0.86rem;
  }
}
/* cegah teks menu dan tombol kepala terpotong dua baris */
.navigasi > a {
  white-space: nowrap;
}
.navigasi__aksi .tombol {
  white-space: nowrap;
}
/* ================================ pill dibuat ringkas agar tidak makan ruang
   Lencana kecil di atas judul bagian dan lima pill pilar di akhir hero
   diperkecil tanpa mengubah susunan halaman.
   ======================================================================== */
.bagian .lencana {
  padding: 4px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  margin-bottom: 10px;
  line-height: 1.5;
}
.pilar-cepat {
  gap: 6px;
}
.pilar-cepat li {
  padding: 4px 10px;
  font-size: 0.75rem;
  gap: 6px;
  line-height: 1.45;
}
.pilar-cepat li::before {
  width: 6px;
  height: 6px;
}
.pilar-cepat__kaki {
  font-size: 0.78rem;
  line-height: 1.45;
}
.hero__ciri {
  gap: 8px;
}

@media (max-width: 720px) {
  .pilar-cepat li {
    padding: 4px 9px;
    font-size: 0.72rem;
  }
}
/* lencana bagian lebih ringkas lagi, terutama di layar HP */
.bagian .lencana {
  padding: 3px 11px;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .bagian .lencana {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    margin-bottom: 8px;
  }
}
/* ================================ kartu pilar berbentuk lengkung (mihrab)
   Model baru: tanpa kotak kaku. Bagian atas melengkung seperti mihrab, ikon
   emas di puncak lengkungan, judul serif di tengah, dan keterangan ringkas.
   ======================================================================== */
#pilar .kisi--pilar {
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
#pilar .pilar {
  position: relative;
  overflow: hidden;
  padding: 62px 20px 26px;
  border: 0;
  border-radius: 999px 999px 18px 18px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(176, 138, 46, 0.26),
    0 16px 34px rgba(27, 35, 33, 0.06);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s ease;
}
#pilar .pilar::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(176, 138, 46, 0), rgba(176, 138, 46, 0.75), rgba(176, 138, 46, 0));
}
#pilar .pilar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 62%);
  opacity: 0.9;
}
#pilar .pilar:nth-child(1) { background: linear-gradient(180deg, #FFFFFF 0%, var(--t1-bg) 100%); }
#pilar .pilar:nth-child(2) { background: linear-gradient(180deg, #FFFFFF 0%, var(--t2-bg) 100%); }
#pilar .pilar:nth-child(3) { background: linear-gradient(180deg, #FFFFFF 0%, var(--t3-bg) 100%); }
#pilar .pilar:nth-child(4) { background: linear-gradient(180deg, #FFFFFF 0%, var(--t4-bg) 100%); }
#pilar .pilar:nth-child(5) { background: linear-gradient(180deg, #FFFFFF 0%, var(--t5-bg) 100%); }

#pilar .pilar__ikon {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(176, 138, 46, 0.38);
  color: #A9801F;
  z-index: 1;
}
#pilar .pilar__ikon svg {
  width: 22px;
  height: 22px;
  display: block;
}
#pilar .pilar h3 {
  position: relative;
  z-index: 1;
  font-size: 1.32rem;
  margin-bottom: 8px;
}
#pilar .pilar p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.55;
  color: #5C5348;
}
#pilar .pilar:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(176, 138, 46, 0.5),
    0 24px 44px rgba(27, 35, 33, 0.1);
}

@media (max-width: 560px) {
  #pilar .kisi--pilar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #pilar .pilar {
    padding: 54px 14px 20px;
    border-radius: 999px 999px 16px 16px;
  }
  #pilar .pilar h3 {
    font-size: 1.12rem;
  }
  #pilar .pilar p {
    font-size: 0.82rem;
  }
  #pilar .pilar__ikon {
    top: 16px;
    width: 38px;
    height: 38px;
  }
  #pilar .pilar__ikon svg {
    width: 18px;
    height: 18px;
  }
}
/* lima kartu pilar dalam satu baris pada layar lebar */
@media (min-width: 1120px) {
  #pilar .kisi--pilar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 561px) and (max-width: 1119px) {
  #pilar .kisi--pilar {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}
/* kartu kelima di HP diletakkan di tengah agar tidak menggantung */
@media (max-width: 560px) {
  #pilar .pilar:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
    max-width: 260px;
  }
}
/* ============================== kubah berornamen dengan kesan 3 dimensi
   Kubah kecil di puncak lengkungan kartu pilar: cahaya lembut dari kiri atas,
   bayangan di pangkal kubah, ornamen bintang delapan berlapis emas, dan lingkaran
   ikon seperti emblem di puncaknya. Semua dibuat dengan CSS dan SVG, tanpa gambar.
   ======================================================================== */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

#pilar .pilar {
  padding-top: 104px;
}
#pilar .pilar__kubah {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 110% at 72% 0%, var(--kubah-terang) 0%, var(--kubah-gelap) 78%);
  box-shadow:
    inset 0 10px 16px rgba(255, 255, 255, 0.85),
    inset 0 -12px 20px rgba(90, 74, 34, 0.14),
    0 10px 18px rgba(27, 35, 33, 0.07);
}
#pilar .pilar__kubah::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 8%;
  width: 52%;
  height: 46%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  filter: blur(0.4px);
}
#pilar .pilar__kubah::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -14px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(90, 74, 34, 0), rgba(90, 74, 34, 0.13));
  filter: blur(3px);
}
#pilar .pilar__motif {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  opacity: 0.62;
  filter: drop-shadow(0 2px 2px rgba(120, 88, 15, 0.28));
}
#pilar .pilar__ikon {
  top: 17px;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(176, 138, 46, 0.42),
    inset 0 -2px 4px rgba(120, 88, 15, 0.12),
    0 4px 10px rgba(27, 35, 33, 0.12);
}
#pilar .pilar h3,
#pilar .pilar p {
  z-index: 2;
}

#pilar .pilar:nth-child(1) { --kubah-terang: #EAF4EF; --kubah-gelap: #CFE4D9; }
#pilar .pilar:nth-child(2) { --kubah-terang: #FBF2E0; --kubah-gelap: #EBD8B4; }
#pilar .pilar:nth-child(3) { --kubah-terang: #EBF3F5; --kubah-gelap: #CFE1E5; }
#pilar .pilar:nth-child(4) { --kubah-terang: #FCF3E8; --kubah-gelap: #EDDCC2; }
#pilar .pilar:nth-child(5) { --kubah-terang: #F1F5EA; --kubah-gelap: #D9E4C9; }

@media (max-width: 560px) {
  #pilar .pilar {
    padding-top: 88px;
  }
  #pilar .pilar__kubah {
    height: 70px;
  }
  #pilar .pilar__motif {
    top: 32px;
    width: 66px;
    height: 66px;
  }
  #pilar .pilar__ikon {
    top: 13px;
    width: 38px;
    height: 38px;
  }
}
/* kilau dan kedalaman kubah dinaikkan sedikit agar terasa tiga dimensi */
#pilar .pilar__kubah {
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 10px 16px rgba(255, 255, 255, 0.7),
    inset 0 -16px 24px rgba(90, 74, 34, 0.2),
    0 12px 20px rgba(27, 35, 33, 0.08);
}
#pilar .pilar__motif {
  top: 40px;
  width: 94px;
  height: 94px;
  opacity: 0.72;
  filter: drop-shadow(0 3px 3px rgba(120, 88, 15, 0.3));
}
#pilar .pilar__kubah::before {
  left: 14%;
  top: 6%;
  width: 46%;
  height: 40%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
@media (max-width: 560px) {
  #pilar .pilar__motif {
    top: 33px;
    width: 72px;
    height: 72px;
  }
}
/* ===================== lima ornamen kubah berbeda untuk lima kartu pilar
   1 Ilmu        : rusuk kubah (garis memancar)
   2 Ibadah      : lengkung bersusun (tiga lapis)
   3 Umat        : arabesque floral (sulur daun)
   4 Pendidikan  : lengkung mutiara (busur dengan titik emas)
   5 Hiburan     : anyaman mashrabiya (kisi diagonal)
   Semua tanpa bentuk bintang, semuanya CSS dan SVG sebaris.
   ======================================================================== */
#pilar .pilar__kubah--rusuk {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 58%),
    repeating-conic-gradient(from 90deg at 50% 122%,
      rgba(255, 255, 255, 0.6) 0deg 1.1deg,
      rgba(120, 88, 15, 0.13) 1.1deg 2.5deg,
      rgba(255, 255, 255, 0) 2.5deg 9deg),
    radial-gradient(120% 110% at 72% 0%, var(--kubah-terang) 0%, var(--kubah-gelap) 78%);
}

#pilar .pilar__kubah--anyaman {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(45deg, rgba(176, 138, 46, 0.16) 0 1px, rgba(255, 255, 255, 0) 1px 13px),
    repeating-linear-gradient(-45deg, rgba(176, 138, 46, 0.16) 0 1px, rgba(255, 255, 255, 0) 1px 13px),
    radial-gradient(120% 110% at 72% 0%, var(--kubah-terang) 0%, var(--kubah-gelap) 78%);
}

#pilar .pilar__lengkung {
  position: absolute;
  border: 1px solid rgba(176, 138, 46, 0.55);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: 1;
}
#pilar .pilar__lengkung--a { left: 10px; right: 10px; top: 12px; bottom: 0; }
#pilar .pilar__lengkung--b { left: 24px; right: 24px; top: 26px; bottom: 0; opacity: 0.8; }
#pilar .pilar__lengkung--c { left: 38px; right: 38px; top: 40px; bottom: 0; opacity: 0.5; }

#pilar .pilar__sulur {
  position: absolute;
  left: 50%;
  top: 8px;
  height: 74px;
  width: auto;
  transform: translateX(-50%);
  opacity: 0.8;
  filter: drop-shadow(0 2px 2px rgba(120, 88, 15, 0.22));
  z-index: 1;
}

#pilar .pilar__mutiara {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 88%;
  height: auto;
  transform: translateX(-50%);
  opacity: 0.9;
  z-index: 1;
}

#pilar .pilar__ikon {
  z-index: 3;
}

@media (max-width: 560px) {
  #pilar .pilar__sulur {
    top: 6px;
    height: 58px;
  }
  #pilar .pilar__mutiara {
    top: 6px;
    width: 92%;
  }
  #pilar .pilar__lengkung--a { left: 8px; right: 8px; top: 10px; }
  #pilar .pilar__lengkung--b { left: 19px; right: 19px; top: 21px; }
  #pilar .pilar__lengkung--c { left: 30px; right: 30px; top: 32px; }
}
/* perjelas lima ornamen kubah agar mudah dibedakan */
#pilar .pilar__kubah--anyaman {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(45deg, rgba(150, 116, 34, 0.24) 0 1px, rgba(255, 255, 255, 0) 1px 11px),
    repeating-linear-gradient(-45deg, rgba(150, 116, 34, 0.24) 0 1px, rgba(255, 255, 255, 0) 1px 11px),
    radial-gradient(120% 110% at 72% 0%, var(--kubah-terang) 0%, var(--kubah-gelap) 78%);
}
#pilar .pilar__lengkung {
  border-color: rgba(176, 138, 46, 0.78);
  border-width: 1.2px;
}
#pilar .pilar__lengkung--b { opacity: 0.9; }
#pilar .pilar__lengkung--c { opacity: 0.62; }
#pilar .pilar__mutiara {
  top: 10px;
  width: 92%;
}
#pilar .pilar__mutiara path {
  stroke-width: 1.7;
  opacity: 0.75;
}
/* ============ warna khas tiap kubah: lima keluarga warna yang berbeda
   1 hijau zamrud, 2 emas tua, 3 biru teal, 4 rose terracotta, 5 biru malam.
   Dipakai untuk kubah, dasar kartu, judul, dan emblem ikon.
   ======================================================================== */
#pilar .pilar:nth-child(1) {
  --kubah-terang: #DFF0E7;
  --kubah-gelap: #B4DCC8;
  --aksen: #0E6F63;
  --aksen-lembut: #E7F3EC;
}
#pilar .pilar:nth-child(2) {
  --kubah-terang: #F9EAC6;
  --kubah-gelap: #E6CB8A;
  --aksen: #8A6A18;
  --aksen-lembut: #F8EFDD;
}
#pilar .pilar:nth-child(3) {
  --kubah-terang: #DDEDF3;
  --kubah-gelap: #AFD5E2;
  --aksen: #2A6B77;
  --aksen-lembut: #E6F1F5;
}
#pilar .pilar:nth-child(4) {
  --kubah-terang: #FAE7DE;
  --kubah-gelap: #E9C4AF;
  --aksen: #A05B3E;
  --aksen-lembut: #F9ECE4;
}
#pilar .pilar:nth-child(5) {
  --kubah-terang: #E6EAF5;
  --kubah-gelap: #C2CBE6;
  --aksen: #3B4E7E;
  --aksen-lembut: #EBEFF8;
}

#pilar .pilar:nth-child(1),
#pilar .pilar:nth-child(2),
#pilar .pilar:nth-child(3),
#pilar .pilar:nth-child(4),
#pilar .pilar:nth-child(5) {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--aksen-lembut) 100%);
}
#pilar .pilar:nth-child(1) h3,
#pilar .pilar:nth-child(2) h3,
#pilar .pilar:nth-child(3) h3,
#pilar .pilar:nth-child(4) h3,
#pilar .pilar:nth-child(5) h3 {
  color: var(--aksen);
}
#pilar .pilar:nth-child(1) .pilar__ikon,
#pilar .pilar:nth-child(2) .pilar__ikon,
#pilar .pilar:nth-child(3) .pilar__ikon,
#pilar .pilar:nth-child(4) .pilar__ikon,
#pilar .pilar:nth-child(5) .pilar__ikon {
  color: var(--aksen);
}
/* lengkung pada kubah emas dibuat lebih pekat agar tetap terlihat */
#pilar .pilar:nth-child(2) .pilar__lengkung {
  border-color: rgba(120, 88, 15, 0.55);
}
#pilar .pilar:nth-child(5) .pilar__kubah--anyaman {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(45deg, rgba(59, 78, 126, 0.2) 0 1px, rgba(255, 255, 255, 0) 1px 11px),
    repeating-linear-gradient(-45deg, rgba(59, 78, 126, 0.2) 0 1px, rgba(255, 255, 255, 0) 1px 11px),
    radial-gradient(120% 110% at 72% 0%, var(--kubah-terang) 0%, var(--kubah-gelap) 78%);
}
/* =============================== kubah Ibadah: untaian tasbih (dzikir)
   Busur tasbih dengan sebelas butir dan jumbai kecil, mengapit emblem ikon.
   Memberi kesan waktu sholat, adzan, dan dzikir tanpa bentuk bintang.
   ======================================================================== */
#pilar .pilar__kubah--tasbih {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 110% at 72% 0%, var(--kubah-terang) 0%, var(--kubah-gelap) 78%);
}
#pilar .pilar__kubah--tasbih::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 62%;
  height: 46%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 246, 214, 0.85), rgba(255, 246, 214, 0));
  pointer-events: none;
}
#pilar .pilar__tasbih {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 96%;
  height: auto;
  transform: translateX(-50%);
  opacity: 0.92;
  filter: drop-shadow(0 2px 2px rgba(120, 88, 15, 0.22));
  z-index: 1;
}

@media (max-width: 560px) {
  #pilar .pilar__tasbih {
    top: 8px;
    width: 100%;
  }
}
/* tasbih diperbesar sedikit agar butirnya jelas */
#pilar .pilar__tasbih {
  top: 8px;
  width: 90%;
  opacity: 1;
}
#pilar .pilar__tasbih circle {
  r: 3.4;
}
#pilar .pilar__kubah--tasbih::after {
  top: 44%;
  width: 68%;
  height: 52%;
  background: radial-gradient(closest-side, rgba(255, 240, 197, 0.95), rgba(255, 240, 197, 0));
}
@media (max-width: 560px) {
  #pilar .pilar__tasbih {
    top: 6px;
    width: 94%;
  }
}
/* beri ruang agar jumbai tasbih tidak terpotong tepi kubah */
#pilar .pilar__tasbih {
  width: 84%;
}
@media (max-width: 560px) {
  #pilar .pilar__tasbih {
    width: 88%;
  }
}
/* ============== rapatkan jarak antarbagian, terutama di mode web desktop
   Sebelumnya 100 px atas + 100 px bawah sehingga antar-bagian terasa jauh.
   ======================================================================== */
.bagian {
  padding: clamp(32px, 3.2vw, 48px) 0;
}
.hero {
  padding-top: clamp(30px, 3.4vw, 56px);
  padding-bottom: clamp(20px, 2.4vw, 34px);
}
#pilar {
  padding-top: clamp(26px, 2.8vw, 42px);
}
#keunggulan,
#fitur,
#membaca,
#untuk-siapa,
#paket,
#konten,
#segera {
  padding-top: clamp(32px, 3.2vw, 48px);
  padding-bottom: clamp(32px, 3.2vw, 48px);
}
.penutup {
  padding: clamp(40px, 4vw, 58px) 0;
}
.kaki {
  padding-top: clamp(30px, 3.2vw, 44px);
  padding-bottom: 26px;
}

@media (max-width: 720px) {
  .bagian {
    padding: 38px 0;
  }
  .hero {
    padding-top: 20px;
    padding-bottom: 22px;
  }
  #pilar {
    padding-top: 24px;
  }
  .penutup {
    padding: 40px 0;
  }
}
/* ===== desktop: jarak antarbagian dirapatkan lagi menjadi sekitar 64 piksel */
.bagian {
  padding: clamp(22px, 2.2vw, 32px) 0;
}
#keunggulan,
#fitur,
#membaca,
#untuk-siapa,
#paket,
#konten,
#segera {
  padding-top: clamp(22px, 2.2vw, 32px);
  padding-bottom: clamp(22px, 2.2vw, 32px);
}
.hero {
  padding-bottom: clamp(16px, 1.8vw, 24px);
}
#pilar {
  padding-top: clamp(20px, 2vw, 28px);
}
.penutup {
  padding: clamp(34px, 3.4vw, 48px) 0;
}
.kaki {
  padding-top: clamp(26px, 2.8vw, 38px);
}

@media (max-width: 720px) {
  .bagian {
    padding: 30px 0;
  }
  #pilar {
    padding-top: 22px;
  }
  .hero {
    padding-bottom: 18px;
  }
}
/* ============================ label judul tiap bagian dibuat seperti emblem
   Bukan lagi teks kecil polos: kapsul emas dengan butir berlian di depan,
   bingkai tipis, kilau atas, dan bayangan lembut.
   ======================================================================== */
.judul-kecil {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 13px;
  border: 1px solid rgba(176, 138, 46, 0.38);
  border-radius: 999px;
  background: linear-gradient(135deg, #FFFDF7 0%, #F7EFDC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 16px rgba(27, 35, 33, 0.07);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A6A18;
  margin-bottom: 14px;
  line-height: 1.2;
}
.judul-kecil::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  transform: rotate(45deg);
  border-radius: 1px;
  background: linear-gradient(135deg, #F2DA93, #B08A2E);
  box-shadow: 0 1px 2px rgba(120, 88, 15, 0.35);
}
.judul-kecil::after {
  content: "";
  width: 26px;
  height: 1px;
  flex: none;
  margin-left: 2px;
  background: linear-gradient(90deg, rgba(176, 138, 46, 0.55), rgba(176, 138, 46, 0));
}

@media (max-width: 720px) {
  .judul-kecil {
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    padding: 6px 13px 6px 11px;
    gap: 8px;
  }
  .judul-kecil::after {
    width: 18px;
  }
}
/* ===================== ikon berbeda pada setiap label judul bagian
   Berlian pengganti dihapus karena setiap label kini punya ikon sendiri.
   ======================================================================== */
.judul-kecil::before {
  content: none;
}
.judul-kecil {
  padding-left: 12px;
  gap: 8px;
}
.label-ikon {
  width: 14px;
  height: 14px;
  flex: none;
  color: #A9801F;
}

@media (max-width: 720px) {
  .label-ikon {
    width: 13px;
    height: 13px;
  }
  .judul-kecil {
    padding-left: 10px;
    gap: 7px;
  }
}
/* ikon label sedikit lebih tegas agar mudah dikenali */
.label-ikon {
  width: 15px;
  height: 15px;
  stroke-width: 1.6;
}
@media (max-width: 720px) {
  .label-ikon {
    width: 14px;
    height: 14px;
  }
}
/* ---------------------------------------------- ikon Play pada tombol unggah
   Segitiga putar berwarna emas, dan sedikit membesar saat disentuh kursor.
   ======================================================================== */
.tombol__ikon--play {
  width: 17px;
  height: 17px;
  color: #A9801F;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s ease;
}
.tombol--garis:hover .tombol__ikon--play {
  transform: scale(1.12);
  color: #8A6A18;
}
/* ================================ tombol ajakan utama: biru dipadu hijau
   Gradasi biru tua ke hijau zamrud, teks putih, sorot cahaya di dalam,
   bayangan berwarna, dan kilau tipis saat disentuh kursor.
   ======================================================================== */
.tombol--utama {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0B5570 0%, #0E7A74 52%, #0E6F63 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(3, 46, 58, 0.35),
    0 12px 30px rgba(11, 85, 112, 0.32);
  text-shadow: 0 1px 1px rgba(4, 40, 48, 0.25);
}
.tombol--utama:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(3, 46, 58, 0.4),
    0 18px 38px rgba(14, 122, 116, 0.4);
}
.tombol--utama:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 18px rgba(11, 85, 112, 0.28);
}
.tombol--utama::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--utama:hover::after {
    animation: kilauLembut 0.9s ease;
  }
}

/* tombol kedua ikut beraksen biru hijau agar satu keluarga */
.tombol--garis {
  border-color: rgba(11, 85, 112, 0.4);
  color: #0B5570;
}
.tombol--garis:hover {
  border-color: #0E7A74;
  color: #0E6F63;
  background: #F4FAF9;
  transform: translateY(-2px);
}
.tombol__ikon--play {
  color: #0B5570;
}
.tombol--garis:hover .tombol__ikon--play {
  color: #0E6F63;
}
/* ============================ tombol Play Store: hijau, ungu, dan kuning
   Isi tombol bergradasi hijau zamrud ke ungu, dengan garis kuning di kaki
   tombol dan ikon segitiga kuning. Teks putih tetap mudah dibaca.
   ======================================================================== */
.tombol--play {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0E7C55 0%, #2F7C7A 42%, #5B3E9B 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(10, 30, 24, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(20, 12, 44, 0.4),
    0 12px 30px rgba(70, 46, 120, 0.3);
}
.tombol--play::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #F6D06A, #F2C230 55%, #E7A93A);
}
.tombol--play::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.tombol--play:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(20, 12, 44, 0.45),
    0 18px 38px rgba(70, 46, 120, 0.38);
}
.tombol--play .tombol__ikon--play {
  color: #F6D06A;
}
.tombol--play:hover .tombol__ikon--play {
  color: #FFE49A;
  transform: scale(1.12);
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--play:hover::after {
    animation: kilauLembut 0.9s ease;
  }
}
/* ===== tombol Play: tanpa garis, tiga warna dicampur di dalam bentuk kapsul
   Hijau di kiri, ungu di tengah, kuning tua di kanan, dengan lapisan gelap
   tipis di ujung kanan agar teks putih tetap terbaca.
   ======================================================================== */
.tombol--play::before {
  content: none;
}
.tombol--play {
  background:
    linear-gradient(90deg, rgba(14, 10, 5, 0) 72%, rgba(14, 10, 5, 0.2) 100%),
    linear-gradient(104deg, #0E7C55 0%, #2F7C7A 30%, #5B3E9B 68%, #B0811A 100%);
  text-shadow: 0 1px 2px rgba(10, 20, 16, 0.45);
}
.tombol--play:hover {
  background:
    linear-gradient(90deg, rgba(14, 10, 5, 0) 72%, rgba(14, 10, 5, 0.2) 100%),
    linear-gradient(104deg, #108A5E 0%, #348A87 30%, #68489F 68%, #BE8E1F 100%);
}
/* ujung kuning pada tombol Play dibuat sedikit lebih cerah */
.tombol--play {
  background:
    linear-gradient(90deg, rgba(14, 10, 5, 0) 72%, rgba(14, 10, 5, 0.22) 100%),
    linear-gradient(104deg, #0E7C55 0%, #2F7C7A 30%, #5B3E9B 66%, #C79420 100%);
}
.tombol--play:hover {
  background:
    linear-gradient(90deg, rgba(14, 10, 5, 0) 72%, rgba(14, 10, 5, 0.22) 100%),
    linear-gradient(104deg, #108A5E 0%, #348A87 30%, #68489F 66%, #D6A32A 100%);
}
/* hijau pada tombol Play dibuat lebih terang di sisi kiri */
.tombol--play {
  background:
    linear-gradient(90deg, rgba(14, 10, 5, 0) 72%, rgba(14, 10, 5, 0.22) 100%),
    linear-gradient(104deg, #17B97A 0%, #1E9A84 22%, #2F7C7A 40%, #5B3E9B 70%, #C79420 100%);
}
.tombol--play:hover {
  background:
    linear-gradient(90deg, rgba(14, 10, 5, 0) 72%, rgba(14, 10, 5, 0.22) 100%),
    linear-gradient(104deg, #1ED08A 0%, #23A88F 22%, #348A87 40%, #68489F 70%, #D6A32A 100%);
}
/* ===== tombol Play: ketiga warna dibuat terang, teks gelap agar tetap jelas
   Hijau mint, biru-hijau, ungu muda, dan kuning cerah. Teks memakai tinta gelap.
   ======================================================================== */
.tombol--play {
  background: linear-gradient(104deg, #3EDC9B 0%, #2FD0C4 26%, #A98BF7 66%, #FBE05A 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #16211F;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(20, 40, 35, 0.12),
    0 12px 30px rgba(47, 208, 196, 0.32);
}
.tombol--play:hover {
  background: linear-gradient(104deg, #4DE9A9 0%, #3ADCD0 26%, #B79CFA 66%, #FFE96E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(20, 40, 35, 0.14),
    0 18px 38px rgba(47, 208, 196, 0.4);
}
.tombol--play .tombol__ikon--play {
  color: #16211F;
}
.tombol--play:hover .tombol__ikon--play {
  color: #0E1614;
}
/* ===================== tombol Play: kapsul mengkilap dengan teks bergerak
   Isi kapsul dibuat lebih dalam supaya teks putih terbaca, sementara bingkai
   luarnya tetap memakai tiga warna terang: hijau mint, ungu muda, kuning cerah.
   Kilau kaca di bagian atas memberi kesan dua dimensi yang mengilap.
   ======================================================================== */
.tombol--play {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(6, 20, 18, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(104deg, #10886A 0%, #1B7F8E 30%, #5B3E9B 66%, #8E6B10 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 16px rgba(6, 20, 18, 0.22),
    0 12px 30px rgba(20, 60, 70, 0.3);
}
.tombol--play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(104deg, #3EDC9B 0%, #2FD0C4 30%, #A98BF7 66%, #FBE05A 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.tombol--play::after {
  content: none;
}
.tombol--play:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(104deg, #14997A 0%, #218C9C 30%, #6A49A8 66%, #9C7716 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -8px 16px rgba(6, 20, 18, 0.24),
    0 18px 38px rgba(20, 60, 70, 0.36);
}
.tombol--play .tombol__ikon--play {
  color: #FBE05A;
}
.tombol--play:hover .tombol__ikon--play {
  color: #FFF0A6;
}

/* teks berkilau lembut: putih dengan sapuan krem keperakan yang berjalan */
.tombol__teks {
  display: inline-block;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tombol--play .tombol__teks {
    background-image: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 34%, #FFF6C9 50%, #FFFFFF 66%, #FFFFFF 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .tombol--play .tombol__teks {
      animation: kilauTeks 5.5s linear infinite;
    }
  }
}
@keyframes kilauTeks {
  0% { background-position: 135% 0; }
  100% { background-position: -35% 0; }
}
/* ===== tombol Play: kesan tiga dimensi mengilap, tanpa garis bingkai
   Cahaya putih di kiri atas, bagian bawah lebih gelap, dan bayangan jatuh.
   Tiga warna tetap ada: hijau, ungu, kuning, dengan bagian tengah lebih pekat
   agar teks putih tetap terbaca.
   ======================================================================== */
.tombol--play {
  background:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 42%, rgba(6, 26, 22, 0.32) 100%),
    linear-gradient(100deg, #16CE90 0%, #0E9E9A 30%, #7C5FD3 68%, #EFC83F 100%);
  border: 0;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(6, 24, 22, 0.5);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -12px 20px rgba(4, 26, 22, 0.32),
    0 12px 26px rgba(10, 50, 45, 0.32),
    0 2px 0 rgba(6, 26, 22, 0.12);
}
.tombol--play::before {
  content: none;
}
.tombol--play:hover {
  transform: translateY(-2px);
  background:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 42%, rgba(6, 26, 22, 0.34) 100%),
    linear-gradient(100deg, #1EDD9C 0%, #13ABA6 30%, #8A6EE0 68%, #F6D24E 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -12px 20px rgba(4, 26, 22, 0.34),
    0 18px 36px rgba(10, 50, 45, 0.4),
    0 2px 0 rgba(6, 26, 22, 0.14);
}
.tombol--play .tombol__ikon--play {
  color: #FFE98A;
}
.tombol--play:hover .tombol__ikon--play {
  color: #FFF3B8;
}
/* ===== tombol Play: penyempurnaan daya baca teks
   Bagian tengah dibuat lebih pekat (hijau tua, ungu tua) supaya teks putih
   jelas, sementara hijau cerah dan kuning tetap menyala di kedua ujung.
   Kesilauan tiga dimensi tetap dipertahankan (cahaya atas, gelap bawah, bayangan).
   ======================================================================== */
.tombol--play {
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%, rgba(4, 22, 20, 0.34) 100%),
    linear-gradient(100deg, #24DC9D 0%, #0C8074 20%, #0A6A62 40%, #3D2F86 66%, #6D51AC 84%, #F0CA43 100%);
  text-shadow: 0 1px 3px rgba(3, 18, 16, 0.7);
}
.tombol--play:hover {
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 40%, rgba(4, 22, 20, 0.36) 100%),
    linear-gradient(100deg, #2CE9A8 0%, #109083 20%, #0C7A70 40%, #473890 66%, #7A5CBC 84%, #F7D451 100%);
}
.tombol__teks {
  display: inline-block;
  position: relative;
  z-index: 1;
}
/* ===== tombol Play: teks putih tebal dengan bayangan hitam
   Sapuan kilau pada huruf dihentikan karena membuat huruf transparan.
   Kilau dipindah menjadi selarik cahaya yang menyapu permukaan tombol.
   ======================================================================== */
.tombol--play .tombol__teks {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.2px;
  animation: none;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 2px rgba(0, 0, 0, 0.75);
}
.tombol--play .tombol__ikon {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.tombol--play::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -45%;
  width: 26%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(9deg) translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--play::after {
    animation: sapuKilau 4.4s ease-in-out infinite;
  }
}
@keyframes sapuKilau {
  0% { transform: rotate(9deg) translateX(0); }
  55% { transform: rotate(9deg) translateX(540%); }
  100% { transform: rotate(9deg) translateX(540%); }
}
/* ===== penyamaan gaya: tombol Masuk akun ikut tiga dimensi mengilap
   Ketebalan huruf tombol Play diturunkan ke sedang agar tidak berlebihan.
   ======================================================================== */
.tombol--play .tombol__teks {
  font-weight: 600;
}
.tombol--utama {
  position: relative;
  overflow: hidden;
  border: 0;
  color: #FFFFFF;
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%, rgba(3, 22, 28, 0.34) 100%),
    linear-gradient(104deg, #0B5570 0%, #0E7A74 52%, #0E6F63 100%);
  text-shadow: 0 1px 2px rgba(3, 22, 28, 0.5);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -12px 20px rgba(3, 26, 32, 0.34),
    0 12px 26px rgba(11, 85, 112, 0.32),
    0 2px 0 rgba(3, 26, 32, 0.12);
}
.tombol--utama::before {
  content: none;
}
.tombol--utama:hover {
  transform: translateY(-2px);
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 40%, rgba(3, 22, 28, 0.36) 100%),
    linear-gradient(104deg, #0D6B7E 0%, #108C84 52%, #107E70 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.58),
    inset 0 -12px 20px rgba(3, 26, 32, 0.36),
    0 18px 36px rgba(11, 85, 112, 0.4),
    0 2px 0 rgba(3, 26, 32, 0.14);
}
.tombol--utama::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -45%;
  width: 26%;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(9deg) translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--utama::after,
  .tombol--utama:hover::after {
    animation: sapuKilau 4.4s ease-in-out infinite;
  }
}
/* ===== sapuan cahaya: arah gerak lurus mendatar
   Sebelumnya elemen kilau diputar sehingga geraknya menyerong keluar tombol.
   Sekarang kilau memakai lapisan latar penuh dengan posisi latar bergeser,
   bentuk pita tetap miring tetapi geraknya hanya ke samping (rapi).
   ======================================================================== */
.tombol--play::after,
.tombol--utama::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  inset: 0;
  opacity: 1;
  transform: none;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 56%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-position: 0% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--play::after,
  .tombol--utama::after,
  .tombol--play:hover::after,
  .tombol--utama:hover::after {
    animation: sapuLurus 4.6s ease-in-out infinite;
  }
}
@keyframes sapuLurus {
  0% { background-position: 0% 0; }
  70% { background-position: 100% 0; }
  100% { background-position: 100% 0; }
}
/* ===== dua tombol ajakan dengan animasi berbeda
   Tombol Unduh di Google Play: cahaya menyapu ke samping (mendatar).
   Tombol Masuk ke akun: cahaya naik dari bawah ditambah denyut cahaya halus.
   ======================================================================== */
.tombol--utama::after {
  content: none;
}
.tombol--utama::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0) 56%);
  background-repeat: no-repeat;
  background-size: 100% 260%;
  background-position: 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--utama::before {
    animation: cahayaNaik 3.8s linear infinite;
  }
  .tombol--utama {
    animation: denyutHalus 3.8s ease-in-out infinite;
  }
}
@keyframes cahayaNaik {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
@keyframes denyutHalus {
  0%, 100% {
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.5),
      inset 0 -12px 20px rgba(3, 26, 32, 0.34),
      0 12px 26px rgba(11, 85, 112, 0.32);
  }
  50% {
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.5),
      inset 0 -12px 20px rgba(3, 26, 32, 0.34),
      0 12px 26px rgba(11, 85, 112, 0.32),
      0 0 20px 3px rgba(26, 176, 156, 0.34);
  }
}
/* ===== warna pilar: lima warna terang yang berbeda
   Ilmu hijau, Ibadah biru, Umat merah, Pendidikan ungu, Hiburan teal.
   Kubah memakai warna padat, pola tiap kubah dibuat putih agar tetap terlihat,
   dan emblem ikon menjadi lingkaran putih dengan cincin warna kubah.
   ======================================================================== */
#pilar .pilar:nth-child(1) {
  --kubah-padat: #1FBF7A;
  --aksen: #0A6E4A;
  --aksen-lembut: #EAFBF2;
}
#pilar .pilar:nth-child(2) {
  --kubah-padat: #2F8FE6;
  --aksen: #0D4F8C;
  --aksen-lembut: #EAF4FE;
}
#pilar .pilar:nth-child(3) {
  --kubah-padat: #EB5B45;
  --aksen: #9B2C1C;
  --aksen-lembut: #FDEDEA;
}
#pilar .pilar:nth-child(4) {
  --kubah-padat: #8B5CF0;
  --aksen: #47268F;
  --aksen-lembut: #F1ECFE;
}
#pilar .pilar:nth-child(5) {
  --kubah-padat: #12B5B0;
  --aksen: #086A67;
  --aksen-lembut: #E7F9F8;
}

#pilar .pilar__kubah {
  background: var(--kubah-padat);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.38),
    inset 0 -14px 22px rgba(0, 0, 0, 0.12),
    0 12px 20px rgba(27, 35, 33, 0.1);
}
#pilar .pilar__kubah::before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
#pilar .pilar__kubah::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
}
#pilar .pilar__kubah--rusuk {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 58%),
    repeating-conic-gradient(from 90deg at 50% 122%,
      rgba(255, 255, 255, 0.5) 0deg 1.1deg,
      rgba(255, 255, 255, 0.07) 1.1deg 2.5deg,
      rgba(255, 255, 255, 0) 2.5deg 9deg),
    var(--kubah-padat);
}
#pilar .pilar__kubah--tasbih,
#pilar .pilar__kubah--floral,
#pilar .pilar__kubah--mutiara,
#pilar .pilar__kubah--anyaman,
#pilar .pilar:nth-child(5) .pilar__kubah--anyaman {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 58%),
    var(--kubah-padat);
}
#pilar .pilar__kubah--anyaman,
#pilar .pilar:nth-child(5) .pilar__kubah--anyaman {
  background:
    radial-gradient(75% 120% at 32% 8%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 1.2px, rgba(255, 255, 255, 0) 1.2px 12px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 1.2px, rgba(255, 255, 255, 0) 1.2px 12px),
    var(--kubah-padat);
}
#pilar .pilar__lengkung {
  border-color: rgba(255, 255, 255, 0.62);
}
#pilar .pilar__tasbih,
#pilar .pilar__sulur,
#pilar .pilar__mutiara {
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}
#pilar .pilar__ikon {
  background: #FFFFFF;
  color: var(--aksen);
  box-shadow:
    inset 0 0 0 2px var(--kubah-padat),
    0 6px 14px rgba(27, 35, 33, 0.16);
}
#pilar .pilar::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

/* ===== kartu tujuh pembeda: versi naik kelas
   Permukaan putih bersih, pita warna tipis di puncak, lencana nomor berwarna,
   dan angkat lembut saat disentuh kursor. Warna mengikuti enam keluarga tema.
   ======================================================================== */
.unggul li:nth-child(6n+1) { --tema: var(--t1-ak); --tema-muda: var(--t1-bg); }
.unggul li:nth-child(6n+2) { --tema: var(--t2-ak); --tema-muda: var(--t2-bg); }
.unggul li:nth-child(6n+3) { --tema: var(--t3-ak); --tema-muda: var(--t3-bg); }
.unggul li:nth-child(6n+4) { --tema: var(--t4-ak); --tema-muda: var(--t4-bg); }
.unggul li:nth-child(6n+5) { --tema: var(--t5-ak); --tema-muda: var(--t5-bg); }
.unggul li:nth-child(6n)   { --tema: var(--t6-ak); --tema-muda: var(--t6-bg); }

.unggul {
  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.unggul li:nth-child(n) {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  overflow: hidden;
  padding: 24px 22px 22px;
  border: 1px solid rgba(14, 111, 99, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(140% 120% at 100% 0%, var(--tema-muda) 0%, rgba(255, 255, 255, 0) 62%),
    #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(27, 35, 33, 0.07);
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.unggul li:nth-child(n)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tema) 0%, rgba(255, 255, 255, 0) 92%);
  opacity: 0.9;
}
.unggul__nomor {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 14px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1;
  color: #FFFFFF;
  background: var(--tema);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -8px 14px rgba(0, 0, 0, 0.18),
    0 8px 16px rgba(27, 35, 33, 0.16);
}
.unggul h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--tinta);
}
.unggul p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--redup);
}
.unggul li:nth-child(n):hover {
  transform: translateY(-5px);
  border-color: var(--tema);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 34px rgba(27, 35, 33, 0.14);
}
@media (max-width: 720px) {
  .unggul li:nth-child(n):hover {
    transform: none;
  }
}

/* nomor pada lencana harus putih; aturan lama mewarnainya sama dengan warna
   lencana sehingga angka tidak terlihat */
.unggul li:nth-child(n) .unggul__nomor {
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* ===== tujuh pembeda: gaya editorial bergaris rambut
   Mengganti gaya kartu berwarna. Acuan gaya penerbitan profesional: deret
   bertumpuk, garis rambut tipis sebagai pemisah, angka serif besar yang samar,
   tanpa kotak, tanpa bayangan, tanpa lencana warna. Warna hanya muncul halus
   saat disentuh kursor.
   ======================================================================== */
.unggul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  column-gap: clamp(30px, 4.2vw, 60px);
  row-gap: 0;
  margin-top: clamp(28px, 3.6vw, 44px);
  padding: 0;
  border-top: 1px solid rgba(20, 42, 36, 0.16);
}
.unggul li:nth-child(n) {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
  align-items: start;
  overflow: visible;
  padding: 24px 14px 26px 4px;
  border: 0;
  border-bottom: 1px solid rgba(20, 42, 36, 0.12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: background-color 0.28s ease;
}
.unggul li:nth-child(n)::before {
  content: none;
}
.unggul li:nth-child(n) .unggul__nomor {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(120, 104, 74, 0.55);
  text-shadow: none;
  transition: color 0.28s ease;
}
.unggul h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 7px;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--tinta);
  transition: color 0.28s ease;
}
.unggul p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.66;
  color: var(--redup);
}
.unggul li:nth-child(n):hover {
  transform: none;
  border-color: rgba(20, 42, 36, 0.12);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.62);
}
.unggul li:nth-child(n):hover .unggul__nomor {
  color: var(--emas);
}
.unggul li:nth-child(n):hover h3 {
  color: #0B5570;
}
@media (max-width: 720px) {
  .unggul {
    grid-template-columns: minmax(0, 1fr);
  }
  .unggul li:nth-child(n) {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 0 22px;
  }
  .unggul li:nth-child(n) .unggul__nomor {
    font-size: 1.24rem;
  }
}

/* ===== tujuh pembeda: mengikuti gaya visual rujukan (kapsul lembut, kartu
   putih bertepi rambut, bayangan sangat halus, tulisan tebal rapat)
   Rujukan: halaman produk SaaS yang memakai kapsul warna lembut, sudut 18px,
   garis tepi #E9EDF2, dan bayangan panjang tanpa warna.
   ======================================================================== */
#keunggulan .unggul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(26px, 3.4vw, 40px);
  border-top: 0;
}
#keunggulan .unggul li:nth-child(n) {
  display: block;
  padding: 22px 22px 24px;
  border: 1px solid #E9EDF2;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -30px rgba(23, 23, 23, 0.45);
  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
#keunggulan .unggul li:nth-child(n)::before {
  content: none;
}
#keunggulan .unggul li:nth-child(n) .unggul__nomor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-shadow: none;
  box-shadow: none;
  background: #F8D7E2;
  color: #A8244F;
}
#keunggulan .unggul li:nth-child(6n+2) .unggul__nomor { background: #E8E4F9; color: #5B4BA8; }
#keunggulan .unggul li:nth-child(6n+3) .unggul__nomor { background: #E1F3DC; color: #3C7A3A; }
#keunggulan .unggul li:nth-child(6n+4) .unggul__nomor { background: #FCEBCF; color: #8A6A18; }
#keunggulan .unggul li:nth-child(6n+5) .unggul__nomor { background: #E4EFFA; color: #2C5E93; }
#keunggulan .unggul li:nth-child(6n)   .unggul__nomor { background: #EFEAE6; color: #7A6A58; }
#keunggulan .unggul h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #171717;
}
#keunggulan .unggul p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.66;
  color: #5C5C5C;
}
#keunggulan .unggul li:nth-child(n):hover {
  transform: translateY(-3px);
  border-color: #DCE3EA;
  background: #FFFFFF;
  box-shadow: 0 26px 50px -30px rgba(23, 23, 23, 0.5);
}
#keunggulan .unggul li:nth-child(n):hover h3 {
  color: #171717;
}
@media (max-width: 720px) {
  #keunggulan .unggul li:nth-child(n) {
    padding: 20px 20px 22px;
  }
}

/* ===== fitur per modul: versi naik kelas
   Kartu putih sudut 18px bertepi rambut, judul tebal rapat, penanda buka-tutup
   berupa kapsul, butir daftar memakai titik mawar, dan catatan "segera hadir"
   dibuat seperti lencana lembut. Satu bahasa visual dengan kartu pembeda.
   ======================================================================== */
#fitur .modul {
  columns: 330px 3;
  column-gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
#fitur .modul__butir {
  break-inside: avoid;
  margin-bottom: clamp(14px, 1.7vw, 18px);
  border: 1px solid #E9EDF2;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px -24px rgba(23, 23, 23, 0.5);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.26s ease, border-color 0.26s ease;
}
#fitur .modul__butir:hover {
  transform: translateY(-2px);
  border-color: #DCE3EA;
  box-shadow: 0 22px 44px -28px rgba(23, 23, 23, 0.5);
}
#fitur .modul__butir[open] {
  border-color: #DCE3EA;
  box-shadow: 0 24px 48px -30px rgba(23, 23, 23, 0.55);
}
#fitur .modul__butir summary {
  align-items: center;
  gap: 3px 12px;
  padding: 17px 52px 17px 18px;
  border-radius: 18px;
}
#fitur .modul__butir[open] summary {
  border-bottom: 1px solid #EEF1F5;
  border-radius: 18px 18px 0 0;
}
#fitur .modul__butir summary:hover {
  background: rgba(196, 42, 94, 0.035);
}
#fitur .modul__butir summary::after {
  content: "+";
  right: 16px;
  top: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #F8D7E2;
  color: #A8244F;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color 0.24s ease, color 0.24s ease, transform 0.24s ease;
}
#fitur .modul__butir[open] summary::after {
  content: "\2212";
  background: #C42A5E;
  color: #FFFFFF;
}
#fitur .modul__nama {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: #171717;
}
#fitur .modul__ket {
  flex-basis: 100%;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6B7280;
}
#fitur .modul__butir ul {
  padding: 14px 18px 16px;
  list-style: none;
  display: grid;
  gap: 9px;
}
#fitur .modul__butir li {
  position: relative;
  padding-left: 16px;
  font-size: 0.885rem;
  line-height: 1.6;
  color: #4A5257;
}
#fitur .modul__butir li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #C42A5E;
  opacity: 0.55;
}
#fitur .modul__tanda {
  margin: 0 18px 18px;
  padding: 10px 13px;
  border-left: 0;
  border-radius: 12px;
  background: #FDF1F5;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #A8244F;
}

/* ===== pengalaman membaca bertingkat: satu panel lima tahap
   Lima langkah disatukan dalam satu panel putih bertepi rambut, dipisahkan
   garis tegak tipis. Nomor menjadi bulatan mawar lembut. Panel bergaris ini
   lazim dipakai halaman produk untuk menampilkan alur kerja.
   ======================================================================== */
#membaca .alur {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(26px, 3.4vw, 40px);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E9EDF2;
  border-radius: 20px;
  box-shadow: 0 22px 46px -34px rgba(23, 23, 23, 0.5);
}
#membaca .alur__langkah {
  position: relative;
  padding: 26px 20px 28px;
  background: none;
  border: 0;
  border-left: 1px solid #EEF1F5;
  border-radius: 0;
  box-shadow: none;
  transition: background-color 0.26s ease;
}
#membaca .alur__langkah:first-child {
  border-left: 0;
}
#membaca .alur__langkah::before {
  content: none;
}
#membaca .alur__langkah:hover {
  background: #FDF6F9;
}
#membaca .alur__nomor {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 999px;
  background: #F8D7E2;
  color: #A8244F;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: none;
}
#membaca .alur h3 {
  margin-bottom: 7px;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #171717;
}
#membaca .alur p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #5C5C5C;
}
@media (max-width: 1080px) {
  #membaca .alur {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #membaca .alur__langkah {
    border-top: 1px solid #EEF1F5;
    border-left: 1px solid #EEF1F5;
  }
  #membaca .alur__langkah:nth-child(-n+3) {
    border-top: 0;
  }
  #membaca .alur__langkah:nth-child(3n+1) {
    border-left: 0;
  }
}
@media (max-width: 720px) {
  #membaca .alur {
    grid-template-columns: minmax(0, 1fr);
  }
  #membaca .alur__langkah {
    padding: 20px 20px 22px;
    border-left: 0;
  }
  #membaca .alur__langkah:first-child {
    border-top: 0;
  }
}

/* pada tata letak tiga kolom, langkah keempat dilebarkan agar baris terakhir
   penuh dan tidak menyisakan petak kosong */
@media (max-width: 1080px) and (min-width: 721px) {
  #membaca .alur__langkah:nth-child(4) {
    grid-column: span 2;
  }
}
/* ===== kaki halaman: ornamen kisi dan lengkung mihrab, tata letak dirapikan
   Latar gelap ditambah lapisan kisi diagonal emas yang sangat samar, deretan
   lengkung mihrab di tepi atas, dan sorot cahaya lembut. Kolom dipisah garis
   tegak tipis, lalu hak cipta turun ke bilah bawah tersendiri.
   ======================================================================== */
.kaki {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 4.8vw, 60px) 0 0;
  background:
    radial-gradient(120% 90% at 16% 0%, rgba(217, 184, 95, 0.14) 0%, rgba(217, 184, 95, 0) 58%),
    radial-gradient(100% 80% at 100% 100%, rgba(14, 111, 99, 0.28) 0%, rgba(14, 111, 99, 0) 62%),
    var(--gelap);
}
.kaki__ornamen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.kaki__kisi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.13;
}
.kaki__lengkung {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  opacity: 0.42;
}
.kaki__isi,
.kaki__bawah {
  position: relative;
  z-index: 1;
}
.kaki__isi {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(28px, 3.2vw, 40px);
}
.kaki__nav,
.kaki__catatan {
  border-left: 1px solid rgba(251, 249, 245, 0.13);
  padding-left: clamp(16px, 2vw, 28px);
}
.kaki__nav {
  align-content: start;
  gap: 9px 24px;
}
.kaki__nav a {
  text-decoration: none;
}
.kaki__catatan {
  gap: 7px;
  line-height: 1.6;
}
.kaki__bawah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  border-top: 1px solid rgba(251, 249, 245, 0.13);
  padding-top: 16px;
  padding-bottom: 24px;
  font-size: 0.79rem;
  color: rgba(251, 249, 245, 0.46);
}
.kaki__hak,
.kaki__kecil {
  margin: 0;
  color: inherit;
}
@media (max-width: 900px) {
  .kaki__isi {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .kaki__nav,
  .kaki__catatan {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(251, 249, 245, 0.1);
    padding-top: 16px;
  }
  .kaki__lengkung {
    height: 44px;
  }
}

/* tautan kaki disusun dua lajur agar rapi dan tidak berganti-ganti baris */
.kaki__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  align-content: start;
}
.kaki__catatan {
  color: rgba(251, 249, 245, 0.56);
}
@media (max-width: 520px) {
  .kaki__nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
}
/* tautan unduh diberi lebar penuh agar tidak terpotong dua baris */
.kaki__nav a:last-child {
  grid-column: 1 / -1;
}
/* di layar HP tautan tetap dua lajur supaya kaki halaman tidak terlalu tinggi */
@media (max-width: 520px) {
  .kaki__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 18px;
  }
}
/* ===== tombol masuk akun: cahaya menyapu kiri ke kanan, lembut
   Cahaya naik dari bawah dan denyut bayangan dihentikan. Sekarang hanya ada
   satu sapuan cahaya tipis yang bergerak mendatar dengan jeda hening.
   ======================================================================== */
.tombol--utama {
  animation: none;
}
.tombol--utama::before {
  content: none;
}
.tombol--utama::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-position: 0% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tombol--utama::after,
  .tombol--utama:hover::after {
    animation: sapuLembut 6.5s ease-in-out infinite;
  }
}
@keyframes sapuLembut {
  0% { background-position: 0% 0; }
  72% { background-position: 100% 0; }
  100% { background-position: 100% 0; }
}
/* ===== tombol masuk akun: warna dasar sama seperti tombol Google Play,
   tetapi urutan warnanya dibalik (kuning - ungu - ungu tua - hijau tua - mint)
   ======================================================================== */
.tombol--utama {
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%, rgba(4, 22, 20, 0.34) 100%),
    linear-gradient(260deg, #24DC9D 0%, #0C8074 20%, #0A6A62 40%, #3D2F86 66%, #6D51AC 84%, #F0CA43 100%);
  border: 0;
}
.tombol--utama:hover {
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 40%, rgba(4, 22, 20, 0.36) 100%),
    linear-gradient(260deg, #2CE9A8 0%, #109083 20%, #0C7A70 40%, #473890 66%, #7A5CBC 84%, #F7D451 100%);
}
/* arah gradasi dibuat sama dengan tombol Play (100deg) tetapi urutan warnanya
   dibalik, supaya hasilnya tepat cermin dan tidak menyerong */
.tombol--utama {
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%, rgba(4, 22, 20, 0.34) 100%),
    linear-gradient(100deg, #F0CA43 0%, #6D51AC 16%, #3D2F86 34%, #0A6A62 60%, #0C8074 80%, #24DC9D 100%);
}
.tombol--utama:hover {
  background-image:
    radial-gradient(120% 140% at 20% 4%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 40%, rgba(4, 22, 20, 0.36) 100%),
    linear-gradient(100deg, #F7D451 0%, #7A5CBC 16%, #473890 34%, #0C7A70 60%, #109083 80%, #2CE9A8 100%);
}
/* ===== judul utama: Muslim Super APP
   Ditebalkan, huruf dirapatkan sedikit, dan diberi sapuan cahaya yang berjalan
   pelan melintasi tiap kata bergantian. Kata terakhir memakai emas berkilau.
   ======================================================================== */
.hero__judul-utama--super {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.26em;
  margin-top: 0.1em;
}
.hero__judul-utama--super .kata {
  display: inline-block;
}
.hero__judul-utama--super .kata--super {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #10231F;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__judul-utama--super .kata--super {
    background-image: linear-gradient(100deg, #10231F 0%, #10231F 38%, #7FA79A 50%, #10231F 62%, #10231F 100%);
    background-repeat: no-repeat;
    background-size: 320% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .hero__judul-utama--super .kata--super-emas {
    background-image: linear-gradient(100deg, #A6821F 0%, #D9B85F 24%, #F9E9B6 36%, #D9B85F 48%, #A6821F 62%, #A6821F 100%);
    background-size: 300% 100%;
    filter: drop-shadow(0 3px 8px rgba(176, 138, 46, 0.3));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama--super .kata--super {
    animation:
      kataTimbul 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both,
      kilauJudul 7s ease-in-out 1.3s infinite;
  }
  .hero__judul-utama--super .kata--super:nth-child(2) {
    animation-delay: 0.22s, 1.55s;
  }
  .hero__judul-utama--super .kata--super:nth-child(3) {
    animation-delay: 0.34s, 1.8s;
  }
}
@keyframes kilauJudul {
  0% { background-position: 100% 0; }
  58% { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

/* ===== banner hero: ukuran mengalir di semua lebar layar
   Lebar bingkai, tinggi gambar, jarak, dan ukuran angka memakai clamp supaya
   tidak ada ruang kosong besar di bawah gambar pada lebar menengah (mis. 800 px).
   Angka keterangan otomatis empat kolom saat ruang cukup dan dua kolom saat sempit.
   ======================================================================== */
.hero__gambar {
  width: 100%;
  max-width: clamp(300px, 44vw, 560px);
  justify-self: end;
}
.banner {
  width: 100%;
  max-width: none;
}
.banner__gambar {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: clamp(180px, 32vh, 340px);
  object-fit: cover;
  object-position: center 45%;
}
.banner__ket {
  gap: clamp(8px, 1.1vw, 12px);
  padding: clamp(11px, 1.5vw, 16px) clamp(12px, 1.7vw, 18px) clamp(12px, 1.7vw, 16px);
}
.banner__angka {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 16px) clamp(12px, 1.8vw, 20px);
}
.banner__butir {
  padding-left: clamp(9px, 1.2vw, 13px);
}
.banner__angka dt {
  font-size: clamp(0.53rem, 1.05vw, 0.58rem);
}
.banner__angka dd .banner__nilai {
  font-size: clamp(1.22rem, 2.5vw, 1.52rem);
}
.banner__angka dd .banner__rinci {
  font-size: clamp(0.64rem, 1.15vw, 0.7rem);
}
@media (min-width: 721px) {
  .banner__angka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .hero__gambar {
    max-width: min(100%, 640px);
    justify-self: center;
    margin-inline: auto;
  }
}
@media (max-width: 560px) {
  .banner__gambar {
    max-height: clamp(150px, 26vh, 240px);
  }
}

/* jumlah kolom keterangan mengikuti LEBAR BINGKAI, bukan lebar layar,
   supaya tidak menjadi empat lajur sempit di layar besar */
.banner {
  container-type: inline-size;
}
@media (min-width: 721px) {
  .banner__angka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 560px) {
  .banner__angka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ===== blok teks hero: jarak dan ukuran huruf mengalir, tanpa jarak ganda
   Sebelumnya kata judul mendapat jarak dua kali (gap dan margin-right) sehingga
   huruf tampak renggang. Jarak antar kata kini hanya dari gap, paragraf dibatasi
   panjang barisnya agar mudah dibaca, dan semua ukuran memakai clamp.
   ======================================================================== */
.hero__judul-utama--super .kata {
  margin-right: 0;
}
.hero__judul-utama.hero__judul-utama--super {
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
.hero__ket {
  margin-top: clamp(10px, 1.4vw, 16px);
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.15vw, 1.02rem);
  line-height: 1.66;
}
.hero__aksi {
  margin-top: clamp(16px, 2vw, 24px);
}
@media (max-width: 1024px) {
  .hero__judul-utama.hero__judul-utama--super {
    font-size: clamp(1.95rem, 6.2vw, 2.9rem);
  }
  .hero__ket {
    max-width: 62ch;
  }
}
@media (max-width: 560px) {
  .hero__judul-utama.hero__judul-utama--super {
    font-size: clamp(1.85rem, 8.5vw, 2.4rem);
  }
  .hero__ket {
    max-width: none;
  }
}
/* ===== saat gambar berada di atas (<=1024px), blok teks ikut di tengah
   Sebelumnya teks menempel ke kiri sementara gambar di tengah, jadi terlihat
   tidak seimbang.
   ======================================================================== */
@media (max-width: 1024px) {
  .hero__teks {
    text-align: center;
  }
  .hero__judul-atas {
    justify-content: center;
  }
  .hero__judul-atas::after {
    max-width: 72px;
  }
  .hero__judul-utama--super {
    justify-content: center;
  }
  .hero__ket {
    margin-inline: auto;
  }
  .hero__ajakan {
    text-align: center;
  }
  .hero__aksi {
    justify-content: center;
  }
  .hero__ciri {
    align-items: center;
    text-align: center;
  }
}
/* garis hiasan di kanan label kecil disembunyikan saat teks ditengah,
   supaya tulisan benar-benar berada di tengah, bukan tergeser ke kiri */
@media (max-width: 1024px) {
  .hero__judul-atas::after {
    content: none;
  }
}
/* saat gambar di atas, paragraf dan catatan memakai lebar penuh dan ditengah */
@media (max-width: 1024px) {
  .hero__ket {
    max-width: none;
    width: 100%;
  }
  .hero__catatan {
    max-width: none;
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}
/* garis ornamen dipanjangkan ke kanan dan kiri */
.ornamen {
  width: 100%;
  max-width: min(100%, 680px);
  margin-top: clamp(18px, 2.2vw, 26px);
}
.ornamen__garis {
  flex: 1 1 auto;
  max-width: none;
}
@media (max-width: 1024px) {
  .ornamen {
    max-width: min(100%, 620px);
  }
}
@media (max-width: 720px) {
  .ornamen {
    max-width: 100%;
    gap: 12px;
  }
}
/* ===== mode desktop: kartu gambar dilebarkan dan tingginya disamakan
   dengan kolom teks di sebelahnya. Bingkai menjadi kolom lentur: keterangan
   tetap di bawah, gambar mengisi sisa tinggi dan dipotong rapi (cover).
   ======================================================================== */
@media (min-width: 1025px) {
  .hero__isi {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: stretch;
  }
  .hero__teks,
  .hero__ajakan {
    align-self: start;
  }
  .hero__gambar {
    display: flex;
    align-self: stretch;
    justify-self: stretch;
    max-width: none;
    min-height: 0;
  }
  .banner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  .banner__gambar {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 42%;
  }
  .banner__ket {
    flex: 0 0 auto;
  }
}
@container (min-width: 460px) {
  .banner__angka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* gambar tidak lagi menentukan tinggi bingkai, sehingga bingkai tepat setinggi
   kolom teks di sebelahnya; gambar mengisi sisa ruang dan dipotong rapi */
@media (min-width: 1025px) {
  .banner__gambar {
    flex: 1 1 0;
    height: auto;
  }
}
/* keterangan pada bingkai dibuat lebih padat di desktop supaya porsi gambar
   tetap lapang walau tinggi bingkai disamakan dengan kolom teks */
@media (min-width: 1025px) {
  .banner__ket {
    padding: 11px 14px 12px;
    gap: 8px;
  }
  .banner__angka {
    gap: 10px 14px;
  }
  .banner__angka dt {
    font-size: 0.52rem;
    letter-spacing: 0.09em;
    line-height: 1.2;
  }
  .banner__angka dd .banner__nilai {
    font-size: 1.2rem;
    line-height: 1.1;
  }
  .banner__angka dd .banner__rinci {
    margin-top: 4px;
    font-size: 0.63rem;
    line-height: 1.38;
  }
}
/* ===== tagline di bawah hero: dibuat seperti kalimat sampul
   Huruf serif miring, warna tinta lebih pekat agar terbaca, baris seimbang,
   dan ada dua garis emas pendek di kiri kanan sebagai penanda kutipan.
   ======================================================================== */
.pilar-cepat__kaki {
  display: block;
  max-width: 54ch;
  margin: 4px auto 0;
  padding: 0 6px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.004em;
  color: #2B3A35;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.pilar-cepat__kaki::before,
.pilar-cepat__kaki::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 10px;
  vertical-align: 0.24em;
  background: linear-gradient(90deg, rgba(176, 138, 46, 0), var(--emas));
}
.pilar-cepat__kaki::after {
  background: linear-gradient(270deg, rgba(176, 138, 46, 0), var(--emas));
}
@media (max-width: 720px) {
  .pilar-cepat__kaki {
    max-width: 100%;
    font-size: 0.96rem;
    padding: 0;
  }
  .pilar-cepat__kaki::before,
  .pilar-cepat__kaki::after {
    width: 14px;
    margin: 0 7px;
  }
}
/* ===== judul utama: gerak mengombak dari kanan ke kiri
   Tiap kata naik dan turun bergantian. Kata paling kanan memimpin, kata
   berikutnya menyusul, sehingga gelombangnya terlihat berjalan ke kiri.
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama--super .kata--super {
    animation:
      kataTimbul 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both,
      kilauJudul 7s ease-in-out 1.3s infinite,
      ombakKata 4.2s ease-in-out infinite;
    will-change: transform;
  }
  .hero__judul-utama--super .kata--super:nth-child(2) {
    animation-delay: 0.22s, 1.55s, -0.3s;
  }
  .hero__judul-utama--super .kata--super:nth-child(3) {
    animation-delay: 0.34s, 1.8s, -0.6s;
  }
}
@keyframes ombakKata {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-9px);
  }
}
/* jarak fase diperlebar agar gelombangnya jelas terlihat berjalan ke kiri */
@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama--super .kata--super:nth-child(2) {
    animation-delay: 0.22s, 1.55s, -0.62s;
  }
  .hero__judul-utama--super .kata--super:nth-child(3) {
    animation-delay: 0.34s, 1.8s, -1.24s;
  }
}
@keyframes ombakKata {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-11px);
  }
}
/* ===== judul utama: gerak per huruf bergantian, gelombang dari kanan ke kiri
   Huruf dipecah oleh skrip, tiap huruf naik turun dengan fase berbeda sehingga
   puncak gelombang berjalan ke kiri. Warna dibuat padat karena gradasi yang
   menempel pada kata tidak ikut bergerak saat huruf dipindahkan.
   ======================================================================== */
.hero__judul-utama--super .huruf {
  display: inline-block;
}
.hero__judul-utama--super.judul-terpecah .kata--super {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #10231F;
  -webkit-text-fill-color: #10231F;
  filter: none;
  animation-name: kataTimbul;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}
.hero__judul-utama--super.judul-terpecah .kata--super-emas,
.hero__judul-utama--super.judul-terpecah .kata--super-emas .huruf {
  color: #A6821F;
  -webkit-text-fill-color: #A6821F;
  text-shadow: 0 2px 10px rgba(166, 130, 31, 0.24);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__judul-utama--super.judul-terpecah .huruf {
    animation: ombakHuruf 3.4s ease-in-out infinite;
    will-change: transform;
  }
  .hero__judul-utama--super.judul-terpecah .kata--super-emas .huruf {
    animation: ombakHuruf 3.4s ease-in-out infinite, kilauHuruf 3.4s ease-in-out infinite;
  }
}
@keyframes ombakHuruf {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-12px);
  }
}
@keyframes kilauHuruf {
  0%,
  100% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.3);
  }
}
/* ===== nama merek pada kepala halaman: huruf klasik tebal beraksen emas
   Serif klasik dengan ketebalan penuh, jarak huruf lebar, dan gradasi emas
   gelap-terang supaya terasa seperti ukiran huruf lama, bukan teks biasa.
   ======================================================================== */
.merek__nama {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Constantia, Georgia, serif;
  font-size: 1.26rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: #7C5E13;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .merek__nama {
    background-image: linear-gradient(100deg, #6E530F 0%, #A8801E 30%, #E6CE8D 50%, #A8801E 70%, #6E530F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (max-width: 720px) {
  .merek__nama {
    font-size: 1.12rem;
    letter-spacing: 0.04em;
  }
}
/* ===== tombol menu layar kecil: kapsul zamrud tiga dimensi
   Dasar hijau tua dengan sorot cahaya di atas, bayangan dalam di bawah, dan tiga
   garis emas. Saat menu dibuka, garis berubah menjadi tanda silang.
   ======================================================================== */
.kepala__tombol {
  width: 46px;
  height: 46px;
  padding: 12px 10px;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 22% 0%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(160deg, #127E6F 0%, #0B5B52 56%, #07423C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 12px rgba(0, 0, 0, 0.3),
    0 8px 18px rgba(7, 66, 60, 0.26),
    0 2px 0 rgba(7, 66, 60, 0.16);
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.kepala__tombol:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 10px rgba(0, 0, 0, 0.32),
    0 4px 10px rgba(7, 66, 60, 0.24);
}
.kepala__garis {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #F3DFA2 0%, #D9B85F 55%, #B08A2E 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease, width 0.28s ease;
}
.kepala__garis:nth-child(2) {
  width: 68%;
}
.kepala__tombol[aria-expanded="true"] .kepala__garis:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.kepala__tombol[aria-expanded="true"] .kepala__garis:nth-child(2) {
  width: 100%;
  opacity: 0;
}
.kepala__tombol[aria-expanded="true"] .kepala__garis:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
/* gradasi emas pada nama merek dipekatkan agar hurufnya tegas, bukan pucat */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .merek__nama {
    background-image: linear-gradient(100deg, #5E4610 0%, #8A6A18 26%, #C9A445 44%, #8A6A18 64%, #5E4610 100%);
  }
}
.merek__nama {
  font-size: 1.3rem;
  letter-spacing: 0.048em;
}
@media (max-width: 720px) {
  .merek__nama {
    font-size: 1.14rem;
  }
}
/* nama merek memakai hijau tua pekat agar jelas terbaca di kepala halaman */
.merek__nama {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #0A4A43;
  -webkit-text-fill-color: #0A4A43;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* ===== percobaan skala huruf: seluruh teks diperbesar
   Akar ukuran huruf dinaikkan menjadi 112,5 persen (18 px), sehingga semua
   ukuran berbasis rem ikut membesar secara proporsional.
   ======================================================================== */
html {
  font-size: 112.5%;
}
@media (max-width: 420px) {
  html {
    font-size: 106%;
  }
}
/* setelah huruf diperbesar, menu kepala perlu dirapatkan pada lebar menengah
   agar tidak mendorong halaman melebar ke samping */
@media (min-width: 981px) and (max-width: 1260px) {
  .navigasi {
    font-size: 0.84rem;
    gap: 0;
  }
  .navigasi > a {
    padding: 8px 7px;
  }
  .navigasi__aksi {
    gap: 6px;
  }
  .navigasi__aksi .tombol {
    font-size: 0.82rem;
    padding: 9px 13px;
  }
  .nav-ikon {
    width: 16px;
    height: 16px;
  }
}
/* nama merek pada kepala halaman ditulis dengan huruf besar semua */
.merek__nama {
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}
@media (max-width: 720px) {
  .merek__nama {
    font-size: 0.98rem;
    letter-spacing: 0.075em;
  }
}
/* pada lebar 981-1080 menu kepala belum muat setelah huruf diperbesar,
   jadi tombol menu tiga garis dipakai lebih awal */
@media (min-width: 981px) and (max-width: 1080px) {
  .kepala__tombol {
    display: block;
  }
  .navigasi {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px clamp(18px, 4vw, 40px) 20px;
    background: var(--gading);
    border-bottom: 1px solid var(--garis);
    box-shadow: 0 22px 38px rgba(27, 35, 33, 0.12);
    font-size: 0.93rem;
  }
  .navigasi--buka {
    display: flex;
  }
  .navigasi > a {
    padding: 12px 4px;
    border-radius: 8px;
    border-bottom: 1px solid var(--garis);
    color: var(--tinta);
  }
  .navigasi__aksi {
    flex-direction: column;
    align-items: stretch;
    margin: 12px 0 0;
    gap: 10px;
  }
  .navigasi__aksi .tombol {
    width: 100%;
  }
}
/* ===== efek tiga dimensi pada nama merek
   Tiga lapisan bayangan gelap bertingkat membuat huruf tampak menonjol,
   ditambah garis tipis terang di atas dan bayangan lembut di bawah.
   ======================================================================== */
.merek__nama {
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 #0b4f47,
    0 2px 0 #093f39,
    0 3px 0 #07322d,
    0 4px 1px rgba(6, 42, 38, 0.5),
    0 6px 6px rgba(27, 35, 33, 0.22);
}
.merek:hover .merek__nama {
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 #0c5a51,
    0 2px 0 #0a4a43,
    0 3px 0 #083832,
    0 5px 2px rgba(6, 42, 38, 0.5),
    0 9px 10px rgba(27, 35, 33, 0.26);
}
@media (max-width: 720px) {
  .merek__nama {
    text-shadow:
      0 -1px 0 rgba(255, 255, 255, 0.5),
      0 1px 0 #0b4f47,
      0 2px 0 #07322d,
      0 3px 1px rgba(6, 42, 38, 0.45);
  }
}
/* ===== efek tiga dimensi yang lebih jelas pada nama merek
   Bayangan dibuat menyerong ke kanan bawah berlapis lima tingkat, ditambah
   sorot terang di kiri atas dan bayangan lembut di bawah, sehingga huruf
   terlihat punya ketebalan di semua sisi.
   ======================================================================== */
.merek__nama {
  color: #0c5349;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.85),
    -1px 0 0 rgba(255, 255, 255, 0.5),
    1px 1px 0 #0b544b,
    2px 2px 0 #08443c,
    3px 3px 0 #063630,
    4px 4px 0 #052a25,
    5px 5px 2px rgba(4, 33, 29, 0.5),
    6px 8px 12px rgba(27, 35, 33, 0.22);
}
.merek:hover .merek__nama {
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.9),
    -1px 0 0 rgba(255, 255, 255, 0.55),
    1px 1px 0 #0d5f55,
    2px 2px 0 #0a4d45,
    3px 3px 0 #083e37,
    4px 4px 0 #06322d,
    5px 5px 0 #052824,
    6px 6px 3px rgba(4, 33, 29, 0.5),
    8px 11px 16px rgba(27, 35, 33, 0.26);
}
@media (max-width: 720px) {
  .merek__nama {
    text-shadow:
      -1px -1px 0 rgba(255, 255, 255, 0.8),
      1px 1px 0 #0a4d45,
      2px 2px 0 #073b34,
      3px 3px 0 #052a25,
      4px 5px 6px rgba(4, 33, 29, 0.35);
  }
}
/* nama merek kembali datar dua dimensi tanpa bayangan timbul */
.merek__nama,
.merek:hover .merek__nama {
  color: #0A4A43;
  text-shadow: none;
}
/* huruf nama merek ditebalkan sedikit lagi */
.merek__nama {
  font-weight: 800;
  -webkit-text-stroke: 0.3px currentColor;
}
@media (max-width: 720px) {
  .merek__nama {
    -webkit-text-stroke: 0.25px currentColor;
  }
}
/* ===== tombol chat WhatsApp mengapung di kanan bawah
   Label berbentuk kartu krem bertepi emas dengan animasi masuk dan gelembung
   naik turun, tombol bulat hijau WhatsApp dengan cahaya berdenyut di sekeliling.
   Label dapat ditutup sehingga hanya ikon yang tersisa.
   ======================================================================== */
.wa {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.wa__label,
.wa__tombol {
  pointer-events: auto;
}
.wa__label {
  position: relative;
  width: min(278px, calc(100vw - 104px));
  padding: 15px 38px 15px 17px;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFFDF7 0%, #F7EFDD 100%);
  border: 1px solid rgba(176, 138, 46, 0.45);
  box-shadow:
    0 22px 44px -20px rgba(27, 35, 33, 0.5),
    0 2px 6px rgba(27, 35, 33, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform-origin: bottom right;
  animation:
    waMasuk 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s both,
    waApung 5s ease-in-out 1.6s infinite;
}
.wa__label::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--emas-terang), var(--emas), rgba(176, 138, 46, 0));
}
.wa__label::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 20px;
  width: 11px;
  height: 11px;
  background: linear-gradient(160deg, #FFFDF7, #F7EFDD);
  border-right: 1px solid rgba(176, 138, 46, 0.45);
  border-bottom: 1px solid rgba(176, 138, 46, 0.45);
  transform: rotate(-45deg);
}
.wa__judul {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0A4A43;
}
.wa__teks {
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #5C5348;
}
.wa__nomor {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8A6A18;
}
.wa__tutup {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 74, 67, 0.08);
  color: #0A4A43;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.wa__tutup svg {
  width: 11px;
  height: 11px;
}
.wa__tutup:hover {
  background: rgba(10, 74, 67, 0.16);
  transform: rotate(90deg);
}
.wa__tombol {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  color: #FFFFFF;
  background:
    radial-gradient(120% 120% at 28% 6%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(160deg, #2BD46B 0%, #12A150 54%, #0A7A48 100%);
  box-shadow:
    0 16px 30px -12px rgba(9, 90, 60, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.26s ease;
  animation: waApung 4.4s ease-in-out infinite;
}
.wa__tombol svg {
  width: 32px;
  height: 32px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.wa__tombol::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(43, 212, 107, 0.55);
  animation: waDenyut 2.8s ease-out infinite;
  pointer-events: none;
}
.wa__tombol:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 38px -14px rgba(9, 90, 60, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -8px 14px rgba(0, 0, 0, 0.24);
}
.wa--tutup .wa__label {
  display: none;
}
@keyframes waMasuk {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes waApung {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes waDenyut {
  0% {
    transform: scale(0.92);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .wa__label {
    width: min(232px, calc(100vw - 96px));
    padding: 13px 34px 13px 14px;
  }
  .wa__tombol {
    width: 52px;
    height: 52px;
  }
  .wa__tombol svg {
    width: 28px;
    height: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa__label,
  .wa__tombol,
  .wa__tombol::before {
    animation: none;
  }
}
/* rentang 1261-1380 juga perlu menu rapat supaya tidak melimpah */
@media (min-width: 1261px) and (max-width: 1380px) {
  .navigasi {
    font-size: 0.84rem;
    gap: 0;
  }
  .navigasi > a {
    padding: 8px 7px;
  }
  .navigasi__aksi {
    gap: 6px;
  }
  .navigasi__aksi .tombol {
    font-size: 0.82rem;
    padding: 9px 13px;
  }
  .nav-ikon {
    width: 16px;
    height: 16px;
  }
}/* label berhenti mengapung saat disentuh kursor supaya tombol silang mudah ditekan,
   dan nomor telepon tidak lagi ditampilkan */
.wa:hover .wa__label,
.wa:hover .wa__tombol {
  animation-play-state: paused;
}
.wa__label {
  padding-bottom: 15px;
}
/* ===== gaya rujukan diterapkan pada bagian yang belum diubah
   Ciri rujukan: permukaan putih bersih, sudut 18-20px, garis tepi rambut
   #E9EDF2, bayangan panjang tanpa warna, judul tebal rapat tanpa serif,
   uraian abu netral, dan aksen warna pastel lembut pada teks penting.
   Bagian: Untuk siapa, Paket, Konten, Segera hadir.
   ======================================================================== */
.judul-bagian {
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #171717;
}
.ket-bagian {
  color: #5C5C5C;
  max-width: 64ch;
}

/* ------------------------------------------------------------ untuk siapa */
#untuk-siapa .segmen li:nth-child(n) {
  padding: 20px 22px;
  border: 1px solid #E9EDF2;
  border-left: 1px solid #E9EDF2;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -30px rgba(23, 23, 23, 0.45);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
#untuk-siapa .segmen li:nth-child(n):hover {
  transform: translateY(-3px);
  border-color: #DCE3EA;
  box-shadow: 0 26px 50px -30px rgba(23, 23, 23, 0.5);
}
#untuk-siapa .segmen strong {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
  margin-bottom: 6px;
  color: #171717;
}
#untuk-siapa .segmen li:nth-child(6n+1) strong { color: #A8244F; }
#untuk-siapa .segmen li:nth-child(6n+2) strong { color: #5B4BA8; }
#untuk-siapa .segmen li:nth-child(6n+3) strong { color: #2C6B3A; }
#untuk-siapa .segmen li:nth-child(6n+4) strong { color: #8A6A18; }
#untuk-siapa .segmen li:nth-child(6n+5) strong { color: #2C5E93; }
#untuk-siapa .segmen li:nth-child(6n) strong { color: #7A6A58; }
#untuk-siapa .segmen span {
  font-size: 0.87rem;
  line-height: 1.62;
  color: #5C5C5C;
}

/* ----------------------------------------------------------------- paket */
#paket .paket:nth-child(n) {
  padding: 26px 24px 24px;
  border: 1px solid #E9EDF2;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -30px rgba(23, 23, 23, 0.45);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
#paket .paket:nth-child(n):hover {
  transform: translateY(-3px);
  border-color: #DCE3EA;
  box-shadow: 0 26px 50px -30px rgba(23, 23, 23, 0.5);
}
#paket .paket--utama:nth-child(n) {
  border-color: rgba(196, 42, 94, 0.4);
  background:
    radial-gradient(120% 90% at 100% 0%, #FDF1F5 0%, rgba(255, 255, 255, 0) 62%),
    #FFFFFF;
  box-shadow: 0 26px 54px -30px rgba(196, 42, 94, 0.4);
}
#paket .paket__pita {
  background: #C42A5E;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 14px rgba(196, 42, 94, 0.28);
}
#paket .paket h3 {
  font-family: inherit;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #171717;
  margin-bottom: 6px;
}
#paket .paket__ket {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #6B7280;
  margin-bottom: 18px;
}
#paket .paket__daftar {
  font-size: 0.885rem;
  line-height: 1.6;
  color: #4A5257;
}
#paket .paket__daftar li::before {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  transform: none;
  top: 0.62em;
  background: #C42A5E;
  opacity: 0.7;
}
#paket .paket__tanda {
  border-top: 1px solid #EEF1F5;
  font-size: 0.82rem;
  color: #6B7280;
}

/* ----------------------------------------------------------------- konten */
#konten .kotak-angka:nth-child(n) {
  padding: 22px 20px;
  border: 1px solid #E9EDF2;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -30px rgba(23, 23, 23, 0.45);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
#konten .kotak-angka:nth-child(n):hover {
  transform: translateY(-3px);
  border-color: #DCE3EA;
  box-shadow: 0 26px 50px -30px rgba(23, 23, 23, 0.5);
}
#konten .kotak-angka strong {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: #171717;
}
#konten .kotak-angka span {
  color: #5C5C5C;
}

/* ----------------------------------------------------------- segera hadir */
#segera .segera li:nth-child(n) {
  padding: 20px 22px;
  border: 1px solid #E9EDF2;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -30px rgba(23, 23, 23, 0.45);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
#segera .segera li:nth-child(n):hover {
  transform: translateY(-3px);
  border-color: #DCE3EA;
  box-shadow: 0 26px 50px -30px rgba(23, 23, 23, 0.5);
}
#segera .segera strong {
  font-family: inherit;
  font-size: 0.99rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: #171717;
}
#segera .segera li:nth-child(4n+1) strong { color: #A8244F; }
#segera .segera li:nth-child(4n+2) strong { color: #5B4BA8; }
#segera .segera li:nth-child(4n+3) strong { color: #8A6A18; }
#segera .segera li:nth-child(4n+4) strong { color: #2C5E93; }
#segera .segera span {
  font-size: 0.87rem;
  line-height: 1.62;
  color: #5C5C5C;
}
@media (max-width: 720px) {
  #untuk-siapa .segmen li:nth-child(n),
  #segera .segera li:nth-child(n),
  #konten .kotak-angka:nth-child(n) {
    padding: 18px 18px;
  }
}
/* kartu paket disamakan tingginya agar sejajar seperti halaman rujukan */
#paket .kisi {
  align-items: stretch;
}
#paket .paket:nth-child(n) {
  height: 100%;
}/* baris ajakan pada label chat WhatsApp */
.wa__cs {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #C42A5E;
}/* ===== banner hero gaya baru: tanpa garis di tepi dan di atas keterangan
   Bingkai dibuat bersih dengan sudut 20px dan bayangan lembut panjang.
   Pemisah gambar dan keterangan memakai gradasi latar, bukan garis.
   ====================================================================== */
.banner {
  position: relative;
  border: 0;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow:
    0 30px 60px -34px rgba(23, 23, 23, 0.5),
    0 2px 6px rgba(23, 23, 23, 0.05);
}
.banner__ket {
  border-top: 0;
  padding-top: 14px;
  background: linear-gradient(180deg, #FBF9F4 0%, #FFFFFF 100%);
}
.banner__catatan {
  border-top: 0;
  padding-top: 6px;
}
@media (min-width: 1025px) {
  .banner__ket {
    padding-top: 12px;
  }
}/* banner hero dikembalikan seperti semula (perubahan sebelumnya salah sasaran) */
.banner {
  border: 1px solid rgba(176, 138, 46, 0.42);
  background: var(--zamrud-tua);
  box-shadow: 0 22px 50px rgba(27, 35, 33, 0.16);
}
.banner__ket {
  border-top: 1px solid rgba(176, 138, 46, 0.3);
  background: var(--putih);
  padding: 14px 16px 15px;
}
@media (min-width: 1025px) {
  .banner__ket {
    padding: 11px 14px 12px;
  }
}
/* kotak dialog chat WhatsApp: garis emas di puncak dihilangkan */
.wa__label::before {
  content: none;
}/* ===== gelombang pada tombol WhatsApp dibuat lebih terasa
   Dua cincin berlapis keluar bergantian, lebih tebal, disertai cahaya hijau
   dan goyangan halus pada tombolnya.
   ======================================================================== */
.wa__tombol::before,
.wa__tombol::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 2px solid rgba(43, 212, 107, 0.8);
  box-shadow: 0 0 18px rgba(43, 212, 107, 0.45);
  pointer-events: none;
  animation: waDenyut 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.wa__tombol::after {
  animation-delay: 1.3s;
}
.wa__tombol {
  animation: waApung 4.4s ease-in-out infinite, waGetar 5.2s ease-in-out infinite;
}
@keyframes waDenyut {
  0% {
    transform: scale(0.86);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes waGetar {
  0%,
  72%,
  100% {
    rotate: 0deg;
  }
  76% {
    rotate: -3deg;
  }
  80% {
    rotate: 3deg;
  }
  84% {
    rotate: -2deg;
  }
  88% {
    rotate: 1deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa__tombol::before,
  .wa__tombol::after {
    animation: none;
  }
  .wa__tombol {
    animation: none;
  }
}