.kutu {
      background-image: url('../resimler/deneme.png'); /* Resmin dosya yolunu belirtin */
      background-size: cover; /* Arka plan resmini kutunun tamamını kaplayacak şekilde ölçekle */
      background-position: center; /* Arka plan resmini ortala */
      background-repeat: no-repeat; /* Arka plan resmini tek seferlik göster */
      display: flex;
      align-items: center; /* İçeriği ortala */
      padding: 50px;
      border-radius: 10px; /* Kenarları yuvarla */
      margin: 20px 60px;
      margin-bottom: 50px;
      justify-content: space-between;
      color: white;
  }
  
  .kutu img {
      max-width: 20%;
      align-self: center; /* Fotoğrafı dikeyde ortala */
      object-fit: cover;
      border-radius: 50%;
      margin-right: 30px;
  }

  
  .brs {
      display: flex;
      flex-direction: column;
      justify-content: center; /* Resim ile yazıyı dikeyde ortala */
  }
  
  .isim {
      font-size: 45px;
      margin: 10px;
  }
  
  .meslek {
      font-size: 30px;
      margin: 0px;
  }
  
  .sos {
      align-self: center;
      align-items: end;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
  }
  
  .brl {
      display: flex;
      align-items: center; /* Resim ile yazıyı yan yana hizalar */
  }
  
  .sos a {
      display: inline-block;
      animation: jumpAndReturn 3s infinite;
      opacity: 0;
  }
  
  @keyframes jumpAndReturn {
      0%, 100% {
          transform: translateY(0);
          opacity: 1;
      }
      50% {
          transform: translateY(-10px);
      }
  }
  
  .bass1 {
      text-align: center;
      padding: 2% 3%;
      background-color: #000000;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .isim {
      font-size: 45px;
      margin: 10px;
  }
  
  .meslek {
      font-size: 30px;
      margin: 0px;
  }
  
  #meslekDiv {
      animation: meslekAnimation 6s infinite linear;
  }
  
  @keyframes meslekAnimation {
      40% {
          opacity: 0;
          transform: translateY(0);
      }
  
      0%, 100% {
          opacity: 1;
          transform: translateY(-25px);
      }
  }
  
  .sos {
      align-self: center;
      align-items: end;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
  }
  
  .sos a {
      display: inline-block;
      animation: jumpAndReturn 3s infinite;
      opacity: 0;
  }
  
  @keyframes jumpAndReturn {
      0%, 100% {
          transform: translateY(0);
          opacity: 1;
      }
      50% {
          transform: translateY(-10px);
      }
  }
  
  .ins a i {
      color: #ff00bf;
      border-radius: 50%;
      background-color: #000000;
      padding: 10px;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
  }
  
  .ins a:hover i {
      transform: rotate(360deg);
      color: #ffffff;
      box-shadow: 0 0 50px #ff07f3 inset,
                  0 0 30px #ffffff,
                  0 0 30px #9f0097;
  }
  
  .post a i {
      color: #ff0000;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
      border-radius: 50%;
      background-color: #000000;
      padding: 10px;
  }
  
  .post a:hover i {
      transform: rotate(360deg);
      color: #ffffff;
      box-shadow: 0 0 50px #ff0000 inset,
                  0 0 30px #ffffff,
                  0 0 30px #ff7777;
  }
  
  .linkln a i {
      color: #0022ff;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
      border-radius: 50%;
      background-color: #000000;
      padding: 10px;
  }
  
  .linkln a:hover i {
      transform: rotate(360deg);
      color: #ffffff;
      box-shadow: 0 0 50px #0022ff inset,
                  0 0 30px #ffffff,
                  0 0 30px #687aef;
  }
  
  .arama-cubugu {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #8c8f91;
      height: 50px;
      width: auto;
      padding: 1%;
      border-radius: 50px;
  }
  
  .box-search {
      float: left;
      background: none;
      border: none;
      outline: none;
      color: white;
      font-size: 20px;
      width: 0;
      transition: 1s;
      display: flex;
  }
  
  .btn.search {
      display: flex;
      justify-content: center;
      align-items: center;
      color: whitesmoke;
      float: right;
      width: 40px;
      height: 60px;
      border-radius: 50px;
  }
  
  .arama-cubugu:hover > .box-search {
      width: 500px;
  }
  
  .isimmar {
      margin: 20px;
      margin-top: 50px;
  }
  
  h6 {
      font-size: 30px;
      margin: 15px;
  }
  
  .logo1 {
      width: 80px;
      height: 80px;
      margin-right: 16%;
  }
  
  .aralik::after {
      content: "\00A0";
      margin-left: 10px;
  }
  
  i {
      font-size: 40px;
      margin: 7px;
      margin-left: 10px;
      vertical-align: middle;
  }
  
  /* Mobil cihazlar için medya sorgusu */
  @media only screen and (max-width: 768px) {
  
      .kutu {
          flex-direction: column; /* Yatay hizalamayı dikey yap */
          padding: 20px;
          margin: 10px;
      }
  
      .kutu img {
          max-width: 40%; /* Görseli büyüt */
          margin: 10px auto;
      }
  
      .isim {
          font-size: 30px; /* Yazı boyutunu küçült */
          text-align: center;
      }
  
      .meslek {
          font-size: 20px; /* Meslek yazı boyutunu küçült */
          text-align: center;
      }
  
      .sos {
          align-items: center;
          flex-direction: row; /* Sosyal medya ikonlarını yatay hizala */
          gap: 20px;
          margin-top: 20px;
      }
  
      .ins a i,
      .post a i,
      .linkln a i {
          font-size: 30px; /* İkon boyutunu küçült */
          padding: 5px;
      }
  
      .bass1 {
          flex-direction: column;
          padding: 10px;
      }
  
      .logo1 {
          width: 60px;
          height: 60px;
          margin-right: 0;
          margin-bottom: 10px;
      }
  
      .arama-cubugu {
          width: 300px; /* Başlangıç genişliği */
          padding: 0 10px; /* İç kenar boşluğu */
          transition: width 0.5s ease;
          overflow: hidden; /* Taşmaları gizle */
      }
  
      .box-search {
          width: 0;
          transition: width 0.5s ease;
      }
  
      .dropdown-content {
          text-align: center;
      }
  
      footer {
          text-align: center;
          font-size: 16px;
          padding: 10px;
      }
  }