/* Pengaduan Masyarakat — memakai token warna tema mansaka, dengan cadangan bila tema lain. */

/* Tema membatasi lebar .konten untuk bacaan; modul ini butuh lebar penuh (pola sama dengan .acara/.profil). */
.konten.konten:has(> .aduan) { max-width: none; }

.aduan {
	--a-biru: var(--biru-600, #004aad);
	--a-biru-tua: var(--biru-800, #002d6b);
	--a-biru-muda: var(--biru-050, #eef4fc);
	--a-emas: var(--emas-400, #f6c601);
	--a-teks: var(--teks, #23272f);
	--a-lembut: var(--teks-lembut, #5b6270);
	--a-garis: var(--garis, #e4e8ef);
	--a-radius: var(--radius, 12px);
	--a-bayang: var(--bayang-1, 0 1px 2px rgba(0, 31, 71, .05), 0 2px 8px rgba(0, 31, 71, .05));
	color: var(--a-teks);
	max-width: 100%;
}
.aduan h2 { font-size: 1.25rem; margin: 0 0 .75rem; color: var(--a-biru-tua); line-height: 1.3; }
.aduan-tata { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .aduan-tata { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); } }

.aduan-utama, .aduan-kartu {
	background: #fff; border: 1px solid var(--a-garis); border-radius: var(--a-radius);
	box-shadow: var(--a-bayang); padding: clamp(1rem, 3vw, 1.75rem);
}
.aduan-samping { display: grid; gap: 1.25rem; }
.aduan-kartu h2 { font-size: 1.05rem; }
.aduan-pengantar { color: var(--a-lembut); margin: 0 0 1.25rem; }

.aduan-form { display: grid; gap: 1rem; }
.aduan-baris { display: grid; gap: .35rem; }
.aduan-baris label, .aduan-identitas legend { font-weight: 600; font-size: .95rem; }
.aduan .wajib { color: #b42318; }
.aduan .opsi { font-weight: 400; color: var(--a-lembut); font-size: .85rem; }
.aduan input[type="text"], .aduan select, .aduan textarea, .aduan input[type="file"] {
	width: 100%; box-sizing: border-box; font: inherit; color: inherit;
	padding: .65rem .8rem; border: 1px solid var(--abu-300, #c9cfda); border-radius: var(--radius-s, 8px); background: #fff;
}
.aduan input[type="file"] { padding: .5rem; background: var(--abu-050, #f8f9fb); }
.aduan textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.aduan input:focus, .aduan select:focus, .aduan textarea:focus {
	outline: 3px solid var(--biru-200, #bfd4f0); outline-offset: 1px; border-color: var(--a-biru);
}
.aduan-identitas {
	border: 1px solid var(--a-garis); border-radius: var(--radius-s, 8px); padding: 1rem; margin: 0;
	display: grid; gap: .85rem; background: var(--abu-050, #f8f9fb);
}
.aduan-identitas legend { padding: 0 .35rem; color: var(--a-biru-tua); }
.aduan-dua { display: grid; gap: .85rem; }
@media (min-width: 640px) { .aduan-dua { grid-template-columns: 1fr 1fr; } }
.aduan-centang { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; cursor: pointer; }
.aduan-centang input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--a-biru); }
.aduan-kecil { font-size: .85rem; color: var(--a-lembut); margin: 0; }
.aduan-kirim { justify-self: start; border: 0; cursor: pointer; font: inherit; }
.aduan-jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aduan .layar-baca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.aduan-kotak { border-radius: var(--a-radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.aduan-kotak ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.aduan-kotak--galat { background: #fef3f2; border: 1px solid #fecdca; color: #7a271a; }
.aduan-kotak--sukses { background: #ecfdf3; border: 1px solid #abefc6; color: #054f31; }
.aduan-kotak--sukses h2 { color: #054f31; }
.aduan-kode {
	font: 700 clamp(1.25rem, 4vw, 1.75rem)/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em;
	background: #fff; border: 2px dashed #32d583; border-radius: 10px; padding: .6rem 1rem; display: inline-block; margin: .25rem 0 .75rem;
	color: #054f31; user-select: all;
}

.aduan-cek { display: flex; gap: .5rem; }
.aduan-cek input { flex: 1; min-width: 0; text-transform: uppercase; }
.aduan-cek .tombol { border: 0; cursor: pointer; font: inherit; }
.aduan-hasil { margin-top: 1rem; border-top: 1px solid var(--a-garis); padding-top: 1rem; }
.aduan-hasil--kosong { color: #7a271a; }
.aduan-hasil dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .5rem 0 0; font-size: .92rem; }
.aduan-hasil dt { color: var(--a-lembut); }
.aduan-hasil dd { margin: 0; font-weight: 600; word-break: break-word; }
.aduan-tanggapan { margin-top: .9rem; background: var(--a-biru-muda); border-radius: 10px; padding: .8rem 1rem; font-size: .95rem; }
.aduan-tanggapan p { margin: .4rem 0 0; }
.aduan-lencana { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; background: #f2f4f7; color: #344054; }
.aduan-lencana--baru { background: #fef0c7; color: #93370d; }
.aduan-lencana--diproses { background: #d1e9ff; color: #194185; }
.aduan-lencana--selesai { background: #d1fadf; color: #054f31; }

.aduan-rekap { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.aduan-rekap li { background: var(--a-biru-muda); border-radius: 10px; padding: .7rem .4rem; font-size: .8rem; color: var(--a-lembut); }
.aduan-rekap span { display: block; font-size: 1.5rem; font-weight: 800; color: var(--a-biru-tua); line-height: 1.2; }

.aduan-kanal { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.aduan-kanal a {
	display: block; text-decoration: none; color: inherit; border: 1px solid var(--a-garis); border-radius: 10px; padding: .7rem .9rem;
	transition: border-color .18s ease, background .18s ease;
}
.aduan-kanal a:hover, .aduan-kanal a:focus-visible { border-color: var(--a-biru); background: var(--a-biru-muda); }
.aduan-kanal strong { display: block; color: var(--a-biru-tua); }
.aduan-kanal span { display: block; font-size: .85rem; color: var(--a-lembut); }

/* Menimpa jarak bawaan tema untuk h2/ul di dalam .konten. */
.konten .aduan h2 { margin-top: 0; }
.konten .aduan ul.aduan-kanal, .konten .aduan ul.aduan-rekap { padding-left: 0; margin-left: 0; }
.konten .aduan ul.aduan-kanal li, .konten .aduan ul.aduan-rekap li { margin: 0; }