/* =========================================================
   BABYLONIA – MODERN LANGUAGE CARDS
   ========================================================= */


/* ANA GRID */
.lfeatures {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px !important;

  width: 100% !important;
  max-width: 1500px !important;

  margin: 0 auto !important;
  padding: 10px 20px 30px !important;

  box-sizing: border-box !important;
}


/* KART */
.lfeatures .lfeature {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;

  position: relative !important;

  background: #ffffff !important;

  border: 1px solid rgba(20, 45, 65, 0.08) !important;
  border-radius: 16px !important;

  overflow: hidden !important;

  box-shadow:
    0 4px 14px rgba(14, 35, 50, 0.05),
    0 14px 35px rgba(14, 35, 50, 0.06) !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}


/* TÜM KART TIKLANABİLİR */
.lfeatures .lfeature > a {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  text-decoration: none !important;
  color: inherit !important;

  background: transparent !important;
}


/* FOTOĞRAF ALANI */
.lfeatures .lfeature-icon {
  position: relative !important;

  width: 100% !important;
  aspect-ratio: 4 / 3 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #f2f5f7 !important;
}


/* FOTOĞRAF */
.lfeatures .lfeature-icon img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  transition:
    transform 0.5s cubic-bezier(.2,.7,.2,1),
    filter 0.4s ease !important;
}


/* DİL ADI */
.lfeatures .lfeature h3 {
  position: relative !important;

  margin: 0 !important;
  padding: 21px 15px 23px !important;

  text-align: center !important;

  font-size: 1.08rem !important;
  line-height: 1.25 !important;

  font-weight: 700 !important;
  letter-spacing: 0.035em !important;

  color: #176fa8 !important;

  background: #ffffff !important;

  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
}


/* DİL ADININ ALTINDA MİNİMAL VURGU */
.lfeatures .lfeature h3::after {
  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  bottom: 13px !important;

  width: 28px !important;
  height: 2px !important;

  border-radius: 20px !important;

  background: #1f7f9d !important;

  transform: translateX(-50%) !important;

  opacity: 0 !important;

  transition:
    width 0.3s ease,
    opacity 0.3s ease !important;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .lfeatures .lfeature:hover {
    transform: translateY(-7px) !important;

    border-color: rgba(31, 127, 157, 0.20) !important;

    box-shadow:
      0 8px 20px rgba(14, 35, 50, 0.07),
      0 22px 45px rgba(14, 35, 50, 0.12) !important;
  }


  .lfeatures .lfeature:hover .lfeature-icon img {
    transform: scale(1.045) !important;

    filter: saturate(1.05) contrast(1.02) !important;
  }


  .lfeatures .lfeature:hover h3 {
    color: #0b536d !important;
  }


  .lfeatures .lfeature:hover h3::after {
    width: 46px !important;
    opacity: 1 !important;
  }

}


/* KLAVYE İLE GEZİNME */
.lfeatures .lfeature > a:focus-visible {
  outline: 3px solid rgba(31, 127, 157, 0.45) !important;
  outline-offset: -3px !important;

  border-radius: 16px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .lfeatures {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 22px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .lfeatures {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;

    padding: 8px 12px 24px !important;
  }


  .lfeatures .lfeature {
    border-radius: 13px !important;

    box-shadow:
      0 4px 14px rgba(14, 35, 50, 0.06),
      0 10px 25px rgba(14, 35, 50, 0.05) !important;
  }


  .lfeatures .lfeature h3 {
    padding: 16px 8px 18px !important;

    font-size: 0.94rem !important;

    letter-spacing: 0.02em !important;
  }


  .lfeatures .lfeature h3::after {
    bottom: 10px !important;
  }

}


/* =========================================================
   ÇOK KÜÇÜK TELEFONLAR
   ========================================================= */

@media (max-width: 390px) {

  .lfeatures {
    gap: 10px !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  .lfeatures .lfeature h3 {
    font-size: 0.84rem !important;

    padding-left: 5px !important;
    padding-right: 5px !important;
  }

}