/* Halaman Daftar Sertifikasi - pelengkap site.css */

.dsert-hero__eyebrow {
  display: inline-block; margin-bottom: 8px;
  font-family: var(--font-head); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .9;
}
.dsert-hero__lead { max-width: 640px; margin: 12px 0 0; font-size: 16px; text-shadow: 0 1px 10px rgba(0,0,0,.35); }

.dsert { max-width: 900px; }
.dsert-form { gap: 22px; }

.dsert-step { display: grid; gap: 16px; padding: 26px; min-width: 0; }
.dsert-step__title {
  margin: 0; font-size: clamp(18px, 2vw, 22px);
  border-left: 4px solid var(--red); padding-left: 12px;
}
.dsert-step > p { margin: 0; }
.req { color: var(--red); }
.dsert-note { margin: 0; padding: 12px 16px; background: var(--cream-2); border-radius: var(--radius-sm); color: var(--muted); }

/* A. Pilihan skema */
.dsert-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.dsert-choices legend { font-weight: 500; margin-bottom: 10px; padding: 0; }
.dsert-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dsert-radio {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 700; background: var(--white);
  transition: border-color .2s, background .2s;
}
.dsert-radio:hover { border-color: var(--orange); }
.dsert-radio input { width: 18px; height: 18px; accent-color: var(--red); flex: none; margin: 0; }
.dsert-radio:has(input:checked) { border-color: var(--red); background: #FDF3F5; }
.dsert-radio:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }

/* B. Unit kompetensi */
.dsert-unit-block { display: grid; gap: 12px; }
.dsert-unit-block[hidden] { display: none; }
.dsert-unit-block__title { margin: 0; font-size: 17px; color: var(--red-dark); }
.dsert-units { list-style: none; margin: 0; padding: 0 0 10px; display: grid; gap: 4px; }
.dsert-unit {
  display: grid; grid-template-columns: 20px minmax(0, 190px) minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 6px;
}
.dsert-unit:hover { background: var(--cream-2); }
.dsert-unit:has(input:checked) { background: #FDF3F5; }
.dsert-unit input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--red); }
.dsert-unit__code { font-family: var(--font-head); font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.dsert-unit__title { font-size: 14px; }

/* C. Awalan isian (+62, MET.) */
.dsert-prefix { display: flex; align-items: stretch; }
.dsert-prefix__text {
  display: flex; align-items: center; padding: 0 12px; flex: none;
  background: var(--cream); border: 1px solid #CFC8BF; border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-weight: 500; color: var(--muted);
}
.field .dsert-prefix input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }
.field small { display: block; margin-top: 6px; }

/* G. Pernyataan & tanda tangan */
.dsert-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.dsert-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--red); }
.dsert-sign__label { display: block; font-weight: 500; margin-bottom: 6px; }
.dsert-sign__pad {
  position: relative; max-width: 600px; border: 2px dashed #CFC8BF; border-radius: var(--radius-sm);
  background: var(--white); overflow: hidden;
}
.dsert-sign__pad.is-signed { border-style: solid; border-color: var(--red); }
.dsert-sign__canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 240; touch-action: none; cursor: crosshair; }
.dsert-sign__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: var(--muted); font-family: var(--font-head); font-weight: 700;
}
.dsert-sign__pad.is-signed .dsert-sign__placeholder { display: none; }
.dsert-sign__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dsert-sign__status { margin: 6px 0 0; font-weight: 500; color: #1C6B3A; min-height: 1.2em; }

/* Pesan & tombol */
.dsert-form .alert ul { margin: 6px 0 0; }
.dsert-form .alert:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.dsert-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.dsert-actions .btn[disabled] { opacity: .6; cursor: progress; transform: none; }

@media (max-width: 760px) {
  .dsert-radio-grid { grid-template-columns: 1fr; }
  .dsert-unit { grid-template-columns: 20px minmax(0, 1fr); }
  .dsert-unit__title { grid-column: 2; }
}
@media (max-width: 600px) {
  .dsert-step { padding: 18px 16px; }
  .dsert-actions .btn { flex: 1 1 100%; justify-content: center; }
}