/* ============================================================
   KEPALA "SIKATIN KERJA" — dipakai bersama oleh halaman sub-landing
   di luar /kerja/ sendiri: generator CV ATS dan modul-modul belajar.

   Kenapa berkas terpisah, bukan menumpang style.css milik /kerja/:
   berkas itu memakai jalur aset relatif (assets/img/…) yang hanya benar
   ketika halamannya berada di /kerja/. Dipanggil dari /belajar/toefl atau
   /tools/… seluruh gambarnya akan 404. Berkas ini memakai jalur mutlak dan
   hanya memuat yang benar-benar dipakai kepala halaman, jadi ia aman
   dipasang di mana pun tanpa menyeret sisa tata letak modul Kerja.

   Token warna sengaja didefinisikan ulang dengan @supports-free fallback:
   halaman belajar memuat CSS-nya sendiri yang mungkin belum punya token ini,
   sedangkan halaman yang sudah punya akan menimpanya dengan nilai yang sama.
   ============================================================ */

.kepala-kerja{
  --kk-bg:#060606;
  --kk-teks:#fff;
  --kk-teks2:#c1c1c1;
  --kk-redup:#8a8a8a;
  --kk-tema:#BFF747;
  --kk-garis:rgba(193,193,193,.16);
  --kk-kaca:rgba(255,255,255,.03);
  --kk-judul:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --kk-ui:'Manrope','Segoe UI',system-ui,sans-serif;
  --kk-tinggi:80px;

  position:sticky;top:0;z-index:9999;height:var(--kk-tinggi);
  display:flex;align-items:center;
  background:rgba(6,6,6,.86);backdrop-filter:blur(14px);
  border-bottom:1.5px solid var(--kk-garis);
  font-family:var(--kk-ui);
}
.kepala-kerja *{box-sizing:border-box}

.kk-dalam{display:flex;align-items:center;justify-content:space-between;
  width:min(1280px,92%);margin-inline:auto;gap:24px}

.kk-merek{display:flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--kk-judul);font-weight:800;font-size:1.6rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--kk-teks)}
.kk-merek img{width:auto;height:40px;object-fit:contain;display:block}
.kk-merek b{font-weight:800}

.kk-tautan{display:flex;gap:4px;align-items:center}
.kk-tautan a{padding:9px 15px;border-radius:100px;text-decoration:none;
  font-family:var(--kk-ui);font-size:.86rem;font-weight:600;
  color:var(--kk-teks2);transition:color .2s,background .2s,border-color .2s;
  white-space:nowrap}
.kk-tautan a:hover{color:var(--kk-teks);background:var(--kk-kaca)}
.kk-tautan a.kk-aktif{background:var(--kk-tema);color:#060606}
/* Jalan pulang ke situs induk — dibedakan agar tidak tertukar dengan
   beranda milik modul Kerja sendiri. */
.kk-tautan a.kk-pulang{color:var(--kk-redup);border:1.5px solid var(--kk-garis);margin-right:6px}
.kk-tautan a.kk-pulang:hover{color:var(--kk-tema);border-color:var(--kk-tema);background:none}

.kk-burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.kk-burger span{display:block;width:24px;height:2px;background:var(--kk-teks);
  margin:5px 0;border-radius:2px}

.kepala-kerja :focus-visible{outline:2px solid var(--kk-tema);outline-offset:3px}

@media (max-width:1080px){
  .kk-tautan{position:absolute;top:var(--kk-tinggi);left:0;right:0;
    background:var(--kk-bg);border-bottom:1.5px solid var(--kk-garis);
    flex-direction:column;align-items:stretch;padding:12px;display:none;gap:2px}
  .kk-tautan.kk-buka{display:flex}
  .kk-tautan a{padding:12px 15px}
  .kk-burger{display:block}
  .kk-merek{font-size:1.3rem}
  .kk-merek img{height:32px}
}

/* ============================================================
   AJAKAN KE HALAMAN LAIN
   Ditaruh di kaki konten: pembaca yang sampai ke sini sudah selesai
   dengan halaman ini, dan itulah saat yang tepat menawarkan langkah
   berikutnya — bukan menyela di tengah ia sedang membaca.
   ============================================================ */
.kk-lanjut{
  --kk-tema:#BFF747; --kk-garis:rgba(193,193,193,.16);
  --kk-teks2:#c1c1c1; --kk-redup:#8a8a8a;
  --kk-judul:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --kk-ui:'Manrope','Segoe UI',system-ui,sans-serif;
  width:min(1280px,92%);margin:56px auto;padding-top:28px;
  border-top:1.5px solid var(--kk-garis)}
.kk-lanjut h2{font-family:var(--kk-judul);font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:800;text-transform:uppercase;line-height:1.05;margin:0 0 6px;color:#fff}
.kk-lanjut > p{color:var(--kk-redup);font-size:.9rem;margin:0 0 22px;max-width:64ch}
.kk-kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
  list-style:none;margin:0;padding:0}
.kk-kartu a{display:flex;flex-direction:column;gap:5px;height:100%;
  padding:18px 20px;text-decoration:none;
  border:1.5px solid var(--kk-garis);border-radius:16px;
  background:rgba(255,255,255,.02);transition:border-color .2s,background .2s,transform .2s}
.kk-kartu a:hover{border-color:var(--kk-tema);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.kk-kartu .kk-label{font-family:var(--kk-ui);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;color:var(--kk-tema)}
.kk-kartu b{font-family:var(--kk-ui);font-size:1rem;color:#fff;font-weight:700}
.kk-kartu span.kk-ket{font-family:var(--kk-ui);font-size:.83rem;color:var(--kk-redup);line-height:1.5}
.kk-kartu .kk-panah{margin-top:auto;padding-top:8px;color:var(--kk-tema);font-size:.86rem;
  font-family:var(--kk-ui);font-weight:700}

@media (prefers-reduced-motion: reduce){
  .kk-kartu a:hover{transform:none}
}

/* ============================================================
   RUANG IKLAN
   Tingginya dipesan lebih dulu lewat min-height. Tanpa itu, iklan yang
   datang belakangan mendorong isi halaman ke bawah tepat saat orang
   sedang membaca atau hendak menekan tombol — pergeseran tata letak yang
   juga dihitung sebagai cacat oleh Core Web Vitals.

   Label "Iklan" wajib ada dan terbaca: pembaca berhak tahu mana konten
   dan mana yang dibayar, dan kebijakan AdSense sendiri mensyaratkannya.
   ============================================================ */
/* Tersembunyi sampai diketahui pemakainya bukan pelanggan berbayar. Ruangnya
   pun belum dipesan selama itu: memesan tinggi untuk iklan yang mungkin tidak
   pernah tampil meninggalkan lubang kosong di halaman pelanggan. */
.kk-iklan{display:none;width:min(1280px,92%);margin:40px auto;text-align:center}
.kk-iklan.kk-siap{display:block}
.kk-iklan::before{content:"Iklan";display:block;
  font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;color:#6b6b6b;margin-bottom:8px}
.kk-iklan ins{display:block;min-height:100px}
@media (min-width:768px){ .kk-iklan ins{min-height:280px} }