{% extends "base.html" %}

{% block title %}404 — Halaman tidak ditemukan{% endblock %}

{% block content %}
<section class="relative grid min-h-[80svh] place-items-center overflow-hidden bg-noise px-5 pt-[var(--nav-h)]">
  <div class="absolute inset-0 bg-grid"></div>
  <div class="orb orb-a left-1/4 top-1/4 h-72 w-72"></div>
  <div class="orb orb-b right-1/4 bottom-1/4 h-64 w-64"></div>

  <div class="relative text-center">
    <p class="font-display text-[7rem] font-extrabold leading-none text-ember-anim sm:text-[11rem]">404</p>
    <h1 class="mt-2 font-display text-2xl font-extrabold text-neutral-100 sm:text-3xl">Halaman tidak ditemukan</h1>
    <p class="mx-auto mt-3 max-w-md text-sm text-neutral-500">
      Alamat yang kamu tuju mungkin sudah dipindah atau tidak pernah ada.
    </p>
    <div class="mt-8 flex flex-wrap justify-center gap-3">
      <a href="{% url 'core:home' %}" class="btn btn-primary btn-shine">Kembali ke Beranda</a>
      <a href="{% url 'blog:list' %}" class="btn btn-ghost">Baca Blog</a>
    </div>
  </div>
</section>
{% endblock %}