* {
  margin: 0;
  padding: 0;
}
body {
  background-color: rgb(186, 186, 186);
}
.nav-item a:hover {
  font-size: large;
}
.response-img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}
/* Animasyonlu İconlar */
.icons-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin: 13% auto;
}
.icons i {
  font-size: 22rem;
  color: #a79a2d;
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  text-shadow: 0.2rem 0.2rem 0.2rem #000;
  transition: transform 0.6s;
}
.icons i.change {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.4s 0.4s;
}
/* Daktilo Yazı */
.ünvan {
  color: rgb(18, 46, 80);
  font-family: serif;
  width: 19ch; /* Ne kadar yazı yazacaksanız karakter sayacında sayıp buraya karakter sayısı kadar yazın. */
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 4s steps(200, end),
    /* # Adımlar = # Karakter Sayısı */ alternate;
  padding-top: 50px;
  text-align: center;
  font-size: 300%;
  text-shadow: 2px 5px 5px rgb(117, 116, 116);
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}
/* Projeler */
.projeler-link {
  width: 30%;
}

h2 {
  width: 80%;
  margin: auto;
  text-align: center;
  color: black;
  font-family: 'Trebuchet MS';
}
.projeler-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.proje-container {
  width: 40%;
  margin: auto;
  max-width: 550px;
  position: relative;
  margin-bottom: 40px;
}
.proje-img {
  width: 100%;
}
.projeler-bilgiler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #12191a87;
}
.projeler-bilgiler p {
  color: white;
  font-size: 130%;
  padding: 0 5%;
  margin: 0;
}
.proje-container:hover .projeler-bilgiler {
  opacity: 1;
}
.proje-container:hover .proje-img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
}
.proje-container h3 {
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 5% 0;
  font-size: 150%;
}
.projeler-bilgiler hr {
  background-color: rgb(255, 255, 255);
  margin: 3% auto;
  height: 2px;
}
/* Hakkında & İletişim */
/* Hakkında */
.hakkında {
  height: 500px;
  border: 8px solid rgb(255, 255, 255);
  margin: auto;
  text-align: center;
  background-color: #a2a2a2;
  color: white;
  border-radius: 10px;
  box-shadow: -15px 8px 10px rgba(0, 0, 0, 0.597);
  padding-top: 3%;
}
.hakkında-section {
  margin: 5%;
}
.hakkında img {
  width: 25%;
  margin: 2% auto;
}
.hakkında span {
  color: #000;
  font-weight: bold;
}
.hakkında p {
  width: 100%;
  text-align: left;
  padding: 1% 3%;
  color: #000;
}
.hakkında a {
  color: #000;
  font-weight: bold;
}
/* İletişim */
.iletisim {
  height: 500px;
  border: 8px solid rgb(255, 255, 255);
  margin: auto;
  border-radius: 10px;
  box-shadow: -15px 8px 10px rgba(0, 0, 0, 0.597);
  text-align: center;
  align-items: center;
  background-color: #a2a2a2;
  min-height: 450px;
}
.iletisim .contact {
  position: relative;
}
.iletisim h3 {
  margin: 0;
  padding-bottom: 10%;
}
.iletisim form {
  width: 50%;
  height: 100%;
  margin: auto;
  padding-top: 5%;
}
.iletisim .contact input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: rgb(0, 0, 0);
  margin-bottom: 30px;
  border: none;
  border-bottom: 2px solid rgb(0, 0, 0);
  outline: none;
  background: transparent;
}
.contact textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid #000;
  width: 100%;
}
.iletisim .contact label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: rgb(0, 0, 0);
  pointer-events: none;
  transition: 0.5s;
}

.iletisim .contact input:focus ~ label,
.iletisim .contact input:valid ~ label {
  top: -20px;
  left: 0;
  color: rgb(0, 0, 0);
  font-size: 12px;
}
.submitButton {
  border-style: none;
  background-color: rgb(212, 212, 212);
  color: rgb(0, 0, 0);
  font-weight: 900;
  margin-top: 9%;
  padding: 4% 10%;
  border-radius: 10px;
  text-align: center;
  transition: 0.7s;
}
.submitButton:hover {
  background-color: rgb(83, 83, 83);
  color: rgb(222, 222, 222);
  transition: 0.7s;
  padding: 5% 12%;
}
.login-signin {
  text-align: center;
  padding: 10%;
}
/* Mobil Site Ayarlamaları */
@media only screen and (max-width: 800px) {
  .response-img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
}
  /* Animasyon */
  .icons i {
    font-size: 12rem;
    color: #a79a2d;
  }
  .icons i {
    font-size: 6rem;
    color: #a79a2d;
    text-shadow: 0.1rem 0.1rem 0.1rem #000;
  }
  /* Animasyon Bitiş */

  .ünvan {
    font-size: 200%;
  }
  /* Hakkında ve İletişim Kutusu */
  .hakkında,
  .iletisim {
    height: auto;
    margin-bottom: 10%;
  }
  .iletisim form {
    padding-top: 8%;
  }
  .proje-container h3 {
    padding: 3% 0;
    font-size: 80%;
  }
  .projeler-bilgiler p {
    font-size: 70%;
    padding: auto;
  }
  
}