:root {
  --blue-deep:    #FF8FAB; /* Pink Tua (Menggantikan Biru Tua) */
  --blue-main:    #FFB6C1; /* Pink Utama (Menggantikan Biru Utama) */
  --blue-mid:     #FFC0CB; /* Pink Cerah (Menggantikan Biru Cerah) */
  --blue-soft:    #FFE5EC; /* Pink Lembut (Menggantikan Biru Lembut) */
  --blue-pale:    #FFF0F5; /* Lavender Blush / Pink Pucat (Menggantikan Biru Pucat) */
  --blue-blush:   #FFF5F7; /* Pink Sangat Lembut (Latar belakang) */
  --gold:         #FFD700;
  --white:        #FFFFFF;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Lato', sans-serif;
  background: var(--blue-blush);
  color: #4A1525; /* Warna teks disesuaikan dengan kontras pink gelap */
  overflow-x: hidden;
}

/* ── PETALS (Kelopak diganti efek dedaunan/serpihan pink atau salju/kelopak pink) ── */
.petal-canvas {
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events: none; z-index: 9999; overflow: hidden;
}
.petal {
  position: absolute; top: -30px;
  width: 14px; height: 18px;
  border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
  opacity: 0.7;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity:.8; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity:0; }
}

/* ─────────────────────────────
    1. LOADING SCREEN
───────────────────────────── */
#loading {
  position: fixed; inset:0; z-index:9000;
  background: linear-gradient(135deg, #4A1525, #FF8FAB, #FFB6C1);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap:28px;
}
.loading-flower {
  width:90px; height:90px;
  animation: spin 2s linear infinite;
  filter: drop-shadow(0 0 20px rgba(255,182,193,.9));
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: var(--white);
  letter-spacing: .15em; text-align:center;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ─────────────────────────────
    2. PIN GATE
───────────────────────────── */
#pin-gate {
  display: none;
  position: fixed; inset:0; z-index:8000;
  background: linear-gradient(160deg, #4A1525 0%, #FF8FAB 60%, #FFC0CB 100%);
  align-items: center; justify-content: center;
  flex-direction: column; gap:28px;
}
#pin-gate.active { display:flex; }
.pin-title {
  font-family:'Playfair Display',serif;
  font-size:2rem; color:var(--white);
  text-align:center;
}
.pin-sub { color: var(--blue-soft); font-size:.95rem; letter-spacing:.1em; }
.pin-hint { color: rgba(255,255,255,.65); font-size:.85rem; }
.pin-dots {
  display:flex; gap:14px;
}
.pin-dot {
  width:20px; height:20px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.6);
  background: transparent;
  transition: all .25s;
}
.pin-dot.filled { background: var(--white); border-color:var(--white); }
.pin-keypad {
  display:grid; grid-template-columns: repeat(3,70px); gap:12px;
}
.pin-btn {
  height:70px; border-radius:50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  color: var(--white); font-size:1.5rem;
  cursor:pointer; transition: all .2s;
  backdrop-filter: blur(6px);
}
.pin-btn:hover { background:rgba(255,255,255,.3); transform:scale(1.05); }
.pin-btn.del { font-size:1.1rem; }
.pin-btn.confirm { background: var(--blue-deep); border-color: var(--blue-deep); }
.pin-error { color:#FFCDD2; font-size:.85rem; opacity:0; transition:opacity .3s; }
.pin-error.show { opacity:1; }
.pin-flower-top { font-size:2.5rem; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }

/* ─────────────────────────────
    3. GIFT BOX
───────────────────────────── */
#gift-screen {
  display:none;
  position:fixed; inset:0; z-index:7000;
  background: linear-gradient(160deg, #FFF0F5, #FFE5EC, #FFB6C120);
  align-items:center; justify-content:center;
  flex-direction:column; gap:24px;
}
#gift-screen.active { display:flex; }
.gift-box {
  font-size:9rem; cursor:pointer;
  animation: giftWobble 1.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(255,143,171,.3));
  transition: transform .2s;
  user-select:none;
}
.gift-box:hover { transform: scale(1.1); }
@keyframes giftWobble {
  0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)}
}
.gift-text {
  font-family:'Playfair Display',serif;
  font-size:1.3rem; color:var(--blue-deep);
  text-align:center; letter-spacing:.08em;
}
.gift-burst {
  position:fixed; inset:0; z-index:7500;
  background: radial-gradient(circle, rgba(255,229,236,.9) 0%, transparent 70%);
  pointer-events:none; opacity:0;
  animation: burstOut .8s ease forwards;
}
@keyframes burstOut { 0%{opacity:0;transform:scale(0)} 50%{opacity:1} 100%{opacity:0;transform:scale(3)} }

/* ─────────────────────────────
    MAIN CONTENT
───────────────────────────── */
#main { display:none; }
#main.active { display:block; }

/* ─────────────────────────────
    4. HERO
───────────────────────────── */
.hero {
  min-height:100vh;
  background: linear-gradient(170deg, #FFF0F5 0%, #FFE5EC 40%, #FFB6C115 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 20px; text-align:center; position:relative; overflow:hidden;
}
.hero-deco { font-size:3rem; animation:float 3s ease-in-out infinite; }
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
.hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,6vw,4rem); color:var(--blue-deep);
  margin:12px 0; line-height:1.2;
  text-shadow: 0 2px 16px rgba(255,143,171,.2);
}
.hero-name {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,8vw,5.5rem); color:var(--blue-main);
  font-weight:700;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-main), #FFC0CB);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-date {
  font-size:.9rem; letter-spacing:.25em; color:var(--blue-mid);
  margin-top:6px;
}

/* Bouquet section */
.section { padding:60px 20px; max-width:680px; margin:0 auto; }
.section-title {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:1.7rem; color:var(--blue-deep); text-align:center; margin-bottom:8px;
}
.section-divider {
  text-align:center; font-size:1.2rem; margin-bottom:32px; opacity:.5;
}

.bouquet-pot { font-size:4rem; text-align:center; margin-bottom:16px; }
.bouquet-flowers {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.b-flower {
  font-size:2.8rem; cursor:pointer;
  transition: transform .25s;
  filter: grayscale(1) brightness(.7);
  animation: none;
}
.b-flower.bloomed {
  filter: none;
  animation: bloomPop .4s ease;
}
@keyframes bloomPop { 0%{transform:scale(0)} 70%{transform:scale(1.3)} 100%{transform:scale(1)} }
.b-flower:hover { transform:scale(1.15); }
.flower-msg {
  margin-top:18px; min-height:60px;
  font-family:'Playfair Display',serif; font-style:italic;
  color:var(--blue-deep); text-align:center; font-size:1.05rem;
  transition: opacity .4s;
}

/* ─────────────────────────────
    5. LETTER
───────────────────────────── */
.letter-section {
  background: linear-gradient(170deg, #FFF5F7, #FFF0F5);
  padding:70px 20px; position:relative; overflow:hidden;
}
.letter-inner {
  max-width:620px; margin:0 auto;
  background: var(--white);
  border-radius:16px;
  padding:42px 40px;
  box-shadow: 0 8px 40px rgba(255,143,171,.12);
  position:relative; z-index:2;
}
.letter-inner::before {
  content:'';
  position:absolute; inset:0; border-radius:16px;
  border:2px solid rgba(255,182,193,.15);
}
.letter-eyebrow {
  font-size:.75rem; letter-spacing:.3em; color:var(--blue-mid);
  text-transform:uppercase; margin-bottom:18px;
}
.letter-body {
  font-size:1rem; line-height:1.9; color: #4A1525;
}
.letter-body p { margin-bottom:14px; }
.letter-sig {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:1.2rem; color:var(--blue-deep); margin-top:24px;
}
.letter-ps { font-size:.9rem; color:var(--blue-mid); margin-top:10px; }

/* ─────────────────────────────
    6. PHOTO GALLERY
───────────────────────────── */
.gallery-section { background: var(--blue-pale); padding:70px 20px; }
.polaroids {
  display:flex; flex-direction:column; gap:32px;
  align-items:center; max-width:400px; margin:0 auto;
}
.polaroid {
  background:var(--white);
  padding:14px 14px 44px;
  box-shadow: 4px 6px 24px rgba(255,143,171,.18);
  border-radius:4px;
  cursor:pointer; transition:transform .3s;
  width:100%; max-width:320px;
}
.polaroid:nth-child(odd)  { transform:rotate(-2deg); }
.polaroid:nth-child(even) { transform:rotate(2deg); }
.polaroid:hover { transform:scale(1.05) rotate(0deg) !important; z-index:10; }
.polaroid img {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:2px; display:block;
  background: linear-gradient(135deg, #FFE5EC, #FFC0CB);
}
.polaroid-caption {
  font-family:'Playfair Display',serif; font-style:italic;
  text-align:center; margin-top:10px;
  color:var(--blue-deep); font-size:.9rem;
}
/* Lightbox */
#lightbox {
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(74,21,37,.85); align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
#lightbox.active { display:flex; }
#lightbox img {
  max-width:90vw; max-height:80vh; border-radius:8px;
  box-shadow:0 0 60px rgba(255,182,193,.4);
}
#lightbox-close {
  position:absolute; top:20px; right:28px;
  font-size:2.5rem; color:white; cursor:pointer;
}

/* ─────────────────────────────
    7. TIMELINE
───────────────────────────── */
.timeline-section { padding:70px 20px; background: linear-gradient(170deg, #FFF5F7,#FFF0F5); }
.timeline { position:relative; max-width:560px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:22px; top:0; bottom:0;
  width:3px; background:linear-gradient(to bottom,var(--blue-soft),var(--blue-main),var(--blue-soft));
  border-radius:2px;
}
.tl-item {
  display:flex; gap:20px; margin-bottom:36px;
  opacity:0; transform:translateX(-30px);
  transition:all .6s ease;
}
.tl-item.visible { opacity:1; transform:translateX(0); }
.tl-icon {
  width:46px; height:46px; min-width:46px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:0 4px 14px rgba(255,143,171,.3);
  position:relative; z-index:2;
}
.tl-content h4 {
  font-family:'Playfair Display',serif;
  color:var(--blue-deep); font-size:1rem; margin-bottom:4px;
}
.tl-content .tl-label { font-size:.75rem; letter-spacing:.15em; color:var(--blue-mid); text-transform:uppercase; margin-bottom:4px; }
.tl-content p { font-size:.9rem; color:#4A1525; line-height:1.6; }

/* ─────────────────────────────
    8. MUSIC PLAYER
───────────────────────────── */
.music-section { background:var(--blue-pale); padding:70px 20px; }
.player {
  max-width:380px; margin:0 auto;
  background:var(--white);
  border-radius:28px; padding:32px 24px;
  box-shadow:0 8px 40px rgba(255,143,171,.15);
  text-align:center;
}
.vinyl {
  width:150px; height:150px; border-radius:50%;
  background:conic-gradient(#FF8FAB,#FFC0CB,#FFB6C1,#FFE5EC,#FFF0F5,#FF8FAB);
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 32px rgba(255,143,171,.35);
  position:relative; transition: box-shadow .3s;
}
.vinyl.spinning {
  animation: vinylSpin 2.5s linear infinite;
  box-shadow:0 0 48px rgba(255,143,171,.55);
}
@keyframes vinylSpin { to { transform:rotate(360deg); } }
.vinyl-center {
  width:36px; height:36px; border-radius:50%;
  background:var(--white); position:absolute;
  box-shadow: inset 0 2px 6px rgba(255,143,171,.2);
}
.vinyl-note {
  position:absolute; font-size:1rem;
  opacity:0; animation:none;
}
.vinyl.spinning .vinyl-note {
  animation: floatNote 1.8s ease-out infinite;
}
@keyframes floatNote {
  0%   { opacity:0; transform:translateY(0) scale(.8); }
  30% { opacity:1; }
  100%{ opacity:0; transform:translateY(-60px) scale(1.2); }
}
.player-track { font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--blue-deep); margin-bottom:4px; }
.player-artist { font-size:.85rem; color:var(--blue-mid); margin-bottom:16px; }

/* Progress bar */
.progress-wrap {
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.progress-time { font-size:.75rem; color:var(--blue-mid); min-width:34px; }
.progress-bar-bg {
  flex:1; height:5px; border-radius:999px;
  background:var(--blue-soft); cursor:pointer; position:relative;
}
.progress-bar-fill {
  height:100%; border-radius:999px; width:0%;
  background:linear-gradient(90deg,var(--blue-mid),var(--blue-deep));
  transition:width .2s linear; pointer-events:none;
}
.progress-thumb {
  width:13px; height:13px; border-radius:50%;
  background:var(--blue-deep);
  position:absolute; top:50%; transform:translate(-50%,-50%);
  left:0%; transition:left .2s linear;
  box-shadow:0 2px 6px rgba(255,143,171,.4);
}

/* Volume */
.volume-wrap {
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px;
}
.vol-icon { font-size:1rem; color:var(--blue-mid); cursor:pointer; }
.vol-slider {
  -webkit-appearance:none; appearance:none;
  width:100px; height:4px; border-radius:999px;
  background:var(--blue-soft); outline:none; cursor:pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--blue-deep); cursor:pointer;
}

.player-controls { display:flex; justify-content:center; align-items:center; gap:16px; margin-bottom:20px; }
.ctrl-btn {
  width:46px; height:46px; border-radius:50%;
  border:none; cursor:pointer; font-size:1.2rem;
  background:var(--blue-pale); color:var(--blue-deep);
  transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.ctrl-btn.play-btn { background:var(--blue-deep); color:var(--white); width:58px; height:58px; font-size:1.4rem; }
.ctrl-btn:hover { transform:scale(1.1); }
.ctrl-btn:active { transform:scale(.95); }

/* Audio not found notice */
.audio-notice {
  font-size:.75rem; color:var(--blue-mid);
  margin-bottom:12px; min-height:18px; font-style:italic;
}

.playlist { border-top:1px solid var(--blue-soft); padding-top:16px; }
.pl-item {
  display:flex; align-items:center; gap:12px; padding:11px 10px;
  border-radius:10px; cursor:pointer; transition:background .2s;
  font-size:.9rem; color:#4A1525; text-align:left;
}
.pl-item:hover { background:var(--blue-pale); }
.pl-item.active { background:var(--blue-soft); font-weight:700; color:var(--blue-deep); }
.pl-num { width:20px; text-align:center; color:var(--blue-mid); font-size:.8rem; flex-shrink:0; }
.pl-playing { font-size:.9rem; margin-left:auto; animation:pulse 1.2s ease-in-out infinite; }

/* ─────────────────────────────
    9. JAR
───────────────────────────── */
.jar-section { padding:70px 20px; background: linear-gradient(170deg,#FFF5F7,#FFF0F5); }
.jar-wrap { max-width:380px; margin:0 auto; text-align:center; }
.jar-emoji {
  font-size:7rem;
  display:block; cursor:pointer;
  transition:transform .15s;
}
.jar-emoji.shaking { animation:jarShake .5s ease; }
@keyframes jarShake {
  0%,100%{transform:rotate(0)} 20%{transform:rotate(-10deg)} 40%{transform:rotate(10deg)}
  60%{transform:rotate(-8deg)} 80%{transform:rotate(8deg)}
}
.shake-btn {
  margin-top:20px;
  padding:14px 36px; border:none; border-radius:999px;
  background:linear-gradient(135deg,var(--blue-main),var(--blue-deep));
  color:var(--white); font-size:1rem; cursor:pointer;
  box-shadow:0 4px 20px rgba(255,143,171,.3); transition:all .2s;
}
.shake-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,143,171,.4); }
.jar-msg {
  margin-top:24px; min-height:80px;
  font-family:'Playfair Display',serif; font-style:italic;
  color:var(--blue-deep); font-size:1.1rem; line-height:1.7;
  opacity:0; transition:opacity .5s;
}
.jar-msg.show { opacity:1; }

/* ─────────────────────────────
    10. CLOSING & POPUP
───────────────────────────── */
.closing-section {
  min-height:60vh; padding:80px 20px;
  background:linear-gradient(160deg,#FFF0F5,#FFE5EC,#FFB6C120);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.closing-text {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(1.2rem,4vw,1.8rem); color:var(--blue-deep);
  line-height:1.8; max-width:500px;
}
.closing-deco { font-size:2.5rem; margin-top:20px; animation:float 3s ease-in-out infinite; }

/* Birthday popup */
#birthday-popup {
  display:none; position:fixed; inset:0; z-index:9200;
  background:rgba(74,21,37,.7); align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
#birthday-popup.active { display:flex; }
.popup-card {
  background:var(--white); border-radius:24px;
  padding:44px 36px; max-width:360px; width:90%;
  text-align:center; position:relative;
  box-shadow:0 12px 60px rgba(255,143,171,.3);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.popup-cake { font-size:5rem; display:block; margin-bottom:16px;
  animation:cakeFloat 2s ease-in-out infinite;
}
@keyframes cakeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.popup-title {
  font-family:'Playfair Display',serif;
  font-size:1.8rem; color:var(--blue-deep); margin-bottom:8px;
}
.popup-sub { font-size:1rem; color:var(--blue-mid); margin-bottom:28px; }
.popup-close {
  padding:12px 32px; border:none; border-radius:999px;
  background:linear-gradient(135deg,var(--blue-main),var(--blue-deep));
  color:var(--white); font-size:1rem; cursor:pointer;
  box-shadow:0 4px 20px rgba(255,143,171,.3); transition:all .2s;
}
.popup-close:hover { transform:translateY(-2px); }
.popup-close-x {
  position:absolute; top:14px; right:18px;
  font-size:1.4rem; color:var(--blue-mid); cursor:pointer;
  background:none; border:none;
}

/* Scroll reveal */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

@media(max-width:480px){
  .letter-inner { padding:28px 20px; }
  .player { padding:24px 16px; }
}