@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2")}
:root{--ink:#0b1220;--mute:#5b6779;--line:#e3e8f1;--soft:#f3f6fc;--brand:#1f5eff;--deep:#0a1f44;--mint:#19c39b}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:400 16px/1.7 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.06}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}h3{font-size:1.25rem}
a{color:var(--brand)}img{max-width:100%}
:focus-visible{outline:3px solid #8fb0ff;outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.lead{color:var(--mute);font-size:1.1rem;max-width:58ch;margin:0 0 44px}
.sec{padding:104px 0}.alt{background:var(--soft)}
/* header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.site-header img{display:block;height:34px}
#nav{display:flex;align-items:center;gap:6px 28px;font-size:.94rem;font-weight:500}
#nav a{color:var(--ink);text-decoration:none;padding:6px 0}
#nav a:hover,#nav a[aria-current]{color:var(--brand)}
#nav a.login,#nav a.cta{padding:9px 22px;border-radius:999px;font-weight:600;line-height:1.4;transition:.2s}
#nav a.login{border:1.5px solid var(--brand);color:var(--brand);background:#fff}
#nav a.login:hover{background:var(--brand);color:#fff}
#nav a.cta{border:1.5px solid transparent;background:linear-gradient(135deg,#1f5eff,#1639a8);color:#fff;box-shadow:0 6px 18px rgba(31,94,255,.28)}
#nav a.cta:hover{box-shadow:0 8px 24px rgba(31,94,255,.4);transform:translateY(-1px)}
.menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:inherit;font-weight:600;cursor:pointer}
/* buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;font-size:.96rem;transition:background .15s,color .15s}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.pri:hover{background:var(--deep);border-color:var(--deep)}
/* hero */
.hero{padding:40px 0 0;background:linear-gradient(180deg,#f3f6fc 0%,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:.88rem;font-weight:600;margin:0 0 22px}
.pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.sub{font-size:1.15rem;color:var(--mute);max-width:50ch;margin:0 0 34px}
.hero .btn{margin:0 10px 10px 0}
.hero-img{position:relative;margin:0}
.hero-img img{display:block;width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:28px;background:var(--deep)}
.hero-img figcaption{position:absolute;left:-20px;bottom:28px;background:#fff;border-radius:16px;padding:14px 20px;box-shadow:0 12px 40px rgba(10,31,68,.18);font-size:.9rem;color:var(--mute)}
.hero-img strong{display:block;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px;padding:32px 0 0;border-top:1px solid var(--line)}
.facts strong{display:block;font-size:1.2rem;letter-spacing:-.02em}.facts span{color:var(--mute);font-size:.93rem}
/* emiten */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:32px 28px;align-items:center;margin-bottom:56px}
.logos img{height:38px;width:100%;object-fit:contain;filter:grayscale(1);opacity:.6;transition:.2s}
.logos img:hover{filter:none;opacity:1}
blockquote{margin:0;background:var(--soft);border-radius:28px;padding:40px clamp(24px,5vw,56px)}
blockquote p{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:600;letter-spacing:-.015em;line-height:1.45;margin:0 0 16px;max-width:42ch}
blockquote footer{color:var(--mute);font-size:.94rem}
/* layanan */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.services>div{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px 32px}
.services>div:first-child{background:var(--deep);border-color:var(--deep);color:#fff}
.services>div:first-child p{color:#b9c8e6}
.services p{color:var(--mute);margin:0 0 14px}
.services ul{padding-left:20px;margin:0}.services li{margin-bottom:8px}
.tag{display:inline-block;background:var(--mint);color:var(--deep);font-size:.8rem;font-weight:700;padding:3px 12px;border-radius:999px;margin-bottom:14px}
.note{margin-top:28px;color:var(--mute)}
/* dokumen teaser */
.band{padding:0 24px}
.band .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;background:linear-gradient(120deg,var(--deep),#1639a8);color:#fff;border-radius:32px;padding:56px clamp(24px,5vw,64px)}
.band h2{margin:0 0 8px}.band p{margin:0;color:#c5d3f0;max-width:50ch}
.band .btn{background:#fff;border-color:#fff;color:var(--deep)}.band .btn:hover{background:var(--mint);border-color:var(--mint);color:var(--deep)}
/* artikel */
.articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,320px));gap:16px}
.articles a{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 44px 18px 20px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:#fff;transition:.2s}
.articles small{color:var(--brand);font-size:.78rem;font-weight:600}
.articles span{font-size:.97rem;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.articles a:after{content:"\2192";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--mute);transition:.2s}
.articles a:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(31,94,255,.1)}
.articles a:hover:after{color:var(--brand);right:14px}
/* tentang */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:64px}
.timeline{list-style:none;margin:0;padding:0 0 0 26px;border-left:2px solid #cfd9ee}
.timeline li{position:relative;margin-bottom:24px}
.timeline li:before{content:"";position:absolute;left:-34px;top:7px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.timeline b{display:block}.timeline span{color:var(--mute);font-size:.95rem}
.leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;margin-top:64px}
.leaders img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;background:var(--line)}
.leaders p{margin:12px 0 0;color:var(--mute);font-size:.93rem;line-height:1.4}.leaders b{display:block;color:var(--ink);font-size:1.02rem}
/* footer */
.site-footer{background:var(--ink);color:#a9b6cc;padding:64px 0 32px;font-size:.94rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between}
.site-footer a{color:#fff}.site-footer h2{color:#fff;font-size:1.3rem}
.site-footer img{height:44px;margin-right:12px;background:#fff;padding:5px;border-radius:10px}
.copy{width:100%;border-top:1px solid #1f2b42;padding-top:24px;margin:0}
/* halaman dokumen */
.page{max-width:940px;margin:0 auto;padding:64px 24px 96px}
.tools{display:grid;grid-template-columns:1fr 250px;gap:16px;margin-bottom:24px}
.tools label{display:grid;gap:8px;font-weight:600;font-size:.9rem}
input,select{font:inherit;font-weight:400;padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
input:focus,select:focus{border-color:var(--brand);outline:none}
#status{color:var(--mute);margin:0 0 14px}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.docs li{display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:20px 24px;background:#fff;transition:.2s}
.docs li:hover{border-color:var(--brand);box-shadow:0 8px 28px rgba(31,94,255,.1)}
.docs h2{font-size:1.05rem;letter-spacing:-.01em;margin:0 0 4px}.meta{margin:0;color:var(--mute);font-size:.88rem}.acts{display:flex;gap:8px}
.docs .btn{padding:9px 20px;font-size:.9rem}
/* hero slider: kartu navy + kontrol di bawah */
.stage{overflow:hidden;background:var(--deep);color:#fff;border-radius:32px;box-shadow:0 24px 60px rgba(10,31,68,.18)}
.track{display:flex;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.slide{flex:0 0 100%;min-width:0;padding:clamp(28px,5vw,60px)}
.slide.noimg .hero-grid{grid-template-columns:1fr}
.stage .hero-grid{gap:48px}
.hl{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:0 0 .5em;color:#fff}
.stage .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff}
.stage .sub{color:#c5d3f0}
.stage .btn{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.stage .btn.pri{background:#fff;border-color:#fff;color:var(--deep)}
.stage .btn:hover,.stage .btn.pri:hover{background:var(--mint);border-color:var(--mint);color:var(--deep)}
.stage .hero-img img{border-radius:20px;aspect-ratio:4/3.1}
.stage .hero-img figcaption{left:14px;bottom:14px}
.ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.dots{display:flex;align-items:center;gap:8px}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:#c3cfe8;cursor:pointer;transition:.3s}
.dots button[aria-current="true"]{width:36px;background:var(--brand)}
.prev,.next{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:1.5rem;line-height:1;padding:0 0 3px;cursor:pointer;transition:.2s}
.prev:hover,.next:hover{background:var(--brand);border-color:var(--brand);color:#fff}
/* contact */
.contact{padding-top:64px;padding-bottom:96px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:72px}
.cards>div{border:1px solid var(--line);border-radius:24px;padding:32px;background:#fff;display:flex;flex-direction:column;gap:6px;transition:.2s}
.cards>div:hover{border-color:var(--brand);box-shadow:0 10px 30px rgba(31,94,255,.12)}
.cards h2{font-size:1.25rem;margin:0}.cards p{margin:0;color:var(--mute)}
.cards .hrs{font-size:.9rem;font-weight:600;color:var(--ink);margin:6px 0 10px}
.cards a{font-weight:600;text-decoration:none;word-break:break-word}.cards a:hover{text-decoration:underline}
.office{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;background:var(--soft);border-radius:32px;padding:clamp(24px,5vw,56px)}
.office address{font-style:normal;margin:0 0 16px}
.office img{width:100%;aspect-ratio:580/480;object-fit:cover;border-radius:24px;background:var(--line)}
/* halaman artikel */
.article{max-width:740px;margin:0 auto;padding:56px 24px 96px}
.back{display:inline-block;margin-bottom:28px;color:var(--mute);text-decoration:none;font-size:.93rem;font-weight:500}.back:hover{color:var(--brand)}
.article .pill{margin-bottom:18px}
.article h1{font-size:clamp(2rem,4.4vw,2.9rem)}
.byline{color:var(--mute);font-size:.93rem;margin:0 0 32px}
.cover{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:24px;margin:0 0 40px;background:var(--deep)}
.article p,.article li{font-size:1.06rem;line-height:1.85}
.article h2{font-size:1.5rem;margin:2em 0 .5em}
.article ul{padding-left:22px}
.callout{background:var(--soft);border-radius:18px;padding:22px 26px;margin:32px 0;font-weight:500}
.more{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
@media(max-width:900px){
 .hero-grid,.about{grid-template-columns:1fr;gap:40px}.hero-img figcaption{left:12px}
 .facts{grid-template-columns:1fr;gap:16px}.office{grid-template-columns:1fr;gap:32px}.sec{padding:72px 0}
}
@media(max-width:800px){
 .menu-btn{display:block}
 #nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;background:#fff;padding:12px 24px 24px;border-bottom:1px solid var(--line)}
 #nav.open{display:flex}
 .tools,.docs li{grid-template-columns:1fr}
 #nav a.login,#nav a.cta{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* tombol WhatsApp */
/*.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;background:#117a43;color:#fff;text-decoration:none;font-weight:600;font-size:.94rem;padding:12px 20px 12px 16px;border-radius:999px;box-shadow:0 10px 28px rgba(17,122,67,.38);transition:transform .2s,box-shadow .2s}
.wa:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(17,122,67,.5)}.wa img{display:block}
@media(max-width:600px){.wa{padding:14px;right:16px}.wa span{display:none}}
*/
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
  font-family: inherit;
}

.pager button {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: none;
  background-color: transparent;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  border-radius: 50%; /* Membuat tombol berbentuk lingkaran */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

/* Efek saat kursor diarahkan ke tombol */
.pager button:hover:not(:disabled) {
  background-color: #f0f2f5;
  color: #1a73e8;
}

/* Tombol untuk halaman aktif (Current Page) */
.pager button[aria-current="page"] {
  background-color: #4169e3; /* Warna biru sesuai referensi */
  color: #ffffff;
  font-weight: bold;
}

/* Tombol panah (‹ dan ›) atau titik-titik (...) */
.pager button:disabled {
  color: #ccc;
  cursor: not-allowed;
  background-color: transparent;
}

/* Gaya khusus untuk teks titik-titik (...) */
.pager span.ellipsis {
  padding: 0 4px;
  color: #888;
  font-size: 14px;
}




/* ===== Halaman detail artikel ===== */
.article-detail {
  --ad-primary: var(--primary, #1d4ed8);
  --ad-primary-soft: var(--primary-soft, #eff4ff);
  --ad-ink: var(--ink, #0f172a);
  --ad-muted: var(--muted, #64748b);
  --ad-line: var(--line, #e2e8f0);
  --ad-surface: var(--surface, #ffffff);

  max-width: 780px;
  margin: 0 auto;
  padding: 40px 0 80px;
  color: var(--ad-ink);
}

/* Tombol kembali */
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: var(--ad-surface);
  color: var(--ad-ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.article-back svg { transition: transform .2s ease; }
.article-back:hover {
  background: var(--ad-primary);
  border-color: var(--ad-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 78, 216, .25);
  transform: translateY(-1px);
}
.article-back:hover svg { transform: translateX(-3px); }
.article-back:focus-visible {
  outline: 3px solid var(--ad-primary);
  outline-offset: 3px;
}

/* Judul */
.article-detail-title {
  margin: 28px 0 20px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

/* Caption (ringkasan) */
.article-detail-caption {
  margin: 0 0 32px;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--ad-primary);
  color: var(--ad-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}
.article-detail-caption > :first-child { margin-top: 0; }
.article-detail-caption > :last-child { margin-bottom: 0; }

/* Isi artikel */
.article-detail-content {
  font-size: 0.8rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.article-detail-content > :first-child { margin-top: 0; }
.article-detail-content p { margin: 0 0 1.25em; }
.article-detail-content h2,
.article-detail-content h3,
.article-detail-content h4 {
  margin: 1.8em 0 .6em;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.article-detail-content a {
  color: var(--ad-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-detail-content ul,
.article-detail-content ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.article-detail-content li { margin-bottom: .4em; }
.article-detail-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
  border-radius: 14px;
}
.article-detail-content figure { margin: 1.5em 0; }
.article-detail-content figcaption {
  margin-top: .5em;
  color: var(--ad-muted);
  font-size: .9rem;
  text-align: center;
}
.article-detail-content blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-left: 4px solid var(--ad-primary);
  border-radius: 0 12px 12px 0;
  background: var(--ad-primary-soft);
  color: var(--ad-ink);
}
.article-detail-content blockquote > :last-child { margin-bottom: 0; }
.article-detail-content hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--ad-line);
}
.article-detail-content pre {
  margin: 1.5em 0;
  padding: 16px;
  overflow-x: auto;
  border-radius: 12px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .9rem;
  line-height: 1.6;
}
.article-detail-content code {
  padding: .1em .4em;
  border-radius: 6px;
  background: var(--ad-primary-soft);
  font-size: .9em;
}
.article-detail-content pre code { padding: 0; background: none; }
.article-detail-content table {
  display: block;
  width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .95rem;
}
.article-detail-content th,
.article-detail-content td {
  padding: 10px 14px;
  border: 1px solid var(--ad-line);
  text-align: left;
}
.article-detail-content th { background: var(--ad-primary-soft); }

/* Tautan video */
.article-video a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ad-primary-soft);
  color: var(--ad-primary);
  font-weight: 600;
  text-decoration: none;
}
.article-video a::before { content: "\25B6"; font-size: .75em; }
.article-video a:hover { background: var(--ad-primary); color: #fff; }

/* Kartu info (dibuat, dipublikasikan, penulis) */
.article-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 56px;
  padding: 20px;
  border: 1px solid var(--ad-line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ad-primary-soft), var(--ad-surface));
}
.article-meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.article-meta-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ad-surface);
  color: var(--ad-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}
.article-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.article-meta-label {
  color: var(--ad-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.article-meta-value {
  color: var(--ad-ink);
  font-size: .98rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Pesan kosong/error */
.article-empty { margin-top: 28px; }

@media (max-width: 600px) {
  .article-detail { padding: 24px 0 56px; }
  .article-detail-caption { font-size: 1.05rem; }
  .article-meta { margin-top: 40px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-back,
  .article-back svg { transition: none; }
  .article-back:hover,
  .article-back:hover svg { transform: none; }
}