:root{ --bg:#fff; --text:#0a0a0a; --muted:#666; --accent:#d90429; --border:#eaeaea; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial}
header{border-bottom:1px solid var(--border);padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
header .brand{font-weight:800}
header .brand span{color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;transition:.1s}
.card:hover{transform:translateY(-2px)}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card .body{padding:12px 14px}
.card .title{font-weight:700;margin:0 0 6px}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border)}
.badge.HALAL{color:#065f46;border-color:#a7f3d0;background:#ecfdf5}
.badge.HARAM{color:#7f1d1d;border-color:#fecaca;background:#fef2f2}
.badge.CAUTION{color:#92400e;border-color:#fde68a;background:#fffbeb}
.btn{border:1px solid var(--border);background:#fff;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.link{border:none;background:transparent;color:var(--accent)}
.input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border)}
.small{font-size:12px;color:var(--muted)}
.lang a{margin-left:8px}