/* Tambahan: formulir, tabel, panel Admin/Anggota, cetak kartu */
.page-hero{background:linear-gradient(135deg,var(--navy-900),var(--blue));color:#fff;padding:44px 0 56px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;background:#fff;clip-path:polygon(0 100%,100% 100%,100% 0,0 90%)}
.page-hero h1{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.01em}
.page-hero p{color:#CBD6EE;margin-top:6px;max-width:640px}
.crumb{font-size:13px;color:#9FB1D9;margin-bottom:8px}.crumb a:hover{color:#fff}
.content{padding:36px 0 24px}
.prose{max-width:820px;font-size:17px}.prose p{margin:0 0 14px}.prose ul,.prose ol{margin:0 0 14px 22px}.prose h2,.prose h3{margin:22px 0 8px;color:var(--navy-900)}
.alert{border-radius:12px;padding:12px 16px;margin:0 0 18px;font-size:15px;border:1px solid}
.alert-ok{background:#E4F6EC;border-color:#A8DDC1;color:#0F5B38}
.alert-err{background:#FDE7EA;border-color:#F3B4BC;color:#8E1423}
.alert-warn{background:#FFF6DC;border-color:#EBD38A;color:#6B4D00}
.alert-info{background:var(--blue-50);border-color:#C5D1EA;color:#1F3560}
.form{display:grid;gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form .field input,.form .field select,.form .field textarea,.inline-form input,.inline-form select{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--black);width:100%;min-height:46px}
.form .field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:13px;color:var(--gray)}
.field .err,.text-danger{font-size:13px;color:#B3202F;font-weight:600}
.req{color:var(--red)}
.checks{display:flex;gap:8px 18px;flex-wrap:wrap}
.checks label{display:flex;gap:8px;align-items:center;font-weight:500;font-size:15px;text-transform:none;letter-spacing:0;color:var(--black)}
.checks input{width:auto;min-height:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.panel + .panel{margin-top:20px}
.panel h2,.panel h3{color:var(--navy-900);margin-bottom:12px}
.fieldset-title{font-weight:800;color:var(--navy-900);font-size:17px;border-bottom:2px solid var(--blue-100);padding-bottom:6px;margin-top:6px}
.doc-row{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.doc-row:last-child{border-bottom:0}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-dark{background:var(--navy-800);color:#fff}.btn-dark:hover{background:var(--navy-900)}
.btn-gray{background:#E9EDF5;color:#27324a}.btn-gray:hover{background:#DCE3F0}
.btn-danger{background:#fff;color:#B3202F;box-shadow:inset 0 0 0 2px #F0B3BB}.btn-danger:hover{background:#FDE7EA}
.cred{background:#F4F7FC;border:2px dashed var(--blue);border-radius:16px;padding:20px}
.cred code{font-family:Consolas,monospace;font-size:22px;font-weight:700;letter-spacing:.06em;color:var(--navy-900);background:#fff;padding:4px 12px;border-radius:8px;border:1px solid var(--line)}
.cred .row{display:flex;gap:12px;align-items:center;margin:8px 0;flex-wrap:wrap}.cred .row span{min-width:110px;color:var(--gray);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em}

/* Tabel */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t th{background:var(--blue-50);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#42506d;padding:11px 14px;white-space:nowrap}
table.t td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
table.t tr:hover td{background:#FAFBFE}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.pager{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap;align-items:center}
.pager a,.pager span{padding:6px 12px;border-radius:9px;background:var(--blue-50);font-weight:700;font-size:14px}
.pager .cur{background:var(--blue);color:#fff}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.filters .field{min-width:150px}
.filters .field input,.filters .field select{font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;min-height:42px;background:#fff}

/* Panel (Admin & Anggota) */
.shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 140px)}
.side{background:var(--navy-900);color:#C9D4EC;padding:20px 14px;position:sticky;top:78px;align-self:start;min-height:calc(100vh - 78px)}
.side h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7F93BF;margin:18px 10px 8px}
.side a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px}
.side a:hover{background:rgba(255,255,255,.08);color:#fff}
.side a.on{background:var(--blue);color:#fff}
.side .cnt{background:var(--red);color:#fff;font-size:12px;border-radius:999px;padding:1px 8px;font-weight:800}
.main{padding:28px 32px 56px;min-width:0;background:#F7F9FD}
.main h1{font-size:28px;color:var(--navy-900);margin-bottom:4px}
.main .sub{color:var(--gray);margin-bottom:22px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;border-left:5px solid var(--blue)}
.kpi b{display:block;font-size:30px;line-height:1.1;color:var(--navy-900)}.kpi span{font-size:13px;color:var(--gray);font-weight:600}
.kpi.red{border-left-color:var(--red)}.kpi.black{border-left-color:var(--black)}
.bar{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:14px}
.bar .lbl{width:210px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;background:var(--blue-100);border-radius:6px;height:16px;overflow:hidden}
.bar .fill{height:100%;background:var(--blue);border-radius:6px}
.bar .val{width:56px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.inline-form{display:inline}
.status-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:700;font-size:12.5px}
.s-Diajukan{background:#DDE8FA;color:#1B4185}.s-PerluPerbaikan{background:#FFF1CC;color:#7A5600}.s-Disetujui{background:#DDF3E8;color:#146B42}.s-Ditolak{background:#FAD9DD;color:#8E1423}
.s-Aktif{background:#DDF3E8;color:#146B42}.s-Cuti{background:#FFF1CC;color:#7A5600}.s-Skorsing{background:#FDE3D5;color:#98410F}.s-Dikeluarkan{background:#FAD9DD;color:#8E1423}
.s-Menunggu{background:#DDE8FA;color:#1B4185}
.timeline{border-left:3px solid var(--blue-100);margin-left:6px;padding-left:16px}
.timeline .it{margin-bottom:14px;position:relative}.timeline .it::before{content:"";position:absolute;left:-23px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.timeline small{color:var(--gray)}
.photo-img{width:104px;height:132px;object-fit:cover;border-radius:14px;border:3px solid #fff;background:#C21F2F;flex:none}
.search-card{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;transition:.15s}
.search-card:hover{box-shadow:var(--shadow);border-color:#C5D1EA}
.search-card img{width:64px;height:82px;object-fit:cover;border-radius:10px;flex:none;background:#C21F2F}
.search-card h3{font-size:17px;color:var(--navy-900)}.search-card small{color:var(--gray);display:block}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.verify-ok{border-left:8px solid var(--ok)}.verify-warn{border-left:8px solid var(--warn)}.verify-out{border-left:8px solid #B3202F}

/* Cetak kartu */
.cards-sheet{display:flex;flex-wrap:wrap;gap:6mm;padding:6mm;background:#fff}
.kta-print{width:53.98mm;height:85.6mm;border-radius:3mm;position:relative;overflow:hidden;color:#fff;background:linear-gradient(170deg,#0A1B40,#1B4185);page-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:var(--font)}
.kta-print .top{background:#fff;padding:2.6mm 3mm 2mm;border-bottom:1mm solid #D32F3F;text-align:center}
.kta-print .top img{height:9.5mm;width:auto;margin:auto}
.kta-print .ph{width:24mm;height:31mm;margin:3.5mm auto 2mm;border:.5mm solid #fff;border-radius:2mm;object-fit:cover;display:block;background:#C21F2F}
.kta-print .nm{text-align:center;font-weight:800;font-size:3.5mm;line-height:1.15;padding:0 3mm;min-height:8mm}
.kta-print .no{text-align:center;font-size:2.6mm;letter-spacing:.03em;color:#C9D4EC;margin-top:.8mm}
.kta-print .br{text-align:center;font-size:2.5mm;color:#C9D4EC;margin-top:.4mm}
.kta-print .ft{position:absolute;left:0;right:0;bottom:0;background:#fff;color:#111318;display:flex;justify-content:space-between;align-items:center;padding:2mm 3mm;height:19mm}
.kta-print .ft div{font-size:2.5mm;line-height:1.3}.kta-print .ft b{display:block;font-size:2.7mm}
.kta-print .ft img{width:15mm;height:15mm}
.kta-print.back{background:#fff;color:#111318;border:.2mm solid #DDE3EE}
.kta-print.back .body{padding:5mm 4mm;font-size:2.7mm;line-height:1.45}
.kta-print.back .qrbig{width:30mm;height:30mm;margin:4mm auto 2mm;display:block}
.kta-print.back .sm{font-size:2.3mm;color:#6E6E6E;text-align:center}
.no-print{}
@media print{
  @page{size:A4;margin:8mm}
  .no-print,.strip,header,footer,.demo-ribbon,.side{display:none!important}
  .shell{display:block}.main{padding:0;background:#fff}
  body{background:#fff}
  .cards-sheet{padding:0}
}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:static;min-height:0;display:flex;flex-wrap:wrap;gap:4px;padding:10px}
  .side h4{display:none}
  .main{padding:20px 16px 40px}
  .grid2,.grid3,.results{grid-template-columns:1fr}
  .doc-row{grid-template-columns:1fr}
  .bar .lbl{width:120px}
}

.lang a{font-size:12px;font-weight:700;border-radius:999px;padding:3px 12px;color:#C9D4EC;display:block}
.lang a.on{background:#fff;color:var(--navy-900)}

/* perbaikan: kotak centang tidak boleh ikut aturan input penuh */
.form .checks input[type=checkbox],.form .field input[type=checkbox],.form .field input[type=radio],.checks input{width:auto;min-height:0;padding:0}
.form .field input[type=file]{padding:8px 10px;min-height:0}
.grid2>.panel+.panel,.grid2>.panel{margin-top:0}
.search-row .field input{width:100%}
/* kartu: ruang konten sebelum footer */
.kta-print .top{padding:2.4mm 3mm 1.8mm}
.kta-print .top img{height:9mm}
.kta-print .ph{width:23mm;height:29.5mm;margin:2.5mm auto 1.5mm}
.kta-print .nm{min-height:7.5mm;font-size:3.4mm}
.kta-print .ft{height:18mm;padding:1.6mm 3mm}
.kta-print .ft img{width:14.5mm;height:14.5mm}
.kta-print.back .body{padding:4mm 3.5mm;font-size:2.6mm;line-height:1.4}
.kta-print.back .qrbig{width:25mm;height:25mm;margin:3mm auto 1.5mm}
.kta-print.back .sm{font-size:2.2mm;line-height:1.3}

/* tombol mata pada kolom password */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:48px!important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;border-radius:8px;cursor:pointer;color:#6E6E6E;display:grid;place-items:center}
.pw-eye:hover{background:var(--blue-100);color:var(--blue)}
.pw-eye:focus-visible{outline:3px solid rgba(27,65,133,.35)}
.pw-eye svg{width:22px;height:22px}