*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;

}



body{

height:100vh;
overflow:hidden;

}




/* LOGIN */

.login-page{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:
linear-gradient(135deg,#ff758c,#ff7eb3);

}




.login-box{


background:white;

width:350px;

padding:40px;

border-radius:20px;

text-align:center;

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


}




.login-box h1{

color:#e91e63;

margin-bottom:20px;

}



.login-box p{

color:#777;

margin-bottom:20px;

}



.login-box input{


width:100%;

padding:12px;

margin:8px 0;

border:none;

background:#eee;

border-radius:10px;

}



.login-box button{


width:100%;

padding:12px;

margin-top:15px;

border:none;

border-radius:10px;

background:#e91e63;

color:white;

font-size:16px;

cursor:pointer;

}





/* SÜRPRİZ */

.surprise-page{


display:none;

height:100vh;

background:

linear-gradient(
135deg,
#ff9a9e,
#fad0c4
);


justify-content:center;

align-items:center;

text-align:center;


}




.content{


color:white;

text-shadow:
0 3px 15px #000;


animation:
showText 2s ease;


}



.content h1{


font-size:55px;


}




.content p{


font-size:25px;

margin-top:15px;


}





@keyframes showText{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}




/* KONFETİ */

.confetti{


position:fixed;

top:-30px;

font-size:25px;

animation:fall 5s linear forwards;

z-index:10;


}





/* KALP */

.heart{


position:fixed;

top:-30px;

font-size:25px;

animation:fall 6s linear forwards;

z-index:9;


}





@keyframes fall{


0%{

transform:
translateY(0)
rotate(0);

opacity:1;

}


100%{

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

opacity:0;

}

}