/* ========================================
   SMS Onay Section Stilleri (Dinamik Tema Uyumlu)
======================================== */
.sms-onay-section {
    /* Değişkenler: Temanın style.css/theme.css dosyalarından gelir */
    padding: 60px 0;
    /* Arka planı, temanın ikincil arka plan renginden alır */
    background-color: var(--background-secondary, #0f1419); 
    border-top: 1px solid var(--border, #2a2a3e);
    border-bottom: 1px solid var(--border, #2a2a3e);
    margin: 40px 0; 
}

/* Başlık alanı için ekstra stiller (opsiyonel) */
.sms-onay-header {
    text-align: center; 
    margin-bottom: 40px;
}
.sms-onay-header h2 {
    font-size: 1.8rem;
    color: var(--text-color, #fff);
    margin-bottom: 10px;
}
.sms-onay-header p {
    font-size: 1.1rem; 
    color: var(--text-muted, #aaa); 
    max-width: 600px; 
    margin: 0 auto;
}
.sms-onay-header h2 i {
    color: var(--primary, #007bff);
    margin-right: 10px;
}


/* Servis kutularının ızgarası */
.sms-onay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Dinamik ve responsive sütunlar */
    gap: 20px;
    justify-content: center;
}

/* Her bir servis kutusu */
.sms-onay-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    /* Arka planı, temanın kart renginden alır */
    background: var(--card-bg, #1e1e30);
    border-radius: 12px; 
    text-decoration: none;
    /* Kenarlık rengini, temanın kenarlık renginden alır */
    border: 1px solid var(--border, #2a2a3e);
    transition: all 0.3s ease; 
}

.sms-onay-item i {
    font-size: 2.5rem; 
    margin-bottom: 15px;
    transition: all 0.3s ease;
    /* İkon rengini, temanın normal metin renginden alır */
    color: var(--text-color, #fff);
}

.sms-onay-item span {
    font-size: 1rem;
    font-weight: 500;
    /* Yazı rengini, temanın soluk metin renginden alır */
    color: var(--text-muted, #aaa);
    transition: all 0.3s ease;
}

/* * Hover (Üzerine Gelme) Efektleri (Tema Uyumlu)
 */
.sms-onay-item:hover {
    /* Kutu havaya kalkar */
    transform: translateY(-8px);
    /* Kenarlık, temanın ana rengine (primary) döner */
    border-color: var(--primary, #007bff);
}

.sms-onay-item:hover i {
    transform: scale(1.1);
}

.sms-onay-item:hover span {
    /* Yazı, temanın ana rengine (primary) döner */
    color: var(--primary, #007bff); 
}

/* * İsteğe bağlı: Marka Renkleri (Çok daha şık durur)
 * (Bunlar tema değişkeni değil, sabit renklerdir)
 */
.sms-onay-item:hover .fa-google    { color: #DB4437; }
.sms-onay-item:hover .fa-facebook-f { color: #4267B2; }
.sms-onay-item:hover .fa-whatsapp   { color: #25D366; }
.sms-onay-item:hover .fa-telegram-plane,
.sms-onay-item:hover .fa-telegram { color: #0088cc; }
.sms-onay-item:hover .fa-twitter    { color: #1DA1F2; }
.sms-onay-item:hover .fa-shield-alt { color: #e02d2d; } /* NTTGame için */
.sms-onay-item:hover .fa-vk         { color: #4a76a8; } /* VK için */


/* * Responsive Tasarım (Mobil ve Tablet Uyumu)
 */
@media (max-width: 992px) {
    /* Auto-fit handles columns automatically */
}

@media (max-width: 768px) {
    .sms-onay-grid {
        gap: 15px;
    }
    .sms-onay-item i { font-size: 2rem; }
    .sms-onay-section { padding: 40px 0; }
    .sms-onay-header h2 { font-size: 1.5rem; }
    .sms-onay-header p { font-size: 1rem; }
}

@media (max-width: 480px) {
    .sms-onay-grid {
        gap: 10px;
    }
    .sms-onay-item { padding: 20px 10px; }
}