/* ============= LAB MAYA — MENGENAL JARING-JARING KUBUS ============= */
:root{
  --bg:#f4f7fb;
  --ink:#0f2137;
  --ink-soft:#3a4a63;
  --muted:#6b7c93;
  --line:#e3e8f0;
  --card:#ffffff;
  --brand:#1f7ae0;
  --brand-2:#0b57c2;
  --accent:#f6a821;
  --accent-2:#e6961a;
  --green:#22a06b;
  --pink:#e14b8a;
  --purple:#7a5cff;
  --orange:#ef7a1a;
  --red:#e04b4b;
  --shadow: 0 10px 30px -12px rgba(15,33,55,.18);
  --shadow-lg: 0 22px 60px -20px rgba(15,33,55,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 90% -10%, #dfeaff 0%, transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, #ffe9c8 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  font-size:18px;
  line-height:1.55;
}

/* ---------- Topbar ---------- */
.topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:18px 40px;
  background:linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 0 rgba(15,33,55,.03);
}
.logo-left img{ height:78px; width:auto; display:block; }
.logo-right{ display:flex; align-items:center; gap:22px; }
.logo-right img{ height:64px; width:auto; display:block; object-fit:contain; }
.title-block{ text-align:center }
.title-block .eyebrow{
  display:inline-block;
  font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--brand);
  background:#e6f0ff; padding:6px 14px; border-radius:999px;
}
.title-block h1{
  margin:8px 0 2px; font-size:36px; font-weight:800; letter-spacing:-.5px;
  background:linear-gradient(90deg,#0b57c2,#1f7ae0 55%,#ef7a1a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title-block .subtitle{ color:var(--muted); font-size:16px; font-weight:600 }

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:10px;
  padding:14px 40px; overflow-x:auto;
  background:#ffffffcc; backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.tab{
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:14px;
  background:#fff; border:2px solid var(--line);
  font: inherit; color:var(--ink-soft); cursor:pointer;
  transition: all .2s ease;
  font-weight:700; white-space:nowrap;
}
.tab .num{
  font-size:12px; font-weight:800; letter-spacing:1px;
  color:#fff; background:var(--brand);
  padding:4px 8px; border-radius:8px;
}
.tab .lbl{ font-size:16px }
.tab:hover{ transform: translateY(-1px); border-color:#c9d6ea }
.tab.active{
  background:linear-gradient(135deg,#0b57c2,#1f7ae0);
  color:#fff; border-color:transparent;
  box-shadow: 0 10px 24px -12px rgba(31,122,224,.7);
}
.tab.active .num{ background:#fff; color:var(--brand-2) }
.tab.locked{ opacity:.55; cursor:not-allowed; background:#f2f4f8 }
.tab.locked .num{ background:#9aa7bd }
.tab .lock{ font-size:14px }
.tab:not(.locked) .lock{ display:none }

/* ---------- Stage / Panels ---------- */
.stage{ padding: 32px 40px 64px; max-width:1600px; margin: 0 auto; }
.panel{ display:none; animation: fadeUp .35s ease }
.panel.active{ display:block }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px) }
  to  { opacity:1; transform:none }
}
.panel-head{ margin-bottom:22px }
.tag{
  display:inline-block; font-size:13px; font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; margin-bottom:10px;
}
.tag-blue{ background:#e6f0ff; color:#0b57c2 }
.tag-orange{ background:#fff1de; color:#c8630b }
.tag-green{ background:#dff5ea; color:#12764c }
.tag-purple{ background:#ece6ff; color:#4b34c8 }
.tag-pink{ background:#ffe4ef; color:#b53071 }
.panel h2{ font-size:32px; margin:0 0 6px; letter-spacing:-.4px }
.lead{ color:var(--ink-soft); font-size:18px; max-width:900px; margin:6px 0 0 }

/* ---------- Tujuan ---------- */
.goal-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
  margin-top:14px;
}
.goal-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.goal-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg) }
.goal-card::after{
  content:""; position:absolute; inset:auto -30px -30px auto; width:120px; height:120px;
  background: radial-gradient(circle at center, rgba(31,122,224,.18), transparent 70%);
  border-radius:50%;
}
.goal-num{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,#1f7ae0,#0b57c2); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:20px;
  box-shadow: 0 8px 20px -10px rgba(31,122,224,.7);
}
.goal-card h3{ margin:14px 0 6px; font-size:20px }
.goal-card p{ margin:0; color:var(--ink-soft) }

.cta-row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap }

/* ---------- Panduan ---------- */
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px; box-shadow:var(--shadow);
}
.step-badge{
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg,#ef7a1a,#f6a821); color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:22px;
  box-shadow:0 10px 24px -12px rgba(239,122,26,.6);
}
.steps h3{ margin:0 0 4px; font-size:20px }
.steps p{ margin:0; color:var(--ink-soft) }

.callout{
  margin-top:20px; display:grid; grid-template-columns:auto 1fr; gap:16px;
  background:linear-gradient(180deg,#fff8e6,#fff2d1); border:1px solid #f6d99a;
  border-radius:var(--radius); padding:18px 22px; color:#5c3d05;
}
.callout-icon{ font-size:28px }

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:0; cursor:pointer; font: inherit; font-weight:800;
  padding:14px 22px; border-radius:14px; transition:all .2s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{
  background:linear-gradient(135deg,#0b57c2,#1f7ae0); color:#fff;
  box-shadow: 0 14px 28px -14px rgba(11,87,194,.7);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(11,87,194,.75) }
.btn-outline{
  background:#fff; color:var(--ink); border:2px solid var(--line);
}
.btn-outline:hover{ border-color:#a9bcd9; background:#f7faff }

/* ---------- Simulasi ---------- */
.sim-layout{
  display:grid; grid-template-columns: 360px 1fr; gap:24px; align-items:stretch;
}
.net-picker{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); max-height:640px; overflow-y:auto;
}
.net-picker h3{ margin:6px 4px 12px; font-size:16px; color:var(--ink-soft); letter-spacing:.5px; text-transform:uppercase }
.net-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px }
.net-card{
  background:#f7faff; border:2px solid var(--line); border-radius:14px;
  padding:8px; cursor:pointer; transition: all .18s ease;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.net-card:hover{ border-color:#8ab5ec; transform: translateY(-2px) }
.net-card.active{
  border-color:#1f7ae0; background: #e9f2ff;
  box-shadow: 0 10px 22px -12px rgba(31,122,224,.65);
}
.net-card svg{ width:100%; height:auto; display:block }
.net-card .lbl{ font-size:12px; font-weight:800; color:var(--brand-2) }

.sim-stage{
  background:linear-gradient(180deg,#ffffff,#f5f9ff);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:14px;
}
.scene-wrap{
  flex:1; min-height:520px;
  background:
    radial-gradient(600px 220px at 50% 90%, rgba(11,87,194,.10), transparent 60%),
    linear-gradient(180deg, #eef4ff 0%, #ffffff 60%);
  border-radius:14px; border:1px dashed #cfdcf1;
  display:grid; place-items:center; overflow:hidden;
  perspective: 1400px;
}
.scene{
  width: 360px; height: 360px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-32deg);
  transition: transform .6s ease;
}
.cube{ width:100%; height:100%; position:relative; transform-style:preserve-3d }
.face{
  position:absolute; width:200px; height:200px;
  left:50%; top:50%; margin:-100px 0 0 -100px;
  border:2px solid #0b57c2;
  background: linear-gradient(135deg, rgba(31,122,224,.18), rgba(31,122,224,.32));
  color:#0b3a7a; font-weight:800; letter-spacing:1px;
  display:grid; place-items:center; text-transform:uppercase; font-size:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  transform-style: preserve-3d;
  backface-visibility: visible;
  border-radius:6px;
}
.f-top   { background: linear-gradient(135deg,#fde3b8,#f6a821); color:#6b3d00; border-color:#c8630b; }
.f-bottom{ background: linear-gradient(135deg,#c6ead8,#22a06b); color:#0a4a2c; border-color:#12764c; }
.f-front { background: linear-gradient(135deg,#c9dfff,#1f7ae0); color:#083a86; border-color:#0b57c2; }
.f-back  { background: linear-gradient(135deg,#ffd6e5,#e14b8a); color:#6b1740; border-color:#b53071; }
.f-left  { background: linear-gradient(135deg,#e0d6ff,#7a5cff); color:#2c1a86; border-color:#4b34c8; }
.f-right { background: linear-gradient(135deg,#ffd4b8,#ef7a1a); color:#6a2f00; border-color:#c8560b; }

.sim-controls{
  display:grid; grid-template-columns: 1fr auto; gap:14px 20px; align-items:center;
  padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:14px;
}
.slider-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
}
.slider-row label{ font-weight:800 }
.slider-row input[type="range"]{
  -webkit-appearance:none; width:100%; height:8px; border-radius:999px;
  background:linear-gradient(90deg,#1f7ae0 var(--pct,0%), #e3e8f0 var(--pct,0%));
  outline:none;
}
.slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#0b57c2; border:3px solid #fff; box-shadow: 0 4px 10px rgba(11,87,194,.6);
  cursor:pointer;
}
#foldVal{ font-weight:800; color:var(--brand-2); min-width:44px; text-align:right }
.btn-row{ display:flex; gap:8px; grid-column: 1 / -1; flex-wrap:wrap }
.info-pill{
  grid-column: 1 / -1;
  background:#f2f7ff; color:#0b3a7a; border:1px dashed #b7cef0;
  padding:10px 14px; border-radius:12px; font-weight:700;
}

/* ---------- Materi ---------- */
.mat-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px;
}
.mat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.mat-card.wide{ grid-column: span 3 }
.mat-card h3{ margin:0 0 10px; font-size:22px }
.mat-card ul{ margin:0; padding-left:20px; color:var(--ink-soft) }
.mat-card ul li{ margin:6px 0 }
.formula{
  background:linear-gradient(135deg,#eef4ff,#dfeaff);
  border:1px solid #cfdcf1; border-radius:12px;
  padding:12px 16px; margin:8px 0; font-weight:700; color:#0b3a7a;
}
.formula span{ display:block; font-size:22px; margin-top:4px; letter-spacing:.5px }
.muted{ color:var(--muted); font-size:14px }
.klas{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top:10px }
.klas-item{
  background:linear-gradient(135deg,#fff, #f4f8ff);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.klas-item b{ color:var(--brand-2); font-size:18px }
.klas-item span{ color:var(--ink-soft); font-weight:600 }

/* ---------- Latihan ---------- */
.quiz{ display:grid; gap:16px }
.q-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow);
}
.q-card .q-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.q-num{
  background:linear-gradient(135deg,#e14b8a,#b53071); color:#fff;
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  font-weight:800;
}
.q-title{ font-size:19px; font-weight:800 }
.q-body p{ margin:0 0 12px; color:var(--ink) }
.opts{ display:grid; gap:8px }
.opt{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:2px solid var(--line); border-radius:12px;
  cursor:pointer; background:#fff; transition:all .15s ease; font-weight:600;
}
.opt:hover{ border-color:#c9d6ea; background:#fafcff }
.opt input{ accent-color: var(--brand); width:20px; height:20px }
.opt.correct{ border-color:#22a06b; background:#e8f7ee }
.opt.wrong  { border-color:#e04b4b; background:#fce9e9 }
.q-card.answered{ border-color:#c9d6ea }
.q-explain{
  margin-top:12px; padding:10px 12px; border-radius:10px;
  background:#eef4ff; color:#0b3a7a; font-weight:600; display:none;
}
.q-card.answered .q-explain{ display:block }

.quiz-actions{
  display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap;
}
.score{
  margin-left:auto; padding:12px 18px; background:#fff; border:2px solid var(--line);
  border-radius:12px; font-weight:800; color:var(--brand-2);
}

/* Mini SVG net inside quiz */
.q-svg{ width:220px; height:auto; display:block; margin:6px 0 12px }

/* ---------- Pengembang ---------- */
.dev-institution{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  background:linear-gradient(135deg,#ffffff,#f2f7ff);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; box-shadow:var(--shadow);
}
.dev-institution .dev-logo{ height:78px; width:auto; display:block }
.dev-institution h3{ margin:0 0 4px; font-size:22px; color:var(--brand-2) }
.dev-institution .dev-sub{ margin:2px 0; color:var(--ink-soft); font-weight:600 }

.dev-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top:20px;
}
.dev-block{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow);
}
.dev-block-title{
  display:inline-block;
  font-weight:800; font-size:14px; letter-spacing:1.5px; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.dev-list{ margin:0; padding-left:22px; display:grid; gap:10px }
.dev-list li{ line-height:1.4 }
.dev-list li b{ display:block; color:var(--ink); font-size:16px }
.dev-list li span{ color:var(--muted); font-size:14px; font-weight:600 }
.dev-author{ grid-column: 1 / -1; background:linear-gradient(135deg,#fffaf1,#fff) }
.dev-author-card{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;
  padding:8px 4px;
}
.dev-author-card h4{ margin:0; font-size:22px; color:var(--brand-2) }
.dev-author-card p{ margin:4px 0 0; color:var(--ink-soft); font-weight:700 }
.dev-avatar{
  width:88px; height:88px; border-radius:22px;
  background:linear-gradient(135deg,#f6a821,#ef7a1a);
  display:grid; place-items:center; font-size:46px;
  box-shadow: 0 14px 28px -14px rgba(239,122,26,.7);
}
.footer-note{ margin-top:20px; color:var(--muted); text-align:center }

/* ---------- Responsive-ish for smaller flat panels ---------- */
@media (max-width: 1200px){
  .goal-grid{ grid-template-columns: repeat(2,1fr) }
  .mat-grid{ grid-template-columns: repeat(2,1fr) }
  .mat-card.wide{ grid-column: span 2 }
  .sim-layout{ grid-template-columns: 300px 1fr }
}
@media (max-width: 860px){
  .topbar{ grid-template-columns:1fr; text-align:center }
  .logo-right{ justify-content:center }
  .sim-layout{ grid-template-columns:1fr }
  .goal-grid, .mat-grid{ grid-template-columns:1fr }
  .klas{ grid-template-columns: repeat(2,1fr) }
  .dev-grid{ grid-template-columns:1fr }
}