/* Alt sayfalar (4 Kas 2026): Yıldırım'ın sayfa tasarımları (G:\PiguHealth360\PiguHealth360\
   P360_Health_Yuksek_Cozunurluk_Sayfa_Tasarimlari) + pCloud parça görselleri.
   Her bölüm tam genişlikte bir arka plan görseli; yazı görselin boş tarafında.
   ana.css (renkler, düğmeler, simgeler) ve ana-olcek.css (--u, .a-kap) ile birlikte yüklenir.
   Ölçüler 1672 px tasarım pikselidir (--u); tasarımlar ~900 px çizildiği için
   dosyadaki ölçü × 1,84 alınır. */

/* Bant: görsel arkada, metin bir yanda */
.s-bant{position:relative;overflow:hidden;background:#fff}
.s-gorsel{display:block;width:100%;height:auto;max-width:none}
.s-ic{position:relative;z-index:1;padding-top:32px;padding-bottom:48px}
.s-bant h1,.s-bant h2{color:var(--a-lacivert);font-weight:800;letter-spacing:-.05em;line-height:1.06;margin:0}
.s-bant h1{font-size:clamp(36px,9vw,48px)}
.s-bant h2{font-size:clamp(30px,7.5vw,40px)}
.s-bant h1 em,.s-bant h2 em{font-style:normal;color:var(--a-turuncu)}
.s-lead{font-size:17px;line-height:1.55;color:var(--a-gri);margin:18px 0 0}
.s-butonlar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.s-oynat{display:inline-flex;align-items:center;gap:12px;font-weight:700;color:var(--a-lacivert)}
.s-oynat span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 8px 22px #1423441f}
.s-oynat svg{width:18px;height:18px;fill:var(--a-lacivert);stroke:none}

/* Koyu bant (beyaz yazı) */
.s-koyu{background:#0f2142}
.s-koyu h1,.s-koyu h2{color:#fff}
.s-koyu .s-lead{color:#d5ddeb}
.s-koyu .a-kicker{color:#fff}

/* Kutucuklar: simge + başlık + kısa açıklama */
.s-kutular{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px;list-style:none;padding:0}
.s-kutu{background:#fff;border:1px solid #eef1f6;border-radius:14px;box-shadow:0 14px 34px #1423441a;padding:20px 12px;text-align:center}
.s-kutu svg{width:34px;height:34px;color:var(--a-mavi);stroke-width:1.7;margin:0 auto 12px;display:block}
.s-kutu b{display:block;font:700 14px/1.3 'DM Sans',sans-serif;color:var(--a-lacivert)}
.s-kutu small{display:block;font-size:12.5px;line-height:1.4;color:var(--a-gri);margin-top:6px}

/* Koyu bantta beyaz daire simgeli kısa liste */
.s-ozet{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 0;padding:0;list-style:none;text-align:center}
.s-ozet span{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#fff;box-shadow:0 10px 26px #0005}
.s-ozet svg{width:26px;height:26px}
.s-ozet b{display:block;font:700 14px/1.3 'DM Sans',sans-serif;color:#fff}

@media (max-width:991.98px){
  .s-bant .s-gorsel{aspect-ratio:var(--mo-oran,16/10);object-fit:cover;object-position:var(--mo-yer,right center)}
  .s-koyu .s-gorsel{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 35%);mask-image:linear-gradient(0deg,transparent 0,#000 35%)}
}

@media (min-width:992px){
  /* Bant yüksekliği görselin kendi oranından gelir; metin görselin üstüne oturur. */
  .s-bant{display:grid}
  .s-bant>.s-gorsel{grid-area:1/1;width:100%;height:100%;min-height:calc(var(--h,600) * var(--u));object-fit:cover;object-position:var(--yer,center)}
  .s-bant>.s-ic{grid-area:1/1;align-self:center;padding-top:calc(var(--ust,60) * var(--u));padding-bottom:calc(var(--alt,60) * var(--u))}
  .s-metin{max-width:calc(var(--mw,640) * var(--u))}
  .s-sag .s-metin{margin-left:auto}
  .s-bant h1{font-size:calc(72 * var(--u));line-height:1.12}
  .s-bant h2{font-size:calc(56 * var(--u));line-height:1.1}
  .s-kucuk-baslik h2{font-size:calc(50 * var(--u))}
  .s-lead{font-size:max(15px,calc(23 * var(--u)));line-height:1.55;margin-top:calc(24 * var(--u))}
  .s-butonlar{gap:calc(36 * var(--u));margin-top:calc(42 * var(--u))}
  .s-butonlar .a-btn{padding:calc(24 * var(--u)) calc(42 * var(--u));font-size:max(14px,calc(19 * var(--u)))}
  .s-oynat{gap:calc(16 * var(--u));font-size:max(14px,calc(20 * var(--u)))}
  .s-oynat span{width:calc(66 * var(--u));height:calc(66 * var(--u))}
  .s-oynat svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}

  .s-kutular{grid-template-columns:repeat(var(--n,4),1fr);gap:calc(14 * var(--u));margin-top:calc(40 * var(--u))}
  .s-kutu{border-radius:calc(16 * var(--u));padding:calc(30 * var(--u)) calc(14 * var(--u)) calc(26 * var(--u))}
  .s-kutu svg{width:calc(46 * var(--u));height:calc(46 * var(--u));margin-bottom:calc(18 * var(--u))}
  .s-kutu b{font-size:max(12px,calc(17.5 * var(--u)))}
  .s-kutu small{font-size:max(11px,calc(14 * var(--u)));margin-top:calc(8 * var(--u))}

  /* Metin solda, yan blok sağ altta (ör. koyu kapanış bandı) */
  .s-yan{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(40 * var(--u))}
  .s-yan>.s-ozet{flex:0 0 calc(820 * var(--u));margin-bottom:calc(10 * var(--u))}
  .s-ozet{gap:calc(30 * var(--u));margin-top:0}
  .s-ozet span{width:calc(76 * var(--u));height:calc(76 * var(--u));margin-bottom:calc(18 * var(--u))}
  .s-ozet svg{width:calc(34 * var(--u));height:calc(34 * var(--u))}
  .s-ozet b{font-size:max(12px,calc(18 * var(--u)))}
}