:root {
  --ink: #1F2A44;
  --chili: #D6402F;
  --turmeric: #E8A83C;
  --leaf: #4C7A5E;
  --bg: #FFFFFF;          /* latar utama sekarang putih bersih */
  --header-cream: #FBEFD3; /* krem hangat khusus header/banner atas */
  --card: #FFFFFF;
  --charcoal: #2B2620;
  --muted: #8A7F68;
  --line: #EFEAE0;
}

body {
  background: var(--bg);
  color: var(--charcoal);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 96px; /* ruang buat bottom nav melayang */
}

.navbar-regol {
  background: var(--ink);
}
.navbar-regol .navbar-brand {
  color: #FFFDF7 !important;
  font-weight: 700;
}

/* header/banner krem khas beranda pelanggan */
.header-cream {
  background: var(--header-cream);
}

.btn-chili {
  background: var(--chili);
  color: white;
  border: none;
}
.btn-chili:hover { background: #B8301F; color: white; }

.btn-leaf {
  background: var(--leaf);
  color: white;
  border: none;
}
.btn-leaf:hover { background: #3d6650; color: white; }

.card-regol {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(43, 38, 32, 0.05);
}

.badge-status {
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.35em 0.75em;
  font-weight: 600;
}

/* ============ BOTTOM NAV GAYA "GLASS" MELAYANG ============ */
.bottom-nav {
  position: fixed;
  bottom: 14px; left: 14px; right: 14px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  display: flex;
  box-shadow: 0 8px 24px rgba(43, 38, 32, 0.15);
  z-index: 20;
  padding: 4px;
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  color: var(--muted);
  padding: 0.5rem 0 0.4rem;
  text-decoration: none;
  font-size: 0.68rem;
  border-radius: 18px;
}
.bottom-nav a.active { color: var(--chili); font-weight: 700; background: rgba(214, 64, 47, 0.08); }
.bottom-nav img.nav-icon { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }

/* ============ IKON BULAT DI TOP BAR (keranjang, dst) ============ */
.icon-btn-top {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: white;
  text-decoration: none;
}
.icon-btn-top .badge-cart {
  position: absolute; top: -4px; right: -4px;
  background: var(--chili); color: white;
  font-size: 0.65rem; font-weight: 700;
  border-radius: 999px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ============ GRID KATEGORI IKON (bukan emoji) ============ */
.kategori-grid { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.kategori-item { flex: 0 0 auto; text-align: center; text-decoration: none; color: var(--charcoal); width: 66px; }
.kategori-item img { width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; }
.kategori-item span { font-size: 0.72rem; font-weight: 600; display: block; }
.kategori-item.aktif span { color: var(--chili); }

.font-mono { font-family: "SFMono-Regular", Consolas, monospace; }