/* 3E Yazılım sayfalar arası geçiş */
.three-page-transition {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  background: #071d3f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.three-page-transition.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition:
    opacity 220ms ease,
    visibility 0s linear 0s;
}

.three-page-transition-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(460px, 100%);
  text-align: center;
  transform: translateY(14px);
  opacity: 0;
}

.three-page-transition.is-visible
.three-page-transition-inner {
  animation: threePageTransitionInnerIn 430ms ease forwards;
}

.three-page-transition-logo {
  display: block;
  width: 86px;
  height: 86px;
  margin: 0 0 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transform: scale(.88);
  opacity: 0;
}

.three-page-transition.is-visible
.three-page-transition-logo {
  animation: threePageTransitionLogoIn 430ms ease 40ms forwards;
}

.three-page-transition-title {
  display: block;
  margin: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(27px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.three-page-transition-line {
  display: block;
  width: 0;
  height: 4px;
  margin-top: 19px;
  background: #2e8cff;
}

.three-page-transition.is-visible
.three-page-transition-line {
  animation: threePageTransitionLineIn 520ms ease 90ms forwards;
}

.three-page-transition.is-arriving
.three-page-transition-inner {
  animation: none;
  transform: translateY(0);
  opacity: 1;
}

.three-page-transition.is-arriving
.three-page-transition-logo {
  animation: none;
  transform: scale(1);
  opacity: 1;
}

.three-page-transition.is-arriving
.three-page-transition-line {
  animation: none;
  width: 116px;
}

@keyframes threePageTransitionInnerIn {
  from {
    transform: translateY(14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes threePageTransitionLogoIn {
  from {
    transform: scale(.88);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes threePageTransitionLineIn {
  from {
    width: 0;
  }

  to {
    width: 116px;
  }
}

@media (max-width: 640px) {
  .three-page-transition-logo {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
  }

  .three-page-transition-title {
    font-size: 29px;
  }

  .three-page-transition-line {
    height: 3px;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-page-transition,
  .three-page-transition-inner,
  .three-page-transition-logo,
  .three-page-transition-line {
    animation: none !important;
    transition: none !important;
  }
}

/* 3E HANDWRITTEN TRANSITION TITLE START */

/* Örnekteki beyaz zemin */
.three-page-transition {
  background: #ffffff !important;
}

/* Logo orijinal lacivert rengiyle görünsün */
.three-page-transition-logo {
  width: 98px !important;
  height: 98px !important;
  margin-bottom: 4px !important;
  filter: none !important;
}

/* İyi yazılım budur — yeşil el yazısı */
.three-page-transition-title {
  margin: 0 !important;
  color: #08a756 !important;
  font-family:
    "Segoe Script",
    "Brush Script MT",
    "Lucida Handwriting",
    "URW Chancery L",
    cursive !important;
  font-size: clamp(29px, 4.5vw, 48px) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* Örnekte çizgi bulunmadığı için kaldır */
.three-page-transition-line {
  display: none !important;
}

@media (max-width: 640px) {
  .three-page-transition-logo {
    width: 82px !important;
    height: 82px !important;
  }

  .three-page-transition-title {
    font-size: 31px !important;
  }
}

/* 3E HANDWRITTEN TRANSITION TITLE END */

/* 3E BLUE TRANSITION BACKGROUND START */
.three-page-transition {
  background: #071d3f !important;
}

.three-page-transition-logo {
  filter: brightness(0) invert(1) !important;
}

.three-page-transition-title {
  color: #18c875 !important;
}
/* 3E BLUE TRANSITION BACKGROUND END */