:root{
  --cream:#fdf6ee; --ink:#5c4433; --rose:#d94f5c; --rose-soft:#f3b8be;
  --peach:#f6c9a0; --leaf:#c98a4b; --gold:#e8a94c; --card:#fffaf3;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  font-family:ui-rounded,'Segoe UI',system-ui,sans-serif;
  background:linear-gradient(175deg,var(--cream) 0%,#fbe7d8 55%,#f6d3c2 100%);
  color:var(--ink); min-height:100vh; overflow-x:hidden;
}
#leaves{position:fixed;inset:0;pointer-events:none;z-index:0}
header,main,footer{position:relative;z-index:1}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3.2rem 1.2rem 1rem;gap:.9rem}
.badge{background:#fff8;border:1px solid var(--peach);padding:.4rem 1rem;border-radius:99px;font-size:.85rem;letter-spacing:.06em;backdrop-filter:blur(4px);animation:bob 3s ease-in-out infinite}
h1{font-size:clamp(2.4rem,7vw,4.5rem);color:var(--rose);letter-spacing:-.02em;
   text-shadow:0 2px 0 #fff; animation:pop .8s cubic-bezier(.2,1.6,.4,1) both}
.sub{max-width:34rem;font-size:clamp(1rem,2.5vw,1.2rem);opacity:.85}

/* objek perayaan: hati berdenyut + GIF lucu kiri-kanan */
.celebrate{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,4vw,2.4rem);margin:.4rem 0 .2rem}
.big-heart{font-size:4.2rem;animation:beat 1.2s ease-in-out infinite;filter:drop-shadow(0 6px 12px #d94f5c55)}
.side-gif{width:clamp(92px,26vw,170px);aspect-ratio:1;object-fit:cover;border-radius:22px;
  border:3px solid var(--peach);box-shadow:0 4px 0 var(--peach);background:#fff;animation:bob 3s ease-in-out infinite}
.side-gif:last-child{animation-delay:1.5s}

.btn{cursor:pointer;border:0;border-radius:99px;padding:.85rem 1.6rem;font-size:1rem;font-weight:700;
  background:var(--rose);color:#fff;box-shadow:0 4px 0 #a83a45;transition:transform .15s,box-shadow .15s;font-family:inherit;max-width:100%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #a83a45}
.btn.ghost{background:#fff;color:var(--rose);box-shadow:0 4px 0 var(--rose-soft)}
.btn.music.playing{animation:pulse 1.4s ease-in-out infinite}

main{max-width:820px;margin:0 auto;padding:0 1.2rem 3rem;display:flex;flex-direction:column;gap:2.4rem}
h2{text-align:center;color:var(--rose);margin-bottom:.8rem;font-size:1.8rem}
section{scroll-margin-top:1rem}

/* galeri foto 9:16 */
.photo-hint{text-align:center;font-size:.8rem;opacity:.6;margin:-.4rem 0 .9rem}
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}
.gallery figure{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:var(--card);border:2px solid var(--peach);box-shadow:0 4px 0 var(--peach)}
.gallery figure.clickable{cursor:pointer;transition:transform .25s}
.gallery figure.clickable:hover{transform:scale(1.03) rotate(-1deg)}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gallery .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;color:var(--leaf);font-size:.85rem;text-align:center;padding:1rem;white-space:pre-line;opacity:.75;
  border:2px dashed var(--peach);border-radius:16px;margin:6px}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:.55rem .4rem;text-align:center;
  font-size:.78rem;background:linear-gradient(transparent,#5c4433cc);color:#fff}

/* video 9:16 */
.video{text-align:center}
.video-frame{position:relative;aspect-ratio:9/16;max-width:300px;margin:0 auto;border-radius:20px;overflow:hidden;
  border:2px solid var(--peach);box-shadow:0 4px 0 var(--peach);background:#000}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-caption{margin-top:.6rem;font-size:.9rem;opacity:.8}

/* flip cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.card{perspective:700px;cursor:pointer;height:150px}
.card .inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,1.4,.4,1);transform-style:preserve-3d}
.card.flip .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  border-radius:18px;padding:.8rem;backface-visibility:hidden;text-align:center}
.face.front{background:var(--card);border:2px solid var(--peach);font-size:2rem;box-shadow:0 4px 0 var(--peach)}
.face.front small{font-size:.8rem;color:var(--ink);opacity:.75}
.face.back{background:var(--rose);color:#fff;transform:rotateY(180deg);font-size:.9rem;line-height:1.45;box-shadow:0 4px 0 #a83a45}

/* bouquet */
.bouquet{text-align:center}
.bouquet-btn{cursor:pointer;border:2px dashed var(--rose);background:#fff8;color:var(--rose);
  border-radius:18px;padding:1.1rem 2rem;font-size:1.05rem;font-weight:700;font-family:inherit;transition:transform .2s;max-width:100%}
.bouquet-btn:hover{transform:scale(1.04) rotate(-1deg)}
.bouquet-stage{min-height:96px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.3rem;margin-top:.8rem}
.bloom{font-size:2.6rem;display:inline-block;animation:bloomIn .5s cubic-bezier(.2,1.8,.4,1) both}
.bouquet-done{margin-top:.6rem;color:var(--rose);font-weight:700;animation:pop .5s both}

/* envelope + letter */
.letter{text-align:center}
.hint{opacity:.8;margin-bottom:.8rem;font-style:italic}
.envelope{cursor:pointer;border:0;background:none;font-size:4rem;
  filter:drop-shadow(0 6px 0 var(--rose-soft));transition:transform .25s}
.envelope:hover{transform:scale(1.08) rotate(-3deg)}
.letter-paper{background:#fffef8;border:1px solid var(--peach);border-radius:4px 22px 4px 22px;
  max-width:34rem;margin:1.2rem auto 0;padding:1.8rem 1.4rem;text-align:left;line-height:1.8;
  box-shadow:0 10px 30px #d94f5c22;animation:unfold .7s cubic-bezier(.2,1.3,.4,1) both;position:relative}
.letter-paper::before{content:"🍂";position:absolute;top:-14px;right:16px;font-size:1.6rem}
.letter-paper h3{color:var(--rose);margin-bottom:.6rem}
.letter-paper footer{margin-top:1rem;text-align:right;font-weight:700;color:var(--leaf)}

/* wish — rapi di semua layar */
.wish{text-align:center;background:#fff6;border:2px solid var(--rose-soft);border-radius:24px;
  padding:1.6rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem;overflow:hidden}
.wish h2{margin:0}
.wish blockquote{font-size:clamp(1.05rem,3.5vw,1.25rem);line-height:1.65;max-width:36rem;margin:0 auto;
  padding:0 .4rem;color:var(--ink);transition:opacity .3s;overflow-wrap:break-word}
.wish .row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;width:100%}
.wish .btn{padding:.8rem 1.3rem;font-size:.95rem}

/* trivia */
.trivia #triviaList{display:flex;flex-direction:column;gap:.6rem}
.trivia details{background:var(--card);border:2px solid var(--peach);border-radius:14px;padding:.9rem 1.1rem}
.trivia summary{font-weight:700;color:var(--leaf);list-style:none;cursor:pointer}
.trivia summary::before{content:"🍁 "}
.trivia details[open]{animation:pop .4s both}
.trivia details p{margin-top:.5rem;line-height:1.6}

/* lightbox foto */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:50;background:#2b1d14e6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;padding:1.2rem;animation:pop .25s both}
.lightbox img{max-width:92vw;max-height:78vh;border-radius:18px;border:3px solid #fff3}
.lightbox p{color:#fff;opacity:.85}
.lightbox-close{position:absolute;top:1rem;right:1rem;background:#fff2;border:0;color:#fff;
  font-size:1.2rem;width:44px;height:44px;border-radius:50%;cursor:pointer}

footer{text-align:center;padding:1.6rem;font-size:.9rem;opacity:.8}
footer a{color:var(--rose);text-decoration:none;font-weight:700}

#ytWrap{position:fixed;bottom:-2px;right:-2px;width:1px;height:1px;opacity:.01;pointer-events:none}

@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.18)}40%{transform:scale(.96)}55%{transform:scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{box-shadow:0 4px 0 #a83a45,0 0 0 12px #d94f5c33}}
@keyframes bloomIn{from{transform:scale(0) rotate(-40deg) translateY(30px);opacity:0}}
@keyframes unfold{from{transform:perspective(600px) rotateX(-70deg);opacity:0}}

/* mobile tweaks */
@media (max-width:560px){
  .hero{padding-top:2.4rem}
  .gallery .grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem}
  .btn{width:auto;max-width:88vw;white-space:normal;line-height:1.35}
  .wish .row{gap:.6rem}
  .wish .btn{flex:1 1 130px;max-width:220px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}