/* =====================================================================
   SEBELUM CAHAYA: halaman konten
   Dipakai bersama oleh standar, relawan, panduan, perlindungan-anak.
   Awalan: .pg-* (umum), .std-* (standar), .rlw-* (relawan),
   .pdn-* (panduan), .pla-* (perlindungan anak).
   ===================================================================== */

/* ---------- Umum ---------- */
.pg-lift{position:relative;z-index:2;margin-top:clamp(-104px,-8vw,-56px)}
.pg-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.pg-intro--top{align-items:start}
@media (max-width:900px){.pg-intro{grid-template-columns:minmax(0,1fr)}}
.pg-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3.4vw,40px)}
.pg-head .lede{max-width:62ch}
.pg-head--center{align-items:center;text-align:center}
.pg-alt{background:linear-gradient(180deg,rgba(255,253,247,.55),rgba(255,253,247,0));border-top:1px solid var(--line)}
.bullets{list-style:none;display:grid;gap:12px;color:var(--ink-soft)}
.bullets li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;align-items:start}
.bullets li::before{content:"";width:10px;height:10px;margin-top:7px;clip-path:var(--star8);background:var(--gold)}
.bullets b{color:var(--ink)}
.bullets--navy li::before{background:var(--navy)}
.ic-k{position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center;color:var(--navy)}
.ic-k::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:var(--tint);transition:transform var(--d-3) var(--ease-spring),background var(--d-2)}
.ic-k .icon{position:relative;width:22px;height:22px}
.ic-k--gold::before{background:var(--gold-pale)}
.ic-k--gold{color:var(--gold-ink)}
.ic-k--navy::before{background:var(--navy)}
.ic-k--navy{color:var(--sun)}
*:hover>.ic-k::before{transform:rotate(22.5deg)}
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat);-webkit-overflow-scrolling:touch}
.hint{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.55}
.hint .icon{width:16px;height:16px;margin-top:2px;color:var(--gold)}
.phero__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--on-navy-soft)}
.phero__meta span{display:inline-flex;align-items:center;gap:8px}
.phero__meta .kh{background:var(--gold-light);width:8px;height:8px}
.phero__stats{display:flex;flex-wrap:wrap;gap:20px 44px;margin-top:14px;padding-top:22px;border-top:1px solid rgba(233,201,127,.22)}
.phero__stats .stat__n{font-size:clamp(34px,4vw,48px)}

/* =====================================================================
   STANDAR
   ===================================================================== */
/* Rumus: kunjungan + izin = Verified */
.std-formula{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,.82fr);align-items:stretch;gap:14px;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-pop),var(--shadow-flat)}
.std-formula::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-xl) - 6px);pointer-events:none}
.std-formula{position:relative}
.std-pillar{display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.std-pillar__k{font:700 10.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.std-pillar h3{font:500 22px/1.15 var(--f-display);letter-spacing:-.01em}
.std-pillar p{font-size:14px;color:var(--ink-soft)}
.std-pillar .bullets{font-size:13.5px;gap:8px;margin-top:4px}
.std-op{align-self:center;position:relative;width:38px;height:38px;display:grid;place-items:center;font:300 26px/1 var(--f-display);color:var(--navy)}
.std-op::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:var(--gold-pale)}
.std-op span{position:relative;margin-top:-3px}
.std-result{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:22px 16px;border-radius:16px;color:var(--on-navy);
  background:var(--girih) 0 0/36px 36px,radial-gradient(120% 120% at 50% 0%,#24447f,var(--navy-deep) 60%,var(--midnight))}
.std-result b{font:400 26px/1 var(--f-display);letter-spacing:-.01em;color:var(--sun)}
.std-result small{font-size:12.5px;color:var(--on-navy-soft);max-width:22ch}
@media (max-width:980px){
  .std-formula{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .std-formula>.std-op--eq{grid-column:1/-1;justify-self:center}
  .std-result{grid-column:1/-1}
}
@media (max-width:640px){
  .std-formula{grid-template-columns:minmax(0,1fr)}
  .std-op{justify-self:center}
}

/* Enam status */
.std-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.std-status{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.std-status{grid-template-columns:minmax(0,1fr)}}
.std-st{display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat)}
.std-st__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.std-st__n{font:600 12px var(--f-ui);color:var(--muted);white-space:nowrap}
.std-st__n:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-light);text-underline-offset:3px}
.std-st h3{font:500 20px/1.2 var(--f-display);letter-spacing:-.01em}
.std-st p{font-size:14px;color:var(--ink-soft)}
.std-st__do{margin-top:auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--ink-soft)}
.std-st__do .icon{width:17px;height:17px;margin-top:1px;color:var(--navy)}
.std-st__do b{display:block;font:700 10px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:2px}
.std-st--verified{background:linear-gradient(180deg,#fffaf0,var(--card) 40%);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--gold-light)}
.std-st--revoked .std-st__do{background:var(--vermilion-tint);box-shadow:none;color:#7c2e1f}
.std-st--revoked .std-st__do .icon{color:var(--vermilion)}
.std-st--revoked .std-st__do b{color:var(--vermilion)}

/* Simulator masa berlaku */
.std-sim{position:relative;border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-pop),var(--shadow-flat);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.std-sim::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-xl) - 6px);pointer-events:none}
@media (max-width:900px){.std-sim{grid-template-columns:minmax(0,1fr)}}
.std-sim__state{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.std-sim__badge{position:relative;width:104px;height:104px;display:grid;place-items:center}
.std-sim__badge>span{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--d-3),transform var(--d-3) var(--ease-spring)}
.std-sim__badge>span[aria-hidden="true"]{opacity:0;transform:scale(.8) rotate(-22.5deg)}
.std-sim__badge .seal{--seal:104px}
.std-sim__renew{color:var(--ochre)}
.std-sim__renew::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:linear-gradient(160deg,#f6dfa5,#d9a441)}
.std-sim__renew::after{content:"";position:absolute;inset:5px;clip-path:var(--star8);background:#fff7e3}
.std-sim__renew .icon{position:relative;z-index:1;width:38px;height:38px;stroke-width:1.8}
.std-sim__off{color:var(--muted)}
.std-sim__off::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:var(--vellum-2)}
.std-sim__off::after{content:"";position:absolute;inset:3px;clip-path:var(--star8);background:var(--paper)}
.std-sim__off .icon{position:relative;z-index:1;width:36px;height:36px}
.std-sim__title{font:500 26px/1.15 var(--f-display);letter-spacing:-.01em}
.std-sim__desc{font-size:14.5px;color:var(--ink-soft);min-height:4.8em}
.std-sim__day{font:600 12.5px var(--f-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.std-sim__day b{color:var(--ink)}
.std-sim__right{display:flex;flex-direction:column;gap:18px;min-width:0}
.std-sim__head h3{font:500 24px/1.2 var(--f-display);letter-spacing:-.01em}
.std-sim__head p{font-size:14px;color:var(--muted);margin-top:4px}
.std-track{position:relative;padding:34px 0 40px}
.std-track__bar{position:relative;display:flex;height:16px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(20,28,51,.08)}
.std-track__seg{height:100%}
.std-track__seg--ok{flex:182;background:linear-gradient(90deg,var(--navy),var(--navy-soft))}
.std-track__seg--grace{flex:30;background:repeating-linear-gradient(135deg,#e7b452 0 6px,#efc777 6px 12px)}
.std-track__seg--off{flex:28;background:var(--vellum-2)}
.std-track__win{position:absolute;top:0;bottom:0;left:calc(152/240*100%);width:calc(30/240*100%);background:repeating-linear-gradient(90deg,rgba(245,200,121,.55) 0 2px,transparent 2px 6px);pointer-events:none}
.std-track__winlabel{position:absolute;top:0;right:calc(58/240*100%);text-align:right;font:700 9.5px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap}
.std-track__ticks{position:absolute;left:0;right:0;bottom:0;height:34px}
.std-track__tick{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);font:600 11px/1.25 var(--f-ui);color:var(--muted);white-space:nowrap;text-align:center}
.std-track__tick::before{content:"";width:1px;height:8px;background:var(--line-strong);margin-bottom:4px}
.std-track__tick:first-child{transform:none;align-items:flex-start}
.std-track__tick:last-child{transform:translateX(-100%);align-items:flex-end}
.std-track__marker{position:absolute;top:34px;width:34px;height:34px;margin:-9px 0 0 -17px;pointer-events:none;transition:left var(--d-2) var(--ease)}
.std-track__marker::before,.std-track__marker::after{content:"";position:absolute;clip-path:var(--star8)}
.std-track__marker::before{inset:0;background:var(--gold)}
.std-track__marker::after{inset:3px;background:var(--card)}
.std-track__marker i{position:absolute;inset:9px;clip-path:var(--star8);background:var(--navy);z-index:1}
.std-track input[type=range]{position:absolute;left:-17px;right:-17px;top:22px;width:calc(100% + 34px);height:40px;margin:0;opacity:0;cursor:pointer}
.std-track:focus-within .std-track__marker::before{background:var(--navy);box-shadow:none}
.std-track:focus-within .std-track__marker{filter:drop-shadow(0 0 0 var(--gold-ink)) drop-shadow(0 0 6px rgba(184,137,46,.6))}
.std-presets{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:560px){.std-track__tick:nth-child(2),.std-track__tick:nth-child(4){display:none}}
.std-presets .chip{height:34px;font-size:12.5px}

/* Tabel izin */
.ptable{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
.ptable th{text-align:left;font:700 10.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding:16px 18px;background:var(--paper);border-bottom:1px solid var(--line-strong)}
.ptable td{padding:16px 18px;border-bottom:1px dashed var(--line);vertical-align:top;color:var(--ink-soft)}
.ptable tr:last-child td{border-bottom:0}
.ptable td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
.ptable td:first-child .row{flex-wrap:nowrap;gap:10px}
.ptable td:first-child .icon{width:18px;height:18px;color:var(--gold-ink)}
.ptable .tag{height:auto;padding:4px 9px;font-size:12.5px;margin:2px 4px 2px 0;background:var(--tint);color:var(--navy)}
@media (max-width:720px){
  .ptable{min-width:0}
  .ptable thead{display:none}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block}
  .ptable tr{padding:16px 18px;border-bottom:1px dashed var(--line)}
  .ptable tr:last-child{border-bottom:0}
  .ptable td{padding:0;border:0}
  .ptable td+td{margin-top:10px}
  .ptable td[data-label]::before{content:attr(data-label);display:block;font:700 10px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:4px}
  .ptable td:first-child{font-size:16px}
}

/* Lingkup: diperiksa vs tidak dinilai */
.std-scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.std-scope{grid-template-columns:minmax(0,1fr)}}
.std-scope__col{padding:24px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-flat)}
.std-scope__col h3{display:flex;align-items:center;gap:12px;font:500 21px/1.2 var(--f-display);margin-bottom:16px}
.std-scope__col--no{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.std-scope__col--no .bullets li::before{background:var(--muted-2)}

/* =====================================================================
   RELAWAN
   ===================================================================== */
.rlw-why__card{position:relative;padding:22px;border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-pop),var(--shadow-flat)}
.rlw-why__card::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-xl) - 6px);pointer-events:none}
.rlw-why__head{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px dashed var(--line)}
.rlw-why__head .ph{width:64px;height:64px;flex:none;border-radius:var(--r-arch)}
.rlw-why__head b{display:block;font:500 18px/1.2 var(--f-display)}
.rlw-why__head small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:3px}
.rlw-why__head small .icon{width:13px;height:13px;color:var(--gold)}
.rlw-why__eye{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--tint);font-size:13px;color:var(--ink-soft)}
.rlw-why__eye .icon{width:18px;height:18px;color:var(--navy)}
.rlw-why__eye b{color:var(--ink)}

.rlw-req{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1060px){.rlw-req{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.rlw-req{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.rlw-req{grid-template-columns:minmax(0,1fr)}}
.rlw-req__item{display:flex;flex-direction:column;gap:12px;padding:20px 18px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat)}
.rlw-req__item h3{font:500 18px/1.25 var(--f-display)}
.rlw-req__item p{font-size:13.5px;color:var(--ink-soft)}

/* Alur: 7 langkah, 4 kolom */
.rlw-flow{--cols:4}
.rlw-flow .step--key h3::after{content:"Kunci";display:inline-block;vertical-align:3px;margin-left:8px;padding:2px 8px;border-radius:999px;font:700 9.5px/1.4 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:linear-gradient(180deg,#fff3d6,var(--gold-pale));box-shadow:inset 0 0 0 1px rgba(184,137,46,.5)}
@media (min-width:961px){.rlw-flow .step:nth-child(4) .step__top::after{opacity:0}}

/* Surat tugas digital */
.rlw-letter-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.rlw-letter-wrap{grid-template-columns:minmax(0,1fr)}}
.rlw-letter{position:relative;isolation:isolate;padding:clamp(26px,3.4vw,38px);border-radius:var(--r-xl);background:var(--card);box-shadow:0 2px 0 rgba(20,28,51,.05),0 40px 60px -36px rgba(16,32,67,.7),inset 0 0 0 1px var(--line);transform:rotate(-1.2deg);transition:transform var(--d-4) var(--ease)}
.rlw-letter:hover{transform:rotate(0)}
.rlw-letter::before{content:"";position:absolute;inset:9px;border:1px solid var(--gold);border-radius:calc(var(--r-xl) - 8px);pointer-events:none}
.rlw-letter::after{content:"";position:absolute;inset:14px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-xl) - 13px);pointer-events:none}
.rlw-letter__bg{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--girih-ink) 0 0/40px 40px;opacity:.55;-webkit-mask:radial-gradient(70% 60% at 85% 10%,#000,transparent 70%);mask:radial-gradient(70% 60% at 85% 10%,#000,transparent 70%)}
.rlw-letter__c{position:absolute;width:18px;height:18px;color:var(--gold);z-index:1}
.rlw-letter__c--tl{top:5px;left:5px}.rlw-letter__c--tr{top:5px;right:5px}.rlw-letter__c--bl{bottom:5px;left:5px}.rlw-letter__c--br{bottom:5px;right:5px}
.rlw-letter__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.rlw-letter__k{font:700 10px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.rlw-letter h3{font:400 clamp(26px,3vw,34px)/1.05 var(--f-display);letter-spacing:-.02em;margin-top:6px}
.rlw-letter h3 em{font-style:italic;color:var(--navy)}
.rlw-letter__no{font:600 12.5px var(--f-mono);color:var(--muted);margin-top:8px}
.rlw-letter .kv{margin-top:18px}
.rlw-letter .kv__row{grid-template-columns:minmax(0,120px) minmax(0,1fr);padding:10px 0;font-size:13.5px}
.rlw-letter__allow{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.rlw-letter__allow b{display:block;font:700 10px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.rlw-letter__allow .bullets{font-size:13px;gap:6px}
.rlw-letter__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:20px;padding-top:16px;border-top:3px double var(--gold-pale)}
.rlw-letter__sign small{display:block;font-size:11.5px;color:var(--muted)}
.rlw-letter__sign b{display:block;font:italic 400 20px/1.2 var(--f-display);color:var(--navy);margin-top:2px}
.rlw-letter__code{font:600 11.5px var(--f-mono);color:var(--ink-soft);margin-top:6px;letter-spacing:.04em}
.rlw-letter__qr{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.rlw-letter__qr svg{width:86px;height:86px;padding:6px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong)}
.rlw-letter__qr small{font:italic 400 11px var(--f-display);color:var(--muted)}
.rlw-letter__stamp{position:absolute;top:clamp(22px,3vw,32px);right:clamp(22px,3vw,32px);--seal:66px;transform:rotate(8deg)}
@media (max-width:480px){.rlw-letter{transform:none}.rlw-letter__stamp{--seal:52px}}
.rlw-limits{display:grid;gap:12px;margin-top:22px}
.rlw-limit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-flat)}
.rlw-limit b{display:block;font-size:15px;color:var(--ink)}
.rlw-limit p{font-size:14px;color:var(--ink-soft);margin-top:2px}
.rlw-limit .rz{margin-top:2px}

/* =====================================================================
   PANDUAN
   ===================================================================== */
.pdn-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.pdn-phases{grid-template-columns:minmax(0,1fr)}}
.pdn-phase{display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat)}
.pdn-phase__top{display:flex;align-items:center;gap:12px}
.pdn-phase__top small{display:block;font:700 10px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.pdn-phase__top b{display:block;font:500 21px/1.15 var(--f-display)}
.pdn-phase .bullets{font-size:14px;gap:10px}

/* Ceklis foto */
.pdn-check{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.pdn-check{grid-template-columns:minmax(0,1fr)}}
.pdn-meter{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 20px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 24px;border-radius:var(--r-xl);color:var(--on-navy);
  background:var(--girih) 0 0/40px 40px,radial-gradient(130% 130% at 50% 0%,#24447f,var(--navy-deep) 55%,var(--midnight));box-shadow:var(--shadow-pop)}
.pdn-meter::before{content:"";position:absolute;inset:7px;border:1px solid rgba(217,178,90,.55);border-radius:calc(var(--r-xl) - 6px);pointer-events:none}
@media (max-width:900px){.pdn-meter{z-index:5;flex-direction:row;text-align:left;padding:12px 18px;gap:16px;top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 8px)}.pdn-meter__tx{align-items:flex-start}}
.pdn-ring{position:relative;width:180px;height:180px;flex:none}
.pdn-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pdn-ring__track{fill:none;stroke:rgba(233,201,127,.18);stroke-width:8}
.pdn-ring__val{fill:none;stroke:url(#pdnGold);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset var(--d-4) var(--ease)}
.pdn-ring__core{position:absolute;inset:34px;display:grid;place-items:center}
.pdn-ring__core::before,.pdn-ring__core::after{content:"";position:absolute;clip-path:var(--star8);transition:background var(--d-3),transform var(--d-4) var(--ease-spring)}
.pdn-ring__core::before{inset:0;background:rgba(233,201,127,.35)}
.pdn-ring__core::after{inset:2px;background:radial-gradient(circle at 50% 30%,#2c4a82,var(--navy) 60%,var(--navy-deep))}
.pdn-ring__core span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1}
.pdn-ring__core b{font:300 36px/1 var(--f-display);color:var(--on-navy);font-variant-numeric:lining-nums tabular-nums}
.pdn-ring__core small{font:700 9.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-glow);margin-top:6px}
.pdn-meter.is-done .pdn-ring__core::before{background:linear-gradient(160deg,var(--gold-glow),var(--gold));transform:rotate(22.5deg)}
.pdn-meter.is-done .pdn-ring__core::after{transform:rotate(22.5deg)}
@media (max-width:900px){.pdn-ring{width:84px;height:84px}.pdn-ring__core{inset:16px}.pdn-ring__core b{font-size:19px}.pdn-ring__core small{display:none}.pdn-meter__tx b{font-size:17px}.pdn-meter__tx p{font-size:12.5px}.pdn-meter__tx .pdn-reset{margin-top:2px}}
.pdn-meter__tx{display:flex;flex-direction:column;gap:6px;align-items:inherit}
.pdn-meter__tx b{font:500 20px/1.2 var(--f-display)}
.pdn-meter__tx p{font-size:13.5px;color:var(--on-navy-soft)}
.pdn-meter__tx .pdn-reset{margin-top:6px;font:700 12.5px var(--f-ui);color:var(--gold-glow);text-decoration:underline;text-decoration-color:rgba(233,201,127,.5);text-underline-offset:3px;align-self:inherit}
.pdn-items{list-style:none;display:grid;gap:10px}
.pdn-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-flat);text-align:left;transition:box-shadow var(--d-2),background var(--d-2),transform var(--d-2) var(--ease)}
.pdn-item:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.pdn-item:active{transform:scale(.995)}
.pdn-item__box{position:relative;width:28px;height:28px;flex:none;display:grid;place-items:center;color:transparent}
.pdn-item__box::before,.pdn-item__box::after{content:"";position:absolute;clip-path:var(--star8);transition:background var(--d-2),transform var(--d-3) var(--ease-spring)}
.pdn-item__box::before{inset:0;background:var(--line-strong)}
.pdn-item__box::after{inset:1.6px;background:var(--card)}
.pdn-item__box .icon{position:relative;z-index:1;width:14px;height:14px;stroke-width:3;transform:scale(.4);transition:transform var(--d-3) var(--ease-spring)}
.pdn-item__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--navy);flex:none}
.pdn-item__ic .icon{width:19px;height:19px}
.pdn-item__tx b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.pdn-item__tx small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.pdn-item__req{font:700 9.5px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--vellum);color:var(--ink-soft);white-space:nowrap}
.pdn-item__req--must{background:var(--tint);color:var(--navy)}
.pdn-item__req--team{background:var(--ochre-tint);color:var(--ochre)}
.pdn-item[aria-pressed="true"]{background:linear-gradient(90deg,#fff8e6,var(--card) 60%);box-shadow:inset 0 0 0 1px var(--gold-light)}
.pdn-item[aria-pressed="true"] .pdn-item__box::before{background:var(--gold);transform:rotate(22.5deg)}
.pdn-item[aria-pressed="true"] .pdn-item__box::after{background:var(--navy);transform:rotate(22.5deg)}
.pdn-item[aria-pressed="true"] .pdn-item__box{color:var(--sun)}
.pdn-item[aria-pressed="true"] .pdn-item__box .icon{transform:scale(1)}
.pdn-item[aria-pressed="true"] .pdn-item__tx b{text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:1.5px}
@media (max-width:520px){
  .pdn-item{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .pdn-item__ic{display:none}
  .pdn-item__req{grid-column:2;justify-self:start}
}

/* Contoh foto */
.pdn-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.pdn-shots{grid-template-columns:minmax(0,1fr)}}
.pdn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat)}
.pdn-pair h3{grid-column:1/-1;font:500 18px/1.2 var(--f-display);padding:4px 4px 2px}
.pdn-shot{display:flex;flex-direction:column;gap:8px}
.pdn-shot__img{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:12px;overflow:hidden}
.pdn-shot__img svg.art{position:absolute;inset:0;width:100%;height:100%}
.pdn-shot__mark{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;font:700 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.pdn-shot__mark .icon{width:12px;height:12px;stroke-width:3}
.pdn-shot--ok .pdn-shot__mark{background:var(--success-tint);color:var(--success)}
.pdn-shot--no .pdn-shot__mark{background:var(--vermilion-tint);color:var(--vermilion)}
.pdn-shot--no .pdn-shot__img{box-shadow:inset 0 0 0 2px rgba(181,69,47,.5)}
.pdn-shot p{font-size:12.5px;line-height:1.45;color:var(--ink-soft);padding:0 2px 2px}

/* Samarkan dokumen */
.pdn-mask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.pdn-mask{grid-template-columns:minmax(0,1fr)}.pdn-mask>:last-child{order:-1}}
.pdn-doc{position:relative;align-self:stretch;width:100%;padding:26px 26px 22px;border-radius:6px;background:linear-gradient(180deg,#fffef9,#fbf6e8);box-shadow:0 30px 50px -30px rgba(20,28,51,.55),0 2px 0 rgba(20,28,51,.04),inset 0 0 0 1px #e9dfc4;font-size:13px;color:#2b3045;transform:rotate(.8deg)}
.pdn-doc::before{content:"";position:absolute;inset:10px;border:1px solid #d8cba5;pointer-events:none}
.pdn-doc__kop{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid #2b3045}
.pdn-doc__logo{width:38px;height:38px;border-radius:50%;flex:none;background:repeating-conic-gradient(#c9b98d 0 15deg,#e8dfc4 15deg 30deg);box-shadow:inset 0 0 0 3px #fffef9,inset 0 0 0 4px #c9b98d}
.pdn-doc__kop b{display:block;font:700 11.5px/1.3 var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.pdn-doc__kop small{display:block;font-size:10.5px;color:#5b6074}
.pdn-doc__title{text-align:center;margin:14px 0 4px;font:700 13px/1.35 var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.pdn-doc__no{text-align:center;font:600 11.5px var(--f-mono);color:#5b6074}
.pdn-doc dl{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:7px 12px;margin-top:16px}
.pdn-doc dt{color:#5b6074}
.pdn-doc dd{position:relative;font-weight:600;min-width:0;overflow-wrap:anywhere}
.pdn-doc__sign{display:flex;justify-content:flex-end;margin-top:18px}
.pdn-doc__sign div{position:relative;text-align:center;font-size:11.5px;color:#5b6074;min-width:150px}
.pdn-doc__sign svg{width:120px;height:40px;margin:4px auto;color:#2b3045}
.pdn-doc__stamp{position:absolute;left:18px;bottom:20px;width:70px;height:70px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(51,87,143,.55),inset 0 0 0 6px transparent,inset 0 0 0 7px rgba(51,87,143,.35);display:grid;place-items:center;font:700 8px/1.2 var(--f-ui);color:rgba(51,87,143,.65);text-align:center;letter-spacing:.06em;transform:rotate(-14deg)}
.pdn-doc [data-pii]{transition:color var(--d-2)}
.pdn-doc [data-pii]::after{content:"DITUTUP";position:absolute;inset:-2px -4px;display:grid;place-items:center;border-radius:3px;background:var(--navy);color:var(--sun);font:700 9px var(--f-ui);letter-spacing:.2em;transform:scaleX(0);transform-origin:left;transition:transform var(--d-3) var(--ease)}
.pdn-doc.is-masked [data-pii]{color:transparent}
.pdn-doc.is-masked [data-pii]::after{transform:scaleX(1)}
.pdn-doc.is-masked [data-pii="sign"]::after{inset:0 10px}
.pdn-doc__keep{position:absolute;right:-8px;top:50%;transform:translate(100%,-50%);font:700 9px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--success);white-space:nowrap;opacity:0;transition:opacity var(--d-2)}
.pdn-doc.is-masked .pdn-doc__keep{opacity:1}
@media (max-width:640px){.pdn-doc{transform:none;padding:22px 18px 18px}.pdn-doc dl{grid-template-columns:minmax(0,96px) minmax(0,1fr)}.pdn-doc__keep{display:none}.pdn-doc__stamp{display:none}}
.pdn-mask__legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
@media (max-width:480px){.pdn-mask__legend{grid-template-columns:minmax(0,1fr)}}
.pdn-mask__legend div{padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-flat);font-size:13.5px;color:var(--ink-soft)}
.pdn-mask__legend b{display:flex;align-items:center;gap:8px;font:700 10.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.pdn-mask__legend .ok b{color:var(--success)}
.pdn-mask__legend .no b{color:var(--vermilion)}
.pdn-mask__legend .icon{width:14px;height:14px;stroke-width:2.6}

/* Penyusun caption */
.pdn-cap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:900px){.pdn-cap{grid-template-columns:minmax(0,1fr)}}
.pdn-cap__form{display:grid;gap:14px}
.pdn-cap__form .field{height:48px}
.pdn-cap__post{position:relative;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat);overflow:hidden}
.pdn-cap__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pdn-cap__av{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--sun)}
.pdn-cap__av::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:var(--navy)}
.pdn-cap__av .icon{position:relative;width:15px;height:15px}
.pdn-cap__bar b{font-size:13.5px}
.pdn-cap__bar small{display:block;font-size:11.5px;color:var(--muted)}
.pdn-cap__img{height:150px;border-radius:0}
.pdn-cap__txt{padding:16px 18px 6px;font-size:14px;line-height:1.6;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.pdn-cap__txt mark{background:var(--gold-pale);color:var(--ink);border-radius:3px;padding:0 2px}
.pdn-cap__txt .hash{color:var(--steel);font-weight:700}
.pdn-cap__act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 18px}
.pdn-cap__act small{font-size:12.5px;color:var(--muted)}

/* =====================================================================
   PERLINDUNGAN ANAK
   ===================================================================== */
.pla-oath{position:relative;text-align:center;padding:clamp(36px,6vw,72px) clamp(20px,5vw,72px);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-pop),var(--shadow-flat);overflow:hidden;isolation:isolate}
.pla-oath::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold);border-radius:calc(var(--r-xl) - 7px);pointer-events:none}
.pla-oath::after{content:"";position:absolute;inset:13px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-xl) - 12px);pointer-events:none}
.pla-oath__bg{position:absolute;inset:0;z-index:-1;background:var(--girih-ink) 0 0/44px 44px;-webkit-mask:radial-gradient(60% 70% at 50% 50%,transparent 30%,#000 100%);mask:radial-gradient(60% 70% at 50% 50%,transparent 30%,#000 100%);opacity:.7}
.pla-oath__c{position:absolute;width:20px;height:20px;color:var(--gold);z-index:1}
.pla-oath__c--tl{top:4px;left:4px}.pla-oath__c--tr{top:4px;right:4px}.pla-oath__c--bl{bottom:4px;left:4px}.pla-oath__c--br{bottom:4px;right:4px}
.pla-oath q{display:block;quotes:none;font:300 clamp(30px,4.6vw,58px)/1.08 var(--f-display);letter-spacing:-.025em;font-variation-settings:"SOFT" 50,"opsz" 120;color:var(--ink);text-wrap:balance;max-width:20ch;margin-inline:auto}
.pla-oath q em{font-style:italic;color:var(--navy)}
.pla-oath p{margin:18px auto 0;max-width:58ch;color:var(--ink-soft)}
.pla-oath__sig{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:700 10.5px var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.pla-oath__sig::before,.pla-oath__sig::after{content:"";width:40px;height:5px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold-pale)}

.pla-rules{list-style:none;display:grid;gap:12px;counter-reset:r}
.pla-rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-flat)}
.pla-rule b{display:block;font:500 19px/1.25 var(--f-display);color:var(--ink)}
.pla-rule p{font-size:14.5px;color:var(--ink-soft);margin-top:4px}

/* Galeri siluet boleh / hindari */
.pla-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.pla-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pla-gallery{grid-template-columns:minmax(0,1fr)}}
.pla-tile{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat);overflow:hidden}
.pla-tile__art{position:relative;aspect-ratio:4/3;max-width:100%;margin:8px 8px 0;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#f3ead4,#e9dcbc)}
.pla-tile__art svg{position:absolute;inset:0;width:100%;height:100%}
.pla-tile--no .pla-tile__art{background:linear-gradient(180deg,#f2e3dc,#e7cfc4)}
.pla-tile__x{position:absolute;inset:0;pointer-events:none}
.pla-tile__x::before,.pla-tile__x::after{content:"";position:absolute;left:50%;top:50%;width:78%;height:3px;border-radius:3px;background:rgba(181,69,47,.75);transform:translate(-50%,-50%) rotate(32deg)}
.pla-tile__x::after{transform:translate(-50%,-50%) rotate(-32deg)}
.pla-tile__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.pla-tile__k{display:inline-flex;align-items:center;gap:6px;font:700 10px var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
.pla-tile__k .icon{width:13px;height:13px;stroke-width:2.8}
.pla-tile--ok .pla-tile__k{color:var(--success)}
.pla-tile--no .pla-tile__k{color:var(--vermilion)}
.pla-tile__body b{font:500 17px/1.25 var(--f-display);color:var(--ink)}
.pla-tile__body p{font-size:13.5px;color:var(--ink-soft)}

/* Data publik vs data tim */
.pla-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.pla-data{grid-template-columns:minmax(0,1fr)}}
.pla-data__col{padding:22px 22px 20px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-flat)}
.pla-data__col h3{display:flex;align-items:center;gap:12px;font:500 20px/1.2 var(--f-display);margin-bottom:14px}
.pla-data__col--team{background:var(--navy-deep);color:var(--on-navy);box-shadow:var(--shadow-pop);background-image:var(--girih);background-size:40px 40px}
.pla-data__col--team h3{color:var(--on-navy)}
.pla-data__col--team .bullets{color:var(--on-navy-soft)}
.pla-data__col--team .bullets b{color:var(--on-navy)}
.pla-data__col--team .bullets li::before{background:var(--gold-light)}

/* Tingkat pelanggaran */
.pla-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.pla-levels{grid-template-columns:minmax(0,1fr)}}
.pla-level{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-flat)}
.pla-level__k{display:flex;align-items:center;gap:10px;font:700 10.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ochre)}
.pla-level__k i{display:flex;gap:3px}
.pla-level__k i::before,.pla-level__k i::after,.pla-level__k i span{content:"";width:9px;height:9px;clip-path:var(--star8);background:var(--line-strong)}
.pla-level--1 .pla-level__k i::before{background:var(--ochre)}
.pla-level--2 .pla-level__k{color:#a8492a}
.pla-level--2 .pla-level__k i::before,.pla-level--2 .pla-level__k i span{background:var(--coral)}
.pla-level--3 .pla-level__k{color:var(--vermilion)}
.pla-level--3 .pla-level__k i::before,.pla-level--3 .pla-level__k i span,.pla-level--3 .pla-level__k i::after{background:var(--vermilion)}
.pla-level b{font:500 19px/1.25 var(--f-display)}
.pla-level p{font-size:14px;color:var(--ink-soft)}
.pla-level__then{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink)}
.pla-level__then strong{font:700 10px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}

/* Kotak lapor */
.pla-report{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px}
@media (max-width:860px){.pla-report{grid-template-columns:minmax(0,1fr)}}
.pla-mail{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,32px);border-radius:var(--r-xl);color:var(--on-navy);position:relative;isolation:isolate;overflow:hidden;
  background:var(--girih) 0 0/40px 40px,radial-gradient(130% 160% at 0% 0%,#1f3d75 0%,var(--navy-deep) 52%,var(--midnight) 100%);box-shadow:var(--shadow-pop)}
.pla-mail::before{content:"";position:absolute;inset:7px;border:1px solid rgba(217,178,90,.55);border-radius:calc(var(--r-xl) - 6px);pointer-events:none}
.pla-mail h3{font:400 clamp(24px,2.6vw,30px)/1.15 var(--f-display)}
.pla-mail h3 em{font-style:italic;color:var(--sun)}
.pla-mail p{color:var(--on-navy-soft);font-size:14.5px}
.pla-mail__addr{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pla-mail__addr code{font:600 clamp(15px,1.8vw,19px) var(--f-mono);color:var(--sun);padding:10px 14px;border-radius:10px;background:rgba(251,247,236,.07);box-shadow:inset 0 0 0 1px rgba(245,200,121,.35);user-select:all;overflow-wrap:anywhere}
.pla-mail ol{padding-left:1.2em;color:var(--on-navy-soft);font-size:14px;display:grid;gap:4px}
.pla-mail ol li::marker{color:var(--gold-glow)}
.pla-sos{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r-xl);background:var(--vermilion-tint);color:#6e2a1c}
.pla-sos h3{display:flex;align-items:center;gap:10px;font:500 21px/1.2 var(--f-display);color:#5e2014}
.pla-sos h3 .icon{color:var(--vermilion);width:22px;height:22px}
.pla-sos p{font-size:14px}
.pla-sos__nums{display:grid;gap:10px}
.pla-sos__num{display:flex;align-items:baseline;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.55)}
.pla-sos__num b{font:400 30px/1 var(--f-display);color:#5e2014;font-variant-numeric:lining-nums}
.pla-sos__num span{font-size:13.5px}