/* Penyempurnaan tampilan bersama index.php & detail.php (dimuat setelah <style> inline). */
:root { --navy: #000066; --navy-dark: #00004d; --bg: #f4f5f7; --text: #1a1a2e; --muted: #666a7a; --border: #e4e7ef; --ring: 0 0 0 3px rgba(0,0,102,.15); }
body { font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* Header: sama dgn admin, sedikit gradien */
header { background: linear-gradient(180deg, #000066 0%, #00004d 100%); padding: 28px 16px 46px; }
header h1 { letter-spacing: -.01em; }

/* Lebar konten seragam 900px di semua halaman */
.wrap, .hero-wrap { max-width: 900px; padding-left: 16px; padding-right: 16px; }
.wrap { margin-top: -26px; }
.hero-wrap + .wrap { margin-top: 20px; }

/* Kotak pencarian */
form.search { border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,40,.10); padding: 6px; transition: box-shadow .15s, border-color .15s; }
form.search:focus-within { border-color: var(--navy); box-shadow: var(--ring), 0 4px 18px rgba(0,0,40,.10); }
form.search input[type=text] { font-size: 1rem; background: transparent; }
form.search button { border-radius: 8px; font-weight: 600; padding: 10px 22px; }

/* Kartu & panel */
.card, .info-card, .section, .related-card, .stat-tile, .status-chip, .sort-bar a { border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card, .info-card, .related-card { border-radius: 12px; }
.card:hover { box-shadow: 0 6px 20px rgba(0,0,40,.08); border-color: #d6dbea; }
.card .no_perkara { line-height: 1.4; }
.card .card-actions { border-top-color: var(--border); }
.summary-box, .summary-card { background: #f7f8fc; }
.badge, .mini-badge { letter-spacing: .01em; }
.stat-tile .stat-num { letter-spacing: -.02em; }
.meta { font-size: .88rem; }

/* Tombol & tautan: fokus jelas untuk keyboard */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.btn-download { border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,102,.18); }

/* Paginasi */
.pager a, .pager span { border-color: var(--border); border-radius: 8px; min-width: 36px; text-align: center; }
.pager a:hover { border-color: var(--navy); }

/* Detail: section dokumen */
.section summary { padding: 15px 20px; }
.section summary:hover { background: #fafbfe; }
.section .content { font-size: .9rem; line-height: 1.7; }

footer { padding: 28px 16px; }

/* ---- Ponsel ---- */
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  header { padding: 22px 14px 40px; }
  header .logo { width: 46px; height: 46px; }
  header h1 { font-size: 1.25rem; }
  header p, header p.tagline { font-size: .82rem; }
  form.search input[type=text] { font-size: 16px; padding: 10px 8px; }  /* 16px: cegah auto-zoom iOS */
  form.search button { padding: 10px 14px; }
  .card, .info-card, .related-card { padding: 14px; }
  .card .card-actions { flex-direction: column; gap: 8px; }
  .usage-stats-inline { display: block; margin: 4px 0 0; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-tile { padding: 14px 10px; }
  .stat-tile .stat-num { font-size: 1.45rem; }
  .status-chip { padding: 6px 12px 6px 6px; }
  .info-card .tanggal { line-height: 1.7; }
  .btn-download { width: 100%; justify-content: center; }
  .section summary { padding: 13px 14px; font-size: .9rem; }
  .section .content { padding: 12px 14px 16px; font-size: .86rem; white-space: pre-line; overflow-wrap: anywhere; }
  .related-list li { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }