/* Antarmuka Pembuat CV HeroHuman. Dokumen CV-nya sendiri ada di cv.css.
   Token warna disalin apa adanya dari tailwind.config herohuman.id supaya
   halaman ini terasa satu keluarga dengan situs induknya. */

:root{
  --m50:#fdf2f7; --m100:#fce7f1; --m200:#fbcfe4; --m300:#f9a8cc;
  --m400:#f472a8; --m500:#bd2f6e; --m600:#a82862; --m700:#8e2153;
  --k50:#fafaf9; --k100:#efecea; --k200:#e5e0dc; --k400:#b8ada4;
  --tinta:#1a1a2e; --tinta-2:#2d2d44; --redup:#6e6879;
  --bahaya:#a83232; --aman:#2f7a5b;
  --sans:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --r:10px; --r-lg:16px;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{height:100%}
/* iPhone membesarkan huruf sendiri di blok yang ia anggap lebar - termasuk
   kertas CV selebar A4 di dalam pratinjau yang diperkecil. Dimatikan sekali. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--k50);color:var(--tinta);
  font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
svg{display:block}
/* Peramban memasang [hidden]{display:none} pada lapis paling lemah, jadi
   kelas apa pun yang menyetel display mengalahkannya dan elemen yang sudah
   di-hidden tetap terlihat. Ditutup sekali di sini, bukan per elemen. */
[hidden]{display:none!important}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

/* ======================= tombol ======================= */
.b{
  border:1px solid var(--k200);background:#fff;color:var(--tinta-2);
  border-radius:999px;padding:8px 15px;font-size:13px;font-weight:500;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:border-color .15s,color .15s,background .15s;
}
.b:hover{border-color:var(--m300);color:var(--m600);background:var(--m50)}
.b:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.b:disabled{opacity:.4;cursor:not-allowed}
.b:disabled:hover{border-color:var(--k200);color:var(--tinta-2);background:#fff}
.b-utama{background:var(--m500);border-color:var(--m500);color:#fff;font-weight:600;padding:9px 20px}
.b-utama:hover{background:var(--m700);border-color:var(--m700);color:#fff}
.b-besar{padding:12px 26px;font-size:14.5px}
.b-bahaya:hover{border-color:var(--bahaya);color:var(--bahaya);background:#fff}
.b-sunyi{background:transparent}

.pil-label{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--m600);background:var(--m50);
  border-radius:999px;padding:5px 12px;margin:0 0 14px;
}
.dek{color:var(--redup);font-size:13.5px;line-height:1.65;max-width:56ch}
.kabar{
  background:var(--m50);border:1px solid var(--m100);color:var(--m700);
  border-radius:var(--r);padding:10px 14px;font-size:13px;margin:0 0 16px;
}
.kabar-galat{background:#fdf3f3;border-color:#f0d4d4;color:var(--bahaya)}

/* ======================= bilah atas ======================= */
.bar{
  display:flex;align-items:center;gap:18px;
  padding:10px 20px;background:#fff;border-bottom:1px solid var(--k200);
  position:sticky;top:0;z-index:30;
}
.merek{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.merek-logo{width:34px;height:34px;border-radius:50%;flex:none}
.merek-teks{display:flex;flex-direction:column;line-height:1.25}
.merek-teks b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.merek-teks span{font-size:11px;font-weight:500;color:var(--m500)}
.bar-kanan{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;max-width:100%;flex-wrap:wrap}
.akun{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--k200)}
.akun-foto{width:28px;height:28px;border-radius:50%;flex:none}
.akun-nama{font-size:12.5px;font-weight:500;color:var(--tinta-2);max-width:16ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akun form{display:inline}

.status-simpan{font-size:12px;color:var(--aman);font-weight:500;white-space:nowrap}
.status-simpan.sibuk{color:var(--redup)}
.status-simpan.galat{color:var(--bahaya)}

/* ======================= halaman masuk ======================= */
.laman-masuk{background:#fff}

/* Pita pembuka: warna merek dipakai sebagai LATAR, bukan sekadar aksen, supaya
   halaman ini terasa milik HeroHuman sejak layar pertama. */
/* Bilah untuk tamu. Pintu masuknya SATU dan selalu di tempat yang sama:
   kanan atas, menempel saat digulir. Tombol besar di tengah pita membuat
   halaman terbaca seperti formulir, dan menaruh tombol kedua di kaki halaman
   cuma memecah perhatian. */
.bar-tamu{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 24px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(229,224,220,.7);
}
.bar-tamu .merek-logo{width:32px;height:32px}
.bar-tamu-aksi{display:flex;align-items:center;gap:14px}
.tautan-halus{
  font-size:13px;font-weight:500;color:var(--redup);text-decoration:none;
  padding:6px 4px;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s;
}
.tautan-halus:hover{color:var(--m600);border-bottom-color:var(--m300)}
.tautan-halus:focus-visible{outline:2px solid var(--m500);outline-offset:3px}
.b-masuk{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--tinta);color:#fff;border-radius:999px;
  padding:9px 18px 9px 12px;font-size:13.5px;font-weight:600;text-decoration:none;
  transition:background .15s,transform .12s;
}
.b-masuk svg{background:#fff;border-radius:50%;padding:3px;width:22px;height:22px;flex:none}
.b-masuk:hover{background:var(--m700);transform:translateY(-1px)}
.b-masuk:focus-visible{outline:2px solid var(--m500);outline-offset:3px}
.b-masuk.mati{background:var(--k400);cursor:not-allowed}
.b-masuk.mati:hover{background:var(--k400);transform:none}
@media (max-width:620px){
  .bar-tamu{padding:10px 14px;gap:10px}
  .tautan-halus{display:none}
  .merek-teks span{display:none}
}

/* Pita pembuka sengaja ASIMETRIS: kalimatnya di kiri, buktinya di kanan.
   Tata letak terpusat membuat halaman ini terbaca seperti formulir. */
.hero{
  position:relative;overflow:hidden;
  padding:54px 24px 60px;
  background:
    radial-gradient(46% 62% at 78% 8%, var(--m100) 0%, rgba(252,231,241,0) 70%),
    linear-gradient(168deg, var(--m50) 0%, var(--k50) 46%, #fff 100%);
  border-bottom:1px solid var(--k200);
}
.hero-grid{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center;
}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero-kiri{min-width:0}
.hero-logo{width:48px;height:48px;border-radius:50%;margin:0 0 18px;
  box-shadow:0 4px 16px rgba(189,47,110,.2)}
.hero h1{
  font-size:clamp(30px,5.4vw,52px);font-weight:700;line-height:1.06;
  letter-spacing:-.035em;margin:0 0 16px;
}
.hero h1 em{
  font-style:normal;color:var(--m500);position:relative;white-space:nowrap;
}
/* Coretan di bawah baris kunci: satu gerakan tangan, bukan hiasan di mana-mana. */
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.17em;
  background:var(--m200);border-radius:.1em;z-index:-1;
}
.hero .dek{margin:0 0 26px;max-width:46ch;font-size:15.5px}
.hero .kabar{max-width:44ch;margin:0 0 18px}
.hero-kaki{font-size:12px;color:var(--redup);margin:14px 0 0;max-width:42ch;line-height:1.65}

.hero-kanan{min-width:0}

/* ---------- galeri contoh ---------- */
.galeri{padding:58px 24px 56px;background:#fff}
.galeri-kepala{max-width:620px;margin:0 auto 26px;text-align:center}
.galeri-kepala h2{font-size:clamp(21px,3vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.galeri-kepala .dek{margin:0 auto;max-width:54ch}

.galeri-kendali{
  display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 auto 14px;
}
.galeri-tab,.galeri-kerangka{
  display:flex;gap:4px;background:var(--k100);border-radius:999px;padding:4px;
}
.galeri-tab button,.galeri-kerangka button{
  border:0;background:transparent;border-radius:999px;padding:8px 15px;cursor:pointer;
  font-size:12.5px;font-weight:500;color:var(--redup);white-space:nowrap;
  transition:background .15s,color .15s;
}
.galeri-tab button:hover,.galeri-kerangka button:hover{color:var(--tinta-2)}
.galeri-tab button.aktif,.galeri-kerangka button.aktif{
  background:#fff;color:var(--m700);font-weight:600;
  box-shadow:0 1px 2px rgba(26,26,46,.08);
}
.galeri-kerangka button span{display:block;font-size:10.5px;font-weight:400;color:var(--redup)}
.galeri-kerangka button.aktif span{color:var(--m500)}
.galeri-tab button:focus-visible,.galeri-kerangka button:focus-visible{
  outline:2px solid var(--m500);outline-offset:2px}

.galeri-ket{
  text-align:center;font-size:13px;color:var(--redup);line-height:1.65;
  max-width:56ch;margin:0 auto 22px;min-height:2.6em;
}
.galeri-panggung{max-width:660px;margin:0 auto}
.galeri-panggung .kertas{
  box-shadow:0 2px 6px rgba(26,26,46,.09),0 18px 44px rgba(26,26,46,.11);
  border-radius:2px;
}
.galeri-panggung .ukur{display:block;margin:18px auto 0;width:max-content}

.galeri-beda{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  max-width:760px;margin:34px auto 0;
}
.galeri-beda > div{
  background:var(--k50);border:1px solid var(--k200);border-radius:var(--r-lg);padding:17px 19px;
}
.galeri-beda b{display:block;font-size:13.5px;font-weight:600;margin:0 0 5px}
.galeri-beda p{font-size:12.5px;color:var(--redup);line-height:1.65;margin:0}

/* ---------- cara pakai ---------- */
.alur{background:var(--k50);border-top:1px solid var(--k200);
  border-bottom:1px solid var(--k200);padding:54px 24px}
.alur-isi{max-width:760px;margin:0 auto;text-align:center}
.alur-isi h2{font-size:clamp(21px,3vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 26px}
.alur-daftar{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;text-align:left}
.alur-daftar li{background:#fff;border:1px solid var(--k200);border-radius:var(--r-lg);padding:20px}
.alur-nomor{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--m500);color:#fff;font-size:13px;font-weight:700;margin:0 0 11px;
}
.alur-daftar b{display:block;font-size:14.5px;font-weight:600;margin:0 0 5px}
.alur-daftar p{font-size:12.5px;color:var(--redup);line-height:1.65;margin:0}

.nilai{padding:52px 24px;background:#fff}

/* ---------- ajakan penutup ---------- */
.ajakan{
  padding:56px 24px;text-align:center;
  background:linear-gradient(180deg, var(--m600) 0%, var(--m700) 100%);
}
.ajakan-isi{max-width:520px;margin:0 auto}
.ajakan h2{font-size:clamp(20px,2.8vw,26px);font-weight:700;color:#fff;
  letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.ajakan p{color:rgba(255,255,255,.82);font-size:14px;line-height:1.65;margin:0 0 24px}
.ajakan .b-google{box-shadow:0 6px 20px rgba(0,0,0,.16)}

.kaki{padding:26px 24px 34px;text-align:center;background:var(--k50);
  border-top:1px solid var(--k200)}
.kaki p{font-size:12px;color:var(--redup);margin:0}

.b-google{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:#fff;border:1px solid var(--k200);border-radius:999px;
  padding:13px 28px;font-size:15px;font-weight:600;color:var(--tinta);
  text-decoration:none;transition:border-color .15s,box-shadow .15s;
}
.b-google:hover{border-color:var(--k400);box-shadow:0 1px 3px rgba(26,26,46,.08)}
.b-google:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.masuk-kaki{font-size:12px;color:var(--redup);margin:16px auto 0;max-width:44ch;line-height:1.6}

.belum-siap{
  border:1px dashed var(--k400);border-radius:var(--r);padding:16px 18px;
  text-align:left;font-size:13px;color:var(--tinta-2);
}
.belum-siap p{margin:6px 0 0;color:var(--redup);line-height:1.6}
.belum-siap code{
  font-family:ui-monospace,Consolas,monospace;font-size:12px;
  background:var(--k100);padding:1px 5px;border-radius:4px;
}

/* Dinding login berarti orang diminta mendaftar untuk sesuatu yang belum
   pernah dilihatnya. Contoh hasil di samping tombol menutup celah itu tanpa
   membuka jalur tanpa-akun. */
.masuk-atas{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;align-items:stretch}
@media (max-width:860px){.masuk-atas{grid-template-columns:1fr}}
.masuk-atas > .masuk-kartu{margin:0}

.masuk-contoh{
  background:#fff;border:1px solid var(--k200);border-radius:22px;
  padding:22px 22px 20px;display:flex;flex-direction:column;
}
.masuk-contoh-label{
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--redup);margin:0 0 12px;
}
.masuk-contoh-kaki{font-size:11.5px;color:var(--redup);line-height:1.6;margin:14px 0 0}
.mini-cv{
  border:1px solid var(--k200);border-radius:6px;background:#fff;padding:16px 15px;
  font-family:Arial,Helvetica,sans-serif;color:#111;flex:1;
  box-shadow:0 1px 2px rgba(26,26,46,.05);
}
.mini-nama{font-size:14px;font-weight:700;letter-spacing:-.01em}
.mini-label{font-size:10px;margin-top:1px}
.mini-kontak{font-size:8px;color:#444;margin-top:4px}
.mini-judul{
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  border-bottom:1px solid #000;padding-bottom:2px;margin:11px 0 5px;
}
.mini-peran{font-size:10px;font-weight:700}
.mini-kecil{font-size:8px;color:#555;margin-top:1px}
.mini-baris{display:block;height:4px;border-radius:2px;background:var(--k100);margin:4px 0 0}

.masuk-nilai{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  max-width:900px;margin:0 auto}
.masuk-nilai li{
  background:#fff;border:1px solid var(--k200);border-radius:var(--r-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:5px;
}
.masuk-nilai b{font-size:13.5px;font-weight:600}
.masuk-nilai li > span:last-child{font-size:12.5px;color:var(--redup);line-height:1.6}

.ubin{
  flex:none;width:34px;height:34px;border-radius:9px;background:var(--m50);
  display:grid;place-items:center;color:var(--m500);margin:0 0 6px;
}
.ubin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ubin.besar{width:46px;height:46px;border-radius:12px;margin:0 auto 12px}
.ubin.besar svg{width:24px;height:24px}

/* ======================= riwayat ======================= */
.riwayat{max-width:920px;margin:0 auto;padding:34px 24px 72px}
.riwayat-kepala{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 24px}
.riwayat-kepala h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}

.kosong{
  background:#fff;border:1px dashed var(--k200);border-radius:var(--r-lg);
  padding:42px 28px;text-align:center;
}
.kosong b{display:block;font-size:15px;font-weight:600;margin:0 0 6px}
.kosong p{color:var(--redup);font-size:13px;max-width:46ch;margin:0 auto;line-height:1.65}

/* ---------- layar pilih cara mulai ---------- */
.mulai{
  max-width:1040px;margin:0 auto;padding:40px 24px 72px;
}
.mulai-kepala{max-width:620px;margin:0 0 28px}
.mulai-kepala h1{
  font-size:clamp(27px,4.4vw,42px);font-weight:700;line-height:1.08;
  letter-spacing:-.03em;margin:0 0 14px;
}
.mulai-kepala .dek{margin:0 0 14px;font-size:15px;max-width:48ch}
.mulai-kepala .tautan-halus{font-size:12.5px}
.mulai .kabar ul{margin:8px 0 0;padding-left:18px;list-style:disc}
.mulai .kabar li{margin:0 0 4px}
.mulai .kabar b{display:block;margin-bottom:2px}

.pilih-mulai{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;align-items:stretch}
.mulai-kartu{
  position:relative;background:#fff;border:1px solid var(--k200);border-radius:20px;
  padding:24px 22px 20px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.mulai-kartu:hover{border-color:var(--m300);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(26,26,46,.07)}
.mulai-kartu.utama{
  border-color:var(--m400);
  background:linear-gradient(168deg,var(--m50) 0%,#fff 62%);
  box-shadow:0 4px 18px rgba(189,47,110,.09);
}
.mulai-kartu.utama .ubin{background:var(--m500);color:#fff}
.mulai-lencana{
  position:absolute;top:-10px;left:22px;
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;background:var(--m500);border-radius:999px;padding:4px 11px;
}
.mulai-kartu b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.mulai-kartu p{font-size:13px;color:var(--redup);line-height:1.68;margin:0}
.mulai-kartu p em{font-style:normal;font-weight:600;color:var(--tinta-2)}
.mulai-meta{font-size:11px;color:var(--k400);font-weight:500;margin-top:2px}
.mulai-kartu .b,.mulai-kartu .b-utama{margin-top:auto;align-self:flex-start}
.mulai-kartu .b-utama{padding:11px 22px}

.berkas-pilih input[type=file]{
  font-size:12px;width:100%;border:1.5px dashed var(--m200);border-radius:var(--r);
  padding:12px 11px;background:rgba(255,255,255,.7);margin-top:4px;
}
.berkas-pilih input[type=file]:hover{border-color:var(--m400)}
.setuju{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;
  color:var(--redup);line-height:1.6;margin:2px 0 4px}
.setuju input{margin-top:2px;accent-color:var(--m500);flex:none}
.mulai-kaki{font-size:12px;color:var(--redup);line-height:1.7;margin:26px 0 0;max-width:64ch}
@media (max-width:620px){
  .mulai{padding:28px 16px 56px}
  .mulai-kartu{padding:22px 18px 18px}
}

.tanda-kerangka{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--m600);background:var(--m50);border-radius:999px;padding:2px 9px;
}

/* ---------- daftar CV sesudah masuk: tahap lamaran ---------- */
/* Satu lamaran butuh DUA berkas - CV dan surat lamarannya - jadi tiap kartu
   menunjukkan tahap mana yang sudah beres dan apa langkah berikutnya
   (permintaan pemilik 16 Sep, sesudah surat lamaran ada). Pratinjau di kirinya
   digambar app.js dari data CV itu sendiri, bukan gambar contoh. */
.cvd-daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.cvd-kartu{
  background:#fff;border:1px solid var(--k200);border-radius:var(--r-lg);
  padding:16px;display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;
  transition:border-color .15s,box-shadow .15s;
}
.cvd-kartu:hover{border-color:var(--m300);box-shadow:0 6px 18px rgba(26,26,46,.06)}
.cvd-gambar{
  display:block;aspect-ratio:210/297;border:1px solid var(--k200);border-radius:10px;
  overflow:hidden;background:#fff;
}
.cvd-gambar .cv{margin:0;pointer-events:none}
/* Wadah semua lembar, sepadan dengan kertas di editor: diperkecil sekali,
   jadi pengukur halaman membaca tinggi yang sama dengan saat dicetak. Lembar
   kedua dan seterusnya terpotong tepi kartu - yang dipajang halaman pertama. */
.cvd-lembar{display:block;width:210mm;transform-origin:0 0}
.cvd-hal:empty{display:none}
.cvd-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cvd-kepala h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.cvd-waktu{margin-left:auto;font-size:11.5px;color:var(--redup)}
.cvd-sub{margin:4px 0 12px;font-size:12px;color:var(--redup)}
.cvd-rel{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;padding:0}
.cvd-rel li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--redup)}
.cvd-bulat{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:11.5px;border:1.5px solid var(--k200);background:#fff;color:var(--redup);
}
.cvd-rel li.selesai{color:var(--aman)}
.cvd-rel li.selesai .cvd-bulat{background:#e7f4ee;border-color:#bfe3d0;color:var(--aman)}
.cvd-rel li.kini{color:var(--m700)}
.cvd-rel li.kini .cvd-bulat{background:var(--m500);border-color:var(--m500);color:#fff}
.cvd-lanjut{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:var(--m50);border:1px solid var(--m100,#f1d9e6);border-radius:var(--r);padding:12px 14px;
}
.cvd-lanjut p{margin:0;font-size:13px;line-height:1.55;color:var(--tinta-2);max-width:52ch}
.cvd-lanjut .b{margin-left:auto}
.cvd-kaki{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  border-top:1px dashed var(--k200);padding-top:13px;
}
.cvd-kaki form{display:inline}
.cvd-kartu .ubah-nama{grid-column:1/-1;margin:0}
@media (max-width:700px){
  .cvd-kartu{grid-template-columns:78px minmax(0,1fr);gap:13px;padding:13px}
  .cvd-waktu{margin-left:0;width:100%}
  .cvd-lanjut .b{margin-left:0;width:100%;text-align:center}
}

/* ======================= editor: rel langkah ======================= */
.rel{flex:1;min-width:0;overflow-x:auto}
.rel-daftar{display:flex;gap:4px;align-items:center;justify-content:center}
.rel-daftar li{flex:none}
.rel-daftar button{
  display:flex;align-items:center;gap:7px;background:transparent;border:0;
  padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--redup);
  font-size:12px;font-weight:500;white-space:nowrap;
}
.rel-daftar button:hover{background:var(--k50);color:var(--tinta-2)}
.rel-daftar button:focus-visible{outline:2px solid var(--m500);outline-offset:1px}
.rel-nomor{
  width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:600;background:var(--k100);color:var(--redup);
}
.rel-daftar .lewat .rel-nomor{background:var(--m100);color:var(--m600)}
.rel-daftar .kini button{background:var(--m50);color:var(--m700)}
.rel-daftar .kini .rel-nomor{background:var(--m500);color:#fff}
@media (max-width:1180px){.rel-nama{display:none}}
/* Di ponsel rel langkah dulu DIHILANGKAN sama sekali: wizard delapan
   langkah tanpa peta, dan tidak ada cara melompat balik ke langkah yang
   ingin diperbaiki. Sekarang ia digeser mendatar, sama seperti saringan
   bentuk - sempit bukan alasan untuk menghapus navigasi. */
@media (max-width:760px){
  .rel{flex:1;min-width:0;order:3;width:100%;margin-top:2px}
  .rel-daftar{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .rel-daftar::-webkit-scrollbar{display:none}
  .rel-daftar > li{flex:none}
}

/* ======================= editor: tata letak ======================= */
.editor-isi{display:grid;grid-template-columns:minmax(420px,1fr) minmax(400px,.92fr);min-height:calc(100vh - 56px)}
@media (max-width:1000px){.editor-isi{grid-template-columns:1fr}}

.langkah-panel{
  padding:30px 28px 0;border-right:1px solid var(--k200);background:var(--k50);
  display:flex;flex-direction:column;min-width:0;
}
@media (max-width:1000px){.langkah-panel{border-right:0;border-bottom:1px solid var(--k200)}}

.langkah-kepala{margin:0 0 4px}
.langkah-nomor{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--m600);margin:0 0 8px;
}
.langkah-kepala h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}

/* ---------- blok bagian ---------- */
.blok{
  background:#fff;border:1px solid var(--k200);border-radius:var(--r-lg);
  padding:18px 18px 20px;margin:16px 0 0;
}
.blok-kepala{display:flex;align-items:center;gap:11px;margin:0 0 4px}
.blok-kepala h2{font-size:15px;font-weight:600}
.blok-kepala .ubin{margin:0}
.blok-ket{
  font-size:12px;color:var(--redup);line-height:1.6;margin:10px 0 0;
  padding-left:11px;border-left:2px solid var(--m200);
}
.blok-kosong{
  font-size:12.5px;color:var(--redup);margin:14px 0 0;padding:14px;
  background:var(--k50);border-radius:var(--r);text-align:center;
}

.baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:11px 12px;margin:14px 0 0}
.bidang{display:flex;flex-direction:column;gap:5px;min-width:0}
.bidang.lebar{grid-column:1/-1}
.bidang label{font-size:11.5px;font-weight:500;color:var(--tinta-2)}
.bidang label .wajib{color:var(--m500)}
.bidang input,.bidang textarea,.bidang select{
  border:1px solid var(--k200);border-radius:var(--r);padding:9px 11px;background:#fff;
  font-size:13.5px;width:100%;transition:border-color .15s,box-shadow .15s;
}
.bidang input:hover,.bidang textarea:hover,.bidang select:hover{border-color:var(--k400)}
.bidang input:focus,.bidang textarea:focus,.bidang select:focus{
  outline:0;border-color:var(--m500);box-shadow:0 0 0 3px var(--m50);
}
.bidang textarea{resize:vertical;min-height:70px;line-height:1.6}
.bidang .petunjuk{font-size:11px;color:var(--redup)}
.bidang.centang{flex-direction:row;align-items:center;gap:9px}
.bidang.centang input{width:auto;accent-color:var(--m500)}

.item{border:1px solid var(--k200);border-radius:var(--r);padding:13px 15px;margin:12px 0 0;background:var(--k50)}
.item-kepala{display:flex;align-items:center;gap:10px}
.item-nomor{
  flex:none;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--k200);
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--m600);
}
.item-judul{font-size:13px;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.item-judul.kosong{color:var(--redup);font-weight:400;font-style:italic}
.ikon-b{
  margin-left:auto;flex:none;border:1px solid var(--k200);background:#fff;border-radius:8px;
  width:28px;height:28px;display:grid;place-items:center;cursor:pointer;color:var(--redup);
  font-size:15px;line-height:1;
}
.ikon-b:hover{border-color:var(--bahaya);color:var(--bahaya)}
.ikon-b:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.b-tambah{
  margin:12px 0 0;border:1px dashed var(--m200);background:var(--m50);color:var(--m600);
  border-radius:var(--r);padding:10px 14px;font-size:13px;font-weight:500;cursor:pointer;width:100%;
}
.b-tambah:hover{border-color:var(--m400);background:var(--m100)}
.b-tambah:focus-visible{outline:2px solid var(--m500);outline-offset:2px}

.foto-baris{
  display:flex;align-items:center;gap:14px;margin:14px 0 0;flex-wrap:wrap;
  padding:12px 14px;background:var(--k50);border:1px solid var(--k200);border-radius:var(--r);
}
.foto-pratinjau{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;
  border:1px solid var(--k200);background:#fff}
.foto-ket{font-size:11px;color:var(--redup);max-width:36ch;margin:6px 0 0}
.foto-baris input[type=file]{font-size:12px;max-width:210px}

/* ---------- kaki navigasi ---------- */
.langkah-kaki{
  position:sticky;bottom:0;margin:26px -28px 0;padding:14px 28px;
  background:rgba(250,250,249,.94);backdrop-filter:blur(6px);
  border-top:1px solid var(--k200);display:flex;gap:10px;justify-content:space-between;
}

/* ---------- panel akhir ---------- */
.panel-akhir{margin:16px 0 0}
.panel-akhir[hidden]{display:none}
.pilih-kerangka{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:900px){.pilih-kerangka{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.pilih-kerangka{grid-template-columns:1fr}}
.kb{
  border:1px solid var(--k200);background:#fff;border-radius:12px;
  padding:8px 8px 10px;cursor:pointer;text-align:left;position:relative;
  display:flex;flex-direction:column;gap:7px;transition:border-color .15s,background .15s;
  min-width:0;
}
/* Kotak pratinjau berbanding A4 dan mengunci luapannya; isinya CV sungguhan
   yang diperkecil lewat transform (perkecil() di app.js) - dipasang dari JS karena rasio px-per-mm cuma
   diketahui saat jalan. */
.kb-pratinjau{
  display:block;width:100%;aspect-ratio:210/297;overflow:hidden;
  border-radius:6px;border:1px solid var(--k200);background:#fff;
  min-width:0;flex:none;
}
.kb-pratinjau .cv{margin:0;pointer-events:none}
.kb-teks{display:flex;flex-direction:column;gap:1px;padding:0 2px}
.kb-teks b{font-size:13px;font-weight:600;line-height:1.3}
.kb-teks > span{font-size:10.5px;font-weight:500;color:var(--m600);line-height:1.35}
/* Lencana kategori: tulisannya cuma "ATS" atau "Kreatif", sama di galeri
   halaman depan dan di editor. Dua label setara, jadi bukan warna bahaya. */
.kb-jenis{
  align-self:flex-start;margin:0 2px;font-size:9.5px;font-weight:600;
  color:var(--m700);background:var(--m50);border-radius:5px;padding:2px 6px;
}
.kb-jenis.ats{color:var(--aman);background:#e7f4ee}
.kb-cek{
  position:absolute;top:14px;right:14px;width:21px;height:21px;border-radius:50%;
  background:var(--m500);color:#fff;font-size:11px;display:grid;place-items:center;
  opacity:0;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.kb:hover{border-color:var(--m300)}
.kb.aktif{border-color:var(--m500);background:var(--m50);box-shadow:0 0 0 1px var(--m500)}
.kb.aktif .kb-teks b{color:var(--m700)}
.kb.aktif .kb-cek{opacity:1}
.kb:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
/* Keterangan panjang tinggal satu: yang sedang dipilih. Empat belas paragraf
   di dalam kartu membuat galerinya tidak bisa dipindai mata sama sekali. */
.kerangka-ket{
  margin:12px 0 0;font-size:12px;color:var(--redup);line-height:1.6;
  background:var(--k50);border:1px solid var(--k200);border-radius:var(--r);padding:10px 12px;
}
.kerangka-ket b{color:var(--tinta)}
.catatan-kerangka{
  margin:12px 0 0;font-size:12px;color:var(--redup);line-height:1.6;
  padding-left:11px;border-left:2px solid var(--m200);
}

/* ---------- pemilih warna aksen ---------- */
.label-kecil{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--redup);margin:20px 0 9px;
}
.pilih-warna{display:flex;gap:8px;flex-wrap:wrap}
.pilih-warna button{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid var(--k200);background:#fff;border-radius:var(--r);
  padding:9px 8px 7px;cursor:pointer;min-width:62px;
  transition:border-color .15s,background .15s;
}
.pilih-warna button span{
  width:22px;height:22px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.pilih-warna button em{font-style:normal;font-size:10.5px;color:var(--redup)}
.pilih-warna button:hover{border-color:var(--k400)}
.pilih-warna button.aktif{border-color:var(--tinta);background:var(--k50)}
.pilih-warna button.aktif em{color:var(--tinta);font-weight:600}
.pilih-warna button.aktif span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 2px #fff,0 0 0 4px var(--tinta)}
.pilih-warna button:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.pilih-warna.mati{opacity:.42}
.pilih-warna.mati button{cursor:not-allowed}
.warna-mati{font-size:12px;color:var(--redup);margin:9px 0 0;line-height:1.6}

/* di galeri: dirapatkan dan ditengahkan */
.galeri-warna{display:flex;justify-content:center;margin:0 auto 18px;max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.galeri-warna::-webkit-scrollbar{display:none}
.galeri-warna .pilih-warna{flex-wrap:nowrap}
.galeri-warna .pilih-warna button{min-width:56px;padding:7px 7px 6px}
.galeri-warna .warna-mati{display:none}

.kemajuan{
  display:flex;gap:18px;align-items:flex-start;margin:18px 0 0;
  padding:17px 19px;background:#fff;border:1px solid var(--k200);border-radius:var(--r-lg);
}
.cincin{position:relative;width:72px;height:72px;flex:none}
.cincin svg{width:72px;height:72px;transform:rotate(-90deg)}
.cincin circle{fill:none;stroke-width:6;stroke-linecap:round}
.cincin-alas{stroke:var(--m100)}
.cincin-isi{stroke:var(--m500);stroke-dasharray:194.8;transition:stroke-dashoffset .45s ease}
.cincin-angka{position:absolute;inset:0;display:grid;place-items:center;
  font-size:16px;font-weight:700;color:var(--m600);letter-spacing:-.02em}
.kemajuan-teks{min-width:0;flex:1}
.kemajuan-judul{margin:2px 0 9px;font-size:13.5px;font-weight:600}
.kemajuan-judul span{color:var(--redup);font-weight:400}
.ceklis{display:grid;gap:5px}
.ceklis li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--redup);line-height:1.5}
.ceklis li .tanda{
  flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:700;margin-top:2px;background:var(--k100);color:var(--k400);
}
.ceklis li.ok{color:var(--tinta-2)}
.ceklis li.ok .tanda{background:var(--m500);color:#fff}
.ceklis li.perlu .tanda{background:var(--m100);color:var(--m600)}

.unduh-baris{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.unduh-ket{font-size:12px;color:var(--redup);line-height:1.6;margin:11px 0 0;max-width:58ch}

/* ======================= pratinjau ======================= */
.preview{
  position:sticky;top:56px;display:flex;flex-direction:column;
  height:calc(100vh - 56px);background:var(--k100);
}
@media (max-width:1000px){.preview{position:static;height:auto}}
.preview-bar{
  padding:13px 20px;border-bottom:1px solid var(--k200);background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.preview-judul{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--redup)}
.ukur{
  font-size:11.5px;color:var(--redup);font-variant-numeric:tabular-nums;
  background:var(--k50);border:1px solid var(--k200);border-radius:999px;padding:4px 12px;
}
.ukur.lebih{color:var(--bahaya);border-color:color-mix(in srgb,var(--bahaya) 30%,var(--k200))}

.panggung{flex:1;overflow:auto;padding:22px 20px 44px}
.kertas{
  position:relative;width:210mm;background:#fff;margin:0 auto;
  box-shadow:0 1px 2px rgba(26,26,46,.08),0 10px 30px rgba(26,26,46,.09);
  transform-origin:top center;
}
/* CV lebih dari satu lembar: bayangannya pindah ke tiap lembar, supaya
   terlihat sebagai beberapa kertas - bukan satu kertas yang kepanjangan. */
.kertas.banyak{background:transparent;box-shadow:none}
.kertas.banyak .cv{box-shadow:0 1px 2px rgba(26,26,46,.08),0 10px 30px rgba(26,26,46,.09)}

.panduan{position:absolute;inset:0;pointer-events:none}
.panduan .garis{position:absolute;left:0;right:0;border-top:1px dashed var(--m300)}
.panduan .garis span{
  position:absolute;right:4mm;top:-9px;font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--m500);background:#fff;padding:0 6px;
}

/* ======================= swauji ======================= */
.uji-bungkus,.uji{max-width:760px;margin:44px auto;padding:0 22px;font-size:13.5px}
.uji h1{font-size:20px;font-weight:600;margin:0 0 14px}
.uji ol{padding-left:22px;list-style:decimal}
.uji li{margin:0 0 4px}
.uji .ok{color:var(--aman)}
.uji .no{color:var(--bahaya);font-weight:600}
.uji .ringkas{border:1px solid var(--k200);border-radius:var(--r-lg);padding:13px 16px;
  background:#fff;margin:0 0 18px;font-weight:500}
.uji a{color:var(--m500)}

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

/* ======================= perbaikan hasil audit ======================= */

/* Bilah atas tidak membungkus: di layar 375px isinya menuntut 668px sehingga
   SELURUH halaman meluber ke samping dan tombol Lanjut terpotong. Ditemukan
   saat audit 2026-09-12. Pembungkusan wajib, bukan hiasan. */
.bar{flex-wrap:wrap}
.editor-isi > *{min-width:0}

/* Tombol urutkan item: orang yang sudah bekerja punya banyak pengalaman dan
   perlu menyusunnya dari yang terbaru tanpa mengetik ulang. */
.item-alat{margin-left:auto;display:flex;gap:5px;flex:none}
.item-alat .ikon-b{margin-left:0}
.ikon-b:disabled{opacity:.32;cursor:not-allowed}
.ikon-b:disabled:hover{border-color:var(--k200);color:var(--redup)}

/* Penanda langkah yang boleh dilewati. Tanpa ini orang merasa tiap langkah
   wajib diisi, lalu berhenti di langkah yang memang tidak relevan baginya. */
.pil-opsional{
  display:inline-block;margin-left:9px;vertical-align:3px;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--redup);background:var(--k100);border-radius:999px;padding:3px 9px;
}

/* Bilah tab persona tidak muat di 375px dan mendorong seluruh halaman ke
   samping. Tab strip yang lebih panjang dari layar memang seharusnya digulir
   di dalam wadahnya sendiri, bukan melebarkan badan halaman. */
.galeri-tab,.galeri-kerangka{max-width:100%;overflow-x:auto;scrollbar-width:none}
.galeri-tab::-webkit-scrollbar,.galeri-kerangka::-webkit-scrollbar{display:none}
.galeri-tab button,.galeri-kerangka button{flex:none}
.galeri-kendali{max-width:100%;flex-direction:column}

@media (max-width:760px){
  .galeri-kendali{flex-direction:column;gap:10px}
  .galeri-tab{width:100%;justify-content:flex-start}
  .galeri-tab button{padding:8px 13px;font-size:12px}
  .galeri{padding:42px 16px 44px}
  .hero{padding:44px 16px 40px}
  .alur{padding:42px 16px}
  .nilai{padding:38px 16px}
  .ajakan{padding:44px 16px}
  .bar{padding:9px 14px;gap:10px}
  .akun{padding-left:10px}
  .akun-nama{display:none}
  .langkah-panel{padding:22px 16px 0}
  .langkah-kepala h1{font-size:21px}
  .langkah-kaki{margin:22px -16px 0;padding:12px 16px}
  .langkah-kaki .b{flex:1;justify-content:center}
  .blok{padding:15px 14px 17px}
  .riwayat{padding:24px 16px 56px}
  .riwayat-kepala h1{font-size:22px}
  .masuk-bungkus{padding:34px 16px 56px}
  .masuk-kartu{padding:28px 20px;border-radius:18px}
  .panggung{padding:16px 12px 32px}
  .preview-bar{padding:11px 16px}
}

/* ======================= cetak ======================= */
@media print{
  .bar,.langkah-panel,.preview-bar{display:none!important}
  body{background:#fff}
  .editor-isi,.preview{display:block;height:auto;min-height:0;position:static;background:#fff}
  .panggung{overflow:visible;padding:0}
  .kertas{width:auto;box-shadow:none;margin:0;transform:none!important;zoom:1!important}
  .panduan{display:none!important}
}

/* ---------- langkah pertama: pilih desain ---------- */
/* Catatan pratinjau contoh. Sengaja tidak dibuat mirip banner galat: ini
   keterangan, bukan peringatan - yang perlu ditegaskan cuma bahwa isi yang
   terlihat bukan miliknya. */
.desain-contoh{
  background:var(--m50);border:1px solid var(--m200);border-radius:var(--r);
  padding:12px 14px;margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--tinta-2);
}
.desain-contoh b{color:var(--m700)}
/* Ringkasan pilihan di langkah terakhir, menggantikan galeri bentuk yang
   kini tinggal di langkah pertama. */
.desain-kini{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;border:1px solid var(--k200);border-radius:var(--r);
  padding:11px 14px;margin:0 0 18px;font-size:13px;color:var(--tinta-2);
}
.desain-kini b{color:var(--tinta)}

/* ---------- langkah pilih desain memakai seluruh lebar ---------- */
/* Pratinjau besar di kanan mubazir begitu tiap kartu memuat pratinjaunya
   sendiri: dua salinan CV yang sama di satu layar, dan galerinya terjepit
   di kolom kiri. */
body.mode-desain .editor-isi{grid-template-columns:1fr}
body.mode-desain .preview{display:none}
/* 1180px, bukan 1800px: sejak kartunya dibagi per halaman (empat per baris),
   panel selebar 1800px membuat satu kartu 420px dan satu halaman setinggi
   tiga layar. */
body.mode-desain .langkah-panel{
  border-right:0;background:#fff;max-width:1180px;margin:0 auto;width:100%;
}

/* ---------- kelompok bentuk ---------- */
/* Pemisah utamanya bukan selera, tapi "boleh tidak ini dikirim ke portal
   lamaran" - itu pertanyaan yang benar-benar menentukan, dan orang tidak
   tahu harus menanyakannya sendiri. */
/* Mendatar dan bisa digeser, bukan tiga bagian bertumpuk: yang bertumpuk
   memaksa orang menggulir melewati kelompok yang tidak ia cari. */
.kel-tab{
  display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:0 0 4px;margin:0 0 10px;scrollbar-width:none;
}
.kel-tab::-webkit-scrollbar{display:none}
.kel-tab button{
  flex:none;border:1px solid var(--k200);background:#fff;border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--tinta-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.kel-tab button span{
  font-size:10.5px;font-weight:600;color:var(--redup);
  background:var(--k100);border-radius:999px;padding:1px 6px;
}
.kel-tab button:hover{border-color:var(--m300)}
.kel-tab button.aktif{background:var(--tinta);border-color:var(--tinta);color:#fff}
.kel-tab button.aktif span{background:rgba(255,255,255,.22);color:#fff}
.kel-tab button:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.kel-ket{font-size:12px;color:var(--redup);line-height:1.6;margin:0 0 14px;max-width:78ch}

/* ---------- kotak perbesar ---------- */
.lihat{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.lihat-tirai{position:absolute;inset:0;background:rgba(20,18,26,.62);backdrop-filter:blur(2px)}
.lihat-kotak{
  position:relative;background:#fff;border-radius:var(--r-lg);
  width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;
  padding:16px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.lihat-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lihat-kepala h2{font-size:17px;font-weight:700;margin:0}
.lihat-kepala p{font-size:11.5px;font-weight:500;color:var(--m600);margin:2px 0 0}
.lihat-tutup{
  border:1px solid var(--k200);background:#fff;border-radius:50%;
  width:30px;height:30px;cursor:pointer;font-size:13px;color:var(--redup);flex:none;
}
.lihat-tutup:hover{border-color:var(--k400);color:var(--tinta)}
.lihat-kertas{
  flex:1;min-height:0;margin:12px 0 10px;display:flex;justify-content:center;
  align-items:flex-start;overflow:auto;overscroll-behavior:contain;background:var(--k50);
  border:1px solid var(--k200);border-radius:var(--r);padding:10px;
}
.lihat-kertas .cv{margin:0;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.lihat-ket{font-size:12px;color:var(--redup);line-height:1.6;margin:0 0 12px}
.lihat-kaki{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lihat-hitung{font-size:11.5px;color:var(--redup);min-width:62px;text-align:center}
.lihat-kaki .b-utama{margin-left:auto}
.lihat-kaki .b[disabled]{opacity:.45;cursor:not-allowed}
body.terkunci{overflow:hidden}
@media print{.lihat{display:none!important}}

/* ======================================================================
   GERAK
   Aturannya satu: gerakan boleh menjelaskan, tidak boleh menunda. Semua
   durasi di bawah 360ms, semuanya cuma transform dan opacity (dua sifat
   yang tidak memaksa tata letak dihitung ulang), dan tidak ada satu pun
   yang menahan klik berikutnya.
   ====================================================================== */

/* Dihormati lebih dulu, bukan belakangan. Sebagian orang benar-benar pusing
   oleh gerakan di layar, dan buat mereka ini bukan selera tapi kesehatan. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* LEMBUT: melambat mulus sampai berhenti, tanpa rem mendadak di ujung.
   PANTUL: sedikit melewati lalu kembali - hanya untuk yang memang pantas
   terasa 'klik', seperti tanda centang. Dipakai hemat; kalau semuanya
   memantul, tidak ada yang terasa istimewa. */
:root{--lembut:cubic-bezier(.25,.8,.3,1);--pantul:cubic-bezier(.3,1.4,.6,1)}

@keyframes g-kanan{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes g-kiri{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes g-naik{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes g-pop{from{opacity:0;transform:scale(.978) translateY(6px)}to{opacity:1;transform:none}}
@keyframes g-pudar{from{opacity:0}to{opacity:1}}
/* g-tukar memakai properti scale, bukan transform: kertas pratinjau diperkecil
   lewat transform, dan animasi transform menimpanya selama berjalan. */
@keyframes g-tukar{from{opacity:.45;scale:.993}to{opacity:1;scale:1}}
@keyframes g-denyut{0%{transform:scale(1)}42%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes g-cek{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}

/* ---------- perpindahan langkah ---------- */
/* Arahnya ikut arah langkahnya: maju masuk dari kanan, mundur dari kiri.
   Itu yang memberi rasa "ada tempatnya", bukan sekadar layar berganti isi. */
.langkah-panel.maju .langkah-kepala,
.langkah-panel.mundur .langkah-kepala{animation:.4s var(--lembut) both}
.langkah-panel.maju #form,.langkah-panel.maju #panelAkhir,
.langkah-panel.mundur #form,.langkah-panel.mundur #panelAkhir{
  animation:.4s var(--lembut) .06s both;
}
.langkah-panel.maju .langkah-kepala,
.langkah-panel.maju #form,.langkah-panel.maju #panelAkhir{animation-name:g-kanan}
.langkah-panel.mundur .langkah-kepala,
.langkah-panel.mundur #form,.langkah-panel.mundur #panelAkhir{animation-name:g-kiri}

.rel-daftar .lewat .rel-nomor{animation:g-cek .34s var(--pantul) both}

/* ---------- galeri bentuk ---------- */
.kb{
  animation:g-naik .34s var(--lembut) both;
  animation-delay:calc(var(--i,0) * 22ms);
  transition:border-color .2s,background .2s,transform .24s var(--lembut),box-shadow .24s;
}
.kb:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,26,46,.09)}
.kb:active{transform:translateY(-1px)}
.kb-cek{transform:scale(.5);transition:opacity .2s,transform .24s var(--pantul)}
.kb.aktif .kb-cek{transform:scale(1)}
.kel-tab button{transition:border-color .15s,background .18s,color .18s,transform .12s}
.kel-tab button:active{transform:scale(.96)}

/* ---------- kotak perbesar ---------- */
.lihat .lihat-tirai{animation:g-pudar .18s ease-out both}
.lihat .lihat-kotak{animation:g-pop .26s var(--lembut) both}
.lihat.tutup .lihat-tirai{animation:g-pudar .16s ease-in reverse both}
.lihat.tutup .lihat-kotak{animation:g-pop .16s ease-in reverse both}

/* ---------- pratinjau ---------- */
/* HANYA saat bentuknya diganti. Kalau ikut berkedip tiap huruf diketik,
   pratinjaunya jadi tidak bisa dipakai memeriksa apa pun. */
.kertas.ganti{animation:g-tukar .42s var(--lembut)}

/* ---------- formulir ---------- */
[data-item].baru{animation:g-naik .3s var(--lembut) both}
.b{transition:transform .12s ease,background .16s,border-color .16s,color .16s}
.b:active{transform:translateY(1px) scale(.985)}
.b-tambah{transition:transform .12s ease,border-color .16s,color .16s}
.b-tambah:active{transform:scale(.97)}
.status-simpan.beres{animation:g-denyut .5s var(--pantul)}
.cincin-isi{transition:stroke-dashoffset .95s var(--lembut)}

/* ---------- halaman masuk ---------- */
/* Kelas .munculan HANYA dipasang oleh JS, jadi tanpa JS semuanya tetap
   terlihat. Isi yang disembunyikan sambil menunggu pengamat gulir adalah
   isi yang hilang begitu ada satu galat skrip. */
.munculan{opacity:0;transform:translateY(20px)}
.munculan.tampak{
  opacity:1;transform:none;
  transition:opacity .6s ease-out,transform .6s var(--lembut);
}
.hero-kiri{animation:g-naik .6s var(--lembut) both}
.hero-kanan{animation:g-naik .6s var(--lembut) .12s both}
.mulai-kartu{
  animation:g-naik .4s var(--lembut) both;
  animation-delay:calc(var(--i,0) * 70ms);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.mulai-kartu:hover{transform:translateY(-4px)}

/* ---------- palet warna di bar kanan ---------- */
.palet{position:relative;flex:none}
.palet-tombol{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--k200);background:#fff;border-radius:999px;
  padding:5px 12px 5px 6px;font-size:12.5px;font-weight:600;color:var(--tinta-2);
  transition:border-color .15s,transform .12s;
}
.palet-tombol:hover{border-color:var(--m300)}
.palet-tombol:active{transform:scale(.97)}
.palet-tombol:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.palet-titik{
  width:20px;height:20px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.palet-tombol.mati .palet-nama{color:var(--redup)}
.palet-tombol.mati .palet-titik{opacity:.4}

.palet-kotak{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  width:min(290px,calc(100vw - 24px));
  background:#fff;border:1px solid var(--k200);border-radius:var(--r-lg);
  padding:14px;box-shadow:0 14px 38px rgba(26,26,46,.16);
  animation:g-pop .2s var(--lembut) both;
}
.palet-mati{
  font-size:11.5px;line-height:1.55;color:var(--tinta-2);margin:0 0 12px;
  background:var(--k50);border:1px solid var(--k200);border-radius:var(--r);padding:8px 10px;
}
.palet-label{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--redup);margin:0 0 8px;
}
.palet-petak{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.palet-petak button{
  aspect-ratio:1;border-radius:9px;border:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  transition:transform .14s,box-shadow .14s;
}
.palet-petak button:hover{transform:scale(1.07)}
.palet-petak button.aktif{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 2px #fff,0 0 0 4px var(--tinta)}
.palet-petak button:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.palet-sendiri{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.palet-sendiri input[type=color]{
  width:44px;height:38px;padding:0;border:1px solid var(--k200);border-radius:9px;
  background:#fff;cursor:pointer;flex:none;
}
.palet-sendiri input[type=text]{
  flex:1;min-width:0;height:38px;border:1px solid var(--k200);border-radius:9px;
  padding:0 11px;font:inherit;font-size:13px;font-family:var(--font-mono,ui-monospace,monospace);
  text-transform:lowercase;
}
.palet-sendiri input[type=text]:focus{outline:2px solid var(--m500);outline-offset:-1px;border-color:transparent}
.palet-ket{font-size:11px;line-height:1.6;color:var(--redup);margin:0}

/* ---------- dua rumah palet ---------- */
/* Di bar pratinjau ia menempel kanan; di kepala panel ia duduk di baris
   sendiri supaya tidak menghimpit judul langkah pada layar sempit. */
.palet-rumah{display:flex;justify-content:flex-end;flex:none}
.preview-bar #paletBar{margin-left:auto}
#paletDesain:empty{display:none}
#paletDesain{justify-content:flex-start;margin:12px 0 0}
/* Kotaknya ikut tepi rumahnya: menempel kanan di bar, menempel kiri di kepala
   panel - kalau selalu kanan, di kepala panel ia menjorok keluar layar. */
#paletDesain .palet-kotak{right:auto;left:0}
.preview-bar{flex-wrap:wrap;gap:8px}

/* ---------- ponsel kecil dan tablet ---------- */
/* Diuji pada 320, 360, 390, 430 (ponsel), 768, 820, 1024 (tablet). Yang paling
   sering jebol di lebar segini bukan tata letaknya, tapi kotak mengambang:
   palet dan kotak perbesar dipatok ke tepi layar, bukan ke tepi induknya. */
@media (max-width:600px){
  .lihat{padding:10px}
  .lihat-kotak{padding:12px 13px 11px;border-radius:14px}
  .lihat-kepala h2{font-size:15.5px}
  .lihat-ket{font-size:11.5px}
  .lihat-kaki{gap:6px}
  .lihat-kaki .b{padding:8px 11px;font-size:12px}
  .lihat-kaki .b-utama{margin-left:0;flex:1 0 100%;justify-content:center}
  .lihat-hitung{min-width:0;flex:1;text-align:left}
  .palet-kotak{
    position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;
    max-height:min(74vh,520px);overflow:auto;
  }
  .palet-petak{grid-template-columns:repeat(4,1fr);gap:10px}
  .kel-ket,.kerangka-ket{font-size:11.5px}
  .desain-kini{flex-direction:column;align-items:stretch;gap:8px}
  .desain-kini .b{width:100%;justify-content:center}
}
@media (min-width:601px) and (max-width:1024px){
  /* Tablet: dua kolom kartu terasa terlalu besar, tiga terlalu sempit di
     potret. Dibiarkan mengikuti titik-putus 900px yang sudah ada, tapi
     paletnya dipastikan tidak menempel tepi. */
  .palet-kotak{right:0;max-width:calc(100vw - 32px)}
}

/* ---------- sasaran sentuh di layar sentuh ---------- */
/* Diukur, bukan dikira: pada 390px swatch palet 34x34 dan tombol rel 41x33.
   Di komputer tidak terasa karena tetikus menunjuk satu piksel - jempol tidak,
   dan yang meleset akan menekan warna atau langkah yang salah. */
@media (max-width:760px){
  .rel-daftar button{min-height:40px;padding-top:7px;padding-bottom:7px}
  .rel-nomor{width:26px;height:26px}
}
@media (pointer:coarse){
  .palet-petak button{min-height:44px}
  .palet-sendiri input[type=color]{width:56px;height:46px}
  .palet-sendiri input[type=text]{height:46px}
  .palet-tombol{padding:7px 14px 7px 7px}
  .lihat-tutup{width:38px;height:38px}
  .kel-tab button{padding:9px 15px}
}

/* ---------- lompat ke pratinjau (layar sempit) ---------- */
/* Duduk di atas bilah Kembali/Lanjut, bukan menimpanya: dua tombol mengambang
   yang bertumpuk membuat orang menekan yang salah. */
.loncat{
  position:fixed;right:14px;bottom:72px;z-index:26;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--tinta);color:#fff;font:inherit;font-size:12.5px;font-weight:600;
  padding:11px 16px;box-shadow:0 6px 20px rgba(26,26,46,.28);
  animation:g-naik .3s var(--lembut) both;
}
.loncat:active{transform:scale(.96)}
.loncat:focus-visible{outline:2px solid var(--m500);outline-offset:3px}
@media (min-width:1001px){.loncat{display:none!important}}
@media print{.loncat{display:none!important}}

/* ── Halaman ketentuan (harga, syarat, privasi, pengembalian dana) ───────────
   Ditulis sebagai dokumen baca, bukan halaman pemasaran: satu kolom sempit,
   jarak baris longgar, tanpa hiasan yang mengganggu saat membaca aturan. */

.laman-dokumen{background:var(--k50)}

.dokumen{
  max-width:760px;margin:0 auto;padding:38px 24px 64px;
  background:#fff;border-left:1px solid var(--k200);border-right:1px solid var(--k200);
}
.dokumen h1{font-size:30px;line-height:1.25;margin:6px 0 4px;letter-spacing:-.01em}
.dokumen h2{font-size:17px;margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--k100)}
.dokumen p,.dokumen li{font-size:15px;line-height:1.8;color:var(--tinta)}
.dokumen ul,.dokumen ol{padding-left:22px;margin:10px 0}
.dokumen li{margin:6px 0}
.dokumen a{color:var(--m600);text-decoration:underline;text-underline-offset:3px}

.dokumen-remah{font-size:12px;color:var(--redup);margin:0 0 10px;display:flex;gap:8px;align-items:center}
.dokumen-remah a{color:var(--redup)}
.dokumen-tanggal{font-size:12px;color:var(--redup);margin:0 0 22px}
.dokumen-intro{font-size:16px;line-height:1.8;background:var(--k50);
  border-left:3px solid var(--m300);border-radius:0;padding:14px 18px;margin:0 0 8px}
.dokumen-kontak{margin-top:38px;padding-top:18px;border-top:1px solid var(--k100);
  font-size:14px;color:var(--redup)}

/* Terlihat mencolok justru supaya tidak pernah lolos ke tahap verifikasi. */
.dokumen-alarm{background:#fff4f4;border:1px solid #f3b5b5;border-radius:10px;
  padding:14px 16px;font-size:14px;margin:0 0 22px}
.dokumen-alarm code{background:#fff;border:1px solid #f3b5b5;border-radius:4px;padding:1px 5px;font-size:13px}

.dokumen-tabel{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:14px}
.dokumen-tabel th,.dokumen-tabel td{border:1px solid var(--k200);padding:9px 12px;text-align:left;vertical-align:top}
.dokumen-tabel th{background:var(--k50);font-weight:600}

.kartu-harga{border:1px solid var(--k200);border-radius:14px;overflow:hidden;margin:22px 0 10px}
.kartu-harga-atas{background:var(--m50);padding:22px 24px;border-bottom:1px solid var(--k200)}
.kartu-harga-label{font-size:12px;font-weight:600;color:var(--m600);letter-spacing:.04em;text-transform:uppercase}
.kartu-harga-angka{font-size:38px;font-weight:700;margin:6px 0 2px;letter-spacing:-.02em}
.kartu-harga-satuan{font-size:13px;color:var(--redup);margin:0}
.kartu-harga-isi{margin:0;padding:18px 24px 20px 42px}
.kartu-harga-isi li{margin:7px 0}

/* Dua pilihan harga (15 Sep 2026): CV saja, atau CV + surat lamaran. */
.harga-pilihan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 8px}
.harga-pilihan .kartu-harga{margin:0}
.kartu-harga.unggulan{border-color:var(--m300);box-shadow:0 0 0 1px var(--m300)}
@media (max-width:640px){.harga-pilihan{grid-template-columns:1fr}}
/* Angka harga tertulis 38px tapi tampil 15px: `.dokumen p` lebih spesifik
   daripada `.kartu-harga-angka`. Diawali .dokumen supaya aturannya menang. */
.dokumen .kartu-harga-angka{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;color:var(--tinta)}
.dokumen .kartu-harga-satuan{font-size:13px;line-height:1.5;color:var(--redup);margin:0}
.dokumen .kartu-harga-isi{padding:16px 20px 18px 38px}
.dokumen .kartu-harga-isi li{font-size:14px;line-height:1.6;margin:6px 0}
.dokumen .harga-susul{font-size:14px;margin:8px 0 0}
.dokumen .harga-ajak{margin:28px 0 0}
.dokumen .harga-ajak .b{text-decoration:none;color:#fff}

/* Ajakan surat lamaran di langkah terakhir editor. */
.surat-ajak{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;
  margin:18px 0 0;padding:14px 16px;border:1px solid var(--k200);border-radius:12px;background:#fff}
.surat-ajak b{display:block;font-size:14px}
.surat-ajak span{display:block;font-size:12.5px;line-height:1.55;color:var(--redup);max-width:46ch}
@media (pointer:coarse),(max-width:620px){.surat-ajak .b{min-height:44px}}

/* ── Kaki halaman bersama ─────────────────────────────────────────────────── */

.kaki-lengkap{background:#fff;border-top:1px solid var(--k200);padding:34px 24px 22px}
.kaki-isi{max-width:960px;margin:0 auto;display:grid;gap:28px;
  grid-template-columns:1.4fr 1fr 1fr}
.kaki-kolom h3{font-size:13px;margin:0 0 10px;letter-spacing:.02em}
.kaki-kolom a{display:block;font-size:13px;color:var(--tinta);text-decoration:none;
  margin:6px 0;transition:color .15s}
.kaki-kolom a:hover{color:var(--m600)}
.kaki-merek{display:flex;align-items:center;gap:9px;font-size:14px}
.kaki-merek b{font-weight:600}
.kaki-ket{font-size:12px;color:var(--redup);line-height:1.7;margin:10px 0 0;max-width:34ch}
.kaki-bawah{max-width:960px;margin:26px auto 0;padding-top:14px;border-top:1px solid var(--k100);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--redup)}

@media (max-width:720px){
  .kaki-isi{grid-template-columns:1fr}
  .dokumen{border-left:0;border-right:0;padding:28px 18px 48px}
  .dokumen h1{font-size:25px}
  .dokumen-tabel{font-size:13px}
  .dokumen-tabel th,.dokumen-tabel td{padding:7px 9px}
}

/* ── Tanda air sebelum dibayar ───────────────────────────────────────────────
   Sengaja ikut tercetak, bukan cuma tampil di layar: kalau hanya di layar,
   penghalangnya tidak berarti apa-apa. Tetap bisa dilewati lewat devtools -
   dokumennya dirender peramban - jadi ini penghalang sopan, bukan gembok. */

.tanda-air{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:5;
  font-size:clamp(48px,14vw,140px);font-weight:700;letter-spacing:.22em;
  color:rgba(190,24,93,.14);transform:rotate(-24deg);
  text-transform:uppercase;user-select:none;
}
.kertas{position:relative}

.unduh-kabar{
  margin:10px 0 0;padding:10px 13px;border-radius:9px;
  background:#fff4f4;border:1px solid #f3b5b5;font-size:13px;line-height:1.6;
}

@media print{
  .tanda-air{
    position:fixed;color:rgba(190,24,93,.18);
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .unduh-kabar{display:none!important}
}

/* ── Halaman pengelola & borang keluhan ─────────────────────────────────── */

.laman-pengelola{background:var(--k50)}
.pengelola{max-width:1080px;margin:0 auto;padding:26px 24px 64px}
.pengelola-kepala{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pengelola-kepala h1{font-size:26px;margin:0}
.pengelola-kepala p{margin:4px 0 0;font-size:13px;color:var(--redup)}
.pengelola-rentang{display:flex;gap:6px}
.pengelola-rentang a{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--k200);
  background:#fff;color:var(--tinta);text-decoration:none}
.pengelola-rentang a.aktif{background:var(--m600);border-color:var(--m600);color:#fff}

.pengelola-blok{background:#fff;border:1px solid var(--k200);border-radius:14px;padding:20px 22px;margin-top:18px}
.pengelola-blok h2{font-size:16px;margin:0 0 14px}
.pengelola-kosong{font-size:14px;color:var(--redup);line-height:1.7;margin:0}
.pengelola-catatan{font-size:13px;line-height:1.7;background:#f0fdf4;border:1px solid #86efac;
  border-radius:9px;padding:11px 14px;margin:0 0 14px}
.pengelola-kabar{background:#f0fdf4;border:1px solid #86efac;border-radius:9px;padding:11px 14px;
  font-size:14px;margin:0 0 14px}

.kartu-angka{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0 0 4px}
.angka{background:#fff;border:1px solid var(--k200);border-radius:12px;padding:14px 16px}
.pengelola-blok .angka{background:var(--k50)}
.angka-label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--redup)}
.angka b{display:block;font-size:26px;line-height:1.2;margin:5px 0 3px;letter-spacing:-.01em}
.angka b.perlu{color:#b91c1c}
.angka i{font-size:12px;color:var(--redup);font-style:normal}

.grafik{display:flex;align-items:flex-end;gap:2px;height:120px;padding:0 0 4px;
  border-bottom:1px solid var(--k200)}
.grafik-batang{flex:1;display:flex;align-items:flex-end;height:100%}
.grafik-batang>span{width:100%;background:var(--m400);border-radius:2px 2px 0 0;min-height:2px}
.grafik-kaki{display:flex;justify-content:space-between;font-size:11px;color:var(--redup);margin:6px 0 18px}

.tabel-pengelola{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.tabel-pengelola th,.tabel-pengelola td{border-bottom:1px solid var(--k100);padding:8px 10px;text-align:left}
.tabel-pengelola th{font-weight:600;color:var(--redup);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.tabel-pengelola code{font-size:12px;color:var(--redup)}

.lencana{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;font-weight:500}
.l-lunas,.l-selesai{background:#dcfce7;color:#166534}
.l-menunggu,.l-ditangani{background:#fef3c7;color:#92400e}
.l-gagal{background:#fee2e2;color:#991b1b}
.l-baru{background:#dbeafe;color:#1e40af}

.keluhan-kartu{border:1px solid var(--k200);border-radius:12px;padding:14px 16px;margin-top:12px}
.keluhan-kartu.baru{border-color:var(--m300);background:var(--m50)}
.keluhan-kartu header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.keluhan-meta{display:block;font-size:12px;color:var(--redup);margin-top:2px}
.keluhan-isi{font-size:14px;line-height:1.7;margin:10px 0 12px;white-space:pre-wrap}
.keluhan-aksi{display:flex;gap:8px;flex-wrap:wrap}
.keluhan-aksi input{flex:1;min-width:200px}

.borang{display:grid;gap:14px;margin:18px 0 0}
.borang-baris{display:grid;gap:6px}
.borang-baris>span{font-size:13px;font-weight:500}
.borang-baris i{font-weight:400;color:var(--redup);font-style:normal}
.borang input,.borang select,.borang textarea,.keluhan-aksi input,.keluhan-aksi select{
  font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--k200);
  border-radius:9px;background:#fff;color:var(--tinta);width:100%}
.borang textarea{resize:vertical;line-height:1.7}
.borang button{justify-self:start}

@media (max-width:720px){
  .pengelola{padding:20px 16px 48px}
  .tabel-pengelola{font-size:12px}
  .keluhan-kartu header{flex-direction:column}
}

.kabar-galat{background:#fff4f4;border:1px solid #f3b5b5;color:#7f1d1d}

/* ── Halaman depan: ajakan, tanya-jawab, penutup ──────────────────────────── */

.pil-gratis{background:#dcfce7;color:#166534}

.hero-ajak{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 14px}
.b-masuk.besar{padding:14px 26px;font-size:15px;gap:12px}
.b-masuk.besar.mati{opacity:.55;cursor:not-allowed}
.b-masuk.terang{background:#fff;color:var(--tinta);border-color:transparent}
.hero-kaki{font-size:13px;color:var(--redup);line-height:1.7;max-width:44ch;margin:0 0 20px}

/* Dulu bernama .tanya - nama yang SAMA dengan dialog konfirmasi di ui.js, yang
   menyembunyikan dirinya (opacity 0) sampai [open]. Bagian ini tidak pernah
   [open], jadi seluruh tanya-jawab tak terlihat di halaman depan. Namanya
   sengaja dipisah; jangan disatukan lagi. */
.faq{padding:64px 24px;background:#fff;border-top:1px solid var(--k100)}
.faq-isi{max-width:760px;margin:0 auto}
.faq-isi h2{font-size:26px;margin:10px 0 24px;letter-spacing:-.01em}
.faq details{border:1px solid var(--k200);border-radius:12px;padding:0;margin:10px 0;
  background:#fff;transition:border-color .15s}
.faq details[open]{border-color:var(--m300)}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-size:15px;font-weight:500;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--m600);line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 18px 17px;font-size:14px;line-height:1.8;color:var(--tinta)}
.faq details a{color:var(--m600)}

.ajakan{padding:72px 24px;background:var(--tinta);color:#fff;text-align:center}
.ajakan-isi{max-width:620px;margin:0 auto}
.ajakan-isi h2{font-size:30px;line-height:1.25;margin:0 0 12px;color:#fff;letter-spacing:-.015em}
.ajakan-isi p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.72);margin:0 0 26px}
.ajakan-kaki{font-size:12px;color:rgba(255,255,255,.55);margin:22px 0 0}
.ajakan-kaki a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}

@media (max-width:720px){
  .faq,.ajakan{padding:48px 18px}
  .faq-isi h2{font-size:22px}
  .ajakan-isi h2{font-size:24px}
  .hero-ajak{gap:12px}
  .b-masuk.besar{width:100%;justify-content:center}
}

/* ── Judul besar memakai Sora ─────────────────────────────────────────────── */
.display{font-family:"Sora",var(--sans);letter-spacing:-.025em}

/* ── Tombol Google ────────────────────────────────────────────────────────────
   Mengikuti pedoman resmi Google: logo G warna asli di atas latar PUTIH,
   ukurannya tidak diubah, dan tombolnya dibuat paling menonjol di halaman. */
.b-google{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:#fff;color:var(--tinta);border:1px solid var(--k200);border-radius:999px;
  padding:10px 20px;font-size:13.5px;font-weight:500;text-decoration:none;
  box-shadow:0 1px 2px rgba(26,26,46,.06);
  transition:box-shadow .16s var(--lembut),transform .16s var(--lembut),border-color .16s;
}
.b-google:hover{box-shadow:0 6px 18px rgba(26,26,46,.12);transform:translateY(-1px);
  border-color:var(--k400)}
.b-google:active{transform:translateY(0);box-shadow:0 1px 2px rgba(26,26,46,.08)}
.b-google:focus-visible{outline:2px solid var(--m600);outline-offset:3px}
.b-google.besar{padding:14px 28px;font-size:15px;gap:13px;font-weight:600}
.b-google.mati{opacity:.5;cursor:not-allowed;box-shadow:none}
.b-google svg{flex:none}

@media (max-width:600px){ .b-google.besar{width:100%} }

/* ══════════════════════════════════════════════════════════════════════════
   HALAMAN DEPAN — PITA PEMBUKA YANG MEMBEDAH SATU TEMPLATE

   Yang dijual di sini templatenya, jadi templatenya yang harus terlihat utuh.
   Keterangan bernomor sengaja duduk di KOLOM SENDIRI dan cuma ditarik garis
   ke pinggir kertas: anotasi yang menimpa dokumen membuat dokumennya tidak
   bisa dinilai, padahal justru itu barang dagangannya.

   Kanvas dibuat gelap berkisi supaya kertas putihnya jadi satu-satunya benda
   terang di layar pertama - magenta merek dipakai sebatas sorot dan penanda.
   ══════════════════════════════════════════════════════════════════════════ */

.laman-masuk{--gelap:#12111a}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* Bilah tamu ikut gelap; bilah putih di atas pita gelap terbaca seperti dua
   halaman berbeda yang kebetulan ditempel. */
.laman-masuk .bar-tamu{
  background:rgba(18,17,26,.78);border-bottom-color:rgba(255,255,255,.09);
}
.laman-masuk .bar-tamu .merek-teks b{color:#fff}
.laman-masuk .bar-tamu .merek-teks span{color:#9a93a8}

.laman-masuk .hero{
  background:var(--gelap);color:#fff;border-bottom:0;padding:54px 24px 62px;
}
.laman-masuk .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 65% 45%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 65% 45%,#000 35%,transparent 78%);
}
.laman-masuk .hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(430px,62vw);aspect-ratio:1;right:11%;top:-14%;border-radius:999px;
  background:radial-gradient(circle,rgba(189,47,110,.42),transparent 68%);
}
.laman-masuk .hero-grid{position:relative;z-index:1}
.laman-masuk .hero-kiri h1{color:#fff}
.laman-masuk .hero-kiri h1 em{color:var(--m400)}
/* Coretan di bawah kata kunci dibuat untuk latar terang; di atas kanvas gelap
   ia jadi balok pink yang menutupi hurufnya sendiri. */
.laman-masuk .hero-kiri h1 em::after{display:none}
.laman-masuk .hero .dek{color:#a9a1b6}
.laman-masuk .hero-kaki{color:#8d8599}
.laman-masuk .hero .tautan-halus{color:#a9a1b6}
.laman-masuk .hero .tautan-halus:hover{color:#fff;border-bottom-color:var(--m400)}
.laman-masuk .hero-logo{box-shadow:0 4px 20px rgba(189,47,110,.5)}
.laman-masuk .hero .pil-label{background:rgba(255,255,255,.08);color:#cfc7d8}
.laman-masuk .hero .pil-gratis{
  background:rgba(134,239,172,.12);color:#86efac;
  box-shadow:inset 0 0 0 1px rgba(134,239,172,.25);
}

/* ---------- kertas yang dibedah ---------- */
.bedah-panggung{
  display:grid;grid-template-columns:minmax(0,252px) 34px minmax(0,1fr);
  align-items:center;
}
.bedah{position:relative;z-index:2}
.bedah-kertas{
  width:210mm;transform:scale(.28);transform-origin:top left;margin-bottom:calc(297mm * -.72);
  background:#fff;overflow:hidden;border-radius:3px;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.bedah-kertas .cv{min-height:0;height:297mm}

/* Penanda sudut: bahasa gambar teknik, menandai "ini satu dokumen utuh"
   tanpa menaruh apa pun di atas dokumennya. */
.bedah .sudut{position:absolute;width:13px;height:13px;
  border:1px solid rgba(244,114,168,.55);z-index:3}
.bedah .sudut.ka{top:-6px;left:-6px;border-right:0;border-bottom:0}
.bedah .sudut.kb{bottom:-6px;right:-6px;border-left:0;border-top:0}

.bedah-rel{position:relative;height:232px}
.bedah-rel i{position:absolute;left:0;width:34px;height:1px;
  background:linear-gradient(90deg,rgba(244,114,168,.75),rgba(244,114,168,.15))}
.bedah-rel i::before{content:"";position:absolute;left:-4px;top:-3px;
  width:7px;height:7px;border-radius:999px;background:var(--m400);
  box-shadow:0 0 0 3px rgba(244,114,168,.22)}
.bedah-rel .r1{top:14%}.bedah-rel .r2{top:50%}.bedah-rel .r3{top:86%}

.bedah-panggung .catatan{display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.bedah-panggung .nota{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:11px;padding:12px 14px;
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
}
.bedah-panggung .nota-no{
  width:22px;height:22px;border-radius:6px;background:rgba(244,114,168,.16);
  color:var(--m400);display:grid;place-items:center;
  font-size:10.5px;font-weight:500;flex:none;
}
.bedah-panggung .nota b{display:block;font-size:12.5px;font-weight:600;color:#fff;margin-bottom:2px}
.bedah-panggung .nota p{font-size:11.5px;line-height:1.6;color:#a9a1b6;margin:0}
.bedah-panggung .nota .tik{font-size:9px;letter-spacing:.08em;color:#7d7589;display:block;margin-top:6px}
.bedah-kaki{margin:22px 0 0;font-size:11.5px;color:#7d7589;line-height:1.7;text-align:center}

@media (max-width:940px){
  .bedah-panggung{grid-template-columns:1fr;gap:22px;justify-items:center}
  .bedah{width:100%;max-width:250px}
  .bedah-rel{display:none}
  .bedah-panggung .catatan{width:100%;max-width:470px}
}

/* ══════════════════════════════════════════════════════════════════════════
   GALERI HALAMAN DEPAN = LAYAR PEMILIHAN DESAIN DI DALAM EDITOR

   Kelas kartunya sengaja DIPAKAI BERSAMA (.kel-tab, .pilih-kerangka, .kb),
   bukan disalin jadi kelas sendiri: dua tampilan kembar yang harus dijaga
   sama selamanya pasti melenceng cepat atau lambat, dan yang rugi orang yang
   mengira layar setelah masuk berbeda dari yang membuatnya tertarik.

   Saringannya cuma dua - aman ATS dan kreatif - karena itu satu-satunya beda
   yang menentukan nasib lamaran. Umur dan status pekerjaan tidak mengubah
   bentuk CV-nya sama sekali, jadi tidak perlu jadi pilihan.
   ══════════════════════════════════════════════════════════════════════════ */
.galeri-isi{max-width:1800px;margin:0 auto}
.galeri-isi .kel-tab{justify-content:center;margin:0 0 12px;padding-bottom:0}
.galeri-isi .kel-ket{text-align:center;max-width:62ch;margin:0 auto 20px}
.galeri-isi .kerangka-ket{max-width:74ch;margin:18px auto 0}

/* Lima lajur, bukan empat seperti di editor: wadah di sini jauh lebih lebar,
   dan sepuluh bentuk ATS jadi tepat dua baris penuh - bukan dua baris penuh
   plus satu baris berisi dua kartu yang mengambang. */
/* Kartu seukuran galeri Canva (15 Sep, permintaan pemilik): dulu 213 px di
   1920 px. Susunannya kini dua baris bergerak, kembar dengan langkah Pilih
   desain di editor - lebar kartu dan geraknya diatur blok .jalur. */

.galeri-warna{margin-top:18px}
.galeri-panggung{margin-top:26px}

/* ══════════════════════════════════════════════════════════════════════════
   KONTRAS + NAVIGASI: PERBAIKAN TERUKUR

   Angka di bawah rasio kontras WCAG, diukur bukan dikira-kira. Yang diperbaiki
   cuma yang benar-benar jatuh di bawah ambang; sisanya dibiarkan supaya
   halamannya tidak berubah jadi hitam-tebal di mana-mana.
   ══════════════════════════════════════════════════════════════════════════ */

/* Batas isian formulir tadinya #e5e0dc di atas putih = 1,31:1. Ambang untuk
   batas komponen yang harus bisa dikenali adalah 3:1 - dan ini justru kotak
   tempat orang mengetik. Diganti jadi 3,26:1 di atas putih. */
:root{--garis-isian:#968d85}
.bidang input,.bidang textarea,.bidang select,
.borang input,.borang select,.borang textarea,
.keluhan-aksi input,.keluhan-aksi select,
.berkas-pilih input[type=file]{border-color:var(--garis-isian)}

/* Keterangan bernomor dan kaki kertas di pita pembuka: #7d7589 di atas kanvas
   gelap cuma 4,26:1, padahal hurufnya 9-11px. Dinaikkan ke 6,35:1. */
.bedah-panggung .nota .tik,.bedah-kaki{color:#9a93a8}

/* Tombol yang memang tidak bisa dipakai: terlihat mati, bukan terlihat hidup
   lalu memantulkan orang ke pesan galat. */
.b-mati{
  color:var(--redup);border-color:var(--k200);background:var(--k50);
  cursor:not-allowed;font-weight:500;
}
.b-mati:hover{color:var(--redup);border-color:var(--k200);background:var(--k50)}

/* Kaki halaman kini ikut di halaman yang sudah masuk - tanpa itu, orang yang
   sudah login tidak punya satu pun jalan ke Harga, Syarat, atau Keluhan. */
.riwayat + .kaki-lengkap,.mulai + .kaki-lengkap{margin-top:56px}

/* ---------- daftar CV: nama pilihan sendiri ---------- */
.ubah-nama{margin:0 16px 12px}
.ubah-nama summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--redup);
  padding:4px 0;border-bottom:1px solid transparent;width:max-content;
}
.ubah-nama summary::-webkit-details-marker{display:none}
.ubah-nama summary::before{content:"\270E";font-size:12px}
.ubah-nama summary:hover{color:var(--m600);border-bottom-color:var(--m300)}
.ubah-nama summary:focus-visible{outline:2px solid var(--m500);outline-offset:3px;border-radius:4px}
.ubah-nama[open] summary{color:var(--m700)}
.ubah-nama form{display:flex;gap:8px;align-items:center;margin:8px 0 0;flex-wrap:wrap}
.ubah-nama input{
  flex:1;min-width:180px;max-width:380px;
  border:1px solid var(--garis-isian);border-radius:var(--r);
  padding:8px 11px;font-size:13.5px;background:#fff;
}
.ubah-nama input:focus{outline:0;border-color:var(--m500);box-shadow:0 0 0 3px var(--m50)}
.ubah-nama p{margin:7px 0 0;font-size:11.5px;color:var(--redup);line-height:1.6}

@media (max-width:620px){
  .ubah-nama{margin:0 12px 12px}
  .ubah-nama input{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   DIALOG KONFIRMASI

   Memakai <dialog> bawaan, jadi perangkap fokus, Esc, latar inert, dan peran
   dialog untuk pembaca layar datang gratis dari peramban - bukan ditiru
   setengah jadi dengan <div> dan tumpukan aria buatan sendiri.

   Warna bahaya dipakai HANYA pada tombol yang menghapus. Kalau seluruh kotak
   ikut memerah, yang tersisa cuma rasa panik - bukan informasi.
   ══════════════════════════════════════════════════════════════════════════ */
.tanya{
  border:0;padding:0;background:transparent;overflow:visible;
  max-width:min(420px,calc(100vw - 32px));width:100%;
  margin:auto;color:var(--tinta);
}
.tanya::backdrop{background:rgba(18,17,26,.55);backdrop-filter:blur(3px)}

.tanya-kotak{
  background:#fff;border-radius:18px;padding:26px 26px 22px;
  box-shadow:0 24px 64px rgba(18,17,26,.3),0 2px 8px rgba(18,17,26,.12);
  text-align:left;
}
.tanya-ikon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--m50);color:var(--m600);margin:0 0 16px;
}
.tanya-bahaya .tanya-ikon{background:#fdeaea;color:var(--bahaya)}
.tanya-ikon svg{width:24px;height:24px}
.tanya h2{
  font-family:"Sora",var(--sans);font-size:18px;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;margin:0 0 8px;text-wrap:balance;
}
.tanya p{font-size:13.5px;line-height:1.7;color:var(--redup);margin:0}
.tanya-tombol{display:flex;gap:10px;margin:22px 0 0;flex-wrap:wrap}
.tanya-tombol .b{flex:1;justify-content:center;padding:11px 18px;font-size:14px}

/* Tindakan yang tidak bisa dibatalkan: solid, bukan sekadar teks merah. */
.b-hapus{
  background:var(--bahaya);border-color:var(--bahaya);color:#fff;font-weight:600;
}
.b-hapus:hover{background:#8f2a2a;border-color:#8f2a2a;color:#fff}
.b-hapus:focus-visible{outline:2px solid var(--bahaya);outline-offset:3px}

/* Muncul dengan gerakan, bukan berkedip - dan gerakannya ikut mati sendiri
   begitu ditutup, lewat transition-behavior yang mengizinkan display dan
   overlay ikut ditransisikan. */
.tanya,.tanya::backdrop{
  transition:opacity .19s ease,display .19s allow-discrete,overlay .19s allow-discrete;
  opacity:0;
}
.tanya{transition-property:opacity,transform,display,overlay;transform:translateY(8px) scale(.98)}
.tanya[open]{opacity:1;transform:none}
.tanya[open]::backdrop{opacity:1}
@starting-style{
  .tanya[open]{opacity:0;transform:translateY(8px) scale(.98)}
  .tanya[open]::backdrop{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .tanya,.tanya::backdrop{transition-duration:.01ms}
  .tanya,.tanya[open]{transform:none}
}
@media (max-width:420px){
  .tanya-tombol{flex-direction:column-reverse}
  .tanya-tombol .b{width:100%}
}

/* ---------- kode promo ---------- */
.promo{
  margin:0 0 18px;background:#fff;border:1px solid var(--k200);
  border-radius:var(--r-lg);padding:14px 16px;
}
.promo[open]{border-color:var(--m300)}
.promo summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--tinta-2);width:max-content;
}
.promo summary::-webkit-details-marker{display:none}
.promo summary::before{
  content:"%";display:grid;place-items:center;width:22px;height:22px;flex:none;
  border-radius:7px;background:var(--m50);color:var(--m600);
  font-size:12px;font-weight:700;
}
.promo summary:hover{color:var(--m700)}
.promo summary:focus-visible{outline:2px solid var(--m500);outline-offset:3px;border-radius:6px}
.promo form{display:flex;gap:9px;align-items:center;margin:13px 0 0;flex-wrap:wrap}
.promo input{
  flex:1;min-width:200px;max-width:300px;
  border:1px solid var(--garis-isian);border-radius:var(--r);
  padding:10px 13px;font-size:15px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:#fff;
}
.promo input::placeholder{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--redup)}
.promo input:focus{outline:0;border-color:var(--m500);box-shadow:0 0 0 3px var(--m50)}
.promo input[aria-invalid="true"]{border-color:var(--bahaya);box-shadow:0 0 0 3px #fdeaea}
.promo-galat{
  margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--bahaya);font-weight:500;
}
.promo-ket{margin:9px 0 0;font-size:11.5px;color:var(--redup);line-height:1.6;max-width:62ch}

.promo-aktif{
  margin:0 0 18px;padding:12px 16px;border-radius:var(--r-lg);
  background:#f0fdf4;border:1px solid #86efac;color:#14532d;
  font-size:13px;line-height:1.65;
}

@media (max-width:620px){
  .promo input{max-width:none}
  .promo form .b{width:100%;justify-content:center}
}

/* ---------- mengatur letak foto ---------- */
/* Dua tuas saja, mendatar dan tegak. Pasfoto jarang terpotong pas di tengah,
   dan yang wajahnya agak ke atas tidak perlu memotong ulang gambarnya di luar
   aplikasi cuma untuk itu. */
.foto-atur{display:grid;gap:8px;margin-top:12px;max-width:320px}
.foto-atur label{display:grid;gap:4px;font-size:12px;color:var(--redup)}
.foto-atur input[type=range]{width:100%;accent-color:var(--aksen)}
.foto-atur .b-kecil{justify-self:start;padding:5px 10px;font-size:12px}

@media (pointer:coarse){
  .foto-atur input[type=range]{height:34px}
}

/* Ringkasan bentuk di langkah terakhir kini SESUDAH tombol unduh. */
.desain-kini-akhir{margin:20px 0 0}

/* ---------- tombol halaman di langkah pilih desain ---------- */
/* Permintaan pemilik (16 Sep): di editor kartunya TIDAK bergerak - empat per
   baris, delapan per halaman (dua baris), dengan tombol Sebelumnya dan
   Berikutnya. Kisinya memakai .pilih-kerangka biasa; yang di bawah ini hanya
   tombol halamannya. */
.halaman-kartu{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 0}
.halaman-kartu[hidden]{display:none}
.halaman-kartu button{
  border:1px solid var(--k200);background:#fff;border-radius:999px;cursor:pointer;
  min-height:44px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--tinta-2);
  transition:border-color .15s,background .15s,color .15s;
}
.halaman-kartu button:hover:not(:disabled){border-color:var(--m300)}
.halaman-kartu button:disabled{opacity:.45;cursor:default}
.halaman-kartu button:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
.halaman-kini{font-size:13px;font-weight:600;color:var(--tinta-2);min-width:15ch;text-align:center}
/* Kartu tidak lagi muncul satu per satu. Sejak halamannya bisa diganti, tiap
   pergantian halaman atau kategori menyalakan ulang animasi tiap kartu, dan
   kisinya berkedip kosong hampir satu detik. Yang muncul sekali cukup
   wadahnya - alasan yang sama dipakai galeri halaman depan. */
body.mode-desain .pilih-kerangka{animation:g-naik .34s var(--lembut) both}
body.mode-desain .pilih-kerangka .kb{animation:none}

/* ---------- galeri halaman depan: dua baris kartu bergerak ---------- */
/* Permintaan pemilik (15 Sep): kartu seukuran galeri Canva, dua baris yang
   terus bergerak berlawanan arah. Lebar kartu dihitung dari lebar wadah
   (100cqw): lima per baris, paling lebar 342 px. Salinan kartu dan jarak
   gesernya dipasang susunJalur() di app.js - sejak 16 Sep hanya dipakai galeri
   halaman depan (mulaiGaleri), tidak lagi di langkah Pilih desain. */
.pilih-kerangka.jalan{display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.jalur{
  overflow:hidden;padding:6px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.jalur-isi{
  display:flex;gap:18px;width:max-content;will-change:transform;
  animation:jalur-geser var(--lama,60s) linear infinite;
}
.jalur-isi:not([style*="--geser"]){animation:none}
.jalur.ke-kanan .jalur-isi{animation-direction:reverse}
.jalur .kb{flex:none;width:clamp(200px,calc((100cqw - 72px) / 5),342px)}
/* Animasi muncul dipasang pada wadahnya, bukan per kartu: susunJalur memindah
   kartu antar baris (appendChild), dan tiap pemindahan mengulang animasi
   kartu dari transparan - kartu berkedip tiap saringan diganti atau layar
   berubah ukuran. Wadah tidak pernah dipindah, jadi ia muncul sekali. */
.pilih-kerangka.jalan{animation:g-naik .34s var(--lembut) both}
.jalur .kb{animation:none}
@keyframes jalur-geser{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--geser,0px),0,0)}}
.pilih-kerangka.jalan:hover .jalur-isi,
.pilih-kerangka.jalan:focus-within .jalur-isi,
.pilih-kerangka.jalan.diam .jalur-isi,
body.terkunci .jalur-isi{animation-play-state:paused}
.jalur-kendali{display:flex;justify-content:flex-end;margin:-4px 0 6px}
.jalur-jeda{
  border:1px solid var(--k200);background:#fff;border-radius:999px;cursor:pointer;
  padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--tinta-2);
}
.jalur-jeda:hover{border-color:var(--m300)}
.jalur-jeda[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.jalur-jeda:focus-visible{outline:2px solid var(--m500);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .jalur{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .jalur-isi{animation:none}
  .jalur-kendali{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT UI/UX HALAMAN DEPAN (2026-09-13)

   Diukur di 1440x900 dan 375x812. Aturannya dicakup ke halaman depan
   (.laman-masuk, .galeri-isi, .bedah-panggung) kecuali kaki halaman: editor
   memakai kelas kartu yang sama, dan perubahan di sana perlu diperiksa sendiri.
   ══════════════════════════════════════════════════════════════════════════ */

/* Kata bertanda hubung tidak boleh patah di ujung baris: "CV-" / "mu" di
   judul utama terbaca seperti salah ketik. */
.utuh{white-space:nowrap}

/* Tombol masuk di bilah atas: di 375px tulisan lengkapnya terlipat dua baris,
   bilahnya jadi 86px (11% layar) dan menutupi isi di setiap guliran. */
.label-pendek{display:none}
@media (max-width:480px){
  .bar-tamu .b-google{padding:9px 16px;gap:8px}
  .bar-tamu .label-panjang{display:none}
  .bar-tamu .label-pendek{display:inline}
}

/* Jalan pintas ke contoh paling dibutuhkan di ponsel - di sana galeri berjarak
   1.400px dari tombol. Dulu ikut tersembunyi bersama tautan di bilah atas. */
@media (max-width:620px){
  .laman-masuk .hero .tautan-halus{display:inline-block;padding:12px 4px}
}
.laman-masuk .hero-kaki a{color:#cfc7d8;text-decoration:underline;text-underline-offset:3px}
.laman-masuk .hero-kaki a:hover{color:#fff}

/* Huruf terkecil di halaman depan tadinya 9px (66 teks di bawah 12px di
   ponsel). Batas bawahnya kini 11px untuk label kapital, 12px ke atas untuk
   kalimat. */
.laman-masuk .pil-label{font-size:11.5px}
.laman-masuk .bar-tamu .merek-teks span{font-size:12px}
.bedah-panggung .nota-no{font-size:11.5px}
.bedah-panggung .nota b{font-size:13px}
.bedah-panggung .nota p{font-size:12.5px}
.bedah-panggung .nota .tik{font-size:11px}
.bedah-kaki{font-size:12.5px}
.galeri-isi .kb{padding:10px 10px 12px;gap:9px}
.galeri-isi .kb-teks b{font-size:15px}
.galeri-isi .kb-teks > span{font-size:13px}
.galeri-isi .kb-jenis{font-size:11px}
.galeri-isi .kel-tab button span{font-size:11.5px}
.galeri-warna .pilih-warna button em{font-size:11.5px}


/* Tautan kaki halaman tadinya setinggi 21px. Di layar sentuh dan layar sempit
   dibuat 44px supaya jempol tidak menekan tautan di sebelahnya. */
@media (pointer:coarse),(max-width:720px){
  .kaki-kolom a{margin:0;padding:12px 0}
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT UI/UX HALAMAN SESUDAH MASUK (2026-09-14)

   Diukur di Brave pada 1366/1440/1540 px dan iframe 375 px: rel langkah
   ponsel terjepit 26 px, rel laptop terpotong ±200 px, bilah atas + bawah +
   tombol mengambang menutup ±22% layar ponsel, dan huruf editor 9-11,5 px.
   ══════════════════════════════════════════════════════════════════════════ */

/* Rel di layar laptop: nama hanya untuk langkah yang sedang dibuka, sisanya
   nomor (nama lengkapnya tetap di aria-label dan title). Di 1366 px delapan
   nama lengkap butuh 967 px sementara ruangnya 734 px. */
@media (max-width:1500px){
  .rel-daftar li:not(.kini) .rel-nama{display:none}
}
/* 761-1180 px: tulisan langkah sudah tinggal nomor, tapi nama akun di bilah
   editor masih memakan ±100 px sehingga delapan nomor pun meluber (terukur di
   838 px). Fotonya tetap ada; namanya tidak dibutuhkan saat mengisi CV. */
@media (max-width:1180px){
  .laman-editor .akun-nama{display:none}
}
/* 761-900 px: delapan nomor langkah (±356 px) masih kurang 3-33 px (terukur di
   762 dan 838 px). Tulisan merek disembunyikan, logonya tetap - di bawah 761 px
   rel sudah turun ke baris sendiri, jadi aturan ini tidak berlaku di ponsel. */
@media (min-width:761px) and (max-width:900px){
  .laman-editor .merek-teks{display:none}
}

/* Belum ada foto: kotak putus-putus, bukan ikon gambar rusak. */
.foto-kosong{display:block;background:var(--k50);border-style:dashed}

@media (max-width:760px){
  /* flex:1 berarti flex-basis 0%, jadi width:100% diabaikan dan rel ikut
     berbaris di belakang tombol akun dengan sisa lebar 26 px. Basis 100%
     memaksanya turun ke baris sendiri selebar layar. */
  .rel{flex:1 1 100%;width:100%}
  /* Delapan tombol 46 px + sela = 372 px, sementara barisnya 347 px di layar
     375 px (terukur). Tinggi sentuh 40 px dipertahankan; yang dirapatkan cuma
     sisi kiri-kanan, jadi 332 px - muat di layar 360 px ke atas. */
  .rel-daftar button{padding-left:6px;padding-right:6px}
  /* Bilah atas tidak menempel di ponsel: tiga barisnya (merek, akun, rel)
     menutup lebih dari 100 px layar sepanjang waktu, padahal bilah bawah
     dengan Kembali/Lanjut sudah selalu terlihat. */
  .bar{position:static}
  /* Kegagalan simpan tetap terlihat walau bilah atas sudah tergulir. */
  body.simpan-gagal .langkah-kaki{flex-wrap:wrap}
  body.simpan-gagal .langkah-kaki::before{
    content:"Gagal menyimpan. Periksa koneksi - perubahan dicoba lagi saat kamu mengisi atau pindah langkah.";
    flex:1 0 100%;order:-1;font-size:12px;line-height:1.5;color:var(--bahaya);
    background:#fff4f4;border:1px solid #f3b5b5;border-radius:8px;padding:7px 10px;
  }
}

/* Tombol "Lihat hasilnya" disembunyikan selama orang sedang mengisi. */
body.sedang-mengisi .loncat{display:none!important}

/* Huruf editor dan daftar CV: batas bawah 11 px untuk label kapital/angka,
   12 px ke atas untuk kalimat. */
.pil-label{font-size:11.5px}
.merek-teks span{font-size:12px}
.langkah-nomor{font-size:11.5px}
.pil-opsional{font-size:11px}
.rel-nomor{font-size:12px}
.bidang label{font-size:12.5px}
.bidang .petunjuk{font-size:12px}
.foto-ket{font-size:12px}
.kb-teks > span{font-size:12px}
.kb-jenis{font-size:11px}
.kel-tab button span{font-size:11.5px}
.ceklis li .tanda{width:16px;height:16px;font-size:10.5px}
.tanda-kerangka{font-size:11px}
.ubah-nama summary,.ubah-nama p,.promo-ket{font-size:12px}

/* Galat per isian. */
.galat-isian{display:block;font-size:12px;line-height:1.5;color:var(--bahaya);margin-top:1px}
.bidang input[aria-invalid="true"],.bidang textarea[aria-invalid="true"],
.bidang select[aria-invalid="true"]{border-color:var(--bahaya)}
.bidang input[aria-invalid="true"]:focus,.bidang textarea[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px #fdeaea;
}

/* Hapus isian: diberi jarak dari tombol urut, dan bisa diurungkan. */
.item-alat .ikon-b[data-hapus]{margin-left:10px}
.urungkan{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);
  background:var(--tinta);color:#fff;border-radius:999px;padding:8px 8px 8px 18px;
  font-size:13px;box-shadow:0 10px 30px rgba(26,26,46,.3);
}
@media (max-width:1000px){.urungkan{bottom:128px}}
.urungkan-teks{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urungkan-tombol{
  flex:none;border:0;border-radius:999px;background:#fff;color:var(--tinta);
  font:inherit;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;min-height:36px;
}
.urungkan-tombol:focus-visible{outline:2px solid var(--m400);outline-offset:2px}

/* Pemilih foto: kotak berkas bawaan disembunyikan secara visual (tetap bisa
   difokus papan ketik), yang terlihat labelnya sebagai tombol. */
.foto-berkas{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.foto-berkas:focus-visible + .foto-pilih{outline:2px solid var(--m500);outline-offset:2px}
.foto-pilih{cursor:pointer}

/* Tautan di kepala daftar CV ikut warna merek, bukan biru bawaan. */
.riwayat-kepala a:not(.b){color:var(--m600);text-underline-offset:3px}

/* "Jatah CV habis" adalah KEADAAN, bukan tombol: dulu tampil sebagai pil
   tombol mati di tempat tombol Buat CV baru, dan terbaca bisa ditekan. */
.jatah-habis{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:12.5px;font-weight:600;color:var(--tinta-2);
  background:var(--k100);border-radius:999px;padding:6px 13px;
}
.jatah-habis::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k400)}

/* Lencana ATS/Kreatif di kartu daftar CV: sama dengan lencana kartu editor. */
.cvd-kepala .kb-jenis{margin:0}

/* Sasaran sentuh di layar sentuh/sempit: ukuran jempol, bukan tetikus. */
@media (pointer:coarse),(max-width:620px){
  .ikon-b{width:40px;height:40px;font-size:18px}
  .item-alat{gap:6px}
  .cvd-kaki .b,.cvd-lanjut .b{min-height:44px}
  .ubah-nama summary{padding:12px 0}
  .promo summary{min-height:44px}
}

/* Isian bulan/tanggal di iPhone menjulur keluar kartu entri: Safari memberi
   kendali tanggal bawaannya lebar minimum sendiri yang mengalahkan width:100%.
   appearance:none mematikan penyesuaian tema itu (di Chrome tata letaknya
   terukur tidak berubah). Tinggi minimum menjaga kotak kosong tidak mengempis,
   dan nilainya rata kiri seperti isian lain, bukan di tengah. */
.bidang input[type=month],.bidang input[type=date]{
  -webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;
  min-height:calc(1.5em + 20px);text-align:left;
}
.bidang input::-webkit-date-and-time-value{text-align:left}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT UI/UX LAYAR MULAI CV BARU (2026-09-14)
   ══════════════════════════════════════════════════════════════════════════ */
.mulai-jatah{font-size:13.5px;color:var(--tinta-2);line-height:1.6;margin:0 0 14px;max-width:52ch}
.mulai-jatah b{font-weight:600;color:var(--tinta)}
/* Keterangan kecil dulu 11 px dengan kontras 2,11:1; --redup terukur 5,13:1. */
.mulai-meta{font-size:12px;color:var(--redup)}
.mulai-lencana{font-size:11px}
/* ".mulai-kartu b" dimaksudkan untuk judul kartu, tapi ikut membesarkan kata
   tebal di dalam paragraf ("PDF", "Word (.docx)") jadi 17 px. */
.mulai-kartu p b{font-size:inherit;letter-spacing:normal}

/* Pemilih berkas: input asli disembunyikan, labelnya yang tampil. */
.berkas-pilih{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px;
  padding:10px 12px;border:1.5px dashed var(--m200);border-radius:var(--r);background:rgba(255,255,255,.7);
}
.berkas-pilih input.berkas-asli{
  position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);
}
.berkas-asli:focus-visible + .berkas-tombol{outline:2px solid var(--m500);outline-offset:2px}
.mulai-kartu .berkas-tombol{margin:0;align-self:center;cursor:pointer}
.berkas-nama{font-size:12.5px;color:var(--redup);min-width:0;overflow-wrap:anywhere;line-height:1.5}
.berkas-nama.galat{color:var(--bahaya)}

.mulai-kartu .mulai-proses{font-size:13px;color:var(--tinta-2)}
.mulai-kartu button[disabled]{opacity:.72;cursor:progress}

@media (max-width:620px){
  /* Aturan bilah tamu menyembunyikan semua .tautan-halus di layar sempit; di
     sini tautan itu satu-satunya jalan kembali selain logo. */
  .mulai-kepala .tautan-halus{display:inline-block;padding:10px 0}
}
@media (pointer:coarse),(max-width:620px){
  .mulai-kartu .b{min-height:44px}
}

/* ══════════════════════════════════════════════════════════════════════════
   HALAMAN GALAT DAN SESI HABIS (2026-09-14)
   ══════════════════════════════════════════════════════════════════════════ */
/* Halaman galat berdiri sendiri (errors/halaman): terang seperti situs, bukan
   tema gelap bawaan Laravel yang mengikuti pengaturan perangkat. */
.laman-galat{min-height:100vh;display:flex;flex-direction:column}
.galat{flex:1;width:100%;max-width:600px;margin:0 auto;padding:72px 24px 88px}
.galat-kode{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.06em;color:var(--redup);margin:0 0 10px}
.galat h1{font-size:clamp(28px,5vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.galat .dek{font-size:15.5px;line-height:1.65;margin:0 0 26px;max-width:48ch}
.galat-aksi{display:flex;flex-wrap:wrap;gap:10px}
.galat-aksi .b{min-height:44px}
.galat-kontak{font-size:13px;color:var(--redup);line-height:1.6;margin:36px 0 0;max-width:52ch}
.galat-kontak a{color:var(--m600)}
@media (max-width:620px){.galat{padding:44px 16px 64px}}

/* Editor: sesi masuk habis. Beda dari "gagal menyimpan" karena koneksi -
   mencoba lagi tidak akan berhasil sampai orangnya masuk ulang. */
.sesi-habis{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;padding:12px 14px;
  background:#fff4f4;border:1px solid #f3b5b5;border-radius:var(--r);color:#7f1d1d;font-size:13.5px;line-height:1.55;
}
.sesi-habis p{margin:0;flex:1 1 260px}
.sesi-habis-aksi{display:flex;flex-wrap:wrap;gap:8px}
.sesi-habis .b{min-height:40px}
.sesi-habis.draf-pulih{background:var(--m50);border-color:var(--m200);color:var(--tinta)}

/* ---------- harga di beranda + katalog produk (2026-09-20) ---------- */
.harga-ringkas{background:#fff;border-top:1px solid var(--k200)}
.harga-daftar{list-style:none;padding:0;max-width:600px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.harga-angka{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:4px 0 8px;color:var(--m700)}
.harga-ket{margin:18px auto 0;max-width:600px;font-size:13px;color:var(--redup);line-height:1.65}
.harga-ket a{color:var(--m600)}
.katalog-bentuk{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:16px 0 6px}
.katalog-kartu{margin:0}
.katalog-kartu img{display:block;width:100%;height:auto;border:1px solid var(--k200);border-radius:8px;background:#fff}
.katalog-kartu figcaption{font-size:13px;line-height:1.45;margin-top:6px}
.katalog-kartu small{color:var(--redup);font-size:12px}
.katalog-jenis{display:inline-block;font-size:10.5px;font-weight:600;color:var(--m700);background:var(--m50);border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.katalog-jenis.ats{color:var(--aman);background:#e7f4ee}
.dokumen .katalog-proses li{margin:10px 0}
.katalog-unduh{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
.katalog-unduh .b{text-decoration:none}
.laman-masuk .hero-harga{margin:0 0 8px;color:#e9e4ee}
.laman-masuk .hero-harga b{color:#fff;font-weight:600}
.dokumen .katalog-proses{list-style:decimal}
.dokumen .katalog-butir{list-style:disc}
.laman-masuk .bar-tamu .tautan-halus{color:#e9e4ee}
.laman-masuk .bar-tamu .tautan-halus:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* ===== Audit tampilan 20 Sep 2026: sasaran sentuh dan huruf terkecil =====
   Diukur di layar 390 px: logo, tombol bilah atas, tombol warna, dan tombol jeda
   galeri cuma 32-39 px - di bawah ukuran ujung jari (44 px). Kotak centang 13 px,
   dan beberapa keterangan 11,5 px. Tidak pernah terasa di komputer karena tetikus
   menunjuk satu piksel. */
@media (pointer:coarse),(max-width:720px){
  .merek{min-height:44px}
  .bar .b,.bar-tamu .b,#btnUbahDesain{min-height:44px}
  .palet-tombol,.jalur-jeda{min-height:44px}
  .dokumen-remah a,.tautan-halus{display:inline-flex;align-items:center;min-height:44px}
  .kel-ket,.kerangka-ket,.ukur,.cvd-waktu{font-size:12.5px}
  /* Baris warna di halaman depan: dibungkus, bukan terpotong di tepi layar. */
  .galeri-warna .pilih-warna{flex-wrap:wrap;justify-content:center}
}
/* Pernyataan persetujuan terlalu penting untuk dibaca 11,5 px. */
.setuju{font-size:13px}
input[type=checkbox],.bidang.centang input[type=checkbox]{width:18px;height:18px;accent-color:var(--m500);flex:none}