/* ============================================================
   CUSTOM LAYOUT BOOTSTRAP 4 → FEEL BOOTSTRAP 5
   Paste file ini SETELAH bootstrap.min.css
   ============================================================ */

/* --------------------------------------------
   1. GUTTER VARIABLES ala Bootstrap 5
   -------------------------------------------- */
   :root {
    --bs-gutter-x: 1.5rem; /* horizontal spacing (left-right) */
    --bs-gutter-y: 0;      /* vertical spacing (top-bottom) */
}

/* --------------------------------------------
   2. CONTAINER & BREAKPOINT ala Bootstrap 5
   -------------------------------------------- */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    width: 100%;
    padding-right: 15px; /* bisa kamu kecil/besarkan sesuai desain */
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* sm ≥ 576px */
@media (min-width: 576px) {
    .container,
    .container-sm {
        max-width: 540px;
    }
}

/* md ≥ 768px */
@media (min-width: 768px) {
    .container,
    .container-sm,
    .container-md {
        max-width: 720px;
    }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: 960px;
    }
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1140px;
    }
}

/* xxl ≥ 1400px (tambahan ala Bootstrap 5) */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1320px;
    }
}

/* --------------------------------------------
   3. CONTAINER-FLUID ala Bootstrap 5
   -------------------------------------------- */

.container-fluid {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------
   4. ROW & COLUMN GUTTER ala Bootstrap 5
   -------------------------------------------- */

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;

    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-top: calc(-1 * var(--bs-gutter-y));
}

/* apply padding ke semua kolom di dalam .row */
.row > [class^="col-"],
.row > [class*=" col-"] {
    padding-right: calc(0.5 * var(--bs-gutter-x));
    padding-left: calc(0.5 * var(--bs-gutter-x));
    margin-top: var(--bs-gutter-y);
}

/* --------------------------------------------
   5. UTILITY GUTTER ala Bootstrap 5 (g-0 .. g-5)
   Bisa langsung dipakai di HTML lama/baru
   -------------------------------------------- */

/* g-0: hilangkan semua gutter */
.g-0,
.gx-0 {
    --bs-gutter-x: 0;
}
.g-0,
.gy-0 {
    --bs-gutter-y: 0;
}

/* g-1 */
.g-1,
.gx-1 {
    --bs-gutter-x: 0.25rem;
}
.g-1,
.gy-1 {
    --bs-gutter-y: 0.25rem;
}

/* g-2 */
.g-2,
.gx-2 {
    --bs-gutter-x: 0.5rem;
}
.g-2,
.gy-2 {
    --bs-gutter-y: 0.5rem;
}

/* g-3 */
.g-3,
.gx-3 {
    --bs-gutter-x: 1rem;
}
.g-3,
.gy-3 {
    --bs-gutter-y: 1rem;
}

/* g-4 */
.g-4,
.gx-4 {
    --bs-gutter-x: 1.5rem;
}
.g-4,
.gy-4 {
    --bs-gutter-y: 1.5rem;
}

/* g-5 */
.g-5,
.gx-5 {
    --bs-gutter-x: 3rem;
}
.g-5,
.gy-5 {
    --bs-gutter-y: 3rem;
}

/* --------------------------------------------
   6. KOMPATIBILITAS: .no-gutters Bootstrap 4
   -------------------------------------------- */

.row.no-gutters {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}