@if (item(); as materi) {
  <div class="detail-wrap">
    <button class="back-btn" (click)="back()">&larr; Kembali ke Materi</button>

    <article class="detail-card">
      <div class="badge">{{ kategoriLabel() }}</div>
      <h1>{{ materi.nama }}</h1>
      <div class="weave-divider" aria-hidden="true">
        <span></span><span></span><span></span><span></span>
      </div>
      <p class="detail-text">{{ materi.detail }}</p>
    </article>
  </div>
} @else {
  <div class="not-found">
    <h1>Materi tidak ditemukan</h1>
    <p>Materi yang kamu cari sudah tidak tersedia.</p>
    <button class="back-btn" (click)="back()">&larr; Kembali ke Materi</button>
  </div>
}