:root{
  --paper:#faf8f2; --ink:#1c2a1e; --leaf:#15803d; --leaf-d:#14532d;
  --lime:#d9f99d; --sun:#fde68a; --clay:#e7e0cf; --line:#e5e0d0;
  --danger:#b91c1c; --warn:#b45309;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif}
.font-display{font-family:'Fraunces',Georgia,serif}
.blob{border-radius:2.2rem .9rem 2.2rem .9rem}
.blob2{border-radius:.9rem 2.2rem .9rem 2.2rem}
.card{background:#fff;border:1px solid var(--line);box-shadow:0 1px 0 rgba(28,42,30,.06)}
.btn-leaf{background:var(--leaf);color:#fff;border-radius:9999px 9999px 9999px .6rem;font-weight:700;min-height:44px}
.btn-leaf:hover{background:var(--leaf-d)}
.btn-ghost{border:2px solid var(--leaf);color:var(--leaf-d);border-radius:.9rem 9999px .9rem 9999px;font-weight:700;min-height:44px}
.btn-ghost:hover{background:#f0fdf4}
.chip{border-radius:9999px .6rem 9999px .6rem}
.leaf-shape{border-radius:0 50% 0 50%}
.topnav a.navlink{padding:.55rem .9rem;border-radius:9999px .5rem 9999px .5rem;font-weight:600;color:#33402f}
.topnav a.navlink:hover{background:#eef7e8}
.topnav a.navlink.active{background:var(--leaf);color:#fff}
.badge-aman{background:#dcfce7;color:#14532d;border:1.5px solid #16a34a}
.badge-waspada{background:#fef9c3;color:#713f12;border:1.5px solid #ca8a04}
.badge-beracun{background:#fee2e2;color:#7f1d1d;border:1.5px solid #dc2626}
.skeleton{background:linear-gradient(90deg,#e8e4d5 25%,#f4f1e4 50%,#e8e4d5 75%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
:focus-visible{outline:3px solid #16a34a;outline-offset:2px}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#1c2a1e;color:#fff;padding:.7rem 1.2rem;border-radius:1rem .4rem 1rem .4rem;z-index:60;display:none}
.divider-leaf{display:flex;align-items:center;gap:.6rem;color:var(--leaf-d);font-weight:700}
.divider-leaf::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--leaf) 0 10px,transparent 10px 18px);border-radius:2px;opacity:.4}
input,select,textarea{font-size:16px}
@media (max-width:640px){.hero-grid{grid-template-columns:1fr!important}}