/* sertifikat */
.canvascert {
  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}


.img.crop{
display: inline-block;
max-width: 200px;
}

.tengah #canvas {
border: solid 1px;
}


.canvas-wrap{
  margin-top:15px;
  text-align:center;
}
canvas{
  width:100%;
  /* max-width:900px; */
  height:auto;
  border:1px solid #ccc;
}



.topmenu {
    position: -webkit-sticky; /* Dukungan untuk Safari */
    position: sticky;
    top: 0;           /* Menempel di bagian paling atas kontainer induk */
    z-index: 11;    /* Memastikan header berada di atas konten row lainnya */
    background-color: white; /* Opsional: agar konten di bawahnya tidak terlihat saat scrolling */
}

#main {
    overflow: visible; /* Penting: sticky tidak akan bekerja jika induknya memiliki overflow: hidden/auto/scroll */
}



@media screen and (max-width: 700px) {
  .topmenu {top:50px;}
}

@media screen and (max-width: 450px) {
  .topmenu {top:0;}
}



/* login */

.app-panel,.profile-panel{
  position:fixed;
  top:64px;
  right:16px;
  width:300px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding:16px;
  display:none;
  z-index:9000;
}

.app-panel.active, .profile-panel.active{display:block}
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.app-item{text-align:center;padding:12px 6px;border-radius:10px;cursor:pointer;}
.app-item:hover{ background:var(--pLightColor); color: var(--pButtonColor)}
.app-icon{font-size:28px}
.app-name{font-size:12px}