/* /assets/css/style.css */

/* Definisi warna kustom */
.color-prima-green-dark { background-color: #2F8A34; }
.color-prima-green-light { color: #2F8A34; }
.border-prima-green { border-color: #2F8A34; }
.hover\:bg-prima-green-dark:hover { background-color: #267129; }
.hover\:text-prima-green-light:hover { color: #267129; }

/* Styling tambahan untuk konten artikel */
.prose h1, .prose h2, .prose h3 { font-weight: bold; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose ul { list-style-type: disc; margin-left: 1.5em; }

/* ======== ARSITEKTUR MODAL BARU ======== */

/* 1. Wadah Utama Modal (#modal-container) */
#modal-container {
    visibility: hidden; /* Sembunyi, tapi tetap di DOM */
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
}
#modal-container.is-open {
    visibility: visible;
    opacity: 1;
}

/* 2. Kotak Konten Modal (#modal-box) */
#modal-box {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#modal-container.is-open #modal-box {
    transform: scale(1);
    opacity: 1;
}

/* 3. Latar Belakang Overlay */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ======== Style Tombol Back to Top ======== */
#back-to-top {
    opacity: 0;
    transition: opacity 0.5s, transform 0.3s;
    transform: translateY(10px);
}
#back-to-top.show {
    opacity: 1;
    transform: translateY(0);
}

/* Style untuk Tab Artikel */
.tab-button {
    color: #4A5568; /* gray-700 */
    background-color: transparent;
    transition: all 0.3s ease;
}

.tab-button.active-tab {
    color: white;
    background-color: #2F8A34; /* Warna hijau prima medisra */
}