.ag-page-nav-loader {
  --ag-loader-mark-h: 68px;
  --ag-loader-vb-w: 1523.74;
  --ag-loader-vb-h: 1045.3;
  /* M genişliği / tam logo — sadece çizgi hizası için */
  --ag-loader-m-width-ratio: 0.7088;
  --ag-loader-m-center-ratio: 0.3544;
  --ag-loader-mark-full-w: calc(var(--ag-loader-mark-h) * var(--ag-loader-vb-w) / var(--ag-loader-vb-h));
  --ag-loader-mark-m-w: calc(var(--ag-loader-mark-full-w) * var(--ag-loader-m-width-ratio));

  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(252, 252, 252, 0.62);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

html.ag-dark .ag-page-nav-loader {
  background: rgba(8, 9, 11, 0.74);
}

html.ag-page-nav-active .ag-page-nav-loader,
.ag-page-nav-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ag-page-nav-loader__inner {
  animation: ag-page-nav-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ag-page-nav-loader__cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--ag-loader-mark-full-w);
}

.ag-page-nav-loader__mark-frame {
  position: relative;
  width: 100%;
  height: var(--ag-loader-mark-h);
}

.ag-page-nav-loader__mark {
  display: block;
  width: 100%;
  height: var(--ag-loader-mark-h);
  transform-origin: center center;
  animation: ag-page-nav-mark 2.6s cubic-bezier(0.45, 0.05, 0.2, 1) infinite;
  filter: drop-shadow(0 4px 18px rgba(9, 9, 11, 0.08));
}

html.ag-dark .ag-page-nav-loader__mark {
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.42));
}

html.ag-dark .ag-page-nav-loader__mark--light {
  display: none;
}

html:not(.ag-dark) .ag-page-nav-loader__mark--dark {
  display: none;
}

.ag-page-nav-loader__sheen {
  position: absolute;
  inset: -20% -30%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 52%,
    transparent 62%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: ag-page-nav-sheen 2.1s cubic-bezier(0.45, 0.05, 0.2, 1) infinite;
  mix-blend-mode: soft-light;
}

html.ag-dark .ag-page-nav-loader__sheen {
  display: none;
}

html.ag-dark .ag-page-nav-loader__line::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 30, 58, 0.22) 18%,
    #c41e3a 50%,
    rgba(196, 30, 58, 0.22) 82%,
    transparent 100%
  );
}

/* Çizgi: tam logo görünür, hizası sadece M merkezine */
.ag-page-nav-loader__line-track {
  position: relative;
  width: 100%;
  height: 2px;
  margin-top: 18px;
}

.ag-page-nav-loader__line {
  position: absolute;
  top: 0;
  left: calc(var(--ag-loader-m-center-ratio) * 100%);
  transform: translateX(-50%);
  width: calc(var(--ag-loader-mark-m-w) * 0.78);
  height: 2px;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.1);
  overflow: hidden;
}

html.ag-dark .ag-page-nav-loader__line {
  background: rgba(255, 255, 255, 0.12);
}

.ag-page-nav-loader__line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 52%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(113, 18, 22, 0.18) 18%,
    #711216 50%,
    rgba(113, 18, 22, 0.18) 82%,
    transparent 100%
  );
  animation: ag-page-nav-line 1.85s cubic-bezier(0.45, 0.05, 0.2, 1) infinite;
}

@keyframes ag-page-nav-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ag-page-nav-mark {
  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.025) translateY(-2px);
    opacity: 1;
  }
}

@keyframes ag-page-nav-sheen {
  0% {
    transform: translateX(-120%) skewX(-12deg);
  }
  100% {
    transform: translateX(120%) skewX(-12deg);
  }
}

@keyframes ag-page-nav-line {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(230%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-page-nav-loader__inner {
    animation: none;
  }

  .ag-page-nav-loader__mark,
  .ag-page-nav-loader__sheen,
  .ag-page-nav-loader__line::after {
    animation: none;
  }

  .ag-page-nav-loader__mark {
    opacity: 0.96;
  }
}