#anasayfa {
  position: relative;
  width: 100%;
  height: 100vh; /* Tüm ekran yüksekliği */
  overflow: hidden; /* Taşan kısımları gizlemek için */
}

#myVideo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Videonun tamamını kaplar ve kesilmiş kısımları gizler */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  .carddiv {
	display: grid;
	place-items: center;
	font-family: "Inter", sans-serif;
	color: white;
  }
  
  .card {
	width: 280px;
	aspect-ratio: 1 / 0.9;
	border-radius: 8px;
	position: relative;
	cursor: pointer;
  }
  .card .image-box {
	width: 100%;
	height: 100%;
	border-radius: inherit;
  }
  .card .image-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: 0.5s ease-in-out;
  }
  
  .card::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid white;
	border-radius: inherit;
	opacity: 0;
	transition: 0.4s ease-in-out;
  }
  
  .card:hover img {
	filter: grayscale(1) brightness(0.4);
  }
  .card:hover::after {
	opacity: 1;
	inset: 20px;
  }
  
  .content {
	width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
  }
  
  .content h2,
  .content p {
	opacity: 0;
	transition: 0.4s 0.2s ease;
  }
  .content h2 {
	margin-bottom: 12px;
	scale: 0.7;
  }
  .content p {
	font-size: 14px;
	line-height: 1.5;
	color: #d1d1d1;
	transform: translateY(50%);
  }
  .card:hover .content h2 {
	scale: 1;
	opacity: 1;
  }
  .card:hover .content P {
	opacity: 1;
	transform: translateY(0);
  }
  @media (max-width: 767px) {
    .card {
        width: 100%;
        aspect-ratio: auto;
    }
    .card .image-box img {
        object-fit: contain;
    }
    .content {
        width: 90%;
    }
}