@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css');

/* =========================================================
   CUSTOM TAILWIND V3 & ARBITRARY CLASSES (D'SYSTEM OFFLINE)
   ========================================================= */

/* Warna Slate (Abu-abu gelap khas Tailwind v3) */
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-50 { background-color: #f8fafc; }

.text-slate-900 { color: #0f172a; }
.text-slate-800 { color: #1e293b; }
.text-slate-700 { color: #334155; }

.border-slate-700 { border-color: #334155; }
.border-slate-700\/50 { border-color: rgba(51, 65, 85, 0.5); }

.from-slate-900 { 
    --tw-gradient-from: #0f172a; 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0)); 
}
.to-slate-800 { --tw-gradient-to: #1e293b; }

/* Warna Amber & Orange */
.bg-amber-500 { background-color: #f59e0b; }
.hover\:bg-amber-400:hover { background-color: #fbbf24; }
.hover\:bg-amber-600:hover { background-color: #d97706; }

.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }

.border-amber-500 { border-color: #f59e0b; }
.from-amber-500 { 
    --tw-gradient-from: #f59e0b; 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0)); 
}

.bg-orange-500 { background-color: #f97316; }
.to-orange-500 { --tw-gradient-to: #f97316; }

/* Warna Rose */
.text-rose-400 { color: #fb7185; }
.text-rose-500 { color: #f43f5e; }
.text-rose-600 { color: #e11d48; }

/* Warna Emerald */
.bg-emerald-600 { background-color: #059669; }
.text-emerald-600 { color: #059669; }

/* Utility & Arbitrary Classes (z-index tinggi, opacity dll) */
.z-\[10000\] { z-index: 10000; }
.z-\[9999\] { z-index: 9999; }
.z-\[9998\] { z-index: 9998; }

.max-h-\[85vh\] { max-height: 85vh; }
.text-\[10px\] { font-size: 10px; }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }

.drop-shadow-md { 
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); 
}