@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Reem+Kufi:wght@500&display=swap");

/* Al-Hadi — komponen. Semua warna, ruang, radius, bayang & masa dari tokens.json (var). */

:root {
  --ah-corak-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 150 150%22 width=%22150%22 height=%22150%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.5%22%3E%3Crect x=%2230%22 y=%2230%22 width=%2290%22 height=%2290%22/%3E%3Cpath d=%22M75 10L140 75L75 140L10 75Z%22/%3E%3Crect x=%22-45%22 y=%22-45%22 width=%2290%22 height=%2290%22/%3E%3Cpath d=%22M0 -65L65 0L0 65L-65 0Z%22/%3E%3Crect x=%22105%22 y=%22-45%22 width=%2290%22 height=%2290%22/%3E%3Cpath d=%22M150 -65L215 0L150 65L85 0Z%22/%3E%3Crect x=%22-45%22 y=%22105%22 width=%2290%22 height=%2290%22/%3E%3Cpath d=%22M0 85L65 150L0 215L-65 150Z%22/%3E%3Crect x=%22105%22 y=%22105%22 width=%2290%22 height=%2290%22/%3E%3Cpath d=%22M150 85L215 150L150 215L85 150Z%22/%3E%3C/g%3E%3C/svg%3E");
  --ah-bintang: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210.5 10.5 27 27%22 width=%2227%22 height=%2227%22%3E%3Cpolygon fill=%22%23000%22 points=%2224.00,11.00 27.81,14.81 33.19,14.81 33.19,20.19 37.00,24.00 33.19,27.81 33.19,33.19 27.81,33.19 24.00,37.00 20.19,33.19 14.81,33.19 14.81,27.81 11.00,24.00 14.81,20.19 14.81,14.81 20.19,14.81%22/%3E%3C/svg%3E");
  --ah-gerbang: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 125%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 125V44C0 22 22 8 50 0C78 8 100 22 100 44V125Z%22 fill=%22%23000%22/%3E%3C/svg%3E");
}

/* ---------- Asas ---------- */
.ah-page { margin: 0; background: var(--kertas-50); color: var(--dakwat); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.ah-malam { background: var(--malam); color: var(--teks-malam); }
.ah-serif { font-family: var(--font-serif); }
.ah-bintang-ikon { display: inline-block; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ah-bintang) center / contain no-repeat; mask: var(--ah-bintang) center / contain no-repeat; flex: none; }

/* ---------- Butang ---------- */
.ah-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--ruang-2); min-height: 48px; padding: 0 var(--ruang-8); border-radius: var(--radius-pil); border: 1.5px solid transparent; font: 700 15px/20px var(--font-sans); letter-spacing: 0.04em; text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box;
  transition: background-color var(--dur-cepat) var(--ease-keluar), color var(--dur-cepat) var(--ease-keluar), border-color var(--dur-cepat) var(--ease-keluar), box-shadow var(--dur-sederhana) var(--ease-keluar), transform var(--dur-sederhana) var(--ease-keluar); }
.ah-btn svg { width: 18px; height: 18px; flex: none; }
.ah-btn--utama { background: var(--emas); color: var(--on-emas); box-shadow: var(--bayang-lembut); }
.ah-btn--kedua { background: transparent; color: var(--dakwat); border-color: var(--garis-kuat); }
.ah-btn--malam { background: var(--emas-terang); color: var(--malam); }
.ah-btn--garis-malam { background: transparent; color: var(--teks-malam); border-color: var(--teks-malam-lembut); }
.ah-btn--penuh { width: 100%; }
.ah-btn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.ah-malam .ah-btn:focus-visible { outline-color: var(--fokus-malam); }
.ah-btn[disabled], .ah-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ah-btn-pautan { color: var(--emas); font-weight: 700; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-sederhana) var(--ease-keluar); }
.ah-btn-pautan:hover { background-size: 100% 1.5px; }
.ah-btn-pautan:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .ah-btn--utama::after, .ah-btn--malam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 236, 0.45) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
  .ah-btn--utama:hover::after, .ah-btn--malam:hover::after { transform: translateX(120%); transition: transform var(--dur-perlahan) var(--ease-keluar); }
  .ah-btn--utama:hover, .ah-btn--malam:hover { transform: translateY(-2px); box-shadow: var(--bayang-angkat); }
  .ah-btn:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-cepat); }
}
.ah-btn--kedua:hover { border-color: var(--emas); color: var(--emas); }
.ah-btn--garis-malam:hover { border-color: var(--emas-terang); color: var(--emas-terang); }

/* ---------- Lencana ---------- */
.ah-lencana { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pil); font: 700 12px/16px var(--font-sans); letter-spacing: 0.06em; background: var(--emas-pucat); color: var(--dakwat); white-space: nowrap; }
.ah-lencana--pekat { background: var(--emas); color: var(--on-emas); }
.ah-lencana--zamrud { background: var(--zamrud-pucat); color: var(--dakwat); }
.ah-lencana--zamrud::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--zamrud); }
.ah-lencana--malam { background: transparent; color: var(--emas-terang); box-shadow: inset 0 0 0 1px var(--emas-terang); }
.ah-lencana--segi { border-radius: var(--radius-sm); }

/* ---------- Tajuk seksyen ---------- */
.ah-tajuk { max-width: 720px; }
.ah-tajuk--tengah { margin-inline: auto; text-align: center; }
.ah-eyebrow { display: inline-flex; align-items: center; gap: var(--ruang-2); margin: 0 0 var(--ruang-3); font: 700 12px/16px var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas); }
.ah-malam .ah-eyebrow { color: var(--emas-terang); }
.ah-h2 { margin: 0; font: 600 52px/58px var(--font-serif); color: var(--dakwat); text-wrap: balance; }
.ah-malam .ah-h2 { color: var(--teks-malam); }
.ah-h2 em { font-style: italic; font-weight: 600; color: var(--emas); }
.ah-malam .ah-h2 em { color: var(--emas-terang); }
.ah-hiasan { display: flex; align-items: center; gap: var(--ruang-2); width: 120px; margin: var(--ruang-6) 0; color: var(--emas-terang); }
.ah-tajuk--tengah .ah-hiasan { margin-inline: auto; }
.ah-hiasan::before, .ah-hiasan::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.ah-lead { margin: 0; font-size: 19px; line-height: 30px; color: var(--dakwat-lembut); max-width: 60ch; }
.ah-tajuk--tengah .ah-lead { margin-inline: auto; }
.ah-malam .ah-lead { color: var(--teks-malam-lembut); }
@media (max-width: 640px) { .ah-h2 { font-size: 36px; line-height: 42px; } .ah-lead { font-size: 17px; line-height: 28px; } }

/* ---------- Kad pakej ---------- */
.ah-pakej { position: relative; display: flex; flex-direction: column; gap: var(--ruang-6); padding: var(--ruang-8); border-radius: var(--radius-lg); background: var(--kad); border: 1px solid var(--garis); box-shadow: var(--bayang-lembut); color: var(--dakwat); transition: transform var(--dur-sederhana) var(--ease-keluar), box-shadow var(--dur-sederhana) var(--ease-keluar); }
.ah-pakej__atas { display: flex; flex-direction: column; gap: var(--ruang-2); }
.ah-pakej__nama { margin: 0; font: 600 32px/38px var(--font-serif); }
.ah-pakej__meta { margin: 0; font-size: 14px; line-height: 22px; color: var(--dakwat-lembut); }
.ah-pakej__harga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--ruang-2); padding-block: var(--ruang-6); border-block: 1px solid var(--garis); }
.ah-pakej__asal { width: 100%; font-size: 14px; line-height: 20px; color: var(--dakwat-lembut); }
.ah-pakej__asal s { text-decoration-thickness: 1.5px; }
.ah-pakej__rm { font: 600 40px/44px var(--font-serif); font-variant-numeric: lining-nums; color: var(--dakwat); }
.ah-pakej__per { font-size: 15px; color: var(--dakwat-lembut); margin-right: auto; }
.ah-pakej__ciri { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruang-3); flex: 1; }
.ah-pakej__ciri li { display: grid; grid-template-columns: 20px 1fr; gap: var(--ruang-3); font-size: 15px; line-height: 22px; }
.ah-pakej__ciri li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--zamrud-pucat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%231e6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ah-pakej__pita { align-self: flex-start; margin-bottom: calc(-1 * var(--ruang-2)); }
.ah-pakej--syor { background: var(--malam); border-color: var(--garis-malam); color: var(--teks-malam); box-shadow: var(--cahaya-emas); }
.ah-pakej--syor .ah-pakej__meta, .ah-pakej--syor .ah-pakej__asal, .ah-pakej--syor .ah-pakej__per { color: var(--teks-malam-lembut); }
.ah-pakej--syor .ah-pakej__rm { color: var(--emas-terang); }
.ah-pakej--syor .ah-pakej__harga { border-color: var(--garis-malam); }
.ah-pakej--syor .ah-pakej__ciri li::before { background: var(--malam-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23e6c47e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ah-pakej--syor .ah-btn:focus-visible { outline-color: var(--fokus-malam); }
@media (prefers-reduced-motion: no-preference) {
  .ah-pakej:hover { transform: translateY(-6px); box-shadow: var(--bayang-angkat); }
  .ah-pakej--syor:hover { box-shadow: var(--cahaya-emas), var(--bayang-angkat); }
}

/* ---------- Kad testimoni ---------- */
.ah-testimoni { position: relative; display: flex; flex-direction: column; gap: var(--ruang-4); padding: var(--ruang-8) var(--ruang-6) var(--ruang-6); border-radius: var(--radius-md); background: var(--kad); border: 1px solid var(--garis); box-shadow: var(--bayang-lembut); }
.ah-testimoni::before { content: "\201C"; position: absolute; top: 4px; right: var(--ruang-6); font: 600 72px/1 var(--font-serif); color: var(--emas-terang); opacity: .55; }
.ah-testimoni__bintang { display: flex; gap: 3px; color: var(--emas); }
.ah-testimoni__bintang i { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ah-bintang) center / contain no-repeat; mask: var(--ah-bintang) center / contain no-repeat; }
.ah-testimoni__teks { margin: 0; font-size: 16px; line-height: 26px; color: var(--dakwat); flex: 1; }
.ah-testimoni__siapa { display: flex; align-items: center; gap: var(--ruang-3); padding-top: var(--ruang-4); border-top: 1px solid var(--garis); }
.ah-testimoni__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--emas-pucat); color: var(--dakwat); font: 600 18px/1 var(--font-serif); flex: none; }
.ah-testimoni__nama { margin: 0; font-weight: 700; font-size: 15px; line-height: 20px; }
.ah-testimoni__lokasi { margin: 0; font-size: 13px; line-height: 18px; color: var(--dakwat-lembut); }

/* ---------- Langkah daftar ---------- */
.ah-langkah { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ruang-6); counter-reset: langkah; }
.ah-langkah li { position: relative; padding-top: 72px; counter-increment: langkah; }
.ah-langkah li::before { content: counter(langkah); position: absolute; top: 0; left: 0; width: 56px; height: 56px; display: grid; place-items: center; font: 600 28px/1 var(--font-serif); font-variant-numeric: lining-nums; color: var(--emas); background: var(--kad); border: 1.5px solid var(--emas-terang); border-radius: 50%; z-index: 1; }
.ah-langkah li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 64px; right: calc(-1 * var(--ruang-6) + 8px); border-top: 1.5px dashed var(--garis-kuat); }
.ah-langkah h3 { margin: 0 0 var(--ruang-2); font: 700 18px/24px var(--font-sans); color: var(--dakwat); }
.ah-langkah p { margin: 0; font-size: 15px; line-height: 24px; color: var(--dakwat-lembut); }
@media (max-width: 640px) { .ah-langkah li::after { display: none; } }

/* ---------- Blok ayat ---------- */
.ah-ayat { text-align: center; padding: var(--ruang-12) var(--ruang-6); }
.ah-ayat__arab { margin: 0; font: 400 48px/1.9 var(--font-arab); color: var(--dakwat); }
.ah-malam .ah-ayat__arab { color: var(--teks-malam); }
.ah-ayat__maksud { margin: var(--ruang-4) auto 0; max-width: 48ch; font: italic 500 22px/34px var(--font-serif); color: var(--dakwat-lembut); }
.ah-malam .ah-ayat__maksud { color: var(--teks-malam-lembut); }
.ah-ayat__rujukan { margin-top: var(--ruang-4); font: 700 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--emas); }
.ah-malam .ah-ayat__rujukan { color: var(--emas-terang); }
.ah-ayat .ah-hiasan { margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
  .ah-ayat.is-visible .ah-ayat__arab { animation: ah-tulis-rtl var(--dur-nafas) var(--ease-lembut) both; }
  .ah-ayat.is-visible .ah-ayat__maksud { animation: ah-naik var(--dur-perlahan) var(--ease-keluar) both; animation-delay: var(--dur-perlahan); }
}
@keyframes ah-tulis-rtl { from { clip-path: inset(0 0 0 100%); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (max-width: 640px) { .ah-ayat__arab { font-size: 32px; } .ah-ayat__maksud { font-size: 19px; line-height: 30px; } }

/* ---------- Bingkai mihrab ---------- */
.ah-mihrab { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; isolation: isolate; }
.ah-mihrab::before { content: ""; position: absolute; inset: 0; transform: translate(var(--ruang-6), var(--ruang-6)); background: var(--emas-pucat); -webkit-mask: var(--ah-gerbang) 0 0 / 100% 100% no-repeat; mask: var(--ah-gerbang) 0 0 / 100% 100% no-repeat; z-index: -1; }
.ah-mihrab__gambar { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--ah-gerbang) 0 0 / 100% 100% no-repeat; mask: var(--ah-gerbang) 0 0 / 100% 100% no-repeat; background: var(--kertas-200); }
.ah-mihrab__gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-mihrab__lencana { position: absolute; left: calc(-1 * var(--ruang-6)); bottom: var(--ruang-12); display: flex; align-items: center; gap: var(--ruang-3); padding: var(--ruang-3) var(--ruang-4); background: var(--kad); border: 1px solid var(--garis); border-radius: var(--radius-md); box-shadow: var(--bayang-angkat); font-size: 14px; line-height: 20px; }
.ah-mihrab__lencana strong { display: block; font: 600 24px/28px var(--font-serif); font-variant-numeric: lining-nums; color: var(--emas); }
@media (prefers-reduced-motion: no-preference) {
  .ah-mihrab.is-visible .ah-mihrab__gambar img { animation: ah-zum var(--dur-nafas) var(--ease-keluar) both; }
  .ah-mihrab.is-visible::before { animation: ah-anjak var(--dur-nafas) var(--ease-keluar) both; }
  .ah-mihrab__lencana { animation: ah-apung 6s var(--ease-lembut) infinite alternate; }
}
@keyframes ah-zum { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ah-anjak { from { transform: translate(0, 0); opacity: 0; } to { transform: translate(var(--ruang-6), var(--ruang-6)); opacity: 1; } }
@keyframes ah-apung { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ---------- Corak geometri ---------- */
.ah-corak { position: relative; isolation: isolate; overflow: hidden; }
.ah-corak::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--emas-terang); opacity: .22; -webkit-mask: var(--ah-corak-tile) 0 0 / 150px 150px repeat; mask: var(--ah-corak-tile) 0 0 / 150px 150px repeat; pointer-events: none; }
.ah-corak--pudar::before { -webkit-mask: var(--ah-corak-tile) 0 0 / 150px 150px repeat, radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-composite: source-in; mask: var(--ah-corak-tile) 0 0 / 150px 150px repeat, radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-composite: intersect; }
.ah-corak--kecil::before { -webkit-mask-size: 96px 96px; mask-size: 96px 96px; }
.ah-corak--besar::before { -webkit-mask-size: 225px 225px; mask-size: 225px 225px; }
.ah-malam.ah-corak::before { opacity: .14; }
@media (prefers-reduced-motion: no-preference) {
  .ah-corak--hidup::before { animation: ah-hanyut 90s linear infinite; }
  .ah-corak--hidup.ah-corak--pudar::before { animation-name: ah-hanyut-pudar; }
}
@keyframes ah-hanyut { to { -webkit-mask-position: 150px 150px; mask-position: 150px 150px; } }
@keyframes ah-hanyut-pudar { to { -webkit-mask-position: 150px 150px, 0 0; mask-position: 150px 150px, 0 0; } }

/* ---------- Medan borang ---------- */
.ah-medan { display: grid; gap: 6px; }
.ah-medan label { font: 700 14px/20px var(--font-sans); color: var(--dakwat); }
.ah-medan label .wajib { color: var(--bahaya); margin-left: 2px; }
.ah-input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px var(--ruang-4); border-radius: var(--radius-sm); border: 1.5px solid var(--garis-kuat); background: var(--kad); color: var(--dakwat); font: 400 16px/22px var(--font-sans); transition: border-color var(--dur-cepat) var(--ease-keluar), box-shadow var(--dur-cepat) var(--ease-keluar); }
.ah-input::placeholder { color: var(--dakwat-lembut); opacity: .8; }
.ah-input:hover { border-color: var(--emas); }
.ah-input:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px var(--kad), 0 0 0 5px var(--fokus); }
textarea.ah-input { min-height: 112px; resize: vertical; }
.ah-medan__bantu { margin: 0; font-size: 13px; line-height: 18px; color: var(--dakwat-lembut); }
.ah-medan--ralat .ah-input { border-color: var(--bahaya); }
.ah-medan--ralat .ah-medan__bantu { color: var(--bahaya); font-weight: 700; }
.ah-medan--jaya .ah-input { border-color: var(--jaya); }
.ah-medan--jaya .ah-medan__bantu { color: var(--jaya); font-weight: 700; }

/* ---------- Susun atur (utiliti) ---------- */
.ah-bekas { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--ruang-6); box-sizing: border-box; }
.ah-seksyen { padding-block: var(--ruang-24); }
.ah-seksyen--alt { background: var(--kertas-100); }
.ah-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ruang-6); align-items: stretch; }
.ah-tajuk + * { margin-top: var(--ruang-12); }
@media (max-width: 960px) { .ah-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ah-bekas { padding-inline: var(--ruang-4); } .ah-seksyen { padding-block: var(--ruang-16); } .ah-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Reveal ketika skrol (utiliti) ---------- */
/* Keadaan akhir = lalai. Animasi hanya bila pelayar sokong & pengguna tak minta kurang gerakan. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ah-reveal { animation: ah-naik linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
  @supports not (animation-timeline: view()) {
    .js .ah-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-perlahan) var(--ease-keluar), transform var(--dur-perlahan) var(--ease-keluar); transition-delay: calc(var(--i, 0) * var(--stagger)); }
    .js .ah-reveal.is-visible { opacity: 1; transform: none; }
  }
}
@keyframes ah-naik { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }