/* GENÇLİK DİL — 3 rastgele açılış animasyonu
   A = mevcut (patlamadan çıkış) — bozulmaz
   B = yukarıdan düşüş
   C = yandan geniş kayma
   Bitişte yanıp sönme yok; parçalar yerinde kalır.
*/

:root {
  --gd-logo-w: 280px;
}

.gd-logo {
  position: relative;
  display: inline-block;
  width: var(--gd-logo-w);
  max-width: 72vw;
  line-height: 0;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

.gd-logo__stage {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
}

.gd-logo__layer {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.gd-logo__layer--full {
  position: relative;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.gd-logo__layer--slogan,
.gd-logo__layer--left,
.gd-logo__layer--right {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  opacity: 0;
}

.gd-logo__layer--slogan {
  clip-path: inset(58% 0 0 0);
  -webkit-clip-path: inset(58% 0 0 0);
  transform-origin: 50% 78%;
}

.gd-logo__layer--left {
  clip-path: inset(0 48% 36% 0);
  -webkit-clip-path: inset(0 48% 36% 0);
  transform-origin: 50% 34%;
}

.gd-logo__layer--right {
  clip-path: inset(0 0 36% 48%);
  -webkit-clip-path: inset(0 0 36% 48%);
  transform-origin: 50% 34%;
}

/* ——— Ortak FX elemanları ——— */

.gd-logo__glow,
.gd-logo__burst,
.gd-logo__ring {
  pointer-events: none;
  position: absolute;
  left: 50%;
  opacity: 0;
  border-radius: 50%;
}

.gd-logo__glow {
  z-index: 3;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}

.gd-logo__glow--1 {
  top: 78%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 120, 0.9) 0%,
    rgba(255, 120, 80, 0.45) 35%,
    transparent 70%
  );
}

.gd-logo__glow--2 {
  top: 34%;
  background: radial-gradient(
    circle,
    rgba(180, 140, 255, 0.85) 0%,
    rgba(80, 180, 220, 0.4) 38%,
    transparent 70%
  );
}

.gd-logo__burst {
  z-index: 4;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #ffb703;
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent;
}

.gd-logo__burst--1 { top: 78%; }
.gd-logo__burst--2 { top: 34%; background: #9b5de5; }

.gd-logo__ring {
  z-index: 4;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 170, 70, 0.85);
  box-sizing: border-box;
  background: transparent;
}

.gd-logo__ring--1 { top: 78%; }
.gd-logo__ring--2 { top: 34%; border-color: rgba(130, 170, 255, 0.85); }

.gd-logo__shine {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  height: 60%;
  width: 24%;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-14deg) translateX(-180%);
  mix-blend-mode: soft-light;
}

/* B/C: A patlaması kapalı */
.gd-logo.gd-anim--b .gd-logo__glow,
.gd-logo.gd-anim--b .gd-logo__burst,
.gd-logo.gd-anim--b .gd-logo__ring,
.gd-logo.gd-anim--c .gd-logo__glow,
.gd-logo.gd-anim--c .gd-logo__burst,
.gd-logo.gd-anim--c .gd-logo__ring {
  display: none !important;
}

/* B/C FX varsayılan gizli */
.gd-logo__fx-b,
.gd-logo__fx-c {
  display: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: visible;
}

.gd-logo.gd-anim--b .gd-logo__fx-b,
.gd-logo.gd-anim--c .gd-logo__fx-c {
  display: block;
}

/* ——— B FX: neon flaş + diyagonal şerit + pulse ——— */

.gd-b-flash {
  position: absolute;
  inset: -15%;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 60%,
    rgba(0, 255, 200, 0.55) 0%,
    rgba(255, 0, 180, 0.35) 35%,
    transparent 65%
  );
}

.gd-b-streak {
  position: absolute;
  width: 55%;
  height: 3px;
  opacity: 0;
  border-radius: 2px;
  transform-origin: left center;
}

.gd-b-streak--1 {
  top: 70%;
  left: 5%;
  background: linear-gradient(90deg, #00f5d4, transparent);
  box-shadow: 0 0 10px #00f5d4;
  transform: rotate(-18deg);
}

.gd-b-streak--2 {
  top: 82%;
  right: 5%;
  left: auto;
  width: 50%;
  background: linear-gradient(270deg, #f72585, transparent);
  box-shadow: 0 0 10px #f72585;
  transform: rotate(14deg);
  transform-origin: right center;
}

.gd-b-streak--3 {
  top: 22%;
  left: 0;
  background: linear-gradient(90deg, #7b2cbf, transparent);
  box-shadow: 0 0 10px #7b2cbf;
  transform: rotate(12deg);
}

.gd-b-streak--4 {
  top: 40%;
  right: 0;
  left: auto;
  width: 48%;
  background: linear-gradient(270deg, #4cc9f0, transparent);
  box-shadow: 0 0 10px #4cc9f0;
  transform: rotate(-10deg);
  transform-origin: right center;
}

.gd-b-pulse {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  opacity: 0;
  border: 2px solid #00f5d4;
  box-sizing: border-box;
}

.gd-b-pulse--1 { top: 78%; border-color: #00f5d4; }
.gd-b-pulse--2 { top: 34%; border-color: #f72585; }

/* ——— C FX: tarama çizgisi + kıvılcım ——— */

.gd-c-scan {
  position: absolute;
  top: 0;
  width: 3px;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 200, 80, 0.95) 30%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 140, 60, 0.95) 70%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(255, 190, 80, 0.8), 0 0 24px rgba(255, 160, 50, 0.4);
}

.gd-c-scan--1 { left: 0; height: 42%; top: 58%; }
.gd-c-scan--2 { left: 0; height: 64%; top: 0; }

.gd-c-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  opacity: 0;
  background: #ffd166;
  box-shadow: 0 0 6px #ffb703;
  transform: rotate(45deg);
}

.gd-c-spark--1 { top: 72%; left: 10%; background: #ffb703; }
.gd-c-spark--2 { top: 78%; left: 30%; background: #ff6b4a; }
.gd-c-spark--3 { top: 28%; left: 20%; background: #ffe066; }
.gd-c-spark--4 { top: 36%; left: 55%; background: #ff9f1c; }

/* ========== A — mevcut animasyon + patlama (bozulmaz) ========== */

.gd-logo.is-playing.gd-anim--a .gd-logo__glow--1 {
  animation: gd-glow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__burst--1 {
  animation: gd-burst-a 0.7s cubic-bezier(0.15, 0.85, 0.25, 1) both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__ring--1 {
  animation: gd-ring 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__glow--2 {
  animation: gd-glow 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__burst--2 {
  animation: gd-burst-b 0.65s cubic-bezier(0.15, 0.85, 0.25, 1) 1.2s both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__ring--2 {
  animation: gd-ring 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.22s both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__shine {
  animation: gd-shine 0.5s ease-in-out 1.35s both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__layer--slogan {
  animation: gd-slogan 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__layer--left {
  animation: gd-from-center-left 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

.gd-logo.is-playing.gd-anim--a .gd-logo__layer--right {
  animation: gd-from-center-right 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

/* ========== B — elastik zıplama + neon flaş/şerit ========== */

.gd-logo.is-playing.gd-anim--b .gd-logo__shine {
  animation: none;
  opacity: 0;
}

.gd-logo.is-playing.gd-anim--b .gd-logo__layer--slogan {
  animation: gd-b-slogan 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.gd-logo.is-playing.gd-anim--b .gd-logo__layer--left {
  animation: gd-b-bounce-left 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s both;
}

.gd-logo.is-playing.gd-anim--b .gd-logo__layer--right {
  animation: gd-b-bounce-right 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.12s both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-flash {
  animation: gd-b-flash 0.85s ease-out both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-streak--1 {
  animation: gd-b-streak-l 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-streak--2 {
  animation: gd-b-streak-r 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-streak--3 {
  animation: gd-b-streak-l 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-streak--4 {
  animation: gd-b-streak-r 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-pulse--1 {
  animation: gd-b-pulse 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gd-logo.is-playing.gd-anim--b .gd-b-pulse--2 {
  animation: gd-b-pulse 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}

/* ========== C — perde/wipe + tarama çizgisi ========== */

.gd-logo.is-playing.gd-anim--c .gd-logo__shine {
  animation: none;
  opacity: 0;
}

.gd-logo.is-playing.gd-anim--c .gd-logo__layer--slogan {
  animation: gd-c-wipe-slogan 1.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.gd-logo.is-playing.gd-anim--c .gd-logo__layer--left {
  animation: gd-c-wipe-left 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.1s both;
}

.gd-logo.is-playing.gd-anim--c .gd-logo__layer--right {
  animation: gd-c-wipe-right 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.1s both;
}

.gd-logo.is-playing.gd-anim--c .gd-c-scan--1 {
  animation: gd-c-scan-h 1.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.gd-logo.is-playing.gd-anim--c .gd-c-scan--2 {
  animation: gd-c-scan-h 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.1s both;
}

.gd-logo.is-playing.gd-anim--c .gd-c-spark--1 { animation: gd-c-twinkle 0.7s ease-out 0.15s both; }
.gd-logo.is-playing.gd-anim--c .gd-c-spark--2 { animation: gd-c-twinkle 0.7s ease-out 0.45s both; }
.gd-logo.is-playing.gd-anim--c .gd-c-spark--3 { animation: gd-c-twinkle 0.65s ease-out 1.2s both; }
.gd-logo.is-playing.gd-anim--c .gd-c-spark--4 { animation: gd-c-twinkle 0.65s ease-out 1.45s both; }

/* Bitiş — tüm varyantlar */
.gd-logo.is-done .gd-logo__layer--slogan,
.gd-logo.is-done .gd-logo__layer--left,
.gd-logo.is-done .gd-logo__layer--right {
  opacity: 1;
  transform: none;
  animation: none;
}

.gd-logo.is-done .gd-logo__layer--full {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.gd-logo.is-done .gd-logo__glow,
.gd-logo.is-done .gd-logo__burst,
.gd-logo.is-done .gd-logo__ring,
.gd-logo.is-done .gd-logo__shine,
.gd-logo.is-done .gd-logo__fx-b,
.gd-logo.is-done .gd-logo__fx-c {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

/* ——— Keyframes: A (mevcut) ——— */

@keyframes gd-slogan {
  0% { opacity: 0; transform: scale(0.28); }
  22% { opacity: 1; transform: scale(1.06); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes gd-from-center-left {
  0% { opacity: 0; transform: translateX(22%) scale(0.35); }
  55% { opacity: 1; transform: translateX(-1.5%) scale(1.03); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes gd-from-center-right {
  0% { opacity: 0; transform: translateX(-22%) scale(0.35); }
  55% { opacity: 1; transform: translateX(1.5%) scale(1.03); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* ——— Keyframes: B (elastik + neon) ——— */

@keyframes gd-b-slogan {
  0% {
    opacity: 0;
    transform: translateY(48px) scale(0.7) rotate(-2deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-10px) scale(1.08) rotate(0.5deg);
  }
  78% {
    opacity: 1;
    transform: translateY(3px) scale(0.98) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes gd-b-bounce-left {
  0% {
    opacity: 0;
    transform: translate(-28%, -40px) rotate(-12deg) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: translate(2%, 6px) rotate(2deg) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}

@keyframes gd-b-bounce-right {
  0% {
    opacity: 0;
    transform: translate(28%, -40px) rotate(12deg) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: translate(-2%, 6px) rotate(-2deg) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}

@keyframes gd-b-flash {
  0% { opacity: 0; }
  12% { opacity: 0.95; }
  35% { opacity: 0.35; }
  55% { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes gd-b-streak-l {
  0% {
    opacity: 0;
    transform: rotate(-18deg) scaleX(0.15);
  }
  35% {
    opacity: 1;
    transform: rotate(-18deg) scaleX(1.05);
  }
  100% {
    opacity: 0;
    transform: rotate(-18deg) scaleX(1.2) translateX(12%);
  }
}

@keyframes gd-b-streak-r {
  0% {
    opacity: 0;
    transform: rotate(14deg) scaleX(0.15);
  }
  35% {
    opacity: 1;
    transform: rotate(14deg) scaleX(1.05);
  }
  100% {
    opacity: 0;
    transform: rotate(14deg) scaleX(1.2) translateX(-12%);
  }
}

@keyframes gd-b-pulse {
  0% {
    opacity: 0.95;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(7);
  }
}

/* ——— Keyframes: C (perde / wipe) ——— */

@keyframes gd-c-wipe-slogan {
  0% {
    opacity: 1;
    clip-path: inset(58% 100% 0 0);
    -webkit-clip-path: inset(58% 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(58% 0 0 0);
    -webkit-clip-path: inset(58% 0 0 0);
  }
}

@keyframes gd-c-wipe-left {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 36% 0);
    -webkit-clip-path: inset(0 100% 36% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 48% 36% 0);
    -webkit-clip-path: inset(0 48% 36% 0);
  }
}

@keyframes gd-c-wipe-right {
  0% {
    opacity: 1;
    clip-path: inset(0 0 36% 100%);
    -webkit-clip-path: inset(0 0 36% 100%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 36% 48%);
    -webkit-clip-path: inset(0 0 36% 48%);
  }
}

@keyframes gd-c-scan-h {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(var(--gd-logo-w) * 0.97));
  }
}

@keyframes gd-c-twinkle {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0.3);
  }
  30% {
    opacity: 1;
    transform: rotate(45deg) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.4) translateY(-12px);
  }
}

/* ——— Ortak FX keyframes (yalnızca A) ——— */

@keyframes gd-glow {
  0% { opacity: 0; transform: scale(0.4); }
  28% { opacity: 0.95; transform: scale(3.8); }
  100% { opacity: 0; transform: scale(10); }
}

@keyframes gd-ring {
  0% { opacity: 0.9; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(8.5); }
}

@keyframes gd-burst-a {
  0% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow:
      0 0 #ff4d6d, 0 0 #ffb703, 0 0 #3a86ff, 0 0 #8ac926,
      0 0 #9b5de5, 0 0 #00bbf9, 0 0 #ff6b6b, 0 0 #f4a261;
  }
  20% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      -12px -10px #ff4d6d, 14px -8px #ffb703, -16px 6px #3a86ff, 15px 8px #8ac926,
      -6px -16px #9b5de5, 8px -14px #00bbf9, -18px -2px #ff6b6b, 18px 2px #f4a261;
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
    box-shadow:
      -48px -36px #ff4d6d, 52px -32px #ffb703, -56px 20px #3a86ff, 54px 24px #8ac926,
      -26px -52px #9b5de5, 30px -50px #00bbf9, -62px -6px #ff6b6b, 64px 8px #f4a261;
  }
}

@keyframes gd-burst-b {
  0% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow:
      0 0 #9b5de5, 0 0 #00bbf9, 0 0 #8ac926, 0 0 #ffb703,
      0 0 #3a86ff, 0 0 #ff4d6d, 0 0 #f4a261, 0 0 #2a9d8f;
  }
  20% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      -14px -8px #9b5de5, 12px -10px #00bbf9, -10px 10px #8ac926, 14px 8px #ffb703,
      -4px -14px #3a86ff, 6px -12px #ff4d6d, -16px 2px #f4a261, 16px 0 #2a9d8f;
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
    box-shadow:
      -46px -30px #9b5de5, 44px -34px #00bbf9, -40px 26px #8ac926, 48px 22px #ffb703,
      -20px -44px #3a86ff, 24px -42px #ff4d6d, -54px 6px #f4a261, 56px 4px #2a9d8f;
  }
}

@keyframes gd-shine {
  0% {
    opacity: 0;
    transform: skewX(-14deg) translateX(-180%);
  }
  35% { opacity: 0.55; }
  100% {
    opacity: 0;
    transform: skewX(-14deg) translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gd-logo__layer--full {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .gd-logo__layer--slogan,
  .gd-logo__layer--left,
  .gd-logo__layer--right,
  .gd-logo__glow,
  .gd-logo__burst,
  .gd-logo__ring,
  .gd-logo__shine,
  .gd-logo__fx-b,
  .gd-logo__fx-c {
    display: none !important;
  }
}

@media (min-width: 900px) {
  :root {
    --gd-logo-w: 320px;
  }
}