/* 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; }