/* Fallback utility classes untuk desain baru Kiananti v2.
   File ini melengkapi output.css yang belum di-rebuild.
   Setelah menjalankan `npm run build`, file ini bisa dihapus atau dibiarkan.
*/

/* Grid */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Aspect ratio */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animations */
@keyframes pulse {
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Sticky & z-index */
.sticky { position: sticky; }
.z-30 { z-index: 30; }
.z-\[100\] { z-index: 100; }
.z-\[110\] { z-index: 110; }
.z-\[115\] { z-index: 115; }
.z-\[120\] { z-index: 120; }

/* Colors & opacity */
.border-red-600 { border-color: rgb(220 38 38); }
.hover\:border-red-600:hover { border-color: rgb(220 38 38); }
.focus\:border-red-600:focus { border-color: rgb(220 38 38); }
.hover\:bg-gray-50:hover { background-color: rgb(249 250 251); }
.hover\:bg-gray-800:hover { background-color: rgb(31 41 55); }
.hover\:bg-gray-900:hover { background-color: rgb(17 24 39); }
.hover\:text-white:hover { color: rgb(255 255 255); }
.hover\:text-red-600:hover { color: rgb(220 38 38); }
.hover\:text-red-700:hover { color: rgb(185 28 28); }
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.2); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.text-gray-100 { color: rgb(243 244 246); }

/* Transform */
.translate-x-1\/4 { transform: translateX(25%); }
.-translate-y-1\/4 { transform: translateY(-25%); }

/* Filters */
.drop-shadow-md { filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); }
.brightness-0 { filter: brightness(0); }
.invert { filter: invert(1); }