/* Gaya bersama sales.miraj.app: versi terang, mengikuti situs MITS (krem, hijau malam, emas). Mobile-first. */
:root { --krem: #fbf6e9; --kartu: #fffdf6; --garis: #eadfc0; --tinta: #06171a; --hijau: #0a2e26; --emas: #d8b45a; --emas-tua: #8a6a1f; --sunyi: #55645f; --merah: #a3281e; --ok: #1d6b4a; --judul: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif; --isi: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--krem); color: var(--tinta); font: 16px/1.55 var(--isi); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 56px }
.lebar { max-width: 1080px }
h1, h2, h3 { font-family: var(--judul); font-weight: 800; letter-spacing: .01em; line-height: 1.05; margin: 0 0 8px; color: var(--hijau); text-transform: uppercase }
h1 { font-size: clamp(34px, 9vw, 54px) } h2 { font-size: 28px; margin-top: 36px } h3 { font-size: 20px; margin-top: 0 }
p { margin: 0 0 12px } a { color: var(--hijau) }
em { font-style: italic; font-family: Georgia, serif; color: var(--emas-tua) }
.sunyi { color: var(--sunyi) } .mini { font-size: 14px } .kecil { font-size: 13px }
.atas { background: var(--hijau); color: var(--krem); padding: 12px 16px }
.atas .wrap { padding-bottom: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.atas strong { font-family: var(--judul); font-size: 22px; letter-spacing: .04em; text-transform: uppercase } .atas strong i { color: var(--emas); font-style: normal }
.atas a { color: var(--krem) } .atas .dorong { margin-left: auto }
.hero { padding: 34px 0 8px } .hero p { font-size: 18px; max-width: 34em }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 16px; margin: 12px 0 }
.kartu h3 { margin-bottom: 6px }
.grid { display: grid; gap: 12px } .grid.empat { grid-template-columns: 1fr 1fr } @media (min-width: 640px) { .grid.dua { grid-template-columns: 1fr 1fr } .grid.tiga { grid-template-columns: repeat(3, 1fr) } .grid.empat { grid-template-columns: repeat(4, 1fr) } }
.stat { background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px } .stat b { display: block; font-family: var(--judul); font-size: 26px; color: var(--hijau); line-height: 1.1 } .stat span { font-size: 13px; color: var(--sunyi) }
.upah { font-family: var(--judul); font-size: 38px; color: var(--hijau); line-height: 1 } .upah small { font: 600 14px var(--isi); color: var(--sunyi); display: block; margin-top: 4px }
label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 4px }
input, select, textarea { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid #cbbf98; border-radius: 10px; background: #fff; color: var(--tinta) }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--emas); outline-offset: 1px }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: none; accent-color: var(--hijau); padding: 0 }
.cek { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 14px 0 }
.tombol { display: inline-block; font: 700 15px var(--isi); background: var(--hijau); color: var(--krem); border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; text-decoration: none; min-height: 44px }
.tombol:hover { background: #0e3d33 } .tombol.emas { background: var(--emas); color: var(--tinta) } .tombol.emas:hover { background: #e3c375 }
.tombol.hantu { background: transparent; color: var(--hijau); border: 1.5px solid var(--hijau) } .tombol.merah { background: var(--merah) } .tombol.kecil { padding: 6px 12px; min-height: 36px; font-size: 14px }
.tombol:disabled { opacity: .5; cursor: not-allowed }
.baris { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.pesan { margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 15px } .pesan.ok { background: #e3f3ea; color: #12492f } .pesan.galat { background: #fbe4e0; color: #7c1d14 } .pesan.info { background: #f6edd0; color: #5a4510 }
.lencana { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #eee6cc; color: #5a4510; white-space: nowrap }
.lencana.ok { background: #d6efe0; color: #12492f } .lencana.galat { background: #f8d9d4; color: #7c1d14 } .lencana.info { background: #dfe9f6; color: #1c3d6b }
.langkah { counter-reset: n; list-style: none; padding: 0; margin: 0 } .langkah li { counter-increment: n; display: flex; gap: 12px; padding: 8px 0 } .langkah li::before { content: counter(n); flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--emas); color: var(--tinta); font: 800 16px var(--judul); display: grid; place-items: center }
.kemajuan { display: flex; gap: 6px; margin: 14px 0 4px } .kemajuan div { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 6px 2px; border-radius: 8px; background: #efe7cf; color: var(--sunyi) } .kemajuan .sudah { background: var(--hijau); color: var(--krem) } .kemajuan .kini { background: var(--emas); color: var(--tinta) }
.soal { border-top: 1px solid var(--garis); padding: 12px 0 } .soal:first-child { border-top: 0 } .soal p { font-weight: 700 }
.pil { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; margin: 6px 0; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 10px; cursor: pointer; background: #fff }
.video { position: relative; padding-top: 56.25%; margin: 8px 0; border-radius: 10px; overflow: hidden; background: #000 } .video iframe { position: absolute; inset: 0; width: 100%; height: 100% }
.bukti { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 } .bukti img, .bukti video { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); background: #000 }
progress { width: 100%; height: 10px; accent-color: var(--hijau) }
table { width: 100%; border-collapse: collapse; font-size: 14px } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--garis); vertical-align: top } th { font-size: 12px; text-transform: uppercase; color: var(--sunyi); letter-spacing: .04em } td.angka, th.angka { text-align: right; white-space: nowrap }
.gulir { overflow-x: auto; -webkit-overflow-scrolling: touch }
.kode { font: 800 28px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; background: #fff; border: 2px dashed var(--emas); border-radius: 10px; padding: 10px 14px; display: inline-block }
.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
hr { border: 0; border-top: 1px solid var(--garis); margin: 18px 0 }
.tab { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 } .tab button { font: 700 14px var(--isi); padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--hijau); background: transparent; color: var(--hijau); cursor: pointer; min-height: 40px } .tab button[aria-selected=true] { background: var(--hijau); color: var(--krem) }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }