.upperBar{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			position: fixed;
			background-color: black;
			width: 100vw;
			height: 60px;
			top: 0px;
			padding-top: 0px;
			left: 0px;
			z-index: 1000;
			white-space: nowrap;
		}
		
		
		.upperButton{
			display: inline-block;
			background: transparent;
			color: white;
			margin-top: 16px;
			margin-left: 20px;
			font-size: 17px;
			text-decoration: none;
			
		}
		
		.upperButton:hover{
			color: orange;
		}
		
		.upperButton.active{
			color: orange;
			border-bottom: 2px solid orange;
			z-index: 100;
		}
		
		.webLogo{
			display: inline;
			position: fixed;
			background-clip: text;
			background: linear-gradient(to right, #f22c2c, #ffef08);
			color: transparent;
			-webkit-background-clip: text;
			z-index: 1500;
			-webkit-text-fill-color: transparent;
			animation: gradientAnimation 10s ease infinite;
			background-size: 200% 200%;
			left: 15px;
			top: -15px;
		}
		
		.webLogoBack{
			display: inline;
			position: fixed;
			background: black;
			color: black;
			z-index: 1499;
			background-size: 200% 200%;
			left: 15px;
			top: -15px;
			padding-right: 20px;
			padding-bottom: 10px;
		}
		
		.menugrid{
			display: grid;
			grid-template-columns: 1fr 1fr 2fr;
			margin-top: 26px;
			margin-left: 55px;
		}
		
		
		
		.pageTitle{
			display: block; color:white; font-size: 60px; top: 28px; left: 58px;z-index: 500;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
			margin-left: 50px; margin-top: 75px; margin-bottom: 5px;
		}
		
		.subhead{
			display: block; color:white; font-size: 30px; top: 28px; left: 58px;z-index: 500;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
		}
		
		.section{
			display: inline-block;
			background-color: transparent;
			border-radius: 15px;
			opacity: 100%;
			width: 300px;
			height: 300px;
			margin-right: 50px;
			z-index: 900;
			color: white;
			text-align: center;
		}
		
		.sectionTitle{
			display: inline-block;
			margin-top: 5px;
			z-index: 500;
		}
		
		.messageBox{
			display: block;
			text-align: justify;
			background-color: rgba(0,0,0,0.65);
			color: white;
			padding: 15px;
			width: 550px;
			margin-top: 20px;
			margin-left: 55px;
			z-index: 10;
		}
		
		<style>

			.menu {
			 display: flex;           /* block yerine flex */
			flex-direction: column;  /* dikey sýralama */
			align-items: center; 
			position: fixed;
			background-color: #454545;
			justify-content: left;
			width: 170px;
			height: 100vw;
			right: 0;
			z-index: 999;
			}

			.menu button {
			display: flex;
			margin: 0px;
			padding: 5px 15px;
			font-size: 16px;
			cursor: pointer;
			background-color: transparent;
			border-color: transparent;
			color: white;
			border-radius: 9px;
			z-index: 1000;
			}
			
			.menu button:hover {
			color: pink;
			}

			.menugrid img {
			width: 300px;
			height: 300px;
			object-fit: cover;
			border-radius: 10px;
			transition: transform 0.3s;
			z-index: 999;
			}
			
			.menugrid video {
			width: 300px;
			height: 300px;
			object-fit: cover;
			border-radius: 10px;
			transition: transform 0.3s;
			}

			.menugrid img:hover {
			transform: scale(1.05);
			}
			
			.menugrid video:hover {
			transform: scale(1.05);
			}
			
			.copyrightText {
				display: flex; justify-content: center; margin-top: 100px;
			}
			
@media (max-width: 1000px) {
  .upperBar {
  display: flex;
  flex-direction: row; /* Butonlar yan yana */
  justify-content: flex-start;
  overflow-x: auto; /* YATAY kaydırma */
  overflow-y: hidden; /* Dikey kaydırmayı engelle */
  scroll-behavior: smooth;
  white-space: nowrap; /* Butonlar alt satıra geçmesin */
  
}

.pageTitle{
	text-align: center;
	margin-left: 0px;
}
.subhead{
	text-align: center;
	margin-left: 0px;
}

.centeredTitle{
	display: flex;
	justify-content: center;
}

.upperButton {
  flex: 0 0 auto; /* Geni?lik sabit */
  margin-right: 10px;
}

  .upperBar::-webkit-scrollbar {
    display: none; /* Kaydırma çubu?unu gizle */
  }
  
  .messageBox{
			width: 270px;
			margin-left: 0px;
		}
  
  .menugrid{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: 0px;
			
		}
	.menugrid img{
			
	}
	.section{
			display: inline-block;
			margin-left: 0px;
			margin-right: 0px;
			z-index: 900;
			color: white;
			text-align: center;
			height: 400px;
		}
		
		.sectionTitle{
			display: block;
			margin-top: 5px;
			z-index: 500;
		}
}