/* font lobster */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

* { box-sizing: border-box; }
:root{
  --sidebar-w: 200px;
  --green-1:#6bc46b;  
  --green-2:#58a958;  
  --green-soft:#f0fdf0;
}

html, body{
  margin:0;
  padding:0;
  background:#fff;
  color:#333;
  font-family: Arial, Helvetica, sans-serif;
  line-height:1.6;
}

/* ===== Sidebar / Navbar ===== */
ul.sidenav{
  list-style:none;
  margin:0;
  padding:0;
  width:var(--sidebar-w);
  background:var(--green-soft);
  position:fixed;
  inset:0 auto 0 0;            
  overflow-y:auto;
  border-right:1px solid #ddd;
  font-family:'Lobster', cursive;
}

ul.sidenav li a{
  display:block;
  padding:14px 16px;
  color:#333;
  text-decoration:none;
  transition:background .2s ease, padding-left .2s ease;
}
ul.sidenav li a:hover{
  background:#d6f5d6;
  padding-left:22px;
}
ul.sidenav li a.active{
  background:var(--green-1);
  color:#fff;
}

/* ===== Layout Content ===== */
.content{
  margin-left:var(--sidebar-w);
  padding:28px 24px;
  min-height:100vh;
}

#bl, #badan, #kaki{ width:100%; max-width:980px; margin:0 auto; }

#bl{
  background:linear-gradient(180deg, var(--green-1), var(--green-2));
  color:#fff;
  border-radius:8px 8px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:140px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#bl .kepala{ font-size:44px; margin:0; }

#badan{
  background:#fff;
  border-left:1px solid #e1e1e1;
  border-right:1px solid #e1e1e1;
  padding:18px 22px;
}
#badan .kotak p{ margin:0 0 8px; }

#kaki{
  text-align:center;
  background:linear-gradient(180deg, var(--green-1), var(--green-2));
  color:#fff;
  border-radius:0 0 8px 8px;
  padding:12px;
  font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin-top:12px;
}

.ticker{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e6e6e6;
  border-radius:8px;
  background:#f6fff6;
  margin:8px 0 16px;
}
.ticker-label{
  background:#3da83d;
  color:#fff;
  font-weight:600;
  font-size:12px;
  padding:4px 8px;
  border-radius:6px;
}
.ticker-track{
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;
  white-space:nowrap;
  flex:1;
}
.ticker-track a{
  color:#1b5e20;
  text-decoration:none;
  font-weight:700;
}
.ticker .dot{ color:#7aa97a; }

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 10px;
}
.search{
  flex:1 1 260px;
  padding:10px 12px;
  border:1px solid #dfe8df;
  border-radius:8px;
  outline:none;
}
.search:focus{
  border-color:var(--green-1);
  box-shadow:0 0 0 3px rgba(107,196,107,.15);
}

.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  border:1px solid #cfe6cf;
  background:#f2fff2;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  cursor:pointer;
}
.pill:hover{ background:#e6f9e6; }
.pill.active{
  background:var(--green-1);
  color:#fff;
  border-color:var(--green-1);
}

.section-title{
  margin:12px 0 8px;
  font-size:22px;
  color:#1b5e20;
}
.section-sub{
  margin:18px 0 10px;
  font-size:18px;
  color:#1b5e20;
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-bottom:12px;
}
@media (max-width:860px){
  .news-grid{ grid-template-columns:1fr; }
}

.card{
  border:1px solid #e6e6e6;
  background:#ffffff;
  border-radius:10px;
  padding:14px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.card-title{
  display:block;
  color:#1b5e20;
  font-weight:800;
  text-decoration:none;
  line-height:1.3;
  margin-bottom:6px;
}
.card-title:hover{ text-decoration:underline; }
.card-excerpt{ margin:0 0 8px; color:#333; }
.card-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#5f805f;
}

.mini-list{ padding-left:18px; margin:0 0 8px; }
.mini-list li{ margin:6px 0; }
.mini-list a{ color:#1b5e20; text-decoration:none; }
.mini-list a:hover{ text-decoration:underline; }

@media (max-width:760px){
  ul.sidenav{
    position:static;
    width:100%;
    display:flex;
    border-right:none;
    border-bottom:1px solid #ddd;
  }
  ul.sidenav li{ flex:1; }
  ul.sidenav li a{ text-align:center; padding:12px 10px; }
  .content{ margin-left:0; padding:16px; }
  #bl{ height:120px; }
  #bl .kepala{ font-size:34px; }
  #badan, #kaki{ max-width:100%; }
}

.contact-section{
  margin-top:22px;
  padding:18px 12px;
  background:#fbfff9;
  border-radius:8px;
  border:1px solid #e9f0e9;
}
.contact-section h2{ margin-top:0; color:#1b5e20; }
.contact-section p{ margin:6px 0 12px; }

.contact-form{ display:block; gap:12px; }
.contact-form .form-row{ display:flex; gap:12px; margin-bottom:10px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  flex:1;
  padding:10px 12px;
  border:1px solid #dfe8df;
  border-radius:8px;
  font-size:14px;
}
.contact-form textarea{ resize:vertical; }
.contact-form .btn{
  background:var(--green-1);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
.contact-form .btn:hover{ opacity:0.95; transform:translateY(-1px); }

@media (max-width:760px){
  .contact-form .form-row{ flex-direction:column; }
}

.about-section{
  margin-top:18px;
  padding:18px 14px;
  background:#fffefc;
  border:1px solid #f1e9e6;
  border-radius:8px;
}
.about-section h2{ margin-top:0; color:#1b5e20; }
.about-section p{ margin:8px 0; }
.team-list{ margin:8px 0 0 18px; }
.team-list li{ margin:6px 0; }