/* ================================
           RESET
        ================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;

            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(183, 119, 25, 0.14),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(183, 119, 25, 0.12),
                    transparent 30%
                ),
                #f7f7f5;

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

            padding: 30px;

            color: #242424;
        }


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

        .login-wrapper {
            width: 100%;
            max-width: 1050px;
            min-height: 620px;

            background: #ffffff;

            border-radius: 28px;

            overflow: hidden;

            display: grid;
            grid-template-columns: 1fr 1fr;

            box-shadow:
                0 25px 70px rgba(0, 0, 0, 0.12);

            border: 1px solid rgba(0, 0, 0, 0.05);
        }


        /* ================================
           LEFT BRAND SECTION
        ================================= */

        .brand-section {
            position: relative;

            display: flex;
            flex-direction: column;

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

            padding: 50px;

            background:
                linear-gradient(
                    145deg,
                    #171717 0%,
                    #242424 50%,
                    #111111 100%
                );

            color: white;

            overflow: hidden;
        }

        .brand-section::before {
            content: "";

            position: absolute;

            width: 420px;
            height: 420px;

            border-radius: 50%;

            background: rgba(191, 126, 27, 0.10);

            top: -180px;
            left: -180px;
        }

        .brand-section::after {
            content: "";

            position: absolute;

            width: 320px;
            height: 320px;

            border-radius: 50%;

            border: 1px solid rgba(191, 126, 27, 0.25);

            right: -150px;
            bottom: -130px;
        }


        .brand-content {
            position: relative;
            z-index: 2;

            text-align: center;
        }


        /* LOGO */

        .logo-container {
            width: 190px;
            height: 190px;

            margin: 0 auto 25px;

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

        .logo {
            width: 100%;
            height: 100%;

            object-fit: contain;

            display: block;
        }


        /* BRAND NAME */

        .brand-name {
            font-size: 38px;
            font-weight: 800;

            letter-spacing: 3px;

            color: #ffffff;

            margin-bottom: 10px;
        }

        .brand-name span {
            color: #c0811e;
        }


        .brand-description {
            max-width: 350px;

            margin: 0 auto;

            color: #bdbdbd;

            font-size: 15px;

            line-height: 1.7;
        }


        .brand-line {
            width: 55px;
            height: 3px;

            background: #c0811e;

            margin: 22px auto;
        }


        .copyright {
            margin-top: 35px;

            font-size: 12px;

            color: #777;
        }


        /* ================================
           LOGIN SECTION
        ================================= */

        .login-section {
            display: flex;
            align-items: center;

            padding: 55px 65px;

            background: #ffffff;
        }

        .login-content {
            width: 100%;
            max-width: 410px;

            margin: auto;
        }


        .login-heading {
            font-size: 31px;

            font-weight: 750;

            color: #202020;

            margin-bottom: 8px;
        }

        .login-subheading {
            color: #777;

            font-size: 14px;

            margin-bottom: 35px;
        }


        /* ================================
           FORM
        ================================= */

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;

            font-size: 13px;

            font-weight: 650;

            color: #333;

            margin-bottom: 8px;
        }


        .input-wrapper {
            position: relative;
        }


        .input-icon {
            position: absolute;

            left: 16px;
            top: 50%;

            transform: translateY(-50%);

            width: 18px;

            color: #999;

            pointer-events: none;
        }


        .form-input {
            width: 100%;

            height: 52px;

            border: 1px solid #dedede;

            border-radius: 12px;

            background: #fafafa;

            padding: 0 48px;

            font-size: 14px;

            color: #222;

            outline: none;

            transition: all 0.25s ease;
        }

        .form-input::placeholder {
            color: #aaa;
        }

        .form-input:focus {
            background: #ffffff;

            border-color: #bd7b19;

            box-shadow:
                0 0 0 4px rgba(189, 123, 25, 0.10);
        }


        /* PASSWORD EYE */

        .password-toggle {
            position: absolute;

            right: 15px;
            top: 50%;

            transform: translateY(-50%);

            border: none;

            background: transparent;

            cursor: pointer;

            color: #999;

            font-size: 17px;
        }

        .password-toggle:hover {
            color: #bd7b19;
        }


        /* ================================
           OPTIONS
        ================================= */

        .form-options {
            display: flex;

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

            margin: 5px 0 25px;
        }


        .remember {
            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 13px;

            color: #666;

            cursor: pointer;
        }

        .remember input {
            width: 15px;
            height: 15px;

            accent-color: #bd7b19;

            cursor: pointer;
        }


        .forgot-password {
            color: #a86d16;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;
        }

        .forgot-password:hover {
            text-decoration: underline;
        }


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

        .login-button {
            width: 100%;

            height: 53px;

            border: none;

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    #c48625,
                    #a96b13
                );

            color: white;

            font-size: 15px;

            font-weight: 700;

            letter-spacing: 0.3px;

            cursor: pointer;

            box-shadow:
                0 10px 25px rgba(169, 107, 19, 0.22);

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

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

            box-shadow:
                0 14px 30px rgba(169, 107, 19, 0.30);
        }

        .login-button:active {
            transform: translateY(0);
        }


        /* LOADING */

        .login-button.loading {
            pointer-events: none;

            opacity: 0.85;
        }

        .spinner {
            display: inline-block;

            width: 17px;
            height: 17px;

            border: 2px solid rgba(255,255,255,0.4);

            border-top-color: white;

            border-radius: 50%;

            animation: spin 0.7s linear infinite;

            vertical-align: middle;

            margin-right: 7px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }


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

        .message {
            display: none;

            margin-top: 16px;

            padding: 12px 14px;

            border-radius: 10px;

            font-size: 13px;

            line-height: 1.5;
        }

        .message.error {
            display: block;

            background: #fff2f2;

            color: #c62828;

            border: 1px solid #ffd1d1;
        }

        .message.success {
            display: block;

            background: #f0faf3;

            color: #26753b;

            border: 1px solid #ccebd5;
        }


        /* ================================
           SECURITY TEXT
        ================================= */

        .security-text {
            text-align: center;

            margin-top: 25px;

            color: #999;

            font-size: 11px;
        }


        /* ================================
           RESPONSIVE
        ================================= */

        @media (max-width: 850px) {

            body {
                padding: 20px;
            }

            .login-wrapper {
                max-width: 520px;

                grid-template-columns: 1fr;

                min-height: auto;
            }

            .brand-section {
                padding: 35px 25px;

                min-height: 330px;
            }

            .logo-container {
                width: 130px;
                height: 130px;

                margin-bottom: 15px;
            }

            .brand-name {
                font-size: 30px;
            }

            .brand-description {
                font-size: 13px;
            }

            .copyright {
                margin-top: 20px;
            }

            .login-section {
                padding: 40px 30px;
            }
        }


        @media (max-width: 450px) {

            body {
                padding: 12px;
            }

            .login-wrapper {
                border-radius: 20px;
            }

            .brand-section {
                min-height: 290px;

                padding: 25px 20px;
            }

            .logo-container {
                width: 105px;
                height: 105px;
            }

            .brand-name {
                font-size: 26px;

                letter-spacing: 2px;
            }

            .login-section {
                padding: 35px 22px;
            }

            .login-heading {
                font-size: 27px;
            }

            .form-options {
                gap: 10px;
            }
        }