.genes-grid{display:grid;gap:24px}
.genes-grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.genes-grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.genes-grid.cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media(max-width:1024px){.genes-grid.cols-3,.genes-grid.cols-4{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media(max-width:640px){.genes-grid{grid-template-columns:1fr}}

.genes-card{
  position:relative;
  min-height:320px;
  border-radius:12px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-color:#111;
}
.genes-card.no-bg{ background-image:none !important; }

.genes-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--overlay,.25));
}

.genes-content{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:18px;
}
.genes-title{
  margin:0 0 12px 0;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-size:clamp(20px,2vw,34px);
  line-height:1.1;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
  min-height: 154px;
}

/* BUTON: tema/link hover rengini ez -> kırmızı olmasın */
.genes-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    color: #ffffff !important;
  
    border: 1px solid rgb(255 255 255);
    transition: background .18s ease, filter .18s ease;
}
.genes-btn:hover{
  color:#ffffff !important;
  background: var(--btn-bg-hover, #16a085);
  filter: brightness(1.02);
}