Offline - JadiFullStack

  <!-- Title -->
  <h1 class="text-3xl md:text-4xl font-bold text-dark dark:text-darkmode-dark mb-6">
    Anda Sedang Offline
  </h1>

  <!-- Description -->
  <div class="prose prose-lg dark:prose-invert mb-8">
    <p class="text-text dark:text-darkmode-text">
      Sepertinya koneksi internet Anda terputus. Jangan khawatir, beberapa halaman yang sudah Anda kunjungi 
      masih tersedia untuk dibaca secara offline.
    </p>
  </div>

  <!-- Offline Features -->
  <div class="bg-white dark:bg-darkmode-theme-light rounded-xl p-6 shadow-sm border border-border dark:border-darkmode-border mb-8">
    <h3 class="text-lg font-semibold text-dark dark:text-darkmode-dark mb-4">
      Yang Dapat Anda Lakukan:
    </h3>
    
    <div class="grid md:grid-cols-2 gap-4 text-left">
      <div class="flex items-start gap-3">
        <i class="fa-solid fa-check text-green-500 mt-1"></i>
        <div>
          <h4 class="font-medium text-dark dark:text-darkmode-dark">Baca Artikel yang Sudah Di-cache</h4>
          <p class="text-sm text-text dark:text-darkmode-text">Artikel yang pernah Anda buka masih bisa dibaca</p>
        </div>
      </div>
      
      <div class="flex items-start gap-3">
        <i class="fa-solid fa-check text-green-500 mt-1"></i>
        <div>
          <h4 class="font-medium text-dark dark:text-darkmode-dark">Navigasi Halaman Utama</h4>
          <p class="text-sm text-text dark:text-darkmode-text">Halaman utama tersedia secara offline</p>
        </div>
      </div>
      
      <div class="flex items-start gap-3">
        <i class="fa-solid fa-times text-red-500 mt-1"></i>
        <div>
          <h4 class="font-medium text-dark dark:text-darkmode-dark">Pencarian</h4>
          <p class="text-sm text-text dark:text-darkmode-text">Memerlukan koneksi internet</p>
        </div>
      </div>
      
      <div class="flex items-start gap-3">
        <i class="fa-solid fa-times text-red-500 mt-1"></i>
        <div>
          <h4 class="font-medium text-dark dark:text-darkmode-dark">Komentar & Newsletter</h4>
          <p class="text-sm text-text dark:text-darkmode-text">Memerlukan koneksi internet</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
    <button 
      onclick="window.location.reload()" 
      class="btn-primary inline-flex items-center gap-2">
      <i class="fa-solid fa-refresh"></i>
      Coba Lagi
    </button>
    
    <a 
      href="/" 
      class="btn-secondary inline-flex items-center gap-2">
      <i class="fa-solid fa-home"></i>
      Kembali ke Beranda
    </a>
  </div>

  <!-- Connection Status -->
  <div id="connection-status" class="text-sm text-text/60 dark:text-darkmode-text/60">
    <p>Status koneksi akan diperbarui otomatis ketika online kembali.</p>
  </div>
</div>