:root{color-scheme:light;--or:#ff7a0d;--bl:#0b57c9;--nv:#14213d;--bg:#f4f8ff;--line:#dbe6fa;--mut:#5b6478}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}img{max-width:100%}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--nv);font-family:Poppins,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}
a{color:var(--bl)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mut{color:var(--mut);font-size:14px}
.hd{position:sticky;top:0;z-index:30;background:#fff;border-bottom:3px solid var(--or)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:78px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--bl);font-size:21px;text-decoration:none;line-height:1.15}
.brand img{height:52px;width:auto}
.brand small{display:block;font-weight:400;color:var(--nv);font-size:12px;margin-top:2px}
nav{display:flex;gap:22px;align-items:center}
nav a{color:var(--nv);text-decoration:none;font-weight:700;font-size:14px}
nav a:hover{color:var(--or)}
nav .m{display:none}
.btn{background:var(--or);color:#fff;border:0;border-radius:10px;padding:11px 20px;font:700 14px inherit;text-decoration:none;cursor:pointer;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn.o{background:#fff;color:var(--or);border:1.5px solid var(--or);padding:5px 14px;font-size:12px}
.menu{display:none;background:none;border:0;font-size:28px;color:var(--nv)}
.hero{position:relative;overflow:hidden;border-radius:22px;height:460px;margin-top:18px}
.hero::after{content:"";position:absolute;left:0;bottom:0;width:340px;height:120px;background:var(--or);clip-path:polygon(0 0,100% 100%,0 100%);z-index:2;pointer-events:none}
.track{display:flex;height:100%;transition:transform .7s ease}
.slide{min-width:100%;height:100%;display:flex;align-items:center;padding:0 56px;color:#fff;background-size:cover;background-position:center}
.slide small{font:italic 600 18px Poppins,sans-serif;color:#ffd7b0}
.slide h1{font-size:clamp(26px,3.6vw,44px);font-weight:800;line-height:1.1;max-width:560px;text-shadow:0 2px 14px rgba(0,0,0,.35);text-transform:uppercase}
.slide p{max-width:520px;margin-top:14px;font-size:17px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.arr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--nv);font-size:22px;cursor:pointer;z-index:3}
.arr.l{left:16px}.arr.r{right:16px}
.dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3}
.dots i{width:10px;height:10px;border-radius:10px;background:rgba(255,255,255,.55);cursor:pointer;transition:.3s}
.dots i.on{width:28px;background:#fff}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0 8px;position:relative;z-index:4}
.quick a{background:var(--or);color:#fff;border-radius:12px;padding:16px 18px;display:flex;gap:12px;align-items:center;text-decoration:none;box-shadow:0 8px 20px rgba(11,87,201,.18)}
.quick a.b{background:var(--bl)}
.quick span{font-size:22px;background:rgba(255,255,255,.2);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 44px}.quick b{font-size:14px;line-height:1.25}
.grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin:24px 0}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin:24px 0}
.box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0}
.bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.bh h2{font-size:21px;position:relative;padding-bottom:8px}
.bh h2::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;background:var(--or);border-radius:3px}
.ctl{display:flex;gap:8px}
.ctl button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--or);background:#fff;color:var(--or);cursor:pointer;font-size:17px}
.ctl button:hover{background:var(--or);color:#fff}
.eskul{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.eskul::-webkit-scrollbar{display:none}
.ec{flex:0 0 210px;scroll-snap-align:start;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.ei{height:150px;display:grid;place-items:center;font-size:52px;color:#fff;background-size:cover;background-position:center}
.ec .t{padding:12px 14px}.ec b{display:block;font-size:15px}.ec small{color:var(--mut)}
.post{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.post:last-child{border:0}
.pi{flex:0 0 80px;height:80px;border-radius:12px;display:grid;place-items:center;font-size:28px;color:#fff;background-size:cover;background-position:center}
.post time,.card time{font-size:12px;color:var(--or);font-weight:600}
.post h3{font-size:14px;line-height:1.35;margin-top:2px}
.post a{color:var(--nv);text-decoration:none}.post a:hover{color:var(--or)}
.ann{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.ann:last-child{border:0}
.date{flex:0 0 66px;text-align:center;background:var(--bg);border-radius:10px;padding:6px;font-size:12px;color:var(--mut)}
.date b{display:block;font-size:21px;color:var(--or)}
.ann h3{font-size:15px}.ann p{font-size:13px;color:var(--mut)}
.new{background:var(--or);color:#fff;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;margin-left:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;background:var(--bl);border-radius:18px;padding:22px;color:#fff;margin:24px 0;border-bottom:4px solid var(--or)}.stats div{text-align:center}.stats b{display:block;font-size:34px;color:#ffb36b;line-height:1.1}.stats span{font-size:13px}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center;margin:24px 0}.ai{min-height:270px;height:100%;border-radius:14px;background-size:cover;background-position:center}.about h2{font-size:24px;margin-bottom:8px}.about h3{color:var(--bl);margin:12px 0 4px;font-size:16px}.about p{margin-bottom:10px}
.map{width:100%;height:320px;border:0;border-radius:14px;margin-top:10px}
.cek{background:linear-gradient(150deg,#4a9bff,var(--bl));color:#fff;border:0}
.cek h2{font-size:27px;line-height:1.2}
.cek p{margin:10px 0 14px;font-size:14px}
.cek input{width:100%;padding:12px;border-radius:10px;border:0;margin-bottom:10px;font:14px Poppins,sans-serif;color:var(--nv)}
.cek .btn{width:100%}.cek a{display:inline-block;margin-top:14px;color:#fff;font-weight:700;text-decoration:none}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal.big{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gi{height:170px;border-radius:12px;background-size:cover;background-position:center;position:relative;overflow:hidden;display:block}
.gi span{position:absolute;left:0;bottom:0;background:var(--bl);color:#fff;font-weight:700;font-size:13px;padding:6px 14px;border-radius:0 12px 0 0}
.sub{background:linear-gradient(110deg,var(--or),var(--bl));color:#fff;padding:44px 0}
.sub small{font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffe2c4}
.sub h1{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.15;max-width:760px}
.sub p{margin-top:8px;max-width:640px;opacity:.95}
.isi h3{color:var(--bl);margin:20px 0 6px}.isi h3:first-child{margin-top:0}.isi p{margin-bottom:10px}.isi ul{padding-left:22px;margin-bottom:10px}
.cover{max-width:100%;border-radius:14px;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--nv)}
.card:hover{border-color:var(--or)}
.ci{height:170px;background-size:cover;background-position:center}
.cb{padding:14px}.cb h3{font-size:15px;margin:4px 0}.cb p{font-size:13px;color:var(--mut)}
.st{display:inline-block;background:#2b8a3e;color:#fff;font-weight:800;border-radius:10px;padding:8px 22px;font-size:20px}
footer{background:var(--bl);color:#fff;border-top:4px solid var(--or);padding:34px 0;margin-top:20px}
.fg{display:grid;grid-template-columns:1.2fr 1.3fr 1.3fr 1fr;gap:24px;font-size:14px;color:#dbe6ff}
.fg h4{color:#fff;margin-bottom:6px}
.fb{display:flex;gap:12px;align-items:center}.fb img{height:56px}
.so{display:inline-block;background:var(--or);color:#fff;font-weight:800;font-size:13px;border-radius:8px;padding:8px 12px;margin-right:8px;text-decoration:none}
.copy{text-align:center;font-size:12px;color:#b9cdf5;margin-top:24px}
@media(max-width:1000px){.nav>.btn.dk{display:none}nav .m{display:inline-block;color:#fff}nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;border-bottom:3px solid var(--or);box-shadow:0 12px 24px rgba(20,33,61,.12);max-height:calc(100vh - 78px);overflow-y:auto}nav.open{display:flex}nav.open a{padding:12px 0;border-bottom:1px solid var(--line)}nav.open .m{margin-top:12px;border:0;text-align:center;border-radius:10px}.menu{display:block;width:44px;height:44px}}
@media(max-width:900px){.about{grid-template-columns:1fr}.ai{min-height:200px}.grid,.grid2{grid-template-columns:1fr}.quick{grid-template-columns:1fr 1fr}.gal{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}.hero{height:400px;border-radius:18px}.slide{padding:0 22px 40px}.slide h1{font-size:26px}.slide p{font-size:14px}.slide small{font-size:15px}.hero::after{display:none}.arr{display:none}.dots{bottom:16px}.quick{margin-top:14px}.brand{font-size:17px}.brand img{height:44px}.bh{flex-wrap:wrap;gap:8px}}
@media(max-width:520px){.fg{grid-template-columns:1fr}.brand small{display:none}}
@media(max-width:600px){.wrap{padding:0 14px}.box{padding:16px;border-radius:14px}.hero{margin-top:12px}.quick a{padding:12px;gap:10px}.quick b{font-size:13px}.cek input{font-size:16px;padding:14px}.btn{padding:12px 18px}.ec{flex-basis:76%}.sub{padding:30px 0}.stats{padding:16px}.stats b{font-size:26px}.map{height:240px}.gi{height:130px}.ann .date{flex-basis:58px}.cards{grid-template-columns:1fr}.bh h2{font-size:19px}}
/* Layanan Digital (5 kartu) */
.quick.q5{grid-template-columns:repeat(5,1fr);margin-top:20px}
.quick.q5 a,.quick.q5 a.b{background:#fff1e2;color:var(--nv);border:1px solid #ffd3a8;box-shadow:0 6px 16px rgba(255,122,13,.12);transition:transform .2s,box-shadow .2s,border-color .2s}
.quick.q5 a:hover{transform:translateY(-3px);border-color:var(--or);box-shadow:0 12px 24px rgba(255,122,13,.22)}
.quick.q5 span{background:var(--or);box-shadow:0 4px 10px rgba(255,122,13,.35)}
.quick span svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.quick.q5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.quick.q5{grid-template-columns:1fr 1fr}.quick.q5 a:last-child{grid-column:1/-1}}
/* Isi berita (editor visual) */
.isi img{max-width:100%;height:auto;border-radius:12px}
.isi h2{color:var(--bl);margin:22px 0 8px;font-size:22px}.isi h4{margin:16px 0 6px}
.isi ol{padding-left:22px;margin-bottom:10px}.isi a{color:var(--bl)}
.isi hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.isi blockquote{border-left:4px solid var(--or);background:#fff8f0;margin:14px 0;padding:8px 18px;border-radius:0 10px 10px 0}
.isi .al-left{float:left;margin:4px 18px 10px 0;max-width:50%}.isi .al-right{float:right;margin:4px 0 10px 18px;max-width:50%}
.isi .al-center{display:block;margin:14px auto}.isi .al-full{display:block;width:100%;margin:14px 0}
.isi .ta-left{text-align:left}.isi .ta-center{text-align:center}.isi .ta-right{text-align:right}
.isi::after{content:"";display:block;clear:both}
@media(max-width:600px){.isi .al-left,.isi .al-right{float:none;display:block;margin:12px auto;max-width:100%}}

/* Bottom nav HP */
.bn{display:none}
@media(max-width:900px){
body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.bn{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #e3ebf8;border-radius:22px;box-shadow:0 8px 28px rgba(11,60,140,.18);padding:8px 6px}
.bn a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#34425e;font-size:11.5px;font-weight:600;padding:4px 0;-webkit-tap-highlight-color:transparent}
.bn a svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bn a.on{color:var(--or);font-weight:700}
}

/* Tema Oranye-Biru-Putih seimbang */
:root{--bg:#eaf2ff;--line:#d3e0f7}
body{background:linear-gradient(180deg,#fff3e4 0,#eaf2ff 600px) no-repeat,#eaf2ff}
.hd{background:#fff;border-bottom:3px solid var(--or);box-shadow:0 4px 14px rgba(11,87,201,.08)}
.brand{color:var(--bl)}.brand small{color:var(--nv)}
.hd nav a{color:var(--nv)}.hd nav a:hover{color:var(--or)}.hd nav a.btn{color:#fff}
.menu{background:var(--or);color:#fff;border-radius:12px;width:48px;height:48px;font-size:26px;line-height:1}
.hero{margin-top:22px;box-shadow:0 16px 36px rgba(11,60,140,.22)}
.box{border:1px solid var(--line);border-top:4px solid var(--or);box-shadow:0 6px 18px rgba(11,87,201,.08)}
.bh h2{color:var(--nv)}
.card{box-shadow:0 6px 18px rgba(11,87,201,.08);border-bottom:4px solid var(--or)}
.date{background:#f1f6ff}
.stats{background:linear-gradient(120deg,#3b8cf0,#1f6fe0);border-bottom:4px solid var(--or)}.stats b{color:#ffe2c4}
.cek{background:linear-gradient(150deg,#5aa6ff,#2f80ed)}
.gi span{background:var(--or)}
footer{background:#fff1e2;color:var(--nv);border-top:4px solid var(--or)}
.fg{color:#3b4660}.fg h4,.fb b{color:var(--bl)}.copy{color:#6a7590}.so{background:var(--or)}
.sub{background:linear-gradient(110deg,#ffe3c7,#dbe9ff);color:var(--nv)}.sub small{color:#d45f00}.sub h1{color:#0b3f93;text-shadow:none}.sub p{color:#34425e;text-shadow:none;opacity:1}
/* Ikon sosmed */
.so{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:12px;margin-right:8px;transition:transform .2s,background .2s}
.so svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.so:hover{background:var(--bl);transform:translateY(-2px)}

/* Lightbox galeri */
.gi{transition:transform .2s,box-shadow .2s}.gi[data-src]{cursor:zoom-in}.gi:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,60,140,.22)}
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,22,38,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:56px 14px 18px;opacity:0;transition:opacity .2s}
.lb.on{display:flex}.lb.sh{opacity:1}
.lb img{max-width:min(94vw,1200px);max-height:74vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#111;transition:opacity .2s}
.lb .cp{color:#fff;text-align:center;margin-top:14px;max-width:min(94vw,900px)}
.lb .cp b{display:block;font-size:17px}
.lb .cp span{display:inline-block;background:var(--or);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px;margin-top:6px}
.lb .cn{color:#c9d6ee;font-size:13px;margin-top:6px}
.lb button{position:absolute;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;display:grid;place-items:center;transition:background .2s}
.lb button:hover{background:var(--or)}
.lb .x{top:12px;right:14px}.lb .pv{left:14px;top:50%;margin-top:-23px}.lb .nx{right:14px;top:50%;margin-top:-23px}
body.lbo{overflow:hidden}
@media(max-width:600px){.lb .pv,.lb .nx{top:auto;bottom:18px;margin:0}.lb .pv{left:20px}.lb .nx{right:20px}.lb .cp{margin-bottom:56px}.lb img{max-height:68vh}}
/* Eskul foto */
.ec[data-photos]{cursor:zoom-in;transition:border-color .2s}.ec[data-photos]:hover{border-color:var(--or)}
.ec .ei{position:relative;transition:transform .3s}.ec[data-photos]:hover .ei{transform:scale(1.04)}.ec{overflow:hidden}
.ei .pc{position:absolute;right:8px;bottom:8px;background:rgba(20,33,61,.78);color:#fff;font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
/* Dalam pengembangan */
.cek .dev{background:rgba(255,255,255,.16);border:1.5px dashed rgba(255,255,255,.7);border-radius:14px;padding:20px 16px;text-align:center;margin-top:14px}
.cek .dev i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff;color:var(--or);margin:0 auto 12px}
.cek .dev i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cek .dev b{display:block;font-size:18px}
.cek .dev p{margin:6px 0 0;font-size:13px;opacity:.95}