/* ==========================================================================
   CUSTOM BOOTSTRAP-COMPATIBLE GRID SYSTEM (ISOLATED NAMESPACE)
   ========================================================================== */

.bs-container, 
.bs-container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .bs-container { max-width: 540px; }
}
@media (min-width: 768px) {
    .bs-container { max-width: 720px; }
}
@media (min-width: 992px) {
    .bs-container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .bs-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .bs-container { max-width: 1320px; }
}

.bs-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    box-sizing: border-box;
}

/* Kolom Dinamis (Otomatis Membagi Ruang Rata) */
.bs-col, 
[class*="bs-col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.bs-col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* ==========================================================================
   BREAKPOINTS & COLUMNS (SM, MD, LG, XL)
   ========================================================================== */

/* --- 1. Small Devices (sm ≥ 576px) --- */
@media (min-width: 576px) {
    .bs-col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .bs-col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .bs-col-sm-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .bs-col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .bs-col-sm-3  { flex: 0 0 25%; max-width: 25%; }
    .bs-col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .bs-col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .bs-col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .bs-col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .bs-col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .bs-col-sm-9  { flex: 0 0 75%; max-width: 75%; }
    .bs-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .bs-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .bs-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* --- 2. Medium Devices (md ≥ 768px) --- */
@media (min-width: 768px) {
    .bs-col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .bs-col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .bs-col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .bs-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .bs-col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .bs-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .bs-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .bs-col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .bs-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .bs-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .bs-col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .bs-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .bs-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .bs-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* --- 3. Large Devices (lg ≥ 992px) --- */
@media (min-width: 992px) {
    .bs-col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .bs-col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .bs-col-lg-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .bs-col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .bs-col-lg-3  { flex: 0 0 25%; max-width: 25%; }
    .bs-col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .bs-col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .bs-col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .bs-col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .bs-col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .bs-col-lg-9  { flex: 0 0 75%; max-width: 75%; }
    .bs-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .bs-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .bs-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* --- 4. Extra Large Devices (xl ≥ 1200px) --- */
@media (min-width: 1200px) {
    .bs-col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .bs-col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .bs-col-xl-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .bs-col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .bs-col-xl-3  { flex: 0 0 25%; max-width: 25%; }
    .bs-col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .bs-col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .bs-col-xl-6  { flex: 0 0 50%; max-width: 50%; }
    .bs-col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .bs-col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .bs-col-xl-9  { flex: 0 0 75%; max-width: 75%; }
    .bs-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .bs-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .bs-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   CUSTOM BOOTSTRAP-COMPATIBLE UTILITIES (SPACING & CARDS)
   ========================================================================== */

/* --- 1. SPACING SYSTEM (MARGIN & PADDING) --- */
/* Skala Spacing: 0 (0px), 1 (4px), 2 (8px), 3 (16px), 4 (24px), 5 (32px), 6 (48px) */

.bs-m-1{  margin: 4px !important; }
.bs-m-2{  margin: 8px !important; }
.bs-m-3{  margin: 16px !important; }
.bs-m-4{  margin: 24px !important; }
.bs-m-5{  margin: 32px !important; }
.bs-m-6{  margin: 48px !important; }

/* Margin Top (mt-*) */
.bs-mt-0 { margin-top: 0 !important; }
.bs-mt-1 { margin-top: 4px !important; }
.bs-mt-2 { margin-top: 8px !important; }
.bs-mt-3 { margin-top: 16px !important; }
.bs-mt-4 { margin-top: 24px !important; }
.bs-mt-5 { margin-top: 32px !important; }
.bs-mt-6 { margin-top: 48px !important; }

/* Margin Bottom (mb-*) */
.bs-mb-0 { margin-bottom: 0 !important; }
.bs-mb-1 { margin-bottom: 4px !important; }
.bs-mb-2 { margin-bottom: 8px !important; }
.bs-mb-3 { margin-bottom: 16px !important; }
.bs-mb-4 { margin-bottom: 24px !important; }
.bs-mb-5 { margin-bottom: 32px !important; }
.bs-mb-6 { margin-bottom: 48px !important; }

/* Margin X / Horizontal (mx-*) */
.bs-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Padding All Sides (p-*) */
.bs-p-0 { padding: 0 !important; }
.bs-p-1 { padding: 4px !important; }
.bs-p-2 { padding: 8px !important; }
.bs-p-3 { padding: 16px !important; }
.bs-p-4 { padding: 24px !important; }
.bs-p-5 { padding: 32px !important; }

/* Padding Y / Vertical (py-*) */
.bs-py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.bs-py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.bs-py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.bs-py-5 { padding-top: 32px !important; padding-bottom: 32px !important; }

/* Padding X / Horizontal (px-*) */
.bs-px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.bs-px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.bs-px-4 { padding-left: 24px !important; padding-right: 24px !important; }


/* --- 2. CARD COMPONENT SYSTEM --- */
.bs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* .bs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
} */


.bs-card-body {
    flex: 1 1 auto;
    padding: 20px 24px;
}

.bs-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.bs-card-text {
    font-size: 13.5px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 0;
}

.text-primary{
    color: rgba(18, 59, 93, 1);

}

.text-secondary{
    color:#666666;
}

.text-white{
    color: #ffff;
}

.d-flex{
    display: flex !important;
}

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

.fw-bold{
    font-weight: bold;
}

/* ==========================================================================
   CUSTOM BOOTSTRAP-COMPATIBLE BUTTON SYSTEM (.bs-btn)
   ========================================================================== */

/* Base Button Style */
.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1.5px solid transparent;
    padding: 8px 18px;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bs-btn:focus, 
.bs-btn:active {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 176, 233, 0.25);
}

/* --- 1. Button Variants (Warna Utama) --- */

/* Primary Button (Biru Utama Portal / Gradient) */
.bs-btn-primary {
    background: linear-gradient(135deg, #25B0E9 0%, #1D519C 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(29, 81, 156, 0.2);
}

.bs-btn-primary:hover {
    background: linear-gradient(135deg, #1d9ed4 0%, #143e7a 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 81, 156, 0.3);
}

/* Outline Button (Border Biru) */
.bs-btn-outline-primary {
    background-color: #ffffff;
    color: #0072bc;
    border-color: #cbd5e0;
}

.bs-btn-outline-primary:hover {
    background-color: #f0f7ff;
    color: #005a96;
    border-color: #25B0E9;
}

/* Soft / Light Button (Cocok untuk tombol ikon download dokumen kecil seperti di desain Figma) */
.bs-btn-light {
    background-color: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}

.bs-btn-light:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}


/* --- 2. Button Sizes (Ukuran) --- */

/* Small Button (Icon/File Action kecil) */
.bs-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* Large Button */
.bs-btn-lg {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 14px;
}

/* Icon-Only / Circular Button (Tombol Bulat seperti Unduh Dokumen) */
.bs-btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.w-100{
    width: 100%;
}

.text-uppercase{
    text-transform: uppercase;
}
.text-capitalize{
    text-transform: capitalize;
}
.text-lowercase{
    text-transform: lowercase;
}