/* Visual CSS extracted from the supplied Pulosari stable Command Center source. */

/* Command Center Desa Pulosari V2 - lapisan enhancement, tidak mengubah database */
.v2-commandbar{display:grid;grid-template-columns:1fr auto;gap:10px;background:rgba(255,255,255,.96);border:1px solid #c9e2ef;border-radius:16px;padding:10px;margin:0 0 12px;box-shadow:0 8px 20px rgba(30,96,130,.07)}
.v2-search{position:relative}.v2-search span{position:absolute;left:13px;top:5px;font-size:25px;color:#4d87a5}.v2-search input{width:100%;padding:11px 13px 11px 40px;border:1px solid #c9e0eb;border-radius:11px;background:#fbfeff;color:#173a5e;outline:none}.v2-search input:focus{border-color:#69bddd;box-shadow:0 0 0 3px rgba(40,191,232,.12)}
.v2-actions{display:flex;gap:7px;align-items:center}.v2-actions button,.v2-actions a{border:1px solid #c9e0eb;background:#fff;color:#285f7c;border-radius:10px;padding:9px 11px;font-size:10px;font-weight:900;cursor:pointer}
.v2-today{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.v2-metric{background:#fff;border:1px solid #cce4ee;border-radius:15px;padding:12px;box-shadow:0 8px 20px rgba(36,103,136,.06)}.v2-metric span{font-size:20px}.v2-metric b{display:block;font-size:22px;margin:4px 0 2px;color:#174a72}.v2-metric small{font-size:9px;color:#718a9a}
.v2-priority{display:flex;gap:7px;flex-wrap:wrap}.v2-priority a,.v2-priority button{display:flex;align-items:center;gap:7px;border:1px solid #cce3ed;background:#fff;color:#315e78;border-radius:999px;padding:8px 11px;font-size:9px;font-weight:900;box-shadow:0 5px 13px rgba(35,92,120,.05);cursor:pointer}.v2-priority i{font-style:normal;font-size:17px}
.v2-filters{display:flex;gap:6px;overflow:auto;padding:1px 1px 8px}.v2-filter{white-space:nowrap;border:1px solid #c9e1eb;background:#fff;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:900;color:#436c84;cursor:pointer}.v2-filter.active{background:#177fad;border-color:#177fad;color:#fff}
.apps .app{position:relative}.v2-favorite{position:absolute;right:7px;top:7px;z-index:4;width:27px;height:27px;border-radius:50%;border:1px solid #d5e6ed;background:#fff;color:#9eb0ba;cursor:pointer}.v2-favorite.on{color:#e5a11a;background:#fff7dc}.v2-status{position:absolute;left:7px;top:7px;z-index:4;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #d7e8ee;border-radius:999px;padding:4px 6px;font-size:7px;font-weight:900;color:#718894}.v2-status-dot{width:7px;height:7px;border-radius:50%;background:#aebac1}.v2-status.checking{color:#956900}.v2-status.checking .v2-status-dot{background:#e4a928}.v2-status.online{color:#087b58}.v2-status.online .v2-status-dot{background:#20b979}.v2-status.offline{color:#b63333}.v2-status.offline .v2-status-dot{background:#e34e4e}.v2-no-results{display:none;grid-column:1/-1;background:#fff;border:1px dashed #bddae6;border-radius:14px;padding:18px;text-align:center;color:#678294;font-size:11px}
.v2-monitor-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:10px}.v2-notify{display:grid;gap:7px;max-height:230px;overflow:auto}.v2-note{font-size:10px;line-height:1.4;padding:8px 9px;border-radius:10px;background:#f6fbfd;border:1px solid #dbeaf0}.v2-note.good{background:#eefaf5;border-color:#ccebdc}.v2-note.warn{background:#fff7e4;border-color:#f0dda9}.v2-note.bad{background:#fff0f0;border-color:#efc5c5}
.v2-system{display:grid;gap:7px}.v2-system-row{display:flex;justify-content:space-between;gap:12px;font-size:9px;padding-bottom:6px;border-bottom:1px dashed #dce9ef}.v2-badge{font-size:8px;font-weight:900;border-radius:999px;padding:4px 7px;background:#edf5f8;color:#58768a}.v2-badge.good{background:#e7f8f1;color:#087b58}.v2-badge.warn{background:#fff3d6;color:#8b6200}
.v2-emergency{display:grid;grid-template-columns:1fr 1fr;gap:7px}.v2-emergency a{border:1px solid #d1e5ed;background:#f8fcfd;border-radius:11px;padding:10px 6px;text-align:center;font-size:9px;font-weight:900}.v2-emergency i{display:block;font-style:normal;font-size:21px;margin-bottom:3px}
body.v2-compact .app{min-height:145px;padding:10px 8px}body.v2-compact .app .ico{width:43px;height:43px;font-size:24px}body.v2-compact .app p{display:none}
body.v2-dark{color:#d9eaf1;background:linear-gradient(180deg,#0b202a,#102d38)}body.v2-dark .topbar,body.v2-dark .v2-commandbar,body.v2-dark .app,body.v2-dark .stat,body.v2-dark .panel,body.v2-dark .v2-metric,body.v2-dark .berita-card{background:#153744;border-color:#315567;color:#e0eff4}body.v2-dark .identity small,body.v2-dark .app p,body.v2-dark .stat .hint,body.v2-dark .v2-metric small{color:#a5bbc4}body.v2-dark .v2-search input{background:#102f3c;color:#fff;border-color:#315567}body.v2-dark .v2-actions button,body.v2-dark .v2-actions a,body.v2-dark .v2-filter,body.v2-dark .v2-priority a,body.v2-dark .v2-priority button{background:#153744;border-color:#315567;color:#dcecf1}
@media(max-width:1250px){.v2-today{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.v2-commandbar{grid-template-columns:1fr}.v2-actions{display:none}.v2-monitor-grid{grid-template-columns:1fr}.v2-today{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.v2-today{grid-template-columns:repeat(2,1fr)}.v2-emergency{grid-template-columns:1fr}.v2-commandbar{position:sticky;top:0;z-index:15}.v2-priority{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}}
.v2-global-alert{display:flex;align-items:center;gap:7px;background:#fff7dd;border:1px solid #eedb99;color:#765314;border-radius:13px;padding:10px 13px;margin:0 0 10px;font-size:10px;box-shadow:0 6px 16px rgba(104,83,24,.05)}
body.v2-dark .v2-global-alert{background:#4a3b17;border-color:#745e24;color:#ffe9a8}


/* FOOTER_ASLI_DIPERTAHANKAN_V1: tema tidak mengubah footer */



:root{--navy:#10365f;--blue:#168bd2;--cyan:#28bfe8;--green:#25a978;--text:#173a5e;--muted:#5f7b94;--line:#c9e2ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:radial-gradient(circle at 88% 8%,rgba(55,183,232,.20),transparent 28%),radial-gradient(circle at 12% 72%,rgba(71,204,159,.16),transparent 25%),linear-gradient(180deg,#f8fdff,#eef9fc 55%,#e8f6f7)}
a{color:inherit;text-decoration:none}.shell{max-width:1600px;margin:auto;min-height:100vh;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.identity{display:flex;align-items:center;gap:12px}.logo-wrap{width:62px;height:62px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:6px;box-shadow:0 8px 20px rgba(22,92,130,.08)}.logo-wrap img{width:100%;height:100%;object-fit:contain}.identity h1{margin:0;font-size:20px}.identity small{color:var(--muted)}
.datetime{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:16px;padding:10px 16px;min-width:220px;text-align:right}.datetime b{display:block;font-size:19px;color:#0f5e87}.datetime small{color:var(--muted)}
.hero{min-height:410px;border-radius:26px;border:1px solid #c7e4f0;overflow:hidden;position:relative;display:grid;grid-template-columns:1.02fr .98fr;background:#e7f6fb;box-shadow:0 18px 40px rgba(27,101,141,.10)}
.hero-slider{position:absolute;inset:0}.hero-slide{position:absolute;inset:0;opacity:0;background-position:right center;background-repeat:no-repeat;background-size:58% auto;animation:heroFade 18s infinite}
.hero-slide.s1{background-image:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.93) 48%,rgba(255,255,255,.12) 72%),url('assets/hero_network.webp');animation-delay:0s}
.hero-slide.s2{background-image:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.72) 36%,rgba(255,255,255,0) 54%),url('assets/hero_budaya_pulosari.png');background-size:46% auto;background-position:right center;animation-delay:6s}
.hero-slide.s3{background-image:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.84) 42%,rgba(255,255,255,.06) 64%),url('assets/hero_digital_baru.png');background-size:58% auto;background-position:right center;animation-delay:12s}
@keyframes heroFade{0%{opacity:0}5%{opacity:1}28%{opacity:1}33%{opacity:0}100%{opacity:0}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 46%,rgba(29,158,211,.08) 62%,rgba(37,169,120,.06) 100%),linear-gradient(180deg,transparent 68%,rgba(228,248,249,.58));pointer-events:none}
.hero-copy{position:relative;z-index:2;align-self:center;padding:40px 42px}.kicker{font-size:21px;font-weight:900;color:var(--green);letter-spacing:.8px}.hero-copy h2{margin:5px 0 2px;font-size:50px;line-height:.95;color:#143c69}.hero-copy h2 span{color:#159bc5}.hero-copy h3{margin:13px 0 8px;font-size:22px}.hero-copy p{max-width:530px;color:#58738c;line-height:1.55}.welcome{margin-top:22px;width:min(430px,100%);background:rgba(255,255,255,.82);border:1px solid rgba(58,155,194,.20);border-radius:16px;padding:15px 17px}.welcome b{display:block;color:#164a75;margin-bottom:4px}.welcome small{color:#5f7990}
.section-title{margin:24px 4px 12px;font-weight:900;font-size:18px;color:#174a72;display:flex;align-items:center;gap:9px}.section-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#73c9e7,transparent)}
.apps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.app{min-height:182px;background:linear-gradient(180deg,#fff,#f5fbfd);border:1px solid #cee5ef;border-radius:18px;padding:16px 12px;text-align:center;box-shadow:0 10px 24px rgba(35,103,135,.07);transition:.18s}.app:hover{transform:translateY(-3px)}.app .ico{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;margin:0 auto 10px;font-size:31px;background:linear-gradient(135deg,#e8f8ff,#e9fbf4);border:1px solid #cae8ed}.app h4{margin:0 0 6px;font-size:14px}.app p{margin:0;color:#668098;font-size:11px;line-height:1.4;min-height:45px}.open{display:inline-block;margin-top:11px;padding:7px 15px;border-radius:999px;background:#eaf5fb;border:1px solid #c6dfeb;color:#174f78;font-size:10px;font-weight:900}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.stat,.panel{background:rgba(255,255,255,.92);border:1px solid #cce4ee;border-radius:18px;padding:16px;box-shadow:0 10px 22px rgba(36,103,136,.06)}.stat .label{font-size:11px;color:#5a7690}.stat .value{font-size:24px;font-weight:900;margin-top:7px}.stat .hint{font-size:10px;color:#7b91a4;margin-top:4px}.info-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;margin-top:12px}.panel h4{margin:0 0 11px}.news{display:grid;gap:8px}.news div{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#54728b;padding-bottom:7px;border-bottom:1px dashed #d8e9f0}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick a{border:1px solid #d1e6ef;background:#f6fbfd;border-radius:12px;text-align:center;padding:10px 5px;font-size:10px}.quick span{display:block;font-size:22px;margin-bottom:4px}
.berita-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 4px 12px}.berita-head h3{margin:0;color:#174a72;font-size:18px}.berita-head a{font-size:11px;font-weight:800;color:#168bd2;background:#fff;border:1px solid #cce4ee;border-radius:999px;padding:8px 13px}
.berita-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.berita-card{overflow:hidden;background:#fff;border:1px solid #cce4ee;border-radius:18px;box-shadow:0 10px 24px rgba(35,103,135,.07);display:flex;flex-direction:column;min-height:330px}
.berita-img{height:165px;background:linear-gradient(135deg,#dff5fb,#e9fbf4);overflow:hidden;display:grid;place-items:center;color:#5e8197;font-size:38px}
.berita-img img{width:100%;height:100%;object-fit:cover;display:block}
.berita-body{padding:14px;display:flex;flex-direction:column;flex:1}.berita-date{font-size:10px;color:#7a92a5;margin-bottom:6px}.berita-title{font-size:14px;font-weight:900;line-height:1.35;color:#173f68;margin-bottom:7px}.berita-excerpt{font-size:11px;line-height:1.55;color:#637f95;flex:1}.berita-read{display:inline-block;margin-top:12px;font-size:10px;font-weight:900;color:#1675a7}.berita-empty{grid-column:1/-1;background:#fff;border:1px dashed #bddce8;border-radius:16px;padding:20px;text-align:center;color:#648197;font-size:12px}
.footer{padding:18px 4px 8px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#5d788e}
.modal{position:fixed;inset:0;background:rgba(11,38,60,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:99}.modal.show{display:flex}.modal-box{width:min(540px,100%);background:#fff;border-radius:18px;border:1px solid #c8e3ed;padding:20px}.modal-box h3{margin:0 0 8px}.modal-box p{font-size:13px;color:#617d92}.field label{display:block;font-size:11px;font-weight:800;margin:10px 0 4px}.field input,.field textarea{width:100%;padding:10px;border:1px solid #c9e0eb;border-radius:9px}.field textarea{min-height:80px}.actions{text-align:right;margin-top:12px}.btn{border:0;border-radius:9px;padding:9px 14px;background:#168bd2;color:#fff;font-weight:800;cursor:pointer}.btn.soft{background:#edf5f8;color:#285b79;border:1px solid #d0e3eb}
@media(max-width:1250px){.apps{grid-template-columns:repeat(4,1fr)}.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.berita-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-copy{padding:30px 24px}.apps{grid-template-columns:repeat(3,1fr)}.info-grid{grid-template-columns:1fr}.hero-slide{background-size:auto 62%;background-position:right bottom}.hero-slide.s2{background-size:auto 56%;background-position:right bottom}.hero-slide.s3{background-size:auto 58%;background-position:right bottom}}
@media(max-width:650px){.berita-grid{grid-template-columns:1fr}.shell{padding:10px}.topbar{flex-direction:column;align-items:flex-start}.datetime{width:100%;text-align:left}.hero{min-height:570px}.hero-copy h2{font-size:36px}.apps{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.hero-slide{background-size:auto 48%;background-position:center bottom}.hero-slide.s2{background-size:auto 42%;background-position:center bottom}.hero-slide.s3{background-size:auto 44%;background-position:center bottom}.footer{flex-direction:column;text-align:center}}



/* =========================================================
   TEMA NYAMAN COMMAND CENTER DESA PULOSARI
   Hanya tampilan. Tidak mengubah database / link / fitur.
========================================================= */
:root{
  --tn-bg:#eef7fb;
  --tn-bg2:#f8fcfe;
  --tn-card:#ffffff;
  --tn-text:#123a5a;
  --tn-title:#0d4f82;
  --tn-muted:#607d91;
  --tn-line:#d7e7ef;
  --tn-blue:#157ee8;
  --tn-cyan:#16a6d9;
  --tn-green:#139667;
  --tn-yellow:#e6a423;
  --tn-shadow:0 10px 28px rgba(39,91,122,.09);
}

/* Paksa tema terang nyaman walaupun tema gelap pernah tersimpan */
html,body{
  background:
    radial-gradient(circle at 92% 7%,rgba(31,154,220,.10),transparent 24%),
    radial-gradient(circle at 5% 82%,rgba(44,181,132,.08),transparent 22%),
    linear-gradient(180deg,var(--tn-bg2) 0%,var(--tn-bg) 52%,#f7fbfd 100%)!important;
  color:var(--tn-text)!important;
}

/* Netralisasi mode gelap lama */
body.v2-dark{
  background:
    radial-gradient(circle at 92% 7%,rgba(31,154,220,.10),transparent 24%),
    radial-gradient(circle at 5% 82%,rgba(44,181,132,.08),transparent 22%),
    linear-gradient(180deg,var(--tn-bg2) 0%,var(--tn-bg) 52%,#f7fbfd 100%)!important;
  color:var(--tn-text)!important;
}

/* Header */
.topbar,
body.v2-dark .topbar{
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--tn-line)!important;
  border-radius:18px!important;
  box-shadow:var(--tn-shadow)!important;
  color:var(--tn-text)!important;
}
.identity h1,.identity b{color:var(--tn-title)!important}
.identity small,body.v2-dark .identity small{color:var(--tn-muted)!important}
.datetime{
  background:#f7fbfd!important;
  border-color:var(--tn-line)!important;
  color:var(--tn-text)!important
}
.datetime b{color:var(--tn-title)!important}
.datetime small{color:var(--tn-muted)!important}

/* Command bar / pencarian */
.v2-commandbar,
body.v2-dark .v2-commandbar{
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--tn-line)!important;
  box-shadow:var(--tn-shadow)!important;
}
.v2-search input,
body.v2-dark .v2-search input{
  background:#fff!important;
  color:var(--tn-text)!important;
  border:1px solid #cfe0e9!important;
}
.v2-search input::placeholder{color:#8298a7!important}
.v2-search input:focus{
  border-color:#68bfe6!important;
  box-shadow:0 0 0 3px rgba(21,126,232,.10)!important
}
.v2-actions button,.v2-actions a,
body.v2-dark .v2-actions button,body.v2-dark .v2-actions a{
  background:#fff!important;
  color:#285f80!important;
  border-color:#d0e1e9!important;
}
#v2Theme{display:none!important}

/* Judul bagian */
.section-title{
  color:var(--tn-title)!important;
  font-size:19px!important;
  letter-spacing:.1px;
}
.section-title:after{
  background:linear-gradient(90deg,#4daee2,rgba(77,174,226,.08))!important
}

/* Ringkasan hari ini */
.v2-metric,
body.v2-dark .v2-metric{
  background:#fff!important;
  color:var(--tn-text)!important;
  border:1px solid var(--tn-line)!important;
  box-shadow:0 8px 22px rgba(39,91,122,.07)!important;
}
.v2-metric b{color:var(--tn-title)!important}
.v2-metric small,body.v2-dark .v2-metric small{color:var(--tn-muted)!important}

/* Prioritas & filter */
.v2-priority a,.v2-priority button,
.v2-filter,
body.v2-dark .v2-priority a,body.v2-dark .v2-priority button,
body.v2-dark .v2-filter{
  background:#fff!important;
  color:#315f7c!important;
  border-color:#d5e5ed!important;
  box-shadow:0 5px 13px rgba(35,92,120,.05)!important;
}
.v2-priority a:hover,.v2-priority button:hover,.v2-filter:hover{
  border-color:#73bfe2!important;
  background:#f1f9fd!important
}
.v2-filter.active{
  background:linear-gradient(135deg,var(--tn-blue),var(--tn-cyan))!important;
  border-color:transparent!important;
  color:#fff!important;
}

/* KARTU APLIKASI */
.apps{gap:12px!important}
.app,
body.v2-dark .app{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  border:1px solid #d6e6ef!important;
  color:var(--tn-text)!important;
  box-shadow:0 8px 22px rgba(32,90,122,.08)!important;
  border-radius:18px!important;
}
.app:hover{
  transform:translateY(-3px)!important;
  border-color:#a8d4e8!important;
  box-shadow:0 14px 30px rgba(29,102,145,.12)!important
}
.app .ico{
  background:linear-gradient(135deg,#eef8ff,#f1fbf7)!important;
  border:1px solid #d6e8ef!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important
}
.app h4{
  color:#0d4775!important;
  font-weight:900!important;
  line-height:1.25!important;
  text-shadow:none!important
}
.app p,
body.v2-dark .app p{
  color:#60798d!important;
  line-height:1.45!important;
}
.open{
  color:#fff!important;
  border:0!important;
  background:linear-gradient(135deg,var(--tn-blue),var(--tn-cyan))!important;
  box-shadow:0 5px 12px rgba(21,126,232,.20)!important;
  padding:8px 17px!important;
}
.open:hover{filter:brightness(1.04)!important}

/* Status dan favorit */
.v2-status{
  background:#fff!important;
  border-color:#dbe8ee!important;
  color:#60798d!important;
  box-shadow:0 3px 8px rgba(35,92,120,.05)!important
}
.v2-status.online{color:#087b58!important;background:#f5fff9!important}
.v2-status.offline{color:#a43838!important;background:#fff7f7!important}
.v2-status.checking{color:#8a6600!important;background:#fffaf0!important}
.v2-favorite{
  background:#fff!important;
  border-color:#d9e7ed!important;
  color:#92a9b6!important
}
.v2-favorite.on{color:#d99912!important;background:#fff9e8!important}

/* Monitoring */
.panel,
body.v2-dark .panel{
  background:#fff!important;
  border:1px solid var(--tn-line)!important;
  color:var(--tn-text)!important;
  box-shadow:var(--tn-shadow)!important;
}
.panel h4{color:#153f65!important}
.v2-note{
  background:#f7fbfd!important;
  border-color:#dfeaf0!important;
  color:#355c74!important;
}
.v2-note.good{background:#effbf5!important;border-color:#ccebdc!important}
.v2-note.warn{background:#fff9ea!important;border-color:#f0dda9!important}
.v2-note.bad{background:#fff3f3!important;border-color:#efcaca!important}
.v2-system-row{
  color:#315a74!important;
  border-bottom-color:#d9e7ed!important
}
.v2-badge{background:#eef5f8!important;color:#58768a!important}
.v2-badge.good{background:#e8f9f1!important;color:#087b58!important}
.v2-badge.warn{background:#fff3d6!important;color:#8b6200!important}
.v2-emergency a{
  background:#f8fcfe!important;
  border-color:#d6e6ee!important;
  color:#174a72!important
}
.v2-emergency a:nth-child(1){background:#fff6f6!important}
.v2-emergency a:nth-child(2){background:#fffaf0!important}
.v2-emergency a:nth-child(3){background:#f1f9ff!important}
.v2-emergency a:nth-child(4){background:#f7f3ff!important}

/* Statistik / Informasi Desa */
.stat,
body.v2-dark .stat{
  background:#fff!important;
  border:1px solid var(--tn-line)!important;
  color:var(--tn-text)!important;
  box-shadow:0 8px 22px rgba(39,91,122,.07)!important;
}
.stat .label{color:#55758d!important;font-weight:800!important}
.stat .value{color:#0d4f82!important}
.stat .hint,body.v2-dark .stat .hint{color:#687f90!important}

/* Berita */
.berita-card,
body.v2-dark .berita-card{
  background:#fff!important;
  border-color:var(--tn-line)!important;
  color:var(--tn-text)!important;
  box-shadow:var(--tn-shadow)!important
}
.berita-card h4,.berita-card h3{color:#124c79!important}
.berita-card p,.berita-card small{color:#607b8f!important}

/* Info / quick lama */
.news div{color:#4e6f87!important;border-bottom-color:#dce8ee!important}
.quick a{
  background:#f8fcfe!important;
  border-color:#d6e7ef!important;
  color:#174b74!important
}

/* Global alert */
.v2-global-alert,
body.v2-dark .v2-global-alert{
  background:#fff9e9!important;
  border-color:#f0dda8!important;
  color:#765314!important
}

/* Footer */
.footer{color:#668195!important}
.footer a{color:#2d6e98!important}

/* Jangan biarkan teks putih sisa tema gelap */
body.v2-dark h1,body.v2-dark h2,body.v2-dark h3,body.v2-dark h4,
body.v2-dark .section-title,
body.v2-dark .stat .value,
body.v2-dark .v2-metric b{
  color:var(--tn-title)!important
}

/* Responsive */
@media(max-width:900px){
  .app{min-height:160px!important}
}
@media(max-width:650px){
  body{font-size:14px!important}
  .shell{padding:9px!important}
  .section-title{font-size:17px!important}
  .app{min-height:150px!important;padding:12px 9px!important}
  .app h4{font-size:12px!important}
  .app .ico{width:48px!important;height:48px!important;font-size:26px!important}
  .open{font-size:9px!important;padding:7px 13px!important}
  .v2-status{font-size:6.5px!important}
}



/* =========================================================
   PENYEMPURNAAN BAGIAN BAWAH COMMAND CENTER
   Hero Candi Arimbi, header, pencarian, dan struktur tetap.
========================================================= */

/* Judul section tetap mengikuti warna tema asli */
.section-title{
  color:#174a72!important;
  font-weight:900!important;
}
.section-title:after{
  background:linear-gradient(90deg,#73c9e7,transparent)!important;
}

/* ===================== KARTU APLIKASI ===================== */
.app,
body.v2-dark .app{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%)!important;
  border:1px solid #cfe3ec!important;
  color:#173f61!important;
  box-shadow:0 8px 20px rgba(36,103,136,.07)!important;
}
.app:hover,
body.v2-dark .app:hover{
  border-color:#9fcfe1!important;
  box-shadow:0 12px 26px rgba(36,103,136,.11)!important;
}
.app .ico,
body.v2-dark .app .ico{
  background:linear-gradient(135deg,#eaf7ff,#eefbf5)!important;
  border:1px solid #cfe6ec!important;
}
.app h4,
body.v2-dark .app h4{
  color:#113f67!important;
  text-shadow:none!important;
}
.app p,
body.v2-dark .app p{
  color:#627e91!important;
}
.open,
body.v2-dark .open{
  background:linear-gradient(135deg,#eaf5fb,#f1f9fc)!important;
  border:1px solid #bfdce9!important;
  color:#174f78!important;
  box-shadow:none!important;
}
.open:hover,
body.v2-dark .open:hover{
  background:linear-gradient(135deg,#197fd0,#16a1cf)!important;
  border-color:transparent!important;
  color:#fff!important;
}

/* status dan favorit */
.v2-status,
body.v2-dark .v2-status{
  background:#fff!important;
  border-color:#d4e5ed!important;
  color:#6d8796!important;
}
.v2-status.online,
body.v2-dark .v2-status.online{
  background:#f2fcf7!important;
  color:#087b58!important;
}
.v2-status.offline,
body.v2-dark .v2-status.offline{
  background:#fff5f5!important;
  color:#b63333!important;
}
.v2-status.checking,
body.v2-dark .v2-status.checking{
  background:#fff9e9!important;
  color:#956900!important;
}
.v2-favorite,
body.v2-dark .v2-favorite{
  background:#fff!important;
  border-color:#d5e5ed!important;
  color:#98abb7!important;
}
.v2-favorite.on,
body.v2-dark .v2-favorite.on{
  color:#e2a11b!important;
  background:#fff8df!important;
}

/* ===================== MONITORING ===================== */
.panel,
body.v2-dark .panel{
  background:rgba(255,255,255,.97)!important;
  border:1px solid #cfe3ec!important;
  color:#183f5f!important;
  box-shadow:0 8px 20px rgba(36,103,136,.07)!important;
}
.panel h4,
body.v2-dark .panel h4{
  color:#173f64!important;
}
.v2-note,
body.v2-dark .v2-note{
  color:#355f78!important;
  background:#f7fbfd!important;
  border-color:#dce9ef!important;
}
.v2-note.good,
body.v2-dark .v2-note.good{
  background:#eefaf5!important;
  border-color:#ccebdc!important;
  color:#2c6652!important;
}
.v2-note.warn,
body.v2-dark .v2-note.warn{
  background:#fff8e8!important;
  border-color:#f0dda9!important;
  color:#7a5b12!important;
}
.v2-note.bad,
body.v2-dark .v2-note.bad{
  background:#fff2f2!important;
  border-color:#efc5c5!important;
  color:#8b3434!important;
}
.v2-system-row,
body.v2-dark .v2-system-row{
  color:#315a74!important;
  border-bottom-color:#dce9ef!important;
}
.v2-badge,
body.v2-dark .v2-badge{
  background:#edf5f8!important;
  color:#58768a!important;
}
.v2-badge.good,
body.v2-dark .v2-badge.good{
  background:#e7f8f1!important;
  color:#087b58!important;
}
.v2-badge.warn,
body.v2-dark .v2-badge.warn{
  background:#fff3d6!important;
  color:#8b6200!important;
}
.v2-emergency a,
body.v2-dark .v2-emergency a{
  color:#174b73!important;
  border-color:#d5e5ed!important;
  background:#f8fcfe!important;
}
.v2-emergency a:nth-child(1){background:#fff6f6!important}
.v2-emergency a:nth-child(2){background:#fffaf0!important}
.v2-emergency a:nth-child(3){background:#f1f9ff!important}
.v2-emergency a:nth-child(4){background:#f7f3ff!important}

/* ===================== INFORMASI DESA ===================== */
.stat,
body.v2-dark .stat{
  background:rgba(255,255,255,.97)!important;
  border:1px solid #cfe3ec!important;
  color:#183f5f!important;
  box-shadow:0 8px 20px rgba(36,103,136,.07)!important;
}
.stat .label,
body.v2-dark .stat .label{
  color:#58778c!important;
  font-weight:800!important;
}
.stat .value,
body.v2-dark .stat .value{
  color:#0f4e7c!important;
}
.stat .hint,
body.v2-dark .stat .hint{
  color:#71899a!important;
}

/* ===================== INFORMASI / BERITA / AKSES CEPAT ===================== */
.news div,
body.v2-dark .news div{
  color:#527188!important;
  border-bottom-color:#d8e9f0!important;
}
.quick a,
body.v2-dark .quick a{
  color:#174e75!important;
  border-color:#d1e6ef!important;
  background:#f6fbfd!important;
}
.quick a:hover,
body.v2-dark .quick a:hover{
  background:#eaf6fb!important;
}
.berita-card,
body.v2-dark .berita-card{
  background:#fff!important;
  border-color:#cfe3ec!important;
  color:#173f61!important;
}
.berita-card h3,
.berita-card h4,
body.v2-dark .berita-card h3,
body.v2-dark .berita-card h4{
  color:#124b75!important;
}
.berita-card p,
.berita-card small,
body.v2-dark .berita-card p,
body.v2-dark .berita-card small{
  color:#627e91!important;
}

/* Ringkasan bawah jika ikut terpengaruh mode gelap */
.v2-metric,
body.v2-dark .v2-metric{
  background:#fff!important;
  color:#183f5f!important;
  border-color:#d4e5ed!important;
}
.v2-metric b,
body.v2-dark .v2-metric b{
  color:#124b75!important;
}
.v2-metric small,
body.v2-dark .v2-metric small{
  color:#6e8798!important;
}

/* Mobile: tetap lega dan terbaca */
@media(max-width:650px){
  .app,
  body.v2-dark .app{
    padding:12px 9px!important;
  }
  .app h4,
  body.v2-dark .app h4{
    font-size:12px!important;
    line-height:1.25!important;
  }
  .app p,
  body.v2-dark .app p{
    font-size:10px!important;
    line-height:1.4!important;
  }
}



/* =========================================================
   FINISHING COMMAND CENTER DESA PULOSARI
   Tidak menyentuh hero Candi Arimbi, database, link, atau fungsi.
========================================================= */

/* Jarak antar bagian lebih konsisten */
.section-title{
  margin-top:30px!important;
  margin-bottom:13px!important;
  letter-spacing:.1px!important;
}
.apps,
.v2-monitor-grid,
.stats{
  gap:14px!important;
}

/* =========================================================
   KARTU APLIKASI: tinggi seragam, teks rapi, tombol sejajar
========================================================= */
.apps .app{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:198px!important;
  padding:39px 12px 13px!important;
  overflow:hidden!important;
  position:relative!important;
}
.apps .app .ico{
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  margin:0 auto 9px!important;
  border-radius:16px!important;
  font-size:29px!important;
  transition:transform .18s ease!important;
}
.apps .app:hover .ico{
  transform:scale(1.04)!important;
}
.apps .app h4{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  min-height:35px!important;
  max-width:100%!important;
  margin:0 0 5px!important;
  font-size:13px!important;
  line-height:1.3!important;
  text-align:center!important;
}
.apps .app p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  min-height:45px!important;
  margin:0!important;
  font-size:10.5px!important;
  line-height:1.42!important;
  text-align:center!important;
}
.apps .app .open{
  margin-top:auto!important;
  min-width:72px!important;
  padding:7px 14px!important;
  line-height:1!important;
  text-align:center!important;
}

/* Badge tidak terlalu dominan */
.apps .v2-status{
  top:8px!important;
  left:8px!important;
  padding:4px 7px!important;
  font-size:7px!important;
}
.apps .v2-favorite{
  top:8px!important;
  right:8px!important;
  width:27px!important;
  height:27px!important;
}

/* Compact mode tetap rapi */
body.v2-compact .apps .app{
  min-height:158px!important;
  padding:36px 9px 10px!important;
}
body.v2-compact .apps .app .ico{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  font-size:24px!important;
  margin-bottom:7px!important;
}
body.v2-compact .apps .app h4{
  min-height:31px!important;
  font-size:11.5px!important;
}
body.v2-compact .apps .app p{
  display:none!important;
}
body.v2-compact .apps .app .open{
  margin-top:auto!important;
}

/* =========================================================
   MONITORING: lebih lega dan mudah dipindai
========================================================= */
.v2-monitor-grid .panel{
  padding:18px!important;
  min-height:225px!important;
}
.v2-monitor-grid .panel h4{
  margin:0 0 14px!important;
  font-size:14px!important;
  line-height:1.25!important;
}
.v2-notify{
  gap:8px!important;
  max-height:245px!important;
  padding-right:2px!important;
}
.v2-note{
  padding:9px 10px!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}
.v2-system{
  gap:8px!important;
}
.v2-system-row{
  padding:5px 0 8px!important;
  font-size:10px!important;
  align-items:center!important;
}
.v2-badge{
  min-width:58px!important;
  text-align:center!important;
  padding:5px 8px!important;
  font-size:8px!important;
}
.v2-emergency{
  gap:9px!important;
}
.v2-emergency a{
  min-height:82px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  padding:11px 7px!important;
  font-size:10px!important;
  line-height:1.25!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.v2-emergency a:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 18px rgba(35,92,120,.08)!important;
}
.v2-emergency i{
  font-size:26px!important;
  margin-bottom:5px!important;
}

/* =========================================================
   INFORMASI DESA: angka lebih kuat dan ikon konsisten
========================================================= */
.stats .stat{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:125px!important;
  padding:17px 58px 17px 17px!important;
  overflow:hidden!important;
}
.stats .stat::before{
  position:absolute!important;
  right:14px!important;
  top:15px!important;
  width:38px!important;
  height:38px!important;
  border-radius:13px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#eef8ff,#effaf6)!important;
  border:1px solid #d8e9ef!important;
  font-size:21px!important;
  line-height:1!important;
}
.stats .stat:nth-child(1)::before{content:"👥"}
.stats .stat:nth-child(2)::before{content:"👨‍👩‍👧"}
.stats .stat:nth-child(3)::before{content:"📍"}
.stats .stat:nth-child(4)::before{content:"🏠"}
.stats .stat:nth-child(5)::before{content:"📊"}

.stats .stat .label{
  font-size:10.5px!important;
  line-height:1.2!important;
  letter-spacing:.2px!important;
}
.stats .stat .value{
  margin-top:6px!important;
  font-size:clamp(21px,1.75vw,29px)!important;
  line-height:1.12!important;
  overflow-wrap:anywhere!important;
}
.stats .stat:nth-child(5) .value{
  font-size:clamp(18px,1.45vw,25px)!important;
}
.stats .stat .hint{
  margin-top:6px!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}

/* =========================================================
   Akses Prioritas dan filter lebih nyaman disentuh
========================================================= */
.v2-priority{
  gap:8px!important;
}
.v2-priority a,
.v2-priority button{
  padding:8px 12px!important;
  min-height:38px!important;
}
.v2-filters{
  gap:7px!important;
  padding-bottom:9px!important;
}
.v2-filter{
  padding:7px 11px!important;
}

/* =========================================================
   ARPUL: tidak mengganggu informasi/footer
========================================================= */
#arpul-widget{
  left:max(14px,env(safe-area-inset-left))!important;
  bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px))!important;
  gap:6px!important;
}
#arpul-avatar-wrap{
  width:60px!important;
  height:99px!important;
  min-width:60px!important;
  max-width:60px!important;
  flex-basis:60px!important;
  filter:drop-shadow(0 7px 10px rgba(20,70,55,.14))!important;
}
#arpul-bubble,
#arpul-bubble.arpul-bubble-stack{
  margin-bottom:35px!important;
}
#arpul-bubble .arpul-bubble-msg{
  width:165px!important;
  max-width:min(165px,calc(100vw - 90px))!important;
  min-height:33px!important;
  border-width:1px!important;
  box-shadow:0 7px 20px rgba(25,73,58,.12)!important;
}
#arpul-panel{
  left:max(14px,env(safe-area-inset-left))!important;
  bottom:max(130px,calc(env(safe-area-inset-bottom) + 116px))!important;
}

/* Saat pengguna berada dekat footer, sembunyikan balon agar tidak menutupi kartu */
#arpul-widget.arpul-near-footer #arpul-bubble{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease!important;
}
#arpul-widget.arpul-near-footer #arpul-avatar-wrap{
  transform:scale(.92)!important;
  transform-origin:left bottom!important;
}

/* Hover halus, tidak berlebihan */
.app,
.stat,
.panel{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.stats .stat:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 25px rgba(36,103,136,.09)!important;
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:900px){
  .v2-monitor-grid .panel{
    min-height:auto!important;
  }
  .stats .stat{
    min-height:118px!important;
  }
}
@media(max-width:650px){
  .section-title{
    margin-top:24px!important;
    margin-bottom:10px!important;
  }
  .apps{
    gap:9px!important;
  }
  .apps .app{
    min-height:166px!important;
    padding:36px 8px 10px!important;
  }
  .apps .app .ico{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    font-size:24px!important;
    margin-bottom:7px!important;
  }
  .apps .app h4{
    font-size:11px!important;
    min-height:29px!important;
  }
  .apps .app p{
    -webkit-line-clamp:2!important;
    min-height:30px!important;
    font-size:9px!important;
  }
  .apps .app .open{
    min-width:64px!important;
    font-size:8.5px!important;
    padding:7px 10px!important;
  }

  .stats{
    gap:9px!important;
  }
  .stats .stat{
    min-height:112px!important;
    padding:14px 48px 14px 13px!important;
  }
  .stats .stat::before{
    right:10px!important;
    top:12px!important;
    width:32px!important;
    height:32px!important;
    border-radius:11px!important;
    font-size:18px!important;
  }
  .stats .stat .value{
    font-size:20px!important;
  }
  .stats .stat:nth-child(5) .value{
    font-size:17px!important;
  }

  #arpul-widget{
    left:max(8px,env(safe-area-inset-left))!important;
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;
  }
  #arpul-avatar-wrap{
    width:52px!important;
    height:87px!important;
    min-width:52px!important;
    max-width:52px!important;
    flex-basis:52px!important;
  }
  #arpul-bubble.arpul-bubble-stack{
    width:145px!important;
    min-width:125px!important;
    max-width:calc(100vw - 72px)!important;
    margin-bottom:29px!important;
  }
  #arpul-bubble .arpul-bubble-msg{
    width:145px!important;
    max-width:calc(100vw - 72px)!important;
    font-size:9.8px!important;
    padding:6px 9px!important;
  }
  #arpul-panel{
    left:max(6px,env(safe-area-inset-left))!important;
    right:max(6px,env(safe-area-inset-right))!important;
    bottom:max(108px,calc(env(safe-area-inset-bottom) + 96px))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .app,.stat,.panel,.v2-emergency a{
    transition:none!important;
  }
}



.cc-footer-pulosari{
  position:relative;
  width:100%;
  margin-top:36px;
  overflow:hidden;
  border-radius:26px 26px 0 0;
  background:
    linear-gradient(90deg,rgba(3,53,61,.18) 0%,rgba(3,53,61,.50) 42%,rgba(2,52,57,.88) 70%,rgba(2,44,50,.96) 100%),
    url("footer_assets/footer_bg.jpg") center center/cover no-repeat;
  color:#fff;
  box-shadow:0 -12px 35px rgba(17,70,80,.10);
  isolation:isolate;
}
.cc-footer-pulosari::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,30,36,.18));
}
.cc-footer-inner{
  width:min(1500px,calc(100% - 32px));
  margin:0 auto;
  padding:42px 20px 20px;
}
.cc-footer-main{
  display:grid;
  grid-template-columns:minmax(250px,1.05fr) minmax(360px,1.45fr) minmax(230px,.75fr);
  gap:34px;
  align-items:center;
}
.cc-footer-brand{
  padding-right:26px;
  border-right:1px solid rgba(255,255,255,.28);
}
.cc-footer-logo-pulosari{
  display:block;
  width:min(100%,420px);
  height:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.cc-footer-info h3{
  margin:0 0 7px;
  font-size:clamp(22px,2vw,32px);
  line-height:1.15;
  color:#fff!important;
  letter-spacing:.1px;
}
.cc-footer-subtitle{
  margin:0 0 8px;
  font-size:clamp(13px,1.15vw,18px);
  color:#e9f7f7!important;
}
.cc-footer-location{
  margin:0;
  font-size:12px;
  color:#d8eeee!important;
}
.cc-footer-location span{opacity:.65;padding:0 5px}
.cc-footer-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:22px;
}
.cc-footer-points>div{
  min-width:0;
  padding:2px 14px;
  border-left:1px solid rgba(255,255,255,.25);
}
.cc-footer-points>div:first-child{padding-left:0;border-left:0}
.cc-footer-points b{
  display:block;
  font-size:12px;
  color:#fff!important;
}
.cc-footer-points small{
  display:block;
  margin-top:3px;
  font-size:9px;
  line-height:1.3;
  color:#c9e4e6!important;
}
.cc-footer-partners{
  min-height:118px;
  padding-left:28px;
  border-left:1px solid rgba(255,255,255,.28);
  display:grid;
  grid-template-columns:minmax(0,1fr) 78px;
  gap:14px;
  align-items:center;
}
.cc-footer-logo-jombang{
  width:100%;
  max-width:190px;
  height:auto;
  justify-self:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.cc-footer-logo-115{
  width:68px;
  height:68px;
  object-fit:contain;
  justify-self:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.cc-footer-partners small{
  grid-column:1/-1;
  text-align:center;
  font-size:9.5px;
  color:#c5dee1!important;
  font-style:italic;
}
.cc-footer-nav{
  margin-top:30px;
  padding:18px 8px;
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}
.cc-footer-nav a{
  color:#edf9fa!important;
  text-decoration:none!important;
  padding:7px 28px;
  border-left:1px solid rgba(255,255,255,.24);
  font-size:12px;
  font-weight:700;
  transition:.17s ease;
}
.cc-footer-nav a:first-child{border-left:0}
.cc-footer-nav a:hover{
  color:#70dcff!important;
  transform:translateY(-1px);
}
.cc-footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:17px 0 2px;
  font-size:10.5px;
  color:#d9ecee!important;
}
.cc-footer-motto{
  font-style:italic;
  text-align:right;
}

/* Sembunyikan footer lama sederhana bila masih ada */
body > footer.footer:not(.cc-footer-pulosari){
  display:none!important;
}

/* Beri ruang untuk ARPUL */
.cc-footer-pulosari{
  scroll-margin-bottom:120px;
}

@media(max-width:980px){
  .cc-footer-main{
    grid-template-columns:1fr 1.25fr;
  }
  .cc-footer-partners{
    grid-column:1/-1;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.22);
    padding:18px 0 0;
    min-height:0;
    grid-template-columns:180px 70px;
    justify-content:center;
  }
}
@media(max-width:700px){
  .cc-footer-pulosari{
    border-radius:20px 20px 0 0;
    background-position:35% center;
  }
  .cc-footer-inner{
    width:100%;
    padding:30px 15px 18px;
  }
  .cc-footer-main{
    grid-template-columns:1fr;
    gap:22px;
  }
  .cc-footer-brand{
    padding-right:0;
    padding-bottom:18px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.24);
  }
  .cc-footer-logo-pulosari{
    width:min(100%,360px);
    margin:auto;
  }
  .cc-footer-info{text-align:center}
  .cc-footer-location{line-height:1.55}
  .cc-footer-points{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:17px;
  }
  .cc-footer-points>div,
  .cc-footer-points>div:first-child{
    border-left:0;
    padding:7px 4px;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .cc-footer-partners{
    grid-template-columns:150px 58px;
    gap:10px;
  }
  .cc-footer-logo-115{
    width:54px;height:54px;
  }
  .cc-footer-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:15px 0;
  }
  .cc-footer-nav a,
  .cc-footer-nav a:first-child{
    border:0;
    padding:9px 8px;
    text-align:center;
    background:rgba(255,255,255,.07);
    border-radius:9px;
  }
  .cc-footer-nav a:last-child{
    grid-column:1/-1;
  }
  .cc-footer-bottom{
    flex-direction:column;
    text-align:center;
    padding-top:15px;
  }
  .cc-footer-motto{text-align:center}
}



/* FINAL HERO PULOSARI - 4 SLIDE */
.hero{position:relative!important;overflow:hidden!important}
.hero-slider{position:absolute!important;inset:0!important;overflow:hidden!important;z-index:0!important}
.hero-slide{
    position:absolute!important;
    inset:0!important;
    opacity:0!important;
    transition:opacity 1.1s ease!important;
    animation:none!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center!important;
    will-change:opacity;
}
.hero-slide.is-active{opacity:1!important}

/* Lapisan lembut agar teks kiri tetap terbaca */
.hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.88) 27%,
      rgba(255,255,255,.48) 42%,
      rgba(255,255,255,.08) 59%,
      rgba(255,255,255,0) 72%
    );
    pointer-events:none
}

.hero-slide.s1{background-image:url('assets/hero_final_01_digital.webp?v=20260907')!important}
.hero-slide.s2{background-image:url('assets/hero_final_02_tangan_digital.webp?v=20260907')!important}
.hero-slide.s3{background-image:url('assets/hero_final_03_aplikasi_digital.webp?v=20260907')!important}
.hero-slide.s4{background-image:url('assets/hero_final_04_remo.webp?v=20260907')!important}

.hero-copy{position:relative!important;z-index:2!important}

@media(max-width:650px){
    .hero-slide{
        background-size:cover!important;
        background-position:center center!important
    }
    .hero-slide::after{
        background:linear-gradient(
          180deg,
          rgba(255,255,255,.95) 0%,
          rgba(255,255,255,.82) 28%,
          rgba(255,255,255,.30) 52%,
          rgba(255,255,255,.04) 76%
        )
    }
}



/* =========================================================
   FOKUS HERO COMMAND CENTER
   Tidak mengganti gambar, hanya mengatur posisi/crop.
========================================================= */

/* Hero dibuat proporsional terhadap gambar 1904x826 */
.hero{
    min-height:clamp(360px,43.38vw,620px)!important;
}

/* Semua slide tetap memenuhi area hero */
.hero-slider,
.hero-slide{
    width:100%!important;
    height:100%!important;
}

/* Default slide */
.hero-slide{
    background-repeat:no-repeat!important;
    background-size:cover!important;
}

/* Slide 1 - Digital HUD */
.hero-slide.s1{
    background-position:center center!important;
}

/* Slide 2 - Tangan digital */
.hero-slide.s2{
    background-position:center center!important;
}

/* Slide 3 - Aplikasi digital */
.hero-slide.s3{
    background-position:center center!important;
}

/* Slide 4 - Remo + Candi Arimbi
   Fokus diturunkan sedikit agar kepala penari tidak kepotong */
.hero-slide.s4{
    background-position:72% 24%!important;
}

/* Tablet */
@media(max-width:900px){
    .hero{
        min-height:420px!important;
    }
    .hero-slide.s4{
        background-position:70% 20%!important;
    }
}

/* HP */
@media(max-width:650px){
    .hero{
        min-height:360px!important;
    }

    /*
      Di HP gunakan contain untuk slide Remo agar kepala dan objek utama
      tetap terlihat penuh. Area kosong diisi warna yang senada.
    */
    .hero-slide.s4{
        background-size:contain!important;
        background-position:center center!important;
        background-color:#eaf6ff!important;
    }
}

/* HP sangat kecil */
@media(max-width:420px){
    .hero{
        min-height:330px!important;
    }
}



/* =========================================================
   REVISI AMAN LAYANAN DIGITAL DESA PULOSARI
   TIDAK MENGUBAH HERO FINAL 4 GAMBAR / FOOTER CANDI ARIMBI
========================================================= */
:root{
  --rev-blue:#1586bd;
  --rev-green:#1aa473;
  --rev-navy:#153e60;
  --rev-soft:#f5fbfd;
  --rev-line:#d7e8ef;
  --rev-shadow:0 10px 28px rgba(26,84,116,.075);
  --rev-shadow-hover:0 18px 38px rgba(22,87,120,.13);
}

/* Latar lebih tenang */
body{
  background:
    radial-gradient(circle at 93% 4%,rgba(40,191,232,.11),transparent 25%),
    radial-gradient(circle at 4% 62%,rgba(37,169,120,.10),transparent 24%),
    linear-gradient(180deg,#fbfeff 0%,#f3fafc 48%,#edf7f8 100%)!important;
}
.shell{
  max-width:1540px!important;
  padding:16px 20px 24px!important;
}

/* Header */
.topbar{
  position:sticky;
  top:8px;
  z-index:45;
  margin-bottom:12px!important;
  padding:9px 11px;
  border:1px solid rgba(207,228,238,.94);
  border-radius:17px;
  background:rgba(255,255,255,.89);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  box-shadow:0 9px 26px rgba(26,80,108,.07);
}
.logo-wrap{
  width:54px!important;
  height:54px!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.identity h1{
  font-size:18px!important;
  letter-spacing:.15px;
}
.identity small{
  font-size:10.5px;
  line-height:1.35;
}
.datetime{
  min-width:205px!important;
  border:0!important;
  background:linear-gradient(135deg,#f1faff,#f2fbf7)!important;
  box-shadow:none!important;
  padding:8px 12px!important;
  border-radius:13px!important;
}
.datetime b{font-size:17px!important}

/* Command bar */
.v2-commandbar{
  position:relative;
  z-index:20;
  margin:0 0 13px!important;
  padding:9px!important;
  border-radius:15px!important;
  border-color:#d4e7ef!important;
  box-shadow:0 7px 20px rgba(25,88,118,.055)!important;
}
.v2-search input{
  min-height:42px;
  border-radius:11px!important;
  background:#f9fcfd!important;
}
.v2-actions button,
.v2-actions a{
  min-height:38px;
  border-radius:10px!important;
  transition:.16s ease;
}
.v2-actions button:hover,
.v2-actions a:hover{
  transform:translateY(-1px);
  border-color:#9bcfdf;
  background:#f1fafc;
}

/* Sengaja TIDAK menyentuh .hero, .hero-slide, .hero-copy,
   #heroFinalPulosari, agar 4 foto hero pilihan Bapak tetap persis. */

/* Judul bagian */
.section-title{
  margin:27px 3px 11px!important;
  font-size:16px!important;
  color:#173f60!important;
  letter-spacing:.1px;
}
.section-title:after{
  background:linear-gradient(90deg,#7dcde2,rgba(125,205,226,0))!important;
}

/* Ringkasan */
.v2-today{
  gap:10px!important;
}
.v2-metric{
  border-color:var(--rev-line)!important;
  border-radius:17px!important;
  padding:14px!important;
  box-shadow:var(--rev-shadow)!important;
  background:rgba(255,255,255,.95)!important;
  transition:.17s ease;
}
.v2-metric:hover{
  transform:translateY(-2px);
  box-shadow:var(--rev-shadow-hover)!important;
}
.v2-metric span{font-size:21px!important}
.v2-metric b{
  color:#164c70!important;
  font-size:23px!important;
}
.v2-metric small{
  font-size:9.5px!important;
  line-height:1.35;
}

/* Favorit / filter */
.v2-priority{
  gap:8px!important;
}
.v2-priority a,
.v2-priority button{
  border-color:#d4e6ed!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(25,88,118,.045)!important;
  transition:.16s ease;
}
.v2-priority a:hover,
.v2-priority button:hover{
  border-color:#a7d5df!important;
  transform:translateY(-1px);
}
.v2-filters{
  gap:7px!important;
  padding-bottom:9px!important;
}
.v2-filter{
  padding:7px 11px!important;
  background:#fff!important;
  border-color:#d4e6ed!important;
  color:#526f82!important;
}
.v2-filter.active{
  background:linear-gradient(135deg,var(--rev-blue),var(--rev-green))!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(22,134,189,.16);
}

/* Kartu layanan lebih nyaman dilihat */
.apps{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
}
.apps .app{
  min-height:180px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  border:1px solid #d9e9ef!important;
  border-radius:19px!important;
  background:linear-gradient(180deg,#fff 0%,#f8fcfd 100%)!important;
  box-shadow:0 8px 23px rgba(25,87,118,.055)!important;
  padding:16px 13px!important;
  overflow:hidden;
  transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease!important;
}
.apps .app:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,var(--rev-blue),#27bde3,var(--rev-green));
  opacity:.82;
}
.apps .app:hover{
  transform:translateY(-4px)!important;
  border-color:#b7dbe5!important;
  box-shadow:var(--rev-shadow-hover)!important;
}
.apps .app .ico{
  width:52px!important;
  height:52px!important;
  font-size:27px!important;
  border-radius:15px!important;
  margin-bottom:10px!important;
  box-shadow:none!important;
  background:linear-gradient(145deg,#eef9fc,#eaf8f2)!important;
}
.apps .app h4{
  margin:0 0 6px!important;
  font-size:12.5px!important;
  line-height:1.3!important;
  color:#1a4262!important;
}
.apps .app p{
  min-height:44px!important;
  font-size:10.2px!important;
  line-height:1.48!important;
  color:#708594!important;
}
.apps .app .open{
  margin-top:auto!important;
  width:100%;
  padding:8px 9px!important;
  border-radius:10px!important;
  background:#eef8fb!important;
  border-color:#d4e9ef!important;
  color:#17698b!important;
  transition:.16s ease;
}
.apps .app:hover .open{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--rev-blue),var(--rev-green))!important;
}
.v2-favorite{
  top:9px!important;
  right:9px!important;
  width:29px!important;
  height:29px!important;
  box-shadow:0 3px 10px rgba(28,84,110,.08);
}
.v2-status{
  top:9px!important;
  left:9px!important;
}

/* Panel monitoring, berita, statistik */
.v2-monitor-grid{
  gap:11px!important;
}
.panel,
.stat,
.berita-card{
  border-color:#dbe9ef!important;
  border-radius:18px!important;
  box-shadow:0 7px 21px rgba(25,87,118,.05)!important;
  background:rgba(255,255,255,.95)!important;
}
.panel{
  padding:16px!important;
}
.panel h4{
  color:#1a4667!important;
  margin-bottom:11px!important;
}
.stats{
  gap:10px!important;
}
.stat{
  padding:15px!important;
  transition:.16s ease;
}
.stat:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(25,87,118,.09)!important;
}
.stat .label{
  font-size:9px!important;
  letter-spacing:.7px;
}
.stat .value{
  color:#16729c!important;
}
.berita-grid{
  gap:11px!important;
}
.berita-card{
  overflow:hidden;
  transition:.16s ease;
}
.berita-card:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(25,87,118,.09)!important;
}
.berita-img{
  background:#eef7fa!important;
}
.quick a{
  border-radius:11px!important;
  background:#f8fbfc!important;
  border-color:#e0ebf0!important;
}
.quick a:hover{
  background:#edf8f5!important;
  border-color:#bddfd2!important;
}

/* Modal */
.modal{
  backdrop-filter:blur(4px);
}
.modal-box{
  border-radius:19px!important;
  border:1px solid #d7e8ef!important;
  box-shadow:0 25px 70px rgba(15,61,86,.22)!important;
}

/* Tombol naik */
#ccBackTop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  width:43px;
  height:43px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--rev-blue),var(--rev-green));
  color:#fff;
  font-size:19px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(22,110,145,.22);
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:.18s ease;
}
#ccBackTop.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* Footer Candi Arimbi sengaja tidak diubah sama sekali. */
.cc-footer-pulosari{
  margin-top:34px!important;
}

@media(max-width:1250px){
  .apps{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .apps{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .shell{padding:8px!important}
  .topbar{
    top:5px;
    border-radius:14px;
    padding:7px 8px;
  }
  .logo-wrap{
    width:45px!important;
    height:45px!important;
    border-radius:12px!important;
  }
  .identity h1{font-size:14px!important}
  .identity small{font-size:9px}
  .datetime{
    min-width:0!important;
    padding:6px 8px!important;
  }
  .datetime small{font-size:8px}
  .datetime b{font-size:12px!important}
  .v2-commandbar{
    top:66px!important;
  }
  .apps{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .apps .app{
    min-height:160px!important;
    border-radius:15px!important;
    padding:13px 10px!important;
  }
  .apps .app .ico{
    width:43px!important;
    height:43px!important;
    font-size:22px!important;
    border-radius:13px!important;
  }
  .apps .app h4{
    font-size:10.5px!important;
  }
  .apps .app p{
    min-height:0!important;
    font-size:9.2px!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .section-title{
    margin-top:22px!important;
    font-size:13.5px!important;
  }
  #ccBackTop{
    width:40px;
    height:40px;
    right:12px;
    bottom:12px;
  }
}
@media(max-width:420px){
  .identity small{display:none}
  .datetime small{display:none}
  .apps .app{
    min-height:150px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .apps .app,
  .v2-metric,
  .stat,
  .berita-card,
  #ccBackTop{
    transition:none!important;
  }
}



/* =========================================================
   HERO COMMAND CENTER PULOSARI - FINAL ONLINE
   Tulisan besar + lebih tinggi + Remo tetap terlihat
========================================================= */

.hero{
  min-height:640px!important;
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
}

/* Lapisan kiri: tulisan terbaca, sisi kanan foto tetap terbuka */
.hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      90deg,
      rgba(4,40,82,.96) 0%,
      rgba(5,66,102,.91) 27%,
      rgba(3,104,112,.70) 48%,
      rgba(3,104,112,.24) 68%,
      rgba(3,104,112,0) 82%
    )!important;
}

/* Gradasi bawah agar Hero terasa menyatu */
.hero::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:90px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,45,70,.14))!important;
}

.hero .hero-copy{
  position:relative!important;
  z-index:3!important;
  width:min(1120px,92%)!important;
  max-width:none!important;
  align-self:center!important;
  padding:64px 0 68px 5%!important;
}

/* COMMAND CENTER */
.hero .hero-copy .kicker{
  display:block!important;
  margin:0 0 5px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#fff!important;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",Arial,sans-serif!important;
  font-size:clamp(50px,6.1vw,94px)!important;
  font-weight:900!important;
  line-height:.88!important;
  letter-spacing:.5px!important;
  text-transform:uppercase!important;
  text-shadow:0 5px 20px rgba(0,0,0,.28)!important;
}

/* DESA PULOSARI */
.hero .hero-copy h2{
  margin:5px 0 3px!important;
  padding:0!important;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",Arial,sans-serif!important;
  font-size:clamp(66px,8.1vw,122px)!important;
  line-height:.84!important;
  font-weight:900!important;
  letter-spacing:.4px!important;
  text-transform:uppercase!important;
  color:#bffcff!important;
  text-shadow:0 5px 22px rgba(0,0,0,.30)!important;
}
.hero .hero-copy h2 span{
  color:#bffcff!important;
}

/* SATU PINTU LAYANAN DIGITAL */
.hero .hero-copy h3{
  margin:16px 0 0!important;
  padding:0!important;
  color:#fff!important;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",Arial,sans-serif!important;
  font-size:clamp(29px,3.6vw,54px)!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.6px!important;
  text-transform:uppercase!important;
  text-shadow:0 4px 16px rgba(0,0,0,.28)!important;
}
.hero .hero-copy h3::after{
  content:""!important;
  display:block!important;
  width:92px!important;
  height:5px!important;
  margin-top:15px!important;
  border-radius:999px!important;
  background:#35e1df!important;
  box-shadow:0 0 16px rgba(53,225,223,.65)!important;
}

/* Deskripsi Hero */
.hero .hero-copy > p{
  max-width:760px!important;
  margin:18px 0 0!important;
  color:rgba(255,255,255,.96)!important;
  font-size:clamp(15px,1.3vw,19px)!important;
  line-height:1.6!important;
  text-shadow:0 2px 10px rgba(0,0,0,.26)!important;
}

/* Selamat Datang dibuat halus, tidak menyaingi judul */
.hero .welcome{
  margin-top:18px!important;
  width:min(620px,100%)!important;
  padding:12px 15px!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  box-shadow:none!important;
}
.hero .welcome b{
  color:#fff!important;
  font-size:14px!important;
}
.hero .welcome small{
  color:rgba(255,255,255,.90)!important;
  line-height:1.45!important;
}

/* Jika ada pill/keunggulan di Hero */
.hero .hero-pills{
  position:relative!important;
  z-index:4!important;
}
.hero .hero-pills span{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.25)!important;
}

/* FOTO REMO: fokus ke kepala/badan bagian atas di sisi kanan */
.hero .hero-slide.s4{
  background-position:80% 16%!important;
}

/* Saat slide Remo aktif, sisi kanan dibuat lebih terbuka */
.hero.remo-active::before{
  background:
    linear-gradient(
      90deg,
      rgba(4,40,82,.96) 0%,
      rgba(5,66,102,.90) 26%,
      rgba(3,104,112,.58) 44%,
      rgba(3,104,112,.10) 60%,
      rgba(3,104,112,0) 72%
    )!important;
}
.hero.remo-active .hero-copy{
  width:min(980px,72%)!important;
}

/* Tablet */
@media(max-width:900px){
  .hero{
    min-height:560px!important;
  }
  .hero .hero-copy{
    width:94%!important;
    padding:44px 22px 62px 4%!important;
  }
}

/* HP */
@media(max-width:650px){
  .hero{
    min-height:520px!important;
    align-items:flex-start!important;
  }

  .hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(4,40,82,.95) 0%,
        rgba(5,66,102,.88) 48%,
        rgba(3,104,112,.45) 78%,
        rgba(3,104,112,.14) 100%
      )!important;
  }

  .hero .hero-copy{
    width:100%!important;
    padding:34px 18px 60px!important;
    align-self:flex-start!important;
  }

  .hero .hero-copy .kicker{
    font-size:clamp(38px,11vw,58px)!important;
  }

  .hero .hero-copy h2{
    font-size:clamp(47px,14vw,72px)!important;
  }

  .hero .hero-copy h3{
    font-size:clamp(22px,6.5vw,34px)!important;
  }

  .hero .hero-copy > p{
    max-width:95%!important;
    font-size:13px!important;
  }

  .hero .hero-slide.s4{
    background-position:74% 14%!important;
  }

  .hero.remo-active .hero-copy{
    width:100%!important;
  }

  .hero .welcome{
    padding:10px 12px!important;
  }

  .hero .welcome small{
    font-size:10px!important;
  }
}

/* Layar sangat kecil */
@media(max-width:380px){
  .hero .hero-copy{
    padding-left:15px!important;
    padding-right:15px!important;
  }
  .hero .hero-copy .kicker{
    font-size:34px!important;
  }
  .hero .hero-copy h2{
    font-size:43px!important;
  }
  .hero .hero-copy h3{
    font-size:20px!important;
  }
}



/* =========================================================
   FIX HP - CARI LAYANAN TIDAK MENUTUPI HERO
========================================================= */
@media(max-width:650px){

  /*
   * Sebelumnya command bar terdorong ke bawah oleh top:66px.
   * Kembalikan ke alur normal halaman agar berada tepat
   * di atas HERO dan tidak menutupi tulisan COMMAND CENTER.
   */
  .v2-commandbar{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    margin:0 0 12px!important;
    z-index:20!important;
  }

  .v2-search{
    position:relative!important;
  }

  .v2-search input{
    min-height:48px!important;
    width:100%!important;
    font-size:15px!important;
    padding:12px 12px 12px 44px!important;
  }

  .v2-search span{
    left:13px!important;
    top:8px!important;
    font-size:24px!important;
  }

  /* Beri jarak yang jelas sebelum HERO */
  .v2-commandbar + .hero{
    margin-top:0!important;
  }
}

/* HP sangat kecil */
@media(max-width:380px){
  .v2-search input{
    font-size:13px!important;
    padding-left:40px!important;
  }
}



/* =========================================================
   SAMBUTAN KEPALA DESA PULOSARI
   Posisi: tepat di bawah HERO
========================================================= */

.cc-kades-section{
  margin:22px 0 26px!important;
  position:relative;
}

.cc-kades-wrap{
  display:grid;
  grid-template-columns:minmax(300px,390px) 1fr;
  align-items:stretch;
  gap:0;
  overflow:hidden;
  border:1px solid #d6e8e0;
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 10%,rgba(34,192,163,.10),transparent 27%),
    linear-gradient(135deg,#ffffff 0%,#f4fbf8 100%);
  box-shadow:0 18px 42px rgba(22,81,63,.09);
}

.cc-kades-photo{
  min-height:455px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,255,255,.20),transparent 30%),
    linear-gradient(155deg,#0b7559 0%,#07513f 100%);
}

.cc-kades-photo:after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-90px;
  height:190px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.cc-kades-orbit{
  position:absolute;
  width:320px;
  height:320px;
  top:40px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.20);
  box-shadow:
    0 0 0 24px rgba(255,255,255,.035),
    0 0 0 48px rgba(255,255,255,.025);
}

.cc-kades-photo img{
  position:relative;
  z-index:2;
  width:94%;
  max-height:440px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.18));
  transition:transform .28s ease;
}

.cc-kades-wrap:hover .cc-kades-photo img{
  transform:translateY(-4px) scale(1.012);
}

.cc-kades-content{
  padding:42px 44px;
  align-self:center;
}

.cc-kades-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  background:#e5f6ef;
  border:1px solid #c8e8db;
  color:#087054;
  font-size:10px;
  font-weight:900;
  letter-spacing:.35px;
}

.cc-kades-content h2{
  margin:14px 0 8px!important;
  color:#075b45!important;
  font-size:clamp(25px,2.4vw,37px)!important;
  line-height:1.13!important;
  letter-spacing:-.4px;
}

.cc-kades-name{
  margin-top:13px;
  color:#173f34;
  font-size:18px;
  font-weight:900;
  letter-spacing:.35px;
}

.cc-kades-role{
  margin-top:3px;
  margin-bottom:17px;
  color:#789087;
  font-size:11px;
  font-weight:800;
}

.cc-kades-content p{
  max-width:850px;
  margin:0 0 12px!important;
  color:#5d746c!important;
  font-size:13px!important;
  line-height:1.72!important;
}

.cc-kades-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:11px 15px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#0b7b5c,#0a684f);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(11,123,92,.16);
  transition:transform .18s ease,box-shadow .18s ease;
}

.cc-kades-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(11,123,92,.22);
}

/* Modal sambutan lengkap */
.cc-kades-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(7,35,29,.66);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.cc-kades-modal.show{
  display:flex;
}

.cc-kades-modal-card{
  width:min(820px,100%);
  max-height:90vh;
  overflow:auto;
  position:relative;
  border-radius:22px;
  border:1px solid #d3e6dd;
  background:#fff;
  box-shadow:0 28px 75px rgba(0,0,0,.28);
}

.cc-kades-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#19473a;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.cc-kades-modal-head{
  display:flex;
  gap:16px;
  align-items:center;
  padding:22px;
  background:linear-gradient(135deg,#075a45,#0c8161);
  color:#fff;
}

.cc-kades-modal-head img{
  width:92px;
  height:92px;
  border-radius:18px;
  object-fit:contain;
  background:#fff;
  padding:3px;
}

.cc-kades-modal-head span{
  display:block;
  font-size:9px;
  font-weight:900;
  opacity:.9;
  letter-spacing:.4px;
}

.cc-kades-modal-head h3{
  margin:4px 0 2px!important;
  color:#fff!important;
  font-size:24px!important;
}

.cc-kades-modal-head small{
  color:#d9f2e9;
}

.cc-kades-modal-body{
  padding:24px 26px 28px;
  color:#4d665e;
  font-size:14px;
  line-height:1.8;
}

.cc-kades-modal-body p{
  margin:0 0 15px!important;
}

.cc-kades-sign{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid #dce9e4;
}

.cc-kades-sign b{
  display:block;
  color:#075b45;
}

.cc-kades-sign span{
  display:block;
  margin-top:2px;
  color:#71867e;
  font-size:11px;
}

body.cc-kades-modal-open{
  overflow:hidden!important;
}

@media(max-width:900px){
  .cc-kades-wrap{
    grid-template-columns:320px 1fr;
  }

  .cc-kades-photo{
    min-height:420px;
  }

  .cc-kades-content{
    padding:32px 30px;
  }
}

@media(max-width:700px){
  .cc-kades-section{
    margin:16px 0 22px!important;
  }

  .cc-kades-wrap{
    grid-template-columns:1fr;
    border-radius:22px;
  }

  .cc-kades-photo{
    min-height:355px;
  }

  .cc-kades-photo img{
    width:min(88%,390px);
    max-height:345px;
  }

  .cc-kades-orbit{
    width:260px;
    height:260px;
    top:35px;
  }

  .cc-kades-content{
    padding:24px 21px 26px;
  }

  .cc-kades-content h2{
    font-size:26px!important;
  }

  .cc-kades-content p{
    font-size:12.5px!important;
  }

  .cc-kades-modal{
    padding:10px;
  }

  .cc-kades-modal-card{
    max-height:94vh;
    border-radius:18px;
  }

  .cc-kades-modal-head{
    padding:16px;
  }

  .cc-kades-modal-head img{
    width:72px;
    height:72px;
  }

  .cc-kades-modal-head h3{
    font-size:18px!important;
  }

  .cc-kades-modal-body{
    padding:18px;
    font-size:13px;
    line-height:1.7;
  }
}



/* Voice khusus popup Sambutan Kepala Desa */
.pv-popup-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 14px;
  padding:10px 12px;
  background:#eef8f4;
  border:1px solid #cfe4db;
  border-radius:12px;
}
.pv-popup-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
  font:800 11px Arial,Helvetica,sans-serif;
}
.pv-popup-play{
  background:#08755a;
  color:#fff;
}
.pv-popup-stop{
  background:#fff;
  color:#31554a;
  border:1px solid #cadbd5;
}
.pv-popup-status{
  font:700 10px Arial,Helvetica,sans-serif;
  color:#577067;
}
@media(max-width:600px){
  .pv-popup-tools{gap:6px;padding:9px}
  .pv-popup-btn{font-size:10px;padding:8px 11px}
  .pv-popup-status{width:100%}
}



/* =========================================================
   COMMAND CENTER V3 — PERAPIHAN TAMPILAN
========================================================= */
#ccv3ControlBar{
  position:sticky;
  top:0;
  z-index:120;
  margin:10px 0 14px;
  padding:12px;
  border:1px solid #cfe2ea;
  border-radius:15px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 7px 20px rgba(25,70,95,.08);
}
.ccv3-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ccv3-row + .ccv3-row{margin-top:8px}
.ccv3-label{
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#6d8797;
  margin-right:3px;
}
.ccv3-pill{
  border:1px solid #cfe0e8;
  border-radius:999px;
  padding:7px 11px;
  background:#f5fafc;
  color:#315f78;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}
.ccv3-pill:hover{transform:translateY(-1px)}
.ccv3-pill.active{
  background:linear-gradient(135deg,#0b6d56,#167aa7);
  color:#fff;
  border-color:transparent;
}
.ccv3-aud{
  min-width:170px;
}
.ccv3-counts{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.ccv3-badge{
  border-radius:999px;
  padding:6px 9px;
  font-size:9px;
  font-weight:900;
  border:1px solid #d5e4e8;
  background:#fff;
  color:#476675;
}
.ccv3-badge.online{color:#0a7654;border-color:#bfe4d5;background:#edf9f4}
.ccv3-badge.warn{color:#a36512;border-color:#ecd6ae;background:#fff8e7}
.ccv3-badge.offline{color:#a93a3a;border-color:#efc5c5;background:#fff0f0}

.ccv3-search{
  flex:1 1 260px;
  min-width:220px;
  position:relative;
}
.ccv3-search input{
  width:100%;
  border:1px solid #cbdde5;
  border-radius:10px;
  padding:9px 12px 9px 31px;
  font-size:10px;
  background:#f9fcfd;
  color:#244f66;
  outline:none;
}
.ccv3-search:before{
  content:"🔎";
  position:absolute;
  left:10px;
  top:7px;
  font-size:12px;
}

.ccv3-hide{display:none!important}

/* Kartu dibuat lebih padat */
.apps{
  gap:12px!important;
}
.apps .app{
  min-height:145px!important;
  border-radius:14px!important;
  padding:12px!important;
}
.apps .app h3,
.apps .app .app-title{
  margin-top:8px!important;
  margin-bottom:5px!important;
}
.apps .app p{
  font-size:9px!important;
  line-height:1.45!important;
  margin-bottom:9px!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Hilangkan catatan teknis lama pada publik */
#v2Filters{display:none!important}

#ccv3Empty{
  display:none;
  grid-column:1/-1;
  padding:28px;
  text-align:center;
  border:1px dashed #bed5df;
  border-radius:14px;
  color:#6e8794;
  background:#f8fcfd;
  font-size:11px;
}

/* ARPUL/shortcut kiri bawah jangan menutup kartu */
@media(min-width:701px){
  [id*="arpul" i][style*="position: fixed"],
  [class*="arpul" i][style*="position: fixed"]{
    right:18px!important;
    left:auto!important;
  }
}

@media(max-width:700px){
  #ccv3ControlBar{
    position:relative;
    top:auto;
    padding:10px;
  }
  .ccv3-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ccv3-label{grid-column:1/-1}
  .ccv3-search{grid-column:1/-1;min-width:0}
  .ccv3-counts{grid-column:1/-1;margin-left:0}
  .ccv3-pill{border-radius:9px;padding:8px 7px}
  .ccv3-aud{min-width:0}
}



/* FINAL POLISH V3 */
#ccv3ControlBar{
  position:sticky!important;
  top:8px!important;
  z-index:80!important;
  margin:10px auto 16px!important;
  border-radius:14px!important;
  box-shadow:0 8px 22px rgba(27,71,92,.10)!important;
}

/* Grid dibuat lebih lega di desktop */
.apps{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;
}
.apps .app{
  min-height:150px!important;
}

/* Hindari elemen mengambang menutup kartu */
[id*="arpul" i],
[class*="arpul" i]{
  z-index:70!important;
}
[id*="arpul" i][style*="position: fixed"],
[class*="arpul" i][style*="position: fixed"]{
  left:auto!important;
  right:20px!important;
  bottom:74px!important;
}
[id*="layanan" i][style*="position: fixed"],
[class*="layanan" i][style*="position: fixed"]{
  left:18px!important;
  bottom:18px!important;
}

/* Tombol kembali ke atas tetap di sudut kanan bawah */
a[href="#top"],button[aria-label*="atas" i],.back-to-top,.scroll-top{
  right:18px!important;
  bottom:18px!important;
}

/* Sedikit lebih lapang untuk teks */
.apps .app h3,.apps .app .app-title{
  font-size:12px!important;
  line-height:1.25!important;
}
.apps .app p{
  font-size:9px!important;
  line-height:1.48!important;
}

/* Responsive */
@media(max-width:1250px){
  .apps{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .apps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #ccv3ControlBar{top:4px!important}
}
@media(max-width:600px){
  .apps{grid-template-columns:1fr!important}
  #ccv3ControlBar{
    position:relative!important;
    top:auto!important;
    margin:8px 0 12px!important;
  }
  [id*="arpul" i][style*="position: fixed"],
  [class*="arpul" i][style*="position: fixed"]{
    right:10px!important;
    bottom:78px!important;
    transform:scale(.9);
    transform-origin:bottom right;
  }
}



/* =========================================================
   PETA DIGITAL — ELEMEN UTAMA COMMAND CENTER
========================================================= */
#ccPetaUtama{
  margin:18px 0;
  border:1px solid #cfe1e8;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(28,74,96,.08);
}
.ccpeta-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg,#0b6d56,#167aa7);
  color:#fff;
}
.ccpeta-head h2{
  margin:0 0 4px;
  font-size:17px;
}
.ccpeta-head p{
  margin:0;
  font-size:9px;
  line-height:1.45;
  opacity:.9;
}
.ccpeta-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.ccpeta-btn{
  display:inline-block;
  border:1px solid rgba(255,255,255,.45);
  border-radius:8px;
  padding:8px 11px;
  color:#fff;
  background:rgba(255,255,255,.12);
  text-decoration:none;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.ccpeta-framewrap{
  position:relative;
  height:420px;
  background:
    linear-gradient(rgba(11,65,82,.06),rgba(11,65,82,.06)),
    #dfecef;
}
.ccpeta-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#eaf3f5;
}
.ccpeta-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#dcecef,#edf7f6);
  color:#376373;
  font-size:11px;
  font-weight:800;
  z-index:2;
  transition:opacity .25s ease;
}
.ccpeta-loading.hide{opacity:0;pointer-events:none}
.ccpeta-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:10px 14px 13px;
  background:#f8fbfc;
  border-top:1px solid #e0eaed;
}
.ccpeta-tag{
  border:1px solid #d2e1e6;
  border-radius:999px;
  padding:6px 9px;
  font-size:8px;
  color:#456b7a;
  background:#fff;
  font-weight:800;
}
@media(max-width:700px){
  .ccpeta-head{align-items:flex-start;flex-direction:column}
  .ccpeta-actions{width:100%}
  .ccpeta-btn{flex:1;text-align:center}
  .ccpeta-framewrap{height:300px}
}



/* =========================================================
   ARPUL — ASISTEN DIGITAL COMMAND CENTER V3
========================================================= */
#ccV3AssistLauncher{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:14500;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #c7dfd7;
  border-radius:999px;
  padding:8px 13px 8px 8px;
  background:rgba(255,255,255,.97);
  color:#0b6d56;
  box-shadow:0 9px 28px rgba(20,65,55,.18);
  font:900 11px Arial,Helvetica,sans-serif;
  cursor:pointer;
  transition:.18s ease;
}
#ccV3AssistLauncher:hover{transform:translateY(-2px)}
#ccV3AssistLauncher .avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#e8f8f2,#e8f3fb);
  overflow:hidden;
  flex:none;
  font-size:22px;
}
#ccV3AssistLauncher .avatar img{
  width:100%;height:100%;object-fit:contain;
}
#ccV3AssistLauncher small{
  display:block;
  color:#728a82;
  font-size:8px;
  font-weight:700;
  margin-top:1px;
}

#ccV3AssistPanel{
  position:fixed;
  right:18px;
  bottom:72px;
  z-index:14510;
  width:min(360px,calc(100vw - 24px));
  max-height:min(620px,calc(100vh - 95px));
  display:none;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #cde0da;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(24,62,53,.24);
}
#ccV3AssistPanel.open{display:flex}

.ccv3a-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 14px;
  background:linear-gradient(135deg,#0b6d56,#167aa7);
  color:#fff;
}
.ccv3a-brand{
  display:flex;align-items:center;gap:9px;min-width:0;
}
.ccv3a-brand .miniavatar{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.95);
  color:#0b6d56;
  overflow:hidden;
  flex:none;
  font-size:22px;
}
.ccv3a-brand .miniavatar img{
  width:100%;height:100%;object-fit:contain;
}
.ccv3a-brand b{display:block;font-size:12px}
.ccv3a-brand small{display:block;font-size:8px;opacity:.85;margin-top:2px}
.ccv3a-close{
  width:30px;height:30px;border-radius:50%;border:0;
  background:rgba(255,255,255,.18);color:#fff;
  font-size:16px;cursor:pointer;flex:none;
}
.ccv3a-body{
  padding:13px;
  overflow:auto;
}
.ccv3a-greeting{
  margin:0 0 10px;
  padding:10px 11px;
  border-radius:11px;
  background:#eef8f4;
  border:1px solid #d1e7de;
  color:#365e52;
  font-size:10px;
  line-height:1.55;
}
.ccv3a-quick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:11px;
}
.ccv3a-quick button{
  border:1px solid #d3e2e6;
  border-radius:10px;
  padding:9px 8px;
  background:#f8fbfc;
  color:#28566d;
  text-align:left;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
.ccv3a-quick button:hover{background:#eef7fa}
.ccv3a-search{
  display:flex;gap:6px;margin-top:4px;
}
.ccv3a-search input{
  flex:1;min-width:0;
  border:1px solid #cbdce2;
  border-radius:9px;
  padding:9px 10px;
  font-size:10px;
  outline:none;
}
.ccv3a-search button{
  border:0;border-radius:9px;
  background:#0b6d56;color:#fff;
  padding:8px 11px;font-weight:900;font-size:9px;cursor:pointer
}
#ccV3AssistResults{
  display:none;
  margin-top:10px;
  border-top:1px solid #e3ecef;
  padding-top:9px;
}
#ccV3AssistResults.show{display:block}
.ccv3a-result-title{
  font-size:9px;font-weight:900;color:#6f8793;margin-bottom:6px
}
.ccv3a-result{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid #dce7ea;
  border-radius:8px;
  padding:8px 9px;
  margin-bottom:6px;
  background:#fff;
  color:#2d596b;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.ccv3a-result:hover{background:#f2f8fa}
.ccv3a-empty{
  font-size:9px;color:#7a8d95;padding:8px 0
}
.ccv3a-foot{
  padding:8px 12px;
  border-top:1px solid #e4ecee;
  background:#f8fbfc;
  color:#779096;
  font-size:8px;
  text-align:center;
}

/* Launcher jangan menabrak tombol back-to-top */
.back-to-top,.scroll-top,a[href="#top"]{
  right:18px!important;
  bottom:78px!important;
}

@media(max-width:600px){
  #ccV3AssistLauncher{
    right:10px;bottom:10px;
    padding:7px 11px 7px 7px;
  }
  #ccV3AssistLauncher .avatar{width:34px;height:34px}
  #ccV3AssistPanel{
    right:8px;
    bottom:60px;
    width:calc(100vw - 16px);
    max-height:calc(100vh - 76px);
    border-radius:15px;
  }
  .ccv3a-quick{grid-template-columns:1fr 1fr}
}



/* =========================================================
   POSISI ARPUL — KIRI BAWAH
   Tombol UP tetap di kanan bawah
========================================================= */
#ccV3AssistLauncher{
  left:18px!important;
  right:auto!important;
  bottom:18px!important;
}

#ccV3AssistPanel{
  left:18px!important;
  right:auto!important;
  bottom:72px!important;
}

/* Pastikan tombol kembali ke atas bebas di kanan */
.back-to-top,
.scroll-top,
a[href="#top"],
button[aria-label*="atas" i]{
  right:18px!important;
  left:auto!important;
  bottom:18px!important;
  z-index:14600!important;
}

/* Bila ada tombol floating lama di kanan bawah, beri ruang */
[id*="scroll" i][style*="position: fixed"],
[class*="scroll" i][style*="position: fixed"]{
  right:18px!important;
  left:auto!important;
}

/* HP */
@media(max-width:600px){
  #ccV3AssistLauncher{
    left:10px!important;
    right:auto!important;
    bottom:10px!important;
  }
  #ccV3AssistPanel{
    left:8px!important;
    right:auto!important;
    bottom:60px!important;
    width:calc(100vw - 16px)!important;
  }
  .back-to-top,
  .scroll-top,
  a[href="#top"],
  button[aria-label*="atas" i]{
    right:10px!important;
    left:auto!important;
    bottom:10px!important;
  }
}



#ccKondisiHariIni{
  margin:18px 0;padding:15px;background:#fff;border:1px solid #d4e5ea;
  border-radius:17px;box-shadow:0 8px 24px rgba(28,72,92,.06);
}
.cckh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.cckh-head h2{margin:0;color:#174f69;font-size:17px}
.cckh-head small{display:block;color:#78909b;font-size:9px;margin-top:3px}
.cckh-admin{border:1px solid #cfe0e6;border-radius:999px;padding:7px 10px;color:#2a6077;background:#f8fbfc;text-decoration:none;font-size:8px;font-weight:900}
.cckh-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cckh-item{min-height:90px;border:1px solid #dce7ea;border-radius:12px;padding:10px;background:linear-gradient(180deg,#fff,#f8fbfc);cursor:pointer;transition:.15s ease}
.cckh-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(28,74,95,.08)}
.cckh-icon{font-size:19px;margin-bottom:6px}.cckh-num{font-size:23px;font-weight:900;color:#0a7b5d;line-height:1}
.cckh-label{font-size:8px;font-weight:900;color:#607a86;margin-top:6px;line-height:1.25;text-transform:uppercase}
.cckh-note{margin-top:10px;padding:9px 11px;background:#eef8f4;border:1px solid #d0e6dd;border-radius:10px;color:#486c60;font-size:9px;line-height:1.45}
@media(max-width:1100px){.cckh-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){
  #ccKondisiHariIni{padding:11px;margin:13px 0}.cckh-head{align-items:flex-start}
  .cckh-grid{grid-template-columns:repeat(2,1fr);gap:7px}.cckh-item{min-height:82px;padding:9px}.cckh-num{font-size:21px}
}



#ccApbdesVisual{
  margin:18px 0;padding:16px;background:#fff;border:1px solid #d4e5ea;
  border-radius:18px;box-shadow:0 8px 24px rgba(28,72,92,.06);
}
.ccav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ccav-head h2{margin:0;color:#174f69;font-size:17px}
.ccav-head small{display:block;color:#78909b;font-size:9px;margin-top:3px}
.ccav-link{border:1px solid #cfe0e6;border-radius:999px;padding:7px 10px;color:#2a6077;background:#f8fbfc;text-decoration:none;font-size:8px;font-weight:900}
.ccav-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.ccav-box{border:1px solid #dce7ea;border-radius:12px;padding:11px;background:linear-gradient(180deg,#fff,#f8fbfc)}
.ccav-box span{display:block;font-size:8px;font-weight:900;color:#6b838e;text-transform:uppercase}
.ccav-box b{display:block;margin-top:6px;font-size:17px;color:#0a7559}
.ccav-main{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:center}
.ccav-donutwrap{display:grid;place-items:center}
.ccav-donut{
  width:210px;height:210px;border-radius:50%;position:relative;background:#dfe9ec;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)
}
.ccav-donut:after{
  content:"Belanja\A per Bidang";
  white-space:pre;
  position:absolute;inset:43px;border-radius:50%;background:#fff;
  display:grid;place-items:center;text-align:center;
  color:#55727d;font-size:10px;font-weight:900;line-height:1.35;
  box-shadow:0 0 0 1px #e1eaed;
}
.ccav-legend{display:grid;gap:8px}
.ccav-row{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;font-size:9px;color:#506e7a}
.ccav-dot{width:11px;height:11px;border-radius:3px}
.ccav-row b{font-size:9px;color:#294f60}
.ccav-bar{grid-column:2/4;height:6px;border-radius:999px;background:#edf2f4;overflow:hidden}
.ccav-bar i{display:block;height:100%;border-radius:999px}
/* ANIMASI APBDES - BATANG MENGISI + KILAU */
.ccav-bar i{
    position:relative;
    overflow:hidden;
    transform-origin:left center;
    animation:ccavGrow 1.6s ease-out both;
}

.ccav-bar i::after{
    content:"";
    position:absolute;
    top:0;
    left:-45%;
    width:40%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        rgba(255,255,255,.75),
        rgba(255,255,255,.15),
        transparent
    );
    animation:ccavShine 2.8s ease-in-out infinite;
}

@keyframes ccavGrow{
    from{
        transform:scaleX(0);
        opacity:.45;
    }
    to{
        transform:scaleX(1);
        opacity:1;
    }
}

@keyframes ccavShine{
    0%{
        left:-45%;
    }
    55%,100%{
        left:115%;
    }
}

@media (prefers-reduced-motion:reduce){
    .ccav-bar i,
    .ccav-bar i::after{
        animation:none;
    }
}
.ccav-note{margin-top:12px;padding:9px 11px;background:#eef8f4;border:1px solid #d0e6dd;border-radius:10px;color:#486c60;font-size:9px;line-height:1.45}
@media(max-width:850px){.ccav-summary{grid-template-columns:repeat(2,1fr)}.ccav-main{grid-template-columns:1fr}.ccav-donut{width:190px;height:190px}}
@media(max-width:600px){#ccApbdesVisual{padding:11px}.ccav-head{align-items:flex-start}.ccav-summary{grid-template-columns:1fr 1fr;gap:7px}.ccav-box b{font-size:14px}}
/* ANIMASI DONAT APBDES */
.ccav-donut{
    transform-origin:center center;
    animation:ccavDonutMasuk 1.4s cubic-bezier(.22,.8,.3,1) both;
}

@keyframes ccavDonutMasuk{
    0%{
        opacity:0;
        transform:scale(.45) rotate(-40deg);
    }
    70%{
        opacity:1;
        transform:scale(1.06) rotate(4deg);
    }
    100%{
        opacity:1;
        transform:scale(1) rotate(0deg);
    }
}

@media (prefers-reduced-motion:reduce){
    .ccav-donut{
        animation:none;
    }
}



/* PULOSARI_THEME_PANEL_V1 */
:root{
  --pt-bg:#eef7f5;
  --pt-surface:#ffffff;
  --pt-text:#173c33;
  --pt-muted:#6d7f79;
  --pt-primary:#0b7d5e;
  --pt-primary2:#0f5f4d;
  --pt-accent:#d9b65d;
  --pt-line:#d5e5df;
}
body{
  background:var(--pt-bg)!important;
  color:var(--pt-text)!important;
  transition:background .25s ease,color .25s ease;
}
body .topbar,
body .v2-commandbar,
body .v2-metric,
body .card,
body .app-card,
body .service-card,
body .v2-priority > *,
body .welcome,
body .section-box{
  border-color:var(--pt-line)!important;
}
body .v2-commandbar,
body .v2-metric,
body .card,
body .app-card,
body .service-card,
body .v2-priority > *{
  background:var(--pt-surface)!important;
  color:var(--pt-text)!important;
}
body .section-title,
body h1,body h2,body h3,body h4,
body .identity h1{
  color:var(--pt-text);
}
body a:not(.pt-theme-btn):not(.pt-theme-choice){
  transition:filter .18s ease,background .18s ease,color .18s ease;
}
body .v2-actions a,
body .v2-actions button,
body .btn,
body button{
  border-color:var(--pt-line);
}
body .hero{
  background:
    linear-gradient(105deg,color-mix(in srgb,var(--pt-primary2) 96%,transparent),color-mix(in srgb,var(--pt-primary) 88%,transparent)),
    linear-gradient(135deg,var(--pt-primary),var(--pt-primary2))!important;
}
body .hero .kicker,
body .hero h2,
body .hero h3,
body .hero p,
body .hero .welcome,
body .hero .welcome *{
  color:#fff!important;
}


/* Tema */
body[data-pulosari-theme="green"]{
  --pt-bg:#eef7f5;--pt-surface:#fff;--pt-text:#173c33;--pt-muted:#687e76;
  --pt-primary:#0b7d5e;--pt-primary2:#075342;--pt-accent:#d5b45c;--pt-line:#d2e5de;
}
body[data-pulosari-theme="blue"]{
  --pt-bg:#eff6fb;--pt-surface:#fff;--pt-text:#17354a;--pt-muted:#6d8190;
  --pt-primary:#177da9;--pt-primary2:#104f73;--pt-accent:#54a6d4;--pt-line:#d4e3ed;
}
body[data-pulosari-theme="gold"]{
  --pt-bg:#f8f4e9;--pt-surface:#fffdf8;--pt-text:#453817;--pt-muted:#7c704f;
  --pt-primary:#94721c;--pt-primary2:#4e3b0e;--pt-accent:#d5aa43;--pt-line:#e5d8b8;
}
body[data-pulosari-theme="redwhite"]{
  --pt-bg:#fff5f5;--pt-surface:#fff;--pt-text:#4d2525;--pt-muted:#876c6c;
  --pt-primary:#c82828;--pt-primary2:#8f1515;--pt-accent:#ffffff;--pt-line:#efd2d2;
}
body[data-pulosari-theme="light"]{
  --pt-bg:#f7f8fa;--pt-surface:#fff;--pt-text:#263238;--pt-muted:#758188;
  --pt-primary:#607d8b;--pt-primary2:#37474f;--pt-accent:#90a4ae;--pt-line:#e0e5e8;
}
body[data-pulosari-theme="dark"]{
  --pt-bg:#101715;--pt-surface:#18211e;--pt-text:#eef7f4;--pt-muted:#a8bbb4;
  --pt-primary:#1b9a78;--pt-primary2:#0b3f34;--pt-accent:#d1a847;--pt-line:#2a3c36;
}
body[data-pulosari-theme="dark"] input,
body[data-pulosari-theme="dark"] select,
body[data-pulosari-theme="dark"] textarea{
  background:#111a17!important;color:#eef7f4!important;border-color:#33463f!important;
}
body[data-pulosari-theme="dark"] .section-title,
body[data-pulosari-theme="dark"] h1,
body[data-pulosari-theme="dark"] h2,
body[data-pulosari-theme="dark"] h3,
body[data-pulosari-theme="dark"] h4,
body[data-pulosari-theme="dark"] .identity h1{
  color:#eef7f4!important;
}
body[data-pulosari-theme="dark"] small,
body[data-pulosari-theme="dark"] .muted{
  color:#a8bbb4!important;
}

/* Tombol tersembunyi */
.pt-theme-fab{
  position:fixed;
  right:-7px;
  top:46%;
  z-index:99998;
  width:38px;
  height:52px;
  border:0;
  border-radius:14px 0 0 14px;
  background:color-mix(in srgb,var(--pt-primary) 82%,#000 18%)!important;
  color:#fff!important;
  display:grid;
  place-items:center;
  font-size:19px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  opacity:.48;
  transition:.2s ease;
}
.pt-theme-fab:hover,.pt-theme-fab:focus{right:0;opacity:1;transform:scale(1.03)}
.pt-theme-panel{
  position:fixed;
  right:-310px;
  top:50%;
  transform:translateY(-50%);
  z-index:99999;
  width:min(290px,88vw);
  padding:14px;
  background:var(--pt-surface)!important;
  color:var(--pt-text)!important;
  border:1px solid var(--pt-line);
  border-radius:16px 0 0 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  transition:right .25s ease;
}
.pt-theme-panel.open{right:0}
.pt-theme-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.pt-theme-head b{font-size:14px}
.pt-theme-close{border:0!important;background:transparent!important;color:var(--pt-text)!important;font-size:22px!important;padding:2px 7px!important;cursor:pointer}
.pt-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt-theme-choice{
  display:flex;align-items:center;gap:8px;
  padding:10px;border:1px solid var(--pt-line);border-radius:10px;
  background:var(--pt-surface);color:var(--pt-text);cursor:pointer;
  font-size:11px;font-weight:800;text-decoration:none;
}
.pt-theme-choice:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.08)}
.pt-theme-choice.active{outline:2px solid var(--pt-primary);border-color:transparent}
.pt-dot{width:18px;height:18px;border-radius:50%;flex:0 0 18px;border:2px solid rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.pt-theme-note{font-size:10px;line-height:1.45;color:var(--pt-muted);margin-top:10px}
@media(max-width:700px){
  .pt-theme-fab{top:auto;bottom:78px;width:36px;height:46px}
  .pt-theme-panel{top:auto;bottom:68px;transform:none;border-radius:16px 0 0 16px}
}



/* Aksesibilitas standar Command Center - tanpa suara otomatis */
.pulosari-skip-link{
  position:fixed;
  left:14px;
  top:10px;
  z-index:2147480000;
  transform:translateY(-180%);
  background:#075b45;
  color:#fff;
  padding:11px 15px;
  border-radius:10px;
  font:800 14px Arial,Helvetica,sans-serif;
  text-decoration:none;
  box-shadow:0 7px 22px rgba(0,0,0,.18);
}
.pulosari-skip-link:focus{
  transform:translateY(0);
}
.app:focus,
.app:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:4px solid #ffbf00 !important;
  outline-offset:3px !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}



/* Tema berada permanen di topbar. Tidak ada lagi tab mengambang di kanan. */
#ccMasterTabs #ptThemeTop{
  appearance:none;
  font-family:Arial,Segoe UI,sans-serif;
  line-height:1;
  cursor:pointer;
}
#ccMasterTabs #ptThemeTop:focus-visible{
  outline:2px solid #e1b93e;
  outline-offset:2px;
}

/* Panel tema muncul di bawah area tombol topbar. */
.pt-theme-panel{
  top:60px!important;
  right:-360px!important;
  bottom:auto!important;
  transform:none!important;
  border-radius:16px!important;
  z-index:2147483647!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:right .22s ease,opacity .18s ease,visibility .18s ease!important;
}
.pt-theme-panel.open{
  top:60px!important;
  right:165px!important;
  bottom:auto!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Pastikan sisa rule tombol mengambang tidak bisa menghasilkan elemen lain. */
.pt-theme-fab,
#ptThemeFab{
  display:none!important;
}

@media(max-width:700px){
  .pt-theme-panel{
    top:112px!important;
    left:8px!important;
    right:8px!important;
    bottom:auto!important;
    width:auto!important;
    max-height:calc(100vh - 125px)!important;
    overflow:auto!important;
    transform:translateY(-12px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .pt-theme-panel.open{
    top:112px!important;
    left:8px!important;
    right:8px!important;
    bottom:auto!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}



/* CC_PROFILE_SIDEBAR_V1 */
#cc-profile-wrap{
  position:relative!important;
  width:36px!important;height:36px!important;min-height:36px!important;flex:0 0 36px!important;
}
#cc-profile-button{
  appearance:none!important;width:36px!important;height:36px!important;min-height:36px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:0!important;border-radius:6px!important;border:1px solid #b9ded5!important;
  background:linear-gradient(180deg,#ffffff 0%,#e5f5f1 100%)!important;color:#12483e!important;
  font-size:19px!important;line-height:1!important;cursor:pointer!important;
  box-shadow:inset 0 0 0 1px rgba(0,80,66,.08)!important;
}
#cc-profile-button:hover,#cc-profile-button:focus-visible,#cc-profile-wrap.open #cc-profile-button{
  background:#fff!important;border-color:#8fcbbb!important;outline:2px solid #f3ba22!important;
  outline-offset:1px!important;transform:none!important;
}
#cc-profile-button .cc-profile-tip{
  position:absolute!important;right:45px!important;top:50%!important;transform:translateY(-50%)!important;
  white-space:nowrap!important;padding:7px 10px!important;border-radius:5px!important;
  background:#075b50!important;color:#fff!important;font:700 11px/1.2 Arial,Helvetica,sans-serif!important;
  box-shadow:0 5px 14px rgba(0,0,0,.20)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
#cc-profile-button:hover .cc-profile-tip,#cc-profile-button:focus-visible .cc-profile-tip{
  opacity:1!important;visibility:visible!important;
}
#cc-profile-menu{
  position:absolute!important;right:46px!important;top:0!important;width:310px!important;padding:7px!important;
  border-radius:12px!important;background:#082d29!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.28)!important;opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;transform:translateX(8px)!important;transition:.15s ease!important;z-index:2147483647!important;
}
#cc-profile-wrap.open #cc-profile-menu{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
}
#cc-profile-menu .ccpm-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  padding:7px 9px 8px!important;color:#fff!important;font:900 12px Arial,Helvetica,sans-serif!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;margin-bottom:4px!important;
}
#cc-profile-menu .ccpm-close{
  appearance:none!important;border:0!important;background:transparent!important;color:#fff!important;
  font-size:18px!important;cursor:pointer!important;padding:0 3px!important;
}
#cc-profile-menu a{
  display:block!important;padding:8px 9px!important;margin:0!important;border:0!important;border-radius:7px!important;
  color:#fff!important;background:transparent!important;font:500 11px/1.3 Arial,Helvetica,sans-serif!important;
  text-decoration:none!important;text-align:left!important;box-shadow:none!important;
}
#cc-profile-menu a:hover,#cc-profile-menu a:focus-visible{
  background:#11564d!important;color:#fff!important;transform:none!important;outline:none!important;
}
#cc-profile-menu .ccpm-admin{
  margin-top:6px!important;border-top:1px solid rgba(255,255,255,.13)!important;padding-top:9px!important;
  font-weight:800!important;color:#ffdf80!important;
}
@media(max-width:700px){
  #cc-profile-wrap{width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important}
  #cc-profile-button{width:32px!important;height:32px!important;min-height:32px!important;font-size:17px!important}
  #cc-profile-button .cc-profile-tip{display:none!important}
  #cc-profile-menu{
    position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:75px!important;
    width:auto!important;max-height:70vh!important;overflow:auto!important;transform:translateY(12px)!important;
  }
  #cc-profile-wrap.open #cc-profile-menu{transform:none!important}
}



/* PROFIL DESA STABIL - file mandiri, tidak mengubah index.php */
#cc-profile-wrap,
#cc-profile-button,
#cc-profile-wrap.open #cc-profile-button{
  transform:none!important;
}
#cc-profile-button:hover,
#cc-profile-button:focus-visible,
#cc-profile-wrap.open #cc-profile-button{
  transform:none!important;
}
/* Menu dipindah ke body lewat JS agar tidak terpotong overflow sidebar */
body > #cc-profile-menu{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  width:310px!important;
  max-width:calc(100vw - 24px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  z-index:2147483647!important;
}
body > #cc-profile-menu.ccpm-show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
@media(max-width:700px){
  body > #cc-profile-menu{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:75px!important;
    width:auto!important;
    max-width:none!important;
    max-height:70vh!important;
    overflow:auto!important;
  }
}



/* FINAL: kunci tombol Profil Desa agar tidak pernah bergeser */
#cc-geneng-side #cc-profile-wrap{
  position:relative!important;
  left:auto!important; right:auto!important; top:auto!important; bottom:auto!important;
  width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important;
  flex:0 0 36px!important;
  margin:0!important; padding:0!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  transform:none!important;
}
#cc-geneng-side #cc-profile-button,
#cc-geneng-side #cc-profile-button:hover,
#cc-geneng-side #cc-profile-button:focus,
#cc-geneng-side #cc-profile-button:focus-visible,
#cc-geneng-side #cc-profile-button:active{
  position:relative!important;
  left:0!important; right:auto!important; top:0!important; bottom:auto!important;
  width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important;
  margin:0!important; padding:0!important;
  transform:none!important; translate:none!important; scale:none!important;
  outline:none!important;
  border:1px solid #b9ded5!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,#ffffff 0%,#e5f5f1 100%)!important;
  color:#12483e!important;
  box-shadow:inset 0 0 0 1px rgba(5,83,70,.08)!important;
}
#cc-geneng-side #cc-profile-button[aria-expanded="true"]{
  transform:none!important; translate:none!important; scale:none!important;
  outline:none!important;
  border-color:#8fcbbb!important;
  background:linear-gradient(180deg,#ffffff 0%,#edf9f6 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(5,83,70,.08)!important;
}
/* Jangan tampilkan tooltip kecil ketika submenu sedang terbuka */
#cc-profile-button[aria-expanded="true"] .cc-profile-tip{display:none!important}
@media(max-width:700px){
  #cc-geneng-side #cc-profile-wrap{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;flex-basis:32px!important}
  #cc-geneng-side #cc-profile-button,
  #cc-geneng-side #cc-profile-button:hover,
  #cc-geneng-side #cc-profile-button:focus,
  #cc-geneng-side #cc-profile-button:focus-visible,
  #cc-geneng-side #cc-profile-button:active{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
}



.cc-agenda-section{
  margin:28px 0 30px;
  padding:24px 0 6px;
  position:relative;
  overflow:hidden;
}
.cc-agenda-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.cc-agenda-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#eaf8f3;
  color:#0b765a;
  border:1px solid #cce8dd;
  border-radius:999px;
  padding:6px 10px;
  font-size:10px;
  font-weight:900;
  margin-bottom:7px;
}
.cc-agenda-head h3{
  margin:0;
  color:#163c32;
  font-size:23px;
  line-height:1.2;
}
.cc-agenda-head p{
  margin:6px 0 0;
  color:#6f837b;
  font-size:12px;
}
.cc-agenda-all{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 13px;
  border-radius:10px;
  background:#0b7759;
  color:#fff!important;
  text-decoration:none!important;
  font-size:10px;
  font-weight:900;
  box-shadow:0 6px 16px rgba(11,119,89,.15);
}
.cc-agenda-shell{position:relative;padding:0 42px}
.cc-agenda-viewport{overflow:hidden}
.cc-agenda-track{
  display:flex;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.cc-agenda-page{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  padding:2px;
}
.cc-agenda-card{
  min-width:0;
  background:#fff;
  border:1px solid #dce9e4;
  border-radius:17px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(18,70,56,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  position:relative;
}
.cc-agenda-card:hover{
  transform:translateY(-7px);
  box-shadow:0 17px 36px rgba(18,70,56,.14);
  border-color:#a9d8c8;
}
.cc-agenda-img{
  height:165px;
  background:linear-gradient(135deg,#e8f4ef,#f5faf8);
  position:relative;
  overflow:hidden;
}
.cc-agenda-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.cc-agenda-card:hover .cc-agenda-img img{transform:scale(1.055)}
.cc-agenda-img-empty{height:100%;display:grid;place-items:center;font-size:45px;color:#74a995}
.cc-agenda-status{
  position:absolute;top:10px;right:10px;
  border-radius:999px;padding:6px 8px;
  color:#fff;background:#1877b9;
  font-size:8px;font-weight:900;
  box-shadow:0 5px 12px rgba(0,0,0,.13);
}
.cc-agenda-status.today{background:#d66b0b}
.cc-agenda-status.live{background:#d32e3d}
.cc-agenda-status.done{background:#66766f}
.cc-agenda-body{padding:13px;display:flex;gap:10px}
.cc-agenda-date{
  width:56px;height:60px;flex:0 0 auto;
  border:1px solid #d8e6e1;border-radius:11px;
  background:#f6faf8;display:grid;place-items:center;align-content:center;
}
.cc-agenda-date b{font-size:23px;line-height:1;color:#09825f}
.cc-agenda-date span{font-size:8px;font-weight:900;color:#72867e;margin-top:3px}
.cc-agenda-cat{font-size:8px;color:#0e8a67;text-transform:uppercase;font-weight:900;letter-spacing:.35px}
.cc-agenda-title{
  margin:5px 0 7px;color:#173d32;
  font-size:14px;line-height:1.35;font-weight:900;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cc-agenda-meta{font-size:9px;color:#74877f;line-height:1.65}
.cc-agenda-foot{padding:0 13px 13px;display:flex;gap:6px}
.cc-agenda-detail,.cc-agenda-share{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:8px;text-decoration:none!important;
  font-size:9px;font-weight:900;
}
.cc-agenda-detail{background:#0b795a;color:#fff!important}
.cc-agenda-share{background:#edf6f2;color:#0b6c53!important;border:1px solid #d4e7df}
.cc-agenda-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  border:1px solid #d2e4dc;background:#fff;color:#08775a;
  box-shadow:0 7px 18px rgba(17,70,55,.12);
  display:grid;place-items:center;cursor:pointer;font-size:18px;font-weight:900;z-index:3;
}
.cc-agenda-prev{left:0}.cc-agenda-next{right:0}
.cc-agenda-nav:disabled{opacity:.35;cursor:default}
.cc-agenda-dots{display:flex;justify-content:center;gap:6px;margin-top:13px}
.cc-agenda-dot{width:7px;height:7px;border-radius:999px;border:0;background:#c9d8d2;padding:0;cursor:pointer;transition:.2s}
.cc-agenda-dot.active{width:22px;background:#0b795a}
.cc-agenda-empty{
  background:#fff;border:1px dashed #cbded6;border-radius:16px;
  padding:34px;text-align:center;color:#74877f;
}
@media(max-width:850px){
  .cc-agenda-shell{padding:0 36px}
  .cc-agenda-page{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .cc-agenda-head{align-items:flex-start}
  .cc-agenda-head h3{font-size:19px}
  .cc-agenda-head p{font-size:10px}
  .cc-agenda-all{padding:8px 9px;font-size:8px}
  .cc-agenda-shell{padding:0 29px}
  .cc-agenda-page{grid-template-columns:1fr}
  .cc-agenda-img{height:190px}
  .cc-agenda-nav{width:28px;height:28px;font-size:15px}
}
@media(hover:none){
  .cc-agenda-card:hover{transform:none;box-shadow:0 8px 24px rgba(18,70,56,.06)}
  .cc-agenda-card:hover .cc-agenda-img img{transform:none}
}




:root{--arpul-green:#0b6b4d;--arpul-green2:#0f8a63;--arpul-shadow:0 10px 28px rgba(0,0,0,.20)}

#arpul-root{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:2147483647!important;pointer-events:none!important;overflow:visible!important;visibility:visible!important;opacity:1!important;transform:none!important;contain:none!important;isolation:isolate}
#arpul-widget{position:absolute!important;left:max(10px,env(safe-area-inset-left))!important;bottom:max(54px,calc(env(safe-area-inset-bottom) + 42px))!important;display:flex!important;flex-direction:row!important;align-items:flex-end!important;gap:8px!important;max-width:calc(100vw - 20px)!important;visibility:visible!important;opacity:1!important;pointer-events:none!important}
#arpul-avatar-wrap{width:82px;height:128px;flex:0 0 auto;position:relative;filter:drop-shadow(0 8px 9px rgba(0,0,0,.24));animation:arpulFloat 3s ease-in-out infinite;pointer-events:auto;cursor:pointer}
#arpul-avatar{width:100%;height:100%;display:block;object-fit:contain;object-position:left bottom;user-select:none;-webkit-user-drag:none}
#arpul-bubble{pointer-events:auto;position:relative;margin-bottom:44px;min-width:150px;max-width:min(330px,calc(100vw - 115px));padding:9px 14px;border:2px solid rgba(11,107,77,.18);border-radius:22px;background:rgba(255,255,255,.97);box-shadow:var(--arpul-shadow);color:var(--arpul-green);font-weight:800;font-size:14px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
#arpul-bubble::after{content:"";position:absolute;right:-7px;bottom:10px;width:13px;height:13px;background:#fff;border-right:2px solid rgba(11,107,77,.18);border-bottom:2px solid rgba(11,107,77,.18);transform:rotate(-45deg)}
#arpul-text{display:inline-block}
#arpul-panel{position:absolute!important;left:max(10px,env(safe-area-inset-left))!important;bottom:max(190px,calc(env(safe-area-inset-bottom) + 178px))!important;width:min(360px,calc(100vw - 20px))!important;max-height:min(520px,65dvh)!important;overflow:auto!important;background:#fff;border:1px solid #dce9e2;border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:.22s ease;pointer-events:auto!important}
#arpul-panel.open{opacity:1;visibility:visible;transform:none}
.arpul-panel-head{background:linear-gradient(135deg,var(--arpul-green),var(--arpul-green2));color:#fff;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.arpul-panel-head strong{font-size:15px} #arpul-close{border:0;background:rgba(255,255,255,.18);color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}
.arpul-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}.arpul-menu a{text-decoration:none;color:#17332a;background:#f5faf7;border:1px solid #e0eee6;border-radius:12px;padding:11px 8px;font-size:13px;font-weight:700;text-align:center}.arpul-note{padding:0 12px 12px;color:#65736d;font-size:11px;line-height:1.45}
#arpul-top{position:absolute!important;right:max(12px,env(safe-area-inset-right))!important;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))!important;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#17332a;font-size:23px;line-height:44px;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.20);cursor:pointer;pointer-events:auto;opacity:0;visibility:hidden;transition:.2s ease}
#arpul-top.show{opacity:1;visibility:visible}
@keyframes arpulFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:768px){#arpul-widget{left:max(8px,env(safe-area-inset-left))!important;bottom:max(64px,calc(env(safe-area-inset-bottom) + 52px))!important;gap:6px!important}#arpul-avatar-wrap{width:clamp(62px,18vw,76px);height:clamp(98px,29vw,120px)}#arpul-bubble{min-width:0;max-width:calc(100vw - clamp(62px,18vw,76px) - 30px);margin-bottom:clamp(25px,8vw,36px);padding:7px 10px;font-size:clamp(11px,3.2vw,13px);border-radius:18px}#arpul-panel{left:max(8px,env(safe-area-inset-left))!important;bottom:max(170px,calc(env(safe-area-inset-bottom) + 155px))!important;width:calc(100vw - 16px)!important;max-width:360px!important;max-height:58dvh!important}}
@media(max-width:390px){#arpul-widget{left:max(6px,env(safe-area-inset-left))!important;bottom:max(58px,calc(env(safe-area-inset-bottom) + 48px))!important;gap:4px!important}#arpul-avatar-wrap{width:58px;height:92px}#arpul-bubble{max-width:calc(100vw - 78px);margin-bottom:23px;padding:6px 9px;font-size:11px}#arpul-panel{left:max(6px,env(safe-area-inset-left))!important;bottom:max(148px,calc(env(safe-area-inset-bottom) + 136px))!important;width:calc(100vw - 12px)!important;max-height:55dvh!important}.arpul-menu a{font-size:11px;padding:9px 6px}}
@media(max-height:520px) and (orientation:landscape){#arpul-widget{bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))!important}#arpul-avatar-wrap{width:54px;height:84px}#arpul-bubble{margin-bottom:20px;font-size:11px;max-width:210px}#arpul-panel{bottom:max(108px,calc(env(safe-area-inset-bottom) + 96px))!important;max-height:64dvh!important}}
@media(prefers-reduced-motion:reduce){#arpul-avatar-wrap{animation:none}}

/* ===== MOBILE PERFECT FIX v2 ===== */
#arpul-root{
  position:static!important;
  inset:auto!important;
  width:0!important;
  height:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:auto!important;
}
#arpul-widget{
  position:fixed!important;
  left:max(10px,env(safe-area-inset-left))!important;
  bottom:max(92px,calc(env(safe-area-inset-bottom) + 76px))!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:5px!important;
  width:auto!important;
  max-width:calc(100vw - 20px)!important;
  pointer-events:none!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}
#arpul-avatar-wrap{
  width:68px!important;
  height:116px!important;
  min-width:68px!important;
  flex:0 0 68px!important;
  animation:arpulFloat 3s ease-in-out infinite!important;
  pointer-events:auto!important;
}
#arpul-bubble{
  min-width:0!important;
  width:auto!important;
  max-width:165px!important;
  margin:0 0 46px 0!important;
  padding:7px 11px!important;
  font-size:12px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  border-radius:18px!important;
  box-shadow:0 6px 18px rgba(0,0,0,.18)!important;
  pointer-events:auto!important;
}
#arpul-panel{
  position:fixed!important;
  left:max(8px,env(safe-area-inset-left))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(225px,calc(env(safe-area-inset-bottom) + 205px))!important;
  width:auto!important;
  max-width:360px!important;
  max-height:52vh!important;
  max-height:52dvh!important;
  z-index:2147483647!important;
}
#arpul-top{
  position:fixed!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px))!important;
  z-index:2147483647!important;
}
@media(max-width:480px){
  #arpul-widget{
    left:max(8px,env(safe-area-inset-left))!important;
    bottom:max(86px,calc(env(safe-area-inset-bottom) + 70px))!important;
    gap:4px!important;
  }
  #arpul-avatar-wrap{
    width:60px!important;
    height:104px!important;
    min-width:60px!important;
    flex-basis:60px!important;
  }
  #arpul-bubble{
    max-width:154px!important;
    margin-bottom:42px!important;
    padding:6px 9px!important;
    font-size:11px!important;
  }
  #arpul-panel{
    left:max(6px,env(safe-area-inset-left))!important;
    right:max(6px,env(safe-area-inset-right))!important;
    bottom:max(205px,calc(env(safe-area-inset-bottom) + 188px))!important;
    max-height:50dvh!important;
  }
}
@media(max-width:360px){
  #arpul-avatar-wrap{width:54px!important;height:94px!important;min-width:54px!important;flex-basis:54px!important;}
  #arpul-bubble{max-width:138px!important;font-size:10.5px!important;margin-bottom:38px!important;}
}
@media(max-height:520px) and (orientation:landscape){
  #arpul-widget{bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))!important;}
  #arpul-avatar-wrap{width:50px!important;height:80px!important;min-width:50px!important;flex-basis:50px!important;}
  #arpul-bubble{max-width:145px!important;margin-bottom:30px!important;font-size:10.5px!important;}
  #arpul-panel{bottom:max(112px,calc(env(safe-area-inset-bottom) + 100px))!important;max-height:65dvh!important;}
}


/* ===== FIX KLIK MENU TANPA JAVASCRIPT ===== */
#arpul-toggle{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;}
#arpul-toggle:checked ~ #arpul-panel{opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;}
#arpul-toggle:not(:checked) ~ #arpul-panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
#arpul-widget label{cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;}
#arpul-bubble-label{display:block!important;pointer-events:auto!important;}
#arpul-avatar-label{display:block!important;pointer-events:auto!important;}
#arpul-close-label{display:flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;border-radius:50%!important;background:rgba(255,255,255,.16)!important;color:#fff!important;font-size:20px!important;cursor:pointer!important;user-select:none!important;}
#arpul-panel{z-index:2147483647!important;}


/* ===== FIX KLIK WHATSAPP MOBILE ===== */
.arpul-menu a, .arpul-wa-link{
  position:relative !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0.08);
}
.arpul-wa-link{
  cursor:pointer !important;
}
@media (max-width:768px){
  .arpul-panel, .arpul-menu, .arpul-menu a{
    pointer-events:auto !important;
  }
  .arpul-wa-link{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}


/* ===== WHATSAPP MOBILE FINAL ===== */
#arpul-wa-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  position:relative!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
#arpul-wa-link::after{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:1;
}


/* =========================================================
   ARPUL FINAL MOBILE + TEXT ROTATOR FIX
   ========================================================= */

/* Rotator pesan FINAL - animasi aman */
#arpul-text.arpul-css-rotator{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  min-width:0!important;
  min-height:1.35em!important;
  overflow:hidden!important;
}

#arpul-text.arpul-css-rotator .arpul-msg{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:100%!important;
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  animation-name:arpulPesanFinal;
  animation-duration:15s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}

#arpul-text .m1{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  animation-delay:0s;
}
#arpul-text .m2{animation-delay:3s}
#arpul-text .m3{animation-delay:6s}
#arpul-text .m4{animation-delay:9s}
#arpul-text .m5{animation-delay:12s}

@keyframes arpulPesanFinal{
  0%   {opacity:0;visibility:visible;transform:translateY(5px)}
  2%   {opacity:1;visibility:visible;transform:translateY(0)}
  18%  {opacity:1;visibility:visible;transform:translateY(0)}
  20%  {opacity:0;visibility:hidden;transform:translateY(-5px)}
  100% {opacity:0;visibility:hidden;transform:translateY(-5px)}
}

/* Root jangan pernah mengambil lebar/tinggi layar */
#arpul-root{
  position:static!important;
  inset:auto!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:auto!important;
}

/* Widget utama */
#arpul-widget{
  position:fixed!important;
  left:max(8px,env(safe-area-inset-left))!important;
  bottom:max(82px,calc(env(safe-area-inset-bottom) + 66px))!important;
  z-index:2147483647!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
  gap:5px!important;
  width:auto!important;
  max-width:calc(100vw - 16px)!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
}

/* Karakter */
#arpul-avatar-wrap{
  width:62px!important;
  height:103px!important;
  min-width:62px!important;
  max-width:62px!important;
  flex:0 0 62px!important;
  pointer-events:auto!important;
}
#arpul-avatar{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
}

/* Balon */
#arpul-bubble{
  box-sizing:border-box!important;
  width:auto!important;
  min-width:0!important;
  max-width:min(190px,calc(100vw - 94px))!important;
  margin:0 0 38px 0!important;
  padding:7px 10px!important;
  font-size:11px!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  border-radius:18px!important;
  pointer-events:auto!important;
}
#arpul-text.arpul-css-rotator .arpul-msg{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Panel menu */
#arpul-panel{
  position:fixed!important;
  left:max(6px,env(safe-area-inset-left))!important;
  right:max(6px,env(safe-area-inset-right))!important;
  bottom:max(190px,calc(env(safe-area-inset-bottom) + 175px))!important;
  width:auto!important;
  max-width:360px!important;
  max-height:52dvh!important;
  overflow:auto!important;
  z-index:2147483647!important;
}

/* Tombol ke atas */
#arpul-top{
  position:fixed!important;
  right:max(10px,env(safe-area-inset-right))!important;
  bottom:max(78px,calc(env(safe-area-inset-bottom) + 64px))!important;
  z-index:2147483647!important;
}

/* HP kecil */
@media screen and (max-width:480px){
  #arpul-widget{
    left:max(6px,env(safe-area-inset-left))!important;
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 58px))!important;
    gap:4px!important;
    max-width:calc(100vw - 12px)!important;
  }

  #arpul-avatar-wrap{
    width:55px!important;
    height:92px!important;
    min-width:55px!important;
    max-width:55px!important;
    flex-basis:55px!important;
  }

  #arpul-bubble{
    max-width:calc(100vw - 77px)!important;
    margin-bottom:32px!important;
    padding:6px 9px!important;
    font-size:10.5px!important;
  }

  #arpul-panel{
    left:max(5px,env(safe-area-inset-left))!important;
    right:max(5px,env(safe-area-inset-right))!important;
    bottom:max(168px,calc(env(safe-area-inset-bottom) + 154px))!important;
    max-height:50dvh!important;
  }

  .arpul-menu{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    padding:8px!important;
  }

  .arpul-menu a{
    min-width:0!important;
    font-size:10.5px!important;
    padding:9px 5px!important;
  }
}

/* HP sangat kecil */
@media screen and (max-width:360px){
  #arpul-avatar-wrap{
    width:49px!important;
    height:82px!important;
    min-width:49px!important;
    max-width:49px!important;
    flex-basis:49px!important;
  }

  #arpul-bubble{
    max-width:calc(100vw - 68px)!important;
    margin-bottom:28px!important;
    font-size:9.5px!important;
    padding:5px 8px!important;
  }

  #arpul-panel{
    bottom:max(148px,calc(env(safe-area-inset-bottom) + 136px))!important;
  }
}

/* Landscape HP */
@media screen and (max-height:520px) and (orientation:landscape){
  #arpul-widget{
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;
  }

  #arpul-avatar-wrap{
    width:46px!important;
    height:72px!important;
    min-width:46px!important;
    flex-basis:46px!important;
  }

  #arpul-bubble{
    margin-bottom:22px!important;
    max-width:170px!important;
    font-size:9.5px!important;
  }

  #arpul-panel{
    bottom:max(92px,calc(env(safe-area-inset-bottom) + 82px))!important;
    max-height:64dvh!important;
  }
}


#arpul-bubble.arpul-bubble-stack{
  position:relative!important;
  display:block!important;
  width:170px!important;
  min-width:170px!important;
  max-width:calc(100vw - 76px)!important;
  height:34px!important;
  min-height:34px!important;
  overflow:visible!important;
  padding:0!important;
  margin:0 0 38px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#arpul-bubble.arpul-bubble-stack::before,
#arpul-bubble.arpul-bubble-stack::after{
  display:none!important;
}
#arpul-bubble .arpul-bubble-msg{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  display:flex!important;
  align-items:center!important;
  width:170px!important;
  max-width:calc(100vw - 76px)!important;
  min-height:34px!important;
  box-sizing:border-box!important;
  padding:7px 12px!important;
  border-radius:20px!important;
  background:#fff!important;
  border:2px solid rgba(0,128,96,.18)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.12)!important;
  color:#087a5c!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px) scale(.98);
  animation:arpulBubbleCycle 15s linear infinite;
}
#arpul-bubble .b1{animation-delay:0s}
#arpul-bubble .b2{animation-delay:3s}
#arpul-bubble .b3{animation-delay:6s}
#arpul-bubble .b4{animation-delay:9s}
#arpul-bubble .b5{animation-delay:12s}

@keyframes arpulBubbleCycle{
  0%{opacity:0;visibility:visible;transform:translateY(5px) scale(.98)}
  2%{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  18%{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  20%{opacity:0;visibility:hidden;transform:translateY(-5px) scale(.98)}
  100%{opacity:0;visibility:hidden;transform:translateY(-5px) scale(.98)}
}

@media(max-width:480px){
  #arpul-bubble.arpul-bubble-stack{
    width:165px!important;
    min-width:145px!important;
    max-width:calc(100vw - 75px)!important;
    height:34px!important;
    margin-bottom:32px!important;
  }
  #arpul-bubble .arpul-bubble-msg{
    width:165px!important;
    max-width:calc(100vw - 75px)!important;
    min-height:34px!important;
    padding:6px 10px!important;
    font-size:10.5px!important;
  }
}

@media(max-width:360px){
  #arpul-bubble.arpul-bubble-stack{
    width:145px!important;
    min-width:130px!important;
    max-width:calc(100vw - 67px)!important;
    height:32px!important;
  }
  #arpul-bubble .arpul-bubble-msg{
    width:145px!important;
    max-width:calc(100vw - 67px)!important;
    min-height:32px!important;
    padding:5px 9px!important;
    font-size:9.5px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #arpul-bubble .arpul-bubble-msg{
    animation:arpulBubbleCycle 15s linear infinite!important;
  }
}




#ccMasterTabs{
  position:sticky;
  top:0;
  z-index:99999;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #dbe8df;
  box-shadow:0 4px 14px rgba(0,45,28,.06);
  font-family:Arial,Segoe UI,sans-serif;
}
#ccMasterTabs .cc-tabs-inner{
  max-width:1540px;
  margin:auto;
  padding:9px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#ccMasterTabs .cc-brand{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  color:#075d37;
  white-space:nowrap;
}
#ccMasterTabs .cc-brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#087443;
  color:white;
  font-weight:900;
}
#ccMasterTabs a,
#ccMasterTabs button{
  text-decoration:none;
  border:1px solid #d7e6dd;
  background:#eef6f1;
  color:#075d37;
  border-radius:10px;
  padding:9px 13px;
  font-weight:800;
  font-size:13px;
  transition:.15s ease;
}
#ccMasterTabs a:hover,
#ccMasterTabs button:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 13px rgba(0,60,35,.08);
}
#ccMasterTabs a.active{
  background:#087443;
  color:#fff;
  border-color:#087443;
}
#ccMasterTabs a.admin{
  background:#14375d;
  color:#fff;
  border-color:#14375d;
}
#ccMasterTabs .cc-note{
  font-size:11px;
  color:#6c7e74;
}
@media(max-width:700px){
  #ccMasterTabs .cc-tabs-inner{gap:6px}
  #ccMasterTabs .cc-brand{width:100%;margin-bottom:2px}
  #ccMasterTabs a,#ccMasterTabs button{flex:1;text-align:center;padding:9px 7px}
  #ccMasterTabs .cc-note{display:none}
}



/* ============================================================
   MENU SAMPING KANAN - MODEL DESA GENENG
   Menyatu langsung di index.php Command Center Pulosari.
   ============================================================ */
#cc-geneng-side{
  position:fixed!important;
  right:0!important;
  top:118px!important;
  z-index:2147483000!important;
  width:49px!important;
  padding:7px 5px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:4px!important;
  background:linear-gradient(180deg,#0b7650 0%,#11836f 48%,#167f8b 100%)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-right:0!important;
  border-radius:10px 0 0 10px!important;
  box-shadow:0 8px 24px rgba(12,78,70,.22)!important;
  max-height:calc(100vh - 132px)!important;
  overflow-y:auto!important;
  overflow-x:visible!important;
  scrollbar-width:none!important;
}
#cc-geneng-side::-webkit-scrollbar{display:none!important}

#cc-geneng-side .ccgs-item,
#cc-geneng-toggle{
  position:relative!important;
  width:36px!important;
  height:36px!important;
  min-height:36px!important;
  flex:0 0 36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #b9ded5!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,#ffffff 0%,#e5f5f1 100%)!important;
  color:#12483e!important;
  text-decoration:none!important;
  font-size:20px!important;
  line-height:1!important;
  box-shadow:inset 0 0 0 1px rgba(5,83,70,.08)!important;
  cursor:pointer!important;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease!important;
}
#cc-geneng-side .ccgs-home{
  background:linear-gradient(180deg,#fffdf7 0%,#e7f4ef 100%)!important;
  border-color:#c9dfd7!important;
}
#cc-geneng-side .ccgs-item:hover,
#cc-geneng-side .ccgs-item:focus-visible{
  background:#fff!important;
  transform:translateX(-3px)!important;
  outline:2px solid #f3ba22!important;
  outline-offset:1px!important;
  box-shadow:0 4px 11px rgba(0,0,0,.16)!important;
}
#cc-geneng-side .ccgs-label{
  position:absolute!important;
  right:45px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  white-space:nowrap!important;
  padding:7px 10px!important;
  border-radius:5px!important;
  background:#075b50!important;
  color:#fff!important;
  font:700 11px/1.2 Arial,Helvetica,sans-serif!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  box-shadow:0 5px 14px rgba(0,0,0,.22)!important;
}
#cc-geneng-side .ccgs-item:hover .ccgs-label,
#cc-geneng-side .ccgs-item:focus-visible .ccgs-label{
  opacity:1!important;
  visibility:visible!important;
}
#cc-geneng-toggle{display:none!important}

/* Tombol Tema dibuat menyatu dengan sidebar kanan. */
#ptThemeFab{
  right:0!important;
  top:70px!important;
  width:49px!important;
  height:42px!important;
  border-radius:10px 0 0 10px!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-right:0!important;
  background:linear-gradient(135deg,#0b7650 0%,#167f8b 100%)!important;
  color:#fff!important;
  opacity:1!important;
  box-shadow:0 7px 20px rgba(12,78,70,.20)!important;
  font-size:19px!important;
  transform:none!important;
}
#ptThemeFab:hover,
#ptThemeFab:focus{
  right:0!important;
  opacity:1!important;
  transform:translateX(-2px) scale(1.02)!important;
}
#ptThemeFab::after{
  content:"Tema Tampilan";
  position:absolute;
  right:55px;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:7px 10px;
  border-radius:6px;
  background:#075b50;
  color:#fff;
  font:700 11px/1.2 Arial,Helvetica,sans-serif;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.15s ease;
}
#ptThemeFab:hover::after,
#ptThemeFab:focus::after{
  opacity:1;
  visibility:visible;
}
@media(min-width:701px){
  .pt-theme-panel.open{
    right:56px!important;
    border-radius:16px!important;
  }
}

@media(max-height:760px) and (min-width:701px){
  #cc-geneng-side{
    top:70px!important;
    max-height:calc(100vh - 80px)!important;
  }
  #cc-geneng-side .ccgs-item{
    width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important;font-size:17px!important;
  }
}

@media(max-width:700px){
  #cc-geneng-side{
    top:auto!important;
    right:7px!important;
    bottom:76px!important;
    width:43px!important;
    padding:5px!important;
    max-height:none!important;
    overflow:visible!important;
    border-radius:11px!important;
  }
  #cc-geneng-toggle{
    display:flex!important;
    width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important;font-size:17px!important;
  }
  #cc-geneng-side .ccgs-item{
    display:none!important;
    width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important;font-size:17px!important;
  }
  #cc-geneng-side.ccgs-open{
    max-height:68vh!important;
    overflow-y:auto!important;
  }
  #cc-geneng-side.ccgs-open .ccgs-item{display:flex!important}
  #cc-geneng-side .ccgs-label{right:40px!important}
  #ptThemeFab{
    top:auto!important;
    right:55px!important;
    bottom:78px!important;
    width:43px!important;
    height:43px!important;
    border-radius:12px!important;
  }
  #ptThemeFab::after{display:none!important}
  .pt-theme-panel{
    right:-310px!important;
    top:auto!important;
    bottom:132px!important;
    transform:none!important;
    border-radius:16px!important;
  }
  .pt-theme-panel.open{
    right:7px!important;
  }
}

/* CC_SIDEBAR_SERASI_V2 */
#cc-geneng-side .ccgs-item:hover,
#cc-geneng-side .ccgs-item:focus-visible{
  background:linear-gradient(180deg,#ffffff,#edf9f6)!important;
  border-color:#8fcbbb!important;
  box-shadow:0 5px 14px rgba(7,91,80,.16)!important;
}
#cc-geneng-side .ccgs-label{
  border:1px solid rgba(255,255,255,.12)!important;
}



/* CC_THEME_MASUK_SIDEBAR_V3 */
/* Tombol tema menjadi item resmi di dalam sidebar kanan */
#cc-geneng-side #ptThemeFab{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  flex:0 0 36px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:6px!important;
  border:1px solid #b9ded5!important;
  background:linear-gradient(180deg,#fff8e9 0%,#e9f5ef 100%)!important;
  color:#145548!important;
  opacity:1!important;
  box-shadow:inset 0 0 0 1px rgba(0,80,66,.06)!important;
  font-size:19px!important;
  transform:none!important;
  z-index:auto!important;
}
#cc-geneng-side #ptThemeFab:hover,
#cc-geneng-side #ptThemeFab:focus{
  right:auto!important;
  transform:translateX(-3px)!important;
  background:#fff!important;
  border-color:#8fcbbb!important;
  outline:2px solid #f3ba22!important;
  outline-offset:1px!important;
  box-shadow:0 5px 14px rgba(7,91,80,.16)!important;
}

/* Tooltip tombol Tema sama dengan tooltip menu lain */
#cc-geneng-side #ptThemeFab::after{
  content:"Tema Tampilan"!important;
  position:absolute!important;
  right:45px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  white-space:nowrap!important;
  padding:7px 10px!important;
  border-radius:5px!important;
  background:#075b50!important;
  color:#fff!important;
  font:700 11px/1.2 Arial,Helvetica,sans-serif!important;
  box-shadow:0 5px 14px rgba(0,0,0,.20)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#cc-geneng-side #ptThemeFab:hover::after,
#cc-geneng-side #ptThemeFab:focus::after{
  opacity:1!important;
  visibility:visible!important;
}

/* Panel tema tetap membuka ke kiri dari dock */
.pt-theme-panel{
  z-index:2147483647!important;
}
@media(min-width:701px){
  .pt-theme-panel.open{
    right:56px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    border-radius:16px!important;
  }
}
@media(max-width:700px){
  #cc-geneng-side #ptThemeFab{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    flex-basis:32px!important;
    font-size:17px!important;
  }
  #cc-geneng-side #ptThemeFab::after{display:none!important}
  .pt-theme-panel{
    right:-310px!important;
    top:auto!important;
    bottom:128px!important;
    transform:none!important;
    border-radius:16px!important;
  }
  .pt-theme-panel.open{
    right:7px!important;
  }
}