/* Tools, rubrik alat bantu publik. Mandiri; tidak menimpa lp.css / blog.css / video.css.
   Prefix .tt-  •  Token disamakan dengan video.css & blog.css:
   lebar 1320+12, biru #004aad, hero gradien #eef1f8→#e5eaf3, teks #1f2b3a/#475569. */

.tt-wrap{max-width:1320px;margin:0 auto;padding:0 12px}

/* --- Strip breadcrumb: SALINAN dari lp.css (.tlp-breadcrumb-bar), pola yang sama
       dipakai video.css. Disalin, bukan mengimpor lp.css 52 KB demi 6 baris.
       KALAU BAR DI lp.css BERUBAH, SAMAKAN DI SINI.
       Absennya blok ini pada versi pertama membuat breadcrumb halaman tools
       tampil tanpa gaya sama sekali. --- */
.tlp-breadcrumb-bar{background:#1a5fb4;padding:10px 0;font-family:'DM Sans',sans-serif}
.tlp-breadcrumb-inner{max-width:1320px;margin:0 auto;padding:0 12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6)}
.tlp-breadcrumb-inner a{color:rgba(255,255,255,.85);text-decoration:none}
.tlp-breadcrumb-inner a:hover{color:#fff;text-decoration:underline}
.tlp-breadcrumb-inner .tlp-bc-sep{margin:0 8px;color:rgba(255,255,255,.45)}
.tlp-breadcrumb-inner .tlp-bc-cur{color:rgba(255,255,255,.7)}

.tt-narrow{max-width:820px}

/* ---------- hero ---------- */
.tt-hero{background:#eaeef6;padding:44px 0 40px}
.tt-hero__inner{max-width:1320px;margin:0 auto;padding:0 12px}
.tt-hero h1{margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#004aad;letter-spacing:-.01em}
.tt-hero p{margin:10px 0 0;font-size:16px;color:#475569;max-width:660px;line-height:1.6}

/* ---------- hub ---------- */
/* ⚠ padding WAJIB longhand horizontalnya. .tt-wrap memberi padding:0 12px,
   dan shorthand di sini akan menghapusnya sehingga kartu hub rata di tepi 0
   sementara teks hero mulai di 12px. Salah sejak rubrik ini lahir; ketahuan
   2 Sep 2026 saat mengukur tepi kiri, bukan dari melihat tangkapan layar. */
.tt-hub{padding:10px 12px 56px}
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.tt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tt-grid{grid-template-columns:1fr}}
.tt-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f2;border-radius:14px;
  padding:20px;text-decoration:none;color:inherit;transition:.16s}
.tt-card:hover{border-color:#b9cdea;box-shadow:0 6px 22px rgba(0,74,173,.09);transform:translateY(-2px)}
.tt-card__cat{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.06em;font-weight:600;
  color:#004aad;background:#eaf1fb;border-radius:4px;padding:2px 8px;margin-bottom:10px}
.tt-card__title{font-size:17px;font-weight:700;color:#1f2b3a;margin:0 0 7px;line-height:1.35}
.tt-card:hover .tt-card__title{color:#004aad}
.tt-card__desc{font-size:14px;color:#5a6b80;line-height:1.6;margin:0 0 14px}
.tt-card__foot{margin-top:auto;font-size:12px;color:#8494a8;border-top:1px solid #eef2f7;padding-top:11px}
.tt-card--soon{opacity:.62;pointer-events:none}

/* ---------- kartu: kepala, favorit, label harga (5 Sep 2026) ----------

   🔴 KARTU BUKAN LAGI SATU <a>. Sampai 5 Sep 2026 seluruh kartu dibungkus satu
   <a href>. Tombol favorit di dalamnya akan menghasilkan tombol di dalam anchor,
   dan peramban memutus anchor luarnya: separuh kartu berhenti bisa diklik.
   Pola yang dipakai sekarang sama dengan kartu kelas (memory
   feedback_card_second_link_breaks_anchor_and_cookie): pembungkusnya <article>,
   JUDUL yang jadi <a>, lalu ::after judul direntangkan menutupi seluruh kartu
   supaya bidang kliknya tetap seluas kartu.

   ⚠ Yang paling mudah terlewat BUKAN HTML-nya, melainkan beacon. Blok analitik
   hub menangkap klik lewat closest('.tt-card') dan membaca `data-slug` di
   <article>. Kalau suatu saat markup ini diubah lagi, pindahkan `data-slug`
   bersamanya: seri `alat:` di tool_events akan jatuh ke nol tanpa satu pun error,
   dan setiap kueri di 06-pengukuran-tools.md ikut mati. */
.tt-card{position:relative}
.tt-card__title a{color:inherit;text-decoration:none}
.tt-card__title a::after{content:"";position:absolute;inset:0;z-index:0}

.tt-card__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
/* `align-self:flex-start` di .tt-card__cat lahir saat badge itu satu-satunya isi
   baris atas dan kartunya kolom flex. Di dalam baris kepala ia membuat badge
   menggantung ke atas, tidak sebaris dengan tombol hati. */
.tt-card__head .tt-card__cat{margin-bottom:0;align-self:center}

/* z-index 1 hanya untuk tombolnya, bukan seluruh baris kepala: badge kategori
   dan label harga sengaja TETAP di bawah lapisan tautan supaya mengkliknya
   membuka alatnya, bukan tidak melakukan apa-apa. */
.tt-fav{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:30px;height:30px;border-radius:999px;border:1.5px solid #e7eaf5;
  background:#fff;color:#94a3b8;cursor:pointer;font-size:13px;line-height:1;padding:0;
  transition:color .14s ease,border-color .14s ease,background .14s ease}
.tt-fav:hover{border-color:#b9cdea;color:#004aad}
.tt-fav:focus-visible{outline:none;border-color:#004aad;box-shadow:0 0 0 4px rgba(0,74,173,.10)}
/* Keadaan aktif BIRU MEREK, bukan merah. Di rubrik ini dan di /kelas, "terpilih"
   sudah berarti biru (chip kategori, .tkls-viewtoggle__btn.is-active). Merah di
   halaman alat berarti hasil yang gugur dan baris pengurangan, jadi hati merah
   akan jadi satu-satunya merah yang berarti bagus. Keputusan Ega 5 Sep 2026. */
.tt-fav[aria-pressed="true"]{color:#004aad;border-color:#b9cdea;background:#eaf1fb}

.tt-card__harga{margin-left:auto;flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#1b7f5a;background:#e8f6ef;border-radius:4px;padding:3px 8px}
.tt-card__harga:empty{display:none}

/* ---------- toolbar & kelompok kategori: memakai KELAS ASLI /kelas ----------

   🔴 SENGAJA TIDAK ADA `.tt-switch`, `.tt-urut`, ATAU `.tt-kelompok` DI SINI.
   Ketiganya sempat ditulis 5 Sep 2026 sebagai tiruan, lalu dicabut di hari yang
   sama atas arahan Ega: hub memuat `assets/kelas/kelas.css` dan memakai
   `.tkls-viewtoggle`, `.tkls-search`, `.tkls-dd`, dan `.tkls-cat` yang ASLI.

   Kenapa memuat, bukan menyalin nilainya: rubrik ini sudah dua kali menderita
   karena markup yang disalin (hero di 14 berkas, blok beacon). Nilai yang
   disalin tidak pernah memunculkan error saat ia melenceng, ia cuma pelan-pelan
   jadi beda. Dengan memuat berkasnya, perubahan di /kelas ikut sampai ke sini.

   ⚠ SELURUH variabel `--tkls-*` dideklarasikan di kelas `.tkls`, BUKAN `:root`.
   Elemen `.tkls-*` yang tidak punya leluhur ber-`class="tkls"` akan kehilangan
   seluruh warnanya tanpa satu pun error: bordernya hilang, latarnya transparan,
   tulisannya mewarisi warna induk. Kalau menambah kontrol `.tkls-*` baru di
   halaman ini, pastikan ia berada DI DALAM pembungkus `.tkls`.

   Efek samping yang diterima sadar: `.tkls` juga menetapkan `color: #1f2937`
   untuk seluruh keturunannya. Elemen tools yang sudah punya warna sendiri tidak
   terpengaruh; yang mewarisi jadi sedikit lebih gelap, dan itu justru menyamakan
   hub dengan /kelas. */

/* Satu-satunya penyesuaian: tombol hapus pencarian milik tools ditempatkan di
   dalam `.tkls-search`, yang tidak punya tombol itu (di /kelas tempat itu diisi
   spinner). Nilainya sama dengan `.tt-saring__hapus` lama. */
.tkls-search .tt-saring__hapus{position:absolute;right:10px;top:50%;transform:translateY(-50%)}

/* Kisi kartu alat di dalam blok kategori. `.tkls-cat` membawa jarak dan garis
   pemisahnya; yang di bawah ini hanya menyamakan kisinya dengan kisi utama. */
.tkls-cat .tt-grid{margin-top:0}

/* ---------- modal masuk/daftar ---------- */
.tt-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.55)}
.tt-modal[hidden]{display:none!important}
.tt-modal__kotak{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:26px 24px;
  box-shadow:0 24px 60px rgba(15,23,42,.28)}
.tt-modal__judul{margin:0 0 8px;font-size:1.15rem;font-weight:700;color:#1f2937}
.tt-modal__teks{margin:0 0 18px;font-size:.92rem;color:#5a6b80;line-height:1.6}
.tt-modal__aksi{display:flex;gap:10px;flex-wrap:wrap}
.tt-modal__btn{flex:1 1 130px;text-align:center;border-radius:999px;padding:11px 16px;
  font-size:.9rem;font-weight:700;text-decoration:none;border:1.5px solid #004aad;
  transition:background .15s ease,color .15s ease}
.tt-modal__btn--utama{background:#004aad;color:#fff}
.tt-modal__btn--utama:hover{background:#003a87;border-color:#003a87}
.tt-modal__btn--kedua{background:#fff;color:#004aad}
.tt-modal__btn--kedua:hover{background:#eef4fd}
.tt-modal__tutup{margin:16px 0 0;border:0;background:transparent;color:#94a3b8;font-size:.85rem;
  cursor:pointer;font-family:inherit;padding:0;text-decoration:underline}
.tt-modal__tutup:hover{color:#64748b}

/* ---------- panel alat ---------- */
.tt-tool{display:grid;grid-template-columns:1fr 400px;gap:30px;padding:30px 0 10px;align-items:start}
@media(max-width:980px){.tt-tool{grid-template-columns:1fr;gap:22px}}

.tt-form{background:#fff;border:1px solid #e2e8f2;border-radius:14px;padding:24px}
.tt-fs{border:0;padding:0;margin:0 0 22px}
.tt-fs:last-of-type{margin-bottom:0}
.tt-fs__legend{font-size:14.5px;font-weight:700;color:#1f2b3a;padding:0;margin:0 0 4px;display:block}
.tt-fs__hint{font-size:13px;color:#6b7c92;margin:0 0 12px;line-height:1.55}
.tt-step{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:#004aad;color:#fff;font-size:11.5px;font-weight:700;margin-right:8px;flex:none}

.tt-seg{display:flex;gap:8px;flex-wrap:wrap}
.tt-seg input{position:absolute;opacity:0;width:0;height:0}
.tt-seg label{flex:1 1 0;min-width:104px;text-align:center;border:1.5px solid #dbe3ee;border-radius:10px;
  padding:10px 12px;font-size:14px;color:#425468;cursor:pointer;transition:.14s;background:#fff;line-height:1.35}
.tt-seg label:hover{border-color:#9fbde4;background:#f7faff}
.tt-seg input:checked+label{border-color:#004aad;background:#004aad;color:#fff;font-weight:600}
.tt-seg input:focus-visible+label{outline:2px solid #004aad;outline-offset:2px}
.tt-seg--tri label{min-width:84px;font-size:13.5px;padding:9px 10px}
.tt-seg--tri input:checked+label[data-v="belum"]{border-color:#c2410c;background:#c2410c}
.tt-seg--tri input:checked+label[data-v="tidak-yakin"]{border-color:#7c6f52;background:#7c6f52}

.tt-select{width:100%;border:1.5px solid #dbe3ee;border-radius:10px;padding:11px 12px;font-size:14.5px;
  color:#1f2b3a;background:#fff;font-family:inherit}
.tt-select:focus{outline:none;border-color:#004aad}

.tt-year{border:1px solid #e6ecf4;border-radius:11px;padding:14px 15px;margin-bottom:10px;background:#fbfcfe}
.tt-year:last-child{margin-bottom:0}
.tt-year__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tt-year__name{font-size:14.5px;font-weight:700;color:#1f2b3a}
.tt-year__due{font-size:12.5px;color:#7a8a9c}
.tt-none{font-size:13.5px;color:#5a6b80;background:#f1f7ef;border:1px solid #d5e7cf;border-radius:10px;padding:12px 14px;line-height:1.6}

/* ---------- hasil ---------- */
.tt-result{position:sticky;top:18px;border-radius:14px;border:1px solid #e2e8f2;background:#fff;overflow:hidden}
@media(max-width:980px){.tt-result{position:static}}
.tt-result__head{padding:20px 22px;border-bottom:1px solid #eef2f7}
.tt-result__badge{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:4px 11px;margin-bottom:10px}
.tt-result__headline{font-size:18px;font-weight:750;color:#1f2b3a;margin:0 0 7px;line-height:1.35}
.tt-result__summary{font-size:13.5px;color:#5a6b80;line-height:1.62;margin:0}
.tt-result--ready .tt-result__badge{background:#e3f3e6;color:#1d6b32}
.tt-result--ready{border-color:#bfe0c6}
.tt-result--blocked .tt-result__badge{background:#fdeae2;color:#a63c11}
.tt-result--blocked{border-color:#f2c9b6}
.tt-result--unsure .tt-result__badge{background:#f6efdc;color:#7a6524}
.tt-result--unsure{border-color:#e6d8ae}
.tt-result--idle .tt-result__badge{background:#eef2f7;color:#64748b}

.tt-checks{list-style:none;margin:0;padding:16px 22px;display:grid;gap:11px}
.tt-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.tt-check__mark{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;margin-top:1px}
.tt-check--ya .tt-check__mark{background:#2f8a48}
.tt-check--belum .tt-check__mark{background:#c2410c}
.tt-check--tidak-yakin .tt-check__mark{background:#a6935f}
.tt-check__label{color:#1f2b3a;font-weight:600;display:block}
.tt-check__detail{color:#7a8a9c;font-size:12.5px;display:block;margin-top:2px}

.tt-actions{border-top:1px solid #eef2f7;padding:16px 22px 20px;background:#fcfdff}
.tt-actions h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#64748b;font-weight:700;margin:0 0 12px}
.tt-action{margin-bottom:14px}
.tt-action:last-child{margin-bottom:0}
.tt-action__title{font-size:14px;font-weight:700;color:#1f2b3a;margin:0 0 4px}
.tt-action__body{font-size:13px;color:#5a6b80;line-height:1.6;margin:0}

/* ---------- isi statis ---------- */
/* Grid IDENTIK dengan .tt-tool supaya kolom baca punya lebar dan tepi kiri yang
   SAMA PERSIS dengan kolom formulir di atasnya. Sebelumnya blok ini memakai
   .tt-narrow (max-width 820px, margin auto) sehingga tercetak di TENGAH kontainer
   1320px, tidak sejajar dengan apa pun. Memakai grid yang sama, bukan angka
   tetap, berarti kalau lebar panel hasil berubah keduanya tetap selaras. */
.tt-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0 30px;
  /* padding KIRI-KANAN 12px WAJIB dipertahankan: elemennya memakai .tt-wrap DAN
     .tt-body sekaligus, dan aturan ini menang karena ditulis belakangan. Menulis
     `padding:12px 0 60px` diam-diam membuang padding .tt-wrap sehingga blok bawah
     mulai 12px lebih kiri daripada formulir di atasnya. */
  padding:12px 12px 60px}
.tt-body > *{grid-column:1;min-width:0}
@media(max-width:980px){.tt-body{grid-template-columns:1fr}}
.tt-sec{margin-top:40px}
.tt-sec h2{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:750;color:#1f2b3a;margin:0 0 12px;letter-spacing:-.01em}
.tt-sec h3{font-size:16px;font-weight:700;color:#1f2b3a;margin:22px 0 8px}
.tt-sec p{font-size:15.5px;color:#41536a;line-height:1.72;margin:0 0 13px}
.tt-sec ul,.tt-sec ol{font-size:15.5px;color:#41536a;line-height:1.72;padding-left:22px;margin:0 0 13px}
.tt-sec li{margin-bottom:7px}
.tt-sec strong{color:#1f2b3a}

.tt-callout{border-left:3px solid #004aad;background:#f5f8fd;border-radius:0 10px 10px 0;padding:15px 18px;margin:0 0 16px}
.tt-callout p{margin:0;font-size:14.5px;color:#33475b;line-height:1.66}
.tt-callout--warn{border-left-color:#c2410c;background:#fdf6f2}

.tt-steps{counter-reset:tt;list-style:none;padding:0;margin:0}
.tt-steps li{counter-increment:tt;position:relative;padding-left:42px;margin-bottom:15px;font-size:15px;
  color:#41536a;line-height:1.68}
.tt-steps li::before{content:counter(tt);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;
  background:#eaf1fb;color:#004aad;font-weight:700;font-size:13px;display:grid;place-items:center}
.tt-steps code{background:#eef2f7;border-radius:4px;padding:1px 6px;font-size:13.5px;color:#1f2b3a}

/* ---------- FAQ collapsible (details/summary native) ----------
   Sengaja TANPA JS: <details> sudah aksesibel lewat keyboard, bisa di-deep-link,
   dan isinya tetap berada di DOM sehingga tetap terindeks mesin pencari. */
.tt-faq{border:1px solid var(--tt-line,#e2e8f2);border-radius:12px;overflow:hidden;background:#fff;margin-top:14px}
.tt-faq + .tt-faq{margin-top:10px}
.tt-faq > summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
  font-size:16px;font-weight:700;color:#1f2b3a;line-height:1.45;background:#fff;transition:background .14s}
.tt-faq > summary::-webkit-details-marker{display:none}
.tt-faq > summary:hover{background:#f7faff}
.tt-faq > summary:focus-visible{outline:2px solid #004aad;outline-offset:-2px}
.tt-faq > summary::after{content:'';position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid #7a8a9c;border-bottom:2px solid #7a8a9c;
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.tt-faq[open] > summary::after{transform:translateY(-30%) rotate(225deg)}
.tt-faq[open] > summary{background:#f5f8fd;color:#004aad}
.tt-faq__body{padding:4px 18px 18px;border-top:1px solid #eef2f7}
.tt-faq__body > *:first-child{margin-top:13px}
.tt-faq__body > *:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.tt-faq > summary::after{transition:none}}

/* ---------- kelas terkait (menggantikan CTA statis) ---------- */
.tt-rel{margin-top:44px}
.tt-rel__lead{font-size:15.5px;color:#41536a;line-height:1.7;margin:0 0 18px;max-width:68ch}
.tt-rel__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:640px){.tt-rel__grid{grid-template-columns:1fr}}
.tt-rel__more{display:inline-block;margin-top:18px;font-size:14.5px;font-weight:600;color:#004aad;text-decoration:none}
.tt-rel__more:hover{text-decoration:underline}

.tt-source{margin-top:44px;border:1px solid #e2e8f2;border-radius:12px;padding:18px 20px;background:#fbfcfe}
.tt-source h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#64748b;font-weight:700;margin:0 0 12px}
.tt-source dl{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0;font-size:14px}
@media(max-width:560px){.tt-source dl{grid-template-columns:1fr;gap:2px 0}.tt-source dd{margin-bottom:10px}}
.tt-source dt{color:#7a8a9c}
.tt-source dd{margin:0;color:#33475b}
.tt-source a{color:#004aad}

/* Tombol utama. Dipakai jalur no-JS (tombol kirim di formulir).
   Menggantikan .tt-cta__btn lama yang berlatar PUTIH karena dirancang duduk di atas
   pita gradien biru; di dalam kartu formulir yang juga putih, tombol itu praktis
   tak terlihat. Blok .tt-cta dibuang bersama CTA statis yang digantikan kartu kelas. */
/* !important-nya WAJIB dan bukan malas. Tema situs mengosongkan latar setiap
   <button> yang punya atribut "type", dan aturan itu menang atas .tt-btn.
   Dibuktikan A/B di halaman hidup: <button class="tt-btn"> tanpa type dapat
   #004AAD, dengan type dapat transparan -> teks putih di latar putih, rasio
   kontras 1,05. Menaikkan kekhususan saja tidak cukup karena tema dimuat
   BELAKANGAN, jadi seri kekhususan pun tetap dimenangkan tema.
   Cakupannya sengaja sempit: hanya .tt-btn, tidak menyentuh tombol lain. */
.tt-btn{display:inline-block;background:#004aad!important;color:#fff!important;font-weight:700;font-size:14.5px;
  border:0;border-radius:10px;padding:12px 22px;text-decoration:none;cursor:pointer;
  font-family:inherit;transition:.15s}
.tt-btn:hover{background:#00377f!important;color:#fff!important}

/* Tombol acak kecil di tiap kartu tes buta warna. Bergaris tepi dengan teks
   gelap, jadi ia tidak bergantung pada latar dan selamat dari aturan tema. */
.tw-acak{flex:0 0 auto;background:#fff;border:1px solid #d7deea;border-radius:9px;
  color:#5a6b80;cursor:pointer;font-size:13px;line-height:1;padding:0 12px;
  min-height:40px;min-width:40px;font-family:inherit;transition:.15s}
.tw-acak:hover{background:#f2f6fc;color:#004aad;border-color:#b9c6dd}
.tw-acak:focus-visible{outline:2px solid #004aad;outline-offset:2px}
.tt-btn:focus-visible{outline:2px solid #004aad;outline-offset:2px}

.tt-disclaimer{margin-top:26px;font-size:13px;color:#7a8a9c;line-height:1.66;border-top:1px solid #eef2f7;padding-top:16px}
.tt-disclaimer strong{color:#5a6b80}

.tt-noscript{background:#fdf6f2;border:1px solid #f2c9b6;color:#8a3d19;border-radius:10px;padding:12px 15px;
  font-size:13.5px;margin-bottom:18px;line-height:1.6}

/* ---------- rincian hitung gaji ---------- */
.tt-rinci{border-top:1px solid #eef2f7}
.tt-rinci__grup{padding:14px 22px;border-bottom:1px solid #f2f5f9}
.tt-rinci__grup:last-child{border-bottom:0}
.tt-rinci__judul{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#64748b;font-weight:700;margin:0 0 10px}
.tt-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0;line-height:1.45}
.tt-row__k{color:#41536a;min-width:0}
.tt-row__v{color:#1f2b3a;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Baris yang nilainya KALIMAT, bukan angka.

   `.tt-row__v` bawaannya `white-space:nowrap` supaya angka tetap rata dengan
   tabular-nums. Kalimat panjang di situ tidak membungkus, ia MELUBER ke kiri dan
   menindih labelnya sendiri; tidak ada error, cuma dua teks bertumpuk. Terjadi di
   Kalkulator Pesangon 5 Sep 2026: nilai "Mangkir lima hari kerja berturut-turut
   setelah dua panggilan tertulis" menimpa kata "Alasan".

   Modifier ini menumpuk nilai DI BAWAH labelnya dan mengizinkannya membungkus.
   Sengaja kelas baru, bukan melonggarkan `.tt-row__v`: dua puluh alat lain
   mengandalkan nowrap itu untuk menjaga kolom angkanya tetap lurus. */
.tt-row--kalimat{display:block}
.tt-row--kalimat .tt-row__v{display:block;white-space:normal;margin-top:2px;font-variant-numeric:normal}

.tt-row--total{border-top:1px solid #e6ecf4;margin-top:6px;padding-top:9px;font-size:14.5px}
.tt-row--total .tt-row__k{font-weight:700;color:#1f2b3a}
.tt-row--besar{background:#f5f8fd;margin:10px -22px -14px;padding:14px 22px;border-top:1px solid #dbe5f2}
.tt-row--besar .tt-row__k{font-weight:700;font-size:15px;color:#004aad}
.tt-row--besar .tt-row__v{font-weight:800;font-size:17px;color:#004aad}
.tt-sub{display:block;font-size:11.5px;color:#8494a8;margin-top:1px;font-weight:400}
.tt-tag{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.tt-tag--resmi{background:#e3f3e6;color:#1d6b32}
.tt-tag--sekunder{background:#f6efdc;color:#7a6524}
.tt-tag--bruto{background:#eaf1fb;color:#004aad}
.tt-sumber{margin-top:14px;font-size:12.5px;color:#7a8a9c;line-height:1.6;
  background:#fbfcfe;border:1px solid #eef2f7;border-radius:10px;padding:12px 14px}
.tt-sumber strong{color:#5a6b80}
.tt-sumber ul{margin:8px 0 0;padding-left:18px}
.tt-sumber li{margin-bottom:5px}

/* ---------- pola RINGKAS: alat dulu, penjelasan belakangan ----------
   Percobaan desain 2 Sep 2026. Tiga alat sebelumnya menaruh hero setinggi
   524px sebelum alatnya muncul, jadi di ponsel pengunjung membaca satu layar
   penuh sebelum bisa menyentuh apa pun. Di sini hero dipangkas dan panel alat
   naik ke layar pertama. */
.tt-hero--ringkas{padding:22px 0 18px}
.tt-hero--ringkas h1{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.tt-hero--ringkas p{margin-top:6px;font-size:15px;max-width:70ch}
.tt-tool--ringkas{padding-top:18px}

/* Tab mode. Dua hitungan berbeda, satu halaman, tanpa memaksa memilih dulu. */
.tt-tabs{display:flex;gap:8px;margin-bottom:16px}
.tt-tabs input{position:absolute;opacity:0;width:0;height:0}
.tt-tabs label{flex:1;text-align:center;border:1.5px solid #dbe3ee;border-radius:10px;
  padding:11px 14px;font-size:14.5px;font-weight:600;color:#425468;cursor:pointer;
  background:#fff;transition:.14s;line-height:1.3}
.tt-tabs label:hover{border-color:#9fbde4;background:#f7faff}
.tt-tabs input:checked+label{border-color:#004aad;background:#004aad;color:#fff}
.tt-tabs input:focus-visible+label{outline:2px solid #004aad;outline-offset:2px}
.tt-pane[hidden]{display:none!important}

/* Angka utama, dibuat besar supaya jawabannya terbaca sekali lihat. */
.tt-jawab{padding:20px 22px;border-bottom:1px solid #eef2f7}
.tt-jawab__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#64748b;font-weight:700;margin:0 0 6px}
.tt-jawab__nilai{font-size:30px;font-weight:800;color:#004aad;line-height:1.15;
  margin:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tt-jawab__nilai--lebih{color:#1d6b32}
.tt-jawab__ket{font-size:13.5px;color:#5a6b80;margin:7px 0 0;line-height:1.55}

/* ---------- saklar opsional: bagian yang membawa asumsi ----------
   Arahan Ega: balik modal butuh harga penawaran dan asumsi umur sistem, jadi
   pengguna harus MENYALAKANNYA SENDIRI, bukan disodori diam-diam. */
.tt-switch{display:flex;align-items:flex-start;gap:11px;border:1.5px solid #dbe3ee;border-radius:10px;
  padding:13px 15px;cursor:pointer;background:#fff;transition:.14s;margin-top:4px}
.tt-switch:hover{border-color:#9fbde4;background:#f7faff}
.tt-switch input{margin:2px 0 0;width:17px;height:17px;flex:none;accent-color:#004aad;cursor:pointer}
.tt-switch__t{font-size:14px;font-weight:600;color:#1f2b3a;display:block;line-height:1.35}
.tt-switch__d{font-size:12.5px;color:#7a8a9c;display:block;margin-top:3px;line-height:1.5}
.tt-switch:has(input:checked){border-color:#004aad;background:#f5f8fd}
.tt-opsional[hidden]{display:none!important}

/* Baris peringatan: listrik yang terbuang. */
.tt-row--buang .tt-row__k{color:#a63c11;font-weight:700}
.tt-row--buang .tt-row__v{color:#a63c11;font-weight:800}

/* ---------------------------------------------------------------
   Daftar perangkat (alat Ukuran Baterai Cadangan).
   Empat kolom: nama, watt, jumlah, jam. Watt sengaja bisa diubah
   supaya asumsinya terbuka, bukan konstanta tersembunyi.
   --------------------------------------------------------------- */
.tt-alat{border:1px solid #e6ecf4;border-radius:10px;overflow:hidden;background:#fff}
.tt-alat__kepala,.tt-alat__baris{display:grid;grid-template-columns:minmax(0,1fr) 76px 64px 64px;
  gap:8px;align-items:center;padding:7px 12px}
.tt-alat__kepala{background:#f5f8fd;border-bottom:1px solid #e6ecf4;font-size:11.5px;font-weight:700;
  color:#7a8a9c;text-transform:uppercase;letter-spacing:.04em}
.tt-alat__kepala span:not(:first-child){text-align:center}
.tt-alat__baris+.tt-alat__baris{border-top:1px solid #f0f4fa}
.tt-alat__baris:hover{background:#fafcff}
.tt-alat__nama{font-size:13.5px;color:#1f2b3a;line-height:1.4;cursor:pointer;min-width:0}
.tt-alat__tag{display:inline-block;font-size:10.5px;font-weight:700;color:#41536a;background:#eef3fa;
  border-radius:4px;padding:1px 5px;margin-left:5px;white-space:nowrap}
.tt-alat__tag--lonjak{color:#a63c11;background:#fdeee7}
.tt-alat__in{width:100%;border:1.5px solid #dbe3ee;border-radius:7px;padding:6px 4px;font-size:13.5px;
  color:#1f2b3a;background:#fff;text-align:center;font-variant-numeric:tabular-nums}
.tt-alat__in:focus{outline:none;border-color:#004aad;background:#f7faff}

/* Tabel asumsi teknis. */
.tt-tabel{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.tt-tabel th,.tt-tabel td{text-align:left;padding:7px 10px;border-bottom:1px solid #eef2f8}
.tt-tabel th{background:#f5f8fd;font-weight:700;color:#41536a;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tt-tabel td{color:#1f2b3a;font-variant-numeric:tabular-nums}
.tt-tabel tbody tr:last-child td{border-bottom:none}

@media (max-width:560px){
  .tt-alat__kepala,.tt-alat__baris{grid-template-columns:minmax(0,1fr) 58px 50px 50px;gap:5px;padding:6px 9px}
  .tt-alat__nama{font-size:12.5px}
  .tt-alat__in{font-size:12.5px;padding:5px 2px}
  .tt-tabel{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---------------------------------------------------------------
   Hub /tools: hero, toolbar, pencarian, chip kategori.

   NILAI DI BLOK INI DISALIN DARI assets/kelas/kelas.css supaya /tools
   terlihat satu keluarga dengan /kelas. Kalau nilai di sana berubah,
   ubah juga di sini. Padanannya:

     --tkls-blue #004aad · --tkls-muted #64748b · --tkls-line #e7eaf5
     --tkls-bg   #f2f4fb · --tkls-ink   #1f2937

     .tkls-hero          -> .tt-hero--hub
     .tkls-cathero__blurb-> .tt-hero--hub p
     .tkls-toolbar-wrap  -> .tt-toolbar-wrap
     .tkls-toolbar       -> .tt-toolbar
     .tkls-search        -> .tt-saring__cari
     .tkls-search__input -> .tt-saring__in
     .tkls-viewtoggle__btn -> .tls-pill (kini di berkas gaya bersama)
     .tkls-searchnote    -> .tt-hitung
     .tkls-search-clear  -> .tt-kosong__reset

   /tools TIDAK memuat kelas.css: berkas itu membawa banyak aturan direktori
   kelas yang tidak dipakai di sini. Karena itu nilainya disalin, bukan
   di-import, dan padanan di atas ada supaya hubungannya tetap terbaca.
   --------------------------------------------------------------- */

/* Hero versi hub. SENGAJA modifier, bukan mengubah .tt-hero.
   kswp, gaji, dan slf memakai .tt-hero polos, jadi menyentuh kelas dasar
   akan diam-diam menengahkan tiga halaman alat itu juga. */
.tt-hero--hub{padding:40px 0;text-align:center}
.tt-hero--hub h1{font-family:'Raleway',sans-serif;font-weight:800;
  font-size:clamp(2.4rem,7vw,4rem);letter-spacing:-.01em;color:#004aad;line-height:1.1;margin:0}
.tt-hero--hub p{color:#64748b;font-size:1rem;max-width:680px;margin:12px auto 0;line-height:1.55}

/* Pita toolbar putih selebar layar, isinya terpusat. Cermin .tkls-toolbar-wrap. */
.tt-toolbar-wrap{background:#fff;padding:20px 0;border-bottom:1px solid #e7eaf5}
.tt-toolbar-wrap[hidden]{display:none!important}
.tt-toolbar-wrap__inner{max-width:1320px;margin:0 auto;padding:0 12px}
/* Baris 1: switcher tata letak · pencarian · urutan. Sampai 5 Sep 2026 isinya
   cuma pencarian, dan lebar 960px cukup. Dengan dua kontrol tambahan yang
   masing-masing tidak boleh menyusut, 960px memaksa urutan membungkus ke baris
   sendiri di layar 1280px. 1120px memuat ketiganya. */
.tt-toolbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:1120px;margin:0 auto}
/* Deretan pill kini baris tersendiri, bukan menumpang pembungkusan toolbar.
   Kelasnya `.tls-pills__inner` sejak pill disatukan 5 Sep 2026. */
.tt-toolbar-wrap__inner > .tls-pills__inner{margin-top:12px}

/* Kotak pencarian: pil, persis .tkls-search__input. */
.tt-saring__cari{position:relative;flex:1 1 300px;min-width:220px;max-width:520px}
.tt-saring__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tt-saring__in{width:100%;box-sizing:border-box;padding:14px 44px 14px 18px;
  border:1.5px solid #e7eaf5;border-radius:999px;font-size:1rem;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;background:#fff;color:#1f2937}
.tt-saring__in::placeholder{color:#94a3b8}
.tt-saring__in:focus{border-color:#004aad;box-shadow:0 0 0 4px rgba(0,74,173,.10)}
.tt-saring__in::-webkit-search-cancel-button{display:none}
.tt-saring__hapus{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;
  background:none;cursor:pointer;font-size:20px;line-height:1;color:#94a3b8;
  padding:4px 8px;border-radius:999px;transition:color .15s ease,background .15s ease}
.tt-saring__hapus:hover{color:#004aad;background:#f2f4fb}
.tt-saring__hapus[hidden]{display:none!important}

/* Chip kategori -> PINDAH ke assets/shared/listing-toolbar.css (.tls-pill),
   5 Sep 2026, arahan Ega: gaya pill disamakan dengan /video dan /blog.

   Ikut tercabut: `flex-wrap:nowrap` + `overflow-x:auto` + `justify-content:safe
   center` yang dipasang beberapa jam sebelumnya karena kategori KETUJUH tidak
   muat satu baris. Gaya bersamanya MEMBUNGKUS seperti /video dan /blog, jadi
   masalah yang dipecahkan gulir mendatar itu tidak ada lagi. Jangan
   mengembalikannya: isi yang tergulir ke kanan tidak pernah ditemukan sebagian
   pembaca, sedangkan baris kedua selalu terlihat. */

/* Baris hasil, cermin .tkls-searchnote. Di luar pita, sejajar grid. */
.tt-hitung{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 0 4px;margin:0;color:#1f2937;font-size:1rem}

.tt-kosong{margin:26px 0 0;padding:26px 20px;text-align:center;font-size:1rem;color:#64748b;
  background:#f2f4fb;border:1px dashed #dbe2f0;border-radius:14px}
.tt-kosong[hidden]{display:none!important}
.tt-kosong__reset{border:1px solid #e7eaf5;background:#fff;color:#64748b;border-radius:999px;
  padding:5px 12px;margin-left:8px;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,color .15s ease;font-family:inherit}
.tt-kosong__reset:hover{border-color:#004aad;color:#004aad}

/* Kartu tersaring dimatikan lewat atribut hidden, bukan display:none inline,
   supaya pembaca layar ikut melewatinya. .tt-card memakai display:flex
   sehingga hidden bawaan browser kalah dan harus ditegaskan. */
.tt-card[hidden]{display:none!important}

@media(max-width:600px){
  .tt-toolbar-wrap{padding:14px 0}
  .tt-toolbar{gap:8px}
  .tt-saring__cari{flex:1 1 100%;max-width:none}
  .tt-saring__in{padding:12px 40px 12px 16px;font-size:.95rem}
  /* Aturan ponsel untuk pill kategori sekarang ada di berkas gaya bersama. */
  .tt-hitung{font-size:.9rem;padding:14px 0 2px}
}


/* ---------------------------------------------------------------
   Ikon kartu alat. Font Awesome 5.15.4 (versi yang dimuat layout).

   ⚠ Glyph khas FA6 TIDAK melempar error, ia merender kotak kosong.
   Sesudah menambah ikon, buka halaman produksi dan pastikan ::before
   benar-benar berisi. Insiden serupa 15 Jul 2026 dengan fa-file-arrow-down.

   Warna SERAGAM biru merek #004aad untuk semua kategori, tanpa bingkai dan
   tanpa latar. Sempat dibedakan per kategori dengan latar bertingkat; dicabut
   3 Sep 2026 karena ikonnya menjadi tiga aksen warna berbeda dan grid-nya
   tidak lagi terbaca sebagai Taalenta.

   Atribut data-kat SENGAJA dipertahankan di markup: ia metadata yang masih
   benar, dan menjadi satu-satunya kait kalau pewarnaan per kategori suatu
   saat dihidupkan lagi.
   --------------------------------------------------------------- */
/* Ikon duduk di KANAN judul dan paragraf, sejajar puncak judul.
   Rata atas, bukan rata tengah: panjang ringkasan berbeda-beda antar alat,
   dan rata tengah membuat ikonnya naik-turun tidak karuan di dalam grid. */
.tt-card__isi{display:flex;align-items:flex-start;gap:16px}
.tt-card__teks{flex:1 1 auto;min-width:0}

/* TANPA bingkai dan TANPA latar (keputusan Ega 3 Sep 2026).
   Kotak 52px tetap dipertahankan meski tak terlihat: lebar glyph Font Awesome
   berbeda-beda (fa-bolt sempit, fa-solar-panel lebar), dan tanpa kotak tetap
   itu jarak judul ke ikon akan berbeda-beda tiap kartu. */
.tt-card__ikon{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;font-size:44px;line-height:1;
  color:#004aad;transition:transform .14s ease}
.tt-card:hover .tt-card__ikon{transform:translateY(-1px) scale(1.04)}

@media(max-width:600px){
  .tt-card__ikon{width:42px;height:42px;font-size:35px}
  .tt-card__isi{gap:13px}
}

/* ---------------------------------------------------------------
   Ikon di hero halaman alat. Ukuran dan warnanya sekeluarga dengan
   kartu di hub, jadi satu alat tampil konsisten di dua tempat.

   Hanya dipakai halaman ALAT. Hero hub (.tt-hero--hub) rata tengah
   mengikuti /kelas, dan ikon di kanan akan merusak susunan itu.
   --------------------------------------------------------------- */
.tt-hero__inner--ikon{display:flex;align-items:center;justify-content:space-between;gap:28px}
.tt-hero__teks{flex:1 1 auto;min-width:0}

.tt-hero__ikon{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:96px;height:96px;font-size:82px;line-height:1;color:#004aad}

@media(max-width:900px){
  .tt-hero__inner--ikon{gap:20px}
  .tt-hero__ikon{width:72px;height:72px;font-size:62px}
}
/* Di bawah 600px ikon DISEMBUNYIKAN, bukan diperkecil. Layar sempit adalah
   tempat paragraf hero paling butuh lebarnya, dan ikon ini murni hiasan:
   ia ber-aria-hidden, jadi tidak ada informasi yang hilang. */
@media(max-width:600px){
  .tt-hero__ikon{display:none}
  .tt-hero__inner--ikon{display:block}
}

/* ---------------------------------------------------------------
   Alat VISUAL: kontrol sempit di kiri, gambar besar di kanan.

   Kebalikan .tt-tool biasa (1fr 400px) yang mengutamakan formulir.
   Di alat simulasi, gambarnya YANG jadi jawabannya, jadi ia yang
   pantas mendapat ruang. Slider juga tidak butuh lebar.
   --------------------------------------------------------------- */
.tt-tool--visual{grid-template-columns:360px 1fr}
@media(max-width:980px){
  .tt-tool--visual{grid-template-columns:1fr}
  /* Di layar sempit kolom kanan jatuh KE BAWAH seluruh formulir, sehingga
     menggeser slider ketiga berarti gambarnya sudah jauh di luar layar.
     Padahal seluruh gunanya adalah menggeser sambil MELIHAT.
     
     ⚠ STICKY SAJA TIDAK CUKUP, dan ini yang sempat luput. Elemen sticky tidak
     bisa ditarik naik SEBELUM posisi alaminya; selama kita masih menggulir di
     wilayah formulir, kanvas yang berada di bawahnya belum tersentuh sama
     sekali. Jadi urutannya harus DIBALIK dulu lewat order, baru sticky punya
     arti. Diuji: tanpa order, kanvas tetap di top 1012 sesudah menggulir 600. */
  .tt-tool--visual > div:last-child{order:-1;position:sticky;top:0;z-index:3;
    background:#fff;padding:6px 0 4px}
  .tt-tool--visual > div:last-child .tt-result{position:static}
  /* Panel EV ikut kolom kanan, tapi tidak perlu ikut dipin: yang harus
     terlihat saat menggeser adalah GAMBARNYA. */
  .tt-tool--visual > div:last-child .tt-result{order:0}
}

/* Slider. Dipakai menggantikan dropdown di alat yang nilainya berderet
   dan sering digeser bolak-balik: memutar dropdown untuk naik satu stop
   memutus alur, sedangkan slider bisa digeser sambil melihat hasilnya. */
.tt-geser{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.tt-geser__nilai{font-size:17px;font-weight:800;color:#004aad;font-variant-numeric:tabular-nums}
.tt-geser__stop{font-size:11.5px;color:#7a8a9c;font-variant-numeric:tabular-nums}
/* Jalur terlihat tipis 6px, tapi area sentuhnya 28px lewat padding +
   background-clip. Range input hanya bisa disentuh setinggi elemennya, dan
   6px mustahil digenggam jempol. */
.tt-range{width:100%;-webkit-appearance:none;appearance:none;height:28px;
  padding:11px 0;background:#e7eaf5;background-clip:content-box;border-radius:999px;
  outline:none;margin:2px 0 0;cursor:pointer}
.tt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:#004aad;cursor:pointer;border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,74,173,.4)}
.tt-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#004aad;
  cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,74,173,.4)}
.tt-range:focus-visible{box-shadow:0 0 0 4px rgba(0,74,173,.12)}
.tt-ujung{display:flex;justify-content:space-between;font-size:11px;color:#9aa8ba;margin-top:1px}

/* Panel simulasi buta warna: 2x2, bukan 1x4. Empat kolom membuat tiap
   kanvas tinggal 265px dari sumber 440px, dan warnanya justru yang
   harus terlihat. */
.tt-cvd{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.tt-cvd{grid-template-columns:1fr}}
.tt-cvd__panel{background:#fff;border:1px solid #e2e8f2;border-radius:14px;padding:14px;margin:0}
.tt-cvd__judul{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:15.5px;font-weight:700;color:#1f2b3a;margin:0 0 10px}
.tt-cvd__kanvas{width:100%;height:auto;display:block;border-radius:9px;background:#fff}
.tt-cvd__ket{margin:10px 0 0;font-size:12.5px;color:#5a6b80;line-height:1.5}

/* Baris kontrol berlabel. Versi pertama menumpuk dua jenis kontrol yang
   berbeda sebagai chip identik tanpa label, dan hasilnya membingungkan. */
.tt-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tt-baris__label{flex:none;font-size:12px;font-weight:700;color:#7a8a9c;
  text-transform:uppercase;letter-spacing:.05em;min-width:74px}
.tt-unggah{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed #9fbde4;
  background:#f5f8fd;border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:600;
  color:#004aad;cursor:pointer;transition:.14s}
.tt-unggah:hover{border-color:#004aad;background:#eaf1fb}

@media(max-width:600px){
  .tt-baris{gap:8px}
  .tt-baris__label{min-width:100%;margin-bottom:-4px}
}

/* ============================================================
   Pemeriksa Kontras Warna (/tools/pemeriksa-kontras-warna)
   Awalan .tk- supaya jelas terpisah dari .tt- yang dipakai bersama
   seluruh rubrik. Yang generik (.tt-sr) sengaja diberi awalan .tt-.
   ============================================================ */

/* Hanya untuk pembaca layar. Dipakai tombol tukar, yang isinya cuma ikon. */
.tt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.tk-pasangan{display:grid;gap:10px;justify-items:stretch}

.tk-warna__label{display:block;font-size:12.5px;font-weight:700;color:#41506a;
  letter-spacing:.02em;margin-bottom:6px}
.tk-warna__in{display:flex;gap:8px;align-items:stretch}

/* Kotak warna asli peramban. Bungkusnya dinormalkan supaya yang terlihat hanya
   petak warnanya, tanpa bingkai bawaan yang berbeda-beda tiap sistem. */
.tk-warna__pick{flex:none;width:52px;height:44px;padding:0;border:1px solid #d7deea;
  border-radius:10px;background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none}
.tk-warna__pick::-webkit-color-swatch-wrapper{padding:3px}
.tk-warna__pick::-webkit-color-swatch{border:none;border-radius:7px}
.tk-warna__pick::-moz-color-swatch{border:none;border-radius:7px}

.tk-warna__hex{flex:1;min-width:0;height:44px;border:1px solid #d7deea;border-radius:10px;
  padding:0 12px;font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;color:#1f2b3a;background:#fff;text-transform:uppercase}
.tk-warna__hex:focus{outline:none;border-color:#004AAD;box-shadow:0 0 0 3px rgba(0,74,173,.13)}

/* Tombol tukar duduk di antara dua baris warna, bukan di ujung, supaya arah
   pertukarannya terbaca sebagai "yang atas dengan yang bawah". */
.tk-tukar{justify-self:center;width:38px;height:38px;border-radius:50%;border:1px solid #d7deea;
  background:#fff;color:#41506a;cursor:pointer;display:grid;place-items:center;font-size:14px;
  transition:background .15s,color .15s,transform .15s}
.tk-tukar:hover{background:#004AAD;border-color:#004AAD;color:#fff;transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.tk-tukar{transition:none}.tk-tukar:hover{transform:none}}

.tk-ambang__n{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;color:#5a6b80;
  background:#eef2f7;border-radius:999px;padding:1px 8px;letter-spacing:.02em}

/* ---- Pratinjau ----
   Bingkai luarnya netral dan TIDAK ikut mengambil warna pengguna: kalau
   bingkainya ikut berubah, panel dengan latar terang jadi tak berbatas dan
   tampak melayang. */
.tk-pratinjau{border:1px solid #e2e8f2;border-radius:14px;padding:22px;overflow:hidden}
.tk-pratinjau > p{margin:0 0 12px}
.tk-pratinjau__besar{font-size:24px;font-weight:600;line-height:1.3}
.tk-pratinjau__tebal{font-size:18.66px;font-weight:700;line-height:1.35}
.tk-pratinjau__biasa{font-size:16px;line-height:1.62}
.tk-pratinjau__kecil{font-size:13px;line-height:1.55}
.tk-pratinjau__ui{display:flex;align-items:center;gap:14px;margin-top:16px}
/* Contoh objek NON-TEKS, yang ambangnya 3 dan bukan 4,5. Bingkai tombol dan
   garis pembatas mengambil warna teks lewat JS. */
.tk-pratinjau__tombol{flex:none;display:inline-block;border:2px solid currentColor;border-radius:9px;
  padding:8px 18px;font-size:14px;font-weight:650}
.tk-pratinjau__garis{flex:1;height:3px;border-radius:2px;background:currentColor;opacity:.85}

/* ---- Saran warna ---- */
.tk-saran{border:1px solid #e2e8f2;border-radius:12px;padding:14px;margin-bottom:12px;background:#fbfcfe}
.tk-saran__judul{margin:0 0 10px;font-size:12.5px;font-weight:700;color:#41506a;letter-spacing:.02em}
.tk-saran__baris{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:1px solid #e2e8f2;border-radius:10px;background:#fff;padding:9px 11px;margin-bottom:8px;
  cursor:pointer;font:inherit;color:#1f2b3a;transition:border-color .15s,box-shadow .15s}
.tk-saran__baris:last-child{margin-bottom:0}
.tk-saran__baris:hover{border-color:#004AAD;box-shadow:0 0 0 3px rgba(0,74,173,.09)}
.tk-saran__baris--kosong{cursor:default;color:#7a8a9c;display:block;background:#f6f8fb}
.tk-saran__baris--kosong:hover{border-color:#e2e8f2;box-shadow:none}
.tk-saran__chip{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid rgba(15,23,42,.18)}
.tk-saran__teks{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.tk-saran__teks .tt-sub{display:block;font-size:12px;margin-top:1px}
.tk-saran__pakai{flex:none;font-size:12px;font-weight:700;color:#004AAD;letter-spacing:.03em;
  text-transform:uppercase}

/* Baris CVD yang jatuh di bawah ambang. Warna SAJA tidak cukup di halaman yang
   isinya justru soal itu, jadi barisnya juga ditebalkan. */
.tk-jatuh{background:#fdf3ee}
.tk-jatuh th,.tk-jatuh .js-cvd-rasio{font-weight:750;color:#a63c11}

@media(max-width:600px){
  .tk-pratinjau{padding:16px}
  .tk-pratinjau__besar{font-size:21px}
  .tk-pratinjau__tebal{font-size:17px}
  .tk-pratinjau__ui{margin-top:12px}
}

/* --- perbaikan sesudah verifikasi DOM produksi, 3 Sep 2026 --- */

/* .tt-hitung ternyata display:flex dengan gap, jadi <strong> dan <a> di dalamnya
   jadi item flex dan kalimatnya pecah bertumpuk. Untuk keterangan yang MENGANDUNG
   markup inline, pakai ini. */
.tk-nota{font-size:12.5px;line-height:1.6;color:#7a8a9c;margin:6px 0 0}
.tk-nota strong{color:#41506a}
.tk-nota a{color:#004AAD}

/* .tt-tool memakai align-items:start, jadi kolom kanan hanya setinggi isinya dan
   position:sticky di dalamnya tidak punya ruang untuk menempel. Terukur: kartu
   hasil berada di top -633 sesudah menggulir, sepenuhnya di luar layar, sementara
   kolom kiri masih 1.698px. Yang dilekatkan harus KOLOMNYA, bukan kartunya. */
@media(min-width:981px){
  .tk-lengket{position:sticky;top:18px;align-self:start}
  .tk-lengket .tt-result{position:static}
}

/* ============================================================
   Tombol Bagikan & Simpan di hero (tools/partials/hero.blade.php)
   ============================================================ */
.tt-hero__aksi{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}

.tt-aksi{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid #ccd7ea;background:#fff;color:#33445e;border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:650;line-height:1;font-family:inherit;
  transition:border-color .15s,color .15s,background .15s}
.tt-aksi i{font-size:13px;line-height:1}
.tt-aksi:hover{border-color:#004AAD;color:#004AAD}
.tt-aksi:focus-visible{outline:none;border-color:#004AAD;box-shadow:0 0 0 3px rgba(0,74,173,.15)}

/* Tersimpan. Warna SAJA tidak cukup sebagai penanda status, jadi labelnya juga
   berubah dari "Simpan" jadi "Tersimpan" dan aria-pressed ikut disetel. */
.tt-aksi--aktif,.tt-aksi--aktif:hover{background:#004AAD;border-color:#004AAD;color:#fff}

.tt-aksi--ok,.tt-aksi--ok:hover{border-color:#2f8a48;color:#2f8a48}

/* .tt-chip--simpan dicabut 5 Sep 2026: tombol Simpan di hero sudah dihapus
   3 Sep (commit 48c2cf10) dan aturan dasarnya .tt-chip ikut pindah ke berkas
   gaya bersama, jadi baris ini menggantung tanpa induk maupun pemakai. */

@media(prefers-reduced-motion:reduce){.tt-aksi{transition:none}}
@media(max-width:600px){.tt-aksi{padding:8px 13px;font-size:12.5px}}

/* Pesan gagal WAJIB punya gaya sendiri. Versi pertama memakai tt-aksi--ok untuk
   semua pesan, sehingga "Gagal menyalin" tampil hijau seperti keberhasilan. */
.tt-aksi--gagal,.tt-aksi--gagal:hover{border-color:#c2410c;color:#c2410c}

/* ⚠ !important DIPERLUKAN DI SINI, dan ini bukan kemalasan.
   Ada aturan ber-!important di salah satu stylesheet tema yang memaksa latar
   <button> jadi transparan. Buktinya: dengan SELURUH stylesheet dimatikan,
   latarnya kembali putih, dan gaya INLINE pun kalah, yang hanya mungkin terjadi
   kalau lawannya ber-!important.
   Akibatnya nyata dan terlihat: `.tt-aksi--aktif` menyetel teks PUTIH sambil
   latarnya tetap transparan, sehingga label "Tersimpan" jadi putih di atas hero
   yang terang. Border, warna teks, dan radius dari .tt-aksi semuanya menempel,
   jadi tidak ada satu pun gerbang yang menunjukkan ada yang salah.
   Cakupannya sengaja sempit: hanya kelas kami sendiri, tidak menyentuh tombol
   lain di situs. */
.tt-aksi{background-color:#fff !important}
.tt-aksi--aktif,.tt-aksi--aktif:hover{background-color:#004AAD !important}

/* Border tombol hero diperkuat.
   Hero bukan warna padat melainkan gradasi #EEF1F8 -> #E5EAF3, jadi latar
   sebenarnya di balik tombol BUKAN putih, dan `backgroundColor` memang
   melaporkan transparan untuk elemen ber-gradasi. Diukur terhadap ujung
   gelapnya, border lama #CCD7EA hanya sekitar 1,2 dan tombolnya nyaris tak
   berbatas.
   Ambangnya 3,0 (WCAG 1.4.11, komponen antarmuka). Boleh diperdebatkan bahwa
   tombol ini sudah teridentifikasi oleh LABELNYA sehingga borderrnya tidak
   wajib 3,0, tapi halaman yang isinya mengajarkan kontras sebaiknya tidak
   berdiri di atas pengecualian. */
.tt-aksi{border-color:#7A879F !important}
.tt-aksi:hover{border-color:#004AAD !important}
.tt-aksi--aktif,.tt-aksi--aktif:hover{border-color:#004AAD !important}
.tt-aksi--ok,.tt-aksi--ok:hover{border-color:#2f8a48 !important}
.tt-aksi--gagal,.tt-aksi--gagal:hover{border-color:#c2410c !important}

/* ============================================================
   Bagikan (dropdown) + area bawah. Ditulis ulang jadi SATU blok
   3 Sep 2026, menggantikan lima lapisan revisi yang saling menimpa
   sampai tidak terbaca lagi mana yang menang.

   Riwayat singkat, supaya tidak diulang: pernah dicoba berjajar
   melebar dengan pil putih, lalu tanpa isian sama sekali. Keduanya
   terbaca terlalu ramai dan bersaing dengan judul. Dropdown menang.
   ============================================================ */
.tt-hero__aksi{margin-top:18px}
.tt-bagi{position:relative;display:inline-block}

/* Segitiga bawaan <summary> dimatikan di kedua mesin render. Tanpa
   list-style:none, Firefox tetap menggambar penandanya. */
.tt-bagi > summary{list-style:none;cursor:pointer}
.tt-bagi > summary::-webkit-details-marker{display:none}
.tt-bagi > summary::marker{content:''}
.tt-bagi__panah{font-size:10px;opacity:.6;transition:transform .15s}
.tt-bagi[open] > summary{border-color:#004AAD !important;color:#004AAD}
.tt-bagi[open] .tt-bagi__panah{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.tt-bagi__panah{transition:none}}

.tt-bagi__menu{position:absolute;z-index:20;top:calc(100% + 8px);left:0;
  min-width:228px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid #d9e0ec;border-radius:12px;padding:6px;
  box-shadow:0 12px 28px rgba(15,23,42,.14)}

.tt-bagi__item{display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border:0;border-radius:8px;background-color:transparent !important;
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.2;
  color:#1f2b3a;text-align:left;text-decoration:none;cursor:pointer}
.tt-bagi__item:hover,.tt-bagi__item:focus-visible{background-color:#eef2f9 !important;color:#004AAD;outline:none}

/* Lebar ikon dikunci supaya seluruh label mulai di titik yang sama, apa pun
   lebar glyph atau SVG-nya. */
.tt-bagi__ikon{flex:none;width:20px;display:inline-flex;align-items:center;
  justify-content:center;font-size:15px;color:#5a6b80}
.tt-bagi__item:hover .tt-bagi__ikon,.tt-bagi__item:focus-visible .tt-bagi__ikon{color:#004AAD}
.tt-bagi__ikon svg{display:block}

.tt-bagi__item--ok,.tt-bagi__item--ok .tt-bagi__ikon{color:#2f8a48}
.tt-bagi__item--gagal,.tt-bagi__item--gagal .tt-bagi__ikon{color:#c2410c}

@media(max-width:420px){.tt-bagi__menu{min-width:0;width:calc(100vw - 32px)}}

/* ---- Area bawah ----
   Proporsi dikembalikan ke minmax(0,1fr) + 400px (keputusan Ega): 50:50 membuat
   kolom teks terlalu sempit untuk paragraf FAQ dan tabel sumber.
   Kolom kanan 400px sebenarnya SUDAH ADA sejak awal tapi selalu kosong, karena
   `.tt-body > *` memaksa semuanya ke kolom 1. */
.tt-body{border-top:1px solid #e3e8f1;margin-top:30px;
  /* padding kiri-kanan 12px tetap dipertahankan, lihat catatan di aturan asli */
  padding:38px 12px 60px}

/* span baris besar supaya blok kanan TIDAK ikut menentukan tinggi baris kolom
   kiri; tanpa itu satu baris grid melar mengikuti isinya dan FAQ di sebelahnya
   ikut terdorong. */
.tt-body > .tt-rel,.tt-body > .tt-samping{grid-column:2;align-self:start}
.tt-body > .tt-rel{grid-row:1 / span 200;margin-top:0}
@media(min-width:981px){
  .tt-body > .tt-rel{position:sticky;top:18px}
  .tt-body > .tt-rel .tt-rel__grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .tt-body > .tt-rel{grid-column:1;grid-row:auto;margin-top:40px}
}

/* Judul FAQ disamakan dengan "Kelas terkait", yang mewarisi h2 global 31,6px
   bobot 500. Berdampingan, bedanya terbaca sebagai salah satunya lebih penting. */
.tt-body__judul,.tt-body > .tt-rel > h2{font-size:20px;font-weight:750;
  color:#1f2b3a;letter-spacing:-.01em;margin:0 0 14px}

/* ---- Expert terkait + CTA layanan, di kolom kanan halaman alat ---- */
.tt-rel__judul2{font-size:20px;font-weight:750;color:#1f2b3a;letter-spacing:-.01em;
  margin:30px 0 12px}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR DISAMAKAN DENGAN BLOG (arahan Ega 5 Sep 2026)

   Sebelumnya tiap baris di sidebar alat adalah KOTAK BERBINGKAI sendiri,
   sementara sidebar blog memakai satu kartu putih berisi baris-baris yang
   dipisah garis tipis. Dua rubrik yang bersebelahan di situs yang sama
   terbaca seperti dua produk berbeda.

   Nilai-nilainya disalin dari blog.css (.tblog-widget dan kerabatnya) supaya
   benar-benar sepadan: kartu #e6e9f0 radius 12, judul 15px/800 #004aad dengan
   garis bawah 2px #eef1f8, pemisah baris #eef1f6.

   ⚠ Kelasnya SENGAJA tetap .tt-*, bukan memuat blog.css di halaman alat:
   blog.css membawa aturan tata letak artikel yang akan bocor ke sini.
   ───────────────────────────────────────────────────────────────────────── */
.tt-widget{background:#fff;border:1px solid #e6e9f0;border-radius:12px;padding:16px 18px;
  margin-bottom:18px}
/* Kelas terkait: kartunya sudah berbingkai sendiri, jadi kartu luarnya dilepas
   (persis .tblog-widget--kelas). */
.tt-widget--polos{background:none;border:0;padding:0}
.tt-widget__judul{margin:0 0 12px;font-size:15px;font-weight:800;color:#004aad;
  border-bottom:2px solid #eef1f8;padding-bottom:8px;letter-spacing:0}

.tt-expert{display:grid;gap:0}
.tt-expert__item{display:flex;align-items:center;gap:10px;padding:0 0 12px;
  border:0;border-bottom:1px solid #eef1f6;margin-bottom:12px;background:none;
  border-radius:0;text-decoration:none}
.tt-expert__item:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.tt-expert__item:hover .tt-expert__nama{color:#004aad}
/* Foto expert dipangkas kotak: sumbernya 800x800 berlatar #004AAD, jadi tanpa
   object-fit ia melar mengikuti kotak dan wajahnya ikut memanjang. */
.tt-expert__foto{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;
  background:#004AAD;border:2px solid #eef2fd}
.tt-expert__teks{min-width:0;display:block}
.tt-expert__nama{display:block;font-size:13.5px;font-weight:700;color:#1e293b;line-height:1.3}
/* Dipotong DUA BARIS, bukan 46 aksara seperti sidebar blog: kolom di sini 400px,
   jauh lebih lebar, jadi memangkas sekeras blog cuma membuang ruang. */
.tt-expert__label{font-size:11.5px;color:#64748b;line-height:1.35;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tt-cta{margin-top:30px;border:1px solid #d7e2f4;border-radius:14px;padding:18px;
  background:#f2f6fc}
.tt-cta__judul{margin:0 0 6px;font-size:15.5px;font-weight:750;color:#1f2b3a;line-height:1.35}
.tt-cta__teks{margin:0 0 14px;font-size:13.5px;color:#41536a;line-height:1.6}
.tt-cta__btn{display:inline-flex;align-items:center;gap:8px;background:#004AAD;color:#fff;
  border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:700;text-decoration:none}
.tt-cta__btn:hover{background:#003a88;color:#fff}

/* ⚠ Spesifisitas, bukan urutan. `.tt-rel__judul2{margin:30px 0 12px}` KALAH oleh
   `.tt-body > .tt-rel > h2{margin:0 0 14px}` (0,2,1 lawan 0,1,0) yang ditulis
   untuk menyamakan ukuran judul. Akibatnya jarak antara kartu kelas terakhir dan
   judul "Expert terkait" terukur 0 dan keduanya menempel.
   Diperbaiki dengan menyamakan bentuk selektornya, bukan dengan !important. */
.tt-body > .tt-rel > .tt-rel__judul2{margin-top:34px}
.tt-body > .tt-rel > .tt-cta{margin-top:34px}

/* ============================================================
   STANDAR TATA LETAK RUBRIK ALAT (aturan Ega, 3 Sep 2026)

   Empat aturan, berlaku untuk keempat belas alat:
     1. Isian SELALU di kolom kiri, hasil SELALU di kolom kanan.
     2. Proporsi kolom hanya boleh dari TIGA varian di bawah.
        Jangan menulis grid-template-columns baru per halaman.
     3. Isian berlatar PUTIH, hasil berlatar KEBIRUAN. Itu yang membuat
        bahasanya sama antar alat walau isinya beda-beda.
     4. Tidak ada panel yang mengikuti gulir.
   ============================================================ */

/* --- Aturan 2: tiga proporsi, tidak lebih --- */
.tt-tool           {grid-template-columns:minmax(0,1fr) 400px}          /* isian lebar (bawaan) */
.tt-tool--visual   {grid-template-columns:360px minmax(0,1fr)}          /* hasil lebar  */
.tt-tool--imbang   {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}  /* seimbang     */
@media(max-width:980px){
  .tt-tool,.tt-tool--visual,.tt-tool--imbang{grid-template-columns:1fr}
}

/* --- Aturan 4: tidak ada yang mengikuti gulir ---
   Sebelumnya .tt-result dan blok kanan area bawah dua-duanya sticky. Menempel
   memang enak saat mengisi formulir panjang, tapi membuat halaman terasa
   bergerak sendiri dan blok promosi ikut membuntuti pembaca. */
.tt-result{position:static}
.tt-body > .tt-rel{position:static}
@media(max-width:980px){
  .tt-tool--visual > div:last-child{position:static;background:transparent;padding:0}
}

/* --- Aturan 3: hasil kebiruan ---
   Hanya latarnya. Warna bingkai SENGAJA tidak disentuh supaya penanda verdict
   (.tt-result--ready / --blocked / --unsure) tetap yang menentukan. */
.tt-result{background:#f3f7fd}
.tt-result__head{border-bottom-color:#dfe8f6}

/* Blok perkiraan jenis di panel hasil. Dibedakan tipis dari panel supaya
   terbaca sebagai keterangan tambahan, bukan vonis kedua. Tanpa gradasi. */
.tw-jenis{margin:16px 18px 0;padding:14px 16px;background:#eaf0fa;
  border:1px solid #d7e2f4;border-radius:12px}
.tw-jenis__judul{margin:0 0 6px;font-size:14px;font-weight:750;color:#1f2b3a;line-height:1.4}
.tw-jenis__teks{margin:0;font-size:13px;color:#41536a;line-height:1.65}

/* ---------- tools terkait di sidebar ---------- */
.tt-terkait{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tt-terkait li{border-bottom:1px solid #eef1f6;padding-bottom:12px;margin-bottom:12px}
.tt-terkait li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.tt-terkait__item{display:flex;gap:10px;align-items:flex-start;text-decoration:none}
.tt-terkait__item:hover .tt-terkait__nama{color:#004aad}
.tt-terkait__ikon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#eef3fc;
  color:#004aad;display:flex;align-items:center;justify-content:center;font-size:14px}
.tt-terkait__nama{display:block;font-size:13.5px;font-weight:700;color:#1e293b;line-height:1.3}
.tt-terkait__ket{display:block;margin-top:1px;font-size:11.5px;color:#64748b;line-height:1.35}

/* ---------- pemilih mode tes buta warna (DICABUT 3 Sep 2026) ----------
   Digantikan blok "Tools terkait" di sidebar atas permintaan Ega. Aturannya
   ditinggalkan karena partial-nya masih ada di repo; jangan dipakai lagi. */
/* ---------- pemilih mode tes buta warna ---------- */
.sw-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.sw-mode__item{display:block;padding:13px 15px;border:1px solid #dbe3f0;border-radius:12px;
  background:#fff;text-decoration:none;transition:.15s}
.sw-mode__item:hover{border-color:#b9c6dd;background:#f7fafe;text-decoration:none}
.sw-mode__item--aktif{border-color:#004aad;background:#eef3fb;box-shadow:inset 0 0 0 1px #004aad}
.sw-mode__judul{display:block;font-size:14.5px;font-weight:750;color:#1f2b3a;line-height:1.35}
.sw-mode__ket{display:block;margin-top:3px;font-size:12.5px;color:#5a6b80;line-height:1.5}
@media(max-width:720px){.sw-mode{grid-template-columns:1fr}}

/* ---------- tes penyusunan warna ---------- */
.sw-label{margin:0 0 8px;font-size:13px;font-weight:700;color:#41536a;letter-spacing:.01em}
.sw-barisan,.sw-nampan{display:flex;flex-wrap:wrap;gap:7px;min-height:52px;padding:10px;
  border:1px solid #e2e8f2;border-radius:12px;background:#fbfcfe}
/* Keping WAJIB cukup besar. Selisih warnanya memang halus, dan pada keping kecil
   mata tidak punya cukup bidang untuk membandingkan - itu justru cara tes ini
   menghindari kelemahan pola titik yang membuat kartu biru kuning gagal. */
.sw-keping{width:52px;height:52px;border-radius:10px;border:2px solid rgba(31,43,58,.10);
  cursor:pointer;padding:0;transition:.12s}
.sw-keping--pilih:hover{transform:translateY(-2px);border-color:rgba(31,43,58,.35)}
.sw-keping--pilih:focus-visible{outline:3px solid #004aad;outline-offset:2px}
.sw-keping--terpasang,.sw-keping--patokan{cursor:default}
.sw-keping--patokan{border-color:#1f2b3a;box-shadow:0 0 0 2px #fff inset}
.sw-aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
@media(max-width:520px){.sw-keping{width:44px;height:44px}}

/* Kolom hasil alat visual: panelnya kebiruan seperti yang lain... */
.tt-hasil,
.tt-tool--visual > div:last-child{background:#f3f7fd;
  border:1px solid #dfe8f6;border-radius:14px;padding:16px}
/* ...TAPI permukaan tempat warna dinilai tetap netral. Ini pengecualian yang
   disengaja: di alat warna, bidang biru tepat di sebelah contoh yang sedang
   dinilai adalah persis kesalahan yang alat itu dibuat untuk mencegah. */
.tt-hasil .tt-cvd__panel,
.tt-tool--visual .tt-cvd__panel{background:#fff;border:1px solid #e6ecf6;border-radius:12px;padding:12px}
.tt-tool--visual .tk-pratinjau{background:#fff}
.tt-tool--visual canvas{background:#fff;border-radius:8px}
/* Panel hasil di alat visual tidak perlu latar ganda. */
.tt-tool--visual > div:last-child .tt-result{background:#fff;border-color:#e6ecf6}

/* Kanvas buta warna kini berbagi lebar dengan kolom kontrol, jadi 2x2 tetap
   dipertahankan tapi kanvasnya diizinkan mengecil mengikuti kolom. */
.tt-hasil .tt-cvd__kanvas{width:100%;height:auto}
@media(max-width:760px){.tt-hasil .tt-cvd{grid-template-columns:1fr}}

/* ⚠ LEBAR PEMBUNGKUS: width:100% WAJIB, bukan sekadar max-width.
   `body` halaman ini adalah flex kolom, dan `.tt-wrap` dipusatkan dengan margin
   otomatis. Di dalam flex, MARGIN OTOMATIS MEMATIKAN STRETCH, jadi pembungkus
   menyusut mengikuti lebar isinya alih-alih memenuhi max-width.
   Akibatnya halaman yang isinya kebetulan lebar (tabel, kanvas) terlihat benar,
   sementara yang formulirnya pendek tampak sempit sendiri. Terukur di
   /tools/gross-up-pph21: bagian alat 999px sementara bagian FAQ di bawahnya
   1320px, padahal keduanya .tt-wrap dengan max-width sama. */
.tt-wrap{width:100%}

/* Aturan 4 (tidak ada yang mengikuti gulir) berlaku juga untuk kolom kanan alat
   visual. `.tk-lengket` dipasang 3 Sep pagi untuk menahan pratinjau kontras di
   layar; dicabut sore harinya atas permintaan Ega. Kelasnya dibiarkan di markup
   supaya diff-nya kecil, tapi tidak lagi berefek. */
.tk-lengket{position:static !important}

/* ⚠ GAP BESAR DI BAWAH AREA FAQ: grid-auto-rows WAJIB min-content.
   `.tt-body > .tt-rel` memakai `grid-row:1 / span 200` supaya blok kanan tidak
   ikut menentukan tinggi baris kolom kiri. Efek sampingnya: grid membuat 200
   baris implisit, dan kelebihan tinggi item yang membentang itu DIBAGIKAN ke
   baris-baris tersebut, termasuk yang berada di bawah seluruh isi.
   Terukur di /tools/hitung-gaji-pph21-bpjs: isi terbawah berakhir di 1274px
   sementara .tt-body baru selesai di 1765px, jadi 491px kosong.
   `align-content:start` TIDAK menolong sama sekali (tetap 491). Yang menolong
   min-content: sisa turun jadi 60px, dan 60px itu memang padding-bottom-nya. */
.tt-body{grid-auto-rows:min-content}

/* ---- Tabel banding di panel hasil (Banding Metode PPh 21) ----
   Bentuk lama menumpuk tiga metode sebagai tiga blok dengan judul berupa label
   abu kecil. Akibatnya orang membaca satu daftar panjang dan tidak sadar sedang
   membandingkan tiga hal. Sekarang metode jadi KOLOM dan metrik jadi BARIS,
   supaya bandingannya terbaca menyamping. */
.tt-banding__bungkus{padding:0 22px 20px;overflow-x:auto}
.tt-banding{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}

.tt-banding__sudut{width:1%;white-space:nowrap}
.tt-banding thead th{vertical-align:bottom;padding:0 12px 12px;text-align:right;
  border-bottom:2px solid #dbe4f2}
.tt-banding thead th.tt-banding__sudut{border-bottom-color:transparent}

/* Nama metode: inilah yang dulu tidak terbaca sebagai pembatas antar metode. */
.tt-banding__nama{display:block;font-size:14.5px;font-weight:750;color:#1f2b3a;line-height:1.25;
  letter-spacing:-.01em;text-transform:none}
.tt-banding__ket{display:block;margin-top:4px;font-size:11.5px;font-weight:500;color:#6b7c92;
  line-height:1.4;text-transform:none;letter-spacing:0;white-space:normal;max-width:190px;margin-left:auto}

.tt-banding tbody th{text-align:left;font-weight:650;color:#41536a;font-size:13px;
  padding:11px 12px 11px 0;white-space:nowrap;border-bottom:1px solid #e6ecf6}
.tt-banding tbody th .tt-sub{display:block;font-weight:500;font-size:11.5px;margin-top:2px;white-space:normal}
.tt-banding tbody td{text-align:right;padding:11px 12px;color:#1f2b3a;
  font-variant-numeric:tabular-nums;border-bottom:1px solid #e6ecf6;white-space:nowrap}
.tt-banding tbody tr:last-child th,.tt-banding tbody tr:last-child td{border-bottom:none}

/* Baris keputusan. Ini angka yang sebenarnya dibandingkan orang. */
.tt-banding__utama th{color:#1f2b3a;font-weight:750}
.tt-banding__utama td{font-size:16px;font-weight:750;color:#004AAD}

/* Gross up dan net menghasilkan angka identik. Ditandai bersama supaya
   keidentikannya TERLIHAT, bukan hanya tertulis di catatan bawah. */
.tt-banding__sel--sama{background:#f2f6fd}
.tt-banding thead th.tt-banding__sel--sama{background:#eaf1fb;border-radius:8px 8px 0 0}

@media(max-width:600px){
  .tt-banding__bungkus{padding:0 14px 16px}
  .tt-banding{font-size:12.5px;min-width:460px}
  .tt-banding__nama{font-size:13px}
}

/* Nama umum ("buta warna merah") berdampingan dengan nama kliniknya.
   Nama klinik tetap dipertahankan karena itu yang tertulis di surat keterangan
   dokter dan yang dicari orang; nama umum yang membuatnya dikenali. */
.tt-cvd__umum{display:block;font-size:11.5px;font-weight:600;color:#6b7c92;
  text-transform:none;letter-spacing:0;margin-top:2px}

/* ---- Tes penyaringan buta warna ---- */
.tw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.tw-pelat{border:1px solid #e2e8f2;border-radius:14px;padding:14px;background:#fff}
.tw-kanvas{display:block;width:100%;height:auto;border-radius:50%;background:#fff}
.tw-isi{margin-top:12px}
.tw-label{display:block;font-size:12.5px;font-weight:700;color:#41506a;margin-bottom:6px}
.tw-label .tt-sub{display:inline;font-weight:500}
.tw-baris{display:flex;gap:8px;align-items:stretch}
.tw-input{width:84px;height:42px;border:1px solid #d7deea;border-radius:10px;padding:0 12px;
  font:700 18px/1 inherit;color:#1f2b3a;background:#fff;text-align:center;
  font-variant-numeric:tabular-nums}
.tw-input:focus{outline:none;border-color:#004AAD;box-shadow:0 0 0 3px rgba(0,74,173,.13)}
.tw-tak{flex:1;border:1px solid #d7deea;border-radius:10px;background:#fff;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:#5a6b80;padding:0 10px}
.tw-tak:hover{border-color:#004AAD;color:#004AAD}
/* Ditandai supaya "saya memang tidak melihat apa-apa" terbaca berbeda dari
   "saya belum mengisi". Keduanya kosong, tapi artinya tidak sama. */
.tw-pelat--tak{background:#f6f8fb}
.tw-pelat--tak .tw-tak{border-color:#004AAD;color:#fff;background:#004AAD}

@media(max-width:600px){.tw-grid{grid-template-columns:1fr;gap:18px}}

/* Tombol kecil "Ganti angka". Sengaja tidak semencolok tombol utama: ia
   pelengkap, bukan langkah yang harus ditempuh. */
.tw-ganti{display:inline-flex;align-items:center;gap:8px;border:1px solid #d7deea;
  background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:650;color:#41506a;
  transition:border-color .15s,color .15s}
.tw-ganti:hover{border-color:#004AAD;color:#004AAD}
.tw-ganti i{font-size:12px}