/* Petir Squad, host PS4.
   Retro-tech: layar CRT gelap, mono penuh, fosfor hijau/amber.

   Scanline 1px repeating-linear-gradient sebagai motif identitas.
   Alasan gelap: PS4 dimainkan di kamar gelap, latar terang menyilaukan
   di malam hari. Retro CRT cocok konteksnya: eksploitasi konsol, bukan
   landing page SaaS.

   Tetap tanpa CSS variable, flexbox, atau grid: WebKit PS4 5.05
   tidak punya custom properties. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #0a0e0a;
  color: #b0c4a8;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Latar: mural PETIR SQUAD. Gambarnya sudah digelapkan dan diblur
   di berkas (luminansi rata-rata 44/255), jadi teks tetap terbaca
   bahkan kalau CSS ini gagal dimuat. Lapisan di bawah hanya menambah
   ketenangan supaya baris teks tidak bertabrakan dengan detail mural. */
body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
}

/* tirai: satu warna rata, bukan gradien hiasan. Tujuannya cuma
   menurunkan kontras mural supaya teks punya ruang. */
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 10, 6, 0.34);
  pointer-events: none;
  z-index: 0;
}

/* scanline: 1px garis gelap tiap 4px, sangat tipis, motif CRT */
body:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

.sheet {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 36px 56px;
}

/* Panel: teks berdiri di atas bidang sendiri, bukan langsung di atas
   mural. Tanpa backdrop-filter, WebKit PS4 5.05 tidak punya. */
.panel {
  background-color: rgba(6, 10, 6, 0.93);
  border: 1px solid #2a3a28;
  padding: 34px 36px 38px;
}

/* masthead: nama program, bukan logo */
.masthead {
  border-bottom: 1px solid #3d5438;
  padding-bottom: 16px;
  margin-bottom: 36px;
}

.wordmark {
  font-size: 34px;
  font-weight: bold;
  color: #b8e8a6;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.kicker {
  float: right;
  font-size: 15px;
  color: #9dba93;
  padding-top: 12px;
}

/* verdict: besar, warna berubah per status */
.verdict {
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #5a8a50;
}

.detail {
  font-size: 16px;
  color: #9db894;
  margin: 0 0 36px;
  max-width: 50em;
}

/* tabel spesifikasi: tiap baris diapit garis tipis */
.spec {
  border-top: 1px solid #2a3a28;
  margin: 0 0 8px;
}

.line {
  border-bottom: 1px solid #1a2618;
  padding: 11px 0;
  font-size: 15px;
}

.k {
  display: inline-block;
  width: 28%;
  color: #86a37c;
}

.v {
  display: inline-block;
  width: 71%;
  color: #b0c4a8;
  word-break: break-all;
}

/* indikator kerja */
.track {
  height: 2px;
  background-color: #1a2618;
  margin: 28px 0 0;
  visibility: hidden;
}

.track.on { visibility: visible; }

.track i {
  display: block;
  height: 2px;
  width: 25%;
  background-color: #5a8a50;
  margin-left: -25%;
  -webkit-animation: sweep 1.4s linear infinite;
  animation: sweep 1.4s linear infinite;
}

@-webkit-keyframes sweep {
  0%   { margin-left: -25%; }
  100% { margin-left: 100%; }
}
@keyframes sweep {
  0%   { margin-left: -25%; }
  100% { margin-left: 100%; }
}

/* tombol: kotak, border tipis, mono */
.act { margin: 30px 0 0; }

.act-btn {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 14px 26px;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 16px;
  color: #b0c4a8;
  background-color: transparent;
  border: 1px solid #3d5438;
  text-decoration: none;
}

.act-btn.primary {
  background-color: #1a2618;
  color: #7ab86e;
  border-color: #5a8a50;
}

.act-btn:hover,
.act-btn:focus {
  color: #d4e8cc;
  border-color: #7ab86e;
  outline: none;
}

/* colophon */
.colophon {
  border-top: 1px solid #1a2618;
  margin: 40px 0 0;
  padding-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #93b189;
  max-width: 50em;
}

/* warna sinyal di verdict */
.s-idle  .verdict { color: #5a8a50; }
.s-wait  .verdict { color: #c4a84a; }
.s-run   .verdict { color: #c4a84a; }
.s-ok    .verdict { color: #7ab86e; }
.s-fail  .verdict { color: #c45a4a; }

/* warna sinyal di track */
.s-wait .track i,
.s-run  .track i { background-color: #c4a84a; }
.s-ok   .track i { background-color: #7ab86e; }
.s-fail .track i { background-color: #c45a4a; }

/* halaman cache */
.sheet h1 {
  font-size: 26px;
  font-weight: normal;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #c4a84a;
}

.sheet p {
  font-size: 16px;
  color: #9db894;
  margin: 0 0 14px;
  max-width: 50em;
}

code {
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 15px;
  color: #b0c4a8;
  background-color: #121a10;
  padding: 1px 4px;
}