/* ═══════════════════════════════════════════════════════════════════════
   /platform/threvix — mengikuti "NEW UI KONSEP/SkyCyber Threvix 2.html"
   ═══════════════════════════════════════════════════════════════════════
   CSS biasa, bukan Tailwind. Dipakai HANYA oleh platform/_threvix.blade.php.

   BERBEDA dari halaman gelap lain, berkas ini BERDIRI SENDIRI dan tidak
   memuat home-v2.css. Alasannya ada di konsepnya: sistem .sc2 memakai
   JetBrains Mono untuk judul dan sudut siku di mana pun, sementara konsep
   Threvix memakai Inter untuk judul, sudut membulat, kartu bergradien, dan
   kotak ikon. Memuat home-v2.css hanya akan menambah 55 KB aturan yang
   tidak terpakai sekaligus berisiko bertabrakan dengan sudut membulatnya.

   Yang tetap dipakai bersama seluruh situs: header, footer, dan tombol
   melayang dari chrome-v2.css, serta kelas .reveal milik layouts/app.

   Monospace tetap hadir, tapi perannya dibatasi: label kecil, angka, dan
   lencana. Judul dan teks isi memakai Inter.

   Semua kelas berawalan "tx-" dan token hidup di dalam .tx saja, jadi
   empat halaman platform lain tidak ikut berubah.
   ═══════════════════════════════════════════════════════════════════════ */

.tx {
    /* Permukaan */
    --ink:        #0b0b0d;
    --panel:      #131315;
    --card-a:     #17171a;
    --card-b:     #0e0e11;
    --card-a-hi:  #1e1e23;
    --card-b-hi:  #131317;

    /* Teks */
    --paper:      #f2efea;
    --dim:        rgba(242, 239, 234, .62);
    --soft:       rgba(242, 239, 234, .56);
    --mute:       rgba(242, 239, 234, .54);
    --faint:      rgba(242, 239, 234, .44);
    --ghost:      rgba(242, 239, 234, .30);

    /* Garis */
    --line:       rgba(242, 239, 234, .13);
    --line-soft:  rgba(242, 239, 234, .09);
    --line-hair:  rgba(242, 239, 234, .06);

    /* Aksen */
    --amber:      #f5a01b;
    --amber-hi:   #ffb43c;
    --on-amber:   #141005;
    --amber-line: rgba(245, 160, 27, .24);
    --amber-lit:  rgba(245, 160, 27, .32);

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --pad-x: clamp(20px, 4vw, 64px);
    --pad-y: clamp(52px, 6.6vw, 104px);

    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
}

/* ─── Melepas monospace global ─────────────────────────────────────────
   layouts/app.blade.php memaksa seluruh situs memakai JetBrains Mono lewat
   selektor ELEMEN: "h1..h6" dan "p, li, span, a:not(...), td, th, button".
   Aturan pada elemen selalu mengalahkan nilai warisan, jadi menaruh --sans
   di .tx saja tidak cukup.

   Berkas ini dimuat SESUDAH blok <style> layout (@stack('head') berada di
   bawahnya), jadi cukup MENYAMAI spesifisitasnya, tidak perlu melampaui.
   Yang perlu diperhatikan: selektor tautannya bernilai (0,2,1) karena dua
   :not() ikut dihitung, sehingga tombol butuh "a.tx-btn". */
.tx p,
.tx li,
.tx h1, .tx h2, .tx h3, .tx h4,
.tx th, .tx td,
.tx button,
.tx blockquote,
.tx-h2 span,
.tx-cyc__name,
.tx-ml__ul span { font-family: var(--sans); }

.tx a.tx-btn { font-family: var(--sans); }

/* Kebalikannya: keterangan monospace yang kebetulan ditulis sebagai <p>
   atau <li> harus merebut kembali fontnya dari aturan di atas. */
.tx p.tx-note,
.tx li.tx-note { font-family: var(--mono); }

/* ─── Kerangka section ─────────────────────────────────────────────── */

.tx-sec { position: relative; padding: var(--pad-y) var(--pad-x); }
.tx-sec--panel { background: var(--panel); border-block: 1px solid var(--line); }
/* Selebar bilah header, untuk SEMUA section. .sc-nav__bar di chrome-v2.css
   tidak memakai batas 1280px, hanya padding sisi clamp(20px, 4vw, 64px)
   yang sama dengan --pad-x milik .tx-sec, jadi tanpa max-width di sini
   tepi kiri kanan isi section sudah sejajar dengan logo dan menu di
   header. Hero dan penutup punya batasnya sendiri (1180px dan 900px)
   karena keduanya rata tengah, bukan rata tepi. */
.tx-wrap { position: relative; }

/* Kepala section: lencana bernomor, judul, kalimat pengantar di kanan. */
.tx-head {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 60px);
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: clamp(26px, 3.2vw, 44px);
}
.tx-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(245, 160, 27, .26);
    background: rgba(245, 160, 27, .08);
    font: 500 10px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
}
.tx-h2 {
    margin: 20px 0 0;
    font-size: clamp(28px, 4.2vw, 54px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--paper);
    max-width: 17ch;
}
.tx-h2 span { color: var(--amber); }
.tx-lead {
    margin: 0;
    max-width: 36ch;
    font-size: 13.5px;
    line-height: 1.76;
    color: var(--mute);
}

/* ─── Tombol ───────────────────────────────────────────────────────── */

.tx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.tx-btn svg { flex: none; width: 16px; height: 16px; }
.tx-btn--amber {
    background: var(--amber);
    color: var(--on-amber);
    font-weight: 600;
    box-shadow: 0 22px 44px -24px rgba(245, 160, 27, .95);
}
.tx-btn--amber:hover { background: var(--amber-hi); color: var(--on-amber); transform: translateY(-2px); }
.tx-btn--ghost {
    background: rgba(242, 239, 234, .04);
    color: var(--paper);
    border-color: rgba(242, 239, 234, .18);
}
.tx-btn--ghost:hover { background: rgba(242, 239, 234, .09); border-color: rgba(242, 239, 234, .42); color: var(--paper); }
/* Varian di atas ground amber (section penutup). */
.tx-btn--ink { background: #141005; color: #ffd489; font-weight: 600; }
.tx-btn--ink:hover { background: #241a09; color: #ffd489; transform: translateY(-2px); }
.tx-btn--outline { background: transparent; color: var(--on-amber); border-color: rgba(20, 16, 5, .38); }
.tx-btn--outline:hover { background: rgba(20, 16, 5, .08); border-color: rgba(20, 16, 5, .6); color: var(--on-amber); }

/* ─── Kotak ikon ───────────────────────────────────────────────────── */

.tx-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid var(--amber-line);
    background: linear-gradient(150deg, rgba(245, 160, 27, .18), rgba(245, 160, 27, .02));
    color: var(--amber);
}
.tx-tile svg { width: 18px; height: 18px; }
.tx-tile--lg { width: clamp(56px, 5.8vw, 70px); height: clamp(56px, 5.8vw, 70px); border-radius: 19px; }
.tx-tile--lg svg { width: clamp(26px, 2.8vw, 32px); height: clamp(26px, 2.8vw, 32px); }
.tx-tile--sm { width: 36px; height: 36px; border-radius: 11px; }
.tx-tile--sm svg { width: 16px; height: 16px; }

/* ─── Baris keterangan monospace ───────────────────────────────────── */

.tx-notes { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.tx-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}
.tx-note svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

/* ─── 1. HERO ──────────────────────────────────────────────────────── */

.tx-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }

/* Empat lapis latar, semuanya dekoratif dan tidak menangkap pointer:
   pijar amber di puncak, titik titik, kisi besar, lalu dua cincin orbit. */
.tx-hero__pool,
.tx-hero__dots,
.tx-hero__grid,
.tx-hero__ring,
.tx-hero__fade { position: absolute; pointer-events: none; }

.tx-hero__pool { inset: 0; background: radial-gradient(78% 62% at 50% -12%, rgba(245, 160, 27, .20), transparent 62%); }
.tx-hero__dots {
    inset: 0;
    background-image: radial-gradient(rgba(242, 239, 234, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(64% 58% at 50% 22%, #000, transparent 76%);
            mask-image: radial-gradient(64% 58% at 50% 22%, #000, transparent 76%);
}
.tx-hero__grid {
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(242, 239, 234, .05) 1px, transparent 1px),
        linear-gradient(rgba(242, 239, 234, .05) 1px, transparent 1px);
    background-size: clamp(90px, 10vw, 170px) clamp(90px, 10vw, 170px);
    -webkit-mask-image: radial-gradient(86% 78% at 50% 40%, #000 20%, transparent 78%);
            mask-image: radial-gradient(86% 78% at 50% 40%, #000 20%, transparent 78%);
}
.tx-hero__ring {
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    -webkit-mask-image: linear-gradient(#000, transparent 62%);
            mask-image: linear-gradient(#000, transparent 62%);
}
.tx-hero__ring--1 { top: clamp(120px, 20vw, 240px); width: min(94vw, 1080px); border: 1px solid rgba(245, 160, 27, .14); }
.tx-hero__ring--2 { top: clamp(190px, 28vw, 330px); width: min(72vw, 820px);  border: 1px solid rgba(245, 160, 27, .10); }
.tx-hero__fade { inset: auto 0 0 0; height: 180px; background: linear-gradient(#0b0b0d00, #0b0b0d); }

.tx-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    padding: clamp(130px, 16vw, 260px) var(--pad-x) clamp(70px, 8vw, 130px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Logo Threvix biru di atas ground hitam: diberi alas putih bersudut
   membulat supaya wordmark-nya berdiri sendiri, bukan mengambang.
   box-sizing: content-box wajib ditulis di sini, kalau tidak reset global
   (border-box) membuat padding memakan tinggi gambarnya. */
.tx-hero__logo {
    box-sizing: content-box;
    height: clamp(26px, 2.8vw, 34px);
    width: auto;
    display: block;
    padding: clamp(10px, 1.1vw, 14px) clamp(14px, 1.6vw, 20px);
    border-radius: 14px;
    background: #fff;
    margin-bottom: clamp(20px, 2.4vw, 30px);
}

.tx-hero__h1 {
    margin: 0;
    font-size: clamp(58px, 11vw, 158px);
    line-height: .86;
    letter-spacing: -.055em;
    font-weight: 500;
    color: var(--paper);
}
.tx-hero__lead {
    /* Jaraknya lebih longgar dari nilai konsep: di sana paragraf ini
       menyusul subheadline, di sini ia langsung menempel di bawah judul
       setinggi 158px. */
    margin: clamp(24px, 2.8vw, 38px) 0 0;
    max-width: 74ch;
    font-size: clamp(14.5px, 1.45vw, 17px);
    line-height: 1.78;
    color: var(--dim);
}
.tx-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.2vw, 40px); }
.tx-hero__notes { justify-content: center; margin-top: clamp(26px, 3vw, 40px); }

/* ─── Tangkapan layar penutup hero ─────────────────────────────────────
   Bingkai bergaya jendela aplikasi, pola yang sama dengan hero Cytectra
   dan Cybrion, tapi sudutnya membulat mengikuti gaya halaman ini. Tepi
   bawahnya dilepas dan sudut bawahnya dibiarkan siku, jadi gambarnya
   menyatu langsung ke bilah di bawahnya tanpa garis ganda.

   Di DOM letaknya sesudah .tx-hero__fade, dan position relative membuat
   bingkainya menimpa gradasi penutup itu, bukan tertutup olehnya. */
.tx-hero__shot { position: relative; padding-inline: var(--pad-x); }
.tx-shot {
    max-width: 1180px;
    margin-inline: auto;
    overflow: hidden;
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
}
.tx-shot__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-hair);
    background: rgba(242, 239, 234, .03);
}
.tx-shot__dots { display: flex; gap: 6px; flex: none; }
.tx-shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 239, 234, .14); }
.tx-shot__dots i:last-child { background: rgba(245, 160, 27, .5); }
.tx-shot__path {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-shot img { display: block; width: 100%; height: auto; }

/* Ruang bawah teks hero dipangkas begitu ada tangkapan layar, supaya
   gambarnya tidak terdorong jauh ke bawah lipatan layar. */
.tx-hero--shot .tx-hero__inner { padding-bottom: clamp(38px, 4.4vw, 64px); }

/* ─── 2. BILAH ANGKA ───────────────────────────────────────────────── */

.tx-band { border-bottom: 1px solid var(--line); background: var(--panel); }
/* Selebar bilah header. .sc-nav__bar di chrome-v2.css tidak memakai batas
   1280px, hanya padding sisi clamp(20px, 4vw, 64px) yang sama dengan
   --pad-x, jadi batas itu dilepas di sini supaya tepi kiri kanan bilah
   angka sejajar persis dengan logo dan menu di header. */
.tx-band__wrap { display: flex; flex-wrap: wrap; padding-inline: var(--pad-x); }
.tx-band__i {
    flex: 1 1 210px;
    min-width: 170px;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.7vw, 22px);
    padding: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 28px) clamp(24px, 3vw, 40px) 0;
}
.tx-band__i + .tx-band__i { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 28px); }
.tx-band__txt { min-width: 0; }
.tx-band__n { font: 700 clamp(30px, 3.1vw, 40px)/1 var(--mono); letter-spacing: -.045em; color: var(--paper); }
.tx-band__l {
    display: block;
    margin-top: 9px;
    font: 500 10px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ─── Kartu umum ───────────────────────────────────────────────────── */

.tx-card {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    padding: clamp(22px, 2.6vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tx-card:hover {
    background: linear-gradient(168deg, var(--card-a-hi), var(--card-b-hi));
    border-color: var(--amber-lit);
    transform: translateY(-3px);
    box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .95);
}
.tx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-card__h { margin: 0; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.2; letter-spacing: -.022em; font-weight: 500; color: var(--paper); max-width: 20ch; }
.tx-card__p { margin: 0; font-size: 13px; line-height: 1.72; color: var(--soft); }
.tx-card__tag { font: 700 9px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ghost); }
.tx-card__tag--amber { color: var(--amber); }

/* ─── 2b. MASALAH: perbandingan berpasangan + panel operasi ────────── */
/* Satu blok, dua kolom: kiri keadaan lama, kanan jawaban Threvix, dengan
   panah penghubung di tengah tiap baris. Kolom kiri sengaja diredam
   (ikon abu, teks lebih pudar) supaya arah bacanya jelas tanpa dijelaskan. */

.tx-vs {
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    overflow: hidden;
}

.tx-vs__head,
.tx-vs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
}

.tx-vs__head {
    border-bottom: 1px solid var(--line-hair);
    background: rgba(0, 0, 0, .22);
}
/* Sel kosong di tengah kepala: tanpa lebar yang sama dengan kolom panah,
   kolom 1fr di kepala jadi lebih lebar daripada di barisnya dan label
   "Threvix" tidak lagi sejajar dengan tepi kolomnya. */
.tx-vs__head > span:nth-child(2) { width: clamp(44px, 5vw, 64px); }
.tx-vs__col {
    padding: 13px clamp(20px, 2.4vw, 30px);
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
}
.tx-vs__col--old { color: var(--ghost); }
.tx-vs__col--new { color: var(--amber); }

.tx-vs__row + .tx-vs__row { border-top: 1px solid var(--line-hair); }

.tx-vs__cell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
    transition: background .3s ease;
}
/* Sisi lama: diredam, tanpa sorotan amber. */
.tx-vs__cell--old { background: rgba(0, 0, 0, .16); }
/* Sisi Threvix: sapuan amber tipis dari tengah ke tepi kanan. */
.tx-vs__cell--new { background: linear-gradient(90deg, rgba(245, 160, 27, .05), transparent 72%); }
.tx-vs__cell--new:hover { background: linear-gradient(90deg, rgba(245, 160, 27, .09), transparent 72%); }

.tx-vs__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-vs__h {
    margin: 0;
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.2;
    letter-spacing: -.022em;
    font-weight: 500;
    max-width: 22ch;
}
.tx-vs__cell--old .tx-vs__h { color: var(--dim); }
.tx-vs__cell--new .tx-vs__h { color: var(--paper); }
.tx-vs__p { margin: 0; font-size: 13px; line-height: 1.72; }
.tx-vs__cell--old .tx-vs__p { color: var(--faint); }
.tx-vs__cell--new .tx-vs__p { color: var(--soft); }

/* Kotak ikon versi redup untuk sisi lama. */
.tx-tile--mute {
    border-color: var(--line);
    background: rgba(242, 239, 234, .05);
    color: var(--faint);
}

/* Panah penghubung, berdiri di garis pemisah dua kolom. */
.tx-vs__arrow {
    display: grid;
    place-items: center;
    width: clamp(44px, 5vw, 64px);
    border-inline: 1px solid var(--line-hair);
    color: var(--amber);
}

/* Label per sel: cadangan untuk layar sempit, saat kepala kolom disembunyikan. */
.tx-vs__tag {
    display: none;
    font: 700 9px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.tx-vs__cell--old .tx-vs__tag { color: var(--ghost); }
.tx-vs__cell--new .tx-vs__tag { color: var(--amber); }

.tx-panel {
    margin: clamp(20px, 2.4vw, 32px) 0 0;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--panel);
    border: 1px solid rgba(242, 239, 234, .08);
    display: flex;
    flex-direction: column;
}
.tx-panel__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-hair);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.tx-panel__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 239, 234, .18); }
.tx-panel__dot--live { background: var(--amber); }
.tx-panel__name { margin-left: 6px; }
.tx-panel__live { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--amber); }
.tx-panel__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: tx-blip 2s ease-in-out infinite; }
@keyframes tx-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.tx-panel__stats { display: flex; border-bottom: 1px solid var(--line-hair); }
.tx-panel__stat { flex: 1; padding: 14px 16px; min-width: 0; }
.tx-panel__stat + .tx-panel__stat { border-left: 1px solid var(--line-hair); }
.tx-panel__sl { display: block; font: 500 8.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ghost); }
.tx-panel__sv { display: block; margin-top: 6px; font: 700 clamp(17px, 1.9vw, 22px)/1 var(--mono); letter-spacing: -.03em; color: var(--paper); }
.tx-panel__sv--amber { color: var(--amber); }

.tx-panel__feed { padding: 10px 0; flex: 1; }
.tx-feed {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 13px;
    border-left: 3px solid transparent;
    font: 500 10.5px/1.5 var(--mono);
}
.tx-feed--hit { border-left-color: var(--amber); }
.tx-feed__id { color: var(--ghost); }
.tx-feed__m { color: var(--dim); overflow-wrap: anywhere; }
.tx-feed__s {
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--faint);
    white-space: nowrap;
}
.tx-feed__s--amber { border-color: rgba(245, 160, 27, .42); color: var(--amber); }

.tx-panel__chart { display: flex; align-items: flex-end; gap: 4px; height: 74px; padding: 0 16px; }
.tx-panel__chart b { flex: 1; background: rgba(242, 239, 234, .13); border-radius: 2px 2px 0 0; }
.tx-panel__chart b.is-hot { background: var(--amber); }
.tx-panel__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ghost);
}

/* ─── 3. SIKLUS ────────────────────────────────────────────────────── */

.tx-loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.tx-loop__i { position: relative; padding-top: 3px; }
/* Bilah amber pendek di tepi atas tiap kartu. */
.tx-loop__i::before {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(22px, 2.6vw, 32px);
    width: 46px;
    height: 3px;
    background: var(--amber);
    border-radius: 999px;
}
.tx-loop__card { height: 100%; }
.tx-loop__back { margin: clamp(18px, 2vw, 26px) 0 0; }

/* ─── 4. AWAK AGEN ─────────────────────────────────────────────────── */

.tx-orch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(18px, 2.4vw, 40px);
    padding: clamp(22px, 2.8vw, 36px);
    border-radius: 20px;
    border: 1px solid rgba(245, 160, 27, .30);
    background: linear-gradient(120deg, rgba(245, 160, 27, .10), rgba(245, 160, 27, .01) 58%), var(--card-b);
    margin-bottom: clamp(14px, 1.6vw, 20px);
}
.tx-orch__id { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 22px); flex: 1 1 320px; min-width: 260px; }
.tx-orch__k { display: block; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.tx-orch__h { margin: 11px 0 0; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; color: var(--paper); }
.tx-orch__p { margin: 0; flex: 1 1 340px; min-width: 260px; font-size: 13.5px; line-height: 1.76; color: var(--soft); }

.tx-crew { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.tx-crew__card { height: 100%; padding: clamp(18px, 2vw, 24px); gap: 12px; }
.tx-crew__top { display: flex; align-items: center; gap: 11px; }
.tx-crew__h { margin: 0; flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; color: var(--paper); }
.tx-crew__p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--soft); }

/* ─── 5. OPERASI OTONOM ────────────────────────────────────────────── */

.tx-auto { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 56px); align-items: flex-start; }
.tx-auto__aside { flex: 1 1 330px; min-width: 280px; }
.tx-auto__h2 { max-width: 15ch; }
.tx-auto__lead { margin: clamp(16px, 2vw, 22px) 0 0; max-width: 42ch; font-size: 13.5px; line-height: 1.76; color: var(--mute); }

/* Panel siklus: empat tahap dengan bilah kemajuan. */
.tx-cyc { margin-top: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line-soft); border-radius: 18px; background: var(--card-b); overflow: hidden; }
.tx-cyc__bar {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    border-bottom: 1px solid var(--line-hair);
    font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.tx-cyc__on { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--amber); }
.tx-cyc__on i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: tx-blip 2s ease-in-out infinite; }
.tx-cyc__list { padding: 6px 16px 14px; }
.tx-cyc__i { padding: 11px 0 0; }
.tx-cyc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tx-cyc__name { font-size: 13px; color: var(--paper); }
.tx-cyc__st { font: 700 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ghost); }
.tx-cyc__st--now { color: var(--amber); }
.tx-cyc__track { margin-top: 8px; height: 2px; background: rgba(242, 239, 234, .10); border-radius: 999px; overflow: hidden; }
.tx-cyc__fill { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.tx-cyc__foot {
    display: flex; align-items: center; gap: 9px; padding: 12px 16px;
    border-top: 1px solid var(--line-hair);
    font: 500 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ghost);
}
.tx-cyc__foot svg { width: 13px; height: 13px; color: var(--amber); flex: none; }

.tx-auto__rows { flex: 1.3 1 460px; min-width: 300px; display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); }
.tx-arow {
    display: grid;
    grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: clamp(14px, 2vw, 26px);
    padding: clamp(16px, 1.9vw, 22px) clamp(18px, 2.2vw, 26px);
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.tx-arow:hover { background: linear-gradient(168deg, var(--card-a-hi), var(--card-b-hi)); border-color: var(--amber-lit); transform: translateY(-2px); }
.tx-arow__h { margin: 0; font-size: clamp(14.5px, 1.6vw, 17px); line-height: 1.25; letter-spacing: -.022em; font-weight: 500; color: var(--paper); }
.tx-arow__p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--soft); }

/* ─── 6. TATA KELOLA ───────────────────────────────────────────────── */

.tx-gov { border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; background: var(--card-b); }
.tx-gov__head,
.tx-gov__row {
    display: grid;
    grid-template-columns: clamp(88px, 10vw, 132px) minmax(0, 1fr) minmax(0, 1.7fr) auto;
    gap: clamp(12px, 2vw, 26px);
    align-items: center;
    padding: clamp(14px, 1.7vw, 19px) clamp(16px, 2vw, 26px);
}
.tx-gov__head {
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ghost);
    border-bottom: 1px solid var(--line-hair);
}
.tx-gov__row { border-top: 1px solid var(--line-hair); transition: background .3s ease; }
.tx-gov__row:first-of-type { border-top: 0; }
.tx-gov__row:hover { background: rgba(242, 239, 234, .025); }
.tx-gov__t { font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.tx-gov__bar { display: block; height: 2px; margin-top: 8px; background: var(--amber); border-radius: 999px; opacity: .8; }
.tx-gov__h { margin: 0; font-size: 14px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; color: var(--paper); }
.tx-gov__p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--soft); }
.tx-gov__s {
    justify-self: end;
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--faint);
    white-space: nowrap;
}
.tx-gov__s--go   { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.tx-gov__s--log  { border-color: rgba(245, 160, 27, .45); color: var(--amber); }
.tx-gov__notes { margin-top: clamp(18px, 2vw, 26px); }

/* ─── 7. MESIN ANALITIK ────────────────────────────────────────────── */

.tx-ml { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.tx-ml__card { height: 100%; gap: 0; }
.tx-ml__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-ml__pill {
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--faint);
}
.tx-ml__h { margin: clamp(18px, 2vw, 24px) 0 0; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.2; letter-spacing: -.024em; font-weight: 500; color: var(--paper); }
.tx-ml__k { display: block; margin-top: 7px; font: 700 9px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.tx-ml__ul { margin: clamp(16px, 1.8vw, 20px) 0 0; padding: 0; list-style: none; }
.tx-ml__ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--line-hair);
    font-size: 12.5px;
    line-height: 1.66;
    color: var(--soft);
}
.tx-ml__ul li:first-child { border-top: 0; padding-top: 0; }
.tx-ml__ul svg { flex: none; width: 13px; height: 13px; margin-top: 3px; color: var(--amber); }

/* ─── 8. EKOSISTEM ─────────────────────────────────────────────────── */

.tx-eco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.tx-eco__card { height: 100%; padding: clamp(18px, 2vw, 24px); gap: 12px; }
.tx-eco__top { display: flex; align-items: center; gap: 11px; }
.tx-eco__h { margin: 0; font-size: 14px; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; color: var(--paper); }
.tx-eco__p { margin: 0; font-size: 12.5px; line-height: 1.66; color: var(--soft); }

.tx-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: clamp(20px, 2.4vw, 30px); }
.tx-fmt__l { margin-right: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ghost); }
.tx-chip {
    font: 700 9px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--faint);
    transition: border-color .25s ease, color .25s ease;
}
.tx-chip:hover { border-color: rgba(245, 160, 27, .45); color: var(--amber); }

/* ─── 9. PENUTUP AMBER ─────────────────────────────────────────────── */

.tx-close {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: radial-gradient(130% 160% at 50% -34%, #ffc660, #f5a01b 56%);
    color: var(--on-amber);
    padding: clamp(40px, 5.4vw, 96px) var(--pad-x);
    text-align: center;
}
.tx-close__inner { max-width: 900px; margin: 0 auto; position: relative; }
.tx-close__k { font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(20, 16, 5, .62); }
.tx-close__h {
    margin: clamp(16px, 2vw, 24px) 0 0;
    font-size: clamp(30px, 5vw, 62px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 600;
    color: var(--on-amber);
}
.tx-close__p { margin: clamp(14px, 1.8vw, 20px) auto 0; max-width: 56ch; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.72; color: rgba(20, 16, 5, .74); }
.tx-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.tx-close__notes { justify-content: center; margin-top: clamp(24px, 3vw, 34px); }
.tx-close__notes .tx-note { color: rgba(20, 16, 5, .66); }
.tx-close__notes .tx-note svg { color: var(--on-amber); }

/* ═══ RESPONSIF ═══════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
    .tx-loop,
    .tx-crew,
    .tx-eco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tx-ml { grid-template-columns: minmax(0, 1fr); }
    .tx-arow { grid-template-columns: auto minmax(0, 1fr); }
    .tx-arow__p { grid-column: 2 / -1; }
}

@media (max-width: 860px) {
    /* Dua kolom tidak lagi muat berdampingan: pasangannya ditumpuk, panah
       diputar jadi menunjuk ke bawah, dan label per sel menggantikan
       kepala kolom yang disembunyikan. */
    .tx-vs__head { display: none; }
    .tx-vs__row { grid-template-columns: minmax(0, 1fr); }
    .tx-vs__tag { display: block; }
    .tx-vs__arrow {
        width: auto;
        padding: 9px 0;
        border-inline: 0;
        border-block: 1px solid var(--line-hair);
    }
    .tx-vs__arrow svg { transform: rotate(90deg); }
    .tx-vs__cell--new { background: linear-gradient(180deg, rgba(245, 160, 27, .06), transparent 78%); }

    .tx-gov__head { display: none; }
    .tx-gov__row {
        grid-template-columns: clamp(80px, 16vw, 120px) minmax(0, 1fr);
        row-gap: 10px;
        align-items: start;
    }
    .tx-gov__p { grid-column: 2; }
    .tx-gov__s { grid-column: 2; justify-self: start; }
}

@media (max-width: 720px) {
    .tx-loop,
    .tx-crew,
    .tx-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tx-band__i { flex: 1 1 100%; }
    .tx-band__i + .tx-band__i { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
    .tx-panel__stats { flex-wrap: wrap; }
    .tx-panel__stat { flex: 1 1 33%; }
    /* Kotak ikon dan judul berbagi baris pertama, uraiannya turun ke
       bawah selebar kartu. */
    .tx-arow { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
    .tx-arow .tx-tile { grid-column: 1; grid-row: 1; }
    .tx-arow__h { grid-column: 2; grid-row: 1; }
    .tx-arow__p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 520px) {
    .tx-loop,
    .tx-crew,
    .tx-eco { grid-template-columns: minmax(0, 1fr); }
    .tx-hero__ctas .tx-btn,
    .tx-close__ctas .tx-btn { flex: 1 1 100%; }
    .tx-head { align-items: flex-start; }
    .tx-h2 { max-width: none; }
    .tx-feed { grid-template-columns: minmax(0, 1fr) auto; }
    .tx-feed__id { display: none; }
    .tx-gov__row { grid-template-columns: minmax(0, 1fr); }
    .tx-gov__p,
    .tx-gov__s { grid-column: 1; }
}

/* Hormati setelan sistem. */
@media (prefers-reduced-motion: reduce) {
    .tx-panel__live i,
    .tx-cyc__on i { animation: none; }
    .tx-card,
    .tx-arow,
    .tx-btn,
    .tx-gov__row,
    .tx-chip { transition: none; }
    .tx-card:hover,
    .tx-arow:hover,
    .tx-btn:hover { transform: none; }
}