/* Gaya khusus halaman rangkuman review — melanjutkan token & komponen /unduh/gaya.css
   (merek, mode gelap, .tombol, .pil, .bungkus). Tidak mendefinisikan ulang satu pun warna:
   satu sumber token, dua halaman. */

/* ---------- bilah lompat ---------- */
.lompat{
  position:sticky;top:64px;z-index:9;
  background:color-mix(in srgb,var(--latar) 92%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--garis);
}
.lompat .gulir{
  display:flex;gap:8px;overflow-x:auto;padding:10px 20px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lompat .gulir::-webkit-scrollbar{display:none}
.lompat a{
  flex:none;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:600;line-height:1;
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:var(--r-pil);border:1px solid var(--garis);
  background:var(--kartu);color:var(--tinta-lembut);
}
.lompat a:hover{border-color:var(--garis-kuat);color:var(--tinta)}
.lompat a:focus-visible{outline:3px solid var(--oranye);outline-offset:2px}

/* ---------- ringkasan angka ---------- */
.angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.angka .sel{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r-m);padding:16px 18px}
.angka .n{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.angka .l{font-size:13px;color:var(--tinta-lembut);margin-top:4px}

/* ---------- daftar butir ---------- */
.butir{
  background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r-m);
  padding:18px;margin-bottom:12px;
}
.butir.tunggu{border-left:4px solid var(--awas)}
.butir.temuan{border-left:4px solid var(--oranye)}

/* Di HP, judul butir hampir selalu turun baris. Dengan `margin-left:auto` pada lencana,
   lencananya ikut terdorong ke kanan dan berdiri SENDIRIAN di satu baris — terlihat seperti
   elemen nyasar (ketahuan saat merender di lebar 390 px, bukan dari membaca kode).
   Karena itu: nomor + lencana berbagi baris pertama, judul mengambil baris penuh di bawahnya. */
.butir .kepala{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.butir .no{order:1}
.butir .pil{order:2;margin-left:auto}
/* Butir tanpa nomor (temuan tambahan & keputusan) tidak punya apa pun di kiri baris itu,
   jadi lencana yang terdorong ke kanan menggantung di ruang kosong. Rapatkan ke kiri. */
.butir .kepala > .pil:first-child{margin-left:0}
.butir h3{order:3;flex:1 1 100%}

@media (min-width:640px){
  /* Layar lebar: judul muat sebaris dengan nomor, lencana kembali ke ujung kanan. */
  .butir .kepala{align-items:flex-start}
  .butir h3{order:2;flex:1 1 auto}
  .butir .pil{order:3}
}
.butir .no{
  flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;line-height:1;
  padding:6px 9px;border-radius:8px;background:var(--kartu-3);color:var(--tinta-lembut);
  border:1px solid var(--garis);
}
.butir h3{
  margin:0;font-size:16.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  min-width:0;text-wrap:balance;
}

.butir .kutip{
  margin:12px 0 0;padding:10px 14px;
  border-left:3px solid var(--garis-kuat);
  background:var(--kartu-2);border-radius:0 8px 8px 0;
  font-size:14.5px;color:var(--tinta-lembut);font-style:italic;
  overflow-wrap:anywhere;
}
.butir .hasil{margin:12px 0 0;font-size:15px;max-inline-size:68ch}
.butir .hasil + .hasil{margin-top:8px}
.butir .jejak{margin:10px 0 0;font-size:13.5px;color:var(--tinta-samar);max-inline-size:68ch}
.butir ul{margin:10px 0 0;padding-left:20px;font-size:15px;max-inline-size:68ch}
.butir li{margin-bottom:6px}
.butir li:last-child{margin-bottom:0}
.butir .tanya{
  margin:12px 0 0;font-size:15px;font-weight:600;color:var(--awas);max-inline-size:68ch;
}

/* ---------- blok seksi ---------- */
/* `section` di gaya.css halaman unduh membawa `padding-bottom:44px` untuk ritme halaman
   pemasaran. Di halaman daftar ini ritmenya ditentukan jarak antar-butir, jadi padding itu
   dinolkan — kalau tidak, jarak antar-bagian menjadi 153 px dan bagian berikutnya terlihat
   terputus (terukur saat merender di lebar 390 px). */
.seksi{margin:0;padding:30px 0 0;scroll-margin-top:118px}
/* `section+section{border-top}` dari gaya.css dipertahankan: garis tipis itu justru memisahkan
   bagian dengan jelas saat digulir cepat di HP. Yang dinolkan hanya paddingnya. */
.seksi > h2{
  margin:0 0 4px;font-size:21px;font-weight:800;letter-spacing:-.015em;text-wrap:balance;
}
.seksi > .ket{margin:0 0 16px;color:var(--tinta-lembut);font-size:14.5px;max-inline-size:68ch}

.kunci{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:12.5px;background:var(--kartu-3);padding:2px 6px;border-radius:5px;
  overflow-wrap:anywhere;
}

/* ---------- ajakan ---------- */
.ajakan{
  background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r-l);
  padding:20px;margin:32px 0 0;box-shadow:var(--bayang-1);
}
.ajakan h2{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.ajakan p{margin:0 0 14px;color:var(--tinta-lembut);font-size:15px;max-inline-size:68ch}

@media (max-width:560px){
  .angka .n{font-size:26px}
  .butir h3{font-size:15.5px}
  .lompat{top:56px}
  .seksi{scroll-margin-top:112px}
}