.artikel-hero {
  background: linear-gradient(135deg, rgba(10,22,40,0.88), rgba(10,22,40,0.75)),
    url('/images/bg.png') center center / cover no-repeat;
  padding-top: 120px;
  padding-bottom: 60px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 500px;
}
.kategori-card { display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,0.06); text-decoration:none; color:#222; transition:transform .15s; }
.kategori-card:hover { transform:translateY(-3px); color:#7c2d40; }
.kategori-icon { width:44px; height:44px; border-radius:50%; background:#f3e6ea; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.kategori-nama { font-weight:600; }

.artikel-card { display:block; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.06); text-decoration:none; color:#222; }
.artikel-thumb { position:relative; height:170px; background:#f3e6ea; display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.artikel-thumb img { width:100%; height:100%; object-fit:cover; }
.tipe-badge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); color:#fff; font-size:0.7rem; padding:2px 8px; border-radius:10px; }
.artikel-body { padding:14px; }
.artikel-body h6 { margin-top:8px; font-weight:700; }

.btn-filter { border:1px solid #ddd; background:#fff; border-radius:20px; padding:6px 16px; font-size:0.85rem; }
.btn-filter.active { background: var(--dark); color:#fff; border-color:#7c2d40; }

.artikel-konten { white-space:pre-line; line-height:1.8; }