/* ==========================================================
   Bootstrap 4 Gap Utilities (Bootstrap 5 Compatible)
   Supports: g-*, gx-*, gy-* + sm/md/lg/xl breakpoints
   ========================================================== */

:root {
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 3rem;
}

/* === Horizontal + Vertical Spacing (spacing-*) === */
.spacing-0 > * { padding: var(--spacing-0); }
.spacing-1 > * { padding: var(--spacing-1); }
.spacing-2 > * { padding: var(--spacing-2); }
.spacing-3 > * { padding: var(--spacing-3); }
.spacing-4 > * { padding: var(--spacing-4); }
.spacing-5 > * { padding: var(--spacing-5); }

/* Negative margin pada parent untuk menghilangkan overflow */
.spacing-1 { margin: calc(-1 * var(--spacing-1)); }
.spacing-2 { margin: calc(-1 * var(--spacing-2)); }
.spacing-3 { margin: calc(-1 * var(--spacing-3)); }
.spacing-4 { margin: calc(-1 * var(--spacing-4)); }
.spacing-5 { margin: calc(-1 * var(--spacing-5)); }

/* === Horizontal Only (spacing-x-*) === */
.spacing-x-0 > * {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
}
.spacing-x-1 > * {
    padding-left: calc(var(--spacing-1) / 2);
    padding-right: calc(var(--spacing-1) / 2);
}
.spacing-x-2 > * {
    padding-left: calc(var(--spacing-2) / 2);
    padding-right: calc(var(--spacing-2) / 2);
}
.spacing-x-3 > * {
    padding-left: calc(var(--spacing-3) / 2);
    padding-right: calc(var(--spacing-3) / 2);
}
.spacing-x-4 > * {
    padding-left: calc(var(--spacing-4) / 2);
    padding-right: calc(var(--spacing-4) / 2);
}
.spacing-x-5 > * {
    padding-left: calc(var(--spacing-5) / 2);
    padding-right: calc(var(--spacing-5) / 2);
}

.spacing-x-1 { margin-left: calc(-1 * var(--spacing-1) / 2); margin-right: calc(-1 * var(--spacing-1) / 2); }
.spacing-x-2 { margin-left: calc(-1 * var(--spacing-2) / 2); margin-right: calc(-1 * var(--spacing-2) / 2); }
.spacing-x-3 { margin-left: calc(-1 * var(--spacing-3) / 2); margin-right: calc(-1 * var(--spacing-3) / 2); }
.spacing-x-4 { margin-left: calc(-1 * var(--spacing-4) / 2); margin-right: calc(-1 * var(--spacing-4) / 2); }
.spacing-x-5 { margin-left: calc(-1 * var(--spacing-5) / 2); margin-right: calc(-1 * var(--spacing-5) / 2); }

/* === Vertical Only (spacing-y-*) === */
.spacing-y-0 > * {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
}
.spacing-y-1 > * {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
}
.spacing-y-2 > * {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}
.spacing-y-3 > * {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
.spacing-y-4 > * {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}
.spacing-y-5 > * {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
}

.spacing-y-1 { margin-top: calc(-1 * var(--spacing-1)); margin-bottom: calc(-1 * var(--spacing-1)); }
.spacing-y-2 { margin-top: calc(-1 * var(--spacing-2)); margin-bottom: calc(-1 * var(--spacing-2)); }
.spacing-y-3 { margin-top: calc(-1 * var(--spacing-3)); margin-bottom: calc(-1 * var(--spacing-3)); }
.spacing-y-4 { margin-top: calc(-1 * var(--spacing-4)); margin-bottom: calc(-1 * var(--spacing-4)); }
.spacing-y-5 { margin-top: calc(-1 * var(--spacing-5)); margin-bottom: calc(-1 * var(--spacing-5)); }

/* ==========================================================
   Responsive Gap Utilities
   Breakpoints: sm (576) · md (768) · lg (992) · xl (1200)
   ========================================================== */

/* -------- SM -------- */
@media (min-width: 576px) {
    .spacing-sm-1 > * { padding: var(--spacing-1); }
    .spacing-sm-2 > * { padding: var(--spacing-2); }
    .spacing-sm-3 > * { padding: var(--spacing-3); }
    .spacing-sm-4 > * { padding: var(--spacing-4); }
    .spacing-sm-5 > * { padding: var(--spacing-5); }
    .spacing-sm-1 { margin: calc(-1 * var(--spacing-1)); }
    .spacing-sm-2 { margin: calc(-1 * var(--spacing-2)); }
    .spacing-sm-3 { margin: calc(-1 * var(--spacing-3)); }
    .spacing-sm-4 { margin: calc(-1 * var(--spacing-4)); }
    .spacing-sm-5 { margin: calc(-1 * var(--spacing-5)); }

    .spacing-x-sm-1 > * { padding-left: calc(var(--spacing-1)/2); padding-right: calc(var(--spacing-1)/2); }
    .spacing-x-sm-2 > * { padding-left: calc(var(--spacing-2)/2); padding-right: calc(var(--spacing-2)/2); }
    .spacing-x-sm-3 > * { padding-left: calc(var(--spacing-3)/2); padding-right: calc(var(--spacing-3)/2); }
    .spacing-x-sm-4 > * { padding-left: calc(var(--spacing-4)/2); padding-right: calc(var(--spacing-4)/2); }
    .spacing-x-sm-5 > * { padding-left: calc(var(--spacing-5)/2); padding-right: calc(var(--spacing-5)/2); }
    .spacing-x-sm-1 { margin-left: calc(-1 * var(--spacing-1)/2); margin-right: calc(-1 * var(--spacing-1)/2); }
    .spacing-x-sm-2 { margin-left: calc(-1 * var(--spacing-2)/2); margin-right: calc(-1 * var(--spacing-2)/2); }
    .spacing-x-sm-3 { margin-left: calc(-1 * var(--spacing-3)/2); margin-right: calc(-1 * var(--spacing-3)/2); }
    .spacing-x-sm-4 { margin-left: calc(-1 * var(--spacing-4)/2); margin-right: calc(-1 * var(--spacing-4)/2); }
    .spacing-x-sm-5 { margin-left: calc(-1 * var(--spacing-5)/2); margin-right: calc(-1 * var(--spacing-5)/2); }

    .spacing-y-sm-1 > * { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
    .spacing-y-sm-2 > * { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
    .spacing-y-sm-3 > * { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
    .spacing-y-sm-4 > * { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
    .spacing-y-sm-5 > * { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .spacing-y-sm-1 { margin-top: calc(-1 * var(--spacing-1)); margin-bottom: calc(-1 * var(--spacing-1)); }
    .spacing-y-sm-2 { margin-top: calc(-1 * var(--spacing-2)); margin-bottom: calc(-1 * var(--spacing-2)); }
    .spacing-y-sm-3 { margin-top: calc(-1 * var(--spacing-3)); margin-bottom: calc(-1 * var(--spacing-3)); }
    .spacing-y-sm-4 { margin-top: calc(-1 * var(--spacing-4)); margin-bottom: calc(-1 * var(--spacing-4)); }
    .spacing-y-sm-5 { margin-top: calc(-1 * var(--spacing-5)); margin-bottom: calc(-1 * var(--spacing-5)); }
}

/* -------- MD -------- */
@media (min-width: 768px) {
    /* Salin pola yang sama seperti di atas, ganti -sm- menjadi -md- */
    .spacing-md-1 > * { padding: var(--spacing-1); }
    .spacing-md-2 > * { padding: var(--spacing-2); }
    .spacing-md-3 > * { padding: var(--spacing-3); }
    .spacing-md-4 > * { padding: var(--spacing-4); }
    .spacing-md-5 > * { padding: var(--spacing-5); }
    .spacing-md-1 { margin: calc(-1 * var(--spacing-1)); }
    .spacing-md-2 { margin: calc(-1 * var(--spacing-2)); }
    .spacing-md-3 { margin: calc(-1 * var(--spacing-3)); }
    .spacing-md-4 { margin: calc(-1 * var(--spacing-4)); }
    .spacing-md-5 { margin: calc(-1 * var(--spacing-5)); }

    .spacing-x-md-1 > * { padding-left: calc(var(--spacing-1)/2); padding-right: calc(var(--spacing-1)/2); }
    .spacing-x-md-2 > * { padding-left: calc(var(--spacing-2)/2); padding-right: calc(var(--spacing-2)/2); }
    .spacing-x-md-3 > * { padding-left: calc(var(--spacing-3)/2); padding-right: calc(var(--spacing-3)/2); }
    .spacing-x-md-4 > * { padding-left: calc(var(--spacing-4)/2); padding-right: calc(var(--spacing-4)/2); }
    .spacing-x-md-5 > * { padding-left: calc(var(--spacing-5)/2); padding-right: calc(var(--spacing-5)/2); }
    .spacing-x-md-1 { margin-left: calc(-1 * var(--spacing-1)/2); margin-right: calc(-1 * var(--spacing-1)/2); }
    .spacing-x-md-2 { margin-left: calc(-1 * var(--spacing-2)/2); margin-right: calc(-1 * var(--spacing-2)/2); }
    .spacing-x-md-3 { margin-left: calc(-1 * var(--spacing-3)/2); margin-right: calc(-1 * var(--spacing-3)/2); }
    .spacing-x-md-4 { margin-left: calc(-1 * var(--spacing-4)/2); margin-right: calc(-1 * var(--spacing-4)/2); }
    .spacing-x-md-5 { margin-left: calc(-1 * var(--spacing-5)/2); margin-right: calc(-1 * var(--spacing-5)/2); }

    .spacing-y-md-1 > * { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
    .spacing-y-md-2 > * { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
    .spacing-y-md-3 > * { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
    .spacing-y-md-4 > * { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
    .spacing-y-md-5 > * { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .spacing-y-md-1 { margin-top: calc(-1 * var(--spacing-1)); margin-bottom: calc(-1 * var(--spacing-1)); }
    .spacing-y-md-2 { margin-top: calc(-1 * var(--spacing-2)); margin-bottom: calc(-1 * var(--spacing-2)); }
    .spacing-y-md-3 { margin-top: calc(-1 * var(--spacing-3)); margin-bottom: calc(-1 * var(--spacing-3)); }
    .spacing-y-md-4 { margin-top: calc(-1 * var(--spacing-4)); margin-bottom: calc(-1 * var(--spacing-4)); }
    .spacing-y-md-5 { margin-top: calc(-1 * var(--spacing-5)); margin-bottom: calc(-1 * var(--spacing-5)); }
}

/* -------- LG -------- */
@media (min-width: 992px) {
    .spacing-lg-1 > * { padding: var(--spacing-1); }
    .spacing-lg-2 > * { padding: var(--spacing-2); }
    .spacing-lg-3 > * { padding: var(--spacing-3); }
    .spacing-lg-4 > * { padding: var(--spacing-4); }
    .spacing-lg-5 > * { padding: var(--spacing-5); }
    .spacing-lg-1 { margin: calc(-1 * var(--spacing-1)); }
    .spacing-lg-2 { margin: calc(-1 * var(--spacing-2)); }
    .spacing-lg-3 { margin: calc(-1 * var(--spacing-3)); }
    .spacing-lg-4 { margin: calc(-1 * var(--spacing-4)); }
    .spacing-lg-5 { margin: calc(-1 * var(--spacing-5)); }

    .spacing-x-lg-1 > * { padding-left: calc(var(--spacing-1)/2); padding-right: calc(var(--spacing-1)/2); }
    .spacing-x-lg-2 > * { padding-left: calc(var(--spacing-2)/2); padding-right: calc(var(--spacing-2)/2); }
    .spacing-x-lg-3 > * { padding-left: calc(var(--spacing-3)/2); padding-right: calc(var(--spacing-3)/2); }
    .spacing-x-lg-4 > * { padding-left: calc(var(--spacing-4)/2); padding-right: calc(var(--spacing-4)/2); }
    .spacing-x-lg-5 > * { padding-left: calc(var(--spacing-5)/2); padding-right: calc(var(--spacing-5)/2); }
    .spacing-x-lg-1 { margin-left: calc(-1 * var(--spacing-1)/2); margin-right: calc(-1 * var(--spacing-1)/2); }
    .spacing-x-lg-2 { margin-left: calc(-1 * var(--spacing-2)/2); margin-right: calc(-1 * var(--spacing-2)/2); }
    .spacing-x-lg-3 { margin-left: calc(-1 * var(--spacing-3)/2); margin-right: calc(-1 * var(--spacing-3)/2); }
    .spacing-x-lg-4 { margin-left: calc(-1 * var(--spacing-4)/2); margin-right: calc(-1 * var(--spacing-4)/2); }
    .spacing-x-lg-5 { margin-left: calc(-1 * var(--spacing-5)/2); margin-right: calc(-1 * var(--spacing-5)/2); }

    .spacing-y-lg-1 > * { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
    .spacing-y-lg-2 > * { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
    .spacing-y-lg-3 > * { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
    .spacing-y-lg-4 > * { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
    .spacing-y-lg-5 > * { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .spacing-y-lg-1 { margin-top: calc(-1 * var(--spacing-1)); margin-bottom: calc(-1 * var(--spacing-1)); }
    .spacing-y-lg-2 { margin-top: calc(-1 * var(--spacing-2)); margin-bottom: calc(-1 * var(--spacing-2)); }
    .spacing-y-lg-3 { margin-top: calc(-1 * var(--spacing-3)); margin-bottom: calc(-1 * var(--spacing-3)); }
    .spacing-y-lg-4 { margin-top: calc(-1 * var(--spacing-4)); margin-bottom: calc(-1 * var(--spacing-4)); }
    .spacing-y-lg-5 { margin-top: calc(-1 * var(--spacing-5)); margin-bottom: calc(-1 * var(--spacing-5)); }
}

/* -------- XL -------- */
@media (min-width: 1200px) {
    .spacing-xl-1 > * { padding: var(--spacing-1); }
    .spacing-xl-2 > * { padding: var(--spacing-2); }
    .spacing-xl-3 > * { padding: var(--spacing-3); }
    .spacing-xl-4 > * { padding: var(--spacing-4); }
    .spacing-xl-5 > * { padding: var(--spacing-5); }
    .spacing-xl-1 { margin: calc(-1 * var(--spacing-1)); }
    .spacing-xl-2 { margin: calc(-1 * var(--spacing-2)); }
    .spacing-xl-3 { margin: calc(-1 * var(--spacing-3)); }
    .spacing-xl-4 { margin: calc(-1 * var(--spacing-4)); }
    .spacing-xl-5 { margin: calc(-1 * var(--spacing-5)); }

    .spacing-x-xl-1 > * { padding-left: calc(var(--spacing-1)/2); padding-right: calc(var(--spacing-1)/2); }
    .spacing-x-xl-2 > * { padding-left: calc(var(--spacing-2)/2); padding-right: calc(var(--spacing-2)/2); }
    .spacing-x-xl-3 > * { padding-left: calc(var(--spacing-3)/2); padding-right: calc(var(--spacing-3)/2); }
    .spacing-x-xl-4 > * { padding-left: calc(var(--spacing-4)/2); padding-right: calc(var(--spacing-4)/2); }
    .spacing-x-xl-5 > * { padding-left: calc(var(--spacing-5)/2); padding-right: calc(var(--spacing-5)/2); }
    .spacing-x-xl-1 { margin-left: calc(-1 * var(--spacing-1)/2); margin-right: calc(-1 * var(--spacing-1)/2); }
    .spacing-x-xl-2 { margin-left: calc(-1 * var(--spacing-2)/2); margin-right: calc(-1 * var(--spacing-2)/2); }
    .spacing-x-xl-3 { margin-left: calc(-1 * var(--spacing-3)/2); margin-right: calc(-1 * var(--spacing-3)/2); }
    .spacing-x-xl-4 { margin-left: calc(-1 * var(--spacing-4)/2); margin-right: calc(-1 * var(--spacing-4)/2); }
    .spacing-x-xl-5 { margin-left: calc(-1 * var(--spacing-5)/2); margin-right: calc(-1 * var(--spacing-5)/2); }

    .spacing-y-xl-1 > * { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
    .spacing-y-xl-2 > * { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
    .spacing-y-xl-3 > * { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
    .spacing-y-xl-4 > * { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
    .spacing-y-xl-5 > * { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .spacing-y-xl-1 { margin-top: calc(-1 * var(--spacing-1)); margin-bottom: calc(-1 * var(--spacing-1)); }
    .spacing-y-xl-2 { margin-top: calc(-1 * var(--spacing-2)); margin-bottom: calc(-1 * var(--spacing-2)); }
    .spacing-y-xl-3 { margin-top: calc(-1 * var(--spacing-3)); margin-bottom: calc(-1 * var(--spacing-3)); }
    .spacing-y-xl-4 { margin-top: calc(-1 * var(--spacing-4)); margin-bottom: calc(-1 * var(--spacing-4)); }
    .spacing-y-xl-5 { margin-top: calc(-1 * var(--spacing-5)); margin-bottom: calc(-1 * var(--spacing-5)); }
}