* { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; }
body {
    background: linear-gradient(135deg, #fef9e7, #fdebd0);
    min-height: 100vh; padding: 20px;
}
.container {
    max-width: 600px; margin: 0 auto; text-align: center;
    background: #fff; padding: 30px; border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.hero h1 { color: #d35400; font-size: 2em; margin-bottom: 10px; }
.subjudul { color: #7f8c8d; margin-bottom: 30px; line-height: 1.6; }
.btn {
    display: inline-block; padding: 12px 25px; margin: 8px;
    border-radius: 12px; text-decoration: none; font-weight: bold;
    border: none; cursor: pointer; transition: 0.2s; font-size: 1em;
}
.btn.utama { background: #f39c12; color: #fff; font-size: 1.1em; width: 85%; }
.btn:hover { transform: scale(1.05); }
.btn.kecil { background: #ecf0f1; color: #2c3e50; padding: 8px 15px; font-size: 0.9em; }
.btn.suara { background: #3498db; color: #fff; }
.btn.pilihan-btn { display: block; width: 90%; margin: 8px auto; background: #fff8cc; }
.kartu-besar {
    padding: 30px; margin: 20px 0;
    background: #fff8e1; border-radius: 15px; border: 3px solid #f5deb3;
}
.huruf-besar { font-size: 4em; color: #8b4513; }
.nav-huruf { margin: 15px 0; }
.pilihan { margin: 20px 0; }
h2, h3 { color: #5d4037; margin-bottom: 15px; }
hr { border: none; border-top: 2px dotted #ddd; margin: 25px 0; }
footer { margin-top: 30px; font-size: 0.85em; color: #95a5a6; }
input, select {
    width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd;
    border-radius: 8px; font-size: 1em;
}
table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.9em; }
th, td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; }
th { background: #f8f8f8; }