/* --- NEUMORPHISM DEĞİŞKENLERİ --- */
:root {
    --bg-color: #e0e5ec;       /* Soft Gri-Mavi Zemin */
    --text-dark: #44476A;      /* Koyu Slate Yazı Rengi */
    --text-light: #9baacf;     /* Açık Yazı Rengi */
    --primary-color: #6D5DFC;  /* Vurgu Rengi (Mor-Mavi) */
    
    /* IŞIK VE GÖLGE FORMÜLÜ */
    /* Işık sol üstten (White), Gölge sağ alttan (Dark Grey) vuruyor */
    --shadow-light: -9px -9px 16px rgba(255, 255, 255, 0.6);
    --shadow-dark: 9px 9px 16px rgba(163, 177, 198, 0.6);
    
    /* İÇE GÖÇÜK (PRESSED) FORMÜLÜ */
    --inner-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.7), 
                    inset -6px -6px 10px 0 rgba(255, 255, 255, 0.8);
    
    --radius: 30px;            /* Kart Yuvarlaklığı */
    --btn-radius: 50px;        /* Buton Yuvarlaklığı (Pill) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.main-container { width: 100%; max-width: 420px; }

/* --- ANA KART (SOFT CARD) --- */
.neu-card {
    background-color: var(--bg-color);
    border-radius: var(--radius);
    padding: 40px 30px;
    /* Kartın kendisi de hafif dışa çıkıktır */
    box-shadow: var(--shadow-dark), var(--shadow-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* --- PROFİL --- */
.profile-section { width: 100%; margin-bottom: 30px; }

.avatar-wrapper {
    width: 120px; height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    padding: 6px; /* Resim ile halka arasındaki boşluk */
    /* Avatar Çerçevesi: Dışa çıkık halka */
    box-shadow: var(--shadow-dark), var(--shadow-light);
    background: var(--bg-color);
}

.avatar, .avatar-placeholder {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--text-dark);
    background: #e6e9ef;
}

.name { font-size: 1.6rem; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.title { font-size: 0.95rem; font-weight: 400; color: var(--text-light); }

.divider {
    height: 2px; width: 50px;
    background: #d1d9e6;
    margin: 20px auto;
    border-radius: 2px;
}

.bio { font-size: 0.9rem; line-height: 1.6; color: #677496; }

/* --- GRID BUTTONS --- */
.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
}

/* --- NEUMORPHIC BUTON (STANDART) --- */
.neu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 20px; /* Karemsi yuvarlak */
    text-decoration: none;
    color: var(--text-dark);
    background: var(--bg-color);
    
    /* Dışa Çıkık Efekt (Convex) */
    box-shadow: var(--shadow-dark), var(--shadow-light);
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.2); /* Çok ince highlight */
}

.neu-btn .icon {
    font-size: 1.5rem; margin-bottom: 8px;
    color: var(--text-dark); transition: color 0.2s;
}

.neu-btn span { font-size: 0.85rem; font-weight: 500; }

/* Hover & Active: İçe Çökme Efekti (Concave) */
.neu-btn:hover, .neu-btn:active {
    box-shadow: var(--inner-shadow);
    transform: translateY(2px); /* Hafif aşağı hareket */
}

.neu-btn:hover .icon { color: var(--primary-color); }

/* --- YUVARLAK SOSYAL BUTONLAR --- */
.social-row { display: flex; gap: 20px; margin-bottom: 30px; }

.neu-btn-circle {
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dark);
    background: var(--bg-color);
    box-shadow: var(--shadow-dark), var(--shadow-light);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.neu-btn-circle:hover {
    box-shadow: var(--inner-shadow);
    color: var(--primary-color);
}

/* --- PRIMARY BUTON (REHBERE KAYDET) --- */
.neu-btn-primary {
    width: 100%;
    padding: 16px;
    border-radius: var(--btn-radius);
    text-decoration: none;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s ease;
    
    /* Normalde dışa çıkık ama renkli değil, soft kalmalı */
    color: var(--primary-color);
    background: var(--bg-color);
    box-shadow: var(--shadow-dark), var(--shadow-light);
    border: 1px solid transparent;
}

.neu-btn-primary:hover {
    /* Hoverda renklenir ve içe çöker */
    box-shadow: var(--inner-shadow);
    color: var(--primary-color);
    font-size: 1.02rem; /* Çok hafif büyüme hissi */
}

/* Mobilde tek sütun olmasın, grid kalsın ama boşluk azalsın */
@media (max-width: 360px) {
    .neu-card { padding: 30px 20px; }
    .actions-grid { gap: 15px; }
}