/* DI-Task — landing page "dark intelijen" */
@font-face { font-family: 'Plex Mono'; src: url('fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Plex Mono'; src: url('fonts/plexmono-600.woff2') format('woff2'); font-weight: 600; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; }

:root {
  --di-bg: #0a0e14;
  --di-panel: #0f1622;
  --di-line: #1c2940;
  --di-accent: #00e5a0;
  --di-cyan: #22d3ee;
  --di-text: #c9d6e8;
  --di-dim: #6d7f98;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--di-bg); color: var(--di-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--di-cyan); text-decoration: none; }
.mono { font-family: 'Plex Mono', ui-monospace, monospace; }

/* latar grid + glow */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(0,229,160,.07), transparent 60%),
    linear-gradient(var(--di-line) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--di-line) 1px, transparent 1px) 0 0 / 44px 100%;
  opacity: .55;
}
.bg-fx::after { content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--di-bg) 92%); }

.strip {
  font-family:'Plex Mono',monospace; font-size:.66rem; letter-spacing:.18em;
  color: var(--di-dim); border-bottom:1px solid var(--di-line);
  padding:.45rem 1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.strip .dot { color: var(--di-accent); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 1rem; }

nav.top { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; }
.brand-mark {
  width:34px;height:34px;border:1px solid var(--di-accent);border-radius:8px;
  display:grid;place-items:center;color:var(--di-accent);
  font-family:'Plex Mono',monospace;font-weight:600;font-size:.8rem;
  box-shadow:0 0 18px rgba(0,229,160,.35);
}
.brand small { display:block;color:var(--di-dim);font-size:.66rem;letter-spacing:.12em }
.brand b { font-family:'Plex Mono',monospace; letter-spacing:.06em }
.btn-login {
  font-family:'Plex Mono',monospace;font-size:.75rem;color:var(--di-accent);
  border:1px solid var(--di-accent);border-radius:6px;padding:.5rem .9rem;
}
.btn-login:hover { background: rgba(0,229,160,.12); color: var(--di-accent); }

.hero { padding: 3.2rem 0 2.4rem; }
.hero .code { font-family:'Plex Mono',monospace;color:var(--di-cyan);font-size:.72rem;letter-spacing:.2em }
.hero h1 {
  font-family:'Plex Mono',monospace;font-weight:600;line-height:1.08;
  font-size:clamp(1.9rem,6vw,3.4rem);margin:.6rem 0 .8rem;color:#eef4ff;
}
.hero h1 .hl { color: var(--di-accent); }
.hero p { max-width:640px;color:var(--di-dim);font-size:1rem;line-height:1.6 }
.hero .blink { display:inline-block;width:.55em;height:1.05em;background:var(--di-accent);
  vertical-align:-0.15em;animation:blink 1.1s steps(1) infinite }
@keyframes blink { 50% { opacity:0 } }

/* stat bar */
.stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1.6rem 0 2.6rem }
.stat {
  border:1px solid var(--di-line);border-radius:10px;background:rgba(15,22,34,.7);
  padding:.9rem 1rem;
}
.stat .n { font-family:'Plex Mono',monospace;font-size:1.7rem;font-weight:600;color:var(--di-accent) }
.stat .l { font-size:.72rem;color:var(--di-dim);letter-spacing:.1em;text-transform:uppercase }

/* menu grid */
.sec-title { font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.22em;color:var(--di-cyan);margin-bottom:1rem }
.menus { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;padding-bottom:2.5rem }
.menu {
  position:relative;border:1px solid var(--di-line);border-radius:12px;
  background:linear-gradient(180deg,rgba(20,29,45,.85),rgba(12,18,29,.85));
  padding:1.1rem 1.15rem;display:block;color:var(--di-text);
  transition:border-color .2s,transform .2s;
}
.menu:hover { border-color:var(--di-accent);transform:translateY(-2px);color:var(--di-text) }
.menu .ic { font-size:1.4rem;color:var(--di-accent);margin-bottom:.6rem;display:block }
.menu h3 { font-size:1rem;margin:0 0 .35rem;font-weight:600 }
.menu p { margin:0;font-size:.8rem;color:var(--di-dim);line-height:1.5 }
.menu .go { position:absolute;top:1rem;right:1rem;color:var(--di-dim);font-size:.8rem }
.menu.soon { opacity:.55 }
.menu.soon:hover { border-color:var(--di-line);transform:none }
.tag-soon { position:absolute;top:.9rem;right:.9rem;font-family:'Plex Mono',monospace;
  font-size:.6rem;letter-spacing:.15em;border:1px solid var(--di-line);border-radius:4px;
  padding:.15rem .4rem;color:var(--di-dim) }

/* PDCA strip */
.pdca { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:2.5rem }
.pdca .p { border:1px solid var(--di-line);border-radius:10px;padding:.9rem;background:rgba(15,22,34,.6) }
.pdca .p b { font-family:'Plex Mono',monospace;color:var(--di-accent);letter-spacing:.15em;font-size:.78rem }
.pdca .p span { display:block;font-size:.74rem;color:var(--di-dim);margin-top:.3rem }

/* rencana list */
.plan { border:1px solid var(--di-line);border-radius:10px;background:rgba(15,22,34,.7);
  padding:1rem 1.1rem;margin-bottom:.75rem }
.plan .num { font-family:'Plex Mono',monospace;font-size:.7rem;color:var(--di-cyan);letter-spacing:.1em }
.plan h3 { font-size:.98rem;margin:.3rem 0 .4rem;font-weight:600;color:#e8f0ff }
.plan .meta { font-size:.75rem;color:var(--di-dim);display:flex;gap:1rem;flex-wrap:wrap }
.bar { height:5px;background:#1b2740;border-radius:3px;margin-top:.7rem;overflow:hidden }
.bar i { display:block;height:100%;background:linear-gradient(90deg,var(--di-cyan),var(--di-accent)) }
.badge-s { font-family:'Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;border:1px solid var(--di-line);
  border-radius:4px;padding:.15rem .45rem;color:var(--di-dim) }
.badge-s.done { color:var(--di-accent);border-color:var(--di-accent) }

footer.site { border-top:1px solid var(--di-line);margin-top:3rem;padding:1.4rem 0 2rem;
  font-size:.72rem;color:var(--di-dim) }
footer.site .wrap { display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap }

.card-pub { border:1px solid var(--di-line);border-radius:12px;background:rgba(15,22,34,.7);padding:1.4rem;margin-bottom:1rem }
.card-pub h2 { font-family:'Plex Mono',monospace;font-size:.8rem;letter-spacing:.18em;color:var(--di-cyan);margin-bottom:1rem }
.card-pub ul { margin:0;padding-left:1.1rem;color:var(--di-text);font-size:.88rem;line-height:1.9 }
.crumb { font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.15em;color:var(--di-dim);margin:1.6rem 0 .4rem }
.page-title { font-family:'Plex Mono',monospace;font-weight:600;font-size:clamp(1.4rem,4vw,2rem);color:#eef4ff;margin-bottom:.4rem }
.page-sub { color:var(--di-dim);font-size:.9rem;margin-bottom:1.6rem;max-width:640px }