/* =====================================================================
   BERANDA (index.html) + 404.html
   Hanya komponen khusus halaman; token & komponen dasar ada di sc.css.
   ===================================================================== */

/* ---------- Hero ---------- */
.hero{padding-block:clamp(44px,6.5vw,92px) clamp(150px,17vw,220px)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.hero__title{font-size:clamp(42px,5.8vw,84px);max-width:15ch;letter-spacing:-.022em;word-spacing:.05em}
.hero .lede{max-width:52ch}
.hero__search{width:100%;max-width:600px;margin-top:4px}
.hero__search .field--lg{box-shadow:0 22px 44px -22px rgba(0,0,0,.75),inset 0 0 0 1px rgba(245,200,121,.65)}
.hero__search .field--lg:focus-within{box-shadow:0 22px 44px -22px rgba(0,0,0,.75),inset 0 0 0 1.5px var(--navy),0 0 0 4px rgba(245,200,121,.35)}
.hero__go{height:46px;padding:0 18px;font-size:14.5px;flex:none}
.hero__go::after{inset:3px;border-radius:7px}
.hero__kbd{flex:none}
.hero__chips{display:flex;flex-wrap:wrap;gap:8px;max-width:620px}
.hero .chip{background:rgba(251,247,236,.06);color:var(--on-navy);box-shadow:inset 0 0 0 1px rgba(245,200,121,.32)}
.hero .chip .icon{color:var(--sun)}
.hero .chip:hover{background:rgba(251,247,236,.13);box-shadow:inset 0 0 0 1px var(--sun);color:#fff}
.hero .chip__n{background:rgba(245,200,121,.16);color:var(--sun)}
.hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:640px;margin-top:10px;padding-top:22px;position:relative}
.hero__stats::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-top:1px solid rgba(233,201,127,.55);border-bottom:1px solid rgba(233,201,127,.2)}
.hero__stats .stat{flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0}
.hero__stats .stat+.stat{padding-left:18px;border-left:1px solid rgba(233,201,127,.2)}
.hero__stats .stat__n{font-size:clamp(34px,3.6vw,50px)}
.hero__stats .stat__l{font-size:10px;letter-spacing:.14em}
.hero__fine{font-size:12px;color:rgba(201,209,227,.72);margin-top:-8px}

/* Segel raksasa */
.hero__art{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.sealx{position:relative;width:min(460px,100%);aspect-ratio:1;display:grid;place-items:center}
.sealx__glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(245,200,121,.4),rgba(244,162,107,.12) 62%,transparent);filter:blur(8px)}
.sealx__rays{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from var(--ray),rgba(245,200,121,.62) 0 1.1deg,transparent 1.1deg 7.5deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 50%,#000 52%,#000 64%,transparent 71%);
  mask:radial-gradient(circle closest-side,transparent 50%,#000 52%,#000 64%,transparent 71%);
  animation:raysway 9s var(--ease-io) infinite}
.sealx__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 140s linear infinite}
.sealx__text{font:700 13px var(--f-ui);fill:var(--gold-glow);letter-spacing:.1em}
.sealx__seal{--seal:clamp(150px,16vw,196px);filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}
.sealx__seal::before{animation:spin 80s linear infinite reverse}
.sealx__seal svg{stroke-width:2.2}
.sealx__label{position:absolute;left:50%;bottom:17.5%;transform:translateX(-50%);z-index:3;padding:6px 14px 6px 16px;border-radius:999px;font:700 11px/1 var(--f-ui);letter-spacing:.32em;text-transform:uppercase;color:var(--navy);
  background:linear-gradient(180deg,#fff3d6,var(--gold-pale));box-shadow:0 8px 18px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(184,137,46,.7),inset 0 0 0 3px #fff3d6,inset 0 0 0 4px rgba(184,137,46,.35)}

/* Kartu bukti di bawah segel */
.proof{position:relative;z-index:2;display:flex;align-items:center;gap:12px;width:100%;max-width:410px;margin-top:-18px;padding:12px 14px 12px 12px;border-radius:14px;background:rgba(251,247,236,.97);color:var(--ink);
  box-shadow:0 24px 40px -22px rgba(0,0,0,.75),inset 0 0 0 1px var(--gold-light);transition:transform var(--d-3) var(--ease),box-shadow var(--d-3)}
.proof:hover{transform:translateY(-2px);box-shadow:0 30px 44px -22px rgba(0,0,0,.8),inset 0 0 0 1.5px var(--gold)}
.proof__tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.proof__tx small{font:700 9.5px var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.proof__tx b{font:500 16px/1.2 var(--f-display);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proof__tx>span{font-size:12px;color:var(--muted)}
.proof__chev{width:18px;height:18px;color:var(--gold)}

@media (max-width:1060px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__art{order:2}
  .sealx{width:min(400px,92%)}
}
@media (max-width:640px){
  .hero__kbd{display:none}
  .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .hero__stats .stat:nth-child(3){padding-left:0;border-left:0}
  .sealx{width:min(330px,94%)}
  .sealx__seal{--seal:132px}
  .sealx__text{font-size:14px}
  .sealx__label{font-size:10px;letter-spacing:.26em}
}
@media (hover:none){.hero__kbd{display:none}}

/* ---------- Dua syarat ---------- */
.pillars{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1.02fr);gap:20px;align-items:stretch}
.pillar{padding:30px 28px 26px;display:flex;flex-direction:column;gap:10px}
.pillar .h3{font-size:25px}
.pillar__ic{position:relative;width:60px;height:60px;display:grid;place-items:center;color:var(--sun);margin-bottom:6px}
.pillar__ic::before,.pillar__ic::after{content:"";position:absolute;clip-path:var(--star8)}
.pillar__ic::before{inset:0;background:linear-gradient(160deg,var(--gold-glow),var(--gold));transition:transform var(--d-3) var(--ease-spring)}
.pillar__ic::after{inset:2px;background:radial-gradient(circle at 50% 30%,#2c4a82,var(--navy) 55%,var(--navy-deep))}
.pillar:hover .pillar__ic::before{transform:rotate(22.5deg)}
.pillar__ic .icon{position:relative;z-index:1;width:25px;height:25px}
.pillar__k{font:700 10.5px var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.pillar p{color:var(--ink-soft);font-size:15px}
.pillar__list{list-style:none;display:grid;gap:9px;margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink)}
.pillar__list li{display:flex;align-items:center;gap:10px}
.pillar__list .kh{width:9px;height:9px}
.pillars__and{display:grid;place-items:center}
.pillars__and span{position:relative;isolation:isolate;display:grid;place-items:center;width:58px;height:58px;padding-bottom:4px;font:italic 400 30px/1 var(--f-display);color:var(--navy)}
.pillars__and span::before,.pillars__and span::after{content:"";position:absolute;clip-path:var(--star8);z-index:-1}
.pillars__and span::before{inset:0;background:var(--gold)}
.pillars__and span::after{inset:1.6px;background:var(--card)}

.cycle{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:20px;padding:30px 26px 26px;border-radius:var(--r-lg);color:var(--on-navy);
  background:var(--girih) 0 0/40px 40px,radial-gradient(130% 120% at 50% 0%,#1f3d75 0%,var(--navy-deep) 55%,var(--midnight) 100%);box-shadow:var(--shadow-pop)}
.cycle::before,.cycle::after{content:"";position:absolute;pointer-events:none;border-radius:14px}
.cycle::before{inset:7px;border:1px solid rgba(217,178,90,.55)}
.cycle::after{inset:11px;border:1px solid rgba(217,178,90,.2);border-radius:11px}
.cycle__dial{position:relative;width:min(210px,100%);aspect-ratio:1}
.cycle__dial svg{width:100%;height:100%;overflow:visible}
.cycle__orbit{transform-origin:120px 120px;transform-box:view-box;animation:spin 20s linear infinite}
.cycle__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cycle__center b{font:300 66px/1 var(--f-display);color:var(--sun);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.cycle__center span{font:700 10px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-soft)}
.cycle__legend{list-style:none;display:grid;gap:10px;width:100%;font-size:13.5px;line-height:1.45;color:var(--on-navy-soft);position:relative}
.cycle__legend li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:start}
.cycle__legend b{color:var(--on-navy);font-weight:700}
.cycle__sw{width:12px;height:12px;clip-path:var(--star8);margin-top:3px}
.cycle__sw--gold{background:var(--sun)}
.cycle__sw--renew{background:#e8823c}
.cycle__sw--line{background:rgba(233,201,127,.3)}

@media (max-width:1060px){
  .pillars{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .cycle{grid-column:1/-1;flex-direction:row;justify-content:center;gap:32px;padding:28px 32px}
  .cycle__legend{max-width:340px}
}
@media (max-width:700px){
  .pillars{grid-template-columns:minmax(0,1fr);gap:12px}
  .pillars__and span{width:44px;height:44px;font-size:26px}
  .cycle{flex-direction:column;margin-top:8px}
}

/* ---------- Peta sebaran ---------- */
.mapgrid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,.9fr);gap:20px;align-items:stretch}
.mapgrid .scmap{display:flex;flex-direction:column;justify-content:center;padding-bottom:36px}
.prov{padding:22px 20px 18px;display:flex;flex-direction:column}
.prov__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 6px 12px;position:relative}
.prov__head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.prov__head h3{font:500 20px/1.2 var(--f-display)}
.prov__sum{font:700 10.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap}
.prov__list{list-style:none;display:grid;gap:2px;margin-top:10px}
.prov__list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 12px;padding:7px 6px;border-radius:9px;transition:background var(--d-1)}
.prov__list a:hover{background:var(--tint)}
.prov__name{font-weight:600;font-size:14px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov__count{font:600 13px var(--f-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.prov__count small{font-weight:600;color:var(--gold-ink)}
.prov__bar{grid-column:1/-1;position:relative;height:5px;border-radius:5px;background:var(--vellum);overflow:hidden}
.prov__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.prov__bar .t{background:var(--gold-pale)}
.prov__bar .o{background:linear-gradient(90deg,var(--navy),var(--steel))}
.prov__more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding:14px 6px 0;font-size:12.5px;color:var(--muted)}
.prov__key{display:inline-flex;align-items:center;gap:6px}
.prov__key i{width:14px;height:5px;border-radius:5px}
@media (max-width:960px){.mapgrid{grid-template-columns:minmax(0,1fr)}.mapgrid .scmap{padding-bottom:0}}

/* ---------- Baru diverifikasi ---------- */
.baru__notice{margin-bottom:22px}
@media (max-width:640px){
  .baru__grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);padding:4px var(--gutter-r) 18px var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .baru__grid::-webkit-scrollbar{display:none}
  .baru__grid .lcard{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gutter)}
  .baru__grid .lcard__foot{flex-wrap:wrap;row-gap:4px}
  .baru__grid .lcard__valid{white-space:nowrap}
}

/* ---------- Kategori ---------- */
.kat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kat__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:22px 46px 20px 22px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat);transition:transform var(--d-3) var(--ease),box-shadow var(--d-3)}
.kat__item:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(20,28,51,.04),0 22px 36px -24px rgba(20,28,51,.5),inset 0 0 0 1px var(--gold-light)}
.kat__ic{grid-row:1/3;position:relative;width:54px;height:54px;display:grid;place-items:center;color:var(--navy)}
.kat__ic::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)}
.kat__item:hover .kat__ic::before{transform:rotate(22.5deg);background:var(--gold-pale)}
.kat__ic .icon{position:relative;width:23px;height:23px}
.kat__tx b{display:block;font:500 19px/1.2 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
.kat__tx span{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.kat__n{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font:600 12.5px var(--f-ui);color:var(--ink)}
.kat__n b{font-weight:700;font-variant-numeric:tabular-nums}
.kat__n em{font-style:normal;display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink);font-weight:700}
.kat__n em::before{content:"";width:8px;height:8px;clip-path:var(--star8);background:var(--gold)}
.kat__go{position:absolute;top:24px;right:20px;width:18px;height:18px;color:var(--gold);transition:transform var(--d-2) var(--ease),color var(--d-2)}
.kat__item:hover .kat__go{transform:translateX(3px);color:var(--navy)}
.afil{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin-top:30px}
.afil__k{font:700 10.5px var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.afil__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.afil__tags .tag b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:960px){.kat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kat{grid-template-columns:minmax(0,1fr)}}

/* ---------- Cara kerja relawan ---------- */
.relawan-sec{position:relative;background:var(--girih-ink) 0 0/40px 40px,linear-gradient(180deg,rgba(251,247,236,.9),rgba(251,247,236,.6))}
.relawan-sec::before,.relawan-sec::after{content:"";position:absolute;left:0;right:0;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.relawan-sec::before{top:0}
.relawan-sec::after{bottom:0}
.relawan .steps{margin-top:8px}
@media (min-width:961px){.relawan .step:nth-child(3n) .step__top::after{opacity:0}}
.relawan__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:44px}

/* ---------- Janji perlindungan anak ---------- */
.promise{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px)}
.promise::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-lg) - 5px);pointer-events:none}
.promise__art{display:grid;place-items:center}
.promise__frame{position:relative;width:min(260px,100%);aspect-ratio:4/5;box-shadow:inset 0 0 0 1px rgba(184,137,46,.35),0 22px 36px -26px rgba(20,28,51,.55)}
.promise__fig{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;fill:rgba(20,28,51,.5)}
.promise__blur{position:absolute;left:9%;top:38%;width:82%;height:31%;border-radius:999px;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:rgba(251,247,236,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.promise__x{position:absolute;right:12px;top:14%;width:48px;height:48px;display:grid;place-items:center;color:var(--sun)}
.promise__x::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:var(--navy)}
.promise__x .icon{position:relative;width:21px;height:21px}
.promise__tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.promise__tx p{color:var(--ink-soft);font-size:16px;max-width:58ch}
.promise__rules{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.promise__rules li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:999px;background:var(--vermilion-tint);color:#8e3322;font:600 13px var(--f-ui)}
.promise__rules .icon{width:14px;height:14px;stroke-width:2.6}
@media (max-width:760px){.promise{grid-template-columns:minmax(0,1fr)}.promise__frame{width:min(220px,70%)}}

/* ---------- Pita app ---------- */
.appband{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:center}
.appband__tx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.appband__tx .h2{max-width:24ch}
.appband__tx p{max-width:52ch;font-size:16px}
.appband__cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:8px}
.appband__url{font:600 12.5px var(--f-mono);color:var(--gold-glow);overflow-wrap:anywhere}
.appband__sun{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center}
.appband__rays{position:absolute;left:50%;bottom:0;width:400px;height:200px;margin-left:-200px;
  background:repeating-conic-gradient(from calc(-90deg + var(--ray)) at 50% 100%,rgba(245,200,121,.8) 0 2.2deg,transparent 2.2deg 9deg);
  -webkit-mask:radial-gradient(circle at 50% 100%,transparent 98px,#000 100px,#000 150px,transparent 198px);
  mask:radial-gradient(circle at 50% 100%,transparent 98px,#000 100px,#000 150px,transparent 198px);
  animation:raysway 7s var(--ease-io) infinite}
.appband__disc{position:relative;z-index:1;width:180px;height:90px;border-radius:90px 90px 0 0;display:grid;place-items:center;padding-top:14px;color:var(--midnight);
  background:radial-gradient(circle at 50% 100%,#fff3d4 0,var(--sun) 48%,var(--gold-leaf) 100%);box-shadow:0 0 70px 16px rgba(245,200,121,.32)}
.appband__disc .icon{width:36px;height:36px;stroke-width:1.6}
.appband__horizon{position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--pin3);z-index:2}
@media (max-width:860px){
  .appband{grid-template-columns:minmax(0,1fr)}
  .appband__sun{height:170px;order:-1;overflow:hidden}
  .appband__rays{transform:scale(.8);transform-origin:50% 100%}
  .appband__disc{transform:scale(.85);transform-origin:50% 100%}
}

/* ---------- 404 ---------- */
.nf{padding-block:clamp(56px,8vw,112px) clamp(150px,17vw,220px);text-align:center}
.nf__in{display:flex;flex-direction:column;align-items:center;gap:18px}
.nf__code{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.6vw,18px);font:300 clamp(92px,15vw,188px)/.9 var(--f-display);letter-spacing:-.04em;color:var(--on-navy);font-variant-numeric:lining-nums}
.nf__code .seal{--seal:clamp(80px,12vw,150px);filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.nf__code .seal::before{animation:spin 60s linear infinite}
.nf .lede{margin-inline:auto;max-width:48ch}
.nf__search{width:100%;max-width:520px}
.nf__search .field--lg{box-shadow:0 22px 44px -22px rgba(0,0,0,.75),inset 0 0 0 1px rgba(245,200,121,.65)}
.nf__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nf-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nf-link{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-card),var(--shadow-flat);transition:transform var(--d-3) var(--ease),box-shadow var(--d-3)}
.nf-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--gold-light)}
.nf-link b{font:500 19px/1.2 var(--f-display);display:flex;align-items:center;gap:10px}
.nf-link span{font-size:14px;color:var(--ink-soft)}
.nf-link .kh{width:11px;height:11px}
@media (max-width:760px){.nf-links{grid-template-columns:minmax(0,1fr)}}

/* Pin peta beranda sedikit lebih besar karena petanya lebih kecil */
#berandaPeta .scmap__pin polygon{transform:scale(1.35)}
#berandaPeta .scmap__pin:hover polygon,#berandaPeta .scmap__pin:focus-visible polygon{transform:scale(1.9)}