/* edu.css — Styles for Mode Belajar features */

/* KaTeX block math */
.edu-math-block {
  display: block;
  overflow-x: auto;
  margin: .8em 0;
  padding: 8px 0;
  text-align: center;
}
.edu-math-inline .katex { font-size: 1.05em; }
.edu-math-block .katex-display { margin: 0; }
.edu-math-block .katex-display > .katex { text-align: center; }

/* Mermaid */
.edu-mermaid {
  margin: .8em 0;
  overflow-x: auto;
  background: #1a1a2e;
  border-radius: 12px;
  padding: 12px;
  min-height: 60px;
}
.edu-mermaid.rendered svg { max-width: 100%; height: auto; }
.edu-mermaid.mermaid-err {
  color: #ff6b6b;
  white-space: pre-wrap;
  font-size: 13px;
  font-family: "Mono", monospace;
}

/* Graph */
.edu-graph {
  margin: .8em 0;
  background: #1a1a2e;
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
  min-height: 200px;
}
.edu-graph.rendered { padding: 0; }
.edu-graph .function-plot { border-radius: 12px; }
.edu-graph svg { display: block; }
.edu-graph .x.axis path, .edu-graph .y.axis path,
.edu-graph .x.axis line, .edu-graph .y.axis line { stroke: #555; }
.edu-graph .x.axis text, .edu-graph .y.axis text { fill: #aaa; font-size: 11px; }
.edu-graph .origin { stroke: #666; }

/* Quiz */
.edu-quiz {
  margin: .8em 0;
  background: #1a2a1a;
  border: 1px solid #2a3a2a;
  border-radius: 12px;
  padding: 14px;
}
.quiz-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--acc, #c6ff3d);
}
.quiz-q { margin-bottom: 14px; }
.quiz-qtext { margin-bottom: 8px; font-size: 15px; }
.quiz-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: #2a3a2a;
  border: 1px solid #3a4a3a;
  color: var(--tx, #eee);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.quiz-opt:hover { background: #354535; }
.quiz-q.done .quiz-opt { cursor: default; opacity: .7; }
.quiz-q.done .quiz-opt:hover { background: #2a3a2a; }
.quiz-opt.correct {
  background: #1a4a1a !important;
  border-color: #4caf50 !important;
  color: #8dff8d !important;
  opacity: 1 !important;
}
.quiz-opt.wrong {
  background: #4a1a1a !important;
  border-color: #f44336 !important;
  color: #ffc9c9 !important;
  opacity: 1 !important;
}
.quiz-exp {
  margin-top: 8px;
  padding: 10px 12px;
  background: #223322;
  border-radius: 10px;
  font-size: 13px;
  color: #cde;
  line-height: 1.5;
}
.quiz-score {
  margin-top: 10px;
  padding: 12px;
  background: #1a3a1a;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
}

/* Simulasi & grafik (iframe sandbox) */
.edu-sim, .edu-graph.rendered {
  position: relative;
  margin: .8em 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0e14;
  border: 1px solid #2c2c3a;
  min-height: 0;
  padding: 0;
}
.edu-sim iframe, .edu-graph iframe { display: block; width: 100%; border: 0; background: #0e0e14; }
.edu-sim:not(.ready) iframe, .edu-graph:not(.ready) iframe { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.edu-sim.ready .edu-prep, .edu-graph.ready .edu-prep { display: none; }

/* Kartu "Sedang menyiapkan…" (saat stream & saat iframe dimuat) */
.edu-prep {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 120px; padding: 18px;
  color: #b9b9c8; font-size: 14px;
  background: linear-gradient(110deg, #15151f 30%, #1f1f2d 50%, #15151f 70%);
  background-size: 200% 100%;
  animation: edu-shimmer 1.6s linear infinite;
  border-radius: 12px;
}
.edu-wait { margin: .8em 0; border: 1px solid #2c2c3a; border-radius: 12px; overflow: hidden; }
.edu-prep .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #3a3a4a; border-top-color: #c6ff3d;
  animation: edu-spin .8s linear infinite;
}
@keyframes edu-spin { to { transform: rotate(360deg); } }
@keyframes edu-shimmer { to { background-position: -200% 0; } }

/* Error fallback */
.edu-err {
  color: #ff6b6b;
  font-size: 13px;
  padding: 8px;
}

/* Shortcut buttons */
.acts button { white-space: nowrap; }