:root{--design-ink:#092d35;--design-green:#075f45;--design-mint:#e8f5ed;--design-line:#e3ece6}body{background:#f6faf7;color:var(--design-ink)}.site-header{height:72px}.nav nav a:first-child{background:transparent}.nav nav a:hover{color:var(--design-green)}.brand-mark{width:47px;height:47px;display:grid;place-items:center;font-size:49px;color:#087d52}.brand strong{font-size:23px}.page h1,.login-intro h1{letter-spacing:-.035em;color:#072c36}.card{border:1px solid var(--design-line);border-radius:19px;box-shadow:0 12px 30px #1746320c}.button.dark{background:linear-gradient(135deg,#08724f,#06563f);box-shadow:0 7px 15px #0a63451a}.button.outline{border-color:#bcddcb;background:#f9fdfa}.button{border-radius:11px}.page table{font-size:13px}.page th{background:#edf5f0;color:#174b3c}.page td{color:#234055}.page th,.page td{padding:13px}.page tr:nth-child(even) td{background:#fbfdfb}.form-card input,.form-card select,.form-card textarea{border-radius:10px;border-color:#dce8e0;background:#fff}.citizen-hero,.citizen-page-hero,.transparency-hero{border-radius:20px;padding:35px 32px;min-height:230px;background:linear-gradient(90deg,#f5faf5 0%,#f5faf5ec 29%,#f5faf5b2 50%,#f5faf500 75%),url('../images/admin-garden.png') right center/cover no-repeat;position:relative;overflow:hidden}.citizen-hero h1,.citizen-page-hero h1,.transparency-hero h1{font:700 clamp(38px,4vw,58px) 'Playfair Display',Georgia,serif;margin:0 0 8px;line-height:1.1}.citizen-hero p:not(.eyebrow),.citizen-page-hero p:not(.eyebrow),.transparency-hero p:not(.eyebrow){color:#526875;font-size:17px;max-width:620px;margin:0 0 22px}.citizen-quick{display:flex;gap:12px;flex-wrap:wrap}.citizen-quick .button{min-width:190px}.citizen-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:20px 0}.citizen-stats>a,.citizen-stats>div{display:flex;gap:15px;align-items:center;background:#fff;border:1px solid var(--design-line);border-radius:17px;min-height:120px;padding:20px;box-shadow:0 10px 25px #1746320b;color:var(--design-ink)}.citizen-stats>a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 16px 28px #17463219}.citizen-stats small,.citizen-stats strong,.citizen-stats em{display:block}.citizen-stats small{font-weight:700;font-size:13px}.citizen-stats strong{font:700 clamp(21px,2.3vw,30px) 'Playfair Display',Georgia,serif;line-height:1.35}.citizen-stats em{font-size:11px;color:#66807b;font-style:normal}.stat-icon{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#e0f3e8;color:#086d4e;font-size:28px;font-weight:700}.stat-icon.amber{background:#fff0d4;color:#ca8618}.stat-icon.blue{background:#e3f2fc;color:#1970a4}.citizen-dashboard-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.citizen-dashboard-grid>.card,.citizen-iuran-grid>.card{margin:0;min-width:0}.citizen-dashboard-grid .card h2,.citizen-iuran-grid .card h2,.transparency-page .card h2{font-size:24px}.citizen-empty{text-align:center;border-radius:14px;background:linear-gradient(135deg,#f8fcf9,#edf7f0);padding:35px 18px;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}.citizen-empty>span{font-size:38px;color:#08714f;line-height:1}.citizen-empty b{margin-top:10px}.citizen-empty p{font-size:13px;color:#72827d;margin:5px 0 12px}.citizen-tip{background:linear-gradient(145deg,#fff,#e9f5eb)}.citizen-iuran-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:16px}.citizen-page-hero{min-height:225px;background-image:linear-gradient(90deg,#f7faf5 0%,#f7faf5e8 40%,#f7faf540 80%),url('../images/hero-scene.png')}.citizen-info>div{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#f4faf5;border-radius:13px;margin:12px 0}.citizen-info>div>span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#dff1e5;color:#086d4e;font-size:22px;flex:none}.citizen-info p{margin:0}.citizen-info b,.citizen-info small{display:block}.citizen-info small{font-size:12px;color:#667d79;margin-top:4px}.citizen-iuran>.result{margin-top:18px}.citizen-bill{padding:18px 0}.transparency-hero{min-height:210px;background-image:linear-gradient(90deg,#f6faf5 0%,#f6faf5df 35%,#f6faf541 80%),url('../images/admin-garden.png')}.transparency-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}.transparency-grid>.card{margin:0}.transparency-grid .finance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.transparency-grid .finance>div{padding:20px;border-radius:14px;background:#edf8f0}.transparency-grid .finance>div:nth-child(2){background:#fff1f1}.transparency-grid .finance>div:nth-child(3){background:#eaf4fc}.transparency-grid .finance strong{font-size:24px}.transparency-side>div{border-bottom:1px solid var(--design-line);padding:12px 0}.transparency-side p{font-size:13px;color:#698078;margin:4px 0}.login-scene{min-height:calc(100vh - 72px);background:linear-gradient(90deg,#f8fbf4b8 0%,#f8fbf465 45%,#10351c1a 100%),url('../images/hero-scene.png') center center/cover no-repeat}.login-layout{display:grid;grid-template-columns:1fr minmax(390px,560px);gap:45px;align-items:center;min-height:calc(100vh - 72px);padding-top:50px;padding-bottom:50px}.login-intro h1{font:700 clamp(48px,5vw,78px)/1.05 'Playfair Display',Georgia,serif;margin:0 0 18px}.login-intro h1 span{color:#086b4b}.login-intro p:not(.eyebrow){max-width:560px;font-size:20px;line-height:1.5;color:#45616a}.login-card{padding:35px;background:#fffffff0;backdrop-filter:blur(15px);border-color:#d8eddb;box-shadow:0 22px 65px #123e2b35}.login-card h2{margin:5px 0}.login-symbol{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#e0f2e6;color:#086b4b;font-size:34px}.login-card .button{margin-top:10px}.login-register{text-align:center;margin:25px 0 0;padding-top:18px;border-top:1px solid var(--design-line)}@media(max-width:1100px){.citizen-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.citizen-dashboard-grid,.citizen-iuran-grid,.transparency-grid{grid-template-columns:1fr}.login-layout{grid-template-columns:1fr 1fr}}@media(max-width:700px){.citizen-hero,.citizen-page-hero,.transparency-hero{padding:28px 20px;background-position:65% center}.citizen-stats{grid-template-columns:1fr 1fr}.citizen-stats>a,.citizen-stats>div{padding:13px;gap:8px;min-height:95px}.stat-icon{width:42px;height:42px;font-size:22px}.citizen-stats strong{font-size:22px}.citizen-stats em{display:none}.citizen-quick .button{width:100%}.transparency-grid .finance{grid-template-columns:1fr}.login-layout{grid-template-columns:1fr}.login-intro{max-width:460px}.login-scene{background-position:57% center}.login-card{padding:24px}}
/* Tipografi dan ikon header portal */
.site-header{height:auto;min-height:88px;border-bottom:1px solid #e6ede8;box-shadow:0 3px 18px #173f3010}
.site-header .nav{min-height:88px;gap:28px}
.site-header .brand{gap:14px;min-width:max-content}
.site-header .brand-mark{width:55px;height:55px;flex:none;transform:none;font-size:initial;color:#087351;background:#e7f4eb;border-radius:16px}
.site-header .brand-mark svg{width:38px;height:38px}
.site-header .brand strong{font:700 clamp(21px,1.7vw,27px)/1.1 'Playfair Display',Georgia,serif;letter-spacing:-.025em;color:#092e36}
.site-header .brand small{font-size:12px;font-weight:600;letter-spacing:.035em;color:#55716d;margin-top:5px}
.site-header .nav nav{gap:clamp(12px,2vw,30px)}
.site-header .nav nav a{font-size:13px;font-weight:700;white-space:nowrap;padding:9px 4px;border-radius:0;background:transparent;transition:color .2s ease}
.site-header .nav nav a:hover,.site-header .nav nav a:focus-visible{color:#087451;text-decoration:none;box-shadow:inset 0 -2px #087451}
.site-header .nav-action{gap:14px;white-space:nowrap}
.site-header .nav-action .button{padding:11px 19px;border-radius:11px}
.site-header .nav-action .text-link{font-size:13px;font-weight:700;color:#2e6153;padding:8px 2px}
.site-header .nav-action .text-link:hover{text-decoration:none;color:#073e2d}
.demo-banner{background:#fff7e2;border-bottom:1px solid #f1deb1;color:#765011;padding:0;font-size:12px}
.demo-banner .container{display:flex;align-items:center;gap:9px;min-height:42px;line-height:1.4}
.demo-banner .demo-icon{font-size:18px;font-weight:700;color:#b56c0d}
.demo-banner b{letter-spacing:.065em;font-size:11px;white-space:nowrap}
@media(max-width:1050px){.site-header .nav{gap:14px}.site-header .nav nav{gap:12px}.site-header .brand strong{font-size:20px}.site-header .brand-mark{width:46px;height:46px}.site-header .brand-mark svg{width:33px;height:33px}}
@media(max-width:760px){.site-header .nav{padding-top:12px;padding-bottom:10px}.site-header .nav nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;gap:20px}.site-header .nav-action{margin-left:auto}.site-header .nav-action .text-link{display:none}.demo-banner .container{align-items:flex-start;padding-top:10px;padding-bottom:10px}.demo-banner .demo-icon{line-height:1}}
/* Ikon untuk seluruh menu header portal. */
.portal-icon-library{position:absolute;width:0;height:0;overflow:hidden}
.portal-nav-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-header .nav nav a,.site-header .nav-action a{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.site-header .nav nav a{padding:10px 3px}
.site-header .nav nav a:hover .portal-nav-icon,.site-header .nav nav a:focus-visible .portal-nav-icon{transform:translateY(-2px)}
.site-header .nav-action .button .portal-nav-icon{width:17px;height:17px}
.site-header .nav-action .text-link .portal-nav-icon{width:16px;height:16px}
@media(max-width:1150px){.site-header .nav nav a{font-size:12px;gap:5px}.site-header .nav nav{gap:10px}.portal-nav-icon{width:15px;height:15px}}
/* Satu identitas logo untuk portal warga dan footer. */
.site-header .brand-mark.emblem-logo,.footer .brand-mark.emblem-logo{display:block;flex:none;width:58px;height:58px;border-radius:0;background:#fff url('../images/logo-tpu-suka-mulya.png') center top/140% auto no-repeat;transform:none;font-size:0;overflow:hidden}
.footer .brand-mark.emblem-logo{width:48px;height:48px;background-color:transparent}
@media(max-width:1050px){.site-header .brand-mark.emblem-logo{width:48px;height:48px}}
@media(max-width:700px){.site-header .brand-mark.emblem-logo{width:43px;height:43px}.footer .brand-mark.emblem-logo{width:42px;height:42px}}