/* =====================================================
   HAIYO!!! gaya.css  --  tema Geocities tahun 2000
   Dibuat dengan NOTEPAD pada 56k modem. Jangan tanya.
   ===================================================== */

body {
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS", "Comic Neue", "MS Comic Sans", cursive, sans-serif;
  font-size: 15px;
  color: #ffff00;
  background-color: #000033;
  /* bintang-bintang bergemerlapan (tiled) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect width="48" height="48" fill="%23000033"/><circle cx="6" cy="8" r="1.6" fill="%23ffffff"/><circle cx="30" cy="18" r="1.4" fill="%23ffff00"/><circle cx="14" cy="34" r="1.2" fill="%2300ffff"/><circle cx="41" cy="39" r="1.6" fill="%23ffffff"/><circle cx="22" cy="3" r="1.1" fill="%23ff00ff"/></svg>');
  background-repeat: repeat;
  background-attachment: fixed;
  cursor: crosshair;
}

a:link    { color: #00ff00; text-decoration: underline; font-weight: bold; }
a:visited { color: #ff66ff; text-decoration: underline; }
a:hover   { color: #ff0000; background-color: #ffff00; text-decoration: none; }

h1 {
  font-family: "Comic Sans MS", cursive;
  font-size: 48px;
  margin: 6px 0 2px 0;
  letter-spacing: 3px;
}

h2 {
  font-family: "Comic Sans MS", cursive;
  font-size: 24px;
  color: #00ffff;
  margin: 4px 0;
}

/* --- teks pelangi (ganti WordArt) --- */
.pelangi {
  background: linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#00ff00,#00ffff,#0066ff,#cc00ff,#ff0000);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gelongsor 4s linear infinite;
  text-shadow: 2px 2px 0 #000;
}
@keyframes gelongsor { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* --- BLINK (wajib!) --- */
.blink { animation: blink 1s steps(1,start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- marquee: pastikan ada kotak kuning --- */
marquee {
  background: #000066;
  border: 2px dashed #ffff00;
  padding: 3px 0;
  font-weight: bold;
}

/* --- jadual gaya bevel 2000 --- */
.meja {
  border: 4px ridge #00ffff;
  background-color: #000066;
  margin: 12px auto;
  padding: 8px;
  text-align: center;
}
.meja td { padding: 6px 10px; vertical-align: top; }

.meja-tajuk {
  background-color: #ff00ff;
  color: #ffff00;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 2px;
}

/* --- butang gaya lama (outset) --- */
.tombol {
  display: inline-block;
  padding: 5px 14px;
  margin: 3px;
  border: 3px outset #c0c0c0;
  background-color: #c0c0c0;
  color: #000080;
  font-family: "Comic Sans MS", cursive;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
}
.tombol:hover { border-style: inset; background-color: #ffff00; color: #ff0000; }

/* --- lencana 88x31 (gaya geocities) --- */
.lencana {
  display: inline-block;
  width: 88px;
  height: 31px;
  line-height: 12px;
  margin: 3px;
  border: 1px solid #ffffff;
  background: #000080;
  color: #ffff00;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}
.lencana span { display: block; padding-top: 4px; }

/* --- kaunter pelawat --- */
.kaunter {
  display: inline-block;
  background: #000000;
  border: 2px inset #ffff00;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 26px;
  letter-spacing: 6px;
  padding: 3px 10px;
}

/* --- kotak nota kuning --- */
.nota {
  border: 2px solid #ffff00;
  background: #333300;
  padding: 8px;
  margin: 10px auto;
  max-width: 640px;
  text-align: left;
}
.amaran { color: #ff4444; font-weight: bold; }

.jalur {
  height: 6px;
  border: 0;
  margin: 6px 0;
  background: linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#00ff00,#00ffff,#0066ff,#cc00ff);
}

.tengah { text-align: center; }
.kecil { font-size: 11px; color: #cccccc; }
.hijau { color: #00ff00; }
.kuning { color: #ffff00; }
.merah { color: #ff4444; }

/* --- kesan jejak tetikus --- */
.jejak {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  color: #ffff00;
  z-index: 9999;
  animation: pudar 0.9s linear forwards;
}
@keyframes pudar { to { opacity: 0; transform: translateY(-14px) scale(1.6); } }