:root {
    --ink: #101d2b;
    --ink-soft: #1b2d40;
    --blue: #29445c;
    --accent: #c5a46d;
    --accent-light: #e0c99f;
    --paper: #f4f5f6;
    --white: #fff;
    --muted: #aab5bf;
    --body-font: "DM Sans", Arial, sans-serif;
    --heading-font: "Manrope", Arial, sans-serif;
    --content-width: 1040px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body-font); line-height: 1.7; -webkit-font-smoothing: antialiased; }
body.is-locked { height: 100vh; overflow: hidden; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

.cover { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; min-height: 100svh; overflow: hidden; padding: 32px 22px; color: var(--white); background: radial-gradient(ellipse at 50% 40%, #263d52 0%, var(--ink) 65%); text-align: center; opacity: 1; visibility: visible; transition: opacity .8s ease, visibility .8s ease; }
.cover.is-opening { opacity: 0; visibility: hidden; pointer-events: none; }
.cover__grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.cover__content { position: relative; z-index: 1; width: min(100%, 650px); }
.brand-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 28px; border: 1px solid rgba(224,201,159,.75); transform: rotate(45deg); }
.brand-mark span { color: var(--accent-light); font: 700 14px var(--heading-font); letter-spacing: .08em; transform: rotate(-45deg); }
.eyebrow { margin: 0 0 16px; color: var(--accent-light); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.cover h1 { margin: 0; color: var(--white); font: 800 clamp(48px, 10vw, 92px)/.98 var(--heading-font); letter-spacing: .045em; }
.cover h1 span { color: var(--accent-light); }
.cover__rule { width: 64px; height: 2px; margin: 30px auto 22px; background: var(--accent); }
.cover__date { margin: 0; color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.cover__description { margin: 18px 0 30px; color: #c2ccd4; font-size: 14px; line-height: 1.9; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 0 25px; border: 1px solid transparent; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: var(--ink); background: var(--accent-light); border-color: var(--accent-light); }
.button--primary:hover { color: var(--white); background: transparent; }
.button__arrow { font-size: 17px; line-height: 1; }
.cover__footnote { margin: 28px 0 0; color: #82909c; font-size: 9px; font-weight: 700; letter-spacing: .3em; }
.cover__corner { position: absolute; width: 72px; height: 72px; border-color: rgba(197,164,109,.55); border-style: solid; }
.cover__corner--tl { top: 24px; left: 24px; border-width: 1px 0 0 1px; }
.cover__corner--br { right: 24px; bottom: 24px; border-width: 0 1px 1px 0; }

.invitation { opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.invitation.is-visible { opacity: 1; visibility: visible; }
.section { padding: 110px 24px; }
.section__inner { width: min(100%, var(--content-width)); margin: 0 auto; text-align: center; }
.eyebrow--dark { color: #9b7a45; }
.intro { background: var(--paper); }
.intro h2 { margin: 0 0 20px; font: 800 clamp(34px, 6vw, 54px)/1.15 var(--heading-font); letter-spacing: -.04em; }
.intro__lead, .intro__note { max-width: 700px; margin: 0 auto; color: #536170; font-size: 15px; }
.date-panel { display: flex; flex-direction: column; align-items: center; width: min(100%, 260px); margin: 36px auto; padding: 25px 20px; border-top: 1px solid #c6a875; border-bottom: 1px solid #c6a875; }
.date-panel__day, .date-panel__month { color: #8c7046; font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.date-panel strong { color: var(--ink); font: 800 76px/.98 var(--heading-font); }
.intro__note { font-size: 14px; }

.details { color: var(--white); background: var(--ink); }
.details .eyebrow { color: var(--accent-light); }
.section-title { max-width: 700px; margin: 0 auto 42px; font: 800 clamp(30px, 5vw, 46px)/1.2 var(--heading-font); letter-spacing: -.035em; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.info-card { position: relative; min-height: 190px; padding: 28px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.035); }
.info-card__number { position: absolute; top: 23px; right: 25px; color: rgba(224,201,159,.55); font: 700 13px var(--heading-font); }
.info-card__label { margin: 0 0 12px; color: var(--accent-light); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.info-card h3 { margin: 0 0 8px; color: var(--white); font: 700 21px/1.35 var(--heading-font); }
.info-card p:not(.info-card__label) { margin: 0; color: #aeb9c3; font-size: 13px; }
.info-card--wide { grid-column: 1 / -1; min-height: 220px; }
.info-card .button { margin-top: 22px; }
.button--outline { color: var(--accent-light); border-color: rgba(224,201,159,.65); background: transparent; }
.button--outline:hover { color: var(--ink); background: var(--accent-light); }
.is-disabled { opacity: .45; cursor: not-allowed; }

.notice { background: #e9edf0; }
.notice__inner { max-width: 800px; }
.notice .eyebrow { color: #987746; }
.notice .section-title { margin-bottom: 22px; }
.notice__text { max-width: 720px; margin: 0 auto; color: #566575; font-size: 15px; }
.notice__highlight { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 650px; margin: 34px auto 0; padding: 18px 22px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.7); color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; }
.notice__icon { color: #9b7a45; font-size: 25px; }

.thanks { display: grid; place-items: center; min-height: 420px; padding: 90px 24px; color: var(--white); background: linear-gradient(135deg, #1b3044, #0d1824); text-align: center; }
.thanks__content { max-width: 700px; }
.thanks h2 { margin: 0 0 20px; font: 800 clamp(34px, 6vw, 58px)/1.12 var(--heading-font); }
.thanks h2 span { color: var(--accent-light); }
.thanks p:not(.eyebrow) { color: #bdc7cf; font-size: 14px; }
.thanks__line { width: 50px; height: 1px; margin: 30px auto 18px; background: var(--accent); }
.thanks small { color: #9ba8b3; font-size: 9px; font-weight: 700; letter-spacing: .2em; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Cover image: satu-satunya gambar pada undangan, mudah diganti dengan foto asli. */
.cover__photo {
    display: block;
    width: min(100%, 440px);
    aspect-ratio: 16 / 9;
    margin: 0 auto 26px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(224, 201, 159, .65);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.cover__team {
    margin: 16px 0 0;
    color: #cbd4dc;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .2em;
}
.cover__team strong {
    color: var(--accent-light);
    font-size: 15px;
    letter-spacing: .16em;
}