/* Halaman detail kelas: /series-on/{slug} & /bootcamp/{slug} */
.cd-page { --cd-accent: var(--green-600); --cd-dark: var(--green-900); background: var(--green-50); padding: var(--sp-32) 0 var(--sp-20); }
.cd-page.is-series { --cd-accent: #107a8b; --cd-dark: #0d3b42; } /* sama dengan --so-600 / --so-900 */
.cd-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-5); }

.cd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--gray-500); margin-bottom: var(--sp-6); }
.cd-crumbs a { color: var(--gray-500); }
.cd-crumbs a:hover { color: var(--cd-accent); text-decoration: underline; }
.cd-crumbs [aria-current] { color: var(--gray-700); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.cd-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
.cd-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--cd-accent) 12%, white); box-shadow: var(--shadow-md); }
.cd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-status { position: absolute; top: 16px; left: 16px; font-size: var(--fs-xs); font-weight: 600; color: #fff; background: rgba(20,30,25,.75); padding: var(--sp-2) var(--sp-3); border-radius: 100px; }
.cd-status.is-discount { background: var(--gold); color: var(--cd-dark); }

.cd-tag { display: inline-block; font-size: var(--fs-xs); font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--cd-accent); background: color-mix(in srgb, var(--cd-accent) 12%, white); padding: var(--sp-1) var(--sp-3); border-radius: 100px; }
.cd-info h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; color: var(--cd-dark); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: var(--sp-4) 0 var(--sp-5); }

.cd-meta { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.cd-meta li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-base); color: var(--gray-700); font-weight: 500; }
.cd-meta svg { color: var(--cd-accent); flex-shrink: 0; margin-top: 2px; }
.cd-meta small { display: block; font-size: var(--fs-xs); color: var(--gray-500); font-weight: 500; }

.cd-buy { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-3); }
.cd-price { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.cd-price s { font-size: var(--fs-md); color: var(--gray-500); }
.cd-price strong { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; color: var(--cd-dark); }
.cd-cta { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--cd-dark); color: #fff; font-weight: 600; font-size: var(--fs-base); padding: var(--sp-4) var(--sp-5); border-radius: 14px; transition: filter .2s, transform .2s; }
.cd-cta:hover { filter: brightness(1.15); transform: translateY(-1px); }
.cd-cta.is-disabled { background: var(--gray-200); color: var(--gray-500); }
.cd-ask { text-align: center; font-size: var(--fs-md); font-weight: 500; color: #128c4b; padding: var(--sp-1); }
.cd-ask:hover { text-decoration: underline; }

.cd-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-8); margin-top: var(--sp-12); }
.cd-body h2, .cd-others h2 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--cd-dark); margin-bottom: var(--sp-4); }
.cd-about p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); margin-bottom: var(--sp-4); }
.cd-benefits { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--sp-6); align-self: start; }
.cd-benefits ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cd-benefits li { display: flex; gap: var(--sp-2); font-size: var(--fs-md); color: var(--gray-700); line-height: var(--lh-normal); }
.cd-benefits svg { color: var(--cd-accent); flex-shrink: 0; margin-top: 3px; }
.cd-more { font-size: var(--fs-md); font-weight: 600; color: var(--cd-accent); }
.cd-more:hover { text-decoration: underline; }

.cd-others { margin-top: var(--sp-14); }
.cd-others .class-grid { --cc-accent: var(--cd-accent); --cc-dark: var(--cd-dark); }

@media (max-width: 860px) {
  .cd-page { padding-top: var(--sp-24); }
  .cd-hero, .cd-body { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cd-body { margin-top: var(--sp-8); }
}