/* ==== TEMA GELAP (lapisan aditif, base tidak diubah) ==== */
html[data-theme="dark"]{
  color-scheme:dark;
  --shadow-soft:0 1px 2px rgba(0,0,0,.55), 0 8px 20px -12px rgba(0,0,0,.75);
  --pc-surface:#182420; --pc-surface-2:#16211D; --pc-page:#0E1714;
  --pc-text:#E9F2EB; --pc-muted:#9BAFA3; --pc-line:#26332C;
}
  html[data-theme="dark"] body{ background:#0E1714; color:#E9F2EB; }
  html[data-theme="dark"] .brand-sub{ color:#7E9387; }
  html[data-theme="dark"] .nav-label{ color:#7E9387; }
  html[data-theme="dark"] .nav-badge{ color:#E4F5EB; }
  html[data-theme="dark"] .avatar{ color:#E4F5EB; }
  html[data-theme="dark"] .user-chip .role{ color:#7E9387; }
  html[data-theme="dark"] .eyebrow{ color:#9BAFA3; }
  html[data-theme="dark"] .page-title{ color:#E4F5EB; }
  html[data-theme="dark"] .bell{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .bell svg{ color:#C4D4C9; }
  html[data-theme="dark"] .date-chip{ color:#9BAFA3; }
  html[data-theme="dark"] .stat-card{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .stat-card .n{ color:#E4F5EB; }
  html[data-theme="dark"] .stat-card .l{ color:#9BAFA3; }
  html[data-theme="dark"] .trend.up{ color:#8FD6A6; background:#16241E; }
  html[data-theme="dark"] .trend.warn{ color:#F3B2A6; background:#3A1F1B; }
  html[data-theme="dark"] .site-nav .site-sub{ color:#79E3AE; }
  html[data-theme="dark"] .hero-tag{ color:#79E3AE; }
  html[data-theme="dark"] .search-bar{ background:#182420; }
  html[data-theme="dark"] .search-bar input{ color:#E9F2EB; }
  html[data-theme="dark"] .search-bar input::placeholder{ color:#7E9387; }
  html[data-theme="dark"] .search-bar button{ color:#E4F5EB; }
  html[data-theme="dark"] .tab{ background:#182420; border:1px solid #26332C; color:#C4D4C9; }
  html[data-theme="dark"] .section-head .eyebrow{ color:#8BEDBE; }
  html[data-theme="dark"] .section-head h2{ color:#E4F5EB; }
  html[data-theme="dark"] .section-head .sub{ color:#9BAFA3; }
  html[data-theme="dark"] .see-all{ color:#CDE8DB; }
  html[data-theme="dark"] .book-card{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .book-title{ color:#E9F2EB; }
  html[data-theme="dark"] .book-author{ color:#9BAFA3; }
  html[data-theme="dark"] .status-tersedia{ background:#16241E; color:#8FD6A6; }
  html[data-theme="dark"] .status-dipinjam{ background:#17231F; color:#8ED8CB; }
  html[data-theme="dark"] .cover-novel{ background:#24321C; }
  html[data-theme="dark"] .cover-sains{ background:#1B3A29; }
  html[data-theme="dark"] .cover-pengembangan{ background:#173A33; }
  html[data-theme="dark"] .cover-sejarah{ background:#1B342B; }
  html[data-theme="dark"] .cover-biografi{ background:#23361A; }
  html[data-theme="dark"] .panel{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] thead th{ color:#9BAFA3; border-bottom:1px solid #26332C; background:#16211D; }
  html[data-theme="dark"] tbody td{ color:#C4D4C9; border-bottom:1px solid #26332C; }
  html[data-theme="dark"] tbody tr:hover{ background:#0E1714; }
  html[data-theme="dark"] .cell-strong{ color:#E9F2EB; }
  html[data-theme="dark"] .cell-muted{ color:#9BAFA3; }
  html[data-theme="dark"] .badge-dipinjam{ background:#17231F; color:#8ED8CB; }
  html[data-theme="dark"] .badge-dikembalikan{ background:#16241E; color:#8FD6A6; }
  html[data-theme="dark"] .badge-terlambat{ background:#3A1F1B; color:#F3B2A6; }
  html[data-theme="dark"] .icon-btn-text{ color:#CDE8DB; background:#16211D; border:1px solid #26332C; }
  html[data-theme="dark"] .icon-btn-text:disabled:hover{ background:#16211D; color:#CDE8DB; }
  html[data-theme="dark"] .chart-card{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .chart-card h3{ color:#E4F5EB; }
  html[data-theme="dark"] .bar-label{ color:#9BAFA3; }
  html[data-theme="dark"] .bar-value{ color:#E9F2EB; }
  html[data-theme="dark"] .legend .val{ color:#E9F2EB; }
  html[data-theme="dark"] .empty-state{ color:#9BAFA3; }
  html[data-theme="dark"] .select-mini{ color:#C4D4C9; background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .icon-btn-ghost{ background:#182420; color:#D9EEE2; border-color:#26332C; }
  html[data-theme="dark"] .icon-btn-ghost:hover{ background:#16211D; color:#E4F5EB; }
  html[data-theme="dark"] .chip-soft{ background:#16211D; color:#C4D4C9; border:1px solid #26332C; }
  html[data-theme="dark"] .modal{ background:#182420; }
  html[data-theme="dark"] .modal h3{ color:#E4F5EB; }
  html[data-theme="dark"] .modal-sub{ color:#9BAFA3; }
  html[data-theme="dark"] .field label{ color:#9BAFA3; }
  html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea{ color:#E9F2EB; background:#0E1714; border:1px solid #26332C; }
  html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus{ background:#182420; }
  html[data-theme="dark"] .pwd-toggle{ color:#9BAFA3; }
  html[data-theme="dark"] .pwd-toggle:hover{ background:#16211D; color:#CDE8DB; }
  html[data-theme="dark"] .login-error{ color:#F3B2A6; background:#3A1F1B; }
  html[data-theme="dark"] .detail-sub{ color:#9BAFA3; }
  html[data-theme="dark"] .detail-meta{ color:#C4D4C9; }
  html[data-theme="dark"] .detail-meta .row{ border-bottom:1px solid #26332C; }
  html[data-theme="dark"] .detail-meta .k{ color:#9BAFA3; }
  html[data-theme="dark"] .detail-desc{ color:#C4D4C9; }
  html[data-theme="dark"] .menu-btn{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .menu-btn svg{ color:#C4D4C9; }
  html[data-theme="dark"] .rec-info{ background:linear-gradient(180deg,#182420,#182420); border:1px solid #26332C; }
  html[data-theme="dark"] .rec-info-badge{ color:#E4F5EB; }
  html[data-theme="dark"] .rec-info-title{ color:#E4F5EB; }
  html[data-theme="dark"] .rec-info-text{ color:#9BAFA3; }
  html[data-theme="dark"] .rec-info-text b{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-ctl label{ color:#9BAFA3; }
  html[data-theme="dark"] .rec-profile{ background:#182420; border:1px solid #26332C; }
  html[data-theme="dark"] .rec-prof-label{ color:#D9EEE2; }
  html[data-theme="dark"] .rec-chip{ color:#CDE8DB; background:#16211D; border:1px solid #26332C; }
  html[data-theme="dark"] .rec-chip.is-tema{ background:#16241E; border-color:#1B2A24; }
  html[data-theme="dark"] .rec-note{ color:#9BAFA3; }
  html[data-theme="dark"] .rec-score{ color:#E4F5EB; }
  html[data-theme="dark"] .rec-bar{ background:#16211D; }
  html[data-theme="dark"] .rec-reason{ color:#9BAFA3; }
  html[data-theme="dark"] .rec-reason b{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-actions .icon-btn-text{ border:1px solid #26332C; background:#182420; }
  html[data-theme="dark"] .rec-actions .icon-btn-text:hover{ background:#16211D; }
  html[data-theme="dark"] .rec-strip-head{ background:linear-gradient(135deg,#182420,#182420 60%); border:1px solid #26332C; }
  html[data-theme="dark"] .rec-eyebrow-live{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-pin-badge{ color:#0E2A20; background:rgba(255,255,255,.94); box-shadow:0 1px 3px rgba(0,0,0,.35); }
  html[data-theme="dark"] #katalog-rec-toggle:hover{ background:#16211D; color:#E4F5EB; }
  html[data-theme="dark"] .rec-how h3{ color:#E4F5EB; }
  html[data-theme="dark"] .rec-how li{ color:#C4D4C9; }
  html[data-theme="dark"] .rec-how li b{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-pipe span{ color:#CDE8DB; background:#16211D; border:1px solid #26332C; }
  html[data-theme="dark"] .rec-term{ background:#16241E; border:1px solid #1B2A24; }
  html[data-theme="dark"] .pc-hbadge.due-soon{ background:#3A2E17; }
  html[data-theme="dark"] .pc-hbadge.overdue{ background:#3A1F1B; color:#F3B2A6; }
  html[data-theme="dark"] .pc-denda{ color:#F3B2A6; }
  html[data-theme="dark"] .pc-summary{ color:#F3B2A6; background:#3A1F1B; }
  html[data-theme="dark"] body{background:#0E1714;color:#E9F2EB;}
  html[data-theme="dark"] ::placeholder{color:#7E9387;opacity:1;}
  html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#182420;color:#E9F2EB;border-color:#2A3831;}
  html[data-theme="dark"] option{background:#182420;color:#E9F2EB;}
  html[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px;}
  html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0F1917;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2E3B34;border-radius:99px;border:2px solid #0F1917;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#3A4A41;}
  html[data-theme="dark"] ::selection{background:#2E6B4F;color:#EFFBF4;}
  html[data-theme="dark"] img,html[data-theme="dark"] svg{color-scheme:normal;}
  /* tombol tema */
  .pc-theme-btn{width:38px;height:38px;flex:0 0 auto;border-radius:var(--radius-pill);border:1px solid var(--line);
    background:var(--white);color:var(--navy-900);display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;}
  .pc-theme-btn:hover{background:var(--cream-100);transform:translateY(-1px);}
  .pc-theme-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}
  .pc-theme-btn svg{width:18px;height:18px;display:block;}
  html[data-theme="dark"] .pc-theme-btn{background:#182420;border-color:#2A3831;color:#79E3AE;}
  html[data-theme="dark"] .pc-theme-btn:hover{background:#1E2A25;}
  html.pc-theme-anim *{transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease !important;}
  @media print{ .pc-theme-btn{display:none !important;} }

/* ================================================================
   LAPISAN ANIMASI TAMBAHAN (aditif) — prefix "pc-".
   Hanya menganimasikan transform & opacity (GPU-friendly),
   tidak mengubah tata letak, markup, maupun JS base.
   Memakai ulang keyframes yang sudah ada (gskPulse, gskFadeUp).
   ================================================================ */
@keyframes pcShake{
  0%,100%{ transform:translateX(0); }
  20%   { transform:translateX(-6px); }
  40%   { transform:translateX(6px); }
  60%   { transform:translateX(-4px); }
  80%   { transform:translateX(4px); }
}
@keyframes pcModalIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to  { opacity:1; transform:none; }
}
@keyframes pcToastIn{
  from{ opacity:0; transform:translateX(24px); }
  to  { opacity:1; transform:none; }
}
@keyframes pcToastOut{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform:translateX(24px); }
}

/* modal masuk halus — murni CSS, dipicu saat kelas .hidden dilepas */
.modal-backdrop:not(.hidden) .modal{ animation:pcModalIn .32s cubic-bezier(.22,1,.36,1) both; }

/* getar halus saat login petugas salah (dipicu JS, hanya sekali) */
.modal.pc-shake{ animation:pcShake .42s cubic-bezier(.36,.07,.19,.97) both; }

/* notifikasi masuk dari kanan; keluar dikelola oleh JS toast() */
.toast{ animation:pcToastIn .3s cubic-bezier(.22,1,.36,1) both; }
.toast.pc-out{ animation:pcToastOut .22s ease both; }

/* denyut hanya pada tabel peminjaman utama, agar tidak puluhan elemen berdenyut */
#page-peminjaman .pc-hbadge.overdue{ animation:gskPulse 2.4s ease-in-out infinite; }

/* ---------- sampul asli buku (aditif): ikon hanya disembunyikan bila gambar berhasil ada ---------- */
.book-cover img.pc-cover-img, .detail-cover img.pc-cover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1;
}
.book-cover > .cat-chip, .detail-cover > .cat-chip{ position:relative; z-index:2; }

/* ---------- kilau (sheen) DIMATIKAN ---------- */
.book-grid.mi-sheen .book-card .book-cover::after{ display:none; }

/* pop-up TIPIS: memakai transisi, bukan animasi.
   Karena tidak ada keyframes, tidak ada gerakan yang diputar ulang
   saat kursor berpindah dari satu kartu ke kartu lain. */
.book-grid .book-card{ position:relative; }
.book-grid .book-card:hover,
.book-grid .book-card:focus-visible{
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 8px 18px rgba(14,42,32,.16);
  border-color: var(--gold-500);
  z-index: 5;
}

.detail-cover{ position:relative; }

/* ---------- tampilan detail: sampul UTUH, tidak dipotong ---------- */
.detail-cover.pc-has-img{
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  overflow: hidden;
  padding: 14px;
  position: relative;
  isolation: isolate;
  background-image: var(--pc-cover-url);
  background-size: cover;
  background-position: center;
}
/* latar kabur dari sampul yang sama, mengisi ruang sisa */
.detail-cover.pc-has-img::before{
  content: '';
  position: absolute;
  inset: -28px;
  background-image: var(--pc-cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.2) brightness(.68);
  transform: scale(1.1);
  z-index: 0;
}
.detail-cover.pc-has-img img.pc-cover-img{
  position: static;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;              /* <-- inti perbaikan: seluruh sampul terlihat */
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.5));
}
.detail-cover.pc-has-img > .cat-chip{ justify-content: flex-start; }

/* state kosong muncul lembut */
#katalog-empty, #rec-empty{ animation:gskFadeUp .38s ease-out both; }

/* umpan balik tekan (tidak menimpa transition yang sudah ada) */
.icon-btn:active, .role-option:active, .rec-chip:active{ transform:scale(.96); }

/* kill-switch aksesibilitas — sejalan dengan lapisan mi- */
@media (prefers-reduced-motion: reduce){
  .modal-backdrop:not(.hidden) .modal,
  .modal.pc-shake,
  .toast, .toast.pc-out,
  #page-peminjaman .pc-hbadge.overdue,
  #katalog-empty, #rec-empty{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .icon-btn:active, .role-option:active, .rec-chip:active{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  .book-grid .book-card:hover, .book-grid .book-card:focus-visible{ transform:none !important; }
}