/* =========================================================
   UNTUK PRINCES YAYA — PREMIUM CINEMATIC ROMANTIC WEBSITE
   Design tokens:
   - Base: Midnight Blue #14102A / #1A1030
   - Accent: Rose Gold #E8B4B8, Champagne Gold #E7C79A
   - Accent 2: Lavender #C9B6E4, Purple Glow #8B5FBF
   - Soft Pink #F5C6D6, White #FDF8F5
   - Display font: Playfair Display / Cormorant Garamond (italic accents)
   - Body font: Poppins
========================================================= */

:root{
  --midnight: #120c26;
  --midnight-2: #1c1440;
  --purple: #6c3fc5;
  --purple-glow: #8b5fbf;
  --rose-gold: #e8b4b8;
  --champagne: #e7c79a;
  --lavender: #c9b6e4;
  --pink: #f5c6d6;
  --white: #fdf8f5;
  --ink: #f1ebff;
  --muted: #b8aed6;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.14);
  --shadow-soft: 0 20px 60px rgba(0,0,0,0.45);
  --radius: 22px;
  --font-display: 'Playfair Display', serif;
  --font-script: 'Cormorant Garamond', serif;
  --font-body: 'Poppins', sans-serif;
  --transition-slow: .8s cubic-bezier(.22,1,.36,1);
  --transition: .35s cubic-bezier(.22,1,.36,1);
}

html.light{
  --midnight: #fdf6f8;
  --midnight-2: #ffffff;
  --ink: #2a1e42;
  --muted: #6c5f8a;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(140,90,180,0.18);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: linear-gradient(160deg, var(--midnight) 0%, var(--midnight-2) 55%, var(--midnight) 100%);
  color: var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  transition: background var(--transition-slow), color var(--transition-slow);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.hidden{display:none !important;}
img{max-width:100%;display:block;}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit;}
input{font-family:inherit;}
::selection{background:var(--purple-glow);color:#fff;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--purple-glow);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============ AMBIENT BACKGROUND LAYERS ============ */
#bg-aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(139,95,191,.35), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 15%, rgba(232,180,184,.25), transparent 60%),
    radial-gradient(ellipse 55% 45% at 50% 90%, rgba(201,182,228,.22), transparent 60%);
  animation: auroraShift 18s ease-in-out infinite alternate;
  filter: blur(10px);
}
@keyframes auroraShift{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-2%,3%) scale(1.08); }
  100%{ transform: translate(3%,-2%) scale(1.03); }
}
#bg-particles{position:fixed; inset:0; z-index:1; pointer-events:none;}

#cursor-trail{
  position:fixed; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, var(--rose-gold), transparent 70%);
  pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
  transition: width .2s, height .2s; mix-blend-mode:screen;
}
#mouse-light{
  position:fixed; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,180,184,.10), transparent 70%);
  pointer-events:none; z-index:2; transform:translate(-50%,-50%);
}
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--rose-gold), var(--purple-glow), var(--champagne));
  z-index:9999; transition: width .1s;
}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, var(--midnight-2), var(--midnight));
  transition: opacity 1s ease, visibility 1s ease;
}
#preloader.fade-out{opacity:0; visibility:hidden;}
.preloader-inner{text-align:center;}
.love-logo{
  font-size:3.2rem; color:var(--rose-gold);
  animation: heartbeat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(232,180,184,.7));
  margin-bottom:14px;
}
@keyframes heartbeat{
  0%,100%{transform:scale(1);} 25%{transform:scale(1.15);} 40%{transform:scale(0.98);} 55%{transform:scale(1.1);}
}
.preload-title{font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--ink); margin-bottom:22px; letter-spacing:.5px;}
.progress-track{width:220px; height:4px; border-radius:4px; background:rgba(255,255,255,.12); margin:0 auto; overflow:hidden;}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--rose-gold),var(--purple-glow)); box-shadow:0 0 12px var(--purple-glow); transition:width .2s;}
.progress-percent{margin-top:10px; font-size:.8rem; letter-spacing:2px; color:var(--muted);}
.preload-sub{margin-top:6px; font-size:.72rem; color:var(--muted); font-style:italic;}

/* ============ GLASS ============ */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ============ SCREENS ============ */
.screen{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;}

/* ============ LOGIN ============ */
#loginScreen{ overflow:hidden; background: linear-gradient(160deg, var(--midnight), var(--midnight-2)); }
#loginBgAurora{
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(139,95,191,.4), transparent 55%),
              radial-gradient(circle at 75% 80%, rgba(232,180,184,.3), transparent 55%);
  animation: auroraShift 12s ease-in-out infinite alternate;
}
.login-card{
  position:relative; z-index:2; padding:44px 34px; width:min(90vw, 380px); text-align:center;
  animation: floatCard 5s ease-in-out infinite;
}
@keyframes floatCard{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.login-heart{font-size:2.4rem; color:var(--rose-gold); margin-bottom:8px; filter:drop-shadow(0 0 14px rgba(232,180,184,.6));}
.login-title{font-family:var(--font-display); font-size:1.6rem; margin-bottom:6px;}
.login-sub{color:var(--muted); font-size:.85rem; margin-bottom:22px;}
.pin-dots{display:flex; gap:14px; justify-content:center; margin-bottom:18px;}
.pin-dots .dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--rose-gold); transition:var(--transition);}
.pin-dots .dot.filled{background:var(--rose-gold); box-shadow:0 0 10px var(--rose-gold);}
.pin-input{
  position:absolute; opacity:0; pointer-events:none;
}
.login-card.shake{animation: shake .45s ease;}
@keyframes shake{
  10%,90%{transform:translateX(-6px);} 20%,80%{transform:translateX(8px);}
  30%,50%,70%{transform:translateX(-12px);} 40%,60%{transform:translateX(12px);}
}
.pin-error{color:#ff8fa3; font-size:.8rem; margin-top:12px; opacity:0; transition:opacity .3s;}
.pin-error.show{opacity:1;}

.door{position:fixed; top:0; bottom:0; width:50%; z-index:150; background:linear-gradient(160deg, var(--midnight-2), var(--midnight)); box-shadow: 0 0 60px rgba(0,0,0,.6);}
.door-left{left:0; transform-origin:left; transition: transform 1.4s cubic-bezier(.7,0,.3,1);}
.door-right{right:0; transform-origin:right; transition: transform 1.4s cubic-bezier(.7,0,.3,1);}
.door.open.door-left{transform: rotateY(-100deg) translateX(-6%);}
.door.open.door-right{transform: rotateY(100deg) translateX(6%);}
.door-light{
  position:fixed; inset:0; z-index:140; background:radial-gradient(circle, rgba(255,240,220,0), rgba(255,240,220,0));
  pointer-events:none; opacity:0; transition:opacity 1s ease;
}
.door-light.flash{background:radial-gradient(circle, rgba(255,240,220,.9), rgba(255,240,220,0) 70%); opacity:1;}

/* ============ BUTTONS ============ */
.btn-primary{
  padding:13px 30px; border-radius:40px; font-weight:600; font-size:.9rem;
  color:#2a1730; background: linear-gradient(120deg, var(--rose-gold), var(--champagne));
  box-shadow: 0 8px 24px rgba(232,180,184,.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 14px 30px rgba(232,180,184,.5);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-ghost{
  padding:10px 22px; border-radius:40px; font-size:.82rem; font-weight:500;
  color:var(--ink); border:1px solid var(--glass-border); background:var(--glass-bg);
  backdrop-filter:blur(10px); transition:var(--transition);
}
.btn-ghost:hover{border-color:var(--rose-gold); color:var(--rose-gold);}

.magnetic{will-change:transform;}

/* ============ APP SHELL / NAV ============ */
#app{position:relative; z-index:5; min-height:100vh; padding-bottom:100px;}
.nav-toggle{
  position:fixed; top:18px; left:18px; z-index:200; width:46px; height:46px; border-radius:50%;
  background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  box-shadow:var(--shadow-soft);
}
.nav-toggle span{width:18px; height:2px; background:var(--rose-gold); border-radius:2px; transition:var(--transition);}
.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);}

.back-to-top{
  position:fixed; bottom:90px; right:18px; z-index:150; width:44px; height:44px; border-radius:50%;
  background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:var(--transition); font-size:1.1rem; color:var(--rose-gold);
}
.back-to-top.show{opacity:1; pointer-events:auto;}

.side-nav{
  position:fixed; top:0; left:0; bottom:0; width:min(86vw,340px); z-index:190;
  background:linear-gradient(180deg, rgba(20,14,42,.97), rgba(28,20,64,.97));
  backdrop-filter:blur(20px); border-right:1px solid var(--glass-border);
  transform:translateX(-105%); transition: transform var(--transition-slow);
  padding:80px 20px 20px; overflow-y:auto;
}
.side-nav.open{transform:translateX(0);}
.side-nav-title{font-family:var(--font-display); font-size:1.3rem; color:var(--rose-gold); margin-bottom:16px;}
.side-nav-grid{display:flex; flex-direction:column; gap:4px;}
.side-nav-grid button{
  text-align:left; padding:11px 14px; border-radius:14px; font-size:.9rem; color:var(--ink);
  transition:var(--transition); display:flex; align-items:center; gap:10px;
}
.side-nav-grid button:hover, .side-nav-grid button.active{background:rgba(232,180,184,.12); color:var(--rose-gold);}
.side-nav-footer{margin-top:24px; font-size:.72rem; color:var(--muted); text-align:center; font-style:italic;}

#navOverlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:180; opacity:0; pointer-events:none; transition:opacity var(--transition);}
#navOverlay.show{opacity:1; pointer-events:auto;}

/* ============ PAGES ============ */
main#pages{max-width:1080px; margin:0 auto; padding:90px 20px 40px;}
.page{display:none; animation: pageIn .6s cubic-bezier(.22,1,.36,1);}
.page.active{display:block;}
@keyframes pageIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.page-title{font-family:var(--font-display); font-size:1.8rem; margin-bottom:24px; color:var(--ink);
  display:flex; align-items:center; gap:10px;}
.muted{color:var(--muted);}
.small{font-size:.78rem;}

/* HOME */
.home-hero{text-align:center; padding:20px 0 50px;}
.eyebrow{letter-spacing:4px; text-transform:uppercase; font-size:.72rem; color:var(--rose-gold); margin-bottom:14px;}
.home-title{font-family:var(--font-display); font-size:clamp(2rem,7vw,3.4rem); line-height:1.15; min-height:1.3em; margin-bottom:16px;}
.home-title::after{content:'|'; animation:blink 1s step-start infinite; color:var(--rose-gold);}
@keyframes blink{50%{opacity:0;}}
.home-desc{max-width:560px; margin:0 auto 28px; color:var(--muted); font-size:.95rem; line-height:1.7;}

.menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:20px;}
.menu-card{
  padding:26px 12px; text-align:center; border-radius:20px; background:var(--glass-bg);
  border:1px solid var(--glass-border); backdrop-filter:blur(14px); transition:var(--transition);
  display:flex; flex-direction:column; gap:8px; align-items:center; cursor:pointer;
}
.menu-card .icon{font-size:1.7rem;}
.menu-card .label{font-size:.82rem; font-weight:500;}
.menu-card:hover{transform:translateY(-6px); border-color:var(--rose-gold); box-shadow:0 14px 30px rgba(139,95,191,.3);}

/* TABS */
.tabs{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
.tab{padding:9px 18px; border-radius:30px; background:var(--glass-bg); border:1px solid var(--glass-border); font-size:.82rem; transition:var(--transition);}
.tab.active{background:linear-gradient(120deg,var(--rose-gold),var(--champagne)); color:#2a1730; font-weight:600;}

/* LETTER */
.letter-paper{padding:36px 30px; font-family:var(--font-script); font-size:1.15rem; line-height:2; color:var(--ink); white-space:pre-wrap; max-height:70vh; overflow-y:auto;}
.letter-paper::first-letter{font-size:2.4rem; color:var(--rose-gold); font-family:var(--font-display);}

/* GALLERY */
.gallery-controls{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; align-items:center;}
.search-input{padding:10px 16px; border-radius:30px; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--ink); flex:1; min-width:180px;}
.filter-chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{padding:7px 15px; border-radius:30px; background:var(--glass-bg); border:1px solid var(--glass-border); font-size:.78rem; transition:var(--transition);}
.chip.active{background:var(--rose-gold); color:#2a1730; font-weight:600;}
.masonry{columns:2 220px; column-gap:12px;}
@media(min-width:640px){.masonry{columns:3 220px;}}
.masonry-item{break-inside:avoid; margin-bottom:12px; position:relative; border-radius:16px; overflow:hidden; cursor:pointer; border:6px solid #fff8; box-shadow:0 10px 24px rgba(0,0,0,.35); transition:var(--transition);}
.masonry-item:hover{transform:scale(1.03) rotate(-.5deg);}
.masonry-item img{width:100%; display:block;}
.masonry-item .cap{position:absolute; bottom:0; left:0; right:0; padding:10px 8px 6px; font-size:.7rem; background:linear-gradient(0deg,rgba(0,0,0,.7),transparent); color:#fff; opacity:0; transition:var(--transition);}
.masonry-item:hover .cap{opacity:1;}
.masonry-item .fav-btn{position:absolute; top:6px; right:6px; font-size:1rem; background:rgba(0,0,0,.35); border-radius:50%; width:28px; height:28px;}

/* LIGHTBOX */
.lightbox{position:fixed; inset:0; z-index:5000; background:rgba(10,6,20,.94); display:flex; align-items:center; justify-content:center; flex-direction:column; backdrop-filter:blur(6px);}
.lightbox img{max-width:88vw; max-height:72vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6);}
.lightbox-caption{color:var(--ink); margin-top:14px; font-style:italic; font-family:var(--font-script); font-size:1.1rem;}
.lightbox-close{position:absolute; top:20px; right:20px; font-size:1.4rem; color:#fff; width:44px; height:44px;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); font-size:2.2rem; color:#fff; width:50px; height:50px;}
.lightbox-prev{left:6px;} .lightbox-next{right:6px;}

/* GAME */
.game-select{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-bottom:24px;}
.game-card{padding:20px 8px; text-align:center; border-radius:18px; background:var(--glass-bg); border:1px solid var(--glass-border); font-size:.8rem; transition:var(--transition);}
.game-card:hover{border-color:var(--rose-gold); transform:translateY(-4px);}
.game-area{min-height:120px;}
.memory-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:420px; margin:0 auto;}
.memory-card{aspect-ratio:1; border-radius:12px; background:linear-gradient(135deg,var(--purple),var(--purple-glow)); display:flex; align-items:center; justify-content:center; font-size:1.6rem; cursor:pointer; transition:transform .4s;}
.memory-card.flipped{background:var(--glass-bg); border:1px solid var(--rose-gold);}
.memory-card.matched{opacity:.35; pointer-events:none;}
.blur-photo{max-width:320px; margin:0 auto 16px; border-radius:16px; overflow:hidden;}
.blur-photo img{filter:blur(18px); transition:filter 1s;}
.blur-photo.revealed img{filter:blur(0);}
.catch-zone{position:relative; height:340px; border-radius:18px; background:var(--glass-bg); border:1px solid var(--glass-border); overflow:hidden;}
.catch-heart{position:absolute; font-size:1.6rem; cursor:pointer; animation:fallHeart linear forwards;}
@keyframes fallHeart{from{transform:translateY(-20px);} to{transform:translateY(340px);}}
.quiz-box{text-align:center;}
.quiz-opts{display:grid; gap:10px; margin-top:16px; max-width:360px; margin-left:auto; margin-right:auto;}
.quiz-opts button{padding:12px; border-radius:14px; background:var(--glass-bg); border:1px solid var(--glass-border);}
.wheel-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
.wheel{width:240px; height:240px; border-radius:50%; background:conic-gradient(var(--rose-gold) 0 20%, var(--purple-glow) 20% 40%, var(--champagne) 40% 60%, var(--lavender) 60% 80%, var(--pink) 80% 100%); position:relative; transition:transform 4s cubic-bezier(.17,.67,.32,1.32);}
.wheel-pointer{position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:1.4rem;}

/* COUNTDOWN */
.countdown-list{display:flex; flex-direction:column; gap:20px;}
.countdown-card{padding:26px 22px; text-align:center;}
.countdown-card h3{font-family:var(--font-display); font-size:1.2rem; margin-bottom:2px;}
.countdown-card .cd-sub{color:var(--muted); font-size:.8rem; margin-bottom:16px;}
.cd-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:420px; margin:0 auto;}
@media(min-width:480px){.cd-grid{grid-template-columns:repeat(6,1fr);}}
.cd-unit{background:rgba(255,255,255,.06); border-radius:12px; padding:10px 4px;}
.cd-unit .num{font-size:1.3rem; font-weight:700; color:var(--rose-gold); font-family:var(--font-display);}
.cd-unit .lbl{font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px;}

/* MUSIC PAGE */
.music-page{padding:30px 22px; text-align:center; max-width:420px; margin:0 auto;}
.album-art-wrap{position:relative; width:180px; height:180px; margin:0 auto 16px;}
.album-art{width:180px; height:180px; border-radius:50%; background:conic-gradient(var(--rose-gold),var(--purple-glow),var(--champagne),var(--rose-gold)); display:flex; align-items:center; justify-content:center; font-size:3rem; animation:spinSlow 12s linear infinite; box-shadow:0 0 40px rgba(139,95,191,.4);}
.album-art.paused{animation-play-state:paused;}
@keyframes spinSlow{from{transform:rotate(0);} to{transform:rotate(360deg);}}
#visualizerBig{position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); opacity:.8;}
.track-title{font-family:var(--font-display); font-size:1.15rem; margin-top:36px;}
.track-artist{color:var(--muted); font-size:.85rem; margin-bottom:16px;}
.progress-bar-wrap{display:flex; align-items:center; gap:8px; font-size:.7rem; color:var(--muted);}
.seek-slider{flex:1;}
input[type=range]{-webkit-appearance:none; height:4px; border-radius:4px; background:rgba(255,255,255,.15); outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--rose-gold); box-shadow:0 0 8px var(--rose-gold); cursor:pointer;}
.player-controls-big{display:flex; align-items:center; justify-content:center; gap:16px; margin:18px 0;}
.ctrl-btn{font-size:1.2rem; width:44px; height:44px; border-radius:50%; background:var(--glass-bg); border:1px solid var(--glass-border); transition:var(--transition);}
.ctrl-btn:hover{border-color:var(--rose-gold);}
.ctrl-main{width:56px; height:56px; font-size:1.4rem; background:linear-gradient(120deg,var(--rose-gold),var(--champagne)); color:#2a1730;}
.volume-wrap{display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:16px;}
.volume-wrap input{width:120px;}
.playlist{text-align:left; margin-top:10px;}
.playlist-item{display:flex; justify-content:space-between; padding:10px 12px; border-radius:12px; margin-bottom:6px; background:rgba(255,255,255,.04); cursor:pointer; font-size:.85rem; transition:var(--transition);}
.playlist-item.active{background:rgba(232,180,184,.15); color:var(--rose-gold);}

/* MINI PLAYER */
.mini-player{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:150; display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; max-width:92vw;}
.mini-art{width:36px; height:36px; border-radius:50%; background:conic-gradient(var(--rose-gold),var(--purple-glow)); display:flex; align-items:center; justify-content:center; font-size:1rem; animation:spinSlow 10s linear infinite;}
.mini-art.paused{animation-play-state:paused;}
.mini-info{min-width:0;}
.mini-title{font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px;}
.mini-artist{font-size:.68rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px;}

/* MEMORY BOOK / FLIPBOOK */
.memory-book, .flipbook{display:flex; flex-direction:column; gap:16px;}
.book-page{padding:24px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;}
.book-page img{border-radius:14px; max-height:280px; object-fit:cover;}
.book-page p{font-family:var(--font-script); font-size:1.1rem; color:var(--ink); font-style:italic;}

/* DREAM BOARD */
.dream-board{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.dream-item{padding:24px 14px; text-align:center; border-radius:18px; background:var(--glass-bg); border:1px solid var(--glass-border); transition:var(--transition);}
.dream-item:hover{transform:translateY(-4px); border-color:var(--champagne);}
.dream-item .di-icon{font-size:1.8rem; margin-bottom:8px;}
.dream-item .di-title{font-weight:600; font-size:.88rem; margin-bottom:4px;}
.dream-item .di-desc{font-size:.75rem; color:var(--muted);}

/* SURPRISE */
.surprise-stage{min-height:60vh; display:flex; align-items:center; justify-content:center; position:relative; border-radius:24px; overflow:hidden;}
.surprise-stage.active{background:#050310;}
.surprise-reveal{font-family:var(--font-display); font-size:clamp(1.6rem,6vw,2.6rem); text-align:center; color:var(--rose-gold); text-shadow:0 0 30px rgba(232,180,184,.6); opacity:0; transition:opacity 1.5s ease;}
.surprise-reveal.show{opacity:1;}

/* DIARY */
.diary-list{display:flex; flex-direction:column; gap:14px;}
.diary-entry{padding:20px; }
.diary-entry .d-date{font-size:.72rem; color:var(--rose-gold); letter-spacing:1px; margin-bottom:6px;}
.diary-entry p{font-family:var(--font-script); font-size:1.05rem; line-height:1.7;}

/* NIGHT SKY */
.night-sky{position:relative; min-height:60vh; border-radius:24px; overflow:hidden; background:radial-gradient(ellipse at center, #1c1440, #0a0618); display:flex; align-items:center; justify-content:center;}
.night-quote{font-family:var(--font-script); font-style:italic; font-size:1.1rem; color:var(--lavender); text-align:center; max-width:80%; z-index:2; transition:var(--transition);}
.star{position:absolute; border-radius:50%; background:#fff; cursor:pointer;}

/* OUR STORY TIMELINE */
.timeline{position:relative; padding-left:26px;}
.timeline::before{content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--rose-gold),var(--purple-glow),var(--champagne));}
.timeline-item{position:relative; padding-bottom:34px; opacity:0; transform:translateY(20px); transition:opacity .8s, transform .8s;}
.timeline-item.visible{opacity:1; transform:translateY(0);}
.timeline-item::before{content:''; position:absolute; left:-26px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--rose-gold); box-shadow:0 0 12px var(--rose-gold);}
.timeline-item .t-date{font-size:.72rem; color:var(--rose-gold); letter-spacing:1px; margin-bottom:4px;}
.timeline-item h4{font-family:var(--font-display); font-size:1.1rem; margin-bottom:6px;}
.timeline-item p{color:var(--muted); font-size:.88rem; line-height:1.6;}
.timeline-item img{margin-top:10px; border-radius:14px; max-height:220px; object-fit:cover;}

/* QUOTES */
.quote-stage{min-height:220px; display:flex; align-items:center; justify-content:center; padding:30px; text-align:center;}
.quote-text{font-family:var(--font-script); font-style:italic; font-size:1.4rem; line-height:1.6; color:var(--ink);}

/* BUCKET LIST */
.bucket-list{padding:24px;}
.bucket-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--glass-border);}
.bucket-item:last-child{border-bottom:none;}
.bucket-item input{width:18px; height:18px; accent-color:var(--rose-gold);}
.bucket-item.done span{text-decoration:line-through; color:var(--muted);}

/* MAP */
.memory-map, .pertemuan-map{height:340px; border-radius:20px; overflow:hidden; margin-bottom:16px; filter:saturate(.9);}
.map-info{padding:20px; min-height:60px;}
.pertemuan-map-wrap{padding:24px; margin:24px 0; text-align:center;}
.pertemuan-map-wrap h3{font-family:var(--font-display); margin-bottom:4px;}
.pertemuan-timeline{margin-bottom:24px;}
.pertemuan-narrative{padding:26px 22px; margin:24px 0; font-family:var(--font-script); font-size:1.1rem; line-height:1.9;}
.pulse-marker{width:18px; height:18px; border-radius:50%; background:var(--rose-gold); box-shadow:0 0 0 rgba(232,180,184,.6); animation:pulseMarker 2s infinite;}
@keyframes pulseMarker{0%{box-shadow:0 0 0 0 rgba(232,180,184,.6);} 70%{box-shadow:0 0 0 16px rgba(232,180,184,0);} 100%{box-shadow:0 0 0 0 rgba(232,180,184,0);}}

/* CINEMATIC STORY */
.cinema-stage{position:relative; min-height:70vh; border-radius:24px; overflow:hidden; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center;}
.cinema-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.4), rgba(10,6,20,.85)); pointer-events:none;}
.cinema-chapter{font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--champagne); z-index:2; margin-bottom:20px; letter-spacing:1px;}
.cinema-text{font-family:var(--font-script); font-size:1.2rem; line-height:2; color:var(--ink); max-width:600px; z-index:2; min-height:200px;}
.cinema-photos{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:26px; z-index:2; max-width:600px;}
.cinema-photos img{border-radius:12px; opacity:0; animation:fadeInPhoto 1s forwards;}
@keyframes fadeInPhoto{to{opacity:1;}}
.light-rain span{position:absolute; width:1px; height:60px; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.5)); animation:rainFall linear infinite;}
@keyframes rainFall{from{transform:translateY(-60px);} to{transform:translateY(110vh);}}

/* SONG MEANING */
.song-meaning-list{display:flex; flex-direction:column; gap:16px;}
.song-meaning-card{padding:22px; display:flex; gap:16px; align-items:flex-start;}
.song-meaning-card .sm-icon{font-size:1.8rem;}
.song-meaning-card h4{font-family:var(--font-display); margin-bottom:6px;}
.song-meaning-card .sm-page{font-size:.72rem; color:var(--rose-gold); margin-bottom:8px; text-transform:uppercase; letter-spacing:1px;}
.song-meaning-card p{color:var(--muted); font-size:.88rem; line-height:1.6;}

/* BIRTHDAY */
.birthday-box{padding:30px 22px; text-align:center;}
.birthday-box h3{font-family:var(--font-display); font-size:1.3rem; margin-bottom:10px;}

/* ACHIEVEMENT */
.achievement-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-bottom:20px;}
.badge{padding:18px 8px; text-align:center; border-radius:16px; background:var(--glass-bg); border:1px solid var(--glass-border); font-size:.72rem; opacity:.4; transition:var(--transition);}
.badge.unlocked{opacity:1; border-color:var(--champagne);}
.badge .b-icon{font-size:1.6rem; margin-bottom:6px;}
.level-bar{padding:18px 20px; font-size:.85rem;}
.xp-track{height:8px; border-radius:8px; background:rgba(255,255,255,.1); margin-top:8px; overflow:hidden;}
.xp-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--rose-gold),var(--champagne)); transition:width .6s;}

/* SETTINGS */
.settings-box{padding:24px; display:flex; flex-direction:column; gap:18px;}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.setting-row input[type=range]{width:120px;}

/* TOAST */
.toast{position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(20,14,42,.95); border:1px solid var(--glass-border); color:var(--ink); padding:12px 22px; border-radius:30px; font-size:.85rem; z-index:6000; opacity:0; pointer-events:none; transition:var(--transition); backdrop-filter:blur(10px);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* FLOATING HEARTS / SAKURA EASTER EGGS */
.floating-heart, .sakura-petal{position:fixed; z-index:9500; pointer-events:none; font-size:1.4rem;}
@keyframes floatUp{ from{transform:translateY(0) rotate(0deg); opacity:1;} to{transform:translateY(-100vh) rotate(360deg); opacity:0;} }

/* RESPONSIVE */
@media(min-width:900px){
  main#pages{padding-top:110px;}
  .letter-paper{padding:50px 60px;}
}
@media(max-width:480px){
  .page-title{font-size:1.4rem;}
  .home-title{font-size:1.9rem;}
}