/* Pandu News "Kaca Bening": halaman hasil pencarian /?q= (PRD 7.5). Nilai px/hex dari mockup
   Claude Design (design/pandu-news-redesign/Pencarian.dc.html 2a-2d). Daftar, skeleton, pagination,
   dan "Muat lebih banyak" memakai kelas halaman Kategori (kategori.css). */

.pn-cari-wrap { display: flex; flex-direction: column; gap: 24px; padding: 32px 0 72px; }
.pn-cari-form {
  display: flex; align-items: center; gap: 12px; height: 56px; max-width: 720px; padding: 0 6px 0 18px;
  border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: 0 2px 12px rgba(15,23,42,.04);
}
.pn-cari-form:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.pn-cari-form-icon { flex-shrink: 0; color: var(--color-muted); }
.pn-cari-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 17px; color: var(--color-ink); outline: none; }
.pn-cari-submit { flex-shrink: 0; height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: #1d4ed8; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color var(--dur-color); }
.pn-cari-submit:hover { background: #2563eb; }
.pn-cari-title { font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }

.pn-cari-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }

/* Filter */
.pn-cari-filters { display: flex; flex-direction: column; gap: 24px; padding: 20px; border-radius: var(--radius-panel); background: var(--glass-solid-bg); border: 1px solid var(--color-line); box-shadow: var(--glass-solid-hi); }
.pn-cari-catset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pn-cari-legend { display: block; margin-bottom: 8px; padding: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-3); }
.pn-cari-cats { display: flex; flex-direction: column; gap: 8px; }
/* position: relative menahan teks pembaca layar (.pn-sr-only, absolute) di dalam chip; tanpa itu
   ia lolos dari potongan baris geser mobile dan memperlebar halaman. */
.pn-cari-cat {
  position: relative; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--color-ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background-color var(--dur-color), border-color var(--dur-color);
}
.pn-cari-cat:hover { background: var(--color-line-soft); }
.pn-cari-cat[aria-pressed="true"] { background: var(--cat-tint); border-color: var(--cat); }
.pn-cari-box { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; border: 2px solid var(--cat); background: var(--color-surface); color: #fff; transition: background-color var(--dur-color); }
.pn-cari-box svg { opacity: 0; transition: opacity var(--dur-color); }
.pn-cari-cat[aria-pressed="true"] .pn-cari-box { background: var(--cat); }
.pn-cari-cat[aria-pressed="true"] .pn-cari-box svg { opacity: 1; }
.pn-cari-cat-name { flex: 1; }
.pn-cari-cat-n { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pn-cari-field { display: flex; flex-direction: column; }
.pn-cari-field select, .pn-cari-mobile select {
  height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--color-line); background: var(--color-surface);
  color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pn-cari-reset {
  height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-brand); font-size: 14px; font-weight: 700; cursor: pointer;
}
.pn-cari-reset.is-chip { display: none; }

/* Hasil */
.pn-cari-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pn-cari-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pn-cari-status { font-size: 14px; line-height: 20px; color: var(--color-ink-3); }
.pn-cari-sort { display: flex; padding: 3px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-line); }
.pn-cari-sort button { height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--color-ink-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-color), color var(--dur-color); }
.pn-cari-sort button:hover { color: var(--color-brand-600); }
.pn-cari-sort button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
.pn-cari-mobile { display: none; }

.pn-cari-list { list-style: none; margin: 0; padding: 0 24px; display: flex; flex-direction: column; border-radius: var(--radius-panel); background: var(--glass-solid-bg); border: 1px solid var(--color-line); box-shadow: var(--glass-solid-hi); }
.pn-cari-list > li { border-bottom: 1px solid var(--color-line-soft); }
.pn-cari-list > li:last-child { border-bottom: 0; }
.pn-cari-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 20px 0; color: var(--color-ink); }
.pn-cari-thumb { width: 180px; aspect-ratio: 7 / 5; border-radius: 12px; object-fit: cover; background: var(--color-line); }
.pn-cari-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pn-cari-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--color-muted); }
.pn-cari-row-title { font-size: 19px; line-height: 26px; font-weight: 600; transition: color var(--dur-color); }
.pn-cari-row:hover .pn-cari-row-title { color: var(--color-brand-600); }
.pn-cari-row.is-seen .pn-cari-row-title { color: var(--color-seen); }
.pn-cari-row mark { background: none; color: inherit; font-weight: 800; }
.pn-cari-snip { font-size: 14px; line-height: 22px; color: var(--color-ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pn-cari-snip mark { font-weight: 700; }
.pn-cari-foot { display: none; }
.pn-cari-filter-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 32px 24px; font-size: 15px; color: var(--color-ink-2); }
.pn-cari-skel { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 12px; pointer-events: none; animation: pn-fade-in var(--dur-color) var(--ease-in); }
.pn-cari-skel .pn-skel { height: 138px; border-radius: 16px; animation: pn-shimmer 1.2s linear infinite; }

/* Tanpa hasil */
.pn-cari-none { max-width: 720px; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 24px; background: var(--glass-solid-bg); border: 1px solid var(--color-line); }
.pn-cari-none-logo { width: 56px; height: 56px; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(15,23,42,.08); }
.pn-cari-none-text { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 24px; color: var(--color-ink-2); }
.pn-cari-none-text p { font-size: 17px; line-height: 26px; }
.pn-cari-none-text strong { color: var(--color-ink); }
.pn-cari-none-text ul { margin: 0; padding-left: 20px; }
.pn-cari-none-group { display: flex; flex-direction: column; gap: 2px; }
.pn-cari-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-cari-topic { height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); font-size: 14px; font-weight: 600; transition: border-color var(--dur-color), color var(--dur-color); }
.pn-cari-topic:hover { border-color: var(--color-brand); color: var(--color-brand); }

@media (max-width: 1023px) {
  .pn-cari-body { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  .pn-cari-row { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
  .pn-cari-thumb { width: 140px; }
}

/* Mobile (mockup 2b/2d): chip rubrik digeser, periode + urutan berdampingan, baris thumbnail kanan */
@media (max-width: 767px) {
  .pn-cari-wrap { gap: 12px; padding: 16px 0 32px; }
  .pn-cari-form { height: 52px; padding: 0 3px 0 14px; border-radius: 14px; gap: 8px; box-shadow: none; }
  .pn-cari-form input { font-size: 16px; }
  .pn-cari-submit { height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
  .pn-cari-title { font-size: 24px; line-height: 30px; }
  .pn-cari-body { display: block; }
  .pn-cari-filters { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pn-cari-filters .pn-cari-legend, .pn-cari-field, .pn-cari-filters > .pn-cari-reset { display: none; }
  .pn-cari-cats { flex-direction: row; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; overflow-x: auto; scrollbar-width: none; }
  .pn-cari-cats::-webkit-scrollbar { display: none; }
  .pn-cari-cat { flex-shrink: 0; height: 44px; gap: 6px; padding: 0 14px; border-radius: 999px; border-color: var(--color-line); background: var(--color-surface); font-size: 13px; font-weight: 700; }
  .pn-cari-cat[aria-pressed="true"] { color: var(--cat-text); }
  .pn-cari-box { display: none; }
  .pn-cari-cat-n { font-weight: 600; color: inherit; }
  .pn-cari-reset.is-chip { display: inline-flex; flex-shrink: 0; border-radius: 999px; font-size: 13px; }
  .pn-cari-main { gap: 8px; }
  .pn-cari-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .pn-cari-sort { display: none; }
  .pn-cari-mobile { order: -1; display: flex; gap: 8px; }
  .pn-cari-mobile select { flex: 1; min-width: 0; }
  .pn-cari-status { font-size: 13px; }
  .pn-cari-list { padding: 0 14px; }
  .pn-cari-row { grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; padding: 14px 0; }
  .pn-cari-thumb { order: 2; width: 80px; border-radius: 10px; }
  .pn-cari-text { gap: 4px; }
  .pn-cari-meta .pn-badge { padding: 0; background: none; font-size: 12px; }
  .pn-cari-when, .pn-cari-snip { display: none; }
  .pn-cari-row-title { font-size: 15px; line-height: 21px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .pn-cari-foot { display: block; font-size: 12px; line-height: 18px; color: var(--color-muted); }
  .pn-cari-filter-empty { padding: 20px 14px; font-size: 14px; }
  .pn-cari-skel { border-radius: var(--radius-panel); background: linear-gradient(90deg, var(--color-line) 0, var(--color-line-soft) 150px, var(--color-line) 300px); background-size: 600px 100%; animation: pn-fade-in var(--dur-color) var(--ease-in), pn-shimmer 1.2s linear infinite; height: 600px; }
  .pn-cari-skel > * { display: none; }
  .pn-cari-none { gap: 18px; padding: 20px; border-radius: 20px; }
  .pn-cari-none-logo { width: 48px; height: 48px; border-radius: 12px; }
  .pn-cari-none-text p { font-size: 15px; line-height: 23px; }
}