/* ══ YÖNLENDİRME KARTLARI (Hizmetler, Okul, İş) ══ */
.services-links-section {
    padding: 80px 4vw;
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 10;
  }
  
  .services-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
    height: 60vh;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .services-container.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .service-card {
    flex: 1; 
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease, opacity 0.4s ease;
    box-shadow: var(--shadow-sm);
    will-change: flex, transform, box-shadow, opacity; 
  }
  
  /* GÖRSEL ALANI (BAŞLANGIÇTA SİYAH BEYAZ VE SOLUK) */
  .service-card .sc-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-image: var(--bg-image); /* HTML'den alınan değişken */
    filter: grayscale(100%) brightness(0.65); /* Başlangıçta siyah/beyaz */
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.7s ease;
    transform: scale(1);
    z-index: 1;
  }
  
  /* Eski ikinci görsel yapısını siliyoruz */
  .service-card .sc-image-hover {
    display: none; 
  }
  
  /* AKILLI HOVER: Bir karta gelinince diğer tüm kartlar küçülür ve solar */
  .services-container:hover .service-card {
    flex: 0.75;
    opacity: 0.6;
  }
  
  /* HOVER DURUMU: Üzerine gelinen kart büyür, ışık saçar ve parlar */
  .services-container .service-card:hover {
    flex: 1.8; 
    opacity: 1;
    transform: translateY(-12px) scale(1.02);
    /* Arka planda abartısız bir glow (Işık) */
    box-shadow: 0 20px 40px rgba(42, 157, 143, 0.35), 0 0 25px rgba(42, 157, 143, 0.15);
    z-index: 5;
  }
  
  /* ÜZERİNE GELİNİNCE SİYAH-BEYAZDAN RENKLİYE GEÇİŞ! */
  .service-card:hover .sc-image {
    filter: grayscale(0%) brightness(0.95); /* Orijinal renge döner */
    transform: scale(1.06); /* Hafif yakınlaşır */
  }
  
  /* YAZI ALANI */
  .sc-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: #fff;
    z-index: 5;
    text-align: center;
    transform: translateY(15px);
    transition: transform 0.4s ease;
  }
  
  .service-card:hover .sc-content {
    transform: translateY(0);
  }
  
  .sc-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 1.5vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
  }
  
  /* MOBİL TASARIM */
  @media (max-width: 768px) {
    .services-container {
      flex-direction: column;
      height: auto;
    }
    .services-container:hover .service-card {
      flex: none !important;
      opacity: 1;
    }
    .service-card {
      height: 160px; 
      flex: none !important;
    }
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(42, 157, 143, 0.2);
    }
  }
/* TABLET */
@media (min-width: 769px) and (max-width: 1024px) {
  .services-container { height: 280px; }
  .sc-content h3 { font-size: 1rem; }
}

/* KÜÇÜK MOBİL */
@media (max-width: 480px) {
  .service-card { height: 130px; }
  .sc-content h3 { font-size: 0.95rem; letter-spacing: .12em; }
}