/* ── RESET & BASE ─────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* ── TOKEN ─────────────────────────────────────────────────────────
   🔴 Blok ini SENGAJA berdiri sendiri dan tidak mengimpor apa pun.

   RULES.md aturan 1: storefront dan portal tetap dua sistem styling
   berbeda, dan desain menyatukan keduanya secara VISUAL, bukan secara
   kode. Halaman ini pihak ketiga di antara keduanya: dia HTML statis di
   public/, di luar Tailwind portal DAN di luar theme Shopify. Jadi:

   - Jangan mengimpor gk-tokens.css storefront ke sini.
   - Jangan menarik @theme portal ke sini. Preflight Tailwind akan
     me-reset seluruh styling halaman ini (komentar header di bawah
     sudah mencatat sebab yang sama).

   Nilainya DISALIN dari fast/portal-theme.css dan TOKENS.md, bukan
   diarang. Kalau token portal berubah, blok ini tidak ikut berubah
   sendiri dan memang tidak ada yang memaksanya. Itu harga dari berdiri
   di luar Tailwind, dan sudah diterima sejak halaman ini dibuat.

   Nama lama (--ocean, --c55, --glass, dst) SENGAJA dipertahankan sebagai
   alias di bawah. Ada sekitar seribu baris CSS di berkas ini yang
   memakainya, dan mengganti namanya satu per satu itu perubahan berisiko
   tanpa satu pun keuntungan yang kelihatan di layar. */
:root{
  /* Warna inti -- TOKENS.md */
  --gold-500:#B8862B; --gold-600:#9C6F20; --gold-400:#CBA043; --gold-50:#FBF3E2;
  /* --gold-teks: emas yang AMAN DIPAKAI SEBAGAI TEKS KECIL. Diukur 30 Agustus
     2026 terhadap putih: --gold-600 = 4,46 (gagal) dan --gold-500 = 3,24
     (gagal jauh). Nilainya #8F6720 sampai sore itu, lalu digelapkan lagi ke
     #855F1C waktu ketahuan emas itu juga duduk di ATAS chip emas muda
     (#F3E7CE) dan di atas krem halaman, bukan cuma di atas putih: di sana
     #8F6720 cuma 4,15 dan 4,42. Nilai sekarang lolos di keempat latar yang
     benar-benar dia tempati (putih 5,75 · krem 5,39 · gold-50 5,38 ·
     chip 4,69), dan putih di ATASNYA 5,75.
     ⚠ Pelajarannya: satu warna teks tidak bisa dinilai dari satu latar.
     🔴 Nilainya sudah dipakai di 8 tempat sejak lama, tapi selalu ditulis
     mentah sebagai #8F6720 sehingga terlihat seperti kelalaian. Dia BUKAN
     kelalaian, dia satu-satunya emas yang lolos, dan tanpa nama ini cepat
     atau lambat ada yang "merapikannya" jadi --gold-600 lalu menjatuhkan
     delapan tempat itu ke bawah ambang tanpa satu pun gejala.
     Dia juga LATAR yang aman di bawah teks putih (putih di atasnya = 5,09),
     dan dipakai begitu di tombol Bagikan Skor serta lencana nomor dimensi.
     Satu nilai, satu nama, dua arah pemakaian -- jangan dipecah jadi dua
     token, itu cuma melahirkan dua angka yang suatu saat berbeda.
     ⚠ --gold-500 tetap benar untuk teks BESAR (angka skor 26px+, ambangnya 3)
     dan untuk hiasan. Yang tidak boleh cuma teks kecil. */
  --gold-teks:#855F1C;
  /* Keadaan hover untuk permukaan di atas. WAJIB lebih GELAP dari --gold-teks.
     --gold-strong (#9C6F20) justru lebih TERANG, jadi memakainya sebagai hover
     akan menjatuhkan tombolnya balik ke 4,46 tepat waktu jarinya menyentuh. */
  --gold-teks-hover:#7D5719;
  --ink-900:#1A1712; --ink-700:#3B342D;
  /* --ink-500 digelapkan #75695C -> #6B6055 pada 30 Agustus 2026. Nilai lama
     memberi 4,42 di atas panel --ink-100 (#EFE9DF), yaitu meleset 1,8% dari
     ambang WCAG AA, dan itu kena tiap teks kecil yang duduk di panel abu
     muda -- keterangan kemajuan tips, tombol Bar/Kartu, dan seterusnya.
     🔴 Yang digelapkan TOKENNYA, bukan tiga tempat yang kebetulan ketahuan.
     Token ini dipakai ~125 kali lewat --c55 dan --muted, jadi menambalnya
     satu per satu berarti sisanya tetap di bawah ambang sampai ada yang
     mengukurnya lagi. Arah perubahannya cuma bisa menambah kontras di semua
     tempat, tidak pernah menguranginya.
     Sesudah: 5,07 di atas --ink-100 dan 6,12 di atas putih. Masih jelas lebih
     terang daripada --ink-700, jadi dia tetap terbaca sebagai teks sekunder. */
  --ink-500:#6B6055;
  --ink-200:#E0D8CB; --ink-100:#EFE9DF; --ink-50:#FBF7F0;
  --white:#FFFFFF;

  /* Dua nilai untuk teks DI ATAS latar ink-900. --ink-500 terlalu gelap di
     sana dan --ink-200 terlalu terang untuk baris pendukung, jadi keduanya
     tidak bisa dipakai ulang. Sudah dipakai tulis-tangan di empat tempat
     (kartu tipe audit, layar loading, delta skor) sebelum diberi nama. */
  --ink-300:#C9C2B6; --ink-400:#9A948A;
  /* Latar kartu emas muda. Tiga tempat menulisnya sendiri sebelum ini. */
  --gold-100:#FCF7EC;
  /* Padding mendatar #screen-gate/#screen-results/#screen-rewrite (baris
     ~1820). Ditarik jadi variabel 30 Agustus 2026 karena bilah navigasi hasil
     yang menempel di HP harus melebar persis sampai tepi layar, dan versi
     pertamanya MENEBAK angkanya (-20px) padahal aslinya 15px -- selisih 5px
     itu membuat seluruh halaman bisa digulir ke samping tanpa satu pun error.
     ⚠ Elemen itu punya ENAM aturan padding yang bersaing di berkas ini; yang
     menang baris ~1820. Kalau paddingnya mau diubah, ubah di sini, dan baca
     dulu komentar di atas aturan itu -- angkanya terikat ke .h-inner. */
  --pad-layar:15px;
  /* Rose muda: garis & teks state "belum bisa dijalankan" di band CTA.
     Beda peran dari --red-500 yang dipakai untuk galat betulan. */
  --red-300:#E4BDBD; --red-700:#8E4B4B;
  --teal-600:#235852; --teal-500:#2C6E68;
  --navy-500:#2E4373;
  --green-500:#3F8F5B; --amber-500:#D69121; --red-500:#C6483A; --blue-500:#3D6CB0;

  /* Radius -- kontrol 10, kartu 14/20, pill */
  --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* Shadow selalu berbasis ink hangat, tidak pernah biru-hitam */
  --shadow-xs:0 1px 2px rgba(26,23,18,.06);
  --shadow-sm:0 1px 3px rgba(26,23,18,.08),0 1px 2px rgba(26,23,18,.05);
  --shadow-md:0 4px 12px rgba(26,23,18,.08),0 2px 4px rgba(26,23,18,.05);
  --shadow-lg:0 12px 28px rgba(26,23,18,.12),0 4px 8px rgba(26,23,18,.06);

  /* Motion & scrim */
  --gk-dur-fast:.15s; --gk-dur:.18s; --gk-ease:cubic-bezier(.2,.6,.3,1);
  --gk-scrim:rgba(26,23,18,.45);

  /* ── Alias nama lama. Jangan tambah nilai mentah di sini. ── */
  --ocean:var(--ink-50);--dark:var(--white);--navy:var(--white);--deeper:var(--ink-200);
  --gold:var(--gold-500);--gd:rgba(184,134,43,.22);--gd2:rgba(184,134,43,.10);
  --teal:var(--teal-500);--teal-act:var(--teal-600);--teal-hi:var(--teal-500);
  --teal-glow:rgba(35,88,82,.26);--teal-glow2:rgba(35,88,82,.07);
  --ink:var(--ink-900);--c85:var(--ink-700);--c55:var(--ink-500);
  --c20:var(--ink-200);--c10:var(--ink-100);
  --glass:var(--white);--rose:var(--red-500);
  --rose-bg:rgba(198,72,58,.08);--rose-glow:rgba(198,72,58,.26);
  --r:var(--radius-md);--tr:var(--gk-dur) var(--gk-ease);

  /* Tinggi header. Dipakai .h-inner DAN min-height .screen. Dulu 72px
     ditulis tangan di tiga tempat terpisah, jadi menaikkannya di satu
     tempat menyisakan dua yang lain. */
  --h-header:58px;
}

/* Fokus global -- satu definisi, jangan diulang per komponen.
   Angkanya sama persis dengan portal-theme.css supaya cincin fokus di
   halaman ini dan di portal tidak terlihat beda. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(203,160,67,.45);
}
html,body{min-height:100%;font-family:'DM Sans',sans-serif;background:var(--ocean);color:var(--ink);scroll-behavior:smooth}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
/* ── HEADER (langkah 3a: disamakan dengan header app.getkarier.com) ──
   Header lama tingginya 40px dan gelap, dirancang untuk hidup di dalam iframe
   di halaman Shopify. Sejak tool ini jadi halaman berdiri sendiri di
   app.getkarier.com/cv-audit, dia butuh header yang sama dengan portal.

   ⚠ Angka-angka di bawah disamakan dengan components/PortalHeader.tsx:
   tinggi 77px (58px mobile), lebar 1440px, padding 15px (mobile) / 48px
   (desktop), logo lebar 100px, tombol ikon 44px, nav 14.5px.

   🔴 DIBETULKAN 2026-08-05. Sebelumnya 72px / 1200px / 50px / nav 16px, dan
   komentar ini menyatakan angkanya "DISALIN dari PortalShell.tsx" plus
   "jangan diubah tanpa mengukur ulang". Dua-duanya benar waktu ditulis, dan
   dua-duanya jadi menyesatkan sesudahnya:

   1. Portal-nya sendiri berubah waktu rombak minggu ini, dan salinan di sini
      tidak ikut. Jadi kalimat "harus tetap terlihat sama" menjanjikan
      sinkron yang sudah putus -- tinggi 72 lawan 80, nav 16px lawan 14.5px.
   2. Angka portal yang disalin itu sendiri keliru: diukur dari storefront
      2026-08-03, sehari SEBELUM container storefront dibetulkan dari 1240 ke
      1440. Lihat catatan panjang di PortalHeader.tsx.

   Pelajarannya: komentar "disalin dari X, jangan diubah" tidak menahan X
   berubah. Yang menahan cuma pengukuran ulang, dan itu tidak pernah terjadi
   sendiri. Kalau menyalin lagi, sebut TANGGAL pengukurannya di sini.

   Kenapa CSS-nya ditulis ulang di sini alih-alih menarik CSS portal:
   portal pakai Tailwind, dan preflight Tailwind akan me-reset seluruh
   styling tool ini. Isi menunya tetap datang dari lib/nav.ts lewat
   /api/cv-audit/session, jadi yang bisa melenceng cuma tampilannya. */
header{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--c20);position:sticky;top:0;z-index:200}
.h-inner{margin:0 auto;max-width:1440px;height:var(--h-header);display:flex;align-items:center;gap:8px;padding:0 15px}
@media(min-width:768px){.h-inner{gap:24px;padding:0 48px}}
@media(min-width:990px){:root{--h-header:77px}}
.h-wordmark{font-family:'Playfair Display',serif;font-size:17px;font-weight:600;color:var(--gold);letter-spacing:-.2px}
.h-logo{width:100px;height:auto;display:block;object-fit:contain}
.h-nav{display:none;align-items:center}
@media(min-width:768px){.h-nav{display:flex}}
.h-nav a{white-space:nowrap;padding:12px 20px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:color var(--tr)}
.h-nav a:hover{color:var(--gold)}
.h-spacer{flex:1}
/* Jarak antar ikon. Kotak di sini 44px (bukan 40px seperti storefront) demi
   sasaran sentuh, jadi gap 10px sudah menghasilkan langkah 54px yang sama
   dengan desktop storefront. Sebelumnya 2px dan ikonnya nyaris bersentuhan. */
.h-right{display:flex;align-items:center;gap:10px}
.h-icon{display:flex;height:44px;width:44px;align-items:center;justify-content:center;border-radius:999px;color:var(--ink);text-decoration:none;transition:background var(--tr)}
.h-icon:hover{background:var(--c10)}
/* Slot akun: diisi JS setelah /api/cv-audit/session menjawab. Sengaja dibiarkan
   kosong di HTML, BUKAN diisi "Masuk" dulu -- kalau diisi, user yang sebenarnya
   sudah login akan melihat tombol "Masuk" berkedip sepersekian detik sebelum
   berganti jadi namanya, dan itu bikin ragu apakah dia benar-benar login. */
.h-acct{display:flex;align-items:center;gap:8px;min-height:44px}
.h-avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;background:var(--teal-act);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.h-acct-name{display:none;font-size:14px;font-weight:500;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:768px){.h-acct-name{display:block}}
.h-login{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--teal-act);color:#FBF7F0;font-size:14px;font-weight:500;text-decoration:none;transition:background var(--tr)}
.h-login:hover{background:var(--teal-hi)}
.h-badge{background:var(--gd2);border:1px solid var(--gd);color:var(--gold);font-size:11px;padding:3px 11px;border-radius:20px;white-space:nowrap}
.screen{display:none;min-height:calc(100vh - var(--h-header));padding:18px 16px}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--teal-glow);border-radius:16px;box-shadow:0 8px 40px rgba(26,23,18,.12);width:100%;max-width:520px;overflow:hidden}
.card-head{padding:14px 24px 12px;border-bottom:1px solid var(--c10)}
.card-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2.5px;color:var(--teal-act);margin-bottom:6px}
.card-title{font-family:'Playfair Display',serif;font-size:24px;line-height:1.25;color:var(--ink);margin-bottom:8px}
.card-desc{font-size:14px;color:var(--c55);line-height:1.6}
.card-body{padding:16px 24px 20px}
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--c55);letter-spacing:.3px;margin-bottom:7px;text-transform:uppercase}
.form-input{width:100%;background:var(--c10);border:1px solid var(--c20);border-radius:var(--r);padding:11px 14px;color:var(--ink);font-size:14px;outline:none;transition:border-color .2s,background .2s}
.form-input:focus{border-color:var(--teal-glow);background:rgba(35,88,82,.06)}
.form-input::placeholder{color:var(--c55)}
select.form-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8801C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.benefit-list{margin-bottom:0}
.benefit-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:13px;color:var(--c85);line-height:1.5}
.benefit-item+.benefit-item{border-top:1px solid var(--c10)}
.benefit-icon{width:22px;height:22px;border-radius:50%;background:rgba(35,88,82,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-size:14px;font-weight:500;border:none;transition:all .25s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.btn-primary{background:var(--teal-act);color:#FBF7F0;width:100%;box-shadow:0 2px 12px rgba(35,88,82,.25)}
.btn-primary:hover{background:var(--teal-hi);transform:translateY(-1px);box-shadow:0 4px 20px rgba(35,88,82,.35)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.5;pointer-events:none}
.btn-ghost{background:transparent;color:var(--teal-act);border:1px solid var(--teal-glow);width:100%}
.btn-ghost:hover{background:var(--teal-glow2)}
.upload-zone{border:2px dashed var(--c20);border-radius:var(--r);padding:28px 20px;text-align:center;transition:all .25s;cursor:pointer;background:var(--c10);position:relative}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--teal-glow);background:var(--teal-glow2)}
.upload-zone.has-file{border-color:var(--teal-glow);border-style:solid;background:rgba(35,88,82,.06)}
.upload-icon{font-size:28px;margin-bottom:10px}
.upload-title{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:4px}
.upload-sub{font-size:12px;color:var(--c55)}
.upload-file-name{font-size:13px;color:var(--teal-act);font-weight:500;margin-top:8px;display:none}
.upload-zone.has-file .upload-file-name{display:block}
#file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.tab-bar{display:flex;background:var(--c10);border-radius:var(--r);padding:3px;margin-bottom:18px}
.tab-btn{flex:1;padding:8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:var(--c55);transition:all .2s}
.tab-btn.active{background:var(--navy);color:var(--teal-act);font-weight:500;box-shadow:0 1px 4px rgba(26,23,18,.10)}
#screen-loading{justify-content:center}
.loading-card{text-align:center;max-width:360px;width:100%;padding:48px 32px}
.loading-ring{width:56px;height:56px;margin:0 auto 20px;border:3px solid var(--teal-glow);border-top-color:var(--teal-act);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-steps{margin-top:24px;text-align:left}
.loading-step{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--c55);transition:color .3s}
.loading-step.done{color:var(--teal-act)}
.loading-step.active{color:var(--ink);font-weight:500}
.step-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--c20);transition:background .3s}
.loading-step.done .step-dot{background:var(--teal-act)}
.loading-step.active .step-dot{background:var(--gold);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.error-banner{background:var(--rose-bg);border:1px solid var(--rose-glow);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;display:none}
.error-banner.visible{display:block}
.error-banner-title{font-size:13px;font-weight:500;color:var(--rose);margin-bottom:4px}
.error-banner-desc{font-size:12px;color:var(--c85);line-height:1.5}
#screen-results{padding:32px 20px 60px;align-items:stretch;max-width:720px;margin:0 auto;width:100%}
.score-hero{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--teal-glow);border-radius:16px;padding:32px;margin-bottom:14px;display:flex;gap:28px;align-items:center;box-shadow:0 8px 40px rgba(26,23,18,.10)}
.score-circle-wrap{flex-shrink:0;position:relative}
.score-svg{display:block}
.score-track{stroke:var(--c10)}
.score-fill{stroke:var(--teal-act);stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)}
.score-fill.low{stroke:var(--rose)}
.score-fill.mid{stroke:var(--gold)}
.score-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.score-num-val{font-family:'Playfair Display',serif;font-size:32px;font-weight:600;line-height:1;color:var(--ink)}
.score-num-max{font-size:12px;color:var(--c55);margin-top:2px}
.score-hero-info{flex:1}
.score-label{font-size:10px;text-transform:uppercase;letter-spacing:2.5px;color:var(--teal-act);margin-bottom:8px}
.score-headline{font-family:'Playfair Display',serif;font-size:25px;line-height:1.25;color:var(--ink);margin-bottom:10px}
.score-summary{font-size:13px;color:var(--c55);line-height:1.6;margin-bottom:16px}
.rp{margin:0 0 9px}.rp:last-child{margin-bottom:0}
.score-target{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--c85);background:var(--c10);border-radius:20px;padding:4px 12px}
.section-label{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--ink);margin:6px 0 13px;padding-left:2px}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
/* L4 (2026-08-30): aturan satu kolom di bawah 500px DICABUT.
   Dia dipasang waktu kartu Breakdown masih memuat bar, penjelasan, dan
   tautan "Lihat analisis" -- isi sebanyak itu memang tidak muat di setengah
   layar HP. Isinya diringkas jadi nama + skor pada 2026-08-26, tapi aturan
   ini ikut tertinggal, jadi lima kartu yang isinya dua baris masing-masing
   memakan satu kolom penuh.
   Diukur di 375px: 459px jadi 287px, hemat 172px. Kartu jadi 167px dan cuma
   satu nama yang turun ke baris kedua ("Keyword Relevance").
   ⚠ Kalau suatu saat isi kartunya ditambah lagi, hidupkan lagi aturan ini. */

/* ══ Breakdown Skor satu baris (2026-08-26) ══════════════════════════════
   Kartunya diringkas jadi nama + skor saja; bar, penjelasan, dan tautan
   "Lihat analisis" dicabut. Alasannya di renderResults().

   🔴 `auto-fit` dengan minmax, BUKAN `repeat(5, 1fr)` mati. Jumlah dimensi
   hari ini memang lima, tapi kalau GAS suatu saat mengirim empat atau enam,
   kolom mati akan meninggalkan kolom kosong atau memaksa baris kedua berisi
   satu kartu. Dengan auto-fit, berapa pun jumlahnya dia tetap merata.
   Ambang 150px dipilih supaya lima kartu muat di kolom utama ~800px dan
   turun sendiri jadi dua lalu satu kolom di layar sempit. */
@media(min-width:760px){
  .sub-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
.sub-card.is-ringkas{padding:14px 14px 15px;display:flex;flex-direction:column;gap:9px;justify-content:space-between}
.sub-card.is-ringkas .sub-card-name-row{display:flex;align-items:flex-start;gap:7px}
/* Nama dimensi boleh dua baris di kolom sempit. white-space:nowrap di sini
   akan memaksa kartunya melebar dan membatalkan seluruh gunanya satu baris. */
.sub-card.is-ringkas .sub-card-name{font-size:12px;line-height:1.35}
.sub-card.is-ringkas .sub-card-score{font-size:26px;line-height:1}
/* Warna angka menggantikan warna bar yang dicabut, memakai ambang yang sama
   persis (>=75 tinggi, >=50 sedang, sisanya rendah). Tanpa ini seluruh baris
   terbaca satu warna dan tidak bisa dipindai sekali lihat. */
/* ══ Baris dua pintu lanjutan (2026-08-26) ═══════════════════════════════
   Kiri band rewrite (termasuk keadaan "Saldo kurang"), kanan kartu Career
   Map. Keduanya sama-sama "langkah berikutnya", jadi berdampingan mereka
   terbaca sebagai dua pilihan; bertumpuk mereka terbaca sebagai dua tuntutan.
   ⚠ align-items:stretch supaya dua kartu setinggi sama walau isinya beda
   panjang. Tanpa itu kartu Career Map yang pendek mengambang di tengah dan
   barisnya terlihat seperti kesalahan tata letak. */
.gkv2-lanjut-row{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch;margin:26px 0 8px}
/* S9 (31 Agustus 2026): kolom keduanya DICABUT. Kartu Career Map pindah ke
   baris lowongan, jadi yang tinggal di sini cuma band rewrite dan dia berhak
   atas lebar penuh. Jangan dikembalikan tanpa memindahkan kartunya kembali
   juga -- satu kolom 1fr 1fr dengan satu anak menyisakan separuh baris
   kosong. */
/* Band di dalam baris ini tidak boleh membawa margin vertikalnya sendiri;
   jarak barisnya sudah diatur .gkv2-lanjut-row di atas. */
.gkv2-lanjut-row>.gkv2-band-slot{margin:0}
.gkv2-lanjut-row>.ns-card{margin:0}

/* ══ Dua kartu di baris ini WAJIB setinggi sama (2026-08-26) ═══════════════
   🔴 `align-items:stretch` di atas saja TIDAK cukup, dan ini bagian yang
   sudah sekali meleset. Yang meregang itu .gkv2-band-slot, yaitu PEMBUNGKUS,
   sedangkan band-nya sendiri anak di dalamnya dan tetap setinggi isinya.
   Terukur: slot 313px, band di dalamnya 293px, jadi ada 20px celah kosong di
   bawah kartu kiri sementara kartu kanan penuh. Dua baris di bawah ini yang
   meneruskan regangannya sampai ke band. */
.gkv2-lanjut-row>.gkv2-band-slot{display:flex}
.gkv2-lanjut-row>.gkv2-band-slot>.cvr-cta-band{flex:1;margin-bottom:0}

/* 🔴 Isi band DITUMPUK di baris ini, bukan berdampingan. Ini penyebab
   sebenarnya kenapa blok "Belum bisa dijalankan" terlalu tinggi, dan bukan
   panjang teksnya.

   Band ini lahir untuk kolom selebar ~800px, jadi isinya `flex-direction:row`:
   teks kiri, tombol kanan. Begitu dia masuk baris dua kolom, lebarnya jadi
   394px, dan tombolnya memakan 161px di antaranya. Yang tersisa untuk teks
   cuma 155px, jadi paragraf 217 karakter pecah jadi sekitar 15 baris dan
   bandnya menjulang 293px.

   Ditumpuk, teksnya dapat lebar penuh (~342px) dan tinggal sekitar sepertiga
   tingginya. Tombol turun ke bawah, rata kiri mengikuti teksnya. */
/* 🔴 S9 (31 Agustus 2026): tiga aturan penumpuk di atas DICABUT, dan
   penjelasan panjang di atasnya sekarang berlaku terbalik. Sebabnya hilang:
   band ini tidak lagi berbagi baris dengan kartu Career Map, jadi lebarnya
   kembali ~800px seperti waktu dia lahir. Ditumpuk pada lebar itu, tombolnya
   melar selebar kolom dan teksnya menyisakan ruang kosong besar di kanan --
   persis kebalikan dari masalah yang aturan itu dulu pecahkan.
   Yang tinggal cuma penormal margin di bawah. */
.gkv2-lanjut-row>.gkv2-band-slot>.cvr-cta-band{margin-bottom:0}

.sub-card-score.is-tinggi{color:var(--teal-act)}
.sub-card-score.is-sedang{color:var(--gold)}
.sub-card-score.is-rendah{color:var(--rose)}
.sub-card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--c20);border-radius:12px;padding:16px 18px;box-shadow:0 2px 12px rgba(26,23,18,.06);transition:border-color .2s,box-shadow .2s;cursor:pointer;user-select:none}
.sub-card:hover{border-color:var(--teal-glow);box-shadow:0 4px 18px rgba(35,88,82,.14)}
.sub-card-link{font-size:10px;color:var(--teal-act);margin-top:7px;text-align:right;opacity:.75;letter-spacing:.2px}
.sub-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.sub-card-name{font-size:12px;font-weight:500;color:var(--c85);line-height:1.3}
.sub-card-score{font-family:'Playfair Display',serif;font-size:30px;font-weight:600;color:var(--ink);white-space:nowrap}
.sub-card-score .out-of{font-size:11px;color:var(--c55);font-family:'DM Sans',sans-serif;font-weight:400}
.sub-bar-wrap{height:4px;background:var(--c10);border-radius:2px;overflow:hidden}
.sub-bar{height:100%;border-radius:2px;transition:width 1s cubic-bezier(.16,1,.3,1)}
.bar-high{background:var(--teal-act)}.bar-mid{background:var(--gold)}.bar-low{background:var(--rose)}
.sub-card-note{font-size:11px;color:var(--c55);margin-top:8px;line-height:1.5}
.detail-stack{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.detail-card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--c20);border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(26,23,18,.06)}
.detail-head{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;border-bottom:1px solid transparent;transition:background .15s,border-color .15s;user-select:none}
.detail-head:hover{background:var(--teal-glow2)}
.detail-head.open{border-bottom-color:var(--c10)}
.detail-badge{font-size:10px;padding:2px 9px;border-radius:12px;font-weight:500;white-space:nowrap}
.badge-good{background:rgba(35,88,82,.12);color:var(--teal-act);border:1px solid rgba(35,88,82,.25)}
.badge-ok{background:rgba(184,134,43,.12);color:var(--gold);border:1px solid rgba(184,134,43,.25)}
.badge-weak{background:var(--rose-bg);color:var(--rose);border:1px solid var(--rose-glow)}
.detail-name{font-size:14px;font-weight:600;color:var(--ink);flex:1}
.detail-score{font-size:13px;color:var(--c55);margin-right:4px}
.detail-chevron{color:var(--c55);font-size:11px;transition:transform .25s}
.detail-head.open .detail-chevron{transform:rotate(180deg)}
.detail-body{padding:18px;display:none}
.detail-body.open{display:block}
.detail-finding{font-size:13px;color:var(--c85);line-height:1.6;margin-bottom:14px}
.rewrite-block{background:var(--c10);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.rewrite-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--c55);margin-bottom:8px}
.rewrite-before{font-size:12px;color:var(--rose);text-decoration:line-through;line-height:1.5;margin-bottom:6px;opacity:.8}
.rewrite-arrow{color:var(--c55);margin:4px 0;font-size:11px}
.rewrite-after{font-size:13px;color:var(--teal-act);font-weight:500;line-height:1.5}
.tip-list{list-style:none;margin-top:2px}
.tip-list li{font-size:13px;color:var(--c85);line-height:1.5;padding:5px 0 5px 18px;position:relative}
.tip-list li::before{content:'→';position:absolute;left:0;color:var(--teal-act);font-size:12px}
.tip-list li+li{border-top:1px solid var(--c10)}
.scan-card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--gd);border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 12px rgba(26,23,18,.06)}
.scan-title{font-size:12px;font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.scan-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:13px}
.scan-row+.scan-row{border-top:1px solid var(--c10)}
.scan-num{width:20px;height:20px;border-radius:50%;background:var(--gd2);border:1px solid var(--gd);color:var(--gold);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.scan-row-content{flex:1}
.scan-row-label{font-weight:500;color:var(--ink);margin-bottom:2px}
.scan-row-val{color:var(--c55);font-size:12px}
.scan-row-flag{font-size:11px;padding:2px 8px;border-radius:10px;margin-left:auto;flex-shrink:0;align-self:center}
.flag-ok{background:rgba(35,88,82,.10);color:var(--teal-act)}
.flag-warn{background:var(--rose-bg);color:var(--rose)}
.cta-card{background:linear-gradient(135deg,var(--teal-act) 0%,#1B443F 100%);border-radius:16px;padding:28px 32px;text-align:center;box-shadow:0 8px 32px rgba(35,88,82,.30)}
.cta-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2.5px;color:rgba(252,248,238,.65);margin-bottom:12px}
.cta-title{font-family:'Playfair Display',serif;font-size:22px;color:#FBF7F0;margin-bottom:8px;line-height:1.3}
.cta-desc{font-size:13px;color:rgba(252,248,238,.75);line-height:1.6;margin-bottom:24px}
.btn-cta-main{background:#FBF7F0;color:var(--teal-act);padding:13px 28px;border-radius:var(--r);border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;display:inline-block;text-decoration:none}
.btn-cta-main:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.cta-fine{font-size:11px;color:rgba(252,248,238,.50);margin-top:14px}
.retry-link{display:block;text-align:center;margin-top:20px;font-size:12px;color:var(--c55);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.retry-link:hover{color:var(--teal-act)}
.form-group.has-error .form-input{border-color:var(--rose-glow)}
.error-msg{font-size:12px;color:var(--rose);margin-top:6px;display:none}
.form-group.has-error .error-msg{display:block}
.tool-footer{text-align:center;margin-top:12px;font-size:11px;color:var(--c55)}
.tool-footer a{color:var(--teal-act);text-decoration:none}
.btn-spinner{width:14px;height:14px;border:2px solid rgba(252,248,238,.4);border-top-color:#FBF7F0;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn-primary.loading .btn-spinner{display:block}
.btn-primary.loading .btn-text{opacity:.7}
.btn.loading .btn-spinner{display:block}
.btn.loading .btn-text{opacity:.7}
.btn.loading{pointer-events:none}
/* Tombol audit sekarang benar-benar di-`disabled` selama proses, bukan cuma
   diberi class .loading (18 Agustus 2026, supaya submit lewat Enter tidak
   mengirim token Turnstile yang sama dua kali). Tanpa baris ini,
   `.btn-primary:disabled{opacity:.5}` di atas ikut menyala dan tampilan keadaan
   memuat jadi lebih pudar daripada sebelumnya, padahal yang berubah cuma
   penjagaannya. Kekhususannya 0,3,0 melawan 0,2,0, jadi dia menang tanpa
   bergantung pada urutan blok di berkas gabungan ini. */
.btn-primary.loading:disabled{opacity:1}
.detail-head:focus-visible,.retry-link:focus-visible,.tab-btn:focus-visible,.upload-zone:focus-within{outline:2px solid var(--teal-act);outline-offset:2px;border-radius:var(--r)}
@media(max-width:440px){
  .score-hero{flex-direction:column;text-align:center;gap:18px;padding:24px 22px}
  .score-hero-info{text-align:center}
  .score-target{justify-content:center}
  .card-head,.card-body{padding-left:16px;padding-right:16px}
  #screen-results{padding-left:14px;padding-right:14px}
}
.sp-strip{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(35,88,82,.07);border-radius:var(--r);border-left:3px solid var(--teal-act);margin-bottom:18px}
.sp-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-act);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.sp-text{font-size:12px;color:var(--c85);line-height:1.4}
.sp-text strong{color:var(--teal-act);font-weight:600}
.ats-inline{display:block;font-size:11px;color:var(--teal-act);margin-top:3px;line-height:1.4;opacity:.85}
.flow-steps{display:flex;align-items:center;margin-bottom:20px}
.flow-step{display:flex;align-items:center;gap:6px}
.fs-dot{width:20px;height:20px;border-radius:50%;background:var(--c20);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--c55);flex-shrink:0;transition:background .3s,color .3s}
.flow-step.active .fs-dot{background:var(--teal-act);color:#FBF7F0}
.flow-step.done .fs-dot{background:rgba(35,88,82,.15);color:var(--teal-act);font-size:11px}
.fs-label{font-size:11px;color:var(--c55)}
.flow-step.active .fs-label{color:var(--teal-act);font-weight:500}
.fs-line{flex:1;height:1px;background:var(--c20);margin:0 10px;min-width:20px}
.fs-line.done{background:var(--teal-glow)}
.results-qnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.rqn-btn{font-size:12px;padding:6px 14px;border-radius:20px;border:1px solid var(--teal-glow);color:var(--teal-act);background:var(--glass);text-decoration:none;transition:all .2s;white-space:nowrap;display:inline-block}
.rqn-btn:hover{background:var(--teal-glow2);border-color:var(--teal-act)}
.seo-block{max-width:520px;width:100%;margin-top:28px;padding:0 4px}
.seo-block-title{font-family:'Playfair Display',serif;font-size:15px;color:var(--ink);margin-bottom:8px}
.seo-block-text{font-size:13px;color:var(--c55);line-height:1.7}
.faq-section{max-width:520px;width:100%;margin-top:28px;padding-bottom:48px}
.faq-heading{font-family:'Playfair Display',serif;font-size:18px;color:var(--ink);margin-bottom:16px}
.faq-item{border-top:1px solid var(--c20)}
.faq-item:last-child{border-bottom:1px solid var(--c20)}
.faq-q{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 2px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink);line-height:1.5;user-select:none;background:none;border:none;width:100%;text-align:left;font-family:inherit}
.faq-q .faq-icon{flex-shrink:0;color:var(--teal-act);font-size:16px;line-height:1;transition:transform .25s;margin-top:1px}
.faq-q.open .faq-icon{transform:rotate(45deg)}
.faq-a{font-size:11.5px;color:var(--c85);line-height:1.6;padding:0 2px 13px;display:none}
.faq-a.open{display:block}
.consent-list{margin:18px 0 16px}
.consent-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;cursor:pointer}
.consent-item+.consent-item{border-top:1px solid var(--c10)}
.consent-box{appearance:none;-webkit-appearance:none;flex-shrink:0;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--c20);border-radius:5px;background:var(--c10);cursor:pointer;position:relative;transition:border-color .2s,background .2s}
.consent-box:hover{border-color:var(--teal-glow)}
.consent-box:checked{background:var(--teal-act);border-color:var(--teal-act)}
.consent-box:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #FBF7F0;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent-box:focus-visible{outline:2px solid var(--teal-act);outline-offset:2px}
.consent-text{font-size:12px;color:var(--c85);line-height:1.55}
.consent-text .req{color:var(--rose)}
.consent-item.has-error .consent-box{border-color:var(--rose);background:var(--rose-bg)}
.consent-error{font-size:12px;color:var(--rose);margin:-6px 0 12px 28px;display:none}
.consent-error.visible{display:block}
.role-val{background:var(--rose-bg);border:1px solid var(--rose-glow);border-radius:var(--r);padding:13px 15px;margin-top:12px}
.role-val-msg{font-size:12.5px;color:var(--c85);line-height:1.55;margin-bottom:10px}
.role-val-chips{display:flex;flex-wrap:wrap;gap:8px}
.role-chip{font-size:12px;padding:6px 13px;border-radius:20px;border:1px solid var(--teal-glow);background:var(--glass);color:var(--teal-act);transition:all .2s;font-family:inherit;cursor:pointer}
.role-chip:hover{background:var(--teal-act);color:#FBF7F0;border-color:var(--teal-act)}
.target-label{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:.3px;margin-bottom:10px}
.jd-zone{border:2px dashed var(--c20);border-radius:var(--r);padding:18px 16px;text-align:center;cursor:pointer;transition:all .25s;background:var(--c10)}
.jd-zone:hover,.jd-zone.drag-over{border-color:var(--teal-glow);background:var(--teal-glow2)}
.jd-zone.has-file{border-style:solid;border-color:var(--teal-glow);background:rgba(35,88,82,.06)}
.jd-zone.loading{opacity:.6;pointer-events:none}
.jd-zone:focus-visible{outline:2px solid var(--teal-act);outline-offset:2px}
.jd-zone-icon{font-size:22px;margin-bottom:5px}
.jd-zone-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}
.jd-zone-sub{font-size:11.5px;color:var(--c55);line-height:1.45;max-width:340px;margin:0 auto}
.jd-status{font-size:11.5px;line-height:1.4;margin-top:8px;text-align:center}
.jd-status.ok{color:var(--teal-act)}.jd-status.error{color:var(--rose)}.jd-status.loading{color:var(--c55)}
/* Sambutan untuk yang datang dari halaman lowongan. Duduk di kepala kartu
   "Audit CV baru", sebelum pembatas "CV kamu". Aksen teal supaya terbaca
   sebagai keterangan, bukan peringatan. */
.gkv3-dari-lowongan{font-size:12.5px;line-height:1.55;margin:0 0 16px;padding:10px 13px;border:1px solid var(--teal-act);border-left-width:3px;border-radius:9px;background:var(--c10);color:var(--c55)}
.gkv3-dari-lowongan b{color:var(--c85);font-weight:600}
/* Tab "Pakai CV lama" di layar gate. Tiap baris tombol penuh selebar kolom:
   sasaran sentuhnya jadi sebesar barisnya, bukan sebesar tulisannya. */
.gkv3-cvlama{display:flex;flex-direction:column;gap:8px}
.gkv3-cvlama-baris{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--c20);border-radius:var(--r);background:var(--c10);cursor:pointer;font-family:inherit;transition:border-color .18s ease,background-color .18s ease}
.gkv3-cvlama-baris:hover{border-color:var(--teal-act)}
.gkv3-cvlama-baris.dipilih{border-color:var(--teal-act);background:rgba(0,0,0,.03)}
.gkv3-cvlama-nama{font-size:13.5px;font-weight:600;color:var(--c85);line-height:1.35;word-break:break-word}
.gkv3-cvlama-ket{font-size:11.5px;color:var(--c55);line-height:1.45}
.gkv3-cvlama-nota{font-size:11.5px;color:var(--c55);line-height:1.5;margin:2px 0 0}
/* "Lihat semua N CV tersimpan". Sengaja teks, bukan tombol berkotak: kalau dia
   berkotak seperti baris CV di atasnya, dia terbaca sebagai pilihan keempat.
   Yang dilakukannya membuka daftar, bukan memilih CV. */
.gkv3-cvlama-semua-btn{align-self:flex-start;background:none;border:0;padding:2px 0;margin-top:2px;font:inherit;font-size:12.5px;font-weight:600;color:var(--teal-act);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gkv3-cvlama-semua-btn:hover{color:var(--c85)}
/* Daftar di dalam pop-up. Dibatasi tingginya lalu digulir sendiri: tanpa itu,
   sepuluh baris memanjang melewati layar HP dan kendali halaman di bawahnya
   jadi tidak pernah terlihat tanpa menggulir seluruh modal. */
.gkv3-cvlama--semua{max-height:60vh;overflow-y:auto;padding:0 2px}
.gkv3-cvlama-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--c20)}
.gkv3-cvlama-nav[hidden]{display:none}
.gkv3-cvlama-navbtn{font:inherit;font-size:12.5px;font-weight:600;color:var(--teal-act);background:none;border:1px solid var(--c20);border-radius:8px;padding:6px 12px;cursor:pointer}
.gkv3-cvlama-navbtn:disabled{opacity:.4;cursor:default}
.gkv3-cvlama-navket{font-size:12px;color:var(--c55)}
/* Keterangan asal isi kotak JD (alur ?job=<handle> dari halaman lowongan).
   Tiga keadaan: memuat, terisi, gagal. Yang gagal TIDAK memakai warna merah
   penuh: JD yang tidak bisa diambil bukan kesalahan orangnya dan bukan alat
   yang rusak, cuma satu kemudahan yang tidak jadi. Merah di sini akan
   terbaca sebagai audit yang tidak bisa dilanjutkan, padahal bisa. */
.gkv3-jd-sumber{font-size:12px;line-height:1.5;margin-bottom:10px;padding:9px 11px;border-radius:9px;border:1px solid var(--c20);background:var(--c10);color:var(--c55)}
.gkv3-jd-sumber b{color:var(--c85);font-weight:600}
.gkv3-jd-sumber.ok{border-color:var(--teal-act);background:rgba(0,0,0,.02)}
.or-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--c55);font-size:10px;text-transform:uppercase;letter-spacing:1.5px}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--c20)}
.reaudit-banner{display:none;align-items:center;gap:14px;border-radius:12px;padding:14px 18px;margin-bottom:18px}
.reaudit-banner.up{background:rgba(35,88,82,.10);border:1px solid var(--teal-glow)}
.reaudit-banner.flat{background:var(--c10);border:1px solid var(--c20)}
.rb-delta{font-family:'Playfair Display',serif;font-size:30px;font-weight:600;line-height:1;flex-shrink:0}
.rb-delta.up{color:var(--teal-act)}.rb-delta.down{color:var(--rose)}.rb-delta.flat{color:var(--c55)}
.rb-text{font-size:13px;color:var(--c85);line-height:1.5}
.gkv3-rewrite-banner{display:flex;align-items:center;gap:10px;border-radius:12px;padding:14px 18px;margin-bottom:18px;background:var(--c10);border:1px solid var(--c20);font-size:13px;color:var(--c85);text-decoration:none;cursor:pointer}
/* 🔴 WAJIB, dan ini bug yang dilaporkan Rivaldy 2026-08-26 sebagai "blok
   kosong di bawah Ringkasan auditor".

   Atribut `hidden` bawaannya cuma `display:none` dari stylesheet peramban,
   dan `display:flex` di baris tepat di atas ini kekhususannya lebih tinggi,
   jadi dia MENANG. Akibatnya banner ini tetap tergambar walau JS sudah
   menyetel `hidden = true`: kotak berbingkai setinggi ~46px berisi nol teks,
   di tempat paling terlihat di halaman hasil, untuk SEMUA orang yang CV-nya
   belum pernah ditulis ulang, yaitu hampir semua orang.

   Tidak ada error, tidak ada gejala di konsol, dan kodenya terbaca benar:
   `slotRewrite.hidden = true` memang berhasil, cuma tidak berakibat apa-apa.

   ⚠ Pola ini mengintai di tiap elemen yang diberi display eksplisit lalu
   disembunyikan lewat atribut `hidden`. Kalau menambah aturan display ke
   elemen yang JS-nya memakai `.hidden`, tambahkan pasangan [hidden] juga. */
.gkv3-rewrite-banner[hidden]{display:none}
.gkv3-rewrite-banner:hover{border-color:var(--teal-glow)}
.gkv3-rewrite-banner b{color:var(--ink-900,var(--c85))}
.gkv3-rewrite-banner .grb-arrow{margin-left:auto;flex-shrink:0}
.rb-text b{color:var(--ink)}
/* BATCH 22: isi card "Analisis Lengkap" yang terkunci di tier gratis.
   Header card (nama dimensi + skor) tetap kelihatan sebagai teaser; yang
   dikunci cuma isinya. Konten aslinya memang tidak dikirim backend (lihat
   buildSystemPromptFree di cv-audit-gas.js), jadi ini bukan sekadar tutup CSS. */
.lock-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 20px;background:var(--gd2);border:1px dashed var(--gd);border-radius:12px}
.lock-box .gk-ico{width:26px;height:26px;color:var(--gold)}
.lock-text{font-size:13px;color:var(--c55);line-height:1.55;max-width:340px}
.lock-cta{display:inline-block;background:var(--gold-teks);color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;padding:9px 18px;border-radius:999px;transition:filter .2s}
.lock-cta:hover{filter:brightness(1.08)}
/* ── Tier gratis, pola baru 2026-08-11 ───────────────────────────────────
   Satu dimensi dibuka utuh, empat dikunci dengan satu baris, dan ajakan
   bayarnya cuma sekali di kotak penutup. Sebelumnya kelima kartu memakai
   .lock-box penuh dengan teks identik. */
.contoh-gratis-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:var(--gd2);color:var(--gold-strong);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.contoh-gratis-tag .gk-ico{width:13px;height:13px;color:var(--gold)}
/* Baris kunci yang ringkas. Tanpa border dan tanpa tombol -- kartu terkunci
   tidak boleh berteriak lebih keras daripada kartu yang isinya benar-benar
   berguna, karena empat lawan satu. */
.lock-ringkas{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--c55);font-size:12.5px;line-height:1.5}
.lock-ringkas .gk-ico{width:14px;height:14px;color:var(--gold);flex:none}
/* Baris tautan ke panduan menulis CV, di kartu Impact Language yang skornya
   lemah. Sengaja MIRIP .lock-ringkas tapi kelasnya sendiri: yang itu berarti
   "terkunci", yang ini cuma keterangan. Menyamakan kelasnya akan bikin sesi
   berikutnya mengira baris ini bagian dari gembok, lalu ikut menyembunyikannya
   waktu tier berbayar. */
.panduan-ringkas{padding:4px 0;color:var(--c55);font-size:12.5px;line-height:1.5}
.panduan-ringkas a{color:inherit;font-weight:600;border-bottom:1px solid var(--gold);text-decoration:none}
.panduan-ringkas a:hover{color:var(--ink)}
.lock-box-akhir{margin-top:14px}
.lock-blok-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--ink,#1a1a1a)}
.lock-box-akhir .lock-text{max-width:460px}
/* Card next-step versi member (tier gratis): CTA emas, bukan teal */
.ns-card-cta.ns-member{color:var(--gold);font-weight:600}

/* BATCH 23: isi pop-up "fitur member" saat tombol Unduh laporan PDF diklik
   di tier gratis. Tombolnya sengaja tetap bisa diklik (tidak disabled) supaya
   pop-up-nya sempat menjelaskan, bukan diam-diam mati. */
.lock-modal-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 22px 24px}
.lock-modal-ico{width:38px;height:38px;color:var(--gold)}
.lock-modal-text{font-size:13.5px;color:var(--c55);line-height:1.6;max-width:360px;margin:0}
.lock-modal-dismiss{background:none;border:none;font-size:12.5px;color:var(--subtle);cursor:pointer;padding:4px 8px;text-decoration:underline;font-family:inherit}
.lock-modal-dismiss:hover{color:var(--ink)}
/* Tombol PDF saat terkunci: gembok kecil di depan label */
#download-pdf-btn.is-locked .btn-text::before{content:'';display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px;background-color:currentColor;-webkit-mask:var(--lock-mask) center/contain no-repeat;mask:var(--lock-mask) center/contain no-repeat}
:root{--lock-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='4.5' y='10' width='15' height='10.5' rx='2'/><path d='M8 10V7.2a4 4 0 0 1 8 0V10'/></svg>")}

/* FASE 3: upsell tier gratis, ditampilkan cuma kalau data.tier === 'free' */
.tier-upsell{display:none;gap:14px;align-items:flex-start;background:var(--gd2);border:1px solid var(--gd);border-radius:14px;padding:18px 20px;margin-bottom:20px}
.tu-icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--gd2);border:1px solid var(--gd);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.tu-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);font-weight:600;margin-bottom:4px}
.tu-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;line-height:1.4}
.tu-desc{font-size:12.5px;color:var(--c55);line-height:1.55;margin-bottom:10px}
.tu-cta{display:inline-block;background:var(--gold);color:#FBF7F0;font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:999px;text-decoration:none;transition:opacity .2s}
.tu-cta:hover{opacity:.88}
.btn-share{background:var(--teal-act);color:#FBF7F0;width:100%;box-shadow:0 2px 12px rgba(35,88,82,.25);margin-bottom:10px}
.btn-share:hover{background:var(--teal-hi);transform:translateY(-1px);box-shadow:0 4px 20px rgba(35,88,82,.35)}
.share-overlay{position:fixed;inset:0;background:rgba(26,23,18,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:500;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:28px 14px}
.share-overlay.open{display:flex}
.share-panel{background:var(--navy);border-radius:18px;max-width:540px;width:100%;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.share-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.share-title{font-family:'Playfair Display',serif;font-size:19px;color:var(--ink)}
.share-x{background:none;border:none;font-size:20px;color:var(--c55);cursor:pointer;line-height:1;padding:4px}
.share-sub{font-size:12.5px;color:var(--c55);margin-bottom:14px;line-height:1.5}
.share-tabs{display:flex;gap:8px;margin-bottom:14px}
.share-tab{flex:1;padding:9px;border:1px solid var(--c20);background:var(--glass);border-radius:8px;font-size:12.5px;color:var(--c55);cursor:pointer;font-family:inherit;font-weight:500;transition:.2s}
.share-tab.active{border-color:var(--teal-act);background:var(--teal-glow2);color:var(--teal-act)}
/* T12: stage tidak lagi menggeser. Di panel selebar ~350px, kartu 460px
   cuma menyisakan potongan ("GETKARIER" jadi "KARIER"), dan orang harus
   menggeser untuk melihat kartunya sendiri. Sekarang pembungkusnya
   diperkecil proporsional; overflow:hidden supaya sisa kotak transform
   tidak memunculkan bar geser palsu. */
.share-stage{display:block;margin-bottom:14px;overflow:hidden}
/* 🔴 display:block + margin:0 auto, BUKAN flex+center. Dengan flex, kotak
   selebar 460px di panel 315px dipusatkan dulu sehingga tepi kirinya keluar
   layar, dan transform-origin:top left lalu mengecilkannya dari titik yang
   sudah tergeser -- hasilnya kartu tetap terpotong di kiri, cuma lebih kecil.
   Dengan block, kotak yang lebih lebar dari induknya mulai di tepi kiri, dan
   margin auto tetap memusatkannya begitu ruangnya cukup (>=460px, di mana
   skalanya juga sudah 1). */
.share-stage-skala{transform-origin:top left;width:460px;margin:0 auto}
.sc-card{width:460px;height:460px;position:relative;overflow:hidden;font-family:'DM Sans',sans-serif;border-radius:14px;flex-shrink:0}
.share-actions{display:flex;gap:10px;flex-wrap:wrap}
.share-actions .btn{flex:1;min-width:120px}
.scap{margin-top:13px;background:var(--c10);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--c85);line-height:1.55}
.scap-lbl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--c55);margin-bottom:5px;font-weight:600}
/* ── SNEAK PEEK ────────────────────────────────────────────────── */
.sneak-wrap{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:16px;border:1px solid var(--c20);max-height:190px}
.sneak-inner{background:var(--navy);padding:14px;pointer-events:none;user-select:none;transform:scale(0.57);transform-origin:top left;width:175.4%}
.sneak-overlay{position:absolute;bottom:28px;left:0;right:0;height:60%;background:linear-gradient(to bottom,rgba(252,248,238,0) 0%,var(--navy) 100%);pointer-events:none}
.sneak-badge{text-align:center;font-size:11px;color:var(--c55);padding:8px 12px;background:var(--dark);border-top:1px solid var(--c20)}
/* ── REWRITE TOGGLE ────────────────────────────────────────────── */
.rw-toggle-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--teal-act);background:none;border:none;cursor:pointer;padding:6px 0 2px;font-family:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.rw-toggle-btn:hover{color:var(--teal-hi)}
.rw-after-wrap{display:none}
.rw-after-wrap.open{display:block}
/* ── SECONDARY CTA ─────────────────────────────────────────────── */
.cta-secondary{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--gd);border-radius:12px;padding:16px 20px;display:flex;gap:14px;align-items:center;margin-top:14px;margin-bottom:20px}
.cta-sec-img{width:72px;height:102px;object-fit:contain;border-radius:5px;flex-shrink:0}
.cta-sec-body{flex:1}
.cta-sec-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);margin-bottom:3px}
.cta-sec-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.35}
.cta-sec-desc{font-size:11.5px;color:var(--c55);line-height:1.45;margin-bottom:7px}
.btn-sec-link{font-size:12px;color:var(--teal-act);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.btn-sec-link:hover{text-decoration:underline;text-underline-offset:2px}
.btn-ebook{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r);background:var(--teal-act);color:#FBF7F0;font-size:12.5px;font-weight:600;border:none;cursor:pointer;transition:all .22s;font-family:inherit;margin-top:6px}
.btn-ebook:hover{background:var(--teal-hi);transform:translateY(-1px);box-shadow:0 4px 14px rgba(35,88,82,.3)}
@media(max-width:440px){.cta-secondary{flex-direction:column;align-items:flex-start}}
/* ── SECTION DIVIDER ───────────────────────────────────────────── */
.sec-divider{display:flex;align-items:center;gap:10px;margin:20px 0 14px;color:var(--c55);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px}
.sec-divider::before,.sec-divider::after{content:'';flex:1;height:1px;background:var(--c20)}
/* ── ICON SYSTEM (Batch 16) ────────────────────────────────────── */
.gk-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}
.gk-ico svg{display:block;width:100%;height:100%}
.ico-teal{color:var(--teal-act)}
.ico-gold{color:var(--gold)}
.ico-ink{color:var(--ink)}
.ico-rose{color:var(--rose)}
/* D6 (2026-08-11): layar unggah bertahap. Tahap 1 cuma CV, sisanya menyusul
   sesudah CV-nya masuk.

   🔴 TIDAK ADA elemen yang dipindah. Blok "CV kamu" tetap duduk di tengah form
   seperti sebelumnya; yang terjadi cuma sembilan blok lain disembunyikan, jadi
   dia otomatis menjadi satu-satunya yang terlihat. Memindahkannya ke atas
   lewat DOM atau lewat `order` flex sama-sama berisiko di berkas sebesar ini:
   yang pertama menyentuh struktur yang dipegang belasan `getElementById`, yang
   kedua mematikan margin collapse di seluruh form dan menggeser jarak antar
   blok yang sudah diukur terhadap mockup. Menyembunyikan tidak melakukan
   dua-duanya.

   ⚠ `display:none`, bukan `visibility` atau tinggi nol: field wajib yang cuma
   transparan tetap ikut validasi bawaan browser, dan orangnya akan ditolak
   submit karena field yang tidak pernah dia lihat. */
#gate-form.gkv3-tahap1 .gkv3-lanjutan{display:none!important}
/* Selama tahap 1, kisi dua kolom runtuh jadi satu. Tanpa ini kolom CV tetap
   duduk di kolom pertama dari `1fr auto 1fr` dan berdiri separuh lebar dengan
   ruang kosong menganga di sebelahnya, yang terbaca sebagai halaman rusak,
   bukan sebagai langkah pertama. Dibatasi lebarnya supaya kotak unggah tidak
   melar jadi pita panjang di layar lebar. */
@media(min-width:1000px){
  #gate-form.gkv3-tahap1 .gkv2-input-grid{grid-template-columns:minmax(0,560px);justify-content:center}
}
/* Transisi. Yang dianimasikan cuma isi tahap 2 yang BARU muncul, sekali,
   lewat kelas yang dipasang gkv3CekTahap() lalu dicabut sendiri. Menganimasikan
   `display` tidak mungkin, jadi yang dipakai opacity + geser kecil.

   ⚠ `prefers-reduced-motion` dihormati: gerakan yang muncul tiba-tiba di
   tengah layar itu justru yang paling mengganggu buat orang yang mematikannya. */
@keyframes gkv3Muncul{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#gate-form.gkv3-baru-buka .gkv3-lanjutan{animation:gkv3Muncul .28s ease-out both}
@media(prefers-reduced-motion:reduce){
  #gate-form.gkv3-baru-buka .gkv3-lanjutan{animation:none}
}
.gkv3-tahap-nota{
  font-size:12.5px;color:var(--c55);line-height:1.5;margin-top:12px;
  display:flex;align-items:flex-start;gap:7px
}
#gate-form:not(.gkv3-tahap1) .gkv3-tahap-nota{display:none}
/* D2: ceklis norma negara (2026-08-12). */
.norma-card{background:var(--white);border:1px solid var(--ink-200);border-radius:14px;padding:18px;margin-bottom:14px}
.norma-sub{font-size:13.5px;color:var(--body);line-height:1.55;margin:0 0 14px}
.norma-list{display:flex;flex-direction:column;gap:12px}
.norma-row{display:flex;align-items:flex-start;gap:10px}
.norma-row .gk-ico{margin-top:1px;flex:none}
.norma-title{font-size:13.5px;font-weight:700;color:var(--ink-900);margin-bottom:2px}
.norma-msg{font-size:13px;color:var(--c55);line-height:1.5}
.norma-catatan{display:flex;align-items:flex-start;gap:8px;margin-top:15px;padding:11px 13px;
  background:rgba(184,134,43,.07);border-radius:10px;font-size:12.5px;color:var(--body);line-height:1.5}
.norma-catatan .gk-ico{margin-top:1px;flex:none}
.norma-kaki{font-size:12px;color:var(--c55);line-height:1.5;margin:13px 0 0}
/* B1: kartu "Kerjakan tiga ini dulu" (2026-08-11). Sengaja pakai latar emas
   pucat, bukan kartu putih seperti tetangganya: ini satu-satunya blok di
   halaman hasil yang menyuruh melakukan sesuatu, dan kalau rupanya sama dengan
   kartu informasi di bawahnya, dia hilang di dalam tumpukan. */
.top3-card{
  background:var(--gold-50,#fdf8ec);border:1px solid var(--gold-300,#e8d9ae);
  border-radius:14px;padding:16px 18px;margin:18px 0 6px
}
.top3-head{display:flex;align-items:center;gap:8px}
.top3-title{font-family:'Space Grotesk',system-ui,sans-serif;font-size:16px;font-weight:700;color:var(--ink-900);margin:0}
.top3-sub{font-size:12.5px;color:var(--ink-500);margin:5px 0 0}
.top3-list{margin:11px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.top3-list li{font-size:14px;line-height:1.55;color:var(--body)}
.top3-list li::marker{font-weight:700;color:var(--gold-500,#b8912f)}
/* ── D3 · Proyeksi skor ────────────────────────────────────────────
   Sengaja teal, BUKAN emas seperti .top3-card tepat di atasnya. Kartu
   emas isinya pekerjaan yang harus dilakukan, kartu ini isinya hasil
   kalau pekerjaan itu selesai. Dua kartu bertumpuk dengan warna yang
   sama akan terbaca sebagai satu blok panjang. */
.proy-card{
  background:rgba(35,88,82,.05);border:1px solid rgba(35,88,82,.22);
  border-radius:14px;padding:16px 18px;margin:12px 0 6px
}
.proy-head{display:flex;align-items:center;gap:8px}
.proy-title{font-family:'Space Grotesk',system-ui,sans-serif;font-size:16px;font-weight:700;color:var(--ink-900);margin:0}
.proy-utama{font-size:14px;line-height:1.6;color:var(--body);margin:9px 0 0}
.proy-utama b{color:var(--teal-act);font-weight:700}
.proy-nama{font-size:12.5px;line-height:1.55;color:var(--ink-700);margin:6px 0 0}
.proy-nama b{color:var(--ink-900);font-weight:600}
/* Keterangan sumber angkanya. Kecil tapi jangan sampai kelewat redup:
   dia yang mengubah rentang di atas dari janji jadi perkiraan. */
/* T14: 11,5px -> 12px. Keterangan kaki kartu proyeksi berbentuk kalimat. */
.proy-kaki{font-size:12px;line-height:1.55;color:var(--ink-500);margin:10px 0 0}
/* Baris per dimensi, di dalam kartu breakdown. */
.proy-baris{
  display:flex;align-items:flex-start;gap:7px;margin:0 0 11px;
  font-size:12.5px;line-height:1.5;color:var(--teal-act);font-weight:500
}
.proy-baris .gk-ico{margin-top:1px;flex:none}
/* Tombol audit ulang, di dalam kartu proyeksi. Sengaja tombol garis, bukan
   tombol penuh: CTA utama halaman ini tetap rewrite, dan dua tombol pekat
   di satu layar akan saling melemahkan. */
.proy-ulang{
  display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  padding:9px 16px;border-radius:var(--radius-pill,999px);
  background:transparent;border:1px solid rgba(35,88,82,.35);color:var(--teal-act);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background var(--tr,.2s),border-color var(--tr,.2s)
}
.proy-ulang:hover{background:rgba(35,88,82,.08);border-color:var(--teal-act)}
.proy-ulang .gk-ico{flex:none}
/* Versi terkunci untuk tier gratis. Satu baris, bukan kotak gembok besar:
   halaman ini sudah punya satu .lock-box di ujung daftar dimensi, dan
   audit UX 2026-08-11 mencatat pesan bayar berulang sebagai omelan. */
.proy-lock{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:12px;
  font-size:12.5px;color:var(--ink-500)
}
.proy-lock .gk-ico{flex:none}
.proy-lock-cta{
  margin-left:auto;padding:7px 15px;border-radius:var(--radius-pill,999px);
  background:var(--teal-act);color:#FBF7F0;font-size:12.5px;font-weight:600;
  text-decoration:none;white-space:nowrap
}
@media print{
  .proy-card{background:transparent!important;break-inside:avoid}
  /* Tombol tidak berguna di kertas, dan ajakan bayar di dalam laporan yang
     sudah diunduh cuma jadi noda. */
  .proy-ulang,.proy-lock{display:none!important}
}
/* Section header with icon */
.section-head{display:flex;align-items:center;gap:9px;margin:6px 0 13px;padding-left:2px}
.section-head .section-label{margin:0}
.section-head .gk-ico{width:26px;height:26px;color:var(--teal-act)}
/* Category icon inside breakdown sub-card */
.sub-card-name-row{display:flex;align-items:center;gap:7px}
.sub-card-name-row .gk-ico{color:var(--teal-act)}
.sub-card-name-row .sub-card-name{flex:1}
/* Numbered circle badge (Analisis Lengkap) */
.detail-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FBF7F0;font-size:11px;font-weight:600;font-family:'DM Sans',sans-serif;flex-shrink:0;letter-spacing:.3px}
.num-good{background:var(--teal-act)}
.num-ok{background:var(--gold)}
.num-weak{background:var(--rose)}
/* Status pill (6-second scan) -- pill berwarna dgn icon */
.scan-row-flag{display:inline-flex;align-items:center;gap:4px;font-weight:600;line-height:1}
.scan-row-flag .gk-ico{width:13px;height:13px}
/* ── FASE 2: Masalah Utama box (skor < 60) ─────────────────────── */
.mu-box{border-radius:10px;padding:12px 14px;margin-bottom:14px}
.mu-box.mu-weak{background:var(--rose-bg);border:1px solid var(--rose-glow)}
.mu-box.mu-ok{background:var(--gd2);border:1px solid var(--gd)}
.mu-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.mu-box.mu-weak .mu-head{color:var(--rose)}
.mu-box.mu-ok .mu-head{color:var(--gold)}
.mu-head .gk-ico{width:16px;height:16px}
/* Warna ditulis eksplisit, tidak lagi diwarisi dari .mu-head. Warisannya
   --rose, dan --rose di atas latar rose muda cuma 4,29. Sesudah: 5,76. */
.mu-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--red-700)}
.mu-finding{margin-bottom:0}

/* ── 2026-08-26: kartu dimensi diratakan jadi 3 blok ───────────────────────
   Masalahnya / Perbaikannya / Contohnya. Sebelumnya 8 blok, empat di antaranya
   berlabel huruf kapital sendiri-sendiri (Kekuatan, Yang Kurang, Gap, Solusi)
   padahal menjawab cuma dua pertanyaan. Alasan lengkapnya di renderResults().

   .dm-lbl memakai geometri yang sama persis dengan .mu-label supaya blok biasa
   dan blok "Masalah Utama" terbaca sebagai satu keluarga; yang membedakan cuma
   warna dan latar kotaknya. */
.dm-blok{margin-bottom:14px}
.dm-blok:last-child{margin-bottom:0}
.dm-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:7px}
.dm-lbl-masalah{color:var(--gold)}
.dm-lbl-perbaikan{color:var(--teal-act)}
.dm-lbl-contoh{color:var(--c55)}
/* Paragraf terakhir di dalam sebuah blok tidak boleh menyumbang jarak lagi:
   .detail-finding bawaannya margin-bottom 14px, dan blok pembungkusnya sudah
   memberi jarak yang sama. Tanpa dua baris ini tiap blok berakhir dengan ruang
   ganda, dan di kartu berisi tiga blok jaraknya menumpuk jadi terlihat seperti
   ada blok kosong di antaranya. */
.dm-blok>.detail-finding:last-child,
.mu-finding>.detail-finding:last-child{margin-bottom:0}
/* Kekuatan: satu baris, bukan blok berlabel. Dia keterangan pembuka kartu,
   jadi ukurannya sengaja di bawah teks temuan. */
.dm-kuat{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--c55);line-height:1.5;margin-bottom:14px}
.dm-kuat .gk-ico{width:14px;height:14px;color:var(--teal-act);flex-shrink:0;margin-top:2px}
/* ── FASE 2: Tips grid ─────────────────────────────────────────── */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:4px}
.tip-cell{display:flex;align-items:flex-start;gap:7px;background:var(--c10);border-radius:8px;padding:9px 11px;font-size:12.5px;color:var(--c85);line-height:1.45}
.tip-cell .gk-ico{width:15px;height:15px;color:var(--teal-act);flex-shrink:0;margin-top:1px}
/* 2026-08-26: .tip-cell jadi <label> berisi kotak centang, menggantikan pop-up
   "Ceklis Perbaikan CV" yang dicabut. Kotaknya meminjam .ns-checkbox yang
   sudah ada (lihat blok NEXT STEP di bawah), jadi bentuk centangnya sama
   persis dengan yang dulu dipakai pop-up itu, cuma ukurannya diturunkan
   supaya sepadan dengan teks 12,5px di baris ini.
   ⚠ .tip-cek harus lebih khusus daripada .ns-checkbox supaya ukurannya
   menang; keduanya sama-sama satu kelas, jadi urutan di berkas ini yang
   memutuskan, dan blok NEXT STEP memang datang sesudah blok ini. Karena itu
   ukurannya ditulis dengan dua kelas sekaligus, bukan mengandalkan urutan. */
.tip-cell{cursor:pointer}
.ns-checkbox.tip-cek{width:16px;height:16px;margin-top:0;border-radius:4px}
/* Centangnya digambar ulang untuk kotak 16px. Nilai bawaan .ns-checkbox
   dihitung untuk kotak 18px, dan kalau dibiarkan ujung centangnya menyembul
   sedikit di luar kotak. Bedanya satu-dua piksel dan tidak akan pernah
   dilaporkan siapa pun, tapi dia muncul di tiap baris tips. */
.ns-checkbox.tip-cek:checked::after{left:4px;top:1px;width:4px;height:8px}
.tip-cell.checked .tip-teks{color:var(--c55);text-decoration:line-through}
/* ── FASE 2: keyword highlight di rewrite "after" ──────────────── */
.rewrite-after strong{color:var(--teal-hi);font-weight:600;background:rgba(35,88,82,.12);padding:0 3px;border-radius:3px}
/* ── FASE 3: stat footer (4 stat computed) ─────────────────────── */
.stat-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 22px}
@media(max-width:540px){.stat-footer{grid-template-columns:repeat(2,1fr)}}
.stat-cell{background:var(--glass);border:1px solid var(--c20);border-radius:12px;padding:14px 10px;text-align:center;box-shadow:0 2px 12px rgba(26,23,18,.06)}
.stat-cell .gk-ico{width:24px;height:24px;margin:0 auto 7px}
.stat-num{font-family:'Playfair Display',serif;font-size:27px;font-weight:600;line-height:1;color:var(--ink)}
.stat-num small{font-size:11px;color:var(--c55);font-family:'DM Sans',sans-serif;font-weight:400}
.stat-label{font-size:10.5px;color:var(--c55);line-height:1.35;margin-top:6px}
.stat-label b{color:var(--c85);font-weight:600;display:block;font-size:11px}
/* ── FASE 3: ATS before/after mockup (BATCH 18: static illustration, fixed aspect-ratio, stacks on mobile) ── */
.ats-mock{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 14px}
@media(max-width:480px){.ats-mock{grid-template-columns:1fr;max-width:220px;margin-left:auto;margin-right:auto}}
.ats-mock-card{border:1px solid var(--c20);border-radius:10px;padding:11px 11px 9px;background:var(--c10)}
.ats-mock-cap{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.ats-mock-card.bad .ats-mock-cap{color:var(--rose)}
.ats-mock-card.good .ats-mock-cap{color:var(--teal-act)}
.ats-mock-cap .gk-ico{width:13px;height:13px}
.ats-mock-card svg{display:block;width:100%;height:auto;aspect-ratio:120/150;border-radius:5px}
.ats-mock-hint{font-size:11px;color:var(--c55);line-height:1.5;margin:0 0 12px;display:flex;align-items:flex-start;gap:6px}
.ats-mock-hint .gk-ico{width:14px;height:14px;color:var(--gold);flex-shrink:0;margin-top:1px}
/* ── BATCH 17: NEXT STEP SECTION ───────────────────────────────── */
.nextstep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
@media(max-width:680px){.nextstep-grid{grid-template-columns:1fr}}
.ns-card{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--c20);border-radius:14px;padding:20px 18px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 2px 12px rgba(26,23,18,.06);user-select:none}
.ns-card:hover{border-color:var(--teal-glow);box-shadow:0 6px 22px rgba(35,88,82,.16);transform:translateY(-2px)}
.ns-card:focus-visible{outline:2px solid var(--teal-act);outline-offset:2px}
.ns-card-icon{width:38px;height:38px;border-radius:10px;background:rgba(35,88,82,.12);display:flex;align-items:center;justify-content:center;color:var(--teal-act);margin-bottom:12px}
.ns-card-icon .gk-ico{width:20px;height:20px}
.ns-card-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.ns-card-desc{font-size:12.5px;color:var(--c55);line-height:1.5;margin-bottom:12px}
.ns-card-cta{font-size:12px;color:var(--teal-act);font-weight:500}
.ns-sub{font-size:12.5px;color:var(--c55);margin-bottom:14px;line-height:1.5}
.ns-empty{font-size:13px;color:var(--c55);line-height:1.6;text-align:center;padding:20px 10px}
.ns-checklist{list-style:none}
.ns-check-item{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;cursor:pointer;border-radius:8px}
.ns-check-item:hover{background:var(--teal-glow2)}
.ns-check-item+.ns-check-item{border-top:1px solid var(--c10)}
.ns-check-item.checked .ns-check-text{color:var(--c55);text-decoration:line-through}
.ns-checkbox{appearance:none;-webkit-appearance:none;flex-shrink:0;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--c20);border-radius:5px;background:var(--c10);cursor:pointer;position:relative}
.ns-checkbox:checked{background:var(--teal-act);border-color:var(--teal-act)}
.ns-checkbox:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #FBF7F0;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ns-check-text{font-size:13px;color:var(--c85);line-height:1.5}
.ns-check-text b{color:var(--ink)}
.ns-kw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ns-kw-chip{font-size:12.5px;padding:6px 13px;border-radius:20px;background:rgba(35,88,82,.10);color:var(--teal-act);border:1px solid var(--teal-glow)}
/* D1: keyword yang belum ada di CV. Merah, dan kelompoknya ditaruh DULUAN --
   yang perlu dikerjakan mendahului yang sudah beres. */
.ns-kw-chip.is-hilang{background:rgba(198,72,58,.09);color:var(--red-700);border-color:rgba(198,72,58,.28)}
/* Warna merahnya dari #C6483A ke --red-700 (30 Agustus 2026): 4,23 -> 5,63.
   Polanya sama persis dengan .mu-label -- merah penuh di atas latar merah
   muda selalu kekurangan sedikit. Chip ini isinya kata kunci yang BELUM ada
   di CV, jadi dia salah satu isi paling bisa ditindaklanjuti di alat ini. */
.ns-kw-grup{margin-bottom:16px}
.ns-kw-grup:last-child{margin-bottom:0}
.ns-kw-lab{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-900);margin-bottom:8px}
.ns-kw-note{font-size:12px;color:var(--c55);line-height:1.5;margin-top:9px}
.ns-tip-row{display:flex;align-items:flex-start;gap:9px;padding:9px 2px;font-size:13px;color:var(--c85);line-height:1.5}
.ns-tip-row+.ns-tip-row{border-top:1px solid var(--c10)}
.ns-tip-row .gk-ico{color:var(--teal-act);flex-shrink:0;margin-top:1px}

/* ══════════ BATCH 19 · Get Karier DS refit ══════════ */
:root{--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  --green:#3F8F5B;--amber:#D69121;--gold-strong:#9C6F20;--gold-soft:#FBF3E2;--gold-line:#EACE8F;
  --teal-soft:#E8F1F0;--sunken:#EFE9DF;--border:#E0D8CB;--muted:var(--ink-500);--subtle:#7A6F62;--body:#3B342D;}
html,body{background:var(--ocean);color:var(--ink)}
a{color:var(--teal-act)}a:hover{color:var(--teal)}

/* header */
header{height:58px;background:#fff;border-bottom:1px solid var(--border);padding:0 26px;box-shadow:none}
.h-logo{height:22px}
.h-wordmark{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.h-divider{background:var(--border)}
.h-subtitle{color:var(--muted);font-size:11px;letter-spacing:.14em}
.h-badge{background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-strong)}

/* de-glass every surface */
.card,.score-hero,.sub-card,.detail-card,.scan-card,.loading-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* ⚠ `.loading-card` SENGAJA tidak ikut baris putih di bawah. Dulu dia ikut,
   dan `background:#fff!important` itu membuat kartu proses rewrite tidak
   bisa dibuat gelap tanpa menambah !important baru yang dilarang gate
   checklist. Warnanya tidak hilang: .gkv3-load sudah menyetel putih sendiri
   untuk mode audit (baris ~1384). Yang dicabut cuma paksaannya. */
.card,.score-hero,.sub-card,.detail-card,.scan-card{background:#fff!important}
.card{border:1px solid var(--border);border-radius:18px;box-shadow:0 1px 2px rgba(26,23,18,.04),0 10px 30px rgba(26,23,18,.05);max-width:560px}
.card-head{padding:28px 32px 20px;border-bottom:1px solid var(--border)}
.card-eyebrow{color:var(--gold-strong);letter-spacing:.16em;font-weight:600;font-size:11px;margin-bottom:12px}
.card-title{font-size:27px;font-weight:600;line-height:1.24;letter-spacing:-.015em;margin-bottom:12px}
.card-desc{font-size:14px;color:var(--muted);line-height:1.62}
.card-body{padding:26px 32px 30px}
.screen{padding:34px 18px 64px}

/* forms roomier */
.form-label{color:var(--muted);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;margin-bottom:8px}
.form-input{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.form-input:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(203,160,67,.28)}
.form-input::placeholder{color:var(--subtle)}
select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8862B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-group{margin-bottom:22px}
textarea.form-input{line-height:1.55}

/* section divider */
.sec-divider{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--border);display:flex;align-items:center}

/* buttons */
.btn{border-radius:10px;font-weight:600;font-size:14px;padding:13px 20px;transition:.16s;gap:9px}
/* Latar --gold -> --gold-teks (30 Agustus 2026): teks putih di atas
   --gold-500 cuma 3,24. Ketemu di tombol "Bagikan" dalam modal Bagikan,
   yang cuma tergambar sesudah modalnya dibuka -- lihat catatan sapuan di
   ekor berkas soal permukaan yang lolos karena tidak pernah dirender. */
.btn-primary{background:var(--gold-teks);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--gold-strong);color:#fff;transform:none;box-shadow:none}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--teal-act);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--teal-soft);border-color:var(--teal-act)}

/* tabs */
.tab-bar{background:var(--sunken);border-radius:10px;padding:4px}
.tab-btn{border-radius:7px;color:var(--muted)}
.tab-btn.active{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(26,23,18,.10)}

/* upload zone */
.upload-zone{background:var(--sunken);border:2px dashed var(--border);border-radius:12px;padding:32px 20px}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--gold);background:var(--gold-soft)}
.upload-zone.has-file{border-color:var(--teal-act);border-style:solid;background:var(--teal-soft)}
.upload-title{color:var(--ink)}.upload-sub{color:var(--muted)}
.upload-file-name{color:var(--teal-act)}

/* consent */
.consent-text{color:var(--body)}
.consent-box:checked{background:var(--teal-act);border-color:var(--teal-act)}

/* ── SCORE HERO (1a editorial) ── */
.score-hero{border:1px solid var(--border);border-radius:20px;box-shadow:0 1px 2px rgba(26,23,18,.04),0 10px 30px rgba(26,23,18,.05);padding:36px;gap:32px;margin-bottom:20px}
.score-num-val{font-size:40px}
.score-num-max{color:var(--muted)}
.score-label{color:var(--gold-strong);letter-spacing:.16em;font-weight:600;font-size:11px}
.score-headline{font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.score-summary{color:var(--body);font-size:13.5px;line-height:1.62}
.score-track{stroke:var(--sunken)}
.score-fill{stroke:var(--green)}
.score-fill.mid{stroke:var(--amber)}
.score-fill.low{stroke:var(--rose)}
.score-target{background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-strong);border-radius:999px;padding:6px 14px;font-weight:500;font-size:12px}

/* download button = gold primary; hero actions roomy */
#download-pdf-btn{background:var(--gold)!important;color:#fff!important;border:none!important;box-shadow:none!important}
#download-pdf-btn:hover{background:var(--gold-strong)!important;color:#fff!important}
#download-pdf-btn .btn-spinner{border-color:rgba(255,255,255,.35)!important;border-top-color:#fff!important}

/* section headings */
.section-head{display:flex;align-items:center;gap:9px;margin:34px 0 15px}
.section-head .gk-ico{color:var(--gold-strong)}
.section-label{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin:0}

/* ── SUB-SCORES (1b grid cards) ── */
.sub-grid{gap:12px;margin-bottom:8px}
.sub-card{border:1px solid var(--border)!important;border-radius:13px;box-shadow:0 1px 2px rgba(26,23,18,.04)!important;padding:16px 17px}
.sub-card:hover{border-color:var(--gold-line)!important;box-shadow:0 5px 16px rgba(26,23,18,.07)!important}
.sub-card-name{color:var(--body);font-weight:500}
.sub-card-score{font-size:26px}
.sub-card-score .out-of{color:var(--muted)}
.sub-bar-wrap{background:var(--sunken)}
.bar-high{background:var(--green)}.bar-mid{background:var(--amber)}.bar-low{background:var(--rose)}
.sub-card-note{color:var(--muted)}
.sub-card-link{color:var(--teal-act);opacity:.85}
.gk-ico.ico-teal{color:var(--teal-act)}

/* ── DETAIL CARDS (1b) ── */
.detail-stack{gap:12px}
.detail-card{border:1px solid var(--border)!important;border-radius:13px;box-shadow:0 1px 2px rgba(26,23,18,.04)!important}
.detail-head:hover{background:var(--gold-soft)}
.detail-num{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:13px;color:#fff;flex-shrink:0}
.detail-num.num-good{background:var(--teal-act)}
.detail-num.num-ok{background:var(--gold-teks)}   /* teks putih: 3,24 -> 5,09 */
.detail-num.num-weak{background:var(--rose)}
.detail-name{color:var(--ink)}
.detail-score{color:var(--muted)}
.badge-good{background:var(--teal-soft);color:var(--teal-act);border:1px solid rgba(35,88,82,.2)}
.badge-ok{background:var(--gold-soft);color:var(--gold-strong);border:1px solid var(--gold-line)}
.badge-weak{background:var(--rose-bg);color:var(--rose);border:1px solid var(--rose-glow)}
.rewrite-block,.rw{background:var(--sunken)}
.rewrite-after{color:var(--teal-act)}
.rewrite-before{color:var(--rose)}
.rw-toggle-btn{color:var(--teal-act)}
.tip-cell{background:var(--sunken)}
.mu-box.mu-weak{background:var(--rose-bg)}
.mu-box.mu-ok{background:var(--gold-soft)}

/* ── CTA cards ── */
.cta-card{background:var(--teal-act)!important;border-radius:20px;box-shadow:0 10px 30px rgba(35,88,82,.22)}
.cta-eyebrow{color:rgba(255,255,255,.68)}
.cta-title{color:#fff}
.cta-desc{color:rgba(255,255,255,.82)}
.btn-cta-main{background:#fff;color:var(--teal-act)}
.btn-cta-main:hover{background:#fff}
.cta-fine{color:rgba(255,255,255,.55)}
.cta-secondary{background:#fff!important;border:1px solid var(--border)!important;border-radius:16px;box-shadow:0 1px 2px rgba(26,23,18,.04)}
.cta-sec-eyebrow{color:var(--gold-strong)}
.btn-ebook{background:var(--teal-act)}

.tool-footer{color:var(--muted)}
.tool-footer a{color:var(--teal-act)}

/* ── hide trimmed sections (base) ── */
.tier-upsell,.scan-card,.stat-footer,#share-btn,.nextstep-grid,.share-overlay{display:none!important}

/* ══════════════════════════════════════════════════════════════════
   BATCH 21 · Get Karier DS -- "Studio" refit
   Menyelaraskan tampilan penuh dengan mockup Studio: score hero teal
   gradient + gauge emas tebal, dan semua section mockup ditampilkan
   (6-second scan, stat footer, next-step, share). Copy & fungsi TIDAK
   diubah -- hanya presentasi.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --gold-200:#EACE8F;--gold-300:#DDB65F;--gold-600:#9C6F20;
  --teal-600:#235852;--teal-700:#1B443F;--teal-50v:#E8F1F0;
  --ink-50v:#FBF7F0;--ink-100v:#EFE9DF;--ink-200v:#E0D8CB;--ink-300v:#C2B7A8;
  --cream:#FBF7F0;
  --cream-85:rgba(251,247,240,.85);--cream-70:rgba(251,247,240,.72);
  --cream-60:rgba(251,247,240,.6);--cream-22:rgba(251,247,240,.22);
  --cream-18:rgba(251,247,240,.18);--cream-14:rgba(251,247,240,.14);
}

/* ---- HEADER · sticky blur + Gratis pill ---- */
header{height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:0 26px}
.h-badge{display:inline-flex;align-items:center;gap:5px;margin-left:auto;background:var(--gold-soft);border:1px solid var(--gold-200);color:var(--gold-600);font-size:11px;font-weight:600;padding:4px 11px;border-radius:999px;letter-spacing:0;text-transform:none}

/* ---- FLOW STEPS · progres atas gate ----
   max-width + margin auto: sebelumnya stepper melar selebar kartu 560px karena
   .fs-line pakai flex:1, dan tiga titik yang direntang selebar itu terbaca
   seperti navigasi halaman, bukan penanda progres. Dipendekkan sekitar
   separuh lalu ditaruh di tengah (F-CVA-01). */
.flow-steps{display:flex;align-items:center;margin:0 auto 20px;max-width:290px}
.flow-step{display:flex;align-items:center;gap:7px}
.fs-dot{width:22px;height:22px;border-radius:50%;background:var(--ink-100v);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink-300v);flex-shrink:0}
.flow-step.active .fs-dot{background:var(--teal-act);color:var(--cream)}
.flow-step.done .fs-dot{background:var(--teal-soft);border:1px solid var(--teal);color:var(--teal-act)}
/* Warna label langkah dinaikkan dari --ink-300v (1,85, praktis tak terbaca)
   ke --muted pada 30 Agustus 2026. Label memikul INFORMASI -- "Target & data",
   "Hasil" -- dan orang yang tidak bisa membacanya tidak tahu apa yang akan
   diminta berikutnya.
   🔴 .fs-dot SENGAJA dibiarkan redup. Titik memikul STATUS, bukan informasi:
   nomornya sudah diulang oleh urutan posisinya, dan langkah aktif tetap
   dibedakan oleh dot teal terisi + label teal. Menggelapkan dua-duanya akan
   membuat langkah yang belum dijalani terlihat sama dengan yang sedang
   dijalani, yaitu menukar satu masalah keterbacaan dengan masalah lain. */
.fs-label{font-size:11px;color:var(--muted);white-space:nowrap}
.flow-step.active .fs-label{color:var(--teal-act);font-weight:600}
.flow-step.done .fs-label{color:var(--teal-act)}
.fs-line{flex:1;height:1px;background:var(--ink-200v);margin:0 9px;min-width:16px}

/* ---- CARDS · radius mockup ---- */
.card{border-radius:20px}
#screen-results{max-width:760px}

/* ---- SCORE HERO · STUDIO (teal gradient, cream text, gauge emas tebal) ---- */
.score-hero{background:linear-gradient(135deg,var(--teal-act) 0%,var(--teal-700) 100%)!important;border:none!important;border-radius:20px;box-shadow:0 14px 40px rgba(27,68,63,.26)!important;padding:34px;gap:28px}
.score-hero .score-label{color:var(--gold-200)}
.score-hero .score-headline{color:var(--cream)}
.score-hero .score-summary{color:var(--cream-85)}
.score-hero .score-bullets{color:var(--cream-85)!important}
.score-hero .score-num-val{color:var(--cream)}
.score-hero .score-num-max{color:var(--cream-60)}
.score-hero .score-target{background:var(--cream-14);border:1px solid var(--cream-22);color:var(--cream)}
.score-hero .score-track{stroke:var(--cream-18);stroke-width:12}
.score-hero .score-fill,.score-hero .score-fill.low,.score-hero .score-fill.mid{stroke:var(--gold-300);stroke-width:12}

/* ---- REVEAL section mockup (override hide-trimmed) ---- */
.stat-footer{display:grid!important}
/* #stat-footer-scan dihapus dari markup 2026-08-11, aturannya ikut dicabut. */
.scan-card{display:block!important}
.nextstep-grid{display:grid!important}
.share-overlay{display:none}
.share-overlay.open{display:flex!important}     /* modal share/next-step aktif lagi */

/* ---- RESULT ACTIONS · share + download berdampingan ---- */
.result-actions{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.result-actions .btn{flex:1;min-width:150px;margin:0!important}
/* Latar diturunkan dari --gold ke --gold-teks pada 30 Agustus 2026: teks
   putih di atas --gold-500 cuma 3,24, gagal AA, dan ini tombol paling
   menonjol di halaman hasil. Sesudah: 5,09. Hover-nya --gold-teks-hover,
   BUKAN --gold-strong -- lihat catatan di token itu. */
#share-btn{display:inline-flex!important;background:var(--gold-teks)!important;color:#fff!important;box-shadow:none!important}
#share-btn:hover{background:var(--gold-teks-hover)!important;transform:none}
#download-pdf-btn{background:#fff!important;color:var(--teal-act)!important;border:1px solid var(--border)!important}
#download-pdf-btn:hover{background:var(--teal-soft)!important;border-color:var(--teal-act)!important}
#download-pdf-btn .btn-spinner{border-color:rgba(35,88,82,.35)!important;border-top-color:var(--teal-act)!important}

/* ---- STAT FOOTER · kartu stat ---- */
.stat-cell{border-radius:14px}

/* ---- BREAKDOWN · sub-cards ---- */
.sub-card{border-radius:14px}
.sub-card-score{font-size:28px}

/* ---- 6-SECOND SCAN · white + gold border, flag pill ---- */
.scan-card{background:#fff!important;border:1px solid var(--gold-200);border-radius:16px;box-shadow:0 1px 2px rgba(26,23,18,.04)!important;padding:20px 22px}
.scan-title{color:var(--gold-600);font-weight:700;letter-spacing:.1em}
.scan-num{background:var(--gold-soft);border:1px solid var(--gold-200);color:var(--gold-600)}
.scan-row-flag{font-weight:600;border-radius:999px;padding:3px 9px}
.scan-row-flag.flag-ok{background:var(--teal-soft);color:var(--teal-act)}
.scan-row-flag.flag-warn{background:var(--rose-bg);color:var(--rose)}

/* ---- DETAIL CARDS ---- */
.detail-card{border-radius:14px!important}

/* ---- NEXT-STEP CARDS ---- */
.ns-card{border-radius:14px}
.ns-card:hover{border-color:var(--gold-line);box-shadow:0 8px 24px rgba(26,23,18,.09)}
.ns-card-icon{background:var(--teal-soft);color:var(--teal-act)}

/* ---- PRIMARY CTA · teal gradient + eyebrow emas ---- */
.cta-card{background:linear-gradient(135deg,var(--teal-act) 0%,var(--teal-700) 100%)!important;border-radius:18px;box-shadow:0 12px 34px rgba(27,68,63,.28)!important}
.cta-eyebrow{color:var(--gold-200)}
.btn-cta-main{background:var(--cream);color:var(--teal-700)}

/* ---- EBOOK CTA · border emas ---- */
.cta-secondary{border:1px solid var(--gold-200)!important;border-radius:14px}
.cta-sec-eyebrow{color:var(--gold-600)}

/* ---- MODAL panels ---- */
.share-panel{border-radius:20px}

/* ══════════════════════════════════════════════════════════════════
   BATCH 21b · Detail parity -- nyocokin nilai persis ke mockup Studio
   (hasil probe computed-style langsung dari file referensi).
   ══════════════════════════════════════════════════════════════════ */
:root{--ink-600v:#554C42}

/* --- GATE: section label "CV kamu"/"Data kamu": block, garis tipis ink-100, TANPA garis samping --- */
.sec-divider{display:block!important;margin:26px 0 13px;padding-bottom:9px;border-bottom:1px solid var(--ink-100v);text-align:left;gap:0}
.sec-divider::before,.sec-divider::after{content:none!important;display:none!important}

/* --- GATE: card, eyebrow, title, label --- */
.card{box-shadow:0 1px 2px rgba(26,23,18,.04),0 14px 40px rgba(26,23,18,.06)}
.card-eyebrow{font-weight:700;margin-bottom:13px}
.card-title{line-height:1.22}
.form-label{color:var(--ink-600v)}

/* --- GATE: tabs --- */
.tab-bar{border-radius:11px}
.tab-btn{border-radius:7px;font-size:12.5px;font-weight:500}
.tab-btn.active{box-shadow:0 1px 3px rgba(26,23,18,.12)}

/* --- GATE: upload zone (cream) + icon chip emas --- */
.upload-zone{background:var(--ink-50v)!important;border-color:var(--ink-300v);padding:30px 20px}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--gold);background:var(--gold-soft)!important}
.upload-icon{width:46px;height:46px;margin:0 auto 12px;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold-200);color:var(--gold-600);display:flex;align-items:center;justify-content:center;font-size:0}
.upload-icon svg{display:block}

/* --- GATE: tombol submit prominen spt mockup --- */
#analyze-btn{min-height:54px;font-size:16px}

/* --- RESULTS: hero geometry + tipografi Studio --- */
.score-hero{padding:32px!important;gap:26px!important;margin-bottom:14px!important}
.score-hero .score-svg{width:128px;height:128px}
.score-hero .score-num-val{font-weight:700}
.score-hero .score-label{font-size:10px;font-weight:700;letter-spacing:.14em}
.score-hero .score-headline{font-size:22px;font-weight:600;line-height:1.28}

/* --- RESULTS: section headers --- */
.section-head{margin:26px 0 14px}
.section-label{font-size:15px;letter-spacing:.04em}
.section-head .gk-ico{width:22px;height:22px}

/* --- RESULTS: stat cells --- */
.stat-cell{box-shadow:0 1px 2px rgba(26,23,18,.04)!important;padding:15px 10px}
.stat-cell .gk-ico{width:22px;height:22px}
.stat-num{font-size:26px}

/* --- RESULTS: breakdown --- */
.sub-card{padding:16px 18px}
.sub-card-name{font-weight:600;font-size:12.5px;color:var(--body)}
.sub-bar-wrap{height:5px}

/* --- RESULTS: 6-second scan --- */
.scan-title{font-size:11px}
.scan-row-label{font-weight:600}

/* --- RESULTS: detail number → lingkaran, DM Sans --- */
.detail-num{width:26px;height:26px;border-radius:50%!important;font-family:var(--sans);font-size:11px;font-weight:700}

/* --- RESULTS: rewrite block (cream) + tips jadi baris polos (bukan cell isi) --- */
.rewrite-block,.rw{background:var(--ink-50v)!important;border:1px solid var(--ink-100v)}
.rewrite-label{font-weight:700}
.rewrite-after{color:var(--teal-700)}
.tips-grid{grid-template-columns:1fr!important;gap:0}
.tip-cell{background:transparent!important;border-radius:0;padding:6px 0;border-top:1px solid var(--ink-100v)}
.tips-grid .tip-cell:first-child{border-top:none}
/* Sorotan hover ditulis di lapisan ini, bukan di blok dasarnya. Baris di atas
   memaksa background transparan dengan !important, jadi aturan hover di blok
   dasar akan kalah dan mati diam-diam. Ditambahkan 2026-08-26 bersama kotak
   centang di tiap baris tips: barisnya sekarang bisa diklik, dan baris yang
   bisa diklik tanpa satu pun tanda cuma ketahuan oleh yang iseng mencoba. */
.tip-cell:hover{background:var(--teal-glow2)!important}

/* --- RESULTS: next-step icon chip --- */
.ns-card-icon{width:40px;height:40px;border-radius:11px}

/* ══════════════════════════════════════════════════════════════════
   BATCH 21c · Sweep semua halaman (asterisk wajib, loading, popup, JD)
   ══════════════════════════════════════════════════════════════════ */
/* asterisk field wajib → merah (gate: Target negara / Nama depan / Email) */
.req{color:var(--rose)}

/* LOADING · kartu putih berbingkai + ring emas (mockup) */
.loading-card{max-width:400px;border:1px solid var(--border);border-radius:20px;box-shadow:0 1px 2px rgba(26,23,18,.04),0 14px 40px rgba(26,23,18,.06);padding:48px 34px}
.loading-ring{width:58px;height:58px;border:3px solid var(--ink-100v);border-top-color:var(--gold)}

/* JD upload zone · latar putih spt mockup */
.jd-zone{background:#fff;border-color:var(--ink-300v)}

/* POPUP · scrim & panel */
.share-overlay{background:rgba(26,23,18,.5)}
.share-panel{padding:24px}
.share-title{font-size:20px}
.ns-checkbox{width:20px;height:20px;border-radius:6px}

/* ══════════════════════════════════════════════════════════════════
   BATCH 21d · revisi lanjutan
   ══════════════════════════════════════════════════════════════════ */
/* HERO: hapus paragraf ringkasan, sisakan bullet point */
.score-hero .score-summary{display:none!important}
/* HERO: headline pakai DM Sans (lebih kebaca di panel teal), bukan Playfair */
.score-hero .score-headline{font-family:var(--sans)!important;font-size:20px;font-weight:600;line-height:1.36;letter-spacing:0}
/* STAT FOOTER: semua ikon hijau/teal, samakan dgn panel hero di atasnya */
.stat-cell .gk-ico{color:var(--teal-act)!important}

/* ══ CV REWRITE (Fase 3, BRIEF-CV-Rewrite.md section 9) ══════════════
   Prefix .cvr- wajib untuk SEMUA kelas baru di blok ini (P7/J11: .rw- sudah
   dipakai contoh rewrite di kartu audit, lihat baris ~355 di atas).
   Ditaruh di ATAS blok LANGKAH 3a di bawah ini, BUKAN di bawahnya (J2/9.6):
   blok itu menang atas tinggi header semata-mata karena letaknya paling
   akhir, dan menaruh CSS baru di bawahnya akan memotong tinggi header lagi
   secara diam-diam. Verifikasi lewat getComputedStyle, jangan percaya mata. */

#screen-rewrite{align-items:stretch}

.cvr-subhead{
  /* K-bug 3.2: top:0/z-index:20 dulu kalah rebutan sama header{top:0;
     z-index:200}, jadi baris Salin & Unduh masuk ke belakang header dan
     tidak bisa diklik pas discroll. header tingginya 72px (.h-inner), jadi
     subhead ditempel PERSIS di bawahnya dengan z-index di bawah header
     tapi tetap di atas konten biasa. */
  position:sticky;top:72px;z-index:150;width:100%;
  background:var(--ocean);border-bottom:1px solid var(--c20);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 16px;margin:-18px -16px 18px;
}
.cvr-subhead-title{font-size:14px;font-weight:600;color:var(--ink)}
.cvr-subhead-title small{display:block;font-size:12px;font-weight:400;color:var(--c55);margin-top:2px}
.cvr-subhead-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cvr-toggle-compare{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--teal-act);background:none;border:none;cursor:pointer;padding:6px 0 2px;font-family:inherit;text-decoration:underline;text-underline-offset:3px;transition:color var(--tr)}
.cvr-toggle-compare:hover{color:var(--teal-hi)}
.cvr-toggle-compare.active{font-weight:600}
.cvr-ph-counter{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--gold);background:var(--gd2);border:1px solid var(--gd);border-radius:999px;padding:5px 12px}

.cvr-layout{width:100%;max-width:900px;display:flex;flex-direction:column;gap:20px}
@media(min-width:900px){.cvr-layout{flex-direction:row;align-items:flex-start;max-width:1040px}}

.cvr-skeleton-panel{
  background:var(--glass);border:1px solid var(--c20);border-radius:16px;
  padding:16px;flex-shrink:0;
}
@media(min-width:900px){
  .cvr-skeleton-panel{width:260px;position:sticky;top:72px;}
}
@media(max-width:899px){
  .cvr-skeleton-panel{display:flex;gap:10px;overflow-x:auto;padding:12px 14px;-webkit-overflow-scrolling:touch}
  .cvr-skel-title,.cvr-skel-stats{flex-shrink:0}
  .cvr-skel-rows{display:flex;gap:8px}
  .cvr-skel-row{flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap;padding:8px 10px;border-radius:10px;background:var(--teal-glow2);border-bottom:none!important}
}
.cvr-skel-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal-act);font-weight:600;margin-bottom:10px}
.cvr-skel-rows{display:flex;flex-direction:column}
.cvr-skel-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--c10);font-size:12.5px}
.cvr-skel-row:last-child{border-bottom:none}
.cvr-skel-row .gk-ico{width:15px;height:15px;color:var(--teal-act);flex-shrink:0}
.cvr-skel-row-title{color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis}
.cvr-skel-status{font-size:11px;color:var(--c55);flex-shrink:0}
.cvr-skel-status.is-changed{color:var(--teal-act);font-weight:600}
.cvr-skel-stats{margin-top:12px;padding-top:12px;border-top:1px solid var(--c20);display:flex;flex-direction:column;gap:6px}
@media(max-width:899px){.cvr-skel-stats{margin-top:0;padding-top:0;border-top:none;border-left:1px solid var(--c20);padding-left:14px;flex-direction:row;gap:14px}}
.cvr-skel-stat{font-size:12px;color:var(--c55)}
.cvr-skel-stat b{color:var(--teal-act);font-weight:700}

.cvr-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}

.cvr-section{background:var(--glass);border:1px solid var(--c20);border-radius:16px;padding:20px 22px}
.cvr-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cvr-section-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal-act);font-weight:600;flex:1}
.cvr-section-badge{font-size:10.5px;font-weight:600;color:var(--teal-act);background:var(--teal-glow2);border-radius:999px;padding:3px 10px}
.cvr-section-note{font-size:12.5px;color:var(--c55);font-style:italic;margin:-6px 0 14px}

.cvr-entry+.cvr-entry{margin-top:18px;padding-top:18px;border-top:1px solid var(--c10)}
.cvr-fact{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--c55);margin-bottom:10px}
.cvr-fact .gk-ico{width:13px;height:13px;flex-shrink:0;opacity:.75}

.cvr-summary-block{font-size:14px;line-height:1.65;color:var(--ink)}

.cvr-bullet{margin-bottom:10px}
.cvr-bullet:last-child{margin-bottom:0}
.cvr-bullet-plain{font-size:13.5px;line-height:1.6;color:var(--c85);padding-left:14px;position:relative}
.cvr-bullet-plain::before{content:'•';position:absolute;left:0;color:var(--c55)}

.cvr-diff{background:var(--teal-glow2);border-radius:12px;padding:12px 14px}
.cvr-before{font-size:12.5px;color:var(--c55);text-decoration:line-through;line-height:1.55;margin-bottom:6px;opacity:.8}
.cvr-after{font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.6}
.cvr-after strong{color:var(--teal-act)}
/* T7 (audit 2026-09-02): 12px -> 13px. Ini keterangan KENAPA satu kalimat
   diubah, jadi justru bagian yang dibaca paling teliti, dan sampai audit
   ini dia teks terkecil di layarnya. Mobile sudah 13px sejak audit
   2026-08-14; desktop tertinggal karena waktu itu yang diaudit cuma
   layar hasil. Italic dipertahankan (belum ada keputusan mencabutnya);
   di dalam .cvr-diff dia memang sudah dinormalkan sejak dulu. */
.cvr-why{font-size:13px;color:var(--c55);font-style:italic;margin-top:8px;line-height:1.6}
/* ── D7 · Tombol tulis ulang satu kalimat ──────────────────────────
   Kecil dan tenang dengan sengaja. Dia berdiri di bawah SETIAP kalimat
   yang ditulis ulang, jadi tombol yang menonjol akan mengubah layar
   rewrite jadi deretan ajakan mengklik. Yang harus menonjol di layar itu
   isi CV-nya, bukan tombolnya. */
/* P7 · kartu header & kontak. Baris usulannya ditandai <ins> dengan bahasa
   visual yang sama dengan diff lain (teal tipis, bukan warna baru), supaya
   terasa satu produk. Lihat BRIEF-CV-Rewrite.md section 9.4. */
.cvr-after ins{background:rgba(35,88,82,.14);color:var(--teal-act,#235852);text-decoration:none;
  border-radius:4px;padding:1px 4px}
.cvr-header-pakai{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:13px;color:var(--ink-500,#75695C);cursor:pointer}
.cvr-header-pakai input{cursor:pointer}
/* Kotak centang itu kendali layar, bukan isi CV. Jangan pernah ikut tercetak. */
@media print{ .cvr-header-pakai{display:none!important} }

.cvr-regen-baris{display:flex;justify-content:flex-end;margin-top:8px}
.cvr-regen-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--radius-pill,999px);
  background:transparent;border:1px solid var(--ink-200,#E0D8CB);color:var(--ink-500,#75695C);
  font-family:inherit;font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s
}
.cvr-regen-btn:hover:not(:disabled){border-color:var(--teal-act);color:var(--teal-act);background:rgba(35,88,82,.06)}
.cvr-regen-btn:disabled{opacity:.5;cursor:not-allowed}
.cvr-regen-btn .gk-ico{flex:none}
/* Sisa jatah. Sengaja diberi latar sendiri supaya kebaca sebagai angka,
   bukan sebagai bagian dari nama tombolnya. Ini satu-satunya tempat
   orangnya bisa tahu tinggal berapa. */
.cvr-regen-sisa{
  padding:2px 7px;border-radius:var(--radius-pill,999px);
  background:var(--ink-100,#EFE9DF);color:var(--ink-700,#3B342D);
  font-size:10.5px;font-weight:700;white-space:nowrap
}
.cvr-regen-btn:disabled .cvr-regen-sisa{background:transparent;padding-left:0}
/* 🔴 Tombol TIDAK boleh ikut tercetak. Jalur cetak menghasilkan CV yang
   dikirim ke perusahaan, dan tombol "Versi lain, sisa 2" di dalam CV
   orang itu kerusakan yang tidak bisa ditarik balik. */
@media print{ .cvr-regen-baris{display:none!important} }
/* Default = mode bersih (9.4): before/why disembunyikan. WAJIB pola
   "sembunyikan semua, tampilkan cuma yang berleluhur .cvr-compare" -- bentuk
   ":not(.cvr-compare) .cvr-before" KELIHATAN masuk akal tapi salah: dia
   cocok begitu ADA SATU SAJA leluhur (mis. <body>) yang tidak berkelas itu,
   dan leluhur seperti itu selalu ada, jadi elemennya malah selalu
   tersembunyi apapun state toggle-nya. Sudah kejadian & ketahuan lewat tes. */
.cvr-before,.cvr-why{display:none}
.cvr-compare .cvr-before,.cvr-compare .cvr-why{display:block}

/* K-bug FASE 4 (4.19): warning skill yang ditambahkan dari JD, TIDAK ada
   di CV asli manapun -- selalu tampil (bukan disembunyikan CSS di atas),
   karena ini bukan bagian before/after biasa, ini disclaimer yang harus
   selalu kelihatan sebelum user unduh CV-nya. */
.cvr-skills-warn{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;
  line-height:1.5;color:#8A2E22;background:var(--rose-bg,#FCEBE8);
  border:1px solid var(--rose-glow,#E8A99C);border-radius:8px;padding:9px 11px;margin-top:8px}
.cvr-skills-warn .gk-ico{width:14px;height:14px;flex-shrink:0;color:var(--rose,#C6483A);margin-top:1px}

/* Kontras: warna teksnya --gold-strong (#9C6F20) = 4,14 di atas krem
   halaman, di bawah ambang 4,5. Garis bawah putus-putusnya TETAP --gold:
   itu hiasan, bukan teks, dan ambang 4,5 tidak berlaku untuknya. */
.cvr-ph{display:inline;border-bottom:2px dashed var(--gold);color:var(--gold-teks,#855F1C);cursor:text;padding:0 1px;font-weight:600}
.cvr-ph:focus{outline:none;background:var(--gd2)}
.cvr-ph.cvr-ph-filled{border-bottom:2px solid var(--teal-act);color:var(--teal-act)}
/* [[ ]] cuma dekorasi visual (pseudo-element), BUKAN bagian dari textContent
   chip -- exporter (cvrBuildCleanCvModel) baca textContent apa adanya, jadi
   kalau kurung sikunya beneran teks yang bisa diedit, dia ikut kebawa ke
   DOCX/PDF/clipboard. Lihat cvrRenderAfterHtml(). */
.cvr-ph::before{content:'[[';margin-right:1px}
.cvr-ph::after{content:']]';margin-left:1px}

.cvr-panel{background:var(--glass);border:1px solid var(--c20);border-radius:16px;padding:20px 22px}
.cvr-panel-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal-act);font-weight:600;margin-bottom:12px}
.cvr-panel-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.55;color:var(--c85);padding:8px 0;border-bottom:1px solid var(--c10)}
.cvr-panel-row:last-child{border-bottom:none}
.cvr-panel-row .gk-ico{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.cvr-panel-row.is-done .gk-ico{color:var(--teal-act)}
.cvr-panel-row.is-pending .gk-ico{color:var(--c55)}
.cvr-panel-row-issue{font-weight:600;color:var(--ink)}
.cvr-panel-row-how{color:var(--c55);margin-top:2px}
.cvr-ats-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cvr-ats-list li{font-size:13px;color:var(--c85);line-height:1.55;padding-left:16px;position:relative}
.cvr-ats-list li::before{content:'→';position:absolute;left:0;color:var(--teal-act)}

/* ── Band CTA (Fase 4, section 9.1) ── titik nyeri maksimum, lebar penuh,
   bukan kartu kecil. 4 state: siap (default gradient teal-gold), saldo
   kurang (sama, cuma tombol & teks beda), tidak-memenuhi-syarat & terkunci
   tier-gratis (dua-duanya warna netral .is-locked/.is-ineligible -- SENGAJA
   BUKAN .lock-overlay: gembok berarti "bayar", padahal dua state ini bukan
   soal uang, jadi gembok di sini akan menyesatkan). */
/* Bentuk baru (redesign 2026-08-05, "Rewrite CTA Band States"). Yang berubah
   bukan cuma warna:

   1. Susunannya jadi MENDATAR -- teks di kiri, tombol di kanan -- bukan tumpukan
      dengan baris tombol di bawah. Empat state di mockup semuanya begitu.
   2. Lingkaran ikon 34px DICABUT. Tidak ada di satu pun dari empat state.
   3. Judulnya pindah dari Playfair ke Space Grotesk. Ini menuruti aturan
      Playfair portal, bukan melanggarnya: "Playfair = momen editorial", dan
      judul band yang menjual sesuatu itu judul biasa. Playfair di halaman ini
      tetap hidup di layar loading rewrite, yang memang naratif.
   4. Dua state gelap dan dua state terang, bukan satu gradient untuk semua.
      Gradient teal-gold lama tidak ada padanannya di desain.

   Latar gelapnya rata (--ink-900), bukan gradient: dua state gelap ini duduk
   bersebelahan dengan kartu skor yang juga ink gelap sejak layar 3. */
.cvr-cta-band{display:none;align-items:center;gap:24px;background:var(--ink-900);border:none;border-radius:16px;padding:24px 28px;margin-bottom:20px;color:var(--ink-50)}
.cvr-cta-main{flex:1;min-width:0}
.cvr-cta-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--gold-400);display:inline-flex;align-items:center;gap:6px}
.cvr-cta-eyebrow .gk-ico{width:13px;height:13px}
.cvr-cta-title{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;line-height:1.35;margin-top:7px}
.cvr-cta-desc{font-size:13.5px;line-height:1.7;color:var(--ink-300);margin-top:6px;max-width:520px}
/* Janji anti-karangan angka, ditampilkan SEBELUM orang membayar (2026-08-11).
   Sengaja diberi garis kiri dan bukan sekadar kalimat lanjutan: isinya dua hal
   yang harus terbaca terpisah dari deskripsi fitur, yaitu batasan (ada bagian
   yang harus kamu isi sendiri) dan alasannya (kami tidak mengarang angka atas
   namamu). Digabung ke paragraf di atasnya, dua-duanya hilang di skimming. */
.cvr-cta-jujur{display:block;margin-top:10px;padding-left:11px;border-left:2px solid var(--gold);font-size:12.5px;line-height:1.65;color:var(--ink-500);max-width:520px}
.cvr-cta-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.cvr-cta-balance{font-size:12px;color:var(--ink-400);font-weight:400}
.cvr-cta-actions{display:flex;align-items:center;gap:10px}
.cvr-cta-btn{flex-shrink:0;background:var(--gold-500);color:var(--ink-900);font-size:14px;font-weight:600;padding:14px 26px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--tr),opacity var(--tr);display:inline-block;font-family:inherit}
.cvr-cta-btn:hover{background:var(--gold-400)}
.cvr-cta-btn:disabled{opacity:.45;cursor:not-allowed;background:var(--gold-500)}
/* Tombol kedua di state saldo-kurang: "Lihat paket Miles" di sebelah
   "Top-up". Sengaja tidak memakai .cvr-cta-btn supaya tidak ada dua tombol
   emas yang sama kuat di satu band. */
.cvr-cta-btn2{flex-shrink:0;background:rgba(251,247,240,.12);color:var(--ink-50);font-size:13px;font-weight:600;padding:13px 20px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;font-family:inherit;transition:background var(--tr)}
.cvr-cta-btn2:hover{background:rgba(251,247,240,.2)}
.cvr-cta-band.is-low-balance .cvr-cta-btn{font-size:13px;padding:13px 22px}

/* Terkunci ("Rewrite jalan dari temuan audit lengkap").
   🔴 KEMBALI GELAP 31 Agustus 2026, permintaan Rivaldy. Sampai hari ini
   kartunya emas muda (--gold-100) dengan tombol ink gelap, dan itu bekerja
   selama dia berbagi baris dengan kartu Career Map: di kolom sempit dia
   sudah cukup menonjol. Sesudah kartu Career Map pindah ke baris lowongan
   (lihat S9), band ini berdiri sendirian selebar kolom di antara blok-blok
   terang lain, dan emas mudanya terbaca sebagai latar halaman, bukan
   sebagai penawaran.
   Yang tinggal di sini cuma padding dan ukuran judulnya; latar, tulisan,
   dan tombolnya sekarang ikut .is-ready -- lihat aturan gradiennya di
   bawah, tempat .is-locked ikut disebut. */
.cvr-cta-band.is-locked{padding:22px 26px}
.cvr-cta-band.is-locked .cvr-cta-title{font-size:18px}
.cvr-cta-band.is-locked .cvr-cta-desc{font-size:13px;max-width:540px;margin-top:5px}
.cvr-cta-band.is-locked .cvr-cta-btn{font-size:13px;padding:13px 22px}

/* Belum bisa dijalankan: putih, garis rose. Ini bukan soal uang, jadi tidak
   ada emas sama sekali di sini -- termasuk di tombolnya. */
.cvr-cta-band.is-ineligible{background:var(--white);border:1px solid var(--red-300);color:var(--ink-900);padding:22px 26px}
.cvr-cta-band.is-ineligible .cvr-cta-eyebrow{color:var(--red-700)}
.cvr-cta-band.is-ineligible .cvr-cta-title{font-size:18px}
.cvr-cta-band.is-ineligible .cvr-cta-desc{font-size:13px;color:var(--ink-500);max-width:540px;margin-top:5px}
.cvr-cta-band.is-ineligible .cvr-cta-btn{background:var(--white);border:1px solid var(--ink-200);color:var(--ink-900);font-size:13px;padding:13px 22px}
.cvr-cta-band.is-ineligible .cvr-cta-btn:hover{background:var(--white);border-color:var(--gold-500)}

/* Menumpuk di bawah 750px -- titik yang sama dengan breakpoint portal, bukan
   560px seperti versi lama. Di 390px band mendatar memaksa judul 19px berbagi
   baris dengan tombol 26px padding, dan dua-duanya kalah. */
@media(max-width:749px){
  .cvr-cta-band{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .cvr-cta-band.is-locked,.cvr-cta-band.is-ineligible{padding:18px 20px}
  .cvr-cta-side{align-items:stretch}
  .cvr-cta-actions{flex-direction:column;align-items:stretch}
  .cvr-cta-btn,.cvr-cta-btn2{width:100%;text-align:center}
  .cvr-cta-desc{max-width:none}
}

/* Layar loading dipakai ulang buat rewrite (section 9.2): cuma 4 langkah,
   bukan 5 -- baris ke-5 disembunyikan lewat kelas ini, label & timing-nya
   diatur cvrEnterLoadingMode()/cvrAnimateRewriteSteps() di JS. */
#screen-loading.cvr-loading-rewrite #step-5{display:none}

/* ── Fase 5: tombol Salin/Unduh di sub-header ── */
.cvr-action-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--glass);border:1px solid var(--c20);border-radius:999px;padding:7px 14px;cursor:pointer;font-family:inherit;transition:opacity .2s}
.cvr-action-btn .gk-ico{width:14px;height:14px}
.cvr-action-btn:hover{opacity:.8}
.cvr-action-btn-primary{color:#FBF7F0;background:var(--teal-act);border-color:var(--teal-act)}

/* ── Fase 5: dialog unduh (reuse .share-overlay/.share-panel) ── */
.cvr-dl-group{margin-bottom:16px}
.cvr-dl-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal-act);font-weight:600;margin-bottom:8px}
.cvr-dl-tabs .share-tab{flex:none;padding:8px 16px}
.cvr-dl-photo-warn{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--c85);background:var(--gd2);border:1px solid var(--gd);border-radius:10px;padding:11px 13px;margin-bottom:16px}
.cvr-dl-photo-warn .gk-ico{width:15px;height:15px;flex-shrink:0;color:var(--gold);margin-top:1px}
.cvr-dl-emptyph-choice{background:var(--gd2);border:1px solid var(--gd);border-radius:10px;padding:13px 15px;margin-bottom:16px}
.cvr-dl-emptyph-msg{font-size:12.5px;line-height:1.5;color:var(--c85);margin-bottom:10px}
.cvr-dl-emptyph-actions{display:flex;flex-direction:column;gap:8px}
.cvr-dl-emptyph-actions .btn{width:100%}

/* ── Fase 5: panel revisi rapikan (K11) ── */
.cvr-polish-panel{background:var(--glass);border:1px solid var(--c20);border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.cvr-polish-copy{flex:1;min-width:220px}
.cvr-polish-title{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.cvr-polish-title .gk-ico{width:15px;height:15px;color:var(--gold)}
.cvr-polish-desc{font-size:12px;color:var(--c55);margin-top:4px;line-height:1.5}
.cvr-polish-btn{flex-shrink:0;background:var(--teal-act);color:#FBF7F0;font-size:13px;font-weight:600;padding:10px 20px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;transition:opacity .2s}
.cvr-polish-btn:hover{opacity:.88}
.cvr-polish-btn:disabled{opacity:.4;cursor:not-allowed}

/* ══ LANGKAH 3a · HEADER PORTAL ═══════════════════════════════════
   Lapisan terakhir, dan HARUS tetap yang terakhir.

   File ini memang bertingkat: batch19 menaruh dasarnya, batch21 ("Studio")
   menempelkan lapisan override di ujung blok CSS, dan di dalam lapisan itu ada
   `header{height:58px}` (baris ~470) dan `header{height:60px}` (baris ~616)

   ⚠ JANGAN pernah menulis tag penutup style secara harfiah di dalam komentar
   ini. Parser HTML tidak mengerti komentar CSS: begitu dia melihat rangkaian
   huruf itu, blok CSS ditutup di situ juga dan SEMUA aturan di bawahnya
   berhenti jadi CSS -- tanpa error, tanpa peringatan, cuma diam-diam tidak
   berlaku. Persis sudah kejadian sekali waktu blok ini pertama ditulis
   (2026-07-19): kalimat yang menjelaskan lapisan CSS justru yang mematikan
   lapisan CSS-nya. Ini kerabat jebakan `</script` yang sudah dicatat di
   memori arsitektur.
   yang menang atas aturan header di bagian RESET & BASE semata-mata karena
   letaknya lebih akhir. Dua angka itu lahir waktu tool ini masih hidup di
   dalam iframe, di mana header setinggi 72px memakan terlalu banyak ruang.

   Sekarang tool ini halaman berdiri sendiri di app.getkarier.com/cv-audit dan
   headernya harus sama persis dengan header portal. Daripada mengubah dua
   aturan lama itu -- yang berisiko menyeret hal lain di lapisan Studio ikut
   bergeser -- polanya diikuti saja: tambah satu lapisan lagi di paling akhir.

   ⚠ Kalau nanti ada yang menempelkan lapisan CSS baru sesudah blok ini,
   tinggi headernya akan terpotong lagi tanpa ada yang sadar. Taruh lapisan
   baru DI ATAS blok ini, bukan di bawahnya. */
header{height:auto;padding:0;background:rgba(255,255,255,.9);border-bottom:1px solid var(--c20)}
/* 🔴 Angkanya JANGAN ditulis ulang di sini. Lapisan ini ada supaya tinggi
   header tidak terpotong aturan lama di lapisan Studio, bukan supaya jadi
   sumber angka kedua. Waktu header dinaikkan ke 1440/77/48 pada 2026-08-05,
   baris ini masih menyatakan 72px/50px dan MENANG karena dia paling akhir --
   pengukuran di layar tetap melaporkan 72px padahal sumbernya sudah benar.
   Sekarang dia menunjuk ke variabel yang sama. */
.h-inner{height:var(--h-header);padding:0 15px}
@media(min-width:768px){.h-inner{padding:0 48px}}
/* .h-badge di lapisan Studio memakai margin-left:auto untuk mendorong dirinya
   ke kanan. Di header baru, yang mendorong adalah .h-spacer, dan margin auto
   itu justru memisahkan badge dari slot akun di sebelahnya. */
.h-badge{margin-left:0}
.screen{min-height:calc(100vh - var(--h-header))}

/* ── BURGER + KERANJANG + DROPDOWN AKUN (2026-07-20) ──────────────
   Aturan-aturan di bawah ini semuanya untuk kelas BARU. Sengaja tidak ada yang
   menyentuh header{} atau .h-inner{}, jadi tinggi header 72px di atas tidak
   ikut bergeser dan peringatan di komentar besar tadi tetap terpenuhi. */
.h-burger{
  width:44px;height:44px;margin-left:-8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:999px;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
/* Tanpa latar sama sekali: tombol ini cuma tampil di layar sentuh, dan di sana
   hover tidak pernah berakhir -- sesudah di-tap lingkarannya menetap. */
.h-burger:hover,.h-burger:active,.h-burger:focus{background:none}
@media(min-width:900px){.h-burger{display:none}}

.h-icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:999px;
  color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.h-icon:hover{background:var(--c10)}}

/* Dropdown akun -- bentuknya disamakan dengan components/AccountMenu.tsx. */
.h-acct{position:relative;display:flex;align-items:center;min-height:44px;gap:0}
.gk-am-btn{padding:0}
.gk-am-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:300;
  width:240px;max-width:calc(100vw - 30px);
  background:#fff;border:1px solid var(--c20);border-radius:16px;
  padding:8px;box-shadow:0 10px 30px rgba(26,23,18,.13);
}
.gk-am-head{padding:10px 12px 12px;border-bottom:1px solid var(--c10);margin-bottom:6px}
.gk-am-name{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gk-am-email{font-size:12px;color:var(--c55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.gk-am-row{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:10px 12px;border-radius:8px;background:none;border:none;
  font-size:14px;font-weight:500;color:var(--c85);text-decoration:none;text-align:left;
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.gk-am-row:hover{background:var(--c10)}}
.gk-am-login{justify-content:center;background:var(--teal-act);color:#FBF7F0;font-weight:600}
@media(hover:hover){.gk-am-login:hover{background:var(--teal-hi)}}
/* Keluar dibikin distinct: dipisah garis, merah, plus ikon. */
.gk-am-out-wrap{margin-top:6px;padding-top:6px;border-top:1px solid var(--c10)}
.gk-am-out{color:#9E362A;font-weight:600}
@media(hover:hover){.gk-am-out:hover{background:#FDF1EF}}

/* Drawer mobile -- geometri sama dengan MobileDrawer.tsx di portal. */
.gk-drawer-backdrop{
  position:fixed;top:72px;left:0;right:0;bottom:0;z-index:400;
  background:rgba(26,23,18,.5);opacity:0;transition:opacity .2s ease-out;
}
.gk-drawer-backdrop.show{opacity:1}
.gk-drawer{
  position:fixed;top:72px;left:0;bottom:0;z-index:401;
  width:300px;max-width:86vw;overflow-y:auto;background:#fff;
  transform:translateX(-100%);transition:transform .2s ease-out;
}
.gk-drawer.show{transform:translateX(0)}
@media(min-width:900px){.gk-drawer,.gk-drawer-backdrop{display:none}}
.gk-dr-in{padding:10px 0}
.gk-dr-row{
  position:relative;display:block;padding:8px 20px;
  font-size:18px;line-height:1.3;font-weight:500;
  color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.gk-dr-row::after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:1px;background:var(--c10)}
.gk-dr-row.is-active{color:var(--gold);font-weight:600}


/*==gk-gaya-batas==*/

/* Blok marketing tambahan (audit 2026-07-23, item 7): hero bergambar +
   3 paket program + cross-sell 99 CV. Prefix gkx- supaya tidak bentrok dengan
   CSS tool yang sudah ada. Memakai variabel palet yang sama (--gold, --muted,
   dll) supaya senada. */
.gkx-hero{width:100%;max-width:960px;margin:0 auto 8px;display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
/* .gkx-hero-media dihapus 2026-08-11 bersama markup-nya. Aturan lamanya
   sengaja TIDAK disimpan: isinya gaya khas placeholder (garis putus-putus,
   teks abu di tengah, rasio 4:3 kosong), dan itu justru yang tidak boleh
   kembali. Kalau aset finalnya jadi, yang dipasang <img>, dan gayanya ditulis
   baru. */
.gkx-eyebrow{color:var(--gold-strong);letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-size:11px;margin-bottom:10px}
.gkx-title{font-family:'Playfair Display',serif;font-size:28px;line-height:1.2;color:var(--ink);margin-bottom:12px}
.gkx-sub{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.gkx-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.gkx-points li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--body)}
.gkx-points li::before{content:"✓";color:var(--teal-act);font-weight:700}
.gkx-programs{width:100%;max-width:960px;margin:44px auto 0}
.gkx-sec-head{text-align:center;margin-bottom:22px}
.gkx-sec-head h2{font-family:'Playfair Display',serif;font-size:24px;color:var(--ink);margin-top:6px}
.gkx-grid{display:grid;grid-template-columns:1fr;gap:16px}
.gkx-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.gkx-card.is-hot{border-color:var(--gold-line);box-shadow:0 10px 30px rgba(184,134,43,.12)}
.gkx-badge{position:absolute;top:-11px;left:24px;background:var(--gold);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}
.gkx-card h3{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:6px}
.gkx-price{font-size:28px;font-weight:700;color:var(--ink);margin-bottom:14px}
.gkx-feats{list-style:none;padding:16px 0 0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border);flex:1}
.gkx-feats li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--body);line-height:1.5}
.gkx-feats li::before{content:"✓";color:var(--teal-act);font-weight:700}
/* .gkx-btn dulu dipakai tombol "Segera hadir" yang memang mati, makanya
   cursor-nya not-allowed dan opacity-nya diturunkan. Sekarang isinya link beli
   yang benar-benar jalan, jadi dua properti itu dicabut. */
.gkx-btn{display:block;text-align:center;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;font-family:inherit;border:1px solid var(--border);background:#fff;color:var(--ink);text-decoration:none;width:100%}
.gkx-btn.is-primary{background:var(--gold);border-color:var(--gold);color:#fff}
.gkx-btn:hover{border-color:var(--gold-line)}
/* Tabel perbandingan paket Miles. Wrapper yang menggeser di layar sempit,
   supaya halamannya sendiri tidak pernah ikut geser ke samping. */
.gkx-cmp-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:#fff}
.gkx-cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.gkx-cmp th,.gkx-cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.gkx-cmp tbody tr:last-child th,.gkx-cmp tbody tr:last-child td{border-bottom:0}
.gkx-cmp thead th{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.gkx-cmp thead th:first-child{font-size:11px;font-weight:600;color:var(--subtle);letter-spacing:.12em;text-transform:uppercase}
.gkx-cmp tbody th{font-weight:500;color:var(--muted);white-space:nowrap}
.gkx-cmp td{color:var(--body)}
.gkx-cmp td b{font-size:16px;color:var(--ink)}
.gkx-cmp .is-hot{background:var(--gold-soft)}
.gkx-cmp-tag{display:block;font-size:10px;font-weight:600;color:var(--gold-strong);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.gkx-cmp td .gkx-btn{margin-top:9px;padding:9px 14px;font-size:13px}
.gkx-cmp-note{max-width:820px;margin:16px auto 0;font-size:13.5px;line-height:1.65;color:var(--muted)}
.gkx-xsell{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:16px;padding:20px 24px;text-decoration:none;color:var(--ink)}
.gkx-xsell b{font-size:16px}
.gkx-xsell p{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.gkx-xsell-cta{flex-shrink:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:600}
@media(min-width:768px){
  /* Dua kolom dicabut bersamaan dengan .gkx-hero-media (2026-08-11). Tanpa
     gambar, "0.9fr 1.1fr" menyisakan satu kolom kosong selebar 45% layar.
     Teksnya dibatasi 720px supaya barisnya tetap enak dibaca, bukan
     memanjang sampai 960px. */
  .gkx-hero{gap:32px;margin-bottom:20px}
  .gkx-hero-copy{max-width:720px}
  .gkx-title{font-size:34px}
  .gkx-grid{grid-template-columns:repeat(3,1fr)}
}

/*==gk-gaya-batas==*/

@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-latin.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Judul & label UI = Space Grotesk. Kalimat = DM Sans. Playfair cuma untuk
   momen editorial, dan di layar ini tidak ada satu pun. */
.gkv3-h{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em}

.gkv3-wrap{width:100%;max-width:1200px;margin:0 auto}
.gkv3-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--subtle);margin-bottom:18px}
.gkv3-crumb b{color:var(--ink-900);font-weight:600}

/* Satu kolom sampai 990px, dua kolom di atasnya. Titiknya sengaja lg (990),
   bukan md (750): rail kanan 380px + form yang masih terbaca butuh lebih
   dari 750px, dan di 800px hasilnya dua kolom yang dua-duanya sempit. */
.gkv3-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media(min-width:990px){
  .gkv3-grid{grid-template-columns:minmax(0,1fr) 380px}
  /* 🔴 Penempatan baris eksplisit, ditambahkan 2026-08-26.
     Penunjuk langkah dipindah jadi anak langsung .gkv3-grid supaya rail kanan
     bisa mulai sejajar dengan kartu "Audit CV baru", bukan dengan penunjuk
     langkah. Tanpa tiga baris ini, penunjuk langkah dan rail sama-sama jatuh
     di baris 1 dan kartu "Saldo kamu" tampil sekitar 42px lebih tinggi
     daripada kartu di kirinya.
     ⚠ Berlaku HANYA di >=990px. Di bawah itu grid-nya satu kolom dan urutan
     alaminya (langkah, kartu, rail) sudah benar, jadi menempelkan grid-row di
     situ justru akan menumpuk ketiganya di baris yang sama. */
  .gkv3-grid>.flow-steps{grid-column:1;grid-row:1}
  .gkv3-grid>.gkv3-kolom{grid-column:1;grid-row:2}
  .gkv3-grid>.gkv3-rail{grid-column:2;grid-row:2}
  /* Rail ikut waktu halaman digulung. Isinya saldo, apa yang didapat, dan
     catatan privasi, yaitu tiga hal yang justru dibutuhkan orangnya SELAGI dia
     mengisi form panjang di sebelah kiri, bukan sebelum dia mulai.
     Offset-nya dihitung dari --h-header dengan alasan yang sama seperti rail
     halaman hasil: header itu sticky di top:0 dengan z-index 200, jadi apa pun
     yang sticky di top:0 akan tenggelam di belakangnya. */
  .gkv3-rail{position:sticky;top:calc(var(--h-header) + 16px)}
}

.gkv3-rail{display:flex;flex-direction:column;gap:14px}
.gkv3-railcard{background:var(--white);border:1px solid var(--ink-200);border-radius:16px;padding:20px 22px}
.gkv3-railcard.is-gold{background:var(--gold-100);border-color:rgba(184,134,43,.3)}
.gkv3-rail-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-teks)}
.gkv3-rail-val{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:24px;color:var(--ink-900);margin-top:2px}
.gkv3-rail-val span{font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;color:var(--gold-500)}
.gkv3-rail-note{font-size:12px;color:var(--ink-500);margin-top:3px;line-height:1.5}
.gkv3-rail-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.gkv3-rail-title{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--ink-900)}
.gkv3-chip{background:#F3E7CE;color:var(--gold-teks);font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.gkv3-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gkv3-benefits li{display:flex;gap:9px;font-size:13px;line-height:1.5;color:var(--ink-700)}
.gkv3-benefits li::before{content:"✓";font-weight:700;color:var(--teal-600);flex:none}
/* Yang TIDAK didapat di tier ini: dicoret dan diredupkan, bukan disembunyikan.
   Daftar yang cuma memuat yang didapat tidak pernah memberi tahu apa yang
   sedang dilewatkan. */
.gkv3-benefits li.is-off{color:var(--subtle);text-decoration:line-through}
.gkv3-benefits li.is-off::before{content:"·";color:var(--subtle)}

/* Pemilih jenis audit. Dua kartu radio betulan (<input type=radio>), bukan
   div ber-onclick: keyboard, panah, dan pembaca layar sudah jalan sendiri
   dari radiogroup bawaan, dan itu tidak gratis kalau dibikin dari div. */
/* T38 (audit 2026-09-02): align-items:stretch + tinggi penuh di kotaknya.
   Judul kartu ketiga dan baris harganya membungkus ke dua baris, jadi
   kartu ketiga menjulur sementara dua yang lain pendek. Nama produknya
   TIDAK dipendekkan: itu keputusan produk, bukan tata letak. */
.gkv3-tipe{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch}
.gkv3-tipe-opt{height:100%}
.gkv3-tipe-opt>.gkv3-tipe-box{height:100%;box-sizing:border-box}
@media(min-width:560px){.gkv3-tipe{grid-template-columns:1fr 1fr}.gkv3-tipe-opt:nth-child(3){grid-column:1/-1}}@media(min-width:1024px){.gkv3-tipe{grid-template-columns:1fr 1fr 1fr}.gkv3-tipe-opt:nth-child(3){grid-column:auto}}
.gkv3-tipe-opt{position:relative;display:block;cursor:pointer}
.gkv3-tipe-opt input{position:absolute;opacity:0;width:0;height:0}
/* display:block WAJIB di sini dan di tiap anaknya. Isi kartu ini ditulis
   dengan <span> supaya boleh berada di dalam <label>, dan <span> itu inline
   secara bawaan -- tanpa baris ini padding, lebar, dan susunan barisnya semua
   runtuh jadi satu baris teks yang saling menumpuk. Sudah kejadian sekali,
   2026-08-04, dan cuma kelihatan di layar. */
.gkv3-tipe-box{display:block;border:1.5px solid var(--ink-200);background:var(--white);border-radius:var(--radius-lg);padding:16px 18px;transition:border-color var(--tr),background var(--tr)}
.gkv3-tipe-top{display:flex}
.gkv3-tipe-name,.gkv3-tipe-price,.gkv3-tipe-desc{display:block}
.gkv3-tipe-opt input:checked + .gkv3-tipe-box{border-color:var(--gold-400);background:var(--gold-100)}
.gkv3-tipe-opt input:focus-visible + .gkv3-tipe-box{box-shadow:0 0 0 3px rgba(203,160,67,.45)}
.gkv3-tipe-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gkv3-tipe-name{font-size:14.5px;font-weight:600;color:var(--ink-900)}
.gkv3-tipe-dot{width:18px;height:18px;border-radius:var(--radius-pill);border:2px solid var(--ink-300);box-sizing:border-box;flex:none;transition:border-color var(--tr),border-width var(--tr)}
.gkv3-tipe-opt input:checked + .gkv3-tipe-box .gkv3-tipe-dot{border:5px solid var(--gold-500)}
.gkv3-tipe-price{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:18px;margin-top:6px}
.gkv3-tipe-price.is-free{color:var(--teal-500)}
.gkv3-tipe-price.is-paid{color:var(--gold-teks)}
.gkv3-tipe-desc{font-size:12px;line-height:1.5;color:var(--ink-500);margin-top:4px}
.gkv3-tipe-badge{position:absolute;top:-9px;right:14px;background:var(--gold-500);color:var(--ink-900);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-pill);z-index:1}
/* Keterangan jujur selama GAS belum menerima tier pilihan. Lihat komentar di
   markup-nya; dicabut begitu jalur backendnya menyusul. */
.gkv3-tipe-kurang{color:var(--gold-teks);font-weight:600;margin-top:6px}
.gkv3-tipe-catatan{font-size:11.5px;line-height:1.5;color:var(--ink-500);margin-top:10px}
/* .card dipatok 520px supaya layar lain tetap sempit dan enak dibaca. Di
   dalam grid ini dia jadi kolom, jadi patokannya dilepas di sini saja. */
.gkv3-grid .card{max-width:none}

/* ══ LAYAR 2 · AUDIT PROGRESS ══════════════════════════════════════
   Diturunkan dari "Audit Progress Desktop" dan "Audit Progress Mobile". */
.gkv3-load{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-xl);padding:40px 44px;max-width:480px;width:100%;text-align:center;box-shadow:var(--shadow-sm)}
@media(max-width:749px){.gkv3-load{padding:30px 24px;border-radius:18px}}

/* Lingkaran ikon + denyut. Mockup memakai emoji 🔍 di sini; yang dipakai
   SVG Lucide 'search' yang sudah ada di GK_ICONS berkas ini, karena
   RULES.md aturan 8 melarang emoji sebagai ikon dan aturan 6 membatasi
   emoji ke momen perayaan. Bentuk, ukuran, dan warnanya tetap ikut mockup. */
.gkv3-load-ikon{position:relative;width:64px;height:64px;margin:0 auto 18px}
@media(max-width:749px){.gkv3-load-ikon{width:56px;height:56px;margin-bottom:14px}}
.gkv3-load-denyut{position:absolute;inset:0;border-radius:var(--radius-pill);background:#F3E7CE;animation:gkv3-ring 1.6s ease-out infinite}
.gkv3-load-bulat{position:absolute;inset:0;border-radius:var(--radius-pill);background:#F3E7CE;display:flex;align-items:center;justify-content:center;color:var(--gold-teks)}
.gkv3-load-bulat svg{width:28px;height:28px}
@keyframes gkv3-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.55);opacity:0}}

.gkv3-load-judul{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--ink-900);margin:0 0 8px}
@media(max-width:749px){.gkv3-load-judul{font-size:19px;margin-bottom:6px}}
.gkv3-load-sub{font-size:13.5px;line-height:1.6;color:var(--ink-500);margin:0 0 22px}
@media(max-width:749px){.gkv3-load-sub{font-size:12.5px;margin-bottom:18px}}
.gkv3-load-berkas{display:block;color:var(--ink-700);font-weight:500;word-break:break-all}

.gkv3-bar{height:9px;background:var(--ink-100);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:10px}
@media(max-width:749px){.gkv3-bar{height:8px;margin-bottom:8px}}
.gkv3-bar-isi{height:100%;width:0;background:var(--gold-500);border-radius:var(--radius-pill);transition:width .6s var(--gk-ease);position:relative;overflow:hidden}
/* Kilau "sedang bekerja" di dalam bilah.
   🔴 Ini SENGAJA bukan kemajuan. Bilahnya sendiri cuma pindah waktu langkah
   sungguhan berganti, dan di mode rewrite jaraknya 55 detik -- cukup lama
   untuk membuat layar yang sehat terlihat menggantung. Kilau ini menjawab
   "masih jalan atau nggak", tanpa ikut mengarang angka: lebarnya tidak
   bergerak sedikit pun karenanya.
   Kalau suatu saat ada yang tergoda membuat lebarnya merayap halus supaya
   "terasa hidup", baca dulu komentar di gkv3PerbaruiBar() -- itu berubah
   jadi klaim ketelitian yang tidak punya dasar. */
.gkv3-bar-isi::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:gkv3BarKilau 1.8s ease-in-out infinite}
@keyframes gkv3BarKilau{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.gkv3-bar-isi::after{animation:none;display:none}}
.gkv3-bar-ket{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--subtle);text-align:left}
@media(max-width:749px){.gkv3-bar-ket{font-size:11px}}

/* Tiga keadaan langkah, mengikuti mockup: selesai ✓ hijau, sedang jalan ●
   emas, belum ○ abu. Menggantikan titik bulat seragam yang lama. */
.gkv3-load .loading-steps{margin-top:22px;text-align:left}
/* Warna langkah yang BELUM jalan dinaikkan dari --ink-300 (1,77, tak terbaca)
   ke --muted pada 30 Agustus 2026. Ini layar tunggu, dan waktu pertama muncul
   KELIMA langkahnya masih pending -- artinya satu-satunya isi layar itu tidak
   terbaca sama sekali sampai langkah pertama menyala. Langkah yang sedang
   jalan dan yang sudah selesai punya warnanya sendiri (emas berdenyut dan
   teal) plus titiknya, jadi statusnya tetap terbaca tanpa perlu langkah
   pending dibuat samar. */
.gkv3-load .loading-step{display:flex;align-items:flex-start;gap:9px;padding:4px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.gkv3-load .loading-step.done{color:#2E7D5B}
.gkv3-load .loading-step.active{color:var(--gold-teks);font-weight:500}
.gkv3-load .step-dot{width:auto;height:auto;background:none;border-radius:0;flex:none;font-size:13px;line-height:1.5}
.gkv3-load .step-dot::before{content:"○"}
.gkv3-load .loading-step.done .step-dot{background:none}
.gkv3-load .loading-step.done .step-dot::before{content:"✓"}
.gkv3-load .loading-step.active .step-dot{background:none;animation:none}
.gkv3-load .loading-step.active .step-dot::before{content:"●"}



/*==gk-gaya-batas==*/

.gk-ftr{background:#1a1712;color:#fbf7f0;margin-top:auto}
.gk-ftr-in{margin:0 auto;max-width:1200px;padding:64px 15px 40px}
@media(min-width:768px){.gk-ftr-in{padding:80px 50px 40px}}
.gk-ftr-grid{display:grid;gap:40px}
@media(min-width:768px){.gk-ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.gk-ftr-logo{width:140px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}
.gk-ftr-alamat{margin-top:20px;font-size:15px;line-height:1.7;color:rgba(251,247,240,.7)}
.gk-ftr-mail{margin-top:6px;display:inline-block;font-size:15px;color:rgba(251,247,240,.7);text-decoration:none}
.gk-ftr-mail:hover{color:#cba043}
.gk-ftr h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#cba043}
.gk-ftr ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.gk-ftr ul a{font-size:15px;line-height:1.7;color:rgba(251,247,240,.8);text-decoration:none;transition:color .16s ease}
.gk-ftr ul a:hover{color:#cba043}
.gk-ftr-bawah{margin-top:56px;border-top:1px solid rgba(251,247,240,.12);padding-top:24px;display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){.gk-ftr-bawah{flex-direction:row;align-items:center;justify-content:space-between}}
.gk-ftr-bawah ul{flex-direction:row;flex-wrap:wrap;gap:8px 20px;margin-top:0}
.gk-ftr-bawah ul a{font-size:13px;color:rgba(251,247,240,.6)}
.gk-ftr-cr{font-size:13px;color:rgba(251,247,240,.5)}

/*==gk-gaya-batas==*/

/* ── Token lebar tunggal ────────────────────────────────────────────
   Sebelumnya satu halaman ini punya 7 lebar berbeda: header 1200, hero 960,
   form 560, tabel Miles 960, hasil 760, rewrite 1040, footer 1200. Angka di
   bawah disamakan dengan .h-inner supaya kolom isi berhenti di garis yang
   sama dengan logo dan foto profil di header.

   🔴 1200/50 jadi 1440/48 pada 2026-08-05. Angka lama disalin dari
   PortalShell.tsx, yang angkanya sendiri diukur dari storefront sehari
   SEBELUM container storefront dibetulkan ke 1440. Lihat catatan panjang di
   PortalHeader.tsx. */
:root{--wrap:1440px}

/* Kotak ini SALINAN PERSIS .h-inner: max-width 1440, padding 15,
   margin auto, box-sizing border-box. Jadi tepi kiri isi berhenti di tepi
   kiri logo dan tepi kanan berhenti di tepi kanan ikon akun, di lebar layar
   berapa pun. Angka 50px sempat kucoba dan meleset 5px di 1280 lalu makin
   jauh di 1440+, karena header dibatasi max-width sedangkan .screen tidak.
   Karena itu dua angka ini WAJIB bergerak bersama .h-inner, bukan sendiri. */
#screen-gate.screen.active,
#screen-results.screen.active,
#screen-rewrite.screen.active{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:28px var(--pad-layar) 64px
}
/* Poin 4.2/4.9/4.17: padding 15px cuma buat mobile. Di >=768px (breakpoint
   yang sama dengan .h-inner baris 62), naik ke 50px supaya tepi isi
   konsisten sama header DAN sama portal (PortalShell.tsx pakai
   min-[750px]:px-12 -- 768px dipilih di sini biar align sama .h-inner
   yang sudah ada, bukan breakpoint baru yang bisa geser 18px dari header). */
@media(min-width:768px){
  #screen-gate.screen.active,
  #screen-results.screen.active,
  #screen-rewrite.screen.active{
    padding-left:48px;padding-right:48px
  }
}
#screen-rewrite.screen.active{padding-top:28px}
.cvr-subhead{margin:-28px -15px 18px;padding:14px 15px}
.gkx-programs{max-width:var(--wrap)}

/* ══ 1. GATE ══════════════════════════════════════════════════════ */
/* Hero dibuang: h1-nya duplikat dengan h1 di kartu form (dua h1 dalam satu
   halaman), isinya mengulang halaman sebelumnya, dan di mobile dia makan
   542px sebelum orang lihat satu pun field. */
.gkx-hero{display:none!important}

/* RONDE 2: Rivaldy mengoreksi konsep dua kolom v1 (yang membelah HALAMAN
   jadi form 560px + panel "Contoh laporan" di sebelahnya). Konsepnya bukan
   form-vs-preview -- yang perlu dua kolom itu DUA INPUT-nya sendiri: kiri
   input CV (wajib), kanan input job description (opsional). Panel "Contoh
   laporan" dicabut total (bukan diperkecil), .card jadi lebih lebar di
   desktop supaya ada ruang buat dua kolom input tanpa field jadi sempit. */
/* RONDE 4: Rivaldy minta total lebar Gate SAMA dengan Hasil/Rewrite (dua-
   duanya mengisi penuh 1200px lewat grid rail+main / cvr-layout). .card
   punya max-width:560px sendiri dari CSS dasar (independen dari lebar
   1200px milik #screen-gate) -- itu yang bikin Gate kelihatan lebih sempit
   walau container-nya sama. max-width:none di sini membiarkan .card
   mengisi penuh #screen-gate (yang sudah 1200px + padding 50px, sama
   persis dengan Hasil/Rewrite). */
/* RONDE 5: .card ternyata masih kebungkus <div style="max-width:560px">
   (formCol) yang punya batas lebar SENDIRI lewat inline style -- CSS class
   di .card tidak cukup, sebuah elemen tidak bisa melebihi lebar parent-nya.
   Inline style cuma bisa ditimpa lewat !important, jadi ditarget di sini,
   bukan cuma di .card. */
@media(min-width:1000px){
  .card{max-width:none}
  #screen-gate div[style*="max-width:560px"]{max-width:none!important}
}
.gkv2-input-grid{display:flex;flex-direction:column;gap:0}
@media(min-width:1000px){
  /* RONDE 5: align-items:stretch (bukan start) + kolom jadi flex column,
     supaya kotak CV (dropzone/textarea) dan kotak JD (dropzone/textarea)
     sama tinggi -- tanpa ini kolom JD selalu lebih pendek karena tab-bar-nya
     saja, sementara kolom CV bisa punya textarea 9 baris. min-height yang
     sama dipasang di kedua wrapper "zona input" (bukan di seluruh kolom,
     supaya teks penjelasan JD di bawahnya tetap presisi tinggi kontennya
     sendiri, tidak ikut melar). */
  .gkv2-input-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch}
  .gkv2-input-col{display:flex;flex-direction:column}
  /* RONDE 6: pembatas gold antar kolom CV/JD, sengaja TIDAK penuh -- gradasi
     transparan di kedua ujung (15%) supaya garisnya "mengambang", bukan
     nempel ke tepi atas/bawah kartu. align-self:stretch bikin dia ikut
     setinggi kolom yang di-stretch grid (sudah sama tinggi, lihat ronde 5). */
  .gkv2-col-divider{width:1px;align-self:stretch;
    background:linear-gradient(to bottom, transparent, var(--gold) 15%, var(--gold) 85%, transparent)}
  /* RONDE 6: height:100% di .jd-zone TIDAK bekerja walau parent-nya
     min-height:230px -- CSS spec: percentage height cuma resolve kalau
     parent punya height TERTULIS eksplisit, min-height/auto-yang-kebetulan-
     230px tidak dihitung sebagai basis. Diperbaiki pakai flexbox: wrapper
     jadi flex column, dropzone-nya flex:1 (bukan height:100%) -- flex
     punya aturan stretch sendiri yang tidak kena masalah yang sama. */
  .gkv2-input-col #tab-upload,.gkv2-input-col #tab-paste,
  .gkv2-input-col #jd-tab-upload,.gkv2-input-col #jd-tab-paste{
    min-height:230px;display:flex;flex-direction:column
  }
  .gkv2-input-col .upload-zone,.gkv2-input-col .jd-zone{
    flex:1;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:center;justify-content:center
  }
  .gkv2-input-col #cv-text,.gkv2-input-col #jd-text{height:230px;box-sizing:border-box}
}
.gkv2-input-col .sec-divider{margin-top:0}
/* RONDE 6: jarak antara dropdown Target Negara/Posisi dan judul "CV KAMU"/
   "JOB DESCRIPTION" kerasa mepet -- sec-divider di dalam kolom sengaja
   margin-top:0 (baris di atas) supaya tidak dobel sama margin grid sendiri,
   jadi jaraknya ditambahkan di sini, di container gkv2-input-grid. */
.gkv2-input-grid{margin-top:22px}

/* Poin baru Rivaldy: info saldo Miles + dropdown jenis audit, sebelum
   kolom CV/JD. */
.gkv2-tier-panel{margin-top:18px;padding-top:2px}
/* --gold-teks, bukan --gold-strong (4,46 di krem, tepat di bawah ambang).
   Baris ini satu-satunya tempat orang diberi tahu kenapa kartu berbayar
   tidak bisa dia pilih, jadi dia justru tidak boleh yang paling samar. */
.gkv2-tier-hint{font-size:12px;color:var(--gold-teks,#855F1C);margin:6px 0 0;line-height:1.5}

/* F-CVA-03 & F-CVA-04 · dua baris teratas kartu (Target negara/posisi, lalu
   Jenis audit/daftar isi) dibuat RATA dengan kolom CV dan JD di bawahnya.

   Angka 57px bukan karangan: .gkv2-input-grid pakai `1fr auto 1fr` dengan
   gap 28px dan pembatas 1px di tengah, jadi jarak antar kolom isinya
   28 + 1 + 28 = 57. Dengan gap yang sama dan dua kolom 1fr, tepi kiri dan
   kanan kedua baris ini jatuh persis di garis yang sama dengan kolom di
   bawahnya. Gap 14px yang dipakai sebelumnya meleset sekitar 21px, dan itu
   selisih yang cukup kelihatan begitu mata menyusuri tepi kanan kartu.

   Ambangnya 1000px, ambang yang SAMA dipakai .gkv2-input-grid. Jangan
   diganti ke 680px: di bawah 1000px kolom CV/JD menumpuk jadi satu, jadi
   dua baris ini juga harus menumpuk, kalau tidak dia malah jadi satu-satunya
   yang masih dua kolom di layar sempit. */
.gkv2-gate-row{display:grid;grid-template-columns:1fr;gap:14px}
.gkv2-tier-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media(min-width:1000px){
  .gkv2-gate-row{grid-template-columns:1fr 1fr;gap:57px}
  .gkv2-tier-grid{grid-template-columns:1fr 1fr;gap:57px}
}

/* F-CVA-05 · saldo Miles dan tautan Top Up sebaris, tepat di bawah dropdown. */
.gkv2-miles-line{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--teal-act);font-weight:600}
.gkv2-miles-line a{color:var(--teal-act);font-weight:600;text-decoration:none;white-space:nowrap}
.gkv2-miles-line a:hover{text-decoration:underline}
/* Saldo kosong (belum login) menyisakan elemen kosong. margin-left:auto di
   tautan TERAKHIR bikin dia tetap rata kanan tanpa perlu menyembunyikan
   elemen saldonya.

   🔴 `:last-child` ditambahkan 2026-08-18, waktu angka saldonya sendiri ikut
   jadi tautan ke /topup. Tanpa itu KEDUA tautan kebagian margin-left:auto,
   dan dua elemen yang sama-sama mendorong diri ke kanan bikin
   justify-content:space-between di atas tidak punya apa-apa lagi untuk
   dipisah — saldo dan "Isi Miles" menempel jadi satu di tepi kanan. */
.gkv2-miles-line a:last-child{margin-left:auto}

.gkv2-tier-list{background:var(--gd2);border:1px solid var(--gd);border-radius:12px;padding:12px 14px}
.gkv2-tier-list-h{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c55);margin-bottom:8px}
.gkv2-tier-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.gkv2-tier-list li{font-size:12.5px;color:var(--c85);line-height:1.45;padding-left:15px;position:relative}
.gkv2-tier-list li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:var(--teal-act)}
/* Audit Cepat terpilih: item yang cuma ada di Audit Lengkap diredupkan.
   Dipakai warna redup + titik redup, bukan coretan, karena item ini bukan
   sesuatu yang hilang, cuma belum kebuka. */
.gkv2-tier-list.is-free li[data-full]{color:var(--c55);opacity:.62}
.gkv2-tier-list.is-free li[data-full]::before{background:var(--c20)}

/* Penjelasan kenapa JD diminta + konsekuensi kalau tidak diisi -- ini yang
   hilang di v1. Tanpa JD: kartu keyword JD di hasil & rewrite disembunyikan
   total (poin 4.23), dan section Skills tidak bisa ditulis ulang (poin
   4.19) karena tidak ada JD buat jadi acuan relevansi. */
/* 2026-08-26: dua paragraf ini pindah ke dalam popover ikon tanya, dan
   wadahnya berubah dari <p> jadi <span>. Karena itu `display:block` sekarang
   ditulis eksplisit; tanpa dia keduanya menyambung jadi satu paragraf panjang
   di dalam popover, yaitu persis bentuk yang RONDE 5 dulu pecah dengan sengaja. */
.gkv2-jd-explain{display:block;font-size:12.5px;color:var(--muted);line-height:1.55;margin:0}
.gkv2-jd-explain+.gkv2-jd-explain{margin-top:9px}
.gkv2-jd-explain b{color:var(--c85);font-weight:600}

/* ── Ikon tanya + popover di judul "Job description" (2026-08-26) ──────────
   ⚠ .sec-divider itu huruf kapital ber-letter-spacing. Ikonnya karena itu
   menormalkan text-transform dan letter-spacing sendiri: tanpa itu tanda tanya
   tunggal mewarisi jarak huruf dan duduk meleset ke kiri di dalam lingkarannya. */
.gkv2-jd-bantuan{position:relative;display:inline-block;margin-left:7px;vertical-align:middle}
.gkv2-jd-tanya{
  width:17px;height:17px;border-radius:50%;border:1px solid var(--c20);
  background:var(--c10);color:var(--muted);
  font-family:inherit;font-size:11px;font-weight:700;line-height:1;
  text-transform:none;letter-spacing:0;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center
}
.gkv2-jd-tanya:hover{background:var(--teal-glow2);color:var(--teal-act);border-color:var(--teal-act)}
.gkv2-jd-tanya[aria-expanded="true"]{background:var(--teal-act);color:var(--cream);border-color:var(--teal-act)}
/* 🔴 z-index WAJIB dan harus di atas kotak unggah JD di bawahnya. Popover ini
   lahir di dalam .sec-divider, yang datang lebih dulu di urutan susun, jadi
   tanpa z-index dia tergambar DI BAWAH .jd-zone dan yang terlihat cuma
   potongan tepinya. */
/* 🔴 Dijangkarkan ke KANAN (right:0), jadi dia melebar ke kiri dari ikonnya.
   Versi pertama memakai left:0 dan diukur keluar tepi kanan kartu: ikon tanya
   duduk di ujung judul "Job description (opsional)", yaitu sudah jauh ke kanan
   di dalam kolom yang cuma separuh lebar kartu, jadi 300px ke kanan dari situ
   pasti lewat. Melebar ke kiri selalu aman karena di kiri ikonnya justru ada
   kolom CV yang lebar. */
.gkv2-jd-pop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  width:min(300px,78vw);padding:12px 14px;
  background:var(--white);border:1px solid var(--ink-200);border-radius:12px;
  box-shadow:0 8px 24px rgba(26,23,18,.12);
  text-transform:none;letter-spacing:0;text-align:left;font-weight:400
}

/* RONDE 4: field nama/email terkunci pas user sudah login lewat Google. */
.gkv2-locked-field{background:var(--c10);color:var(--c55);cursor:not-allowed}

/* RONDE 5: tombol submit ("Mulai Audit") TIDAK selebar card lagi -- .btn-primary
   punya width:100% di kelasnya sendiri (baris ~103), jadi harus ditimpa
   khusus di sini. Dibungkus flex+justify-content:center di markup supaya
   posisinya tetap di tengah walau lebarnya sekarang cuma sebesar isinya. */
#analyze-btn{width:auto}

/* .gkv2-price-line DIHAPUS 2026-07-31 (F-CVA-05). Dia dulu baris Miles
   berdiri sendiri di dasar kartu, pengganti tabel 5 kolom yang tidak muat di
   layar 375px. Sekarang saldo dan tautan Top Up menyatu di .gkv2-miles-line
   tepat di bawah dropdown Jenis audit, jadi aturan ini sudah tidak dipakai
   siapa pun. */
#screen-gate .gkx-programs{display:none!important}

/* Newsletter DIKEMBALIKAN ke tampilan 2026-08-28 atas permintaan Rivaldy.
   Riwayatnya, supaya tidak ada yang menyembunyikannya lagi karena mengira
   itu keputusan lama yang masih berlaku:

   - 2026-07-29 newsletter dicabut dari CV Auditor, pertanyaannya pindah ke
     alur daftar lewat Google. Aturan `.consent-item#ci-news{display:none}`
     lahir di sini. Elemennya tidak ikut dihapus karena startAnalysis()
     membaca .checked-nya; menghapusnya bikin tombol audit lempar TypeError.
   - 2026-08-11 ketahuan kotak itu tersembunyi TAPI tercentang bawaan, jadi
     tiap audit diam-diam mengirim `newsletter: true`. Centang bawaannya
     dicabut di dua tempat (markup + restartTool()). Akibatnya kolom I di
     Database_CV_Audit jadi 100% "Tidak" selama 16 hari, yang benar tapi
     berarti izinnya tidak pernah ditanyakan ke siapa pun.
   - 2026-08-28 aturan sembunyinya dicabut. Sekarang kotaknya TERLIHAT dan
     TIDAK tercentang, jadi "Ya" cuma muncul kalau orangnya mencentang
     sendiri.

   🔴 Centang bawaannya JANGAN dikembalikan. Yang membuat ini persetujuan
   adalah kombinasi terlihat + tidak tercentang; salah satu saja tidak cukup.
   Sembunyi + tercentang itu persis keadaan yang dibetulkan 11 Agustus. */

/* Tombol top-up di header (RONDE 1) DICABUT -- lihat mountTopupNearBand()
   di script, poin 4.7. .gkv2-topup-inline (dekat band) di section 5. */

/* ══ 2. HASIL ═════════════════════════════════════════════════════ */
.results-qnav{display:flex!important}   /* dihidupkan lagi, lihat catatan JS */
@media(min-width:1000px){
  /* Persis DUA anak: rail dan main. Versi pertama patch ini memakai
     grid-row:1/span 99 di rail supaya anak lain mengalir ke kolom 2, dan itu
     bikin 99 baris eksplisit; dikali gap 38px jadi 3700px ruang kosong di
     bawah halaman. Membungkus kolom 2 lebih murah daripada mengakali span. */
  #screen-results.screen.active{
    display:grid;grid-template-columns:330px minmax(0,1fr);gap:38px;align-items:start
  }
  /* Tinggi header + jeda 16px. Header itu position:sticky;top:0;z-index:200,
     jadi apa pun yang sticky di top:0 akan tenggelam di belakangnya.
     ⚠ Dulu ditulis 88px (= 72 + 16) dan luput waktu header naik ke 77px pada
     2026-08-05, jadi rail-nya menyelip 5px di balik header. Sekarang dihitung
     dari --h-header supaya tidak bisa melenceng lagi. */
  .gkv2-rail{position:sticky;top:calc(var(--h-header) + 16px);display:flex;flex-direction:column;gap:14px}
  /* Skor jadi kartu rail: susunannya vertikal, bukan melebar. */
  .gkv2-rail .score-hero{flex-direction:column;text-align:center;gap:12px;
    padding:22px 20px;margin-bottom:0}
  .gkv2-rail .score-hero-info{display:flex;flex-direction:column;align-items:center;gap:10px}
  .gkv2-rail .score-target{margin:0}
  .gkv2-rail .stat-footer{grid-template-columns:repeat(2,1fr);margin:0}
  .gkv2-rail .results-qnav{margin:0;flex-direction:column;gap:6px}
  .gkv2-rail .rqn-btn{text-align:center}
  .gkv2-rail .result-actions{flex-direction:column;margin:0}
  .gkv2-rail .result-actions .btn{width:100%}
  /* 🔴 Diubah dari repeat(2, ...) jadi auto-fit pada 2026-08-26, bersama
     perataan Breakdown Skor jadi satu baris. Aturan dua kolom di sini datang
     LEBIH BELAKANG di berkas daripada aturan auto-fit di blok
     @media(min-width:760px), jadi selama dia masih dua kolom, lima kartu tetap
     jatuh jadi TIGA BARIS di layar lebar dan seluruh perataan itu tidak
     kelihatan sama sekali.
     Diukur sebelum perbaikan: 3 baris di viewport 1280px. */
  .sub-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* 🔴 Rail lebih tinggi dari layar = sticky rusak diam-diam.
   Versi pertama rail-nya 1409px sedangkan viewport 900px. position:sticky
   pada elemen yang lebih tinggi dari layar akan menempel di atas lalu
   bagian bawahnya TIDAK PERNAH bisa dijangkau, jadi dua tombol aksi
   (Bagikan skor & Unduh PDF) hilang selamanya begitu halaman di-scroll.
   Perbaikannya bukan max-height + overflow (itu jadi dua scrollbar yang
   saling rebutan), tapi memindahkan prosa keluar dari rail: vonis,
   ringkasan, dan bullet pindah ke kolom kanan yang memang lebar. */
.gkv2-verdict{background:var(--glass);border:1px solid var(--c20);
  border-radius:16px;padding:22px 24px;margin-bottom:22px}
.gkv2-verdict .score-headline{font-size:19px;line-height:1.45;margin-bottom:10px}
.gkv2-verdict .score-summary{margin-bottom:12px}
.gkv2-verdict .score-bullets{margin:0 0 0 18px!important}

/* Band Rewrite: permukaan gelap, beda dari teal yang dipakai semua aksen lain
   di halaman ini. SENGAJA bukan merah: rose di sistem ini artinya error/skor
   jelek, dan memakai warna error buat penawaran berbayar melatih orang
   curiga sama warnanya. */
.cvr-cta-band.is-ready,.cvr-cta-band.is-low-balance,.cvr-cta-band.is-locked{
  background:linear-gradient(135deg,#1F1B15,#2E2820);
  border:1px solid rgba(184,134,43,.45);
  box-shadow:0 10px 34px rgba(26,23,18,.22)
}
.cvr-cta-band.is-ready .cvr-cta-title,.cvr-cta-band.is-low-balance .cvr-cta-title{font-size:19px}
.cvr-cta-band.is-ready .cvr-cta-btn,.cvr-cta-band.is-locked .cvr-cta-btn{box-shadow:0 3px 14px rgba(184,134,43,.4)}
.gkv2-band-slot{margin:26px 0 8px}

/* Bar tipis di mobile, muncul sesudah orang lewat skor.

   🔴 `bottom:0`, DIBETULKAN 2026-08-26. Sebelumnya `bottom:52px`, dan komentar
   di baris ini sendiri sudah mengaku kenapa: angka itu disalin dari mockup, di
   mana bar ini duduk di atas toolbar hitam setinggi 52px. Toolbar itu TIDAK
   PERNAH ADA di halaman ini, jadi yang terjadi di produksi bar-nya mengambang
   52px di atas tepi layar dengan isi halaman terlihat lewat di bawahnya.

   Diukur di 375x812 sebelum perbaikan: tepi bawah bar di 760px dari 812px,
   dan yang menempati 52px sisanya cuma kartu "Info audit" yang lewat.
   Catatan lama di sini bahkan sudah menulis "di produksi bottom:0" sebagai
   niat, cuma nilainya tidak pernah ikut diubah.

   ⚠ env(safe-area-inset-bottom) ditambahkan bersamaan. Di iPhone berponi ada
   garis home indicator setinggi ~34px di bawah viewport, dan bar yang menempel
   di bottom:0 tanpa padding itu akan menaruh tombolnya persis di bawah garis
   tersebut, yaitu tempat yang setengah tidak bisa ditekan. Nilai cadangan 0px
   dipasang supaya peramban yang tidak mengenal env() tidak kehilangan
   padding-nya sama sekali. */
.gkv2-mini-cta{position:fixed;left:0;right:0;bottom:0;z-index:400;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  background:#1F1B15;color:#FBF7F0;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 20px rgba(0,0,0,.28)}
/* 🔴 Ruang di dasar halaman supaya isi terakhir tidak terjebak di balik bar.
   Bar-nya `position:fixed`, jadi dia TIDAK memakan ruang dokumen: tanpa baris
   ini, tombol "Audit CV lain" di paling bawah tertutup permanen dan tidak ada
   cara menggulir lebih jauh untuk mencapainya.
   Angkanya = tinggi bar terukur (58px) plus jeda, plus safe area.

   ⚠ Pemilihnya WAJIB `#screen-results.screen.active` (0,3,0), bukan
   `#screen-results.active` (0,2,0). Sudah sekali meleset: aturan yang berlaku
   sekarang ditulis sebagai daftar tiga layar
   `#screen-gate.screen.active, #screen-results.screen.active, ...` dengan
   padding-bottom 64px, dan 0,2,0 kalah darinya. Yang terjadi bukan error,
   cuma padding-nya tetap 64px dan tombol "Audit CV lain" berjarak 2px dari
   tepi atas bar, yaitu tetap tertutup untuk semua praktisnya. */
@media(max-width:999px){
  #screen-results.screen.active{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}
}
.gkv2-mini-cta.show{display:flex}
.gkv2-mini-cta b{font-size:13px;font-weight:600}
.gkv2-mini-cta span{display:block;font-size:11px;opacity:.7;margin-top:1px}
.gkv2-mini-cta button{background:var(--gold);color:#2A1F0E;border:none;
  border-radius:999px;padding:9px 16px;font:600 12.5px/1 inherit;cursor:pointer;white-space:nowrap}
@media(min-width:1000px){.gkv2-mini-cta{display:none!important}}

.gkv2-card{background:var(--glass);border:1px solid var(--c20);border-radius:16px;padding:18px 20px;margin-top:18px}
.gkv2-card-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal-act);font-weight:600;margin-bottom:10px}
.gkv2-news{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--c85);line-height:1.55}
.gkv2-xsell{display:flex;gap:16px;align-items:center;background:var(--glass);
  border:1px solid var(--gd);border-radius:16px;padding:18px 20px;margin-top:18px;
  text-decoration:none;color:inherit;transition:box-shadow .2s}
.gkv2-xsell:hover{box-shadow:0 8px 26px rgba(26,23,18,.1)}
.gkv2-xsell-thumb{flex-shrink:0;width:64px;height:82px;border-radius:8px;
  background:linear-gradient(150deg,var(--teal-act),#1B4540);color:#FBF7F0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:700 15px/1.2 'Playfair Display',serif;padding:6px}
.gkv2-xsell b{display:block;font-size:14.5px;margin-bottom:4px}
.gkv2-xsell p{font-size:12.5px;color:var(--c55);line-height:1.55;margin:0 0 8px}
.gkv2-xsell em{font-style:normal;color:var(--teal-act);font-weight:600;font-size:12.5px}
@media(max-width:520px){.gkv2-xsell{flex-direction:column;align-items:flex-start}}

/* ══ 3. REWRITE ═══════════════════════════════════════════════════ */
/* Penyebab "full bleed tapi isinya mepet kiri": #screen-rewrite di-set
   align-items:stretch, jadi .cvr-layout berhenti di max-width 1040px lalu
   nempel ke kiri karena tidak ada margin auto. */
.cvr-layout{max-width:var(--wrap)!important;margin-inline:auto}
.cvr-subhead{max-width:var(--wrap);margin-inline:auto;margin-bottom:18px}
@media(min-width:900px){.cvr-skeleton-panel{width:290px}}

/* 🔴 Subhead rewrite tenggelam di belakang header.
   .cvr-subhead itu position:sticky;top:0;z-index:20 (baris 807-808),
   sedangkan header position:sticky;top:0;z-index:200 (baris 60) setinggi
   72px. Dua-duanya rebutan garis yang sama dan header menang, jadi begitu
   halaman rewrite di-scroll, baris berisi tombol Salin dan Unduh masuk ke
   belakang header dan tidak bisa diklik lagi. */
.cvr-subhead{top:72px;z-index:150}

/* Mobile: subhead sekarang setinggi 164px karena 5 elemen dibungkus flex-wrap
   jadi 4 baris, dan dia sticky, jadi seperlima layar hilang permanen. */
@media(max-width:899px){
  .cvr-subhead{padding:10px 14px;gap:8px;flex-wrap:nowrap;align-items:center}
  .cvr-subhead-title{font-size:13px;flex:1;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .cvr-subhead-title small{display:none}
  .cvr-subhead-actions{gap:8px;flex-wrap:nowrap;flex-shrink:0}
  .cvr-toggle-compare{display:none}
  .cvr-action-btn span:not(.gk-ico){display:none}
  .cvr-action-btn{padding:8px 10px}
  /* Panel kerangka berhenti jadi strip geser horizontal 607px yang
     separuh isinya di luar layar. Sekarang dia lipatan yang bisa dibuka. */
  .cvr-skeleton-panel{display:block!important;overflow:visible!important;padding:0!important}
  /* T6 (audit 2026-09-02): eyebrow "KERANGKA CV KAMU" disembunyikan di sini,
     karena di lebar ini panel sudah berubah jadi lipatan yang tombolnya
     sendiri berbunyi "Kerangka CV kamu (5 section)". Dua judul beruntun
     untuk satu panel, yang kedua tanpa fungsi. Sengaja di blok yang SAMA
     dengan yang membuat lipatannya: kalau ambang lipatan digeser, judulnya
     ikut pindah tanpa harus diingat terpisah. */
  .cvr-skel-title{display:none}
  .cvr-skeleton-panel .cvr-skel-rows{display:none;flex-direction:column;padding:0 14px 12px}
  .cvr-skeleton-panel.is-open .cvr-skel-rows{display:flex}
  .cvr-skeleton-panel .cvr-skel-row{flex-direction:row;align-items:center;
    white-space:normal;background:none;border-radius:0;padding:9px 0;
    border-bottom:1px solid var(--c10)!important}
  .cvr-skeleton-panel .cvr-skel-stats{display:none;border-left:none;padding:0 14px 14px;
    flex-direction:row;gap:16px;flex-wrap:wrap}
  .cvr-skeleton-panel.is-open .cvr-skel-stats{display:flex}
  .gkv2-skel-toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;background:none;border:none;padding:13px 14px;font:600 12.5px/1 inherit;
    color:var(--teal-act);cursor:pointer}
  .gkv2-skel-toggle::after{content:'▾';transition:transform .2s}
  .cvr-skeleton-panel.is-open .gkv2-skel-toggle::after{transform:rotate(180deg)}
}
@media(min-width:900px){.gkv2-skel-toggle{display:none}}

/* Diff kata. Selama ini .cvr-before dan .cvr-why display:none sampai orang
   menemukan tombol "Bandingkan", jadi bawaannya orang tidak pernah tahu apa
   yang dibuang. Sekarang mode banding menyala dari awal. */
.gkv2-diff del{background:rgba(198,72,58,.13);color:#9B3527;text-decoration:line-through;
  text-decoration-thickness:1px;border-radius:3px;padding:0 1px}
.gkv2-diff ins{background:rgba(35,88,82,.14);color:var(--teal-act);text-decoration:none;
  font-weight:600;border-radius:3px;padding:0 1px}
.gkv2-diff-row{margin-bottom:10px}
.gkv2-diff-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--c55);font-weight:600;margin-bottom:4px}
.gkv2-diff-box{font-size:13.5px;line-height:1.65;color:var(--ink);
  background:var(--teal-glow2);border-radius:10px;padding:11px 13px}
.gkv2-diff-box.is-before{background:rgba(198,72,58,.05);color:var(--c55);font-size:12.5px}
.gkv2-locknote{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;
  color:var(--c55);line-height:1.55;background:var(--c10);border-radius:10px;padding:10px 12px;margin-top:10px}
.gkv2-kw{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.gkv2-kw span{font-size:11.5px;border-radius:999px;padding:5px 11px;font-weight:600}
.gkv2-kw .hit{background:var(--teal-glow2);color:var(--teal-act);border:1px solid rgba(35,88,82,.25)}
.gkv2-kw .miss{background:var(--rose-bg);color:var(--rose);border:1px solid var(--rose-glow)}
.gkv2-kw-legend{font-size:12px;color:var(--c55);line-height:1.55;margin-bottom:8px}

/* ══ 4. PERBAIKAN MOBILE ══════════════════════════════════════════ */
@media(max-width:560px){
  /* Dua kolom 1fr 1fr ditulis sebagai style inline di markup (baris 1233 dan
     1352), jadi tidak bisa ditimpa tanpa !important. Di layar 390px tiap
     kolom cuma dapat 138px: placeholder "Contoh: Software Engineer" terpotong
     di tengah dan select negara jadi sempit sekali. Form yang dipakai orang
     sambil pegang HP satu tangan tidak boleh dua kolom. */
  #gate-form div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;gap:16px!important
  }

  /* Target sentuh. Patokannya 44px (Apple HIG); yang di bawah itu sering
     meleset dan orang menyalahkan dirinya sendiri, bukan tombolnya. */
  .tab-btn{min-height:44px}
  .rqn-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .cvr-cta-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .btn-ebook{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:899px){
  /* Tombol Salin & Unduh jadi ikon saja di mobile (perubahan v2 di atas),
     dan itu bikin kotaknya menyusut jadi 36x32. Dikembalikan ke 44 persegi. */
  .cvr-action-btn{min-width:44px;min-height:44px;padding:0!important;
    display:inline-flex;align-items:center;justify-content:center}
  .cvr-polish-btn{min-height:44px}
}
/* Tautan teks di dalam kalimat ("Get Karier" di footer, "Lihat paket Miles")
   SENGAJA dibiarkan setinggi barisnya. WCAG 2.5.8 mengecualikan tautan yang
   hidup di dalam kalimat, dan memaksanya jadi 44px akan merobek prosanya. */

/* ══ 5. Ronde 2 -- poin dari Rivaldy yang membalik beberapa keputusan v2 ══ */

/* 4.7: tombol Isi Miles dicabut dari header (.h-right), pindah ke dekat
   band CV Rewrite -- itu satu-satunya tempat Miles benar-benar dipakai. */
.gkv2-topup-inline{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font:600 12.5px/1 'DM Sans',sans-serif;color:var(--gold);text-decoration:none}
.gkv2-topup-inline:hover{text-decoration:underline}
.gkv2-topup-inline svg{width:13px;height:13px}

/* 4.10: 4 kartu stat-footer dibuang -- isinya sudah ada di Breakdown Skor
   dan Ceklis/Tips di bawahnya. Dua angkanya (below/tips) pindah ke judul
   kartu next-step lewat patchNextStepCounts(). */
.stat-footer{display:none!important}

/* 4.11: CTA "Kitab Karier ke Luar Negeri" di halaman hasil tidak nyambung
   (dihapus lewat JS, ini cuma jaring kalau elemen sempat kelihatan sekilas
   sebelum skrip jalan). */
#screen-results .cta-secondary{display:none!important}

/* 4.14: next-step grid tetap rapi di 3 ATAU 4 kartu. Career Map bisa
   sembunyi sendiri (negara di luar peta), dan grid kolom TETAP (repeat(3,1fr))
   menyisakan slot kosong kalau cuma 3 kartu tampil dari 4 yang disediakan.
   auto-fit(minmax()) sempat dicoba tapi kolom "main" di layar rail+main
   (~732px di 1280px layar) lebih sempit dari 4x220px yang auto-fit butuhkan,
   jadi kartu ke-4 tetap melompat ke baris sendiri -- persis bug yang mau
   diperbaiki. --ns-cols dihitung JS (setNextStepCols) sesuai jumlah kartu
   yang BENAR-BENAR tampil, dipaksa satu baris berapa pun sempitnya kolom. */
@media(min-width:681px){
  .nextstep-grid{grid-template-columns:repeat(var(--ns-cols,3),1fr)!important}
}

/* ══ LAYAR 3 · AUDIT DETAIL -- kartu skor & info audit ═══════════════
   Diturunkan dari "Audit Detail Desktop". Blok ini SENGAJA paling akhir
   di antara lapisan CSS berkas ini, karena .score-hero sudah ditimpa di
   empat lapisan sebelumnya (baris ~711, ~805, ~869, ~7150). Menaruhnya
   lebih awal berarti kalah dari lapisan lama tanpa ada yang kelihatan
   salah -- persis jebakan .h-inner yang sudah menggigit sekali hari ini. */

/* Permukaan skor jadi ink gelap, bukan gradien teal. Teal tetap dipakai
   di seluruh halaman sebagai aksen; yang berubah cuma kartu ini, supaya
   angkanya jadi satu-satunya hal paling terang di layar. */
.gkv2-rail .score-hero{
  background:var(--ink-900)!important;
  border-radius:18px;padding:28px 26px!important;
  box-shadow:var(--shadow-lg)!important;
  color:#FBF7F0;text-align:center;gap:0!important
}
.gkv2-rail .score-hero .score-label{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:16px
}
.gkv2-rail .score-hero .score-svg{width:150px;height:150px}
.gkv2-rail .score-hero .score-circle-wrap{width:150px;height:150px;margin:0 auto}
.gkv2-rail .score-hero .score-track{stroke:rgba(251,247,240,.12)}
.gkv2-rail .score-hero .score-fill,
.gkv2-rail .score-hero .score-fill.low,
.gkv2-rail .score-hero .score-fill.mid{stroke:var(--gold-400)}
/* Angka skor: Space Grotesk, bukan Playfair. Ini angka teknis di kartu UI,
   bukan momen editorial. */
.gkv2-rail .score-hero .score-num-val{
  font-family:'Space Grotesk',system-ui,sans-serif!important;
  font-size:46px;font-weight:700;line-height:1;color:#F3E7CE!important;letter-spacing:-.02em
}
.gkv2-rail .score-hero .score-num-max{font-size:12px;font-weight:500;color:var(--subtle);margin-top:3px}

/* Selisih dari audit sebelumnya + baris pembanding. Dua-duanya cuma tampil
   kalau datanya ADA: gkv3InfoAudit() tidak pernah mengarang pembanding. */
.gkv3-delta{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--radius-pill);margin-top:14px}
.gkv3-delta.naik{background:rgba(46,125,91,.25);color:#7FC9A6}
.gkv3-delta.turun{background:rgba(198,72,58,.22);color:#E39C90}
.gkv3-delta.rata{background:rgba(251,247,240,.12);color:var(--ink-300)}
/* Baris angka pembanding, di tempat mockup menaruh kalimat pembandingnya. */
.gkv3-delta-ket{font-size:13px;line-height:1.6;color:var(--ink-300);margin-top:12px}

/* Tombol di dalam kartu gelap. Bagikan Skor emas selebar kartu, lalu dua
   tombol sekunder bersebelahan -- ikut mockup. */
.gkv2-rail .score-hero .result-actions{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.gkv3-aksi-baris{display:flex;gap:9px}
/* 🔴 overflow:hidden itu JARING, bukan hiasan. Ditambahkan 2026-08-26 sesudah
   Rivaldy melaporkan label "Unduh laporan PDF" keluar dari bingkai tombolnya.

   Diukur di rail 340px: dua tombol berbagi baris jadi masing-masing 166px,
   sementara ikon plus "Unduh laporan PDF" butuh sekitar 210px. `min-width:0`
   di baris atas memang mengizinkan kotaknya menyusut, tapi isinya
   `white-space:nowrap` dan overflow-nya `visible`, jadi teksnya tetap
   tergambar MELEWATI tepi tombol, di atas latar halaman.

   Labelnya sendiri sudah dipendekkan jadi "Unduh PDF" supaya muat. Baris ini
   menjaga kejadian berikutnya: label yang suatu saat tumbuh lagi akan
   terpotong rapi di tepi tombol, bukan menggantung di luarnya. Kalau
   terpotong, itu tanda labelnya yang harus dipendekkan. */
.gkv3-aksi-baris .btn{flex:1;min-width:0;overflow:hidden}
.gkv2-rail .score-hero .btn-ghost{
  background:rgba(251,247,240,.12)!important;color:#FBF7F0!important;border:none!important;
  font-size:12.5px;font-weight:600;padding:11px!important
}
.gkv2-rail .score-hero .btn-ghost:hover{background:rgba(251,247,240,.2)!important}
.gkv2-rail .score-hero .btn-share{font-size:13.5px;padding:12px!important}

/* Kartu "Info audit". Isinya semua turunan dari audit yang sedang dibuka --
   nol baris yang ditulis tangan. Baris yang datanya tidak ada TIDAK dicetak,
   bukan dicetak dengan tanda strip. */
/* 🔴 Jarak rail ke kolom utama waktu keduanya BERTUMPUK (di bawah 1000px,
   yaitu semua HP dan tablet). Ditambahkan 2026-08-26.

   Di ≥1000px rail dan main jadi dua kolom bersebelahan dan `gap:38px` di
   #screen-results yang mengurus jaraknya. Di bawah itu grid-nya tidak pernah
   dinyalakan, jadi keduanya cuma dua blok yang mengalir berurutan, dan tidak
   ada satu pun aturan yang memberi jarak di antaranya.

   Akibatnya diukur di lebar 375px: kartu "Info audit" berakhir tepat di 811px
   dan kartu "Ringkasan auditor" mulai tepat di 811px. Dua kartu berbingkai
   putih saling menempel tanpa satu piksel pun pemisah, sementara semua kartu
   lain di layar yang sama berjarak 14 sampai 26px. Yang terbaca bukan "dua
   kartu berdempetan" tapi "satu kartu dengan garis aneh di tengahnya".

   22px, menyamai margin bawah .gkv2-verdict, jadi ritmenya sama dengan jarak
   antar-kartu di kolom utama. Sengaja lebih besar daripada gap 14px di dalam
   rail: yang ini perpindahan antar-kelompok, bukan antar-kartu sekelompok. */
.gkv2-main{margin-top:22px}
/* ⚠ Pembatalannya WAJIB ditulis di sini, bukan disisipkan ke blok
   @media(min-width:1000px) yang sudah ada di baris ~1879. Blok itu berada di
   ATAS aturan ini di berkas yang sama, dan media query tidak menambah
   kekhususan sama sekali, jadi `.gkv2-main{margin-top:22px}` di bawahnya akan
   menang juga di layar lebar. Kegagalannya berupa kolom kanan turun 22px
   sendirian di desktop, dan itu jenis meleset yang cuma ketahuan kalau ada
   yang membandingkan dua kolomnya berdampingan. */
@media(min-width:1000px){.gkv2-main{margin-top:0}}

.gkv3-info{background:var(--white);border:1px solid var(--ink-200);border-radius:16px;padding:20px 22px}
.gkv3-info-judul{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:14px;color:var(--ink-900);margin-bottom:12px}
.gkv3-info dl{display:flex;flex-direction:column;gap:9px;margin:0;font-size:13px}
.gkv3-info div{display:flex;justify-content:space-between;gap:12px}
.gkv3-info dt{color:var(--ink-500);flex:none}
.gkv3-info dd{margin:0;color:var(--ink-900);font-weight:500;text-align:right;word-break:break-word}
.gkv3-info dd.is-tier{color:var(--gold-teks);font-weight:600}

/* ── Breakdown: penukar Bar / Kartu ────────────────────────────────
   Mockup menggambar dua tampilan untuk data yang sama. Tampilan Kartu di
   mockup lebih SEDIKIT daripada kartu yang sudah ada di sini (mockup cuma
   nama, skor, dan bar tipis; yang sudah ada juga membawa ikon, keterangan
   sektor, dan tautan "Lihat analisis"). Kartu yang sudah ada yang menang,
   dan yang ditambahkan cuma tampilan Bar plus penukarnya. */
/* ⚠ Bukan space-between. .section-head sudah berisi ikon + judul, jadi
   space-between mendorong judulnya ke TENGAH di antara ikon dan penukar,
   bukan merapatkannya ke kiri seperti mockup. Penukarnya yang didorong ke
   kanan sendiri. */
.gkv3-bd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gkv3-bd-head .gkv3-tukar{margin-left:auto}
.gkv3-tukar{display:inline-flex;background:var(--ink-100);border-radius:var(--radius-pill);padding:3px;flex:none}
.gkv3-tukar button{
  font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 14px;
  border:none;background:none;color:var(--ink-500);border-radius:var(--radius-pill);
  cursor:pointer;transition:background var(--tr),color var(--tr)
}
.gkv3-tukar button[aria-pressed="true"]{background:var(--white);color:var(--ink-900);box-shadow:var(--shadow-xs)}

.gkv3-bar-view{display:flex;flex-direction:column;gap:13px;margin-bottom:8px}
.gkv3-bar-row{display:grid;grid-template-columns:190px 1fr 44px;gap:14px;align-items:center}
@media(max-width:749px){.gkv3-bar-row{grid-template-columns:1fr 44px;gap:8px 12px}
  .gkv3-bar-row .gkv3-bar-nama{grid-column:1/-1}}
.gkv3-bar-nama{font-size:13.5px;font-weight:500;color:var(--ink-700)}
.gkv3-bar-jalur{height:9px;background:var(--ink-100);border-radius:var(--radius-pill);overflow:hidden}
.gkv3-bar-isi2{height:100%;border-radius:var(--radius-pill);transition:width .6s var(--gk-ease)}
.gkv3-bar-angka{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:14px;text-align:right}
/* ⚠ .bar-high/.bar-mid/.bar-low adalah kelas berdiri sendiri yang menyetel
   BACKGROUND. Kelas itu ikut terbawa ke angka skor supaya warnanya sama
   dengan bar-nya, jadi di sini latarnya dimatikan dan diubah jadi warna
   teks. Tanpa tiga baris ini angka skornya muncul sebagai kotak berwarna. */
.gkv3-bar-angka.bar-high{background:none;color:var(--green)}
.gkv3-bar-angka.bar-mid{background:none;color:var(--amber)}
.gkv3-bar-angka.bar-low{background:none;color:var(--rose)}

/* ── Kartu vonis ("Ringkasan auditor") ─────────────────────────────
   ⚠ Judulnya pindah dari Playfair ke Space Grotesk. Ini keputusan yang
   tidak jelas sendirinya: kalimat vonis ("CV-mu sudah aman di mata mesin")
   memang terdengar naratif, dan aturan portal MEMBOLEHKAN Playfair untuk
   momen editorial. Yang menentukan di sini mockup-nya: dia menaruh kalimat
   itu di dalam kartu UI ber-eyebrow, bukan sebagai headline halaman, dan
   menuliskannya 600 19px Space Grotesk. Judul kartu, bukan momen editorial. */
.gkv2-verdict .score-headline{
  font-family:'Space Grotesk',system-ui,sans-serif!important;
  font-weight:600;letter-spacing:-.02em;line-height:1.4
}
.gkv3-eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-teks);margin-bottom:8px
}

/* ── LAYAR 4 · Simulasi 6-second scan ──────────────────────────────
   Strukturnya sudah cocok dengan mockup sejak sebelum rombak (baris
   bernomor, label, nilai, pil status), jadi yang berubah cuma rupanya. */
.scan-card{border-color:rgba(184,134,43,.35)!important;border-radius:16px;padding:22px 24px!important}
/* Judul dari label kecil huruf besar jadi judul kartu. */
.scan-card .scan-title{
  font-family:'Space Grotesk',system-ui,sans-serif!important;
  font-size:16px!important;font-weight:600!important;letter-spacing:-.02em!important;
  text-transform:none!important;color:var(--ink-900)!important;margin-bottom:6px
}
.gkv3-scan-ket{font-size:12.5px;line-height:1.6;color:var(--ink-500);margin-bottom:12px}
/* Garis pemisah antarbaris, ikut mockup. */
.scan-card .scan-row{border-top:1px solid var(--ink-100);padding:10px 0}
/* ⚠ BUKAN .scan-row:first-of-type. :first-of-type memilih berdasarkan TAG,
   bukan kelas, dan anak pertama .scan-card itu div judul -- jadi aturannya
   menyasar judul dan baris pertama tetap bergaris. Yang dipakai: baris yang
   langsung mengikuti kalimat penjelas. */
.scan-card .gkv3-scan-ket + .scan-row{border-top:0}
.scan-card .scan-num{
  width:22px;height:22px;border-radius:var(--radius-pill);
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}

/* ── D5 · Peta kerangka CV di kartu 6-Second Scan ──────────────────
   Digambar di ATAS daftar baris ok/warn, dan sengaja terlihat seperti
   diagram, bukan seperti CV. Garis abu-abu menggantikan teks di mana
   pun isinya tidak sedang dibicarakan; kalau semua baris diisi teks
   asli, orangnya akan membacanya sebagai pratinjau CV-nya dan bingung
   kenapa tata letaknya berbeda dari berkas yang dia unggah.

   ⚠ Warnanya SENGAJA teal/rose, bukan hijau/kuning. Tiap sorotan di
   peta ini adalah salah satu dari lima baris tepat di bawahnya, dan
   baris itu sudah memakai .flag-ok (teal) dan .flag-warn (rose). Warna
   berbeda untuk temuan yang sama akan terbaca sebagai dua penilaian
   yang berbeda. */
.peta6{margin:4px 0 16px}
.peta6-sub{font-size:12.5px;line-height:1.6;color:var(--ink-500);margin:0 0 12px}
.peta6-kolom{display:flex;flex-direction:column;gap:8px}
.peta6-blok{
  border:1px solid var(--ink-100);border-left:3px solid var(--ink-200);
  border-radius:10px;padding:10px 12px;background:var(--ink-50)
}
.peta6-blok.is-ok{border-left-color:var(--teal-act);background:rgba(35,88,82,.05)}
.peta6-blok.is-warn{border-left-color:var(--rose);background:var(--rose-bg)}
/* Di bawah batas sepertiga atas: diredupkan, bukan disembunyikan. Yang
   ada di sana tetap bagian dari CV-nya, cuma lebih kecil peluangnya
   kebaca duluan. */
.peta6-blok.is-bawah{opacity:.62}
.peta6-lab{
  font-size:10px;text-transform:uppercase;letter-spacing:1.4px;font-weight:600;
  color:var(--ink-500);margin-bottom:7px
}
.peta6-teks{font-size:12.5px;line-height:1.45;color:var(--ink-700);margin-bottom:5px}
.peta6-teks.is-kuat{color:var(--ink-900);font-weight:500}
/* ⚠ Lebar bervariasi ditulis inline dari JS (renderPetaScan), BUKAN
   lewat :nth-of-type. Selector itu memilih berdasarkan TAG, dan saudara
   sekandungnya di sini juga <div> (.peta6-lab, .peta6-teks), jadi
   hitungan ganjil/genapnya ikut baris yang bukan garis. Jebakan yang
   persis sama sudah pernah kena di .scan-row:first-of-type beberapa
   ratus baris di atas. */
.peta6-garis{height:6px;border-radius:3px;background:var(--ink-200);opacity:.55;margin-bottom:5px;width:92%}
.peta6-garis.is-pisah{margin-top:9px;width:56%;opacity:.4}
.peta6-pils{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.peta6-pil{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;line-height:1;padding:4px 9px;border-radius:999px
}
.peta6-pil b{font-family:'Space Grotesk',system-ui,sans-serif}
.peta6-pil.is-ok{background:rgba(35,88,82,.12);color:var(--teal-act)}
.peta6-pil.is-warn{background:rgba(198,72,58,.14);color:var(--rose)}
.peta6-batas{display:flex;align-items:center;gap:9px;margin:3px 0}
.peta6-batas::before,.peta6-batas::after{content:'';flex:1;border-top:1px dashed var(--ink-200)}
.peta6-batas span{
  font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-500);white-space:nowrap
}
.peta6-kaki{font-size:11.5px;line-height:1.5;color:var(--ink-500);margin:11px 0 0}
/* Peta menyisip di antara kalimat penjelas dan baris pertama, jadi
   aturan .gkv3-scan-ket + .scan-row tidak lagi kena. Garis atas baris
   pertama justru dibutuhkan di sini sebagai pemisah peta dan daftar. */
.scan-card .peta6 + .scan-row{border-top:1px solid var(--ink-100)}
@media(max-width:640px){
  .peta6-teks{font-size:12px}
  .peta6-pil{font-size:10.5px;padding:4px 8px}
}
/* Jalur cetak: peta ikut tercetak, tapi tanpa latar berwarna yang boros
   tinta dan sering hilang di printer yang mengabaikan background. Warna
   dipindahkan ke garis kirinya, yang selalu tercetak. */
@media print{
  .peta6-blok{background:transparent!important;break-inside:avoid}
  .peta6-blok.is-bawah{opacity:1}
}

/* ── LAYAR 6 · Next-step cards ─────────────────────────────────────
   ⚠ Jumlah kolomnya TIDAK dipaku 4 seperti mockup. --ns-cols diisi
   patchNextStepCounts() dari jumlah kartu yang benar-benar layak tampil,
   dan memaku 4 akan menyisakan sel kosong begitu salah satu kartu tidak
   memenuhi syarat. Ini pelajaran yang sama dengan pipeline stats Lamaran
   yang menyisakan kotak kosong di 2 kolom. */
.ns-card{border-radius:14px;padding:18px 16px}
/* Ubin ikon: teal jadi emas lembut, ikut mockup. Ukurannya dikembalikan ke
   38px -- lapisan lama menaikkannya ke 40px. */
.ns-card-icon{
  width:38px!important;height:38px!important;border-radius:10px!important;
  background:#F3E7CE!important;color:var(--gold-teks)!important;margin-bottom:11px
}
.ns-card-icon .gk-ico,.ns-card-icon svg{width:19px;height:19px}
.ns-card-title{font-size:13.5px;line-height:1.35;margin-bottom:5px}
/* T14: 11,5px -> 12,5px, disamakan dengan nilai dasarnya di blok atas.
   Deskripsi kartu itu isi kartunya, dan di mobile dia sudah 13px sejak
   audit 14 Agustus; layar lebar tertinggal dengan angka yang lebih kecil
   justru di tempat ruangnya paling longgar. */
.ns-card-desc{font-size:12.5px;line-height:1.5;margin-bottom:10px}
.ns-card-cta{font-size:12px;font-weight:600;color:var(--gold-teks)}

/* LAYAR 5 (riwayat) dicabut 2026-08-09, CSS-nya ikut. Gayanya sekarang
   Tailwind di components/DaftarRiwayatCv.tsx. Yang SENGAJA ditinggal di
   bawah cuma .gkv3-berkas-lama, karena dia dipakai layar HASIL waktu audit
   lama dibuka lewat ?audit=<id>, bukan oleh daftar riwayat. */

/* Tautan unduh berkas asli di layar hasil (audit lama dibuka dari riwayat). */
.gkv3-berkas-lama{
  background:var(--sunken);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--muted)
}
.gkv3-berkas-lama a{color:var(--teal-act);text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════════
   ROMBAK 2026-08-05 · LAYAR 8 — REWRITE BERSANDING (Arah B)
   Desain: `Rewrite Side-by-side Desktop` / `Rewrite Side-by-side Mobile`
   di `Portal CV Auditor.dc.html`.

   🔴 Arah A (`Rewrite Studio` / `Rewrite Diff`) ditandai arsip di file
   desain dan TIDAK dibangun. Kalau ada yang menyalin dari sana nanti,
   tandanya gampang: Arah A punya panel alat mengambang di kanan dan
   diff berwarna merah/hijau per kata. Dua-duanya tidak ada di sini.

   Blok ini menang atas blok `.cvr-*` Fase 3 di baris ~890 semata-mata
   karena letaknya paling akhir. Jangan menyisipkan CSS rewrite baru di
   bawahnya tanpa mengukur ulang.
   ══════════════════════════════════════════════════════════════════ */

/* ── Bar gelap. Desain: ink-900, 18px 40px, judul kiri + aksi kanan ── */
/* ⚠ Bar ini SENGAJA melebar penuh lewat margin negatif, dan padding
   dalamnya WAJIB sama besar dengan margin negatifnya. Kalau tidak, teks di
   bar berhenti di tepi yang berbeda dari isi halaman di bawahnya, dan
   selisihnya cuma beberapa piksel -- cukup kecil untuk lolos, cukup besar
   untuk terlihat miring. Desain menulis padding 40px, tapi 40px itu diukur
   di dalam kartu mock; di halaman betulan tepi isinya 48px (lihat blok
   #screen-rewrite.screen.active di atas). Angka halaman yang menang, dan
   dua angka ini harus bergerak bersama. */
.cvr-subhead{
  background:var(--ink-900);border-bottom:none;color:var(--ink-50);
  margin:-28px -15px 18px;padding:18px 15px;
  align-items:center;gap:24px;flex-wrap:wrap;
  /* ⚠ `width:auto`, bukan 100%. Aturan Fase 3 memasang width:100%, dan
     100% di sini artinya selebar KOTAK ISI halaman -- jadi margin negatif
     kiri menggeser bar keluar 48px sementara tepi kanannya tetap di dalam,
     dan bar-nya berhenti 96px sebelum tepi kanan layar. Kelihatan seperti
     bar yang sengaja dipendekkan, bukan seperti salah. */
  width:auto
}
@media(min-width:768px){
  .cvr-subhead{margin-inline:-48px;padding-inline:48px}
}
@media(max-width:749px){.cvr-subhead{gap:14px}}
.cvr-subhead-main{min-width:0;flex:1}
.cvr-subhead-title{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;
  font-size:17px;color:var(--ink-50)
}
@media(max-width:749px){.cvr-subhead-title{font-size:15px}}
/* `small` di dalam judul dicabut isinya oleh JS -- kalimat panjangnya
   pindah jadi pil hijau di bawah, sesuai desain. Aturannya ditinggal
   supaya kalau ada jalur render lama yang masih mengisinya, dia tidak
   muncul sebagai teks gelap di atas latar gelap. */
.cvr-subhead-title small{display:none}
/* T5 (audit 2026-09-02): white-space:nowrap WAJIB. Tanpa itu kalimat
   panjangnya membungkus di dalam bentuk kapsul (border-radius:999px) dan di
   390px hasilnya lima baris di dalam satu bulatan -- terbaca sebagai
   komponen rusak, bukan sebagai pil. Versi pendeknya dipilih CSS di bawah,
   bukan JS, supaya benar juga waktu layar berubah lebar sesudah render. */
.cvr-subhead-pill{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  background:rgba(46,125,91,.25);color:#7FC9A6;
  font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;
  white-space:nowrap
}
.cvr-subhead-pill .pil-pendek{display:none}
@media(max-width:749px){
  .cvr-subhead-pill .pil-panjang{display:none}
  .cvr-subhead-pill .pil-pendek{display:inline}
}
.cvr-subhead-stat{font-size:12.5px;color:var(--muted-on-dark,#9A948A)}
@media(max-width:749px){.cvr-subhead-stat{display:none}}

/* Blok bukti di atas hasil rewrite (2026-08-11). Sengaja TIDAK disembunyikan
   di mobile, beda dari .cvr-subhead-stat di atas: justru di ponsel bukti ini
   satu-satunya yang tersisa, karena panel kerangka di kiri jatuh ke bawah
   konten dan bar gelapnya menyembunyikan statistiknya. */
.cvr-bukti{border:1px solid var(--gd,rgba(184,134,43,.32));background:var(--gd2,rgba(184,134,43,.07));border-radius:14px;padding:16px 18px;margin-bottom:20px}
.cvr-bukti-judul{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:12px}
.cvr-bukti-baris{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cvr-bukti-sel{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.cvr-bukti-sel b{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600}
.cvr-bukti-sel span{font-size:11.5px;color:var(--c55,#6b6b6b)}
/* Nol-nya diberi warna emas, bukan merah atau abu: ini angka yang kita
   BANGGAKAN, bukan angka yang kurang. */
.cvr-bukti-sel.is-nol b{color:var(--gold-teks,#855F1C)}   /* 3,03 -> 5,38 */
/* Sel "skill ditambahkan dari JD". Warnanya sengaja BEDA dari .is-nol:
   yang satu kabar baik (nol fakta diubah), yang ini hal yang harus
   diperiksa user sebelum mengirim CV-nya. */
.cvr-bukti-sel.is-tambah b{color:var(--rose,#95251F)}
/* Catatan tujuan cetak di modal cetak PDF. Warnanya rose, bukan gold:
   ini bukan tips tambahan, ini langkah yang kalau dilewati bikin berkasnya
   keluar sebagai gambar tanpa teks. */
.gkp-warn{margin:14px 0 4px;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.55;color:var(--c85,#3B342D);background:rgba(149,37,31,.06);border:1px solid rgba(149,37,31,.22)}
.cvr-bukti-nota{margin-top:12px;padding-top:11px;border-top:1px solid var(--gd,rgba(184,134,43,.22));font-size:12px;line-height:1.6;color:var(--c55,#6b6b6b)}

/* Kepala status: jawaban atas "boleh kukirim belum". Dia yang pertama dibaca,
   jadi dia yang paling besar. Angka bukti di bawahnya jadi pendukung, bukan
   kepala berita. */
.cvr-bukti-status{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--gd,rgba(184,134,43,.22))}
.cvr-st-judul{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;line-height:1.3}
.cvr-st-judul .gk-ico{width:18px;height:18px;flex:none;color:var(--teal-act,#235852)}
.cvr-st-sub{margin-top:5px;font-size:13px;line-height:1.6;color:var(--c55,#6b6b6b);max-width:560px}
.cvr-st-aksi{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
/* Kontras (audit 2026-09-02, keputusan Rivaldy: gelapkan emas di permukaan
   tombol). Putih di atas --gold (#B8862B) cuma 3,24 dan gagal AA, padahal ini
   tombol utama kartu "Tinggal 1 bagian yang cuma kamu yang tahu angkanya".
   Latarnya pindah ke --gold-teks (#855F1C), yang putih di atasnya 5,09 dan
   memang sudah dipakai .btn-primary sejak 30 Agustus untuk alasan yang sama.
   🔴 Nilai baru TIDAK dikarang: memakai token yang sudah diukur di empat latar
   lebih aman daripada menambah satu emas lagi yang harus diukur sendiri.
   ⚠ hover:brightness(1.08) DICABUT. Menaikkan brightness berarti latarnya
   MEMUCAT tepat waktu jari menyentuhnya, jadi rasionya turun lagi di bawah
   ambang persis di detik tombolnya dipakai. Diganti warna hover yang lebih
   gelap, sama polanya dengan --gold-teks-hover. */
.cvr-st-btn{background:var(--gold-teks,#855F1C);color:#fff;border:0;border-radius:999px;font-size:13px;font-weight:600;padding:11px 20px;cursor:pointer;transition:background .2s}
.cvr-st-btn:hover{background:var(--gold-teks-hover,#7D5719)}
.cvr-st-btn2{background:transparent;color:var(--ink,#1a1a1a);border:1px solid var(--gd,rgba(184,134,43,.4));border-radius:999px;font-size:13px;font-weight:600;padding:11px 20px;cursor:pointer}
.cvr-st-btn2:hover{background:var(--gd2,rgba(184,134,43,.07))}
/* Keadaan selesai dibedakan tegas dari keadaan menunggu, supaya "beres" terasa
   seperti peristiwa dan bukan cuma angka yang berubah jadi nol. */
.cvr-bukti.is-siap{border-color:rgba(35,88,82,.35);background:rgba(35,88,82,.05)}
.cvr-bukti.is-siap .cvr-bukti-status{border-bottom-color:rgba(35,88,82,.2)}
.cvr-bukti.is-siap .cvr-st-btn{background:var(--teal-act,#235852)}

/* Tiga panel penjelasan dilebur jadi satu, tertutup secara bawaan. */
.cvr-penjelas{margin-top:22px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:12px;overflow:hidden}
.cvr-penjelas-sum{cursor:pointer;padding:14px 18px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between}
.cvr-penjelas-sum::-webkit-details-marker{display:none}
.cvr-penjelas-sum::after{content:'+';font-size:17px;font-weight:400;color:var(--c55,#6b6b6b)}
.cvr-penjelas[open] .cvr-penjelas-sum::after{content:'\2212'}
.cvr-penjelas-sum:hover{background:rgba(0,0,0,.02)}
.cvr-penjelas-isi{padding:0 18px 16px}
.cvr-sub{margin-top:14px}
.cvr-sub-title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c55,#6b6b6b);margin-bottom:8px}
@media(max-width:480px){
  .cvr-bukti-baris{grid-template-columns:1fr;gap:9px}
  .cvr-bukti-sel{flex-direction:row;align-items:baseline;gap:8px}
  .cvr-bukti-sel b{font-size:18px}
}
.cvr-subhead-actions{gap:10px}

/* Tombol di bar gelap: ghost transparan + satu emas. .cvr-action-btn asli
   dirancang untuk latar terang, jadi warnanya ditimpa semua di sini. */
.cvr-subhead .cvr-action-btn{
  background:rgba(251,247,240,.12);border:none;color:var(--ink-50);
  font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:10px
}
.cvr-subhead .cvr-action-btn:hover{background:rgba(251,247,240,.2)}
.cvr-subhead .cvr-action-btn-primary{background:var(--gold-500);color:var(--ink-900)}
.cvr-subhead .cvr-action-btn-primary:hover{background:var(--gold-400)}
.cvr-subhead .cvr-ph-counter{background:rgba(184,134,43,.2);border-color:transparent;color:var(--gold-400)}

/* Penukar "Bandingkan ⇄" DICABUT dari tampilan. Di Arah B bersanding itu
   keadaan tetap, bukan mode: kolom kiri SELALU ada. Yang dulu cuma muncul
   waktu toggle menyala (.cvr-before, .cvr-why) sekarang permanen -- jadi
   ini bukan fitur yang hilang, cuma sakelar yang tidak punya dua posisi
   lagi. Elemennya ditinggal di DOM karena enhanceRewrite() dan
   showScreen() masih menyentuhnya. */
.cvr-toggle-compare{display:none!important}
.cvr-before,.cvr-why{display:block}

/* ── Panel kerangka: dari rail kiri jadi strip mendatar di atas kolom ──
   Desain B tidak menggambar rail sama sekali, dan lebar 260px itu justru
   yang dibutuhkan dua kolom naskah. Panelnya TIDAK dibuang (dia satu-
   satunya tempat orang bisa lihat section mana yang berubah tanpa
   menggulir seluruh CV); dia pindah ke atas, mendatar, di semua lebar. */
@media(min-width:900px){
  .cvr-layout{flex-direction:column;max-width:none;gap:16px}
  .cvr-skeleton-panel{width:100%;position:static;display:flex;gap:10px;
    align-items:center;overflow-x:auto;padding:12px 16px}
  /* ⚠ `flex-direction:row` WAJIB ditulis. Aturan dasar di baris ~915
     memasang `column`, dan `display:flex` saja tidak mengembalikannya --
     sudah sekali terlihat sebagai kolom tinggi di tengah strip mendatar. */
  .cvr-skeleton-panel .cvr-skel-rows{display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap}
  .cvr-skeleton-panel .cvr-skel-row{flex-direction:column;align-items:flex-start;
    gap:2px;white-space:nowrap;padding:8px 10px;border-radius:10px;
    background:var(--ink-100);border-bottom:none}
  .cvr-skeleton-panel .cvr-skel-stats{margin-top:0;padding-top:0;border-top:none;
    border-left:1px solid var(--ink-200);padding-left:14px;flex-direction:row;gap:14px}
}
.cvr-content{max-width:none}

/* ── Dua kolom ────────────────────────────────────────────────────────
   Gridnya dipasang di .cvr-diff (per kalimat), BUKAN di dua kolom halaman
   yang menggulir sendiri-sendiri. Alasannya: kolom terpisah cuma sejajar
   selama panjang kalimat kiri dan kanan kebetulan sama, dan hasil rewrite
   HAMPIR SELALU lebih panjang dari aslinya. Sekali satu kalimat melar,
   seluruh sisa kolom bergeser dan orang membandingkan baris yang salah.
   Per-kalimat, pasangannya tidak bisa lepas. */
@media(min-width:900px){
  .cvr-diff{
    display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;
    background:none;border-radius:12px;overflow:hidden;
    border:1px solid var(--ink-200)
  }
  .cvr-diff .cvr-before{
    grid-column:1;grid-row:1;margin:0;padding:16px 20px;
    background:#F1ECE1;border-right:1px solid var(--ink-200);
    color:var(--ink-500);text-decoration:none;opacity:1;
    font-size:14px;line-height:1.85
  }
  .cvr-diff .cvr-after{
    grid-column:2;grid-row:1;padding:16px 20px;background:var(--white);
    font-size:14.5px;line-height:1.85;font-weight:400
  }
  /* T7: 11.5px -> 13px, disamakan dengan mobile. ⚠ Aturan inilah yang
     benar-benar berlaku di desktop, bukan `.cvr-why` polos di blok dasar:
     kekhususannya 0,2,0 lawan 0,1,0. Menaikkan yang polos saja tidak akan
     mengubah apa pun di layar lebar, dan itu jebakan yang sudah tercatat
     tiga kali di berkas ini. */
  .cvr-diff .cvr-why{
    grid-column:2;grid-row:2;margin:0;padding:0 20px 14px;background:var(--white);
    font-size:13px;line-height:1.6;color:var(--ink-500);font-style:normal
  }
  /* Kalimat yang TIDAK ditulis ulang tetap satu lajur penuh, tidak
     digandakan ke dua kolom. Menggandakan kalimat yang sama persis di
     kiri dan kanan membuat halaman terlihat penuh perubahan padahal
     tidak ada yang berubah di baris itu. */
  .cvr-bullet-plain{
    background:#F1ECE1;border:1px solid var(--ink-200);border-radius:12px;
    padding:14px 20px;color:var(--ink-500);font-size:14px;line-height:1.85
  }
  .cvr-bullet-plain::before{left:8px}
}

/* Baris label kolom, ditaruh di TIAP section, bukan sekali di atas
   halaman. Desain menggambarnya sekali karena mock-nya setinggi satu
   layar; CV betulan punya 5-8 section dan label yang sekali itu sudah
   tergulir hilang persis waktu orang mulai membandingkan. */
.cvr-colhead{display:none}
@media(min-width:900px){
  .cvr-colhead{
    display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:10px;
    border:1px solid var(--ink-200);border-radius:10px;overflow:hidden
  }
  .cvr-colhead>div{
    padding:9px 20px;font-size:11px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase
  }
  .cvr-colhead-old{background:#F1ECE1;border-right:1px solid var(--ink-200);color:var(--muted,#6B6055)}   /* 4,17 -> 5,20 */
  .cvr-colhead-new{background:var(--white);color:var(--gold-teks)}   /* 3,24 -> 5,75 */
}

/* Kotak JD dapat perlakuan ikon yang sama dengan kotak unggah CV di
   atasnya, cuma lebih kecil karena kotaknya memang sekunder. `font-size:0`
   ikut disalin: tanpa itu, baris kosong di dalam kotak ikon menyisakan
   tinggi baris teks dan SVG-nya duduk turun beberapa piksel. */
.jd-zone-icon{
  width:38px;height:38px;margin:0 auto 8px;border-radius:10px;
  background:var(--gold-soft);border:1px solid var(--gold-200);
  color:var(--gold-600);display:flex;align-items:center;justify-content:center;font-size:0
}
.jd-zone-icon svg{display:block;width:18px;height:18px}

/* ══ LAYAR 11 · DATA KAMU (desain `Upload CV Desktop`, blok data kamu) ══ */
.gkv3-terisi{
  background:#F0F7F3;border:1px solid rgba(46,125,91,.25);border-radius:10px;
  padding:9px 14px;font-size:12px;line-height:1.5;color:#2E7D5B;margin-bottom:12px
}
/* Ringkasan kolom yang masih kurang, tepat di atas tombol audit.
   `display:none` bawaan; JS memasang .visible. Warnanya sengaja memakai token
   rose yang sama dengan .error-banner supaya dua-duanya terbaca sebagai satu
   jenis pesan, walau letaknya berjauhan. */
.gkv3-kurang{
  display:none;background:var(--rose-bg);border:1px solid var(--rose-glow);
  border-radius:var(--r);padding:12px 14px;margin-top:20px;
  font-size:13px;line-height:1.55;color:var(--ink-700)
}
.gkv3-kurang.visible{display:block}
.gkv3-kurang b{color:var(--rose);font-weight:600;display:block;margin-bottom:2px}
/* Kalau pesan ini muncul, garis pemisah di atas tombol jadi dobel dengan
   kotaknya. Yang dimatikan garisnya, bukan jaraknya. */
.gkv3-kurang.visible + .gkv3-kaki{border-top:none;padding-top:12px;margin-top:0}
/* Nota "Audit Lengkap sudah dipilih, CV kamu masih di sini". Bentuknya sama
   persis dengan .gkv3-kurang supaya dua-duanya terbaca sebagai satu jenis
   pesan di satu tempat yang sama; yang membedakan cuma warnanya, teal untuk
   kabar baik dan rose untuk yang menahan. */
.gkv3-siap{
  display:none;background:var(--teal-glow2);border:1px solid var(--teal-glow);
  border-radius:var(--r);padding:12px 14px;margin-top:20px;
  font-size:13px;line-height:1.55;color:var(--ink-700)
}
.gkv3-siap.visible{display:block}
.gkv3-siap b{color:var(--teal-act);font-weight:600;display:block;margin-bottom:2px}
.gkv3-siap.visible + .gkv3-kurang.visible{margin-top:10px}
.gkv3-siap.visible + .gkv3-kurang:not(.visible) + .gkv3-kaki,
.gkv3-siap.visible + .gkv3-kaki{border-top:none;padding-top:12px;margin-top:0}
/* Gembok yang saldonya sudah cukup berhenti jadi tautan dan jadi tombol: dia
   tidak pergi ke mana-mana, dia menggerakkan halaman ini. Tanpa href, <a>
   kehilangan kursor tangannya, dan itu satu-satunya yang perlu dikembalikan --
   sisa gayanya tetap dari .lock-cta / .proy-lock-cta. */
.lock-cta.as-btn,.proy-lock-cta.as-btn{cursor:pointer}
.gkv3-kaki{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--ink-100)
}
.gkv3-kaki-nota{font-size:13px;line-height:1.5;color:var(--ink-500);margin:0}
/* ⚠ .btn di berkas ini melebar penuh secara bawaan. Di baris ini dia harus
   sebesar isinya, sama alasannya dengan tombol di kepala Riwayat. */
.gkv3-kaki .btn{width:auto;min-width:0;flex:none;padding:13px 28px}
@media(max-width:749px){
  /* Di HP baris ini menumpuk, dan tombolnya yang di ATAS: di layar sempit
     catatan dua baris mendorong tombol keluar dari pandangan. */
  .gkv3-kaki{flex-direction:column-reverse;align-items:stretch;gap:12px}
  .gkv3-kaki .btn{width:100%}
  .gkv3-kaki-nota{text-align:center}
}

/* ══ LAYAR 9 · KARTU PROSES REWRITE (desain `Rewrite Loading`) ════════
   Kartu yang SAMA dengan proses audit biasa, cuma bersalut gelap. Mode
   audit tidak disentuh sama sekali: semua aturan di bawah bersyarat pada
   .cvr-loading-rewrite. */
.cvr-load-eyebrow{display:none}
#screen-loading.cvr-loading-rewrite .gkv3-load{
  background:var(--ink-900);border-color:var(--ink-900);
  text-align:left;padding:36px 34px
}
#screen-loading.cvr-loading-rewrite .gkv3-load-ikon{display:none}
#screen-loading.cvr-loading-rewrite .cvr-load-eyebrow{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-400)
}
/* Playfair di sini SAH. Aturan portal: "Playfair = momen editorial", dan
   satu kalimat menenangkan sambil orang menunggu memang momen editorial.
   Bukan judul biasa -- judul biasa di halaman ini tetap Space Grotesk. */
#screen-loading.cvr-loading-rewrite .gkv3-load-judul{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:26px;line-height:1.3;color:var(--ink-50);margin:10px 0 22px
}
#screen-loading.cvr-loading-rewrite .gkv3-load-sub{color:var(--muted-on-dark,#9A948A);font-size:12px;margin:12px 0 0}
/* Alamat kembali (cvrTautanHasil). Cuma dirender di mode rewrite, tapi
   selectornya sengaja tidak dikunci ke .cvr-loading-rewrite: elemennya
   memang dicabut sendiri waktu balik ke mode audit, dan mengunci dua kali
   bikin satu perubahan harus diingat di dua tempat. */
.cvr-tautan-hasil{margin:14px auto 0;max-width:460px;text-align:left;padding:12px 14px;border:1px solid rgba(203,184,126,.32);border-radius:10px;background:rgba(203,184,126,.07)}
.cvr-th-ket{margin:0 0 9px;font-size:12px;line-height:1.55;color:var(--muted-on-dark,#9A948A)}
.cvr-th-btn{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:8px;border:1px solid rgba(203,184,126,.55);background:transparent;color:var(--gold-500,#CBB87E);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .2s}
.cvr-th-btn:hover{background:rgba(203,184,126,.14)}
/* Tautan penuh tetap dicetak, bukan hiasan: kalau clipboard ditolak browser,
   ini satu-satunya jalan menyalinnya dengan tangan. */
.cvr-th-url{display:block;margin-top:9px;font-size:11px;line-height:1.45;color:var(--muted-on-dark,#9A948A);word-break:break-all}
#screen-loading.cvr-loading-rewrite .loading-steps{margin-top:0}
#screen-loading.cvr-loading-rewrite .loading-step{color:var(--ink-500);padding:7px 0;font-size:13.5px}
#screen-loading.cvr-loading-rewrite .loading-step.done{color:var(--muted-on-dark,#9A948A)}
#screen-loading.cvr-loading-rewrite .loading-step.active{color:var(--ink-50);font-weight:600}
#screen-loading.cvr-loading-rewrite .gkv3-bar{background:rgba(251,247,240,.12);margin-top:26px}
#screen-loading.cvr-loading-rewrite .gkv3-bar-isi{background:var(--gold-500)}
#screen-loading.cvr-loading-rewrite .gkv3-bar-ket{color:var(--muted-on-dark,#9A948A)}
/* Bilah kemajuan digambar desain DI BAWAH daftar langkah, bukan di atas.
   Urutan sumbernya tidak diubah (mode audit memakai urutan yang lain), jadi
   pemindahannya lewat flex order -- dan itu menuntut kartunya jadi flex. */
#screen-loading.cvr-loading-rewrite .gkv3-load{display:flex;flex-direction:column}
#screen-loading.cvr-loading-rewrite .loading-steps{order:1}
#screen-loading.cvr-loading-rewrite .gkv3-bar{order:2}
#screen-loading.cvr-loading-rewrite .gkv3-bar-ket{order:3}
#screen-loading.cvr-loading-rewrite .gkv3-load-sub{order:4}

/* ══ LAYAR 9 · PRATINJAU UNDUH ═══════════════════════════════════════ */
#screen-dlprev.screen.active{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 15px 64px;
  display:block
}
@media(min-width:768px){#screen-dlprev.screen.active{padding-inline:48px}}

.cvrprev-bar{
  background:var(--white);border-bottom:1px solid var(--ink-200);
  margin:0 -15px 0;padding:14px 15px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;top:72px;z-index:150
}
@media(min-width:768px){.cvrprev-bar{margin-inline:-48px;padding-inline:48px}}
.cvrprev-kembali{
  background:none;border:none;font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;font-size:15px;color:var(--ink-900);cursor:pointer;padding:6px 0;
  /* inline-flex sejak glif ← diganti ikon SVG (2026-08-11) */
  display:inline-flex;align-items:center;gap:7px
}
.cvrprev-aksi{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cvrprev-tpl{display:flex;background:var(--ink-100);border-radius:999px;padding:3px}
.cvrprev-tpl button{
  background:none;border:none;font-family:inherit;font-size:11.5px;font-weight:600;
  padding:6px 13px;border-radius:999px;color:var(--ink-500);cursor:pointer
}
.cvrprev-tpl button.is-aktif{background:var(--white);color:var(--ink-900);box-shadow:0 1px 3px rgba(26,23,18,.12)}
.cvrprev-btn{
  background:var(--white);border:1px solid var(--ink-200);color:var(--ink-900);
  font-family:inherit;font-size:12px;font-weight:600;padding:9px 14px;
  border-radius:10px;cursor:pointer;
  /* inline-flex sejak glif ↓ diganti ikon SVG (2026-08-11) */
  display:inline-flex;align-items:center;gap:6px
}
.cvrprev-btn:hover{border-color:var(--gold-500)}
.cvrprev-btn.is-utama{background:var(--ink-900);border-color:var(--ink-900);color:var(--ink-50);padding:9px 16px}
.cvrprev-btn.is-utama:hover{background:var(--ink-700)}

.cvrprev-isi{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;padding:24px 0}
@media(max-width:899px){.cvrprev-isi{grid-template-columns:1fr;gap:16px}}

/* Kertas. Ukurannya mengikuti lebar kolom, bukan dipaku 820px seperti mock:
   mock-nya digambar di kartu 820px, halaman betulan lebih lebar. */
.cvrprev-kertas{
  background:var(--white);border:1px solid var(--ink-200);border-radius:8px;
  padding:36px 40px;box-shadow:0 8px 24px rgba(26,23,18,.08);
  font-family:'DM Sans',system-ui,sans-serif;color:var(--ink-700)
}
@media(max-width:899px){.cvrprev-kertas{padding:22px 20px}}
/* ⚠ Aturan .cvrp di berkas ini hidup di dalam @media print, jadi di layar
   kertasnya TIDAK dapat satu pun dari aturan itu. Yang di bawah ini
   menirunya untuk layar. Kalau angka di blok print diubah, ubah di sini
   juga -- dua-duanya menggambarkan lembar yang sama. */
.cvrprev-kertas .cvrp-name{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:22px;color:var(--ink-900)}
.cvrprev-kertas .cvrp-title{font-size:12.5px;color:var(--ink-500);margin-top:3px}
.cvrprev-kertas .cvrp-contact{font-size:12.5px;color:var(--ink-500);margin:3px 0 16px;padding-bottom:14px;border-bottom:1.5px solid var(--ink-900)}
.cvrprev-kertas .cvrp-sec{margin-bottom:16px}
.cvrprev-kertas .cvrp-sec h2{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-900);margin:0 0 6px}
.cvrprev-kertas .cvrp-summary,.cvrprev-kertas .cvrp-bullets li{font-size:12.5px;line-height:1.7;margin:0 0 4px}
.cvrprev-kertas .cvrp-fact{font-size:12.5px;font-weight:600;color:var(--ink-900)}
.cvrprev-kertas .cvrp-bullets{list-style:none;margin:5px 0 0;padding:0}
.cvrprev-kertas .cvrp-bullets li{padding-left:14px;position:relative}
.cvrprev-kertas .cvrp-bullets li::before{content:'•';position:absolute;left:0}
.cvrprev-kertas .cvrp-entry+.cvrp-entry{margin-top:10px}
/* T3 (audit 2026-09-02): baris penyerta pendidikan (tahun, IPK) dan
   paragraf gabungan section daftar (skills, sertifikasi, bahasa). Dulu
   keduanya jatuh ke .cvrp-fact, jadi sembilan skill jadi sembilan baris
   tebal setara judul. Angkanya harus tetap seiring dengan blok @media print
   di cvrEnsurePrintStyle(); dua-duanya menggambarkan lembar yang sama. */
.cvrprev-kertas .cvrp-sub{font-size:11.5px;color:var(--ink-500);line-height:1.6}
.cvrprev-kertas .cvrp-daftar{font-size:12.5px;line-height:1.7;margin:0}
/* T2: sorotan bagian ◇ yang belum diisi. Cuma di kertas pratinjau -- jalur
   unduh tidak pernah menghasilkan <mark> ini (lihat cvrExtractAfterText).
   Menirukan chip .cvr-ph di layar rewrite: latar emas muda, garis putus. */
/* ⚠ Warna teksnya --gold-teks, bukan --gold-strong. Diukur 2 September:
   --gold-strong (#9C6F20) di atas --gold-100 cuma 4,17, gagal AA, dan sorotan
   ini justru menandai bagian yang HARUS dibaca orangnya. --gold-teks 5,34 di
   latar yang sama. Garis putus-putusnya tetap --gold; itu hiasan. */
.cvrprev-kertas mark.cvrp-ph{
  background:var(--gold-100);color:var(--gold-teks,#855F1C);
  border-bottom:2px dashed var(--gold);border-radius:3px;padding:0 2px;font-weight:600
}
.cvrprev-kertas mark.cvrp-ph.is-sorot{outline:2px solid var(--gold-500);outline-offset:2px}
/* T4: keterangan beda template, satu baris di bawah bar pratinjau. */
.cvrprev-tpl-ket{font-size:12.5px;line-height:1.6;color:var(--ink-500);padding:10px 0 0}
/* T2: tautan "Lihat bagian kosongnya" di kartu kuning rail. */
.cvrprev-tautan{
  background:none;border:none;padding:6px 0 0;font-family:inherit;font-size:12px;
  /* --gold-teks, alasan sama dengan sorotan di atas: --gold-strong cuma 4,17
     di kartu kuning ini. */
  font-weight:600;color:var(--gold-teks,#855F1C);cursor:pointer;text-decoration:underline
}

.cvrprev-rail{display:flex;flex-direction:column;gap:12px}
/* Baris ✓/⚠ di kartu "Sebelum unduh" sejak ikonnya jadi SVG (2026-08-11).
   align-items:flex-start, bukan center: teksnya boleh membungkus dua baris
   dan ikonnya harus tetap sejajar baris pertama. */
.cvrprev-baris{display:flex;align-items:flex-start;gap:7px}
.cvrprev-baris .gk-ico{margin-top:1px}
.cvrprev-kartu{background:var(--white);border:1px solid var(--ink-200);border-radius:12px;padding:14px 16px}
.cvrprev-kartu.is-hijau{background:#EAF2EE;border-color:#BFD9CD}
.cvrprev-kartu.is-kuning{background:var(--gold-100);border-color:rgba(184,134,43,.4)}
.cvrprev-kartu.is-putus{background:#FCFAF5;border:1px dashed #D9D2C5}
.cvrprev-kartu b{display:block;font-size:12.5px;font-weight:600;color:var(--ink-900)}
.cvrprev-kartu.is-hijau b{color:#235852}
.cvrprev-kartu p{font-size:11.5px;line-height:1.6;color:var(--ink-500);margin:5px 0 0}
.cvrprev-kartu.is-hijau p{color:#3B6E62}
.cvrprev-daftar{display:flex;flex-direction:column;gap:7px;margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--ink-500)}

/* ── Antrean isian ◇ ────────────────────────────────────────────────
   Desktop: bar tetap di bawah layar, seperti desain.
   HP: tombol lebar penuh yang membuka lembar bawah (M2). */
/* 🔴 Ruang bawah diikat ke SYARAT munculnya bar, bukan dipasang tetap.
   Ini persis cacat yang ketemu di Lamaran Kerja 2026-08-04: tombol
   mengambang menutupi isi halaman, dan pasangannya, padding bawah yang
   menganga 96px waktu tombolnya tidak ada. Kelasnya dipasang/dicabut
   cvrQueueRender() bersamaan dengan bar-nya sendiri. */
body.cvr-ada-antrean #screen-rewrite.screen.active{padding-bottom:150px}
@media(max-width:899px){body.cvr-ada-antrean #screen-rewrite.screen.active{padding-bottom:96px}}

.cvr-queue[hidden]{display:none}
.cvr-queue{position:fixed;left:0;right:0;bottom:0;z-index:160}
.cvr-queue-panel{
  background:var(--white);border-top:1.5px solid var(--gold-500);
  box-shadow:0 -14px 36px rgba(26,23,18,.14);
  padding:18px 48px 22px;display:flex;align-items:center;gap:20px
}
.cvr-queue-info{flex:0 0 auto;max-width:320px}
/* Kontras: teks 10,5px emas --gold-500 di atas putih cuma 3,24. Aturan
   "--gold-500 boleh untuk teks BESAR" tidak berlaku di sini, ini justru
   teks terkecil di bar antrean. Dipindah ke --gold-teks (5,75 di putih). */
.cvr-queue-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-teks)}
.cvr-queue-tanya{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--ink-900);margin-top:3px}
.cvr-queue-input{
  flex:1;min-width:0;border:1.5px solid var(--gold-500);border-radius:10px;
  padding:12px 14px;background:#FFFDF8;font-family:inherit;font-size:14px;color:var(--ink-900)
}
.cvr-queue-input:focus{outline:2px solid var(--gold-400);outline-offset:1px}
.cvr-queue-lewati{
  flex:0 0 auto;background:none;border:none;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--ink-500);cursor:pointer;padding:8px
}
.cvr-queue-lewati:hover{color:var(--ink-900)}
.cvr-queue-simpan{
  flex:0 0 auto;background:var(--ink-900);color:var(--ink-50);border:none;
  font-family:inherit;font-size:13px;font-weight:600;padding:12px 22px;
  border-radius:10px;cursor:pointer;white-space:nowrap
}
.cvr-queue-simpan:hover{background:var(--ink-700)}
.cvr-queue-dots{flex:0 0 auto;display:flex;gap:5px}
.cvr-queue-dots span{width:22px;height:4px;border-radius:999px;background:var(--ink-200)}
.cvr-queue-dots span.is-aktif{background:var(--gold-500)}
.cvr-queue-dots span.is-isi{background:var(--green,#3F8F5B)}
.cvr-queue-buka,.cvr-queue-tutup{display:none}

/* Chip yang sedang ditanyakan antrean. Penanda ini yang menyambungkan bar
   di bawah dengan kalimat di naskah -- tanpa dia, orang mengetik jawaban
   tanpa tahu kalimat mana yang sedang diisi. */
.cvr-ph.is-antre{background:var(--gold-100);outline:2px solid var(--gold-500);outline-offset:2px;border-radius:4px}

@media(max-width:899px){
  /* Di HP bar mendatar itu tidak muat: judul pertanyaan, kolom isian, dua
     tombol, dan empat titik tidak bisa berdiri sebaris di 390px tanpa
     salah satunya menyusut sampai tidak bisa disentuh. Jadi keadaan
     diamnya cuma satu tombol, dan panelnya naik waktu ditekan. */
  .cvr-queue-buka{
    display:block;width:100%;background:var(--ink-900);color:var(--ink-50);
    border:none;font-family:inherit;font-size:13.5px;font-weight:600;
    padding:13px;cursor:pointer
  }
  .cvr-queue-panel{
    display:none;flex-direction:column;align-items:stretch;gap:12px;
    padding:18px 18px 22px;border-radius:18px 18px 0 0;position:relative
  }
  .cvr-queue.is-buka .cvr-queue-buka{display:none}
  .cvr-queue.is-buka .cvr-queue-panel{display:flex}
  /* Ruang kanan HARUS ikut lebar tombol tutup (44px + 6px inset + jeda),
     bukan angka tetap. Waktu tombolnya dinaikkan dari 32px ke 44px, angka
     lama 32px membuat pertanyaan panjang berjalan lewat di bawahnya. */
  .cvr-queue-info{max-width:none;padding-right:56px}
  .cvr-queue-simpan{width:100%;padding:14px}
  .cvr-queue-lewati{align-self:center}
  .cvr-queue-dots{justify-content:center}
  /* 44px, bukan 32px seperti ukuran gambarnya. Ini satu-satunya jalan
     menutup lembar ini di HP, dan target sentuh di bawah 44px itu yang
     bikin orang menekan dua tiga kali lalu mengira halamannya nyangkut. */
  .cvr-queue-tutup{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:6px;right:6px;background:none;
    border:none;font-size:16px;color:var(--ink-500);cursor:pointer;
    width:44px;height:44px;line-height:1
  }
}

/* Label "Sekarang" / "Hasil rewrite" per kalimat. Elemen betulan, bukan
   pseudo-element: di HP dia satu-satunya penanda kartu mana yang mana,
   jadi dia harus ikut terbaca pembaca layar. Di desktop label itu sudah
   dipikul .cvr-colhead per section, jadi di sana dia disembunyikan. */
.cvr-diff-label{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:7px;color:var(--subtle,#9A948A)
}
.cvr-diff-label.is-baru{color:var(--gold-teks)}   /* 3,24 -> 5,75 */
/* ⚠ Label ini kembarannya .cvr-colhead-new, dan dua-duanya harus dibetulkan.
   Di bawah 900px yang tampil .cvr-diff-label; di atasnya .cvr-colhead-*.
   Sapuan di layar lebar melewatkan yang ini sepenuhnya, dan sebaliknya --
   satu label yang sama memakai dua elemen berbeda tergantung lebar layar. */
@media(min-width:900px){.cvr-diff-label{display:none}}

/* ── Mobile: bertumpuk, "Sekarang" di atas (redup), hasil di bawah ──
   Desain memberi kartu bawah panah ↓ di antaranya dan garis "kenapa" di
   dalam kartu hasil. */
@media(max-width:899px){
  .cvr-diff{background:none;padding:0;display:flex;flex-direction:column;gap:0}
  .cvr-diff .cvr-before{
    background:#F1ECE1;border:1px solid var(--ink-200);border-radius:14px;
    padding:14px 16px;margin:0;color:var(--ink-500);text-decoration:none;
    opacity:1;font-size:13px;line-height:1.75
  }
  .cvr-diff .cvr-after{
    background:var(--white);border:1.5px solid var(--gold-500);border-radius:14px;
    padding:14px 16px;margin-top:22px;position:relative;
    font-size:13.5px;line-height:1.75;color:var(--ink-900)
  }
  /* Panah ↓ digambar sebagai pseudo-element kartu hasil, bukan elemen
     sendiri: kalau dia elemen, dia ikut terbaca pembaca layar dan ikut
     tersalin waktu orang menyorot teks CV-nya. */
  .cvr-diff .cvr-after::before{
    content:'↓';position:absolute;top:-19px;left:0;right:0;text-align:center;
    font-size:14px;font-weight:600;color:var(--gold-500);line-height:1
  }
  /* T7: ikut 13px. Nilainya sudah efektif 13px sejak blok "MOBILE KELOMPOK
     A" di bawah menimpanya; disamakan di sini supaya tidak ada dua angka
     yang saling berlawanan untuk elemen yang sama. */
  .cvr-diff .cvr-why{
    background:var(--white);border:1.5px solid var(--gold-500);border-top:none;
    border-radius:0 0 14px 14px;margin-top:-14px;padding:9px 16px 13px;
    font-size:13px;line-height:1.6;color:var(--ink-500);font-style:normal
  }
  .cvr-diff .cvr-after:has(+.cvr-why){border-radius:14px 14px 0 0;border-bottom:none}
}

/* ============================================================
   MOBILE KELOMPOK A (2026-08-14)
   Hasil audit `[App] CV Audit Tool/Audit-Visual-Mobile-CVAuditor-2026-08-14.md`.
   Angka-angka di komentar bawah adalah pengukuran DOM nyata di harness
   lokal, bukan perkiraan.

   Blok ini sengaja ditaruh PALING BAWAH. Berkas ini hasil sambungan
   belasan blok <style> menurut urutan aslinya, dan lapisan penimpa
   gkv2/gkv3 ada di tengah. Menaruhnya di tengah berarti sebagian aturan
   di sini kalah tanpa satu pun error yang muncul.

   Semuanya kecuali overflow-wrap dikurung di bawah 749px, jadi tampilan
   desktop tidak berubah sama sekali.
   ============================================================ */

/* A2. URL panjang dari CV menembus kotaknya.
   Diukur di 320px: .cvr-fact kotaknya 244px, isinya 275px, karena
   "https://www.linkedin.com/in/rezaimaduddin/Turning" 49 karakter tidak
   punya tempat putus dan overflow-wrap default `normal`.

   TIDAK dikurung media query, sengaja. Di 375px string 49 karakter itu
   kebetulan masih muat di 299px, jadi bug-nya "hilang" — padahal URL
   LinkedIn yang lebih panjang atau email panjang tetap memicunya di lebar
   berapa pun. Ini soal isi CV orangnya, bukan soal lebar layar.

   `anywhere`, bukan `break-word`: keduanya sama-sama memutus kata yang
   kepanjangan, tapi cuma `anywhere` yang ikut memperkecil lebar min-content
   kotaknya. Dengan `break-word`, .cvr-entry tetap ngotot selebar 275px dan
   halamannya tetap bisa digeser ke samping. */
.cvr-fact,.cvr-entry,.cvr-before,.cvr-after{overflow-wrap:anywhere}

@media(max-width:749px){

  /* A1. Kolom isian wajib 16px, kalau tidak Safari iOS zoom sendiri.
     Semuanya sekarang 14px (inp-fname, inp-lname, inp-email, sel-country,
     inp-role, cv-text, jd-text). Di bawah 16px, Safari memperbesar layar
     begitu kolomnya disentuh DAN TIDAK MENGEMBALIKANNYA sesudah selesai.
     Orangnya lalu mengisi sisa form sambil layarnya melar.

     16px angka mati dari WebKit, bukan selera. 15.9px pun tetap kena.
     Padding diturunkan 11px->10px supaya tinggi kotaknya tidak ikut
     tumbuh. */
  .form-input,#cv-text,#jd-text,#inp-role,#sel-country{font-size:16px;padding-top:10px;padding-bottom:10px}
  /* select.form-input punya padding-right sendiri untuk panah dropdown-nya.
     Ditulis ulang karena shorthand di atas cuma menyentuh atas-bawah, tapi
     kalau suatu saat diganti shorthand penuh, panahnya akan menimpa teks. */
  select.form-input{padding-right:36px}

  /* A3. Di 320px baris tombol ini keluar layar dan menyeret seluruh
     halaman jadi bisa digeser ke samping (scrollWidth 337 dari viewport
     327). Sebabnya berlapis: .gkv3-aksi-baris `flex-wrap:nowrap`, kedua
     tombolnya `white-space:nowrap`, jadi lebar min-content-nya 322px;
     dan sebagai flex item dia `min-width:auto`, jadi dia tidak boleh
     menyusut di bawah isinya. Ruang yang ada cuma 290px.

     `min-width:0` itu bagian yang gampang kelupaan. Tanpa dia, `wrap`
     saja tidak cukup: barisnya memang membungkus di dalam, tapi kotaknya
     sendiri tetap menolak mengecil. */
  .gkv3-aksi-baris{flex-wrap:wrap;min-width:0}
  .gkv3-aksi-baris .btn{flex:1 1 100%}

  /* A4. Area sentuh minimal 44px (patokan Apple dan Google sama).
     Tinggi terukur sebelum perbaikan ada di komentar tiap baris.

     Yang dinaikkan cuma tingginya lewat padding vertikal. Font, warna,
     dan lebar dibiarkan, supaya susunan visualnya tidak bergeser. */

  /* 27px. Dua tombol paling sempit di seluruh app.

     Ini satu-satunya yang TIDAK dinaikkan sampai 44px secara visual.
     Dia pil segmented kecil yang duduk di ujung kanan judul "Breakdown";
     dibikin setinggi 44px, dia jadi lebih berat daripada judul yang
     ditemaninya. Jadi tingginya berhenti di 36px dan sisanya diambil
     lewat ::after transparan yang melebar 5px ke ATAS dan BAWAH saja,
     sehingga area sentuh sungguhannya 46px sementara yang terlihat tetap
     36px.

     🔴 Melebar ke KIRI-KANAN juga (`inset:-5px`) justru bikin masalah
     baru: jarak "Bar" ke "Kartu" 0px, jadi kedua ::after saling tumpang
     tindih 10px dan yang digambar belakangan menang. Akibatnya 5px ujung
     kanan tombol "Bar" diam-diam mengaktifkan "Kartu". Area sentuh cuma
     boleh melebar ke arah yang tidak ada tetangganya.

     `position:relative` pada tombolnya wajib, kalau tidak ::after akan
     mengukur diri terhadap leluhur ber-position terdekat dan melebar
     menutupi separuh kartu. */
  .gkv3-tukar{padding:4px}
  .gkv3-tukar button{min-height:36px;padding-left:14px;padding-right:14px;position:relative}
  .gkv3-tukar button::after{content:'';position:absolute;inset:-5px 0;border-radius:inherit}

  /* 37px */
  .proy-ulang{min-height:44px;padding-top:11px;padding-bottom:11px}

  /* 27px. Yang paling parah di layar tulis ulang, dan dia tombol
     berbayar (jatah "Versi lain" cuma 3). Salah pencet di sini mahal
     buat orangnya. */
  .cvr-regen-btn{min-height:44px;padding-top:0;padding-bottom:0}

  /* 39px */
  .cvr-st-btn,.cvr-st-btn2{min-height:44px}

  /* 36px, dan .is-utama malah cuma 20px karena isinya ikon tanpa teks. */
  .cvrprev-btn{min-height:44px}
}

/* ============================================================
   MOBILE KELOMPOK B (2026-08-14)
   Lanjutan kelompok A. Yang ini menyentuh RASA, bukan cuma kerusakan,
   jadi angkanya dipilih supaya panjang halaman tidak ikut tumbuh.

   🔴 KOREKSI atas laporan audit tanggal yang sama. Laporan itu menulis
   "teks temuan cuma 11px". SALAH. `.detail-finding`, yaitu teks temuan
   yang sebenarnya, sudah 13px/1.6 dan tidak perlu disentuh. Angka 11px
   itu datang dari selektor ukur `.detail-body p`, yang ternyata mengenai
   `p.ats-mock-hint`, keterangan kecil di bawah ilustrasi ATS. Yang benar
   benar 11px justru teks lain: catatan per dimensi dan isi scan 6 detik.
   ============================================================ */

@media(max-width:749px){

  /* B1. Lantai ukuran untuk teks yang DIBACA, bukan untuk label.

     Pembedaannya penting dan sengaja. Di layar hasil ada 19 kelas di
     bawah 13px, tapi sebagian besar memang pantas kecil: `/100`, nomor
     urut di lingkaran, chevron, eyebrow huruf besar, badge "Aman". Itu
     penanda, dilirik bukan dibaca, dan menaikkannya cuma bikin ramai.

     Yang dinaikkan hanya yang berbentuk KALIMAT:
       .sub-card-note   11px   catatan per dimensi, 5 kartu
       .scan-row-val    12px   isi scan 6 detik, 5 baris
       .ns-card-desc    11.5px deskripsi kartu langkah berikutnya
       .proy-kaki       11.5px keterangan proyeksi skor
       .norma-kaki      12px   keterangan ceklis norma negara
       .rewrite-before  12px   contoh bullet asli dari CV orangnya

     Naik ke 13px, sama dengan `.detail-finding` yang sudah ada, supaya
     seluruh teks bacaan di halaman ini akhirnya satu ukuran. */
  .sub-card-note,.scan-row-val,.ns-card-desc,.proy-kaki,.norma-kaki,.rewrite-before{
    font-size:13px;line-height:1.6
  }

  /* 9.5px, terkecil di seluruh app. Keterangan "Berantakan" dan "Rapi" di
     bawah ilustrasi ATS. Kecil boleh, tapi 9.5px sudah di bawah ambang
     baca nyaman siapa pun. */
  .ats-mock-cap span{font-size:11px}

  /* B2. Panjang halaman dijaga, bukan dipendekkan.

     ⚠ Laporan audit menjanjikan perapatan 35%. Itu TIDAK dikerjakan, dan
     memang tidak bisa digabung dengan B1: teks yang membesar menambah
     tinggi, jadi memangkas 35% sekaligus membesarkan teks cuma mungkin
     kalau ada elemen yang DIBUANG. Membuang elemen mengubah konsep, dan
     konsepnya diminta tetap.

     Jadi yang dikerjakan cuma memangkas padding dan jarak, secukupnya
     untuk menutup pertambahan dari B1.

     Hasil terukur di 375px, sesudah B1 + B2 + B3 dijalankan bersama:
       layar hasil       6169px -> 6293px  (+2,0%)
       layar tulis ulang 7975px -> 8138px  (+2,0%)
       .sub-card          147px ->  144px
       .scan-row          103px ->  122px  (naik, isinya 12px -> 13px)
     Jadi halamannya TIDAK jadi lebih pendek, dia tumbuh 2% sambil
     seluruh teks bacaannya naik ke 13px. Itu tukarannya, dan angka di
     atas ada di sini supaya sesi berikutnya tidak mengira B2 gagal.

     Penebusnya bukan di angka tinggi halaman, tapi di B3: 101px yang
     tadinya lengket permanen sekarang ikut menggulung pergi, jadi ruang
     baca yang benar-benar dipakai justru bertambah.

     Kalau suatu saat halaman ini memang harus lebih pendek, keputusannya
     ada di dua tempat, dan dua-duanya keputusan produk bukan CSS:
     tautan "Lihat analisis →" di tiap .sub-card (sebenarnya mubazir,
     seluruh kartunya sudah bisa diklik), dan 5 baris scan yang bisa
     dilipat jadi ringkasan. */
  .sub-card{padding:13px 15px}
  .sub-card-top{margin-bottom:8px}
  .sub-card-note{margin-top:6px}
  .sub-card-link{margin-top:5px}
  .scan-row{padding:8px 0;gap:9px}

  /* Dua padding ini dipangkas bukan demi tinggi, tapi demi LEBAR. Di layar
     375px, .score-hero memakan 26px kiri dan 26px kanan, dan .detail-body
     18px dua sisi, di atas 15px milik #screen-results. Jadi teks temuan
     cuma dapat 307px dari 375px: 18% layar habis jadi ruang kosong tepi.

     Melebarkan barisnya mengurangi jumlah baris, dan itu menutup sebagian
     pertambahan tinggi dari B1 tanpa mengecilkan satu huruf pun.

     🔴 Baris hero ini butuh DUA hal yang dua-duanya gampang kelupaan,
     dan dua-duanya gagal diam-diam. Ditulis lengkap karena aturan ini
     sudah dua kali dipasang dengan yakin lalu terukur tidak berefek.

     Pertama, selektornya harus `.gkv2-rail .score-hero`, bukan
     `.score-hero` polos: lawannya berkekhususan 0,2,0 sedangkan yang
     polos cuma 0,1,0, dan media query TIDAK menambah kekhususan, jadi
     posisi paling bawah di berkas pun tidak menolong.

     Kedua, `!important` wajib, karena lawannya
     `.gkv2-rail .score-hero{padding:28px 26px !important}`. Sesudah
     kekhususan disamakan pun dia masih menang, sebab !important menang
     atas deklarasi biasa apa pun urutannya. Ini bukan gaya bebas: lapisan
     gkv2 di berkas ini memang memakai !important sebagai cara menimpa
     (lihat .btn-ghost dan .btn-share tepat di sebelahnya), jadi menimpa
     balik tanpa !important tidak mungkin.

     Cara memeriksanya, karena mata tidak bisa dipakai di mesin ini:
     baca `getComputedStyle(el).padding` sesudah muat, JANGAN percaya
     bahwa aturannya ada di berkas. Aturan yang kalah tetap terlihat
     rapi di CSSOM dan tetap muncul di hasil grep. */
  .gkv2-rail .score-hero{padding:22px 18px!important}
  .detail-body{padding:14px}

  /* B3. Subhead rewrite berhenti lengket.

     Header sudah sticky setinggi 59px di atas, lalu #cvr-subhead sticky
     lagi setinggi 101px persis di bawahnya. Total 160px dari 812px, dan
     itu permanen. Di HP 667px jadi 24% layar yang tidak pernah bisa
     dipakai membaca.

     Blok @media(max-width:899px) yang sudah ada di berkas ini (cari
     "subhead sekarang setinggi 164px") sudah menurunkannya dari 164px ke
     101px dengan memotong isinya. Itu arah yang benar tapi berhenti di
     tengah: 101px yang lengket masih lebih mahal daripada 101px yang
     ikut menggulung pergi.

     🔴 `position:static`, dan `top`/`z-index` DIKEMBALIKAN ke auto.
     Membiarkan `top:72px` menggantung di elemen static memang tidak
     berefek sekarang, tapi dia jebakan buat sesi berikutnya yang
     menyalakan sticky lagi lalu bingung kenapa posisinya meleset 72px.

     Aturan aslinya ada di dua tempat (baris ~1025 dan ~1895), dua-duanya
     min-width-nya lebih longgar dari 749px, jadi keduanya kalah di sini
     karena blok ini paling bawah. Desktop tidak tersentuh. */
  .cvr-subhead{position:static;top:auto;z-index:auto}
}

/* ============================================================
   LOMPAT LANGSUNG KE HASIL (2026-08-14)
   Pasangan dari skrip penanda di <head> cv-audit-repo1.html, cari
   "data-gk-lompat" di sana.

   Waktu halaman dibuka lewat ?rewrite=<id> atau ?audit=<id> dari halaman
   riwayat portal, orangnya tidak sedang mengaudit apa pun. Dia mengklik
   satu hasil yang sudah jadi. Menampilkan form unggah CV lebih dulu bukan
   cuma jelek, dia menyesatkan: layar itu mengundang mengunggah berkas baru.

   `display:none` pada gate SEBELUM cat pertama, jadi tidak ada kedip sama
   sekali. Skrip yang menghidupkan layar tujuannya ada di kode-05.js.
   ============================================================ */
html[data-gk-lompat] #screen-gate{display:none!important}

/* Kabar singkat selama datanya diambil. Satu permintaan jaringan saja, jadi
   ini biasanya cuma sekejap, tapi layar kosong tanpa penjelasan terasa lebih
   lama daripada layar yang bilang sedang apa.

   ⚠ T33 (audit 2026-09-02): catatan lama di sini menulis "sengaja BUKAN
   #screen-loading, karena bar kemajuan dan teks bertahapnya menjanjikan
   pekerjaan yang tidak sedang terjadi". Keberatan itu benar dan tetap
   dipegang; yang salah kesimpulannya. Tanpa layar mana pun yang aktif,
   <main> mengempis sampai kosong dan footer hitam naik ke bawah header:
   selama hasilnya diambil dari server, yang dilihat orang adalah FOOTER, dan
   di 390px kabar kecil ini tidak terlihat sama sekali karena dia ditulis
   sesudah footer.

   Sekarang kartu #screen-loading dipakai, TAPI dalam mode .is-lompat yang
   membuang bar kemajuan, keterangan persennya, dan lima langkah audit. Yang
   tersisa cuma kartu berisi judul dan satu baris. Jadi keberatan aslinya
   tetap dihormati: tidak ada satu pun bagian yang menjanjikan proses yang
   tidak sedang berjalan. */
html[data-gk-lompat]:not(.gk-lompat-selesai) #screen-loading{display:block}
#screen-loading.is-lompat .gkv3-bar,
#screen-loading.is-lompat .gkv3-bar-ket,
#screen-loading.is-lompat .loading-steps{display:none}
.gk-lompat-kabar{
  display:none;margin:48px auto 0;text-align:center;
  font-size:14px;color:var(--c55)
}
/* Kabar teks lama sekarang CADANGAN, dan yang memutuskan JS: gkLompatKabar()
   cuma membuat elemen ini kalau kartu #screen-loading tidak ada di DOM.
   Selama kartunya ada, judul kartu yang membawa kabarnya, jadi kalimat yang
   sama tidak pernah tampil dua kali. */
html[data-gk-lompat] .gk-lompat-kabar{display:block}
html[data-gk-lompat].gk-lompat-selesai .gk-lompat-kabar{display:none}

/* ============================================================
   RAPIKAN LAYAR TULIS ULANG DI HP (2026-08-14)
   Dilaporkan Rivaldy: "peletakan teks dan jarak spasinya tidak rapih".
   Diukur di 375px dengan hasil rewrite ASLI, bukan data contoh.
   ============================================================ */

@media(max-width:749px){

  /* 🔴 INI temuan utamanya, dan bukan soal selera.

     Jarak vertikal di dalam .cvr-diff terukur begini SEBELUM perbaikan:

       "Versi lama"  -> kotak lama   :  7px
       kotak lama    -> "Versi baru" :  0px   <-- menempel
       "Versi baru"  -> kotak baru   : 29px   <-- jauh

     Artinya label "Versi baru" secara visual jadi milik KOTAK DI ATASNYA,
     yaitu versi lama. Mata membaca kedekatan sebelum membaca teks, jadi
     susunan ini menempelkan tiap label ke blok yang salah. Ini yang bikin
     halamannya terasa berantakan padahal tidak ada satu pun elemen yang
     meleset atau menabrak.

     Sebabnya `.cvr-after{margin-top:22px}`, yang ada untuk memberi ruang
     panah ↓ (pseudo-element di top:-19px). Waktu label disisipkan di
     antaranya, ruang panah itu berubah fungsi jadi pemisah antara label
     dan kotaknya sendiri.

     Perbaikannya memindahkan ruang itu ke ATAS label, bukan menghapusnya:
     jarak antar blok jadi milik .cvr-before, label menempel 7px ke kotaknya
     seperti pasangannya di atas, dan panahnya digeser ikut naik supaya
     tetap mendarat di ruang kosong antar blok, bukan di atas tulisan. */
  .cvr-diff .cvr-before{margin-bottom:26px}
  .cvr-diff .cvr-after{margin-top:0}
  .cvr-diff .cvr-after::before{top:-40px}

  /* Teks yang berbentuk kalimat, disamakan dengan lantai 13px yang sudah
     dipakai layar hasil (blok "MOBILE KELOMPOK B" di atas). Layar tulis
     ulang tidak ikut kena waktu itu karena yang diaudit cuma layar hasil.

     `.cvr-why` yang paling terasa: dia penjelasan KENAPA satu bullet
     diubah, jadi dia justru bagian yang dibaca paling teliti, dan dia
     yang paling kecil di seluruh layar ini.

     ⚠ `.cvr-diff .cvr-why`, bukan `.cvr-why` polos. Ada
     `@media(max-width:899px){.cvr-diff .cvr-why{font-size:11.5px}}` dengan
     kekhususan 0,2,0. Versi polosnya (0,1,0) sempat dipasang dan terukur
     tetap 11,5px, walau aturannya duduk paling bawah di berkas. Ini
     kejadian KETIGA dari pola yang sama hari ini; kalau aturan baru tidak
     berefek di berkas ini, curigai kekhususan lebih dulu, bukan urutan. */
  .cvr-diff .cvr-why{font-size:13px;line-height:1.6}
  .cvr-bukti-nota,.cvr-sub-title{font-size:13px;line-height:1.6}
}

/* Baris saldo + harga di atas pemilih tier (2026-08-18).
   Warna gold-700 di atas gold-50: pasangan yang sama dipakai pil saldo di
   header, dan dipilih karena gold-500 di atas gold-100 GAGAL kontras 4,5:1
   waktu diukur. Jangan ditukar tanpa mengukur ulang. */
.gkv3-tier-saldobar{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  margin:0 0 10px;padding:8px 12px;
  border:1px solid rgba(190,150,40,.28);border-radius:10px;
  background:#fdf8e9;
  font-size:12.5px;line-height:1.5;color:#7a5c11;
}
.gkv3-tier-saldobar a{color:#7a5c11;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.gkv3-tier-saldobar a:hover{color:#5c4409}
.gkv3-tier-saldobar .gkv3-tsb-sep{opacity:.45}

/* Kalimat harga di kotak gembok akhir hasil audit gratis (2026-08-18).
   Duduk antara ajakan dan tombol, sengaja lebih redup dari ajakannya: dia
   keterangan harga, bukan bagian dari bujukan. */
.lock-harga{margin:6px 0 12px;font-size:12.5px;line-height:1.5;color:#7a5c11;font-weight:600}

/* ══════════════════════════════════════════════════════════════════════════
   🔴 BLOK DI BAWAH INI WAJIB TETAP DI DASAR BERKAS. JANGAN DIPINDAH KE ATAS.

   Berkas ini dirakit dengan menyambung belasan lapisan menurut urutan
   kemunculannya, dan lapisan yang datang belakangan sengaja menimpa yang
   sebelumnya. Empat aturan latar di bawah menimpa nilai yang ditulis
   lapisan-lapisan itu: .cvr-cta-band.is-ineligible di sekitar baris 1400,
   .gkv2-xsell di ~2130, dan .gkv2-rail .score-hero di ~2280.

   Versi pertama aturan ini ditaruh di dekat blok .gkv2-lanjut-row, di sekitar
   baris 280, dan TIGA DARI EMPATNYA tidak berlaku sama sekali: kekhususannya
   sama persis dengan penimpanya, jadi yang menentukan urutan, dan urutannya
   kalah. Nol error, nol peringatan; latarnya cuma tetap putih seperti
   sebelumnya. Kalau tidak diukur di peramban, itu akan terbaca sebagai
   "sudah dikerjakan".
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LATAR EMPAT BLOK, DIBERI MENURUT PERAN (2026-08-26)
   ══════════════════════════════════════════════════════════════════════════

   Diminta Rivaldy. Sebelum ini tiga dari empat blok berlatar putih dengan
   border tipis, jadi halaman hasil terbaca rata: kartu yang menghalangi,
   kartu yang menawarkan, dan kartu yang mengajak jalan-jalan semuanya tampil
   sama persis, dan mata tidak punya cara memilah mana yang perlu dikerjakan.

   🔴 Warnanya dipilih menurut PERAN, bukan selera, supaya bisa dipakai ulang
   waktu ada blok baru. Tiga peran, tiga keluarga warna yang sudah ada di
   token, nol nilai mentah baru kecuali dua wash yang diturunkan dari token:

     rose   ada yang MENGHALANGI, orangnya harus berbuat sesuatu dulu
     emas   TAWARAN yang keluar Miles atau uang
     teal   LANGKAH LANJUTAN yang gratis dan tidak menuntut apa pun

   ⚠ Jangan menukar-nukar keluarga ini demi variasi. Begitu emas dipakai untuk
   sesuatu yang gratis, seluruh sisa halaman kehilangan artinya, dan yang
   paling dirugikan justru kartu berbayar yang memang perlu dikenali. */

/* 1. "Belum bisa dijalankan" -- rose, karena dia penghalang.
      Wash-nya diturunkan dari --red-300 yang sudah jadi warna garisnya, cukup
      terang supaya teks --ink-900 tetap nyaman dibaca di atasnya. */
.cvr-cta-band.is-ineligible{background:#FDF7F6}

/* 2. 99 CV -- emas, karena dia tawaran berbayar.
      ⚠ Catatan lama di sini menyebut dia "sekeluarga dengan band rewrite
      keadaan .is-locked yang memakai --gold-100". Itu TIDAK berlaku lagi
      sejak 31 Agustus 2026: band terkunci dikembalikan ke permukaan gelap
      (lihat aturannya di ~baris 1449). Emas di halaman ini sekarang tinggal
      dipakai kartu 99 CV dan aksen di dalam band gelap, dan itu tidak
      merusak pembagian peran -- yang berubah cuma permukaannya, bukan
      artinya. */
.gkv2-xsell{background:var(--gold-100)}

/* 3. Career Map -- teal, karena dia langkah lanjutan yang gratis.
      Sengaja PALING LEMAH dari ketiganya: dia tidak menghalangi dan tidak
      menagih, jadi dia tidak boleh berteriak lebih keras daripada tetangga
      rose-nya di baris yang sama.
      ⚠ Dibatasi ke .gkv2-lanjut-row supaya kartu next-step lain (Ekstrak
      Keyword) tetap netral. Yang diberi warna cuma yang berpasangan. */
/* ⚠ DIGANTIKAN di dasar berkas ini oleh aturan yang memasang ilustrasi
   globe plus scrim-nya (2026-08-26). Baris warna datar di bawah karena itu
   tidak lagi berlaku; dibiarkan sebagai catatan supaya keluarga warna kartu
   ini tetap terbaca di tempat tiga peran warna lainnya dijelaskan. */
.gkjob-list>#ns-careermap{background:rgba(35,88,82,.05);border-color:var(--teal-glow)}

/* 4. SKOR KESELURUHAN -- tetap --ink-900, dan sengaja tidak dipindah keluarga.
      Dia satu-satunya blok gelap di halaman ini, dan justru itu yang bikin
      angkanya jadi titik berhenti pertama mata. Yang ditambahkan cuma gradien
      hangat yang sangat tipis supaya lingkaran skornya tidak duduk di atas
      bidang datar; arahnya ke bawah, jadi bagian atas kartu (tempat angkanya)
      yang paling terang.
      ⚠ Kalau suatu saat kartu gelap kedua ditambahkan ke halaman ini,
      keistimewaan kartu ini hilang. Pertimbangkan itu dulu sebelum menambah. */
.gkv2-rail .score-hero{background:linear-gradient(170deg,#241F18 0%,var(--ink-900) 62%)!important}

/* ══════════════════════════════════════════════════════════════════════════
   DUA GAMBAR, DIPASANG 2026-08-26. Keduanya di aset/ berkas ini sendiri.

   ⚠ URL-nya RELATIF, dan itu memang aman DI SINI walau aturan Career Map
   mewajibkan path mutlak. Bedanya: url() di dalam CSS diselesaikan terhadap
   letak STYLESHEET (/cv-audit/aset/), bukan terhadap alamat halaman. Yang
   wajib mutlak cuma src <img> dan URL di dalam JS, karena halaman ini
   dilayani di /cv-audit TANPA garis miring di ujung.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. THUMB 99 CV: potongan sampul produk, menggantikan tulisan "99 CV".

   🔴 Yang tampil SENGAJA cuma paruh kanan blok warnanya (kotak teal di atas,
   kotak krem berangka 99 di bawah), bukan seluruh sampul. Dua alasan, dan
   yang kedua bukan soal estetika:

   a. Di 64x82px, judul dan sub-judul sampul jadi bubur. Yang masih terbaca
      cuma motif kotak warnanya, dan itu justru penanda produk yang paling
      dikenali.

   b. 🔴 Sampul itu memasang badge "GRATIS", sementara 99 CV di Shopify hari
      ini Rp 35.000 dan berstatus aktif (diperiksa lewat MCP 2026-08-27,
      variant GK-CV-001). Badge itu ada di bagian PUTIH sampul, di bawah blok
      warna. Memotong di atasnya membuang persoalan itu sepenuhnya, jadi blok
      jualan ini tidak pernah memajang "GRATIS" di produk berbayar.
      ⚠ Kalau suatu saat potongannya diperlebar ke bawah, badge itu ikut
      masuk. Periksa harga produknya dulu sebelum melakukannya.

   Angkanya bukan kira-kira. Sumbernya 1200x1200; region yang diambil
   x 620..980, y 80..540 (360x460, rasio 0,78 = rasio thumb).
   skala = 64/360 = 0,17778 -> background-size 1200*0,17778 = 213px,
   posisi -620*0,17778 = -110px dan -80*0,17778 = -14px, dan tinggi region
   jatuh di 460*0,17778 = 81,8px, yaitu persis 82px tinggi thumb-nya. */
.gkv2-xsell-thumb{
  background:url(produk-99cv.jpg) no-repeat -110px -14px;
  background-size:213px auto;
  /* Teks "99 CV" di dalamnya disembunyikan, bukan dihapus dari JS: dia tetap
     jadi keterangan kalau gambarnya gagal dimuat. Warna transparan, bukan
     display:none, supaya elemennya tetap punya isi buat pembaca layar. */
  color:transparent
}

/* 2. LATAR KARTU CAREER MAP: salinan ilustrasi globe.

   🔴 SALINAN, bukan menunjuk ke public/og/career-map-og.jpg. Aturan di
   CLAUDE.md portal melarang og:image dipakai komponen lain, dan alasannya
   persis kebalikan kasus ini: Career Map dulu meminjam gambar pop-up, jadi
   mengubah pop-up ikut mengubah preview link yang sudah tersebar. Kalau kartu
   ini memakai berkas og yang sama, menyetel latar kartu akan mengubah kartu
   preview Career Map di WhatsApp dan LinkedIn.

   🔴 Scrim-nya WAJIB dan ditulis sebagai lapisan gradien DI DALAM
   background-image, bukan lewat ::before. Ilustrasinya teal gelap, sedangkan
   teks kartu ini --ink-900 yang juga gelap; tanpa scrim, judul dan
   keterangannya praktis hilang.
   Bentuk ini juga dipilih supaya bisa DIPERIKSA: scrim lewat ::before tidak
   terlihat dari computed style maupun dari pembacaan DOM, dan itu sudah dua
   kali membuat pemeriksaan "lolos" padahal kontrasnya gagal.

   🔴 UKURAN DAN LETAKNYA DIBATASI OLEH KONTRAS, BUKAN OLEH SELERA.

   Diukur: teks keterangan kartu ini --ink-500 (#75695C) di atas krem
   --ink-50 (#FBF7F0), dan kontrasnya sudah 4,45:1, yaitu PAS DI BAWAH ambang
   4,5:1 untuk teks ukuran biasa. Artinya kartunya sudah marginal sebelum ada
   gambar apa pun.

   Hitungan komposit di titik tergelap ilustrasi (teal ~#0F3D3A) menembus
   scrim: pada alfa .82 kontrasnya jatuh ke ~3,2:1, pada .90 ke ~3,7:1, dan
   bahkan pada .96 masih ~4,25:1. Jadi TIDAK ADA nilai scrim yang membuat
   gambar di belakang teks ini lolos. Menaikkan alfa cuma memperlambat
   jatuhnya, tidak menghentikannya.

   Karena itu jalan keluarnya bukan scrim yang lebih tebal, tapi MENJAUHKAN
   gambarnya dari teks: ilustrasinya dikecilkan jadi 150px dan dipojokkan ke
   kanan bawah, di ruang yang cuma berisi padding kartu. Ketiadaan tumpang
   tindihnya diperiksa dengan membandingkan kotak batas tiap elemen teks
   terhadap region gambar, bukan dengan melihat.

   ⚠ Kalau suatu saat gambarnya diperbesar atau digeser ke kiri, periksa
   ulang tumpang tindihnya. Yang rusak bukan tampilan, tapi keterbacaan, dan
   itu tidak akan terlihat oleh siapa pun yang matanya sehat dan layarnya
   terang.

   🔴 PERCOBAAN KEDUA JUGA GAGAL, dan cara gagalnya penting dicatat.

   Ilustrasinya sempat dikecilkan jadi 150px dan dipojokkan ke kanan bawah,
   dengan asumsi pojok itu cuma berisi padding. Diukur: kartunya 441x177 dan
   teksnya memenuhi hampir seluruh lebar, jadi keterangan DAN tombolnya tetap
   menimpa region gambar selebar 115px. Di kartu sekecil ini tidak ada pojok
   yang benar-benar kosong.

   Jalan keluarnya memberi gambar KOLOMNYA SENDIRI, bukan menyelipkannya di
   belakang teks: padding-kanan kartu dilebarkan seukuran gambar, jadi teksnya
   berhenti sebelum gambarnya mulai. Ini juga yang bikin ilustrasinya
   kelihatan, bukan jadi noda di balik huruf.

   ⚠ Karena teks tidak lagi menimpanya, scrim-nya boleh jauh lebih tipis
   (.55) dan globe-nya benar-benar terbaca. Scrim tetap ada supaya ilustrasi
   tidak bersaing dengan judul kartunya sendiri.

   ⚠ Cuma berlaku di >=760px. Di bawah itu baris dua kolom sudah menumpuk
   dan kartunya melebar penuh, jadi padding 150px cuma memeras teksnya.

   ══ S8 (31 Agustus 2026): DIGANTI full-bleed, permintaan eksplisit
   Rivaldy. Baca komentar panjang di atas dulu sebelum mengubah blok ini
   lagi -- dia bukan basi, dia alasan kenapa versi SEBELUM S8 bentuknya
   kolom sempit di pojok, bukan gambar penuh.

   🔴 Yang membuat versi itu WAJIB begitu adalah teks kartu ini --ink-900
   (gelap) di atas ilustrasi teal gelap: scrim krem setebal apa pun tidak
   bisa membuat teks gelap kontras di atas gambar gelap (diukur, dan tidak
   ada nilai alfa yang lolos -- baca hitungannya di atas). Bukan gambarnya
   yang dibatasi, tapi KOMBINASI teks-gelap-di-atas-gambar yang gagal.

   Full-bleed di bawah ini LOLOS syarat yang sama karena mengubah separuh
   lain dari kombinasi itu: teksnya sekarang --cream (terang), bukan
   --ink-900, jadi scrim-nya tinggal perlu menggelapkan gambar, bukan
   menerangkannya sambil menjaga gambarnya kelihatan. Resep yang sama
   persis sudah dipakai duluan di kartu lowongan (.gkjob-row, cari S8 di
   berkas ini) dan itu MEMANG ALASAN dua kartu ini sekarang serupa.
   Kalau suatu saat teksnya dikembalikan ke warna gelap, kembalikan juga
   bentuk kolom-sempit di atas -- jangan cuma menghapus scrim-nya. */
.gkjob-list>#ns-careermap{
  position:relative;padding-right:18px;border-color:transparent;
  background:
    linear-gradient(180deg,rgba(20,17,12,.32) 0%,rgba(20,17,12,.88) 100%),
    url(latar-career-map.jpg) center/cover no-repeat
}
.gkjob-list>#ns-careermap .ns-card-icon{background:rgba(251,247,240,.16);color:var(--cream)}
.gkjob-list>#ns-careermap .ns-card-title{color:var(--cream);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.gkjob-list>#ns-careermap .ns-card-desc{color:var(--cream-85);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.gkjob-list>#ns-careermap .ns-card-cta{color:var(--gold-300)}


/* ══════════════════════════════════════════════════════════════════
   BLOK REKOMENDASI LOWONGAN (28 Agustus 2026)

   Markup-nya <section id="gk-jobs"> di cv-audit-repo1.html, isinya
   ditulis gkJobsGambar() di cv-audit-kode-05.js. Rancangan lengkapnya di
   repo getkarier-claude, `[App] CV Audit Tool/Rancangan-Rekomendasi-
   Lowongan-di-Hasil-Audit.md`.

   Sengaja memakai token yang sama dengan .ns-card (--glass, --c20,
   --teal-act) supaya blok ini terbaca sebagai warga halaman yang sama,
   bukan tempelan. Yang beda cuma bentuknya: kartu di .ns-grid itu tiga
   kolom pendek, blok ini satu kolom berisi daftar.
   ══════════════════════════════════════════════════════════════════ */
/* S9 (31 Agustus 2026): max-width:820px + margin auto + padding 14px DICABUT.
   Tiga nilai itu bikin blok ini punya kotak sendiri yang lebih sempit dan
   lebih menjorok daripada kartu di atas dan di bawahnya, jadi tepi kirinya
   tidak pernah segaris. Sekarang dia ikut lebar kolom utama apa adanya,
   sama seperti .gkv2-lanjut-row dan .nextstep-grid. */
.gkjob-sec{margin:0 0 26px}
.gkjob-sec[hidden]{display:none}
.gkjob-head{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink);margin-bottom:12px}

/* S8 (31 Agustus 2026): satu baris, tiga kolom -- dulu satu kolom
   bertumpuk. repeat(3,1fr) dipakai apa adanya walau isinya cuma 1-2
   lowongan (mode 'negara' cuma mengirim satu): sisa kolom kosong lebih
   jujur daripada memaksa satu kartu melebar penuh, dan Rivaldy memang minta
   "1 baris 3 kolom", bukan "sampai 3 kolom". Turun ke satu kolom di layar
   sempit, sama seperti breakpoint kartu next-step di sebelahnya. */
/* S9 (31 Agustus 2026): repeat(3) TETAP dipakai bukan lagi sebagai angka
   mati. Kartu Career Map sekarang ikut duduk di baris ini sebagai kartu
   PALING KANAN, jadi jumlah kolomnya 1 sampai 4 dan ditentukan JS lewat
   class .gkjob-list--N (lihat gkJobsGambar()). Alasannya: kalau lowongannya
   nol, kartu Career Map harus melebar penuh, dan kalau lowongannya tiga,
   barisnya berisi empat kartu.
   ⚠ Empat kolom cuma layak di layar lebar. Di bawah 1100px barisnya turun
   jadi 2x2, bukan mengecil terus, karena judul lowongan di kartu itu 2-3
   baris dan pada lebar ~200px dia pecah jadi menara. */
.gkjob-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gkjob-list--1{grid-template-columns:1fr}
.gkjob-list--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gkjob-list--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.gkjob-list--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .gkjob-list,.gkjob-list--2,.gkjob-list--4{grid-template-columns:1fr}
}

/* Kartu Career Map waktu dia jadi anak baris ini. Tingginya disamakan dengan
   .gkjob-row supaya barisnya rata; margin dinolkan karena jaraknya sudah
   diatur gap grid. */
.gkjob-list>#ns-careermap{margin:0;min-height:168px;display:flex;
  flex-direction:column;justify-content:flex-end}

/* Kartu berlatar gambar cover per negara (lihat GK_JOBS_COVER di JS), dengan
   scrim gelap MENYATU ke background-image itu sendiri (dua lapis
   background-image: gradient di atas, foto di bawah), bukan lewat ::before
   terpisah. Alasannya sama dengan jebakan scrim yang sudah dua kali menggigit
   di halaman ini (lihat kontras-teks-di-atas-foto.md): ::before/::after
   gampang luput dari pemeriksaan DOM atau canvas dan dua kali membuat laporan
   "sudah kontras" padahal belum. Menyatukannya ke SATU properti background
   berarti tidak ada lapisan terpisah yang bisa lupa terpasang.
   min-height menjaga kartu tetap cukup tinggi buat scrim-nya kebaca sebagai
   foto, bukan garis tipis di pinggir kartu.
   ⚠ Kartu TANPA cover (negara belum punya gk-jobcover-<kode>.jpg, lihat
   GK_JOBS_COVER) sengaja TIDAK dapat class ini -- dia jatuh ke
   .gkjob-row--polos di bawah, kartu putih biasa seperti sebelum batch ini.
   Memaksa gradient gelap di atas latar putih kosong cuma bikin kartu
   kelihatan rusak. */
.gkjob-row{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:168px;text-decoration:none;border-radius:12px;padding:14px 16px;
  background-size:cover;background-position:center;
  transition:box-shadow .2s,transform .2s}
.gkjob-row:hover{box-shadow:0 10px 28px rgba(26,23,18,.22);transform:translateY(-2px)}
.gkjob-row:focus-visible{outline:2px solid var(--teal-act);outline-offset:2px}

/* Kartu tanpa gambar cover: kembali ke tampilan lama, tanpa scrim gelap
   (teksnya sudah gelap di atas dasar terang, scrim justru akan
   menenggelamkannya). */
.gkjob-row--polos{background-image:none!important;background-color:var(--glass);
  border:1px solid var(--c20);justify-content:flex-start;min-height:0}
.gkjob-row--polos:hover{border-color:var(--teal-glow)}
.gkjob-row--polos .gkjob-title,
.gkjob-row--polos .gkjob-meta,
.gkjob-row--polos .gkjob-visa{color:var(--ink);text-shadow:none}
.gkjob-row--polos .gkjob-meta{color:var(--c85)}
.gkjob-row--polos .gkjob-visa{color:var(--c55)}

/* Kartu BERGAMBAR: teks selalu krem di atas scrim gelap, apa pun warna
   fotonya. text-shadow tambahan (bukan cuma scrim) karena beberapa foto
   cover punya area terang di tengah (langit, jendela) tempat scrim linier
   sendirian belum tentu cukup gelap. */
.gkjob-title{font-size:14.5px;font-weight:700;color:var(--cream);line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.gkjob-meta{font-size:12.5px;color:var(--cream-85);margin-top:3px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.gkjob-visa{font-size:12px;color:var(--cream-85);margin-top:5px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* Baris "Nyambung di: ...", cuma dirender untuk Audit Lengkap. Warna gold
   (dulu teal) supaya tetap kebaca sebagai keterangan tambahan di atas foto
   gelap -- teal-act terlalu dekat ke warna scrim-nya sendiri. */
.gkjob-why{font-size:12px;color:var(--gold-300);margin-top:6px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.45)}

.gkjob-cta{display:inline-block;font-size:13px;font-weight:600;color:var(--teal-act);text-decoration:none;padding:6px 0}
.gkjob-cta:hover{text-decoration:underline}

/* 🔴 DISEMBUNYIKAN SAAT MENCETAK, dan ini bukan kerapian.
   Laporan PDF dibaca berhari-hari sesudah dicetak, sementara isi blok ini
   berumur pendek: lowongan tingkat 2 saja dibatasi 60 hari, dan yang
   tercetak tidak bisa dikoreksi lagi. Daftar lowongan yang sudah tutup di
   dalam PDF adalah barang basi yang menempel selamanya di dokumen yang
   terlihat resmi. Aturan ini kembaran dari baris yang menyembunyikan
   .nextstep-grid dan .share-overlay. */
@media print{ #gk-jobs{display:none!important} }


/* ══ RITME JARAK KOLOM KANAN (2026-08-30) ══════════════════════════════════
 *
 * Sebelum ini jarak vertikal di kolom kanan tidak pernah ditulis di satu
 * tempat. Tiap blok membawa margin sendiri, lalu margin-collapse memutuskan
 * hasilnya, jadi ritmenya kebetulan benar untuk blok yang sudah lama ada dan
 * kebetulan salah untuk yang baru ditambahkan.
 *
 * Diukur 30 Agustus 2026 di halaman hasil sungguhan, dan tiga tempat memang
 * sudah melenceng:
 *   proy-card -> gk-jobs        6px   (seharusnya 26)
 *   cekcepat-card -> nextstep   14px  (seharusnya 26, beda kelompok)
 *   lanjut-row -> retry-link    20px  (seharusnya 26)
 *
 * Ritmenya cuma dua angka, dan sekarang dieja di sini:
 *   26px  perpindahan antar KELOMPOK
 *   14px  di dalam satu kelompok, yaitu judul bagian ke kartunya
 *
 * Caranya: kolom kanan jadi flex column ber-gap 14px (jarak dalam kelompok),
 * lalu tiap anak yang MEMULAI kelompok baru dapat tambahan 12px sehingga
 * jadi 26px. Yang tidak memulai kelompok cuma kartu yang menempel persis di
 * bawah judul bagiannya, dan itu dikenali lewat `.section-head + *`.
 *
 * 🔴 Margin milik tiap blok dinolkan di sini, dan itu memang tujuannya:
 * jaraknya sekarang urusan wadahnya, bukan urusan tiap blok. Kalau nanti ada
 * blok baru yang jaraknya terasa aneh, JANGAN menambahkan margin di blok itu
 * sendiri. Yang begitulah yang melahirkan keadaan sebelum ini.
 *
 * ⚠ Ditulis di ekor berkas dengan sengaja. Aturan margin milik tiap blok
 * (.norma-card, .nextstep-grid, .proy-card, .section-head) tersebar di atas
 * dengan kekhususan yang sama (0,1,0), jadi yang menang urutan berkas.
 * Memindahkan blok ini ke atas akan membuatnya kalah tanpa satu pun gejala.
 *
 * ⚠ Berlaku di layar lebar MAUPUN sempit. .gkv2-main dibuat oleh JS, bukan
 * oleh media query, jadi dia ada di kedua ukuran dan ritmenya sama.
 */
.gkv2-main{display:flex;flex-direction:column;gap:14px}
.gkv2-main > *{margin-top:12px;margin-bottom:0}
.gkv2-main > :first-child{margin-top:0}
/* S9 (31 Agustus 2026): `:first-child` di atas cocok dengan `#reaudit-banner`,
   BUKAN `.gkv2-verdict` -- tiga banner (`#reaudit-banner`,
   `#gkv3-berkas-lama`, `#gkv3-rewrite-banner`) selalu berdiri LEBIH DULU di
   DOM daripada verdict (lihat urutan `kids` asli di HTML), dan patchResults()
   di cv-audit-kode-08.js tidak pernah memindahkan mereka -- yang dipindah
   cuma elemen yang terdaftar di `urutan`. Ketiganya `display:none` bawaan
   (tidak ambil gap flex), tapi `:first-child` menilai posisi DOM, bukan
   keterlihatan, jadi dia tetap menunjuk banner yang tidak pernah dilihat
   siapa pun, sementara `.gkv2-verdict` -- yang SUNGGUHAN jadi blok visual
   pertama kolom kanan (baris pertama `urutan` di kunciUrutanUtama) -- ikut
   kena margin-top:12px seperti blok biasa. Akibatnya: kartu skor di rail
   (yang tidak kena masalah yang sama) dan kartu Ringkasan Auditor di main
   beda tinggi 12px persis, laporan Rivaldy 31 Agustus.
   Dipaksa di sini dengan kekhususan lebih tinggi (0,2,0 vs 0,1,0 milik
   `.gkv2-main > *`), bukan dengan menata ulang DOM banner-nya -- itu jalur
   yang lebih murah dan tidak menyentuh urutan tampil banner sama sekali. */
.gkv2-main > .gkv2-verdict{margin-top:0}
/* 🔴 Kartu milik sebuah judul disebut satu per satu, BUKAN lewat
   `.section-head + *`. Pemilih tetangga langsung itu sempat dipakai dan
   meleset: di antara judul dan #sub-grid ada #gkv3-bar-view yang sedang
   display:none (dua tampilan bergantian, Bar dan Kartu). Pemilihnya menunjuk
   ke elemen tersembunyi itu, jadi #sub-grid tetap dapat 12px tambahan dan
   jaraknya jadi 26px padahal semestinya 14px. CSS tidak bisa melewati saudara
   yang tersembunyi, jadi daftar eksplisit ini yang benar. Kalau ada kartu baru
   yang menempel ke sebuah judul, tambahkan id-nya di sini. */
.gkv2-main > #gkv3-bar-view,
.gkv2-main > #sub-grid,
.gkv2-main > #detail-stack,
.gkv2-main > #norma-card,
.gkv2-main > #cekcepat-card{margin-top:0}

/* Judul bagian tidak lagi membawa jaraknya sendiri; wadahnya yang mengatur. */
.gkv2-main > .section-head{margin-top:12px;margin-bottom:0}
.gkv2-main > .section-head:first-child{margin-top:0}

/* ══ S4 (2026-08-30) · PENANDA KEGAWATAN & KOTAK "YANG DINILAI HR" ═══════
 *
 * Penanda kegawatan menempel di kepala kartu dimensinya masing-masing, BUKAN
 * dikumpulkan jadi satu kotak ringkasan di atas. Kotak semacam itu pernah ada
 * ("Kerjakan tiga ini dulu") dan sudah dicabut 26 Agustus 2026; alasannya
 * masih berlaku, satu hal cukup diceritakan di satu tempat.
 *
 * Warnanya memakai ambang yang sama dengan warna angka di kartu ringkas (75
 * dan 50). Dua ambang berbeda untuk hal yang sama akan melahirkan angka hijau
 * berlabel "Gawat" di layar yang sama.
 */
/* T14 (audit 2026-09-02): 10,5px -> 11,5px. Badge ini menyebut STATUS satu
   dimensi ("Gawat", "Perlu dibenahi"), jadi dia isi, bukan eyebrow. Eyebrow
   yang memang boleh 10,5px (.score-label, .gkv3-eyebrow, .cvr-cta-eyebrow)
   sengaja tidak ikut dinaikkan. */
.gk-gawat{
  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;
  white-space:nowrap;margin-left:8px;letter-spacing:.01em;flex:none
}
.gk-gawat.is-gawat{background:var(--rose-bg);color:var(--red-700);border:1px solid var(--rose-glow)}
.gk-gawat.is-sedang{background:var(--gd2);color:var(--gold-teks);border:1px solid var(--gd)}
.gk-gawat.is-aman{background:rgba(35,88,82,.10);color:var(--teal-act);border:1px solid rgba(35,88,82,.22)}

/* Kotak "Yang dinilai HR" duduk paling bawah di dalam kartu dimensi, dipisah
   garis tipis. Warnanya sengaja REDUP dan bukan warna peringatan: isinya sama
   untuk semua orang dan tidak pernah berubah, jadi kalau dia mencolok, dalam
   dua minggu matanya akan melewatinya, dan yang ikut terlewat justru temuan
   di atasnya. */
/* L2 (2026-08-30): jadi <details>, terlipat secara bawaan. Waktu terbuka
   terus, kotak ini memakan 27% tinggi badan kartu di layar 1280px dan 434px
   di layar sempit, jadi latar belakang yang isinya sama untuk semua orang
   tampil lebih besar daripada temuan yang khusus tentang CV orangnya. */
.gk-hr-peduli{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--ink-200)
}
.gk-hr-judul{
  display:flex;gap:8px;align-items:center;cursor:pointer;list-style:none;
  font-size:12px;font-weight:600;color:var(--c55)
}
/* Segitiga bawaan dimatikan di dua mesin sekaligus: Safari/iOS masih memakai
   ::-webkit-details-marker, Chrome dan Firefox sudah pindah ke list-style. */
.gk-hr-judul::-webkit-details-marker{display:none}
.gk-hr-judul:hover{color:var(--ink-700)}
.gk-hr-judul::after{
  content:'';margin-left:auto;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s
}
.gk-hr-peduli[open] .gk-hr-judul::after{transform:rotate(-135deg) translate(-1px,-1px)}
.gk-hr-teks{font-size:12.5px;color:var(--c55);line-height:1.55;margin-top:8px;padding-left:22px}

/* ══ S5 (2026-08-30) · PENGHITUNG KEMAJUAN ═══════════════════════════════
 *
 * Menumpang di kepala bagian "Analisis Lengkap", bukan jadi kartu sendiri.
 * Kartu ringkasan semacam itu pernah ada dan dicabut 26 Agustus 2026 karena
 * mengulang barang yang sudah tergelar di bawahnya.
 *
 * Warnanya redup selama masih ada yang belum dikerjakan, dan baru berubah
 * hijau waktu semuanya tuntas. Angka yang mencolok sejak awal cuma jadi
 * pengingat tetap bahwa ada pekerjaan, dan pengingat tetap berhenti dibaca.
 */
.gk-kemajuan{
  margin-left:auto;font-size:12px;color:var(--c55);white-space:nowrap;
  padding:4px 11px;border-radius:20px;background:var(--c10);border:1px solid var(--c20)
}
.gk-kemajuan.is-tuntas{
  color:var(--teal-act);background:rgba(35,88,82,.10);border-color:rgba(35,88,82,.22);font-weight:600
}
@media(max-width:520px){ .gk-kemajuan{font-size:11px;padding:3px 9px} }

/* ══ L1 (2026-08-30) · URUTAN DI LAYAR SEMPIT ════════════════════════════
 *
 * Diukur di layar 375px: skor ada di layar ke-0,1, tombol aksi 0,5, kartu
 * Info audit 0,7, IKLAN 99 CV 1,0, dan vonis auditornya sendiri baru di 1,4.
 * Jadi orang yang baru dikasih angka 58 harus melewati satu iklan produk
 * sebelum diberi tahu kenapa angkanya 58.
 *
 * Di layar lebar ini tidak terasa, karena dua kartu itu duduk di kolom kiri
 * sejajar dengan analisisnya. Begitu kolomnya menumpuk, sejajar berubah jadi
 * mendahului.
 *
 * 🔴 `display:contents` di kolom kiri, BUKAN memindahkan elemennya lewat JS.
 * Dengan contents, anak-anak kolom kiri jadi anak langsung layar hasil, jadi
 * urutannya bisa diatur satu per satu tanpa satu baris pun kode dipindahkan.
 * Memindahkan lewat JS berarti dua susunan DOM yang berbeda menurut lebar
 * layar, dan tiap fungsi yang mencari elemen lewat induknya jadi taruhan.
 *
 * ⚠ Aman karena `.gkv2-rail` sebagai KOTAK cuma punya gaya di dalam
 * @media(min-width:1000px). Semua aturan lain menyebutnya sebagai leluhur
 * (`.gkv2-rail .score-hero`), dan itu tetap bekerja dengan display:contents.
 * Kalau suatu saat kolom kiri diberi latar, batas, atau padding di layar
 * sempit, aturan ini akan membuangnya tanpa satu pun gejala.
 */
@media(max-width:999px){
  .gkv2-rail{display:contents}
  /* Skor, lompat cepat, dan tombol aksi tetap di atas: itu yang dicari orang
     lebih dulu, dan tombol Unduh PDF memang pantas dekat skornya. */
  .gkv2-rail > *{order:1}
  .gkv2-main{order:2}
  /* Keterangan berkas dan tawaran produk turun ke bawah analisis. Dua-duanya
     tidak menjawab pertanyaan yang sedang orangnya bawa waktu membuka halaman
     ini, yaitu "CV saya kenapa". */
  .gkv2-rail > .gkv3-info,
  .gkv2-rail > .gkv2-xsell{order:3}
}

/* ══ L3 (2026-08-30) · LIPATAN "SUDAH SESUAI" ═════════════════════════════
 *
 * Baris hijau di kotak aturan negara dan kotak cek cepat dilipat ke sini.
 * Alasan lengkapnya di komentar gkBarisNorma() di cv-audit-kode-05.js.
 *
 * ⚠ Ditulis di ekor berkas dengan sengaja, sama seperti blok ritme jarak di
 * atasnya: .norma-list punya aturannya sendiri di baris 593 dengan kekhususan
 * yang sama, jadi yang menang urutan berkas. */
.norma-beres{margin-top:14px;border-top:1px solid var(--ink-200);padding-top:12px}
.norma-beres > summary{
  display:flex;gap:8px;align-items:center;cursor:pointer;list-style:none;
  font-size:13px;color:var(--c55)
}
/* Dua mesin, dua cara mematikan segitiga bawaan. Safari/iOS masih di
   ::-webkit-details-marker, Chrome dan Firefox sudah pindah ke list-style. */
.norma-beres > summary::-webkit-details-marker{display:none}
.norma-beres > summary:hover{color:var(--ink-700)}
.norma-beres > summary .gk-ico{flex:none}
.norma-beres > summary::after{
  content:'';margin-left:auto;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s
}
.norma-beres[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.norma-beres > .norma-list{margin-top:13px}
.norma-list-lanjut{margin-top:12px}

/* ══ L5 (2026-08-30) · NAVIGASI HASIL ═════════════════════════════════════
 *
 * Alasan lengkapnya di komentar gkLengkapiQnav() di cv-audit-kode-05.js.
 *
 * 🔴 scroll-margin-top ini MEMPERBAIKI BUG, bukan mempercantik. Tanpa dia
 * tiap tautan navigasi mendarat dengan judul bagiannya tertutup penuh oleh
 * header yang position:sticky. Terukur 30 Agustus di 375px: judul di y=0,
 * header 59px, jadi 59px tertutup — orangnya mendarat di tengah isi tanpa
 * pernah melihat judul yang baru dia klik.
 *
 * Angkanya diturunkan dari --h-header, JANGAN ditulis mati. Header pernah
 * naik dari 72px ke 77px pada 2026-08-05 dan angka mati di berkas ini luput
 * ikut berubah; catatan soal itu masih ada di blok .gkv2-rail di atas. */
#sec-breakdown,#sec-detail,#sec-norma-head,#sec-cekcepat-head{
  scroll-margin-top:calc(var(--h-header) + 58px)
}

/* Bagian yang sedang dibaca. Dipakai .is-aktif, bukan :target, karena :target
   cuma menyala sesudah diklik dan tidak pernah mengikuti guliran tangan. */
.rqn-btn.is-aktif{
  background:var(--teal-act);border-color:var(--teal-act);color:#FBF7F0;font-weight:500
}

/* Di layar sempit navigasinya menempel di bawah header. Ongkosnya 36px dari
   812px, dan yang dibeli bukan cuma tombol lompat: halaman hasil ini 4.400px
   di HP, jadi bilah ini sekaligus menjawab "aku ada di sebelah mana".
   ⚠ Cuma di bawah 1000px. Di layar lebar navigasi ini sudah ikut .gkv2-rail
   yang position:sticky sendiri, dan menempelkannya dua kali akan membuatnya
   lepas dari rail-nya. */
@media(max-width:999px){
  .results-qnav{
    position:sticky;top:var(--h-header);z-index:60;
    /* ⚠ Angka bleed-nya WAJIB sama dengan padding #screen-results, bukan
       ditebak. Versi pertama menulis -20px padahal paddingnya 15px, dan
       selisih 5px itu membuat SELURUH halaman bisa digulir ke samping
       (scrollWidth 380 di layar 375). Guliran mendatar tidak memunculkan
       error apa pun dan cuma terasa sebagai halaman yang "goyang". */
    margin:0 calc(-1 * var(--pad-layar)) 4px;padding:8px var(--pad-layar);
    background:rgba(251,247,240,.94);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--c10);
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none
  }
  .results-qnav::-webkit-scrollbar{display:none}
  /* 42px tinggi sentuh dari blok aksesibilitas di atas terlalu tinggi untuk
     bilah yang menetap di layar; di sini tombolnya melebar, bukan meninggi. */
  .results-qnav .rqn-btn{min-height:32px;padding:5px 13px}
}

/* ══ L7 (2026-08-30) · CATATAN KONTRAS ════════════════════════════════════
 *
 * Seluruh teks di layar hasil diukur terhadap latar EFEKTIFNYA (lapisan
 * semi-transparan ikut ditumpuk dulu, bukan dibaca mentah -- pengukuran
 * pertama tanpa itu melaporkan ~20 kegagalan palsu, termasuk semua teks di
 * dalam .score-hero yang latarnya gradient gelap, bukan background-color).
 *
 * Lima titik yang gagal WCAG AA sudah dibetulkan di tempatnya masing-masing,
 * dan semuanya lewat token, bukan nilai baru:
 *   .gk-gawat.is-sedang   2,92 -> 4,58   (--gold  -> --gold-teks)
 *   .gk-gawat.is-gawat    4,33 -> 5,83   (--rose  -> --red-700)
 *   .gkv3-eyebrow         3,24 -> 5,09   (--gold-500 -> --gold-teks)
 *   .ns-card-cta          3,24 -> 4,42   (--gold-500 -> --gold-teks)
 *   .sub-card-score .out-of 3,24 -> 5,34 (--subtle -> --muted)
 *
 * Dua lencana keparahan di atas dipasang 29 Agustus dan gagal sejak lahir.
 * Itu ironi yang pantas dicatat: lencana yang seluruh gunanya menandai
 * seberapa gawat sesuatu justru jadi teks paling susah dibaca di kartunya.
 *
 * Sisa empat titik yang sempat dicatat "tidak disentuh" DIBERESKAN juga
 * pada 30 Agustus 2026, atas permintaan Rivaldy:
 *
 *   #share-btn (tombol Bagikan Skor)   3,24 -> 5,09
 *   .detail-num.num-ok                 3,24 -> 5,09
 *     Dua-duanya teks PUTIH di atas --gold-500. Yang diganti latarnya, jadi
 *     --gold-teks. Hover tombolnya ikut diganti, dan itu bukan kerapian:
 *     --gold-strong lebih TERANG daripada --gold-teks, jadi membiarkannya
 *     akan menjatuhkan tombolnya balik ke 4,46 tepat waktu jarinya menyentuh.
 *
 *   .gk-kemajuan, tombol Bar/Kartu     4,42 -> 5,07
 *     Meleset 1,8% dari ambang, dan sebabnya bukan tiga tempat yang
 *     kebetulan ketahuan, tapi satu token: --ink-500 di atas panel
 *     --ink-100. Yang digelapkan tokennya (#75695C -> #6B6055, ~125
 *     pemakaian lewat --c55/--muted), bukan tempat-tempatnya. Menambal per
 *     tempat berarti sisanya tetap di bawah ambang sampai ada yang mengukur
 *     lagi, dan tidak ada yang akan mengukur lagi.
 *
 * TIGA TITIK LAGI ketemu waktu tier GRATIS ikut disapu, dan itu pelajaran
 * tersendiri: sapuan pertama cuma menjalankan tier berbayar, jadi seluruh
 * kartu terkunci dan pita CTA-nya tidak pernah tergambar sekali pun.
 * 🔴 Halaman ini punya DUA rupa. Menyapu satu tier lalu menyatakan bersih itu
 * mengukur setengah halaman dan melaporkannya sebagai seluruhnya.
 *
 *   .cvr-cta-eyebrow (terkunci)  3,03 -> 4,76   (--gold-500 -> --gold-teks)
 *   .lock-cta "Isi Miles"        3,24 -> 5,09   (LATAR --gold -> --gold-teks)
 *   .mu-label "Masalah Utama"    4,29 -> 5,76   (warisan --rose -> --red-700)
 *
 *   .mu-label sebelumnya tidak punya warna sendiri sama sekali, dia mewarisi
 *   --rose dari .mu-head. Sekarang ditulis eksplisit; mewarisi warna dari
 *   kartu berlatar tint adalah cara paling gampang kehilangan kontras tanpa
 *   ada satu baris pun yang kelihatan salah.
 *
 * SAPUAN PENUH 30 Agustus 2026 (sore): SELURUH layar, dua tier, dua lebar.
 * Hasil akhir NOL pelanggaran WCAG AA, dengan satu pengecualian yang disengaja
 * dan dicatat di bawah. Yang ikut ketemu di sapuan penuh dan dibetulkan:
 *
 *   .gkv3-chip "Audit Cepat"        4,15 -> 4,69
 *   .ns-card-cta di latar krem      4,42 -> 5,39
 *     Dua-duanya emas di atas latar BUKAN putih. Yang diganti bukan dua
 *     tempat itu tapi nilai --gold-teks-nya (#8F6720 -> #855F1C), karena
 *     sebabnya satu: warnanya dulu dipilih dengan cuma menguji latar putih.
 *
 *   .tab-btn (tab tidak aktif)      4,42 -> 5,07
 *   .gkv3-benefits li.is-off        3,24 -> 4,80
 *     Ini menyingkap masalah yang lebih dalam: --muted dan --subtle ternyata
 *     DIDEFINISIKAN ULANG sebagai nilai lepas di blok :root kedua ("BATCH 19
 *     DS refit"), jadi menggelapkan --ink-500 di blok pertama tidak menyentuh
 *     keduanya sama sekali. 🔴 --muted sekarang var(--ink-500), bukan hex
 *     lepas. Kalau suatu saat ada yang menambah blok :root ketiga, periksa
 *     dulu apakah dia menimpa alias yang sudah ada -- gejalanya nol.
 *
 *   .loading-step yang belum jalan  1,77 -> 6,12
 *     Layar tunggu, dan waktu pertama muncul KELIMA langkahnya masih pending,
 *     artinya satu-satunya isi layar itu tidak terbaca sampai langkah pertama
 *     menyala.
 *
 *   .fs-label langkah belum aktif   1,85 -> 5,64
 *
 * LAYAR REWRITE, disapu terpisah 30 Agustus 2026 sesudah Rivaldy bertanya
 * apakah dia sudah pernah diaudit. Jawabannya BELUM, walaupun sapuan
 * sebelumnya mengulanginya bersama layar lain dan melaporkannya bersih.
 * 🔴 Dia lolos karena KOSONG, bukan karena benar: layar itu cuma terisi
 * sesudah renderRewrite() dipanggil, dan waktu disapu dia mengukur NOL
 * elemen berteks. Sapuan yang mengembalikan nol pelanggaran dari nol
 * elemen terbaca persis sama dengan sapuan yang benar-benar bersih.
 * ⚠ Kalau menyapu ulang nanti, HITUNG DULU berapa elemen yang terukur di
 * tiap layar. Nol elemen artinya layarnya belum dirender, bukan lulus.
 * Tiga titik yang ketemu sesudah layarnya benar-benar diisi:
 *   .cvr-colhead-new "Hasil rewrite"     3,24 -> 5,75
 *   .cvr-colhead-old "CV kamu sekarang"  4,17 -> 5,20
 *   .cvr-bukti-sel.is-nol b ("0 fakta diubah")  3,03 -> 5,38
 *   .cvr-diff-label.is-baru (versi HP)      3,24 -> 5,75
 * Dua yang pertama adalah label kolom yang membedakan CV LAMA dari CV
 * BARU, yaitu satu-satunya hal yang harus tidak boleh salah dibaca di
 * layar itu.
 *
 * #screen-dlprev DAN EMPAT OVERLAY, disapu 30 Agustus 2026 (penutup).
 * Semuanya kena jebakan yang sama: mereka baru punya isi sesudah fungsi
 * pembukanya dipanggil, dan overlay bahkan bertinggi NOL selama tidak ada
 * satu pun .screen yang aktif. Jadi mereka lolos tiga sapuan berturut-turut
 * tanpa pernah diukur.
 *
 * Cara membangunkannya, supaya tidak perlu ditemukan ulang:
 *   pratayang unduh : renderRewrite(mock, skeleton, ...) lalu cvrOpenPreview()
 *                     -- uji KETIGA templatenya, markupnya tidak sama
 *   modal Bagikan   : openShare()
 *   modal terkunci  : openLockModal()  (butuh tier gratis)
 *   modal kata kunci: openNextStep('keywords') -- 'keywords', BUKAN 'keyword';
 *                     kind yang tidak dikenal membuatnya diam, bukan error
 *   🔴 ketiganya butuh sebuah .screen aktif lebih dulu, kalau tidak tinggi
 *      overlay-nya 0 dan sapuannya mengembalikan "bersih" dari nol elemen
 *
 * Dua titik ketemu dan dibetulkan:
 *   .btn-primary "Bagikan"        3,24 -> 5,75   (LATAR --gold -> --gold-teks)
 *   .ns-kw-chip.is-hilang         4,25 -> 5,72   (#C6483A -> --red-700)
 * Yang kedua isinya kata kunci yang BELUM ada di CV, yaitu salah satu isi
 * paling bisa ditindaklanjuti di seluruh alat ini, dan polanya sama persis
 * dengan .mu-label: merah penuh di atas latar merah muda selalu kurang.
 *
 * Pratayang unduh sendiri bersih di ketiga template, dua lebar layar.
 *
 * 🔴 SATU PENGECUALIAN YANG DISENGAJA: .fs-dot langkah yang belum dijalani
 * tetap 1,64 dan itu keputusan, bukan kelalaian. Titik memikul STATUS, label
 * memikul INFORMASI, dan labelnya sudah dibetulkan. Nomor di dalam titik itu
 * mengulang apa yang sudah dikatakan urutan posisinya, jadi tidak ada
 * informasi yang hilang. Menggelapkannya juga akan membuat langkah yang belum
 * dijalani terlihat sama dengan yang sedang dijalani.
 *
 * ⚠ --gold-500 TIDAK dilarang. Dia tetap benar untuk angka skor 26px+ (teks
 * besar, ambangnya 3, dan 3,24 lolos) dan untuk hiasan. Yang diganti cuma
 * teks kecil. Kalau suatu saat ada yang menyapu semua --gold-500 jadi
 * --gold-teks "biar seragam", angka skor besar ikut menggelap tanpa alasan.
 */


/* ============================================================
   T21 (audit 2026-09-02) - tombol "Cara pakai" mengambang
   Dibuat di cv-audit-repo1.html (cari gk-cara-pakai-fab), dulu bergaya
   lewat style inline. Dipindah ke sini supaya media query bisa
   memindahkannya; style inline tidak bisa dikalahkan selektor apa pun.

   Di bawah 480px dia turun ke pojok kanan bawah. Di lebar itu stepper tiga
   langkah butuh seluruh baris, dan tombol di kanan atas menutupi langkah
   terakhirnya ("3 Hasil" terbaca "3 H"). Label langkahnya sengaja TIDAK
   dipendekkan: memangkas kata supaya muat berarti menghapus keterangan yang
   memang gunanya memberi tahu masih ada berapa lagi.
   ============================================================ */
.gk-fab-carapakai{
  position:fixed;top:76px;right:26px;z-index:60;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--gold-200,#e0c489);color:var(--teal-act);
  box-shadow:0 2px 8px rgba(26,23,18,.10);cursor:pointer;padding:0;
  transition:background .2s,box-shadow .2s
}
@media(max-width:479px){
  /* 44px, bukan 38px: di layar sentuh dia berdiri sendiri di pojok, dan
     ukuran sasaran minimum yang dipakai berkas ini memang 44. */
  .gk-fab-carapakai{top:auto;bottom:16px;right:16px;width:44px;height:44px}
}


/* ============================================================
   BATCH E (audit UI/UX 2026-09-02) - kerapian sudut & padding layar hasil

   Yang diukur dari DOM sebelum blok ini ditulis: layar hasil memakai LIMA
   nilai radius (14, 12, 16, 18, 10) dan LIMA nilai padding (14/14, 16/14,
   18/18, 16/18, 22/20) untuk kartu-kartu yang sebenarnya setara. Tidak ada
   logika induk-anak di baliknya; kartu proyeksi, norma, dan lowongan sama
   derajatnya tapi sudutnya berbeda-beda.

   Aturannya sekarang dua saja, plus satu pengecualian:
     16px  kartu setara (skor dimensi, akordeon, norma, proyeksi, cek cepat,
           lowongan, next-step, info audit)
     12px  kotak DI DALAM kartu (catatan norma, kotak tip)
     18px  hero skor, satu-satunya yang memang sengaja lebih besar

   Padding kartu setara 18px 18px; kotak di dalam kartu 14px 16px.
   .score-hero dan band CTA rewrite tidak disentuh: dua-duanya memang punya
   penekanan sendiri, dan band itu milik alur rewrite, bukan kartu hasil.

   🔴 Blok ini sengaja duduk PALING BAWAH di berkas. Nilai-nilai lama tersebar
   di beberapa lapisan yang saling menimpa (mis. .detail-card punya
   `border-radius:13px !important` di satu lapisan dan `14px !important` di
   lapisan lain), jadi menyunting satu per satu di tempatnya berarti menebak
   siapa yang menang. Yang di sini menang karena datang terakhir dengan
   kekhususan yang sama atau lebih tinggi. Kalau nanti ada lapisan baru
   ditambahkan sesudah blok ini, dia akan menimpa yang di sini.
   ============================================================ */
.sub-card,.norma-card,.proy-card,.ns-card,.gkjob-row,.gkv3-info{border-radius:16px}
.detail-card{border-radius:16px!important}
.sub-card,.norma-card,.proy-card,.ns-card,.gkjob-row,.gkv3-info{padding:18px 18px}
/* ⚠ .sub-card.is-ringkas ditulis TERPISAH, dan itu perlu: kekhususannya
   0,2,0 lawan 0,1,0 di baris atas, jadi lima kartu skor dimensi tetap
   14px kalau cuma mengandalkan selektor gabungan. Diukur: baris di atas
   sendirian menyisakan lima elemen di 14/14. */
.sub-card.is-ringkas{padding:18px 18px}
/* Akordeon dimensi tidak diberi padding di kotak luarnya: isinya .detail-head
   dan .detail-body yang masing-masing sudah punya padding sendiri, dan
   menambahkannya di sini menggandakan jarak kiri teksnya. */
.detail-card{padding:0}
/* Kotak di dalam kartu. */
.norma-catatan{border-radius:12px;padding:14px 16px}
.tip-cell{border-radius:12px}

/* T13 (audit 2026-09-02) - keterangan di bawah rincian skor. Ukurannya 12,5px,
   sama dengan keterangan kaki kartu lain sesudah T14; ini keterangan, bukan
   isi utama, tapi juga bukan eyebrow. */
.sub-grid-ket{font-size:12.5px;line-height:1.6;color:var(--ink-500);margin:10px 0 0}

/* T30 (audit 2026-09-02) - penanda bullet yang perubahannya cuma satu-dua
   kata. Sengaja pil abu kecil, bukan warna peringatan: ini keterangan jujur
   tentang seberapa besar perubahannya, bukan kabar buruk. Duduk sebaris di
   depan alasan, jadi mata membacanya lebih dulu lalu langsung ke alasannya. */
.cvr-minor{
  display:inline-block;margin-right:7px;padding:1px 7px;border-radius:999px;
  background:var(--ink-100);color:var(--ink-500);
  font-size:11px;font-weight:600;font-style:normal;vertical-align:1px;white-space:nowrap
}

/* T28 (audit 2026-09-02) - nota "ringkasan tidak ditulis ulang". Nada netral,
   bukan merah: ini keterangan tentang apa yang tidak terjadi, dan yang tampil
   di atasnya tetap ringkasan asli orangnya yang utuh. */
.cvr-sum-nota{
  display:flex;align-items:flex-start;gap:7px;margin-top:10px;
  font-size:12.5px;line-height:1.6;color:var(--ink-500)
}
.cvr-sum-nota .gk-ico{margin-top:2px;flex:none}

/* T31 (audit 2026-09-02) - peringatan CV dua kolom, satu-satunya di layar
   rewrite dan selalu di paling atas. Warnanya emas peringatan, bukan merah:
   ini bukan kegagalan rewrite, hasilnya tetap dipakai, cuma urutannya yang
   perlu diperiksa orangnya. */
.cvr-kolom-warn{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;
  padding:14px 16px;border-radius:16px;
  background:var(--gold-100);border:1px solid var(--gd)
}
.cvr-kolom-warn b{display:block;font-size:13.5px;color:var(--ink-900);margin-bottom:4px}
.cvr-kolom-warn p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-700)}
.cvr-kolom-warn .gk-ico{margin-top:1px;flex:none;color:var(--gold-teks)}