/* Artikel interaktif: Template Website Sekolah (e-Humas SiTuntas) — v2 ringkas, berwarna, interaktif.
   Semua aset lokal, tanpa CDN. Semua kelas berawalan ti- agar tidak bentrok dengan CSS landing.
   Warna mengikuti identitas 12 template (biru Wibawa, hijau Madani, oranye Karya, sian Cakrawala, emas Ceria, toska Fitrah, merah Warta). */

@property --ti-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

:root {
  --ti-tinta: #0C1B2A;
  --ti-tinta-2: #334155;
  --ti-tinta-3: #526277;
  --ti-latar: #F4F7FB;
  --ti-garis: #DCE4F0;
  --ti-biru: #1D4ED8;
  --ti-biru-teks: #1E40AF;
  --ti-biru-muda: #0284C7;
  --ti-biru-pucat: #EFF6FF;
  --ti-navy: #0B1726;
  --ti-navy-2: #13263E;
  --ti-redup-terang: #B6C5D8;
  --ti-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ti-bayang: 0 1px 2px rgba(12, 27, 42, .05), 0 10px 28px -12px rgba(12, 27, 42, .14);
  --ti-lentur: cubic-bezier(.2, .7, .2, 1);
  --ti-lentur-2: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* ---------- dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.ti-mandiri { margin: 0; font-family: var(--ti-font); font-size: 1.03rem; line-height: 1.65; color: var(--ti-tinta); background: var(--ti-latar); -webkit-font-smoothing: antialiased; }
.ti-artikel, .ti-pratinjau { font-family: var(--ti-font); font-size: 1.03rem; line-height: 1.65; color: var(--ti-tinta); }
.ti-artikel { display: block; padding-bottom: 1px; background: var(--ti-latar); }
.ti-artikel [id] { scroll-margin-top: var(--ti-gulir-atas, 1.25rem); }
:where(.ti-artikel, .ti-pratinjau) p { font-size: inherit; color: inherit; }
:where(.ti-prosa, .ti-bagian) ul { list-style: disc; }
:where(.ti-prosa, .ti-bagian) ol { list-style: decimal; }
.ti-artikel img, .ti-artikel svg { max-width: 100%; }
.ti-artikel img { height: auto; }
.ti-artikel a, .ti-kaki a { color: var(--ti-biru-teks); text-underline-offset: .18em; text-decoration-thickness: .07em; }
.ti-artikel a:hover { text-decoration-thickness: .14em; }
.ti-artikel code { padding: .12rem .38rem; border-radius: 6px; background: #E8EEF7; color: var(--ti-tinta); font-size: .88em; font-weight: 700; }
.ti-artikel :focus-visible, .ti-situs :focus-visible, .ti-pratinjau :focus-visible, .ti-lewati:focus-visible { outline: 3px solid var(--ti-biru-muda); outline-offset: 3px; border-radius: 8px; }
.ti-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ti-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ti-ikon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
.ti-lewati { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: .7rem 1rem; border-radius: 10px; background: var(--ti-navy); color: #fff; font-weight: 700; text-decoration: none; }
.ti-lewati:focus { top: 1rem; }
.ti-wadah { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.ti-wadah-teks { width: min(100% - 2rem, 48rem); margin-inline: auto; }
.ti-wadah .ti-wadah-teks { width: min(100%, 48rem); }

/* bilah kemajuan baca */
.ti-kemajuan { display: none; }
@supports (animation-timeline: scroll()) {
  .ti-kemajuan { display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; background: linear-gradient(90deg, #1E40AF, #047857, #EA580C, #0D9488); transform-origin: 0 50%; transform: scaleX(0); animation: ti-kemajuan linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes ti-kemajuan { to { transform: scaleX(1); } }
}

/* ---------- tombol ---------- */
.ti-tombol { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .7rem 1.25rem; border-radius: 999px; background: var(--ti-biru); color: #fff !important; font-weight: 800; line-height: 1.2; text-decoration: none !important; box-shadow: 0 8px 22px -8px rgba(29, 78, 216, .65); transition: transform .25s var(--ti-lentur), box-shadow .25s, background-color .25s; }
.ti-tombol:hover { background: var(--ti-biru-teks); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(29, 78, 216, .75); }
.ti-tombol .ti-ikon { transition: transform .25s var(--ti-lentur); }
.ti-tombol:hover .ti-ikon { transform: translateX(3px); }
.ti-tombol--kecil { min-height: 40px; padding: .5rem 1rem; font-size: .92rem; }
.ti-tombol--besar { min-height: 56px; padding: .95rem 1.7rem; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); }
.ti-tombol-garis { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .5rem 1.05rem; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .92rem; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.ti-tombol-garis:hover { background: rgba(255, 255, 255, .1); }
.ti-tombol-garis--terang { color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.ti-tautan-panah { color: var(--warna, var(--ti-biru-teks)) !important; font-size: .92rem; font-weight: 800; text-decoration: none !important; display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; }
.ti-tautan-panah::after { content: "\2192"; transition: transform .2s var(--ti-lentur); }
.ti-tautan-panah:hover::after { transform: translateX(4px); }

/* ---------- kepala situs (khusus versi mandiri) ---------- */
.ti-situs { background: #fff; border-bottom: 1px solid var(--ti-garis); }
.ti-situs__isi { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.ti-merek { display: inline-flex; align-items: center; gap: .55rem; color: var(--ti-tinta); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.ti-merek img { display: block; }
.ti-situs__nav { display: none; gap: 1.5rem; margin-left: auto; }
.ti-situs__nav a { color: var(--ti-tinta-2); font-size: .95rem; font-weight: 700; text-decoration: none; padding-block: .5rem; }
.ti-situs__nav a:hover { color: var(--ti-tinta); }
.ti-situs .ti-tombol { margin-left: auto; }
@media (min-width: 640px) { .ti-situs__nav { display: flex; } .ti-situs .ti-tombol { margin-left: 0; } }

/* ---------- hero ---------- */
.ti-hero { padding-block: 1.15rem 2rem; }
.ti-remah ol { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 0 0 1.15rem; padding: 0; list-style: none; font-size: .85rem; color: var(--ti-tinta-3); }
.ti-remah li { display: inline-flex; align-items: center; }
.ti-remah li + li::before { content: "/"; margin-right: .5rem; color: #8592A6; }
.ti-remah a { display: inline-block; padding-block: .15rem; color: var(--ti-tinta-2); }
.ti-eyebrow-baris { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ti-palet-titik { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--ti-garis); }
.ti-palet-titik i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.ti-eyebrow { margin: 0 0 .5rem; color: var(--ti-biru-teks); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ti-eyebrow-baris .ti-eyebrow { margin: 0; }
.ti-hero h1 { max-width: 20ch; margin: 0 0 .9rem; font-size: clamp(1.95rem, 1.2rem + 3.4vw, 3.45rem); font-weight: 800; line-height: 1.07; letter-spacing: -.03em; text-wrap: balance; }
.ti-hero h1 span[data-jumlah] { background: linear-gradient(95deg, #1E40AF 0%, #047857 52%, #EA580C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ti-lead { max-width: 41rem; margin: 0 0 .85rem; color: var(--ti-tinta-2); font-size: clamp(1.02rem, .97rem + .35vw, 1.18rem); line-height: 1.58; }
.ti-lead strong { font-weight: 800; color: var(--ti-tinta); }
.ti-byline { margin: 0 0 1.25rem; color: var(--ti-tinta-3); font-size: .88rem; font-weight: 700; }
.ti-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; max-width: 41rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ti-angka li { position: relative; display: flex; flex-direction: column; gap: .18rem; padding: .8rem .85rem .75rem; border: 1px solid var(--ti-garis); border-top: 4px solid var(--aksen, var(--ti-biru)); border-radius: 14px; background: #fff; color: var(--ti-tinta-2); font-size: .8rem; font-weight: 700; line-height: 1.28; box-shadow: var(--ti-bayang); }
.ti-angka b { color: var(--aksen, var(--ti-tinta)); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.35rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ti-naik { --ti-n: var(--akhir); counter-reset: ti-n var(--ti-n); }
.ti-naik::after { content: counter(ti-n); }

/* pil loncat cepat 6 template modern di hero */
.ti-jenis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; max-width: 41rem; margin: 0 !important; padding: 0 !important; list-style: none; }
.ti-jenis li { margin: 0 !important; }
.ti-jenis a { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: .42rem .65rem; border: 1px solid var(--ti-garis); border-left: 4px solid var(--warna); border-radius: 11px; background: #fff; color: var(--ti-tinta) !important; font-size: .84rem; font-weight: 700; line-height: 1.2; text-decoration: none !important; transition: border-color .2s, transform .2s var(--ti-lentur), box-shadow .2s, background-color .2s; }
.ti-jenis a:hover { border-color: var(--warna); background: color-mix(in srgb, var(--warna) 7%, #fff); box-shadow: var(--ti-bayang); transform: translateY(-1px); }
.ti-jenis__titik { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--warna); }
.ti-jenis__nama { font-weight: 800; color: var(--ti-tinta); }
.ti-jenis__untuk { margin-left: auto; color: var(--ti-tinta-3); font-size: .75rem; font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) {
  .ti-angka { gap: .8rem; }
  .ti-angka li { padding: .95rem 1.05rem .85rem; font-size: .86rem; }
  .ti-jenis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
}

.ti-kipas { display: none; }
@media (min-width: 1080px) {
  .ti-hero { position: relative; }
  .ti-kipas { display: block; position: absolute; top: 5.5rem; right: 0; width: 27rem; height: 22rem; pointer-events: none; }
  .ti-kipas img { position: absolute; width: 20.5rem; height: auto; border-top: 10px solid var(--warna, #1E40AF); border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 27, 42, .08), 0 26px 48px -22px rgba(12, 27, 42, .48); }
  .ti-kipas img:nth-child(1) { left: 0; top: 6.2rem; transform: rotate(-6.5deg); }
  .ti-kipas img:nth-child(2) { left: 3.4rem; top: 3rem; transform: rotate(-1.2deg); z-index: 1; }
  .ti-kipas img:nth-child(3) { left: 6.8rem; top: 0; transform: rotate(4.2deg); z-index: 2; }
}

/* ---------- galeri pengganti template ---------- */
.ti-galeri { --warna-aktif: #1E40AF; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2rem, 4.5vw, 3.25rem); background: radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--warna-aktif) 32%, var(--ti-navy-2)) 0%, var(--ti-navy) 65%); color: #fff; transition: background .6s ease; }
.ti-galeri__kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .85rem 2rem; margin-bottom: 1rem; }
.ti-galeri__teks { max-width: 38rem; }
.ti-galeri h2 { margin: 0 0 .35rem; font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
.ti-eyebrow--terang { color: #93C5FD; }
.ti-galeri__sub { margin: 0; color: var(--ti-redup-terang); font-size: .96rem; }
.ti-galeri__kontrol { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.ti-putar { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .45rem .95rem .45rem .85rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background-color .2s; }
.ti-putar:hover { background: rgba(255, 255, 255, .15); }
.ti-putar__main, .ti-putar[data-keadaan="jeda"] .ti-putar__jeda { display: none; }
.ti-putar[data-keadaan="jeda"] .ti-putar__main { display: inline-block; }
.ti-saklar { display: inline-flex; padding: 3px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .07); }
.ti-saklar button { display: inline-flex; align-items: center; gap: .38rem; min-height: 36px; padding: .35rem .85rem; border: 0; border-radius: 999px; background: transparent; color: #D5DEEA; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background-color .25s, color .25s; }
.ti-saklar button:hover { color: #fff; }
.ti-saklar button[aria-pressed="true"] { background: #fff; color: var(--ti-navy); }

/* saringan & tab */
.ti-saringan { display: flex; gap: .35rem; margin: 0 -1rem .55rem; padding: .15rem 1rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); }
.ti-saringan::-webkit-scrollbar { display: none; }
.ti-saring { flex: none; display: inline-flex; align-items: center; gap: .42rem; min-height: 38px; padding: .28rem .45rem .28rem .8rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .04); color: #B8C7DA; font: inherit; font-size: .84rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.ti-saring:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ti-saring[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); }
.ti-saring__n { min-width: 1.4rem; padding: .06rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .73rem; font-variant-numeric: tabular-nums; text-align: center; }
.ti-saring[aria-pressed="true"] .ti-saring__n { background: #fff; color: var(--ti-navy); }
.ti-saring:focus-visible, .ti-tab:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }

.ti-tablist { display: flex; gap: .45rem; margin: 0 -1rem 1.1rem; padding: .3rem 1rem .55rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); }
.ti-tablist::-webkit-scrollbar { display: none; }
.ti-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: .48rem; min-height: 42px; padding: .45rem .95rem; overflow: hidden; scroll-snap-align: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #E6ECF5; font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.ti-tab:hover { background: rgba(255, 255, 255, .14); }
.ti-tab[aria-selected="true"] { border-color: #fff; background: #fff; color: var(--ti-navy); box-shadow: 0 0 0 2px var(--warna), 0 8px 20px -6px rgba(0, 0, 0, .45); }
.ti-tab--awal-klasik { margin-left: .75rem; }
.ti-tab__titik { width: .62rem; height: .62rem; flex: none; border-radius: 50%; background: var(--warna); box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); }
.ti-tab__waktu { position: absolute; inset: auto 0 0; height: 3px; background: var(--warna); transform: scaleX(0); transform-origin: 0 50%; }
.ti-galeri.is-main .ti-tab[aria-selected="true"] .ti-tab__waktu { animation: ti-waktu var(--durasi, 4200ms) linear forwards; }
.ti-galeri.is-tertahan .ti-tab__waktu { animation-play-state: paused !important; }
@keyframes ti-waktu { to { transform: scaleX(1); } }
.ti-tab[hidden], .ti-saring[hidden] { display: none; }
.no-js .ti-saringan, .no-js .ti-tablist, .no-js .ti-galeri__kontrol { display: none; }
@media (min-width: 900px) {
  .ti-saringan, .ti-tablist { flex-wrap: wrap; justify-content: center; margin-inline: 0; padding-inline: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ti-tablist { align-content: flex-start; }
}
:root.ti-vt::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--ti-lentur); }
:root.ti-vt::view-transition-old(root), :root.ti-vt::view-transition-new(root) { animation: none; }

/* panggung: laptop + HP */
.ti-panggung-wadah { container-type: inline-size; max-width: 62rem; margin-inline: auto; }
.ti-panggung { position: relative; height: 78cqw; touch-action: pan-y; transform: perspective(1800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: height .7s var(--ti-lentur-2), transform .6s var(--ti-lentur);
  --lx: 4cqw; --ly: 4cqw; --lw: 80cqw; --hx: 72cqw; --hy: 25cqw; --hw: 25cqw;
  --lt: none; --lo: 1; --ht: none; }
.ti-panggung[data-mode="hp"] { height: 132cqw; --lt: translate(6cqw, 38cqw); --lo: .28; --ht: translate(-53cqw, -22cqw) scale(2.45); }
@container (min-width: 640px) {
  .ti-panggung, .ti-panggung[data-mode="hp"] { height: 58cqw; }
  .ti-panggung { --lx: 7cqw; --ly: 3cqw; --lw: 78cqw; --hx: 78.5cqw; --hy: 19.5cqw; --hw: 18.5cqw; }
  .ti-panggung[data-mode="hp"] { --lt: translate(5cqw, 11cqw) scale(.7); --lo: .45; --ht: translate(-17.5cqw, -17.5cqw) scale(1.45); }
}
.ti-cahaya { position: absolute; z-index: 0; inset: 2% 4% -8%; background-color: var(--warna-aktif); -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .38) 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .38) 55%, transparent 100%); opacity: .48; transition: background-color .8s ease; pointer-events: none; }
.ti-laptop, .ti-panggung .ti-hp { position: absolute; transform-origin: 0 0; transition: transform .8s var(--ti-lentur-2), opacity .6s ease; }
.ti-laptop { z-index: 1; left: var(--lx); top: var(--ly); width: var(--lw); transform: var(--lt); opacity: var(--lo); }
.ti-panggung .ti-hp { z-index: 2; left: var(--hx); top: var(--hy); width: var(--hw); transform: var(--ht); }
.ti-laptop__tutup { position: relative; padding: 2.6% 2.4% 2.4%; border-radius: 1.6cqw 1.6cqw .5cqw .5cqw; background: linear-gradient(180deg, #1A2433, #0A111C 9%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2.5cqw 5cqw -2cqw rgba(0, 0, 0, .7); }
.ti-laptop__tutup::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); pointer-events: none; }
.ti-laptop::after { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -5%; height: 9%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none; }
.ti-laptop__kamera { position: absolute; top: 1.3%; left: 50%; width: .55cqw; height: .55cqw; border-radius: 50%; background: #2C394C; transform: translate(-50%, 0); }
.ti-laptop__alas { position: relative; width: 112%; height: 0; margin-left: -6%; padding-bottom: 3.2%; border-radius: 0 0 1.4cqw 1.4cqw / 0 0 .9cqw .9cqw; background: linear-gradient(#D5DDE8, #9AA6B8 70%, #7D899C); }
.ti-laptop__alas::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 38%; border-radius: 0 0 .7cqw .7cqw; background: #8592A6; transform: translateX(-50%); }
.ti-hp__bingkai { position: relative; padding: 9% 5% 5.5%; border-radius: 15% / 7%; background: linear-gradient(150deg, #3A475B, #0A111C 16%, #0A111C 84%, #2E3A4D); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2cqw 4.5cqw -1.5cqw rgba(0, 0, 0, .75); }
.ti-hp__bingkai::before, .ti-hp__bingkai::after { content: ""; position: absolute; width: 1.8%; border-radius: 3px; pointer-events: none; }
.ti-hp__bingkai::before { left: -1.5%; top: 17%; height: 15%; background: linear-gradient(#2B3648 0 40%, transparent 40% 52%, #2B3648 52%); }
.ti-hp__bingkai::after { right: -1.5%; top: 22%; height: 9%; background: #2B3648; }
.ti-hp__pulau { position: absolute; top: 2.6%; left: 50%; width: 28%; height: 1.9%; border-radius: 999px; background: #1B2636; transform: translateX(-50%); }
.ti-layar { position: relative; overflow: hidden; background: #E8EDF4; }
.ti-laptop .ti-layar { aspect-ratio: 16 / 10; border-radius: .3cqw; }
.ti-hp .ti-layar { aspect-ratio: 390 / 844; border-radius: 10% / 4.6%; }
.ti-layar::before { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(118deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 26%, transparent 42%); pointer-events: none; }
.ti-lapis { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.03); transition: opacity .75s ease, transform 1.4s var(--ti-lentur); }
.ti-lapis.is-aktif { z-index: 2; opacity: 1; transform: none; }
.ti-lapis.is-keluar { z-index: 1; opacity: 1; transform: none; transition: none; }
.ti-layar::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ti-layar.is-memuat::after { opacity: 1; animation: ti-kilau 1.1s linear infinite; }
@keyframes ti-kilau { to { background-position: 250% 0; } }
@supports not (width: 1cqw) {
  .ti-panggung { display: flex; align-items: flex-end; justify-content: center; gap: 4%; height: auto; padding: 1rem 0; }
  .ti-laptop, .ti-panggung .ti-hp { position: relative; left: auto; top: auto; transform: none; opacity: 1; }
  .ti-laptop { width: 72%; } .ti-panggung .ti-hp { width: 20%; }
}

.ti-intip { position: absolute; top: 0; left: 0; z-index: 6; width: 240px; padding: 6px 6px 8px; border-radius: 14px; background: #fff; box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .7); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ti-intip.is-tampil { opacity: 1; }
.ti-intip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 9px; background: #E8EDF4; object-fit: cover; object-position: top center; }
.ti-intip span { display: block; margin: 7px 2px 0; padding-left: .5rem; border-left: 3px solid var(--warna); color: var(--ti-navy); font-size: .8rem; font-weight: 800; line-height: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .ti-lapis.is-singkap { opacity: 1; transition: none; -webkit-mask-image: linear-gradient(105deg, #000 47%, transparent 53%); mask-image: linear-gradient(105deg, #000 47%, transparent 53%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: ti-singkap 1s cubic-bezier(.65, 0, .25, 1) both; }
  .ti-lapis.is-singkap.is-mundur { -webkit-mask-image: linear-gradient(255deg, #000 47%, transparent 53%); mask-image: linear-gradient(255deg, #000 47%, transparent 53%); animation-name: ti-singkap-mundur; }
  .ti-hp .ti-lapis.is-singkap { animation-delay: .08s; }
  @keyframes ti-singkap { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: scale(1.045); } to { -webkit-mask-position: 0 0; mask-position: 0 0; transform: none; } }
  @keyframes ti-singkap-mundur { from { -webkit-mask-position: 0 0; mask-position: 0 0; transform: scale(1.045); } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: none; } }
  .ti-tab, .ti-saring { transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ti-lentur); }
  .ti-tab:active, .ti-saring:active { transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .ti-panggung { transform: none; }
}

/* keterangan + penghitung 1/N */
.ti-keterangan { display: grid; justify-items: center; gap: .4rem; max-width: 44rem; margin: clamp(1rem, 2.5vw, 1.6rem) auto 0; text-align: center; }
.ti-keterangan__kepala { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.ti-hitung { display: flex; align-items: baseline; margin: 0; padding-right: 1rem; border-right: 1px solid rgba(255, 255, 255, .2); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ti-hitung__kini { position: relative; display: inline-block; height: 1.1em; min-width: .62em; overflow: hidden; font-size: clamp(2.2rem, 1.9rem + 1.3vw, 2.9rem); text-align: right; }
.ti-hitung__kini > span { display: block; }
.ti-hitung__kini > .keluar { position: absolute; inset: 0; }
.ti-hitung__total { margin-left: .1rem; color: #9FB0C6; font-size: 1.1rem; }
.ti-keterangan__status { display: inline-block; margin: 0; padding: .14rem .55rem; border-radius: 999px; background: var(--warna-aktif); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: background-color .4s; }
.ti-keterangan__nama { margin: .18rem 0 0; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.ti-keterangan__cocok { margin: .25rem 0 0; color: #E3EAF3; font-size: .98rem; }
.ti-keterangan__label { display: inline-block; margin-right: .3rem; padding: .12rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; vertical-align: .1em; }
.ti-keterangan__ciri { margin: 0; color: var(--ti-redup-terang); font-size: .92rem; }
.ti-keterangan__aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: .5rem 0 0; }
.ti-langkah-galeri { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .85rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #E2E8F0; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ti-langkah-galeri:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .45); color: #fff; }
.ti-catatan-demo { margin: .15rem 0 0; color: #93A4BA; font-size: .78rem; }
[data-ket-nama], [data-ket-status], [data-ket-cocok], [data-ket-ciri] { transition: opacity .22s ease, transform .22s ease; }
.ti-keterangan.is-pudar [data-ket-nama], .ti-keterangan.is-pudar [data-ket-status], .ti-keterangan.is-pudar [data-ket-cocok], .ti-keterangan.is-pudar [data-ket-ciri] { opacity: 0; transform: translateY(4px); }

/* ---------- kepala seksi & prosa ---------- */
.ti-bagian { padding-top: clamp(2.5rem, 5.5vw, 3.75rem); }
.ti-bagian--lebar { padding-top: clamp(2.75rem, 6vw, 4.25rem); }
.ti-prosa h2, .ti-bagian h2 { margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.35vw, 2.05rem); font-weight: 800; line-height: 1.16; letter-spacing: -.024em; text-wrap: balance; }
.ti-prosa h3, .ti-bagian h3 { margin: 0 0 .45rem; font-size: 1.18rem; font-weight: 800; line-height: 1.28; }
.ti-prosa p { margin: 0 0 .9rem; }
.ti-kepala-seksi { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.ti-kepala-seksi__ket { margin: 0; color: var(--ti-tinta-2); font-size: .98rem; max-width: 38rem; }
@media (min-width: 860px) {
  .ti-kepala-seksi { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 2rem; }
}

/* ---------- kartu 6 template modern (Bento 2 kolom) ---------- */
.ti-kartu-daftar { display: grid; gap: 1.25rem; }
@media (min-width: 860px) {
  .ti-kartu-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
}
.ti-kartu { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; overflow: hidden; border: 1px solid var(--ti-garis); border-top: 5px solid var(--warna); border-radius: 20px; background: #fff; box-shadow: var(--ti-bayang); transition: transform .25s var(--ti-lentur), box-shadow .25s; }
.ti-kartu:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(12, 27, 42, .06), 0 18px 36px -14px rgba(12, 27, 42, .2); }
.ti-kartu__kepala { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ti-kartu__nomor { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.65rem; padding-inline: .45rem; border-radius: 8px; background: var(--warna); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .06em; }
.ti-kartu__untuk { padding: .22rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--warna) 11%, #fff); color: var(--warna); font-size: .78rem; font-weight: 800; }
.ti-kartu__media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 29%); gap: .75rem; align-items: center; padding: .75rem; border-radius: 14px; background: color-mix(in srgb, var(--warna) 7%, #F1F5F9); }
.ti-gbr { margin: 0; }
.ti-gbr__layar { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #E8EDF4; box-shadow: 0 0 0 1px rgba(12, 27, 42, .08), 0 12px 24px -12px rgba(12, 27, 42, .4); transition: transform .2s var(--ti-lentur); }
.ti-gbr__layar:hover { transform: scale(1.015); }
.ti-gbr__layar img { display: block; width: 100%; }
.ti-gbr--desktop .ti-gbr__layar, .ti-klasik .ti-gbr__layar { padding-top: 12px; background: #E4E9F1; }
.ti-gbr--desktop .ti-gbr__layar::before, .ti-klasik .ti-gbr__layar::before { content: ""; position: absolute; top: 3.5px; left: 7px; width: 30px; height: 5px; background: radial-gradient(circle at 2.5px 2.5px, #F87171 2.5px, transparent 3px), radial-gradient(circle at 12px 2.5px, #FBBF24 2.5px, transparent 3px), radial-gradient(circle at 22px 2.5px, #34D399 2.5px, transparent 3px); }
.ti-gbr--hp .ti-gbr__layar { border: 4px solid #0A111C; border-radius: 16px; }
.ti-kartu__teks { display: flex; flex-direction: column; flex: 1; }
.ti-kartu h3 { margin: 0 0 .4rem; font-size: 1.22rem; line-height: 1.25; letter-spacing: -.015em; }
.ti-kartu__nama { color: var(--warna); font-weight: 800; }
.ti-kartu__sub { font-weight: 700; color: var(--ti-tinta); font-size: .95em; }
.ti-kartu p { margin: 0 0 .65rem; color: var(--ti-tinta-2); font-size: .94rem; }
.ti-kartu__fitur { display: grid; gap: .32rem; margin: 0 0 .9rem; padding: 0; list-style: none; color: var(--ti-tinta-2); font-size: .9rem; line-height: 1.48; }
.ti-kartu__fitur li { position: relative; padding-left: 1.15rem; }
.ti-kartu__fitur li::before { content: ""; position: absolute; left: .1rem; top: .52em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--warna); }
.ti-kartu__fitur strong { color: var(--ti-tinta); }
.ti-kartu__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--ti-garis); }
.ti-kartu__aksi .ti-tautan-panah { margin-right: auto; }

/* ---------- kartu 6 tema Klasik (Grid 3 kolom) ---------- */
.ti-kepala-klasik { display: grid; gap: .5rem; margin-top: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.1rem; }
.ti-kepala-klasik p { margin: 0; color: var(--ti-tinta-2); font-size: .95rem; }
.ti-klasik-judul { margin: 0 !important; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem) !important; letter-spacing: -.015em; }
.ti-kartu-daftar--klasik { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
@media (min-width: 960px) {
  .ti-kartu-daftar--klasik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ti-klasik { margin: 0; padding: .85rem; border: 1px solid var(--ti-garis); border-top: 4px solid var(--warna); border-radius: 18px; background: #fff; box-shadow: var(--ti-bayang); display: flex; flex-direction: column; }
.ti-klasik figcaption { display: flex; flex-direction: column; flex: 1; padding: .75rem .2rem .1rem; color: var(--ti-tinta-2); font-size: .9rem; line-height: 1.45; }
.ti-klasik__kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem; margin-bottom: .3rem; }
.ti-klasik strong { color: var(--ti-tinta); font-size: 1.02rem; font-weight: 800; }
.ti-klasik__cocok { color: var(--ti-tinta-3); font-size: .76rem; font-weight: 700; }
.ti-klasik figcaption p { margin: 0 0 .65rem; font-size: .88rem; }
.ti-klasik__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--ti-garis); }
.ti-klasik__aksi .ti-tautan-panah { margin-right: auto; font-size: .85rem; }

/* ---------- tabel lipat & perbandingan ---------- */
.ti-tabel-lipat { margin-top: 1.35rem; border: 1px solid var(--ti-garis); border-radius: 16px; background: #fff; box-shadow: var(--ti-bayang); }
.ti-tabel-lipat summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .85rem 1.2rem; font-size: .96rem; font-weight: 800; color: var(--ti-biru-teks); list-style: none; cursor: pointer; }
.ti-tabel-lipat summary::-webkit-details-marker { display: none; }
.ti-tabel-lipat summary::after { content: "Buka tabel \2193"; font-size: .82rem; padding: .25rem .7rem; border-radius: 999px; background: var(--ti-biru-pucat); }
.ti-tabel-lipat[open] summary::after { content: "Tutup tabel \2191"; }
.ti-tabel-lipat .ti-tabel-wadah { margin: 0; border-top: 1px solid var(--ti-garis); border-radius: 0 0 16px 16px; box-shadow: none; border-inline: 0; border-bottom: 0; }

.ti-tabel-wadah { margin: 1.25rem 0 0; }
.ti-tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; line-height: 1.48; }
.ti-tabel th, .ti-tabel td { padding: .75rem .95rem; text-align: left; vertical-align: top; }
.ti-tabel thead th { color: var(--ti-tinta-3); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ti-tabel tbody th { font-weight: 800; }
.ti-titik { display: inline-block; width: .6rem; height: .6rem; margin-right: .45rem; border-radius: 50%; background: var(--warna); vertical-align: .05em; }
.ti-lencana { display: inline-block; margin-left: .3rem; padding: .08rem .48rem; border-radius: 999px; background: var(--ti-biru-pucat); color: var(--ti-biru-teks); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: .15em; }
.ti-lencana--klasik { background: #EEF2F6; color: var(--ti-tinta-2); }
.ti-chip-tautan { display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .7rem; border: 1px solid #CBD5E1; border-radius: 999px; background: #fff; color: var(--ti-tinta-2) !important; font-size: .8rem; font-weight: 700; text-decoration: none !important; transition: border-color .2s, background-color .2s, color .2s; }
.ti-chip-tautan:hover { border-color: var(--warna, var(--ti-biru)); background: var(--ti-biru-pucat); color: var(--ti-tinta) !important; }
@media (max-width: 719.98px) {
  .ti-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ti-tabel, .ti-tabel tbody, .ti-tabel tr, .ti-tabel th, .ti-tabel td { display: block; }
  .ti-tabel tr { margin-bottom: .65rem; padding: .35rem 0 .5rem; border: 1px solid var(--ti-garis); border-radius: 14px; background: #fff; }
  .ti-tabel tbody th { padding: .65rem .9rem .3rem; font-size: 1rem; }
  .ti-tabel td { display: grid; grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr); gap: .65rem; padding: .3rem .9rem; }
  .ti-tabel td::before { content: attr(data-label); color: var(--ti-tinta-3); font-size: .8rem; font-weight: 700; line-height: 1.5; }
  .ti-tabel td.ti-sorot { margin: .3rem .45rem 0; padding: .5rem .45rem; border-radius: 10px; background: var(--ti-biru-pucat); }
}
@media (min-width: 720px) {
  .ti-tabel-wadah { overflow: hidden; border: 1px solid var(--ti-garis); border-radius: 16px; background: #fff; box-shadow: var(--ti-bayang); }
  .ti-tabel th, .ti-tabel td { border-bottom: 1px solid var(--ti-garis); }
  .ti-tabel tbody tr:last-child > * { border-bottom: 0; }
  .ti-tabel thead th { background: #F8FAFC; }
  .ti-tabel .ti-sorot { background: #EFF6FF; }
  .ti-tabel thead .ti-sorot { color: var(--ti-biru-teks); background: #DBEAFE; }
  .ti-tabel--banding tbody th { width: 20%; }
  .ti-tabel--tumpuk td:last-child { white-space: nowrap; }
}

/* ---------- penjelajah fitur interaktif (Bento 4 kartu) ---------- */
.ti-fitur-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.15rem; }
.ti-fitur-pil { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .35rem .85rem; border: 1px solid var(--ti-garis); border-radius: 999px; background: #fff; color: var(--ti-tinta-2); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s; }
.ti-fitur-pil:hover { border-color: var(--warna, var(--ti-biru)); color: var(--ti-tinta); }
.ti-fitur-pil[aria-pressed="true"] { border-color: var(--warna, var(--ti-biru)); background: var(--warna, var(--ti-navy)); color: #fff; box-shadow: 0 6px 16px -6px rgba(12, 27, 42, .35); }
.ti-fitur-pil[aria-pressed="true"] .ti-titik { box-shadow: 0 0 0 2px #fff; }
.no-js .ti-fitur-nav { display: none; }

.ti-bento-fitur { display: grid; gap: 1.1rem; }
@media (min-width: 860px) {
  .ti-bento-fitur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
.ti-bento-kartu { position: relative; padding: 1.35rem; border: 1px solid var(--ti-garis); border-top: 4px solid var(--warna, var(--ti-biru)); border-radius: 20px; background: #fff; box-shadow: var(--ti-bayang); transition: opacity .25s ease, transform .25s var(--ti-lentur), box-shadow .25s, border-color .25s; }
.ti-bento-kartu.is-sorot { border-color: var(--warna); box-shadow: 0 0 0 2px var(--warna), 0 18px 36px -14px rgba(12, 27, 42, .22); transform: translateY(-2px); }
.ti-bento-kartu.is-redup { opacity: .45; }
.ti-bento-kartu__label { display: inline-block; margin-bottom: .45rem; padding: .18rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--warna) 11%, #fff); color: var(--warna); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ti-bento-kartu h3 { margin: 0 0 .5rem; font-size: 1.18rem; font-weight: 800; line-height: 1.26; }
.ti-bento-kartu p { margin: 0 0 .7rem; color: var(--ti-tinta-2); font-size: .94rem; }
.ti-bento-kartu p:last-child { margin-bottom: 0; }
.ti-fitur { margin: 0; padding-left: 0 !important; list-style: none; display: grid; gap: .4rem; color: var(--ti-tinta-2); font-size: .91rem; line-height: 1.5; }
.ti-fitur li { position: relative; padding-left: 1.2rem; }
.ti-fitur li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .45rem; height: .45rem; border-radius: 2px; background: var(--warna, var(--ti-biru)); transform: rotate(45deg); }
.ti-fitur strong { color: var(--ti-tinta); }

.ti-bento-kartu--hp { display: grid; gap: 1.1rem; align-items: center; }
@media (min-width: 560px) {
  .ti-bento-kartu--hp { grid-template-columns: minmax(0, 1fr) 10.5rem; }
}
.ti-hp-statis { width: 10.5rem; max-width: 54vw; margin: 0 auto; text-align: center; }
.ti-hp--statis { width: 100%; margin: 0 auto; }
.ti-hp--statis .ti-hp__bingkai { box-shadow: 0 0 0 1px rgba(12, 27, 42, .2), 0 18px 38px -16px rgba(12, 27, 42, .5); }
.ti-hp--statis .ti-layar img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.ti-hp-statis figcaption { margin-top: .5rem; color: var(--ti-tinta-3); font-size: .78rem; line-height: 1.35; }

.ti-izin { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .75rem !important; padding: 0 !important; list-style: none; }
.ti-izin li { display: inline-flex; align-items: center; gap: .4rem; margin: 0 !important; padding: .38rem .75rem .38rem .6rem; border-radius: 999px; font-size: .84rem; font-weight: 700; line-height: 1.25; }
.ti-izin small { font-size: .74rem; font-weight: 700; padding-left: .4rem; border-left: 1px solid currentColor; }
.ti-izin__ok { background: #DCFCE7; color: #065F46; }
.ti-izin__wajah { background: #E0F2FE; color: #075985; }
.ti-izin__belum { background: #FEE2E2; color: #991B1B; }

/* ---------- 4 langkah mulai ---------- */
.ti-langkah-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .85rem; margin: 0 0 1.35rem !important; padding: 0 !important; list-style: none; counter-reset: langkah; }
.ti-langkah-grid li { position: relative; display: flex; flex-direction: column; gap: .3rem; margin: 0 !important; padding: 1.1rem 1.1rem 1rem 3.4rem; border: 1px solid var(--ti-garis); border-top: 4px solid var(--warna, var(--ti-biru)); border-radius: 16px; background: #fff; box-shadow: var(--ti-bayang); counter-increment: langkah; font-size: .9rem; color: var(--ti-tinta-2); line-height: 1.48; }
.ti-langkah-grid li::before { content: "0" counter(langkah); position: absolute; left: .9rem; top: 1.05rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--warna, var(--ti-navy)); color: #fff; font-size: .82rem; font-weight: 800; }
.ti-langkah-grid strong { color: var(--ti-tinta); font-size: .98rem; font-weight: 800; }

/* ---------- FAQ ---------- */
.ti-faq-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.ti-faq-buka { min-height: 36px; padding: .3rem .85rem; border: 1px solid var(--ti-garis); border-radius: 999px; background: #fff; color: var(--ti-biru-teks); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.ti-faq-buka:hover { background: var(--ti-biru-pucat); border-color: var(--ti-biru); }
.ti-faq { border-top: 1px solid var(--ti-garis); }
.ti-faq details { border-bottom: 1px solid var(--ti-garis); }
.ti-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .85rem .25rem; font-size: 1rem; font-weight: 700; line-height: 1.38; list-style: none; cursor: pointer; }
.ti-faq summary::-webkit-details-marker { display: none; }
.ti-faq summary::after { content: ""; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ti-biru-pucat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231E40AF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 58% no-repeat; transition: transform .3s var(--ti-lentur), background-color .2s; }
.ti-faq summary:hover::after { background-color: #DBEAFE; }
.ti-faq details[open] summary::after { transform: rotate(45deg); }
.ti-faq details p { margin: 0 0 1rem; padding: 0 2.2rem 0 .25rem; color: var(--ti-tinta-2); font-size: .95rem; }
@supports (interpolate-size: allow-keywords) {
  .ti-faq { interpolate-size: allow-keywords; }
  .ti-faq details::details-content { height: 0; overflow: clip; transition: height .32s var(--ti-lentur), content-visibility .32s allow-discrete; }
  .ti-faq details[open]::details-content { height: auto; }
}

/* ---------- CTA ---------- */
.ti-cta { position: relative; width: min(100% - 2rem, 64rem); margin: clamp(2.75rem, 6vw, 4.25rem) auto 0; padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 4vw, 2.75rem); overflow: hidden; border-radius: 26px; background: radial-gradient(120% 150% at 0% 0%, #1E40AF 0%, #0B1726 62%); color: #fff; text-align: center; }
.ti-cta::after { content: ""; position: absolute; right: -5rem; bottom: -7rem; width: 20rem; height: 20rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 148, 136, .38), transparent); pointer-events: none; }
.ti-cta > * { position: relative; z-index: 1; }
.ti-cta h2 { margin: 0 0 1.25rem; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.ti-cta h2 a { color: #93C5FD; text-decoration-color: rgba(147, 197, 253, .55); }
.ti-cta__aksi { margin: 0; }
.ti-cta .ti-tombol { background: #fff; color: var(--ti-navy) !important; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); }
.ti-cta .ti-tombol:hover { background: #EFF6FF; }
.ti-cta__kirim { margin: 1.2rem auto .75rem; max-width: 34rem; color: #CBD5E1; font-size: .94rem; }
.ti-bagikan { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin: 0; }
.ti-salin-status { flex-basis: 100%; min-height: 1.3em; color: #CBD5E1; font-size: .86rem; }
.ti-kaki { padding: 2rem 0 2.5rem; color: var(--ti-tinta-3); font-size: .86rem; text-align: center; }
.ti-kaki p { margin: 0; }

/* ---------- dialog halaman penuh ---------- */
.ti-pratinjau { width: min(100vw - 1rem, 76rem); max-width: none; height: calc(100vh - 1rem); height: calc(100dvh - 1rem); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--ti-navy); color: #fff; font-family: var(--ti-font); }
.ti-pratinjau[open] { display: flex; flex-direction: column; }
.ti-pratinjau::backdrop { background: rgba(4, 10, 20, .75); }
.ti-pratinjau__kepala { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ti-pratinjau__judul { margin: 0; font-size: 1rem; font-weight: 800; }
.ti-pratinjau__tutup { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.ti-pratinjau__tutup:hover { background: rgba(255, 255, 255, .2); }
.ti-pratinjau__isi { position: relative; flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; overflow: auto; overscroll-behavior: contain; background: #16233A; }
.ti-pratinjau__isi img { display: block; width: 100%; max-width: 1200px; height: auto; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.ti-pratinjau[data-mode="hp"] .ti-pratinjau__isi img { max-width: 390px; border-radius: 22px; }
.ti-pratinjau__muat { position: absolute; top: 2rem; left: 0; right: 0; margin: 0; color: var(--ti-redup-terang); text-align: center; }
.ti-pratinjau__muat[hidden] { display: none; }
.ti-pratinjau__kaki { margin: 0; padding: .65rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--ti-redup-terang); font-size: .85rem; }
.ti-pratinjau__kaki a { color: #93C5FD; }
html:has(.ti-pratinjau[open]) { overflow: hidden; }

/* ---------- gerak ---------- */
.no-js .ti-faq-buka, .no-js .ti-fitur-nav, .no-js .ti-langkah-galeri { display: none; }
.ti-reveal.ti-tunggu { opacity: 0; transform: translateY(24px); }
.ti-reveal.is-tampil { transition: opacity .7s ease, transform .7s var(--ti-lentur); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ti-naik { animation: ti-naik .9s var(--ti-lentur) .1s both; }
  .ti-kipas img { animation: ti-kipas .85s var(--ti-lentur) both; }
  .ti-kipas img:nth-child(2) { animation-delay: .12s; }
  .ti-kipas img:nth-child(3) { animation-delay: .24s; }
  @keyframes ti-kipas { from { opacity: 0; transform: translateY(22px) rotate(0); } }
  @keyframes ti-naik { from { --ti-n: 0; } to { --ti-n: var(--akhir); } }
  .ti-hitung__kini > .masuk { animation: ti-masuk .45s var(--ti-lentur) both; }
  .ti-hitung__kini > .keluar { animation: ti-keluar .45s var(--ti-lentur) both; }
  .ti-hitung__kini.mundur > .masuk { animation-name: ti-masuk-mundur; }
  .ti-hitung__kini.mundur > .keluar { animation-name: ti-keluar-mundur; }
  @keyframes ti-masuk { from { opacity: 0; transform: translateY(85%); } }
  @keyframes ti-keluar { to { opacity: 0; transform: translateY(-85%); } }
  @keyframes ti-masuk-mundur { from { opacity: 0; transform: translateY(-85%); } }
  @keyframes ti-keluar-mundur { to { opacity: 0; transform: translateY(85%); } }
}
@media (prefers-reduced-motion: reduce) {
  .ti-panggung, .ti-laptop, .ti-panggung .ti-hp, .ti-cahaya, .ti-galeri { transition: none; }
  .ti-lapis { transform: none; transition: opacity .2s linear; }
  .ti-hitung__kini > .keluar { display: none; }
  .ti-layar.is-memuat::after { animation: none; }
  .ti-faq details::details-content { transition: none; }
  .ti-tombol, .ti-tombol .ti-ikon, .ti-jenis a, .ti-kartu, .ti-bento-kartu { transition: none; }
}

@media print {
  .ti-situs, .ti-galeri__kontrol, .ti-tablist, .ti-bagikan, .ti-kemajuan, .ti-pratinjau, .ti-fitur-nav { display: none !important; }
  .ti-galeri { background: none; color: #000; }
  .ti-reveal.ti-tunggu { opacity: 1; transform: none; }
}

/* ---------- template premium: lencana emas ---------- */
.ti-premium, .ti-tab__premium, .ti-lencana--premium { --ti-emas-1: #F7EBC8; --ti-emas-2: #E6CD8C; --ti-emas-teks: #5C4511; }
.ti-premium { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .62rem .2rem .55rem; border: 1px solid #C9A45C; border-radius: 999px; background: linear-gradient(135deg, var(--ti-emas-1), var(--ti-emas-2)); color: var(--ti-emas-teks); font-size: .68rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.ti-premium::before { content: ""; width: .42rem; height: .42rem; flex: none; background: #8C6A2F; transform: rotate(45deg); border-radius: 1px; }
.ti-kartu--premium .ti-kartu__kepala { flex-wrap: wrap; }
.ti-kartu--premium .ti-kartu__untuk { margin-right: auto; }
.ti-kartu--premium { background: linear-gradient(180deg, #FFFDF7, #fff 9rem); }
.ti-tab__premium { padding: .05rem .4rem; border: 1px solid rgba(230, 205, 140, .7); border-radius: 999px; background: rgba(230, 205, 140, .16); color: #F1DDB0; font-size: .6rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.ti-tab[aria-selected="true"] .ti-tab__premium { border-color: #C9A45C; background: linear-gradient(135deg, var(--ti-emas-1), var(--ti-emas-2)); color: var(--ti-emas-teks); }
.ti-keterangan__status--premium { background: linear-gradient(135deg, #F7EBC8, #E6CD8C) !important; color: #5C4511; box-shadow: 0 0 0 1px #C9A45C; }
.ti-lencana--premium { background: linear-gradient(135deg, var(--ti-emas-1), var(--ti-emas-2)); color: var(--ti-emas-teks); box-shadow: 0 0 0 1px #C9A45C; }
.ti-kepala-premium .ti-eyebrow { color: #7A5A1E; }
.ti-kartu-daftar--premium { margin-bottom: .5rem; }
@media (min-width: 1100px) {
  .ti-kartu-daftar--premium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ti-kartu-daftar--premium .ti-kartu__media { grid-template-columns: minmax(0, 1fr) minmax(0, 32%); }
}
/* empat angka di hero: 2 x 2 di HP, satu baris di layar lebar */
.ti-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .ti-angka { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 46rem; } }
/* area sentuh minimal 44 px untuk kontrol galeri */
.ti-tab, .ti-saring, .ti-langkah-galeri, .ti-jenis a { min-height: 44px; }