.soButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90%;                 /* %100 yerine %90 yaparak kenarlardan boşluk bıraktık */
    margin: 0 auto;             /* Butonu hücrenin ortasına hizalar */
    height: 22px;               /* Yüksekliği azalttık (Daha kompakt) */
    font-size: 11px;            /* Yazı boyutu */
    font-weight: 600;           /* Yazı kalınlığı */
    color: #2d84d1;             /* Yazı rengi: Mavi */
    background-color: transparent; /* Arka plan: Saydam */
    border: 1px solid #2d84d1;  /* Çerçeve: Mavi (Yazıyla aynı ton) */
    border-radius: 4px;         /* Köşeler hafif yuvarlak */
    cursor: pointer;
    transition: all 0.2s ease;  /* Yumuşak geçiş */
    text-transform: uppercase;  /* Yazıyı büyük harfe çevirir (Şık durur) */
    letter-spacing: 0.5px;
}

/* Üzerine gelince (Hover) */
.soButton:hover {
    background-color: #2d84d1;  /* Arka plan mavi olsun */
    color: #ffffff;             /* Yazı beyaz olsun */
    box-shadow: 0 2px 5px rgba(45, 132, 209, 0.3); /* Hafif gölge */
}

/* Tıklanınca (Active) */
.soButton:active {
    transform: scale(0.96);     /* Tıklayınca hafifçe küçülme efekti */
}