{% extends "base.html" %}

{% block title %}500 — Terjadi kesalahan{% 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/3 top-1/4 h-72 w-72"></div>

  <div class="relative text-center">
    <p class="font-display text-[7rem] font-extrabold leading-none text-ember-anim sm:text-[11rem]">500</p>
    <h1 class="mt-2 font-display text-2xl font-extrabold text-neutral-100 sm:text-3xl">Ada yang tidak beres</h1>
    <p class="mx-auto mt-3 max-w-md text-sm text-neutral-500">
      Server sedang bermasalah. Coba muat ulang beberapa saat lagi.
    </p>
    <div class="mt-8">
      <a href="{% url 'core:home' %}" class="btn btn-primary btn-shine">Kembali ke Beranda</a>
    </div>
  </div>
</section>
{% endblock %}