@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("font/sora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("font/sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("font/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("font/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* otora.id v2 — "Perusahaan AI" (putaran 5 nomor 2, dipilih pemilik 2026-11-03), desain Awan.
   Aturan: satu tingkat wadah (tidak ada kartu di dalam kartu), ikon berdiri sendiri tanpa kotak,
   satu skala sudut (foto/panel 24-28px, tombol kapsul), lebar isi 1520px agar layar lebar terisi.
   Situs sengaja terang saja; warna latar dan teks ditulis eksplisit. */
:root {
  --latar: #FFFFFF; --latar-2: #F5F8FF; --tinta: #172A52; --tinta-2: #3D4E74; --abu: #5F6F94;
  --garis: #E4EBF7; --garis-kuat: #CDD9ED; --aksen: #3A66EA; --aksen-teks: #2F59D6; --aksen-lembut: #EAF1FF; --biru-muda: #DCE7FF;
  --ik-garis: #2F59D6; --ik-isi: #C6D9FF; --tombol-2: #EAF1FF; --tombol-2-teks: #1F3E99;
  --bayang: rgba(53, 103, 240, .28); --kaca-tepi: rgba(53, 103, 240, .09);
  --f-judul: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-teks: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-kode: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h1: 76px; --h1-halaman: 56px; --h2: 46px; --pegas: cubic-bezier(.34, 1.4, .5, 1);
  --lebar: 1520px; --tepi: 56px;
  --nav-pad: 14px 24px 0; --nav-maks: calc(var(--lebar) + 2 * var(--tepi) - 48px); --nav-tinggi: 60px; --kaca-nav: 0;
  color-scheme: light;
}
html.digulir { --nav-maks: 1040px; --nav-tinggi: 56px; --kaca-nav: 1; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--latar); color: var(--tinta); font-family: var(--f-teks); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 600; letter-spacing: -.03em; color: var(--tinta); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.w { max-width: calc(var(--lebar) + 2 * var(--tepi)); margin: 0 auto; padding-left: max(var(--tepi), env(safe-area-inset-left, 0px)); padding-right: max(var(--tepi), env(safe-area-inset-right, 0px)); }
.lompat { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: #FFFFFF; font-weight: 600; }
.lompat:focus { top: 12px; }
.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ik-besar { width: 48px; height: 48px; flex: none; fill: none; color: var(--ik-garis); stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.label { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--f-teks); color: var(--aksen-teks); }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; font: 600 15.5px/1 var(--f-teks); white-space: nowrap; cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .25s ease; }
.tombol:hover { transform: translateY(-1px); }
.tombol:active { transform: translateY(1px) scale(.98); }
.tombol .ik { width: 18px; height: 18px; }
.tombol--utama { background: var(--aksen); color: #FFFFFF; box-shadow: 0 12px 24px -14px var(--bayang); }
.tombol--utama:hover { background: #2F5BDE; }
.tombol--lembut { background: var(--tombol-2); color: var(--tombol-2-teks); box-shadow: inset 0 0 0 1px var(--garis); }
.tombol--kecil { min-height: 40px; padding: 0 18px; font-size: 14px; }
.tautan-panah { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; color: var(--aksen-teks); }
.tautan-panah .ik { width: 18px; height: 18px; transition: transform .2s ease; }
.tautan-panah:hover .ik { transform: translateX(3px); }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- kaca cair (perkiraan web: backdrop-filter, tepi berkilau, kilap bergeser saat digulir) ---------- */
.kaca { position: relative; isolation: isolate; }
.kaca::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, var(--ka1, .78)), rgba(246, 249, 255, var(--ka2, .62))); -webkit-backdrop-filter: blur(var(--kb, 20px)) saturate(170%); backdrop-filter: blur(var(--kb, 20px)) saturate(170%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 0 0 1px var(--kaca-tepi), 0 18px 40px -24px var(--bayang); }
.kaca::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .65) 48%, rgba(255, 255, 255, 0) 60%) no-repeat; background-size: 320% 100%; background-position: calc(100% - var(--gulir, 0) * 100%) 0; opacity: .7; }
@media (prefers-reduced-transparency: reduce) { .kaca::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; } }

/* ---------- kepala & menu ---------- */
.kepala { position: sticky; top: 0; z-index: 30; height: 88px; margin-bottom: -88px; padding: var(--nav-pad); padding-top: calc(14px + env(safe-area-inset-top, 0px)); pointer-events: none; }
.kepala__bar { pointer-events: auto; display: flex; align-items: center; gap: 20px; height: var(--nav-tinggi); max-width: var(--nav-maks); min-width: fit-content; margin: 0 auto; padding: 0 10px 0 22px; border-radius: 999px; --ka1: .84; --ka2: .72; --kb: 22px; transition: max-width .8s var(--pegas), height .55s var(--pegas); }
.kepala__bar::before { opacity: var(--kaca-nav); transition: opacity .45s ease; }
.kepala__bar::after { opacity: calc(var(--kaca-nav) * .7); transition: opacity .45s ease; }
.logo { display: inline-flex; align-items: center; gap: .42em; color: var(--tinta); font-size: 20px; flex: none; }
.logo svg { width: 1.45em; height: 1.45em; flex: none; overflow: visible; }
.logo .kata { font: 600 1.06em/1 var(--f-judul); letter-spacing: -.045em; display: inline-block; max-width: 4.2em; overflow: hidden; transition: max-width .5s var(--pegas), opacity .3s ease; }
html.digulir .kepala .logo { gap: 0; }
html.digulir .kepala .logo .kata { max-width: 0; opacity: 0; }
.menu { display: flex; align-items: center; gap: 2px; height: 100%; margin: 0 auto; }
.menu__link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--tinta-2); font: 500 15px/1 var(--f-teks); cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.menu__link:hover, .menu__item.buka > .menu__link { background: rgba(53, 103, 240, .08); color: var(--tinta); }
.menu__link[aria-current="page"] { color: var(--tinta); font-weight: 700; }
.menu__link .ik { width: 15px; height: 15px; transition: transform .25s ease; }
.menu__item.buka > .menu__link .ik { transform: rotate(180deg); }
.menu__item { position: relative; height: 100%; display: flex; align-items: center; }
.menu__item--mega { position: static; }
.turun { position: absolute; top: calc(100% + 10px); left: 50%; width: 330px; padding: 10px; border-radius: 22px; --ka1: .96; --ka2: .92; --kb: 26px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98); transform-origin: top center; transition: opacity .22s ease, transform .35s var(--pegas), visibility 0s linear .22s; }
.menu__item.buka > .turun { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .22s ease, transform .35s var(--pegas), visibility 0s; }
.turun a { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 11px 14px; border-radius: 14px; transition: background-color .2s ease; }
.turun a:hover { background: rgba(53, 103, 240, .07); }
.turun a .ik { grid-row: span 2; width: 22px; height: 22px; color: var(--aksen-teks); margin-top: 1px; }
.turun a b { font: 600 15px/1.3 var(--f-teks); color: var(--tinta); }
.turun a span { font-size: 13.5px; line-height: 1.45; color: var(--abu); }
.turun--mega { width: min(780px, calc(100vw - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2px; padding: 12px; border-radius: 26px; }
.mega-samping { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; gap: 10px; margin-left: 10px; padding: 12px 8px 12px 22px; border-left: 1px solid var(--garis); }
.mega-samping b { font: 600 16px/1.35 var(--f-judul); letter-spacing: -.015em; color: var(--tinta); }
.mega-samping p { font-size: 14px; line-height: 1.5; color: var(--abu); }
.mega-samping .tautan-panah { margin-top: auto; font-size: 14.5px; }
.kepala__aksi { display: flex; align-items: center; gap: 10px; flex: none; }
.bahasa { display: inline-flex; align-items: center; gap: 2px; font: 600 13.5px/1 var(--f-teks); color: var(--tinta-2); }
.bahasa a { padding: 8px 6px; }
.bahasa a[aria-current="true"] { color: var(--aksen-teks); }
.bahasa span { opacity: .5; }
.burger { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; }
.burger .ik { width: 24px; height: 24px; }
.laci { pointer-events: auto; position: absolute; top: calc(var(--nav-tinggi) + 24px); left: 12px; right: 12px; max-height: calc(100vh - 110px); overflow: auto; padding: 10px 14px 14px; border-radius: 26px; --ka1: .97; --ka2: .94; --kb: 28px; }
.laci details { border-bottom: 1px solid var(--garis); }
.laci summary, .laci > a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 6px; font: 600 16px/1 var(--f-teks); cursor: pointer; list-style: none; }
.laci summary::-webkit-details-marker { display: none; }
.laci summary .ik { transition: transform .2s ease; }
.laci details[open] summary .ik { transform: rotate(180deg); }
.laci details a { display: block; padding: 10px 6px 10px 18px; color: var(--tinta-2); font-size: 15px; }
.laci details[open] { padding-bottom: 8px; }
.laci > a:not(.tombol) { border-bottom: 1px solid var(--garis); }
.laci .laci__bahasa { display: flex; gap: 18px; padding: 16px 6px 4px; font-weight: 600; color: var(--tinta-2); }
.laci .laci__bahasa a[aria-current="true"] { color: var(--aksen-teks); }
.laci .tombol { display: flex; width: 100%; margin-top: 14px; }

/* ---------- panel contoh (obrolan agen, inbox): satu panel kaca, baris dipisah garis ---------- */
.panel { width: 100%; max-width: 400px; padding: 18px 20px 14px; border-radius: 24px; --ka1: .8; --ka2: .64; --kb: 22px; }
.panel__kepala { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; font-size: 13px; color: var(--abu); }
.panel__kepala b { color: var(--tinta); font: 600 15px/1.2 var(--f-teks); margin-right: auto; }
.panel__kepala .avatar + div { display: grid; gap: 2px; margin-right: auto; }
.panel__kepala .avatar + div b { margin: 0; }
.panel__kepala small { font-size: 12.5px; color: var(--abu); }
.titik-hidup { width: 8px; height: 8px; border-radius: 50%; background: #22A06B; box-shadow: 0 0 0 4px rgba(34, 160, 107, .16); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; flex: none; box-shadow: 0 2px 6px rgba(53, 103, 240, .18); }
.avatar svg { width: 20px; height: 20px; overflow: visible; }
.obrolan__isi { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(20, 36, 74, .08); }
.gel { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.gel--masuk { justify-self: start; background: #FFFFFF; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(20, 36, 74, .08); }
.gel--ai { justify-self: end; background: var(--aksen-lembut); color: var(--tinta); border-bottom-right-radius: 6px; }
.gel--ai u { text-decoration-color: var(--aksen); text-underline-offset: 2px; color: var(--aksen-teks); }
.aksi-agen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--aksen-teks); }
.aksi-agen span { display: inline-flex; align-items: center; gap: 5px; }
.aksi-agen .ik { width: 15px; height: 15px; stroke-width: 2; }
.inbox { max-width: 440px; padding-bottom: 6px; }
.inbox ul { list-style: none; margin: 0; padding: 0; }
.inbox li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(20, 36, 74, .08); }
.inbox li > .ik { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #FFFFFF; color: var(--aksen-teks); box-shadow: 0 1px 3px rgba(20, 36, 74, .1); }
.inbox li div { display: grid; gap: 2px; min-width: 0; }
.inbox li b { font-size: 14.5px; }
.inbox li div span { font-size: 13.5px; color: var(--abu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font: 600 12px/1 var(--f-teks); font-style: normal; color: var(--aksen-teks); white-space: nowrap; }
.status--cs { color: #A44F0A; }

/* ---------- pembuka beranda ---------- */
.pembuka { padding: 148px 0 28px; background: radial-gradient(60% 55% at 90% 0%, #D6E4FF 0%, rgba(214, 228, 255, 0) 70%), radial-gradient(45% 50% at 0% 25%, #EAF1FF 0%, rgba(234, 241, 255, 0) 70%), linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 78%); }
.pembuka__atas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 72px; align-items: end; }
.pembuka h1 { font-size: var(--h1); line-height: 1.02; letter-spacing: -.04em; margin-top: 18px; }
.pembuka h1 em { font-style: normal; color: var(--aksen); }
.pembuka__samping > p { font-size: 18.5px; color: var(--tinta-2); }
.pembuka__samping .baris-tombol { margin-top: 26px; }
.pembuka__foto { position: relative; margin-top: 60px; }
.pembuka__foto > img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 28px; }
.pembuka__foto > .kaca { position: absolute; right: 28px; bottom: -36px; }

/* ---------- kepala halaman (selain beranda) ---------- */
.kepala-halaman { padding: 148px 0 64px; background: radial-gradient(55% 70% at 92% 0%, #D6E4FF 0%, rgba(214, 228, 255, 0) 70%), radial-gradient(40% 60% at 0% 20%, #EEF4FF 0%, rgba(238, 244, 255, 0) 70%), linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%); }
.kepala-halaman h1 { font-size: var(--h1-halaman); line-height: 1.06; letter-spacing: -.035em; margin-top: 16px; max-width: 22ch; }
.kepala-halaman .pengantar { font-size: 19px; color: var(--tinta-2); margin-top: 20px; max-width: 64ch; }
.remah { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--abu); margin-bottom: 26px; }
.remah a { color: var(--tinta-2); font-weight: 600; }
.remah a:hover { color: var(--aksen-teks); }
.lompat-bagian { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 30px; font-weight: 600; font-size: 15px; }
.lompat-bagian a { color: var(--aksen-teks); display: inline-flex; align-items: center; gap: 6px; }
.lompat-bagian .ik { width: 16px; height: 16px; transform: rotate(90deg); }

/* ---------- strip saluran & model ---------- */
.strip { padding-block: 60px 0; }
.strip .w { display: grid; }
.strip__baris { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px 32px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--garis); }
.strip__baris:last-child { border-bottom: 0; }
.strip__baris p { font-size: 14.5px; color: var(--abu); }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.strip li { font: 600 16.5px/1.3 var(--f-judul); letter-spacing: -.02em; color: var(--tinta-2); }

/* ---------- bagian umum ---------- */
.bagian { padding-block: 112px; }
.bagian--muda { background: var(--latar-2); }
.bagian--rapat { padding-top: 24px; }
.kepala-bagian { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 72px; align-items: end; margin-bottom: 60px; }
.kepala-bagian h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; max-width: 20ch; }
.kepala-bagian > p { color: var(--abu); font-size: 17px; max-width: 48ch; }
.kepala-bagian > .tautan-panah { justify-self: end; }
.teks-pengantar { color: var(--abu); font-size: 17px; max-width: 50ch; margin-top: 18px; }
.cek { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.cek li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; color: var(--tinta-2); }
.cek li .ik { width: 22px; height: 22px; color: var(--aksen); }
.cek li b { color: var(--tinta); }
.kaki-bagian { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--garis); color: var(--abu); font-size: 15.5px; }

/* siapa kami */
.siapa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.siapa h2 { font-size: calc(var(--h2) + 4px); line-height: 1.1; margin-top: 16px; max-width: 22ch; }
.siapa img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 28px; }
.fakta-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 32px 0 0; }
.fakta-4 div { padding: 14px 0; border-top: 1px solid var(--garis); }
.fakta-4 dt { font-size: 13.5px; color: var(--abu); }
.fakta-4 dd { margin: 4px 0 0; font-weight: 600; font-size: 15.5px; color: var(--tinta); }

/* agen & inbox */
.agen { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.agen h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; max-width: 20ch; }
.agen__visual { position: relative; }
.agen__visual > img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 28px; }
.agen__visual > .kaca { position: absolute; left: 24px; bottom: 24px; }
.agen--balik .agen__visual { order: -1; }
.agen--balik .agen__visual > .kaca { left: auto; right: 24px; }

/* aksi agen */
.aksi { background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%); }
.aksi .w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.aksi h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; }
.aturan-daftar { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.aturan { display: grid; grid-template-columns: 112px minmax(0, 1fr) 20px minmax(0, 1fr) 40px; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--garis); }
.aturan__tag { font: 600 13.5px/1.3 var(--f-teks); color: var(--aksen-teks); }
.aturan p { font-size: 15.5px; line-height: 1.45; color: var(--tinta); }
.aturan p b { display: block; font: 500 12.5px/1 var(--f-teks); color: var(--abu); margin-bottom: 6px; }
.aturan > .ik { width: 18px; height: 18px; color: var(--abu); }
.saklar { width: 40px; height: 24px; border-radius: 999px; background: var(--aksen); position: relative; }
.saklar::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20, 36, 74, .25); }

/* gateway */
.gateway { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.gateway h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; max-width: 16ch; }
.fitur { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.fitur li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.fitur .ik-besar { width: 40px; height: 40px; grid-row: span 2; }
.fitur b { font: 600 17px/1.3 var(--f-judul); letter-spacing: -.015em; }
.fitur span { color: var(--abu); font-size: 15px; }
.gateway__kanan { display: grid; gap: 24px; }
.kode-latar { position: relative; border-radius: 28px; overflow: hidden; padding: 40px; isolation: isolate; }
.kode-latar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.kode { margin: 0; border-radius: 20px; --ka1: .9; --ka2: .82; --kb: 18px; }
.kode figcaption { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(20, 36, 74, .08); font: 500 12.5px/1.3 var(--f-kode); color: var(--abu); }
.kode figcaption i { width: 9px; height: 9px; border-radius: 50%; background: var(--garis-kuat); flex: none; }
.kode figcaption span { margin-left: 6px; }
.kode pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font: 400 13.5px/1.7 var(--f-kode); color: var(--tinta); }
.kode .kw { color: #2F59D6; font-weight: 600; }
.kode .str { color: #0E7A6F; }
.kode .kom { color: #66749A; }
.tabel-gulir { overflow-x: auto; }
.tabel-rute { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabel-rute caption { text-align: left; font: 600 14px/1.3 var(--f-teks); color: var(--abu); padding-bottom: 10px; }
.tabel-rute th { text-align: left; font: 600 13px/1.3 var(--f-teks); color: var(--abu); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--garis-kuat); }
.tabel-rute td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--garis); color: var(--tinta); }
.tabel-rute td:first-child { color: var(--tinta-2); }
.tabel-rute td + td { font-weight: 600; }
.catatan-akses { display: flex; gap: 12px; align-items: flex-start; margin-top: 32px; padding: 16px 20px; border-radius: 18px; background: var(--aksen-lembut); font-size: 15px; color: var(--tinta-2); max-width: 60ch; }
.catatan-akses .ik { color: var(--aksen-teks); margin-top: 2px; }

/* orbit integrasi */
.integrasi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.integrasi h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; }
.hub { width: 100%; height: auto; display: block; overflow: visible; max-width: 760px; margin-left: auto; }
.hub text { font-family: var(--f-teks); font-size: 14px; font-weight: 600; fill: var(--tinta); }
.hub .luar text { font-weight: 500; fill: var(--tinta-2); }
.hub .simpul rect, .hub .luar rect { fill: #FFFFFF; }
.hub .simpul, .hub .luar { filter: drop-shadow(0 6px 14px rgba(53, 103, 240, .12)); }
.hub .orbit-dalam { fill: none; stroke: var(--garis-kuat); stroke-width: 1.2; }
.hub .orbit-luar { fill: none; stroke: var(--garis-kuat); stroke-width: 1.2; stroke-dasharray: 3 7; }
.hub .halo { fill: var(--biru-muda); opacity: .55; }
.hub .inti { fill: var(--aksen); }
.hub .inti-teks { fill: #FFFFFF; font-family: var(--f-judul); font-weight: 600; font-size: 14px; }
.hub .satelit { transform-box: view-box; transform-origin: 280px 220px; animation: edar 18s linear infinite; }
.hub .satelit--2 { animation-duration: 30s; animation-direction: reverse; }
.hub .satelit circle { fill: var(--aksen); }
@keyframes edar { to { transform: rotate(360deg); } }
.hub-ringkas { display: none; }

/* sistem bisnis */
.sistem { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 64px; }
.sistem li { display: flex; flex-direction: column; gap: 12px; }
.sistem .ik-besar { margin-bottom: 8px; }
.sistem h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.sistem p { color: var(--abu); font-size: 16px; }

/* komitmen / prinsip */
.alasan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; }
.alasan li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 20px; padding: 30px 0; border-top: 1px solid var(--garis-kuat); }
.alasan .ik-besar { width: 44px; height: 44px; grid-row: span 2; }
.alasan h3 { font-size: 21px; letter-spacing: -.02em; }
.alasan p { color: var(--abu); font-size: 16px; max-width: 54ch; }

/* industri (ringkas) */
.industri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.industri img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; transition: transform .8s var(--pegas); }
.industri article:hover img { transform: translateY(-4px); }
.industri h3 { font-size: 20px; letter-spacing: -.02em; margin-top: 20px; }
.industri h3 a:hover { color: var(--aksen-teks); }
.industri p { color: var(--abu); font-size: 15.5px; margin-top: 8px; }

/* proses */
.proses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.proses > div { padding-top: 22px; border-top: 2px solid var(--biru-muda); }
.proses > div:first-child { border-top-color: var(--aksen); }
.proses span { font: 600 15px/1 var(--f-judul); color: var(--aksen-teks); }
.proses h3 { font-size: 20px; margin: 16px 0 8px; letter-spacing: -.02em; }
.proses p { color: var(--abu); font-size: 15.5px; }

/* wawasan */
.wawasan { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
.tulisan { display: flex; flex-direction: column; gap: 14px; }
.tulisan img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 24px; transition: transform .8s var(--pegas); }
.tulisan:hover img { transform: translateY(-4px); }
.tulisan:hover h3 { color: var(--aksen-teks); }
.tulisan h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.025em; transition: color .2s ease; }
.tulisan p { color: var(--abu); font-size: 16px; max-width: 60ch; }
.tulisan__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--abu); }
.kat { font-weight: 600; font-size: 13.5px; color: var(--aksen-teks); }
.wawasan__daftar { display: grid; align-content: start; }
.wawasan__daftar .tulisan { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 22px; align-items: start; padding-block: 26px; border-top: 1px solid var(--garis); }
.wawasan__daftar .tulisan:first-child { padding-top: 0; border-top: 0; }
.wawasan__daftar .tulisan img { aspect-ratio: 4/3; border-radius: 18px; }
.wawasan__daftar .tulisan > div { display: grid; gap: 8px; }
.wawasan__daftar .tulisan h3 { font-size: 19px; line-height: 1.3; }

/* ajakan kontak */
.kontak { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.kontak h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; max-width: 18ch; }
.kontak__daftar { list-style: none; margin: 30px 0 0; padding: 0; display: grid; max-width: 460px; }
.kontak__daftar li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--garis); font-size: 16px; color: var(--tinta); }
.kontak__daftar a:hover { color: var(--aksen-teks); }
.kontak__daftar .ik { color: var(--aksen); }
.kontak__daftar small { display: block; font-size: 13px; color: var(--abu); }
.kontak > img { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: 28px; }

/* halaman layanan */
.rinci { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; padding-block: 72px; border-top: 1px solid var(--garis); scroll-margin-top: 80px; }
.rinci:first-child { border-top: 0; padding-top: 0; }
.rinci h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.03em; margin-top: 20px; }
.rinci__kiri > p { color: var(--abu); font-size: 17px; margin-top: 16px; max-width: 46ch; }
.rinci__kanan { display: grid; gap: 32px; align-content: start; }
.rinci__kanan h3 { font: 600 15px/1.3 var(--f-teks); letter-spacing: 0; color: var(--abu); margin-bottom: 12px; }
.rinci__kanan .cek { margin-top: 0; }
.rinci__kanan .contoh { padding-left: 20px; border-left: 2px solid var(--biru-muda); color: var(--tinta-2); font-size: 16px; }
.rinci__kanan .hub { max-width: 620px; margin-left: 0; }
.rinci__kanan .sistem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.rinci__kanan .sistem .ik-besar { width: 40px; height: 40px; margin-bottom: 2px; }
.rinci__kanan .sistem h3 { font: 600 18px/1.3 var(--f-judul); color: var(--tinta); margin: 0; letter-spacing: -.015em; }
.rinci__kanan .sistem p { font-size: 15px; }
.teknologi { display: flex; flex-wrap: wrap; gap: 10px 32px; list-style: none; margin: 0; padding: 0; font: 600 16px/1.4 var(--f-judul); letter-spacing: -.015em; color: var(--tinta-2); }

/* halaman industri */
.sektor { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; padding-block: 64px; scroll-margin-top: 80px; }
.sektor + .sektor { border-top: 1px solid var(--garis); }
.sektor:nth-child(even) > img { order: 2; }
.sektor > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 28px; }
.sektor h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.03em; margin-top: 16px; }
.sektor > div > p { color: var(--abu); font-size: 17px; margin-top: 16px; }
.sektor__kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 30px; }
.sektor__kolom h3 { font: 600 15px/1.3 var(--f-teks); letter-spacing: 0; color: var(--abu); }
.titik-daftar { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--tinta-2); }
.titik-daftar li { display: flex; gap: 10px; align-items: baseline; }
.titik-daftar li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--aksen); flex: none; transform: translateY(-2px); }

/* halaman tentang */
.profil { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.profil .prosa { max-width: 64ch; }
.profil img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 28px; }
.visi-misi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
.visi-misi h2 { font-size: 32px; letter-spacing: -.03em; margin-top: 14px; }
.visi-misi p { font-size: 19px; line-height: 1.55; color: var(--tinta-2); margin-top: 16px; max-width: 36ch; }
.visi-misi ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; font-size: 17px; color: var(--tinta-2); }
.visi-misi li::marker { color: var(--aksen-teks); font-weight: 700; }
.legal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.legal h2 { font-size: var(--h2); line-height: 1.1; margin-top: 16px; }
.tabel-data { margin: 0; border-top: 1px solid var(--garis); }
.tabel-data div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--garis); }
.tabel-data dt { color: var(--abu); font-size: 15px; }
.tabel-data dd { margin: 0; font-weight: 600; font-size: 15.5px; color: var(--tinta); overflow-wrap: anywhere; }

/* halaman kontak */
.saluran { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.saluran li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--garis); }
.saluran .ik { width: 26px; height: 26px; color: var(--aksen); }
.saluran b { display: block; font: 600 17px/1.3 var(--f-judul); letter-spacing: -.015em; }
.saluran span { color: var(--abu); font-size: 15px; }
.saluran .nilai { color: var(--tinta); font-weight: 600; font-size: 16px; }
.saluran .tautan-panah .ik, .saluran .tombol .ik { width: 18px; height: 18px; color: inherit; }
.kontak-hal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.kontak-hal img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 28px; }
.sertakan { margin-top: 48px; }
.judul-kecil { font-size: 20px; letter-spacing: -.02em; }
.sertakan .cek { margin-top: 18px; }
.langkah { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: langkah; }
.langkah li { padding-top: 22px; border-top: 2px solid var(--biru-muda); counter-increment: langkah; }
.langkah li:first-child { border-top-color: var(--aksen); }
.langkah li::before { content: "0" counter(langkah); font: 600 15px/1 var(--f-judul); color: var(--aksen-teks); }
.langkah h3 { font-size: 20px; margin: 16px 0 8px; letter-spacing: -.02em; }
.langkah p { color: var(--abu); font-size: 15.5px; }

/* ---------- artikel & teks panjang ---------- */
.prosa { font-size: 17.5px; line-height: 1.75; color: var(--tinta-2); }
.prosa > * + * { margin-top: 18px; }
.prosa h2 { font-size: 27px; line-height: 1.25; letter-spacing: -.025em; margin-top: 48px; scroll-margin-top: 100px; color: var(--tinta); }
.prosa h2:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 22px; display: grid; gap: 8px; }
.prosa li::marker { color: var(--aksen); font-weight: 600; }
.prosa a { color: var(--aksen-teks); text-decoration: underline; text-underline-offset: 3px; }
.prosa strong { color: var(--tinta); }
.prosa blockquote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--aksen); font: 500 23px/1.4 var(--f-judul); letter-spacing: -.02em; color: var(--tinta); }
.prosa .catatan { padding: 18px 22px; border-radius: 18px; background: var(--aksen-lembut); font-size: 16px; color: var(--tinta-2); }
.artikel-kepala { max-width: 900px; }
.artikel-kepala h1 { font-size: 50px; line-height: 1.1; letter-spacing: -.035em; margin-top: 16px; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; }
.penulis { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--aksen-lembut); color: var(--tinta); }
.penulis svg { width: 24px; height: 24px; overflow: visible; }
.artikel-meta > div { display: grid; gap: 2px; font-size: 14px; color: var(--abu); margin-right: auto; }
.artikel-meta b { color: var(--tinta); font-size: 15px; }
.artikel-foto { margin: 0; }
.artikel-foto img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 28px; }
.artikel-tubuh { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 64px; align-items: start; margin-top: 56px; padding-bottom: 112px; }
.artikel-tubuh .prosa { max-width: 70ch; }
.daftar-isi { position: sticky; top: 104px; font-size: 14px; }
.daftar-isi b { font-size: 13.5px; color: var(--abu); font-weight: 600; }
.daftar-isi ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; border-left: 2px solid var(--garis); }
.daftar-isi a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--abu); line-height: 1.4; }
.daftar-isi a:hover { color: var(--tinta); border-left-color: var(--aksen); }
.artikel-samping { position: sticky; top: 104px; display: grid; gap: 28px; }
.kotak-ajak { padding: 24px; border-radius: 24px; background: var(--aksen-lembut); }
.kotak-ajak b { font: 600 18px/1.35 var(--f-judul); letter-spacing: -.015em; color: var(--tinta); display: block; }
.kotak-ajak p { font-size: 14.5px; color: var(--tinta-2); margin: 8px 0 18px; }
.terkait > b { font-size: 13.5px; color: var(--abu); font-weight: 600; }
.terkait a { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--garis); font: 600 15px/1.4 var(--f-teks); color: var(--tinta); }
.terkait a:hover { color: var(--aksen-teks); }
.terkait a:first-of-type { margin-top: 6px; }
.terkait a span { font: 500 13px/1.3 var(--f-teks); color: var(--abu); }
.hal-teks { max-width: 780px; padding-bottom: 112px; }
.hal-teks .berlaku { color: var(--abu); font-size: 14.5px; margin-bottom: 36px; }
.galat { min-height: 70vh; display: grid; align-content: center; }

/* kaki */
.kaki { background: var(--latar-2); padding-block: 72px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 15px; color: var(--abu); border-top: 1px solid var(--garis); }
.kaki .w { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.kaki .logo { font-size: 22px; }
.kaki .w > div:first-child p { margin-top: 16px; max-width: 34ch; }
.kaki h2 { font: 600 15px/1.3 var(--f-teks); letter-spacing: 0; color: var(--tinta); margin-bottom: 14px; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kaki a:hover { color: var(--tinta); }
.kaki__bawah { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--garis); font-size: 13.5px; }
.kaki__bawah nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.toast { position: fixed; top: calc(84px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); background: var(--tinta); color: #FFFFFF; font: 500 14px/1.4 var(--f-teks); padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 36, 74, .25); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- layar sedang ---------- */
@media (max-width: 1240px) {
  :root { --tepi: 40px; --h1: 64px; --h2: 40px; }
  html.digulir { --nav-maks: 100%; }
  .menu__link { padding: 0 10px; font-size: 14.5px; }
}

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  :root { --h1: 56px; --h1-halaman: 46px; --h2: 38px; --tepi: 28px; --nav-pad: 12px 16px 0; }
  html.digulir { --nav-maks: 560px; }
  html.digulir .kepala .logo { gap: .42em; }
  html.digulir .kepala .logo .kata { max-width: 4.2em; opacity: 1; }
  .menu, .kepala__aksi > .tombol { display: none; }
  .burger { display: grid; }
  .kepala__aksi { margin-left: auto; }
  .pembuka__atas, .kepala-bagian, .siapa, .agen, .aksi .w, .gateway, .integrasi, .kontak, .rinci, .sektor, .profil, .legal, .kontak-hal, .wawasan { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kepala-bagian > .tautan-panah { justify-self: start; }
  .pembuka__foto > img { aspect-ratio: 16/9; }
  .pembuka__foto > .kaca { right: 16px; bottom: 16px; }
  .siapa img, .profil img, .kontak-hal img { aspect-ratio: 16/10; }
  .agen--balik .agen__visual { order: 0; }
  .sektor:nth-child(even) > img { order: 0; }
  .sistem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
  .industri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .proses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
  .alasan { gap: 0 40px; }
  .visi-misi { gap: 40px; }
  .kaki .w { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaki .w > div:first-child { grid-column: 1 / -1; }
  .artikel-tubuh { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .daftar-isi { display: none; }
  .artikel-samping { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ponsel ---------- */
@media (max-width: 640px) {
  :root { --h1: 40px; --h1-halaman: 36px; --h2: 30px; --tepi: 18px; --nav-pad: 10px 10px 0; }
  html.digulir { --nav-maks: 100%; }
  body { font-size: 16px; }
  .kepala { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .kepala__bar { padding: 0 6px 0 16px; }
  .logo { font-size: 19px; }
  .bahasa { display: none; }
  h1 { text-wrap: pretty; }
  .pembuka { padding-top: 108px; }
  .pembuka__samping > p, .kepala-halaman .pengantar { font-size: 16.5px; }
  .pembuka__foto { margin-top: 36px; }
  .pembuka__foto > img { aspect-ratio: 4/5; border-radius: 24px; }
  .pembuka__foto > .kaca, .agen__visual > .kaca, .agen--balik .agen__visual > .kaca { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .kepala-halaman { padding: 112px 0 44px; }
  .bagian, .otomasi { padding-block: 64px; }
  .kepala-bagian { margin-bottom: 32px; }
  .strip { padding-top: 40px; }
  .strip__baris { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .strip li { font-size: 15px; }
  .strip ul { gap: 6px 18px; }
  .siapa h2 { font-size: 30px; }
  .agen__visual > img { aspect-ratio: 4/5; }
  .fitur { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kode-latar { padding: 14px; border-radius: 22px; }
  .kode pre { font-size: 12px; }
  .hub { display: none; }
  .hub-ringkas { display: grid; gap: 18px; }
  .hub-ringkas .inti-pil { justify-self: start; padding: 10px 16px; border-radius: 999px; background: var(--aksen); color: #FFFFFF; font: 600 15px/1 var(--f-judul); }
  .hub-ringkas small { font-size: 13.5px; font-weight: 600; color: var(--abu); }
  .hub-ringkas ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .hub-ringkas li { padding: 8px 13px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 4px 12px -6px rgba(53, 103, 240, .25); font-size: 14px; font-weight: 500; }
  .aturan { grid-template-columns: minmax(0, 1fr) 40px; gap: 8px 12px; padding: 18px 0; }
  .aturan__tag { grid-column: 1; }
  .aturan .saklar { grid-column: 2; grid-row: 1; justify-self: end; }
  .aturan p, .aturan > .ik { grid-column: 1 / -1; }
  .aturan > .ik { transform: rotate(90deg); }
  .sistem, .rinci__kanan .sistem, .proses, .langkah, .industri, .alasan, .fakta-4, .visi-misi, .sektor__kolom { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .industri img { aspect-ratio: 16/11; }
  .tulisan h3 { font-size: 22px; }
  .wawasan__daftar .tulisan { grid-template-columns: minmax(0, 1fr); }
  .wawasan__daftar .tulisan img { aspect-ratio: 16/10; }
  .rinci { padding-block: 48px; }
  .rinci h2, .sektor h2 { font-size: 28px; }
  .sektor { padding-block: 40px; }
  .tabel-data div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .saluran li { grid-template-columns: 26px minmax(0, 1fr); }
  .saluran li > .tombol, .saluran li > a.tautan-panah { grid-column: 2; justify-self: start; }
  .kaki .w { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .artikel-kepala h1 { font-size: 32px; }
  .artikel-foto img { aspect-ratio: 16/10; }
  .artikel-samping { grid-template-columns: minmax(0, 1fr); }
  .prosa { font-size: 16.5px; }
  .prosa h2 { font-size: 22px; }
  .prosa blockquote { font-size: 19px; }
}