/* Yumuşak geçişler */
html {
    scroll-behavior: smooth;
}

/* Word Animation Styles */
#changing-word {
    display: inline-block;
    width: 11ch;
    text-align: center;
    font-weight: 700;
    font-size: 2.25rem;
    padding: 0.125rem 0.5rem;
    user-select: none;
    color: white;
    position: relative;
}

/* Gradient Backgrounds */
.gradient1,
.gradient2,
.gradient3,
.gradient4,
.gradient5 {
    position: relative;
    padding: 0.125rem 0.5rem;
    color: white;
    z-index: 0;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    border-radius: 0.375rem;
}

.gradient1::before,
.gradient2::before,
.gradient3::before,
.gradient4::before,
.gradient5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    border-radius: inherit;
}

/* Gradient Colors */
.gradient1 {
    background-image: linear-gradient(90deg, #a78bfa, #f472b6);
}

.gradient2 {
    background-image: linear-gradient(90deg, #38bdf8, #22c55e);
}

.gradient3 {
    background-image: linear-gradient(90deg, #f97316, #ef4444);
}

.gradient4 {
    background-image: linear-gradient(90deg, #10b981, #3b82f6);
}

.gradient5 {
    background-image: linear-gradient(90deg, #ec4899, #fbbf24);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes fallOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

@keyframes teamFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes teamFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.fall-out {
    animation: fallOut 0.5s ease-in forwards;
}

.team-fade-in {
    animation: teamFadeIn 1s ease-out forwards;
}

.team-fade-out {
    animation: teamFadeOut 1s ease-in forwards;
}

/* Smooth Theme Transition */
html.transition,
html.transition * {
    transition: background-color 0.5s ease, color 0.5s ease !important;
}

/* Team Member Styles */
.team-member {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: rgb(30 41 59);
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.dark .team-member {
    background-color: rgb(226 232 240);
}

@media (min-width: 768px) {
    .team-member {
        grid-template-columns: 1fr 2fr;
    }
}

.team-member img {
    width: 100%;
    max-width: 20rem;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.skill-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgb(59 130 246);
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
}

.dark .skill-badge {
    background-color: rgb(37 99 235);
}

/* Social icons */
.social-icon {
    transition: all 0.3s ease;
    border-radius: 50%;
    padding: 0.5rem;
    display: inline-flex;
    cursor: pointer;
}

/* Href="#" olanlar */
.social-icon[href="#"] {
    opacity: 0.6;
    filter: grayscale(60%);
    cursor: default;
}

/* Platform colors */
.social-icon.instagram {
    color: #E1306C;
}

/* X icon color balance */
.social-icon.x {
    color: white;
}

.dark .social-icon.x {
    color: black;
}

/* Hover for X */
.social-icon.x:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.dark .social-icon.x:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.social-icon.linkedin {
    color: #0077B5;
}

.social-icon.youtube {
    color: #FF0000;
}

/* Hover Efektleri (sadece gerçek linkler için) */
.social-icon:not([href="#"]):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    filter: brightness(1.2) drop-shadow(0 0 8px currentColor);
}

/* Dark theme */
.dark .social-icon {
    opacity: 0.9;
}

.dark .social-icon[href="#"] {
    opacity: 0.4;
}

/* Start Exploring animation */
.start-button {
    position: relative;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #e4e4e4;
    /* Tailwind blue-600 */
    background-color: rgb(41, 41, 41);
    border-radius: 9999px;
    overflow: hidden;
    z-index: 10;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #ffffff;
}

.start-button span {
    position: relative;
    z-index: 20;
}

.start-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            red,
            orange,
            yellow,
            lime,
            cyan,
            blue,
            violet,
            red);
    background-size: 400% 400%;
    animation: hypnotize 6s linear infinite;
    filter: blur(10px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease, filter 0.4s ease;
    pointer-events: none;
}

.start-button:hover::before {
    opacity: 1;
    filter: blur(14px);
}

@keyframes hypnotize {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

a.card {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}


@keyframes warp-right-to-left {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-120vw);
        opacity: 0;
    }
}

@keyframes shake-horizontal-continuous {
    0% {
        transform: translateX(-24px);
    }

    50% {
        transform: translateX(24px);
    }

    100% {
        transform: translateX(-24px);
    }
}

.animate-shake-x-continuous {
    animation: shake-horizontal-continuous 1s ease-in-out infinite;
}

#upcomingevents {
    all: unset;
    box-sizing: border-box;
}