/* Tema: Adat Jawa — sogan cokelat, emas, motif kawung & gunungan wayang */
:root {
  --bg: #f7efdf;
  --paper: #fffaf0;
  --blush: #efe1c6;
  --pink: #c9a36a;
  --rose: #9c6b3c;
  --deep: #4a2f1b;
  --on-deep: #f6e7c4;
  --ink: #3b2a1c;
  --muted: #7e6a55;
  --gold: #a87a35;
  --line: rgba(74, 47, 27, .16);
  --shadow: 74 47 27;
  --overlay: 40 24 12;
  --frame: #f6e7c4;
  --radius: 14px;
  --kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d9b777' stroke-opacity='.28' stroke-width='1.2'%3E%3Cellipse cx='22' cy='10' rx='6.5' ry='10'/%3E%3Cellipse cx='22' cy='34' rx='6.5' ry='10'/%3E%3Cellipse cx='10' cy='22' rx='10' ry='6.5'/%3E%3Cellipse cx='34' cy='22' rx='10' ry='6.5'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='1.8' fill='%23d9b777' fill-opacity='.45'/%3E%3Ccircle cx='0' cy='0' r='2.4' fill='%23d9b777' fill-opacity='.35'/%3E%3Ccircle cx='44' cy='0' r='2.4' fill='%23d9b777' fill-opacity='.35'/%3E%3Ccircle cx='0' cy='44' r='2.4' fill='%23d9b777' fill-opacity='.35'/%3E%3Ccircle cx='44' cy='44' r='2.4' fill='%23d9b777' fill-opacity='.35'/%3E%3C/svg%3E");
  --cover-bg: radial-gradient(ellipse at 50% 30%, rgba(201, 163, 106, .25), transparent 60%), var(--kawung), linear-gradient(170deg, #5a4127, #2a1c10 60%, #1d140d);
  --cover-ink: #f3dfb2;
  --bank-bg: linear-gradient(135deg, #4a2f1b, #7a5230);
  --dock-bg: rgba(255, 250, 240, .92);
  --script: "Alex Brush", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Mulish", system-ui, sans-serif;
}

.kicker, .sec-title, .event h3 { font-family: "Cinzel", var(--serif); }
.sec-title { font-weight: 500; font-size: 1.75rem; letter-spacing: .05em; }
.event h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: .06em; }
.btn-open { background: linear-gradient(135deg, #e4c47f, #b58a45); color: #2a1c10; }

/* sampul: batik kawung + tepi tumpal emas */
.cover::before, .cover::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; pointer-events: none; opacity: .75;
  background: linear-gradient(135deg, #c9a36a 25%, transparent 25%) 0 0 / 26px 26px, linear-gradient(225deg, #c9a36a 25%, transparent 25%) 0 0 / 26px 26px;
}
.cover::before { top: 0; }
.cover::after { bottom: 0; transform: scaleY(-1); }
.cover-kayon { width: 96px; height: 96px; color: #c9a36a; display: block; margin: 0 auto 8px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)); }
.cover:not([style]) .cover-guest { background: rgba(243, 223, 178, .08); border-color: rgba(243, 223, 178, .35); }
.cover-guest b { color: #f8e8c4; }
.deco { display: none; }

.sec + .sec { border-top: 0; }
.sec + .sec::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 200px; height: 12px; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--pink) 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(225deg, var(--pink) 25%, transparent 25%) 0 0 / 12px 12px;
  opacity: .5;
}
.hero { background: radial-gradient(circle at 50% 0, var(--blush), transparent 60%); }
.opening, .events { background: var(--kawung) center / 44px 44px; }
.closing { background: radial-gradient(circle at 50% 100%, var(--blush), transparent 65%); }

.arch { border-color: #fffaf0; box-shadow: 0 0 0 2px var(--pink), 0 0 0 7px #fffaf0, 0 0 0 8px var(--pink), 0 24px 40px -24px rgb(var(--shadow) / .7); background: #3a2616; border-radius: 110px 110px 12px 12px; }
.arch-orn { color: var(--pink); width: 140px; height: 140px; }
.person-photo { background: #3a2616; box-shadow: 0 0 0 2px var(--pink), 0 0 0 7px var(--bg), 0 0 0 8px var(--pink); border: 0; }
.person-photo svg { color: var(--pink); }
.divider-orn { color: var(--gold); width: 64px; height: 64px; }
.amp { color: var(--gold); }

.event { border: 1px solid rgba(168, 122, 53, .35); position: relative; }
.event::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(168, 122, 53, .3); border-radius: 10px; pointer-events: none; }
.timeline li::before { background: var(--gold); 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: 12%; left: 50%; width: 170px; height: 170px; transform: translateX(-50%); color: #c9a36a; }
  .side-title { color: #f8e8c4; }
  .side .kicker { color: #e4c47f; }
}

/* bunga melati berguguran */
.petals i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #fffdf5 35%, #efe4c8 70%); box-shadow: 0 0 0 1px rgba(201, 163, 106, .3); opacity: .9; }