/* ============================================================
   🎨  STYLE.CSS — semua tampilan ada di sini
   Tema: langit malam berbintang + pesan dalam botol
   ============================================================ */

:root{
  --deep:      #170b16;
  --wine:      #2a1226;
  --wine2:     #3a1830;
  --card-glow: rgba(255,95,150,0.18);
  --gold:      #f0c675;
  --gold-soft: #f7e2ab;
  --pink:      #ff6fa0;
  --pink-deep: #d63c74;
  --ink:       #efe3ea;
  --ink-dim:   rgba(239,227,234,0.72);
  --darkpink-bg: #3a1830;
  --lightpink-bg: #fdeaf3;
  --lightpink-card: #56283b;
  --lightpink-text: #c2185b;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--deep);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x:hidden;
  min-height:100vh;
}
::selection{ background: var(--pink); color:var(--deep); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--deep); }
::-webkit-scrollbar-thumb{ background: var(--pink-deep); border-radius:10px; }

h1,h2,h3{ font-family: var(--font-display); font-weight:600; }
em{ color: var(--gold); font-style: italic; }
a{ color:inherit; text-decoration:none; }
button{ font-family: var(--font-body); }

/* ---------- twinkling stars background ---------- */
#stars{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.star{
  position:absolute; border-radius:50%; background: var(--gold-soft);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.8);} 50%{ opacity:.9; transform:scale(1.15);} }
.drift{ position:absolute; border-radius:50%; background: radial-gradient(circle, rgba(255,111,160,0.25), transparent 70%); filter:blur(2px); animation: floaty linear infinite; }
@keyframes floaty{ 0%{ transform:translateY(0) translateX(0); opacity:0;} 8%{opacity:.7;} 100%{ transform:translateY(-110vh) translateX(30px); opacity:0;} }

/* ============================================================
   GAME SCREEN — mini game sebelum masuk PIN
   ============================================================ */
#gameScreen{
  position:fixed; inset:0; z-index:110;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 10%, #40183a 0%, #170b16 72%);
  transition: opacity .7s ease, visibility .7s ease;
  padding:24px;
}
#gameScreen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.game-card{
  position:relative; width:min(420px, 92vw);
  background: linear-gradient(160deg, #3a1530, #1c0d1a);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px; padding:34px 26px 30px;
  box-shadow: 0 0 0 4px #170b16, 0 0 60px var(--card-glow), inset 0 0 40px rgba(0,0,0,0.5);
  text-align:center;
}
.game-eyebrow{ font-size:.7rem; letter-spacing:.2em; color:var(--pink); opacity:.85; }
.game-title{ font-size:1.3rem; margin-top:8px; color:var(--gold-soft); font-family:var(--font-display); }
.game-sub{ font-size:.82rem; opacity:.7; margin-top:8px; }
.game-progress{ font-size:.75rem; color:var(--pink); margin-top:14px; letter-spacing:.05em; }

.memory-grid{
  margin-top:20px; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.mem-card{
  aspect-ratio:1/1; position:relative; cursor:pointer;
  perspective:600px;
}
.mem-card-inner{
  position:relative; width:100%; height:100%; border-radius:12px;
  transition: transform .45s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.mem-card.flipped .mem-card-inner{ transform: rotateY(180deg); }
.mem-face{
  position:absolute; inset:0; border-radius:12px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.mem-back{
  background: linear-gradient(150deg, #4a1e3e, #2a1226);
  border:1.5px solid rgba(240,198,117,0.35);
}
.mem-back::after{ content:"✦"; color:var(--gold); opacity:.6; font-size:1rem; }
.mem-front{
  background: linear-gradient(150deg, #ffd9e9, #ff9dc0);
  transform: rotateY(180deg);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.3);
}
.mem-card.matched .mem-front{ background: linear-gradient(150deg, var(--gold-soft), var(--gold)); }
.mem-card.matched{ animation: mem-pop .4s ease; }
@keyframes mem-pop{ 50%{ transform:scale(1.08);} }

.game-skip{
  margin-top:22px; font-size:.72rem; color:var(--ink-dim); opacity:.55; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.game-win{
  margin-top:18px; font-size:.85rem; color:var(--gold-soft); opacity:0; height:0; overflow:hidden;
  transition: opacity .4s ease;
}
.game-win.show{ opacity:1; height:auto; margin-top:16px; }
.game-continue{
  margin-top:14px; padding:10px 26px; border-radius:30px; border:none;
  background: var(--pink); color:var(--deep); font-weight:600; font-size:.82rem;
  cursor:pointer; opacity:0; transform:translateY(6px); transition: all .4s ease; pointer-events:none;
}
.game-continue.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* ---------- LOCK SCREEN ---------- */
#lock{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 15%, #40183a 0%, #170b16 72%);
  transition: opacity .8s ease, visibility .8s ease;
}
#lock.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.code-card{
  position:relative; width:min(360px, 88vw); border-radius:32px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,111,160,0.16), transparent 55%),
    linear-gradient(165deg, #2c1327, #1a0c17 80%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px var(--card-glow);
  padding:44px 32px 36px; text-align:center;
}

.code-icon{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  background: rgba(255,111,160,0.1); border:1.5px solid rgba(255,111,160,0.45);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 24px rgba(255,111,160,0.25);
  color: var(--pink); font-size:1.3rem;
}

.lock-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink); opacity:.9;
}
.lock-eyebrow::before{ content:""; width:16px; height:1px; background: var(--pink-deep); opacity:.8; }
.lock-title{
  margin-top:14px; font-size:clamp(1.35rem, 5vw, 1.65rem); line-height:1.28;
  color:var(--gold-soft); font-family:var(--font-display); font-weight:700;
}
.lock-sub{
  margin-top:12px; font-size:.86rem; line-height:1.65; color:var(--ink-dim);
  max-width:30ch; margin-left:auto; margin-right:auto;
}

.pin-boxes{ display:flex; gap:12px; justify-content:center; margin:28px 0 6px; }
.pin-box{
  width:54px; height:54px; border-radius:16px;
  background: rgba(255,255,255,0.04); border:1.5px solid rgba(255,111,160,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--gold-soft); transition: all .2s ease;
}
.pin-box.active{ border-color:var(--pink); box-shadow: 0 0 0 3px rgba(255,111,160,0.18), 0 0 18px rgba(255,111,160,0.35); }
.pin-box.filled{ background: rgba(255,111,160,0.1); border-color: var(--pink); }
.pin-box .dot{ width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); }
#pinInput{ position:absolute; opacity:0; pointer-events:none; }
.pin-hint{ font-size:.72rem; color:var(--ink); opacity:.5; margin-top:2px; }
.pin-error{ font-size:.75rem; color:var(--pink); min-height:16px; margin-top:8px; opacity:0; transition:opacity .3s; }
.pin-error.show{ opacity:1; }
.shake{ animation: shakeit .4s; }
@keyframes shakeit{ 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);} 30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);} }

.unlock-btn{
  margin-top:22px; width:100%; padding:16px 24px; border-radius:999px; border:none;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#2a0d1c; font-family:var(--font-body); font-size:.92rem; font-weight:700;
  letter-spacing:.02em; cursor:pointer; transition: all .25s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 14px 34px rgba(214,60,116,0.4);
}
.unlock-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(214,60,116,0.5); }
.unlock-btn .arrow{ transition: transform .2s ease; }
.unlock-btn:hover .arrow{ transform: translateX(3px); }

/* ---------- LOADING SCREEN ---------- */
#loading{
  position:fixed; inset:0; z-index:90; background: var(--deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  opacity:0; visibility:hidden; transition: opacity .6s ease, visibility .6s ease;
}
#loading.active{ opacity:1; visibility:visible; }
#loading.hidden{ opacity:0; visibility:hidden; }
.loading-label{ font-size:.85rem; letter-spacing:.1em; color:var(--pink); text-transform:uppercase; text-align:center; padding:0 20px; }
.loading-bar-track{ width:min(280px,70vw); height:3px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.loading-bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--pink-deep), var(--gold)); transition: width .15s linear; }
.loading-pct{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold-soft); }

/* ---------- MAIN SITE ---------- */
#site{ opacity:0; transition: opacity 1s ease; position:relative; z-index:5; }
#site.reveal{ opacity:1; }

nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw; backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(23,11,22,0.88), transparent);
  font-size:.85rem;
}
.nav-brand{ font-family:var(--font-display); font-size:1rem; color:var(--gold-soft); letter-spacing:.03em; }
.nav-links{ display:flex; gap:24px; }
.nav-links a{ opacity:.75; transition:opacity .2s; }
.nav-links a:hover{ opacity:1; color:var(--pink); }
.nav-toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; z-index:60;
}
.nav-toggle span{ width:22px; height:2px; background:var(--gold-soft); border-radius:2px; transition: all .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(280px,78vw); height:100vh;
    background: linear-gradient(165deg, #3a1530, #170b16);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:40px; font-size:1rem;
    transform: translateX(100%); transition: transform .4s ease;
    box-shadow: -10px 0 40px rgba(0,0,0,0.5);
  }
  .nav-links.open{ transform: translateX(0); }
}

section{ position:relative; padding:120px 8vw 100px; max-width:1100px; margin:0 auto; }
.eyebrow{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--pink); opacity:.9; margin-bottom:14px; }

/* ---- hero ---- */
#hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:120px; }
.hero-title{ font-size:clamp(2.2rem, 6vw, 4.2rem); line-height:1.15; color:var(--gold-soft); max-width:15ch; }
.hero-sub{ margin-top:22px; font-size:1rem; line-height:1.8; max-width:56ch; color:var(--ink-dim); }
.hero-ctas{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{ padding:12px 26px; border-radius:32px; font-size:.85rem; letter-spacing:.03em; border:1px solid var(--pink-deep); transition: all .25s ease; display:inline-block; }
.btn.primary{ background:var(--pink); color:var(--deep); border-color:var(--pink); }
.btn.primary:hover{ background:transparent; color:var(--pink); }
.btn.ghost:hover{ background:var(--pink); color:var(--deep); }
.scroll-cue{ position:absolute; bottom:36px; left:8vw; font-size:.72rem; opacity:.6; display:flex; align-items:center; gap:10px; }
.scroll-cue .line{ width:1px; height:34px; background:var(--pink-deep); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.curve-wrap{ position:relative; width:100%; height:clamp(34px, 6vw, 78px); overflow:hidden; margin-top:-1px; }
.curve-oval{
  position:absolute; left:-25%; top:0; width:150%; aspect-ratio:9/1;
  border-radius:50%;
}

/* ---- memories ---- */
#memories{ background: var(--wine); }
.timeline{ margin-top:50px; display:flex; flex-direction:column; }
.tl-item{ position:relative; padding:28px 0 28px 40px; border-left:1.5px solid var(--pink-deep); }
.tl-item:last-child{ border-left-color:transparent; }
.tl-item::before{ content:""; position:absolute; left:-6.5px; top:32px; width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.tl-date{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pink); }
.tl-title{ font-size:1.35rem; margin:6px 0 8px; color:var(--gold-soft); }
.tl-text{ font-size:.95rem; line-height:1.75; opacity:.85; max-width:60ch; }

/* ---- gallery ---- */
#gallery{ background: var(--deep); }
.gallery-grid{ margin-top:46px; column-count:3; column-gap:18px; }
@media (max-width:900px){ .gallery-grid{ column-count:2; } }
@media (max-width:560px){ .gallery-grid{ column-count:1; } }
.g-item{ break-inside:avoid; margin-bottom:18px; border-radius:16px; overflow:hidden; position:relative; cursor:pointer; border:1px solid rgba(255,111,160,0.18); }
.g-item img{ width:100%; display:block; transition: transform .5s ease, filter .5s ease; filter:saturate(.9) brightness(.92); }
.g-item:hover img{ transform:scale(1.04); filter:saturate(1.05) brightness(1); }
.g-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); font-size:.8rem; opacity:0; transition:opacity .3s; }
.g-item:hover .g-cap{ opacity:1; }

#lightbox{ position:fixed; inset:0; background:rgba(10,4,9,0.94); z-index:80; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; padding:5vw; }
#lightbox.active{ opacity:1; visibility:visible; }
#lightbox img{ max-width:90vw; max-height:80vh; border-radius:12px; }
#lightbox .lb-close{ position:absolute; top:26px; right:34px; font-size:1.6rem; color:var(--gold-soft); cursor:pointer; }
#lightbox .lb-cap{ position:absolute; bottom:40px; text-align:center; width:100%; font-size:.9rem; color:var(--ink); }

/* ---- letter / bottle ---- */
#letter{ background: var(--wine2); text-align:center; }
.bottle-wrap{ margin:50px auto 0; display:flex; flex-direction:column; align-items:center; }
.bottle{ width:110px; height:220px; cursor:pointer; animation: bob 4s ease-in-out infinite; transition: transform .3s ease; }
.bottle:hover{ transform: scale(1.06) rotate(-3deg); }
@keyframes bob{ 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-14px) rotate(2deg);} }
.bottle-hint{ margin-top:18px; font-size:.8rem; opacity:.7; letter-spacing:.05em; }

#letterModal{ position:fixed; inset:0; z-index:85; background:rgba(10,4,9,0.9); display:flex; align-items:center; justify-content:center; padding:5vw; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease; }
#letterModal.active{ opacity:1; visibility:visible; }

.letter-card{
  position:relative; max-width:560px; width:100%; max-height:82vh; overflow-y:auto;
  border-radius:26px; padding:46px 40px;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,111,160,0.22), transparent 60%),
    linear-gradient(165deg, #402038, #1c0d1a 75%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  text-align:left;
}
@media (max-width:560px){ .letter-card{ padding:38px 24px; } }
.letter-card .glow-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 20px 6px var(--pink); left:50%; top:58%; animation: pulse 2.4s ease-in-out infinite; }
.lb-close{ position:absolute; top:16px; right:20px; font-size:1.4rem; color:var(--ink); cursor:pointer; z-index:2; }
.letter-greeting{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--gold); margin-bottom:20px; }
.letter-body{ font-size:1rem; line-height:1.9; color:var(--ink-dim); min-height:120px; }
.type-cursor{ display:inline-block; width:2px; background:var(--pink); margin-left:2px; animation: blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.letter-hr{ border:none; border-top:1px solid rgba(255,255,255,0.12); margin:26px 0 20px; }
.letter-sign{ text-align:right; font-family:var(--font-display); font-style:italic; color:var(--gold-soft); opacity:.9; }

/* ---- wishes (shaped cards) ---- */
#wishes{ background: var(--wine); }
.wishes-grid{ margin-top:46px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.wish-card{
  position:relative; overflow:hidden;
  background: radial-gradient(circle at 100% 100%, rgba(255,111,160,0.15), transparent 60%),
              linear-gradient(160deg, #3a1830, #200f1c);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px; padding:28px 24px 26px;
  font-size:.94rem; line-height:1.75; color:var(--ink-dim);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wish-card:hover{ transform: translateY(-5px); box-shadow:0 18px 40px rgba(0,0,0,0.35); }
.wish-icon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(240,198,117,0.12); border:1px solid rgba(240,198,117,0.3); font-size:1.1rem; margin-bottom:16px;
}
.wish-quote{ position:absolute; top:10px; right:20px; font-family:var(--font-display); font-size:3rem; color:var(--pink); opacity:.28; line-height:1; }

/* ---- playlist (manual list, light pink cards) ---- */
#playlist{ background: var(--deep); }
.playlist-widget{
  margin-top:44px; background: var(--darkpink-bg); border-radius:26px; padding:36px 30px;
}
@media (max-width:560px){ .playlist-widget{ padding:26px 18px; } }
.playlist-widget h3{ color:var(--lightpink-text); font-size:1.5rem; }
.playlist-widget .pw-sub{ color:var(--lightpink-text); opacity:.8; font-size:.9rem; margin-top:8px; }
.track-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.track-row{
  background: var(--lightpink-card); border-radius:16px; padding:18px 22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; align-items:center;
  transition: transform .2s ease;
}
.track-row:hover{ transform: translateX(4px); }
.track-left .track-num{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#8e6c8a; }
.track-left .track-label{ font-weight:700; color:#a1808f; font-size:1.02rem; margin:2px 0; }
.track-left .track-song{ font-style:italic; color:#7a626d; font-size:.9rem; }
.track-right{ font-size:.85rem; color:#b77595; max-width:320px; opacity:.85; }
@media (max-width:640px){ .track-right{ max-width:100%; } }

.spotify-intro{ margin-top:34px; font-size:.92rem; color:var(--ink-dim); }
.spotify-embed-real{ margin-top:16px; border-radius:16px; overflow:hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.spotify-embed-real iframe{ width:100%; border-radius:16px; border:0; display:block; }

/* fallback mockup card (only used if no embed URL supplied) */
.spotify-card{
  margin-top:16px; background:#181818; border-radius:16px; padding:22px 22px 8px; color:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.spotify-top{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.spotify-cover{ width:72px; height:72px; border-radius:8px; object-fit:cover; background:linear-gradient(135deg,#3a1830,#7a1f4d); flex-shrink:0; }
.spotify-meta{ flex:1; min-width:0; }
.spotify-meta h4{ font-family:var(--font-body); font-size:1.15rem; font-weight:700; }
.spotify-badges{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:.78rem; color:#b3b3b3; }
.spotify-preview-badge{ background:#333; padding:2px 8px; border-radius:4px; font-size:.68rem; letter-spacing:.03em; }
.spotify-save{ display:flex; align-items:center; gap:6px; cursor:pointer; opacity:.9; }
.spotify-logo{ margin-left:auto; color:#1DB954; font-size:1.3rem; }
.spotify-tracklist{ margin-top:18px; border-top:1px solid #282828; }
.sp-track{ display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid #242424; font-size:.9rem; }
.sp-track .sp-num{ width:16px; color:#b3b3b3; font-size:.85rem; }
.sp-track .sp-name{ font-weight:600; }
.sp-track .sp-artist{ color:#b3b3b3; font-size:.8rem; }
.sp-track .sp-dur{ margin-left:auto; color:#b3b3b3; font-size:.82rem; }

/* ---- closing ---- */
#closing{ text-align:center; padding-bottom:60px; background: var(--wine2); }
.closing-title{ font-size:clamp(1.8rem,4.5vw,2.8rem); color:var(--gold-soft); }
.closing-text{ max-width:60ch; margin:24px auto 0; opacity:.88; line-height:1.85; font-size:.98rem; color:var(--ink-dim); }
.make-a-wish{
  margin:38px auto 0; width:fit-content; padding:14px 30px; border-radius:32px;
  background: var(--pink); color:var(--deep); font-weight:600; letter-spacing:.03em;
  cursor:pointer; border:none; font-family:var(--font-body); font-size:.9rem; transition: transform .2s ease;
}
.make-a-wish:hover{ transform: scale(1.05); }
footer{ text-align:center; padding:30px 8vw 50px; font-size:.75rem; opacity:.55; background: var(--wine2); }

.confetti{ position:fixed; top:-10px; z-index:200; pointer-events:none; border-radius:2px; }

/* ============================================================
   FLOATING MUSIC PLAYER — lagu yang otomatis tersedia di seluruh situs
   ============================================================ */
#musicPlayer{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:250px; border-radius:20px; overflow:hidden;
  background: linear-gradient(165deg, #3a1530, #1c0d1a);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 40px var(--card-glow);
  transition: transform .35s ease, opacity .35s ease;
  font-size:.85rem;
}
#musicPlayer.collapsed{ width:56px; height:56px; border-radius:50%; }
#musicPlayer.collapsed .mp-body{ display:none; }
#musicPlayer.hide-player{ transform: translateY(140%); opacity:0; pointer-events:none; }

.mp-cover-wrap{ position:relative; }
.mp-cover{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  background: radial-gradient(circle at 30% 20%, #7a1f4d, #2a1226);
}
.mp-cover-fallback{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, #7a1f4d, #2a1226);
  font-size:2rem; color: var(--gold-soft);
}
.mp-collapse-btn{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background: rgba(0,0,0,0.45); color:var(--gold-soft); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; line-height:1;
}
#musicPlayer.collapsed .mp-cover-wrap{ width:56px; height:56px; }
#musicPlayer.collapsed .mp-cover, #musicPlayer.collapsed .mp-cover-fallback{ border-radius:50%; }
#musicPlayer.collapsed .mp-collapse-btn{ inset:0; width:56px; height:56px; border-radius:50%; background:rgba(23,11,22,0.55); font-size:1rem; }

.mp-body{ padding:14px 16px 16px; }
.mp-title{ font-weight:600; color:var(--gold-soft); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-artist{ color:var(--pink); font-size:.76rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mp-progress-track{
  margin-top:12px; height:4px; border-radius:4px; background:rgba(255,255,255,0.12);
  cursor:pointer; position:relative;
}
.mp-progress-fill{ height:100%; border-radius:4px; background: linear-gradient(90deg, var(--pink-deep), var(--gold)); width:0%; }
.mp-time-row{ display:flex; justify-content:space-between; font-size:.65rem; opacity:.6; margin-top:5px; }

.mp-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:12px; }
.mp-btn{
  background:none; border:none; color:var(--ink); cursor:pointer; font-size:1rem;
  opacity:.85; transition: opacity .2s, transform .2s;
}
.mp-btn:hover{ opacity:1; transform: scale(1.1); }
.mp-play{
  width:38px; height:38px; border-radius:50%; background:var(--pink);
  color:var(--deep); display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.mp-play:hover{ transform: scale(1.08); }

@media (max-width:560px){
  #musicPlayer{ left:14px; right:14px; bottom:14px; width:auto; }
  #musicPlayer.collapsed{ left:auto; width:56px; height:56px; }
}