/* =========================================================
   ZENNIT — Simulasi Tes Kerja
   Memakai komponen dari cv-review.css (hero, kartu, tombol, skor, riwayat).
   File ini berisi daftar paket, halaman pengerjaan, dan pembahasan.
   ========================================================= */

.tk-flip{transform:rotate(180deg)}

/* ─── halaman utama /tes-kerja ─── */
.tk-landing{background:#f6f8f7}
.tk-eyebrow{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)}
.tk-module-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--so-900);color:var(--white);display:flex;align-items:center;justify-content:center}
.tk-module-icon.is-sm{width:36px;height:36px;border-radius:10px}
.tk-text-link{font-size:var(--fs-md);font-weight:500;color:var(--so-800);text-decoration:underline;text-underline-offset:3px}
.tk-text-link:hover{color:var(--so-600)}

.tk-hero{background:var(--white);border-bottom:1px solid var(--gray-200);padding:var(--sp-16) var(--sp-12) 0}
.tk-hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-16);align-items:center}
.tk-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);margin-top:var(--sp-4)}
.tk-hero h1 span{color:var(--so-600)}
.tk-hero-lead{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-5);max-width:540px}
.tk-hero-actions{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-8)}
.tk-hero-sample{position:relative}
.tk-sample{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden;max-width:420px;margin-left:auto}
.tk-sample-head{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--gray-200);font-size:var(--fs-xs);color:var(--gray-500)}
.tk-sample-head span:first-child{font-family:var(--font-display);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase}
.tk-sample-main{display:flex;align-items:center;border-bottom:1px solid var(--gray-200)}
.tk-sample-score{padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--gray-200);font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--gray-400)}
.tk-sample-score b{font-size:var(--fs-6xl);font-weight:700;color:var(--band);line-height:var(--lh-none);letter-spacing:var(--ls-tight)}
.tk-sample-main dl{flex:1;display:grid;grid-template-columns:1fr 1fr}
.tk-sample-main dl div{padding:var(--sp-3) var(--sp-5)}
.tk-sample-main dl div+div{border-left:1px solid var(--gray-200)}
.tk-sample-main dt{font-size:var(--fs-xs);color:var(--gray-500)}
.tk-sample-main dd{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tk-sample-main dd small{font-size:var(--fs-sm);color:var(--gray-400)}
.tk-sample-map{display:grid;grid-template-columns:repeat(15,1fr);gap:var(--sp-1);padding:var(--sp-3) var(--sp-5);background:#fbfcfb;border-bottom:1px solid var(--gray-200)}
.tk-sample-map i{aspect-ratio:1;border-radius:3px;border:1px solid}
.tk-sample-map i.is-ok{background:#e3f6eb;border-color:#b5e3c7}
.tk-sample-map i.is-no{background:#fde6e6;border-color:#f3c4c4}
.tk-sample-skills{list-style:none;padding:var(--sp-3) var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.tk-sample-skills li{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);font-weight:500;color:var(--gray-700)}
.tk-sample-skills i{display:block;height:6px;border-radius:3px;background:var(--band);box-shadow:0 0 0 0 transparent}
.tk-sample-note{position:relative;margin:-12px 0 0 var(--sp-6);background:var(--so-900);color:var(--white);border-radius:12px;padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-md);max-width:260px}
.tk-sample-note .tk-eyebrow{color:var(--gold);font-size:var(--fs-2xs)}
.tk-sample-note p:last-child{font-size:var(--fs-sm);font-weight:500;margin-top:var(--sp-1);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.tk-facts-strip{max-width:1120px;margin:var(--sp-12) auto 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--gray-200)}
.tk-facts-strip div{padding:var(--sp-5) var(--sp-6) var(--sp-6) 0}
.tk-facts-strip div+div{padding-left:var(--sp-6);border-left:1px solid var(--gray-200)}
.tk-facts-strip dt{font-size:var(--fs-sm);color:var(--gray-500)}
.tk-facts-strip dd{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:700;color:var(--text);line-height:var(--lh-tight);font-variant-numeric:tabular-nums}
.tk-facts-strip dd small{font-size:var(--fs-lg);font-weight:600;color:var(--gray-400)}
@media(max-width:960px){
  .tk-hero{padding:var(--sp-10) var(--sp-5) 0}
  .tk-hero-inner{grid-template-columns:1fr;gap:var(--sp-10)}
  .tk-sample{margin:0 auto}
  .tk-hero-sample{max-width:420px;width:100%;margin:0 auto}
  .tk-facts-strip{grid-template-columns:repeat(2,1fr);margin-top:var(--sp-10)}
  .tk-facts-strip div,.tk-facts-strip div+div{padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;border-left:0}
  .tk-facts-strip div:nth-child(even){padding-left:var(--sp-4);border-left:1px solid var(--gray-200)}
  .tk-facts-strip div:nth-child(-n+2){border-bottom:1px solid var(--gray-200)}
}
@media(max-width:560px){.tk-sample-skills li{grid-template-columns:100px 1fr}.tk-facts-strip dd{font-size:var(--fs-3xl)}}

/* katalog */
.tk-catalog-section{padding:var(--sp-16) var(--sp-12) var(--sp-12);scroll-margin-top:var(--nav-h)}
.tk-catalog-inner{max-width:1120px;margin:0 auto}
.tk-catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.tk-catalog-head h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;color:var(--text);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.tk-catalog-head p{font-size:var(--fs-md);color:var(--gray-500);margin-top:var(--sp-1)}
.tk-filter button span{font-size:var(--fs-xs);color:var(--gray-400);margin-left:2px}
.tk-filter button.is-active span{color:var(--so-600)}
.tk-gate{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-md);color:var(--gray-700);background:var(--gold-soft);border:1px solid #f3dca8;border-radius:10px;padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-6)}
.tk-gate svg{flex-shrink:0;margin-top:3px;color:#94600a}
.tk-gate a{font-weight:600;color:var(--so-800);text-decoration:underline}
.tk-catalog{display:flex;flex-direction:column;gap:var(--sp-6)}
.tk-group{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}
.tk-group[hidden]{display:none}
.tk-group-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);background:#fbfcfb;border-bottom:1px solid var(--gray-200)}
.tk-group-head h3{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--text);line-height:var(--lh-snug)}
.tk-group-head p{font-size:var(--fs-sm);color:var(--gray-500)}
.tk-rows{list-style:none}
.tk-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 110px 170px;align-items:center;gap:var(--sp-6);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--gray-100);transition:background .15s}
.tk-row:last-child{border-bottom:0}
.tk-row:hover{background:#fbfcfb}
.tk-row h4{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text);line-height:var(--lh-snug)}
.tk-row-audience{font-size:var(--fs-sm);color:var(--gray-500);margin-top:2px}
.tk-row-skills{font-size:var(--fs-sm);color:var(--gray-700);margin-top:var(--sp-2);line-height:var(--lh-normal)}
.tk-row-meta{list-style:none;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--gray-500)}
.tk-row-meta b{font-family:var(--font-display);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tk-row-best{display:flex;flex-direction:column;align-items:flex-start}
.tk-row-best-num{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;color:var(--band);line-height:var(--lh-none)}
.tk-row-best-label,.tk-row-best-empty{font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-1)}
.tk-row-best-empty{color:var(--gray-400)}
.tk-row-action{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-1);text-align:center}
.tk-row-action form{margin:0}
.tk-row-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;border:0;cursor:pointer;background:var(--so-900);color:var(--white);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-4);border-radius:10px;transition:background .15s}
.tk-row-btn:hover{background:var(--so-700)}
.tk-row-btn.is-ghost{background:var(--white);color:var(--so-900);border:1.5px solid var(--gray-200)}
.tk-row-btn.is-ghost:hover{border-color:var(--so-500)}
.tk-row-btn.is-disabled{background:var(--gray-100);color:var(--gray-400);cursor:default}
.tk-row-note{font-size:var(--fs-xs);color:var(--gray-500)}
.tk-row-note.is-live{color:#94600a;font-weight:500}
@media(max-width:960px){
  .tk-catalog-section{padding:var(--sp-12) var(--sp-5) var(--sp-10)}
  .tk-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3) var(--sp-4);padding:var(--sp-5)}
  .tk-row-main{grid-column:1/-1}
  .tk-row-meta{flex-direction:row;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);grid-column:1}
  .tk-row-best{grid-column:2;grid-row:2;align-items:flex-end}
  .tk-row-best-num{font-size:var(--fs-2xl)}
  .tk-row-action{grid-column:1/-1}
  .tk-group-head{padding:var(--sp-4) var(--sp-5)}
}
.tk-howto{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--gray-200)}
.tk-howto li{font-size:var(--fs-sm);color:var(--gray-500);line-height:var(--lh-normal)}
.tk-howto b{display:block;font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;color:var(--text);margin-bottom:var(--sp-1)}
@media(max-width:960px){.tk-howto{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tk-howto{grid-template-columns:1fr;gap:var(--sp-4)}.tk-filter{width:100%;overflow-x:auto;scrollbar-width:none}.tk-filter::-webkit-scrollbar{display:none}.tk-filter button{white-space:nowrap}}

/* riwayat */
.tk-history-section{padding:0 var(--sp-12) var(--sp-12);scroll-margin-top:var(--nav-h)}
@media(max-width:960px){.tk-history-section{padding:0 var(--sp-5) var(--sp-10)}}
.tk-history{list-style:none;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}
.tk-history li{display:flex;align-items:center;border-bottom:1px solid var(--gray-100)}
.tk-history li:last-child{border-bottom:0}
.tk-history-link{flex:1;min-width:0;display:grid;grid-template-columns:52px minmax(0,1fr) 140px 150px;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-6)}
.tk-history-link:hover{background:#fbfcfb}
.tk-history-score{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--band);font-variant-numeric:tabular-nums}
.tk-history-title{font-size:var(--fs-md);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-history-meta,.tk-history-date{font-size:var(--fs-sm);color:var(--gray-500)}
.tk-history form{margin:0;padding-right:var(--sp-4)}
.tk-history-delete{border:0;background:transparent;color:var(--gray-400);cursor:pointer;padding:var(--sp-2);border-radius:8px}
.tk-history-delete:hover{color:#d64545;background:#fde6e6}
@media(max-width:760px){
  .tk-history-link{grid-template-columns:44px minmax(0,1fr);row-gap:0;padding:var(--sp-3) var(--sp-4)}
  .tk-history-score{grid-row:span 2}
  .tk-history-meta,.tk-history-date{grid-column:2;font-size:var(--fs-xs)}
  .tk-history-date{display:none}
}

/* produk */
.tk-landing-offer{padding:0 var(--sp-12) var(--sp-20)}
@media(max-width:960px){.tk-landing-offer{padding:0 var(--sp-5) var(--sp-16)}}
.tk-more{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
@media(max-width:760px){.tk-more{grid-template-columns:1fr}}
.tk-more a{display:flex;align-items:center;gap:var(--sp-4);background:var(--white);border:1px solid var(--gray-200);border-radius:14px;padding:var(--sp-4) var(--sp-5);color:var(--text);transition:border-color .15s}
.tk-more a:hover{border-color:var(--so-500)}
.tk-more a>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.tk-more b{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md)}
.tk-more small{font-size:var(--fs-sm);color:var(--gray-500)}
.tk-more a>svg{color:var(--gray-400)}
.tk-more-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--so-50);color:var(--so-700);display:flex;align-items:center;justify-content:center}

/* ─── halaman pengerjaan ─── */
.tk-run-page{background:var(--so-50);min-height:calc(100vh - var(--nav-h))}
.tk-run{max-width:1240px;margin:0 auto;padding:var(--sp-6) var(--sp-6) var(--sp-16)}
.tk-bar{position:sticky;top:var(--nav-h);z-index:20;display:flex;align-items:center;gap:var(--sp-4);background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-sm)}
.tk-bar-title{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-3)}
.tk-bar-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--so-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-bar-sub{font-size:var(--fs-xs);color:var(--gray-500)}
.tk-bar-finish{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}
.tk-timer{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--so-900);font-variant-numeric:tabular-nums;padding:var(--sp-1) var(--sp-3);border-radius:12px;background:var(--so-50)}
.tk-timer.is-warning{background:var(--gold-soft);color:#c77c00}
.tk-timer.is-danger{background:#fde6e6;color:#d64545;animation:tkPulse 1s ease-in-out infinite}
@keyframes tkPulse{50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){.tk-timer.is-danger{animation:none}}
.tk-progress{height:4px;background:var(--gray-200);border-radius:2px;margin:var(--sp-3) var(--sp-1) 0;overflow:hidden}
.tk-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--so-500),var(--gold));transition:width .3s}

.tk-body{display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-6);align-items:start}
.tk-run[data-module="excel"] .tk-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
@media(max-width:899px){.tk-run[data-module="excel"] .tk-body{grid-template-columns:1fr}}
.tk-run:not([data-module="excel"]) .tk-main{max-width:760px;width:100%;margin:0 auto}

.tk-sheet{position:sticky;top:calc(var(--nav-h) + 96px);background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-4)}
@media(max-width:899px){.tk-sheet{position:static}}
.tk-sheet-name{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:#1f7a45;margin-bottom:var(--sp-3)}
.tk-sheet-scroll{overflow-x:auto;border:1px solid #d9dfdb;border-radius:8px}
.tk-sheet-note{font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-2)}
.tk-sheet-note code{font-family:var(--font-mono);background:var(--gray-100);padding:0 3px;border-radius:3px}
.tk-grid-table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tk-grid-table th,.tk-grid-table td{border:1px solid #e1e6e2;padding:var(--sp-1) var(--sp-2);white-space:nowrap;text-align:left}
.tk-grid-table thead th,.tk-grid-table tbody th{background:#f1f4f2;color:var(--gray-500);font-weight:500;font-size:var(--fs-xs);text-align:center}
.tk-grid-table tbody th{width:32px}
.tk-grid-table tr.is-header td{font-weight:600;color:var(--so-900);background:#e8f5ee}
.tk-grid-table td.is-num{text-align:right}

.tk-main{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.tk-question{padding:var(--sp-8);scroll-margin-top:calc(var(--nav-h) + 96px)}
@media(max-width:560px){.tk-question{padding:var(--sp-5)}}
.tk-q-num{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);color:var(--so-500);text-transform:uppercase;letter-spacing:var(--ls-caps);margin-bottom:var(--sp-3)}
.tk-q-num span{font-family:var(--font-body);font-weight:500;font-size:var(--fs-xs);text-transform:none;letter-spacing:0;color:var(--gray-500);background:var(--gray-100);padding:2px var(--sp-2);border-radius:100px}
.tk-q-prompt{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--text)}
.tk-q-prompt b{font-weight:600}
.tk-q-prompt code,.tk-review code{font-family:var(--font-mono);font-size:.9em;background:var(--so-50);color:var(--so-800);padding:1px var(--sp-1);border-radius:4px;white-space:nowrap}

.tk-options{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.tk-option{display:flex;align-items:center;gap:var(--sp-3);border:1.5px solid var(--gray-200);border-radius:14px;padding:var(--sp-3) var(--sp-4);cursor:pointer;transition:border-color .15s,background .15s}
.tk-option:hover{border-color:var(--so-400)}
.tk-option input{position:absolute;opacity:0;pointer-events:none}
.tk-option:focus-within{outline:2px solid var(--so-400);outline-offset:2px}
.tk-option-key{flex-shrink:0;width:30px;height:30px;border-radius:9px;border:1.5px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);color:var(--gray-500)}
.tk-option-text{font-size:var(--fs-base);color:var(--text);line-height:var(--lh-normal)}
.tk-option.is-selected{border-color:var(--so-500);background:var(--so-50)}
.tk-option.is-selected .tk-option-key{background:var(--so-500);border-color:var(--so-500);color:var(--white)}

.tk-formula{display:flex;align-items:center;margin-top:var(--sp-6);border:1.5px solid var(--gray-200);border-radius:12px;overflow:hidden;background:var(--white);transition:border-color .15s}
.tk-formula:focus-within{border-color:var(--so-500);box-shadow:0 0 0 3px var(--so-100)}
.tk-fx{flex-shrink:0;align-self:stretch;display:flex;align-items:center;padding:0 var(--sp-3);background:#f1f4f2;border-right:1px solid #e1e6e2;font-family:var(--font-display);font-weight:700;font-style:italic;font-size:var(--fs-md);color:var(--gray-500)}
.tk-formula input{flex:1;min-width:0;border:0;outline:0;padding:var(--sp-3) var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-lg);color:var(--text);background:transparent}
.tk-formula-result{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--gray-500);min-height:1.6em}
.tk-formula-result.is-ok{color:#1f9d55;font-weight:500}
.tk-formula-result.is-error{color:#d64545}

.tk-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.tk-nav .cv-btn-primary,.tk-nav .cv-btn-ghost{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}
.tk-nav button:disabled{opacity:.4;cursor:default}
.tk-flag{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--gray-700);cursor:pointer;user-select:none}
.tk-flag input{accent-color:var(--gold);width:16px;height:16px}

.tk-map-wrap{background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-4)}
.tk-map-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--so-900);margin-bottom:var(--sp-3)}
.tk-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:var(--sp-2);list-style:none}
.tk-map button{width:100%;aspect-ratio:1;border-radius:10px;border:1.5px solid var(--gray-200);background:var(--white);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--gray-500);cursor:pointer;position:relative}
.tk-map button.is-answered{background:var(--so-500);border-color:var(--so-500);color:var(--white)}
.tk-map button.is-flagged::after{content:'';position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--white)}
.tk-map button.is-current{outline:2px solid var(--so-900);outline-offset:1px}
.tk-map-legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-3)}
.tk-map-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;border:1.5px solid var(--gray-200);margin-left:var(--sp-2)}
.tk-map-legend i:first-child{margin-left:0}
.tk-map-legend i.is-answered{background:var(--so-500);border-color:var(--so-500)}
.tk-map-legend i.is-flagged{background:var(--gold);border-color:var(--gold);border-radius:50%}
.tk-save-state{font-size:var(--fs-xs);color:var(--gray-500);text-align:center}
.tk-save-state.is-error{color:#d64545}

@media(max-width:560px){
  .tk-run{padding:var(--sp-4) var(--sp-4) var(--sp-14)}
  .tk-bar{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)}
  .tk-bar-title .tk-module-icon{display:none}
  .tk-timer{font-size:var(--fs-lg);padding:var(--sp-1) var(--sp-2)}
  .tk-bar-finish{padding:var(--sp-2) var(--sp-3)}
  .tk-flag{font-size:var(--fs-xs);white-space:nowrap}
  .tk-nav{gap:var(--sp-2)}
  .tk-nav .cv-btn-ghost{padding:var(--sp-2) var(--sp-3)}
  .tk-nav-label{display:none}
}

.tk-modal{position:fixed;inset:0;z-index:1000;background:rgba(13,59,66,.45);display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.tk-modal[hidden]{display:none}
.tk-modal-box{max-width:440px;width:100%;padding:var(--sp-8);text-align:center}
.tk-modal-box h3{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;color:var(--so-900)}
.tk-modal-box p{font-size:var(--fs-base);color:var(--gray-700);line-height:var(--lh-normal);margin-top:var(--sp-3)}
.tk-modal-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-6)}
.tk-modal-box .cv-btn-primary{margin-top:var(--sp-6)}
.tk-modal-actions .cv-btn-primary{margin-top:0}

/* ─── hasil & pembahasan ─── */
.tk-result-page{background:#f6f8f7}
.tk-result-wrap{max-width:1080px;margin:0 auto;padding:var(--sp-10) var(--sp-6) var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-6)}
@media(max-width:560px){.tk-result-wrap{padding:var(--sp-6) var(--sp-4) var(--sp-16);gap:var(--sp-4)}}
.tk-back{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--so-700);align-self:flex-start}
.tk-back:hover{color:var(--so-900)}

/* lembar hasil */
.tk-report{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}
.tk-report-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-6) var(--sp-8);border-bottom:1px solid var(--gray-200)}
.tk-report-head h1{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;color:var(--text);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);margin-top:var(--sp-1)}
.tk-report-date{font-size:var(--fs-sm);color:var(--gray-500);text-align:right;line-height:var(--lh-normal)}
.tk-report-main{display:grid;grid-template-columns:auto 1fr;align-items:stretch;border-bottom:1px solid var(--gray-200)}
.tk-score{padding:var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-8);border-right:1px solid var(--gray-200);display:flex;flex-direction:column;justify-content:center}
.tk-score-value{display:flex;align-items:baseline;gap:var(--sp-1);font-family:var(--font-display);color:var(--band)}
.tk-score-num{font-size:5rem;font-weight:700;line-height:var(--lh-none);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums} /* ds-exempt: angka skor utama */
.tk-score-of{font-size:var(--fs-2xl);font-weight:600;color:var(--gray-400)}
.tk-score-band{margin-top:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;color:var(--band)}
.tk-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.tk-stats>div{padding:var(--sp-6);border-right:1px solid var(--gray-200);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1)}
.tk-stats>div:last-child{border-right:0}
.tk-stats dt{font-size:var(--fs-sm);color:var(--gray-500)}
.tk-stats dd{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:700;color:var(--text);line-height:var(--lh-none);font-variant-numeric:tabular-nums}
.tk-stats dd small{font-size:var(--fs-lg);font-weight:600;color:var(--gray-400);margin-left:2px}
.tk-report-notes{padding:var(--sp-6) var(--sp-8);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--sp-6);border-bottom:1px solid var(--gray-200)}
.tk-verdict{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text);line-height:var(--lh-snug)}
.tk-facts{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.tk-facts li{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-md);color:var(--gray-700);line-height:var(--lh-normal)}
.tk-facts li svg{flex-shrink:0;margin-top:3px;color:var(--so-500)}
.tk-facts li.is-up svg{color:#1f9d55}
.tk-facts li.is-down svg{color:#d64545;transform:scaleY(-1)}
.tk-answer-map{padding:var(--sp-5) var(--sp-8);background:#fbfcfb}
.tk-answer-map ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.tk-answer-map a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);border:1.5px solid transparent;transition:transform .15s}
.tk-answer-map a:hover{transform:translateY(-2px)}
.tk-answer-map a.is-correct,.tk-answer-legend i.is-correct{background:#e3f6eb;color:#17794a;border-color:#b5e3c7}
.tk-answer-map a.is-wrong,.tk-answer-legend i.is-wrong{background:#fde6e6;color:#b83232;border-color:#f3c4c4}
.tk-answer-map a.is-blank,.tk-answer-legend i.is-blank{background:var(--white);color:var(--gray-400);border-color:var(--gray-200);border-style:dashed}
.tk-answer-legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-3)}
.tk-answer-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid;margin-left:var(--sp-2)}
.tk-answer-legend i:first-child{margin-left:0}
@media(max-width:860px){
  .tk-report-main{grid-template-columns:1fr}
  .tk-score{border-right:0;border-bottom:1px solid var(--gray-200);flex-direction:row;align-items:baseline;justify-content:space-between;padding:var(--sp-5) var(--sp-5)}
  .tk-stats{grid-template-columns:repeat(2,1fr)}
  .tk-stats>div:nth-child(2){border-right:0}
  .tk-stats>div:nth-child(-n+2){border-bottom:1px solid var(--gray-200)}
  .tk-stats>div{padding:var(--sp-4) var(--sp-5)}
  .tk-report-notes{grid-template-columns:1fr;gap:var(--sp-4);padding:var(--sp-5)}
  .tk-report-head,.tk-answer-map{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .tk-report-date{text-align:left}
}
@media(max-width:560px){.tk-score-num{font-size:var(--fs-6xl)}.tk-stats dd{font-size:var(--fs-3xl)}.tk-answer-map a{width:32px;height:32px}}

/* panel skill & rencana */
.tk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6)}
@media(max-width:860px){.tk-split{grid-template-columns:1fr;gap:var(--sp-4)}}
.tk-panel{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-6) var(--sp-8)}
@media(max-width:560px){.tk-panel{padding:var(--sp-5)}}
.tk-panel-title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--text);line-height:var(--lh-snug)}
.tk-panel-sub{font-size:var(--fs-sm);color:var(--gray-500);line-height:var(--lh-normal);margin-top:var(--sp-1)}
.tk-skills{list-style:none;display:flex;flex-direction:column;margin-top:var(--sp-4)}
.tk-skills li{padding:var(--sp-3) 0;border-bottom:1px solid var(--gray-100)}
.tk-skills li:last-child{border-bottom:0;padding-bottom:0}
.tk-skill-top{display:flex;align-items:baseline;gap:var(--sp-3)}
.tk-skill-name{flex:1;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.tk-skill-status{font-size:var(--fs-xs);font-weight:500;color:var(--band)}
.tk-skill-score{min-width:36px;text-align:right;font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--text);font-variant-numeric:tabular-nums}
.tk-skill-track{height:6px;border-radius:3px;background:var(--gray-100);margin-top:var(--sp-2);overflow:hidden}
.tk-skill-track span{display:block;height:100%;border-radius:3px;background:var(--band)}
.tk-plan{list-style:none;counter-reset:plan;display:flex;flex-direction:column;margin-top:var(--sp-4)}
.tk-plan li{counter-increment:plan;position:relative;padding:var(--sp-3) 0 var(--sp-3) var(--sp-10);border-bottom:1px solid var(--gray-100);display:flex;flex-direction:column;gap:var(--sp-1)}
.tk-plan li:last-child{border-bottom:0;padding-bottom:0}
.tk-plan li::before{content:counter(plan);position:absolute;left:0;top:var(--sp-3);width:26px;height:26px;border-radius:50%;background:var(--so-900);color:var(--white);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center}
.tk-plan-name{font-size:var(--fs-md);font-weight:600;color:var(--text);line-height:var(--lh-snug)}
a.tk-plan-name:hover{color:var(--so-600);text-decoration:underline}
.tk-plan-desc{font-size:var(--fs-sm);color:var(--gray-500);line-height:var(--lh-normal)}
.tk-plan-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--gray-500)}
.tk-tier{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;padding:2px var(--sp-2);border-radius:4px}
.tk-tier.is-basic{background:#eef2ef;color:#2e4a38}
.tk-tier.is-silver{background:#e7eef6;color:#2f4f73}
.tk-tier.is-gold{background:var(--gold-soft);color:#94600a}
.tk-tier.is-free{background:#e3f6eb;color:#17794a}

/* penawaran produk */
.tk-offer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);background:var(--so-900);color:var(--white);border-radius:var(--radius-md);overflow:hidden}
@media(max-width:860px){.tk-offer{grid-template-columns:1fr}}
.tk-offer-body{padding:var(--sp-8)}
.tk-offer .tk-eyebrow{color:var(--gold)}
.tk-offer h2{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;line-height:var(--lh-snug);letter-spacing:var(--ls-tight);margin-top:var(--sp-2);max-width:560px}
.tk-offer-text{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:rgba(255,255,255,.8);margin-top:var(--sp-3);max-width:560px}
.tk-offer-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.tk-offer-list li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-md);line-height:var(--lh-normal);color:rgba(255,255,255,.85)}
.tk-offer-list li svg{flex-shrink:0;margin-top:3px;color:var(--gold)}
.tk-offer-list strong{color:var(--white)}
.tk-offer-compare{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5);font-size:var(--fs-sm);font-weight:500;color:var(--white);text-decoration:underline;text-underline-offset:3px}
.tk-offer-actions{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-5)}
.tk-offer-actions .tk-offer-compare{margin-top:0}
.tk-offer-actions .cv-btn-primary{background:var(--gold);color:var(--so-900)}
.tk-offer-price{background:var(--white);color:var(--text);margin:var(--sp-3);border-radius:14px;padding:var(--sp-6);display:flex;flex-direction:column;justify-content:center}
.tk-offer-tier{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--so-700)}
.tk-offer-normal{margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--gray-400);text-decoration:line-through}
.tk-offer-amount{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:700;color:var(--text);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.tk-offer-note{font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-1)}
.tk-offer-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5);background:var(--gold);color:var(--so-900);font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);padding:var(--sp-3) var(--sp-5);border-radius:10px;transition:background .15s}
.tk-offer-btn:hover{background:#e8961a}
.tk-offer-link{margin-top:var(--sp-3);text-align:center;font-size:var(--fs-sm);font-weight:500;color:var(--so-700);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.tk-offer-body{padding:var(--sp-6) var(--sp-5)}.tk-offer h2{font-size:var(--fs-2xl)}}

/* pembahasan */
.tk-discuss-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.tk-filter{display:inline-flex;background:var(--gray-100);border-radius:10px;padding:3px}
.tk-filter button{border:0;background:transparent;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;color:var(--gray-500);padding:var(--sp-2) var(--sp-3);border-radius:8px;cursor:pointer}
.tk-filter button.is-active{background:var(--white);color:var(--text);box-shadow:var(--shadow-sm)}
.tk-review.is-wrong-only .tk-review-item.is-correct{display:none}
.tk-review-item{scroll-margin-top:calc(var(--nav-h) + 24px)}
.tk-result-actions{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}
.tk-result-actions form{margin:0}
.tk-review-sheet{margin-bottom:var(--sp-4)}
.tk-review-sheet summary{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-size:var(--fs-sm);font-weight:500;color:var(--so-600);margin-bottom:var(--sp-3)}
.tk-review{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.tk-review-item{background:var(--white);border:1.5px solid var(--gray-200);border-radius:14px;overflow:hidden}
.tk-review-item.is-wrong{border-color:#f3c4c4}
.tk-review-item summary{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);cursor:pointer;list-style:none}
.tk-review-item summary::-webkit-details-marker{display:none}
.tk-review-mark{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);background:#1f9d55}
.tk-review-item.is-wrong .tk-review-mark{background:#d64545}
.tk-review-num{flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);color:var(--gray-500);min-width:18px}
.tk-review-prompt{flex:1;min-width:0;font-size:var(--fs-md);color:var(--text);line-height:var(--lh-normal)}
.tk-review-skill{flex-shrink:0;font-size:var(--fs-2xs);font-weight:500;color:var(--so-700);background:var(--so-50);border-radius:100px;padding:2px var(--sp-2)}
@media(max-width:560px){.tk-review-skill{display:none}}
.tk-review-body{padding:0 var(--sp-4) var(--sp-4) calc(var(--sp-12) + var(--sp-2));display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-md);color:var(--gray-700);line-height:var(--lh-normal)}
.tk-review-label{display:inline-block;min-width:110px;font-weight:600;color:var(--so-900)}
.tk-review-explain{background:var(--so-50);border-radius:10px;padding:var(--sp-3);color:var(--gray-700)}
@media(max-width:560px){.tk-review-body{padding:0 var(--sp-4) var(--sp-4)}.tk-review-label{display:block}}

/* CPNS: nilai SKD dibanding ambang batas, poin tiap pilihan TKP */
.tk-skd{display:flex;gap:var(--sp-4);align-items:flex-start;border-radius:16px;padding:var(--sp-4) var(--sp-6);margin-top:var(--sp-6);border:1.5px solid}
.tk-skd.is-pass{background:#e3f6eb;border-color:#b5e3c7}
.tk-skd.is-fail{background:#fde6e6;border-color:#f3c4c4}
.tk-skd-icon{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--white)}
.tk-skd.is-pass .tk-skd-icon{background:#1f9d55}
.tk-skd.is-fail .tk-skd-icon{background:#d64545}
.tk-skd-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);color:var(--so-900);line-height:var(--lh-snug)}
.tk-skd-desc{font-size:var(--fs-sm);color:var(--gray-700);line-height:var(--lh-normal);margin-top:var(--sp-1)}
.tk-review-points{display:inline-block;margin-left:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);color:var(--so-700);background:var(--so-50);border-radius:100px;padding:1px var(--sp-2)}
.tk-review-options{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.tk-review-options li{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-3);border-radius:8px}
.tk-review-options li.is-best{background:#e3f6eb;color:var(--so-900);font-weight:500}
.tk-review-options .tk-review-points{flex-shrink:0}
@media(max-width:560px){.tk-skd{padding:var(--sp-4)}}
@media(max-width:560px){
  .tk-panel.tk-discuss{padding:var(--sp-5) var(--sp-3)}
  .tk-discuss-head{padding:0 var(--sp-2)}
  .tk-review-item summary{padding:var(--sp-3);gap:var(--sp-2)}
  .tk-review-num{min-width:0}
}