* {
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            min-height: 100dvh;
            font-family: Arial, Helvetica, sans-serif;
            overflow-x: hidden;

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

            /* background utama */
            background: #ffffff;

            position: relative;
        }


        /* =====================================================
           BACKGROUND EFEK KIPAS
           ===================================================== */

        .fan-background {
            position: fixed;
            inset: 0;
            overflow: hidden;
            z-index: 0;

            background:
                linear-gradient(
                    135deg,
                    #C5DBF0 0%,
                    #A7CAEB 45%,
                    #6AA5DE 100%
                );
        }


        /* kipas bagian atas */

        .fan-background::before {
            content: "";
            position: absolute;

            width: 120vw;
            height: 120vw;

            max-width: 900px;
            max-height: 900px;

            top: -72vw;
            left: 50%;

            transform: translateX(-50%);

            border-radius: 50%;

            background:
                conic-gradient(
                    from 0deg,
                    #FFFFFF 0deg 38deg,
                    #56A6E3 38deg 76deg,
                    #FFFFFF 76deg 114deg,
                    #56A6E3 114deg 152deg,
                    #FFFFFF 152deg 190deg,
                    #56A6E3 190deg 228deg,
                    #FFFFFF 228deg 266deg,
                    #56A6E3 266deg 304deg,
                    #FFFFFF 304deg 342deg,
                    #56A6E3 342deg 360deg
                );

            opacity: 0.9;
        }


        /* kipas bagian bawah */

        .fan-background::after {
            content: "";
            position: absolute;

            width: 110vw;
            height: 110vw;

            max-width: 850px;
            max-height: 850px;

            bottom: -82vw;
            left: 50%;

            transform: translateX(-50%);

            border-radius: 50%;

            background:
                conic-gradient(
                    from 180deg,
                    #ffffff 0deg 40deg,
                    #7297B3 40deg 80deg,
                    #ffffff 80deg 120deg,
                    #7297B3 120deg 160deg,
                    #ffffff 160deg 200deg,
                    #7297B3 200deg 240deg,
                    #ffffff 240deg 280deg,
                    #7297B3 280deg 320deg,
                    #ffffff 320deg 360deg
                );

            opacity: 0.8;
        }


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

        .login-wrapper {
            width: 100%;
            max-width: 430px;

            padding:
                25px
                20px
                calc(25px + env(safe-area-inset-bottom));

            position: relative;
            z-index: 2;
        }


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

        .login-card {
            position: relative;

            background: rgba(255,255,255,0.97);

            border-radius: 24px;

            padding: 34px 27px 30px;

            box-shadow:
                0 20px 50px rgba(0, 100, 170, 0.18),
                0 5px 15px rgba(0, 80, 130, 0.10);

            overflow: hidden;
        }


        /* =====================================================
           EFEK FOLDING KERTAS
           ===================================================== */

        /* lipatan pojok kanan atas */

        .login-card::before {
            content: "";

            position: absolute;

            top: 0;
            right: 0;

            width: 78px;
            height: 78px;

            background:
                linear-gradient(
                    135deg,
                    #C7CDD6 0%,
                    #C7CDD6 48%,
                    #C7CDD6 49%,
                    #C7CDD6 70%,
                    #C7CDD6 71%
                );

            filter: drop-shadow(-3px 3px 3px rgba(0,0,0,0.08));

            z-index: 5;
        }


        /* lipatan bagian dalam */

        .login-card::after {
            content: "";

            position: absolute;

            top: 0;
            right: 0;

            width: 58px;
            height: 58px;

            background:
                linear-gradient(
                   135deg,
                   #A7CAEB 0%,
                   #A7CAEB 46%,
                   #A7CAEB 47%,
                   #A7CAEB 49%,
                   #A7CAEB 70%
                );

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

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

            z-index: 6;
        }


        /* =====================================================
           LOGO
           ===================================================== */

        .company-logo {
            display: flex;
            justify-content: center;
            align-items: center;

            margin-bottom: 16px;
        }

        .company-logo img {
            width: 82px;
            height: 82px;

            object-fit: contain;

            border-radius: 18px;

            background: #ffffff;

            padding: 7px;

            box-shadow:
                0 5px 18px rgba(0, 120, 200, 0.12);
        }


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

        .title {
            text-align: center;

            color: #0875bb;

            font-size: 27px;
            font-weight: 700;

            margin-bottom: 3px;
        }

        .subtitle {
            text-align: center;

            color: #7b8b95;

            font-size: 13px;

            margin-bottom: 28px;
        }


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

        .input-group-custom {
            position: relative;

            margin-bottom: 18px;
        }

        .input-icon {
            position: absolute;

            left: 15px;
            top: 50%;

            transform: translateY(-50%);

            color: #168bd0;

            font-size: 19px;

            z-index: 5;
        }

        .form-control {
            height: 52px;

            border-radius: 14px;

            border: 1px solid #d8eaf3;

            background: #f8fcfe;

            padding-left: 47px;
            padding-right: 48px;

            font-size: 16px;

            color: #234;

            box-shadow: none;

            transition: all .2s ease;
        }

        .form-control:focus {
            border-color: #3aa9e5;

            background: #ffffff;

            box-shadow:
                0 0 0 4px rgba(42, 161, 218, 0.12);
        }

        .form-control::placeholder {
            color: #a1adb4;
        }


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

        .password-toggle {
            position: absolute;

            right: 14px;
            top: 50%;

            transform: translateY(-50%);

            border: 0;
            background: transparent;

            color: #82949e;

            font-size: 20px;

            cursor: pointer;

            z-index: 10;

            padding: 5px;
        }

        .password-toggle:hover {
            color: #168bd0;
        }


        /* =====================================================
           LOGIN BUTTON
           ===================================================== */

        .btn-login {
            width: 100%;

            height: 52px;

            margin-top: 7px;

            border: none;

            border-radius: 14px;

            background:
                linear-gradient(
                    135deg,
                    #1599df,
                    #0873bc
                );

            color: #ffffff;

            font-size: 16px;

            font-weight: 600;

            box-shadow:
                0 8px 20px rgba(0, 120, 190, 0.25);

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

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

            box-shadow:
                0 12px 25px rgba(0, 120, 190, 0.30);
        }

        .btn-login:active {
            transform: scale(.98);
        }

        .btn-login i {
            margin-right: 7px;
        }


        /* =====================================================
           FOOTER
           ===================================================== */

        .copyright {
            text-align: center;

            margin-top: 22px;

            color: #78909c;

            font-size: 11px;
        }


        /* =====================================================
           MOBILE
           ===================================================== */

        @media (max-width: 480px) {

            .login-wrapper {
                padding-left: 17px;
                padding-right: 17px;
            }

            .login-card {
                padding:
                    30px
                    22px
                    27px;

                border-radius: 22px;
            }

            .company-logo img {
                width: 76px;
                height: 76px;
            }

            .title {
                font-size: 25px;
            }
        }


        /* =====================================================
           IPHONE
           ===================================================== */

        @supports (-webkit-touch-callout: none) {

            body {
                min-height: -webkit-fill-available;
            }

        }