/* ==========================================================================
   SVADAYA v2
   Sistem warna dan tipografi diambil dari tiga situs produk yang sudah jalan:
   phybatik.co.id, nusantara.kosmogram.id, dan obrolsandi.budaya-indonesia.ai,
   ditambah dua kuning dari brand guideline hej.Sadaya.
   ========================================================================== */

:root {
  /* Bidang gelap. Navy ini yang dipakai bersama oleh ketiga situs produk. */
  --ink:        #0D151E;   /* phyBatik   */
  --ink-2:      #141C25;   /* Obrol Sandi + brand guideline */
  --ink-3:      #1B2733;
  --ink-4:      #24313E;
  --line:       rgba(234,224,206,.13);

  /* Teks di bidang gelap */
  --cream:      #EAE0CE;
  --cream-2:    #C4BCAD;
  --slate:      #93A1B1;

  /* Aksen */
  --gold:       #E9B949;   /* Kosmogram  */
  --gold-2:     #D2A163;   /* phyBatik   */
  --yellow:     #F8D547;   /* brand, warna tindakan */
  --yellow-2:   #EEC623;
  --green:      #2E7361;   /* Obrol Sandi */
  --green-2:    #3C9078;
  --green-d:    #0F4D3A;
  --clay:       #C86A3D;

  /* Bidang terang */
  --paper:      #F6F2EA;
  --paper-2:    #EDE6D6;
  --on-paper:   #141C25;
  --on-paper-2: #5D6470;

  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Fraunces, "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  --r: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-s: cubic-bezier(.4, 0, .2, 1);
  --nav-h: 56px;
}

/* --- dasar ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Header menempel di atas, jadi sasaran anchor perlu diberi jarak sebesar
   tinggi header ditambah sedikit nafas. Kalau tidak, judul seksinya
   tertutup begitu tautan menu diklik. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Seksi di beranda punya padding atas yang lebar. Kalau anchor-nya
   disejajarkan dengan tepi seksi, yang mendarat di layar cuma ruang kosong.
   Jadi ditarik naik hampir setinggi padding itu, supaya kicker dan judul
   seksinya yang berhenti tepat di bawah header. */
.sec[id] { scroll-margin-top: calc(var(--nav-h) - 100px); }
[id]:not(.sec) { scroll-margin-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--sans);
  font-size: clamp(15.5px, .45vw + 14.2px, 17px);
  line-height: 1.65;
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 5px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--ink);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }

/* --- tipografi ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 40;
}
.dsp { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.03; letter-spacing: -.028em; }
.dsp--sm { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.dsp em, .h2 em { font-style: italic; color: var(--gold); font-variation-settings: "SOFT" 60, "WONK" 1; }
.h2 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); }
.h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: .7em;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.kicker--dark { color: var(--gold-2); }

.lead { font-size: clamp(1rem, .6vw + .86rem, 1.2rem); line-height: 1.6; color: var(--slate); margin-top: 1rem; }
.sec--paper .lead, .sec--paper2 .lead { color: var(--on-paper-2); }

.prose p { color: var(--on-paper-2); font-size: clamp(.99rem, .45vw + .88rem, 1.14rem); line-height: 1.72; }
.prose p + p { margin-top: 1.05em; }
.prose--dark p { color: var(--cream-2); }
.prose a { border-bottom: 1px solid currentColor; }

/* --- tombol & tautan ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .82em 1.4em;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-size: .93rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background-color .3s var(--ease-s), border-color .3s var(--ease-s), opacity .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--y { background: var(--yellow); color: #16202B; }
.btn--y:hover { background: var(--yellow-2); }
.btn--dark { background: var(--ink-2); color: var(--cream); }
.btn--dark:hover { background: var(--ink-3); }
.btn--clay { background: var(--clay); color: #FFF6F1; }
.btn--clay:hover { background: #B85F35; }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(234,224,206,.28); }
.btn--ghost:hover { border-color: rgba(234,224,206,.6); }
.btn--sm { padding: .55em 1.05em; font-size: .84rem; }
.btn .ico { transition: transform .4s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.lnk {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .93rem; font-weight: 600;
  color: var(--accent, var(--gold));
  transition: gap .35s var(--ease);
}
.lnk:hover { gap: .8em; }
.lnk--dark { color: var(--clay); }

.crumb {
  display: flex; width: fit-content; margin-bottom: 16px;
  align-items: center; gap: .5em;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); transition: color .3s var(--ease-s);
}
.crumb .ico { transform: rotate(180deg); }
.crumb:hover { color: var(--cream); }

/* --- badge toko ----------------------------------------------------------- */
.stores { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.stores--c { justify-content: center; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 17px 9px 14px; border-radius: 13px;
  background: rgba(234,224,206,.07); border: 1px solid rgba(234,224,206,.18);
  color: var(--cream);
  transition: transform .4s var(--ease), background-color .3s var(--ease-s);
}
.store:hover { transform: translateY(-2px); background: rgba(234,224,206,.13); }
.store svg { width: 21px; height: 21px; flex: none; fill: currentColor; }
.store span { display: block; line-height: 1.15; }
.store__top { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.store__main { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.sec--paper .store, .sec--paper2 .store {
  background: rgba(20,28,37,.05); border-color: rgba(20,28,37,.14); color: var(--on-paper);
}
.sec--paper .store:hover, .sec--paper2 .store:hover { background: rgba(20,28,37,.09); }

/* --- navigasi ------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(13,21,30,.72);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-s), border-color .4s var(--ease-s);
}
.nav.is-stuck { background: rgba(13,21,30,.92); border-bottom-color: var(--line); }
.nav__in {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: 18px;
}
.brand { flex: none; }
.brand img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 4px; margin-inline: auto; }
.nav__links a {
  padding: .45em .75em; border-radius: 8px;
  font-size: .82rem; color: var(--cream-2);
  transition: color .25s var(--ease-s), background-color .25s var(--ease-s);
}
.nav__links a:hover { color: var(--cream); background: rgba(234,224,206,.07); }
.nav__links a.is-active { color: var(--gold); }
.nav__end { display: flex; align-items: center; gap: 12px; flex: none; }

.lang {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--slate);
  padding: .35em .6em; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .3s var(--ease-s);
}
.lang:hover { border-color: rgba(234,224,206,.35); }
.lang .is-on { color: var(--gold); }
.lang i { font-style: normal; opacity: .45; }

.burger {
  display: none; position: relative;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
}
.burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--cream);
  transition: transform .4s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { bottom: 14px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(13,21,30,.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--pad) 18px;
  display: grid;
}
.menu a { padding: .85em .2em; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.menu a:last-child { border-bottom: 0; }
/* Aturan penulis mengalahkan [hidden] bawaan browser, jadi harus dinyatakan. */
.menu[hidden] { display: none; }

/* --- hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(56px, 9vw, 110px)) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
  background: var(--ink);
}
.hero__bg, .phero__bg, .bhero__bg, .bkhero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__batik {
  position: absolute; inset: 0;
  background: url("../logo/batik-isen.png") repeat;
  background-size: 61px 60px;
  opacity: .26;
}
.hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 62% at 72% 26%, color-mix(in srgb, var(--accent, var(--gold)) 26%, transparent) 0%, transparent 66%),
    radial-gradient(70% 60% at 12% 96%, rgba(46,115,97,.30) 0%, transparent 68%),
    linear-gradient(180deg, rgba(13,21,30,.72) 0%, rgba(13,21,30,.34) 34%, var(--ink) 100%);
}
.hero__in { position: relative; z-index: 2; text-align: center; }
.hero .dsp { margin-top: 1.3rem; max-width: 18ch; margin-inline: auto; }
.hero__sub {
  margin: 1.4rem auto 0; max-width: 60ch;
  font-size: clamp(1rem, .5vw + .88rem, 1.18rem);
  color: var(--cream-2); line-height: 1.62;
}
.hero__act { margin-top: 2.1rem; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.hicons {
  margin-top: clamp(44px, 6vw, 72px);
  display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap;
}
.hicon { display: grid; justify-items: center; gap: 10px; width: 92px; }
.hicon img {
  width: clamp(52px, 5.4vw, 64px); height: auto; border-radius: 23%;
  border: 1px solid rgba(234,224,206,.16);
  box-shadow: 0 3px 8px rgba(0,0,0,.34), 0 16px 34px rgba(0,0,0,.3);
  transition: transform .45s var(--ease);
}
.hicon span { font-family: var(--mono); font-size: .64rem; letter-spacing: .07em; color: var(--slate); text-align: center; }
.hicon:hover img { transform: translateY(-5px) scale(1.04); }
.hicon:hover span { color: var(--cream-2); }

.hero__note {
  margin-top: clamp(34px, 5vw, 52px);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .09em;
  color: var(--slate);
}
.hero__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex: none; }

/* --- seksi ---------------------------------------------------------------- */
.sec { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.sec--tight { padding-block: clamp(48px, 6vw, 80px); }
.sec--paper { background: var(--paper); color: var(--on-paper); }
.sec--paper2 { background: var(--paper-2); color: var(--on-paper); }
.sec--ink { background: var(--ink-2); }
.sec--green { background: var(--green-d); }
.sec--paper .h2, .sec--paper2 .h2 { color: var(--on-paper); }
.sec--paper .dsp em, .sec--paper2 .dsp em, .sec--paper .h2 em { color: var(--clay); }

.shead { max-width: 62ch; }
.shead .h2 { margin-top: .55rem; }
.two { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.two--faq { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
.sticky { position: sticky; top: 96px; }

/* --- petak produk --------------------------------------------------------- */
.tiles {
  margin-top: clamp(36px, 4.5vw, 60px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.tile {
  grid-column: span 2;
  position: relative; overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-2);
  border: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 54px);
  isolation: isolate;
}
.tile--half { grid-column: span 1; grid-template-columns: 1fr; }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(72% 82% at 82% 18%,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 68%);
}
.tile--batik::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../logo/batik-isen.png") repeat; background-size: 58px 57px; opacity: .3;
}
.tile--light { background: var(--paper); border-color: rgba(20,28,37,.1); color: var(--on-paper); }
.tile--light .tile__kicker { color: var(--on-paper-2); }
.tile--green { background: linear-gradient(150deg, #1E4E42 0%, #12332C 72%); }
.tile--dark { background: linear-gradient(150deg, #17212C 0%, #0C141D 74%); }

.tile__kicker {
  font-family: var(--mono); font-size: .71rem; letter-spacing: .07em; line-height: 1.55;
  color: var(--slate);
}
.tile__name { font-size: clamp(1.7rem, 2.7vw, 2.5rem); margin-top: 14px; }
.tile--half .tile__name { font-size: clamp(1.55rem, 2.1vw, 2rem); }
.tile__links { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; }
.tile--light .lnk { color: var(--green); }
.tile__vis { display: flex; justify-content: center; }

.phones { display: grid; gap: 12px; width: 100%; }
.phones--3 { grid-template-columns: repeat(3, 1fr); }
.phones--2 { grid-template-columns: repeat(2, 1fr); max-width: 340px; margin-inline: auto; }
.phone {
  /* Tingginya mengikuti isinya, bukan diregangkan menyamai bingkai tertinggi
     di barisnya, supaya rasio layar aplikasinya tetap benar. */
  align-self: start;
  position: relative; border-radius: 18px; overflow: hidden;
  border: 4px solid #10161E; background: #10161E;
  box-shadow: 0 8px 18px rgba(0,0,0,.3), 0 26px 54px rgba(0,0,0,.34);
  transition: transform .7s var(--ease);
}
.phones--3 .phone:nth-child(1) { transform: translateY(16px) rotate(-2.5deg); }
.phones--3 .phone:nth-child(3) { transform: translateY(16px) rotate(2.5deg); }
.tile:hover .phones--3 .phone:nth-child(1) { transform: translateY(8px) rotate(-4deg); }
.tile:hover .phones--3 .phone:nth-child(3) { transform: translateY(8px) rotate(4deg); }
.tile:hover .phones--3 .phone:nth-child(2) { transform: translateY(-6px); }
.phones--2 .phone:nth-child(2) { transform: translateY(18px); }
.tile:hover .phones--2 .phone:nth-child(2) { transform: translateY(10px); }

.bigmark { display: grid; place-items: center; }
.bigmark img { width: min(100%, 300px); filter: drop-shadow(0 24px 50px rgba(0,0,0,.5)); }

/* --- rak buku ------------------------------------------------------------- */
.shelf {
  margin-top: clamp(34px, 4vw, 54px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 152px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
.bk { display: grid; gap: 14px; }
/* Sampulnya beda proporsi: Kode-Kode 17x21 cm, sisanya 12x18 cm. Disejajarkan
   lewat tinggi bingkai, bukan lebar, supaya berdiri di satu garis seperti di rak. */
.bk__frame {
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(178px, 19vw, 252px);
  perspective: 900px;
}
.bk__frame img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  border-radius: 3px 7px 7px 3px;
  box-shadow: inset 3px 0 6px rgba(0,0,0,.3), 0 3px 8px rgba(20,28,37,.16), 0 20px 40px rgba(20,28,37,.18);
  transition: transform .65s var(--ease), box-shadow .65s var(--ease);
}
.bk:hover img { transform: rotateY(-14deg) translateZ(12px) translateY(-6px); }
.bk__meta strong { display: block; font-family: var(--serif); font-size: 1rem; line-height: 1.25; }
.bk__meta span { display: block; margin-top: 4px; font-size: .8rem; color: var(--on-paper-2); }
.shelf__foot {
  margin-top: clamp(32px, 4vw, 52px); padding-top: 26px;
  border-top: 1px solid rgba(20,28,37,.12);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.shelf__foot .lead { margin: 0; max-width: 48ch; }

/* --- ekosistem ------------------------------------------------------------ */
.ecos {
  margin-top: clamp(34px, 4vw, 54px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px; background: rgba(234,224,206,.16);
  border: 1px solid rgba(234,224,206,.16); border-radius: 18px; overflow: hidden;
}
.eco { background: var(--green-d); padding: clamp(20px, 2.2vw, 30px); transition: background-color .4s var(--ease-s); }
.eco:hover { background: #145B45; }
.eco h3 { font-size: 1.05rem; color: var(--gold); }
.eco p { margin-top: 10px; font-size: .9rem; line-height: 1.6; color: rgba(234,224,206,.78); }

/* --- tanya jawab ---------------------------------------------------------- */
.qas { border-top: 1px solid rgba(20,28,37,.14); }
.qa { border-bottom: 1px solid rgba(20,28,37,.14); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-block: clamp(16px, 1.8vw, 22px);
  font-family: var(--serif); font-size: clamp(1.02rem, 1.1vw, 1.18rem); line-height: 1.3;
  transition: color .3s var(--ease-s);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--clay); }
.qa__m { position: relative; flex: none; width: 15px; height: 15px; }
.qa__m::before, .qa__m::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.6px; background: var(--clay);
  transition: transform .4s var(--ease), opacity .3s;
}
.qa__m::after { transform: rotate(90deg); }
.qa[open] .qa__m::after { transform: none; opacity: 0; }
.qa__b { padding-bottom: clamp(16px, 1.8vw, 22px); max-width: 64ch; }
.qa__b p { font-size: .96rem; line-height: 1.66; color: var(--on-paper-2); }
.qa[open] .qa__b { animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(-5px); } }

/* --- kontak --------------------------------------------------------------- */
.lines { margin-top: 32px; }
.line {
  display: flex; align-items: center; gap: 18px;
  padding: 17px 2px; border-top: 1px solid rgba(20,28,37,.12);
  transition: padding-left .4s var(--ease);
}
.line:last-child { border-bottom: 1px solid rgba(20,28,37,.12); }
.line:hover { padding-left: 10px; }
.line span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-paper-2); width: 92px; flex: none;
}
.line b { font-weight: 600; font-size: 1rem; }
.line b small { display: block; font-weight: 400; font-size: .8rem; color: var(--on-paper-2); }

.form { display: grid; gap: 15px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fld { display: grid; gap: 7px; }
.fld label { font-size: .8rem; font-weight: 600; color: #4C5461; }
.fld input, .fld textarea {
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid rgba(20,28,37,.16); background: #FFFDF9; resize: vertical;
  transition: border-color .3s var(--ease-s), box-shadow .3s var(--ease-s);
}
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(210,161,99,.18);
}
.form__act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form__st { font-size: .87rem; font-weight: 600; color: var(--green); min-height: 1.2em; }
.form__note { font-size: .82rem; color: var(--on-paper-2); }
.form__note a { border-bottom: 1px solid currentColor; }

/* --- hero halaman produk -------------------------------------------------- */
.phero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(46px, 6vw, 84px)) 0 clamp(48px, 7vw, 92px);
  background: var(--ink);
}
.phero--light { background: var(--ink); }
.phero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.phero__icon { width: 76px; height: auto; border-radius: 22%; margin-top: 20px; border: 1px solid rgba(234,224,206,.16); box-shadow: 0 4px 12px rgba(0,0,0,.34), 0 20px 44px rgba(0,0,0,.36); }
.phero .dsp { margin-top: 20px; }
.phero__tag { margin-top: 16px; max-width: 34ch; font-size: clamp(1rem, .55vw + .88rem, 1.22rem); color: var(--cream-2); line-height: 1.55; }
.phero__site {
  display: inline-flex; align-items: center; gap: .45em; margin-top: 20px;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .05em;
  color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  padding-bottom: 3px; transition: gap .35s var(--ease);
}
.phero__site:hover { gap: .8em; }

/* --- fitur ---------------------------------------------------------------- */
.feats {
  margin-top: clamp(32px, 4vw, 50px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 244px), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.feat {
  padding: clamp(22px, 2.4vw, 30px); border-radius: 18px;
  background: var(--paper); border: 1px solid rgba(20,28,37,.08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.feat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,28,37,.1); }
.feat h3 { margin-top: 12px; font-size: 1.12rem; }
.feat p { margin-top: 9px; font-size: .93rem; line-height: 1.62; color: var(--on-paper-2); }
.feat p a { border-bottom: 1px solid rgba(20,28,37,.28); }

/* --- seksi halaman produk ------------------------------------------------- */
/* Latar gelap: teks dan garis dibalik. */
.sec--ink .feat:hover, .sec--green .feat:hover { box-shadow: 0 18px 40px rgba(0,0,0,.3); }

/* Langkah bernomor */
.steps {
  margin-top: clamp(32px, 4vw, 50px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.step {
  padding: clamp(22px, 2.4vw, 30px); border-radius: 18px;
  background: var(--paper); border: 1px solid rgba(20,28,37,.08);
}

.phero__meta {
  margin-top: 16px; font-family: var(--mono); font-size: .7rem; letter-spacing: .09em;
  color: var(--slate);
}

/* Tombol utama, catatan harga, dan deret mitra di hero produk. Hanya muncul
   pada produk yang situsnya memang memasang itu, jadi semuanya opsional. */

/* Lencana dan strip angka di dalam kartu fitur. */

/* Deret skala: 1 iterasi, 3 iterasi, tak hingga. */

/* Dua tombol di satu kartu harga, dan butir batasan versi gratis. */

/* Kartu contoh: bacaan harian Kosmogram, motif hari ini phyBatik. */
.sec--ink .samp__k, .sec--green .samp__k, .sec--ink .samp__n, .sec--green .samp__n {
  color: var(--slate);
}
.sec--ink .samp__c, .sec--green .samp__c {
  background: var(--ink-2); border-color: var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.sec--ink .samp__e, .sec--green .samp__e { color: var(--gold); }

/* Bagian yang menyambung langsung dari seksi di atasnya, sewarna, tanpa jeda. */
.sec--ink .chips__n, .sec--green .chips__n { color: var(--slate); }

/* Blok penuh: di situs produk aslinya tiap bagian ini berdiri sendiri selebar
   halaman, jadi bentuknya tidak diringkas jadi kartu berjajar. */
.sec--ink .blk, .sec--green .blk { border-top-color: rgba(234,224,206,.14); }
.sec--ink .blk:last-child, .sec--green .blk:last-child {
  border-bottom-color: rgba(234,224,206,.14);
}
.sec--ink .blk__h, .sec--green .blk__h { color: var(--cream); }
.sec--ink .blk__b p, .sec--green .blk__b p { color: var(--cream-2); }
.sec--ink .blk__n span, .sec--green .blk__n span { color: var(--slate); }
.sec--ink .blk__n b, .sec--green .blk__n b { color: var(--gold); }

/* Bacaan parameter kanvas Nithik phyBatik. */
.sec--ink .ro, .sec--green .ro {
  background: rgba(234,224,206,.05); border-color: var(--line);
}
.sec--ink .ro__k, .sec--green .ro__k { color: var(--slate); }
.sec--ink .ro__g b, .sec--green .ro__g b { color: var(--gold); }
.sec--ink .ro__f, .sec--green .ro__f { border-top-color: rgba(234,224,206,.14); }
.sec--ink .ro__a span, .sec--green .ro__a span {
  background: rgba(234,224,206,.06); border-color: var(--line); color: var(--cream-2);
}

/* Panel "hari ini" Kosmogram. */

/* --- galeri cuplikan ------------------------------------------------------ */
.strip {
  margin-top: clamp(32px, 4vw, 50px);
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: rgba(234,224,206,.22) transparent;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: rgba(234,224,206,.2); border-radius: 99px; }
.strip figure { flex: 0 0 auto; width: clamp(158px, 19vw, 226px); scroll-snap-align: center; margin: 0; }
.strip img {
  width: 100%; border-radius: 18px; border: 4px solid #10161E;
  box-shadow: 0 18px 40px rgba(0,0,0,.4); transition: transform .55s var(--ease);
}
.strip figure:hover img { transform: translateY(-8px); }

/* --- pita ajakan ---------------------------------------------------------- */
.cta {
  text-align: center; border-radius: var(--r);
  padding: clamp(38px, 5vw, 72px) clamp(22px, 4vw, 56px);
  background: linear-gradient(155deg, var(--ink-2) 0%, var(--ink) 74%);
  color: var(--cream); position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 50% 108%, color-mix(in srgb, var(--accent, var(--gold)) 26%, transparent), transparent 66%);
}
.cta > * { position: relative; }
.cta .h2 { max-width: 20ch; margin-inline: auto; color: var(--cream); }
.cta p { margin: 16px auto 0; max-width: 50ch; color: var(--cream-2); }
.cta .store { background: rgba(234,224,206,.08); border-color: rgba(234,224,206,.2); color: var(--cream); }

/* --- kartu terkait -------------------------------------------------------- */
.rels {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 13px;
}
.rel {
  display: flex; align-items: center; gap: 13px;
  padding: 14px; border-radius: 16px;
  background: var(--paper); border: 1px solid rgba(20,28,37,.08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rel:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,28,37,.1); }
.rel img { width: 44px; height: 44px; border-radius: 11px; flex: none; border: 1px solid rgba(20,28,37,.08); object-fit: cover; }
.rels--bk .rel img { width: 44px; height: 66px; border-radius: 3px 5px 5px 3px; }
.rel strong { display: block; font-size: .94rem; letter-spacing: -.01em; }
.rel > span > span { font-size: .78rem; color: var(--on-paper-2); }

/* --- halaman buku --------------------------------------------------------- */
.bhero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 100px)) 0 clamp(48px, 6vw, 80px);
  background: var(--ink);
}
.bhero .wrap { position: relative; z-index: 2; }
.bhero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,21,30,.55) 0%, rgba(13,21,30,.2) 40%, var(--ink) 100%);
}
.bhero .dsp { margin-top: 1.1rem; }
.bhero__sub { margin-top: 1.1rem; max-width: 62ch; color: var(--cream-2); font-size: clamp(1rem, .5vw + .88rem, 1.14rem); }

.bcards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 408px), 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}
.bcard {
  display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 24px; align-items: start;
  padding: 20px; border-radius: 20px;
  background: #FFFDF9; border: 1px solid rgba(20,28,37,.08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20,28,37,.12); }
.bcard__frame img {
  width: 100%; border-radius: 3px 6px 6px 3px;
  box-shadow: inset 2px 0 5px rgba(0,0,0,.28), 0 8px 20px rgba(20,28,37,.2);
}
.bcard__k { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.bcard__b strong { display: block; margin-top: 8px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.bcard__s { display: block; margin-top: 7px; font-size: .88rem; color: var(--on-paper-2); line-height: 1.5; }
.bcard .lnk { margin-top: 14px; color: var(--clay); font-size: .86rem; }

.bkhero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(46px, 6vw, 84px)) 0 clamp(48px, 7vw, 92px);
  background: var(--ink);
}
.bkhero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,1fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.bkhero__cover img {
  width: 100%; border-radius: 4px 10px 10px 4px;
  box-shadow: inset 4px 0 9px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.4), 0 34px 70px rgba(0,0,0,.44);
}
.bkhero .dsp { margin-top: 14px; }
.bkhero__sub { margin-top: 12px; font-size: clamp(1rem, .5vw + .88rem, 1.18rem); color: var(--gold); font-family: var(--serif); font-style: italic; }
.bkhero .prose { margin-top: 24px; }
.bkhero__act { margin-top: 30px; }


/* --- footer --------------------------------------------------------------- */
.foot {
  background: var(--ink); border-top: 1px solid var(--line);
  padding: clamp(40px, 4.5vw, 62px) 0 0;
}
.foot__in {
  width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.foot__brand { flex: none; }
.foot__brand img { height: 26px; width: auto; }
.foot__brand p {
  margin-top: 12px; max-width: 34ch; font-size: .9rem; line-height: 1.6;
  color: var(--cream-2);
}
.foot__links {
  display: flex; flex-wrap: wrap; gap: 6px 24px; margin-left: auto;
}
.foot__links a {
  font-size: .9rem; color: var(--cream-2); transition: color .25s var(--ease-s);
}
.foot__links a:hover { color: var(--cream); }
.foot__bar {
  width: min(100% - (var(--pad) * 2), var(--wrap)); margin: clamp(36px, 5vw, 60px) auto 0;
  padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; color: rgba(234,224,206,.4);
}

/* --- animasi masuk -------------------------------------------------------- */
[data-r] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-r].in { opacity: 1; transform: none; }

/* --- responsif ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .two, .two--faq, .phero__in, .bkhero__in { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .tile { grid-template-columns: 1fr; }
  .tile--half { grid-column: span 2; }
  .bkhero__cover { max-width: 260px; }
}

@media (min-width: 861px) {
  .menu { display: none; }
}

@media (max-width: 860px) {
  .blk { grid-template-columns: 1fr; gap: 14px; }

  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .nav__end { margin-left: auto; }
  .bcard { grid-template-columns: 108px minmax(0,1fr); }
}

@media (max-width: 620px) {
  :root { --r: 20px; }
  .hero { padding-top: calc(var(--nav-h) + 44px); }
  .hero .dsp { max-width: 100%; }
  .hicon { width: 74px; }
  .hicon span { font-size: .58rem; }
  .form__row { grid-template-columns: 1fr; }
  .line { flex-direction: column; align-items: flex-start; gap: 3px; }
  .line span { width: auto; }
  .phones--3 { gap: 8px; }
  .spec { grid-template-columns: 1fr; gap: 5px; }
  .shelf__foot { flex-direction: column; align-items: flex-start; }
  .bcard { grid-template-columns: 1fr; }
  .bcard__frame { max-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-r] { opacity: 1; transform: none; }
}

/* =========================================================================
   Halaman buku

   Tiap judul membawa warna aksennya sendiri lewat --accent, diambil dari
   sampulnya. Warna itu dipakai untuk cahaya di belakang sampul, tombol beli,
   dan garis-garis kecil, supaya tiap buku punya wajahnya sendiri.
   ========================================================================= */

.bkhero { position: relative; overflow: hidden; background: var(--ink);
  padding: clamp(96px, 11vw, 150px) 0 clamp(64px, 8vw, 108px); }
.bkhero__bg { position: absolute; inset: 0; z-index: 0; }
.bkhero__glow {
  position: absolute; inset: -20% -10% auto auto; width: 68vw; height: 68vw;
  background: radial-gradient(circle at 62% 38%,
    color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%);
  filter: blur(10px);
}
.bkhero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.bkhero__sub {
  margin-top: 14px; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, .6vw + .95rem, 1.35rem);
  color: color-mix(in srgb, var(--accent) 62%, var(--cream));
}
.bkhero__lead {
  margin-top: 22px; max-width: 52ch;
  font-size: clamp(1rem, .4vw + .92rem, 1.1rem); line-height: 1.7; color: var(--cream-2);
}
.bkhero__act { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bkhero__price {
  font-family: var(--serif); font-weight: 500; font-size: 1.28rem; color: var(--cream);
}
.bkhero__meta {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(234,224,206,.14);
  display: flex; flex-wrap: wrap; gap: 16px 34px;
}
.bkhero__meta span { display: grid; gap: 5px; }
.bkhero__meta i {
  font-style: normal; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
}
.bkhero__meta b { font-weight: 500; font-size: .92rem; color: var(--cream-2); }

.btn--accent { background: var(--accent); color: #12191F; }
.btn--accent:hover { filter: brightness(1.08); }

/* Sampul berdiri miring, dengan bayangan dan pantulan di bawahnya. */
.bkhero__vis { display: grid; place-items: center; perspective: 1400px; }
.bk3d { position: relative; width: min(100%, 330px); }
.bk3d img {
  display: block; width: 100%; height: auto; border-radius: 3px 9px 9px 3px;
  transform: rotateY(-17deg) rotateX(3deg) rotateZ(-1deg);
  transform-origin: left center;
  box-shadow:
    -3px 0 0 rgba(255,255,255,.14) inset,
    -14px 0 22px -14px rgba(0,0,0,.7) inset,
    32px 34px 60px -18px rgba(0,0,0,.72),
    0 0 90px -20px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform .8s var(--ease);
}
.bk3d:hover img { transform: rotateY(-9deg) rotateX(1deg); }
.bk3d::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 100%; height: 70px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(14px); opacity: .6;
}

/* Keterangan buku: petak kartu kecil, bukan tabel. */

/* Rak buku lain: sampul besar, berdiri berjajar. */
.shelf4 {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.shelf__b { display: block; }
.shelf__f {
  display: block; perspective: 900px; margin-bottom: 16px;
  height: clamp(190px, 20vw, 260px);
  display: flex; align-items: flex-end; justify-content: center;
}
.shelf__f img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  border-radius: 2px 6px 6px 2px;
  transform: rotateY(-13deg); transform-origin: left center;
  box-shadow: 22px 24px 44px -16px rgba(20,28,37,.5),
    0 0 60px -22px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .7s var(--ease);
}
.shelf__b:hover .shelf__f img { transform: rotateY(-5deg); }
.shelf__b strong { display: block; font-size: 1rem; line-height: 1.3; }
.shelf__b > span {
  display: block; margin-top: 6px; font-size: .86rem; line-height: 1.5;
  color: var(--on-paper-2);
}

/* Ajakan penutup di halaman buku. */
.bkcta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 32px; padding: clamp(26px, 3vw, 40px); border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.bkcta p { margin-top: 8px; color: var(--on-paper-2); }

@media (max-width: 860px) {
  .bkhero__in { grid-template-columns: 1fr; }
  .bkhero__vis { order: -1; }
  .bk3d { width: min(72%, 260px); }
}

/* --- Submenu Produk dan Buku --------------------------------------------
   Muncul saat disorot atau saat salah satu isinya mendapat fokus keyboard,
   supaya pengunjung bisa langsung ke satu judul tanpa menggulir dulu. */
.sub { position: relative; display: inline-flex; }
.sub__p {
  /* Jaraknya dibuat lewat padding, bukan lewat top, supaya tidak ada celah
     mati antara tautan dan panelnya. Kalau lewat top, kursor kehilangan
     sorotan begitu turun dan panelnya keburu tertutup sebelum sempat diklik. */
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease-s), transform .28s var(--ease), visibility .28s;
  padding-top: 14px; z-index: 40;
}
.sub:hover .sub__p, .sub:focus-within .sub__p {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.sub__g {
  display: grid; gap: 2px; padding: 10px;
  background: rgba(13,21,30,.97);
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7);
}
.sub__g--produk { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.sub__g--buku { grid-template-columns: repeat(2, minmax(196px, 1fr)); }
.sub__i {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px;
  transition: background-color .22s var(--ease-s);
}
.sub__i:hover { background: rgba(234,224,206,.07); }
.sub__i img { border-radius: 8px; flex: none; }
.sub__g--buku .sub__i img { border-radius: 1px 3px 3px 1px; box-shadow: 3px 3px 8px rgba(0,0,0,.5); }
.sub__i strong { display: block; font-size: .88rem; font-weight: 600; color: var(--cream); }
.sub__i em {
  display: block; margin-top: 2px; font-style: normal; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .04em; color: var(--slate);
}
@media (max-width: 860px) { .sub__p { display: none; } }

/* --- Kutipan dari dalam buku -------------------------------------------- */
.bkquote { position: relative; overflow: hidden; }
.bkquote::before {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 60vw; height: 60vw;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
}
.bkquote .wrap { position: relative; }
.bkquote figure { margin: 0; max-width: 30ch; }
.bkquote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw + .9rem, 2.9rem); line-height: 1.22; letter-spacing: -.02em;
  color: var(--cream); text-wrap: balance;
}
.bkquote blockquote::before { content: "\201C"; color: var(--accent); }
.bkquote blockquote::after { content: "\201D"; color: var(--accent); }
.bkquote figcaption {
  margin-top: 22px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}

/* --- Kata pembaca ------------------------------------------------------
   Sengaja dibuat lain dari Keterangan: di sini kutipan tanpa kotak, dipisah
   garis rambut, dengan blok nilai di kolom kiri. Keterangan tetap berupa
   deret data mendatar. Dua-duanya jadi tidak tertukar sekilas pandang. */
.revwrap {
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.score { margin-top: clamp(22px, 2.6vw, 32px); }
.score b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.03em;
  color: var(--on-paper);
}
.score__s {
  display: block; margin-top: 10px; font-size: 1rem; letter-spacing: .3em;
  color: var(--accent);
}
.score__n {
  display: block; margin-top: 12px; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--on-paper-2);
}
.revs { display: grid; }
.rev { margin: 0; padding: clamp(20px, 2.4vw, 30px) 0; }
.rev + .rev { border-top: 1px solid rgba(20,28,37,.12); }
.rev:first-child { padding-top: 0; }
.rev blockquote {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.05rem, .8vw + .9rem, 1.35rem); line-height: 1.5;
  color: var(--on-paper); text-wrap: pretty;
}
.rev blockquote::before { content: "\201C"; color: var(--accent); }
.rev blockquote::after { content: "\201D"; color: var(--accent); }
.rev figcaption {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}
.rev__n {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--on-paper-2);
}
.rev__s { font-size: .74rem; letter-spacing: .22em; color: var(--accent); }

@media (max-width: 860px) { .revwrap { grid-template-columns: 1fr; } }

/* --- Submenu Produk dan Buku --------------------------------------------
   Muncul saat disorot atau saat salah satu isinya mendapat fokus keyboard,
   supaya pengunjung bisa langsung ke satu judul tanpa menggulir dulu. */
.sub { position: relative; display: inline-flex; }
.sub__p {
  /* Jaraknya dibuat lewat padding, bukan lewat top, supaya tidak ada celah
     mati antara tautan dan panelnya. Kalau lewat top, kursor kehilangan
     sorotan begitu turun dan panelnya keburu tertutup sebelum sempat diklik. */
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease-s), transform .28s var(--ease), visibility .28s;
  padding-top: 14px; z-index: 40;
}
.sub:hover .sub__p, .sub:focus-within .sub__p {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.sub__g {
  display: grid; gap: 2px; padding: 10px;
  background: rgba(13,21,30,.97);
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7);
}
.sub__g--produk { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.sub__g--buku { grid-template-columns: repeat(2, minmax(196px, 1fr)); }
.sub__i {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px;
  transition: background-color .22s var(--ease-s);
}
.sub__i:hover { background: rgba(234,224,206,.07); }
.sub__i img { border-radius: 8px; flex: none; }
.sub__g--buku .sub__i img { border-radius: 1px 3px 3px 1px; box-shadow: 3px 3px 8px rgba(0,0,0,.5); }
.sub__i strong { display: block; font-size: .88rem; font-weight: 600; color: var(--cream); }
.sub__i em {
  display: block; margin-top: 2px; font-style: normal; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .04em; color: var(--slate);
}
@media (max-width: 860px) { .sub__p { display: none; } }

/* --- Kutipan dari dalam buku -------------------------------------------- */
.bkquote { position: relative; overflow: hidden; }
.bkquote::before {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 60vw; height: 60vw;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
}
.bkquote .wrap { position: relative; }
.bkquote figure { margin: 0; max-width: 30ch; }
.bkquote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw + .9rem, 2.9rem); line-height: 1.22; letter-spacing: -.02em;
  color: var(--cream); text-wrap: balance;
}
.bkquote blockquote::before { content: "\201C"; color: var(--accent); }
.bkquote blockquote::after { content: "\201D"; color: var(--accent); }
.bkquote figcaption {
  margin-top: 22px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}


/* Tautan Instagram buku, berdiri di samping tombol beli. */
/* Tautan Instagram buku, berdiri di panel ajakan penutup bersama tombol beli.
   Warnanya ikut aksen bukunya supaya sepadan dengan tombol di sebelahnya. */
.bkcta__a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn--ig {
  gap: .6em; background: transparent; color: var(--on-paper);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; font-weight: 400;
}
.btn--ig .ico { width: 17px; height: 17px; color: var(--accent); }
.btn--ig:hover { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Sinopsis penerbit: dibuat sedikit lebih besar dari teks biasa, karena ini
   suara penerbitnya, bukan keterangan dari kami. */
.blurb p {
  font-size: clamp(1rem, .5vw + .92rem, 1.14rem); line-height: 1.72;
  color: var(--on-paper);
}
.blurb p + p { margin-top: 1.1em; }
.blurb p:first-child::first-letter {
  float: left; margin: .06em .12em 0 0; font-family: var(--serif); font-weight: 400;
  font-size: 3.1em; line-height: .84; color: var(--accent);
}

/* --- Kenapa dibaca ------------------------------------------------------
   Ikut bentuk materi promosi penerbitnya: empat alasan berpetak dua-dua,
   judulnya berwarna aksen bukunya. */
.bkwhy { position: relative; overflow: hidden; }
.bkwhy::before {
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 56vw; height: 56vw;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%);
}
.bkwhy .wrap { position: relative; }
.bkwhy .prose { margin-top: 22px; }
.why {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.why__i {
  padding: clamp(20px, 2.2vw, 26px); border-radius: 16px;
  background: rgba(234,224,206,.05); border: 1px solid rgba(234,224,206,.12);
  transition: border-color .4s var(--ease-s), transform .45s var(--ease);
}
.why__i:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-3px);
}
.why__i h3 {
  font-family: var(--sans); font-weight: 700; font-size: .96rem; line-height: 1.28;
  letter-spacing: -.01em; color: var(--accent); text-transform: uppercase;
}
.why__i p {
  margin-top: 10px; font-size: .92rem; line-height: 1.62; color: var(--cream-2);
}