/* =================================================================
   ANNORA MODERN — desa-modern.css
   Dimuat di commons/meta.php SETELAH semua CSS asli Annora
   Prinsip: TIDAK menyembunyikan .masterpage
   Semua style bekerja DI DALAM struktur asli OpenSID
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── VARIABLES ── */
:root {
  --mn1: #1b4d35;
  --mn2: #2e7d50;
  --mn3: #4aa06c;
  --mn4: #c8e6d6;
  --mng: #c8973f;
  --mng2: #e8b45a;
  --mng3: #f5e4c3;
  --mndk: #0e1a12;
  --mnink: #1c2c20;
  --mnbg: #f5f2ec;
  --mncard: #ffffff;
  --mnmuted: #6b7d72;
  --mnborder: rgba(0,0,0,0.07);
  --mnsh1: 0 2px 12px rgba(27,77,53,.08);
  --mnsh2: 0 8px 32px rgba(27,77,53,.13);
  --mnsh3: 0 20px 60px rgba(27,77,53,.18);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--mnbg); }
::-webkit-scrollbar-thumb { background: var(--mn3); border-radius: 10px; }

/* ── BODY & FONT ── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: var(--mnbg) !important;
  font-size: 14px !important;
}
.masterpage { background: var(--mnbg) !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* =================================================================
   TOPBAR (.headtop)
   ================================================================= */
.headtop {
  position: fixed !important; top: 0; left: 0; right: 0;
  background: var(--mndk) !important;
  height: 46px !important; z-index: 9000;
}
.headtop::before { display: none !important; }
.headtop-inner {
  height: 46px !important;
  padding: 0 28px !important;
  display: flex !important; align-items: center; justify-content: space-between;
  max-width: 1400px; margin: 0 auto;
}
.headtop-left {
  display: flex !important; align-items: center; gap: 8px;
  margin: 0 !important;
}
.headtop-left img {
  height: 28px !important; width: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  object-fit: cover;
}
.headtop-left p {
  font-size: 12px !important; font-weight: 600 !important;
  color: white !important; line-height: 1.2 !important; margin: 0 !important;
}
#tanggal {
  font-size: 11px !important; color: rgba(255,255,255,.4) !important;
  margin: 0 0 0 16px !important; padding: 0 !important;
}
.headtop-right { display: flex !important; align-items: center; gap: 6px; }
.top-item {
  width: 30px !important; height: 30px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  transition: all .2s;
  display: flex !important; align-items: center; justify-content: center;
}
.top-item:hover { background: var(--mng) !important; border-color: var(--mng) !important; }
.top-item img { height: 16px !important; width: auto !important; }
.canvas-menu {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  width: 32px !important; height: 32px !important;
  margin: 0 8px 0 0 !important;
}
.canvas-menu svg { width: 16px !important; height: 16px !important; fill: white !important; }
.topsearch .form-control {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 20px !important;
  height: 30px !important; width: 150px !important;
  font-size: 12px !important; color: white !important;
  padding: 0 32px 0 12px !important;
  transition: all .3s;
}
.topsearch .form-control:focus { width: 200px !important; background: rgba(255,255,255,.14) !important; box-shadow: none !important; }
.topsearch .form-control::placeholder { color: rgba(255,255,255,.35) !important; }
.search-submit { background: transparent !important; border: none !important; }
.search-submit svg { fill: rgba(255,255,255,.5) !important; width: 13px !important; height: 13px !important; }
#warna .dropdown-menu {
  border-radius: 14px !important;
  box-shadow: var(--mnsh3) !important;
  border: 1px solid var(--mnborder) !important;
  padding: 14px !important;
}
.color-item { border-radius: 8px !important; }
.tooltip2text {
  background: var(--mndk) !important;
  border-radius: 8px !important; font-size: 11px !important;
}

/* =================================================================
   HEADER (.header / .headermain)
   ================================================================= */
.header { padding-top: 46px !important; position: relative; overflow: hidden; }
.header-bg::after {
  background: linear-gradient(135deg, rgba(14,26,18,.82) 0%, rgba(14,26,18,.5) 100%) !important;
  opacity: 1 !important;
}
/* Blob dekoratif di header */
.header::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,151,63,.16) 0%, transparent 70%);
  pointer-events: none; z-index: 1;
}
.headermain { padding: 26px 0 !important; }
.headermain-logo {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.2) !important;
  overflow: hidden;
  background: rgba(255,255,255,.08) !important;
}
.headermain-logo img { width: 72px !important; height: 72px !important; object-fit: cover; }
.headermain h2 {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 2.5px !important; text-transform: uppercase !important;
  color: var(--mng2) !important;
  margin-bottom: 4px !important;
  background-image: none !important; /* hapus animasi gradient asli */
}
.headermain h1 {
  font-family: 'DM Serif Display', serif !important;
  font-size: clamp(22px, 3.5vw, 38px) !important;
  font-weight: 400 !important; color: white !important;
  letter-spacing: -.5px !important; line-height: 1.1 !important;
  background-image: none !important;
  -webkit-text-fill-color: white !important;
  text-transform: none !important;
  animation: none !important;
}
.headermain p { font-size: 12.5px !important; color: rgba(255,255,255,.5) !important; margin-top: 5px !important; }

/* =================================================================
   NAVBAR (.menumain)
   ================================================================= */
.menumain {
  background: white !important;
  border-bottom: 1px solid var(--mnborder) !important;
  min-height: 50px !important;
  box-shadow: 0 1px 14px rgba(0,0,0,.05) !important;
  position: sticky !important; top: 46px !important; z-index: 8000 !important;
}
.menumain::before, .menumain::after { display: none !important; }
.nav-wrapper ul li a {
  color: #4a5a55 !important; font-size: 13px !important;
  font-weight: 600 !important; height: 50px !important; line-height: 50px !important;
  text-shadow: none !important; padding: 0 14px !important;
  border-bottom: 2px solid transparent !important;
  transition: all .2s !important; letter-spacing: .2px;
}
.nav-wrapper ul li a:hover,
.nav-wrapper ul li a.active {
  color: var(--mn1) !important;
  border-bottom-color: var(--mn3) !important;
}
.to-home {
  background: var(--mn1) !important; border-radius: 9px !important;
  width: 34px !important; height: 34px !important; margin: 8px 8px 0 0 !important;
  transition: all .2s;
}
.to-home:hover { background: var(--mn2) !important; }
.to-home svg { fill: white !important; width: 18px !important; height: 18px !important; }
.nav-sub {
  background: var(--mndk) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: var(--mnsh2) !important; border: none !important;
  padding: 6px 0 !important; top: 100% !important;
}
.nav-sub li a {
  color: rgba(255,255,255,.65) !important; height: auto !important;
  line-height: 1.3 !important; padding: 9px 16px !important;
  border: none !important; border-left: 3px solid transparent !important;
  border-radius: 0 !important; margin: 0 !important;
  font-size: 12.5px !important; font-weight: 500 !important;
}
.nav-sub li a:hover {
  color: white !important; border-left-color: var(--mng2) !important;
  background: rgba(255,255,255,.06) !important;
}
/* Modal menu mobile */
.modalhead { background: var(--mn1) !important; padding: 16px 20px !important; }
.modalhead h1, .modalhead p { color: white !important; }
.modalfoot { background: var(--mndk) !important; color: white !important; font-weight: 600 !important; font-size: 13px !important; }

/* =================================================================
   RUNNING TEXT
   ================================================================= */
.running {
  background: var(--mng3) !important; border-radius: 10px !important;
  display: flex !important; align-items: center; overflow: hidden;
  min-height: 38px; margin-bottom: 18px !important;
}
.running-head {
  flex-shrink: 0; background: var(--mng) !important;
  color: white !important; height: 38px; padding: 0 14px !important;
  display: flex !important; align-items: center; gap: 5px;
  border-radius: 0 !important; float: none !important; position: relative !important;
}
.running-head-inner p { font-size: 10px !important; font-weight: 700 !important; color: white !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin: 0 !important; }
.running-head-inner svg { width: 13px !important; height: 13px !important; fill: white !important; }
.running marquee { font-size: 12.5px !important; font-weight: 500 !important; line-height: 38px !important; color: var(--mnink) !important; }

/* =================================================================
   HERO SLIDER + ICON LAYOUT (.hometop)
   ================================================================= */
.hometop { background: transparent !important; }
.hometop::before, .hometop::after { display: none !important; }
.hometop-inner { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
.mainslider { border-radius: 20px !important; overflow: hidden; box-shadow: var(--mnsh3) !important; }
.image-slider { border-radius: 0 !important; height: 400px !important; }
.image-slider img { border-radius: 0 !important; }
.flickity-prev-next-button {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important; background: rgba(0,0,0,.3) !important;
}
.mainslider .flickity-prev-next-button.previous { left: 12px !important; }
.mainslider .flickity-prev-next-button.next { right: 12px !important; }

/* Icon grid */
.iconright {
  background: white !important; border-radius: 18px !important;
  border: 1px solid var(--mnborder) !important;
  box-shadow: var(--mnsh1) !important;
  width: calc(30% - 12px) !important; margin: 0 0 0 12px !important;
  padding: 0 !important;
}
.icon-item {
  background: var(--mnbg) !important; border: 1px solid var(--mnborder) !important;
  border-radius: 12px !important; height: auto !important; min-height: 58px;
  flex-direction: column !important; gap: 5px; transition: all .25s !important;
  margin: 3px !important;
}
.icon-item:hover {
  background: var(--mn1) !important; border-color: var(--mn1) !important;
  transform: translateY(-2px) !important; box-shadow: var(--mnsh1) !important;
}
.icon-item:hover p { color: white !important; }
.icon-item img { height: 26px !important; width: auto !important; margin: 0 !important; }
.icon-item p { font-size: 10.5px !important; font-weight: 600 !important; color: var(--mnmuted) !important; line-height: 1.3 !important; text-align: center; }
.iconright-top { margin: 8px 8px 4px !important; }
.iconright-bottom { margin: 4px 8px 8px !important; }

/* =================================================================
   ARTIKEL / BERITA (.hometop2 / artikel grid)
   ================================================================= */
.article {
  background: white !important; border: 1px solid var(--mnborder) !important;
  border-radius: 20px !important; box-shadow: var(--mnsh1) !important;
  margin-top: 18px !important;
}
.article .col3-grid {
  background: var(--mnbg) !important; border-radius: 14px !important; border-color: transparent !important;
  transition: all .25s !important;
}
.article .col3-grid:hover {
  background: white !important; border-color: var(--mn4) !important;
  box-shadow: var(--mnsh1) !important; transform: translateY(-3px) !important;
}
.article-main h2 { font-size: 13.5px !important; font-weight: 700 !important; color: var(--mnink) !important; }
.hoverlink:hover .article-main h2 { color: var(--mn2) !important; }
.image-article, .image-headline, .image-small, .image-gallery { border-radius: 12px !important; }
.readmore {
  border-radius: 20px !important; border-color: var(--mn4) !important;
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--mn1) !important;
}
.hoverlink:hover .readmore { background: var(--mn1) !important; color: white !important; border-color: var(--mn1) !important; }
.meta-item h3 { font-size: 11px !important; color: var(--mnmuted) !important; }

/* HEADLINE */
.headline {
  background: white !important; border-color: var(--mnborder) !important;
  border-radius: 20px !important; box-shadow: var(--mnsh1) !important;
  transition: all .25s !important; margin-top: 18px !important;
}
.headline:hover { transform: translateY(-2px) !important; box-shadow: var(--mnsh2) !important; }
.headline-text h2 { font-family: 'DM Serif Display', serif !important; font-size: 18px !important; font-weight: 400 !important; color: var(--mnink) !important; }
.hoverlink:hover .headline-text h2 { color: var(--mn2) !important; }
.headline-date { background: linear-gradient(135deg, var(--mn1), var(--mn3)) !important; border-radius: 10px 10px 0 0 !important; }

/* =================================================================
   SECTION HEADINGS
   ================================================================= */
.head-default { background: transparent !important; border-bottom: 1px solid var(--mnborder) !important; border-radius: 0 !important; }
.head-default-inner { background: transparent !important; height: auto !important; padding: 0 0 12px !important; }
.head-default-inner::after { display: none !important; }
.head-default-inner h1 { font-family: 'DM Serif Display', serif !important; font-size: 20px !important; font-weight: 400 !important; color: var(--mnink) !important; text-transform: none !important; }
.head-default-inner svg { fill: var(--mn2) !important; width: 20px !important; height: 20px !important; }
.head-default-right a, .heading-right-item p { font-size: 12px !important; font-weight: 600 !important; color: var(--mn1) !important; }
.head-dark { background: var(--mndk) !important; border-radius: 14px 14px 0 0 !important; height: auto !important; padding: 14px 18px !important; }
.head-dark h1 { font-size: 13px !important; font-weight: 700 !important; color: white !important; text-transform: none !important; }
.head-dark svg { fill: var(--mng2) !important; }
.head-module { background: var(--mnbg) !important; border-radius: 14px 14px 0 0 !important; height: auto !important; padding: 14px 18px !important; }
.head-module h1 { font-size: 13px !important; font-weight: 700 !important; color: var(--mnink) !important; text-transform: none !important; }
.head-sub h1 { font-family: 'DM Serif Display', serif !important; font-size: 20px !important; font-weight: 400 !important; border-bottom-color: var(--mng) !important; color: var(--mnink) !important; }

/* =================================================================
   WIDGET SIDEBAR (.carnav/.carmain/widget)
   ================================================================= */
.carnav { background: var(--mndk) !important; border-radius: 14px 14px 0 0 !important; overflow: hidden; }
.whead-item { height: 46px !important; background: transparent !important; border: none !important; padding: 0 16px !important; }
.whead-item h1 { font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; color: rgba(255,255,255,.55) !important; letter-spacing: .3px !important; }
.carousel-cell.is-selected .whead-item { background: rgba(255,255,255,.08) !important; }
.carousel-cell.is-selected .whead-item h1 { color: white !important; }
.carmain { border: 1px solid var(--mnborder) !important; border-top: none !important; border-radius: 0 0 14px 14px !important; background: white !important; padding: 10px !important; }
.widget { background: white !important; border: 1px solid var(--mnborder) !important; border-radius: 20px !important; box-shadow: var(--mnsh1) !important; overflow: hidden; margin: 0 !important; }

/* Widget heights */
.widget-height1, .widget-height2 { background: transparent !important; border: none !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }

/* ARSIP artikel widget */
.arsiphome { background: transparent !important; }
.arsiphome .nav-tabs { background: var(--mnbg) !important; border-radius: 12px 12px 0 0 !important; border-bottom: 1px solid var(--mnborder) !important; padding: 4px 8px 0 !important; }
.arsiphome .nav-tabs li a { font-size: 12px !important; font-weight: 700 !important; color: var(--mnmuted) !important; border-radius: 8px 8px 0 0 !important; border: none !important; background: transparent !important; padding: 8px 14px !important; }
.arsiphome .nav-tabs li.active a, .arsiphome .nav-tabs li a:hover { color: var(--mn1) !important; background: white !important; border-bottom-color: white !important; }
.row-small { border-bottom: 1px dashed var(--mnborder) !important; padding: 10px 0 !important; }
.row-small:hover { background: var(--mnbg) !important; }
.row-small p { font-size: 12.5px !important; font-weight: 600 !important; color: var(--mnink) !important; }

/* AGENDA */
.agenda { background: var(--mnbg) !important; border: 1px solid var(--mnborder) !important; border-radius: 12px !important; margin-bottom: 8px !important; transition: all .25s !important; overflow: hidden; }
.agenda:hover { background: white !important; box-shadow: var(--mnsh1) !important; transform: translateX(4px) !important; }
.agenda-jadwal { background: var(--mn1) !important; border-radius: 0 !important; padding: 8px 10px !important; }
.agenda-jadwal h1 { font-family: 'Space Grotesk', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: white !important; line-height: 1 !important; }
.agenda-jadwal h3 { font-size: 9.5px !important; color: rgba(255,255,255,.65) !important; }
.agenda-jadwal .hari-ini { background: var(--mng) !important; border-radius: 6px !important; }
.agenda-title h2 { font-size: 13px !important; font-weight: 600 !important; color: var(--mnink) !important; line-height: 1.3 !important; }

/* APARATUR */
.aparatur { background: white !important; border: 1px solid var(--mnborder) !important; border-radius: 20px !important; box-shadow: var(--mnsh1) !important; overflow: hidden; }
.aparatur .head-dark { background: var(--mndk) !important; border-radius: 14px 14px 0 0 !important; }
.image-aparatur { border-radius: 12px !important; }
.abs-bottom { background: linear-gradient(0deg,rgba(14,26,18,.88),transparent) !important; border-radius: 0 0 12px 12px !important; }
.abs-bottom h3 { color: rgba(255,255,255,.7) !important; font-size: 10px !important; }
.abs-bottom p { font-weight: 700 !important; color: white !important; font-size: 13px !important; }

/* KEUANGAN progress */
.progress { border-radius: 8px !important; background: #f0ece4 !important; height: 8px !important; box-shadow: none !important; }
.progress-bar, .progress-bar-animated { background: linear-gradient(90deg, var(--mn2), var(--mn3)) !important; border-radius: 8px !important; }
.apbd-progress { border-radius: 8px !important; background: #f0ece4 !important; box-shadow: none !important; }
.apbd-result p { -webkit-text-fill-color: var(--mn1) !important; background-image: none !important; animation: none !important; font-size: 12px !important; }
.komentar .widget-height1 { background: transparent !important; }
.ptb-10 h3 { font-size: 13px !important; font-weight: 700 !important; color: var(--mnink) !important; }

/* GALERI */
.gallery { border-radius: 20px !important; border-color: var(--mnborder) !important; box-shadow: var(--mnsh1) !important; overflow: hidden; }
.gallery-head { background: var(--mnbg) !important; border-radius: 14px 14px 0 0 !important; padding: 14px 18px !important; border-bottom: 1px solid var(--mnborder) !important; }
.gallery-head svg { fill: var(--mn1) !important; width: 24px !important; }
.gallery-head h2 { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; color: var(--mn3) !important; text-transform: uppercase !important; }
.gallery-head h1 { font-family: 'DM Serif Display', serif !important; font-size: 20px !important; font-weight: 400 !important; color: var(--mnink) !important; }
.gallery-box .image-gallery { border-radius: 10px !important; }

/* MANDIRI */
.mandiri { border-radius: 20px !important; border-color: var(--mnborder) !important; box-shadow: var(--mnsh1) !important; overflow: hidden; }
.mandiri-logo h1 { color: white !important; font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; }
.mandiri-logo h2 { color: rgba(255,255,255,.7) !important; }
.mandiri-bottom { background: white !important; border-top: 1px solid var(--mnborder) !important; }
.masuk { background: var(--mn1) !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 13px !important; }
.masuk:hover { background: var(--mn2) !important; }

/* STATISTIK */
.statistik { border-radius: 20px !important; border-color: var(--mnborder) !important; box-shadow: var(--mnsh1) !important; overflow: hidden; }

/* LAPAK */
.lapakfront { border-radius: 20px !important; border-color: var(--mnborder) !important; box-shadow: var(--mnsh1) !important; overflow: hidden; }

/* =================================================================
   PETA + MAP SECTION
   ================================================================= */
.map-section {
  background: linear-gradient(135deg, var(--mn1), var(--mn2)) !important;
  border-radius: 20px !important; padding: 20px !important; margin-top: 18px !important;
}
.map-col { border-radius: 14px !important; overflow: hidden !important; }
.map-col-c { background: rgba(255,255,255,.1) !important; border-radius: 14px !important; }
.map-col-c td { color: rgba(255,255,255,.75) !important; font-size: 12.5px !important; }
.table-small td { font-size: 12.5px !important; }

/* =================================================================
   ANGGARAN
   ================================================================= */
.anggaran { border-radius: 20px !important; border: 1px solid var(--mnborder) !important; background: white !important; box-shadow: var(--mnsh1) !important; overflow: hidden; margin-top: 18px !important; }
.anggaran .head-default-inner { background: var(--mndk) !important; padding: 14px 18px !important; margin: 0 !important; border-radius: 0 !important; }
.anggaran .head-default-inner h1 { color: white !important; font-size: 13px !important; text-transform: none !important; }
.anggaran .head-default-inner svg { fill: var(--mng2) !important; }
.anggaran .head-default-inner::before, .anggaran .head-default-inner::after { display: none !important; }
.anggaran-box { padding: 12px 0; border-bottom: 1px dashed var(--mnborder); }
.anggaran-box:last-child { border-bottom: none; }
.anggaran-box h2 { font-size: 13px !important; font-weight: 700 !important; color: var(--mnink) !important; margin-bottom: 6px !important; }
.height-anggaran { padding: 0 10px !important; }

/* =================================================================
   HALAMAN DALAM (pagestyle)
   ================================================================= */
.pagecontent { background: var(--mnbg) !important; }
.grider { gap: 24px !important; }
.gridermain { flex: 0 0 73% !important; }
.griderside { flex: 0 0 27% !important; }
.grider-top { top: 100px !important; }
.areaprimary {
  background: white !important; border: 1px solid var(--mnborder) !important;
  border-radius: 20px !important; box-shadow: var(--mnsh1) !important;
  overflow: hidden; margin-bottom: 20px !important;
}

/* =================================================================
   IDM
   ================================================================= */
.idm-heading { background: var(--mnbg) !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 12px !important; }
.idm-heading h1 { font-size: 10px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--mn3) !important; }
.idm-item { background: white !important; border: 1px solid var(--mnborder) !important; border-radius: 12px !important; padding: 12px 14px !important; margin: 5px 0 !important; }
.idm-item .idm-line { display: none !important; }
.idm-data h3 { font-family: 'Space Grotesk', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--mnink) !important; }
.idmname p { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--mnmuted) !important; }
.idm-icon-item { border-radius: 10px !important; width: 36px !important; height: 36px !important; }
.idm-icon-item.bggreen { background: rgba(46,125,80,.12) !important; }
.idm-icon-item.bggreen svg { fill: var(--mn3) !important; }
.idm-icon-item.bgjingga { background: rgba(200,151,63,.15) !important; }
.idm-icon-item.bgjingga svg { fill: var(--mng) !important; }
.idm-icon-item.bgorange { background: rgba(232,180,90,.15) !important; }
.idm-icon-item.bgorange svg { fill: var(--mng2) !important; }
.idm-icon-item.bgbiru { background: rgba(53,87,214,.1) !important; }
.idm-icon-item.bgbiru svg { fill: #3557d6 !important; }

/* =================================================================
   FOOTER (.footer-section)
   ================================================================= */
.footer-section { background: var(--mndk) !important; padding-top: 0 !important; margin-top: 0 !important; }
.footer-data { padding: 48px 0 40px !important; position: relative !important; }
/* Banner footer */
.footer-title {
  position: relative !important; width: 100% !important;
  left: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; -webkit-transform: none !important;
  border-radius: 18px !important; height: 110px !important;
  margin-bottom: 36px !important;
  display: flex !important; align-items: center;
}
.footer-title::after {
  background: linear-gradient(135deg,rgba(14,26,18,.88),rgba(14,26,18,.55)) !important;
  border-radius: 18px !important; opacity: 1 !important;
}
.footer-title::before { display: none !important; }
.footer-title div {
  position: relative !important; z-index: 2 !important;
  display: flex !important; align-items: center; gap: 16px; padding: 0 28px !important;
}
.footer-title img { height: 56px !important; width: 56px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,.2) !important; object-fit: cover; }
.footer-title h1 { font-family: 'DM Serif Display', serif !important; font-size: 26px !important; font-weight: 400 !important; color: white !important; line-height: 1.1 !important; text-shadow: none !important; }
/* Grid 3 kolom footer */
.footer-data .maingrid { gap: 36px !important; align-items: flex-start !important; }
.footer-data .col3-grid { background: transparent !important; padding: 0 !important; }
.footer-data .col3-grid h3 {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 2.5px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important; margin-bottom: 16px !important;
  padding-bottom: 10px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.footer-data p { font-size: 13px !important; color: rgba(255,255,255,.5) !important; line-height: 1.8 !important; }
.footer-right { float: none !important; margin: 0 !important; }
.footer-contact {
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important; padding: 9px 12px !important; margin-bottom: 7px !important;
  gap: 10px; transition: all .2s;
}
.footer-contact:last-child { margin-bottom: 0 !important; }
.footer-contact:hover { background: rgba(255,255,255,.1) !important; }
.footer-contact p { font-size: 12.5px !important; color: rgba(255,255,255,.55) !important; margin: 0 !important; }
.footer-icon {
  width: 28px !important; height: 28px !important; flex-shrink: 0;
  background: rgba(200,151,63,.14) !important; border-radius: 7px !important;
}
.footer-icon svg { fill: var(--mng2) !important; width: 14px !important; height: 14px !important; }
.social-media { margin-top: 14px !important; gap: 7px !important; flex-wrap: wrap !important; }
.social-media p { font-size: 10px !important; color: rgba(255,255,255,.3) !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }
.social-media img {
  border-radius: 9px !important; width: 36px !important; height: 36px !important;
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important;
  padding: 4px !important; object-fit: contain; transition: all .2s;
}
.social-media img:hover { background: var(--mng) !important; border-color: var(--mng) !important; }
.social-media a svg { fill: rgba(255,255,255,.5) !important; }
/* Copyright */
.copyright {
  position: relative !important; left: auto !important; right: auto !important; bottom: auto !important;
  background: transparent !important; height: auto !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding: 18px 28px !important; margin: 0 !important;
  display: flex !important; justify-content: space-between !important;
  align-items: center; flex-wrap: wrap; gap: 8px;
}
.copyright p { font-size: 12px !important; color: rgba(255,255,255,.25) !important; margin: 0 5px !important; }
.copyright a { color: var(--mng2) !important; font-weight: 600 !important; }
.copyright a:hover { color: white !important; }

/* Scroll to top */
#ScrollToTop { background: var(--mn1) !important; border-radius: 11px !important; width: 40px !important; }
#ScrollToTop svg { fill: white !important; }
.backto { background: var(--mng) !important; border-radius: 11px !important; width: 40px !important; height: 40px !important; }
.backto svg { fill: white !important; }
.bottom-tombol { position: fixed; bottom: 20px; right: 20px; z-index: 5000; }
.homestyle .backto { display: none !important; }

/* =================================================================
   LAYOUT INNER PAGE — grider, pagestyle
   ================================================================= */
.pagestyle .running { border-radius: 10px !important; }

/* =================================================================
   DARK MODE
   ================================================================= */
.darkmode body { background: #0a1209 !important; color: #c8ddd0 !important; }
.darkmode .masterpage { background: #0a1209 !important; }
.darkmode .article, .darkmode .headline, .darkmode .areaprimary,
.darkmode .aparatur, .darkmode .widget, .darkmode .galeri,
.darkmode .agenda { background: #112018 !important; border-color: rgba(255,255,255,.08) !important; }
.darkmode .article .col3-grid { background: #0a1209 !important; }
.darkmode .icon-item { background: #112018 !important; border-color: rgba(255,255,255,.08) !important; }
.darkmode .icon-item p { color: #8aaa92 !important; }
.darkmode .iconright { background: #112018 !important; }
.darkmode .idm-item { background: #112018 !important; border-color: rgba(255,255,255,.08) !important; }
.darkmode .running { background: rgba(200,151,63,.1) !important; }
.darkmode .mn-nav, .darkmode .menumain { background: #0a1209 !important; border-color: rgba(255,255,255,.07) !important; }
.darkmode .nav-wrapper ul li a { color: #8aaa92 !important; }
.darkmode h1, .darkmode h2, .darkmode h3 { color: #c8ddd0 !important; }
.darkmode .head-module { background: #0a1209 !important; }
.darkmode .arsiphome .nav-tabs { background: #0a1209 !important; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 900px) {
  .grider { flex-direction: column !important; }
  .gridermain, .griderside { flex: 0 0 100% !important; }
  .image-slider { height: 280px !important; }
  .footer-data .maingrid { flex-direction: column !important; }
}
@media (max-width: 600px) {
  .mn-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .marginpage { padding-left: 16px !important; padding-right: 16px !important; }
  .copyright { flex-direction: column !important; align-items: flex-start !important; }
}