/* 02 · #arti (milik S1). Semua pemilih diawali #arti atau .ar__ ; warna hanya dari token base.css */

/* Narasi + kartu dipusatkan sebagai satu kelompok (bukan kartu melayang di tengah sisa ruang) */
html:not(.is-static) #arti .scene__sticky { grid-template-rows: auto auto; align-content: center; row-gap: calc(var(--u) * 2.2); }
#arti .ar__panel { height: auto; flex-direction: column; justify-content: center; align-items: stretch; }

/* Empat kartu sebaris; anatomi sama: judul, bidang visual 16:10, tiga baris */
#arti .ar__baris {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: stretch;
}
#arti .ar__kartu {
  display: flex; flex-direction: column; gap: calc(var(--u) * .75);
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: calc(var(--u) * 1.05) calc(var(--u) * 1.1) calc(var(--u) * 1.2);
  --ar-z: .4; --ar-t: var(--c-muted);   /* "belum aktif": visual 40%, teks abu yang tetap terbaca (≥ 4,5:1) */
  transition: opacity .5s var(--ease), transform .7s var(--ease), border-color .5s, box-shadow .5s, border-radius .5s;
  transition-delay: calc(var(--k) * 60ms);
}
#arti .ar__judul { margin: 0; font-size: calc(var(--fs-label) * 1.12); font-weight: 700; line-height: 1.25; }

/* Fokus per langkah: s0 kartu 01 (satu bayangan fokus), s1 kartu 02 + 03, s2 kartu 04 */
#arti .ar__kartu--1 { --ar-z: 1; --ar-t: var(--c-fg); border-color: var(--c-accent-fill); box-shadow: var(--c-shadow); }
#arti[data-state="1"] .ar__kartu--1 { border-color: var(--c-line); box-shadow: none; }
#arti[data-state="1"] .ar__kartu--2, #arti[data-state="1"] .ar__kartu--3 { --ar-z: 1; --ar-t: var(--c-fg); border-color: var(--c-accent-fill); }
#arti[data-state="2"] .ar__kartu { --ar-z: 1; --ar-t: var(--c-fg); border-color: var(--c-line); box-shadow: none; }
#arti[data-state="2"] .ar__kartu--4 { border-color: var(--c-accent-fill); }
#arti .ar__zona, #arti .ar__alur .ar__m { opacity: var(--ar-z); transition: opacity .5s var(--ease), background .4s, border-color .4s; }
#arti .ar__judul, #arti .ar__alur li { color: var(--ar-t); transition: color .5s var(--ease); }

/* Transisi dari #pembuka: enam titik sistem menjadi empat kartu (padanan statis: langsung tampil) */
html:not(.is-static) #arti:not(.is-active) .ar__kartu { opacity: 0; transform: scale(.06); border-radius: 50%; }

/* Bidang visual */
#arti .ar__zona { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 8px; background: var(--c-card-2); overflow: hidden; }
#arti .ar__foto img { position: absolute; inset: 0; }

/* Tiga baris teks visual: penanda kiri, garis penghubung untuk alur berurutan */
#arti .ar__alur { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .5); }
#arti .ar__alur li { position: relative; display: flex; align-items: center; gap: .6em; min-height: 1.55em; font-size: var(--fs-label); line-height: 1.25; }
#arti .ar__alur b { font-weight: 600; }
#arti .ar__alur small { margin-left: auto; padding-left: .5em; font-size: var(--fs-kecil); font-weight: 500; color: var(--c-muted); white-space: nowrap; }
#arti .ar__m {
  position: relative; z-index: 1; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--c-line-2); background: var(--c-card);
  transition: background .4s, border-color .4s;
}
#arti .ar__alur--wujud li + li::before, #arti .ar__alur--tahap li + li::before, #arti .ar__alur--proses li + li::before {
  content: ''; position: absolute; left: 4.25px; bottom: 50%; height: calc(100% + var(--u) * .5);
  border-left: 1.5px solid var(--c-line);
}

/* Kartu 01: baris wujud masuk dari kiri mengikuti gulir (kelas .is-on dari JS) */
#arti .ar__alur--wujud li { opacity: 0; transform: translateX(-18px); transition: opacity .4s var(--ease), transform .55s var(--ease); }
#arti .ar__alur--wujud li.is-on { opacity: 1; transform: none; }
#arti .ar__alur--wujud li.is-on .ar__m { background: var(--c-accent-fill); border-color: var(--c-accent-fill); }

/* Kartu 02: satu batang mengisi Estimasi (amber) → Taksasi (biru) → Definitif (hijau) */
#arti .ar__zona--kepastian { display: flex; align-items: center; padding: 0 calc(var(--u) * 1.1); }
#arti .ar__batang { flex: 1; display: flex; gap: 2px; height: calc(var(--u) * 1.5); min-height: 16px; border-radius: 5px; overflow: hidden; background: var(--c-line); }
#arti .ar__seg { flex: 1; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); }
#arti .ar__seg--e { background: var(--c-accent-fill); }
#arti .ar__seg--t { background: var(--c-info); }
#arti .ar__seg--d { background: var(--c-good); }
#arti .ar__alur--tahap .ar__m { border-radius: 3px; }
#arti[data-state="1"] .ar__seg, #arti[data-state="2"] .ar__seg { transform: none; }
#arti[data-state="1"] .ar__seg--t { transition-delay: .45s; }
#arti[data-state="1"] .ar__seg--d { transition-delay: .9s; }
#arti[data-state="1"] .ar__t--e .ar__m, #arti[data-state="2"] .ar__t--e .ar__m { background: var(--c-accent-fill); border-color: var(--c-accent-fill); }
#arti[data-state="1"] .ar__t--t .ar__m, #arti[data-state="2"] .ar__t--t .ar__m { background: var(--c-info); border-color: var(--c-info); }
#arti[data-state="1"] .ar__t--d .ar__m, #arti[data-state="2"] .ar__t--d .ar__m { background: var(--c-good); border-color: var(--c-good); }
#arti[data-state="1"] .ar__t--t .ar__m { transition-delay: .45s; }
#arti[data-state="1"] .ar__t--d .ar__m { transition-delay: .9s; }

/* Kartu 03: dokumen sampai ujung lebih dulu, material masih di jalan */
#arti .ar__zona--proses { display: grid; grid-template-rows: 1fr 1fr; padding: calc(var(--u) * .4) 0; }
#arti .ar__lajur { position: relative; }
#arti .ar__lajur::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 1.5px solid var(--c-line-2); }
#arti .ar__lajur--material::before { border-top-style: dashed; }
#arti .ar__tujuan { position: absolute; right: 8%; top: 16%; bottom: 16%; border-left: 2px solid var(--c-line-2); }
#arti .ar__ikon { position: absolute; top: 50%; left: 8%; height: 62%; width: auto; transform: translate(-50%, -50%); overflow: visible; transition: left 1s var(--ease); }
#arti .ar__ikon path, #arti .ar__ikon circle { vector-effect: non-scaling-stroke; }
#arti .ar__kertas { fill: var(--c-card); stroke: var(--c-fg-2); stroke-width: 1.4; stroke-linejoin: round; }
#arti .ar__lipat { fill: none; stroke: var(--c-fg-2); stroke-width: 1.4; stroke-linejoin: round; }
#arti .ar__garis-teks { fill: none; stroke: var(--c-line-2); stroke-width: 1.4; stroke-linecap: round; }
#arti .ar__cek-bg { fill: var(--c-fg); opacity: 0; transition: opacity .3s; }
#arti .ar__cek { fill: none; stroke: var(--c-card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
#arti .ar__karung { fill: var(--c-accent-fill); stroke: var(--c-accent-soft); stroke-width: 1.2; stroke-linejoin: round; }
#arti .ar__ikat { fill: none; stroke: var(--c-card); stroke-width: 1.4; stroke-linecap: round; }
#arti[data-state="1"] .ar__ikon--dok, #arti[data-state="2"] .ar__ikon--dok { left: 92%; transition-duration: .8s; }
#arti[data-state="1"] .ar__ikon--material, #arti[data-state="2"] .ar__ikon--material { left: 52%; transition-duration: 2.2s; transition-delay: .15s; }
#arti[data-state="1"] .ar__cek-bg, #arti[data-state="1"] .ar__cek,
#arti[data-state="2"] .ar__cek-bg, #arti[data-state="2"] .ar__cek { opacity: 1; }
#arti[data-state="1"] .ar__cek-bg, #arti[data-state="1"] .ar__cek { transition-delay: .8s; }
#arti[data-state="1"] .ar__ikon--material { animation: ar-jalan 2.4s ease-in-out 2.4s infinite; }
@keyframes ar-jalan { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-36%, -50%); } }
#arti[data-state="1"] .ar__s--tutup .ar__m, #arti[data-state="2"] .ar__s--tutup .ar__m,
#arti[data-state="1"] .ar__s--kirim .ar__m, #arti[data-state="2"] .ar__s--kirim .ar__m { background: var(--c-fg); border-color: var(--c-fg); }
#arti[data-state="1"] .ar__s--terima .ar__m, #arti[data-state="2"] .ar__s--terima .ar__m { border-style: dashed; }

/* Kartu 04: satu catatan membawa tiga konteks */
#arti .ar__zona--konteks { display: flex; align-items: center; justify-content: center; }
#arti .ar__rekam { width: 100%; height: 100%; overflow: visible; }
#arti .ar__rekam-kartu { fill: var(--c-card); stroke: var(--c-line-2); stroke-width: 1.4; }
#arti .ar__rekam-baris { fill: none; stroke: var(--c-line-2); stroke-width: 3; stroke-linecap: round; }
#arti .ar__rekam-kait { fill: none; stroke: var(--c-line-2); stroke-width: 1.4; transition: stroke .4s; }
#arti .ar__tag rect { fill: var(--c-card); stroke: var(--c-line-2); stroke-width: 1.4; transition: stroke .4s; }
#arti .ar__tag path, #arti .ar__tag circle { fill: none; stroke: var(--c-fg-2); stroke-width: 1.5; stroke-linejoin: round; transition: stroke .4s; }
#arti .ar__alur--konteks .ar__m { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }
#arti[data-state="2"] .ar__tag rect, #arti[data-state="2"] .ar__rekam-kait { stroke: var(--c-accent-fill); }
#arti[data-state="2"] .ar__tag path, #arti[data-state="2"] .ar__tag circle { stroke: var(--c-accent); }
#arti[data-state="2"] .ar__alur--konteks .ar__m { background: var(--c-accent-fill); border-color: var(--c-accent-fill); transition-delay: calc(.25s + var(--k) * .18s); }
#arti[data-state="2"] .ar__tag--2 rect, #arti[data-state="2"] .ar__kait--2 { transition-delay: .18s; }
#arti[data-state="2"] .ar__tag--3 rect, #arti[data-state="2"] .ar__kait--3 { transition-delay: .36s; }

/* s2: kartu turun dan bertumpu pada bilah Fondasi Informasi (menjadi lapisan dasar di #lapisan) */
#arti .ar__fondasi {
  margin: calc(var(--u) * 1.1) 0 0; min-height: calc(var(--u) * 3.1);
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--c-accent-fill);
  background: color-mix(in srgb, var(--accent) 12%, var(--c-card));
  color: var(--c-fg); font-family: var(--font); font-weight: 700; font-size: calc(var(--u) * 1.3); letter-spacing: -.005em;
  opacity: 0; transform: scaleX(.25); transition: opacity .45s var(--ease), transform .7s var(--ease);
}
#arti[data-state="2"] .ar__fondasi { opacity: 1; transform: none; transition-delay: .3s; }
#arti[data-state="2"] .ar__kartu { transform: translateY(calc(var(--u) * 1.1)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

@media (max-width: 860px) {
  #arti .ar__baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #arti .ar__fondasi { font-size: 18px; }
  #arti[data-state="2"] .ar__kartu { transform: none; border-radius: var(--radius); }
}
@media (max-width: 560px) {
  #arti .ar__baris { grid-template-columns: minmax(0, 1fr); }
}