/* Seçilen menünün rengini ana içerik alanında ipeksi bir perde geçişine dönüştürür. */
.dortg-menu-transition-host {
  position: relative !important;
  isolation: isolate;
}

.dortg-menu-transition {
  position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.dortg-menu-transition.is-active {
  visibility: visible;
}

.dortg-menu-transition__wash,
.dortg-menu-transition__glow,
.dortg-menu-transition__ring,
.dortg-menu-transition__logo,
.dortg-menu-transition__pattern,
.dortg-menu-transition__pulse,
.dortg-menu-transition__menu-badge {
  position: absolute;
  pointer-events: none;
}

.dortg-menu-transition__pattern {
  inset: 0;
  display: none;
  overflow: hidden;
}

.dortg-menu-transition[data-pattern="ripple"] .dortg-menu-transition__pattern--ripple,
.dortg-menu-transition[data-pattern="orbit"] .dortg-menu-transition__pattern--orbit,
.dortg-menu-transition[data-pattern="ribbons"] .dortg-menu-transition__pattern--ribbons,
.dortg-menu-transition[data-pattern="tiles"] .dortg-menu-transition__pattern--tiles,
.dortg-menu-transition[data-pattern="lines"] .dortg-menu-transition__pattern--lines,
.dortg-menu-transition[data-pattern="route"] .dortg-menu-transition__pattern--route,
.dortg-menu-transition[data-pattern="beacon"] .dortg-menu-transition__pattern--beacon {
  display: block;
}

/* Ana içeriğin tamamını, menü renginden üretilen yumuşak bir perde kaplar. */
.dortg-menu-transition__wash {
  inset: -18% -28%;
  background:
    linear-gradient(104deg,
      rgba(255, 255, 255, 0) 18%,
      rgba(var(--dortg-transition-rgb), 0.04) 35%,
      rgba(var(--dortg-transition-rgb), 0.28) 50%,
      rgba(var(--dortg-transition-rgb), 0.09) 65%,
      rgba(255, 255, 255, 0) 82%);
  transform: translateX(-58%) skewX(-12deg);
  filter: saturate(1.15) blur(0.2px);
  opacity: 0;
}

.dortg-menu-transition__glow {
  width: 72%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dortg-transition-rgb), 0.28), rgba(var(--dortg-transition-rgb), 0.08) 40%, transparent 69%);
  transform: translate(-50%, -50%) scale(0.42);
  filter: blur(16px);
  opacity: 0;
}

.dortg-menu-transition__ring {
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(var(--dortg-transition-rgb), 0.46), 0 0 54px rgba(var(--dortg-transition-rgb), 0.76);
  transform: translate(-50%, -50%) scale(0.08);
  opacity: 0;
}

.dortg-menu-transition__ring--a { width: clamp(220px, 48vw, 580px); height: clamp(220px, 48vw, 580px); top: 50%; left: 50%; --dortg-ripple-delay: 0ms; }
.dortg-menu-transition__ring--b { width: clamp(118px, 19vw, 240px); height: clamp(118px, 19vw, 240px); top: 18%; left: 16%; --dortg-ripple-delay: 90ms; }
.dortg-menu-transition__ring--c { width: clamp(180px, 34vw, 390px); height: clamp(180px, 34vw, 390px); top: 23%; left: 79%; --dortg-ripple-delay: 170ms; }
.dortg-menu-transition__ring--d { width: clamp(142px, 24vw, 300px); height: clamp(142px, 24vw, 300px); top: 54%; left: 13%; --dortg-ripple-delay: 250ms; }
.dortg-menu-transition__ring--e { width: clamp(100px, 15vw, 190px); height: clamp(100px, 15vw, 190px); top: 58%; left: 88%; --dortg-ripple-delay: 330ms; }
.dortg-menu-transition__ring--f { width: clamp(178px, 31vw, 350px); height: clamp(178px, 31vw, 350px); top: 80%; left: 27%; --dortg-ripple-delay: 130ms; }
.dortg-menu-transition__ring--g { width: clamp(112px, 18vw, 220px); height: clamp(112px, 18vw, 220px); top: 83%; left: 74%; --dortg-ripple-delay: 390ms; }
.dortg-menu-transition__ring--h { width: clamp(84px, 12vw, 150px); height: clamp(84px, 12vw, 150px); top: 37%; left: 42%; --dortg-ripple-delay: 300ms; }

.dortg-menu-transition__logo {
  width: clamp(142px, 22vw, 260px);
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.84);
  opacity: 0;
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 7px 22px rgba(15, 23, 42, 0.44));
}

/* Tüm desenleri birbirine bağlayan hafif su dalgası ve menü kimliği. */
.dortg-menu-transition__pulse {
  width: clamp(190px, 34vw, 420px);
  height: clamp(190px, 34vw, 420px);
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(var(--dortg-transition-rgb), 0.34), 0 0 28px rgba(var(--dortg-transition-rgb), 0.48);
  transform: translate(-50%, -50%) scale(0.22);
  opacity: 0;
  will-change: transform, opacity;
}

.dortg-menu-transition__menu-badge {
  top: calc(50% + 62px);
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  color: rgba(255, 255, 255, 0.96);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) translateY(8px);
  opacity: 0;
  will-change: transform, opacity;
}

.dortg-menu-transition__menu-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #fff;
}

.dortg-menu-transition__menu-icon svg { width: 100%; height: 100%; stroke: currentColor; }

.dortg-menu-transition.is-active .dortg-menu-transition__pulse { animation: dortg-menu-pattern-pulse 860ms cubic-bezier(0.16, 0.72, 0.28, 1) both; }
.dortg-menu-transition.is-active .dortg-menu-transition__pulse--two { animation-delay: 150ms; }
.dortg-menu-transition.is-active .dortg-menu-transition__menu-badge { animation: dortg-menu-badge-in 660ms cubic-bezier(0.16, 0.72, 0.28, 1) both; }

.dortg-menu-transition.is-active .dortg-menu-transition__wash {
  animation: dortg-menu-silk-sweep 1180ms cubic-bezier(0.58, 0.01, 0.2, 1) both;
}

.dortg-menu-transition.is-active .dortg-menu-transition__glow {
  animation: dortg-menu-silk-glow 760ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

.dortg-menu-transition.is-active[data-pattern="ripple"] .dortg-menu-transition__ring {
  animation: dortg-menu-water-ripple 800ms cubic-bezier(0.16, 0.72, 0.28, 1) both;
  animation-delay: var(--dortg-ripple-delay, 0ms);
}

.dortg-menu-transition.is-active .dortg-menu-transition__logo {
  animation: dortg-menu-silk-logo 620ms cubic-bezier(0.16, 0.72, 0.28, 1) both;
}

/* Hakkımızda: birlikte hareket eden yörüngeler. */
.dortg-menu-transition__orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(var(--dortg-transition-rgb), 0.7);
  opacity: 0;
}
.dortg-menu-transition__orbit-ring--one { width: min(33vw, 410px); height: min(33vw, 410px); }
.dortg-menu-transition__orbit-ring--two { width: min(50vw, 620px); height: min(50vw, 620px); border-style: dashed; }
.dortg-menu-transition__orbit-ring--three { width: min(70vw, 850px); height: min(38vw, 480px); }
.dortg-menu-transition.is-active[data-pattern="orbit"] .dortg-menu-transition__orbit-ring { animation: dortg-menu-orbit 900ms cubic-bezier(0.16, 0.72, 0.28, 1) both; }
.dortg-menu-transition.is-active[data-pattern="orbit"] .dortg-menu-transition__orbit-ring--two { animation-delay: 100ms; }
.dortg-menu-transition.is-active[data-pattern="orbit"] .dortg-menu-transition__orbit-ring--three { animation-delay: 190ms; }

/* Hizmetler: menü rengiyle akan diyagonal şeritler. */
.dortg-menu-transition__ribbon {
  position: absolute;
  left: -12%;
  width: 124%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--dortg-transition-rgb), 0.82), rgba(255, 255, 255, 0.9), rgba(var(--dortg-transition-rgb), 0.62), transparent);
  box-shadow: 0 0 18px rgba(var(--dortg-transition-rgb), 0.66);
  transform: translateX(-112%) rotate(-8deg);
  opacity: 0;
}
.dortg-menu-transition__ribbon--one { top: 27%; }
.dortg-menu-transition__ribbon--two { top: 49%; }
.dortg-menu-transition__ribbon--three { top: 71%; }
.dortg-menu-transition.is-active[data-pattern="ribbons"] .dortg-menu-transition__ribbon { animation: dortg-menu-ribbon 900ms cubic-bezier(0.58, 0.01, 0.2, 1) both; }
.dortg-menu-transition.is-active[data-pattern="ribbons"] .dortg-menu-transition__ribbon--two { animation-delay: 100ms; }
.dortg-menu-transition.is-active[data-pattern="ribbons"] .dortg-menu-transition__ribbon--three { animation-delay: 190ms; }

/* Projeler: ekranı farklı ölçülerde kart parçalarıyla dolduran mozaik. */
.dortg-menu-transition__tile {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(var(--dortg-transition-rgb), 0.08));
  box-shadow: inset 0 0 0 1px rgba(var(--dortg-transition-rgb), 0.16), 0 12px 34px rgba(var(--dortg-transition-rgb), 0.18);
  backdrop-filter: blur(3px);
  transform: scale(0.7) rotate(-4deg);
  opacity: 0;
}
.dortg-menu-transition__tile--one { width: 25%; height: 31%; top: 11%; left: 11%; }
.dortg-menu-transition__tile--two { width: 20%; height: 43%; top: 9%; left: 42%; }
.dortg-menu-transition__tile--three { width: 26%; height: 29%; top: 18%; right: 9%; }
.dortg-menu-transition__tile--four { width: 30%; height: 34%; bottom: 9%; left: 20%; }
.dortg-menu-transition__tile--five { width: 21%; height: 38%; bottom: 12%; right: 19%; }
.dortg-menu-transition.is-active[data-pattern="tiles"] .dortg-menu-transition__tile { animation: dortg-menu-tile 720ms cubic-bezier(0.16, 0.72, 0.28, 1) both; animation-delay: var(--dortg-tile-delay, 0ms); }
.dortg-menu-transition__tile--two { --dortg-tile-delay: 80ms; }
.dortg-menu-transition__tile--three { --dortg-tile-delay: 150ms; }
.dortg-menu-transition__tile--four { --dortg-tile-delay: 120ms; }
.dortg-menu-transition__tile--five { --dortg-tile-delay: 210ms; }

/* Blog: yazı akışını çağrıştıran ince satırlar. */
.dortg-menu-transition__line {
  position: absolute;
  left: 9%;
  right: var(--dortg-line-end, 9%);
  top: var(--dortg-line-top, 20%);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), rgba(var(--dortg-transition-rgb), 0.72), transparent);
  transform: scaleX(0);
  opacity: 0;
  transform-origin: left;
}
.dortg-menu-transition__line--one { --dortg-line-top: 18%; --dortg-line-end: 30%; }
.dortg-menu-transition__line--two { --dortg-line-top: 31%; --dortg-line-end: 12%; }
.dortg-menu-transition__line--three { --dortg-line-top: 45%; --dortg-line-end: 24%; }
.dortg-menu-transition__line--four { --dortg-line-top: 60%; --dortg-line-end: 8%; }
.dortg-menu-transition__line--five { --dortg-line-top: 75%; --dortg-line-end: 36%; }
.dortg-menu-transition.is-active[data-pattern="lines"] .dortg-menu-transition__line { animation: dortg-menu-line 720ms ease-out both; animation-delay: var(--dortg-line-delay, 0ms); }
.dortg-menu-transition__line--two { --dortg-line-delay: 70ms; }.dortg-menu-transition__line--three { --dortg-line-delay: 140ms; }.dortg-menu-transition__line--four { --dortg-line-delay: 210ms; }.dortg-menu-transition__line--five { --dortg-line-delay: 280ms; }

/* Süreç: hedefe ilerleyen rota, sırayla açılan adımlar ve akış izi. */
.dortg-menu-transition__route-svg { width: 100%; height: 100%; overflow: visible; }
.dortg-menu-transition__route-base { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.2; stroke-linecap: round; }
.dortg-menu-transition__route-trace { fill: none; stroke: rgba(255, 255, 255, 0.96); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 11; stroke-dashoffset: 220; filter: drop-shadow(0 0 7px rgba(var(--dortg-transition-rgb), 0.92)); }
.dortg-menu-transition__route-svg circle { fill: rgba(var(--dortg-transition-rgb), 0.98); stroke: rgba(255, 255, 255, 0.96); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; opacity: 0; }
.dortg-menu-transition.is-active[data-pattern="route"] .dortg-menu-transition__route-trace { animation: dortg-menu-route 1080ms ease-out both; }
.dortg-menu-transition.is-active[data-pattern="route"] .dortg-menu-transition__route-svg circle { animation: dortg-menu-node 440ms ease-out both; animation-delay: var(--dortg-route-node-delay, 0ms); }
.dortg-menu-transition__route-svg circle:nth-of-type(2) { --dortg-route-node-delay: 180ms; }.dortg-menu-transition__route-svg circle:nth-of-type(3) { --dortg-route-node-delay: 360ms; }.dortg-menu-transition__route-svg circle:nth-of-type(4) { --dortg-route-node-delay: 540ms; }.dortg-menu-transition__route-svg circle:nth-of-type(5) { --dortg-route-node-delay: 720ms; }
.dortg-menu-transition__route-step { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(var(--dortg-transition-rgb), 0.28), 0 0 18px rgba(var(--dortg-transition-rgb), 0.82); opacity: 0; transform: scale(0.25); }
.dortg-menu-transition__route-step--one { left: 12%; top: 73%; }.dortg-menu-transition__route-step--two { left: 34%; top: 36%; }.dortg-menu-transition__route-step--three { left: 55%; top: 59%; }.dortg-menu-transition__route-step--four { left: 76%; top: 31%; }.dortg-menu-transition__route-step--five { left: 90%; top: 18%; }
.dortg-menu-transition.is-active[data-pattern="route"] .dortg-menu-transition__route-step { animation: dortg-menu-step-glow 500ms ease-out both; animation-delay: var(--dortg-route-step-delay, 0ms); }.dortg-menu-transition__route-step--two { --dortg-route-step-delay: 180ms; }.dortg-menu-transition__route-step--three { --dortg-route-step-delay: 360ms; }.dortg-menu-transition__route-step--four { --dortg-route-step-delay: 540ms; }.dortg-menu-transition__route-step--five { --dortg-route-step-delay: 720ms; }

/* İletişim: farklı noktalardan yayılan sinyal halkaları. */
.dortg-menu-transition__beacon-ring { position: absolute; width: clamp(130px, 25vw, 310px); height: clamp(130px, 25vw, 310px); border: 1px solid rgba(255, 255, 255, 0.92); border-radius: 50%; box-shadow: 0 0 28px rgba(var(--dortg-transition-rgb), 0.58); transform: translate(-50%, -50%) scale(0.12); opacity: 0; }
.dortg-menu-transition__beacon-ring--one { top: 30%; left: 25%; }.dortg-menu-transition__beacon-ring--two { top: 64%; left: 72%; }.dortg-menu-transition__beacon-ring--three { top: 46%; left: 49%; }
.dortg-menu-transition.is-active[data-pattern="beacon"] .dortg-menu-transition__beacon-ring { animation: dortg-menu-beacon 860ms cubic-bezier(0.16, 0.72, 0.28, 1) both; animation-delay: var(--dortg-beacon-delay, 0ms); }
.dortg-menu-transition__beacon-ring--two { --dortg-beacon-delay: 160ms; }.dortg-menu-transition__beacon-ring--three { --dortg-beacon-delay: 300ms; }

@keyframes dortg-menu-silk-sweep {
  0% { transform: translateX(-58%) skewX(-12deg); opacity: 0; }
  16% { opacity: 1; }
  55% { opacity: 0.92; }
  100% { transform: translateX(58%) skewX(-12deg); opacity: 0; }
}

@keyframes dortg-menu-silk-glow {
  0% { transform: translate(-50%, -50%) scale(0.42); opacity: 0; }
  24% { opacity: 0.92; }
  100% { transform: translate(-50%, -50%) scale(1.38); opacity: 0; }
}

@keyframes dortg-menu-water-ripple {
  0% { transform: translate(-50%, -50%) scale(0.08); opacity: 0; }
  12% { opacity: 1; }
  58% { opacity: 0.64; }
  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
}

@keyframes dortg-menu-pattern-pulse { 0% { transform: translate(-50%, -50%) scale(0.22); opacity: 0; } 18% { opacity: 0.82; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } }
@keyframes dortg-menu-badge-in { 0% { transform: translate(-50%, -50%) translateY(8px); opacity: 0; } 28% { opacity: 0.94; } 72% { opacity: 0.88; } 100% { transform: translate(-50%, -50%) translateY(-4px); opacity: 0; } }

@keyframes dortg-menu-orbit { 0% { transform: translate(-50%, -50%) scale(0.18) rotate(-34deg); opacity: 0; } 18% { opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(1.16) rotate(24deg); opacity: 0; } }
@keyframes dortg-menu-ribbon { 0% { transform: translateX(-112%) rotate(-8deg); opacity: 0; } 18% { opacity: 0.92; } 100% { transform: translateX(112%) rotate(-8deg); opacity: 0; } }
@keyframes dortg-menu-tile { 0% { transform: scale(0.7) rotate(-4deg); opacity: 0; } 30% { opacity: 0.82; } 100% { transform: scale(1.06) rotate(2deg); opacity: 0; } }
@keyframes dortg-menu-line { 0% { transform: scaleX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes dortg-menu-route { 0% { stroke-dashoffset: 220; opacity: 0; } 16% { opacity: 1; } 82% { opacity: 0.92; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dortg-menu-node { 0% { transform: scale(0.2); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes dortg-menu-step-glow { 0% { transform: scale(0.25); opacity: 0; } 38% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes dortg-menu-beacon { 0% { transform: translate(-50%, -50%) scale(0.12); opacity: 0; } 16% { opacity: 0.96; } 100% { transform: translate(-50%, -50%) scale(1.24); opacity: 0; } }

@keyframes dortg-menu-silk-logo {
  0% { transform: translate(-50%, -50%) scale(0.84); opacity: 0; }
  28% { opacity: 0.94; }
  72% { opacity: 0.86; }
  100% { transform: translate(-50%, -50%) scale(1.03); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dortg-menu-transition { display: none; }
}

@media (max-width: 1023px) {
  .dortg-menu-transition { display: none !important; }
}