/* ============================================================
   ASTA — Lapisan hiasan SVG
   Menempatkan motif dari js/lib/decor.js di belakang konten.
   Aturan pokok: hiasan tidak boleh pernah menghalangi klik,
   menaikkan kontras teks, atau mengubah tinggi elemen.
   ============================================================ */

.decor-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  /* Warna motif diwarisi lewat currentColor */
  color: var(--primary);
  opacity: .55;
}

.decor-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Konten di dalam wadah berhias harus naik di atas lapisan */
.decor-host > *:not(.decor-layer) { position: relative; z-index: 1; }

/* ---------------- Rona ---------------- */
.decor-primary { color: var(--primary); }
.decor-teal    { color: var(--teal); }
.decor-violet  { color: var(--violet); }
.decor-success { color: var(--success); }
.decor-light   { color: #ffffff; opacity: .5; }

/* ---------------- Penempatan ----------------
   Motif jarang perlu memenuhi seluruh kotak; biasanya lebih baik
   menempel di satu sisi supaya sisi teks tetap bersih. */
.decor-at-right {
  left: auto;
  width: var(--decor-size, 46%);
  min-width: 220px;
  -webkit-mask-image: linear-gradient(to left, #000 46%, transparent 100%);
  mask-image: linear-gradient(to left, #000 46%, transparent 100%);
}
.decor-at-left {
  right: auto;
  width: var(--decor-size, 46%);
  min-width: 220px;
  -webkit-mask-image: linear-gradient(to right, #000 46%, transparent 100%);
  mask-image: linear-gradient(to right, #000 46%, transparent 100%);
}
.decor-at-top {
  bottom: auto;
  height: var(--decor-size, 58%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 62%);
  mask-image: linear-gradient(to top, transparent 0%, #000 62%);
}
.decor-at-bottom {
  top: auto;
  height: var(--decor-size, 58%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
}
.decor-at-corner {
  left: auto;
  bottom: auto;
  width: var(--decor-size, 260px);
  height: var(--decor-size, 260px);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 74%);
  mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 74%);
}

/* ---------------- Hiasan bilah atas ----------------
   Setiap halaman aplikasi mendapat satu motif sesuai maknanya,
   dipasang otomatis oleh Shell. Sengaja sangat samar: bilah ini
   memuat judul halaman, jadi keterbacaan lebih utama. */
.topbar { position: sticky; overflow: hidden; }
.topbar .decor-layer {
  /* Motif sendiri sudah bertransparansi 0,1-0,42 di dalam SVG-nya,
     jadi lapisan ini justru perlu opasitas tinggi supaya terbaca
     samar-samar. Nilai akhirnya tetap di bawah 0,4. */
  opacity: .9;
  width: min(52%, 620px);
  left: auto;
}

/* Kartu yang secara eksplisit meminta hiasan */
.card.decor-host { overflow: hidden; }
.card .decor-layer { opacity: .4; }

/* Panel gelap (sisi kiri halaman masuk, ajakan penutup landing) */
.on-dark { overflow: hidden; }
.on-dark .decor-layer { color: #ffffff; opacity: .5; }

/* ---------------- Aksesibilitas ---------------- */
@media (prefers-reduced-motion: reduce) {
  .decor-layer { transition: none !important; animation: none !important; }
}

/* Kontras tinggi: hiasan justru mengganggu, jadi dilepas */
@media (prefers-contrast: more) {
  .decor-layer { display: none; }
}

/* Cetak: tinta jangan terbuang untuk hiasan */
@media print {
  .decor-layer { display: none; }
}

/* Layar kecil: bilah atas sudah padat, hiasan dikecilkan */
@media (max-width: 720px) {
  .topbar .decor-layer { opacity: .6; width: 44%; }
}

/* ============================================================
   Blok penjelas beriliustrasi
   Memasangkan satu ilustrasi naratif (js/lib/illustrations.js)
   dengan teks penjelasan. Dipakai di kepala halaman yang
   konsepnya perlu digambarkan, bukan sekadar dituliskan.
   ============================================================ */
.explainer {
  display: grid;
  grid-template-columns: minmax(140px, 210px) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--nm-1);
  /* Ilustrasi mengikuti token tema lewat variabel ini */
  --illus-ink: var(--text);
  --illus-line: var(--line);
  --illus-soft: var(--surface-alt);
  --illus-white: var(--white);
  --illus-pri: var(--primary);
  --illus-teal: var(--teal);
  --illus-violet: var(--violet);
}
.explainer > .art { min-width: 0; }
.explainer > .art svg { display: block; width: 100%; height: auto; }
.explainer h3 { font-size: 16.5px; margin: 0 0 7px; }
.explainer p { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 0; }
.explainer p + p { margin-top: 9px; }

/* Varian rona untuk ilustrasi yang lebih pas berwarna lain */
.explainer.tone-violet { --illus-pri: var(--violet); }
.explainer.tone-teal { --illus-pri: var(--teal); }

@media (max-width: 720px) {
  .explainer { grid-template-columns: 1fr; gap: var(--s-4); }
  .explainer > .art { max-width: 230px; margin-inline: auto; }
}