/* =====================================================================
   form-v2.css · Form panjang (Buat permintaan SDM). Di atas papan-v2.css dan rekrutmen-v2.css.
   Kelas lama dipertahankan: formulir, isian, masukan, salah, bantu, wajib, opsional,
   pilihan-grup, pilihan-kartu, pk, chip, nav-bagian, bagian-nomor, bar-aksi (di sini bar-kirim).
   ===================================================================== */
.tata-form { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .tata-form { grid-template-columns: 240px minmax(0, 760px); gap: 32px; } }

/* Navigasi bagian (laptop: menempel di kiri; HP: strip di atas) */
.nav-bagian { display: grid; gap: 2px; }
@media (min-width: 1000px) { .nav-bagian { position: sticky; top: calc(var(--tinggi-kepala) + 24px); } }
.nb-progres { display: grid; gap: 8px; padding: 0 10px 14px; font-size: 12.5px; font-weight: 650; color: var(--redup); }
.nb-bar { display: block; height: 6px; border-radius: 3px; background: var(--abu-latar); overflow: hidden; }
.nb-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--s-hijau), #2bb673); transition: width 500ms cubic-bezier(.2, .8, .2, 1); }
.nav-bagian a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 12px; color: var(--redup); font-size: 14px; font-weight: 620; text-decoration: none; transition: background 160ms, color 160ms; }
.nav-bagian a[hidden] { display: none; }
.nav-bagian a:hover { background: var(--papan-permukaan); color: var(--teks); }
.nav-bagian a[aria-current="true"] { background: var(--papan-permukaan); color: var(--teks); box-shadow: 0 0 0 .5px rgba(20, 24, 41, .05), 0 4px 12px -4px rgba(31, 47, 107, .14); }
html[data-gelap] .nav-bagian a[aria-current="true"], html[data-gelap] .nav-bagian a:hover { background: #1e263d; }
.nb-nomor { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--abu-latar); color: var(--redup); font-size: 12px; font-weight: 750; transition: background 240ms, color 240ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.nav-bagian a[aria-current="true"] .nb-nomor { background: #1f2f6b; color: #fff; }
.nav-bagian a.lengkap .nb-nomor { background: var(--s-hijau); color: #fff; font-size: 0; transform: scale(1.04); }
.nav-bagian a.lengkap .nb-nomor::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.2px 2.2px; transform: rotate(-45deg); }
.nav-bagian a.ada-galat .nb-nomor { background: var(--s-merah); color: #fff; }
@media (max-width: 999.98px) {
  .nav-bagian { position: sticky; top: calc(var(--tinggi-kepala) + env(safe-area-inset-top)); z-index: 15; grid-auto-flow: column; grid-auto-columns: max-content; gap: 4px; overflow-x: auto; margin: 0 -16px; padding: 8px 16px; background: color-mix(in srgb, var(--latar) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scrollbar-width: none; }
  .nb-progres { position: absolute; left: 16px; right: 16px; bottom: 0; padding: 0; } .nb-progres > span:first-child { display: none; } .nb-bar { height: 3px; border-radius: 0; }
  .nav-bagian a { min-height: 38px; font-size: 13px; }
}

/* Ringkasan galat di atas */
.ringkas-galat { display: flex; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: var(--merah-latar); color: var(--teks); outline: 0; animation: rg-masuk 320ms cubic-bezier(.2, .8, .2, 1); }
@keyframes rg-masuk { from { opacity: 0; transform: translateY(-6px); } }
.rg-ikon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--s-merah); color: #fff; }
.rg-ikon .i { width: 17px; height: 17px; }
.ringkas-galat b { display: block; font-size: 14.5px; margin-top: 5px; }
.ringkas-galat ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 2px; }
.ringkas-galat a { color: var(--merah); font-weight: 650; text-decoration: none; }
.ringkas-galat a:hover { color: var(--teks); }

/* Bagian (kartu) */
.formulir-v2 { display: grid; gap: 16px; min-width: 0; }
.bagian-form { border-radius: 20px; background: var(--papan-permukaan); box-shadow: var(--timbul-papan); scroll-margin-top: calc(var(--tinggi-kepala) + 24px); transition: box-shadow 300ms ease; }
.bagian-form[hidden] { display: none; }
.bagian-form.muncul { animation: bagian-muncul 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes bagian-muncul { from { opacity: 0; transform: translateY(-10px) scale(.99); } }
.bagian-kepala { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 4px; }
.bagian-nomor { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--merek-muda); color: var(--merek); font-weight: 750; font-size: 14px; }
.bagian-kepala h2 { font: 720 17px/1.25 var(--huruf-judul); letter-spacing: -.012em; }
.bagian-kepala p { font-size: 13px; color: var(--redup); margin-top: 2px; }
.bagian-status { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s-hijau); color: #fff; opacity: 0; transform: scale(.5); transition: opacity 240ms, transform 360ms cubic-bezier(.34, 1.56, .64, 1); }
.bagian-status .i { width: 13px; height: 13px; stroke-width: 3; }
.bagian-form.lengkap .bagian-status { opacity: 1; transform: none; }
.kisi-form { display: grid; gap: 18px 16px; padding: 14px 22px 22px 66px; }
@media (min-width: 560px) { .kisi-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .kisi-form { padding-left: 22px; } }
.formulir-v2 .lebar-penuh { grid-column: 1 / -1; }

/* Isian */
.formulir-v2 .isian { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.formulir-v2 .isian[hidden] { display: none; }
.formulir-v2 .isian > label, .formulir-v2 .isian > legend, .formulir-v2 .isian > .label { padding: 0; font-size: 13.5px; font-weight: 650; }
.formulir-v2 .wajib { color: var(--merah); }
.formulir-v2 .opsional { font-weight: 500; color: var(--samar); font-size: 12.5px; margin-left: 2px; }
.formulir-v2 .bantu { font-size: 12px; color: var(--samar); }
.formulir-v2 .masukan { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--garis-kuat); border-radius: 12px; background: var(--isian-latar, #fff); color: var(--teks); font: 15px var(--huruf); outline: 0; transition: border-color 160ms, box-shadow 160ms, background 160ms; }
.formulir-v2 select.masukan { -webkit-appearance: none; appearance: none; padding-right: 38px; background: var(--isian-latar, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; cursor: pointer; }
.formulir-v2 select.masukan:disabled { opacity: .55; cursor: not-allowed; }
.formulir-v2 textarea.masukan { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.formulir-v2 .masukan:hover { border-color: color-mix(in srgb, var(--teks) 35%, var(--garis-kuat)); }
.formulir-v2 .masukan:focus { border-color: var(--merek); box-shadow: 0 0 0 4px var(--merek-muda); }
.formulir-v2 .masukan.terisi:not(:focus) { border-color: var(--garis-kuat); }
html[data-gelap] .formulir-v2 .masukan { background-color: #10141f; }
.formulir-v2 .masukan-akhiran, .langkah-angka { display: flex; align-items: center; gap: 8px; }
.formulir-v2 .masukan-akhiran .masukan { max-width: 120px; }
.formulir-v2 .masukan-akhiran span, .langkah-angka span { font-size: 14px; color: var(--redup); }
.langkah-angka .masukan { width: 72px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.langkah-angka .tombol { width: 46px; min-height: 46px; border-radius: 12px; }
.formulir-v2 .salah { display: none; font-size: 12.5px; font-weight: 650; color: var(--merah); }
.formulir-v2 .isian.galat .salah { display: block; animation: rg-masuk 240ms ease; }
.formulir-v2 .isian.galat .masukan { border-color: var(--merah); box-shadow: 0 0 0 4px var(--merah-latar); }
.formulir-v2 .isian.galat > label, .formulir-v2 .isian.galat > legend, .formulir-v2 .isian.galat > .label { color: var(--merah); }
.goyang { animation: goyang 360ms cubic-bezier(.36, .07, .19, .97); }

/* Kartu pilihan */
.formulir-v2 .pilihan-grup { display: grid; gap: 10px; }
@media (min-width: 560px) { .formulir-v2 .pilihan-grup.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formulir-v2 .pilihan-kartu { position: relative; cursor: pointer; }
.formulir-v2 .pilihan-kartu input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.formulir-v2 .pk { display: grid; gap: 3px; height: 100%; padding: 14px; border-radius: 14px; border: 1.5px solid var(--garis-kuat); background: var(--isian-latar, #fff); transition: border-color 180ms, background 180ms, transform 260ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 180ms; }
html[data-gelap] .formulir-v2 .pk { background: #10141f; }
.formulir-v2 .pk .i { width: 20px; height: 20px; color: var(--redup); margin-bottom: 6px; transition: color 180ms; }
.formulir-v2 .pk b { font-size: 14.5px; }
.formulir-v2 .pk small { font-size: 12.5px; color: var(--redup); }
.formulir-v2 .pilihan-kartu:hover .pk { border-color: color-mix(in srgb, var(--teks) 40%, var(--garis-kuat)); transform: translateY(-1px); }
.formulir-v2 .pilihan-kartu input:checked + .pk { border-color: var(--merek); background: var(--merek-muda); box-shadow: 0 0 0 1px var(--merek); transform: scale(1.015); }
.formulir-v2 .pilihan-kartu input:checked + .pk .i { color: var(--merek); }
.formulir-v2 .pilihan-kartu input:focus-visible + .pk { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.formulir-v2 .isian.galat .pk { border-color: var(--merah); }

/* Chip centang */
.formulir-v2 .chip-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.formulir-v2 .chip > span { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.formulir-v2 .chip > input:checked + span::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.formulir-v2 .isian.galat .chip > span { border-color: var(--merah); }

/* Segmen (jenis kelamin) */
.segmen-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 14px; background: var(--abu-latar); max-width: 460px; }
.segmen-form label { position: relative; }
.segmen-form input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmen-form span { display: grid; place-items: center; height: 40px; border-radius: 11px; font-size: 14px; font-weight: 620; color: var(--redup); transition: background 200ms, color 200ms, box-shadow 200ms; }
.segmen-form input:checked + span { background: var(--papan-permukaan); color: var(--teks); box-shadow: 0 1px 3px rgba(20, 24, 41, .12); }
html[data-gelap] .segmen-form input:checked + span { background: #262e48; }
.segmen-form input:focus-visible + span { outline: 2.5px solid var(--aksen); outline-offset: 1px; }
.isian.galat .segmen-form { box-shadow: 0 0 0 1.5px var(--merah); }

/* Daftar nama staf yang digantikan */
.daftar-nama { display: grid; gap: 8px; }
.baris-nama { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; animation: rg-masuk 260ms ease; }
.baris-nama .tombol-ikon { width: 46px; min-height: 46px; border-radius: 12px; }
.baris-nama .nama-lain { grid-column: 1 / -1; display: none; }
.baris-nama.lain .nama-lain { display: block; }
.baris-nama:only-child .tombol-ikon { visibility: hidden; }
[data-tambah-nama] { justify-self: start; }

/* Bar kirim menempel di bawah */
.bar-kirim { position: sticky; bottom: 12px; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 16px; background: color-mix(in srgb, var(--papan-permukaan) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 0 0 .5px rgba(20, 24, 41, .06), 0 12px 32px -8px rgba(31, 47, 107, .22); }
html[data-gelap] .bar-kirim { background: rgba(23, 29, 48, .88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px -8px rgba(0, 0, 0, .7); }
.bk-info { flex: 1; min-width: 0; font-size: 13px; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-info.siap { color: var(--hijau); font-weight: 650; }
.bar-kirim .tombol { min-height: 44px; }
@media (max-width: 559.98px) { .bk-info { display: none; } .bar-kirim { bottom: calc(8px + env(safe-area-inset-bottom)); } .bar-kirim .tombol { flex: 1; min-height: 50px; } }

/* Berhasil */
.berhasil { display: grid; justify-items: center; gap: 8px; max-width: 520px; margin: 40px auto; padding: 36px 28px; text-align: center; border-radius: 24px; background: var(--papan-permukaan); box-shadow: var(--timbul-papan); outline: 0; animation: bagian-muncul 500ms cubic-bezier(.2, .8, .2, 1); }
.berhasil .maskot { width: 110px; height: auto; animation: maskot-loncat 900ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes maskot-loncat { 0% { transform: translateY(16px) scale(.8); opacity: 0; } 60% { transform: translateY(-6px) scale(1.04); opacity: 1; } 100% { transform: none; } }
.berhasil h2 { font: 760 24px/1.2 var(--huruf-judul); letter-spacing: -.02em; }
.berhasil p { color: var(--redup); text-wrap: pretty; }
.berhasil .grup-tombol { margin-top: 12px; justify-content: center; }
[data-gerak="kurang"] .bagian-form.muncul, [data-gerak="kurang"] .berhasil, [data-gerak="kurang"] .berhasil .maskot { animation: none; }

.bagian-kepala > div { flex: 1; min-width: 0; }
.nav-bagian a, .kembali { white-space: nowrap; }

/* ---------- Rapikan jarak: semua tepi kiri sejajar 24 px ---------- */
.kepala-papan .kembali { display: inline-flex; margin-bottom: 8px; }
.kepala-papan .sub-halaman { margin-top: 4px; }
.tata-form { margin-top: 8px; }
.bagian-kepala { align-items: center; gap: 12px; padding: 22px 24px 0; }
.bagian-kepala p { margin-top: 1px; }
.kisi-form { gap: 22px 16px; padding: 20px 24px 26px; }
@media (max-width: 559.98px) { .kisi-form { padding: 18px 18px 22px; } .bagian-kepala { padding: 18px 18px 0; } }
.formulir-v2 .isian { gap: 8px; }
.formulir-v2 fieldset.isian > legend { margin-bottom: 8px; }
.formulir-v2 .isian > .bantu, .formulir-v2 .isian > .salah { margin-top: -2px; }
.formulir-v2 .masukan-akhiran .masukan { max-width: 110px; text-align: left; font-variant-numeric: tabular-nums; }
.ringkas-galat { margin: 0 0 16px; }
.bar-kirim { margin-top: 4px; }
.nav-bagian { padding-top: 2px; }

/* ---------- Dropdown kustom ---------- */
.pilih-kustom { position: relative; }
.pk-asli { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
.pk-pemicu {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--garis-kuat); border-radius: 12px;
  background: var(--isian-latar, #fff); color: var(--teks); font: 15px var(--huruf); text-align: left; cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
html[data-gelap] .pk-pemicu { background: #10141f; }
.pk-pemicu:hover { border-color: color-mix(in srgb, var(--teks) 35%, var(--garis-kuat)); }
.pk-pemicu:focus-visible, .buka > .pk-pemicu { outline: 0; border-color: var(--merek); box-shadow: 0 0 0 4px var(--merek-muda); }
.pk-pemicu:disabled { opacity: .55; cursor: not-allowed; }
.pk-teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-pemicu.kosong .pk-teks { color: var(--samar); }
.pk-panah { flex: none; color: var(--samar); transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.buka > .pk-pemicu .pk-panah { transform: rotate(180deg); color: var(--merek); }
.pk-pemicu.baru-pilih .pk-teks { animation: pk-pilih 320ms cubic-bezier(.2, .8, .2, 1); }
@keyframes pk-pilih { from { opacity: .3; transform: translateY(4px); } }
.isian.galat .pk-pemicu { border-color: var(--merah); box-shadow: 0 0 0 4px var(--merah-latar); }
.pk-panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(20, 24, 41, .06), 0 4px 12px rgba(20, 24, 41, .08), 0 22px 50px -10px rgba(31, 47, 107, .26);
  transform-origin: top center; animation: pk-buka 200ms cubic-bezier(.2, .8, .2, 1);
}
.pk-panel.ke-atas { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
html[data-gelap] .pk-panel { background: #171d30; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 50px -10px rgba(0, 0, 0, .7); }
@keyframes pk-buka { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pk-cari { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 4px; padding: 0 10px; border-radius: 10px; background: var(--abu-latar); color: var(--samar); }
.pk-cari input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--teks); font: 14px var(--huruf); }
.pk-daftar { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pk-daftar [role="option"] { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 14.5px; cursor: pointer; transition: background 100ms; }
.pk-daftar [role="option"] span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-daftar [role="option"] .i { color: var(--merek); opacity: 0; }
.pk-daftar [role="option"].aktif { background: var(--abu-latar); }
.pk-daftar [aria-selected="true"] { font-weight: 650; }
.pk-daftar [aria-selected="true"] .i { opacity: 1; }
.pk-grup { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--samar); }
.pk-grup:first-child { padding-top: 4px; }
.pk-kosong { padding: 12px 10px; font-size: 13.5px; color: var(--redup); }
[data-gerak="kurang"] .pk-panel, [data-gerak="kurang"] .pk-pemicu.baru-pilih .pk-teks { animation: none; }

/* Isian rupiah: awalan Rp di dalam isian */
.masukan-rp { position: relative; display: flex; align-items: center; }
.masukan-rp > span { position: absolute; left: 14px; font-size: 14px; color: var(--redup); pointer-events: none; }
.masukan-rp .masukan { padding-left: 42px; font-variant-numeric: tabular-nums; }
.formulir-v2 fieldset.isian > legend { float: left; width: 100%; margin-bottom: 8px; }
.formulir-v2 fieldset.isian > legend + * { clear: both; }