:root{
  --hijau:#6fae2e;
  --hijau-tua:#3f7d16;
  --hijau-gelap:#1f4408;
  --kuning:#f6c62b;
  --kuning-tua:#e8960f;
  --krem:#fdf0c4;
  --krem-putih:#fffaf0;
  --teks:#2b2410;
  --abu:#7a705a;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Poppins',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:var(--font-body);
  color:var(--teks);
  background:var(--krem);
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

.container{width:92%;max-width:1140px;margin:0 auto;position:relative;z-index:1;}

/* Header */
header{background:#fffdf6;position:sticky;top:0;z-index:100;box-shadow:0 2px 14px rgba(43,36,16,.08);}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--hijau-tua);}
.brand img{width:auto;height:40px;object-fit:contain;}
nav ul{list-style:none;display:flex;gap:30px;}
nav a{position:relative;display:inline-block;font-weight:600;font-size:.86rem;letter-spacing:.6px;text-transform:uppercase;color:var(--teks);padding:6px 2px;transition:color .25s ease, transform .25s ease;}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--kuning-tua);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .3s ease;}
nav a:hover{color:var(--hijau-tua);transform:translateY(-2px);}
nav a:hover::after, nav a.active::after{transform:scaleX(1);transform-origin:left;}
nav a.active{color:var(--hijau-tua);}
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.menu-toggle span{width:26px;height:3px;background:var(--hijau-tua);border-radius:2px;}

/* Eyebrow label */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--hijau-tua);font-weight:700;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--kuning-tua);display:inline-block;}

/* Watermark decorative text */
.section-relative{position:relative;overflow:hidden;}
.watermark{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.5rem,14vw,11rem);
  color:rgba(63,125,22,.07);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
  letter-spacing:2px;
}
.hero .watermark{color:rgba(255,255,255,.08);}

/* Hero */
.hero{background:linear-gradient(160deg,var(--hijau) 0%,var(--hijau-tua) 55%,var(--hijau-gelap) 100%);color:#fff;padding:90px 0 80px;position:relative;overflow:hidden;}
.hero .container{display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.hero-text{flex:1 1 380px;}
.hero .eyebrow{color:var(--kuning);}
.hero .eyebrow::before{background:#fff;}
.hero-text .tag{display:inline-block;background:var(--kuning);color:var(--teks);font-weight:700;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;padding:6px 16px;border-radius:30px;margin-bottom:18px;}
.hero-text h1{font-family:var(--font-display);font-weight:800;font-size:3rem;margin-bottom:18px;line-height:1.15;}
.hero-text h1 .fade{color:rgba(255,255,255,.55);font-weight:500;font-style:italic;}
.hero-text p{font-size:1.05rem;margin-bottom:28px;opacity:.95;max-width:520px;}
.hero-img{flex:1 1 280px;display:flex;justify-content:center;}
.hero-img img{width:220px;height:auto;border-radius:18px;object-fit:contain;background:#fff;padding:18px;border:6px solid var(--kuning);box-shadow:0 16px 40px rgba(0,0,0,.3);}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--kuning-tua);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.8px;text-transform:uppercase;padding:14px 28px;border-radius:8px;transition:.25s;border:none;cursor:pointer;box-shadow:0 6px 16px rgba(232,150,15,.35);}
.btn:hover{background:var(--hijau-gelap);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.25);}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff;margin-left:12px;box-shadow:none;}
.btn-outline:hover{background:#fff;color:var(--hijau-tua);}

/* Sections */
section{padding:70px 0;position:relative;}
.section-title{text-align:center;margin-bottom:44px;position:relative;z-index:1;}
.section-title .eyebrow{justify-content:center;display:flex;}
.section-title h2{font-family:var(--font-display);font-weight:800;font-size:2.3rem;color:var(--hijau-tua);}
.section-title h2 .fade{color:#c9bfa0;font-weight:500;font-style:italic;}

.about-grid{display:flex;gap:50px;align-items:center;flex-wrap:wrap;}
.about-grid .about-media{flex:1 1 320px;position:relative;}
.about-grid .about-media img{border-radius:18px;width:100%;box-shadow:0 16px 36px rgba(43,36,16,.18);}
.callout-card{position:absolute;left:-24px;bottom:-24px;background:var(--hijau-tua);color:#fff;padding:22px 26px;border-radius:14px;max-width:260px;box-shadow:0 14px 30px rgba(31,68,8,.35);}
.callout-card h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:6px;}
.callout-card p{font-size:.85rem;color:#e7f0d9;}
.about-grid img{border-radius:16px;flex:1 1 300px;}
.about-grid .about-text{flex:1 1 320px;}
.about-text h2{font-family:var(--font-display);font-weight:800;}
.about-text p{margin-bottom:14px;}

.stats{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px;}
.stat-box{background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 6px 18px rgba(43,36,16,.08);text-align:center;flex:1 1 120px;border-bottom:3px solid var(--kuning-tua);transition:.25s;}
.stat-box:hover{transform:translateY(-4px);}
.stat-box b{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--hijau-tua);}
.stat-box span{font-size:.85rem;color:var(--abu);}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 20px rgba(43,36,16,.08);transition:.3s;}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(43,36,16,.16);}
.card img{width:100%;height:200px;object-fit:cover;transition:.4s;}
.card:hover img{transform:scale(1.06);}
.card-body{padding:20px 22px;}
.card-body h3{font-family:var(--font-display);color:var(--hijau-tua);margin-bottom:6px;font-size:1.15rem;}
.card-body p{font-size:.9rem;color:var(--abu);}
.badge{display:inline-block;background:var(--kuning);color:var(--teks);font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 12px;border-radius:12px;margin-top:12px;}

/* Showcase full-bleed strip */
.showcase{position:relative;min-height:340px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background-size:cover;background-position:center;overflow:hidden;}
.showcase::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,68,8,.75),rgba(31,68,8,.4));}
.showcase-item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px 14px;border-right:1px solid rgba(255,255,255,.15);}
.showcase-item:last-child{border-right:none;}
.showcase-item h3{font-family:var(--font-display);color:#fff;font-size:1.15rem;text-transform:uppercase;letter-spacing:.5px;}

/* Outlet / kontak cards */
.outlet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.outlet-card{background:#fff;border-left:5px solid var(--kuning-tua);border-radius:12px;padding:24px;box-shadow:0 6px 18px rgba(43,36,16,.08);transition:.25s;}
.outlet-card:hover{transform:translateY(-4px);}
.outlet-card h3{font-family:var(--font-display);color:var(--hijau-tua);margin-bottom:8px;}
.outlet-card p{font-size:.92rem;margin-bottom:4px;}

.contact-wrap{display:flex;gap:40px;flex-wrap:wrap;}
.contact-list{flex:1 1 300px;}
.contact-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.contact-item .icon{width:44px;height:44px;border-radius:12px;background:var(--kuning);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;font-weight:700;color:var(--teks);}
.contact-item h4{font-family:var(--font-display);color:var(--hijau-tua);margin-bottom:2px;}

.map-box{flex:1 1 320px;border-radius:16px;overflow:hidden;min-height:280px;box-shadow:0 8px 22px rgba(43,36,16,.1);}
.map-box iframe{width:100%;height:100%;min-height:280px;border:0;}

.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.testi-card{background:#fff;border-radius:16px;padding:26px;box-shadow:0 6px 18px rgba(43,36,16,.08);position:relative;}
.testi-card::before{content:"\201C";position:absolute;top:8px;left:16px;font-family:var(--font-display);font-size:3rem;color:var(--kuning);opacity:.6;}
.testi-card p{font-style:italic;color:var(--abu);margin-bottom:12px;position:relative;z-index:1;}
.testi-card b{color:var(--hijau-tua);}

/* Partner badges (Mitra) */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;}
.partner-badge{background:#fff;border-radius:14px;padding:30px 20px;text-align:center;box-shadow:0 6px 18px rgba(43,36,16,.08);filter:grayscale(1);opacity:.75;transition:.3s;}
.partner-badge:hover{filter:grayscale(0);opacity:1;transform:translateY(-4px);box-shadow:0 14px 28px rgba(43,36,16,.14);}
.partner-badge h3{font-family:var(--font-display);color:var(--hijau-tua);margin-bottom:6px;font-size:1.05rem;}
.partner-badge p{font-size:.85rem;color:var(--abu);}

.cta{background:var(--kuning);text-align:center;padding:60px 0;position:relative;overflow:hidden;}
.cta h2{font-family:var(--font-display);font-weight:800;color:var(--teks);margin-bottom:10px;font-size:1.9rem;}
.cta p{margin-bottom:26px;color:var(--teks);}
.cta .btn{background:var(--hijau-tua);color:#fff;}
.cta .btn:hover{background:var(--hijau-gelap);}

footer{background:var(--hijau-gelap);color:#dce8cf;padding:0 0 20px;position:relative;overflow:hidden;}
.footer-brand{text-align:center;padding:60px 0 30px;position:relative;}
.footer-brand .watermark{color:rgba(255,255,255,.05);top:55%;}
.footer-brand img{margin:0 auto 14px;height:64px;width:64px;object-fit:cover;border-radius:50%;position:relative;z-index:1;border:3px solid var(--kuning);box-shadow:0 8px 20px rgba(0,0,0,.3);}
.footer-brand p{font-family:var(--font-display);font-style:italic;color:#c9d9b8;position:relative;z-index:1;}
.footer-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:26px;position:relative;z-index:1;}
.footer-col h4{font-family:var(--font-display);color:var(--kuning);margin-bottom:12px;}
.footer-col p, .footer-col a{display:block;color:#c3d2b3;font-size:.9rem;margin-bottom:8px;}
.footer-col a:hover{color:var(--kuning);}
.social-row{display:flex;gap:12px;margin-top:6px;}
.social-row a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.social-row a:hover{background:var(--kuning);color:var(--hijau-gelap);}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:.8rem;color:#9db08a;position:relative;z-index:1;}

@media(max-width:760px){
  nav ul{position:absolute;top:70px;left:0;right:0;background:#fffdf6;flex-direction:column;gap:0;display:none;box-shadow:0 8px 16px rgba(0,0,0,.08);}
  nav ul.open{display:flex;}
  nav li{border-top:1px solid #eee;}
  nav a{display:block;padding:14px 24px;}
  .menu-toggle{display:flex;}
  .hero-text h1{font-size:2.1rem;}
  .showcase{grid-template-columns:1fr 1fr;}
  .callout-card{position:static;margin-top:-40px;margin-left:16px;margin-right:16px;}
}