/* Sisa custom CSS untuk hal yang memang di luar jangkauan Bootstrap/Sneat:
   gradient hero, ukuran peta Leaflet, dan popup peta (markup mentah dari Leaflet). */

/* Build Bootstrap/Sneat di proyek ini nggak nyetel z-index apa pun di
   .sticky-top (cek: cuma position:sticky + top:0, murni CSS bawaan browser).
   Akibatnya elemen APA AJA di bawahnya yang punya z-index sendiri (mis.
   tombol input-group ".form-control:focus" bawaan Bootstrap) bisa nutupin
   navbar pas discroll sampai numpuk. Dikasih z-index eksplisit di sini
   (di bawah #ai-chat-widget yang 1050, di atas komponen biasa). */
.navbar.sticky-top {
  z-index: 1020;
}

.hero-section {
  background: linear-gradient(135deg, #0b1f3a 0%, #061527 100%);
}

/* Foto hero sengaja dibuat lepas dari py-5 section (dipindah ke kolom teks
   aja) supaya fotonya full-bleed dari atas sampai bawah section. Tepi
   kiri-kanan di-fade (bukan blur beneran - mask gradient lebih murah &
   cukup) biar nyatu ke gradient gelap, nggak keliatan potongan kotak.

   h-100 (tinggi 100% kolom) CUMA dipasang mulai breakpoint lg lewat class
   .hero-photo-fill di bawah - kalau dipaksa h-100 dari mobile juga, tinggi
   kolom foto ikut ketarik ngikutin tinggi kolom teks di sebelahnya (lewat
   rantai flex-stretch row), jadi ketinggian & numpuk sama kartu statistik
   di section berikutnya. Di mobile foto cukup pakai tinggi natural (auto)
   sesuai rasio asli fotonya. */
.hero-photo {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

@media (min-width: 992px) {
  .hero-photo-fill {
    height: 100%;
  }

  .hero-photo-fill .hero-photo,
  .hero-photo-fill .hero-illustration {
    height: 100%;
  }
}

/* .text-gold dipakai di beberapa tempat (hero, stat, rating bintang) tapi
   tidak pernah didefinisikan di bundle Sneat manapun — tanpa ini teksnya
   cuma mewarisi warna induknya (kelihatan pudar/salah, bukan aksen emas). */
.text-gold {
  color: #c8a24a !important;
}

/* Bundle Bootstrap bawaan Sneat sudah men-strip utility bg-opacity-*, dan
   .bg-white sendiri di-hardcode jadi solid #fff (bukan rgba yang bisa
   ditembus opacity). Akibatnya panel translucent di hero (badge, baris
   statistik, kotak gambar) malah tampil kotak putih solid dan menutupi
   teks putih di atasnya. Ditimpa di sini supaya kombinasinya balik jadi
   kaca transparan seperti maksud aslinya. */
.bg-white.bg-opacity-10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.site-footer {
  background: #061527;
}

/* Lingkaran ikon dipakai di stat card, kartu fitur, dan badge ilustrasi hero
   — dibuat manual (bukan pakai bg-opacity Bootstrap yang tidak ada di bundle
   Sneat ini) supaya tidak kena bug yang sama seperti .bg-white di atas. */
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.icon-circle-primary {
  background: rgba(11, 31, 58, 0.08);
  color: #0b1f3a;
}

.icon-circle-gold {
  background: rgba(200, 162, 74, 0.18);
  color: #c8a24a;
}

.hero-illustration {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}

/* Kartu statistik mengambang DI ATAS panel foto hero, tapi cuma di layar
   besar — panel foto jadi pendek mengikuti rasio fotonya di layar sempit
   (mobile), jadi kalau kartu dipaksa "mengambang" di situ juga malah
   nutupin wajah orangnya. Di bawah lg, biarkan mengalir normal di bawah
   foto (bukan absolute). */
.hero-stats-float {
  position: static;
  margin-top: 0.75rem;
}

@media (min-width: 992px) {
  .hero-stats-float {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    margin-top: 0;
  }
}

.hero-stat-card {
  border-radius: 0.75rem;
}

.hero-stat-card .card-body {
  padding: 0.65rem 0.75rem;
}

.hero-stat-label {
  font-size: 11px;
  line-height: 1.2;
}

.icon-circle-sm {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

#indonesia-map {
  height: 520px;
  background: transparent;
  overflow: hidden;
}

#indonesia-map svg {
  display: block;
}

.map-label {
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #0b1f3a;
}

.map-province-label {
  font-size: 14px;
  font-weight: 700;
}

/* Tema gelap: huruf tetap navy, diberi garis tepi putih tipis supaya
   terbaca di atas peta gelap (paint-order: garis digambar di belakang huruf). */
[data-color-mode="dark"] .map-label {
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linejoin: round;
}

.map-kabupaten-label {
  font-size: 14px;
  font-weight: 600;
}

/* Peta lebar tapi pendek (rasio Indonesia ~5:1) - di layar sempit, lebar
   kontainer jauh lebih ngebatasin skala peta daripada tingginya, jadi
   pulau-pulaunya jadi kecil sedangkan ukuran font label tetap sama besar
   kayak di desktop -> numpuk/nggak proporsional. Dikecilin khusus mobile
   biar proporsinya balik wajar. */
@media (max-width: 767.98px) {
  #indonesia-map {
    height: 380px;
  }

  .map-province-label {
    font-size: 9px;
  }

  .map-kabupaten-label {
    font-size: 10px;
  }
}

.map-popup-title {
  font-weight: 700;
  color: #0b1f3a;
  margin-bottom: 4px;
}

.map-popup-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  gap: 12px;
}

@media (max-width: 991.98px) {
  #siteNavbar.show,
  #siteNavbar.collapsing {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
}

#ai-chat-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
}

#ai-chat-toggle {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #0b1f3a;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}

#ai-chat-toggle:hover {
  background: #16335c;
  transform: translateY(-2px);
}

#ai-chat-panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: 320px;
  max-width: calc(100vw - 2.5rem);
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.ai-chat-header {
  background: linear-gradient(135deg, #0b1f3a 0%, #061527 100%);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.ai-chat-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.8;
}

.ai-chat-header button:hover {
  opacity: 1;
}

.ai-chat-body {
  padding: 1rem;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ai-chat-bubble {
  border-radius: 0.75rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 88%;
}

.ai-chat-bubble-bot {
  background: #f1f4f9;
  color: #1f2a3c;
  align-self: flex-start;
}

.ai-chat-bubble-user {
  background: #0b1f3a;
  color: #fff;
  align-self: flex-end;
}

.ai-chat-typing {
  color: #7a8ca8;
  font-size: 0.8rem;
}

.ai-chat-sources,
.ai-chat-talents {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
}

.ai-chat-talents {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-chat-talent-card {
  display: block;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 0.6rem;
  padding: 0.5rem 0.65rem;
  text-decoration: none;
  color: #1f2a3c;
}

.ai-chat-talent-card:hover {
  border-color: #c8a24a;
}

.ai-chat-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid #eef0f4;
}

/* ===================================================================
   LIGHT / DARK MODE — situs publik (LP, halaman user & talent yang
   sama-sama extend cms/base.html). Ditoggle lewat atribut
   data-color-mode="dark" di <html> (lihat base.html), disimpan di
   localStorage. Versi gelap sengaja dominan warna GOLD (bukan navy)
   buat tombol/aksen utama, bukan cuma invert warna biasa.

   Bootstrap/Sneat di proyek ini adalah build lama yang di-compile TANPA
   fitur data-bs-theme bawaan (dicek: 0 kecocokan `data-bs-theme` di
   core.css), dan warna-warna turunan (hover/focus .btn-primary dst)
   sudah di-bake jadi hex statis saat compile, bukan hidup dari CSS
   variable saat runtime. Makanya di sini overridenya langsung ke
   selector komponen final (bukan cuma redefine --bs-primary), sama
   kayak pendekatan lexfia-admin.css buat reskin admin. */

body {
  background: #eef0f4;
}

[data-color-mode="dark"] body {
  background: #0a0e17;
  color: #e7ebf3;
}

[data-color-mode="dark"] .navbar.bg-white {
  background: #10161f !important;
  border-color: #232f42;
}

[data-color-mode="dark"] .navbar .nav-link {
  color: #c3cbda;
}

[data-color-mode="dark"] .navbar .nav-link:hover {
  color: #f3d98a;
}

[data-color-mode="dark"] .card {
  background: #131a27;
  color: #e7ebf3;
  border-color: #232f42;
}

[data-color-mode="dark"] .text-muted {
  color: #93a0b4 !important;
}

[data-color-mode="dark"] .card-header,
[data-color-mode="dark"] .card-footer {
  background: #10161f;
  border-color: #232f42;
}

[data-color-mode="dark"] .list-group-item {
  background: #131a27;
  color: #e7ebf3;
  border-color: #232f42;
}

/* Tombol & aksen utama -> GOLD dominan di dark mode (bukan navy lagi). */
[data-color-mode="dark"] .btn-primary,
[data-color-mode="dark"] .btn-gold {
  background: #c8a24a;
  border-color: #c8a24a;
  color: #10161f;
}

[data-color-mode="dark"] .btn-primary:hover,
[data-color-mode="dark"] .btn-gold:hover {
  background: #dcb85e;
  border-color: #dcb85e;
  color: #0a0e17;
}

[data-color-mode="dark"] .btn-outline-primary {
  color: #dcb85e;
  border-color: #c8a24a;
}

[data-color-mode="dark"] .btn-outline-primary:hover {
  background: #c8a24a;
  border-color: #c8a24a;
  color: #10161f;
}

[data-color-mode="dark"] .btn-outline-secondary {
  color: #93a0b4;
  border-color: #384358;
}

[data-color-mode="dark"] .btn-outline-secondary:hover {
  background: #232f42;
  color: #e7ebf3;
  border-color: #384358;
}

[data-color-mode="dark"] .text-primary {
  color: #dcb85e !important;
}

[data-color-mode="dark"] a {
  color: #dcb85e;
}

[data-color-mode="dark"] .icon-circle-primary,
[data-color-mode="dark"] .icon-circle-gold {
  background: rgba(200, 162, 74, 0.15);
  color: #dcb85e;
}

[data-color-mode="dark"] .form-control,
[data-color-mode="dark"] .form-select {
  background: #0f1520;
  border-color: #384358;
  color: #e7ebf3;
}

[data-color-mode="dark"] .form-control:focus,
[data-color-mode="dark"] .form-select:focus {
  background: #0f1520;
  border-color: #c8a24a;
  color: #e7ebf3;
  box-shadow: 0 0 0 0.2rem rgba(200, 162, 74, 0.25);
}

[data-color-mode="dark"] .form-control::placeholder {
  color: #5b6a80;
}

[data-color-mode="dark"] .form-label {
  color: #c3cbda;
}

[data-color-mode="dark"] .badge.bg-white {
  background: #232f42 !important;
  color: #e7ebf3 !important;
}

[data-color-mode="dark"] .table {
  color: #e7ebf3;
  border-color: #232f42;
}

[data-color-mode="dark"] .input-group-text {
  background: #0f1520;
  border-color: #384358;
  color: #93a0b4;
}

/* Widget chat AI mengambang */
[data-color-mode="dark"] #ai-chat-panel {
  background: #131a27;
}

[data-color-mode="dark"] .ai-chat-bubble-bot {
  background: #1c2536;
  color: #e7ebf3;
}

[data-color-mode="dark"] .ai-chat-footer {
  border-color: #232f42;
}

[data-color-mode="dark"] .ai-chat-sources,
[data-color-mode="dark"] .ai-chat-talents {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-color-mode="dark"] .ai-chat-talent-card {
  background: #0f1520;
  border-color: #232f42;
  color: #e7ebf3;
}


/* ── Chat AI versi penuh di landing page ─────────────────────────────── */
.ai-hero-section { background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%); }
.ai-hero-badge { background: rgba(200, 162, 74, 0.15); color: #8a6a22; font-weight: 700; padding: 0.5rem 0.9rem; }
.ai-hero-points li { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; color: #1f2a3c; }
.ai-hero-points i { font-size: 1.25rem; color: #c8a24a; flex-shrink: 0; }
.ai-chat-inline {
  background: #fff; border: 1px solid #e3e6ec; border-radius: 1.1rem; overflow: hidden;
  box-shadow: 0 18px 48px rgba(11, 31, 58, 0.12); display: flex; flex-direction: column;
}
.ai-chat-inline-head {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem;
  background: #0b1f3a; color: #fff;
}
.ai-chat-inline-avatar {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(200, 162, 74, 0.2); color: #e0c377;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.ai-chat-inline-status { color: rgba(255, 255, 255, 0.7); }
.ai-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ec27f; margin-right: 4px; box-shadow: 0 0 0 3px rgba(78, 194, 127, 0.25); }
.ai-chat-inline-body { height: 420px; max-height: none; padding: 1.1rem 1.2rem; }
.ai-chat-inline .ai-chat-bubble { font-size: 0.92rem; max-width: 82%; }
.ai-chat-suggest { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.2rem 0.8rem; }
.ai-chat-started .ai-chat-suggest { display: none; }
.ai-chip {
  border: 1px solid #d9dee8; background: #fff; color: #1f2a3c; border-radius: 999px;
  padding: 0.4rem 0.85rem; font-size: 0.8rem; text-align: left; transition: border-color .15s, background .15s;
}
.ai-chip:hover { border-color: #c8a24a; background: #fbf7ec; }
.ai-chat-inline-form { display: flex; gap: 0.5rem; padding: 0.85rem 1rem; border-top: 1px solid #e3e6ec; background: #fafbfc; }
.ai-chat-inline-form .form-control { border-radius: 0.75rem; }
.ai-chat-inline-form .btn { border-radius: 0.75rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .ai-chat-inline-body { height: 360px; }
}
[data-color-mode="dark"] .ai-hero-section { background: linear-gradient(180deg, #0e1420 0%, #0a0e17 100%); }
[data-color-mode="dark"] .ai-hero-points li { color: #e7ebf3; }
[data-color-mode="dark"] .ai-chat-inline { background: #131a27; border-color: #232f42; }
[data-color-mode="dark"] .ai-chip { background: #131a27; border-color: #2c3a52; color: #e7ebf3; }
[data-color-mode="dark"] .ai-chip:hover { background: #1c2536; border-color: #c8a24a; }
[data-color-mode="dark"] .ai-chat-inline-form { background: #10161f; border-color: #232f42; }