/* =========================================================================
   Çözümler & Analitik — ortak editoryal şablon (8 sayfa)
   Partial'lar: solution-hero (+ solution-art-<varyant>), solution-process,
   solution-benefits, solution-cta.  Sınıf öneki: sl-
   ========================================================================= */

.sl-page {
  --sl-copy: color-mix(in srgb, var(--navy-3) 84%, #fff);            /* lacivert tonlu gövde metni */
  --sl-rule: color-mix(in srgb, var(--line-strong) 78%, var(--gold-300));
}

/* Ortak --------------------------------------------------------------- */
.sl-eyebrow { font-size: 11.5px; letter-spacing: .32em; margin-bottom: 22px; }
.sl-h2 { font-weight: 800; letter-spacing: -.03em; word-spacing: .04em; line-height: 1.05; }
.sl-btn { --h: 56px; padding: 0 30px; gap: 24px; border-radius: 8px; font-size: 15.5px; }
.sl-btn .ic { width: 18px; height: 18px; }

/* 1. HERO -------------------------------------------------------------- */
.sl-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(121deg, transparent 55%, rgba(255, 255, 255, .95) 60%, transparent 65%),
    linear-gradient(121deg, transparent 64%, rgba(14, 26, 47, .035) 71%, transparent 78%, rgba(14, 26, 47, .045) 88%, transparent 96%),
    radial-gradient(46% 64% at 71% 44%, rgba(255, 236, 214, .55), transparent 72%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
}
.sl-hero-grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.sl-hero-copy { position: relative; z-index: 1; padding: 30px 0 clamp(44px, 4.4vw, 58px); }
.sl-crumb { padding: 0; margin: 0 0 clamp(32px, 3.2vw, 46px); }
.sl-crumb li { display: inline-flex; align-items: center; color: var(--sl-copy); }
.sl-crumb a { transition: color .2s; }
.sl-hero-title { font-size: clamp(2.85rem, 5.4vw, 4.9rem); font-weight: 800; line-height: .98; letter-spacing: -.038em; }
.sl-hero-sub { margin-top: 14px; font-size: clamp(1.45rem, 2.8vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.sl-hero-text { margin-top: 18px; max-width: 30em; font-size: clamp(15.5px, 1.36vw, 19.5px); line-height: 1.6; color: var(--sl-copy); }
.sl-hero-cta { margin-top: 32px; }

/* Sağdaki kompozisyon: 560×485 birimlik sahne; her şey yüzde ile yerleşir */
.sl-hero-art { position: relative; margin-right: calc(var(--gutter) * -1); }
.sl-stage { position: relative; width: 100%; aspect-ratio: 560 / 485; container-type: inline-size; }
.sl-stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-orbit { fill: none; stroke: var(--gold); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-orbit-dotted { stroke-dasharray: 1.5 3.5; stroke-opacity: .65; }
.sl-orbit-dot { fill: var(--orange); }
.sl-art-ad { font: 800 12px var(--font-sans); fill: #fff; text-anchor: middle; }
.sl-star {
  position: absolute; left: 45.7%; top: 20%; width: 10%; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 14px rgba(232, 119, 43, .35));
}
.sl-art--star .sl-star { top: 46.8%; width: 17.5%; filter: drop-shadow(0 10px 26px rgba(232, 119, 43, .4)); }
.sl-corner {
  position: absolute; font-size: clamp(8.5px, 1.62cqi, 12.5px); font-weight: 600; letter-spacing: .3em;
  line-height: 1.8; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.sl-c-tl, .sl-c-bl { left: 5.2%; }
.sl-c-tl, .sl-c-tr { top: 19.4%; }
.sl-c-tr { left: 73.8%; }
.sl-c-bl, .sl-c-br { top: 70%; }
.sl-c-br { left: 68.6%; }
.sl-hero-tag {
  position: absolute; left: 65.4%; top: 89.6%; display: flex; flex-direction: column;
  font-size: clamp(7.5px, 1.4cqi, 10.5px); letter-spacing: .26em; line-height: 1.75; text-transform: uppercase; white-space: nowrap;
}
.sl-hero-tag b { font-weight: 700; color: var(--ink); }
.sl-hero-tag span { position: relative; align-self: flex-start; font-weight: 500; color: var(--muted); }
.sl-hero-tag span::after { content: ""; position: absolute; left: 100%; top: 50%; width: 100vw; height: 1px; margin-left: 14px; background: var(--line-strong); }

/* 2. SÜREÇ (sıcak zemin) ------------------------------------------------ */
.sl-process { background: var(--bg-warm); padding-block: clamp(44px, 4vw, 56px) clamp(44px, 4.2vw, 58px); }
.sl-head { display: grid; grid-template-columns: minmax(0, 2.12fr) minmax(0, 1fr); gap: 24px 0; }
.sl-head .sl-h2 { font-size: clamp(2rem, 3.95vw, 3.55rem); }
.sl-head-text { margin-top: 20px; max-width: 32em; font-size: clamp(16px, 1.5vw, 21.5px); line-height: 1.5; color: var(--sl-copy); }
.sl-head-aside { padding-left: clamp(28px, 4.2vw, 60px); font-size: clamp(15px, 1.33vw, 19px); line-height: 1.55; color: var(--sl-copy); }
.sl-head-aside p { max-width: 24em; }
.sl-head--rule .sl-head-aside { display: flex; align-items: center; border-left: 1px solid var(--sl-rule); }
.sl-head--end { align-items: end; }

.sl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 2.6vw, 36px); }
.sl-step {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 18px 4px; text-align: center;
  background: linear-gradient(var(--sl-rule), var(--sl-rule)) 0 34.5px / 100% 1px no-repeat;
}
.sl-step + .sl-step::before { content: ""; position: absolute; left: 0; top: 35px; bottom: 0; width: 1px; background: var(--sl-rule); opacity: .7; }
.sl-step + .sl-step::after { content: ""; position: absolute; left: -2px; top: 32.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.sl-ring {
  --c: var(--orange); width: 70px; height: 70px; margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--orange) 55%, #fff); box-shadow: 0 8px 22px -12px rgba(232, 119, 43, .5);
}
.sl-ring .ic { width: 28px; height: 28px; stroke-width: 1.5; }
.sl-step h3 { font-size: clamp(17px, 1.6vw, 23px); font-weight: 700; letter-spacing: -.02em; }
.sl-step p { margin-top: 6px; max-width: 13em; font-size: clamp(14.5px, 1.28vw, 18.5px); line-height: 1.45; color: var(--sl-copy); }
.sl-step p:empty { display: none; }
.sl-step:has(p:empty) h3 { font-weight: 500; }

/* 3. FAYDALAR (beyaz) --------------------------------------------------- */
.sl-benefits { padding-block: clamp(44px, 4.4vw, 60px) clamp(40px, 4vw, 56px); }
.sl-benefits .sl-h2 { font-size: clamp(1.9rem, 3.5vw, 3.15rem); }
.sl-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 3.6vw, 52px); }
.sl-feature { padding: 2px clamp(10px, 1.1vw, 16px) 8px clamp(18px, 2.5vw, 36px); }
.sl-feature:first-child { padding-left: 0; }
.sl-feature + .sl-feature { border-left: 1px solid var(--line); }
.sl-feature > .ic { width: 42px; height: 42px; stroke-width: 1.3; color: var(--orange); }
.sl-feature h3 { margin-top: 18px; font-size: clamp(18px, 1.68vw, 24px); font-weight: 700; letter-spacing: -.022em; }
.sl-feature p { margin-top: 8px; max-width: 14.5em; font-size: clamp(15px, 1.32vw, 19px); line-height: 1.5; color: var(--sl-copy); }

/* 4. SONRAKİ ADIM (koyu CTA) -------------------------------------------- */
.sl-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(48px, 5vw, 64px) clamp(56px, 6vw, 84px);
  background: radial-gradient(80% 140% at 10% 0%, var(--navy-2) 0%, transparent 62%), var(--navy);
}
.sl-cta-copy { position: relative; z-index: 1; max-width: 900px; }
.sl-cta .sl-eyebrow { color: rgba(255, 255, 255, .86); }
.sl-cta .sl-h2 { font-size: clamp(1.85rem, 3.3vw, 2.9rem); line-height: 1.1; }
.sl-cta-text { margin-top: 16px; max-width: 33em; font-size: clamp(15.5px, 1.4vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .86); }
.sl-cta .sl-btn { margin-top: 30px; }
.sl-cta-deco { position: absolute; z-index: 0; top: 0; right: 0; width: clamp(560px, 52vw, 780px); aspect-ratio: 560 / 286; pointer-events: none; container-type: inline-size; }
.sl-cta-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-cta-star { position: absolute; left: 72.3%; top: 73.1%; width: 6.4%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 10px rgba(255, 170, 90, .55)); }
.sl-cta-words {
  position: absolute; left: 77%; top: 44%; transform: translateY(-50%); margin: 0;
  font-size: clamp(9.5px, 1.6cqi, 12.5px); font-weight: 600; letter-spacing: .3em; line-height: 1.85;
  text-transform: uppercase; color: rgba(255, 255, 255, .9); white-space: nowrap;
}

/* Duyarlı --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .sl-hero-grid { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
  .sl-btn { padding: 0 22px; gap: 16px; }
  .sl-cta-words { letter-spacing: .22em; }
}
@media (max-width: 980px) {
  .sl-hero-grid { grid-template-columns: 1fr; }
  .sl-hero-copy { padding-bottom: 12px; }
  .sl-hero-art { width: 100%; max-width: 620px; margin: 0 auto clamp(28px, 5vw, 48px); }
  .sl-head { grid-template-columns: 1fr; }
  .sl-head-aside { padding-left: 0; }
  .sl-head--rule .sl-head-aside { padding-left: 20px; }
  .sl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .sl-feature:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .sl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .sl-step:nth-child(odd)::before, .sl-step:nth-child(odd)::after { display: none; }
  .sl-cta { padding-bottom: 260px; }
  .sl-cta-deco { top: auto; bottom: 0; width: 600px; }
}
@media (max-width: 560px) {
  .sl-features { grid-template-columns: 1fr; row-gap: 0; }
  .sl-feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-left: 0; }
  .sl-feature:nth-child(n) { padding-left: 0; border-left: 0; }
  .sl-feature:first-child { padding-top: 0; }
  .sl-feature + .sl-feature { border-top: 1px solid var(--line); }
  .sl-feature > .ic { grid-row: span 2; width: 36px; height: 36px; }
  .sl-feature h3 { margin-top: 2px; }
  .sl-feature p { max-width: none; }
  .sl-step { padding-inline: 10px; }
  /* Başlıklardaki zorunlu satır sonları dar ekranda tek kelimelik yetim satır bırakıyor → dengeli kaydırma */
  .sl-h2 br { display: none; }
  /* Köşe etiketleri mobilde okunur boyutta (≥11px); sağ sütun sağa hizalı, sahneden taşmaz */
  .sl-corner { font-size: 11px; letter-spacing: .14em; line-height: 1.6; }
  .sl-c-tl, .sl-c-bl { left: 0; }
  .sl-c-tr, .sl-c-br { left: auto; right: 0; text-align: right; }
  .sl-c-tl, .sl-c-tr { top: 11%; }
  .sl-c-bl, .sl-c-br { top: 71%; }
  .sl-hero-tag { left: auto; right: 0; top: 90%; align-items: flex-end; font-size: 11px; letter-spacing: .1em; line-height: 1.6; }
  .sl-hero-tag span { align-self: flex-end; }
  .sl-hero-tag span::after { display: none; }
}