@charset "UTF-8";

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(244, 75%, 57%);
    --second-color: hsl(249, 64%, 47%);
    --title-color: hsl(244, 12%, 12%);
    --text-color: hsl(244, 4%, 36%);
    --body-color: hsl(208, 97%, 85%);
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --h2-font-size: 1.25rem;
    --small-font-size: 0.813rem;
    --smaller-font-size: 0.75rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
}

@media screen and (min-width: 1024px) {
    :root {
        --h2-font-size: 1.75rem;
        --normal-font-size: 1rem;
        --small-font-size: 0.875rem;
        --smaller-font-size: 0.813rem;
    }
}

/* Row styling */
.row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to next line if necessary */
    margin-right: -15px;
    margin-left: -15px;
}

/* Column base styling */
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* 12-column grid setup */
.col-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
} /* 1/12 */
.col-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
} /* 2/12 */
.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
} /* 3/12 */
.col-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
} /* 4/12 */
.col-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
} /* 5/12 */
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
} /* 6/12 */
.col-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
} /* 7/12 */
.col-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
} /* 8/12 */
.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
} /* 9/12 */
.col-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
} /* 10/12 */
.col-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
} /* 11/12 */
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
} /* Full width (12/12) */

.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.flex-center {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

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

body {
    background-color: var(--body-color);
    font-family: var(--body-font);
    color: var(--text-color);
}

input,
button {
    font-family: var(--body-font);
    border: none;
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
}

/*=============== LOGIN FORM ===============*/
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.login__form,
.login__inputs {
    display: grid;
}

.login__content {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.login__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 3.5rem;
    box-shadow: 0 24px 48px hsla(244, 75%, 36%, 0.45);
}

.login__form {
    background-color: hsla(244, 16%, 92%, 0.6);
    border: 2px solid hsla(244, 16%, 92%, 0.75);
    /* margin-inline: 1.5rem; */
    row-gap: 1.25rem;
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 1rem;
}

.login__title {
    color: var(--title-color);
    font-size: var(--h2-font-size);
    margin-bottom: 0.5rem;
}

.login__title span {
    color: var(--first-color);
}

.login__description {
    font-size: var(--small-font-size);
}

.login__inputs {
    row-gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.login__label {
    display: block;
    color: var(--title-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    margin-bottom: 0.25rem;
}

.login__input {
    width: 100%;
    padding: 14px 12px;
    border-radius: 6px;
    border: 2px solid var(--text-color);
    background-color: hsla(244, 16%, 92%, 0.6);
    color: var(--title-color);
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    transition: border 0.4s;
}

.login__input::placeholder {
    color: var(--text-color);
}

.login__input:focus,
.login__input:valid {
    border: 2px solid var(--first-color);
}

.login__box {
    position: relative;
}

.login__box .login__input {
    padding-right: 36px;
}

.login__eye {
    width: max-content;
    height: max-content;
    position: absolute;
    right: 0.75rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    font-size: 1.25rem;
    cursor: pointer;
}

.login__buttons {
    display: flex;
    column-gap: 0.75rem;
}

.login__button {
    width: 100%;
    padding: 14px 2rem;
    border-radius: 6px;
    background: linear-gradient(
        180deg,
        var(--first-color),
        var(--second-color)
    );
    color: #fff;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    box-shadow: 0 6px 24px hsla(244, 75%, 48%, 0.5);
    margin-bottom: 1rem;
    cursor: pointer;
}

/* Gaya untuk tombol refresh */
.refresh-btn {
    width: 50px;
    height: 50px;
    display: center;
    right: 10px;
    top: 10px;
    align-items: center;
    justify-content: center;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.refresh-btn:hover {
    background-color: #c82333;
}

.refresh-btn i {
    font-size: 35px;
}

/*=============== BREAKPOINTS ===============*/
@media screen and (max-width: 1024px) {
    .login__img {}
}