:root{
  --green-900:#22391c;
  --green-800:#2d5227;
  --green-700:#3a6630;
  --green-600:#4a7a3a;
  --lime:#8cc152;
  --lime-soft:#a8d06a;
  --cream:#efe8d5;
  --cream-2:#f7f3e8;
  --ink:#22391c;
  --muted:#6f7a68;
  --white:#ffffff;
  --radius:18px;
  --shadow:0 18px 40px -22px rgba(34,57,28,.45);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Poppins",system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6}
h1,h2,h3,h4{font-family:"Poppins",sans-serif;margin:0 0 .4em;line-height:1.15;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92%);margin:0 auto}

/* topbar */
.topbar{background:var(--cream-2);font-size:13px;color:var(--green-800)}
.topbar-in{display:flex;justify-content:space-between;padding:10px 0;gap:12px;flex-wrap:wrap}
.topbar-right{opacity:.75}

/* hero — foto background diatur di includes/config.php */
.hero{position:relative;
  --hero-image:url("hero-hutan.jpg");
  --hero-overlay:.75;
  background:var(--hero-image) center/cover no-repeat;
  background-color:var(--green-800);
  color:#f2f6ee;padding-bottom:110px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,57,28,.85),rgba(45,82,39,.95));
  opacity:var(--hero-overlay)}
.hero.compact{background:var(--green-800);padding-bottom:46px}
.hero.compact:before{display:none}
.hero.compact .hero-body{padding:28px 0 8px}
.hero.compact .hero-body h1{font-size:clamp(26px,4vw,42px)}
.hero.compact + main{padding-top:34px}


.navbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px;flex-wrap:wrap}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .02em;
}

.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    border: none;
}

.brand-text strong {
    color: var(--lime-soft);
}
.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;flex-wrap:wrap}
.menu a{opacity:.85;padding-bottom:3px;border-bottom:2px solid transparent}
.menu a:hover{opacity:1}
.menu a.active{color:var(--lime-soft);opacity:1;border-color:var(--lime-soft)}
.hero-body{position:relative;text-align:center;padding:56px 0 20px}
.hero-body h1{font-size:clamp(34px,6vw,60px);font-weight:800}
.hero-sub{max-width:640px;margin:14px auto 0;font-size:15px;opacity:.85}
.pill{display:inline-block;border:1px solid rgba(242,246,238,.55);border-radius:999px;padding:7px 20px;font-size:13px;font-weight:600;margin-bottom:20px}
.hero-edge{position:absolute;left:0;right:0;bottom:-2px;height:46px;background:var(--white);
  clip-path:polygon(0 62%,6% 42%,14% 66%,24% 38%,34% 62%,45% 34%,56% 60%,67% 36%,78% 62%,88% 40%,96% 64%,100% 46%,100% 100%,0 100%)}

/* sections */
.section{padding:64px 0}
.section-head{max-width:640px;margin-bottom:32px}
.eyebrow{display:inline-block;border:1px solid var(--green-700);color:var(--green-700);border-radius:999px;padding:5px 16px;font-size:12px;font-weight:700;margin-bottom:14px}
.section h2{font-size:clamp(26px,3.4vw,36px);color:var(--green-800)}
.lead{color:var(--muted);font-size:15px}

/* cards grid */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1.05fr 1fr}
@media(max-width:900px){.g3,.g4,.g2{grid-template-columns:1fr}}

.card{background:var(--cream);border-radius:var(--radius);padding:26px;position:relative}
.card.dark{background:var(--green-700);color:#f2f6ee}
.card .ic{position:absolute;top:-22px;left:26px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--green-800);color:var(--lime-soft);font-size:20px}
.card.dark .ic{background:var(--lime);color:var(--green-900)}
.card h3{margin-top:14px;font-size:19px;color:var(--green-800)}
.card.dark h3{color:#fff}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card.dark p{color:rgba(242,246,238,.82)}
.card .more{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:var(--green-700)}
.card.dark .more{color:var(--lime-soft)}

/* stats */
.stat{background:var(--cream);border-radius:var(--radius);padding:22px 24px}
.stat b{display:block;font-size:34px;font-weight:800;color:var(--green-800);line-height:1.1}
.stat span{font-size:13px;color:var(--muted);font-weight:600}
.stat.accent{background:var(--green-700)}
.stat.accent b{color:#fff}
.stat.accent span{color:rgba(242,246,238,.8)}

/* flow */
.flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--cream-2);border-radius:var(--radius);padding:22px}
.flow-step{background:var(--white);border:1px solid #e2ddca;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--green-800)}
.flow-arrow{color:var(--lime);font-weight:800}

/* list */
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed #dcd6c2;font-size:14px;color:var(--muted)}
.plist li:last-child{border:0}
.plist .bul{color:var(--lime);font-weight:800}

/* table */
.table-wrap{background:var(--cream-2);border-radius:var(--radius);padding:8px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
th,td{padding:13px 16px;text-align:left}
thead th{background:var(--green-800);color:#f2f6ee;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
thead th:first-child{border-radius:12px 0 0 12px}
thead th:last-child{border-radius:0 12px 12px 0}
tbody tr{background:var(--white)}
tbody tr:nth-child(even){background:#fbf9f2}
tbody td{border-bottom:1px solid #ece7d8;color:var(--muted)}
tbody td:first-child{color:var(--green-800);font-weight:600}

/* badges */
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.b-green{background:#dff0cd;color:#3a6630}
.b-yellow{background:#fbf0c8;color:#8a6b12}
.b-red{background:#f7d9d4;color:#a03826}

/* map mock */
.map{position:relative;height:430px;border-radius:var(--radius);overflow:hidden;background:
  radial-gradient(80% 70% at 30% 25%,#dfeccd,#cfe0b9),linear-gradient(#e6f0d8,#d7e6c3);
  border:1px solid #dcd6c2}
.map-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(#c6d9ac 1px,transparent 1px),linear-gradient(90deg,#c6d9ac 1px,transparent 1px);
  background-size:56px 56px}
.map-shape{position:absolute;left:16%;top:8%;width:58%;height:84%;background:rgba(74,122,58,.22);
  border:2px dashed var(--green-700);border-radius:44% 30% 46% 32%}
.pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pin.red{background:#c0432c}.pin.yellow{background:#dcb02c}.pin.green{background:#4a7a3a}
.map-tools{position:absolute;right:14px;top:14px;display:grid;gap:6px}
.map-tools button{width:34px;height:34px;border:0;border-radius:10px;background:var(--white);color:var(--green-800);font-weight:800;font-size:16px;cursor:pointer;box-shadow:var(--shadow)}
.map-legend{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);border-radius:14px;padding:12px 14px;font-size:12px;color:var(--muted);box-shadow:var(--shadow)}
.map-legend div{display:flex;align-items:center;gap:8px;margin:4px 0}
.dot{width:10px;height:10px;border-radius:50%}
.map-search{position:absolute;left:14px;top:14px;background:var(--white);border-radius:12px;padding:9px 14px;font-size:13px;color:var(--muted);box-shadow:var(--shadow)}

/* form */
.panel{background:var(--white);border:1px solid #ece7d8;border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--green-800);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--cream);border:1px solid #ded7c2;border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.btn{display:inline-block;border:0;background:var(--lime);color:var(--green-900);font:inherit;font-weight:700;font-size:14px;padding:12px 26px;border-radius:12px;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--green-700);color:var(--green-700)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.row2{grid-template-columns:1fr}}

/* ews cards */
.ews{border-radius:22px;padding:26px;color:#fff}
.ews.green{background:linear-gradient(150deg,#4a7a3a,#2d5227)}
.ews.yellow{background:linear-gradient(150deg,#d9b13a,#a5801a)}
.ews.red{background:linear-gradient(150deg,#c0432c,#8a2a19)}
.ews h3{color:#fff;font-size:22px}
.ews p{font-size:14px;color:rgba(255,255,255,.88);margin:0}
.ews .tag{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:700;margin-bottom:12px}

/* footer */
.footer{background:var(--green-800);color:rgba(242,246,238,.86);padding:56px 0 20px;margin-top:20px}
.footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.footer-top{display:grid;grid-template-columns:1.1fr 2fr;gap:32px;align-items:start;padding-bottom:28px;border-bottom:1px dashed rgba(168,208,106,.5)}
.footer-brand p{font-size:13.5px;margin-top:14px}
.footer-info{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.finfo{display:flex;gap:12px;align-items:center}
.fi-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--green-900);flex:none}
.finfo b{display:block;color:#fff;font-size:14px}
.finfo small{font-size:13px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 0}
.footer-cols a{display:block;font-size:13.5px;padding:3px 0;opacity:.85}
.footer-cols a:hover{opacity:1;color:var(--lime-soft)}
.fs{font-size:13.5px;margin:4px 0}
.footer-bottom{border-top:1px dashed rgba(168,208,106,.5);padding-top:16px;text-align:center;font-size:13px}
@media(max-width:900px){.footer-top,.footer-info,.footer-cols{grid-template-columns:1fr}}

/* charts */
.chart-grid{gap:26px}
.chart-panel{display:flex;flex-direction:column}
.chart-wrap{position:relative;height:280px;width:100%;margin-top:8px}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}.chart-wrap{height:240px}}

/* topbar user */
.topbar-right{opacity:.9}
.topbar-right a{font-weight:700;color:var(--green-700)}
.role-chip{display:inline-block;background:var(--lime);color:var(--green-900);border-radius:999px;padding:1px 10px;font-size:11px;font-weight:800;margin-left:4px}
.alert-ok{background:#dff0cd;color:#3a6630;border-radius:14px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:20px}
.link-act{font-weight:700;color:var(--green-700)}
.link-act.del{color:#a03826}

/* leaflet map */
#mapOSM{height:430px;background:#dfeccd}
#mapOSM.map{border:1px solid #dcd6c2}
.leaflet-container{font-family:"Poppins",sans-serif;border-radius:var(--radius)}

/* ================= LOGIN ================= */

.login-body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--green-900);
}

.login-shell {
    width: 100%;
    height: 100vh;
}

.login-card {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: var(--green-900);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.login-visual {
    position: relative;
    min-height: 100vh;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--login-image) center/cover no-repeat;
    background-color: var(--green-700);
    color: #f2f6ee;
}

.login-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(34, 57, 28, 0.35),
        rgba(34, 57, 28, 0.8)
    );
}

.login-brandbox,
.login-visual-foot {
    position: relative;
    top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-visual-foot {
    display: block;
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: transparent;
    border-radius: 14px;
}

.login-brandtext b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.login-brandtext strong {
    color: var(--lime-soft);
}

.login-brandtext small {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.35;
}

.login-visual-foot p {
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 4px;
}

.login-visual-foot small {
    font-size: 12px;
    opacity: 0.8;
}


/* ================= FORM LOGIN ================= */

.login-form {
    padding: 48px 44px;
    color: #eef4e8;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Membatasi lebar seluruh isi form */
.login-form > * {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.login-form h1 {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 22px;
    text-align: center;
}


/* ================= INPUT ================= */

.login-form .field {
    width: 100%;
    margin-bottom: 16px;
}

.login-form .field label {
    color: rgba(238, 244, 232, 0.9);
}

.login-form .field input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(168, 208, 106, 0.35);
    border-radius: 10px;

    color: #fff;
    padding: 10px 13px;
    font-size: 14px;
}

.login-form .field input::placeholder {
    color: rgba(238, 244, 232, 0.55);
}

.login-form .field input:focus {
    outline: none;
    border-color: var(--lime);
}


/* ================= LUPA PASSWORD ================= */

.login-links {
    text-align: right;
    margin: -4px auto 16px;
}

.login-links a {
    font-size: 12.5px;
    color: var(--lime-soft);
    text-decoration: underline;
}


/* ================= TOMBOL LOGIN ================= */

.login-btn {
    width: 100%;
    max-width: 380px;

    background: var(--lime-soft);
    padding: 11px 14px;

    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;

    margin-left: auto;
    margin-right: auto;
}


/* ================= ALERT ================= */

.login-alert {
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;

    background: rgba(192, 67, 44, 0.9);
    color: #fff;

    border-radius: 10px;
    padding: 10px 13px;

    font-size: 13px;
    margin: 0 auto 16px;
}


/* ================= CATATAN ================= */

.login-note {
    text-align: center;
    font-size: 13px;
    margin: 18px auto 0;
    color: rgba(238, 244, 232, 0.85);
}

.login-terms {
    text-align: center;
    margin: 8px auto 0;
}

.login-terms a {
    font-size: 12px;
    color: var(--lime-soft);
    text-decoration: underline;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 820px) {

    .login-card {
        grid-template-columns: 1fr;
        height: 100vh;
    }

    .login-visual {
        min-height: 220px;
        height: 220px;
    }

    .login-form {
        padding: 34px 26px;
    }

    .login-form > * {
        max-width: 380px;
    }

    .login-form h1 {
        font-size: 32px;
    }
}
/* ================= LUPA PASSWORD ================= */

.forgot-body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: #193916;
    font-family: inherit;
}

.forgot-card {
    width: min(520px, calc(100% - 40px));
    padding: 48px 50px;
    box-sizing: border-box;
    text-align: center;

    background: #203f1c;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}


.forgot-card h1 {
    margin: 0 0 18px;

    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
}

.forgot-text {
    margin: 0 auto;
    max-width: 430px;

    color: #e6eadf;
    font-size: 16px;
    line-height: 1.7;
}

.forgot-text strong {
    color: #acd764;
}

.forgot-info {
    margin-top: 28px;
    padding: 18px 20px;

    background: rgba(0, 0, 0, 0.12);
    border-radius: 12px;

    text-align: left;
}

.forgot-info strong {
    color: #acd764;
    font-size: 15px;
}

.forgot-info p {
    margin: 7px 0 0;

    color: #dce3d5;
    font-size: 14px;
    line-height: 1.6;
}

.forgot-back {
    display: inline-block;
    margin-top: 30px;

    color: #acd764;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;

    transition: 0.2s ease;
}

.forgot-back:hover {
    color: #c5ed82;
    text-decoration: underline;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    .forgot-card {
        padding: 38px 28px;
    }

    .forgot-card h1 {
        font-size: 28px;
    }

    .forgot-text {
        font-size: 15px;
    }
}
/* ================= PREVIEW PETA KASUS ================= */

.case-map {
    width: 100%;
    height: 360px;
    margin-top: 8px;

    border: 1px solid #d9e2d2;
    border-radius: 12px;
    overflow: hidden;

    background: #eef2eb;
}

.map-help {
    display: block;
    margin-top: 8px;

    color: #6b7568;
    font-size: 13px;
}