/* --- CSS GLOBAL (Style Font & Warna) --- */
html, body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Lato, sans-serif;
    font-size: 14px;
    color: #dee2e6;
    text-align: center;
}

i { color: #6c757d; }
hr { max-width: auto; height: 1px; margin: auto; opacity: 0.2; }
code { color: #fd7e14; }

.form-control::placeholder { color: #bbb; opacity: 0.7; }
.form-control:focus { background-color: #222; color: #fff; border-color: #5bc0de; }

/* --- STRUKTUR LAYOUT RESPONSIF --- */

/* 1. Wrapper Utama (Pusat Halaman) */
#main-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Desktop: Tengah Vertikal */
}

/* 2. Kotak Konten (#main) */
#main {
    background-color: #1f1f1f;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #1f1f1f;
    max-width: 600px;
    width: 100%;
    /* Default Desktop: Tinggi menyesuaikan konten */
}

/* --- TAMPILAN MOBILE (Layar < 768px) --- */
@media only screen and (max-width: 768px) {
    html, body {
        height: 100%;
        overflow: hidden; /* Hilangkan scrollbar body utama */
        background-color: #1f1f1f; /* Samakan warna background */
    }

    /* Wrapper Mobile: Full Tinggi, Rata Atas */
    #main-wrapper {
        align-items: flex-start; 
        height: 100dvh; /* Dynamic Height untuk Mobile Browser */
        padding: 0;
    }

    /* Kotak Utama Mobile: Full Screen, Flexbox Column */
    #main {
        height: 100%;
        max-width: 100%;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 15px; /* Padding pinggir layar HP */
        
        display: flex;
        flex-direction: column;
    }

    /* 1. Header: Diam di atas */
    .header-section {
        flex-shrink: 0;
    }

    /* 2. Konten (Player, Queue, Request): Mengisi ruang & Scrollable */
    .content-section {
        flex-grow: 1; /* Mengisi sisa ruang kosong */
        overflow-y: auto; /* Bisa discroll jika konten kepanjangan */
        padding: 10px 0;
        
        /* Flexbox untuk merenggangkan jarak kotak di dalamnya */
        display: flex;
        flex-direction: column;
    }

    /* 3. Footer: Diam di bawah */
    .footer-section {
        flex-shrink: 0;
        margin-top: auto; /* Memastikan dia selalu di dasar */
    }
}