/* Grid - varsayılan düzenin varsa bunu korur; yoksa basit responsive */
.hiw-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 24px;
  }
  @media (min-width: 992px) {
    .hiw-grid { grid-template-columns: repeat(4, 1fr); }
  }
  
  /* Kart */
  .hiw-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    overflow: hidden;           /* üst görselin kenarları yuvarlakla uyumlu */
    text-align: center;
    padding-bottom: 18px;       /* başlık + paragraf için boşluk */
  }
  
  /* Üst görsel alanı (tam genişlik + sabit yükseklik) */
  .hiw-thumb-wrap {
    position: relative;
    width: 100%;
    height: 160px;              /* desktop için ideal; istersen 180px yap */
    overflow: hidden;
    background: #f7f7fb;
  }
  @media (max-width: 575.98px) {
    .hiw-thumb-wrap { height: 140px; }
  }
  
  /* Görsel tam kaplasın */
  .hiw-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* taşmadan alanı doldurur */
  }
  
  /* Adım rozeti: görselin üstünde */
  .step {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-weight: 700;
    color: #fff;
    background: #6f42c1;        /* markanın moru; istersen değiştir */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
  }
  
  /* Başlık & metin */
  .hiw-card h4 {
    margin: 16px 16px 6px 16px;
    font-weight: 700;
  }
  .hiw-card p {
    margin: 0 16px;
    color: #6c757d;
  }