/* MenkyoPads — gaya dasar Versi 1. HP dulu (390px), laptop menyusul lewat min-width. */
:root {
  --latar: #f6f5f1;
  --kartu: #ffffff;
  --teks: #1f2328;
  --redup: #5b616b;
  --garis: #dcd9d0;
  --utama: #1d5c8f;
  --utama-teks: #ffffff;
  --bahaya: #a3261b;
  --bahaya-latar: #fbeceb;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
}

h1 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0; }
a { color: var(--utama); }
.redup { color: var(--redup); margin: 0 0 .25rem; }
.kecil { font-size: .875rem; }

/* ── Bilah atas ── */
/* Di HP sempit, pilihan bahasa + keluar turun ke baris kedua, bukan kepotong. */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  padding: .625rem 1rem; background: var(--kartu); border-bottom: 1px solid var(--garis);
}
.nav-merek { font-weight: 700; text-decoration: none; color: var(--teks); }
.nav-kanan { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav button { white-space: nowrap; }
.nav form { margin: 0; }

.bahasa { display: inline-flex; border: 1px solid var(--garis); border-radius: 999px; overflow: hidden; }
.bahasa button {
  border: 0; background: transparent; color: var(--redup); font: inherit; font-size: .8125rem;
  padding: .375rem .75rem; min-height: 36px; cursor: pointer;
}
.bahasa button[aria-pressed="true"] { background: var(--utama); color: var(--utama-teks); }

.tombol-teks {
  border: 0; background: none; color: var(--utama); font: inherit; font-size: .875rem;
  padding: .375rem .25rem; min-height: 36px; cursor: pointer;
}

/* ── Isi ── */
.isi { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kartu {
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 1.25rem; margin-top: 1rem;
}
.kartu-sempit { width: calc(100% - 2rem); max-width: 420px; margin: 2rem auto; }
.judul-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* ── Form ── */
label { display: block; font-weight: 600; margin: 1rem 0 .25rem; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; font: inherit; padding: .625rem .75rem; min-height: 44px;
  border: 1px solid var(--garis); border-radius: 8px; background: #fff;
}
/* Kolom sandi + tombol "Lihat" di dalamnya */
.sandi { position: relative; }
.sandi input { padding-right: 4.5rem; }
.sandi-lihat {
  position: absolute; top: 50%; right: .375rem; transform: translateY(-50%);
  border: 0; background: none; color: var(--utama); font: inherit; font-size: .875rem; font-weight: 600;
  min-height: 36px; padding: 0 .625rem; cursor: pointer;
}
.tombol {
  display: block; width: 100%; margin-top: 1.25rem; min-height: 48px;
  border: 0; border-radius: 8px; background: var(--utama); color: var(--utama-teks);
  font: inherit; font-weight: 600; cursor: pointer;
}
:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.peringatan {
  background: var(--bahaya-latar); color: var(--bahaya); border-radius: 8px;
  padding: .625rem .75rem; margin: 1rem 0 0;
}

/* ── Tabel (gulir ke samping di HP, bukan nyempit) ── */
.tabel-gulir { overflow-x: auto; margin-top: .75rem; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .9375rem; }
th, td { text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--garis); white-space: nowrap; }
th { color: var(--redup); font-weight: 600; font-size: .8125rem; }

/* ── Tautan & tombol tambahan ── */
a.tombol { text-align: center; text-decoration: none; line-height: 48px; }
.tautan-baris { display: flex; flex-wrap: wrap; gap: .75rem; }
.tombol-sedang { display: inline-block; width: auto; padding: 0 1.25rem; margin-top: 0; }
.tombol-garis { background: transparent; color: var(--utama); border: 1px solid var(--utama); }
.tombol-kecil {
  border: 1px solid var(--utama); background: var(--utama); color: var(--utama-teks); border-radius: 8px;
  font: inherit; font-size: .875rem; min-height: 40px; padding: 0 1rem; cursor: pointer;
}
.tombol-bahaya { background: transparent; color: var(--bahaya); border-color: var(--bahaya); }
.aksi { display: flex; gap: .5rem; margin-top: .75rem; }
.aksi form { margin: 0; }
.info { background: #e8f1f8; color: var(--utama); border-radius: 8px; padding: .625rem .75rem; }
.tengah { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Belajar ── */
.isi-sempit { max-width: 640px; }
.tab { display: flex; gap: .25rem; margin: 1rem 0 0; border-bottom: 1px solid var(--garis); }
.tab a {
  padding: .625rem 1rem; min-height: 44px; text-decoration: none; color: var(--redup);
  border-bottom: 3px solid transparent; font-weight: 600;
}
.tab a[aria-current="page"] { color: var(--utama); border-bottom-color: var(--utama); }
.lencana {
  display: inline-block; font-size: .8125rem; font-weight: 600; padding: .125rem .625rem; border-radius: 999px;
  background: #eef0ec; color: var(--redup); white-space: nowrap;
}
.lencana-dicek { background: #fff4d6; color: #7a5300; }
.lencana-disetujui { background: #e3f2e6; color: #1e6b33; }
.lencana-ditarik { background: var(--bahaya-latar); color: var(--bahaya); }
.bilah { height: 8px; background: #e7e5de; border-radius: 999px; overflow: hidden; margin: .75rem 0 .375rem; }
.bilah span { display: block; height: 100%; background: var(--utama); border-radius: 999px; }

/* ── Soal ── */
.soal-teks { font-size: 1.25rem; line-height: 2.1; margin: 0 0 1rem; }
ruby rt { font-size: .55em; color: var(--redup); }
.pilihan { border: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: .625rem; }
.opsi {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; min-height: 56px;
  border: 1px solid var(--garis); border-radius: 10px; background: #fff; font-size: 1.0625rem; line-height: 1.9;
}
label.opsi { cursor: pointer; margin: 0; font-weight: 400; } /* bukan gaya label form login */
.opsi input { width: 20px; height: 20px; margin: 0; accent-color: var(--utama); flex: none; }
label.opsi:has(input:checked) { border-color: var(--utama); box-shadow: inset 0 0 0 1px var(--utama); background: #f1f6fb; }
.opsi-no {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eef0ec; color: var(--redup);
  display: grid; place-items: center; font-size: .875rem; font-weight: 700; line-height: 1;
}
.opsi-kunci { border-color: #2e8b47; background: #eef8f0; }
.opsi-kunci .opsi-no { background: #2e8b47; color: #fff; }
.opsi-salah { border-color: var(--bahaya); background: var(--bahaya-latar); }
.opsi-salah .opsi-no { background: var(--bahaya); color: #fff; }
.opsi-tanda { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--redup); white-space: nowrap; }
.hasil-jawab { font-size: 1.25rem; font-weight: 700; margin: 0 0 .75rem; }
.hasil-benar { color: #1e6b33; }
.hasil-salah { color: var(--bahaya); }
.kecil-judul { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.penjelasan { margin: 0; line-height: 1.8; }

/* ── Hasil ── */
.skor { text-align: center; }
.skor-angka { font-size: 3rem; font-weight: 800; margin: 0; line-height: 1.1; color: var(--utama); }
.skor-angka span { font-size: 1.5rem; color: var(--redup); font-weight: 600; }
.rincian { list-style: none; padding: 0; margin: .75rem 0 0; }
.rincian a { display: flex; gap: .75rem; align-items: center; padding: .625rem 0; min-height: 44px; border-bottom: 1px solid var(--garis); color: var(--teks); text-decoration: none; }
.tanda { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; }
.tanda-benar { background: #2e8b47; }
.tanda-salah { background: var(--bahaya); }

/* ── Review soal (admin) ── */
.pilihan-review { margin: 0 0 .75rem; padding-left: 1.5rem; line-height: 2; }
.pilihan-review .opsi-kunci { background: none; font-weight: 700; color: #1e6b33; }

/* ── Furigana on/off ── */
.tanpa-furigana rt { display: none; }
.furigana-tombol {
  display: inline-flex; align-items: center; gap: .25rem; min-height: 36px; padding: 0 .625rem;
  border: 1px solid var(--garis); border-radius: 999px; background: #fff; color: var(--teks);
  font: inherit; font-size: .8125rem; cursor: pointer; white-space: nowrap;
}
.furigana-tombol[aria-pressed="false"] { color: var(--redup); background: #eef0ec; }
.furigana-tombol rt { font-size: .6em; }
.furigana-status { font-weight: 700; font-size: .75rem; }

/* ── Daftar bab & materi ── */
.judul-buku { font-size: 1rem; color: var(--redup); margin: 1.75rem 0 0; }
.bab h3 { font-size: 1.125rem; margin: 0; line-height: 2; }
.terjemah { color: var(--redup); margin: .125rem 0 0; line-height: 1.6; }
.tautan-baris form { margin: 0; }
.tautan-baris .tombol-sedang { margin-top: .75rem; }
.materi h1 { line-height: 2; margin: .75rem 0 0; }
.terjemah-judul { font-size: 1.0625rem; margin-bottom: 1.25rem; }
.blok { margin: 0 0 1.25rem; }
.kalimat-ja { font-size: 1.125rem; line-height: 2.1; margin: 0; }
.blok-penting, .blok-istilah { background: #fff; border: 1px solid var(--garis); border-left: 4px solid var(--utama); border-radius: 8px; padding: .75rem 1rem; }
.blok-penting { border-left-color: #c98a00; background: #fffbef; }
.blok-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); margin: 0 0 .25rem; }
.gambar-materi { margin: 0 0 1.25rem; }
.gambar-materi img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--garis); background: #fff; }
.gambar-materi figcaption { margin-top: .375rem; font-size: .9375rem; line-height: 1.9; }
.gambar-materi figcaption .terjemah { display: block; font-size: .875rem; }
.bab-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.bab-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.tombol-garis-kecil { display: inline-flex; align-items: center; text-decoration: none; background: transparent; color: var(--utama); }

@media (min-width: 768px) {
  .isi { padding-top: 2rem; }
  h1 { font-size: 1.75rem; }
}