:root{
  --hp-bg:#f7f8fb;
  --hp-paper:#ffffff;
  --hp-ink:#111827;
  --hp-muted:#566579;
  --hp-line:#d9e0e8;
  --hp-navy:#0b1728;
  --hp-blue:#1f5d7a;
  --hp-teal:#167064;
  --hp-gold:#b98638;
  --hp-soft:#eef3f7;
  --hp-shadow:0 12px 30px rgba(15,23,42,.09);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--hp-bg);
  color:var(--hp-ink);
  font-family:"Aptos","Segoe UI",Tahoma,sans-serif;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.hp-wrap{width:min(1180px,94vw);margin-inline:auto}
.hp-main a{text-decoration:none}
.hp-main section{position:relative;padding:42px 0}
.hp-main h2{margin:0 0 10px;font-size:1.9rem;line-height:1.22;letter-spacing:0;color:#111827}
.hp-lead{margin:0 0 18px;color:var(--hp-muted);font-size:1rem;max-width:82ch}

.hp-hero{
  min-height:560px;
  padding:64px 0 46px!important;
  background:
    linear-gradient(115deg,rgba(11,23,40,.96) 0%,rgba(11,23,40,.78) 44%,rgba(15,63,74,.84) 100%),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    url("/assets/img/trust-proof/contoh-laporan-investigasi-anonim.svg"),
    linear-gradient(135deg,#0b1728 0%,#10243b 62%,#153f4a 100%);
  background-position:center,center,center,right center,center;
  background-size:auto,44px 44px,44px 44px,min(46vw,620px) auto,auto;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.hp-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:90px;
  background:linear-gradient(180deg,transparent,rgba(247,248,251,.94));
  pointer-events:none;
}
.hp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.hp-hero-card{
  position:relative;
  z-index:1;
  padding:18px 0 22px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
}
.hp-kicker{
  margin:0;
  width:max-content;
  max-width:100%;
  padding:7px 10px;
  color:#d8ecf6;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hp-hero-card h1{margin:0;max-width:13ch;color:#fff;font-size:3.05rem;line-height:1.05;letter-spacing:0;text-shadow:0 18px 42px rgba(0,0,0,.28)}
.hp-hero-card p{margin:0;max-width:66ch;color:#d7e4ee;font-size:1.06rem}
.hp-hero-card strong{color:#fff}
.hp-cta-row{display:flex;flex-wrap:wrap;gap:10px}
.hp-cta-center{justify-content:center}
.hp-btn{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:8px;
  font-weight:820;
  line-height:1.2;
  text-align:center;
}
.hp-btn-primary{background:#d7a24b;color:#111827;box-shadow:0 12px 26px rgba(215,162,75,.24)}
.hp-btn-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hp-points{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:#24384f}
.hp-points li{position:relative;padding-left:19px;color:#e7eef5}
.hp-points li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--hp-teal)}

.hp-hero-side{position:relative;z-index:1;display:grid;gap:12px;grid-template-rows:auto 1fr;align-content:center}
.hp-trust-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.hp-trust-strip span{
  min-height:42px;
  display:grid;
  place-items:center;
  padding:8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#ecf6fb;
  font-size:.86rem;
  font-weight:820;
  text-align:center;
  backdrop-filter:blur(10px);
}
.hp-panel{
  padding:14px;
  background:#fff;
  border:1px solid var(--hp-line);
  border-radius:8px;
  box-shadow:var(--hp-shadow);
  display:grid;
  grid-template-columns:40px 1fr;
  gap:11px;
  align-items:start;
}
.hp-panel-icon{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:#e7f0f4;color:#143a56}
.hp-panel-icon svg{width:20px;height:20px;display:block}
.hp-panel b{display:block;margin-bottom:3px;color:#0f172a;font-size:1.03rem;line-height:1.18}
.hp-panel span{display:block;color:#566579;font-size:.94rem;line-height:1.48}
.hp-case-desk{
  min-height:370px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:14px;
  padding:18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    rgba(8,18,32,.78);
  background-size:28px 28px,28px 28px,auto;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
}
.hp-desk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:12px}
.hp-desk-head span{color:#9fc4d4;font-size:.8rem;font-weight:820;text-transform:uppercase;letter-spacing:.08em}
.hp-desk-head b{color:#fff;font-size:1.12rem;text-align:right}
.hp-desk-flow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}
.hp-desk-flow::before{
  content:"";
  position:absolute;
  left:50%;
  top:10%;
  bottom:10%;
  width:1px;
  background:linear-gradient(#d7a24b,rgba(255,255,255,.16));
}
.hp-desk-flow article{
  position:relative;
  min-height:98px;
  padding:13px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.075);
}
.hp-desk-flow b{display:inline-grid;width:30px;height:30px;place-items:center;margin-bottom:11px;border-radius:8px;background:#d7a24b;color:#111827;font-size:.78rem}
.hp-desk-flow span{display:block;color:#fff;font-weight:830}
.hp-desk-flow small{display:block;margin-top:3px;color:#bcd1df;font-size:.82rem;line-height:1.35}
.hp-desk-note{padding:13px;border-radius:8px;background:#eef6f8;color:#12283a}
.hp-desk-note b{display:block;margin-bottom:4px;color:#0f172a}
.hp-desk-note p{margin:0;color:#405569;font-size:.94rem;line-height:1.5}

.hp-main .is-soft{background:#edf2f6;border-top:1px solid var(--hp-line);border-bottom:1px solid var(--hp-line)}
.hp-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hp-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hp-card{
  padding:18px;
  background:var(--hp-paper);
  border:1px solid var(--hp-line);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.hp-card h3{margin:0 0 8px;font-size:1.12rem;line-height:1.28;color:#111827}
.hp-card p{margin:0;color:var(--hp-muted);line-height:1.68}
.hp-links{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.hp-chip{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid #cdd8e2;
  background:#f8fafc;
  color:#1a415c;
  font-size:.9rem;
  font-weight:740;
  line-height:1.2;
}

.hp-info-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hp-line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.hp-info-list article{padding:16px;border-right:1px solid var(--hp-line)}
.hp-info-list article:last-child{border-right:0}
.hp-info-list b{display:block;margin-bottom:6px;color:#143a56}
.hp-info-list span{display:block;color:var(--hp-muted);font-size:.95rem;line-height:1.58}

.hp-city-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.hp-city{min-height:48px;justify-content:flex-start;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.hp-city::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--hp-teal)}
.hp-city.-wide{grid-column:span 2;background:#eaf4f2;border-color:#bcd7d2}

.hp-step{position:relative;padding-top:46px}
.hp-step::before{
  content:attr(data-step);
  position:absolute;
  top:13px;
  right:13px;
  width:32px;
  height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#143a56;
  font-size:.78rem;
  font-weight:850;
}

.hp-media{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}
.hp-media figure{margin:0;overflow:hidden;border:1px solid var(--hp-line);border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.hp-media img{display:block;width:100%;height:auto}
.hp-media figcaption{padding:11px 12px;color:#4c6075;border-top:1px solid var(--hp-line);font-size:.94rem}

.hp-quote{padding:18px;background:#fff;border:1px solid var(--hp-line);border-radius:8px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.hp-quote p{margin:0;color:#2e4359}
.hp-quote cite{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--hp-line);font-style:normal;font-weight:760;color:#143a56}

.hp-video-section{background:#f8fafc}
.hp-video-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:20px;align-items:center}
.hp-video-copy{max-width:560px}
.hp-video-copy .hp-kicker{
  color:#143a56;
  background:#e7f0f4;
  border-color:#c8d9e3;
}
.hp-video-points{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px;color:#2d4358}
.hp-video-points li{position:relative;padding-left:22px}
.hp-video-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#167064;
  box-shadow:0 0 0 5px rgba(22,112,100,.12);
}
.hp-video{overflow:hidden;background:#fff;border:1px solid var(--hp-line);border-radius:8px;box-shadow:0 18px 42px rgba(15,23,42,.12)}
.hp-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.hp-video-lite{
  appearance:none;
  border:0;
  margin:0;
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  color:#fff;
  font:inherit;
  font-weight:820;
  background:#0b1728;
  overflow:hidden;
}
.hp-video-lite::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(11,23,40,.15),rgba(11,23,40,.72)),
    linear-gradient(90deg,rgba(11,23,40,.68),transparent 58%);
}
.hp-video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.04)}
.hp-video-label{position:relative;z-index:1;padding:0 16px;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hp-play{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 16px 34px rgba(0,0,0,.3)}
.hp-play::before{content:"";margin-left:4px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #143a56}
.hp-video-lite:hover .hp-play{transform:scale(1.04)}
.hp-video-meta{padding:14px 16px;border-top:1px solid var(--hp-line);background:linear-gradient(180deg,#fff,#f3f7fa)}
.hp-video-meta h3{margin:0 0 4px;font-size:1.08rem;color:#111827}
.hp-video-meta p{margin:0;color:#51657e;line-height:1.58}

.hp-faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp-faq-title{grid-column:1/-1}
.hp-faq details{margin:0;padding:14px 16px;background:#fff;border:1px solid var(--hp-line);border-radius:8px;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.hp-faq summary{cursor:pointer;font-weight:780;position:relative;padding-left:25px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::before{content:"+";position:absolute;left:4px;top:0;color:var(--hp-blue);font-size:1.12rem;font-weight:850;line-height:1.25}
.hp-faq details[open] summary::before{content:"-"}
.hp-faq p{margin:8px 0 0;color:#51647b}

.hp-final{
  padding:24px;
  text-align:center;
  background:#fff;
  border:1px solid var(--hp-line);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.hp-final p{margin:0 0 13px;color:#415872}

.hp-btn:hover,.hp-chip:hover{transform:translateY(-1px)}
.hp-card:hover,.hp-media figure:hover,.hp-video:hover,.hp-quote:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(15,23,42,.1)}
.hp-card,.hp-media figure,.hp-video,.hp-quote,.hp-btn,.hp-chip{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}

@media (prefers-reduced-motion:reduce){
  .hp-card,.hp-media figure,.hp-video,.hp-quote,.hp-btn,.hp-chip{transition:none!important}
}
@media (max-width:980px){
  .hp-main section{padding:34px 0}
  .hp-hero{padding:40px 0 30px!important}
  .hp-hero-grid,.hp-grid-3,.hp-grid-2,.hp-media,.hp-video-layout,.hp-faq{grid-template-columns:1fr}
  .hp-info-list{grid-template-columns:1fr 1fr}
  .hp-info-list article:nth-child(2){border-right:0}
  .hp-info-list article:nth-child(-n+2){border-bottom:1px solid var(--hp-line)}
  .hp-city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-city.-wide{grid-column:1/-1}
  .hp-hero-card h1{font-size:2.15rem}
}
@media (max-width:640px){
  .hp-wrap{width:min(96vw,1180px)}
  .hp-main h2{font-size:1.55rem}
  .hp-hero-card{padding:22px}
  .hp-hero-card h1{font-size:1.85rem}
  .hp-cta-row .hp-btn{width:100%}
  .hp-info-list{grid-template-columns:1fr}
  .hp-info-list article{border-right:0;border-bottom:1px solid var(--hp-line)}
  .hp-info-list article:last-child{border-bottom:0}
  .hp-city-grid{grid-template-columns:1fr}
  .hp-city.-wide{grid-column:auto}
  .hp-final{padding:20px}
}