/* ============================================================
   AI-ANCHOR: CSS_TREE — TASK-060 (owner #77) · TASK-075 (owner #140): pohon jaringan 10 level "YOU on top" (js/tree.js).
   Dipakai landing + onboarding + paywall.
   Susunan: kepala (YOU 64px + total berjalan berlabel + tanda "contoh") → 3 kartu kelompok (① titik orang · ② bar L2–L3 ·
   ③ tangga L4–L10) → kalimat pemicu keputusan → chip berulang/autopilot.
   Grid 4/8 px · font 10/12/14/16/20/24/32 · muncul berurutan (.in) · denyut (.ping/.hit) hanya transform/opacity;
   prefers-reduced-motion = statis.
   ============================================================ */
.nt { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; }

/* ── kepala ─────────────────────────────────────────────────────────────────────────────────── */
.nt-hd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 12px; }
.nt-av { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-btn-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .25), 0 12px 32px rgba(var(--brand-rgb), .35); color: var(--on-brand); }
.nt-av b { font: 800 14px/1 var(--font-data); letter-spacing: .06em; }
.nt-av::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 8px; background: linear-gradient(var(--brand), rgba(var(--brand-rgb), 0)); transform: translateX(-50%); }
.nt-av.hit { animation: nt-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes nt-bump { 40% { transform: scale(1.12); } }
.nt-sum { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.nt-sk { color: var(--mut); font: 700 10px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.nt-sv { display: inline-flex; align-items: baseline; gap: 4px; color: #3DDC84; font: 800 32px/1.1 var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: -.02em; opacity: .45; transition: opacity .3s ease; }
.nt-sv.live { opacity: 1; }
.nt-sv em { color: var(--mut); font: 700 12px/1.2 var(--font-data); font-style: normal; }
.nt-sv.bump { animation: nt-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
.nt-tag { padding: 4px 8px; border-radius: var(--radius-sm, 6px); background: rgba(var(--brand-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .3); color: var(--brand2); font: 700 10px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.nt-d { position: absolute; left: 50%; top: 4px; color: #3DDC84; font: 800 12px/1.3 var(--font-data); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(24px); }
.nt-d.on { animation: nt-d 1.4s ease-out both; }
@keyframes nt-d { 0% { opacity: 0; transform: translate(24px, 8px); } 18% { opacity: 1; transform: translate(24px, 0); } 100% { opacity: 0; transform: translate(24px, -16px); } }

/* ── 3 kelompok ─────────────────────────────────────────────────────────────────────────────── */
.nt-g { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nt-grp { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--ob-r2, 10px); background: rgba(var(--brand-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .16); opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; transition-delay: var(--d, 0ms); }
.nt.in .nt-grp { opacity: 1; transform: none; }
.nt-grp.g1 { background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); }
.nt-grp.hit { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .7); }
.nt-gh { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.nt-gn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--brand-rgb), .2); color: var(--brand2); font: 800 10px/1 var(--font-data); }
.nt-grp.g1 .nt-gn { background: rgba(61, 220, 132, .22); color: #3DDC84; }
.nt-gt { min-width: 0; color: var(--txt); font: 700 14px/1.45 var(--font-data); overflow-wrap: anywhere; }
.nt-gm { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.nt-gm b { color: #3DDC84; font: 800 14px/1.2 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-grp.g1 .nt-gm b { font-size: 16px; }
/* catatan "per langganan aktif" (owner #141): boleh turun baris supaya kolom uang tidak melebar & judul tidak terpecah 3 baris di 320px */
.nt-gm small { max-width: 96px; color: var(--mut); font: 600 10px/1.4 var(--font-data); text-align: right; }

/* ① titik orang yang kamu ajak */
.nt-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding-left: 32px; }
.nt-me i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 2px rgba(61, 220, 132, .25); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--d, 0ms) + var(--k, 0ms)); }
.nt.in .nt-me i { transform: scale(1); }
.nt-me i.ping { animation: nt-ping .9s ease-out; }
@keyframes nt-ping { 0% { transform: scale(1); } 35% { transform: scale(1.8); } 100% { transform: scale(1); } }

/* ② bar L2–L3 */
.nt-bars { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 0 32px; list-style: none; }
.nt-bars li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 16px; }
.nt-lb { color: var(--mut); font: 700 12px/1 var(--font-data); }
.nt-tk { position: relative; height: 8px; min-width: 0; border-radius: 999px; background: rgba(var(--brand-rgb), .14); overflow: hidden; }
.nt-tk i { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: 999px; background: var(--surface-btn-primary); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0ms) + var(--k, 0ms) + 160ms); }
.nt.in .nt-tk i { transform: scaleX(1); }
.nt-bars li b { color: var(--txt); font: 700 12px/1.2 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-bars li.ping .nt-lb, .nt-bars li.ping b { color: #3DDC84; }
.nt-bars li.ping .nt-tk i { background: #3DDC84; }

/* ③ tangga L4–L10 */
.nt-stair { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 4px; margin: 0; padding: 0 0 0 32px; list-style: none; }
.nt-stair li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 48px; justify-content: flex-end; }
.nt-sb { width: 100%; max-width: 24px; height: var(--h, 50%); border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 2px 2px; background: rgba(var(--brand-rgb), .45); transform: scaleY(0); transform-origin: bottom center; transition: transform .5s cubic-bezier(.2, .8, .2, 1), background .3s ease; transition-delay: calc(var(--d, 0ms) + var(--k, 0ms) + 160ms); }
.nt.in .nt-sb { transform: scaleY(1); }
.nt-sl { color: var(--mut); font: 700 10px/1 var(--font-data); }
.nt-stair li.ping .nt-sb { background: #3DDC84; }
.nt-stair li.ping .nt-sl { color: #3DDC84; }

/* ── penutup ────────────────────────────────────────────────────────────────────────────────── */
.nt-kick { margin: 0; padding: 12px; border-radius: var(--ob-r2, 10px); background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); color: #3DDC84; font: 800 14px/1.35 var(--font-data); text-align: center; text-wrap: balance; }
.nt-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nt-foot span { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; font: 700 12px/1.3 var(--font-data); letter-spacing: .02em; }
.nt-rec { background: rgba(61, 220, 132, .12); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .45); color: #3DDC84; }
.nt-auto { background: rgba(var(--brand-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); color: var(--brand2); }

@media (min-width: 560px) {
	.nt-gt { font-size: 16px; }
	.nt-stair li { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.nt-grp, .nt-me i, .nt-tk i, .nt-sb { transition: none; opacity: 1; transform: none; }
	.nt-av.hit, .nt-sv.bump, .nt-d.on, .nt-me i.ping { animation: none; }
	.nt-d { opacity: 0; }
}