/* ============================================================
   Kalterramix Global Theme
   Dimuat terakhir di <head> sehingga meng-override tema default
   dan menyelaraskan seluruh halaman user.
   ============================================================ */

:root{
  --forest:#073d28;
  --forest-2:#0c5a39;
  --leaf:#3d8b20;
  --lime:#82b63b;
  --gold:#d9aa35;
  --cream:#f7f5ed;
  --ink:#14231d;
  --muted:#66756d;
  --danger:#c04444;
  --line:rgba(7,61,40,.11);
  --shadow:0 24px 70px rgba(7,61,40,.14);
  --radius:24px;
}

/* ---------- Latar & font global ---------- */
body{
  background:
    radial-gradient(circle at 85% 0%, rgba(130,182,59,.22), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(217,170,53,.14), transparent 30%),
    linear-gradient(160deg,#eef4e7 0%,#fbfcf7 50%,#e3efdc 100%) !important;
  overflow-x:hidden;
  font-family:"DM Sans","Manrope",sans-serif;
  color:var(--ink);
}
body.bg-primary{background:linear-gradient(135deg,var(--forest),var(--forest-2)) !important;color:#fff}
body.bg-grey{background:
  radial-gradient(circle at 85% 0%, rgba(130,182,59,.22), transparent 32%),
  radial-gradient(circle at 0% 100%, rgba(217,170,53,.14), transparent 30%),
  linear-gradient(160deg,#eef4e7 0%,#fbfcf7 50%,#e3efdc 100%) !important}

h1,h2,h3,h4,h5,h6,.pageTitle,.modal-title,.card-title,.section-title{
  font-family:"Manrope",sans-serif;
}

/* ---------- App Header ---------- */
.appHeader, .appHeader.no-border{
  background:transparent !important;
}
.appHeader .center, .appHeader .left, .appHeader .right{color:var(--forest) !important}
.appHeader a, .appHeader button{color:var(--forest) !important}
.appHeader .pageTitle{color:var(--forest) !important;font-weight:800}
.appHeader .left ion-icon, .appHeader .right ion-icon{color:var(--forest)}

/* Header dengan latar solid (detail berita, dsb) tetap hijau konsisten */
.appHeader.bg-primary{
  background:linear-gradient(135deg,var(--forest),var(--forest-2)) !important;
}
.appHeader.bg-primary .pageTitle, .appHeader.bg-primary .left ion-icon,
.appHeader.bg-primary .right ion-icon, .appHeader.bg-primary a,
.appHeader.bg-primary button{color:#fff !important}

/* ---------- Extra header / tab pill ---------- */
.extraHeader{background:transparent !important;padding-top:6px}
.nav-tabs.style1{border:none;background:rgba(7,61,40,.08);border-radius:14px;padding:4px}
.nav-tabs.style1 .nav-item{flex:0 0 auto;margin:0}
.nav-tabs.style1 .nav-item .nav-link{
  color:var(--muted);font-family:"Manrope",sans-serif;font-weight:700;
  font-size:13px;border:none;border-radius:11px;padding:8px 16px;
}
.nav-tabs.style1 .nav-item .nav-link.active{
  color:#fff;background:linear-gradient(135deg,var(--forest),var(--leaf));
  box-shadow:0 6px 16px rgba(7,61,40,.25);
}
.nav-tabs.style1 .nav-item .nav-link ion-icon{color:var(--muted)}
.nav-tabs.style1 .nav-item .nav-link.active ion-icon{color:#fff}

/* ---------- Section title ---------- */
.section-title{color:var(--ink);font-weight:800;letter-spacing:.2px}

/* ---------- Tombol ---------- */
.btn-primary{
  background:linear-gradient(135deg,var(--forest),var(--leaf)) !important;
  border:none !important;border-radius:14px !important;
  font-family:"Manrope",sans-serif;font-weight:800;
  box-shadow:0 10px 24px rgba(7,61,40,.22);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{opacity:.94;transform:translateY(-1px)}
.btn-success{background:linear-gradient(135deg,var(--forest-2),var(--leaf)) !important;border:none !important;border-radius:14px !important}
.btn-danger{background:linear-gradient(135deg,var(--danger),#d97171) !important;border:none !important;border-radius:14px !important}

/* ---------- Kartu ---------- */
.card{
  background:#fff;border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(7,61,40,.09);
}
.card .card-title{color:var(--ink);font-weight:800}
.card-body{color:var(--ink)}

/* ---------- Listview / item (warna, bukan ubah geometri) ---------- */
.listview > li:not(:first-child){border-color:var(--line)}
.listview .item, .listview > li .item, .listview.image-listview > li .item{background:transparent;border:none}
.listview .item h2,.listview .item .layanan,.listview .item .kategori{color:var(--ink)}
.listview .item .layanan{font-weight:700;color:var(--ink)}
.listview .item .kategori,.listview .item .date,.listview .item .text-muted{color:var(--muted)}
.listview .item .harga{color:var(--forest);font-weight:700}
.listview .item .btn-status{border-radius:99px !important;font-size:11px;font-weight:700}

/* ---------- Form ---------- */
.form-group .input-wrapper{border-color:var(--line)}
.form-group.basic .form-control{border-bottom:2px solid var(--line);color:var(--ink);font-size:15px}
.form-group.basic .form-control:focus{border-bottom-color:var(--leaf)}
.form-group .label,.form-group.basic .label{color:var(--forest-2);font-family:"Manrope",sans-serif;font-weight:700}
.form-group.boxed .form-control{border:1px solid var(--line);border-radius:14px}
.form-group.boxed .form-control:focus{border-color:var(--leaf)}

/* ---------- Wide block ---------- */
.wide-block,.wide-block-service{background:#fff;border-radius:var(--radius);border:1px solid var(--line);box-shadow:none}

/* ---------- skrol halus ---------- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}