/* ============================================================
   Perpustakaan Digital Budaya Indonesia
   Skala: 1rem = 1px desain (1440 x 1024) x faktor --k (diset app.js)
   ============================================================ */

:root{
  --k: 1;

  /* warna */
  --green-900:#285D4F;
  --green-overlay:rgba(40,93,79,.75);
  --brown-900:#32130F;
  --brown-edge:#713F12;
  --gold-500:#EAB308;
  --gold-600:#CA8A04;
  --gold-700:#a97103;
  --cream:#F9F1E4;

  --text-primary:#141C25;
  --text-secondary:#344051;
  --text-tertiary:#637083;
  --text-muted:#8F969E;
  --stroke:#D5DCE1;
  --border-200:#E4E7EC;

  --overlay:rgba(0,44,34,.5);

  /* radius token desain */
  --radius-s:8rem;
  --radius-m:10rem;
  --radius-xxl:20rem;
  --radius-xxxl:32rem;

  /* easing */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.9,.28,1);
  --ease-pop:cubic-bezier(.34,1.4,.64,1);
}

html{ font-size:calc(var(--k) * 1px); }

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100dvh;
  background:#e7ded0;
  font-family:"Inter",system-ui,sans-serif;
  color:var(--text-primary);
  overflow:hidden;
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   Panggung
   ============================================================ */

.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  isolation:isolate;
}

/* ── Latar ─────────────────────────────────────────────────── */

.bg{
  position:absolute;
  inset:-3%;
  z-index:0;
  will-change:translate;
}
.bg__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:0% 50%;
  transform-origin:38% 60%;
  animation:kenburns 2.6s var(--ease-out) both;
}
.bg__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 85% at 26% 80%, rgba(255,249,236,.28) 0%, rgba(255,249,236,0) 58%);
  opacity:0;
  animation:fadeIn 1.6s var(--ease-out) .4s forwards;
}

.glow{
  position:absolute;
  z-index:2;
  left:-502rem;
  bottom:-864rem;
  width:1600rem;
  height:1600rem;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  animation:glowIn 2.2s var(--ease-out) .15s forwards, glowPulse 9s ease-in-out 2.4s infinite;
  will-change:translate,opacity;
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero{
  position:absolute;
  z-index:5;
  left:80rem;
  bottom:80rem;
  width:500rem;
  display:flex;
  flex-direction:column;
  gap:20rem;
  padding:6rem 8rem;
  backdrop-filter:blur(2.5px);
  -webkit-backdrop-filter:blur(2.5px);
  will-change:translate;
}

.hero__brand{
  display:flex;
  align-items:center;
  gap:21rem;
  height:126rem;
}
.hero__logo{
  width:126rem;
  height:126rem;
  flex:none;
  filter:drop-shadow(0 6rem 14rem rgba(40,60,40,.28));
}
.hero__logo img{ width:100%; height:100%; object-fit:contain; }

.hero__title{
  margin:0;
  font-weight:700;
  color:var(--green-900);
  letter-spacing:-.2rem;
  display:flex;
  flex-direction:column;
}
.mask{
  display:block;
  overflow:hidden;
  padding-bottom:2rem;
  margin-bottom:-2rem;
}
.mask__in{ display:block; line-height:42rem; white-space:nowrap; }
.hero__title-sm{ font-size:28.23rem; }
.hero__title-lg{ font-size:35.45rem; }

/* pencarian */
.search{
  display:flex;
  align-items:center;
  gap:8rem;
  background:#fff;
  border:1rem solid var(--stroke);
  border-radius:var(--radius-xxxl);
  padding:12rem 12rem 12rem 20rem;
  box-shadow:0 8rem 24rem rgba(30,50,40,.14);
  transition:box-shadow .45s var(--ease-out), border-color .45s var(--ease-out), transform .45s var(--ease-out);
}
.search.is-focus{
  border-color:var(--green-900);
  box-shadow:0 10rem 30rem rgba(30,50,40,.2), 0 0 0 4rem rgba(40,93,79,.16);
  transform:translateY(-2rem);
}
.search__icon{
  width:20rem; height:20rem; flex:none;
  transition:transform .5s var(--ease-pop);
}
.search.is-focus .search__icon{ transform:scale(1.14) rotate(-8deg); }

.search__input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  font-family:"Inter",sans-serif;
  font-size:14rem;
  line-height:20rem;
  color:var(--text-primary);
}
.search__input::placeholder{ color:var(--text-muted); }

.btn{
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8rem;
  font-family:"Space Grotesk","Inter",sans-serif;
  transition:transform .35s var(--ease-pop), box-shadow .35s var(--ease-out), background-color .3s ease;
}
.btn--site{
  flex:none;
  width:93rem;
  height:40rem;
  border-radius:20rem;
  background:var(--green-900);
  color:#fff;
  font-family:"Inter",sans-serif;
  font-weight:700;
  font-size:14rem;
  line-height:20rem;
  position:relative;
  overflow:hidden;
}
.btn--site::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.42) 50%,transparent 75%);
  transform:translateX(-120%);
}
.btn--site:hover{ transform:translateY(-2rem) scale(1.03); box-shadow:0 8rem 18rem rgba(40,93,79,.4); }
.btn--site:hover::after{ animation:sheen .8s var(--ease-out); }
.btn--site:active{ transform:translateY(0) scale(.98); }

/* ── Rak koleksi ───────────────────────────────────────────── */

.shelf{
  position:absolute;
  z-index:6;
  right:0;
  top:50%;
  margin-top:-472rem;
  width:280rem;
  height:714rem;
}

.shelf__spine{
  position:absolute;
  top:0;
  width:88rem;
  height:100%;
  border-radius:0 40rem 40rem 0;
}
.shelf__spine--back{ right:24rem; background:var(--brown-900); z-index:1; }
.shelf__spine--paper{
  right:12rem; background:#fff; z-index:2;
  box-shadow:-5rem 0 5rem rgba(0,0,0,.25);
}

.shelf__tab{
  position:absolute;
  right:0; top:0;
  width:88rem;
  height:100%;
  z-index:4;
  background:var(--brown-900);
  border-radius:0 40rem 40rem 0;
  box-shadow:-5rem 0 12rem rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.shelf__label{
  font-family:"Graduate",serif;
  font-size:40rem;
  line-height:1;
  color:#fff;
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  letter-spacing:2rem;
  padding:20rem 0;
}
.shelf__label span{
  display:inline-block;
  opacity:0;
  transform:translateY(14rem);
  animation:letterIn .6s var(--ease-out) forwards;
  animation-delay:var(--ld);
}

.shelf__list{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  inset:0;
  z-index:3;
}
.shelf__item{ position:absolute; right:0; }
.shelf__item:nth-child(1){ top:37rem; }
.shelf__item:nth-child(2){ top:257rem; }
.shelf__item:nth-child(3){ top:477rem; }

.book{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:20rem;
  width:var(--w);
  height:200rem;
  padding:20rem;
  margin-right:88rem;
  border:0;
  border-right:4rem solid var(--brown-edge);
  border-radius:var(--radius-xxl) 0 0 var(--radius-xxl);
  background:var(--green-overlay);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 0 0 rgba(4,2,1,0);
  transition:
    width .6s var(--ease-soft),
    border-right-width .45s var(--ease-out),
    border-right-color .45s var(--ease-out),
    background-color .45s ease,
    box-shadow .5s var(--ease-out);
}
.book::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,240,200,.2) 50%,transparent 70%);
  transform:translateX(-130%);
  pointer-events:none;
}
.book.is-open{
  width:448rem;
  border-right-width:5rem;
  border-right-color:var(--gold-500);
  background:rgba(40,93,79,.85);
  box-shadow:0 5rem 5rem rgba(4,2,1,.25);
  outline:none;
}
.book.is-open::before{ animation:sheen 1.1s var(--ease-out) .15s; }

.book__stack{
  position:relative;
  height:160rem;
  flex:none;
}
.book__cover{
  height:160rem;
  width:auto;
  object-fit:cover;
  box-shadow:2rem 2rem 5rem rgba(0,0,0,.25);
}

/* tumpukan komik: merapat saat tertutup, memekar saat terbuka */
.book__stack--multi{ width:171.1rem; }
.book__stack--multi .book__cover{
  position:absolute;
  top:0;
  left:0;
  transition:transform .6s var(--ease-soft);
}
.book__stack--multi .book__cover:nth-child(1){ width:107.412rem; z-index:1; transform:translateX(27rem); }
.book__stack--multi .book__cover:nth-child(2){ width:106.269rem; z-index:2; transform:translateX(14rem); }
.book__stack--multi .book__cover:nth-child(3){ width:107.412rem; z-index:3; transform:translateX(0); }
.book.is-open .book__stack--multi .book__cover:nth-child(1){ transform:translateX(63.69rem); }
.book.is-open .book__stack--multi .book__cover:nth-child(2){ transform:translateX(32.42rem); }

/* teks yang tersingkap saat kartu melebar */
.book__info{
  flex:none;
  width:var(--info-w);
  height:160rem;
  display:flex;
  flex-direction:column;
  gap:20rem;
  align-items:flex-start;
  opacity:0;
  transform:translateX(-16rem);
  transition:opacity .3s ease, transform .55s var(--ease-out);
}
.book.is-open .book__info{
  opacity:1;
  transform:none;
  transition-delay:.16s;
}
.book__infoTop{
  flex:1 0 0;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:20rem;
  align-items:flex-start;
}
.book__title{
  width:100%;
  font-family:"Graduate",serif;
  font-weight:400;
  font-size:20rem;
  line-height:28rem;
  color:#fff;
}
.book__author{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:500;
  font-size:16rem;
  line-height:24rem;
  color:#fff;
}
.book__more{
  display:inline-flex;
  align-items:center;
  gap:8rem;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:700;
  font-size:14rem;
  line-height:20rem;
  color:var(--gold-500);
}
.book__more img{
  width:24rem;
  height:24rem;
  transition:transform .4s var(--ease-pop);
}
.book.is-open .book__more img{ transform:translateX(6rem); }

/* ── Asisten ───────────────────────────────────────────────── */

.assistant{
  position:absolute;
  z-index:7;
  right:-13rem;
  bottom:-64rem;
  width:314rem;
  height:314rem;
  will-change:translate;
}
.assistant__char{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(-6rem 8rem 20rem rgba(60,30,10,.28));
  opacity:0;
}
body.is-ready .assistant__char{
  animation:riseUp 1.1s var(--ease-out) .95s both,
            breathe 5.5s ease-in-out 2.1s infinite;
}
.assistant__bubble{
  position:absolute;
  top:0;
  right:191rem;
  width:max-content;
  max-width:520rem;
  display:flex;
  flex-direction:column;
  gap:10rem;
  padding:14rem 16rem 16rem;
  border-radius:var(--radius-xxl);
  border:1rem solid rgba(255,255,255,.65);
  background:linear-gradient(158deg,rgba(255,252,246,.92) 0%,rgba(250,239,220,.8) 100%);
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
  box-shadow:
    0 18rem 40rem rgba(52,26,10,.22),
    0 2rem 6rem rgba(52,26,10,.1),
    inset 0 1rem 0 rgba(255,255,255,.75);
  transform-origin:100% 30%;
  opacity:0;
  transition:box-shadow .5s var(--ease-out);
}
body.is-ready .assistant__bubble{
  animation:rise .9s var(--ease-out) var(--d,0s) both,
            bubbleFloat 6.5s ease-in-out 3.4s infinite;
}
.assistant__bubble:hover{
  box-shadow:
    0 24rem 52rem rgba(52,26,10,.28),
    0 2rem 6rem rgba(52,26,10,.12),
    inset 0 1rem 0 rgba(255,255,255,.8);
}

/* ekor gelembung: bujur sangkar diputar, warna mengikuti gelembung */
.assistant__tail{
  position:absolute;
  top:54rem;
  right:-9rem;
  width:18rem;
  height:18rem;
  transform:rotate(45deg);
  border-radius:0 5rem 0 0;
  border-top:1rem solid rgba(255,255,255,.65);
  border-right:1rem solid rgba(255,255,255,.65);
  background:linear-gradient(158deg,rgba(253,246,234,.88),rgba(250,239,220,.8));
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
}

/* baris identitas */
.assistant__head{
  display:flex;
  align-items:center;
  gap:10rem;
  padding-bottom:10rem;
  border-bottom:1rem solid rgba(40,93,79,.16);
}
.assistant__avatar{
  flex:none;
  width:34rem;
  height:34rem;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 2rem rgba(40,93,79,.22), 0 3rem 8rem rgba(52,26,10,.18);
}
.assistant__avatar img{ width:100%; height:100%; object-fit:cover; }
.assistant__ident{ display:flex; flex-direction:column; line-height:1; }
.assistant__name{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:700;
  font-size:14rem;
  line-height:18rem;
  color:var(--green-900);
}
.assistant__role{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:500;
  font-size:11rem;
  line-height:16rem;
  color:rgba(20,28,37,.55);
}
.assistant__status{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6rem;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:500;
  font-size:11rem;
  line-height:16rem;
  color:rgba(20,28,37,.5);
}
.assistant__status i{
  width:7rem;
  height:7rem;
  border-radius:50%;
  background:#2fa06f;
  box-shadow:0 0 0 0 rgba(47,160,111,.55);
  animation:statusPulse 2.4s ease-out 2s infinite;
}

/* pesan */
.assistant__text{
  position:relative;
  margin:0;
  min-height:60rem;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:500;
  font-size:14rem;
  line-height:20rem;
  color:var(--text-primary);
}
.assistant__line{
  display:block;
  white-space:nowrap;
  opacity:0;
}
body.is-ready .assistant__line{
  animation:typeIn .55s steps(26,end) var(--d) both;
}

/* titik "sedang mengetik" */
.assistant__typing{
  position:absolute;
  top:4rem;
  left:0;
  display:flex;
  gap:5rem;
  opacity:0;
}
.assistant__typing i{
  width:7rem;
  height:7rem;
  border-radius:50%;
  background:rgba(40,93,79,.45);
}
body.is-ready .assistant__typing{ animation:typingLife 2.05s ease both 1s; }
body.is-ready .assistant__typing i{ animation:typingDot 1.1s ease-in-out infinite; }
body.is-ready .assistant__typing i:nth-child(2){ animation-delay:.15s; }
body.is-ready .assistant__typing i:nth-child(3){ animation-delay:.3s; }

/* tombol ajakan */
.assistant__cta{
  position:relative;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8rem;
  padding:9rem 14rem 9rem 16rem;
  border:0;
  border-radius:999rem;
  background:var(--green-900);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:700;
  font-size:14rem;
  line-height:20rem;
  box-shadow:0 6rem 16rem rgba(40,93,79,.35);
  transition:transform .35s var(--ease-pop), box-shadow .35s var(--ease-out), background-color .3s ease;
}
.assistant__cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%);
  transform:translateX(-120%);
}
.assistant__cta img{
  width:20rem;
  height:20rem;
  filter:brightness(0) invert(1);
  transition:transform .4s var(--ease-pop);
}
.assistant__cta:hover{
  transform:translateY(-2rem);
  background:#2f6d5c;
  box-shadow:0 10rem 22rem rgba(40,93,79,.45);
}
.assistant__cta:hover::after{ animation:sheen .9s var(--ease-out); }
.assistant__cta:hover img{ transform:translateX(5rem); }
.assistant__cta:active{ transform:translateY(0) scale(.98); }

/* ============================================================
   Animasi masuk
   ============================================================ */

.reveal{ opacity:0; transform:translateY(26rem); }
.reveal-up{ opacity:0; transform:translateY(70rem); }
.reveal-x{ opacity:0; transform:translateX(110%); }

body.is-ready .reveal{ animation:rise .9s var(--ease-out) var(--d,0s) forwards; }
body.is-ready .reveal-up{ animation:rise 1.1s var(--ease-out) var(--d,0s) forwards; }
body.is-ready .reveal-x{ animation:slideX .95s var(--ease-out) var(--d,0s) forwards; }

.mask__in{
  transform:translateY(108%);
  opacity:0;
}
body.is-ready .mask__in{ animation:maskIn .95s var(--ease-out) var(--d,0s) forwards; }

.shelf__item{ opacity:0; transform:translateX(150rem) rotate(2deg); }
body.is-ready .shelf__item{ animation:cardIn 1s var(--ease-pop) var(--d,0s) forwards; }
body.is-ready .book__stack{ animation:bookFloat 7s ease-in-out var(--fd,0s) infinite; }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes riseUp{ from{ opacity:0; transform:translateY(70rem); } to{ opacity:1; transform:translateY(0); } }
@keyframes slideX{ to{ opacity:1; transform:translateX(0); } }
@keyframes cardIn{ to{ opacity:1; transform:translateX(0) rotate(0); } }
@keyframes maskIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes lineIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes typeIn{
  from{ opacity:1; clip-path:inset(0 100% 0 0); }
  to{ opacity:1; clip-path:inset(0 0 0 0); }
}
@keyframes typingLife{
  0%{ opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes typingDot{
  0%,60%,100%{ transform:translateY(0); opacity:.45; }
  30%{ transform:translateY(-5rem); opacity:1; }
}
@keyframes statusPulse{
  0%{ box-shadow:0 0 0 0 rgba(47,160,111,.55); }
  70%{ box-shadow:0 0 0 7rem rgba(47,160,111,0); }
  100%{ box-shadow:0 0 0 0 rgba(47,160,111,0); }
}
@keyframes letterIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes glowIn{ to{ opacity:.85; } }

@keyframes kenburns{
  from{ transform:scale(1.07); filter:saturate(.85) brightness(1.06); }
  to{ transform:scale(1); filter:saturate(1) brightness(1); }
}
@keyframes glowPulse{
  0%,100%{ opacity:.85; }
  50%{ opacity:.62; }
}
@keyframes breathe{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-9rem) rotate(-.7deg); }
}
@keyframes bubbleFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5rem); }
}
@keyframes bookFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4rem); }
}
@keyframes sheen{ to{ transform:translateX(130%); } }

/* ============================================================
   Pop up detail buku
   ============================================================ */

.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24rem;
}
.modal[hidden]{ display:none; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,22,17,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .5s var(--ease-out);
}
.modal.is-open .modal__backdrop{ opacity:1; }

.modal__card{
  position:relative;
  width:998rem;
  max-width:100%;
  max-height:100%;
  overflow:auto;
  background:var(--overlay);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 40rem 90rem rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(40rem) scale(.94);
  transition:opacity .55s var(--ease-out), transform .65s var(--ease-pop);
  scrollbar-width:thin;
}
.modal.is-open .modal__card{ opacity:1; transform:translateY(0) scale(1); }

.modal__close{
  position:absolute;
  top:12rem;
  right:12rem;
  width:24rem;
  height:24rem;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  z-index:5;
  transition:transform .4s var(--ease-pop), opacity .3s ease;
  opacity:.9;
}
.modal__close:hover{ transform:rotate(90deg) scale(1.15); opacity:1; }

.modal__head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:41rem;
  padding:40rem 80rem 0;
}

.modal__cover{
  flex:none;
  height:260rem;
  perspective:900rem;
}
.modal__coverStack{
  position:relative;
  height:260rem;
  transform-style:preserve-3d;
}
.modal__cover img{
  height:260rem;
  width:auto;
  object-fit:cover;
  box-shadow:5rem 5rem 10rem rgba(0,0,0,.25);
}
.modal__coverStack--multi img{
  position:absolute;
  top:0;
  height:260rem;
  transition:transform .7s var(--ease-pop), filter .5s ease, opacity .5s ease;
  backface-visibility:hidden;
}

.modal__info{
  flex:1 1 auto;
  min-width:0;
  align-self:flex-start;
  display:flex;
  align-items:flex-end;
  gap:20rem;
}
.modal__meta{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20rem;
}
.modal__card--tabs .modal__info{ align-self:stretch; }
.modal__card--tabs .modal__meta{ height:100%; justify-content:space-between; gap:0; }
.modal__metaTop{ display:flex; flex-direction:column; gap:20rem; }

.modal__title{
  margin:0;
  font-family:"Graduate",serif;
  font-weight:400;
  font-size:32rem;
  line-height:1.18;
  letter-spacing:.32rem;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 3rem 12rem rgba(0,0,0,.3);
}
.modal__credits{
  margin:0;
  display:flex;
  align-items:center;
  gap:12rem;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:500;
  font-size:16rem;
  line-height:24rem;
  color:#fff;
  white-space:nowrap;
}
.modal__credits i{
  font-style:normal;
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:22rem;
  color:var(--text-tertiary);
}
.modal__price{
  margin:0;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:700;
  font-size:24rem;
  line-height:32rem;
  letter-spacing:-.24rem;
  color:#fff;
  white-space:nowrap;
}

.modal__actions{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8rem;
}
.modal__card--tabs .modal__actions{ padding-bottom:78rem; }
.modal__actions--stack{ flex-direction:column; align-items:stretch; }

.btn--pill{
  padding:10rem 20rem;
  border-radius:var(--radius-m);
  font-weight:500;
  font-size:14rem;
  line-height:20rem;
  text-decoration:none;
  filter:drop-shadow(0 1rem 1rem rgba(20,28,37,.04));
  white-space:nowrap;
}
.btn--ghost{
  background:#fff;
  border:1rem solid var(--border-200);
  color:var(--text-secondary);
}
.btn--ghost:hover{ transform:translateY(-2rem); box-shadow:0 8rem 18rem rgba(0,0,0,.18); }
.btn--gold{ background:var(--gold-600); color:#fff; }
.btn--gold:hover{ background:var(--gold-700); transform:translateY(-2rem); box-shadow:0 8rem 18rem rgba(180,120,0,.45); }
.btn--pill:active{ transform:translateY(0) scale(.98); }
.btn--pill img{ width:20rem; height:20rem; flex:none; }

/* tab volume */
.modal__tabs{
  display:flex;
  gap:20rem;
  align-items:flex-start;
}
.tab{
  position:relative;
  padding:10rem 0 0;
  border:0;
  background:none;
  cursor:pointer;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:500;
  font-size:16rem;
  line-height:24rem;
  color:var(--text-tertiary);
  white-space:nowrap;
  transition:color .35s ease;
}
.tab::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2rem;
  border-radius:var(--radius-s) var(--radius-s) 0 0;
  background:var(--text-primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.tab:hover{ color:var(--text-secondary); }
.tab.is-active{ color:var(--text-primary); }
.tab.is-active::after{ transform:scaleX(1); }

/* badan teks */
.modal__body{
  position:relative;
  z-index:1;
  margin:-59rem 40rem 0;
  background:#fff;
  padding:80rem 20rem 20rem;
  clip-path:inset(0 0 0 0);
}
.modal.is-open .modal__body{ animation:panelOpen .75s var(--ease-out) .12s both; }

.modal__bodyInner p{
  margin:0 0 24rem;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-weight:400;
  font-size:16rem;
  line-height:24rem;
  color:var(--text-primary);
  text-align:justify;
}
.modal__bodyInner p:last-child{ margin-bottom:0; }

@keyframes panelOpen{
  from{ clip-path:inset(0 0 100% 0); }
  to{ clip-path:inset(0 0 0 0); }
}

/* animasi isi pop up (dipicu via .is-open) */
.modal.is-open .modal__cover{ animation:coverIn .9s var(--ease-pop) .1s both; }
.modal.is-open .modal__title{ animation:rise .7s var(--ease-out) .22s both; }
.modal.is-open .modal__credits{ animation:rise .7s var(--ease-out) .3s both; }
.modal.is-open .modal__price{ animation:rise .7s var(--ease-out) .38s both; }
.modal.is-open .modal__actions{ animation:rise .7s var(--ease-out) .46s both; }
.modal.is-open .modal__tabs{ animation:rise .7s var(--ease-out) .5s both; }
.modal.is-open .modal__bodyInner{ animation:rise .8s var(--ease-out) .42s both; }

@keyframes coverIn{
  from{ opacity:0; transform:translateY(34rem) rotateY(-32deg) scale(.92); }
  to{ opacity:1; transform:translateY(0) rotateY(0) scale(1); }
}

/* pergantian volume */
.is-swapping .modal__bodyInner{ animation:swapText .5s var(--ease-out) both; }
@keyframes swapText{
  0%{ opacity:1; transform:translateY(0); }
  40%{ opacity:0; transform:translateY(12rem); }
  100%{ opacity:1; transform:translateY(0); }
}

body.modal-open .stage{ pointer-events:none; }
body.modal-open .bg__img{ filter:saturate(.75) blur(1px); transition:filter .6s ease; }

/* ============================================================
   Tablet & mobile
   ============================================================ */

@media (max-width:1000px), (max-height:620px){
  body{ overflow:auto; }

  .stage{
    position:relative;
    inset:auto;
    min-height:100dvh;
    padding:32rem 24rem 40rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:32rem;
  }

  .bg{ position:fixed; inset:0; }
  .bg__vignette{ position:fixed; }
  .bg__vignette{ background:linear-gradient(to bottom,rgba(255,250,238,.55),rgba(255,246,230,.75)); }
  .glow{ display:none; }

  .hero{
    position:relative;
    left:auto; bottom:auto;
    width:100%;
    max-width:560rem;
    margin:0 auto;
    padding:0;
  }
  .hero__brand{ height:auto; }
  .hero__logo{ width:88rem; height:88rem; }
  .hero__title-sm{ font-size:20rem; }
  .hero__title-lg{ font-size:26rem; }
  .mask__in{ line-height:30rem; }

  .shelf{
    position:relative;
    right:auto; top:auto;
    margin:0 auto;
    width:100%;
    max-width:560rem;
    height:auto;
  }
  .shelf__spine{ display:none; }
  .shelf{ display:flex; flex-direction:column; }
  .shelf__tab{
    position:relative;
    order:-1;
    width:100%;
    height:auto;
    border-radius:var(--radius-xxl);
    padding:12rem;
    margin-bottom:16rem;
  }
  .shelf__label{
    writing-mode:horizontal-tb;
    transform:none;
    font-size:22rem;
    padding:0;
  }
  .shelf__list{
    position:relative;
    inset:auto;
    display:flex;
    gap:12rem;
    overflow-x:auto;
    padding-bottom:8rem;
    scroll-snap-type:x mandatory;
  }
  .shelf__item{ position:relative; top:auto !important; right:auto; flex:none; scroll-snap-align:start; }
  .book{
    width:236rem;
    height:auto;
    flex-direction:column;
    align-items:center;
    gap:16rem;
    margin-right:0;
    border-right:0;
    border-bottom:4rem solid var(--brown-edge);
    border-radius:var(--radius-xxl);
  }
  .book.is-open{
    width:236rem;
    border-right:0;
    border-bottom-color:var(--gold-500);
  }
  .book__stack--multi{ margin:0 auto; }
  .book__stack--multi .book__cover:nth-child(1){ transform:translateX(63.69rem); }
  .book__stack--multi .book__cover:nth-child(2){ transform:translateX(32.42rem); }
  .book__info{
    width:100%;
    height:auto;
    gap:12rem;
    opacity:1;
    transform:none;
  }
  .book__infoTop{ flex:none; gap:8rem; }
  .book__title{ font-size:18rem; line-height:24rem; }
  body.is-ready .book__stack{ animation:none; }

  .assistant{
    position:relative;
    right:auto; bottom:auto;
    width:100%;
    max-width:560rem;
    margin:0 auto;
    height:auto;
    display:flex;
    align-items:flex-end;
    gap:8rem;
  }
  .assistant__bubble{
    position:relative;
    top:auto; right:auto;
    width:auto;
    max-width:none;
    flex:1 1 auto;
  }
  .assistant__line{ white-space:normal; }
  .assistant__text{ min-height:0; }
  .assistant__tail{ display:none; }
  .assistant__char{
    position:relative;
    inset:auto;
    width:120rem;
    height:auto;
    flex:none;
  }

  .modal{ padding:0; align-items:flex-start; }
  .modal__card{ width:100%; min-height:100dvh; }
  .modal__head{ flex-direction:column; align-items:center; padding:56rem 24rem 0; gap:24rem; }
  .modal__cover,.modal__coverStack,.modal__cover img,.modal__coverStack--multi img{ height:220rem; }
  .modal__info{ flex-direction:column; align-items:flex-start; gap:20rem; width:100%; }
  .modal__card--tabs .modal__actions{ padding-bottom:0; }
  .modal__body{ margin:24rem 24rem 40rem; padding:24rem; }
  .modal__title{ font-size:26rem; white-space:normal; }
  .modal__bodyInner p{ text-align:left; }
  .modal__credits{ flex-wrap:wrap; white-space:normal; }
  .modal.is-open .modal__body{ animation:none; }
}

/* ============================================================
   Hormati preferensi gerak minimal
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-up,.reveal-x,.mask__in,.shelf__item{ opacity:1; transform:none; }
  .assistant__line{ opacity:1; clip-path:none; }
  .assistant__typing{ display:none; }
  .glow{ opacity:.85; }
}