/* 
 * Efek Hover & Overlay Pure CSS 
 * (Menggantikan data-hover-animate dari plugins.min.js)
 *
 * WARNA: Semua warna primer menggunakan CSS variables dari color.css
 */
.ckan-org-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Untuk stretched link */
}
.ckan-org-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

/* Stretched Link agar seluruh card bisa diklik */
.ckan-stretched-link::after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    content: "";
}

.portfolio-image {
    position: relative;
}

.ckan-pure-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.ckan-org-card:hover .ckan-pure-overlay {
    opacity: 1;
}

/* Styling Pill Default */
.ckan-dataset-pill {
    background-color: var(--rembang-primary-light); color: var(--rembang-primary); font-weight: 600; padding: 5px 12px; font-size: 12px;
    transition: all 0.3s ease;
}
.ckan-member-pill {
    background-color: #fef5e7; color: #f39c12; font-weight: 600; padding: 5px 12px; font-size: 12px;
    transition: all 0.3s ease;
}

/* Hover Effect pada Bagian Bawah (Card Body) */
.ckan-org-card .card-body {
    transition: background-color 0.3s ease;
    border-radius: 0 0 8px 8px;
}

.ckan-org-card:hover .card-body {
    background-color: var(--rembang-primary);
}

/* Mengubah teks menjadi putih saat di hover */
.ckan-org-card:hover .card-body .ckan-org-title-wrap a,
.ckan-org-card:hover .card-body .ckan-org-desc {
    color: #ffffff !important;
}

/* Mengubah pill menjadi transparan putih saat card dihover */
.ckan-org-card:hover .card-body .ckan-dataset-pill,
.ckan-org-card:hover .card-body .ckan-member-pill {
    background-color: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
}

/* Styling tambahan untuk search box CKAN agar tidak kotak kaku */
#organization-search-form .search-input {
    border-radius: 30px;
    padding-left: 20px;
}
#organization-search-form .search-submit {
    border-radius: 0 30px 30px 0;
}