/* =========================================================
   PW PUI Jawa Barat — sistem desain
   Token diambil dari blueprint-puijabar.html §06
   ========================================================= */

:root{
  /* --- warna --- */
  --green:#0F7A45;
  --green-bright:#17A15C;
  --green-deep:#08462A;
  --green-wash:#E7F2EB;
  --gold:#E3A008;
  --gold-deep:#B57C05;
  --gold-wash:#FDF3DC;
  --paper:#F6F9F4;
  --surface:#FFFFFF;
  --surface-2:#EDF3EC;
  --ink:#101E17;
  --ink-2:#33463C;
  --muted:#64786D;
  --line:#DCE6DE;
  --line-strong:#C3D3C7;
  --on-green:#FFFFFF;

  /* --- bayangan bernuansa merek, bukan abu netral --- */
  --shadow-s:0 1px 2px rgba(8,40,24,.05), 0 4px 10px -4px rgba(8,40,24,.09);
  --shadow-m:0 12px 28px -12px rgba(8,40,24,.20);
  --shadow-l:0 24px 48px -20px rgba(8,40,24,.26);

  /* --- bentuk --- */
  --r-s:8px;
  --r-m:14px;
  --r-l:24px;
  --r-pill:34px;

  /* --- tipografi --- */
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --arabic:"Scheherazade New","Amiri","Traditional Arabic",serif;

  /* --- ukuran --- */
  --wrap:1180px;
  --gap:24px;
  --nav-h:72px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --green:#38C480; --green-bright:#57DC99; --green-deep:#0A2E1D;
    --green-wash:#132A1E;
    --gold:#F0BC42; --gold-deep:#F0BC42; --gold-wash:#2C2312;
    --paper:#0A130E; --surface:#0F1B14; --surface-2:#152419;
    --ink:#E8F0E9; --ink-2:#BACCBF; --muted:#8B9F91;
    --line:#22332A; --line-strong:#31473A;
    --on-green:#04180E;
    --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 4px 10px -4px rgba(0,0,0,.5);
    --shadow-m:0 14px 30px -14px rgba(0,0,0,.7);
    --shadow-l:0 26px 54px -22px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --green:#38C480; --green-bright:#57DC99; --green-deep:#0A2E1D;
  --green-wash:#132A1E;
  --gold:#F0BC42; --gold-deep:#F0BC42; --gold-wash:#2C2312;
  --paper:#0A130E; --surface:#0F1B14; --surface-2:#152419;
  --ink:#E8F0E9; --ink-2:#BACCBF; --muted:#8B9F91;
  --line:#22332A; --line-strong:#31473A;
  --on-green:#04180E;
  --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 4px 10px -4px rgba(0,0,0,.5);
  --shadow-m:0 14px 30px -14px rgba(0,0,0,.7);
  --shadow-l:0 26px 54px -22px rgba(0,0,0,.8);
}

/* ---------------- dasar ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4,h5,.ui{font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-.018em}
a{color:var(--green); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--green-bright)}
:focus-visible{outline:2.5px solid var(--green-bright); outline-offset:3px; border-radius:6px}
code,.mono{font-family:var(--mono); font-size:.87em; font-variant-numeric:tabular-nums}
hr{border:0; border-top:1px solid var(--line); margin:40px 0}
::selection{background:var(--green); color:var(--on-green)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
@media(max-width:600px){ .wrap{padding:0 18px} }
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:var(--on-green);
  padding:12px 20px; border-radius:0 0 var(--r-s) 0; font-family:var(--display); font-weight:600}
.skip:focus{left:0}

/* ---------------- tombol ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-size:15px; font-weight:600; line-height:1;
  padding:14px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--green); color:var(--on-green); box-shadow:0 8px 18px -8px rgba(15,122,69,.55)}
.btn-primary:hover{background:var(--green-bright); color:var(--on-green); box-shadow:0 12px 24px -10px rgba(15,122,69,.6)}
.btn-ghost{background:transparent; color:var(--green); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--green); background:var(--surface); color:var(--green)}
.btn-gold{background:var(--gold); color:#231A02; box-shadow:0 8px 18px -8px rgba(227,160,8,.55)}
.btn-gold:hover{background:#F5B21B; color:#231A02}
.btn-light{background:var(--surface); color:var(--green); box-shadow:var(--shadow-m)}
.btn-light:hover{background:var(--surface); color:var(--green-bright)}
.btn-sm{padding:10px 18px; font-size:13.5px}
.btn-block{display:flex; width:100%}

/* ---------------- chip / pill ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 14px; border-radius:20px; background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); text-decoration:none;
}
.pill-green{background:var(--green-wash); color:var(--green); border-color:transparent}
.pill-gold{background:var(--gold-wash); color:var(--gold-deep); border-color:transparent}
.pillrow{display:flex; flex-wrap:wrap; gap:8px}

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 4px 20px -12px rgba(8,40,24,.3)}
.nav{display:flex; align-items:center; gap:20px; height:var(--nav-h)}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand-mark{width:42px; height:42px; flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-txt .b1{font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.02em}
.brand-txt .b2{font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--green)}

.nav-menu{display:none}
@media(min-width:1080px){
  .nav-menu{display:flex; align-items:center; gap:2px; margin:0 auto; list-style:none; padding:0}
  .nav-menu > li{position:relative}
  .nav-menu > li > a,.nav-menu > li > button{
    display:flex; align-items:center; gap:5px; font-family:var(--display); font-size:14.5px; font-weight:600;
    color:var(--ink-2); text-decoration:none; padding:9px 14px; border-radius:var(--r-s);
    background:none; border:0; cursor:pointer;
  }
  .nav-menu > li > a:hover,.nav-menu > li > button:hover{color:var(--green); background:var(--surface-2)}
  .nav-menu > li.is-current > a,.nav-menu > li.is-current > button{color:var(--green)}
  .nav-menu .caret{width:9px; height:9px; opacity:.55; transition:transform .18s ease}
  .nav-menu > li[data-open="true"] .caret{transform:rotate(180deg)}
  .dropdown{
    position:absolute; top:calc(100% + 8px); left:0; min-width:272px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
    box-shadow:var(--shadow-l); padding:8px; list-style:none; margin:0;
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s ease;
  }
  /* Menu terakhir dijatuhkan ke kanan supaya tidak meluap di layar 1080px. */
  .nav-menu > li:last-child .dropdown{left:auto; right:0}
  .nav-menu > li[data-open="true"] .dropdown{opacity:1; visibility:visible; transform:none}
  .dropdown a{
    display:block; padding:9px 13px; border-radius:var(--r-s); text-decoration:none;
    font-family:var(--display); font-size:14px; font-weight:600; color:var(--ink-2);
  }
  .dropdown a span{display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4}
  .dropdown a:hover{background:var(--green-wash); color:var(--green)}
}
.nav-actions{display:flex; align-items:center; gap:10px; margin-left:auto}
@media(min-width:1080px){ .nav-actions{margin-left:0} }
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.icon-btn:hover{border-color:var(--green); color:var(--green)}
.nav-actions .btn{display:none}
@media(min-width:640px){ .nav-actions .btn{display:inline-flex} }
.burger{display:inline-flex}
@media(min-width:1080px){ .burger{display:none} }

/* --- menu ponsel --- */
.mobile-panel{
  position:fixed; inset:var(--nav-h) 0 0; z-index:99; background:var(--paper);
  overflow-y:auto; padding:20px 0 60px; display:none;
}
.mobile-panel.is-open{display:block}
body.nav-locked{overflow:hidden}
.m-group{border-bottom:1px solid var(--line)}
.m-group > a,.m-group > button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink);
  padding:16px 4px; background:none; border:0; text-align:left; text-decoration:none; cursor:pointer;
}
.m-group .caret{width:12px; height:12px; opacity:.5; transition:transform .2s}
.m-group[data-open="true"] .caret{transform:rotate(180deg)}
.m-sub{list-style:none; margin:0; padding:0 0 12px; display:none}
.m-group[data-open="true"] .m-sub{display:block}
.m-sub a{display:block; padding:11px 4px 11px 16px; border-left:2px solid var(--line);
  font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink-2); text-decoration:none}
.m-sub a:hover{border-left-color:var(--green); color:var(--green)}

/* ---------------- pencarian ---------------- */
.search-panel{position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center; padding:14vh 20px 20px}
.search-panel.is-open{display:flex}
.search-panel .veil{position:absolute; inset:0; background:rgba(8,25,16,.5); backdrop-filter:blur(3px)}
.search-box{position:relative; width:min(620px,100%); background:var(--surface); border-radius:var(--r-l);
  box-shadow:var(--shadow-l); padding:22px; border:1px solid var(--line)}
.search-box input{
  width:100%; font-family:var(--display); font-size:17px; font-weight:600; color:var(--ink);
  padding:14px 16px; border-radius:var(--r-m); border:1.5px solid var(--line-strong); background:var(--paper);
}
.search-box input:focus{outline:none; border-color:var(--green)}
.search-hint{font-family:var(--display); font-size:12.5px; color:var(--muted); margin:12px 2px 0}
.search-results{list-style:none; margin:14px 0 0; padding:0; max-height:44vh; overflow:auto}
.search-results li a{display:block; padding:11px 14px; border-radius:var(--r-s); text-decoration:none;
  font-family:var(--display); font-size:14.5px; font-weight:600; color:var(--ink)}
.search-results li a span{display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px}
.search-results li a:hover,.search-results li a:focus{background:var(--green-wash); color:var(--green)}

/* ---------------- bagian ---------------- */
.section{padding:78px 0}
.section-tight{padding:52px 0}
.section-alt{background:var(--surface)}
@media(max-width:760px){ .section{padding:54px 0} }
.sec-head{max-width:660px; margin:0 0 34px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.eyebrow{font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green); margin:0 0 12px}
h2.sec-title{font-size:clamp(26px,3.6vw,38px); font-weight:800; line-height:1.14}
.sec-sub{color:var(--muted); font-size:17px; margin:14px 0 0; max-width:60ch}
.sec-bar{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:0 0 30px}
.sec-bar .sec-head{margin-bottom:0}

/* ---------------- hero ---------------- */
.hero{padding:64px 0 78px; background:linear-gradient(178deg,var(--surface) 0%,var(--paper) 62%)}
.hero-grid{display:grid; gap:52px; align-items:center}
@media(min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:56px} }
.hero h1{font-size:clamp(34px,5.4vw,58px); font-weight:800; line-height:1.05; letter-spacing:-.03em}
.hero .lede{font-size:19px; color:var(--ink-2); margin:20px 0 0; max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-pills{margin-top:26px}

.hero-art{position:relative}
.art-frame{
  position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/3.2;
  background:linear-gradient(145deg,var(--green-deep),var(--green) 58%,var(--green-bright));
  box-shadow:var(--shadow-l); display:grid; place-items:center;
}
.art-frame .art-note{
  position:relative; z-index:2; text-align:center; color:rgba(255,255,255,.94);
  font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.02em; line-height:1.5;
  padding:16px 22px; border:1px dashed rgba(255,255,255,.4); border-radius:var(--r-m); max-width:76%;
}
.art-frame .art-note b{display:block; font-size:15px; margin-bottom:5px; letter-spacing:-.01em}
.art-frame::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(227,160,8,.30), transparent 46%);
}
.float-card{
  position:absolute; left:-14px; bottom:-30px; max-width:318px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:20px 22px; box-shadow:var(--shadow-l);
}
@media(max-width:640px){ .float-card{position:static; max-width:none; margin-top:18px} }
.float-card .fc-k{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin:0 0 8px}
.float-card p{font-size:16px; line-height:1.55; margin:0; color:var(--ink-2); font-style:italic}
.float-card .fc-src{font-family:var(--display); font-size:12px; font-weight:600; color:var(--muted); margin-top:10px; font-style:normal}

/* ---------------- angka bukti ---------------- */
.proof{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface)}
.proof-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
@media(min-width:820px){ .proof-grid{grid-template-columns:repeat(4,1fr)} }
.proof-cell{background:var(--surface); padding:30px 24px}
.proof-cell .pn{font-family:var(--display); font-size:clamp(30px,4vw,42px); font-weight:800;
  color:var(--green); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.proof-cell .pl{font-family:var(--display); font-size:13.5px; font-weight:600; color:var(--ink-2); margin-top:9px}
.proof-cell .pc{font-family:var(--display); font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.45}

/* ---------------- kartu ---------------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:24px; box-shadow:var(--shadow-s);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card,.card-link{text-decoration:none; color:inherit; display:block}
a.card:hover,.card-link:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--line-strong)}
.card h3{font-size:18px; font-weight:700; margin:0 0 8px; color:var(--ink)}
.card p{font-family:var(--display); font-size:14.5px; color:var(--muted); margin:0; line-height:1.55}

.grid{display:grid; gap:var(--gap)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }

/* --- kartu ishlah bernomor --- */
.ish-card .num{
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--green);
  background:var(--green-wash); width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; margin-bottom:14px;
}
.ish-card .ar{font-family:var(--arabic); font-size:19px; color:var(--gold-deep); margin:0 0 4px; direction:rtl}

/* ---------------- kartu berita ---------------- */
.post-card{display:flex; flex-direction:column; overflow:hidden; padding:0}
.post-thumb{aspect-ratio:16/9; background:linear-gradient(135deg,var(--green-wash),var(--surface-2));
  display:grid; place-items:center; border-bottom:1px solid var(--line)}
.post-thumb span{font-family:var(--display); font-size:11.5px; font-weight:600; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase}
.post-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.post-body h3{font-size:17.5px; line-height:1.32; margin:0}
.post-meta{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:auto; padding-top:6px}
@media(min-width:1000px){
  .news-grid{display:grid; grid-template-columns:1.25fr 1fr; grid-auto-rows:min-content; gap:var(--gap)}
  .news-grid .feature{grid-row:1 / span 2}
  .news-grid .feature .post-thumb{aspect-ratio:16/10}
  .news-grid .feature h3{font-size:24px}
}

/* ---------------- keadaan kosong ---------------- */
.empty{
  border:1.5px dashed var(--line-strong); border-radius:var(--r-l); background:var(--surface);
  padding:36px 30px; text-align:center;
}
.empty h3{font-size:19px; font-weight:700; margin:0 0 10px}
.empty p{font-family:var(--display); font-size:15px; color:var(--muted); max-width:58ch; margin:0 auto 8px; line-height:1.6}
.empty .status{margin-bottom:16px}

/* ---------------- catatan ---------------- */
.note{border-left:3px solid var(--green); background:var(--green-wash); padding:18px 22px;
  border-radius:0 var(--r-m) var(--r-m) 0; margin:26px 0}
.note.gold{border-left-color:var(--gold); background:var(--gold-wash)}
.note.plain{border-left-color:var(--line-strong); background:var(--surface-2)}
.note h4{font-family:var(--display); font-size:14.5px; font-weight:700; margin:0 0 7px}
.note p{font-family:var(--display); font-size:15px; margin:0 0 8px; color:var(--ink-2); line-height:1.58}
.note p:last-child{margin-bottom:0}
.note ul{font-family:var(--display); font-size:15px; color:var(--ink-2); margin:0; padding-left:20px}
.note li{margin-bottom:6px}

/* status data */
.status{display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-size:11.5px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:20px}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.status-wait{background:var(--gold-wash); color:var(--gold-deep)}
.status-ready{background:var(--green-wash); color:var(--green)}

/* ---------------- halaman isi ---------------- */
.page-head{background:var(--surface); border-bottom:1px solid var(--line); padding:52px 0 46px}
.page-head h1{font-size:clamp(30px,4.4vw,46px); font-weight:800; line-height:1.08}
.page-head .lede{font-size:18px; color:var(--ink-2); margin:16px 0 0; max-width:62ch}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--display);
  font-size:12.5px; font-weight:600; color:var(--muted); margin:0 0 18px; padding:0; list-style:none}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--green)}
.crumbs li::after{content:"/"; margin-left:8px; color:var(--line-strong)}
.crumbs li:last-child::after{content:""}
.crumbs li[aria-current]{color:var(--ink-2)}

.page-body{padding:56px 0 84px}
/* minmax(0,1fr) wajib: tanpa itu kolom melar mengikuti lebar minimum tabel
   (min-width 520px) dan halaman ikut meluap di layar 375px. */
.doc{display:grid; gap:48px; grid-template-columns:minmax(0,1fr)}
.doc > *{min-width:0}
@media(min-width:1000px){ .doc{grid-template-columns:minmax(0,1fr) 296px; gap:60px; align-items:start} }
.prose{max-width:68ch; min-width:0}
.prose h2{font-size:26px; font-weight:800; margin:42px 0 14px; line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19.5px; font-weight:700; margin:32px 0 10px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 17px; padding-left:22px}
.prose li{margin:0 0 9px}
.prose strong{font-weight:600}
.prose blockquote{margin:24px 0; padding:4px 0 4px 22px; border-left:3px solid var(--gold);
  font-style:italic; color:var(--ink-2)}
.prose blockquote p:last-child{margin-bottom:0}
.aside{display:grid; gap:16px}
@media(min-width:1000px){ .aside{position:sticky; top:calc(var(--nav-h) + 20px)} }
.aside .card{padding:20px 22px}
.aside h4{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.aside ul{list-style:none; margin:0; padding:0; font-family:var(--display); font-size:14px}
.aside li{margin:0 0 9px}
.aside li:last-child{margin-bottom:0}
.aside a{color:var(--ink-2); text-decoration:none; font-weight:600}
.aside a:hover{color:var(--green)}
.aside p{font-family:var(--display); font-size:14px; color:var(--muted); margin:0; line-height:1.55}

/* ---------------- tabel ---------------- */
.tablewrap{overflow-x:auto; max-width:100%; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--surface); box-shadow:var(--shadow-s); margin:0 0 20px}
table{border-collapse:collapse; width:100%; min-width:520px; font-family:var(--display); font-size:14.5px}
th,td{text-align:left; padding:12px 18px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line-strong)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums}

/* ---------------- daftar jaringan ---------------- */
.region-grid{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){ .region-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .region-grid{grid-template-columns:repeat(4,1fr)} }
.region{
  display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:var(--r-m);
  background:var(--surface); border:1px solid var(--line); text-decoration:none;
  font-family:var(--display); transition:.16s ease;
}
.region:hover{border-color:var(--green); background:var(--green-wash); transform:translateY(-2px)}
.region .rn{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.25}
.region .rt{font-family:var(--mono); font-size:11px; color:var(--muted)}

/* ---------------- blok donasi ---------------- */
.donate{background:var(--green-deep); color:#EAF6EE; border-radius:var(--r-l); padding:48px 42px; position:relative; overflow:hidden}
@media(max-width:600px){ .donate{padding:34px 24px; border-radius:var(--r-m)} }
.donate::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 88% 12%, rgba(227,160,8,.20), transparent 44%)}
.donate > *{position:relative; z-index:1}
.donate h2{font-size:clamp(25px,3.4vw,35px); font-weight:800; color:#FFFFFF; line-height:1.16}
.donate p{color:#C4DDCD; margin:16px 0 0; max-width:56ch; font-size:17px}
.donate .eyebrow{color:var(--gold)}
.donate-grid{display:grid; gap:34px; align-items:center}
@media(min-width:900px){ .donate-grid{grid-template-columns:1.15fr .85fr; gap:48px} }
.rek-box{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-m); padding:22px 24px}
.rek-box .rk{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:0 0 10px}
.rek-box .rv{font-family:var(--mono); font-size:19px; color:#FFFFFF; letter-spacing:.02em}
.rek-box .rn2{font-family:var(--display); font-size:13.5px; color:#C4DDCD; margin-top:6px; line-height:1.5}
.rek-box + .rek-box{margin-top:12px}

/* ---------------- footer ---------------- */
.site-footer{background:var(--green-deep); color:#B9D3C2; padding:62px 0 0}
.foot-grid{display:grid; gap:36px; padding-bottom:44px}
@media(min-width:760px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px} }
.site-footer h4{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:0 0 16px}
.site-footer p{font-size:15px; line-height:1.65; margin:0 0 12px; color:#B9D3C2}
.site-footer ul{list-style:none; margin:0; padding:0; font-family:var(--display); font-size:14.5px}
.site-footer li{margin:0 0 10px}
.site-footer a{color:#DCEEE2; text-decoration:none}
.site-footer a:hover{color:var(--gold); text-decoration:underline}
.foot-brand{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.foot-brand .b1{font-family:var(--display); font-weight:800; font-size:17px; color:#FFFFFF; display:block}
.foot-brand .b2{font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gold); display:block}
.foot-contact{font-family:var(--display); font-size:14.5px; line-height:1.7}
.foot-contact .mono{font-size:13.5px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-family:var(--display); font-size:13px; color:#8FB39D}
.social{display:flex; gap:10px; margin-top:6px}
.social a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; color:#DCEEE2}
.social a:hover{background:var(--gold); border-color:var(--gold); color:#231A02}

/* ---------------- tombol kontak melayang ---------------- */
.float-contact{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:10px; padding:13px 20px 13px 16px;
  background:var(--green); color:var(--on-green); border-radius:var(--r-pill);
  font-family:var(--display); font-size:14.5px; font-weight:700; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(8,60,32,.7); transition:.16s ease;
}
.float-contact:hover{background:var(--green-bright); color:var(--on-green); transform:translateY(-2px)}
@media(max-width:520px){ .float-contact{right:14px; bottom:14px; padding:12px 16px} .float-contact .fl{display:none} }

/* ---------------- arab ---------------- */
.arabic{font-family:var(--arabic); font-size:31px; line-height:2.1; direction:rtl; text-align:right;
  color:var(--ink); margin:0 0 18px}

/* ---------------- lain ---------------- */
.badge-dev{
  background:var(--gold-wash); border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:12.5px; color:var(--gold-deep); text-align:center; padding:9px 18px;
  line-height:1.5;
}
.badge-dev strong{font-weight:700}
.badge-dev a{color:var(--gold-deep); font-weight:700}
.stack{display:grid; gap:12px}
.dl-item{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); flex-wrap:wrap}
.dl-item .dn{font-family:var(--display); font-size:15.5px; font-weight:700; color:var(--ink)}
.dl-item .dm{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:3px}
.timeline{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 26px 30px; border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px;
  border-radius:50%; background:var(--green); border:3px solid var(--paper)}
.timeline .ty{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--green); display:block; margin-bottom:4px}
.timeline .tt{font-family:var(--display); font-size:16.5px; font-weight:700; color:var(--ink); display:block; margin-bottom:5px}
.timeline p{font-size:16px; margin:0; color:var(--ink-2)}