/* 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 } }

.tanya { font-size: 19px; font-weight: 700; line-height: 1.4; margin: 6px 0 12px }
.opsi { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; font: 500 16px/1.45 var(--isi); color: var(--tinta); padding: 13px 14px; margin: 8px 0; min-height: 52px; background: #fff; border: 1.5px solid var(--garis); border-radius: 12px; cursor: pointer }
button.opsi:hover:not(:disabled) { border-color: var(--hijau) } button.opsi:disabled { cursor: default; opacity: .7 }
.opsi .huruf { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--emas); color: var(--tinta); display: grid; place-items: center; font: 800 14px var(--isi) }
.opsi.benar { border-color: var(--ok); background: #e3f3ea } .opsi.salah { border-color: var(--merah); background: #fbe4e0 }
.umpan { padding: 12px 14px; border-radius: 10px; margin: 12px 0 } .umpan.benar { background: #e3f3ea; color: #12492f } .umpan.salah { background: #fbe4e0; color: #7c1d14 }
.tips { border-left: 4px solid var(--emas); background: #fff6dc; padding: 12px 14px; border-radius: 0 10px 10px 0; margin: 12px 0 }
details.kartu summary { cursor: pointer; font-weight: 700; color: var(--hijau) }
.perekam { margin: 10px 0 } audio { width: 100%; margin: 8px 0 }
.rek { color: var(--merah); font-weight: 700 } @media (prefers-reduced-motion: no-preference) { .rek { animation: denyut 1.2s ease-in-out infinite } } @keyframes denyut { 50% { opacity: .45 } }
.rubrik { margin: 6px 0; padding-left: 20px } .rubrik li { margin: 2px 0 }

/* menu bawah portal sales (HP): 4 menu, angka kecil = ada yang perlu dikerjakan */
body.portal { padding-bottom: calc(76px + env(safe-area-inset-bottom)) }
.bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--hijau); border-top: 1px solid rgba(251,246,233,.15); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(6,23,26,.18) }
.bawah[hidden] { display: none }
.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; background: none; border: 0; color: rgba(251,246,233,.7); font: 600 12px/1.2 var(--isi); cursor: pointer; min-height: 60px; -webkit-tap-highlight-color: transparent }
.nav-item.aktif { color: var(--emas) }
.nav-item.aktif::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--emas) }
.nav-ikon { display: block; line-height: 0 }
.nav-lencana { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--merah); color: #fff; font: 700 11px/18px var(--isi); text-align: center; box-shadow: 0 0 0 2px var(--hijau) }
@media (min-width: 720px) { .bawah { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, 100%); border-radius: 14px 14px 0 0 } }

/* logo resmi MITS di header (satu-satunya logo; sumber: logo/logo-mits.png) */
.logo-mits { width: 28px; height: 28px; object-fit: contain; margin-right: 10px; flex: none }
.atas .keluar { background: none; border: 1px solid rgba(251,246,233,.45); color: var(--krem); border-radius: 999px; padding: 4px 14px; font: 600 13px var(--isi); cursor: pointer }
.atas .keluar:hover { background: rgba(251,246,233,.1) }