:root{--blue:#123eaa;--ink:#132f68;--yellow:#ffdb00;--muted:#667697}*{box-sizing:border-box}body{margin:0;background:#fbfcff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;min-height:100svh;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.65;z-index:0}.wash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 83% 46%,#dceaff8c,transparent 45%),radial-gradient(ellipse at 95% 0%,#ffdf0020,transparent 35%);z-index:-1}header,main,footer{position:relative;z-index:1}header{height:112px;max-width:1440px;margin:auto;padding:0 64px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:900;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;font-weight:700}.brand-icon{position:relative;display:grid;place-items:center;width:48px;height:48px;background:var(--yellow);border-radius:16px;font-size:36px;font-style:italic}.brand-icon span{position:absolute;right:4px;top:3px;font-size:16px}nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}nav button{background:none;border:0;color:inherit}nav .nav-login{padding:14px 22px;border:1px solid #dbe3f1;border-radius:30px;display:flex;gap:25px}nav .nav-login:hover{background:var(--yellow);border-color:var(--yellow)}main{max-width:1440px;margin:auto;min-height:640px;height:calc(100svh - 182px);display:grid;grid-template-columns:48% 52%;align-items:center;padding:20px 64px 36px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:2px;font-weight:700}.eyebrow i{height:7px;width:7px;background:var(--blue);border-radius:50%}h1{font-size:clamp(48px,4.6vw,76px);letter-spacing:-3.5px;line-height:1.04;font-weight:750;margin:26px 0 24px}h1 em{font-style:normal;position:relative;color:var(--blue);background:linear-gradient(transparent 76%,#ffdb0088 76%,#ffdb0088 94%,transparent 94%)}.intro h2{font-size:18px;line-height:1.55;font-weight:600;margin:0 0 18px}.slogan{font-size:15px;line-height:1.9;color:var(--muted);max-width:440px;margin:0 0 28px}.primary{background:var(--blue);color:white;border:0;border-radius:30px;padding:18px 23px;display:flex;gap:36px;align-items:center;font-size:14px;font-weight:600;box-shadow:0 8px 25px #123eaa20;transition:transform .2s,background .2s}.primary span{color:var(--yellow);font-size:23px}.primary:hover{background:#092875;transform:translateY(-3px)}.principles{display:flex;gap:18px;align-items:center;margin-top:29px;font-size:11px;color:var(--muted)}.principles b{color:#d6b900}.visual{height:610px;position:relative;isolation:isolate}.orbital-ring{position:absolute;border:1px solid #1e51bd17;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.ring-one{width:400px;height:400px}.ring-two{width:530px;height:530px;border-style:dashed;animation:orbit 90s linear infinite}.ring-three{width:620px;height:620px;border-color:#1e51bd0a}.ring-one::after{content:'';width:12px;height:12px;background:var(--yellow);border-radius:50%;position:absolute;top:35px;left:71px;box-shadow:0 0 0 7px #ffdb001a}.spark{position:absolute;color:#e4bf00;font-size:36px;animation:float 6s ease-in-out infinite}.s1{right:13%;top:10%}.s2{left:12%;bottom:12%;font-size:22px;animation-delay:-3s}.mini-label{position:absolute;top:52px;left:28px;font-size:12px;color:var(--muted);line-height:1.6;transition:opacity .4s}.mini-label b{color:var(--ink);font-weight:600}.orbit{position:absolute;width:210px;height:210px;left:50%;top:50%;transform:translate(-50%,-50%)}.core{position:absolute;inset:0;border-radius:50%;border:8px solid white;width:210px;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffe831,#ffd400);box-shadow:0 25px 70px #c6ab0033,0 0 0 1px #e1cc4344;transition:transform .6s,box-shadow .6s;z-index:4}.core-symbol{font-size:83px;font-weight:900;font-style:italic;line-height:1;position:relative;letter-spacing:-10px;margin-left:-8px}.core-symbol span{position:absolute;font-style:normal;top:-4px;right:-22px;font-size:34px;letter-spacing:0}.core strong{font-size:23px;letter-spacing:2px;margin-top:8px}.core small{font-size:6px;letter-spacing:.8px;margin-top:8px}.pulse{position:absolute;inset:10px;background:#ffdc0066;border-radius:50%;animation:pulse 2.7s ease-out infinite;z-index:-1}.satellite{position:absolute;inset:23px;border:2px solid white;border-radius:50%;height:164px;width:164px;background:linear-gradient(135deg,#fffffff5,#f0f6ffef);box-shadow:0 12px 35px #1f4b9b17,inset 0 0 0 1px #dbe5f2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);opacity:0;pointer-events:none;transform:scale(.5);transition:transform .65s cubic-bezier(.2,.9,.2,1),opacity .4s,box-shadow .3s;z-index:3}.satellite .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#e8effc;color:var(--blue);font-size:33px;margin-bottom:10px}.ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.satellite strong{font-size:13px}.satellite small{font-size:9px;margin-top:7px;color:var(--muted)}.open .core{transform:scale(.84);box-shadow:0 16px 45px #c6ab0022}.open .satellite{opacity:1;pointer-events:auto}.open .top{transform:translateY(-207px);transition-delay:.02s}.open .left{transform:translateX(-207px);transition-delay:.07s}.open .right{transform:translateX(207px);transition-delay:.12s}.open .bottom{transform:translateY(207px);transition-delay:.17s}.open .pulse{display:none}.open .mini-label{opacity:0}.satellite:hover{scale:1.06;box-shadow:0 15px 45px #1f4b9b2a}.satellite:hover .ico{background:var(--yellow)}.interaction-hint{position:absolute;bottom:1px;width:100%;text-align:center;font-size:10px;color:var(--muted);letter-spacing:.4px}.interaction-hint span{display:inline-block;width:6px;height:6px;background:#dcbf00;border-radius:50%;margin-right:6px}footer{max-width:1440px;margin:auto;padding:22px 64px;display:flex;justify-content:space-between;border-top:1px solid #e8edf5;font-size:11px;color:var(--muted)}.demo{font-size:9px;letter-spacing:2px}footer button{border:0;background:none;color:var(--muted);font-size:11px}footer button span{margin-left:9px;color:var(--blue)}dialog{width:min(92vw,530px);padding:35px;border:1px solid white;border-radius:28px;background:#fcfdfff5;color:var(--ink);box-shadow:0 40px 100px #123eaa35}dialog::backdrop{background:#14336945;backdrop-filter:blur(10px)}.close{position:absolute;right:18px;top:12px;border:0;background:none;color:var(--muted);font-size:28px}.dialog-mark{font-size:32px;font-weight:900;font-style:italic;color:var(--blue);width:50px;height:50px;background:var(--yellow);border-radius:15px;text-align:center;padding-top:6px}.dialog-mark span{font-size:16px}.dialog-eyebrow{font-size:9px;letter-spacing:1.5px;margin-top:24px;color:var(--muted)}dialog h2{font-size:29px;letter-spacing:-1px;margin:13px 0}dialog p{line-height:1.8;font-size:14px;color:var(--muted)}.service-item{padding:16px 0;border-bottom:1px solid #e6edf6;font-weight:600;font-size:14px;display:flex;justify-content:space-between}.service-item span{font-size:10px;font-weight:400;color:var(--muted)}.demo-note{font-size:11px!important;margin-top:25px}.paused *{animation-play-state:paused!important}.paused #stars{visibility:hidden}button:focus-visible,a:focus-visible{outline:3px solid #e7bc00;outline-offset:5px}@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes float{50%{transform:translateY(-12px) rotate(12deg)}}@media(max-width:1150px){header{padding:0 35px}main{padding:20px 35px;grid-template-columns:45% 55%}h1{font-size:56px}.visual{scale:.85}.slogan{font-size:14px}footer{padding:22px 35px}}@media(max-width:800px){header{height:90px;padding:0 24px}nav{gap:15px}nav>a,nav>button:not(.nav-login){display:none}.brand{font-size:21px}main{display:flex;flex-direction:column;padding:25px 25px 0;height:auto;min-height:0}.intro{width:100%}h1{font-size:58px;margin-top:22px}.intro h2{font-size:17px}.slogan{max-width:520px}.visual{width:100%;height:590px;scale:1;margin-top:5px}.orbit{scale:.72;transform:translate(-69.444%,-69.444%)}.orbital-ring{max-width:90vw;max-height:90vw}.ring-one{width:290px;height:290px}.ring-two{width:390px;height:390px}.ring-three{width:470px;height:470px}.mini-label{left:10px;top:10px}.interaction-hint{bottom:40px}.principles{margin-bottom:10px}footer{padding:20px 24px;gap:15px;flex-wrap:wrap}.demo{display:none}.s1{top:10%;right:8%}.s2{left:5%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#stars{display:none}}
/* Signature edition: independent design variant. */
:root{--blue:#ffe02a;--ink:#f4f7ff;--yellow:#ffe02a;--muted:#a5b4d3}body{background:#071b43;color:var(--ink)}.wash{background:radial-gradient(ellipse at 80% 45%,#1d4a9855,transparent 48%),linear-gradient(125deg,#061633,#0c2855);z-index:-1}#stars{opacity:.28}header{height:104px;border-bottom:1px solid #ffffff12}.brand-icon{color:#08204a;border-radius:13px;box-shadow:0 8px 24px #0002}.brand small{color:#a5b4d3;font-size:8px;letter-spacing:2.4px}nav{color:#c5d1e9;font-size:12px;gap:32px}nav .nav-login{border-color:#ffffff30;color:white;padding:13px 23px}nav .nav-login:hover{color:#08204a}main{grid-template-columns:49% 51%;min-height:690px;height:calc(100svh - 179px);padding-bottom:35px}.eyebrow{font-size:9px;color:#9dacce;letter-spacing:2.3px}.eyebrow i{background:var(--yellow);box-shadow:0 0 0 4px #ffe02a10}.edition{margin-top:47px;color:#e1c96a;font-size:9px;letter-spacing:1.9px}h1{font-size:clamp(48px,4.8vw,77px);line-height:1.12;letter-spacing:-3px;font-weight:500;margin:17px 0 30px}h1 em{background:none;color:var(--yellow);font-style:normal;font-weight:750}.intro h2{font-size:15px;line-height:1.8;font-weight:400;color:#e0e8f9;letter-spacing:.1px}.slogan{border-left:2px solid #ffe02a8c;padding-left:18px;font-size:13px;line-height:1.95;color:#a5b4d3;max-width:390px;margin:24px 0 28px}.primary{background:var(--yellow);color:#09214a;border-radius:9px;padding:16px 20px;gap:44px;box-shadow:0 9px 30px #0002;font-size:12px}.primary span{color:#09214a}.primary:hover{background:#ffea69}.principles{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;gap:20px;color:#b7c6e0;margin-top:25px}.principles b{color:#ffe02a}.visual{height:620px}.orbital-ring{border-color:#9db7ec1c}.ring-one{width:355px;height:355px}.ring-two{width:490px;height:490px;border-style:solid;border-color:#acc5f012}.ring-three{width:610px;height:610px;border-color:#acc5f00b}.ring-one::after{width:8px;height:8px;top:28px;left:66px;box-shadow:0 0 20px #ffe02a77,0 0 0 6px #ffe02a0a}.ring-two::before{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#91c3ff;top:70px;right:65px;box-shadow:0 0 18px #8abaffaa}.spark{font-size:25px;color:#ffe02a}.s1{right:12%;top:12%}.s2{bottom:13%;left:16%;font-size:15px}.mini-label{top:30px;left:25px;font-size:8px;letter-spacing:1.8px;color:#6f8eb9;line-height:2}.mini-label b{color:#b6c9e7;font-weight:500}.core{background:linear-gradient(145deg,#fff,#e7efff);border:9px solid #ffffffd9;box-shadow:0 25px 75px #0004,0 0 0 18px #aec8ff07,0 0 0 19px #b6d0ff1c;color:#0d2c61}.core-symbol{color:#153e80}.core-symbol span{color:#d5ac00}.core strong{font-size:23px;letter-spacing:3px}.core small{font-size:6px;letter-spacing:.7px;color:#7187a9}.pulse{background:#9cbef02b}.open .core{box-shadow:0 20px 60px #0004,0 0 0 16px #aec8ff08,0 0 0 17px #b6d0ff20}.satellite{height:151px;width:151px;inset:29px;border:1px solid #c8dbff4a;background:linear-gradient(145deg,#163a6ff5,#0a244cf5);box-shadow:0 15px 40px #0003,inset 0 1px #ffffff0c;color:#eef4ff;backdrop-filter:blur(16px)}.satellite .ico{background:#ffffff0a;border:1px solid #ffe02a33;color:#ffe02a;border-radius:14px;width:43px;height:43px;margin-bottom:11px;font-size:29px}.satellite strong{font-size:11px;font-weight:500}.satellite small{color:#92a9ce;font-size:8px}.satellite:hover{border-color:#ffe02a99;background:linear-gradient(145deg,#1d457e,#0b2a56);box-shadow:0 15px 40px #0005}.satellite:hover .ico{color:#102d5c}.open .top{transform:translateY(-190px)}.open .left{transform:translateX(-190px)}.open .right{transform:translateX(190px)}.open .bottom{transform:translateY(190px)}.interaction-hint{color:#758eb4;font-size:9px;bottom:0;letter-spacing:.8px}.orbit-caption{position:absolute;left:0;right:0;bottom:67px;text-align:center;transition:opacity .4s,transform .4s}.orbit-caption b{display:block;font-size:16px;font-weight:400;letter-spacing:.1px;color:#dce8ff}.orbit-caption span{display:block;margin-top:10px;font-size:10px;color:#7f9ac3}.open .orbit-caption{opacity:0;transform:translateY(15px);pointer-events:none}footer{border-color:#ffffff10;padding-top:25px;color:#6e88af;font-size:10px}.compare-link{font-size:10px;color:#bbc9e1}.compare-link:hover{color:var(--yellow)}footer button{color:#849dc2;font-size:10px}dialog{background:#f8fbff;color:#132f68;border:1px solid #dbe6f7}dialog h2{color:#0e2f69}.dialog-mark{color:#143e80}.dialog-eyebrow,dialog p{color:#647a9d}.service-item{border-color:#dce5f2}.service-item span{color:#7186a5}.close{color:#647a9d}@media(max-width:1150px){main{grid-template-columns:47% 53%}h1{font-size:58px}.visual{scale:.84}.edition{font-size:8px;letter-spacing:1.5px}.intro h2{font-size:14px}}@media(max-width:800px){header{height:90px;border:0}.brand-icon{width:43px;height:43px}.edition{margin-top:35px;font-size:8px}main{min-height:0;padding-top:20px}.intro{max-width:540px}h1{font-size:62px;margin-top:17px}.slogan{max-width:440px}.visual{height:580px;scale:1;margin-top:0}.mini-label{top:10px;left:10px}.orbit{top:48%;scale:.78;transform:translate(-64.1%,-64.1%)}.ring-one{width:290px;height:290px}.ring-two{width:385px;height:385px}.ring-three{width:470px;height:470px}.orbit-caption{bottom:64px}.interaction-hint{bottom:15px}.s1{top:14%}.s2{bottom:18%}footer{gap:18px}.compare-link{order:3;width:100%;padding-top:8px}}
/* Service catalogue and role selection. */
dialog{max-height:min(88svh,850px);overflow:auto;scrollbar-width:thin}dialog .service-item{width:100%;border:0;border-bottom:1px solid #e2e9f4;background:none;color:#132f68;text-align:left;padding:17px 8px;gap:14px;align-items:center;border-radius:6px}dialog .service-item:hover{background:#eaf1fb}dialog .service-item strong{font-size:13px;font-weight:600}dialog .service-item span{flex-shrink:0;background:#e8effb;border:1px solid #dae4f4;color:#365584;border-radius:20px;padding:5px 9px;font-size:9px}dialog .service-item[hidden],dialog [hidden]{display:none!important}.service-search{width:100%;border:1px solid #d4dfef;border-radius:10px;background:white;color:#132f68;padding:13px 14px;margin:9px 0 12px;font:inherit;font-size:13px;outline-offset:3px}.detail-back{border:0;background:#e8effb;border-radius:8px;padding:10px 12px;color:#244a84;margin-top:12px;font-size:12px}.access-badge{display:inline-block;background:#fff4b3;color:#594a00;padding:7px 12px;border-radius:20px;font-size:11px}#panel-detail h3{font-size:24px;line-height:1.4;color:#132f68;margin:25px 0 15px}#panel-detail p{color:#647a9d}.empty-results{padding:20px 0}.open .satellite{transition-delay:0s}.orbit .satellite{pointer-events:none}.open .orbit .satellite{pointer-events:auto}@media(max-width:500px){dialog{padding:28px 20px}dialog .service-item{align-items:flex-start;flex-direction:column;gap:9px}.service-item strong{font-size:14px}}
/* Readability pass — larger type and service controls. */
.brand{font-size:29px}.brand small{font-size:11px;letter-spacing:1.5px}nav{font-size:16px}.eyebrow{font-size:12px;letter-spacing:1.8px}.edition{font-size:12px;letter-spacing:1.3px}.intro h2{font-size:20px;line-height:1.65}.slogan{font-size:17px;line-height:1.85;max-width:470px}.primary{font-size:17px;padding:18px 24px}.principles{font-size:13px;letter-spacing:1.1px}.mini-label{font-size:12px;letter-spacing:1px}.core{width:226px;height:226px;inset:-8px}.core-symbol{font-size:90px}.core strong{font-size:28px}.core small{font-size:8px;letter-spacing:.4px}.satellite{width:170px;height:170px;inset:20px}.satellite .ico{width:48px;height:48px}.ico svg{width:30px;height:30px}.satellite strong{font-size:16px;font-weight:600}.satellite small{font-size:12px;line-height:1.45;padding:0 10px}.open .top{transform:translateY(-202px)}.open .left{transform:translateX(-202px)}.open .right{transform:translateX(202px)}.open .bottom{transform:translateY(202px)}.orbit-caption b{font-size:20px}.orbit-caption span{font-size:14px}.interaction-hint{font-size:13px;letter-spacing:0}footer,footer button,.compare-link{font-size:14px}dialog{width:min(94vw,650px);padding:38px;max-height:90svh}dialog h2{font-size:32px}dialog p{font-size:17px}.dialog-eyebrow{font-size:12px}.demo-note{font-size:14px!important}dialog .service-item{padding:19px 10px}dialog .service-item strong{font-size:17px}dialog .service-item span{font-size:12px;padding:7px 10px}.service-search{font-size:17px;padding:15px}.detail-back{font-size:16px}.access-badge{font-size:14px}#panel-detail h3{font-size:27px}.close{font-size:34px}main{min-height:790px}.visual{height:680px}.orbit-caption{bottom:46px}.interaction-hint{bottom:2px}
@media(min-width:801px) and (max-width:1150px){main{grid-template-columns:46% 54%;padding-left:30px;padding-right:30px}.visual{scale:.87}.slogan{font-size:16px}.intro h2{font-size:18px}.edition{font-size:10px}.satellite strong{font-size:17px}.satellite small{font-size:13px}}
@media(max-width:800px){header{padding:0 22px}.brand{font-size:25px}.brand small{font-size:9px}main{min-height:0;padding:25px 24px 0}.edition{font-size:10px;line-height:1.7}.eyebrow{font-size:11px}.intro h2{font-size:20px}.slogan{font-size:17px}.principles{font-size:12px}.visual{height:680px;margin-top:15px}.orbit{scale:.72;transform:translate(-69.444%,-69.444%)}.satellite strong{font-size:20px}.satellite small{font-size:15px;padding:0 4px}.core strong{font-size:32px}.core small{font-size:10px}.interaction-hint{font-size:12px;bottom:25px}.orbit-caption{bottom:89px}.orbit-caption span{font-size:13px}.mini-label{font-size:11px;top:20px}.s1{top:16%}dialog{padding:30px 22px}dialog h2{font-size:28px}dialog .service-item{gap:10px}dialog .service-item strong{font-size:17px}footer{font-size:12px;line-height:1.6}.compare-link,footer button{font-size:13px}}
@media(max-width:380px){.orbit{scale:.65;transform:translate(-76.923%,-76.923%)}.visual{height:620px}h1{font-size:54px}}

/* Official regional identity, with preserved original crest. */
.identity{display:flex;align-items:center;gap:25px}.government-brand{display:flex;align-items:center;gap:13px}.government-brand img{width:43px;height:59px;object-fit:contain;filter:drop-shadow(0 3px 8px #0002)}.government-brand>span{font-size:8px;letter-spacing:1.2px;line-height:1.7;color:#aebfdd;white-space:nowrap}.government-brand strong{display:block;font-size:16px;letter-spacing:3px;font-weight:600;color:#f4f7ff}.identity-divider{width:1px;height:43px;background:linear-gradient(transparent,#ffe02a70,transparent)}header{height:125px}main{height:calc(100svh - 200px)}@media(max-width:1150px){.identity{gap:17px}.government-brand>span{font-size:7px}.government-brand strong{font-size:14px}.government-brand img{width:37px;height:51px}nav{gap:20px}}@media(max-width:800px){header{height:110px;padding:0 23px}.identity{gap:17px}.government-brand>span{display:none}.government-brand img{width:40px;height:55px}.identity-divider{height:38px}.brand{font-size:24px}.brand small{font-size:8px;letter-spacing:1.3px}nav{display:none}main{height:auto}}

/* Crest above the SUKSES introduction, with clean transparent edges. */
.government-hero{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin:0 0 27px}.government-hero img{display:block;width:112px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 16px #0003)}.government-hero>span{font-size:10px;letter-spacing:1.6px;color:#b3c4e0;line-height:1.8}.government-hero strong{display:block;font-size:19px;letter-spacing:4px;color:#f4f7ff;font-weight:600}.intro>.eyebrow{display:none}.edition{margin-top:22px}main{min-height:1010px;height:auto;padding-top:28px;padding-bottom:55px}header{height:100px}.identity{gap:0}h1{margin-top:16px}.government-hero img{max-width:100%}@media(max-width:1150px){main{min-height:960px}}@media(max-width:800px){header{height:85px}.government-hero{align-items:center;text-align:center;margin:0 0 32px;width:100%}.government-hero img{width:115px;height:auto}.government-hero>span{font-size:10px}.government-hero strong{font-size:20px}.edition{margin-top:18px}main{min-height:0;padding-top:18px}.visual{margin-top:10px}}

/* Balanced institutional header: Pemkab / navigation / SUKSES. */
header.balanced-header{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;height:128px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid #ffffff14}.pemkab-header{display:flex;align-items:center;gap:15px;justify-self:start}.crest-medallion{width:72px;height:94px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#fffdf1,#e9e4cb);border:1px solid #ffe02a55;box-shadow:0 8px 26px #0002,inset 0 1px #fff}.crest-medallion img{display:block;width:53px;height:73px;object-fit:contain;filter:drop-shadow(0 2px 2px #0002)}.pemkab-name{font-size:9px;letter-spacing:1.2px;line-height:1.8;color:#b2c4e2;white-space:nowrap}.pemkab-name strong{display:block;color:#f5f8ff;font-size:20px;letter-spacing:4px;font-weight:600}.balanced-header nav{display:flex;align-items:center;justify-content:center;gap:30px;justify-self:center;font-size:15px;color:#d2dff4}.balanced-header nav a,.balanced-header nav button{padding:12px 0;position:relative;white-space:nowrap}.balanced-header nav a:after,.balanced-header nav button:after{content:'';position:absolute;bottom:3px;left:0;width:0;height:2px;background:#ffe02a;transition:width .25s}.balanced-header nav a:hover:after,.balanced-header nav button:hover:after{width:100%}.balanced-header>.brand{justify-self:end;font-size:28px;gap:11px}.balanced-header .brand small{font-size:8px;letter-spacing:1.5px}.balanced-header .brand-icon{width:47px;height:47px;font-size:36px}main{min-height:810px;height:calc(100svh - 205px);padding-top:35px}.intro .edition{margin-top:28px}.visual{height:680px}@media(max-width:1150px) and (min-width:801px){header.balanced-header{padding-left:30px;padding-right:30px;gap:18px}.pemkab-name{font-size:8px}.pemkab-name strong{font-size:17px}.balanced-header nav{gap:20px;font-size:14px}.balanced-header>.brand{font-size:24px}.balanced-header .brand small{font-size:7px}.crest-medallion{width:61px;height:82px;border-radius:20px}.crest-medallion img{width:46px;height:63px}.pemkab-header{gap:10px}main{min-height:830px}}@media(max-width:800px){header.balanced-header{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto;min-height:158px;padding:16px 24px 12px;gap:13px 15px}.pemkab-header{grid-column:1;grid-row:1;gap:10px}.crest-medallion{width:48px;height:65px;border-radius:16px}.crest-medallion img{width:36px;height:50px}.pemkab-name{font-size:6px;letter-spacing:.6px}.pemkab-name strong{font-size:13px;letter-spacing:2px}.balanced-header>.brand{grid-column:2;grid-row:1;font-size:23px;gap:8px}.balanced-header .brand-icon{width:36px;height:39px;border-radius:11px;font-size:29px}.balanced-header .brand-icon span{font-size:12px}.balanced-header .brand small{font-size:6px;letter-spacing:.8px}.balanced-header nav{grid-column:1 / -1;grid-row:2;font-size:14px;gap:37px;display:flex}.balanced-header nav>button:not(.nav-login),.balanced-header nav>a{display:block}.balanced-header nav button{color:inherit}.balanced-header nav a,.balanced-header nav button{padding:8px 0}main{height:auto;min-height:0;padding-top:30px}.intro .edition{margin-top:10px}}@media(max-width:380px){header.balanced-header{padding:15px 17px 12px}.pemkab-name{display:none}.balanced-header>.brand{font-size:22px}}

/* Transparent crest blends directly into the page background. */


/* Single-screen desktop composition; scroll remains available in service dialogs. */
@media(min-width:801px) and (min-height:550px){
html,body{height:100%;min-height:0}body{height:100svh;display:grid;grid-template-rows:100px minmax(0,1fr) 57px;overflow:hidden}
header.balanced-header{height:100px;width:100%;padding-top:8px;padding-bottom:8px}.crest-medallion{width:58px;height:77px;border-radius:19px}.crest-medallion img{width:43px;height:59px}.pemkab-name strong{font-size:17px}.pemkab-name{font-size:8px}.balanced-header>.brand{font-size:25px}.balanced-header .brand small{font-size:8px}
main{height:100%;min-height:0!important;width:100%;padding-top:10px;padding-bottom:10px;grid-template-columns:49% 51%;gap:0;overflow:visible}.intro{max-height:100%}.intro .edition{margin-top:0;font-size:10px}h1{font-size:clamp(42px,5.2vh,69px);line-height:1.08;margin:16px 0 17px;letter-spacing:-2px}.intro h2{font-size:clamp(15px,2vh,19px);line-height:1.5;margin-bottom:12px}.slogan{font-size:clamp(13px,1.7vh,16px);line-height:1.7;margin:16px 0 20px;max-width:450px}.primary{padding:13px 20px;font-size:15px}.principles{margin-top:17px;font-size:11px}.visual{height:100%;min-height:0;scale:1;container-type:size}.visual .orbit{scale:clamp(.58,calc(100cqh / 650px),1);transform:translate(calc(-50% / clamp(.58,calc(100cqh / 650px),1)),calc(-50% / clamp(.58,calc(100cqh / 650px),1)))}
/* Scaling wrapper stays centered independently of its scale. */
.visual .orbit{left:50%;top:48%;transform:translate(-50%,-50%);transform-origin:0 0;scale:1;zoom:1}.orbit{--orbit-scale:min(1,calc((100svh - 205px) / 650px));transform:scale(var(--orbit-scale)) translate(-50%,-50%)!important;transform-origin:0 0}
.orbital-ring{max-width:96%;max-height:94%}.ring-one{width:min(355px,65vh);height:min(355px,65vh)}.ring-two{width:min(490px,72vh);height:min(490px,72vh)}.ring-three{width:min(610px,78vh);height:min(610px,78vh)}.mini-label{top:10px;left:15px;font-size:9px}.s1{top:8%;font-size:22px}.s2{bottom:14%}.orbit-caption{bottom:35px}.orbit-caption b{font-size:16px}.orbit-caption span{font-size:12px;margin-top:7px}.interaction-hint{bottom:8px;font-size:11px}.open .orbit-caption{opacity:0}footer{height:57px;width:100%;padding-top:18px;padding-bottom:18px;align-items:center;font-size:11px}footer button,.compare-link{font-size:11px}
}
@media(min-width:801px) and (max-height:720px) and (min-height:550px){body{grid-template-rows:88px minmax(0,1fr) 46px}header.balanced-header{height:88px}.crest-medallion{height:67px;width:51px;border-radius:16px}.crest-medallion img{height:52px;width:38px}.intro .edition{font-size:9px}h1{font-size:46px;margin:12px 0}.intro h2{font-size:15px}.slogan{font-size:13px;margin:13px 0;line-height:1.6}.primary{padding:10px 18px;font-size:14px}.principles{margin-top:12px;font-size:10px}.orbit{--orbit-scale:calc((100svh - 170px) / 650px)}footer{height:46px;padding-top:12px;padding-bottom:12px}.orbit-caption{bottom:29px}.orbit-caption b{font-size:14px}.orbit-caption span{font-size:11px}.interaction-hint{bottom:3px;font-size:10px}}

@media(min-width:801px) and (min-height:550px){.visual .orbit{transform:translate(-50%,-50%) scale(.68)!important;transform-origin:center;scale:1}}
@media(min-width:801px) and (min-height:700px){.visual .orbit{transform:translate(-50%,-50%) scale(.78)!important}}
@media(min-width:801px) and (min-height:800px){.visual .orbit{transform:translate(-50%,-50%) scale(.92)!important}}
@media(min-width:801px) and (min-height:950px){.visual .orbit{transform:translate(-50%,-50%) scale(1)!important}}

/* Readability refinement without increasing the desktop page height. */
.satellite{width:180px;height:180px;inset:15px}.satellite strong{font-size:18px}.satellite small{font-size:14px;line-height:1.4}.satellite .ico{width:52px;height:52px;margin-bottom:10px}.ico svg{width:32px;height:32px}.core{width:236px;height:236px;inset:-13px}.core strong{font-size:31px}.core small{font-size:10px;letter-spacing:.15px}.core-symbol{font-size:96px}.open .top{transform:translateY(-211px)}.open .left{transform:translateX(-211px)}.open .right{transform:translateX(211px)}.open .bottom{transform:translateY(211px)}
@media(min-width:801px) and (min-height:550px){.visual .orbit{transform:translate(-50%,-50%) scale(.72)!important}.intro .edition{font-size:11px}.intro h2{font-size:17px}.slogan{font-size:15px}.principles{font-size:12px}.mini-label{font-size:11px}.interaction-hint{font-size:12px}.orbit-caption b{font-size:18px}.orbit-caption span{font-size:14px}.pemkab-name{font-size:10px;letter-spacing:.6px}.pemkab-name strong{font-size:19px}.balanced-header .brand small{font-size:10px;letter-spacing:1px}.balanced-header nav{font-size:17px}footer,footer button,.compare-link{font-size:13px}.production-note{font-size:12px;letter-spacing:.5px}}
@media(min-width:801px) and (min-height:700px){.visual .orbit{transform:translate(-50%,-50%) scale(.83)!important}}
@media(min-width:801px) and (min-height:800px){.visual .orbit{transform:translate(-50%,-50%) scale(.97)!important}}
@media(min-width:801px) and (min-height:950px){.visual .orbit{transform:translate(-50%,-50%) scale(1.05)!important}}
@media(min-width:801px) and (max-height:720px) and (min-height:550px){.intro .edition{font-size:10px}.intro h2{font-size:16px}.slogan{font-size:14px;line-height:1.55}.principles{font-size:11px}.orbit-caption{bottom:23px}.orbit-caption b{font-size:16px}.orbit-caption span{font-size:12px}.interaction-hint{font-size:11px;bottom:1px}footer{font-size:12px}.production-note{font-size:11px}}
@media(max-width:800px){.satellite strong{font-size:21px}.satellite small{font-size:16px}.core strong{font-size:33px}.core small{font-size:11px}.mini-label{font-size:12px}.interaction-hint{font-size:13px}.balanced-header nav{font-size:16px}.balanced-header .brand small{font-size:8px}.pemkab-name{font-size:8px;letter-spacing:.2px}.pemkab-name strong{font-size:15px}.intro .edition{font-size:11px}.principles{font-size:13px}.orbit-caption span{font-size:14px}}