/* ============================================================
   Active Design — Katalog Buku (/katalog)
   Halaman berdiri sendiri: tidak memuat styles.css situs utama.
   ============================================================ */
:root{
  --teal:#22AAAA;
  --teal-800:#0E6B66;
  --teal-900:#0A4F4B;
  --maroon:#A53243;
  --emas:#E7C27A;
  --tinta:#2B2620;
  --tinta-lembut:#5E554A;
  --kertas:#FBF6EA;
  --durasi:.9s;

  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Tekstur kertas: butiran halus + serat besar, dibuat dari noise SVG (tanpa file gambar). */
  --butir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --serat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --noda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .5 0 0 0 0 .32 0 0 0 .5 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --kulit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--body);color:var(--tinta);
  display:grid;grid-template-rows:auto 1fr auto;height:100vh;height:100dvh;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.07), transparent 62%),
    var(--butir),
    linear-gradient(160deg,#1E3433,#142221 70%);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit}
img{max-width:100%;display:block}

/* ---------- bar atas ---------- */
.atas{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px clamp(12px,3vw,28px);
}
.atas__logo{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.atas__kembali,.atas__wa{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;font-size:14px;
  padding:8px 14px;border-radius:999px;transition:background .2s;
}
.atas__kembali{color:#E8F1F0;background:rgba(255,255,255,.08)}
.atas__kembali:hover{background:rgba(255,255,255,.16)}
.atas__wa{color:#fff;background:#1FA855}
.atas__wa:hover{background:#18914a}

/* ---------- panggung & buku ---------- */
.panggung{position:relative;display:grid;place-items:center;overflow:hidden;min-height:0;padding:4px 0}
.buku-skala{
  position:relative;
  transform:translateX(var(--geser,0%));
  transition:transform var(--durasi) cubic-bezier(.45,.05,.25,1);
}
.buku{position:absolute;top:0;left:0;transform-origin:0 0;perspective:2600px}

/* bayangan buku di meja: satu lapis saja, mengikuti bagian buku yang terlihat */
.buku::before{
  content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:6px;
  box-shadow:0 22px 50px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.3);
  transition:left var(--durasi) cubic-bezier(.45,.05,.25,1), right var(--durasi) cubic-bezier(.45,.05,.25,1);
}
.tutup-depan .buku--ganda::before{left:50%}
.tutup-belakang .buku--ganda::before{right:50%}

.lembar{
  position:absolute;top:0;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform var(--durasi) cubic-bezier(.45,.05,.25,1), visibility 0s;
  cursor:pointer;
}
.buku--ganda .lembar{left:50%;width:50%}
.buku--tunggal .lembar{left:0;width:100%}
.lembar.terbalik{transform:rotateY(-180deg)}
.buku--tunggal .lembar.terbalik{visibility:hidden;transition:transform var(--durasi) cubic-bezier(.45,.05,.25,1), visibility 0s var(--durasi)}
.lembar.tanpa-anim{transition:none!important}

.muka{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.muka--kiri{transform:rotateY(180deg)}
.buku--ganda .muka--kanan{border-radius:0 6px 6px 0}
.buku--ganda .muka--kiri{border-radius:6px 0 0 6px}
.buku--tunggal .muka{border-radius:4px 6px 6px 4px}

/* tebal tumpukan kertas di tepi */
.buku--ganda .muka--kanan{box-shadow:inset -1px 0 0 rgba(0,0,0,.06), 3px 0 0 -1px #EFE7D6, 5px 1px 0 -2px #E4DAC5}
.buku--ganda .muka--kiri{box-shadow:inset 1px 0 0 rgba(0,0,0,.06), -3px 0 0 -1px #EFE7D6, -5px 1px 0 -2px #E4DAC5}
.buku--tunggal .muka--kanan{box-shadow:3px 0 0 -1px #EFE7D6, 5px 1px 0 -2px #E4DAC5}

/* bayangan lipatan saat lembar berputar */
.muka::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5}
.muka--kanan::after{background:linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,.05) 55%, rgba(255,255,255,.12))}
.muka--kiri::after{background:linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.05) 55%, rgba(255,255,255,.12))}
.lembar.bergerak .muka::after{animation:bayang var(--durasi) ease-in-out}
@keyframes bayang{0%{opacity:0}45%{opacity:1}100%{opacity:0}}

/* ---------- halaman ---------- */
.hal{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:28px 28px 18px;
  background-color:var(--kertas);
  background-image:var(--noda),var(--serat),var(--butir);
  background-size:500px 500px,600px 600px,220px 220px;
}
/* lekuk punggung buku: halaman kanan gelap di kiri, halaman kiri gelap di kanan */
.hal::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4}
.buku--ganda .muka--kanan .hal::before{background:linear-gradient(to right, rgba(60,40,10,.22), rgba(60,40,10,.06) 6%, transparent 14%)}
.buku--ganda .muka--kiri .hal::before{background:linear-gradient(to left, rgba(60,40,10,.22), rgba(60,40,10,.06) 6%, transparent 14%)}
.buku--tunggal .muka--kanan .hal::before{background:linear-gradient(to right, rgba(60,40,10,.14), transparent 7%)}
.muka--kiri .hal--polos{background-color:#F6EFDF}

.hal__bab{
  margin:0 0 4px;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-800);
}
.hal__judul{margin:0;font-family:var(--display);font-weight:800;font-size:27px;line-height:1.12;color:var(--tinta)}
.hal__ket{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--tinta-lembut)}
.hal__kepala{padding-bottom:10px;margin-bottom:12px;border-bottom:1.5px solid rgba(110,85,50,.22)}
.hal__kaki{
  margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(94,85,74,.75);
}
.hal__no{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:0;color:var(--tinta-lembut)}
.muka--kiri .hal__kaki{flex-direction:row-reverse}

/* ---------- kartu produk ---------- */
.hal__produk{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;min-height:0}
.hal__produk--1{grid-template-columns:1fr;padding:6px 26px 0}
.hal__produk--1 .bk__nama{font-size:18px}
.hal__produk--1 .bk__harga b{font-size:20px}
.bk{
  display:flex;flex-direction:column;gap:6px;padding:7px;
  background:rgba(255,255,255,.62);border:1px solid rgba(120,95,60,.17);border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(80,60,30,.07);
}
.bk__foto{position:relative;aspect-ratio:4/3;background:#fff;border-radius:6px;overflow:hidden}
.bk__foto img{width:100%;height:100%;object-fit:contain}
.bk__kosong{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#9b917f;background:repeating-linear-gradient(45deg,#f7f2e6 0 8px,#f1eadb 8px 16px)}
.bk__label{position:absolute;top:6px;left:6px;z-index:2;background:var(--maroon);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:999px}
.bk--habis .bk__foto img{opacity:.5}
.bk__isi{display:flex;flex-direction:column;gap:4px;padding:0 2px 1px}
.bk__nama{margin:0;font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.25;color:var(--tinta)}
.bk__harga{display:flex;align-items:baseline;gap:4px;line-height:1.15;white-space:nowrap}
.bk__mulai{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#8A7F6E}
.bk__harga b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--maroon);font-variant-numeric:tabular-nums}
.bk__harga small{font-size:11px;color:var(--tinta-lembut)}
.bk__harga--catatan{font-size:12px;font-weight:600;color:var(--maroon)}
.bk__pesan{
  margin-top:3px;display:flex;justify-content:center;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:#1FA855;color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:12px;
  box-shadow:0 2px 6px rgba(31,168,85,.3);transition:background .18s, transform .18s;
}
.bk__pesan:hover{background:#178c46;transform:translateY(-1px)}
/* 3–4 produk: foto sedikit lebih pendek supaya 2 baris muat di satu halaman */
.hal__produk--3 .bk__foto,.hal__produk--4 .bk__foto{aspect-ratio:16/9}
/* 1 produk: kartu besar, harga & tombol berdampingan */
.hal__produk--1 .bk{padding:12px}
.hal__produk--1 .bk__isi{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 12px;padding:4px 4px 2px}
.hal__produk--1 .bk__nama{grid-column:1/-1}
.hal__produk--1 .bk__harga{flex-wrap:wrap}
.hal__produk--1 .bk__mulai{width:100%}
.hal__produk--1 .bk__pesan{margin:0;padding:10px 18px;font-size:14px}

/* ---------- sampul ---------- */
.hal--sampul{
  padding:22px;color:#fff;
  background-color:var(--teal-800);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(0,0,0,.35), transparent 60%),
    var(--kulit),var(--butir);
  background-size:auto,auto,260px 260px,220px 220px;
}
.hal--sampul::before{background:linear-gradient(to right, rgba(0,0,0,.35), rgba(255,255,255,.08) 3%, transparent 7%)!important}
.hal--belakang::before{background:linear-gradient(to left, rgba(0,0,0,.35), rgba(255,255,255,.08) 3%, transparent 7%)!important}
.sampul__bingkai{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:46px 26px 24px;border:1.5px solid rgba(231,194,122,.7);border-radius:4px;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.08), inset 0 0 0 6.5px rgba(231,194,122,.35);
}
.sampul__logo{width:210px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.sampul__garis{width:70px;height:2px;margin:28px 0 22px;background:var(--emas)}
.sampul__kecil{margin:0;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--emas)}
.sampul__judul{
  margin:14px 0 10px;font-family:var(--display);font-weight:800;font-size:40px;line-height:1.08;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.sampul__judul--kecil{font-size:30px;margin-top:70px}
.sampul__sub{margin:0;font-size:15px;color:rgba(255,255,255,.82)}
.sampul__bawah{
  margin-top:auto;width:100%;display:flex;justify-content:space-between;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);
  border-top:1px solid rgba(231,194,122,.45);padding-top:12px;
}
.sampul__petunjuk{margin-top:10px;text-align:center;font-size:12px;color:rgba(255,255,255,.78);animation:kedip 2.4s ease-in-out infinite}
@keyframes kedip{50%{opacity:.35}}
.sampul__wa{
  margin-top:30px;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
  background:#1FA855;color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:15px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ---------- sambutan ---------- */
.sambutan__teks{margin:14px 0 18px;font-size:13.5px;line-height:1.6;color:var(--tinta-lembut)}
.langkah{list-style:none;margin:0;padding:0;counter-reset:l;display:grid;gap:14px}
.langkah li{counter-increment:l;position:relative;padding-left:44px;display:grid;gap:2px}
.langkah li::before{
  content:counter(l);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal-800);color:#fff;font-family:var(--display);font-weight:700;font-size:14px;
}
.langkah b{font-family:var(--display);font-size:14.5px}
.langkah span{font-size:12.5px;line-height:1.45;color:var(--tinta-lembut)}
.sambutan__catatan{
  margin:22px 0 0;padding:12px 14px;border-left:3px solid var(--maroon);background:rgba(165,50,67,.06);
  font-size:12.5px;line-height:1.5;color:var(--tinta);border-radius:0 8px 8px 0;
}
.sambutan__catatan:empty{display:none}

/* ---------- daftar isi ---------- */
.daftar{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:4px}
.daftar button{
  width:100%;display:flex;align-items:center;gap:12px;padding:10px 6px;border:0;background:none;
  text-align:left;cursor:pointer;border-radius:8px;color:var(--tinta);transition:background .18s;
}
.daftar button:hover{background:rgba(14,107,102,.08)}
.daftar__no{font-family:var(--display);font-weight:700;font-size:13px;color:var(--teal-800);width:22px}
.daftar__nama{font-family:var(--display);font-weight:600;font-size:15px;display:flex;flex-direction:column}
.daftar__nama small{font-family:var(--body);font-weight:400;font-size:11.5px;color:#8A7F6E}
.daftar__titik{flex:1;border-bottom:2px dotted rgba(110,85,50,.35);transform:translateY(4px)}
.daftar__hal{font-family:var(--display);font-weight:700;font-size:14px;color:var(--tinta-lembut)}

/* ---------- kontak & catatan ---------- */
.kontak{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:12px 18px;font-size:14px}
.kontak dt{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-800);padding-top:2px}
.kontak dd{margin:0;line-height:1.5}
.kontak__wa{
  margin-top:28px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
  background:#1FA855;color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:15px;
}
.kontak__maps{margin-top:14px;font-weight:600;font-size:14px;color:var(--teal-800)}
.garis-catatan{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:16px}
.garis-catatan i{display:block;border-bottom:1px solid rgba(110,85,50,.25)}

/* ---------- kendali bawah ---------- */
.kendali{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px calc(14px + env(safe-area-inset-bottom))}
.kendali__btn{
  width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:var(--teal-800);box-shadow:0 6px 16px rgba(0,0,0,.3);transition:transform .18s, opacity .18s;
}
.kendali__btn:hover{transform:scale(1.06)}
.kendali__btn:disabled{opacity:.3;cursor:default;transform:none}
.kendali__info{
  min-width:190px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#E8F1F0;font-size:13.5px;font-weight:500;cursor:pointer;
}
.kendali__info:hover{background:rgba(255,255,255,.14)}
.tanpa-js{color:#fff;text-align:center}
.tanpa-js a{color:var(--emas)}

@media (max-width:560px){
  .atas__kembali span,.atas__wa span{display:none}
  .atas__kembali,.atas__wa{padding:9px}
  .kendali__info{min-width:150px;font-size:12.5px}
}