/* =========================
   Docs custom (base dari file kamu)
   ========================= */
.docs-hero { padding: 28px 0; }
.method-badge { font-weight: 700; letter-spacing: .25px; }
.path-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.category-chip { cursor: pointer; }
.sidebar-list a { text-decoration: none; }
.offcanvas { --bs-offcanvas-width: 280px; }

/* Skeleton loading */
.loading-skeleton {
  height: 120px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
  background-size: 300% 100%;
  animation: skel 1.3s infinite;
  border-radius: .75rem;
}
@keyframes skel { 0%{ background-position: 0 0; } 100%{ background-position: -300% 0; } }

/* Buttons dengan kontras */
.btn-contrast, .btn-copy {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--bs-primary);
}

/* Area Try it */
.endpoint-tools .req-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.code-sample-box,
.resp-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.code-sample-box { min-height: 120px; background: var(--bs-body-tertiary); }
.resp-box { min-height: 120px; }

/* Media preview dasar */
.media-preview img,
.media-preview video,
.media-preview audio,
.media-preview iframe {
  max-width: 100%;
  border-radius: .5rem;
}
.media-preview video,
.media-preview audio { width: 100%; }

.small-muted { font-size:.85rem; color: var(--bs-secondary-color); }

/* =========================
   Responsive + Theme-safe tweaks (patch)
   ========================= */

/* Paksa palet warna sesuai tema (light/dark) */
:root { color-scheme: light dark; }

/* Badge param: theme-aware */
.badge-param{
  color: var(--bs-primary-text-emphasis);
  background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
}

/* Baris "Params dari server": label & badge rapi, auto-wrap */
.endpoint-tools .mb-2 > small {
  display: inline-block;
  margin-right: .5rem;
  margin-bottom: .25rem;
}
.endpoint-tools .mb-2 .badge-param {
  display: inline-block;
  margin: .25rem .375rem 0 0;
}

/* Path & URL aman di layar kecil */
.path-code { overflow-wrap: anywhere; word-break: break-word; }
.endpoint-tools .req-url { white-space: nowrap; overflow: auto; }

/* Sedikit jarak untuk area preview media */
.media-preview { margin-bottom: .5rem; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  .code-sample-box{ min-height: 96px; }
  .accordion-button{ padding: .75rem 1rem; }
}

/* Kontras code-sample saat dark mode */
@media (prefers-color-scheme: dark){
  .code-sample-box{ background: color-mix(in srgb, #fff 4%, transparent); }
}

/* Fallback embed lain */
.media-preview iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Tombol Try it out tetap hijau (theme-aware) */
.btn-try{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 90%, black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 85%, black 15%);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 80%, black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 75%, black 25%);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

/* =========================
   Fix: Response panjang tetap di dalam card & bisa di-scroll
   ========================= */
.resp-box{
  --resp-max-h: clamp(260px, 55vh, 720px);
  max-height: var(--resp-max-h);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}
.resp-box > pre{
  margin: 0;
  overflow: auto;
  white-space: pre; /* jaga format JSON/text apa adanya */
}
@media (max-width: 575.98px){
  .resp-box{ max-height: 50vh; }
}

/* =========================
   Fix: Media preview selalu muat di dalam card
   ========================= */
.media-preview{
  --media-max-h: clamp(220px, 60vh, 720px);
  max-height: var(--media-max-h);
  overflow: auto;          /* scroll di dalam area preview */
  border-radius: .5rem;
}
.media-preview img,
.media-preview video,
.media-preview canvas{
  display: block;
  max-width: 100% !important;
  height: auto;
  border-radius: .5rem;
  background: var(--bs-body-bg);
}
.media-preview video{ width: 100% !important; }
.media-preview iframe{
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
@media (max-width: 575.98px){
  .media-preview{ max-height: 50vh; }
}