/* =====================================================================
   LATAR ANTIOFFLINE
   Disalin dari https://antioffline.net/admin/login.php agar tampilannya
   sama persis: dasar #030305, dua glow blur (cyan kiri-atas, ungu
   kanan-bawah), dan jaringan partikel cyan di atas canvas.

   Nilai di sini TIDAK boleh diubah sembarangan — semuanya diambil dari
   computed style halaman asli, bukan dikira-kira.
   ===================================================================== */

:root{
  --ao-bg:#030305;
  --ao-surface:#0a0a0e;
  --ao-border:rgba(255,255,255,.08);
  --ao-text:#ffffff;
  --ao-text-muted:#94a3b8;
  --ao-cyan:#00e5ff;
}

.hero-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;          /* blob 600px tidak boleh bikin scrollbar */
}
.hero-bg canvas{
  width:100%;
  height:100%;
  display:block;
}
.hero-glow-blob,
.hero-glow-blob-2{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:.3;
}
.hero-glow-blob{
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(0,229,255,.25), transparent 70%);
  top:-20%;left:-10%;
}
.hero-glow-blob-2{
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(168,85,247,.2), transparent 70%);
  bottom:-20%;right:-10%;
}

/* Layar kecil: blob 600px terlalu besar dan menutupi seluruh layar,
   jadi diperkecil agar efeknya tetap terlihat sebagai cahaya sudut. */
@media(max-width:560px){
  .hero-glow-blob{width:340px;height:340px;filter:blur(80px)}
  .hero-glow-blob-2{width:300px;height:300px;filter:blur(80px)}
}

/* Hormati preferensi pengguna yang tidak nyaman dengan animasi. */
@media(prefers-reduced-motion:reduce){
  .hero-bg canvas{display:none}
}