/* Tema: Royal 3D (premium) — gading & rose gold, cincin 3D berputar di latar */
:root {
  --bg: #fbf7f1;
  --paper: #ffffff;
  --blush: #f5e8da;
  --pink: #e2c4a2;
  --rose: #c08a6a;
  --deep: #5b3a4a;
  --on-deep: #ffffff;
  --ink: #3f2d35;
  --muted: #8b7a80;
  --gold: #b98a5e;
  --line: rgba(91, 58, 74, .12);
  --shadow: 91 58 74;
  --overlay: 40 22 30;
  --frame: #ffffff;
  --radius: 24px;
  --cover-bg: transparent;
  --cover-ink: #5b3a4a;
  --bank-bg: linear-gradient(135deg, #5b3a4a, #8a5a66 55%, #c08a6a);
  --dock-bg: rgba(255, 255, 255, .86);
  --script: "Allura", cursive;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}

body { background: radial-gradient(ellipse at 50% 20%, #fffdf9, #f6ebdd 70%, #ecd9c3) fixed; }

/* kanvas di paling belakang; sampul & panel samping dibuat tembus pandang supaya cincin terlihat */
.r3d, .r3d-fallback { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity 1.2s ease; }
.r3d-fallback { background: radial-gradient(circle at 50% 30%, rgba(226, 196, 162, .7), transparent 40%); }
.r3d-ready .r3d-fallback { opacity: 0; }
.layout { position: relative; z-index: 1; }
body:not(.is-open) .layout, body:not(.is-open) .dock { visibility: hidden; }
body.is-open .r3d { opacity: .4; }
@media (min-width: 900px) { body.is-open .r3d { opacity: 1; } }

.cover, .cover:not([style]) { background: transparent; color: var(--cover-ink); place-items: end center; padding-bottom: max(8vh, 40px); }
.cover-title { font-size: clamp(3.4rem, 15vw, 5rem); text-shadow: 0 2px 18px rgba(255, 255, 255, .9); }
.cover-guest, .cover:not([style]) .cover-guest { background: rgba(255, 255, 255, .55); border-color: rgba(185, 138, 94, .35); }
.cover .kicker { color: var(--gold); }
.btn-open, .btn-main { background: linear-gradient(135deg, #6d4556, #5b3a4a 50%, #8a5a66); }
.deco { display: none; }

.content { background: rgba(251, 247, 241, .9); }
.sec-title { font-weight: 500; font-style: italic; }
.event h3, .person-full { font-weight: 500; }
.hero { background: radial-gradient(circle at 50% 0, rgba(245, 232, 218, .9), transparent 60%); }
.arch { border-color: #fff; box-shadow: 0 0 0 1px var(--pink), 0 30px 50px -28px rgb(var(--shadow) / .7); background: linear-gradient(160deg, #fff, var(--blush)); }
.arch-orn, .person-photo svg, .divider-orn { color: var(--gold); }
.arch-orn { width: 100px; }
.person-photo { background: linear-gradient(160deg, #fff, var(--blush)); }
.person-photo svg { width: 64px; }
.divider-orn { width: 36px; height: 36px; }
.event, .countdown div, .rsvp-stats div, .wish-form, .wish { background: rgba(255, 255, 255, .8); }
.event { box-shadow: 0 24px 40px -30px rgb(var(--shadow) / .55), inset 0 1px 0 #fff; }
.timeline li::before { background: linear-gradient(135deg, #f0cf8a, #c08a6a); }
.chip { background: linear-gradient(135deg, #f7e0b6, #d8a57a); }

@media (min-width: 900px) {
  .side, .side[style] { background: transparent; color: var(--deep); place-items: end center; text-align: center; padding-bottom: 9vh; }
  .side-title { color: var(--deep); text-shadow: 0 2px 18px rgba(255, 255, 255, .9); }
  .side .kicker { color: var(--gold); }
  .content { background: rgba(251, 247, 241, .94); }
}

.petals i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff 20%, #f0cf8a 60%, transparent 70%); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .r3d { transition: none; } }
@media (min-width: 900px) { .cover-inner { max-width: 640px; } }