/* Gaya khusus halaman etalase — komponennya tetap dari ui.css. */
.hero { padding-block: clamp(var(--s7), 9vw, 128px) var(--s7); }
.hero .eyebrow { margin-bottom: var(--s4); }
.ink-blue { color: var(--blue); }
.hero-foot {
  display: flex; gap: var(--s6); align-items: flex-end; flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line);
}
.hero-foot .lead { flex: 1 1 380px; }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
.swatch {
  background: var(--c); color: var(--on);
  border-radius: var(--r-card); padding: var(--s4);
  min-height: 116px; display: flex; flex-direction: column; justify-content: space-between;
  font-weight: 620;
}
.swatch b { font-weight: 500; font-size: var(--t-xs); opacity: .78; }

/* Pratinjau hidup: halaman contoh ditampilkan apa adanya lalu dikecilkan,
   jadi yang kelihatan bukan gambar mati tapi halaman yang beneran jalan. */
.preview { display: flex; flex-direction: column; }
.frame { position: relative; height: 260px; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.frame iframe {
  position: absolute; top: 0; left: 0; border: 0;
  width: 1600px; height: 1000px; transform: scale(0.29); transform-origin: 0 0;
  pointer-events: none;
}
.frame-compact iframe { width: 520px; height: 900px; transform: scale(0.62); left: 50%; margin-left: -160px; }
.preview-foot { padding: var(--s4); display: grid; gap: var(--s2); justify-items: start; }

/* ── Halaman dokumentasi ──────────────────────────────────────────────── */
.docbody { min-width: 0; }
.docsec { padding-block: var(--s6); border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.docsec:first-of-type { border-top: 0; padding-top: 0; }
.docsec > * + * { margin-top: var(--s4); }
.docsec h2 { margin-bottom: var(--s2); }

/* Pratinjau: bidangnya dibedain dari kode supaya jelas mana yang hidup */
.demo {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s5);
}
.demo + .code, .demo + pre { margin-top: var(--s3); }

/* Blok kode punya tombol salin sendiri */
.code { position: relative; }
.copy {
  position: absolute; top: 10px; right: 10px;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  padding: 5px 10px; background: var(--paper); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 600 var(--t-xs)/1 var(--sans);
  opacity: 0; transition: opacity var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.code:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--ink); }
.copy.is-done { color: var(--green); }
code.mono { background: var(--paper-2); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }