/* ===== ClickSambo · Homepage How it works (scoped: .cpf) ===== */
.cpf-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.cpf{
  --cpf-navy:#1C2841; --cpf-orange:#F94C10; --cpf-orange-d:#D93D08; --cpf-orange-soft:rgba(249,76,16,.1);
  --cpf-green:#22B573; --cpf-green-d:#17835A; --cpf-cream:#FFF1E9; --cpf-line-2:#F0E2D8;
  --cpf-muted:#51607A; --cpf-muted-2:#7C8AA3; --cpf-r:20px; --cpf-shadow:0 12px 40px rgba(28,40,65,.06);
  background:#fff; color:var(--cpf-navy);
  font-family:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; padding:84px 0;
}
.cpf.cpf--cream{background:var(--cpf-cream)}
.cpf *,.cpf *::before,.cpf *::after{box-sizing:border-box}
/* layout.css sets a global font-family on elements; keep the design font */
.cpf *{font-family:inherit}
/* width comes from the site .container */
.cpf h2,.cpf h3{margin:0; font-weight:800; letter-spacing:-.015em; color:var(--cpf-navy)}
.cpf h2{font-size:clamp(26px,3vw,36px); line-height:1.2}
.cpf h3{font-size:clamp(19px,1.6vw,21px); line-height:1.25}
.cpf-head{max-width:66ch; margin-bottom:40px}
.cpf-head p{color:var(--cpf-muted); margin:12px 0 0}

.cpf-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.cpf-card{background:#fff; border:1px solid var(--cpf-line-2); border-radius:var(--cpf-r); box-shadow:var(--cpf-shadow); padding:26px 26px 24px; display:flex; flex-direction:column}
.cpf-card-head{display:flex; align-items:center; gap:13px; margin-bottom:22px}
.cpf-card-head .ico{width:46px; height:46px; border-radius:14px; background:var(--cpf-cream); display:grid; place-items:center; flex:none}
.cpf-card-head .ico svg{width:24px; height:24px}

.cpf-tl{list-style:none; margin:0; padding:0}
.cpf-step{position:relative; padding:0 0 24px 46px}
.cpf-step:last-child{padding-bottom:0}
.cpf-step::before{content:""; position:absolute; left:16px; top:30px; bottom:2px; width:2px; background:var(--cpf-line-2)}
.cpf-step:last-child::before{display:none}
.cpf-mk{position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:var(--cpf-navy); color:#fff; display:grid; place-items:center; z-index:1; box-shadow:0 0 0 4px #fff}
.cpf-mk svg{width:17px; height:17px}
.cpf-step .st{display:block; font-weight:800; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--cpf-muted-2); margin:5px 0 4px}
.cpf-step p{margin:0; color:var(--cpf-muted); font-size:16px; line-height:1.7}
.cpf-step.first .cpf-mk{background:var(--cpf-orange)}
.cpf-step.first .st{color:var(--cpf-orange-d)}
.cpf-step.done .cpf-mk{background:var(--cpf-green)}
.cpf-step.done::before{background:linear-gradient(var(--cpf-line-2),var(--cpf-green))}
.cpf-step.done .st{color:var(--cpf-green-d)}

.cpf-extra{margin-top:22px; border:1.5px dashed #E7B9A4; border-radius:16px; padding:16px 17px; background:var(--cpf-orange-soft)}
.cpf-extra-h{display:flex; align-items:center; gap:7px; font-weight:800; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--cpf-orange-d); margin-bottom:13px}
.cpf-extra-h svg{width:14px; height:14px}
.cpf-ei-row{display:flex; gap:12px; align-items:flex-start}
.cpf-ei-row + .cpf-ei-row{margin-top:13px; padding-top:13px; border-top:1px solid rgba(217,61,8,.14)}
.cpf-ei{width:32px; height:32px; border-radius:10px; background:#fff; border:1px solid rgba(217,61,8,.18); display:grid; place-items:center; flex:none; color:var(--cpf-orange-d)}
.cpf-ei svg{width:17px; height:17px}
.cpf-ei-row h4{margin:0 0 2px; font-size:.98rem; font-weight:800; color:var(--cpf-navy)}
.cpf-ei-row p{margin:0; font-size:16px; line-height:1.65; color:var(--cpf-muted)}
.cpf-ei-row a{color:var(--cpf-orange-d); font-weight:800; text-decoration:none}
.cpf-ei-row a:hover{text-decoration:underline}

/* fayda bandı */
.cpf-gain{margin-top:22px; background:var(--cpf-navy); color:#fff; border-radius:var(--cpf-r); padding:30px 32px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center}
.cpf-gain-copy .ico{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.12); display:grid; place-items:center; margin-bottom:16px}
.cpf-gain-copy .ico svg{width:24px; height:24px}
.cpf-gain h3{color:#fff; font-size:clamp(22px,2.2vw,26px); line-height:1.2}
/* wide .container: keep the headline to a balanced two-line measure */
.cpf-gain-copy{max-width:720px}
.cpf-gain h3{text-wrap:balance}
.cpf-gain-copy p{margin:10px 0 0; color:rgba(255,255,255,.82); font-size:16px; line-height:1.6}
.cpf-btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:14px 26px; border-radius:10px; background:var(--cpf-orange); color:#fff; font-size:16px; font-weight:800; text-decoration:none; transition:background .15s ease}
.cpf-btn:hover{background:var(--cpf-orange-d)}
.cpf-gain .cpf-btn{padding-left:44px; padding-right:44px}
.cpf a:focus-visible{outline:2px solid var(--cpf-orange); outline-offset:3px; border-radius:6px}

@media (max-width:980px){
  .cpf-gain{grid-template-columns:1fr; gap:22px}
  .cpf-btn{justify-self:start}
}
@media (max-width:820px){ .cpf-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .cpf{padding:64px 0}
  .cpf-card{padding:22px 18px 20px}
  .cpf-gain{padding:26px 20px}
    .cpf-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.cpf *{transition:none !important}}