/* Günlüğüm kısa açılış ekranı */
.site-intro-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: var(--bg, #171c21);
  color: var(--ink, #e3e8ec);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 220ms ease;
}

html.intro-loader-active .site-intro-loader {
  display: grid;
}

html.intro-loader-fade .site-intro-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-intro-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(280px, 100%);
  text-align: center;
  animation: intro-loader-arrive 300ms ease both;
}

.site-intro-loader__mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--acc, #6fb3ba) 55%, transparent);
  border-radius: 18px;
  color: var(--acc, #6fb3ba);
  font: 800 27px/1 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--acc, #6fb3ba) 10%, transparent);
}

.site-intro-loader__title {
  margin: 0;
  color: var(--ink, #e3e8ec);
  font: 700 25px/1.15 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  letter-spacing: -0.035em;
}

.site-intro-loader__caption {
  margin: 5px 0 0;
  color: var(--mute, #93a0ab);
  font: 400 13px/1.4 'Nunito Sans', system-ui, sans-serif;
}

.site-intro-loader__track {
  position: relative;
  width: 128px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line, #2f3841);
}

.site-intro-loader__track::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--acc, #6fb3ba);
  content: '';
  animation: intro-loader-progress 850ms ease-in-out infinite;
}

@keyframes intro-loader-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(340%); }
}

@keyframes intro-loader-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro-loader,
  .site-intro-loader__content {
    animation: none !important;
    transition-duration: 1ms !important;
  }
  .site-intro-loader__track::after {
    animation: none !important;
    transform: translateX(70%);
  }
}