/* ============================================================================
   DeepOne — bahasa desain
   ----------------------------------------------------------------------------
   Struktur, layout, dan pola interaksinya mengikuti hiBob; warnanya Deep Spa.
   Terang, bukan gelap: situs Deep Spa memang hitam pekat, tapi halaman ini
   dipakai berjam-jam untuk membaca tabel — latar gelap penuh melelahkan mata.
   Identitas brand tetap terasa lewat tombol, angka, dan state aktif.

   Sengaja satu berkas tanpa framework. Dibuka HR dari laptop kantor DAN oleh
   76 orang dari HP, jadi mobile lebih dulu: yang di bawah 900px dapat app bar
   putih + bilah tab bawah; yang di atasnya dapat nav mendatar biasa.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600&display=swap');

:root {
  --brand:      #123293;  /* biru royal Deep Spa — tombol, tab aktif, angka   */
  --brand-deep: #0C2470;  /* gradasi gelap pada cover                         */
  --brand-tint: #E7EBF7;  /* tombol sekunder, avatar fallback, chip           */
  --neon:       #362BF1;  /* aksen; hemat, tidak pernah jadi teks             */
  --ink:        #0A0A0A;
  --ink-2:      #5A5F6B;
  --ink-3:      #9AA0AC;  /* nonaktif & placeholder saja — 2.6:1, bukan teks  */
  --bg:         #F2F1F1;
  --surface:    #FFFFFF;
  --line:       #E4E3E3;
  --success:    #1B7F4B;
  --warning:    #8A5A00;
  --danger:     #B42318;

  --tint-hijau: #E9F3EC;
  --tint-kuning:#FDF2E3;
  --tint-merah: #FDECEA;
  --tint-ungu:  #EDEBFE;

  --r-kartu: 14px;
  --r-tombol: 10px;
  --bayang: 0 1px 2px rgba(16, 24, 40, .06);
  --bayang-naik: 0 1px 3px rgba(16, 24, 40, .12);

  /* Nama lama dipertahankan supaya potongan gaya sebaris di template lama
     (style="color:var(--abu)") tidak berubah jadi hitam tanpa diminta. */
  --navy: var(--brand);
  --navy-muda: var(--brand-tint);
  --garis: var(--line);
  --abu: var(--ink-2);
  --merah: var(--danger);
  --hijau: var(--success);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, .angka b, .hero-angka {
  font-family: Poppins, Inter, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -.2px;
}

/* ---------------------------------------------------------------- app bar   */
.atas {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.atas a { color: var(--ink); }
.merek { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.merek img { height: 24px; display: block; }
.merek span { font-family: Poppins, Inter, sans-serif; }

.atas nav { display: none; gap: 4px; flex-wrap: wrap; }
.atas nav a {
  padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
}
.atas nav a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.atas nav a.kini { background: var(--brand-tint); color: var(--brand); font-weight: 600; }

.siapa { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px;
         flex: 0 0 auto; white-space: nowrap; }
.siapa .nama-siapa { display: none; }

/* Angka antrean: dipakai di nav, bilah tab, dan laci — satu bentuk saja. */
.lencana {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 4px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  vertical-align: 1px;
}
.atas nav a.kini .lencana { background: var(--brand); color: #fff; }

/* Chevron kembali & judul tengah — pola app bar hiBob di halaman detail. */
.atas .kembali {
  width: 32px; height: 32px; margin: -4px 0 -4px -6px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--ink);
}
.atas .kembali:hover { background: var(--bg); text-decoration: none; }
.atas .tajuk {
  display: none; flex: 1; text-align: center;
  font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 15.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

main { max-width: 1120px; margin: 0 auto; padding: 18px 14px 96px; }

/* ------------------------------------------------------- bilah tab bawah    */
/* Tiga tuju, seperti hiBob: Beranda · Orang · Menu. Sisanya masuk ke laci
   yang dibuka lewat Menu — tanpa JavaScript, memakai checkbox tersembunyi,
   supaya navigasinya tetap hidup di HP tua yang JS-nya lambat. */
.buka-laci {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; min-height: 0; left: 0; top: 0; margin: 0; padding: 0; border: 0;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 7px 0 calc(9px + env(safe-area-inset-bottom));
}
.tabbar a, .tabbar label {
  flex: 1; text-align: center; color: var(--ink-3);
  font-size: 11px; font-weight: 500; cursor: pointer; line-height: 1.3;
}
.tabbar a:hover { text-decoration: none; }
.tabbar svg { display: block; margin: 0 auto 2px; }
.tabbar .kini { color: var(--brand); font-weight: 600; }
.tabbar .lencana {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 3px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; vertical-align: 1px;
}

.laci-tirai {
  position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 10, .38);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.laci {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(101%); transition: transform .22s ease;
  max-height: 82vh; overflow-y: auto;
  box-shadow: 0 -6px 24px rgba(16, 24, 40, .16);
}
.buka-laci:checked ~ .laci-tirai { opacity: 1; pointer-events: auto; }
.buka-laci:checked ~ .laci { transform: none; }
.laci .pegangan { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 2px auto 12px; }
.laci a, .laci .keluar-laci {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; border-radius: var(--r-tombol);
  color: var(--ink); font-size: 15px; font-weight: 500;
}
.laci a:hover { background: var(--bg); text-decoration: none; }
.laci a .lencana { background: var(--brand-tint); color: var(--brand); }
.laci .emo { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
             background: var(--brand-tint); display: grid; place-items: center; font-size: 16px; }
.laci hr { border: 0; border-top: 1px solid var(--line); margin: 8px 12px; }

/* ------------------------------------------------------------ tipografi     */
h1 { font-size: 26px; margin: 4px 0 4px; line-height: 1.25; }
h1 .tanda { vertical-align: 5px; }

/* h2 anak langsung main = pemisah antar blok (label bagian, huruf kapital
   kecil). h2 di dalam kartu = judul kartu. Dua peran, dua bentuk. */
main > h2 {
  font-family: Inter, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-2); margin: 26px 4px 8px;
}
.kartu h2, .kartu h3 { font-size: 16px; margin: 0 0 4px; }
.kartu h2 + .kecil, .kartu h3 + .kecil { margin-top: 0; }

.sub { color: var(--ink-2); margin: 0 0 16px; font-size: 14px; max-width: 70ch; }
.kecil { font-size: 12.5px; color: var(--ink-2); }
code { background: var(--bg); padding: 1.5px 6px; border-radius: 5px; font-size: 12.5px; }

/* ---------------------------------------------------------------- kartu     */
.kartu {
  background: var(--surface); border: 0; border-radius: var(--r-kartu);
  padding: 20px; margin-bottom: 12px; box-shadow: var(--bayang);
}
/* Tabel absensi punya sembilan kolom dan tidak akan pernah muat di 390px.
   Yang digulir kartunya, bukan seluruh halaman. */
.kartu:has(> table) { overflow-x: auto; }

.baris { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.angka {
  background: var(--surface); border: 0; border-radius: var(--r-kartu);
  padding: 16px 18px; box-shadow: var(--bayang);
}
.angka b { display: block; font-size: 30px; color: var(--brand); line-height: 1.15; }
.angka span { color: var(--ink-2); font-size: 12.5px; }

/* Kartu hero: satu angka besar jadi pusat perhatian, seperti kartu saldo. */
.hero { text-align: center; padding: 24px 20px; }
.hero .emo { font-size: 28px; line-height: 1; }
.hero .nm { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; margin-top: 6px; }
.hero-angka { font-size: 44px; font-weight: 600; color: var(--brand); line-height: 1.1; margin: 4px 0 8px; }
.hero .rinci { color: var(--ink-2); font-size: 13px; line-height: 1.8; }

/* Ukuran kelengkapan: label, angka, bilah — terbaca sekilas tanpa harus
   membandingkan dua kolom angka seperti di tabel. */
.ukur { margin-top: 14px; }
.ukur:first-of-type { margin-top: 10px; }
.ukur-atas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ukur-atas b { font-weight: 600; }
.ukur-atas .kecil { font-weight: 400; }
.bilah.mini { height: 6px; margin: 5px 0 0; }

.dua-tombol { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.angka-sel { text-align: right; font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- tabel     */
table { width: 100%; border-collapse: collapse; background: transparent; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th, table > tr:first-child th {
  background: transparent; color: var(--ink-2);
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  white-space: nowrap;
}
tr:last-child td, tr:last-child th { border-bottom: 0; }
tbody tr:hover td { background: #FAFBFD; }
/* Tabel dua kolom (label di th kiri, isi di td) — dipakai di halaman profil. */
.kartu > table th[style*="width"] { text-transform: none; letter-spacing: 0; font-size: 12.5px;
                                    font-weight: 500; color: var(--ink-2); }

/* ------------------------------------------------------------- pil & tanda  */
.pil {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); font-size: 11.5px; font-weight: 600;
}
.tanda {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.tanda::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; opacity: .9;
}
.tanda.staf    { background: var(--brand-tint); color: var(--brand); }
.tanda.talent  { background: var(--tint-ungu);  color: #4A3AA8; }
.tanda.lengkap { background: var(--tint-hijau); color: var(--success); }
.tanda.kurang  { background: var(--tint-merah); color: var(--danger); }
.tanda.tunggu  { background: var(--tint-kuning);color: var(--warning); }
.tanda.polos::before { display: none; }

/* --------------------------------------------------------------- avatar     */
.avatar {
  border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center;
  font-family: Poppins, Inter, sans-serif; font-weight: 600;
  width: 42px; height: 42px; font-size: 14.5px;
  text-transform: uppercase; letter-spacing: .3px;
}
.avatar.kecil2 { width: 32px; height: 32px; font-size: 12px; }
.avatar.talent { background: var(--tint-ungu); color: #4A3AA8; }

/* Daftar orang: satu baris satu orang, avatar di kiri — bukan tabel padat. */
.plist { background: var(--surface); border-radius: var(--r-kartu); overflow: hidden;
         box-shadow: var(--bayang); margin-bottom: 12px; }
.prow { display: flex; align-items: center; gap: 13px; padding: 12px 16px;
        border-bottom: 1px solid var(--line); color: var(--ink); }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: #FAFBFD; text-decoration: none; }
.prow .isi-baris { min-width: 0; flex: 1; }
.prow .info { display: block; min-width: 0; }
.prow b { display: block; font-size: 14.5px; font-weight: 600;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow small { color: var(--ink-2); font-size: 12.5px; display: block;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .tanda-kecil { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.prow .tanda-kecil .tanda { font-size: 10.5px; padding: 2px 8px; }
.prow .tanda-kecil:empty { display: none; }
.prow .anak-panah { color: var(--ink-3); font-size: 17px; line-height: 1; flex: 0 0 auto; }

.hitungan { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; margin: 2px 4px 10px; }

/* ----------------------------------------------------- segmented control    */
.seg { display: flex; background: #E6E5E5; border-radius: 11px; padding: 4px; margin: 0 0 12px; gap: 4px; }
.seg a, .seg button {
  flex: 1; text-align: center; padding: 9px 6px; border: 0; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border-radius: 8px; cursor: pointer;
}
.seg a:hover { text-decoration: none; color: var(--ink); }
.seg a.kini, .seg button.kini { background: var(--surface); color: var(--brand); box-shadow: var(--bayang-naik); }

/* ------------------------------------------------------------- pencarian    */
.cari-kotak {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: 11px; padding: 0 14px;
  box-shadow: var(--bayang); margin-bottom: 12px;
}
.cari-kotak svg { color: var(--ink-3); flex: 0 0 auto; }
.cari-kotak input {
  flex: 1; border: 0; background: transparent; padding: 13px 0; min-height: 0;
  font-size: 15px; box-shadow: none;
}
.cari-kotak input:focus { outline: 0; box-shadow: none; }

/* ------------------------------------------------------------------ tab     */
/* Radio tersembunyi, bukan JavaScript: halaman profil dibuka juga dari HP
   dengan sinyal seadanya, dan tab yang butuh skrip untuk dibuka berarti
   isinya tidak bisa dibaca kalau skripnya belum sampai. */
/* Lebar dikunci 1px: input mewarisi width:100% dari aturan borang, dan input
   tersembunyi yang selebar induknya menambah 19px gulir mendatar di HP. */
.tabs > input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; min-height: 0; left: 0; top: 0; margin: 0; padding: 0; border: 0;
}
.tab-kepala { margin-bottom: 12px; }
.tab-kepala label {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.tabs > input:nth-of-type(1):checked ~ .tab-kepala label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-kepala label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tab-kepala label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tab-kepala label:nth-of-type(4) {
  background: var(--surface); color: var(--brand); box-shadow: var(--bayang-naik);
}
.tab-isi { display: none; }
.tabs > input:nth-of-type(1):checked ~ .t1,
.tabs > input:nth-of-type(2):checked ~ .t2,
.tabs > input:nth-of-type(3):checked ~ .t3,
.tabs > input:nth-of-type(4):checked ~ .t4 { display: block; }
h2.dalam-tab {
  font-family: Inter, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-2); margin: 20px 4px 8px;
}
.tab-isi > h2.dalam-tab:first-child { margin-top: 4px; }

/* --------------------------------------------------------------- borang     */
form.saring, .saring { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
form.saring .lebar, .saring .lebar { grid-column: 1 / -1; }
.saring .ikut { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }

input, select, textarea {
  font: inherit; font-size: 15px; padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-tombol);
  background: var(--surface); color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 50, 147, .13);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--brand); }
textarea { min-height: 84px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235A5F6B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}

.borang { display: grid; grid-template-columns: 1fr; gap: 12px; }
.borang label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; font-weight: 500; }
.lebar { grid-column: 1 / -1; }

/* --------------------------------------------------------------- tombol     */
button, .tombol {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 12px 18px; min-height: 44px; border-radius: var(--r-tombol);
  border: 0; background: var(--brand); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; text-decoration: none;
}
button:hover, .tombol:hover { background: var(--brand-deep); text-decoration: none; color: #fff; }
.tombol.sepi, button.sepi, button.sepi2 { background: var(--brand-tint); color: var(--brand); }
.tombol.sepi:hover, button.sepi:hover, button.sepi2:hover { background: #D9E0F2; color: var(--brand); }
button.bahaya { background: var(--danger); }
button.bahaya:hover { background: #8E1B12; }
button:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; }
button.mini, .tombol.mini { padding: 7px 13px; min-height: 0; font-size: 12.5px; border-radius: 8px; }
button.mini.sepi { background: var(--brand-tint); color: var(--brand); }
/* Tombol utama berdiri penuh di dalam kartu, tidak melayang di atas layar. */
button.lebar-penuh, .tombol.lebar-penuh { width: 100%; min-height: 48px; }
.tombol-bawah button { margin-bottom: 10px; width: 100%; }

/* ----------------------------------------------------------------- kabar    */
.kabar {
  padding: 13px 16px; border-radius: var(--r-kartu); margin-bottom: 12px;
  background: var(--surface); box-shadow: var(--bayang);
  border-left: 3px solid var(--ink-3); font-size: 13.5px;
}
.kabar.sukses { background: var(--tint-hijau); border-left-color: var(--success); box-shadow: none; }
.kabar.galat  { background: var(--tint-merah); border-left-color: var(--danger); box-shadow: none; }

/* -------------------------------------------------------------- halaman masuk */
.masuk { max-width: 380px; margin: 8vh auto 0; }
.masuk .kartu { padding: 26px 24px; }
.merek-masuk { display: block; width: 200px; max-width: 100%; margin: 2px auto 18px; }
.masuk .sub { text-align: center; }
.masuk input { margin-bottom: 12px; }
.masuk button { width: 100%; min-height: 48px; }

pre.rencana { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace;
              font-size: 13px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------- profil: cover      */
.cover {
  height: 158px; position: relative; overflow: hidden;
  border-radius: var(--r-kartu) var(--r-kartu) 0 0;
  background: linear-gradient(140deg, #000 0%, var(--brand-deep) 45%, var(--brand) 100%);
}
.cover .o { position: absolute; border-radius: 50%; }
.cover .o1 { width: 250px; height: 250px; top: -74px; right: -62px; border: 1.5px solid rgba(255,255,255,.16); }
.cover .o2 { width: 168px; height: 168px; top: 18px; right: 8px; background: rgba(54, 43, 241, .30); }
.cover .o3 { width: 96px; height: 96px; bottom: -34px; left: 22px; background: rgba(255,255,255,.07); }
.pf {
  position: relative;
  background: var(--surface); border-radius: var(--r-kartu);
  box-shadow: var(--bayang); margin-bottom: 12px;
}
.pf-av {
  position: absolute; left: 50%; transform: translateX(-50%); top: 112px;
  width: 92px; height: 92px; border: 4px solid #fff; border-radius: 50%;
  background: linear-gradient(160deg, #3A4A6B, #1A2440); color: #fff;
  display: grid; place-items: center;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 29px; letter-spacing: .5px;
}
.pf-badan { padding: 56px 20px 20px; text-align: center; }
.pf-badan h1 { font-size: 21px; margin: 0; }
.pf-badan .peran { font-weight: 600; font-size: 14px; margin-top: 5px; }
.pf-badan .meta { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.pf-badan .tanda-baris { margin-top: 10px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.quick { display: flex; justify-content: center; gap: 4px; padding: 20px 2px 2px; }
.quick > * { flex: 1 1 0; max-width: 92px; text-align: center; color: var(--ink-2); }
.quick > *:hover { text-decoration: none; }
.quick .qb {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 7px;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; font-size: 20px;
}
.quick .qb.mati { background: var(--bg); color: var(--ink-3); }
.quick span { font-size: 11.5px; font-weight: 500; }

/* Lencana bundar: sertifikasi / penanda kecil di profil. */
.lencana-baris { display: flex; gap: 8px; margin-top: 14px; }
.lencana-baris > div { flex: 1; text-align: center; }
.lencana-baris .bi { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 6px;
                     display: grid; place-items: center; font-size: 21px; }
.lencana-baris span { font-size: 10.5px; color: var(--ink-2); line-height: 1.25; display: block; }

/* Baris atasan / orang di dalam kartu detail. */
.mgr { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mgr b { display: block; font-size: 14.5px; font-weight: 600; }
.mgr small { color: var(--ink-2); font-size: 12.5px; }

/* ------------------------------------------------- halaman isi sendiri (HP) */
/* Dibuka dari HP oleh 76 orang yang sebagian besar bukan orang teknis:
   satu kolom, medan selebar layar, tinggi minimal 44px supaya bisa ditekan
   dengan jempol tanpa meleset. */
body.hp { background: var(--bg); }
.atas-hp {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px; font-weight: 600; font-size: 15px;
  position: sticky; top: 0; z-index: 40;
}
.atas-hp img { height: 24px; }
main.sempit { max-width: 560px; padding: 16px 14px 40px; }
/* Halaman "Saya" memakai lebar sempit yang sama, tapi punya bilah tab bawah —
   tanpa ruang ini, kartu terakhir tertutup bilahnya. */
body:has(.tabbar) main.sempit { padding-bottom: 96px; }
.hp .kartu { padding: 18px 16px; }
.hp input, .hp select, .hp textarea { font-size: 16px; }  /* 16px menahan iOS memperbesar layar sendiri */
label.besar { display: block; font-weight: 600; font-size: 13.5px; margin: 16px 0 5px; }
label.besar i { color: var(--danger); font-style: normal; }
label.besar:first-of-type { margin-top: 10px; }
.kartu > h2:first-child + label.besar, .kartu > h1 + label.besar { margin-top: 12px; }
.hp button { width: 100%; min-height: 48px; }

/* Bilah kemajuan pengisian. */
.bilah { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.bilah span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* ------------------------------------------------------ halaman tautan (HR) */
input.tautan { width: 100%; max-width: 340px; font-size: 12px; font-family: ui-monospace, Menlo, monospace;
               padding: 8px 10px; min-height: 0; }
textarea.siap { width: 100%; min-height: 150px; font-size: 12px; margin-top: 6px;
                font-family: ui-monospace, Menlo, monospace; }

/* ============================================================== ≥ 900px ==== */
@media (min-width: 900px) {
  body { font-size: 15px; }
  .atas { padding: 10px 24px; gap: 20px; }
  .atas nav { display: flex; }
  .atas .tajuk, .atas .kembali { display: none; }
  .siapa .nama-siapa { display: inline; }
  main { padding: 26px 24px 60px; }
  .tabbar, .laci, .laci-tirai { display: none; }
  h1 { font-size: 28px; }
  .baris { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
  form.saring, .saring { display: flex; flex-wrap: wrap; align-items: center; }
  form.saring input, form.saring select, .saring select { width: auto; min-width: 170px; }
  form.saring button, .saring button { width: auto; }
  .saring .ikut { width: auto; }
  .borang { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .masuk { margin: 12vh auto 0; }
  table { font-size: 14px; }
  .cari-kotak { max-width: 460px; }
  .seg { max-width: 340px; }
  .atas nav a { font-size: 12.5px; padding: 6px 9px; }
  /* Tabel dua kolom (label — isi) tidak perlu selebar layar 27 inci; kalau
     dibiarkan, mata harus menyeberang 900px untuk memasangkan label dan
     nilainya. */
  .kartu > table th[style*="width"] ~ td, .tab-isi .kartu > table { max-width: 760px; }
  /* Ruangnya cukup: tanda kembali ke kanan baris, terbaca sebagai kolom. */
  .prow .isi-baris { display: flex; align-items: center; gap: 14px; }
  .prow .info { flex: 1; }
  .prow .tanda-kecil { margin-top: 0; justify-content: flex-end; flex: 0 0 auto; }
  .prow .tanda-kecil .tanda { font-size: 11.5px; padding: 3px 10px; }
  .dua-tombol { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .laci, .laci-tirai { transition: none; }
}