/* ===== ClickSambo · Problem section (scoped: .csp) ===== */
.csp{
  --csp-navy:#1C2841; --csp-orange:#F94C10; --csp-orange-d:#D93D08; --csp-orange-text:#B3380A;
  --csp-orange-soft:rgba(249,76,16,.1); --csp-cream:#FFF1E9; --csp-cream-2:#FDF6F1;
  --csp-line:#F0E2D8; --csp-muted:#51607A; --csp-band-text:#C9D5E6; --csp-band-line:#4A5C85;
  --csp-r:20px;
  background:var(--csp-cream); color:var(--csp-navy);
  font-family:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  padding:82px 0;
}
.csp.csp--white{background:#fff}
.csp *,.csp *::before,.csp *::after{box-sizing:border-box}
/* layout.css sets a global font-family on elements; keep the design font */
.csp *{font-family:inherit}
.csp-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* width comes from the site .container */

/* başlık */
.csp-head{max-width:60ch; margin:0 auto 46px; text-align:center}
.csp-head h2{margin:0; font-size:clamp(26px,3vw,36px); line-height:1.2; font-weight:800; letter-spacing:-.015em; color:var(--csp-navy)}
.csp-head p{margin:12px 0 0; color:var(--csp-muted); font-size:16px; line-height:1.7}

/* kartlar */
.csp-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0}
.csp-card{display:flex; flex-direction:column; height:100%; background:var(--csp-cream-2); border:1px solid var(--csp-line); border-radius:var(--csp-r); padding:28px 26px 0}
.csp--white .csp-card{background:var(--csp-cream-2)}
.csp-ic{width:44px; height:44px; border-radius:13px; background:var(--csp-orange-soft); color:var(--csp-orange); display:grid; place-items:center; margin-bottom:16px}
.csp-ic svg{width:22px; height:22px}
.csp-card h3{margin:0 0 8px; font-size:clamp(19px,1.6vw,20px); line-height:1.3; font-weight:800; letter-spacing:-.015em; color:var(--csp-navy)}
.csp-card p{margin:0 0 22px; color:var(--csp-muted); font-size:16px; line-height:1.7}
/* alt çizgi + link: margin-top:auto ile tüm kartlarda aynı hizaya iner */
.csp-more{margin-top:auto; border-top:1px solid var(--csp-line)}
.csp-more a{display:flex; align-items:center; gap:8px; min-height:56px; font-size:15px; font-weight:800; color:var(--csp-orange-text); text-decoration:none}
.csp-more a svg{width:16px; height:16px; flex:none; transition:transform .15s ease}
.csp-more a:hover{color:var(--csp-orange-d)}
.csp-more a:hover svg{transform:translateX(3px)}

/* zarar bandı */
.csp-band{margin-top:24px; background:var(--csp-navy); border-radius:var(--csp-r); padding:32px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:center}
.csp-band h3{margin:0 0 24px; font-size:21px; line-height:1.3; font-weight:800; letter-spacing:-.015em; color:#fff}
.csp-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.csp-step{position:relative}
.csp-num{position:relative; z-index:1; width:30px; height:30px; border-radius:9px; background:var(--csp-orange); color:#fff; font-size:14px; font-weight:800; display:grid; place-items:center; margin-bottom:14px}
/* 1 → 2 → 3 bağlantı çizgisi ve ok */
.csp-step:not(:last-child)::before{content:""; position:absolute; top:15px; left:42px; right:-16px; height:2px; background:var(--csp-band-line)}
.csp-step:not(:last-child)::after{content:""; position:absolute; top:11px; right:-16px; width:8px; height:8px; border-top:2px solid var(--csp-band-line); border-right:2px solid var(--csp-band-line); transform:rotate(45deg)}
.csp-step h4{margin:0 0 6px; font-size:17px; line-height:1.3; font-weight:800; color:#fff}
.csp-step p{margin:0; font-size:15px; line-height:1.65; color:var(--csp-band-text)}
.csp-cta{display:flex; flex-direction:column; gap:14px; padding-left:40px; border-left:1px solid var(--csp-band-line)}
.csp-cta strong{font-size:21px; line-height:1.3; font-weight:800; letter-spacing:-.015em; color:#fff}
.csp-btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:14px 26px; border-radius:10px; background:var(--csp-orange); color:#fff; font-size:16px; font-weight:800; text-decoration:none; transition:background .15s ease}
.csp-btn:hover{background:var(--csp-orange-d)}
.csp-note{margin:0; font-size:14px; font-weight:600; color:#B9C2D2}
.csp-note a{color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:3px}
.csp a:focus-visible{outline:2px solid var(--csp-orange); outline-offset:3px; border-radius:6px}

/* tablet */
@media (max-width:1000px){
  .csp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csp-band{grid-template-columns:1fr; gap:28px}
  .csp-cta{padding-left:0; padding-top:24px; border-left:0; border-top:1px solid var(--csp-band-line)}
  .csp-btn{align-self:flex-start}
}
/* mobil: 1-2-3 dikey akış */
@media (max-width:640px){
  .csp{padding:64px 0}
  .csp-head{margin-bottom:34px}
  .csp-grid{grid-template-columns:1fr}
  .csp-band{padding:26px 22px}
  .csp-flow{grid-template-columns:1fr; gap:24px}
  .csp-step{padding-left:46px}
  .csp-num{position:absolute; left:0; top:0; margin:0}
  .csp-step:not(:last-child)::before{top:38px; bottom:-18px; left:14px; right:auto; width:2px; height:auto}
  .csp-step:not(:last-child)::after{display:none}
  .csp-step h4{padding-top:4px}
  .csp-btn{align-self:stretch}
}
@media (prefers-reduced-motion:reduce){.csp *{transition:none !important}}


/* homepage integration: same 100px section rhythm as the neighbouring sections (home.css) */
.csp.cspHome{margin-bottom:100px}