/* ═══════════════════════════════════════════════════════════════════════════
   Katalog Publik — satu kolom penuh, tanpa panel samping.

   Portal siswa memakai grid 1fr 316px karena panel kanannya memampang pinjaman
   pemiliknya. Layar ini tidak punya pemilik: yang dibaca hanya koleksi, jadi
   ruang layarnya diberikan seluruhnya kepada kartu buku. Selebihnya memakai
   komponen bersama (.buku, .chip, .badge, .paginasi) supaya katalog yang
   dilihat orang tua terasa satu keluarga dengan yang dilihat anaknya.
   ═══════════════════════════════════════════════════════════════════════════ */

.publik-header {
  min-height: var(--header-siswa-h);
  background: var(--forest);
  color: var(--dark-text-2);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 30px;
}

.publik-header__logo { width: 38px; height: 38px; object-fit: contain; flex: none; }
.publik-header__nama { font-size: 17px; font-weight: 600; letter-spacing: var(--tracking-judul); }
.publik-header__spacer { flex: 1; }

.publik-header__aksi,
.publik-header__masuk {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: var(--r-input);
  font-size: 12.5px;
  transition: background 0.14s;
}

.publik-header__aksi {
  border: 1px solid var(--forest-line);
  background: var(--forest-btn);
  color: var(--dark-text-3);
}

.publik-header__aksi:hover { background: var(--forest-active); }

/* Tombol masuk memakai emas, bukan hijau gelap seperti aksi lain: inilah satu
   jalan keluar dari layar ini, dan pengunjung yang belum pernah membukanya
   harus menemukannya tanpa mencari. */
.publik-header__masuk {
  background: var(--gold);
  color: var(--forest);
  font-weight: 600;
}

.publik-header__masuk:hover { background: #D3B37A; }

.publik-unit { display: flex; gap: 6px; }

.publik-unit__opsi {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 13px;
  border: 1px solid var(--forest-line);
  border-radius: var(--r-pill);
  background: var(--forest-btn);
  color: var(--dark-muted);
  font-size: 11.5px;
  transition: background 0.14s;
}

.publik-unit__opsi:hover { background: var(--forest-active); }

.publik-unit__opsi--aktif {
  background: var(--forest-active);
  border-color: var(--gold);
  color: var(--dark-text);
  font-weight: 500;
}

.publik-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 30px 46px;
}

.publik-hero {
  background: var(--forest);
  color: var(--dark-text-3);
  border-radius: var(--r-kartu);
  padding: 26px var(--pad-kartu-lg);
  margin-bottom: 24px;
}

.publik-hero__judul {
  font-size: 29px; font-weight: 600;
  letter-spacing: var(--tracking-judul);
  color: var(--dark-text);
  margin-top: 6px;
}

.publik-hero__sub {
  font-size: 13px; line-height: 1.6; color: var(--dark-muted);
  max-width: 60ch; margin-top: 9px;
}

.publik-hero__masuk { margin-top: 18px; }

.publik-cari { position: relative; margin-bottom: 18px; }

.publik-cari input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-kartu);
  background: var(--bg-surface);
  font-size: 14px;
  transition: border-color 0.14s, box-shadow 0.14s;
}

.publik-cari input:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 107, 59, 0.09);
}

.publik-cari__ikon {
  position: absolute; left: 16px; top: 50%; margin-top: -9px;
  color: var(--ink-faint); pointer-events: none;
}

.publik-jumlah { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }

.publik-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--gap-kartu);
}

.publik-kaki {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px 40px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ═══ Modal detail buku ═══════════════════════════════════════════════════ */

.modal--publik { width: 560px; max-width: calc(100vw - 32px); }

.modal__judul-publik {
  font-size: 24px; font-weight: 600;
  letter-spacing: var(--tracking-judul); line-height: 1.2;
}

/* ═══ Responsif ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .publik-header { padding: 12px 18px; flex-wrap: wrap; gap: 12px; }
  .publik-body { padding: 22px 18px 36px; }
  .publik-kaki { padding: 0 18px 32px; }
  .publik-hero__judul { font-size: 24px; }
}

@media (max-width: 560px) {
  .publik-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .publik-header__spacer { display: none; }
}