/* ============================================
   Custom utilities - melengkapi class yang tidak
   tersedia di Tailwind v2 pre-compiled CSS
   ============================================ */

/* --- TEAL color palette --- */
.text-teal-500 { color: #14b8a6; }
.text-teal-600 { color: #0d9488; }
.bg-teal-500   { background-color: #14b8a6; }
.bg-teal-600   { background-color: #0d9488; }
.bg-teal-700   { background-color: #0f766e; }
.border-teal-500 { border-color: #14b8a6; }
.hover\:bg-teal-700:hover { background-color: #0f766e; }

/* --- ORANGE color palette --- */
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.bg-orange-50    { background-color: #fff7ed; }
.bg-orange-500   { background-color: #f97316; }
.bg-orange-600   { background-color: #ea580c; }
.bg-orange-700   { background-color: #c2410c; }
.border-orange-500 { border-color: #f97316; }
.hover\:bg-orange-700:hover { background-color: #c2410c; }

/* --- Gradient color stops --- */
.from-teal-500 { --tw-gradient-from: #14b8a6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 184, 166, 0)); }
.to-teal-700   { --tw-gradient-to: #0f766e; }

.from-indigo-100 { --tw-gradient-from: #e0e7ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(224, 231, 255, 0)); }
.to-indigo-300   { --tw-gradient-to: #a5b4fc; }

.from-indigo-600 { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79, 70, 229, 0)); }
.to-purple-600   { --tw-gradient-to: #9333ea; }

/* --- Gradient directions --- */
.bg-gradient-to-r  { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

/* --- focus-within ring (untuk form login) --- */
.focus-within\:ring-2:focus-within { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); }
.focus-within\:ring-indigo-400:focus-within { --tw-ring-color: #818cf8; box-shadow: 0 0 0 2px #818cf8; }

/* --- Hover transform (untuk card di index.php) --- */
.hover\:-translate-y-2:hover { --tw-translate-y: -0.5rem; 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)); }