/* ==========================================================================
   KOMPONEN — Koperasi Kelurahan Merah Putih Latsari
   Lapisan 3: pustaka komponen resmi. Semua nilai memakai token (token.css).

   Isi:
   A. Tombol & tautan            E. Formulir
   B. Lencana & status           F. Tabel
   C. Kartu                      G. Pemberitahuan & akordeon
   D. Remah halaman (breadcrumb) H. Galeri, dokumen, langkah, halaman, keadaan kosong
   ========================================================================== */

/* ==========================================================================
   A. TOMBOL
   Setiap tombol memiliki: normal · hover · active · focus · disabled · loading
   Tinggi minimum kontrol utama 44px (--sentuh-min).
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--sentuh-min);
  padding: 10px var(--sp-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--track-tombol);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transisi-cepat), color var(--transisi-cepat),
              border-color var(--transisi-cepat), transform var(--transisi-cepat),
              box-shadow var(--transisi-cepat);
}
.btn:hover{ text-decoration: none; }
.btn:active{ transform: translateY(1px); }
.btn[disabled],
.btn.is-disabled{ opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Ukuran */
/* Sasaran sentuh (§30 PROMPT #8): 36px terlalu kecil untuk jari. Dinaikkan ke
   --sentuh-min (44px) — berlaku juga pada halaman warga yang memakai .btn--sm.
   Padding tidak diubah supaya lebar tombol tidak berubah (tata letak kepala
   halaman yang sudah diuji tidak terganggu). */
.btn--sm{ min-height: var(--sentuh-min); padding: 6px var(--sp-4); font-size: var(--fs-200); }
.btn--lg{ min-height: 52px; padding: 14px var(--sp-7); font-size: 1.0625rem; }
.btn--blok{ width: 100%; }

/* Varian */
.btn--primary{
  background: var(--color-primary); color: var(--color-text-invert);
  box-shadow: var(--shadow-tombol);
}
.btn--primary:hover{ background: var(--color-primary-dark); box-shadow: var(--shadow-tombol-hover); }

.btn--secondary{
  background: var(--color-secondary); color: var(--color-text-invert);
  box-shadow: var(--shadow-tombol-hijau);
}
.btn--secondary:hover{ background: var(--color-secondary-dark); }

.btn--outline{
  background: var(--color-surface); color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.btn--outline:hover{ background: var(--color-primary-soft); }

.btn--ghost{
  background: transparent; color: var(--color-primary-dark);
  box-shadow: none;
}
.btn--ghost:hover{ background: var(--color-primary-soft); }

.btn--danger{ background: var(--color-danger); color: var(--color-text-invert); }
.btn--danger:hover{ background: var(--color-primary-dark); }

.btn--success{ background: var(--color-success); color: var(--color-text-invert); }
.btn--success:hover{ background: var(--color-secondary-dark); }

/* Keadaan memuat */
.btn.is-loading{ color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after{
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-putar .7s linear infinite;
}
@keyframes ds-putar{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-loading::after{ animation-duration: 2s; }
}

/* --- Penyelarasan tombol lama (.tombol) dengan design system -----------------
   Tampilannya dipertahankan; yang ditambahkan hanya tinggi minimum, keadaan
   nonaktif, dan penyelarasan sudut. */
.tombol{ min-height: var(--sentuh-min); }
.tombol[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }
.tombol-kotak{ border-radius: var(--radius-sm); }

/* Tombol kecil (termasuk tombol di kepala halaman).
   Sebelumnya tinggi visualnya 32px dan area tekan diperluas lewat pseudo-element
   ::after (min-height 44px). Perluasan itu TERBUKTI TIDAK BEKERJA: uji klik
   3px di atas tepi visual tombol (lihat _scratch/uji_accessibility.js bagian C)
   tidak mengenai tombolnya sama sekali — menetapkan min-height pada pseudo-element
   ber-position:absolute TIDAK memperluas daerah yang menerima klik, dan pengguna
   ponsel hanya mendapat area 32px. Karena itu tinggi tombolnya kini benar-benar
   44px (--sentuh-min); kepala halaman tetap satu baris karena tingginya ditentukan
   logo 54px, bukan tombol ini. */
.tombol-kecil{
  min-height: var(--sentuh-min);
}

/* ==========================================================================
   A2. TAUTAN
   Tautan, tombol, dan CTA dibedakan dengan jelas.
   ========================================================================== */
.tautan{
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.tautan:hover{ text-decoration-thickness: 2px; }
.tautan-panah-lagi{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* ==========================================================================
   B. LENCANA & STATUS
   Status tidak pernah hanya dibedakan oleh warna — selalu ada teksnya.
   ========================================================================== */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--tanpa-titik::before{ display: none; }

.badge--aktif     { background: var(--color-success-soft); color: var(--color-secondary-dark); border-color: rgba(79,122,52,.24); }
.badge--buka      { background: var(--color-success-soft); color: var(--color-secondary-dark); border-color: rgba(79,122,52,.24); }
.badge--tutup     { background: #F0EBE1; color: var(--color-text-muted); border-color: var(--color-border-strong); }
.badge--bangun    { background: var(--color-info-soft); color: var(--color-info); border-color: rgba(47,100,128,.24); }
.badge--segera    { background: var(--color-accent-soft); color: #8A5F14; border-color: rgba(192,138,46,.28); }
.badge--penting   { background: var(--color-danger-soft); color: var(--color-primary-dark); border-color: rgba(179,38,30,.22); }
.badge--netral    { background: #F3EFE7; color: var(--color-text-muted); border-color: var(--color-border); }

/* ==========================================================================
   C. KARTU
   Satu bahasa visual untuk seluruh jenis kartu.
   ========================================================================== */
.kartu-ds{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--pad-kartu);
  min-width: 0;
}
.kartu-ds > *:last-child{ margin-bottom: 0; }
.kartu-ds__judul{ margin: 0; font-size: var(--fs-400); }
.kartu-ds__teks{ margin: 0; color: var(--color-text-muted); max-width: var(--lebar-kartu); }
.kartu-ds__kaki{
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
}

/* Kartu yang dapat diklik seluruhnya */
.kartu-ds--tautan{ color: inherit; text-decoration: none; transition: transform var(--transisi-sedang), box-shadow var(--transisi-sedang); }
.kartu-ds--tautan:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }

/* Foto di dalam kartu: rasio tetap supaya tata letak tidak bergeser (CLS) */
.kartu-ds__foto{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.kartu-ds__foto--4-3{ aspect-ratio: 4 / 3; }
.kartu-ds__foto--3-4{ aspect-ratio: 3 / 4; }
.kartu-ds__foto--1-1{ aspect-ratio: 1 / 1; }

/* Kartu statistik */
.stat-ds{
  display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.stat-ds__angka{
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-primary);
}
.stat-ds__label{ font-size: var(--fs-200); font-weight: 700; color: var(--color-text); }
.stat-ds__catatan{ font-size: var(--fs-100); color: var(--color-text-muted); }
.stat-ds--hijau .stat-ds__angka{ color: var(--color-secondary); }

/* ==========================================================================
   D. REMAH HALAMAN (BREADCRUMB)
   ========================================================================== */
.remah-bungkus{ padding-top: var(--sp-5); }
.remah{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
  margin: 0;
  padding: 0;
  list-style: none;
}
.remah li{ display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }
.remah li + li::before{
  content: "›";
  color: var(--color-border-strong);
  font-size: 1.1em;
  line-height: 1;
}
.remah a{ color: var(--color-text-muted); text-decoration: none; }
.remah a:hover{ color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.remah [aria-current="page"]{ color: var(--color-text); font-weight: 700; }

/* ==========================================================================
   E. FORMULIR
   Label selalu tampil (placeholder bukan pengganti label).
   ========================================================================== */
.medan{ display: flex; flex-direction: column; gap: 6px; }
.medan > label{
  font-size: .9rem;            /* sama dengan style.css — tidak diperkecil */
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--lh-kecil);
}
.medan .wajib{ color: var(--color-danger); margin-left: 2px; }
.medan .petunjuk,
.medan .bantuan{
  font-size: var(--fs-100);
  line-height: var(--lh-kecil);
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 400;
}
.medan .galat{
  display: none;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--color-danger);
  line-height: var(--lh-kecil);
}
.medan.salah .galat,
.medan .galat.tampil{ display: flex; }
.medan .berhasil{
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--color-secondary-dark);
}
.medan.salah > label{ color: var(--color-danger); }

/* Penyelarasan kontrol formulir lama (.medan input…) dengan token */
/* PROMPT #11 §24/§26 — `type="search"` ikut diselaraskan.
   Sebelumnya daftar ini TIDAK memuat input[type=search], padahal hampir semua
   kotak pencarian halaman pengurus (penyaring anggota, pengaduan, laporan,
   aktivitas, pengguna, keuangan anggota) dan kotak pencarian di bilah atas
   memakai tipe itu. Akibatnya kotak-kotak itu memakai gaya bawaan peramban:
   tinggi hanya 21px (jauh di bawah sasaran sentuh 44px) dan tanpa bingkai
   token. Ketiga tipe di bawah ini ikut diselaraskan supaya tidak ada lagi
   kontrol formulir yang "terlewat" dari pustaka komponen. */
.medan input[type=text],
.medan input[type=email],
.medan input[type=tel],
.medan input[type=date],
.medan input[type=number],
.medan input[type=password],
.medan input[type=search],
.medan input[type=url],
.medan input[type=time],
.medan input[type=datetime-local],
.medan select,
.medan textarea{
  border-radius: var(--radius-md);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  min-height: var(--sentuh-min);
}
.medan textarea{ min-height: 120px; padding: var(--sp-3) 14px; }
.medan input:focus,
.medan select:focus,
.medan textarea:focus{
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-fokus-hijau);
  outline: none;
}
.medan input.salah,
.medan select.salah,
.medan textarea.salah{
  border-color: var(--color-danger);
  background: #FFF7F6;
}
.medan input.salah:focus,
.medan select.salah:focus,
.medan textarea.salah:focus{ box-shadow: var(--shadow-fokus); }

/* Kotak centang & pilihan unit */
.medan .centang{
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: var(--sentuh-min);
  padding: var(--sp-1) 0;
}
.medan .centang input{ width: 20px; height: 20px; margin-top: 2px; flex: none; }

/* ==========================================================================
   F. TABEL
   Desktop: tabel biasa. Mobile: kartu (dipakai tabel RT/RW) atau gulir terkendali.
   ========================================================================== */
.tabel-ds{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-200);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tabel-ds caption{
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}
.tabel-ds th,
.tabel-ds td{
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.tabel-ds thead th{
  background: var(--color-background-alt);
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tabel-ds tbody tr:last-child td{ border-bottom: 0; }
.tabel-ds tbody tr:hover{ background: var(--color-surface-muted); }
.tabel-ds--angka td:not(:first-child),
.tabel-ds--angka th:not(:first-child){ text-align: right; font-variant-numeric: tabular-nums; }

/* Pembungkus gulir terkendali — memakai kelas `.tabel-gulir` yang SUDAH ADA di
   style.css (dipakai tabel Ketua RT/RW). Tidak didefinisikan ulang di sini
   supaya tidak menimpa aturan kartu di layar kecil. */

/* ==========================================================================
   G. PEMBERITAHUAN & AKORDEON
   ========================================================================== */
.notis{
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-200);
  line-height: var(--lh-kecil);
}
.notis p{ margin: 0; max-width: var(--lebar-kartu); }
.notis__ikon{ flex: none; font-size: 1.1rem; line-height: 1.2; }
.notis--sukses{ background: var(--color-success-soft); border-color: rgba(79,122,52,.3); border-left-color: var(--color-secondary); }
.notis--galat { background: var(--color-danger-soft); border-color: rgba(179,38,30,.28); border-left-color: var(--color-danger); }
.notis--peringatan{ background: var(--color-warning-soft); border-color: rgba(154,101,17,.3); border-left-color: var(--color-warning); }
.notis--info  { background: var(--color-info-soft); border-color: rgba(47,100,128,.28); border-left-color: var(--color-info); }

.akordeon{ display: flex; flex-direction: column; gap: var(--sp-3); }
.akordeon__butir{
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.akordeon__butir summary{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--sentuh-min);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  font-size: var(--fs-300);
  cursor: pointer;
  list-style: none;
}
.akordeon__butir summary::-webkit-details-marker{ display: none; }
.akordeon__butir summary::after{
  content: "▾";
  flex: none;
  color: var(--color-primary);
  transition: transform var(--transisi-cepat);
}
.akordeon__butir[open] summary::after{ transform: rotate(180deg); }
.akordeon__isi{ padding: 0 var(--sp-5) var(--sp-4); }
.akordeon__isi p{ max-width: var(--lebar-baca); color: var(--color-text-muted); }

/* ==========================================================================
   H. GALERI, DOKUMEN, LANGKAH, HALAMAN, KEADAAN KOSONG
   ========================================================================== */

/* Galeri album */
.album-kisi{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: var(--gap-kartu);
}
.album-butir{
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.album-butir img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.album-butir__ket{
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-200);
  font-weight: 600;
}
.album-tahun{
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Kartu dokumen */
.dok-kartu{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.dok-kartu__ikon{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-100);
  letter-spacing: .02em;
}
.dok-kartu__judul{ margin: 0; font-size: var(--fs-300); }
.dok-kartu__meta{
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-100);
  color: var(--color-text-muted);
  margin-top: 3px;
}
.dok-kartu__aksi{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Langkah berjalan (formulir / program)
   CATATAN: kelas lama `.langkah` + `.langkah-item` di style.css sudah dipakai
   untuk bagian "Tiga langkah" di beranda (grid 3 kolom). Karena itu komponen
   baru ini memakai nama `.langkah-ds` supaya tidak saling menimpa. */
.langkah-ds{
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  list-style: none; padding: 0; margin: 0 0 var(--sp-6);
  counter-reset: langkah;
}
.langkah-ds li{
  display: flex; align-items: center; gap: var(--sp-3);
  flex: 1 1 200px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
}
.langkah-ds li::before{
  counter-increment: langkah;
  content: counter(langkah);
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-background-alt);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--fs-100);
}
.langkah-ds li.aktif{
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.langkah-ds li.aktif::before{ background: var(--color-primary); color: #fff; }
.langkah-ds li.selesai::before{ background: var(--color-secondary); color: #fff; }

/* Navigasi halaman (penomoran) */
.halaman-nav{
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center; justify-content: center;
  margin-top: var(--sp-7);
}
.halaman-nav a,
.halaman-nav span{
  min-width: var(--sentuh-min); min-height: var(--sentuh-min);
  padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-weight: 700;
  font-size: var(--fs-200);
  text-decoration: none;
}
.halaman-nav a:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.halaman-nav .kini{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Keadaan kosong */
.kosong{
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.kosong__ikon{ font-size: 1.9rem; display: block; margin-bottom: var(--sp-3); }
.kosong p{ margin: 0 auto; max-width: var(--lebar-kartu); }

/* Kerangka muat (skeleton) */
.rangka{
  background: linear-gradient(90deg, var(--color-background-alt) 25%, #EFE6D5 37%, var(--color-background-alt) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-md);
  animation: ds-rangka 1.4s ease infinite;
}
@keyframes ds-rangka{ 0%{ background-position: 100% 0; } 100%{ background-position: 0 0; } }
@media (prefers-reduced-motion: reduce){ .rangka{ animation: none; } }

/* ==========================================================================
   PENYELARASAN KOMPONEN LAMA KE SKALA SUDUT & JARAK
   (hanya sudut/bayangan — warna, tata letak, dan karakter tetap)
   ========================================================================== */
.kartu{ border-radius: var(--radius-lg); }
.info-item{ border-radius: var(--radius-lg); }
.galeri-item{ border-radius: var(--radius-lg); }
.berita-kartu{ border-radius: var(--radius-lg); }
/* Catatan: jarak `.grid` (22px di style.css) sengaja TIDAK diubah — sudah sesuai
   tangga jarak dan sudah diuji di seluruh halaman. */

/* Judul kartu yang dinaikkan tingkatnya demi urutan judul yang runut
   (h3 → h2 pada kartu pilar program & kartu ringkas unit usaha).
   Ukurannya tetap seukuran judul kartu. */
.pilar h2,
.kartu-unit h2{ font-size: var(--fs-400); }

/* Kartu berita: judulnya kini <h2> (dulu <h3>) — aturan lama di style.css
   memakai selektor `h3`, jadi padanannya ditulis ulang di sini agar
   tampilannya tetap sama persis. */
.kartu-berita h2{ margin: .15em 0 .45em; font-size: 1.14rem; }
.kartu-berita h2 a{ color: var(--color-text); }
.kartu-berita h2 a:hover{ color: var(--color-primary); text-decoration: none; }

@media (max-width:1080px){
  :root{ --pad-kartu: 22px; }
}
@media (max-width:760px){
  :root{ --gap-kartu: 16px; --pad-kartu: 20px; --pad-halaman: 18px; }
  .dok-kartu{ grid-template-columns: auto minmax(0, 1fr); }
  .dok-kartu__aksi{ grid-column: 1 / -1; }
}

/* Daftar tautan sederhana (peta situs, daftar dokumen) */
.daftar-tautan{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.daftar-tautan li{
  margin: 0;
  padding: 4px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--fs-200);
}
.daftar-tautan li:last-child{ border-bottom: 0; }
.daftar-tautan a{ display: inline-block; padding: 4px 0; }

/* ==========================================================================
   PENYARING BENTUK CHIP (PROMPT #11 §26)
   Komponen ini dipakai halaman publik (laporan keuangan) DAN portal
   (penyaring kategori notifikasi). Sebelumnya aturannya hanya ada di
   laporan.css — berkas yang TIDAK dimuat di portal — sehingga di portal chip
   tampil sebagai tautan polos setinggi 21px (di bawah sasaran sentuh 44px).
   Aturannya kini tinggal di pustaka komponen yang dimuat semua halaman.
   ========================================================================== */
.lap-chip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.lap-chip a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sentuh-min, 44px);
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface-soft);
  font-size: var(--fs-100);
  font-weight: 600;
  text-decoration: none;
}
.lap-chip a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); text-decoration: none; }
.lap-chip a.aktif { background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); border-color: transparent; color: #fff; }