/* Struktur dasar yang diwarisi semua template. Warna & font hanya lewat token. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);line-height:1.6;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
main{max-width:40rem;margin:0 auto;padding:0 1rem}

.sec{padding:4rem 0;text-align:center}
.sec__title{font-size:clamp(2rem,8vw,2.75rem);color:var(--color-primary)}
.eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}

.btn{display:inline-block;border:0;border-radius:999px;padding:.75rem 1.75rem;background:var(--color-primary);color:var(--color-bg);font:inherit;cursor:pointer;text-decoration:none}
.btn--ghost{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);margin-top:.5rem}
.btn:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}

/* Gate "Buka Undangan": hanya aktif jika JS jalan, supaya konten tetap terbaca tanpa JS. */
.gate{display:none}
.js .gate{display:grid;place-items:center;position:fixed;inset:0;z-index:10;background:var(--color-bg);padding:1rem;text-align:center;transition:opacity .6s,visibility .6s}
.js.is-open .gate{opacity:0;visibility:hidden}
.js:not(.is-open) body{overflow:hidden}
.gate__guest{font-size:1.4rem;font-weight:600}
.gate__title{font-size:clamp(2.2rem,10vw,3.5rem);color:var(--color-primary)}

.lang{position:fixed;top:.75rem;right:.75rem;z-index:5;display:flex;gap:.25rem}
.lang a{padding:.2rem .6rem;border-radius:999px;font-size:.8rem;text-transform:uppercase;color:var(--color-text);text-decoration:none;background:color-mix(in srgb,var(--color-bg) 85%,transparent)}
.lang a[aria-current]{background:var(--color-primary);color:var(--color-bg)}

.persons{display:grid;gap:1rem;justify-items:center}
.persons__and{font-family:var(--font-heading);font-size:2.5rem;color:var(--color-primary);margin:0}
.person__photo{width:10rem;height:10rem;object-fit:cover;border-radius:50%;margin:0 auto 1rem}
.person__name{font-size:clamp(1.8rem,7vw,2.4rem)}

.events{display:grid;gap:1.5rem}
.event{padding:2rem 1.25rem;border-radius:1rem;background:color-mix(in srgb,var(--color-primary) 8%,var(--color-bg))}
.event__title{font-size:1.8rem;color:var(--color-primary)}

.countdown{display:flex;justify-content:center;gap:.75rem}
.countdown div{min-width:4.25rem;padding:.75rem .25rem;border-radius:.75rem;background:var(--color-primary);color:var(--color-bg)}
.countdown span{display:block;font-size:1.6rem;font-weight:600}

blockquote{margin:0;font-style:italic}
blockquote footer{font-style:normal;margin-top:.5rem;font-weight:600}

/* Animasi masuk, mengikuti token animation.level dan preferensi pengguna. */
.js [data-reveal]{opacity:0;transform:translateY(1.5rem);transition:opacity .8s,transform .8s}
.js [data-reveal].is-visible{opacity:1;transform:none}
html[data-animation="subtle"].js [data-reveal]{transform:none}
html[data-animation="off"].js [data-reveal]{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .gate{transition:none}
}

@media (min-width:48rem){
  .persons{grid-template-columns:1fr auto 1fr;align-items:center}
  .events{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
}

/* Fase 1: form, galeri, ucapan, amplop, musik */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{display:grid;gap:.5rem;text-align:left;max-width:28rem;margin:0 auto}
.form label{font-weight:600;font-size:.9rem}
.form input:not([type=radio]),.form select,.form textarea{width:100%;padding:.65rem .8rem;border:1px solid color-mix(in srgb,var(--color-text) 25%,transparent);border-radius:.6rem;background:var(--color-bg);color:var(--color-text);font:inherit}
.form fieldset{border:0;padding:0;margin:.25rem 0}
.form legend{font-weight:600;font-size:.9rem;margin-bottom:.25rem}
.form .choice{display:flex;gap:.5rem;align-items:center;font-weight:400}
.form .btn{justify-self:start;margin-top:.5rem}
.notice{font-style:italic}
.flash{position:sticky;top:0;z-index:6;padding:.75rem 1rem;text-align:center;background:var(--color-primary);color:var(--color-bg)}
.flash--error{background:#8b1e1e;color:#fff}
.gallery--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem}
.gallery--grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.5rem}
.gallery--slider{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.gallery--slider img{flex:0 0 85%;max-height:70vh;object-fit:cover;border-radius:.75rem;scroll-snap-align:center}
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;text-align:left}
.timeline__item{border-left:2px solid var(--color-accent);padding-left:1rem}
.timeline__date{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin:0}
.wishes{list-style:none;padding:0;margin:2rem auto 0;max-width:32rem;max-height:28rem;overflow-y:auto;text-align:left;display:grid;gap:.75rem}
.wish{padding:.75rem 1rem;border-radius:.75rem;background:color-mix(in srgb,var(--color-primary) 7%,var(--color-bg))}
.wish__name{font-weight:600;margin:0 0 .25rem}
.wish__msg{margin:0;white-space:pre-line}
.gifts{display:grid;gap:1rem}
.gift{padding:1.5rem 1rem;border-radius:1rem;border:1px solid color-mix(in srgb,var(--color-accent) 40%,transparent)}
.gift__qr{margin:0 auto 1rem;border-radius:.5rem;background:#fff;padding:.5rem}
.gift__no{font-size:1.3rem;font-weight:600;letter-spacing:.05em;margin:0}
.event__actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.music-toggle{position:fixed;bottom:1rem;right:1rem;z-index:5;width:3rem;height:3rem;border-radius:50%;border:0;background:var(--color-primary);color:var(--color-bg);font-size:1.3rem;cursor:pointer}
.music-toggle[aria-pressed=true]{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.music-toggle[aria-pressed=true]{animation:none}}
.branding{text-align:center;font-size:.8rem;opacity:.7;padding:2rem 1rem}
.sec-checkin{text-align:center}
.checkin__qr{display:block;margin:1rem auto;width:min(15rem,70vw);height:auto;background:#fff;padding:.75rem;border-radius:.5rem}
.checkin__name{font-weight:600}