body {
  line-height: 1.6;
  color: #fff;
  background: #000;
  font-size: 18px;
  font-weight: 400;
  font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.stop {
  overflow: hidden;
}



#page {
  position: relative;
  transition: 1s all ease-in-out;
}
#page.menuopen {
  opacity: 0.6;
  filter: blur(20px);
  transform: scale(1.2);
}

section {
  display: flex;
  min-height: 100vh;
  padding: 50px;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #fff;
  position: relative;
}
section:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.5;
  height: 100%;
  width: 100%;
}
section h1 {
  
  margin-left: 50px;
  font-size: 120px;
  margin: 0;
  z-index: 2;
  position: relative;
}
section h2 {
  font-size: 80px;
  z-index: 2;
  margin-top: 400px;
}
section h3 {
 color: #fff;
 font-size: 200px;
  z-index: 2;
  margin-top: -100px;
}
section iframe{
  z-index: 2;
  width: 800px;
}
section a{
  z-index: 2;
  
}

header {
  z-index: 99999;
  position: relative;
}
header #logo {
  position: fixed;
  height: 150px;
  width: 150px;
  top: 30px;
  left: 0;
  right: 0;
  
  margin: 0 auto;
  opacity: 1;
  transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
}
header nav {
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  position: fixed;
  left: 0;
  right: 0;
  width: 600px;
  margin: 0 auto;
  top: 120px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 200px;
  z-index: 9;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}
header nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  display: block;
  padding: 10px 20px;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: lowercase;
  transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
}
header nav button {
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: absolute;
  z-index: 99;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  outline: 0;
  border: 0;
  cursor: pointer;
  transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
  transform: scale(0);
}
header nav button span {
  width: 40%;
  background: #fff;
  height: 2px;
  display: block;
  margin: 5px auto;
  transform: scalex(0);
  transition: 0.6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s margin ease-in 0s;
}
header nav button:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
header nav button:hover span {
  margin: 10px auto;
}

header.sticky #logo {
  top: 0;
  transform: scale(0.8);
  opacity: 0;
  transition-delay: 0.5s;
}
header.sticky nav {
  top: 20px;
  padding: 0;
  width: 90px;
  height: 90px;
  transition-delay: 0.5s;
}
header.sticky nav button {
  transform: scale(1);
  transition-delay: 0.6s;
}
header.sticky nav button span {
  transform: scalex(1);
  transition: 0.6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s, 0.3s margin ease-in 0s;
}
header.sticky nav a {
  padding: 0;
  opacity: 0;
  letter-spacing: 0px;
  transform: scale(0.3);
  transition-delay: 0.2s;
}

.gallery {
  z-index: 2;
  height: 400px;
  width: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: #000; /* Arka plan rengi (isteğe bağlı) */
}

.slideshow-container {
  position: relative;
  max-width: 800px;
  width: 100%;
  overflow: hidden;
}

.slides {
  height: 500px;
  width: 50px;
  display: flex;
  transition: transform 0.3s ease-in-out;
}

video {
  height: 600px;
  width: 950px;
  height: auto;
  object-fit: cover;
  filter: brightness(0.7); /* Kenardaki videoların parlaklık seviyesi */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: white;
  cursor: pointer;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5); /* Okların arka plan rengi (isteğe bağlı) */
  padding: 10px;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
.about-container {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
 
}

.about-text {
  margin-top: 100px;
  width: 50%;
  color: #fff;
}

.about-text h1 {
  margin-top: -200px;
  z-index: 2;
  font-size: 36px;
}

.about-image {
 margin-top: -400px;
  width: 60%; /* veya istediğiniz genişlik */
  margin-left: -750px;
}
.about-image2 {
  margin-top: -400px;
  width: 60%; /* veya istediğiniz genişlik */
  margin-left: 20px;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 10px; /* İsteğe bağlı: Resmin kenarlarını yuvarlaştırma */
}

section .calısma{
  font-size: 50px;
}

section .i1{
  margin-top: -500px;
  font-size: 50px;
}
section .i2{
  margin-left: -200px;
  margin-top: -300px;
  font-size: 50px;
}
section .wp{
  height: 150px;
  z-index: 2;
  margin-left: -820px;
  margin-top: -50px;
  font-size: 30px;
}
section .ins1{
  z-index: 2;
  margin-left: 100px;
  margin-top: -300px;
  font-size: 50px;
}

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

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  max-width: 800px;
  width: 100%;
}

.item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
}

.item img,
.item video {
  width: 100%;
  height: auto;
}

.enlarged { 
  z-index: 2;
  transform: scale(5.2);
}

@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

.pace-done .pace-activity:after,.pace-progress-inner:after, .pace:after, .pace-progress:after { 
    /* ******************************************************* */
    /* Change the following line to update the welcome message */
    /* ******************************************************* */
    content: "Welcome";
}

html, body {
   
    height: 100%;
    
   
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7c2', endColorstr='#7d8262',GradientType=1 );
    margin: 0;
    padding: 0;
    
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: 100%;
    width: 100%;
}

.pace-done .pace-progress {
    animation: hideBorder 250ms ease-in-out forwards;
    animation-delay: 575ms;
}

.pace-progress {
    position: fixed;
    z-index: 2000;
    top: 50%;
    left: 7.5%;
    max-width: 85%;
    border-top: 2px solid rgba(255,255,255,1);
    margin-top: -2px;
    bottom: 0;
}

.pace-activity {
    width: 100%;
    height: 50%;
    position: fixed;
}

.pace-done .pace-activity:after,.pace-progress-inner:after, .pace:after, .pace-progress:after {
    padding: 0;
    display: block;
    font-weight: bold;
    color: #fff;
    font-family: 'Noto Sans', serif;
    font-size: 4.75rem;
    text-align: center;
}

.pace-done.pace:after {
    animation: fadeIn .05s ease-in-out forwards,
    flyAway 700ms ease-in forwards;
    animation-delay: 1.05s, 1.15s;
}

.pace:after {
    top: 50%;
    position: absolute;
    margin-top: -3.7rem;
    width: 100%;
    color: rgba(255,255,255,0.0);
}

.pace-activity:after,.pace-progress-inner:after {
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.pace-progress-inner {
    height: 100px;
    width: 100%;
    background: transparent;
    position: relative;
    overflow: hidden;
}
.pace .pace-activity:after, .pace .pace-progress-inner:after { display: none; }

.pace-done .pace-activity:after {
    display: block;
    animation: slideUp 1.05s ease-in-out forwards,
    fadeOut .1s ease-out forwards;
    animation-delay: 0s, 1.05s;
}

.pace-activity:after {
    margin-bottom: -1.93rem;
    bottom: 1.93rem;
}

.pace-done .pace-progress-inner:after {
    display: block;
    animation: slideDown 1.05s ease-in-out forwards,
    fadeOut .1s ease-out forwards;
    animation-delay: 0s, 1.05s;
}

/* ***************************************** */
/* Shadow                                    */
/* ***************************************** */
.pace-progress {
    perspective: 1000px;
    perspective-origin: 50% 80%;
}
.pace-progress:after {
    color: transparent;
    text-shadow: 0 0 15px rgba(0,0,0,0.25);
    opacity: 0;
    transform: rotateX(75deg);
    position: fixed;
    bottom: 2%;
    height: 8rem;
    width: 100%;
}
.pace-done .pace-progress:after {
    animation: fadeInHalf .5s ease-in-out forwards,
    shadowFlyAway 700ms ease-in forwards;
    animation-delay: .6s, 1.15s;
}



/* ***************************************** */
/* Animation                                 */
/* ***************************************** */

@keyframes fadeIn {
    from { color: rgba(255,255,255,0.0); }
    to   { color: rgba(255,255,255,1.0); }
}
@keyframes fadeOut {
    from { color: rgba(255,255,255,1.0); }
    to   { color: rgba(255,255,255,0.0); }
}
@keyframes fadeInHalf {
    from { opacity: 0; }
    to   { opacity: .5; }
}
@keyframes shadowFlyAway {
    0% {
	text-shadow: 0 0 15px rgba(0,0,0,0.25);
	opacity: .5;
	letter-spacing: 0.05rem;
    }
    100% {
	text-shadow: 0 0 35px rgba(0,0,0,0.25);
	opacity: 0;
	letter-spacing: 2rem;
    }
}
@keyframes flyAway {
    from {
	letter-spacing: 0.05rem;
	opacity: 1;
	font-size: 4.75rem;
	margin-top: -3.6rem;
    }
    to {
	letter-spacing: 2rem;
	opacity: 0;
	font-size: 5.5rem;
	margin-top: -3.95rem;
    }
}

@keyframes hideBorder {
    0% { border-top: 2px solid rgba(255,255,255,1); }
    100% { border-top: 2px solid rgba(255,255,255,.01); }
}

@keyframes slideDown {
    from { margin-top: -6.1rem; }
    to   { margin-top: -3.7rem; }
}


@keyframes slideUp {
    from { height: 0rem; }
    to   { height: 3.75rem; }
}