/* --- BAGIAN 1: GAYA DASAR & UTAMA --- */

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

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: #f8f9fa;
    color: #343a40;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.main-header {
    background: linear-gradient(135deg, #FF416C, #FF4B2B);
    color: white;
    padding: 40px 20px;
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ... Kode CSS dasar lainnya dari jawaban sebelumnya ... */
.main-header h1{margin:0;font-size:2.5em;font-weight:700}.main-header p{margin:5px 0 0;font-size:1.1em}.search-wrapper{margin:30px 0}#searchInput{width:100%;padding:15px;font-size:1em;border-radius:10px;border:2px solid #ddd;box-sizing:border-box;transition:border-color .3s}#searchInput:focus{border-color:#FF4B2B;outline:0}#file-list-container{background-color:transparent;box-shadow:none;border-radius:0;padding:0}.loading-text{text-align:center;color:#888;padding:40px}.main-footer{text-align:center;padding:20px;margin-top:40px;color:#888;font-size:.9em}.login-container{max-width:400px;margin:50px auto;padding:30px;background-color:#fff;border-radius:15px;box-shadow:0 4px 15px rgba(0,0,0,.08);text-align:center}.login-container h2{color:#ff416c;margin-top:0;margin-bottom:25px}#login-form input{width:100%;padding:12px;margin-bottom:15px;border-radius:8px;border:2px solid #ddd;box-sizing:border-box;font-family:'Poppins',sans-serif}#login-form input:focus{border-color:#ff4b2b;outline:0}#login-button{width:100%;padding:12px;border:none;background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff;font-weight:600;font-size:1em;border-radius:8px;cursor:pointer;transition:transform .2s}#login-button:hover{transform:scale(1.03)}#error-message{color:red;margin-top:15px;font-size:.9em;min-height:1em}

/* --- BAGIAN 2: GAYA HIERARKI "KARTU BERSARANG" --- */

/* ... Kode gaya folder-group dan folder-title dari jawaban sebelumnya ... */
.folder-group[data-level="0"]{background-color:#fff;border-radius:12px;padding:15px 20px;margin-bottom:20px;box-shadow:0 4px 6px rgba(0,0,0,.05);border:1px solid #eee}.folder-group[data-level="1"]{background-color:#fdfaf9;border-radius:8px;padding:10px 15px;margin-top:10px;border-left:3px solid #ffbca8}.folder-group[data-level="2"]{background-color:#fff6f3;border-radius:6px;padding:8px 12px;margin-top:8px;border-left:3px solid #ff9d7f}.folder-group[data-level="3"]{background-color:#fff2ee;padding:5px 10px;margin-top:5px;border-radius:4px;border-left:3px solid #f9815e}.folder-title{display:flex;align-items:center;margin:0 0 5px}.folder-title::after{content:'📂';margin-right:10px;order:-1}.folder-group[data-level="0"] > .folder-title{font-size:1.25em;font-weight:600;color:#d9480f;margin-bottom:10px}.folder-group[data-level="1"] > .folder-title{font-size:1.1em;font-weight:600;color:#ff6b35}.folder-group[data-level="2"] > .folder-title{font-size:1em;font-weight:500;color:#e85a22}.folder-group[data-level="3"] > .folder-title{font-size:.95em;font-weight:500;color:#c76f52}


/* --- BAGIAN 3: GAYA FILE ITEM (DENGAN 2 TOMBOL) --- */

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    margin: 0;
    border-bottom: 1px solid #f1f1f1;
}
.file-item:last-child {
    border-bottom: none;
}
.file-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
}
.file-info span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}
.file-icon {
    font-size: 1.2em; /* Perbesar sedikit ikon emoji */
    margin-right: 12px;
    width: 24px; /* Beri ruang tetap untuk ikon */
    text-align: center;
}

/* Grup untuk dua tombol aksi */
.button-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antar tombol */
    flex-shrink: 0; /* Mencegah tombol menyusut */
}

/* Gaya dasar untuk kedua tombol */
.btn-action {
    display: inline-block;
    padding: 6px 14px;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Gaya spesifik untuk tombol LIHAT */
.btn-view {
    background-color: #e9ecef; /* Warna abu-abu netral */
    color: #495057;
    border-color: #dee2e6;
}
.btn-view:hover {
    background-color: #ced4da;
    border-color: #adb5bd;
}

/* Gaya spesifik untuk tombol DOWNLOAD */
.btn-download {
    background-color: #FF4B2B; /* Warna oranye utama */
    color: white;
    border-color: #FF4B2B;
}
.btn-download:hover {
    background-color: #E84022;
    border-color: #E84022;
    transform: scale(1.05);
}

/* ... (Semua kode CSS dari jawaban sebelumnya tetap ada di atas) ... */

/* --- GAYA HEADER RESPONSIVE BARU --- */

/* Kontainer utama di dalam header */
.header-container {
    display: flex;
    flex-direction: column; /* Default untuk mobile: susun ke bawah */
    align-items: center; /* Pusatkan item secara horizontal */
    gap: 20px; /* Jarak antara tombol dan blok teks */
    text-align: center;
}

/* Blok untuk H1 dan P */
.header-text {
    order: 2; /* Tampilkan blok teks di bawah tombol pada susunan mobile */
}

/* Tombol Logout */
.btn-logout {
    order: 1; /* Tampilkan tombol di atas blok teks pada susunan mobile */
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content; /* Lebar tombol sesuai isinya */
}

.btn-logout:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

/* --- Media Query untuk Layar Lebih Besar (Desktop) --- */
/* Aturan ini akan aktif jika lebar layar 768px atau lebih */
@media (min-width: 768px) {
    .header-container {
        flex-direction: row; /* Susun ke samping untuk desktop */
        justify-content: space-between; /* Posisikan item di ujung-ujung */
        text-align: left; /* Ratakan teks ke kiri di desktop */
    }

    .header-text {
        order: 1; /* Kembalikan blok teks ke posisi pertama */
        flex-grow: 1; /* Biarkan blok teks memakan ruang kosong */
        text-align: center; /* Tetap pusatkan teks di desktop */
    }

    .btn-logout {
        order: 2; /* Pindahkan tombol ke posisi kedua */
        position: absolute; /* Posisikan absolut relatif terhadap container */
        top: 50%;
        right: 20px;
        transform: translateY(-50%); /* Pusatkan tombol secara vertikal */
    }

    /* Penyesuaian agar container header bisa menjadi acuan posisi absolut */
     .main-header .container {
        position: relative;
    }
}