/*
 * Tombol Login di navbar publik + jendela pilihan Karyawan/Pelanggan.
 *
 * Ditaruh di berkas bersama, BUKAN di <style> tiap halaman, karena gaya navbar di proyek
 * ini terduplikasi di 13 halaman publik. Menambah aturan baru ke tiap halaman berarti 13
 * salinan yang pasti berdivergensi begitu salah satunya direvisi.
 */

/* ── Mengembalikan Login ke navbar ──────────────────────────────────────────────────
   Sebelumnya Login dipindah ke baris paling bawah footer untuk tampilan desktop.
   Barisnya disembunyikan di sini, bukan dihapus dari HTML, supaya pengembalian ini
   terkumpul di satu berkas dan mudah ditelusuri kalau suatu saat dibatalkan. */
.footer-login-row { display: none !important; }

/* margin-left:auto dulu dipasang pada .nav-links supaya menu terdorong ke kanan saat
   tidak ada tombol di sebelahnya. Sekarang tombol Login menempati tempat itu, jadi
   pendorongnya dipindah ke sana agar menu tidak menempel di ujung kanan layar. */
.nav-links { margin-left: auto; }

.nav-cta .btn-login-pilih {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
}

/* Di layar sempit .nav-links disembunyikan dan hamburger muncul. Tombol Login ikut
   disembunyikan di sana karena sudah tersedia di dalam hamburger, dan dua tombol Login
   sekaligus hanya membingungkan. */
@media (max-width: 768px) {
  .nav-cta .btn-login-pilih { display: none; }
}

/* ── Jendela pilihan ────────────────────────────────────────────────────────────────
   Memakai posisi tetap dengan latar gelap. Dibuat sendiri, tidak memakai <dialog>,
   karena halaman publik masih menyasar peramban lama yang belum mendukungnya. */
.lp-tirai {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lp-tirai.tampil { opacity: 1; }

.lp-kotak {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26);
  padding: 26px 24px 22px;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  /* Jendela bisa lebih tinggi dari layar HP kecil saat papan ketik muncul. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.lp-tirai.tampil .lp-kotak { transform: translateY(0) scale(1); }

.lp-kepala { text-align: center; margin-bottom: 20px; }

.lp-kepala h3 {
  margin: 0 0 6px;
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f172a;
}

.lp-kepala p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #64748b;
}

.lp-pilihan { display: flex; flex-direction: column; gap: 11px; }

.lp-opsi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.lp-opsi:hover {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.04);
  transform: translateY(-1px);
}

.lp-opsi:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

.lp-ikon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}

.lp-opsi.pelanggan .lp-ikon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.lp-teks { min-width: 0; }

.lp-teks b {
  display: block;
  font-size: 0.94rem;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.35;
}

.lp-teks small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #64748b;
}

.lp-panah { margin-left: auto; color: #cbd5e1; flex: none; }
.lp-opsi:hover .lp-panah { color: #0284c7; }

.lp-tutup {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  border: none;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
}

.lp-tutup:hover { color: #0f172a; background: #f1f5f9; }

/* Lencana "sedang dikembangkan" pada pilihan pelanggan. Portal pelanggan belum punya
   autentikasi sungguhan, jadi keadaan itu harus terbaca sebelum ditekan, bukan sesudah. */
.lp-lencana {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

@media (prefers-reduced-motion: reduce) {
  .lp-tirai, .lp-kotak { transition-duration: 0.01ms; }
}