/* RESET DAN UMUM */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 10px;

    /* Menghindari elemen terlalu dekat dengan tepi layar di mobile */
}

.container img {
    width: 100%
}

/* KONTENER UTAMA */
.container {
    background: #00014f;
    border: 5px solid rgb(0, 0, 0);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    max-width: 400px;
    /* Efek glow */
}

.container h2 {
    color: rgb(255, 254, 254);
    font-weight: bold;
    font-size: 24px;
    margin-left: 10px;
}

/* GAYA UNTUK SELECT */
select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f7f7f7;
    font-size: 16px;
    margin-top: 10px;
}

/* GAYA UNTUK LABEL KENDALA */
.label-kendala {
    color: #ebe5e5;
    font-weight: bold;
    font-size: 15px;
    margin-top: 15px;
    display: block;
}

/* GAYA INPUT, TEXTAREA, BUTTON */
input,
textarea,
button {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #f8f8f4;
    font-size: 16px;
    box-sizing: border-box;
    /* Mencegah elemen melampaui lebar container */
}

/* GAYA BUTTON */
button {
    background-color: green;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: darkgreen;
}

/* NOTE */
.note {
    margin-top: 15px;
    font-size: 14px;
    color: #f8f8f7;
    margin-bottom: 10px;
}

/* FOOTER */
.foot {
    font-weight: bold;
    background-color: rgb(236, 236, 240);
    margin-right: 20px;
    margin-left: 20px;
}

/* RESPONSIF UNTUK MOBILE */
@media (max-width: 600px) {
    .container {
        margin-bottom: -21px;
        width: 90%;
    }

    .logo-lightning {
        width: 150px;
        margin-left: 100px;
    }

    .container h2 {
        font-size: 20px;
    }

    input,
    textarea,
    button {
        font-size: 14px;
    }

    .note {
        font-size: 12px;
    }
}

/* Styling label agar turun sedikit */
label[for="complaint_type"] {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    /* Menambahkan sedikit jarak antara label dan dropdown */
    font-weight: bold;
    font-size: 14px;
    color: #f8f6f6;
}

/* Styling dropdown */
select#complaint_type {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

select#complaint_type:focus {
    outline: none;
    border-color: #fcfaf9;

}

.input-container {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.input-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    font-size: 18px;
    pointer-events: none;
}

.input-container input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    /* Padding kiri agar tidak menimpa ikon */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}


/* RESPONSIF UNTUK UKURAN LEBIH KECIL (misalnya 480px) */
@media (max-width: 480px) {
    body {
        /* Gambar latar belakang khusus untuk layar lebih kecil */
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }

    .container {
        margin-bottom: -15px;
        width: 100%;
        /* Menyesuaikan lebar kontainer */
    }

    .logo-lightning {
        width: 100px;
        /* Ukuran logo lebih kecil */
    }

    .container h2 {
        font-size: 16px;
        /* Menyesuaikan ukuran font untuk ukuran layar kecil */
    }

    input,
    textarea,
    button {
        font-size: 12px;
    }

    .note {
        font-size: 10px;
    }
}

/* RESPONSIF UNTUK LEBAR LAYAR KECIL (misalnya 375px atau lebih kecil) */
@media (max-width: 375px) {
    body {

        /* Gambar latar belakang khusus untuk layar lebih kecil */
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }

    .container {
        margin-bottom: 0;
        width: 100%;
        /* Menyesuaikan lebar kontainer */
    }

    .logo-lightning {
        width: 90px;
        /* Ukuran logo lebih kecil */
    }

    .container h2 {
        font-size: 14px;
        /* Menyesuaikan ukuran font untuk layar sangat kecil */
    }

    input,
    textarea,
    button {
        font-size: 12px;
    }

    .note {
        font-size: 10px;
    }
}

/* RESPONSIF UNTUK LAYAR TABLET (Lebar Layar 768px dan Lebih Besar) */
@media (min-width: 768px) {
    body {

        /* Gambar latar belakang untuk tablet */
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }

    .container {
        width: 80%;
        margin: 0 auto;
        /* Menyesuaikan kontainer di tengah layar */
    }

    .logo-lightning {
        width: 150px;
        /* Ukuran logo lebih besar untuk tablet */
    }

    .container h2 {
        font-size: 22px;
    }

    input,
    textarea,
    button {
        font-size: 16px;
    }

    .note {
        font-size: 14px;
    }
}

/* RESPONSIF UNTUK LAYAR DESKTOP (Lebar Layar Lebih Besar dari 1024px) */
@media (min-width: 1024px) {
    body {

        /* Gambar latar belakang untuk desktop */
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }

    .container {
        width: 60%;
        margin: 0 auto;
        /* Menyesuaikan kontainer di tengah layar */
    }

    .logo-lightning {
        width: 200px;
        /* Ukuran logo lebih besar untuk desktop */
    }

    .container h2 {
        font-size: 26px;
    }

    input,
    textarea,
    button {
        font-size: 18px;
    }

    .note {
        font-size: 16px;
    }
}