/* L1 · #lampiran-arsitektur (milik S3). Semua pemilih diawali #lampiran-arsitektur atau .la__
   Diagram dibaca dari bawah ke atas: tiga lajur → basis data spasial → Command Center · TinsAI. */

#lampiran-arsitektur .la__panel { align-items: center; }
.la__isi { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .9); }
.la__arsitektur { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; }

/* Batas kendali akses: bingkai putus-putus di sekeliling inti on-premise */
.la__batas {
  width: 70%; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.4) calc(var(--u) * 1.3);
  border: 1.5px dashed var(--c-line-2); border-radius: 14px; background: var(--c-card-2);
}
.la__batas-judul {
  align-self: stretch; margin: 0 0 calc(var(--u) * 1); display: flex; align-items: center; gap: .55em;
  font-size: var(--fs-label); font-weight: 600; color: var(--c-fg-2);
}
.la__batas-judul svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: var(--c-fg-2); stroke-width: 1.4; stroke-linejoin: round; }

.la__cc {
  width: 78%; text-align: center; padding: calc(var(--u) * .9) calc(var(--u) * 1);
  background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: 10px; box-shadow: var(--c-shadow);
  font-size: max(16px, calc(var(--u) * 1.15)); font-weight: 700; color: var(--c-fg);
}
.la__sambung { display: block; width: 2px; height: calc(var(--u) * 1.6); background: var(--c-line-2); }

/* Silinder basis data */
.la__db {
  position: relative; width: 78%; text-align: center;
  padding: calc(var(--u) * 2.3) calc(var(--u) * 1) calc(var(--u) * 1.3);
  background: var(--c-card); border: 1.5px solid var(--c-accent-fill); border-radius: 50% / calc(var(--u) * 1.2);
}
.la__db::before {
  content: ''; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: calc(var(--u) * 2.4);
  border: 1.5px solid var(--c-accent-fill); border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--c-card));
}
.la__db span { position: relative; font-size: max(16px, calc(var(--u) * 1.15)); font-weight: 700; color: var(--c-fg); }

/* Garis alir: dari tiap lajur naik ke basis data */
.la__alir { width: 100%; height: calc(var(--u) * 4.6); overflow: visible; display: block; }
.la__alir path {
  fill: none; stroke: var(--c-accent-fill); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 6; animation: la-alir 1.4s linear infinite;
}
@keyframes la-alir { to { stroke-dashoffset: -11; } }

/* Tiga lajur */
.la__alur { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.la__alur li {
  display: flex; flex-direction: column; gap: .4em;
  padding: calc(var(--u) * .95) calc(var(--u) * 1.05); border-radius: 10px;
  background: var(--c-card); border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent-fill);
  font-size: max(15px, calc(var(--u) * .95)); line-height: 1.38; color: var(--c-fg-2);
}
.la__alur b { font-size: max(16px, calc(var(--u) * 1.1)); font-weight: 700; color: var(--c-fg); }

.la__nb { white-space: nowrap; }
.la__label { position: static; }

.is-static #lampiran-arsitektur .la__alir path { animation: none; }
@media (max-width: 860px) {
  .la__batas { width: 100%; }
  .la__alur { grid-template-columns: 1fr; }
  .la__alir { display: none; }
}