/* proteksidiri.com — sistem visual: malam kota & cahaya lampu natrium */

:root{
  --malam:#0d1020;
  --malam-2:#151a2c;
  --malam-3:#1e2540;
  --garis:rgba(255,255,255,.09);
  --lampu:#ffb02e;
  --aman:#3ad3a6;
  --waspada:#ffb02e;
  --rawan:#ff5f66;
  --terang:#eef0f7;
  --kabut:#98a0bd;

  --lebar:1080px;
  --r:14px;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --teks:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gelap:0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--malam);
  color:var(--terang);
  font-family:var(--teks);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--lampu);outline-offset:3px;border-radius:6px}

/* ── tanda tangan: cahaya yang meredup saat waktu menipis ── */
.redup{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 12%,transparent 20%,#000 100%);
  opacity:calc(var(--gelap) * .82);
  transition:opacity .35s linear;
}

/* ── kepala ── */
.atas{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;
  background:rgba(13,16,32,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis);
}
.merek{display:flex;align-items:center;gap:10px}
.merek-lampu{
  width:11px;height:11px;border-radius:50%;
  background:var(--lampu);
  box-shadow:0 0 0 4px rgba(255,176,46,.16),0 0 22px 6px rgba(255,176,46,.42);
}
.merek-teks{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.04em}
.merek-teks em{font-style:normal;color:var(--lampu)}
.atas-tautan{font-size:13px;color:var(--kabut);font-weight:500}
.atas-tautan:hover{color:var(--terang)}

.bungkus{max-width:var(--lebar);margin:0 auto;padding:0 20px}

/* ── hero ── */
.hero{position:relative;padding:64px 20px 52px;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-220px;right:-60px;width:520px;height:620px;
  background:conic-gradient(from 190deg at 50% 0,transparent 0deg,rgba(255,176,46,.16) 22deg,transparent 46deg);
  filter:blur(14px);pointer-events:none;
}
.hero-isi{position:relative;max-width:var(--lebar);margin:0 auto}
.alis{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lampu);margin-bottom:20px;
}
.hero h1{font-size:clamp(38px,10vw,74px);max-width:14ch}
.hero h1 span{color:var(--lampu)}
.hero-sub{margin-top:22px;max-width:52ch;color:var(--kabut);font-size:17px}
.hero-aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.tombol{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--teks);font-weight:700;font-size:15px;
  background:var(--lampu);color:#22160a;
  transition:transform .15s ease,box-shadow .2s ease;
  box-shadow:0 8px 30px -10px rgba(255,176,46,.7);
}
.tombol:hover{transform:translateY(-2px)}
.tombol-hantu{background:transparent;color:var(--terang);border:1px solid var(--garis);box-shadow:none}
.tombol-hantu:hover{border-color:var(--lampu);color:var(--lampu)}

/* ── daftar skenario ── */
.bagian{padding:46px 20px 8px}
.bagian-kepala{max-width:var(--lebar);margin:0 auto 26px}
.bagian-kepala h2{font-size:clamp(26px,5vw,36px)}
.bagian-kepala p{color:var(--kabut);margin-top:10px;max-width:58ch}

.petak{
  max-width:var(--lebar);margin:0 auto;
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.kartu{
  display:flex;flex-direction:column;
  background:var(--malam-2);border:1px solid var(--garis);border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.kartu:hover{border-color:rgba(255,176,46,.5);transform:translateY(-3px)}
.kartu .adegan{width:100%;height:154px;object-fit:cover}
.kartu-isi{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.kartu h3{font-size:20px;margin-bottom:8px}
.kartu p{color:var(--kabut);font-size:14px;flex:1;margin-bottom:14px}
.meta{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kabut)}
.tingkat{padding:3px 9px;border-radius:999px;border:1px solid var(--garis)}
.tingkat.ringan{color:var(--aman);border-color:rgba(58,211,166,.4)}
.tingkat.sedang{color:var(--lampu);border-color:rgba(255,176,46,.4)}
.tingkat.berat{color:var(--rawan);border-color:rgba(255,95,102,.4)}

/* ── cara main ── */
.langkah{max-width:var(--lebar);margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.langkah li{list-style:none;padding:20px;background:var(--malam-2);border:1px solid var(--garis);border-radius:var(--r)}
.langkah b{display:block;font-family:var(--display);font-size:15px;margin-bottom:6px}
.langkah span{color:var(--kabut);font-size:14px}
.langkah-no{font-family:var(--mono);font-size:11px;color:var(--lampu);letter-spacing:.2em;display:block;margin-bottom:12px}

/* ── layar permainan ── */
.main{max-width:760px;margin:0 auto;padding:0 20px 60px}
.main-adegan{position:relative;border-radius:var(--r);overflow:hidden;margin:22px 0 24px;border:1px solid var(--garis)}
.main-adegan .adegan{width:100%;height:210px}
.main-adegan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--malam) 100%)}
.main-judul{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;font-size:clamp(22px,6vw,32px)}

.babak{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kabut);margin-bottom:12px}
.narasi{font-size:18px;line-height:1.62}

/* pengukur waktu — berkas cahaya yang memendek */
.waktu{margin:26px 0 8px;display:flex;align-items:center;gap:12px}
.waktu-batang{position:relative;flex:1;height:6px;border-radius:999px;background:var(--malam-3);overflow:hidden}
.waktu-isi{
  position:absolute;inset:0;transform-origin:left center;
  background:linear-gradient(90deg,var(--lampu),#ffd88a);
  box-shadow:0 0 18px rgba(255,176,46,.6);
}
.waktu-angka{font-family:var(--mono);font-size:13px;color:var(--lampu);min-width:34px;text-align:right}
.waktu.kritis .waktu-isi{background:linear-gradient(90deg,var(--rawan),#ff9a9e);box-shadow:0 0 18px rgba(255,95,102,.6)}
.waktu.kritis .waktu-angka{color:var(--rawan)}

.pilihan{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.opsi{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  padding:16px 18px;border-radius:12px;cursor:pointer;
  background:var(--malam-2);border:1px solid var(--garis);color:var(--terang);
  font-family:var(--teks);font-size:15.5px;line-height:1.45;
  transition:border-color .18s ease,background .18s ease,transform .12s ease;
}
.opsi:hover:not(:disabled){border-color:var(--lampu);background:var(--malam-3)}
.opsi:active:not(:disabled){transform:scale(.99)}
.opsi:disabled{cursor:default;opacity:.42}
.opsi.terpilih{opacity:1;border-color:var(--lampu);background:var(--malam-3)}
.opsi-kode{font-family:var(--mono);font-size:12px;color:var(--lampu);padding-top:3px;flex:none}

/* umpan balik */
.umpan{
  margin-top:20px;padding:18px;border-radius:12px;
  background:var(--malam-2);border:1px solid var(--garis);border-left:3px solid var(--lampu);
}
.umpan-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lampu);margin-bottom:8px}
.umpan p{margin:0;font-size:15.5px;color:#d7dbe9}
.umpan.buruk{border-left-color:var(--rawan)}
.umpan.buruk .umpan-cap{color:var(--rawan)}
.umpan.baik{border-left-color:var(--aman)}
.umpan.baik .umpan-cap{color:var(--aman)}
.lanjut{margin-top:18px}

/* hasil */
.hasil-lencana{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:1px solid currentColor;margin-bottom:18px;
}
.st-aman{color:var(--aman)} .st-waspada{color:var(--waspada)} .st-rawan{color:var(--rawan)}
.hasil h2{font-size:clamp(26px,7vw,40px);margin-bottom:16px}
.hasil-narasi{font-size:17px;color:#d7dbe9}
.skor{display:flex;align-items:baseline;gap:10px;margin:26px 0 6px}
.skor b{font-family:var(--display);font-size:44px;line-height:1}
.skor span{color:var(--kabut);font-size:14px}
.meter{height:8px;border-radius:999px;background:var(--malam-3);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--lampu),var(--aman));transition:width .8s cubic-bezier(.2,.7,.2,1)}
.pelajaran{margin:30px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.pelajaran li{padding:16px 18px;background:var(--malam-2);border:1px solid var(--garis);border-radius:12px;font-size:15px;color:#d7dbe9}
.pelajaran li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lampu);margin-right:10px;vertical-align:middle}
.hasil-aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.jejak{margin-top:34px;border-top:1px solid var(--garis);padding-top:22px}
.jejak h3{font-size:16px;margin-bottom:14px}
.jejak ol{margin:0;padding-left:20px;color:var(--kabut);font-size:14.5px}
.jejak li{margin-bottom:9px}
.jejak b{color:var(--terang);font-weight:500}

/* ── kaki ── */
.kaki{border-top:1px solid var(--garis);margin-top:60px;padding:40px 20px 50px}
.kaki-darurat{max-width:var(--lebar);margin:0 auto}
.kaki-darurat h2{font-size:14px;font-family:var(--mono);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kabut)}
.kaki-darurat ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kaki-darurat a{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--malam-2);border:1px solid var(--garis);border-radius:12px}
.kaki-darurat a:hover{border-color:var(--rawan)}
.kaki-darurat b{font-family:var(--display);font-size:20px;color:var(--rawan)}
.kaki-darurat span{font-size:13px;color:var(--kabut)}
.kaki-catatan{max-width:var(--lebar);margin:26px auto 0;color:var(--kabut);font-size:13.5px}
.kaki-hak{max-width:var(--lebar);margin:0 auto;font-size:12.5px;color:#616a8a}

@media (max-width:520px){
  .hero{padding:44px 20px 38px}
  .main-adegan .adegan{height:168px}
  .narasi{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .redup{opacity:0}
}

/* animasi masuk */
.masuk{animation:naik .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes naik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}