/* css/base.css */

html, body {
  height: 100%; /* Penting untuk fullscreen */
  margin: 0;
  padding: 10px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  padding: 20px; /* Sedikit padding dari tepi layar */
  transition: background 0.3s ease, color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}

/* Animasi Background */
#animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pastikan di belakang konten */
    background: linear-gradient(
      45deg,
      var(--bg-gradient-start-light),
      var(--bg-gradient-end-light)
    );
    background-size: 400% 400%; /* Ukuran gradien lebih besar dari viewport */
    animation: gradientAnimation 15s ease infinite;
    transition: background 0.5s ease; /* Transisi untuk perubahan warna saat mode gelap/terang */
}

body.dark #animated-background {
    background: linear-gradient(
      45deg,
      var(--bg-gradient-start-dark),
      var(--bg-gradient-end-dark)
    );
    background-size: 400% 400%;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

h2 {
  margin-top: 25px;
  margin-bottom: 15px;
  color: var(--fg);
  display: flex; /* Menggunakan flexbox untuk H2 */
  align-items: center; /* Menyusun item di tengah secara vertikal */
  gap: 10px; /* Jarak antara teks H2 dan span jumlah */
}

#dataCount {
    font-size: 0.8em; /* Ukuran font lebih kecil dari H2 */
    color: var(--accent); /* Warna aksen untuk angka */
    font-weight: normal; /* Tidak terlalu tebal */
    background-color: var(--border); /* Latar belakang abu-abu muda */
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

body.dark #dataCount {
    background-color: var(--input-bg);
}


/* ======================================================= */
/* === BAGIAN YANG DIUBAH ADA DI BAWAH INI === */
/* ======================================================= */

/* Selector digabungkan untuk menerapkan style yang sama ke kedua kontainer */
#jenisCount, #jaringanCountContainer {
    font-size: 0.9em;
    color: var(--fg);
    margin-top: -5px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Penyesuaian jarak agar tidak terlalu rapat */
#jenisCount {
    margin-bottom: 10px;
}
#jaringanCountContainer {
    margin-top: 0;
}

/* Selector anak juga digabungkan */
#jenisCount div, #jaringanCountContainer div {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--border);
    border-radius: 5px;
    transition: transform 0.2s ease;
}

#jenisCount div:hover, #jaringanCountContainer div:hover {
    transform: translateY(-2px);
}
body.dark #jenisCount div, body.dark #jaringanCountContainer div {
    background-color: var(--input-bg);
}

/* Penambahan styling untuk angka (tag <strong>) */
#jenisCount div strong, #jaringanCountContainer div strong {
    color: #007bff;
    font-size: 1rem;
    margin-left: 5px;
}


/* Ukuran kontainer utama */
.main-container {
    width: 100%;
    max-width: none;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}