/* Halaman Artikel: listing dan konten tutorial */
.nav__menu > a.is-active { color: #fff; }
.art-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.art-card { display: flex; flex-direction: column; padding: 0 0 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); transition: border-color .25s, transform .25s; text-decoration: none; overflow: hidden; }
.art-card:hover { border-color: #22D3EE; transform: translateY(-4px); }
.art-card__img { aspect-ratio: 8 / 5; overflow: hidden; }
.art-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.art-card:hover .art-card__img img { transform: scale(1.04); }
.art-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 0; }
.art-card--plain { padding: 26px 24px; }
.art-card__tag { display: inline-block; align-self: flex-start; margin-bottom: 12px; padding: 4px 12px; border-radius: 99px; font-size: .74rem; font-weight: 700; color: #67E8F9; border: 1px solid rgba(103,232,249,.5); }
.art-card h3 { font-size: 1.15rem; margin: 0 0 10px; color: #fff; line-height: 1.4; }
.art-card p { margin: 0 0 14px; font-size: .92rem; line-height: 1.7; color: #94A3B8; flex: 1; }
.art-card small { color: #67E8F9; font-size: .8rem; font-weight: 700; }
.art-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.art-filter button { padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #CBD5E1; font-size: .86rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; }
.art-filter button:hover, .art-filter button.is-active { border-color: #22D3EE; color: #67E8F9; }

/* Halaman artikel tunggal */
.art-body { padding: 52px 0 64px; background: linear-gradient(#0B1120, #0D1626); }
.art-content { max-width: 760px; margin: 0 auto; }
.art-content .eyebrow { display: block; margin-bottom: 10px; }
.art-content h2 { font-size: 1.4rem; margin: 36px 0 14px; color: #fff; }
.art-content h2:first-of-type { margin-top: 0; }
.art-content p { margin: 0 0 18px; font-size: 1rem; line-height: 1.8; color: #CBD5E1; }
.art-content ul, .art-content ol { margin: 0 0 18px; padding-left: 22px; color: #CBD5E1; font-size: 1rem; line-height: 1.8; }
.art-content li { margin-bottom: 8px; }
.art-content code { padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.08); color: #67E8F9; font-size: .9em; }
.art-content pre { margin: 0 0 18px; padding: 18px 20px; border-radius: 14px; background: #0B1120; border: 1px solid rgba(255,255,255,.1); overflow-x: auto; }
.art-content pre code { padding: 0; background: none; color: #E2E8F0; }
.art-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; color: #94A3B8; font-size: .88rem; }
.art-meta .art-card__tag { margin: 0; }
.art-related { border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 34px; }
.art-related h3 { margin: 0 0 16px; font-size: 1.1rem; color: #fff; }
@media (max-width: 640px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bingkai tangkapan layar ilustratif di dalam artikel */
.art-shot { --f1: #2E2147; --f2: #714B67; position: relative; margin: 0 0 22px; padding: 14px; border-radius: 18px;
  background: linear-gradient(135deg, var(--f1), var(--f2)); }
.art-shot__win { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 20px 36px -14px rgba(0,0,0,.6); }
.art-shot__bar { display: flex; gap: 6px; align-items: center; height: 24px; padding: 0 12px; background: linear-gradient(#F3F4F6, #E5E7EB); border-bottom: 1px solid #D1D5DB; }
.art-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #F87171; }
.art-shot__bar i:nth-child(2) { background: #FBBF24; }
.art-shot__bar i:nth-child(3) { background: #34D399; }
.art-shot__win img { display: block; width: 100%; height: auto; }
.art-shot__cap { margin: 10px 2px 0; font-size: .82rem; color: #94A3B8; text-align: center; }
.art-note { font-size: .82rem; color: #64748B; font-style: italic; }

/* Gambar sampul di halaman artikel tunggal */
.art-cover { max-width: 760px; margin: 0 auto 38px; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.art-cover img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }