/* ============================================================
   SigmaExam — gaya khusus halaman Ujian Online (CBT)
   Dimuat setelah sigma.css. Mewarisi warna, font, header,
   dan footer dari sistem desain SIGMA.
   ============================================================ */

:root{
  --soft-blue:#E6F1FF;
  --ok:#19bf63;      --ok-soft:#E3F7EC;
  --warn:#f08a24;    --warn-soft:#FDF0E1;
  --err:#e5484d;     --err-soft:#FCE9EA;
  --info:#1799d6;
  --side:#0c2858;    --side-2:#061830;
  --on-side:#d8e6f7; --side-muted:#8fa9c9; --side-line:#1d3f70;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --shadow-x:0 1px 2px rgba(12,40,88,.05),0 12px 32px -14px rgba(12,40,88,.22);
}

.mono{font-family:var(--f-mono)}

/* ---------- label khas CBT: lingkaran lembar jawab ---------- */
.eyebrow.ljk{
  background:none; padding:0; border-radius:0; text-transform:uppercase;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; font-weight:600;
  color:var(--blue); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow.ljk::before{content:""; width:11px; height:11px; border-radius:50%; border:2px solid currentColor}
.dark-band .eyebrow.ljk{color:#7cc0ff}

.sec-head{display:grid; gap:13px; max-width:730px; margin-bottom:46px}
.sec-head h2{margin:0}
.block{padding-block:92px}
@media(max-width:640px){.block{padding-block:60px}}

/* ---------- hero ---------- */
.ehero{padding-block:70px 54px}
.ehero .wrap{display:grid; grid-template-columns:1fr 1.06fr; gap:54px; align-items:center}
.ehero h1{font-size:clamp(34px,5.4vw,60px); line-height:1.06; margin:16px 0 20px; color:var(--navy)}
.ehero h1 em{font-style:normal; color:var(--blue)}
.ehero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.ehero-meta{display:flex; gap:20px; flex-wrap:wrap; margin-top:32px; font-size:13px; color:var(--muted)}
.ehero-meta span{display:flex; align-items:center; gap:7px}
.ehero-meta i{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none}
@media(max-width:940px){.ehero .wrap{grid-template-columns:1fr} .ehero{padding-block:40px 30px}}

/* ---------- mock layar ujian ---------- */
.screen{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-x); overflow:hidden; min-width:0}
.screen-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13px}
.screen-top .t{font-weight:700; color:var(--head)}
.screen-top .s{color:var(--muted); font-size:12px}
.timer{font-family:var(--f-mono); font-size:15px; background:var(--err-soft); color:var(--err); padding:6px 12px; border-radius:8px; white-space:nowrap; font-weight:600}
.exam{display:grid; grid-template-columns:1fr 168px}
.q{padding:22px; border-right:1px solid var(--line); min-width:0}
.q-no{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; gap:10px}
.q-text{font-size:16px; margin-block:12px 18px; color:var(--ink)}
.opts{display:grid; gap:9px}
.opt{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; font-size:15px; background:none; color:var(--ink); font-family:inherit; text-align:left; cursor:pointer; transition:border-color .15s, background .15s}
.opt:hover{border-color:var(--blue)}
.opt .b{width:26px; height:26px; flex:none; border-radius:50%; border:1.5px solid var(--muted); display:grid; place-items:center; font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--blue); background:var(--soft-blue)}
.opt[aria-pressed="true"] .b{background:var(--blue); border-color:var(--blue); color:#fff}
.q-foot{display:flex; justify-content:space-between; margin-top:18px; gap:8px; flex-wrap:wrap}
.chip-btn{font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:8px; border:1px solid var(--line); background:var(--soft); color:var(--muted)}
.chip-btn.ragu{color:var(--warn); border-color:rgba(240,138,36,.45); background:var(--warn-soft)}
.grid-side{padding:18px 16px}
.grid-side .lbl{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:10px}
.bubbles{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.bub{aspect-ratio:1; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-family:var(--f-mono); font-size:10px; color:var(--muted)}
.bub.done{background:var(--blue); border-color:var(--blue); color:#fff}
.bub.ragu{background:var(--warn); border-color:var(--warn); color:#fff}
.bub.now{border-color:var(--info); color:var(--info); border-width:2px}
.legend{display:grid; gap:5px; margin-top:14px; font-size:11px; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line); flex:none}
@media(max-width:560px){.exam{grid-template-columns:1fr} .q{border-right:0; border-bottom:1px solid var(--line)} .bubbles{grid-template-columns:repeat(10,1fr)}}

/* ---------- pita angka ---------- */
.facts{border-block:1px solid var(--line); background:#fff}
.facts .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.fact{padding:26px 20px; border-left:1px solid var(--line)}
.fact:first-child{border-left:0; padding-left:0}
.fact b{display:block; color:var(--head); font-size:29px; font-weight:800; line-height:1; letter-spacing:-.5px}
.fact span{color:var(--muted); font-size:13.5px}
@media(max-width:760px){.facts .wrap{grid-template-columns:1fr 1fr} .fact{padding:20px 14px} .fact:nth-child(3){border-left:0; padding-left:0} .fact:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- alur 4 langkah ---------- */
.steps4{display:grid; grid-template-columns:repeat(4,1fr); position:relative}
.steps4 .step{padding:0 24px 0 0; position:relative}
.step-dot{display:flex; align-items:center; margin-bottom:18px}
.step-dot b{width:44px; height:44px; flex:none; border-radius:50%; border:2px solid var(--blue); color:var(--blue); display:grid; place-items:center; font-family:var(--f-mono); font-size:14px; background:var(--soft); font-weight:700}
.steps4 .step:first-child .step-dot b{background:var(--blue); color:#fff}
.step-dot::after{content:""; height:2px; flex:1; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.steps4 .step:last-child .step-dot::after{display:none}
.steps4 .step h3{font-size:18px}
.steps4 .step p{color:var(--muted); font-size:14.5px; margin-top:8px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.chip{font-family:var(--f-mono); font-size:10.5px; padding:4px 9px; border-radius:6px; background:var(--soft-blue); color:var(--blue); font-weight:600}
@media(max-width:860px){.steps4{grid-template-columns:1fr 1fr; row-gap:36px}}
@media(max-width:520px){.steps4{grid-template-columns:1fr} .step-dot::after{display:none}}

/* ---------- tipe soal ---------- */
.types{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.type{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.type h3{font-size:17px}
.type p{color:var(--muted); font-size:13.5px}
.type .demo{margin-top:auto; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px}
.mini{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--muted); display:inline-grid; place-items:center; font-family:var(--f-mono); font-size:10px; color:var(--muted)}
.mini.on{background:var(--blue); border-color:var(--blue); color:#fff}
.mini.sq{border-radius:5px}
.tf{padding:3px 11px; border-radius:999px; border:1.5px solid var(--line); font-size:12px; font-weight:600; color:var(--muted)}
.tf.on{border-color:var(--ok); color:var(--ok); background:var(--ok-soft)}
.match{display:grid; grid-template-columns:1fr 36px 1fr; gap:6px 0; width:100%; font-size:12px; align-items:center}
.match span{padding:4px 8px; border:1px solid var(--line); border-radius:6px}
.match svg{width:36px; height:22px; overflow:visible}
.match path{stroke:var(--info); stroke-width:1.5; fill:none}
.essay{width:100%; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:8px 10px; line-height:1.5}
.essay::after{content:"|"; color:var(--blue); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ai{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); background:var(--soft-blue); padding:3px 9px; border-radius:999px; align-self:flex-start; font-weight:600}
.short{display:flex; gap:8px; align-items:center; width:100%}
.short em{flex:1; font-style:normal; border-bottom:1.5px solid var(--blue); padding:2px 4px; font-family:var(--f-mono); font-size:12px; color:var(--ink)}
@media(max-width:860px){.types{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.types{grid-template-columns:1fr}}

/* ---------- koreksi ---------- */
.kor{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.kor-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:12px; min-width:0}
.kor-card h3{font-size:17px}
.kor-card p{color:var(--muted); font-size:13.5px}
.kor-demo{margin-top:auto; border:1px solid var(--line); border-radius:10px; padding:12px; font-size:13px; background:var(--soft); display:grid; gap:8px}
.kor-demo .row{display:flex; justify-content:space-between; gap:8px; align-items:center; padding:0; border:0; grid-template-columns:none}
.score{font-weight:800; font-size:21px; font-variant-numeric:tabular-nums; color:var(--head)}
.bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--ok)}
.hint{font-size:12px; color:var(--muted); border-left:2px solid var(--info); padding-left:9px; line-height:1.55}
@media(max-width:860px){.kor{grid-template-columns:1fr}}

/* ---------- keamanan (pita gelap) ---------- */
.dark-band{background:var(--side); color:var(--on-side)}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band .lead{color:var(--side-muted)}
.sec-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:start}
.guards{display:grid; grid-template-columns:1fr 1fr; gap:26px 32px; margin-top:38px}
.guard h3{font-size:16px; display:flex; gap:10px; align-items:center}
.guard h3::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(8,104,232,.3); flex:none}
.guard p{font-size:13.5px; margin-top:6px; color:var(--side-muted)}
.log{background:var(--side-2); border:1px solid var(--side-line); border-radius:16px; padding:20px; font-family:var(--f-mono); font-size:12.5px; min-width:0}
.log-h{display:flex; justify-content:space-between; gap:10px; color:var(--side-muted); margin-bottom:14px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.log-row{display:grid; grid-template-columns:62px 1fr auto; gap:10px; padding:9px 0; border-top:1px solid var(--side-line); align-items:center}
.log-row time{color:var(--side-muted)}
.lv{padding:2px 8px; border-radius:5px; font-size:11px; white-space:nowrap}
.lv.hi{background:var(--err); color:#fff}
.lv.md{background:var(--warn); color:#fff}
.lv.lo{background:var(--side-line); color:var(--on-side)}
@media(max-width:900px){.sec-grid{grid-template-columns:1fr; gap:36px}}
@media(max-width:520px){.guards{grid-template-columns:1fr} .log-row{grid-template-columns:52px 1fr} .log-row .lv{grid-column:2; justify-self:start}}

/* ---------- monitoring & analisa ---------- */
.ana{display:grid; grid-template-columns:.85fr 1.15fr; gap:46px; align-items:center}
.checks{display:grid; gap:18px; margin-top:26px}
.checks div{display:grid; grid-template-columns:22px 1fr; gap:12px}
.checks svg{width:22px; height:22px; margin-top:3px}
.checks b{display:block; font-weight:700; color:var(--head)}
.checks span{color:var(--muted); font-size:14.5px}
.dash{padding:20px}
.dash-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.dash-top h3{font-size:17px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px}
.kpi{border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.kpi small{display:block; font-size:11px; color:var(--muted)}
.kpi b{color:var(--head); font-size:23px; font-weight:800; font-variant-numeric:tabular-nums}
.chart-wrap{overflow-x:auto}
.chart text{font-family:var(--f-mono); font-size:10px; fill:var(--muted)}
.chart .kkm{stroke:var(--err); stroke-dasharray:4 4; stroke-width:1.5}
.chart .kkm-t{fill:var(--err)}
.chart .gl{stroke:var(--line)}
.chart .under{fill:var(--warn)}
.chart .over{fill:var(--blue)}
.tbl{width:100%; border-collapse:collapse; font-size:13px; margin-top:14px}
.tbl td{padding:8px 4px; border-top:1px solid var(--line)}
.tbl td:last-child{text-align:right}
.badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
.badge.ok{background:var(--ok-soft); color:#0f7a40}
.badge.go{background:var(--soft-blue); color:var(--blue)}
.badge.al{background:var(--err-soft); color:#b3282d}
.sample{font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px dashed var(--line); padding:3px 7px; border-radius:4px}
@media(max-width:940px){.ana{grid-template-columns:1fr}}
@media(max-width:520px){.kpis{grid-template-columns:1fr 1fr}}

/* ---------- platform ---------- */
.plats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.plat{border-top:3px solid var(--blue); padding-top:22px}
.plat .os{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); margin-bottom:9px; letter-spacing:.05em}
.plat h3{font-size:18px}
.plat p{color:var(--muted); font-size:14.5px; margin-top:8px}
.plat ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:6px; font-size:14px}
.plat li{display:flex; gap:9px; color:var(--ink)}
.plat li::before{content:"○"; color:var(--blue)}
@media(max-width:820px){.plats{grid-template-columns:1fr}}

section[id]{scroll-margin-top:92px}

/* ---------- link download di header ---------- */
.nav-links a.nav-dl{display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-weight:700}
.nav-links a.nav-dl svg{width:15px; height:15px}
.nav-links a.nav-dl::after{display:none}

/* ---------- unduh aplikasi desktop ---------- */
.dl-sec .sec-head{margin-bottom:26px}
.dls{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.dl{position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px;
  box-shadow:var(--shadow-x); display:flex; flex-direction:column; transition:border-color .18s ease, transform .18s ease}
.dl:hover{border-color:#cfe2fb; transform:translateY(-2px)}
.dl-ic{width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--soft-blue); color:var(--blue); margin-bottom:18px}
.dl-ic svg{width:25px; height:25px}
.dl h3{font-size:19px; margin:0}
.dl-os{font-family:var(--f-mono); font-size:13px; color:var(--blue); font-weight:600; margin-top:5px}
.dl ul{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; font-size:14px}
.dl li{display:flex; gap:9px; color:var(--muted); line-height:1.55}
.dl li::before{content:""; flex-shrink:0; width:15px; height:15px; margin-top:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230868e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain}
.dl-meta{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 18px; padding-top:18px; border-top:1px dashed var(--line)}
.dl-meta span{font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
  background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:5px 11px}
.dl-btn{margin-top:auto; justify-content:center; width:100%}
.dl-btn svg{width:18px; height:18px}
.dl-note{display:flex; gap:13px; align-items:flex-start; margin-top:22px; padding:18px 20px;
  background:var(--soft); border:1px solid var(--line); border-radius:14px}
.dl-note svg{width:19px; height:19px; flex-shrink:0; margin-top:2px; color:var(--blue)}
.dl-note p{margin:0; font-size:14px; color:var(--muted); line-height:1.65}
.dl-note a{color:var(--blue); font-weight:700}
@media(max-width:780px){.dls{grid-template-columns:1fr} .dl{padding:26px 22px}}

/* ---------- FAQ ---------- */
.xfaq{display:grid; grid-template-columns:.8fr 1.2fr; gap:46px}
.xfaq details{border-top:1px solid var(--line); padding-block:17px}
.xfaq details:last-child{border-bottom:1px solid var(--line)}
.xfaq summary{cursor:pointer; font-weight:700; font-size:16.5px; color:var(--head); list-style:none; display:flex; justify-content:space-between; gap:16px}
.xfaq summary::-webkit-details-marker{display:none}
.xfaq summary::after{content:"+"; font-family:var(--f-mono); color:var(--blue); font-size:20px; line-height:1}
.xfaq details[open] summary::after{content:"–"}
.xfaq details p{color:var(--muted); margin-top:10px; max-width:62ch; font-size:14.5px}
@media(max-width:820px){.xfaq{grid-template-columns:1fr; gap:22px}}

/* ---------- ajakan ---------- */
.xcta{padding-block:0 92px}
.cta-box{background:#fff; border:1px solid var(--line); border-radius:24px; padding:52px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; box-shadow:var(--shadow-x)}
.cta-box h2{font-size:clamp(26px,3.6vw,40px)}
.cta-bubbles{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; max-width:250px; justify-self:end; width:100%}
.cta-bubbles span{aspect-ratio:1; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-family:var(--f-mono); font-size:13px; color:var(--muted)}
.cta-bubbles span.on{background:var(--blue); border-color:var(--blue); color:#fff}
@media(max-width:760px){.cta-box{grid-template-columns:1fr; padding:30px 22px} .cta-bubbles{justify-self:start; max-width:200px}}

@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}