:root {
  --sisapi-green: #198754;
  --sisapi-green-dark: #146c43;
  --sisapi-green-light: #e8f5ee;
  --sisapi-gray: #f5f6f8;
  --sisapi-text: #212529;
}

body {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  background-color: #ffffff;
  color: var(--sisapi-text);
}

a { text-decoration: none; }

/* ===== Navbar ===== */
.navbar-sisapi {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.navbar-sisapi .navbar-brand { font-weight: 700; color: var(--sisapi-green); font-size: 1.4rem; }
.navbar-sisapi .nav-link { font-weight: 500; color: var(--sisapi-text); }
.navbar-sisapi .nav-link.active, .navbar-sisapi .nav-link:hover { color: var(--sisapi-green); }
.btn-sisapi { background-color: var(--sisapi-green); border-color: var(--sisapi-green); color: #fff; }
.btn-sisapi:hover { background-color: var(--sisapi-green-dark); border-color: var(--sisapi-green-dark); color: #fff; }
.btn-outline-sisapi { border-color: var(--sisapi-green); color: var(--sisapi-green); }
.btn-outline-sisapi:hover { background-color: var(--sisapi-green); color: #fff; }

/* ===== Hero / Banner ===== */
.hero-search-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1.5rem;
  margin-top: -60px;
  position: relative;
  z-index: 10;
}
.carousel-item img { height: 420px; object-fit: cover; filter: brightness(.7); }
.carousel-caption h1 { font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ===== Section ===== */
.section-title { font-weight: 700; border-left: 5px solid var(--sisapi-green); padding-left: .6rem; margin-bottom: 1.5rem; }
.bg-light-gray { background-color: var(--sisapi-gray); }

/* ===== Kategori Icon ===== */
.kategori-card { border: 1px solid #eee; border-radius: 12px; text-align: center; padding: 1.2rem .5rem; transition: .2s; background: #fff; }
.kategori-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(25,135,84,.15); border-color: var(--sisapi-green); }
.kategori-card i { font-size: 2rem; color: var(--sisapi-green); }

/* ===== Product Card ===== */
.produk-card { border: 1px solid #eee; border-radius: 14px; overflow: hidden; transition: .25s; background: #fff; height: 100%; }
.produk-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.1); transform: translateY(-3px); }
.produk-card img { height: 190px; object-fit: cover; width: 100%; }
.produk-card .card-body { padding: .9rem; }
.produk-card .harga { color: var(--sisapi-green); font-weight: 700; font-size: 1.1rem; }
.badge-verified { background-color: var(--sisapi-green); }
.produk-card .meta { font-size: .8rem; color: #6c757d; }

/* ===== Stats ===== */
.stat-box { background: var(--sisapi-green-light); border-radius: 14px; padding: 1.5rem; text-align: center; }
.stat-box .angka { font-size: 2rem; font-weight: 800; color: var(--sisapi-green); }

/* ===== Peternak Card ===== */
.peternak-card { text-align: center; border: 1px solid #eee; border-radius: 14px; padding: 1.2rem; background: #fff; }
.peternak-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 3px solid var(--sisapi-green-light); }

/* ===== Footer ===== */
footer.sisapi-footer { background-color: #14532d; color: #e5e7eb; }
footer.sisapi-footer a { color: #d1e7dd; }
footer.sisapi-footer a:hover { color: #fff; }

/* ===== Dashboard sidebar ===== */
.sidebar-sisapi { background: #ffffff; min-height: 100vh; border-right: 1px solid #eee; }
.sidebar-sisapi .nav-link { color: var(--sisapi-text); border-radius: 8px; margin-bottom: 4px; padding: .6rem .9rem; }
.sidebar-sisapi .nav-link.active { background-color: var(--sisapi-green); color: #fff; }
.sidebar-sisapi .nav-link:hover:not(.active) { background-color: var(--sisapi-green-light); }
.topbar-dashboard { background: #fff; border-bottom: 1px solid #eee; }

/* ===== Misc ===== */
.badge-status-menunggu { background: #ffc107; color:#212529; }
.badge-status-disetujui { background: var(--sisapi-green); }
.badge-status-ditolak { background: #dc3545; }
.form-step { display:none; }
.form-step.active { display:block; }
.wa-float-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: #25D366; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}