/*
Theme Name: Banyubulu Desa Digital
Theme URI: https://banyubulu.id
Author: Pemerintah Desa Banyubulu
Description: Theme publik Desa Banyubulu untuk WordPress + Elementor dengan integrasi API statistik agregat.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.2
Text Domain: banyubulu-desa-digital
*/

:root {
    --desa-green:#155a3a;
    --desa-green-dark:#0d3b28;
    --desa-gold:#c99a2e;
    --desa-ink:#17211b;
    --desa-muted:#66756d;
    --desa-line:#dfe7e2;
    --desa-bg:#f5f8f6;
    --desa-white:#fff;
}

* { box-sizing:border-box; }
html, body { background:var(--desa-green-dark) !important; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--desa-ink); line-height:1.6; }
main, .site-main, .wp-site-blocks { background:var(--desa-green-dark) !important; margin-bottom:0 !important; padding-bottom:0 !important; }
a { color:inherit; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--desa-line); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(8,38,25,.06); }
.topbar { background:var(--desa-green-dark); color:#dcece4; font-size:13px; }
.topbar__inner { width:min(1180px, calc(100% - 32px)); margin:0 auto; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar__links { display:flex; align-items:center; gap:18px; }
.topbar a { color:white; text-decoration:none; }
.site-header__inner { width:min(1180px, calc(100% - 32px)); margin:0 auto; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--desa-green-dark); min-width:max-content; }
.brand-mark { width:48px; height:48px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(145deg,var(--desa-green),var(--desa-green-dark)); color:white; font-weight:900; box-shadow:0 10px 24px rgba(16,90,58,.2); }
.brand-logo { width:64px; height:64px; display:grid; place-items:center; flex:0 0 64px; }
.brand-logo .custom-logo-link { display:grid; place-items:center; width:64px; height:64px; }
.brand-logo .custom-logo, .brand-logo__fallback { width:64px; height:64px; object-fit:contain; display:block; }
.brand-text { display:grid; line-height:1.15; }
.brand-text strong { font-size:19px; letter-spacing:0; }
.brand-text small { color:var(--desa-muted); font-weight:700; }
.nav-panel { display:flex; align-items:center; gap:18px; min-width:0; }
.main-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px; font-size:14px; color:#304139; }
.main-nav a { display:inline-flex; align-items:center; min-height:42px; padding:0 10px; border-radius:8px; text-decoration:none; font-weight:750; }
.main-nav a:hover, .main-nav .current-menu-item > a { background:#eef6f2; color:var(--desa-green); }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.main-nav li { position:relative; }
.main-nav li ul { display:none; position:absolute; top:100%; left:0; min-width:210px; padding:8px; background:white; border:1px solid var(--desa-line); border-radius:8px; box-shadow:0 18px 40px rgba(12,45,31,.14); }
.main-nav li:hover > ul { display:grid; }
.main-nav li ul a { width:100%; justify-content:flex-start; }
.header-cta { min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:8px; background:var(--desa-green); color:white; text-decoration:none; font-weight:850; white-space:nowrap; }
.header-cta:hover { background:var(--desa-green-dark); }
.nav-toggle { display:none; grid-template-columns:18px auto; grid-template-rows:repeat(3, 2px); align-content:center; align-items:center; column-gap:9px; row-gap:4px; min-height:42px; border:1px solid var(--desa-line); border-radius:8px; background:white; color:var(--desa-green-dark); padding:0 12px; font-weight:800; cursor:pointer; }
.nav-toggle span { display:block; grid-column:1; width:18px; height:2px; background:var(--desa-green-dark); }
.nav-toggle em { grid-column:2; grid-row:1 / 4; font-style:normal; line-height:1; }
.hero { min-height:640px; display:grid; align-items:end; background:linear-gradient(rgba(10,37,26,.35),rgba(10,37,26,.72)), url("assets/kantor-desa-placeholder.png"); background-size:cover; background-position:center; color:white; }
.hero__inner { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:90px 0 74px; }
.eyebrow { color:var(--desa-gold); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.hero h1 { max-width:820px; margin:12px 0 18px; font-size:clamp(42px, 6vw, 78px); line-height:1.02; letter-spacing:0; }
.hero p { max-width:680px; margin:0 0 28px; font-size:19px; color:#eef7f1; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border-radius:8px; text-decoration:none; font-weight:800; background:var(--desa-gold); color:#1c1605; }
.button.secondary { background:white; color:var(--desa-green-dark); }
.section { background:var(--desa-white); padding:72px 0; }
.section.alt { background:var(--desa-bg); }
.container { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-title h2 { margin:0; font-size:34px; line-height:1.15; letter-spacing:0; }
.section-title p { max-width:620px; margin:0; color:var(--desa-muted); }
.desa-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.desa-stat-card { background:white; border:1px solid var(--desa-line); border-radius:8px; padding:20px; }
.desa-stat-card span { display:block; color:var(--desa-muted); font-size:14px; }
.desa-stat-card strong { display:block; margin-top:8px; font-size:32px; color:var(--desa-green-dark); line-height:1; }
.desa-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px; }
.desa-item { border:1px solid var(--desa-line); border-radius:8px; padding:18px; background:white; }
.desa-item h3 { margin:0 0 8px; font-size:20px; line-height:1.25; }
.desa-item h3 a { text-decoration:none; color:inherit; }
.desa-item h3 a:hover { color:var(--desa-green); }
.desa-item p { margin:0; color:var(--desa-muted); }
.desa-item__source { display:inline-flex; margin-bottom:10px; padding:4px 8px; border-radius:8px; background:#eef6f2; color:var(--desa-green-dark); font-size:12px; font-weight:900; }
.footer { background:var(--desa-green-dark) !important; color:#eaf5ef; margin-top:0 !important; margin-block-start:0 !important; padding:36px 0; }
.footer a { color:#fff; }

.hero-slider { position:relative; min-height:680px; overflow:hidden; background:#082318; color:white; }
.hero-slide { position:absolute; inset:0; opacity:0; display:grid; align-items:end; background-size:cover; background-position:center; transition:opacity .7s ease; }
.hero-slide.active { opacity:1; z-index:1; }
.hero-slider .hero__inner { position:relative; z-index:2; padding:108px 0 96px; }
.hero-slider h1 { max-width:860px; margin:12px 0 18px; font-size:clamp(42px, 6vw, 78px); line-height:1.02; letter-spacing:0; }
.hero-slider p { max-width:720px; margin:0 0 28px; font-size:19px; color:#eef7f1; }
.hero-dots { position:absolute; z-index:4; left:50%; bottom:34px; transform:translateX(-50%); display:flex; gap:10px; }
.hero-dots button { width:34px; height:5px; border:0; border-radius:999px; background:rgba(255,255,255,.46); cursor:pointer; }
.hero-dots button.active { background:var(--desa-gold); }
.quick-access { position:relative; z-index:5; margin-top:-34px; background:var(--desa-white); }
.quick-access__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); background:white; border:1px solid var(--desa-line); border-radius:8px; box-shadow:0 18px 50px rgba(16,52,35,.14); overflow:hidden; }
.quick-access a { min-height:68px; display:flex; align-items:center; justify-content:center; padding:12px 16px; text-align:center; text-decoration:none; font-weight:800; color:var(--desa-green-dark); border-right:1px solid var(--desa-line); }
.quick-access a:last-child { border-right:0; }
.quick-access a:hover { background:#f2f8f5; color:var(--desa-green); }
.welcome-grid { display:grid; grid-template-columns:minmax(240px, 360px) 1fr; gap:44px; align-items:center; }
.welcome-photo { min-height:420px; border-radius:8px; background:linear-gradient(150deg,#ecf5ef,#fff 55%,#f7efd9); border:1px solid var(--desa-line); display:grid; place-items:center; position:relative; overflow:hidden; }
.welcome-photo::before { content:""; position:absolute; inset:auto -20% -28% -20%; height:56%; background:var(--desa-green); transform:skewY(-6deg); }
.welcome-photo__img { position:relative; z-index:2; width:min(82%, 300px); aspect-ratio:4/5; object-fit:cover; border-radius:8px; box-shadow:0 22px 50px rgba(9,38,27,.24); background:white; }
.welcome-copy h2 { margin:10px 0 16px; font-size:42px; line-height:1.12; letter-spacing:0; }
.welcome-copy p { color:var(--desa-muted); margin:0 0 14px; font-size:17px; }
.welcome-copy strong { display:block; margin-top:18px; color:var(--desa-green-dark); font-size:18px; }
.welcome-copy span { display:block; color:var(--desa-muted); }
.official-card__avatar.large { position:relative; z-index:2; width:168px; height:168px; font-size:54px; box-shadow:0 22px 50px rgba(9,38,27,.2); }
.section-title.stacked { display:block; }
.section-title.stacked h2 { margin-bottom:8px; }
.split-section { display:grid; grid-template-columns:1.25fr .85fr; gap:24px; align-items:start; }
.news-band { background:linear-gradient(180deg,#fff,#f8faf9); }
.desa-carousel, .gallery-slider { position:relative; }
.desa-carousel__track, .gallery-slider__track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; scrollbar-width:thin; }
.official-card { flex:0 0 280px; min-height:360px; scroll-snap-align:start; border:1px solid var(--desa-line); border-radius:8px; background:white; padding:18px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 12px 30px rgba(20,55,39,.08); }
.official-card__photo { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; background:#edf4f0; }
.official-card__avatar { width:100%; aspect-ratio:4/5; border-radius:8px; display:grid; place-items:center; background:linear-gradient(145deg,var(--desa-green),#2f7b55); color:white; font-size:46px; font-weight:900; }
.official-card h3 { margin:16px 0 4px; font-size:21px; line-height:1.2; }
.official-card p { margin:0; color:var(--desa-muted); }
.carousel-controls { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.carousel-controls button { width:42px; height:42px; border:1px solid var(--desa-line); border-radius:8px; background:white; color:var(--desa-green-dark); font-size:28px; line-height:1; cursor:pointer; }
.carousel-controls button:hover { background:var(--desa-green); color:white; }
.gallery-slide { flex:0 0 min(560px, 86vw); margin:0; position:relative; border-radius:8px; overflow:hidden; scroll-snap-align:start; background:#0d2519; min-height:330px; }
.gallery-slide img { width:100%; height:100%; min-height:330px; object-fit:cover; display:block; }
.gallery-slide figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px; color:white; background:linear-gradient(transparent,rgba(5,22,15,.86)); }
.gallery-slide figcaption strong { display:block; font-size:22px; margin-bottom:4px; }
.gallery-slide figcaption span { color:#dce9e2; }
.contact-band { background:var(--desa-green-dark); color:white; margin-bottom:-32px; padding:64px 0 96px; position:relative; z-index:1; }
.contact-band::after { content:""; position:absolute; left:0; right:0; bottom:-96px; height:128px; background:var(--desa-green-dark); pointer-events:none; z-index:0; }
.contact-band__inner { position:relative; z-index:1; }
.contact-band + .footer, main + .footer, .wp-site-blocks > .footer { margin-top:0 !important; }
.footer { position:relative; z-index:2; }
.contact-band__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.contact-band h2 { margin:8px 0 8px; font-size:38px; line-height:1.1; }
.contact-band p { margin:0; color:#d5e7dc; }
.contact-band .button { background:var(--desa-gold); color:#1c1605; }
.apbdes-board { border:1px solid var(--desa-line); border-radius:8px; background:white; overflow:hidden; box-shadow:0 18px 50px rgba(16,52,35,.08); }
.apbdes-board__head { padding:26px; background:linear-gradient(135deg,var(--desa-green-dark),var(--desa-green)); color:white; }
.apbdes-board__head span { color:var(--desa-gold); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.apbdes-board__head h3 { margin:6px 0 8px; font-size:32px; line-height:1.1; }
.apbdes-board__head p { max-width:760px; margin:0; color:#e4f2eb; }
.apbdes-summary { display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--desa-line); background:#f8fbf9; }
.apbdes-summary div { padding:18px; border-right:1px solid var(--desa-line); }
.apbdes-summary div:last-child { border-right:0; }
.apbdes-summary span { display:block; color:var(--desa-muted); font-size:13px; }
.apbdes-summary strong { display:block; margin-top:6px; color:var(--desa-green-dark); font-size:20px; line-height:1.1; }
.apbdes-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.apbdes-column { padding:22px; border-right:1px solid var(--desa-line); }
.apbdes-column:last-child { border-right:0; }
.apbdes-column h4 { margin:0 0 14px; font-size:21px; color:var(--desa-green-dark); }
.apbdes-column ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.apbdes-column li { display:flex; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px dashed var(--desa-line); }
.apbdes-column li span { color:#2d3b34; }
.apbdes-column li strong { white-space:nowrap; color:var(--desa-ink); }
.apbdes-total { margin-top:18px; padding:14px; border-radius:8px; background:#eef6f2; display:flex; justify-content:space-between; gap:14px; font-weight:900; color:var(--desa-green-dark); }
.apbdes-note { margin:0; padding:18px 22px; background:#fff9ea; color:#6d5720; font-size:14px; }
.org-board { border:1px solid var(--desa-line); border-radius:8px; background:white; overflow:hidden; box-shadow:0 18px 50px rgba(16,52,35,.08); }
.org-board__head { padding:26px; background:#f8fbf9; border-bottom:1px solid var(--desa-line); }
.org-board__head span { color:var(--desa-green); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.org-board__head h3 { margin:6px 0 8px; font-size:32px; line-height:1.1; color:var(--desa-green-dark); }
.org-board__head p { max-width:780px; margin:0; color:var(--desa-muted); }
.org-layout { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.org-column { padding:24px; border-right:1px solid var(--desa-line); }
.org-column:last-child { border-right:0; }
.org-column > h3 { margin:0 0 18px; font-size:24px; color:var(--desa-green-dark); }
.org-group { padding:16px 0; border-top:1px solid var(--desa-line); }
.org-group h4 { margin:0 0 12px; font-size:17px; color:#263a30; }
.org-group p { margin:0; color:var(--desa-muted); }
.org-people { display:grid; gap:10px; }
.org-person { display:flex; align-items:center; gap:12px; min-height:82px; padding:12px; border:1px solid var(--desa-line); border-radius:8px; background:#fbfdfc; }
.org-person img, .org-person__avatar { flex:0 0 58px; width:58px; height:58px; border-radius:8px; object-fit:cover; }
.org-person__avatar { display:grid; place-items:center; background:linear-gradient(145deg,var(--desa-green),#2f7b55); color:white; font-weight:900; }
.org-person strong { display:block; line-height:1.2; color:var(--desa-green-dark); }
.org-person span { display:block; margin-top:3px; color:var(--desa-muted); font-size:14px; }
.service-panel { border:1px solid var(--desa-line); border-radius:8px; background:white; overflow:hidden; box-shadow:0 18px 50px rgba(16,52,35,.08); }
.service-panel__head { padding:26px; background:#f8fbf9; border-bottom:1px solid var(--desa-line); }
.service-panel__head span { color:var(--desa-green); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.service-panel__head h3 { margin:6px 0 8px; font-size:32px; line-height:1.1; color:var(--desa-green-dark); }
.service-panel__head p { max-width:780px; margin:0; color:var(--desa-muted); }
.service-layout { display:grid; grid-template-columns:1.35fr .8fr; gap:0; }
.service-form { padding:24px; display:grid; gap:16px; border-right:1px solid var(--desa-line); }
.service-form--status { border-right:0; background:#fbfdfc; align-content:start; }
.service-form h4 { margin:0; font-size:22px; color:var(--desa-green-dark); }
.service-form label { display:grid; gap:7px; color:#263a30; font-weight:800; }
.service-form input, .service-form select, .service-form textarea { width:100%; min-height:46px; border:1px solid var(--desa-line); border-radius:8px; padding:10px 12px; font:inherit; color:var(--desa-ink); background:white; }
.service-form textarea { resize:vertical; min-height:112px; }
.service-requirements { padding:14px; border-radius:8px; background:#eef6f2; color:#345246; }
.service-message { min-height:24px; color:var(--desa-muted); font-weight:750; }
.service-message.success { color:#14633d; }
.service-message.error { color:#a33b2f; }
.service-form button:disabled { opacity:.65; cursor:wait; }
.single-post-card { max-width:860px; margin:0 auto; border:1px solid var(--desa-line); border-radius:8px; background:white; padding:28px; box-shadow:0 18px 50px rgba(16,52,35,.08); }
.single-post-card__meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; color:var(--desa-muted); font-size:14px; font-weight:800; }
.single-post-card h1 { margin:0 0 18px; font-size:clamp(32px, 5vw, 52px); line-height:1.08; color:var(--desa-green-dark); }
.single-post-card__cover { margin:0 0 22px; border-radius:8px; overflow:hidden; background:#eef6f2; }
.single-post-card__cover img { width:100%; height:auto; display:block; }
.single-post-card__content { color:#24352d; font-size:17px; }
.single-post-card__content p { margin:0 0 16px; }
.share-box { margin-top:30px; padding-top:22px; border-top:1px solid var(--desa-line); }
.share-box > span { display:block; margin-bottom:12px; color:var(--desa-green-dark); font-weight:900; }
.share-box__buttons { display:flex; flex-wrap:wrap; gap:10px; }
.share-box__buttons a, .share-box__buttons button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--desa-line); border-radius:8px; background:#f8fbf9; color:var(--desa-green-dark); font:inherit; font-weight:850; text-decoration:none; cursor:pointer; }
.share-box__buttons a:hover, .share-box__buttons button:hover { background:var(--desa-green); color:white; }
.share-box small { display:block; min-height:20px; margin-top:10px; color:#14633d; font-weight:800; }
@media (max-width: 780px) {
    .topbar { display:none; }
    .site-header__inner { min-height:68px; padding:10px 0; }
    .brand-mark { width:42px; height:42px; }
    .brand-logo, .brand-logo .custom-logo-link, .brand-logo .custom-logo, .brand-logo__fallback { width:48px; height:48px; }
    .brand-logo { flex-basis:48px; }
    .brand-text strong { font-size:17px; }
    .nav-toggle { display:inline-grid; }
    .nav-panel { display:none; position:absolute; left:16px; right:16px; top:68px; padding:12px; background:white; border:1px solid var(--desa-line); border-radius:8px; box-shadow:0 18px 45px rgba(14,44,31,.16); }
    .nav-panel.open { display:grid; }
    .main-nav, .main-nav ul { display:grid; width:100%; gap:4px; justify-content:stretch; }
    .main-nav a { justify-content:flex-start; min-height:44px; }
    .main-nav li ul { position:static; display:grid; box-shadow:none; border:0; padding:0 0 0 12px; }
    .header-cta { width:100%; margin-top:8px; }
    .hero { min-height:560px; }
    .hero-slider { min-height:620px; }
    .hero-slider .hero__inner { padding:92px 0 92px; }
    .quick-access { margin-top:0; }
    .quick-access__grid { grid-template-columns:1fr; box-shadow:none; border-radius:0; width:100%; }
    .quick-access a { border-right:0; border-bottom:1px solid var(--desa-line); justify-content:flex-start; }
    .welcome-grid, .split-section { grid-template-columns:1fr; }
    .welcome-photo { min-height:300px; }
    .welcome-copy h2, .contact-band h2 { font-size:30px; }
    .official-card { flex-basis:240px; min-height:330px; }
    .contact-band__inner { display:block; }
    .contact-band .button { margin-top:18px; }
    .apbdes-summary, .apbdes-columns, .org-layout, .service-layout { grid-template-columns:1fr; }
    .apbdes-summary div, .apbdes-column, .org-column, .service-form { border-right:0; border-bottom:1px solid var(--desa-line); }
    .apbdes-summary strong { font-size:19px; }
    .section { padding:52px 0; }
    .section-title { display:block; }
    .section-title h2 { margin-bottom:12px; font-size:29px; }
    .single-post-card { padding:20px; }
}