/* ============================================================================
   LOKERKERJA SITE — layout halaman publik (header, hero, kartu, detail, footer)
   ============================================================================
   Memakai token desain `--lk-*` dari lokerkerja.css — muat file itu dulu.
   ========================================================================== */

/* ---- dasar ---- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--lk-font-teks, "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--lk-teks, #1e2f44);
  background: var(--lk-latar, #f6f9fd);
}

/* Tipografi ala referensi loker-v2 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lk-font-judul, "Fredoka", "Lato", system-ui, sans-serif);
  font-weight: 600;
  line-height: 1.18;
  color: var(--lk-teks, #1e2f44);
}

button,
.lk-tombol,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  font-family: var(--lk-font-judul, "Fredoka", "Lato", system-ui, sans-serif);
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

.lk-langsung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--lk-utama, #10a9bb);
  color: #fff;
}
.lk-langsung:focus { left: 8px; top: 8px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--lk-utama, #10a9bb);
  outline-offset: 2px;
  border-radius: 4px;
}

.lk-wadah {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}

.lk-seksi { padding-block: 44px; }
.lk-seksi-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 22px; }
.lk-seksi-judul h2 { margin: 0; font-size: 24px; }
.lk-seksi-judul .lk-aksen { color: var(--lk-utama, #10a9bb); }
.lk-tautan-lanjut { font-weight: 600; color: var(--lk-utama-gelap, #0b8b9a); white-space: nowrap; }

/* ---- topbar & header ---- */
.lk-topbar { background: #0e1f2e; color: #c7d4e1; font-size: 12.5px; }
.lk-topbar .lk-wadah { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-block: 6px; }
.lk-topbar a { color: #eaf2f8; }
.lk-topbar a:hover { color: var(--lk-aksen, #f9ce34); }
.lk-topbar-kiri, .lk-topbar-kanan { display: flex; gap: 14px; flex-wrap: wrap; }

/* Network ringkas di header — hanya mobile (desktop sudah ada menu Network) */
.lk-net-mini { display: none; }

.lk-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--lk-garis, #dce5ef); box-shadow: 0 1px 4px rgba(30,47,68,.05); }
.lk-header-dalam { position: relative; display: flex; align-items: center; gap: 18px; min-height: 66px; }

.lk-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--lk-teks); }
.lk-brand-mark {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--lk-utama, #10a9bb), var(--lk-utama-gelap, #0b8b9a));
  color: #fff; font-size: 15px; letter-spacing: .5px;
}
.lk-brand:hover { color: var(--lk-utama-gelap); }

.lk-nav { margin-left: auto; }
.lk-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lk-nav a, .lk-nav button {
  display: block; padding: 10px 13px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--lk-teks); border-radius: 8px;
}
.lk-nav a:hover, .lk-nav button:hover { background: var(--lk-utama-muda, #e0f4f6); color: var(--lk-utama-gelap); }

/* dropdown kategori — panel full-width sejajar header, tampilan compact */
.lk-nav-item { position: static; }
.lk-nav-turun {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  padding: 14px 2px 12px; background: #fff;
  border-bottom: 1px solid var(--lk-garis);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 30px rgba(30, 47, 68, 0.12);
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .2s;
}
.lk-nav-item:hover .lk-nav-turun,
.lk-nav-item:focus-within .lk-nav-turun {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.lk-nav-turun .lk-nav-kol { flex: 1 1 150px; min-width: 150px; max-width: 340px; }
.lk-nav-turun .lk-judul-mini {
  margin: 0 0 2px; padding: 0 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; color: var(--lk-teks-redup);
}
.lk-nav-turun .lk-nav-kol a {
  display: block; padding: 4px 8px; border-radius: 6px;
  font-size: 13px; font-weight: 500; line-height: 1.45; white-space: nowrap;
}
.lk-nav-turun .lk-nav-kol a:hover { background: var(--lk-utama-muda); color: var(--lk-utama-gelap); }

.lk-cta-pasang { margin-left: 6px; }

/* hamburger mobile */
.lk-hamburger { display: none; }
#lk-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* ---- hero / pencarian ---- */
.lk-hero {
  color: #eef7fb;
  background:
    radial-gradient(900px 340px at 85% -40px, rgba(218, 151, 34, 0.4), transparent 60%),
    linear-gradient(150deg, #12283c 0%, #0e1f2e 55%, #0b1a26 100%);
}
.lk-hero-dalam { padding-block: 54px 60px; }
.lk-hero h1 { margin: 0 0 10px; font-size: clamp(24px, 4vw, 36px); line-height: 1.25; color: #fff; }
.lk-hero p { max-width: 640px; margin: 0 0 22px; color: #c3d4e3; }

.lk-cari {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end;
  padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(4,18,28,.35);
}
.lk-cari label { display: block; font-size: 12px; font-weight: 700; color: var(--lk-teks-redup); margin-bottom: 4px; }

.lk-chip-ketuk { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.lk-chip-ketuk a { padding: 6px 13px; font-size: 13px; font-weight: 600; color: #d7e6f2; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; }
.lk-chip-ketuk a:hover { background: rgba(255,255,255,.12); }

/* ---- kartu lowongan ---- */
.lk-grid-loker { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.lk-kartu-loker { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lk-garis); border-radius: 14px; padding: 18px; box-shadow: 0 1px 2px rgba(30,47,68,.04); transition: box-shadow .18s ease, transform .18s ease; }
.lk-kartu-loker:hover { box-shadow: var(--lk-bayangan); transform: translateY(-2px); }

.lk-kartu-atas { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.lk-avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--lk-utama-muda); color: var(--lk-utama-gelap); font-weight: 800; }
.lk-label { display: inline-block; padding: 3px 9px; font-size: 11.5px; font-weight: 700; border-radius: 999px; }
.lk-label-urgent { background: #fdeaea; color: var(--lk-galat); }
.lk-label-fitur { background: var(--lk-utama-muda); color: var(--lk-utama-gelap); }
.lk-label-status { background: #eef2f7; color: var(--lk-teks-redup); }

.lk-kartu-judul { margin: 2px 0 2px; font-size: 17px; line-height: 1.35; }
.lk-kartu-judul a:hover { color: var(--lk-utama-gelap); }
.lk-kartu-perusahaan { color: var(--lk-teks-redup); font-weight: 600; }

.lk-petunjuk { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.lk-petunjuk li { position: relative; padding-left: 20px; color: var(--lk-teks); }
.lk-petunjuk li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--lk-utama); opacity: .65; }
.lk-petunjuk .lk-gaji { font-weight: 700; color: var(--lk-utama-gelap); }

.lk-kartu-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.lk-waktu { font-size: 12.5px; color: var(--lk-teks-redup); }
.lk-kartu-badge { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- banner CTA pasang ---- */
.lk-seksi-cta { background: linear-gradient(120deg, var(--lk-utama) 0%, var(--lk-utama-gelap) 100%); color: #fff; border-radius: 18px; padding: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.lk-seksi-cta h2 { margin: 0 0 6px; color: #fff; font-size: 24px; }
.lk-seksi-cta p { margin: 0; color: #dff6f8; max-width: 560px; }
.lk-seksi-cta .lk-tombol-utama { background: #fff; border-color: #fff; color: var(--lk-utama-gelap); }
.lk-seksi-cta .lk-tombol-utama:hover { background: #eafcfe; }

/* ---- tata letak listing (utama + samping) ---- */
.lk-tata-luar { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
.lk-samping { position: sticky; top: 84px; background: #fff; border: 1px solid var(--lk-garis); border-radius: 14px; padding: 18px; }
.lk-filter-grup + .lk-filter-grup { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lk-garis); }
.lk-filter-grup h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.lk-daftar-link { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lk-daftar-link a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--lk-teks); font-size: 13.5px; }
.lk-daftar-link a:hover { background: var(--lk-utama-muda); color: var(--lk-utama-gelap); }
.lk-daftar-link a .lk-jumlah { float: right; color: var(--lk-teks-redup); }

.lk-kepala-daftar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lk-kepala-daftar h1 { margin: 0; font-size: 24px; }

/* ---- remah (breadcrumb) ---- */
.lk-remah { font-size: 13px; color: var(--lk-teks-redup); padding-block: 12px 0; padding-bottom:20px; }
.lk-remah ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.lk-remah li + li::before { content: "/"; margin-right: 6px; color: #c3d1e0; }
.lk-remah a:hover { color: var(--lk-utama-gelap); }
.lk-remah [aria-current="page"] { font-weight: 600; color: var(--lk-teks); }

/* ---- halaman detail lowongan ---- */
.lk-detail { background: #fff; border: 1px solid var(--lk-garis); border-radius: 16px; padding: 26px; }
.lk-detail-hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 8px; }
.lk-detail-hero .lk-avatar { width: 60px; height: 60px; font-size: 20px; }
.lk-detail h1 { margin: 0 0 4px; font-size: 26px; }
.lk-detail-perusahaan { color: var(--lk-teks-redup); font-weight: 600; }
.lk-tombol-baris { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }

.lk-ringkasan { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 8px 0 0; border: 1px solid var(--lk-garis); border-radius: 12px; overflow: hidden; }
.lk-ringkasan > div { padding: 12px 14px; background: var(--lk-permukaan); }
.lk-ringkasan > div:nth-child(odd) { background: #fbfdff; }
.lk-ringkasan dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--lk-teks-redup); }
.lk-ringkasan dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }

.lk-detail h2 { margin: 26px 0 10px; font-size: 19px; }
.lk-detail p { margin: 0 0 12px; }
.lk-detail ul { margin: 0 0 14px; padding-left: 20px; }
.lk-detail li { margin-bottom: 6px; }

.lk-kotak-lamar { margin-top: 20px; padding: 18px; background: var(--lk-utama-muda); border: 1px solid #bfe9ee; border-radius: 12px; }
.lk-kotak-lamar h2 { margin: 0 0 4px; }
.lk-kotak-lamar p { color: var(--lk-teks); }

.lk-bagikan { display: inline-flex; gap: 8px; align-items: center;flex-wrap: wrap;}
.lk-bagikan a { padding: 8px 12px; border: 1px solid var(--lk-garis); border-radius: 8px; background: #fff; font-weight: 600; font-size: 13px; }
.lk-bagikan a:hover { border-color: var(--lk-utama); color: var(--lk-utama-gelap); }

/* ---- paket (pasang lowongan) ---- */
.lk-paket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.lk-kartu-paket { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lk-garis); border-radius: 16px; padding: 24px 20px; }
.lk-kartu-paket-unggulan { border: 2px solid var(--lk-utama); box-shadow: var(--lk-bayangan); }
.lk-paket-nama { margin: 0; font-size: 20px; }
.lk-paket-tagline { color: var(--lk-teks-redup); font-size: 13px; margin: 2px 0 12px; }
.lk-paket-harga { font-size: 28px; font-weight: 800; color: var(--lk-utama-gelap); }
.lk-paket-harga small { font-size: 13px; font-weight: 500; color: var(--lk-teks-redup); }
.lk-paket-fitur { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; flex: 1; }
.lk-paket-fitur li { padding-left: 24px; position: relative; }
.lk-paket-fitur li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lk-utama-gelap); font-weight: 800; }
.lk-lencana-pilihan { position: absolute; top: -11px; left: 16px; background: var(--lk-utama); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

.lk-langkah { counter-reset: lk-langkah; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; }
.lk-langkah li { background: #fff; border: 1px solid var(--lk-garis); border-radius: 12px; padding: 16px; counter-increment: lk-langkah; }
.lk-langkah li::before { content: counter(lk-langkah); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lk-utama-muda); color: var(--lk-utama-gelap); font-weight: 800; margin-bottom: 8px; }
.lk-langkah strong { display: block; margin-bottom: 2px; }

/* ============================================================================
   HALAMAN PASANG LOWONGAN — struktur & tampilan mengikuti referensi:
   judul → tab saluran → paket → paket tambahan → ketentuan → keunggulan →
   cara pasang → CTA. Semua aturan diberi prefiks .lk-halaman-pasang agar
   tidak bertabrakan dgn gaya kartu global (.lk-kartu-paket di blok tema gelap).
   ========================================================================== */
.lk-pasang-hero { max-width: 820px; margin: 0 auto 26px; text-align: center; }
.lk-pasang-hero h1 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.25; }
.lk-pasang-hero h1 strong { color: var(--lk-utama-cerah); font-weight: 500; }
.lk-pasang-hero p { margin: 0 auto; max-width: 640px; color: var(--lk-teks-redup); line-height: 1.7; }
.lk-pasang-blok { margin-top: 48px; }
.lk-pasang-blok > h2, .lk-pasang-blok > h3 { margin: 0 0 18px; font-size: 26px; text-align: center; }
.lk-pasang-blok > h2 strong, .lk-pasang-blok > h3 strong { color: var(--lk-utama-cerah); font-weight: inherit; }

/* Band atas (breadcrumb + judul + saluran) — latar PENUH selebar layar,
   memakai pola hero beranda: dot-grid halus + glow oranye kanan-atas +
   glow biru kiri-bawah + gradient gelap ke bawah. */
.lk-pasang-atas {
  position: relative;
  /* padding bawah = ruang utk setengah-atas kartu + baris tab yang menempel
     di atasnya (pola .lk-hero-loker + .lk-pencarian-wadah) */
  padding: 8px 0 104px;
  border-bottom: 1px solid var(--lk-garis);
  background-color: var(--lk-dark-hero, #0b141d);
  background-image:
    radial-gradient(circle at center, rgba(158, 190, 224, 0.22) 1.1px, transparent 1.9px),
    radial-gradient(720px 300px at 88% -120px, rgba(218, 151, 34, 0.28), transparent 62%),
    radial-gradient(560px 320px at -80px 120%, rgba(64, 112, 172, 0.16), transparent 62%),
    linear-gradient(180deg, #0d1a26 0%, var(--lk-dark-hero, #0b141d) 52%, var(--lk-dark-bg, #080b10) 100%);
  background-size: 22px 22px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center, center;
}
.lk-pasang-atas .lk-remah { padding-block: 14px 0; }
html[data-theme="light"] .lk-pasang-atas {
  border-bottom-color: #dce5ef;
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at center, rgba(30, 47, 68, 0.14) 1.1px, transparent 1.9px),
    radial-gradient(720px 300px at 88% -120px, rgba(218, 151, 34, 0.16), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #eaf1f8 100%);
  background-size: 22px 22px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center;
}
@media (max-width: 640px) {
  .lk-pasang-atas { padding-bottom: 124px; }
}

/* Panel saluran: kartu tetap dgn pusatnya tepat di garis border bawah band —
   mengikuti pola kartu pencarian beranda (.lk-pencarian-wadah).
   Baris tab tetap berada di atas kartu; hanya isi kartu yang bergeser. */
.lk-pasang-atas .lk-saluran-kartu {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 6;
  width: calc(100% - 32px);   /* sejajar konten .lk-wadah */
  max-width: 760px;
  /* overflow TIDAK dipotong di kartu — baris tab menjulang di atasnya.
     Pemotongan area slide ditangani .lk-saluran-jendela. */
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--lk-permukaan);
  box-shadow: inset 0 0 0 1px var(--lk-garis), var(--lk-bayangan);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.lk-pasang-atas .lk-saluran-kartu:active { cursor: grabbing; }
/* jendela = area potong slide (sejajar persis dgn jalur) */
.lk-pasang-atas .lk-saluran-jendela { overflow: hidden; border-radius: inherit; }
/* jalur geser: hanya bergerak horizontal saat tab berpindah */
.lk-pasang-atas .lk-saluran-isi {
  display: flex;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* --- tab saluran publikasi: menempel di atas kartu (pola #media-list-tabs
       referensi — tab bersudut atas membulat & tab aktif menyatu dgn kartu) --- */
.lk-halaman-pasang .lk-saluran { margin: 0; }
/* sisa halaman setelah band: beri ruang utk setengah-bawah kartu saluran */
.lk-halaman-pasang.lk-pasang-sisa { padding-top: 96px; }
@media (max-width: 640px) {
  .lk-halaman-pasang.lk-pasang-sisa { padding-top: 104px; }
}
.lk-halaman-pasang .lk-saluran-tab {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-wrap: nowrap; gap: 6px;
  max-width: 100%; margin: 0; padding: 0 12px; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.lk-halaman-pasang .lk-saluran-tab::-webkit-scrollbar { display: none; }
.lk-halaman-pasang .lk-saluran-tombol {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px 10px 0 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), var(--lk-permukaan);
  color: var(--lk-teks-redup);
  box-shadow: inset 0 1px 0 var(--lk-garis), inset 1px 0 0 var(--lk-garis), inset -1px 0 0 var(--lk-garis);
  transition: color .18s ease, background .18s ease;
}
.lk-halaman-pasang .lk-saluran-tombol svg { width: 19px; height: 19px; }
/* Ikon tab ikut warna tab (abu redup → putih saat hover → oranye saat aktif).
   Tanpa ini, `.lk-ikon-sosmed { color:#fff }` yang global membuat semua ikon
   tab tetap PUTIH — di mode terang jadi tak terlihat di atas tab putih. */
.lk-halaman-pasang .lk-saluran-tombol .lk-ikon-sosmed,
.lk-halaman-pasang .lk-saluran-tombol svg { color: inherit; }
.lk-halaman-pasang .lk-saluran-tombol:hover { color: var(--lk-teks); }
.lk-halaman-pasang .lk-saluran-tombol.lk-aktif { z-index: 3; color: var(--lk-utama-cerah); background: var(--lk-permukaan); }
/* menutup garis atas kartu di belakang tab aktif -> tab terlihat menyatu */
.lk-halaman-pasang .lk-saluran-tombol.lk-aktif::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px;
  background: var(--lk-permukaan); pointer-events: none;
}
html[data-theme="light"] .lk-halaman-pasang .lk-saluran-tombol {
  background: linear-gradient(180deg, rgba(30, 47, 68, .05), rgba(30, 47, 68, .015)), #fff;
}
html[data-theme="light"] .lk-halaman-pasang .lk-saluran-tombol.lk-aktif { background: #fff; }
/* Tipografi isi disamakan dgn referensi #media-list-tabs (basis rem 19px):
   judul Fredoka 1.421rem/400 = 27px, paragraf 1rem/150% = 19px, jarak ikon-teks 22px. */
.lk-halaman-pasang .lk-saluran-panel {
  box-sizing: border-box;   /* penting: flex-basis 100% harus termasuk padding */
  flex: 0 0 100%;
  min-width: 0;
  display: flex; align-items: center; gap: 22px;
  min-height: 136px;
  padding: 24px 32px 20px;
}
.lk-halaman-pasang .lk-saluran-logo { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--lk-utama-muda); color: var(--lk-utama-cerah); }
.lk-halaman-pasang .lk-saluran-logo svg { width: 38px; height: 38px; }
.lk-halaman-pasang .lk-saluran-teks { min-width: 0; }
.lk-halaman-pasang .lk-saluran-judul { margin-bottom: 7px; font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: clamp(19px, 1.1vw + 15px, 27px); font-weight: 400; line-height: 1.2; color: var(--lk-teks); }
.lk-halaman-pasang .lk-saluran-teks p { margin: 0; font-family: var(--lk-font-teks); font-size: clamp(16px, .45vw + 14.2px, 19px); line-height: 1.5; color: var(--lk-teks-redup); }
.lk-halaman-pasang .lk-saluran-teks a { color: var(--lk-utama-cerah); font-weight: 400; }

/* layar kecil: tab & isi dikecilkan, tab boleh digeser mendatar */
@media (max-width: 640px) {
  .lk-halaman-pasang .lk-saluran-tab { top: -38px; gap: 5px; padding: 0 0; }
  .lk-halaman-pasang .lk-saluran-tombol { width: 38px; height: 38px; border-radius: 9px 9px 0 0; }
  .lk-halaman-pasang .lk-saluran-tombol svg { width: 17px; height: 17px; }
  /* referensi skala kecil: judul 1.097rem = 21px, paragraf .97rem = 18px;
     paragraf dipakai 17px agar kartu tidak terlalu tinggi di lebar 358px */
  .lk-halaman-pasang .lk-saluran-panel { gap: 13px; min-height: 0; padding: 16px 16px 14px; }
  .lk-halaman-pasang .lk-saluran-logo { width: 56px; height: 56px; border-radius: 14px; }
  .lk-halaman-pasang .lk-saluran-logo svg { width: 30px; height: 30px; }
  .lk-halaman-pasang .lk-saluran-judul { margin-bottom: 5px; }
  .lk-halaman-pasang .lk-saluran-teks p { line-height: 1.45; }
}
/* Logo berwarna brand — HANYA untuk kotak logo besar di dalam panel.
   PENTING: selector harus menyertakan `.lk-saluran-logo`, karena tombol tab
   juga membawa class `lk-saluran-<ikon>`; tanpa `.lk-saluran-logo`, aturan ini
   ikut menimpa tab (bg brand + teks putih) → di mode terang tab jadi putih
   dgn ikon putih (tak terlihat). */
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-facebook { background: #1877f2; color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-x { background: #0f1419; color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-telegram { background: #229ed9; color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-whatsapp { background: #25d366; color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-threads { background: #101010; color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-tiktok { background: linear-gradient(135deg, #25f4ee, #010101 45%, #fe2c55); color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-youtube { background: #ff0000; color: #fff; }
.lk-halaman-pasang .lk-saluran-logo.lk-saluran-playstore { background: #ff5722; color: #fff; }

/* --- kartu paket: pita aksen (ellips) di atas & bawah, isi rata tengah --- */
.lk-halaman-pasang .lk-paket-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 20px; }
.lk-halaman-pasang .lk-kartu-paket {
  box-sizing: border-box;
  position: relative; top: 0; overflow: hidden;
  display: flex; flex-direction: column;
  width: 268px; max-width: 100%; padding: 0 16px;
  border: 1px solid var(--lk-paket-garis, var(--lk-garis));
  border-radius: 20px;
  background: var(--lk-paket-latar, var(--lk-permukaan));
  box-shadow: 0 16px 32px rgba(0, 0, 0, .22), 0 0 28px var(--lk-paket-pendar, transparent);
  text-align: center;
  transition: top .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lk-halaman-pasang .lk-kartu-paket:hover { top: -10px; box-shadow: 0 22px 40px rgba(0, 0, 0, .28), 0 0 34px var(--lk-paket-pendar, transparent); }
.lk-halaman-pasang .lk-kartu-paket::before,
.lk-halaman-pasang .lk-kartu-paket::after {
  content: ""; position: absolute; left: 50%; z-index: 0;
  width: 416px; height: 169px; border-radius: 50%;
  background: var(--lk-paket-aksen, var(--lk-utama));
  transform: translateX(-50%); pointer-events: none;
}
.lk-halaman-pasang .lk-kartu-paket::before { top: -70px; filter: drop-shadow(0 8px 10px rgba(3, 9, 18, .14)); }
.lk-halaman-pasang .lk-kartu-paket::after { bottom: -80px; transform: translateX(-50%) rotate(180deg); filter: drop-shadow(0 -8px 10px rgba(3, 9, 18, .11)); }
.lk-halaman-pasang .lk-kartu-paket > * { position: relative; z-index: 1; }
/* Warna aksen per paket — DISAMAKAN dgn referensi
   lokertekniksipil.com/p/pasang-iklan-loker.html (.pricing-blanter-column):
   Platinum #757575 · Gold #FF9800 · Silver #795548 · Bronze #8BC34A.
   Warna dasar tiap paket dipakai persis; stop terang/gelap hanya turunan dari
   nuansa yang sama supaya gradien (bentuk pita) tetap seperti semula. */
.lk-halaman-pasang .lk-paket-gold { --lk-paket-aksen: linear-gradient(#ffb74d 0%, #ff9800 58%, #ef6c00 100%); --lk-paket-garis: rgba(255, 152, 0, .38); --lk-paket-pendar: rgba(255, 152, 0, .10); }
.lk-halaman-pasang .lk-paket-silver { --lk-paket-aksen: linear-gradient(#a1887f 0%, #795548 58%, #5d4037 100%); --lk-paket-garis: rgba(121, 85, 72, .48); --lk-paket-pendar: rgba(121, 85, 72, .14); }
.lk-halaman-pasang .lk-paket-bronze { --lk-paket-aksen: linear-gradient(#aed581 0%, #8bc34a 58%, #689f38 100%); --lk-paket-garis: rgba(139, 195, 74, .38); --lk-paket-pendar: rgba(139, 195, 74, .10); }
.lk-halaman-pasang .lk-paket-platinum { --lk-paket-aksen: linear-gradient(#bdbdbd 0%, #757575 58%, #424242 100%); --lk-paket-garis: rgba(117, 117, 117, .42); --lk-paket-pendar: rgba(117, 117, 117, .10); }

.lk-halaman-pasang .lk-paket-top { display: flex; flex-direction: column; align-items: center; margin: 16px 0 40px; }
.lk-halaman-pasang .lk-paket-nama { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.1; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .28); }
.lk-halaman-pasang .lk-paket-tagline { margin: 3px 0 0; font-size: 14px; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 10px rgba(0, 0, 0, .24); }
.lk-halaman-pasang .lk-paket-desc { width: 86%; margin: 0 auto 16px; font-size: 13.5px; color: var(--lk-teks-redup); }
.lk-halaman-pasang .lk-paket-desc strong { color: var(--lk-teks); }
.lk-halaman-pasang .lk-paket-jeda { display: block; font-size: 12.5px; opacity: .85; }
.lk-halaman-pasang .lk-paket-media { list-style: none; width: fit-content; max-width: 100%; margin: 0 auto 30px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.lk-halaman-pasang .lk-paket-media li { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--lk-teks); }
.lk-halaman-pasang .lk-media-ikon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.lk-halaman-pasang .lk-media-ikon svg { width: 16px; height: 16px; }
.lk-halaman-pasang .lk-media-label { flex: 0 auto; }
.lk-halaman-pasang .lk-media-panas { font-weight: 600; }
.lk-halaman-pasang .lk-media-hot { margin-left: 3px; color: #ff9a92; font-size: 10.5px; font-weight: 700; vertical-align: 2px; }
.lk-halaman-pasang .lk-media-badge { flex: none; color: var(--lk-teks-redup); font-size: 12px; font-weight: 600; }
.lk-halaman-pasang .lk-media-badge::before { content: "·"; margin-right: 4px; opacity: .7; }
/* ikon kanal berwarna brand */
.lk-halaman-pasang .lk-media-ikon .lk-ikon-sosmed { width: 16px; height: 16px; }
.lk-halaman-pasang svg.lk-media-ikon-instagram { color: #e1306c; }
.lk-halaman-pasang svg.lk-media-ikon-facebook { color: #1877f2; }
.lk-halaman-pasang svg.lk-media-ikon-telegram { color: #229ed9; }
.lk-halaman-pasang svg.lk-media-ikon-whatsapp { color: #25d366; }
.lk-halaman-pasang svg.lk-media-ikon-tiktok { color: #69c9d0; }
.lk-halaman-pasang svg.lk-media-ikon-youtube { color: #ff0000; }
.lk-halaman-pasang svg.lk-media-ikon-google { color: #e8eef5; }
.lk-halaman-pasang svg.lk-media-ikon-x,
.lk-halaman-pasang svg.lk-media-ikon-threads { color: #eef3f8; }
html[data-theme="light"] .lk-halaman-pasang svg.lk-media-ikon-x,
html[data-theme="light"] .lk-halaman-pasang svg.lk-media-ikon-threads { color: #101010; }
html[data-theme="light"] .lk-halaman-pasang svg.lk-media-ikon-google { color: #4285f4; }

/* kotak keunggulan di kartu (tanpa latar, hanya garis atas) */
.lk-halaman-pasang .lk-paket-unggul { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 0; border-top: 1px solid var(--lk-garis); }
.lk-halaman-pasang .lk-paket-unggul-judul { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--lk-teks); }
/* Teks ber-`**tebal**` dari admin (mis. “Loker **Rekomendasi**”) jadi <strong>. */
.lk-halaman-pasang .lk-paket-unggul-judul strong,
.lk-halaman-pasang .lk-paket-unggul p strong { font-weight: 700; }
.lk-halaman-pasang .lk-paket-unggul-judul svg { flex: none; width: 16px; height: 16px; color: var(--lk-utama-cerah); }
.lk-halaman-pasang .lk-paket-unggul p { width: 92%; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--lk-teks-redup); }

/* kaki kartu: harga + ajakan, berada di atas pita aksen bawah */
.lk-halaman-pasang .lk-paket-bawah { margin-top: auto; padding: 20px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; }
.lk-halaman-pasang .lk-paket-harga { font-size: 26px; font-weight: 700; line-height: 1.1; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .2); }
.lk-halaman-pasang .lk-paket-cta { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); text-decoration: none; }
.lk-halaman-pasang .lk-paket-cta:hover { color: #fff; text-decoration: underline; }
.lk-halaman-pasang .lk-lencana-pilihan { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(9, 14, 22, .55); color: #fff; font-size: 10.5px; font-weight: 700; }

/* --- paket tambahan: dua kartu berdampingan (Sticky Post lebar + Custom Banner
       sempit). Angka tata letak (gap/margin/lebar/tinggi/hover) disalin dari
       #paket-tambahan-block referensi & diganti namanya ke prefix lk-tambahan-*;
       gambar kartunya sendiri digambar ulang dgn elemen kita (bukan aset pihak
       lain) supaya teks tetap hidup dari data paket & ikut tema.
       Nilai default = tema GELAP, mode terang di-override di bawah. --- */
.lk-halaman-pasang .lk-tambahan { display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* jarak judul->kartu diatur gap blok (bukan margin h2) spt referensi */
.lk-halaman-pasang .lk-tambahan > h2 { margin-bottom: 0; }
.lk-halaman-pasang .lk-tambahan-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; }
.lk-halaman-pasang .lk-tambahan-kartu {
  --lk-tbh-blob: linear-gradient(140deg, #e2a83f 0%, #c98d21 100%);
  --lk-tbh-sorot: #e5b45c;
  --lk-tbh-teks: #dbe4ef;
  --lk-tbh-kuat: #f6f8fb;
  --lk-tbh-badan: linear-gradient(180deg, #243e5a 0%, #1e3048 100%);
  --lk-tbh-bulat: rgba(255, 255, 255, .1);
  --lk-tbh-bulat-garis: rgba(255, 255, 255, .45);
  position: relative; display: flex; flex-direction: column;
  box-sizing: border-box; max-width: 100%; min-height: 289px;
  border-radius: 20px; overflow: hidden;
  color: var(--lk-tbh-teks);
  background: var(--lk-tbh-badan);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .24s;
}
/* kartu terangkat saat di-hover (spt referensi) */
@media (hover: hover) and (pointer: fine) {
  .lk-halaman-pasang .lk-tambahan-kartu:hover { transform: translateY(-2px); }
}
html[data-theme="light"] .lk-halaman-pasang .lk-tambahan-kartu {
  --lk-tbh-blob: linear-gradient(140deg, #f0a71b 0%, #e08f0a 100%);
  --lk-tbh-sorot: #cf8109;
  --lk-tbh-teks: #3f454d;
  --lk-tbh-kuat: #1f2937;
  --lk-tbh-badan: #fff;
  --lk-tbh-bulat: #eff0f2;
  --lk-tbh-bulat-garis: #aab4c0;
  box-shadow: 0 18px 38px rgba(9, 14, 22, .16);
}
.lk-halaman-pasang .lk-tambahan-sticky { flex: 1 1 420px; max-width: 494px; --lk-tbh-blob: linear-gradient(140deg, #e2a83f 0%, #c98d21 100%); }
.lk-halaman-pasang .lk-tambahan-banner { flex: 0 1 277px; min-width: 250px; --lk-tbh-warna: #a9837d; }
html[data-theme="light"] .lk-halaman-pasang .lk-tambahan-sticky { --lk-tbh-blob: linear-gradient(140deg, #f0a71b 0%, #e08f0a 100%); }
html[data-theme="light"] .lk-halaman-pasang .lk-tambahan-banner { --lk-tbh-warna: #7e5858; }

/* kepala: gumpalan warna (judul) + deret ikon kanal di kanannya */
.lk-halaman-pasang .lk-tambahan-kepala {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; box-sizing: border-box; min-height: 100px; padding: 18px 18px 30px;
}
.lk-halaman-pasang .lk-tambahan-blob { position: absolute; z-index: 0; background: var(--lk-tbh-blob); }
.lk-halaman-pasang .lk-tambahan-sticky .lk-tambahan-blob {
  left: 0; top: 0; width: min(207px, 50%); height: 76px;
  border-radius: 20px 48px 104px 62px / 20px 74px 92px 78px;
}
/* kartu Custom Banner: kepala & harga BERGE LOMBANG pakai SVG sendiri (gaya
   referensi yg tepinya ber-scallop, bukan sudut membulat) */
.lk-halaman-pasang .lk-tambahan-wave { position: absolute; z-index: 0; display: block; color: var(--lk-tbh-warna); pointer-events: none; }
.lk-halaman-pasang .lk-tambahan-wave-kepala { left: 0; top: 0; width: 100%; height: 96px; }
.lk-halaman-pasang .lk-tambahan-wave-harga { left: 0; bottom: 0; width: 100%; height: 74px; }
.lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-kepala { align-items: center; min-height: 96px; padding: 0 20px 24px; }
.lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-nama { font-size: clamp(16.5px, .3vw + 15.3px, 19px); }
.lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-isi { padding: 14px 20px 16px; }
.lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-isi p { font-size: clamp(14.5px, .25vw + 13.5px, 16px); }
.lk-halaman-pasang .lk-tambahan-judul { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: 1px; }
.lk-halaman-pasang .lk-tambahan-nama { display: flex; align-items: center; gap: 7px; font-size: clamp(17px, .35vw + 15.6px, 20px); font-weight: 700; line-height: 1.2; color: #fff; }
.lk-halaman-pasang .lk-tambahan-jempol { flex: none; width: 19px; height: 19px; color: #fff; }
.lk-halaman-pasang .lk-tambahan-terbatas { font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .9); }

/* deret ikon kanal: bulat + pemisah "+" spt referensi */
.lk-halaman-pasang .lk-tambahan-apl { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding-top: 5px; }
.lk-halaman-pasang .lk-tambahan-apl > span { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lk-tbh-bulat); }
.lk-halaman-pasang .lk-tambahan-apl svg { width: 16px; height: 16px; }
.lk-halaman-pasang .lk-tambahan-apl > span + span::before {
  content: "+"; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  color: var(--lk-tbh-bulat-garis); font-size: 13px; font-weight: 700; line-height: 1;
}
/* Warna ikon mengikuti brand tiap kanal (inline style dari App\Support\Sosial). */

/* isi: teks besar dgn sorotan berwarna aksen paket */
.lk-halaman-pasang .lk-tambahan-isi { flex: 1; padding: 0 18px 12px; }
.lk-halaman-pasang .lk-tambahan-isi p { margin: 0; font-size: clamp(15px, .35vw + 13.6px, 17px); line-height: 1.5; color: var(--lk-tbh-teks); }
.lk-halaman-pasang .lk-tambahan-isi strong { color: var(--lk-tbh-kuat); }
.lk-halaman-pasang .lk-tambahan-isi strong.lk-tambahan-sorot { color: var(--lk-tbh-sorot); }
/* kartu Custom Banner: penebalan teks tanpa warna aksen (spt referensi) */
.lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-isi strong.lk-tambahan-sorot { color: var(--lk-tbh-kuat); }
/* Teks paket tambahan kini datang dari Pengaturan Website (**tebal**), jadi
   penekanan pada kartu lebar (Sticky Post) memakai warna aksen. */
.lk-halaman-pasang .lk-tambahan-sticky .lk-tambahan-isi strong { color: var(--lk-tbh-sorot); }

/* harga: gumpalan warna yg menempel di sudut bawah (kanan utk kartu lebar) */
.lk-halaman-pasang .lk-tambahan-harga {
  position: relative; z-index: 1;
  display: grid; place-items: center; box-sizing: border-box;
  min-height: 74px; padding: 0 22px;
  background: var(--lk-tbh-blob); color: #fff;
  font-size: clamp(17px, .45vw + 15.2px, 21px); font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .18);
}
.lk-halaman-pasang .lk-tambahan-sticky .lk-tambahan-harga { align-self: flex-end; width: 190px; border-radius: 104px 0 0 0 / 84px 0 0 0; }
.lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-harga {
  min-height: 74px; padding: 22px 16px 0;
  background: none; font-size: clamp(16px, .45vw + 14.2px, 20px); text-shadow: none;
}
.lk-halaman-pasang .lk-tambahan-harga-teks { position: relative; z-index: 1; }

.lk-halaman-pasang .lk-catatan { margin: 0; font-size: 15px; font-style: italic; text-align: center; color: var(--lk-teks-redup); }
.lk-halaman-pasang .lk-catatan a { color: var(--lk-utama-cerah); font-weight: 700; }

/* layar kecil (breakpoint referensi = 768px): kartu bertumpuk & menyempit ke
   298px, ikon kanal turun ke baris sendiri spt aset mobile referensi */
@media (max-width: 768px) {
  .lk-halaman-pasang .lk-tambahan { gap: 1px; }
  .lk-halaman-pasang .lk-tambahan-grid { flex-direction: column; align-items: center; gap: 16px; }
  .lk-halaman-pasang .lk-tambahan-kartu { flex: 0 0 auto; width: min(298px, 100%); }
  .lk-halaman-pasang .lk-tambahan-sticky { min-height: 432px; }
  .lk-halaman-pasang .lk-tambahan-banner { min-height: 266px; }
  .lk-halaman-pasang .lk-tambahan-kepala { flex-direction: column; align-items: flex-start; min-height: 104px; gap: 14px; padding: 16px 16px 22px; }
  .lk-halaman-pasang .lk-tambahan-sticky .lk-tambahan-blob { width: 74%; height: 72px; }
  .lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-kepala { flex-direction: row; align-items: center; min-height: 88px; padding: 0 16px 22px; }
  .lk-halaman-pasang .lk-tambahan-wave-kepala { height: 88px; }
  .lk-halaman-pasang .lk-tambahan-wave-harga { height: 70px; }
  .lk-halaman-pasang .lk-tambahan-nama { font-size: clamp(17px, .35vw + 15.6px, 20px); }
  .lk-halaman-pasang .lk-tambahan-isi { padding: 0 16px 14px; }
  .lk-halaman-pasang .lk-tambahan-isi p { font-size: clamp(15px, .35vw + 13.6px, 17px); }
  .lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-isi { padding: 12px 16px 14px; }
  .lk-halaman-pasang .lk-tambahan-harga { min-height: 70px; font-size: clamp(17px, .45vw + 15.2px, 21px); }
  .lk-halaman-pasang .lk-tambahan-banner .lk-tambahan-harga { padding: 20px 14px 0; }
  .lk-halaman-pasang .lk-tambahan-sticky .lk-tambahan-harga { width: 172px; }
  .lk-halaman-pasang .lk-catatan { max-width: 239px; font-size: 14px; }
}

/* --- ketentuan: daftar dipotong dgn gradasi + tombol Selengkapnya --- */
.lk-halaman-pasang .lk-ketentuan-judul { margin: 0 0 12px; font-size: 22px; }
.lk-halaman-pasang .lk-ketentuan-kotak { position: relative; max-width: 1041px; margin-inline: auto; }
.lk-halaman-pasang .lk-ketentuan ol {
  margin: 0; padding-left: 26px; display: grid; gap: 8px; max-height: 240px; overflow: hidden;
  font-size: 13.5px; line-height: 1.72; color: var(--lk-teks-redup);
  -webkit-mask-image: linear-gradient(#000 0%, #000 62%, rgba(0, 0, 0, .78) 76%, rgba(0, 0, 0, .28) 91%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 62%, rgba(0, 0, 0, .78) 76%, rgba(0, 0, 0, .28) 91%, transparent 100%);
}
.lk-halaman-pasang .lk-ketentuan ol li::marker { color: var(--lk-teks-redup); font-weight: 700; }
.lk-halaman-pasang .lk-ketentuan-more { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.lk-halaman-pasang .lk-ketentuan-more a {
  display: inline-block; padding: 5px 14px 6px; border-radius: 999px;
  border: 1px solid var(--lk-garis-tegas); background: var(--lk-permukaan);
  color: var(--lk-utama-cerah); font-size: 13px; font-weight: 600;
}
.lk-halaman-pasang .lk-ketentuan-more a:hover { border-color: var(--lk-utama-cerah); }

/* --- keunggulan: ikon bulat + teks di bawahnya --- */
/* --- keunggulan: BAND selebar layar (pola #keunggulan-block referensi) —
       angka tata letak disalin apa adanya & diganti nama ke lk-unggul-*:
       padding 59/60, gap judul↔item 29, item 274×307, gap 30,
       lingkaran r=130 (260px) di tengah, busur warna di tepi bawahnya,
       ikon garis di bagian atas, teks 19px. --- */
.lk-unggul {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; margin: 48px 0 16px; padding: 43px 0 60px;
  /* tema gelap (default): resep gradasi referensi */
  background:
    radial-gradient(circle at 50% 0, rgba(119, 152, 190, .18), rgba(119, 152, 190, 0) 360px),
    radial-gradient(circle at 18% 36%, rgba(218, 169, 83, .067), rgba(218, 169, 83, 0) 250px),
    radial-gradient(circle at 83% 35%, rgba(122, 165, 224, .075), rgba(122, 165, 224, 0) 270px),
    linear-gradient(#121f30 0%, #0c1724 52%, #080f18 100%);
  box-shadow: inset 0 1px rgba(202, 218, 238, .08), inset 0 -1px rgba(150, 176, 208, .07);
}
html[data-theme="light"] .lk-unggul { padding: 59px 0 60px; background: #e9edf2; box-shadow: none; }
/* pola titik (padanan .icon-bg referensi, memakai resep dot-grid situs ini) */
.lk-unggul-bg {
  position: absolute; z-index: 1; inset: 41px 0 0 0;
  background-image: radial-gradient(circle at center, rgba(158, 190, 224, .16) 1.1px, transparent 1.9px);
  background-size: 22px 22px;
}
html[data-theme="light"] .lk-unggul-bg {
  background-image: radial-gradient(circle at center, rgba(30, 47, 68, .1) 1.1px, transparent 1.9px);
}

.lk-unggul-isi { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 29px; width: 100%; }
.lk-unggul-isi h2 { margin: 0; font-size: clamp(22px, 1.2vw + 17.3px, 28.5px); text-align: center; color: var(--lk-teks); }
.lk-unggul-ringan { font-weight: 300; color: var(--lk-utama-cerah); }
.lk-unggul-daftar {
  list-style: none; display: flex; flex-direction: row; gap: 30px;
  box-sizing: border-box; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0 16px;
  /* Bila isinya meluber (mis. jumlah keunggulan ditambah), daftar DIGESER
     mendatar — bukan terpotong. */
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scroll-padding-inline: 16px;
  scrollbar-width: thin; scrollbar-color: rgba(126, 151, 181, .38) transparent;
}
.lk-unggul-daftar > li { scroll-margin-inline: 15px; }
/* Scrollbar tipis bergaya (sebelumnya disembunyikan total → pengguna tak tahu
   daftarnya masih bisa digeser). */
.lk-unggul-daftar::-webkit-scrollbar { height: 8px; }
.lk-unggul-daftar::-webkit-scrollbar-track { background: transparent; }
.lk-unggul-daftar::-webkit-scrollbar-thumb {
  border-radius: 99px; background: rgba(126, 151, 181, .34);
}
.lk-unggul-daftar::-webkit-scrollbar-thumb:hover { background: rgba(126, 151, 181, .62); }
html[data-theme="light"] .lk-unggul-daftar { scrollbar-color: rgba(30, 47, 68, .26) transparent; }
html[data-theme="light"] .lk-unggul-daftar::-webkit-scrollbar-thumb { background: rgba(30, 47, 68, .2); }
html[data-theme="light"] .lk-unggul-daftar::-webkit-scrollbar-thumb:hover { background: rgba(30, 47, 68, .4); }
/* Petunjuk kalau daftar meluber (kelas `is-meluber` dipasang JS): kursor bisa
   diseret + tepi yang masih menyimpan isi diredupkan. */
.lk-unggul-daftar.is-meluber { cursor: grab; }
.lk-unggul-daftar.is-meluber.is-tarik { cursor: grabbing; }
.lk-unggul-daftar.is-tarik, .lk-unggul-daftar.is-tarik * { user-select: none; }
.lk-unggul-daftar.is-meluber.is-mulai {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 100%);
}
.lk-unggul-daftar.is-meluber.is-akhir {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.lk-unggul-daftar.is-meluber.is-mulai.is-akhir {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* item = lingkaran besar (r=130 pada box 274×307) + busur warna di tepi bawahnya */
.lk-unggul-daftar li {
  --lk-unggul-bundar: rgba(255, 255, 255, .045);
  --lk-unggul-cincin: rgba(151, 177, 207, .22);
  position: relative; box-sizing: border-box; display: flex;
  align-items: center; justify-content: center; text-align: center;
  flex: 0 0 auto; width: 274px; height: 307px; padding: 0 31px;
  color: var(--lk-teks);
}
.lk-unggul-daftar li:nth-child(1) { --lk-unggul-aksen: #e8b246; }
.lk-unggul-daftar li:nth-child(2) { --lk-unggul-aksen: #ef6f4d; }
.lk-unggul-daftar li:nth-child(3) { --lk-unggul-aksen: #5bc98c; }
.lk-unggul-daftar li:nth-child(4) { --lk-unggul-aksen: #5aa9e6; }
.lk-unggul-daftar li::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 10.4%;
  width: 95.2%; aspect-ratio: 1 / 1; transform: translateX(-50%);
  border-radius: 50%; background: var(--lk-unggul-bundar);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}
.lk-unggul-daftar li::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 13%;
  width: 89.4%; aspect-ratio: 1 / 1; transform: translateX(-50%);
  border: 1px solid var(--lk-unggul-cincin); border-bottom: 3px solid var(--lk-unggul-aksen, var(--lk-utama));
  border-radius: 50%;
}
html[data-theme="light"] .lk-unggul-daftar li { --lk-unggul-bundar: #fff; --lk-unggul-cincin: #e2e8f0; }
html[data-theme="light"] .lk-unggul-daftar li::before { box-shadow: 0 10px 26px rgba(30, 47, 68, .08); }
/* ikon garis (tanpa bulatan latar) di bagian atas lingkaran */
.lk-unggul-ikon {
  position: absolute; z-index: 2; left: 50%; top: 15%; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 22.6%; aspect-ratio: 1 / 1; color: var(--lk-unggul-aksen, var(--lk-utama-cerah));
}
.lk-unggul-ikon svg { width: 100%; height: 100%; }
.lk-unggul-daftar li p { position: relative; z-index: 2; margin: 70px 0 0; font-size: clamp(15px, .6vw + 12.7px, 19px); line-height: 1.5; color: var(--lk-teks); }
.lk-unggul-daftar li strong { font-weight: 700; color: var(--lk-teks); }

@media (max-width: 768px) {
  .lk-unggul { margin: 34px 0 13px; padding: 54.5px 0 52px; }
  html[data-theme="light"] .lk-unggul { padding: 54.5px 0 52px; }
  .lk-unggul-isi { gap: 25px; padding-bottom: 7px; }
  .lk-unggul-daftar { width: 100%; padding: 0 16px; gap: 18px; }
  .lk-unggul-daftar li { flex: 0 0 230px; height: 251px; padding: 0 35px; }
  /* lingkaran mengecil ke 230px → teks ikut dikecilkan agar tidak berdesakan */
  .lk-unggul-daftar li p { font-size: clamp(14px, .6vw + 11.6px, 15.6px); }
}

/* --- cara pasang lowongan: 4 langkah, ikon + nomor, tanpa kotak --- */
.lk-halaman-pasang .lk-cara-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; text-align: center; }
.lk-halaman-pasang .lk-cara-grid li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lk-halaman-pasang .lk-cara-nomor {
  position: absolute; top: -8px; left: calc(50% - 42px); z-index: 1;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(#e5bd61, #c99435); color: #162033;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 12.5px; font-weight: 700;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
}
.lk-halaman-pasang .lk-cara-ikon { width: 56px; height: 56px; color: var(--lk-utama-cerah); }
.lk-halaman-pasang .lk-cara-grid p { margin: 0; max-width: 26ch; font-size: 13.5px; line-height: 1.6; color: var(--lk-teks); }

/* ---- artikel ---- */
.lk-grid-artikel { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.lk-kartu-artikel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lk-garis); border-radius: 14px; overflow: hidden; }
.lk-kartu-artikel-badan { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lk-kartu-artikel h3 { margin: 0; font-size: 17px; }
.lk-kartu-artikel h3 a:hover { color: var(--lk-utama-gelap); }
.lk-kartu-artikel p { margin: 0; color: var(--lk-teks-redup); font-size: 13.5px; }
.lk-kartu-artikel-meta { margin-top: auto; font-size: 12.5px; color: var(--lk-teks-redup); display: flex; justify-content: space-between; }

.lk-artikel-tunggal { background: #fff; border: 1px solid var(--lk-garis); border-radius: 16px; padding: 30px; max-width: 780px; }
.lk-artikel-tunggal h1 { font-size: 28px; line-height: 1.3; margin: 0 0 10px; }
.lk-konten-artikel { font-size: 16px; }
.lk-konten-artikel p { margin: 0 0 16px; }
.lk-konten-artikel h2 { font-size: 21px; margin: 26px 0 10px; }

/* ---- footer ---- */
.lk-footer { margin-top: 60px; background: #0d1c29; color: #b9c9d8; }
.lk-footer-dalam { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; padding-block: 42px 26px; }
.lk-footer h3 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.lk-footer a { color: #b9c9d8; }
.lk-footer a:hover { color: var(--lk-aksen); }
.lk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.lk-brand-footer { display: inline-flex; gap: 10px; align-items: center; font-weight: 800; color: #fff; font-size: 18px; margin-bottom: 12px; }
.lk-sosial { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-sosial a { border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.lk-footer-bawah { border-top: 1px solid rgba(255,255,255,.1); padding-block: 16px; font-size: 13px; color: #7f93a6; }
.lk-footer-bawah .lk-wadah { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

.lk-pesan-minta { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.25); border-radius: 12px; padding: 14px; margin-top: 14px; font-size: 12.5px; }

/* ---- ikon media sosial (dipakai footer, kartu paket, & tab saluran) ---- */
.lk-ikon-sosmed {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 10px;
  color: #fff; font-weight: 800; font-size: 17px;
}

/* ---- area iklan (placeholder / google ads) ---- */
.lk-iklan { margin: 30px auto; text-align: center; max-width: 100%; }
.lk-iklan-samping { margin: 24px auto 0; max-width: 100%; }
.lk-iklan-palsu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; max-width: 728px; min-height: 130px; margin: 0 auto; padding: 14px;
  border: 2px dashed var(--lk-garis-tegas, #c3d1e0); border-radius: 12px;
  background: repeating-linear-gradient(45deg, #fff, #fff 12px, #fafbfd 12px, #fafbfd 24px);
  color: var(--lk-teks-redup); text-align: center;
}
.lk-iklan-palsu strong { font-size: 15px; color: var(--lk-teks); }
.lk-iklan-palsu small { font-size: 11px; opacity: 0.8; }
.lk-iklan-samping .lk-iklan-palsu { max-width: 300px; min-height: 250px; }

/* Unit AdSense WAJIB mengikuti lebar wadahnya di semua ukuran layar.
   Unit berlebar tetap dari Google (mis. 320px) bisa lebih lebar dari wadah
   ber-padding 16px di ponsel sempit → halaman jadi bisa digulir ke samping
   (terukur sebelum perbaikan: /lowongan di 320–390px, iklan 320px di wadah
   288px) dan unit di kolom samping melebar keluar kolomnya (232px).
   `width/max-width` di bawah menyelesaikannya TANPA memotong atau menutupi
   iklan — menutupi iklan = pelanggaran kebijakan AdSense, jadi jangan pakai
   `overflow: hidden` pada wadah iklan. */
.lk-iklan ins.adsbygoogle { display: block; width: 100%; max-width: 100%; }
.lk-iklan iframe { max-width: 100%; }

@media (max-width: 420px) {
  /* Layar sempit: margin luar dirapatkan & iklan bawah dapat ruang lebih lebar. */
  .lk-iklan { margin: 20px auto; }
  .lk-wadah.lk-iklan-bawah { padding-inline: 8px; }
}

/* ---- media sosial: ikon & warna brand asli ---- */
.lk-ikon-sosmed svg { width: 20px; height: 20px; }
.lk-sosial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; padding: 0; border: 0; color: #fff;
}
.lk-sosial a svg { width: 17px; height: 17px; }
.lk-sosial a:hover { opacity: 0.92; transform: translateY(-2px); }
.lk-btn-sosmed,
.lk-bagikan .lk-btn-sosmed {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff !important; font-weight: 600; font-size: 13px;
  padding: 9px 13px; border-radius: 10px; border: 0; text-decoration: none;
}
.lk-btn-sosmed svg { width: 16px; height: 16px; }
.lk-btn-sosmed:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============================================================================
   HOMEPAGE ala referensi — 2 kolom (daftar kiri + menu kanan)
   ========================================================================== */
.lk-home-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 24px 26px; border-radius: 16px; color: #fff;
  background:
    radial-gradient(620px 220px at 90% -60px, rgba(218, 151, 34, 0.45), transparent 60%),
    linear-gradient(135deg, #15283c 0%, #0c1c2a 100%);
}
.lk-home-hero h1 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 27px); color: #fff; line-height: 1.25; }
.lk-home-hero p { margin: 0; max-width: 640px; color: #bcd0e1; font-size: 14px; }

.lk-home-tata { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; padding-top: 22px; }
/* Item grid tidak boleh dipaksa melebar oleh isinya. Tanpa `min-width: 0`,
   isi berlebar tetap (mis. unit iklan dari AdSense) bisa memperlebar kolom grid
   → `.lk-home-tata` meluber di ponsel. Iklan bawah beranda juga sengaja ditaruh
   di LUAR grid ini (lihat resources/views/home.blade.php). */
.lk-home-tata > * { min-width: 0; }
.lk-home-list { min-width: 0; display: grid; align-content: start; }

.lk-tab-ketuk { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.lk-tab-ketuk a {
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--lk-teks);
  background: #fff; border: 1px solid var(--lk-garis, #dce5ef); border-radius: 999px;
}
.lk-tab-ketuk a:hover { color: var(--lk-utama-gelap, #b87714); border-color: var(--lk-utama, #da9722); }
.lk-tab-ketuk a.lk-tab-aktif { background: var(--lk-utama, #da9722); border-color: var(--lk-utama, #da9722); color: #fff; }

.lk-blok-judul { margin: 24px 0 12px; font-size: 21px; }
.lk-kosong { color: var(--lk-teks-redup); background: #fff; border: 1px dashed var(--lk-garis); border-radius: 12px; padding: 22px; text-align: center; }

.lk-daftar-loker { display: grid; gap: 12px; }
.lk-item-loker {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--lk-garis); border-radius: 12px; padding: 13px 16px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.lk-item-loker:hover { box-shadow: var(--lk-bayangan, 0 6px 18px rgba(30,47,68,.08)); transform: translateY(-1px); }
.lk-item-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--lk-utama-muda, #fbeed7); color: var(--lk-utama-gelap, #b87714); font-weight: 800; }
.lk-item-isi { min-width: 0; }
.lk-item-judul { margin: 0 0 2px; font-size: 16px; line-height: 1.35; }
.lk-item-judul a:hover { color: var(--lk-utama-gelap, #b87714); }
.lk-item-perusahaan { font-size: 13px; color: var(--lk-teks-redup, #64748b); font-weight: 600; }
.lk-item-waktu { font-weight: 400; font-size: 12px; }
.lk-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.lk-item-lokasi { font-size: 12.5px; color: var(--lk-teks-redup, #64748b); }
.lk-item-gaji { color: var(--lk-utama-gelap, #b87714); font-weight: 700; font-size: 14px; white-space: nowrap; }

.lk-nav-laman { margin-top: 18px; text-align: right; }
.lk-nav-laman a { font-weight: 700; color: var(--lk-utama-gelap, #b87714); }

.lk-home-samping { display: grid; gap: 14px; position: sticky; top: 88px; }
.lk-menu-blok { background: #fff; border: 1px solid var(--lk-garis, #dce5ef); border-radius: 14px; padding: 16px; }
.lk-menu-blok h2 { margin: 0 0 10px; font-size: 15px; }
.lk-menu-blok ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lk-menu-blok li a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; color: var(--lk-teks, #1e2f44); }
.lk-menu-blok li a:hover { background: var(--lk-utama-muda, #fbeed7); color: var(--lk-utama-gelap, #b87714); }
.lk-menu-blok .lk-lain { font-weight: 700; color: var(--lk-utama-gelap, #b87714); }
.lk-widget-teks p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--lk-teks-redup, #64748b); }
.lk-widget-teks p a { color: var(--lk-utama-gelap, #b87714); font-weight: 600; }

.lk-ig-boks { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--lk-garis, #dce5ef); border-radius: 14px; padding: 14px 16px; }
.lk-ig-boks:hover { border-color: #e1306c; }
.lk-ig-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: #fff; flex: none; }
.lk-ig-ikon svg { width: 22px; height: 22px; }
.lk-ig-boks strong { display: block; font-size: 14px; color: var(--lk-teks, #1e2f44); }
.lk-ig-boks small { color: var(--lk-teks-redup, #64748b); }

@media (max-width: 960px) {
  .lk-home-tata { grid-template-columns: 1fr; }
  .lk-home-samping { position: static; }
}
@media (max-width: 640px) {
  .lk-item-loker { grid-template-columns: auto 1fr; }
  .lk-item-gaji { grid-column: 2; }
}

/* ============================================================================
   BERANDA ala referensi loker-v2 — HERO + SEO + pencarian + rekomendasi
   ========================================================================== */
.lk-hero-loker {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: 40px 0 34px;
  background:
    radial-gradient(720px 300px at 88% -120px, rgba(218, 151, 34, 0.5), transparent 62%),
    radial-gradient(560px 320px at -80px 120%, rgba(38, 74, 110, 0.4), transparent 62%),
    linear-gradient(150deg, #1c3046 0%, #0b1b2a 74%);
}
.lk-eyebrow {
  margin: 0 0 6px; color: #f2b13c; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.lk-hero-teks h1 {
  margin: 0 0 10px; font-size: clamp(28px, 4.6vw, 50px);
  line-height: 1.08; color: #fff;
}
.lk-hero-teks h1 > span { color: #f6b83d; }
.lk-hero-teks h1 .lk-area {
  font-style: normal; color: #fff; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); padding: 0 0.28em;
}
.lk-lead { margin: 0 0 18px; max-width: 760px; color: #c7d6e4; font-size: 16px; line-height: 1.7; }
.lk-tombol-selengkapnya {
  margin-left: 6px; padding: 5px 14px; font: inherit; font-size: 14px; font-weight: 700;
  color: #f6b83d; background: rgba(218, 151, 34, 0.16); border: 1px solid rgba(218, 151, 34, 0.6);
  border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.lk-tombol-selengkapnya:hover { background: rgba(218, 151, 34, 0.32); color: #ffe1ad; }
.lk-seo-beranda { margin-top: 4px; }
.lk-seo-beranda[hidden] { display: none; }
.lk-seo-isi {
  max-height: 420px; overflow: auto; margin: 4px 0 18px; padding: 18px 22px 12px;
  color: #d5e1ed; font-size: 14.5px; line-height: 1.8;
  background: rgba(8, 18, 28, 0.45); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px;
}
.lk-seo-isi h2 { margin: 22px 0 4px; color: #fff; font-size: 20px; }
.lk-seo-isi h2:first-child { margin-top: 0; }
.lk-seo-isi h3 { margin: 16px 0 2px; color: #f6b83d; font-size: 16px; }
.lk-seo-isi p { margin: 0 0 10px; }
.lk-seo-isi a { color: #f6b83d; text-decoration: underline; }
.lk-seo-isi ul { margin: 4px 0 0; padding-left: 20px; }
.lk-hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.lk-tombol-luar { color: #fff; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.38); }
.lk-tombol-luar:hover { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: #fff; }

/* kartu pencarian & filter */
.lk-pencarian {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(2, minmax(150px, 1fr)) auto;
  gap: 12px 14px; align-items: end;
  margin-top: 26px; padding: 16px 18px 18px;
  background: #fff; border: 1px solid #e2eaf2; border-radius: 18px;
  box-shadow: 0 18px 40px rgba(8, 20, 32, 0.16), inset 0 1px 0 #fff;
}
.lk-pencarian label { display: grid; gap: 5px; min-width: 0; }
.lk-pencarian label > span,
.lk-pencarian legend {
  font-size: 12px; font-weight: 700; color: var(--lk-teks-redup);
  letter-spacing: 0.02em; padding: 0;
}
.lk-pencarian input[type="search"],
.lk-pencarian select {
  height: 44px; width: 100%; padding: 0 12px; font: inherit; font-size: 14.5px;
  color: var(--lk-teks); background: #f8fbff;
  border: 1px solid var(--lk-garis); border-radius: 10px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lk-pencarian input[type="search"]:hover,
.lk-pencarian select:hover { border-color: #e4bd7f; }
.lk-pencarian input[type="search"]:focus,
.lk-pencarian select:focus { border-color: var(--lk-utama); box-shadow: var(--lk-bayangan-fokus); }
.lk-submit-cari {
  height: 44px; padding: 0 24px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #e3a735, #c98517);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(218, 151, 34, 0.28);
  transition: filter 0.15s ease, transform 0.1s ease;
}
.lk-submit-cari:hover { filter: brightness(1.05); }
.lk-submit-cari:active { transform: translateY(1px); }

.lk-pchip { grid-column: 1 / -1; border: 0; margin: 2px 0 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.lk-pchip-pilihan { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-pchip label { display: inline-flex; }
.lk-pchip input { position: absolute; opacity: 0; pointer-events: none; }
.lk-pchip label span {
  display: inline-block; cursor: pointer; padding: 7px 14px;
  width:100%;
  text-align: center; white-space: nowrap; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--lk-teks-redup);
  background: #fff; border: 1px solid var(--lk-garis); border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lk-pchip label:hover span { border-color: #f0c67e; color: var(--lk-utama-gelap); }
.lk-pchip input:checked + span { background: var(--lk-utama); border-color: var(--lk-utama); color: #fff; }
.lk-pchip input:focus-visible + span { box-shadow: var(--lk-bayangan-fokus); }

/* kepala blok + baris rekomendasi */
.lk-blok-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lk-blok-head .lk-blok-judul { margin: 26px 0 12px; }
.lk-lihat-semua { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--lk-utama-gelap); white-space: nowrap; }
.lk-lihat-semua:hover { text-decoration: underline; }
.lk-blok-rekomendasi { padding-top: 4px; }

.lk-rekomendasi {
  display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 14px;
  overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
/* Baris rekomendasi bisa difokuskan (digeser pakai tombol panah keyboard); auto-scroll
   ada di skrip home.blade.php dan otomatis mati begitu pengunjung berinteraksi. */
.lk-rekomendasi:focus-visible { outline: 2px solid var(--lk-utama); outline-offset: 2px; }
.lk-mini-loker {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--lk-garis); border-radius: 16px;
  padding: 15px 16px 13px; box-shadow: var(--lk-bayangan);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lk-mini-loker:hover {
  transform: translateY(-2px); border-color: #eccf96;
  box-shadow: 0 12px 26px rgba(30, 47, 68, 0.1);
}
.lk-mini-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lk-mini-badge {
  font-size: 11px; font-weight: 700; color: #7a5a16;
  background: var(--lk-utama-muda); border: 1px solid #f0d9ac;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.lk-mini-badge-urgent { color: #fff; background: #d43d3d; border-color: #d43d3d; }
.lk-mini-avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 10px; background: #eef3f8; color: var(--lk-teks-redup);
  font-size: 12px; font-weight: 800;
}
.lk-mini-judul { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.lk-mini-judul a { color: var(--lk-teks); }
.lk-mini-judul a:hover { color: var(--lk-utama-gelap); }
.lk-mini-perusahaan { margin: 0; font-size: 13px; font-weight: 600; color: var(--lk-teks-redup); }
.lk-mini-meta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lk-mini-meta li {
  font-size: 11.5px; color: var(--lk-teks-redup);
  background: #f2f6fb; border: 1px solid var(--lk-garis);
  border-radius: 999px; padding: 2px 8px;
}
.lk-mini-kaki {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px dashed var(--lk-garis); padding-top: 9px;
}
.lk-mini-kaki time { font-size: 12px; color: var(--lk-teks-redup); }
.lk-mini-gaji { font-size: 12.5px; font-weight: 800; color: var(--lk-utama-gelap); text-align: right; }

.lk-iklan-bawah { margin-top: 10px; }

@media (max-width: 980px) {
  .lk-pencarian { grid-template-columns: 1fr 1fr; }
  .lk-submit-cari { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lk-pencarian { grid-template-columns: 1fr; }
  .lk-submit-cari { grid-column: auto; width: 100%; }
  .lk-hero-loker { padding-top: 30px; }
  .lk-rekomendasi { grid-auto-columns: minmax(196px, 78vw); }
}

/* ---- responsif ---- */
@media (max-width: 980px) {
  .lk-tata-luar { grid-template-columns: 1fr; }
  .lk-samping { position: static; }
}

@media (max-width: 860px) {
  .lk-hamburger { display: inline-flex; margin-left: auto; cursor: pointer; padding: 8px; }
  .lk-hamburger span { display: block; width: 22px; height: 2px; background: var(--lk-teks); margin: 5px 0; border-radius: 2px; transition: .2s; }
  .lk-nav { display: none; width: 100%; margin: 0 0 14px; }
  #lk-nav-toggle:checked ~ .lk-header-dalam .lk-nav { display: block; }
  .lk-nav ul { flex-direction: column; align-items: stretch; }
  .lk-nav-item { position: static; }
  .lk-nav-turun { position: static; visibility: visible; opacity: 1; pointer-events: auto; transform: none; display: block; box-shadow: none; border: 0; padding: 6px 0 0 12px; border-radius: 0; transition: none; }
  .lk-nav-kol { padding-left: 0; }
  .lk-cta-pasang { margin: 4px 0 0; }
  .lk-header-dalam { flex-wrap: wrap; padding-block: 8px; }
  .lk-cari { grid-template-columns: 1fr; }
  .lk-footer-dalam { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .lk-footer-dalam { grid-template-columns: 1fr; }
  .lk-topbar-kanan { display: none; }
}

/* ============================================================================
   TEMA GELAP (meniru loker-v2 data-theme=dark; aksen tetap oranye #da9722)
   ========================================================================== */
:root {
  --lk-teks: #e8eef5;
  --lk-teks-redup: #9aa7b7;
  --lk-latar: #080b10;
  --lk-permukaan: #111923;
  --lk-garis: rgba(126, 151, 181, 0.2);
  --lk-garis-tegas: rgba(142, 165, 190, 0.34);
  --lk-utama-muda: rgba(218, 151, 34, 0.16);
  --lk-bayangan: 0 10px 26px rgba(0, 0, 0, 0.25);
  --lk-utama-cerah: #f0b24b;
}

body { background: #080b10; color: var(--lk-teks); }
h1, h2, h3, h4, h5, h6 { color: #eef3f8; }
::selection { background: rgba(218, 151, 34, 0.35); }

/* topbar & header */
.lk-topbar { background: #060a0f; color: #94a1b2; }
.lk-header { background: #0a1118; border-bottom-color: rgba(126, 151, 181, 0.16); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.lk-nav a, .lk-nav button { color: #dbe5ee; }
.lk-nav a:hover, .lk-nav button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.lk-nav-turun { background: #141e29; border-bottom-color: rgba(126, 151, 181, 0.2); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5); }
.lk-nav-turun .lk-judul-mini { color: #8fa0b3; }
.lk-nav-turun .lk-nav-kol a:hover { background: rgba(218, 151, 34, 0.16); color: #f6c76a; }
.lk-brand { color: #eef3f8; }
.lk-brand:hover { color: #f0b24b; }

/* kartu & permukaan umum */
.lk-cari { background: #141e29; }
.lk-kartu-loker, .lk-kartu-artikel, .lk-kartu-paket, .lk-langkah li,
.lk-samping, .lk-menu-blok, .lk-item-loker, .lk-mini-loker,
.lk-detail, .lk-artikel-tunggal, .lk-kosong,
.lk-bagikan a, .lk-ringkasan > div {
  background: #111923;
  border-color: rgba(126, 151, 181, 0.2);
}
.lk-kartu-loker:hover, .lk-mini-loker:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
.lk-mini-loker:hover, .lk-kartu-paket-unggulan { border-color: rgba(218, 151, 34, 0.55); }
.lk-ringkasan > div:nth-child(odd) { background: #182333; }
.lk-kosong { border-color: rgba(126, 151, 181, 0.25); }

/* kartu pencarian & filter (homepage) */
.lk-pencarian { background: #141e29; border-color: rgba(126, 151, 181, 0.22); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.lk-pencarian input[type="search"],
.lk-pencarian select,
.lk-pchip label span {
  background: #101821; border-color: rgba(126, 151, 181, 0.28); color: #dbe5ee;
}
.lk-pencarian input[type="search"]::placeholder { color: #758293; }
.lk-pencarian select option { background: #101821; color: #e8eef5; }
.lk-pencarian input[type="search"]:hover, .lk-pencarian select:hover { border-color: rgba(218, 151, 34, 0.55); }
.lk-pchip label:hover span { border-color: rgba(218, 151, 34, 0.6); color: #f0b24b; }
.lk-pchip input:checked + span { background: var(--lk-utama); border-color: var(--lk-utama); color: #fff; }

/* item & rekomendasi */
.lk-item-avatar, .lk-mini-avatar { background: #182333; color: #f0b24b; }
.lk-item-gaji, .lk-mini-gaji, .lk-paket-harga, .lk-nav-laman a, .lk-lihat-semua,
.lk-remah a:hover, .lk-petunjuk .lk-gaji {
  color: #f0b24b;
}
.lk-item-loker:hover { border-color: rgba(218, 151, 34, 0.45); }
.lk-item-judul a:hover, .lk-mini-judul a:hover, .lk-kartu-judul a:hover,
.lk-kartu-artikel h3 a:hover { color: #f0b24b; }

/* label / chips info (x-job-item & detail) */
.lk-label-status { background: #1a2533; color: #9fb0c3; }
.lk-label-urgent { background: rgba(242, 75, 75, 0.16); color: #ff8b8b; }
.lk-label-fitur { background: rgba(218, 151, 34, 0.18); color: #ffd9a0; }
.lk-mini-badge { background: rgba(218, 151, 34, 0.16); border-color: rgba(218, 151, 34, 0.42); color: #ffd9a0; }
.lk-mini-meta li { background: #182333; color: #9fb0c3; }
.lk-mini-kaki { border-top-color: rgba(126, 151, 181, 0.18); }

/* menu samping / kategori */
.lk-menu-blok h2 { color: #eef3f8; }
.lk-menu-blok li a, .lk-daftar-link a { color: #cbd5e0; }
.lk-menu-blok li a:hover, .lk-daftar-link a:hover { background: rgba(218, 151, 34, 0.14); color: #f6c76a; }
.lk-menu-blok .lk-lain { color: #f0b24b; }
.lk-filter-grup h3 { color: #9fb0c3; }

/* tombol & aksen teks */
.lk-tombol-utama { background: var(--lk-utama); border-color: var(--lk-utama); }
.lk-tombol-utama:hover { background: #b87714; border-color: #b87714; }
.lk-tombol-kedua { color: #f0b24b; background: transparent; border-color: rgba(218, 151, 34, 0.55); }
.lk-tombol-kedua:hover { background: rgba(218, 151, 34, 0.14); }
.lk-tombol-datar { color: #9fb0c3; }
.lk-tombol-datar:hover { color: #e8eef5; background: rgba(255, 255, 255, 0.07); }

/* hero (compact, mirip live) */
.lk-hero-loker {
  background:
    radial-gradient(720px 300px at 88% -120px, rgba(218, 151, 34, 0.28), transparent 62%),
    radial-gradient(560px 320px at -80px 120%, rgba(64, 112, 172, 0.16), transparent 62%),
    linear-gradient(180deg, #0b141d 0%, #0a1118 74%);
}
.lk-seo-isi { background: rgba(8, 11, 16, 0.6); border-color: rgba(126, 151, 181, 0.18); }
.lk-tombol-selengkapnya { color: #f6c76a; border-color: rgba(218, 151, 34, 0.6); background: rgba(218, 151, 34, 0.14); }

/* detail / kotak lamar / artikel / paket */
.lk-kotak-lamar { background: rgba(218, 151, 34, 0.12); border-color: rgba(218, 151, 34, 0.4); }
.lk-kotak-lamar p, .lk-kotak-lamar h2 { color: #eef3f8; }
.lk-bagikan a:hover { border-color: rgba(218, 151, 34, 0.6); color: #f0b24b; }
.lk-langkah li::before { background: rgba(218, 151, 34, 0.18); color: #ffd9a0; }
.lk-paket-tagline, .lk-paket-harga small { color: #9fb0c3; }
.lk-paket-fitur li::before { color: #f0b24b; }
.lk-seksi-cta { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
.lk-remah li + li::before { color: #5d6f82; }

/* placeholder iklan */
.lk-iklan-palsu {
  border-color: rgba(126, 151, 181, 0.28);
  background: repeating-linear-gradient(45deg, #111923, #111923 12px, #141e29 12px, #141e29 24px);
  color: #9aa7b7;
}
.lk-iklan-palsu strong { color: #cbd5e0; }

/* scrollbar */
.lk-seo-isi { scrollbar-color: #3a4a5e transparent; }

/* footer sedikit selaras */
.lk-footer { background: #070b10; border-top: 1px solid rgba(126, 151, 181, 0.12); }

/* ============================================================================
   KARTU REKOMENDASI v2 — poster + baris meta (meniru kartu rekomendasi live)
   ========================================================================== */
.lk-rekomendasi { grid-auto-columns: 245px; }

.lk-mini-loker {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lk-permukaan, #111923);
  border: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.2));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lk-mini-loker:hover {
  transform: translateY(-3px);
  border-color: rgba(218, 151, 34, 0.55);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
}
.lk-mini-link { display: block; color: inherit; }

/* poster 219:126 (rasio gambar referensi) */
.lk-mini-poster {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--lk-rasio-lowongan, 219 / 126);
  background:
    radial-gradient(130% 150% at 88% -18%, rgba(218, 151, 34, 0.4), transparent 56%),
    radial-gradient(120% 120% at -10% 120%, rgba(64, 112, 172, 0.28), transparent 55%),
    linear-gradient(135deg, #1d3147 0%, #0b1a28 100%);
}
.lk-mini-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #7a5a16;
  background: rgba(255, 244, 224, 0.94);
  border: 1px solid rgba(218, 151, 34, 0.5);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.lk-mini-badge-urgent { color: #fff; background: #d43d3d; border-color: #d43d3d; }
.lk-mini-inisial {
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.lk-mini-isi { padding: 12px 13px 11px; }

.lk-mini-judul {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--lk-teks, #e8eef5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-mini-judul a { color: inherit; }

.lk-mini-meta {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lk-mini-meta li {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--lk-teks-redup, #9aa7b7);
  border-top: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.18));
  padding: 5px 0 4px;
}
.lk-mini-m-perusahaan { font-weight: 700; color: var(--lk-teks, #e8eef5); font-size: 13.5px; }
.lk-mini-m-baris { justify-content: space-between; gap: 12px; }
.lk-mini-m-baris span:last-child { white-space: nowrap; }
.lk-mini-m-lokasi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lk-mini-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--lk-garis, rgba(126, 151, 181, 0.18));
  font-size: 11.5px;
  color: var(--lk-teks-redup, #9aa7b7);
}
.lk-mini-gaji { font-weight: 800; color: #f0b24b; text-align: right; }

/* skala judul blok */
.lk-blok-judul { font-size: 24px; font-weight: 600; letter-spacing: 0.1px; }
.lk-home-list .lk-blok-judul { margin-top: 22px; }

/* ============================================================================
   SEARCHBAR v2 — tiru persis #search-block loker-v2 (field garis-bawah + Fredoka)
   ========================================================================== */
.lk-pencarian {
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr auto;
  gap: 2px 22px;
  align-items: end;
  padding: 6px 22px 16px;
  border-radius: 20px;
  border: 1px solid rgba(155, 178, 206, 0.15);
  background: linear-gradient(rgba(22, 36, 52, 0.92) 0%, rgba(14, 26, 40, 0.96) 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.04);
}
.lk-pencarian label { display: block; flex:1; min-width: 0; }

/* field: tanpa kotak, hanya garis bawah 2px */
.lk-pencarian input[type="search"],
.lk-pencarian select {
  height: 40px;
  width: 100%;
  padding: 0 6px 4px;
  border: 0;
  border-bottom: 2px solid rgba(126, 151, 181, 0.3);
  border-radius: 0;
  background: transparent;
  color: #eef3f8;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: normal;
  outline: none;
  transition: border-color 0.25s ease;
}
.lk-pencarian input[type="search"]::placeholder { color: #9fb0c3; opacity: 1; }
.lk-pencarian input[type="search"]:hover,
.lk-pencarian select:hover,
.lk-pencarian input[type="search"]:focus,
.lk-pencarian select:focus { border-bottom-color: #e8a93c; }
.lk-pencarian select option { background: #101821; color: #eef3f8; }

/* tombol Cari + ikon kaca pembesar */
.lk-submit-cari {
  height: 40px;
  padding: 0 18px 0 44px;
  border: 0;
  border-radius: 10px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>") no-repeat 14px center / 20px 20px,
    linear-gradient(135deg, #e3a735, #c98517);
  color: #fff;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 19px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: filter 0.15s ease;
}
.lk-submit-cari:hover { filter: brightness(1.06); }

/* baris chips pengalaman (baris kedua penuh) */
.lk-pchip { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; border: 0; min-width: 0; }
.lk-pchip-pilihan { display: flex; flex-wrap: wrap; gap: 20px; margin-top:20px; }
.lk-pchip label { display: inline-flex; width: 100%; }
.lk-pchip input { position: absolute; opacity: 0; pointer-events: none; }
.lk-pchip label span {
  display: inline-block;
  cursor: pointer;
  padding: 7px 15px 5px;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: #9fb0c3;
  background: rgba(9, 15, 22, 0.4);
  border: 1px solid rgba(126, 151, 181, 0.3);
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lk-pchip label:hover span { border-color: rgba(232, 169, 60, 0.7); color: #fff; }
.lk-pchip input:checked + span { color: #fff; background: rgba(218, 151, 34, 0.22); border-color: #da9722; }
.lk-pchip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(218, 151, 34, 0.28); }

@media (max-width: 980px) {
  .lk-pencarian { grid-template-columns: 1fr 1fr; }
  .lk-pencarian .lk-pcari { grid-column: 1 / -1; }
  .lk-submit-cari { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lk-pencarian { grid-template-columns: 1fr; padding-inline: 16px; }
}

/* ============================================================================
   KARTU REKOMENDASI v3 — samakan dgn live (badge+judul → logo putih → baris meta)
   ========================================================================== */
.lk-rek {
  scroll-snap-align: start;
  background: var(--lk-permukaan, #111923);
  border: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.2));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lk-rek:hover {
  transform: translateY(-3px);
  border-color: rgba(218, 151, 34, 0.55);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
}
.lk-rek-link { display: block; padding: 13px 13px 12px; color: inherit; }

.lk-rek-badge {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #8fa0b3;
}
.lk-rek-badge-urgent { color: #f0b24b; }

.lk-rek-judul {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.22;
  color: #eef3f8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}

/* kotak logo putih 219:126 (seperti gambar/poster referensi) */
.lk-rek-logo {
  width: 100%;
  aspect-ratio: var(--lk-rasio-lowongan, 219 / 126);
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #24354b;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.lk-rek-meta { margin: 10px 0 0; }
.lk-rek-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0 5px;
  border-top: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.16));
  font-size: 12.5px;
  color: #9fb0c3;
}
.lk-rek-row::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: center / contain no-repeat;
  opacity: 0.9;
}
.lk-rek-perusahaan { font-weight: 700; color: #e8eef5; font-size: 13.5px; }
.lk-rek-perusahaan::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16'/><path d='M9 7h2M9 11h2M9 15h2M13 7h2M13 11h2M13 15h2'/></svg>");
}
.lk-rek-baris { justify-content: space-between; gap: 12px; }
.lk-rek-pendidikan::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 9 12 4 2 9l10 5 10-5z'/><path d='M6 11.5V16c0 1.1 2.2 2 6 2s6-.9 6-2v-4.5'/><path d='M20 9v5'/></svg>");
}
.lk-rek-pengalaman::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/><path d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/></svg>");
}
.lk-rek-lokasi::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.lk-rek-baris .lk-rek-pengalaman { white-space: nowrap; }
.lk-rek-lokasi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================================
   PERBAIKAN: pastikan ikon di baris kartu rekomendasi benar-benar tampil
   ========================================================================== */
.lk-rek-row::before { display: none; }

.lk-rek-perusahaan,
.lk-rek-pendidikan,
.lk-rek-pengalaman,
.lk-rek-lokasi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.lk-rek-perusahaan::before,
.lk-rek-pendidikan::before,
.lk-rek-pengalaman::before,
.lk-rek-lokasi::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.95;
}

/* ============================================================================
   Ikon kartu rekomendasi → pakai <svg> inline (paling andal & terlihat)
   ========================================================================== */
.lk-rek-perusahaan::before,
.lk-rek-pendidikan::before,
.lk-rek-pengalaman::before,
.lk-rek-lokasi::before,
.lk-rek-row::before { display: none; }

.lk-rek-ikon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #aebccd;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lk-rek-perusahaan .lk-rek-ikon { stroke: #f0b24b; }

/* ============================================================================
   HERO v2 — samakan dgn live: judul "Portal Lowongan Kerja Yogyakarta" + subtitle
   ========================================================================== */
.lk-hero-teks h1 { color: #fff; }
.lk-hero-teks h1 .lk-eyebrow {
  display: inline;
  margin: 0;
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}
.lk-hero-teks h1 > span { color: #fff; }
.lk-hero-teks h1 .lk-area {
  font-style: normal;
  white-space: nowrap;
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
}
.lk-lead { font-size: 19px; color: #a9b8c8; }

/* ============================================================================
   FONT WEIGHT selaras referensi loker-v2 (Fredoka 500 utk judul, bobot lebih ringan)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
.lk-blok-judul { font-weight: 500; }
.lk-rek-judul { font-weight: 500; }
.lk-hero-teks h1 .lk-eyebrow { font-weight: 500; }
.lk-tombol, .lk-nav a, .lk-nav button, .lk-tombol-selengkapnya { font-weight: 500; }
.lk-submit-cari { font-weight: 500; }

/* ============================================================================
   KARTU LOWONGAN TERBARU (x-job-item) — samakan dgn kartu besar referensi
   ========================================================================== */
.lk-posting {
  background: #111923;
  border: 1px solid rgba(126, 151, 181, 0.2);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lk-posting:hover {
  transform: translateY(-2px);
  border-color: rgba(218, 151, 34, 0.5);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
}
.lk-posting-link {
  display: flex;
  gap: 16px;
  padding: 13px;
  color: inherit;
}

/* kotak logo putih 219:126 (poster referensi) */
.lk-posting-logo {
  flex: none;
  width: 218px;
  aspect-ratio: var(--lk-rasio-lowongan, 219 / 126);
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #24354b;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.lk-posting-isi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0;
}
.lk-posting-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lk-posting-badge { font-size: 13px; font-weight: 500; color: #8fa0b3; }
.lk-posting-badge-urgent { color: #f0b24b; font-weight: 600; }
.lk-posting-waktu { font-size: 12px; color: #8fa0b3; }

.lk-posting-judul {
  margin: 2px 0 4px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lk-posting-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 7px 0 6px;
}
.lk-posting-row1 {
  border-top: 1px solid rgba(126, 151, 181, 0.16);
  justify-content: space-between;
}
.lk-posting-perusahaan {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14.5px;
  color: #e8eef5;
}
.lk-posting-gaji { font-weight: 600; color: #f0b24b; white-space: nowrap; }
.lk-posting-row2 { padding-top: 2px; }
.lk-posting-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #aebccc;
}
.lk-posting-ikon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #aebccd;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lk-posting-perusahaan .lk-posting-ikon { stroke: #f0b24b; }

@media (max-width: 900px) {
  .lk-posting-logo { width: 150px; }
}
@media (max-width: 640px) {
  .lk-posting-link { flex-direction: column; align-items: stretch; }
  .lk-posting-logo { width: 100%; }
}

/* ikon jam di timestamp kartu lowongan terbaru */
.lk-posting-waktu { display: inline-flex; align-items: center; gap: 5px; }
.lk-posting-ikon-waktu {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #8fa0b3;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================
   SIDEBAR ala referensi: Riwayat/Simpan + blok filter (garis pemisah)
   ========================================================================== */
.lk-riwayat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #111923;
  border: 1px solid rgba(126, 151, 181, 0.2);
  border-radius: 12px;
}
.lk-riwayat-tab {
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: #8fa0b3;
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.lk-riwayat-tab:hover { color: #e8eef5; }
.lk-riwayat-tab.lk-riwayat-aktif { color: #f0b24b; }
.lk-riwayat-pisah { width: 1px; height: 16px; background: rgba(126, 151, 181, 0.32); }
.lk-riwayat-panel { display: none; }
.lk-riwayat-panel.lk-riwayat-panel-aktif { display: block; }
.lk-riwayat-kosong {
  margin: 0;
  padding: 12px 14px;
  background: #111923;
  border: 1px dashed rgba(126, 151, 181, 0.25);
  border-radius: 12px;
  font-size: 13px;
  color: #9fb0c3;
  text-align: center;
}

.lk-kategori { display: grid; gap: 12px; }
.lk-blok-kategori {
  background: #111923;
  border: 1px solid rgba(126, 151, 181, 0.2);
  border-radius: 12px;
  padding: 14px 16px 6px;
}
.lk-blok-kategori h2 {
  margin: 0 0 2px;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}
.lk-daftar-kategori { list-style: none; margin: 0; padding: 0; }
.lk-daftar-kategori li { border-top: 1px solid rgba(126, 151, 181, 0.14); }
.lk-daftar-kategori a {
  display: block;
  padding: 9px 2px;
  font-size: 13.5px;
  color: #cbd5e0;
  transition: color 0.15s ease;
}
.lk-daftar-kategori a:hover { color: #f0b24b; }
.lk-kategori-lain a { color: #f0b24b; font-weight: 600; }

/* ============================================================================
   SIDEBAR filter — SATU wrapper + border kiri (tanpa kartu terpisah, ala referensi)
   ========================================================================== */
.lk-kategori {
  display: block;
  border-left: 2px solid rgba(126, 151, 181, 0.28);
  padding: 0 0 2px 16px;
}
.lk-blok-kategori {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.lk-blok-kategori + .lk-blok-kategori { margin-top: 16px; }
.lk-blok-kategori h2 { margin: 0 0 2px; padding: 4px 0 6px; }
.lk-daftar-kategori a { padding: 8px 2px; }

/* ---- Akordeon grup filter sidebar ----
   Setiap grup (Profesi/Pendidikan/Pengalaman/Lokasi) bisa dilipat. TAMPILAN
   SENGAJA TIDAK BERUBAH: tanpa kartu/border/pemisah baru — hanya judulnya jadi
   tombol selebar kolom + panah penanda, dan jaraknya sama seperti sebelumnya
   (padding yang dulu di h2 dipindah ke tombol supaya posisi teks tetap). */
.lk-blok-kategori h2 { margin: 0 0 2px; padding: 0; }
.lk-akordeon-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 4px 0 6px;
  border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: color .15s ease;
}
.lk-akordeon-kepala:hover { color: #f0b24b; }
.lk-akordeon-kepala:focus-visible {
  outline: 2px solid var(--lk-utama, #da9722); outline-offset: 3px; border-radius: 6px;
}
.lk-akordeon-panah {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .6;
  /* Terbuka = panah ke atas (sama seperti sakelar “Selengkapnya” di beranda). */
  transform: rotate(180deg);
  transition: transform .18s ease;
}
.lk-blok-kategori.lk-akordeon-tutup .lk-akordeon-panah { transform: rotate(0deg); }
.lk-blok-kategori.lk-akordeon-tutup .lk-daftar-kategori { display: none; }
html[data-theme="light"] .lk-akordeon-kepala:hover { color: #b87714; }

/* ============================================================================
   SIDEBAR final: satu wrapper border kiri (riwayat/simpan + kategori) tanpa panel
   ========================================================================== */
.lk-sidebar-wrap {
  border-left: 2px solid rgba(126, 151, 181, 0.28);
  padding: 2px 0 2px 16px;
}
.lk-kategori { border: 0; padding: 0; }

.lk-riwayat {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 0 14px;
}
.lk-riwayat-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: #8fa0b3;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lk-riwayat-tab:hover { color: #e8eef5; }
.lk-riwayat-tab.lk-riwayat-aktif { color: #f0b24b; border-bottom-color: #f0b24b; }
.lk-riwayat-ikon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================
   HEADER font Fredoka + Riwayat/Simpan = toggle segmen ala lokerjogja
   ========================================================================== */
.lk-header .lk-brand,
.lk-header .lk-nav a,
.lk-header .lk-nav button {
  font-family: var(--lk-font-judul, "Fredoka", "Lato", sans-serif);
}

/* toggle segmen Riwayat | Simpan */
.lk-riwayat {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #141e29;
  border: 1px solid rgba(126, 151, 181, 0.28);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}
.lk-riwayat-pisah { display: none; }
.lk-riwayat-tab {
  gap: 7px;
  padding: 7px 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9fb0c3;
}
.lk-riwayat-tab + .lk-riwayat-tab { border-left: 1px solid rgba(126, 151, 181, 0.22); }
.lk-riwayat-tab:hover { color: #e8eef5; }
.lk-riwayat-tab.lk-riwayat-aktif {
  color: #fff;
  background: linear-gradient(135deg, #e3a735, #c98517);
  border-left-color: transparent;
}
.lk-riwayat-ikon { width: 15px; height: 15px; }

/* ============================================================================
   OVERLAY Riwayat / Simpan (localStorage)
   ========================================================================== */
/* Kunci scroll body saat modal terbuka.
   PENTING: hanya di desktop (>960). Di mobile, `overflow:hidden` pada body membuat
   topbar `position:sticky` ikut melompat sejauh posisi scroll (gejala: topbar
   "terdorong" hilang saat panel dibuka setelah nge-scroll). Panel mobile
   diperlakukan sama spt panel Profesi: tanpa kunci scroll. */
@media (min-width: 961px) {
  .lk-pencarian .lk-pchip{margin-bottom:10px;}
  .lk-overlay-buka { overflow: hidden; }
}
.lk-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lk-overlay[hidden] { display: none; }
.lk-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 14, 0.74);
  backdrop-filter: blur(2px);
}
.lk-overlay-box {
  position: relative;
  width: min(560px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #111923;
  border: 1px solid rgba(126, 151, 181, 0.25);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.lk-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(126, 151, 181, 0.18);
}
.lk-overlay-head h2 { margin: 0; font-size: 20px; font-weight: 500; color: #fff; }
.lk-overlay-close {
  border: 0;
  background: transparent;
  color: #8fa0b3;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.lk-overlay-close:hover { color: #fff; }
.lk-overlay-isi { overflow: auto; padding: 12px 14px 16px; }
.lk-overlay-kosong {
  margin: 8px 0;
  padding: 26px 16px;
  border: 1px dashed rgba(126, 151, 181, 0.25);
  border-radius: 12px;
  color: #9fb0c3;
  text-align: center;
  font-size: 14px;
}
.lk-overlay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lk-overlay-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #141e29;
  border: 1px solid rgba(126, 151, 181, 0.16);
  border-radius: 12px;
  padding: 10px;
}
.lk-overlay-item > a { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; }
.lk-overlay-item a:hover .lk-overlay-info strong { color: #f0b24b; }
.lk-overlay-inisial {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: #24354b;
  display: grid;
  place-items: center;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-weight: 600;
  font-size: 15px;
}
.lk-overlay-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-overlay-info strong {
  font-size: 14px;
  color: #eef3f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-overlay-info small {
  font-size: 12px;
  color: #8fa0b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-overlay-hapus {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8fa0b3;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.lk-overlay-hapus:hover { color: #ff8b8b; background: rgba(242, 75, 75, 0.12); }

/* tombol simpan (detail) */
.lk-tombol-simpan { gap: 7px; }
.lk-simpan-ikon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-tombol-simpan.lk-simpan-aktif {
  color: #f0b24b;
  border-color: #f0b24b;
  background: rgba(218, 151, 34, 0.12);
}

/* ============================================================================
/* ============================================================================
   PENCARIAN + HERO bersama (home & detail) — konsolidasi, tanpa duplikat
   ========================================================================== */

/* root & token hero (root 19px → H1 1.894rem ≈ 36px seperti referensi) */
html { font-size: 19px; }
:root {
  --lk-dark-hero: #0b141d;
  --lk-dark-bg: #080b10;
}

/* hero bersama: gradient fade ke latar halaman + border-bawah ala card
   + bg-pattern titik halus (dot grid) sebagai layer paling atas. */
.lk-hero-loker {
  position: relative;
  overflow: visible;
  border-bottom: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.2));
  padding-bottom: 96px;   /* ruang utk setengah-atas kartu pencarian */
  background-color: var(--lk-dark-hero, #0b141d);
  background-image:
    /* bg-pattern: titik halus */
    radial-gradient(circle at center, rgba(158, 190, 224, 0.22) 1.1px, transparent 1.9px),
    /* glow oranye kanan-atas */
    radial-gradient(720px 300px at 88% -120px, rgba(218, 151, 34, 0.28), transparent 62%),
    /* glow biru kiri-bawah */
    radial-gradient(560px 320px at -80px 120%, rgba(64, 112, 172, 0.16), transparent 62%),
    /* dasar */
    linear-gradient(180deg, #0d1a26 0%, var(--lk-dark-hero) 52%, var(--lk-dark-bg) 100%);
  background-size: 22px 22px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center, center;
}
.lk-hero-teks h1 { font-size: 1.894rem; line-height: 1.15; }
@media (max-width: 768px) {
  .lk-hero-teks h1 { font-size: 1.812rem; }
}

/* kartu pencarian: melayang, pusatnya tepat di garis border hero/main */
.lk-pencarian-wadah {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translate(-50%, 50%);
  z-index: 6;
  width: calc(100% - 32px);  /* sejajar konten .lk-wadah */
  max-width: 1108px;         /* = .lk-wadah (1140 - 32) */
}

/* ruang konten utama setelah kartu yg menggantung ke bawah garis */
.lk-blok-rekomendasi { margin-top: 96px; }
.lk-main-cari { margin-top: 96px; }

/* search bar 2 baris: row1 = Cari disini | Lokasi | Lulusan ; row2 = filter ... Cari */
.lk-pencarian {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  row-gap: 12px;
  padding-top: 8px;
  padding-bottom: 18px;
}
.lk-pencarian .lk-submit-cari { grid-row: 2; grid-column: 4; align-self: end; }
.lk-pencarian .lk-pchip { display:flex; width:fit-content; flex:1 }
.lk-pencarian .lk-pchip-pilihan { align-items: center; }

@media (max-width: 980px) {
  .lk-hero-loker { padding-bottom: 128px; }
  .lk-blok-rekomendasi, .lk-main-cari { margin-top: 126px; }
  .lk-pencarian { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .lk-pencarian .lk-pcari { grid-column: 1 / -1; grid-row: auto; }
  .lk-pencarian .lk-pselect { grid-row: auto; }
  .lk-pencarian .lk-pchip { grid-column: 1 / -1; grid-row: auto; margin-top: 6px; }
}

@media (max-width:850px){
  .lk-pencarian .lk-submit-cari { grid-column: 1 / -1; grid-row: auto; width: 100%; }

}

@media (max-width: 640px) {
  .lk-hero-loker { padding-bottom: 116px; }
  .lk-pencarian-wadah { width: calc(100% - 24px); }
  .lk-blok-rekomendasi, .lk-main-cari { margin-top: 142px; }
}

/* ============================================================================
   DETAIL LOWONGAN — mirror referensi lokerjogja (2 kolom; konten di kiri)
   ========================================================================== */
.lk-detail-utama { min-width: 0; }

/* kepala: perusahaan + membuka lowongan + judul + logo putih kanan */
.lk-kepala-loker { display: flex; gap: 18px; align-items: flex-start; margin: 4px 0 14px; }
.lk-kepala-isi { flex: 1; min-width: 0; }
.lk-loker-perusahaan { margin: 0 0 1px; color: #f0b24b; font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 15px; font-weight: 500; }
.lk-loker-membuka { margin: 0 0 8px; color: #7f93a6; font-size: 13px; }
.lk-kepala-isi h1 { margin: 0 0 8px; color: #fff; font-weight: 500; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.16; }
.lk-loker-keterangan { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; color: #8fa0b3; font-size: 13px; }
.lk-logo-loker {
  flex: none; display: grid; place-items: center;
  width: 108px; height: 80px; border-radius: 12px;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 24px; font-weight: 600;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  overflow:none;
}
.lk-kartu-badge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ringkasan: list label : nilai ber-separator */
.lk-ringkasan-loker { margin: 6px 0 4px; border-top: 1px solid var(--lk-garis, rgba(126,151,181,.2)); }
.lk-ringkasan-loker > div { display: grid; grid-template-columns: 158px 1fr; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(126,151,181,.14); }
.lk-ringkasan-loker dt { padding-top: 1px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #7f93a6; }
.lk-ringkasan-loker dd { margin: 0; font-size: 15px; font-weight: 600; color: #eef3f8; }

/* seksi konten */
.lk-loker-judul { margin: 26px 0 10px; color: #fff; font-weight: 500; font-size: 1.35rem; }
.lk-loker-paragraf { margin: 0 0 12px; color: #c7d2dd; line-height: 1.72; }
.lk-loker-syarat { margin: 0; padding: 0; list-style: none; }
.lk-loker-syarat li { position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid rgba(126,151,181,.12); color: #c7d2dd; }
.lk-loker-syarat li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: #da9722; }

/* kirim lamaran: border-atas saja (tanpa bg); kanal = kartu ala lowongan terkait */
.lk-kirim-lamar { margin-top: 28px; padding: 0; background: transparent; border: 0; border-top: 1px solid var(--lk-garis, rgba(126,151,181,.2)); border-radius: 0; }
.lk-kirim-lamar .lk-loker-judul { margin: 20px 0 14px; }
.lk-kanal-list { display: grid; gap: 10px; }
.lk-kanal-kartu {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; background: #111923;
  border: 1px solid rgba(126,151,181,.2); border-radius: 12px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.lk-kanal-kartu:hover { border-color: rgba(218,151,34,.55); transform: translateY(-1px); }
.lk-kanal-logo {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: #fff; color: #1c3046;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 22px; line-height: 1; font-weight: 700;
}
.lk-kanal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lk-kanal-info b { font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 15px; font-weight: 500; color: #fff; }
.lk-kanal-info span { color: #9fb0c3; font-size: 13.5px; overflow-wrap: anywhere; }
/* aksi tiap kanal = chip, supaya semua kartu sejajar rapi */
.lk-kanal-aksi {
  flex: none; display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(218, 151, 34, .38); background: rgba(218, 151, 34, .12);
  color: #f0b24b; font-weight: 700; font-size: 13px; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lk-kanal-kartu:hover .lk-kanal-aksi { background: #da9722; border-color: #da9722; color: #1a1206; }
/* kartu formulir eksternal (Google Form, dll) = opsi utama, dibedakan */
.lk-kanal-kartu.lk-kanal-formulir {
  border-color: rgba(218, 151, 34, .45);
  background: linear-gradient(135deg, rgba(218, 151, 34, .12), rgba(218, 151, 34, .02) 60%, #111923);
}
.lk-kanal-kartu.lk-kanal-formulir .lk-kanal-logo { background: linear-gradient(135deg, #da9722, #b87714); color: #1a1206; }
/* kartu alamat = informasi, bukan aksi */
.lk-kanal-kartu.lk-lamar-alamat { background: transparent; border-style: dashed; }
.lk-kanal-kartu.lk-lamar-alamat:hover { transform: none; border-color: rgba(126, 151, 181, .2); }
.lk-lamar-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 4px; }
.lk-lamar-aksi .lk-bagikan { margin-left: auto; }

/* lowongan terkait: baris kompak (thumb kiri) — kotak gambar rasio sama dgn config */
.lk-blok-terkait { margin-top: 30px; }
.lk-blok-terkait .lk-blok-judul { margin-top: 4px; }
.lk-terkait-daftar { display: grid; gap: 10px; }
.lk-terkait-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #111923; border: 1px solid rgba(126,151,181,.2); border-radius: 12px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.lk-terkait-item:hover { border-color: rgba(218,151,34,.55); transform: translateY(-1px); }
.lk-terkait-logo {
  position: relative; overflow: hidden; flex: none;
  width: 112px; aspect-ratio: var(--lk-rasio-lowongan, 219 / 126);
  display: grid; place-items: center; border-radius: 10px; background: #fff; color: #1c3046;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 15px; font-weight: 700;
}
.lk-terkait-logo > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lk-terkait-logo img.lk-terkait-gambar { object-fit: cover; padding: 0; }
.lk-terkait-logo img.lk-terkait-logo-img { object-fit: contain; padding: 6px; box-sizing: border-box; }
.lk-terkait-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lk-terkait-badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #f4b63a; }
.lk-terkait-judul { margin: 2px 0; color: #fff; font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 16px; font-weight: 500; line-height: 1.3; }
.lk-terkait-bar1 { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #9fb0c3; }
.lk-terkait-bar1 b { font-weight: 600; color: #cdd8e3; }
.lk-terkait-bar1 i { font-style: normal; font-weight: 600; color: #f0b24b; }
.lk-terkait-bar2 { margin-top: 3px; font-size: 12.5px; color: #7f93a6; }
.lk-terkait-waktu { flex: none; margin-left: 6px; color: #7f93a6; font-size: 12px; }

@media (max-width: 640px) {
  .lk-kepala-loker { gap: 12px; }
  .lk-logo-loker { width: 84px; height: 62px; font-size: 18px; }
  .lk-lamar-aksi .lk-bagikan { margin-left: 0; width: 100%; }
  .lk-terkait-item { flex-wrap: wrap; }
  .lk-terkait-logo { width: 96px; }
  .lk-terkait-waktu { margin-left: 0; }
}

/* ============================================================================
   HEADER ala referensi lokerjogja — satu baris: logo + menu berikon + CTA outline
   ========================================================================== */
.lk-header { background: #0a1118; border-bottom: 1px solid rgba(126, 151, 181, 0.16); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.lk-header-dalam { min-height: 64px; gap: 18px; }
.lk-nav { margin-left: auto; }
.lk-nav ul { gap: 2px; }
.lk-nav a, .lk-nav button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: #cbd5e0;
  white-space: nowrap;
}
.lk-nav a:hover, .lk-nav button:hover { color: #fff; background: rgba(218, 151, 34, 0.16); }
.lk-nav-ikon { width: 16px; height: 16px; flex: none; }
.lk-cta-pasang {
  margin-left: 8px;
  background: transparent;
  border: 1.5px solid #da9722;
  color: #f0b24b;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
}
.lk-cta-pasang:hover { background: rgba(218, 151, 34, 0.16); border-color: #f0b24b; color: #fff; }

/* ============================================================================
   SEARCH BAR — flex: baris1 = 3 field flex-1 (mengisi 100%), baris2 = chips + Cari
   ========================================================================== */
.lk-pencarian { display: flex; flex-direction: column; gap: 12px; }
.lk-pencarian-baris { display: flex; align-items: flex-end; gap: 22px; width: 100%; }
.lk-pencarian-baris > label { flex: 1 1 0; min-width: 0; width: auto; }
.lk-pencarian-baris .lk-pcari { flex: 1.3 1 0; }
.lk-pencarian .lk-pchip { margin: 0; padding: 0; border: 0; min-width: 0; width: 100%; }
.lk-pencarian .lk-pchip-pilihan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; }
.lk-pencarian .lk-pchip-pilihan > label { width: auto; flex: 0 0 auto; }
.lk-pencarian .lk-submit-cari { flex: 0 0 auto; margin-left: auto; }

@media (min-width: 940px) {
.lk-pencarian { margin-bottom:20px; }
}

@media (max-width: 640px) {
  .lk-pencarian-baris { flex-wrap: wrap; gap: 12px; }
  .lk-pencarian-baris .lk-pcari { flex-basis: 100%; }
  .lk-pencarian-baris .lk-pselect { flex: 1 1 45%; }
  .lk-pencarian .lk-submit-cari { margin-left: 0; width: 100%; }
}

/* ============================================================================
   TOMBOL TEMA (gelap/terang ala referensi lokerjogja)
   ========================================================================== */
.lk-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;padding: 0;
  background: transparent; border: 1px solid rgba(126, 151, 181, 0.25);
  color: #cbd5e0; border-radius: 50%; cursor: pointer; flex: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lk-tema:hover { color: #f0b24b; border-color: rgba(218, 151, 34, 0.6); background: rgba(218, 151, 34, 0.12); }
.lk-tema svg { width: 18px; height: 18px; }
.lk-tema .lk-tema-bulan { display: none; }

/* ============================================================================
   MODE TERANG (html[data-theme="light"]) — override lapisan gelap
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --lk-teks: #1e2f44;
  --lk-teks-redup: #64748b;
  --lk-latar: #f4f7fb;
  --lk-permukaan: #ffffff;
  --lk-garis: #dce5ef;
  --lk-garis-tegas: #c3d1e0;
  --lk-utama-muda: #fbeed7;
  --lk-bayangan: 0 6px 18px rgba(30, 47, 68, 0.07);
  --lk-utama-cerah: #b87714;
}
html[data-theme="light"] body { background: #f4f7fb; color: #1e2f44; }
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { color: #1e2f44; }
html[data-theme="light"] .lk-tema { color: #51657c; border-color: #d5e0ea; }
html[data-theme="light"] .lk-tema .lk-tema-matahari { display: none; }
html[data-theme="light"] .lk-tema .lk-tema-bulan { display: block; }

/* ---- header ---- */
html[data-theme="light"] .lk-header { background: #ffffff; border-bottom-color: #e4ebf3; box-shadow: 0 1px 4px rgba(30, 47, 68, 0.05); }
html[data-theme="light"] .lk-nav a, html[data-theme="light"] .lk-nav button { color: #33475e; }
html[data-theme="light"] .lk-nav a:hover, html[data-theme="light"] .lk-nav button:hover { color: #b87714; background: #fbeed7; }
html[data-theme="light"] .lk-nav-turun { background: #ffffff; border-bottom-color: #e4ebf3; box-shadow: 0 16px 30px rgba(30, 47, 68, 0.1); }
html[data-theme="light"] .lk-nav-turun .lk-judul-mini { color: #8aa0b5; }
html[data-theme="light"] .lk-cta-pasang { color: #b87714; border-color: #da9722; }
html[data-theme="light"] .lk-cta-pasang:hover { color: #8a5a08; background: #fbeed7; }
html[data-theme="light"] .lk-hamburger span { background: #1e2f44; }

/* ---- hero ---- */
html[data-theme="light"] .lk-hero-loker {
  border-bottom-color: #dce5ef;
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at center, rgba(30, 47, 68, 0.14) 1.1px, transparent 1.9px),
    radial-gradient(720px 300px at 88% -120px, rgba(218, 151, 34, 0.16), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #eaf1f8 100%);
  background-size: 22px 22px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center;
}
html[data-theme="light"] .lk-hero-teks h1 { color: #10233a; }
html[data-theme="light"] .lk-hero-teks h1 > span { color: #c98216; }
html[data-theme="light"] .lk-eyebrow { color: #c98216; }
html[data-theme="light"] .lk-lead { color: #54677c; }
html[data-theme="light"] .lk-tombol-selengkapnya { color: #b87714; border-color: rgba(184, 119, 20, 0.5); background: #fff; }
html[data-theme="light"] .lk-tombol-selengkapnya:hover { background: #fbeed7; color: #8a5a08; }
html[data-theme="light"] .lk-seo-isi { background: #ffffff; border-color: #e4ebf3; color: #42566b; }
html[data-theme="light"] .lk-seo-isi h2 { color: #1e2f44; }
html[data-theme="light"] .lk-seo-isi h3 { color: #b87714; }
html[data-theme="light"] .lk-seo-isi a { color: #b87714; }

/* ---- kartu pencarian ---- */
html[data-theme="light"] .lk-pencarian {
  background: #ffffff;
  border-color: #e1e9f2;
  box-shadow: 0 14px 30px rgba(30, 47, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="light"] .lk-pencarian input[type="search"],
html[data-theme="light"] .lk-pencarian select { color: #1e2f44; border-bottom-color: #ccd8e4; }
html[data-theme="light"] .lk-pencarian input[type="search"]::placeholder { color: #93a4b8; }
html[data-theme="light"] .lk-pencarian input[type="search"]:hover,
html[data-theme="light"] .lk-pencarian select:hover,
html[data-theme="light"] .lk-pencarian input[type="search"]:focus,
html[data-theme="light"] .lk-pencarian select:focus { border-bottom-color: #e0a23c; }
html[data-theme="light"] .lk-pencarian select option { background: #ffffff; color: #1e2f44; }
html[data-theme="light"] .lk-pchip label span { color: #51657c; background: #f3f6fa; border-color: #d5e0ea; }
html[data-theme="light"] .lk-pchip label:hover span { color: #8a5a08; border-color: rgba(218, 151, 34, 0.6); }
html[data-theme="light"] .lk-pchip input:checked + span { color: #8a5a08; background: #fbeed7; border-color: #da9722; }
html[data-theme="light"] .lk-pencarian input[type="search"]::-webkit-search-cancel-button { filter: none; }

/* ---- judul blok & tombol ---- */
html[data-theme="light"] .lk-blok-judul, html[data-theme="light"] .lk-seksi-judul h2,
html[data-theme="light"] .lk-petunjuk .lk-gaji, html[data-theme="light"] .lk-lihat-semua { color: #1e2f44; }
html[data-theme="light"] .lk-blok-judul .lk-aksen, html[data-theme="light"] .lk-lihat-semua { color: #b87714; }

/* ============================================================================
   CAROUSEL REKOMENDASI — judul di tengah, tombol panah kiri/kanan, tautan bawah
   ----------------------------------------------------------------------------
   Semua warna memakai token tema (--lk-permukaan/--lk-garis/--lk-teks/
   --lk-utama) yang dibalik oleh html[data-theme="light"], jadi otomatis rapi di
   mode gelap MAUPUN terang tanpa aturan tambahan per tema.
   ========================================================================== */
.lk-blok-head-tengah { justify-content: center; text-align: center; }
.lk-blok-head-tengah .lk-blok-judul { margin-right: 0; margin-left: 0; }

.lk-rek-bingkai { position: relative; }

.lk-rek-panah {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border-radius: 999px; cursor: pointer;
  color: var(--lk-teks);
  background: var(--lk-permukaan);
  border: 1px solid var(--lk-garis);
  box-shadow: var(--lk-bayangan);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
}
.lk-rek-panah svg { width: 24px; height: 24px; }
.lk-rek-panah-kiri { left: 4px; }
.lk-rek-panah-kanan { right: 4px; }
.lk-rek-panah:hover {
  background: var(--lk-utama); border-color: var(--lk-utama); color: #241703;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 24px rgba(218, 151, 34, 0.34);
}
.lk-rek-panah:active { transform: translateY(-50%) scale(0.97); }
.lk-rek-panah:focus-visible { outline: 2px solid var(--lk-utama); outline-offset: 3px; }

.lk-rek-bawah { text-align: center; margin: 6px 0 4px; }

/* Tautan bawah carousel: teks lebih besar + tanda »» di kanan. Warnanya memakai
   token tema, jadi GELAP → teks TERANG (#e8eef5) dan TERANG → teks GELAP
   (#1e2f44) — bukan kuning. Aksen oranye hanya muncul saat hover. */
.lk-lihat-semua-tengah {
  display: inline-block; margin-top: 0;
  font-size: 17px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--lk-teks);
}
.lk-lihat-semua-tengah:hover { color: var(--lk-utama); text-decoration: none; }
.lk-lihat-semua-tengah .lk-lihat-semua-panah { margin-left: 7px; opacity: 0.85; letter-spacing: -2px; }
html[data-theme="light"] .lk-lihat-semua-tengah { color: #1e2f44; }
html[data-theme="light"] .lk-lihat-semua-tengah:hover { color: #b87714; }

@media (max-width: 860px) {
  /* Klien: tombol panah disembunyikan di ponsel (baris tetap jalan sendiri &
     bisa digeser dengan jari). */
  .lk-rek-panah { display: none; }
  .lk-lihat-semua-tengah { font-size: 16px; }
}

/* ---- kartu rekomendasi (x-job-mini) ---- */
html[data-theme="light"] .lk-rek,
html[data-theme="light"] .lk-mini-loker { background: #ffffff; border-color: #e2e9f1; }
html[data-theme="light"] .lk-rek:hover { border-color: rgba(218, 151, 34, 0.6); box-shadow: 0 12px 24px rgba(30, 47, 68, 0.08); }
html[data-theme="light"] .lk-rek-judul { color: #1e2f44; }
html[data-theme="light"] .lk-rek-badge { color: #6b7f95; }
html[data-theme="light"] .lk-rek-badge-urgent { color: #b87714; }
html[data-theme="light"] .lk-rek-perusahaan { color: #33475e; }
html[data-theme="light"] .lk-rek-row, html[data-theme="light"] .lk-rek-baris { color: #64748b; }
html[data-theme="light"] .lk-rek-logo, html[data-theme="light"] .lk-mini-avatar { border: 1px solid #e3eaf2; box-shadow: none; }
html[data-theme="light"] .lk-rek-ikon { color: #8aa0b5; }
html[data-theme="light"] .lk-rek-perusahaan .lk-rek-ikon { color: #b87714; }
html[data-theme="light"] .lk-rek-kaki, html[data-theme="light"] .lk-rek-kaki time { color: #8aa0b5; }
html[data-theme="light"] .lk-rek-kaki .lk-rek-gaji { color: #b87714; }

/* ---- kartu lowongan terbaru (x-job-item) ---- */
html[data-theme="light"] .lk-posting { background: #ffffff; border-color: #e2e9f1; }
html[data-theme="light"] .lk-posting:hover { border-color: rgba(218, 151, 34, 0.6); box-shadow: 0 12px 26px rgba(30, 47, 68, 0.09); }
html[data-theme="light"] .lk-posting-judul { color: #1e2f44; }
html[data-theme="light"] .lk-posting-perusahaan { color: #33475e; }
html[data-theme="light"] .lk-posting-row2, html[data-theme="light"] .lk-posting-item { color: #64748b; }
html[data-theme="light"] .lk-posting-badge { color: #6b7f95; }
html[data-theme="light"] .lk-posting-badge-urgent { color: #b87714; }
html[data-theme="light"] .lk-posting-waktu { color: #8aa0b5; }
html[data-theme="light"] .lk-posting-gaji { color: #b87714; }
html[data-theme="light"] .lk-posting-logo { border: 1px solid #e3eaf2; box-shadow: none; }
html[data-theme="light"] .lk-posting-ikon, html[data-theme="light"] .lk-posting-ikon-waktu { color: #8aa0b5; }
html[data-theme="light"] .lk-posting-perusahaan .lk-posting-ikon { color: #b87714; }
html[data-theme="light"] .lk-posting-item .lk-posting-ikon { color: #8aa0b5; }

/* ---- labels / chips ---- */
html[data-theme="light"] .lk-label-status { background: #eef2f7; color: #51657c; }
html[data-theme="light"] .lk-label-urgent { background: #fdeaea; color: #d43d3d; }
html[data-theme="light"] .lk-label-fitur { background: #fbeed7; color: #b87714; }

/* ---- sidebar: riwayat/simpan + kategori ---- */
html[data-theme="light"] .lk-riwayat { background: #e9eff6; border-color: #d8e2ec; }
html[data-theme="light"] .lk-riwayat-tab { color: #51657c; }
html[data-theme="light"] .lk-riwayat-tab:hover { color: #b87714; }
html[data-theme="light"] .lk-riwayat-tab.lk-riwayat-aktif { color: #fff; background: linear-gradient(135deg, #e3a735, #c98517); }
html[data-theme="light"] .lk-riwayat-pisah { background: #d8e2ec; }
html[data-theme="light"] .lk-kategori { border-left-color: #d8e2ec; }
html[data-theme="light"] .lk-blok-kategori h2 { color: #1e2f44; }
html[data-theme="light"] .lk-daftar-kategori li { border-top-color: #e4ebf3; }
html[data-theme="light"] .lk-daftar-kategori a { color: #42566b; }
html[data-theme="light"] .lk-daftar-kategori a:hover { color: #b87714; background: #fbeed7; }
html[data-theme="light"] .lk-kategori-lain a { color: #b87714; }

/* ---- halaman detail/show ---- */
html[data-theme="light"] .lk-loker-perusahaan { color: #c98216; }
html[data-theme="light"] .lk-loker-membuka { color: #8aa0b5; }
html[data-theme="light"] .lk-kepala-isi h1 { color: #10233a; }
html[data-theme="light"] .lk-loker-keterangan { color: #8aa0b5; }
html[data-theme="light"] .lk-logo-loker, html[data-theme="light"] .lk-kanal-logo,
html[data-theme="light"] .lk-terkait-logo { border: 1px solid #e3eaf2; box-shadow: none; }
html[data-theme="light"] .lk-ringkasan-loker { border-top-color: #dce5ef; }
html[data-theme="light"] .lk-ringkasan-loker > div { border-bottom-color: #e4ebf3; }
html[data-theme="light"] .lk-ringkasan-loker dt { color: #8aa0b5; }
html[data-theme="light"] .lk-ringkasan-loker dd { color: #1e2f44; }
html[data-theme="light"] .lk-loker-judul { color: #1e2f44; }
html[data-theme="light"] .lk-loker-paragraf { color: #42566b; }
html[data-theme="light"] .lk-loker-syarat li { border-bottom-color: #e4ebf3; color: #42566b; }
html[data-theme="light"] .lk-kirim-lamar { border-top-color: #dce5ef; }
html[data-theme="light"] .lk-kanal-kartu { background: #ffffff; border-color: #e2e9f1; }
html[data-theme="light"] .lk-kanal-kartu:hover { border-color: rgba(218, 151, 34, 0.6); }
html[data-theme="light"] .lk-kanal-aksi { color: #b87714; border-color: rgba(218, 151, 34, .5); background: #fbeed7; }
html[data-theme="light"] .lk-kanal-kartu:hover .lk-kanal-aksi { background: #da9722; border-color: #da9722; color: #fff; }
html[data-theme="light"] .lk-kanal-kartu.lk-kanal-formulir { background: linear-gradient(135deg, #fdf3e2, #ffffff 70%); }
html[data-theme="light"] .lk-kanal-kartu.lk-lamar-alamat { background: transparent; }
html[data-theme="light"] .lk-kanal-info b { color: #1e2f44; }
html[data-theme="light"] .lk-kanal-info span { color: #64748b; }
html[data-theme="light"] .lk-terkait-item { background: #ffffff; border-color: #e2e9f1; }
html[data-theme="light"] .lk-terkait-item:hover { border-color: rgba(218, 151, 34, 0.6); }
html[data-theme="light"] .lk-terkait-badge { color: #b87714; }
html[data-theme="light"] .lk-terkait-judul { color: #1e2f44; }
html[data-theme="light"] .lk-terkait-bar1 b { color: #33475e; }
html[data-theme="light"] .lk-terkait-bar1 i { color: #b87714; }
html[data-theme="light"] .lk-terkait-bar2, html[data-theme="light"] .lk-terkait-waktu { color: #8aa0b5; }

/* ---- elemen lain di atas latar terang ---- */
html[data-theme="light"] .lk-kosong, html[data-theme="light"] .lk-bagikan a { background: #fff; border-color: #dce5ef; color: #42566b; }
html[data-theme="light"] .lk-remah { color: #8aa0b5; }
html[data-theme="light"] .lk-remah a { color: #b87714; }
html[data-theme="light"] .lk-tombol-kedua { color: #b87714; border-color: rgba(184, 119, 20, 0.5); }
html[data-theme="light"] .lk-tombol-kedua:hover { background: #fbeed7; }
html[data-theme="light"] .lk-nav-laman a { color: #b87714; }
html[data-theme="light"] .lk-iklan-palsu { border-color: #dce5ef; background: repeating-linear-gradient(45deg, #f2f5f9, #f2f5f9 12px, #ffffff 12px, #ffffff 24px); color: #8aa0b5; }
html[data-theme="light"] .lk-iklan-palsu strong { color: #42566b; }


/* ============================================================================
   HALAMAN DAFTAR LAMA (jobs/index, /pasang, /artikel & detail artikel)
   Tema terang: pulihkan kartu putih & warna teks — override gelap lapisan bawah
   (lokerkerja.css/lokerkerja-site.css seksi gelap) yang belum di-reset di
   lapisan html[data-theme="light"].
   ========================================================================== */

/* jobs/index: form cari cepat, kartu lowongan, sidebar filter */
html[data-theme="light"] .lk-cari,
html[data-theme="light"] .lk-kartu-loker,
html[data-theme="light"] .lk-samping,
html[data-theme="light"] .lk-kartu-artikel,
html[data-theme="light"] .lk-artikel-tunggal {
  background: #fff;
  border-color: #dce5ef;
}
html[data-theme="light"] .lk-cari,
html[data-theme="light"] .lk-kartu-loker,
html[data-theme="light"] .lk-samping { box-shadow: 0 1px 2px rgba(30, 47, 68, 0.05); }
html[data-theme="light"] .lk-kartu-loker:hover { box-shadow: 0 8px 20px rgba(30, 47, 68, 0.10); transform: translateY(-2px); }
html[data-theme="light"] .lk-samping { box-shadow: 0 1px 2px rgba(30, 47, 68, 0.05); }
html[data-theme="light"] .lk-kosong { background: #fff; }

/* teks & tautan di kartu lama / sidebar filter */
html[data-theme="light"] .lk-daftar-link a { color: #1e2f44; }
html[data-theme="light"] .lk-daftar-link a:hover { color: #8a5a08; background: #fbeed7; }
html[data-theme="light"] .lk-kartu-judul a,
html[data-theme="light"] .lk-kartu-artikel h3 a { color: #1e2f44; }
html[data-theme="light"] .lk-kartu-judul a:hover,
html[data-theme="light"] .lk-kartu-artikel h3 a:hover { color: #b87714; }

/* /pasang: kartu paket & langkah */
html[data-theme="light"] .lk-kartu-paket,
html[data-theme="light"] .lk-langkah li { background: #fff; border-color: #dce5ef; }
html[data-theme="light"] .lk-kartu-paket { box-shadow: 0 1px 2px rgba(30, 47, 68, 0.05); }
html[data-theme="light"] .lk-paket-harga { color: #b87714; }
html[data-theme="light"] .lk-paket-tagline,
html[data-theme="light"] .lk-paket-harga small { color: #64748b; }
/* Nama paket, tagline, dan harga duduk DI ATAS pita aksen kartu, dan pita itu
   warnanya sama di mode gelap maupun terang → teksnya dibiarkan PUTIH seperti
   mode gelap (override abu/emas di atas hanya utk pemakaian di luar kartu). */
html[data-theme="light"] .lk-halaman-pasang .lk-kartu-paket .lk-paket-harga { color: #fff; }
html[data-theme="light"] .lk-halaman-pasang .lk-kartu-paket .lk-paket-tagline,
html[data-theme="light"] .lk-halaman-pasang .lk-kartu-paket .lk-paket-harga small { color: rgba(255, 255, 255, .92); }
html[data-theme="light"] .lk-paket-fitur li::before { color: #b87714; }
html[data-theme="light"] .lk-langkah li::before { background: #fbeed7; color: #8a5a08; }
html[data-theme="light"] .lk-langkah strong { color: #1e2f44; }

/* artikel: paragraf isi detail */
html[data-theme="light"] .lk-artikel-tunggal { box-shadow: 0 1px 2px rgba(30, 47, 68, 0.05); }
html[data-theme="light"] .lk-konten-artikel p { color: #42566b; }


/* ============================================================================
   HALAMAN LIST ARTIKEL (mirror referensi lokerjogja /artikel)
   Cari bergaris-bawah + item baris: thumb 227x137 kiri, judul & ringkasan kanan
   ========================================================================== */
.lk-kepala-artikel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0;
}
.lk-kepala-artikel h1 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }

/* search ala #artikel-search: input full-width, hanya garis bawah 2px */
.lk-artikel-cari { position: relative; margin: 18px 0 2px; }
.lk-artikel-cari .lk-artikel-cari-ikon {
  position: absolute; left: 2px; top: 50%; transform: translateY(-55%);
  color: var(--lk-teks-redup); pointer-events: none;
}
.lk-artikel-cari input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid var(--lk-garis);
  border-radius: 0;
  background: transparent;
  color: var(--lk-teks);
  font-family: var(--lk-font-teks, "Lato", sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 8px 2px 6px 30px;
  outline: none;
  transition: border-color .2s ease, color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.lk-artikel-cari input::placeholder { color: var(--lk-teks-redup); opacity: 1; }
.lk-artikel-cari input:hover { border-bottom-color: rgba(218, 151, 34, 0.45); }
.lk-artikel-cari input:focus { border-bottom-color: var(--lk-utama); }
.lk-artikel-cari input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* daftar artikel */
.lk-arsip-artikel { display: flex; flex-direction: column; margin-top: 14px; }
.lk-item-artikel { border-bottom: 1px solid var(--lk-garis); }
.lk-item-artikel:last-child { border-bottom: 0; }
.lk-item-artikel-link {
  display: flex; align-items: stretch; gap: 18px;
  padding: 16px 0;
}
.lk-item-artikel-thumb {
  flex: 0 0 auto;
  width: 227px;
  aspect-ratio: 227 / 137;
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, #1e3248 0%, #0d1b2a 100%);
  color: #dfe8f2;
  text-align: center;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.lk-item-artikel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-item-artikel-ikon { opacity: .9; flex: none; }
.lk-item-artikel-kat {
  font-family: var(--lk-font-judul, "Fredoka", sans-serif);
  font-size: 12.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  opacity: .92;
}
.lk-item-artikel-isi {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.lk-item-artikel-isi h2, .lk-item-artikel-isi h3 {
  margin: 0 0 6px;
  font-size: 20px; line-height: 1.32; font-weight: 600;
  transition: color .18s ease;
}
.lk-item-artikel-isi p {
  margin: 0;
  color: var(--lk-teks-redup);
  font-size: 14.5px; line-height: 1.55;
  max-width: 720px;
}
.lk-item-artikel-link:hover .lk-item-artikel-isi h2,
.lk-item-artikel-link:hover .lk-item-artikel-isi h3 { color: var(--lk-utama-cerah); }

.lk-artikel-kaki {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding-top: 13px;
  border-top: 1px solid var(--lk-garis);
  font-size: 13px; color: var(--lk-teks-redup);
}
.lk-artikel-kaki a { color: var(--lk-utama-cerah); font-weight: 600; }
.lk-artikel-kaki a:hover { color: var(--lk-utama-gelap); }

/* tema terang */
html[data-theme="light"] .lk-item-artikel-thumb {
  background: linear-gradient(135deg, #d9e4ef 0%, #b9cfe1 100%);
  color: #22364b;
  box-shadow: 0 1px 2px rgba(30, 47, 68, 0.08);
}

/* responsif */
@media (max-width: 640px) {
  .lk-item-artikel-link { gap: 12px; }
  .lk-item-artikel-thumb { width: 118px; border-radius: 8px; }
  .lk-item-artikel-isi h2 { font-size: 17px; }
  .lk-item-artikel-isi p { font-size: 13px; }
}


/* container utama: border-box agar width:100% + padding tidak meluap di layar kecil
   (max-width 1172 border-box = konten tetap ~1140, setara definisi asli) */
.lk-wadah { box-sizing: border-box; max-width: 1172px; }
/* pengaman: cegah scroll horizontal sisa (tidak mengganggu position:sticky) */
html, body { overflow-x: clip; }


/* ============================================================================
   BAYANGAN KARTU — versi terang dirapikan
   Jangan memakai shadow gelap tebal (rgba(0,0,0,.22) dkk, utk dark) di atas
   kartu putih saat light; gunakan shadow lembut konsisten.
   ========================================================================== */
html[data-theme="light"] .lk-rek,
html[data-theme="light"] .lk-posting,
html[data-theme="light"] .lk-mini-loker {
  box-shadow: 0 1px 2px rgba(30, 47, 68, 0.04), 0 8px 18px rgba(30, 47, 68, 0.05);
}
html[data-theme="light"] .lk-rek:hover,
html[data-theme="light"] .lk-posting:hover,
html[data-theme="light"] .lk-mini-loker:hover {
  box-shadow: 0 2px 4px rgba(30, 47, 68, 0.06), 0 14px 28px rgba(30, 47, 68, 0.09);
}
/* CTA gradasi oranye: hindari bayangan hitam pekat saat light */
html[data-theme="light"] .lk-seksi-cta {
  box-shadow: 0 10px 24px rgba(30, 47, 68, 0.12);
}


/* logo perusahaan hasil upload di dalam kotak avatar/logo kartu.
   Kotak ber-rasio (aspect-ratio) TIDAK boleh diubah ukurannya oleh konten
   (logo sering persegi 150x150). Karena itu img dibuat absolut mengisi kotak,
   rasio selalu menang & object-fit menangani crop/letterbox. */
.lk-posting-logo, .lk-rek-logo { position: relative; overflow: hidden; }
.lk-posting-logo > img, .lk-rek-logo > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lk-avatar img,
.lk-posting-logo img,
.lk-rek-logo img,
.lk-terkait-logo img,
.lk-logo-loker img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; padding: 6px; box-sizing: border-box;
}


/* ============================================================================
   ARTIKEL DETAIL + HALAMAN STATIS — blok bagikan/terkait/kembali & heading konten
   (meniru pola lokerjogja: isi + "Artikel Terkait" + "« Kembali")
   ========================================================================== */
.lk-halaman-artikel .lk-artikel-tunggal { max-width: 820px; margin-inline: auto; }
.lk-halaman-artikel .lk-artikel-terkait,
.lk-halaman-artikel .lk-artikel-nav { max-width: 820px; margin-inline: auto; }

.lk-artikel-tunggal h1 { margin: 10px 0 2px; }
.lk-artikel-meta { color: var(--lk-teks-redup); font-size: 13px; margin: 4px 0 0; }

/* heading di dalam isi (konvensi "## sub-judul") */
.lk-konten-artikel h2 { margin: 26px 0 10px; font-size: 21px; line-height: 1.3; }
.lk-konten-artikel h3 { margin: 20px 0 8px; font-size: 17px; line-height: 1.3; }

/* bagikan */
.lk-artikel-bagikan {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--lk-garis);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.lk-artikel-bagikan-label {
  font-weight: 700; font-size: 12.5px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--lk-teks-redup);
}
.lk-pchip-container{
  display:flex; gap:6px; width:100%;
  flex-wrap:wrap;
}
/* artikel terkait — memakai kartu artikel yang sama dgn halaman /artikel */
.lk-artikel-terkait { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--lk-garis); }
.lk-artikel-terkait h2 { font-size: 19px; margin: 0 0 12px; }
.lk-artikel-terkait h2 .lk-aksen { color: var(--lk-utama-cerah); }
.lk-artikel-terkait .lk-arsip-artikel-terkait {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0 24px; margin-top: 6px;
}
.lk-artikel-terkait .lk-item-artikel-thumb { width: 138px; }
.lk-artikel-terkait .lk-item-artikel-isi h3 { font-size: 16px; }
.lk-artikel-terkait .lk-item-artikel-isi p {
  font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
  .lk-artikel-terkait .lk-arsip-artikel-terkait { gap: 0; }
  .lk-artikel-terkait .lk-item-artikel-thumb { width: 104px; }
}

/* kembali */
.lk-artikel-nav { margin-top: 22px; }
.lk-artikel-nav a { color: var(--lk-utama-cerah); font-weight: 700; font-size: 14px; }
.lk-artikel-nav a:hover { color: var(--lk-utama-gelap); }


/* halaman daftar lowongan: search bar penuh selebar konten + sidebar item aktif */
.lk-pencarian-daftar { margin: 6px 0 26px; }
.lk-pencarian-daftar .lk-pencarian { width: 100%; max-width: none; margin-inline: 0; }

/* --- Filter MOBILE: tombol pilihan (select-like) → modal berisi kolom cari +
       daftar pilihan. Desktop disembunyikan (pakai sidebar .lk-samping). --- */
.lk-pilih { display: none; }
.lk-pilih-tombol {
  display: flex; align-items: center; gap: 8px;
  box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--lk-garis); border-radius: 12px;
  background: var(--lk-permukaan); color: var(--lk-teks);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.lk-pilih-tombol:hover { border-color: var(--lk-utama); }
.lk-pilih-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lk-pilih-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lk-teks-redup); }
.lk-pilih-nilai {
  font-size: 13.5px; font-weight: 600; color: var(--lk-teks);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-pilih-panah { flex: none; width: 15px; height: 15px; color: var(--lk-teks-redup); }
.lk-pilih-tombol.is-aktif { border-color: var(--lk-utama); background: var(--lk-utama-muda); }
.lk-pilih-tombol.is-aktif .lk-pilih-nilai { color: var(--lk-utama-gelap); }
html[data-theme="light"] .lk-pilih-tombol.is-aktif .lk-pilih-nilai { color: var(--lk-utama-gelap); }
.lk-pilih-reset {
  flex: 1 1 100%; margin-top: 2px;
  color: var(--lk-utama-cerah); font-size: 13px; font-weight: 700;
}

@media (max-width: 960px) {
  .lk-pilih {
    display: flex; flex-wrap: wrap; gap: 8px;
    box-sizing: border-box; margin: -10px 0 18px;
  }
  .lk-pilih .lk-pilih-tombol { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* sidebar penuh tidak dipakai di mobile */
  .lk-tata-luar > .lk-samping { display: none; }
  .lk-tata-luar { grid-template-columns: 1fr; gap: 0; }
}

/* isi modal pilihan (kolom cari + daftar) */
.lk-pilih-cari { padding: 0 0 10px; }
.lk-pilih-cari input {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid var(--lk-garis); border-radius: 10px;
  background: var(--lk-permukaan); color: var(--lk-teks);
  font: inherit; font-size: 14px;
}
.lk-pilih-cari input:focus { outline: none; border-color: var(--lk-utama); }
.lk-pilih-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lk-pilih-opsi {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border: 1px solid transparent; border-radius: 10px;
  color: var(--lk-teks); font-size: 14.5px;
}
.lk-pilih-opsi:hover { background: var(--lk-utama-muda); color: var(--lk-utama-cerah); }
.lk-pilih-opsi.is-aktif { border-color: var(--lk-utama); color: var(--lk-utama-cerah); font-weight: 700; }
.lk-pilih-opsi.is-aktif::after { content: "✓"; font-weight: 700; }
.lk-pilih-kosong { margin: 6px 0 0; padding: 16px; text-align: center; color: var(--lk-teks-redup); font-size: 14px; }
.lk-daftar-link a.is-aktif {
  background: var(--lk-utama-muda);
  color: var(--lk-utama-gelap);
  font-weight: 700;
}
.lk-daftar-reset {
  display: inline-block; margin: -2px 0 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--lk-utama-cerah);
}
.lk-daftar-reset:hover { color: var(--lk-utama-gelap); }


/* tombol lebar: hindari meluber keluar kartu (width:100% content-box + padding) */
.lk-tombol-lebar { box-sizing: border-box; }


/* ============================================================================
   FOOTER IKUT TEMA TERANG (light mode)
   ========================================================================== */
html[data-theme="light"] .lk-footer {
  background: #eef2f7;
  color: #51657c;
  border-top: 1px solid #e2e9f1;
}
html[data-theme="light"] .lk-footer h3 { color: #1e2f44; }
html[data-theme="light"] .lk-footer a { color: #42566b; }
html[data-theme="light"] .lk-footer a:hover { color: #b87714; }
html[data-theme="light"] .lk-brand-footer { color: #1e2f44; }
html[data-theme="light"] .lk-footer-bawah { border-top-color: #dce5ef; color: #64748b; }
html[data-theme="light"] .lk-footer-bawah a { color: #42566b; }
html[data-theme="light"] .lk-pesan-minta {
  background: #ffffff;
  border: 1px dashed #c3d1e0;
  color: #51657c;
}


/* brand/title logo header ikut tema terang (hindari teks near-white di header putih) */
html[data-theme="light"] .lk-header .lk-brand { color: #1e2f44; }
html[data-theme="light"] .lk-header .lk-brand:hover { color: #b87714; }


/* kata area di judul hero ikut warna judul saat light (hindari putih tak terlihat) */
html[data-theme="light"] .lk-hero-teks h1 .lk-area { color: #10233a; }

/* Pengaturan: CTA "Butuh bantuan?" jadi tautan WhatsApp (tanpa gaya tautan default) */
.lk-pesan-minta-tautan { display:block; text-decoration:none; color:inherit; }
.lk-pesan-minta-tautan:hover { border-color: var(--lk-aksen); }

/* Thumbnail/sampul artikel (feat image) + gambar di dalam isi */
.lk-artikel-sampul { display:block; width:100%; max-height:360px; object-fit:cover; border-radius:16px; margin:0 0 18px; box-shadow:0 10px 24px rgba(30,47,68,.12); }
.lk-konten-artikel img { max-width:100%; height:auto; border-radius:12px; }

/* ============================================================================
   HOMEPAGE: kartu Lowongan Terbaru — wadah penampung (badan) + flex-wrap
   Struktur DOM: link > [logo] + [badan].  .lk-posting-badan berisi
   .lk-posting-intro (badge/waktu + judul) DAN .lk-posting-bawah
   (perusahaan/harga & info), jadi di DESKTOP keduanya berada dalam
   container yang sama (kolom kanan sejajar photo; detail mengikuti title).
   MOBILE  : .lk-posting-badan dibuka (display:contents) sehingga
   .lk-posting-bawah keluar ke baris/container sendiri di bawah
   photo+title, lebar penuh (seperti versi sebelumnya).
   Tiap baris dalam flex-wrap sehingga rapi di semua lebar.
   ========================================================================== */
.lk-posting-link {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 0; padding: 13px; color: inherit;
}
.lk-posting-logo { flex: 0 0 218px; width: 218px; margin: 0 16px 0 0; }
.lk-posting-logo img.lk-posting-gambar { object-fit: cover; padding: 0; }
.lk-posting-logo img.lk-posting-logo-img { object-fit: contain; }

/* kartu rekomendasi: thumbnail (cover) dulu, fallback logo perusahaan (contain) */
.lk-rek-logo img.lk-rek-gambar { object-fit: cover; padding: 0; }
.lk-rek-logo img.lk-rek-logo-img { object-fit: contain; }

/* wadah kanan: container yang sama utk intro + bawah (desktop) */
.lk-posting-badan {
  flex: 1 1 0; min-width: 240px;
  display: flex; flex-direction: column; gap: 6px; padding-top: 2px;
}
.lk-posting-intro { display: flex; flex-direction: column; gap: 6px; }
.lk-posting-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.lk-posting-bawah .lk-posting-row1,
.lk-posting-bawah .lk-posting-row2 { display: flex; flex-wrap: wrap; align-items: center; }
.lk-posting-bawah .lk-posting-row1 { justify-content: space-between; gap: 6px 14px; }
.lk-posting-bawah .lk-posting-row2 { gap: 6px 18px; }

.lk-posting-status { display: none; }
.lk-posting-kompetitif { display: none; }

@media (max-width: 640px) {
  .lk-posting-link { flex-direction: row; padding: 10px; }
  .lk-posting-logo { flex: 0 0 116px; width: 116px; margin: 0 12px 0 0; }
  /* badan dibuka -> logo & intro sebaris di atas, bawah turun sendiri di bawah */
  .lk-posting-badan { display: contents; }
  .lk-posting-intro { flex: 1 1 0; min-width: 0; gap: 4px; padding-top: 0; }
  .lk-posting-top { gap: 8px; }

  .lk-posting-bawah {
    flex: 1 1 100%; width: 100%; margin: 2px 0 0;
    padding-top: 8px;
  }
  .lk-posting-bawah .lk-posting-row1 {
    border-top: none;
    justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 4px 10px; padding: 0 0 2px;
  }
  .lk-posting-bawah .lk-posting-row2 {
    border-top: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.22));
    justify-content: space-between; align-items: center; flex-wrap: wrap;
    margin-top: 7px; padding-top: 7px; gap: 4px 12px;
  }

  .lk-posting-gaji { display: none; }
  .lk-posting-kompetitif {
    display: inline-flex; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    color: var(--lk-utama-gelap, #b87714);
  }
  .lk-posting-status { display: inline-flex; }
  .lk-posting-pengalaman { display: none; }

  .lk-posting-judul { margin: 0 0 2px; font-size: 19px; line-height: 1.25; }
  .lk-posting-badge { font-size: 12px; }
  .lk-posting-waktu { font-size: 11px; }
  .lk-posting-perusahaan { font-size: 13px; }
  .lk-posting-item { font-size: 12px; }
}

/* Sentinel muat-berikutnya (infinite scroll home & halaman Lowongan) */
.lk-tuai { display: flex; justify-content: center; align-items: center; padding: 16px 0 4px; min-height: 26px; }
.lk-tuai-status { margin: 0; color: var(--lk-teks-redup, #8fa0b3); font-size: 13.5px; font-weight: 500; }
.lk-tuai-selesai { opacity: .85; }

/* =========================================================
   HEADER MOBILE: topbar ringkas + menu samping (side drawer)
   ========================================================= */
.lk-drawer, .lk-drawer-gelap { display: none; }

@media (max-width: 860px) {
  /* Topbar mobile: logo + [network] [tombol mode] [pasang lowongan] + burger */
  .lk-header-dalam { flex-wrap: nowrap; gap: 8px; min-height: 56px; padding-block: 6px; }
  .lk-brand { font-size: 17px; }
  .lk-brand-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }

  .lk-header-dalam > .lk-tema { display: inline-flex; margin-left: 0; width: 34px; height: 34px; }
  /* Dorong grup kanan mulai dari anak pertama setelah <nav> — yaitu tombol
     Network (bila ada) atau tombol mode. Dengan begitu tombol Network selalu
     menempel di samping tombol mode gelap/terang di topbar mobile. */
  .lk-header-dalam > .lk-nav + * { margin-left: auto; }
  .lk-header-dalam > .lk-cta-pasang { display: inline-flex; padding: 7px 12px; font-size: 13.5px; white-space: nowrap; margin:0px; }
  .lk-header-dalam > .lk-hamburger { margin-left: 0; border: 1px solid var(--lk-garis); border-radius: 9px; }
  .lk-header-dalam > .lk-hamburger span { width: 18px; margin: 2px 0; }

  /* Nama situs TETAP tampil di samping logo kecil sejak permintaan klien
     (logo kecil + teks) — ukuran & elipsisnya diatur di blok "TOPBAR MOBILE"
     di akhir berkas. */

  /* Network ringkas: tombol kecil + daftar turun */
  .lk-net-mini { display: block; position: relative; flex: none; }
  .lk-net-mini > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 10px; border: 1px solid var(--lk-garis); border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--lk-teks);
    list-style: none; white-space: nowrap;
  }
  .lk-net-mini > summary::-webkit-details-marker { display: none; }
  .lk-net-mini > summary:hover { color: var(--lk-utama-cerah); border-color: var(--lk-utama-cerah); background: var(--lk-utama-muda); }
  .lk-net-mini[open] > summary { color: var(--lk-utama-cerah); border-color: var(--lk-utama-cerah); }
  .lk-net-mini-ikon { width: 17px; height: 17px; flex: none; }
  .lk-net-mini-list {
    position: absolute; top: calc(100% + 8px); left: 0; right: auto; z-index: 120;
    min-width: 170px; max-width: calc(100vw - 24px); padding: 6px; display: grid; gap: 2px;
    background: var(--lk-permukaan, #141e29);
    border: 1px solid var(--lk-garis); border-radius: 12px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  }
  .lk-net-mini-list a {
    display: block; padding: 8px 10px; border-radius: 8px;
    font-size: 13.5px; color: var(--lk-teks);
  }
  .lk-net-mini-list a:hover { background: var(--lk-utama-muda); color: var(--lk-utama-cerah); }

  .lk-drawer-gelap {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(5, 8, 12, 0.55); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #lk-nav-toggle:checked ~ .lk-drawer-gelap { opacity: 1; pointer-events: auto; }

  .lk-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0;
    z-index: 160; width: min(320px, 86vw);
    background: var(--lk-permukaan, #111923); color: var(--lk-teks, #e8eef5);
    border-left: 1px solid var(--lk-garis);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(102%); transition: transform 0.24s ease;
    overflow: hidden;
  }
  #lk-nav-toggle:checked ~ .lk-drawer { transform: translateX(0); }

  .lk-drawer-kepala {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 14px; border-bottom: 1px solid var(--lk-garis);
  }
  .lk-drawer-tutup {
    border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1;
    color: var(--lk-teks-redup); padding: 0 6px; border-radius: 8px;
  }
  .lk-drawer-tutup:hover { color: var(--lk-utama-cerah); background: var(--lk-utama-muda); }

  .lk-drawer-isi { flex: 1; overflow-y: auto; padding: 8px 14px 28px; }
  .lk-drawer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .lk-drawer-nav a {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
    font-weight: 600; font-size: 15px; color: var(--lk-teks);
  }
  .lk-drawer-nav a:hover { background: var(--lk-utama-muda); color: var(--lk-utama-cerah); }
  .lk-drawer-nav .lk-nav-ikon { width: 19px; height: 19px; flex: none; }

  .lk-drawer-kaki {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lk-garis);
    display: flex; flex-direction: column; gap: 10px;
  }
  .lk-drawer-kaki .lk-tema-drawer {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 11px 12px; border-radius: 10px; border: 1px solid var(--lk-garis);
    background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--lk-teks); cursor: pointer;
  }
  .lk-drawer-kaki .lk-tema-drawer:hover { border-color: var(--lk-utama-cerah); color: var(--lk-utama-cerah); background: var(--lk-utama-muda); }
  .lk-drawer-kaki .lk-tema-drawer svg { width: 17px; height: 17px; }
  .lk-drawer-kaki .lk-tema-drawer .lk-tema-bulan { display: none; }
  html[data-theme="light"] .lk-drawer-kaki .lk-tema-drawer .lk-tema-matahari { display: none; }
  html[data-theme="light"] .lk-drawer-kaki .lk-tema-drawer .lk-tema-bulan { display: block; }
  .lk-cta-drawer { display: flex; justify-content: center; width: 100%; }

  /* sidebar mobile — "Temukan Kami di": ikon polos (tanpa latar), kecil, rata tengah */
  .lk-drawer-temukan { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lk-garis); }
  .lk-drawer-temukan-judul {
    margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; text-align: center; color: var(--lk-teks-redup);
  }
  .lk-drawer-sosial {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
    margin: 0 0 14px; padding: 0; list-style: none;
  }
  .lk-drawer-sosial a {
    display: grid; place-items: center; width: 26px; height: 26px;
    transition: transform .18s ease;
  }
  /* warna di-set di <svg> karena .lk-ikon-sosmed punya color:#fff sendiri */
  .lk-drawer-sosial svg { width: 16px; height: 16px; color: var(--lk-teks-redup); transition: color .18s ease; }
  .lk-drawer-sosial a:hover svg { color: var(--lk-utama-cerah); }
  .lk-drawer-sosial a:hover { transform: translateY(-1px); }
  /* deret tautan kecil di bawahnya */
  .lk-drawer-tautan {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px;
    margin: 0; padding: 0; list-style: none; font-size: 12px;
  }
  .lk-drawer-tautan a { color: var(--lk-teks-redup); }
  .lk-drawer-tautan a:hover { color: var(--lk-utama-cerah); text-decoration: underline; }
}

/* =========================================================
   BAR BAWAH MOBILE: Riwayat | Simpan (ala referensi lokerjogja)
   <=960px: sidebar kanan disembunyikan, Riwayat/Simpan pindah ke bar
   melayang fixed di bawah (tablet & mobile).
   ========================================================= */
.lk-tab-bawah { display: none; }

@media (max-width: 960px) {
  .lk-tab-bawah {
    display: inline-flex; align-items: center; gap: 0;
    position: fixed; left: 50%;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    transform: translateX(-50%); z-index: 200;
    background: rgba(20, 30, 41, 0.92); backdrop-filter: blur(8px);
    border: 1px solid rgba(126, 151, 181, 0.3);
    border-radius: 999px; padding: 5px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  }
  .lk-tab-bawah-tombol {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border: 0; border-radius: 999px;
    background: transparent; cursor: pointer;
    font-family: var(--lk-font-judul, "Fredoka", sans-serif);
    font-size: 14px; font-weight: 500; color: #cfdbe8;
  }
  .lk-tab-bawah-tombol:hover { color: #fff; background: rgba(218, 151, 34, 0.18); }
  .lk-tab-bawah-tombol:active { transform: scale(0.98); }
  .lk-tab-bawah-ikon {
    flex: none; width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .lk-tab-bawah-pisah { width: 1px; height: 18px; background: rgba(126, 151, 181, 0.3); }

  /* ruang agar konten tak tertutup bar bawah */
  body { padding-bottom: 112px; }
  body.lk-overlay-buka .lk-tab-bawah { display: none; }

  /* <=960: sidebar kanan (riwayat/simpan + kategori) disembunyikan,
     digantikan bar bawah. lk-sidebar-wrap = pembungkusnya. */
  .lk-sidebar-wrap { display: none; }
  .lk-home-samping { display: none; }
}

html[data-theme="light"] .lk-tab-bawah { background: rgba(255, 255, 255, 0.95); border-color: #d5e0ec; box-shadow: 0 10px 26px rgba(30, 47, 68, 0.14); }
html[data-theme="light"] .lk-tab-bawah-tombol { color: #4c5f73; }
html[data-theme="light"] .lk-tab-bawah-tombol:hover { color: #8a5a08; background: #fbeed7; }
html[data-theme="light"] .lk-tab-bawah-pisah { background: #d8e2ec; }

html[data-theme="light"] .lk-net-mini > summary { color: #1e2f44; border-color: #d5e0ea; }
html[data-theme="light"] .lk-net-mini > summary:hover { color: #b87714; border-color: #da9722; background: #fbeed7; }
html[data-theme="light"] .lk-net-mini-list { background: #fff; border-color: #dce5ef; box-shadow: 0 16px 30px rgba(30, 47, 68, 0.14); }
html[data-theme="light"] .lk-net-mini-list a { color: #1e2f44; }

/* Layar sangat sempit: sembunyikan teks merek agar tombol topbar muat */
@media (max-width: 420px) {
  .lk-header-dalam > .lk-cta-pasang { font-size: 13px; padding: 7px 10px; }

  /* Tombol Network jadi ikon globe saja supaya grup kanan (network + mode +
     pasang + burger) tetap muat tanpa terpotong. Label tetap ada di title/aria. */
  .lk-net-mini > summary { padding: 7px 9px; }
  .lk-net-mini > summary > span { display: none; }
}
@media (max-width: 375px) {
  .lk-header-dalam { gap: 6px; }
  .lk-header-dalam > .lk-cta-pasang { padding: 7px 8px; font-size: 12.5px; margin:0px; }
}

/* Pastikan mencentang burger TIDAK memunculkan menu dropdown lama di header;
   yang terbuka hanya side drawer */
@media (max-width: 860px) {
  #lk-nav-toggle:checked ~ .lk-header-dalam .lk-nav { display: none; }
}

/* Burger (SVG) — ikon selalu tampil jelas di mobile */
.lk-hamburger-ikon { width: 20px; height: 20px; flex: none; stroke: currentColor; }
@media (max-width: 860px) {
  .lk-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 34px; height: 34px; padding: 0;
    margin-left: 0; border: 1px solid var(--lk-garis); border-radius: 9px;
    color: var(--lk-teks); background: transparent; cursor: pointer;
  }
  .lk-hamburger:hover { color: var(--lk-utama-cerah); border-color: var(--lk-utama-cerah); background: var(--lk-utama-muda); }
  html[data-theme="light"] .lk-hamburger { color: #1e2f44; border-color: #d5e0ea; }
  html[data-theme="light"] .lk-hamburger:hover { color: #b87714; border-color: #da9722; background: #fbeed7; }
}


@media (max-width:320px){
  .lk-posting-logo{
    flex:0 80px;
  }
}

/* Profesi disembunyikan di mobile/tablet (sidebar & drawer); pemicunya di bar bawah */
@media (max-width: 960px) {
  .lk-hide-profesi { display: none !important; }
}

/* Panel filter Profesi — memenuhi area antara topbar & bar bawah */
.lk-panel-filter { display: none; }
@media (max-width: 960px) {
  .lk-panel-filter {
    display: none;
    position: fixed; top: 57px; left: 0; right: 0; bottom: 60px; z-index: 220;
    flex-direction: column;
    background: var(--lk-latar, #080b10); color: var(--lk-teks, #e8eef5);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.18);
  }
  .lk-panel-filter.lk-panel-buka { display: flex; }
  .lk-panel-filter-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px 11px; border-bottom: 1px solid var(--lk-garis);
  }
  .lk-panel-filter-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--lk-teks); }
  .lk-panel-filter-tutup {
    border: 0; background: none; color: var(--lk-teks-redup);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
  }
  .lk-panel-filter-tutup:hover { color: var(--lk-utama-cerah); }
  .lk-panel-filter-isi { flex: 1; overflow-y: auto; padding: 6px 14px 24px; }
  .lk-panel-filter-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px;
  }
  .lk-panel-filter-list a {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    border-radius: 9px; font-size: 14.5px; color: var(--lk-teks);
  }
  .lk-panel-filter-list a::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--lk-utama-cerah); opacity: 0.85; flex: none;
  }
  .lk-panel-filter-list a:hover { background: var(--lk-utama-muda); color: var(--lk-utama-cerah); }
}
html[data-theme="light"] .lk-panel-filter { background: #f4f7fb; color: #1e2f44; }

/* Bar bawah: FULL WIDTH, nempel ke bawah, tanpa rounded */
@media (max-width: 960px) {
  .lk-tab-bawah {
    left: 0; right: 0; bottom: 0; transform: none;
    width: 100%; display: flex; align-items: stretch;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.3));
    padding: 0;
    background: var(--lk-permukaan, rgba(17, 25, 35, 0.96));
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.16);
  }
  .lk-tab-bawah-tombol {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 11px 4px calc(11px + env(safe-area-inset-bottom, 0px));
    border-radius: 0; font-size: 13.5px;
  }
  .lk-tab-bawah-tombol + .lk-tab-bawah-tombol { border-left: 1px solid var(--lk-garis, rgba(126, 151, 181, 0.3)); }
  .lk-tab-bawah-pisah { display: none; }
}
html[data-theme="light"] .lk-tab-bawah { background: rgba(255, 255, 255, 0.97); border-top-color: #e0e8f0; }
html[data-theme="light"] .lk-tab-bawah-tombol { color: #4c5f73; }

/* Panel Profesi rapat ke atas bar bawah (tinggi bar ~40px + safe-area) */
@media (max-width: 960px) {
  .lk-panel-filter { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* Overlay Riwayat/Simpan: ikut tema (perbaiki mode terang yang masih gelap) */
.lk-overlay-box { background: var(--lk-latar, #111923); color: var(--lk-teks, #e8eef5); border-color: var(--lk-garis, rgba(126,151,181,0.25)); }
.lk-overlay-head { border-bottom-color: var(--lk-garis, rgba(126,151,181,0.18)); }
.lk-overlay-head h2 { color: var(--lk-teks, #eef3f8); }
.lk-overlay-close { color: var(--lk-teks-redup, #8fa0b3); }
.lk-overlay-close:hover { color: var(--lk-utama-cerah, #f0b24b); }
.lk-overlay-item { background: var(--lk-permukaan, #141e29); border-color: var(--lk-garis, rgba(126,151,181,0.16)); }
.lk-overlay-item > a { color: var(--lk-teks, inherit); }
.lk-overlay-item a:hover .lk-overlay-info strong { color: var(--lk-utama-cerah, #f0b24b); }
.lk-overlay-info strong { color: var(--lk-teks, #eef3f8); }
.lk-overlay-info small { color: var(--lk-teks-redup, #8fa0b3); }
.lk-overlay-kosong { color: var(--lk-teks-redup, #8fa0b3); border-color: var(--lk-garis, rgba(126,151,181,0.25)); }

/* <=960: Riwayat/Simpan tampil spt panel Profesi — penuh di antara topbar & bar,
   tanpa lapisan redup/overlay; bar bawah tetap terlihat */
@media (max-width: 960px) {
  .lk-overlay { inset: 57px 0 calc(40px + env(safe-area-inset-bottom, 0px)); padding: 0; align-items: stretch; justify-content: stretch; }
  .lk-overlay-bg { display: none; }
  /* kotak = panel penuh, gaya mengikuti .lk-panel-filter (radius 0, latar, bayangan) */
  .lk-overlay-box {
    width: 100%; max-width: none; max-height: none;
    border: 0; border-radius: 0;
    background: var(--lk-latar, #080b10);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.18);
  }
  /* kepala & isi disamakan dgn panel Profesi (padding, ukuran judul) */
  .lk-overlay-head { padding: 13px 16px 11px; }
  .lk-overlay-head h2 { font-size: 18px; font-weight: 700; color: var(--lk-teks); }
  .lk-overlay-close { color: var(--lk-teks-redup); }
  .lk-overlay-close:hover { color: var(--lk-utama-cerah); }
  .lk-overlay-isi { flex: 1; padding: 6px 14px 24px; }
  body.lk-overlay-buka .lk-tab-bawah { display: flex; }
}

/* Header di 861-960px masih header desktop (65px), jadi top panel/overlay ikut 65px */
@media (min-width: 861px) and (max-width: 960px) {
  .lk-panel-filter { top: 65px; }
  .lk-overlay { inset: 65px 0 calc(40px + env(safe-area-inset-bottom, 0px)) 0; }
}

/* Side drawer: cegah tombol Pasang Lowongan overflow horizontal */
@media (max-width: 860px) {
  .lk-drawer-isi { overflow-x: hidden; }
  .lk-drawer-kaki > * { box-sizing: border-box; width: 100%; }
}

/* Homepage search: kompak di mobile (≤640) */
@media (max-width: 640px) {
  .lk-pencarian { gap: 8px; padding: 6px 12px 12px; marign-top:60px}
  .lk-pencarian-baris { gap: 10px; }
  .lk-pencarian input[type="search"],
  .lk-pencarian select { height: 36px; font-size: 16px; padding: 0 2px 2px; }
  .lk-submit-cari { height: 36px; font-size: 15px; padding: 0 12px 0 36px; border-radius: 9px; background-position: 11px center; background-size: 18px 18px; }
  .lk-pencarian .lk-pchip { margin-top: 2px; }
  .lk-pencarian .lk-pchip-pilihan { gap: 6px; margin-top: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom:6px; }
  .lk-pchip label span { padding: 5px 11px 4px; font-size: 13px; border-radius: 9px; }
}

/* Iklan placeholder: jangan overflow (padding/border ikut box) */
.lk-iklan-palsu { box-sizing: border-box; max-width: 100%; }

/* Form pencarian: jangan melebihi induk (padding masuk dalam box) */
.lk-pencarian { box-sizing: border-box; max-width: 100%; }

/* Tombol Cari: latar kuning solid (bukan gradasi) */
.lk-submit-cari {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>");
  background-color: #da9722;
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
  box-shadow: none;
}

/* Homepage mobile: sidebar kategori (pendidikan/pengalaman/lokasi dll) disembunyikan */
@media (max-width: 640px) {
  .lk-samping-beranda { display: none !important; }
}

/* ============================================================================
   FITUR: Ikuti Kami (bawah-kanan), popup iklan awal, modal daftar lowongan,
          kartu kewaspadaan/laporkan, menu Network
   ========================================================================== */

/* ---- Widget "Ikuti Kami" ----
   Pola "flying social": deretan tombol BULAT warna brand tersusun vertikal,
   tanpa kartu (mengapung + bayangan). column-reverse membuat tombol pemicu
   selalu menempel di bawah; deretan ikon terbuka DI ATASNYA.
   Tombol pemicunya memakai GAMBAR dari klien (public/img/ikuti-kami.png):
   label "Ikuti Kami" + ikon sosial sudah menyatu di dalam gambarnya, jadi tidak
   ada teks/ikon tambahan. Saat terbuka gambar tetap tampil dan muncul lencana
   tutup (✕) di pojok kanan-atas — posisinya tidak berpindah. */
.lk-ikuti { position: fixed; right: 16px; bottom: 16px; z-index: 210; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.lk-ikuti-pil {
  position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  transition: transform .15s ease;
}
.lk-ikuti-gambar {
  display: block; width: auto; height: 40px;
  filter: drop-shadow(0 6px 14px rgba(14, 31, 46, .3));
}
.lk-ikuti-pil:hover { transform: translateY(-2px); }
.lk-ikuti-pil:active { transform: scale(.97); }
.lk-ikuti-pil:focus-visible { outline: 2px solid var(--lk-utama, #da9722); outline-offset: 3px; }
/* Lencana tutup (hanya muncul saat panel terbuka). */
.lk-ikuti-silang {
  position: absolute; top: -7px; right: -7px; display: none;
  width: 24px; height: 24px; place-items: center; border-radius: 50%;
  background: #0e1f2e; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.lk-ikuti-buka .lk-ikuti-silang { display: grid; }
/* Deretan ikon: bisa digulir bila channel-nya banyak.
   Scrollbar SENGAJA disembunyikan (masih bisa digulir dgn roda mouse / sentuh /
   keyboard) supaya widget tetap ringkas. */
.lk-ikuti-panel { animation: lk-ikuti-muncul .18s ease-out; }
.lk-ikuti-panel[hidden] { display: none; }
.lk-ikuti-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
  /* Bisa memuat semua kanal, tapi tetap dibatasi tinggi layar supaya tidak
     melewati bagian atas jendela di layar pendek. */
  max-height: min(56vh, 600px); overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scroll-behavior: smooth;
  -ms-overflow-style: none;         /* Edge lama */
}
.lk-ikuti-sosmed {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; color: #fff;
  transition: transform .15s ease, filter .15s ease;
}
.lk-ikuti-sosmed:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.08); }
.lk-ikuti-sosmed svg { width: 22px; height: 22px; }
/* Warna tombol mengikuti brand tiap kanal (inline style dari App\Support\Sosial,
   satu sumber dgn footer & drawer). */
@keyframes lk-ikuti-muncul {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .lk-ikuti { right: 12px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}
html[data-theme="light"] .lk-ikuti-panel::-webkit-scrollbar-thumb { background: rgba(30, 47, 68, .28); }

/* ---- Popup iklan awal ---- */
.lk-popiklan { position: fixed; inset: 0; z-index: 340; display: flex; align-items: center; justify-content: center; padding: 18px; }
.lk-popiklan[hidden] { display: none; }
.lk-popiklan-bg { position: absolute; inset: 0; background: rgba(5, 8, 12, 0.72); }
.lk-popiklan-box {
  position: relative; width: min(420px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--lk-permukaan, #111923); border: 1px solid var(--lk-garis);
  border-radius: 16px; padding: 16px; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.lk-popiklan-tutup { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--lk-teks-redup); font-size: 26px; line-height: 1; cursor: pointer; z-index: 1; }
.lk-popiklan-tutup:hover { color: var(--lk-utama-cerah); }
.lk-popiklan-isi { margin: 4px 0 10px; }
.lk-popiklan-isi .lk-iklan-palsu { min-height: 220px; }
.lk-popiklan-tutupbawah { width: 100%; justify-content: center; }
html[data-theme="light"] .lk-popiklan-box { background: #fff; border-color: #dce5ef; }

/* ---- Modal daftar lowongan ---- */
.lk-kirim-buka { overflow: hidden; }
.lk-kirim-modal { position: fixed; inset: 0; z-index: 330; display: flex; align-items: center; justify-content: center; padding: 18px; }
.lk-kirim-modal[hidden] { display: none; }
.lk-kirim-modal-bg { position: absolute; inset: 0; background: rgba(5, 8, 12, 0.74); }
.lk-kirim-modal-box {
  position: relative; width: min(460px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--lk-permukaan, #111923); color: var(--lk-teks, #e8eef5);
  border: 1px solid var(--lk-garis); border-radius: 16px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.lk-kirim-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 12px; border-bottom: 1px solid var(--lk-garis); }
.lk-kirim-modal-head h2 { margin: 0; font-size: 19px; }
.lk-kirim-modal-x { border: 0; background: none; color: var(--lk-teks-redup); font-size: 26px; line-height: 1; cursor: pointer; }
.lk-kirim-modal-x:hover { color: var(--lk-utama-cerah); }
.lk-kirim-form { padding: 6px 18px 20px; overflow-y: auto; display: grid; gap: 12px; }
.lk-kirim-form .lk-kirim-intro { margin: 6px 0 0; color: var(--lk-teks-redup); font-size: 13px; line-height: 1.5; }
.lk-kirim-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.lk-kirim-form input, .lk-kirim-form select {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; font-weight: 400; color: inherit;
  background: var(--lk-latar, #080b10); border: 1px solid var(--lk-garis); border-radius: 9px;
}
.lk-kirim-form input:focus, .lk-kirim-form select:focus { outline: none; border-color: var(--lk-utama-cerah); }
.lk-kirim-modal-aksi { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.lk-kanal-kartu.lk-kanal-kirim { cursor: pointer; }
.lk-lamar-alamat { cursor: default; }
html[data-theme="light"] .lk-kirim-modal-box { background: #fff; color: #1e2f44; border-color: #dce5ef; }
html[data-theme="light"] .lk-kirim-form input, html[data-theme="light"] .lk-kirim-form select { background: #f4f7fb; border-color: #d5e0ea; }

/* ---- Kartu kewaspadaan & laporkan ---- */
.lk-waspada {
  margin: 22px 0 6px; padding: 16px 18px;
  background: var(--lk-permukaan, #111923); border: 1px solid rgba(218, 151, 34, 0.4);
  border-radius: 14px; color: var(--lk-teks, #e8eef5);
}
.lk-waspada h2 { margin: 0 0 8px; font-size: 16px; color: var(--lk-utama-cerah, #f0b24b); }
.lk-waspada ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; color: var(--lk-teks-redup); font-size: 13.5px; }
.lk-waspada-aksi { display: flex; }
.lk-waspada-aksi .lk-tombol { margin-left: auto; }
html[data-theme="light"] .lk-waspada { background: #fff7ea; border-color: #f2d49a; color: #1e2f44; }

/* ---- Network: pembatas di drawer ---- */
.lk-drawer-divider { height: 1px; background: var(--lk-garis); margin: 8px 0; }

/* Body rich-text pada detail lowongan (Tiptap HTML) */
.lk-loker-body { line-height: 1.7; color: var(--lk-teks, #e8eef5); }
.lk-loker-body h2, .lk-loker-body h3, .lk-loker-body h4 {
  margin: 18px 0 8px; color: var(--lk-teks, #e8eef5);
  font-family: var(--lk-font-judul, "Fredoka", sans-serif); line-height: 1.3;
}
.lk-loker-body p { margin: 0 0 12px; }
.lk-loker-body ul, .lk-loker-body ol { margin: 0 0 14px; padding-left: 22px; }
.lk-loker-body li { margin: 4px 0; }
.lk-loker-body a { color: var(--lk-utama-cerah, #f0b24b); text-decoration: underline; }
.lk-loker-body blockquote { margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid var(--lk-utama-cerah, #f0b24b); background: var(--lk-utama-muda, rgba(218,151,34,.16)); border-radius: 0 10px 10px 0; }
.lk-loker-body img { max-width: 100%; height: auto; border-radius: 10px; }
html[data-theme="light"] .lk-loker-body { color: #1e2f44; }

/* ========================================================================
   HALAMAN PERUSAHAAN (/perusahaan/<slug>) — profil singkat + daftar lowongan
   ======================================================================== */
.lk-kepala-perusahaan {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px; margin-bottom: 18px;
  background: #111923; border: 1px solid rgba(126, 151, 181, 0.18); border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.lk-perusahaan-logo {
  flex: none; display: grid; place-items: center; overflow: hidden;
  width: 108px; height: 108px; padding: 8px; border-radius: 14px;
  background: #fff; color: #1c3046;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 34px; font-weight: 700;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}
.lk-perusahaan-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lk-perusahaan-isi { min-width: 0; }
.lk-perusahaan-label {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--lk-utama-cerah, #f0b24b);
}
.lk-perusahaan-isi h1 { margin: 4px 0 8px; font-size: 26px; line-height: 1.25; }
.lk-perusahaan-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0;
  color: var(--lk-teks-redup, #9fb0c3); font-size: 14px;
}
.lk-perusahaan-butir { display: inline-flex; align-items: center; gap: 7px; }
.lk-perusahaan-butir svg { width: 15px; height: 15px; opacity: 0.85; }
.lk-perusahaan-deskripsi {
  margin: 10px 0 0; max-width: 68ch;
  color: var(--lk-teks-redup, #9fb0c3); font-size: 14.5px; line-height: 1.6;
}
.lk-perusahaan-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lk-tombol-wa { background: #1faa55; border-color: #1faa55; color: #fff; }
.lk-tombol-wa:hover { background: #178f47; border-color: #178f47; color: #fff; }

/* Nama & logo perusahaan di detail lowongan = tautan ke halaman perusahaan */
.lk-loker-perusahaan a { color: inherit; text-decoration: none; }
.lk-loker-perusahaan a:hover, .lk-loker-perusahaan a:focus-visible { text-decoration: underline; }
a.lk-logo-loker { text-decoration: none; }
a.lk-logo-loker:hover, a.lk-logo-loker:focus-visible {
  outline: 2px solid var(--lk-utama-cerah, #f0b24b); outline-offset: 3px;
}

@media (max-width: 640px) {
  .lk-kepala-perusahaan { flex-direction: column; gap: 14px; padding: 16px; }
  .lk-perusahaan-logo { width: 84px; height: 84px; font-size: 26px; border-radius: 12px; }
  .lk-perusahaan-isi h1 { font-size: 21px; }
}

html[data-theme="light"] .lk-kepala-perusahaan {
  background: #fff; border-color: #e3eaf2;
  box-shadow: 0 1px 2px rgba(30, 47, 68, 0.05), 0 8px 18px rgba(30, 47, 68, 0.06);
}
html[data-theme="light"] .lk-perusahaan-logo { border: 1px solid #e3eaf2; box-shadow: none; }
html[data-theme="light"] .lk-perusahaan-isi h1 { color: #1e2f44; }
html[data-theme="light"] .lk-perusahaan-meta,
html[data-theme="light"] .lk-perusahaan-deskripsi { color: #5a6f85; }
html[data-theme="light"] .lk-perusahaan-label { color: var(--lk-utama-gelap, #b87714); }

/* ---------------------------------------------------------------------------
   LOWONGAN TUTUP — batas lamaran terlewat: tidak ada kanal lamaran/CTA, hanya
   pesan mohon maaf + arahan ke lowongan terbaru (lihat jobs/show.blade.php).
   --------------------------------------------------------------------------- */
.lk-lamar-tutup {
  margin-top: 28px;
  padding: 18px 20px 20px;
  border: 1px solid var(--lk-garis, rgba(126, 151, 181, .2));
  border-top-color: var(--lk-garis, rgba(126, 151, 181, .2));
  border-radius: 14px;
  background: var(--lk-latar, #080b10);
}
.lk-lamar-tutup .lk-loker-judul { margin: 0 0 10px; }
.lk-lamar-tutup-pesan {
  margin: 0 0 8px;
  font-family: var(--lk-font-judul, inherit);
  font-size: 19px;
  font-weight: 600;
  color: var(--lk-teks, #e8eef5);
}
.lk-lamar-tutup-info {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--lk-teks-redup, #9fb0c3);
}
.lk-lamar-tutup-info a { color: var(--lk-utama-cerah, #f0b24b); font-weight: 600; }

.lk-label-tutup { background: rgba(126, 151, 181, .2); color: var(--lk-teks-redup, #9fb0c3); }

html[data-theme="light"] .lk-lamar-tutup { background: #f7f9fc; border-color: #e2e9f1; }
html[data-theme="light"] .lk-lamar-tutup-pesan { color: #1e2f44; }
html[data-theme="light"] .lk-lamar-tutup-info { color: #5a6f85; }
html[data-theme="light"] .lk-lamar-tutup-info a { color: var(--lk-utama-gelap, #b87714); }
html[data-theme="light"] .lk-label-tutup { background: #e9edf2; color: #5a6f85; }

/* ---------------------------------------------------------------------------
   LAPORAN LOWONGAN — textarea popup, pesan galat, & banner sukses
   --------------------------------------------------------------------------- */
.lk-kirim-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; font-weight: 400;
  color: inherit; background: var(--lk-latar, #080b10);
  border: 1px solid var(--lk-garis); border-radius: 9px; resize: vertical; min-height: 96px;
}
.lk-kirim-form textarea:focus { outline: none; border-color: var(--lk-utama-cerah); }
.lk-kirim-form .lk-galat { margin: -4px 0 0; font-size: 12.5px; color: #ff8b8b; }

.lk-laporan-sukses {
  margin: 22px 0 0; padding: 13px 16px;
  background: rgba(16, 169, 187, 0.12); border: 1px solid rgba(16, 169, 187, 0.45);
  border-radius: 12px; color: var(--lk-teks, #e8eef5); font-size: 14px;
}

html[data-theme="light"] .lk-kirim-form textarea { background: #f4f7fb; border-color: #d5e0ea; }
html[data-theme="light"] .lk-kirim-form .lk-galat { color: #d43d3d; }
html[data-theme="light"] .lk-laporan-sukses { background: #e8f7f9; border-color: #9fd8e0; color: #10333a; }

html[data-theme="light"] .lk-laporan-sukses p { margin: 0; }
.lk-laporan-sukses p { margin: 0; }
.lk-laporan-sukses .lk-laporan-sukses-manual { margin-top: 7px; font-size: 13px; }
.lk-laporan-sukses a { color: var(--lk-utama-cerah, #f0b24b); font-weight: 600; }
html[data-theme="light"] .lk-laporan-sukses a { color: var(--lk-utama-gelap, #b87714); }

/* ---------------------------------------------------------------------------
   RINGKASAN LOWONGAN — label tiap baris diberi ikon garis (senada ikon kartu)
   --------------------------------------------------------------------------- */
.lk-ringkasan-loker dt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lk-ringkas-ikon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--lk-utama-cerah, #f0b24b);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="light"] .lk-ringkas-ikon { stroke: var(--lk-utama-gelap, #b87714); }

/* ==========================================================================
   FILTER WILAYAH BERBASIS PROVINSI (sidebar /lowongan, */
/* Judul provinsi bisa diklik untuk memfilter seluruh provinsi; kota di bawahnya. */
.lk-prov { display: flex; flex-direction: column; gap: 2px; }
.lk-prov-judul {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: 8px;
  font-family: var(--lk-font-judul); font-size: 12.5px; font-weight: 600;
  color: var(--lk-teks-redup); text-decoration: none;
}
.lk-prov-judul:hover { color: var(--lk-utama-cerah); background: var(--lk-utama-muda); }
.lk-prov-judul.is-aktif { color: #fff; background: var(--lk-utama); }
.lk-prov-jumlah {
  margin-left: auto; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: var(--lk-latar); color: var(--lk-teks-redup);
}
.lk-prov-judul.is-aktif .lk-prov-jumlah { background: rgba(255, 255, 255, .22); color: #fff; }
.lk-prov .lk-daftar-link { margin: 0 0 6px 10px; }
.lk-prov-lain { margin-top: 4px; }
.lk-prov-lain > summary {
  cursor: pointer; list-style: none; padding: 7px 8px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--lk-utama-cerah);
}
.lk-prov-lain > summary::-webkit-details-marker { display: none; }
.lk-prov-lain > summary:hover { background: var(--lk-utama-muda); }
.lk-prov-lain[open] > summary { margin-bottom: 4px; }

html[data-theme="light"] .lk-prov-judul:hover { color: var(--lk-utama-gelap); }
html[data-theme="light"] .lk-prov-judul.is-aktif { background: var(--lk-utama-gelap); }
html[data-theme="light"] .lk-prov-lain > summary { color: var(--lk-utama-gelap); }

/* --- penanda area iklan AdSense di mode dev (setelah unit <ins> yang kosong) --- */
.lk-iklan-palsu-debug { margin-top: 8px; border-style: dashed; }
.lk-iklan-palsu-debug small { text-transform: none; }
/* --- popup iklan: gambar isi sendiri dari pengaturan (Opsional) --- */
.lk-popiklan-tautan { display: block; line-height: 0; border-radius: 12px; }
.lk-popiklan-gambar { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; margin: 0 auto; border-radius: 12px; }
.lk-popiklan-tautan:hover .lk-popiklan-gambar { opacity: .94; }

/* ---- LOGO SITUS (unggahan: Pengaturan Website -> Logo & Ikon) ----
   `logo_besar` = logo lengkap (gambar + teks) menggantikan tulisan nama situs;
   `logo_kecil` = ikon saja untuk penanda kecil (<x-logo-mark>) & favicon. */
.lk-brand-logo { display: block; height: 40px; width: auto; max-width: min(210px, 46vw); object-fit: contain; }
.lk-brand-mark-gambar { background: none; box-shadow: none; border-radius: 0; }
.lk-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lk-brand-footer .lk-brand-logo { height: 46px; max-width: min(230px, 60vw); }
/* Layar lebar: logo BESAR berdiri sendiri (penanda kecil & nama situs
   disembunyikan). Di layar sempit justru sebaliknya — penanda logo KECIL + nama
   situs, lihat blok ≤860px "POIN 1 & 2 — TOPBAR MOBILE". */
@media (min-width: 861px) {
  .lk-brand-berlogo > .lk-brand-mark,
  .lk-brand-berlogo > span:last-child { display: none; }
}
@media (max-width: 860px) {
  .lk-brand-logo { height: 32px; max-width: min(180px, 40vw); }
  .lk-brand-footer .lk-brand-logo { height: 40px; }
}
@media (max-width: 420px) {
  .lk-brand-logo { height: 30px; max-width: 36vw; }
}

/* Bagian beraksen (**teks**) pada judul halaman /pasang & keunggulan —
   pengganti <span class="lk-aksen">/<span class="lk-unggul-ringan"> supaya
   seluruh teks judul bisa diubah dari Pengaturan Website. */
.lk-unggul-isi h2 strong { color: var(--lk-utama-cerah); font-weight: 300; }

/* ==========================================================================
   POIN 1 & 2 — TOPBAR MOBILE
   1) Setelah bagian search bar terlewati, topbar beralih ke mode MIDI: logo
      mini + kotak TEKS cari (fokus langsung ke situ saat diklik/disentuh).
      Filter daerah | pendidikan | pengalaman ada di panel ringkas tepat di bawah
      topbar dan langsung diterapkan saat dipilih. Skripnya ada di
      components/partials/header.blade.php.
   2) Di mobile nama situs kembali tampil di samping logo kecil (dipotong
      elipsis bila layar sangat sempit).
   ========================================================================== */

/* Bar cari cepat & panel cari: hanya hidup di layar sempit (≤860px). */
.lk-cari-cepat { display: none; }
.lk-widget-cari { display: none; }
.lk-widget-cari[hidden],
.lk-cari-gelap[hidden] { display: none !important; }

@media (max-width: 860px) {
  .lk-pencarian .lk-pchip{margin-bottom:20px;}
  /* ---------- Poin 2: logo kecil + teks nama situs ---------- */
  /* Logo BESAR selalu diganti logo KECIL (Pengaturan → "Logo & Ikon Situs" →
     Logo Kecil) + nama situs — termasuk di kepala menu samping. */
  .lk-brand-berlogo > .lk-brand-logo { display: none; }
  .lk-header-dalam > .lk-brand { gap: 7px; min-width: 0; font-size: 14.5px; }
  .lk-header-dalam > .lk-brand .lk-brand-mark {
    width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px; flex: none;
  }
  .lk-header-dalam > .lk-brand > span:last-child {
    display: block; max-width: min(34vw, 148px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---------- Poin 1: mode mini (logo mini + kotak TEKS cari) ---------- */
  .lk-header-mini-aktif .lk-header-dalam > .lk-nav,
  .lk-header-mini-aktif .lk-header-dalam > .lk-net-mini,
  .lk-header-mini-aktif .lk-header-dalam > .lk-tema,
  .lk-header-mini-aktif .lk-header-dalam > .lk-cta-pasang,
  .lk-header-mini-aktif .lk-header-dalam > .lk-brand > span:last-child { display: none !important; }

  .lk-header-mini-aktif .lk-header-dalam > .lk-cari-cepat {
    display: block; flex: 1 1 auto; min-width: 0; margin: 0;
  }
  /* Warna memakai token tema supaya benar di mode gelap MAUPUN terang (header
     terang = putih, jadi jangan hardcode gelap). */
  .lk-cari-cepat-kotak {
    display: flex; align-items: center; gap: 4px;
    height: 36px; padding: 0 8px 0 4px;
    width:10px;
    min-width:unset;
    border: 1px solid var(--lk-garis); border-radius: 10px;
    background: var(--lk-latar);
  }
  .lk-cari-cepat-kotak:focus-within { border-color: var(--lk-utama); }
  .lk-cari-cepat-buka {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: var(--lk-teks-redup);
    cursor: pointer;
  }
  .lk-cari-cepat-buka:hover { color: var(--lk-utama-cerah); }
  .lk-cari-cepat-ikon { width: 17px; height: 17px; flex: none; }
  .lk-cari-cepat-masukan {
    flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0;
    background: none; color: var(--lk-teks);
    font: inherit; font-size: 13.5px; font-weight: 600;
    outline: none; appearance: none; -webkit-appearance: none;
  }
  .lk-cari-cepat-masukan::placeholder { color: var(--lk-teks-redup); opacity: 1; }
  .lk-cari-cepat-masukan::-webkit-search-cancel-button,
  .lk-cari-cepat-masukan::-webkit-search-decoration { display: none; }

  /* ---------- Poin 1: panel filter ringkas di bawah topbar ----------
     SATU wadah membungkus 4 elemen: tiga dropdown kecil (daerah | pendidikan |
     pengalaman — hanya padding + teks + sudut membulat, senada kotak cari di
     topbar) dan tombol cari ikon di ujung kanan. Tanpa kotak teks: kata kuncinya
     diketik di kotak cari topbar. */
  .lk-widget-cari {
    display: block; position: fixed; left: 0; right: 0;
    top: var(--lk-header-h, 57px); z-index: 140;
    padding: 8px 10px;
    background: var(--lk-permukaan, #111923);
    border-top: 1px solid var(--lk-garis);
    border-bottom: 1px solid var(--lk-garis);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .38);
  }
  .lk-wc-kotak {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px;
    border: 1px solid var(--lk-garis); border-radius: 10px;
    background: var(--lk-latar);
  }
  .lk-wc-pilih { flex: 1 1 0; min-width: 0; display: block; }
  .lk-wc-pilih select {
    display: block; width: 100%; height: 28px; padding: 0 9px;
    border: 1px solid var(--lk-garis); border-radius: 8px;
    background: var(--lk-permukaan); color: var(--lk-teks);
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
  }
  .lk-wc-pilih select:hover { border-color: var(--lk-utama); }
  .lk-wc-pilih select:focus-visible { outline: 2px solid var(--lk-utama); outline-offset: -2px; }
  /* Filter yang sedang aktif diberi aksen supaya terlihat walau teksnya terpotong. */
  .lk-wc-pilih select.is-aktif { border-color: var(--lk-utama); color: var(--lk-utama-cerah); }
  .lk-wc-cari {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
    background: var(--lk-utama); color: #fff; cursor: pointer;
  }
  .lk-wc-cari:hover { background: var(--lk-utama-gelap); }
  .lk-wc-cari:focus-visible { outline: 2px solid var(--lk-utama-cerah); outline-offset: 2px; }
  .lk-wc-cari svg { width: 15px; height: 15px; }

  /* Layar di belakang panel diredupkan — TIDAK menutup topbar supaya kotak teks
     di topbar tetap bisa disentuh/diketik saat panel terbuka. */
  .lk-cari-gelap {
    display: block; position: fixed; left: 0; right: 0; z-index: 130;
    top: var(--lk-header-h, 57px); bottom: 0;
    background: rgba(6, 17, 28, .5);
  }
}

@media (max-width: 820px) {
  .lk-pencarian .lk-pchip{margin-bottom:10px;margin-top:10px;}
  .lk-pencarian .lk-pchip-pilihan{margin-top:0px;}
}

@media (max-width: 640px) {
  .lk-pencarian .lk-pchip{margin-bottom:5px;}
}

@media (max-width: 560px) {
  .lk-pencarian .lk-pchip{margin-bottom:5px;}
  /* Ruang sangat sempit: tombol mode pindah ke menu samping (sudah ada di sana)
     supaya logo + nama situs tetap terbaca. */
  .lk-header-dalam > .lk-tema { display: none; }
}

/* ============================================================================
   LOGO MENU NETWORK (poin 8) — dipakai di tiga tempat: dropdown desktop
   (.lk-nav-turun), menu mini ponsel (.lk-net-mini), dan drawer (.lk-drawer-nav).
   Komponennya satu: <x-jaringan-logo>.
   ----------------------------------------------------------------------------
   Kotak logo SENGAJA putih di kedua tema (logo brand umumnya gelap/transparan
   sehingga tak terlihat di header gelap) — sama seperti kotak logo kartu
   lowongan. Teks & aksen memakai token tema sehingga mode terang otomatis benar.
   ========================================================================== */
.lk-net-item { display: flex; align-items: center; gap: 9px; }
.lk-net-logo {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: #fff; border: 1px solid var(--lk-garis);
  object-fit: contain; padding: 3px; box-sizing: border-box;
}
.lk-net-logo-inisial {
  display: grid; place-items: center; padding: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  color: #241703; background: linear-gradient(180deg, #f0b24b, var(--lk-utama));
  border-color: rgba(218, 151, 34, .55);
}
/* Isi baris: NAMA situs di atas, TEXT LINK URL di bawahnya. */
.lk-net-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lk-net-nama {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.lk-net-url {
  font-size: 11.5px; font-weight: 500; line-height: 1.3;
  color: var(--lk-teks-redup);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(126, 151, 181, .5);
  overflow-wrap: anywhere;
}
.lk-net-item:hover .lk-net-nama { text-decoration: underline; text-underline-offset: 2px; }
.lk-net-panah { margin-left: auto; align-self: center; font-size: 11px; opacity: .6; }

/* Dropdown desktop: item dua baris (nama + URL) → jarak & pembungkusan disesuaikan. */
.lk-nav-turun .lk-nav-kol a.lk-net-item {
  display: flex; padding: 7px 8px; white-space: normal; line-height: 1.25;
}
.lk-nav-turun .lk-nav-kol a.lk-net-item .lk-net-nama { font-size: 13px; }
html[data-theme="light"] .lk-net-url { text-decoration-color: rgba(30, 47, 68, .35); }

/* Menu mini (ponsel) + drawer: logo sedikit lebih besar, nama mengisi ruang. */
.lk-net-mini-list a.lk-net-item { display: flex; align-items: center; gap: 10px; }
.lk-net-mini-list .lk-net-logo { width: 28px; height: 28px; border-radius: 9px; }
.lk-drawer-nav a.lk-net-item .lk-net-logo { width: 28px; height: 28px; border-radius: 9px; }
html[data-theme="light"] .lk-net-logo { border-color: #dce5ef; }
html[data-theme="light"] .lk-net-logo-inisial { color: #6b4409; }

/* ============================================================================
   BLOK "KIRIM LAMARAN" (poin 9) — struktur mengikuti situs acuan
   ----------------------------------------------------------------------------
   Urutan acuan: judul → daftar kanal "Label : nilai" → baris aksi
   [Lamar ▾] … [Simpan] [Bagikan] → baris info (waktu tayang + Lapor) →
   strip peringatan tipis. Warna memakai token tema sehingga mode gelap MAUPUN
   terang benar tanpa aturan per tema (kecuali beberapa latar transparan).
   ========================================================================== */
.lk-judul-ringan { font-weight: 300; }

/* Satu baris per kanal: [ikon] Label : nilai (+ tombol Salin). */
.lk-lamar-kanal {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 4px 0 16px; list-style: none;
  border-bottom: 1px solid var(--lk-garis);
}
.lk-lk-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.lk-lk-label{display:flex;width:130px;justify-content:space-between}
.lk-lk-label span{width:20%;text-align:right;margin-right:10px;}
.lk-lk-ikon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--lk-utama-cerah);
}
/* Penting: `.lk-ikon-sosmed` global memakai `color:#fff` + kotak 42px — di dalam
   kotak ikon kanal ini ukuran & warnanya dikembalikan ke warna kotak
   (WhatsApp hijau, email aksen), jadi ikon brand tetap terlihat di kedua tema.
   `fill` HANYA di-set untuk ikon brand (glyph padat); ikon baris (`<x-ikon>`)
   tetap `fill: none` + `stroke: currentColor` supaya tidak jadi blok padat. */
.lk-lk-ikon svg { width: 20px; height: 20px; color: inherit; }
.lk-lk-ikon .lk-ikon-sosmed { fill: currentColor; }
.lk-lk-label { color: var(--lk-teks-redup); font-size: 14px; white-space: nowrap; }
.lk-lk-nilai {
  min-width: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--lk-teks); font-size: 14px;
}
.lk-lk-tautan {
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--lk-utama-cerah); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.lk-lk-tautan:hover { color: var(--lk-utama); }
.lk-lk-salin {
  flex: none; padding: 4px 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--lk-garis);
  color: var(--lk-teks-redup); font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.lk-lk-salin:hover { border-color: var(--lk-utama); color: var(--lk-utama-cerah); }
.lk-lk-salin.lk-salin-berhasil { background: var(--lk-utama); border-color: var(--lk-utama); color: #241703; }

/* ---- baris aksi ---- */
.lk-loker-tool {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; margin-top: 18px;
}
.lk-tool-kiri { position: relative; display:flex; gap:10px;flex-wrap:wrap;  }
.lk-lamar { position: relative; }
.lk-lamar-tombol {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 24px; border-radius: 10px; cursor: pointer;
  font-family: var(--lk-font-judul, "Fredoka", sans-serif); font-size: 15px; font-weight: 500;
  color: #241703; background: linear-gradient(180deg, #f0b24b, var(--lk-utama));
  border: 1px solid rgba(218, 151, 34, 0.55);
  transition: filter 0.16s ease, transform 0.16s ease;
}
.lk-lamar-tombol:hover { filter: brightness(1.06); }
.lk-lamar-tombol:active { transform: translateY(1px); }
.lk-lamar-tombol:focus-visible { outline: 2px solid var(--lk-utama); outline-offset: 2px; }
.lk-lamar-panah { font-size: 11px; opacity: 0.85; }
/* Ikon di dalam tombol (roket "Lamar", share "Bagikan") — ukuran eksplisit
   karena `.lk-ikon` hanya diberi ukuran di CSS admin (halaman publik TIDAK
   memuatnya, jadi tanpa aturan ini SVG-nya membesar sendiri). */
.lk-lamar-tombol .lk-ikon { width: 17px; height: 17px; }
.lk-tool-kiri .lk-tombol .lk-ikon { width: 16px; height: 16px; }
.lk-lamar-float {
  position: absolute; z-index: 6; top: calc(100% + 8px); left: 0;
  /* width:max-content → satu baris kalau ruang cukup, turun baris hanya bila
     melebihi lebar layar (jangan pakai min-width kecil, item jadi menumpuk). */
  width: max-content; max-width: calc(100vw - 32px); padding: 7px;
  background: var(--lk-permukaan); border: 1px solid var(--lk-garis);
  border-radius: 12px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}
.lk-lamar-float ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lk-lamar-float a.lk-lamar-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--lk-garis); color: var(--lk-teks);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1;
}
.lk-lamar-float a.lk-lamar-item svg { width: 15px; height: 15px; color: inherit; flex: none; }
.lk-lamar-float a.lk-lamar-item .lk-ikon-sosmed { fill: currentColor; }

/* Warna representatif per kanal — sama di kedua tema, hanya intensitas latar
   yang dibedakan agar tetap terbaca di permukaan gelap maupun putih.
   CATATAN: selector harus menyertakan `.lk-lamar-float a` (0,2,1) supaya
   menang dari aturan warna dasar item di atas. */
.lk-lamar-float a.lk-lamar-item-formulir { color: #f0b24b; border-color: rgba(240, 178, 75, 0.45); background: rgba(240, 178, 75, 0.12); }
.lk-lamar-float a.lk-lamar-item-formulir:hover { background: rgba(240, 178, 75, 0.24); color: #ffd489; border-color: rgba(240, 178, 75, 0.7); }
.lk-lamar-float a.lk-lamar-item-wa { color: #3ddc7f; border-color: rgba(61, 220, 127, 0.42); background: rgba(61, 220, 127, 0.12); }
.lk-lamar-float a.lk-lamar-item-wa:hover { background: rgba(61, 220, 127, 0.24); color: #7cf0ab; border-color: rgba(61, 220, 127, 0.68); }
.lk-lamar-float a.lk-lamar-item-email { color: #6cb6ff; border-color: rgba(108, 182, 255, 0.42); background: rgba(108, 182, 255, 0.12); }
.lk-lamar-float a.lk-lamar-item-email:hover { background: rgba(108, 182, 255, 0.24); color: #a6d4ff; border-color: rgba(108, 182, 255, 0.68); }

html[data-theme="light"] .lk-lamar-float a.lk-lamar-item-formulir { color: #a9660a; border-color: rgba(169, 102, 10, 0.35); background: rgba(169, 102, 10, 0.08); }
html[data-theme="light"] .lk-lamar-float a.lk-lamar-item-formulir:hover { background: rgba(169, 102, 10, 0.16); color: #8a5a08; }
html[data-theme="light"] .lk-lamar-float a.lk-lamar-item-wa { color: #0f8a4a; border-color: rgba(15, 138, 74, 0.32); background: rgba(15, 138, 74, 0.08); }
html[data-theme="light"] .lk-lamar-float a.lk-lamar-item-wa:hover { background: rgba(15, 138, 74, 0.16); color: #0b6b39; }
html[data-theme="light"] .lk-lamar-float a.lk-lamar-item-email { color: #1d6fd0; border-color: rgba(29, 111, 208, 0.32); background: rgba(29, 111, 208, 0.08); }
html[data-theme="light"] .lk-lamar-float a.lk-lamar-item-email:hover { background: rgba(29, 111, 208, 0.16); color: #14549f; }

.lk-tool-kanan { display: flex; align-items: center; gap: 10px; }
.lk-tool-kanan .lk-tombol { height: 40px; }
.lk-tool-kanan .lk-tombol-simpan { background: var(--lk-permukaan); }
.lk-tool-kanan .lk-tombol-simpan.lk-simpan-aktif { background: var(--lk-utama-muda); color: var(--lk-utama-gelap); border-color: rgba(218, 151, 34, 0.6); }

.lk-bagikan-panel { padding: 12px; border: 1px solid var(--lk-garis); border-radius: 12px; background: var(--lk-permukaan); }
.lk-bagikan-panel:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lk-btn-salin-tautan { background: linear-gradient(180deg, #f0b24b, var(--lk-utama)); color: var(--lk-teks); border: 1px solid var(--lk-garis); }
.lk-btn-salin-tautan.lk-salin-berhasil { background: var(--lk-utama); border-color: var(--lk-utama); color: #241703; }

/* ---- baris info + strip peringatan ---- */
.lk-info-lain {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 18px; font-size: 13.5px; color: var(--lk-teks-redup);
}
/* Ikon jam di sebelah waktu tayang & ikon peringatan di tombol Lapor. */
.lk-info-waktu, .lk-info-lapor { display: inline-flex; align-items: center; gap: 6px; }
.lk-info-lain .lk-ikon { width: 14px; height: 14px; }
.lk-info-waktu .lk-ikon { opacity: 0.75; }
.lk-info-lapor .lk-ikon { opacity: 0.9; }

/* Penanda tayang ulang: tanggal tayang sudah diperbarui, jadi tanggal tayang
   PERTAMA ikut ditampilkan (jujur ke pelamar & aman untuk SEO). */
.lk-info-diperbarui {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid rgba(218, 151, 34, 0.45);
  background: rgba(218, 151, 34, 0.12);
  color: var(--lk-utama-cerah); font-size: 12.5px; font-weight: 600;
}
.lk-info-diperbarui .lk-ikon { opacity: 0.9; }
.lk-info-pertama { color: var(--lk-teks-redup); font-weight: 500; }
html[data-theme="light"] .lk-info-diperbarui {
  color: #a9660a; border-color: rgba(169, 102, 10, 0.35); background: rgba(169, 102, 10, 0.08);
}
@media (max-width: 640px) {
  .lk-info-pertama { display: none; }
}
.lk-info-lapor {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--lk-galat, #ef939c); font: inherit; font-weight: 600;
}
.lk-info-lapor:hover { text-decoration: underline; }

.lk-notif-lamar {
  margin-top: 16px; padding: 11px 15px;
  border: 1px solid var(--lk-garis); border-left: 3px solid var(--lk-utama);
  border-radius: 10px;
  background: rgba(126, 151, 181, 0.1);
  color: var(--lk-teks-redup); font-size: 13.5px; line-height: 1.5;
}

@media (max-width: 640px) {
  .lk-lk-ikon { width: 32px; height: 32px; border-radius: 9px; }
  /* Nilai pindah ke baris berikutnya, menjorok sejajar setelah ikon. */
  .lk-loker-tool { gap: 12px; }
  .lk-tool-kiri, .lk-tool-kanan { width: 100%; }
  .lk-lamar-tombol { width: 100%; justify-content: center; }
  .lk-tool-kanan .lk-tombol { flex: 1; justify-content: center; }
  .lk-info-lain { justify-content: space-between; }
  .lk-notif-lamar { font-size: 13px; }
  .lk-lamar-wrap{flex:1;}
  .lk-lamar{width:fit-content;}
  .lk-tool-kanan{justify-content:flex-end;}
  .lk-info-lain{margin:0px;}
}
html[data-theme="light"] .lk-notif-lamar { background: rgba(30, 47, 68, 0.05); }
html[data-theme="light"] .lk-info-lapor { color: #c0392b; }

/* POPUP "Formulir Order Pasang Iklan" di halaman /pasang. */
.lk-paket-modal .lk-kirim-modal-box { width: min(720px, 100%); }
.lk-paket-modal .lk-kirim-modal-head h2 { font-size: 17px; line-height: 1.35; }
.lk-paket-nama {
  margin: 3px 0 0; font-size: 15px; font-weight: 800;
  color: var(--lk-utama-cerah);
}
.lk-paket-nama:empty { display: none; }
.lk-paket-nama.paket-form{
  color:var(--lk-utama-cerah);
}

/* Ringkasan paket terpilih. */
.lk-paket-ringkas {
  display: flex; flex-direction: column; gap: 7px;
  margin: 2px 0 2px; padding: 12px 14px;
  list-style: none;
  border: 1px solid var(--lk-garis); border-radius: 12px;
  background: rgba(126, 151, 181, 0.08);
}
.lk-paket-ringkas:empty { display: none; }
.lk-paket-ringkas li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px; line-height: 1.45;
}
.lk-paket-ringkas li span { color: var(--lk-teks-redup); }
.lk-paket-ringkas li strong { color: var(--lk-teks); font-weight: 700; text-align: right; }

/* Judul bagian di dalam formulir order. */
.lk-paket-grup {
  margin: 8px 0 -2px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lk-utama-cerah);
}
.lk-paket-grup:first-of-type { margin-top: 6px; }
.lk-paket-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lk-paket-lebar textarea { width: 100%; }
.lk-paket-form .lk-paket-lebar { display: block; }
.lk-paket-catatan {
  display: grid; gap: 4px;
  margin: 2px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--lk-teks-redup);
}
html[data-theme="light"] .lk-paket-ringkas { background: #f4f7fb; border-color: #d5e0ea; }
html[data-theme="light"] .lk-paket-ringkas li span { color: #5b6b7f; }
html[data-theme="light"] .lk-paket-ringkas li strong { color: #1e2f44; }

html[data-theme="light"] .lk-halaman-pasang .lk-tambahan-apl svg{
  color:#1f2937;
}

@media (max-width: 640px) {
  .lk-paket-kolom { grid-template-columns: 1fr; gap: 10px; }
  .lk-paket-ringkas li { font-size: 13px; }
  .lk-paket-modal .lk-kirim-modal-head h2 { font-size: 15.5px; }
}

/* ---- ANCHOR AD AdSense (Auto ads) ----
   Anchor ad = overlay yang menempel di bawah layar dengan z-index paling besar.
   Tingginya diukur skrip di layouts/app.blade.php → variabel `--lk-ad-anchor`.
   Semua elemen fixed kita NAIK sebesar tinggi itu; JANGAN menutupi iklannya
   (menutupi/menyembunyikan iklan = pelanggaran kebijakan AdSense). */
html.lk-ad-anchor .lk-ikuti { bottom: calc(16px + var(--lk-ad-anchor, 0px)); }

@media (max-width: 960px) {
  html.lk-ad-anchor .lk-tab-bawah { bottom: var(--lk-ad-anchor, 0px); }
  html.lk-ad-anchor body { padding-bottom: calc(112px + var(--lk-ad-anchor, 0px)); }
  html.lk-ad-anchor .lk-panel-filter {
    bottom: calc(40px + env(safe-area-inset-bottom, 0px) + var(--lk-ad-anchor, 0px));
  }
  html.lk-ad-anchor .lk-overlay {
    inset: 57px 0 calc(40px + env(safe-area-inset-bottom, 0px) + var(--lk-ad-anchor, 0px));
  }
  html.lk-ad-anchor .lk-ikuti {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + var(--lk-ad-anchor, 0px));
  }
}

/* 861–960px masih memakai header desktop (65px) → panel/overlay ikut 65px. */
@media (min-width: 861px) and (max-width: 960px) {
  html.lk-ad-anchor .lk-overlay {
    inset: 65px 0 calc(40px + env(safe-area-inset-bottom, 0px) + var(--lk-ad-anchor, 0px));
  }
}

@media (min-width:360px){
  .lk-lk-label{width:fit-content}
}