/* EcoQuest - desain "Petak Sawah"
   Satu hal yang diingat: peta sawah terasering. Elemen lain tenang dan rapi. */

@font-face { font-family: "Baloo 2"; src: url("../fonts/baloo2-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-italic-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
    /* Palet dari sawah siang hari */
    --langit: #CFE8F3;
    --langit-muda: #EDF6FA;
    --padi: #5E9E2F;          /* ilustrasi saja: kontras teks putih kurang */
    --padi-tua: #3F7A1E;      /* tombol utama (putih 5.2:1) */
    --padi-gelap: #2F6416;
    --padi-muda: #E4F1D6;
    --air: #2E7FA6;
    --air-tua: #1F6688;       /* tautan & fokus (6.3:1) */
    --air-muda: #D6ECF5;
    --gabah: #E8BE35;
    --gabah-muda: #FBF1CC;
    --lumpur: #7A4E2A;
    --lumpur-tua: #6B4322;
    --lumpur-muda: #F6EBDD;
    --tanah: #B98A5B;
    --teks: #243018;
    --teks-redup: #56614A;
    --garis: #D3DCC8;
    --putih: #FFFFFF;

    --font-judul: "Baloo 2", "Trebuchet MS", sans-serif;
    --font-isi: "Nunito", "Segoe UI", system-ui, sans-serif;

    /* Skala huruf ~1.25 */
    --fs-kecil: 0.875rem;
    --fs-isi: 1.0625rem;
    --fs-1: 1.25rem;
    --fs-2: 1.5625rem;
    --fs-3: 1.95rem;
    --fs-4: clamp(2.1rem, 5vw, 3.05rem);

    --r-kecil: 10px;
    --r: 14px;
    --r-besar: 24px;
    --lebar-baca: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-isi);
    font-size: var(--fs-isi);
    line-height: 1.6;
    color: var(--teks);
    background: var(--langit-muda);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-judul); line-height: 1.15; margin: 0; font-weight: 700; color: var(--teks); }
h1 { font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-1); }
p { margin: 0; }
a { color: var(--air-tua); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--air-tua); outline-offset: 3px; border-radius: 6px; }
/* Judul layar difokus otomatis untuk pembaca layar; tidak perlu bingkai. */
h1[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- Tata letak ---------- */
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.measure { max-width: var(--lebar-baca); }
.konteks { color: var(--teks-redup); font-size: var(--fs-kecil); font-weight: 700; }
.redup { color: var(--teks-redup); }

/* ---------- Tombol ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: 0 1.4rem;
    border: 0; border-radius: var(--r);
    background: var(--padi-tua); color: var(--putih);
    font-weight: 800; font-size: var(--fs-isi); text-decoration: none;
    box-shadow: 0 4px 0 var(--padi-gelap);
    cursor: pointer; transition: transform .08s ease, box-shadow .08s ease, background-color .15s;
}
.btn:hover { background: #46871F; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--padi-gelap); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn--kedua { background: var(--putih); color: var(--teks); box-shadow: 0 3px 0 var(--garis); border: 2px solid var(--garis); }
.btn--kedua:hover { background: var(--langit-muda); }
.btn--kedua:active { box-shadow: 0 1px 0 var(--garis); }
.btn--teks { background: none; box-shadow: none; color: var(--air-tua); padding: 0 .6rem; min-height: 44px; text-decoration: underline; }
.btn--teks:hover { background: none; color: var(--padi-gelap); }
.btn--lebar { width: 100%; }
.aksi { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Bilah atas ---------- */
.bilah {
    background: var(--putih);
    border-bottom: 4px solid var(--tanah);
}
.bilah__isi { display: flex; align-items: center; gap: 1rem; min-height: 64px; padding-block: .5rem; flex-wrap: wrap; }
.merek { font-family: var(--font-judul); font-weight: 800; font-size: 1.6rem; color: var(--padi-tua); text-decoration: none; line-height: 1; display: inline-flex; align-items: center; gap: .45rem; }
.merek svg { width: 30px; height: 30px; }
.bilah__siswa { margin-right: auto; color: var(--teks-redup); font-size: var(--fs-kecil); line-height: 1.35; min-width: 0; }
.bilah .btn { min-height: 42px; padding-inline: 1rem; }
@media (max-width: 560px) {
    .bilah__isi { gap: .5rem .6rem; }
    .merek__teks { display: none; }
    .bilah__siswa { flex: 1 1 0; }
    .bilah__aksi { width: 100%; justify-content: space-between; }
}
.bilah__aksi { display: flex; align-items: center; gap: .6rem; }
.bilah__siswa strong { color: var(--teks); font-size: var(--fs-isi); }
.poin {
    display: inline-flex; align-items: baseline; gap: .3rem;
    padding: .3rem .8rem; border-radius: 999px;
    background: var(--gabah-muda); color: var(--lumpur-tua); font-weight: 800; white-space: nowrap;
}
.poin b { font-family: var(--font-judul); font-size: 1.2rem; color: var(--teks); }

/* ---------- Lembar (isi utama setiap layar) ---------- */
.layar { padding-block: clamp(1.25rem, 4vw, 2.5rem) 4rem; }
.lembar {
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    max-width: 820px; margin-inline: auto;
}
.lembar--lebar { max-width: 1120px; }
.judul-misi { display: grid; gap: .35rem; margin-bottom: 1.5rem; }
.judul-misi h1 { font-size: var(--fs-3); }
.nomor-misi {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--padi-muda); color: var(--padi-gelap); font-family: var(--font-judul); font-weight: 800; font-size: 1.2rem;
}
.kotak-cerita {
    background: var(--langit-muda); border-left: 6px solid var(--air);
    border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.15rem;
}
.kotak-cerita--masalah { background: var(--gabah-muda); border-left-color: var(--gabah); }
.instruksi { font-weight: 700; }

/* ---------- Form ---------- */
.isian { display: grid; gap: .45rem; }
.isian label { font-weight: 800; }
.isian .bantuan { color: var(--teks-redup); font-size: var(--fs-kecil); }
.input, .textarea {
    width: 100%; border: 2px solid var(--garis); border-radius: var(--r);
    background: var(--putih); padding: .8rem 1rem; min-height: 52px;
    transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.input:focus, .textarea:focus { outline: none; border-color: var(--air-tua); box-shadow: 0 0 0 4px var(--air-muda); }
.input--kode { font-family: var(--font-judul); font-weight: 700; font-size: 1.35rem; letter-spacing: .25em; text-transform: uppercase; }
.input--kode::placeholder { letter-spacing: normal; text-transform: none; font-family: var(--font-isi); font-size: var(--fs-isi); font-weight: 400; }
.pesan-error {
    border-radius: var(--r); padding: .8rem 1rem;
    background: var(--lumpur-muda); color: var(--lumpur-tua); border: 2px solid #E3CDB4; font-weight: 700;
}
.pesan-info {
    border-radius: var(--r); padding: .8rem 1rem;
    background: var(--air-muda); color: var(--teks); border: 2px solid #B8DCEB;
}

/* ---------- Pilihan ganda ---------- */
.kemajuan { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.kemajuan__teks { display: flex; justify-content: space-between; font-weight: 800; color: var(--teks-redup); font-size: var(--fs-kecil); }
.kemajuan__bilah { height: 10px; background: var(--langit-muda); border-radius: 999px; overflow: hidden; border: 1px solid var(--garis); }
.kemajuan__isi { height: 100%; background: var(--air); border-radius: 999px; transition: width .4s ease; }
.soal { font-family: var(--font-judul); font-size: var(--fs-2); font-weight: 600; line-height: 1.3; }
.pilihan { display: grid; gap: .7rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.opsi {
    display: flex; gap: .9rem; align-items: flex-start; width: 100%; text-align: left;
    min-height: 56px; padding: .85rem 1rem;
    background: var(--putih); border: 2px solid var(--garis); border-radius: var(--r);
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.opsi:hover:not([disabled]) { border-color: var(--air); background: var(--langit-muda); }
.opsi__huruf {
    flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--langit-muda); font-weight: 800; color: var(--air-tua);
}
.opsi[disabled] { cursor: default; }
.opsi.is-dipilih.is-benar { border-color: var(--padi-tua); background: var(--padi-muda); }
.opsi.is-dipilih.is-benar .opsi__huruf { background: var(--padi-tua); color: var(--putih); }
.opsi.is-dipilih.is-salah { border-color: var(--lumpur); background: var(--lumpur-muda); }
.opsi.is-dipilih.is-salah .opsi__huruf { background: var(--lumpur); color: var(--putih); }
.opsi[disabled]:not(.is-dipilih) { opacity: .6; }

/* ---------- Umpan balik ---------- */
.umpan-balik { border-radius: var(--r); padding: 1rem 1.15rem; border-left: 6px solid; display: grid; gap: .75rem; }
.umpan-balik--benar { background: var(--padi-muda); border-color: var(--padi-tua); }
.umpan-balik--belum { background: var(--lumpur-muda); border-color: var(--lumpur); }
.umpan-balik__judul { font-family: var(--font-judul); font-weight: 700; font-size: var(--fs-1); }
.catatan-uraian { font-size: var(--fs-kecil); color: var(--teks-redup); }

/* ---------- Materi (L3) ---------- */
.materi { border: 2px solid var(--garis); border-radius: var(--r); background: var(--putih); }
.materi + .materi { margin-top: .5rem; }
.materi summary {
    cursor: pointer; list-style: none; padding: .8rem 1rem; font-weight: 800;
    display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 52px;
}
.materi summary::-webkit-details-marker { display: none; }
.materi summary::after { content: "+"; font-family: var(--font-judul); font-size: 1.5rem; color: var(--air-tua); line-height: 1; }
.materi[open] summary::after { content: "\2212"; }
.materi[open] summary { border-bottom: 1px solid var(--garis); }
.materi__isi { padding: .9rem 1rem 1.1rem; }

/* ---------- Tabel data ---------- */
.tabel-wadah { overflow-x: auto; position: relative; border: 1px solid var(--garis); border-radius: var(--r); }
.tabel { width: 100%; border-collapse: collapse; min-width: 420px; }
.tabel caption { text-align: left; font-weight: 800; padding: .75rem 1rem; background: var(--langit-muda); }
.tabel th, .tabel td { padding: .65rem 1rem; text-align: center; border-top: 1px solid var(--garis); }
.tabel th { background: var(--padi-muda); font-weight: 800; }
.tabel td:first-child, .tabel th:first-child { text-align: left; font-weight: 700; }

/* ---------- Level 1: kartu & kotak ---------- */
.l1-gambar { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--garis); }
.l1-grid { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .l1-grid { grid-template-columns: 5fr 7fr; align-items: start; } }
.kumpulan {
    display: flex; flex-wrap: wrap; gap: .55rem; min-height: 64px; padding: .75rem;
    border: 2px dashed var(--garis); border-radius: var(--r); background: var(--langit-muda);
}
.kumpulan:empty::before { content: "Semua kartu sudah dipindahkan."; color: var(--teks-redup); font-size: var(--fs-kecil); align-self: center; }
.kartu {
    display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .95rem;
    background: var(--putih); border: 2px solid var(--garis); border-radius: 999px;
    font-weight: 800; cursor: grab; user-select: none; touch-action: manipulation;
    transition: transform .12s ease, border-color .12s, background-color .12s;
}
.kartu:hover { border-color: var(--air); }
.kartu.is-dipilih { border: 3px solid #C99A12; background: var(--gabah-muda); transform: translateY(-3px); box-shadow: 0 4px 0 #C99A12; }
.kartu.is-benar { border-color: var(--padi-tua); background: var(--padi-muda); }
.kartu.is-salah { border-color: var(--lumpur); background: var(--lumpur-muda); text-decoration: line-through; text-decoration-thickness: 2px; }
.kotak-grid { display: grid; gap: .9rem; margin-top: 1rem; }
@media (min-width: 520px) { .kotak-grid { grid-template-columns: 1fr 1fr; } }
.kotak {
    display: flex; flex-direction: column; gap: .55rem; min-height: 170px; padding: .9rem;
    border-radius: var(--r); border: 2px solid; cursor: pointer; text-align: left; width: 100%;
    transition: box-shadow .15s;
}
.kotak--biotik { background: var(--padi-muda); border-color: #B9D69B; }
.kotak--abiotik { background: var(--air-muda); border-color: #A9D2E4; }
.kotak.is-siap { box-shadow: 0 0 0 4px var(--gabah); }
.kotak.is-diatas { box-shadow: 0 0 0 4px var(--air); }
.kotak__judul { font-family: var(--font-judul); font-weight: 700; font-size: var(--fs-1); }
.kotak__isi { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ---------- Peta sawah terasering ---------- */
.sawah {
    position: relative; overflow: hidden;
    background: var(--langit);
    border-radius: var(--r-besar);
    padding: clamp(3.5rem, 9vw, 5.5rem) clamp(.5rem, 3vw, 2rem) 0;
    isolation: isolate;
}
.sawah__matahari { position: absolute; top: 18px; right: clamp(18px, 6vw, 70px); width: clamp(56px, 10vw, 84px); z-index: -1; }
.sawah__bukit { position: absolute; left: 0; right: 0; top: clamp(34px, 6vw, 60px); width: 100%; height: auto; z-index: -1; }
.terasering { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column-reverse; align-items: center; width: min(820px, 100%); }
.petak {
    --lebar: calc(100% - (var(--n) - 1) * 6.5%);
    width: var(--lebar); position: relative;
    margin-top: -14px;  /* petak atas sedikit menindih yang bawah, seperti terasering */
}
.petak:last-child { margin-top: 0; }
.petak__tanah {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: clamp(84px, 13vw, 104px); padding: 1.1rem .75rem 1.35rem;
    border: 0; border-radius: 50% 50% 18px 18px / 30px 30px 18px 18px;
    border-bottom: 9px solid var(--lumpur);
    background: var(--tanah); color: var(--teks);
    text-decoration: none; font: inherit; cursor: pointer;
    overflow: hidden; isolation: isolate;
    transition: filter .15s;
}
.petak__tanah::before, .petak__tanah::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Lapisan air */
.petak__tanah::before { background: var(--air-muda); opacity: 0; transform-origin: bottom; }
/* Lapisan padi */
.petak__tanah::after {
    background-repeat: repeat-x; background-position: 0 100%; background-size: 34px 100%;
    transform-origin: bottom; opacity: 0;
}
.petak--terkunci .petak__tanah {
    cursor: not-allowed;
    background:
        radial-gradient(circle at 20% 60%, rgba(107,67,34,.18) 0 3px, transparent 4px) 0 0 / 38px 30px,
        var(--tanah);
}
.petak--terbuka .petak__tanah::before { opacity: 1; background: #A9D5EA; }
.petak--terbuka .petak__tanah::after {
    opacity: 1; transform: scaleY(.42);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 60'%3E%3Cpath d='M17 60 C17 44 15 38 9 32 M17 60 C17 46 19 40 25 34 M17 60 V40' stroke='%235E9E2F' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.petak--selesai .petak__tanah::before { opacity: 1; background: #8FC66A; }
.petak--selesai .petak__tanah::after {
    opacity: 1; transform: scaleY(1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 60'%3E%3Cpath d='M17 60 C17 40 13 26 6 14 M17 60 C17 38 21 24 28 12 M17 60 V8' stroke='%233F7A1E' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.petak--menguning .petak__tanah::before { background: #C9D97A; }
.petak--menguning .petak__tanah::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 60'%3E%3Cpath d='M17 60 C17 40 13 26 6 16 M17 60 C17 38 21 24 28 14 M17 60 V12' stroke='%23A07A12' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cg fill='%23E8BE35'%3E%3Cellipse cx='6' cy='12' rx='3' ry='5'/%3E%3Cellipse cx='28' cy='10' rx='3' ry='5'/%3E%3Cellipse cx='17' cy='7' rx='3' ry='5'/%3E%3C/g%3E%3C/svg%3E");
}
.petak:not(.petak--terkunci) .petak__tanah:hover { filter: brightness(1.04); }
/* Papan nama: selalu putih supaya teksnya terbaca di atas warna apa pun */
.papan {
    display: flex; align-items: center; gap: .7rem; text-align: left;
    background: var(--putih); border-radius: var(--r); padding: .5rem .9rem .5rem .55rem;
    box-shadow: 0 3px 0 rgba(107,67,34,.35); max-width: 100%;
}
.papan__nomor {
    flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: var(--padi-muda); color: var(--padi-gelap); font-family: var(--font-judul); font-weight: 800; font-size: 1.2rem;
}
.petak--terkunci .papan__nomor { background: #EFE6DB; color: var(--lumpur-tua); }
.papan__teks { display: grid; line-height: 1.25; min-width: 0; }
.papan__gelar { font-family: var(--font-judul); font-weight: 700; font-size: 1.1rem; }
.papan__tahap { font-size: var(--fs-kecil); color: var(--teks-redup); }
.papan__status { font-size: var(--fs-kecil); font-weight: 800; }
.petak--terkunci .papan__status { color: var(--lumpur-tua); }
.petak--terbuka .papan__status { color: var(--air-tua); }
.petak--selesai .papan__status { color: var(--padi-gelap); }
.sawah__pematang { height: 26px; background: var(--lumpur); margin-inline: calc(-1 * clamp(.5rem, 3vw, 2rem)); margin-top: -10px; position: relative; }
@media (max-width: 520px) {
    .petak { --lebar: calc(100% - (var(--n) - 1) * 3%); }
    .papan__tahap { display: none; }
}

/* Momen utama: padi tumbuh di petak yang baru selesai */
@keyframes air-naik { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes padi-tumbuh { 0% { transform: scaleY(.15); opacity: .3; } 60% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.petak.is-baru .petak__tanah::before { animation: air-naik .7s ease-out both; }
.petak.is-baru .petak__tanah::after { animation: padi-tumbuh 1.4s .45s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- Ringkasan misi & hasil ---------- */
.ringkasan { text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.ringkasan .petak { --n: 1; width: min(420px, 100%); margin: 0; }
.skor-besar { font-family: var(--font-judul); font-weight: 800; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; color: var(--teks); }
.skor-besar small { font-size: .45em; color: var(--teks-redup); font-weight: 700; }
.pita {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1.1rem; border-radius: 999px;
    background: var(--gabah-muda); border: 2px solid var(--gabah); color: var(--lumpur-tua);
    font-weight: 800;
}
.pita svg { width: 22px; height: 22px; }
.gelar-akhir { font-family: var(--font-judul); font-weight: 800; font-size: var(--fs-4); color: var(--padi-tua); line-height: 1.05; }
.daftar-skor { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; text-align: left; width: 100%; }
.daftar-skor li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--garis); border-radius: var(--r); }
.daftar-skor__nilai { font-family: var(--font-judul); font-weight: 800; font-size: 1.2rem; white-space: nowrap; }

/* ---------- Dialog ---------- */
.dialog {
    border: 0; border-radius: var(--r-besar); padding: 0; width: min(560px, 100% - 24px);
    box-shadow: 0 20px 60px rgba(36,48,24,.3); color: var(--teks);
}
.dialog::backdrop { background: rgba(36,48,24,.45); }
.dialog__isi { padding: 1.5rem; display: grid; gap: 1rem; }

/* ---------- Pengumuman (aria-live) ---------- */
.toast {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
    width: min(520px, 100% - 24px); padding: .9rem 1.1rem; border-radius: var(--r);
    background: var(--teks); color: var(--putih); font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ---------- Halaman depan ---------- */
.depan { min-height: 100vh; display: flex; flex-direction: column; background: var(--langit); position: relative; overflow: hidden; }
.depan__atas { display: flex; justify-content: space-between; align-items: center; padding-block: 1.1rem; gap: 1rem; }
.depan__hero { flex: 1; display: grid; gap: 2rem; align-items: center; padding-block: 1rem 3rem; position: relative; z-index: 1; }
@media (min-width: 900px) { .depan__hero { padding-bottom: clamp(7rem, 24vh, 15rem); align-items: start; padding-top: clamp(1rem, 6vh, 4rem); } }
@media (min-width: 900px) { .depan__hero { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.depan__judul { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 800; line-height: .98; letter-spacing: -0.02em; color: var(--teks); }
.depan__lead { font-size: var(--fs-1); max-width: 34ch; margin-top: 1.1rem; color: var(--teks); }
.depan__langkah { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .4rem .5rem; padding: 0; list-style: none; counter-reset: langkah; max-width: 560px; }
.depan__langkah li {
    counter-increment: langkah; display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.7); border-radius: 999px; padding: .25rem .8rem .25rem .3rem; font-weight: 700; font-size: var(--fs-kecil);
}
.depan__langkah li::before {
    content: counter(langkah); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--padi-tua); color: var(--putih); font-weight: 800;
}
.form-masuk { background: var(--putih); border-radius: var(--r-besar); padding: clamp(1.25rem, 4vw, 2rem); box-shadow: 0 6px 0 rgba(107,67,34,.25); }
.form-masuk h2 { font-size: var(--fs-2); }
.depan__sawah { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 0; pointer-events: none; }
.depan__sawah svg { width: 100%; height: 100%; }
.depan__kaki { position: relative; z-index: 1; background: var(--lumpur); color: #F3E6D6; padding-block: .9rem; font-size: var(--fs-kecil); }
.depan__kaki a { color: var(--putih); font-weight: 800; }

/* ---------- Area guru: palet sama, lebih tenang dan padat data ---------- */
.guru { background: #F7FAF4; min-height: 100vh; }
.guru .bilah { border-bottom-width: 3px; }
.guru-nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-right: auto; }
.guru-nav a {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 .9rem; border-radius: var(--r-kecil);
    color: var(--teks); font-weight: 800; text-decoration: none;
}
.guru-nav a:hover { background: var(--langit-muda); }
.guru-nav a[aria-current="page"] { background: var(--padi-muda); color: var(--padi-gelap); }
.guru-user { font-size: var(--fs-kecil); color: var(--teks-redup); text-align: right; line-height: 1.3; }
.guru-isi { padding-block: 1.75rem 4rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.guru-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.guru-kepala h1 { font-size: var(--fs-3); }
.panel { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r); padding: clamp(1rem, 2.5vw, 1.5rem); }
.panel h2 { font-size: var(--fs-1); }
.statistik { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; }
.statistik div { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r); padding: .8rem 1rem; }
.statistik dt { font-size: var(--fs-kecil); color: var(--teks-redup); font-weight: 700; }
.statistik dd { margin: 0; font-family: var(--font-judul); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.statistik .perlu dd { color: var(--lumpur-tua); }
.saring { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.saring .isian { gap: .2rem; }
.saring .isian label { font-size: var(--fs-kecil); }
.saring .input { min-height: 44px; padding: .45rem .8rem; }
.notif { border-radius: var(--r); padding: .8rem 1rem; background: var(--padi-muda); border: 1px solid #B9D69B; font-weight: 700; }
.rekap { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 920px; }
.rekap th, .rekap td { padding: .6rem .7rem; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: middle; }
.rekap thead th { background: #EEF4E8; font-size: var(--fs-kecil); color: var(--teks-redup); position: sticky; top: 0; }
.rekap tbody tr:hover { background: #FAFCF7; }
.rekap .angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rekap .nilai-total { font-family: var(--font-judul); font-weight: 800; font-size: 1.15rem; }
.rekap .kosong { color: var(--teks-redup); }
.lencana { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: var(--fs-kecil); font-weight: 800; white-space: nowrap; border: 1px solid; }
.lencana--selesai { background: var(--padi-muda); color: var(--padi-gelap); border-color: #B9D69B; }
.lencana--proses { background: var(--air-muda); color: var(--air-tua); border-color: #A9D2E4; }
.lencana--menunggu { background: var(--gabah-muda); color: var(--lumpur-tua); border-color: #EBD48A; }
.lencana--lama { background: #F0F0EC; color: var(--teks-redup); border-color: var(--garis); }
.kode-kelas { font-family: var(--font-judul); font-weight: 800; font-size: 1.3rem; letter-spacing: .18em; background: var(--langit-muda); border-radius: var(--r-kecil); padding: .1rem .6rem; }
.btn--kecil { min-height: 38px; padding: 0 .9rem; font-size: var(--fs-kecil); box-shadow: 0 2px 0 var(--padi-gelap); }
.btn--kecil.btn--kedua { box-shadow: 0 2px 0 var(--garis); }
.btn--bahaya { background: #9B3B22; box-shadow: 0 4px 0 #6E2715; }
.btn--bahaya:hover { background: #87321C; }
.dua-kolom { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .dua-kolom { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.uraian-guru { border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; }
.uraian-guru + .uraian-guru { margin-top: 1rem; }
.uraian-guru__kepala { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .8rem 1rem; background: #EEF4E8; }
.uraian-guru__isi { padding: 1rem; display: grid; gap: .9rem; }
.jawaban-siswa { background: var(--langit-muda); border-left: 5px solid var(--air); border-radius: 0 var(--r-kecil) var(--r-kecil) 0; padding: .75rem 1rem; white-space: pre-line; }
.rubrik { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; }
.rubrik legend { font-weight: 800; margin-bottom: .35rem; }
.rubrik label {
    display: grid; grid-template-columns: auto 4.5rem 1fr; gap: .6rem; align-items: start;
    padding: .55rem .75rem; border: 2px solid var(--garis); border-radius: var(--r-kecil); cursor: pointer; background: var(--putih);
}
.rubrik label:hover { border-color: var(--air); }
.rubrik input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--padi-tua); }
.rubrik label:has(input:checked) { border-color: var(--padi-tua); background: var(--padi-muda); }
.rubrik__poin { font-family: var(--font-judul); font-weight: 800; }
.rubrik__otomatis { font-size: var(--fs-kecil); color: var(--lumpur-tua); font-weight: 800; }
.daftar-pg { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.daftar-pg li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; padding: .45rem .6rem; border-radius: var(--r-kecil); background: #FAFCF7; font-size: .95rem; }
.daftar-pg .salah { background: var(--lumpur-muda); }
.tanda { font-weight: 800; }
.tanda--benar { color: var(--padi-gelap); }
.tanda--salah { color: #9B3B22; }

/* ---------- Gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* Kotak geser tabel. position: relative supaya teks pembaca layar (absolute) tidak melebarkan halaman. */
.gulir { overflow-x: auto; position: relative; }