/* Metode Al-Mudah screens: one stylesheet. Phone first; on a wide screen the page stays phone-width. */
:root {
  --latar: #f7f6f2;
  --kartu: #fff;
  --teks: #1c1b19;
  --redup: #77736b;
  --garis: #e6e3dc;
  --aksen: #0f766e;
  --benar: #15803d;
  --benar-latar: #dcfce7;
  --abu: #d9d6cf;
  --arab: "Amiri Quran", "Amiri", "Noto Naskh Arabic", "Scheherazade New", "Geeza Pro", serif;
  --latin: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 1.25rem;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--latar); color: var(--teks); font: 16px/1.5 var(--latin); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

.layar {
  max-width: 30rem;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 1rem calc(1.25rem + env(safe-area-inset-bottom));
}
.atas { display: flex; align-items: center; gap: 0.25rem; min-height: 3.5rem; }
.atas .judul { flex: 1; margin: 0; text-align: center; font: 1.7rem/1.2 var(--arab); }
.isi { flex: 1; display: flex; flex-direction: column; }
.bawah { display: flex; justify-content: center; gap: 0.75rem; padding-top: 1rem; }

.tombol {
  display: inline-grid;
  place-items: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--teks);
}
.tombol svg { width: 1.6rem; height: 1.6rem; }
.tombol.bulat { width: 4rem; height: 4rem; background: var(--teks); color: #fff; font-size: 1.6rem; }
.tombol.bulat svg { width: 1.8rem; height: 1.8rem; }
.tombol.pil { min-height: 2.75rem; padding: 0 1.1rem; background: var(--kartu); border: 1px solid var(--garis); font: 1.35rem/1 var(--arab); }
.tombol.pil.aktif { background: var(--teks); color: #fff; border-color: var(--teks); }
.tombol:disabled { opacity: 0.35; cursor: default; }
.tombol:focus-visible, .token:focus-visible, .ubin:focus-visible, .pilihan button:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

.arab { font-family: var(--arab); direction: rtl; }
.ayat { margin: 0; font: 1.85rem/2.35 var(--arab); direction: rtl; text-align: justify; text-align-last: right; }
.nomor-ayat { margin: 0 0.15em; color: var(--redup); font-size: 0.85em; white-space: nowrap; }
.sumber { margin: 1rem 0 0; color: var(--redup); font-size: 0.75rem; text-align: center; }

/* Words: the doc's colours (sumber baris 1950-1954, 2460-2481); none for the kinds the doc does not colour. */
.kata { border-radius: 0.35rem; }
.token { cursor: pointer; }
.token[data-warna="red"] { color: red; }
.token[data-warna="orange"] { color: orange; }
.token[data-warna="blue"] { color: blue; }
.token[data-warna="purple"] { color: purple; }
.token[data-tebal="1"] { font-weight: 700; }
.lihat-polos .token[data-warna],
.lihat-al .token[data-warna]:not([data-alasan="ada al"]),
.lihat-fiil .token[data-warna]:not([data-jenis="fi'il"]) { color: inherit; font-weight: inherit; }

/* Bottom sheet */
.lembar {
  width: 100%;
  max-width: 30rem;
  margin: auto auto 0;
  padding: 1.5rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: var(--kartu);
  color: var(--teks);
}
.lembar::backdrop { background: rgb(0 0 0 / 0.35); }
.lembar-kata { margin: 0 0 0.5rem; font: 2.6rem/1.5 var(--arab); text-align: center; direction: rtl; }
.lembar-ket { margin: 0; color: var(--redup); text-align: center; }
.lembar img { display: block; width: 100%; height: auto; }

.putar { width: 2rem; height: 2rem; margin: 4rem auto; border: 3px solid var(--garis); border-top-color: var(--teks); border-radius: 50%; animation: putar 0.8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .putar { animation-duration: 3s; } }

/* Home */
.beranda { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 1rem 0; }
.ubin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: 1rem;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--kartu);
  color: var(--teks);
  text-decoration: none;
  font-weight: 600;
}
.ubin svg { width: 2.25rem; height: 2.25rem; color: var(--aksen); }
.ubin .no { position: absolute; top: 0.75rem; right: 0.9rem; color: var(--redup); font-weight: 500; font-size: 0.85rem; }
.ubin.uji { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }

/* Quizzes */
.titik { display: flex; flex: 1; justify-content: center; gap: 0.4rem; }
.titik i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--abu); }
.titik i.kini { background: transparent; box-shadow: inset 0 0 0 2px var(--teks); }
.titik i.salah { background: var(--teks); }
.titik i.benar { background: var(--benar); }
.sasaran { width: fit-content; margin: 1.5rem auto; padding: 0.4rem 1.6rem; border-radius: 999px; background: var(--teks); color: #fff; font: 2.2rem/1.4 var(--arab); }
.pilih .kata { cursor: pointer; padding: 0 0.1em; }
.pilih .kata.dipilih { outline: 2px solid var(--teks); outline-offset: 0.1em; }
.kata.tepat { background: var(--benar-latar); box-shadow: inset 0 -3px var(--benar); }
.kata.keliru { background: var(--abu); text-decoration: line-through; }
.kata.terlewat { box-shadow: inset 0 -3px var(--benar); }
.skor { margin: auto; font: 600 3.5rem/1 var(--latin); text-align: center; }
.konteks { margin: 1rem 0 0; color: var(--redup); font: 1.25rem/2 var(--arab); direction: rtl; text-align: center; }
.konteks .sorot { color: var(--teks); box-shadow: inset 0 -2px var(--teks); }
.kata-besar { margin: auto 0; font: 4.5rem/1.4 var(--arab); text-align: center; direction: rtl; }
.alasan { min-height: 1.5rem; margin: 0 0 1rem; color: var(--redup); text-align: center; }
.pilihan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pilihan button { padding: 1.1rem 0; border: 1px solid var(--garis); border-radius: var(--r); background: var(--kartu); font: 2rem/1 var(--arab); cursor: pointer; }
.pilihan button:disabled { cursor: default; }
.pilihan button:disabled:not(.benar, .salah) { opacity: 0.5; }
.pilihan button.benar { background: var(--benar); border-color: var(--benar); color: #fff; }
.pilihan button.salah { background: var(--abu); }

/* Lens */
.lensa-isi { padding-bottom: 6rem; }
.lensa-tombol { position: fixed; left: max(1rem, calc(50% - 14rem)); bottom: calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); font: 1.3rem/1 var(--arab); }
.surah-judul { margin: 1.5rem 0 0.25rem; font: 1.5rem/1 var(--arab); text-align: center; color: var(--redup); }

/* Lessons */
.peta { display: block; width: 100%; margin: 0.5rem 0; padding: 0; border: 1px solid var(--garis); border-radius: var(--r); background: var(--kartu); overflow: hidden; cursor: zoom-in; }
.peta img { display: block; width: 100%; height: 9rem; object-fit: cover; object-position: top right; }
.jalur { margin: 0.5rem 0; padding: 0; list-style: none; }
.jalur button { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.55rem 0; border: 0; background: none; text-align: left; cursor: pointer; }
.jalur .bulatan { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2px solid var(--teks); border-radius: 50%; font-size: 0.9rem; }
.jalur .selesai .bulatan { background: var(--teks); color: #fff; }
.bilah { flex: 1; height: 0.35rem; overflow: hidden; border-radius: 1rem; background: var(--garis); }
.bilah i { display: block; height: 100%; background: var(--teks); }
.kartu-pelajaran { flex: 1; margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--garis); border-radius: var(--r); background: var(--kartu); }
.kartu-pelajaran h2 { margin: 0 0 0.75rem; color: var(--redup); font-size: 0.85rem; font-weight: 500; }
.kartu-pelajaran .ket { margin: 0.4rem 0 0; color: var(--redup); font-size: 0.95rem; }

/* Verse of the day */
.widget { margin: auto 0; padding: 1.4rem 1.25rem; border-radius: 1.6rem; background: var(--kartu); box-shadow: 0 12px 32px rgb(0 0 0 / 0.07); }
.widget .sumber { display: block; text-decoration: none; }
.widget .tanggal { margin: 0 0 0.5rem; color: var(--redup); font-size: 0.85rem; }
.widget .terjemah { margin: 0.75rem 0 0; font-size: 0.95rem; }
.fokus .kata:not(.terpilih) { opacity: 0.22; }
.hitung { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }

/* Test */
textarea.coba { width: 100%; min-height: 6.5rem; padding: 0.75rem; border: 1px solid var(--garis); border-radius: var(--r); background: var(--kartu); font: 1.7rem/1.7 var(--arab); direction: rtl; resize: vertical; }
.hasil-coba { margin: 1rem 0 0; font: 1.85rem/2.2 var(--arab); direction: rtl; }
.daftar-token { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font-size: 0.9rem; }
.daftar-token td { padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--garis); vertical-align: top; }
.daftar-token td:first-child { font: 1.3rem/1.4 var(--arab); direction: rtl; white-space: nowrap; }
.angka-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.5rem 0 0.5rem; }
.angka { padding: 0.9rem 0.25rem; border: 1px solid var(--garis); border-radius: var(--r); background: var(--kartu); text-align: center; cursor: pointer; }
.angka b { display: block; font-size: 1.5rem; }
.angka small { color: var(--redup); }
.rincian-uji { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.rincian-uji li { padding: 0.45rem 0; border-bottom: 1px solid var(--garis); }
.rincian-uji .arab { font-size: 1.15rem; }