html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(135deg, #867dff7c, #100153); */
    background-image: linear-gradient(-20deg, #fb923c 0%, #10b981 100%); 
 display: flex;
  background-image: linear-gradient(-20deg, #272727 0%, #047857 100%);
    overflow: auto; /* Sayfa kaydırma etkin */
    font-family: "Quicksand", 'Times New Roman', Times, serif;
    color: #02033f;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Viewport yüksekliğine göre ayarlandı */
    width: 100vw; /* Viewport genişliğine göre ayarlandı */
}

.contact-card {
    background: rgba(255, 255, 255, 0.932); /* Turuncu Gradientli Buzlu Cam Etkisi */
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgb(14, 0, 78);
    padding: 20px;
    width: 80%; /* Kart genişliği %80 olarak ayarlandı */
    max-width: 400px; /* Maksimum genişlik küçültüldü */
    text-align: center; /* İçerikleri Ortala */
    position: relative;
    margin: 20px; /* Ekran kenarlarından uzaklık için margin */
    margin-top: 150px;
}

.profile-picture {
    border: 5px solid rgb(255, 136, 0);
    border-radius: 50%;
    width: 120px; /* Profil resmi boyutu küçültüldü */
    height: 120px; /* Profil resmi boyutu küçültüldü */
    overflow: hidden;
    position: relative;
    top: -60px; /* Kartın üstünde yer almak için negatif top değeri */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* İkonların taşmasını önler */
    margin-top: 20px;
}

.social-icons a {
    font-size: 2rem;
    color: #047857;
    margin: 0 15px; /* Social ikonlar arasına 15px boşluk */
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #ff7300;
}

.btn-gradient {
    box-shadow: 0 4px 10px rgb(14, 0, 78);
    background: linear-gradient(135deg, #d97706 0%, #10b981 100%); /* Lacivert Gradient */
    border: none;
    color: white;
    transition: background 0.3s, transform 0.3s;
    padding: 10px 20px;
    margin-bottom: 30px;
    font-size: 1.2rem;
    border-radius: 50px;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #f59e0b, #047857); /* Turuncu Gradient */
    transform: scale(1.05);
}

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

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 72, 0, 0.212), rgba(0, 75, 50, 0.788));
    animation: moveLights 10s infinite;
    z-index: -1;
}