:root{
  --paper-light:#FFFFFF;
  --kraft:#EAF1FB;
  --kraft-dark:#CFE0F7;
  --shelf-green:#1a2f5e;
  --shelf-green-dark:#0f1f40;
  --ink-navy:#15315C;
  --stamp-red:#E8741A;
  --stamp-red-dark:#C4600F;
  --gold-thread:#F2A93B;

  --font-display:'Special Elite', monospace;
  --font-body:'Lora', serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-card:2px;
  --shadow-card:0 2px 0 rgba(21,49,92,.08), 0 10px 20px -12px rgba(21,49,92,.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--kraft);
  color:var(--ink-navy);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- utility ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stamp-red);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:13px 24px;
  border-radius:1px;
  border:1.5px solid var(--ink-navy);
  background:transparent;
  color:var(--ink-navy);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{transform:translate(-1px,-1px);}
.btn-primary{
  background:var(--stamp-red);
  border-color:var(--stamp-red);
  color:var(--paper-light);
}
.btn-primary:hover{background:var(--stamp-red-dark);border-color:var(--stamp-red-dark);}
.btn-dark{
  background:var(--ink-navy);
  border-color:var(--ink-navy);
  color:var(--paper-light);
}
.btn-dark:hover{background:#0E2240;}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:9px 16px;font-size:.74rem;}

/* perforated divider, like a ticket stub edge */
.perforated{
  position:relative;
  border-top:2px dashed rgba(21,49,92,.25);
}

/* ============== NAVBAR ============== */
.navbar{
  background:var(--paper-light);
  border-bottom:2px dashed rgba(21,49,92,.2);
  position:sticky;
  top:0;
  z-index:50;
}
.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:.01em;
  color:var(--ink-navy);
}
.brand-logo-img{
  width:42px;height:42px;
  object-fit:contain;
  border-radius:0;
  display:block;
  flex-shrink:0;
}
.brand small{
  display:block;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stamp-red);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  flex:1;
  justify-content:center;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
  color:var(--ink-navy);
}
.nav-links a.active,.nav-links a:hover{color:var(--stamp-red);}
.nav-links a.active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--stamp-red);
}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cart-pill{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.78rem;
  border:1.5px solid var(--ink-navy);
  padding:8px 12px;border-radius:1px;
  white-space:nowrap;
}
.cart-pill .count{
  background:var(--stamp-red);color:var(--paper-light);
  font-size:.68rem;padding:1px 6px;border-radius:50px;
}
.nav-toggle{display:none;}
.nav-mobile-login{display:none;}

@media (max-width:880px){
  .nav-links{
    position:fixed;inset:64px 0 0 0;
    background:var(--paper-light);
    flex-direction:column;
    align-items:flex-start;
    padding:24px 24px;
    gap:18px;
    transform:translateY(-110%);
    transition:transform .25s ease;
    border-bottom:2px dashed rgba(21,49,92,.2);
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{
    display:block;background:none;border:none;
    font-family:var(--font-mono);font-size:.8rem;
    text-transform:uppercase;letter-spacing:.06em;
  }
  .nav-mobile-login{
    display:inline-flex;
    margin-top:8px;
    padding:11px 18px;
    border:1.5px solid var(--ink-navy);
    background:var(--ink-navy);
    color:var(--paper-light) !important;
  }
}

/* ============== HERO ============== */
.hero{
  background:var(--kraft);
  padding:72px 0 64px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,4.2vw,3.4rem);
  line-height:1.15;
  margin:14px 0 18px;
}
.hero h1 .underline{
  text-decoration:underline;
  text-decoration-color:var(--stamp-red);
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}
.hero p.lead{
  max-width:480px;
  color:var(--stamp-red);
  margin-bottom:36px;
  font-size:1.05rem;
  line-height:1.7;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;}

.search-card{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  padding:14px;
  display:flex;
  gap:10px;
  max-width:480px;
  box-shadow:var(--shadow-card);
  margin-bottom:20px;
}
.search-card input{
  flex:1;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:.95rem;
}
.search-card button{
  border:none;background:var(--ink-navy);color:var(--paper-light);
  padding:0 18px;font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;
}

/* shelf illustration made of css "book spines" */
.shelf{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:340px;
  padding:18px 18px 0;
  background:linear-gradient(180deg, transparent 0%, transparent 88%, var(--gold-thread) 88%, var(--gold-thread) 100%);
}
.spine{
  flex:1;
  border-radius:3px 3px 0 0;
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:14px;
  color:var(--paper-light);
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  box-shadow:inset -4px 0 0 rgba(0,0,0,.12);
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero{padding:44px 0 40px;}
  .shelf{order:-1;height:170px;padding:14px 14px 0;}
  .hero p.lead{max-width:100%;}
  .search-card{max-width:100%;}
}
@media (max-width:480px){
  .shelf{height:140px;gap:4px;}
  .spine{font-size:.56rem;padding-top:10px;}
  .hero-actions{gap:10px;}
  .hero-actions .btn{flex:1;justify-content:center;}
}

/* ============== STATS STRIP ============== */
.stats-strip{
  background:var(--ink-navy);
  color:var(--paper-light);
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  padding:30px 0;
}
.stats-row .num{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:#fff;
}
.stats-row .label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-thread);
  margin-top:4px;
}
@media (max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr);row-gap:18px;}}

/* ============== SECTION HEADERS ============== */
.section{padding:72px 0;}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:36px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:1.9rem;
  margin:6px 0 0;
}
.section-head p{
  color:#515A6B;
  max-width:480px;
  margin:8px 0 0;
}

/* ============== CATEGORY DRAWERS ============== */
.kategori-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.kategori-card{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  padding:18px 14px;
  text-align:center;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.kategori-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);}
.kategori-card .ico{display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.kategori-card .ico svg{width:28px;height:28px;transition:transform .3s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));}
.kategori-card:hover .ico svg{transform:scale(1.18);}
.kategori-card span.nama{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  display:block;
}
@media (max-width:880px){.kategori-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.kategori-grid{grid-template-columns:repeat(2,1fr);}}

/* ============== BOOK CATALOG CARD (signature element) ============== */
.buku-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media (max-width:1020px){.buku-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.buku-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.buku-grid{grid-template-columns:1fr;}}

.buku-card{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  position:relative;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  transition:transform .15s ease;
}
.buku-card:hover{transform:translateY(-4px);}
.buku-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.buku-card::before{ /* punch hole like a library card */
  content:"";
  position:absolute;
  top:14px;left:14px;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--kraft);
  border:1.5px solid var(--ink-navy);
  z-index:2;
}
.buku-cover{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  color:var(--paper-light);
  font-family:var(--font-display);
  font-size:.95rem;
  line-height:1.25;
  text-align:center;
  border-bottom:1.5px dashed rgba(255,255,255,.35);
}
.stamp{
  position:absolute;
  top:10px;right:10px;
  width:54px;height:54px;
  border:2px solid var(--stamp-red);
  border-radius:50%;
  color:var(--stamp-red);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  transform:rotate(8deg);
  background:rgba(255,255,255,.85);
  line-height:1.1;
}
.buku-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.buku-body .rak{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--gold-thread);
  letter-spacing:.05em;
}
.buku-body h3{
  font-size:1rem;
  margin:0;
  line-height:1.3;
}
.buku-body .penulis{
  font-size:.83rem;
  color:#515A6B;
}
.harga-row{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.harga-row .harga{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.05rem;
  color:var(--stamp-red);
}
.harga-row .harga-asli{
  font-family:var(--font-mono);
  font-size:.74rem;
  text-decoration:line-through;
  color:#9099A8;
}
.buku-footer{
  display:flex;
  border-top:1.5px dashed rgba(21,49,92,.25);
}
.buku-footer a, .buku-footer button{
  flex:1;
  text-align:center;
  padding:11px 0;
  font-family:var(--font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:none;
  background:none;
}
.buku-footer .lihat{border-right:1.5px dashed rgba(21,49,92,.25);color:var(--ink-navy);}
.buku-footer .tambah{color:var(--stamp-red);font-weight:600;}
.buku-footer .tambah:hover{background:var(--stamp-red);color:#fff;}
.buku-footer .lihat:hover{background:var(--ink-navy);color:#fff;}

/* ============== HOW IT WORKS (ticket numbered steps) ============== */
.langkah-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:880px){.langkah-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.langkah-row{grid-template-columns:1fr;}}
.langkah-card{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  padding:22px 18px;
  position:relative;
}
.langkah-card .tiket-no{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--stamp-red);
  letter-spacing:.05em;
}
.langkah-card h4{
  font-family:var(--font-display);
  font-size:1.05rem;
  margin:10px 0 8px;
}
.langkah-card p{font-size:.88rem;color:#515A6B;margin:0;}

/* ============== TESTIMONI ============== */
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:880px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  padding:22px;
  position:relative;
}
.testi-card .quote{font-size:.92rem;font-style:italic;color:#2E3645;}
.testi-card .who{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--gold-thread);
}

/* ============== CTA BANNER ============== */
.cta-banner{
  background:var(--shelf-green);
  color:var(--paper-light);
  padding:56px 0;
  text-align:center;
}
.cta-banner h2{
  font-family:var(--font-display);
  font-size:1.8rem;
  margin:0 0 10px;
}
.cta-banner p{color:#B8CCE8;margin-bottom:24px;}
.cta-banner .btn-primary{border-color:var(--paper-light);}

/* ============== FOOTER ============== */
.site-footer{
  background:var(--shelf-green-dark);
  color:#C5D4E8;
  padding:48px 0 22px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:32px;
}
.footer-grid h5{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-thread);
  margin:0 0 14px;
}
.footer-grid li{margin-bottom:8px;font-size:.88rem;}
.footer-brand p{font-size:.85rem;color:#AEB6C4;max-width:280px;}
.footer-bottom{
  border-top:1px dashed rgba(255,255,255,.18);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:#8A93A1;
  text-transform:uppercase;
  letter-spacing:.03em;
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ============== GENERIC PAGE HEADER (katalog, tentang, kontak..) ============== */
.page-header{
  background:var(--ink-navy);
  color:var(--paper-light);
  padding:46px 0 38px;
}
.page-header .eyebrow{color:var(--gold-thread);}
.page-header h1{
  font-family:var(--font-display);
  font-size:2rem;
  margin:8px 0 6px;
}
.page-header p{color:#C9D2E0;max-width:560px;margin:0;}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--gold-thread);
}
.breadcrumb a{color:#C9D2E0;}

/* ============== KATALOG LAYOUT ============== */
.katalog-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:32px;
  align-items:flex-start;
}
@media (max-width:880px){.katalog-layout{grid-template-columns:1fr;}}
.filter-box{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  padding:20px;
}
.filter-box h4{
  font-family:var(--font-mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 14px;
  color:var(--stamp-red);
}
.filter-group{margin-bottom:20px;}
.filter-group h5{font-size:.85rem;margin:0 0 10px;font-family:var(--font-body);font-weight:700;}
.filter-group label{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;margin-bottom:8px;cursor:pointer;
}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
  font-family:var(--font-mono);
  font-size:.78rem;
}
.toolbar select{
  border:1.5px solid var(--ink-navy);
  background:var(--paper-light);
  padding:8px 10px;
}

/* ============== DETAIL BUKU ============== */
.detail-layout{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:46px;
}
@media (max-width:880px){.detail-layout{grid-template-columns:1fr;}}
.cover-besar{
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  color:var(--paper-light);
  font-family:var(--font-display);
  font-size:1.4rem;
  line-height:1.3;
  border:1.5px solid var(--ink-navy);
  box-shadow:var(--shadow-card);
  position:relative;
}
.cover-besar .tahun{
  position:absolute;bottom:18px;left:0;right:0;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
}
.detail-kondisi-row{display:flex;gap:10px;align-items:center;margin:14px 0 22px;flex-wrap:wrap;}
.tag{
  font-family:var(--font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:6px 12px;
  border:1.5px solid var(--ink-navy);
}
.tag.merah{border-color:#C92A2A;color:#C92A2A;}
.detail-harga{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:6px 0 24px;
}
.detail-harga .harga{font-family:var(--font-mono);font-size:1.8rem;color:var(--stamp-red);font-weight:700;}
.detail-harga .harga-asli{font-family:var(--font-mono);font-size:1rem;text-decoration:line-through;color:#9099A8;}
.detail-harga .hemat{
  font-family:var(--font-mono);font-size:.68rem;
  background:var(--gold-thread);color:#fff;padding:4px 8px;
}
.info-table{width:100%;border-collapse:collapse;margin-bottom:24px;}
.info-table td{padding:8px 0;border-bottom:1px dashed rgba(21,49,92,.2);font-size:.92rem;}
.info-table td:first-child{font-family:var(--font-mono);font-size:.74rem;color:#515A6B;width:160px;text-transform:uppercase;}
.detail-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}

/* ============== CART PAGE ============== */
.cart-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:flex-start;}
@media (max-width:880px){.cart-layout{grid-template-columns:1fr;}}
.cart-item{
  display:grid;
  grid-template-columns:70px 1fr auto auto;
  gap:16px;
  align-items:center;
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  padding:14px;
  margin-bottom:14px;
}
.cart-item .mini-cover{
  width:70px;height:88px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-mono);font-size:.6rem;text-align:center;padding:4px;
}
.cart-item .mini-cover[src]{
  padding:0;object-fit:cover;border:1px solid var(--ink-navy);
}
.cart-item h4{margin:0 0 4px;font-size:.95rem;}
.cart-item .penulis-mini{font-size:.78rem;color:#515A6B;}
.cart-item .harga-mini{font-family:var(--font-mono);color:var(--stamp-red);font-weight:700;}
.cart-item .hapus{
  background:none;border:1.5px solid var(--ink-navy);
  font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;
  padding:8px 10px;
}
.cart-item .hapus:hover{background:var(--stamp-red);border-color:var(--stamp-red);color:#fff;}

.ringkasan-box{
  background:var(--ink-navy);
  color:var(--paper-light);
  padding:22px;
  position:sticky;
  top:90px;
}
.ringkasan-box h4{
  font-family:var(--font-mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--gold-thread);
  margin:0 0 16px;
}
.ringkasan-row{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:10px;}
.ringkasan-total{
  border-top:1px dashed rgba(255,255,255,.25);
  margin-top:12px;padding-top:12px;
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-weight:700;
}
.empty-state{
  text-align:center;padding:60px 20px;
  background:var(--paper-light);border:1.5px dashed var(--ink-navy);
}
.empty-state .ico{display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.empty-state .ico svg{width:52px;height:52px;opacity:.45;}

/* ============== AUTH PAGES ============== */
.auth-wrap{
  min-height:calc(100vh - 240px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
  background:var(--kraft);
}
.auth-card{
  background:var(--paper-light);
  border:1.5px solid var(--ink-navy);
  box-shadow:var(--shadow-card);
  width:100%;
  max-width:420px;
  padding:34px 32px;
}
.auth-card .brand{justify-content:center;margin-bottom:18px;}
.auth-card h2{
  font-family:var(--font-display);
  text-align:center;
  font-size:1.4rem;
  margin:0 0 6px;
}
.auth-card p.sub{
  text-align:center;color:#515A6B;font-size:.88rem;margin:0 0 26px;
}
.field{margin-bottom:18px;}
.field label{
  display:block;font-family:var(--font-mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px;color:#515A6B;
}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--ink-navy);background:#fff;
  padding:11px 12px;outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--stamp-red);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.password-wrap{position:relative;}
.password-wrap input{padding-right:42px;}
.toggle-password{
  position:absolute;top:0;right:0;height:100%;width:42px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:#515A6B;padding:0;
}
.toggle-password:hover{color:var(--ink-navy);}
.toggle-password.is-visible{color:var(--stamp-red);}
.toggle-password svg{width:19px;height:19px;pointer-events:none;}
.auth-foot{text-align:center;margin-top:18px;font-size:.88rem;color:#515A6B;}
.auth-foot a{color:var(--stamp-red);font-weight:600;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:.85rem;margin-bottom:18px;}

/* ============== KONTAK ============== */
.kontak-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:880px){.kontak-layout{grid-template-columns:1fr;}}
.kontak-info-card{
  background:var(--paper-light);border:1.5px solid var(--ink-navy);
  padding:22px;margin-bottom:14px;
}
.kontak-info-card h5{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--stamp-red);margin:0 0 8px;
}
.kontak-info-card--wa{
  background:var(--ink-navy);border-color:var(--ink-navy);color:#fff;
}
.kontak-info-card--wa h5{color:var(--gold-thread);}
.kontak-info-card--wa p{color:#C9D2E0;}
.kontak-info-card--wa .btn{margin-top:14px;}

.status-dot-row{display:flex;align-items:center;gap:8px;margin-top:2px;}
.status-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#7C8696;position:relative;
}
.status-dot.online{background:#2EA862;}
.status-dot.online::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#2EA862;animation:pbPulseDot 1.8s ease-out infinite;
}
@keyframes pbPulseDot{
  0%{transform:scale(1);opacity:.55;}
  100%{transform:scale(2.6);opacity:0;}
}
.status-text{font-size:.82rem;color:#515A6B;}
.kontak-info-card--wa .status-text{color:#C9D2E0;}

/* ── Form: kartu kirim pesan ─────────────────────────────────── */
.kontak-form-card{position:relative;}
.kontak-form-card .form-icon{
  width:42px;height:42px;border:1.5px solid var(--ink-navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:var(--kraft);
}
.kontak-form-card .form-icon svg{width:20px;height:20px;color:var(--ink-navy);}
.btn-submit{position:relative;overflow:hidden;}
.btn-submit.is-sent{background:#2EA862;border-color:#2EA862;}

/* ── FAQ accordion ───────────────────────────────────────────── */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{
  border:1.5px solid var(--ink-navy);background:var(--paper-light);
  margin-bottom:12px;overflow:hidden;
}
.faq-item__q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;cursor:pointer;user-select:none;
  font-family:var(--font-display);font-size:.98rem;color:var(--ink-navy);
}
.faq-item__q .plus{
  flex:none;width:20px;height:20px;position:relative;
}
.faq-item__q .plus::before,.faq-item__q .plus::after{
  content:"";position:absolute;background:var(--stamp-red);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq-item__q .plus::before{width:14px;height:2px;}
.faq-item__q .plus::after{width:2px;height:14px;transition:transform .25s ease;}
.faq-item.is-open .plus::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-item__a{
  height:0;overflow:hidden;padding:0 20px;
  font-size:.9rem;color:#515A6B;
}
.faq-item__a p{margin:0 0 16px;}

/* ============== TENTANG ============== */
.misi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:880px){.misi-grid{grid-template-columns:1fr;}}
.misi-card{background:var(--paper-light);border:1.5px solid var(--ink-navy);padding:22px;}
.misi-card .ico{display:flex;align-items:center;margin-bottom:6px;}
.misi-card .ico svg{width:30px;height:30px;}
.misi-card h4{font-family:var(--font-display);font-size:1.05rem;margin:10px 0 8px;}
.misi-card p{font-size:.88rem;color:#515A6B;margin:0;}

.timeline{border-left:2px dashed var(--ink-navy);padding-left:24px;margin-left:8px;}
.timeline-item{position:relative;padding-bottom:26px;}
.timeline-item::before{
  content:"";position:absolute;left:-31px;top:2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--stamp-red);border:2px solid var(--paper-light);
}
.timeline-item.is-progres::before{background:var(--gold-thread);}
.timeline-item .thn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);color:var(--stamp-red);font-size:.78rem;
}
.timeline-item .thn-badge{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border:1px solid var(--stamp-red);color:var(--stamp-red);border-radius:20px;
}
.timeline-item.is-progres .thn{color:var(--gold-thread);}
.timeline-item.is-progres .thn-badge{border-color:var(--gold-thread);color:#B87B0F;}
.timeline-item h4{margin:4px 0 6px;font-family:var(--font-display);font-size:1.02rem;}
.timeline-item p{margin:0;font-size:.88rem;color:#515A6B;}

/* ── Cerita Kami — split image + narasi ─────────────────────── */
.about-split{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.about-split__img{
  position:relative;border:1.5px solid var(--ink-navy);
  box-shadow:var(--shadow-card);overflow:hidden;
  aspect-ratio:4/3.1;
}
.about-split__img img{width:100%;height:100%;object-fit:cover;display:block;}
.about-split__tag{
  position:absolute;top:14px;left:14px;
  background:var(--paper-light);border:1px solid var(--ink-navy);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;color:var(--ink-navy);
}
.about-split__text p{color:#3B4557;margin:0 0 14px;}
.about-split__text p:last-of-type{margin-bottom:0;}
.pull-quote{
  margin:22px 0 0;padding:16px 0 16px 20px;
  border-left:3px solid var(--gold-thread);
  font-family:var(--font-display);font-size:1.08rem;line-height:1.5;
  color:var(--ink-navy);
}
.pull-quote span{
  display:block;margin-top:8px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--stamp-red);font-style:normal;
}
@media (max-width:880px){
  .about-split{grid-template-columns:1fr;gap:26px;}
  .about-split__img{aspect-ratio:16/10;}
}

@media (max-width:880px){
  .container{padding:0 18px;}
  .section{padding:52px 0;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .section-head .btn{align-self:flex-start;}

  .navbar-inner{padding:14px 18px;}
  .brand{font-size:1.08rem;}
  .brand-mark{width:30px;height:30px;font-size:.72rem;}
  .brand small{font-size:.56rem;}

  .cart-pill span:not(.count){display:none;} /* sembunyikan teks "KERANJANG", sisakan ikon+jumlah */
  .cart-pill{padding:8px 10px;gap:4px;}

  .page-header{padding:36px 0 30px;}
  .page-header h1{font-size:1.55rem;}

  .detail-layout{gap:30px;}
  .cover-besar{max-width:280px;margin:0 auto;font-size:1.2rem;}

  .info-table td:first-child{width:120px;}

  .field-row{grid-template-columns:1fr;gap:0;}

  .auth-card{padding:26px 22px;}
  .auth-wrap{padding:40px 16px;}

  .ringkasan-box{position:static;}
}

@media (max-width:600px){
  body{font-size:15px;}
  .hero h1{font-size:1.85rem;}
  .stats-row{padding:24px 0;}
  .stats-row .num{font-size:1.5rem;}

  .kategori-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .kategori-card{padding:14px 10px;}

  .buku-grid{gap:14px;}
  .buku-cover{height:130px;font-size:.85rem;padding:12px 30px 12px 26px;}
  .stamp{width:46px;height:46px;font-size:.5rem;top:8px;right:8px;}
  .buku-body{padding:13px;}
  .buku-body h3{font-size:.92rem;}

  .langkah-row{gap:12px;}
  .langkah-card{padding:18px 14px;}

  .testi-card{padding:18px;}

  .cta-banner{padding:44px 0;}
  .cta-banner h2{font-size:1.4rem;}

  .footer-grid{grid-template-columns:1fr;gap:26px;padding-bottom:26px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;}

  .filter-box{padding:16px;}
  .toolbar{font-size:.72rem;}

  .detail-harga{flex-wrap:wrap;}
  .detail-harga .harga{font-size:1.5rem;}
  .detail-actions{flex-direction:column;}
  .detail-actions .btn{width:100%;justify-content:center;}

  .cart-item{
    grid-template-columns:60px 1fr;
    grid-template-rows:auto auto;
    row-gap:8px;
  }
  .cart-item .mini-cover{width:60px;height:76px;}
  .cart-item .harga-mini{grid-column:2;justify-self:start;}
  .cart-item .hapus{grid-column:1 / -1;}

  .kontak-info-card{padding:18px;}
}

@media (max-width:420px){
  .hero h1{font-size:1.6rem;}
  .eyebrow{font-size:.64rem;}
  .btn{padding:11px 18px;font-size:.78rem;}
  .search-card{flex-direction:column;padding:10px;}
  .search-card button{padding:11px 0;margin-top:4px;}
  /* !important perlu di sini karena tombol Masuk ini juga di-toggle lewat
     inline style oleh JS (perbaruiNavbar) — tanpa !important, style inline itu
     menang dan tombolnya tetap muncul dobel dengan link "Masuk" di menu
     hamburger, bikin header sempit jadi sesak. Tombol akun (#navUser) untuk
     user yang sudah login TETAP ditampilkan supaya akses logout/menu akun
     tidak hilang di layar sekecil ini. */
  #navLogin.btn{display:none !important;}
}

/* Kartu habis */
.buku-card--habis {
  opacity: .82;
}
.buku-card--habis .buku-cover {
  position: relative;
}

/* Stamp override warna */
.stamp--habis {
  background: #C92A2A !important;
  color: #fff !important;
  border-color: #A11F1F !important;
}
.stamp--rendah {
  background: #F2A93B !important;
  color: #fff !important;
  border-color: #B8860B !important;
}

/* Stok bar di detail buku */
.stok-bar-wrap {
  margin: 10px 0 6px;
}
.stok-bar-track {
  height: 6px;
  background: #E3E9F2;
  border-radius: 3px;
  overflow: hidden;
}
.stok-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

/* Stepper stok di jual.php */
#btnStokMinus:hover, #btnStokPlus:hover {
  background: #E3E9F2 !important;
}
#btnStokMinus:active, #btnStokPlus:active {
  transform: scale(.92);
}

.stok-tabbar {
  background: var(--ink-navy);
  border-bottom: 2px solid #28447A;
}
.stok-tabs {
  display: flex;
  overflow-x: auto;
}
.stok-tab {
  flex: 1;
  min-width: 120px;
  padding: 16px 20px;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #28447A;
  transition: background .15s ease;
  color: inherit;
}
.stok-tab:last-child { border-right: none; }
.stok-tab:hover { background: rgba(255,255,255,.05); }
.stok-tab--nolink { cursor: default; }
.stok-tab--nolink:hover { background: transparent; }

.stok-tab--aktif { background: #15315C; }
.stok-tab--aktif.stok-tab--hijau { border-bottom: 2px solid #15315C; }
.stok-tab--aktif.stok-tab--merah { border-bottom: 2px solid #C92A2A; }
.stok-tab--aktif.stok-tab--putih { border-bottom: 2px solid #FFFFFF; }

.stok-tab__angka {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}
.stok-tab--aktif.stok-tab--hijau .stok-tab__angka { color: #15315C; }
.stok-tab--aktif.stok-tab--merah .stok-tab__angka { color: #C92A2A; }
.stok-tab__angka--gold { color: var(--gold-thread) !important; }

.stok-tab__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: #7C8696;
  margin-top: 4px;
}

/* ── Dot filter sidebar ───────────────────────────────────── */
.filter-label-dot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot--hijau { background: #15315C; }
.dot--merah { background: #C92A2A; }
.dot--abu   { background: #7C8696; }

/* ── Toolbar label habis ──────────────────────────────────── */
.label-habis-toolbar {
  color: var(--stamp-red);
  font-family: var(--font-mono);
  font-size: .75rem;
}

/* ── Prodi penjual di card ────────────────────────────────── */
.prodi-penjual {
  font-size: .75rem;
  color: #7C8696;
  display: block;
  margin-top: 2px;
}

/* ── Kartu stok habis ─────────────────────────────────────── */
.buku-card--habis { opacity: .82; }

/* ── Cover overlay ────────────────────────────────────────── */
.buku-cover { position: relative; }
.buku-cover--habis {
  filter: grayscale(60%);
  opacity: .75;
}

.cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-overlay--habis { background: rgba(0,0,0,.42); }
.cover-overlay--rendah {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 6px;
  background: transparent;
}

.cover-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 2px;
}
.cover-badge--habis {
  font-size: .75rem;
  color: #fff;
  background: var(--stamp-red);
  padding: 4px 10px;
}
.cover-badge--rendah {
  font-size: .62rem;
  color: #fff;
  background: rgba(232,116,26,.85);
  padding: 2px 7px;
}

/* ── Stamp kondisi override ───────────────────────────────── */
.stamp--habis {
  background: #C92A2A !important;
  color: #fff !important;
  border-color: #A11F1F !important;
}
.stamp--rendah {
  background: var(--gold-thread) !important;
  color: #fff !important;
  border-color: #B8860B !important;
}

/* ── Progress bar stok ────────────────────────────────────── */
.stok-bar-wrap { margin-top: 8px; }
.stok-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.stok-bar-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: #7C8696;
  letter-spacing: .04em;
}
.stok-bar-value {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
}
.stok-bar-value--normal { color: #15315C; }
.stok-bar-value--rendah { color: #C4860B; }

.stok-bar-track {
  height: 4px;
  background: #E3E9F2;
  border-radius: 2px;
  overflow: hidden;
}
.stok-bar-fill {
  height: 100%;
  background: #15315C;
  border-radius: 2px;
  transition: width .4s ease;
}
.stok-bar-fill--rendah { background: #F2A93B; }

/* ── Harga habis ──────────────────────────────────────────── */
.harga--habis { color: #7C8696 !important; }

/* ── Tombol Habis ─────────────────────────────────────────── */
.tambah--habis {
  background: #D7DEE8 !important;
  color: #7C8696 !important;
  cursor: not-allowed !important;
  border-color: #D7DEE8 !important;
}

/* ── Detail buku stok bar ─────────────────────────────────── */
.stok-bar-track--detail {
  height: 6px;
  background: #E3E9F2;
  border-radius: 3px;
  overflow: hidden;
  max-width: 220px;
}

/* ============================================================
   KATALOG v2 — REDESIGN (responsive fix)
   ============================================================ */

/* ── Page header katalog ── */
.page-header--katalog {
  padding: 32px 0 36px;
}
.page-header--katalog .breadcrumb span {
  color: var(--gold-thread);
}
.page-header__inner {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-header__text {
  max-width: 600px;
}
.page-header__text h1 {
  margin: 0 0 8px;
}
.page-header__text p {
  margin: 0;
}

/* ── Stat cards — selalu horizontal ── */
.stok-stats {
  display: flex;
  flex-direction: row;          /* horizontal paksa */
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}

.stok-stat-card {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  color: var(--paper-light);
  transition: background .15s ease;
  min-width: 0;                 /* izinkan menyusut */
}
.stok-stat-card:last-child {
  border-right: none;
}
.stok-stat-card:hover {
  background: rgba(255,255,255,.12);
}

/* Dot penanda warna */
.stok-stat-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stok-stat-card__dot--hijau { background: #2EA862; }
.stok-stat-card__dot--merah { background: #C92A2A; }
.stok-stat-card__dot--abu   { background: #7C8696; }
.stok-stat-card__dot--gold  { background: var(--gold-thread); }

.stok-stat-card__angka {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--paper-light);
}
.stok-stat-card__angka--gold {
  color: var(--gold-thread);
}
.stok-stat-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7C8696;
  margin-top: 3px;
  white-space: nowrap;
}

/* Active states */
.stok-stat-card--aktif {
  background: rgba(255,255,255,.1);
}
.stok-stat-card--tersedia.stok-stat-card--aktif {
  background: rgba(31,122,71,.2);
  border-bottom: 2px solid #2EA862;
}
.stok-stat-card--tersedia.stok-stat-card--aktif .stok-stat-card__angka {
  color: #2EA862;
}
.stok-stat-card--habis.stok-stat-card--aktif {
  background: rgba(232,116,26,.2);
  border-bottom: 2px solid var(--stamp-red);
}
.stok-stat-card--habis.stok-stat-card--aktif .stok-stat-card__angka {
  color: var(--stamp-red);
}
.stok-stat-card--semua.stok-stat-card--aktif {
  background: rgba(255,255,255,.12);
  border-bottom: 2px solid rgba(255,255,255,.5);
}
.stok-stat-card--eksemplar {
  cursor: default;
}

/* Mobile: dot+angka saja, sembunyikan label kalau sempit */
@media (max-width: 500px) {
  .stok-stat-card {
    padding: 12px 10px;
    gap: 7px;
  }
  .stok-stat-card__angka {
    font-size: 1.05rem;
  }
  .stok-stat-card__label {
    font-size: .55rem;
    letter-spacing: .03em;
  }
}

/* ── Filter sidebar v2 ── */
.filter-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px dashed rgba(21,49,92,.2);
}
.filter-box__header h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--stamp-red);
}
.filter-box__reset {
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--stamp-red);
  text-decoration: none;
  border: 1px solid var(--stamp-red);
  padding: 3px 8px;
  border-radius: 1px;
  transition: background .12s, color .12s;
}
.filter-box__reset:hover {
  background: var(--stamp-red);
  color: #fff;
}

.filter-search-field {
  margin-bottom: 20px;
}
.filter-search-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--kraft-dark);
  background: #F3F6FB;
  border-radius: 1px;
  font-size: .88rem;
  transition: border-color .15s;
  box-sizing: border-box;
}
.filter-search-field input:focus {
  outline: none;
  border-color: var(--ink-navy);
  background: #fff;
}

.filter-group {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(21,49,92,.15);
}
.filter-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.filter-group h5 {
  font-size: .72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 12px;
  color: var(--ink-navy);
}

.filter-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1.5px dashed rgba(21,49,92,.2);
}

/* ── Mobile: filter collapsible ── */
@media (max-width: 880px) {
  .filter-box {
    position: relative;
  }
}

/* ── Katalog main area ── */
.katalog-main { min-width: 0; }

/* ── Toolbar v2 ── */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--paper-light);
  border: 1.5px solid var(--ink-navy);
}
.toolbar__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.toolbar__count {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-navy);
}
.toolbar__count strong {
  font-size: 1rem;
  color: var(--stamp-red);
}
.toolbar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.toolbar__tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--ink-navy);
  color: var(--paper-light);
  padding: 3px 7px;
  border-radius: 1px;
}
.toolbar__badge-habis {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--stamp-red);
}
.toolbar__sort {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.toolbar__sort-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7C8696;
  white-space: nowrap;
}
.toolbar select {
  border: 1.5px solid var(--ink-navy);
  background: var(--paper-light);
  padding: 7px 10px;
  font-size: .82rem;
  cursor: pointer;
}
.toolbar select:focus {
  outline: 2px solid var(--ink-navy);
  outline-offset: 1px;
}

@media (max-width: 640px) {
  .toolbar {
    flex-direction: column;
    gap: 10px;
  }
  .toolbar__sort {
    width: 100%;
  }
  .toolbar__sort select {
    flex: 1;
    width: 100%;
  }
}

/* ── Responsive: katalog layout ── */
@media (max-width: 880px) {
  .katalog-layout {
    grid-template-columns: 1fr !important;
  }
  /* Filter sidebar jadi accordion di mobile */
  .filter-box form {
    display: block;
  }
}

/* ── Buku card mobile tweaks ── */
@media (max-width: 640px) {
  .buku-body {
    padding: 12px;
    gap: 4px;
  }
  .buku-body h3 {
    font-size: .9rem;
  }
  .harga-row .harga {
    font-size: .95rem;
  }
  .buku-footer a,
  .buku-footer button {
    padding: 9px 0;
    font-size: .65rem;
  }
}

/* ── Hide old stok-tabbar ── */
.stok-tabbar { display: none; }


/* ============================================================
   BACKGROUND IMAGE SYSTEM — proper CSS background-image
   ============================================================
   Semua foto jadi full background dengan overlay gelap,
   konten tetap di atas overlay seperti website travel modern.
   ============================================================ */

/* ── HERO with background photo ────────────────────────────── */
.hero--img {
  position: relative;
  background-image: url('../img/perpus-modern.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}
/* Dark overlay di atas foto */
.hero--img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(12, 28, 58, 0.88) 0%,
    rgba(12, 28, 58, 0.80) 50%,
    rgba(12, 28, 58, 0.60) 100%
  );
  z-index: 0;
}
.hero--img .container { position: relative; z-index: 1; }

/* Adjust text colors on dark bg */
.hero--img .eyebrow {
  color: var(--gold-thread);
}
.hero--img h1 {
  color: #F3F6FB;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero--img .lead {
  color: rgba(242,169,59,.92);
}
.hero--img .btn-dark {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  color: #F3F6FB;
}
.hero--img .btn-dark:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.6);
}
/* Search card on dark bg */
.hero--img .search-card {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 18px;
}
.hero--img .search-card input {
  color: #F3F6FB;
  background: transparent;
}
.hero--img .search-card input::placeholder {
  color: rgba(200,205,216,.6);
}
/* Book spines on dark bg */
.hero--img .spine {
  opacity: 1;
}
/* Shelf shelf on dark bg */
.hero--img .shelf {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 88%,
    rgba(242,169,59,.6) 88%,
    rgba(242,169,59,.6) 100%
  );
}

/* ── CTA BANNER with background photo ──────────────────────── */
.cta-banner--img {
  position: relative;
  background-image: url('../img/gedung-kampus.jpg');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}
.cta-banner--img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16, 66, 38, 0.88) 0%,
    rgba(16, 66, 38, 0.82) 100%
  );
  z-index: 0;
}
.cta-banner--img .container {
  position: relative;
  z-index: 1;
}
.cta-banner--img h2,
.cta-banner--img p {
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* ── PAGE HEADER with background photo ─────────────────────── */
/* Base: semua page header bisa dapat background image */
.page-header--img {
  position: relative;
  background-size: cover;
  background-position: center;
}
.page-header--img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(12, 28, 58, 0.90) 0%,
    rgba(12, 28, 58, 0.82) 55%,
    rgba(12, 28, 58, 0.60) 100%
  );
  z-index: 0;
}
.page-header--img .container,
.page-header--img .page-header__inner {
  position: relative;
  z-index: 1;
}
/* Ensure text is readable */
.page-header--img h1,
.page-header--img p,
.page-header--img .breadcrumb {
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.page-header--img .breadcrumb a {
  color: #C9D2E0;
}

/* Which photo per page */
.page-header--perpus {
  background-image: url('../img/perpus-modern.jpg');
  background-position: center 25%;
}
.page-header--gedung {
  background-image: url('../img/gedung-kampus.jpg');
  background-position: center 35%;
}
.page-header--arsip {
  background-image: url('../img/perpus-arsip.jpg');
  background-position: center top;
}

/* Stat cards on photo header need stronger contrast */
.page-header--img .stok-stats {
  border-color: rgba(255,255,255,.2);
}
.page-header--img .stok-stat-card {
  background: rgba(10,12,20,.45);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-header--img .stok-stat-card:hover {
  background: rgba(10,12,20,.65);
}
.page-header--img .stok-stat-card__label {
  color: #9AA6BC;
}

/* ── Parallax fallback for mobile ───────────────────────────── */
@media (max-width: 768px) {
  .hero--img,
  .cta-banner--img {
    background-attachment: scroll; /* fixed causes issues on iOS */
  }
}

/* Hero text layer — gap antar elemen hero */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}
/* Spacing individual per elemen dalam hero-text */
.hero-text .eyebrow {
  margin-bottom: 10px;
}
.hero-text h1 {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}
.hero-text .lead {
  margin-bottom: 32px !important;
}
.hero-text .search-card {
  margin-bottom: 18px !important;
}
.hero-text .hero-actions {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Shelf — spines with variable height feel more realistic */
.shelf {
  align-items: flex-end;
  padding-bottom: 0;
}
.spine {
  border-radius: 4px 4px 0 0;
  min-height: 180px;
  position: relative;
  cursor: default;
  transition: filter .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
  /* PENTING: background diset via inline style PHP, jangan di-override di sini */
}
.spine:hover {
  filter: brightness(1.18);
  transform: translateY(-8px) scale(1.02);
  z-index: 2;
}

/* Stats number glow */
.stats-row .num {
  letter-spacing: -.02em;
}

/* Category card hover — ink underline accent */
.kategori-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stamp-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.kategori-card:hover::after {
  transform: scaleX(1);
}

/* Langkah card — ticket stub number larger */
.langkah-card .tiket-no {
  font-size: .78rem;
  display: block;
  margin-bottom: 4px;
}
.langkah-card {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}

/* Testi card — quote mark decoration */
.testi-card {
  position: relative;
  overflow: hidden;
}
.testi-card::before {
  content: '"';
  position: absolute;
  top: -8px; right: 14px;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--kraft-dark);
  opacity: .4;
  line-height: 1;
  pointer-events: none;
}
.testi-card .who::before {
  content: '— ';
}

/* CTA banner text max-width */
.cta-banner .container {
  max-width: 680px;
}

/* Smooth hero entry classes (already in index.php inline) */
.pb-slide-right { animation: pb-slide-right .55s cubic-bezier(.22,1,.36,1) both; }
.pb-slide-left  { animation: pb-slide-left  .55s cubic-bezier(.22,1,.36,1) both; }

/* Book card consistent cover height */
.buku-cover {
  height: 180px;
}

/* Responsive spine heights on mobile */
@media (max-width: 980px) {
  .spine { min-height: 120px; }
}
@media (max-width: 480px) {
  .spine { min-height: 90px; }
}

/* ── Kategori card: gambar ikon PNG ── */
.kategori-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}