/* Otomatika - tema blueprint navy dengan garis sirkuit, menyesuaikan tema automata/mesin. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:            #0c1a29;
  --bg-elevated:   #102640;
  --bg-panel:      #0f2138;
  --bg-inset:      #0a1522;
  --grid-line:     rgba(146, 196, 235, .07);
  --border:        rgba(148, 196, 232, .22);
  --border-strong: rgba(148, 196, 232, .4);
  --text-primary:  #eaf3fb;
  --text-secondary:#93aec8;
  --text-dim:      #5c7791;
  --accent:        #43e6cc;
  --accent-soft:   rgba(67, 230, 204, .16);
  --accent-2:      #ffbe4d;
  --accent-2-soft: rgba(255, 190, 77, .16);
  --accent-3:      #b18cff;
  --accent-3-soft: rgba(177, 140, 255, .16);
  --accent-4:      #5ec2ff;
  --accent-4-soft: rgba(94, 194, 255, .16);
  --danger:        #ff6b76;
  --danger-soft:   rgba(255, 107, 118, .15);
  --success:       #5eeaa0;
  --success-soft:  rgba(94, 234, 160, .15);
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'IBM Plex Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;
  --radius: 10px;
}

*{ box-sizing: border-box; }

.row{ min-width: 0; }
.row > [class*="col-"]{ min-width: 0; }

html, body{
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
}

body{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}

::selection{ background: var(--accent-soft); color: var(--accent); }

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent); text-decoration: underline; }

code, .mono, .font-mono{ font-family: var(--font-mono); }

h1, h2, h3, h4, h5, .font-display{
  font-family: var(--font-display);
  letter-spacing: .01em;
}

.text-dim{ color: var(--text-dim); }
.text-secondary{ color: var(--text-secondary); }
.text-accent{ color: var(--accent); }

/* Corner-tick frame: motif "lembar gambar teknik", dipakai berulang. */
.blueprint-frame{
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.blueprint-frame::before, .blueprint-frame::after,
.blueprint-frame .corner-br, .blueprint-frame .corner-bl{
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--accent);
  opacity: .55;
}
.blueprint-frame::before{ top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.blueprint-frame::after{ top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.blueprint-frame .corner-bl{ bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.blueprint-frame .corner-br{ bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* Navbar */
.cp-navbar{
  background: rgba(12, 26, 41, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.cp-brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-primary) !important;
  display: flex; align-items: center; gap: .55rem;
}
.cp-logo{
  width: 26px; height: 26px; color: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}
.cp-tagline{ color: var(--text-dim); font-size: .78rem; font-family: var(--font-mono); }

/* Hero */
.hero{ padding: 3.2rem 0 2.2rem; }
.hero-eyebrow{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: .5rem;
}
.hero-eyebrow::before{ content: ""; width: 22px; height: 1px; background: var(--accent); display: inline-block; }
.hero h1{
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  margin: .6rem 0 1rem;
}
.hero h1 .hl{ color: var(--accent); }
.hero p.lead{ color: var(--text-secondary); font-size: 1.05rem; max-width: 46ch; }

.hero-demo-input{
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: .75rem 1rem;
  border-radius: 8px;
}
.hero-demo-input:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-inset); color: var(--text-primary);
}

/* Pipeline schematic - elemen signature aplikasi */
.pipeline-schematic .stage{
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .7rem .6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-dim);
  transition: all .35s ease;
}
.pipeline-schematic .stage .stage-num{
  display:block; font-size: .65rem; color: var(--text-dim); margin-bottom: .15rem;
}
.pipeline-schematic .stage.active{
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-soft);
  box-shadow: 0 0 16px -2px var(--accent);
}
.pipeline-schematic .stage.fail{
  border-color: var(--danger); color: var(--text-primary); background: var(--danger-soft);
}
.pipeline-arrow{
  color: var(--text-dim); font-size: 1.1rem; align-self: center;
  transition: color .35s ease;
}
.pipeline-arrow.active{ color: var(--accent); }

/* Navigasi antar halaman - angka bermakna urutan pipeline compiler. */
.page-nav{ display: flex; flex-wrap: wrap; gap: .6rem; }
.page-nav-link{
  display: flex; align-items: center; gap: .6rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .5rem 1rem .5rem .6rem;
  color: var(--text-secondary) !important;
  font-size: .86rem;
  text-decoration: none !important;
  transition: all .2s ease;
}
.page-nav-link .num{
  font-family: var(--font-mono);
  font-size: .72rem;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-inset);
  color: var(--text-dim);
}
.page-nav-link:hover{ border-color: var(--border-strong); color: var(--text-primary) !important; }
.page-nav-link.active{ border-color: var(--accent); color: var(--text-primary) !important; background: var(--accent-soft); }
.page-nav-link.active .num{ background: var(--accent); color: #06231d; }

/* tiap modul dapat warna sendiri waktu aktif, biar cepat kelihatan lagi di
   modul mana tanpa harus baca teksnya dulu */
.page-nav-link.mod0.active{ border-color: var(--text-secondary); background: var(--bg-inset); }
.page-nav-link.mod2.active{ border-color: var(--accent-3); background: var(--accent-3-soft); }
.page-nav-link.mod2.active .num{ background: var(--accent-3); color: #1c0d3d; }
.page-nav-link.mod3.active{ border-color: var(--accent-2); background: var(--accent-2-soft); }
.page-nav-link.mod3.active .num{ background: var(--accent-2); color: #3a2400; }
.page-nav-link.mod4.active{ border-color: var(--accent-4); background: var(--accent-4-soft); }
.page-nav-link.mod4.active .num{ background: var(--accent-4); color: #04263f; }
.page-nav-link.mod5.active{ border-color: var(--text-secondary); background: var(--bg-inset); }

@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }
main.page-content{ animation: fadeIn .25s ease; }

.subtab-nav{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; }
.subtab-btn{
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 6px; padding: .38rem .8rem; font-size: .82rem; font-family: var(--font-mono);
  cursor: pointer; transition: all .2s ease;
}
.subtab-btn:hover{ color: var(--text-primary); border-color: var(--border-strong); }
.subtab-btn.active{ background: var(--accent); color: #06231d; border-color: var(--accent); font-weight: 600; }
.subtab-panel{ display: none; }
.subtab-panel.active{ display: block; animation: fadeIn .2s ease; }

/* Cards / Panels */
.cp-card{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.2rem;
}
.cp-card-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .9rem;
}
.cp-card-title .badge-soft{
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  color: var(--accent); background: var(--accent-soft);
  padding: .15rem .5rem; border-radius: 999px;
}
.cp-label{
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim); margin-bottom: .35rem; display:block;
}

.cp-input, .cp-textarea, textarea.cp-input{
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .9rem;
  padding: .6rem .8rem;
  border-radius: 7px;
  resize: vertical;
}
.cp-input:focus, .cp-textarea:focus{
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-inset); color: var(--text-primary);
}
.cp-textarea{ min-height: 130px; line-height: 1.5; }

.btn-cp{
  background: var(--accent);
  border: none;
  color: #06231d;
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1.3rem;
  border-radius: 7px;
  transition: all .18s ease;
}
.btn-cp:hover{ background: #6ee9d7; color: #06231d; transform: translateY(-1px); }
.btn-cp:active{ transform: translateY(0); }
.btn-cp-outline{
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: .82rem;
  padding: .4rem .9rem;
  border-radius: 7px;
}
.btn-cp-outline:hover{ border-color: var(--accent); color: var(--accent); }
.btn-icon{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-inset); border: 1px solid var(--border);
  color: var(--text-primary); display:flex; align-items:center; justify-content:center;
}
.btn-icon:hover{ border-color: var(--accent); color: var(--accent); }
.btn-icon:disabled{ opacity: .35; }

.preset-chip{
  font-family: var(--font-mono); font-size: .74rem;
  background: var(--bg-inset); border: 1px dashed var(--border-strong);
  color: var(--text-secondary); padding: .28rem .65rem; border-radius: 6px;
  cursor: pointer; margin: .2rem .3rem .2rem 0; display: inline-block;
}
.preset-chip:hover{ border-color: var(--accent); color: var(--accent); }

/* Result banners */
.result-banner{
  border-radius: 8px; padding: .8rem 1rem; font-family: var(--font-mono);
  font-size: .9rem; display:flex; align-items:center; gap:.6rem; margin-bottom: 1rem;
}
.result-banner.ok{ background: var(--success-soft); border: 1px solid var(--success); color: var(--success); }
.result-banner.bad{ background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); }
.result-banner .value{ margin-left: auto; color: var(--text-primary); }

.hero-log{ display:flex; flex-direction:column; gap:.4rem; }
.hero-log .step{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:.8rem; color:var(--text-secondary); line-height:1.4;
}
.hero-log .step .n{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--border-strong); display:flex; align-items:center;
  justify-content:center; font-size:.68rem; color:var(--text-dim);
}
.hero-log .step.ok .n{ border-color: var(--accent); color: var(--accent); }
.hero-log .step.fail .n{ border-color: var(--danger); color: var(--danger); }

.explain-box{
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .9rem;
  font-size: .82rem; color: var(--text-secondary);
}
.explain-box:empty{ display: none; }

.error-box{
  background: var(--danger-soft); border: 1px solid var(--danger);
  color: #ffd7d9; border-radius: 8px; padding: .7rem 1rem; font-size: .88rem;
  font-family: var(--font-mono);
}

/* Token stream */
.token-stream{ display:flex; flex-wrap:wrap; gap:.4rem; }
.token-chip{
  font-family: var(--font-mono); font-size: .82rem;
  border-radius: 6px; padding: .32rem .6rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-inset); color: var(--text-primary);
  cursor: default; position: relative;
}
.token-chip small{ color: var(--text-dim); display:block; font-size: .62rem; margin-top: 1px; }
.token-chip.err{ border-color: var(--danger); color: var(--danger); }
.token-chip.hover-active{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Automaton SVG */
.automaton-view{
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-width: 100%;
}
.automaton-view svg{ display:block; width:auto; height:auto; margin: 0; }
.tree-center{ display: flex; }
.tree-center svg{ margin: auto; }
.fa-node-circle{ fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1.6; transition: all .25s ease;}
.fa-node-ring-final{ stroke: var(--accent-2); stroke-width: 2.4; }
.fa-node.active .fa-node-circle{ fill: var(--accent-soft); stroke: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.fa-node.active .fa-node-ring-final{ stroke: var(--accent); }
.fa-node-label{ fill: var(--text-primary); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.fa-edge-path{ fill:none; stroke: var(--border-strong); stroke-width: 1.4; }
.fa-edge-path.active{ stroke: var(--accent); stroke-width: 2.4; filter: drop-shadow(0 0 4px var(--accent)); }
.fa-edge-label{ fill: var(--text-secondary); font-family: var(--font-mono); font-size: 10.5px; text-anchor: middle; }
.fa-edge-label.active{ fill: var(--accent); }
.fa-start-arrow{ stroke: var(--accent-3); stroke-width: 1.7; fill: none; }

/* Legenda kecil di bawah tiap diagram, biar tidak perlu nebak arti warna/simbol */
.fa-legend{
  display:flex; flex-wrap:wrap; gap: .9rem; align-items:center;
  padding: .55rem .9rem; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-secondary); font-family: var(--font-mono);
}
.legend-swatch{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  margin-right: .35rem; vertical-align: middle; border: 1.5px solid var(--border-strong);
}
.swatch-normal{ background: var(--bg-elevated); }
.swatch-final{ background: var(--bg-elevated); border-color: var(--accent-2); border-width: 2px; }
.swatch-active{ background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 5px var(--accent); }

/* Stepper */
.stepper-bar{ display:flex; align-items:center; gap:.7rem; margin: .9rem 0; }
.stepper-status{ font-family: var(--font-mono); font-size: .82rem; color: var(--text-secondary); }

/* Pohon penurunan - sekarang digambar SVG asli, bukan trik border CSS */
.tree-view{ overflow-x: auto; padding: .8rem 0; background: var(--bg-inset); border-radius: 8px; max-width: 100%; }
.tree-view svg{ display:block; width:auto; height:auto; margin: 0; }
.tree-edge{ fill:none; stroke: var(--border-strong); stroke-width: 1.5; }
.tree-node rect{ fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1.5; }
.tree-node.leaf rect{ fill: var(--accent-2-soft); stroke: var(--accent-2); }
.tree-node text{ fill: var(--text-primary); font-family: var(--font-mono); font-size: 12px; text-anchor: middle; }
.tree-node.leaf text{ fill: var(--accent-2); font-weight: 600; }

/* Table / grid results */
.cp-table{ width:100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .82rem; }
.cp-table th, .cp-table td{ border: 1px solid var(--border); padding: .45rem .6rem; text-align:left; }
.cp-table th{ background: var(--bg-inset); color: var(--text-dim); font-weight: 500; text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; }
.cp-table td{ color: var(--text-primary); }
.cp-table tr.hl td{ background: var(--accent-soft); }

.cyk-table{ border-collapse: collapse; font-family: var(--font-mono); font-size: .74rem; }
.cyk-table td{
  border: 1px solid var(--border); width: 74px; height: 46px; text-align:center; vertical-align: middle;
  color: var(--text-secondary); padding: 2px 4px;
}
.cyk-table td.filled{ color: var(--accent); background: var(--accent-soft); }
.cyk-table td.accept{ color: var(--bg); background: var(--accent); font-weight: 700; }
.cyk-table td.head{ background: var(--bg-inset); color: var(--text-dim); font-weight: 600; }

.grammar-block{
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px;
  padding: .9rem 1.1rem; font-family: var(--font-mono); font-size: .85rem; line-height: 1.85;
  color: var(--text-primary); white-space: pre-wrap;
}
.grammar-block-scroll{ max-height: 320px; overflow-y: auto; word-break: break-word; }
.grammar-step-title{
  font-family: var(--font-mono); font-size: .78rem; color: var(--accent);
  margin: 1.1rem 0 .4rem; display:flex; align-items:center; gap:.5rem;
}
.grammar-step-title::before{ content:"▸"; }

.derivation-line{ font-family: var(--font-mono); font-size: .85rem; padding: .18rem 0; color: var(--text-secondary); }
.derivation-line .arrow{ color: var(--text-dim); margin-right:.5rem; }
.derivation-line:last-child{ color: var(--accent); font-weight: 600; }

.chomsky-table td, .chomsky-table th{ vertical-align: top; }

/* kotak penjelasan singkat, dipakai di beberapa tempat yang berpotensi
   bikin bingung kalau cuma dikasih tabel/diagram tanpa konteks */
.hint-box{
  background: var(--bg-inset); border: 1px dashed var(--border-strong);
  border-radius: 8px; padding: .6rem .85rem; font-size: .8rem;
  color: var(--text-secondary); margin-bottom: .9rem;
}
.hint-box b{ color: var(--text-primary); }

footer.cp-footer{
  border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.8rem 0;
  color: var(--text-dim); font-size: .82rem; font-family: var(--font-mono);
}

/* Header di awal tiap halaman modul, isinya judul + penjelasan singkat */
.page-header{ margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.page-header h2{ font-size: 1.7rem; font-weight: 700; margin: .5rem 0 .8rem; }

/* Kartu navigasi modul di beranda */
.module-card-link{ text-decoration:none !important; display:block; height:100%; }
.module-card{ transition: all .2s ease; border-left: 3px solid var(--border-strong); }
.module-card:hover{ transform: translateY(-2px); border-color: var(--accent); }
.module-card .cp-card-title{ display:flex; align-items:center; gap:.6rem; }
.module-card .num{
  font-family: var(--font-mono); font-size:.75rem; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background: var(--bg-inset); color: var(--text-dim);
}
.module-card.mod1:hover{ border-left-color: var(--accent); }
.module-card.mod2:hover{ border-left-color: var(--accent-3); }
.module-card.mod3:hover{ border-left-color: var(--accent-2); }
.module-card.mod4:hover{ border-left-color: var(--accent-4); }
.module-card-cta{
  font-family: var(--font-mono); font-size:.78rem; color: var(--accent);
  display:inline-block; margin-top:.4rem;
}

@media (max-width: 767px){
  .hero{ padding: 2rem 0 1.2rem; }
  .pipeline-schematic{ flex-direction: column; }
}

::-webkit-scrollbar{ height: 8px; width: 8px; }
::-webkit-scrollbar-track{ background: var(--bg-inset); }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 4px; }