/* ===================================================
   GENEL
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}


/* ===================================================
   GİRİŞ EKRANI
=================================================== */

.login-page{

    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

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

}


.login-box{

    width:360px;
    max-width:90%;

    padding:40px;

    border-radius:20px;

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

    backdrop-filter:blur(12px);

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

    text-align:center;

}


.login-box h1{

    color:white;
    font-size:36px;
    margin-bottom:15px;

}


.login-box p{

    color:white;
    margin-bottom:25px;

}


.login-box input{

    width:100%;

    padding:14px;

    margin:10px 0;

    border:none;

    border-radius:10px;

    outline:none;

    font-size:15px;

}


.login-box button{

    width:100%;

    padding:14px;

    margin-top:10px;

    border:none;

    border-radius:10px;

    background:#e91e63;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}


.login-box button:hover{

    background:#c2185b;

    transform:scale(1.03);

}


/* ===================================================
   SÜRPRİZ EKRANI
=================================================== */

.surprise-page{

    display:none;

    position:relative;

    width:100%;
    height:100vh;

    justify-content:center;
    align-items:center;

    overflow:hidden;


    background-image:url("../images/fotoğraf.jpg");

    background-size:contain;

    background-position:center;

    background-repeat:no-repeat;

    background-color:black;

}


/* ===================================================
   YAZI
=================================================== */


.content{

    position:absolute;

    top:40px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    color:#ff7c96;

    z-index:5;

    animation:
    dropTitle 3.2s ease-out forwards;

}



.content h1{

    font-size:clamp(32px,5vw,60px);

    margin-bottom:15px;

    text-shadow:
    0 3px 10px rgba(0,0,0,.5);

}



.content p{

    font-size:clamp(16px,2vw,24px);

}



/* ===================================================
   KALP
=================================================== */

.heart{

    position:fixed;

    top:-50px;

    pointer-events:none;

    z-index:15;

    animation:fall linear forwards;

}



/* ===================================================
   KONFETİ
=================================================== */

.confetti{

    position:fixed;

    top:-50px;

    pointer-events:none;

    z-index:20;

    animation:fall linear forwards;

}



/* ===================================================
   ANİMASYONLAR
=================================================== */


@keyframes dropTitle{

    0%{

        opacity:0;

        transform:
        translate(-50%,-220px);

    }


    60%{

        opacity:1;

        transform:
        translate(-50%,25px);

    }


    80%{

        transform:
        translate(-50%,-8px);

    }


    100%{

        transform:
        translate(-50%,0);

    }

}



@keyframes hideTitle{

    from{

        opacity:1;

    }

    to{

        opacity:0;

        visibility:hidden;

    }

}



@keyframes fall{

    0%{

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

        opacity:1;

    }


    100%{

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

        opacity:0;

    }

}



/* ===================================================
   MOBİL
=================================================== */


@media(max-width:768px){


    .surprise-page{

        background-image:url("../images/mobil.png");

        background-size:contain;

        background-position:center;

    }


    .login-box{

        width:90%;

        padding:30px;

    }


    .content{

        top:50px;

        animation:
        dropTitle 3.2s ease-out forwards,
        hideTitle 1s ease forwards 13.2s;

    }


    .content h1{

        font-size:38px;

    }


    .content p{

        font-size:18px;

    }

}