:root{
  --navy:#0b2559; --biru:#1e56c8; --biru-lt:#e7effd; --kuning:#f2b01e; --kuning-lt:#fff3d1;
  --latar:#eef3fb; --tinta:#11203a; --redup:#55657f; --garis:#d3deef;
  --bs-body-font-family:'Hanken Grotesk',system-ui,sans-serif;
  --bs-body-color:var(--tinta); --bs-body-bg:var(--latar); --bs-link-color:var(--biru);
}
body{font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.brand-name,.angka{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--kuning)!important;outline-offset:2px}
.text-muted{color:var(--redup)!important}

/* tombol & input */
.btn{border-radius:6px;font-weight:600}
.btn-success{--bs-btn-bg:var(--biru);--bs-btn-border-color:var(--biru);--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);--bs-btn-active-bg:var(--navy)}
.btn-warning{--bs-btn-bg:var(--kuning);--bs-btn-border-color:var(--kuning);--bs-btn-color:#2a1d00;--bs-btn-hover-bg:#ffc43a;--bs-btn-hover-border-color:#ffc43a;--bs-btn-hover-color:#2a1d00}
.btn-cetak{background:var(--kuning);color:#241800;border:2px solid var(--navy);border-radius:6px;padding:.75rem 1.6rem;font-weight:700;box-shadow:4px 4px 0 var(--navy);transition:transform .12s,box-shadow .12s}
.btn-cetak:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy);background:#ffc43a;color:#241800}
.btn-cetak:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--navy)}
.form-label{font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.form-control,.form-select{border:1.5px solid #bfcce2;border-radius:6px;padding:.6rem .8rem;background-color:#fff}
.form-control:focus,.form-select:focus{border-color:var(--biru);box-shadow:0 0 0 .22rem rgba(30,86,200,.18)}
.form-check-input:checked{background-color:var(--biru);border-color:var(--biru)}

/* brand */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;min-width:0}
.brand-logo{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:6px;padding:3px;flex-shrink:0}
.brand-fallback{width:40px;height:40px;display:grid;place-items:center;background:var(--kuning);color:var(--navy);border-radius:6px;flex-shrink:0}
.brand-name{font-weight:700;line-height:1.1;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis}
.site-nav{background:var(--navy);padding:.7rem 0}
.site-nav .brand-name{max-width:46vw}
@media(min-width:768px){.site-nav .brand-name{max-width:none}}

/* hero: tanda potong (crop mark) ala percetakan */
.hero{background:var(--navy);color:#fff;padding:clamp(1.5rem,5vw,3.5rem) 0 clamp(2rem,6vw,4rem)}
.hero-frame{--m:linear-gradient(var(--kuning),var(--kuning));position:relative;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;padding:clamp(1.5rem,4vw,2.75rem);
  background:
   var(--m) left top/20px 2px no-repeat, var(--m) left top/2px 20px no-repeat,
   var(--m) right top/20px 2px no-repeat, var(--m) right top/2px 20px no-repeat,
   var(--m) left bottom/20px 2px no-repeat, var(--m) left bottom/2px 20px no-repeat,
   var(--m) right bottom/20px 2px no-repeat, var(--m) right bottom/2px 20px no-repeat}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;color:var(--kuning);font-weight:600;margin-bottom:1rem}
.hero h1{font-size:clamp(2.2rem,7vw,4.4rem);font-weight:800;line-height:.98;max-width:13ch;margin-bottom:1.1rem}
.hero p{max-width:50ch;color:#c3d3f0;font-size:1.05rem;margin:0}
.stempel{width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--kuning);transform:rotate(-9deg);font-family:'Bricolage Grotesque';font-weight:700;line-height:1.1;font-size:.95rem;box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 7px var(--kuning)}
.stempel i{font-size:1.4rem;margin-bottom:.25rem}
@media(max-width:767.98px){.hero-frame{grid-template-columns:1fr;gap:1.25rem}.stempel{width:96px;height:96px;font-size:.82rem}}

/* tata letak formulir + stepper */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.5rem;align-items:start;padding-top:1.75rem;padding-bottom:3rem}
.stepper{position:sticky;top:1.25rem;background:#fff;border:1px solid var(--garis);border-radius:10px;padding:1rem}
.stepper-bar{height:6px;background:#e2e9f5;border-radius:9px;overflow:hidden;margin-bottom:.8rem}
.stepper-bar span{display:block;height:100%;width:0;background:var(--biru);transition:width .35s}
.stepper-judul{font-size:.82rem;color:var(--redup);margin-bottom:.4rem}
.langkah{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.65rem;padding:.5rem .35rem;color:var(--tinta);text-decoration:none;border-radius:8px}
.langkah:hover{background:var(--latar)}
.langkah b{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;border:1.5px solid #bfcce2;font-family:'Bricolage Grotesque';font-size:.9rem}
.langkah small{color:var(--redup);font-size:.8rem}
.langkah.selesai b{background:var(--biru);border-color:var(--biru);color:#fff;font-size:0}
.langkah.selesai b::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.8rem}
@media(max-width:991.98px){
  .layout{grid-template-columns:1fr;gap:1rem;padding-top:0}
  .stepper{top:0;z-index:1020;border-radius:0 0 10px 10px;border-top:0;padding:.55rem .6rem}
  .stepper-judul{display:none}.stepper-bar{margin-bottom:.4rem}
  .stepper-list{display:flex;gap:.2rem}
  .langkah{flex:1;grid-template-columns:auto 1fr;gap:.45rem;padding:.3rem}
  .langkah b{width:1.6rem;height:1.6rem;font-size:.8rem}
  .langkah small{display:none}.langkah span{font-size:.8rem;line-height:1.15}
}

.bagian{background:#fff;border:1px solid var(--garis);border-radius:10px;padding:clamp(1.1rem,3vw,1.75rem);margin-bottom:1.25rem;scroll-margin-top:5rem}
.bagian-kepala{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}
.bagian-kepala .no{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.4rem;line-height:.9;color:var(--kuning);-webkit-text-stroke:1.5px var(--navy)}
.bagian-kepala h2{font-size:1.35rem;font-weight:700;margin:0}
.bagian-kepala p{margin:.1rem 0 0;color:var(--redup);font-size:.93rem}

.kemampuan-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--garis)}
.kemampuan-row:first-of-type{border-top:0}
.kemampuan-row .nama{font-weight:600}
.level-group{display:flex;flex-shrink:0;border:1.5px solid #bfcce2;border-radius:8px;overflow:hidden}
.level-group input{position:absolute;opacity:0;pointer-events:none}
.level-group label{padding:.4rem .85rem;font-size:.85rem;font-weight:600;cursor:pointer;background:#fff;border-left:1px solid var(--garis);color:var(--redup);transition:background .15s,color .15s;white-space:nowrap}
.level-group label:first-of-type{border-left:0}
.level-group label:hover{background:var(--latar)}
.level-group input[value="0"]:checked+label{background:#8fa0bd;color:#fff}
.level-group input[value="1"]:checked+label{background:#5b8be0;color:#fff}
.level-group input[value="2"]:checked+label{background:#2d63cf;color:#fff}
.level-group input[value="3"]:checked+label{background:var(--navy);color:#fff}
.level-group input:focus-visible+label{outline:3px solid var(--kuning);outline-offset:-3px}
.was-validated .level-group:has(input:invalid){border-color:#dc3545}
@media(max-width:767.98px){
  .kemampuan-row{flex-direction:column;align-items:stretch;gap:.45rem}
  .level-group{display:grid;grid-template-columns:repeat(4,1fr)}
  .level-group label{padding:.55rem .2rem;text-align:center;font-size:.8rem}
}

.pilih-pelatihan{display:flex;gap:.75rem;align-items:center;padding:.8rem .95rem;border:1.5px solid #bfcce2;border-radius:8px;cursor:pointer;height:100%;background:#fff;transition:background .15s,border-color .15s}
.pilih-pelatihan:hover{border-color:var(--biru)}
.pilih-pelatihan:has(input:checked){background:var(--kuning-lt);border-color:var(--kuning)}
.pilih-pelatihan .form-check-input{width:1.2rem;height:1.2rem;margin:0;flex-shrink:0}

.site-foot{background:var(--navy);color:#a9bde3;padding:1.2rem 0;font-size:.88rem}
.sukses{max-width:560px;margin:3rem auto;text-align:center;padding:2.5rem 1.5rem}
.sukses i{font-size:3rem;color:var(--biru)}

/* login */
.login-split{display:grid;grid-template-columns:1fr 1fr;max-width:860px;margin:clamp(1rem,5vw,3.5rem) auto;border:1px solid var(--garis);border-radius:10px;overflow:hidden;background:#fff}
.login-info{background:var(--navy);color:#fff;padding:2.2rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;min-height:260px}
.login-info h1{font-size:1.9rem;font-weight:800;line-height:1.05;margin:0}
.login-info p{color:#c3d3f0;margin:0;font-size:.95rem}
.login-form{padding:2.2rem}
@media(max-width:767.98px){.login-split{grid-template-columns:1fr}.login-info{min-height:0;padding:1.5rem}.login-form{padding:1.5rem}}

/* admin */
.admin-wrap{display:flex;min-height:100vh}
.sidebar{width:256px;background:var(--navy);color:#fff;padding:1.2rem .9rem;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;overflow-y:auto}
.sidebar .brand{margin:0 .4rem 1.6rem}
.sidebar .nav-link{color:#b5c8ec;border-radius:6px;padding:.62rem .8rem;display:flex;gap:.75rem;align-items:center;font-size:.93rem;font-weight:500;border-left:3px solid transparent}
.sidebar .nav-link i{width:1.1rem;text-align:center}
.sidebar .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar .nav-link.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--kuning);font-weight:600}
.sidebar .nav-link.active i{color:var(--kuning)}
.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.15);padding:1rem .4rem 0}
.main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:.8rem;padding:.85rem clamp(1rem,3vw,1.75rem);background:#fff;border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:1010}
.topbar h1{font-weight:700}
.avatar{margin-left:auto;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--kuning);color:#2a1d00;display:grid;place-items:center;font-weight:800;font-family:'Bricolage Grotesque'}
.content{padding:clamp(1rem,3vw,1.75rem)}
.panel{background:#fff;border:1px solid var(--garis);border-radius:10px;padding:clamp(1rem,2.5vw,1.4rem)}
.backdrop{display:none}

.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--navy);color:#fff;border-radius:10px;margin-bottom:1.25rem}
.strip>div{padding:1.25rem 1.5rem}
.strip>div+div{border-left:1px solid rgba(255,255,255,.18)}
.strip .angka{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1;color:var(--kuning)}
.strip .lbl{color:#c3d3f0;font-size:.9rem;margin-top:.25rem}
@media(max-width:575.98px){.strip{grid-template-columns:1fr}.strip>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.18)}}

.batang{margin-bottom:.95rem}
.batang .atas{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;margin-bottom:.25rem}
.batang .rel{height:10px;background:#e2e9f5;border-radius:2px;overflow:hidden}
.batang .rel span{display:block;height:100%;background:var(--biru)}
.batang.puncak .rel span{background:var(--kuning)}
.meter{display:inline-block;width:84px;height:8px;background:#e2e9f5;border-radius:2px;overflow:hidden;vertical-align:middle;margin-right:.5rem}
.meter::after{content:"";display:block;height:100%;width:var(--v);background:var(--biru)}

.table>:not(caption)>*>*{vertical-align:middle;padding:.7rem .6rem}
.table thead th{font-size:.85rem;color:var(--redup);font-weight:600;border-bottom:2px solid var(--garis)}
@media(max-width:767.98px){
  .tabel-kartu thead{display:none}
  .tabel-kartu,.tabel-kartu tbody,.tabel-kartu tr,.tabel-kartu td{display:block;width:100%}
  .tabel-kartu tr{border:1px solid var(--garis);border-radius:8px;margin-bottom:.75rem;padding:.4rem .2rem}
  .tabel-kartu td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.3rem .7rem;text-align:right}
  .tabel-kartu td::before{content:attr(data-label);color:var(--redup);font-size:.85rem;text-align:left}
  .tabel-kartu td.aksi{justify-content:flex-end;border-top:1px solid var(--garis);margin-top:.3rem;padding-top:.6rem}
  .tabel-kartu td.aksi::before{display:none}
}
.preview-img{max-height:70px;max-width:160px;background:#fff;border:1px solid var(--garis);border-radius:6px;padding:4px}
@media(max-width:991.98px){
  .sidebar{position:fixed;left:-270px;top:0;z-index:1045;transition:left .22s}
  .sidebar.buka{left:0}
  .backdrop.buka{display:block;position:fixed;inset:0;background:rgba(6,20,48,.55);z-index:1040}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* komponen tambahan (tema biru) */
.btn-outline-success{--bs-btn-color:var(--biru);--bs-btn-border-color:var(--biru);--bs-btn-hover-bg:var(--biru);--bs-btn-hover-border-color:var(--biru);--bs-btn-active-bg:var(--navy)}
.btn-outline-danger{--bs-btn-border-color:#e0a4ab}
.btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:var(--garis)}
.alert{border-radius:8px;border-width:1px}
.alert-success{--bs-alert-bg:var(--biru-lt);--bs-alert-border-color:#b9cdf3;--bs-alert-color:var(--navy)}
.list-group-item{border-color:var(--garis)}
.lv,.chip{display:inline-block;border-radius:4px;font-size:.8rem;font-weight:600;padding:.25rem .6rem;line-height:1.3}
.lv{color:#fff}.lv-0{background:#8fa0bd}.lv-1{background:#5b8be0}.lv-2{background:#2d63cf}.lv-3{background:var(--navy)}
.chip{background:var(--biru-lt);color:var(--navy);border:1px solid #c5d6f6;margin:0 .35rem .35rem 0}
.chip-utama{background:var(--kuning-lt);border-color:#f0d58a;color:#4a3500}
dt{font-size:.82rem;color:var(--redup);font-weight:600;margin-top:.7rem}
dd{margin:0}
.table-hover>tbody>tr:hover>*{--bs-table-hover-bg:var(--biru-lt)}