/* =========================================================
   tutorial/style.css — HANYA untuk halaman tutorial/index.html
   ========================================================= */

.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{
  counter-increment:step;
  position:relative; padding:18px 20px 18px 56px; margin-bottom:12px;
  background:var(--panel-solid); border:1px solid var(--line); border-radius:var(--radius);
}
.steps li::before{
  content:counter(step);
  position:absolute; left:16px; top:16px;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#04211c;
  font-family:var(--font-mono); font-weight:700; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
}
.steps li h4{ margin:0 0 4px; font-size:1rem; }
.steps li p{ margin:0; font-size:.92rem; }

.video-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.video-card{
  background:var(--panel-solid); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.video-frame{
  aspect-ratio:16/9; width:100%; border:0; display:block; background:#000;
}
.video-card .meta{ padding:16px 18px; }
.video-card .meta h4{ margin:0 0 4px; font-size:.98rem; }
.video-card .meta span{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-faint); }

.note-box{
  border-left:3px solid var(--accent-2); background:#1c1a10;
  padding:14px 18px; border-radius:6px; font-size:.9rem; color:#f0d9a8;
}

@media (max-width:700px){
  .video-grid{ grid-template-columns:1fr; }
}