/* Custom Color Theme: Mutiara Bunda (Teal & Gold) */
:root {
    --mb-primary: #f2ae1b;
    /* Deep Teal/Hijau Islami */
    --mb-primary-soft: #e7f3f1;
    /* Soft Teal Background */
    --mb-secondary: #d4af37;
    /* Warm Gold / Emas Mutiara */
    --mb-secondary-soft: #fcf8e3;
}

/* Override Bootstrap Utility Classes secara lokal */
.text-mb-primary {
    color: var(--mb-primary) !important;
}

.text-mb-secondary {
    color: var(--mb-secondary) !important;
}

.bg-mb-primary {
    background-color: var(--mb-primary) !important;
}

.bg-mb-soft {
    background-color: var(--mb-primary-soft) !important;
}

.border-mb-primary {
    border-color: var(--mb-primary) !important;
}

.border-mb-secondary {
    border-color: var(--mb-secondary) !important;
}

/* Hover State */
.hover-mb-primary:hover {
    color: var(--mb-primary) !important;
}

/* Truncate teks deskripsi blog agar rata maksimal 3 baris */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.font_11 {
    font-size: 0.7rem;
}

.font_12 {
    font-size: 0.75rem;
}

.font_13 {
    font-size: 0.85rem;
}

.font_14 {
    font-size: 0.9rem;
}

/* Hover effect halusan */
.card-blog-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-blog-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(15, 98, 87, 0.1) !important;
    /* Shadow soft teal */
}

/* Custom Pagination Active State */
.page-item.active .page-link {
    background-color: var(--mb-primary) !important;
    border-color: var(--mb-primary) !important;
    color: #fff !important;
}

.page-link {
    color: var(--mb-primary);
}

/* Penyesuaian border responsif */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid #dee2e6 !important;
    }
}