/* ==========================================================================
   tw-compat.css — utilitas Tailwind yang dipakai di view tetapi tidak ikut
   ter-build di app-combined.min.css (hasil purge). Dimuat SEBELUM
   app-combined agar varian responsif (md:, lg:) bawaan tetap menang.
   Varian responsif/hover tambahan ada di akhir global.css.
   ========================================================================== */
@keyframes tw-pulse{50%{opacity:.5}}
.animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.bg-amber-50{background-color:#fffbeb}
.bg-blue-600{background-color:#2563eb}
.bg-emerald-100{background-color:#d1fae5}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.bg-gray-50{background-color:#f9fafb}
.bg-indigo-100{background-color:#e0e7ff}
.bg-indigo-50{background-color:#eef2ff}
.bg-pink-100{background-color:#fce7f3}
.bg-pink-50{background-color:#fdf2f8}
.bg-red-100{background-color:#fee2e2}
.bg-red-50{background-color:#fef2f2}
.bg-slate-300{background-color:#cbd5e1}
.bg-yellow-50{background-color:#fefce8}
.border-4{border-width:4px}
.border-amber-200{border-color:#fde68a}
.border-emerald-200{border-color:#a7f3d0}
.border-gray-100{border-color:#f3f4f6}
.border-red-200{border-color:#fecaca}
.border-red-500{border-color:#ef4444}
.border-white{border-color:#fff}
.border-yellow-200{border-color:#fef08a}
.col-span-2{grid-column:span 2/span 2}
.col-span-full{grid-column:1/-1}
.duration-300{transition-duration:.3s}
.duration-700{transition-duration:.7s}
.flex-grow{flex-grow:1}
.font-black{font-weight:900}
.font-extrabold{font-weight:800}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.gap-1\.5{gap:0.375rem}
.h-3{height:0.75rem}
.h-48{height:12rem}
.h-60{height:15rem}
.h-full{height:100%}
.m-0{margin:0}
.max-w-7xl{max-width:80rem}
.mb-10{margin-bottom:2.5rem}
.mb-20{margin-bottom:5rem}
.min-h-screen{min-height:100vh}
.ml-0\.5{margin-left:0.125rem}
.ml-2{margin-left:0.5rem}
.mr-1{margin-right:0.25rem}
.mt-0\.5{margin-top:0.125rem}
.mt-16{margin-top:4rem}
.mx-2{margin-left:0.5rem;margin-right:0.5rem}
.object-cover{object-fit:cover}
.opacity-0{opacity:0}
.opacity-60{opacity:.6}
.p-12{padding:3rem}
.p-5{padding:1.25rem}
.pb-0{padding-bottom:0}
.pb-12{padding-bottom:3rem}
.pb-20{padding-bottom:5rem}
.pb-4{padding-bottom:1rem}
.pt-0{padding-top:0}
.pt-10{padding-top:2.5rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.right-6{right:1.5rem}
.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.space-x-3>:not([hidden])~:not([hidden]){margin-left:0.75rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-7xl{font-size:4.5rem;line-height:1}
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.text-amber-800{color:#92400e}
.text-base{font-size:1rem;line-height:1.5rem}
.text-blue-500{color:#3b82f6}
.text-blue-600{color:#2563eb}
.text-emerald-100{color:#d1fae5}
.text-emerald-500{color:#10b981}
.text-emerald-600{color:#059669}
.text-emerald-700{color:#047857}
.text-emerald-900{color:#064e3b}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-700{color:#374151}
.text-indigo-500{color:#6366f1}
.text-indigo-600{color:#4f46e5}
.text-orange-500{color:#f97316}
.text-pink-500{color:#ec4899}
.text-pink-600{color:#db2777}
.text-primary\/75{color:rgba(2,97,199,.75)}
.text-purple-500{color:#a855f7}
.text-red-100{color:#fee2e2}
.text-red-500{color:#ef4444}
.text-red-600{color:#dc2626}
.text-red-700{color:#b91c1c}
.text-red-800{color:#991b1b}
.text-red-900{color:#7f1d1d}
.text-yellow-400{color:#facc15}
.text-yellow-700{color:#a16207}
.to-purple-600{--tw-gradient-to:#9333ea}
.to-transparent{--tw-gradient-to:transparent}
.tracking-wide{letter-spacing:.025em}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.w-100{width:100%}
.w-24{width:6rem}
.w-3{width:0.75rem}
.from-black\/60{--tw-gradient-from:rgba(0,0,0,.6);--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.justify-content-center{justify-content:center}