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

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(to top, #7ed957 0%, #b2e8ae 50%, #ADD8E6 75%, #dbe6e4 100%); margin: 0; padding: 20px; min-height: 100vh; }
.container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
h1, h2 { text-align: center; }

/* Styling Tabs */
.tabs { overflow: hidden; border-bottom: 1px solid #ccc; margin-top: 20px; }
.tab-link { background-color: #f1f1f1; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; }
.tab-link:hover { background-color: #ddd; }
.tab-link.active { background-color: #98d0ef; }
.tab-content { display: none; padding: 6px 12px; border-top: none; animation: fadeEffect 0.5s; }
@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

/* Styling Form */
form { display: flex; flex-direction: column; }
label { margin-top: 10px; font-weight: bold; }
input[type="text"], input[type="tel"], input[type="email"] { padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
button[type="submit"] { background-color: #007bff; color: white; padding: 12px; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; font-size: 16px; }
button[type="submit"]:hover { background-color: #0056b3; }
#formMessage { margin-top: 15px; text-align: center; }

/* Styling Tabel */
#searchInput { width: 100%; padding: 10px; margin-bottom: 15px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
th { background-color: #f2f2f2; }
tbody tr:nth-child(even) { background-color: #f9f9f9; }

/* Styling Pagination */
.pagination { margin-top: 20px; text-align: center; }
.pagination button { background-color: #007bff; color: white; border: none; padding: 8px 12px; margin: 2px; cursor: pointer; border-radius: 4px; }
.pagination button:hover { background-color: #0056b3; }
.pagination button.active { background-color: #004a99; }
.pagination button:disabled { background-color: #ccc; cursor: not-allowed; }

/* --- CSS untuk Search Bar & Tombol Refresh --- */

/* * 1. Membuat wadah (search-container) menggunakan flexbox 
 * agar input dan tombol bisa sejajar.
 */
.search-container {
    display: flex;
    gap: 10px; /* Memberi jarak 10px antara input dan tombol */
    margin-bottom: 15px; /* Sama seperti margin-bottom searchInput sebelumnya */
}

/* * 2. Mengubah searchInput agar lebarnya fleksibel
 */
#searchInput {
    flex-grow: 1; /* Membuat search input mengisi sisa ruang */
    margin-bottom: 0; /* Pindahkan margin ke container */
}

/* * 3. Ini adalah styling utama untuk tombol refresh
 */
#refreshBtn {
    /* Tampilan (outline) */
    background-color: #fff;
    color: #007bff; /* Warna biru primer (sama seperti tombol lain) */
    border: 1px solid #007bff;
    
    /* Ukuran & Font */
    padding: 0 15px; /* Dibuat sedikit lebih ramping dari tombol submit */
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px; /* Menyamakan dengan input */
    cursor: pointer;

    /* Efek transisi halus */
    transition: background-color 0.2s, color 0.2s;
}

/* * 4. Efek hover saat mouse di atas tombol
 */
#refreshBtn:hover {
    background-color: #007bff; /* Latar belakang jadi biru */
    color: #fff; /* Teks jadi putih */
}

/* * 5. (Opsional) Efek saat tombol ditekan
 */
#refreshBtn:active {
    background-color: #0056b3; /* Biru lebih gelap */
    border-color: #0056b3;
}

/* Tambahan untuk Pagination */
/* Menghilangkan border dan background untuk elemen titik-titik */
.pagination button.dots {
    background-color: transparent;
    color: #333;
    border: none;
    cursor: default;
    font-weight: bold;
    padding: 8px 4px; /* Mengurangi padding kiri-kanan */
}

/* Memastikan titik-titik tidak berubah warna saat di-hover */
.pagination button.dots:hover {
    background-color: transparent;
    color: #333;
}