/* Header dan kaki halaman SVADAYA di halaman produk yang disalin utuh.

   Bentuk dan gayanya sama persis dengan halaman SVADAYA lain, tapi ditulis
   ulang di sini dengan awalan svbar / svfoot. Halaman produk membawa CSS-nya
   sendiri, jadi berkas ini sengaja terpisah dari style.css supaya tidak ada
   satu pun kelas yang bertabrakan.

   Nilainya disalin dari style.css. Kalau header di sana berubah, samakan juga
   di sini. */

:root {
  --sv-h: 56px;
  --sv-wrap: 1180px;
  --sv-pad: clamp(20px, 5vw, 48px);
  --sv-ink: #0D151E;
  --sv-cream: #EAE0CE;
  --sv-cream-2: #C4BCAD;
  --sv-slate: #93A1B1;
  --sv-gold: #E9B949;
  --sv-line: rgba(234, 224, 206, .13);
  --sv-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sv-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sv-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- Header ------------------------------------------------------------- */
.svbar {
  position: sticky; top: 0; z-index: 2147483000;
  /* PDBI menetapkan ulang html{font-size} untuk sistem skalanya, jadi ukuran
     di sini tidak boleh ikut rem. Patokannya dikunci di sini. */
  font-size: 16px;
  height: var(--sv-h);
  background: rgba(13, 21, 30, .92);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--sv-line);
  font-family: var(--sv-sans); -webkit-font-smoothing: antialiased;
}
.svbar a { text-decoration: none; }
.svbar__in {
  width: min(100% - (var(--sv-pad) * 2), var(--sv-wrap));
  margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: 18px;
}
.svbar__brand { flex: none; display: flex; align-items: center; }
.svbar__brand img { display: block; height: 22px; width: auto; }

/* Menu di tengah, sama seperti di beranda. */
.svbar__links { display: flex; gap: 4px; margin-inline: auto; }
.svbar__links a {
  padding: .45em .75em; border-radius: 8px; font-size: .82em; color: var(--sv-cream-2);
  transition: color .25s var(--sv-ease), background-color .25s var(--sv-ease);
}
.svbar__links a:hover { color: var(--sv-cream); background: rgba(234, 224, 206, .07); }

.svbar__end { display: flex; align-items: center; gap: 12px; flex: none; }
.svbar__lang {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--sv-mono); font-size: .72em; letter-spacing: .06em;
  color: var(--sv-slate); padding: .35em .6em;
  border: 1px solid var(--sv-line); border-radius: 999px;
  transition: border-color .25s var(--sv-ease);
}
.svbar__lang:hover { border-color: rgba(234, 224, 206, .35); }
.svbar__lang .is-on { color: var(--sv-gold); }
.svbar__lang i { font-style: normal; opacity: .45; }
.svbar__cta {
  display: inline-flex; align-items: center; padding: .55em 1.05em;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--sv-cream); color: var(--sv-ink);
  font-size: .84em; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .35s var(--sv-ease), background-color .3s var(--sv-ease);
}
.svbar__cta:hover { transform: translateY(-1px); background: #FFF7E6; }

.svbar__burger {
  display: none; width: 38px; height: 34px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 1px solid var(--sv-line); border-radius: 10px;
}
.svbar__burger span {
  display: block; width: 15px; height: 1.5px; background: var(--sv-cream);
  transition: transform .3s var(--sv-ease);
}
.svbar__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(--sv-line);
  padding: 8px var(--sv-pad) 18px; display: grid;
}
.svbar__menu[hidden] { display: none; }
.svbar__menu a {
  padding: .85em .2em; font-size: 1.02em; color: var(--sv-cream-2);
  border-bottom: 1px solid var(--sv-line);
}
.svbar__menu a:last-child { border-bottom: 0; }

@media (min-width: 861px) { .svbar__menu { display: none; } }
@media (max-width: 860px) {
  .svbar__links, .svbar__cta { display: none; }
  .svbar__burger { display: flex; }
  .svbar__end { margin-left: auto; }
}

/* --- Kaki halaman ------------------------------------------------------- */
.svfoot {
  font-size: 16px;   /* alasan yang sama seperti .svbar */
  background: var(--sv-ink); border-top: 1px solid var(--sv-line);
  padding: clamp(40px, 4.5vw, 62px) 0 0;
  font-family: var(--sv-sans); color: var(--sv-cream-2);
  -webkit-font-smoothing: antialiased;
}
.svfoot a { text-decoration: none; color: inherit; }
.svfoot__in {
  width: min(100% - (var(--sv-pad) * 2), var(--sv-wrap)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 40px);
}
.svfoot__brand { flex: none; }
.svfoot__brand img { display: block; height: 26px; width: auto; }
.svfoot__brand p {
  margin: 12px 0 0; max-width: 34ch; font-size: .9em; line-height: 1.6;
  color: var(--sv-cream-2);
}
.svfoot__links {
  display: flex; flex-wrap: wrap; gap: 6px 24px; margin-left: auto;
}
.svfoot__links a {
  font-size: .9em; color: var(--sv-cream-2); transition: color .25s var(--sv-ease);
}
.svfoot__links a:hover { color: var(--sv-cream); }
.svfoot__bar {
  width: min(100% - (var(--sv-pad) * 2), var(--sv-wrap)); margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 22px 0 28px; border-top: 1px solid var(--sv-line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
}
.svfoot__bar p {
  margin: 0; font-family: var(--sv-mono); font-size: .68em; letter-spacing: .08em;
  color: var(--sv-slate);
}
@media (max-width: 860px) {
}

/* --- Halaman produknya sendiri ------------------------------------------ */

/* Header bawaan halaman produk diturunkan pangkatnya jadi baris judul.
   Situs ini punya satu header saja, yaitu header SVADAYA di atas. Elemennya
   tidak dihapus, cuma berhenti jadi bar: tidak menempel, tanpa latar, dan
   tautan navigasinya disembunyikan. Yang tersisa logo dan nama produknya. */
header.nav, header.kepala {
  position: static !important; top: auto !important;
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; z-index: auto !important;
}
header.nav .nav-links, header.nav .nav-tools, header.kepala .btn { display: none !important; }

/* Obrol Sandi menaruh headernya melayang di atas hero. Bentuk itu tetap,
   cuma tidak lagi menempel waktu digulir. */
header.fixed {
  /* Induknya #root, yang sudah mulai di bawah header SVADAYA, jadi
     patokannya 0, bukan setinggi header lagi. */
  position: absolute !important; top: 0 !important; left: 0; right: 0;
  z-index: 5 !important;
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
header.fixed a[href="/"] ~ * { display: none !important; }
#root { padding-top: 0; position: relative; }

/* Nama produknya tidak lagi berperan sebagai tautan beranda. */
header.nav .brand, header.kepala .kepala__nama, header.fixed a[href="/"] {
  pointer-events: none; cursor: default;
}

/* Kaki halaman produknya diganti kaki halaman SVADAYA. Ditulis per situs,
   bukan pakai pemilih umum, supaya .svfoot sendiri tidak ikut tersembunyi. */
footer.foot,          /* phyBatik   */
footer.kaki,          /* Kosmogram  */
#root footer {        /* Obrol Sandi */
  display: none !important;
}

/* --- PDBI: panggung setinggi layar diberi ruang untuk header dan kaki ----
   Halamannya dirancang mengunci satu layar penuh dan tidak bisa digulir.
   Supaya header dan kaki halaman SVADAYA kebagian tempat, panggungnya
   dijadikan bagian dari alur halaman dan tingginya dikurangi setinggi header.
   Perhitungan skalanya di app.js ikut dikurangi angka yang sama. */
body:has(> .svbar) { overflow: auto !important; }
body:has(> .svbar) .stage {
  position: relative !important;
  inset: auto !important;
  height: calc(100dvh - var(--sv-h));
  min-height: 520px;
}

/* --- Submenu Produk dan Buku, sama seperti di halaman SVADAYA ------------ */
.svbar .sub { position: relative; display: inline-flex; }
.svbar .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 ease, transform .28s var(--sv-ease), visibility .28s;
  padding-top: 14px; z-index: 40;
}
.svbar .sub:hover .sub__p, .svbar .sub:focus-within .sub__p {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.svbar .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(--sv-line); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7);
}
.svbar .sub__g--produk { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.svbar .sub__g--buku { grid-template-columns: repeat(2, minmax(196px, 1fr)); }
.svbar .sub__i {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px;
  transition: background-color .22s ease;
}
.svbar .sub__i:hover { background: rgba(234, 224, 206, .07); }
.svbar .sub__i img { border-radius: 8px; flex: none; width: 34px; height: 34px; }
.svbar .sub__g--buku .sub__i img {
  width: 26px; height: 39px; border-radius: 1px 3px 3px 1px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .5);
}
.svbar .sub__i strong { display: block; font-size: .88em; font-weight: 600; color: var(--sv-cream); }
.svbar .sub__i em {
  display: block; margin-top: 2px; font-style: normal; font-family: var(--sv-mono);
  font-size: .62em; letter-spacing: .04em; color: var(--sv-slate);
}
@media (max-width: 860px) { .svbar .sub__p { display: none; } }