/* ============================================================
   Smart Desa — Modern public theme (layered on top of style.css)
   Hanya mengubah tampilan; data & markup konten tetap.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --m-primary:#0e7d5b;        /* hijau desa */
  --m-primary-2:#0aa06b;
  --m-primary-dark:#0a5e44;
  --m-accent:#f4b740;
  --m-ink:#0f1f1a;
  --m-text:#384b45;
  --m-muted:#6b817a;
  --m-bg:#f4f7f5;
  --m-card:#ffffff;
  --m-line:#e4ece8;
  --m-radius:16px;
  --m-shadow:0 10px 30px rgba(14,125,91,.10);
  --m-shadow-sm:0 4px 14px rgba(16,40,33,.07);
  --m-head:'Plus Jakarta Sans',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* base overrides (scoped to body of public site) */
body{ font-family:var(--m-head)!important; color:var(--m-text); background:var(--m-bg); -webkit-font-smoothing:antialiased; }
.m-scope a{ transition:.2s; }
img{ max-width:100%; }

/* hide legacy preloader/offcanvas leftovers */
.images-preloader,#offcanvas-menu,.navright-button{ display:none!important; }

/* ===================== NAVBAR ===================== */
.m-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--m-line); box-shadow:0 1px 0 rgba(0,0,0,.02); }
.m-nav{ max-width:1280px; margin:0 auto; padding:0 20px; height:74px; display:flex; align-items:center; gap:14px; }
.m-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; flex-shrink:0; }
.m-brand img{ height:42px; width:42px; object-fit:contain; border-radius:10px; background:#fff; padding:3px; box-shadow:var(--m-shadow-sm); }
.m-brand .m-brand-t{ line-height:1.15; }
.m-brand .m-brand-t b{ display:block; font-size:16px; font-weight:800; color:var(--m-ink); white-space:nowrap; }
.m-brand .m-brand-t span{ font-size:12px; color:var(--m-muted); font-weight:500; }

.m-menu>ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1px; }
.m-menu>ul>li{ position:relative; }
.m-menu>ul>li>a{ display:flex; align-items:center; gap:5px; padding:9px 11px; border-radius:10px; text-decoration:none;
  color:var(--m-ink); font-weight:600; font-size:13.7px; white-space:nowrap; }
.m-menu>ul>li>a:hover,.m-menu>ul>li.active>a{ background:var(--m-bg); color:var(--m-primary); }
.m-menu>ul>li.m-has-sub>a::after{ content:"\f107"; font-family:FontAwesome; font-size:12px; opacity:.6; }
/* dropdown */
.m-sub{ list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
  background:#fff; border:1px solid var(--m-line); border-radius:14px; box-shadow:var(--m-shadow);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; }
.m-menu>ul>li:hover>.m-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.m-sub li a{ display:block; padding:9px 12px; border-radius:9px; text-decoration:none; color:var(--m-text); font-size:14px; font-weight:500; }
.m-sub li a:hover{ background:var(--m-bg); color:var(--m-primary); }
.m-cta{ background:linear-gradient(135deg,var(--m-primary),var(--m-primary-2))!important; color:#fff!important; box-shadow:var(--m-shadow-sm); }
.m-cta:hover{ filter:brightness(1.05); color:#fff!important; }

.m-burger{ display:none; border:0; background:var(--m-bg); width:44px; height:44px; border-radius:12px; cursor:pointer;
  color:var(--m-ink); font-size:18px; align-items:center; justify-content:center; }

/* mobile / tablet (menu jadi hamburger bila ruang tak cukup) */
@media (max-width:1180px){
  .m-burger{ display:inline-flex; }
  .m-menu{ position:fixed; inset:74px 0 auto 0; background:#fff; border-bottom:1px solid var(--m-line);
    max-height:0; overflow:hidden; transition:max-height .3s ease; box-shadow:var(--m-shadow); }
  .m-menu.open{ max-height:80vh; overflow:auto; }
  .m-menu>ul{ flex-direction:column; align-items:stretch; gap:0; padding:10px 14px 18px; }
  .m-menu>ul>li>a{ font-size:15px; padding:12px 10px; border-radius:10px; justify-content:space-between; }
  .m-sub{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--m-line);
    margin:2px 0 6px 12px; max-height:0; overflow:hidden; padding:0 8px; transition:max-height .25s; }
  .m-has-sub.open>.m-sub{ max-height:600px; padding:6px 8px; }
}

/* ===================== HERO ===================== */
.m-hero{ position:relative; min-height:62vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.m-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.m-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(10,94,68,.92),rgba(14,125,91,.78) 45%,rgba(10,160,107,.45)); }
.m-hero-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:64px 20px; width:100%; }
.m-hero .eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.4px; }
.m-hero h1{ font-size:clamp(30px,5vw,52px); font-weight:800; line-height:1.08; margin:16px 0 12px; color:#fff;
  text-shadow:0 2px 18px rgba(8,50,36,.35); }
.m-hero p{ font-size:clamp(15px,2vw,18px); max-width:620px; opacity:.96; text-shadow:0 1px 10px rgba(8,50,36,.3); }
/* kartu akses cepat menumpuk di atas hero */
.m-quick{ position:relative; z-index:6; margin-top:0; padding-top:40px!important; }
@media (max-width:600px){ .m-quick{ padding-top:28px!important; } }
.m-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.m-btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:12px; font-weight:700; text-decoration:none;
  font-size:14.5px; border:0; cursor:pointer; transition:.2s; }
.m-btn-primary{ background:#fff; color:var(--m-primary-dark); }
.m-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.18); color:var(--m-primary-dark); }
.m-btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.45); }
.m-btn-ghost:hover{ background:rgba(255,255,255,.22); color:#fff; }

/* ===================== SECTIONS / CARDS ===================== */
.m-section{ max-width:1200px; margin:0 auto; padding:56px 20px; }
.m-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.m-section-head h2{ font-size:clamp(22px,3vw,30px); font-weight:800; color:var(--m-ink); margin:0; }
.m-section-head p{ margin:6px 0 0; color:var(--m-muted); font-size:14.5px; }
.m-kicker{ color:var(--m-primary); font-weight:700; font-size:13px; letter-spacing:.6px; text-transform:uppercase; }

.m-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.m-card{ background:var(--m-card); border:1px solid var(--m-line); border-radius:var(--m-radius); overflow:hidden;
  box-shadow:var(--m-shadow-sm); transition:.25s; display:flex; flex-direction:column; }
.m-card:hover{ transform:translateY(-4px); box-shadow:var(--m-shadow); }
.m-card-media{ position:relative; aspect-ratio:16/10; background:#dfeae5; overflow:hidden; }
.m-card-media img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.m-card:hover .m-card-media img{ transform:scale(1.06); }
.m-date{ position:absolute; left:12px; top:12px; background:#fff; color:var(--m-primary-dark); border-radius:12px; padding:6px 10px;
  text-align:center; line-height:1; box-shadow:var(--m-shadow-sm); }
.m-date b{ display:block; font-size:18px; font-weight:800; }
.m-date span{ font-size:11px; color:var(--m-muted); }
.m-card-body{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.m-card-body h3{ font-size:17px; font-weight:700; margin:0; line-height:1.3; }
.m-card-body h3 a{ color:var(--m-ink); text-decoration:none; }
.m-card-body h3 a:hover{ color:var(--m-primary); }
.m-meta{ font-size:12.5px; color:var(--m-muted); display:flex; align-items:center; gap:7px; }
.m-card-body p{ font-size:14px; color:var(--m-text); margin:0; }
.m-readmore{ margin-top:auto; color:var(--m-primary); font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; gap:7px; align-items:center; }
.m-readmore:hover{ gap:11px; color:var(--m-primary-dark); }

/* quick access tiles */
.m-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.m-tile{ background:var(--m-card); border:1px solid var(--m-line); border-radius:var(--m-radius); padding:22px 18px; text-decoration:none;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--m-shadow-sm); transition:.22s; }
.m-tile:hover{ transform:translateY(-4px); box-shadow:var(--m-shadow); border-color:var(--m-primary-2); }
.m-tile .ic{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:21px; color:#fff;
  background:linear-gradient(135deg,var(--m-primary),var(--m-primary-2)); }
.m-tile b{ color:var(--m-ink); font-size:15.5px; }
.m-tile span{ color:var(--m-muted); font-size:13px; }

.m-center{ text-align:center; }
.m-btn-outline{ background:#fff; color:var(--m-primary); border:1.5px solid var(--m-primary); }
.m-btn-outline:hover{ background:var(--m-primary); color:#fff; }

/* ===================== SUBHEADER (inner pages breadcrumb) ===================== */
#subheader,.subheader{ background:linear-gradient(120deg,var(--m-primary-dark),var(--m-primary))!important; color:#fff!important;
  padding:54px 0 48px!important; position:relative; }
#subheader h1,.subheader h1{ color:#fff!important; font-weight:800; }
#subheader .breadcrumbs,.subheader .breadcrumbs{ background:transparent!important; }
#subheader .breadcrumbs a,#subheader .breadcrumbs li{ color:rgba(255,255,255,.9)!important; }

/* ===================== FOOTER ===================== */
.m-footer{ background:var(--m-ink); color:#c8d6d0; margin-top:40px; }
.m-footer-main{ max-width:1200px; margin:0 auto; padding:54px 20px 32px; display:grid; gap:30px;
  grid-template-columns:1.6fr 1fr 1fr; }
.m-footer h4{ color:#fff; font-size:14px; letter-spacing:.5px; text-transform:uppercase; margin:0 0 16px; }
.m-footer img.flogo{ height:48px; width:48px; object-fit:contain; background:#fff; border-radius:12px; padding:5px; margin-bottom:14px; }
.m-footer p{ font-size:14px; line-height:1.7; color:#a9bdb6; }
.m-footer a{ color:#c8d6d0; text-decoration:none; }
.m-footer a:hover{ color:var(--m-primary-2); }
.m-footer ul{ list-style:none; margin:0; padding:0; }
.m-footer li{ margin-bottom:9px; font-size:14px; }
.m-footer .fcontact p{ display:flex; gap:10px; align-items:flex-start; margin:0 0 10px; }
.m-footer .fcontact i{ color:var(--m-primary-2); margin-top:3px; }
.m-subfooter{ border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:18px; font-size:13px; color:#8aa099; }
@media (max-width:768px){ .m-footer-main{ grid-template-columns:1fr; gap:24px; } .m-section{ padding:40px 18px; } }

/* back to top */
#to-the-top{ position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%; z-index:900;
  background:linear-gradient(135deg,var(--m-primary),var(--m-primary-2)); color:#fff!important; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--m-shadow); opacity:0; pointer-events:none; transition:.25s; cursor:pointer; }
#to-the-top.show{ opacity:1; pointer-events:auto; }

/* ===================== HOMEPAGE GRID + MODERN SIDEBAR ===================== */
.m-home-grid{ display:grid; grid-template-columns:2fr 1fr; gap:30px; align-items:start; }
@media (max-width:900px){ .m-home-grid{ grid-template-columns:1fr; } }
.main-sidebar{ position:sticky; top:90px; }
.main-sidebar .widget{ background:var(--m-card); border:1px solid var(--m-line); border-radius:var(--m-radius); padding:18px;
  margin-bottom:20px; box-shadow:var(--m-shadow-sm); }
.main-sidebar .widget-title{ font-size:15px; font-weight:800; color:var(--m-ink); margin:0 0 6px; text-transform:none; }
.main-sidebar .tiny-border{ height:3px; width:42px; background:var(--m-primary); border-radius:3px; margin-bottom:12px; }
.main-sidebar .widget ul{ list-style:none; margin:0; padding:0; }
.main-sidebar .widget_categories li{ padding:9px 0; border-bottom:1px solid var(--m-line); }
.main-sidebar .widget_categories li:last-child{ border-bottom:0; }
.main-sidebar .widget_categories li a{ color:var(--m-text); text-decoration:none; font-size:14px; }
.main-sidebar .widget_categories li a:hover{ color:var(--m-primary); }
.main-sidebar .product_list_widget li{ display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--m-line); color:var(--m-text)!important; }
.main-sidebar .product_list_widget li:last-child{ border-bottom:0; }
.main-sidebar .product_list_widget .img-thumb img{ width:84px!important; height:58px!important; max-height:none!important; object-fit:cover; border-radius:10px; }
.main-sidebar .product_list_widget .product-detail a{ color:var(--m-ink); text-decoration:none; font-size:13.5px; font-weight:600; }
.main-sidebar .product_list_widget .product-detail a:hover{ color:var(--m-primary); }
.main-sidebar .product_list_widget .amount{ color:var(--m-muted); font-size:12px; }
.main-sidebar #aparatur_desa{ border-radius:12px; overflow:hidden; }
.main-sidebar #aparatur_desa img{ border-radius:12px; width:100%; object-fit:cover; }

/* ===================== INFOGRAFIK / GRAFIK ===================== */
.m-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:26px; }
.m-stat{ border-radius:var(--m-radius); padding:18px 20px; color:#fff; box-shadow:var(--m-shadow-sm); }
.m-stat b{ display:block; font-size:28px; font-weight:800; line-height:1.1; }
.m-stat span{ font-size:13px; opacity:.96; display:inline-flex; gap:7px; align-items:center; margin-top:5px; }
.m-charts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.m-chart-card{ background:var(--m-card); border:1px solid var(--m-line); border-radius:var(--m-radius); padding:18px; box-shadow:var(--m-shadow-sm); }
.m-chart-card h3{ font-size:14.5px; font-weight:700; color:var(--m-ink); margin:0 0 14px; display:flex; gap:9px; align-items:center; }
.m-chart-card h3 i{ color:var(--m-primary); }
.m-chart-box{ position:relative; height:300px; width:100%; }
.m-chart-box canvas{ max-width:100%; }
@media (max-width:600px){ .m-chart-box{ height:260px; } }