/* ============================================================
   home.css — hanya dipakai di halaman beranda (grid template,
   category strip, skeleton loading). Halaman lain tidak perlu
   memuat file ini.
   ============================================================ */

/* ---------------- Category strip ---------------- */
.cat-wrap{
  position:sticky; top:57px; z-index:30;
  background: linear-gradient(180deg, var(--cream) 60%, rgba(251,243,230,0.85));
  padding: 14px 0 12px;
}
.cat-strip{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding: 0 20px; max-width:1080px; margin:0 auto;
}
.cat-strip::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; padding:9px 16px; border-radius:100px; font-size:13px; font-weight:600;
  background:#fff; border:1.5px solid var(--line); color:var(--ink-soft); cursor:pointer;
  white-space:nowrap; transition: all .15s ease;
}
.chip.trend::before{ content:'\1F525 '; }
.chip.active{ background:var(--red); border-color:var(--red); color:#fff; }
.chip:not(.active):hover{ border-color:var(--gold-dark); color:var(--ink); }

/* ---------------- Grid ---------------- */
.grid-section{ max-width:1080px; margin:0 auto; padding: 6px 20px 60px; }
.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
@media (min-width:640px){ .grid{ grid-template-columns: repeat(3, 1fr); gap:18px; } }
@media (min-width:960px){ .grid{ grid-template-columns: repeat(4, 1fr); } }

.card{
  position:relative; border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--line); cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  padding:0px!important;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(122,15,27,0.14); }
.card .thumb{ position:relative; width:100%; aspect-ratio: 1/1.3; background:#F1E7D3; overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.badge{
  position:absolute; top:8px; left:8px; display:flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:4px 8px; border-radius:100px; color:#fff;
}
.badge.basic{ background: var(--gold-dark); }
.badge.premium{ background: var(--red); }

.card .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  padding:12px; background: linear-gradient(180deg, rgba(36,21,17,0) 45%, rgba(36,21,17,0.55) 100%);
  opacity:0; transition: opacity .18s ease;
}
.card:hover .overlay{ opacity:1; }
.card .use-btn{
  background:#fff; color:var(--red-dark); font-size:12px; font-weight:700;
  padding:8px 14px; border-radius:100px; width:100%; text-align:center;
}
.card .cap{ padding:9px 10px 11px; font-size:12.5px; font-weight:600; color:var(--ink); }

.empty-state{ text-align:center; padding: 50px 20px; color:var(--ink-soft); font-size:13.5px; }
.skeleton{ background: linear-gradient(100deg,#EFE5D1 30%,#F7EFDF 50%,#EFE5D1 70%); background-size:200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer{ from{ background-position: 150% 0;} to{ background-position: -50% 0;} }