* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
}
html {
    font-family: "Plus Jakarta Sans", sans-serif;
}
.wrapper {
    background: url("/assets/hero-login.png") no-repeat center center/cover;
    min-height: 100vh;
    position: relative;
    padding-bottom: 8rem;
    overflow: hidden;
}

.overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Agar gambar dekorasi tidak nutupin klik */
    z-index: 0;
}

.vektor-atas,
.vektor-bawah {
    position: absolute;
    width: 48rem;
    height: auto;
}

.vektor-atas {
    left: 0;
    top: 0;
}

.vektor-bawah {
    right: 0;
    bottom: 0;
}

.wrapper > .container {
    position: relative;
    z-index: 1; /* Supaya h1 di atas layer gambar */
}

.card {
    width: 100%;
    max-width: 733px; /* batas maksimal di layar besar */
    background: #fff;
    border-radius: 20px;
    margin: 0 auto; /* biar selalu di tengah */
}

.card-body {
    width: 100%;
    height: auto;
}
.form-control {
    background: rgba(240, 240, 240, 1);
    border: Mixed solid rgba(0, 0, 0, 1);
}

.btn {
    background: rgba(6, 77, 63, 1);
    color: white;
}
.btn-custom {
    background: rgba(2, 62, 138, 1);
    height: 2rem;
    border-radius: 10px;
    color: white;
}
@media (max-width: 992px) {
    /* tablet */
    .title-login {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    /* HP sedang */
    .title-login {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .title-login {
        font-size: 20px;
    }
}