@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  --primary:#2E7D32;
  --primary-dark:#1B5E20;
  --accent:#FB8C00;
  --bg:#F5F5F5;
  --white:#FFFFFF;
  --surface:#ffffff;
  --ink:#1e2724;
}
body{background:radial-gradient(circle at 12% 6%,#f4fbf3 0%,#f7f8f6 33%,#f5f5f5 70%);font-family:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;color:#1f2c28}
a{text-decoration:none}
h1,h2,h3,h4,h5,h6{font-family:'Sora','Manrope',sans-serif;letter-spacing:.1px;color:#1c322b}
p{line-height:1.75;color:#2f413b}
.lead{line-height:1.8}
.text-muted{color:#43564f!important}
.text-success,.text-primary-brand{color:var(--primary)!important}
.bg-success,.btn-success{background-color:var(--primary)!important;border-color:var(--primary)!important}
.btn-success:hover{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important}
.btn-outline-success{color:var(--primary);border-color:var(--primary)}
.btn-outline-success:hover{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:#fff;border:none}
.btn-accent:hover{background:#EF6C00;color:#fff}

.btn{border-radius:12px;font-weight:700;padding:.62rem 1rem}
.btn-sm{padding:.45rem .8rem;border-radius:10px}
.btn-lg{padding:.82rem 1.25rem}

.form-label{font-size:.92rem;font-weight:700;color:#375049}
.form-control,.form-select{
  border-radius:12px;
  border-color:#d8e3dc;
  min-height:44px;
  color:#1f3029;
  box-shadow:none;
}

.form-control:focus,.form-select:focus{
  border-color:rgba(46,125,50,.45);
  box-shadow:0 0 0 .2rem rgba(46,125,50,.14);
}

.input-group .btn{border-radius:0 12px 12px 0}

.page-intro{
  background:linear-gradient(122deg,#ffffff 0%,#f4faf6 100%);
  border:1px solid #e4efe8;
  border-radius:18px;
  padding:1.2rem 1.2rem;
  margin-bottom:1rem;
  box-shadow:0 6px 24px rgba(12,48,28,.04);
}

.page-kicker{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#2e7d32;
  background:rgba(46,125,50,.1);
  border-radius:999px;
  padding:.28rem .65rem;
  margin-bottom:.55rem;
}

.page-intro h1,.page-intro h2{margin-bottom:.25rem}
.page-intro p{margin-bottom:0;max-width:74ch;color:#344741}

.section-title{font-weight:800;color:var(--primary);margin-bottom:1.1rem;letter-spacing:.2px}

.breadcrumb{
  background:transparent;
  padding:0;
  margin-bottom:1rem;
  font-size:.92rem;
}

.breadcrumb-item,.breadcrumb-item.active{color:#566964}
.breadcrumb-item + .breadcrumb-item::before{color:#9baea7}
.breadcrumb a{color:var(--primary);font-weight:700}

.hero{
  background:linear-gradient(135deg,rgba(46,125,50,.9),rgba(27,94,32,.85)),
  url('../../Image/gambar-lp.jpeg') center/cover;
  color:#fff;padding:6rem 0;border-radius:0 0 24px 24px
}
.hero h1{font-family:'Sora','Manrope',sans-serif;font-weight:800;font-size:clamp(2rem,4vw,3.2rem)}

.hero-wix{
  position:relative;
  min-height:78svh;
  overflow:hidden;
  border-radius:0 0 28px 28px;
  isolation:isolate;
  display:flex;
  align-items:center;
}

.hero-backdrop,
.hero-gradient{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-backdrop{
  background-image:url('../../Image/gambar-lp.jpeg');
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  will-change:transform;
  animation:heroKenBurns 16s ease-in-out infinite alternate;
}

.hero-gradient{
  background:
    linear-gradient(112deg,rgba(12,39,31,.72) 7%,rgba(26,91,44,.46) 46%,rgba(7,34,27,.65) 100%),
    radial-gradient(circle at 82% 10%,rgba(252,215,138,.24) 0%,rgba(255,255,255,0) 35%);
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:760px;
  color:#16231d;
  padding:5.7rem 0;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(17,31,24,.28);
  border-radius:999px;
  padding:.46rem .9rem;
  font-size:.84rem;
  font-weight:700;
  color:#15211c;
  background:rgba(248,251,249,.8);
  backdrop-filter:blur(10px);
}

.hero-content .lead{
  max-width:64ch;
  font-size:clamp(1rem,1.5vw,1.24rem);
  color:#f8fbfa;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.hero-actions{
  margin-top:1.35rem;
  display:flex;
  gap:.72rem;
  flex-wrap:wrap;
}

.hero-actions .btn{
  border-radius:12px;
  font-weight:700;
  padding:.78rem 1.2rem;
  box-shadow:0 14px 28px rgba(0,0,0,.2);
}

.hero-stats{
  margin-top:1.45rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:.75rem;
  max-width:620px;
}

.hero-stat{
  background:rgba(247,251,248,.72);
  border:1px solid rgba(18,34,26,.25);
  border-radius:14px;
  padding:.7rem .85rem;
  backdrop-filter:blur(7px);
}

.hero-stat strong{
  display:block;
  font-family:'Sora','Manrope',sans-serif;
  font-size:1.2rem;
  line-height:1.2;
  color:#102019;
}

.hero-stat span{
  font-size:.82rem;
  color:#1b2a23;
}

.navbar{backdrop-filter:saturate(1.25) blur(6px);background:rgba(255,255,255,.9)!important}
.navbar-brand{font-family:'Sora','Manrope',sans-serif;letter-spacing:.2px}
.nav-link{font-weight:600}


.card{border:none;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:.25s ease;overflow:hidden;background:var(--surface)}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.card-link-wrap{display:block;height:100%;text-decoration:none;color:inherit}
.card-link-wrap:hover{color:inherit}
.card-link-wrap .card{cursor:pointer}
.card-img-top{height:190px;object-fit:cover}
.badge-cat{background:rgba(46,125,50,.1);color:var(--primary);font-weight:500}

.card p{color:#31443d}
.card .text-muted{color:#3f534b!important}

.card-body p{line-height:1.66}
.small{line-height:1.55;color:#26362f}
.small.text-muted{color:#3f534b!important}

.blog-media-frame{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#f6faf7 0%,#edf4ef 100%);
  border:1px solid #e4eee7;
}

.blog-media-frame--landscape{aspect-ratio:16 / 9}
.blog-media-frame--square{aspect-ratio:1 / 1}
.blog-media-frame--portrait{aspect-ratio:4 / 5}
.blog-media-frame--full{aspect-ratio:auto;min-height:0}

.blog-media-element{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.blog-media-frame--full .blog-media-element{height:auto;object-fit:contain;background:#fff;max-height:640px}
.blog-detail-media{max-width:100%}

.blog-content{
  color:#253530;
  line-height:1.85;
  font-size:1.02rem;
  word-break:break-word;
}

.blog-content a{
  color:#0d6efd;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.blog-content a:hover{
  color:#084298;
}

.category-chip{background:#fff;border-radius:999px;padding:.5rem 1rem;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:.2s;display:inline-flex;align-items:center;gap:.5rem;color:#333}
.category-chip:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}

.sidebar{background:#fff;border-radius:16px;padding:1rem;min-height:calc(100vh - 120px);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.sidebar .nav-link{color:#444;border-radius:8px;padding:.6rem .9rem;margin-bottom:.2rem}
.sidebar .nav-link.active,.sidebar .nav-link:hover{background:rgba(46,125,50,.1);color:var(--primary)}

.empty-state{text-align:center;padding:4rem 1rem;color:#5a6a63}
.empty-state i{font-size:4rem;color:#99aca4}

.loader-overlay{position:fixed;inset:0;background:rgba(255,255,255,.7);display:none;align-items:center;justify-content:center;z-index:9999}
.loader-overlay.show{display:flex}

.rating-star{cursor:pointer;font-size:1.6rem;color:#e0e0e0}
.rating-star.active{color:#FB8C00}


.pagination .page-link{
  border-radius:10px;
  margin:0 3px;
  border-color:#dbe7df;
  color:#2b4f42;
  font-weight:700;
}

.pagination .page-item.active .page-link{
  background-color:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.pagination .page-link:focus{box-shadow:0 0 0 .2rem rgba(46,125,50,.15)}

.product-img-lg{width:100%;height:380px;object-fit:cover;border-radius:16px}
.product-thumb{border:2px solid transparent;background:#fff;padding:0;border-radius:10px;overflow:hidden;line-height:0}
.product-thumb img{width:84px;height:84px;object-fit:cover;display:block}
.product-thumb.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(46,125,50,.15)}

.village-image{width:100%;height:320px;object-fit:cover;border-radius:14px}
.leader-photo{width:100%;max-width:260px;height:300px;object-fit:cover;border-radius:14px}
.contact-item{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;color:#444}
.contact-item i{color:var(--primary);font-size:1.1rem;line-height:1.3}
.map-frame{width:100%;height:340px;border:0;border-radius:14px}

.blog-detail-image{width:100%;max-height:520px;object-fit:cover;border-radius:14px}
.blog-video-wrap{background:#000;border-radius:14px;overflow:hidden}
.blog-video-player{width:100%;max-height:620px;display:block}
.blog-content{font-size:1.05rem;line-height:1.85;color:#2f2f2f;white-space:normal}

.auth-shell .card{border:1px solid #e4eee7;box-shadow:0 14px 32px rgba(20,47,35,.08)}
.auth-shell .section-title{margin-bottom:.4rem}

footer{background:linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%)}

[data-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}

[data-reveal="zoom-in"]{transform:scale(.96) translate3d(0,12px,0)}
[data-reveal="fade-left"]{transform:translate3d(-24px,0,0)}
[data-reveal="fade-right"]{transform:translate3d(24px,0,0)}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

@keyframes heroKenBurns{
  0%{transform:scale(1.05) translate3d(0,0,0)}
  100%{transform:scale(1.14) translate3d(1.5%,.8%,0)}
}

@media (max-width:991.98px){
  .hero-wix{min-height:70svh}
  .hero-content{padding:4.6rem 0}
}

@media (max-width:767.98px){
  .hero-wix{min-height:64svh;border-radius:0 0 18px 18px}
  .hero-content{padding:4rem 0}
  .hero-stats{grid-template-columns:1fr;max-width:320px}
  .hero-actions .btn{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:.5rem}
}

@media (prefers-reduced-motion:reduce){
  .hero-backdrop{animation:none;transform:scale(1.04)}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}