/* Kaynak-transfer: prototip hesaplayicilar-v1.html <style> blogu — AYNEN.
   HANDOFF §0: bu tasarim yeniden yapilmaz, oldugu gibi tasinir. */
/* ===== SAYFA CSS — kabuk CSS'i assets/css/dd-shell.css'te ===== */
/* =====================================================================
   HESAPLAYICILAR — Sağlık Araçları modülünün hesaplayıcı listesi.
   Bu sayfanın gövdesi saglik-araclari-v1'in hesaplayıcı bölümünden geldi;
   o adres modülün merkez sayfası oldu, liste buraya taşındı.
   YENİ SINIF YOK. Kullanılan yapılar ve geldikleri sayfa:
     .tst-top / .rd-crumb / .tst-head / .tst-meta   ← saglik-araclari-v1
     .hub-grid                                      ← saglik-araclari-v1
     .calc-card / .calc-ico ailesi                  ← saglik-hub-v1
     .sec-green .eyebrow                            ← saglik-hub-v1
     .pf-disclaimer                                 ← saglik-hub-v1
     .sec / .sec-head / .see-all / .lead / .chips   ← dd-shell.css (kabuk)
   ===================================================================== */

/* ---- ÜST BÖLGE (saglik-araclari-v1 .tst-top dili — birebir) ---- */
.tst-top{
  position:relative;padding-top:128px;
  background-image:linear-gradient(90deg,rgba(18,28,22,.94),rgba(20,32,25,.74)),
    url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1600&q=80&auto=format&fit=crop&exp=7&gam=6&sat=-9&high=8&vib=5');
  background-size:cover;background-position:center;
}
.tst-top .wrap{position:relative}
.rd-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:18px 0 14px;font-size:13px;font-weight:500;color:var(--muted)}
.rd-crumb a{color:var(--muted);transition:.18s}
.rd-crumb a:hover{color:var(--green-deep)}
.rd-crumb i{font-size:9px;color:#c7c7c7}
.rd-crumb b{color:var(--slate);font-weight:700}
.tst-top .rd-crumb{color:#bcd0c4}
.tst-top .rd-crumb a{color:#bcd0c4}
.tst-top .rd-crumb a:hover{color:#7fe0b0}
.tst-top .rd-crumb i{color:rgba(255,255,255,.4)}
.tst-top .rd-crumb b{color:#fff}
.tst-head{padding:10px 0 44px;max-width:680px}
.tst-head .eyebrow{color:#7fe0b0}
.tst-head .eyebrow::before{background:var(--green)}
.tst-head h1{color:#fff;font-size:44px;margin:14px 0 12px;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.tst-head .lead{color:#e3ede7;font-weight:500;font-size:15.5px;text-shadow:0 1px 14px rgba(0,0,0,.3)}
.tst-meta{display:flex;align-items:center;gap:22px;margin-top:18px;font-size:13px;color:#cfe0d6;font-weight:600}
.tst-meta span{display:inline-flex;align-items:center;gap:8px}
.tst-meta i{color:#54d39a}

/* ---- sağlık bölümü eyebrow'u (saglik-hub) ---- */
.sec-green .eyebrow{color:var(--green-deep)}
.sec-green .eyebrow::before{background:var(--green)}

/* ---- calc-card (hesaplayıcı kartı — saglik-hub'dan) ---- */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.calc-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--paper);border:1px solid #e2efe8;border-radius:var(--radius-lg);cursor:pointer;transition:.25s var(--ease)}
.calc-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:var(--sh-md)}
.calc-ico{flex:none;width:50px;height:50px;border-radius:var(--radius-lg);background:#EAF7F0;display:grid;place-items:center}
.calc-ico i{font-size:21px;color:var(--tomato-deep)}
.calc-card h4{font-size:16px;margin-bottom:3px}
.calc-card p{font-size:12.5px;color:var(--muted);font-weight:500}
.calc-card .go{margin-left:auto;color:var(--green);font-size:13px;transition:.2s var(--ease)}
.calc-card:hover .go{transform:translateX(3px)}

/* ---- tıbbi bilgilendirme şeridi (saglik-hub) ---- */
.pf-disclaimer{background:var(--tomato-tint);border-top:1px solid rgba(59,183,126,.25)}
.pf-disclaimer .wrap{display:flex;gap:14px;align-items:flex-start;padding-top:22px;padding-bottom:22px}
.pf-disclaimer i{color:var(--tomato-deep);font-size:17px;margin-top:2px;flex:none}
.pf-disclaimer p{font-size:13.5px;color:var(--slate-2);font-weight:500;line-height:1.65;max-width:960px}
.pf-disclaimer b{color:var(--slate);font-weight:700}

/* ---- responsive (saglik-araclari reçetesi) ---- */
@media (max-width:1024px){
  .hub-grid{grid-template-columns:1fr 1fr}
  .tst-head h1{font-size:30px}
}
@media (max-width:640px){
  .tst-top{padding-top:74px}
  .hub-grid{grid-template-columns:1fr;gap:18px}
  .tst-head h1{font-size:25px}
  .tst-meta{flex-wrap:wrap;gap:12px 18px}
}