/* public/css/style.css */

/* --- Pengaturan Dasar HTML & Body --- */
body {
    margin: 0; /* Menghilangkan margin default browser */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font yang bersih dan modern */
    background-color: #f0f2f5; /* Warna latar belakang halaman */
    
    /* Flexbox untuk menempatkan konten di tengah layar */
    display: flex; /* Mengaktifkan Flexbox */
    justify-content: center; /* Konten di tengah secara horizontal */
    align-items: center; /* Konten di tengah secara vertikal */
    min-height: 100vh; /* Memastikan body mengisi seluruh tinggi viewport */
    
    color: #333; /* Warna teks default */
    padding: 20px; /* Padding di sekitar body untuk responsivitas pada layar kecil */
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar/tinggi elemen */
}

/* --- Kontainer Utama --- */
.container {
    background-color: #ffffff; /* Latar belakang putih untuk kontainer */
    padding: 40px; /* Padding di dalam kontainer */
    border-radius: 12px; /* Sudut membulat */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Efek bayangan lembut */
    text-align: center; /* Menengahkan teks di dalam kontainer */
    max-width: 500px; /* Batasi lebar maksimum kontainer */
    width: 100%; /* Memastikan kontainer responsif (mengisi 100% lebar yang tersedia, sampai max-width) */
}

/* --- Judul Halaman --- */
h1 {
    color: #2c3e50; /* Warna judul */
    margin-bottom: 30px; /* Jarak bawah judul */
    font-size: 2.2em; /* Ukuran font judul */
}

/* --- Kartu Status (Waktu Server & Status Server) --- */
.status-card {
    background-color: #f9f9f9; /* Latar belakang abu-abu muda untuk kartu */
    border: 1px solid #e0e0e0; /* Border tipis */
    border-radius: 8px; /* Sudut membulat */
    padding: 20px; /* Padding di dalam kartu */
    margin-bottom: 20px; /* Jarak bawah antar kartu */
    
    /* Transisi untuk efek hover */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.status-card:hover {
    transform: translateY(-5px); /* Geser kartu sedikit ke atas saat di-hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Bayangan lebih dalam saat di-hover */
}

.status-card h2 {
    color: #34495e; /* Warna judul di dalam kartu */
    margin-top: 0; /* Hilangkan margin atas default */
    margin-bottom: 10px; /* Jarak bawah judul di dalam kartu */
    font-size: 1.4em; /* Ukuran font judul di dalam kartu */
}

.status-card p {
    font-size: 1.8em; /* Ukuran font untuk nilai waktu/status */
    font-weight: bold; /* Teks tebal */
    margin: 0; /* Hilangkan margin default */
}

/* --- Indikator Status (Online, Offline, Maintenance) --- */
.status-indicator {
    padding: 8px 15px; /* Padding di sekitar teks status */
    border-radius: 5px; /* Sudut membulat */
    display: inline-block; /* Agar bisa diwarnai latar belakangnya dan padding berfungsi */
    color: #fff; /* Warna teks putih default */
}

/* Warna spesifik untuk setiap status */
.status-indicator.online {
    background-color: #28a745; /* Hijau untuk status "online" */
}

.status-indicator.offline {
    background-color: #dc3545; /* Merah untuk status "offline" */
}

.status-indicator.maintenance {
    background-color: #ffc107; /* Kuning untuk status "maintenance" */
    color: #333; /* Teks gelap untuk kontras dengan latar kuning */
}

/* --- Teks Terakhir Diperbarui --- */
.last-updated {
    font-size: 0.9em; /* Ukuran font lebih kecil */
    color: #7f8c8d; /* Warna teks abu-abu */
    margin-top: 30px; /* Jarak atas */
}

/* --- Responsifitas (Media Queries) --- */
@media (max-width: 600px) {
    /* Aturan untuk layar dengan lebar maksimum 600px */
    .container {
        padding: 25px; /* Kurangi padding kontainer */
        margin: 10px; /* Beri sedikit margin agar tidak terlalu rapat ke tepi layar */
    }
    h1 {
        font-size: 1.8em; /* Kurangi ukuran font judul utama */
    }
    .status-card p {
        font-size: 1.5em; /* Kurangi ukuran font nilai status/waktu */
    }
}