/* GENEL AYARLAR */
body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding-top: 150px;
    background-color: #d9d7d244;
}

.projects-header h2 {
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  color: #2E3092;
  padding-bottom: 20px;
  text-align: left;
  position: relative;
  padding-left: 9vh;
}

.projects-header h2::after {
  content: "";
  left: 0;          /* sayfanın solundan başla */
  bottom: 0;        /* başlığın altına hizala */
  height: 1px;      /* çizgi kalınlığı */
  width: 33vw;     /* ekranın tamamı boyunca çizgi */
  background-color: #2E3092;
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 sütun */
  grid-gap: 50px; /* satır ve sütun boşluğu */
   column-gap: 100px;
   max-width: 1300px;

}

.card--1 .card__img, .card--1 .card__img--hover {
    background-image: url('/img/villa/DJI_0537.PNG');
}
.card--2 .card__img, .card--2 .card__img--hover {
    background-image: url('/img/selcuklu/DJI_0551.PNG');
}
.card--3 .card__img, .card--3 .card__img--hover {
    background-image: url('/img/vatan/DJI_0546.PNG');
}
.card--4 .card__img, .card--4 .card__img--hover {
    background-image: url('/img/kaman/33-23.jpg');
}
.card--5 .card__img, .card--5 .card__img--hover {
    background-image: url('/img/keçiören-hill-house/760b7b4e8a9245e8dd12f087d0a4f92f.jpg');
}
.card--6 .card__img, .card--6 .card__img--hover {
    background-image: url('/img/atakent-karma/g_6803.jpg');
}
.card--7 .card__img, .card--7 .card__img--hover {
    background-image: url('/img/atakent-karma/karma-2.png');
}
.card--8 .card__img, .card--8 .card__img--hover {
    background-image: url('/img/grande-uygar/74de0be4-3ed0-43f4-9d49-b3f6d2fe8b9f.jpg');
}


.card {
   position: relative; /* absolute elemanların referansı */
  background-color: #fff;
  width: 100%; 
  border-radius: 12px;
  overflow: hidden;
  transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
  box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);
  margin : 20px;
}
.card:hover {
  transform: scale(1.10);   /* Hoverda büyütme */
  box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
}

.card__title { 
  color: #2E3092;
}
.card__img {
  height: 235px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-size: cover;
 background-position: center;

}
.card__img--hover {
  position: absolute;
  height: 240px;
  width: 100%;              /* Kartın genişliğini kaplasın */
  top: 0;
  left: 0;                  /* sola hizala */
  opacity: 0;               /* başlangıçta görünmez */
  transition: 0.5s all ease-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card:hover .card__img {
  opacity: 0;  /* Hover olunca eski görsel kaybolur */
}

.card:hover .card__img--hover {
  height: 100%;  /* Hover olunca kartın tamamını kaplıyor */
  opacity: 0.5;  /* Hafif kararıyor */
}
.card__info {
  background-color: #fff;
  padding: 16px 24px 24px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.card:hover .card__info {
  background-color: transparent;
}

/* ----------------- */
/* Mobile uyumluluk */
/* ----------------- */
@media (max-width: 992px) {
  .cards {
    grid-template-columns: 1fr; /* tek sütun */
    row-gap: 30px;
  }

  .card {
    margin: 0; /* Grid gap yeterli, margin gereksiz */
  }
}

@media (max-width:425.98px) {
  .card__category {
    font-size: 11px;
  }

  .card__title {
    font-size: 16px;
  }

  .card__by {
    font-size: 10px;
  }
}

.card_link {
  position: absolute;
  inset: 0;    
  flex-direction: column; /* CTA ortalansın */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;               /* hover ile görünür olacak */
  transition: opacity .25s ease;
}

/* CTA buton görünümü */
.card__cta {
  display: inline-block;
  padding: 10px 18px;
  background: #2E3092;
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(46,48,146,0.35);
  transform: scale(0.96);
  transition: transform .2s ease, box-shadow .2s ease;
  pointer-events: none;     /* tıklama linke gider */
}
.card__cta {
  z-index: 4;
  pointer-events: none; /* tıklama linke gider */
}

/* Hover ve klavye erişilebilirliği */
.card:hover .card_link,
.card:focus-within .card_link {
  opacity: 1;
}
.card:hover .card__img--hover,
.card:focus-within .card__img--hover {
  opacity: 1;
}
.card_link:hover .card__cta,
.card_link:focus .card__cta {
  transform: scale(1);
  box-shadow: 0 10px 24px rgba(46,48,146,0.45);
}

/* Mobilde hover yoksa CTA hep görünür olsun (dokunmatik) */
@media (hover: none) {
  .card_link { opacity: 1; }
  .card__img--hover { opacity: 0; }

}