/* Nasıl Çalışır? (4 Kas 2026) — tasarım: gorseller-3kas\NasılCalisir\P360 Health Klinik Büyüme Ekosistemi.png
   alt.css'teki .s-bant düzenini kullanır; burada yalnız sayfaya özgü parçalar var. */

/* Adım numarası kutusu + üst başlık aynı satırda */
.nc-etiket{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.nc-etiket .a-kicker{margin:0}
.nc-no{display:grid;place-items:center;width:58px;height:58px;border-radius:12px;background:#e4eefc;color:var(--a-mavi);font:800 24px/1 Manrope,sans-serif;letter-spacing:-.02em;flex:none}
.nc-kanal .s-kutu svg{stroke:none}

/* Kapanış: dört çözüm kartı görselin üstündeki kartların yerinde */
.nc-eko{background:#0f2142}
.nc-sahne{position:relative}
.nc-cozumler{list-style:none;margin:0;padding:0}
.nc-cozumler a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-content:center;height:100%;background:#fff;border-radius:14px;padding:14px 16px;color:var(--a-lacivert);box-shadow:0 14px 34px #0004;transition:transform .2s}
.nc-cozumler a:hover{transform:translateY(-2px);color:var(--a-lacivert)}
.nc-cozumler span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none;grid-row:span 2}
.nc-cozumler span svg{width:24px;height:24px;color:#fff;stroke-width:2}
.nc-cozumler b{display:block;font:800 17px/1.2 Manrope,sans-serif;letter-spacing:-.02em}
.nc-cozumler small{display:block;font-size:13.5px;line-height:1.35;color:var(--a-gri);margin-top:4px}
.nc-cozumler a>b,.nc-cozumler a>small{grid-column:2}

@media (max-width:991.98px){
  .nc-etiket{gap:14px}
  .nc-kutular{grid-template-columns:repeat(2,1fr)}
  .nc-kanal{grid-template-columns:repeat(3,1fr)}
  .nc-kanal .s-kutu{padding:16px 6px}
  .nc-kanal .s-kutu small{font-size:11.5px}
  /* Mobilde: görselin kart olmayan sol (lobi) kısmı, metin, ardından kartlar */
  .nc-eko{display:flex;flex-direction:column}
  .nc-sahne{display:contents}
  .nc-eko .s-gorsel{order:0;aspect-ratio:9/10;object-fit:cover;object-position:left center}
  .nc-eko .s-ic{order:1;padding-bottom:24px}
  .nc-cozumler{order:2;display:grid;gap:10px;padding:0 24px 44px}
}

@media (min-width:992px){
  .nc-etiket{gap:calc(28 * var(--u));margin-bottom:calc(26 * var(--u))}
  .nc-no{width:calc(88 * var(--u));height:calc(88 * var(--u));border-radius:calc(16 * var(--u));font-size:calc(34 * var(--u))}
  .nc-adim h2{max-width:calc(var(--hw,600) * var(--u))}
  .nc-hero .s-lead,.nc-adim .s-lead,.nc-eko .s-lead{font-size:max(15px,calc(25.5 * var(--u)));line-height:1.58}
  .nc-hero h1{font-size:calc(75 * var(--u));line-height:1.08}
  .nc-dar h2{font-size:calc(51 * var(--u))}
  .nc-kutular{width:calc(var(--kw) * var(--u));margin-left:calc(var(--kx,0) * var(--u));margin-top:calc(50 * var(--u));gap:calc(10 * var(--u))}
  .nc-kutular .s-kutu{min-height:calc(184 * var(--u));padding:calc(30 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u))}
  .nc-kutular .s-kutu svg{width:calc(56 * var(--u));height:calc(56 * var(--u));margin-bottom:calc(20 * var(--u))}
  .nc-kutular .s-kutu b{font-size:max(12px,calc(17 * var(--u)))}
  .nc-kanal .s-kutu b{font-size:max(12px,calc(19 * var(--u)))}
  .nc-kutular .s-kutu small{font-size:max(11px,calc(15 * var(--u)))}

  /* Kapanış bandı: görsel kendi oranında; kartlar görseldeki kartların üstünde (yüzde konum) */
  .nc-eko>.nc-sahne{grid-area:1/1}
  .nc-eko>.s-ic{grid-area:1/1;align-self:center}
  .nc-eko .s-metin{max-width:calc(500 * var(--u))}
  .nc-eko h2{font-size:calc(64 * var(--u))}
  .nc-cozumler li{position:absolute;top:var(--y);left:var(--x);width:var(--w);height:var(--g)}
  .nc-pa{--x:37.43%;--y:21.42%;--w:16.9%;--g:16.15%}
  .nc-cm{--x:65.68%;--y:21.42%;--w:17.5%;--g:16.15%}
  .nc-gr{--x:37.43%;--y:59.7%;--w:17.65%;--g:17.6%}
  .nc-in{--x:65.58%;--y:59.7%;--w:17.6%;--g:17.6%}
  .nc-cozumler a{border-radius:calc(16 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(28 * var(--u));column-gap:calc(16 * var(--u));box-shadow:none}
  .nc-cozumler span{width:calc(52 * var(--u));height:calc(52 * var(--u))}
  .nc-cozumler span svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}
  .nc-cozumler b{font-size:max(11px,calc(17 * var(--u)))}
  .nc-cozumler small{font-size:max(10px,calc(13.5 * var(--u)));margin-top:calc(5 * var(--u))}
}