:root{--paper:#f6f2eb;--paper2:#eee7dc;--ink:#27372e;--muted:#72796e;--sage:#778775;--line:#d9d2c6;--white:#fffdf8;--serif:Georgia,'Times New Roman',serif;--sans:'Avenir Next',Avenir,'Segoe UI',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background-color:#faf6ed;background-image:repeating-linear-gradient(45deg,transparent 0px,transparent 27px,rgba(155,139,115,.12) 27px,rgba(155,139,115,.12) 28px),repeating-linear-gradient(-45deg,transparent 0px,transparent 27px,rgba(155,139,115,.09) 27px,rgba(155,139,115,.09) 28px);background-attachment:fixed;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.hero{min-height:94svh;position:relative;display:grid;place-items:center;text-align:center;color:#fffdf8;background:linear-gradient(180deg,rgba(24,37,30,.25),rgba(24,37,30,.68)),url('assets/cover.jpg') center bottom/cover no-repeat,url('assets/cover.svg') center bottom/cover no-repeat}.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 10%,rgba(20,31,25,.22) 100%)}.hero-content{position:relative;max-width:680px;padding:90px 24px}.eyebrow{font-size:.67rem;letter-spacing:.19em;font-weight:600;color:var(--sage);margin:0 0 15px}.eyebrow.light{color:#e7e4d9}.hero h1{font:400 clamp(3.5rem,11vw,7.3rem)/1.08 var(--serif);margin:12px 0 22px;display:flex;flex-direction:column;align-items:center}.hero h1 i{font-size:.5em;font-weight:400;color:#d7d9c8;margin:4px}.hero-date{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}.hero-note{max-width:430px;margin:28px auto 32px;color:#f0eee7}.hero-bottom{position:absolute;bottom:24px;font:italic 1rem var(--serif);letter-spacing:.04em}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid transparent;padding:13px 22px;text-decoration:none;cursor:pointer;font-size:.78rem;letter-spacing:.04em;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-light{background:var(--white);color:var(--ink)}.button-dark{background:var(--ink);color:white;width:100%}.button-outline{background:transparent;color:var(--ink);border-color:var(--sage)}.section-pad{padding:88px 22px}.intro,.gallery,.wishes{max-width:1050px;margin:auto;text-align:center}.intro-copy{max-width:600px;margin:0 auto 45px;color:var(--muted)}.couple-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,5vw,60px);align-items:center;max-width:780px;margin:auto}.person h2,.section-heading h2,.closing h2{font:400 clamp(2rem,5vw,3.2rem)/1.2 var(--serif);margin:16px 0 7px}.person p{margin:0;font-size:.9rem}.person .parent-line{font-size:.75rem;color:var(--muted);margin-bottom:3px}.portrait{width:min(100%,255px);aspect-ratio:4/5;margin:auto;background-position:center;background-size:cover;filter:saturate(.75)}.portrait-one{background-image:url('assets/portrait-deden.jpg'),url('assets/portrait-deden.svg')}.portrait-two{background-image:url('assets/portrait-iis.jpg'),url('assets/portrait-iis.svg')}.ampersand,.closing-names i{font:italic 2.4rem var(--serif);color:var(--sage)}.closing-quote{font:italic 1.15rem/1.7 var(--serif);max-width:600px;margin:55px auto 5px}.quote-ref{color:var(--muted);font-size:.75rem}.event{background:var(--paper2);text-align:center}.section-heading{max-width:590px;margin:0 auto 36px;text-align:center}.section-heading>p:not(.eyebrow){color:var(--muted);margin:12px auto 0;max-width:470px}.countdown{display:flex;justify-content:center;gap:clamp(15px,5vw,52px);margin:38px auto 48px}.countdown div{display:flex;flex-direction:column;min-width:48px}.countdown strong{font:400 clamp(2rem,6vw,3.5rem)/1.2 var(--serif)}.countdown span{font-size:.68rem;letter-spacing:.08em;color:var(--muted)}.event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:800px;margin:0 auto 28px}.event-card{border:1px solid #d3cabb;padding:28px 18px;background:rgba(255,253,248,.45)}.event-symbol{font:italic 1rem var(--serif);color:var(--sage)}.event-card h3{font:400 1.8rem var(--serif);margin:10px 0}.event-card p{margin:5px 0;color:var(--muted);font-size:.85rem}.event-card .event-date{color:var(--ink);font-weight:600}.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.gallery-grid img{width:100%;height:310px;object-fit:cover;filter:saturate(.75)}.hint{font-size:.74rem;color:var(--muted)}.form-card{max-width:560px;margin:auto;background:var(--white);padding:clamp(22px,5vw,38px);display:grid;gap:17px;box-shadow:0 10px 36px rgba(39,55,46,.04)}.form-card label{display:grid;gap:7px;font-size:.78rem;font-weight:600}.form-card input,.form-card select,.form-card textarea{width:100%;border:1px solid var(--line);background:#fffefa;padding:12px 13px;border-radius:0;color:var(--ink);font-weight:400;outline-color:var(--sage)}.form-card textarea{resize:vertical}.form-status{margin:0;font-size:.8rem;color:var(--sage)}.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}.wish-form{margin-bottom:30px}.wishes-list{max-width:560px;margin:0 auto;display:grid;gap:12px;max-height:470px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 4px 0;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}.wishes-list::-webkit-scrollbar{width:5px}.wishes-list::-webkit-scrollbar-thumb{background:var(--sage);border-radius:10px}.wish-item{background:rgba(255,253,248,.7);padding:17px 20px;text-align:left;border-left:2px solid var(--sage)}.wish-item strong{font:400 1.15rem var(--serif)}.wish-item p{margin:5px 0 0;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.closing{text-align:center;background:#e6e5d9}.closing h2{max-width:670px;margin:0 auto 20px}.closing>p:not(.eyebrow){color:var(--muted)}.closing-names{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:30px;font:400 2rem var(--serif)}footer{text-align:center;padding:22px;color:var(--muted);font-size:.72rem}.music-pill{position:fixed;z-index:5;right:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(255,253,248,.92);padding:6px 12px 6px 6px;border-radius:30px;box-shadow:0 2px 12px #00000010;font-size:.7rem}.icon-btn{width:32px;height:32px;border:0;border-radius:50%;background:var(--ink);color:white;cursor:pointer;font-size:1rem}code{background:#e6e1d7;padding:2px 4px}@media(max-width:600px){.section-pad{padding:66px 18px}.hero{min-height:90svh}.hero-content{padding:75px 20px}.couple-grid{gap:10px}.portrait{aspect-ratio:3/4}.person p{font-size:.75rem}.person h2{font-size:1.8rem}.ampersand{font-size:1.8rem}.event-grid{grid-template-columns:1fr}.gallery-grid{gap:8px}.gallery-grid img{height:175px}.countdown{gap:20px}.countdown strong{font-size:2rem}.music-pill{right:10px;top:10px}}

/* Amplop pembuka dan surat personal */
body.invitation-locked{overflow:hidden;height:100vh}
#envelopeScreen{position:fixed;inset:0;z-index:20;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px;background:#f3eadb;color:#76583d;transition:opacity .85s ease,visibility .85s ease}
#envelopeScreen::before{content:"";position:absolute;inset:16px;border:1px solid #dfc7a3;border-radius:34px;pointer-events:none}
#envelopeScreen.is-opening{pointer-events:none}
#envelopeScreen.is-gone{opacity:0;visibility:hidden}

@media (min-width: 601px){.hero{background-position:center bottom,center bottom,center bottom}}

.envelope-intro{position:relative;z-index:2;max-width:520px}
.envelope-intro .eyebrow{color:#94724b;margin-bottom:12px}
.to-label{margin:0;font:1rem var(--serif)}
#recipientName{font:italic 400 clamp(2.8rem,10vw,4.8rem)/1.2 var(--serif);margin:4px 0 12px;color:#795838}
.envelope-message{font:1rem/1.65 var(--serif);margin:0 0 25px;color:#7f684f}
.envelope{position:relative;display:block;width:min(340px,82vw);height:205px;padding:0;border:0;border-radius:15px;background:transparent;cursor:pointer;perspective:900px;filter:drop-shadow(0 16px 20px #7b5a3520);-webkit-tap-highlight-color:transparent}
.envelope-paper{position:absolute;inset:0;border-radius:15px;background:linear-gradient(145deg,#fff8ec,#e8d5b7);border:1px solid #dfc7a3;overflow:hidden}
.envelope-paper::before,.envelope-paper::after{content:"";position:absolute;inset:0;pointer-events:none}
.envelope-paper::before{background:linear-gradient(145deg,transparent 49.5%,#d8bd96 50%,transparent 50.7%)}
.envelope-paper::after{background:linear-gradient(35deg,transparent 49.5%,#e0c8a5 50%,transparent 50.7%)}
.envelope-flap{position:absolute;inset:0;z-index:2;background:#f5e5cc;border:1px solid #dfc7a3;border-radius:14px;clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:top center;transition:transform .85s cubic-bezier(.2,.7,.2,1);backface-visibility:visible}
.wax-seal{position:absolute;z-index:3;left:50%;top:49%;width:66px;height:66px;display:flex;align-items:center;justify-content:center;gap:2px;transform:translate(-50%,-50%);border:2px solid #c8a46d;border-radius:50%;background:radial-gradient(circle at 30% 25%,#b88b53,#76502d 76%);box-shadow:inset 0 0 0 3px #8b6339,0 4px 8px #75502b44;color:#f4dfb8;font:1.25rem var(--serif);transition:opacity .35s ease,transform .35s ease}
.wax-seal span{font-size:.75rem}
.envelope.is-opening .envelope-flap{transform:rotateX(180deg)}
.envelope.is-opening .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.55)}
.envelope-hint{position:relative;z-index:2;margin:20px 0 0;font-size:.67rem;letter-spacing:.16em;color:#92744f}
.envelope-hint span{display:block;font-size:1.25rem;line-height:1.4;animation:soft-bob 1.6s ease-in-out infinite}
@keyframes soft-bob{50%{transform:translateY(4px);opacity:.55}}
.botanical{position:absolute;top:14%;bottom:10%;width:clamp(45px,13vw,120px);opacity:.8;pointer-events:none}
.botanical-left{left:0}.botanical-right{right:0;transform:scaleX(-1)}
.botanical span{position:absolute;width:23px;height:38px;background:#a8ae8b;border-radius:100% 0 100% 0;opacity:.65;transform:rotate(-28deg)}
.botanical span:nth-child(1){left:22%;top:17%;transform:rotate(-25deg)}.botanical span:nth-child(2){left:38%;top:35%;transform:rotate(35deg)}.botanical span:nth-child(3){left:13%;top:57%;transform:rotate(-25deg)}.botanical span:nth-child(4){left:36%;top:75%;transform:rotate(35deg)}
.botanical i{position:absolute;width:13px;height:13px;left:29%;top:29%;border-radius:50%;background:#f7eee0;box-shadow:0 -7px 0 -2px #d9c6a5,7px -2px 0 -2px #d9c6a5,5px 6px 0 -2px #d9c6a5,-5px 6px 0 -2px #d9c6a5,-7px -2px 0 -2px #d9c6a5}
.botanical i:last-child{left:43%;top:67%;transform:scale(.75)}
.personal-letter-section{min-height:100svh;padding:64px 20px;display:grid;place-items:center;background:#f3eadb;position:relative;overflow:hidden}
.personal-letter-card{position:relative;z-index:1;width:min(560px,100%);padding:clamp(34px,7vw,64px) clamp(22px,6vw,48px);text-align:center;background:#fff9ef;border:1px solid #dfc7a3;border-radius:30px;box-shadow:0 18px 55px #80613b14;opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.personal-letter-card.is-visible{opacity:1;transform:translateY(0)}
.personal-letter-card .eyebrow{color:#94724b}
.personal-letter-card h2{font:400 clamp(2.2rem,7vw,3.7rem)/1.2 var(--serif);color:#795838;margin:8px 0}
.personal-letter-card h2 i{font-weight:400;color:#b18c5d}
.personal-letter-card p:not(.eyebrow){font:1rem/1.8 var(--serif);color:#80694f}
.letter-date{font-size:.72rem!important;letter-spacing:.12em;text-transform:uppercase}
.letter-ornament{color:#b18c5d;font-size:2rem;margin:16px 0}
.personal-letter-card h3{font:italic 400 clamp(2rem,7vw,3rem) var(--serif);margin:6px 0;color:#795838}
.letter-continue{border-radius:999px!important;margin-top:20px;padding:14px 26px}
.button,.button-light,.button-dark,.button-outline{border-radius:999px}
.event-card,.form-card,.wish-item{border-radius:22px}
.form-card input,.form-card select,.form-card textarea{border-radius:13px}
.gallery-grid img{border-radius:18px}
@media(max-width:600px){#envelopeScreen::before{inset:10px;border-radius:26px}.envelope{height:185px}.botanical{opacity:.55}.personal-letter-card{border-radius:25px}.personal-letter-section{padding:45px 16px}}
@media(prefers-reduced-motion:reduce){#envelopeScreen,.envelope-flap,.wax-seal,.personal-letter-card{transition:none!important}.envelope-hint span{animation:none!important}}

/* Kelopak bunga: aktif setelah amplop dibuka */
.falling-petals{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .6s ease}
.falling-petals.is-active{opacity:1;visibility:visible}
.falling-petals span{position:absolute;top:-24px;width:10px;height:15px;border-radius:80% 15% 80% 15%;background:#e7c9c1;opacity:.72;animation:petal-fall var(--duration,12s) linear var(--delay,0s) infinite;transform:rotate(25deg)}
.falling-petals span:nth-child(3n){background:#f5e8d5;width:8px;height:12px}.falling-petals span:nth-child(3n + 1){background:#d9cbb0;width:9px;height:13px}
@keyframes petal-fall{0%{transform:translate3d(0,-5vh,0) rotate(0deg)}50%{transform:translate3d(22px,50vh,0) rotate(220deg)}100%{transform:translate3d(-14px,110vh,0) rotate(420deg)}}
@media(prefers-reduced-motion:reduce){.falling-petals{display:none}}

/* Revisi final: profil dan galeri memakai bingkai lengkung yang konsisten */
.couple-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,4vw,34px);align-items:start;max-width:760px}
.person{min-width:0;display:flex;flex-direction:column;align-items:center}
.portrait{width:min(100%,255px);aspect-ratio:3/4;border:1px solid #c6a985;border-radius:130px 130px 82px 82px;padding:5px;background-color:#fbf7ef;background-clip:content-box;overflow:hidden}
.person h2{margin:15px 0 7px}
.person p{max-width:100%;overflow-wrap:anywhere;line-height:1.7}
.couple-grid .ampersand{grid-column:1/-1;grid-row:2;margin:-2px 0 0;line-height:1.1}
.closing-quote{clear:both;display:block;position:relative;margin:34px auto 5px;line-height:1.75;padding:0 4px}
.quote-ref{display:block;margin-top:10px}
.gallery-grid img{border:1px solid #c6a985;padding:4px;border-radius:100px 100px 65px 65px;background:#fbf7ef;aspect-ratio:3/4;height:auto;object-fit:cover}
.wishes-list{height:470px;max-height:470px;overflow-y:auto;overscroll-behavior:contain;align-content:start}
.wish-item{min-height:92px;border-radius:22px;padding:17px 20px}
#envelopeScreen{transition:opacity .45s ease,visibility .45s ease}
#envelopeScreen.is-gone{display:none;pointer-events:none}
@media(max-width:600px){.couple-grid{gap:12px}.portrait{aspect-ratio:3/4}.person h2{font-size:1.8rem}.person p{font-size:.75rem}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gallery-grid img{border-radius:70px 70px 45px 45px;padding:3px}.wishes-list{height:470px;max-height:470px}}
@media(prefers-reduced-motion:reduce){.falling-petals{display:none!important}}
/* Tata letak tiga kolom menjaga simbol & di antara kedua foto */
.couple-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,2.5vw,24px)}
.couple-grid .ampersand{grid-column:auto;grid-row:auto;margin:0;font-size:clamp(1.5rem,4vw,2.4rem)}
@media(max-width:600px){.couple-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}.couple-grid .ampersand{font-size:1.5rem}}


/* Motif anyaman bilik diagonal yang lebih besar dan lembut */
body {
  background-color: #faf6ed;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 27px, rgba(155,139,115,.12) 27px, rgba(155,139,115,.12) 28px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 27px, rgba(155,139,115,.09) 27px, rgba(155,139,115,.09) 28px);
  background-attachment: fixed;
}
.intro, .gallery, .wishes { background-color: rgba(250,246,237,.78); }
.personal-letter-section { scroll-margin-top: 0; background-color: rgba(243,234,219,.96); }
.personal-letter-card { opacity: 1; transform: none; }
.wishes-list { height: 470px; max-height: 470px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
@media (max-width:600px) { .wishes-list { height:470px; max-height:470px; } }


/* Make the woven diagonal background visible on phones as well as desktop. */
html { background-color: #faf6ed; }
body {
  min-height: 100%;
  background-color: #faf6ed;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 27px, rgba(155,139,115,.12) 27px, rgba(155,139,115,.12) 28px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 27px, rgba(155,139,115,.09) 27px, rgba(155,139,115,.09) 28px);
  background-attachment: scroll;
}
.intro, .gallery, .wishes { background-color: rgba(250,246,237,.32) !important; }
.event { background-color: rgba(238,231,220,.76); }
@media (max-width: 600px) {
  html, body { background-attachment: scroll; }
  .intro, .gallery, .wishes { background-color: rgba(250,246,237,.22) !important; }
  .event { background-color: rgba(238,231,220,.72); }
}


/* Compact music control: icon only */
.music-pill{padding:6px;background:rgba(255,253,248,.92);width:44px;height:44px;justify-content:center;gap:0}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;font-size:.9rem;line-height:1}


/* Layout revision: only the opening wedding hero fills the viewport. */
#mainInvitation > .hero {
  min-height: 100svh;
}
#mainInvitation > .section-pad {
  min-height: 0;
  display: block;
}

/* Gallery: show one photo per row for a calm, vertical flow. */
.gallery-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 90px 90px 48px 48px;
}

/* Keep the wish form and wish cards stable whether the list is empty or not. */
#wishForm {
  display: grid;
  width: 100%;
  max-width: 650px;
  min-width: 0;
  margin: 0 auto 30px;
  align-self: stretch;
}
#wishesList {
  display: grid;
  width: 100%;
  max-width: 650px;
  min-width: 0;
  margin: 0 auto;
  justify-items: stretch;
  align-content: start;
  gap: 12px;
  height: 470px;
  max-height: 470px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#wishesList > .wish-item {
  display: block;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  text-align: left;
}
#wishesList > .wish-item time {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .68rem;
}
#wishesList > .hint {
  width: 100%;
  margin: 0;
  text-align: center;
}
@media (max-width: 600px) {
  .gallery-grid { max-width: 100%; gap: 18px; }
  .gallery-grid img { border-radius: 78px 78px 44px 44px; }
  #wishForm, #wishesList { max-width: 100%; }
}