/* ==========================
        PROJECTS 
===========================*/

/* GRID */
.masonry-grid {
  column-count: 2;
  column-gap: 20px;
}

/* ITEM */
.grid-item {
  break-inside: avoid;
  margin-bottom: 20px;
}

.grid-item img {
  width: 100%;
  display: block;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  /* TEK KOLON */
  .masonry-grid {
    column-count: 1;
  }
}

.baslik {
  padding-bottom: 48px;
}

.projects-quote {
  padding: 120px 0;
  text-align: center;
}

.projects-quote-text {
  font-family: "Kalnia", serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--primary-color);
  max-width: 936px;
  margin: 0 auto;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: normal;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  /* QUOTE SECTION */
  .projects-quote {
    padding: 80px 18px;
  }

  .projects-quote-text {
    font-size: 28px;
    line-height: normal;
    margin: 0 auto;
    text-align: center;
    letter-spacing: normal;
  }
}

/* ==========================
        PRODUCTS 
===========================*/
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr); /* 🔥 2 kolon */
    gap: 12px;
  }
}

/* ==========================
        TEXT BLOCK 
===========================*/
.projects-text {
  padding: 64px 0;
  text-align: center;
  background: #f3f3f3;
  margin: 120px 0; /* 🔥 boşluğu dışarı al */
}

.projects-text-line {
  font-family: "Kalnia", serif;
  font-size: 32px;
  font-weight: 400;
  color: #5d5d5d;

  max-width: 936px;
  margin: 0 auto;

  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .projects-text {
    padding: 48px 0;
  }

  .projects-text-line {
    font-size: 28px;
    line-height: normal;
  }
}

/* ==========================
        CLIENTS 
===========================*/
.clients {
  margin-bottom: 80px;

  text-align: center;
}

/* BAŞLIK + ÇİZGİ */
.clients-subtitle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

/* TEXT */

/* ÇİZGİ */
.line {
  height: 1.5px;
  width: 200px;
  background: #373737;
}

/* SLIDER */
.clients-slider {
  overflow-x: auto;
  cursor: grab;
  margin-bottom: 80px;
  margin-top: 80px;
}

/* TRACK */
.clients-track {
  display: flex;
  padding: 0 20px;
}

/* ITEM */
.client-item {
  width: 208px;
  height: 208px;
  flex: 0 0 auto;
  margin-right: 0 !important;
  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* LOGO */
.client-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.client-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ALT ÇİZGİ */
.clients-bottom-line {
  height: 1px;
  background: #373737;
}

/* SCROLLBAR GİZLE */
.clients-slider::-webkit-scrollbar {
  display: none;
}
.clients-slider {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* 🔥 iPhone gibi kayma */
  cursor: grab;
  margin-top: 32px;
  margin-bottom: 32px;
}

.clients-slider {
  cursor: grab;
}

.clients-slider.active {
  cursor: grabbing;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .clients-track {
    display: flex;
    padding: 0;
  }
}

/* ==========================
        COMMENTS 
===========================*/
.client-comments {
  padding-bottom: 122px;
}
.comments-slider {
  position: relative;
  overflow: hidden;
}
.comments-slide {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 400px;
  border-radius: 12px;
  display: flex;
  background-image: url("../../assets/img/yorumlar-background.png");
}
.comments-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  opacity: 0;
  pointer-events: none;
}

.comments-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.comments-content h3,
.comments-content h4,
.comments-content .body-1 {
  color: var(--white);
}
.comments-content {
  padding: 58px 192px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  text-align: center;

  opacity: 0;
  transform: translateY(5px);
  transition: 
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.comments-slide.active .comments-content {
  opacity: 1;
  transform: translateY(0);
}
.comments-content h3 {
  padding-bottom: 12px;
}
.comments-content img {
  width: 36px;
  height: 20px;
}
.comments-content > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
/* DOTS */
.comments-dots {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.comments-dots .comments-dot {
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}

.comments-dots .comments-dot.active {
  background: var(--primary-green);
  transform: scale(1.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .comments-slide {
    height: 564px;
  }
  .comments-content {
    padding: 45px 32px;
  }
  .comments-dots {
    bottom: 45px;
  }
  .comments-content .body-1 {
    padding-top: 8px;
  }
  .client-comments {
    padding-bottom: 80px;
  }
  .client-comments.musteri {
    padding-bottom: 22px;
  }
}