/* ----- fitur: sertifikat — mulai -----
   Desain baru (26 Okt 2026): daftar bukti bersih, status = titik warna, label mono, kapsul.
   Vermilion hanya di: tombol utama dan angka "Terverifikasi". */

/* ---- kartu & aksi ---- */
.sert-kartu{display:grid;gap:0;align-content:start}
.sert-kartu .card-h{margin-bottom:14px}
.sert-aksi{gap:10px;margin-bottom:18px}
.sert-aksi .btn svg{width:17px;height:17px;flex:none}
.sert-tabs{margin:0 0 6px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.sert-tabs::-webkit-scrollbar{display:none}
.sert-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px}
.sert-n{font:600 11px var(--f-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.7}
.sert-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.sert-stats{gap:8px}.sert-stats .stat{padding:14px 12px}.sert-stats .stat:last-child:nth-child(odd){grid-column:auto}.sert-stats .stat .k{font-size:10px;letter-spacing:.08em}}

/* ---- daftar bukti ---- */
.sert-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.sert-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);transition:background-color .2s var(--ease)}
.sert-item:last-child{border-bottom:0}
.sert-ik{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-strong);color:var(--muted);transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.sert-ik svg{width:18px;height:18px}
.st-terverifikasi .sert-ik{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.st-ditolak .sert-ik{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.st-menunggu .sert-ik{border-color:var(--warn);color:var(--warn)}
.sert-isi{flex:1 1 220px;min-width:0;display:grid;gap:3px;justify-items:start;overflow-wrap:anywhere}
.sert-judul{font-size:16px;line-height:1.35;letter-spacing:-.005em}
.sert-meta{font-size:11px;letter-spacing:.1em}
.sert-lihat{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--line-strong);transition:text-decoration-color .2s var(--ease),color .2s var(--ease)}
.sert-lihat:hover{color:var(--api-text);text-decoration-color:var(--api)}
.sert-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.sert-act .btn{min-height:36px;padding:5px 14px;font-size:13.5px}
.sert-act .btn.btn.primary{padding-right:calc(var(--bulat) + 14px)}
.sert-kunci{padding:0 4px}
/* alasan penolakan guru: terbaca jelas, bukan latar merah penuh */
.sert-catatan{display:grid;gap:3px;justify-items:start;justify-self:stretch;margin-top:6px;padding:10px 12px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);border-left:3px solid var(--bad);
  background:var(--bad-soft);color:var(--ink);font-size:14px;line-height:1.45}
.sert-catatan .lbl{color:var(--bad)}
.sert-catatan small{margin-top:4px;color:var(--muted);font-size:13px}
.sert-form > .sert-catatan{margin-top:0}

/* ---- gerak: baris baru masuk, status berubah, baris keluar (transform & opacity) ---- */
.sert-masuk{animation:sertMasuk .42s var(--ease-kuat) both}
@keyframes sertMasuk{from{opacity:0;transform:translateY(-10px)}}
.sert-ubah .badge{animation:sertStatus .5s var(--ease-kuat) both}
.sert-ubah .sert-ik{animation:sertStatus .5s var(--ease-kuat) both}
@keyframes sertStatus{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
.sert-out{animation:sertKeluar .2s var(--ease-in) both;pointer-events:none}
@keyframes sertKeluar{to{opacity:0;transform:translateX(14px)}}
/* centang terverifikasi digambar saat halaman dibuka */
.view.enter .st-terverifikasi .sert-ik svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:centang .45s .35s var(--ease-out) forwards}

/* ---- keadaan kosong ---- */
.sert-kosong{display:grid;justify-items:center;gap:6px;padding:36px 16px}
.sert-kosong p{max-width:44ch}
.sert-kosong p b{color:var(--ink)}
.sert-kosong .btn{margin-top:10px}
.sert-kik{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink)}
.sert-kik svg{width:22px;height:22px}

/* ---- lembar tambah / bagikan ---- */
.sert-dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sert-dua label{margin-top:0}
@media (max-width:440px){.sert-dua{grid-template-columns:1fr}.sert-dua > div + div label{margin-top:14px}}
.sert-bagi textarea{font:13.5px/1.55 var(--f-mono);min-height:180px}
.sert-kutip{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r);background:var(--sunken)}
.sert-chips{gap:6px;margin-bottom:8px}
.sert-chips .btn{min-height:32px;padding:4px 12px;font-size:13px}

/* ---- guru: cari, saringan, daftar siswa ---- */
.sert-filter{gap:6px;margin:12px 0 4px}
.sert-filter button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);
  font:700 13.5px var(--f-body);cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.sert-filter button:hover{color:var(--ink);border-color:var(--ink)}
.sert-filter button.on{background:var(--pill);border-color:var(--pill);color:var(--pill-fg)}
.sert-daftar{display:grid}
button.sert-pick{display:flex;align-items:center;gap:14px;width:100%;padding:12px 10px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:var(--r);background:transparent;
  color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:background-color .15s var(--ease),transform .18s var(--ease-kuat)}
button.sert-pick:last-child{border-bottom:0}
button.sert-pick:hover{background:var(--sunken)}
button.sert-pick:active{transform:scale(.99)}
button.sert-pick .avatar{width:38px;height:38px}
.sert-sec{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.sert-profil .sert-item{padding:12px 0}
.sert-nilai{display:grid;gap:14px}
.sert-sem{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sert-sem span{display:inline-flex;gap:6px;padding:4px 11px;border-radius:999px;background:var(--sunken);font:600 12px var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.sert-sem span b{color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:560px){
  .sert-tabs{flex-wrap:wrap;overflow:visible;border-radius:var(--r-lg)}
  .sert-tabs button{padding:0 10px;gap:5px;font-size:13px}
  .sert-item{flex-wrap:wrap;gap:10px 12px}
  .sert-act{margin-left:50px;justify-content:flex-start;flex:1 1 100%}
  button.sert-pick{flex-wrap:wrap}
  button.sert-pick .sert-act{margin-left:52px;flex:1 1 100%;justify-content:flex-start}
}
/* ----- fitur: sertifikat — selesai ----- */