/* ============================= */
/* RESET */
/* ============================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

html{

overflow-x:hidden;

}

body{

background:linear-gradient(135deg,#ffd6e8,#ffeef7);

overflow-x:hidden;

color:#444;

min-height:100vh;

width:100%;

position:relative;

}

/* ============================= */
/* BACKGROUND */
/* ============================= */

body::before{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:

radial-gradient(circle,#ffffff55 2px,transparent 2px);

background-size:60px 60px;

opacity:.4;

z-index:-2;

}

body::after{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:

linear-gradient(180deg,

rgba(255,255,255,.2),

rgba(255,182,193,.15));

z-index:-1;

}

/* ============================= */
/* LOADING */
/* ============================= */

#loading{

position:fixed;

width:100%;

height:100%;

background:#ffd6e8;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-heart{

font-size:70px;

animation:heart 1s infinite;

}

@keyframes heart{

0%{transform:scale(1)}

50%{transform:scale(1.3)}

100%{transform:scale(1)}

}

.loading-bar{

margin-top:20px;

width:280px;

height:12px;

background:#fff;

border-radius:30px;

overflow:hidden;

}

.loading-fill{

height:100%;

width:0;

background:#ff4f91;

animation:load 3s forwards;

}

@keyframes load{

100%{

width:100%;

}

}

/* ============================= */
/* ENVELOPE SECTION */
/* ============================= */

#envelopeSection{

display:none;

justify-content:center;

align-items:center;

min-height:100vh;

}

.envelope{

width:280px;

height:180px;

position:relative;

cursor:pointer;

transition:1s;

}

.envelope:hover{

transform:scale(1.05);

}

.envelope .back{

width:100%;

height:100%;

background:#ff8fb5;

border-radius:10px;

}

.envelope .front{

position:absolute;

width:100%;

height:50%;

bottom:0;

background:#ffb3d1;

border-radius:0 0 10px 10px;

}

.envelope .flap{

position:absolute;

width:100%;

height:60%;

top:0;

background:#ff6ba5;

border-radius:10px 10px 0 0;

transform-origin:top;

transition:1s;

clip-path:polygon(0 0, 50% 60%, 100% 0);

}

.envelope.open .flap{

transform:rotateX(180deg);

}

.envelope .letter{

position:absolute;

width:90%;

height:140px;

background:white;

left:5%;

top:10px;

border-radius:10px;

padding:20px;

box-shadow:0 5px 15px rgba(0,0,0,.2);

transition:1s;

}

.envelope.open .letter{

top:-120px;

}

/* ============================= */
/* INTRO */
/* ============================= */

#intro{

display:none;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

min-height:100vh;

padding:30px;

}

#intro h1{

font-size:60px;

font-family:'Dancing Script',cursive;

color:#ff3d8d;

}

#intro p{

margin:20px 0;

font-size:20px;

max-width:700px;

}

button{

background:#ff4f91;

color:#fff;

border:none;

padding:15px 35px;

border-radius:50px;

font-size:18px;

cursor:pointer;

transition:.4s;

}

button:hover{

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(255,0,120,.3);

}

/* ============================= */
/* PASSWORD */
/* ============================= */

#passwordPage{

display:none;

justify-content:center;

align-items:center;

min-height:100vh;

}

.password-card{

width:380px;

max-width:90%;

margin:auto;

padding:35px;

background:rgba(255,255,255,.35);

backdrop-filter:blur(15px);

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.15);

text-align:center;

}

.password-card input{

width:100%;

padding:15px;

margin:20px 0;

border:none;

border-radius:15px;

outline:none;

font-size:18px;

text-align:center;

}

/* ============================= */
/* BOOK */
/* ============================= */

#loveBook{

display:none;
height: 100%;
padding:40px;

}

.book{

max-width:1100px;

margin:auto;

background:white;

border-radius:30px;

box-shadow:0 20px 60px rgba(0,0,0,.2);

overflow:hidden;

padding:50px;

}

.page{

display:none;

animation:fade .6s;

}

.page.active{

display:block;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ============================= */
/* PROFILE */
/* ============================= */

.profile{

width:220px;

height:220px;

border-radius:50%;

object-fit:cover;

border:8px solid pink;

display:block;

margin:30px auto;

}

/* ============================= */
/* CARD */
/* ============================= */

.card{

background:#fff5fb;

padding:25px;

border-radius:20px;

margin:20px auto;

max-width:700px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media(max-width:768px){

#intro h1{

font-size:42px;

}

.book{

padding:25px;

}

button{

width:100%;

margin-top:15px;

}

.password-card{

width:95%;

}

.profile{

width:160px;

height:160px;

}

}
/* =======================================
   SAKURA
======================================= */

#petals{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:1;
}

.petal{

position:absolute;

top:-50px;

font-size:22px;

animation:petalFall linear infinite;

opacity:.9;

}

@keyframes petalFall{

0%{

transform:
translateY(-50px)
rotate(0deg);

}

100%{

transform:
translateY(110vh)
rotate(720deg);

}

}

/* =======================================
   LOVE
======================================= */

.heart{

position:absolute;

font-size:18px;

animation:heartFloat 8s linear infinite;

opacity:.7;

}

@keyframes heartFloat{

0%{

transform:
translateY(100vh);

}

100%{

transform:
translateY(-120px);

}

}

/* =======================================
   BUBBLE
======================================= */

.bubble{

position:absolute;

width:25px;

height:25px;

border-radius:50%;

background:rgba(255,255,255,.4);

backdrop-filter:blur(4px);

animation:bubble 10s linear infinite;

}

@keyframes bubble{

0%{

transform:translateY(120vh);

}

100%{

transform:translateY(-150px);

}

}

/* =======================================
   GLITTER
======================================= */

.glitter{

position:absolute;

width:6px;

height:6px;

background:white;

border-radius:50%;

box-shadow:

0 0 10px white,

0 0 20px white;

animation:glitter 3s infinite;

}

@keyframes glitter{

0%,100%{

opacity:0;

transform:scale(.5);

}

50%{

opacity:1;

transform:scale(1.5);

}

}

/* =======================================
   KUPU KUPU
======================================= */

.butterfly{

position:absolute;

font-size:28px;

animation:fly 20s linear infinite;

}

@keyframes fly{

0%{

left:-100px;

top:30%;

}

25%{

left:25%;

top:10%;

}

50%{

left:50%;

top:45%;

}

75%{

left:75%;

top:20%;

}

100%{

left:120%;

top:35%;

}

}

/* =======================================
   GALERI PREMIUM
======================================= */

.gallery{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:40px;

}

.gallery img{

width:100%;

height:240px;

object-fit:cover;

border-radius:20px;

cursor:pointer;

transition:.5s;

box-shadow:

0 10px 25px rgba(0,0,0,.2);

animation:floatPhoto 5s ease-in-out infinite;

}

.gallery img:hover{

transform:

scale(1.08)

rotate(2deg);

}

@keyframes floatPhoto{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

/* =======================================
   TOOLBAR
======================================= */

.toolbar{

position:fixed;

right:20px;

bottom:20px;

display:flex;

flex-direction:column;

gap:12px;

z-index:999;

}

.toolbar button{

width:60px;

height:60px;

border-radius:50%;

font-size:22px;

}

/* =======================================
   TIMER
======================================= */

.timer{

display:flex;

justify-content:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

}

.timer div{

background:white;

padding:25px;

border-radius:20px;

width:110px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

.timer span{

font-size:35px;

font-weight:bold;

color:#ff4081;

}

/* =======================================
   GAME MENU
======================================= */

.game-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:40px;

}

.game-grid button{

height:120px;

font-size:20px;

}

/* =======================================
   ENDING
======================================= */

.ending-animation{

font-size:40px;

margin-top:40px;

animation:endGlow 2s infinite;

}

@keyframes endGlow{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.2);

}

}
/* ==========================================
   ULTRA GLASS CARD
========================================== */

.card,
.password-card,
.love-letter,
.countdown-box,
.capsule,
.time-box{

background:rgba(255,255,255,.25);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.3);

box-shadow:
0 10px 40px rgba(0,0,0,.15);

transition:.4s;

}

.card:hover,
.capsule:hover,
.time-box:hover{

transform:
translateY(-10px)
scale(1.03);

}

/* ==========================================
   BOOK 3D
========================================== */

.book{

transform-style:preserve-3d;

perspective:2000px;

transition:1s;

}

.page{

min-height:400px;

padding:60px 40px 30px;

border-radius:25px;

background:white;

box-shadow:
0 20px 50px rgba(0,0,0,.1);

}

@media(max-width:768px){

.page{

min-height:auto !important;

max-height:none !important;

padding:20px 10px 15px !important;

}

}

/* ==========================================
   PAGE TITLE
========================================== */

.page h1{

font-size:48px;

text-align:center;

margin-bottom:25px;

color:#ff4081;

font-family:'Dancing Script',cursive;

}

/* ==========================================
   BUTTON PREMIUM
========================================== */

button{

background:linear-gradient(
45deg,
#ff4f91,
#ff7db5);

box-shadow:

0 8px 25px rgba(255,0,120,.35);

}

button:hover{

transform:
translateY(-5px)
scale(1.05);

}

/* ==========================================
   PHOTO PREMIUM
========================================== */

.gallery img{

border:6px solid white;

}

.gallery img:hover{

box-shadow:

0 20px 50px rgba(255,0,120,.4);

}

/* ==========================================
   CAPSULE
========================================== */

.capsule{

padding:30px;

margin:20px;

border-radius:25px;

cursor:pointer;

text-align:center;

}

.capsule h3{

color:#ff4081;

margin-bottom:15px;

}

/* ==========================================
   FLOWER TREE
========================================== */

.wish-tree{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;

margin-top:40px;

}

.flower{

font-size:45px;

cursor:pointer;

transition:.4s;

}

.flower:hover{

transform:

scale(1.5)
rotate(25deg);

}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

display:flex;

flex-direction:column;

gap:30px;

margin-top:30px;

}

.time-box{

padding:25px;

border-left:8px solid hotpink;

}

/* ==========================================
   REASON
========================================== */

.reason{

padding:18px;

margin:15px;

background:white;

border-radius:15px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

transition:.4s;

}

.reason:hover{

transform:translateX(15px);

}

/* ==========================================
   GUEST BOOK
========================================== */

#page14 input,
#page14 textarea{

width:100%;

padding:18px;

margin:15px 0;

border:none;

border-radius:15px;

font-size:17px;

}

textarea{

height:180px;

resize:none;

}

/* ==========================================
   ENDING
========================================== */

#page15{

text-align:center;

}

#page15 h2{

font-size:55px;

color:#ff4081;

margin-top:20px;

}

#page15 p{

font-size:22px;

margin-top:25px;

line-height:1.8;

}

/* ==========================================
   RESPONSIVE HP
========================================== */

@media(max-width:768px){

.page{

padding:15px 10px;

min-height:auto;

}

.page h1{

font-size:24px;

margin-bottom:10px;

}

.page h2{

font-size:20px;

margin-bottom:8px;

}

.page h3{

font-size:18px;

margin-bottom:6px;

}

.page p{

font-size:14px;

margin:6px 0;

line-height:1.5;

}

.book{

padding:10px;

}

.gallery{

grid-template-columns:1fr;

gap:10px;

margin-top:15px;

}

.gallery img{

height:160px;

}

.toolbar{

right:8px;

bottom:8px;

gap:6px;

}

.toolbar button{

width:45px;

height:45px;

font-size:16px;

padding:0;

}

.timer{

flex-direction:row;

flex-wrap:wrap;

gap:8px;

margin-top:15px;

justify-content:center;

}

.timer div{

width:70px;

padding:10px 8px;

}

.timer span{

font-size:22px;

}

.timer small{

font-size:10px;

}

.game-grid{

grid-template-columns:repeat(2,1fr);

gap:10px;

margin-top:15px;

}

.game-grid button{

height:60px;

font-size:14px;

padding:8px;

}

.navigation{

flex-direction:row;

gap:8px;

margin-top:15px;

}

.navigation button{

flex:1;

padding:10px;

font-size:13px;

}

#intro{

padding:15px;

}

#intro h1{

font-size:32px;

}

#intro p{

font-size:14px;

margin:12px 0;

}

#intro button{

margin-top:8px;

}

.password-card{

width:92%;

padding:18px;

}

.password-card h2{

font-size:18px;

margin-bottom:8px;

}

.password-card p{

font-size:13px;

margin:8px 0;

}

.profile{

width:120px;

height:120px;

margin:12px auto;

}

.cover-img{

width:150px;

margin-bottom:15px;

}

.card{

padding:12px;

margin:10px 0;

}

.timeline{

gap:12px;

margin-top:15px;

}

.time-box{

padding:12px;

}

.time-box h3{

font-size:16px;

margin-bottom:6px;

}

.time-box p{

font-size:13px;

}

.wish-tree{

gap:10px;

margin-top:15px;

}

.flower{

font-size:28px;

}

#wishText{

margin-top:12px;

font-size:14px;

}

.reason{

padding:10px;

margin:6px 3px;

font-size:13px;

}

.reason-list{

margin-top:12px;

}

#showReason{

margin-top:12px;

padding:10px 20px;

font-size:14px;

}

.capsule-container{

grid-template-columns:1fr;

gap:12px;

margin-top:15px;

}

.capsule{

padding:15px;

margin:8px 0;

}

.capsule h3{

font-size:16px;

}

.capsule p{

font-size:13px;

}

.envelope{

width:180px;

height:110px;

}

.envelope .letter{

padding:10px;

font-size:12px;

height:100px;

}

.envelope .letter h2{

font-size:14px;

}

.envelope .letter p{

font-size:12px;

}

#loveMeter{

padding:6px 15px;

font-size:12px;

top:12px;

}

#pageNumber{

font-size:11px;

padding:5px 10px;

left:8px;

bottom:8px;

}

.poem{

padding:15px;

margin:15px 8px;

}

.poem p{

font-size:14px;

line-height:1.6;

}

.love-letter{

padding:15px;

margin:15px 8px;

}

.love-letter h2{

font-size:20px;

margin-bottom:12px;

}

.love-letter p{

font-size:14px;

line-height:1.6;

}

.countdown-box{

padding:15px 12px;

margin-top:15px;

}

.countdown-box h2{

font-size:18px;

margin-bottom:15px;

}

.promise{

gap:10px;

margin-top:15px;

}

.promise label{

padding:10px;

font-size:14px;

gap:8px;

}

.promise input[type="checkbox"]{

width:18px;

height:18px;

}

#page14 input,

#page14 textarea{

padding:10px;

margin:8px 0;

font-size:14px;

}

#page14 textarea{

height:100px;

}

#guestList .card{

margin:8px 0;

}

#page15 h2{

font-size:32px;

margin-top:12px;

}

#page15 p{

font-size:14px;

margin-top:12px;

line-height:1.5;

}

.ending-animation{

font-size:28px;

margin-top:15px;

}

button{

padding:10px 20px;

font-size:14px;

}

}

/* ==========================================
   FIX OVERFLOW & HEIGHT
========================================== */

@media(max-width:768px){

html, body{

overflow-x:hidden;

width:100%;

max-width:100vw;

}

#loveBook{

padding:10px 5px;

}

.book{

width:100%;

max-width:100%;

margin:0;

}

/* Kompres semua vertical spacing */

*{

margin-top:0 !important;

}

h1{

margin-bottom:8px !important;

}

h2{

margin-bottom:6px !important;

}

h3{

margin-bottom:5px !important;

}

p{

margin-bottom:6px !important;

}

button{

margin-bottom:8px !important;

}

div{

margin-top:0 !important;

margin-bottom:0 !important;

}

/* Override margin untuk container */

.gallery, .timeline, .wish-tree, 

.capsule-container, .reason-list,

.promise, .timer{

margin-top:10px !important;

margin-bottom:10px !important;

}

/* Atur tinggi section agar tidak terlalu panjang */

section.page{

padding-top:20px !important;

padding-bottom:15px !important;

}

}

/* ==========================================
   RESPONSIVE TABLET (768px - 1024px)
========================================== */

@media(min-width:769px) and (max-width:1024px){

.book{

padding:35px;

max-width:90%;

}

.page{

padding:50px 30px;

}

.gallery{

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.game-grid{

grid-template-columns:repeat(2,1fr);

}

.timer div{

width:100px;

}

.navigation button{

padding:12px 25px;

}

}

/* ==========================================
   RESPONSIVE DESKTOP BESAR (>1400px)
========================================== */

@media(min-width:1400px){

.book{

max-width:1200px;

padding:60px;

}

.page h1{

font-size:52px;

}

.gallery{

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.gallery img{

height:260px;

}

.timer div{

width:120px;

padding:30px;

}

.timer span{

font-size:40px;

}

}

/* ==========================================
   FIX GAME MODAL RESPONSIVE
========================================== */

@media(max-width:768px){

.game-window{

width:95%;

height:90%;

padding:20px;

}

#gameTitle{

font-size:24px;

margin-bottom:15px;

}

#closeGame{

width:40px;

height:40px;

font-size:18px;

right:15px;

top:15px;

}

#gameContent{

min-height:300px;

}

/* Game responsif */

.memory-grid{

grid-template-columns:repeat(4,70px)!important;

gap:10px!important;

}

.memory-card{

width:70px!important;

height:70px!important;

font-size:30px!important;

}

.ttt-grid{

grid-template-columns:repeat(3,80px)!important;

gap:8px!important;

}

.ttt-cell{

width:80px!important;

height:80px!important;

font-size:40px!important;

}

#catchGame{

height:300px!important;

}

#bubbleGame{

height:300px!important;

}

.quiz-box{

padding:15px!important;

}

#quizQuestion{

font-size:18px!important;

}

.quiz-option{

padding:12px!important;

font-size:14px!important;

}

}

/* ==========================================
   DARK MODE
========================================== */

body.dark{

background:linear-gradient(135deg,#1a1a2e,#16213e);

color:#eee;

}

body.dark .book{

background:#0f3460;

}

body.dark .page{

background:#16213e;

color:#eee;

}

body.dark .card{

background:#1a1a2e;

}

body.dark button{

background:linear-gradient(45deg,#e94560,#ff6b9d);

}

body.dark .password-card{

background:rgba(15,52,96,.5);

}

body.dark .time-box{

background:#1a1a2e;

}

body.dark .reason{

background:#1a1a2e;

}

body.dark input,

body.dark textarea{

background:#1a1a2e;

color:#eee;

}

/* ==========================================
   NAVIGATION BUTTONS
========================================== */

.navigation{

display:flex;

justify-content:center;

gap:20px;

margin-top:30px;

}

.navigation button{

padding:15px 30px;

font-size:16px;

}

/* ==========================================
   PROMISE CHECKBOXES
========================================== */

.promise{

display:flex;

flex-direction:column;

gap:20px;

margin-top:30px;

}

.promise label{

display:flex;

align-items:center;

gap:15px;

font-size:18px;

padding:15px;

background:white;

border-radius:15px;

cursor:pointer;

transition:.3s;

}

body.dark .promise label{

background:#1a1a2e;

}

.promise label:hover{

transform:translateX(10px);

background:#fff5fb;

}

body.dark .promise label:hover{

background:#0f3460;

}

.promise input[type="checkbox"]{

width:25px;

height:25px;

cursor:pointer;

}

/* ==========================================
   CAPSULE CONTAINER
========================================== */

.capsule-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:30px;

}

/* ==========================================
   COUNTDOWN BOX
========================================== */

.countdown-box{

background:rgba(255,255,255,.3);

backdrop-filter:blur(20px);

padding:40px;

border-radius:25px;

text-align:center;

margin-top:30px;

}

body.dark .countdown-box{

background:rgba(15,52,96,.4);

}

.countdown-box h2{

color:#ff4081;

margin-bottom:30px;

font-size:28px;

}

/* ==========================================
   LOVE LETTER
========================================== */

.love-letter{

padding:40px;

margin:30px auto;

max-width:700px;

text-align:center;

}

.love-letter h2{

color:#ff4081;

margin-bottom:25px;

font-size:32px;

}

.love-letter p{

font-size:18px;

line-height:1.8;

}

/* ==========================================
   POEM
========================================== */

.poem{

padding:40px;

margin:30px auto;

max-width:700px;

text-align:center;

background:white;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}

body.dark .poem{

background:#1a1a2e;

}

.poem p{

font-size:20px;

line-height:2;

font-style:italic;

color:#ff4081;

}
/* =======================================
   GAME MODAL
======================================= */

.game-modal{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.75);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.game-window{

width:90%;

max-width:900px;

height:85%;

background:white;

border-radius:25px;

padding:25px;

position:relative;

overflow:auto;

box-shadow:0 20px 50px rgba(0,0,0,.3);

animation:popup .4s;

}

@keyframes popup{

from{

transform:scale(.7);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

#closeGame{

position:absolute;

right:20px;

top:20px;

width:45px;

height:45px;

border-radius:50%;

font-size:22px;

cursor:pointer;

}

#gameTitle{

text-align:center;

margin-bottom:25px;

color:#ff4081;

font-size:35px;

}

#gameContent{

min-height:500px;

display:flex;

justify-content:center;

align-items:center;

}
.lightbox{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.lightbox img{

max-width:90%;

max-height:90%;

border-radius:20px;

box-shadow:0 0 30px white;

}
.toast{

position:fixed;

right:25px;

top:25px;

background:#ff4081;

color:white;

padding:15px 25px;

border-radius:20px;

opacity:0;

transform:translateY(-20px);

transition:.4s;

z-index:999999;

}

.toast.show{

opacity:1;

transform:translateY(0);

}
#page1{

padding-top:140px;

text-align:center;

}

#page1 h1{

margin-top:20px;

}

#page1 h2{

margin-top:15px;

}

#page1 p{

margin-top:20px;

}
.cover-img{

display:block;

width:260px;

max-width:90%;

margin:0 auto 30px;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.2);

}