/* Custom styles di atas Tailwind — fokus aksesibilitas dan finishing kecil */

:root {
  --gz-primary: #4A90E2;   /* biru */
  --gz-accent: #10B981;    /* hijau fresh */
  --gz-yellow: #FBBF24;    /* kuning hangat */
  --gz-pink: #EC4899;      /* pink */
  --gz-warning: #E74C3C;   /* merah - hanya untuk page bahaya */
  --gz-text: #1F2937;
  --gz-text-light: #6B7280;
  --gz-card: #F9FAFB;
  --gz-border: #E5E7EB;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--gz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Visible focus untuk aksesibilitas keyboard */
:focus-visible {
  outline: 3px solid var(--gz-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hover transition halus pada kartu menu */
.menu-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(74, 144, 226, 0.18);
}

/* Filter pill aktif */
.pill-active {
  background-color: var(--gz-primary);
  color: white;
}

/* Skeleton loading untuk gambar */
.img-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Sembunyikan scrollbar di filter pills (mobile) tapi tetap bisa scroll */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Hero gradient lembut: biru → kuning → putih */
.hero-gradient {
  background: linear-gradient(180deg, #EAF3FB 0%, #FFFBEB 60%, #FFFFFF 100%);
}

/* Warna khusus warning section */
.warning-section {
  background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%);
}

/* Card detail menu — bagian "kenapa cocok" */
.kenapa-card {
  background: linear-gradient(135deg, #EAF3FB 0%, #F0F9F4 100%);
  border-left: 4px solid var(--gz-accent);
}

/* Kategori badge — palette biru/hijau/kuning/pink */
.cat-sarapan { background-color: #FEF3C7; color: #92400E; }     /* kuning */
.cat-makan_siang { background-color: #DBEAFE; color: #1E40AF; } /* biru */
.cat-makan_malam { background-color: #FCE7F3; color: #9D174D; } /* pink */
.cat-snack { background-color: #D1FAE5; color: #065F46; }       /* hijau */
.cat-bahaya { background-color: #FEE2E2; color: #991B1B; }      /* merah - semantic */

/* Kondisi ABK badge */
.cond-autisme { background-color: #FCE7F3; color: #9D174D; }
.cond-tunagrahita { background-color: #FEF3C7; color: #92400E; }
.cond-adhd { background-color: #D1FAE5; color: #065F46; }

/* Heart button untuk favorit */
.fav-btn {
  transition: transform 0.15s ease;
}
.fav-btn:hover { transform: scale(1.15); }
.fav-btn.is-fav .fav-icon-empty { display: none; }
.fav-btn:not(.is-fav) .fav-icon-fill { display: none; }
.fav-icon-fill { color: var(--gz-pink); }

/* Print: ringkas resep */
@media print {
  header, footer, nav, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
  .menu-card, article { box-shadow: none; border: 1px solid #ccc; }
}

/* Body teks sedikit lebih besar — orang tua sering baca sambil multitasking */
@media (min-width: 768px) {
  body { font-size: 17px; }
}