:root{--green:#DC2626;--green-d:#B91C1C;--green-l:#FEE2E2;--red:#DE2A26;--red-d:#B91C1C;--red-l:#FEE2E2;--ink:#1A202C;--muted:#4A5568;--bg:#F8FAFC;--line:#E2E8F0;--r:8px}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.6;overflow-x:clip}
img{max-width:100%;height:auto}
::selection{background:var(--green);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(11,107,58,.45);outline-offset:2px}
section[id]{scroll-margin-top:118px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
#main{padding-bottom:30px}
#main.home{padding-bottom:0}
#main.full{padding-left:0;padding-right:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
/* strip pengumuman statis (bisa-tutup) di atas situs */
.pbars{background:var(--green-l);border-bottom:1px solid #FECACA}
.pbar{display:flex;gap:10px;align-items:flex-start;max-width:1120px;margin:0 auto;padding:10px 16px;font-size:14px;color:#7F1D1D}
.pbar-ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pbar-tx{flex:1;min-width:0}
.pbar-tx a{color:var(--green-d);font-weight:700;white-space:nowrap}
.pbar-x{flex:none;border:0;background:none;color:#7F1D1D;font-size:15px;font-weight:800;padding:2px 9px;border-radius:6px;cursor:pointer}
.pbar-x:hover{background:#FECACA}
/* masthead + ribbon */
.masthead{background:#F1F5F9;border-bottom:1px solid var(--line);font-size:12px;color:#475569}
.masthead-in{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 16px}
.id-badge{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:10px;border-radius:4px;padding:1px 6px;margin-right:6px}
.mast-r{display:flex;gap:16px}.mast-r a{color:#475569;text-decoration:none}.mast-r a:hover{color:var(--green)}
.ribbon{height:4px;background:#F1F5F9;position:relative;overflow:hidden}
.ribbon::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:left;animation:loadbar 1.1s ease-out}
@keyframes loadbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* header */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.header-in{display:flex;align-items:center;gap:16px;min-height:80px;padding:10px 16px}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);margin-right:auto}
.brand-mark{width:48px;height:48px;border-radius:10px;color:var(--green);display:flex;align-items:center;justify-content:center;flex:none;background:none;border:0}
.brand-mark.sm{width:40px;height:40px;color:#fff}
.brand small{display:block;color:var(--red);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.brand strong{font-size:17px;line-height:1.25}
.pnav{display:flex;gap:2px;align-items:center}
.pnav a{padding:8px 12px;border-radius:6px;text-decoration:none;color:#334155;font-size:14px;font-weight:500}
.pnav a:hover{color:var(--green);background:#F1F5F9}
.pnav a.on{color:var(--green);background:var(--green-l);font-weight:700}
/* pencarian header ala gov.sg: ikon kaca + bar full-width */
.hsearch-btn{border:0;background:none;color:var(--ink);cursor:pointer;padding:9px;border-radius:8px;display:inline-flex;align-items:center;flex:none}
.hsearch-btn:hover{background:var(--green-l);color:var(--green)}
.header.search-open .hsearch-btn{background:var(--green-l);color:var(--green)}
.hsearch-bar{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 0}
.header.search-open .hsearch-bar{display:block}
.hsearch-in{display:flex;gap:10px;align-items:stretch}
.hsearch-form{flex:1;display:flex;min-width:0}
.hsearch-form input{flex:1;min-width:0;border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;padding:12px 16px;font-size:15px;font-family:inherit}
.hsearch-form input:focus{outline:none;border-color:var(--green)}
.hsearch-form button{background:var(--green);color:#fff;border:0;border-radius:0 10px 10px 0;padding:0 26px;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hsearch-form button:hover{background:var(--green-d)}
.hsearch-x{flex:none;border:0;border-radius:10px;background:var(--green-l);color:var(--green-d);font-size:16px;font-weight:800;padding:0 16px;cursor:pointer}
.hsearch-x:hover{background:#FECACA}
.hsearch-pop{margin-top:10px;font-size:13px;color:var(--muted)}
.hsearch-pop span{margin-right:4px}
.hsearch-pop a{color:var(--green-d);margin-left:10px;text-decoration:underline;text-underline-offset:2px}
.hsearch-pop a:hover{color:var(--green)}
.header-in{position:relative}
.has-drop{position:relative;display:inline-flex;align-items:stretch}
.has-drop:has(.mega){position:static}
.has-drop .top-link{padding:8px 4px 8px 12px;border-radius:6px 0 0 6px;text-decoration:none;color:#334155;font-size:14px;font-weight:500;display:inline-flex;align-items:center;line-height:1.5}
.has-drop:hover .top-link{color:var(--green);background:var(--green-l)}
.drop-btn{border:0;background:transparent;color:#334155;font:inherit;font-size:11px;line-height:1.5;padding:8px 10px 8px 4px;border-radius:0 6px 6px 0;cursor:pointer;display:inline-flex;align-items:center}
.drop-btn .arr{width:7px;height:7px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease}
.has-drop.open .drop-btn .arr{transform:rotate(225deg) translate(-1px,-1px)}
.has-drop:hover .drop-btn{color:var(--green);background:var(--green-l)}
.has-drop.open .top-link,.has-drop.open .drop-btn{color:var(--green);background:var(--green-l)}
.has-drop .top-link.on{color:var(--green);background:var(--green-l);font-weight:700}
.has-drop:has(.top-link.on) .drop-btn{color:var(--green);background:var(--green-l)}
/* delay tutup 250ms agar kursor sempat pindah ke submenu */
.drop{visibility:hidden;opacity:0;position:absolute;top:100%;left:0;min-width:220px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:6px;z-index:80;transition:opacity .15s ease,visibility 0s linear .25s}
/* buka hanya saat diklik (.open) atau fokus keyboard — hover tidak membuka panel */
.has-drop.open .drop,.has-drop:focus-within .drop{visibility:visible;opacity:1;transition-delay:0s}
.drop a{display:block;padding:9px 12px;border-radius:7px;color:#334155;text-decoration:none;font-size:13.5px;font-weight:500}
.drop a:hover{background:var(--green-l);color:var(--green-d)}
/* gov.sg-style mega panel: putih full-width, tanpa blok merah */
.drop.mega{left:0;right:0;min-width:0;padding:26px 32px 30px;overflow:visible;border:0;border-top:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 24px 48px rgba(0,0,0,.12)}
.mega-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.mega-title a{font-size:22px;font-weight:700;color:var(--ink);text-decoration:none;padding:0;background:none}
.mega-title a:hover{color:var(--green);background:none}
.mega-title small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.mega-x{border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink);padding:6px 10px;border-radius:8px}
.mega-x:hover{background:#F1F5F9}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr;padding:0;gap:8px 12px}
.mega-grid a{padding:10px 12px;background:none;border-radius:8px}
.mega-grid a:hover{background:var(--green-l)}
.mega-grid a strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.mega-grid a:hover strong{color:var(--green-d);text-decoration:none}
.mega-grid a small{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:4px}
.mdraw details.macc{border-bottom:1px solid var(--line)}
.mdraw details.macc summary{padding:10px 12px;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;border-radius:8px}
.mdraw details.macc summary::-webkit-details-marker{display:none}
.mdraw details.macc summary::after{content:"";float:right;width:7px;height:7px;margin-top:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.mdraw details.macc[open] summary::after{transform:rotate(225deg)}
.mdraw details.macc summary:hover{background:var(--green-l);color:var(--green-d)}
.mdraw details.macc summary.on{color:var(--green);background:var(--green-l)}
.mdraw details.macc[open] summary{color:var(--green);background:var(--green-l)}
.mdraw .mitem{font-size:15px}
.mdraw .mitem.on{color:var(--green);background:var(--green-l)}
.mdraw .mitem.on strong{color:var(--green)}
/* isi panel mobile selaras desktop: judul + kartu link */
.mmega{padding:2px 2px 10px}
.mmega-head{display:block;padding:10px 12px;border-radius:8px;text-decoration:none}
.mmega-head:hover{background:var(--green-l)}
.mmega-head strong{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.mmega-head:hover strong{color:var(--green-d)}
.mmega-head small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.mmega-link{display:block;padding:10px 12px;border-radius:8px;text-decoration:none}
.mmega-link:hover{background:var(--green-l)}
.mmega-link strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.mmega-link:hover strong{color:var(--green-d)}
.mmega-link small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.mmega-link.on{background:var(--green-l)}
.mmega-link.on strong{color:var(--green-d)}
.btn-admin{background:var(--green)!important;color:#fff!important;font-weight:600!important}
.btn-admin:hover{background:var(--green-d)!important}
.nav-toggle{display:none;margin-left:8px;font-size:22px;background:none;border:1px solid var(--line);border-radius:6px;padding:4px 12px;cursor:pointer;min-width:52px}
.nav-toggle .x,.aside-toggle .x{display:none}
body.nav-open .nav-toggle .b,body.nav-open .aside-toggle .b{display:none}
body.nav-open .nav-toggle .x,body.nav-open .aside-toggle .x{display:inline}
.mdraw{display:none;border-top:1px solid var(--line);padding:8px 16px 14px}
.mdraw a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;color:#334155;font-weight:500}
.mdraw a:hover{background:#F1F5F9}
body.nav-open .mdraw{display:block}
/* crumbs */
.crumbs ol{display:flex;gap:8px;list-style:none;padding:12px 0 0;margin:0;font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumbs li+li::before{content:"›";margin-right:8px}
.crumbs a{color:var(--green);text-decoration:none}
/* pita judul halaman */
.page-hero{background:linear-gradient(120deg,var(--green-d),var(--green) 60%,#15803d);background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(120deg,var(--green-d),var(--green) 60%,#15803d);background-size:22px 22px,cover;color:#fff;padding:36px 0;margin-bottom:6px;position:relative}
.page-hero.has-bg{background-size:cover;background-position:center}
.page-hero.has-bg::before{content:"";position:absolute;inset:0;background:rgba(7,52,30,.74)}
.page-hero.has-bg>.wrap{position:relative;z-index:1}
.page-hero h1{color:#fff;margin:2px 0 6px}
.page-hero .muted{color:#E2E8F0}
.page-hero .eyebrow.red{color:#FCD34D}
.page-hero.center{text-align:center;padding:44px 0 150px}
.page-hero.has-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(transparent,#fff)}
.hcrumb{font-size:14px;color:#E2E8F0;margin:0 0 8px}
.hcrumb a{color:#fff;text-decoration:none}
.hcrumb span{color:#BEF264;font-weight:600}
.overlap{background:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(15,35,26,.12);padding:26px;margin-top:-110px;position:relative;z-index:1}
/* tombol kembali ke atas */
.totop{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;border:0;background:none;cursor:pointer;box-shadow:none;opacity:0;pointer-events:none;transition:opacity .2s;overflow:hidden;font-size:22px;color:#fff}
.totop .c{position:absolute;inset:0;border-radius:50%;background:var(--green);box-shadow:0 6px 18px rgba(0,0,0,.25);border:3px solid #fff;transform:scale(0);transition:transform .35s ease}
.totop .a{position:relative;display:inline-block;line-height:46px;transform:translateY(28px);opacity:0;transition:transform .5s ease .3s,opacity .3s ease .3s}
.totop.show{opacity:1;pointer-events:auto}
.totop.show .c{transform:scale(1)}
.totop.show .a{transform:none;opacity:1}
.totop:hover .c{background:var(--green-d)}
/* artikel + sidebar kanan */
.split2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.side{display:flex;flex-direction:column;gap:14px}
.side .card{margin:0}
.sidelink{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px}
.sidelink:last-child{border-bottom:0}
.sidelink:hover{color:var(--green)}
.sidelink b{background:var(--green-l);color:var(--green-d);border-radius:999px;font-size:12px;padding:1px 9px}
.sidelink.col{flex-direction:column;align-items:flex-start;gap:2px}
.sidelink strong{font-weight:600}
/* chat asisten */
.chat{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:4px}
.msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:14.5px;line-height:1.55}
.msg.bot{background:#F1F5F9;align-self:flex-start}
.msg.me{background:var(--green);color:#fff;align-self:flex-end}
.msg.ty{opacity:.6}
.chatform{display:flex;gap:8px;margin-top:12px}
.chatform input{flex:1}
/* paginasi */
.pgn{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:14px 0}
.pgn-per select{width:auto}
.pgn-nav{display:flex;gap:6px;align-items:center}
.pgn-nav a{border:1px solid var(--line);border-radius:6px;padding:5px 11px;text-decoration:none;color:var(--ink);font-size:14px}
.pgn-nav a:hover{border-color:var(--green);color:var(--green)}
.pgn-nav strong{background:var(--green);color:#fff;border-radius:6px;padding:5px 11px;font-size:14px}
.rank{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;align-items:center;justify-content:center;margin-right:4px}
@media(max-width:900px){.split2{grid-template-columns:1fr}}
/* generic */
.btn{display:inline-block;padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn-light{background:#fff;color:var(--green-d)}.btn-green{background:var(--green);color:#fff}.btn-green:hover,.btn-green:active,.btn-green:focus{color:#fff;background:var(--green-d)}.btn-hubungi{background:var(--green);color:#fff}.btn-hubungi:hover{background:var(--red);color:#fff}.btn-line:hover{background:var(--green);color:#fff}.btn-light:hover{background:var(--green-l)}
/* judul halaman konten */
main.wrap>h1{font-size:28px;margin:20px 0 12px}
main.wrap>h1::after{content:"";display:block;width:56px;height:4px;background:var(--green);border-radius:2px;margin-top:8px}
.lead{font-size:19px;line-height:1.7}
/* kartu harmonis */
.bcard,.scard,.ncard,.qcard,.stat{transition:transform .18s ease,box-shadow .18s ease}
.bcard:hover,.scard:hover,.ncard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,35,26,.1)}
.top1{border-top:4px solid var(--green)}.top2{border-top:4px solid var(--red)}.top3{border-top:4px solid #D97706}
.ncard img{aspect-ratio:16/9;object-fit:cover}
.ncard>.res,.ncard>.nophoto{display:block;margin:-18px -18px 12px;width:calc(100% + 36px);max-width:none;border-radius:9px 9px 0 0}
.ncard{position:relative}
.ncard>.tag{position:absolute;top:10px;left:10px;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.nophoto{height:150px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:46px;font-weight:800;margin:-18px -18px 12px;width:calc(100% + 36px)}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff}
.card h3{margin:0 0 6px;font-size:17px}.card p{color:var(--muted);font-size:14px}
.card a{color:var(--green);font-weight:700;text-decoration:none}
a.card{text-decoration:none;color:inherit;display:block}
a.card h3{color:var(--ink)}
.center{text-align:center}.muted{color:var(--muted)}.sub{color:var(--muted);margin:0 0 14px}
.eyebrow{font-weight:700;font-size:13px;margin:0 0 4px}.eyebrow.green{color:var(--green)}.eyebrow.red{color:var(--red);text-transform:uppercase;font-size:12px;letter-spacing:.06em}
h1{font-size:30px}h2{font-size:26px;margin:4px 0 10px}
/* home bands */
.home .flash{margin-top:14px}
.band{padding:56px 0}.band.white{background:#fff}.band.soft{background:var(--bg);border-top:1px solid var(--line)}
.split{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.morelink{color:var(--green);font-weight:700;text-decoration:none;font-size:14px}
/* hero */
.hero{background-color:var(--green);background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px;color:#fff;padding:64px 0;position:relative}
.hero.has-img{background-size:cover;background-position:center 35%;background-image:none}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center 35%;opacity:0;transition:opacity 1.2s ease}
.hslide.on{opacity:1}
.hero.has-img::after{background:linear-gradient(180deg,rgba(6,38,22,.42),rgba(6,38,22,.12) 45%,rgba(6,38,22,.5))}
.hero.has-img .hero-in{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,79,44,.95),rgba(11,107,58,.88) 55%,rgba(222,42,38,.55));pointer-events:none}
.hero-in{position:relative;z-index:1;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:500}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.hero h1{font-size:clamp(28px,4.5vw,52px);font-weight:800;margin:14px 0 8px;line-height:1.15}
.hero-sub{color:#E2E8F0;font-weight:300;max-width:640px;margin:0 auto}
.hsearch-big{display:flex;gap:0;background:#fff;border-radius:8px;padding:6px;max-width:560px;margin:22px auto 0;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.hsearch-big.page{margin:14px 0;max-width:520px;box-shadow:none;border:1px solid var(--line)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* hasil cari ala google */
.glist{max-width:680px;margin:6px 0 8px}
.gresult{margin:0 0 20px}
.gresult .u{font-size:13px;color:var(--green);margin-bottom:1px}
.gresult a.t{font-size:19px;line-height:1.35;color:#1558D6;text-decoration:none;font-weight:500}
.gresult a.t:hover{text-decoration:underline}
.gresult p{margin:2px 0 0;font-size:14px;color:#4A5568}
.gresult mark{background:#FDE68A;color:#92400E;border-radius:2px;padding:0 1px}
.hsearch-big input{flex:1;border:0;padding:10px;font-size:14px;min-width:0}
.hsearch-big input:focus{outline:none}
.hsearch-big button{background:var(--green);color:#fff;border:0;border-radius:6px;padding:10px 26px;font-weight:600;cursor:pointer}
.hpop{font-size:12px;color:#CBD5E1;margin:12px 0 0}
.hpop a{color:#fff;margin-left:8px}
.qcards{margin-top:40px;text-align:left}
.qcar{overflow:hidden;margin-top:40px;cursor:grab}
.qcar:active{cursor:grabbing}
.lcar{overflow:hidden;cursor:grab}
.lcar:active{cursor:grabbing}
.ltrack{display:flex;gap:16px;transition:transform .45s ease}
.ltrack .grav-card{flex:0 0 300px;max-width:82vw;min-width:0}
.ltrack .scard{flex:0 0 320px;min-width:0}
.qtrack{display:flex;gap:16px;transition:transform .5s ease}
.qtrack .qcard{flex:0 0 260px;min-width:0}
.btn-ghost{display:inline-block;border:1px solid rgba(255,255,255,.65);color:#fff;background:transparent;border-radius:8px;padding:8px 22px;font-size:13.5px;font-weight:600;text-decoration:none}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.qcard{background:rgba(255,255,255,.96);border-radius:12px;padding:22px;color:var(--ink);text-decoration:none;border-top:4px solid var(--green);box-shadow:0 8px 24px rgba(0,0,0,.18);display:block}
.qcard:hover{transform:translateY(-4px)}
.qcard.b2{border-top-color:var(--red)}.qcard.b4{border-top-color:#D97706}
.qcard strong{font-size:17px}.qcard p{font-size:13px;color:var(--muted)}
.qcard span{font-size:12px;font-weight:700;color:var(--green)}
.qcard.b2 span{color:var(--red)}.qcard.b4 span{color:#B45309}
/* welcome + stats */
.welcome{align-items:start}
.welcome .kadis{margin:0 0 14px}
/* kartu mini profil */
.minis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}
.mini{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;transition:transform .18s,box-shadow .18s}
.mini svg{color:var(--green);flex:none}
.mini:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,35,26,.1);color:var(--green-d)}
@media(max-width:960px){.minis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.minis{grid-template-columns:1fr 1fr}}
.kadis{margin-top:16px;display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 4px 14px rgba(15,35,26,.07)}
.kadis img{width:104px;height:104px;object-fit:cover;border-radius:50%;flex:none;background:var(--green-l);border:3px solid var(--green);box-shadow:0 6px 18px rgba(11,107,58,.3)}
.cap3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:6px}
.cap-ic{width:56px;height:56px;border-radius:50%;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.cap3 strong{display:block;font-size:22px}.cap3 small{color:var(--muted);font-size:13px}
.kin3{margin-top:22px}
.profil-wrap .kin3{gap:8px}
.profil-wrap .kin3 strong{font-size:18px}
.profil-wrap .kin3 .cap-ic{width:44px;height:44px}
.profil-wrap .kin-src{text-align:left}
.kin3 .pct{color:var(--green-d);font-weight:700}
.kin-src{text-align:center;font-size:12px;color:var(--muted);margin:10px 0 0}
.kin-src a{color:var(--green-d)}
.cap-div{border-top:1px solid rgba(11,107,58,.18);margin:12px 0}
.grid.mini .stat{padding:10px}.grid.mini .stat span{font-size:22px}
.stats{background:rgba(230,244,234,.5);border:1px solid rgba(11,107,58,.2);border-radius:16px;padding:28px}
.stats h3{margin:0 0 16px;font-size:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center}
.stat-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stat-top .stat-label{margin:0}
.r15{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.r15>div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.r15>div>span{color:#475569;font-weight:400}
.r15>div>strong{color:#1e293b;white-space:nowrap}
.stat.mtab{cursor:pointer}
.stat.mtab:hover{border-color:var(--green)}
.stat.mtab.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green-l)}
.stat-desc{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.stat.st-biru{border-top:4px solid #0284C7}
.stat.st-hijau{border-top:4px solid #059669}
.stat.st-kuning{border-top:4px solid #D97706}
.stat.st-merah{border-top:4px solid #DC2626}
.stat span{display:block;font-size:30px;font-weight:800;color:var(--green)}
.stat small{font-size:12px;color:var(--muted);font-weight:500}
/* bidang + layanan */
.bcard h3{font-size:17px}
.tag{display:inline-block;font-size:11px;font-weight:800;border-radius:4px;padding:2px 10px;margin-bottom:8px}
.t1{background:var(--green-l);color:var(--green)}.t2{background:var(--red-l);color:var(--red-d)}.t3{background:#FEF3C7;color:#B45309}
.scard{display:flex;flex-direction:column}.scard .btn{margin-top:auto;text-align:center}
.sic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.sic.s1{background:var(--green-l);color:var(--green)}.sic.s2{background:var(--red-l);color:var(--red-d)}.sic.s3{background:#FEF3C7;color:#B45309}
.scard h3{margin:6px 0}
.ppidline{margin-top:18px;text-align:right}.ppidline a{color:var(--red);font-weight:700;font-size:14px}
/* berita + galeri */
.ncard img{margin:-18px -18px 12px;width:calc(100% + 36px);max-width:none;border-radius:10px 10px 0 0}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.ggrid img{width:100%;height:160px;object-fit:cover;border-radius:8px;background:#E2E8F0}
/* cuplikan video */
.vthumb{position:relative;display:block}
.vthumb img{width:100%}
.ggrid .vthumb img{height:160px;object-fit:cover;border-radius:8px}
.vthumb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.vthumb:hover span{color:var(--red)}
.card video.res{width:100%;background:#000}
/* kartu personil */
.pcard{text-align:center}
.pcard img{width:130px;height:160px;object-fit:cover;border-radius:8px;background:#E2E8F0}
.siluet{width:130px;height:160px;border-radius:8px}
.siluet.big{width:150px;height:180px;border-radius:10px}
/* popup profil */
.pmodal{position:fixed;inset:0;background:rgba(10,20,15,.88);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.pmodal.open{display:flex}
.pm-in{position:relative;background:#fff;border-radius:16px;max-width:620px;width:100%;padding:0;margin:auto;overflow:hidden}
.pm-x{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:8px;font-size:18px;width:38px;height:38px;cursor:pointer;z-index:2}
.pm-x:hover{background:var(--red);color:#fff}
.pm-body{padding:0}
.pm-body img{width:150px;height:180px;object-fit:cover;border-radius:10px}
.pm-head{display:flex;gap:18px;align-items:center;background:radial-gradient(circle at top right,rgba(0,0,0,.28),transparent 55%),linear-gradient(120deg,var(--green-d),var(--green));color:#fff;padding:26px 28px}
.pm-head img{width:110px;height:130px;object-fit:cover;border-radius:12px;border:3px solid rgba(255,255,255,.7);flex:none}
.pm-head .siluet.big{background:none}
.pm-unit{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#BEF264}
.pm-head h3{margin:4px 0;color:#fff;font-size:22px}
.pm-jab{margin:0;color:#E2E8F0;font-size:14px}
.pm-body>*:not(.pm-head){margin-left:28px;margin-right:28px}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pm-grid>div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.pm-grid small{display:block;color:var(--muted);font-size:11.5px}
.pm-grid strong{font-size:14.5px}
.pm-body h4{margin:18px 0 6px;color:var(--green-d)}
.pm-body>div:last-child{margin-bottom:28px}
.gcap{font-size:13px;color:var(--muted);margin:4px 0}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,20,15,.88);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lb-in{position:relative;max-width:min(920px,94vw);width:100%;text-align:center}
.lb-media img,.lb-media video,.lb-media iframe{max-width:100%;max-height:76vh;border-radius:10px;background:#000}
.lb-media iframe{width:100%;aspect-ratio:16/9;border:0}
.lb-cap{color:#E2E8F0;font-size:14px;margin:10px 0 0}
.lb-x,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;font-size:24px;width:44px;height:44px;cursor:pointer}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:var(--green)}
.lb-x{top:-52px;right:0}
.lb-prev{left:-56px;top:40%}.lb-next{right:-56px;top:40%}
@media(max-width:1100px){.lb-prev{left:0}.lb-next{right:0}}
/* sdm */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;justify-content:center}
.chips a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}
.chips a:hover{border-color:var(--green);color:var(--green)}
.chips a.on{background:var(--green);border-color:var(--green);color:#fff}
.sdm-card{text-align:center;border:0;box-shadow:none;background:none;padding:8px}
.sdm-foto{width:120px;height:120px;object-fit:cover;border-radius:50%;margin:8px auto;background:var(--green-l)}
.sdm-card img.sdm-foto{display:block;width:140px;height:140px;object-fit:cover;border-radius:50%;margin:4px auto 10px;background:var(--green-l);border:3px solid var(--green-l)}
.sdm-card div.sdm-foto{width:140px;height:140px;border-radius:50%;margin:4px auto 10px}
.sdm-unit{display:inline-block;background:var(--green-l);color:var(--green-d);font-size:12px;font-weight:700;border-radius:999px;padding:3px 14px;margin:0 0 10px}
.nophoto-sm{display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:800}
.sdm-card h3{font-size:16px}
.sdm-card .jabatan{font-size:12.5px;color:var(--muted);text-transform:uppercase;min-height:36px}
.sdm-lb .card{max-height:82vh;overflow-y:auto}
.sdm-mhead{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.sdm-mfoto{width:88px;height:88px;object-fit:cover;border-radius:50%;background:var(--green-l);flex:none}
.sdm-mnama{margin:0}
/* quick banner */
.qbanner{background:var(--green);color:#fff;padding:48px 0}
.qbanner.slim{border-radius:12px;padding:28px;margin:22px 0}
.qbanner.slim .btn-outline{margin-left:8px}
.qbox{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:24px}
.qbox h3{margin:0 0 4px}.qbox p{color:#E2E8F0;font-size:14px}
/* korsel layanan digital */
.dcar{overflow:hidden}
.dtrack{display:flex;gap:16px;transition:transform .5s ease}
.dcard{flex:0 0 calc(33.333% - 11px);min-width:0}
.dic{display:inline-flex;background:rgba(255,255,255,.14);border-radius:10px;padding:10px;margin-bottom:10px;color:#fff}
.bcard .dic{background:var(--green-l);color:var(--green)}
/* kartu kendaraan ala grav */
.vdoc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:12px}
.vdoc-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.vdoc-card:hover{border-color:#CBD5E1;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.vdoc-head{background:#F8FAFC;padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.nopol{background:var(--green);color:#fff;font-family:'Courier New',monospace;font-weight:700;font-size:15px;padding:4px 12px;border-radius:6px;letter-spacing:.8px;border:1.5px solid var(--green-d)}
.vdoc-jenis{font-size:11px;font-weight:700;color:var(--green-d);text-transform:uppercase;background:var(--green-l);padding:4px 10px;border-radius:4px}
.vdoc-body{padding:16px;flex:1}
.vdoc-body>strong{display:block;font-size:16px}
.vdoc-body>small{display:block;margin-bottom:6px}
.vdoc-info{border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:7px}
.vdoc-info>div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.vdoc-info>div>span:first-child{color:var(--muted)}
.vdoc-info>div>span:last-child{font-weight:600;text-align:right}
.mono{font-family:'Courier New',monospace;background:#F1F5F9;padding:1px 5px;border-radius:3px;font-size:12px}
.vdoc-foot{background:#FAFAFA;padding:10px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.vdoc-note{padding:8px 16px;font-size:12.5px;font-style:italic;color:var(--muted);border-top:1px dashed var(--line)}
@media(max-width:640px){.vdoc-grid{grid-template-columns:1fr}}
/* kartu horizontal Integrasi Data: logo kiri, teks kanan */
.bcard.bside{display:flex;gap:14px;align-items:flex-start}
.bcard.bside img{width:52px;height:52px;object-fit:contain;border-radius:10px;flex:none;background:#fff;border:1px solid var(--line)}
.bcard.bside .dic{flex:none;margin-bottom:0}
.bcard.bside .btx{flex:1;min-width:0;display:flex;flex-direction:column}
.bcard.bside .btx strong{display:block;font-size:16px}
.bcard.bside .btx small{display:block;color:var(--muted);font-size:13px;margin:2px 0 6px}
@media(max-width:600px){
  .bcard.bside{gap:10px;padding:14px}
  .bcard.bside img{width:44px;height:44px}
  .bcard.bside .dic{padding:8px}
  .bcard.bside .btx strong{font-size:15px}
  .bcard.bside .btx small{font-size:12.5px}
}
/* halaman Integrasi Data: cari lengket + pil kategori + badge jumlah */
.int-tools{position:sticky;top:88px;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);padding:10px 0 2px}
#integ-list .sec{scroll-margin-top:215px}
.int-search{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit}
.int-search:focus{outline:none;border-color:var(--green)}
.ipills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ipills a{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.ipills a:hover{border-color:var(--green);color:var(--green)}
.ipills a.on{background:var(--green);border-color:var(--green);color:#fff}
.int-count{font-size:13px;margin:8px 0 0}
.int-empty{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--muted)}
.sec-head{display:flex;align-items:center;gap:10px}
.sec-head h2{margin:0}
.sec-cnt{background:var(--green-l);color:var(--green-d);font-weight:700}
/* kotak SIKD di halaman Realisasi */
.sikd-box{margin:14px 0}
.sikd-box summary{cursor:pointer;font-size:15px}
.sikd-box .tbl{margin-top:10px}
.tbl tr.lvl0 td{font-weight:700;background:#F8FAFC}
.tbl tr.lv-pendapatan td{background:#E7F4EB}
.tbl tr.lv-belanja td{background:#FEE2E2}
.tbl tr.lv-biaya td{background:#FEF3C7}
.tbl td.akun1{padding-left:28px}
.dic-img{width:50px;height:50px;object-fit:contain;border-radius:10px;background:#fff;margin-bottom:10px}
.dcard .btn{margin-top:8px}
.dnav{display:flex;gap:8px;justify-content:center;margin-top:18px}
.dnav button{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;width:44px;height:40px;font-size:22px;cursor:pointer}
.dnav button:hover{background:#fff;color:var(--green-d)}
/* varian band abu (lebih lembut) untuk seksi Layanan Digital */
.qbanner.qband{background:#F3F4F6;color:var(--ink);padding:40px 0 28px}
.qbanner.qband h2{color:var(--ink);margin-top:0}
.qbanner.qband .sub{color:var(--muted)}
.qbanner.qband .qbox{background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.qbanner.qband .qbox p{color:var(--muted)}
.qbanner.qband .dic{background:var(--green-l);color:var(--green)}
.qbanner.qband .dic-img{background:#fff;border:1px solid var(--line)}
.qbanner.qband .qbox .btn-light{background:var(--green);color:#fff}
.qbanner.qband .qbox .btn-light:hover{background:var(--green-d);color:#fff}
.qbanner.qband .dnav button{background:#fff;color:var(--green);border:1px solid var(--line)}
.qbanner.qband .dnav button:hover{background:var(--green);color:#fff;border-color:var(--green)}
/* —— Layanan Digital: kartu kaca lembut di band netral (aksen merah meredam) —— */
.qbanner.qdigi .dcar{padding-bottom:26px;margin-bottom:-26px}
.qbanner.qdigi{position:relative;background:#F3F4F6;color:var(--ink);padding:56px 0;overflow:hidden}
.qbanner.qdigi::before{content:"";position:absolute;inset:auto -14% -62% auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(179,18,29,.05) 0%,rgba(179,18,29,0) 68%);pointer-events:none}
.qbanner.qdigi::after{content:"";position:absolute;inset:-48% auto auto -8%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(179,18,29,.04) 0%,rgba(179,18,29,0) 66%);pointer-events:none}
.qbanner.qdigi>*{position:relative;z-index:1}
.qbanner.qdigi h2{color:var(--ink)}
.qbanner.qdigi .sub{color:var(--muted)}
.qbanner.qdigi .qdc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px 20px;text-decoration:none;color:var(--ink);display:block;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(179,18,29,.06);transition:transform .25s,box-shadow .25s}
.qbanner.qdigi .qdc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),rgba(179,18,29,0) 80%);opacity:0;transition:opacity .25s}
.qbanner.qdigi .qdc:hover{box-shadow:0 10px 24px rgba(179,18,29,.12)}
.qbanner.qdigi .qdc:hover::before{opacity:1}
.qbanner.qdigi .dnum{position:absolute;top:16px;right:18px;font-size:34px;font-weight:800;line-height:1;color:rgba(179,18,29,.10);letter-spacing:1px;font-variant-numeric:tabular-nums;transition:color .25s}
.qbanner.qdigi .qdc:hover .dnum{color:rgba(179,18,29,.22)}
.qbanner.qdigi .dic{background:linear-gradient(135deg,#FDECEC,#F8DEDE);border:1px solid #F3D2D4;border-radius:13px;padding:11px;margin-bottom:12px;color:var(--red)}
.qbanner.qdigi .dic-img{width:52px;height:52px;object-fit:contain;border-radius:13px;background:#fff;border:1px solid var(--line);padding:5px;margin-bottom:12px}
.qbanner.qdigi .qdc h3{margin:0 0 6px;font-size:17px;color:var(--ink)}
.qbanner.qdigi .qdc p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.qbanner.qdigi .dq-arrow{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:6px;background:#F3F4F6;color:var(--red);border:1px solid var(--line);font-size:14px;font-weight:700;margin-top:14px;transition:background .25s,color .25s,border-color .25s}
.qbanner.qdigi .dq-arrow svg{transition:transform .25s}
.qbanner.qdigi .qdc:hover .dq-arrow{background:var(--red);color:#fff;border-color:var(--red)}
.qbanner.qdigi .qdc:hover .dq-arrow svg{transform:translateX(5px)}
.qbanner.qdigi .dnav{margin-top:26px}
.qbanner.qdigi .dnav button{background:#fff;color:var(--red);border:1px solid var(--line);border-radius:6px;width:42px;height:42px}
.qbanner.qdigi .dnav button:hover{background:var(--red);color:#fff;border-color:var(--red)}
@media(max-width:600px){.qbanner.qdigi{padding:44px 0 32px}.qbanner.qdigi .dnum{font-size:28px}}
@media(max-width:960px){.dcard{flex-basis:calc(50% - 8px)}}
@media(max-width:600px){.dcard{flex-basis:100%}}
/* kontak */
.krow{margin:14px 0}.krow strong{display:block}.krow p{margin:2px 0;color:var(--muted);font-size:14px}
.krow.wa{margin:18px 0}
.wa-btn{display:inline-flex;gap:12px;align-items:center;background:#25D366;color:#fff!important;text-decoration:none;font-weight:700;border-radius:12px;padding:10px 16px;box-shadow:0 6px 18px rgba(37,211,102,.35);transition:transform .15s}
.wa-btn:hover{transform:translateY(-2px);color:#fff!important}
.wa-btn small{display:block;font-size:11px;font-weight:500;opacity:.9}
.wa-btn strong{font-size:18px}
.kform h3{margin-top:0}
/* dark footer */
.dfooter{background:#0F172A;color:#94A3B8;padding:28px 0 0;margin-top:0;font-size:14px}
.dfoot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.dfoot-logo{display:flex;gap:10px;align-items:center;color:#fff;margin-bottom:10px}
.dfooter h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.dfooter a{color:#94A3B8;text-decoration:none;display:block;margin:6px 0}
.dfooter a:hover{color:#fff}
.dfoot-base{border-top:1px solid #1E293B;margin-top:28px;padding:16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px}
.dfoot-base a{display:inline;color:#94A3B8}
.dfoot-base .foot-login{opacity:.55}
.dfoot-base .foot-login:hover{opacity:1;color:#fff}
/* content pages */
.sec{margin:28px 0}.sec h2{font-size:24px;margin:0 0 4px}
.ig{background:var(--green-d);color:#fff;border-radius:12px;padding:24px;text-align:center;margin:28px 0}
.ig a{color:#F2B705;font-weight:700}
.ig-embed{min-width:0}
.ig-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05);background:#FAFAFA;min-height:490px}
.ig-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){
.ig-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin:0 -16px;padding-left:16px;padding-right:16px}
.ig-strip .ig-embed{flex:0 0 85%;scroll-snap-align:start}
}
.ig-embed{min-width:0}
.ig-embed .instagram-media{margin:0 auto!important;min-width:0!important;max-width:100%}
.ig-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:320px;padding:24px;text-align:center;text-decoration:none;color:var(--red,#B3121D);background:#FAFAFA;border:1px solid var(--line);border-radius:12px}
.ig-fallback span{color:#666;font-size:12px;word-break:break-all;max-width:220px}
.ig-fallback em{font-style:normal;font-size:13px;font-weight:600;margin-top:6px}
.flash{border-radius:6px;padding:10px 14px;margin:12px 0}.flash.success{background:#E6F4EA;border:1px solid #0B6B3A}.flash.error{background:#FDECEC;border:1px solid #B3261E}
.ikl-ov{position:fixed;inset:0;z-index:120;background:rgba(10,25,18,.62);display:flex;padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ikl-ov[hidden]{display:none}
.ikl-box{position:relative;margin:auto;max-width:min(560px,100%);max-height:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.35);animation:iklIn .25s ease}
@keyframes iklIn{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.ikl-box img{display:block;width:100%;max-height:78vh;object-fit:contain;background:#0B2E1F}
.ikl-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:15px;cursor:pointer;line-height:1}
.ikl-x:hover{background:#000}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}table.tbl th,table.tbl td{border:1px solid var(--line);padding:8px;text-align:left}table.tbl th.num,table.tbl td.num{text-align:right}
@media(max-width:700px){
table.tbl thead{display:none}
table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
table.tbl{border:0;background:none}
table.tbl tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;overflow:hidden}
table.tbl td{border:0;border-bottom:1px solid var(--line);padding:8px 12px;white-space:normal!important;min-width:0!important;max-width:none!important;overflow-wrap:anywhere}
table.tbl td:last-child{border-bottom:0}
table.tbl td::before{content:attr(data-th);display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
table.tbl td:not([data-th])::before,table.tbl td[data-th=""]::before{display:none;content:none}
table.tbl .btn{margin:2px 4px 2px 0}
}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;font:inherit}
label{font-weight:600;font-size:14px}form .row{margin:10px 0}
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.admin-nav a{background:var(--bg);padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--ink);font-size:14px}
img.res{max-width:100%;height:auto;border-radius:8px}
/* editor teks kaya */
.richedit{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.re-bar{display:flex;gap:4px;flex-wrap:wrap;background:#F1F5F9;padding:6px;border-bottom:1px solid var(--line)}
.re-bar button{border:1px solid var(--line);background:#fff;border-radius:5px;min-width:34px;padding:5px 9px;font-size:13px;font-weight:700;cursor:pointer;color:#334155}
.re-bar button:hover{border-color:var(--green);color:var(--green)}
.re-bar select{border:1px solid var(--line);background:#fff;border-radius:5px;padding:5px 6px;font-size:12.5px;color:#334155;max-width:110px}
.re-area{min-height:140px;padding:12px}
.re-area:focus{outline:none}
.re-area p{margin:.6em 0}
.re-area h3{margin:.6em 0 .3em;font-size:18px}.re-area h4{margin:.6em 0 .3em;font-size:16px}
.re-area ul,.re-area ol{margin:.4em 0 .4em 1.4em;padding:0}
.re-area blockquote{border-left:3px solid var(--green);margin:.5em 0;padding:.2em .8em;color:var(--muted)}
/* kutipan di halaman publik */
.card blockquote,.acontent blockquote{border-left:3px solid var(--green);margin:.6em 0;padding:.3em 1em;color:var(--muted);background:var(--bg);border-radius:0 6px 6px 0}
/* dasbor admin sidebar kiri */
.awrap{max-width:1280px;margin:0 auto;padding:0 16px}
/* ---- admin full-chrome: sidebar fix penuh, konten bebas ---- */
.awrap{max-width:none;padding:0}
.admin-shell{display:flex;align-items:stretch;min-height:100vh;margin:0;gap:0;background:#F1F5F9}
.atopbar{display:none}
.aside{width:232px;flex:none;background:#10231A;color:#D7E3D8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;border-radius:0}
.aside-x{display:none}
.aside-brand{padding:10px 16px 2px;color:#fff;font-weight:800;font-size:16px}
.aside-user{padding:0 16px 6px;font-size:12.5px;color:#fff}
.aside-user small{display:block;color:#9FB8A6;font-size:11px;text-transform:capitalize}
.aside nav{display:flex;flex-direction:column;gap:0;padding:2px 8px 10px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#23402f transparent}
.aside nav::-webkit-scrollbar{width:6px}
.aside nav::-webkit-scrollbar-thumb{background:#23402f;border-radius:3px}
.aside nav a{color:#D7E3D8;text-decoration:none;padding:4px 12px;border-radius:6px;font-size:12.5px;font-weight:500;white-space:nowrap}
.aside nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.aside nav a.on{background:var(--green);color:#fff;font-weight:700}
.aside-foot{border-top:1px solid #23402f;padding:8px;display:flex;gap:8px}
.aside-foot a{flex:1;text-align:center;color:#fff;text-decoration:none;font-size:12.5px;padding:6px;border:1px solid #23402f;border-radius:6px}
.aside-foot a:hover{background:rgba(255,255,255,.08)}
.acontent{flex:1;min-width:0;max-width:1120px;padding:26px 28px 40px}
.acontent h1{font-size:24px;margin:0 0 10px}
.acontent .card{box-shadow:0 1px 2px rgba(15,35,26,.05);margin-bottom:18px}
.acontent .card h3{margin:0 0 10px;font-size:17px}
.frow{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-top:10px}
.frow .field{display:flex;flex-direction:column;gap:5px;min-width:170px;flex:1 1 170px}
.frow .field input,.frow .field select{width:100%}
label.check{display:flex;gap:8px;align-items:center;font-weight:500;font-size:14px;padding:10px 0}
label.check input{width:auto}
.tbl-wrap{overflow-x:auto;margin:6px -4px 0;padding:0 4px}
/* tab pengaturan */
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:2px solid var(--line);padding-bottom:10px}
.ptabs button{border:1px solid var(--line);background:#F8FAFC;border-radius:7px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--muted)}
.ptabs button:hover{border-color:var(--green);color:var(--green)}
.ptabs button.on{background:var(--green);border-color:var(--green);color:#fff}
.ptabs a.ptablink{border:1px solid var(--line);background:#F8FAFC;border-radius:7px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--muted);text-decoration:none}
.ptabs a.ptablink:hover{border-color:var(--green);color:var(--green)}
.ptabs a.ptablink.on{background:var(--green);border-color:var(--green);color:#fff}
.ppane{display:none}
.ppane.on{display:block;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.pfoot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* bilah statistik */
.bar{display:grid;grid-template-columns:130px 1fr 44px;gap:8px;align-items:center;margin:7px 0;font-size:13px}
.bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.bar div{background:#F1F5F9;border-radius:4px;height:10px}
.bar i{display:block;height:10px;border-radius:4px;background:linear-gradient(90deg,var(--green-d),#22C55E)}
.bar b{text-align:right}
/* grafik batang vertikal */
.vbars{display:flex;align-items:stretch;gap:5px;height:170px;margin-top:8px;border-bottom:2px solid var(--line);padding-bottom:0}
.vcol{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:stretch;min-width:0}
.vcol i{display:block;background:linear-gradient(180deg,#22C55E,var(--green-d));border-radius:4px 4px 0 0;min-height:3px;transition:filter .15s}
.vcol:hover i{filter:brightness(1.2) saturate(1.2)}
.vcol span{font-size:9.5px;color:var(--muted);text-align:center;white-space:nowrap;margin-top:3px;height:13px}
.grid.g3 h4{margin:0 0 4px;font-size:14px}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--green-l);color:var(--green-d);border:0;cursor:pointer;font-family:inherit}
.badge.b-mut{background:#F1F5F9;color:var(--muted)}
code{background:#F1F5F9;padding:1px 6px;border-radius:4px;font-size:13px;word-break:break-all}
@media(max-height:600px){.aside nav{overflow-y:auto}}
@media(max-width:860px){
.awrap{padding:0}
.admin-shell{display:block;min-height:0}
.atopbar{display:flex;align-items:center;gap:12px;background:#10231A;color:#fff;padding:10px 14px;position:sticky;top:0;z-index:60}
.atopbar strong{font-size:16px}.atopbar span{margin-left:auto;font-size:12px;color:#9FB8A6}
.aside-toggle{background:none;border:1px solid #23402f;color:#fff;border-radius:6px;font-size:19px;padding:4px 11px;cursor:pointer}
.aside{position:fixed;left:0;top:0;bottom:0;height:100vh;width:264px;z-index:70;border-radius:0;transform:translateX(-105%);transition:transform .22s ease}
.aside-x{display:block;position:absolute;top:10px;right:10px;background:none;border:1px solid #23402f;color:#fff;border-radius:6px;font-size:15px;padding:4px 10px;cursor:pointer;line-height:1}
body.nav-open .aside{transform:none}
.aside nav{overflow-y:auto}
.acontent{padding:16px 14px 32px;max-width:none}
}
/* alias view backup warisan */
.btn-primary{background:var(--green);color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:700;border:1px solid transparent}
.btn-outline{background:#fff;color:var(--green);border:1px solid var(--green);padding:10px 18px;border-radius:6px;text-decoration:none}
.btn-danger{background:#B3261E;color:#fff;padding:10px 18px;border-radius:6px;border:1px solid transparent}
.btn-danger:hover{background:#7A1410}
.btn-danger:active,.btn-danger:focus{background:#5F0F0D}
a.btn-green,a.btn-green:visited,a.btn-green:hover,a.btn-green:active,
a.btn-danger,a.btn-danger:visited,a.btn-danger:hover,a.btn-danger:active{color:#fff}
.btn-sm{padding:4px 10px!important;font-size:13px}.badge{background:var(--bg);padding:2px 8px;border-radius:10px;font-size:12px}
.card-head{margin-bottom:8px}.small{font-size:13px}.actions{margin:8px 0}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.field{display:flex;flex-direction:column;gap:4px}
.empty{color:var(--muted)}
.inline-form{display:inline}.num{text-align:right}.cell-nowrap{white-space:nowrap}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat-label{display:block;font-size:12px;color:var(--muted)}
@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.ggrid{grid-template-columns:repeat(2,1fr)}.dfoot-grid{grid-template-columns:1fr 1fr}.pnav{display:none}.nav-toggle{display:block}.mast-r{display:none}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}.hero{padding:44px 0}.dfoot-grid{grid-template-columns:1fr}h1{font-size:24px}h2{font-size:21px}.cap3{gap:6px}.cap3 strong{font-size:17px}.cap3 small{font-size:11.5px}.cap-ic{width:44px;height:44px}.kadis{padding:12px}.minis{gap:8px}.mini{padding:10px;font-size:13px}}
/* === Home BPKPD ala bpkpd.grav + gov.sg (merah-putih) === */
.brand-red{color:#DC2626}.btn-line{background:#fff;color:var(--green);border:1px solid var(--green)}
.gov-eyebrow{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.gov-eyebrow.center,.center{text-align:center}
.grav-hero{position:relative;padding:88px 0 72px;color:#fff;overflow:hidden;background:#111;min-height:calc(100vh - 114px);min-height:calc(100svh - 114px);display:flex;align-items:center}
.grav-video,.grav-slides{position:absolute;inset:0}
.grav-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);pointer-events:none;border:0}
.grav-slides .hslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s}
.grav-slides .hslide.on{opacity:.55}
.grav-overlay{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.grav-hero-in{position:relative;z-index:1;text-align:center;width:100%}
.grav-hero h1{font-size:clamp(30px,4.5vw,54px);font-weight:800;margin:10px 0 8px;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.6)}
.grav-sub{color:#fff;max-width:640px;margin:0 auto;text-shadow:0 1px 14px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.6)}
.gov-search{display:flex;gap:0;background:#fff;border-radius:999px;padding:6px;max-width:600px;margin:22px auto 0;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.gov-search input{flex:1;border:0;padding:10px 16px;font-size:14px;min-width:0;border-radius:999px}
.gov-search input:focus{outline:none}
.gov-search button{background:var(--green);color:#fff;border:0;border-radius:999px;padding:10px 28px;font-weight:700;cursor:pointer}
.gov-search button:hover{background:var(--green-d)}
.grav-cta{margin:22px 0 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-ghost{display:inline-block;border:1px solid rgba(255,255,255,.7);color:#fff;border-radius:6px;padding:10px 18px;font-weight:700;text-decoration:none}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.grav-sec{padding:56px 0}.grav-sec.white{background:#fff}.grav-sec.grey{background:#F3F4F6}
.wrap.narrow{max-width:880px}
.grav-h2{font-size:28px;text-align:center;margin:0 0 6px}
.grav-lead{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 24px}
.grav-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grav-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grav-card{display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;color:inherit;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s}
.grav-card>.tag{position:absolute;top:10px;left:10px;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.grav-sec.grey .grav-card{background:#fff}
.grav-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.grav-card h3{margin:8px 0 6px;font-size:17px}.grav-card p{color:var(--muted);font-size:14px}
.grav-card img.res{width:calc(100% + 44px);max-width:none;margin:-22px -22px 12px;border-radius:14px 14px 0 0}
.grav-ic{width:52px;height:52px;border-radius:14px;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center}
.grav-minis{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.profil-wrap{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:center}
.profil-wrap .grav-h2{text-align:left}
.profil-wrap .grav-lead{text-align:left;margin:0 0 4px}
.profil-wrap .grav-minis{justify-content:flex-start}
.profil-head{margin:0;text-align:center}
.profil-head img{width:100%;max-width:280px;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.profil-head figcaption{margin-top:10px}
.profil-head figcaption strong{display:block;font-size:17px}
.profil-head figcaption span{color:var(--muted);font-size:14px}
@media(max-width:700px){.profil-wrap{grid-template-columns:1fr;text-align:center}.profil-wrap .grav-h2,.profil-wrap .grav-lead{text-align:center}.profil-wrap .grav-minis{justify-content:center}.profil-head img{max-width:240px}}
.grav-minis a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 18px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none}
.grav-minis a:hover{border-color:var(--green);color:var(--green)}
.grav-visi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.grav-visi-teks{font-size:20px;font-weight:700;text-align:center}
.mission-list{list-style:none;padding:0;max-width:680px;margin:18px auto}
.mission-list li{position:relative;padding-left:2.2rem;margin-bottom:1rem;text-align:left}
.mission-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--green-l);color:var(--green);font-weight:800;display:flex;align-items:center;justify-content:center}
.grav-galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-item{position:relative;overflow:hidden;border-radius:12px;display:block;aspect-ratio:1/1;background:#E5E7EB}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);color:#fff;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-weight:700;font-size:14px}
.gallery-item:hover .gallery-overlay{opacity:1}
.galeri-ke4{display:none}
@media(max-width:960px){.galeri-ke4{display:block}}
@media(max-width:960px){.grav-grid4{grid-template-columns:repeat(2,1fr)}.grav-grid3{grid-template-columns:repeat(2,1fr)}.grav-galeri{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grav-grid4,.grav-grid3{grid-template-columns:1fr}.grav-hero{padding:64px 0 52px}}