/* --- RESPONSIF UNTUK HP --- */
@media (max-width: 768px) {
  .category-grid {
    grid-auto-columns: 25%; /* Di HP tampil 4 kolom per baris */
  }
}

/* --- 1. WADAH UTAMA KATEGORI --- */
.category-section {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Bayangan kotak sangat halus */
  border-radius: 2px;
}

/* --- 2. HEADER "KATEGORI" --- */
.category-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f2f2f2;
}

.category-header h2 {
  font-size: 16px;
  color: rgba(0,0,0,.54); /* Warna teks abu-abu pudar */
  margin: 0;
  font-weight: 500;
}

/* --- 3. WRAPPER & TOMBOL GESER --- */
/* PENTING: position relative agar tombol panah bisa melayang dengan pas */
.category-wrapper {
  position: relative;
  width: 100%;
}

/* Gaya Umum Tombol Panah (Kiri & Kanan) */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  color: #757575;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease-in-out;
  
  /* Me-reset paksa gaya bawaan browser agar tidak jadi kotak */
  outline: none; 
  padding: 0;
  margin: 0;
}

.slide-btn:hover {
  background-color: #f8f8f8;
  width: 45px; /* Sedikit membesar saat disentuh kursor */
  height: 45px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Posisi Spesifik Tombol Kiri & Kanan */
.slide-left {
  left: -20px; /* Menjorok ke luar 20px */
}

.slide-right {
  right: -20px; /* Menjorok ke luar 20px */
}

/* Class untuk menyembunyikan tombol via JavaScript saat mentok */
.slide-btn.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- 4. GRID DAFTAR KATEGORI (KUNCI 2 BARIS HORIZONTAL) --- */
.category-grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr); /* Memaksa HANYA 2 baris */
  grid-auto-flow: column; /* Mengisi dari atas ke bawah, lalu bikin kolom baru ke kanan */
  grid-auto-columns: 10%; /* 1 baris berisi tepat 10 kotak (karena 100% / 10 = 10%) */
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* Sembunyikan scrollbar bawah bawaan browser agar rapi */
.category-grid::-webkit-scrollbar {
  display: none;
}

/* --- 5. KOTAK ITEM KATEGORI --- */
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  text-decoration: none; /* Menghilangkan garis bawah link */
  border-right: 1px solid #f2f2f2; /* Garis vertikal pembatas */
  border-bottom: 1px solid #f2f2f2; /* Garis horizontal pembatas */
  transition: transform 0.1s, box-shadow 0.1s;
  box-sizing: border-box; 
}

.category-item:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

/* --- 6. GAMBAR/IKON KATEGORI DENGAN LINGKARAN ABU-ABU --- */
.category-image {
  width: 80px;
  height: 80px;
  background-color: #f8f8f8; /* Warna latar lingkaran abu-abu pudar */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.category-image img {
  width: 100px; /* Gambar dibuat lebih kecil agar masuk ke dalam lingkaran */
  height: 100px;
  object-fit: contain;
}

/* --- 7. TEKS NAMA KATEGORI --- */
.category-item p {
  margin: 0;
  font-size: 14px;
  color: #333333;
  text-align: center;
  line-height: 1.2;
}

/* --- 8. RESPONSIVITAS (TAMPILAN DI LAYAR LEBIH KECIL) --- */
@media (max-width: 1024px) {
  .category-grid {
    grid-auto-columns: 16.66%; /* Tablet: Tampil 6 kolom per baris */
  }
}

@media (max-width: 768px) {
  .category-grid {
    grid-auto-columns: 25%; /* HP Layar Lebar: Tampil 4 kolom per baris */
  }
  .slide-btn {
    display: none !important; /* HP: Sembunyikan panah, user pakai swipe jari */
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-auto-columns: 33.33%; /* HP Kecil: Tampil 3 kolom per baris */
  }
  /* Memperkecil ukuran gambar dan font sedikit agar tidak sesak di HP */
  .category-image {
    width: 60px;
    height: 60px;
  }
  .category-image img {
    width: 40px;
    height: 40px;
  }
  .category-item p {
    font-size: 12px;
  }
}
/* --- TOMBOL UMUM (Angka & Panah) --- */
.page-btn {
  min-width: 40px;
  height: 40px;
  background-color: transparent;
  border: none; /* WARGERCEP biasanya tidak pakai garis pinggir di pagination */
  border-radius: 2px;
  font-size: 16px;
  color: #757575; /* Warna abu-abu */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s, color 0.2s;
  font-family: inherit;
}

/* Efek saat angka diarahkan kursor */
.page-btn:not(.active):not(.disabled):hover {
  background-color: #f8f8f8;
  color: #ee4d2d; /* Teks berubah oranye saat di-hover */
}

/* --- HALAMAN AKTIF (Yang sedang dibuka) --- */
.page-btn.active {
  background-color: #ee4d2d; /* Latar oranye khas WARGERCEP */
  color: #ffffff; /* Teks putih */
  font-weight: bold;
  cursor: default; /* Kursor normal (bukan tangan) karena sudah di halaman ini */
}

/* --- TOMBOL TIDAK AKTIF (Contoh: Panah kiri saat di halaman 1) --- */
.page-btn.disabled {
  color: #cccccc; /* Warna pudar */
  cursor: not-allowed; /* Kursor dilarang */
}

/* --- TITIK-TITIK (Elipsis) --- */
.page-dots {
  font-size: 16px;
  color: #757575;
  padding: 0 5px;
  letter-spacing: 2px;
}

/* --- RESPONSIF UNTUK HP --- */
@media (max-width: 480px) {
  .page-btn {
    min-width: 32px; /* Tombol sedikit diperkecil */
    height: 32px;
    font-size: 14px;
  }
  /* Menyembunyikan beberapa angka di HP agar tidak turun ke baris bawah */
  .page-btn:nth-child(5), 
  .page-btn:nth-child(6) {
    display: none;
  }
}