/* Sentuhan kecil di luar utility Tailwind */
.font-display { font-family: 'Lora', serif; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,77,17,.14); }
.prose-kua p { margin-bottom: 1rem; line-height: 1.75; }
.prose-kua ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.prose-kua ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 1rem; }
::selection { background: #E2BC5C; color: #00360C; }

/* Garis aksen emas di bawah judul section */
.section-heading { position: relative; display: inline-block; padding-bottom: 12px; }
.section-heading::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #D4A237, #946821);
}
.section-heading.center { display: block; text-align: center; }
.section-heading.center::after { left: 50%; transform: translateX(-50%); }

/* Baris tabel admin selang-seling */
.zebra-row:nth-child(even) { background: #F0F6F1; }

/* Pola geometris islami tipis untuk hero */
.islamic-pattern { background-repeat: repeat; background-size: 64px 64px; }

/* Kartu bergaya "modern": border halus + shadow berlapis + garis aksen
   gradien hijau-emas tipis di tepi atas. */
.card-modern {
  position: relative;
  background: #fff; border: 1px solid #DCE6E1; border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,54,12,.06), 0 14px 30px -16px rgba(0,54,12,.18);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-modern::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #3FA97B, #C9973F); opacity: .55;
}
.card-modern:hover { box-shadow: 0 6px 14px -4px rgba(0,54,12,.1), 0 22px 38px -16px rgba(0,54,12,.24); }

/* Muncul halus saat scroll (dipasang lewat initScrollReveal() di site.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.animate-rise { animation: riseIn .4s ease both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Lencana bulat kecil berisi ikon di depan judul section (mis. "Struktur
   Organisasi") - dipasangkan dengan markup <span class="icon-badge">. */
.icon-badge { width: 32px; height: 32px; border-radius: 9999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---- Gaya form admin: label, input, textarea, select, file, checkbox ---- */
.form-label { display: block; font-size: .8125rem; font-weight: 600; color: #0D2135; margin-bottom: .375rem; }
.form-hint { font-weight: 400; color: #8CA396; }

.form-input, .form-textarea, .form-select {
  width: 100%; border: 1.5px solid #DCE6E1; border-radius: .65rem;
  padding: .6rem .8rem; font-size: .875rem; background: #fff; color: #17281f;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: #B9CFC2; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: #D4A237; box-shadow: 0 0 0 3.5px rgba(212,162,55,.2);
}
.form-input:disabled, .form-textarea:disabled { background: #F0F6F1; color: #8CA396; cursor: not-allowed; }
.form-textarea { resize: vertical; line-height: 1.55; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23617A6C'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1em; padding-right: 2.2rem;
}

.form-file-wrap {
  display: flex; align-items: center; gap: .75rem; border: 1.5px dashed #C9DBD0; border-radius: .65rem;
  padding: .7rem .9rem; font-size: .8125rem; color: #5B7568; background: #F7FBF8; transition: border-color .15s ease;
}
.form-file-wrap:hover { border-color: #9FC1AC; }
.form-file-wrap input[type="file"] { font-size: .8125rem; color: #5B7568; max-width: 100%; }
.form-file-wrap input[type="file"]::file-selector-button {
  border: none; background: #006316; color: #fff; font-weight: 600; font-size: .75rem;
  padding: .45rem .9rem; border-radius: .5rem; margin-right: .75rem; cursor: pointer; transition: background .15s ease;
}
.form-file-wrap input[type="file"]::file-selector-button:hover { background: #004D11; }

.form-check-row {
  display: flex; align-items: flex-start; gap: .65rem; font-size: .875rem; color: #17281f;
  border: 1.5px solid #E5ECE8; border-radius: .65rem; padding: .7rem .9rem; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.form-check-row:hover { border-color: #B9CFC2; background: #FAFCFB; }
.form-check-row input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: .1rem; accent-color: #006316; flex-shrink: 0; cursor: pointer; }
.form-check-row.is-highlight { border-color: #EEDBA6; background: #FCF8ED; }
.form-check-row.is-highlight:hover { border-color: #E2BC5C; }
.form-check-row.is-highlight input[type="checkbox"] { accent-color: #B8842A; }

.form-fieldset { border: none; border-top: 1px dashed #E5ECE8; padding-top: 1.1rem; margin-top: .25rem; }
.form-fieldset legend { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8CA396; padding-right: .5rem; }

/* Pilihan status berbentuk pil (dipakai untuk radio Status Berita/Pengaduan) */
.radio-pill-group { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.radio-pill { position: relative; cursor: pointer; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radio-pill span { display: inline-block; padding: .5rem 1.1rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600; border: 1.5px solid #DCE6E1; color: #5B7568; transition: all .15s ease; }
.radio-pill:hover span { border-color: #B9CFC2; }
.radio-pill input:checked + span { background: #006316; border-color: #006316; color: #fff; }
.radio-pill input:focus-visible + span { outline: 2px solid #D4A237; outline-offset: 2px; }