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



body{
    min-height:100vh;

    background:
    linear-gradient(135deg,#59d5c5,#6d7f89);

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

    padding:20px;
}

/* PHONE */

.phone-frame{
    width:100%;
    max-width:390px;
}

/* APP */

.login-app{
    background:white;

    border-radius:35px;

    padding:35px 25px;

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

    overflow:hidden;
}

/* IMAGE */

.top-image{
    text-align:center;
    margin-bottom:15px;
}

.top-image img{
    width:170px;
}

/* TITLE */

.login-app h1{
    text-align:center;
    font-size:30px;
    margin-bottom:25px;
    color:#111;
}

/* INPUT */

.input-box{
    width:100%;
    height:55px;

    background:white;

    border-radius:14px;

    margin-bottom:18px;

    display:flex;
    align-items:center;

    padding:0 16px;

    box-shadow:
    0 5px 12px rgba(0,0,0,0.08);
}

.input-box i{
    color:#777;
    font-size:14px;
}

.input-box input{
    flex:1;
    height:100%;

    border:none;
    outline:none;
    background:none;

    padding:0 12px;

    font-size:14px;
}

/* REMEMBER */

.remember-box{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

    font-size:12px;
    color:#666;
}

.remember-box a{
    color:#2436f5;
    text-decoration:none;
}

/* BUTTON */

.login-btn{
    width:100%;
    height:55px;

    border:none;

    border-radius:30px;

    background:
    linear-gradient(135deg,#2436f5,#3c4cff);

    color:white;

    font-size:14px;
    font-weight:bold;

    cursor:pointer;

    letter-spacing:1px;

    transition:0.3s;
}

.login-btn:hover{
    transform:translateY(-2px);
}

/* DIVIDER */

.divider{
    text-align:center;
    margin:25px 0 15px;
    color:#888;
    font-size:13px;
}

/* SOCIAL */

.social-text{
    text-align:center;
    font-size:13px;
    color:#777;
    margin-bottom:18px;
}

.social-login{
    display:flex;
    justify-content:center;
    gap:18px;
}

.social-btn{
    width:55px;
    height:55px;

    border-radius:50%;

    background:white;

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

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

    cursor:pointer;

    transition:0.3s;
}

.social-btn:hover{
    transform:translateY(-4px);
}

.social-btn i{
    font-size:22px;
}

.google{
    color:#ea4335;
}

.apple{
    color:#111;
}

.facebook{
    color:#1877f2;
}

/* REGISTER */

.register-text{
    text-align:center;

    margin-top:30px;

    font-size:13px;

    color:#777;
}

.register-text a{
    color:#2436f5;
    text-decoration:none;
    font-weight:bold;
}

/* MOBILE */

@media(max-width:480px){

    body{
        padding:0;
    }

    .phone-frame{
        max-width:100%;
        height:100vh;
    }

    .login-app{
        min-height:100vh;
        border-radius:0;
        padding:40px 22px;
    }

    .top-image img{
        width:150px;
    }

}

/* ANIMATION */

/* APP MUNCUL */
.login-app{
    animation:appShow 0.8s ease;
}

@keyframes appShow{
    from{
        opacity:0;
        transform:
        translateY(30px)
        scale(0.96);
    }

    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}

/* IMAGE FLOAT */

.top-image img{
    animation:floatImage 4s ease-in-out infinite;
}

@keyframes floatImage{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* INPUT EFFECT */

.input-box{
    transition:
    0.3s ease;
}

.input-box:focus-within{

    transform:translateY(-2px);

    box-shadow:
    0 10px 20px rgba(36,54,245,0.15);

    border:
    1px solid #2436f5;
}

/* BUTTON EFFECT */

.login-btn{
    position:relative;
    overflow:hidden;
}

.login-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );

    transition:0.7s;
}

.login-btn:hover::before{
    left:120%;
}

.login-btn:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 12px 25px rgba(36,54,245,0.35);
}

/* SOCIAL ANIMATION */

.social-btn{
    transition:0.3s ease;
}

.social-btn:hover{

    transform:
    translateY(-6px)
    scale(1.08);

    box-shadow:
    0 15px 25px rgba(0,0,0,0.15);
}

/* TITLE ANIMATION */

.login-app h1{
    animation:titleShow 1s ease;
}

@keyframes titleShow{

    from{
        opacity:0;
        letter-spacing:10px;
    }

    to{
        opacity:1;
        letter-spacing:1px;
    }

}

/* INPUT STAGGER */

/* INPUT MODERN EFFECT */

.input-box{
    width:100%;
    height:58px;

    background:white;

    border-radius:16px;

    margin-bottom:18px;

    display:flex;
    align-items:center;

    padding:0 18px;

    position:relative;

    overflow:hidden;

    transition:0.35s ease;

    border:2px solid transparent;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.06);
}

/* GLOW LINE */

.input-box::before{

    content:'';

    position:absolute;

    left:-100%;
    top:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(36,54,245,0.12),
        transparent
    );

    transition:0.6s;
}

/* ICON */

.input-box i{
    color:#999;
    font-size:15px;
    transition:0.3s;
}

/* INPUT */

.input-box input{
    flex:1;
    height:100%;

    border:none;
    outline:none;
    background:none;

    padding:0 14px;

    font-size:15px;

    color:#222;
}

/* PLACEHOLDER */

.input-box input::placeholder{
    color:#aaa;
    transition:0.3s;
}

/* FOCUS EFFECT */

.input-box:focus-within{

    transform:
    translateY(-3px)
    scale(1.01);

    border-color:#2436f5;

    box-shadow:
    0 12px 25px rgba(36,54,245,0.18);
}

/* ANIMATED LIGHT */

.input-box:focus-within::before{
    left:120%;
}

/* ICON CHANGE */

.input-box:focus-within i{
    color:#2436f5;
}

/* PLACEHOLDER EFFECT */

.input-box:focus-within input::placeholder{
    color:#2436f5;
}

/* CLICK EFFECT */

.input-box:active{
    transform:scale(0.98);
}

.input-box:nth-child(1){
    animation:fadeUp 0.7s ease;
}

.input-box:nth-child(2){
    animation:fadeUp 0.9s ease;
}

.login-btn{
    animation:fadeUp 1.1s ease;
}

.social-login{
    animation:fadeUp 1.3s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* BACKGROUND ANIMATION */

body{
    background-size:200% 200%;

    animation:bgMove 8s ease infinite;
}

@keyframes bgMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

.toggle-password{
    cursor:pointer;
    transition:0.3s;
}

.toggle-password:hover{
    color:#2436f5;
    transform:scale(1.1);
}

/* SMOOTH TRANSITION */

body,
.login-app,
.input-box,
.login-btn,
.social-btn,
input,
.theme-toggle{
    transition:0.35s ease;
}

/* TOGGLE BUTTON */

.theme-toggle{
    position:fixed;

    top:20px;
    right:20px;

    width:55px;
    height:55px;

    border-radius:50%;

    background:white;

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

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

    cursor:pointer;

    z-index:999;

    font-size:20px;

    color:#2436f5;
}

/* HOVER */

.theme-toggle:hover{

    transform:
    rotate(180deg)
    scale(1.08);

}

/* DARK MODE */

body.dark-mode{

    background:
    linear-gradient(135deg,#111827,#000000);

}

/* CARD */

body.dark-mode .login-app{

    background:#111827;

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

}

/* TITLE */

body.dark-mode h1,
body.dark-mode .social-text,
body.dark-mode .register-text{

    color:white;

}

/* INPUT */

body.dark-mode .input-box{

    background:#1f2937;

    box-shadow:none;

}

/* INPUT TEXT */

body.dark-mode .input-box input{

    color:white;

}

/* PLACEHOLDER */

body.dark-mode .input-box input::placeholder{

    color:#9ca3af;

}

/* ICON */

body.dark-mode .input-box i{

    color:#9ca3af;

}

/* REMEMBER */

body.dark-mode .remember-box,
body.dark-mode .divider{

    color:#d1d5db;

}

/* SOCIAL */

body.dark-mode .social-btn{

    background:#1f2937;

    box-shadow:none;

}

/* BUTTON */

body.dark-mode .login-btn{

    background:
    linear-gradient(135deg,#4f46e5,#7c3aed);

}

/* TOGGLE */

body.dark-mode .theme-toggle{

    background:#1f2937;

    color:#facc15;

}

/* PHONE EFFECT */

body.dark-mode .phone-frame{

    filter:
    drop-shadow(0 0 25px rgba(79,70,229,0.3));

}

/* GLOW ANIMATION */

body.dark-mode .login-app{

    animation:
    darkGlow 3s infinite alternate;

}

@keyframes darkGlow{

    from{

        box-shadow:
        0 0 20px rgba(79,70,229,0.2);

    }

    to{

        box-shadow:
        0 0 40px rgba(79,70,229,0.5);

    }

}

/* =================================
   REGISTER PAGE EXTRA STYLE
================================= */

/* SUBTITLE */

.subtitle{
    text-align:center;

    color:#777;

    margin-top:-10px;
    margin-bottom:25px;

    font-size:14px;

    animation:fadeUp 0.8s ease;
}

/* PROFILE */

.profile-upload{
    text-align:center;
    margin-bottom:28px;

    animation:fadeUp 1s ease;
}

.profile-upload label{
    position:relative;
    display:inline-block;
    cursor:pointer;
}

/* PROFILE IMAGE */

.profile-upload img{
    width:100px;
    height:100px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #2436f5;

    transition:0.35s ease;

    background:white;
}

/* PROFILE HOVER */

.profile-upload img:hover{

    transform:
    scale(1.06)
    rotate(2deg);

    box-shadow:
    0 15px 30px rgba(36,54,245,0.25);
}

/* CAMERA ICON */

.camera-icon{
    position:absolute;

    right:0;
    bottom:0;

    width:34px;
    height:34px;

    border-radius:50%;

    background:
    linear-gradient(135deg,#2436f5,#3c4cff);

    color:white;

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

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

    transition:0.3s;
}

.camera-icon:hover{

    transform:
    scale(1.1)
    rotate(15deg);

}

/* TEXT */

.profile-upload p{
    margin-top:12px;

    color:#777;

    font-size:13px;
}

/* REGISTER INPUT STAGGER */

form .input-box:nth-child(2){
    animation:fadeUp 0.7s ease;
}

form .input-box:nth-child(3){
    animation:fadeUp 0.9s ease;
}

form .input-box:nth-child(4){
    animation:fadeUp 1.1s ease;
}

form .input-box:nth-child(5){
    animation:fadeUp 1.3s ease;
}

/* BUTTON */

.register-btn{
    margin-top:10px;
}

/* DARK MODE */

body.dark-mode .subtitle,
body.dark-mode .profile-upload p{
    color:#d1d5db;
}

/* PROFILE DARKMODE */

body.dark-mode .profile-upload img{

    border-color:#4f46e5;

    box-shadow:
    0 0 20px rgba(79,70,229,0.2);
}

/* CAMERA DARKMODE */

body.dark-mode .camera-icon{

    background:
    linear-gradient(135deg,#4f46e5,#7c3aed);

}