.referanslar-grid {
--referanslar-columns: 3;
--referanslar-gap: 1.5rem;
--referanslar-radius: 16px;
--referanslar-text: #1a1a1a;
--referanslar-muted: #6b7280;
--referanslar-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
--referanslar-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.14);
display: grid;
grid-template-columns: repeat(var(--referanslar-columns), minmax(0, 1fr));
gap: var(--referanslar-gap);
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background: transparent;
border: 0;
}
.referanslar-grid *,
.referanslar-grid *::before,
.referanslar-grid *::after {
box-sizing: border-box;
}
.referanslar-card {
display: flex;
flex-direction: column;
background: transparent;
border: 0;
border-radius: var(--referanslar-radius);
box-shadow: none;
text-decoration: none;
color: var(--referanslar-text);
overflow: visible;
transition: transform 0.25s ease;
}
.referanslar-card:hover,
.referanslar-card:focus-visible {
transform: translateY(-4px);
outline: none;
}
.referanslar-card__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: #e8eaed;
overflow: hidden;
border-radius: var(--referanslar-radius);
box-shadow: var(--referanslar-shadow);
}
.referanslar-card:hover .referanslar-card__media,
.referanslar-card:focus-visible .referanslar-card__media {
box-shadow: var(--referanslar-shadow-hover);
}
.referanslar-card__media img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform 0.35s ease;
}
.referanslar-card:hover .referanslar-card__media img,
.referanslar-card:focus-visible .referanslar-card__media img {
transform: scale(1.03);
}
.referanslar-card__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8eaed 0%, #d1d5db 100%);
}
.referanslar-card__body {
padding: 0.85rem 0.15rem 0;
text-align: center;
background: transparent;
border: 0;
}
.referanslar-card__title {
display: block;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--referanslar-text);
letter-spacing: -0.01em;
}
.referanslar-empty {
margin: 1rem 0;
color: var(--referanslar-muted, #6b7280);
text-align: center;
}
@media (max-width: 900px) {
.referanslar-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem;
}
}
@media (max-width: 640px) {
.referanslar-grid {
grid-template-columns: 1fr;
gap: 1.35rem;
}
}