/* Panel pengenalan objek (intro tour) */
.intro-panel {
  --intro-color: #3498DB;
  position: absolute;
  left: 50%;
  bottom: 205px;
  transform: translateX(-50%);
  z-index: 40;
  width: min(560px, 94%);
  background: #FFFFFF;
  border: 5px solid var(--intro-color);
  border-radius: 26px;
  padding: 14px 18px 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  animation: introPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.intro-panel.hidden { display: none; }
@keyframes introPop {
  0% { transform: translate(-50%, 20px) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
.intro-head { display: flex; align-items: center; gap: 12px; }
.intro-icon {
  font-size: 2.4rem;
  background: color-mix(in srgb, var(--intro-color) 18%, white);
  border-radius: 50%;
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--intro-color);
}
.intro-count { font-size: 0.75rem; font-weight: 700; color: #7F8C8D; }
.intro-title { font-size: 1.35rem; color: var(--intro-color); font-weight: 700; }
.intro-text { margin: 8px 0 10px; font-size: 1rem; line-height: 1.4; color: #2C3E50; font-weight: 600; }
.intro-actions { display: flex; gap: 8px; justify-content: flex-end; }
.intro-btn {
  font-family: inherit; font-weight: 700; font-size: 0.95rem;
  padding: 8px 18px; border-radius: 20px; cursor: pointer;
  border: 2px solid var(--intro-color);
  background: var(--intro-color); color: #FFFFFF;
}
.intro-btn-ghost { background: #FFFFFF; color: var(--intro-color); }
.intro-btn:hover { filter: brightness(1.08); }
body.high-contrast .intro-panel { background: #000 !important; border-color: #FFE600 !important; }
body.high-contrast .intro-text, body.high-contrast .intro-title { color: #FFE600 !important; }