/**
 * Minimalist monokrom çerçeve sanatı — giriş ve hoş geldiniz sol paneli
 */

.brand-frame-art {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 9rem;
  height: 9rem;
  pointer-events: none;
  z-index: 0;
}

.brand-frame-art-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.15rem;
  height: 2.85rem;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: brand-frame-core-morph 9s ease-in-out infinite;
}

.brand-frame-art-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.brand-frame-art-layer--1 {
  animation: brand-frame-layer-a 13s ease-in-out infinite;
}

.brand-frame-art-layer--2 {
  animation: brand-frame-layer-b 13s ease-in-out infinite;
  animation-delay: -2.6s;
}

.brand-frame-art-layer--3 {
  animation: brand-frame-layer-c 13s ease-in-out infinite;
  animation-delay: -5.2s;
}

.brand-frame-art-layer--4 {
  border-color: rgba(255, 255, 255, 0.32);
  animation: brand-frame-layer-d 13s ease-in-out infinite;
  animation-delay: -7.8s;
}

.brand-frame-art-layer--5 {
  border-color: rgba(255, 255, 255, 0.22);
  animation: brand-frame-layer-e 13s ease-in-out infinite;
  animation-delay: -10.4s;
}

@keyframes brand-frame-core-morph {
  0%,
  100% {
    width: 2.15rem;
    height: 2.85rem;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  33% {
    width: 2.75rem;
    height: 2.1rem;
    transform: translate(-50%, -50%) rotate(1.5deg);
  }
  66% {
    width: 1.95rem;
    height: 3.15rem;
    transform: translate(-50%, -50%) rotate(-1deg);
  }
}

@keyframes brand-frame-layer-a {
  0%,
  100% {
    width: 2.6rem;
    height: 3.4rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(-4deg);
  }
  12% {
    opacity: 0.75;
  }
  38% {
    width: 3.5rem;
    height: 2.65rem;
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1) rotate(2deg);
  }
  62% {
    opacity: 0.28;
  }
  88% {
    width: 4.1rem;
    height: 3.1rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08) rotate(-1deg);
  }
}

@keyframes brand-frame-layer-b {
  0%,
  100% {
    width: 3.2rem;
    height: 2.5rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.68) rotate(5deg);
  }
  14% {
    opacity: 0.65;
  }
  42% {
    width: 2.75rem;
    height: 3.55rem;
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1) rotate(-3deg);
  }
  70% {
    opacity: 0.2;
  }
  90% {
    width: 4.35rem;
    height: 2.9rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1) rotate(1deg);
  }
}

@keyframes brand-frame-layer-c {
  0%,
  100% {
    width: 3.85rem;
    height: 3.85rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(-2deg);
  }
  10% {
    opacity: 0.55;
  }
  45% {
    width: 4.6rem;
    height: 3.15rem;
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1) rotate(4deg);
  }
  75% {
    opacity: 0.15;
  }
  92% {
    width: 5rem;
    height: 3.75rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.06) rotate(0deg);
  }
}

@keyframes brand-frame-layer-d {
  0%,
  100% {
    width: 4.4rem;
    height: 3.25rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75) rotate(3deg);
  }
  16% {
    opacity: 0.45;
  }
  48% {
    width: 3.9rem;
    height: 4.5rem;
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1) rotate(-5deg);
  }
  78% {
    opacity: 0.12;
  }
  94% {
    width: 5.25rem;
    height: 3.6rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12) rotate(2deg);
  }
}

@keyframes brand-frame-layer-e {
  0%,
  100% {
    width: 5.1rem;
    height: 4.15rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78) rotate(-6deg);
  }
  18% {
    opacity: 0.35;
  }
  50% {
    width: 4.55rem;
    height: 5.05rem;
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(1) rotate(3deg);
  }
  82% {
    opacity: 0.08;
  }
  96% {
    width: 5.65rem;
    height: 4.35rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.14) rotate(-2deg);
  }
}

@media (max-width: 900px) {
  .brand-frame-art {
    top: 3%;
    right: 3%;
    transform: scale(0.78);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-frame-art-core,
  .brand-frame-art-layer {
    animation: none;
  }

  .brand-frame-art-layer--1 {
    width: 3.2rem;
    height: 2.8rem;
    opacity: 0.35;
    transform: translate(-50%, -50%) rotate(2deg);
  }

  .brand-frame-art-layer--3 {
    width: 4.5rem;
    height: 3.6rem;
    opacity: 0.2;
    transform: translate(-50%, -50%) rotate(-3deg);
  }
}