:root{--green:#0B6B3A;--green-d:#084F2C;--green-l:#E6F4EA;--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}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}
::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.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}
/* 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}
.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}
.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 .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}
.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 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:#F2B705}
.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)}
@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:48px 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}
/* 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-embed{min-width:0}
.ig-embed .instagram-media{margin:0 auto!important;min-width:0!important;max-width:100%}
.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}
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}
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:248px;flex:none;background:#10231A;color:#D7E3D8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;border-radius:0}
.aside-brand{padding:16px 16px 8px;color:#fff;font-weight:800;font-size:17px}
.aside-user{padding:0 16px 10px;font-size:13.5px;color:#fff}
.aside-user small{display:block;color:#9FB8A6;font-size:12px;text-transform:capitalize}
.aside nav{display:flex;flex-direction:column;gap:1px;padding:4px 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:7px 12px;border-radius:6px;font-size:13.5px;font-weight:500}
.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:10px;display:flex;gap:8px}
.aside-foot a{flex:1;text-align:center;color:#fff;text-decoration:none;font-size:13px;padding:8px;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}
.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}
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}}