/* —————————— Overlay genel ayarları —————————— */
#page-loader {
  position: fixed;
  inset: 0;
  background: #181d25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.5s;
}

/* —————————— ① Göz animasyonu (loader-eyes) —————————— */
.loader-eyes {
  position: relative;
  width: 108px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.loader-eyes::before,
.loader-eyes::after {
  content: "";
  width: 48px;
  height: 48px;
  background-color: #fff;
  background-image: radial-gradient(circle 14px, #0d161b 100%, transparent 0);
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: eyeMove 10s infinite, blink 10s infinite;
  display: inline-block;
}
@keyframes eyeMove {
  0%,10%   { background-position: 0   0;   }
  13%,40%  { background-position: -15px 0; }
  43%,70%  { background-position: 15px  0; }
  73%,90%  { background-position: 0   15px; }
  93%,100% { background-position: 0    0;  }
}
@keyframes blink {
  0%,10%,12%,20%,22%,40%,42%,60%,62%,70%,72%,90%,92%,98%,100% { height: 48px; }
  11%,21%,41%,61%,71%,91%,99% { height: 18px; }
}

/* —————————— ② Yalnızca “Loading . . .” metni —————————— */
.circ {
  width: 180px;
  height: 60px;            /* Metin yüksekliğine göre ayarla */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.load {
  font-family: 'Julius Sans One', sans-serif;
  font-size: 28px;
  color: #9b9898;
  overflow: hidden;
  white-space: nowrap;
  animation: fontAnim 3.75s infinite ease-out;
  width: 7ch;
}
@keyframes fontAnim {
  0%   { width: 3ch; }
  16%  { width: 7ch; }
  32%  { width: 7ch; }
  48%  { width: 8ch; }
  64%  { width: 9ch; }
  80%  { width: 10ch; }
  100% { width: 11ch; }
}