/* Genel sıfırlama */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Başlık stil */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  background-color: #0c2331;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13%;
  z-index: 10;
}

.logo img {
  margin: 8px;
  height: 10rem;
}

.yazi {
  display: flex;
  height: 20px;
  align-items: center;
  padding: 0 100px;
  font-family: "Audiowide", sans-serif; /* 'Pirulen Regular' yazı tipini burada kullanın */
  font-size: 40px;
}

/* Resim1'in saat arkasında görünmesini sağlamak için z-index ayarı */
.resim1 img {
  height: 100vh; /* Tam görünüm yüksekliği */
  width: 100vw;  /* Tam görünüm genişliği */
  object-fit: cover; /* Resmi kapsayıcıya göre ölçeklendirir */
  position: absolute; /* Konumlandırmayı belirler */
  top: 0;
  left: 0;
  z-index: 1; /* Saatin arkasında görünmesini sağlar */
  filter: grayscale(70%); /* Resmi gri tonlamaya çevirir */
}

/* Konteyner stil */
.container {
  position: relative; /* Konteynerin göreli konumlandırması */
  margin-top: 60px;
  height: 100vh; /* Tam görünüm yüksekliği */
  width: 100vw;  /* Tam görünüm genişliği */
  display: flex;
  justify-content: center; /* Yatayda ortalama */
  align-items: center;     /* Dikeyde ortalama */
}

/* Saat stilini iki kat küçültmek için düzenlemeler */
.clock {
  width: 550px; /* Önceki 1100px'in yarısı */
  height: 550px; /* Önceki 1100px'in yarısı */
  position: relative;
  z-index: 2; /* Resmin üzerinde görünmesini sağlar */
}

/* Dakika ve saniye ibrelerinin boyutlarını iki kat küçültmek */
.minute-hand, .second-hand {
  position: absolute;
  z-index: 6;
  width: 2px; /* Önceki 4px'in yarısı */
  height: 180px; /* Önceki 360px'in yarısı */
  background: #000000;
  top: 50%;
  left: 50%;
  margin-left: -1px; /* Yatayda ortalama */
  margin-top: -180px; /* Dikeyde ortalama */
  transform-origin: 50% 180px; /* Dönme merkezi ayarı */
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

/* İşaretçilerin boyutlarını iki kat küçültmek */
.diallines {
  position: absolute;
  z-index: 2;
  width: 2px; /* Önceki 4px'in yarısı */
  height: 25px; /* Önceki 50px'in yarısı */
  background: #ffffff00;
  left: 50%;
  margin-left: -1px; /* Yatayda ortalama */
  transform-origin: 50% 275px; /* Dönme merkezi ayarı */
}

.diallines:nth-of-type(5n) {
  width: 2px; /* Önceki 4px'in yarısı */
  height: 20px; /* Önceki 40px'in yarısı */
  background: #000000;
}

/* Metin stilini koruyarak saati küçültmek */
.clock-text, .deneme, .deneme1, .deneme2 {
  position: absolute;
  color: #000000;
  font-family: "Lobster", sans-serif;
  font-weight: 500; /* Kalın yazı tipi */
  z-index: 11; /* Diğer öğelerin üzerinde */
}

.clock-text {
  top: 35%; /* Dikey ortalama */
  left: 50%; /* Yatay ortalama */
  transform: translate(-50%, -50%); /* Tam ortalama */
  font-size: 75px; /* Önceki 150px'in yarısı */
}

.deneme {
  top: 60%; /* Dikey ortalama */
  left: 50%; /* Yatay ortalama */
  transform: translate(-50%, -50%); /* Tam ortalama */
  font-size: 60px; /* Önceki 120px'in yarısı */
}

.deneme1 {
  top: 20%; /* Dikey ortalama */
  left: 50%; /* Yatay ortalama */
  transform: translate(-50%, -50%); /* Tam ortalama */
  font-size: 30px; /* Önceki 60px'in yarısı */
  font-weight: 200; /* Daha ince yazı tipi */
}

.deneme2 {
  top: 80%; /* Dikey ortalama */
  left: 50%; /* Yatay ortalama */
  transform: translate(-50%, -50%); /* Tam ortalama */
  font-size: 30px; /* Önceki 60px'in yarısı */
  font-weight: 200; /* Daha ince yazı tipi */
}

.audiowide-regular {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}