/* Gaya dari hr.css v1 yang masih dipakai halaman lama, untuk selektor yang tidak ada di sistem desain v2.
   Dimuat tepat sesudah hr.css. Kurangi berkas ini setiap kali sebuah halaman pindah ke tampilan baru. */
:root, [data-tema="terang"] { --gradasi-latar: radial-gradient(90% 60% at 50% -10%, #e3e7f6 0%, transparent 70%); }
[data-tema="gelap"] { --gradasi-latar: radial-gradient(90% 60% at 50% -10%, #161c38 0%, transparent 70%); }
@media (prefers-color-scheme: dark) {
:root:not([data-tema="terang"]) { --gradasi-latar: radial-gradient(90% 60% at 50% -10%, #161c38 0%, transparent 70%); }
}
@keyframes muncul-menu {from { opacity: 0; transform: translateY(-4px) scale(.96); }}
.halaman > :nth-child(4) {animation-delay: 90ms;}
.halaman > :nth-child(n+5) {animation-delay: 120ms;}
.judul-bagian .tautan {font-size: var(--t-kecil);}
.kembali {display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 4px; margin: 0 0 var(--j-2) -4px; color: var(--redup); text-decoration: none; font-weight: 620; font-size: var(--t-sedang); border-radius: var(--sudut-k); transition: background var(--cepat), color var(--cepat);}
.kembali:hover {background: var(--merek-muda); color: var(--merek);}
.kembali:hover .i {transform: translateX(-2px);}
.kembali .i {transition: transform var(--cepat) var(--lentur);}
@media (min-width: 1000px) {
.dua-kolom.sisi-kiri {grid-template-columns: 260px minmax(0, 1fr);}
}
.tautan:active {opacity: .7;}
.tombol[data-demo="hover"] {border-color: color-mix(in srgb, var(--merek) 40%, var(--garis-kuat)); background: var(--merek-lembut); color: var(--teks);}
.tombol[data-demo="tekan"] {transform: scale(.97); background: var(--merek-muda);}
.tombol:focus-visible, .tombol[data-demo="fokus"] {outline: 2.5px solid var(--aksen); outline-offset: 2px;}
.tombol-utama[data-demo="hover"] {background: var(--gradasi-sorot); border-color: transparent; color: #fff; box-shadow: 0 10px 26px rgba(11, 18, 48, .36), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px);}
.tombol-utama:active, .tombol-utama[data-demo="tekan"] {background: var(--gradasi); transform: translateY(0) scale(.97); box-shadow: 0 3px 8px rgba(11, 18, 48, .3);}
.tombol-bahaya[data-demo="hover"] {background: var(--merah-latar); border-color: var(--merah); color: var(--merah);}
.tombol-bahaya:active, .tombol-bahaya[data-demo="tekan"] {background: var(--merah-latar);}
[data-tema="gelap"] .tombol-bahaya-penuh {background: #d63a2a;}
.tombol-hantu[data-demo="hover"] {background: var(--merek-muda); border-color: transparent; color: var(--merek);}
.tombol-ikon.tombol-kecil {width: 36px;}
.tombol.memuat, .tombol[data-demo="memuat"] {pointer-events: none; color: transparent !important;}
.tombol.memuat > *, .tombol[data-demo="memuat"] > * {visibility: hidden;}
.tombol.memuat::after, .tombol[data-demo="memuat"]::after {content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--teks) 20%, transparent); border-top-color: var(--merek); animation: putar .7s linear infinite;}
.tombol-utama.memuat::after, .tombol-utama[data-demo="memuat"]::after, .tombol-bahaya-penuh.memuat::after {border-color: rgba(255, 255, 255, .35); border-top-color: #fff;}
@keyframes putar {to { transform: rotate(360deg); }}
.tombol.berhasil {pointer-events: none;}
.tombol.berhasil::after {content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; margin: -9px 0 0 -4px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); animation: letup 360ms var(--pegas);}
.tombol.berhasil > * {visibility: hidden;}
.formulir {display: grid; gap: var(--j-4);}
.isian {display: grid; gap: 6px; min-width: 0; align-content: start;}
.isian > label, .isian > .label, fieldset.isian > legend {font-weight: 650; font-size: var(--t-sedang); padding: 0;}
fieldset.isian {border: 0; margin: 0; padding: 0; min-width: 0;}
fieldset.isian > legend {margin-bottom: 6px;}
.wajib {color: var(--aksen-teks); margin-left: 2px;}
.opsional {color: var(--redup); font-weight: 500; font-size: var(--t-kecil); margin-left: 4px;}
.bantu {font-size: var(--t-kecil); color: var(--redup);}
.salah {display: none; align-items: flex-start; gap: 6px; font-size: var(--t-kecil); font-weight: 620; color: var(--merah);}
.salah::before {content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--merah); color: var(--kartu); font-size: 11px; font-weight: 800;}
.isian.galat .salah {display: flex; animation: masuk var(--sedang) var(--lentur);}
.isian.galat .bantu {display: none;}
.masukan {display: block; width: 100%; min-height: var(--tinggi-isian); padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--garis-isian); background: var(--isian-latar); color: var(--teks); font-size: 16px; line-height: 1.4; transition: border-color var(--cepat), box-shadow var(--cepat), background var(--cepat);}
@media (min-width: 760px) {
.masukan {font-size: var(--t-dasar);}
}
.masukan::placeholder {color: var(--samar);}
.masukan:hover, .masukan[data-demo="hover"] {border-color: color-mix(in srgb, var(--merek) 55%, var(--garis-isian));}
.masukan:focus, .masukan[data-demo="fokus"] {outline: 0; border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 16%, transparent);}
.masukan:disabled, .masukan[readonly] {background: var(--abu-latar); border-color: var(--garis); color: var(--redup); cursor: not-allowed;}
.masukan[readonly] {cursor: default;}
textarea.masukan {min-height: 96px; resize: vertical;}
select.masukan {-webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--redup) 50%), linear-gradient(135deg, var(--redup) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;}
.masukan[type="date"], .masukan[type="time"] {-webkit-appearance: none; appearance: none;}
.masukan::-webkit-calendar-picker-indicator {opacity: .6; cursor: pointer; padding: 4px; border-radius: 6px; transition: opacity var(--cepat), background var(--cepat);}
.masukan::-webkit-calendar-picker-indicator:hover {opacity: 1; background: var(--merek-muda);}
.isian.galat .masukan, .masukan[aria-invalid="true"] {border-color: var(--merah); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merah) 16%, transparent);}
.isian.goyang .masukan, .isian.goyang .pilihan-grup, .isian.goyang .skor {animation: goyang 340ms var(--lentur);}
@keyframes goyang {20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }}
.masukan-ikon {position: relative;}
.masukan-ikon > .i {position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none;}
.masukan-ikon > .masukan {padding-left: 42px;}
.masukan-ikon > .tombol-dalam {position: absolute; right: 3px; top: 50%; transform: translateY(-50%);}
.masukan-ikon:has(.tombol-dalam) > .masukan {padding-right: 48px;}
.tombol-dalam {display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--redup); cursor: pointer; transition: background var(--cepat), color var(--cepat);}
.tombol-dalam:hover {background: var(--merek-muda); color: var(--merek);}
.masukan-akhiran {display: flex; align-items: stretch;}
.masukan-akhiran > .masukan {border-top-right-radius: 0; border-bottom-right-radius: 0;}
.masukan-akhiran > span {display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--garis-isian); border-left: 0; border-radius: 0 12px 12px 0; background: var(--kartu-2); color: var(--redup); font-weight: 620; font-size: var(--t-sedang); white-space: nowrap;}
.kisi-isian {display: grid; gap: var(--j-4);}
@media (min-width: 560px) {
.kisi-isian.dua {grid-template-columns: repeat(2, minmax(0, 1fr));}
.kisi-isian.tiga {grid-template-columns: repeat(3, minmax(0, 1fr));}
.kisi-isian .lebar-penuh {grid-column: 1 / -1;}
}
.penambah {display: inline-grid; grid-template-columns: 46px minmax(56px, 72px) 46px; border: 1.5px solid var(--garis-isian); border-radius: 12px; overflow: hidden; background: var(--isian-latar); transition: border-color var(--cepat), box-shadow var(--cepat);}
.penambah:focus-within {border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 16%, transparent);}
.penambah button {border: 0; background: transparent; color: var(--merek); font-size: 20px; font-weight: 600; cursor: pointer; transition: background var(--cepat);}
.penambah button:hover {background: var(--merek-muda);}
.penambah button:active {background: color-mix(in srgb, var(--merek) 18%, transparent);}
.penambah input {width: 100%; min-height: 43px; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 17px; -moz-appearance: textfield;}
.penambah input:focus {outline: 0;}
.penambah input::-webkit-inner-spin-button, .penambah input::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
.pilihan-grup {display: grid; gap: var(--j-2);}
@media (min-width: 560px) {
.pilihan-grup.dua {grid-template-columns: repeat(2, 1fr);}
.pilihan-grup.tiga {grid-template-columns: repeat(3, 1fr);}
.pilihan-grup.empat {grid-template-columns: repeat(4, 1fr);}
}
.pilihan-grup.empat-hp {grid-template-columns: repeat(2, 1fr);}
@media (min-width: 560px) {
.pilihan-grup.empat-hp {grid-template-columns: repeat(4, 1fr);}
}
.pilihan-kartu {position: relative; display: block; cursor: pointer; min-width: 0;}
.pilihan-kartu > input {position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;}
.pilihan-kartu > .pk {display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; align-items: start; height: 100%; min-height: 52px; padding: 12px 13px; border-radius: 12px; border: 1.5px solid var(--garis-kuat); background: var(--kartu); transition: border-color var(--cepat), background var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur);}
.pilihan-kartu > .pk::before {content: ""; grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--garis-isian); background: var(--isian-latar); transition: border var(--cepat) var(--lentur), background var(--cepat);}
.pilihan-kartu > input[type="checkbox"] + .pk::before {border-radius: 6px;}
.pilihan-kartu .pk b {font-weight: 680; font-size: var(--t-sedang);}
.pilihan-kartu .pk small {grid-column: 2; font-size: var(--t-kecil); color: var(--redup); line-height: 1.35;}
.pilihan-kartu:hover > .pk {border-color: color-mix(in srgb, var(--merek) 45%, var(--garis-kuat)); background: var(--merek-lembut);}
.pilihan-kartu:active > .pk {transform: scale(.985);}
.pilihan-kartu > input:checked + .pk {border-color: var(--merek); background: var(--merek-lembut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 14%, transparent);}
.pilihan-kartu > input:checked + .pk::before {border: 6px solid var(--merek); background: var(--kartu);}
.pilihan-kartu > input[type="checkbox"]:checked + .pk::before {border: 0; background: var(--merek); box-shadow: inset 0 0 0 0 transparent;}
.pilihan-kartu > input:focus-visible + .pk {outline: 2.5px solid var(--aksen); outline-offset: 2px;}
.pilihan-kartu > input:disabled + .pk {opacity: .5; cursor: not-allowed;}
.pilihan-kartu.p1 > input:checked + .pk {border-color: var(--merah); background: var(--merah-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merah) 14%, transparent);}
.pilihan-kartu.p1 > input:checked + .pk::before {border-color: var(--merah);}
.pilihan-kartu.bahaya > input:checked + .pk {border-color: var(--merah); background: var(--merah-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merah) 14%, transparent);}
.pilihan-kartu.bahaya > input:checked + .pk::before {border-color: var(--merah);}
.pilihan-kartu.baik > input:checked + .pk {border-color: var(--hijau); background: var(--hijau-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hijau) 14%, transparent);}
.pilihan-kartu.baik > input:checked + .pk::before {border-color: var(--hijau);}
.pilihan-kartu.sedang > input:checked + .pk {border-color: var(--kuning-garis); background: var(--kuning-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kuning-garis) 16%, transparent);}
.pilihan-kartu.sedang > input:checked + .pk::before {border-color: var(--kuning-garis);}
.pilihan-kartu.ringkas > .pk {grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 10px 8px;}
.pilihan-kartu.ringkas > .pk::before {display: none;}
.pilihan-kartu.ringkas .pk small {grid-column: 1;}
.centang {position: relative; display: inline-flex; align-items: flex-start; gap: 10px; min-height: var(--sentuh); padding: 11px 0; cursor: pointer; font-size: var(--t-sedang); line-height: 1.4;}
.centang > input {position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer;}
.centang > .kotak {position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--garis-isian); background: var(--isian-latar); transition: background var(--cepat), border-color var(--cepat), box-shadow var(--cepat);}
.centang > .kotak::after {content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform var(--sedang) var(--pegas);}
.centang:hover > .kotak {border-color: var(--merek); box-shadow: 0 0 0 4px var(--merek-muda);}
.centang > input:checked + .kotak {background: var(--gradasi); border-color: transparent;}
.centang > input:checked + .kotak::after {transform: rotate(45deg) scale(1);}
.centang > input:indeterminate + .kotak {background: var(--merek); border-color: transparent;}
.centang > input:indeterminate + .kotak::after {left: 5px; top: 9px; width: 10px; height: 0; border-width: 0 0 2.5px; transform: none;}
.centang > input:focus-visible + .kotak {outline: 2.5px solid var(--aksen); outline-offset: 2px;}
.centang > input:disabled + .kotak {opacity: .45;}
.centang > input:disabled ~ span {color: var(--redup);}
.centang.tanpa-teks {padding: 11px; margin: -11px;}
.skor-baris {border: 0; margin: 0; padding: var(--j-4) 0; min-width: 0; display: grid; gap: 10px; border-top: 1px solid var(--garis);}
.skor-baris:first-of-type {border-top: 0;}
.skor-baris legend {float: left; width: 100%; padding: 0; font-weight: 680; font-size: var(--t-dasar); display: flex; justify-content: space-between; gap: var(--j-2);}
.skor-baris legend .nomor-skor {color: var(--redup); font-weight: 600; font-variant-numeric: tabular-nums;}
.skor {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; clear: both;}
.skor label {position: relative; display: block; cursor: pointer;}
.skor input {position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;}
.skor span {display: grid; place-items: center; min-height: 50px; border-radius: 12px; border: 1.5px solid var(--garis-kuat); background: var(--kartu); font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--redup); transition: background var(--cepat), color var(--cepat), border-color var(--cepat), transform var(--cepat) var(--lentur), box-shadow var(--cepat);}
.skor label:hover span {border-color: var(--merek); color: var(--merek); background: var(--merek-lembut);}
.skor label:active span {transform: scale(.93);}
.skor input:checked + span {background: var(--gradasi); color: #fff; border-color: transparent; box-shadow: var(--bayang-merek); animation: letup 300ms var(--pegas);}
.skor input:focus-visible + span {outline: 2.5px solid var(--aksen); outline-offset: 2px;}
.skor-kunci {display: flex; justify-content: space-between; font-size: var(--t-mini); color: var(--redup); font-weight: 600; margin-top: -2px;}
.unggah {position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: var(--j-6) var(--j-4); border: 2px dashed var(--garis-isian); border-radius: var(--sudut-b); background: var(--kartu-2); cursor: pointer; transition: border-color var(--cepat), background var(--cepat), transform var(--sedang) var(--lentur);}
.unggah > input[type="file"] {position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;}
.unggah .unggah-ikon {display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--merek-muda); color: var(--merek); margin-bottom: 4px; transition: transform var(--sedang) var(--pegas);}
.unggah b {font-size: var(--t-dasar);}
.unggah span {font-size: var(--t-kecil); color: var(--redup);}
.unggah u {color: var(--merek); font-weight: 650; text-underline-offset: 3px;}
.unggah:hover, .unggah[data-demo="hover"] {border-color: var(--merek); background: var(--merek-lembut);}
.unggah:hover .unggah-ikon {transform: translateY(-3px);}
.unggah:focus-within {outline: 2.5px solid var(--aksen); outline-offset: 2px;}
.unggah.seret, .unggah[data-demo="seret"] {border-color: var(--merek); border-style: solid; background: var(--merek-muda); transform: scale(1.01);}
.unggah.seret .unggah-ikon, .unggah[data-demo="seret"] .unggah-ikon {transform: translateY(-4px) scale(1.08); background: var(--gradasi); color: #fff;}
.isian.galat .unggah {border-color: var(--merah); background: color-mix(in srgb, var(--merah-latar) 50%, var(--kartu));}
@media (max-width: 759.98px) {
.unggah .hanya-laptop-teks {display: none;}
}
.berkas-terpilih {display: flex; align-items: center; gap: var(--j-3); padding: 10px 12px; border-radius: var(--sudut); border: 1px solid var(--garis); background: var(--kartu); animation: masuk var(--sedang) var(--lentur); min-width: 0;}
.berkas-terpilih .ikon-berkas {flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--merek-muda); color: var(--merek);}
.berkas-terpilih .nama-berkas {flex: 1; min-width: 0;}
.berkas-terpilih .nama-berkas b {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sedang);}
.berkas-terpilih .nama-berkas span {font-size: var(--t-kecil); color: var(--redup);}
.bagian-nomor {display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--gradasi); color: #fff; font-size: 13px; font-weight: 800;}
.ringkas {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
@media (min-width: 760px) {
.ringkas {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--j-4);}
}
@media (min-width: 760px) {
.angka-kartu {padding: 18px 20px;}
}
.angka-kartu[data-demo="hover"] {color: inherit; transform: translateY(-2px); box-shadow: var(--bayang-3); border-color: color-mix(in srgb, var(--merek) 30%, var(--garis));}
.angka-kartu:active {transform: scale(.98);}
@media (min-width: 760px) {
.angka-kartu .nilai {font-size: 34px;}
}
.angka-kartu .ket.merah {color: var(--merah); font-weight: 650;}
.angka-kartu .panah-sudut {position: absolute; right: 12px; top: 12px; color: var(--samar); transition: transform var(--cepat) var(--lentur), color var(--cepat);}
.angka-kartu:hover .panah-sudut {transform: translate(2px, -2px); color: var(--merek);}
.angka-kartu.penting {background: var(--gradasi); border-color: transparent; color: #fff; box-shadow: 0 12px 30px rgba(11, 18, 48, .3); overflow: hidden;}
.angka-kartu.penting::after {content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .05); pointer-events: none;}
.angka-kartu.penting:hover {background: var(--gradasi-sorot); border-color: transparent;}
.angka-kartu.penting .label, .angka-kartu.penting .ket {color: var(--pada-merek-redup);}
.angka-kartu.penting .panah-sudut {color: rgba(255, 255, 255, .6);}
.angka-kartu.penting .titik-aksen {width: 7px; height: 7px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 3px rgba(236, 95, 115, .25);}
.baris[data-demo="hover"] {background: var(--merek-lembut); color: inherit;}
.baris::before {content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: transparent;}
.baris.p1::before {background: var(--merah);}
.baris.p2::before {background: var(--kuning-garis);}
.baris.p3::before {background: var(--biru);}
.baris.p4::before {background: var(--garis-kuat);}
.baris.lewat {background: color-mix(in srgb, var(--merah-latar) 45%, transparent);}
.baris.lewat:hover {background: color-mix(in srgb, var(--merah-latar) 75%, transparent);}
.daftar > li:first-child > .baris {border-radius: var(--sudut-b) var(--sudut-b) 0 0;}
.daftar > li:last-child > .baris {border-radius: 0 0 var(--sudut-b) var(--sudut-b);}
.daftar > li:only-child > .baris {border-radius: var(--sudut-b);}
.baris .judul.bungkus {white-space: normal; text-wrap: pretty;}
.tab {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--abu-latar);}
.tab a, .tab button {position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--redup); font-weight: 650; font-size: var(--t-sedang); text-decoration: none; cursor: pointer; text-align: center; transition: background var(--cepat), color var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur);}
.tab a:hover, .tab button:hover {color: var(--teks); background: color-mix(in srgb, var(--kartu) 55%, transparent);}
.tab a:active, .tab button:active {transform: scale(.97);}
.tab [aria-current="page"], .tab [aria-selected="true"] {background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2);}
@media (min-width: 760px) {
.tab {display: flex; gap: var(--j-1); padding: 0; background: none; border-radius: 0; border-bottom: 1px solid var(--garis);}
.tab a, .tab button {min-height: 44px; border-radius: 0; padding: 0 14px;}
.tab a:hover, .tab button:hover {background: none;}
.tab [aria-current="page"], .tab [aria-selected="true"] {background: none; box-shadow: none; color: var(--merek);}
.tab [aria-current="page"]::after, .tab [aria-selected="true"]::after {content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gradasi); animation: garis-tab var(--sedang) var(--lentur);}
}
@keyframes garis-tab {from { transform: scaleX(.3); opacity: 0; }}
.chip:active > span, a.chip:active {transform: scale(.95);}
.chip > input:checked + span::before {content: ""; width: 5px; height: 9px; margin: -2px 1px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.chip.chip-hapus > span {padding-right: 4px; background: var(--merek-muda); border-color: transparent; color: var(--merek);}
.chip-hapus button {display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background var(--cepat);}
.chip-hapus button:hover {background: color-mix(in srgb, var(--merek) 16%, transparent);}
.cari {position: relative; min-width: 0;}
.cari > .i {position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; transition: color var(--cepat);}
.cari > input {padding-left: 44px; padding-right: 44px; border-radius: var(--bulat);}
.cari:focus-within > .i {color: var(--merek);}
.cari kbd {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--garis-kuat); background: var(--kartu-2); font: 600 12px var(--huruf-mono); color: var(--redup);}
.cari:focus-within kbd {opacity: 0;}
.alat {display: grid; gap: var(--j-3); margin-bottom: var(--j-4);}
@media (min-width: 760px) {
.alat {grid-template-columns: minmax(0, 1fr) auto; align-items: center;}
}
.wadah-tabel {overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--sudut-b); background: var(--kartu); box-shadow: var(--bayang-2); overscroll-behavior-x: contain;}
.tabel {width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sedang);}
.tabel th {position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--t-kecil); font-weight: 700; color: var(--redup); background: var(--kartu-2); padding: 11px 14px; border-bottom: 1px solid var(--garis); white-space: nowrap;}
.tabel td {padding: 12px 14px; border-bottom: 1px solid var(--garis); vertical-align: middle;}
.tabel tbody tr {transition: background var(--cepat);}
.tabel tbody tr:hover {background: var(--merek-lembut);}
.tabel tbody tr:last-child td {border-bottom: 0;}
.tabel tr.dipilih {background: color-mix(in srgb, var(--merek-muda) 70%, transparent);}
.tabel tr.galat-baris {background: color-mix(in srgb, var(--merah-latar) 60%, transparent);}
.tabel .angka, .tabel .kanan {text-align: right; font-variant-numeric: tabular-nums;}
.tabel .lebar-centang {width: 48px;}
.tabel a.nama {color: var(--teks); font-weight: 660; text-decoration: none;}
.tabel a.nama:hover {color: var(--merek); text-decoration: underline; text-underline-offset: 3px;}
.kanban {display: grid; gap: var(--j-5);}
.kolom {min-width: 0;}
.kolom-kepala {display: flex; align-items: center; gap: var(--j-2); padding: 0 2px var(--j-2);}
.kolom-kepala h2 {font-size: var(--t-sedang); font-weight: 720;}
.kolom-kepala .jumlah {padding: 0 7px; border-radius: var(--bulat); background: var(--abu-latar); color: var(--redup); font-size: var(--t-kecil); font-weight: 700; font-variant-numeric: tabular-nums;}
.kolom-kepala .titik-tahap {width: 8px; height: 8px; border-radius: 50%; background: var(--garis-kuat);}
.kolom-kepala .pilih-kolom {margin-left: auto;}
.kolom-isi {display: grid; gap: var(--j-2);}
.kolom-lagi {display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; color: var(--merek); font-weight: 650; font-size: var(--t-sedang); text-decoration: none; border: 1px dashed var(--garis-kuat); transition: background var(--cepat), border-color var(--cepat);}
.kolom-lagi:hover {background: var(--merek-lembut); border-color: var(--merek);}
.kolom-kosong {display: grid; place-items: center; gap: 4px; padding: var(--j-5) var(--j-3); border-radius: 12px; border: 1px dashed var(--garis-kuat); color: var(--redup); font-size: var(--t-kecil); text-align: center;}
@media (min-width: 760px) {
.kanban {grid-auto-flow: column; grid-auto-columns: 268px; gap: var(--j-3); overflow-x: auto; padding-bottom: var(--j-3); scroll-snap-type: x proximity; overscroll-behavior-x: contain; align-items: start;}
.kolom {scroll-snap-align: start; background: var(--kartu-2); border: 1px solid var(--garis); border-radius: var(--sudut-b); padding: var(--j-3) var(--j-2) var(--j-2); max-height: 640px; overflow-y: auto;}
.kolom-kepala {position: sticky; top: calc(-1 * var(--j-3)); padding: var(--j-1) var(--j-2) var(--j-2); background: var(--kartu-2); z-index: 1;}
}
.kartu-kandidat {position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 11px 12px; border-radius: 13px; background: var(--kartu); border: 1px solid var(--garis); box-shadow: var(--bayang-1); transition: border-color var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur), background var(--cepat);}
.kartu-kandidat:hover {border-color: color-mix(in srgb, var(--merek) 35%, var(--garis)); box-shadow: var(--bayang-2); transform: translateY(-1px);}
.kartu-kandidat:has(input:checked) {border-color: var(--merek); background: var(--merek-lembut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 14%, transparent);}
.kartu-kandidat .centang {min-height: 0; padding: 0; margin-top: 1px;}
.kartu-kandidat .nama {font-weight: 680; color: var(--teks); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.kartu-kandidat .nama::after {content: ""; position: absolute; inset: 0 0 0 40px; border-radius: 13px;}
.kartu-kandidat .nama:hover {color: var(--merek);}
.kartu-kandidat .nama:focus-visible {outline: 0;}
.kartu-kandidat .nama:focus-visible::after {outline: 2.5px solid var(--aksen); outline-offset: 2px;}
.kartu-kandidat .meta {grid-column: 2; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums;}
.kartu-kandidat .baris-lencana {grid-column: 2; margin-top: 2px;}
.kemajuan {display: grid; gap: 6px;}
.kemajuan-label {display: flex; justify-content: space-between; gap: var(--j-2); font-size: var(--t-kecil); color: var(--redup);}
.kemajuan-label b {color: var(--teks); font-variant-numeric: tabular-nums;}
progress.bar, meter.bar {-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--bulat); background: var(--abu-latar); overflow: hidden;}
progress.bar::-webkit-progress-bar {background: var(--abu-latar); border-radius: var(--bulat);}
progress.bar::-webkit-progress-value {background: var(--gradasi); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur);}
progress.bar::-moz-progress-bar {background: var(--gradasi); border-radius: var(--bulat);}
progress.bar.penuh::-webkit-progress-value {background: var(--hijau);}
progress.bar.penuh::-moz-progress-bar {background: var(--hijau);}
meter.bar::-webkit-meter-bar {background: var(--abu-latar); border: 0; border-radius: var(--bulat); height: 8px;}
meter.bar::-webkit-meter-optimum-value {background: var(--hijau); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur);}
meter.bar::-webkit-meter-suboptimum-value {background: var(--kuning-garis); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur);}
meter.bar::-webkit-meter-even-less-good-value {background: var(--merah); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur);}
meter.bar:-moz-meter-optimum::-moz-meter-bar {background: var(--hijau);}
meter.bar:-moz-meter-sub-optimum::-moz-meter-bar {background: var(--kuning-garis);}
meter.bar:-moz-meter-sub-sub-optimum::-moz-meter-bar {background: var(--merah);}
.bar-tebal {height: 12px !important;}
.bar-tebal::-webkit-meter-bar {height: 12px !important;}
.tahap {list-style: none; margin: 0; padding: var(--j-4) var(--j-1); display: flex; counter-reset: tahap;}
.tahap li {flex: 1 1 0; min-width: 0; position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; font-size: var(--t-mini); line-height: 1.25; color: var(--redup); font-weight: 650; overflow-wrap: anywhere; padding: 0 2px;}
.tahap small {display: none; font-weight: 500; font-size: var(--t-mini); color: var(--redup);}
@media (min-width: 520px) {
.tahap {padding: var(--j-5) var(--j-4);}
.tahap li {font-size: var(--t-kecil);}
.tahap small {display: block;}
}
.tahap li::before {content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 3px; border-radius: 3px; background: var(--garis); transition: background var(--lambat) var(--lentur);}
.tahap li:first-child::before {display: none;}
.tahap .bulat {position: relative; z-index: 1; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--abu-latar); color: var(--redup); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background var(--sedang), color var(--sedang), box-shadow var(--sedang), transform var(--sedang) var(--pegas);}
.tahap .bulat .i {width: 16px; height: 16px; stroke-width: 2.8;}
.tahap .selesai {color: var(--teks);}
.tahap .selesai::before, .tahap .sekarang::before, .tahap .dikembalikan::before, .tahap .ditunda::before, .tahap .ditolak::before {background: var(--merek);}
.tahap .selesai .bulat {background: var(--gradasi); color: #fff; box-shadow: var(--bayang-merek);}
.tahap .sekarang {color: var(--merek);}
.tahap .sekarang .bulat {background: var(--kartu); color: var(--merek); box-shadow: 0 0 0 3px var(--merek); animation: denyut 2s var(--lentur) infinite;}
@keyframes denyut {0%, 100% { box-shadow: 0 0 0 3px var(--merek), 0 0 0 3px transparent; } 50% { box-shadow: 0 0 0 3px var(--merek), 0 0 0 9px color-mix(in srgb, var(--merek) 16%, transparent); }}
.tahap .dikembalikan {color: var(--kuning);}
.tahap .dikembalikan .bulat {background: var(--kuning-latar); color: var(--kuning); box-shadow: 0 0 0 3px var(--kuning-garis);}
.tahap .ditunda {color: var(--kuning);}
.tahap .ditunda .bulat {background: var(--kartu); color: var(--kuning); outline: 2.5px dashed var(--kuning-garis); outline-offset: 1px;}
.tahap .ditolak {color: var(--merah);}
.tahap .ditolak .bulat {background: var(--merah); color: #fff;}
.tahap .gugur {opacity: .5;}
.tahap .gugur .bulat {background: transparent; box-shadow: inset 0 0 0 1.5px var(--garis-kuat);}
.tahap .baru-selesai .bulat {animation: letup 420ms var(--pegas);}
.langkah {list-style: none; margin: 0 0 var(--j-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;}
.langkah li {display: grid; gap: 8px; font-size: var(--t-kecil); font-weight: 650; color: var(--redup);}
.langkah li::before {content: ""; height: 4px; border-radius: 4px; background: var(--garis); transition: background var(--lambat) var(--lentur);}
.langkah li span {display: flex; align-items: center; gap: 6px;}
.langkah li b {display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--abu-latar); font-size: var(--t-mini);}
.langkah .selesai::before, .langkah .sekarang::before {background: var(--gradasi);}
.langkah .selesai {color: var(--teks);}
.langkah .selesai b {background: var(--merek); color: var(--kartu);}
.langkah .sekarang {color: var(--merek);}
.langkah .sekarang b {background: var(--gradasi); color: #fff;}
.garis-waktu {list-style: none; margin: 0; padding: var(--j-2) var(--j-4) var(--j-4);}
@media (min-width: 760px) {
.garis-waktu {padding: var(--j-2) var(--j-6) var(--j-5);}
}
.garis-waktu li {position: relative; padding: 10px 0 10px 28px; display: grid; gap: 2px;}
.garis-waktu li::before {content: ""; position: absolute; left: 6px; top: 24px; bottom: -10px; width: 2px; background: var(--garis);}
.garis-waktu li:last-child::before {display: none;}
.garis-waktu li::after {content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--kartu); box-shadow: inset 0 0 0 3.5px var(--merek);}
.garis-waktu li.gw-hijau::after {box-shadow: inset 0 0 0 7px var(--hijau);}
.garis-waktu li.gw-kuning::after {box-shadow: inset 0 0 0 3.5px var(--kuning-garis);}
.garis-waktu li.gw-merah::after {box-shadow: inset 0 0 0 7px var(--merah);}
.garis-waktu li.gw-abu::after {box-shadow: inset 0 0 0 3.5px var(--garis-kuat);}
.garis-waktu b {font-weight: 680; font-size: var(--t-sedang);}
.garis-waktu .meta {font-size: var(--t-kecil); color: var(--redup);}
.garis-waktu blockquote {margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--kartu-2); border: 1px solid var(--garis); font-size: var(--t-sedang);}
.garis-waktu li.baru {animation: masuk var(--lambat) var(--lentur);}
.garis-waktu li.baru::after {animation: letup 420ms var(--pegas) 120ms both;}
.rincian {margin: 0; display: grid;}
.rincian > div {display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--j-3); padding: 10px 0; border-bottom: 1px dashed var(--garis);}
.rincian > div:last-child {border-bottom: 0;}
.rincian dt {color: var(--redup); font-size: var(--t-sedang);}
.rincian dd {margin: 0; font-weight: 620; text-align: right; overflow-wrap: anywhere;}
.rincian.kiri dd {text-align: left;}
.rincian-grup + .rincian-grup {margin-top: var(--j-4);}
.rincian-grup > h3 {margin-bottom: 2px;}
.agenda {list-style: none; margin: 0; padding: 6px 0;}
.agenda li a, .agenda li > div {display: flex; gap: var(--j-3); align-items: center; padding: 10px var(--j-4); color: inherit; text-decoration: none; border-radius: 12px; transition: background var(--cepat);}
.agenda li a:hover {background: var(--merek-lembut); color: inherit;}
.agenda .tgl {flex: none; width: 46px; padding: 5px 0 6px; text-align: center; border-radius: 12px; background: var(--aksen-muda); color: var(--aksen-teks); line-height: 1.05;}
.agenda .tgl small {display: block; font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em;}
.agenda .tgl b {display: block; font-size: 19px; font-weight: 800;}
.agenda .teks {display: grid; gap: 1px; min-width: 0;}
.agenda .teks b {font-weight: 660; font-size: var(--t-sedang);}
.agenda .teks span {font-size: var(--t-kecil); color: var(--redup);}
.peringatan {display: flex; gap: var(--j-3); align-items: flex-start; padding: 13px 14px; border-radius: var(--sudut); background: var(--biru-latar); color: var(--teks); font-size: var(--t-sedang);}
.peringatan > .i {color: var(--biru); margin-top: 1px;}
.peringatan b {display: block; margin-bottom: 2px;}
.peringatan .isi-peringatan {flex: 1; min-width: 0; display: grid; gap: 4px;}
.peringatan.p-kuning {background: var(--kuning-latar);}
.peringatan.p-kuning > .i {color: var(--kuning);}
.peringatan.p-galat {background: var(--merah-latar);}
.peringatan.p-galat > .i {color: var(--merah);}
.peringatan.p-berhasil {background: var(--hijau-latar);}
.peringatan.p-berhasil > .i {color: var(--hijau);}
.peringatan.p-merek {background: var(--merek-muda);}
.peringatan.p-merek > .i {color: var(--merek);}
.peringatan.goyang {animation: goyang 340ms var(--lentur);}
.paginasi {display: flex; align-items: center; justify-content: space-between; gap: var(--j-2); margin-top: var(--j-4);}
.paginasi .halaman-ke {font-size: var(--t-sedang); color: var(--redup);}
.paginasi ol {list-style: none; display: none; gap: 4px; margin: 0; padding: 0;}
.paginasi ol a {display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; color: var(--teks); text-decoration: none; font-weight: 620; font-variant-numeric: tabular-nums; transition: background var(--cepat), color var(--cepat);}
.paginasi ol a:hover {background: var(--merek-muda); color: var(--merek);}
.paginasi ol a[aria-current="page"] {background: var(--gradasi); color: #fff;}
.paginasi ol .elip {display: grid; place-items: center; min-width: 24px; color: var(--redup);}
@media (min-width: 760px) {
.paginasi ol {display: flex;}
.paginasi .halaman-ke {display: none;}
}
.bar-aksi {position: sticky; bottom: 0; z-index: 15; display: flex; gap: 10px; margin: var(--j-5) calc(-1 * var(--j-4)) calc(-1 * var(--j-12) - env(safe-area-inset-bottom)); padding: 12px var(--j-4) calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--kartu) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--garis);}
.bar-aksi > .tombol {flex: 1; min-width: 0;}
.bar-aksi > .tombol-ikon {flex: none;}
.bar-aksi .status-aksi {margin: auto; animation: masuk var(--sedang) var(--lentur);}
@media (min-width: 760px) {
.bar-aksi {position: static; margin: var(--j-6) 0 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end;}
.bar-aksi > .tombol {flex: none; min-width: 148px;}
.bar-aksi .status-aksi {margin: 0 0 0 auto;}
}
.bar-aksi.lengket-laptop {position: sticky;}
.bar-pilih {position: fixed; z-index: 35; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 640px); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--gradasi); color: #fff; box-shadow: var(--bayang-4); transform: translate(-50%, 0); transition: transform var(--sedang) var(--lentur), opacity var(--sedang);}
.js .bar-pilih:not(.tampil) {transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; transition-timing-function: var(--keluar); transition-duration: 160ms;}
.bar-pilih .jumlah-pilih {font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: auto;}
.bar-pilih .tombol {background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); color: #fff; min-height: 42px; padding: 0 12px; font-size: var(--t-sedang);}
.bar-pilih .tombol:hover {background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3); color: #fff;}
.bar-pilih .tombol.putih {background: #fff; color: #1f2f6b; border-color: transparent;}
.bar-pilih .tombol.putih:hover {background: #eef1fb; color: #1f2f6b;}
.bar-pilih .tombol-ikon {width: 42px; padding: 0; background: transparent; border-color: transparent;}
.ringkas-nilai {position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: var(--j-3); margin: var(--j-5) calc(-1 * var(--j-4)) calc(-1 * var(--j-12) - env(safe-area-inset-bottom)); padding: 10px var(--j-4) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--kartu) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--garis);}
.ringkas-nilai .angka-besar {font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;}
.ringkas-nilai .angka-besar small {font-size: 13px; font-weight: 650; color: var(--redup); letter-spacing: 0;}
.ringkas-nilai .tengah {flex: 1; min-width: 0; display: grid; gap: 5px;}
.ringkas-nilai .tengah span {font-size: var(--t-kecil); color: var(--redup);}
.ringkas-nilai .tombol {flex: none;}
.angka-ganti {display: inline-block;}
.angka-ganti.ganti {animation: ganti-angka 300ms var(--lentur);}
.kilat .tautan-kilat {color: #b4c1ff; font-weight: 700; text-decoration: none; padding: 6px 8px; border-radius: 8px;}
.kilat .tautan-kilat:hover {background: rgba(255, 255, 255, .1); color: #fff;}
.kilat.statis {animation: none;}
dialog.lembar {position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 48px); margin: 0; overflow: auto; padding: 8px var(--j-5) calc(var(--j-5) + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; background: var(--kartu); color: var(--teks); box-shadow: 0 -12px 48px rgba(0, 0, 0, .22); transform: translateY(100%); transition: transform 160ms var(--keluar);}
dialog.lembar.buka {transform: none; transition: transform var(--sedang) var(--lentur);}
dialog.lembar::backdrop {background: var(--tirai); opacity: 0; transition: opacity 160ms var(--keluar); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);}
dialog.lembar.buka::backdrop {opacity: 1; transition: opacity var(--sedang) var(--lentur);}
.lembar .pegangan {width: 40px; height: 5px; border-radius: 5px; background: var(--garis-kuat); margin: 0 auto 14px; cursor: grab; touch-action: none;}
.lembar .lembar-kepala {display: flex; align-items: flex-start; gap: var(--j-3); margin-bottom: var(--j-4);}
.lembar .lembar-ikon {flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--merek-muda); color: var(--merek);}
.lembar .lembar-ikon.bahaya {background: var(--merah-latar); color: var(--merah);}
.lembar .lembar-ikon.kuning {background: var(--kuning-latar); color: var(--kuning);}
.lembar h2 {font-size: var(--t-judul-3); font-weight: 750;}
.lembar .lembar-kepala p {margin-top: 4px; color: var(--redup); font-size: var(--t-sedang);}
.lembar .lembar-tombol {display: flex; gap: 10px; margin-top: var(--j-5);}
.lembar .lembar-tombol .tombol {flex: 1;}
@media (min-width: 760px) {
dialog.lembar {inset: 0; margin: auto; width: min(480px, calc(100% - 48px)); height: fit-content; max-height: calc(100dvh - 96px); padding: var(--j-6); border-radius: 20px; box-shadow: var(--bayang-4); opacity: 0; transform: translateY(12px) scale(.97); transition: opacity 140ms var(--keluar), transform 140ms var(--keluar);}
dialog.lembar.buka {opacity: 1; transform: none; transition: opacity var(--sedang) var(--lentur), transform var(--sedang) var(--lentur);}
.lembar .pegangan {display: none;}
.lembar .lembar-tombol {justify-content: flex-end;}
.lembar .lembar-tombol .tombol {flex: none; min-width: 120px;}
}
.lembar-pratinjau {position: relative; display: grid; gap: 0; border-radius: var(--sudut-b); overflow: hidden; background: var(--tirai); padding-top: 64px;}
.lembar-pratinjau > .lembar-statis {position: static; display: block; transform: none; width: 100%; border-radius: 24px 24px 0 0; background: var(--kartu); padding: 8px var(--j-5) var(--j-5);}
.kosong .kosong-ikon {position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: var(--j-2); border-radius: 26px; background: var(--merek-muda); color: var(--merek);}
.kosong .kosong-ikon::before {content: ""; position: absolute; inset: -10px; border-radius: 32px; border: 1.5px dashed var(--garis-kuat);}
.kosong .kosong-ikon::after {content: ""; position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 4px var(--kartu);}
.kosong .kosong-ikon .i {width: 32px; height: 32px; stroke-width: 1.8;}
.kosong .tombol {margin-top: var(--j-2);}
.kerangka {display: block; border-radius: 8px; background: linear-gradient(90deg, var(--abu-latar) 0%, var(--abu-latar) 35%, color-mix(in srgb, var(--abu-latar) 40%, var(--kartu)) 50%, var(--abu-latar) 65%, var(--abu-latar) 100%); background-size: 300% 100%; animation: kilau 1.4s linear infinite;}
@keyframes kilau {from { background-position: 100% 0; } to { background-position: 0 0; }}
.kerangka.teks {height: 12px;}
.kerangka.judul {height: 16px; width: 60%;}
.kerangka.bulat {width: 40px; height: 40px; border-radius: 12px; flex: none;}
.kerangka.angka {height: 30px; width: 50%;}
.sandi-sekali {display: grid; gap: var(--j-4); padding: var(--j-5); border-radius: var(--sudut-b); background: var(--kartu); border: 1.5px solid var(--kuning-garis); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kuning-garis) 16%, transparent), var(--bayang-3);}
.sandi-kotak {display: flex; align-items: center; gap: var(--j-2); padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--kartu-2); border: 1px dashed var(--garis-kuat);}
.sandi-kotak code {flex: 1; min-width: 0; font: 750 22px/1.3 var(--huruf-mono); letter-spacing: .12em; overflow-wrap: anywhere; color: var(--teks);}
.sandi-kotak .tombol.tersalin {background: var(--hijau-latar); border-color: var(--hijau); color: var(--hijau);}
.masuk {min-height: 100dvh; display: grid; grid-template-rows: auto 1fr;}
.masuk-sisi {position: relative; overflow: hidden; color: #fff; background: var(--gradasi); padding: calc(var(--j-8) + env(safe-area-inset-top)) var(--j-5) 72px;}
.masuk-sisi::before {content: ""; position: absolute; right: -80px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .04);}
.masuk-sisi::after {content: ""; position: absolute; left: var(--j-5); bottom: 44px; width: 36px; height: 3px; border-radius: 3px; background: var(--aksen);}
.masuk-sisi .merek, .masuk-sisi .merek:hover {color: #fff;}
.masuk-sisi .merek-ikon {background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);}
.masuk-sisi .merek-teks small {color: #ffb1bb;}
.masuk-sisi h1 {margin-top: var(--j-6); font-size: 26px; font-weight: 760; letter-spacing: -.025em; max-width: 420px; text-wrap: balance;}
.masuk-sisi p {margin-top: var(--j-2); color: rgba(255, 255, 255, .75); max-width: 400px;}
.masuk-form-wadah {padding: 0 var(--j-4) var(--j-8); margin-top: -44px; position: relative;}
.masuk-form {max-width: 420px; margin: 0 auto; padding: var(--j-6) var(--j-5);}
.masuk-form h2 {font-size: var(--t-judul-2); font-weight: 760;}
.masuk-kaki {margin-top: var(--j-5); text-align: center; font-size: var(--t-kecil); color: var(--redup);}
@media (min-width: 900px) {
.masuk {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none;}
.masuk-sisi {display: flex; flex-direction: column; padding: var(--j-10) var(--j-12);}
.masuk-sisi h1 {margin-top: auto; font-size: 40px; line-height: 1.12;}
.masuk-sisi p {font-size: var(--t-besar); margin-bottom: auto;}
.masuk-sisi::after {left: var(--j-12); bottom: var(--j-10);}
.masuk-form-wadah {display: grid; place-items: center; margin: 0; padding: var(--j-10);}
.masuk-form {width: 100%; padding: var(--j-8);}
}
.sapa-sub b {color: var(--teks);}
.banner-notif {display: flex; align-items: center; gap: var(--j-3); padding: 12px 12px 12px 14px; border-radius: var(--sudut-b); background: var(--aksen-muda); border: 1px solid color-mix(in srgb, var(--aksen) 30%, transparent);}
.banner-notif .ikon-bulat {flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--kartu); color: var(--aksen-teks);}
.banner-notif .teks {flex: 1; min-width: 0; font-size: var(--t-sedang);}
.banner-notif .teks b {display: block;}
.banner-notif .teks span {color: var(--redup); font-size: var(--t-kecil);}
.banner-notif.keluar {animation: banner-keluar var(--sedang) var(--keluar) forwards;}
.profil-kandidat {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--j-3) var(--j-4); align-items: center;}
.profil-kandidat h1 {font-size: var(--t-judul-1); font-weight: 770; letter-spacing: -.025em;}
.profil-kandidat .aksi-profil {grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--j-2);}
@media (min-width: 760px) {
.profil-kandidat {grid-template-columns: auto minmax(0, 1fr) auto;}
.profil-kandidat .aksi-profil {grid-column: auto;}
}
.bar-skor {display: grid; grid-template-columns: minmax(0, 1fr) 96px 18px; gap: 10px; align-items: center; font-size: var(--t-kecil); padding: 4px 0;}
.bar-skor .titik-skor {display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;}
.bar-skor .titik-skor i {height: 8px; border-radius: 3px; background: var(--abu-latar);}
.bar-skor .titik-skor i.isi {background: var(--merek);}
.bar-skor b {text-align: right; font-variant-numeric: tabular-nums;}
.nilai-bulat {display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--merek) calc(var(--persen, 0) * 1%), var(--abu-latar) 0); position: relative;}
.nilai-bulat::before {content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--kartu);}
.nilai-bulat span {position: relative; font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums;}
.skala-ojt {display: grid; gap: 6px;}
.skala-ojt .pita {display: grid; grid-template-columns: 70fr 10fr 20fr; gap: 3px;}
.skala-ojt .pita span {height: 6px; border-radius: 3px;}
.skala-ojt .pita span:nth-child(1) {background: var(--merah-latar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--merah) 30%, transparent);}
.skala-ojt .pita span:nth-child(2) {background: var(--kuning-latar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kuning-garis) 50%, transparent);}
.skala-ojt .pita span:nth-child(3) {background: var(--hijau-latar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hijau) 30%, transparent);}
.skala-ojt .label-skala {display: grid; grid-template-columns: 70fr 10fr 20fr; font-size: var(--t-mini); color: var(--redup); font-weight: 600;}
.skala-ojt .label-skala span:nth-child(2), .skala-ojt .label-skala span:nth-child(3) {padding-left: 2px;}
.blok-ganti {display: grid; gap: var(--j-4); padding: var(--j-4); border-radius: var(--sudut); background: var(--kartu-2); border: 1px solid var(--garis);}
@supports selector(:has(*)) {
.blok-ganti {display: none;}
.formulir:has(input[value="penggantian"]:checked) .blok-ganti {display: grid; animation: masuk var(--sedang) var(--lentur);}
.blok-lainnya {display: none;}
.formulir:has(input[value="lainnya"]:checked) .blok-lainnya {display: grid; animation: masuk var(--sedang) var(--lentur);}
.blok-tidak-hadir {display: none;}
.formulir:has(#hadir-tidak:checked) .blok-tidak-hadir {display: grid; animation: masuk var(--sedang) var(--lentur);}
.formulir:has(#hadir-tidak:checked) .blok-skor {display: none;}
}
.daftar-nama {display: grid; gap: var(--j-2);}
.daftar-nama .baris-nama {display: flex; gap: var(--j-2); animation: masuk var(--sedang) var(--lentur);}
.daftar-nama .baris-nama .masukan {flex: 1;}
.nav-bagian {display: none;}
@media (min-width: 1000px) {
.nav-bagian {display: grid; gap: 2px;}
.nav-bagian a {display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--redup); text-decoration: none; font-weight: 640; transition: background var(--cepat), color var(--cepat);}
.nav-bagian a:hover {background: var(--merek-muda); color: var(--merek);}
.nav-bagian a[aria-current="true"] {background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2);}
.nav-bagian a .bagian-nomor {width: 24px; height: 24px; font-size: 12px;}
.nav-bagian a:not([aria-current="true"]) .bagian-nomor {background: var(--abu-latar); color: var(--redup);}
}
.mt-1 {margin-top: var(--j-1);}
.mt-2 {margin-top: var(--j-2);}
.mt-3 {margin-top: var(--j-3);}
.mt-4 {margin-top: var(--j-4);}
.mt-5 {margin-top: var(--j-5);}
.mt-6 {margin-top: var(--j-6);}
.daftar-permintaan .baris {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;}
.daftar-permintaan .kol-bawah {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-kecil); color: var(--redup); min-width: 0;}
.daftar-permintaan .panah {grid-column: 2; grid-row: 1 / 3;}
.daftar-permintaan .kol-status {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0;}
.daftar-permintaan .kol-tgl small {font-size: inherit;}
.daftar-permintaan .kol-tgl.lewat {color: var(--merah); font-weight: 650;}
.daftar-permintaan .terisi {display: inline-flex; align-items: center; gap: 6px;}
.daftar-permintaan .terisi progress {width: 56px; height: 6px;}
@media (min-width: 1000px) {
.daftar-permintaan .baris {grid-template-columns: minmax(0, 1fr) 260px 140px 20px; gap: 16px;}
.daftar-permintaan .kol-bawah {display: contents;}
.daftar-permintaan .panah {grid-column: auto; grid-row: auto;}
.daftar-permintaan .kol-tgl {display: grid; font-size: var(--t-sedang); color: var(--teks); font-weight: 620;}
.daftar-permintaan .kol-tgl small {font-size: var(--t-mini); color: var(--redup); font-weight: 600;}
}
.kolom-kepala .titik-tahap.tt-biru {background: var(--biru);}
.kolom-kepala .titik-tahap.tt-kuning {background: var(--kuning-garis);}
.kolom-kepala .titik-tahap.tt-hijau {background: var(--hijau);}
.kolom-kepala .titik-tahap.tt-merah {background: var(--merah);}
.kolom-kepala .titik-tahap.tt-merek {background: var(--merek);}
.angka-kartu.statis:hover {transform: none; box-shadow: var(--bayang-2); border-color: var(--garis);}
.angka-kartu.hijau .nilai {color: var(--hijau);}
.angka-kartu.biru .nilai {color: var(--biru);}
.angka-kartu.merah .nilai {color: var(--merah);}
.ringkas.tiga {grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (min-width: 760px) {
.ringkas.tiga {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
.peta {list-style: none; margin: 0; padding: 0 var(--j-4);}
@media (min-width: 760px) {
.peta {padding: 0 var(--j-6);}
}
.peta li {display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--garis);}
.peta li:last-child {border-bottom: 0;}
.peta .nama-kolom {display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--t-sedang);}
.peta .contoh-isi {font-size: var(--t-kecil); color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.peta .masukan {min-height: 42px; padding-top: 8px; padding-bottom: 8px;}
@media (min-width: 760px) {
.peta li {grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px;}
}
.hasil-ojt {display: grid; gap: var(--j-3); padding: var(--j-4); border-radius: var(--sudut); background: var(--kartu-2); border: 1px solid var(--garis);}
.hasil-ojt .atas {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--j-3); flex-wrap: wrap;}
.hasil-ojt .angka-akhir {font-size: var(--t-raksasa); font-weight: 820; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;}
.hasil-ojt .angka-akhir small {font-size: var(--t-dasar); font-weight: 650; color: var(--redup); letter-spacing: 0;}
.nilai-besar {display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums;}
.nilai-besar b {font-size: 56px; font-weight: 820; letter-spacing: -.04em; line-height: 1;}
.nilai-besar span {font-size: var(--t-besar); font-weight: 650; color: var(--redup);}
.sukses-ikon {display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--hijau-latar); color: var(--hijau); animation: letup 480ms var(--pegas) both;}
.sukses-ikon .i {width: 34px; height: 34px; stroke-width: 2.6;}
fieldset.chip-grup {border: 0; margin: 0; padding: 0; min-width: 0;}
.isian > .tombol {justify-self: start;}
.kartu-kaki.kiri {justify-content: flex-start;}
.judul-bagian .tautan {white-space: nowrap;}
.baris .meta > span {white-space: nowrap;}
.lembar-kepala[data-rapat], .lembar-tombol[data-rapat] {margin: 0 !important;}
.kartu-isi[data-rapat] {padding-top: 4px;}
.berkas-terpilih[data-polos] {border: 0; padding: 0; background: none;}
.lengket .bar-aksi {margin-top: 0;}
.lengket .bar-aksi > .tombol {flex: 1; min-width: 0;}
.tautan[data-demo="hover"] {color: var(--merek-tua); text-decoration-color: currentColor;}
.kolom-kepala .centang {min-height: 32px; padding: 5px 0;}