/* =========================================================
   SICHYALAYA — Course Detail Page CSS
   ========================================================= */

/* ── HERO ── */
.course-hero {
  padding-top: var(--nav-height);
  background: linear-gradient(180deg, #0f0820 0%, var(--bg-base) 100%);
  border-bottom: 1px solid var(--border-subtle);
}
.course-hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-10);
  align-items: start;
  padding: var(--space-10) 0 var(--space-8);
}
.course-hero-content {}

.course-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.course-hero-title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}
.course-hero-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.course-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.course-rating-score {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--accent-gold);
  font-family: 'Outfit', sans-serif;
}
.course-rating-stars {
  display: flex;
  gap: 3px;
  color: var(--accent-gold);
}
.course-rating-stars svg { width: 16px; height: 16px; }
.course-rating-reviews {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.course-meta-tags {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.course-meta-tag {
  display: flex;
  align-items: center;
  gap: 6px;
}
.course-meta-tag svg { width: 15px; height: 15px; }

.course-instructor-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.course-instructor-row img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.course-instructor-name {
  color: var(--accent-primary);
  font-weight: 500;
}

/* ── ENROLL SIDEBAR ── */
.enroll-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}
.enroll-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.enroll-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-elevated);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 80px;
  cursor: pointer;
}
.enroll-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.enroll-play-btn {
  width: 64px; height: 64px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--transition-bounce), background var(--transition-fast);
}
.enroll-play-btn:hover {
  transform: scale(1.1);
  background: var(--accent-primary-h);
}
.enroll-play-btn svg { width: 28px; height: 28px; margin-left: 4px; }

.enroll-body {
  padding: var(--space-5);
}
.enroll-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.enroll-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: var(--text-3xl);
  color: var(--text-primary);
}
.enroll-price-orig {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: var(--text-lg);
}
.enroll-discount {
  color: var(--accent-secondary);
  font-weight: 700;
  font-size: var(--text-sm);
  font-family: 'Outfit', sans-serif;
}

.enroll-timer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--accent-secondary);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.enroll-timer svg { width: 14px; height: 14px; }

.enroll-cta { margin-bottom: var(--space-3); }

.enroll-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.enroll-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.enroll-feature svg { width: 16px; height: 16px; color: var(--accent-green); flex-shrink: 0; }

.enroll-guarantee {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-4);
}


/* ── COURSE BODY LAYOUT ── */
.course-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-10);
  padding: var(--space-8) 0 var(--space-16);
  align-items: start;
}
.course-main-content {}

/* Tab Nav */
.course-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-subtle);
  margin-bottom: var(--space-8);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.course-tabs::-webkit-scrollbar { display: none; }

.course-tab {
  padding: 12px 24px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.course-tab:hover { color: var(--text-secondary); }
.course-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.course-tab-panel { display: none; }
.course-tab-panel.active { display: block; }

/* What You'll Learn */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.learn-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.learn-item svg { width: 16px; height: 16px; color: var(--accent-green); flex-shrink: 0; margin-top: 2px; }

/* Requirements */
.requirements-list { display: flex; flex-direction: column; gap: var(--space-3); }
.requirement-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.requirement-item::before {
  content: '•';
  color: var(--accent-primary);
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
}

/* Curriculum Accordion */
.curriculum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.curriculum-meta { font-size: var(--text-sm); color: var(--text-muted); }
.expand-all-btn {
  font-size: var(--text-sm);
  color: var(--accent-primary);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 500;
}

.accordion {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.accordion-section {
  border-bottom: 1px solid var(--border-subtle);
}
.accordion-section:last-child { border-bottom: none; }

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  background: var(--bg-card);
  transition: background var(--transition-fast);
  gap: var(--space-4);
}
.accordion-header:hover { background: var(--bg-elevated); }
.accordion-header.open { background: rgba(164,53,240,0.06); }

.accordion-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.accordion-icon {
  width: 20px; height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.accordion-header.open .accordion-icon { transform: rotate(180deg); }

.accordion-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex: 1;
}
.accordion-meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

.accordion-body {
  display: none;
  background: var(--bg-surface);
}
.accordion-body.open { display: block; }

.lesson-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
.lesson-item:hover { background: var(--bg-glass); }
.lesson-item:first-child { border-top: none; }

.lesson-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.lesson-icon svg { width: 15px; height: 15px; }
.lesson-icon.preview { background: rgba(164,53,240,0.12); color: var(--accent-primary); }

.lesson-title {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 0;
}
.lesson-preview-tag {
  font-size: var(--text-xs);
  color: var(--accent-primary);
  background: rgba(164,53,240,0.1);
  border: 1px solid rgba(164,53,240,0.2);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 500;
}
.lesson-duration {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Instructor Section */
.instructor-profile {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.instructor-profile-img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--border-default);
  font-size: 48px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}
.instructor-profile-info {}
.instructor-name-link {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--accent-primary);
  margin-bottom: 4px;
  display: inline-block;
}
.instructor-role { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.instructor-mini-stats {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.instructor-mini-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.instructor-mini-stat svg { width: 15px; height: 15px; color: var(--text-muted); }
.instructor-bio { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; }

/* Reviews */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.review-big-score {
  text-align: center;
  flex-shrink: 0;
}
.review-big-score .score {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-6xl);
  font-weight: 900;
  color: var(--accent-gold);
  line-height: 1;
}
.review-big-score .stars-row {
  color: var(--accent-gold);
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: 4px 0;
}
.review-big-score .stars-row svg { width: 16px; height: 16px; }
.review-big-score .label { font-size: var(--text-xs); color: var(--text-muted); }

.review-bars { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.review-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
}
.review-bar-stars { color: var(--text-muted); white-space: nowrap; min-width: 30px; }
.review-bar { flex: 1; }
.review-bar .progress-bar { height: 8px; }
.review-bar-pct { color: var(--text-muted); min-width: 32px; text-align: right; }

.review-card {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.review-card:last-child { border-bottom: none; }
.review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
}
.review-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.review-date { font-size: var(--text-xs); color: var(--text-muted); }
.review-stars { display: flex; gap: 2px; color: var(--accent-gold); margin-bottom: var(--space-2); }
.review-stars svg { width: 13px; height: 13px; }
.review-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* Right sidebar in body (sticky) */
.course-body-sidebar {}

@media (max-width: 1024px) {
  .course-hero-inner { grid-template-columns: 1fr; }
  .course-body { grid-template-columns: 1fr; }
  .enroll-sidebar, .course-body-sidebar {
    position: static;
  }
  .enroll-card { max-width: 480px; }
  .instructor-profile { flex-direction: column; }
}
@media (max-width: 640px) {
  .learn-grid { grid-template-columns: 1fr; }
  .reviews-summary { flex-direction: column; }
}