/* Digi Medya V4 — web referanslarında tek görsel + doğrudan web sitesi linki */
.web-ref-home-section{
  grid-template-columns:.72fr 1.28fr;
  align-items:center;
}
.web-ref-single-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.home-web-ref-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.web-ref-single-card{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 18px 56px rgba(0,42,120,.11);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  aspect-ratio:16/10;
}
.web-ref-single-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 82px rgba(0,61,185,.17);
  border-color:rgba(0,93,255,.26);
}
.web-ref-single-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .48s ease, filter .48s ease;
}
.web-ref-single-card:hover img{
  transform:scale(1.045);
  filter:saturate(1.05) contrast(1.04);
}
.web-ref-single-card:after{
  content:"Web sitesini aç ↗";
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  padding:12px 16px;
  border-radius:16px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  background:linear-gradient(135deg,rgba(4,60,157,.92),rgba(255,106,0,.86));
  opacity:0;
  transform:translateY(10px);
  transition:.28s ease;
  text-align:center;
  box-shadow:0 16px 38px rgba(0,0,0,.18);
}
.web-ref-single-card:hover:after{
  opacity:1;
  transform:none;
}
.web-ref-single-card.is-passive{
  cursor:not-allowed;
  opacity:.72;
}
.web-ref-single-card.is-passive:after{
  content:"Web sitesi linki eklenmemiş";
}
.reference-page-hero .container p,
.web-ref-home-section p{
  max-width:680px;
}
@media(max-width:980px){
  .web-ref-home-section{
    grid-template-columns:1fr;
    gap:28px;
  }
  .web-ref-single-grid,
  .home-web-ref-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .web-ref-single-grid,
  .home-web-ref-grid{
    grid-template-columns:1fr;
  }
  .web-ref-single-card{
    border-radius:20px;
    aspect-ratio:16/11;
  }
  .web-ref-single-card:after{
    opacity:1;
    transform:none;
    font-size:12px;
    padding:10px 12px;
  }
}