/* =====================================================================
   SuperAudit, lembar gaya antarmuka
   PT Nusa Rendra Jayatama (Nusa Safety)

   Kaidah rancangan
   1. Palet biru tua dengan latar sangat muda, nyaman dipandang lama.
   2. Ukuran huruf paling kecil 13 piksel pada antarmuka, dan seluruh
      halaman laporan memakai Times New Roman berukuran paling kecil 11 pt.
   3. Tidak ada unsur bertumpuk. Seluruh tata letak memakai grid dan flex
      dengan celah tetap, bukan penempatan mutlak.
   ===================================================================== */

:root{
  /* Warna pokok, diambil langsung dari lambang superaudit.online.
     Navy #0A2C5C dan hijau kebiruan #009A8F adalah warna lambang.
     Untuk teks, hijau kebiruan diturunkan ke #0B7A6E agar mencapai
     kontras 5,22 banding 1 pada latar putih, sebab warna aslinya
     hanya mencapai 4,14 dan tidak memenuhi WCAG AA. */
  --utama:#0a2c5c;
  --utama-terang:#12457f;
  --utama-muda:#dfe8f4;
  --utama-pucat:#f1f5fb;

  --aksen:#0b7a6e;          /* hijau kebiruan untuk teks dan garis */
  --aksen-terang:#009a8f;   /* hijau kebiruan lambang, untuk bidang lebar */
  --aksen-cerah:#3fc9b6;    /* untuk di atas latar gelap */
  --aksen-muda:#e2f6f3;
  --aksen-garis:#a8e3da;

  /* permukaan */
  --latar:#f6f8fb;
  --kartu:#ffffff;
  --garis:#e2e8f0;
  --garis-tegas:#cbd6e4;

  /* teks */
  --teks:#111c2e;
  --teks-redup:#54606f;
  --teks-samar:#667085;   /* 4,97 banding 1 pada putih, memenuhi WCAG AA */

  /* status */
  --patuh:#067647;   --patuh-latar:#ecfdf3;   --patuh-garis:#abefc6;
  --minor:#b54708;   --minor-latar:#fffaeb;   --minor-garis:#fedf89;
  --mayor:#b42318;   --mayor-latar:#fef3f2;   --mayor-garis:#fecdca;
  --ofi:#175cd3;     --ofi-latar:#eff8ff;     --ofi-garis:#b2ddff;

  --radius:10px;
  --radius-kecil:7px;
  --bayang:0 1px 2px rgba(27,58,92,.06), 0 4px 14px rgba(27,58,92,.05);
  --bayang-naik:0 4px 10px rgba(27,58,92,.10), 0 12px 28px rgba(27,58,92,.08);
  --huruf:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --huruf-laporan:"Times New Roman",Times,Georgia,serif;
}

*{box-sizing:border-box}

/* Atribut hidden wajib mengalahkan display apa pun. Tanpa baris ini, unsur
   seperti .tbl yang memakai display inline-flex tetap tampil meski ditandai
   hidden, dan tombol yang seharusnya tersembunyi ikut terlihat. */
[hidden]{display:none !important}

body{
  margin:0;
  font-family:var(--huruf);
  background:var(--latar);
  color:var(--teks);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wadah{max-width:1240px;margin:0 auto;padding:0 24px}
.isi{padding:30px 24px 72px}

a{color:var(--utama-terang);text-decoration:none}
a:hover{text-decoration:underline}

h1{font-size:26px;line-height:1.3;margin:0 0 6px;color:var(--utama);letter-spacing:-.2px}
h2{font-size:19px;line-height:1.35;margin:0 0 6px;color:var(--utama)}
h3{font-size:17px;line-height:1.4;margin:0 0 6px;color:var(--utama)}

.sub{color:var(--teks-redup);margin:0 0 14px;font-size:14px}
.kecil{font-size:13px;color:var(--teks-redup)}
.catatan-kecil{font-size:13px;color:var(--teks-redup);font-style:italic;margin-top:10px;line-height:1.6}
.kosong{color:var(--teks-samar);font-style:italic;padding:18px 0;text-align:center}
.rata-tengah{text-align:center}
.potong{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===================== BILAH ATAS ===================== */
.bilah{
  background:linear-gradient(180deg,var(--utama) 0%,#07203f 100%);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 10px rgba(27,58,92,.18);
  position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--aksen-terang);
}
.bilah-isi{display:flex;align-items:center;gap:28px;min-height:62px;flex-wrap:wrap}
.merek{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:#fff;font-size:21px;font-weight:700;letter-spacing:-.4px;white-space:nowrap;
}
.merek-teks small{
  font-size:12px;font-weight:600;letter-spacing:0;
  color:#9fb4cd;margin-left:1px;vertical-align:baseline;
}
.lambang{display:block;flex-shrink:0}
.merek-lambang{display:block;flex-shrink:0}
.merek-teks span{color:var(--aksen-cerah)}
.merek:hover{text-decoration:none;opacity:.92}
.merek:focus-visible{outline:3px solid var(--aksen-cerah);outline-offset:3px;border-radius:6px}
.nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;min-height:40px;
  color:#c9d8ea;font-size:15px;padding:8px 14px;border-radius:var(--radius-kecil);
  touch-action:manipulation;
  transition:background .18s ease,color .18s ease;
}
.nav a:focus-visible{outline:3px solid var(--aksen-cerah);outline-offset:2px}
.nav a[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.pengguna{display:flex;align-items:center;gap:11px;font-size:13.5px;flex-wrap:wrap}
.pengguna .nama{
  color:#e6eefa;font-weight:600;text-decoration:none;
  padding:6px 4px;border-radius:var(--radius-kecil);
}
.pengguna .nama:hover{color:#fff;text-decoration:underline}
.pengguna .nama:focus-visible{outline:3px solid var(--aksen-cerah);outline-offset:2px}

/* ===================== KAKI ===================== */
.kaki{
  border-top:1px solid var(--garis);
  background:#fff;color:var(--teks-redup);
  font-size:13.5px;padding:22px 0;margin-top:auto;line-height:1.6;
}
.kaki-isi{display:flex;align-items:flex-start;gap:12px}
.kaki-lambang{flex-shrink:0;opacity:.5;margin-top:1px}
.versi-kaki{
  display:block;margin-top:5px;font-size:12.5px;color:var(--teks-samar);
  font-variant-numeric:tabular-nums;
}
#isi-utama:focus{outline:none}

/* ===================== KEPALA HALAMAN ===================== */
.kisi-grafik{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;align-items:start;margin-top:6px;
}
.bidang-grafik{margin:0;padding:0}
.bidang-grafik figcaption{
  font-size:13px;font-weight:700;color:var(--utama);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;
}
.grafik{display:block;width:100%;height:auto;max-width:100%}
/* Ketiga jenis grafik dibedakan agar tinggi maksimalnya dapat diatur
   sendiri sendiri, sebab bentuk jaring perlu ruang lebih tinggi. */
/* Lebar dibatasi, bukan tingginya. Membatasi tinggi membuat gambar vektor
   memberi ruang kosong di atas dan bawahnya, sebab nisbah sisinya tetap
   dipertahankan. Membatasi lebar menjaga bentuknya tanpa ruang terbuang. */
.grafik-jaring{max-width:520px;margin:0 auto}
.grafik-batang{max-width:600px}
.grafik-cincin{max-width:500px}
.ket-grafik{
  font-size:12.5px;color:var(--teks-redup);line-height:1.6;margin:8px 0 0;
}

.tabel-hadir input[type=text],.tabel-hadir select{margin-top:0;font-size:13.5px}
.lbr-ttd{width:238px}
.sel-ttd{vertical-align:top}
/*
 * Bidang goresan tanda tangan.
 *
 * Petunjuk digoreskan sebagai latar, bukan sebagai unsur tersendiri yang
 * ditempatkan secara mutlak di atas kanvas. Dengan begitu bidangnya hanya
 * memuat satu unsur, yaitu kanvas itu sendiri, sehingga tidak ada isi yang
 * dapat tertutupi bila ukurannya berubah.
 *
 * Tingginya diatur lewat nisbah sisi, bukan angka tetap, agar bidangnya ikut
 * menyesuaikan lebar layar tanpa memotong goresan yang sudah dibuat.
 */
.kotak-ttd{
  width:100%;max-width:206px;aspect-ratio:240 / 80;min-height:58px;
  border:1px dashed var(--garis-tegas);border-radius:var(--radius-kecil);
  background:#fff no-repeat center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='206' height='68'%3E%3Ctext x='103' y='38' text-anchor='middle' font-family='system-ui,sans-serif' font-size='12' fill='%238B97A6'%3EGoreskan di sini%3C/text%3E%3C/svg%3E");
  cursor:crosshair;touch-action:none;overflow:hidden;
}
.kotak-ttd.terisi{border-style:solid;border-color:var(--utama-terang);background-image:none}
.kotak-ttd:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px}
.ttd-kanvas{display:block;width:100%;height:100%}
.gambar-ttd{display:block;width:100%;height:100%;object-fit:contain}
/* Kedua tombol dibuat selebar bidang goresannya, agar keduanya sama menonjol
   dan sebutannya tidak terpenggal menjadi dua baris. */
.aksi-ttd{display:flex;flex-direction:column;gap:6px;margin-top:7px;max-width:206px}
.aksi-ttd .tbl,.aksi-ttd .unggah-ttd{width:100%;text-align:center;white-space:nowrap}
/* Ruas berkas bawaan peramban sulit diserasikan, sehingga disembunyikan dan
   labelnya yang ditampilkan sebagai tombol. Ruasnya tetap ada di markah agar
   pembaca layar dan penjelajahan papan tik tetap dapat mencapainya. */
.unggah-ttd{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:4px 11px;border:1px solid var(--garis-tegas);
  border-radius:var(--radius-kecil);background:#fff;color:var(--utama);
  font-size:12.5px;font-weight:600;cursor:pointer;
}
.unggah-ttd:hover{background:var(--utama-pucat)}
/* Ruas berkas dikecilkan sampai tak tampak, bukan ditempatkan secara mutlak.
   Penempatan mutlak pada unsur yang memuat isi berisiko menutupi isi lain
   bila ukurannya berubah. */
.unggah-ttd input{flex:0 0 0;width:0;height:0;opacity:0;overflow:hidden;border:0;padding:0;margin:0}
/* Sebutan mengisi sisa ruang lalu dipusatkan, sebab ruas berkas yang
   disembunyikan tetap menjadi anak lentur dan menggeser sebutannya. */
.unggah-ttd span{flex:1;text-align:center}
.unggah-ttd:focus-within{outline:3px solid var(--utama-terang);outline-offset:2px}
.goresan-ttd{display:block;width:100%;height:auto}

.kartu-sempit{max-width:480px;margin-left:auto;margin-right:auto}
.tbl-lebar{width:100%;justify-content:center;margin-top:6px}
.pusat{text-align:center;margin-top:16px}
.kotak-tautan{
  word-break:break-all;font-size:12.5px;margin:9px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.isian-kode{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;letter-spacing:3px;text-transform:uppercase;
}

.borang-google{display:flex;flex-direction:column;gap:2px}
.borang-google button.tbl-google{cursor:pointer;font-family:inherit}

.tbl-google{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;min-height:46px;padding:11px 16px;
  border:1px solid var(--garis-tegas);border-radius:var(--radius-kecil);
  background:#fff;color:#1F1F1F;font-size:14.5px;font-weight:600;
  text-decoration:none;transition:background .18s ease,border-color .18s ease;
}
.tbl-google:hover{background:#F7F9FC;border-color:var(--utama);text-decoration:none}
.tbl-google:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px}
.lambang-google{width:18px;height:18px;flex:0 0 18px}

.pemisah-atau{
  display:flex;align-items:center;gap:12px;margin:26px 0 16px;
  color:var(--teks-samar);font-size:12px;text-transform:uppercase;letter-spacing:.6px;
}
.pemisah-atau::before,.pemisah-atau::after{
  content:'';flex:1;height:1px;background:var(--garis);
}

.pilihan-daftar{display:flex;flex-direction:column;gap:10px}
.kartu-daftar{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 16px;border:1px solid var(--garis);border-radius:var(--radius-kecil);
  background:#fff;text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.kartu-daftar:hover{border-color:var(--utama);background:var(--utama-pucat);text-decoration:none}
.kartu-daftar:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px}
.kartu-daftar-judul{font-size:14.5px;font-weight:700;color:var(--utama)}
.kartu-daftar-sub{font-size:12.5px;color:var(--teks-redup);line-height:1.5}

.kotak-kode{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;background:var(--utama-pucat);
  border:1px solid var(--utama-terang);border-radius:var(--radius-kecil);
  margin:6px 0 10px;
}
.kode-besar{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:26px;font-weight:700;letter-spacing:4px;color:var(--utama);
}

.kisi-tiga{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.bidang-gambar{display:flex;flex-direction:column;gap:8px}
.judul-gambar{font-size:13px;font-weight:700;color:var(--utama)}
.pratinjau-gambar{
  width:100%;aspect-ratio:3 / 2;min-height:96px;
  border:1px dashed var(--garis-tegas);border-radius:var(--radius-kecil);
  background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;
  overflow:hidden;padding:8px;
}
.pratinjau-gambar.terisi{border-style:solid;border-color:var(--utama-terang)}
.pratinjau-gambar img{max-width:100%;max-height:100%;object-fit:contain}

.bilah-tab{
  display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px;
  border-bottom:1px solid var(--garis);
}
.tab-butir{
  padding:11px 17px;font-size:14px;font-weight:600;color:var(--teks-redup);
  text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;
  min-height:44px;display:inline-flex;align-items:center;
  transition:color .18s ease,border-color .18s ease;
}
.tab-butir:hover{color:var(--utama);text-decoration:none}
.tab-butir:focus-visible{outline:3px solid var(--utama-terang);outline-offset:-3px;border-radius:4px 4px 0 0}
.tab-aktif{color:var(--utama);border-bottom-color:var(--aksen)}

.daftar-masalah{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.daftar-masalah li{
  display:flex;gap:12px;align-items:flex-start;padding:11px 14px;
  border-radius:var(--radius-kecil);border-left:3px solid var(--garis);
  background:var(--utama-pucat);font-size:14px;line-height:1.6;
}
.masalah-berat{border-left-color:var(--mayor);background:var(--mayor-latar)}
.masalah-sedang{border-left-color:var(--minor);background:var(--minor-latar)}
.masalah-ringan{border-left-color:var(--garis-tegas)}

.teks-alamat{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;word-break:break-all;
  background:var(--utama-pucat);padding:3px 6px;border-radius:4px;
}

.kotak-salin{
  width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.55;background:#F8FAFC;
}
.label-tersembunyi{
  width:0;height:0;overflow:hidden;opacity:0;display:block;margin:0;
}

.lbr-waktu{width:150px}
.nilai-lama{color:var(--teks-samar);text-decoration:line-through}
.nilai-baru{color:var(--utama);font-weight:600}
.laman{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}

.baris-kembali{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--garis);
}
.tautan-kembali{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:8px 15px;border:1px solid var(--garis-tegas);border-radius:var(--radius-kecil);
  background:#fff;color:var(--utama);font-size:14px;font-weight:600;text-decoration:none;
  touch-action:manipulation;transition:background .18s ease,border-color .18s ease;
}
.tautan-kembali:hover{background:var(--utama-pucat);border-color:var(--utama-terang);text-decoration:none}
.tautan-kembali:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px}
.panah-kembali{font-size:16px;line-height:1}

.kepala-halaman{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap;margin-bottom:22px;
}
.kepala-halaman h1{margin-bottom:2px}
.kepala-halaman .sub{margin-bottom:0}

.judul-bagian{
  font-size:18px;color:var(--utama);margin:32px 0 14px;
  padding-left:13px;border-left:4px solid var(--utama);line-height:1.4;
}
.judul-bagian:first-child{margin-top:0}

/* ===================== KARTU ===================== */
.kartu{
  background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:18px;box-shadow:var(--bayang);
}
.kartu-lebar{padding:26px 28px}
.judul-kartu{
  font-size:16px;color:var(--utama);margin:0 0 14px;padding-bottom:11px;
  border-bottom:1px solid var(--garis);font-weight:700;
}
.kartu-tengah{max-width:560px;margin:0 auto}
.kartu-tengah>h1,.kartu-tengah>.sub{text-align:center}
.kartu-tengah>.tbl{display:block;width:fit-content;margin:18px auto 0}

/* ===================== TOMBOL ===================== */
.tbl{
  /* Tinggi minimum 44 piksel, ambang sasaran sentuh menurut Apple HIG dan
     Material Design. touch-action manipulation membuang jeda 300 milidetik. */
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;border:1px solid transparent;border-radius:var(--radius-kecil);
  padding:10px 18px;font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;text-align:center;line-height:1.35;text-decoration:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .12s ease;
}
.tbl:active{transform:scale(.985)}
.tbl:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px}
.tbl:hover{text-decoration:none}
.tbl-utama{background:var(--utama);color:#fff}
.tbl-utama:hover{background:var(--utama-terang);box-shadow:0 2px 8px rgba(27,58,92,.24)}
.tbl-garis{background:#fff;color:var(--utama);border-color:var(--garis-tegas)}
.tbl-garis:hover{background:var(--utama-pucat);border-color:var(--utama-terang)}

/*
 * Bidang penghapusan basis data audit.
 *
 * Dilipat dengan sengaja, bukan ditampilkan terbuka. Tindakan yang tidak dapat
 * ditarik kembali tidak sepatutnya berada sejajar dengan tindakan biasa,
 * sebab kedekatan itu sendiri sudah menaikkan kemungkinan tertekan tanpa
 * dimaksudkan.
 */
.baris-kelola td{background:var(--utama-pucat);padding:0 14px 12px}
.baris-kelola summary{
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--teks-redup);
  padding:9px 0;min-height:34px;display:flex;align-items:center;gap:8px;
}
.baris-kelola summary:hover{color:var(--utama)}
.baris-kelola summary:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px;border-radius:4px}

.kelola-bagian{
  background:#fff;border:1px solid var(--garis);border-radius:var(--radius-kecil);
  padding:12px 14px;margin-bottom:10px;
}
.kelola-judul{
  display:block;font-size:11.5px;font-weight:700;color:var(--utama);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;
}
.kelola-bahaya{border-color:var(--mayor)}
.kelola-bahaya .kelola-judul{color:var(--mayor)}

.rincian-hapus{margin-top:14px;border-top:1px solid var(--garis);padding-top:12px}
.rincian-hapus summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--teks-redup);
  padding:6px 0;min-height:34px;display:flex;align-items:center;gap:8px;
}
.rincian-hapus summary:hover{color:var(--mayor)}
.rincian-hapus summary:focus-visible{outline:3px solid var(--mayor);outline-offset:2px;border-radius:4px}
.rincian-hapus[open] summary{color:var(--mayor);margin-bottom:8px}

.tbl-bahaya{background:var(--mayor);color:#fff}
.tbl-bahaya:hover{background:#96190f}
.tbl-mati,.tbl:disabled,.tbl[aria-disabled="true"]{
  background:#eef1f5;color:var(--teks-samar);cursor:not-allowed;
  border-color:var(--garis);opacity:.5;box-shadow:none;transform:none;
}
.tbl-mati:hover,.tbl:disabled:hover{background:#eef1f5}
.tbl-kecil{min-height:40px;padding:8px 14px;font-size:14px}
/* Tetap 44 piksel meski tampak kecil, dengan menambah bidang sentuh tak terlihat */
.tbl-mini{min-height:36px;padding:7px 12px;font-size:13.5px;position:relative}
.tbl-penuh{width:100%}
.grup-ekspor{display:flex;gap:9px;flex-wrap:wrap}
.sebaris{display:inline-block;margin:0}
.aksi-borang{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px;align-items:center}
.aksi-sel{display:flex;gap:7px;flex-wrap:wrap}

/* ===================== LENCANA DAN TANDA ===================== */
.lencana{
  display:inline-block;padding:3px 11px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1.7;
  background:var(--utama-muda);color:var(--utama);white-space:nowrap;
}
.lencana-auditee{background:var(--ofi-latar);color:var(--ofi)}
.lencana-auditor{background:var(--patuh-latar);color:var(--patuh)}
.lencana-admin{background:var(--minor-latar);color:var(--minor)}
.lencana-hijau{background:var(--patuh-latar);color:var(--patuh)}
.lencana-kuning{background:var(--minor-latar);color:var(--minor)}
.lencana-status{background:var(--utama-muda);color:var(--utama)}
.lencana-kode{background:var(--utama);color:#fff;letter-spacing:.4px}
.lencana-aksi{background:var(--utama-pucat);color:var(--utama-terang)}

/* penanda kategori temuan */
.tanda{
  display:inline-block;padding:3px 11px;border-radius:var(--radius-kecil);
  font-size:12.5px;font-weight:700;line-height:1.7;white-space:nowrap;border:1px solid transparent;
}
.tanda.nilai-mayor{background:var(--mayor-latar);color:var(--mayor);border-color:var(--mayor-garis)}
.tanda.nilai-minor{background:var(--minor-latar);color:var(--minor);border-color:var(--minor-garis)}
.tanda.nilai-ofi{background:var(--ofi-latar);color:var(--ofi);border-color:var(--ofi-garis)}
.tanda.nilai-patuh{background:var(--patuh-latar);color:var(--patuh);border-color:var(--patuh-garis)}
/* Observasi berada di antara ketidaksesuaian minor dan peluang perbaikan,
   sehingga warnanya pun dibuat di antara keduanya. */
.tanda.nilai-observasi{background:#FEFAE8;color:#8A6D0B;border-color:#EBD98A}
.tanda.nilai-netral{background:#F2F4F7;color:var(--teks-redup);border-color:var(--garis)}

.nilai-mayor{color:var(--mayor);font-weight:700}
.nilai-minor{color:var(--minor);font-weight:700}
.nilai-observasi{color:#8A6D0B;font-weight:700}
.nilai-netral{color:var(--teks-redup);font-weight:700}
.nilai-ofi{color:var(--ofi);font-weight:700}
.nilai-patuh{color:var(--patuh);font-weight:700}
.merah{color:var(--mayor)}
.angka-bahaya{color:var(--mayor)}
.tautan-kode{font-weight:700;color:var(--utama)}

/* ===================== KARTU ANGKA ===================== */
.kisi-kpi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px;margin-bottom:20px;
}
.kpi{
  background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--bayang);
  display:flex;flex-direction:column;gap:5px;min-width:0;
}
.kpi-utama{background:linear-gradient(180deg,#fff 0%,var(--utama-pucat) 100%);border-color:var(--garis-tegas)}
.kpi-label{
  font-size:12.5px;color:var(--teks-redup);text-transform:uppercase;
  letter-spacing:.5px;font-weight:700;line-height:1.4;
}
.kpi-angka{font-size:30px;font-weight:700;color:var(--utama);line-height:1.15;letter-spacing:-.5px}
.kpi-angka small{font-size:15px;font-weight:600;color:var(--teks-samar)}

/* ===================== TABEL ===================== */
/* Wadah gulir. Tabel berkolom banyak tidak muat pada layar sempit, sehingga
   digulir di dalam wadahnya sendiri, bukan menggeser seluruh halaman. */
.gulir{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.gulir>.tabel{min-width:640px}
.gulir>.tabel-rapat{min-width:520px}

.tabel{width:100%;border-collapse:collapse;font-size:14.5px}
.tabel th{
  background:var(--utama);color:#fff;text-align:left;font-weight:700;
  padding:11px 12px;font-size:13.5px;letter-spacing:.2px;vertical-align:middle;
}
.tabel th:first-child{border-top-left-radius:var(--radius-kecil)}
.tabel th:last-child{border-top-right-radius:var(--radius-kecil)}
.tabel td{padding:10px 12px;border-bottom:1px solid var(--garis);vertical-align:top;line-height:1.55}
.tabel tbody tr:nth-child(even){background:var(--utama-pucat)}
.tabel tbody tr:hover{background:var(--utama-muda)}
.tabel tbody tr:last-child td{border-bottom:none}
.tabel-rapat td,.tabel-rapat th{padding:8px 10px;font-size:13.5px}
.tabel-garis td{border-bottom:1px solid var(--garis)}
.tabel-kecil{font-size:13.5px}

.lbr-no{width:52px}
.lbr-kode{width:104px}
.lbr-klausul{width:82px}
.lbr-klausul-lebar{width:150px}
.lbr-angka{width:74px}
.lbr-status{width:150px}

.dua-tabel{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.dua-tabel .kartu{margin-bottom:0}

/* ===================== DAFTAR RINCIAN ===================== */
.rincian{display:grid;grid-template-columns:220px 1fr;gap:9px 20px;margin:0}
.rincian dt{font-weight:700;color:var(--teks-redup);font-size:14px}
.rincian dd{margin:0;font-size:14.5px;word-break:break-word}
.rincian-besar{grid-template-columns:250px 1fr}

/* ===================== PERINGATAN ===================== */
.peringatan{
  border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;
  font-size:14.5px;border:1px solid transparent;line-height:1.6;
}
.peringatan-info{background:var(--ofi-latar);border-color:var(--ofi-garis);color:#0b4a9c}
.peringatan-baik{background:var(--patuh-latar);border-color:var(--patuh-garis);color:var(--patuh)}
.peringatan-galat{background:var(--mayor-latar);border-color:var(--mayor-garis);color:var(--mayor)}
.peringatan-penting{background:var(--minor-latar);border-color:var(--minor-garis);color:var(--minor)}
.peringatan-rahasia{
  background:var(--utama-muda);border-color:var(--garis-tegas);color:var(--utama);font-weight:600;
}

.kotak-rekomendasi{
  border-radius:var(--radius);padding:16px 18px;margin-top:14px;
  border-left:4px solid var(--garis-tegas);background:var(--utama-pucat);font-size:14.5px;line-height:1.6;
}
.kotak-rekomendasi p{margin:6px 0 0}
.kotak-rekomendasi .status-besar{
  display:block;font-size:16px;font-weight:800;letter-spacing:.3px;line-height:1.4;
}
.kotak-rekomendasi.baik{background:var(--patuh-latar);border-left-color:var(--patuh);color:#04502f}
.kotak-rekomendasi.baik .status-besar{color:var(--patuh)}
.kotak-rekomendasi.waspada{background:var(--minor-latar);border-left-color:var(--minor);color:#7a3006}
.kotak-rekomendasi.waspada .status-besar{color:var(--minor)}
.kotak-rekomendasi.bahaya{background:var(--mayor-latar);border-left-color:var(--mayor);color:#7d1610}
.kotak-rekomendasi.bahaya .status-besar{color:var(--mayor)}

.kotak-bantuan{
  background:var(--utama-pucat);border:1px solid var(--garis);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:18px;font-size:14.5px;line-height:1.6;
}

/* ===================== BORANG ===================== */
.borang .tanya{margin-bottom:22px}
label{display:block;margin-bottom:15px;font-size:14px;font-weight:600;color:var(--teks)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],select,textarea{
  /* Ukuran 16 piksel penting. Di bawah itu, peramban iOS memperbesar halaman
     secara paksa saat ruas disentuh, dan tata letak jadi berantakan. */
  width:100%;min-height:44px;padding:11px 13px;margin-top:6px;
  border:1px solid var(--garis-tegas);border-radius:var(--radius-kecil);
  font-family:inherit;font-size:16px;font-weight:400;color:var(--teks);
  background:#fff;touch-action:manipulation;
  transition:border-color .18s ease,box-shadow .18s ease;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--utama-terang);box-shadow:0 0 0 3px rgba(36,80,124,.18);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--utama-terang);box-shadow:0 0 0 3px rgba(36,80,124,.18);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--mayor);box-shadow:0 0 0 3px rgba(180,35,24,.14);
}
input:disabled,select:disabled,textarea:disabled{
  background:#f4f6f9;color:var(--teks-samar);opacity:.6;cursor:not-allowed;
}
input:read-only{background:var(--utama-pucat)}
textarea{resize:vertical;line-height:1.6;min-height:82px}
input[type=file]{
  width:100%;padding:9px;margin-top:6px;border:1px dashed var(--garis-tegas);
  border-radius:var(--radius-kecil);font-size:14px;background:var(--utama-pucat);
}
.centang{display:flex;align-items:flex-start;gap:11px;font-weight:400;line-height:1.6}
.centang input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex-shrink:0;accent-color:var(--utama);cursor:pointer}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.tiga-kolom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.pilihan-standar{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:11px;margin-top:8px}
.opsi{
  display:flex;align-items:flex-start;gap:11px;padding:13px 15px;min-height:44px;
  touch-action:manipulation;
  border:1px solid var(--garis-tegas);border-radius:var(--radius-kecil);
  cursor:pointer;background:#fff;font-weight:400;margin:0;
  transition:border-color .15s ease,background .15s ease;
}
.opsi:hover{border-color:var(--utama-terang);background:var(--utama-pucat)}
.opsi:has(input:focus-visible){outline:3px solid var(--utama-terang);outline-offset:2px}
.opsi:has(input:checked){border-color:var(--utama);background:var(--utama-muda)}
.opsi input{width:20px;height:20px;min-height:0;margin:1px 0 0;flex-shrink:0;accent-color:var(--utama);cursor:pointer}
.opsi.nonaktif{opacity:.6;cursor:not-allowed;background:#f4f6f9}
.opsi span{line-height:1.55}
.opsi em{color:var(--teks-samar);font-size:13px;font-style:normal}

/* ===================== MASUK ===================== */
.masuk-bungkus{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 210px);padding:20px 0}
.kartu-masuk{
  background:#fff;border:1px solid var(--garis);border-radius:14px;
  padding:38px 36px;width:100%;max-width:440px;box-shadow:var(--bayang-naik);
  border-top:4px solid var(--aksen-terang);
}
.logo-masuk{
  display:block;width:auto;max-width:270px;height:auto;
  margin:0 auto 20px;
}
.judul-masuk{font-size:25px;color:var(--utama);margin:0 0 6px;text-align:center;letter-spacing:-.2px}
/* kartu penyiapan memuat tabel keadaan, sehingga perlu lebih lebar */
.kartu-siapkan{max-width:540px}
.kartu-siapkan .tabel{margin-bottom:18px}
.kartu-siapkan .kotak-bantuan{margin:18px 0}
.kartu-siapkan code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--utama-muda);color:var(--utama);padding:1px 6px;border-radius:4px;
}
.sub-masuk{color:var(--teks-redup);text-align:center;margin:0 0 26px;font-size:14px;line-height:1.6}

/* ===================== LANGKAH ===================== */
.langkah{display:flex;list-style:none;padding:0;margin:0 0 26px;gap:8px;flex-wrap:wrap}
.langkah li{
  flex:1;min-width:132px;display:flex;align-items:center;gap:9px;
  padding:9px 14px;background:#fff;border:1px solid var(--garis);
  border-radius:999px;font-size:13.5px;color:var(--teks-redup);line-height:1.4;
}
.langkah li .no{
  width:23px;height:23px;border-radius:50%;background:var(--garis);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;flex-shrink:0;
}
.langkah li .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.langkah li.aktif{background:var(--utama);border-color:var(--utama);color:#fff;font-weight:600}
.langkah li.aktif .no{background:#fff;color:var(--utama)}
.langkah li.selesai{background:var(--patuh-latar);border-color:var(--patuh-garis);color:var(--patuh);font-weight:600}
.langkah li.selesai .no{background:var(--patuh);color:#fff}

/* ===================== PERCAKAPAN ===================== */
/* Gelembung pertanyaan dari sistem kepada auditee. Selalu rata kiri, dengan
   ekor di sudut kiri bawah, menyerupai lawan bicara pada percakapan. */
.gelembung{
  background:var(--utama);color:#fff;border-radius:14px 14px 14px 4px;
  padding:13px 18px;margin-bottom:14px;font-size:15px;line-height:1.65;
  display:inline-block;max-width:100%;
}
.gelembung-auditor{background:var(--utama-terang)}

/* ===================== WAWANCARA ===================== */
.wawancara-atas{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;margin-bottom:20px;
}
/* Navigasi diletakkan pada kolom kanan. Auditee membaca pertanyaan dari kiri,
   sehingga daftar loncatan lebih tepat berada di sisi seberang arah baca,
   bukan menyela antara tepi layar dan isi. */
.wawancara-tata{display:grid;grid-template-columns:1fr 292px;gap:22px;align-items:start}
/* kolom isi. min-width nol mencegah isi panjang melebarkan kisi dan menimpa bilah samping */
.utama{min-width:0}
.sisi{
  background:#fff;border:1px solid var(--garis);border-radius:var(--radius);
  padding:18px;position:sticky;top:82px;box-shadow:var(--bayang);
}
.sisi-lekat{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
.sisi-catatan{font-size:12.5px;color:var(--teks-redup);line-height:1.55;margin:0 0 14px}
.sisi-judul-kecil{
  font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--teks-redup);
  font-weight:700;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--garis);
}
.sisi-pertanyaan{margin-top:4px}
.kp-angka{font-variant-numeric:tabular-nums;font-weight:700}
.ringkas-kemajuan{margin-bottom:14px}
.ringkas-kemajuan .kemajuan-baris{margin-bottom:6px}
.ringkas-kemajuan .kemajuan-teks{font-size:12.5px}
.ringkas-kemajuan .kemajuan-angka{font-size:12.5px}

/* penanda keadaan tiap kelompok */
.daftar-kelompok li.kel-kosong .kk{color:var(--teks-samar)}
.daftar-kelompok li.kel-sebagian .kk{color:var(--minor)}
.daftar-kelompok li.kel-lengkap .kk{color:var(--patuh)}
.daftar-kelompok li.kel-lengkap a{background:var(--patuh-latar)}
.daftar-kelompok li.kel-lengkap .kp{color:var(--patuh);font-weight:600}

/* daftar loncat antar pertanyaan pada kelompok yang sedang dibuka */
.daftar-lompat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.daftar-lompat a{
  display:flex;align-items:flex-start;gap:9px;min-height:36px;padding:7px 9px;
  border-radius:var(--radius-kecil);color:var(--teks-redup);font-size:12.5px;
  line-height:1.45;text-decoration:none;
}
.daftar-lompat a:hover{background:var(--utama-pucat);color:var(--utama)}
.daftar-lompat a:focus-visible{outline:3px solid var(--utama-terang);outline-offset:-2px}
.daftar-lompat .lompat-no{
  flex-shrink:0;width:19px;height:19px;border-radius:50%;margin-top:1px;gap:0;
  background:var(--utama-muda);color:var(--utama);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.daftar-lompat a.terisi .lompat-no{background:var(--patuh);color:#fff}
.daftar-lompat .lompat-teks{min-width:0}

/* sorotan sesaat pada pertanyaan yang dituju */
.kartu-tanya.disorot{
  box-shadow:0 0 0 3px var(--aksen-terang);
  transition:box-shadow .25s ease;
}

/* keadaan penyimpanan otomatis */

.status-simpan.proses{color:var(--teks-redup)}
.status-simpan.proses::before{content:"\2022 "}
.status-simpan.aman{color:var(--patuh);font-weight:600}
.status-simpan.aman::before{content:"\2713 "}
.status-simpan.perlu{color:var(--minor);font-weight:600}
.status-simpan.gagal{color:var(--mayor);font-weight:600}
.sisi-judul{
  font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--teks-redup);
  font-weight:700;margin-bottom:13px;
}
.daftar-kelompok{list-style:none;padding:0;margin:0 0 14px;max-height:58vh;overflow-y:auto}
.daftar-kelompok li a{
  display:block;padding:9px 12px;border-radius:var(--radius-kecil);
  color:var(--teks);font-size:13.5px;border-left:3px solid transparent;line-height:1.45;
  transition:background .15s ease;
}
.daftar-kelompok li a:hover{background:var(--utama-pucat);text-decoration:none}
.daftar-kelompok li.aktif a{
  background:var(--utama-muda);border-left-color:var(--utama);
  color:var(--utama);font-weight:600;
}
.daftar-kelompok .kk{
  display:block;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--utama-terang);
}
.daftar-kelompok li.aktif .kk{color:var(--utama)}
.daftar-kelompok .kj{display:block;line-height:1.45;margin:1px 0}
.daftar-kelompok .kp{font-size:12.5px;color:var(--teks-samar)}

.pewaktu{
  display:flex;align-items:center;gap:11px;padding:11px 19px;border-radius:var(--radius);
  background:var(--utama);color:#fff;box-shadow:var(--bayang);
}
.pewaktu-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.85;font-weight:600}
.pewaktu-angka{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.pewaktu.waspada{background:var(--minor)}
.pewaktu.bahaya{background:var(--mayor);animation:denyut 1.6s ease-in-out infinite}
@keyframes denyut{0%,100%{opacity:1}50%{opacity:.82}}

.kepala-kelompok{
  background:var(--utama-muda);border-radius:var(--radius);padding:17px 20px;margin-bottom:18px;
}
.kepala-kelompok h2{margin:0 0 5px}
.klausul{font-size:13.5px;color:var(--utama-terang);font-weight:600}
.klausul-kecil{font-size:13px;color:var(--teks-redup)}
.klausul-baris{font-size:13.5px;color:var(--teks-redup);margin:5px 0 0}
.daftar-pasal{margin:9px 0 0;padding-left:20px;font-size:14px;color:var(--teks-redup);line-height:1.7}
.daftar-poin{margin:8px 0 0;padding-left:20px;font-size:14.5px;line-height:1.75}

.kartu-tanya{
  background:#fff;border:1px solid var(--garis);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--bayang);
}
.tanya-kepala{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.tanya-kepala>div{flex:1;min-width:0}
.tanya-no{
  width:29px;height:29px;border-radius:50%;background:var(--utama);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;flex-shrink:0;
}
.tanya{font-size:15.5px;line-height:1.65;margin:0;font-weight:600}
.hints{
  background:var(--minor-latar);border:1px solid var(--minor-garis);border-radius:var(--radius-kecil);
  padding:13px 17px;margin-bottom:16px;
}
.petunjuk{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--minor);
  font-weight:700;margin-bottom:7px;
}
.hints ul{margin:0;padding-left:19px;font-size:14px;color:#7a3006;line-height:1.7}
.borang-jawab textarea{margin-bottom:6px}
.bagian-bukti{border-top:1px solid var(--garis);margin-top:16px;padding-top:16px}
.bukti-kepala{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:11px;flex-wrap:wrap;
}
.hitung{font-size:13px;color:var(--teks-redup);font-weight:600}
.daftar-bukti{list-style:none;padding:0;margin:0 0 13px;display:flex;flex-direction:column;gap:7px}
.daftar-bukti li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 13px;background:var(--utama-pucat);border:1px solid var(--garis);
  border-radius:var(--radius-kecil);font-size:13.5px;line-height:1.5;
}
.daftar-bukti .nb{flex:1;min-width:0;word-break:break-word}
.daftar-bukti .mb{color:var(--teks-samar);font-size:12.5px;white-space:nowrap}
.borang-bukti{background:var(--utama-pucat);border:1px solid var(--garis);border-radius:var(--radius-kecil);padding:15px 17px}
.baris-unggah{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}


/*
 * Panel tabrakan pengisian.
 *
 * Kedua jawaban ditampilkan berdampingan agar dapat dibandingkan sekaligus,
 * bukan bergantian. Perbandingan yang menuntut menggulir bolak balik membuat
 * orang memilih tergesa gesa, dan pilihan tergesa gesa di sini berarti
 * kehilangan pekerjaan orang lain.
 */
.panel-tabrakan{
  margin-top:12px;padding:14px 16px;
  border:1px solid var(--minor);border-left:3px solid var(--minor);
  border-radius:var(--radius-kecil);background:var(--minor-latar);
}
.tabrakan-judul{
  margin:0 0 11px;font-size:13.5px;font-weight:600;color:var(--minor);line-height:1.55;
}
.tabrakan-banding{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.tabrakan-sisi{
  background:#fff;border:1px solid var(--garis);border-radius:var(--radius-kecil);
  padding:10px 12px;display:flex;flex-direction:column;gap:6px;
}
.tabrakan-sisi-judul{
  font-size:11.5px;font-weight:700;color:var(--teks-redup);
  text-transform:uppercase;letter-spacing:.4px;
}
.tabrakan-sisi-isi{
  font-size:13px;line-height:1.6;color:var(--teks);
  white-space:pre-wrap;word-break:break-word;max-height:180px;overflow-y:auto;
}
.tabrakan-aksi{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}

.jejak-pengisi{
  margin:0 0 8px;font-size:12px;color:var(--teks-samar);font-style:italic;
}

.baris-tb{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:11px}
.daftar-berkas{list-style:none;padding:0;margin:9px 0 0;font-size:13.5px;color:var(--teks-redup);line-height:1.7}
.navigasi-kelompok{display:flex;justify-content:space-between;gap:11px;margin-top:24px;flex-wrap:wrap}
.kirim-akhir{margin-top:22px;text-align:center}
.pemicu-tb{background:none;border:none;color:var(--utama-terang);font-size:13.5px;cursor:pointer;padding:0;font-family:inherit;font-weight:600}
.alasan-tb{margin-top:11px}
.status-simpan{font-size:13px;color:var(--patuh);font-weight:600}
.baris-simpan{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ===================== ANALISIS DAN VERIFIKASI ===================== */
.kartu-analisis{padding:0;overflow:hidden}
.analisis-kepala{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:18px 22px;background:var(--utama-muda);border-bottom:1px solid var(--garis);flex-wrap:wrap;
}
.analisis-judul{min-width:0;flex:1}
.analisis-judul h3{margin:9px 0 0}
.analisis-status{display:flex;gap:9px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.dua-panel{display:grid;grid-template-columns:1.55fr 1fr;gap:0}
.panel{padding:20px 22px;min-width:0}
.panel-ai{border-right:1px solid var(--garis)}
.panel-verifikasi{background:var(--utama-pucat)}
.panel-judul{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--teks-redup);
  font-weight:700;margin-bottom:13px;
}
.panel p{margin:0 0 11px;font-size:14.5px;line-height:1.7}
.baris-nilai{
  display:flex;gap:20px;flex-wrap:wrap;padding:11px 14px;background:var(--utama-pucat);
  border:1px solid var(--garis);border-radius:var(--radius-kecil);margin-bottom:14px;font-size:14px;
}
.keterbatasan{color:var(--minor);background:var(--minor-latar);border:1px solid var(--minor-garis);
  border-radius:var(--radius-kecil);padding:11px 14px}
.bukti-lampiran{border-top:1px solid var(--garis);padding:15px 22px;background:#fff}
.bukti-lampiran summary{
  cursor:pointer;font-size:14px;font-weight:600;color:var(--utama-terang);
  padding:5px 0;list-style-position:inside;
}
.bukti-lampiran summary:hover{color:var(--utama)}
.bukti-lampiran table{margin-top:13px}

/* ===================== LAIN LAIN ===================== */
.kisi-kelompok{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:14px}
.kisi-kelompok .kotak-kelompok{
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:15px 17px;background:var(--utama-pucat);
}
.kisi-kelompok .kotak-kelompok .kode{
  display:inline-block;padding:2px 10px;border-radius:999px;margin-bottom:8px;
  background:var(--utama);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.4px;
}
.kisi-kelompok .kotak-kelompok .judul{
  font-weight:700;font-size:15px;color:var(--utama);margin-bottom:4px;line-height:1.45;
}
.kisi-kelompok .kotak-kelompok .klausul{font-size:13px;color:var(--teks-redup);margin-bottom:9px}
.kisi-kelompok .kotak-kelompok .dokumen{
  margin:0;padding:0 0 0 19px;background:none;border:none;border-radius:0;
  font-size:13.5px;color:var(--teks);line-height:1.7;
}
/* kotak dokumen yang berdiri sendiri, di luar kisi kelompok */
.dokumen{
  background:var(--utama-pucat);border:1px solid var(--garis);border-radius:var(--radius);
  padding:20px 22px;margin:16px 0;
}
.kotak-nda{
  background:var(--utama-pucat);border:1px solid var(--garis-tegas);border-radius:var(--radius);
  padding:22px;margin:18px 0;
}
.baris-nda{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:16px}
/* penanda keberhasilan. Berbentuk pil dengan lebar mengikuti isi, sehingga
   teks sepanjang apa pun tidak meluap keluar bidangnya. */
.tanda-selesai{
  display:flex;width:fit-content;align-items:center;justify-content:center;
  padding:9px 24px;border-radius:999px;margin:0 auto 18px;
  background:var(--patuh-latar);color:var(--patuh);border:2px solid var(--patuh-garis);
  font-size:17px;font-weight:700;letter-spacing:.3px;line-height:1.4;
}
.judul-galat{font-size:56px;color:var(--utama);margin:0;line-height:1.1;letter-spacing:-1px}
.teks-galat{color:var(--teks-redup);margin:12px 0 22px;font-size:15px;line-height:1.6}
.aksi-galat{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.kode-acuan{
  font-size:13.5px;color:var(--teks-redup);margin:0 0 22px;
  padding:11px 16px;background:var(--utama-pucat);border:1px solid var(--garis);
  border-radius:var(--radius-kecil);line-height:1.6;
}
.kode-acuan strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;color:var(--utama)}

/* ===================== HALAMAN LAPORAN ===================== */
/* Seluruh isi laporan memakai Times New Roman, ukuran paling kecil 11 pt. */
.laporan{font-family:var(--huruf-laporan);font-size:15.5px;line-height:1.7}
.laporan h2,.laporan h3{font-family:var(--huruf-laporan)}
.laporan .tabel{font-family:var(--huruf-laporan);font-size:15px}
.laporan .tabel th{font-family:var(--huruf-laporan);font-size:14.5px}
.laporan .tabel-rapat td,.laporan .tabel-rapat th{font-size:14.5px}
.laporan .kecil,.laporan .catatan-kecil,.laporan .sub{font-size:14px}
.laporan .lencana,.laporan .tanda{font-family:var(--huruf-laporan);font-size:13.5px}
.laporan .kpi-label{font-family:var(--huruf);font-size:12.5px}
.laporan .kpi-angka{font-family:var(--huruf-laporan)}
.laporan .panel p{font-size:15px}
.laporan label,.laporan input,.laporan select,.laporan textarea,.laporan .tbl{font-family:var(--huruf)}


/* ===================== HORMATI PERMINTAAN KURANGI GERAK =====================
   Sebagian orang mengalami pusing atau mual karena gerakan pada antarmuka.
   Sistem operasi menyediakan setelan untuk itu, dan antarmuka wajib menurutinya. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .pewaktu.bahaya{animation:none;border:2px solid #fff}
}

/* ===================== TAUTAN LEWATI KE ISI =====================
   Pengguna papan ketik dan pembaca layar dapat melompati bilah navigasi
   langsung ke isi halaman. Tersembunyi sampai menerima fokus. */
.lewati{
  position:static;display:block;width:fit-content;
  margin:0;padding:0;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.lewati:focus{
  height:auto;overflow:visible;clip-path:none;
  margin:8px;padding:10px 18px;border-radius:var(--radius-kecil);
  background:var(--utama);color:#fff;font-weight:600;
  outline:3px solid var(--aksen-cerah);outline-offset:2px;
}

/* ===================== KEADAAN MEMUAT =====================
   Tombol yang sedang menunggu peladen wajib menampilkan tanda, agar
   pengguna tidak menekannya berulang kali. */
.tbl[data-memuat="true"]{
  pointer-events:none;opacity:.75;position:relative;color:transparent;
}
.tbl[data-memuat="true"]::after{
  /* inset nol dengan margin auto memusatkan secara tegas. Tanpa itu,
     letaknya bergantung pada posisi statis dan dapat bergeser. */
  content:"";position:absolute;inset:0;margin:auto;
  width:17px;height:17px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:putar .7s linear infinite;
  color:#fff;
}
.tbl-garis[data-memuat="true"]::after{color:var(--utama)}
@keyframes putar{to{transform:rotate(360deg)}}

/* ===================== KEMAJUAN ANALISIS ===================== */
.kemajuan{margin-bottom:20px}
.kemajuan-baris{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;margin-bottom:9px;flex-wrap:wrap;
}
.kemajuan-teks{font-size:15px;font-weight:600;color:var(--utama);min-width:0}
.kemajuan-angka{font-size:14px;color:var(--teks-redup);font-variant-numeric:tabular-nums}
.bilah-kemajuan{
  height:10px;border-radius:999px;background:var(--utama-muda);
  overflow:hidden;border:1px solid var(--garis);
}
/* Nama kelas ini sengaja diberi awalan kemajuan. Nama pendek seperti
   bilah-isi bertabrakan dengan wadah bilah atas, dan tabrakan itu membuat
   bilah atas ikut mewarisi gradasi serta tinggi milik bilah kemajuan. */
.kemajuan-laju{
  height:100%;background:linear-gradient(90deg,var(--utama) 0%,var(--aksen-terang) 100%);
  transition:width .35s ease;
}

.daftar-langkah{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.daftar-langkah li{
  display:flex;align-items:flex-start;gap:13px;padding:13px 15px;
  border:1px solid var(--garis);border-radius:var(--radius-kecil);
  background:#fff;transition:background .18s ease,border-color .18s ease;
}
.daftar-langkah .tanda-langkah{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;margin-top:3px;
  border:2px solid var(--garis-tegas);background:#fff;
}
.daftar-langkah .isi-langkah{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.daftar-langkah .kode-langkah{
  font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--utama-terang);
}
.daftar-langkah .judul-langkah{font-size:15px;font-weight:600;line-height:1.45}
.daftar-langkah .status-langkah{
  font-size:13px;color:var(--teks-redup);white-space:nowrap;flex-shrink:0;margin-top:2px;
}
.daftar-langkah li.berjalan{background:var(--utama-pucat);border-color:var(--utama-terang)}
.daftar-langkah li.berjalan .tanda-langkah{
  border-color:var(--utama);border-top-color:transparent;animation:putar .8s linear infinite;
}
.daftar-langkah li.berjalan .status-langkah{color:var(--utama);font-weight:600}
.daftar-langkah li.selesai{background:var(--patuh-latar);border-color:var(--patuh-garis)}
.daftar-langkah li.selesai .tanda-langkah{
  border-color:var(--patuh);background:var(--patuh);position:relative;
}
.daftar-langkah li.selesai .tanda-langkah::after{
  content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.daftar-langkah li.selesai .status-langkah{color:var(--patuh);font-weight:600}


/* ===================== PERENCANAAN DAN TINDAK LANJUT ===================== */
.kisi-dua{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sisip-judul{
  font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--teks-redup);
  font-weight:700;margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--garis);
}
.baris-status{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--garis);margin-bottom:16px;
}
.tabel-rapat input{margin-top:0}

.kotak-pilihan{
  border:1px solid var(--garis);border-radius:var(--radius-kecil);
  padding:14px 16px;margin:16px 0;
}
.kotak-pilihan legend{
  font-size:13px;font-weight:700;color:var(--utama);padding:0 6px;
}
.pilihan-rapat{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:6px}

.daftar-bahasan{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.daftar-bahasan li{
  padding:13px 15px;border:1px solid var(--garis);border-radius:var(--radius-kecil);
  background:#fff;
}
.daftar-bahasan li:has(input:checked){background:var(--patuh-latar);border-color:var(--patuh-garis)}
.bahasan-kepala{align-items:flex-start;margin-bottom:9px}
.bahasan-ket{
  display:block;font-size:12.5px;color:var(--teks-redup);
  font-style:italic;margin-top:3px;line-height:1.55;
}

.kartu-temuan{
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;background:#fff;
}
.temuan-kepala{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:12px;
}
.temuan-nomor{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;color:var(--utama);margin-right:9px;
}
.temuan-uraian{
  margin:0 0 14px;padding:12px 15px;background:var(--utama-pucat);
  border-left:3px solid var(--utama);border-radius:0 var(--radius-kecil) var(--radius-kecil) 0;
  line-height:1.65;
}

.daftar-riwayat{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:9px}
.daftar-riwayat li{display:flex;gap:14px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.riwayat-waktu{
  flex-shrink:0;width:132px;color:var(--teks-samar);
  font-variant-numeric:tabular-nums;font-size:12.5px;padding-top:1px;
}
.riwayat-isi{min-width:0}

.lipat{
  border:1px solid var(--garis);border-radius:var(--radius-kecil);
  padding:10px 14px;margin-top:12px;background:#fff;
}
.lipat summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--utama);
  min-height:24px;display:flex;align-items:center;gap:6px;
}
.lipat summary:focus-visible{outline:3px solid var(--utama-terang);outline-offset:2px;border-radius:4px}
.lipat[open]{background:var(--utama-pucat)}
.lipat[open] summary{margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--garis)}

.lipat-aksi{margin-top:7px}
.lipat-aksi summary{font-size:13.5px;color:var(--utama);cursor:pointer;font-weight:600}
.aksi-lipat{display:flex;flex-direction:column;gap:5px;padding:9px 0 3px}
.aksi-lipat a{font-size:13.5px;padding:5px 0;display:block}

/* ===================== LAYAR SEMPIT ===================== */
@media (max-width:1024px){
  .kisi-dua{grid-template-columns:1fr}
  .kisi-tiga{grid-template-columns:1fr}
  .kode-besar{font-size:22px;letter-spacing:3px}
  .bilah-tab{overflow-x:auto;flex-wrap:nowrap}
  .tab-butir{white-space:nowrap}
  .pilihan-rapat{grid-template-columns:1fr}
  .daftar-riwayat li{flex-direction:column;gap:2px}
  .riwayat-waktu{width:auto}
  .wawancara-tata{grid-template-columns:1fr}
  /* Pada layar sempit navigasi dinaikkan ke atas, sebab bila tetap di bawah
     auditee harus menggulir seluruh pertanyaan untuk berpindah kelompok. */
  .sisi{position:static;max-height:none;order:-1}
  .sisi-lekat{max-height:none;overflow:visible}
  .daftar-kelompok{max-height:264px;overflow-y:auto}
  .daftar-kelompok{max-height:none}
  .dua-panel{grid-template-columns:1fr}
  .panel-ai{border-right:none;border-bottom:1px solid var(--garis)}
  .dua-tabel{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Huruf dasar tetap 15 piksel. Menurunkannya membuat teks sulit dibaca
     dan memicu peramban seluler memperbesar halaman sendiri. */
  body{font-size:15px}
  .wadah{padding:0 16px}
  .isi{padding:22px 16px 52px}
  .dua-kolom,.tiga-kolom,.baris-unggah{grid-template-columns:1fr}
  .rincian{grid-template-columns:1fr;gap:3px 0}
  .rincian dt{margin-top:11px}
  .kepala-halaman{flex-direction:column;align-items:stretch}
  .grup-ekspor .tbl{flex:1;min-width:118px}
  .bilah-isi{min-height:auto;padding:11px 0;gap:12px}
  .nav{order:3;width:100%}
  .kpi-angka{font-size:26px}
    .kartu{padding:18px 16px;overflow:hidden}
  .gulir>.tabel{min-width:600px}
  .panel{padding:16px}
  .tabel{font-size:14px}
  .tabel td,.tabel th{padding:9px 10px}
  .daftar-langkah li{flex-wrap:wrap}
  .daftar-langkah .status-langkah{width:100%;margin-left:32px}
}

/* ===================== CETAK ===================== */
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;font-family:var(--huruf-laporan);font-size:11pt;line-height:1.55;color:#000}
  .kisi-grafik{grid-template-columns:1fr;gap:16px}
  .bilah,.kaki,.grup-ekspor,.panel-verifikasi,.bukti-lampiran,.peringatan-rahasia,
  .navigasi-kelompok,.aksi-borang,.langkah{display:none !important}
  .wadah{max-width:none;padding:0}
  .isi{padding:0}
  .laporan{font-size:11pt}
  .laporan .tabel,.laporan .tabel th,.laporan .tabel-rapat td,.laporan .tabel-rapat th{font-size:10.5pt}
  .kartu{
    box-shadow:none;border:1px solid #c3d2e3;break-inside:avoid;page-break-inside:avoid;
    margin-bottom:11px;padding:13px 15px;
  }
  .kartu-analisis{break-inside:auto;page-break-inside:auto}
  /* Kartu berisi tabel panjang dibiarkan mengalir antarhalaman, karena
     memaksanya utuh menyisakan rongga besar. Kepala tabel diulang dan
     tiap baris tetap tidak terpotong, sehingga tetap terbaca. */
  .kartu:has(.gulir){break-inside:auto;page-break-inside:auto}
  /* satu kolom saat dicetak. Kartu tidak boleh terpotong antarhalaman,
     sehingga tata letak dua kolom menyisakan rongga besar bila dipertahankan. */
  .dua-panel,.dua-tabel,.dua-kolom,.tiga-kolom{grid-template-columns:1fr}
  .panel-ai{border-right:none}
  .judul-bagian{break-after:avoid;page-break-after:avoid;margin:16px 0 9px}
  .gulir{overflow:visible}
  .gulir>.tabel,.gulir>.tabel-rapat{min-width:0}
  .tabel{break-inside:auto}
  .tabel thead{display:table-header-group}
  .tabel tr{break-inside:avoid;page-break-inside:avoid}
  .tabel th{background:#1b3a5c !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tabel tbody tr:nth-child(even){background:#f2f6fb !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* tiga kolom agar label tetap terbaca pada ukuran 11 titik */
  .kisi-kpi{grid-template-columns:repeat(3,1fr);gap:8px}
  .kpi{padding:9px 12px;box-shadow:none}
  .kpi-angka{font-size:18pt}
  .kpi-label{font-size:11pt;letter-spacing:.2px}
  .tanda,.lencana{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kotak-rekomendasi{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:#000;text-decoration:none}
}