/* Groove Coach — kurs tanıtım sayfaları (home.css üzerine) */
.cp .top { position: relative; border-bottom: 1px solid var(--line); background: var(--bg); }
.cp-hero { padding: 70px 0 50px; background: radial-gradient(ellipse at 80% 0%, rgba(214,165,74,.13), transparent 60%); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 26px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; opacity: .5; }
.cp-hero .eyebrow { margin-bottom: 14px; }
.cp-hero h1 { max-width: 16ch; }
.cp-hero .lead2 { max-width: 62ch; }
.cp-hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.cp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; padding-top: 40px; padding-bottom: 60px; }
.cp-grid h2 { font: 600 26px var(--disp); text-transform: uppercase; letter-spacing: .03em; margin: 34px 0 12px; }
.cp-grid h2:first-of-type { margin-top: 26px; }
.cp-grid p { color: #d6d1c8; margin: 0 0 14px; }
.cp-grid .shot { margin: 0; } .cp-grid .shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; }
.cp-units { padding-top: 30px; padding-bottom: 60px; border-top: 1px solid var(--line); }
.cp-lvl { margin: 34px 0 8px; font: 600 14px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.cp-units details { border-bottom: 1px solid var(--line); }
.cp-units summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; padding: 15px 0; }
.cp-units summary::-webkit-details-marker { display: none; }
.cp-units summary .n { font: 600 14px var(--disp); color: var(--brass); }
.cp-units summary b { font: 500 21px var(--disp); text-transform: uppercase; letter-spacing: .02em; }
.cp-units summary small { color: var(--muted); font-size: 13px; }
.cp-units summary:hover b { color: var(--brass2); }
.cp-units details[open] summary b { color: var(--brass2); }
.cp-units .body { padding: 0 0 22px 44px; }
.cp-units .body p { color: #d6d1c8; margin: 0 0 12px; max-width: 70ch; }
.cp-units .body ol { columns: 2 260px; color: var(--muted); font-size: 14px; margin: 0 0 14px; padding-left: 20px; }
.cp-units .body a { font-size: 14px; color: var(--brass); }
.cp-how { padding: 60px 0; background: var(--bg2); }
.cp-how p { color: #d6d1c8; max-width: 70ch; margin: 0; }
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.cp-cards a { display: block; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: var(--bg2); transition: border-color .2s, transform .2s; }
.cp-cards a:hover { border-color: var(--brass); transform: translateY(-2px); }
.cp-cards h3 { font: 600 22px/1.15 var(--disp); text-transform: uppercase; margin: 6px 0 8px; }
.cp-cards p { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.cp-cards small { color: var(--brass); font-size: 13px; }
.cp-other { padding: 60px 0 70px; }
@media (max-width: 900px) {
  .cp-grid { grid-template-columns: 1fr; gap: 10px; }
  .cp-hero { padding: 44px 0 30px; }
  .cp-units .body { padding-left: 0; }
  .wrap { padding: 0 16px; }
}