body { font-family: 'Poppins', sans-serif; }
.bg-islamic { background: linear-gradient(135deg, #1a5c37 0%, #2d7a4d 100%); }
.btn-success { background-color: #1a5c37; border: none; }
.btn-success:hover { background-color: #134a2b; }
.text-success { color: #1a5c37!important; }
.text-warning { color: #d4af37!important; }
.border-warning { border-color: #d4af37!important; }
.card-unit { border-left: 5px solid #d4af37; transition: 0.3s; }
.card-unit:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.pattern-bg {
  background-color: #f8f9fa;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a5c37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-section { background: url('../img/bg-masjid.jpg') center/cover; position: relative; }
.hero-section::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(26,92,55,0.8); }
.card-unit {
  border-left: 5px solid #d4af37;
  transition: 0.3s;
  min-height: 280px;
}
.card-unit:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(26,92,55,0.15)!important;
}

/* Paksa 4 kolom sama lebar */
.unit-row {
  display: flex;
  flex-wrap: wrap;
}
.unit-row > div {
  flex: 0 0 25%;
  max-width: 25%;
}
/* Khusus Unit Pendidikan tok */
.unit-pendidikan .unit-row > div {
  flex: 0 0 25%;
  max-width: 25%;
}
@media (max-width: 991px) {
  .unit-row > div {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 576px) {
  .unit-row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* BENERKE FONT NENG MOBILE BEN ORA KEGEDEAN */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* Cilikke font global */
  }
  .card-header {
    font-size: 15px; /* Header card ben ra gede-gede nemen */
    padding: 0.5rem 1rem;
  }
  .card-body {
    padding: 0.75rem; /* Jarak njero card dipadatkan */
  }
  table td, table th {
    font-size: 13px; /* Font tabel dicilikke */
    padding: 0.4rem !important;
  }
  h1 { font-size: 1.5rem; } /* Judul utama dicilikke */
  h5 { font-size: 1.1rem; } /* Judul card dicilikke */
}