/* =====================================================================
   SEBELUM CAHAYA — sistem desain situs direktori
   Turunan styleguide 3B "Perkamen Navy": latar Mushaf (kertas, girih,
   langit subuh, bingkai emas rangkap) × tombol Fajar Deco, navy merek.
   Satu tampilan terang yang disengaja (kertas); tidak ada mode gelap.
   Satu-satunya bentuk penanda: khatam (bintang delapan, --star8).
   ===================================================================== */
@property --ray{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  /* Kertas & tinta */
  --paper:#fbf7ec;
  --parchment:#f4ecd8;
  --card:#fffdf7;
  --vellum:#efe4c9;
  --vellum-2:#e6d9b8;
  --ink:#141c33;
  --ink-soft:#3d4763;
  --muted:#5f6679;
  --muted-2:#9ca1b0;
  --line:#e4d8bb;
  --line-strong:#cbb98c;

  /* Navy merek */
  --midnight:#0a142c;
  --navy-deep:#102043;
  --navy:#15274e;
  --navy-soft:#203a6c;
  --steel:#33578f;
  --tint:#e8edf6;

  /* Emas daun + matahari */
  --gold-ink:#8a6420;
  --gold:#b8892e;
  --gold-light:#d9b25a;
  --gold-glow:#e9c97f;
  --gold-pale:#eedcae;
  --gold-leaf:#dcae55;
  --sun:#f5c879;

  /* Cahaya fajar — hanya di dalam tombol & cakrawala */
  --coral:#e2674f;
  --apricot:#f4a26b;

  /* Status */
  --success:#2f7a52;  --success-tint:#dfeddf;
  --ochre:#8a5a00;    --ochre-tint:#f3e5c2;
  --lapis:#33578f;    --lapis-tint:#e1e8f4;
  --vermilion:#b5452f;--vermilion-tint:#f6e1da;
  --plum:#6a3f7a;     --plum-tint:#eee3f1;

  --on-navy:#fbf7ec;
  --on-navy-soft:#c9d1e3;

  --shadow-flat:inset 0 0 0 1px var(--line);
  --shadow-card:0 1px 0 rgba(20,28,51,.04),0 14px 30px -22px rgba(20,28,51,.45);
  --shadow-pop:0 2px 0 rgba(20,28,51,.05),0 28px 50px -28px rgba(16,32,67,.68);

  --r-xl:28px;--r-lg:20px;--r-md:15px;--r-sm:11px;--r-xs:7px;--r-btn:10px;
  --r-arch:50% 50% 12px 12px / 38% 38% 12px 12px;

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-1:140ms;--d-2:240ms;--d-3:420ms;--d-4:900ms;

  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --head-h:72px;

  --star8:polygon(100% 50%,85.36% 64.64%,85.36% 85.36%,64.64% 85.36%,50% 100%,35.36% 85.36%,14.64% 85.36%,14.64% 64.64%,0 50%,14.64% 35.36%,14.64% 14.64%,35.36% 14.64%,50% 0,64.64% 14.64%,85.36% 14.64%,85.36% 35.36%);
  --girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d9b25a' stroke-opacity='.32' stroke-width='.7'%3E%3Crect x='11' y='11' width='18' height='18'/%3E%3Cpath d='M20 7.3L32.7 20 20 32.7 7.3 20z'/%3E%3Cpath d='M20 0v7.3M20 32.7V40M0 20h7.3M32.7 20H40M0 0l11 11M40 0L29 11M0 40l11-11M40 40L29 29'/%3E%3Ccircle cx='20' cy='20' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  --girih-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b8892e' stroke-opacity='.22' stroke-width='.7'%3E%3Crect x='11' y='11' width='18' height='18'/%3E%3Cpath d='M20 7.3L32.7 20 20 32.7 7.3 20z'/%3E%3Cpath d='M20 0v7.3M20 32.7V40M0 20h7.3M32.7 20H40M0 0l11 11M40 0L29 11M0 40l11-11M40 40L29 29'/%3E%3C/g%3E%3C/svg%3E");
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pin3:linear-gradient(var(--gold),var(--gold)) 0 0/100% 1px no-repeat,linear-gradient(var(--gold-leaf),var(--gold-leaf)) 0 50%/100% 1px no-repeat,linear-gradient(var(--gold-pale),var(--gold-pale)) 0 100%/100% 1px no-repeat;
  color-scheme:light;
}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{font-family:var(--f-ui);font-size:15.5px;color:var(--ink);background-color:var(--parchment);background-image:var(--noise);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:8px}
::selection{background:var(--gold-pale);color:var(--ink)}
.num{font-variant-numeric:lining-nums tabular-nums}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 16px;border-radius:10px;background:var(--navy);color:var(--on-navy);font:700 14px var(--f-ui);transition:top var(--d-2)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
@keyframes raysway{0%,100%{--ray:-6deg}50%{--ray:6deg}}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Tata letak ---------- */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.wrap--narrow{max-width:860px}
.section{padding-block:clamp(56px,8vw,104px)}
.section--tight{padding-block:clamp(36px,5vw,64px)}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row{display:flex;align-items:center;gap:var(--gap,12px);flex-wrap:wrap}
.grid{display:grid;gap:var(--gap,20px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}

/* ---------- Tipografi ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 11px/1.2 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow::after{content:"";width:56px;height:5px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold-pale)}
.eyebrow--plain::after{display:none}
.eyebrow--light{color:var(--gold-glow)}
.eyebrow--light::after{border-color:rgba(233,201,127,.7);border-bottom-color:rgba(233,201,127,.3)}
.display{font:300 clamp(44px,7.4vw,100px)/.95 var(--f-display);letter-spacing:-.035em;font-variation-settings:"SOFT" 50,"opsz" 144;text-wrap:balance}
.display em{font-style:italic;font-weight:300;color:var(--navy)}
.h1{font:400 clamp(36px,5vw,60px)/1.02 var(--f-display);letter-spacing:-.025em;font-variation-settings:"SOFT" 40,"opsz" 120;text-wrap:balance}
.h2{font:400 clamp(30px,3.8vw,46px)/1.06 var(--f-display);letter-spacing:-.02em;font-variation-settings:"SOFT" 40;text-wrap:balance}
.h3{font:500 clamp(21px,2vw,25px)/1.2 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.h1 em,.h2 em,.h3 em{font-style:italic;color:var(--navy)}
.lede{font:400 clamp(17px,1.5vw,20px)/1.6 var(--f-display);color:var(--ink-soft);font-variation-settings:"opsz" 18;max-width:60ch;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:13px}
.prose{max-width:68ch;color:var(--ink-soft)}
.prose>*+*{margin-top:1em}
.prose h2{font:500 28px/1.15 var(--f-display);color:var(--ink);margin-top:1.6em;letter-spacing:-.01em}
.prose h3{font:600 19px/1.3 var(--f-display);color:var(--ink);margin-top:1.4em}
.prose b,.prose strong{color:var(--ink)}
.prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-light);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--gold)}
.link{color:var(--navy);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.link .icon{width:16px;height:16px;transition:transform var(--d-2) var(--ease)}
.link:hover .icon{transform:translateX(3px)}
.kh{display:inline-block;width:10px;height:10px;background:var(--gold);clip-path:var(--star8);flex:none}

/* Judul bagian */
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head--center{align-items:center;text-align:center}
.sec-head--center .lede{margin-inline:auto}
.sec-head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-head--split>div{display:flex;flex-direction:column;gap:12px;min-width:0}
.rule-2{height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.rule-3{height:7px;background:var(--pin3)}

/* ---------- Header situs ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.sh{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(251,247,236,.86);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px)}
.sh::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);opacity:.8;pointer-events:none}
.sh__in{height:var(--head-h);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__tx{display:flex;flex-direction:column;line-height:1}
.brand__tx b{font:500 19px/1 var(--f-display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand__tx b i{font-style:italic;color:var(--navy)}
.brand__tx small{font:700 9.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-top:5px}
.mark{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center}
.mark::before,.mark::after{content:"";position:absolute;clip-path:var(--star8)}
.mark::before{inset:0;background:linear-gradient(160deg,var(--gold-glow),var(--gold));transition:transform var(--d-3) var(--ease-spring)}
.mark::after{inset:2px;background:radial-gradient(circle at 50% 30%,#2c4a82,var(--navy) 55%,var(--navy-deep))}
.mark svg{position:relative;z-index:1;width:24px;height:24px}
.brand:hover .mark::before{transform:rotate(22.5deg)}
.mark--lg{width:72px;height:72px}
.mark--lg::after{inset:3px}
.mark--lg svg{width:42px;height:42px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{position:relative;height:40px;padding:0 13px;display:inline-flex;align-items:center;border-radius:9px;font:600 14px var(--f-ui);color:var(--ink-soft);transition:color var(--d-2),background var(--d-2),box-shadow var(--d-2),transform var(--d-1) var(--ease);white-space:nowrap}
/* Khatam penanda: berputar masuk saat hover, menetap di halaman aktif */
.nav a::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;clip-path:var(--star8);background:linear-gradient(160deg,var(--gold-glow),var(--gold));transform:scale(0) rotate(-45deg);transition:transform var(--d-3) var(--ease-spring);pointer-events:none}
.nav a:hover{color:var(--navy);background:rgba(239,228,201,.55);box-shadow:inset 0 0 0 1px rgba(203,185,140,.6)}
.nav a:hover::after{transform:scale(.8)}
.nav a:active{transform:translateY(1px)}
/* Aktif: lempeng emas pucat berbingkai rangkap, seperti lencana Verified */
.nav a[aria-current="page"]{color:var(--navy);background:linear-gradient(180deg,#fff6df,var(--gold-pale));box-shadow:inset 0 0 0 1px rgba(184,137,46,.55),inset 0 1px 0 rgba(255,255,255,.7),0 8px 16px -12px rgba(138,100,32,.75)}
.nav a[aria-current="page"]:hover{background:linear-gradient(180deg,#fff9e8,#f2e2b8)}
.nav a[aria-current="page"]::before{content:"";position:absolute;inset:3px;border-radius:6px;border:1px solid rgba(184,137,46,.22);pointer-events:none}
.nav a[aria-current="page"]::after{transform:none}
.sh__cta{flex:none}
.sh__menu{display:none;width:44px;height:44px;border-radius:10px;place-items:center;margin-left:auto;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-strong)}
@media (max-width:1240px){
  .sh__in{gap:18px}
  .nav{gap:2px}
  .nav a{padding:0 10px}
}
@media (max-width:1120px){
  .sh .nav,.sh .sh__cta{display:none}
  .sh .sh__menu{display:grid}
}
/* Laci menu ponsel */
.drawer{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;pointer-events:none;visibility:hidden;transition:visibility 0s linear var(--d-3)}
.drawer__scrim{position:absolute;inset:0;background:rgba(10,20,44,.45);opacity:0;transition:opacity var(--d-3)}
.drawer__panel{position:relative;width:min(380px,88vw);height:100%;overflow-y:auto;transform:translateX(100%);transition:transform var(--d-3) var(--ease);color:var(--on-navy);
  background:var(--girih) 0 0/40px 40px,linear-gradient(180deg,var(--midnight),var(--navy-deep) 60%,var(--navy));
  padding:calc(env(safe-area-inset-top,0px) + 20px) max(24px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) 24px;display:flex;flex-direction:column;gap:22px}
.drawer.is-open{pointer-events:auto;visibility:visible;transition:visibility 0s}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between}
.drawer__close{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--sun);box-shadow:inset 0 0 0 1px rgba(245,200,121,.4)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{display:flex;align-items:center;gap:14px;padding:15px 2px;font:400 23px/1.2 var(--f-display);border-bottom:1px solid rgba(233,201,127,.16)}
.drawer nav a .kh{background:var(--gold-light);width:9px;height:9px}
.drawer nav a[aria-current="page"]{color:var(--sun)}
.drawer nav a[aria-current="page"] .kh{background:var(--sun);transform:scale(1.4)}
.drawer .brand__tx b{color:var(--on-navy)}
.drawer .brand__tx b i{color:var(--gold-glow)}
.drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.drawer__foot p{font-size:12.5px;color:var(--on-navy-soft)}

/* ---------- Footer ---------- */
.sf{position:relative;isolation:isolate;margin-top:clamp(40px,6vw,80px);color:var(--on-navy);overflow:hidden;
  background:var(--girih) 0 0/40px 40px,radial-gradient(120% 140% at 0% 0%,#1f3d75 0%,var(--navy-deep) 45%,var(--midnight) 100%)}
.sf::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(var(--gold),var(--gold)) 0 0/100% 1px no-repeat,linear-gradient(rgba(233,201,127,.55),rgba(233,201,127,.55)) 0 3px/100% 1px no-repeat,linear-gradient(rgba(233,201,127,.25),rgba(233,201,127,.25)) 0 6px/100% 1px no-repeat}
.sf__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding-block:64px 44px}
.sf__brand p{color:var(--on-navy-soft);font-size:14px;max-width:36ch;margin-top:16px}
.sf__brand .brand__tx b{color:var(--on-navy)}
.sf__brand .brand__tx b i{color:var(--gold-glow)}
.sf h4{font:700 10.5px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-glow);margin-bottom:14px}
.sf ul{list-style:none;display:grid;gap:9px}
.sf ul a{font-size:14px;color:var(--on-navy-soft);transition:color var(--d-1);overflow-wrap:anywhere}
.sf ul a:hover{color:var(--sun)}
.sf__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px calc(env(safe-area-inset-bottom,0px) + 24px);border-top:1px solid rgba(233,201,127,.18);font-size:12.5px;color:var(--on-navy-soft)}
.sf__bot b{color:var(--gold-glow);font-weight:600}
@media (max-width:860px){.sf__top{grid-template-columns:repeat(2,minmax(0,1fr))}.sf__brand{grid-column:1/-1}}

/* ---------- Tombol (Fajar Deco) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--r-btn);font:700 15px/1 var(--f-ui);letter-spacing:.005em;white-space:nowrap;position:relative;transition:transform var(--d-1) var(--ease),box-shadow var(--d-2),background var(--d-2),color var(--d-2)}
.btn .icon{width:19px;height:19px}
.btn--block{width:100%}
.btn--primary{color:var(--on-navy);background:radial-gradient(60% 120% at 50% 140%,rgba(244,162,107,.6),rgba(226,103,79,.12) 55%,transparent 75%),linear-gradient(180deg,var(--navy-soft),var(--navy) 55%,var(--navy-deep));box-shadow:inset 0 0 0 1px rgba(245,200,121,.6),0 12px 22px -14px rgba(10,20,44,.85)}
.btn--primary::after{content:"";position:absolute;inset:4px;border-radius:7px;border:1px solid rgba(245,200,121,.2);pointer-events:none}
.btn--primary .icon{color:var(--sun)}
.btn--primary:hover{background:radial-gradient(60% 120% at 50% 130%,rgba(244,162,107,.75),rgba(226,103,79,.16) 55%,transparent 78%),linear-gradient(180deg,#27447b,#182d59 55%,#0e1d3d)}
.btn--primary:active{transform:translateY(1px) scale(.992);box-shadow:inset 0 2px 8px rgba(0,0,0,.35),inset 0 0 0 1px rgba(245,200,121,.6)}
.btn--sun{color:var(--midnight);background:linear-gradient(180deg,#ffe0a3,var(--sun) 55%,var(--gold-leaf));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(122,86,15,.4),0 12px 20px -14px rgba(0,0,0,.6)}
.btn--sun::after{content:"";position:absolute;inset:4px;border-radius:7px;border:1px solid rgba(122,86,15,.25);pointer-events:none}
.btn--sun:hover{background:linear-gradient(180deg,#ffe8b8,#f8d18b 55%,#e3b964)}
.btn--sun:active{transform:translateY(1px) scale(.992)}
.btn--ghost{color:var(--navy);background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--navy)}
.btn--ghost:active{transform:translateY(1px)}
.btn--light{color:var(--on-navy);background:rgba(251,247,236,.06);box-shadow:inset 0 0 0 1px rgba(245,200,121,.45)}
.btn--light:hover{background:rgba(251,247,236,.12);box-shadow:inset 0 0 0 1px var(--sun)}
.btn--light .icon{color:var(--sun)}
.btn--sm{height:42px;padding:0 16px;font-size:13.5px;border-radius:9px}
.btn--sm::after{inset:3px;border-radius:6px}
.btn--lg{height:58px;padding:0 30px;font-size:16px}
.btn:disabled,.btn.is-disabled,.btn[aria-disabled="true"]{color:#5e5848;background:var(--vellum-2);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:not-allowed;transform:none}
.btn:disabled::after,.btn.is-disabled::after,.btn[aria-disabled="true"]::after{display:none}
.btn:disabled .icon,.btn.is-disabled .icon,.btn[aria-disabled="true"] .icon{color:inherit}

/* ---------- Form ---------- */
.field{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);transition:box-shadow var(--d-2),background var(--d-2)}
.field:focus-within{box-shadow:inset 0 0 0 1.5px var(--navy),0 0 0 4px rgba(21,39,78,.1);color:var(--navy)}
.field .icon{width:18px;height:18px}
.field__input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:15px;color:var(--ink)}
.field__input::placeholder{color:var(--muted-2)}
.field__input::-webkit-search-cancel-button{display:none}
.field__kbd{font:600 11px var(--f-mono);color:var(--muted);padding:3px 7px;border-radius:5px;background:var(--vellum)}
.field--lg{height:62px;border-radius:12px;padding:0 8px 0 18px}
.field--lg .field__input{font-size:16.5px}
.select{position:relative;display:flex;align-items:center}
.select select{appearance:none;-webkit-appearance:none;width:100%;height:44px;padding:0 38px 0 14px;border-radius:10px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong);font:600 14px var(--f-ui);color:var(--ink);cursor:pointer}
.select select:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--navy),0 0 0 4px rgba(21,39,78,.1)}
.select .icon{position:absolute;right:12px;width:16px;height:16px;transform:rotate(90deg);pointer-events:none;color:var(--gold-ink)}
.label{display:block;font:700 10.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

.seg{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:var(--vellum);box-shadow:inset 0 1px 2px rgba(20,28,51,.08)}
.seg__btn{min-width:0;height:36px;padding:0 14px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:700 13.5px var(--f-ui);color:var(--ink-soft);white-space:nowrap;transition:background var(--d-2),color var(--d-2),box-shadow var(--d-2)}
.seg__btn .icon{width:16px;height:16px}
.seg__btn:hover{color:var(--ink)}
.seg__btn--on,.seg__btn--on:hover{background:var(--navy);color:var(--on-navy);box-shadow:inset 0 0 0 1px rgba(245,200,121,.5),0 6px 12px -8px rgba(10,20,44,.7)}
.seg__btn--on .icon{color:var(--sun)}

.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong);font:600 13px var(--f-ui);color:var(--ink-soft);white-space:nowrap;transition:background var(--d-2),box-shadow var(--d-2),color var(--d-2)}
.chip .icon{width:15px;height:15px}
.chip:hover{box-shadow:inset 0 0 0 1px var(--navy);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--on-navy);box-shadow:inset 0 0 0 1px rgba(245,200,121,.55)}
.chip[aria-pressed="true"] .icon{color:var(--sun)}
.chip__n{font:600 11px var(--f-ui);padding:1px 6px;border-radius:999px;background:var(--vellum);color:var(--muted)}
.chip[aria-pressed="true"] .chip__n{background:rgba(245,200,121,.2);color:var(--sun)}
.tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;background:var(--vellum);color:var(--ink-soft);font:600 13px var(--f-ui)}
.tag .kh{width:8px;height:8px}

/* ---------- Status & lencana ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border-radius:999px;font:700 10.5px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill i{width:9px;height:9px;flex:none;clip-path:var(--star8);background:currentColor}
.pill--verified{color:var(--navy);background:linear-gradient(180deg,#fff3d6,var(--gold-pale));box-shadow:inset 0 0 0 1px rgba(184,137,46,.55)}
.pill--verified i{background:var(--gold)}
.pill--renew{color:var(--ochre);background:var(--ochre-tint)}
.pill--permit{color:var(--lapis);background:var(--lapis-tint)}
.pill--visited{color:var(--success);background:var(--success-tint)}
.pill--review{color:var(--plum);background:var(--plum-tint)}
.pill--revoked{color:#9b3a26;background:var(--vermilion-tint)}
.pill--off{color:var(--ink-soft);background:var(--vellum)}

/* Segel Verified: khatam emas berlapis + centang */
.seal{position:relative;width:var(--seal,56px);height:var(--seal,56px);flex:none;display:grid;place-items:center;color:var(--sun)}
.seal::before,.seal::after,.seal>i{content:"";position:absolute;clip-path:var(--star8)}
.seal::before{inset:0;background:linear-gradient(160deg,var(--gold-glow),var(--gold) 60%,var(--gold-ink))}
.seal::after{inset:calc(var(--seal,56px)*.05);background:radial-gradient(circle at 50% 30%,#2c4a82,var(--navy) 55%,var(--navy-deep))}
.seal>i{inset:calc(var(--seal,56px)*.14);background:rgba(245,200,121,.45);z-index:1}
.seal>i::after{content:"";position:absolute;inset:1px;clip-path:var(--star8);background:radial-gradient(circle at 50% 30%,#2c4a82,var(--navy) 60%,var(--navy-deep))}
.seal svg{position:relative;z-index:2;width:42%;height:42%;stroke-width:2.6}
.seal--spin::before{animation:spin 40s linear infinite}

/* Nomor khatam berbingkai rangkap */
.rz{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;flex:none;font:600 14px/1 var(--f-display);color:var(--navy);font-variant-numeric:lining-nums}
.rz::before,.rz::after{content:"";position:absolute;clip-path:var(--star8)}
.rz::before{inset:0;background:var(--gold);transition:transform var(--d-3) var(--ease-spring)}
.rz::after{inset:1.6px;background:var(--card)}
.rz>i{position:absolute;inset:4.5px;clip-path:var(--star8);background:var(--gold-pale);z-index:1}
.rz>i::after{content:"";position:absolute;inset:1px;clip-path:var(--star8);background:var(--card)}
.rz>span{position:relative;z-index:2}
.rz--navy{color:var(--sun)}
.rz--navy::after,.rz--navy>i::after{background:var(--navy-deep)}
.rz--navy>i{background:rgba(245,200,121,.55)}
.rz--lg{width:60px;height:60px;font-size:24px}
.rz--lg::after{inset:2px}
.rz--lg>i{inset:8px}
*:hover>.rz::before{transform:rotate(22.5deg)}

/* ---------- Plakat bab (unwan) ---------- */
.unwan{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:28px 32px;border-radius:var(--r-lg);color:var(--on-navy);
  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)}
.unwan::before,.unwan::after{content:"";position:absolute;pointer-events:none;border-radius:14px}
.unwan::before{inset:7px;border:1px solid rgba(217,178,90,.6)}
.unwan::after{inset:11px;border:1px solid rgba(217,178,90,.22);border-radius:11px}
.unwan__k{font:700 10.5px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-glow)}
.unwan h2{font:400 clamp(26px,3.2vw,40px)/1.06 var(--f-display);letter-spacing:-.015em;margin-top:6px;font-variation-settings:"SOFT" 40}
.unwan h2 em{font-style:italic;color:var(--gold-glow)}
.unwan p{color:var(--on-navy-soft);font-size:14.5px;max-width:62ch;margin-top:8px}
.unwan__c{position:absolute;width:20px;height:20px;z-index:1;color:var(--gold-light)}
.unwan__c--tl{top:2px;left:2px}.unwan__c--tr{top:2px;right:2px}.unwan__c--bl{bottom:2px;left:2px}.unwan__c--br{bottom:2px;right:2px}
@media (max-width:640px){.unwan{grid-template-columns:minmax(0,1fr);padding:26px 24px}}

/* ---------- Langit subuh (hero gelap) ---------- */
.dawn{position:relative;overflow:hidden;isolation:isolate;color:var(--on-navy);
  background:radial-gradient(110% 55% at 50% 112%,rgba(240,205,130,.9) 0%,rgba(226,103,79,.28) 30%,transparent 60%),linear-gradient(180deg,#070f24 0%,var(--navy-deep) 40%,#15274e 72%,#3a5a93 100%)}
.dawn::before{content:"";position:absolute;inset:0;background:var(--girih) 0 0/44px 44px;opacity:.6;-webkit-mask:linear-gradient(180deg,#000 0%,transparent 78%);mask:linear-gradient(180deg,#000 0%,transparent 78%);z-index:-1}
.dawn__star{position:absolute;width:7px;height:7px;background:var(--gold-glow);clip-path:var(--star8);animation:twinkle 3.2s var(--ease-io) infinite;z-index:-1}
.dawn__star:nth-of-type(2n){animation-delay:-1.2s}
.dawn__star:nth-of-type(3n){animation-delay:-2.1s;width:5px;height:5px}
.dawn__sky{position:absolute;left:0;right:0;bottom:0;height:min(160px,22vw);z-index:-1;pointer-events:none}
.dawn__sky svg{width:100%;height:100%}
.dawn .h1 em,.dawn .h2 em,.dawn .display em{color:var(--sun)}
.dawn .lede{color:var(--on-navy-soft)}

/* Kepala halaman ringkas (untuk halaman selain beranda) */
.phero{padding-block:clamp(44px,6vw,80px) clamp(72px,9vw,128px)}
.phero__in{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.phero__in>*{max-width:780px}
.phero .lede{max-width:56ch}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 12.5px var(--f-ui);color:var(--muted)}
.crumb a{color:var(--navy)}
.crumb a:hover{text-decoration:underline;text-decoration-color:var(--gold-light);text-underline-offset:3px}
.crumb .icon{width:13px;height:13px;color:var(--gold)}
.dawn .crumb{color:var(--on-navy-soft)}
.dawn .crumb a{color:var(--gold-glow)}

/* ---------- Kartu ---------- */
.card{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-card),var(--shadow-flat)}
.card--frame::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold-pale);border-radius:calc(var(--r-lg) - 5px);pointer-events:none}
.card__pad{padding:24px}

/* Foto placeholder & bingkai mihrab */
.ph{position:relative;overflow:hidden;background:var(--girih-ink) 0 0/32px 32px,linear-gradient(160deg,#e9dcbc,#d9c79c)}
.ph--warm{background:var(--girih-ink) 0 0/32px 32px,linear-gradient(160deg,#f1d9a8,#d6a865 70%,#b97f44)}
.ph--navy{background:var(--girih) 0 0/32px 32px,linear-gradient(160deg,#22407a,var(--navy-deep))}
.ph--sage{background:var(--girih-ink) 0 0/32px 32px,linear-gradient(160deg,#dfe3cf,#b9c19c)}
.ph--rose{background:var(--girih-ink) 0 0/32px 32px,linear-gradient(160deg,#f1dccf,#d9a98f)}
.ph__ic{position:absolute;inset:0;display:grid;place-items:center;color:rgba(20,28,51,.28)}
.ph__ic .icon{width:34%;height:34%;max-width:56px;max-height:56px;stroke-width:1.2}
.ph--navy .ph__ic{color:rgba(245,200,121,.4)}
.ph__tag{position:absolute;left:10px;bottom:10px;font:italic 400 12px/1 var(--f-display);color:var(--ink-soft);background:rgba(251,247,236,.9);padding:5px 9px;border-radius:999px;white-space:nowrap}
.arch{border-radius:var(--r-arch)}

/* Kartu lembaga (SC.card) */
.lcard{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-card),var(--shadow-flat);overflow:hidden;transition:transform var(--d-3) var(--ease),box-shadow var(--d-3)}
.lcard:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(20,28,51,.04),0 26px 40px -26px rgba(20,28,51,.55),inset 0 0 0 1px var(--gold-light)}
.lcard:focus-within{box-shadow:var(--shadow-card),inset 0 0 0 2px var(--gold-ink)}
.lcard__media{position:relative;height:150px;margin:8px 8px 0;border-radius:14px 14px 6px 6px}
.lcard__media .ph{position:absolute;inset:0;border-radius:inherit}
.lcard__status{position:absolute;left:10px;top:10px;z-index:1}
.lcard__seal{position:absolute;right:10px;bottom:-22px;z-index:2;--seal:48px}
.lcard__body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.lcard__kat{display:flex;align-items:center;gap:7px;font:700 10.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding-right:44px}
.lcard__kat .icon{width:14px;height:14px}
.lcard__name{font:500 19px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.lcard__name a::after{content:"";position:absolute;inset:0;z-index:1}
.lcard__name a:focus-visible{outline:none}
.lcard__loc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.lcard__loc .icon{width:14px;height:14px;color:var(--gold)}
.lcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.lcard__foot b{color:var(--ink);font-weight:700}
.lcard__valid{display:flex;align-items:center;gap:6px}
.lcard__valid .icon{width:14px;height:14px;color:var(--gold)}

/* Statistik */
.stat{display:flex;flex-direction:column;gap:4px}
.stat__n{font:300 clamp(40px,5vw,64px)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;color:var(--navy)}
.stat__n small{font-size:.45em;letter-spacing:0;margin-left:2px;color:var(--gold-ink)}
.stat__l{font:700 10.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dawn .stat__n{color:var(--on-navy)}
.dawn .stat__n small{color:var(--sun)}
.dawn .stat__l{color:var(--on-navy-soft)}

/* Langkah bernomor (alur relawan, proses tinjau) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:28px 24px;counter-reset:step}
.step{position:relative;display:flex;flex-direction:column;gap:10px}
.step__top{display:flex;align-items:center;gap:12px}
.step__top::after{content:"";flex:1;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.step:last-child .step__top::after{opacity:0}
.step h3{font:500 19px/1.25 var(--f-display);color:var(--ink);letter-spacing:-.005em}
.step p{font-size:14.5px;color:var(--ink-soft)}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}.step__top::after{display:none}}

/* Linimasa */
.tl{display:flex;flex-direction:column}
.tl-step{position:relative;display:flex;gap:16px;padding-bottom:22px}
.tl-step:last-child{padding-bottom:0}
.tl-step:not(:last-child)::before{content:"";position:absolute;left:14.5px;top:32px;bottom:2px;width:1px;background:var(--line-strong)}
.tl-step--done:not(:last-child)::before{background:var(--navy)}
.tl-step__dot{width:30px;height:30px;flex:none;display:grid;place-items:center;clip-path:var(--star8);background:var(--vellum-2);color:#fff}
.tl-step__dot .icon{width:14px;height:14px;stroke-width:2.8}
.tl-step--done .tl-step__dot{background:var(--navy);color:var(--gold-glow)}
.tl-step--now .tl-step__dot{background:var(--gold);animation:breathe 1.8s var(--ease-io) infinite}
.tl-step--fail .tl-step__dot{background:var(--vermilion)}
.tl-step__tx{min-width:0;padding-top:3px}
.tl-step__tx b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.tl-step__tx small{display:block;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-step__tx p{font-size:14px;color:var(--ink-soft);margin-top:6px}

/* Aturan boleh/jangan */
.rule{background:var(--card);border-radius:18px;padding:20px 20px 18px;box-shadow:var(--shadow-flat);position:relative}
.rule__k{display:inline-flex;align-items:center;gap:8px;font:700 10.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase}
.rule__k .icon{width:15px;height:15px;stroke-width:2.4}
.rule--do{box-shadow:inset 0 0 0 1px rgba(47,122,82,.28)}
.rule--do .rule__k{color:var(--success)}
.rule--dont{box-shadow:inset 0 0 0 1px rgba(181,69,47,.28)}
.rule--dont .rule__k{color:var(--vermilion)}
.rule p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:8px}
.rule p b{color:var(--ink)}

/* Pasangan label-nilai */
.kv{display:grid;gap:0}
.kv__row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv__row:last-child{border-bottom:0}
.kv__row dt{font:700 10.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.kv__row dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.kv__row{grid-template-columns:minmax(0,1fr);gap:4px}}

/* Tanya-jawab */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 4px;cursor:pointer;font:500 18px/1.35 var(--f-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:12px;height:12px;flex:none;clip-path:var(--star8);background:var(--gold);transition:transform var(--d-3) var(--ease-spring),background var(--d-2)}
.faq details[open] summary::before{transform:rotate(22.5deg) scale(1.15);background:var(--navy)}
.faq summary:hover{color:var(--navy)}
.faq__a{padding:0 4px 20px 26px;color:var(--ink-soft);font-size:15px;max-width:72ch}
.faq__a>*+*{margin-top:.7em}

/* Pita ajakan (navy girih) */
.band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);color:var(--on-navy);padding:clamp(32px,5vw,56px);
  background:radial-gradient(70% 90% at 100% 120%,rgba(244,162,107,.35),transparent 60%),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)}
.band::before,.band::after{content:"";position:absolute;pointer-events:none}
.band::before{inset:8px;border:1px solid rgba(217,178,90,.55);border-radius:calc(var(--r-xl) - 7px)}
.band::after{inset:13px;border:1px solid rgba(217,178,90,.2);border-radius:calc(var(--r-xl) - 12px)}
.band .h2 em,.band .h3 em{color:var(--sun)}
.band p{color:var(--on-navy-soft)}

/* Keadaan kosong */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 24px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-flat)}
.empty__ic{position:relative;width:76px;height:76px;display:grid;place-items:center;color:var(--gold-ink)}
.empty__ic::before{content:"";position:absolute;inset:0;clip-path:var(--star8);background:var(--vellum)}
.empty__ic .icon{position:relative;width:30px;height:30px}
.empty h3{font:500 22px/1.2 var(--f-display)}
.empty p{color:var(--muted);max-width:44ch}

/* Pemberitahuan */
.notice{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;background:var(--ochre-tint);color:#6e4a06;font-size:13.5px;line-height:1.5}
.notice .icon{width:18px;height:18px;margin-top:1px;color:var(--ochre)}
.notice b{color:#4f3504}
.notice--navy{background:var(--tint);color:var(--ink-soft)}
.notice--navy .icon{color:var(--navy)}
.notice--navy b{color:var(--ink)}
.notice--red{background:var(--vermilion-tint);color:#7c2e1f}
.notice--red .icon{color:var(--vermilion)}
.notice--red b{color:#5e2014}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,24px);opacity:0;z-index:90;padding:12px 18px;border-radius:12px;background:var(--midnight);color:var(--sun);font:600 13.5px var(--f-ui);box-shadow:0 18px 40px -16px rgba(10,20,44,.8),inset 0 0 0 1px rgba(245,200,121,.4);transition:opacity var(--d-2),transform var(--d-3) var(--ease);pointer-events:none;max-width:calc(100vw - 40px)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Peta ---------- */
.scmap{position:relative;border-radius:var(--r-lg);overflow:hidden;color:var(--on-navy);
  background:var(--girih) 0 0/40px 40px,radial-gradient(90% 120% at 50% 110%,#27447b 0%,var(--navy-deep) 55%,var(--midnight) 100%);box-shadow:var(--shadow-pop)}
.scmap::before{content:"";position:absolute;inset:7px;border:1px solid rgba(217,178,90,.5);border-radius:14px;pointer-events:none;z-index:2}
.scmap svg{width:100%;height:auto}
.scmap__land{fill:rgba(233,201,127,.10);stroke:rgba(233,201,127,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.scmap__grid{stroke:rgba(233,201,127,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.scmap__pin{cursor:pointer}
.scmap__pin polygon{transition:transform var(--d-2) var(--ease-spring);transform-box:fill-box;transform-origin:center}
.scmap__pin:hover polygon,.scmap__pin:focus-visible polygon{transform:scale(1.5)}
.scmap__pin:focus{outline:none}
.scmap__pulse{fill:var(--sun);transform-box:fill-box;transform-origin:center;animation:pinpulse 2.6s var(--ease) infinite}
.scmap__legend{position:absolute;left:20px;bottom:18px;z-index:3;display:flex;flex-wrap:wrap;gap:6px 14px;font:600 11.5px var(--f-ui);color:var(--on-navy-soft)}
.scmap__legend span{display:inline-flex;align-items:center;gap:6px}
.scmap__legend i{width:10px;height:10px;clip-path:var(--star8)}
.scmap__note{position:absolute;right:20px;bottom:18px;z-index:3;font:italic 400 12px var(--f-display);color:rgba(201,209,227,.75)}
.scmap__tip{position:absolute;z-index:4;min-width:200px;max-width:260px;padding:12px 14px;border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 20px 40px -18px rgba(0,0,0,.6),inset 0 0 0 1px var(--gold-light);transform:translate(-50%,calc(-100% - 14px));pointer-events:none;opacity:0;transition:opacity var(--d-1)}
.scmap__tip.is-on{opacity:1}
.scmap__tip b{display:block;font:500 15px/1.25 var(--f-display)}
.scmap__tip small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.scmap__tip .pill{margin-top:8px}
@media (max-width:640px){.scmap__legend{position:static;padding:0 16px 16px}.scmap__note{display:none}}

/* ---------- Gerak saat muat (selalu terlihat saat diam) ---------- */
.rise{animation:rise var(--d-4) var(--ease) both;animation-delay:var(--dl,0ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}