:root{--bg-dark:#0d0b14;--bg-nebula-1:#1a142c;--bg-nebula-2:#2c204d;--primary-glow:#e6deff;--accent-gold:#f7d8a3;--accent-pink:#d9a4b5;--glass-bg:rgba(26, 20, 44, 0.45);--glass-border:rgba(230, 222, 255, 0.15);--font-heading:'Playfair Display',serif;--font-body:'Poppins',sans-serif;--shadow-color:rgba(13,11,20,0.5)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100vh;width:100vw;overflow:hidden}
body{font-family:var(--font-body);background-color:var(--bg-dark);color:var(--primary-glow);cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23f7d8a3"><path d="M12 2l2.45 7.55h7.95l-6.4 4.65l2.45 7.55l-6.4-4.65l-6.4 4.65l2.45-7.55l-6.4-4.65h7.95z"/></svg>'),auto;background:linear-gradient(240deg, var(--bg-nebula-2), var(--bg-dark), rgba(217, 164, 181, 0.4), var(--bg-nebula-1));background-size:400% 400%;animation:romantic-gradient 40s ease infinite;}
@keyframes romantic-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
#star-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-dark);display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:1002;transition:opacity 1.5s ease-in-out,backdrop-filter 1.5s ease}.soul-container{position:relative;width:200px;height:200px}.soul{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;box-shadow:0 0 15px,0 0 25px,0 0 35px;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:1;animation-fill-mode:forwards}.soul-1{background-color:var(--accent-gold);box-shadow:0 0 15px var(--accent-gold),0 0 25px var(--accent-gold),0 0 35px #fff;animation-name:orbit-merge-1}.soul-2{background-color:var(--accent-pink);box-shadow:0 0 15px var(--accent-pink),0 0 25px var(--accent-pink),0 0 35px #fff;animation-name:orbit-merge-2}@keyframes orbit-merge-1{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(80px) scale(1);opacity:1}70%{transform:translate(-50%,-50%) rotate(250deg) translateX(40px) scale(1.5);opacity:1}100%{transform:translate(-50%,-50%) rotate(360deg) translateX(0px) scale(0);opacity:0}}@keyframes orbit-merge-2{0%{transform:translate(-50%,-50%) rotate(180deg) translateX(80px) scale(1);opacity:1}70%{transform:translate(-50%,-50%) rotate(430deg) translateX(40px) scale(1.5);opacity:1}100%{transform:translate(-50%,-50%) rotate(540deg) translateX(0px) scale(0);opacity:0}}.loading-text{margin-top:40px;font-size:1rem;font-family:var(--font-body);color:var(--accent-gold);letter-spacing:2px;text-transform:uppercase;opacity:0;animation:fadeInText 3s forwards 1s}@keyframes fadeInText{to{opacity:.8}}#heart-prompt{position:absolute;bottom:25%;opacity:0;transition:opacity 1s ease-in-out;animation:none;font-size:.9rem}.sparkle-burst{position:absolute;top:50%;left:50%;width:1px;height:1px}.sparkle{position:absolute;left:0;top:0;width:4px;height:4px;background:var(--primary-glow);border-radius:50%;box-shadow:0 0 10px var(--primary-glow),0 0 15px var(--accent-gold);opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.5);animation:sparkle-anim .8s ease-out forwards}@keyframes sparkle-anim{0%{opacity:1;transform:rotate(var(--angle)) translateY(0) scale(.5)}100%{opacity:0;transform:rotate(var(--angle)) translateY(80px) scale(1.5)}}.heart-shape{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;opacity:0;visibility:hidden;cursor:pointer;filter:drop-shadow(0 0 10px var(--accent-pink))}.heart-shape::before,.heart-shape::after{content:'';position:absolute;top:0;width:26px;height:42px;background:linear-gradient(45deg,var(--accent-pink),var(--accent-gold));border-radius:50px 50px 0 0;transform-origin:bottom}.heart-shape::before{left:25px;transform:rotate(-45deg)}.heart-shape::after{left:0;transform:rotate(45deg)}@keyframes heart-appear{0%{transform:translate(-50%,-50%) scale(0);opacity:0}60%{transform:translate(-50%,-50%) scale(1.25);opacity:1}80%{transform:translate(-50%,-50%) scale(.95)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes heart-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
#main-title { display: inline-block; border-right: .15em solid var(--accent-gold); white-space: nowrap; overflow: hidden; letter-spacing: .1em; }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--accent-gold); } }
.meteor { position: fixed; top: -150px; left: 0; width: 3px; height: 150px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent); border-radius: 50%; z-index: 5; pointer-events: none; animation-name: fall; animation-timing-function: linear; animation-iteration-count: 1; }
@keyframes fall { to { transform: translateY(calc(100vh + 300px)); } }
#main-content { height: 100%; width: 100%; visibility: hidden; opacity: 0; transition: opacity 1.5s ease-in; }
.slider-wrapper { display: flex; height: 100%; width: 1500%; transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1); }
.slide { width: calc(100% / 15); height: 100%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; padding: 2rem; position: relative; text-align: center; }
.slide-content{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;padding:clamp(2rem,5vw,4rem);width:100%;max-width:950px;max-height:90vh;overflow-y:auto;box-shadow:0 15px 35px var(--shadow-color);transform:translateY(30px) scale(.98);opacity:0;transition:transform 1.2s cubic-bezier(.19,1,.22,1),opacity 1s ease-out}.slide.active .slide-content{transform:translateY(0) scale(1);opacity:1;transition-delay:.4s}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide.active .slide-content > *{animation:fadeInUp .8s backwards}.slide.active .slide-content > *:nth-child(1){animation-delay:.5s}.slide.active .slide-content > *:nth-child(2){animation-delay:.7s}.slide.active .slide-content > *:nth-child(3){animation-delay:.9s}.slide.active .slide-content > *:nth-child(4){animation-delay:1.1s}.slide.active .slide-content .point-item:nth-child(1){animation-delay:.9s}.slide.active .slide-content .point-item:nth-child(2){animation-delay:1.1s}.slide.active .slide-content .point-item:nth-child(3){animation-delay:1.3s}
.time-greeting{color:var(--accent-gold);font-size:clamp(1rem,3vw,1.1rem);margin-bottom:.5rem;font-weight:400}
h1{font-size:clamp(2rem,6vw,3.2rem);color:var(--primary-glow);text-shadow:0 0 15px var(--primary-glow);margin-bottom:0.5rem;}
h2{font-size:clamp(1.8rem,5vw,2.5rem);color:var(--accent-gold);margin-bottom:1.5rem;text-shadow:0 0 10px var(--accent-gold)}
h3{font-size:clamp(1.1rem,4vw,1.4rem);color:var(--accent-pink);margin-bottom:.75rem}
p{font-size:clamp(.9rem,2.5vw,1.05rem);line-height:1.9;color:var(--primary-glow);opacity:.95}
.hero-image{width:clamp(150px,30vw,200px);height:clamp(150px,30vw,200px);border-radius:50%;object-fit:cover;border:5px solid var(--glass-border);padding:5px;background-color:var(--bg-dark);margin-bottom:1.5rem;box-shadow:0 0 25px rgba(230,222,255,0.3);transition:transform .5s ease}.hero-image:hover{transform:scale(1.05) rotate(-3deg)}
.hero-quote{font-style:italic;max-width:600px;margin:1rem auto 0}
#relationship-counter{color:var(--accent-pink);font-size:clamp(1rem,3vw,1.2rem);font-weight:500;margin:-1rem 0 1.5rem 0;padding:8px 15px;background:rgba(217,164,181,0.1);border-radius:50px;display:inline-block;border:1px solid rgba(217,164,181,0.2)}
.falling-heart{position:fixed;top:-10vh;font-size:1.5rem;pointer-events:none;user-select:none;animation:fall-and-fade linear forwards;z-index:1001}
@keyframes fall-and-fade{to{transform:translateY(110vh) rotate(360deg);opacity:0}}
.whatsapp-form{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;max-width:500px;margin-left:auto;margin-right:auto}
#whatsapp-message{background:rgba(13,11,20,0.5);border:1px solid var(--glass-border);border-radius:10px;padding:15px;color:var(--primary-glow);font-family:var(--font-body);font-size:1rem;min-height:120px;resize:vertical}
#whatsapp-message:focus{outline:none;border-color:var(--accent-pink)}
#send-whatsapp-btn{background:var(--accent-pink);border:none;color:var(--bg-dark);padding:12px 25px;border-radius:50px;cursor:pointer;font-family:var(--font-body);font-size:1rem;font-weight:500;transition:all .3s ease}
#send-whatsapp-btn:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(217,164,181,0.3)}
.guide-points{display:flex;flex-direction:column;gap:1.5rem;text-align:left;margin-top:2rem;}.point-item{background-color:rgba(255,255,255,0.05);padding:1.2rem 1.5rem;border-radius:15px;border-left:4px solid var(--accent-gold);transition:transform .3s,background-color .3s,box-shadow .3s}.point-item:hover{transform:translateX(10px) scale(1.02);background-color:rgba(255,255,255,0.1);box-shadow:0 5px 15px rgba(0,0,0,0.2)}.story-layout{display:flex;align-items:center;gap:2.5rem;text-align:left}.story-text{flex:1}.image-wrapper{position:relative;padding:10px;background:rgba(255,255,255,0.05);border-radius:12px;border:1px solid rgba(255,255,255,0.1);overflow:hidden;flex-shrink:0}.image-wrapper img{display:block;width:100%;border-radius:8px}.image-wrapper::before{content:'';position:absolute;width:80px;height:25px;background:linear-gradient(45deg,#f7d8a3,#d9a4b5,#a4b5d9,#a3f7d8);opacity:.6;box-shadow:0 2px 8px rgba(0,0,0,0.4);border-radius:3px}.image-wrapper.tape-br::before{bottom:-10px;right:-15px;transform:rotate(-45deg)}.image-wrapper.tape-tl::before{top:-10px;left:-15px;transform:rotate(-45deg)}.image-wrapper.tape-tr::before{top:-10px;right:-15px;transform:rotate(45deg)}.image-wrapper.tape-bl::before{bottom:-10px;left:-15px;transform:rotate(45deg)}.gallery-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem;}.gallery-container .image-wrapper{width:100%;transition:transform .4s ease,z-index 0s .2s;cursor:pointer}.gallery-container .image-wrapper:hover{transform:scale(1.1) rotate(3deg);z-index:10}.image-wrapper .memory-caption{position:absolute;bottom:10px;left:10px;right:10px;background:rgba(13,11,20,0.8);color:var(--accent-gold);padding:8px;border-radius:0 0 6px 6px;font-size:.85rem;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}.image-wrapper:hover .memory-caption{opacity:1;transform:translateY(0)}
.timeline-container { position: relative; width: 100%; max-width: 600px; margin: 2rem auto; padding: 20px 0; }
.timeline-line { position: absolute; left: 50%; top: 0; width: 4px; height: 100%; background: var(--glass-border); border-radius: 2px; }
.timeline-item { position: relative; width: 50%; padding: 10px 40px; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }
.timeline-dot { position: absolute; top: 20px; width: 16px; height: 16px; background: var(--accent-pink); border-radius: 50%; border: 3px solid var(--bg-dark); box-shadow: 0 0 10px var(--accent-pink); z-index: 1; transition: transform 0.3s; }
.timeline-item:nth-child(odd) .timeline-dot { right: -8px; }
.timeline-item:nth-child(even) .timeline-dot { left: -8px; }
.timeline-item:hover .timeline-dot { transform: scale(1.3); }
.timeline-content { padding: 10px 15px; background: rgba(255,255,255,0.05); border-radius: 8px; transition: background-color 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.timeline-item:hover .timeline-content { background-color: rgba(255,255,255,0.1); }
.timeline-content h3 { margin-bottom: 5px; color: var(--accent-gold); }
.timeline-content p { font-size: 0.9rem; opacity: 0.8; line-height: 1.4; }
#constellation-canvas { width: 100%; max-width: 600px; height: 300px; background: radial-gradient(ellipse at center, rgba(13,11,20,0.8) 0%, rgba(13,11,20,1) 100%); border: 1px solid var(--glass-border); border-radius: 15px; margin-top: 1.5rem; cursor: crosshair; }
.simple-btn { background: none; border: 1px solid var(--glass-border); color: var(--primary-glow); padding: 10px 20px; border-radius: 50px; cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; transition: all 0.3s ease; margin-top: 1.5rem; }
.simple-btn:hover { background: var(--accent-pink); border-color: var(--accent-pink); color: var(--bg-dark); }
#hidden-nebula-container { position: relative; width: 100%; max-width: 600px; height: 350px; margin: 1.5rem auto 0; border-radius: 15px; overflow: hidden; border: 1px solid var(--glass-border); background-image: url('https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); background-size: cover; background-position: center; }
.hidden-text-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; color: var(--accent-gold); font-size: 1.3rem; line-height: 1.8; font-family: var(--font-heading); text-align: center; text-shadow: 0 0 5px #000; -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50px, transparent 150px); mask-image: radial-gradient(circle at 50% 50%, black 50px, transparent 150px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: -webkit-mask-position 0.1s ease-out; transition: mask-position 0.1s ease-out; transition: mask-position 0.1s ease-out, -webkit-mask-position 0.1s ease-out; }
.certificate-container { border: 2px solid var(--accent-gold); padding: 10px; border-radius: 10px; background: rgba(247, 216, 163, 0.05); }
.certificate-border { border: 1px dashed var(--accent-gold); padding: clamp(1rem, 4vw, 2.5rem); border-radius: 5px; }
.certificate-border h3 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--accent-gold); margin-bottom: 1rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 1rem; }
.cert-intro { font-style: italic; margin-bottom: 1.5rem; }
.cert-star-name { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 3.5rem); color: var(--primary-glow); text-shadow: 0 0 15px var(--primary-glow); margin-bottom: 1.5rem; }
.cert-body { margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.cert-details p { font-size: 0.9rem; line-height: 1.6; opacity: 0.8; }
.cert-details p strong { color: var(--accent-pink); }
#quiz-container { text-align: center; }
.quiz-question { font-size: 1.4rem; color: var(--accent-gold); margin-bottom: 2rem; font-weight: 500; }
.quiz-options { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.quiz-option { background: none; border: 1px solid var(--glass-border); color: var(--primary-glow); padding: 12px 25px; border-radius: 50px; cursor: pointer; font-family: var(--font-body); font-size: 1rem; transition: all 0.3s ease; }
.quiz-option:hover { background: var(--accent-pink); border-color: var(--accent-pink); color: var(--bg-dark); transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 15px rgba(217, 164, 181, 0.2); }
#quiz-feedback { min-height: 30px; font-style: italic; font-size: 1.1rem; color: var(--accent-gold); transition: opacity 0.5s; opacity: 0; }
.reasons-carousel-container{margin:2rem auto 0;width:280px;height:200px;position:relative;perspective:1000px}.reasons-carousel{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.77,0,.175,1)}.reason-card{position:absolute;width:260px;height:180px;left:10px;top:10px;padding:20px;background:var(--bg-nebula-2);border:1px solid var(--glass-border);border-radius:15px;text-align:center;backface-visibility:hidden;box-shadow:0 5px 15px var(--shadow-color)}.reason-card h3{color:var(--accent-gold)}.reasons-nav{margin-top:1rem}.reasons-nav button{background:none;border:1px solid var(--glass-border);color:var(--primary-glow);font-size:1.5rem;width:45px;height:45px;border-radius:50%;cursor:pointer;margin:0 10px;transition:all .3s}.reasons-nav button:hover{background:rgba(255,255,255,.1)}
.creator-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:1.5rem 0;border:3px solid var(--accent-gold);box-shadow:0 0 15px rgba(247,216,163,0.3)}#about-creator p{max-width:450px;margin:0 auto}footer{text-align:center;padding-top:2rem;color:var(--accent-gold);font-weight:500;font-size:.9rem}
.slider-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);color:var(--primary-glow);font-size:1.5rem;width:45px;height:45px;border-radius:50%;cursor:pointer;z-index:100;display:flex;justify-content:center;align-items:center;transition:all .3s;backdrop-filter:blur(5px)}.slider-nav:hover{background:rgba(255,255,255,0.2);transform:translateY(-50%) scale(1.1)}.slider-nav.prev{left:20px}.slider-nav.next{right:20px}
.nav-dots{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:100}.dot{width:10px;height:10px;background:var(--glass-border);border-radius:50%;cursor:pointer;transition:background .3s,transform .3s}.dot.active{background:var(--accent-gold);transform:scale(1.2)}
#music-container { position: fixed; bottom: 25px; left: 25px; z-index: 999; }
#music-toggle-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); color: var(--primary-glow); width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px var(--shadow-color); }
#music-toggle-btn:hover { transform: scale(1.1); background: rgba(230, 222, 255, 0.2); }
#music-player-panel { position: absolute; bottom: 65px; left: 0; width: 280px; background: var(--glass-bg); backdrop-filter: blur(15px); border: 1px solid var(--glass-border); border-radius: 15px; padding: 20px; box-shadow: 0 10px 30px var(--shadow-color); display: flex; flex-direction: column; gap: 15px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
#music-container.open #music-player-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.current-track { display: flex; align-items: center; gap: 15px; }
.album-art { width: 60px; height: 60px; background: linear-gradient(45deg, var(--accent-gold), var(--accent-pink)); border-radius: 8px; flex-shrink: 0; border: 2px solid var(--glass-border); }
#music-player-panel.playing .album-art { animation: spin 8s linear infinite; }
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.song-info { text-align: left; overflow: hidden; }
#song-title { font-size: 1rem; font-weight: 500; color: var(--primary-glow); white-space: nowrap; }
#song-artist { font-size: 0.8rem; color: var(--primary-glow); opacity: 0.7; }
.controls { display: flex; justify-content: center; align-items: center; gap: 15px; }
.controls button { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--accent-gold); transition: transform 0.2s, color 0.2s; padding: 5px; }
.controls button:hover { transform: scale(1.2); color: #fff; }
#play-pause-btn { font-size: 2rem; }
.playlist-heading { font-weight: 500; color: var(--accent-gold); border-top: 1px solid var(--glass-border); padding-top: 15px; text-align: center; }
#playlist { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.playlist-item { padding: 10px; color: var(--primary-glow); cursor: pointer; font-size: .9rem; transition: background-color .3s; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 5px; }
.playlist-item:hover { background-color: rgba(255, 255, 255, 0.1); }
.playlist-item.active { color: var(--accent-gold); font-weight: bold; background-color: rgba(247, 216, 163, 0.1); }
#lightbox,#secret-modal{z-index:1002}#lightbox{display:none;position:fixed;padding-top:0;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.95);display:none;justify-content:center;align-items:center}.lightbox-content{margin:auto;display:block;max-width:80%;max-height:80%;animation:zoom .6s;border-radius:10px}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close-btn{position:absolute;top:15px;right:35px;color:var(--primary-glow);font-size:40px;transition:.3s;cursor:pointer}.close-btn:hover{color:var(--accent-gold)}.prev-slide,.next-slide{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:var(--accent-gold);font-weight:bold;font-size:24px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none;text-shadow:0 0 5px rgba(247,216,163,0.5)}.next-slide{right:0;border-radius:3px 0 0 3px}.prev-slide:hover,.next-slide:hover{background-color:rgba(247,216,163,0.2)}
#secret-trigger{position:fixed;z-index:999;opacity:0;animation:fadeInUI 1s forwards 1.5s; bottom:25px; right:25px; font-size:2.5rem; cursor:pointer; color:var(--accent-pink); text-shadow:0 0 10px var(--accent-pink); animation:pulse 2s infinite 2s,fadeInUI 1s forwards 1.5s}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
#secret-modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);backdrop-filter:blur(10px)}.modal-content{background:var(--bg-nebula-1);margin:15% auto;padding:30px;border:1px solid var(--accent-pink);width:90%;max-width:450px;border-radius:20px;text-align:center;position:relative;animation:slide-down .5s;box-shadow:0 0 25px rgba(217,164,181,0.4)}@keyframes slide-down{from{top:-300px;opacity:0}to{top:0;opacity:1}}.close-modal-btn{color:var(--primary-glow);float:right;font-size:32px;font-weight:bold;cursor:pointer}#secret-modal h4{color:var(--accent-pink);font-size:1.8rem;margin-bottom:20px}#secret-modal p{color:var(--primary-glow)}
.star-trail{position:fixed;pointer-events:none;width:6px;height:6px;background:white;border-radius:50%;z-index:10000;opacity:1;animation:fade-out 1s forwards;box-shadow:0 0 8px #fff,0 0 12px var(--accent-gold)}@keyframes fade-out{to{transform:scale(0);opacity:0}}

/* --- CSS UNTUK FITUR BARU --- */

/* Love Meter */
.love-meter-container { margin: 2rem auto; max-width: 400px; }
.meter-bar { width: 100%; height: 30px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--glass-border); }
.meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-pink), var(--accent-gold)); border-radius: 15px; transition: width 3s cubic-bezier(0.25, 1, 0.5, 1); }
.meter-percentage { font-size: 2.5rem; font-weight: bold; color: var(--accent-gold); margin-bottom: 1.5rem; text-shadow: 0 0 10px var(--accent-gold); }

/* Countdown Timer */
.countdown-container { margin: 2.5rem 0 0 0; }
.countdown-container h3 { font-size: 1rem; color: var(--primary-glow); opacity: 0.8; margin-bottom: 1rem; font-weight: 400;}
.countdown-timer { display: flex; justify-content: center; gap: 1rem; }
.countdown-item { background: rgba(13, 11, 20, 0.3); padding: 1rem; border-radius: 10px; min-width: 70px; text-align: center; border: 1px solid var(--glass-border); font-size: 0.8rem; }
.countdown-item span { font-size: 1.8rem; font-weight: bold; color: var(--accent-gold); }

/* Love Letter */
.letter-container { perspective: 1000px; margin: 2rem auto; max-width: 500px; }
.letter-paper { background: #fff8f0; padding: 2rem; border-radius: 5px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.2); color: #5a3e36; min-height: 350px; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55); display:flex; align-items:center; justify-content:center; }
.letter-paper.opened { transform: rotateY(180deg); }
.letter-content-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); padding: 2rem; overflow-y: auto; }
.letter-seal { backface-visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; cursor: pointer; color: var(--accent-pink); transition: transform 0.3s; }
.letter-seal:hover { transform: translate(-50%, -50%) scale(1.1); }
.letter-content { font-family: 'Playfair Display', serif; white-space: pre-wrap; line-height: 1.9; font-size: 1.1rem; text-align: left; }

/* Memory Game */
.memory-game-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.5rem auto; max-width: 400px; }
.memory-card { height: 120px; background-color: transparent; border-radius: 8px; cursor: pointer; transform-style: preserve-3d; transition: transform 0.6s; position: relative; }
.memory-card.flipped { transform: rotateY(180deg); }
.memory-card .front, .memory-card .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px; display: flex; justify-content: center; align-items: center; }
.memory-card .back { background: var(--bg-nebula-2); border: 1px solid var(--glass-border); font-size: 2.5rem; color: var(--accent-gold); }
.memory-card .front { background-size: cover; background-position: center; transform: rotateY(180deg); border: 2px solid var(--accent-gold); }
.game-stats { display: flex; justify-content: space-around; align-items: center; margin-top: 1.5rem; font-weight: 500; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }

/* Voice Message Button */
.voice-message-container { margin-top: 2.5rem; }
.voice-btn { background: linear-gradient(45deg, var(--accent-pink), var(--accent-gold)); border: none; padding: 15px 30px; border-radius: 50px; color: var(--bg-dark); font-family: var(--font-body); font-weight: 500; font-size: 1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.voice-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(247, 216, 163, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(247, 216, 163, 0); } 100% { box-shadow: 0 0 0 0 rgba(247, 216, 163, 0); } }
.voice-btn.playing { animation: pulse 1.5s infinite; }

@media (max-width:768px){
    .story-layout{flex-direction:column}
    .gallery-container{grid-template-columns:1fr}
    .slider-nav{width:40px;height:40px;font-size:1.5rem}
    .slider-nav.prev{left:10px}
    .slider-nav.next{right:10px}
    .slide{padding:1rem}
    .slide-content{max-height:85vh;padding:1.5rem}
    .point-item:hover{transform:translateX(5px) scale(1.01)}
    
    .timeline-container{max-width:90vw;margin:1rem auto}
    .timeline-line{left:20px}
    .timeline-item, .timeline-item:nth-child(even) { width: 100%; left: 0; padding-left: 60px; padding-right: 10px; text-align: left; }
    .timeline-dot, .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 13px; right: auto; }

    .reasons-carousel-container{width:240px;height:180px}
    .reason-card{width:220px;height:160px}
    .lightbox-content{max-width:95%;max-height:70%}
    .close-btn{top:10px;right:20px;font-size:30px}
    .prev-slide,.next-slide{font-size:20px;padding:10px} 
    #music-container { left: 50%; transform: translateX(-50%); bottom: 15px; } 
    #music-player-panel { width: calc(100vw - 40px); }

    /* Responsive rules for new features */
    .countdown-item { min-width: 60px; padding: 0.8rem; }
    .countdown-item span { font-size: 1.5rem; }
    .letter-paper { min-height: 400px; }
    .memory-game-board { grid-template-columns: repeat(2, 1fr); max-width: 250px; }
    .memory-card { height: 100px; }
    .game-stats { flex-direction: column; gap: 1rem; }
}