.ust {
  box-shadow:inset 2px 2px 10px 4px rgb(49, 49, 230);
  background: darkblue;
  width: 100%;
  height: auto;
  color: aliceblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ust .menualt {
  height: 35rem;
  width: 60%;
  text-align: center;
  margin: 1rem 2rem;
}
#eniyi{
    height: 150px;
    display: flex;
    justify-content: space-between;
}
#enaktif {
    height: 150px;
    display: flex;
    justify-content: space-between;
}

.ust img {
  animation: animasyon 10s infinite;
  border-radius: 1rem;
  height: auto;
  width: 40rem;
  align-items: flex-start;
  text-align: center;
  margin: 3rem 3rem;
  background-size: cover;
}

@keyframes animasyon {
  0% { transform: translateX(.8) }
  25% { transform: translateY(-2px) }
  35% { transform: translateY(-2px) rotate(5deg) }
  55% { transform: translateY(-2px) rotate(-5deg) }
  65% { transform: translateY(-2px) rotate(5deg) }
  75% { transform: translateY(-2px) rotate(-5deg) }
  100% { transform: translateY(0) rotate(0) }
}
.ust h1 {
  font-size: 2rem;
  margin: 0.5rem 2rem;
  color: darkorange;
  text-align: start;
}
.ust span {
  font-size: 1.2;
  color: rgb(207, 21, 21);
}
.ust p {
  margin-left: 2rem;
  font-size: 1.1rem;
  text-align: left;
}
.btn {
  font-size: 1rem;
  cursor: pointer;
  margin: 0.1rem 0.1rem;
  font-weight: 900;
  color: aliceblue;
  background-color: blue;
  padding: 2rem 4rem;
  border-radius: 5rem 0 0;
}
.btn:hover {
  transform: scale(1.1);
  color: darkblue;
  background-color: lightskyblue;
  transition: all 2s ease-in-out;
}

.btn1 {
  font-size: 1rem;
  cursor: pointer;
  margin: 0.1rem 0.1rem;
  padding: 2rem 4rem;
  font-weight: 900;
  color: aliceblue;
  background-color: rgb(255, 0, 0);
  border-radius: 0 5rem 0 0;
}
.btn1:hover {
  transform: scale(1.1);
  color: rgb(67, 3, 3);
  background-color: rgb(251, 118, 118);
  transition: all 2s ease-in-out;
}
.btn2 {
  font-size: 1rem;
  cursor: pointer;
  margin: 0.1rem 0.1rem;
  padding: 2rem 4rem;
  font-weight: 900;
  color: aliceblue;
  background-color: rgb(0, 125, 144);
  border-radius: 0 0 0 5rem;
}
.btn2:hover {
  transform: scale(1.1);
  color: rgb(1, 45, 55);
  background-color: rgb(107, 191, 225);
  transition: all 2s ease-in-out;
}
.btn3 {
  font-size: 1rem;
  cursor: pointer;
  margin: 0.1rem 0.1rem;
  font-weight: 900;
  color: aliceblue;
  background-color: rgb(0, 144, 22);
  padding: 2rem 4rem;
  border-radius: 0 0 5rem 0;
}
.btn3:hover {
  transform: scale(1.1);
  color: rgb(1, 55, 3);
  background-color: rgb(107, 225, 119);
  transition: all 2s ease-in-out;
}
.btnoval {
  font-size: 1.1rem;
  cursor: pointer;
  font-weight: 900;
  color: aliceblue;
  background-color: rgb(125, 0, 106);
  padding: 1rem 9rem;
  border-radius: 0 0 9rem 9rem;
}
.btnoval:hover {
  transform: scale(1.1);
  color: rgb(55, 52, 1);
  background-color: rgb(215, 225, 107);
  transition: all 2s ease-in-out;
}
.btnust {
  font-size: 1.1rem;
  cursor: pointer;
  font-weight: 900;
  color: aliceblue;
  background-color: rgb(125, 0, 106);
  padding: 1rem 10rem;
  border-radius: 9rem 9rem 0 0;
}
.btnust:hover {
  transform: scale(1.1);
  color: rgb(55, 52, 1);
  background-color: rgb(215, 225, 107);
  transition: all 2s ease-in-out;
}
.orta{
  margin: 2rem 3rem;
  align-items: center;
  display: flex;
  justify-content: center;
}
.orta .ortaalt{
  width: 25%;
  height: auto;
  text-align: center;
}
#ball {
  color:rgb(223, 6, 6);
	font: bold 111% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 30rem; /* Ne kadar yazı yazacaksanız karakter sayacında sayıp buraya karakter sayısı kadar yazın. */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: typing 6s steps(200, end), /* # Adımlar = # Karakter Sayısı */
	           blink-caret 0.5s step-end infinite alternate;
}

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

.alt{
  margin: 2rem 2rem;
  text-align: center;
  height: auto;
  display: flex;
  justify-items: space-between;
}
.salon img{
  width: 21rem;
  height: 15rem;
  border-radius: .5rem;
}
.salon p{
  margin: 1rem;
}
.baslik{
  box-shadow:inset 2px 2px 10px 4px rgb(49, 49, 230);
  color: white;
  text-align: center;
  background: darkblue;
  padding: .1rem;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
#yazi .yazi:first-child {
	  box-shadow:inset 2px 2px 10px 4px rgb(49, 49, 230);
	  background: darkblue;
	color:white;
	padding:1rem;
}
#yazi .yazi:last-child {
	  box-shadow:inset 2px 2px 10px 4px rgb(49, 49, 230);
	  background: darkblue;
		color:white;
		padding:1rem;
}
#yazi .yazi{
    padding: 5rem;
  border:1px solid rgba(0,0,0,.3);
  box-shadow:.1px .1px 13px .2px rgba(0,0,0,.5);
  padding:1% 3%;
  max-width:90%;
  margin: 0 auto;
  border-radius:0;
  background:#fff;
}
#yazi{
 box-shadow:inset 2px 2px 10px 4px rgb(49, 49, 230);
  background: darkblue;
  margin: 2rem 2rem;
}

.footer {
  box-shadow:inset 2px 2px 10px 4px rgb(49, 49, 230);
  color: white;
  width: 100%;
  height: 200px;
  background: rgb(4, 4, 108);
  display: flex;
  justify-content: center;
}
.footer .logo {
  color: white;
  margin-top: 150px;
  position: absolute;
  left: 15px;
}
.footer .copright {
  color: white;
  margin-top: 150px;
  position: absolute;
}
#more {display: none;}
#more1 {display: none;}
#more2 {display: none;}
#more3 {display: none;}
#myBtn,
#myBtn1,
#myBtn2,
#myBtn3 {
    font-weight: 900;
    padding: .5rem .5rem;
    color: darkblue;
}
.salon {
    width: 100%;
    height: 35rem;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: darkblue transparent;
}
@media all and (max-width: 800px) {

.alt{
  display: block;
  width: 90%;
}

  .orta{
    width: 90%;
    display: block;
  }

.ortaalt p{
  width: 90%;
  text-align: center;
}
  .ust {
    display: inline-block;
    justify-content: space-between;
    align-items: center;
  }
  .ust img {
    width: 80%;
  }
  .ust .menualt {
    align-items: center;
    width: 90%;
  }
  * {
    font-size: 12px;
  }
  .btn,
  .btn1,
  .btn2,
  .btn3,
  .btnoval,
  .btnust {
    font-size: 0.7rem;
  }
}