/* Hitam-putih, kartu emoji besar, bayangan keras — kini dengan gerak yang halus. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; margin: 0;
  -webkit-tap-highlight-color: transparent;
}
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 30px; margin: 6px 0 22px; }
h2 {
  font-size: 26px; margin: 34px 0 14px; padding-bottom: 8px;
  border-bottom: 3px solid #000;
}

/* ---- kartu ---- */
.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 .16s ease-out, box-shadow .16s ease-out;
  animation: muncul .28s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 25ms);
  will-change: transform;
}
.kartu .emoji {
  font-size: 58px; line-height: 1;
  transition: transform .16s ease-out;
}
.kartu .label { font-weight: bold; font-size: 15px; }
.kartu .jumlah { font-size: 11px; border-top: 1px solid #000; padding-top: 4px; margin-top: 2px; }
.hitung-tingkat { font-weight: normal; font-size: 15px; }
.kartu:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 #000; }
.kartu:hover .emoji { transform: scale(1.1); }
.kartu:active { transform: scale(.94); box-shadow: 2px 2px 0 #000; transition-duration: .08s; }
.kartu:active .emoji { transform: scale(.88); transition-duration: .08s; }
.kartu:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

@keyframes muncul {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- bilah navigasi (atas) ---- */
#bilah {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-bottom: 3px solid #000;
  margin: 0 -16px 18px; padding: 10px 16px;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
#bilah::-webkit-scrollbar { display: none; }
.nav-rumah, #kembali {
  border: 2px solid #000; background: #fff; font-size: 16px; font-weight: bold;
  padding: 6px 12px; cursor: pointer; flex: 0 0 auto;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-rumah:hover, #kembali:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #000; }
.nav-rumah:active, #kembali:active { transform: scale(.92); box-shadow: 1px 1px 0 #000; }
.nav-rumah:focus-visible, #kembali:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.nav-judul { font-weight: bold; font-size: 16px; letter-spacing: .3px; }
.remah-jalur { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.remah {
  border: 1px solid #000; background: #fff; font-size: 13px; font-weight: bold;
  padding: 5px 10px; cursor: pointer; flex: 0 0 auto;
  transition: background .15s ease, color .15s ease;
}
button.remah:hover { background: #000; color: #fff; }
.remah.kini { background: #000; color: #fff; cursor: default; }
.remah-sep { font-weight: bold; }

/* ---- bilah tingkat (bawah, ponsel) ---- */
#bawah { display: none; }
.form-emoji { font-size: 64px; margin: 0; line-height: 1; animation: muncul .25s ease-out backwards; }

/* ---- formulir: seksi (bagian) vs blok ---- */
form.isian { border: 2px solid #000; padding: 20px; max-width: 680px; }
form.isian fieldset {
  border: 2px solid #000; padding: 16px 16px 12px;
  animation: muncul .22s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
form.isian fieldset.seksi { margin: 0 0 38px; }
form.isian fieldset.blok { margin: 0 0 18px; border-style: dashed; background: #f6f6f6; }
form.isian fieldset.seksi legend {
  font-size: 19px; font-weight: bold; text-transform: uppercase; letter-spacing: .8px;
  background: #000; color: #fff; padding: 5px 14px;
}
form.isian fieldset.blok legend {
  font-size: 14px; font-weight: bold; background: #fff; border: 1px dashed #000; padding: 3px 10px;
}

.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=email], .baris input[type=file],
.baris select, .baris textarea {
  width: 100%; border: 2px solid #000; padding: 8px; font-size: 15px; background: #fff;
  transition: box-shadow .18s ease, transform .18s ease;
}
.baris input:focus, .baris select:focus, .baris textarea:focus {
  outline: none; box-shadow: 4px 4px 0 #000; transform: translate(-2px, -2px);
}
.baris textarea { min-height: 70px; }
.opsi {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0; font-size: 15px; padding: 8px 8px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.opsi:hover { background: #f0f0f0; border-color: #000; }
.opsi:active { background: #000; color: #fff; }
.opsi input { transform: scale(1.4); accent-color: #000; flex: 0 0 auto; margin: 0; }
.bantuan { font-size: 12px; margin: 3px 0 0; }
.baris .galat { font-size: 12px; font-weight: bold; display: none; margin: 4px 0 0; }
.baris.invalid { animation: goyang .3s ease; }
.baris.invalid .galat { display: block; }
.baris.invalid input, .baris.invalid select, .baris.invalid textarea { border: 3px solid #000; }

@keyframes goyang {
  20% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

/* ---- kirim & hasil ---- */
button.kirim {
  border: 2px solid #000; background: #fff; padding: 12px 26px; font-size: 17px; font-weight: bold;
  cursor: pointer; transition: transform .16s ease-out, box-shadow .16s ease-out,
    background .2s ease, color .2s ease;
}
button.kirim:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #000; }
button.kirim:active { transform: scale(.95); box-shadow: 1px 1px 0 #000; }
button.kirim.sukses { background: #000; color: #fff; }
pre#hasil {
  border: 2px solid #000; padding: 12px; overflow-x: auto; font-size: 12px; max-width: 680px;
  animation: muncul .22s ease-out backwards;
}

/* ---- gerak di ponsel & aksesibilitas ---- */
@media (max-width: 640px) {
  main { padding: 0 12px 84px; }
  #bilah { margin: 0 -12px 14px; padding: 8px 12px; }
  .kartu { width: calc(50% - 7px); min-height: 128px; padding: 14px 8px 12px; }
  .kartu .emoji { font-size: 46px; }
  .kartu .label { font-size: 13px; }
  h1 { font-size: 22px; margin-bottom: 14px; }
  h2 { font-size: 20px; margin-top: 26px; }
  .form-emoji { font-size: 52px; }
  form.isian { padding: 12px; border-width: 2px; }
  form.isian fieldset { padding: 12px 10px 8px; }
  form.isian fieldset.seksi { margin-bottom: 28px; }
  form.isian fieldset.seksi legend { font-size: 16px; padding: 4px 10px; }
  .baris input[type=text], .baris input[type=number], .baris input[type=date],
  .baris input[type=tel], .baris input[type=email], .baris input[type=file],
  .baris select, .baris textarea { font-size: 16px; padding: 10px; } /* 16px = tanpa auto-zoom iOS */
  .opsi { font-size: 16px; padding: 12px 8px; } /* target sentuh ≥44px */
  button.kirim { width: 100%; padding: 14px; font-size: 18px; }
  pre#hasil { font-size: 11px; }

  #bawah {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: #fff; border-top: 3px solid #000;
  }
  .tab-tingkat {
    flex: 1 1 0; border: none; border-left: 1px solid #000; background: #fff;
    padding: 7px 2px 6px; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    transition: background .15s ease, color .15s ease;
  }
  .tab-tingkat:first-child { border-left: none; }
  .tab-emoji { font-size: 20px; line-height: 1.1; }
  .tab-label { font-size: 10px; font-weight: bold; letter-spacing: .2px; }
  .tab-tingkat:active { background: #000; color: #fff; }
  .tab-tingkat.aktif { background: #000; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}