.text-center { text-align: center; }
body { overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; font-family: 'Roboto', sans-serif; }
.preload { display: none; }
#logo { margin-top: 3vh; width: 60vh }
#unvan { margin-top: 3vh; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 2.8vh; padding-bottom: 0.5vh; }
.sub-title { margin-top: 2vh; font-family: 'Roboto', sans-serif; font-size: 1.9vh; font-weight: 500; }
.title { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.9vh; }
a.titlex { text-decoration: none !important; color: #FFF; border-bottom: none;}
#fixed-div {
    min-width: 200px; max-width: 85%;
    background-color: rgba(0, 0, 0, 0.35); backdrop-filter: blur(1px); border-radius: 25px;
    padding: 3vw; position: fixed; z-index: 1; display: flex; justify-content: center; align-items: center; color: #FFF;
    animation: radius 8s ease-in-out  infinite; 
}
.background {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: cover;
    animation: zoom-in-out 80s ease-in-out infinite;
}
@keyframes zoom-in-out {
    0% { background-image: url("../img/mb1.jpg"); transform: scale(1); }
    9.8% { background-image: url("../img/mb1.jpg"); }
    10% { background-image: url("../img/mb2.jpg"); transform: scale(1.20); }
    19.8% { background-image: url("../img/mb2.jpg"); }
    20% { background-image: url("../img/mb3.jpg"); transform: scale(1); }
    29.8% { background-image: url("../img/mb3.jpg"); }
    30% { background-image: url("../img/mb4.jpg"); transform: scale(1.20); }
    39.8% { background-image: url("../img/mb4.jpg"); }
    40% { background-image: url("../img/mb5.jpg"); transform: scale(1); }
    49.8% { background-image: url("../img/mb5.jpg"); }
    50% { background-image: url("../img/mb6.jpg"); transform: scale(1.20); }
    59.8% { background-image: url("../img/mb6.jpg"); }
    60% { background-image: url("../img/mb7.jpg"); transform: scale(1); }
    69.8% { background-image: url("../img/mb7.jpg"); }
    70% { background-image: url("../img/mb8.jpg"); transform: scale(1.20); }
    79.8% { background-image: url("../img/mb8.jpg"); }
    80% { background-image: url("../img/mb9.jpg"); transform: scale(1); }
    89.8% { background-image: url("../img/mb9.jpg"); }
    90% { background-image: url("../img/mb10.jpg"); transform: scale(1.20); }
    99.8% { background-image: url("../img/mb10.jpg"); }
}
@keyframes radius {
    0% { border-radius: 25px; backdrop-filter: blur(1px); background-color: rgba(0, 0, 0, 0.35); }
    25% { border-radius: 40% 25px; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(7px); }
    50% { border-radius: 25px; backdrop-filter: blur(1px); background-color: rgba(0, 0, 0, 0.35); }
    75% { border-radius: 25px 40%; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(7px); }
}

  
  /* Tabletler için */
  @media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 1023px) {
    #logo {
      width: 40vh; /* Görüntü genişliği %50 olarak ayarlanır */
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px) {
    #logo {
      width: 40vh; /* Görüntü genişliği %50 olarak ayarlanır */
    }
  }