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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;

    background:
        linear-gradient(
            135deg,
            #fff4fa 0%,
            #f3efff 45%,
            #dff7ff 100%
        );

    position:relative;
    overflow:hidden;
}


/* =========================
   HIASAN CAHAYA
========================= */

body::before{
    content:"";
    position:absolute;

    width:260px;
    height:260px;

    top:-100px;
    left:-100px;

    background:rgba(255,160,210,.25);
    border-radius:50%;

    filter:blur(20px);
}

body::after{
    content:"";
    position:absolute;

    width:300px;
    height:300px;

    bottom:-130px;
    right:-120px;

    background:rgba(120,210,255,.25);
    border-radius:50%;

    filter:blur(25px);
}


/* =========================
   LOGIN BOX
========================= */

.container {
    position: relative;
    z-index: 2;
    
    width: 100%;
    max-width: 390px;
    
    min-height: 410px;
    
    background: rgba(255, 255, 255, .96);
    
    padding: 38px 28px 40px;
    
    border-radius: 28px;
    
    border: 3px solid rgba(255, 255, 255, .95);
    
    box-shadow:
        0 15px 35px rgba(80, 130, 200, .18),
        0 0 30px rgba(255, 150, 210, .18);
    
    text-align: center;
}

/* =========================
   TAJUK
========================= */

h1 {
    color: #f23b91;
    
    text-align: center;
    
    font-size: 24px;
    font-weight: 900;
    
    margin-top: 2px;
    margin-bottom: 28px;
    
    white-space: nowrap;
    
    text-shadow:
        2px 2px 0 #ffffff,
        -2px -2px 0 #ffffff,
        0 3px 0 #ffffff,
        0 5px 0 #62c9ff,
        0 8px 10px rgba(70, 150, 220, .45);
}


/* =========================
   INPUT
========================= */

input {
    width: 100%;
    
    height: 58px;
    
    padding: 0 20px;
    
    margin-bottom: 24px;
    
    border-radius: 17px;
    
    border: 3px solid #e2e2e2;
    
    background: #ffffff;
    
    font-size: 20px;
    
    color: #333;
    
    outline: none;
    
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, .04);
    
    transition: .2s;
}

input:focus {
    border-color: #ff9dcc;
    
    box-shadow:
        0 0 0 4px rgba(255, 157, 204, .15),
        0 5px 15px rgba(255, 140, 200, .15);
}

input::placeholder {
    color: #777;
}


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

.buttons{
    display:flex;

    gap:16px;

    margin-top:8px;
}


button{
    flex:1;

    min-height:72px;

    border:none;

    border-radius:18px;

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

    color:white;

    cursor:pointer;

    transition:.2s;

    box-shadow:
        0 6px 14px rgba(100,130,200,.20);

    text-shadow:
        1px 1px 2px rgba(80,80,120,.25);
}


/* CREATE ACCOUNT */

#registerBtn{
    background:
        linear-gradient(
            135deg,
            #ffb6dc 0%,
            #ff79b8 50%,
            #ff5ca8 100%
        );

    border:3px solid #ffffff;

    box-shadow:
        0 7px 16px rgba(255,100,175,.25);
}


/* LOGIN */

#loginBtn{
    background:
        linear-gradient(
            135deg,
            #a9e5ff 0%,
            #72cfff 50%,
            #4faeea 100%
        );

    border:3px solid #ffffff;

    box-shadow:
        0 7px 16px rgba(80,180,240,.25);
}


/* =========================
   TEKAN BUTTON
========================= */

button:active{
    transform:scale(.96);
}


/* =========================
   MESSAGE
========================= */

#message{
    margin-top:22px;

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

    color:#d92f87;
}

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

#forgotPassword{
    margin-top:18px;
    color:#4faeea;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
}

#forgotPassword:active{
    transform:scale(.96);
}

#resetBox{
    margin-top:20px;
}

#resetBox input{
    margin-bottom:16px;
}

#resetBtn{
    width:100%;
    min-height:58px;
    background:
        linear-gradient(
            135deg,
            #a9e5ff 0%,
            #72cfff 50%,
            #4faeea 100%
        );
    border:3px solid #ffffff;
    border-radius:18px;
    font-size:20px;
    font-weight:bold;
    color:white;
    box-shadow:
        0 7px 16px rgba(80,180,240,.25);
}

#backToLogin{
    margin-top:16px;
    color:#f23b91;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}

#backToLogin:active{
    transform:scale(.96);
}



/* KUNCI MANGGA PASSWORD */

.password-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
}

.password-wrapper input {
    width: 100%;
    margin-bottom: 0;
    padding-right: 60px;
}

/* BUTANG KUNCI */

.password-wrapper .eye-btn {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: none !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;

    font-size: 22px !important;
    line-height: 1 !important;

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

    cursor: pointer;
}

.password-wrapper .eye-btn:active {
    transform: translateY(-50%) !important;
}


/* =========================
   HONOR PAD - SEMUA TENGAH
========================= */

@media (min-width: 600px) {
    
    body {
        min-height: 100vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px 0 !important;
        box-sizing: border-box !important;
    }
    
    .container {
        max-width: 680px !important;
        height: 680px !important;
        min-height: 680px !important;
        
        padding: 55px !important;
        box-sizing: border-box !important;
        
        margin: 0 auto !important;
        transform: none !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
}


/* =========================
   BACKGROUND CLEAN
   HP + HONOR PAD
========================= */

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    
    margin: 0;
    padding: 0;
    
    background: #f5f0ff !important;
}

/* BUANG CAHAYA TAMBAHAN */

body::before,
body::after {
    display: none !important;
    content: none !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* CENTER LOGIN BOX - PORTRAIT HP SAHAJA */

@media (max-width: 599px) and (orientation: portrait) {
    
    body {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    .container {
        position: relative !important;
        
        transform: translateY(-8px) !important;
        
        margin: 0 auto !important;
    }
    
}


/* FORGOT PASSWORD - HP */

@media (max-width: 599px) and (orientation: portrait) {
    
    #forgotPassword {
        transform: translateY(10px) !important;
    }
    
}


/* =========================
   HONOR PAD - NAIK & TAJUK BESAR
========================= */

@media (min-width: 600px) {
    
    .container {
        transform: translateY(-100px) !important;
    }
    
    h1 {
        font-size: 36px !important;
        margin-bottom: 28px !important;
        white-space: nowrap;
        
        /* TEKS HE BLOOM NAIK ATAS */
        transform: translateY(-26px) !important;
    }
    
}


/* =========================
   HONOR PAD - TEXT LEBIH BESAR
========================= */

@media (min-width: 600px) {

    /* EMAIL & PASSWORD */
    input {
        font-size: 26px !important;
    }

    /* CREATE ACCOUNT & LOGIN */
    #registerBtn,
    #loginBtn {
        font-size: 30px !important;
    }

    /* FORGOT PASSWORD */
    #forgotPassword {
        font-size: 24px !important;
        transform: translateY(20px) !important;
    }