/* ============================================================
   Montag — Çözüm Detay şablonu (Figma "Çözüm Detay – Anlık Banka" 3:42)
   Figma REST spec'ten birebir: renkler, gradyanlar, font metrikleri, x/y, padding.
   Container'lar: paneller 1328 (.page-wide), iç-içerik 1110 (.page).
   ============================================================ */
.sd{--sd-royal:#0E1AC3;--sd-blue:#0066FF;--sd-cyan:#ABF0FE;--sd-mut:#6B6E7E;--sd-line:#E6E1DC;
  --g-blob:linear-gradient(135deg,#1100E0 0%,#0066FF 60%,#ABF0FE 100%)}
.sd section{padding:88px 0}
.sd .sd-eyebrow{color:var(--orange);font-size:16px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin:0 0 14px;display:block}
.sd h2.sd-h{font-size:44px;line-height:46px;font-weight:600;letter-spacing:0;color:var(--navy);margin:0 0 44px}
.sd .sd-h.sm{font-size:40px;line-height:44px}
.sd .sd-head{margin-bottom:44px;text-align:center}

/* ---------- HERO ---------- */
.sd-hero{color:#fff;position:relative;overflow:hidden;min-height:600px;display:flex;align-items:center;
  background:linear-gradient(92deg,#0E1AC3 0%,rgba(14,26,195,.94) 30%,rgba(14,26,195,.62) 60%,rgba(14,26,195,.30) 100%),
    var(--hero-img,none) right center/cover no-repeat,#0E1AC3}
.sd-hero .page-wide{position:relative;z-index:3;width:100%}
.sd-hero .sd-hero-in{padding:96px 0 104px}
.sd-hero .sd-kicker{color:var(--orange);font-size:24px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0 0 22px;line-height:1.25}
.sd-hero h1{font-size:48px;line-height:50px;font-weight:600;letter-spacing:0;margin:0 0 34px;max-width:20ch}
.sd-hero-row{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sd-hero p{font-size:16px;line-height:28px;color:rgba(255,255,255,.9);margin:0;max-width:44ch}
.sd-cta-row{display:flex;gap:16px;flex-wrap:wrap;flex:none}
/* Figma Ellipse 3/4 — hero sol büyük çift-daire (Screen, cyan→şeffaf %31, 169°) */
.sd-hero .sd-orb,.sd-hero .sd-orb2{position:absolute;border-radius:50%;mix-blend-mode:screen;z-index:1;pointer-events:none;
  background:linear-gradient(205deg,#ABF0FE 0%,rgba(0,113,255,0) 31.1%)}
.sd-hero .sd-orb{left:-501px;bottom:-454px;width:967px;height:967px}
.sd-hero .sd-orb2{left:-393px;bottom:-432px;width:770px;height:770px}

/* CTA pill'leri (Figma Main CTA: 24° turuncu→cyan gradyan; Secondary: 1px beyaz) */
.sd .sd-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 24px;border-radius:36px;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(24deg,#FF8D31 0%,#FFAF6F 50%,#ABF0FE 97.6%);color:var(--navy);transition:filter .15s,transform .15s}
.sd .sd-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.sd .sd-btn.ghost{background:transparent;color:#fff;border:1px solid #fff;font-weight:500;letter-spacing:0;text-transform:none}
.sd .sd-btn.ghost:hover{background:#fff;color:var(--navy);filter:none}

/* ---------- NEDİR (açık panel) ---------- */
.sd-nedir .sd-panel{background:linear-gradient(135deg,rgba(171,240,254,.55) 0%,rgba(230,225,220,.25) 55%,rgba(255,255,255,0) 100%),#F7F9FE;
  border-radius:10px;padding:64px 220px;text-align:center;min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.sd-nedir .sd-eyebrow{margin-bottom:16px}
.sd-nedir p{font-size:28px;line-height:39px;font-weight:600;color:var(--navy)}

/* ---------- PROBLEM (3 kart) ---------- */
.sd-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.sd-prob-card{background:#fff;border:1px solid var(--sd-line);border-radius:10px;padding:40px 36px;min-height:260px}
.sd-num-sm{font-size:16px;font-weight:800;letter-spacing:.03em;color:var(--sd-blue);margin-bottom:36px;display:block}
.sd-prob-card p{font-size:20px;line-height:29px;font-weight:500;color:var(--navy)}
.sd-problem .sd-h,.sd-nedir p{text-align:center}
.sd-problem .sd-head{text-align:center}

/* ---------- MONTAG YAKLAŞIMI (solid #0E1AC3 panel, foto sağda + çipler) ---------- */
.sd-appr .sd-panel{position:relative;overflow:hidden;background:var(--sd-royal);border-radius:10px;min-height:480px;
  display:grid;grid-template-columns:1fr 1fr}
.sd-appr .sd-appr-text{position:relative;z-index:2;padding:64px 0 64px 84px;align-self:center;max-width:560px}
.sd-appr .sd-eyebrow{color:var(--orange)}
.sd-appr h3{font-size:28px;line-height:34px;font-weight:700;color:#fff;margin:0 0 30px;max-width:20ch}
.sd-appr .sd-body{font-size:15px;line-height:26px;color:#CDD0E0;margin:0}
/* sağ yarı foto (OVERLAY blend) + çipler */
.sd-appr .sd-appr-photo{position:absolute;top:0;right:0;width:55%;height:100%;
  background:var(--appr-img,none) center/cover no-repeat;mix-blend-mode:overlay;opacity:.9;z-index:0}
.sd-appr .sd-appr-tint{position:absolute;inset:0;background:linear-gradient(90deg,#0E1AC3 30%,rgba(14,26,195,.35) 70%,rgba(14,26,195,.2) 100%);z-index:1}
.sd-appr .sd-chips{position:relative;z-index:2;align-self:center;padding:0 84px 0 40px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sd-appr .sd-chip-label{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sd-cyan);margin-bottom:8px}
.sd-chip{background:#fff;color:var(--navy);border-radius:15px;padding:6px 16px;font-size:12px;font-weight:400;white-space:nowrap}

/* ---------- KAPSAM (4 kart 2 kolon) ---------- */
.sd-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sd-cap-card{background:#fff;border:1px solid var(--sd-line);border-radius:10px;padding:36px}
.sd-ico{width:48px;height:48px;border-radius:50%;margin-bottom:20px;background:linear-gradient(205deg,#ABF0FE 0%,#0071FF 100%)}
.sd-cap-card h3{font-size:20px;line-height:25px;font-weight:700;color:var(--navy);margin:0 0 12px}
.sd-cap-card p{font-size:14px;line-height:23px;color:var(--sd-mut)}

/* ---------- KAZANIMLAR (full-bleed navy) ---------- */
.sd-gain{background:var(--navy);color:#fff}
.sd-gain .sd-h{color:#fff}
.sd-gain .sd-eyebrow{color:var(--orange)}
.sd-gain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 68px;margin-bottom:44px}
.sd-gain-item{display:flex;flex-direction:column;gap:9px}
.sd-num-lg{font-size:28px;font-weight:300;color:var(--sd-cyan);line-height:35px}
.sd-gain-item p{font-size:16px;line-height:26px;color:#fff;max-width:23ch}
.sd-gain-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---------- KULLANIM SENARYOLARI (sol başlık + sağ numaralı liste) ---------- */
.sd-use .sd-use-in{display:grid;grid-template-columns:472px 1fr;gap:0 48px;align-items:start}
.sd-use .sd-use-left .sd-h{margin-bottom:20px}
.sd-use .sd-intro{font-size:14px;line-height:23px;color:var(--sd-mut);max-width:44ch}
.sd-use-list{display:flex;flex-direction:column}
.sd-use-row{display:flex;align-items:center;gap:48px;padding:20px 0;border-top:1px solid var(--sd-line)}
.sd-use-row:last-child{border-bottom:1px solid var(--sd-line)}
.sd-use-row .n{font-size:20px;font-weight:300;color:var(--sd-blue);min-width:28px}
.sd-use-row p{font-size:17px;line-height:25px;font-weight:500;color:var(--navy)}

/* ---------- MARKALI METODOLOJİ (gradyan çizgi + noktalar + 4 adım) ---------- */
.sd-method .sd-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.sd-method .sd-line{height:2px;background:linear-gradient(90deg,#1100E0 0%,#0066FF 55%,#ABF0FE 100%);margin-bottom:34px;position:relative}
.sd-method .sd-line span{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;background:var(--g-blob)}
.sd-step .n{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--sd-blue);display:block;margin-bottom:8px}
.sd-step h3{font-size:20px;line-height:25px;font-weight:700;color:var(--navy);margin:0 0 12px}
.sd-step p{font-size:14px;line-height:23px;color:var(--sd-mut)}

/* ---------- NEDEN MONTAG (3 kolon + mini vaka) ---------- */
.sd-why .sd-head{text-align:center}
.sd-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-bottom:56px}
.sd-why-col .n{font-size:16px;font-weight:800;letter-spacing:.03em;color:var(--sd-blue);display:block;margin-bottom:16px}
.sd-why-col h3{font-size:20px;line-height:25px;font-weight:700;color:var(--navy);margin:0 0 12px}
.sd-why-col p{font-size:14px;line-height:23px;color:var(--sd-mut)}
.sd-minicase{background:linear-gradient(120deg,#1100E0 0%,#0066FF 55%,#ABF0FE 100%);border-radius:10px;padding:44px 84px;min-height:240px;display:flex;flex-direction:column;justify-content:center}
.sd-minicase .lbl{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sd-cyan);margin-bottom:16px}
.sd-minicase p{font-size:22px;line-height:32px;font-weight:600;color:#fff;max-width:66ch}
.sd-minicase .note{font-size:12px;color:var(--sd-cyan);margin-top:16px;display:block;font-weight:400}

/* ---------- SSS (akordeon, 904 dar) ---------- */
.sd-sss-in{max-width:904px;margin:0 auto}
.sd-sss .sd-head{text-align:center}
.sd-faq-list{border-top:1px solid var(--sd-line)}
.sd-faq-item{border-bottom:1px solid var(--sd-line)}
.sd-faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:24px 0;font-family:inherit}
.sd-faq-q span{font-size:18px;line-height:23px;font-weight:500;color:var(--navy)}
.sd-faq-q .ic{font-size:26px;font-weight:300;color:var(--sd-blue);line-height:1;flex:none}
.sd-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.sd-faq-a p{font-size:15px;line-height:26px;color:var(--sd-mut);padding:0 0 24px;max-width:820px}
.sd-faq-item.open .sd-faq-a{max-height:420px}

/* ---------- FINAL CTA (full-bleed foto + turuncu daire) ---------- */
.sd-cta{color:#fff;position:relative;overflow:hidden;min-height:740px;display:flex;align-items:center;
  background:linear-gradient(90deg,#0E1AC3 8%,rgba(14,26,195,.72) 48%,rgba(14,26,195,.5) 100%),
    var(--cta-img,none) center/cover no-repeat,#0E1AC3}
.sd-cta .page{position:relative;z-index:2;width:100%}
.sd-cta-in{max-width:640px}
.sd-cta .sd-eyebrow{color:var(--orange)}
.sd-cta h2{font-size:48px;line-height:50px;font-weight:600;letter-spacing:-.012em;margin:0 0 20px}
.sd-cta p{font-size:16px;line-height:28px;color:#CDD0E0;margin:0 0 32px;max-width:34ch}
.sd-cta .sd-glow{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 55% 45%,rgba(255,141,49,.32),rgba(14,26,195,0) 60%);z-index:1;pointer-events:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .sd h2.sd-h,.sd-hero h1,.sd-cta h2{font-size:34px;line-height:1.12}
  .sd .sd-h.sm{font-size:30px;line-height:1.15}
  .sd-hero .sd-kicker{font-size:18px}
  .sd-grid-3,.sd-grid-2,.sd-gain-grid,.sd-why-grid{grid-template-columns:1fr}
  .sd-appr .sd-panel{grid-template-columns:1fr}
  .sd-appr .sd-appr-text{padding:36px 28px}
  .sd-appr .sd-appr-photo{position:relative;width:100%;height:220px;mix-blend-mode:normal;opacity:1;order:-1}
  .sd-appr .sd-chips{padding:28px}
  .sd-nedir .sd-panel{padding:40px 28px}
  .sd-use .sd-use-in{grid-template-columns:1fr;gap:28px}
  .sd-method .sd-steps{grid-template-columns:1fr 1fr;gap:32px 24px}
  .sd-method .sd-line{display:none}
  .sd-cta,.sd-hero{min-height:auto}
}
@media(max-width:560px){
  .sd section{padding:56px 0}
  .sd-minicase,.sd-cta-in{padding-left:0;padding-right:0}
  .sd-method .sd-steps{grid-template-columns:1fr}
}