/* =========================================================
   Halaman Beranda - gaya khusus (hero, tentang, visi-misi, layanan, nilai, cta)
   ========================================================= */

/* ---- Hero ---- */
.hero{
  padding:76px 0 60px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
@media (max-width:900px){ .hero{grid-template-columns:1fr; padding-top:48px;} }
.hero p.lead{
  font-size:1.13rem; color:var(--ink-soft); max-width:46ch; margin:0 0 30px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px;}
.hero-view-counter{
  display:flex; align-items:center; gap:7px;
  margin:18px 0 0; color:var(--ink-soft); font-size:0.85rem;
}
.hero-view-counter svg{flex-shrink:0; color:var(--copper);}

.hero-diagram{
  background:var(--primary); border-radius:var(--radius);
  padding:26px; position:relative; overflow:hidden;
}
.hero-diagram svg{width:100%; height:auto; display:block;}
.loop-dash{
  stroke-dasharray:6 7; animation:flow 5s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-260; } }
.node-label{
  font-family:'JetBrains Mono', monospace; font-size:9.5px; fill:#DDE3D2; letter-spacing:0.02em;
}
.node-label.hi{fill:#F2C9A0;}

/* ---- About ---- */
#tentang{background:var(--panel);}
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:52px;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr; gap:28px;}}
.about-grid .stat{
  font-family:'JetBrains Mono', monospace; font-size:0.82rem; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:12px; margin-top:22px;
}
.about-body p{margin:0 0 16px; color:var(--ink-soft);}
.about-body strong{color:var(--ink);}

/* ---- Visi Misi ---- */
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
@media (max-width:820px){.vm-grid{grid-template-columns:1fr;}}
.vm-col{padding:34px; background:var(--paper);}
.vm-col + .vm-col{border-left:1px solid var(--line);}
@media (max-width:820px){.vm-col + .vm-col{border-left:none; border-top:1px solid var(--line);}}
.vm-col h3{margin:0 0 14px; color:var(--primary); font-size:1.05rem;}
.vm-col p{color:var(--ink-soft); margin:0 0 12px;}
.vm-col ol{margin:0; padding-left:1.15em; color:var(--ink-soft);}
.vm-col ol li{margin-bottom:10px;}
.vm-col ol li::marker{font-family:'JetBrains Mono',monospace; color:var(--copper); font-size:0.85em;}
.tagline{
  font-style:italic; color:var(--copper); font-size:1.06rem; margin:0 0 18px;
}

/* ---- Layanan ---- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}
.service-card{
  background:var(--paper); padding:30px 26px; min-height:190px;
  display:flex; flex-direction:column; gap:12px;
}
.service-num{
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--copper);
}
.service-card h3{margin:0; font-size:1.04rem; color:var(--ink); font-weight:600;}
.service-card p{margin:0; font-size:0.93rem; color:var(--ink-soft);}

/* ---- Nilai ---- */
#nilai{background:var(--primary); color:#F1F0E4;}
#nilai .section-head p{color:#C7D2C6;}
#nilai h2{color:#F7F7EF;}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:820px){.values-grid{grid-template-columns:1fr; gap:30px;}}
.value-item{border-top:1px solid rgba(247,247,239,0.25); padding-top:18px;}
.value-item .mono{font-size:0.78rem; color:var(--copper-soft); display:block; margin-bottom:10px;}
.value-item h3{margin:0 0 10px; font-size:1.08rem; font-weight:600;}
.value-item p{margin:0; color:#D6DDCF; font-size:0.95rem;}

/* ---- CTA ---- */
.cta{
  background:var(--copper); color:#211208;
  border-radius:var(--radius); padding:52px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta h2{color:#211208; margin:0 0 8px;}
.cta p{margin:0; color:#3A2410; max-width:46ch;}
.cta .btn-primary{background:#211208; color:var(--paper);}
.cta .btn-primary:hover{background:#3A2410;}