@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
.village-public{--blue:light-dark(#385e3e,#cdddaf);--onblue:light-dark(#f7f8ee,#233c2a);--bg:light-dark(#f6f7ee,#132420);--panel:light-dark(#fffef8,#20342b);--text:light-dark(#2d4236,#eef0df);--muted:light-dark(#65745f,#b5c5b4);--line:light-dark(#dce3d2,#354b40);--soft:light-dark(#e6ebd8,#2d4535);--sky:light-dark(#e1ebde,#142b36);--muted-strong:color-mix(in oklab,var(--text) 30%,var(--muted));background-color:var(--bg);background-image:linear-gradient(180deg,var(--bg),color-mix(in oklab,var(--bg) 88%,var(--soft)));font-size:14px;line-height:1.65}
.village-public h1,.village-public h2,.village-public h3{font-weight:500;letter-spacing:-.035em}.village-public h1{font-size:clamp(32px,4.1vw,49px);line-height:1.18;margin:20px 0}.village-public h2{font-size:27px;line-height:1.3}.village-public h3{font-size:19px;line-height:1.4}.village-public p{margin:0}.village-public .primary,.village-public .secondary{border-radius:13px;font-size:12px;min-height:44px;padding:12px 17px}.village-public .primary{background:var(--blue);color:var(--onblue)}.village-public .text-link{display:inline-flex;align-items:center;gap:9px;font-size:12px}.village-public .icon{flex-shrink:0}.village-header,.village-nav,.village-public main,.village-footer{max-width:1240px;margin:auto;padding-left:36px;padding-right:36px}.village-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}.village-identity{display:flex;align-items:center;gap:12px;color:var(--text)}.village-identity:hover{text-decoration:none}.village-identity img{object-fit:contain}.village-identity strong{font-size:17px;font-weight:500}.village-identity small{display:block;color:var(--muted-strong);font-size:11px}.village-header-actions{display:flex;align-items:center;gap:12px}.village-header-actions .icon-button{border:1px solid var(--line);border-radius:50%;background:var(--panel)}.village-nav{display:flex;flex-wrap:wrap;gap:10px 27px;padding-bottom:17px;border-bottom:1px solid var(--line);font-size:12px}.village-nav a{padding:5px 0;color:var(--muted-strong)}.village-nav a[aria-current]{color:var(--blue);box-shadow:0 2px var(--blue)}.village-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px;padding:35px 0 40px;min-height:460px}.village-hero h1 em{color:var(--blue);font-style:normal}.village-hero>div>p:not(.public-kicker){color:var(--muted);font-size:14px}.public-kicker{display:block;color:var(--muted-strong);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px!important}.public-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}.village-hero-photo{display:flex;flex-direction:column;align-items:stretch;position:relative;padding:0;margin:35px 0 40px;min-height:460px;border-radius:24px;overflow:hidden;isolation:isolate;background:var(--sky);color:#fff}.hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(9,20,12,.55),rgba(9,20,12,0) 48%)}.hero-tint{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none}.hero-tint-siang{background:linear-gradient(100deg,rgba(18,38,24,.68) 0%,rgba(18,38,24,.4) 48%,rgba(18,38,24,.1) 78%)}.hero-tint-pagi{background:linear-gradient(100deg,rgba(26,48,30,.6) 0%,rgba(26,48,30,.3) 48%,rgba(26,48,30,.05) 78%)}.hero-tint-senja{background:linear-gradient(100deg,rgba(66,38,12,.7) 0%,rgba(66,38,12,.42) 48%,rgba(66,38,12,.12) 78%)}.hero-tint-malam{background:linear-gradient(100deg,rgba(4,10,18,.84) 0%,rgba(4,10,18,.6) 48%,rgba(4,10,18,.3) 78%)}.village-hero-photo[data-phase="siang"] .hero-tint-siang{opacity:1}.village-hero-photo[data-phase="pagi"] .hero-tint-pagi{opacity:1}.village-hero-photo[data-phase="senja"] .hero-tint-senja{opacity:1}.village-hero-photo[data-phase="malam"] .hero-tint-malam{opacity:1}.hero-top{position:relative;z-index:2;display:flex;align-items:flex-start;padding:26px 48px 0}.village-hero-photo .hero-top .hero-live{display:inline-flex;align-items:center;margin:0!important;padding:8px 14px;border-radius:999px;background:rgba(10,22,13,.45);border:1px solid rgba(255,255,255,.28);font-size:12.5px;letter-spacing:.02em;color:#fff}.hero-badge{position:absolute;top:26px;right:48px;z-index:2;display:inline-flex;align-items:center;gap:9px;margin:0;padding:8px 14px;border-radius:999px;font-size:12px;background:rgba(10,22,13,.55);border:1px solid rgba(255,255,255,.35)}.hero-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#e0684f;flex-shrink:0}.hero-badge.is-open::before{background:#93d36b}.hero-badge strong{font-weight:600}.hero-badge span{color:#dde7cd}.hero-content{position:relative;z-index:1;margin-top:auto;align-self:flex-start;max-width:660px;padding:28px 48px 30px}.hero-content .public-kicker{color:#dde7cd}.village-public .village-hero-photo .hero-content>p:not(.public-kicker){color:#edf2df;font-size:14px}.hero-content .text-link{color:#fff}.hero-headlines{position:relative;z-index:1;align-self:stretch;display:flex;align-items:center;gap:14px;padding:13px 48px;background:rgba(8,19,11,.66);color:#fff;font-size:12.5px}.hero-headlines-label{color:#cfdcbc;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;flex-shrink:0}.hero-headline-viewport{position:relative;flex:1 1 auto;min-width:0;height:24px}.hero-headline{position:absolute;inset:0;display:flex;align-items:center;gap:12px;color:#fff;opacity:0;visibility:hidden;transform:translateY(8px)}.hero-headline.is-active{opacity:1;visibility:visible;transform:none}.hero-headline strong{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-headline-meta{color:#cfdcbc;font-size:11.5px;flex-shrink:0}.hero-headline .icon{margin-left:auto;flex-shrink:0;width:15px;height:15px}.hero-dots{display:flex;align-items:center;gap:2px;flex-shrink:0}.hero-dot{position:relative;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.hero-dot::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(255,255,255,.35)}.hero-dot.is-active::before{background:#fff}.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media(prefers-reduced-motion:no-preference){.hero-tint{transition:opacity 1.5s ease}.hero-photo{animation:hero-drift 24s ease-in-out infinite alternate}.village-hero-photo.is-paused .hero-photo{animation-play-state:paused}.hero-top{animation:hero-rise .8s ease .05s both}.hero-badge{animation:hero-rise .8s ease .15s both}.hero-content{animation:hero-rise .9s ease .2s both}.hero-headlines{animation:hero-rise .9s ease .35s both}.hero-headline{transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s}.hero-headline.is-active{transition:opacity .6s ease,transform .6s ease,visibility 0s}@keyframes hero-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.4%,-1.8%)}}@keyframes hero-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}.public-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.public-shortcuts a{display:flex;align-items:center;gap:15px;border:1px solid var(--line);background:var(--panel);padding:20px;border-radius:16px;color:var(--text)}.public-shortcuts a>.icon:first-child{color:var(--blue);width:24px;height:24px}.public-shortcuts a>.icon:last-child{margin-left:auto;width:15px}.public-shortcuts small{display:block;color:var(--muted-strong);font-size:11px;margin-top:3px}.public-section{padding:36px 0;border-bottom:1px solid var(--line)}.public-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.public-section-heading .public-kicker{margin-bottom:9px!important}.public-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.public-news-card{min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--panel);border-radius:18px}.news-cover{display:block;aspect-ratio:16/10;background:var(--soft);overflow:hidden}.news-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}.news-cover:hover img{transform:scale(1.025)}.news-no-photo{display:grid;width:100%;height:100%;place-items:center;color:var(--muted)}.news-no-photo .icon{width:32px;height:32px;opacity:.55}.news-copy{padding:23px}.news-card-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px;color:var(--muted-strong);font-size:11px;margin-bottom:11px}.news-copy h3 a{color:var(--text);overflow-wrap:anywhere}.news-copy>p{color:var(--muted-strong);font-size:13px;line-height:1.8;margin:12px 0 18px}.public-empty{grid-column:1/-1;color:var(--muted);padding:28px 0;font-size:14px}.public-filters{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.public-filters a{font-size:12px;color:var(--muted);padding:9px 14px;border-radius:22px}.public-filters a[aria-current]{background:var(--soft);color:var(--blue)}.public-officials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:24px}.compact-officials{grid-template-columns:repeat(2,minmax(0,1fr))}.public-official{padding:25px;border:1px solid var(--line);border-radius:18px;background:var(--panel);min-width:0}.official-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--soft);color:var(--blue);margin-bottom:20px}.public-official h3{overflow-wrap:anywhere}.public-official p{color:var(--muted-strong);font-size:12px;margin:7px 0 16px}.public-statistics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:24px 0 17px}.public-statistics article{padding:25px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.public-statistics strong{font-size:35px;font-weight:500;line-height:1.3}.public-statistics p{font-size:13px;color:var(--muted-strong);margin-top:7px}.public-statistics+.muted{font-size:12px}.public-contact-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:30px;max-width:700px}.public-contact-card h2{margin-bottom:15px}.public-contact-links{display:grid;gap:18px;margin-top:25px}.public-contact-links a{display:flex;align-items:center;gap:14px;color:var(--text)}.public-contact-links small{display:block;font-size:11px;color:var(--muted-strong)}.location-card{max-width:700px;margin-top:28px}.location-card .home-card-head{margin-bottom:13px}.location-address{font-size:14px;line-height:1.75;color:var(--muted-strong);margin-bottom:17px;overflow-wrap:break-word}.village-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:27px;padding-bottom:30px;color:var(--muted-strong);font-size:12px}.village-footer a{color:inherit}.village-footer small{display:block;font-size:11px;margin-top:4px}.public-breadcrumb{display:flex;gap:11px;padding-top:28px;color:var(--muted-strong);font-size:12px}.public-breadcrumb a{color:var(--muted-strong)}.public-page{padding:32px 0 55px;min-height:65vh}.public-page h1{max-width:900px;margin-bottom:25px}.public-page>.public-prose{max-width:760px;margin:25px 0}.public-article{max-width:850px;margin:36px auto 65px}.public-article h1{margin:17px 0}.public-byline{font-size:12px;color:var(--muted-strong);margin-bottom:27px!important}.public-prose{white-space:pre-wrap;overflow-wrap:break-word;font-size:16px;line-height:1.95}.public-article figure,.website-preview figure{margin:25px 0}.article-cover-pattern .news-placeholder{height:auto;aspect-ratio:16/10;border-radius:16px}.public-article img,.website-preview img{display:block;width:100%;height:auto;border-radius:16px}.public-article figcaption,.website-preview figcaption{font-size:12px;line-height:1.6;color:var(--muted-strong);padding:10px 0}.public-event{padding:17px;background:var(--soft);border-radius:12px;margin:22px 0!important}.public-article>.text-link{margin-top:30px}
/* Admin CMS: one grid of columns keeps statuses and actions aligned. */
.website-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.website-toolbar>div{min-width:0}.website-toolbar h2{margin-bottom:6px}.website-filter{display:flex;align-items:end;gap:15px;flex-wrap:wrap;margin-bottom:22px}.website-filter label{margin:0}.website-filter label:first-child{flex:1;min-width:200px}.website-filter label:nth-child(2){min-width:150px}.website-filter input,.website-filter select{margin-top:7px}.website-table{table-layout:fixed;min-width:780px;background:var(--panel);border-radius:14px}.website-table th:first-child{width:41%}.website-table th:nth-child(2){width:12%}.website-table th:nth-child(3){width:13%}.website-table th:nth-child(4){width:20%}.website-table th:nth-child(5){width:14%}.website-table td{vertical-align:middle}.website-table td:last-child{white-space:nowrap}.website-table td:last-child>*+*{margin-left:10px}.website-row-title{display:flex;align-items:center;gap:13px;min-width:0}.website-row-title>div{min-width:0}.website-row-title strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}.website-row-title img{width:64px;height:48px;object-fit:cover;border-radius:9px;flex:0 0 64px}.website-row-title small{margin-top:5px}.website-status{display:inline-flex;align-items:center;justify-content:center;min-width:78px;min-height:29px;padding:5px 9px;border-radius:9px;font-size:11px;background:var(--soft);color:var(--muted)}.website-status.published{background:var(--mint);color:var(--green)}.website-status.archived{background:var(--bg)}.website-pager{margin-top:22px}.website-source{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:12px}.website-source summary{cursor:pointer}.website-source p{margin:15px 0}.website-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-top:24px;align-items:start}.website-form-card{padding:25px;background:var(--panel);border:1px solid var(--line);border-radius:17px;min-width:0}.website-form-card>label:first-child{margin-top:0}.website-form-card textarea{width:100%;font:inherit;line-height:1.8;min-height:240px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);resize:vertical}.website-form-card textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.website-form-card input[type=file]{font-size:12px;margin-top:10px}.website-form-card .muted{font-size:12px;line-height:1.7}.website-switch{display:flex;align-items:center;gap:9px}.website-switch input{min-height:18px;width:18px;flex:0 0 18px;accent-color:var(--blue)}.website-publishing{position:sticky;top:90px}.website-save-actions{display:grid;gap:10px;margin-top:24px}.website-photo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.website-photo{margin:20px 0 0;padding:13px;background:var(--bg);border:1px solid var(--line);border-radius:12px;min-width:0}.website-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}.website-photo label{margin-top:14px}.website-photo input{margin-top:7px}.website-photo-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:12px}.website-photo-actions button{font-size:11px}.website-preview{max-width:850px;margin:35px auto;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:18px}.website-preview h2{font-size:30px;overflow-wrap:anywhere;margin-bottom:22px}
@media(max-width:1050px){.compact-officials{grid-template-columns:repeat(2,minmax(0,1fr))}.website-editor-grid{grid-template-columns:minmax(0,1fr) 265px}}
@media(max-width:760px){.village-header,.village-nav,.village-public main,.village-footer{padding-left:22px;padding-right:22px}.village-hero{grid-template-columns:1fr;gap:30px;padding-top:32px;min-height:0}.village-hero-photo{min-height:356px;margin-top:32px}.hero-top{order:1;padding:22px 30px 0}.hero-content{order:3;padding:20px 30px 26px}.village-hero .hero-badge{position:static;order:2;align-self:flex-start;justify-self:start;margin:2px 30px 0}.hero-headlines{order:4;padding:12px 30px}.village-hero h1{font-size:39px}.public-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.public-shortcuts a{padding:12px 13px;gap:10px;font-size:13.5px}.public-shortcuts a>.icon:first-child{width:34px;height:34px;padding:7px}.public-shortcuts a>.icon:last-child{display:none}.public-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-officials{grid-template-columns:repeat(2,minmax(0,1fr))}.website-editor-grid{grid-template-columns:1fr}.website-publishing{position:static}.website-toolbar{flex-wrap:wrap;gap:13px}}
@media(max-width:480px){.village-header{align-items:flex-start;gap:10px}.village-identity{gap:8px}.village-identity img{width:33px;height:33px}.village-identity strong{font-size:14px}.village-identity small{font-size:10px}.village-header-actions{gap:6px}.village-header-actions .icon-button{width:32px;min-height:36px}.village-nav{gap:9px 19px;font-size:11px}.village-hero-photo{min-height:320px;border-radius:18px}.hero-top{padding:18px 22px 0}.hero-content{padding:18px 22px 24px}.village-hero .hero-badge{margin-left:22px;margin-right:22px}.hero-headlines{padding:11px 22px;gap:10px}.hero-headline-meta{display:none}.public-news-grid,.public-officials,.public-statistics{grid-template-columns:1fr}.public-section{padding:30px 0}.public-section-heading{align-items:flex-start;gap:14px}.public-section h2{font-size:23px}.public-section-heading>.text-link{font-size:11px;text-align:right}.public-section-heading>.text-link .icon{display:none}.public-contact{flex-direction:column;align-items:start}.public-article h1,.public-page h1{font-size:32px}.public-prose{font-size:15px}.website-form-card{padding:20px}.website-photo-list{grid-template-columns:1fr}.website-preview{padding:20px}.website-preview h2{font-size:25px}.website-filter{align-items:stretch}.website-filter label{width:100%}.website-filter label:first-child{min-width:0}.website-filter label:nth-child(2){min-width:0}.website-filter button{align-self:end}}
@media(prefers-reduced-motion:reduce){.news-cover img{transition:none}.news-cover:hover img{transform:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

.website-row-placeholder{display:block;width:64px;height:48px;flex:0 0 64px;background:var(--soft);border:1px solid var(--line);border-radius:9px}
.village-public{color:var(--text)}.public-news-grid.home-news{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.home-news>.public-news-card:only-child{display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}.home-news>.public-news-card:only-child .news-cover{height:100%;min-height:250px;aspect-ratio:16/9}
@media(max-width:600px){.home-news>.public-news-card:only-child{grid-template-columns:1fr}.home-news>.public-news-card:only-child .news-cover{height:auto;min-height:0}}
/* Public portraits are distinct from private account photos. */
.public-official{padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--panel);box-shadow:0 9px 30px #00000006}.official-portrait{aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,var(--soft),var(--panel))}.official-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}.official-mark{width:78px;height:78px;border-radius:50%;margin:0;background:var(--panel);border:1px solid var(--line)}.official-mark .icon{width:31px;height:31px;opacity:.65}.official-copy{padding:23px;display:flex;flex-direction:column;align-items:start;flex:1}.official-copy p{margin-bottom:18px}.official-copy .secondary{margin-top:auto}
.news-sharing{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 25px;padding:0 0 18px;border-bottom:1px solid var(--line)}.news-counter{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted-strong)}.news-counter .icon{width:15px;height:15px}.article-share-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.article-share-bar.share-compact{margin:-10px 0 24px;padding:0}.article-share-bar.share-full{margin:28px 0 16px;padding:18px 0;border-top:1px solid var(--line)}.share-caption{font-size:12px;font-weight:600;color:var(--muted-strong);text-transform:uppercase;letter-spacing:.05em}.share-items{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;min-width:40px;padding:0 12px;font-size:12px;font-weight:500;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;font-family:inherit}.share-compact .share-btn{padding:0;width:40px;height:40px;border-radius:50%;color:var(--muted);background:transparent}.share-compact .share-btn:hover{background:var(--soft);color:var(--text)}.share-btn:hover{background:var(--soft);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));color:var(--text)}.share-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.share-btn .icon{width:18px;height:18px;flex-shrink:0}.share-feedback{font-size:12px;font-weight:600;color:var(--blue);padding:0 4px}
/* Quill core and its local stylesheet are BSD-3-Clause, without cloud services. */
#website-rich-editor{min-height:300px;background:var(--panel);color:var(--text);border-color:var(--line);border-radius:0 0 11px 11px}.ql-toolbar.ql-snow{border-color:var(--line);border-radius:11px 11px 0 0;background:var(--bg);margin-top:8px}.ql-snow .ql-stroke{stroke:var(--text)}.ql-snow .ql-fill{fill:var(--text)}.ql-snow .ql-picker{color:var(--text)}.ql-snow .ql-picker-options,.ql-snow .ql-tooltip{background:var(--panel);color:var(--text);border-color:var(--line)}.ql-container{font:inherit}.ql-editor{font:inherit;line-height:1.8;min-height:300px}.ql-editor.ql-blank:before{color:var(--muted)}.rich-prose{font-size:16px;line-height:1.95;overflow-wrap:break-word}.rich-prose p{margin:0 0 18px}.rich-prose h2,.rich-prose h3{margin:25px 0 12px}.rich-prose ul,.rich-prose ol{padding-left:25px;margin:15px 0}.rich-prose blockquote{border-left:3px solid var(--line);margin:20px 0;padding-left:20px;color:var(--muted)}.rich-prose .ql-align-center{text-align:center}.rich-prose .ql-align-right{text-align:right}.rich-prose .ql-align-justify{text-align:justify}
@media(max-width:480px){.news-sharing{gap:12px}.article-share-bar{gap:8px}.share-items{gap:6px}.rich-prose{font-size:15px}}
/* Portal workspace and compact organization directory. */
.portal-content-type{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);align-items:center;gap:8px 24px}.portal-content-type label{margin:0}.portal-content-type p{grid-column:1/-1;margin:0}.website-form-card [hidden]{display:none!important}.website-form-card #portal-project-fields{padding:16px;border:1px solid var(--line);border-radius:14px;margin:16px 0}.territory-directory{margin-top:32px}.territory-group{border:1px solid var(--line);border-radius:16px;margin:12px 0;overflow:hidden}.territory-content{padding:0 20px 20px}.territory-content section{margin-top:20px}.project-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px;border:1px solid var(--line);border-radius:16px}.project-summary dt{font-size:13px;color:var(--muted-strong)}.project-summary dd{margin:6px 0 0;font-weight:600}@media(max-width:600px){.portal-content-type{grid-template-columns:1fr}.project-summary{grid-template-columns:1fr}}



/* Homepage previews stay compact even when portraits have not been uploaded. */
.compact-officials{gap:14px;align-items:start}.compact-officials .public-official{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:16px;padding:18px;border-radius:16px;box-shadow:none}.compact-officials .official-portrait{width:64px;height:64px;aspect-ratio:1;border-radius:16px;border:1px solid var(--line)}.compact-officials .official-mark{width:100%;height:100%;border:0;border-radius:0;background:transparent}.compact-officials .official-mark .icon{width:27px;height:27px}.compact-officials .official-copy{padding:0;min-width:0}.compact-officials .official-copy h3{font-size:16px;line-height:1.4;margin:1px 0 5px;overflow-wrap:anywhere}.compact-officials .official-copy p{font-size:12px;line-height:1.6;margin:0;overflow-wrap:anywhere}.compact-officials .official-copy .secondary{margin-top:10px;padding:8px 12px}@media(max-width:600px){.compact-officials{grid-template-columns:1fr}.compact-officials .public-official{padding:16px;gap:14px}}
.publication-options{border:0;padding:0;margin:16px 0}.publication-options legend{font-size:12px;font-weight:600;margin-bottom:10px}.publication-options>label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:8px 0;padding:12px;border:1px solid var(--line);border-radius:12px;font-weight:400}.publication-options>label:has(input:checked){border-color:var(--blue);background:var(--soft)}.publication-options input{width:17px;min-height:17px;height:17px;flex:0 0 17px;margin:3px 0 0;accent-color:var(--blue)}.publication-options strong{display:block;font-size:12px}.publication-options small{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}.publication-summary{border-left:3px solid var(--blue);padding:10px 12px;background:var(--soft);border-radius:0 9px 9px 0;font-size:12px;line-height:1.7;margin:16px 0}.publication-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.publication-shortcuts .secondary{padding:8px 10px;font-size:11px;min-height:44px}.publication-draft{justify-content:center;min-height:44px;background:none;border:0;color:var(--blue);font:inherit;cursor:pointer}
/* Keep the featured cover and long copy inside their own grid tracks. */
.home-news>.public-news-card:only-child{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.home-news>.public-news-card:only-child>.news-cover{width:100%;max-width:100%;min-width:0;aspect-ratio:auto;position:relative}
.home-news>.public-news-card:only-child>.news-copy{min-width:0;overflow-wrap:anywhere}
.news-copy>p{overflow-wrap:break-word}.news-no-photo{min-height:180px}.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.social-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:24px;color:var(--text);font-size:12px}.social-links a:hover{background:var(--soft)}
@media(max-width:600px){.home-news>.public-news-card:only-child{grid-template-columns:minmax(0,1fr)}.home-news>.public-news-card:only-child>.news-cover{aspect-ratio:16/9;height:auto}}


.social-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;flex:0 0 44px;color:var(--muted);background:transparent}.social-links a:hover{background:var(--soft);color:var(--text)}.social-links a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.social-links a .icon{width:20px;height:20px}.public-official>.social-links{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:4px;margin:0;padding:10px 0 0;border-top:1px solid var(--line)}.team-directory .public-official>.social-links{margin:0;gap:4px}.team-directory .public-official{row-gap:12px}

@media(max-width:480px){.team-directory .territory-content{padding:10px}.team-directory .territory-content .public-official{padding:12px}.team-directory .public-official>.social-links{gap:0}}

.team-directory .official-organization{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;max-width:none;margin:30px 0}.team-directory .organization-section{grid-column:1/-1;min-width:0;margin:0}.team-directory .organization-section:before{display:none}.team-directory .organization-kaur,.team-directory .organization-kasi{grid-column:auto}.official-organization:not(:has(>.organization-kasi))>.organization-kaur,.official-organization:not(:has(>.organization-kaur))>.organization-kasi{grid-column:1/-1}.team-directory .organization-heading{display:block;text-align:center;margin:0 0 14px}.team-directory .organization-heading>span{display:none}.team-directory .organization-heading h2{font-size:12px;font-weight:500;letter-spacing:.05em;color:var(--muted-strong);margin:0}.team-directory .public-officials{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:12px;margin:0}.official-post{width:140px;min-width:0}.official-support{display:flex;flex-direction:column;gap:10px;margin-top:10px}.official-support>.official-post{width:100%}.team-directory .public-official.official-flip{display:block;position:relative;perspective:900px;width:100%;height:232px;padding:0;border:0;border-radius:14px;overflow:clip;background:transparent;box-shadow:none}.official-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.7,.2,1)}.is-flipped>.official-flip-inner{transform:rotateY(180deg)}.official-flip-front,.official-flip-back{position:absolute;inset:0;padding:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;box-shadow:0 4px 12px #00000008}.official-flip-back{transform:rotateY(180deg)}.official-flip-toggle{display:block;width:100%;padding:0;border:0;border-radius:8px;background:var(--soft);color:var(--blue);flex:none;cursor:pointer}.team-directory .official-flip .official-portrait{display:grid;place-items:center;width:100%;height:96px;aspect-ratio:auto;background:var(--soft);border-radius:8px;overflow:hidden}.team-directory .official-flip .official-mark{width:100%;height:100%;border:0;border-radius:0;background:transparent;margin:0}.team-directory .official-flip h3{font-size:12px;line-height:1.45;font-weight:600;margin:10px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.team-directory .official-flip-front>p{font-size:11px;line-height:1.5;color:var(--muted-strong);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.official-flip-hint{font-size:11px;color:var(--blue);padding-top:8px;margin-top:auto}.official-flip-back>strong{font-size:12px;font-weight:600;line-height:1.45;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.official-whatsapp{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:var(--onblue);border-radius:7px;min-height:36px;padding:6px;font-size:11px;flex:none}.official-whatsapp:hover{color:var(--onblue);text-decoration:none}.official-whatsapp .icon{width:14px;height:14px}.team-directory .official-flip-back>.social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:6px 0 0}.official-flip-back .social-links a{width:30px;height:30px;min-height:30px;flex:0 0 30px;border:0;padding:0}.official-flip-back .social-links .icon{width:16px;height:16px}.official-flip-return{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:auto;padding:4px;border:0;background:transparent;color:var(--muted-strong);min-height:30px;font-size:11px;cursor:pointer;flex:none}.official-flip-return .icon{width:12px;height:12px}.organization-pimpinan>.public-officials>.official-post{width:208px}.team-directory .organization-pimpinan .official-flip{height:252px}.organization-pimpinan .official-portrait{height:132px!important}.organization-pimpinan .official-flip h3{font-size:16px}.organization-sekretaris>.public-officials>.official-post{width:156px}.team-directory .official-support .official-flip{height:208px}.official-support .official-flip .official-portrait{height:62px}.team-directory .territory-directory{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}.team-directory .territory-directory>h2{font-size:23px;margin-bottom:10px}.team-directory .territory-directory>.muted{font-size:13px;line-height:1.7;margin-bottom:22px}.team-directory .territory-group{border:0;border-radius:0;margin-top:28px;overflow:visible}.team-directory .territory-heading{padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:18px}.team-directory .territory-heading h3{font-size:16px;margin:0}.team-directory .territory-content{padding:0}.team-directory .territory-content>h3,.team-directory .territory-rw>h4{font-size:13px;text-align:center;margin:20px 0 14px}.team-directory .territory-rw{margin-top:24px}.team-directory .official-flip:not(.flip-ready){height:auto!important}.official-flip:not(.flip-ready) .official-flip-front,.official-flip:not(.flip-ready) .official-flip-back{position:relative;transform:none}.official-flip:not(.flip-ready) .official-flip-return,.official-flip:not(.flip-ready) .official-flip-hint{display:none}
@media(max-width:740px){.team-directory .official-organization{grid-template-columns:minmax(0,1fr)}.team-directory .organization-kaur,.team-directory .organization-kasi{grid-column:1/-1}}
@media(max-width:420px){.team-directory .official-post{width:calc((100% - 12px)/2)}.team-directory .official-support>.official-post{width:100%}.organization-pimpinan>.public-officials>.official-post{width:190px}.organization-sekretaris>.public-officials>.official-post{width:152px}}
@media(pointer:coarse){.team-directory .public-official.official-flip{height:300px}.official-flip-back .social-links a{width:44px;height:44px;min-height:44px;flex-basis:44px}.official-whatsapp,.official-flip-return{min-height:44px}}
@media(prefers-reduced-motion:reduce){.official-flip-inner{transition:none}}



.head-welcome{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;align-items:center}.head-welcome-empty{grid-template-columns:minmax(0,1fr)}.head-portrait{aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--soft);box-shadow:0 5px 0 var(--line)}.head-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}.head-portrait-placeholder{display:grid;place-items:center;height:100%;color:var(--muted)}.head-portrait-placeholder .icon{width:64px;height:64px}.head-welcome-copy{min-width:0;max-width:720px}.head-welcome-copy h2{margin:0 0 18px}.head-message{white-space:pre-line;overflow-wrap:break-word;line-height:1.85}.head-message.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.head-more{margin-top:8px;font-size:13px;color:var(--muted-strong)}.head-more a{color:var(--blue);font-weight:600}.head-signature{display:grid;gap:2px;margin:20px 0}.head-signature strong{font-size:15px;font-weight:600}.head-signature span{font-size:12px;color:var(--muted-strong)}
@media(max-width:600px){.head-welcome{grid-template-columns:minmax(0,1fr);gap:26px}.head-portrait{width:140px;aspect-ratio:1;box-shadow:0 4px 0 var(--line)}.head-welcome-copy h2{font-size:25px}.head-welcome-copy>.secondary{max-width:100%;flex-wrap:wrap}}

/* Top bar desa (2026-11): the full two-row village header is
   tidied in place and gains calm hover micro-interactions.
   The slim floating pill is a SEPARATE element (.village-pill
   below): the static bar never leaves the flow and the two
   never morph into each other. The one-element morph this
   replaces visibly jumped on the way back to the top — its
   children teleported between the two geometries (measured
   layout shift 0.0161) while paint-only transitions ran .3s
   against snapping geometry (owner report, 3 Nov 2026).
   These rules ship after the base header rules above, so at
   equal specificity they win the cascade. The pill is 44px
   tall: 5px padding top and bottom, a 1px border, and the
   tallest content (the compact Masuk button) at 32px. */
.village-topbar{position:relative;z-index:70}
.village-pill{position:fixed;top:10px;left:50%;transform:translate(-50%,-10px);width:min(1060px,calc(100% - 32px));display:flex;align-items:center;gap:16px;padding:5px 8px 5px 12px;background-color:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 32px rgb(16 32 20/.16),0 2px 8px rgb(16 32 20/.08);z-index:80;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s}
.village-pill.is-visible{visibility:visible;opacity:1;transform:translate(-50%,0);pointer-events:auto;transition:opacity .18s ease-out,transform .18s ease-out}
.village-identity img{transition:transform .2s ease-out,width .3s ease,height .3s ease}
.village-identity:hover img{transform:scale(1.04)}
.village-identity:focus-visible,.village-header-actions .icon-button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.village-header-actions .icon-button{transition:border-color .18s ease-out}
.village-header-actions .icon-button:hover{border-color:var(--blue)}
.village-header-actions .icon-button.theme svg{transition:transform .25s ease-out}
.village-header-actions .icon-button.theme:hover svg{transform:rotate(24deg)}
.topbar-menu{display:none}
.village-nav{gap:8px 14px}
.village-nav a{position:relative;padding:7px 13px;border-radius:999px;transition:color .18s ease-out,background-color .18s ease-out}
.village-nav a:hover{color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,transparent);text-decoration:none}
.village-nav a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.village-nav a[aria-current]{color:var(--blue);background:color-mix(in srgb,var(--blue) 13%,transparent);box-shadow:none;font-weight:700}
.village-pill .village-identity{gap:9px;flex:none;min-width:0}
.village-pill .village-identity img{width:30px;height:30px}
.village-pill .village-identity span{min-width:0}
.village-pill .village-identity strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.village-pill .village-nav{order:2;flex:1 1 auto;flex-wrap:nowrap;justify-content:center;gap:2px 4px;max-width:none;margin:0;padding:0;border-bottom:0;font-size:11.5px;min-width:0}
.village-pill .village-nav a{padding:5px 7px;white-space:nowrap}
.village-pill .village-header-actions{order:3;gap:8px;flex:none}
.village-pill .village-header-actions .icon-button{width:32px;height:32px;min-height:32px;flex-basis:32px}
.village-pill .topbar-service{display:none}
@media(max-width:900px){.village-pill .village-nav a{padding:5px 5px}}
@media(max-width:760px){
.village-pill{width:calc(100% - 20px);gap:8px;padding:5px 6px 5px 10px}
.village-pill .village-identity strong{max-width:32vw}
.village-pill .village-nav{display:none}
.village-pill .topbar-menu{display:inline-flex}
.village-pill.is-menu-open .village-nav{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 32px rgb(16 32 20/.16),0 2px 8px rgb(16 32 20/.08);padding:8px;font-size:12.5px}
.village-pill.is-menu-open .village-nav a{padding:9px 12px}
.village-pill.is-menu-open .topbar-service{display:flex;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;gap:11px}
.village-pill.is-menu-open .topbar-wa{justify-content:center;min-height:42px}
}
@media(prefers-reduced-motion:reduce){
.village-pill,.village-identity img,.village-nav a,.village-header-actions .icon-button.theme svg{transition:none}
.village-identity:hover img{transform:none}
}

/* Polish beranda (2026-11): the homepage shortcut cards and the
   Kabar section gain a calm scroll reveal and hover
   micro-interactions. The reveal hidden state (.reveal-init)
   is applied by website-public.js only and never ships in
   markup, so no-JS and reduced-motion visitors see everything
   at once; the script removes the reveal classes again once
   the reveal has played, so the cards keep their own hover
   transitions afterwards. Hover motion is gated to fine
   pointers so touch taps never leave a stuck hover state;
   taps get :active feedback instead. These rules ship last in
   the file so they win the cascade at equal specificity. */
.reveal-init{opacity:0;transform:translateY(16px)}
.reveal-init.is-revealed{opacity:1;transform:none;transition:opacity .55s ease-out,transform .55s ease-out;transition-delay:var(--reveal-delay,0ms)}
.public-shortcuts a{transition:transform .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out}
.public-shortcuts a>.icon{transition:transform .25s ease-out,background-color .25s ease-out}
.public-shortcuts a>.icon:first-child{background:var(--soft);border-radius:12px;width:40px;height:40px;padding:8px}
.public-shortcuts a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.public-shortcuts a:active{transform:translateY(-1px)}
.home-news .public-news-card{transition:transform .3s ease-out,border-color .3s ease-out,box-shadow .3s ease-out}
.home-news .news-cover img{transition:transform .6s ease-out}
.home-news .news-no-photo .icon{transition:transform .3s ease-out}
.home-news .news-copy h3 a{display:block;padding:10px 0;margin:-10px 0;transition:color .2s ease-out}
.home-news .news-copy .text-link{min-height:44px}
.home-news .news-cover:focus-visible,.home-news .news-copy h3 a:focus-visible,.home-news .news-copy .text-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#kabar .public-section-heading>.text-link{position:relative;min-height:44px}
#kabar .public-section-heading>.text-link .icon{transition:transform .2s ease-out}
#kabar .public-section-heading>.text-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease-out}
#kabar .public-section-heading>.text-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#kabar .public-section-heading>.text-link:focus-visible::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
.public-shortcuts a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 14px 30px rgb(16 32 20/.12)}
.public-shortcuts a:hover>.icon:first-child{background:color-mix(in srgb,var(--blue) 16%,var(--soft));transform:translateX(2px)}
.public-shortcuts a:hover>.icon:last-child{transform:translateX(4px)}
.home-news .public-news-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 16px 34px rgb(16 32 20/.12)}
.home-news .public-news-card:hover .news-cover img{transform:scale(1.05)}
.home-news .public-news-card:hover .news-no-photo .icon{transform:scale(1.08)}
.home-news .public-news-card:hover .news-copy h3 a{color:var(--blue)}
#kabar .public-section-heading>.text-link:hover{color:var(--blue)}
#kabar .public-section-heading>.text-link:hover::after{transform:scaleX(1)}
#kabar .public-section-heading>.text-link:hover .icon{transform:translateX(3px)}
}
@media(hover:none){
.home-news .news-cover:hover img{transform:none}
}
@media(max-width:600px){
#kabar .public-section-heading{flex-wrap:wrap}
.public-shortcuts a{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
.reveal-init{opacity:1;transform:none}
.reveal-init.is-revealed{transition:none}
.public-shortcuts a,.public-shortcuts a>.icon,.home-news .public-news-card,.home-news .news-cover img,.home-news .news-no-photo .icon,.home-news .news-copy h3 a,#kabar .public-section-heading>.text-link .icon,#kabar .public-section-heading>.text-link::after{transition:none}
.public-shortcuts a:hover,.public-shortcuts a:active,.home-news .public-news-card:hover{transform:none}
.public-shortcuts a:hover>.icon:first-child,.public-shortcuts a:hover>.icon:last-child,.home-news .public-news-card:hover .news-cover img,.home-news .public-news-card:hover .news-no-photo .icon,#kabar .public-section-heading>.text-link:hover .icon{transform:none}
}

/* Kabar editorial + gerak bersama (2026-11): the homepage
   Kabar section and the /kabar archive share one editorial
   language from the owner-approved mockup — one wide featured
   card (cover, soft per-category label, orange BARU badge for
   articles published within fourteen days, full meta with
   reading time) beside a rail of compact square-thumb rows.
   Articles without a cover get a deliberate placeholder: a
   green gradient block with a white newspaper glyph, in both
   themes. The same reveal machinery now also serves the other
   public pages, and the population numbers count up via
   website-public.js. These rules ship last in the file so
   they win the cascade at equal specificity. */
.news-cat{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--blue)}
.news-cat.cat-berita{background:light-dark(#e2efdf,#28452f);color:light-dark(#2f6138,#a7d3ab)}
.news-cat.cat-pengumuman{background:light-dark(#f8e9c4,#4c3c13);color:light-dark(#7a5800,#f2cd6e)}
.news-cat.cat-agenda{background:light-dark(#dfeef8,#1d3a4d);color:light-dark(#1f5a7d,#92c6ea)}
.news-cat.cat-pembangunan{background:light-dark(#f6e3cf,#4a2e16);color:light-dark(#8a4c14,#f0a95e)}
.news-badge-new{display:inline-flex;align-items:center;background:#e07f24;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:999px}
.news-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.news-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 13px;color:var(--muted-strong);font-size:12px}
.news-placeholder{display:grid;place-items:center;width:100%;height:100%;--cat-accent:var(--blue);background-color:color-mix(in oklab,var(--cat-accent) 13%,var(--panel));background-image:repeating-linear-gradient(45deg,color-mix(in oklab,var(--cat-accent) 8%,transparent) 0 14px,transparent 14px 28px);color:color-mix(in oklab,var(--cat-accent) 70%,var(--text))}.news-placeholder.cat-pengumuman{--cat-accent:light-dark(#7a5800,#f2cd6e)}.news-placeholder.cat-agenda{--cat-accent:light-dark(#1f5a7d,#92c6ea)}.news-placeholder.cat-pembangunan{--cat-accent:light-dark(#8a4c14,#f0a95e)}
.news-placeholder .icon{opacity:1}
.home-editorial{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.home-editorial.is-solo{grid-template-columns:minmax(0,1fr)}
.news-featured{border:1px solid var(--line);background:var(--panel);border-radius:18px;overflow:hidden;min-width:0}
.news-featured-cover{display:block;aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.news-featured-cover img{display:block;width:100%;height:100%;object-fit:cover}
.news-featured-cover .news-placeholder .icon{width:46px;height:46px}
.news-featured-copy{padding:24px}
.news-featured-copy h3{font-size:24px;line-height:1.35;margin:13px 0 10px}
.news-featured-copy h3 a{color:var(--text);overflow-wrap:anywhere}
.news-excerpt{color:var(--muted-strong);font-size:13.5px;line-height:1.8;margin-bottom:16px!important;overflow-wrap:anywhere}
.home-rail{display:grid;gap:14px;align-content:start}
.news-list{display:grid;gap:14px}
.news-archive-lead{margin-bottom:16px}
.news-archive-lead .news-featured-cover{aspect-ratio:21/9;max-height:440px}
.news-row{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px;min-width:0}
.news-row-thumb{flex:0 0 84px;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--soft);display:block}
.news-row-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.news-row-thumb .news-placeholder .icon{width:28px;height:28px}
.news-row-copy{min-width:0}
.news-row-copy h3{font-size:16px;line-height:1.45;margin:6px 0 5px}
.news-row-copy h3 a{color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.news-row-copy .news-meta{font-size:11.5px;gap:4px 11px}
.news-featured,.news-row{transition:transform .3s ease-out,border-color .3s ease-out,box-shadow .3s ease-out}
.news-featured-cover img,.news-row-thumb img{transition:transform .6s ease-out}
.news-featured h3 a,.news-row h3 a{transition:color .2s ease-out}
.news-featured:active,.news-row:active{transform:translateY(-1px)}
.news-featured-cover:focus-visible,.news-row-thumb:focus-visible,.news-featured h3 a:focus-visible,.news-row h3 a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.public-filters{position:sticky;top:64px;z-index:55;background:var(--bg);padding-top:10px;padding-bottom:10px}
.public-filters a{display:inline-flex;align-items:center;min-height:44px}
.news-pager{justify-content:center;margin-top:28px}
@media(hover:hover) and (pointer:fine){
.news-featured:hover,.news-row:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 16px 34px rgb(16 32 20/.12)}
.news-featured:hover .news-featured-cover img,.news-row:hover .news-row-thumb img{transform:scale(1.05)}
.news-featured:hover h3 a,.news-row:hover h3 a{color:var(--blue)}
}
@media(max-width:900px){
.home-editorial{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
.public-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.public-filters::-webkit-scrollbar{display:none}
.public-filters a{flex:0 0 auto}
}
@media(max-width:600px){
.news-featured-copy{padding:19px}
.news-featured-copy h3{font-size:21px}
.news-row{padding:12px;gap:12px}
.news-row-thumb{flex-basis:72px;width:72px;height:72px}
}
@media(prefers-reduced-motion:reduce){
.news-featured,.news-row,.news-featured-cover img,.news-row-thumb img,.news-featured h3 a,.news-row h3 a{transition:none}
.news-featured:hover,.news-row:hover,.news-featured:active,.news-row:active{transform:none}
.news-featured:hover .news-featured-cover img,.news-row:hover .news-row-thumb img{transform:none}
}

/* Strip beranda (PR C; tampilan Konsep 2 "Menyatu di Kaki Hero", dipilih pemilik 3 Nov 2026 menggantikan dua kartu di atas hero): tidak ada pita terpisah — strip adalah kaki hero itu sendiri, pita gradien hijau yang diturunkan dari token tema desa lewat color-mix atas --blue, sehingga kesepuluh palet (PR #101) mewarnainya ulang di mode terang dan gelap; aksen sorotan memakai --sky, teks memakai --onblue dan turunan redupnya. Garis waktu sholat terisi menuju waktu berikutnya; simpul berikutnya berdenyut. Animasi dekoratif hanya berjalan bila gerak diizinkan; di luar itu yang tersisa hanya pembaruan teks fungsional tiap detik. */
.hero-band{--band-dim:color-mix(in srgb,var(--onblue) 74%,transparent);--band-faint:color-mix(in srgb,var(--onblue) 62%,transparent);--band-line:color-mix(in srgb,var(--onblue) 20%,transparent);position:relative;z-index:1;display:flex;align-items:center;gap:30px;padding:18px 48px 16px;color:var(--onblue);background:linear-gradient(100deg,color-mix(in srgb,var(--blue) 42%,black),var(--blue) 38%,color-mix(in srgb,var(--blue) 34%,black) 68%,color-mix(in srgb,var(--blue) 55%,black));background-size:220% 100%;border-top:1px solid color-mix(in srgb,var(--onblue) 16%,transparent)}
.band-count{flex:none;min-width:0}
.band-event{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.band-chip{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sky) 70%,transparent);color:var(--sky);background:color-mix(in srgb,var(--sky) 12%,transparent)}
.band-chip-today{border-color:transparent;background:var(--onblue);color:var(--blue)}
.band-count-name{font-size:15.5px;font-weight:800;line-height:1.2}
.band-count-date{font-size:11px;font-weight:600;color:var(--band-dim)}
.band-count-next{display:block;margin-top:7px;font-size:11px;font-weight:600;color:var(--band-dim)}
.band-timer{display:flex;align-items:flex-start;gap:7px;font-variant-numeric:tabular-nums}
.band-unit{text-align:center}
.band-num{display:block;min-width:44px;text-align:center;font-size:29px;font-weight:800;line-height:1}
.band-dg{display:inline-block}
.band-unit small{display:block;margin-top:5px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--band-dim)}
.band-sep{font-size:24px;font-weight:800;opacity:.45;padding-top:1px}
.band-div{width:1px;align-self:stretch;flex:none;background:var(--band-line)}
.band-prayer{flex:1;min-width:0}
.band-prayer-head{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:12px}
.band-prayer-loc{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--band-dim)}
.band-prayer-loc .icon{width:14px;height:14px;color:var(--sky)}
.band-next{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sky)}
.band-next strong{font-weight:800;font-variant-numeric:tabular-nums}
.band-next-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.band-tl{position:relative;padding:0 2px}
.band-tl-track{position:absolute;left:calc(100%/12);right:calc(100%/12);top:5px;height:3px;border-radius:99px;background:var(--band-line)}
.band-tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--sky) 55%,var(--onblue)),var(--sky))}
.band-tl-nodes{position:relative;display:flex;list-style:none;margin:0;padding:0}
.band-tl-nodes li{flex:1;min-width:0;text-align:center}
.band-tl-dot{display:block;position:relative;z-index:1;width:11px;height:11px;margin:0 auto;border-radius:50%;background:color-mix(in srgb,var(--onblue) 35%,var(--blue));border:2px solid color-mix(in srgb,var(--blue) 55%,black)}
.band-tl-nodes li.is-done .band-tl-dot{background:color-mix(in srgb,var(--sky) 78%,var(--onblue))}
.band-tl-nodes li.is-next .band-tl-dot{background:var(--sky);border-color:color-mix(in srgb,var(--sky) 60%,black)}
.band-tl-name{display:block;margin-top:8px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--band-faint)}
.band-tl-time{display:block;margin-top:2px;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.band-tl-nodes li.is-next .band-tl-name,.band-tl-nodes li.is-next .band-tl-time{color:var(--sky)}
@media(prefers-reduced-motion:no-preference){
.hero-band{animation:band-grad 13s ease-in-out infinite alternate}
.band-tl-fill{transition:width 1.6s cubic-bezier(.3,.7,.2,1)}
.band-dg.tick{animation:band-slide .5s cubic-bezier(.2,.7,.3,1)}
.band-next-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sky) 75%,transparent);animation:band-ping 1.9s ease-out infinite}
.band-tl-nodes li.is-next .band-tl-dot{animation:band-pulse 2.2s ease-out infinite}
@keyframes band-grad{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes band-slide{from{transform:translateY(55%);opacity:0}to{transform:none;opacity:1}}
@keyframes band-ping{0%{transform:scale(.5);opacity:.7}80%,100%{transform:scale(1.15);opacity:0}}
@keyframes band-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sky) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
}
@media(max-width:760px){
.hero-band{order:5;flex-direction:column;align-items:stretch;gap:15px;padding:16px 30px 14px}
.band-div{width:auto;height:1px}
.band-timer{justify-content:space-between}
.band-num{min-width:40px;font-size:25px}
.band-next{margin-left:0}
.band-tl-name{font-size:8.5px;letter-spacing:.03em}
.band-tl-time{font-size:12.5px}
}
@media(max-width:480px){
.hero-band{padding:15px 22px 13px}
}

/* Top bar Konsep A (Pencarian di Tengah): the identity lockup
   gains the "Pemerintah Desa" eyebrow, a real search field
   fills the middle of the header, Masuk turns into a ghost
   button level with the now-labelled theme toggle, and the nav
   row ends in the office service cluster (live Kantor
   Buka/Tutup badge, compact hours, WhatsApp when the village
   stored a number). Every color comes from the village theme
   tokens, so the ten palettes restyle the whole bar; the one
   deliberate exception is the WhatsApp brand green, kept fixed
   like the hero badge's status colors so the button reads as
   WhatsApp under every palette. These rules ship last in the
   file, so at equal specificity they win the cascade over the
   base header rules and the PR #96 pill section above. */
.village-identity-text{display:flex;flex-direction:column;min-width:0}
.village-eyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.village-identity .village-subtitle{margin-top:1px}
.topbar-search{position:relative;display:flex;align-items:center;gap:9px;flex:1 1 auto;max-width:470px;margin-inline:auto;height:44px;padding:0 16px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--muted-strong)}
.topbar-search .icon{width:15px;height:15px}
.topbar-search input{flex:1;min-width:0;width:auto;min-height:0;border:0;background:none;padding:0;font:inherit;font-size:13.5px;color:var(--text)}
.topbar-search input::placeholder{color:var(--muted-strong);opacity:1}
.topbar-search input:focus-visible{outline:none}
.topbar-search:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.topbar-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:90;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgb(16 32 20/.18),0 2px 8px rgb(16 32 20/.08);padding:6px}
.topbar-suggest-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);font-size:13.5px;line-height:1.35}
.topbar-suggest-item:hover{text-decoration:none}
.topbar-suggest-item.is-active{background:color-mix(in srgb,var(--blue) 10%,transparent);text-decoration:none}
.topbar-suggest-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent);padding:3px 7px;border-radius:999px}
.topbar-suggest-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-suggest-empty{margin:0;padding:9px 10px;color:var(--muted-strong);font-size:13px}
.village-public .village-header-actions .topbar-theme{width:auto;flex-basis:auto;border-radius:999px;padding:0 15px;gap:8px;font-size:13.5px;font-weight:600;color:var(--text);border:1px solid color-mix(in srgb,var(--blue) 38%,transparent);background:color-mix(in srgb,var(--blue) 6%,transparent)}
.village-header-actions .topbar-theme .icon{width:15px;height:15px}
.village-public .village-header-actions .topbar-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 15px;border-radius:999px;border:1px solid color-mix(in srgb,var(--blue) 38%,transparent);background:color-mix(in srgb,var(--blue) 6%,transparent);color:var(--text);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .18s ease-out}
.village-public .village-header-actions .topbar-login:hover{border-color:var(--blue);text-decoration:none}
.village-public .village-header-actions .topbar-login .icon{width:15px;height:15px}
.topbar-search-toggle{display:none}
.topbar-searchrow{max-width:1240px;margin:auto;padding:0 36px 14px}
.topbar-search-mobile{max-width:none;margin:0}
.topbar-service{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none;padding-left:18px}
.topbar-jam{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted-strong);white-space:nowrap}
.topbar-buka{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--text);font-size:12.5px}
.topbar-dot{width:8px;height:8px;border-radius:50%;flex:none;background:light-dark(#c2503c,#e0684f)}
.topbar-buka.is-open .topbar-dot{background:light-dark(#2e9e4f,#6fce7e);animation:topbar-pulse 2.2s infinite}
@keyframes topbar-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,light-dark(#2e9e4f,#6fce7e) 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.village-public .topbar-wa{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 14px;border-radius:999px;background:light-dark(#2e7d44,#2e7d44);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.village-public .topbar-wa:hover{background:light-dark(#276b3a,#276b3a);text-decoration:none}
.topbar-wa .icon{width:17px;height:17px}
.search-form{display:flex;align-items:center;gap:9px;max-width:640px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted-strong);margin-bottom:22px}
.search-form .icon{width:16px;height:16px;flex:none}
.search-form input{flex:1;min-width:0;width:auto;min-height:0;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--text)}
.search-form input:focus-visible{outline:none}
.search-form:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.search-form .primary{flex:none;border-radius:999px}
.search-summary{color:var(--muted-strong);font-size:13px;margin-bottom:20px}
.search-group-title{font-size:19px;margin:26px 0 12px}
.search-pages{display:grid;gap:9px;max-width:640px}
.search-page-hit{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text)}
.search-page-hit:hover{border-color:var(--blue);text-decoration:none}
.search-page-hit strong{font-size:14px;font-weight:650}
.search-page-hit small{display:block;color:var(--muted-strong);font-size:12px}
.search-page-hit .icon{margin-left:auto;color:var(--muted);width:16px;height:16px;flex:none}
.village-public .village-pill .village-header-actions .topbar-login{min-height:32px;height:32px;padding:6px 12px;border-radius:999px;font-size:12px}
@media(max-width:1020px){
.village-header{flex-wrap:wrap}
.topbar-search{order:5;flex:1 1 100%;max-width:none;margin:4px 0 0}
}
@media(max-width:760px){
.village-header{flex-wrap:nowrap;padding-top:16px;padding-bottom:12px}
.village-identity{flex:1 1 auto;min-width:0}
.village-header .topbar-search{display:none}
.village-identity .village-subtitle{display:none}
.village-eyebrow{font-size:8px;letter-spacing:.18em}
.village-identity strong{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-search-toggle{display:inline-flex}
.topbar-menu{display:inline-flex}
.village-public .village-header-actions .topbar-theme{width:39px;flex-basis:39px;padding:0}
.topbar-theme .theme-label{display:none}
.village-public .village-header-actions .topbar-login{height:39px;padding:0 11px;font-size:12.5px}
.village-nav{display:none}
.village-topbar.is-menu-open .village-nav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;padding:10px 22px 15px;border-top:1px solid var(--line);border-bottom:0;font-size:14px}
.village-topbar.is-menu-open .village-nav a{padding:9px 13px;text-align:left}
.village-topbar.is-menu-open .topbar-service{margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;gap:11px}
.village-topbar.is-menu-open .topbar-wa{justify-content:center;min-height:42px}
.search-form{border-radius:18px;flex-wrap:wrap}
.search-form .primary{flex:1 1 100%}
}
@media(max-width:480px){
.topbar-searchrow{padding:0 22px 12px}
.village-public .village-header-actions .topbar-login .icon{display:none}
}
@media(prefers-reduced-motion:reduce){
.topbar-buka.is-open .topbar-dot{animation:none}
.village-public .village-header-actions .topbar-login{transition:none}
}

/* Homepage rebuild (2026-11-03): paired content cards, the
   APBDes card, the Sinergi Program strip and the rebuilt footer.
   Sizes stay at the site's normal scale — nothing here shouts. */
.home-duo{display:grid;grid-template-columns:1fr 1fr;gap:17px;padding:36px 0;border-bottom:1px solid var(--line)}
.home-solo{padding:26px 0 36px;border-bottom:1px solid var(--line)}
.home-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:19px 20px;min-width:0}
.home-card-head{display:flex;align-items:end;justify-content:space-between;gap:16px}
.home-card-head h2{font-size:17.5px}
.card-head-icon{align-items:center;justify-content:flex-start;gap:12px}
.card-icon-tile{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:var(--soft);color:var(--blue)}
.card-icon-tile .icon{width:20px;height:20px}
.card-subtitle{font-size:12.5px;color:var(--muted-strong);margin-top:2px}
.card-head-icon .beranda-year{margin-left:auto}
.home-duo .head-welcome{display:grid;grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:start}
.home-duo .head-welcome-empty{grid-template-columns:96px minmax(0,1fr)}
.home-duo .head-portrait{border-radius:14px;box-shadow:0 4px 0 var(--line)}
.home-duo .head-spot{display:grid;place-items:center;background:var(--soft);border-radius:14px;padding:10px 6px}
.home-duo .head-spot svg{width:84px;height:auto;display:block}
.home-duo .head-message{line-height:1.65}
.home-duo .head-welcome-copy h2{font-size:17.5px;margin-bottom:9px}
.home-duo .head-signature{margin:12px 0 0}

.home-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 12px}
.home-stats article{padding:0;border:0;background:transparent}
.home-stats strong{font-size:25px;font-weight:500;line-height:1.2}
.home-stats p{font-size:12.5px;color:var(--muted-strong);margin-top:4px}
.gender-block{margin:2px 0 12px}
.gender-bar{display:flex;height:22px;border-radius:99px;overflow:hidden;background:color-mix(in oklab,var(--blue) 40%,var(--sky))}
.gender-seg{display:flex;align-items:center;height:100%;width:0;overflow:hidden;container-type:inline-size}
.gender-seg.gender-male{background:var(--blue);color:var(--onblue)}
.gender-seg.gender-female{background:color-mix(in oklab,var(--blue) 40%,var(--sky));color:var(--text);justify-content:flex-end}.gender-seg.gender-unknown{background:var(--line);color:var(--text);justify-content:flex-end}
.gender-pct{font-size:11px;font-weight:700;line-height:1;letter-spacing:.01em;padding:0 10px;white-space:nowrap}
@container (max-width:76px){.gender-pct{display:none}}
.gender-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--muted-strong);margin-top:7px}
.gender-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.gender-dot.gender-male{background:var(--blue)}
.gender-dot.gender-female{background:color-mix(in oklab,var(--blue) 40%,var(--sky))}.gender-dot.gender-unknown{background:var(--line);box-shadow:inset 0 0 0 1px var(--muted)}
.insight-chips{display:flex;flex-wrap:wrap;gap:6px}
.insight-chip{font-size:12px;padding:5px 10px;border-radius:99px;background:var(--soft);color:var(--text)}
.beranda-year{font-size:12px;color:var(--muted-strong);white-space:nowrap}
.apbdes-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:16px 0 14px}
.apbdes-col{display:grid;gap:6px;align-content:start;min-width:0}
.apbdes-col-label{font-size:13.5px;font-weight:600}
.apbdes-pct{font-size:15px;font-weight:600}
.apbdes-state{color:var(--muted-strong);font-size:12.5px}
.apbdes-fig{color:var(--muted-strong);font-size:12.5px}
.apbdes-fig strong{color:var(--text);font-weight:600}
.beranda-progress{appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:2px;display:block}
.beranda-progress::-webkit-progress-bar{background:var(--soft)}
.beranda-progress::-webkit-progress-value{background:var(--blue);border-radius:99px}
.beranda-progress::-moz-progress-bar{background:var(--blue);border-radius:99px}
.apbdes-hatch{height:6px;border-radius:99px;background:repeating-linear-gradient(45deg,color-mix(in oklab,var(--blue) 26%,var(--soft)) 0 5px,var(--soft) 5px 10px)}
.apbdes-empty-note{display:flex;gap:9px;align-items:flex-start;border:1px dashed var(--line);border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--muted-strong);margin:0 0 14px}
.apbdes-empty-note .icon{flex:0 0 auto;width:16px;height:16px;color:var(--blue);margin-top:2px}
.sinergi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sinergi-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-align:center}
.sinergi-card img{height:56px;width:auto;max-width:132px;object-fit:contain}.sinergi-ext{position:absolute;top:10px;right:10px;display:grid;place-items:center;color:var(--muted);opacity:.55}.sinergi-ext .icon{width:15px;height:15px}
.sinergi-card span{font-size:12.5px;line-height:1.45}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px;animation:wa-float-in .5s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes wa-float-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wa-float-btn{position:relative;display:grid;place-items:center;width:54px;height:54px;border:0;border-radius:50%;background:#2e7d44;color:#fff;cursor:pointer;box-shadow:0 10px 24px rgb(16 32 20/.30);transition:background .25s ease,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.wa-float-btn:hover{background:#276b3a;transform:translateY(-2px) scale(1.04);box-shadow:0 14px 30px rgb(16 32 20/.32)}
.wa-float-btn:active{transform:scale(.96)}
.wa-float.is-open .wa-float-btn{background:#1f5c33}
.wa-float-btn-ic{grid-area:1/1;display:grid;place-items:center;transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.wa-float-btn-ic .icon{width:27px;height:27px}
.wa-float-btn-ic.is-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.wa-float.is-open .wa-float-btn-ic.is-wa{opacity:0;transform:rotate(90deg) scale(.6)}
.wa-float.is-open .wa-float-btn-ic.is-x{opacity:1;transform:none}
.wa-float-panel{width:min(288px,calc(100vw - 32px));background:var(--panel);border:1px solid rgb(16 32 20/.06);border-radius:22px;box-shadow:0 24px 60px rgb(16 32 20/.22),0 4px 16px rgb(16 32 20/.10);padding:14px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px) scale(.96);transform-origin:calc(100% - 27px) 100%;transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.wa-float.is-open .wa-float-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .25s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s}
.wa-float-title{margin:2px 8px 10px;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text)}
.wa-float-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wa-float-list li{opacity:0;transform:translateX(10px);transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.wa-float.is-open .wa-float-list li{opacity:1;transform:none}
.wa-float.is-open .wa-float-list li:nth-child(1){transition-delay:.05s}
.wa-float.is-open .wa-float-list li:nth-child(2){transition-delay:.09s}
.wa-float.is-open .wa-float-list li:nth-child(3){transition-delay:.13s}
.wa-float.is-open .wa-float-list li:nth-child(4){transition-delay:.17s}
.wa-float.is-open .wa-float-list li:nth-child(5){transition-delay:.21s}
.wa-float.is-open .wa-float-list li:nth-child(6){transition-delay:.25s}
.wa-float.is-open .wa-float-list li:nth-child(n+7){transition-delay:.29s}
.wa-float-row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:14px;color:var(--text);font-size:14.5px;text-decoration:none;transition:background .18s ease,transform .18s ease}
.wa-float-row:hover{background:#eef6f0;text-decoration:none}
.wa-float-row:active{transform:scale(.98)}
.wa-float-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e7f4ec;color:#2e7d44;flex:0 0 auto}
.wa-float-ic .icon{width:18px;height:18px}
.wa-float-name{min-width:0;overflow-wrap:anywhere;font-weight:600}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}.wa-float-btn,.wa-float-btn-ic,.wa-float-panel,.wa-float-list li,.wa-float-row{transition:none}.wa-float-list li{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.sinergi-card{transition:transform .18s ease,box-shadow .18s ease}.sinergi-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,35,25,.08);text-decoration:none}.sinergi-card:hover .sinergi-ext{opacity:1;color:var(--blue)}}
@media(prefers-reduced-motion:no-preference){.gender-seg{transition:width .9s ease}}

.village-footer{display:block;padding-top:10px;padding-bottom:0}
.footer-scenery{line-height:0}
.footer-scenery svg{display:block;width:100%;height:32px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.25fr;gap:24px;padding:16px 0 14px}
.footer-col{display:grid;gap:9px;align-content:start;font-size:13.5px}
.footer-col h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-strong);margin:0 0 3px;font-weight:600}
.footer-col a{color:var(--text);padding:2px 0;position:relative}
.footer-col a.footer-wa{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:6px 12px;border:1px solid var(--line);border-radius:99px}
.footer-village{font-size:14px;font-weight:600;color:var(--text)}
.footer-location{color:var(--muted-strong)}
.footer-motto{font-style:italic;color:var(--muted-strong);line-height:1.6}




.footer-address{color:var(--muted-strong);line-height:1.65;white-space:pre-line}
.footer-hours{color:var(--muted-strong)}
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 0 16px;color:var(--muted-strong);font-size:12.5px}
.visit-strip{display:flex;align-items:center;flex-wrap:wrap;gap:9px 22px;padding:11px 0 12px}
.village-footer-dark .visit-strip{border-top:1px solid var(--footer-line)}
.visit-strip-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--footer-muted,var(--muted-strong))}
.visit-groups{display:flex;flex-wrap:wrap;gap:8px 18px}
.visit-group{display:inline-flex;align-items:center;gap:8px}
.visit-group-name{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--footer-muted,var(--muted-strong))}
.flip-tiles{display:inline-flex;align-items:center;gap:2px;perspective:260px}
.flip-tile{display:inline-grid;place-items:center;min-width:19px;height:28px;padding:0 2px;border-radius:4px;background:color-mix(in oklab,var(--footer-text,var(--text)) 15%,var(--footer-bg,var(--panel)));color:var(--footer-text,var(--text));font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;position:relative;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--footer-text,var(--text)) 12%,transparent)}
.flip-tile::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:color-mix(in oklab,var(--footer-bg,var(--panel)) 55%,transparent)}
.flip-dot{font-size:14px;font-weight:700;color:var(--footer-muted,var(--muted-strong))}
.visit-strip-greeting{margin-left:auto;font-size:12.5px;color:var(--footer-muted,var(--muted-strong))}
@keyframes flip-in{0%{transform:rotateX(85deg);opacity:.15}55%{transform:rotateX(-16deg);opacity:1}100%{transform:rotateX(0deg);opacity:1}}
.visit-strip.flip-play .flip-tile{animation:flip-in .45s cubic-bezier(.25,.7,.3,1.15) both;animation-delay:calc(var(--i)*40ms)}
@media (prefers-reduced-motion:reduce){.visit-strip .flip-tile{animation:none}}
@media(max-width:600px){.visit-strip-greeting{margin-left:0}}
.footer-bar a{color:inherit}
.village-footer-dark .footer-inner{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:36px;padding-right:36px}
@media(max-width:760px){.village-footer-dark .footer-inner{padding-left:22px;padding-right:22px}}
@media(hover:hover) and (pointer:fine){.footer-col a{transition:color .18s ease,transform .18s ease}.footer-col a:not(.footer-wa)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}.footer-col a:hover{color:var(--blue);transform:translateX(2px);text-decoration:none}.footer-col a:not(.footer-wa):hover::after{transform:scaleX(1)}.footer-col a.footer-wa{transition:color .18s ease,transform .18s ease,box-shadow .18s ease}.footer-col a.footer-wa:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,35,25,.12)}.footer-bar a{transition:color .18s ease}.footer-bar a:hover{color:var(--blue)}}
.village-footer-dark{--footer-bg:light-dark(color-mix(in oklab,var(--blue) 66%,#000),color-mix(in oklab,color-mix(in oklab,var(--bg) 50%,#000) 90%,var(--blue)));--footer-text:light-dark(var(--onblue),var(--text));--footer-muted:color-mix(in oklab,var(--footer-text) 68%,var(--footer-bg));--footer-line:color-mix(in oklab,var(--footer-text) 22%,var(--footer-bg));--footer-hill:color-mix(in oklab,var(--footer-text) 13%,var(--footer-bg));--footer-hover:light-dark(var(--sky),var(--blue));background:var(--footer-bg);color:var(--footer-text);border-top-color:var(--footer-line);max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.village-footer-dark .footer-scenery path:nth-of-type(1){fill:var(--footer-hill)}
.village-footer-dark .footer-scenery path:nth-of-type(2){fill:var(--footer-bg)}

.village-footer-dark .footer-col h3{color:var(--footer-muted)}
.village-footer-dark .footer-col a{color:var(--footer-text)}
.village-footer-dark .footer-col a.footer-wa{border-color:var(--footer-line)}
.village-footer-dark .footer-village{color:var(--footer-text)}
.village-footer-dark .footer-location{color:var(--footer-muted)}
.village-footer-dark .footer-motto{color:var(--footer-muted)}


.village-footer-dark .footer-address{color:var(--footer-muted)}
.village-footer-dark .footer-hours{color:var(--footer-muted)}
.village-footer-dark .footer-bar{border-top-color:var(--footer-line);color:var(--footer-muted)}
@media(hover:hover) and (pointer:fine){.village-footer-dark .footer-col a:hover{color:var(--footer-hover)}.village-footer-dark .footer-col a.footer-wa:hover{box-shadow:0 4px 12px rgba(0,0,0,.35)}.village-footer-dark .footer-bar a:hover{color:var(--footer-hover)}}
.village-footer-dark .footer-identity .social-links{margin-top:14px;gap:8px}
.village-footer-dark .footer-identity .social-links a{width:38px;height:38px;min-height:38px;flex:0 0 38px;border:1px solid var(--footer-line);color:var(--footer-text)}
.village-footer-dark .footer-identity .social-links a .icon{width:18px;height:18px}
.village-footer-dark .footer-identity .social-links a:focus-visible{outline-color:var(--footer-hover)}
@media(hover:hover) and (pointer:fine){.village-footer-dark .footer-identity .social-links a:hover{background:color-mix(in oklab,var(--footer-text) 10%,transparent);color:var(--footer-hover);border-color:var(--footer-hover);transform:translateY(-1px)}}
@media(prefers-reduced-motion:no-preference){.village-footer-dark .footer-identity .social-links a{transition:transform .18s ease,color .18s ease,border-color .18s ease,background-color .18s ease}}
@media(max-width:900px){.home-duo{grid-template-columns:1fr}.footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.home-duo .head-welcome{grid-template-columns:minmax(0,1fr)}.home-duo .head-portrait{width:120px}.home-stats{gap:8px}.home-stats strong{font-size:20px}.apbdes-cols{grid-template-columns:1fr;gap:16px}.sinergi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-cols{grid-template-columns:1fr}.footer-bar{flex-direction:column;align-items:flex-start;gap:8px}}
@media(max-width:600px){.news-featured-cover{aspect-ratio:16/8}.news-featured-copy{padding:18px}.news-featured-copy h3{font-size:20px}.home-duo .head-welcome-empty{grid-template-columns:72px minmax(0,1fr);gap:14px}.home-duo .head-spot{padding:6px 4px}.home-duo .head-spot svg{width:52px}}

@media(min-width:1600px){.village-header,.village-nav,.village-public main,.village-footer,.topbar-searchrow,.village-footer-dark .footer-inner{max-width:1352px}.village-footer-dark{max-width:none}}

/* Profil Desa page (Konsep A revamp): a photo hero band (or the
   theme-gradient + scenery fallback when the village has no
   uploaded photo — never a broken image), a two-column body with
   a sticky side rail (location + contact cards), a stat band and
   a perangkat strip. Every text comes from admin-editable data;
   the section toggles live in the theme payload's profil object
   (Tampilan Profil in admin). */
.profil-hero{position:relative;display:flex;border-radius:24px;overflow:hidden;isolation:isolate;min-height:300px;margin:28px 0 0;background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 52%,#16281b),color-mix(in srgb,var(--blue) 30%,#0e1d13) 72%);color:#f2f6e6}
.profil-hero.has-photo{background:var(--sky)}
.profil-hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.profil-hero-scenery{position:absolute;left:0;right:0;bottom:0;z-index:-1;height:120px;pointer-events:none}
.profil-hero-scenery svg{display:block;width:100%;height:100%}
.profil-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(9,24,15,.86),rgba(9,24,15,.42) 52%,rgba(9,24,15,.18))}
.profil-hero:not(.has-photo) .profil-hero-shade{background:linear-gradient(100deg,rgba(8,18,11,.5),rgba(8,18,11,.22) 58%,rgba(8,18,11,.12))}
.profil-hero-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;max-width:1060px;padding:22px 34px 26px}
.profil-hero-inner .profil-crumb{padding-top:0;margin-bottom:auto;color:#cfdcbc}
.profil-hero-inner .profil-crumb a{color:#cfdcbc}
.profil-kicker{color:#d9e4c3;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin:26px 0 0}
.profil-kicker-plain{color:var(--muted-strong);margin:0 0 4px}
.profil-hero h1{color:#fff;font-size:clamp(30px,4vw,38px);line-height:1.15;margin:8px 0 6px}
.profil-location-line{display:flex;align-items:center;gap:7px;color:#e6ecd7;font-size:13.5px}
.profil-location-line .icon{width:15px;height:15px;flex-shrink:0}
.profil-motto-chip{align-self:flex-start;margin-top:13px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);font-size:12.5px;color:#f2f6e6}
.profil-plain-head{padding-bottom:2px}
.profil-plain-head .public-breadcrumb{padding-top:28px}
.profil-plain-head h1{margin:10px 0 0}
.profil-body{padding:24px 0 55px;min-height:40vh}
.profil-cols.has-rail{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:20px;align-items:start}
.profil-main{display:grid;gap:20px;min-width:0}
.profil-rail{display:grid;gap:20px;position:sticky;top:14px;min-width:0}
.profil-tentang .public-prose{font-size:15px;line-height:1.85}
.profil-tentang .public-prose p:first-of-type{font-size:17.5px;line-height:1.8}
.profil-tentang .public-prose p+p,.profil-prose p+p{margin-top:14px}
.profil-prose{font-size:15px;line-height:1.85}
.profil-who{display:flex;align-items:center;gap:13px;margin:16px 0}
.profil-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);color:var(--onblue);font-size:15px;font-weight:700;flex-shrink:0}
.profil-who-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
.profil-who-copy strong{display:block;font-size:15.5px;font-weight:650}
.profil-who-copy span{display:block;font-size:12.5px;color:var(--muted-strong);margin-top:1px}
.profil-rail .location-card{max-width:none;margin-top:0}
.profil-lokasi .location-sub{font-size:12.5px;color:var(--muted-strong);margin:-9px 0 17px}
.profil-lokasi .primary{width:100%;justify-content:center}
.profil-kontak-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:13px}
.profil-kontak-list li{min-width:0}
.profil-kontak-tile{width:38px;height:38px;border-radius:11px;flex-shrink:0}
.profil-kontak-tile .icon{width:20px;height:20px}
.profil-kontak-copy{display:block;flex:1 1 auto;min-width:0}
.profil-kontak-copy small{display:block;font-size:11px;color:var(--muted-strong)}
.profil-kontak-copy strong{display:block;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.profil-kontak-link{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:12px}
.profil-kontak-link:hover .profil-kontak-copy strong{color:var(--blue)}
.profil-kontak-chevron{margin-left:auto;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.profil-kontak-chevron .icon{width:16px;height:16px}
.profil-kontak-combo{display:flex;align-items:flex-start;gap:12px}
.profil-kontak-main{flex:1 1 auto;min-width:0}
.profil-kontak-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.kontak-pill{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-size:13px;font-weight:650;text-decoration:none}
.kontak-pill-chat{background:var(--blue);border-color:var(--blue);color:var(--onblue)}
.profil-stats{margin-top:20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.profil-stats-grid{flex:1 1 480px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.profil-stat strong{display:block;font-size:24px;font-weight:650;line-height:1.25}
.profil-stat small{display:block;font-size:12px;color:var(--muted-strong);margin-top:2px}
.profil-stats-link{flex-shrink:0}
.profil-perangkat{margin-top:28px}
.profil-perangkat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.profil-perangkat-head h2{margin:0}
.profil-perangkat-sub{font-size:13px;color:var(--muted-strong);margin-top:4px}
.profil-orang-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.profil-orang{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:18px;display:grid;justify-items:start;min-width:0}
.profil-orang-photo{width:52px;height:52px;border-radius:50%;object-fit:cover}
.profil-avatar-lg{width:52px;height:52px;font-size:17px}
.profil-orang:nth-child(4n+2) .profil-avatar{background:color-mix(in srgb,var(--blue) 62%,#b07d4f)}
.profil-orang:nth-child(4n+3) .profil-avatar{background:color-mix(in srgb,var(--blue) 55%,#5b7fa6)}
.profil-orang:nth-child(4n+4) .profil-avatar{background:color-mix(in srgb,var(--blue) 68%,#7a6a9e)}
.profil-orang strong{font-size:14px;font-weight:600;margin-top:10px;overflow-wrap:anywhere}
.profil-orang small{font-size:12px;color:var(--muted-strong);margin-top:2px;overflow-wrap:anywhere}
@media(max-width:900px){.profil-cols.has-rail{grid-template-columns:1fr}.profil-rail{position:static}}
@media(max-width:600px){.profil-hero{min-height:260px;margin-top:20px}.profil-hero-inner{padding:18px 20px 20px}.profil-stats{flex-direction:column;align-items:stretch}.profil-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));flex-basis:auto}.profil-orang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profil-perangkat-head .secondary{width:100%;justify-content:center}}

/* Cross-document page transitions (public site): the browser
   animates between documents natively (no JS router); only the
   main content region crossfades with a slight upward settle,
   while the header, top bar and footer snapshots stay still so
   the chrome reads as one stable frame. Everything is inside
   the no-preference media query, and the reduced-motion kill
   below covers the content region as well as the root (the
   opt-in at the top of this file already killed the root). */
@media(prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
.village-public main{view-transition-name:page-content}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(page-content){animation:page-content-out .18s ease both}
::view-transition-new(page-content){animation:page-content-in .28s ease both}
@keyframes page-content-out{to{opacity:0}}
@keyframes page-content-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
::view-transition-old(page-content),::view-transition-new(page-content){animation:none!important}
}

/* Strip Portal Warga di beranda (pola contoh Bos 6 Nov 2026, tema situs):
   panel ajakan + tiga langkah, memakai variabel tema agar menyesuaikan
   warna desa dan mode gelap. */
.home-portal{display:grid;grid-template-columns:minmax(270px,38%) 1fr;padding:0;overflow:hidden}
.home-portal-main{position:relative;background:linear-gradient(150deg,var(--soft),transparent 130%);padding:28px 28px 30px;overflow:hidden}
.home-portal-main::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--soft);opacity:.55;top:-110px;right:-80px;pointer-events:none}
.home-portal-pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:.8rem;color:var(--ink)}
.home-portal-pill strong{font-weight:700}
.home-portal-dot{width:8px;height:8px;border-radius:50%;background:#43a85e;flex:none}
.home-portal-pill.is-closed .home-portal-dot{background:#c0564b}
.home-portal-main h2{position:relative;z-index:1;font-size:1.65rem;line-height:1.2;margin:16px 0 8px;color:var(--ink)}
.home-portal-sub{position:relative;z-index:1;color:var(--muted);font-size:.9rem;line-height:1.55;margin:0 0 20px}
.home-portal-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:99px;text-decoration:none;box-shadow:0 10px 22px rgba(24,44,30,.25)}
.home-portal-btn .icon{width:17px;height:17px}
.home-portal-side{padding:28px 30px 24px;display:flex;flex-direction:column}
.home-portal-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;position:relative}
.home-portal-steps::before{content:"";position:absolute;top:22px;left:13%;right:13%;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.home-portal-steps li{position:relative;display:block}
.home-portal-num{width:44px;height:44px;border-radius:50%;background:var(--soft);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:var(--blue)}
.home-portal-steps h3{display:flex;align-items:center;gap:8px;font-size:1.02rem;margin:13px 0 5px;color:var(--ink)}
.home-portal-steps h3 .icon{width:17px;height:17px;color:var(--blue)}
.home-portal-steps p{font-size:.86rem;line-height:1.55;color:var(--muted);margin:0}
.home-portal-micro{font-size:.8rem;color:var(--muted);margin:auto 0 0;padding-top:20px}
@media (max-width:760px){
.home-portal{grid-template-columns:1fr}
.home-portal-main{padding:24px 22px}
.home-portal-side{padding:22px 22px 20px}
.home-portal-steps{grid-template-columns:1fr;gap:6px}
.home-portal-steps::before{display:none}
.home-portal-steps li{display:flex;gap:14px;padding:8px 0}
.home-portal-num{flex:none}
.home-portal-steps h3{margin:2px 0 4px}
}
/* Lompatan jangkar tidak mendarat di bawah navigasi melayang. */
.village-public [id]{scroll-margin-top:88px}

/* Rapi HP (audit 390px, 8 Nov 2026): perbaikan tampilan lebar HP
   untuk cangkang publik. Blok ini sengaja di akhir berkas agar
   menang pada kekhususan yang setara.
   F4/F2: pil info hero mengalir sebagai teks biasa di layar kecil
   (bukan kolom flex yang sesak) sehingga sapaan, tanggal, dan jam
   membungkus wajar dan spasi sebelum "WIB" tidak hilang. */
@media(max-width:760px){
.village-hero-photo .hero-top .hero-live{display:inline-block;line-height:1.55;border-radius:18px;padding:9px 14px;text-align:left}
.hero-live [data-hero-clock]{white-space:nowrap}
}
@media(max-width:480px){
/* F1: bilah atas — tombol klaster kanan diperkecil agar teks
   identitas mendapat ruang; nama desa memanjang penuh atau
   terpotong rapi dengan elipsis, tidak lagi bertabrakan. */
.village-header-actions{gap:4px}
.village-header-actions .icon-button{width:34px;height:34px;min-height:34px;flex:0 0 34px}
.village-public .village-header-actions .topbar-theme{width:34px;flex:0 0 34px;padding:0;justify-content:center}
.village-public .village-header-actions .topbar-login{height:34px;min-height:34px;padding:0 11px;gap:6px}
.village-identity{min-width:0}
.village-identity-text{min-width:0}
.village-identity strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.village-eyebrow{letter-spacing:.14em}
/* F5: ticker kabar — titik navigasi diperkecil dan label
   dirapikan agar judul berita mendapat ruang lebih. */
.hero-headlines{gap:8px}
.hero-headlines-label{font-size:10px;letter-spacing:.05em}
.hero-dot{width:18px;height:18px}
.hero-dot::before{inset:6px}
/* F6: kartu perangkat — baris staf rata kiri seperti grid;
   kartu pimpinan tetap di tengah sebagai titik fokus, lebih
   lebar dari sebelumnya. */
.team-directory .public-officials{justify-content:flex-start}
.team-directory .organization-pimpinan .public-officials{justify-content:center}
.organization-pimpinan>.public-officials>.official-post{width:min(272px,100%)}
}