:root{
  --hijau:#1F3B2D; --hijau2:#2F5A43; --kuning:#F2B632; --coklat:#8A5A33;
  --latar:#EEF2E8; --kertas:#FFFFFF; --teks:#1A2A21; --redup:#5E6F64; --garis:#D5DDCB;
  --h:'Bricolage Grotesque',system-ui,sans-serif; --b:'Nunito Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--b);color:var(--teks);background:var(--latar);line-height:1.65}
h1,h2,h3{font-family:var(--h);line-height:1.1}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--kuning);outline-offset:2px}

/* NAV */
header{position:sticky;top:0;z-index:20;background:var(--hijau);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--h);font-weight:800;font-size:1.25rem}
.logo span{color:var(--kuning)}
nav a{margin-left:22px;font-weight:600;opacity:.85}
nav a:hover{opacity:1;color:var(--kuning)}
.btn{display:inline-block;border:0;cursor:pointer;font:700 1rem var(--b);padding:12px 24px;border-radius:999px;background:var(--kuning);color:var(--hijau);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.gelap{background:var(--hijau);color:#fff}
.btn.garis{background:transparent;border:2px solid #fff;color:#fff}
.btn.kecil{padding:7px 14px;font-size:.85rem}
.btn.merah{background:#B3402F;color:#fff}

/* HERO */
.hero{background:var(--hijau);color:#fff;position:relative;overflow:hidden;padding:84px 0 130px}
.hero::before{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:var(--hijau2)}
.hero::after{content:"";position:absolute;left:-80px;bottom:-60px;width:300px;height:300px;border-radius:50%;background:rgba(242,182,50,.14)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;letter-spacing:-.02em}
.hero p{margin:20px 0 30px;max-width:520px;color:#D6E3DA;font-size:1.1rem}
.hero .aksi{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-visual div{border-radius:26px;aspect-ratio:1;display:grid;place-items:center;font-size:4.2rem;background:var(--kuning)}
.hero-visual div:nth-child(2){background:var(--kertas);transform:translateY(28px)}
.hero-visual div:nth-child(3){background:var(--coklat);transform:translateY(-14px)}
.hero-visual div:nth-child(4){background:var(--hijau2);border:2px solid var(--kuning)}
.gelombang{position:absolute;bottom:-1px;left:0;width:100%;height:70px;fill:var(--latar)}

/* SECTION */
section{padding:72px 0}
.judul{max-width:600px;margin-bottom:36px}
.judul h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--hijau)}
.judul p{color:var(--redup);margin-top:10px}

/* TENTANG */
.tentang{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.tentang .teks p{margin-bottom:14px;color:var(--redup)}
.angka{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.angka div{background:var(--kertas);border-radius:20px;padding:24px;border-left:6px solid var(--kuning)}
.angka div:nth-child(even){border-left-color:var(--coklat);margin-top:20px}
.angka b{font:800 2.2rem var(--h);color:var(--hijau);display:block}
.angka span{color:var(--redup);font-size:.92rem}
.nilai{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.nilai div{padding:24px;border-radius:20px;background:var(--hijau);color:#fff}
.nilai div:nth-child(2){background:var(--coklat)}
.nilai div:nth-child(3){background:var(--kuning);color:var(--hijau)}
.nilai h3{font-size:1.25rem;margin-bottom:8px}
.nilai p{font-size:.95rem;opacity:.92}

/* KATALOG */
.katalog-bg{background:var(--kertas)}
.filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter button{border:2px solid var(--garis);background:#fff;padding:8px 20px;border-radius:999px;font:700 .95rem var(--b);cursor:pointer;color:var(--redup)}
.filter button.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.kartu{background:var(--latar);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.kartu:hover{box-shadow:0 10px 28px rgba(31,59,45,.16)}
.foto{height:180px;display:grid;place-items:center;font-size:4.5rem;background:linear-gradient(135deg,var(--kuning),#F6D77E);background-size:cover;background-position:center;position:relative}
.foto.kambing{background:linear-gradient(135deg,var(--coklat),#B5835A)}
.foto .tag{position:absolute;top:12px;left:12px;font:700 .75rem var(--b);background:var(--hijau);color:#fff;padding:4px 12px;border-radius:999px}
.foto .stok{position:absolute;top:12px;right:12px;font:700 .75rem var(--b);background:#fff;color:var(--hijau);padding:4px 12px;border-radius:999px}
.foto .stok.habis{background:#B3402F;color:#fff}
.isi{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.isi h3{font-size:1.2rem;color:var(--hijau)}
.isi small{color:var(--redup)}
.harga{font:800 1.3rem var(--h);color:var(--coklat);margin-top:auto;padding-top:8px}
.kosong{grid-column:1/-1;text-align:center;padding:40px;color:var(--redup)}

/* KONTAK */
.kontak{background:var(--hijau);color:#fff;border-radius:28px;padding:48px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.kontak h2{font-size:2rem;max-width:420px}
.kontak p{color:#D6E3DA;margin-top:8px}
footer{text-align:center;padding:28px;color:var(--redup);font-size:.9rem}

/* ADMIN */
.admin-bar{display:none;background:var(--kuning);color:var(--hijau);font-weight:700}
.admin-bar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;gap:10px;flex-wrap:wrap}
body.admin .admin-bar{display:block}
.aksi-admin{display:none;gap:8px;margin-top:12px}
body.admin .aksi-admin{display:flex}
.modal{position:fixed;inset:0;background:rgba(20,35,27,.6);display:none;place-items:center;z-index:50;padding:16px}
.modal.buka{display:grid}
.modal form{background:#fff;border-radius:24px;padding:28px;width:100%;max-width:460px;max-height:92vh;overflow:auto}
.modal h3{font-size:1.5rem;color:var(--hijau);margin-bottom:16px}
.modal label{display:block;font-weight:700;font-size:.9rem;margin:12px 0 4px}
.modal input,.modal select,.modal textarea{width:100%;padding:11px 14px;border:2px solid var(--garis);border-radius:12px;font:inherit}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--hijau2);outline:0}
.modal .baris{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}
.galat{color:#B3402F;font-size:.9rem;margin-top:8px;min-height:1.2em}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--hijau);color:#fff;padding:12px 22px;border-radius:999px;transition:transform .3s;z-index:60}
.toast.tampil{transform:translateX(-50%) translateY(0)}

/* DETAIL PRODUK */
.isi h3 a:hover{color:var(--coklat)}
.detail-wrap{padding:36px 0 72px}
.dgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;margin:26px 0 64px;align-items:start}
.dfoto{aspect-ratio:4/3;border-radius:30px;display:grid;place-items:center;font-size:9rem;background:linear-gradient(135deg,var(--kuning),#F6D77E);background-size:cover;background-position:center}
.dfoto.kambing{background:linear-gradient(135deg,var(--coklat),#B5835A)}
.dinfo h1{font-size:clamp(2rem,4.5vw,3rem);color:var(--hijau);margin:12px 0}
.dinfo .harga{font-size:2rem;padding:0 0 16px}
.chip{display:inline-block;font:700 .8rem var(--b);padding:5px 14px;border-radius:999px;background:var(--hijau);color:#fff;margin-right:6px}
.chip.habis{background:#B3402F}.chip.ok{background:var(--hijau2)}
.spek{width:100%;border-collapse:collapse;margin:8px 0 18px;background:var(--kertas);border-radius:16px;overflow:hidden}
.spek td{padding:12px 16px;border-bottom:1px solid var(--garis)}
.spek td:first-child{color:var(--redup);width:40%}
.dinfo p{color:var(--redup);margin-bottom:22px}
.dinfo .aksi{display:flex;gap:10px;flex-wrap:wrap}
.btn.garis-gelap{background:transparent;border:2px solid var(--hijau);color:var(--hijau)}
.lainnya h2{font-size:clamp(1.6rem,3.5vw,2.2rem);color:var(--hijau);margin-bottom:22px}
.bawah{text-align:center;margin-top:44px}
@media(max-width:820px){
  .dgrid{grid-template-columns:1fr}.dfoto{font-size:6rem}
  .hero .wrap,.tentang{grid-template-columns:1fr}
  .hero-visual{max-width:340px}
  .nilai{grid-template-columns:1fr}
  nav a{margin-left:14px;font-size:.92rem}
  .kontak{padding:30px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* FILTER (link) */
.filter a{border:2px solid var(--garis);background:#fff;padding:8px 20px;border-radius:999px;font:700 .95rem var(--b);color:var(--redup)}
.filter a.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}
/* ADMIN */
.panel{padding:36px 20px 72px}
.panel h1{color:var(--hijau);font-size:2rem;margin-bottom:18px}
.inline{display:inline}
.notif{background:var(--hijau2);color:#fff;padding:12px 18px;border-radius:12px;margin-bottom:16px}
.tbl-wrap{overflow-x:auto;border-radius:18px}
.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:middle}
.tbl th{background:var(--hijau);color:#fff;font-family:var(--h)}
.thumb{width:56px;height:44px;object-fit:cover;border-radius:8px;display:inline-grid;place-items:center;background:var(--kuning);font-size:1.6rem}
.form-box{background:#fff;border-radius:24px;padding:28px;max-width:560px}
.form-box label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 4px}
.form-box input,.form-box select,.form-box textarea{width:100%;padding:11px 14px;border:2px solid var(--garis);border-radius:12px;font:inherit}
.form-box input:focus,.form-box select:focus,.form-box textarea:focus{border-color:var(--hijau2);outline:0}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}