/* halaman artikel: builds on forum.css tokens (.forum scope) */
.ar { --ar-stage: #0B0B12; display: flex; flex-direction: column; gap: 24px; max-width: 1400px; margin: 0 auto; }
.ar-head { display: flex; flex-direction: column; gap: 14px; max-width: 1000px; }
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.forum .ar-title { margin: 0; font-size: clamp(23px, 1vw + 19px, 32px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em; color: var(--fx-text); overflow-wrap: anywhere; }
.ar-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }

/* main column */
.forum .ar-main { flex: 2.2 1 560px; min-width: 0; padding: clamp(18px, 4%, 32px); display: flex; flex-direction: column; gap: 24px; }
.ar-tutup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 22px; border-radius: 14px;
  background: var(--tone-soft); border: 1px solid var(--tone); }
.ar-tutup > div { flex: 1 1 240px; }
.ar-tutup-label { font-size: 13px; font-weight: 600; color: var(--tone); }
.ar-tutup-tarikh { font-size: 24px; font-weight: 700; color: var(--fx-text); margin-top: 4px; }
.ar-tutup-status { background: var(--fx-card); color: var(--tone); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; }
.ar-cover { display: block; border-radius: 12px; overflow: hidden; background: var(--ar-stage); }
.ar-cover img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.ar-isi { font-size: 17px; line-height: 1.75; color: var(--fx-text2); overflow-wrap: anywhere; }
.ar-isi p:last-child { margin-bottom: 0; }
.ar-isi img { max-width: 100%; height: auto; }
.forum .ar-h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--fx-text); }
.ar-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ar-galeri figure { margin: 0; }
.ar-galeri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; background: var(--ar-stage); }
.ar-galeri figcaption { margin-top: 8px; }
.forum a.ar-kembali { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fx-primary); }

/* side rail */
.ar-rail { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.forum .ar-card { padding: 22px; }
.forum .ar-card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--fx-text); display: flex; align-items: center; gap: 10px; }
.ar-bil { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--fx-danger-soft); color: var(--fx-danger); }
.forum a.ar-dok { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--fx-raised); color: var(--fx-text); }
.ar-dok + .ar-dok { margin-top: 12px; }
.forum .ar-dok-ikon { font-size: 24px; color: var(--fx-danger); flex-shrink: 0; }
.ar-dok-teks { flex: 1; min-width: 0; }
.ar-dok-nama { font-size: 14px; font-weight: 600; line-height: 1.4; }
.ar-dok-fail { font-size: 12px; color: var(--fx-muted); margin-top: 3px; overflow-wrap: anywhere; }
.forum .ar-dok-turun { color: var(--fx-primary); flex-shrink: 0; }
.forum a.ar-pautan { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--fx-primary); overflow-wrap: anywhere; }
.ar-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* more in this kategori */
.ar-lagi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.forum .ar-lagi-head .ar-h2 { margin: 0; }
.forum a.ar-semua { font-size: 13px; font-weight: 600; color: var(--fx-primary); }
.ar-lagi { display: flex; flex-wrap: wrap; gap: 16px; }
.forum a.ar-lagi-card { flex: 1 1 300px; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--fx-text); }
.forum a.ar-lagi-card:hover { border-color: var(--fx-primary); }
.ar-lagi-tajuk { font-size: 14.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }