/* Halaman pengaturan admin dan pengumuman. Token dari ../tema.css; alasan di DESIGN.md. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--kertas); color: var(--tinta); font-family: var(--font-isi); font-size: 16px; line-height: 1.5; padding-bottom: 96px; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2 { font-family: var(--font-judul); color: var(--hijau-900); margin: 0; letter-spacing: -.02em; }

.atas { background: var(--permukaan); border-bottom: 1px solid var(--garis); }
.atas-baris { max-width: 860px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; min-height: 64px; }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hijau-900); font-weight: 800; line-height: 1.15; }
.merek small { font-weight: 600; color: var(--tinta-2); font-size: 13px; }
.tautan { margin-left: auto; color: var(--hijau-700); font-weight: 700; font-size: 14px; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.tautan:hover { color: var(--hijau-900); text-decoration-thickness: 2px; }

.isi { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.isi > h1 { font-size: 28px; font-weight: 800; }
.isi > h1::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 4px; background: var(--hijau-700); margin-top: 10px; }
.pengantar { color: var(--tinta-2); margin: 12px 0 20px; }
.memuat { color: var(--tinta-2); }

.bagian { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-kartu); padding: 22px; margin-top: 16px; }
.bagian h2 { font-size: 19px; font-weight: 800; }
.bagian .ket { color: var(--tinta-2); font-size: 14px; margin: 4px 0 14px; }
.medan { margin-top: 12px; }
.medan label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.medan .bantu { font-size: 13px; color: var(--tinta-2); margin-top: 4px; }
.medan input[type=text], .medan input[type=email], .medan input[type=tel], .medan textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-kontrol); border: 1px solid var(--garis-kuat); background: var(--permukaan); font-size: 16px;
}
.medan textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.medan select, .medan input[type=date], .medan input[type=datetime-local] {
  width: 100%; min-height: 46px; padding: 8px 12px; border-radius: var(--r-kontrol); border: 1px solid var(--garis-kuat); background: var(--permukaan); font-size: 16px;
}
.medan select:focus, .medan input[type=date]:focus, .medan input[type=datetime-local]:focus { border-color: var(--hijau-700); outline: 3px solid var(--fokus); outline-offset: 1px; }
[hidden] { display: none !important; }
.isi > .info, .isi > .galat { margin-top: 12px; }
.pilihan { border: 0; padding: 0; margin: 14px 0 0; }
.pilihan legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.opsi { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; margin: 0 6px 6px 0; border: 1px solid var(--garis-kuat); border-radius: var(--r-kontrol); font-weight: 600; font-size: 15px; background: var(--permukaan); }
.opsi:hover { background: var(--hijau-50); }
.opsi:has(:checked) { background: var(--hijau-100); border-color: var(--hijau-700); color: var(--hijau-900); }
.opsi input { width: 18px; height: 18px; margin: 0; accent-color: var(--hijau-700); }
.opsi:has(:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.bagian .galat, .bagian .info { margin-top: 12px; }
.medan input:focus, .medan textarea:focus { border-color: var(--hijau-700); outline: 3px solid var(--fokus); outline-offset: 1px; }
.dua { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .dua { grid-template-columns: 1fr 1fr; } }

.unit { border-top: 1px solid var(--garis); padding-top: 14px; margin-top: 14px; }
.unit-kepala { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--hijau-900); }
.unit-kepala img { width: 38px; height: 38px; object-fit: contain; background: var(--hijau-50); border-radius: 10px; padding: 3px; }

.foto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.foto .pratinjau { width: 120px; height: 90px; border-radius: 12px; background: var(--hijau-50); border: 1px dashed var(--garis-kuat); display: grid; place-items: center; font-size: 12px; color: var(--tinta-2); overflow: hidden; text-align: center; padding: 4px; }
.foto .pratinjau img { width: 100%; height: 100%; object-fit: cover; }

.galeri { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.galeri li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--garis); border-radius: 14px; padding: 12px; }
.galeri img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; }
.galeri .medan { flex: 1; margin-top: 0; }

.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-kontrol); font-weight: 700; font-size: 15px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--hijau-900); text-decoration: none; }
.tombol:hover { background: var(--hijau-50); border-color: var(--hijau-700); color: var(--hijau-700); }
.tombol:active { background: var(--hijau-100); }
.tombol:disabled { opacity: .55; }
.tombol.gelap { background: var(--hijau-700); border-color: var(--hijau-700); color: #fff; border-radius: 999px; }
.tombol.gelap:hover { background: var(--hijau-800); border-color: var(--hijau-800); color: #fff; }
.tombol.gelap:disabled { opacity: 1; background: var(--hijau-200); border-color: var(--hijau-200); color: var(--hijau-900); }
.tombol.bahaya { color: var(--merah-700); border-color: #f0a8a8; }
.tombol.bahaya:hover { background: var(--merah-100); }
.pilih-file { position: relative; }
.pilih-file input { position: absolute; inset: 0; opacity: 0; width: 100%; }
.pilih-file:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }

.galat { background: var(--merah-100); color: var(--merah-700); border: 1px solid #f5b5b5; border-radius: var(--r-kontrol); padding: 10px 14px; font-size: 14px; font-weight: 600; }
.info { background: var(--hijau-50); border: 1px solid var(--hijau-200); border-radius: var(--r-kontrol); padding: 10px 14px; font-size: 14px; color: var(--hijau-900); }

/* Batang simpan melayang di bawah: satu-satunya elemen berbayang di halaman ini (R-12) */
.batang-simpan { position: fixed; left: 0; right: 0; bottom: 0; background: var(--permukaan); color: var(--tinta); border-top: 1px solid var(--garis); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(15, 31, 56, .12); z-index: 10; }
.batang-simpan[hidden] { display: none; }
.batang-simpan .tombol.gelap { background: var(--hijau-700); border-color: var(--hijau-700); color: #fff; }
.batang-simpan .tombol.gelap:hover { background: var(--hijau-800); border-color: var(--hijau-800); }
.batang-simpan .tombol.gelap:disabled { background: var(--hijau-200); border-color: var(--hijau-200); color: var(--hijau-900); }