/* =========================================================
   ZENNIT — Sertifikat Skill (/sertifikat-skill): ujian, hasil, buka sertifikat
   ========================================================= */
.sk-page{padding-top:var(--nav-h);background:var(--gray-100);min-height:100vh}
.sk-wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;border-radius:100px;padding:var(--sp-3) var(--sp-6);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.sk-btn-primary{background:var(--green-800);color:var(--white)}
.sk-btn-primary:hover{background:var(--green-700);transform:translateY(-1px)}
.sk-btn-ghost{background:var(--white);color:var(--green-800);border-color:var(--gray-200)}
.sk-btn-ghost:hover{border-color:var(--green-400)}
.sk-btn-sm{font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-4)}
.sk-btn-block{width:100%}
.sk-btn:focus-visible,.sk-opt:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.sk-link{font-size:var(--fs-sm);font-weight:600;color:var(--green-700);text-decoration:none}
.sk-link:hover{text-decoration:underline}
.sk-muted{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-500)}
.sk-muted a,.sk-note a,.sk-alert a{color:var(--green-700);font-weight:600}
.sk-alert{background:#fff5f5;border:1px solid #f6c9c4;color:#8a1f17;border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);line-height:var(--lh-normal);margin:var(--sp-4) 0}
.sk-note{background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700);margin:var(--sp-4) 0}
.sk-crumbs{font-size:var(--fs-sm);color:var(--gray-500);padding-top:var(--sp-8)}
.sk-crumbs a{color:var(--green-700);text-decoration:none}
.sk-crumbs span{margin:0 var(--sp-1)}

/* ─── landing ─── */
.sk-hero{background:var(--white);border-bottom:1px solid var(--gray-200);padding:var(--sp-14) var(--sp-6)}
.sk-hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-12);align-items:center}
.sk-hero h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text)}
.sk-hero h1 span{color:var(--green-600)}
.sk-lead{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-5)}
.sk-hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.sk-steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-8)}
.sk-steps li{counter-increment:st;position:relative;padding-left:var(--sp-10);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700)}
.sk-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:8px;background:var(--green-800);color:var(--white);font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);display:grid;place-items:center}
.sk-steps b{color:var(--text);font-weight:600}
.sk-hero-cert{margin:0}
.sk-hero-cert img{display:block;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 24px 60px rgba(13,46,31,.18);transform:rotate(1.5deg)}
.sk-section{padding:var(--sp-14) 0}
.sk-h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;color:var(--text);margin-bottom:var(--sp-6)}
.sk-track+.sk-track{margin-top:var(--sp-10)}
.sk-track h3{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--green-900);margin-bottom:var(--sp-4)}
.sk-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.sk-level{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-5)}
.sk-level.is-done{border-color:var(--green-400);background:var(--green-50)}
.sk-level.is-passed{border-color:#f3d9a4;background:var(--gold-soft)}
.sk-level-top{display:flex;justify-content:space-between;align-items:center}
.sk-stars{color:var(--gold);font-size:var(--fs-lg);letter-spacing:var(--ls-wide)}
.sk-chip{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;color:var(--green-800);background:var(--green-100);border-radius:100px;padding:2px var(--sp-3)}
.sk-level h4{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.sk-level p{font-size:var(--fs-sm);color:var(--gray-500)}
.sk-level .sk-btn{margin-top:auto;align-self:flex-start}
.sk-status{font-weight:600;color:var(--gray-700)}
.sk-status.is-ok{color:var(--green-700)}
.sk-benefit{background:var(--white);border-top:1px solid var(--gray-200)}
.sk-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.sk-benefits div{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border-radius:var(--radius-md);background:var(--gray-100)}
.sk-benefits .icon{color:var(--green-600)}
.sk-benefits b{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;color:var(--text);line-height:var(--lh-snug)}
.sk-benefits span{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-500)}

/* ─── ujian ─── */
.sk-exam-wrap{padding-bottom:var(--sp-20)}
.sk-exam-head h1{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;color:var(--text);margin-top:var(--sp-4)}
.sk-exam-head p{font-size:var(--fs-base);color:var(--gray-700);margin-top:var(--sp-2)}
.sk-exam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--sp-8);align-items:start;margin-top:var(--sp-6)}
.sk-exam-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.sk-progress{position:sticky;top:calc(var(--nav-h) + var(--sp-2));z-index:2;background:var(--green-900);color:var(--white);font-size:var(--fs-sm);font-weight:500;border-radius:100px;padding:var(--sp-2) var(--sp-4);align-self:flex-start}
.sk-q{border:1px solid var(--gray-200);background:var(--white);border-radius:var(--radius-md);padding:var(--sp-5)}
.sk-q legend{float:left;width:100%;display:flex;gap:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug);color:var(--text);margin-bottom:var(--sp-3)}
.sk-q legend span{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--green-100);color:var(--green-800);display:grid;place-items:center;font-size:var(--fs-sm)}
.sk-code{clear:both;background:var(--green-900);color:#e6f4ec;border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:var(--lh-normal);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:var(--sp-3)}
.sk-opts{clear:both;display:flex;flex-direction:column;gap:var(--sp-2)}
.sk-opt{display:flex;align-items:center;gap:var(--sp-3);border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-md);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.sk-opt:hover{border-color:var(--green-400)}
.sk-opt input{position:absolute;opacity:0;pointer-events:none}
.sk-opt.is-picked{border-color:var(--green-600);background:var(--green-50)}
.sk-key{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:var(--gray-100);color:var(--gray-500);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700}
.sk-opt.is-picked .sk-key{background:var(--green-700);color:var(--white)}
.sk-skip{justify-content:center;border-style:dashed;color:var(--gray-500);font-size:var(--fs-sm)}
.sk-submit{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-5)}
.sk-submit p{font-size:var(--fs-sm);color:var(--gray-500)}
.sk-exam-data{position:sticky;top:calc(var(--nav-h) + var(--sp-4));display:flex;flex-direction:column;gap:var(--sp-4);max-height:calc(100vh - var(--nav-h) - var(--sp-8));overflow-y:auto}
.sk-table-title{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gray-500);margin-bottom:var(--sp-2)}
.sk-table-scroll{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);overflow-x:auto}
.sk-table table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);white-space:nowrap}
.sk-table th,.sk-table td{border:1px solid #e3e9e5;padding:var(--sp-1) var(--sp-2);text-align:left}
.sk-table thead th{background:#f1f4f2;color:var(--gray-500);font-weight:500;text-align:center}
.sk-table thead th.is-head{background:var(--green-50);color:var(--green-900);font-weight:600;text-align:left}
.sk-table tbody th{background:#f1f4f2;color:var(--gray-500);font-weight:500;text-align:center}
.sk-table td.is-num{text-align:right}
.sk-table td.is-null{color:var(--gray-400);font-style:italic}
.sk-gate{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);margin-top:var(--sp-6);background:var(--green-900);color:var(--white);border-radius:var(--radius-md);padding:var(--sp-6)}
.sk-gate b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700}
.sk-gate p{font-size:var(--fs-sm);color:rgba(255,255,255,.75);margin-top:var(--sp-1)}
.sk-gate .sk-btn-primary{background:var(--gold);color:var(--green-900);flex-shrink:0}

/* ─── syarat materi sebelum ujian ─── */
.sk-prep{margin-top:var(--sp-6);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--sp-8)}
.sk-prep-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-6)}
.sk-prep h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text)}
.sk-prep-head p{font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--gray-700);margin-top:var(--sp-2);max-width:60ch}
.sk-prep-head .sk-prep-count{flex-shrink:0;margin-top:0;font-size:var(--fs-sm);color:var(--gray-500);white-space:nowrap}
.sk-prep-count b{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:700;color:var(--green-700)}
.sk-prep-bar{height:8px;border-radius:100px;background:var(--gray-100);margin:var(--sp-5) 0;overflow:hidden}
.sk-prep-bar span{display:block;height:100%;width:var(--p);background:var(--green-500);border-radius:inherit}
.sk-prep-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.sk-prep-list a{display:flex;align-items:center;gap:var(--sp-3);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);text-decoration:none;color:var(--text);transition:border-color .15s}
.sk-prep-list a:hover{border-color:var(--green-400)}
.sk-prep-mark{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:var(--gray-500);background:var(--gray-100)}
.sk-prep-name{flex:1;min-width:0;font-family:var(--font-display);font-size:var(--fs-md);font-weight:600}
.sk-prep-state{flex-shrink:0;font-size:var(--fs-xs);font-weight:600;color:var(--green-700)}
.sk-prep-list .is-done a{background:var(--green-50);border-color:var(--green-100)}
.sk-prep-list .is-done .sk-prep-mark{background:var(--green-500);color:var(--white)}
.sk-prep-list .is-done .sk-prep-state{color:var(--gray-500);font-weight:500}
.sk-prep > .sk-muted{margin-top:var(--sp-4)}

/* ─── hasil ─── */
.sk-result{padding-bottom:var(--sp-20)}
.sk-score-card{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-4);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-10)}
.sk-ring{--c:#c9852b;flex-shrink:0;position:relative;width:148px;height:148px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--gray-100) 0)}
.sk-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--white)}
.sk-ring b,.sk-ring span{position:relative}
.sk-ring .sk-verdict{position:absolute;left:50%;bottom:calc(var(--sp-3) * -1);transform:translateX(-50%);white-space:nowrap;font-style:normal}
.sk-ring b{font-family:var(--font-display);font-size:var(--fs-6xl);font-weight:700;line-height:var(--lh-none);color:var(--text)}
.sk-ring span{font-size:var(--fs-xs);font-weight:500;color:var(--gray-500);margin-top:var(--sp-1)}
.sk-score-card.is-pass .sk-ring{--c:var(--green-500)}
.sk-score-body{flex:1;min-width:0}
.sk-verdict{display:inline-block;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:#8a5a12;background:#fdf1dc;border:2px solid var(--white);border-radius:100px;padding:var(--sp-1) var(--sp-3)}
.sk-score-card.is-pass .sk-verdict{color:var(--white);background:var(--green-600)}
.sk-score-card h1{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:700;line-height:var(--lh-tight);color:var(--text)}
.sk-stats{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-8);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--gray-200)}
.sk-stats dt{font-size:var(--fs-xs);color:var(--gray-500)}
.sk-stats dd{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-top:2px}
.sk-score-note{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700);margin-top:var(--sp-4)}
.sk-unlock{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-6);align-items:start;margin-top:var(--sp-6)}
.sk-unlock-preview{margin:0}
.sk-unlock-preview img,.sk-owned img{display:block;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 18px 48px rgba(13,46,31,.16)}
.sk-unlock-preview figcaption{font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-2)}
.sk-unlock-card{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--white);border:2px solid var(--green-700);border-radius:var(--radius-md);padding:var(--sp-6)}
.sk-unlock-price{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:700;color:var(--green-800)}
.sk-unlock-card h2{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--text)}
.sk-unlock-card ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);margin:var(--sp-1) 0 var(--sp-2)}
.sk-unlock-card li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700)}
.sk-unlock-card li::before{content:"✓";position:absolute;left:0;color:var(--green-500);font-weight:700}
.sk-owned{margin-top:var(--sp-6)}
.sk-owned-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.sk-review{margin-top:var(--sp-10)}
.sk-review h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text);margin-bottom:var(--sp-2)}
.sk-review-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.sk-review-item{display:flex;gap:var(--sp-3);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-4)}
.sk-review-item p{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700);margin-bottom:var(--sp-2)}
.sk-review-q{font-weight:600;color:var(--text) !important}
.sk-mark{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-sm);font-weight:700;color:var(--white);background:var(--green-500)}
.sk-review-item.is-bad .sk-mark{background:#d64545}
.sk-again{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8)}

@media (max-width: 960px){
  .sk-hero-inner,.sk-exam,.sk-unlock{grid-template-columns:minmax(0,1fr)}
  .sk-exam-data{position:static;max-height:none;order:-1}
  .sk-levels{grid-template-columns:minmax(0,1fr)}
  .sk-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-gate{flex-direction:column;align-items:stretch;text-align:center}
  .sk-prep-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 600px){
  .sk-wrap,.sk-hero{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .sk-score-card{flex-direction:column;align-items:stretch;text-align:center;gap:var(--sp-5);padding:var(--sp-6) var(--sp-5)}
  .sk-ring{align-self:center;width:128px;height:128px}
  .sk-stats{justify-content:center;gap:var(--sp-3) var(--sp-5)}
  .sk-benefits{grid-template-columns:minmax(0,1fr)}
  .sk-prep{padding:var(--sp-5)}
  .sk-prep-head{flex-direction:column;gap:var(--sp-2)}
}