/* Tampilan halaman login, lupa password & reset password (tema coklat Pramuka) */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

body {

    min-height: 100vh;

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

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(36,23,13, .92),
            rgba(107,68,35, .88)
        ),
        url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1800&q=85');

    background-size: cover;
    background-position: center;

}

.login-wrapper {

    width: 100%;
    max-width: 430px;

}

.login-card {

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

    border-radius: 28px;

    padding: 35px 30px;

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

    position: relative;

    overflow: hidden;

}

.login-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 7px;

    background:
        linear-gradient(
            90deg,
            #6b4423,
            #c08f5a,
            #d4a017
        );

}

.logo {

    width: 85px;
    height: 85px;

    margin: 5px auto 15px;

    border-radius: 50%;

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

    background:
        linear-gradient(
            145deg,
            #6b4423,
            #c08f5a
        );

    color: white;

    font-size: 40px;

    box-shadow:
        0 10px 25px rgba(107,68,35,.3);

}

.title {

    text-align: center;

    color: #4a2f1a;

    font-size: 25px;

    font-weight: 800;

    margin: 0;

}

.subtitle {

    text-align: center;

    color: #7a6a58;

    font-size: 14px;

    margin:
        8px 0 25px;

}

.alert {

    padding: 13px 15px;

    border-radius: 12px;

    margin-bottom: 17px;

    font-size: 14px;

    line-height: 1.5;

}

.alert-error {

    background: #fee2e2;

    color: #991b1b;

    border:
        1px solid #fecaca;

}

.alert-success {

    background: #f1e4cc;

    color: #6b4423;

    border:
        1px solid #e3cca6;

}

.form-group {

    margin-bottom: 18px;

}

.form-label {

    display: block;

    margin-bottom: 8px;

    color: #463a2e;

    font-size: 14px;

    font-weight: 700;

}

.input-wrapper {

    position: relative;

}

.input-icon {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

    color: #7a6a58;

    pointer-events: none;

}

.form-input {

    width: 100%;

    height: 52px;

    border:
        1px solid #d8cbb8;

    border-radius: 14px;

    padding:
        0 45px;

    font-size: 15px;

    outline: none;

    background: #fbf8f3;

    transition:
        .2s ease;

}

.form-input:focus {

    border-color: #946339;

    background: white;

    box-shadow:
        0 0 0 4px rgba(192,143,90,.12);

}

.password-toggle {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    cursor: pointer;

    font-size: 18px;

    color: #7a6a58;

    padding: 7px;

}

.login-button {

    width: 100%;

    height: 53px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #6b4423,
            #946339
        );

    color: white;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 22px
        rgba(107,68,35,.25);

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

}

.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(107,68,35,.32);

}

.login-button:active {

    transform:
        translateY(0);

}

.register {

    text-align: center;

    margin-top: 22px;

    color: #7a6a58;

    font-size: 14px;

}

.register a {

    color: #7d5230;

    font-weight: 800;

    text-decoration: none;

}

.register a:hover {

    text-decoration: underline;

}

.back-home {

    text-align: center;

    margin-top: 15px;

}

.back-home a {

    color: #5e4f40;

    text-decoration: none;

    font-size: 13px;

}

.back-home a:hover {

    color: #6b4423;

}

.info {

    margin-top: 20px;

    padding: 13px;

    background: #faf4ea;

    border:
        1px solid #e3cca6;

    border-radius: 12px;

    color: #6b4423;

    font-size: 12px;

    line-height: 1.6;

    text-align: center;

}

.footer {

    text-align: center;

    color: rgba(255,255,255,.85);

    font-size: 12px;

    margin-top: 18px;

}

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

@media (max-width: 480px) {

    body {
        padding: 14px;
    }

    .login-card {

        padding:
            32px 20px;

        border-radius: 23px;

    }

    .logo {

        width: 75px;
        height: 75px;

        font-size: 34px;

    }

    .title {

        font-size: 22px;

    }

    .subtitle {

        font-size: 13px;

    }

    .form-input {

        height: 50px;

    }

    .login-button {

        height: 51px;

    }

}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.form-input:focus-visible,
.login-button:focus-visible,
.password-toggle:focus-visible,
a:focus-visible {
    outline: 3px solid #d4a017;
    outline-offset: 2px;
}

.lupa {
    margin: -8px 0 16px;
    text-align: right;
    font-size: 13px;
}

.lupa a {
    color: #7d5230;
    font-weight: 700;
    text-decoration: none;
}

.lupa a:hover { text-decoration: underline; }

.login-button:disabled {
    opacity: .7;
    cursor: wait;
    transform: none;
}

/* =========================================================
   TEMA PRAMUKA: warna status tetap hijau agar mudah dikenali
   ========================================================= */
.alert-success { color: #166534; background: #dcfce7; border-color: #bbf7d0; }

.login-card::before { background: linear-gradient(#b3202a 0 60%, #ffffff 60% 100%); }

.info a, .alert a { color: #6b4423; font-weight: 700; }
.info a:hover, .alert a:hover { color: #4a2f1a; }