body { font-family: sans-serif; text-align: center; margin: 0; padding: 40px 20px; background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url("latar.jpg") center / cover fixed; color: #222; }
h1 { color: #2b4eff; }

nav { margin-bottom: 30px; }

a { display: inline-block; margin: 5px; color: white; background: #2b4eff; padding: 10px 20px; border-radius: 8px; text-decoration: none; }
a:hover { background: #1a36c7; }

img { width: 100%; max-width: 500px; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

ul { list-style: none; padding: 0; }
li { margin: 6px 0; }

button { display: inline-block; margin: 5px; padding: 10px 20px; border: none; border-radius: 8px; background: #333; color: white; font-size: 16px; cursor: pointer; }

body.gelap { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("latar.jpg") center / cover fixed; color: #f0f0f0; }
body.gelap h1 { color: #8fa8ff; }
body.gelap button { background: #f0f0f0; color: #1e1e2f; }
.wa { position: fixed; right: 20px; bottom: 20px; background: #25d366; color: white; padding: 14px 20px; border-radius: 50px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 100; }
.wa:hover { background: #1ebe5b; }