@page{size:1055px 1491px;margin:0}
:root{--primary:#6c8c49;--secondary:#4c7099;--accent:#c98b60;--surface:#fff;--text:#20231f;--muted:#666d63;--line:#e5e9e1;--soft:#f5f7f3;--card-radius:8px;--shadow:0 6px 18px rgba(56,70,44,.07);--container:838px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;font-size:10px;line-height:1.45}a{text-decoration:none;color:inherit;cursor:pointer}button{font:inherit}.site-header{height:58px;background:#fff;border-bottom:1px solid #e6e9e2;position:relative;z-index:10}.header-inner{height:100%;max-width:900px;margin:auto;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:9px;min-width:196px}.brand img{width:35px;height:35px;object-fit:contain}.brand strong{font-size:13px;display:block;line-height:1.1}.brand small{font-size:7px;display:block;line-height:1.35;margin-top:3px;color:#39423a}.main-nav{display:flex;align-items:stretch;gap:27px;flex:1;height:100%}.main-nav a{display:flex;align-items:center;font-size:8px;font-weight:600;white-space:nowrap;position:relative}.main-nav a.active{color:#66844b}.main-nav a.active:after{content:"";height:2px;background:#6f8f50;position:absolute;left:0;right:0;bottom:8px}.header-actions{display:flex;gap:9px}.icon-btn,.login-btn{height:30px;border-radius:6px;border:1px solid #d9ded7;background:white}.icon-btn{width:30px;font-size:18px}.login-btn{width:60px;background:#6b8856;color:#fff;border-color:#6b8856}.nav-toggle{display:none}
.hero{height:281px;position:relative;background:url('/theme_asset/desa-wonotolo?file=wonotolo%2Fimages%2Fhero.jpg') center/cover no-repeat;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%)}.hero-copy{position:absolute;left:202px;top:56px;width:390px}.hero-copy h1{font-size:38px;line-height:1;margin:0 0 5px;font-weight:700}.hero-copy h2{font-size:27px;line-height:1.1;margin:0 0 13px}.hero-copy p{font-size:11px;max-width:330px;margin:0 0 15px}.hero-buttons{display:flex;gap:12px}.btn{height:31px;padding:0 15px;border-radius:6px;display:inline-flex;align-items:center;gap:15px;font-weight:600;font-size:9px}.btn.primary{background:#6e8b58;color:#fff}.btn.light{background:white;border:1px solid #e0e3dd}.hero-service-card{position:absolute;right:102px;top:36px;width:198px;height:217px;background:white;border-radius:9px;box-shadow:0 9px 24px rgba(25,49,18,.17);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.hero-service-card a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-right:1px solid #ecefe9;border-bottom:1px solid #ecefe9;font-size:8px}.hero-service-card a:nth-child(2n){border-right:0}.hero-service-card a:nth-child(n+5){border-bottom:0}.line-icon{font-size:27px;line-height:1;color:#69834f;font-weight:400}
.section{width:var(--container);margin:0 auto}.profile-wrap{height:200px;padding:20px 0 16px;display:grid;grid-template-columns:270px 1px 170px 1fr;gap:22px;align-items:center}.profile-copy h3,.section h3{margin:0 0 12px;font-size:14px}.profile-copy h3 span{color:#7b985e}.profile-copy p{font-size:8px;line-height:1.65;color:#50564f;margin:0 0 16px}.small-btn,.outline-btn{display:inline-flex;align-items:center;height:26px;padding:0 14px;border-radius:5px;background:#708d57;color:white;font-size:8px;font-weight:600}.v-divider{height:138px;background:#e5e8e2}.profile-stats{display:grid;gap:12px}.profile-stats div{display:flex;align-items:center;gap:11px}.profile-stats i{font-style:normal;font-size:20px;color:#668148;width:22px;text-align:center}.profile-stats span{font-size:7px;color:#666}.profile-stats strong{display:block;color:#222;font-size:10px}.profile-map{height:169px;position:relative;border-radius:7px;overflow:hidden}.profile-map img{width:100%;height:100%;object-fit:cover}.map-pin{position:absolute;left:166px;top:71px;color:#6b8b4d;font-size:29px;line-height:1}.map-label{position:absolute;left:183px;top:66px;background:white;border-radius:6px;padding:8px 12px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.services-row{height:164px;display:grid;grid-template-columns:205px repeat(4,1fr);gap:11px;align-items:center;border-top:1px solid #f1f3ef;padding:11px 0}.service-intro{height:140px;position:relative;padding:9px 0}.service-intro h3{font-size:15px;line-height:1.1;margin:0 0 7px}.service-intro p{font-size:8px;width:82px}.service-intro img{position:absolute;left:65px;top:-4px;width:123px;height:148px;object-fit:contain}.service-card{height:130px;padding:13px 14px;background:#fff;border:1px solid #e6eae3;border-radius:8px;box-shadow:var(--shadow)}.svc-icon{font-size:21px;color:#6e8c51;margin-bottom:8px}.service-card h4{font-size:10px;margin:0 0 6px}.service-card p{font-size:7.6px;line-height:1.45;color:#596158;min-height:42px;margin:0}.service-card a{display:inline-block;margin-top:5px;font-size:7px;color:#67864d;font-weight:700}
.stats-grid{height:169px;display:grid;grid-template-columns:394px 229px 163px;gap:14px}.panel{border-radius:8px;background:#fff;border:1px solid #edf0ec;padding:12px;box-shadow:var(--shadow)}.panel h3{font-size:11px;margin:0 0 2px}.panel small{font-size:6.8px;color:#70766f}.population{background:#f4f7fa}.population-body{display:grid;grid-template-columns:155px 1fr;gap:14px;margin-top:9px}.total>strong{font-size:25px;color:#4d7399;display:block;line-height:1}.total>span{font-size:8px}.sex{display:flex;gap:21px;margin-top:17px}.sex span{display:grid;grid-template-columns:auto auto;grid-template-areas:'i b' 'i s';column-gap:5px}.sex span::before{content:'♙';grid-area:i;font-size:17px;color:#4c7197}.sex b{grid-area:b;font-size:9px}.sex small{grid-area:s}.age-chart{display:grid;grid-template-columns:62px 1fr;grid-template-rows:14px 1fr;column-gap:8px}.age-chart h4{grid-column:1/3;margin:0;font-size:8px}.donut{width:58px;height:58px;border-radius:50%;background:conic-gradient(#9aaa67 0 22%,#456f9a 22% 89%,#c0ac52 89%);position:relative;margin-top:4px}.donut:after{content:"";position:absolute;inset:13px;background:#f4f7fa;border-radius:50%}.age-chart ul{list-style:none;margin:2px 0 0;padding:0;font-size:6.7px;display:flex;flex-direction:column;gap:7px}.age-chart li{display:grid;grid-template-columns:8px 1fr 24px;align-items:center}.age-chart i{width:6px;height:6px;border-radius:1px}.c1{background:#9aaa67}.c2{background:#456f9a}.c3{background:#c0ac52}.age-chart b{text-align:right}.budget{padding:12px 16px}.budget>span{font-size:7px}.budget>strong{display:block;color:#6c8a4c;font-size:16px;margin:2px 0 6px}.budget ul{list-style:none;padding:0;margin:0 0 8px;font-size:6.8px}.budget li{display:flex;justify-content:space-between;padding:2px 0}.budget li:before{content:'◉';color:#819b64;margin-right:4px}.budget li b{margin-left:auto;font-weight:400}.realization{text-align:center;background:#f2f6fb}.realization h3{text-align:left}.realization>small:first-of-type{display:block;text-align:left}.progress-ring{width:70px;height:70px;margin:7px auto 4px;border-radius:50%;background:conic-gradient(#4d7399 0 42%,#dfe7ee 42%);position:relative;display:grid;place-items:center}.progress-ring:after{content:"";position:absolute;inset:8px;background:#f2f6fb;border-radius:50%}.progress-ring span{z-index:1;font-size:14px;font-weight:700;color:#4d7399}.progress-ring span small{display:block;font-size:6px;font-weight:400}.realization>strong{display:block;color:#4c7199;font-size:11px}
.potential-row{height:155px;display:grid;grid-template-columns:148px repeat(4,1fr);gap:9px;position:relative;padding-top:15px}.potential-intro{padding-top:8px}.potential-intro h3{font-size:13px;margin-bottom:7px}.potential-intro p{font-size:7.5px;max-width:120px;margin:0 0 19px}.outline-btn{background:#fff;color:#343a33;border:1px solid #d7ddd2;height:24px;padding:0 10px}.potential-card{height:132px;background:#f6f7f4;border-radius:7px;overflow:hidden;position:relative}.potential-card img{width:100%;height:68px;object-fit:cover}.potential-card span{position:absolute;top:57px;left:8px;background:white;padding:3px 7px;border-radius:10px;font-size:6px}.potential-card h4{font-size:10px;margin:7px 8px 2px}.potential-card p{font-size:6.8px;line-height:1.35;margin:0 8px;color:#545a53}.carousel-next{position:absolute;right:-29px;top:61px;width:31px;height:31px;border-radius:50%;border:0;background:#708c55;color:white}
.news-gallery{height:184px;display:grid;grid-template-columns:303px 1fr;gap:32px;padding-top:15px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.section-head h3{font-size:13px;margin:0}.section-head a{font-size:6.6px;border:1px solid #c9d3c2;border-radius:5px;padding:5px 10px}.news-block article{display:flex;gap:9px;height:49px;border-bottom:1px solid #ecefea;padding:4px 0}.news-block article:last-child{border-bottom:0}.news-block img{width:61px;height:41px;border-radius:3px;object-fit:cover}.news-block h4{font-size:8px;line-height:1.25;margin:1px 0 4px}.news-block small{font-size:6.5px;color:#7c827a}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:59px;gap:5px}.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:5px}.gallery-grid img:nth-child(5){grid-column:1}.gallery-grid img:nth-child(6){grid-column:2}.gallery-grid img:nth-child(6){grid-column:2/5}
.contact-strip{height:86px;background:#f3f7ed}.contact-inner{width:var(--container);height:100%;margin:auto;display:grid;grid-template-columns:285px 150px 112px 166px 125px;align-items:center;gap:14px}.contact-title{display:flex;gap:11px;align-items:center}.contact-title img{width:52px;height:52px;object-fit:contain;border-radius:50%}.contact-title h3{font-size:12px;margin:0 0 4px}.contact-title p{font-size:6.8px;margin:0}.contact-inner>div:not(.contact-title){display:flex;gap:8px}.contact-inner i{font-style:normal;color:#728b55;font-size:14px}.contact-inner b{display:block;font-size:7px;margin-bottom:4px}.contact-inner small{font-size:6.6px;line-height:1.45}
.theme-strip{height:44px;border-bottom:1px solid #e9ece7;display:flex;align-items:center;justify-content:center;gap:39px;font-size:7px}.theme-strip>span{font-weight:700}.theme-strip div{display:flex;align-items:center;gap:10px}.sw{width:16px;height:16px;border-radius:3px;display:inline-block;border:1px solid #dfe4dc}.s1{background:#708d57}.s2{background:#4e739a}.s3{background:#c78d62}.s4{background:#fff}
.footer{height:146px;background:#fff}.footer-inner{width:860px;height:100%;margin:auto;display:grid;grid-template-columns:250px 285px 170px 1fr;gap:24px;align-items:center}.f-brand .brand{min-width:0}.f-brand .brand img{width:31px;height:31px}.f-brand .brand strong{font-size:10px}.f-brand .brand small{font-size:6px}.f-brand p{font-size:6.5px;width:205px;margin:12px 0 0;color:#666}.footer h4{font-size:7px;margin:0 0 9px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5px 28px;font-size:6.5px;border-left:1px solid #e7eae5;padding-left:32px}.socials{display:flex;gap:12px}.socials span{width:19px;height:19px;border-radius:50%;border:1px solid #a8aea5;color:#777;display:grid;place-items:center;font-size:8px}.f-copy{font-size:6.5px;color:#737972;line-height:1.45}
@media(max-width:767px){body{font-size:14px}.site-header{height:auto}.header-inner{padding:10px 16px;flex-wrap:wrap}.brand{flex:1}.nav-toggle{display:block;border:0;background:#6c8c49;color:#fff;border-radius:6px;padding:8px 10px}.main-nav{display:none;width:100%;height:auto;flex-direction:column;gap:0;padding:8px 0}.main-nav.open{display:flex}.main-nav a{padding:10px 0;font-size:13px}.header-actions{display:none}.hero{height:620px;background-position:center}.hero-copy{left:20px;right:20px;top:40px;width:auto}.hero-copy h1{font-size:45px}.hero-copy h2{font-size:31px}.hero-copy p{font-size:15px}.hero-service-card{left:20px;right:20px;top:auto;bottom:30px;width:auto;height:260px}.section,.contact-inner,.footer-inner{width:auto;margin-left:16px;margin-right:16px}.profile-wrap,.services-row,.stats-grid,.potential-row,.news-gallery,.contact-inner,.footer-inner{height:auto;display:block}.profile-wrap>*{margin-bottom:18px}.v-divider{display:none}.profile-map{height:230px}.services-row{padding:24px 0}.service-intro{height:190px}.service-card{height:auto;margin:12px 0}.stats-grid .panel{margin:14px 0}.potential-row{padding:24px 0}.potential-card{height:auto;margin:12px 0}.potential-card img{height:180px}.carousel-next{display:none}.news-gallery{padding:20px 0}.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}.contact-strip{height:auto;padding:18px 0}.contact-inner>div{margin:14px 0}.theme-strip{height:auto;padding:20px;flex-wrap:wrap}.footer{height:auto}.footer-inner{padding:26px 0}.f-brand,.f-links,.f-social,.f-copy{margin-bottom:25px}.two-col{padding-left:0;border-left:0}.footer-inner{display:block}.footer-inner,.contact-inner{margin-left:20px;margin-right:20px}}
.gallery-grid{grid-template-columns:repeat(12,1fr)}
.gallery-grid img:nth-child(-n+4){grid-column:span 3}
.gallery-grid img:nth-child(n+5){grid-column:span 4}
.gallery-grid img:nth-child(5),.gallery-grid img:nth-child(6),.gallery-grid img:nth-child(7){grid-column:span 4}
@media print{
  .carousel-next{display:none}
  .outline-btn{display:inline-block;width:auto}
  .gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:59px}
  .gallery-grid img:nth-child(-n+4){grid-column:span 3}
  .gallery-grid img:nth-child(n+5){grid-column:span 4}
}

/* WONOTOLO_TABLET_LAYOUT_BRIDGE_V3 */
@media (min-width:768px) and (max-width:945px) {
    .site-header {
        height:auto;
    }

    .header-inner {
        height:auto;
        max-width:none;
        padding:10px 16px;
        flex-wrap:wrap;
    }

    .brand {
        flex:1;
    }

    .nav-toggle {
        display:block;
        border:0;
        background:#6c8c49;
        color:#fff;
        border-radius:6px;
        padding:8px 10px;
    }

    .main-nav {
        display:none;
        width:100%;
        height:auto;
        flex-direction:column;
        gap:0;
        padding:8px 0;
    }

    .main-nav.open {
        display:flex;
    }

    .main-nav a {
        padding:10px 0;
        font-size:13px;
    }

    .header-actions {
        display:none;
    }

    .section,
    .contact-inner,
    .footer-inner {
        width:auto;
        margin-left:16px;
        margin-right:16px;
    }

    .profile-wrap,
    .services-row,
    .stats-grid,
    .potential-row,
    .news-gallery,
    .contact-inner,
    .footer-inner {
        height:auto;
        display:block;
    }

    .profile-wrap > * {
        margin-bottom:18px;
    }

    .v-divider {
        display:none;
    }

    .profile-map {
        height:230px;
    }

    .services-row {
        padding:24px 0;
    }

    .service-intro {
        height:190px;
    }

    .service-card {
        height:auto;
        margin:12px 0;
    }

    .stats-grid .panel {
        margin:14px 0;
    }

    .potential-row {
        padding:24px 0;
    }

    .potential-card {
        height:auto;
        margin:12px 0;
    }

    .potential-card img {
        height:180px;
    }

    .carousel-next {
        display:none;
    }

    .news-gallery {
        padding:20px 0;
    }

    .gallery-grid {
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:120px;
    }

    .contact-strip {
        height:auto;
        padding:18px 0;
    }

    .contact-inner > div {
        margin:14px 0;
    }

    .theme-strip {
        height:auto;
        padding:20px;
        flex-wrap:wrap;
    }

    .footer {
        height:auto;
    }

    .footer-inner {
        padding:26px 0;
    }

    .f-brand,
    .f-links,
    .f-social,
    .f-copy {
        margin-bottom:25px;
    }

    .two-col {
        padding-left:0;
        border-left:0;
    }

    .footer-inner,
    .contact-inner {
        margin-left:20px;
        margin-right:20px;
    }
}