body {
  font-family: Arial, sans-serif;
  margin: 0; 
  padding: 0; 
  text-align: center; 
  background-image: url('../img/background.jpg'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  color: #fff; 
  min-height: 100vh; 
  /* Menggunakan flexbox pada body untuk memusatkan konten secara vertikal jika dibutuhkan */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

h1 {
  margin-top: 20px; 
  margin-bottom: 10px; 
}

h2 {
  margin-top: 0px; 
  margin-bottom: 30px; 
}

/* Container untuk membuat tabel berdampingan */
.table-container {
  display: flex;
  justify-content: center;
  gap: 30px; /* Jarak antara tabel kiri dan kanan */
  width: 90%; /* Lebar maksimal container area tabel */
  max-width: 1200px;
}

/* Pengaturan masing-masing tabel */
.rekapTable {
  width: 50%; 
  text-align: center; 
  background-color: rgba(0, 0, 0, 0.7); 
  color: #fff; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
  
  /* --- TRIK ROUNDED TABLE --- */
  border-collapse: separate; /* Wajib diubah menjadi separate */
  border-spacing: 0; /* Menghilangkan jarak antar sel */
  border-radius: 20px; /* Atur lengkungan sudut (samakan dengan jam) */
  overflow: hidden; /* Memotong sel/garis yang keluar dari sudut lengkung */
}

/* Pengaturan jarak dan garis dalam tabel */
.rekapTable th, .rekapTable td {
  padding: 15px 20px; 
  font-size: 1.6em; 
  
  /* --- PENGATURAN GARIS AGAR TIDAK DOBEL --- */
  border-right: 1px solid rgba(255, 255, 255, 0.2); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
}

/* Menghilangkan garis paling kanan agar rata dengan sudut tabel */
.rekapTable th:last-child, 
.rekapTable td:last-child {
  border-right: none;
}

/* Menghilangkan garis paling bawah agar rata dengan sudut tabel */
.rekapTable tbody tr:last-child td {
  border-bottom: none;
}

/* Khusus untuk judul kolom (Header) */
.rekapTable th {
  background-color: rgba(0, 0, 0, 0.5); 
  font-weight: bold;
  font-size: 1.7em; 
  letter-spacing: 1px; 
}

.rekapTable td.nama-siswa {
  text-align: left; 
}

/* =========================================
   STYLE UNTUK JAM & TANGGAL (EFEK KACA)
========================================= */
/* =========================================
   STYLE UNTUK JAM & TANGGAL (UKURAN DIPERBESAR)
========================================= */
#clock-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  width: 90%; 
  max-width: 1200px; 
  margin: 60px auto 20px auto; /* Margin atas-bawah disesuaikan */
  padding: 40px 60px; /* Padding ditambah agar kotak lebih tinggi */
  box-sizing: border-box;

  background-color: rgba(255, 255, 255, 0.15); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  border-radius: 25px; /* Rounded sedikit diperbesar agar proporsional */
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.4); 
  color: #ffffff;
}

/* Bagian Kiri (Jam) */
.clock-left {
  flex: 1.2; /* Diberi ruang lebih untuk jam yang membesar */
  text-align: left;
  border-right: 3px solid rgba(255, 255, 255, 0.3); /* Garis sedikit dipertebal */
  padding-right: 40px;
}

#realtime-clock {
  font-size: 7em; /* UKURAN DIPERBESAR (sebelumnya 5em) */
  font-weight: 800; /* Dibuat lebih tebal */
  letter-spacing: 3px;
  line-height: 1; /* Memastikan tidak ada ruang kosong berlebih di atas/bawah teks */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

/* Bagian Kanan (Tanggal) */
.clock-right {
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px; /* Jarak antara baris tanggal ditambah */
}

#masehi-date {
  font-size: 2em; /* UKURAN DIPERBESAR (sebelumnya 1.8em) */
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

#hijri-date {
  font-size: 1.6em; /* UKURAN DIPERBESAR (sebelumnya 1.5em) */
  color: #f0f4ff;
  font-weight: 500;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}