:root{color-scheme:light}body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
:root{
  --paper:#F2EDE6;
  --paper-surface:#FBF6EF;
  --paper-alt:#F2EDE6;
  --ink:#362017;
  --ink-soft: rgba(54,32,23,.62);
  --deep:#F2EDE6;
  --deep-surface:#F2EDE6;
  --on-deep:#362017;
  --on-deep-soft: rgba(54,32,23,.62);
  --accent:#7C1F2E;
  --accent-soft:#9C4152;
  --accent-line: rgba(124,31,46,.35);
  --olive:#5F6E2A;
  --line: rgba(54,32,23,.16);
  --line-on-deep: rgba(54,32,23,.16);
  --error: #A8402E;
  --shadow: 0 24px 48px -28px rgba(54,32,23,.22);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.locked, html.locked body{ overflow:hidden; height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Manrope",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:"Fraunces",Georgia,serif; font-weight:500; margin:0; text-wrap:balance; }
p{ margin:0; }
img{ display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent-soft); color:var(--deep); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.section{ position:relative; padding: clamp(3.5rem,9vw,6.5rem) 1.5rem; overflow:hidden; }
.section--paper{ background:var(--paper); color:var(--ink); }
.section--alt{ background:var(--paper-alt); color:var(--ink); }
.section--deep{ background:var(--deep); color:var(--on-deep); }
.section-inner{ max-width:640px; margin:0 auto; position:relative; z-index:2; }
.section-inner--narrow{ max-width:520px; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.16,.84,.32,1), transform .9s cubic-bezier(.16,.84,.32,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.kicker{
  display:block; font-family:"Manrope",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;
}
.section--deep .kicker{ color:var(--accent); }

.divider{ display:flex; align-items:center; gap:.9rem; margin: 1.6rem auto; width:min(220px,60%); }
.divider .line{ flex:1; height:1px; background:currentColor; opacity:.35; }
.divider svg{ width:16px; height:9px; flex-shrink:0; color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 2.2em; border:1px solid var(--accent); background:transparent; color:inherit;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{ background:var(--accent); color:var(--deep); }
.btn--ghost{ border-color:var(--line-on-deep); }
.section--paper .btn--ghost, .section--alt .btn--ghost{ border-color:var(--line); }

/* ---------- ornaments ---------- */
.ornament{ width:120px; height:120px; color:var(--accent); }
.ornament path, .ornament use{ fill:none; stroke:currentColor; stroke-width:1.3; }
.ornament .leaf-fill{ fill:currentColor; opacity:.16; stroke:currentColor; stroke-width:1; }
.corner{ position:absolute; z-index:1; opacity:.85; }
.corner--tl{ top:6%; left:5%; }
.corner--br{ bottom:6%; right:5%; transform:rotate(180deg); }
.corner--sm{ width:78px; height:78px; }

/* ---------- cover & closing ---------- */
.gate{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 3rem 1.5rem;
}
.gate-frame{
  border:1px solid var(--accent-line); padding: clamp(2.5rem,7vw,4rem) clamp(1.75rem,6vw,3.5rem);
  max-width:520px; width:100%; position:relative;
}
.gate-eyebrow{ font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent-soft); }
.gate-names{
  font-family:"Fraunces",serif; font-style:italic; font-weight:500;
  font-size:clamp(2.6rem,9vw,4.4rem); line-height:1.08; margin:1.1rem 0; color:var(--on-deep);
}
.gate-amp{ display:block; font-size:.55em; color:var(--accent-soft); margin:.15em 0; }
.gate-date{ font-size:.85rem; letter-spacing:.22em; color:var(--on-deep-soft); text-transform:uppercase; }
.gate .btn{ margin-top:2.4rem; }
.closing .gate-names{ margin-bottom:.4rem; }

/* ---------- portraits ---------- */
.portrait{
  position:relative; border:1px solid var(--accent-line); padding:10px; margin:0 auto;
  box-shadow:var(--shadow);
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.portrait-inner{ position:relative; overflow:hidden; width:100%; aspect-ratio:4/5; background:var(--paper-surface); }
.portrait-mono{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; font-style:italic; font-weight:400; color:var(--accent);
}
.portrait--couple .portrait-mono{ font-size:3.2rem; }
.portrait--single .portrait-mono{ font-size:4rem; }
.portrait--couple{ max-width:300px; }
.portrait--single{ max-width:230px; }
.portrait-bg{ position:absolute; inset:0; }

/* ---------- couple intro ---------- */
.intro{ text-align:center; }
.intro-names{ font-size:clamp(1.9rem,5vw,2.6rem); margin-top:2rem; }
.intro-names small{ display:block; font-family:"Manrope",sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.24em; color:var(--ink-soft); text-transform:uppercase; margin-bottom:.6rem; }

/* ---------- ayat ---------- */
.ayat-arabic{
  font-family:"Amiri",serif; direction:rtl; font-size:clamp(1.5rem,4.4vw,2.1rem);
  line-height:2.15; text-align:center; color:var(--on-deep); margin:1.8rem 0;
}
.ayat-latin{ font-style:italic; text-align:center; color:var(--on-deep-soft); font-size:.95rem; margin-bottom:1.4rem; }
.ayat-terjemah{ text-align:center; font-size:1.05rem; line-height:1.85; color:var(--on-deep); }
.ayat-cite{ text-align:center; margin-top:1.6rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); }

/* ---------- salam / mempelai ---------- */
.salam-lede{ text-align:center; font-family:"Fraunces",serif; font-style:italic; font-size:clamp(1.4rem,3.6vw,1.85rem); }
.salam-body{ text-align:center; max-width:480px; margin:1.6rem auto 0; color:var(--ink-soft); font-size:1rem; }
.mempelai{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end; justify-content:center;
  width:100%; max-width:360px; aspect-ratio:3/4; margin:3rem auto 0;
  background-size:cover; background-position:top center;
}
.mempelai + .mempelai{ margin-top:2.2rem; }
.mempelai::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(24,14,10,0) 42%, rgba(24,14,10,.86) 100%);
}
.mempelai-text{ position:relative; z-index:1; padding:1.7rem 1.3rem 1.9rem; text-align:center; }
.mempelai-name{
  font-family:"Tenor Sans",-apple-system,sans-serif; font-weight:400; font-style:normal;
  font-size:1.2rem; letter-spacing:.03em; color:#F2EDE6;
}
.mempelai-parents{
  font-family:"Tenor Sans",-apple-system,sans-serif; font-weight:400; font-style:normal;
  font-size:.82rem; letter-spacing:.01em; line-height:1.7;
  color:rgba(242,237,230,.8); max-width:320px; margin:.6rem auto 0;
}

/* ---------- countdown ---------- */
.countdown-lede{ text-align:center; }
.countdown-date{ text-align:center; font-size:1.15rem; margin-top:.5rem; color:var(--on-deep); }
.countdown-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:2.6rem; }
.countdown-tile{ border:1px solid var(--line-on-deep); padding:1.4rem .5rem; text-align:center; }
.countdown-num{ font-family:"Fraunces",serif; font-size:clamp(1.8rem,5.5vw,2.6rem); font-variant-numeric:tabular-nums; color:var(--on-deep); }
.countdown-label{ display:block; margin-top:.4rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep-soft); }
.countdown-done{ text-align:center; font-family:"Fraunces",serif; font-style:italic; font-size:1.4rem; margin-top:2.2rem; }

/* ---------- agenda (akad/resepsi) ---------- */
.agenda-card{ text-align:center; }
.agenda-title{ font-size:clamp(1.6rem,4vw,2.1rem); }
.agenda-meta{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.35rem; }
.agenda-day{ font-size:1.05rem; }
.agenda-time{ font-size:.95rem; color:var(--ink-soft); }
.agenda-place{ margin-top:1.1rem; font-size:1rem; }
.agenda-note{ margin-top:.5rem; font-size:.88rem; color:var(--ink-soft); font-style:italic; }
.agenda-card .btn{ margin-top:1.8rem; }
.agenda-sep{ height:1px; background:var(--line); width:min(280px,70%); margin:clamp(3rem,8vw,4.5rem) auto; }

/* ---------- rsvp ---------- */
.rsvp-form{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1.6rem; align-items:center; }
.rsvp-field{ width:100%; max-width:380px; text-align:left; }
.rsvp-field label{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:.6rem; }
.rsvp-field input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-on-deep);
  color:var(--on-deep); font-size:1.05rem; padding:.5rem .1rem; font-family:inherit;
}
.rsvp-field input::placeholder{ color:var(--on-deep-soft); opacity:.6; }
.rsvp-error{ display:block; margin-top:.6rem; font-size:.8rem; color:var(--error); min-height:1.2em; }
.rsvp-actions{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }
.rsvp-actions .btn[data-status="hadir"]:hover{ background:var(--accent); }
.rsvp-actions .btn[data-status="tidak"]{ border-color:var(--line-on-deep); }
.rsvp-hint{ font-size:.82rem; color:var(--on-deep-soft); text-align:center; max-width:360px; }

/* ---------- gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; margin-top:2.6rem; }
.gallery-tile{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; }
.gallery-tile:nth-child(2), .gallery-tile:nth-child(5){ aspect-ratio:4/6.2; }
.gallery-tile .tile-mono{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; font-style:italic; color:var(--accent); font-size:1.6rem;
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .gallery-tile, .gallery-tile:nth-child(2), .gallery-tile:nth-child(5){ aspect-ratio:4/5; }
  .countdown-grid{ gap:.5rem; }
  .countdown-tile{ padding:1rem .3rem; }
  .rsvp-actions{ flex-direction:column; width:100%; max-width:380px; }
  .rsvp-actions .btn{ width:100%; }
}
.ornament--flourish{ width:100%; height:auto; }
.gate-flourish{ width:min(200px,68%); margin:1.5rem auto; }
.section-inner > .reveal:nth-child(1){ transition-delay:.05s; }
.section-inner > .reveal:nth-child(2){ transition-delay:.15s; }
.section-inner > .reveal:nth-child(3){ transition-delay:.25s; }
.section-inner > .reveal:nth-child(4){ transition-delay:.35s; }
.section-inner > .reveal:nth-child(5){ transition-delay:.45s; }
.section-inner > .reveal:nth-child(6){ transition-delay:.55s; }
.gate-frame > .reveal:nth-child(1){ transition-delay:.05s; }
.gate-frame > .reveal:nth-child(2){ transition-delay:.18s; }
.gate-frame > .reveal:nth-child(3){ transition-delay:.32s; }
.gate-frame > .reveal:nth-child(4){ transition-delay:.46s; }
.gate-frame > .reveal:nth-child(5){ transition-delay:.6s; }
.countdown-grid > .reveal:nth-child(1){ transition-delay:.05s; }
.countdown-grid > .reveal:nth-child(2){ transition-delay:.15s; }
.countdown-grid > .reveal:nth-child(3){ transition-delay:.25s; }
.countdown-grid > .reveal:nth-child(4){ transition-delay:.35s; }
.gallery-grid > .reveal:nth-child(1){ transition-delay:.04s; }
.gallery-grid > .reveal:nth-child(2){ transition-delay:.1s; }
.gallery-grid > .reveal:nth-child(3){ transition-delay:.16s; }
.gallery-grid > .reveal:nth-child(4){ transition-delay:.22s; }
.gallery-grid > .reveal:nth-child(5){ transition-delay:.28s; }
.gallery-grid > .reveal:nth-child(6){ transition-delay:.34s; }
.kado-cards{ display:flex; flex-direction:column; gap:1.1rem; margin-top:2.4rem; }
.kado-cards > .reveal:nth-child(1){ transition-delay:.05s; }
.kado-cards > .reveal:nth-child(2){ transition-delay:.2s; }
.kado-card{ border:1px solid var(--line); padding:1.7rem 1.4rem; text-align:center; }
.kado-bank{ display:block; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.kado-number{ font-family:"Fraunces",serif; font-size:1.4rem; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.kado-name{ margin-top:.3rem; font-size:.9rem; color:var(--ink-soft); }
.kado-copy{ margin-top:1.1rem; }
.btn--sm{ padding:.6em 1.5em; font-size:.68rem; }  .gate-guest{ margin:1.6rem 0 .3rem; }
.gate-guest-label{ display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:.4rem; }
.gate-guest-name{ font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:1.2rem; color:var(--ink); text-wrap:balance; }
.gate-frame > .reveal:nth-child(6){ transition-delay:.74s; }  #cover{
  position: relative; overflow: hidden; background: var(--deep);
}
.cover-slideshow{ display:none; position:absolute; inset:0; z-index:0; }
.cover-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; animation: cover-slide-fade 12s ease-in-out infinite;
}
.cover-slide:nth-child(1){ animation-delay:0s; }
.cover-slide:nth-child(2){ animation-delay:4s; }
.cover-slide:nth-child(3){ animation-delay:8s; }
@keyframes cover-slide-fade{
  0%{ opacity:0; }
  8%{ opacity:1; }
  25%{ opacity:1; }
  36%{ opacity:0; }
  100%{ opacity:0; }
}
.cover-overlay{
  display:none; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(242,237,230,.3), rgba(242,237,230,.16) 45%, rgba(242,237,230,.34));
}
/* slideshow is a mobile-only effect; desktop keeps the original solid background */
@media (max-width:760px){
  .cover-slideshow, .cover-overlay{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .cover-slide{ animation:none; opacity:0; }
  .cover-slide:first-child{ opacity:1; }
}
#closing{ position:relative; overflow:hidden; }
.closing-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:top center;
}
.closing-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(242,237,230,.3), rgba(242,237,230,.16) 45%, rgba(242,237,230,.34));
}
#closing .gate-frame{ position:relative; z-index:2; border:none; }
#cover .ornament{ filter: drop-shadow(0 1px 3px rgba(54,32,23,.4)); }
#cover .gate-frame{
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: none;
  position: relative;
  z-index: 2;
}
#cover .btn{
  background: rgba(242,237,230,.8);
  border-color: transparent;
}
#cover .btn:hover{
  background: var(--accent);
}
#cover #open-invitation{
  animation: cover-btn-pulse 2.6s ease-in-out infinite;
}
@keyframes cover-btn-pulse{
  0%, 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(124,31,46,.32); }
  50%{ transform:scale(1.045); box-shadow:0 0 0 11px rgba(124,31,46,0); }
}
@media (prefers-reduced-motion: reduce){
  #cover #open-invitation{ animation:none; }
}  .frame-ornament{ position:absolute; width:46px; height:46px; z-index:2; pointer-events:none; }
.frame-ornament--br{ bottom:-11px; right:-11px; transform-origin:100% 100%; animation: branch-sway 5s ease-in-out infinite; }
@keyframes branch-sway{ 0%,100%{ transform:rotate(180deg) rotate(-4deg); } 50%{ transform:rotate(180deg) rotate(4deg); } }
@media (prefers-reduced-motion: reduce){
  .frame-ornament{ animation:none; }
}  @media (min-width: 761px){
  #cover .gate-frame{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
}  #cover .corner{ width:150px; height:150px; }
.gate-flourish--leaf{ width:52px; height:52px; margin:1.3rem auto; }
.gate-flourish--leaf img{ width:100%; height:100%; }
.frame-ornament{ width:54px; height:54px; }
.frame-ornament--br{ bottom:-6px; right:-6px; }  #closing .corner{ width:38px; height:38px; }
.frame-ornament{ width:27px; height:27px; }
.frame-ornament--br{ bottom:8px; right:8px; }  #closing .corner{ width:76px; height:76px; }
#cover .corner{ width:76px; height:76px; }  .music-toggle{
  position:fixed; bottom:20px; right:20px; z-index:80;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--accent-line);
  background:var(--paper-surface); color:var(--ink); font-size:1.15rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(54,32,23,.4);
  transition:transform .2s ease;
}
.music-toggle:hover{ transform:scale(1.08); }  @media (max-width: 760px){
  
}
#cover .gate-date{
  color: var(--ink);
  font-weight:700;
  font-size:1rem;
}  @media (max-width:760px){
  #cover .gate-frame{
    display:flex; flex-direction:column; justify-content:space-between;
    align-items:center; min-height:52vh;
    padding-top:2.2rem; padding-bottom:2.2rem;
  }
  #cover .gate-top, #cover .gate-bottom{ display:flex; flex-direction:column; align-items:center; }
}
.gate-top > .reveal:nth-child(1){ transition-delay:.05s; }
.gate-top > .reveal:nth-child(2){ transition-delay:.18s; }
.gate-bottom > .reveal:nth-child(1){ transition-delay:.3s; }
.gate-bottom > .reveal:nth-child(2){ transition-delay:.42s; }
.gate-bottom > .reveal:nth-child(3){ transition-delay:.54s; }  @media (max-width:760px){
  #cover.gate{ padding:0; }
  #cover .gate-frame{
    position:absolute;
    top:5vh; bottom:5vh; left:1.25rem; right:1.25rem;
    margin:0; max-width:none; width:auto; min-height:0;
  }
}

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.9rem; background:var(--accent);
  transition:opacity .7s ease, visibility .7s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-frame{
  width:min(230px,54vw); aspect-ratio:3/4; overflow:hidden;
  border:1px solid rgba(242,237,230,.4);
  box-shadow:0 28px 54px -22px rgba(0,0,0,.5);
}
.preloader-frame img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.preloader-caption{ text-align:center; }
.preloader-kicker{
  display:block; font-family:"Tenor Sans",-apple-system,sans-serif; font-weight:400; font-style:normal;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(242,237,230,.72);
}
.preloader-names{
  display:block; margin-top:.6rem;
  font-family:"Tenor Sans",-apple-system,sans-serif; font-weight:400; font-style:normal;
  font-size:clamp(1.5rem,5.2vw,2.15rem); letter-spacing:.05em;
  color:#F2EDE6;
}
.preloader-percent{
  font-family:"Tenor Sans",-apple-system,sans-serif; font-style:normal; font-weight:400;
  font-size:.64rem; letter-spacing:.2em; color:rgba(242,237,230,.72);
  font-variant-numeric:tabular-nums;
}


/* ---------- fullscreen photo sections (intro + mempelai wanita/pria) ---------- */
.section--bleed{ padding:0; }

.intro-media{ position:absolute; inset:0; z-index:0; }
.intro-media::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,14,10,.05) 0%, rgba(24,14,10,.2) 45%, rgba(24,14,10,.9) 100%);
}
.intro-media .portrait-inner{ width:100%; height:100%; aspect-ratio:auto; }
#intro .section-inner.intro{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100dvh; width:100%; max-width:none;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding: 1.5rem 1.5rem clamp(2.5rem,8vw,4.5rem);
}
#intro .kicker, #intro .intro-names, #intro .divider{ position:relative; z-index:2; }
#intro .kicker{ color: rgba(242,237,230,.85); }
#intro .intro-names{ color:#F2EDE6; }
#intro .intro-names small{ color: rgba(242,237,230,.75); }
#intro .divider{ color:#F2EDE6; }
#intro .divider .line{ background: rgba(242,237,230,.55); opacity:1; }

.mempelai{ max-width:none; aspect-ratio:auto; min-height:100dvh; margin:0; }
.mempelai-text{ padding: 1.7rem 1.5rem clamp(2.5rem,8vw,4.5rem); max-width:560px; }
.mempelai-name{ font-size: clamp(1.3rem,3.4vw,1.7rem); }
.mempelai-parents{ font-size: clamp(.85rem,2.2vw,.95rem); }