/* docs.css — converted from src/styles/docs.css */
.status-glow-200 { box-shadow: 0 0 15px rgba(34, 197, 94, 0.6); border-color: rgba(34, 197, 94, 0.8); color: #4ade80; }
.status-glow-505 { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); border-color: rgba(239, 68, 68, 0.8); color: #ef4444; }
.status-glow-400 { box-shadow: 0 0 15px rgba(234, 179, 8, 0.6); border-color: rgba(234, 179, 8, 0.8); color: #facc15; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.docs-ep-chevron { transition: transform 0.2s ease; }
.docs-ep-body {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.docs-folder-chevron {
  transition: transform 0.25s ease;
}
.docs-folder-toggle {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ===== Hero banner (Dokumentasi API) ===== */
.docs-hero { min-height: 260px; }
.docs-hero-img {
  filter: saturate(1.1) brightness(0.55);
  transform: scale(1.08);
  animation: docsHeroPan 22s ease-in-out infinite alternate;
}
@keyframes docsHeroPan {
  0%   { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.15) translate(-1.5%, -1.5%); }
}
.docs-hero-grid {
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 60% at 20% 20%, black 40%, transparent 100%);
}
.docs-hero-blob { animation: docsBlobFloat 9s ease-in-out infinite; }
@keyframes docsBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10px, -14px) scale(1.08); }
}
.docs-hero-badge, .docs-hero-title, .docs-hero-desc, .docs-hero-stats {
  opacity: 0;
  animation: docsFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.docs-hero-badge { animation-delay: 0.05s; }
.docs-hero-title { animation-delay: 0.12s; }
.docs-hero-desc  { animation-delay: 0.2s; }
.docs-hero-stats { animation-delay: 0.28s; }
@keyframes docsFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.docs-stat-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  backdrop-filter: blur(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.docs-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--color-accent-500-rgb), 0.5);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}
.docs-stat-card .text-xl { font-variant-numeric: tabular-nums; }

/* Sidebar category logo image (dipakai kalau kategori punya logo_url custom) */
.docs-cat-logo-img {
  width: 14px; height: 14px; border-radius: 4px; object-fit: cover;
  flex-shrink: 0;
}

/* Endpoint card entrance + hover lift, biar list gak muncul kaku sekaligus */
.docs-ep-card {
  animation: docsCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.docs-ep-card:hover {
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,0.6);
}
@keyframes docsCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}