/* Grid & utility kelas minimal, dibuat sendiri, menggantikan CDN Bootstrap.
   Cuma berisi kelas yang benar-benar dipakai di template. */

*, *::before, *::after { box-sizing: border-box; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1rem; }

.row { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; }
.row > [class*="col-"] { padding: 0 0.5rem; }
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }
.row.g-5 { row-gap: 2rem; }

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-6, .col-lg-5, .col-lg-6, .col-lg-7 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
}

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-fill { flex: 1 1 auto; }
.flex-grow-1 { flex-grow: 1; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }
.justify-content-between { justify-content: space-between; }

.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.small { font-size: .875em; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-5 { padding-bottom: 3rem; }

.lead { font-size: 1.15rem; font-weight: 300; }
.table-responsive { overflow-x: auto; }