/* ============================================================
   Font dilayani sendiri, bukan dari fonts.googleapis.com.
   Dua permintaan yang memblokir render hilang, dan IP tiap
   pengunjung tidak lagi sampai ke Google.

   Plus Jakarta Sans dibawa sebagai satu berkas variabel 400-800,
   bukan lima berkas statis: 27 KB menggantikan sekitar 100 KB.
   IBM Plex Mono tidak punya versi variabel, jadi tetap per berat.

   unicode-range dipertahankan apa adanya dari Google: browser cuma
   menarik latin-ext kalau halamannya benar-benar memuat hurufnya.
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-var-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-var-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;
}

/* ============================================================
   CITA KELOLA KREASI · Beranda
   Navy institusional · amber sinyal · kertas hangat
   ============================================================ */
:root{
  --kertas:#FAF8F4; --kertas-2:#F2EFE9; --putih:#FFFFFF;
  --garis:#E3DED6; --garis-kuat:#C9C2B8;
  --navy:#1B2550; --navy-dalam:#121A38; --navy-malam:#0C1226;
  --navy-mid:#344580; --navy-kabut:#8E9BC4; --navy-tipis:#EEF1F8;
  --amber:#D98324; --amber-tua:#9A5416; --amber-terang:#E79C46;
  --tinta:#201E1B; --tinta-2:#4A453E; --tinta-3:#7A736A; --tinta-4:#A39B90;
  --hijau:#1E7A4C; --merah:#B3261E;
  --display:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:4px; --r-l:8px; --ease:cubic-bezier(.2,0,0,1);
  --pad:clamp(20px,5vw,44px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--kertas);color:var(--tinta);font-family:var(--display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--navy)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--amber);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:500}
.wrap{max-width:1220px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--amber-tua)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber);flex:0 0 auto}
.sec{padding:clamp(60px,8.5vw,104px) 0;position:relative}
section[id]{scroll-margin-top:88px}
.sec-head{max-width:64ch;display:flex;flex-direction:column;gap:16px}
.sec-head h2{font-size:clamp(28px,4.2vw,44px)}
.sec-head p{color:var(--tinta-2);font-size:clamp(15px,1.6vw,17.5px);max-width:58ch}

/* --- tombol --- */
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;padding:13px 20px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:background 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-tua);border-color:var(--amber-tua)}
.btn-outline{background:var(--putih);border-color:var(--garis-kuat);color:var(--navy)}
.btn-outline:hover{border-color:var(--navy-mid);background:var(--navy-tipis)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-dalam);border-color:var(--navy-dalam)}
.btn-l{padding:15px 26px;font-size:15.5px}

/* --- header --- */
header{position:sticky;top:0;z-index:60;background:rgba(250,248,244,.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color 200ms var(--ease),background 200ms var(--ease)}
header.tersangkut{border-bottom-color:var(--garis);background:rgba(250,248,244,.95)}
.bar{display:flex;align-items:center;gap:22px;height:70px}
.merek{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto}
.merek .wm{font-weight:500;font-size:18px;letter-spacing:-.03em;color:var(--tinta);white-space:nowrap}
/* Garis tipis memisahkan nama perusahaan dari navigasi. Tanpa itu keduanya
   terbaca sebagai satu deret tautan yang panjang. */
.pisah-head{width:1px;height:20px;background:var(--garis);flex:0 0 auto}
nav.utama{display:flex;gap:22px}
nav.utama a{font-size:14px;font-weight:500;color:var(--tinta-2);padding:5px 0;border-bottom:2px solid transparent;transition:color 140ms var(--ease),border-color 140ms var(--ease)}
nav.utama a:hover{color:var(--navy);border-bottom-color:var(--garis-kuat)}
/* Bagian yang sedang dibaca ditandai amber: di halaman satu gulungan dengan
   lima anchor, tanpa penanda ini navigasinya tidak pernah memberi tahu posisi. */
nav.utama a.aktif{color:var(--navy);border-bottom-color:var(--amber)}
.aksi-head{margin-left:auto;display:flex;align-items:center;gap:18px}
/* Penukar bahasa tanpa kotak: dua benda berbingkai bersebelahan membuat
   tombol ajakan kehilangan statusnya sebagai satu-satunya aksi di bar. */
.bahasa{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tinta-4);white-space:nowrap}
.bahasa b{color:var(--navy);font-weight:600}
.bahasa:hover{color:var(--tinta-2)}
/* Lebih kecil daripada tombol kembarannya di hero — di bar 70px, ukuran
   bawaan .btn tumbuh jadi 45px dan menjadi objek terbesar di sana. */
.aksi-head .btn{padding:9px 15px;font-size:13.5px}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--garis);border-radius:var(--r);background:var(--putih);cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:var(--navy);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--navy)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.laci{display:none;border-top:1px solid var(--garis);background:var(--kertas);padding:14px var(--pad) 22px}
.laci.buka{display:block}
.laci a{display:block;padding:11px 0;border-bottom:1px solid var(--garis);font-weight:600;color:var(--navy)}

/* --- hero --- */
.hero{border-bottom:1px solid var(--garis);background-color:var(--kertas)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,64px);align-items:center;padding-top:clamp(52px,7vw,88px);padding-bottom:clamp(52px,7vw,88px)}
.hero-kiri{display:flex;flex-direction:column;gap:22px}
.status-pil{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--putih);border:1px solid var(--garis);border-radius:999px;padding:6px 14px 6px 10px}
.titik-hidup{width:7px;height:7px;border-radius:999px;background:var(--hijau);box-shadow:0 0 0 3px rgba(30,122,76,.16)}
.status-pil .mono{color:var(--tinta-2);font-size:10.5px}
h1{font-size:clamp(34px,5.4vw,58px);max-width:17ch}
h1 .sorot{white-space:nowrap;background-image:linear-gradient(transparent 52%,rgba(217,131,36,.34) 52%,rgba(217,131,36,.34) 96%,transparent 96%);background-repeat:no-repeat;background-size:0% 100%;animation:coret 900ms var(--ease) 420ms forwards}
@keyframes coret{to{background-size:100% 100%}}
.hero-sub{font-size:clamp(15.5px,1.8vw,18px);line-height:1.62;color:var(--tinta-2);max-width:48ch}
.tegas{border-left:3px solid var(--amber);padding:10px 0 10px 16px;font-size:15px;line-height:1.55;color:var(--tinta);max-width:46ch;font-weight:600;letter-spacing:-.01em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}

/* --- konsol (kutipan langsung dari kover profil) --- */
.konsol{background:var(--navy-dalam);border:1px solid #253158;border-radius:var(--r-l);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(18,26,56,.1),0 14px 34px -14px rgba(18,26,56,.42)}
.konsol-top{display:flex;align-items:center;gap:9px}
.konsol-top .mono{color:var(--navy-kabut);font-size:9.5px}
.konsol-top .mono.kanan{margin-left:auto;color:var(--amber-terang)}
.denyut{width:6px;height:6px;border-radius:999px;background:var(--amber);animation:denyut 2.4s var(--ease) infinite}
@keyframes denyut{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(217,131,36,.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(217,131,36,0)}}
.grafik{display:flex;align-items:flex-end;gap:5px;height:86px}
.grafik i{flex:1;background:var(--navy-mid);border-radius:1px 1px 0 0;transition:height 900ms var(--ease)}
.grafik i.panas{background:var(--amber)}
.konsol-sumber{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid #253158}
.konsol-sumber .mono{color:var(--navy-kabut);font-size:9px}
.konsol-sumber .mono.kanan{margin-left:auto;color:var(--amber-terang)}
.konsol-metrik{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.konsol-metrik div{display:flex;flex-direction:column;gap:4px}
.konsol-metrik .mono{color:var(--navy-kabut);font-size:9px;letter-spacing:.1em}
.konsol-metrik b{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.catatan-konsol{margin-top:10px;font-size:11px;color:var(--tinta-3);text-align:right;font-family:var(--mono);letter-spacing:.06em}

/* rel simpul — motif logo, dipakai sebagai pembatas */
.rel-simpul{position:relative;display:flex;align-items:center;justify-content:space-between;height:14px;margin-top:4px}
.rel-simpul::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:#26325C}
.rel-simpul i{position:relative;z-index:1;width:7px;height:7px;border-radius:999px;background:var(--navy-mid)}
.rel-simpul i.ujung{width:9px;height:9px;background:var(--amber)}
.rel-simpul i.tengah{width:11px;height:11px;background:#fff}
.rel-label{display:flex;justify-content:space-between;margin-top:8px}
.rel-label .mono{font-size:9px;color:var(--navy-kabut)}

/* --- klien --- */
.klien{background:var(--putih);border-bottom:1px solid var(--garis);--logo-dasar:42px;--logo-kotak:50px}
.klien .wrap{padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(44px,6vw,64px)}
.klien-intro{max-width:56ch;margin-bottom:34px;display:flex;flex-direction:column;gap:12px}
.klien-intro p{font-size:clamp(15px,1.6vw,17px);color:var(--tinta-2);line-height:1.6}
.grup-head{display:flex;align-items:center;gap:16px;margin:0 0 16px;flex-wrap:wrap}
.grup-head .mono{color:var(--tinta-3);white-space:nowrap}
.grup-head .garis{flex:1;height:1px;background:var(--garis);min-width:30px}
.logo-baris{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:30px}
.logo-baris.delapan{grid-template-columns:repeat(4,1fr);margin-bottom:0}
.slot{display:grid;grid-template-rows:var(--logo-kotak) auto;justify-items:center;align-items:center;gap:11px;padding:14px 8px}
.slot img{height:calc(var(--logo-dasar) * var(--k,1));width:auto;max-width:100%;object-fit:contain}
.slot .nama{font-size:11.5px;line-height:1.3;text-align:center;color:var(--tinta-2);align-self:start;font-weight:500}

/* --- tentang --- */
.tentang{background:var(--kertas)}
.tentang-atas{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);margin-top:clamp(28px,4vw,42px);align-items:start}
.tentang-atas .naskah{font-size:clamp(15.5px,1.7vw,17px);line-height:1.68;color:var(--tinta-2)}
.kutipan{margin-top:22px;border-left:3px solid var(--amber);padding:12px 0 12px 18px;font-size:15px;line-height:1.58;color:var(--tinta);font-weight:600;letter-spacing:-.01em}
.visi{background:var(--navy);color:#fff;border-radius:var(--r-l);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:14px}
.visi .mono{color:var(--amber-terang);font-size:10px}
.visi p{font-size:clamp(18px,2.2vw,23px);font-weight:800;line-height:1.26;letter-spacing:-.03em;color:#fff}
.visi .rel-simpul{margin-top:auto;padding-top:6px}

.blok-label{display:flex;align-items:center;gap:16px;margin:clamp(42px,6vw,64px) 0 20px}
.blok-label .mono{color:var(--tinta-3);white-space:nowrap}
.blok-label .mono:last-child{white-space:normal;text-align:right;max-width:40%}
.blok-label .garis{flex:1;height:1px;background:var(--garis)}

.grid-misi{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--garis);border-left:1px solid var(--garis)}
.misi{background:var(--putih);padding:clamp(20px,2.8vw,28px);border-right:1px solid var(--garis);border-bottom:1px solid var(--garis);display:flex;flex-direction:column;gap:10px}
.misi .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--amber-tua)}
.misi h3{font-size:18.5px;line-height:1.28}
.misi .lawan{font-size:13px;color:var(--tinta-3);border-top:1px dashed var(--garis);padding-top:11px;margin-top:auto;line-height:1.5}

.grid-nilai{display:grid;grid-template-columns:repeat(4,1fr);background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);overflow:hidden}
.nilai{padding:22px;display:flex;flex-direction:column;gap:11px;border-left:1px solid var(--garis)}
.nilai:first-child{border-left:0}
.ikon{width:40px;height:40px;border-radius:var(--r);background:var(--navy-tipis);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nilai h3{font-size:17px}
.nilai p{font-size:13.5px;line-height:1.58;color:var(--tinta-2)}

/* --- lini layanan --- */
.layanan{background:var(--putih);border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.grid-layanan{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(30px,4vw,46px)}
.lini{border:1px solid var(--garis);border-radius:var(--r-l);padding:clamp(22px,3vw,28px);display:flex;flex-direction:column;gap:14px;background:var(--kertas);transition:border-color 160ms var(--ease),box-shadow 240ms var(--ease)}
.lini:hover{border-color:var(--navy-mid);box-shadow:0 12px 26px -14px rgba(32,30,27,.2)}
.lini-top{display:flex;align-items:flex-start;gap:14px}
.lini h3{font-size:20px;line-height:1.2}
.lini-top .mono{display:block;color:var(--amber-tua);font-size:9.5px;margin-bottom:6px}
.lini > p{font-size:14.5px;line-height:1.6;color:var(--tinta-2)}
.sistem{display:flex;flex-direction:column;gap:0;margin-top:2px;border-top:1px solid var(--garis)}
.sistem > div{padding:14px 0;border-bottom:1px solid var(--garis)}
.sistem > div:last-child{border-bottom:0;padding-bottom:0}
.sistem-nama{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.sistem-nama b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.sistem-nama .mono{font-size:9px;color:var(--tinta-3);letter-spacing:.1em}
.sistem ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.sistem li{display:flex;gap:9px;font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.sistem li::before{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:999px;background:var(--amber);margin-top:8px}
.dampak{font-size:13.5px;line-height:1.55;color:var(--tinta-3);background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);padding:12px 14px;margin-top:auto}
.dampak b{color:var(--tinta-2);font-weight:600}

/* --- studi kasus --- */
.grid-studi{display:flex;flex-direction:column;gap:16px;margin-top:clamp(30px,4vw,46px)}
.studi{display:grid;grid-template-columns:minmax(0,0.7fr) minmax(0,1fr);background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);overflow:hidden;transition:border-color 160ms var(--ease),box-shadow 240ms var(--ease)}
.studi:hover{border-color:var(--navy-mid);box-shadow:0 12px 26px -14px rgba(32,30,27,.24)}
/* Panelnya putih, bukan bertinta: tangkapan SATUCK dan Korlantas membawa latar
   putih halaman aplikasinya sendiri — di atas tinta, keduanya jadi kotak putih. */
.studi-visual{background:var(--putih);border-right:1px solid var(--garis);display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.8vw,24px)}
.studi-gambar{display:block;width:100%;max-width:100%;min-width:0;height:auto}
.studi-badan{display:flex;flex-direction:column;min-width:0}
.studi-atas{padding:20px 22px 18px;border-bottom:1px solid var(--garis);display:flex;flex-direction:column;gap:10px}
.tanda-baris{display:flex;gap:6px;flex-wrap:wrap}
.tanda-baris span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:2px}
.tanda-instansi{background:var(--navy);color:#fff}
.tanda-lini{background:var(--kertas);color:var(--tinta-2);border:1px solid var(--garis)}
.studi h3{font-size:clamp(19px,1.9vw,23px);line-height:1.24}
.studi-meta{color:var(--tinta-3);font-size:9.5px}
.hasil-utama{padding:16px 22px;background:linear-gradient(180deg,#F6FAF7,var(--putih));border-bottom:1px solid var(--garis)}
.hasil-utama .mono{color:var(--hijau);font-size:9.5px;display:block;margin-bottom:5px}
.hasil-utama b{font-size:15.5px;font-weight:700;color:var(--tinta);line-height:1.35;letter-spacing:-.02em;display:block}
.psh{padding:6px 22px 20px}
.psh details{border-bottom:1px solid var(--garis)}
.psh details:last-of-type{border-bottom:0}
.psh summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 0;font-weight:600;font-size:13.5px;color:var(--navy)}
.psh summary::-webkit-details-marker{display:none}
.psh .pin{width:19px;height:19px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:600;flex:0 0 auto}
.pin-p{background:#FBE9E7;color:var(--merah)}
.pin-s{background:var(--navy-tipis);color:var(--navy)}
.pin-h{background:#E4F2EA;color:var(--hijau)}
.psh .chev{margin-left:auto;color:var(--tinta-4);transition:transform 200ms var(--ease)}
.psh details[open] .chev{transform:rotate(180deg)}
.psh .isi{padding:0 0 15px 30px}
.psh .isi p{font-size:13.5px;line-height:1.6;color:var(--tinta-2)}
.psh .isi ul{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:6px}
.psh .isi li{display:flex;gap:8px;font-size:13px;line-height:1.5;color:var(--tinta-3)}
.psh .isi li::before{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:999px;background:var(--garis-kuat);margin-top:7px}

/* --- sertifikasi --- */
.serti{background:var(--kertas-2)}
.grid-serti{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(30px,4vw,44px)}
.kartu-iso{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);padding:clamp(22px,3vw,28px);display:flex;flex-direction:column;gap:16px}
.iso-top{display:flex;align-items:center;gap:14px}
.iso-segel{flex:0 0 auto;height:clamp(52px,6vw,64px);width:auto}
.iso-top b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1.15}
.iso-top .mono{font-size:9px;color:var(--tinta-3);margin-top:5px;display:block}
.kartu-iso > p{font-size:14.5px;line-height:1.6;color:var(--tinta-2)}
.kartu-iso ol{list-style:none;counter-reset:k;display:flex;flex-direction:column;border-top:1px solid var(--garis)}
.kartu-iso li{counter-increment:k;display:grid;grid-template-columns:26px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--garis);font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.kartu-iso li::before{content:"0" counter(k);font-family:var(--mono);font-size:10.5px;color:var(--amber-tua);letter-spacing:.08em;padding-top:2px}
.relevansi{font-size:12.5px;line-height:1.5;color:var(--tinta-3);font-style:normal}
.nomor-serti{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--garis)}
.nomor-serti .mono{font-size:10px;color:var(--tinta-2);letter-spacing:.08em}
.nomor-serti .cap{width:22px;height:22px;border-radius:999px;border:1px solid var(--garis-kuat);display:flex;align-items:center;justify-content:center;color:var(--hijau);flex:0 0 auto}

/* --- ajakan + kontak --- */
.ajakan{background:var(--navy-dalam);color:#fff;position:relative;overflow:hidden}
.ajakan::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 85% 10%,rgba(217,131,36,.15),transparent 68%),radial-gradient(700px 340px at 5% 90%,rgba(52,69,128,.4),transparent 70%);pointer-events:none}
.ajakan .wrap{position:relative;z-index:1}
.ajakan-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:start}
.ajakan h2{color:#fff;font-size:clamp(28px,4.4vw,46px);max-width:16ch;margin-top:16px}
.ajakan .eyebrow{color:var(--amber-terang)}
.ajakan .eyebrow::before{background:var(--amber-terang)}
.ajakan .sub{color:#C3CBE4;font-size:16.5px;line-height:1.62;max-width:48ch;margin-top:18px}
.ajakan .tombol{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.kontak-kotak{background:rgba(255,255,255,.05);border:1px solid #26325C;border-radius:var(--r-l);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:20px}
.kontak-blok .mono{color:var(--amber-terang);font-size:9.5px;display:block;margin-bottom:9px}
.kontak-blok b{display:block;font-size:15.5px;color:#fff;margin-bottom:9px;letter-spacing:-.02em}
.kontak-blok .baris{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#B7C0DC;line-height:1.5;padding:4px 0}
.kontak-blok .baris svg{flex:0 0 auto;margin-top:3px;color:var(--navy-kabut)}
.kontak-blok a.baris:hover{color:#fff}
.pisah{height:1px;background:#26325C}

/* --- footer --- */
footer{background:var(--navy-malam);color:#fff;padding:clamp(44px,6vw,64px) 0 0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,44px);padding-bottom:34px}
.foot-merek{display:flex;flex-direction:column;gap:14px;max-width:34ch}
.foot-merek p{font-size:13.5px;color:#8E9BC4;line-height:1.6}
/* Segel duduk langsung di navy tanpa plat putih: cincin luarnya sudah
   berisi putih, jadi tulisan hitamnya tetap terbaca. */
.foot-iso{display:flex;gap:14px;align-items:center;margin-top:4px}
.foot-iso img{height:52px;width:auto}
.foot-kol{display:flex;flex-direction:column;gap:11px}
.foot-kol .mono{color:#6C7AA8;font-size:9.5px;margin-bottom:2px}
.foot-kol a,.foot-kol span.t{font-size:13.5px;color:#C3CBE4;line-height:1.5}
.foot-kol a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-bawah{border-top:1px solid #1B2444;padding:20px 0 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-bawah .mono{color:#5D6A96;font-size:9.5px}


/* --- proyek: baris ringkas yang bisa dibuka --- */
.sistem-head{display:flex;align-items:center;gap:12px;padding-bottom:2px}
.sistem-head .mono{color:var(--tinta-3);font-size:9.5px}
.sistem-head .garis{flex:1;height:1px;background:var(--garis)}

/* --- fokus layanan: tiga pilar Managed Service --- */
.fokus{display:flex;flex-direction:column;border-top:1px solid var(--garis)}
.fokus-item{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:13px 0;border-bottom:1px solid var(--garis);align-items:start}
.fokus-item:last-child{border-bottom:0}
.fokus-ikon{width:26px;height:26px;border-radius:3px;background:var(--navy-tipis);color:var(--navy);display:flex;align-items:center;justify-content:center}
.fokus-item b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--navy);margin-bottom:3px;line-height:1.3}
.fokus-item span{font-size:13px;line-height:1.55;color:var(--tinta-2)}

/* --- cakupan aplikasi --- */
.cakupan{margin-top:14px;padding-top:13px;border-top:1px dashed var(--garis)}
.cakupan > .mono{display:block;color:var(--tinta-3);font-size:9px;margin-bottom:9px}
.tag-baris{display:flex;flex-wrap:wrap;gap:6px}
.tag-baris span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);border:1px solid var(--garis);border-radius:2px;padding:4px 8px;background:var(--putih)}
.tag-baris span.lain{color:var(--tinta-4);border-style:dashed}
.proyek{border-bottom:1px solid var(--garis)}
.proyek:last-child{border-bottom:0}
.proyek summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:13px 0}
.proyek summary::-webkit-details-marker{display:none}
.proyek .nm{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.3}
.proyek .tg{font-size:9px;color:var(--tinta-3);letter-spacing:.1em;text-align:right}
.proyek .chev{color:var(--tinta-4);transition:transform 200ms var(--ease)}
.proyek[open] .chev{transform:rotate(180deg)}
.proyek:hover .nm{color:var(--amber-tua)}
.proyek[open] .nm{color:var(--amber-tua)}
.proyek-isi{padding:0 0 15px}
@media (max-width:520px){.proyek summary{grid-template-columns:1fr auto}.proyek .tg{grid-column:1;text-align:left;order:2}}

/* ------------------------------------------------------------------
   Aksen batik — kawung (kisi empat oval) sebagai tekstur latar,
   tumpal (pita segitiga) sebagai pembatas pada bidang gelap.
   ------------------------------------------------------------------ */
:root{
  --batik-kuat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%231B2550' stroke-width='1' opacity='.085'%3E%3Cellipse cx='28.0' cy='17.6' rx='6.4' ry='9.8'/%3E%3Cellipse cx='28.0' cy='38.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='17.6' cy='28.0' rx='9.8' ry='6.4'/%3E%3Cellipse cx='38.4' cy='28.0' rx='9.8' ry='6.4'/%3E%3Ccircle cx='28.0' cy='28.0' r='1.4' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='0' cy='-10.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='0' cy='10.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='-10.4' cy='0' rx='9.8' ry='6.4'/%3E%3Cellipse cx='10.4' cy='0' rx='9.8' ry='6.4'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='56' cy='-10.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='56' cy='10.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='45.6' cy='0' rx='9.8' ry='6.4'/%3E%3Cellipse cx='66.4' cy='0' rx='9.8' ry='6.4'/%3E%3Ccircle cx='56' cy='0' r='1.4' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='0' cy='45.6' rx='6.4' ry='9.8'/%3E%3Cellipse cx='0' cy='66.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='-10.4' cy='56' rx='9.8' ry='6.4'/%3E%3Cellipse cx='10.4' cy='56' rx='9.8' ry='6.4'/%3E%3Ccircle cx='0' cy='56' r='1.4' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='56' cy='45.6' rx='6.4' ry='9.8'/%3E%3Cellipse cx='56' cy='66.4' rx='6.4' ry='9.8'/%3E%3Cellipse cx='45.6' cy='56' rx='9.8' ry='6.4'/%3E%3Cellipse cx='66.4' cy='56' rx='9.8' ry='6.4'/%3E%3Ccircle cx='56' cy='56' r='1.4' fill='%231B2550' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --batik-samar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231B2550' stroke-width='1' opacity='.04'%3E%3Cellipse cx='32.0' cy='20.2' rx='7.4' ry='11.2'/%3E%3Cellipse cx='32.0' cy='43.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='20.2' cy='32.0' rx='11.2' ry='7.4'/%3E%3Cellipse cx='43.8' cy='32.0' rx='11.2' ry='7.4'/%3E%3Ccircle cx='32.0' cy='32.0' r='1.6' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='0' cy='-11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='0' cy='11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='-11.8' cy='0' rx='11.2' ry='7.4'/%3E%3Cellipse cx='11.8' cy='0' rx='11.2' ry='7.4'/%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='64' cy='-11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='64' cy='11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='52.2' cy='0' rx='11.2' ry='7.4'/%3E%3Cellipse cx='75.8' cy='0' rx='11.2' ry='7.4'/%3E%3Ccircle cx='64' cy='0' r='1.6' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='0' cy='52.2' rx='7.4' ry='11.2'/%3E%3Cellipse cx='0' cy='75.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='-11.8' cy='64' rx='11.2' ry='7.4'/%3E%3Cellipse cx='11.8' cy='64' rx='11.2' ry='7.4'/%3E%3Ccircle cx='0' cy='64' r='1.6' fill='%231B2550' stroke='none'/%3E%3Cellipse cx='64' cy='52.2' rx='7.4' ry='11.2'/%3E%3Cellipse cx='64' cy='75.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='52.2' cy='64' rx='11.2' ry='7.4'/%3E%3Cellipse cx='75.8' cy='64' rx='11.2' ry='7.4'/%3E%3Ccircle cx='64' cy='64' r='1.6' fill='%231B2550' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --batik-terang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' opacity='.026'%3E%3Cellipse cx='32.0' cy='20.2' rx='7.4' ry='11.2'/%3E%3Cellipse cx='32.0' cy='43.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='20.2' cy='32.0' rx='11.2' ry='7.4'/%3E%3Cellipse cx='43.8' cy='32.0' rx='11.2' ry='7.4'/%3E%3Ccircle cx='32.0' cy='32.0' r='1.6' fill='%23FFFFFF' stroke='none'/%3E%3Cellipse cx='0' cy='-11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='0' cy='11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='-11.8' cy='0' rx='11.2' ry='7.4'/%3E%3Cellipse cx='11.8' cy='0' rx='11.2' ry='7.4'/%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%23FFFFFF' stroke='none'/%3E%3Cellipse cx='64' cy='-11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='64' cy='11.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='52.2' cy='0' rx='11.2' ry='7.4'/%3E%3Cellipse cx='75.8' cy='0' rx='11.2' ry='7.4'/%3E%3Ccircle cx='64' cy='0' r='1.6' fill='%23FFFFFF' stroke='none'/%3E%3Cellipse cx='0' cy='52.2' rx='7.4' ry='11.2'/%3E%3Cellipse cx='0' cy='75.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='-11.8' cy='64' rx='11.2' ry='7.4'/%3E%3Cellipse cx='11.8' cy='64' rx='11.2' ry='7.4'/%3E%3Ccircle cx='0' cy='64' r='1.6' fill='%23FFFFFF' stroke='none'/%3E%3Cellipse cx='64' cy='52.2' rx='7.4' ry='11.2'/%3E%3Cellipse cx='64' cy='75.8' rx='7.4' ry='11.2'/%3E%3Cellipse cx='52.2' cy='64' rx='11.2' ry='7.4'/%3E%3Cellipse cx='75.8' cy='64' rx='11.2' ry='7.4'/%3E%3Ccircle cx='64' cy='64' r='1.6' fill='%23FFFFFF' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --tumpal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 8 L10.0 0 L20 8 Z' fill='%23D98324' opacity='.42'/%3E%3C/svg%3E");
}
.hero{background-image:linear-gradient(96deg,var(--kertas) 0 40%,rgba(250,248,244,.74) 54%,rgba(250,248,244,0) 68%),var(--batik-kuat);background-size:auto,56px 56px}
.tentang{background-image:var(--batik-samar);background-size:64px 64px}
.serti{background-image:var(--batik-samar);background-size:64px 64px}
.ajakan::after{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-image:var(--tumpal);background-repeat:repeat-x;background-size:20px 8px;pointer-events:none;z-index:0}
footer{background-image:var(--batik-terang);background-size:64px 64px}


@media (max-width:900px){
  .hero{background-image:linear-gradient(rgba(250,248,244,.82),rgba(250,248,244,.82)),var(--batik-kuat)}
}

@media (max-width:640px){
  .hero{background-size:auto,44px 44px}
  .tentang,.serti,footer{background-size:48px 48px}
}

/* --- reveal --- */
.js .muncul{opacity:0;transform:translateY(16px)}
.js .muncul.tampil{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 620ms var(--ease)}

/* --- responsif --- */
@media (max-width:1080px){
  .grid-nilai{grid-template-columns:repeat(2,1fr)}
  .studi{grid-template-columns:1fr}
  .studi-visual{border-right:0;border-bottom:1px solid var(--garis)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  nav.utama{display:none}
  .pisah-head{display:none}
  .burger{display:flex}
  .aksi-head .btn-amber{display:none}
  .hero-grid{grid-template-columns:1fr;padding-top:44px;padding-bottom:52px}
  .konsol{order:2}
  .catatan-konsol{display:none}
  .tentang-atas{grid-template-columns:1fr}
  .grid-misi{grid-template-columns:1fr}
  .grid-layanan{grid-template-columns:1fr}
  .grid-serti{grid-template-columns:1fr}
  .ajakan-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .status-pil .mono{font-size:9.5px;letter-spacing:.1em}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .logo-baris,.logo-baris.delapan{grid-template-columns:repeat(2,1fr)}
  .grid-nilai{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .konsol-metrik{gap:8px}
  .konsol-metrik b{font-size:16px}
  .merek .wm{font-size:16px}
  .bahasa{display:none}
  .rel-label .mono{font-size:8px}
  .blok-label{flex-wrap:wrap;gap:10px}
  .blok-label .mono:last-child{max-width:100%;text-align:left;flex-basis:100%}
  .blok-label .garis{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .muncul{opacity:1;transform:none}
  h1 .sorot{background-size:100% 100%}
}