/* Referanslar Sayfası */

/* ===== HERO ===== */
@keyframes refHeroGlow{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55}
  50%{transform:translate(-50%,-50%) scale(1.2);opacity:.9}
}

@keyframes refHeroReveal{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

.ref-hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(135deg,#071318 0%,var(--primary) 50%,#163d52 80%,#071318 100%);
}

.ref-hero-glow{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:600px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(var(--secondary-rgb),.18) 0%,transparent 65%);
  animation:refHeroGlow 7s ease-in-out infinite;
  pointer-events:none;
}

.ref-hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(var(--secondary-rgb),.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--secondary-rgb),.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,black 0%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,black 0%,transparent 90%);
}

.ref-hero-content{
  position:relative;
  z-index:2;
  padding:0 var(--section-px);
}

.ref-hero-content .hero-tag{
  display:inline-block;
  animation:refHeroReveal .7s ease both;
}

.ref-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(44px,6vw,80px);
  font-weight:800;
  color:#fff;
  letter-spacing:-3px;
  line-height:1.05;
  margin:20px 0;
  animation:refHeroReveal .8s .1s ease both;
}

.ref-hero p{
  max-width:500px;
  margin:0 auto;
  color:rgba(255,255,255,.6);
  font-size:18px;
  line-height:1.7;
  animation:refHeroReveal .8s .22s ease both;
}

/* ===== GRID ===== */
@keyframes refCardIn{
  from{opacity:0;transform:translateY(36px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.ref-grid-section{
  padding:100px var(--section-px) 110px;
  background:#f4f6f8;
}

.ref-grid-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}

.ref-card{
  background:#fff;
  border-radius:16px;
  padding:36px 24px 28px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.06);
  border:1px solid #edf0f3;
  opacity:0;
  transform:translateY(36px) scale(.97);
  transition:
    opacity .55s cubic-bezier(.22,.68,0,1),
    transform .55s cubic-bezier(.22,.68,0,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

.ref-card.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.ref-card:nth-child(1){transition-delay:.04s}
.ref-card:nth-child(2){transition-delay:.08s}
.ref-card:nth-child(3){transition-delay:.12s}
.ref-card:nth-child(4){transition-delay:.16s}
.ref-card:nth-child(5){transition-delay:.20s}
.ref-card:nth-child(6){transition-delay:.24s}
.ref-card:nth-child(7){transition-delay:.28s}
.ref-card:nth-child(8){transition-delay:.32s}
.ref-card:nth-child(9){transition-delay:.36s}
.ref-card:nth-child(10){transition-delay:.40s}
.ref-card:nth-child(11){transition-delay:.44s}
.ref-card:nth-child(12){transition-delay:.48s}
.ref-card:nth-child(13){transition-delay:.52s}
.ref-card:nth-child(14){transition-delay:.56s}
.ref-card:nth-child(15){transition-delay:.60s}
.ref-card:nth-child(16){transition-delay:.64s}
.ref-card:nth-child(17){transition-delay:.68s}
.ref-card:nth-child(18){transition-delay:.72s}
.ref-card:nth-child(19){transition-delay:.76s}
.ref-card:nth-child(20){transition-delay:.80s}
.ref-card:nth-child(21){transition-delay:.84s}
.ref-card:nth-child(22){transition-delay:.88s}
.ref-card:nth-child(23){transition-delay:.92s}
.ref-card:nth-child(24){transition-delay:.96s}
.ref-card:nth-child(25){transition-delay:1s}
.ref-card:nth-child(26){transition-delay:1.04s}

.ref-card:hover{
  box-shadow:0 12px 40px rgba(var(--secondary-rgb),.18),0 4px 12px rgba(0,0,0,.08);
  border-color:rgba(var(--secondary-rgb),.55);
  transform:translateY(-8px) scale(1) !important;
}

.ref-card-logo{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}

.ref-card-logo img{
  max-width:120px;
  max-height:70px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.1));
  transition:transform .35s cubic-bezier(.22,.68,0,1), filter .35s ease;
}

.ref-card:hover .ref-card-logo img{
  filter:drop-shadow(0 4px 14px rgba(var(--secondary-rgb),.35));
  transform:translateY(-4px);
}

/* Trakya ve Antalya: görsel scale ile büyütme */
.ref-card:nth-child(2) .ref-card-logo img,
.ref-card:nth-child(23) .ref-card-logo img{
  transform:scale(1.6);
}

.ref-card:nth-child(2):hover .ref-card-logo img,
.ref-card:nth-child(23):hover .ref-card-logo img{
  transform:scale(1.6) translateY(-4px);
}

.ref-card h3{
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:700;
  color:var(--primary);
  line-height:1.4;
  letter-spacing:-.1px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .ref-grid-inner{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:640px){
  .ref-grid-inner{grid-template-columns:repeat(2,1fr);gap:14px}
  .ref-grid-section{padding:60px 18px 70px}
  .ref-hero{min-height:55vh}
  .ref-hero h1{letter-spacing:-2px}
  .ref-card{padding:28px 16px 22px}
  .ref-card-logo{height:64px;margin-bottom:14px}
  .ref-card-logo img{max-width:90px;max-height:54px}
  .ref-card h3{font-size:12px}
}