/*
 * Tampilan dokumentasi Zul.
 *
 * Warna diambil dari logo: biru laut untuk teks, nila untuk aksen, sian
 * paruh enggang untuk mode gelap dan langkah tool, kuning petir untuk
 * saat manusia harus memutuskan.
 *
 * Huruf memakai satu keluarga besar, IBM Plex: Plex Sans untuk judul dan
 * isi, Plex Mono untuk kode. Keduanya dirancang bersama, jadi kode di
 * tengah kalimat punya tinggi dan ketebalan yang sama dengan teksnya.
 * Judul memakai tebal 600, bukan ekstra tebal, seperti kebiasaan situs
 * dokumentasi teknis. File hurufnya dimuat lewat extra_css di mkdocs.yml.
 *
 * Ukuran memakai rem milik Material (1rem = 20px), jadi 0.8rem = 16px.
 */

/* ── Token ────────────────────────────────────────────────────────────────── */

:root {
  --md-text-font: "IBM Plex Sans";
  --md-code-font: "IBM Plex Mono";

  --zul-ink: #0b1f4d;
  --zul-text: #33415c;
  --zul-muted: #5d6b86;
  --zul-accent: #3f37c9;
  --zul-accent-strong: #2c2699;
  --zul-accent-soft: #eef0ff;
  --zul-cyan: #0b8fb0;
  --zul-cyan-soft: #e2f5fa;
  --zul-amber: #a86200;
  --zul-amber-fill: #f5a524;
  --zul-amber-soft: #fff3da;
  --zul-green: #0b7a53;
  --zul-green-soft: #e5f6ee;
  --zul-red: #b42318;
  --zul-red-soft: #fdecea;
  --zul-surface: #f4f6fb;
  --zul-surface-strong: #e9edf6;
  --zul-border: #dde4f0;
  --zul-page: #ffffff;
  --zul-trace-model: #3f37c9;
  --zul-trace-tool: #0b8fb0;
  --zul-radius: 0.45rem;
  --zul-measure: 34rem;
  --zul-column: 41rem;
}

[data-md-color-scheme="slate"] {
  --zul-ink: #eef2ff;
  --zul-text: #c2cbe3;
  --zul-muted: #8f9bbd;
  --zul-accent: #7cd8f2;
  --zul-accent-strong: #b6ecfa;
  --zul-accent-soft: rgba(124, 216, 242, 0.12);
  --zul-cyan: #7cd8f2;
  --zul-cyan-soft: rgba(124, 216, 242, 0.12);
  --zul-amber: #ffc45c;
  --zul-amber-fill: #f5a524;
  --zul-amber-soft: rgba(245, 165, 36, 0.14);
  --zul-green: #5ad6a4;
  --zul-green-soft: rgba(90, 214, 164, 0.13);
  --zul-red: #ff9c94;
  --zul-red-soft: rgba(255, 156, 148, 0.13);
  --zul-surface: #111d45;
  --zul-surface-strong: #17265a;
  --zul-border: #253468;
  --zul-page: #0a1330;
  --zul-trace-model: #a9b4ff;
  --zul-trace-tool: #4fd1c5;

  --md-default-bg-color: var(--zul-page);
  --md-default-fg-color: var(--zul-text);
  --md-default-fg-color--light: var(--zul-muted);
  --md-code-fg-color: #dbe3f7;
}

:root,
[data-md-color-scheme="slate"] {
  --md-accent-fg-color: var(--zul-accent);
  --md-accent-fg-color--transparent: var(--zul-accent-soft);
  --md-code-bg-color: var(--zul-surface);
  --md-typeset-color: var(--zul-text);
  --md-footer-bg-color: var(--zul-page);
  --md-footer-bg-color--dark: var(--zul-page);
  --md-footer-fg-color: var(--zul-ink);
  --md-footer-fg-color--light: var(--zul-muted);
  --md-footer-fg-color--lighter: var(--zul-muted);
}

/* Material menetapkan warna tautan per palet di <body>; samakan dengan aksen. */
body[data-md-color-scheme][data-md-color-primary] {
  --md-typeset-a-color: var(--zul-accent);
  --md-primary-fg-color: var(--zul-page);
  --md-primary-bg-color: var(--zul-ink);
  --md-primary-bg-color--light: var(--zul-muted);
}

/* ── Kerangka halaman ─────────────────────────────────────────────────────── */

/*
 * Halaman memakai lebar layar: navigasi menempel di kiri, daftar isi di
 * kanan, dan isi berada di tengah dengan lebar baca yang tetap. Halaman
 * sampul dan playground tidak punya panel samping, jadi isinya melebar.
 */
.md-grid {
  max-width: 88rem;
}

.md-main__inner {
  margin-top: 1.2rem;
}

@media screen and (min-width: 76.25em) {
  .md-content__inner {
    max-width: var(--zul-column);
    margin-left: auto;
    margin-right: auto;
  }

  .md-content__inner:has(> .zul-wide) {
    max-width: 62rem;
  }

  .md-sidebar--primary {
    width: 13.2rem;
  }

  /*
   * Panel kiri (navigasi dokumentasi dan panel penulis di tulisan blog)
   * menempel dari bawah header sampai bawah layar. Bawaan Material
   * memendekkannya saat footer terlihat, jadi isinya terpotong
   * di layar pendek. Footer kini dimulai di kanan panel.
   *
   * align-self ikut menentukan ukuran elemen fixed di dalam flexbox. Dengan
   * flex-start bawaan Material, tingginya mengikuti isi dan top serta
   * bottom diabaikan; dengan stretch, kotaknya mengisi dari header
   * sampai bawah layar.
   */
  :is(.md-sidebar--primary:not([hidden]), .md-sidebar--post) {
    position: fixed;
    bottom: 0;
    left: max(0px, calc((100% - 88rem) / 2));
    height: auto;
    align-self: stretch;
    z-index: 1;
    background-color: var(--md-default-bg-color);
  }

  :is(.md-sidebar--primary:not([hidden]), .md-sidebar--post) .md-sidebar__scrollwrap {
    height: 100% !important;
  }

  .md-sidebar--primary:not([hidden]) ~ .md-content {
    margin-left: 13.2rem;
  }

  .md-content--post {
    padding-left: 12.1rem;
  }

  body:has(.md-sidebar--primary:not([hidden])) :is(.md-footer__inner, .md-footer-meta__inner) {
    padding-left: 13.4rem;
  }

  body:has(.md-sidebar--post) :is(.md-footer__inner, .md-footer-meta__inner) {
    padding-left: 12.3rem;
  }
}

.md-typeset > :is(p, ul, dl, blockquote, h1, h2, h3, h4) {
  max-width: var(--zul-measure);
}

/* ── Header dan tab ───────────────────────────────────────────────────────── */

body[data-md-color-primary] .md-header,
body[data-md-color-primary] .md-tabs {
  color: var(--zul-ink);
  background-color: color-mix(in srgb, var(--zul-page) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.md-header--shadow {
  box-shadow: none;
  border-bottom-color: var(--zul-border);
}

.md-header__button.md-logo img {
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
}

.md-header__title {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.md-tabs {
  border-bottom: 1px solid var(--zul-border);
}

.md-tabs__link {
  margin-top: 0.6rem;
  padding-bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--zul-muted);
  opacity: 1;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.md-tabs__link:hover {
  color: var(--zul-ink);
}

.md-tabs__item--active .md-tabs__link {
  color: var(--zul-ink);
  font-weight: 600;
  border-bottom-color: var(--zul-accent);
}

.md-tabs__item {
  height: auto;
}

.md-search__form {
  border-radius: var(--zul-radius);
  background-color: var(--zul-surface);
  border: 1px solid var(--zul-border);
  transition: border-color 120ms ease;
}

.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--zul-surface);
  border-color: var(--zul-accent);
}

.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--zul-muted);
}

.md-source {
  font-size: 0.62rem;
}

/* Bilah kemajuan saat berpindah halaman. */
.md-progress {
  height: 2px;
  background-color: var(--zul-accent);
}

/* ── Jejak lokasi di atas judul ───────────────────────────────────────────── */

.md-path {
  margin: 0 0.8rem;
  padding-top: 0.4rem;
  font-size: 0.66rem;
}

@media screen and (min-width: 76.25em) {
  .md-path {
    max-width: var(--zul-column);
    margin-left: auto;
    margin-right: auto;
  }
}

.md-path__link {
  color: var(--zul-muted);
}

.md-path__link:hover {
  color: var(--zul-accent);
}

/* ── Navigasi samping ─────────────────────────────────────────────────────── */

.md-nav {
  font-size: 0.7rem;
  line-height: 1.45;
}

.md-nav__title {
  color: var(--zul-ink);
  font-weight: 600;
}

.md-nav--primary .md-nav__item--section > .md-nav__link {
  margin-top: 0.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--zul-ink);
}

.md-nav__link {
  color: var(--zul-muted);
  transition: color 120ms ease;
}

.md-nav__link:is(:hover, :focus) {
  color: var(--zul-ink);
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active:is(:hover, :focus) {
  color: var(--zul-accent);
  font-weight: 600;
}

/* Daftar isi di kanan punya rel; bagian yang sedang dibaca ditandai di rel itu. */
.md-nav--secondary .md-nav__title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--zul-ink);
  box-shadow: none;
  background: none;
}

@media screen and (min-width: 60em) {
  .md-nav--secondary > .md-nav__list {
    border-left: 1px solid var(--zul-border);
  }

  .md-nav--secondary .md-nav__link {
    margin: 0;
    padding: 0.2rem 0 0.2rem 0.7rem;
    border-left: 2px solid transparent;
    margin-left: -1px;
  }

  .md-nav--secondary .md-nav__link--active {
    border-left-color: var(--zul-accent);
  }

  .md-nav--secondary .md-nav__list .md-nav__list .md-nav__link {
    padding-left: 1.3rem;
  }
}

/* ── Tipografi ────────────────────────────────────────────────────────────── */

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--zul-text);
}

.md-typeset :is(h1, h2, h3, h4) {
  color: var(--zul-ink);
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
}

.md-typeset h2 {
  font-size: 1.45em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 2.6em 0 0.6em;
}

.md-typeset h3 {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 2em 0 0.5em;
}

.md-typeset h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 1.6em 0 0.4em;
}

/* Paragraf pertama di bawah judul halaman adalah pengantar. */
.md-typeset h1 + p {
  font-size: 1.14em;
  line-height: 1.6;
}

.md-typeset a {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--zul-accent) 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

.md-typeset a:hover {
  color: var(--zul-accent-strong);
  text-decoration-color: currentColor;
}

.md-typeset .headerlink {
  color: var(--zul-muted);
  opacity: 0;
  margin-left: 0.4rem;
  font-weight: 400;
  text-decoration: none;
}

/* Judul halaman tidak butuh tautan jangkar. Tautan yang tersembunyi itu
   ikut dihitung lebarnya, sehingga judul panjang turun menjadi dua baris. */
.md-typeset h1 .headerlink {
  display: none;
}

.md-typeset :is(h1, h2, h3, h4):hover .headerlink {
  opacity: 0.8;
}

.md-typeset strong {
  color: var(--zul-ink);
  font-weight: 600;
}

.md-typeset hr {
  border-bottom-color: var(--zul-border);
}

/* ── Langkah bernomor ─────────────────────────────────────────────────────── */

/*
 * Daftar bernomor di dokumentasi ini selalu berupa urutan langkah. Nomornya
 * digambar sebagai titik di sebuah rel, sama seperti jejak langkah agent di
 * panel playground.
 */
.md-typeset > ol,
.md-typeset :is(.zul-wide, .zul-steps) > ol {
  counter-reset: zul-step;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  max-width: none;
}

.md-typeset > ol > li,
.md-typeset :is(.zul-wide, .zul-steps) > ol > li {
  counter-increment: zul-step;
  position: relative;
  margin: 0 0 0.2rem;
  padding: 0 0 0.9rem 2.2rem;
}

.md-typeset > ol > li::before,
.md-typeset :is(.zul-wide, .zul-steps) > ol > li::before {
  content: counter(zul-step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--zul-accent);
  background: var(--zul-page);
  border: 1.5px solid var(--zul-accent);
  border-radius: 50%;
}

.md-typeset > ol > li:not(:last-child)::after,
.md-typeset :is(.zul-wide, .zul-steps) > ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(0.675rem - 0.5px);
  top: 1.6rem;
  bottom: 0;
  width: 1px;
  background: var(--zul-border);
}

.md-typeset > ol > li > :is(p, pre, .highlight):first-child {
  margin-top: 0;
}

.md-typeset > ol > li > p {
  max-width: calc(var(--zul-measure) - 2.2rem);
}

/* ── Kode ─────────────────────────────────────────────────────────────────── */

.md-typeset code {
  font-size: 0.84em;
  font-variant-ligatures: none;
  border-radius: 0.3rem;
}

.md-typeset :not(pre) > code {
  padding: 0.1em 0.38em;
  color: var(--zul-ink);
  background-color: var(--zul-surface);
  border: 1px solid var(--zul-border);
}

.md-typeset a > code {
  color: inherit;
}

.md-typeset pre > code {
  border: 1px solid var(--zul-border);
  border-radius: var(--zul-radius);
  padding: 0.9em 1.1em;
  line-height: 1.65;
}

/* Blok kode berjudul: nama file tampil sebagai bilah di atas kode. */
.md-typeset .highlight span.filename {
  margin: 0;
  padding: 0.5em 1.1em;
  font-family: var(--md-code-font-family);
  font-size: 0.72em;
  font-weight: 500;
  color: var(--zul-muted);
  background-color: var(--zul-surface-strong);
  border: 1px solid var(--zul-border);
  border-bottom: 0;
  border-radius: var(--zul-radius) var(--zul-radius) 0 0;
}

.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 var(--zul-radius) var(--zul-radius);
}

.md-typeset .md-clipboard {
  color: var(--zul-muted);
  transition: color 120ms ease;
}

.md-typeset .md-clipboard:hover {
  color: var(--zul-accent);
}

/* ── Gambar ───────────────────────────────────────────────────────────────── */

/* Gambar di isi halaman, misalnya mind map SVG, tampil sebagai lembar
   berbingkai. Latar putih bawaannya jadi tetap rapi di mode gelap. */
.md-typeset p > img {
  display: block;
  border: 1px solid var(--zul-border);
  border-radius: var(--zul-radius);
}

/* ── Tabel ────────────────────────────────────────────────────────────────── */

.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.72rem;
  line-height: 1.55;
}

.md-typeset table:not([class]) th {
  padding: 0.6em 1em 0.6em 0;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--zul-muted);
  background: none;
  border-bottom: 1px solid var(--zul-border);
}

.md-typeset table:not([class]) td {
  padding: 0.75em 1em 0.75em 0;
  border-top: 0;
  border-bottom: 1px solid var(--zul-border);
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color 120ms ease;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--zul-surface);
  box-shadow: none;
}

/* Nama opsi, perintah, dan path tidak dipotong di tengah kata. */
.md-typeset table:not([class]) td:nth-child(-n + 2) code {
  white-space: nowrap;
}

.md-typeset table:not([class]) td code {
  overflow-wrap: normal;
  word-break: normal;
}

/* ── Catatan ──────────────────────────────────────────────────────────────── */

.md-typeset :is(.admonition, details) {
  border: 0;
  border-left: 3px solid var(--zul-border);
  border-radius: 0 var(--zul-radius) var(--zul-radius) 0;
  box-shadow: none;
  background: var(--zul-surface);
  font-size: 0.74rem;
  padding: 0.15rem 0.9rem;
}

.md-typeset :is(.admonition-title, summary) {
  background: none !important;
  font-weight: 600;
  color: var(--zul-ink);
  margin: 0.5rem -0.9rem 0;
  padding-left: 2.2rem;
}

.md-typeset :is(.admonition-title, summary)::before {
  left: 0.9rem;
  top: 0.62em;
}

.md-typeset .admonition :is(p, li) {
  color: var(--zul-text);
}

.md-typeset .admonition:is(.note, .info) {
  background: var(--zul-accent-soft);
  border-left-color: var(--zul-accent);
}

.md-typeset .admonition:is(.note, .info) > .admonition-title::before {
  background-color: var(--zul-accent);
}

.md-typeset .admonition:is(.tip, .success) {
  background: var(--zul-green-soft);
  border-left-color: var(--zul-green);
}

.md-typeset .admonition:is(.tip, .success) > .admonition-title::before {
  background-color: var(--zul-green);
}

.md-typeset .admonition:is(.warning, .caution, .important) {
  background: var(--zul-amber-soft);
  border-left-color: var(--zul-amber-fill);
}

.md-typeset .admonition:is(.warning, .caution, .important) > .admonition-title {
  color: var(--zul-amber);
}

.md-typeset .admonition:is(.warning, .caution, .important) > .admonition-title::before {
  background-color: var(--zul-amber-fill);
}

/* ── Tombol ───────────────────────────────────────────────────────────────── */

.md-typeset .zul-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0;
}

.md-typeset .zul-actions p {
  display: contents;
}

.md-typeset .zul-actions a {
  display: inline-block;
  padding: 0.55em 1.2em;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zul-ink);
  background: var(--zul-page);
  border: 1px solid var(--zul-border);
  border-radius: var(--zul-radius);
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.md-typeset .zul-actions a:hover {
  border-color: var(--zul-accent);
}

.md-typeset .zul-actions a:first-child {
  color: #fff;
  background: var(--zul-accent);
  border-color: var(--zul-accent);
}

.md-typeset .zul-actions a:first-child:hover {
  background: var(--zul-accent-strong);
  border-color: var(--zul-accent-strong);
}

[data-md-color-scheme="slate"] .md-typeset .zul-actions a:first-child {
  color: #0a1330;
}

/* ── Sampul ───────────────────────────────────────────────────────────────── */

/*
 * Sampul berisi judul, satu kalimat, dua tombol, dan perintah zul. Di kanan,
 * empat lapisan proyek hasil `zul build hexa` tersusun dari bawah ke atas,
 * lalu sebuah request mengalir masuk lewat interface dan keluar ke LLM.
 */
.md-typeset .zul-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0 3.2rem;
}

@media screen and (min-width: 60em) {
  .md-typeset .zul-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem;
    min-height: 26rem;
  }
}

.md-typeset .zul-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 2.2vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 0.45em;
}

.md-typeset .zul-hero h1 .headerlink {
  display: none;
}

.md-typeset .zul-hero__text > p {
  max-width: 26rem;
  font-size: 1.1em;
  line-height: 1.6;
}

.md-typeset .zul-hero__text .highlight {
  max-width: 21rem;
}

/* Halaman tanpa panel samping tidak menampilkan tombol sunting di sudut. */
.md-content__inner:has(> .zul-wide) > .md-content__button {
  display: none;
}

/* ── Tumpukan lapisan di sampul ───────────────────────────────────────────── */

/* Lebar penuh kolom: dengan margin auto, item grid menyusut ke 300px bawaan SVG. */
.md-typeset .zul-hero__art {
  width: 100%;
  max-width: 28rem;
  justify-self: center;
}

.zul-stack {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--md-code-font-family);
}

.zul-stack .zs-wire {
  fill: none;
  stroke: var(--zul-muted);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zul-stack .zs-pill rect {
  fill: var(--zul-page);
  stroke: var(--zul-border);
}

.zul-stack .zs-pill text {
  font-size: 11px;
  text-anchor: middle;
  fill: var(--zul-text);
}

.zul-stack .zs-dot {
  fill: var(--zul-accent);
}

.zul-stack .zs-dot--out {
  fill: var(--zul-cyan);
}

.zul-stack .zs-layer polygon {
  stroke-width: 1;
  stroke-linejoin: round;
}

.zul-stack .zs-name {
  font-size: 14px;
  font-weight: 600;
}

.zul-stack .zs-note {
  font-size: 11px;
}

.zul-stack .zs-project {
  font-size: 17px;
  font-weight: 600;
  fill: var(--zul-accent);
}

/* Warna lapisan, mode terang. */
.zs-layer--interface polygon { stroke: #3f37c9; }
.zs-layer--interface .zs-top { fill: #ffffff; }
.zs-layer--interface .zs-left { fill: #eef0ff; }
.zs-layer--interface .zs-right { fill: #e0e3fb; }
.zs-layer--interface text { fill: #0b1f4d; }

.zs-layer--application polygon { stroke: #2c2699; }
.zs-layer--application .zs-top { fill: #6159dc; }
.zs-layer--application .zs-left { fill: #3f37c9; }
.zs-layer--application .zs-right { fill: #2c2699; }
.zs-layer--application text { fill: #ffffff; }

.zs-layer--domain polygon { stroke: #071538; }
.zs-layer--domain .zs-top { fill: #22386f; }
.zs-layer--domain .zs-left { fill: #0b1f4d; }
.zs-layer--domain .zs-right { fill: #071538; }
.zs-layer--domain text { fill: #ffffff; }

.zs-layer--infrastructure polygon { stroke: #0b8fb0; }
.zs-layer--infrastructure .zs-top { fill: #e2f5fa; }
.zs-layer--infrastructure .zs-left { fill: #c6ebf4; }
.zs-layer--infrastructure .zs-right { fill: #a9dfec; }
.zs-layer--infrastructure text { fill: #0b1f4d; }

/* Warna lapisan, mode gelap. */
[data-md-color-scheme="slate"] .zs-layer--interface polygon { stroke: #7cd8f2; }
[data-md-color-scheme="slate"] .zs-layer--interface .zs-top { fill: #17265a; }
[data-md-color-scheme="slate"] .zs-layer--interface .zs-left { fill: #111d45; }
[data-md-color-scheme="slate"] .zs-layer--interface .zs-right { fill: #0c1636; }
[data-md-color-scheme="slate"] .zs-layer--interface text { fill: #eef2ff; }

[data-md-color-scheme="slate"] .zs-layer--application polygon { stroke: #a9b4ff; }
[data-md-color-scheme="slate"] .zs-layer--application .zs-top { fill: #6159dc; }
[data-md-color-scheme="slate"] .zs-layer--application .zs-left { fill: #4a43c9; }
[data-md-color-scheme="slate"] .zs-layer--application .zs-right { fill: #3a33b0; }

[data-md-color-scheme="slate"] .zs-layer--domain polygon { stroke: #a9b4ff; }
[data-md-color-scheme="slate"] .zs-layer--domain .zs-top { fill: #2b3f86; }
[data-md-color-scheme="slate"] .zs-layer--domain .zs-left { fill: #1f2f6b; }
[data-md-color-scheme="slate"] .zs-layer--domain .zs-right { fill: #172456; }
[data-md-color-scheme="slate"] .zs-layer--domain text { fill: #eef2ff; }

[data-md-color-scheme="slate"] .zs-layer--infrastructure polygon { stroke: #7cd8f2; }
[data-md-color-scheme="slate"] .zs-layer--infrastructure .zs-top { fill: #0e5266; }
[data-md-color-scheme="slate"] .zs-layer--infrastructure .zs-left { fill: #0b4152; }
[data-md-color-scheme="slate"] .zs-layer--infrastructure .zs-right { fill: #083443; }
[data-md-color-scheme="slate"] .zs-layer--infrastructure text { fill: #e2f5fa; }

/*
 * Satu gerakan saat halaman dibuka: lapisan tersusun dari bawah ke atas.
 * Setelah itu lapisan atas naik turun pelan, sehingga celah di antara
 * lapisan melebar dan menyempit, dan titik request bergerak di kabelnya.
 */
@keyframes zs-drop {
  from { transform: translateY(-28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes zs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--zs-lift, 0)); }
}

@keyframes zs-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.zul-stack .zs-drop {
  animation: zs-drop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--zs-delay, 0s) both;
}

.zul-stack .zs-float {
  animation: zs-float 6s ease-in-out 1.1s infinite;
}

.zul-stack .zs-float--0 { --zs-lift: -7px; }
.zul-stack .zs-float--1 { --zs-lift: -4.5px; }
.zul-stack .zs-float--2 { --zs-lift: -2px; }

.zul-stack :is(.zs-wire, .zs-pill) {
  animation: zs-fade 600ms ease 700ms both;
}

/* Titik baru tampil saat gerakannya dimulai; sebelumnya ia diam di pojok gambar. */
.zul-stack .zs-dot {
  animation: zs-fade 200ms linear 1.2s both;
}

.zul-stack .zs-dot--out {
  animation-delay: 2.5s;
}

@media (prefers-reduced-motion: reduce) {
  .zul-stack :is(.zs-drop, .zs-float, .zs-wire, .zs-pill) {
    animation: none;
  }

  .zul-stack .zs-dot {
    display: none;
  }
}

/* ── Dua kolom keterangan ─────────────────────────────────────────────────── */

.md-typeset .zul-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2.6rem;
}

@media screen and (min-width: 60em) {
  .md-typeset .zul-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.md-typeset .zul-columns h2 {
  margin-top: 2rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.md-footer {
  border-top: 1px solid var(--zul-border);
}

/*
 * Footer dibuat pendek supaya halaman tidak berakhir dengan blok kosong
 * yang tinggi. Tombol panah tetap berukuran bawaan: lebar maksimum judul
 * dihitung Material dari ukuran tombol itu, jadi judulnya tidak terpotong.
 */
.md-footer__link {
  margin-top: 0.9rem;
  margin-bottom: 0.2rem;
  opacity: 1;
  transition: color 120ms ease;
}

.md-footer__title {
  margin-bottom: 0.4rem;
}

.md-footer__link:is(:hover, :focus) {
  color: var(--zul-accent);
  opacity: 1;
}

.md-footer__title {
  font-size: 0.8rem;
  font-weight: 600;
}

.md-footer__direction {
  font-size: 0.62rem;
  font-weight: 500;
  opacity: 1;
  color: var(--zul-muted);
}

.md-footer-meta {
  border-top: 1px solid var(--zul-border);
}

.md-footer-meta .md-copyright,
html .md-footer-meta.md-typeset a {
  color: var(--zul-muted);
}

/* Lisensi dan keterangan pembuat situs dalam satu baris. */
.md-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3rem;
  padding: 0.3rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset *,
  .md-header,
  .md-tabs__link,
  .md-nav__link {
    transition: none !important;
  }
}