/* =========================================================
   assets/css/home.css — HANYA untuk index.html (beranda)
   ========================================================= */

.hero{
  padding:96px 0 60px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero > *{ min-width:0; }
.hero h1{
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.08;
  margin:14px 0 18px;
}
.hero h1 .accent{ color:var(--accent); }
.hero .lead{ font-size:1.05rem; max-width:46ch; }
.hero-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }

/* jendela terminal di sisi kanan hero */
.terminal{
  background:#0a121d; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  overflow:hidden;
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--line);
  background:#0d1622;
}
.terminal-bar span{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.terminal-bar span:nth-child(1){ background:#ff5f56; }
.terminal-bar span:nth-child(2){ background:#ffbd2e; }
.terminal-bar span:nth-child(3){ background:#27c93f; }
.terminal-bar .path{ margin-left:auto; font-family:var(--font-mono); font-size:.75rem; color:var(--text-faint); }
.terminal-body{
  font-family:var(--font-mono); font-size:.86rem; padding:20px; min-height:220px;
  color:#c9e8e0; overflow-wrap:anywhere;
}
.dir-name{ white-space:nowrap; }
.terminal-body .prompt{ color:var(--accent); }
.terminal-body .out{ color:var(--text-dim); }
#typedLine::after{
  content:"▌"; margin-left:2px; color:var(--accent);
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* grid "topologi" menuju tiap domain/subdomain */
.node-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.node-card{
  position:relative;
  background:var(--panel-solid); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; transition:border-color .2s, transform .2s;
}
.node-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.node-card .tag{
  font-family:var(--font-mono); font-size:.7rem; color:var(--accent-2);
  letter-spacing:.08em; text-transform:uppercase;
}
.node-card h3{ font-size:1.05rem; margin:8px 0 6px; }
.node-card p{ font-size:.88rem; margin-bottom:14px; }
.node-card .go{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); }

.stat-row{ display:flex; gap:36px; flex-wrap:wrap; margin-top:36px; }
.stat-row .stat b{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--accent); }
.stat-row .stat span{ font-size:.8rem; color:var(--text-faint); }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .node-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .node-grid{ grid-template-columns:1fr; }
}