/* 13 · #tinsai (milik S3). Semua pemilih diawali #tinsai atau .ts__
   Urutan waktu s0 (sejak scene aktif): ketik pertanyaan 0,15–0,85 dtk → baris 1 (0,95) → baris 2 (1,3) → baris 3 (1,65)
   → tautan (2,0). Aturan 1–4 menyala bersamaan dengan bagian jawaban yang memenuhinya.
   s1: ketik pertanyaan 2 → «Belum dapat disimpulkan» lebih dulu (aturan 5 menyala) → baris lain → tautan.
   ?static dan gerak dikurangi: keadaan akhir langsung (tanpa ketik dan jeda). */

#tinsai .ts__panel { align-items: center; }
.ts__isi { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .9); }
.ts__bingkai {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: calc(var(--u) * 1.3); align-items: start;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
#tinsai:not(.is-active) .ts__bingkai { opacity: 0; transform: translateY(14px); }

/* Panel asisten bergaya dashboard */
.ts__asisten { background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: 12px; box-shadow: var(--c-shadow); overflow: hidden; }
.ts__kepala { display: flex; align-items: center; gap: 10px; padding: calc(var(--u) * .65) calc(var(--u) * 1.1); border-bottom: 1px solid var(--c-line); background: var(--c-panel); }
.ts__kepala b { font-family: var(--display); font-weight: 700; font-size: max(17px, calc(var(--u) * 1.15)); line-height: 1; color: var(--c-fg); letter-spacing: .01em; }
.ts__tanda { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent-fill); box-shadow: 0 0 0 4px rgba(245, 158, 11, .16); }

.ts__obrolan {
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.15);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2) calc(var(--u) * 1.25);
  font-size: max(15px, calc(var(--u) * 1)); line-height: 1.45;
}
.ts__giliran { display: flex; flex-direction: column; gap: calc(var(--u) * .65); transition: opacity .6s var(--ease), transform .6s var(--ease); }
#tinsai[data-state="1"] .ts__giliran--1 { opacity: .42; }

/* Pertanyaan: gelembung kanan, diketik */
.ts__tanya {
  align-self: flex-end; max-width: 94%; margin: 0; text-wrap: balance;
  padding: .5em .9em; border-radius: 12px 12px 4px 12px;
  background: var(--c-card-2); border: 1px solid var(--c-line-2); color: var(--c-fg); font-weight: 500;
}
.ts__ketik-w { position: relative; display: inline-block; }
.ts__ketik { display: inline-block; }
.ts__ketik-w::after {
  content: ''; position: absolute; top: .12em; bottom: .12em; left: 100%; width: 2px; margin-left: 2px;
  background: var(--c-accent-fill); opacity: 0;
}
#tinsai.is-active .ts__giliran--1 .ts__ketik { animation: ts-ketik .7s steps(30, end) .15s both; }
#tinsai.is-active .ts__giliran--1 .ts__ketik-w::after { animation: ts-kursor .7s steps(30, end) .15s both, ts-hilang .25s linear .95s both; }
#tinsai.is-active .ts__giliran--2.on .ts__ketik { animation: ts-ketik .6s steps(26, end) .1s both; }
#tinsai.is-active .ts__giliran--2.on .ts__ketik-w::after { animation: ts-kursor .6s steps(26, end) .1s both, ts-hilang .25s linear .8s both; }
@keyframes ts-ketik { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ts-kursor { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }
@keyframes ts-hilang { from { opacity: 1; } to { opacity: 0; } }

/* Jawaban: baris demi baris, garis tipis amber di kiri */
.ts__jawab { align-self: flex-start; max-width: 97%; display: flex; flex-direction: column; align-items: flex-start; gap: .45em; padding-left: .95em; border-left: 2px solid rgba(245, 158, 11, .5); }
.ts__jawab p { margin: 0; color: var(--c-fg); }
.ts__baris { display: block; text-wrap: balance; }
.ts__a2, .ts__c2 { color: var(--c-fg-2); }
.ts__baris, .ts__bukti { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
#tinsai.is-active .ts__giliran--1 .ts__a1 { opacity: 1; transform: none; transition-delay: .95s; }
#tinsai.is-active .ts__giliran--1 .ts__a2 { opacity: 1; transform: none; transition-delay: 1.3s; }
#tinsai.is-active .ts__giliran--1 .ts__a3 { opacity: 1; transform: none; transition-delay: 1.65s; }
#tinsai.is-active .ts__giliran--1 .ts__a4 { opacity: 1; transform: none; transition-delay: 2s; }
#tinsai.is-active .ts__giliran--2.on .ts__c1 { opacity: 1; transform: none; transition-delay: .8s; }
#tinsai.is-active .ts__giliran--2.on .ts__c2 { opacity: 1; transform: none; transition-delay: 1.25s; }
#tinsai.is-active .ts__giliran--2.on .ts__c3 { opacity: 1; transform: none; transition-delay: 1.55s; }
#tinsai.is-active .ts__giliran--2.on .ts__c4 { opacity: 1; transform: none; transition-delay: 1.85s; }

/* «Belum dapat disimpulkan»: garis bawah amber ditarik setelah frasa muncul */
.ts__jawab mark {
  color: inherit; font-weight: 600; padding-bottom: 2px;
  background: linear-gradient(var(--c-accent-fill), var(--c-accent-fill)) left bottom / 0 2px no-repeat;
  transition: background-size .6s var(--ease);
}
#tinsai.is-active .ts__giliran--2.on mark { background-size: 100% 2px; transition-delay: 1.15s; }

/* Tautan bukti: melompat ke #tahap (s0 produksi, s1 stok) */
.ts__bukti {
  display: inline-flex; align-items: center; gap: .45em; margin: .1em 0 0; padding: .2em 0; cursor: pointer;
  background: none; border: 0; color: var(--c-accent); font-size: var(--fs-label); font-weight: 600; line-height: 1.3; text-align: left;
}
.ts__bukti svg { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ts__bukti:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* Kolom tanya (hiasan, tanpa teks) */
.ts__masuk {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 calc(var(--u) * 1.2) calc(var(--u) * 1.1); padding: calc(var(--u) * .55) calc(var(--u) * .8);
  border: 1px solid var(--c-line-2); border-radius: 10px; background: var(--bg-primary);
}
.ts__masuk i { width: 2px; height: 1.15em; background: var(--c-muted); opacity: .7; font-size: max(15px, calc(var(--u) * 1)); }
.ts__masuk svg { width: 18px; height: 18px; fill: none; stroke: var(--c-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Lima aturan (PRO hlm 17): menyala satu per satu */
.ts__aturan { padding-top: calc(var(--u) * .3); }
.ts__aturan-judul { margin: 0 0 calc(var(--u) * .7); font-size: var(--fs-label); font-weight: 600; color: var(--c-muted); }
.ts__aturan ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .55); }
.ts__aturan li {
  display: flex; align-items: center; gap: .7em;
  padding: .66em .85em; border-radius: 8px; border: 1px solid var(--c-line);
  background: var(--c-card); color: var(--c-muted);
  font-size: max(14px, calc(var(--u) * .95)); font-weight: 600; line-height: 1.25;
  transition: color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ts__aturan i {
  flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--c-line-2); transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.ts__aturan svg { width: 72%; height: 72%; fill: none; stroke: var(--bg-primary); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s var(--ease); }
/* Menyala: teks terang, lingkaran amber berisi centang */
#tinsai.is-active .ts__r1, #tinsai.is-active .ts__r2, #tinsai.is-active .ts__r3, #tinsai.is-active .ts__r4,
#tinsai.is-active[data-state="1"] .ts__r5 { color: var(--c-fg); border-color: rgba(245, 158, 11, .32); }
#tinsai.is-active .ts__r1 i, #tinsai.is-active .ts__r2 i, #tinsai.is-active .ts__r3 i, #tinsai.is-active .ts__r4 i,
#tinsai.is-active[data-state="1"] .ts__r5 i { background-color: var(--c-accent-fill); border-color: var(--c-accent-fill); }
#tinsai.is-active .ts__r1 svg, #tinsai.is-active .ts__r2 svg, #tinsai.is-active .ts__r3 svg, #tinsai.is-active .ts__r4 svg,
#tinsai.is-active[data-state="1"] .ts__r5 svg { opacity: 1; }
#tinsai.is-active .ts__r1, #tinsai.is-active .ts__r1 i, #tinsai.is-active .ts__r1 svg { transition-delay: .95s; }
#tinsai.is-active .ts__r2, #tinsai.is-active .ts__r2 i, #tinsai.is-active .ts__r2 svg { transition-delay: 1.3s; }
#tinsai.is-active .ts__r3, #tinsai.is-active .ts__r3 i, #tinsai.is-active .ts__r3 svg { transition-delay: 1.65s; }
#tinsai.is-active .ts__r4, #tinsai.is-active .ts__r4 i, #tinsai.is-active .ts__r4 svg { transition-delay: 2s; }
#tinsai.is-active[data-state="1"] .ts__r5 { border-color: rgba(245, 158, 11, .6); box-shadow: 0 0 0 1px rgba(245, 158, 11, .35) inset, var(--c-shadow); }
#tinsai.is-active[data-state="1"] .ts__aturan li:not(.ts__r5) { border-color: var(--c-line); }
#tinsai.is-active[data-state="1"] .ts__r5, #tinsai.is-active[data-state="1"] .ts__r5 i, #tinsai.is-active[data-state="1"] .ts__r5 svg { transition-delay: .8s; }
/* Di s1 aturan 1–4 tetap menyala tanpa jeda */
#tinsai.is-active[data-state="1"] .ts__aturan li:not(.ts__r5), #tinsai.is-active[data-state="1"] .ts__aturan li:not(.ts__r5) i,
#tinsai.is-active[data-state="1"] .ts__aturan li:not(.ts__r5) svg { transition-delay: 0s; }

.ts__label { position: static; }

/* ?static: semua tampil di keadaan akhir, tanpa ketik dan tanpa jeda */
.is-static #tinsai .ts__bingkai { opacity: 1; transform: none; }
.is-static #tinsai .ts__giliran--1 { opacity: 1; }
.is-static #tinsai .ts__baris, .is-static #tinsai .ts__bukti { opacity: 1; transform: none; }
.is-static #tinsai .ts__ketik, .is-static #tinsai .ts__ketik-w::after,
.is-reduced #tinsai .ts__ketik, .is-reduced #tinsai .ts__ketik-w::after { animation: none !important; }
.is-static #tinsai mark { background-size: 100% 2px; }
.is-static #tinsai .ts__aturan li { color: var(--c-fg); border-color: rgba(245, 158, 11, .3); }
.is-static #tinsai .ts__aturan i { background-color: var(--c-accent-fill); border-color: var(--c-accent-fill); }
.is-static #tinsai .ts__aturan svg { opacity: 1; }
.is-static #tinsai *, .is-static #tinsai *::after { transition-delay: 0s !important; }

@media (max-width: 860px) {
  .ts__bingkai { grid-template-columns: 1fr; }
}