* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-image: url(pexels-lukas-rychvalsky-2889618.jpg);
    background-size:  cover;
    background-repeat:no-repeat;
    display: flex;
    justify-content:center; 
    align-items:center;
    min-height: 100vh;
}
.glass-card {
    width: 80%;
    height: 500px;
    backdrop-filter: blur(10px) saturate(100%);
    display: flex;
    flex-direction: row; 
    gap: 60px;
    padding: 80px 80px;
    width: 80%;
    max-width: 1200px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 24px;
    color: white;
}
.profile-section {
    flex: 1; /* Mevcut alanın %50'sini alır */
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikeyde ortalar */
}
.menu-section {
    flex: 1; 
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.name-title {
    font-size: 4rem;
    margin: 0 0 10px 0;
    
}

.profession {
    font-size: 1.2rem;
    opacity: 0.8; /* Yazıyı biraz daha silik yaparak hiyerarşi sağlar */
    margin-bottom: 30px;
}

/* 5. Sağ Taraf (Menü) İnce Ayarları - Alt Çizgiler */
.menu-section ul {
    list-style: none; /* Madde imlerini (noktaları) kaldırır */
    padding: 0;
    margin: 0;
}

.menu-section li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Çizgi efekti */
}

.menu-section li:last-child {
    border-bottom: none; /* En alttaki elemanın çizgisini kaldırır */
}

.menu-section a {
    display: block;
    color: #ffffff;
    text-decoration: none; /* Linklerin alt çizgisini kaldırır */
    padding: 15px 0;       /* Metin ile çizgi arası boşluk */
    font-size: 1.1rem;
    transition: all 0.3s ease; /* Hover efekti için yumuşak geçiş */
}

/* Linklerin üzerine gelindiğinde olacaklar (Hover) */
.menu-section a:hover {
    padding-left: 10px; /* Sağa doğru hafifçe kayar */
    color: #4ade80;     /* Örnek: Yazılımcı yeşili rengi */
}
.social-links a {
    font-size: 2.0rem;
    display: flex;
    color: white;
    text-decoration: none;
}
.social-links a:hover {
    color: #4ade80; /* Örnek: Yazılımcı yeşili rengi */
    transform: scale(1.2); /* İkonu biraz büyütür */
    transition: all 0.3s ease; /* Hover efekti için yumuşak geçiş */
}
.social-links{
    display: flex;
    flex-direction: row;
    gap: 30px;
    
}
/* Ekran genişliği 768px ve altındaysa bu kurallar geçerli olur (Mobil cihazlar) */
@media (max-width: 768px) {
    
    .glass-card {
        flex-direction: column; /* Sol ve sağ sütunları alt alta dizer */
        padding: 40px 30px;     /* Mobilde yer kazanmak için iç boşlukları (padding) küçültür */
        gap: 40px;              /* İsim kısmı ile menü arasındaki boşluğu daraltır */
        width: 90%;             /* Kartın genişliğini dar ekranlara göre ayarlar */
    }

    .name-title {
        font-size: 2.5rem;      /* Büyük ismi mobilde ekrana sığması için biraz küçültür */
    }

    /* Mobilde daha şık durması için istersen tüm içerikleri merkeze (ortaya) hizalayabiliriz */
    /* (Eğer sola yaslı kalsın istersen aşağıdaki 3 bloğu silebilirsin) */
    .profile-section {
        align-items: center;
        text-align: center;
    }
    
    .menu-section li {
        text-align: center; /* Menü yazılarını ortalar */
    }

    .social-links {
        justify-content: center; /* Sosyal medya ikonlarını tam ortaya alır */
    }
}