/* sertifikat */
canvas {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  /* margin-top: 20px; */
}

/* mp4 player */

:root{
  --bg:#0f172a; --panel:#111827; --muted:#334155; --text:#e5e7eb; --accent:#38bdf8;
}

*{box-sizing:border-box}

.player{overflow:hidden;}
.video-stage{position:relative; aspect-ratio:16/9; background:#000}
video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}

/* Seek (display-only) */
.seek{display:flex; align-items:center; gap:10px; padding:10px 12px;   border-top:1px solid #1f2937}
.time{font-variant-numeric:tabular-nums; opacity:.9}
.bar{position:relative; flex:1; height:10px;   overflow:hidden; border:1px solid #1f2937}
.progress{position:absolute; inset:0; background:linear-gradient(90deg,var(--accent) 0 var(--prog,0%), transparent var(--prog,0%));}
input[type="range"].seek-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none}

.controls{display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid #1f2937; }

/* menu breadcrumb */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:6px 0 10px}
.toolbar .search{flex:1}
.toolbar .search input{width:100%;padding:8px 10px;border:1px solid #d0d7de;border-radius:8px;font:14px system-ui}
.breadcrumb{font:14px system-ui;background:#f6f8fa;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}
.breadcrumb a{color:#2563eb;text-decoration:none;cursor:pointer}
.breadcrumb a:hover{text-decoration:underline}
.muted{color:#6b7280;font-size:13px}