/*
Theme Name: Sopezon Child Tema
Description: Sopezon Child Tema
Author: Sopezon
Author URI: https://sopezon.com
Template: hello-elementor
Version: 1.0.0
*/
/* Buraya child tema için stil kodlarınızı ekleyin */

/* ANA SAYFA */

.card {
  position: relative;
  overflow: hidden;
}

.hizmetaciklama {
  display: block;
  position: absolute;
  bottom: -100%; /* Yüksekliği kadar aşağıya koyuyoruz */
  left: 0;
  right: 0;
  color: #fff;
  height: 0;
  opacity: 0;
  padding: 20px;
  transition: 0.8s ease;
  cursor: default;
}

.card:hover .hizmetaciklama {
  bottom: 0; /* Hover olduğunda yukarı çıkar */
  height: 150px;
  opacity: 1; /* Hover olduğunda görünür */
}

.hizmetbaslik h2 {
  transition: 0.8s ease;
  cursor: default;
}

.card:hover .hizmetbaslik h2 {
  font-size: 24px !important;
  color: #fff !important;
  transition: 0.8s ease;
}

.hizmetsimge svg {
  transition: 0.8s ease;
}

.card:hover .hizmetsimge svg {
  height: 50px !important;
  padding-bottom: 5px;
  transition: 0.8s ease;
}

.hizmetsimge img {
  transition: 0.8s ease;
  filter: invert(1) brightness(2);
}

.card:hover .hizmetsimge img {
  width: 80px !important;
  padding-bottom: 5px;
  transition: 0.8s ease;
}

.hizmetaciklama a {
  color: #fff;
}

.hizmetaciklama:hover a {
  color: #f3f3f3;
}

@keyframes efekt {
    0% {
        opacity: 0;
        transform: rotate(40deg) translateX(-100%);

    }
    100% {
        opacity: 0.5;
        transform: rotate(40deg) translateX(80%);

    }
}

.inner:hover::before {
    content: ""; 
    opacity: 0; /* Başlangıç değeri */
    animation: efekt 0.3s ease-out forwards; 

}