/* Hitam-putih, kartu emoji besar, bayangan keras, klik terasa. */
* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 30px; margin: 6px 0 22px; }
h2 { font-size: 26px; margin: 26px 0 12px; }
h2 .emoji-kecil { font-size: 26px; margin-right: 6px; }

.grid { display: flex; flex-wrap: wrap; gap: 14px; }

.kartu {
  border: 2px solid #000; background: #fff; color: #000;
  width: 168px; min-height: 150px; padding: 18px 10px 14px;
  text-align: center; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kartu .emoji { font-size: 58px; line-height: 1; }
.kartu .label { font-weight: bold; font-size: 15px; }
.kartu:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 #000; }
.kartu:active { transform: translate(0, 0) scale(.96); box-shadow: 2px 2px 0 #000; }

#kembali {
  border: 2px solid #000; background: #fff; padding: 8px 16px; font-size: 15px;
  font-weight: bold; cursor: pointer; margin-bottom: 18px;
  transition: transform .12s ease, box-shadow .12s ease;
}
#kembali:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
#kembali:active { transform: none; box-shadow: 1px 1px 0 #000; }

.jejak { font-size: 15px; margin-bottom: 4px; }

form.isian { border: 2px solid #000; padding: 18px; max-width: 640px; }
form.isian fieldset { border: 2px solid #000; margin: 0 0 16px; padding: 12px 14px; }
form.isian legend { font-weight: bold; padding: 0 8px; font-size: 16px; }
.baris { margin-bottom: 12px; }
.baris label.utama { display: block; font-weight: bold; margin-bottom: 4px; font-size: 14px; }
.baris input[type=text], .baris input[type=number], .baris input[type=date],
.baris input[type=tel], .baris input[type=file], .baris select, .baris textarea {
  width: 100%; border: 2px solid #000; padding: 8px; font-size: 15px; background: #fff;
}
.baris textarea { min-height: 70px; }
.opsi { margin: 3px 0; font-size: 15px; }
.opsi input { transform: scale(1.3); margin-right: 6px; }
.baris .galat { font-size: 12px; font-weight: bold; display: none; margin: 4px 0 0; }
.baris.invalid .galat { display: block; }
.baris.invalid input, .baris.invalid select, .baris.invalid textarea { border: 3px solid #000; }
button.kirim {
  border: 2px solid #000; background: #fff; padding: 12px 26px; font-size: 17px; font-weight: bold;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
button.kirim:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #000; }
button.kirim:active { transform: scale(.96); box-shadow: 1px 1px 0 #000; }
pre#hasil { border: 2px solid #000; padding: 12px; overflow-x: auto; font-size: 12px; max-width: 640px; }
.form-emoji { font-size: 64px; margin: 0; line-height: 1; }