/* ========================= МАЗМҰНЫ (CONTENT) ========================= */
.content-hero {
  padding: clamp(50px, 8vw, 90px) 0 clamp(30px, 5vw, 50px);
  background: linear-gradient(180deg, var(--grad-1) 0%, var(--surface-alt) 100%);
  text-align: center;
}
.content-hero h1 { margin-bottom: 14px; }
.content-hero p { max-width: 540px; margin-left: auto; margin-right: auto; }

.content-grid {
  padding-block: clamp(20px, 5vw, 40px) clamp(60px, 8vw, 100px);
}
.grid-preface {
  margin-bottom: 26px;
}
.grid-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
@media (max-width: 820px) {
  .grid-sections { grid-template-columns: 1fr; }
}

/* Алғы сөз карточкасы */
.preface-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(26px, 4vw, 40px) clamp(28px, 4vw, 46px);
  cursor: pointer;
}
.preface-card .card-icon {
  flex-shrink: 0;
  width: 62px; height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--teal-500), var(--ink-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform var(--dur-med) var(--ease-spring);
}
.preface-card:hover .card-icon { transform: rotate(-8deg) scale(1.08); }
.preface-card .card-text h3 { margin-bottom: 6px; }
.preface-card .card-text p { font-size: 0.95rem; }
.preface-card .card-go {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-line);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast), transform var(--dur-med) var(--ease-spring);
}
.preface-card .card-go svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.preface-card:hover .card-go {
  background: var(--gold-500);
  border-color: transparent;
  transform: translateX(4px);
}
.preface-card:hover .card-go svg { transform: translateX(2px); stroke: #fff; }

/* Бөлім карточкасы (аккордеон) */
.section-card {
  padding: clamp(26px, 3.6vw, 36px);
  display: flex;
  flex-direction: column;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 14px;
}
.section-card.s1 .section-badge { background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); }
.section-card.s2 .section-badge { background: linear-gradient(135deg, var(--teal-500), var(--teal-600)); }

.section-head h3 { margin-bottom: 6px; }
.section-head p { font-size: 0.92rem; }

.section-toggle {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-line);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-med) var(--ease-spring), background var(--dur-fast), border-color var(--dur-fast);
}
.section-toggle svg { width: 16px; height: 16px; transition: transform var(--dur-med) var(--ease-out); stroke: var(--ink-700); }
.section-card.is-open .section-toggle { background: var(--ink-800); border-color: transparent; }
.section-card.is-open .section-toggle svg { transform: rotate(180deg); stroke: #fff; }

.subtopics-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.section-card.is-open .subtopics-wrap { grid-template-rows: 1fr; }
.subtopics-inner { overflow: hidden; }

.subtopics {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--surface-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subtopics li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.section-card.is-open .subtopics li {
  opacity: 1;
  transform: translateX(0);
}
.section-card.is-open .subtopics li:nth-child(1) { transition-delay: .05s; }
.section-card.is-open .subtopics li:nth-child(2) { transition-delay: .10s; }
.section-card.is-open .subtopics li:nth-child(3) { transition-delay: .15s; }
.section-card.is-open .subtopics li:nth-child(4) { transition-delay: .20s; }

.subtopics a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-800);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.subtopics a:hover {
  background: var(--ink-800);
  color: #fff;
  transform: translateX(4px);
}
.subtopics a .num {
  color: var(--ink-500);
  font-weight: 700;
  font-size: 0.82rem;
  transition: color var(--dur-fast);
}
.subtopics a:hover .num { color: var(--gold-300); }

.subtopics a.is-test {
  background: transparent;
  border: 1.5px dashed var(--ink-300);
  color: var(--ink-700);
}
.subtopics a.is-test:hover {
  background: var(--gold-500);
  border-color: transparent;
  color: #fff;
}