/* ===============================
   GENERAL STYLE IMPROVEMENTS
=============================== */
body {
  font-family: "Poppins", Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.7;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: #007bff;
}

/* ===============================
   SECTION TITLES
=============================== */
.subscribe-home {
  border-left: 5px solid #007bff;
  background: #f1f5fb;
  transition: all 0.3s ease;
}

.subscribe-home:hover {
  background: #e8f0fe;
  transform: translateY(-2px);
}

/* ===============================
   ARTICLE CARD STYLE
=============================== */
.category-item,
.post-grid {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-item:hover,
.post-grid:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Gambar artikel */
.category-item img,
.post-grid img {
  height: 240px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.category-item:hover img,
.post-grid:hover img {
  transform: scale(1.08);
}

/* Konten artikel */
.category-item .content,
.post-grid .card-body {
  padding: 20px;
}

.category-item h4 a,
.post-grid h3 a {
  color: #222;
  font-weight: 600;
  line-height: 1.4;
}

.category-item h4 a:hover,
.post-grid h3 a:hover {
  color: #007bff;
}

/* Kategori & meta info */
.cat-name,
.text-color {
  color: #007bff !important;
  font-weight: 600;
  letter-spacing: 1px;
}

.post-grid .text-muted {
  font-size: 0.85rem;
}

/* ===============================
   BUTTON STYLE
=============================== */
.btn-grey {
  background: #007bff;
  color: #fff;
  border-radius: 30px;
  padding: 10px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-grey:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

/* ===============================
   PAGINATION
=============================== */
.pagination ul {
  padding-left: 0;
}

.pagination a {
  display: inline-block;
  margin: 0 5px;
  padding: 10px 15px;
  color: #007bff;
  border: 1px solid #007bff;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.pagination a.active,
.pagination a:hover {
  background: #007bff;
  color: #fff;
}

/* ===============================
   SIDEBAR
=============================== */
.sidebar-widget img {
  border-radius: 16px;
  transition: all 0.3s ease;
}

.sidebar-widget img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ===============================
   ANIMATIONS (FADE & SLIDE)
=============================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section {
  animation: fadeUp 0.6s ease both;
}

.post-grid, .category-item {
  animation: fadeUp 0.7s ease both;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  .category-item img,
  .post-grid img {
    height: 200px;
  }

  .subscribe-home {
    text-align: center;
  }
}