@font-face {
  font-family: "DxDynamix";
  /* Fontun adını belirliyoruz */
  src: url("assets/fonts/DxDynamix-Bold.otf") format("opentype");
  /* Light versiyonunun yolu */
  font-weight: 600;
  /* Light versiyonun ağırlığı */
  font-style: normal;
}

@font-face {
  font-family: "DxDynamix";
  /* Fontun adını belirliyoruz */
  src: url("assets/fonts/DxDynamix-BoldSlanted.otf") format("opentype");
  /* SemiBold versiyonunun yolu */
  font-weight: 600;
  /* SemiBold versiyonun ağırlığı */
  font-style: italic;
}

@font-face {
  font-family: "NeueMetanaMono";
  /* Fontun adını belirliyoruz */
  src: url("assets/fonts/NeueMetanaMono-Light.otf") format("opentype");
  /* Light versiyonunun yolu */
  font-weight: 400;
  /* Light versiyonun ağırlığı */
  font-style: normal;
}

@font-face {
  font-family: "NeueMetanaMono";
  /* Fontun adını belirliyoruz */
  src: url("assets/fonts/NeueMetanaMono-SemiBold.otf") format("opentype");
  /* SemiBold versiyonunun yolu */
  font-weight: 600;
  /* SemiBold versiyonun ağırlığı */
  font-style: normal;
}

html{
  scroll-behavior: smooth;
}

body {
  background-color: #232E33;
  --sb-track-color: #232E33;
  --sb-thumb-color: #99a09d;
  --sb-size: 10px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 6px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 6px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}


body {
  font-family: "DxDynamix", sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: auto;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  /* Transparan siyah */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease;
}

/* Logo başlangıç pozisyonu */
.logo-container {
  transform: translateY(150%);
  /* Başlangıçta daha aşağıdan gelir */
  animation: slideUp 2s ease forwards, spin 2s ease 2s forwards;
}

.devil-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  /* Transparan siyah */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease;
}

/* Video stilini ekliyoruz */
.sign-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  object-fit: cover; /* Video tüm alanı kaplayacak şekilde */
  z-index: -1; /* Video, diğer öğelerin altında görünsün */
}


.devil-logo-container {
  transform: translateY(150%); /* Başlangıçta aşağıda */
  animation: slideUp 2s ease forwards, spinAndZoom 2s ease 2s forwards; 
}


.logo {
  width: 150px;
  /* Logonun boyutu */
  height: auto;
}

/* Web sitesi içeriği */
.site-content {
  display: none;
  /* Animasyon bitene kadar gizlenir */
}





.navbar {
  position: fixed;
  /* Navbar'ı sabit tutuyoruz, ekranın üst kısmına */
  top: 0;
  /* Navbar'ı en üst kısma sabitliyoruz */
  left: 0;
  /* Sol tarafa sıfırlıyoruz */
  right: 0;
  /* Sağ tarafa sıfırlıyoruz */
  margin: 0 auto;
  /* Ortalamak için margin: auto kullanıyoruz */
  margin-top: 20px;
  padding: 10px 10px;
  width: 40%;
  /* Navbar genişliği */
  backdrop-filter: blur(15px);
  box-shadow: 0px 0px 20px rgba(227, 228, 237, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  animation: fadeInUp 0.5s ease forwards;
  z-index: 1000;
  /* Navbar'ın üstte görünmesi için z-index */
}

/* Menü düzeni */
.menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0;
  /* Menü elemanlarının çevresindeki boşluğu sıfırlıyoruz */
  padding: 0;
  /* Menü elemanlarının içindeki boşluğu sıfırlıyoruz */
}

/* Menü bağlantıları */
.menu-link {
  text-decoration: none;
  font-weight: 600;
  color: #f2f2f2;
  font-size: 16px;
  width: calc(100% / 5);
  /* Menü öğelerinin genişliğini eşit paylaştırıyoruz */
  border-radius: 5px;
  transition: color 0.3s ease;
}

/* Menü öğelerinin üzerine gelindiğinde */
.menu-link:hover {
  color: #a09f9f
}

.navbarLogo {
  width: 60px;
  /* Daha küçük bir değer deneyin */
  height: auto;
  /* Yüksekliği otomatik ayarlayın */
  transition: transform 0.3s ease;
}

.navbarLogo:hover {
  transform: rotate(360deg) scale(1.3);
  /* 360 derece döndür ve %20 büyüt */
}

/* Navbar for desktop */
.navbar {
  display: block;
  /* Normal navbar, mobilde gizlenecek */
}

/* Mobil navbar'ı gizle */
.mobile-navbar {
  display: none;
  /* Mobilde gösterilecek navbar */
  z-index: 100;
}

/* Ekran boyutu 768px ve daha küçük olduğunda navbar'ı gizle ve mobil navbar'ı göster */
@media (max-width: 768px) {
  .navbar {
    display: none;
    /* Mobilde normal navbar'ı gizle */
  }

  .mobile-navbar {
    width: 320px;
    height: 260px;
    bottom: 15px;
    /* Sayfanın en altına 20px mesafe */
    left: 50%;
    /* Sayfanın ortasına yerleştir */
    transform: translateX(-50%);
    /* Gerçek ortalamayı sağlamak için */
    margin: auto;
    border-radius: 20px;
    /* Navbar'ın dış köşelerine yuvarlatma efekti */
    display: flex;
    align-items: flex-end;
    position: fixed;
    justify-content: center;
  }

  .phone_content {
    filter: contrast(20);
    width: 100%;
    background-color: transparent;
    overflow: hidden;
    position: absolute;
    border-radius: 20px;
    /* İç kısmın da köşeleri yuvarlanmış olur */
  }

  .phone_bottom {
    width: 100%;
    height: 66px;
    background: black;
    display: flex;
    justify-content: center;
    filter: blur(10px);
    border-radius: 0 0 20px 20px;
    /* Alt kısmın köşelerini yuvarlatır */
  }


  input {
    display: none;
  }

  label {
    cursor: pointer;
    display: flex;
    width: 33%;
    height: 66px;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: center;
  }

  label>img {
    width: 25px;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    z-index: 3;
    transition: 200ms 100ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
  }

  label::before {
    content: '';
    position: absolute;
  }

  .circle {
    width: 60px;
    height: 60px;
    background: black;
    position: absolute;
    top: 152px;
    z-index: 1;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
  }

  .indicator {
    width: 70px;
    height: 70px;
    background-image: linear-gradient(0deg, #bebcbc, rgba(183, 255, 154, 0)), linear-gradient(0deg, rgba(170, 168, 168, 0.966), rgba(183, 255, 154, 0)), linear-gradient(0deg, #b4fffb, rgba(183, 255, 154, 0));
    background-size: cover;
    background-position: 0 10px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: -42px;
    right: 0;
    margin: auto;
    transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
  }

  #s1:checked~[for="s1"]>img {
    top: -85px;
  }

  #s1:checked~.circle,
  #s1:checked~div div .indicator {
    left: -66%;
  }

  #s2:checked~[for="s2"]>img {
    top: -85px;
  }

  #s2:checked~.circle,
  #s2:checked~div div .indicator {
    left: 0;
  }

  #s2Logo {
    width: 40%;
  }

  #s3:checked~[for="s3"]>img {
    top: -85px;
  }

  #s3:checked~.circle,
  #s3:checked~div div .indicator {
    left: 66%;
  }

}



/* Animasyonlar */
@keyframes slideUp {
  to {
    transform: translateY(0);
    /* Ortaya gelir */
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    /* Başlangıçta aşağıda */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    /* Son pozisyonda yukarı kayma biter */
  }
}

@keyframes spinAndZoom {
  0% { 
    transform: rotate(0deg) scale(1); /* Başlangıç: 0 derece döndürme, normal boyut */
  }
  100% { 
    transform: rotate(360deg) scale(10); /* Bitiş: 360 derece döndürme ve biraz büyütme */
  }
}

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Video'nun alanı tam doldurması için */
  z-index: -1;
  /* İçerik videonun üstünde yer alır */
}






.center-text-container {
  position: relative;
  text-align: center;
  margin-top: 400px;
  /* Üstten boşluk */
  animation: fadeInUp 0.5s ease forwards 0.2s;

}

.center-text {
  position: absolute;
  /* Konumlandırmak için */
  top: 50%;
  /* Ortada konumlandırmak */
  left: 50%;
  /* Ortada konumlandırmak */
  transform: translate(-50%, -50%);
  /* Gerçek ortalama */
  font-size: 165px;
  /* Yazı boyutu */
  font-weight: 600;
  background: linear-gradient(to bottom, #808080 20%, #8400ff 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-family: "NeueMetanaMono";
  text-align: center;
  margin: 0;
}

.center-text2 {
  position: absolute;
  /* Konumlandırmak için */
  top: 50%;
  /* Ortada konumlandırmak */
  left: 50%;
  /* Ortada konumlandırmak */
  transform: translate(-50%, -50%);
  /* Gerçek ortalama */
  font-size: 205px;
  /* Yazı boyutu */
  font-weight: 600;
  background: linear-gradient(to bottom, #808080 20%, #ff0000 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-family: "NeueMetanaMono";
  text-align: center;
  margin: 0;
}

.sub-text {
  position: absolute;
  /* Alt yazıyı üst yazının altına yerleştirebilmek için */
  top: 60%;
  /* Center text'ten biraz daha aşağıda */
  left: 50%;
  /* Ortada konumlandır */
  transform: translateX(-50%);
  /* Gerçek ortalama */
  font-size: 150px;
  /* Alt yazı boyutu */
  font-weight: 600;
  color: white;
  font-family: "NeueMetanaMono";
  margin: 0;
}

.sub-text2 {
  position: absolute;
  /* Alt yazıyı üst yazının altına yerleştirebilmek için */
  top: 60%;
  /* Center text'ten biraz daha aşağıda */
  left: 50%;
  /* Ortada konumlandır */
  transform: translateX(-50%);
  /* Gerçek ortalama */
  font-size: 180px;
  /* Alt yazı boyutu */
  font-weight: 600;
  color: rgb(39, 38, 38);
  font-family: "NeueMetanaMono";
  margin: 0;
}


.transparant-text {
  opacity: 0;
}

/* Ana içerik */
.main-content {
  text-align: center;
  margin-top: 150px;
  /* center-text-container'dan uzaklaştırmak için */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards 0.2s;
}

.contentCenterText {
  position: absolute;
  /* Alt yazıyı üst yazının altına yerleştirebilmek için */
  top: 60%;
  /* Center text'ten biraz daha aşağıda */
  left: 50%;
  /* Ortada konumlandır */
  transform: translateX(-50%);
  /* Gerçek ortalama */
  font-size: 15px;
  /* Alt yazı boyutu */
  font-weight: 300;
  color: white;
  margin: 0;
}

/* Mobil uyumlu */
@media (max-width: 768px) {
  .center-text {
    font-size: 100px;
  }

  .sub-text {
    font-size: 55px;
    top: 65%;
    /* Alt yazıyı daha da aşağıya kaydır */
  }

  .centerSub-text {
    font-size: 18px;
    margin-top: 40px;
  }

  #section10 {
    visibility: hidden;
  }
  
}



/* Tablet ve küçük ekranlar için medya sorgusu */
@media (max-width: 480px) {
  .center-text {
    font-size: 60px;
    /* Daha küçük ekranlarda daha da küçült */
  }

  .sub-text {
    font-size: 50px;
    /* Alt yazıyı daha da küçült */
    top: 70%;
    /* Alt yazıyı daha fazla aşağıya kaydır */
  }

  #section10 {
    visibility: hidden;
  }
}





#section10 {
  margin-top: 20%;
  position: relative; /* Bağlam oluştur */
}

#section10 a {
  position: relative; /* Bağlam oluştur */
}

#section10 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}

#section10 a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.demo {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* contentCenterText'in hemen altında boşluk bırakmak için */
}

.demo a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Butonu yuvarlak yap */
  text-decoration: none;
  color: white;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
}


.section {
  text-align: center;
  margin: 150px 0px 150px 0px;
  padding: 20px;
  transform: translateY(20px);
  display: flex;
  flex-wrap: wrap; /* Kartların alt satıra geçmesini sağlar */
  justify-content: space-evenly;
  gap: 20px; /* Kartlar arasındaki boşluk */
}

.card-link {
  display: block; /* Linkin tam kartı kapsamasını sağlarız */
  text-decoration: none; /* Linkin altını çizmesini engelleriz */
  color: inherit; /* Linkin metin rengini koruruz */
}

.card-inside {
  position: relative;
  flex: 1 1 20rem; /* Flex ile kartların esnemesini sağlarız */
  max-width: 20rem; /* Kartlar maksimum 20rem genişliğinde olur */
}

.card {
  z-index: 555;
  position: relative;
  width: 100%;
  min-height: 20rem;
  background-color: rgba(60, 60, 61, 0.3);
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
  box-shadow: 1px 12px 25px #000;
  border-radius: 2.25rem;
  padding: 1rem;
  box-sizing: border-box;
  transition: transform 0.3s ease; /* Transform değişimlerini 0.3 saniyelik bir geçişle yap */
}
.card:hover {
  transform: scale(1.3);
}

.card::before {
  position: absolute;
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.25rem;
  z-index: -1;
  border: 0.155rem solid transparent;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.card-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 0.5em 0em 1.5em;
}

.card-header .date {
  color: #ddd;
}


.card-body {
  position: absolute;
  width: 100%;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.7em 1.25em 0.5em 1.5em;
}

.card-body a{
  text-decoration: none;
}

.card-body h5 {
  color: #fff;
  font-size: 2rem;
  margin-top: 0.625em;
  margin-bottom: 0.188em;
  text-transform: capitalize;
  font-weight: 600;
}

.card-body p {
  color: #ddd;
  font-size: 1rem;
  letter-spacing: 0.031rem;
}


/* Sayfa kaydırıldıkça animasyon başlatılacak div'lerin stilini ayarlıyoruz */
.animated-div {
  opacity: 0; /* Başlangıçta şeffaf */
  transform: translateY(50px); /* Başlangıçta biraz aşağıda */
  transition: opacity 0.8s ease, transform 0.8s ease; /* Yumuşak geçiş */
}

/* Sayfa kaydırıldıkça animasyonları başlatacak */
.visible {
  opacity: 1; /* Görünür hale gelsin */
  transform: translateY(0); /* Yukarı gelsin */
}

#about-me {
  font-size: 100px;
  font-weight: 600;
  color: white;
  font-family: "NeueMetanaMono";
}

.about-me {
  display: flex;
  flex-direction: column; /* Elemanları dikey hizala */
  justify-content: center;
  align-items: center; /* Hem yatay hem dikeyde ortala */
  color: white;
  text-align: center;
  margin: 350px 0px 350px 0px;
}

.about-me p {
  font-size: 18px;
  text-shadow: -1px 5px 5px #000000;
}


#my-companys {
  font-size: 90px;
  font-weight: 600;
  background: linear-gradient(to bottom, #c7ffff 20%, #9858d3 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-family: "NeueMetanaMono";
}

.my-companys {
  display: flex;
  flex-direction: column; /* Elemanları dikey hizala */
  justify-content: center;
  align-items: center; /* Hem yatay hem dikeyde ortala */
  color: white;
  text-align: center;
  margin: 500px 0px 350px 0px;
}

.my-companys p {
  font-size: 20px;
  text-shadow: -1px 5px 5px #000000;
}

.my-companys h1 {
  font-size: 23px;
  color: #8400ff;
  text-shadow: -1px 5px 5px #000000;
}

#dv-companys {
  font-size: 110px;
  font-weight: 600;
  background: linear-gradient(to bottom, #808080 20%, #ff0000 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-family: "NeueMetanaMono";
}

#dv-companys-a{
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
  color: #b12816;
  font-family: "NeueMetanaMono";
}