/*
 * Utilitas warna brand SIAR (hijau emerald) dan beberapa utilitas lain yang dipakai
 * direktori.php tetapi tidak ada di assets/css/tailwind.min.css. Konfigurasi Tailwind
 * di dalam halaman hanya berlaku untuk Tailwind CDN, sehingga kelas brand-* tidak
 * pernah ikut terbangun. Format aturan mengikuti keluaran Tailwind v3.
 * Muat file ini SETELAH tailwind.min.css. Jika Tailwind dibangun ulang dengan palet
 * brand di tailwind.config.js, file ini aman dihapus.
 */

/* Latar */
.bg-brand-50 { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); }
.bg-brand-300 { --tw-bg-opacity: 1; background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1)); }
.bg-brand-400 { --tw-bg-opacity: 1; background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1)); }
.bg-brand-500 { --tw-bg-opacity: 1; background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); }
.bg-brand-500\/10 { background-color: rgba(16, 185, 129, .1); }
.bg-blue-50\/90 { background-color: rgba(239, 246, 255, .9); }
.bg-emerald-50\/90 { background-color: rgba(236, 253, 245, .9); }

/* Teks */
.text-brand-50 { --tw-text-opacity: 1; color: rgb(236 253 245 / var(--tw-text-opacity, 1)); }
.text-brand-100 { --tw-text-opacity: 1; color: rgb(209 250 229 / var(--tw-text-opacity, 1)); }
.text-brand-100\/90 { color: rgba(209, 250, 229, .9); }
.text-brand-200 { --tw-text-opacity: 1; color: rgb(167 243 208 / var(--tw-text-opacity, 1)); }
.text-brand-500 { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity, 1)); }
.text-brand-600 { --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity, 1)); }
.text-brand-700 { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); }

/* Garis tepi */
.border-\[4px\] { border-width: 4px; }
.border-brand-100 { --tw-border-opacity: 1; border-color: rgb(209 250 229 / var(--tw-border-opacity, 1)); }
.border-brand-300\/40 { border-color: rgba(110, 231, 183, .4); }
.border-brand-500\/20 { border-color: rgba(16, 185, 129, .2); }
.border-t-brand-600 { --tw-border-opacity: 1; border-top-color: rgb(5 150 105 / var(--tw-border-opacity, 1)); }
.border-b-brand-400 { --tw-border-opacity: 1; border-bottom-color: rgb(52 211 153 / var(--tw-border-opacity, 1)); }

/* Gradien */
.from-brand-600 { --tw-gradient-from: #059669 var(--tw-gradient-from-position); --tw-gradient-to: rgba(5, 150, 105, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brand-400 { --tw-gradient-to: #34d399 var(--tw-gradient-to-position); }
.to-brand-800 { --tw-gradient-to: #065f46 var(--tw-gradient-to-position); }

/* Bayangan berwarna */
.shadow-brand-500\/20 { --tw-shadow-color: rgba(16, 185, 129, .2); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-brand-500\/30:hover { --tw-shadow-color: rgba(16, 185, 129, .3); --tw-shadow: var(--tw-shadow-colored); }

/* Hover */
.hover\:bg-brand-50:hover { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); }
.hover\:bg-brand-100:hover { --tw-bg-opacity: 1; background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1)); }
.hover\:bg-brand-600:hover { --tw-bg-opacity: 1; background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1)); }
.hover\:bg-brand-500\/20:hover { background-color: rgba(16, 185, 129, .2); }
.hover\:border-brand-200:hover { --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); }
.hover\:border-brand-500\/30:hover { border-color: rgba(16, 185, 129, .3); }
.hover\:text-brand-700:hover { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); }

/* Hover pada kartu (group) */
.group:hover .group-hover\:text-brand-500 { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:text-brand-600 { --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:scale-\[1\.18\] { --tw-scale-x: 1.18; --tw-scale-y: 1.18; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

/* Tata letak */
.gap-3\.5 { gap: .875rem; }
.pt-7 { padding-top: 1.75rem; }
.duration-400 { transition-duration: .4s; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Animasi latar hero */
@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(.9); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-reverse {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 50px) scale(1.2); }
    66% { transform: translate(20px, -20px) scale(.8); }
    100% { transform: translate(0, 0) scale(1); }
}
.animate-blob { animation: blob 10s infinite; }
.animate-blob-reverse { animation: blob-reverse 12s infinite; }
.animate-pulse-slow { animation: pulse 4s cubic-bezier(.4, 0, .6, 1) infinite; }
@media (prefers-reduced-motion: reduce) {
    .animate-blob, .animate-blob-reverse, .animate-pulse-slow { animation: none; }
}