/* Tema: Nur Islami — hijau zamrud, emas, pola bintang segi delapan */
:root {
  --bg: #f8f6ef;
  --paper: #ffffff;
  --blush: #e5efe9;
  --pink: #cdb57a;
  --rose: #2f7a64;
  --deep: #0f4d3f;
  --on-deep: #f7ecd0;
  --ink: #1f332c;
  --muted: #6b7a73;
  --gold: #b18a3b;
  --line: rgba(15, 77, 63, .14);
  --shadow: 15 77 63;
  --overlay: 5 30 24;
  --frame: #ffffff;
  --radius: 18px;
  --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e9cf8a' stroke-opacity='.22' stroke-width='1'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28H11M45 28H56M28 0V11M28 45V56'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='56' cy='0' r='8'/%3E%3Ccircle cx='0' cy='56' r='8'/%3E%3Ccircle cx='56' cy='56' r='8'/%3E%3C/g%3E%3C/svg%3E");
  --cover-bg: radial-gradient(ellipse at 50% 35%, rgba(233, 207, 138, .2), transparent 60%), var(--girih), linear-gradient(170deg, #135646, #0b3a30 55%, #062a22);
  --cover-ink: #f1dca0;
  --bank-bg: linear-gradient(135deg, #0f4d3f, #1f6b56 60%, #2f7a64);
  --dock-bg: rgba(255, 255, 255, .92);
  --script: "Parisienne", cursive;
  --serif: "Marcellus", Georgia, serif;
  --sans: "Nunito Sans", system-ui, sans-serif;
}

.sec-title { font-weight: 400; letter-spacing: .02em; }
.event h3 { font-weight: 400; }
.person-full { font-weight: 400; }
blockquote p { font-family: "Amiri", var(--serif); font-size: 1.1rem; }
.btn-open { background: linear-gradient(135deg, #f1dca0, #c9a55a); color: #0b3a30; }

.bismillah { font-family: "Amiri", serif; font-size: 1.7rem; line-height: 1.8; color: var(--gold); margin-bottom: 4px; }
.cover .bismillah { color: #f1dca0; font-size: 1.55rem; margin-bottom: 18px; }
.salam { font-family: var(--serif); font-size: 1.05rem; color: var(--deep); margin-bottom: 22px; }

/* sampul: lengkung mihrab */
.cover::before {
  content: ""; position: absolute; inset: 22px 18px; border: 1.5px solid rgba(241, 220, 160, .55); border-radius: 50% 50% 14px 14px / 28% 28% 14px 14px; pointer-events: none;
}
.cover::after {
  content: ""; position: absolute; inset: 30px 26px; border: 1px solid rgba(241, 220, 160, .22); border-radius: 50% 50% 10px 10px / 27% 27% 10px 10px; pointer-events: none;
}
.cover-inner { padding-top: 40px; }
.cover:not([style]) .cover-guest { background: rgba(241, 220, 160, .08); border-color: rgba(241, 220, 160, .35); }
.cover-guest b { color: #fbeecb; }
.deco { color: #e9cf8a; opacity: .18; width: 120px; height: 120px; }
.deco-tl { top: auto; bottom: 40px; left: -30px; }
.deco-br { bottom: 40px; right: -30px; }

.sec + .sec { border-top: 0; }
.sec + .sec::before { content: ""; position: absolute; top: 0; left: 50%; width: 160px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero { background: radial-gradient(circle at 50% 0, var(--blush), transparent 60%); }
.opening { background: radial-gradient(circle at 50% 0, rgba(177, 138, 59, .08), transparent 70%); }

.arch { border-radius: 50% 50% 10px 10px / 36% 36% 10px 10px; border-color: #fff; box-shadow: 0 0 0 2px var(--pink), 0 24px 40px -24px rgb(var(--shadow) / .6); background: var(--deep); }
.arch-orn { color: var(--pink); width: 110px; height: 110px; }
.person-photo { background: var(--deep); box-shadow: 0 0 0 2px var(--pink), 0 18px 30px -18px rgb(var(--shadow) / .6); }
.person-photo svg { color: var(--pink); width: 70px; }
.divider-orn { color: var(--gold); width: 40px; height: 40px; }
.amp { color: var(--gold); }

.event { border-top: 3px solid var(--gold); }
.timeline li::before { background: var(--gold); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 4px var(--blush); }
.dock a.active { background: var(--deep); color: var(--on-deep); }

@media (min-width: 900px) {
  .side { background: linear-gradient(transparent 40%, rgb(var(--overlay) / .75)), var(--cover-img, var(--cover-bg)) center / cover no-repeat; }
  .side:not([style]) { place-items: center; text-align: center; }
  .side:not([style]) .side-orn { display: block; position: absolute; top: 14%; left: 50%; width: 110px; height: 110px; transform: translateX(-50%); color: #e9cf8a; opacity: .85; }
  .side-title { color: #fbeecb; }
  .side .kicker { color: #f1dca0; }
}

/* bintang kecil berkelip turun */
.petals i { width: 9px; height: 9px; border-radius: 0; background: #d9b764; opacity: .75; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* angka Marcellus: 0 mirip huruf O — pakai huruf sans untuk tanggal & angka */
.cover-date, .hero-date, .side-date, .countdown b, .event-date b, .rsvp-stats b { font-family: var(--sans); font-weight: 600; }
.cover-date, .hero-date { font-weight: 400; letter-spacing: .08em; }
.event-date b { font-size: 2.6rem; font-weight: 400; }
.deco { display: none; }