* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; line-height:1.6; scroll-behavior: smooth; color:#222; }

/* Navbar kanan atas */
.navbar { position: fixed; top:20px; right:20px; z-index:1000; }
.menu-toggle { font-size:2em; cursor:pointer; color:#222; background:#fff; padding:6px 12px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.15);}
nav { display:flex; flex-direction:column; margin-top:10px; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,0.2);}
nav a { padding:10px 18px; text-decoration:none; color:#222; border-bottom:1px solid #eee; font-weight:500;}
nav a:hover { background:#f5f5f5; }
.menu-hidden { display:none; }

/* Sections */
.section { min-height:100vh; display:flex; justify-content:center; align-items:center; padding:70px 25px; }
.container { max-width:850px; width:100%; }

/* Hero */
.hero { background:#1a1a1a; color:white; text-align:center; }
.hero h1 { font-size:3em; margin-bottom:20px; }
.hero p { font-size:1.2em; margin-bottom:25px; }

/* Docs & Contributing */
.docs, .contributing { background:#f9f9f9; color:#222; padding:70px 25px; border-left:5px solid #00bfff; margin-bottom:20px; }
.docs ul, .docs ol, .contributing ol { margin-left:25px; margin-bottom:20px; }
.docs a { color:#00bfff; text-decoration:none; }
.docs a:hover { text-decoration:underline; }
.contributing pre { background:#eee; padding:10px; border-radius:5px; overflow-x:auto; }

/* Release */
.release { background:#0d0d0d; color:white; text-align:center; padding:70px 25px; }
.release h2 { margin-bottom:20px; }
.buttons { margin-top:25px; display:flex; flex-direction:column; gap:15px; align-items:center; }
.btn { display:inline-block; background:#00bfff; color:white; padding:14px 28px; text-decoration:none; border-radius:8px; font-weight:600; max-width:400px; text-align:center; transition:0.3s;}
.btn:hover { background:#009acd; }

/* Footer */
footer { text-align:center; padding:25px; background:#111; color:white; font-size:0.9em; }