:root { --hijau:#13875a; --hijau-tua:#0d6343; --bg:#f4f7f5; --kartu:#fff; --garis:#dfe7e2; --teks:#14231c; --redup:#5f7468; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--hijau); color: var(--teks); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body { display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
button { font: inherit; color: inherit; cursor: pointer; }

#pilih { flex: 1; background: var(--bg); overflow-y: auto; }
.hero { background: linear-gradient(135deg, var(--hijau), var(--hijau-tua)); color: #fff; text-align: center; padding: 34px 20px 38px; }
.hero img { border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hero h1 { margin: 12px 0 2px; font-size: 26px; }
.hero p { margin: 0; opacity: .88; }
.isi { max-width: 460px; margin: 0 auto; padding: 22px 16px calc(24px + env(safe-area-inset-bottom)); }
.isi h2 { font-size: 17px; margin: 0 0 12px; }
.kartu { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--kartu); border: 1px solid var(--garis); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kartu:active { transform: scale(.99); border-color: var(--hijau); }
.kartu .ik { font-size: 34px; flex: none; }
.kartu b { display: block; font-size: 17px; }
.kartu small { display: block; color: var(--redup); font-size: 13px; margin-top: 2px; }
.kaki { color: var(--redup); font-size: 12px; text-align: center; margin-top: 18px; }

#bar { display: flex; align-items: center; gap: 8px; background: #fff3d6; color: #6b4600; padding: 7px 10px; font-size: 13px; flex: none; }
#bar span { flex: 1; min-width: 0; }
#bar button { border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; background: #e0a13a; color: #2b1c00; white-space: nowrap; }
#bar #bar-tutup { background: none; font-size: 22px; line-height: 1; padding: 2px 6px; color: #6b4600; }

#bingkai { position: relative; flex: 1; min-height: 0; background: var(--bg); }
#frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
#memuat { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--redup); text-align: center; padding: 20px; }
#memuat button { border: 1px solid var(--garis); background: #fff; border-radius: 10px; padding: 10px 18px; font-weight: 600; }
.putar { width: 30px; height: 30px; border: 3px solid var(--garis); border-top-color: var(--hijau); border-radius: 50%; animation: putar 1s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

#sheet { position: fixed; inset: 0; background: rgba(10,25,18,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
#sheet .isi-sheet { background: #fff; width: 100%; max-width: 520px; border-radius: 18px 18px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; }
#sheet h3 { margin: 0 0 10px; font-size: 18px; }
#sheet ol { margin: 8px 0 14px; padding-left: 20px; } #sheet li { margin: 8px 0; }
#sheet .tutup { width: 100%; border: 0; border-radius: 12px; padding: 13px; font-weight: 700; background: var(--hijau); color: #fff; }
#sheet .kecil { color: var(--redup); font-size: 12px; }
@media (min-width: 600px) { #sheet { align-items: center; } #sheet .isi-sheet { border-radius: 18px; } }