/* Halaman UAT untuk peminta. Dibuka dari HP di cabang, jadi:
   - satu kolom, tidak ada tabel yang perlu digeser mendatar
   - sasaran sentuh minimal 44px
   - isian 16px, kalau lebih kecil iOS ikut memperbesar halamannya sendiri
   Sengaja TERANG saja, tidak ikut mode gelap (permintaan user). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #eef2f5;
  color: #1b2733;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: #0d7f9e; }

.atas {
  background: #17a2c6;
  color: #fff;
  padding: .85rem 1rem;
}
.atas .merek { font-weight: 700; letter-spacing: .02em; }
.atas .sub { display: block; font-size: .82rem; opacity: .9; margin-top: .1rem; }

.dalam { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

h1 { font-size: 1.25rem; margin: 0 0 .2rem; line-height: 1.3; }
h2 { font-size: 1rem; margin: 0; }
.ket { color: #5b6b7b; font-size: .88rem; margin: 0 0 1rem; }

.kartu {
  background: #fff;
  border: 1px solid #dde4ea;
  border-radius: 10px;
  margin: 0 0 1rem;
  overflow: hidden;
}
.kartu > .judul {
  padding: .7rem 1rem;
  border-bottom: 1px solid #e6ecf1;
  background: #f7fafc;
  font-weight: 600;
  font-size: .95rem;
}
.kartu > .badan { padding: 1rem; }
.kartu > .badan > :first-child { margin-top: 0; }
.kartu > .badan > :last-child  { margin-bottom: 0; }

/* daftar pasangan label/isi -- di HP jadi bertumpuk, bukan dua kolom sempit */
dl.data { margin: 0; }
dl.data dt { color: #5b6b7b; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
dl.data dd { margin: .1rem 0 .8rem; word-break: break-word; }
dl.data dd:last-child { margin-bottom: 0; }

label.medan { display: block; margin: 0 0 1rem; }
label.medan > span.nama { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
label.medan > span.bantu { display: block; color: #5b6b7b; font-size: .82rem; margin-bottom: .3rem; font-weight: 400; }

.isian, textarea.isian, select.isian {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: .6rem .7rem;
  border: 1px solid #c3cfda;
  border-radius: 8px;
  background: #fff;
  color: inherit;
}
.isian:focus { outline: 2px solid #17a2c6; outline-offset: 1px; border-color: #17a2c6; }
.isian[readonly] { background: #f2f5f8; color: #495969; }
textarea.isian { min-height: 4.5rem; resize: vertical; }

/* pilihan yang cukup besar untuk jempol */
.pilih { display: block; margin: 0 0 .45rem; }
.pilih input { width: 1.15rem; height: 1.15rem; margin-right: .55rem; vertical-align: -.18rem; }
.pilih span { font-size: .95rem; }
.pilih.kotak {
  border: 1px solid #d3dce4;
  border-radius: 8px;
  padding: .6rem .7rem;
  cursor: pointer;
}
.pilih.kotak:has(input:checked) { border-color: #17a2c6; background: #eefaff; }

.tombol {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.1rem;
  min-height: 44px;
  border: 1px solid #17a2c6;
  border-radius: 8px;
  background: #17a2c6;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.tombol:active { filter: brightness(.94); }
.tombol.sepi { background: #fff; color: #0d7f9e; }
.tombol.penuh { display: block; width: 100%; }
.tombol[disabled] { opacity: .45; cursor: not-allowed; }
/* Tombol sisipan di dalam kartu (Simpan/Reset penjelasan). Tetap 36px supaya
   masih bisa ditekan jempol, tapi jelas bukan tombol utama halaman. */
.tombol.kecil { font-size: .85rem; font-weight: 600; padding: .4rem .7rem; min-height: 36px; }

.baris-tombol { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.baris-tombol .kabar { font-size: .82rem; color: #5b6b7b; }
.baris-tombol .kabar.baik  { color: #1a7a3c; }
.baris-tombol .kabar.gagal { color: #b4232a; }

/* daftar permintaan yang menunggu dicoba */
ul.daftar { list-style: none; margin: 0; padding: 0; }
ul.daftar li { border-bottom: 1px solid #e6ecf1; }
ul.daftar li:last-child { border-bottom: 0; }
ul.daftar a {
  display: block;
  padding: .9rem 1rem;
  text-decoration: none;
  color: inherit;
}
ul.daftar a:active { background: #f2f8fb; }
ul.daftar .no { color: #0d7f9e; font-weight: 700; font-size: .85rem; }
ul.daftar .jdl { display: block; margin-top: .15rem; }
ul.daftar .kcl { display: block; color: #5b6b7b; font-size: .82rem; margin-top: .2rem; }

/* satu skenario uji = satu blok, bukan satu baris tabel */
.skenario { border: 1px solid #d9e1e8; border-radius: 8px; padding: .85rem; margin: 0 0 .85rem; }
.skenario .kepala { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.skenario .kepala b { font-size: .85rem; color: #5b6b7b; text-transform: uppercase; letter-spacing: .04em; }
.buang {
  font: inherit; font-size: .85rem; background: none; border: 0;
  color: #b4232a; cursor: pointer; padding: .25rem .4rem;
}
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* tanda tangan */
.ttdkotak { border: 2px dashed #b9c6d2; border-radius: 8px; background: #fff; touch-action: none; }
canvas#ttd { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }

.pesan { border-radius: 8px; padding: .8rem 1rem; margin: 0 0 1rem; font-size: .93rem; }
.pesan.info  { background: #eaf6fb; border: 1px solid #b6dced; }
.pesan.gagal { background: #fdecec; border: 1px solid #f0bcbc; color: #8d1f24; }
.pesan.baik  { background: #eaf7ee; border: 1px solid #b7ddc3; }

.cap { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .05em;
       text-transform: uppercase; border: 2px solid; border-radius: 6px; padding: .3rem .6rem; }
.cap.diterima { color: #1a7a3c; border-color: #1a7a3c; }
.cap.catatan  { color: #8a6100; border-color: #8a6100; }
.cap.ditolak  { color: #b4232a; border-color: #b4232a; }

.hasil { font-weight: 600; font-size: .85rem; }
.hasil.sesuai { color: #1a7a3c; }
.hasil.tidak  { color: #b4232a; }

.ttdgambar { max-width: 100%; height: auto; border-bottom: 1px solid #1b2733; }

/* Kop berita acara. Di layar ikut lebar kartu; waktu dicetak jadi kepala surat. */
.kop { display: flex; align-items: center; gap: .8rem;
       border-bottom: 3px double #1b2733; padding-bottom: .6rem; margin-bottom: 1rem; }
.kop .koplogo { width: 54px; height: 54px; object-fit: contain; flex: none; }
.kop .kopteks { line-height: 1.25; }
.kop .kopteks b { display: block; font-size: 1.05rem; letter-spacing: .06em; }
.kop .kopteks span { font-size: .82rem; color: #5b6b7b; }

.kaki { color: #5b6b7b; font-size: .8rem; text-align: center; margin-top: 1.5rem; }

@media (min-width: 40rem) {
  .deret { display: flex; gap: .6rem; flex-wrap: wrap; }
  .tombol.penuh { display: inline-block; width: auto; }
}

@media print {
  body { background: #fff; }
  .atas, .kaki, .cetak, .tombol { display: none !important; }
  .dalam { max-width: none; padding: 0; }
  .kartu { border: 0; border-radius: 0; margin-bottom: .6rem; page-break-inside: avoid; }
  .kartu > .judul { background: none; border-bottom: 1px solid #000; padding-left: 0; }
  .kartu > .badan { padding-left: 0; padding-right: 0; }
}