/* ==========================================================================
   KOMPONEN LANJUTAN — Koperasi Kelurahan Merah Putih Latsari
   Lapisan 4: komponen interaktif & tata letak lanjutan.

   Isi:
   A. Modal                 F. Kemajuan (progress) & Tab
   B. Laci (drawer)         G. Grafik (chart container)
   C. Toast                 H. Gambar (image system)
   D. KPI (kartu angka)     I. Pencarian (global search — komponen siap pakai)
   E. Sematan (sticky CTA)  J. Fondasi Admin
                            K. Fondasi Portal Anggota
   ========================================================================== */

/* ==========================================================================
   A. MODAL
   ========================================================================== */
.modal{
  position: fixed;
  inset: 0;
  z-index: var(--z-lapisan);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal.terbuka{ display: flex; }
.modal__tirai{
  position: absolute;
  inset: 0;
  background: var(--tirai);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.modal__kotak{
  position: relative;
  width: min(var(--modal-lebar), 100%);
  max-height: calc(100vh - 2 * var(--sp-5));
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}
.modal__kepala{
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.modal__judul{ margin: 0; font-size: var(--fs-400); }
.modal__tutup{
  flex: none;
  width: var(--sentuh-min); height: var(--sentuh-min);
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.modal__tutup:hover{ background: var(--color-primary-soft); border-color: var(--color-primary); }
.modal__kaki{
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-end;
  margin-top: var(--sp-6);
}

/* ==========================================================================
   B. LACI (DRAWER)
   ========================================================================== */
.laci{
  position: fixed;
  inset: 0;
  z-index: var(--z-laci);
  display: none;
}
.laci.terbuka{ display: block; }
.laci__tirai{
  position: absolute;
  inset: 0;
  background: var(--tirai);
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.laci__isi{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(var(--laci-lebar), 88vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--sp-5);
  gap: var(--sp-4);
}
.laci--kiri .laci__isi{ right: auto; left: 0; }
.laci__kepala{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.laci__judul{ margin: 0; font-size: var(--fs-400); }

/* ==========================================================================
   C. TOAST
   ========================================================================== */
.toast{
  position: fixed;
  z-index: var(--z-lapisan);
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 2 * var(--sp-5)));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast__item{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-200);
  line-height: var(--lh-kecil);
  pointer-events: auto;
  animation: ds-naik .24s ease;
}
.toast__item p{ margin: 0; }
.toast__tutup{
  margin-left: auto;
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.toast__tutup:hover{ background: var(--color-background-alt); }
.toast__item--sukses{ border-left-color: var(--color-success); background: var(--color-success-soft); }
.toast__item--galat{ border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.toast__item--peringatan{ border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.toast__item--info{ border-left-color: var(--color-info); background: var(--color-info-soft); }
@keyframes ds-naik{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

/* ==========================================================================
   D. KPI (kartu angka untuk admin/transparansi)
   ========================================================================== */
.kpi-kisi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--gap-kartu);
}
.kpi{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.kpi__label{
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kpi__angka{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.kpi__catatan{ font-size: var(--fs-100); color: var(--color-text-muted); }
.kpi__delta{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-100);
  font-weight: 700;
}
.kpi__delta--naik{ color: var(--color-secondary-dark); }
.kpi__delta--turun{ color: var(--color-primary-dark); }
.kpi__delta--tetap{ color: var(--color-text-muted); }
.kpi--utama{ border-top: 3px solid var(--color-primary); }
.kpi--hijau{ border-top: 3px solid var(--color-secondary); }

/* ==========================================================================
   E. SEMATAN (STICKY CTA) — tombol WhatsApp melayang di layar kecil
   ========================================================================== */
.sematan{
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-lengket);
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-text-invert);
  font-weight: 700;
  font-size: var(--fs-200);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.sematan:hover{ background: var(--color-secondary-dark); color: var(--color-text-invert); text-decoration: none; }
.sematan__ikon{ font-size: 1.15rem; line-height: 1; }
@media (max-width: 900px){
  .sematan{ display: inline-flex; }
  /* Ruang aman di kaki halaman supaya tombol tidak menutupi isi terakhir */
  body{ padding-bottom: 76px; }
}

/* ==========================================================================
   F. KEMAJUAN (PROGRESS) & TAB
   ========================================================================== */
.kemajuan{
  height: 10px;
  background: var(--color-background-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.kemajuan__isi{
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width var(--transisi-sedang);
}
.kemajuan--hijau .kemajuan__isi{ background: var(--color-secondary); }
.kemajuan__meta{
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-100);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}

.tab{
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-5);
}
.tab a{
  display: inline-flex; align-items: center;
  min-height: var(--sentuh-min);
  padding: 0 var(--sp-4);
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--fs-200);
  text-decoration: none;
}
.tab a:hover{ color: var(--color-primary); text-decoration: none; }
.tab a.aktif{ color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ==========================================================================
   G. GRAFIK (CHART CONTAINER)
   Setiap grafik menjawab satu pertanyaan; judul + sumber data wajib ada.
   ========================================================================== */
.grafik-kisi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--gap-kartu);
}
.grafik{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--pad-kartu-kecil);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.grafik__judul{ margin: 0; font-size: var(--fs-300); }
.grafik__tanya{ margin: 0; font-size: var(--fs-200); color: var(--color-text-muted); }
.grafik__kanvas{
  position: relative;
  min-height: var(--grafik-tinggi);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
}
.grafik__legenda{
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-100);
  color: var(--color-text-muted);
}
.grafik__legenda span{ display: inline-flex; align-items: center; gap: 6px; }
.grafik__tanda{
  width: 12px; height: 12px; border-radius: var(--radius-xs); background: currentColor;
}
.grafik__tanda--hijau{ color: var(--color-secondary); }
.grafik__tanda--merah{ color: var(--color-primary); }
.grafik__tanda--emas{ color: var(--color-accent); }
.grafik__tanda--info{ color: var(--color-info); }
.grafik__sumber{
  font-size: var(--fs-100);
  color: var(--color-text-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--sp-3);
  margin: 0;
}

/* Diagram batang sederhana berbasis CSS (tanpa pustaka grafik) */
.diagram-batang{ display: flex; flex-direction: column; gap: var(--sp-3); }
.diagram-batang__baris{ display: grid; gap: var(--sp-2); }
.diagram-batang__label{
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-200);
}
.diagram-batang__nilai{ font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.diagram-batang__jalur{
  display: flex; align-items: center; gap: 2px;
  height: var(--grafik-batang);
}
.diagram-batang__bagian{ height: 100%; border-radius: var(--radius-xs); min-width: 2px; }
.diagram-batang__bagian--hijau{ background: var(--color-secondary); }
.diagram-batang__bagian--merah{ background: var(--color-primary); }
.diagram-batang__bagian--emas{ background: var(--color-accent); }
.diagram-batang__bagian--info{ background: var(--color-info); }

/* ==========================================================================
   H. GAMBAR (IMAGE SYSTEM)
   Setiap gambar: rasio tetap + dimensi eksplisit → tidak ada pergeseran tata letak.
   ========================================================================== */
.rasio{ width: 100%; height: auto; display: block; object-fit: cover; background: var(--color-background-alt); }
.rasio-16-9{ aspect-ratio: 16 / 9; }
.rasio-4-3{ aspect-ratio: 4 / 3; }
.rasio-3-2{ aspect-ratio: 3 / 2; }
.rasio-1-1{ aspect-ratio: 1 / 1; }
.rasio-3-4{ aspect-ratio: 3 / 4; }
.rasio-2-1{ aspect-ratio: 2 / 1; }
.rasio--bundar{ border-radius: 50%; }

/* ==========================================================================
   I. PENCARIAN (GLOBAL SEARCH) — komponen siap pakai
   Dipakai di kepala halaman (desktop) dan di dalam laci menu (seluler).
   ========================================================================== */
.cari{ position: relative; }
.cari__medan{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 4px 2px var(--sp-4);
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.cari__medan:focus-within{
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-fokus-hijau);
}
.cari__ikon{ color: var(--color-text-muted); flex: none; font-size: 1rem; }
.cari__isian{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-200);
  color: var(--color-text);
  padding: 8px 0;
  min-height: 40px;
}
.cari__isian:focus{ outline: none; }
.cari__tombol{ flex: none; }
.cari__petunjuk{
  font-size: var(--fs-100);
  color: var(--color-text-muted);
  margin: var(--sp-2) 0 0;
}
.cari__panel{
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0; right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3);
  z-index: var(--z-lengket);
}
.cari__panel[hidden]{ display: none; }
.cari__pintasan{
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
}
.cari__pintasan a{
  display: inline-flex; align-items: center;
  min-height: 34px;
  padding: 4px var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}
.cari__pintasan a:hover{ border-color: var(--color-primary); color: var(--color-primary); }

/* Hasil pencarian */
.cari-hasil{ display: flex; flex-direction: column; gap: var(--sp-3); }
.cari-hasil__butir{
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}
.cari-hasil__butir:hover{ border-color: var(--color-primary); text-decoration: none; }
.cari-hasil__kategori{
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.cari-hasil__judul{ display: block; margin: 4px 0; font-size: var(--fs-300); font-weight: 700; }
.cari-hasil__teks{ margin: 0; font-size: var(--fs-200); color: var(--color-text-muted); max-width: var(--lebar-kartu); }
.cari-hasil__meta{ font-size: var(--fs-100); color: var(--color-text-muted); }
mark{
  background: var(--color-accent-soft);
  color: inherit;
  padding: 0 2px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   J. FONDASI ADMIN
   Siap dipakai saat halaman pengurus disusun ulang. Belum diterapkan ke
   admin.php supaya tampilan yang sedang dipakai pengurus tidak berubah
   tanpa peninjauan.
   ========================================================================== */
.admin{
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--color-background);
}
.admin__sisi{
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.admin__merek{
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--color-text-invert);
  text-decoration: none;
}
.admin__merek img{ width: 40px; height: 40px; }
.admin__merek strong{ font-family: var(--font-display); font-size: var(--fs-300); }
.admin-nav{ display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.admin-nav__grup{
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgba(255,253,248,.55);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.admin-nav a{
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--sentuh-min);
  padding: 0 var(--sp-3);
  border-radius: var(--radius-md);
  color: rgba(255,253,248,.86);
  font-size: var(--fs-200);
  font-weight: 600;
  text-decoration: none;
}
.admin-nav a:hover{ background: rgba(255,253,248,.1); color: #fff; text-decoration: none; }
.admin-nav a.aktif{ background: var(--color-primary); color: #fff; }
.admin__utama{ display: flex; flex-direction: column; min-width: 0; }
.admin__atas{
  position: sticky; top: 0; z-index: var(--z-lengket);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  min-height: 64px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.admin__isi{
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}
.admin__judul{ margin: 0; font-size: var(--fs-500); }
.saring{
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.saring .medan{ min-width: 180px; flex: 1 1 180px; }
@media (max-width: 900px){
  .admin{ grid-template-columns: 1fr; }
  .admin__sisi{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
  .admin-nav{ flex-direction: row; flex-wrap: wrap; }
  .admin-nav__grup{ display: none; }
}

/* ==========================================================================
   K. FONDASI PORTAL ANGGOTA
   Komponen yang sudah disiapkan untuk tahap Portal Anggota (belum dipakai).
   ========================================================================== */
.kartu-anggota{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  color: var(--color-text-invert);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 55%, #9E3323);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 420px;
}
.kartu-anggota__kepala{ display: flex; align-items: center; gap: var(--sp-3); }
.kartu-anggota__logo{ width: 44px; height: 44px; flex: none; }
.kartu-anggota__nama{ font-family: var(--font-display); font-size: var(--fs-400); margin: 0; }
.kartu-anggota__nomor{
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  letter-spacing: .08em;
}
.kartu-anggota__kaki{
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-100);
  border-top: 1px solid rgba(255,253,248,.3);
  padding-top: var(--sp-3);
}
.kartu-anggota__status{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(255,253,248,.2);
  font-size: var(--fs-100);
  font-weight: 700;
}
.anggota-kisi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--gap-kartu);
}
.anggota-tile{
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.anggota-tile__label{
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-text-muted);
}
.anggota-tile__angka{
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.anggota-tile__catatan{ font-size: var(--fs-100); color: var(--color-text-muted); }