*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#12244a;background:#fff;line-height:1.6}.container{width:min(1150px,92%);margin:auto}.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e8edf5}.nav{display:flex;align-items:center;justify-content:space-between;min-height:82px}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:#132d61}.brand img{width:58px;height:58px;object-fit:contain}.brand strong{display:block;font-size:20px}.brand span{display:block;color:#6b7890;font-size:13px}nav{display:flex;gap:25px}nav a{color:#162341;text-decoration:none;font-weight:700}.menu-btn{display:none;border:0;background:none;font-size:26px}.hero{min-height:520px;background:linear-gradient(115deg,#09264f 0%,#124b88 58%,#176bb0 100%);background-position:center;background-size:cover;background-repeat:no-repeat;position:relative;display:flex;align-items:center}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,28,65,.88),rgba(5,28,65,.35))}.hero-content{position:relative;color:#fff}.hero-copy{max-width:680px}.eyebrow{letter-spacing:2px;font-weight:800;color:#e3a900;font-size:13px}h1{font-size:58px;line-height:1.05;margin:12px 0}h2{font-size:38px;line-height:1.2;margin:10px 0 30px}.hero p{font-size:18px}.actions{display:flex;gap:12px;margin-top:28px}.btn{display:inline-block;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:800}.primary{background:#e3a900;color:#172d58}.ghost{border:1px solid #fff;color:#fff}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-38px;position:relative}.quick>div,.quick>a{display:block;background:#fff;padding:22px;border-radius:14px;box-shadow:0 10px 30px #142d5918;min-height:112px;color:#12244a;text-decoration:none}.quick b,.quick span{display:block}.quick span{color:#6c7890;margin-top:5px}.section{padding:90px 0}.alt{background:#f4f7fb}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.card,.news-card,.service{background:#fff;border-radius:18px;padding:30px;box-shadow:0 10px 35px #142d5915}.image-card{padding:10px}.image-card img{width:100%;border-radius:13px;display:block}.stats{display:flex;gap:25px;margin-top:30px}.stats div strong,.stats div span{display:block}.stats strong{font-size:26px}.stats span{color:#6c7890}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.icon{font-size:35px;margin-bottom:18px}.person{margin:12px 0;padding-top:12px;border-top:1px solid #edf0f5}.person b,.person small{display:block}.person small{color:#6c7890}.person img{width:48px;height:48px;border-radius:50%;object-fit:cover;float:right}.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.news-card>span{font-size:12px;color:#b07b00;font-weight:800}.news-card a{color:#163e82;font-weight:700;text-decoration:none}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.contact{background:#102e61;color:#fff;padding:80px 0}.contact .eyebrow{color:#f2c33c}.map-placeholder{min-height:270px;border-radius:18px;background:#fff1;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff30}.footer{display:flex;justify-content:space-between;padding:28px 0}.footer p{color:#6c7890}@media(max-width:850px){nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;flex-direction:column;padding:20px 5%;box-shadow:0 10px 20px #0001}nav.open{display:flex}.menu-btn{display:block}.cards,.service-grid{grid-template-columns:repeat(2,1fr)}.news{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.quick{grid-template-columns:1fr;margin-top:20px}h1{font-size:42px}.footer{flex-direction:column;gap:15px}}@media(max-width:520px){.cards,.service-grid{grid-template-columns:1fr}.stats{flex-direction:column;gap:10px}}

.quick>a{text-decoration:none;color:#12244a;transition:transform .2s ease,box-shadow .2s ease}.quick>a:hover{transform:translateY(-4px);box-shadow:0 14px 32px #142d5924}.quick>a b{color:#123e7a}.quick>a span{color:#52647e}.news-card>img{width:100%;height:190px;object-fit:cover;border-radius:12px;margin-bottom:15px}.content-image{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:15px}.service-link{display:inline-block;margin-top:5px;color:#163e82;font-weight:700;text-decoration:none}.service{min-height:180px}.person p{color:#6c7890;font-size:14px;margin:8px 0}.brand img{background:#fff}.hero{background-size:cover;background-position:center}
@media(max-width:520px){.hero{min-height:500px}.hero-copy{padding:25px 0}.news-card>img,.content-image{height:180px}}

.service-intro{color:#6b7890;max-width:760px}.service-tools{margin:-10px 0 25px}.service-tools .btn{color:#172d58}.service-link{margin-top:12px}
/* =====================================================
   VISI & MISI KEPALA DESA
   DESA NANGA SAYAN
===================================================== */

.vm-section{
    position:relative;
    padding:70px 20px;
    background:
        linear-gradient(rgba(246,250,255,.94),rgba(246,250,255,.97)),
        url('kantor-desa.jpg') center/cover fixed;
    overflow:hidden;
}

.vm-container{
    width:min(1200px,94%);
    margin:auto;
}

/* JUDUL */

.vm-heading{
    text-align:center;
    margin-bottom:35px;
}

.vm-heading > span{
    display:block;
    color:#d9a52b;
    font-size:28px;
    margin-bottom:5px;
}

.vm-heading h2{
    margin:0;
    font-size:46px;
    line-height:1;
    font-weight:900;
    letter-spacing:1px;
    color:#0757a5;
}

.vm-heading h3{
    margin:8px 0 15px;
    font-size:25px;
    color:#102c50;
    font-weight:800;
}

.vm-heading p{
    margin:12px auto 0;
    max-width:700px;
    color:#40536c;
    font-style:italic;
}

.vm-period{
    display:inline-block;
    margin:8px 0;
    padding:8px 30px;
    border-radius:30px;
    background:linear-gradient(90deg,#e0a52b,#f4c85a);
    color:#fff;
    font-weight:800;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
}


/* BAGIAN ATAS */

.vm-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    align-items:stretch;
}


/* KARTU KEPALA DESA */

.vm-leader{
    display:grid;
    grid-template-columns:42% 58%;
    min-height:360px;
    background:linear-gradient(135deg,#064b91,#0b70c9);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(8,70,130,.20);
    border:5px solid rgba(255,255,255,.8);
}

.vm-photo-wrap{
    position:relative;
    overflow:hidden;
    background:#0b477f;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.vm-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

.vm-leader-info{
    padding:35px 28px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.vm-label{
    display:inline-block;
    width:max-content;
    padding:8px 16px;
    border-radius:25px;
    background:linear-gradient(90deg,#e1a72b,#f6c95b);
    color:#142d50;
    font-size:13px;
    font-weight:900;
    margin-bottom:20px;
}

.vm-leader-info h3{
    margin:0;
    font-size:27px;
    line-height:1.15;
    color:#fff;
}

.vm-leader-info p{
    margin:8px 0 20px;
    color:#eaf4ff;
}

.vm-jabatan{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.35);
    color:#fff;
}

.vm-jabatan:first-letter{
    font-size:20px;
}

.vm-jabatan strong{
    font-size:22px;
}


/* VISI */

.vm-vision{
    padding:35px;
    border-radius:22px;
    background:rgba(255,255,255,.95);
    border:1px solid #d9e6f4;
    box-shadow:0 15px 35px rgba(20,70,110,.12);
    position:relative;
    overflow:hidden;
}

.vm-vision:after{
    content:"";
    position:absolute;
    right:-60px;
    bottom:-70px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(14,104,190,.07);
}

.vm-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 25px;
    margin-bottom:22px;
    border-radius:12px;
    background:linear-gradient(90deg,#0757a5,#1684dc);
    color:#fff;
    font-size:22px;
    font-weight:900;
    box-shadow:0 7px 18px rgba(0,80,160,.18);
}

.vm-vision-text{
    color:#253f5e;
    line-height:1.8;
    font-size:15px;
}


/* MISI */

.vm-mission{
    margin-top:28px;
    padding:32px;
    border-radius:22px;
    background:rgba(255,255,255,.96);
    border:1px solid #d9e6f4;
    box-shadow:0 15px 35px rgba(20,70,110,.10);
}

.vm-mission .vm-title{
    margin-bottom:25px;
}

.vm-mission-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 20px;
}

.vm-mission-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:15px;
    border-radius:14px;
    background:#f8fbff;
    border:1px solid #e3edf7;
    transition:.25s ease;
}

.vm-mission-item:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,70,140,.10);
}

.vm-number{
    flex:0 0 38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0757a5,#1684dc);
    color:#fff;
    font-weight:900;
    font-size:16px;
}

.vm-mission-text{
    color:#29435e;
    line-height:1.55;
    font-size:14px;
}


/* MOBILE */

@media(max-width:850px){

    .vm-heading h2{
        font-size:35px;
    }

    .vm-heading h3{
        font-size:20px;
    }

    .vm-top{
        grid-template-columns:1fr;
    }

    .vm-leader{
        grid-template-columns:40% 60%;
    }

    .vm-mission-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .vm-section{
        padding:45px 12px;
    }

    .vm-heading h2{
        font-size:29px;
    }

    .vm-heading h3{
        font-size:17px;
    }

    .vm-leader{
        grid-template-columns:1fr;
    }

    .vm-photo-wrap{
        height:300px;
    }

    .vm-leader-info{
        padding:25px;
    }

    .vm-leader-info h3{
        font-size:23px;
    }

    .vm-vision,
    .vm-mission{
        padding:22px;
    }

    .vm-title{
        font-size:18px;
    }
}/* =========================================================
   PENYEMPURNAAN PROFESIONAL VISI & MISI
   DESA NANGA SAYAN
   ========================================================= */

.vm-section{
    position:relative;
    padding:90px 20px 100px;
    background:
        linear-gradient(
            135deg,
            rgba(245,249,255,.97),
            rgba(255,255,255,.94)
        ),
        url('kantor-desa.jpg') center/cover fixed;
    overflow:hidden;
}

.vm-section::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(230,162,45,.16),
        transparent 68%
    );
    pointer-events:none;
}

.vm-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-170px;
    bottom:-170px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(9,94,170,.13),
        transparent 70%
    );
    pointer-events:none;
}

.vm-container{
    position:relative;
    z-index:2;
    width:min(1180px,94%);
    margin:auto;
}

/* =========================
   HEADER
   ========================= */

.vm-heading{
    text-align:center;
    margin:0 auto 38px;
    max-width:850px;
}

.vm-heading > span{
    display:block;
    color:#e5a52d;
    font-size:24px;
    line-height:1;
    margin-bottom:10px;
}

.vm-heading h2{
    margin:0;
    font-size:clamp(32px,4vw,48px);
    line-height:1.1;
    letter-spacing:2px;
    font-weight:900;
    color:#07549a;
}

.vm-heading h3{
    margin:8px 0 14px;
    font-size:clamp(15px,2vw,20px);
    font-weight:800;
    letter-spacing:1px;
    color:#123b66;
}

.vm-heading p{
    margin:12px auto 0;
    max-width:700px;
    color:#61738a;
    font-size:15px;
    line-height:1.7;
}

.vm-period{
    display:inline-block;
    margin:4px 0 4px;
    padding:8px 22px;
    border-radius:30px;
    background:linear-gradient(135deg,#e4a52c,#f5c75d);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:1px;
    box-shadow:0 8px 22px rgba(190,130,20,.22);
}

/* =========================
   BAGIAN ATAS
   ========================= */

.vm-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
    align-items:stretch;
    margin-bottom:28px;
}

/* =========================
   KARTU KEPALA DESA
   ========================= */

.vm-leader{
    display:grid;
    grid-template-columns:44% 56%;
    min-height:390px;
    overflow:hidden;
    border-radius:24px;
    background:linear-gradient(
        135deg,
        #064d91 0%,
        #0868bd 55%,
        #0c78d1 100%
    );
    box-shadow:
        0 20px 45px rgba(9,65,120,.20),
        0 2px 8px rgba(0,0,0,.08);
    border:1px solid rgba(255,255,255,.55);
}

.vm-photo-wrap{
    position:relative;
    min-height:390px;
    overflow:hidden;
    background:#e9eef5;
}

.vm-photo-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,45,90,.18)
    );
    pointer-events:none;
}

.vm-photo{
    display:block;
    width:100%;
    height:100%;
    min-height:390px;
    object-fit:cover;
    object-position:center top;
}

.vm-leader-info{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px 30px;
    color:#fff;
}

.vm-label{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    padding:7px 12px;
    margin-bottom:16px;
    border-radius:20px;
    background:#e5a52d;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
}

.vm-leader-info h3{
    margin:0;
    color:#fff;
    font-size:clamp(22px,2.4vw,30px);
    line-height:1.15;
    font-weight:900;
    text-transform:uppercase;
}

.vm-leader-info > p{
    margin:8px 0 25px;
    color:rgba(255,255,255,.84);
    font-size:13px;
}

.vm-jabatan{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.25);
    color:rgba(255,255,255,.82);
    font-size:12px;
    line-height:1.5;
}

.vm-jabatan strong{
    color:#fff;
    font-size:14px;
}

/* =========================
   KARTU VISI
   ========================= */

.vm-vision{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:38px 40px;
    min-height:390px;
    border-radius:24px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(7,84,154,.12);
    box-shadow:
        0 20px 45px rgba(20,60,100,.12),
        0 2px 8px rgba(0,0,0,.04);
}

.vm-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    color:#0867b8;
    font-size:17px;
    font-weight:900;
    letter-spacing:1px;
}

.vm-title:first-letter{
    font-size:20px;
}

.vm-title span{
    position:relative;
}

.vm-title span::after{
    content:"";
    display:block;
    width:38px;
    height:3px;
    margin-top:6px;
    border-radius:3px;
    background:linear-gradient(90deg,#e5a52d,#f5ca68);
}

.vm-vision-text{
    color:#40566d;
    font-size:15px;
    line-height:1.9;
    text-align:justify;
}

.vm-vision-text::first-letter{
    color:#075da8;
}

/* =========================
   KARTU MISI
   ========================= */

.vm-mission{
    padding:34px;
    border-radius:24px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(7,84,154,.12);
    box-shadow:
        0 20px 45px rgba(20,60,100,.11),
        0 2px 8px rgba(0,0,0,.04);
}

.vm-mission .vm-title{
    margin-bottom:24px;
}

.vm-mission-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 15px;
}

.vm-mission-item{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:12px;
    align-items:start;
    padding:16px 15px;
    min-height:78px;
    border-radius:15px;
    background:linear-gradient(
        135deg,
        #f8fbff,
        #eef6ff
    );
    border:1px solid #dceaf8;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.vm-mission-item:hover{
    transform:translateY(-3px);
    border-color:#a9ccef;
    box-shadow:0 10px 24px rgba(5,90,160,.10);
}

.vm-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #0872c9,
        #07549a
    );
    color:#fff;
    font-size:12px;
    font-weight:900;
    box-shadow:0 5px 12px rgba(7,84,154,.22);
}

.vm-mission-text{
    color:#40566d;
    font-size:12.5px;
    line-height:1.65;
}

/* =========================
   GARIS EMAS DEKORATIF
   ========================= */

.vm-heading::after{
    content:"";
    display:block;
    width:90px;
    height:3px;
    margin:18px auto 0;
    border-radius:10px;
    background:linear-gradient(
        90deg,
        transparent,
        #e5a52d,
        transparent
    );
}

/* =========================
   TABLET
   ========================= */

@media(max-width:900px){

    .vm-section{
        padding:70px 16px 80px;
    }

    .vm-top{
        grid-template-columns:1fr;
    }

    .vm-leader{
        min-height:350px;
    }

    .vm-photo-wrap,
    .vm-photo{
        min-height:350px;
    }

    .vm-vision{
        min-height:auto;
    }
}

/* =========================
   HP
   ========================= */

@media(max-width:600px){

    .vm-section{
        padding:55px 12px 65px;
        background-attachment:scroll;
    }

    .vm-container{
        width:100%;
    }

    .vm-heading{
        margin-bottom:28px;
    }

    .vm-heading h2{
        font-size:30px;
        letter-spacing:1px;
    }

    .vm-heading h3{
        font-size:14px;
    }

    .vm-heading p{
        font-size:12px;
    }

    .vm-period{
        padding:7px 17px;
        font-size:10px;
    }

    .vm-leader{
        grid-template-columns:42% 58%;
        min-height:280px;
        border-radius:18px;
    }

    .vm-photo-wrap,
    .vm-photo{
        min-height:280px;
    }

    .vm-leader-info{
        padding:22px 18px;
    }

    .vm-label{
        padding:5px 8px;
        margin-bottom:10px;
        font-size:8px;
    }

    .vm-leader-info h3{
        font-size:17px;
    }

    .vm-leader-info > p{
        margin:5px 0 18px;
        font-size:10px;
    }

    .vm-jabatan{
        padding-top:12px;
        font-size:9px;
    }

    .vm-jabatan strong{
        font-size:11px;
    }

    .vm-vision{
        padding:25px 20px;
        border-radius:18px;
    }

    .vm-title{
        margin-bottom:16px;
        font-size:15px;
    }

    .vm-vision-text{
        font-size:12px;
        line-height:1.75;
    }

    .vm-mission{
        padding:22px 16px;
        border-radius:18px;
    }

    .vm-mission-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .vm-mission-item{
        grid-template-columns:30px 1fr;
        padding:13px;
        min-height:auto;
    }

    .vm-number{
        width:29px;
        height:29px;
        font-size:10px;
    }

    .vm-mission-text{
        font-size:11px;
        line-height:1.55;
    }
}

/* =====================================================
   PENYEMPURNAAN TAMPILAN WEBSITE DESA NANGA SAYAN
   Hanya mengatur tampilan; tidak mengubah data atau fungsi admin.
===================================================== */
:root{--desa-navy:#123f78;--desa-blue:#0874c9;--desa-gold:#f0b323;--desa-ink:#152b4a;--desa-muted:#64748b;--desa-soft:#f3f7fc}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{color:var(--desa-ink);background:#fff}
.container{width:min(1200px,92%)}
.topbar{background:rgba(255,255,255,.97);box-shadow:0 4px 20px rgba(15,45,85,.06);backdrop-filter:blur(12px)}
.nav{min-height:76px;gap:24px}
.brand{flex-shrink:0;gap:12px}
.brand img{width:52px;height:52px;object-fit:contain}
.brand strong{font-size:19px;letter-spacing:.1px;color:#123f78}
.brand span{font-size:12px}
nav{align-items:center;gap:clamp(12px,1.7vw,25px)}
nav a{font-size:14px;transition:color .2s ease}
nav a:hover,nav a:focus{color:var(--desa-blue)}
.menu-btn{color:var(--desa-navy);cursor:pointer}
.hero{min-height:590px;background-position:center;background-size:cover}
.overlay{background:linear-gradient(90deg,rgba(7,34,72,.88) 0%,rgba(7,45,91,.69) 48%,rgba(7,45,91,.16) 100%)}
.hero-content{padding-top:65px;padding-bottom:75px}
.hero-copy{max-width:720px}
.eyebrow{display:inline-block;color:#ffd15b;letter-spacing:2.2px;font-size:12px;text-transform:uppercase}
.hero h1{max-width:720px;font-size:clamp(38px,5vw,64px);line-height:1.08;letter-spacing:-1.2px;margin:14px 0 18px;text-wrap:balance}
.hero p{max-width:650px;font-size:clamp(16px,1.6vw,19px);line-height:1.8;color:rgba(255,255,255,.93)}
.actions{flex-wrap:wrap;gap:13px;margin-top:30px}
.btn{padding:13px 21px;border-radius:9px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.primary{background:linear-gradient(135deg,#f4c342,#e3a313);color:#102c50}
.quick{gap:18px;margin-top:-42px}
.quick>div,.quick>a{border:1px solid #edf2f8;border-radius:16px;box-shadow:0 14px 35px rgba(18,54,95,.10);transition:transform .2s ease,box-shadow .2s ease}
.quick>div:hover,.quick>a:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,54,95,.15)}
.quick>div{padding:24px}
.section{padding:clamp(58px,7vw,92px) 0}
.section h2{color:var(--desa-navy);font-size:clamp(28px,3vw,39px);letter-spacing:-.5px}
.section p{line-height:1.8}
.alt{background:linear-gradient(180deg,#f5f8fc,#eef4fb)}
.card,.news-card,.service{border:1px solid #edf2f8;border-radius:17px;box-shadow:0 12px 32px rgba(18,54,95,.07);transition:transform .2s ease,box-shadow .2s ease}
.card:hover,.news-card:hover,.service:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(18,54,95,.12)}
.news-card>img,.content-image{object-fit:cover;object-position:center}
.news-card a,.service-link{color:#0757a5}
.contact{background:linear-gradient(135deg,#0b2e5d,#13559a);position:relative;overflow:hidden}
.contact a{color:#fff}
.footer{align-items:center;gap:20px;border-top:1px solid #e8eef6}
/* Visi & Misi: pertahankan struktur dan konten yang sudah dikelola dari admin */
.vm-section{background-attachment:scroll;background-position:center;background-size:cover}
.vm-heading h2{font-size:clamp(34px,4vw,48px)}
.vm-top{gap:26px}
.vm-leader,.vm-vision,.vm-mission{box-shadow:0 16px 38px rgba(18,54,95,.12)}
.vm-photo{object-position:center 18%}
/* Perangkat layar kecil */
@media(max-width:950px){
  .nav{min-height:72px}
  nav{gap:13px}
  nav a{font-size:12px}
  .hero{min-height:520px}
  .vm-top{grid-template-columns:1fr}
  .vm-leader{min-height:390px}
}
@media(max-width:850px){
  .nav{min-height:72px}
  nav{top:72px;gap:0}
  nav a{padding:10px 0;font-size:15px}
  .hero{min-height:500px;background-position:60% center}
  .overlay{background:linear-gradient(90deg,rgba(7,34,72,.88),rgba(7,45,91,.58))}
  .hero-content{padding-top:45px;padding-bottom:55px}
  .quick{margin-top:22px}
  .vm-leader{grid-template-columns:40% 60%}
}
@media(max-width:520px){
  .container{width:91%}
  .brand img{width:44px;height:44px}
  .brand strong{font-size:16px}
  .brand span{font-size:10px}
  .hero{min-height:480px}
  .hero h1{font-size:37px;letter-spacing:-.6px}
  .hero p{font-size:15px}
  .actions .btn{padding:11px 15px;font-size:13px}
  .quick>div{padding:18px}
  .section{padding:55px 0}
  .vm-section{padding:48px 12px}
  .vm-container{width:100%}
  .vm-heading h2{font-size:32px}
  .vm-heading h3{font-size:17px}
  .vm-leader{grid-template-columns:1fr;min-height:0}
  .vm-photo-wrap{height:340px;min-height:340px}
  .vm-photo{height:100%;min-height:340px;object-position:center 15%}
  .vm-leader-info{padding:25px 22px}
  .vm-leader-info h3{font-size:23px}
  .vm-label{font-size:11px}
  .vm-vision,.vm-mission{padding:23px 18px}
  .vm-vision-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Perbaikan keterbacaan dan jarak beranda */
.hero-content{width:100%;padding-top:24px;padding-bottom:55px}.hero-copy{max-width:720px}.hero .eyebrow{color:#ffc928}.hero h1{color:#fff}.hero-copy>p:not(.eyebrow){color:#f5f8ff}.quick{z-index:2;margin-top:-34px}.quick>a{border:1px solid #e7edf5}.quick>a b{display:block;margin-bottom:7px}.quick>a span{display:block;line-height:1.5}.section{position:relative}
@media(max-width:850px){.hero-content{padding-top:35px;padding-bottom:35px}.quick{margin-top:20px}}

/* === PENYESUAIAN TAMBAHAN BERANDA DESA NANGA SAYAN === */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.container{width:min(1200px,92%);margin-left:auto;margin-right:auto}
.topbar{width:100%;background:rgba(255,255,255,.98);box-shadow:0 3px 18px rgba(9,36,79,.06)}
.nav{width:min(1200px,92%);margin:0 auto;min-height:78px}
.brand{flex-shrink:0}
nav{align-items:center;gap:clamp(12px,1.7vw,25px)}
nav a{white-space:nowrap;font-size:14px;transition:color .2s ease}
nav a:hover{color:#0875d1}
.hero{width:100%;min-height:570px;align-items:center;isolation:isolate;background-color:#0a2a56;background-image:linear-gradient(105deg,rgba(5,29,65,.96) 0%,rgba(9,54,105,.88) 48%,rgba(13,91,153,.72) 100%);}
.overlay{z-index:-1;background:linear-gradient(90deg,rgba(5,28,65,.30),rgba(5,28,65,.04))}
.hero-content{width:min(1200px,92%);max-width:1200px;margin:0 auto;padding:75px 0 100px;}
.hero-copy{width:100%;max-width:680px;margin:0;}
.hero .eyebrow{margin:0 0 16px;font-size:14px;line-height:1.5;letter-spacing:2px;color:#ffc629}
.hero h1{font-size:clamp(42px,4.5vw,64px);line-height:1.08;letter-spacing:-1px;margin:0 0 18px;max-width:760px;color:#fff}
.hero p{max-width:650px;font-size:clamp(16px,1.35vw,19px);line-height:1.75;color:#f7faff;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.15)}
.primary{background:#f3b900;color:#082b5c}
.quick{width:min(1200px,92%);margin:-40px auto 0;gap:20px;z-index:3}
.quick>div,.quick>a{padding:24px 25px;min-height:118px;border:1px solid #e6edf6;border-radius:17px;box-shadow:0 14px 35px rgba(14,42,82,.10)}
.quick>a b{font-size:16px;color:#103e78}
.quick>a span{font-size:14px;line-height:1.65;color:#5b6d86}
.section{padding:82px 0}
.section h2{color:#103b70}
.cards,.news,.service-grid{gap:22px}
.card,.news-card,.service{border:1px solid #e8eef6;border-radius:17px;box-shadow:0 12px 30px rgba(14,42,82,.07)}
.footer{width:min(1200px,92%);margin:0 auto}
@media(max-width:850px){
 .nav{min-height:72px}
 .hero{min-height:520px}
 .hero-content{width:91%;padding:62px 0 72px}
 .hero-copy{max-width:620px}
 .quick{width:91%;margin:20px auto 0}
 nav{top:72px}
}
@media(max-width:520px){
 .hero{min-height:470px}
 .hero-content{width:91%;padding:48px 0 55px}
 .hero h1{font-size:38px;line-height:1.1}
 .hero .eyebrow{font-size:12px;letter-spacing:1.4px}
 .hero p{font-size:15px;line-height:1.65}
 .quick{width:91%;grid-template-columns:1fr;gap:12px}
 .quick>div,.quick>a{min-height:0;padding:18px 20px}
 .section{padding:52px 0}
}

/* PERBAIKAN BERANDA DESA NANGA SAYAN — HERO FOTO KANTOR + KEPALA DESA */
#beranda.hero{
  min-height:600px;
  isolation:isolate;
  overflow:hidden;
  background-color:#0b2e5e;
  /* Foto kantor menjadi latar otomatis jika gambar hero belum diatur di Panel Admin */
  background-image:linear-gradient(90deg,rgba(4,28,67,.88) 0%,rgba(4,35,77,.68) 48%,rgba(4,35,77,.12) 100%),url('kantor-desa.jpg');
  background-position:center,center 48%;
  background-size:cover,cover;
}
#beranda.hero .overlay{background:linear-gradient(90deg,rgba(4,24,58,.45) 0%,rgba(4,24,58,.20) 55%,rgba(4,24,58,.02) 100%);z-index:0}
#beranda.hero .hero-content{z-index:2;width:min(1150px,92%);margin:0 auto;padding:78px 0 110px}
#beranda.hero .hero-copy{max-width:650px}
#beranda.hero .eyebrow{color:#ffd34d;font-size:14px;text-shadow:0 2px 8px #001b3d}
#beranda.hero h1{font-size:clamp(42px,5vw,68px);font-weight:900;letter-spacing:-1.5px;text-shadow:0 3px 16px rgba(0,0,0,.22)}
#beranda.hero .hero-copy>p:not(.eyebrow){max-width:590px;font-size:18px;line-height:1.75;text-shadow:0 2px 8px rgba(0,0,0,.28)}
/* Foto Kepala Desa di sisi kanan; konten teks dan tombol tetap di kiri */
#beranda.hero:after{
  content:"";position:absolute;z-index:1;right:max(4%,calc((100% - 1150px)/2));bottom:0;
  width:min(34%,390px);height:94%;
  background:url('uploads/kepala-desa.jpg') center bottom/contain no-repeat;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.20));pointer-events:none;
}
#beranda.hero .actions{gap:14px;flex-wrap:wrap}
#beranda.hero .btn{padding:14px 22px;border-radius:10px}
.quick{z-index:3;margin-top:-42px;gap:18px}
.quick>a{min-height:112px;border:1px solid #e2eaf5;padding:22px 24px}
.quick>a b{font-size:15px;color:#123e7a}
.quick>a span{font-size:14px;line-height:1.55;color:#52647e}
@media(max-width:850px){
 #beranda.hero{min-height:570px;background-position:center,58% center}
 #beranda.hero .hero-content{padding:70px 0 100px}
 #beranda.hero:after{right:0;width:42%;height:65%;opacity:.72}
 #beranda.hero .hero-copy{max-width:68%;}
 #beranda.hero h1{font-size:clamp(36px,6vw,52px)}
}
@media(max-width:560px){
 #beranda.hero{min-height:570px;background-position:center,60% center}
 #beranda.hero .hero-content{padding:58px 0 75px}
 #beranda.hero:after{right:-8%;width:58%;height:48%;opacity:.5}
 #beranda.hero .hero-copy{max-width:100%;padding-right:8px}
 #beranda.hero h1{font-size:39px;max-width:440px}
 #beranda.hero .hero-copy>p:not(.eyebrow){font-size:16px;max-width:95%}
 #beranda.hero .overlay{background:linear-gradient(90deg,rgba(4,24,58,.76),rgba(4,24,58,.38))}
 .quick{margin-top:18px}
}


/* ===== BERANDA UTAMA: FOTO KEPALA DESA + KANTOR DESA ===== */
.hero{
  min-height:650px;
  background-color:#08264f;
  background-image:linear-gradient(105deg,rgba(5,28,63,.98) 0%,rgba(8,48,94,.94) 43%,rgba(8,48,94,.72) 100%),var(--admin-hero-image,url('uploads/b4405265672f9fdc_1791373204.jpg'));
  background-position:center,center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero .overlay{background:linear-gradient(90deg,rgba(5,28,63,.28),rgba(5,28,63,.04));pointer-events:none}
.hero-content{
  width:min(1240px,92%);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(28px,4vw,58px);
  padding:64px 0 90px;
}
.hero-copy{max-width:620px;z-index:2}
.hero .eyebrow{color:#ffd15b;font-size:13px;letter-spacing:2px;font-weight:900;margin:0 0 16px}
.hero h1{font-size:clamp(42px,4.4vw,66px);line-height:1.04;letter-spacing:-1.3px;margin:0 0 20px;color:#fff;text-wrap:balance}
.hero-copy>p:not(.eyebrow){font-size:clamp(16px,1.4vw,19px);line-height:1.75;color:#f4f8ff;max-width:570px}
.hero .actions{margin-top:28px;gap:12px}
.hero-signature{margin-top:34px;padding-left:14px;border-left:3px solid #f2b91e;display:flex;flex-direction:column;gap:2px;color:#fff}
.hero-signature span{font-size:10px;letter-spacing:2px;color:#ffd15b;font-weight:800}
.hero-signature strong{font-size:18px;letter-spacing:1px}
.hero-signature small{font-size:12px;color:#dce8f8}
.hero-visual{position:relative;isolation:isolate;min-width:0;min-height:450px;display:flex;align-items:center;justify-content:flex-end}
.hero-office{position:absolute;inset:16px 0 20px 15%;width:85%;height:calc(100% - 36px);object-fit:cover;object-position:center;border-radius:24px;border:5px solid rgba(255,255,255,.88);box-shadow:0 24px 55px rgba(0,0,0,.28)}
.hero-visual:after{content:"";position:absolute;inset:16px 0 20px 15%;border-radius:24px;background:linear-gradient(0deg,rgba(5,26,56,.22),transparent 65%);pointer-events:none;z-index:1}
.hero-photo-frame{position:absolute;z-index:2;left:0;bottom:12px;width:47%;height:88%;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#f4eee8,#fff);border:5px solid rgba(255,255,255,.96);border-radius:150px 150px 22px 22px;overflow:hidden;box-shadow:0 22px 45px rgba(0,0,0,.3)}
.hero-leader{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-nameplate{position:absolute;bottom:12px;left:10px;right:10px;padding:10px 12px;border-radius:10px;background:linear-gradient(100deg,#f2b91e,#ffd75d);color:#082c5c;box-shadow:0 6px 18px rgba(0,0,0,.18);display:flex;flex-direction:column;line-height:1.25}
.hero-nameplate strong{font-size:clamp(10px,1vw,14px);letter-spacing:.3px}
.hero-nameplate span{font-size:clamp(9px,.85vw,12px);font-weight:700}
.hero-location{position:absolute;z-index:3;right:10px;bottom:0;max-width:70%;display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 12px 30px rgba(0,0,0,.2);color:#103b70}
.hero-location-dot{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#eaf3ff;color:#0874c9;font-size:25px}
.hero-location strong,.hero-location small{display:block}
.hero-location strong{font-size:12px;line-height:1.35}
.hero-location small{font-size:10px;color:#63748a;margin-top:3px}
.quick{margin-top:-38px;z-index:5}
@media(max-width:950px){
 .hero{min-height:0}
 .hero-content{grid-template-columns:1fr;gap:28px;padding:54px 0 72px}
 .hero-copy{max-width:760px}
 .hero-visual{width:min(700px,100%);min-height:420px;margin:0 auto}
 .hero-office{left:18%;width:82%}
 .hero-visual:after{left:18%}
 .hero-photo-frame{width:42%;height:86%}
}
@media(max-width:600px){
 .hero-content{width:91%;padding:42px 0 55px;gap:25px}
 .hero h1{font-size:38px;line-height:1.08}
 .hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.65}
 .hero-signature{margin-top:23px}
 .hero-visual{min-height:310px}
 .hero-office{inset:10px 0 14px 17%;width:83%;height:calc(100% - 24px);border-width:3px;border-radius:17px}
 .hero-visual:after{inset:10px 0 14px 17%;border-radius:17px}
 .hero-photo-frame{left:0;bottom:8px;width:45%;height:86%;border-width:3px;border-radius:95px 95px 15px 15px}
 .hero-nameplate{left:5px;right:5px;bottom:6px;padding:7px 6px;border-radius:7px}
 .hero-nameplate strong{font-size:9px}
 .hero-nameplate span{font-size:8px}
 .hero-location{right:0;bottom:0;max-width:68%;padding:9px 10px;gap:7px;border-radius:10px}
 .hero-location-dot{width:27px;height:27px;flex-basis:27px;font-size:18px}
 .hero-location strong{font-size:9px}
 .hero-location small{font-size:8px}
 .quick{margin:18px auto 0;grid-template-columns:1fr;gap:12px}
}


/* =====================================================
   PERBAIKAN BERANDA DESA NANGA SAYAN - 19 OKTOBER 2026
   Hanya mengatur tampilan halaman depan; fungsi PHP/admin tetap.
===================================================== */
#beranda.hero{
  min-height:620px;
  background-color:#08264f;
  /* Hindari foto dari pengaturan admin yang bisa berupa foto kepala desa
     sehingga wajah tidak muncul berulang sebagai gambar latar. */
  background-image:linear-gradient(112deg,rgba(5,28,63,.98) 0%,rgba(8,48,94,.95) 53%,rgba(8,75,132,.88) 100%) !important;
  background-position:center;
  background-size:cover;
}
#beranda.hero .overlay{background:radial-gradient(ellipse at 88% 20%,rgba(31,133,208,.24),transparent 45%),linear-gradient(90deg,rgba(5,28,63,.12),rgba(5,28,63,0));}
#beranda .hero-content{
  width:min(1240px,92%);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.5vw,48px);
  padding:58px 0 76px;
}
#beranda .hero-copy{max-width:610px;}
#beranda .hero h1{max-width:650px;font-size:clamp(42px,4.2vw,62px);}
#beranda .hero-visual{min-height:420px;}
#beranda .hero-office{
  inset:32px 0 32px 17%;
  width:83%;height:calc(100% - 64px);
  object-fit:cover;object-position:center 28%;
  border:4px solid rgba(255,255,255,.94);
  border-radius:22px;
  box-shadow:0 22px 50px rgba(0,0,0,.26);
}
#beranda .hero-visual:after{
  inset:32px 0 32px 17%;border-radius:22px;
  background:linear-gradient(0deg,rgba(4,25,53,.12),transparent 55%);
}
#beranda .hero-photo-frame{
  left:0;bottom:22px;width:43%;height:78%;
  border:4px solid #fff;border-radius:125px 125px 20px 20px;
  box-shadow:0 20px 42px rgba(0,0,0,.28);
}
#beranda .hero-leader{object-position:center top;}
#beranda .hero-nameplate{bottom:9px;left:8px;right:8px;padding:9px 10px;}
#beranda .hero-location{right:8px;bottom:8px;max-width:61%;padding:11px 13px;}
#beranda .quick{margin-top:-28px;}
#beranda .quick>a{min-height:104px;border:1px solid #e4edf7;box-shadow:0 12px 28px rgba(14,43,79,.09);transition:transform .2s ease,box-shadow .2s ease;}
#beranda .quick>a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,43,79,.13);}
@media(max-width:950px){
  #beranda.hero{min-height:0;}
  #beranda .hero-content{grid-template-columns:1fr;padding:48px 0 68px;gap:26px;}
  #beranda .hero-copy{max-width:760px;}
  #beranda .hero-visual{width:min(700px,100%);min-height:390px;margin:0 auto;}
  #beranda .hero-office{inset:24px 0 24px 17%;width:83%;height:calc(100% - 48px);}
  #beranda .hero-visual:after{inset:24px 0 24px 17%;}
  #beranda .hero-photo-frame{width:42%;height:80%;bottom:16px;}
  #beranda .hero-location{max-width:60%;}
}
@media(max-width:600px){
  #beranda .hero-content{width:91%;padding:38px 0 48px;gap:20px;}
  #beranda .hero h1{font-size:clamp(34px,9vw,42px);letter-spacing:-.7px;}
  #beranda .hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.65;}
  #beranda .hero .actions{flex-wrap:wrap;gap:10px;}
  #beranda .hero .btn{padding:11px 15px;font-size:13px;}
  #beranda .hero-signature{margin-top:22px;}
  #beranda .hero-visual{min-height:300px;}
  #beranda .hero-office{inset:16px 0 20px 17%;width:83%;height:calc(100% - 36px);border-width:3px;border-radius:16px;object-position:center 25%;}
  #beranda .hero-visual:after{inset:16px 0 20px 17%;border-radius:16px;}
  #beranda .hero-photo-frame{left:0;bottom:12px;width:44%;height:82%;border-width:3px;border-radius:82px 82px 14px 14px;}
  #beranda .hero-nameplate{left:4px;right:4px;bottom:5px;padding:6px 5px;border-radius:7px;}
  #beranda .hero-nameplate strong{font-size:8px;}
  #beranda .hero-nameplate span{font-size:7px;}
  #beranda .hero-location{right:0;bottom:0;max-width:66%;padding:8px;gap:6px;border-radius:9px;}
  #beranda .hero-location-dot{width:25px;height:25px;flex-basis:25px;font-size:17px;}
  #beranda .hero-location strong{font-size:8px;}
  #beranda .hero-location small{font-size:7px;}
  #beranda .quick{margin:16px auto 0;grid-template-columns:1fr;gap:10px;}
  #beranda .quick>a{min-height:0;padding:17px 18px;}
}


/* FIX4: latar foto kantor desa + tata letak beranda yang konsisten */
#beranda.hero{
  background-image:
    linear-gradient(105deg,rgba(4,25,58,.94) 0%,rgba(5,39,82,.84) 48%,rgba(5,47,91,.58) 100%),
    url('uploads/kantor-desa.jpg') !important;
  background-position:center,center 45% !important;
  background-size:cover,cover !important;
  background-repeat:no-repeat,no-repeat !important;
}
#beranda.hero .overlay{
  background:linear-gradient(90deg,rgba(3,22,53,.28),rgba(3,22,53,.06)) !important;
}
#beranda .hero-content{position:relative;z-index:2;}
#beranda .hero-copy{position:relative;z-index:3;}
#beranda .hero-visual{position:relative;z-index:2;}
#beranda .hero-office{object-position:center 35%;}
#beranda .hero-photo-frame{background:#fff;}
#beranda .hero-location{z-index:4;}
@media(max-width:950px){
  #beranda.hero{background-position:center,center 45% !important;}
}
@media(max-width:600px){
  #beranda.hero{background-position:center,center 45% !important;}
}


/* FIX5: hilangkan potret dekoratif yang menggandakan foto kepala desa,
   gunakan foto kantor yang sudah dipotong bersih dari tulisan lokasi Google. */
#beranda.hero:after{content:none !important;display:none !important;background:none !important;}
#beranda.hero{
  background-image:linear-gradient(105deg,rgba(4,25,58,.92) 0%,rgba(5,39,82,.78) 48%,rgba(5,47,91,.56) 100%),url('uploads/kantor-beranda-bersih.jpg?v=20261019fix6') !important;
  background-position:center,center 42% !important;
  background-size:cover,cover !important;
}
#beranda .hero-office{object-position:center center !important;}
#beranda .hero-visual:after{background:linear-gradient(0deg,rgba(4,25,53,.08),transparent 45%) !important;}
#beranda .hero-photo-frame{z-index:3;}
#beranda .hero-location{z-index:4;right:8px;bottom:8px;max-width:58%;}
@media(max-width:950px){
  #beranda.hero{background-position:center,center 42% !important;}
}
@media(max-width:600px){
  #beranda.hero{background-position:center,center 35% !important;}
  #beranda .hero-location{max-width:62%;}
}


/* FIX6: geser foto ke bagian bawah agar fasad kantor lebih terlihat */
#beranda.hero{
  background-position:center,center 82% !important;
}
#beranda .hero-office{
  object-position:center 78% !important;
}
@media(max-width:950px){
  #beranda.hero{background-position:center,center 78% !important;}
  #beranda .hero-office{object-position:center 78% !important;}
}
@media(max-width:600px){
  #beranda.hero{background-position:center,center 78% !important;}
  #beranda .hero-office{object-position:center 78% !important;}
}


/* FIX7: gunakan foto kantor desa lengkap yang memang tersedia di public_html/uploads. */
#beranda.hero{
  background-image:linear-gradient(105deg,rgba(4,25,58,.90) 0%,rgba(5,39,82,.73) 48%,rgba(5,47,91,.40) 100%),url('uploads/kantor-desa.jpg?v=20261019fix7') !important;
  background-position:center,center 48% !important;
  background-size:cover,cover !important;
  background-repeat:no-repeat,no-repeat !important;
}
#beranda .hero-office{
  object-position:center 45% !important;
}
@media(max-width:850px){
  #beranda.hero{background-position:center,center 42% !important;}
  #beranda .hero-office{object-position:center 40% !important;}
}


/* =====================================================
   REDESAIN BERANDA UTAMA - 19 OKTOBER 2026
   Override final yang sengaja dipisahkan agar aturan FIX lama
   tidak saling menimpa. Fitur PHP dan panel admin dipertahankan.
===================================================== */
:root{--desa-blue:#07356d;--desa-blue-deep:#061e43;--desa-gold:#ffc400;--desa-ink:#102b52;}
.topbar{min-height:72px;background:rgba(255,255,255,.98);box-shadow:0 2px 18px rgba(7,31,66,.08);}
.topbar .nav{min-height:72px;width:min(1380px,94%);}
.brand{gap:12px;}
.brand img{width:48px;height:48px;}
.brand strong{font-size:18px;letter-spacing:.2px;color:#16457e;}
.brand span{font-size:11px;}
.topbar nav{gap:clamp(12px,1.7vw,25px);}
.topbar nav a{font-size:13px;transition:color .18s ease;}
.topbar nav a:hover{color:#0875cf;}
#beranda.hero-redesign{min-height:590px;position:relative;isolation:isolate;overflow:hidden;background-color:#082b58;background-image:linear-gradient(90deg,rgba(4,26,58,.88) 0%,rgba(5,35,75,.78) 38%,rgba(5,35,75,.48) 66%,rgba(5,35,75,.22) 100%),url('uploads/kantor-beranda-hero.jpg?v=20261019redesign1')!important;background-position:center,center 48%!important;background-size:cover,cover!important;background-repeat:no-repeat!important;}
#beranda.hero-redesign .overlay{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(3,22,48,.22),transparent 45%)!important;}
#beranda.hero-redesign .hero-content{width:min(1380px,94%);min-height:590px;position:relative;z-index:1;display:grid;grid-template-columns:minmax(245px,320px) minmax(0,650px);align-items:center;justify-content:start;gap:clamp(26px,4vw,68px);padding:38px 0 92px;}
#beranda.hero-redesign .hero-person{position:relative;align-self:end;height:500px;max-height:calc(100% + 25px);width:100%;border:4px solid rgba(255,255,255,.92);border-radius:180px 180px 22px 22px;overflow:hidden;background:#f4f6fa;box-shadow:0 22px 50px rgba(0,0,0,.28);}
#beranda.hero-redesign .hero-person>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;}
#beranda.hero-redesign .hero-nameplate{position:absolute;left:12px;right:12px;bottom:12px;padding:11px 14px;border-radius:11px;background:linear-gradient(105deg,#ffbf00,#ffdc66);color:#082d61;box-shadow:0 6px 18px rgba(0,0,0,.2);display:flex;flex-direction:column;line-height:1.3;}
#beranda.hero-redesign .hero-nameplate strong{font-size:14px;letter-spacing:.25px;}
#beranda.hero-redesign .hero-nameplate span{font-size:11px;font-weight:700;}
#beranda.hero-redesign .hero-copy{max-width:650px;position:relative;z-index:2;padding:8px 0;}
#beranda.hero-redesign .hero .eyebrow,#beranda.hero-redesign .eyebrow{margin:0 0 16px;color:#ffd03e;font-size:13px;font-weight:900;letter-spacing:2px;}
#beranda.hero-redesign h1{max-width:630px;margin:0 0 20px;font-size:clamp(46px,5vw,72px);line-height:1.02;letter-spacing:-1.6px;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.12);}
#beranda.hero-redesign .hero-copy>p:not(.eyebrow){max-width:570px;margin:0;color:#fff;font-size:18px;line-height:1.75;text-shadow:0 1px 5px rgba(0,0,0,.18);}
#beranda.hero-redesign .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px;}
#beranda.hero-redesign .btn{padding:13px 21px;border-radius:10px;font-size:14px;}
#beranda.hero-redesign .btn.primary{background:#ffc400;color:#092b5a;border:1px solid #ffc400;}
#beranda.hero-redesign .btn.ghost{background:rgba(5,35,75,.24);border:1px solid rgba(255,255,255,.9);color:#fff;}
#beranda.hero-redesign .hero-signature{margin-top:30px;padding-left:14px;border-left:3px solid #ffc400;display:flex;flex-direction:column;gap:2px;color:#fff;}
#beranda.hero-redesign .hero-signature span{font-size:10px;letter-spacing:2px;color:#ffd34f;font-weight:900;}
#beranda.hero-redesign .hero-signature strong{font-size:17px;letter-spacing:1px;}
#beranda.hero-redesign .hero-signature small{font-size:11px;color:#edf4ff;}
#beranda.hero-redesign + .quick{width:min(1120px,92%);position:relative;z-index:3;margin:-40px auto 0;gap:16px;}
#beranda.hero-redesign + .quick>a{min-height:104px;padding:20px 23px;border:1px solid #e2eaf5;border-radius:16px;box-shadow:0 12px 34px rgba(6,33,72,.13);}
#beranda.hero-redesign + .quick>a b{color:#123f79;font-size:14px;}
#beranda.hero-redesign + .quick>a span{color:#536781;font-size:13px;line-height:1.55;}
@media(max-width:950px){
 #beranda.hero-redesign{min-height:0;background-position:center,60% center!important;}
 #beranda.hero-redesign .hero-content{min-height:0;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:25px;padding:40px 0 78px;}
 #beranda.hero-redesign .hero-person{height:400px;border-radius:145px 145px 18px 18px;}
 #beranda.hero-redesign h1{font-size:clamp(38px,5vw,54px);}
 #beranda.hero-redesign .hero-copy>p:not(.eyebrow){font-size:16px;}
}
@media(max-width:650px){
 .topbar .nav{min-height:68px;}
 .brand img{width:42px;height:42px;}
 .brand strong{font-size:15px;}
 .brand span{font-size:10px;}
 #beranda.hero-redesign{background-position:center,58% center!important;}
 #beranda.hero-redesign .hero-content{width:91%;display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:35px 0 68px;}
 #beranda.hero-redesign .hero-copy{order:1;max-width:none;padding:0;}
 #beranda.hero-redesign .hero-person{order:2;align-self:center;width:min(260px,74%);height:365px;max-height:none;border-width:3px;border-radius:140px 140px 18px 18px;}
 #beranda.hero-redesign .hero-nameplate{left:7px;right:7px;bottom:7px;padding:8px 9px;}
 #beranda.hero-redesign .hero-nameplate strong{font-size:11px;}
 #beranda.hero-redesign .hero-nameplate span{font-size:9px;}
 #beranda.hero-redesign .eyebrow{font-size:10px;letter-spacing:1.5px;}
 #beranda.hero-redesign h1{font-size:clamp(38px,10vw,49px);letter-spacing:-.8px;margin-bottom:14px;}
 #beranda.hero-redesign .hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.65;}
 #beranda.hero-redesign .actions{margin-top:20px;gap:9px;}
 #beranda.hero-redesign .btn{font-size:12px;padding:11px 13px;}
 #beranda.hero-redesign .hero-signature{margin-top:22px;}
 #beranda.hero-redesign + .quick{width:91%;grid-template-columns:1fr;margin:16px auto 0;gap:10px;}
 #beranda.hero-redesign + .quick>a{min-height:0;padding:16px 18px;}
}


/* AKSES CEPAT - tautan menuju bagian yang sudah tersedia */
.access-section{padding:58px 0 70px;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);}
.access-heading{text-align:center;margin:0 auto 28px;max-width:760px;}
.access-heading>span{font-size:11px;letter-spacing:2px;font-weight:900;color:#d39c00;}
.access-heading h2{margin:6px 0 8px;font-size:clamp(28px,3vw,38px);line-height:1.15;color:#0a3269;}
.access-heading p{margin:0;color:#5d6f88;font-size:14px;}
.access-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;}
.access-card{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:8px;padding:18px 10px;border:1px solid #e1eaf6;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(13,54,101,.07);color:#123a70;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.access-card:hover{transform:translateY(-4px);border-color:#b9d5f5;box-shadow:0 14px 28px rgba(13,54,101,.12);}
.access-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#eaf3ff;color:#0874c9;font-size:25px;font-weight:700;}
.access-card b{font-size:12px;line-height:1.3;}
.access-card small{font-size:10px;line-height:1.45;color:#667890;}
@media(max-width:1150px){.access-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:650px){.access-section{padding:42px 0 48px;}.access-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.access-card{min-height:132px;padding:15px 10px;}.access-heading h2{font-size:27px;}}


/* RESTORE SEMBOYAN DESA: TANGGUH, INDAH DAN BERSINAR */
#beranda .hero-content{position:relative;}
#beranda .hero-slogan{
  position:absolute;right:0;bottom:22px;z-index:5;
  display:flex;align-items:center;gap:12px;
  width:min(340px,38%);padding:13px 17px;
  color:#123b70;background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.9);border-radius:15px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
}
#beranda .hero-slogan-icon{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#eaf3ff;color:#0874c9;font-size:22px;
}
#beranda .hero-slogan strong,#beranda .hero-slogan small{display:block;}
#beranda .hero-slogan strong{font-size:13px;line-height:1.35;}
#beranda .hero-slogan small{margin-top:3px;color:#64748b;font-size:11px;line-height:1.35;}
@media(max-width:950px){
  #beranda .hero-slogan{right:0;bottom:18px;width:min(340px,48%);}
}
@media(max-width:600px){
  #beranda .hero-slogan{position:relative;right:auto;bottom:auto;width:100%;margin-top:0;padding:12px 14px;grid-column:1/-1;}
  #beranda .hero-slogan strong{font-size:12px;}
  #beranda .hero-slogan small{font-size:10px;}
}


/* FINAL BERANDA POLISH — 19 OKTOBER 2026
   Semboyan ditempatkan di bawah judul; foto kantor ditampilkan utuh di sisi kanan.
   Tidak mengubah database, panel admin, atau bagian lain situs.
*/
#beranda.hero-redesign{
  min-height:650px;
  background-color:#082b58 !important;
  background-image:
    linear-gradient(90deg,rgba(4,26,58,.97) 0%,rgba(5,35,75,.91) 34%,rgba(5,35,75,.70) 58%,rgba(5,35,75,.44) 100%),
    url('uploads/kantor-beranda-penuh.jpg?v=20261019final1') !important;
  background-size:100% 100%,auto 100% !important;
  background-position:center,right center !important;
  background-repeat:no-repeat !important;
}
#beranda.hero-redesign .overlay{
  background:linear-gradient(0deg,rgba(3,22,48,.20),transparent 44%) !important;
}
#beranda.hero-redesign .hero-content{
  min-height:650px;
  grid-template-columns:minmax(245px,310px) minmax(0,640px);
  align-items:center;
  gap:clamp(28px,4vw,64px);
  padding:38px 0 78px;
}
#beranda.hero-redesign .hero-person{
  height:475px;
  align-self:center;
  margin-top:10px;
}
#beranda.hero-redesign .hero-copy{max-width:640px;padding:0;}
#beranda.hero-redesign h1{margin:0 0 14px;font-size:clamp(45px,4.8vw,68px);line-height:1.02;}
#beranda.hero-redesign .hero-slogan{
  position:relative !important;
  inset:auto !important;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  max-width:100%;
  margin:0 0 17px;
  padding:12px 17px;
  color:#fff;
  background:linear-gradient(105deg,rgba(8,49,96,.94),rgba(14,76,133,.90));
  border:1px solid rgba(255,210,62,.75);
  border-left:4px solid #ffc400;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.17);
}
#beranda.hero-redesign .hero-slogan-icon{
  flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:#ffc400;color:#0a3268;font-size:19px;
}
#beranda.hero-redesign .hero-slogan strong{display:block;font-size:clamp(12px,1.15vw,15px);line-height:1.35;color:#fff;}
#beranda.hero-redesign .hero-slogan small{display:block;margin-top:3px;color:#e7f1ff;font-size:11px;line-height:1.35;}
#beranda.hero-redesign .hero-copy>p:not(.eyebrow){max-width:570px;margin:0;font-size:17px;line-height:1.7;}
#beranda.hero-redesign .actions{margin-top:23px;}
#beranda.hero-redesign .hero-signature{margin-top:24px;}
#beranda.hero-redesign + .quick{margin-top:-38px;}
@media(max-width:950px){
  #beranda.hero-redesign{min-height:0;background-size:100% 100%,auto 100% !important;background-position:center,right center !important;}
  #beranda.hero-redesign .hero-content{min-height:0;grid-template-columns:minmax(205px,260px) minmax(0,1fr);gap:25px;padding:42px 0 78px;}
  #beranda.hero-redesign .hero-person{height:390px;}
  #beranda.hero-redesign h1{font-size:clamp(38px,5.2vw,52px);}
  #beranda.hero-redesign .hero-slogan{padding:10px 12px;gap:9px;}
  #beranda.hero-redesign .hero-slogan strong{font-size:12px;}
}
@media(max-width:650px){
  #beranda.hero-redesign{background-size:100% 100%,auto 58% !important;background-position:center,right bottom !important;}
  #beranda.hero-redesign .hero-content{width:91%;display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:34px 0 68px;}
  #beranda.hero-redesign .hero-copy{order:1;max-width:none;}
  #beranda.hero-redesign h1{font-size:clamp(38px,10vw,49px);margin-bottom:12px;}
  #beranda.hero-redesign .hero-slogan{width:100%;margin:0 0 14px;padding:11px 12px;}
  #beranda.hero-redesign .hero-slogan strong{font-size:12px;}
  #beranda.hero-redesign .hero-slogan small{font-size:10px;}
  #beranda.hero-redesign .hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.65;}
  #beranda.hero-redesign .hero-person{order:2;align-self:center;width:min(260px,74%);height:365px;max-height:none;margin:0;}
  #beranda.hero-redesign .hero-signature{margin-top:20px;}
  #beranda.hero-redesign + .quick{width:91%;grid-template-columns:1fr;margin:16px auto 0;gap:10px;}
  #beranda.hero-redesign + .quick>a{min-height:0;padding:16px 18px;}
}
@media(min-width:951px){#beranda.hero-redesign h1{max-width:500px;}}


/* DATA KEPENDUDUKAN - tambahan terpisah, tidak mengubah desain beranda */
.population-section{padding:54px 0 58px;background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%);}
.population-heading{text-align:center;max-width:760px;margin:0 auto 26px;}
.population-heading>span{display:block;color:#d49b00;font-size:11px;font-weight:900;letter-spacing:2px;}
.population-heading h2{margin:6px 0 8px;color:#123e7a;font-size:clamp(25px,2.5vw,34px);line-height:1.2;}
.population-heading p{margin:0;color:#60718a;font-size:13px;}
.population-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:980px;margin:0 auto;}
.population-card{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px 14px;text-align:center;background:#fff;border:1px solid #dce8f8;border-top:3px solid #ffc400;border-radius:14px;box-shadow:0 10px 28px rgba(14,43,79,.07);}
.population-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#edf5ff;font-size:21px;}
.population-card>strong{color:#123e7a;font-size:clamp(24px,2.5vw,32px);line-height:1.15;font-weight:900;}
.population-label{color:#243e68;font-size:13px;font-weight:700;}
.population-updated{margin:14px 0 0;text-align:center;color:#718096;font-size:11px;}
@media(max-width:700px){.population-section{padding:38px 0 42px;}.population-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.population-card{min-height:130px;padding:15px 10px;}.population-heading h2{font-size:25px;}}


/* APBDes ringkasan: tambahan terarah, tidak mengubah gaya beranda/hero yang sudah ada. */
.apbdes-public{padding:54px 0 58px;background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%);}
.apbdes-public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:0 auto;}
.apbdes-public-card{padding:22px 24px;background:#fff;border:1px solid #dce8f8;border-radius:14px;box-shadow:0 10px 28px rgba(14,43,79,.07);}
.apbdes-public-card>span{display:block;color:#123e7a;font-size:14px;font-weight:800;margin-bottom:12px;}
.apbdes-public-card>strong{display:block;color:#123e7a;font-size:clamp(19px,2vw,26px);line-height:1.25;overflow-wrap:anywhere;}
.apbdes-public-card>small{display:block;color:#718096;font-size:12px;margin-top:5px;}
.apbdes-public-card>p{margin:14px 0 0;color:#536780;font-size:13px;}
.apbdes-public-card>p b{color:#123e7a;}
.apbdes-public-note{text-align:center;color:#60718a;font-size:13px;margin:18px 0 0;}
.apbdes-public-action{text-align:center;margin-top:22px;}
@media(max-width:700px){.apbdes-public{padding:38px 0 42px;}.apbdes-public-grid{grid-template-columns:1fr;gap:10px;}.apbdes-public-card{padding:18px 20px;}}


/* Sejarah Desa - desain editorial biru, putih, dan emas; tidak mengubah bagian lain website */
.history-section{padding:44px 0 64px;background:linear-gradient(180deg,#f3f7fd 0%,#fff 100%);scroll-margin-top:90px;}
.history-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:330px;max-width:1120px;margin:0 auto 28px;padding:42px 48px;overflow:hidden;border-radius:24px;background:#0d2c54;box-shadow:0 18px 42px rgba(14,43,79,.18);}
.history-hero:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(5,25,52,.97) 0%,rgba(9,42,82,.91) 48%,rgba(9,42,82,.42) 100%),var(--history-image);background-size:cover;background-position:center 48%;transform:scale(1.015);}
.history-hero:after{content:"";position:absolute;z-index:-1;right:-85px;top:-130px;width:390px;height:390px;border:1px solid rgba(255,197,50,.38);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.025);}
.history-hero-copy{max-width:650px;color:#fff;}
.history-kicker{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:#ffd34d;font-size:11px;font-weight:900;letter-spacing:2px;}
.history-kicker span{display:inline-block;width:28px;height:3px;border-radius:4px;background:#ffc629;}
.history-breadcrumb{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:#d8e5f7;font-size:12px;}
.history-breadcrumb a{color:#fff;text-decoration:none;}
.history-breadcrumb span{color:#ffd34d;font-size:18px;}
.history-hero h2{margin:0;color:#fff;font-size:clamp(30px,4.5vw,48px);font-weight:900;line-height:1.1;letter-spacing:-.8px;}
.history-hero h2 em{color:#ffd04a;font-style:normal;}
.history-lead{max-width:550px;margin:16px 0 22px;color:#e0eaf7;font-size:15px;line-height:1.8;}
.history-hero-link{display:inline-flex;align-items:center;gap:16px;padding:11px 16px;border:1px solid rgba(255,255,255,.55);border-radius:10px;color:#fff;text-decoration:none;font-size:13px;font-weight:800;transition:background .2s,border-color .2s;}
.history-hero-link:hover{background:#ffc629;border-color:#ffc629;color:#0d2c54;}
.history-hero-link span{color:#ffd04a;font-size:18px;line-height:1;}
.history-hero-link:hover span{color:#0d2c54;}
.history-hero-caption{position:absolute;right:24px;bottom:22px;display:flex;align-items:center;gap:11px;max-width:290px;padding:12px 16px;border:1px solid rgba(255,255,255,.55);border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(0,0,0,.16);color:#123e7a;}
.history-caption-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#fff3c7;color:#123e7a;font-size:22px;}
.history-hero-caption strong,.history-hero-caption small{display:block;}
.history-hero-caption strong{font-size:12px;font-weight:900;}
.history-hero-caption small{margin-top:3px;color:#64748b;font-size:10px;}
.history-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;max-width:1000px;margin:0 auto;padding:34px 38px;background:#fff;border:1px solid #dce8f8;border-radius:20px;box-shadow:0 12px 34px rgba(14,43,79,.08);scroll-margin-top:100px;}
.history-icon{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;border:1px solid #dce9fa;border-radius:18px;background:linear-gradient(145deg,#edf5ff,#fff);box-shadow:0 6px 16px rgba(14,43,79,.07);font-size:29px;}
.history-content .eyebrow{margin:0 0 8px;color:#c28b00;font-size:11px;font-weight:900;letter-spacing:1.8px;}
.history-content h2{margin:0 0 15px;color:#123e7a;font-size:clamp(23px,3vw,31px);line-height:1.25;}
.history-accent-line{width:76px;height:4px;margin:0 0 20px;border-radius:4px;background:linear-gradient(90deg,#ffc629 0 62%,#dce8f8 62% 100%);}
.history-text{color:#344963;font-size:15px;line-height:1.95;white-space:normal;overflow-wrap:anywhere;}
.history-empty{margin:0;color:#60718a;font-size:14px;line-height:1.8;}
.history-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px;padding-top:19px;border-top:1px solid #edf2f8;}
.history-tags span{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid #dce8f8;border-radius:999px;background:#f6f9fe;color:#345474;font-size:11px;font-weight:800;}
@media(max-width:760px){.history-section{padding:30px 0 42px;}.history-hero{min-height:360px;padding:28px 23px 100px;border-radius:18px;margin-bottom:18px;}.history-hero:before{background-image:linear-gradient(90deg,rgba(5,25,52,.95),rgba(9,42,82,.78)),var(--history-image);background-position:center;}.history-hero h2{font-size:clamp(29px,8vw,40px);}.history-lead{font-size:14px;line-height:1.7;}.history-hero-caption{right:14px;bottom:14px;left:14px;max-width:none;padding:9px 12px;}.history-card{grid-template-columns:1fr;gap:14px;padding:23px 19px;border-radius:17px;}.history-icon{width:52px;height:52px;font-size:25px;border-radius:14px;}.history-text{font-size:14px;line-height:1.85;}.history-tags{margin-top:20px;padding-top:15px;}}
@media(prefers-reduced-motion:reduce){.history-hero-link{transition:none;}}


/* PENYEMPURNAAN MENU NAVIGASI — tidak mengubah bagian visual halaman lainnya */
.topbar nav .nav-dropdown{position:relative;display:block}
.topbar nav .nav-dropdown>summary{list-style:none;cursor:pointer;white-space:nowrap;font-size:13px;color:inherit;display:flex;align-items:center;gap:6px;transition:color .18s ease}
.topbar nav .nav-dropdown>summary::-webkit-details-marker{display:none}
.topbar nav .nav-dropdown>summary:hover,.topbar nav .nav-dropdown[open]>summary{color:#0875cf}
.topbar nav .nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:220px;max-width:290px;padding:8px;background:#fff;border:1px solid rgba(18,49,88,.10);border-radius:12px;box-shadow:0 14px 34px rgba(10,32,66,.16);display:flex;flex-direction:column;gap:2px;z-index:100}
.topbar nav .nav-dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;white-space:normal;font-size:13px;line-height:1.4;color:#17345b;text-decoration:none}
.topbar nav .nav-dropdown-menu a:hover,.topbar nav .nav-dropdown-menu a:focus{background:#edf5ff;color:#0875cf}
@media(max-width:980px){
 .topbar nav .nav-dropdown{width:100%}
 .topbar nav .nav-dropdown>summary{padding:10px 0;font-size:15px;justify-content:space-between}
 .topbar nav .nav-dropdown-menu{position:static;min-width:0;max-width:none;width:100%;margin:0 0 8px;padding:6px 8px;border-radius:8px;box-shadow:none;background:rgba(8,117,207,.045)}
 .topbar nav .nav-dropdown-menu a{padding:9px 12px}
}


/* INFO DESA berjalan — tambahan terisolasi agar tidak mengubah desain bagian lain */
.desa-info-ticker {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
  background: #1768a8;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(8,55,100,.22);
  position: relative;
  z-index: 5;
}
.desa-info-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: #07599a;
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  box-shadow: 4px 0 12px rgba(0,0,0,.12);
  position: relative;
  z-index: 2;
}
.desa-info-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.desa-info-marquee {
  display: flex;
  width: max-content;
  flex: 0 0 auto;
  align-items: center;
  animation: nangaSayanInfoScroll 32s linear infinite;
  will-change: transform;
}
.desa-info-marquee span {
  flex: 0 0 auto;
  padding: 0 38px;
  color: #fff;
  font-size: .94rem;
  font-weight: 600;
  white-space: nowrap;
}
.desa-info-ticker:hover .desa-info-marquee {
  animation-play-state: paused;
}
@keyframes nangaSayanInfoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .desa-info-ticker { min-height: 40px; }
  .desa-info-label { padding: 0 10px; font-size: .78rem; gap: 5px; }
  .desa-info-marquee span { font-size: .8rem; padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .desa-info-marquee { animation: none; }
  .desa-info-marquee span:nth-child(2) { display: none; }
}