/* SMANJA v22.3.0 — Full Width Institutional Hero
   Fokus: hero banner penuh layar ala kementerian/diskominfo tanpa mengubah container section lain. */
body.smanja-v2230 .sj223-hero{
  width:100%;
  padding:0!important;
  margin:0!important;
  position:relative;
  isolation:isolate;
  background:#082c52;
}
body.smanja-v2230 .sj223-hero .sj223-hero-wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.smanja-v2230 .sj223-hero-slider{
  width:100%;
  border:0!important;
  border-radius:0!important;
  overflow:hidden;
  background:#082d52!important;
  box-shadow:0 22px 54px rgba(3,34,62,.20)!important;
  position:relative;
}
body.smanja-v2230 .sj223-hero-slides{
  width:100%;
  height:clamp(500px,36vw,690px)!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  background:#082d52!important;
}
body.smanja-v2230 .sj223-hero-slide{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden;
  isolation:isolate;
}
body.smanja-v2230 .sj223-hero-slide[hidden]{display:none!important}
body.smanja-v2230 .sj223-hero-image{
  position:absolute!important;
  inset:0;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center;
  transform:scale(1.015);
  transition:transform 7s cubic-bezier(.2,.65,.25,1)!important;
}
body.smanja-v2230 .sj223-hero-slide:not([hidden]) .sj223-hero-image{transform:scale(1.055)}
body.smanja-v2230 .sj223-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,61,132,.97) 0%,rgba(4,73,158,.89) 28%,rgba(5,80,166,.62) 48%,rgba(4,44,83,.18) 70%,rgba(3,23,42,.10) 100%),
    linear-gradient(0deg,rgba(2,24,46,.58) 0%,rgba(2,24,46,.06) 34%,transparent 62%);
}
body.smanja-v2230 .sj223-hero-shade:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 25% 45%,rgba(39,130,238,.20),transparent 34%);
}
body.smanja-v2230 .sj223-hero-inner{
  position:relative;
  z-index:2;
  width:min(1280px,calc(100% - 96px));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
}
body.smanja-v2230 .sj223-hero-copy{
  width:min(760px,62%);
  padding:30px 0 42px;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,25,58,.22);
}
body.smanja-v2230 .sj223-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#ffe58e;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body.smanja-v2230 .sj223-hero-kicker i{font-size:10px}
body.smanja-v2230 .sj223-hero-copy h1{
  color:#fff!important;
  font-size:clamp(42px,4.1vw,72px)!important;
  line-height:1.04!important;
  font-weight:850!important;
  letter-spacing:-.035em;
  max-width:760px;
  margin:0 0 20px!important;
  text-wrap:balance;
}
body.smanja-v2230 .sj223-hero-copy p{
  max-width:680px;
  margin:0 0 26px!important;
  color:rgba(255,255,255,.94)!important;
  font-size:clamp(15px,1.08vw,19px)!important;
  line-height:1.7!important;
  text-shadow:0 1px 12px rgba(0,22,52,.3);
}
body.smanja-v2230 .sj223-hero-actions{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
body.smanja-v2230 .sj223-hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:12px 22px;
  border-radius:9px;
  color:#082f56!important;
  background:linear-gradient(135deg,#ffd55f,#efb52e);
  box-shadow:0 12px 30px rgba(232,174,32,.30),inset 0 1px rgba(255,255,255,.5);
  font-size:15px;
  font-weight:800;
  text-decoration:none!important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
body.smanja-v2230 .sj223-hero-cta:hover,
body.smanja-v2230 .sj223-hero-cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(232,174,32,.38),inset 0 1px rgba(255,255,255,.55);
  filter:saturate(1.05);
}
body.smanja-v2230 .sj223-hero-berseri{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
body.smanja-v2230 .sj223-hero-berseri small{
  color:rgba(255,255,255,.76);
  font-size:10px;
  font-weight:600;
  letter-spacing:0;
}
body.smanja-v2230 .sj223-hero-arrow{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:#fff;
  background:rgba(6,50,94,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(0,24,51,.16);
  cursor:pointer;
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
body.smanja-v2230 .sj223-hero-prev{left:24px}
body.smanja-v2230 .sj223-hero-next{right:24px}
body.smanja-v2230 .sj223-hero-arrow:hover{background:rgba(10,105,194,.62);border-color:rgba(255,255,255,.52)}
body.smanja-v2230 .sj223-hero-arrow:active{transform:translateY(-50%) scale(.96)}
body.smanja-v2230 .sj223-hero-pagination{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(3,39,75,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
body.smanja-v2230 .sj223-hero-dots{display:flex;align-items:center;gap:7px;max-width:none!important}
body.smanja-v2230 .sj223-hero-dots button{
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
  padding:0!important;
  border:0!important;
  border-radius:99px!important;
  background:transparent!important;
}
body.smanja-v2230 .sj223-hero-dots button span{
  display:block;
  width:9px!important;
  height:9px!important;
  border-radius:99px!important;
  background:rgba(255,255,255,.72)!important;
  transition:width .2s ease,background .2s ease;
}
body.smanja-v2230 .sj223-hero-dots button[aria-current="true"]{width:30px!important}
body.smanja-v2230 .sj223-hero-dots button[aria-current="true"] span{width:28px!important;background:#ffc72c!important}
body.smanja-v2230 .sj223-hero-pause{
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.10);
  font-size:11px;
  line-height:1;
}
body.smanja-v2230 .sj223-hero-pause:hover{background:rgba(255,255,255,.22)}

/* Running text tetap mengikuti alur penuh banner tanpa mengubah lebar section konten berikutnya. */
body.smanja-v2230 .sj172-ticker-band{margin-top:0!important}
body.smanja-v2230 .sj172-ticker-band .sj15-banner-wrap{width:min(1280px,calc(100% - 64px))!important;max-width:1280px!important;margin:0 auto!important}

@media(max-width:1199px){
  body.smanja-v2230 .sj223-hero-slides{height:clamp(460px,46vw,590px)!important}
  body.smanja-v2230 .sj223-hero-inner{width:min(100% - 72px,1120px)}
  body.smanja-v2230 .sj223-hero-copy{width:min(720px,70%)}
  body.smanja-v2230 .sj223-hero-copy h1{font-size:clamp(38px,5vw,60px)!important}
}
@media(max-width:767px){
  body.smanja-v2230 .sj223-hero-slides{height:clamp(390px,94vw,520px)!important}
  body.smanja-v2230 .sj223-hero-image{object-position:center center}
  body.smanja-v2230 .sj223-hero-shade{
    background:linear-gradient(180deg,rgba(5,53,109,.32) 0%,rgba(4,69,145,.72) 48%,rgba(3,42,84,.96) 100%);
  }
  body.smanja-v2230 .sj223-hero-inner{width:calc(100% - 38px);align-items:flex-end}
  body.smanja-v2230 .sj223-hero-copy{width:100%;padding:34px 0 72px}
  body.smanja-v2230 .sj223-hero-kicker{font-size:10px;margin-bottom:10px}
  body.smanja-v2230 .sj223-hero-copy h1{font-size:clamp(31px,9.5vw,47px)!important;line-height:1.06!important;margin-bottom:13px!important}
  body.smanja-v2230 .sj223-hero-copy p{font-size:14px!important;line-height:1.6!important;margin-bottom:17px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body.smanja-v2230 .sj223-hero-cta{min-height:44px;padding:10px 17px;font-size:13px}
  body.smanja-v2230 .sj223-hero-berseri{display:none}
  body.smanja-v2230 .sj223-hero-arrow{width:38px;height:38px;top:46%}
  body.smanja-v2230 .sj223-hero-prev{left:10px}
  body.smanja-v2230 .sj223-hero-next{right:10px}
  body.smanja-v2230 .sj223-hero-pagination{bottom:15px}
  body.smanja-v2230 .sj172-ticker-band .sj15-banner-wrap{width:calc(100% - 20px)!important}
}
@media(max-width:420px){
  body.smanja-v2230 .sj223-hero-slides{height:430px!important}
  body.smanja-v2230 .sj223-hero-copy{padding-bottom:66px}
  body.smanja-v2230 .sj223-hero-copy h1{font-size:32px!important}
  body.smanja-v2230 .sj223-hero-arrow{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  body.smanja-v2230 .sj223-hero-image,
  body.smanja-v2230 .sj223-hero-cta,
  body.smanja-v2230 .sj223-hero-dots button span{transition:none!important;transform:none!important}
}