/* ======================================================================
   1. TOKENS — Simple Timeless Luxury
   ====================================================================== */
:root {
  --ivory: #FDFBF7;
  --obsidian: #121212;
  --charcoal: #1A1818;
  --pearl: #F8FAFC;
  --gold: #D4AF37;
  --gold-2: #E5C158;
  --gold-3: #AA7C11;
  --gold-grad: linear-gradient(135deg, #f3e3b5 0%, #E5C158 25%, #D4AF37 50%, #AA7C11 75%, #E5C158 100%);
  --muted-light: #6E6862;
  --muted-dark: #a19d96;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;
  --page-h: 100vh;
}
@supports (height: 100svh) { :root { --page-h: 100svh; } }

/* ======================================================================
   2. STACKING PAPER ENGINE
   ====================================================================== */
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; font-family: var(--sans); font-weight: 300; background: var(--obsidian); overflow-x: clip; -webkit-font-smoothing: antialiased; }

.stack { position: relative; width: 100%; }
.page {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--page-h);
  overflow: hidden;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, .3);
}
.page:nth-of-type(1) { z-index: 1; box-shadow: none; }
.page:nth-of-type(2) { z-index: 2; }
.page:nth-of-type(3) { z-index: 3; }
.page:nth-of-type(4) { z-index: 4; }
.page:nth-of-type(5) { z-index: 5; }
.page:nth-of-type(6) { z-index: 6; }
.page:nth-of-type(7) { z-index: 7; }

.paper-dark {
  color: var(--pearl);
  background-color: var(--obsidian);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, .09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .01) 0 1px, transparent 1px 3px);
}
.paper-light {
  color: var(--charcoal);
  background-color: var(--ivory);
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, .08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(26, 24, 24, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(26, 24, 24, .014) 0 1px, transparent 1px 3px);
}

.snap-points { position: absolute; inset: 0; pointer-events: none; }
.snap-points span {
  position: absolute; left: 0; width: 1px;
  top: calc(var(--i) * var(--page-h)); height: var(--page-h);
  scroll-snap-align: start; scroll-snap-stop: always;
}

.page-inner {
  position: relative; z-index: 1; height: 100%; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; padding: 4.2rem 1.4rem 4.6rem;
}
.page-inner::-webkit-scrollbar { display: none; }
.page-inner > .content { margin: auto; width: 100%; max-width: 760px; }

.masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between;
  padding: 1.25rem 1.4rem 0; font-size: .56rem; font-weight: 500; letter-spacing: .4em; text-transform: uppercase;
  opacity: .7; pointer-events: none;
}
.masthead::after {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 2.6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}
.folio {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 3; text-align: center;
  font-family: var(--serif); font-style: italic; color: var(--gold); pointer-events: none;
}

/* ======================================================================
   3. TIPOGRAFI & KOMPONEN
   ====================================================================== */
.eyebrow { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .45em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.gold-text { background: var(--gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-sheen 6s ease-in-out infinite alternate; }
@keyframes gold-sheen { to { background-position: 100% 0; } }
.display { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 12vw, 5.4rem); line-height: 1; margin: 0; }
.display em { font-style: italic; }
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 9vw, 3.1rem); line-height: 1.08; margin: 0 0 .5rem; }
.title em { font-style: italic; }
.lede { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; }
.muted-l { color: var(--muted-light); }
.muted-d { color: var(--muted-dark); }
.rule { display: flex; align-items: center; justify-content: center; gap: .9rem; color: var(--gold); margin: 1.4rem auto; }
.rule::before, .rule::after { content: ""; flex: 0 1 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { transform: scaleX(-1); }
.rule i { font-size: .5rem; }

.btn-gold, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem;
  font-family: var(--sans); font-size: .65rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; text-decoration: none; transition: background .3s, color .3s, transform .3s;
}
.btn-gold { border: 0; color: var(--obsidian); background: var(--gold-grad); background-size: 200% 100%; box-shadow: 0 12px 30px -12px rgba(212, 175, 55, .7); }
.btn-gold:hover { color: var(--obsidian); background-position: 100% 0; transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn-ghost:hover { color: var(--obsidian); background: var(--gold); }

/* Hal 1: Monogram */
.monogram-ring { position: relative; width: 110px; height: 110px; margin: 0 auto 1.4rem; display: grid; place-items: center; }
.monogram-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); box-shadow: 0 0 30px rgba(212, 175, 55, .25); }
.monogram-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(212, 175, 55, .45); animation: spin 40s linear infinite; }
.monogram-ring span { font-family: var(--serif); font-size: 2.6rem; font-weight: 300; color: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hal 2: Kue & Profil */
.cake { position: relative; width: min(240px, 65vw); margin: 1.2rem auto .6rem; }
.candles { display: flex; justify-content: center; gap: 24px; height: 86px; }
.candle { position: relative; width: 9px; height: 56px; margin-top: auto; border-radius: 3px 3px 1px 1px; background: repeating-linear-gradient(160deg, #fffaf0 0 5px, #E5C158 5px 7px); }
.candle:nth-child(2) { height: 66px; }
.candle::before { content: ""; position: absolute; left: 50%; top: -7px; width: 1.5px; height: 8px; transform: translateX(-50%); background: #3a3330; }
.flame { position: absolute; left: 50%; bottom: calc(100% + 5px); width: 13px; height: 22px; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 72%, #fff 0 18%, #fde68a 34%, #f59e0b 62%, transparent 72%); filter: drop-shadow(0 0 8px rgba(245, 158, 11, .9)); animation: flicker .16s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: translateX(-50%) scale(.92, 1.08) rotate(2deg); } }
.cake.is-blown .flame { opacity: 0; transform: translateX(-50%) scale(.1); transition: opacity .4s; }

/* Hal 3: Event Detail */
.countdown-row { display: flex; justify-content: center; gap: .8rem; margin: 1.2rem 0; }
.cd-card { min-width: 65px; padding: .6rem .3rem; border: 1px solid rgba(212, 175, 55, .3); background: rgba(0,0,0,.3); text-align: center; }
.cd-num { font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: var(--gold); }
.cd-txt { font-size: .52rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-dark); }
.event-card-lux { border: 1px solid rgba(212, 175, 55, .3); padding: 1.2rem; background: rgba(0,0,0,.3); text-align: left; }
.event-card-lux ul { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .82rem; }
.event-card-lux li { margin-bottom: .4rem; display: flex; align-items: center; gap: .6rem; }
.event-card-lux i { color: var(--gold); }

/* Hal 4: Galeri */
.gallery-grid-lux { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-bottom: 1rem; }
.gallery-grid-lux img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.85); transition: transform .8s; }
.gallery-grid-lux img:hover { transform: scale(1.05); filter: saturate(1.05); }

/* Hal 5: Surat */
.letter-lux { border: 1px solid rgba(212, 175, 55, .35); padding: 1.8rem; background: rgba(0,0,0,.35); text-align: left; font-family: var(--serif); font-size: 1.05rem; line-height: 1.75; }

/* Hal 6: Kado Digital */
.vip-card-lux {
  border: 1px solid var(--gold); padding: 1.2rem 1.4rem; max-width: 380px; margin: 0 auto .8rem; text-align: left;
  background: linear-gradient(135deg, #1f1d1d, #121212); box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.vip-card-lux .b-name { font-family: var(--serif); font-size: 1.35rem; color: var(--gold); }
.vip-card-lux .b-num { font-family: var(--serif); font-size: 1.4rem; letter-spacing: .1em; margin: .6rem 0 .2rem; color: #fff; }
.vip-card-lux .b-holder { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); }

/* Hal 7: RSVP */
.rsvp-box-lux { border: 1px solid var(--rule); padding: 1.2rem; background: rgba(255,255,255,.5); text-align: left; margin-bottom: 1rem; }
.form-control-lux { width: 100%; border: 0; border-bottom: 1px solid rgba(26,24,24,.2); background: transparent; padding: .4rem 0; font-size: .88rem; outline: none; margin-bottom: .8rem; }
.attend-lux { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(26,24,24,.2); margin-bottom: .8rem; }
.attend-lux input { position: absolute; opacity: 0; pointer-events: none; }
.attend-lux label { padding: .45rem; text-align: center; font-size: .62rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.attend-lux label + input + label, .attend-lux input + label ~ label { border-left: 1px solid rgba(26,24,24,.2); }
.attend-lux input:checked + label { background: var(--charcoal); color: var(--ivory); }

/* Pager & Vinyl */
.pager { position: fixed; right: .8rem; top: 50%; z-index: 500; transform: translateY(-50%); display: flex; flex-direction: column; gap: .5rem; }
.pager a { display: block; width: 12px; height: 1px; background: rgba(212,175,55,.35); transition: width .4s, background .4s; }
.pager a.active { width: 24px; background: var(--gold); }
.vinyl { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 500; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid var(--gold); background: var(--obsidian); cursor: pointer; display: grid; place-items: center; }
.toast-x { position: fixed; left: 50%; bottom: 5rem; z-index: 600; padding: .65rem 1.2rem; font-size: .6rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--obsidian); background: var(--gold); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .3s; white-space: nowrap; }
.toast-x.show { opacity: 1; transform: translate(-50%, 0); }

/* ======================================================================
   4. KELAS PENGGANTI STYLE INLINE
   ====================================================================== */
.cover-lux { position: fixed; inset: 0; z-index: 1000; background: var(--obsidian); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: var(--pearl); transition: opacity .8s, visibility .8s; }
.cover-frame { border: 1px solid rgba(212,175,55,.35); padding: 3rem 2rem; max-width: 440px; width: 100%; }
.cover-name { font-size: clamp(2.5rem,10vw,4rem); }
.cover-to { font-size: .85rem; }
.vinyl i { color: var(--gold); }
.sp-0 { --i: 0; } .sp-1 { --i: 1; } .sp-2 { --i: 2; } .sp-3 { --i: 3; }
.sp-4 { --i: 4; } .sp-5 { --i: 5; } .sp-6 { --i: 6; }
.profile-photo { width: 110px; height: 110px; margin: 0 auto .8rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-label { letter-spacing: .2em; text-transform: uppercase; }
.lede-italic { font-style: italic; }
.cake-tier-top { height: 36px; background: #EDE4D8; border-radius: 6px; border: 1px solid #DFD3C3; }
.cake-tier-base { height: 48px; background: #D4B896; border-radius: 8px; border: 1px solid #C8A97E; margin-top: 2px; }
.hb-msg { font-family: var(--serif); font-size: 1.15rem; font-style: italic; }
.event-title-lux { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); margin-bottom: .5rem; }
.rule-letter { margin: .8rem 0; }
.letter-sign { text-align: right; font-style: italic; color: var(--gold); }
.vip-card-lux.alt { background: linear-gradient(135deg, #18213a, #0d1220); }
.btn-copy-rek { font-size: .58rem; }
.btn-copy-addr { font-size: .55rem; }
.feed-lux { max-height: 130px; overflow-y: auto; border-top: 1px solid rgba(212,175,55,.3); border-bottom: 1px solid rgba(212,175,55,.3); text-align: left; padding: .4rem 0; }
.rule-closing { margin: .8rem auto; }
.title-closing { font-size: 1.6rem; }