/* =========================
   BUTTON-BASIS
========================= */
.topnav a,
.social-btn,
.back-button {
    position: relative;
    display: inline-block;
    overflow: hidden;

    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        text-shadow 0.25s ease;

    animation: buttonPulse var(--pulse-speed, 3.2s) ease-in-out infinite;
}

.topnav a::before,
.social-btn::before,
.back-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 229, 255, 0.80),
        rgba(255, 79, 216, 0.60),
        transparent
    );
    animation: laserLinePulse var(--pulse-speed, 3.2s) ease-in-out infinite;
}

.topnav a::after,
.social-btn::after,
.back-button::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 28%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.04),
        rgba(0, 229, 255, 0.22),
        rgba(255, 79, 216, 0.16),
        rgba(255, 255, 255, 0)
    );
    filter: blur(1px);
    pointer-events: none;
    animation: laserScan var(--scan-speed, 4.6s) linear infinite;
}

.topnav a:hover,
.social-btn:hover,
.back-button:hover {
    transform: translateY(-2px) scale(1.03);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 229, 255, 0.60);
    box-shadow:
        0 0 12px rgba(0, 229, 255, 0.18),
        0 0 22px rgba(255, 79, 216, 0.12);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.42),
        0 0 12px rgba(0, 229, 255, 0.28);
}

/* =========================
   MENÜBUTTONS
========================= */
.topnav a {
    margin: 0 10px;
    padding: 10px 18px;
    font-size: 0.90rem;
    letter-spacing: 0.14em;
}

.topnav a:nth-child(1) {
    --pulse-speed: 2.7s;
    --scan-speed: 5.2s;
}
.topnav a:nth-child(2) {
    --pulse-speed: 3.5s;
    --scan-speed: 4.3s;
}
.topnav a:nth-child(3) {
    --pulse-speed: 3.0s;
    --scan-speed: 5.9s;
}
.topnav a:nth-child(4) {
    --pulse-speed: 4.1s;
    --scan-speed: 4.8s;
}
.topnav a:nth-child(5) {
    --pulse-speed: 2.9s;
    --scan-speed: 6.1s;
}

.topnav a:nth-child(1)::after { animation-delay: 0.4s; }
.topnav a:nth-child(2)::after { animation-delay: 1.6s; }
.topnav a:nth-child(3)::after { animation-delay: 0.9s; }
.topnav a:nth-child(4)::after { animation-delay: 2.1s; }
.topnav a:nth-child(5)::after { animation-delay: 1.2s; }

/* =========================
   ZURÜCK-BUTTON
========================= */
.back-button-wrap {
    margin-top: 30px;
    text-align: center;
}

.back-button {
    padding: 12px 22px;
    font-size: 0.95rem;
    letter-spacing: 0.10em;
    --pulse-speed: 3.4s;
    --scan-speed: 5.4s;
}

.back-button::after {
    animation-delay: 0.7s;
}