@import url(https://fonts.googleapis.com/css?family=Share+Tech);

/* =========================================
   TEMEL STİLLER (Masaüstü)
   ========================================= */
body {
  background-color: #000;
  margin: 0; 
  padding: 20px; /* İçeriğin kenarlara sıfır yapışmasını engeller */
  overflow-x: hidden; /* Küçük ekranlarda yatay kaydırmayı (scroll) gizler */
}

h1 {
  font-family: "Share Tech";
  animation: pulse 0.9s infinite;
  color: #00ebd4;
}

#identity-results, #resume, #loading-alpha-div, #loadingH1, #loadingMessage2, #message {
  margin-top: 20px;
  font-family: "Share Tech";
  font-weight: 900;
  font-size: 24px;
  color: #00ebd4;
  animation: pulse 0.9s infinite;
  word-wrap: break-word; /* Uzun metinlerin ekrandan taşmasını engeller */
}

i {
  font-size: 24px;
  color: #00ebd4;
  animation: pulse 0.9s infinite;
}

.block {
  width: 50px;
  height: 50px;
  background-color: #000;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.cursor:after {
  content: "_";
  opacity: 0;
  animation: cursor 1s infinite;
}

.sign:before {
  content: "> ";
}

@keyframes cursor {
  0% { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

#loading-alpha-div, .img-div {
  display: none;
}

img {
  margin: 50px 0;
  animation: pulse 0.9s infinite;
  max-width: 100%; /* Resmin ekran genişliğini aşmasını engeller */
  height: auto;    /* Resmin oranını korur */
}

#loadingMessage2 {
  display: none;
}

.sub-item {
  margin-top: 20px;
  margin-left: 40px;
}

.inline {
  display: inline;
  margin-left: 10px;
}


/* =========================================
   RESPONSIVE (MOBİL UYUMLU) KISIM
   ========================================= */

/* Tabletler ve Küçük Ekranlar (Maksimum 768px genişlik) */
@media screen and (max-width: 768px) {
  #identity-results, #resume, #loading-alpha-div, #loadingH1, #loadingMessage2, #message, i {
    font-size: 20px; /* Yazılar biraz küçültüldü */
  }

  .sub-item {
    margin-left: 20px; /* Sol girinti azaltıldı */
  }

  img {
    margin: 30px 0; /* Resimlerin üst/alt boşluğu daraltıldı */
  }
}

/* Cep Telefonları (Maksimum 480px genişlik) */
@media screen and (max-width: 480px) {
  body {
    padding: 10px; /* Ekran zaten küçük olduğu için gövde kenar boşlukları azaltıldı */
  }

  h1 {
    font-size: 1.5em; /* Başlık boyutu mobilde fazla yer kaplamaması için ayarlandı */
  }

  #identity-results, #resume, #loading-alpha-div, #loadingH1, #loadingMessage2, #message, i {
    font-size: 16px; /* Yazılar mobil okunabilirlik seviyesine çekildi */
  }

  .block {
    width: 30px;  /* Bloklar dar ekranlar için küçültüldü */
    height: 30px;
  }

  .sub-item {
    margin-left: 10px; /* Alt öğe (sub-item) girintileri minimuma indirildi */
  }

  .inline {
    display: block; /* Yan yana duran elemanlar çok darsa alt alta geçsin */
    margin-left: 0;
    margin-top: 10px;
  }
}