/* Kullanim senaryosu sayfalari (telefondan baglanma, kurulumsuz destek, veri
   yeri). Uc sayfa ayni duzeni paylasir; stil burada tek yerde durur.
   Renkler skydesk.css degiskenlerinden. Amber yalniz tiklanan seyde (§3.1):
   adim numaralari lacivert, cagri dugmesi amber. */

.sn-wrap{max-width:820px;margin:0 auto;padding:0 1.5rem 88px}
.sn-head{padding:64px 0 8px}
.sn-head h1{font:800 clamp(40px,6.2vw,68px)/.95 var(--font-display);letter-spacing:-.015em;color:var(--ink);margin:18px 0 20px;text-wrap:balance}
.sn-lead{font:400 18px/1.65 var(--font-body);color:var(--mute);margin:0;max-width:62ch}

.sn-wrap h2{font:700 clamp(26px,3.4vw,32px)/1.08 var(--font-display);letter-spacing:-.005em;color:var(--char);margin:56px 0 16px;text-wrap:balance}
.sn-wrap p,.sn-wrap li,.sn-wrap dd{font:400 16px/1.72 var(--font-body);color:var(--mute)}
.sn-wrap p{margin:0 0 14px;max-width:66ch}
.sn-wrap a{color:var(--navy-700);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:3px}
.sn-wrap a:hover{color:var(--teal)}

.sn-steps{list-style:none;counter-reset:adim;margin:0;padding:0;display:grid;gap:12px}
.sn-steps li{counter-increment:adim;display:grid;grid-template-columns:40px 1fr;column-gap:16px;align-items:start;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 20px}
.sn-steps li::before{content:counter(adim);grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;background:var(--navy-900);color:#fff;font:700 19px/34px var(--font-display);text-align:center}
.sn-steps b{display:block;font:600 16.5px/1.45 var(--font-body);color:var(--char)}
.sn-steps span{display:block;margin-top:4px}

.sn-list{margin:0;padding-left:20px}
.sn-list li{margin:0 0 8px}
.sn-list li::marker{color:var(--teal)}

.sn-dl{margin:0 0 18px;display:grid;gap:12px}
.sn-dl div{border-left:3px solid var(--teal);padding:2px 0 2px 16px}
.sn-dl dt{font:600 16px/1.5 var(--font-body);color:var(--char)}
.sn-dl dd{margin:2px 0 0}
.sn-dl .yok{border-left-color:var(--navy-100)}

.sn-cta{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;background:var(--navy-900);border-radius:16px;padding:24px 26px}
.sn-cta p{flex:1 1 260px;margin:0;font:600 18px/1.45 var(--font-body);color:#fff}
.sn-wrap .sn-go{display:inline-flex;align-items:center;background:var(--signal);color:var(--char);border:1px solid rgba(0,43,69,.25);border-radius:9px;padding:12px 22px;font:700 15px var(--font-body);text-decoration:none;white-space:nowrap}
.sn-wrap .sn-go:hover{color:var(--char);filter:brightness(1.05)}
.sn-wrap .sn-alt{color:#3FC9CF;font:600 15px var(--font-body);text-decoration-color:rgba(63,201,207,.5)}
.sn-wrap .sn-alt:hover{color:#fff}
.sn-go:focus-visible,.sn-alt:focus-visible,.sn-wrap a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.sn-other{margin-top:56px;border-top:1px solid var(--line);padding-top:22px}
.sn-other h2{font:600 13px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.sn-other ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.sn-other a{font:600 16px/1.5 var(--font-body)}

@media(max-width:560px){
  .sn-head{padding-top:40px}
  .sn-steps li{grid-template-columns:34px 1fr;padding:16px}
  .sn-steps li::before{width:30px;height:30px;font-size:17px;line-height:30px}
}