/* Tampilan penyunting visual di halaman depan.
   Dimuat hanya untuk pengurus yang sedang masuk. */

.hj-bilah {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  background: #17191c;
  border: 1px solid #2e3339;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
  font-family: ui-sans-serif, system-ui, sans-serif;
  overflow-x: auto;
  scrollbar-width: none;
}
.hj-bilah::-webkit-scrollbar { display: none; }

.hj-label {
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #9aa2ab;
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hj-tombol {
  flex-shrink: 0;
  border: 1px solid #3b4149;
  background: #24282d;
  color: #f2f4f6;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
  /* Sasaran sentuh nyaman di ponsel */
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}
.hj-tombol:hover { background: #2e3339; }
.hj-utama { background: #efd43d; border-color: #efd43d; color: #101214; }
.hj-utama:hover { background: #d9bd21; }
.hj-simpan[hidden] { display: none; }
.hj-siap { background: #4ade80; border-color: #4ade80; color: #06210f; }
.hj-siap:hover { background: #3fcb70; }

.hj-kabar {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4rem);
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: #17191c;
  color: #f2f4f6;
  border: 1px solid #2e3339;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
.hj-kabar[hidden] { display: none; }
.hj-kabar[data-jenis='sukses'] { border-color: #4ade80; color: #bbf7d0; }
.hj-kabar[data-jenis='galat'] { border-color: #f87171; color: #fecaca; }

/* ── Penanda bagian yang bisa disunting ───────────────────── */
body.hj-mode .hj-bisa {
  outline: 1px dashed rgb(239 212 61 / 0.65);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
  transition: outline-color 0.15s, background-color 0.15s;
}
body.hj-mode .hj-bisa:hover {
  outline-color: #efd43d;
  background: rgb(239 212 61 / 0.12);
}
body.hj-mode .hj-sunting {
  outline: 2px solid #efd43d;
  background: rgb(239 212 61 / 0.16);
}
body.hj-mode .hj-berubah {
  outline: 2px solid #4ade80 !important;
  background: rgb(74 222 128 / 0.14);
}

body.hj-mode .hj-bisa-gambar {
  outline: 2px dashed rgb(239 212 61 / 0.7);
  outline-offset: -4px;
}

.hj-gambar-tombol,
.hj-tautan-tombol {
  display: none;
}

body.hj-mode .hj-gambar-tombol {
  display: inline-flex;
  align-items: center;
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: #efd43d;
  color: #101214;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
  min-height: 42px;
}
body.hj-mode .hj-gambar-tombol:hover { background: #d9bd21; }

body.hj-mode .hj-tautan-tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  background: rgb(0 0 0 / 0.35);
  font-size: 0.75rem;
  cursor: pointer;
  line-height: 1;
}

/* Beri ruang di bawah agar bilah tidak menutupi isi halaman */
body.hj-mode { padding-bottom: 5rem; }

@media (prefers-reduced-motion: reduce) {
  .hj-bisa, .hj-tombol { transition: none; }
}