/* =====================================================================
   NTO CAS — Certification Assessment System (sisi peserta)
   Login, portal, instruksi, hasil, check-in, dan halaman mengerjakan.

   Palet dari logo asli NTO: biru NTO (#0479C8) dan api (#F5AC2E).
   Permukaan gelap = biru yang sama, lebih pekat. Motif khas: title block
   gambar teknik untuk data penting (nomor, batch, jadwal).
   Dipakai di atas Bootstrap 5.3; kelas Bootstrap disetel ulang di sini.
   ===================================================================== */
:root {
    --blue: #0479C8;
    --blue-hover: #0367AB;
    --blue-ink: #0563A4;
    --blue-tint: #EAF4FC;
    --deep: #041F38;
    --deep-2: #0A3157;
    --flame: #F5AC2E;
    --flame-ink: #8A5600;
    --flame-soft: #FDF1DA;
    --ground: #EEF3F8;
    --paper: #FFFFFF;
    --line: #D6E1EC;
    --line-2: #E6EDF4;
    --fg: #0B1C2E;
    --muted: #56697F;
    --ok: #17734A; --ok-soft: #E2F1E9;
    --bad: #B3261E; --bad-soft: #FBE8E6;
    --warn: #8A5600; --warn-soft: #FDF1DA;
    --on-dark: #EAF2FA; --on-dark-muted: #9DB4CC; --dark-line: rgba(234, 242, 250, .16);
    --f-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-mono: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --r: 14px;
    --r-s: 10px;
    --shadow: 0 1px 2px rgba(4, 31, 56, .05), 0 8px 24px -16px rgba(4, 31, 56, .25);

    --bs-body-font-family: var(--f-sans);
    --bs-body-color: var(--fg);
    --bs-body-bg: var(--ground);
    --bs-border-color: var(--line);
    --bs-primary: var(--blue);
    --bs-primary-rgb: 4, 121, 200;
    --bs-link-color: var(--blue-ink);
    --bs-link-color-rgb: 5, 99, 164;
    --bs-link-hover-color: var(--deep-2);
    --bs-secondary-color: var(--muted);
    --bs-border-radius: var(--r-s);
}

body.cas { background: var(--ground); color: var(--fg); font-family: var(--f-sans); font-size: .875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; }
.cas :focus-visible { outline: 3px solid rgba(245, 172, 46, .75); outline-offset: 2px; }
.cas .text-secondary { color: var(--muted) !important; }
.cas a { color: var(--blue-ink); }
.cas a.btn { color: var(--bs-btn-color); }
.cas a.btn:hover, .cas a.btn:focus-visible { color: var(--bs-btn-hover-color); }
.cas a.btn:active { color: var(--bs-btn-active-color); }
.cas .mono, .cas .font-monospace { font-family: var(--f-mono) !important; font-weight: 500; }
.cas .num { font-variant-numeric: tabular-nums; }
.cas-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 8px; }

/* ---------- Bootstrap disetel ulang ---------- */
.cas .btn { --bs-btn-font-weight: 650; --bs-btn-border-radius: var(--r-s); --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.cas .btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 8px; }
.cas .btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.02rem; }
.cas .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue-hover); --bs-btn-hover-border-color: var(--blue-hover); --bs-btn-active-bg: var(--blue-hover); --bs-btn-active-border-color: var(--blue-hover); --bs-btn-disabled-bg: var(--blue); --bs-btn-disabled-border-color: var(--blue); }
.cas .btn-flame { --bs-btn-bg: var(--flame); --bs-btn-border-color: var(--flame); --bs-btn-color: var(--deep); --bs-btn-hover-bg: #E99D18; --bs-btn-hover-border-color: #E99D18; --bs-btn-hover-color: var(--deep); --bs-btn-active-bg: #E99D18; --bs-btn-active-color: var(--deep); }
.cas .btn-deep { --bs-btn-bg: var(--deep); --bs-btn-border-color: var(--deep); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--deep-2); --bs-btn-hover-border-color: var(--deep-2); --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: var(--deep); --bs-btn-disabled-border-color: var(--deep); }
.cas .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--line); --bs-btn-color: var(--fg); --bs-btn-hover-bg: var(--ground); --bs-btn-hover-border-color: #C3D2E1; }
.cas .btn-outline-primary { --bs-btn-color: var(--blue-ink); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue); --bs-btn-hover-border-color: var(--blue); }
.cas .form-control, .cas .form-select { border-color: var(--line); border-radius: var(--r-s); padding: .65rem .85rem; background-color: #F8FAFC; font-size: 1rem; }
.cas .form-control-sm, .cas .form-select-sm { padding: .42rem .65rem; font-size: .9rem; border-radius: 8px; }
.cas .form-control:focus, .cas .form-select:focus { border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 3px rgba(4, 121, 200, .16); }
.cas .form-label { font-weight: 600; font-size: .88rem; color: var(--fg); }
.cas .form-text { color: var(--muted); font-size: .8rem; }
.cas .form-check-input { border-color: #A9BBCD; }
.cas .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.cas .alert { border-radius: var(--r-s); border-width: 1px; font-size: .92rem; }
.cas .alert-success { background: var(--ok-soft); border-color: #BFE0CD; color: #0F5534; }
.cas .alert-danger { background: var(--bad-soft); border-color: #F2C6C2; color: #7E1A14; }
.cas .alert-warning { background: var(--warn-soft); border-color: #F2D9A6; color: #6A4200; }
.cas .alert-info { background: var(--blue-tint); border-color: #C6E0F4; color: #0A3E66; }
.cas .modal-content { border: 0; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(4, 31, 56, .45); }
.cas .modal-header, .cas .modal-footer { border-color: var(--line-2); }
.cas .dropdown-menu { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: .92rem; }

/* ---------- Komponen bersama ---------- */
.chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .2rem .65rem; font-size: .75rem; font-weight: 650; white-space: nowrap; background: #E6EDF4; color: var(--muted); }
.chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-wait, .chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-live { background: var(--blue-tint); color: var(--blue-ink); }
.chip-live::before { animation: cas-pulse 1.6s ease-in-out infinite; }
@keyframes cas-pulse { 50% { opacity: .2; } }
.lbl { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.card-x { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.h-sec { margin: 0; font-size: 1.08rem; font-weight: 650; color: var(--fg); }
.sec { display: grid; gap: .75rem; min-width: 0; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; }
.sec-h p { margin: 0; font-size: .86rem; color: var(--muted); }
.empty { text-align: center; padding: 2rem 1.25rem; color: var(--muted); }
.empty i { display: block; font-size: 2rem; color: #9CB1C6; margin-bottom: .35rem; }
.empty p { margin: 0 auto .75rem; max-width: 46ch; }

/* Title block: data kunci dalam kotak bergaris seperti title block drawing */
.tb { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.tb > div { padding: .75rem 1rem; border-right: 1px solid var(--line); min-width: 0; }
.tb > div:last-child { border-right: 0; }
.tb b { display: block; font-weight: 650; margin-top: .1rem; overflow-wrap: anywhere; }
.tb .mono { font-size: .92rem; }

/* =====================================================================
   1. Halaman akun: login & ganti password
   ===================================================================== */
.lg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--paper); }
.lg-art { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 4vw, 3rem); color: #fff; min-height: 22rem;
    background-color: var(--deep);
    background-image: linear-gradient(180deg, rgba(4, 31, 56, .55) 0%, rgba(4, 31, 56, .32) 34%, rgba(4, 31, 56, .88) 76%, rgba(4, 31, 56, .97) 100%),
                      linear-gradient(90deg, rgba(4, 31, 56, .5), rgba(4, 31, 56, 0) 70%), var(--photo);
    background-size: cover; background-position: center 30%; }
.lg-logo { height: 52px; width: auto; align-self: flex-start; }
.lg-title { margin-top: auto; max-width: 34rem; }
.lg-cas { display: block; font-family: var(--f-mono); font-weight: 600; font-size: .95rem; letter-spacing: .08em; color: var(--flame); margin-bottom: .9rem; }
.lg-title h1 { margin: 0; font-weight: 650; font-size: clamp(1.76rem, 4.4vw, 2.6rem); line-height: 1; letter-spacing: -.012em; text-wrap: balance; color: #fff; }
.lg-motto { display: flex; align-items: center; gap: .9rem; margin: 1.13rem 0 0; font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.19rem); color: var(--flame); }
.lg-motto::before { content: ""; flex: 0 0 auto; width: 2.75rem; height: 2px; background: var(--flame); }
.lg-photo-note { position: absolute; right: 1rem; bottom: .75rem; font-size: .7rem; color: rgba(234, 242, 250, .55); }
.lg-side { display: grid; place-items: center; padding: 2.5rem 1.75rem; }
.lg-box { width: 100%; max-width: 24rem; display: grid; gap: 1.1rem; }
.lg-box h2 { margin: 0; font-weight: 650; font-size: 1.46rem; line-height: 1.15; }
.lg-box > p { margin: -.6rem 0 0; color: var(--muted); }
.lg-pw { position: relative; }
.lg-pw .form-control { padding-right: 4.5rem; }
.lg-pw button { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--blue-ink); font-weight: 650; font-size: .82rem; padding: .35rem .5rem; border-radius: 6px; }
.lg-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; font-size: .88rem; }
.lg-row .form-check { margin: 0; }
.lg-box .btn-primary { width: 100%; --bs-btn-padding-y: .8rem; font-size: 1.02rem; }
.lg-foot { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .35rem; font-size: .88rem; color: var(--muted); }
.lg-foot a { font-weight: 600; }
.lg-legal { font-size: .75rem; color: var(--muted); margin: .25rem 0 0; }
@media (max-width: 860px) {
    .lg { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .lg-art { min-height: 23rem; padding: 1.25rem 1.25rem 1.6rem; background-position: center 20%; }
    .lg-logo { height: 38px; }
    .lg-title h1 { font-size: 2.15rem; }
    .lg-side { place-items: start center; padding: 1.75rem 1.25rem 2.5rem; }
    .lg-box h2 { font-size: 1.45rem; }
}

/* =====================================================================
   2. Kerangka portal
   ===================================================================== */
.bar { position: relative; z-index: 1020; background: var(--deep); color: var(--on-dark); }
.bar-in { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.5rem; }
.lock { display: flex; align-items: center; gap: .8rem; min-width: 0; color: inherit; text-decoration: none; }
.lock:hover { color: #fff; }
.lock img { height: 32px; width: auto; flex: 0 0 auto; }
.lock-rule { width: 1px; align-self: stretch; background: var(--dark-line); }
.lock-t { min-width: 0; line-height: 1.15; }
.lock-t b { display: block; font-weight: 650; letter-spacing: .03em; font-size: 1rem; color: #fff; }
.lock-t small { display: block; font-size: .72rem; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.bell { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--dark-line); color: var(--on-dark); display: grid; place-items: center; text-decoration: none; }
.bell:hover { background: var(--deep-2); color: #fff; }
.bell i.n { position: absolute; top: -3px; right: -3px; min-width: 1.15rem; height: 1.15rem; border-radius: 9px; background: var(--flame); color: var(--deep); font-style: normal; font-weight: 750; font-size: .68rem; line-height: 1.15rem; text-align: center; padding: 0 .25rem; }
.who { display: inline-flex; align-items: center; gap: .55rem; border: 0; background: transparent; color: var(--on-dark); padding: .25rem .4rem; border-radius: 10px; font-weight: 600; font-size: .92rem; }
.who:hover { background: var(--deep-2); }
.av { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 750; font-size: .8rem; flex: 0 0 auto; }
.who-n { max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav { background: var(--deep); border-top: 1px solid var(--dark-line); }
.subnav-in { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a { color: var(--on-dark-muted); text-decoration: none; font-weight: 600; font-size: .9rem; padding: .75rem .75rem .7rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.subnav a:hover { color: #fff; }
.subnav a[aria-current] { color: #fff; border-bottom-color: var(--flame); }
.main { min-height: calc(100vh - 160px); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; display: grid; gap: 1.5rem; }
.wrap-n { max-width: 860px; }
.foot { text-align: center; font-size: .8rem; color: var(--muted); padding: 1.5rem 1rem 2.25rem; }
.foot a { color: var(--muted); }
.bnav { display: none; }
.back { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--muted); text-decoration: none; font-weight: 600; }
.back:hover { color: var(--fg); }

/* Sapaan + langkah berikutnya */
.hello h1 { margin: 0; font-weight: 650; font-size: clamp(1.34rem, 3vw, 1.64rem); letter-spacing: -.01em; line-height: 1.12; }
.hello p { margin: .3rem 0 0; color: var(--muted); }
.next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; background: var(--deep); color: var(--on-dark); border-radius: var(--r); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
.next-ic { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1.5px solid var(--flame); color: var(--flame); display: grid; place-items: center; font-size: 1.2rem; }
.next h2 { margin: 0; font-weight: 650; font-size: 1.11rem; color: #fff; }
.next p { margin: .2rem 0 0; color: var(--on-dark-muted); font-size: .92rem; max-width: 62ch; }
.next .btn { white-space: nowrap; }

/* Notifikasi */
.nt { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.nt > summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; font-weight: 650; cursor: pointer; }
.nt > summary::-webkit-details-marker { display: none; }
.nt > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.nt[open] > summary::after { transform: rotate(180deg); }
.nt-n { font-size: .72rem; background: var(--flame); color: var(--deep); border-radius: 999px; padding: .1rem .55rem; font-weight: 750; }
.nt ul { list-style: none; margin: 0; padding: 0 .6rem .6rem; }
.nt li { display: grid; gap: .1rem; padding: .6rem .6rem; border-radius: var(--r-s); font-size: .9rem; }
.nt li + li { border-top: 1px solid var(--line-2); }
.nt li.is-new { background: var(--blue-tint); border-top-color: transparent; }
.nt li b { font-weight: 650; }
.nt li small { color: var(--muted); font-size: .78rem; }

/* Kartu pendaftaran */
.rg { overflow: hidden; }
.rg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; padding: 1.1rem 1.25rem .9rem; }
.rg-head h2 { margin: .1rem 0 0; font-weight: 650; font-size: 1.22rem; line-height: 1.2; }
.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.meters > div { padding: 1rem 1.25rem 1.1rem; border-right: 1px solid var(--line); display: grid; gap: .35rem; align-content: start; min-width: 0; }
.meters > div:last-child { border-right: 0; }
.meters b { font-weight: 650; font-size: 1.22rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.meters small { color: var(--muted); font-size: .8rem; }
.meter { height: 6px; border-radius: 3px; background: #E2EAF2; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.meter i.is-ok { background: var(--ok); }
.rg-more { border-top: 1px solid var(--line); }
.rg-more > details + details { border-top: 1px solid var(--line-2); }
.rg-more summary { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; font-weight: 650; font-size: .95rem; cursor: pointer; list-style: none; }
.rg-more summary::-webkit-details-marker { display: none; }
.rg-more summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.rg-more details[open] > summary::after { transform: rotate(180deg); }
.rg-more summary .chip { font-weight: 600; }
.rg-body { padding: 0 1.25rem 1.1rem; }
.sess { list-style: none; margin: 0 0 .6rem; padding: 0; }
.sess li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.sess li.is-today { background: var(--blue-tint); border-radius: 8px; padding-left: .5rem; padding-right: .5rem; }
.sess .d { font-family: var(--f-mono); font-weight: 600; font-size: .85rem; }
.sess em { font-style: normal; font-size: .72rem; font-weight: 650; color: var(--flame-ink); background: var(--flame-soft); border-radius: 6px; padding: .05rem .4rem; margin-left: .25rem; }
.mk { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 650; border-radius: 999px; padding: .15rem .55rem; background: #E6EDF4; color: var(--muted); }
.mk-present, .mk-late { background: var(--ok-soft); color: var(--ok); }
.mk-absent { background: var(--bad-soft); color: var(--bad); }
.mk-excused, .mk-sick { background: var(--warn-soft); color: var(--warn); }
.proofs { list-style: none; margin: 0 0 .75rem; padding: 0; }
.proofs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.proofs small { flex-basis: 100%; color: var(--bad); }
.accs { display: grid; gap: .5rem; margin: .25rem 0 .9rem; }
.acc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; background: var(--deep); color: var(--on-dark); border-radius: var(--r-s); padding: .7rem .9rem; }
.acc b { font-weight: 650; color: #fff; }
.acc .mono { font-size: 1.05rem; letter-spacing: .02em; color: #fff; }
.acc small { grid-column: 1; color: var(--on-dark-muted); }
.acc button { grid-row: 1 / span 3; grid-column: 2; border: 1px solid var(--dark-line); background: transparent; color: var(--on-dark); border-radius: 8px; font-size: .8rem; padding: .3rem .6rem; }
.upl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; align-items: end; background: var(--ground); border-radius: var(--r-s); padding: .9rem; }

/* Dua kolom portal */
.cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.lst { list-style: none; margin: 0; padding: 0; }
.lst > li { padding: 1rem 1.2rem; border-top: 1px solid var(--line-2); }
.lst > li:first-child { border-top: 0; }
.ex { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; align-items: center; }
.ex-t { font-weight: 650; font-size: 1rem; overflow-wrap: anywhere; }
.ex-m { grid-column: 1; display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; font-size: .82rem; color: var(--muted); }
.ex-a { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .4rem; }

/* Kelulusan / paket */
.std { overflow: hidden; }
.std-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding: 1.1rem 1.25rem; align-items: start; }
.std-head h2 { margin: .1rem 0 .25rem; font-weight: 650; font-size: 1.25rem; line-height: 1.15; }
.std-head p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 60ch; }
.std.is-ok { box-shadow: inset 0 4px 0 var(--ok), var(--shadow); }
.std.is-bad { box-shadow: inset 0 4px 0 var(--bad), var(--shadow); }
.std.is-warn { box-shadow: inset 0 4px 0 var(--flame), var(--shadow); }
.std.is-ok .std-head h2 { color: var(--ok); }
.std.is-bad .std-head h2 { color: var(--bad); }
.avg { text-align: right; }
.avg b { display: block; font-weight: 650; font-size: 1.58rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pkg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; }
.pkg-n { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-weight: 650; }
.pkg-s { text-align: right; font-variant-numeric: tabular-nums; }
.pkg-s b { font-weight: 720; font-size: 1.15rem; }
.pkg-s small { color: var(--muted); }
.pkg-a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.pkg-req { grid-column: 1 / -1; margin: 0; font-size: .84rem; border-radius: var(--r-s); padding: .55rem .75rem; background: var(--ground); color: var(--muted); }
.pkg-req.is-approved { background: var(--ok-soft); color: #0F5534; }
.pkg-req.is-rejected { background: var(--bad-soft); color: #7E1A14; }
.pkg-form { grid-column: 1 / -1; background: var(--ground); border-radius: var(--r-s); padding: .9rem; }
.checks { list-style: none; margin: 0; padding: .9rem 1.25rem; display: grid; gap: .4rem; border-top: 1px solid var(--line-2); font-size: .9rem; }
.checks li { display: flex; gap: .55rem; align-items: baseline; }
.checks .is-ok i { color: var(--ok); } .checks .is-bad i { color: var(--bad); } .checks .is-wait i { color: var(--flame-ink); }
.cert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; align-items: center; background: linear-gradient(135deg, var(--deep), var(--deep-2)); color: var(--on-dark); padding: 1.1rem 1.25rem; }
.cert > i { grid-row: span 2; font-size: 2.2rem; color: var(--flame); }
.cert b { display: block; font-family: var(--f-mono); font-weight: 600; font-size: 1.05rem; color: #fff; }
.cert span { font-size: .85rem; color: var(--on-dark-muted); }
.cert-a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.cert .btn-light { --bs-btn-bg: transparent; --bs-btn-color: var(--on-dark); --bs-btn-border-color: var(--dark-line); --bs-btn-hover-bg: var(--deep-2); --bs-btn-hover-color: #fff; }

/* =====================================================================
   3. Instruksi, hasil, check-in
   ===================================================================== */
.kick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: .85rem; color: var(--muted); }
.ttl { margin: .35rem 0 0; font-weight: 650; font-size: clamp(1.37rem, 3vw, 1.7rem); line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.facts { --cols: 4; overflow: hidden; }
.facts .tb { border-top: 0; }
.facts b { font-weight: 650; font-size: 1.31rem; font-variant-numeric: tabular-nums; }
.facts b small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.intro-s { position: sticky; top: 1rem; }
.box { padding: 1.2rem 1.35rem; }
.box h2 { margin: 0 0 .75rem; font-weight: 650; font-size: 1.05rem; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rules li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; line-height: 1.55; }
.rules i { width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue-ink); font-size: 1.05rem; }
.rules li.is-guard { background: var(--flame-soft); border-radius: 12px; padding: .8rem; }
.rules li.is-guard i { background: #fff; color: var(--flame-ink); }
.start { border: 2px solid var(--deep); }
.agree { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; background: var(--ground); border-radius: 12px; padding: .9rem; margin-bottom: 1rem; cursor: pointer; font-size: .93rem; line-height: 1.55; }
.agree .form-check-input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; }
.note { font-size: .8rem; color: var(--muted); text-align: center; margin: .6rem 0 0; }
.res { text-align: center; padding: 2.25rem 1.5rem 2rem; overflow: hidden; }
.res.is-pass { box-shadow: inset 0 5px 0 var(--ok), var(--shadow); }
.res.is-fail { box-shadow: inset 0 5px 0 var(--bad), var(--shadow); }
.res-k { font-size: .88rem; color: var(--muted); margin: 0 0 .75rem; }
.res-ic { font-size: 2.6rem; color: var(--blue); }
.res-score { font-weight: 650; font-size: clamp(2.6rem, 12vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.res.is-pass .res-score { color: var(--ok); }
.res.is-fail .res-score { color: var(--bad); }
.res-v { font-weight: 650; font-size: 1.16rem; margin: .45rem 0 .5rem; }
.res-m { font-size: .84rem; color: var(--muted); margin: 1rem 0 0; }
.rv { list-style: none; margin: 0; padding: 0; }
.rv > li { padding: 1.1rem 1.35rem; border-top: 1px solid var(--line-2); }
.rv-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .5rem; }
.rv-n { font-family: var(--f-mono); font-weight: 600; min-width: 1.6rem; }
.rv-p { font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rv-t { margin-left: auto; font-size: .8rem; color: var(--muted); }
.rv-b { line-height: 1.6; margin-bottom: .75rem; overflow-wrap: anywhere; }
.rv-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rv-a > div { background: var(--ground); border-radius: var(--r-s); padding: .7rem .85rem; font-size: .92rem; min-width: 0; overflow-wrap: anywhere; }
.rv-a ul, .rv-a ol { margin: 0; padding-left: 1.1rem; }
.rv-e { display: flex; gap: .5rem; font-size: .9rem; background: var(--blue-tint); border-radius: var(--r-s); padding: .65rem .85rem; margin: .75rem 0 0; }

/* =====================================================================
   4. Halaman mengerjakan (xp-*)
   ===================================================================== */
body.xp { background: var(--ground); }
.xp-bar { position: sticky; top: 0; z-index: 1030; background: var(--deep); color: var(--on-dark); }
.xp-bar-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem; }
.xp-id { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 auto; }
.xp-logo { height: 30px; width: auto; flex: 0 0 auto; }
.xp-id-text { min-width: 0; border-left: 1px solid var(--dark-line); padding-left: .85rem; }
.xp-title { font-weight: 650; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.xp-sub { font-size: .75rem; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-save { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--on-dark-muted); white-space: nowrap; }
.xp-save[data-state="saving"] i { animation: xp-spin 1s linear infinite; }
.xp-save[data-state="saved"] { color: #9FD7B9; }
.xp-save[data-state="error"], .xp-save[data-state="locked"] { color: #FFC4BD; }
@keyframes xp-spin { to { transform: rotate(360deg); } }
.xp-timer { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.45rem; line-height: 1; padding: .45rem .8rem; border-radius: 10px; background: var(--deep-2); border: 1px solid var(--dark-line); min-width: 6.4ch; text-align: center; color: #fff; }
.xp-timer[data-level="warn"] { color: var(--flame); border-color: rgba(245, 172, 46, .45); }
.xp-timer[data-level="danger"] { color: #fff; background: var(--bad); border-color: var(--bad); animation: xp-beat 1s ease-in-out infinite; }
@keyframes xp-beat { 50% { opacity: .78; } }
.xp-time { height: 3px; background: var(--deep-2); }
.xp-time span { display: block; height: 100%; width: 100%; background: var(--flame); transition: width .5s linear; }
.xp-subbtn { display: none; }
.xp-navbtn { display: inline-flex; align-items: center; gap: .4rem; background: var(--deep-2); color: #fff; border: 1px solid var(--dark-line); border-radius: 10px; padding: .5rem .7rem; font-weight: 650; font-size: .85rem; font-family: var(--f-mono); }
@media (min-width: 992px) { .xp-subbtn { display: inline-flex; } }
@media (max-width: 767.98px) {
    .xp-bar-in { gap: .6rem; padding: .5rem .875rem; }
    .xp-logo { display: none; }
    .xp-id-text { border-left: 0; padding-left: 0; }
    .xp-save span { display: none; }
    .xp-timer { font-size: 1.15rem; padding: .4rem .55rem; }
}
.xp-offline { position: sticky; top: 60px; z-index: 1020; background: var(--flame-soft); color: var(--flame-ink); text-align: center; font-size: .88rem; padding: .5rem 1rem; }

.xp-main { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .xp-main { grid-template-columns: minmax(0, 1fr); padding: 1rem .75rem 6.25rem; } }
.xp-stage { min-width: 0; }
.xp-qs { min-width: 0; border: 0; margin: 0; padding: 0; }
.xp-qs:disabled { opacity: .55; }

/* Kartu soal */
.q-card { display: none; background: #fff var(--wm) repeat; border: 1px solid var(--line); border-radius: 18px; padding: 1.75rem 2rem 2rem; box-shadow: var(--shadow); }
.q-card.is-current { display: block; }
.q-card.in-case { padding-top: 0; overflow: hidden; }
@media (max-width: 575.98px) { .q-card { padding: 1.15rem 1rem 1.4rem; border-radius: 16px; } }
.q-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1.1rem; }
.q-num { margin: 0; font-weight: 650; font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; outline: none; }
.q-of { font-size: .95rem; font-weight: 600; color: var(--muted); margin-left: .1rem; }
.q-type { font-size: .76rem; font-weight: 650; color: var(--blue-ink); background: var(--blue-tint); border-radius: 999px; padding: .22rem .7rem; }
.q-pts { font-size: .78rem; color: var(--muted); }
.q-flag { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: .32rem .85rem; font-size: .8rem; font-weight: 650; }
.q-flag:hover { border-color: var(--flame); color: var(--flame-ink); }
.q-flag.on { background: var(--flame-soft); border-color: var(--flame); color: var(--flame-ink); }
.q-body { font-size: 1.08rem; line-height: 1.7; max-width: 72ch; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.q-media { margin: 0 0 1.25rem; }
.q-zoom { position: relative; display: inline-block; max-width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #F7F9FB; }
.q-zoom img { display: block; max-width: 100%; min-width: 220px; max-height: 380px; width: auto; height: auto; object-fit: contain; }
.q-zoom-hint { position: absolute; right: .5rem; bottom: .5rem; background: rgba(4, 31, 56, .85); color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; }
.q-video { max-width: 680px; margin-bottom: 1.25rem; border-radius: 12px; overflow: hidden; }
.q-hint { font-size: .88rem; color: var(--muted); margin-bottom: .8rem; max-width: 72ch; }
.ord-unsaved { color: var(--flame-ink); font-weight: 650; }

/* Kepala kasus inspeksi + langkah berurutan */
.case-h { margin: 0 -2rem 1.4rem; background: var(--deep); color: var(--on-dark); }
@media (max-width: 575.98px) { .case-h { margin: 0 -1rem 1.1rem; } }
.case-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: 1rem 2rem .25rem; font-size: .78rem; color: var(--on-dark-muted); }
.case-k .mono { color: var(--flame); font-weight: 600; letter-spacing: .04em; }
.case-t { margin: 0; padding: 0 1.64rem .85rem; font-weight: 650; font-size: 1.13rem; color: #fff; }
@media (max-width: 575.98px) { .case-k, .case-t { padding-left: 1rem; padding-right: 1rem; } }
.case-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--paper); border-bottom: 1px solid var(--line); }
.case-steps button { border: 0; background: transparent; text-align: left; padding: .8rem 1rem .75rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .7rem; align-items: center; border-bottom: 3px solid transparent; border-right: 1px solid var(--line-2); color: var(--fg); min-width: 0; }
.case-steps button:last-child { border-right: 0; }
.case-steps .no { grid-row: span 2; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .8rem; color: var(--muted); background: #fff; }
.case-steps b { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-steps small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-steps button[aria-current="step"] { border-bottom-color: var(--flame); background: #FBFDFF; }
.case-steps button[aria-current="step"] .no { background: var(--blue); border-color: var(--blue); color: #fff; }
.case-steps button.is-done .no { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
@media (max-width: 680px) {
    .case-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .case-steps::-webkit-scrollbar { display: none; }
    .case-steps button { flex: 0 0 auto; padding: .65rem .85rem; scroll-snap-align: start; }
    .case-steps small { display: none; }
    .case-steps .no { grid-row: auto; }
}
.case-brief { padding: .85rem 2rem; background: #F6F9FC; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--muted); line-height: 1.55; }
.case-brief b { color: var(--fg); }
.case-brief summary { cursor: pointer; font-weight: 650; color: var(--fg); }
@media (max-width: 575.98px) { .case-brief { padding: .75rem 1rem; } }

/* Pilihan */
.q-opts { display: flex; flex-direction: column; gap: .6rem; max-width: 780px; }
.opt { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; margin: 0; }
.opt:hover { border-color: #AFC3D7; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt-key { flex: 0 0 auto; width: 1.95rem; height: 1.95rem; border-radius: 50%; border: 1.5px solid #AFC3D7; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .85rem; background: #fff; }
.q-opts[role="group"] .opt-key { border-radius: 7px; }
.opt-text { padding-top: .2rem; line-height: 1.55; overflow-wrap: anywhere; }
.opt:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }
.opt:has(input:checked) .opt-key { background: var(--blue); border-color: var(--blue); color: #fff; }
.opt:has(input:focus-visible) { outline: 3px solid rgba(245, 172, 46, .75); outline-offset: 2px; }
.match-pool { background: var(--ground); border-radius: 12px; padding: .85rem 1rem .85rem 2.4rem; margin-bottom: 1rem; font-size: .96rem; max-width: 780px; }
.match-pool li { padding: .15rem 0; }
.match-pool li::marker { font-weight: 700; }
.match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line-2); max-width: 780px; }
.match-row label { margin: 0; font-weight: 500; }
@media (max-width: 575.98px) { .match-row { grid-template-columns: minmax(0, 1fr); } }
.order-list { list-style: none; padding: 0; margin: 0 0 .75rem; max-width: 780px; }
.order-list li { display: flex; align-items: center; gap: .75rem; border: 1.5px solid var(--line); border-radius: 12px; padding: .6rem .7rem; margin-bottom: .5rem; background: #fff; }
.order-list .pos { flex: 0 0 auto; width: 1.95rem; height: 1.95rem; border-radius: 50%; background: var(--deep); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .85rem; }
.order-list .txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.order-list .mv { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.order-list .mv:hover { background: var(--ground); }
.order-list li:first-child .mv[data-dir="-1"], .order-list li:last-child .mv[data-dir="1"] { visibility: hidden; }
.q-ans textarea { min-height: 12rem; line-height: 1.6; }
.q-ans .form-control { max-width: 780px; border-width: 1.5px; }
.q-count { margin-top: .35rem; }

/* Pindah soal */
.xp-steps { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.xp-steps .btn { padding: .7rem 1.2rem; border-radius: 12px; }
.xp-prev { background: #fff; border: 1px solid var(--line); }
.xp-next { margin-left: auto; }
.xp-pos { font-family: var(--f-mono); font-weight: 600; color: var(--muted); }
@media (max-width: 991.98px) {
    .xp-steps { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; margin: 0; padding: .65rem .875rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); backdrop-filter: blur(6px); }
    .xp-steps .btn { padding: .65rem .95rem; }
}
@media (max-width: 400px) { .xp-prev span { display: none; } }

/* Panel samping */
@media (min-width: 992px) { .xp-side { position: sticky; top: 84px; } .xp-side .offcanvas-body { padding: 0; overflow: visible; } }
.xp-side-in { display: flex; flex-direction: column; gap: 1rem; }
.xp-side-sec { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.xp-side-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; margin-bottom: .75rem; }
.xp-tally { font-size: .78rem; font-weight: 600; color: var(--muted); }
.nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; max-height: 46vh; overflow-y: auto; padding: 2px; }
.nav-grid a { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 9px; font-family: var(--f-mono); font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--muted); background: #fff; }
.nav-grid a:hover { border-color: #AFC3D7; color: var(--fg); }
.nav-grid a.answered { background: var(--deep); border-color: var(--deep); color: #fff; }
.nav-grid a.ref { border-style: dashed; color: var(--blue-ink); }
.nav-grid a.in-case:not(.ref) { border-bottom-color: var(--flame); border-bottom-width: 3px; }
.nav-grid a.flagged::after { content: ""; position: absolute; top: -3px; right: -3px; width: .7rem; height: .7rem; border-radius: 50%; background: var(--flame); border: 2px solid #fff; }
.nav-grid a.current { box-shadow: 0 0 0 3px var(--blue); border-color: var(--blue); }
.xp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: 0; margin: .8rem 0 0; font-size: .75rem; color: var(--muted); }
.xp-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.lg-k { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; border: 1.5px solid var(--line); }
.lg-ans { background: var(--deep); border-color: var(--deep); }
.lg-flag { background: var(--flame); border-color: var(--flame); border-radius: 50%; }
.lg-cur { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.lg-case { border-bottom: 3px solid var(--flame); }
.xp-guard-meter { font-size: .9rem; }
.xp-guard-meter span:first-child { font-family: var(--f-mono); font-weight: 600; font-size: 1.1rem; }
.xp-guard-win { color: var(--muted); font-size: .8rem; }
.xp-guard-dots { display: flex; gap: .35rem; margin: .5rem 0 .6rem; }
.xp-guard-dots i { flex: 1 1 0; height: .4rem; border-radius: 999px; background: var(--ground); }
.xp-guard-dots i.on { background: var(--flame); }
.xp-guard-dots i.on:last-child { background: var(--bad); }
.xp-guard-rule { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.5; }
.xp-submit { padding: .8rem 1rem; border-radius: 12px; }
.xp-side-note { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Konfirmasi kumpul */
.cs-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1rem; }
.cs-sum div { background: var(--ground); border-radius: 10px; padding: .6rem .75rem; }
.cs-sum dt { font-size: .75rem; color: var(--muted); font-weight: 600; }
.cs-sum dd { margin: 0; font-family: var(--f-mono); font-size: 1.4rem; font-weight: 600; }
.cs-row { font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.cs-jump { border: 1px solid var(--line); background: #fff; border-radius: 7px; min-width: 2rem; padding: .1rem .4rem; font-family: var(--f-mono); font-weight: 600; }

/* Lapisan layar penuh & penalti */
.xp-overlay { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; padding: 1.25rem; background: rgba(4, 31, 56, .95); backdrop-filter: blur(8px); color: #fff; }
.xp-overlay[hidden] { display: none; }
.xp-lock { z-index: 1095; }
.xp-ov-card { max-width: 30rem; text-align: center; }
.xp-ov-card h2 { font-weight: 650; font-size: 1.34rem; margin: .75rem 0 .6rem; color: #fff; }
.xp-ov-card p { color: var(--on-dark-muted); line-height: 1.6; margin-bottom: 1.25rem; }
.xp-ov-icon { font-size: 2.4rem; color: var(--flame); }
.xp-lock-time { font-family: var(--f-mono); font-size: 3.4rem; font-weight: 600; color: var(--flame); line-height: 1; margin: .5rem 0 1rem; }
.xp-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1085; max-width: min(92vw, 34rem); background: var(--deep); color: #fff; border-radius: 12px; padding: .8rem 1rem; font-size: .92rem; box-shadow: 0 14px 34px -10px rgba(4, 31, 56, .45); }
.xp-toast[data-tone="warn"] { border-left: 4px solid var(--flame); }
@media (max-width: 991.98px) { .xp-toast { bottom: 5.5rem; } }
.xp-zoom { background: #071629; }
.xp-zoom-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .875rem; background: var(--deep); color: #fff; font-family: var(--f-mono); }
.xp-zoom-stage { flex: 1 1 auto; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; touch-action: pinch-zoom pan-x pan-y; }
.xp-zoom-stage img { width: 100%; max-width: none; height: auto; background: #fff; border-radius: 6px; }
.xp-noselect .xp-protect { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.xp-noselect img, .xp-noselect canvas { -webkit-user-drag: none; }
@media print { body.xp { display: none !important; } }

/* Simulasi inspeksi (pin + punch list) */
.ins-tabs { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: .6rem; scrollbar-width: none; }
.ins-tab { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .32rem .85rem; font-size: .84rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ins-tab.on { border-color: var(--deep); background: var(--deep); color: #fff; }
.ins-view { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--deep); }
.ins-zoom { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; background: var(--deep); color: #fff; font-size: .82rem; }
.ins-zoom button { width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 0; background: var(--deep-2); color: #fff; }
.ins-zl { min-width: 3.2rem; text-align: center; font-family: var(--f-mono); }
.ins-count { margin-left: auto; font-weight: 650; color: var(--flame); }
.ins-port { overflow: auto; max-height: 68vh; background: #fff; cursor: crosshair; -webkit-overflow-scrolling: touch; }
.ins-canvas { position: relative; width: 100%; min-width: 100%; }
.ins-canvas img { display: block; width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
.ins-pins { position: absolute; inset: 0; }
.ins-pin { position: absolute; transform: translate(-50%, -100%); width: 2rem; height: 2rem; border-radius: 50% 50% 50% 0; rotate: -45deg; border: 2px solid #fff; background: var(--blue); color: #fff; font-weight: 750; font-size: .78rem; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); padding: 0; }
.ins-pin { font-size: 0; }
.ins-pin::before { content: attr(data-n); rotate: 45deg; font-size: .78rem; }
.ins-pin.is-empty { background: #fff; color: var(--deep); border-color: var(--blue); }
.ins-pin.on { background: var(--flame); color: var(--deep); }
.is-moving .ins-port { cursor: copy; outline: 3px dashed var(--flame); outline-offset: -3px; }
.ins-caption { margin: 0; padding: .4rem .7rem; font-size: .8rem; color: var(--on-dark-muted); background: var(--deep); }
.ins-caption:empty { display: none; }
.ins-edit { margin-top: .85rem; border: 1.5px solid var(--flame); border-radius: 14px; padding: .9rem 1rem; background: var(--flame-soft); }
.ins-edit-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ins-edit-n { font-weight: 700; margin-right: auto; }
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ins-grid label, .ins-lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.ins-lbl { margin-top: .6rem; }
.ins-grid .form-select, .ins-grid .form-control, .ins-lbl .form-control { margin-top: .2rem; font-weight: 400; color: var(--fg); background-color: #fff; }
@media (max-width: 575.98px) { .ins-grid { grid-template-columns: minmax(0, 1fr); } }
.ins-punch { margin-top: 1rem; }
.ins-punch-head { font-weight: 700; font-size: .95rem; margin-bottom: .45rem; }
.ins-punch-n { font-weight: 600; color: var(--muted); font-size: .8rem; margin-left: .3rem; font-family: var(--f-mono); }
.ins-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ins-plist button { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .65rem; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: .55rem .75rem; }
.ins-plist button.on { border-color: var(--flame); background: var(--flame-soft); }
.ins-pl-n { grid-row: 1 / 3; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .8rem; }
.ins-plist button.on .ins-pl-n { background: var(--flame); color: var(--deep); }
.ins-pl-t { font-size: .92rem; overflow-wrap: anywhere; }
.ins-pl-m { font-size: .76rem; color: var(--muted); }
.ins-pl-empty { font-size: .88rem; color: var(--muted); padding: .4rem 0; }
@media (min-width: 1400px) {
    .ins.is-wide { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
    .ins.is-wide > .q-hint, .ins.is-wide > .ins-tabs { grid-column: 1 / -1; }
    .ins.is-wide .ins-view { grid-column: 1; grid-row: 3 / span 2; }
    .ins.is-wide .ins-edit { grid-column: 2; grid-row: 3; margin-top: 0; }
    .ins.is-wide .ins-punch { grid-column: 2; grid-row: 4; margin-top: 0; }
}

/* Pemilihan dokumen & penampil dokumen */
.ds-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .9rem; }
.ds-head h3 { margin: 0; font-weight: 650; font-size: 1.08rem; }
.ds-head p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; max-width: 70ch; }
.ds-bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .6rem; }
.ds-doc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .75rem; align-items: start; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; margin: 0; transition: border-color .12s, background .12s; }
.ds-doc:hover { border-color: #AFC3D7; }
.ds-doc input { grid-row: span 3; margin-top: .15rem; width: 1.15rem; height: 1.15rem; }
.ds-doc b { font-weight: 650; font-size: .93rem; line-height: 1.3; }
.ds-doc .mono { font-size: .76rem; color: var(--muted); }
.ds-doc small { font-size: .74rem; color: var(--muted); }
.ds-doc:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }
.ds-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: var(--flame-soft); }
.ds-confirm p { margin: 0; color: var(--flame-ink); font-size: .88rem; max-width: 62ch; }
.dv { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.dv-list { list-style: none; margin: 0; padding: .4rem; background: #F6F9FC; border-right: 1px solid var(--line); display: grid; gap: 2px; align-content: start; max-height: 74vh; overflow-y: auto; }
.dv-list button { width: 100%; text-align: left; border: 0; background: transparent; padding: .55rem .65rem; border-radius: 8px; display: grid; gap: .05rem; color: var(--fg); }
.dv-list button:hover { background: #fff; }
.dv-list button[aria-selected="true"] { background: #fff; box-shadow: inset 3px 0 0 var(--blue), 0 1px 2px rgba(4, 31, 56, .06); }
.dv-list b { font-size: .88rem; font-weight: 650; line-height: 1.3; }
.dv-list .mono { font-size: .72rem; color: var(--muted); }
.dv-list .late { font-size: .7rem; color: var(--flame-ink); font-weight: 650; }
.dv-list .dv-more button { color: var(--blue-ink); font-weight: 650; font-size: .85rem; border: 1px dashed var(--line); margin-top: .3rem; text-align: center; }
.dv-stage { min-width: 0; display: flex; flex-direction: column; }
.dv-bar { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; background: var(--deep); color: #fff; font-size: .82rem; min-height: 2.9rem; }
.dv-bar .t { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dv-bar button { width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 0; background: var(--deep-2); color: #fff; flex: 0 0 auto; }
.dv-bar .z { font-family: var(--f-mono); min-width: 3.1rem; text-align: center; }
.dv-port { position: relative; overflow: auto; height: min(70vh, 46rem); background: #E9EEF4; -webkit-overflow-scrolling: touch; }
.dv-canvas { width: 100%; padding: .75rem; display: grid; gap: .75rem; justify-items: center; }
.dv-canvas img, .dv-canvas canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(4, 31, 56, .18); -webkit-user-drag: none; }
.dv-msg { display: grid; place-items: center; text-align: center; min-height: 14rem; color: var(--muted); padding: 1.5rem; font-size: .9rem; }
.dv-sel { display: none; }
@media (max-width: 760px) {
    .dv { grid-template-columns: minmax(0, 1fr); }
    .dv-list { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: none; scrollbar-width: thin; }
    .dv-list li { flex: 0 0 auto; max-width: 15rem; }
    .dv-port { height: 62vh; }
}
.ref-card .q-hint { margin-bottom: 1rem; }

/* Formulir ITR / RFI (format NTO) */
.frm-doc { border: 1.5px solid var(--deep); border-radius: 6px; background: #fff; max-width: 880px; font-size: .93rem; }
.frm-head { display: flex; align-items: center; gap: .9rem; padding: .75rem .95rem; border-bottom: 1.5px solid var(--deep); }
.frm-code { flex: 0 0 auto; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; border: 1px solid var(--deep); padding: .15rem .45rem; border-radius: 4px; }
.frm-head h3 { margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .01em; line-height: 1.35; }
.frm-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.frm-meta > * { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .45rem .95rem; margin: 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.frm-meta > *:nth-child(odd) { border-right: 1px solid var(--line-2); }
.frm-meta span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.frm-meta b { font-weight: 600; overflow-wrap: anywhere; }
.frm-meta .frm-wide { grid-column: 1 / -1; border-right: 0; }
.frm-tbl { width: 100%; border-collapse: collapse; }
.frm-tbl th { background: #F3F7FB; font-size: .76rem; font-weight: 700; padding: .5rem .55rem; border-bottom: 1px solid var(--line); text-align: left; }
.frm-tbl td { padding: .5rem .55rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.frm-tbl .c-no { width: 2.6rem; text-align: center; color: var(--muted); font-family: var(--f-mono); font-size: .85rem; }
.frm-tbl .c-r { width: 5.4rem; text-align: center; }
.frm-tbl .c-t { line-height: 1.45; }
.frm-pick { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.frm-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.frm-pick span { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.1rem; padding: 0 .6rem; border: 1.5px solid #AFC3D7; border-radius: 8px; font-size: .76rem; font-weight: 650; color: var(--muted); background: #fff; }
.frm-tbl .frm-pick span { font-size: 0; width: 1.7rem; min-width: 0; height: 1.7rem; padding: 0; border-radius: 6px; }
.frm-pick input:checked + span { background: var(--deep); border-color: var(--deep); color: #fff; }
.frm-tbl tr td:nth-child(3) .frm-pick input:checked + span { background: var(--ok); border-color: var(--ok); }
.frm-tbl tr td:nth-child(4) .frm-pick input:checked + span { background: var(--bad); border-color: var(--bad); }
.frm-tbl .frm-pick input:checked + span::after { content: "✓"; font-size: .9rem; line-height: 1; color: #fff; }
.frm-pick input:focus-visible + span { outline: 3px solid rgba(245, 172, 46, .75); outline-offset: 2px; }
.frm-pick-lg span { height: 2.4rem; padding: 0 1rem; font-size: .86rem; }
.frm-note { display: block; padding: .6rem .95rem; margin: 0; border-bottom: 1px solid var(--line-2); }
.frm textarea { min-height: 0; line-height: 1.45; resize: vertical; }
.frm-note span, .frm-row > span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
.frm-result { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem .95rem; border-bottom: 1px solid var(--line-2); }
.frm-result > span { font-weight: 700; margin-right: .25rem; }
.frm-sheetb { padding: .6rem .95rem; }
.frm-sheetb summary { font-size: .84rem; color: var(--blue-ink); cursor: pointer; }
.frm-tags { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.frm-tag { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.4fr; gap: .35rem; }
.frm-sec { background: #F3F7FB; font-weight: 700; font-size: .82rem; padding: .45rem .95rem; border-bottom: 1px solid var(--line); }
.frm-rows { display: flex; flex-direction: column; }
.frm-row { display: block; padding: .6rem .95rem; margin: 0; border-bottom: 1px solid var(--line-2); }
.frm-dt { display: flex; gap: .5rem; max-width: 22rem; }
.frm-yn { display: flex; gap: .5rem; }
.frm-items { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .95rem .3rem; }
.frm-item { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .5rem; align-items: center; max-width: 30rem; }
.frm-item span { text-align: center; color: var(--muted); font-family: var(--f-mono); font-size: .85rem; }
.frm-doc > .btn { margin: 0 .95rem .85rem; }
@media (max-width: 640px) {
    .frm-meta { grid-template-columns: minmax(0, 1fr); }
    .frm-meta > *:nth-child(odd) { border-right: 0; }
    .frm-tbl thead { display: none; }
    .frm-tbl tr { display: grid; grid-template-columns: 2rem repeat(3, minmax(0, 1fr)); gap: .4rem; padding: .65rem .55rem; border-bottom: 1px solid var(--line-2); }
    .frm-tbl td { border: 0; padding: 0; }
    .frm-tbl .c-no { grid-row: 1; width: auto; text-align: left; }
    .frm-tbl .c-t { grid-column: 2 / -1; grid-row: 1; }
    .frm-tbl .c-r { width: auto; }
    .frm-tbl td.c-r:nth-child(3) { grid-column: 2; }
    .frm-tbl .frm-pick, .frm-tbl .frm-pick span { width: 100%; }
    .frm-tbl .frm-pick span { font-size: .78rem; height: 2.3rem; }
    .frm-tbl .frm-pick input:checked + span::after { content: none; }
    .frm-tag { grid-template-columns: 1fr 1fr; }
}
.frm-read { font-size: .9rem; }
.frm-tbl-read .c-r2 { width: 6.5rem; text-align: center; font-weight: 600; }
.frm-tbl-read tr.is-ok td { background: #F1FAF4; }
.frm-tbl-read tr.is-bad td { background: #FDF1EF; }
@media (max-width: 640px) { .frm-tbl-read thead { display: table-header-group; } .frm-tbl-read tr { display: table-row; } .frm-tbl-read td { padding: .4rem .35rem; border-bottom: 1px solid var(--line-2); } }

/* Pembahasan: gambar + area kunci + pin; pemilihan dokumen */
.iv-fig { position: relative; display: block; margin: 0 0 .5rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); max-width: 780px; }
.iv-fig img { display: block; width: 100%; height: auto; }
.iv-t { position: absolute; border: 2px dashed var(--ok); background: rgba(23, 115, 74, .12); border-radius: 3px; }
.iv-t.is-ell { border-radius: 50%; }
.iv-t.is-miss { border-color: var(--bad); background: rgba(179, 38, 30, .1); }
.iv-t b { position: absolute; left: -2px; top: -1.25rem; font-size: .68rem; background: var(--ok); color: #fff; padding: 0 .35rem; border-radius: 4px; }
.iv-t.is-miss b { background: var(--bad); }
.iv-p { position: absolute; transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 750; background: var(--flame); color: var(--deep); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.iv-p.is-hit { background: var(--ok); color: #fff; }
.iv-legend { font-size: .76rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .5rem; }
.dv-wrap { margin-bottom: .75rem; overflow-x: auto; }
.dv-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 30rem; }
.dv-tbl th { text-align: left; font-size: .74rem; color: var(--muted); font-weight: 650; padding: .45rem .55rem; border-bottom: 1px solid var(--line); }
.dv-tbl td { padding: .5rem .55rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dv-tbl td b { display: block; font-weight: 600; }
.dv-tbl td span { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }
.dv-tbl tr.is-ok td { background: #F1FAF4; }
.dv-tbl tr.is-bad td { background: #FDF1EF; }
.dv-tbl tr.is-warn td { background: var(--flame-soft); }
.dv-note { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }

/* =====================================================================
   5. Ponsel
   ===================================================================== */
@media (max-width: 760px) {
    .bar-in { padding: .6rem 1rem; gap: .6rem; }
    .lock img { height: 26px; }
    .lock-rule, .lock-t small, .who-n { display: none; }
    .subnav { display: none; }
    .wrap { padding: 1.1rem 1rem 6rem; gap: 1.15rem; }
    .next { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; gap: .85rem; }
    .next .btn { grid-column: 1 / -1; width: 100%; }
    .tb { --cols: 2 !important; }
    .tb > div:nth-child(2n) { border-right: 0; }
    .tb > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .meters > div:nth-child(2n) { border-right: 0; }
    .meters > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .rg-head, .std-head { padding: 1rem; }
    .rg-more summary { padding: .85rem 1rem; }
    .rg-body { padding: 0 1rem 1rem; }
    .cols { grid-template-columns: minmax(0, 1fr); }
    .lst > li { padding: .9rem 1rem; }
    .ex { grid-template-columns: minmax(0, 1fr); }
    .ex-a { grid-column: 1; grid-row: auto; }
    .ex-a .btn { flex: 1 1 auto; }
    .intro { grid-template-columns: minmax(0, 1fr); }
    .intro-s { position: static; order: -1; }
    .facts .tb { --cols: 2; }
    .rv > li { padding: 1rem; }
    .rv-a { grid-template-columns: minmax(0, 1fr); }
    .cert-a .btn { flex: 1 1 auto; }
    .bnav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
    .bnav a { display: grid; justify-items: center; gap: .15rem; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 650; padding: .35rem .2rem; border-radius: 10px; }
    .bnav a i { font-size: 1.25rem; line-height: 1; }
    .bnav a[aria-current] { color: var(--blue-ink); }
    .foot { padding-bottom: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* B9: panah dropdown tidak lagi menabrak teks */
.cas .form-select { padding-right: 2.5rem; background-position: right .8rem center; background-size: 14px 10px; text-overflow: ellipsis; }
.cas .form-select-sm { padding-right: 2rem; background-position: right .55rem center; }

/* B9: halaman masuk diperkecil (setara tampilan zoom 90%) */
.lg-art { padding: clamp(1.25rem, 3.4vw, 2.6rem); }
.lg-logo { height: 46px; }
.lg-cas { font-size: .84rem; margin-bottom: .75rem; }
.lg-title { max-width: 30rem; }
.lg-title h1 { font-size: clamp(2rem, 3.9vw, 3.2rem); }
.lg-motto { font-size: clamp(.95rem, 1.4vw, 1.12rem); margin-top: 1rem; }
.lg-side { padding: 2rem 1.5rem; }
.lg-box { max-width: 22rem; gap: .95rem; font-size: .92rem; }
.lg-box h2 { font-size: 1.5rem; }
.lg-box > p { margin-top: -.5rem; }
.lg-box .form-label { font-size: .88rem; margin-bottom: .35rem; }
.lg-box .form-control { font-size: .95rem; padding: .58rem .8rem; }
.lg-pw .form-control { padding-right: 4.2rem; }
.lg-pw button { font-size: .8rem; }
.lg-box .alert { font-size: .9rem; padding: .7rem .85rem; }
.lg-row, .lg-foot { font-size: .84rem; }
.lg-foot { padding-top: .85rem; }
.lg-box .btn-primary { --bs-btn-padding-y: .68rem; font-size: .96rem; }
.lg-legal { font-size: .72rem; }
@media (max-width: 860px) {
    .lg-art { min-height: 20rem; }
    .lg-logo { height: 36px; }
    .lg-title h1 { font-size: 1.95rem; }
    .lg-box h2 { font-size: 1.35rem; }
}

/* =====================================================================
   B10 — Portal peserta multi-halaman (A+B): sidebar biru tua, kartu
   radius 16, kartu sambutan biru NTO, angka & kode memakai Plex Mono.
   ===================================================================== */
.pt-body { background: #F4F7FB; }
.pt { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.pt-side { background: var(--deep); color: var(--on-dark); position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.pt-side-in { display: flex; flex-direction: column; min-height: 100%; padding: 1.15rem .85rem 1rem; gap: 1.1rem; }
.pt-lock { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff !important; padding: 0 .4rem; }
.pt-lock span { display: grid; line-height: 1.1; padding-left: .7rem; border-left: 1px solid var(--dark-line); }
.pt-lock b { font-weight: 650; font-size: .98rem; letter-spacing: .01em; }
.pt-lock small { color: var(--on-dark-muted); font-size: .72rem; }
.pt-me { display: flex; align-items: center; gap: .75rem; padding: .85rem .7rem; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--dark-line); }
.pt-av { width: 52px; height: 52px; flex: none; border-radius: 50%; padding: 2px; background: conic-gradient(var(--flame) 0 100%); display: grid; place-items: center; overflow: hidden; }
.pt-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--deep); background: var(--deep-2); }
.pt-av.is-ini { background: var(--deep-2); box-shadow: inset 0 0 0 2px var(--flame); color: #fff; font-weight: 650; font-size: 1.05rem; }
.pt-me-t { min-width: 0; display: grid; }
.pt-me-t b { color: #fff; font-weight: 650; font-size: .95rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pt-me-t small { color: var(--on-dark-muted); font-size: .76rem; margin-top: .15rem; }
.pt-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.pt-nav a { display: flex; align-items: center; gap: .7rem; padding: .62rem .75rem; border-radius: 10px; color: var(--on-dark-muted) !important; text-decoration: none; font-weight: 600; font-size: .92rem; position: relative; }
.pt-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.pt-nav a:hover { color: #fff !important; background: rgba(255, 255, 255, .06); }
.pt-nav a[aria-current] { color: #fff !important; background: var(--deep-2); box-shadow: inset 3px 0 0 var(--flame); }
.pt-nav a[aria-current] i { color: var(--flame); }
.pt-n { margin-left: auto; font-style: normal; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--flame); color: var(--deep); font-size: .72rem; font-weight: 750; display: inline-grid; place-items: center; font-family: var(--f-mono); }
.pt-side-f { margin-top: auto; display: grid; gap: .1rem; border-top: 1px solid var(--dark-line); padding-top: .75rem; }
.pt-side-f a { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; color: var(--on-dark-muted) !important; text-decoration: none; font-size: .86rem; font-weight: 600; border-radius: 8px; }
.pt-side-f a:hover { color: #fff !important; background: rgba(255, 255, 255, .06); }
.pt-col { min-width: 0; display: flex; flex-direction: column; }
.pt-top { display: none; }
.pt-main { flex: 1; }
.pt-main .wrap { padding-top: 1.5rem; }
.pt-foot { text-align: center; font-size: .78rem; color: var(--muted); padding: 1.25rem 1rem 2rem; }
.pt-foot a { color: var(--muted); }
.pt-bnav { display: none; }
.pt-scrim { position: fixed; inset: 0; background: rgba(4, 31, 56, .45); z-index: 1040; }

.pw { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1.75rem 3rem; display: grid; gap: 1.25rem; }
.pw-n { max-width: 820px; }
.pw-h h1 { margin: 0; font-weight: 650; font-size: clamp(1.31rem, 2.6vw, 1.55rem); letter-spacing: -.01em; }
.pw-h p { margin: .3rem 0 0; color: var(--muted); max-width: 70ch; }
.pw-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.pt-hero { background: var(--blue); color: #fff; border-radius: 16px; padding: 1.6rem 1.75rem; display: grid; gap: 1.2rem; box-shadow: 0 12px 32px -18px rgba(4, 121, 200, .7); position: relative; overflow: hidden; }
.pt-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .07); pointer-events: none; }
.pt-hero h1 { margin: 0; font-weight: 650; font-size: clamp(1.37rem, 3vw, 1.7rem); letter-spacing: -.01em; line-height: 1.12; }
.pt-hero p { margin: .35rem 0 0; color: rgba(255, 255, 255, .86); }
.pt-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: var(--deep); border-radius: 12px; padding: 1rem 1.15rem; position: relative; z-index: 1; }
.pt-next-ic { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--flame); color: var(--flame); display: grid; place-items: center; font-size: 1.1rem; }
.pt-next h2 { margin: 0; font-weight: 650; font-size: 1.05rem; color: #fff; }
.pt-next p { margin: .15rem 0 0; color: var(--on-dark-muted); font-size: .9rem; }

.kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kp-c { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem 1.05rem; display: grid; gap: .35rem; align-content: start; text-decoration: none; color: var(--fg) !important; box-shadow: var(--shadow); transition: border-color .15s; }
.kp-c:hover { border-color: #9CC6E8; }
.kp-c b { font-weight: 650; font-size: 1.25rem; line-height: 1.1; }
.kp-c small { color: var(--muted); font-size: .8rem; }

.pc { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 1.15rem 1.25rem; display: grid; gap: .85rem; min-width: 0; align-content: start; }
.pc-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .4rem 1rem; }
.pc-h h2 { margin: .1rem 0 0; font-weight: 650; font-size: 1.11rem; line-height: 1.25; }
.pc-h > a { font-size: .86rem; font-weight: 600; text-decoration: none; }
.pc-empty { margin: 0; color: var(--muted); font-size: .92rem; }

.td { list-style: none; margin: 0; padding: 0; }
.td li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem 0; border-top: 1px dashed var(--line); }
.td li:first-child { border-top: 0; padding-top: 0; }
.td-t { font-weight: 600; font-size: .9rem; }
.td-m { display: grid; min-width: 0; }
.td-m small { color: var(--muted); font-size: .8rem; }

.ib { list-style: none; margin: 0; padding: 0; display: grid; }
.ib li + li { border-top: 1px solid var(--line-2); }
.ib a { display: grid; gap: .1rem; padding: .65rem .6rem; margin: 0 -.6rem; border-radius: 10px; text-decoration: none; color: var(--fg) !important; }
.ib a:hover { background: #F4F8FC; }
.ib li.is-new a { background: var(--blue-tint); }
.ib-k { font-size: .72rem; font-weight: 650; color: var(--muted); }
.ib-x { font-size: .88rem; color: var(--muted); }
.ib small { color: var(--muted); font-size: .76rem; }
.ib-full a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
.ib-full a > * { grid-column: 1; }
.ib-full a > .chip { grid-column: 2; grid-row: 1 / span 4; align-self: center; }

.rg-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: .8rem 1.25rem; border-top: 1px solid var(--line); }
.rg-links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; text-decoration: none; }

.pay-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.pay-sum > div { padding: .75rem 1rem; border-right: 1px solid var(--line); min-width: 0; }
.pay-sum > div:last-child { border-right: 0; }
.pay-sum b { display: block; font-weight: 700; font-size: 1.05rem; margin-top: .1rem; font-family: var(--f-mono); }
.pay-sum > div:last-child b { font-family: var(--f-sans); }
.pay-sum .is-due b { color: var(--bad); }
.pay-inv { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; background: #F4F8FC; border-radius: 10px; padding: .55rem .8rem; font-size: .9rem; font-weight: 600; }
.pay-inv i { color: var(--blue); }
.pay-inv span { margin-right: auto; }
.pay-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.pay-h { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; }
.pay-note { display: flex; gap: .5rem; align-items: flex-start; background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: .7rem .85rem; font-size: .9rem; font-weight: 600; }
.pay-note.is-ok { background: var(--ok-soft); color: var(--ok); }
.pay-note a { color: inherit; }

.hx { --bs-table-bg: transparent; font-size: .9rem; }
.hx th { font-size: .74rem; font-weight: 650; color: var(--muted); border-bottom-color: var(--line); }
.hx td { border-bottom-color: var(--line-2); }

.dl { list-style: none; margin: 0; padding: 0; }
.dl li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line-2); }
.dl li:first-child { border-top: 0; padding-top: 0; }
.dl-ic { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; background: #F2F6FA; color: var(--blue-ink); }
.dl-pdf { color: #B42318; background: #FDECEA; }
.dl-docx { color: #1E5BB8; background: #E8F0FC; }
.dl-xlsx { color: #1D7A45; background: #E3F3EA; }
.dl-pptx { color: #C2410C; background: #FDEFE6; }
.dl-m { display: grid; min-width: 0; }
.dl-m b { font-weight: 650; overflow-wrap: anywhere; }
.dl-m small { color: var(--muted); font-size: .8rem; }

.rcf { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .1rem 1rem; margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: .35rem .9rem; }
.rcf > div { padding: .45rem 0; min-width: 0; }
.rcf dt { font-size: .72rem; font-weight: 650; color: var(--muted); }
.rcf dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rcf-info { margin: 0; background: #F4F8FC; border-radius: 10px; padding: .7rem .85rem; font-size: .92rem; }
.msg h1 { margin: .15rem 0 0; font-weight: 650; font-size: 1.31rem; line-height: 1.2; }
.msg-b { font-size: 1rem; line-height: 1.65; max-width: 68ch; }
.msg-rc { display: grid; gap: .8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.msg-rc h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.rsp fieldset { display: grid; gap: .5rem; margin-bottom: .75rem; }
.rsp legend { font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }
.rsp-o { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; cursor: pointer; }
.rsp-o:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }
.rsp-o input { margin-top: .3rem; accent-color: var(--blue); }
.rsp-o span { display: grid; }
.rsp-o small { color: var(--muted); }

.sc li { grid-template-columns: 4rem minmax(0, 1fr) auto; }
.sc .d { display: grid; line-height: 1.15; }
.sc .d small { font-family: var(--f-sans); font-weight: 600; font-size: .72rem; color: var(--muted); }
.sc-att { text-align: right; display: grid; }
.sc-att b { font-family: var(--f-mono); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.sc-att small { color: var(--muted); font-size: .76rem; }
.sg { grid-column: 1 / -1; display: grid; gap: .55rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .85rem; margin-top: .35rem; }
.sg-t { margin: 0; font-size: .9rem; }
.sg-pad { position: relative; border: 1.5px dashed #9CB6CF; border-radius: 10px; background: #FBFDFF; }
.sg-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; touch-action: none; cursor: crosshair; }
.sg-hint { position: absolute; left: 1rem; bottom: .6rem; font-size: .8rem; color: #9CB1C6; pointer-events: none; border-top: 1px solid #C9D7E5; padding-top: .2rem; width: 45%; }
.sg-a { display: flex; justify-content: space-between; gap: .5rem; }
.rcc { border-left: 4px solid var(--flame); }

@media (max-width: 1100px) { .kp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
    .pt { grid-template-columns: minmax(0, 1fr); }
    .pt-side { position: fixed; z-index: 1050; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(4, 31, 56, .35); }
    .pt-open .pt-side { transform: none; }
    .pt-top { display: flex; position: sticky; top: 0; z-index: 1030; align-items: center; gap: .6rem; background: var(--deep); color: #fff; padding: .55rem .9rem; }
    .pt-burger { border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; padding: .2rem .25rem; border-radius: 8px; }
    .pt-top-lock { display: flex; align-items: center; gap: .55rem; color: #fff !important; text-decoration: none; }
    .pt-top-lock b { font-weight: 650; font-size: .95rem; padding-left: .55rem; border-left: 1px solid var(--dark-line); }
    .pt-top-r { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
    .pt-bell { position: relative; color: #fff !important; font-size: 1.15rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
    .pt-bell .n { position: absolute; top: .1rem; right: .05rem; font-style: normal; font-size: .62rem; font-weight: 750; background: var(--flame); color: var(--deep); border-radius: 999px; min-width: 1.05rem; height: 1.05rem; display: grid; place-items: center; padding: 0 .2rem; }
    .pt-av-s { width: 34px; height: 34px; padding: 1.5px; font-size: .8rem; }
    .pt-bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--line); padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); }
    .pt-bnav a { display: grid; justify-items: center; gap: .1rem; font-size: .7rem; font-weight: 650; color: var(--muted) !important; text-decoration: none; padding: .3rem 0; border-radius: 10px; position: relative; }
    .pt-bnav a i { font-size: 1.2rem; }
    .pt-bnav a[aria-current] { color: var(--blue-ink) !important; background: var(--blue-tint); }
    .pt-bnav .pt-n { position: absolute; top: 0; right: 22%; min-width: 1.1rem; height: 1.1rem; font-size: .62rem; }
    .pt-foot { padding-bottom: 5.5rem; }
    .pt-main .wrap { padding-bottom: 6rem; }
}
@media (min-width: 992px) { .pt-top-r .pt-av-s { display: none; } }
@media (max-width: 760px) {
    .pw { padding: 1.1rem 1rem 2rem; gap: 1rem; }
    .pw-2, .pay-cols { grid-template-columns: minmax(0, 1fr); }
    .pt-hero { padding: 1.25rem 1.15rem; }
    .pt-next { grid-template-columns: auto minmax(0, 1fr); }
    .pt-next .btn { grid-column: 1 / -1; }
    .pay-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pay-sum > div:nth-child(2) { border-right: 0; }
    .pay-sum > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .pc { padding: 1rem; }
    .sc li { grid-template-columns: 3.4rem minmax(0, 1fr); }
    .sc li > .mk, .sc li > .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 420px) { .kp { gap: .6rem; } .kp-c { padding: .85rem; } .kp-c b { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .pt-side { transition: none; } }
@media (min-width: 992px) { .pt { background: linear-gradient(to right, var(--deep) 268px, transparent 268px); } }
.sg-pad { max-width: 560px; }
.pay-cols .upl { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch; }
.td-m .mono, .dl-m .mono, .lbl .mono { white-space: nowrap; }
.pc > * { min-width: 0; }
@media (max-width: 560px) { .hx th:nth-child(2), .hx td:nth-child(2) { display: none; } }
.pc .table-responsive { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   B13 — Tipografi: Plus Jakarta Sans, ukuran & bobot lebih tenang.
   ========================================================================== */
body.cas { letter-spacing: -.004em; }
.cas b, .cas strong, .cas th { font-weight: 600; }
.lg-title h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 650; letter-spacing: -.022em; line-height: 1.1; }
.lg-box h2 { font-size: 1.3rem; font-weight: 650; }
.hello h1, .pw-h h1 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 650; letter-spacing: -.018em; }
.ttl { font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 650; letter-spacing: -.015em; }
.h-sec, .box h2, .next h2, .ds-head h3 { font-size: 1rem; font-weight: 650; }
.rg-head h2, .std-head h2 { font-size: 1.15rem; font-weight: 650; }
.res-score { font-size: clamp(2.2rem, 8vw, 3rem); }
.res-v { font-size: 1.05rem; }
.facts b, .meters b, .avg b { font-size: 1.2rem; }
.q-num { font-size: 1.3rem; }
.q-body { font-size: 1rem; }
.xp-timer { font-size: 1.2rem; }
.xp-lock-time { font-size: 2.6rem; }
.cs-sum dd { font-size: 1.15rem; }
.xp-ov-card h2 { font-size: 1.25rem; }
.btn { font-weight: 500; }
.pt-hero h1 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); letter-spacing: -.018em; }
.pt-nav a { font-weight: 500; font-size: .875rem; }
.kp-c b { font-size: 1.2rem; font-weight: 650; }
.cas .btn { font-size: .875rem; }
.cas .btn-lg { font-size: .95rem; }
.cas .table { font-size: .86rem; }

/* B13 — Schedule: kalender + panel rincian sesi */
.sc-dl { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.sc-side { position: sticky; top: 1rem; }
.js-ttc .sd:not(.on) { display: none; }
.sd { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; background: #fff; border-top: 4px solid var(--c); }
.sd + .sd { margin-top: .75rem; }
.js-ttc .sd + .sd { margin-top: 0; }
.sd-date { font-size: .78rem; color: var(--muted); }
.sd-date b { color: var(--blue); font-weight: 600; }
.sd h3 { margin: .15rem 0 .5rem; font-size: 1.02rem; font-weight: 650; line-height: 1.3; }
.sd-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.sd-tag { font-size: .72rem; font-weight: 500; padding: .12rem .55rem; border-radius: 99px; background: #EEF2F7; color: #4A5A6B; }
.sd-tag.is-warn { background: var(--flame-soft); color: var(--flame-ink); }
.sd-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .9rem; margin: 0; font-size: .84rem; }
.sd-facts dt { color: var(--muted); font-weight: 400; }
.sd-facts dd { margin: 0; overflow-wrap: anywhere; }
.sd .sg { margin-top: .8rem; }
.sd-next { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line); display: grid; gap: .25rem; font-size: .8rem; }
.sd-next > span { font-size: .72rem; color: var(--muted); }
.sd-next a { display: flex; gap: .5rem; text-decoration: none; color: var(--fg); padding: .2rem .3rem; border-radius: 6px; }
.sd-next a:hover { background: #F2F6FA; }
.sd-next a b { font-weight: 600; min-width: 5.2rem; color: var(--muted); }
@media (max-width: 991.98px) { .sc-wrap { grid-template-columns: minmax(0, 1fr); } .sc-side { position: static; } }

/* B13 — Assessments: kartu per paket */
.as-h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.2rem; }
.as-h > div { flex: 1 1 22rem; }
.as-filter { display: inline-flex; flex-wrap: wrap; gap: 2px; background: #E4EAF2; border-radius: 12px; padding: 3px; }
.as-filter button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 500; padding: .4rem .85rem; border-radius: 9px; cursor: pointer; }
.as-filter button[aria-pressed="true"] { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(16, 40, 70, .12); }
.as-filter button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.as-sec { margin-top: 1.2rem; }
.as-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: .7rem; }
.as-sec-h h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.as-sec-h span { font-size: .8rem; color: var(--muted); }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; }
.as-card { --a1: #0467AD; --a2: #2196E3; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.as-card.k-ff { --a1: #B76A00; --a2: #F0A830; }
.as-card.k-3d { --a1: #3A5470; --a2: #7390AE; }
.as-card.k-es { --a1: #5B4BB7; --a2: #8C7BE0; }
.as-card.is-prog { box-shadow: 0 0 0 2px var(--flame), 0 12px 26px -14px rgba(20, 60, 110, .4); }
.as-card.is-done, .as-card.is-closed { --a1: #4F6175; --a2: #8394A6; }
.as-band { position: relative; min-height: 5.3rem; padding: .85rem 1rem; color: #fff; background: linear-gradient(120deg, var(--a1), var(--a2)); }
.as-kind { display: block; font-size: .74rem; opacity: .92; }
.as-st { position: absolute; left: 1rem; bottom: .7rem; font-size: .72rem; font-weight: 600; background: rgba(255, 255, 255, .95); color: var(--a1); border-radius: 99px; padding: .15rem .6rem; }
.as-ic { position: absolute; right: 1rem; bottom: -1.3rem; width: 3rem; height: 3rem; border-radius: 14px; background: #fff; color: var(--a1); display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 6px 16px rgba(20, 40, 70, .14); }
.as-body { padding: 1.1rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.as-body h3 { margin: 0; padding-right: 3rem; font-size: .98rem; font-weight: 650; line-height: 1.3; }
.as-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.as-chips span { font-size: .72rem; background: #EEF2F7; color: #4A5A6B; border-radius: 99px; padding: .12rem .55rem; }
.as-info { flex: 1; font-size: .8rem; color: var(--muted); }
.as-info p { margin: 0; }
.as-row { display: flex; justify-content: space-between; gap: .5rem; }
.as-row b { color: var(--fg); font-weight: 650; }
.as-res.ok { color: var(--ok); font-weight: 600; } .as-res.bad { color: var(--bad); font-weight: 600; }
.as-bar { position: relative; height: 6px; border-radius: 6px; background: #E8EEF4; margin-top: .35rem; }
.as-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--a1); }
.as-bar.ok i { background: #1D9B5E; } .as-bar.bad i { background: #D64535; }
.as-bar s { position: absolute; top: -3px; width: 2px; height: 12px; background: #1B2B3C; opacity: .5; }
.as-cta { display: flex; flex-wrap: wrap; gap: .4rem; }
.as-cta .btn { flex: 1 1 auto; }
.as-empty { color: var(--muted); font-size: .86rem; margin-top: 1rem; }

/* B13 — halaman hasil: lebar untuk pembahasan lengkap */
.res-wrap { max-width: 1080px; }
.res-rv { margin-top: 1.2rem; }
.res-rv-h h2 { margin: 0; font-size: 1.1rem; font-weight: 650; }
.res-rv-h p { margin: .25rem 0 .9rem; color: var(--muted); font-size: .86rem; max-width: 70ch; }
.res-wrap > * { min-width: 0; }

/* ==========================================================================
   B14 — Teks isi memakai font sistem (ber-hinting, tajam di Windows);
   Plus Jakarta Sans hanya untuk judul & angka besar.
   ========================================================================== */
:root { --f-sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif; --f-mono: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif; --f-display: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; --bs-body-font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif; }
body.cas { font-family: var(--f-sans); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; letter-spacing: 0; font-size: .9rem; color: #14283D; }
.cas h1, .cas h2, .cas h3, .cas .h1, .cas .h2, .cas .h3, .cas .ttl, .lg-title h1, .lg-box h2, .hello h1, .pw-h h1, .pt-hero h1,
.res-score, .kp-c b, .facts b, .meters b, .avg b, .cs-sum dd, .xp-timer, .xp-lock-time, .q-num, .cert b { font-family: var(--f-display); }
.cas .btn { font-weight: 600; }
.pt-nav a { font-weight: 600; }
.cas .text-secondary, .cas small, .cas .small { color: #4E6175 !important; }

/* B15 — Schedule: panel per hari */
.js-ttc .sd:not(.on):not(.sd-none) { display: none; }
.js-ttc .sd-none[hidden] { display: none; }
.js-ttc .sd.on ~ .sd.on, .js-ttc .sd.on ~ .sd-none { margin-top: .75rem; }
.sd-dh { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; }
.sd-dh b { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--fg, #13283D); }
.sd-dh span { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.sd.is-focus { box-shadow: 0 0 0 2px var(--c); }
.sd-none { border-top-color: #C9D3DE; }
.sd-none h3 { font-size: 1rem; }
.js-ttc .sd.sd-none:not([hidden]) { display: block; }
.sc-notes { margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: .7rem 1rem; font-size: .86rem; }
.sc-notes summary { cursor: pointer; font-weight: 600; }
.sc-notes ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* B16 — portal cabang */
.br-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.br-link code { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; background: var(--blue-tint); color: var(--blue-ink); border-radius: 8px; padding: .5rem .7rem; font-size: .86rem; }
.br-list, .br-mini, .br-terms { list-style: none; margin: 0; padding: 0; }
.br-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(9rem, auto); gap: .4rem 1rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.br-row:first-child { border-top: 0; padding-top: 0; }
.br-who b { display: block; font-weight: 650; }
.br-who small, .br-st small, .br-num small, .br-mini small { display: block; color: var(--muted); font-size: .8rem; }
.br-st { display: grid; justify-items: start; gap: .2rem; }
.br-num { text-align: right; }
.br-num b { font-weight: 650; }
.pw-2 .br-row { grid-template-columns: minmax(0, 1fr) auto; }
.pw-2 .br-num { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.pw-2 .br-num .lbl { display: inline; }
.br-mini li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.br-mini li:first-child { border-top: 0; padding-top: 0; }
.br-mini span { min-width: 0; }
.br-terms li { padding: .3rem 0 .3rem 1.1rem; position: relative; font-size: .92rem; }
.br-terms li::before { content: ""; position: absolute; left: .2rem; top: .8rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--blue); }
@media (max-width: 640px) {
    .br-row { grid-template-columns: minmax(0, 1fr) auto; }
    .br-num { grid-column: 1 / -1; text-align: left; }
}

/* B17 — gerbang panduan sebelum ujian */
.tour-gate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; background: var(--blue-tint); border: 1px solid #B7D8F0; border-radius: 16px; padding: 1rem 1.15rem; }
.tour-gate > i { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 1.15rem; }
.tour-gate b { display: block; font-weight: 650; }
.tour-gate span { display: block; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .tour-gate { grid-template-columns: auto minmax(0, 1fr); } .tour-gate .btn { grid-column: 1 / -1; } }
/* B18 — ujian terkunci karena kehadiran */
/* B19 — daftar syarat (kehadiran + pembayaran) */
.as-lock { margin: 0; background: var(--warn-soft); color: #5C3A00; border-radius: 10px; padding: .6rem .75rem .65rem; font-size: .86rem; line-height: 1.45; }
.as-lock-h { display: flex; gap: .45rem; align-items: center; margin: 0 0 .45rem; font-weight: 650; }
.as-lock-h i { color: var(--warn); }
.as-req { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.as-req li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem; row-gap: .3rem; align-items: start; color: var(--fg); }
.as-req li > i { margin-top: .12rem; }
.as-req li.ok > i { color: var(--ok); }
.as-req li.no > i { color: var(--bad); }
.as-req b { font-weight: 650; }
.as-req small { display: block; color: var(--muted); font-size: .8rem; }
.as-meter { grid-column: 2; position: relative; height: 6px; border-radius: 99px; background: rgba(4, 31, 56, .1); overflow: visible; }
.as-meter i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--bad); }
.as-req li.ok .as-meter i { background: var(--ok); }
.as-meter s { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--deep); border-radius: 1px; }
.as-lock-f { margin: .55rem 0 0; color: #5C3A00; font-size: .8rem; }
.as-cta .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* B19 — My profile (data diri & dokumen) */
.pf { display: grid; gap: 1rem; }
.pf > * { min-width: 0; }
.pf-req { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; background: var(--flame-soft); border: 1px solid #F1D49B; border-radius: 16px; padding: .95rem 1.1rem; }
.pf-req > i { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--flame); color: var(--deep); display: grid; place-items: center; font-size: 1.05rem; }
.pf-req b { display: block; font-weight: 650; }
.pf-req span { display: block; color: var(--flame-ink); font-size: .88rem; }
.pf-req q { display: block; margin-top: .4rem; color: var(--fg); font-size: .92rem; quotes: none; border-left: 3px solid var(--flame); padding-left: .6rem; }
.pf-lock { display: inline-flex; gap: .3rem; align-items: center; font-size: .8rem; font-weight: 600; color: var(--muted); }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; margin: 0; }
.pf-row { padding: .6rem 0; border-top: 1px solid var(--line); min-width: 0; }
.pf-row.is-wide { grid-column: 1 / -1; }
.pf-row dt { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .15rem; }
.pf-row dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.pf-row dd small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.pf-row.is-edit { background: linear-gradient(90deg, var(--flame-soft), transparent 70%); margin: 0 -.5rem; padding: .6rem .5rem; border-radius: 8px; border-top-color: transparent; }
.pf-row.is-edit dt { color: var(--flame-ink); }
.pf-docs { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-docs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line); }
.pf-docs li.is-edit { background: linear-gradient(90deg, var(--flame-soft), transparent 70%); margin: 0 -.5rem; padding: .65rem .5rem; border-radius: 8px; border-top-color: transparent; }
.pf-ic { width: 2.3rem; height: 2.3rem; border-radius: 10px; background: #E6EDF4; color: var(--muted); display: grid; place-items: center; }
.pf-ic.has { background: var(--blue-tint); color: var(--blue-ink); }
.pf-dm b { display: block; font-weight: 600; }
.pf-dm small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.pf-up { grid-column: 2 / -1; }
.pf-send { gap: .6rem; }
.pf-note { display: flex; gap: .5rem; margin: 0; color: var(--muted); font-size: .88rem; }
.pf-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pf-hist li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.pf-hist small { display: block; color: var(--muted); font-size: .78rem; }
@media (max-width: 640px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } .pf-docs li { grid-template-columns: auto minmax(0, 1fr); } .pf-docs li > .btn { grid-column: 2; justify-self: start; } }

/* B20 — daftar sertifikat (termasuk sertifikat alumni dari sistem lama) */
.mc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mc-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem .75rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.mc-ic { width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 1.05rem; }
.mc-m b { display: block; font-weight: 600; }
.mc-m small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.mc-a { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- B22: Permit to Work & JSEA (format NTO) ---------- */
.pf-doc { max-width: 960px; }
.pf-top { display: flex; align-items: center; gap: 1rem; padding: .75rem .95rem; border-bottom: 2px solid var(--deep); }
.pf-top h3 { margin: 0; flex: 1 1 auto; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; }
.pf-logo { height: 34px; width: auto; }
.pf-no { margin: 0; display: grid; grid-template-columns: auto auto; gap: 0 .6rem; font-size: .78rem; }
.pf-no dt { color: var(--muted); font-weight: 600; } .pf-no dd { margin: 0; font-weight: 700; }
.pf-alarm { font-size: .78rem; line-height: 1.45; padding: .55rem .95rem; background: var(--flame-soft); color: #4A3200; border-bottom: 1px solid var(--line); }
.pf-sec { border-bottom: 1.5px solid var(--deep); padding-bottom: .6rem; }
.pf-sec:last-child { border-bottom: 0; }
.pf-band { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; padding: .45rem .95rem; background: var(--deep); color: #fff; font-size: .84rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pf-band span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; background: var(--flame); color: var(--deep); font-weight: 800; }
.pf-band-plain { background: #F3F7FB; color: var(--fg); border-bottom: 1px solid var(--line); }
.pf-band small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.pf-note { font-size: .8rem; color: var(--muted); margin: 0 .95rem .55rem; line-height: 1.45; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; padding: 0 .95rem .55rem; }
.pf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: .55rem; }
.pf-wide { grid-column: 1 / -1; }
.pf-sec > .pf-field { padding: 0 .95rem .55rem; }
.pf-field { display: flex; flex-direction: column; gap: .2rem; margin: 0; min-width: 0; }
.pf-field > span, .pf-lbl { font-size: .76rem; font-weight: 650; color: var(--muted); }
.pf-field > b { font-weight: 650; padding: .4rem 0; }
.pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .4rem .95rem; }
.pf-grid .pf-row { padding: .2rem 0; }
.pf-yn { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-yn .frm-pick span { height: 2rem; }
.pf-checks { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.pf-checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; padding: 0 .95rem .55rem; }
.pf-checks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-check { display: inline-flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .86rem; line-height: 1.35; cursor: pointer; }
.pf-check input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; flex: 0 0 auto; accent-color: var(--deep); }
.pf-check-only span { display: none; }
.pf-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .7rem .95rem .45rem; font-size: .84rem; font-weight: 750; }
.pf-sub .pf-check { font-weight: 500; }
.pf-tbl { width: calc(100% - 1.9rem); margin: 0 .95rem .45rem; border-collapse: collapse; font-size: .86rem; }
.pf-tbl th { background: #F3F7FB; font-size: .74rem; font-weight: 700; padding: .4rem .5rem; border: 1px solid var(--line); text-align: left; }
.pf-tbl td { padding: .4rem .5rem; border: 1px solid var(--line-2); vertical-align: middle; line-height: 1.4; }
.pf-tbl .c-yn { width: 8.5rem; text-align: center; }
.pf-tbl .c-yn .pf-yn { justify-content: center; }
.pf-sig { display: inline-flex; flex-direction: column; font-weight: 650; font-size: .82rem; color: var(--ok); line-height: 1.25; }
.pf-sig i { margin-right: .25rem; }
.pf-sig small { color: var(--muted); font-weight: 500; font-size: .72rem; }
.pf-appr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 0 .95rem .6rem; }
.pf-appr > div { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; }
.pf-name { font-size: .84rem; }
.pf-gas { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .9rem; padding: 0 .95rem .55rem; align-items: start; }
.pf-gasin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem .7rem; }
.gd-face { background: #1F2328; border-radius: 16px; padding: .7rem; box-shadow: inset 0 0 0 3px #F5AC2E; display: flex; flex-direction: column; gap: .5rem; }
.gd-brand { color: #F5AC2E; font-size: .72rem; font-weight: 800; letter-spacing: .08em; display: flex; justify-content: space-between; }
.gd-brand small { color: #9AA6B2; font-weight: 600; letter-spacing: 0; }
.gd-lcd { background: #B7C59F; color: #17200F; border-radius: 8px; min-height: 6.2rem; padding: .45rem .55rem; font-size: .78rem; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .5rem; align-content: center; font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.gd-lcd > span:only-child { grid-column: 1 / -1; text-align: center; }
.gd-lcd b { font-size: 1rem; }
.gd-lcd .gd-t { grid-column: 1 / -1; text-align: right; font-size: .7rem; }
.gd-btn { border: 0; border-radius: 10px; background: #F5AC2E; color: #1B1300; font-weight: 800; padding: .5rem; letter-spacing: .06em; }
.gd-btn:disabled { opacity: .6; }
.gd-help { display: block; font-size: .72rem; color: var(--muted); margin-top: .35rem; line-height: 1.35; }
/* JSEA */
.pf-matrix { margin: .6rem .95rem; }
.pf-matrix summary { font-weight: 700; font-size: .86rem; cursor: pointer; }
.pf-mx-wrap { overflow-x: auto; margin: .5rem 0; }
.pf-mx { border-collapse: collapse; font-size: .8rem; min-width: 30rem; }
.pf-mx th, .pf-mx td { border: 1px solid #fff; padding: .35rem .55rem; text-align: center; }
.pf-mx th { background: #F3F7FB; font-weight: 700; }
.pf-mx tbody th { text-align: left; }
.rk-low { background: #2E9E4F; color: #fff; } .rk-medium { background: #F2D21B; color: #2B2300; } .rk-high { background: #D9342B; color: #fff; }
.pf-bands { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .8rem; }
.pf-bands b { display: inline-block; min-width: 4.6rem; text-align: center; border-radius: 4px; padding: .05rem .35rem; margin-right: .4rem; font-size: .72rem; }
.pf-ppe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; padding: 0 .95rem .6rem; }
.pf-ppe-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 0; padding: .4rem .3rem; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; text-align: center; font-size: .7rem; line-height: 1.25; background: #fff; }
.pf-ppe-i img { width: 3.4rem; height: auto; }
.pf-ppe-i input { position: absolute; top: .3rem; left: .3rem; accent-color: #D9342B; }
.pf-ppe-i:has(input:checked) { border-color: #D9342B; box-shadow: 0 0 0 2px rgba(217, 52, 43, .18); }
.pf-ppe-i:has(input:focus-visible) { outline: 3px solid rgba(245, 172, 46, .75); outline-offset: 2px; }
.pf-hier { display: block; max-width: 260px; height: auto; margin: 0 .95rem .6rem; }
.pf-hz { display: flex; flex-direction: column; gap: .4rem; padding: 0 .95rem .6rem; }
.pf-hz-i { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pf-hz-i.is-on { border-color: var(--deep); box-shadow: 0 1px 0 var(--deep); }
.pf-hz-h { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .45rem .65rem; }
.pf-hz-h > span { flex: 1 1 14rem; font-weight: 600; font-size: .88rem; }
.pf-hz-b { display: none; padding: .2rem .65rem .65rem; border-top: 1px dashed var(--line); gap: .5rem; flex-direction: column; }
.pf-hz-i.is-on .pf-hz-b { display: flex; }
.pf-rk { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr) 7.5rem; gap: .45rem; align-items: center; }
.pf-score { display: inline-grid; place-items: center; min-height: 2rem; border-radius: 6px; font-weight: 800; font-size: .78rem; border: 1px dashed var(--line); }
.pf-score:empty::before { content: "—"; color: var(--muted); font-weight: 500; }
.pf-ctrl { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
@media (max-width: 760px) {
    .pf-grid, .pf-grid-4, .pf-appr, .pf-gas, .pf-checks-grid, .pf-checks-3 { grid-template-columns: minmax(0, 1fr); }
    .pf-gasin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-ppe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf-rk { grid-template-columns: 1fr 1fr; }
    .pf-rk .pf-lbl { grid-column: 1 / -1; }
    .pf-rk .pf-score { grid-column: 1 / -1; }
    .pf-top { flex-wrap: wrap; }
    .pf-tbl .c-yn { width: 6.5rem; }
    .pf-iso th:nth-child(3), .pf-iso td:nth-child(3) { display: none; }
    .pf-tbl { table-layout: fixed; }
    .pf-tbl th, .pf-tbl td { overflow-wrap: anywhere; font-size: .78rem; padding-left: .3rem; padding-right: .3rem; }
    .pf-iso .c-yn { width: 5rem; }
}

/* ---- B26: Metode Inspeksi (formula & panduan) ---- */
.ig-body { line-height: 1.6; }
.ig-body h3 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.ig-body h3:first-child { margin-top: 0; }
.ig-body ul, .ig-body ol { padding-left: 1.2rem; margin-bottom: .7rem; }
.ig-body li { margin-bottom: .2rem; }
.ig-body table { width: 100%; border-collapse: collapse; margin: .3rem 0 .9rem; font-size: .92em; }
.ig-body th, .ig-body td { border: 1px solid var(--line); padding: .45rem .6rem; vertical-align: top; text-align: left; }
.ig-body thead th { background: var(--blue-tint); }
.ig-body tbody th { width: 9.5rem; background: #F6F9FC; }
.ig-body p:has(> strong:only-child) { font-size: 1.05em; }
.fx-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-bottom: .8rem; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
.fx-tabs button, .fx-lang button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: .32rem .65rem; font-size: .8rem; font-weight: 600; color: inherit; }
.fx-tabs button[aria-selected="true"], .fx-lang button[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.fx-lang { display: inline-flex; gap: .2rem; }
.fx-dlg { width: min(46rem, calc(100vw - 1.5rem)); max-height: min(88vh, 52rem); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); }
.fx-dlg::backdrop { background: rgba(4, 31, 56, .5); }
.fx-dlg-h { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; background: #fff; border-bottom: 1px solid var(--line); z-index: 1; }
.fx-dlg-b { padding: 1rem; }
.ins-fx { font-size: .78rem; color: var(--muted, #56697F); margin: .25rem 0 0; }
.ins-fx button { border: 0; background: none; padding: 0; color: var(--blue-ink); font-weight: 600; text-decoration: underline; }
/* portal: halaman Metode Inspeksi */
.ig-wrap { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; align-items: start; }
.ig-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.ig-nav a { display: block; padding: .45rem .6rem; border-radius: 8px; color: inherit; text-decoration: none; font-size: .85rem; }
.ig-nav a:hover { background: var(--blue-tint); }
.ig-nav a.on { background: var(--deep); color: #fff; }
.ig-nav small { display: block; margin: .6rem .6rem .2rem; color: var(--muted, #56697F); font-weight: 700; font-size: .7rem; }
.ig-sec { scroll-margin-top: 1rem; }
.ig-sec + .ig-sec { margin-top: 1rem; }
.ig-sec h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.ig-sum { color: var(--muted, #56697F); margin-bottom: .8rem; }
.ig-draft { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--flame-ink); background: var(--flame-soft); border-radius: 99px; padding: .1rem .5rem; margin-left: .3rem; vertical-align: middle; }
@media (max-width: 860px) { .ig-wrap { grid-template-columns: 1fr; } .ig-nav { position: static; flex-direction: row; flex-wrap: wrap; } .ig-nav small { width: 100%; margin: .2rem 0; } }
.fx [hidden], .ig-body [hidden] { display: none !important; }