/* Versi statis (web/): tokens.css dan news.css disalin apa adanya dari prototipe Next
   (npm run web:sync). Berkas ini hanya berisi yang di prototipe diurus next/font dan React. */

/* Inter variable (PanduSans landing) dan Newsreader Italic 500 subset latin, di-host sendiri
   (PRD bagian 10). Metrik cadangan sama dengan next/font agar teks tidak melompat saat font tiba. */
@font-face { font-family: "inter"; src: url("/fonts/pandu-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "inter Fallback"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0%; size-adjust: 107.89%; }
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/fonts/newsreader-italic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman"); ascent-override: 69.68%; descent-override: 25.12%; line-gap-override: 0%; size-adjust: 105.48%; }
:root { --font-inter: "inter", "inter Fallback"; --font-newsreader: "Newsreader", "Newsreader Fallback"; }

/* Di prototipe main anak langsung body.pn (kolom flex, main flex: 1 0 auto), jadi footer halaman
   pendek tetap di dasar layar. Di sini ada #pn-app dan [data-pn-page] di antaranya; keduanya
   meneruskan kolom fleksibel itu. */
#pn-app, [data-pn-page] { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Panel yang dibuka-tutup JS memakai atribut hidden; kelas komponen (display: grid/flex) tidak
   boleh mengalahkannya. */
.pn [hidden] { display: none !important; }

/* Selama isi pertama dimuat (main aria-busy) footer belum tampil, seperti Beranda prototipe yang
   dialirkan (footer ada di dalam Suspense). Footer lalu muncul bersama isi sebagai elemen baru, jadi
   tidak ikut bergeser (CLS) bila kerangka diganti isi yang lebih pendek, misalnya kategori kosong. */
[data-pn-page]:has(> main[aria-busy="true"]) ~ .pn-footer { display: none; }

/* Kerangka Detail selama artikel dimuat (PRD 7.7): bentuk sama dengan kepala artikel dan sampul.
   Di prototipe server menunggu data, jadi kerangka ini hanya ada di versi statis. */
.pn-detail-skel .pn-skel { animation: pn-shimmer 1.2s linear infinite; }
.pn-ds-crumb { width: 220px; height: 18px; border-radius: 9px; }
.pn-ds-badge { width: 90px; height: 24px; border-radius: 999px; }
.pn-ds-title { width: 100%; max-width: 860px; height: 48px; border-radius: 12px; }
.pn-ds-short { width: 62%; }
.pn-ds-dek { width: 80%; max-width: 760px; height: 22px; border-radius: 11px; }
.pn-ds-source { height: 52px; border-radius: var(--radius-card); }
.pn-ds-cover { width: 100%; aspect-ratio: 16 / 9; max-height: 560px; border-radius: var(--radius-panel); }
@media (max-width: 767px) {
  .pn-detail-skel { padding-inline: 16px; gap: 16px; }
  .pn-ds-title { height: 34px; }
  .pn-ds-cover { border-radius: 0; margin-inline: -16px; width: calc(100% + 32px); }
}

/* Kerangka Kategori selama daftar pertama dimuat (PRD 7.7). Hero, sub-tab, dan toolbar sudah asli;
   kartu kerangka memakai kelas kartu yang sama (.pn-kat-card, .pn-kat-lead, .pn-anl-item), jadi
   ukurannya ikut breakpoint kategori.css dan isi asli menggantikannya tanpa lompatan. */
.pn-kat-loading { pointer-events: none; }
.pn-kat-loading .pn-skel, .pn-kat-count .pn-skel, .pn-ks-status, .pn-ks-hero, .pn-ks-cari-h1, .pn-ks-arsip-sub { animation: pn-shimmer 1.2s linear infinite; }
/* .pn-card-photo .pn-img memberi latar polos; kerangka foto tetap berkilau. */
.pn-kat-loading .pn-card-photo .pn-skel, .pn-kat-loading .pn-cari-thumb.pn-skel { background: linear-gradient(90deg, var(--color-line) 0, var(--color-line-soft) 200px, var(--color-line) 400px); background-size: 800px 100%; }
.pn-ks-num { display: inline-block; width: 88px; height: 28px; vertical-align: middle; border-radius: 8px; }
.pn-ks-status { display: inline-block; width: 220px; height: 16px; margin: 2px 0; border-radius: 8px; }
.pn-ks-hero { height: 166px; border-radius: var(--radius-canvas); }
.pn-ks-badge { width: 72px; height: 22px; border-radius: 999px; }
.pn-ks-meta { width: 150px; height: 12px; margin: 3px 0; border-radius: 6px; }
/* Baris teks: tinggi baris asli (--lh), batang 8 px lebih pendek di tengahnya. */
.pn-ks-lines { display: block; }
.pn-ks-lines > .pn-skel { height: calc(var(--lh) - 8px); margin: 4px 0; border-radius: 6px; }
.pn-ks-lines > .pn-skel:last-child { width: 62%; }
.pn-kat-card .pn-ks-title { --lh: 23px; }
.pn-kat-lead .pn-ks-title { --lh: 32px; }
.pn-kat-lead .pn-ks-excerpt { --lh: 24px; }
.pn-kat-lead .pn-ks-meta { margin-top: auto; }
.pn-ks-mini-time { width: 40px; height: 14px; margin: 3px 0; border-radius: 7px; }
.pn-ks-mini-cat { width: 70px; height: 12px; margin: 2px 0; border-radius: 6px; }
.pn-kat-mini .pn-ks-title { --lh: 20px; }
.pn-ks-when { width: 160px; height: 12px; margin: 3px 0; border-radius: 6px; }
.pn-anl-body .pn-ks-title { --lh: 32px; width: 100%; }
.pn-anl-body .pn-ks-excerpt { --lh: 26px; width: 100%; }
.pn-ks-byline { width: 180px; height: 32px; margin-top: 4px; border-radius: 16px; }
.pn-anl-item .pn-card-photo .pn-skel { border-radius: 0; }
@media (max-width: 1199px) {
  .pn-kat-lead .pn-ks-title { --lh: 30px; }
}
@media (max-width: 1023px) {
  .pn-kat-lead .pn-ks-title { --lh: 28px; }
  .pn-anl-body .pn-ks-title { --lh: 28px; }
}
@media (max-width: 767px) {
  .pn-ks-hero { height: 186px; margin-inline: calc(12px - var(--gutter)); border-radius: 22px; }
  .pn-ks-num { width: 40px; height: 12px; }
  .pn-ks-status { height: 14px; }
  .pn-kat-card .pn-ks-badge { width: 60px; height: 12px; margin: 2px 0; }
  .pn-kat-card .pn-ks-title, .pn-kat-lead .pn-ks-title { --lh: 21px; }
  .pn-kat-lead .pn-ks-excerpt { display: none; }
  .pn-anl-body .pn-ks-title { --lh: 25px; }
  .pn-anl-body .pn-ks-excerpt { --lh: 24px; }
  .pn-anl-body .pn-ks-excerpt > .pn-skel:nth-child(4) { display: none; }
}

/* Kerangka halaman hasil pencarian (/?q=) selama hasil pertama dimuat: kotak kata kunci asli, judul,
   panel filter, dan baris seukuran baris hasil (kelas .pn-cari-row dari pencarian.css). */
.pn-ks-cari-h1 { display: inline-block; width: min(360px, 80%); height: 30px; margin: 5px 0; vertical-align: top; border-radius: 10px; }
.pn-ks-cari-filters { height: 300px; border-radius: 12px; }
.pn-cari-list .pn-ks-meta { width: 180px; }
/* Selama jumlah per rubrik menyusul (desktop), isi panel filter di bawah tombol rubrik belum
   tampil: posisinya baru pasti setelah tombol asli masuk, jadi tidak ada yang terlihat bergeser. */
@media (min-width: 768px) { .pn-cari-filters.is-counting > :not(.pn-cari-catset) { visibility: hidden; } }
/* Tombol rubrik selama jumlah per rubrik menyusul: setinggi .pn-cari-cat (44 px). */
.pn-ks-cari-cat { height: 44px; border-radius: 12px; animation: pn-shimmer 1.2s linear infinite; }
.pn-ks-cari-title { --lh: 26px; }
.pn-ks-cari-snip { --lh: 22px; }
@media (max-width: 767px) {
  .pn-ks-cari-h1 { height: 22px; margin: 4px 0; }
  .pn-ks-cari-filters { height: 44px; border-radius: 999px; }
  .pn-ks-cari-cat { flex-shrink: 0; width: 112px; border-radius: 999px; }
  .pn-ks-cari-title { --lh: 21px; }
  .pn-ks-cari-snip { display: none; }
}

/* Kerangka arsip: baris jumlah artikel di bawah judul (isi lain memakai kerangka Pencarian). */
.pn-ks-arsip-sub { display: inline-block; width: 300px; max-width: 80%; height: 14px; vertical-align: middle; border-radius: 7px; }
@media (max-width: 767px) { .pn-ks-arsip-sub { width: 230px; height: 12px; } }

/* Tautan masuk Tentang Kami (PRD 7.9), hanya di versi statis. Footer lengkap: tautan halaman yang
   sedang dibuka putih tebal bergaris bawah lime. Footer ringkas: "Tentang Kami · Kembali ke
   PANDUPAJAK.ID" di antara logo dan kredit (mockup 1g dan 1h). */
.pn-foot-link[aria-current="page"] { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-lime); }
.pn-foot-nav { display: flex; align-items: center; gap: 4px; color: #93a6c9; }
.pn-foot-compact .pn-foot-nav a { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.pn-foot-compact .pn-foot-about { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-lime); }
.pn-foot-compact .pn-foot-home { color: #e5edf7; font-weight: 400; transition: color var(--dur-color); }
.pn-foot-compact .pn-foot-home:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .pn-foot-nav { flex-wrap: wrap; gap: 0 4px; font-size: 14px; }
  .pn-foot-compact .pn-foot-nav .pn-foot-about { padding: 0 8px 0 0; }
  .pn-foot-compact .pn-foot-nav .pn-foot-home { padding: 0 8px; }
  .pn-foot-home svg { display: none; }
}
/* Lembar Menu: grup "News Pandu Pajak" (Tentang Kami, Kembali ke PANDUPAJAK.ID) tanpa garis antarbaris. */
.pn-sheet-link { padding: 0 10px; border-bottom: 0; border-radius: 12px; }
.pn-sheet-link svg { flex-shrink: 0; }
.pn-sheet-link[aria-current="page"] { background: var(--color-brand-50); color: var(--color-brand); font-weight: 700; }
.pn-sheet-here { font-size: 12px; font-weight: 600; }