/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); /* Mengimpor font Poppins dari Google Fonts */

* {
  margin: 0; /* Menghilangkan margin default */
  padding: 0; /* Menghilangkan padding default */
  box-sizing: border-box; /* Memastikan ukuran elemen tidak bertambah karena padding dan border */
  font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins sebagai font utama */
}

:root {
  --primary-color: #fed7b; /* Warna latar utama */
  --white-color: #fff; /* Warna putih */
  --black-color: #181919; /* Warna hitam */
  --red-color: #e74c3c; /* Warna merah */
}

body {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  min-height: 100vh; /* Tinggi minimal elemen adalah tinggi layar penuh */
  align-items: center; /* Pusatkan elemen secara vertikal */
  justify-content: center; /* Pusatkan elemen secara horizontal */
  background: var(--primary-color); /* Menggunakan warna latar utama */
}

body.dark {
  --primary-color: #242526; /* Warna latar utama untuk mode gelap */
  --white-color: #181919; /* Warna putih diganti menjadi gelap */
  --black-color: #fff; /* Warna hitam diganti menjadi putih */
  --red-color: #e74c3c; /* Warna merah tetap sama */
}

.container {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  flex-direction: column; /* Mengatur elemen dalam kolom */
  align-items: center; /* Pusatkan elemen secara horizontal */
  gap: 40px; /* Jarak antara elemen */
}

.container .clock {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  height: 400px; /* Tinggi jam */
  width: 400px; /* Lebar jam */
  border-radius: 50%; /* Membuat bentuk lingkaran */
  align-items: center; /* Pusatkan elemen secara vertikal */
  justify-content: center; /* Pusatkan elemen secara horizontal */
  background: var(--white-color); /* Warna latar jam */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1), 0 25px 45px rgba(0, 0, 0, 0.1); /* Efek bayangan */
  position: relative; /* Mengatur posisi relatif */
}

.clock label {
  position: absolute; /* Mengatur posisi label secara absolut */
  inset: 20px; /* Jarak dari tepi elemen luar */
  text-align: center; /* Pusatkan teks */
  transform: rotate(calc(var(--i) * (360deg / 12))); /* Rotasi angka sesuai posisinya */
}

.clock label span {
  display: inline-block; /* Membuat elemen inline dengan block properties */
  font-size: 30px; /* Ukuran font angka */
  font-weight: 600; /* Ketebalan font */
  color: var(--black-color); /* Warna angka */
  transform: rotate(calc(var(--i) * (-360deg / 12))); /* Membalikkan rotasi angka */
}

.container .indicator {
  position: absolute; /* Mengatur posisi absolut */
  height: 10px; /* Tinggi indikator pusat jam */
  width: 10px; /* Lebar indikator pusat jam */
  display: flex; /* Menggunakan flexbox */
  justify-content: center; /* Pusatkan elemen secara horizontal */
}

.indicator::before {
  content: ''; /* Membuat elemen kosong */
  position: absolute; /* Mengatur posisi absolut */
  height: 100%; /* Tinggi penuh */
  width: 100%; /* Lebar penuh */
  border-radius: 50%; /* Membuat bentuk lingkaran */
  z-index: 100; /* Memastikan di atas elemen lain */
  background: var(--black-color); /* Warna latar */
  border: 4px solid var(--red-color); /* Border merah */
}

.indicator .hand {
  position: absolute; /* Mengatur posisi absolut */
  height: 130px; /* Panjang jarum menit */
  width: 4px; /* Lebar jarum */
  bottom: 0; /* Memosisi di bawah */
  border-radius: 25px; /* Membuat ujung membulat */
  transform-origin: bottom; /* Titik rotasi di bawah */
  background: var(--red-color); /* Warna jarum detik */
}

.hand.minute {
  height: 120px; /* Panjang jarum menit */
  width: 5px; /* Lebar jarum menit */
  background: var(--black-color); /* Warna jarum menit */
}

.hand.hour {
  height: 100px; /* Panjang jarum jam */
  width: 8px; /* Lebar jarum jam */
  background: var(--black-color); /* Warna jarum jam */
}

.mode-switch {
  padding: 10px 20px; /* Padding untuk tombol mode */
  border-radius: 25px; /* Sudut membulat tombol */
  font-size: 22px; /* Ukuran font tombol */
  font-weight: 400; /* Ketebalan font tombol */
  display: inline-block; /* Membuat elemen inline */
  color: var(--white-color); /* Warna teks */
  background: var(--black-color); /* Warna latar tombol */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 25px 45px rgba(0, 0, 0, 0.1); /* Efek bayangan */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
}