/* General HTML/Body Reset for Full Height */
html, body {
    height: 100%; /* Memastikan html dan body mengambil tinggi penuh viewport */
    margin: 0;
    padding: 0;
}

/* General Body Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #eef2f7; /* Lighter, more modern background */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    color: #333;
    line-height: 1.6;
}

/* Main Container */
.main-container {
    width: 100%;
    max-width: 1000px; /* Slightly wider for better content display */
    background-color: #ffffff;
    border-radius: 16px; /* More rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Softer, deeper shadow */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px); /* Ensure it takes up most of the viewport height */
}

/* Header Section */
.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; /* More padding */
    background: linear-gradient(to right, #34495e, #4a627d); /* Subtle gradient */
    color: white;
    border-bottom: none; /* Removed border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-logo-container {
    display: flex;
    align-items: center;
}

/* --- PERBAIKAN UKURAN LOGO DAN STYLING TERKAIT --- */
/* Pastikan Anda menggunakan kelas ini di HTML Anda: <img src="assets/logo.png" class="header-logo-img-actual"> */
.header-logo-img-actual {
    width: 60px; /* Ukuran logo yang lebih besar */
    height: 60px;
    margin-right: 15px; /* Tambahkan jarak kanan agar tidak terlalu dekat dengan teks */
    border-radius: 50%; /* Jika logo Anda bulat */
    object-fit: contain; /* Pastikan gambar logo pas di dalam wadah tanpa terpotong */
    background-color: rgba(255, 255, 255, 0.1); /* Latar belakang semi-transparan untuk gambar */
    padding: 5px; /* Sedikit padding di sekitar logo jika diperlukan */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); /* Border putih kecil */
}

.header-logo-text {
    font-size: 2.5em; /* Ukuran teks logo yang lebih besar untuk menyeimbangkan gambar */
    font-weight: 800;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
/* --- AKHIR PERBAIKAN UKURAN LOGO DAN STYLING TERKAIT --- */

/* Catatan: Kelas .header-logo-img yang lama di CSS Anda mungkin tidak lagi digunakan
   jika Anda telah mengganti <span> dengan <img> di HTML.
   Saya telah menghapus styling yang tidak relevan untuk <span> logo teks lama. */
/* .header-logo-img {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: #34495e;
    font-weight: 800;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url('https://placehold.co/48x48/34495e/ffffff?text=SIPP');
    background-size: cover;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
} */


.header-buttons .btn-header {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    color: white;
    padding: 10px 20px; /* More padding */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
    border-radius: 25px; /* Pill-shaped buttons */
    cursor: pointer;
    font-size: 1em;
    margin-left: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.header-buttons .btn-header:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
}

.admin-btn-header {
    background-color: #e67e22; /* Orange for Admin */
    border-color: #d35400;
}

.admin-btn-header:hover {
    background-color: #d35400;
    border-color: #e67e22;
}

/* Message Display */
.message-display {
    padding: 15px 25px;
    margin: 25px auto;
    border-radius: 10px;
    font-size: 1em;
    max-width: 800px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    animation: fadeIn 0.5s ease-out;
}
.message-display.success {
    background-color: #e6ffe6; /* Lighter green */
    color: #28a745;
    border: 1px solid #a8e6a8;
}
.message-display.error {
    background-color: #ffe6e6; /* Lighter red */
    color: #e74c3c;
    border: 1px solid #e6a8a8;
}
.message-title {
    font-weight: 700;
    margin-bottom: 5px;
}
.message-text {
    margin: 0;
}

/* Content Sections */
.content-section {
    padding: 40px; /* More padding */
    background-color: #ffffff;
    flex-grow: 1; /* Allow content to fill space */
    animation: fadeIn 0.5s ease-out; /* Fade in effect for sections */
}

/* Make the form grow within the main container */
#reportForm {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.hidden {
    display: none !important;
}

/* Form Titles */
.form-title {
    color: #34495e;
    text-align: center;
    margin-bottom: 30px; /* More space */
    font-size: 2em;
    border-bottom: 3px solid #eef2f7; /* Thicker, softer border */
    padding-bottom: 15px;
    font-weight: 700;
}

/* Form Field Groups */
.form-field-group-container,
.form-grid {
    display: grid;
    gap: 25px; /* More space */
    margin-bottom: 30px;
}

.form-field-group {
    display: flex;
    flex-direction: column;
}

/* Labels */
.form-label {
    margin-bottom: 10px;
    font-weight: 600;
    color: #555;
    font-size: 1em;
}

/* Inputs, Selects, Textareas */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px; /* More padding */
    border: 1px solid #dcdcdc; /* Lighter border */
    border-radius: 8px; /* More rounded */
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fcfcfc;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #6a0dad; /* Purple focus border */
    outline: none;
    box-shadow: 0 0 0 4px rgba(106, 13, 173, 0.15); /* Purple shadow */
}
.form-input.invalid, .form-select.invalid, .form-textarea.invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.15);
}

.form-textarea {
    resize: vertical;
    min-height: 100px; /* Taller textarea */
}

/* Form Grid Specifics (for 2 columns on larger screens) */
.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Wider min-width */
}

.md-span-2 {
    grid-column: span 2;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed #aeb6bf; /* Softer dashed border */
    border-radius: 12px; /* More rounded */
    padding: 30px; /* More padding */
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.file-upload-general-area {
    min-height: 250px;
}

.file-upload-area:hover, .file-upload-area.dragover {
    border-color: #6a0dad; /* Purple on hover */
    background-color: #f8faff; /* Very light blue */
}

.upload-icon, .upload-icon-lg {
    width: 40px; /* Larger icons */
    height: 40px;
    margin-bottom: 15px;
    opacity: 0.8;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23aeb6bf"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>');
    background-size: cover;
    display: inline-block;
    text-indent: -9999px;
    transition: background-image 0.3s ease;
}
.file-upload-area:hover .upload-icon, .file-upload-area.dragover .upload-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236a0dad"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>');
}

.upload-icon-lg {
    width: 72px; /* Larger icons */
    height: 72px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23aeb6bf"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>');
}
.file-upload-area:hover .upload-icon-lg, .file-upload-area.dragover .upload-icon-lg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236a0dad"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>');
}

.upload-text, .upload-text-lg {
    color: #7f8c8d;
    font-size: 0.95em;
    margin-bottom: 8px;
}
.upload-text-lg {
    font-size: 1.2em;
    font-weight: 700;
}
.upload-text-sm {
    font-size: 0.85em;
    color: #95a5a6;
}

.upload-link {
    color: #6a0dad; /* Purple link */
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.upload-link:hover {
    color: #8e44ad;
}

.file-count {
    font-size: 0.9em;
    color: #27ae60;
    margin-top: 15px;
    font-weight: 600;
}

.file-list {
    margin-top: 20px;
    text-align: left;
    width: 100%;
    max-height: 150px; /* Scrollable if many files */
    overflow-y: auto;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 10px;
    background-color: #fcfdff;
}

.file-list p {
    background-color: #e8f5e9; /* Light green background */
    border: 1px solid #c8e6c9;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.95em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #388e3c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.file-list p:last-child {
    margin-bottom: 0;
}

.file-list span.remove-file {
    color: #e74c3c;
    cursor: pointer;
    font-weight: bold;
    margin-left: 15px;
    font-size: 1.1em;
    transition: color 0.2s ease;
}
.file-list span.remove-file:hover {
    color: #c0392b;
}


/* Navigation Buttons */
.form-nav-buttons,
.form-nav-buttons-between {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px; /* More space */
    gap: 20px; /* More space */
}

.form-nav-buttons-between {
    justify-content: space-between;
}

.nav-btn, .btn {
    background-color: #6a0dad; /* Purple primary button */
    color: white;
    padding: 14px 30px; /* More padding */
    border: none;
    border-radius: 30px; /* Pill-shaped */
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.nav-btn:hover, .btn:hover {
    background-color: #8e44ad;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.nav-btn-back {
    background-color: #95a5a6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.nav-btn-back:hover {
    background-color: #7f8c8d;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

/* Home Page Specifics */
.home-content-center {
    text-align: center;
    max-width: 800px; /* Wider content */
    margin: 0 auto;
    padding: 50px 0; /* More vertical padding */
}

.home-title {
    font-size: 3em; /* Larger title */
    color: #2c3e50;
    margin-bottom: 25px;
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.home-description {
    font-size: 1.2em; /* Larger description */
    color: #666;
    margin-bottom: 40px;
    line-height: 1.7;
}

.home-buttons-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* More space */
    margin-bottom: 20px;
}

.mt-extra {
    margin-top: 30px;
}

.btn-purple {
    background-color: #8e44ad;
}

.btn-purple:hover {
    background-color: #9b59b6;
}

.btn-green {
    background-color: #2ecc71;
}

.btn-green:hover {
    background-color: #27ae60;
}

.btn-gray {
    background-color: #7f8c8d;
}

.btn-gray:hover {
    background-color: #95a5a6;
}

.btn-indigo {
    background-color: #3f51b5;
}

.btn-indigo:hover {
    background-color: #303f9f;
}

.whatsapp-icon {
    width: 22px; /* Slightly larger icon */
    height: 22px;
}

.contact-info-section {
    margin-top: 60px; /* More space */
    padding-top: 40px;
    border-top: 1px solid #eef2f7; /* Lighter border */
}

.contact-title {
    font-size: 1.8em;
    color: #34495e;
    margin-bottom: 25px;
    font-weight: 700;
}

.contact-details-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* More space */
}

.contact-item {
    display: flex;
    align-items: center;
    color: #555;
    font-size: 1.05em;
    transition: color 0.3s ease;
}
.contact-item:hover {
    color: #6a0dad; /* Purple on hover */
}

.contact-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    color: #6a0dad; /* Purple icons */
    transition: color 0.3s ease;
}
.contact-item:hover .contact-icon {
    color: #8e44ad;
}

/* Footer Section */
.footer-section {
    text-align: center;
    padding: 25px 40px;
    background-color: #34495e;
    color: #bdc3c7;
    font-size: 0.9em;
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.footer-links a {
    color: #bdc3c7;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-links a:hover {
    color: #ecf0f1;
    text-decoration: underline;
}

/* Confirmation Page */
.confirmation-details {
    background-color: #fcfcfc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 35px;
    line-height: 1.7;
    color: #444;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.confirmation-details h3 {
    color: #34495e;
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e0e0e0;
    font-size: 1.4em;
    font-weight: 700;
}

.confirmation-details p {
    margin-bottom: 10px;
}

.confirmation-details p strong {
    color: #2c3e50;
    display: inline-block;
    min-width: 180px; /* Wider for better alignment */
    font-weight: 600;
}

.confirmation-details ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 8px;
    margin-bottom: 20px;
}

.confirmation-details ul li {
    background-color: #e0f8f8; /* Lighter blue-green */
    border: 1px solid #b3e0e0;
    padding: 8px 15px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.95em;
    color: #2c3e3e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.btn-green-submit {
    background-color: #28a745;
}

.btn-green-submit:hover {
    background-color: #218838;
}

/* Token Page */
.token-page-content {
    text-align: center;
    padding: 40px 20px;
}

.token-page-title {
    color: #28a745;
    font-size: 2.8em; /* Larger title */
    margin-bottom: 20px;
    font-weight: 800;
}

.token-page-description {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 25px;
}

.token-display-box {
    background-color: #f0f8ff; /* Very light blue */
    border: 2px dashed #a8d9ff; /* Dashed border */
    border-radius: 15px;
    padding: 35px; /* More padding */
    margin: 0 auto 40px auto;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.token-value {
    font-family: 'Inter', monospace; /* Monospace for token */
    font-size: 2.5em; /* Larger token value */
    font-weight: bold;
    color: #34495e;
    word-break: break-all;
    letter-spacing: 2px; /* Spacing for readability */
}

.token-page-instruction {
    font-size: 1em;
    color: #777;
    margin-bottom: 40px;
}

/* Statistics Page */
.statistics-info-box {
    background-color: #e6f7e6; /* Lighter green */
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 40px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.statistics-info-text {
    font-size: 1em;
    color: #388e3c;
    margin-bottom: 15px;
}

.statistics-total-count {
    font-size: 1.8em; /* Larger count */
    color: #1b5e20; /* Darker green */
    font-weight: 700;
}

.text-bold {
    font-weight: bold;
}

.statistics-chart-title,
.statistics-table-title {
    color: #34495e;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: 700;
}

.statistics-chart-container {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 40px;
    max-width: 100%;
    height: 400px; /* Taller chart */
    display: flex;
    justify-content: center;
    align-items: center;
}

.reports-table-container {
    overflow-x: auto;
    margin-bottom: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.reports-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 700px; /* Ensure table is wide enough for content */
}

.reports-table-header {
    background-color: #6a0dad; /* Purple header */
    color: white;
}

.reports-table-th {
    padding: 15px 20px; /* More padding */
    text-align: left;
    font-weight: 700;
    font-size: 1em;
    border-bottom: 1px solid #5a009d;
}

.reports-table-th.rounded-tl-lg {
    border-top-left-radius: 12px;
}

.reports-table-th.rounded-tr-lg {
    border-top-right-radius: 12px;
}

.reports-table tbody tr {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f4f8; /* Lighter border */
}

.reports-table tbody tr:nth-child(even) {
    background-color: #f8faff; /* Very light blue for even rows */
}

.reports-table tbody tr:hover {
    background-color: #eef7fc;
}

.reports-table td {
    padding: 12px 20px;
    vertical-align: middle;
    font-size: 0.95em;
    color: #555;
}

.status-badge {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: inline-flex;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-radius: 9999px;
}
.status-badge.new {
    background-color: #fffbeb;
    color: #92400e;
}
.status-badge.in-progress {
    background-color: #eff6ff;
    color: #1e40af;
}
.status-badge.completed {
    background-color: #ecfdf5;
    color: #065f46;
}
.status-badge.rejected {
    background-color: #fee2e2;
    color: #991b1b;
}

.no-reports-message {
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
    margin-top: 25px;
    font-size: 1.1em;
}

/* Access Report Page */
.access-report-form-center {
    text-align: center;
}

.access-report-form-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
    max-width: 550px; /* Wider input area */
    margin-left: auto;
    margin-right: auto;
    padding: 30px; /* More padding */
    background-color: #fcfcfc;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.access-report-input-focus:focus {
    border-color: #6a0dad;
    outline: none;
    box-shadow: 0 0 0 4px rgba(106, 13, 173, 0.15);
}

.access-report-submit-btn {
    background-color: #2ecc71;
    color: white;
    padding: 14px 30px;
    border: none;
    border-radius: 30px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.access-report-submit-btn:hover {
    background-color: #27ae60;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.report-not-found-message {
    text-align: center;
    color: #e74c3c;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 35px;
    font-size: 1.1em;
}

.accessed-report-details {
    background-color: #fcfcfc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 35px;
    line-height: 1.7;
    color: #444;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.accessed-report-details h3 {
    color: #34495e;
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e0e0e0;
    font-size: 1.4em;
    font-weight: 700;
}

.accessed-report-details p {
    margin-bottom: 10px;
}

.accessed-report-details p strong {
    color: #2c3e50;
    display: inline-block;
    min-width: 180px;
    font-weight: 600;
}

.accessed-report-details ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 8px;
    margin-bottom: 20px;
}

.accessed-report-details ul li {
    background-color: #e0f8f8;
    border: 1px solid #b3e0e0;
    padding: 8px 15px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.95em;
    color: #2c3e3e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

@media (max-width: 768px) {
    body {
        padding: 10px; /* Dikembalikan ke padding awal dari body */
    }
    .main-container {
        border-radius: 0; /* Hilangkan border-radius di ponsel */
        min-height: 100vh; /* Pastikan mengambil tinggi penuh di ponsel */
        max-width: 100%; /* Pastikan mengambil lebar penuh */
    }
    .header-section {
        flex-direction: column; /* Tumpuk item header secara vertikal */
        align-items: center;
        padding: 15px 20px; /* Consistent horizontal padding for header */
        box-sizing: border-box; /* Include padding in the width calculation */
    }
    .header-logo-img {
        margin-right: 0;
        margin-bottom: 10px; /* Tambahkan jarak bawah untuk logo */
    }
    .header-logo-text {
        font-size: 1.8em; /* Ukuran font logo lebih kecil */
    }
    .header-buttons {
        margin-top: 15px;
        width: 100%; /* Tombol header mengambil lebar penuh dalam parentnya */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px; /* Kurangi jarak antar tombol header */
    }
    .header-buttons .btn-header {
        margin-left: 0;
        flex-grow: 1; /* Pastikan tombol meluas */
        text-align: center;
        padding: 10px 15px; /* Kurangi padding tombol header */
        font-size: 0.9em; /* Kurangi ukuran font tombol header */
    }
    .content-section {
        padding: 25px; /* Dikembalikan ke padding awal untuk content-section */
    }
    .form-title, .home-title {
        font-size: 1.8em; /* Ukuran font judul lebih kecil */
        margin-bottom: 20px;
    }
    .home-description {
        font-size: 1em; /* Ukuran font deskripsi lebih kecil */
        margin-bottom: 30px;
    }
    .home-buttons-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px; /* Ini mengatur jarak antar item flex langsung di dalam home-buttons-group (untuk 3 tombol atas) */
        max-width: 300px; /* Batasi lebar maksimum tombol untuk estetika di tablet */
        margin: 0 auto; /* Pusatkan wadah tombol itu sendiri dalam content-section */
        display: flex; /* Pastikan display: flex; diterapkan untuk gap bekerja */
    }

    /* **PERBAIKAN UTAMA UNTUK JARAK GRUP TOMBOL BAWAH DAN CENTERING-nya** */
    .home-buttons-group.mt-extra { /* Targetkan div.home-buttons-group.mt-extra */
        margin-top: 15px; /* Tambahkan margin-top yang lebih besar untuk memisahkan grup ini */
        display: flex; /* Pastikan ini adalah flex container juga */
        flex-direction: column;
        align-items: center; /* Pusatkan item di dalamnya */
        gap: 15px; /* Samakan jarak antar tombol di dalamnya (Lihat Statistik dan Akses Laporan) */
        max-width: 300px; /* Pertahankan max-width yang sama */
        margin-left: auto; /* Pusatkan grup ini juga */
        margin-right: auto;
    }

    .home-buttons-group .btn { /* Aturan ini berlaku untuk semua tombol di kedua grup */
        width: 100%; /* Tombol home mengambil lebar penuh dari parentnya */
        padding: 12px 20px; /* Sesuaikan padding tombol home */
        font-size: 1em; /* Sesuaikan ukuran font tombol home */
        box-sizing: border-box;
        margin-bottom: 0; /* Pastikan tidak ada margin-bottom tambahan yang konflik dengan gap */
    }
    
    .contact-info-section {
        margin-top: 40px; /* Kurangi margin atas */
        padding-top: 20px; /* Kurangi padding atas */
    }
    .contact-title {
        font-size: 1.5em; /* Ukuran font judul kontak lebih kecil */
        margin-bottom: 15px;
    }
    .contact-details-group {
        flex-direction: column; /* Tumpuk detail kontak secara vertikal */
        align-items: flex-start;
        gap: 15px;
    }
    .contact-item {
        font-size: 0.95em; /* Ukuran font item kontak lebih kecil */
    }
    .form-grid {
        grid-template-columns: 1fr; /* Kolom tunggal untuk form grid */
        gap: 15px; /* Kurangi jarak antar field */
    }
    .md-span-2 {
        grid-column: span 1; /* Reset span di layar kecil */
    }
    .form-label {
        margin-bottom: 5px; /* Kurangi margin bawah label */
    }
    .form-input, .form-select, .form-textarea {
        padding: 10px; /* Kurangi padding input form */
        font-size: 0.95em; /* Kurangi ukuran font input form */
        border-radius: 6px; /* Sesuaikan border-radius */
    }
    .form-textarea {
        min-height: 80px; /* Kurangi tinggi minimum textarea */
    }
    .file-upload-area {
        padding: 20px; /* Kurangi padding area upload file */
        min-height: 120px;
    }
    .file-upload-general-area {
        min-height: 180px;
    }
    .upload-icon, .upload-icon-lg {
        width: 32px; /* Ukuran ikon upload lebih kecil */
        height: 32px;
        margin-bottom: 10px;
    }
    .upload-icon-lg {
        width: 60px;
        height: 60px;
    }
    .upload-text, .upload-text-lg {
        font-size: 0.85em;
    }
    .upload-text-lg {
        font-size: 1.1em;
    }
    .file-list {
        margin-top: 15px; /* Kurangi margin atas daftar file */
        padding: 8px; /* Kurangi padding daftar file */
    }
    .file-list p {
        padding: 8px 12px; /* Kurangi padding item daftar file */
        font-size: 0.9em; /* Kurangi ukuran font item daftar file */
    }
    .file-list span.remove-file {
        font-size: 1em; /* Ukuran font tombol remove file lebih kecil */
    }
    .form-nav-buttons,
    .form-nav-buttons-between {
        flex-direction: column; /* Tumpuk tombol navigasi form */
        align-items: center; /* Memusatkan item di dalam container */
        gap: 15px; /* Kurangi jarak antar tombol navigasi */
        margin-top: 30px; /* Kurangi margin atas */
        max-width: 300px; /* Batasi lebar maksimum tombol untuk estetika */
        margin-left: auto; /* Pusatkan wadah tombol itu sendiri */
        margin-right: auto; /* Pusatkan wadah tombol itu sendiri */
        display: flex; /* Pastikan display: flex; diterapkan untuk gap bekerja */
    }
    .nav-btn, .btn {
        width: 100%; /* Tombol navigasi mengambil lebar penuh dari parentnya */
        padding: 12px 25px; /* Kurangi padding tombol navigasi */
        font-size: 1em; /* Kurangi ukuran font tombol navigasi */
        border-radius: 25px; /* Sesuaikan border-radius tombol */
        box-sizing: border-box;
        margin-bottom: 0; /* Pastikan tidak ada margin-bottom tambahan */
    }
    .confirmation-details p strong,
    .accessed-report-details p strong {
        min-width: unset; /* Reset min-width */
        display: block; /* Buat label menjadi blok */
        margin-bottom: 5px; /* Tambahkan sedikit jarak bawah */
        font-size: 0.95em; /* Kurangi ukuran font label */
    }
    .confirmation-details,
    .accessed-report-details {
        padding: 20px; /* Kurangi padding detail konfirmasi/akses laporan */
    }
    .confirmation-details h3,
    .accessed-report-details h3 {
        font-size: 1.2em; /* Ukuran font judul detail lebih kecil */
        margin-bottom: 15px;
    }
    .confirmation-details ul li,
    .accessed-report-details ul li {
        padding: 6px 10px; /* Kurangi padding item daftar */
        font-size: 0.9em; /* Kurangi ukuran font item daftar */
    }
    .token-page-title {
        font-size: 1.8em;
    }
    .token-page-description {
        font-size: 1em;
    }
    .token-value {
        font-size: 1.5em;
        letter-spacing: 1px;
    }
    .token-display-box {
        padding: 15px;
        max-width: 90%;
        margin-bottom: 30px;
    }
    .reports-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    .reports-table {
        min-width: 400px;
        font-size: 0.9em;
    }
    .reports-table-th, .reports-table td {
        padding: 8px 10px;
        font-size: 0.85em;
    }
    .statistics-chart-title, .statistics-table-title {
        font-size: 1.6em;
    }
    .statistics-info-box {
        padding: 20px;
        margin-bottom: 30px;
    }
    .statistics-total-count {
        font-size: 1.6em;
    }
    .statistics-chart-container {
        height: 200px;
        padding: 15px;
    }
    .footer-section {
        flex-direction: column;
        gap: 10px;
        padding: 15px 20px;
        font-size: 0.8em;
        box-sizing: border-box;
    }
    .footer-links {
        flex-direction: column;
        gap: 5px;
    }
    .footer-links a {
        margin-left: 0;
    }
}

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}