.implementation-section{
  position:relative;
  overflow:hidden;
  scroll-margin-top:64px;
  padding:108px 0;
  color:#102744;
  background:#fff;
}

.implementation-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:linear-gradient(rgba(23,107,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,107,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
}

.implementation-section>.role-detail-shell{position:relative;z-index:1}

.implementation-heading{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:90px;
  align-items:end;
  margin-bottom:46px;
}

.implementation-heading>div{min-width:0}
.implementation-heading .role-detail-kicker{margin-bottom:12px}
.implementation-count{display:block;margin-bottom:16px;color:#176bff;font-size:13px;font-weight:800}
.implementation-heading h2{max-width:780px;margin:0;color:#102744;font-size:clamp(39px,4.2vw,58px);line-height:1.05;letter-spacing:-.055em}
.implementation-heading>p{margin:0;color:#64768d;font-size:17px;line-height:1.78}

.implementation-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch}
.implementation-items{display:grid;grid-template-columns:repeat(2,1fr);overflow:hidden;border:1px solid #d9e4f1;border-radius:21px;background:#fff}
.implementation-items article{position:relative;display:grid;grid-template-columns:44px 1fr;gap:15px;min-height:220px;padding:28px;border-right:1px solid #d9e4f1;border-bottom:1px solid #d9e4f1}
.implementation-items article:nth-child(2n){border-right:0}
.implementation-items article:nth-last-child(-n+2){border-bottom:0}
.implementation-items article>span{position:absolute;top:23px;right:24px;color:#aebed1;font-size:12px;font-weight:900}
.implementation-items article>i{display:grid;width:43px;height:43px;place-items:center;border-radius:12px;color:#176bff;background:#e8f1ff;font-size:11px;font-style:normal;font-weight:900}
.implementation-items article>div{grid-column:1/3;margin-top:28px}
.implementation-items h3{margin:0;color:#102744;font-size:21px;line-height:1.24}
.implementation-items p{margin:11px 0 0;color:#5b6e86;font-size:15px;line-height:1.7}
.implementation-items article>b{grid-column:1/3;align-self:end;width:max-content;margin-top:18px;padding:7px 10px;border-radius:999px;color:#176bff;background:#e8f1ff;font-size:12px}

.implementation-notes{padding:32px;border-radius:21px;color:#fff;background:#071d40}
.implementation-notes>small{color:#82b0ff;font-size:12px;font-weight:900;letter-spacing:.1em}
.implementation-notes h3{margin:14px 0 25px;color:#fff;font-size:29px;line-height:1.17}
.implementation-notes ul{margin:0;padding:0;list-style:none}
.implementation-notes li{padding:17px 0;border-top:1px solid rgba(255,255,255,.11)}
.implementation-notes li b,.implementation-notes li span{display:block}
.implementation-notes li b{color:#fff;font-size:15px}
.implementation-notes li span{margin-top:6px;color:#b8c8da;font-size:14px;line-height:1.6}

.implementation-section--data,.implementation-section--documents{background:#f2f6fc}
.implementation-section--workflow .implementation-items{display:block}
.implementation-section--workflow .implementation-items article{display:grid;grid-template-columns:52px 1fr auto;min-height:auto;border-right:0;padding:25px 28px}
.implementation-section--workflow .implementation-items article:nth-last-child(-n+2){border-bottom:1px solid #d9e4f1}
.implementation-section--workflow .implementation-items article:last-child{border-bottom:0}
.implementation-section--workflow .implementation-items article>span{position:static;display:grid;width:46px;height:46px;place-items:center;border-radius:50%;color:#fff;background:#176bff}
.implementation-section--workflow .implementation-items article>i{display:none}
.implementation-section--workflow .implementation-items article>div{grid-column:auto;margin:0}
.implementation-section--workflow .implementation-items article>b{grid-column:auto;align-self:center;margin:0}

.implementation-section--exceptions{background:#fff8ed}
.implementation-section--exceptions .implementation-items article>i,.implementation-section--exceptions .implementation-items article>b{color:#9a5b00;background:#ffebc9}
.implementation-section--exceptions .implementation-notes{background:#412b0b}

.implementation-section--automation,.implementation-section--mobile{
  color:#fff;
  background:linear-gradient(135deg,#176bff,#0b4db9);
}
.implementation-section--automation .implementation-heading h2,.implementation-section--mobile .implementation-heading h2{color:#fff}
.implementation-section--automation .implementation-heading>p,.implementation-section--mobile .implementation-heading>p{color:#d7e5fb}
.implementation-section--automation .implementation-count,.implementation-section--mobile .implementation-count{color:#dce9ff}
.implementation-section--automation .role-detail-kicker,.implementation-section--mobile .role-detail-kicker{color:#fff}
.implementation-section--automation .implementation-items,.implementation-section--mobile .implementation-items{border-color:rgba(255,255,255,.2);background:rgba(5,35,83,.25)}
.implementation-section--automation .implementation-items article,.implementation-section--mobile .implementation-items article{border-color:rgba(255,255,255,.16)}
.implementation-section--automation .implementation-items h3,.implementation-section--mobile .implementation-items h3{color:#fff}
.implementation-section--automation .implementation-items p,.implementation-section--mobile .implementation-items p{color:#d2e1f7}
.implementation-section--automation .implementation-items article>i,.implementation-section--mobile .implementation-items article>i{color:#fff;background:rgba(255,255,255,.14)}
.implementation-section--automation .implementation-items article>b,.implementation-section--mobile .implementation-items article>b{color:#fff;background:rgba(255,255,255,.12)}
.implementation-section--automation .implementation-notes,.implementation-section--mobile .implementation-notes{background:#061d43}

.implementation-section--analytics,.implementation-section--security{
  color:#fff;
  background:#061a3a;
}
.implementation-section--analytics .implementation-heading h2,.implementation-section--security .implementation-heading h2{color:#fff}
.implementation-section--analytics .implementation-heading>p,.implementation-section--security .implementation-heading>p{color:#a7bad0}
.implementation-section--analytics .implementation-count,.implementation-section--security .implementation-count,
.implementation-section--analytics .role-detail-kicker,.implementation-section--security .role-detail-kicker{color:#82b0ff}
.implementation-section--analytics .implementation-items,.implementation-section--security .implementation-items{border-color:#17385f;background:#0a2853}
.implementation-section--analytics .implementation-items article,.implementation-section--security .implementation-items article{border-color:#17385f}
.implementation-section--analytics .implementation-items h3,.implementation-section--security .implementation-items h3{color:#fff}
.implementation-section--analytics .implementation-items p,.implementation-section--security .implementation-items p{color:#a7b9ce}
.implementation-section--analytics .implementation-notes,.implementation-section--security .implementation-notes{border:1px solid #1b4678;background:#0c3268}

.implementation-section--integration .implementation-items article{min-height:195px}
.implementation-section--integration .implementation-items article>i{border-radius:50%}
.implementation-section--governance{background:#edf4ff}
.implementation-section--governance .implementation-notes{background:#0b3470}

.role-implementation-ready .role-detail-nav{overflow:hidden}
.role-implementation-ready .role-detail-nav>.role-detail-shell{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) max-content;
  gap:18px;
}
.role-detail-nav-scroll{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;
  height:100%;
  align-items:center;
}
.role-detail-nav-scroll.has-controls{grid-template-columns:36px minmax(0,1fr) 36px}
.role-detail-nav-scroll.is-idle{grid-template-columns:minmax(0,1fr)}
.role-detail-nav-scroll.is-idle .role-detail-nav-arrow{display:none}
.role-detail-nav-scroll .role-detail-links{
  display:flex;
  min-width:0;
  height:100%;
  align-items:center;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 8px;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.role-detail-nav-scroll .role-detail-links::-webkit-scrollbar{display:none}
.role-detail-nav-scroll .role-detail-links>a{
  flex:0 0 auto;
  scroll-snap-align:center;
  white-space:nowrap;
}
.role-detail-nav-scroll .implementation-nav-link{color:#62748c}
.role-detail-nav-arrow{
  position:relative;
  z-index:2;
  display:none;
  width:28px;
  height:32px;
  padding:0;
  place-items:center;
  border:1px solid #d6e2f0;
  border-radius:9px;
  color:#176bff;
  background:#fff;
  box-shadow:0 4px 13px rgba(8,35,74,.08);
  cursor:pointer;
  font:800 24px/1 Arial,sans-serif;
}
.role-detail-nav-scroll.has-controls .role-detail-nav-arrow{display:grid}
.role-detail-nav-arrow--previous{justify-self:start}
.role-detail-nav-arrow--next{justify-self:end}
.role-detail-nav-arrow:hover{border-color:#aac8f8;background:#edf4ff}
.role-detail-nav-arrow:disabled{opacity:.28;cursor:default}

@media(max-width:1100px){
  .implementation-heading,.implementation-layout{grid-template-columns:1fr;gap:25px}
  .implementation-notes{min-height:auto}
}

@media(max-width:850px){
  .implementation-section{scroll-margin-top:116px;padding:82px 0}
  .role-implementation-ready .role-detail-nav>.role-detail-shell{
    display:grid;
    width:100%;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    overflow:visible;
  }
  .role-detail-nav-scroll{grid-column:1}
  .role-detail-nav-scroll,
  .role-detail-nav-scroll.is-idle{grid-template-columns:minmax(0,1fr)}
  .role-detail-nav-scroll .role-detail-nav-arrow{display:none}
  .role-detail-nav-scroll .role-detail-links{padding-inline:7px}
}

@media(max-width:640px){
  .implementation-heading h2{font-size:38px}
  .implementation-heading>p{font-size:15px}
  .implementation-items{grid-template-columns:1fr}
  .implementation-items article,.implementation-items article:nth-child(2n),.implementation-items article:nth-last-child(-n+2){min-height:auto;border-right:0;border-bottom:1px solid #d9e4f1}
  .implementation-items article:last-child{border-bottom:0}
  .implementation-section--workflow .implementation-items article{grid-template-columns:46px 1fr}
  .implementation-section--workflow .implementation-items article>b{grid-column:2;justify-self:start;margin-top:10px}
}

/* Konsol wilayah kontekstual saat dipakai sebagai seksi berdiri sendiri
   (halaman /peran/dinas). Di halaman kontekstual biasa ia duduk di dalam hero
   gelap; di sini latarnya terang, jadi jarak dan lebarnya yang perlu diatur. */
.context-visual-section {
  padding: 70px 0;
  background: #f4f8ff;
}

.context-visual-section .context-visual {
  max-width: 760px;
  margin-inline: auto;
}

/* Kalimat ajakan dari lapisan kontekstual, di atas judul penutup halaman. */
.gov-context-cta {
  max-width: 720px;
  margin: 14px auto 0;
  color: #b9cdea;
  font-size: 15px;
  line-height: 1.75;
}

/* Kalimat pengantar peran pada hero /peran/dinas — halaman ini punya hero
   sendiri, jadi lead milik direktori peran ditempatkan di bawah ajakan. */
.gov-copy .gov-role-lead {
  max-width: 640px;
  margin: 22px 0 0;
  color: #a9bfdd;
  font-size: 14px;
  line-height: 1.75;
}