body{font-family:Arial,sans-serif;background:#f5f5f5;color:#222;margin:0;padding:20px;line-height:1.7}
h1{color:#e57000;margin-bottom:6px}
h2{margin-top:22px}
a{color:#0066cc;text-decoration:none}
a:hover{text-decoration:underline}
.box{background:#fff;padding:16px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin:14px 0}
.small{color:#666;font-size:14px}
.nav{display:flex;justify-content:space-between;gap:12px;margin:24px 0}
.btn{background:#fff;border:1px solid #ddd;border-radius:10px;padding:10px 14px;display:inline-block}
.btn:hover{border-color:#bbb}
code{background:#111;color:#0f0;padding:2px 6px;border-radius:6px}
ul,ol{background:#fff;padding:14px 18px;border-radius:12px}
hr{border:none;border-top:1px solid #ddd;margin:28px 0}
.progress-wrap{margin:12px 0 18px}
.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-title{font-weight:bold}
.progress-step{font-size:14px;color:#666}
.progress-bar{background:#e9e9e9;border-radius:999px;height:10px;overflow:hidden}
.progress-fill{background:#e57000;height:10px;width:0%}

/* === Sidebar Layout (FINAL) === */
.container{max-width:1200px;margin:0 auto}
.layout{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.sidebar{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:14px;position:sticky;top:14px;height:fit-content}
.brand{font-weight:bold;margin-bottom:10px}
.menu a{display:block;padding:10px 10px;border-radius:10px;border:1px solid transparent}
.menu a:hover{background:#f3f3f3}
.menu a.active{background:#fff4ea;border-color:#ffd7b3;font-weight:bold}
main{min-width:0}

/* Responsive */
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative}
}


/* =========================
   Gambar Tutorial
   ========================= */
.img-tutorial {
    width: 100%;
    max-width: 520px;
    /*margin-left: 0;*/
   /* margin-right: auto;*/    
    height: auto;
    display: block;
    margin: 20px auto;   
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Caption gambar */
.figure {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}