:root{--orange:#E8751A;--orange-dark:#B94D12;--navy:#173B57;--navy-2:#0F2D43;--ink:#263238;--muted:#607D8B;--surface:#F5F7FA;--white:#FFF;--border:#E2E8F0;--shadow:0 18px 50px rgba(23,59,87,.12);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%}.text-orange{color:var(--orange)!important}.text-navy{color:var(--navy)!important}.bg-soft{background:var(--surface)}.section-space{padding:84px 0}.section-title{font-weight:800;color:var(--navy);letter-spacing:-.02em}.section-kicker{color:var(--orange-dark);font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.section-desc{color:var(--muted);max-width:720px}
.topbar{background:var(--navy-2);color:#dce8ef;font-size:.84rem}.topbar a:hover{color:#fff}.site-brand-logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:white;display:grid;place-items:center;font-weight:900;box-shadow:0 8px 20px rgba(232,117,26,.28)}.site-navbar{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:0 4px 22px rgba(23,59,87,.08)}.site-navbar .nav-link{color:var(--navy);font-weight:650;padding:1.4rem .7rem!important}.site-navbar .nav-link:hover,.site-navbar .nav-link.active{color:var(--orange-dark)}.dropdown-menu{border:0;border-radius:14px;box-shadow:var(--shadow);padding:.6rem}.dropdown-item{border-radius:9px;padding:.65rem .8rem}.dropdown-item:hover{background:#fff3e8;color:var(--orange-dark)}
.btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:white;border:0}.btn-orange:hover{color:white;transform:translateY(-1px);box-shadow:0 10px 24px rgba(232,117,26,.25)}.btn-navy{background:var(--navy);color:white;border:0}.btn-navy:hover{background:var(--navy-2);color:white}.btn-soft{background:#FFF3E8;color:var(--orange-dark);border:0}.btn-soft:hover{background:#FFE4CC;color:var(--orange-dark)}.btn{border-radius:12px;font-weight:700;padding:.72rem 1.1rem;transition:.2s ease}
.hero{min-height:680px;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(105deg,rgba(15,45,67,.97),rgba(23,59,87,.88) 52%,rgba(185,77,18,.7)),url('../images/source/peta-wilayah.png') center/cover;color:white}.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 25%,rgba(255,255,255,.10) 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,rgba(232,117,26,.18) 0 2px,transparent 3px);background-size:42px 42px,64px 64px}.hero-content{position:relative;z-index:2}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);padding:.55rem .8rem;border-radius:999px;font-size:.82rem}.hero h1{font-size:clamp(2.5rem,5vw,5rem);line-height:1.06;font-weight:900;letter-spacing:-.04em}.hero p{color:#e8f0f4;font-size:1.1rem;max-width:680px}.hero-panel{background:rgba(255,255,255,.95);color:var(--ink);border:1px solid rgba(255,255,255,.4);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.26);padding:1.4rem}.access-card{display:flex;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--border);border-radius:16px;transition:.2s}.access-card:hover{transform:translateY(-3px);border-color:#f6b37e;box-shadow:0 12px 30px rgba(23,59,87,.12)}.access-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;background:#fff3e8;color:var(--orange-dark);font-size:1.1rem}
.stats-strip{margin-top:-56px;position:relative;z-index:3}.stats-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);border:1px solid #edf1f5;padding:1rem}.stat-item{text-align:center;padding:1rem .5rem;border-right:1px solid var(--border)}.stat-item:last-child{border-right:0}.stat-value{font-weight:900;color:var(--navy);font-size:1.55rem}.stat-label{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.soft-card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 10px 35px rgba(23,59,87,.07);transition:.25s ease;overflow:hidden}.soft-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.icon-box{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#fff2e5,#ffe0c5);color:var(--orange-dark);font-size:1.35rem}.service-card{height:100%;padding:1.35rem}.service-card h3{font-size:1.05rem;font-weight:800;color:var(--navy)}.service-card p{color:var(--muted);font-size:.9rem}.head-photo{width:100%;max-height:520px;object-fit:cover;object-position:center 18%;border-radius:22px;box-shadow:var(--shadow)}.quote-mark{font-size:5rem;color:#ffe0c5;line-height:.6;font-family:Georgia,serif}
.news-image,.product-image{height:215px;width:100%;object-fit:cover;background:linear-gradient(135deg,#eaf1f5,#fff3e8)}.image-placeholder{height:215px;display:grid;place-items:center;background:linear-gradient(135deg,#edf4f8,#fff1e4);color:var(--navy);font-size:3rem}.card-badge{display:inline-block;font-size:.72rem;font-weight:800;padding:.38rem .58rem;border-radius:999px;background:#fff2e5;color:var(--orange-dark)}.news-card h3,.product-card h3{color:var(--navy);font-size:1.05rem;font-weight:800;line-height:1.45}.news-meta{color:#78909c;font-size:.78rem}.product-price{font-size:1.1rem;color:var(--orange-dark);font-weight:900}.potential-card{position:relative;padding:1.4rem;min-height:220px;background:linear-gradient(145deg,var(--navy),#225679);color:white;border-radius:20px;overflow:hidden}.potential-card::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-55px;bottom:-60px;background:rgba(232,117,26,.35)}.potential-card .icon-box{background:rgba(255,255,255,.12);color:#ffd4b2}.potential-card p{color:#d9e8ef}.map-frame{min-height:460px;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}#villageMap,#contactMap{min-height:460px}
.page-hero{padding:80px 0 64px;background:linear-gradient(135deg,var(--navy-2),var(--navy));color:white;position:relative;overflow:hidden}.page-hero::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(232,117,26,.22);right:-100px;top:-130px}.page-hero h1{font-weight:900;letter-spacing:-.03em}.breadcrumb{--bs-breadcrumb-divider-color:#aac0ce;--bs-breadcrumb-item-active-color:#ffd0ad}.breadcrumb a{color:#d9e8ef}.org-chart{display:flex;flex-direction:column;align-items:center;min-width:980px;padding:2rem}.org-level{display:flex;justify-content:center;gap:1rem;width:100%;position:relative;margin-bottom:2rem}.org-node{width:180px;background:white;border:1px solid var(--border);border-top:4px solid var(--orange);border-radius:16px;padding:1rem;text-align:center;box-shadow:0 8px 24px rgba(23,59,87,.08)}.org-node img{width:64px;height:64px;object-fit:cover;border-radius:50%;margin-bottom:.7rem}.org-node strong{display:block;color:var(--navy);font-size:.9rem}.org-node span{font-size:.77rem;color:var(--muted)}.org-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:20px;background:#f8fafc}.table-modern{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;border:1px solid var(--border)}.table-modern thead th{background:var(--navy);color:white;border:0;padding:.9rem;font-size:.82rem}.table-modern tbody td{padding:.8rem .9rem;vertical-align:middle;border-color:#edf1f5}.kpi-mini{padding:1rem;border-radius:16px;background:#fff;border:1px solid var(--border)}.kpi-mini strong{font-size:1.4rem;color:var(--navy)}
.footer{background:var(--navy-2);color:#cfe0e8;padding:64px 0 24px}.footer h5{color:white;font-weight:800}.footer a:hover{color:#ffbd8b}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;font-size:.85rem}.floating-wa{position:fixed;right:22px;bottom:22px;z-index:1000;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:white;font-size:1.5rem;box-shadow:0 10px 28px rgba(37,211,102,.35)}.floating-wa:hover{color:white;transform:scale(1.05)}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f6f8fa}.auth-visual{padding:4rem;background:linear-gradient(135deg,rgba(15,45,67,.98),rgba(23,59,87,.88)),url('../images/source/peta-wilayah.png') center/cover;color:white;display:flex;flex-direction:column;justify-content:space-between}.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:2rem}.auth-card{width:100%;max-width:520px;background:white;border-radius:24px;box-shadow:var(--shadow);padding:2rem}.form-control,.form-select{border-radius:12px;border-color:#dce3e8;padding:.75rem .9rem}.form-control:focus,.form-select:focus{border-color:#ee9a58;box-shadow:0 0 0 .22rem rgba(232,117,26,.14)}.form-label{font-weight:700;color:var(--navy);font-size:.88rem}.user-layout{min-height:100vh;background:#f4f7f9}.user-topbar{background:white;border-bottom:1px solid var(--border)}.status-badge{display:inline-block;padding:.35rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:capitalize}.status-diajukan{background:#e8f4ff;color:#1160a4}.status-diverifikasi{background:#e9f7ef;color:#146c43}.status-diproses{background:#fff3cd;color:#8a6700}.status-perlu_diperbaiki{background:#ffe5d0;color:#a94700}.status-selesai{background:#d1e7dd;color:#0f5132}.status-ditolak{background:#f8d7da;color:#842029}
.admin-body{min-height:100vh;background:#f3f6f8}.admin-sidebar{position:fixed;inset:0 auto 0 0;width:275px;background:var(--navy-2);color:#d9e7ed;z-index:1040;overflow-y:auto}.admin-brand{padding:1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.admin-nav{padding:1rem}.admin-nav .nav-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:#7899aa;margin:1.2rem .75rem .45rem;font-weight:800}.admin-nav a{display:flex;align-items:center;gap:.8rem;color:#d4e2e9;padding:.72rem .8rem;border-radius:11px;margin-bottom:.25rem;font-size:.9rem}.admin-nav a:hover,.admin-nav a.active{background:rgba(232,117,26,.18);color:#ffca9f}.admin-nav i{width:20px;text-align:center}.admin-main{margin-left:275px;min-height:100vh}.admin-topbar{height:72px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:1030}.admin-content{padding:1.5rem}.admin-kpi{background:white;border:1px solid var(--border);border-radius:18px;padding:1.2rem;height:100%;box-shadow:0 8px 24px rgba(23,59,87,.05)}.admin-kpi .icon{width:48px;height:48px;border-radius:14px;background:#fff1e5;color:var(--orange-dark);display:grid;place-items:center}.admin-kpi .value{font-size:1.7rem;font-weight:900;color:var(--navy)}.admin-card{background:white;border:1px solid var(--border);border-radius:18px;padding:1.25rem;box-shadow:0 8px 24px rgba(23,59,87,.05)}.admin-page-title{font-weight:900;color:var(--navy)}.sidebar-toggle{display:none}
@media(max-width:991.98px){.section-space{padding:62px 0}.hero{min-height:auto;padding:90px 0}.hero-panel{margin-top:2rem}.site-navbar .nav-link{padding:.75rem .4rem!important}.stats-strip{margin-top:-30px}.stat-item{border-right:0;border-bottom:1px solid var(--border)}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.admin-sidebar{transform:translateX(-100%);transition:.25s ease}.admin-sidebar.show{transform:translateX(0)}.admin-main{margin-left:0}.sidebar-toggle{display:inline-flex}}
@media(max-width:575.98px){.hero h1{font-size:2.55rem}.hero .btn{width:100%}.stats-card{padding:.4rem}.stat-item{padding:.75rem .25rem}.stat-value{font-size:1.25rem}.auth-card{padding:1.25rem}.admin-content{padding:1rem}}

/* Utility button variants used by the citizen dashboard. */
.btn-outline-navy{border:1px solid var(--navy);color:var(--navy);background:#fff}.btn-outline-navy:hover{background:var(--navy);color:#fff}.btn-outline-orange{border:1px solid var(--orange);color:var(--orange-dark);background:#fff}.btn-outline-orange:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.site-brand-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* =========================================================
   FINAL HEADER IDENTITAS DESA TEGALMAJA
   Logo dapat diganti dari Admin > Pengaturan Website.
========================================================= */
.village-identity-header{
    position:relative;
    width:100%;
    padding:20px 0;
    overflow:hidden;
    background:radial-gradient(circle at right center,rgba(232,117,26,.12),transparent 36%),linear-gradient(135deg,#fff 0%,#fffaf6 55%,#fff3e8 100%);
    border-bottom:4px solid var(--orange);
    box-shadow:0 5px 20px rgba(23,59,87,.08)
}
.village-identity-link{display:flex;align-items:center;gap:22px;width:100%;min-width:0;color:inherit;text-decoration:none}
.village-identity-link:hover{color:inherit}
.village-header-logo{display:flex;align-items:center;justify-content:center;width:88px;height:88px;flex:0 0 88px;padding:6px;overflow:hidden;background:#fff;border:2px solid rgba(232,117,26,.25);border-radius:12px;box-shadow:0 8px 22px rgba(23,59,87,.14);transition:transform .3s ease,box-shadow .3s ease}
.village-header-logo img{display:block;width:100%;height:100%;object-fit:contain}
.village-identity-link:hover .village-header-logo{transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,59,87,.2)}
.village-header-content{flex:1;min-width:0;overflow:hidden}
.village-title-marquee{position:relative;width:100%;max-width:900px;overflow:hidden;white-space:nowrap;padding:3px 0 5px}
.village-title-marquee::before,.village-title-marquee::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:42px;pointer-events:none}
.village-title-marquee::before{left:0;background:linear-gradient(to right,#fffaf6,rgba(255,250,246,0))}
.village-title-marquee::after{right:0;background:linear-gradient(to left,#fff5ec,rgba(255,245,236,0))}
.village-title-moving{display:inline-block;min-width:max-content;padding-left:100%;color:var(--navy);font-size:clamp(1.5rem,3vw,2.15rem);font-weight:900;line-height:1.2;letter-spacing:.5px;text-transform:uppercase;animation:villageTitleScroll 24s linear infinite}
@keyframes villageTitleScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.village-title-marquee:hover .village-title-moving{animation-play-state:paused}
.village-header-subtitle{display:inline-flex;align-items:center;margin-top:8px;padding:7px 14px;color:#5f6871;background:rgba(232,117,26,.1);border-left:4px solid var(--orange);border-radius:0 8px 8px 0;font-size:1rem;font-weight:600;letter-spacing:.1px}
.village-header-subtitle::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;flex-shrink:0;background:var(--orange);border-radius:50%}

/* Navbar formal oranye. */
.site-navbar{min-height:58px;background:linear-gradient(90deg,var(--orange-dark) 0%,#d96816 48%,var(--orange) 100%);border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 4px 15px rgba(23,59,87,.15);backdrop-filter:none}
.site-navbar .navbar-nav{gap:2px}
.site-navbar .nav-link{position:relative;padding:18px 14px!important;color:rgba(255,255,255,.94);font-size:.95rem;font-weight:600;transition:color .25s ease,background-color .25s ease}
.site-navbar .nav-link:hover,.site-navbar .nav-link:focus,.site-navbar .nav-link.active{color:#fff;background:rgba(23,59,87,.2)}
.site-navbar .nav-link.active::after{content:"";position:absolute;right:14px;bottom:9px;left:14px;height:3px;background:#fff;border-radius:999px}
.site-navbar .dropdown-menu{padding:8px;border:0;border-top:4px solid var(--orange);border-radius:0 0 10px 10px;box-shadow:0 12px 30px rgba(23,59,87,.18)}
.site-navbar .dropdown-item{padding:10px 14px;color:var(--ink);border-radius:7px;font-size:.92rem;font-weight:500}
.site-navbar .dropdown-item:hover,.site-navbar .dropdown-item:focus{color:var(--orange-dark);background:#fff2e8}
.site-navbar .navbar-toggler{padding:7px 9px;background:#fff;box-shadow:none}
.mobile-navbar-logo{width:39px;height:39px;object-fit:contain;padding:2px;background:#fff;border-radius:6px}
.mobile-navbar-title{color:#fff;font-size:1rem;font-weight:800}

/* Logo upload pada halaman pengaturan admin. */
.logo-setting-panel{display:flex;align-items:center;gap:1.5rem;padding:1.25rem;background:#f8fafc;border:1px solid var(--border);border-radius:16px}
.logo-preview-box{display:flex;align-items:center;justify-content:center;width:132px;height:132px;flex:0 0 132px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:0 8px 22px rgba(23,59,87,.08)}
.logo-preview-box img{width:100%;height:100%;object-fit:contain}

@media(max-width:991.98px){
    .village-identity-header{padding:16px 0}
    .village-header-logo{width:72px;height:72px;flex-basis:72px}
    .village-title-moving{font-size:1.45rem;animation-duration:21s}
    .village-header-subtitle{padding:6px 11px;font-size:.9rem}
    .site-navbar .navbar-collapse{margin-top:5px;padding:8px 0 15px;border-top:1px solid rgba(255,255,255,.18)}
    .site-navbar .navbar-nav{align-items:stretch!important}
    .site-navbar .nav-link{padding:11px 13px!important;border-radius:7px}
    .site-navbar .nav-link.active::after{display:none}
    .site-navbar .dropdown-menu{margin:4px 10px;border-top:0;border-radius:8px;box-shadow:none}
}
@media(max-width:575.98px){
    .village-identity-header{padding:12px 0}
    .village-identity-link{gap:12px}
    .village-header-logo{width:58px;height:58px;flex-basis:58px;padding:4px;border-radius:9px}
    .village-title-moving{font-size:1.03rem;animation-duration:18s}
    .village-header-subtitle{display:block;width:fit-content;max-width:100%;margin-top:4px;padding:4px 8px;overflow:hidden;font-size:.73rem;white-space:nowrap;text-overflow:ellipsis;border-left-width:3px}
    .village-header-subtitle::before{display:none}
    .logo-setting-panel{align-items:flex-start;flex-direction:column}
    .logo-preview-box{width:112px;height:112px;flex-basis:112px}
}
@media(prefers-reduced-motion:reduce){
    .village-title-moving{padding-left:0;white-space:normal;animation:none}
}

/* =========================================================
   REVISI UI/UX 2026: HEADER, HOME RINGKAS, E-BOOK, AGEN BPS
========================================================= */
.typing-title-wrapper{display:flex;align-items:center;min-height:48px;overflow:hidden}.typing-title{display:inline-flex;align-items:center;max-width:100%;color:var(--navy);font-size:clamp(1.45rem,3vw,2.15rem);font-weight:900;line-height:1.2;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}.typing-title::after{content:"";display:inline-block;width:3px;height:1em;margin-left:5px;background:var(--orange);border-radius:3px;animation:typingCursorBlink .75s steps(1) infinite}@keyframes typingCursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.home-hero-compact{min-height:540px;padding:76px 0}.home-hero-compact h1{font-size:clamp(2.25rem,4.8vw,4.4rem)}.home-section-compact{padding:64px 0}.compact-access-panel{padding:1.25rem}.quick-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.quick-access-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;min-height:104px;padding:1rem;text-align:center;background:#f8fafc;border:1px solid var(--border);border-radius:15px;color:var(--navy);font-weight:800;transition:.2s}.quick-access-item i{font-size:1.35rem;color:var(--orange-dark)}.quick-access-item:hover{transform:translateY(-3px);background:#fff3e8;border-color:#f4b27c;color:var(--navy)}.video-card iframe{border:0}.ebook-home-item{display:flex;align-items:center;gap:1rem;overflow:visible}.ebook-home-item:hover{transform:translateY(-2px)}.ebook-mini-cover{width:52px;height:68px;flex:0 0 52px;display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(145deg,var(--navy),#2b6488);border-radius:8px}.ebook-mini-cover img{width:100%;height:100%;object-fit:cover}
.mobile-dashboard-link{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.ebook-card{display:flex;flex-direction:column}.ebook-cover{height:300px;padding:16px;background:linear-gradient(145deg,#eaf1f5,#fff0e3)}.ebook-cover img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 12px 25px rgba(23,59,87,.2)}.ebook-cover-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;background:linear-gradient(145deg,var(--navy),#2d668b);border-radius:10px;font-size:2.2rem;font-weight:900;letter-spacing:.18em}.ebook-cover-placeholder span{font-size:.72rem}
.bps-structure{position:relative}.bps-chair-row{display:flex;justify-content:center}.bps-connector{width:2px;height:60px;margin:0 auto;background:linear-gradient(var(--orange),#cfdae1)}.bps-members-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.bps-members-row::before{content:"";position:absolute;top:-1px;left:12.5%;right:12.5%;height:2px;background:#cfdae1}.bps-person-card{position:relative;padding:24px 18px;text-align:center;background:#fff;border:1px solid var(--border);border-top:4px solid var(--orange);border-radius:18px;box-shadow:0 10px 28px rgba(23,59,87,.08)}.bps-members-row .bps-person-card::before{content:"";position:absolute;top:-20px;left:50%;width:2px;height:20px;background:#cfdae1}.bps-chair-card{width:min(360px,100%);border-top-width:5px}.bps-photo{width:96px;height:96px;margin:0 auto 14px;display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(145deg,var(--navy),#2d668b);border:4px solid #fff;border-radius:50%;box-shadow:0 8px 22px rgba(23,59,87,.2);font-size:2rem}.bps-photo img{width:100%;height:100%;object-fit:cover}.bps-person-card h2,.bps-person-card h3{margin:.6rem 0 .3rem;color:var(--navy);font-size:1.05rem;font-weight:900}.bps-chair-card h2{font-size:1.3rem}.bps-person-card p,.bps-person-card small{color:var(--muted)}.bps-role-badge,.bps-member-number{display:inline-block;padding:.35rem .65rem;color:var(--orange-dark);background:#fff0e3;border-radius:999px;font-size:.72rem;font-weight:800}.empty-card{opacity:.78;border-style:dashed}

@media(max-width:1199.98px){.site-navbar .navbar-nav{padding:.5rem 0}.site-navbar .nav-link{padding:11px 13px!important;border-radius:8px}.site-navbar .nav-link.active::after{display:none}}
@media(max-width:991.98px){.village-identity-header{padding:14px 0}.village-header-logo{width:68px;height:68px;flex-basis:68px}.typing-title-wrapper{min-height:36px}.typing-title{font-size:1.35rem}.village-header-subtitle{font-size:.86rem;padding:5px 9px}.home-hero-compact{min-height:auto;padding:64px 0}.home-section-compact{padding:52px 0}.bps-members-row{grid-template-columns:repeat(2,minmax(0,1fr))}.bps-members-row::before{display:none}.bps-members-row .bps-person-card::before{display:none}.bps-connector{height:36px}.ebook-cover{height:270px}}
@media(max-width:575.98px){.village-identity-header{padding:10px 0}.village-identity-link{gap:10px}.village-header-logo{width:54px;height:54px;flex-basis:54px;padding:3px}.typing-title-wrapper{min-height:28px}.typing-title{font-size:.91rem;white-space:normal}.typing-title::after{width:2px}.village-header-subtitle{display:block;width:fit-content;max-width:100%;margin-top:3px;padding:3px 7px;overflow:hidden;font-size:.68rem;white-space:nowrap;text-overflow:ellipsis}.village-header-subtitle::before{display:none}.home-hero-compact{padding:48px 0}.home-hero-compact h1{font-size:2.15rem}.home-hero-compact p{font-size:.98rem}.home-section-compact{padding:42px 0}.quick-access-grid{gap:.55rem}.quick-access-item{min-height:88px;padding:.7rem;font-size:.84rem}.stats-strip{margin-top:-20px}.stats-card .row{--bs-gutter-x:0}.stat-item{min-height:78px;display:flex;flex-direction:column;justify-content:center}.service-card{padding:1rem}.news-image,.product-image,.image-placeholder{height:185px}.ebook-cover{height:240px}.bps-members-row{grid-template-columns:1fr}.bps-person-card{padding:20px 16px}.floating-wa{right:14px;bottom:14px;width:52px;height:52px}.section-title.h1{font-size:1.65rem}}

/* =========================================================
   UI/UX REVISION — ADMIN & PUBLIC PORTAL
   Keeps all existing features while simplifying navigation.
========================================================= */
:root{
    --admin-sidebar-width:280px;
    --admin-bg:#f4f6f8;
    --admin-sidebar:#102f46;
    --admin-sidebar-soft:#173f5c;
    --admin-border:#e5eaf0;
    --admin-text:#20313d;
    --admin-muted:#71808c;
    --soft-shadow:0 10px 30px rgba(15,45,67,.07);
}

/* Global refinements */
body{color:#283640;background:#fff}
.form-control,.form-select{min-height:46px;border:1px solid #dce3e9;border-radius:10px;padding:.68rem .85rem;background-color:#fff}
textarea.form-control{min-height:auto}
.form-control:focus,.form-select:focus{border-color:color-mix(in srgb,var(--orange) 72%,#fff);box-shadow:0 0 0 .2rem rgba(232,117,26,.12)}
.form-label{margin-bottom:.45rem;font-size:.84rem;font-weight:700;color:#294154}
.form-text{font-size:.77rem;color:#7b8994}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:10px;padding:.66rem 1rem;font-size:.88rem;font-weight:700;box-shadow:none!important}
.btn-sm{padding:.46rem .68rem;border-radius:8px;font-size:.8rem}
.alert{border:0;border-radius:12px;box-shadow:0 6px 18px rgba(15,45,67,.05)}
.dropdown-menu{border:1px solid #e8edf1;border-radius:12px;box-shadow:0 16px 42px rgba(15,45,67,.14)}
.dropdown-item{display:flex;align-items:center;gap:.7rem;border-radius:8px;font-size:.86rem}
.dropdown-item i{width:18px;text-align:center}
.pagination{gap:.3rem}.page-link{border:0;border-radius:8px!important;color:var(--navy);font-weight:700}.page-item.active .page-link{background:var(--orange)}

/* Password visibility button */
.password-field{position:relative;width:100%}
.password-field .form-control{padding-right:3rem}
.password-toggle{position:absolute;top:50%;right:.42rem;transform:translateY(-50%);z-index:4;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:#667784;cursor:pointer;transition:.18s ease}
.password-toggle:hover,.password-toggle:focus-visible{background:#eef2f5;color:var(--navy);outline:0}
.password-toggle[aria-pressed="true"]{color:var(--orange-dark);background:#fff1e5}

/* ------------------------- ADMIN ------------------------- */
.admin-body{min-height:100vh;background:var(--admin-bg);color:var(--admin-text)}
.admin-sidebar{position:fixed;inset:0 auto 0 0;width:var(--admin-sidebar-width);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--admin-sidebar) 0%,#0c293d 100%);border-right:1px solid rgba(255,255,255,.05);color:#dce7ed;z-index:1045}
.admin-brand{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.admin-brand-link{min-width:0;display:flex;align-items:center;gap:.75rem;color:#fff}
.admin-brand-link:hover{color:#fff}
.admin-brand-logo{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;padding:5px;overflow:hidden;background:#fff;border-radius:11px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.admin-brand-logo img{width:100%;height:100%;object-fit:contain}
.admin-brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.admin-brand-copy strong{font-size:.95rem;font-weight:800;letter-spacing:.01em}
.admin-brand-copy small{color:#93acba;font-size:.73rem}
.admin-sidebar-close{display:none;width:36px;height:36px;place-items:center;padding:0;border:0;border-radius:9px;color:#c7d8e1;background:rgba(255,255,255,.08)}
.admin-sidebar-caption{padding:18px 20px 6px;color:#7895a5;font-size:.62rem;font-weight:800;letter-spacing:.15em}
.admin-nav{flex:1;overflow-y:auto;padding:5px 12px 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.admin-nav::-webkit-scrollbar{width:5px}.admin-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.admin-nav-link,.admin-nav-parent{width:100%;min-height:44px;display:flex;align-items:center;gap:.72rem;margin:3px 0;padding:9px 10px;border:0;border-radius:10px;color:#c8d8e1;background:transparent;font-size:.84rem;font-weight:650;text-align:left;transition:.16s ease}
.admin-nav-link:hover,.admin-nav-parent:hover{color:#fff;background:rgba(255,255,255,.07)}
.admin-nav-link.active,.admin-nav-parent.active{color:#fff;background:linear-gradient(90deg,rgba(232,117,26,.28),rgba(232,117,26,.08));box-shadow:inset 3px 0 0 var(--orange)}
.admin-nav-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:8px;color:#9fb4bf;background:rgba(255,255,255,.06)}
.admin-nav-link.active .admin-nav-icon,.admin-nav-parent.active .admin-nav-icon{color:#ffd4b4;background:rgba(232,117,26,.17)}
.admin-nav-chevron{font-size:.62rem;transition:transform .2s ease}
.admin-nav-parent[aria-expanded="true"] .admin-nav-chevron{transform:rotate(180deg)}
.admin-nav-children{position:relative;margin:2px 0 7px 14px;padding:3px 0 3px 20px;border-left:1px solid rgba(255,255,255,.11)}
.admin-nav-child{display:flex;align-items:center;gap:.65rem;min-height:38px;margin:2px 0;padding:7px 9px;border-radius:8px;color:#aebfc9;font-size:.79rem;font-weight:550;transition:.16s ease}
.admin-nav-child i{width:16px;text-align:center;font-size:.75rem;color:#7899aa}
.admin-nav-child:hover{color:#fff;background:rgba(255,255,255,.06)}
.admin-nav-child.active{color:#ffd5b5;background:rgba(232,117,26,.13);font-weight:700}
.admin-nav-child.active i{color:#ffba86}
.admin-sidebar-footer{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.admin-preview-link{display:flex;align-items:center;gap:.75rem;padding:11px;border:1px solid rgba(255,255,255,.1);border-radius:11px;color:#dce8ee;background:rgba(255,255,255,.04)}
.admin-preview-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.admin-preview-link>i{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:#ffcca5;background:rgba(232,117,26,.16)}
.admin-preview-link span{display:flex;flex-direction:column;line-height:1.25}.admin-preview-link strong{font-size:.8rem}.admin-preview-link small{color:#8fa8b6;font-size:.68rem}
.admin-sidebar-overlay{display:none}
.admin-main{min-height:100vh;margin-left:var(--admin-sidebar-width)}
.admin-topbar{position:sticky;top:0;z-index:1035;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--admin-border);backdrop-filter:blur(12px)}
.admin-topbar-start{display:flex;align-items:center;gap:.8rem;min-width:0}
.admin-menu-button{display:none;width:42px;height:42px;padding:0;color:var(--navy);background:#f1f4f6;border:1px solid #e4e9ed}
.admin-page-heading{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.admin-page-heading strong{overflow:hidden;color:var(--navy);font-size:1.02rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.admin-page-eyebrow{color:#89959e;font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.admin-website-button{height:40px;padding:.55rem .8rem;color:var(--navy);background:#fff;border:1px solid #dfe5e9}
.admin-website-button:hover{color:var(--orange-dark);border-color:#f3b487;background:#fff8f2}
.admin-user-button{min-height:46px;display:flex;align-items:center;gap:.65rem;padding:5px 8px 5px 5px;border:1px solid #e2e7eb;border-radius:12px;color:var(--admin-text);background:#fff}
.admin-user-button:hover{background:#f8fafb}
.admin-user-avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-dark));font-size:.82rem;font-weight:900}
.admin-user-copy{max-width:150px;flex-direction:column;text-align:left;line-height:1.18}.admin-user-copy strong,.admin-user-copy small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.admin-user-copy strong{color:#273946;font-size:.78rem}.admin-user-copy small{color:#89959e;font-size:.66rem}
.admin-user-menu{min-width:245px;padding:.5rem}
.admin-content{max-width:1680px;margin:0 auto;padding:24px}
.admin-page-title{color:#173b57;font-size:1.55rem!important;font-weight:850;letter-spacing:-.025em}
.admin-content>.mb-4 p,.admin-content>div>.text-secondary{font-size:.88rem}
.admin-card{overflow:hidden;padding:22px;background:#fff;border:1px solid var(--admin-border);border-radius:15px;box-shadow:var(--soft-shadow)}
.admin-card:hover{transform:none;box-shadow:var(--soft-shadow)}
.admin-kpi{position:relative;overflow:hidden;padding:18px;background:#fff;border:1px solid var(--admin-border);border-radius:14px;box-shadow:0 7px 22px rgba(15,45,67,.05);transition:.18s ease}
.admin-kpi:hover{transform:translateY(-2px);border-color:#f2c39e;box-shadow:0 12px 28px rgba(15,45,67,.09)}
.admin-kpi .small{font-size:.76rem;font-weight:650;color:#7b8892!important}
.admin-kpi .value{margin-top:.2rem;color:var(--navy);font-size:1.75rem;font-weight:850;line-height:1.15}
.admin-kpi .icon{width:44px;height:44px;border-radius:11px;color:var(--orange-dark);background:#fff1e6}
.admin-card .section-kicker{font-size:.68rem;letter-spacing:.12em}
.admin-card h2,.admin-card h3{letter-spacing:-.01em}
.admin-card hr{border-color:#edf0f2;opacity:1}
.admin-card .list-group-item{border-color:#eef1f3;background:transparent}
.admin-card form.row.g-2.mb-3,.admin-filter-bar{margin-bottom:1rem!important;padding:12px;background:#f7f9fa;border:1px solid #edf0f2;border-radius:11px}
.admin-card form.row.g-2.mb-3 .btn{min-height:46px}
.table-responsive{border-radius:11px}
.table-modern{width:100%;margin:0;border:1px solid #e7ebee;border-radius:11px;border-collapse:separate;border-spacing:0;overflow:hidden}
.table-modern thead th{padding:.78rem .85rem;border:0;border-bottom:1px solid #dde4e8;color:#50616e;background:#f5f7f8;font-size:.7rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.table-modern tbody td{padding:.78rem .85rem;border-color:#edf0f2;color:#344650;font-size:.82rem;vertical-align:middle}
.table-modern tbody tr:last-child td{border-bottom:0}
.table-modern tbody tr:hover td{background:#fbfcfd}
.table-modern .btn-outline-primary{color:#23587d;border-color:#cbd9e2}.table-modern .btn-outline-primary:hover{color:#fff;background:#23587d;border-color:#23587d}
.table-modern .btn-outline-danger{color:#b64040;border-color:#e9c4c4}.table-modern .btn-outline-danger:hover{color:#fff;background:#b64040;border-color:#b64040}
.status-badge{padding:.36rem .58rem;border-radius:999px;font-size:.68rem;line-height:1.2}
.form-check-input:checked{background-color:var(--orange);border-color:var(--orange)}
.admin-card .form-switch{min-height:24px}

/* ------------------------- PUBLIC / VISITOR ------------------------- */
.visitor-body{background:#fff}
.public-utility-bar{height:38px;display:flex;align-items:center;color:#cddae2;background:#102f46;font-size:.72rem}
.public-utility-items{display:flex;align-items:center;gap:1.25rem;min-width:0}
.public-utility-items a,.public-utility-items span{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap}
.public-utility-items a:hover{color:#fff}.public-utility-items i{color:#ffb47d}
.utility-account-link{padding-left:1.1rem;border-left:1px solid rgba(255,255,255,.16);color:#fff!important;font-weight:750}
.public-identity-header{padding:17px 0;background:#fff;border-bottom:1px solid #edf0f2}
.public-identity-row{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.public-brand{min-width:0;display:flex;align-items:center;gap:14px;color:inherit}
.public-brand:hover{color:inherit}
.public-brand-logo{width:70px;height:70px;flex:0 0 70px;display:grid;place-items:center;padding:5px;border:1px solid #e2e8ec;border-radius:13px;background:#fff;box-shadow:0 7px 20px rgba(15,45,67,.08)}
.public-brand-logo img{width:100%;height:100%;object-fit:contain}
.public-brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.public-brand-copy small{margin-bottom:.18rem;color:var(--orange-dark);font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.public-brand-copy strong{color:var(--navy);font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:900;letter-spacing:-.025em}
.public-brand-copy span{margin-top:.3rem;color:#73818b;font-size:.78rem;font-weight:600}
.public-header-actions{align-items:center;gap:.75rem}
.public-header-action{min-width:175px;display:flex;align-items:center;gap:.7rem;padding:9px 12px;border:1px solid #e7ebee;border-radius:11px;background:#fff;transition:.18s ease}
.public-header-action:hover{transform:translateY(-1px);border-color:#efbd96;background:#fffaf6}
.public-header-action-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:var(--orange-dark);background:#fff0e4}
.public-header-action>span:last-child{display:flex;flex-direction:column;line-height:1.25}.public-header-action small{color:#89949c;font-size:.64rem}.public-header-action strong{color:#294459;font-size:.75rem;font-weight:800}
.site-navbar{min-height:58px;padding:0;background:rgba(255,255,255,.98);border-bottom:1px solid #e7ecef;box-shadow:0 4px 13px rgba(15,45,67,.05);backdrop-filter:blur(12px)}
.site-navbar.is-scrolled{box-shadow:0 8px 24px rgba(15,45,67,.1)}
.site-navbar .navbar-nav{gap:1px}
.site-navbar .nav-link{position:relative;display:flex;align-items:center;gap:.42rem;padding:18px 12px!important;color:#354a59;font-size:.82rem;font-weight:700;border-radius:0;transition:.18s ease}
.site-navbar .nav-link:hover,.site-navbar .nav-link:focus{color:var(--orange-dark);background:#fff7f1}
.site-navbar .nav-link.active{color:var(--orange-dark);background:#fff7f1}
.site-navbar .nav-link.active::after{content:"";position:absolute;right:12px;bottom:0;left:12px;height:3px;background:var(--orange);border-radius:3px 3px 0 0}
.site-navbar .dropdown-menu{min-width:220px;margin-top:0;padding:7px;border:1px solid #e7ecef;border-top:3px solid var(--orange);border-radius:0 0 11px 11px;box-shadow:0 16px 38px rgba(15,45,67,.12)}
.site-navbar .dropdown-item{display:flex;align-items:center;gap:.65rem;padding:9px 10px;color:#344a59;font-size:.78rem;font-weight:600}
.site-navbar .dropdown-item i{width:17px;color:#78909c;text-align:center}
.site-navbar .dropdown-item:hover,.site-navbar .dropdown-item:focus{color:var(--orange-dark);background:#fff4eb}
.site-navbar .navbar-toggler{width:42px;height:40px;padding:0;border:1px solid #dde4e8;border-radius:9px;color:var(--navy);background:#f7f9fa;box-shadow:none}
.site-navbar .navbar-toggler-icon{display:none}
.public-nav-account .btn{padding:.57rem .82rem;font-size:.78rem}
.mobile-navbar-logo{width:38px;height:38px;padding:3px;border:1px solid #e1e7eb;border-radius:9px;background:#fff}
.mobile-navbar-title{color:var(--navy);font-size:.88rem;font-weight:850}
.public-main{min-height:45vh}
.page-hero{padding:56px 0 48px;background:linear-gradient(135deg,#102f46,#1d4f70);border-bottom:4px solid var(--orange)}
.page-hero::after{width:250px;height:250px;background:rgba(232,117,26,.17)}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.65rem);letter-spacing:-.03em}
.section-space{padding:68px 0}
.soft-card{border:1px solid #e6ebee;border-radius:15px;box-shadow:0 8px 26px rgba(15,45,67,.06)}
.soft-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,45,67,.09)}
.service-card{padding:1.2rem}
.section-title{letter-spacing:-.025em}
.news-image,.product-image,.image-placeholder{height:205px}
.table-modern thead th{background:#f3f6f8;color:#405663}
.footer.public-footer{padding:55px 0 20px;background:#102f46;color:#beced7}
.footer-brand{display:flex;align-items:center;gap:.8rem;color:#fff}.footer-brand:hover{color:#fff}
.footer-brand .site-brand-logo{width:48px;height:48px;padding:5px;border-radius:11px;background:#fff;box-shadow:none}
.footer-brand>span:last-child{display:flex;flex-direction:column;line-height:1.25}.footer-brand strong{font-size:.92rem}.footer-brand small{color:#8fa8b6;font-size:.7rem}
.public-footer h5{margin-bottom:1rem;font-size:.84rem;letter-spacing:.02em}
.public-footer p,.public-footer a{font-size:.78rem}
.footer-links{display:grid;gap:.55rem}.footer-links a{color:#bdccd5}.footer-links a:hover{color:#fff}
.footer-contact-list{display:grid;gap:.65rem}.footer-contact-list p{display:flex;gap:.7rem;margin:0}.footer-contact-list i{width:18px;margin-top:.22rem;color:#ffac70;text-align:center}
.footer-bottom{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);color:#849eac;font-size:.72rem}
.floating-wa{right:20px;bottom:20px;width:auto;height:48px;display:flex;align-items:center;gap:.55rem;padding:0 16px;border-radius:999px;font-size:1.05rem;box-shadow:0 10px 28px rgba(37,211,102,.28)}
.floating-wa span{font-size:.75rem;font-weight:800}

/* Auth pages */
.auth-shell{background:#f3f6f8}
.auth-visual{padding:3.5rem;background:linear-gradient(135deg,rgba(15,45,67,.98),rgba(23,59,87,.93)),url('../images/source/peta-wilayah.png') center/cover}
.auth-form-wrap{padding:2rem}
.auth-card{max-width:540px;padding:2rem;border:1px solid #e5eaee;border-radius:18px;box-shadow:0 18px 55px rgba(15,45,67,.11)}

@media(max-width:1199.98px){
    .admin-sidebar{transform:translateX(-100%);transition:transform .22s ease}
    .admin-sidebar.show{transform:translateX(0)}
    .admin-sidebar-close{display:grid}
    .admin-main{margin-left:0}
    .admin-menu-button{display:inline-flex}
    .admin-sidebar-overlay{position:fixed;inset:0;z-index:1040;display:block;visibility:hidden;background:rgba(8,27,40,.48);opacity:0;transition:.2s ease}
    .sidebar-open{overflow:hidden}
    .sidebar-open .admin-sidebar-overlay{visibility:visible;opacity:1}
    .site-navbar{padding:7px 0}
    .site-navbar .navbar-collapse{margin-top:7px;padding:10px;border-top:1px solid #e8ecef;background:#fff}
    .site-navbar .navbar-nav{align-items:stretch!important}
    .site-navbar .nav-link{padding:10px 11px!important;border-radius:8px}
    .site-navbar .nav-link.active::after{display:none}
    .site-navbar .dropdown-menu{margin:3px 8px;padding:5px;border:1px solid #e7ecef;border-radius:9px;box-shadow:none}
    .public-nav-account{padding-top:8px;border-top:1px solid #edf0f2}.public-nav-account .btn{width:100%}
}

@media(max-width:767.98px){
    .admin-topbar{height:68px;padding:0 14px}
    .admin-content{padding:16px 14px}
    .admin-user-button{border:0;background:transparent}.admin-user-button>i{display:none}
    .admin-card{padding:16px;border-radius:13px}
    .admin-page-title{font-size:1.3rem!important}
    .admin-content .d-flex.justify-content-between.align-items-center.mb-4,.admin-content .d-flex.flex-column.flex-lg-row{align-items:stretch!important}
    .admin-content .d-flex.justify-content-between.align-items-center.mb-4>.btn,.admin-content .d-flex.flex-column.flex-lg-row>.btn{width:100%}
    .table-modern{min-width:720px}
    .public-identity-header{padding:12px 0}
    .public-brand-logo{width:56px;height:56px;flex-basis:56px}
    .public-brand-copy small{font-size:.56rem}.public-brand-copy strong{font-size:1.15rem}.public-brand-copy span{font-size:.66rem}
    .section-space{padding:52px 0}
    .page-hero{padding:42px 0 38px}
    .floating-wa{width:50px;height:50px;padding:0;justify-content:center}.floating-wa span{display:none}
}

@media(max-width:575.98px){
    .admin-sidebar{width:min(88vw,300px)}
    .admin-page-eyebrow{display:none}.admin-page-heading strong{font-size:.9rem}
    .admin-kpi{padding:14px}.admin-kpi .value{font-size:1.45rem}.admin-kpi .icon{width:38px;height:38px}
    .admin-card form.row.g-2.mb-3{padding:10px}
    .admin-card form.row.g-2.mb-3>div{width:100%}.admin-card form.row.g-2.mb-3 .btn{width:100%}
    .public-brand-copy span{max-width:245px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .auth-form-wrap{padding:1rem}.auth-card{padding:1.25rem;border-radius:15px}
}
.admin-kpi-link{display:flex;align-items:center;gap:.35rem;color:#8a98a2;font-size:.67rem;font-weight:700}.admin-kpi:hover .admin-kpi-link{color:var(--orange-dark)}
.admin-card-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:10px;color:var(--orange-dark);background:#fff0e4}
.admin-chart-wrap{position:relative;height:280px}
.admin-activity-list{display:grid}.admin-activity-item{position:relative;display:flex;gap:.85rem;padding:12px 0;border-bottom:1px solid #edf0f2}.admin-activity-item:last-child{border-bottom:0}.admin-activity-dot{width:10px;height:10px;flex:0 0 10px;margin-top:.35rem;border:3px solid #ffe0c9;border-radius:50%;background:var(--orange)}.admin-activity-item>div{min-width:0;display:flex;flex-direction:column;line-height:1.35}.admin-activity-item strong{color:#344650;font-size:.78rem;font-weight:700}.admin-activity-item small{margin-top:.22rem;color:#87949e;font-size:.68rem}
.admin-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:#8a98a2;text-align:center}.admin-empty-state i{margin-bottom:.35rem;color:#b3bec5;font-size:1.6rem}.admin-empty-state strong{color:#50616d;font-size:.85rem}.admin-empty-state span{font-size:.75rem}
.admin-filter-bar .input-group-text{border-color:#dce3e9;border-radius:10px 0 0 10px}.admin-filter-bar .input-group .form-control{border-radius:0 10px 10px 0}
.admin-switch-card{padding:16px;border:1px solid #e4e9ed;border-radius:11px;background:#f8fafb}
.current-file{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;padding:.55rem .7rem;border-radius:8px;color:#70808b;background:#f5f7f8;font-size:.74rem}.current-file i{color:var(--orange-dark)}.current-file a{color:#245f86;font-weight:700}
.admin-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;margin:24px -22px -22px;padding:16px 22px;border-top:1px solid #e9edf0;background:#f9fafb}
@media(max-width:767.98px){.admin-chart-wrap{height:230px}.admin-form-actions{margin:20px -16px -16px;padding:14px 16px}.admin-form-actions .btn{flex:1}}

/* Field-level validation feedback */
.form-control.is-invalid,
.form-select.is-invalid{
    border-color:#dc3545;
    background-image:none;
    box-shadow:0 0 0 .18rem rgba(220,53,69,.10);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus{
    border-color:#b02a37;
    box-shadow:0 0 0 .22rem rgba(220,53,69,.14);
}
.invalid-feedback{
    margin-top:.38rem;
    font-size:.78rem;
    font-weight:650;
    line-height:1.45;
}
/* Password inputs are wrapped by JavaScript, so Bootstrap's direct sibling
   selector no longer reaches the feedback element. */
.password-field:has(.is-invalid) ~ .invalid-feedback{
    display:block;
}
.validation-summary{
    border-left:4px solid #dc3545;
}
.validation-summary .fa-circle-exclamation{
    font-size:1.15rem;
}
.validation-error-list{
    padding-left:1.1rem;
}
.validation-error-list li + li{
    margin-top:.32rem;
}
.validation-error-list a{
    color:inherit;
    text-decoration:none;
}
.validation-error-list a:hover,
.validation-error-list a:focus{
    text-decoration:underline;
}

/* ========================= 2026 UI refinement patch ========================= */
/* Animated village title */
.public-typing-title{position:relative;display:inline-flex;align-items:center;min-height:1.2em;max-width:100%}
.public-typing-title.is-typing::after,.public-typing-title.is-complete::after{content:"";width:2px;height:.92em;margin-left:4px;border-radius:99px;background:var(--orange);animation:publicTypingCursor .78s steps(1) infinite}
.public-typing-title.is-complete::after{animation-iteration-count:4}
@keyframes publicTypingCursor{0%,48%{opacity:1}49%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.public-typing-title::after{display:none!important}}

/* Cleaner homepage and responsive density */
.home-hero-title{max-width:780px}
.home-hero-actions .btn{min-width:178px}
.home-stats-scroll>.row{scrollbar-width:none}.home-stats-scroll>.row::-webkit-scrollbar{display:none}
.public-header-actions:has(.public-header-action:only-child) .public-header-action{min-width:205px}

/* Inline import belongs to each supported module */
.admin-import-panel{display:grid;gap:16px;padding:18px;border:1px solid #dfe7eb;border-left:4px solid #2f8b57;border-radius:14px;background:linear-gradient(135deg,#f7fbf8,#fff);box-shadow:0 8px 24px rgba(15,45,67,.05)}
.admin-import-panel-copy{display:flex;align-items:flex-start;gap:12px}.admin-import-panel-copy strong{display:block;color:var(--navy);font-size:.9rem}.admin-import-panel-copy p{margin-top:3px;color:#71818b;font-size:.73rem;line-height:1.5}
.admin-import-panel-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:11px;color:#26764a;background:#e6f5eb;font-size:1rem}
.admin-inline-import-form{display:flex;align-items:flex-start;gap:10px}.admin-inline-import-form .form-control{min-height:44px}
.admin-import-trigger{font-weight:750}

/* Settings workspace */
.settings-page-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.settings-status-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #cde8d6;border-radius:999px;color:#256b43;background:#edf8f1;font-size:.7rem;font-weight:800;white-space:nowrap}
.settings-workspace{overflow:hidden}.settings-tabs-wrap{padding:14px 16px 0;border-bottom:1px solid #e9edf0;background:#f7f9fa}
.settings-tabs{gap:6px;border:0}.settings-tabs .nav-link{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid transparent;border-radius:10px 10px 0 0;color:#657782;background:transparent;font-size:.78rem;font-weight:750}
.settings-tabs .nav-link i{color:#8a98a2}.settings-tabs .nav-link:hover{color:var(--navy);background:#fff}.settings-tabs .nav-link.active{color:var(--orange-dark);border-color:#e3e8eb #e3e8eb #fff;background:#fff}.settings-tabs .nav-link.active i{color:var(--orange)}
.settings-tab-content{padding:24px}.settings-section-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:22px;padding-bottom:17px;border-bottom:1px solid #edf0f2}.settings-section-heading.compact{margin-bottom:18px;padding-bottom:14px}
.settings-section-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:11px;color:var(--orange-dark);background:#fff0e4}.settings-section-heading h2{margin:0;color:var(--navy);font-size:1rem;font-weight:850}.settings-section-heading p{margin:3px 0 0;color:#7a8993;font-size:.73rem;line-height:1.45}
.settings-logo-uploader{display:flex;align-items:center;gap:18px;padding:18px;border:1px solid #e1e7eb;border-radius:14px;background:linear-gradient(135deg,#f8fafb,#fff)}
.settings-logo-preview{width:128px;height:128px;flex:0 0 128px;display:grid;place-items:center;padding:9px;border:1px solid #dfe6ea;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(15,45,67,.07)}.settings-logo-preview img{width:100%;height:100%;object-fit:contain}
.settings-color-control{display:flex;align-items:center;gap:10px}.settings-color-control .form-control-color{width:54px;height:46px;padding:4px}.settings-color-control span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#526570;font-size:.75rem;font-weight:750}
.settings-save-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-top:1px solid #e8ecef;background:#f8fafb}.settings-save-bar>div{display:flex;flex-direction:column}.settings-save-bar strong{color:#485d6a;font-size:.76rem}.settings-save-bar small{color:#8a98a2;font-size:.67rem}
.settings-live-preview{position:sticky;top:92px}.settings-preview-dot{width:9px;height:9px;border-radius:50%;background:#31ad69;box-shadow:0 0 0 5px rgba(49,173,105,.12)}
.settings-preview-browser{overflow:hidden;border:1px solid #dae2e7;border-radius:13px;background:#fff;box-shadow:0 14px 35px rgba(15,45,67,.09)}.settings-preview-browser-bar{display:flex;gap:5px;padding:8px 10px;background:#edf2f5}.settings-preview-browser-bar span{width:7px;height:7px;border-radius:50%;background:#bac7ce}.settings-preview-browser-bar span:first-child{background:#e57a72}.settings-preview-browser-bar span:nth-child(2){background:#e3bc5e}.settings-preview-browser-bar span:nth-child(3){background:#64b77e}
.settings-preview-header{display:flex;align-items:center;gap:10px;padding:16px}.settings-preview-header img{width:48px;height:48px;padding:3px;border:1px solid #e0e6ea;border-radius:9px;object-fit:contain}.settings-preview-header>div{min-width:0;display:flex;flex-direction:column;line-height:1.22}.settings-preview-header small{color:var(--orange-dark);font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.settings-preview-header strong{max-width:220px;overflow:hidden;color:var(--navy);font-size:.9rem;font-weight:900;white-space:nowrap;text-overflow:ellipsis}.settings-preview-header span{color:#84929a;font-size:.58rem}
.settings-preview-nav{--preview-accent:var(--orange);display:flex;gap:13px;padding:9px 16px;border-top:1px solid #edf0f2;background:#fbfcfd;color:#5d6f7b;font-size:.58rem;font-weight:750}.settings-preview-nav span:first-child{color:var(--preview-accent)}
.settings-preview-note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px;border-radius:10px;color:#60727e;background:#f1f5f7;font-size:.68rem;line-height:1.5}.settings-preview-note i{margin-top:2px;color:var(--orange-dark)}
.settings-security-card{margin-top:0}

/* Auth demo helpers */
.demo-account-card{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #dfe7eb;border-radius:13px;background:linear-gradient(135deg,#f6fafc,#fff)}.demo-account-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:10px;color:var(--orange-dark);background:#fff0e4}.demo-account-card strong{display:block;color:var(--navy);font-size:.78rem}.demo-account-card p{margin-top:3px;color:#71818b;font-size:.67rem;line-height:1.45}.demo-credential-row{display:flex;align-items:center;gap:8px;margin-top:4px}.demo-credential-row span{width:54px;color:#83919a;font-size:.62rem}.demo-credential-row code{padding:2px 5px;border-radius:5px;color:#375565;background:#edf3f6;font-size:.67rem}.demo-account-card .btn{white-space:nowrap;font-size:.66rem}

/* Government officials */
.org-node img{object-position:center top}.official-public-card{padding:22px}.official-public-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}.official-public-head img{width:74px;height:82px;flex:0 0 74px;object-fit:cover;object-position:center top;border-radius:13px;background:#eef3f6}.official-public-head h3{margin:0;color:var(--navy);font-size:.9rem;font-weight:850}.official-public-head span{display:block;margin-top:3px;color:var(--orange-dark);font-size:.72rem;font-weight:800}.official-public-card p{margin:0;color:#6e7f89;font-size:.76rem;line-height:1.6}.official-public-card>small{display:block;margin-top:12px;color:#8b989f;font-size:.65rem}

/* Monography information architecture */
.monography-hero{padding-bottom:58px}.monography-year-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;background:rgba(255,255,255,.09);font-size:.68rem;font-weight:800}.monography-source-box{display:flex;flex-direction:column;padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}.monography-source-box small{color:#aec3cf;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.monography-source-box strong{margin-top:3px;color:#fff;font-size:.79rem}.monography-source-box span{margin-top:4px;color:#b9cad3;font-size:.65rem}
.monography-kpi-section{padding-top:38px;padding-bottom:46px}.monography-kpi-card{display:flex;flex-direction:column;padding:16px;border:1px solid #e2e8ec;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(15,45,67,.05)}.monography-kpi-icon{width:36px;height:36px;display:grid;place-items:center;margin-bottom:13px;border-radius:10px;color:var(--orange-dark);background:#fff0e4}.monography-kpi-card>strong{color:var(--navy);font-size:1.22rem;font-weight:900;line-height:1.15}.monography-kpi-label{margin-top:5px;color:#536773;font-size:.7rem;font-weight:800}.monography-kpi-card small{margin-top:6px;color:#89969e;font-size:.61rem;line-height:1.4}
.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.insight-card{padding:19px;border:1px solid #e2e8ec;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(15,45,67,.05)}.insight-card-head{display:flex;align-items:center;gap:8px;margin-bottom:15px;color:#6d7f89;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.insight-card-head i{color:var(--orange-dark)}.insight-card>strong{display:block;color:var(--navy);font-size:1.65rem;font-weight:900}.insight-card p{margin:7px 0 0;color:#75858e;font-size:.7rem;line-height:1.55}.gender-progress{display:flex;overflow:hidden;height:7px;margin-top:14px;border-radius:999px;background:#edf2f4}.gender-progress span:first-child{background:#173b57}.gender-progress span:last-child{background:var(--orange)}
.monography-chart-card{padding:22px}.monography-chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.monography-chart-heading h3{margin:4px 0 0;color:var(--navy);font-size:1rem;font-weight:850}.chart-data-badge,.data-category-count{display:inline-flex;padding:5px 8px;border-radius:999px;color:#5e7180;background:#f0f4f6;font-size:.62rem;font-weight:800;white-space:nowrap}.monography-chart-wrap{position:relative;height:330px}.monography-chart-wrap.is-doughnut{height:330px}.monography-chart-wrap.is-wide{height:360px}.chart-caption{padding-top:12px;border-top:1px solid #eef1f3;color:#87949c;font-size:.65rem;line-height:1.5}
.monography-accordion{display:grid;gap:12px}.monography-accordion .accordion-item{overflow:hidden;border:1px solid #e1e7eb;border-radius:13px!important;background:#fff;box-shadow:0 7px 20px rgba(15,45,67,.04)}.monography-accordion .accordion-button{gap:11px;padding:15px 17px;color:var(--navy);background:#fff;font-size:.78rem;font-weight:850;box-shadow:none}.monography-accordion .accordion-button:not(.collapsed){color:var(--orange-dark);background:#fff8f2}.monography-accordion-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--orange-dark);background:#fff0e4}.monography-item-count{margin-right:8px;padding:4px 7px;border-radius:999px;color:#73838d;background:#eef3f5;font-size:.58rem;font-weight:800}.monography-table{border:0;border-radius:0}.monography-table thead th{font-size:.68rem}.monography-table tbody td{font-size:.72rem}
.facility-summary-card{padding:0}.facility-summary-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;border-bottom:1px solid #edf0f2}.facility-summary-heading>div{display:flex;align-items:center;gap:11px}.facility-summary-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;color:var(--orange-dark);background:#fff0e4}.facility-summary-heading h3{margin:0;color:var(--navy);font-size:.85rem;font-weight:850}.facility-summary-heading small{display:block;margin-top:3px;color:#87949d;font-size:.62rem}.facility-summary-heading>strong{color:var(--orange-dark);font-size:.78rem}.facility-summary-card table th{padding:10px 15px;color:#71818b;background:#f7f9fa;font-size:.63rem}.facility-summary-card table td{padding:11px 15px;color:#667984;font-size:.7rem;vertical-align:middle}.facility-summary-card table td strong{display:block;color:#405764;font-size:.72rem}.facility-summary-card table td small{display:block;margin-top:3px;color:#89979f;font-size:.6rem}.facility-quantity{display:inline-grid;min-width:28px;height:28px;place-items:center;border-radius:8px;color:var(--navy);background:#edf3f6;font-weight:850}

@media(max-width:991.98px){
    .admin-inline-import-form{flex-wrap:wrap}.admin-inline-import-form .flex-grow-1{flex-basis:100%}
    .settings-live-preview{position:static}.settings-page-header{align-items:flex-start}
    .monography-chart-wrap,.monography-chart-wrap.is-doughnut{height:300px}.monography-chart-wrap.is-wide{height:330px}
}

@media(max-width:767.98px){
    /* On mobile the compact navbar already contains the village identity. */
    .public-identity-header{display:none}
    .site-navbar{padding:6px 0}
    .mobile-navbar-title{max-width:235px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .home-hero-compact{padding:38px 0 46px;background:linear-gradient(145deg,#102f46,#205878)}
    .home-hero-compact .hero-badge{font-size:.64rem}.home-hero-compact h1{font-size:clamp(2rem,10vw,2.75rem);line-height:1.08}.home-hero-compact p{font-size:.9rem;line-height:1.65}
    .home-hero-actions{display:grid!important;grid-template-columns:1fr;gap:9px!important}.home-hero-actions .btn{width:100%;min-width:0;padding:.72rem 1rem}
    .stats-strip{margin-top:-22px;padding-right:0}.home-stats-scroll{overflow:hidden;padding:6px 0 6px 6px}.home-stats-scroll>.row{overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-right:12px}.home-stats-scroll .stat-item{width:132px;min-width:132px;min-height:84px;scroll-snap-align:start;border-right:1px solid var(--border);border-bottom:0}.home-stats-scroll .stat-value{font-size:1.15rem}.home-stats-scroll .stat-label{font-size:.61rem}
    .home-section-compact{padding:36px 0}.home-section-compact .section-title.h1{font-size:1.55rem}.home-section-compact .section-desc{font-size:.78rem}.home-section-compact .d-flex.justify-content-between.align-items-end{align-items:flex-start!important}.home-section-compact .btn{font-size:.72rem}
    [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
    .settings-page-header{flex-direction:column}.settings-tabs-wrap{padding:10px 10px 0;overflow-x:auto}.settings-tabs{flex-wrap:nowrap;min-width:max-content}.settings-tabs .nav-link{padding:10px 12px}.settings-tab-content{padding:16px}.settings-logo-uploader{align-items:flex-start}.settings-logo-preview{width:92px;height:92px;flex-basis:92px}.settings-save-bar{align-items:stretch;flex-direction:column;padding:14px 16px}.settings-save-bar .btn{width:100%}
    .demo-account-card{align-items:flex-start;flex-wrap:wrap}.demo-account-card .btn{width:100%}
    .section-heading-row{align-items:flex-start;flex-direction:column}.monography-source-box{margin-top:4px}.monography-kpi-section{padding-top:28px}.monography-kpi-card{padding:13px}.monography-kpi-card>strong{font-size:1.05rem}.monography-chart-card{padding:16px}.monography-chart-heading{flex-direction:column}.monography-chart-wrap,.monography-chart-wrap.is-doughnut{height:280px}.monography-chart-wrap.is-wide{height:310px}.monography-item-count{display:none}.monography-table{min-width:760px}.facility-summary-heading{padding:15px}.facility-summary-card table{min-width:520px}
}

@media(max-width:575.98px){
    .admin-import-panel{padding:14px}.admin-inline-import-form .btn{width:100%}
    .settings-logo-uploader{flex-direction:column}.settings-logo-preview{width:100%;height:130px}.settings-section-heading h2{font-size:.92rem}
    .monography-kpi-card small{display:none}.monography-kpi-label{font-size:.65rem}.insight-card>strong{font-size:1.4rem}
    .official-public-card{padding:17px}.official-public-head img{width:64px;height:72px;flex-basis:64px}
}

/* Persisted focal position for official and BPS photos */
.bps-photo img{will-change:transform,object-position}
.org-photo-frame{width:76px;height:86px;margin:0 auto 10px;overflow:hidden;border-radius:14px;background:#eef3f6}
.org-photo-frame img{width:100%;height:100%;display:block;object-fit:cover;will-change:transform,object-position}
.official-photo-frame{width:74px;height:82px;flex:0 0 74px;overflow:hidden;border-radius:13px;background:#eef3f6}
.official-photo-frame img{width:100%;height:100%;display:block;object-fit:cover;will-change:transform,object-position}
@media(max-width:575.98px){.official-photo-frame{width:64px;height:72px;flex-basis:64px}}

/* Uploaded images are displayed through the Laravel media route. */
.news-image,.product-image,.ebook-mini-cover img,.ebook-cover img,.bps-photo img,.org-photo-frame img,.official-photo-frame img,.gallery-cover,.gallery-thumbs img,.location-thumb img,.photo-marker img,.popup-photo{object-fit:contain!important;object-position:center!important;background:#f4f7f9}

/* Flexible organizational chart: Agen Statistik Desa */
.bps-tree-scroll{overflow-x:auto;padding:28px 12px 44px;background:#f7f9fb;border:1px solid var(--border);border-radius:22px;scrollbar-width:thin}
.bps-org-tree,.bps-org-tree ul{position:relative;display:flex;justify-content:center;margin:0;padding:46px 0 0;list-style:none;min-width:max-content}
.bps-org-tree>ul{padding-top:0}.bps-org-tree li{position:relative;padding:46px 12px 0;text-align:center}
.bps-org-tree li::before,.bps-org-tree li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:46px;border-top:2px solid #c7d5de}
.bps-org-tree li::after{right:auto;left:50%;border-left:2px solid #c7d5de}
.bps-org-tree li:only-child::before,.bps-org-tree li:only-child::after{display:none}.bps-org-tree li:only-child{padding-top:0}
.bps-org-tree li:first-child::before,.bps-org-tree li:last-child::after{border:0}.bps-org-tree li:last-child::before{border-right:2px solid #c7d5de;border-radius:0 12px 0 0}.bps-org-tree li:first-child::after{border-radius:12px 0 0 0}
.bps-org-tree ul ul::before{content:"";position:absolute;top:0;left:50%;height:46px;border-left:2px solid #c7d5de}
.bps-tree-card{width:250px;min-height:250px;padding:24px 20px;background:#fff;border:1px solid var(--border);border-top:5px solid var(--orange);border-radius:20px;box-shadow:0 12px 30px rgba(23,59,87,.09)}
.bps-tree-photo{width:92px;height:92px;margin:0 auto 13px;display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(145deg,var(--navy),#2d668b);border:4px solid #fff;border-radius:50%;box-shadow:0 8px 22px rgba(23,59,87,.2);font-size:1.8rem}
.bps-tree-photo img{width:100%;height:100%;object-fit:cover!important;object-position:center!important;background:transparent}
.bps-tree-label{display:inline-block;padding:.35rem .7rem;color:var(--orange-dark);background:#fff0e3;border-radius:999px;font-size:.72rem;font-weight:800}
.bps-tree-card h2{margin:.65rem 0 .3rem;color:var(--navy);font-size:1.08rem;font-weight:900}.bps-tree-card p{margin:0;color:var(--muted)}.bps-tree-card small{display:block;margin-top:.65rem;color:var(--muted);line-height:1.55}
.bps-tree-scroll-note{color:var(--muted);font-size:.86rem;text-align:center}
@media(max-width:575.98px){.bps-tree-scroll{margin-inline:-8px;padding:22px 6px 34px}.bps-tree-card{width:205px;min-height:220px;padding:18px 14px}.bps-tree-photo{width:76px;height:76px}.bps-org-tree li{padding-inline:7px}}

/* Final public export, Desa Cantik popup, and commerce detail refinements */
.monography-export-actions .btn{min-width:150px}
.desa-cantik-modal .modal-dialog{max-width:650px;padding:16px}.desa-cantik-modal .modal-content{overflow:hidden;border:0;border-radius:26px;box-shadow:0 30px 90px rgba(15,45,67,.30)}.desa-cantik-close{position:absolute;z-index:2;top:18px;right:18px}.desa-cantik-body{padding:36px;text-align:center;background:radial-gradient(circle at 50% 0,#f4fbef 0,#fff 58%)}.desa-cantik-logo-wrap{width:210px;height:210px;margin:0 auto 20px;display:grid;place-items:center}.desa-cantik-logo-wrap img{max-width:100%;max-height:100%;object-fit:contain}.desa-cantik-badge{display:inline-flex;align-items:center;padding:.48rem .85rem;border-radius:999px;color:#2672b8;background:#eaf5ff;font-size:.78rem;font-weight:850}.desa-cantik-body h2{max-width:520px;margin:16px auto 12px;color:var(--navy);font-size:clamp(1.55rem,4vw,2.15rem);font-weight:900;line-height:1.2}.desa-cantik-body p{max-width:520px;margin:0 auto 24px;color:var(--muted);line-height:1.75}
.product-subtitle{color:#687c89;font-size:.88rem;line-height:1.5}.commerce-detail-image{height:520px;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:#f5f8fa;box-shadow:0 18px 45px rgba(23,59,87,.10)}.commerce-detail-image>img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}.commerce-detail-image .image-placeholder{height:100%}.commerce-detail-subtitle{color:#71838e;font-size:1.08rem;line-height:1.65}.commerce-detail-price{margin:16px 0;color:var(--orange-dark);font-size:1.8rem;font-weight:900}.commerce-detail-description{margin:20px 0;color:#5e7180;font-size:1rem;line-height:1.85}.commerce-meta-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0;padding:22px}.commerce-meta-card>div{display:flex;flex-direction:column;gap:5px}.commerce-meta-card small{color:#87959e;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.commerce-meta-card strong{color:var(--navy);line-height:1.5}.commerce-meta-wide{grid-column:1/-1}.detail-commerce-hero .hero-badge{background:rgba(255,255,255,.14)}
@media(max-width:767.98px){.desa-cantik-body{padding:30px 20px 24px}.desa-cantik-logo-wrap{width:150px;height:150px}.commerce-detail-image{height:380px}.commerce-meta-card{grid-template-columns:1fr}.commerce-meta-wide{grid-column:auto}.monography-export-actions{justify-content:flex-start!important}.monography-export-actions .btn{flex:1 1 140px}}
/* Cropped images from the admin editor should fill their public frames. */
.news-image,.product-image,.official-photo-frame img,.org-photo-frame img,.gallery-cover,.gallery-thumbs img,.location-thumb img,.photo-marker img,.popup-photo{object-fit:cover!important;object-position:center!important}

/* ==========================================================================
   HEADER PUBLIK TERPADU — gaya navigasi satu baris seperti portal statistik
   ========================================================================== */
.public-utility-bar,
.public-identity-header{
    display:none!important;
}

.public-main-nav.site-navbar{
    min-height:86px;
    padding:0;
    background:linear-gradient(100deg,#0d3555 0%,#123f66 58%,#0b3150 100%);
    border:0;
    border-bottom:4px solid var(--orange);
    box-shadow:0 10px 28px rgba(7,34,53,.18);
    backdrop-filter:none;
}

.public-main-nav.site-navbar.is-scrolled{
    box-shadow:0 12px 30px rgba(7,34,53,.25);
}

.public-nav-container{
    max-width:1580px;
    min-height:82px;
    padding-right:clamp(18px,3vw,50px);
    padding-left:clamp(18px,3vw,50px);
}

.public-nav-brand{
    min-width:245px;
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:clamp(18px,2.4vw,42px);
    padding:8px 0;
    color:#fff!important;
}

.public-nav-brand:hover,
.public-nav-brand:focus{
    color:#fff!important;
}

.public-nav-brand-logo{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    padding:4px;
    border:1px solid rgba(255,255,255,.32);
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.public-nav-brand-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.public-nav-brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.08;
}

.public-nav-brand-copy small{
    margin-bottom:5px;
    color:#ffbf8c;
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
}

.public-nav-brand-copy strong{
    color:#fff;
    font-size:clamp(1.08rem,1.5vw,1.48rem);
    font-weight:900;
    letter-spacing:-.025em;
    white-space:nowrap;
}

.public-main-nav .navbar-collapse{
    min-width:0;
}

.public-main-nav .public-main-menu{
    gap:1px;
}

.public-main-nav.site-navbar .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    min-height:82px;
    padding:0 clamp(7px,.72vw,12px)!important;
    color:rgba(255,255,255,.92);
    background:transparent;
    font-size:clamp(.72rem,.72vw,.82rem);
    font-weight:700;
    white-space:nowrap;
}

.public-main-nav.site-navbar .nav-link:hover,
.public-main-nav.site-navbar .nav-link:focus,
.public-main-nav.site-navbar .nav-link.active{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.public-main-nav.site-navbar .nav-link.active::after{
    right:8px;
    bottom:0;
    left:8px;
    height:4px;
    background:#fff;
    border-radius:4px 4px 0 0;
}

.public-main-nav.site-navbar .dropdown-menu{
    margin-top:0;
    border-top:4px solid var(--orange);
}

.public-main-nav .public-nav-account{
    flex:0 0 auto;
    margin-left:clamp(8px,1.2vw,20px);
    padding-left:clamp(8px,1.2vw,20px);
    border-left:1px solid rgba(255,255,255,.16);
}

.public-main-nav .public-nav-account .btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    padding:.58rem .82rem;
    border-radius:9px;
    font-size:.76rem;
    font-weight:800;
    white-space:nowrap;
}

.public-register-button{
    color:#fff;
    border:1px solid rgba(255,255,255,.5);
    background:transparent;
}

.public-register-button:hover,
.public-register-button:focus{
    color:#0d3555;
    border-color:#fff;
    background:#fff;
}

.public-login-button{
    border-color:var(--orange)!important;
    box-shadow:0 7px 18px rgba(232,117,26,.22);
}

.public-account-button{
    color:#0d3555;
    border:1px solid #fff;
    background:#fff;
}

.public-account-button:hover,
.public-account-button:focus{
    color:#fff;
    border-color:var(--orange);
    background:var(--orange);
}

.public-main-nav.site-navbar .navbar-toggler{
    width:44px;
    height:42px;
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.1);
}

.public-main-nav.site-navbar .navbar-toggler:hover,
.public-main-nav.site-navbar .navbar-toggler:focus{
    color:#0d3555;
    background:#fff;
}

@media(max-width:1199.98px){
    .public-main-nav.site-navbar{
        min-height:72px;
        padding:0;
    }

    .public-nav-container{
        min-height:68px;
    }

    .public-nav-brand{
        min-width:0;
        margin-right:auto;
        padding:6px 0;
    }

    .public-nav-brand-logo{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .public-nav-brand-copy small{
        font-size:.51rem;
    }

    .public-nav-brand-copy strong{
        font-size:1.02rem;
    }

    .public-main-nav.site-navbar .navbar-collapse{
        max-height:calc(100vh - 76px);
        overflow-y:auto;
        margin:0 -18px;
        padding:10px 18px 18px;
        border-top:1px solid rgba(255,255,255,.15);
        background:#0d3555;
    }

    .public-main-nav.site-navbar .navbar-nav{
        padding:0;
    }

    .public-main-nav.site-navbar .nav-link{
        min-height:44px;
        padding:10px 12px!important;
        border-radius:8px;
        font-size:.82rem;
    }

    .public-main-nav.site-navbar .nav-link.active::after{
        display:none;
    }

    .public-main-nav.site-navbar .dropdown-menu{
        margin:3px 8px 8px;
        border-top:0;
        border-radius:9px;
    }

    .public-main-nav .public-nav-account{
        margin:10px 0 0;
        padding:12px 0 0;
        border-top:1px solid rgba(255,255,255,.15);
        border-left:0;
    }

    .public-main-nav .public-nav-account .btn{
        flex:1 1 0;
    }
}

@media(max-width:575.98px){
    .public-nav-container{
        padding-right:14px;
        padding-left:14px;
    }

    .public-nav-brand-logo{
        width:43px;
        height:43px;
        flex-basis:43px;
        border-radius:8px;
    }

    .public-nav-brand-copy small{
        display:none;
    }

    .public-nav-brand-copy strong{
        max-width:205px;
        overflow:hidden;
        font-size:.95rem;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .public-main-nav.site-navbar .navbar-collapse{
        margin-right:-14px;
        margin-left:-14px;
        padding-right:14px;
        padding-left:14px;
    }
}

/* Monografi: tombol ekspor ditempatkan pada setiap kelompok data. */
.monography-section-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.monography-section-export{min-width:142px;white-space:nowrap;font-weight:800;border-width:1.5px}.monography-section-export:hover,.monography-section-export:focus{color:#fff}.monography-section-actions .data-category-count{white-space:nowrap}
@media(max-width:767.98px){.monography-section-actions{width:100%;justify-content:flex-start}.monography-section-export{width:100%;min-width:0}.monography-section-actions .data-category-count{white-space:normal}}

/* Detail informasi: tata letak editorial bergaya portal BPS. */
.news-bps-page{
    min-height:70vh;
    padding:38px 0 88px;
    background:#eef2f6;
}
.news-bps-breadcrumb{
    margin-bottom:28px;
    padding:0 2px;
}
.news-bps-breadcrumb .breadcrumb{
    --bs-breadcrumb-divider:'›';
    --bs-breadcrumb-divider-color:#6f8190;
    --bs-breadcrumb-item-active-color:#263746;
    flex-wrap:nowrap;
    overflow:hidden;
    color:#263746;
    font-size:.95rem;
}
.news-bps-breadcrumb .breadcrumb-item{
    min-width:0;
    white-space:nowrap;
}
.news-bps-breadcrumb .breadcrumb-item:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
}
.news-bps-breadcrumb a{
    color:#087fc3;
    font-weight:600;
}
.news-bps-card{
    max-width:1380px;
    margin:0 auto;
    padding:34px;
    border:1px solid #e3e9ee;
    border-radius:16px;
    background:#fff;
    box-shadow:0 16px 44px rgba(20,54,78,.08);
}
.news-bps-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:26px;
    margin-bottom:18px;
}
.news-bps-heading-copy{
    min-width:0;
}
.news-bps-category{
    display:inline-flex;
    align-items:center;
    margin-bottom:10px;
    padding:5px 10px;
    border-radius:6px;
    color:#0c5790;
    background:#e8f3fb;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.news-bps-header h1{
    max-width:1060px;
    margin:0;
    color:#0b477c;
    font-size:clamp(1.7rem,3vw,2.55rem);
    font-weight:850;
    line-height:1.2;
    letter-spacing:-.025em;
}
.news-bps-share{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:10px 16px;
    border:0;
    border-radius:8px;
    color:#122a3d;
    background:#e3eaf1;
}
.news-bps-share:hover,
.news-bps-share:focus{
    color:#fff;
    background:#0b477c;
}
.news-bps-meta{
    display:flex;
    flex-wrap:wrap;
    gap:9px 20px;
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid #e5eaf0;
    color:#536776;
    font-size:.9rem;
}
.news-bps-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.news-bps-meta i{
    color:#0b78b8;
}
.news-bps-content-grid{
    display:grid;
    grid-template-columns:minmax(330px, .9fr) minmax(0, 1.65fr);
    align-items:start;
    gap:30px;
}
.news-bps-content-grid--without-image{
    grid-template-columns:minmax(0, 1fr);
}
.news-bps-media{
    position:sticky;
    top:116px;
    overflow:hidden;
    margin:0;
    border-radius:10px;
    background:#edf2f5;
}
.news-bps-media img{
    display:block;
    width:100%;
    max-height:660px;
    object-fit:cover;
}
.news-bps-media figcaption{
    padding:11px 14px;
    border-top:1px solid #e2e8ed;
    color:#687986;
    background:#f7f9fb;
    font-size:.76rem;
    line-height:1.5;
}
.news-bps-body{
    min-width:0;
    color:#202b33;
    font-size:1rem;
    line-height:1.55;
}
.news-bps-body .news-bps-lead{
    margin-bottom:22px;
    padding:16px 18px;
    border-left:4px solid #0b78b8;
    color:#18364c;
    background:#f0f7fb;
    font-size:1.05rem;
    font-weight:600;
    line-height:1.55;
}
.news-bps-body p{
    margin:0 0 20px;
    text-align:left;
}
.news-bps-body p:last-child{
    margin-bottom:0;
}
.news-bps-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid #e5eaf0;
}
.news-share-notice{
    position:fixed;
    right:24px;
    bottom:94px;
    z-index:1090;
    max-width:320px;
    padding:11px 16px;
    border-radius:10px;
    color:#fff;
    background:#123d5b;
    box-shadow:0 12px 30px rgba(15,45,67,.24);
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:.2s ease;
}
.news-share-notice.is-visible{
    opacity:1;
    transform:translateY(0);
}
@media(max-width:991.98px){
    .news-bps-page{padding-top:28px}
    .news-bps-card{padding:26px}
    .news-bps-content-grid{grid-template-columns:1fr}
    .news-bps-media{position:relative;top:auto;max-width:760px}
    .news-bps-media img{max-height:560px}
}
@media(max-width:575.98px){
    .news-bps-page{padding:20px 0 58px}
    .news-bps-breadcrumb{margin-bottom:18px}
    .news-bps-card{padding:20px 16px;border-radius:12px}
    .news-bps-header{flex-direction:column;gap:16px}
    .news-bps-share{width:100%}
    .news-bps-meta{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:20px}
    .news-bps-content-grid{gap:20px}
    .news-bps-body{font-size:.96rem;line-height:1.65}
    .news-bps-body .news-bps-lead{font-size:1rem}
    .news-bps-footer{flex-direction:column}
    .news-bps-footer .btn{width:100%}
    .news-share-notice{right:14px;bottom:84px;left:14px;max-width:none;text-align:center}
}

/* =========================================================
   PENGATURAN AKUN WARGA — IDENTITAS, PROFIL, DAN KEAMANAN
========================================================= */
.account-settings-modal .modal-dialog{max-width:1160px}
.account-settings-modal .modal-content{overflow:hidden;border-radius:26px;background:#f7f9fb;box-shadow:0 30px 90px rgba(15,45,67,.28)}
.account-modal-hero{position:relative;display:flex;align-items:center;gap:18px;padding:26px 30px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(232,117,26,.35),transparent 26%),linear-gradient(135deg,var(--navy-2),var(--navy))}
.account-modal-hero::after{content:"";position:absolute;right:-54px;bottom:-94px;width:210px;height:210px;border:42px solid rgba(255,255,255,.05);border-radius:50%;pointer-events:none}
.account-modal-avatar{position:relative;z-index:1;width:68px;height:68px;flex:0 0 68px;display:grid;place-items:center;border:3px solid rgba(255,255,255,.45);border-radius:20px;background:linear-gradient(135deg,var(--orange),var(--orange-dark));box-shadow:0 12px 28px rgba(0,0,0,.2);font-size:1.6rem;font-weight:900}
.account-modal-eyebrow{display:block;margin-bottom:3px;color:#ffc18f;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.account-modal-title{margin:0;color:#fff;font-size:1.65rem;font-weight:900;letter-spacing:-.02em}
.account-modal-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:7px;color:#d8e6ed;font-size:.76rem}
.account-modal-meta span{display:inline-flex;align-items:center;gap:6px}
.account-modal-close{position:relative;z-index:2;width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.23);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:1.1rem;transition:.2s}
.account-modal-close:hover{background:#fff;color:var(--navy)}
.account-modal-body{padding:26px 28px 30px}
.account-identity-card{position:relative;overflow:hidden;padding:24px;border:1px solid #dce5eb;border-radius:21px;background:linear-gradient(155deg,#fff 0%,#f7fbfd 62%,#edf5f8 100%);box-shadow:0 12px 34px rgba(23,59,87,.08)}
.account-identity-card::after{content:"";position:absolute;right:-45px;top:-45px;width:145px;height:145px;border:28px solid rgba(232,117,26,.07);border-radius:50%}
.account-section-icon{position:relative;z-index:1;width:50px;height:50px;display:grid;place-items:center;margin-bottom:18px;border-radius:15px;background:#fff0e4;color:var(--orange-dark);font-size:1.2rem}
.account-card-kicker{position:relative;z-index:1;display:block;color:var(--orange-dark);font-size:.69rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.account-identity-card h3,.account-pane-heading h3{position:relative;z-index:1;margin:.2rem 0 .35rem;color:var(--navy);font-size:1.25rem;font-weight:900}
.account-card-description,.account-pane-heading p{position:relative;z-index:1;margin:0;color:#6c7e89;font-size:.82rem;line-height:1.55}
.account-identity-list{position:relative;z-index:1;display:grid;gap:11px;margin:20px 0}
.account-identity-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border:1px solid #dce5eb;border-radius:14px;background:#fff}
.account-identity-item span{display:block;margin-bottom:2px;color:#82919b;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.account-identity-item strong{display:block;color:var(--navy);font-family:"Courier New",monospace;font-size:.91rem;letter-spacing:.035em;word-break:break-all}
.account-copy-button{width:34px;height:34px;flex:0 0 34px;border:1px solid #dce5eb;border-radius:10px;background:#f7fafb;color:var(--navy);transition:.18s}
.account-copy-button:hover,.account-copy-button.is-copied{border-color:var(--orange);background:#fff0e4;color:var(--orange-dark)}
.account-lock-note{position:relative;z-index:1;display:flex;gap:11px;padding:13px;border-radius:14px;background:var(--navy);color:#fff}
.account-lock-note>i{margin-top:3px;color:#ffbd89}
.account-lock-note strong,.account-lock-note span{display:block}
.account-lock-note strong{font-size:.78rem}
.account-lock-note span{margin-top:2px;color:#d7e3e9;font-size:.69rem;line-height:1.45}
.account-verification-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.account-verification-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;font-size:.65rem;font-weight:800}
.account-verification-badge.is-success{background:#e6f6ed;color:#167145}
.account-verification-badge.is-warning{background:#fff3d9;color:#916200}
.account-settings-tabs{gap:8px;padding:7px;border:1px solid #dce5eb;border-radius:15px;background:#edf2f5}
.account-settings-tabs .nav-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 15px;border:0;border-radius:10px;color:#607581;font-size:.82rem;font-weight:800}
.account-settings-tabs .nav-link.active{background:#fff;color:var(--navy);box-shadow:0 5px 16px rgba(23,59,87,.09)}
.account-settings-content{margin-top:14px;padding:22px;border:1px solid #dce5eb;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(23,59,87,.06)}
.account-pane-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:18px;margin-bottom:19px;border-bottom:1px solid #e5ebef}
.account-pane-badge{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:7px 10px;border-radius:999px;background:#fff0e4;color:var(--orange-dark);font-size:.66rem;font-weight:850}
.account-pane-badge.is-security{background:#e8f1f6;color:var(--navy)}
.account-form-alert{border:0;border-radius:14px;font-size:.78rem}
.account-form .form-label{margin-bottom:6px;font-size:.78rem}
.account-input-group{position:relative}
.account-input-group>i{position:absolute;left:14px;top:50%;z-index:3;transform:translateY(-50%);color:#81919b;pointer-events:none}
.account-input-group .form-control{padding-left:41px;background:#fbfcfd}
.account-textarea-group>i{top:17px;transform:none}
.account-readonly-summary{min-height:50px;display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px dashed #c9d6de;border-radius:12px;background:#f7fafb}
.account-readonly-summary>i{color:var(--orange-dark)}
.account-readonly-summary strong,.account-readonly-summary span{display:block}
.account-readonly-summary strong{color:var(--navy);font-size:.76rem}
.account-readonly-summary span{color:#7d8c96;font-size:.67rem}
.account-form-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:17px;border-top:1px solid #e5ebef}
.account-form-footer>span{color:#71828c;font-size:.7rem}
.account-form-footer>span i{color:var(--orange-dark)}
.account-security-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:25px}
.account-security-tips{padding:20px;border-radius:17px;background:linear-gradient(145deg,var(--navy),var(--navy-2));color:#fff}
.account-security-illustration{width:50px;height:50px;display:grid;place-items:center;margin-bottom:14px;border-radius:15px;background:rgba(255,255,255,.1);color:#ffc18f;font-size:1.25rem}
.account-security-tips h4{font-size:1rem;font-weight:900}
.account-security-tips ul{display:grid;gap:9px;padding:0;margin:14px 0 0;list-style:none;color:#d9e6ec;font-size:.7rem}
.account-security-tips li{display:flex;gap:8px;line-height:1.45}
.account-security-tips li i{margin-top:2px;color:#ffb879}
@media(max-width:991.98px){.account-settings-modal .modal-dialog{max-width:94vw}.account-modal-body{padding:20px}.account-security-grid{grid-template-columns:1fr}.account-identity-card{height:auto!important}}
@media(max-width:575.98px){.account-settings-modal .modal-dialog{max-width:none;margin:.5rem}.account-settings-modal .modal-content{border-radius:20px}.account-modal-hero{align-items:flex-start;padding:20px}.account-modal-avatar{width:52px;height:52px;flex-basis:52px;border-radius:15px;font-size:1.2rem}.account-modal-title{font-size:1.25rem}.account-modal-meta{display:none}.account-modal-close{width:36px;height:36px;flex-basis:36px}.account-modal-body{padding:14px}.account-settings-content{padding:16px}.account-pane-heading{display:block}.account-pane-badge{margin-top:10px}.account-form-footer{align-items:stretch;flex-direction:column}.account-form-footer .btn{width:100%}.account-settings-tabs .nav-item{flex:1}.account-settings-tabs .nav-link{width:100%;padding:8px;font-size:.72rem}}



/* ============================================================
   Home & Information UI — BPS-inspired publication/news layout
   ============================================================ */
.bps-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.bps-see-all-link{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:800;white-space:nowrap}.bps-see-all-link:hover{color:var(--orange-dark);transform:translateX(2px)}
.home-bps-ebook-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.home-bps-ebook-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;min-height:150px;padding:16px;background:#fff;border:1px solid #e4ebf0;border-radius:16px;color:inherit;box-shadow:0 8px 24px rgba(15,45,67,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.home-bps-ebook-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,45,67,.12);border-color:#cbd9e2;color:inherit}.home-bps-ebook-cover{width:88px;height:118px;align-self:center;overflow:hidden;border-radius:8px;background:linear-gradient(145deg,#eef3f6,#fff2e7);box-shadow:0 7px 16px rgba(15,45,67,.13)}.home-bps-ebook-cover img{width:100%;height:100%;object-fit:cover!important;object-position:center!important}.home-bps-ebook-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(145deg,var(--navy),#2b6488);color:#fff}.home-bps-ebook-placeholder i{font-size:1.65rem}.home-bps-ebook-placeholder span{font-size:.62rem;font-weight:900;letter-spacing:.12em}.home-bps-ebook-info{display:flex;min-width:0;flex-direction:column;justify-content:center}.home-bps-ebook-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px;color:#6d8290;font-size:.76rem}.home-bps-ebook-meta span+span::before{content:"•";margin-right:12px;color:var(--orange)}.home-bps-ebook-info h3{margin:0 0 7px;color:var(--navy);font-size:1rem;font-weight:850;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-bps-ebook-info p{margin:0 0 10px;color:#657b89;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-bps-ebook-action{display:inline-flex;align-items:center;gap:6px;color:var(--orange-dark);font-size:.78rem;font-weight:800}
.home-bps-news-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.home-bps-news-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #e4ebf0;border-radius:16px;color:inherit;box-shadow:0 8px 24px rgba(15,45,67,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.home-bps-news-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(15,45,67,.13);border-color:#cbd9e2;color:inherit}.home-bps-news-media{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(145deg,#edf3f7,#fff1e6)}.home-bps-news-media img{width:100%;height:100%;object-fit:cover!important;object-position:center!important;transition:transform .35s ease}.home-bps-news-card:hover .home-bps-news-media img{transform:scale(1.035)}.home-bps-news-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--navy);font-size:2.35rem}.home-bps-news-body{display:flex;flex:1;flex-direction:column;padding:15px 16px 18px}.home-bps-news-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;color:#6f8390;font-size:.72rem}.home-bps-news-meta span:last-child{max-width:55%;overflow:hidden;color:var(--orange-dark);font-weight:750;white-space:nowrap;text-overflow:ellipsis}.home-bps-news-body h3{margin:0;color:#102f48;font-size:.98rem;font-weight:850;line-height:1.38;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.home-bps-news-body p{margin:10px 0 0;color:#657b89;font-size:.79rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-bps-empty-state{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:24px;background:#fff;border:1px dashed #cbd8e0;border-radius:16px;color:#607783}.home-bps-empty-state>i{display:grid;width:52px;height:52px;place-items:center;border-radius:14px;background:#fff1e4;color:var(--orange-dark);font-size:1.35rem}.home-bps-empty-state strong,.home-bps-empty-state span{display:block}.home-bps-empty-state strong{color:var(--navy);font-size:1rem}.home-bps-empty-state span{margin-top:3px;font-size:.85rem}
.information-news-section{background:#fff}.information-heading{padding-bottom:20px;border-bottom:1px solid #e2e9ee}.information-result-count{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-radius:12px;background:#f1f5f7;color:#637985}.information-result-count strong{color:var(--navy);font-size:1.1rem}.information-result-count span{font-size:.8rem}.information-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}.information-news-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #e1e9ee;border-radius:18px;box-shadow:0 9px 28px rgba(15,45,67,.07);transition:transform .2s ease,box-shadow .2s ease}.information-news-card:hover{transform:translateY(-5px);box-shadow:0 17px 38px rgba(15,45,67,.13)}.information-news-image-wrap{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#edf3f7,#fff1e6)}.information-news-image{width:100%;height:100%;object-fit:cover!important;object-position:center!important;transition:transform .35s ease}.information-news-card:hover .information-news-image{transform:scale(1.035)}.information-news-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--navy);font-size:2.65rem}.information-news-content{display:flex;flex:1;flex-direction:column;padding:20px}.information-news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px;color:#718692;font-size:.76rem}.information-news-meta span{display:inline-flex;align-items:center;gap:6px}.information-news-meta span:last-child{padding:4px 8px;border-radius:999px;background:#fff0e3;color:var(--orange-dark);font-weight:750}.information-news-content h3{margin:0 0 10px;font-size:1.08rem;line-height:1.43}.information-news-content h3 a{color:var(--navy);font-weight:850}.information-news-content h3 a:hover{color:var(--orange-dark)}.information-news-content p{margin:0 0 15px;color:#647a88;font-size:.86rem;line-height:1.6}.information-news-read{display:inline-flex;align-items:center;gap:7px;margin-top:auto;color:var(--orange-dark);font-size:.82rem;font-weight:850}.information-empty-state{grid-column:1/-1;padding:52px 24px;text-align:center;background:#f7fafb;border:1px dashed #cad8e0;border-radius:18px}.information-empty-state>i{font-size:2rem;color:var(--orange-dark)}.information-empty-state h3{margin:14px 0 6px;color:var(--navy)}.information-empty-state p{margin:0 0 18px;color:#667c89}.information-pagination .pagination{justify-content:center}
.information-support-card{padding:26px;background:#fff;border:1px solid #e1e9ee;border-radius:18px;box-shadow:0 9px 28px rgba(15,45,67,.06)}.information-support-header{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #e5ecef}.information-support-icon{display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;border-radius:14px;background:#fff0e2;color:var(--orange-dark);font-size:1.2rem}.information-support-header h2{margin:2px 0 0;color:var(--navy);font-size:1.25rem}.information-support-list{display:grid}.information-support-item{padding:17px 0;border-bottom:1px solid #e9eef1}.information-support-item:last-child{border-bottom:0;padding-bottom:0}.information-support-item time{display:block;margin-bottom:5px;color:var(--orange-dark);font-size:.75rem;font-weight:800}.information-support-item strong{display:block;color:var(--navy);line-height:1.45}.information-support-item p{margin:6px 0 0;color:#6a7f8b;font-size:.82rem;line-height:1.55}.information-agenda-item{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #e9eef1}.information-agenda-item:last-child{border-bottom:0;padding-bottom:0}.information-agenda-date{display:flex;height:58px;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;background:var(--navy);color:#fff}.information-agenda-date strong{font-size:1.15rem;line-height:1}.information-agenda-date span{margin-top:4px;color:#ffceb0;font-size:.68rem;font-weight:850;text-transform:uppercase}.information-agenda-item>div:last-child>strong{display:block;color:var(--navy);line-height:1.42}.information-agenda-item p{display:flex;align-items:center;gap:6px;margin:6px 0 0;color:#6a7f8b;font-size:.8rem}.information-agenda-item p i{color:var(--orange-dark)}.information-support-empty{padding:24px 0;color:#718692;text-align:center}
@media(max-width:1199.98px){.home-bps-news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-bps-ebook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){.information-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.bps-section-heading{align-items:flex-start;flex-direction:column;margin-bottom:22px}.home-bps-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-bps-ebook-grid{grid-template-columns:1fr}.information-news-grid{grid-template-columns:1fr}.information-result-count{align-self:flex-start}.information-support-card{padding:20px}}
@media(max-width:575.98px){.home-bps-news-grid{display:flex;gap:14px;overflow-x:auto;padding:0 2px 12px;scroll-snap-type:x mandatory}.home-bps-news-card{min-width:78vw;scroll-snap-align:start}.home-bps-ebook-card{grid-template-columns:74px minmax(0,1fr);gap:14px;padding:14px}.home-bps-ebook-cover{width:74px;height:100px}.home-bps-news-body{padding:14px}.home-bps-news-meta{align-items:flex-start;flex-direction:column}.home-bps-news-meta span:last-child{max-width:100%}.information-news-content{padding:17px}}


/* =========================================================
   FORMAT TANGGAL & WAKTU ADMIN — INDONESIA 24 JAM
========================================================= */
.admin-datetime-id{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr);gap:12px;padding:12px;border:1px solid #dce3e9;border-radius:14px;background:#f8fafb}
.admin-datetime-id .form-control{background:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.admin-datetime-label{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#647987;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.admin-datetime-label i{color:var(--orange-dark)}
@media(max-width:575.98px){.admin-datetime-id{grid-template-columns:1fr}}

/* =========================================================
   TEGALMAJA 2026 — PROFESSIONAL UI/UX REFRESH
   ========================================================= */
:root{
    --font-body:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
    --font-heading:"Manrope","Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
    --surface-soft:#f6f8fb;
    --surface-muted:#eef3f7;
    --border-soft:#dfe7ed;
    --shadow-soft:0 12px 34px rgba(15,45,67,.08);
    --shadow-elevated:0 22px 60px rgba(15,45,67,.14);
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:26px;
}
html{font-synthesis:none}
body{font-family:var(--font-body);font-feature-settings:"kern" 1,"liga" 1;color:#233441;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,.section-title,.admin-page-title,.public-nav-brand-copy strong,.auth-visual h1{font-family:var(--font-heading);letter-spacing:-.025em}
button,input,select,textarea{font:inherit}

/* Long-form information is aligned consistently without affecting headings and controls. */
.public-main p:not(.text-center):not(.text-end),
.public-main .section-desc,
.user-layout main p:not(.text-center):not(.text-end),
.public-footer p,
.news-bps-body p{
    text-align:justify!important;
    text-justify:inter-word;
    hyphens:auto;
}
.public-main p,.user-layout main p{overflow-wrap:anywhere}

/* Organization charts are identity cards, not long-form paragraphs: keep all card text centered. */
.official-chart-card,
.official-chart-card h3,
.official-chart-card p,
.official-chart-card .official-chart-label,
.bps-chart-card,
.bps-chart-card h2,
.bps-chart-card p,
.bps-chart-card small,
.bps-chart-card .bps-chart-label{
    text-align:center!important;
    text-justify:auto!important;
    hyphens:none!important;
}

/* Running slogan sits BELOW the orange navbar line, not inside the logo/title block. */
.public-slogan-ticker{
    position:relative;
    z-index:1015;
    width:100%;
    overflow:hidden;
    border-bottom:1px solid #e4ebef;
    background:#f8fafc;
    box-shadow:0 5px 16px rgba(9,38,58,.06);
}
.public-slogan-ticker-window{width:100%;overflow:hidden;padding:7px 0}
.public-slogan-ticker-track{
    display:flex;
    width:max-content;
    align-items:center;
    will-change:transform;
    animation:tegalmajaSloganTicker 24s linear infinite;
}
.public-slogan-ticker-track>span{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding-right:72px;
    color:#bd4d00;
    font-size:.72rem;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.08em;
    white-space:nowrap;
}
.public-slogan-ticker-track i{font-size:.68rem;color:var(--orange)}
@keyframes tegalmajaSloganTicker{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){
    .public-slogan-ticker-track{animation:none;transform:none}
    .public-slogan-ticker-track>span:not(:first-child){display:none}
    .public-slogan-ticker-track>span:first-child{padding-left:18px}
}

/* Header polish. */
.public-main-nav.site-navbar{background:linear-gradient(105deg,#0a2f4d 0%,#123f66 55%,#0a3152 100%);box-shadow:0 10px 32px rgba(5,31,49,.2)}
.public-nav-brand-logo{border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.public-main-nav.site-navbar .nav-link{font-weight:700;letter-spacing:-.01em}
.public-main-nav.site-navbar .dropdown-menu{padding:9px;border-radius:0 0 15px 15px;box-shadow:0 22px 50px rgba(9,35,53,.18)}
.public-main-nav.site-navbar .dropdown-item{border-radius:9px}
.public-main-nav .public-nav-account .btn{border-radius:12px}

/* Public visual system. */
.public-main{background:#fff}
.page-hero{position:relative;overflow:hidden;padding:62px 0 54px;background:radial-gradient(circle at 88% 16%,rgba(232,117,26,.18),transparent 24%),linear-gradient(135deg,#0b304f,#1b5277);border-bottom:0;box-shadow:inset 0 -4px 0 var(--orange)}
.page-hero::before{content:"";position:absolute;right:8%;bottom:-110px;width:260px;height:260px;border:46px solid rgba(255,255,255,.035);border-radius:50%;pointer-events:none}
.page-hero .container{z-index:1}
.page-hero h1{font-weight:800;line-height:1.14}
.page-hero .breadcrumb{font-size:.8rem}
.section-space{padding:76px 0}
.soft-card,.service-search-card,.information-support-card,.information-news-card,.home-bps-news-card,.home-bps-ebook-card{
    border-color:var(--border-soft)!important;
    border-radius:var(--radius-md)!important;
    box-shadow:var(--shadow-soft)!important;
}
.soft-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.soft-card:hover{border-color:#cad9e2!important;box-shadow:0 18px 42px rgba(15,45,67,.11)!important}
.icon-box{border-radius:14px!important}

/* Forms: clearer hierarchy, larger targets and calmer focus state. */
.form-label{color:#344b5b;font-size:.78rem;font-weight:750}
.form-control,.form-select{
    min-height:48px;
    border-color:#d7e1e8;
    border-radius:12px;
    color:#243947;
    background-color:#fff;
    box-shadow:0 1px 0 rgba(15,45,67,.015);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
textarea.form-control{min-height:120px;line-height:1.65}
.form-control:focus,.form-select:focus{border-color:rgba(232,117,26,.72);box-shadow:0 0 0 4px rgba(232,117,26,.11);background:#fff}
.form-text{color:#7a8b96;font-size:.7rem}
.btn{border-radius:11px;font-weight:750;letter-spacing:-.01em;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-orange{box-shadow:0 8px 20px rgba(232,117,26,.18)}
.btn-navy{box-shadow:0 8px 20px rgba(23,59,87,.15)}

/* Confirmation shown after a visitor/resident sends a form. */
.submission-success-modal .modal-dialog{max-width:510px}
.submission-success-modal .modal-content{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);box-shadow:0 32px 90px rgba(15,45,67,.24)}
.submission-success-modal .modal-content::before{content:"";position:absolute;top:-76px;right:-70px;width:190px;height:190px;border:34px solid rgba(232,117,26,.07);border-radius:50%}
.submission-success-close{position:absolute;top:16px;right:16px;z-index:2}
.submission-success-body{position:relative;z-index:1;padding:42px 38px 36px}
.submission-success-icon{width:74px;height:74px;display:grid;place-items:center;margin:0 auto 20px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#2c9665,#1c7e53);box-shadow:0 14px 32px rgba(32,139,91,.25);font-size:1.75rem}
.submission-success-kicker{display:block;margin-bottom:7px;color:var(--orange-dark);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.submission-success-body h2{margin:0;color:var(--navy);font-size:1.55rem;font-weight:800;line-height:1.25}
.submission-success-body p{max-width:410px;margin:13px auto 20px;color:#627783;font-size:.9rem;line-height:1.7;text-align:center!important}
.submission-success-reference{display:flex;flex-direction:column;gap:3px;margin:0 auto 24px;padding:13px 18px;border:1px dashed #ccd9e1;border-radius:14px;background:#f4f8fa}
.submission-success-reference small{color:#7c8d97;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.submission-success-reference strong{color:var(--navy);font-family:var(--font-heading);font-size:.96rem;letter-spacing:.04em;word-break:break-word}

/* Admin surface refinement. */
.admin-body{font-family:var(--font-body);background:#f4f7fa}
.admin-sidebar{background:linear-gradient(180deg,#0d2f47 0%,#0a273b 100%)}
.admin-topbar{border-bottom-color:#e3e9ed;box-shadow:0 4px 18px rgba(15,45,67,.035)}
.admin-content{padding:28px}
.admin-card,.admin-kpi{border-color:#e0e7ec;border-radius:17px;box-shadow:0 8px 28px rgba(15,45,67,.055)}
.admin-kpi .value{font-family:var(--font-heading)}
.admin-page-heading strong,.admin-brand-copy strong,.admin-card h2,.admin-card h3{font-family:var(--font-heading)}
.table-modern{border-color:#e1e8ed}
.table-modern thead th{background:#f6f8fa;color:#506676}

/* Admin notification center. */
.admin-notification-center{position:relative}
.admin-notification-button{position:relative;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #dfe6eb;border-radius:12px;color:#29485d;background:#fff;font-size:1.02rem;transition:.18s ease}
.admin-notification-button:hover,.admin-notification-button:focus{color:var(--orange-dark);border-color:#efc09e;background:#fff9f4;box-shadow:0 7px 20px rgba(15,45,67,.08)}
.admin-notification-badge{position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff;border-radius:999px;color:#fff;background:#dc3545;font-size:.62rem;font-weight:850;line-height:1;box-shadow:0 4px 10px rgba(220,53,69,.25)}
.admin-notification-badge.is-pulsing{animation:adminNotificationPulse .85s ease 2}
@keyframes adminNotificationPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.admin-notification-menu{width:min(380px,calc(100vw - 24px));padding:0;overflow:hidden;border:1px solid #dfe6eb;border-radius:16px;box-shadow:0 24px 65px rgba(15,45,67,.2)}
.admin-notification-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 15px;background:linear-gradient(135deg,#f8fafb,#fff)}
.admin-notification-header div{display:flex;min-width:0;flex-direction:column}
.admin-notification-header span:first-child{color:#83919a;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.admin-notification-header strong{color:var(--navy);font-family:var(--font-heading);font-size:.92rem}
.admin-notification-total{min-width:32px;height:32px;display:grid!important;place-items:center;padding:0 8px;border-radius:10px;color:#fff!important;background:var(--navy);font-size:.78rem!important;font-weight:850!important;letter-spacing:0!important}
.admin-notification-list{display:grid;border-top:1px solid #edf1f3;border-bottom:1px solid #edf1f3}
.admin-notification-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px 16px;color:inherit;background:#fff;border-bottom:1px solid #eef2f4;transition:.16s ease}
.admin-notification-item:last-child{border-bottom:0}
.admin-notification-item:hover{color:inherit;background:#f8fafb}
.admin-notification-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:.9rem}
.admin-notification-icon.is-service{color:#1d5f8a;background:#e8f2f8}
.admin-notification-icon.is-complaint{color:#a75c11;background:#fff1df}
.admin-notification-icon.is-message{color:#287556;background:#e8f5ef}
.admin-notification-copy{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.admin-notification-copy strong{overflow:hidden;color:#2f4655;font-size:.76rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.admin-notification-copy small{margin-top:2px;color:#82919a;font-size:.65rem}
.admin-notification-count{min-width:29px;height:29px;display:grid;place-items:center;padding:0 7px;border-radius:9px;color:var(--navy);background:#eef3f6;font-size:.7rem;font-weight:850}
.admin-notification-count.has-items{color:#a44e13;background:#fff0e4}
.admin-notification-footer{padding:10px 16px;color:#81909a;background:#fafbfc;font-size:.65rem;text-align:center}
.admin-notification-footer i{margin-right:5px;color:var(--orange-dark)}
.admin-live-toast{position:fixed;right:22px;top:92px;z-index:1100;width:min(360px,calc(100vw - 28px));display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border:1px solid #dce6ec;border-radius:15px;color:#314a59;background:#fff;box-shadow:0 20px 55px rgba(15,45,67,.2);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.22s ease}
.admin-live-toast.show{opacity:1;transform:translateY(0)}
.admin-live-toast>i{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:11px;color:#fff;background:var(--orange)}
.admin-live-toast strong,.admin-live-toast span{display:block}.admin-live-toast strong{color:var(--navy);font-size:.8rem}.admin-live-toast span{margin-top:2px;color:#72848f;font-size:.68rem;line-height:1.45}

/* User portal polish. */
.user-layout{background:#f5f8fa}
.user-topbar{background:rgba(255,255,255,.96);border-bottom:1px solid #e0e8ed;box-shadow:0 7px 24px rgba(15,45,67,.05);backdrop-filter:blur(12px)}
.user-layout main>.alert{border-radius:14px}

/* Auth pages share the same typography and refined controls. */
.auth-shell{font-family:var(--font-body)}
.auth-card{border-radius:22px!important;box-shadow:0 24px 70px rgba(15,45,67,.14)!important}

@media(max-width:1199.98px){
}
@media(max-width:767.98px){
    .section-space{padding:60px 0}
    .admin-content{padding:20px 16px}
    .submission-success-body{padding:36px 24px 30px}
}
@media(max-width:575.98px){
    .public-nav-brand-copy strong{max-width:190px}
    .submission-success-modal .modal-dialog{margin:.75rem}
    .submission-success-modal .modal-content{border-radius:22px}
    .admin-live-toast{right:14px;top:78px}
}

/* Admin notification sound control */
.admin-notification-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.admin-notification-footer>span{min-width:0}
.admin-notification-sound{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:5px 8px;border:1px solid #e4e9ed;border-radius:8px;color:#7c8b94;background:#fff;font:inherit;font-weight:750;line-height:1;transition:.16s ease}
.admin-notification-sound:hover,.admin-notification-sound:focus{color:var(--orange-dark);border-color:#efc09e;background:#fff8f2;outline:none}
.admin-notification-sound.is-active{color:#237454;border-color:#cfe8dc;background:#eef9f4}
.admin-notification-sound i{margin-right:0}
@media(max-width:480px){.admin-notification-footer{align-items:flex-start;flex-direction:column}.admin-notification-sound{align-self:flex-end}}

/* Managed homepage popup carousel */
.homepage-popup-modal .modal-dialog{max-width:700px}
.homepage-popup-modal .modal-content{position:relative;background:#fff}
.homepage-popup-carousel{position:relative}
.homepage-popup-body{min-height:590px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:64px}
.homepage-popup-image-wrap{width:220px;height:190px;margin-bottom:18px;border-radius:22px;overflow:hidden;background:#f5f8fa}
.homepage-popup-image-wrap img{width:100%;height:100%;object-fit:contain}
.homepage-popup-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.homepage-popup-indicators{bottom:16px;margin-bottom:0}
.homepage-popup-indicators [data-bs-target]{width:9px;height:9px;border:0;border-radius:999px;background-color:var(--navy);opacity:.28}
.homepage-popup-indicators .active{width:26px;opacity:1}
.homepage-popup-control{top:50%;bottom:auto;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:rgba(23,59,87,.82);opacity:.9}
.homepage-popup-control.carousel-control-prev{left:14px}
.homepage-popup-control.carousel-control-next{right:14px}
.homepage-popup-control:hover{opacity:1}
.homepage-popup-control .carousel-control-prev-icon,.homepage-popup-control .carousel-control-next-icon{width:18px;height:18px}
.upload-size-feedback{font-weight:650}
@media(max-width:767.98px){.homepage-popup-modal .modal-dialog{padding:8px}.homepage-popup-body{min-height:520px;padding:30px 48px 58px}.homepage-popup-image-wrap{width:170px;height:150px}.homepage-popup-control{width:36px;height:36px}.homepage-popup-control.carousel-control-prev{left:8px}.homepage-popup-control.carousel-control-next{right:8px}}

/* APBDes public access control. */
.apbdes-access-control{border:1px solid #dce6ed!important;background:linear-gradient(135deg,#fff,#f8fafb)}
.apbdes-access-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 52px;border-radius:16px;font-size:1.15rem}
.apbdes-access-icon.is-open{color:#13795b;background:#e6f6f0}
.apbdes-access-icon.is-locked{color:#b54708;background:#fff0e3}
.admin-notification-sound.is-active{color:#13795b!important;background:#e9f8f2!important;border-color:#b9e7d5!important}
.admin-notification-sound.is-disabled{color:#7d8b95!important}

/* =========================================================
   HOME MOBILE — compact horizontal rails like Berita Desa
   Keeps homepage sections from stacking vertically on phones.
   ========================================================= */
@media (max-width: 575.98px){
    .home-section-compact{
        padding:42px 0;
        overflow:hidden;
    }

    .home-section-compact .container{
        padding-left:20px;
        padding-right:20px;
    }

    .home-section-compact .section-title{
        font-size:1.72rem;
        line-height:1.16;
    }

    .home-section-compact .section-desc{
        font-size:.9rem;
        line-height:1.65;
    }

    /* Generic horizontal rail used by services, videos and products. */
    .home-mobile-rail{
        display:flex!important;
        flex-wrap:nowrap!important;
        gap:14px!important;
        width:auto;
        margin-left:0!important;
        margin-right:-20px!important;
        padding:2px 20px 14px 0!important;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scroll-padding-left:0;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .home-mobile-rail::-webkit-scrollbar{display:none}
    .home-mobile-rail > [class*="col-"]{
        flex:0 0 auto!important;
        width:auto!important;
        max-width:none!important;
        padding-left:0!important;
        padding-right:0!important;
        scroll-snap-align:start;
        scroll-snap-stop:normal;
    }

    .home-services-rail > [class*="col-"]{
        flex-basis:min(76vw,310px)!important;
        width:min(76vw,310px)!important;
    }
    .home-services-rail .service-card{
        min-height:210px;
        padding:20px;
    }
    .home-services-rail .service-card h3{
        font-size:1.05rem;
        line-height:1.35;
    }
    .home-services-rail .service-card p{
        font-size:.82rem;
        line-height:1.55;
    }

    .home-videos-rail > [class*="col-"]{
        flex-basis:min(86vw,390px)!important;
        width:min(86vw,390px)!important;
    }
    .home-videos-rail .video-card{
        overflow:hidden;
        border-radius:18px;
    }
    .home-videos-rail .video-card .ratio{
        border-radius:18px 18px 0 0;
        overflow:hidden;
    }

    .home-products-rail > [class*="col-"]{
        flex-basis:min(78vw,330px)!important;
        width:min(78vw,330px)!important;
    }
    .home-products-rail .product-card{
        overflow:hidden;
        border-radius:18px;
    }
    .home-products-rail .product-image,
    .home-products-rail .image-placeholder{
        width:100%;
        height:190px;
        object-fit:cover;
    }

    /* E-books now behave like the existing Berita Desa slider. */
    .home-bps-ebook-grid{
        display:flex!important;
        grid-template-columns:none!important;
        gap:14px;
        margin-right:-20px;
        padding:2px 20px 14px 0;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .home-bps-ebook-grid::-webkit-scrollbar{display:none}
    .home-bps-ebook-card{
        flex:0 0 min(84vw,360px);
        width:min(84vw,360px);
        min-height:136px;
        scroll-snap-align:start;
    }
    .home-bps-empty-state{
        flex:0 0 calc(100% - 20px);
        width:calc(100% - 20px);
    }

    /* Keep Berita Desa visually consistent with every other rail. */
    .home-bps-news-grid{
        margin-right:-20px;
        padding-right:20px;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }
    .home-bps-news-grid::-webkit-scrollbar{display:none}
    .home-bps-news-card{
        min-width:min(78vw,330px);
        width:min(78vw,330px);
        flex:0 0 min(78vw,330px);
    }

    /* Headings/actions stay compact instead of creating a tall stack. */
    .home-section-compact > .container > .d-flex.flex-column.flex-lg-row,
    .home-section-compact > .container > .d-flex.justify-content-between.align-items-end{
        align-items:flex-start!important;
        gap:14px!important;
        margin-bottom:20px!important;
    }
    .home-section-compact > .container > .d-flex .btn{
        width:auto;
        min-height:42px;
        padding:9px 15px;
        border-radius:12px;
        font-size:.8rem;
    }

    .bps-section-heading{
        gap:12px;
        margin-bottom:20px;
    }
    .bps-see-all-link{
        font-size:.86rem;
    }
}

/* =========================================================
   GLOBAL MOBILE RESPONSIVE SYSTEM — ALL PAGES
   Public website, resident portal, authentication and admin.
   ========================================================= */
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
svg,canvas{max-width:100%}
.public-main,.admin-main,.admin-content,.user-layout main,.auth-form-wrap{min-width:0}
.public-main pre,.user-layout pre,.admin-content pre{max-width:100%;overflow:auto}
.public-main code,.user-layout code,.admin-content code{overflow-wrap:anywhere}
.mobile-table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:12px}
.mobile-table-scroll>table{margin-bottom:0}
.mobile-table-scroll:focus-visible{outline:2px solid rgba(232,117,26,.45);outline-offset:2px}

@media(max-width:991.98px){
    .public-main .container,.public-footer .container,.user-layout>.user-topbar .container,.user-layout main.container{max-width:100%}
    .public-main .row,.user-layout main .row,.admin-content .row{min-width:0}
    .public-main [class*="col-"],.user-layout main [class*="col-"],.admin-content [class*="col-"]{min-width:0}
    .public-main iframe{width:100%!important}
    .public-main .ratio iframe{height:100%}
    .public-main .dropdown-menu{max-width:calc(100vw - 28px)}
    .footer-bottom{align-items:flex-start}
}

@media(max-width:767.98px){
    :root{--mobile-gutter:16px}

    /* Shared spacing and typography */
    .public-main .container,.public-footer .container,.user-topbar .container,.user-layout main.container{padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}
    .public-main .section-space{padding:42px 0}
    .public-main .page-hero{padding:34px 0 30px}
    .public-main .page-hero h1{font-size:clamp(1.8rem,8.5vw,2.35rem);line-height:1.1;overflow-wrap:anywhere}
    .public-main .section-title,.user-layout .section-title,.admin-content h1,.admin-content h2,.admin-content h3{overflow-wrap:anywhere}
    .public-main .section-title{font-size:clamp(1.55rem,7vw,2rem);line-height:1.16}
    .public-main .display-4,.public-main .display-5,.public-main .display-6{font-size:clamp(1.7rem,8vw,2.25rem)}
    .public-main p,.user-layout main p,.admin-content p{line-height:1.65}
    .public-main .row.g-5{--bs-gutter-y:1.5rem}
    .public-main .row.g-4,.user-layout main .row.g-4,.admin-content .row.g-4{--bs-gutter-y:1rem}

    /* Touch-friendly controls and forms */
    .form-control,.form-select{min-height:46px;font-size:16px!important;padding:.72rem .82rem}
    textarea.form-control{min-height:110px}
    input[type="file"].form-control{max-width:100%;padding:.62rem .7rem;overflow:hidden;text-overflow:ellipsis}
    .form-label{margin-bottom:.45rem;font-size:.82rem}
    .form-text,.invalid-feedback,.valid-feedback{font-size:.72rem;line-height:1.45}
    .input-group{max-width:100%}
    .input-group>.form-control,.input-group>.form-select{min-width:0}
    .btn{min-height:44px;white-space:normal;line-height:1.25}
    .btn.btn-sm{min-height:38px}
    .btn-group,.btn-group-vertical{max-width:100%}

    /* Shared cards */
    .soft-card,.admin-card,.admin-kpi,.kpi-mini,.insight-card,.monography-kpi-card,.facility-summary-card{max-width:100%}
    .soft-card{border-radius:16px}
    .soft-card.p-5,.soft-card.p-lg-5{padding:1.15rem!important}
    .soft-card.p-4{padding:1rem!important}

    /* Generic page-heading/action rows */
    .public-main .d-flex.justify-content-between.align-items-center,
    .public-main .d-flex.justify-content-between.align-items-end,
    .public-main .d-flex.justify-content-between.align-items-start,
    .user-layout main .d-flex.justify-content-between.align-items-center,
    .user-layout main .d-flex.justify-content-between.align-items-end,
    .admin-content .d-flex.justify-content-between.align-items-center,
    .admin-content .d-flex.justify-content-between.align-items-end{
        gap:.8rem;
    }
    .public-main .pagination,.user-layout .pagination,.admin-content .pagination{flex-wrap:wrap;gap:3px}
    .public-main .page-link,.user-layout .page-link,.admin-content .page-link{min-width:38px;min-height:38px;display:grid;place-items:center;padding:.35rem .55rem}

    /* Tables: every page scrolls inside its card instead of widening the viewport */
    .table-responsive,.mobile-table-scroll{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
    .table-responsive>.table,.mobile-table-scroll>.table{width:max-content;min-width:680px;max-width:none}
    .public-main .table-modern,.user-layout .table-modern,.admin-content .table-modern{min-width:680px}
    .table-modern th,.table-modern td{padding:.68rem .72rem!important;font-size:.75rem!important}
    .table-modern .btn{min-height:34px;padding:.38rem .55rem}

    /* Modals */
    .modal-dialog{margin:.55rem auto;padding:0 .35rem}
    .modal-dialog:not(.modal-fullscreen){max-width:calc(100vw - 10px)}
    .modal-content{max-height:calc(100dvh - 18px);overflow:hidden;border-radius:18px!important}
    .modal-header,.modal-footer{padding:14px 16px}
    .modal-body{padding:16px;overflow-y:auto;overscroll-behavior:contain}
    .modal-footer{gap:8px;flex-wrap:wrap}
    .modal-footer>*{margin:0}
    .modal-footer .btn{flex:1 1 140px}

    /* Public navigation and footer */
    .public-main-nav.site-navbar{position:sticky;top:0;z-index:1030}
    .public-main-nav.site-navbar .navbar-collapse{max-height:calc(100dvh - 74px);overscroll-behavior:contain}
    .public-main-nav.site-navbar .dropdown-menu{max-width:100%;white-space:normal}
    .public-main-nav.site-navbar .dropdown-item{padding:.7rem .85rem;white-space:normal;line-height:1.35}
    .public-slogan-ticker-window{padding:6px 0}
    .public-slogan-ticker-track>span{font-size:.63rem;letter-spacing:.04em}
    .public-footer{padding-top:38px}
    .public-footer .row{--bs-gutter-y:1.6rem}
    .public-footer .col-6{width:50%}
    .footer-brand{align-items:flex-start}
    .footer-contact-list p{align-items:flex-start;overflow-wrap:anywhere}
    .floating-wa{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:1025}

    /* Public content media */
    .news-image,.product-image,.image-placeholder{max-width:100%;height:auto;min-height:180px;object-fit:cover}
    .commerce-detail-image{height:280px!important}
    .map-frame,#contactMap{width:100%;min-height:280px!important;border-radius:16px}
    .ratio{max-width:100%;overflow:hidden;border-radius:14px}
    .official-chart-shell,.bps-tree-scroll,.org-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
    .official-chart-shell{scrollbar-width:thin}
    .org-chart{padding:1.25rem 1rem}
    .bps-tree-card,.official-node-card,.org-node{text-align:center!important}
    .bps-tree-card *,.official-node-card *,.org-node *{text-align:center!important}

    /* Resident portal */
    .user-topbar{position:sticky;top:0;z-index:1025;padding:.65rem 0!important}
    .user-topbar .container{gap:.7rem!important}
    .user-topbar .site-brand-logo{width:42px;height:42px;flex:0 0 42px}
    .user-topbar .container>a{min-width:0;gap:.65rem!important}
    .user-topbar .container>a>div:last-child{min-width:0}
    .user-topbar .container>a strong{display:block;overflow:hidden;max-width:160px;white-space:nowrap;text-overflow:ellipsis;font-size:.86rem}
    .user-topbar .container>a .small{font-size:.67rem}
    .user-topbar .btn{width:42px;height:42px;display:grid;place-items:center;padding:0;border-radius:11px}
    .user-topbar .btn i{margin:0!important}
    .user-layout main.container{padding-top:1rem!important;padding-bottom:2rem!important}
    .user-layout main>.d-flex:first-child .d-flex.flex-wrap{width:100%}
    .user-layout main>.d-flex:first-child .d-flex.flex-wrap .btn{flex:1 1 160px}
    .user-layout .kpi-mini{padding:.85rem}
    .user-layout .kpi-mini strong{font-size:1.2rem}

    /* Admin panel */
    .admin-content{padding:14px 12px 24px}
    .admin-topbar{height:64px;padding:0 10px;gap:8px}
    .admin-topbar-start{gap:.55rem;flex:1 1 auto;overflow:hidden}
    .admin-menu-button,.admin-notification-button{width:40px;height:40px;flex:0 0 40px}
    .admin-page-heading{max-width:min(48vw,230px)}
    .admin-page-heading strong{font-size:.84rem!important}
    .admin-user-avatar{width:38px;height:38px;flex:0 0 38px}
    .admin-user-button{padding:2px!important}
    .admin-content>.d-flex.flex-column.flex-lg-row:first-child .d-flex.flex-wrap{width:100%}
    .admin-content>.d-flex.flex-column.flex-lg-row:first-child .d-flex.flex-wrap .btn{flex:1 1 160px}
    .admin-card{padding:14px;border-radius:14px}
    .admin-kpi{padding:13px;border-radius:14px}
    .admin-kpi .value{font-size:1.35rem}
    .admin-kpi .icon{width:38px;height:38px;flex:0 0 38px}
    .admin-filter-bar .row>*{width:100%}
    .admin-filter-bar .btn{width:100%}
    .admin-inline-import-form{flex-direction:column;align-items:stretch}
    .admin-inline-import-form>*{width:100%}
    .admin-form-actions{position:sticky;bottom:0;z-index:5;flex-wrap:wrap;margin:18px -14px -14px;padding:12px 14px;box-shadow:0 -8px 18px rgba(15,45,67,.05)}
    .admin-form-actions .btn{flex:1 1 140px}
    .admin-chart-wrap{height:240px}
    .admin-notification-menu{position:fixed!important;top:66px!important;right:8px!important;left:auto!important;width:calc(100vw - 16px)!important;max-width:390px;max-height:calc(100dvh - 76px);overflow-y:auto;transform:none!important}
    .admin-notification-header{padding:14px}
    .admin-notification-item{padding:11px 12px}
    .admin-notification-footer{padding:10px 12px}
    .admin-live-toast{top:72px;right:10px;width:calc(100vw - 20px)}

    /* Auth pages */
    .auth-shell{display:block;min-height:100dvh}
    .auth-form-wrap{min-height:100dvh;align-items:flex-start;padding:14px 12px 24px}
    .auth-card{width:100%;max-width:560px;margin:0 auto;padding:18px 16px!important;border-radius:18px!important}
    .auth-card h1,.auth-card h2{font-size:clamp(1.65rem,8vw,2.1rem);line-height:1.12}
    .auth-card .btn{width:100%}
    .auth-card .row{--bs-gutter-y:.85rem}

    /* Charts and long data blocks */
    .monography-chart-wrap,.monography-chart-wrap.is-doughnut,.monography-chart-wrap.is-wide{height:250px!important}
    .monography-chart-card{padding:14px!important}
    .monography-chart-heading{gap:8px}
    .facility-summary-card{overflow:hidden}
    .information-agenda-item{grid-template-columns:50px minmax(0,1fr)}
}

@media(max-width:575.98px){
    :root{--mobile-gutter:14px}
    .public-main .section-space{padding:34px 0}
    .public-main .page-hero{padding:28px 0 26px}
    .public-main .page-hero .breadcrumb{font-size:.72rem;flex-wrap:wrap}
    .section-kicker{font-size:.66rem;letter-spacing:.09em}

    /* Make action groups comfortable on narrow phones */
    .public-main form .row>.col-12>.btn:not(.btn-sm),
    .auth-card form>.btn:not(.btn-sm){width:100%}
    .public-main .d-flex.flex-wrap.gap-2>.btn,
    .user-layout main .d-flex.flex-wrap.gap-2>.btn{flex:1 1 135px}

    .public-footer .col-6{width:100%}
    .public-footer .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem}
    .footer-bottom{font-size:.66rem}

    .table-responsive>.table,.mobile-table-scroll>.table,.public-main .table-modern,.user-layout .table-modern,.admin-content .table-modern{min-width:620px}
    .table-modern th,.table-modern td{padding:.6rem .64rem!important;font-size:.71rem!important}

    .modal-dialog{margin:.35rem auto;padding:0 .2rem}
    .modal-content{max-height:calc(100dvh - 10px);border-radius:16px!important}
    .modal-header,.modal-footer{padding:12px 13px}
    .modal-body{padding:13px}
    .modal-footer .btn{flex-basis:120px}

    .homepage-popup-modal .modal-dialog{padding:0!important}
    .homepage-popup-body{min-height:min(500px,calc(100dvh - 24px))!important;padding:28px 38px 52px!important}
    .homepage-popup-image-wrap{width:145px!important;height:125px!important}
    .homepage-popup-actions{width:100%}
    .homepage-popup-actions .btn{flex:1 1 120px}

    .user-topbar .container>a strong{max-width:125px}
    .user-topbar .container>a .small{display:none}
    .user-layout main>.d-flex:first-child .d-flex.flex-wrap .btn{flex-basis:100%}
    .user-layout dl.row dt,.user-layout dl.row dd{width:100%}
    .user-layout dl.row dt{margin-top:.5rem;color:#71818b;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
    .user-layout dl.row dd{margin-bottom:.25rem}

    .admin-topbar{padding:0 8px}
    .admin-page-heading{max-width:38vw}
    .admin-page-heading strong{font-size:.79rem!important}
    .admin-notification-menu{right:5px!important;width:calc(100vw - 10px)!important}
    .admin-notification-item{grid-template-columns:36px minmax(0,1fr) auto;gap:8px}
    .admin-notification-icon{width:36px;height:36px}
    .admin-notification-footer{align-items:stretch!important}
    .admin-notification-sound{align-self:stretch!important;justify-content:center;min-height:38px}
    .admin-content .row.g-3>.col-6{width:50%}
    .admin-content .admin-kpi .small{font-size:.68rem}
    .admin-content .admin-kpi-link{font-size:.62rem}

    .auth-form-wrap{padding:8px 8px 18px}
    .auth-card{padding:16px 13px!important;border-radius:15px!important}

    .commerce-detail-image{height:230px!important}
    .map-frame,#contactMap{min-height:240px!important}
    .official-chart-shell,.bps-tree-scroll,.org-scroll{margin-left:-4px;margin-right:-4px}
}

@media(max-width:380px){
    .public-nav-brand-copy strong{max-width:155px!important;font-size:.87rem!important}
    .public-main-nav.site-navbar .navbar-toggler{width:40px;height:40px}
    .admin-page-heading{max-width:32vw}
    .admin-user-avatar{width:36px;height:36px;flex-basis:36px}
    .user-topbar .container>a strong{max-width:105px;font-size:.8rem}
    .public-footer .footer-links{grid-template-columns:1fr}
}

/* Respect iPhone safe areas without affecting desktop. */
@supports(padding:max(0px)){
    @media(max-width:767.98px){
        .admin-content{padding-bottom:max(24px,env(safe-area-inset-bottom))}
        .public-footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
        .user-layout main.container{padding-bottom:max(24px,env(safe-area-inset-bottom))!important}
    }
}

/* Preserve the compact homepage rail proportions after the global mobile media rules. */
@media(max-width:575.98px){
    .home-products-rail .product-image,.home-products-rail .image-placeholder{height:190px!important;min-height:190px!important;object-fit:cover}
    .home-bps-news-media{aspect-ratio:4/3}
    .home-bps-news-media img{height:100%!important}
}