.cat-hero{
  padding:4.5rem 0 3rem;text-align:center;
  background:var(--surface);
  border-bottom:1px solid var(--border-soft);
}
.cat-hero .emoji-big{font-size:3rem;display:block;margin-bottom:1rem}
.cat-hero h1{font-weight:300;margin-bottom:.8rem;text-wrap:balance}
.cat-hero h1 em{font-style:normal;font-weight:700}
.cat-hero p{color:var(--muted);max-width:600px;margin:0 auto;line-height:1.75;font-size:.96rem}
.theme-count-line{text-align:center;color:var(--faint);font-size:var(--fs-small);margin-bottom:1.6rem}
.theme-grid-pro{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.3rem;padding:0 0 3.5rem;
}
.theme-card-pro{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.theme-card-pro:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.08)}
.theme-preview{
  aspect-ratio:390/520;overflow:hidden;background:var(--surface-soft);position:relative;
  cursor:pointer;
}
.theme-preview img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s ease}
.theme-card-pro:hover .theme-preview img{transform:scale(1.04)}
.price-badge{
  position:absolute;top:.7rem;right:.7rem;
  background:var(--ink);
  color:#fff;font-weight:600;font-size:var(--fs-tiny);
  padding:.35rem .85rem;border-radius:999px;letter-spacing:.3px;
}
.theme-meta{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1}
.theme-meta h3{font-size:.95rem;margin-bottom:.3rem;line-height:1.45;font-weight:600}
.theme-meta .cat{font-size:var(--fs-tiny);color:var(--faint);letter-spacing:.4px}
.theme-actions{display:flex;gap:.6rem;align-items:center;margin-top:auto;padding-top:.9rem;flex-wrap:wrap}
.demo-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.5rem 1.05rem;border-radius:999px;font-size:var(--fs-small);font-weight:500;
  background:transparent;border:1px solid #d5d5d5;color:var(--ink);
  text-decoration:none;transition:border-color .2s,background .2s;
  flex:1;white-space:nowrap;
}
.demo-link:hover{border-color:var(--ink);background:var(--surface-soft)}
.order-link{
  display:inline-block;font-size:var(--fs-small);font-weight:600;color:var(--ink);
  cursor:pointer;white-space:nowrap;padding:.5rem .2rem;
}
.order-link:hover{text-decoration:underline}
.breadcrumb{font-size:var(--fs-small);color:var(--faint);padding:1.4rem 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
@media(max-width:1024px){
  .theme-grid-pro{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .theme-grid-pro{grid-template-columns:repeat(2,1fr);gap:1rem}
  .cat-hero{padding:3.2rem 0 2.2rem}
}
@media(max-width:400px){
  .theme-grid-pro{gap:.8rem}
  .theme-meta{padding:.85rem .9rem 1rem}
  .theme-meta h3{font-size:.86rem}
  .demo-link{font-size:var(--fs-tiny);padding:.45rem .8rem}
  .order-link{font-size:var(--fs-tiny)}
  .price-badge{font-size:.68rem;padding:.28rem .7rem}
}

/* ---------- social icons (logo kecil) ---------- */
.social-row{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.soc{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#161b22;border:1px solid #2a3139;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;text-decoration:none}
.soc svg{width:22px;height:22px;display:block}
.soc:hover{transform:scale(1.15)}
.soc-wa:hover{border-color:#25D366;box-shadow:0 0 14px rgba(37,211,102,.45)}
.soc-mail:hover{border-color:#EA4335;box-shadow:0 0 14px rgba(234,67,53,.45)}
.soc-gh:hover{border-color:#f0f6fc;box-shadow:0 0 14px rgba(240,246,252,.35)}
.soc-yt:hover{border-color:#FF0000;box-shadow:0 0 14px rgba(255,0,0,.45)}
.soc-tg:hover{border-color:#229ED9;box-shadow:0 0 14px rgba(34,158,217,.45)}
.foot-single{text-align:center;color:#8b949e;font-family:ui-monospace,monospace;font-size:.82rem;letter-spacing:1.5px;margin:0}
.foot-single i{color:#3a4149;font-style:normal;margin:0 .7rem}
footer.site{padding:1.5rem 0}